/* ==========================================================================
   Design system — one set of tokens for every page.
   Mittivoy identity: warm paper neutrals, ink text, cyan/turquoise accent.
   Colour pairs used for text are checked against WCAG 2.2 AA (4.5:1).
   ========================================================================== */

/* Manrope, self-hosted (SIL OFL, vendor/fonts/OFL.txt) — Latin + Cyrillic for EN/RU/UZ. */
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("vendor/fonts/manrope-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("vendor/fonts/manrope-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("vendor/fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("vendor/fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  color-scheme: light;

  /* ---------- Typography ---------- */
  --font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --text-2xs: 0.6875rem;  /* 11px — eyebrows, overlay tags */
  --text-xs: 0.75rem;     /* 12px — meta, table heads */
  --text-sm: 0.8125rem;   /* 13px — secondary text, small controls, table cells */
  --text-base: 0.875rem;  /* 14px — body, controls */
  --text-md: 0.9375rem;   /* 15px — card titles */
  --text-lg: 1.0625rem;   /* 17px — section titles */
  --text-xl: 1.625rem;    /* 26px — page titles */
  --text-2xl: 2.25rem;    /* 36px — home hero */
  --weight-regular: 450;
  --weight-medium: 550;
  --weight-semibold: 650;
  --weight-bold: 750;
  --tracking-tight: -0.022em;
  --tracking-snug: -0.012em;
  --tracking-caps: 0.09em;
  --leading-tight: 1.2;
  --leading: 1.55;

  /* ---------- Spacing (4px grid) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ---------- Radii ---------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 999px;

  --nav-h: 61px;

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 150ms;          /* hover, buttons */
  --dur-menu: 180ms;     /* dropdowns, menus, dialogs, page fade */
  --dur-theme: 200ms;    /* theme switch */

  /* ---------- Colour — light (warm paper) ---------- */
  --bg: #f6f5f0;
  --surface: #ffffff;
  --surface-2: #eff5f6;      /* secondary surface: table heads, wells, tiles */
  --surface-3: #e5eef0;      /* hover on secondary surfaces, tracks */
  --input-bg: #ffffff;
  --border: #e4e5e0;
  --border-strong: #d2d5ce;  /* controls, hover borders */
  --divider: #ecede8;        /* hairlines inside cards and tables */
  --text: #17212c;
  --text-2: #3d4a58;         /* labels, emphasised secondary */
  --muted: #5f6e80;          /* secondary text (#687789 nudged to 4.5:1 on the paper background) */

  --primary: #079ab7;        /* brand accent: indicators, rings, icons, chart bars */
  --primary-hover: #087f99;
  --primary-solid: #07798f;  /* filled buttons — white text passes AA on it */
  --primary-solid-hover: #066577;
  --primary-deep: #06718a;   /* accent as text and links */
  --primary-tint: #e4f6f8;   /* accent subtle background */
  --primary-tint-2: #cbedf2;
  --ring: rgba(7, 154, 183, 0.30);
  --on-primary: #ffffff;

  --success: #15803d;
  --success-tint: #e6f4eb;
  --warning: #b45309;
  --warning-tint: #fcf1e1;
  --danger: #c2413b;
  --danger-tint: #fbebe9;
  --info: #2563eb;
  --info-tint: #e9f0fd;

  /* Data visualisation */
  --chart-primary: var(--primary);
  --chart-secondary: #9fb3c2;
  --chart-grid: rgba(23, 33, 44, 0.07);

  /* Season accents (Archive / Matrix tiles) */
  --season-ss: #c9517f;
  --season-aw: #b86420;
  --season-bts: #3570c4;

  /* Chips laid over photos stay light in both themes */
  --on-image-bg: rgba(255, 255, 255, 0.94);
  --on-image-border: rgba(16, 24, 32, 0.22);
  --on-image-text: #17212c;
  --on-image-dark: rgba(17, 24, 32, 0.74);
  --on-image-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
  --media-bg: #0f151b;

  --overlay: rgba(23, 33, 44, 0.42);
  --scrollbar: #cfd2cb;

  --highlight: 0 0 0 0 transparent; /* top-edge light on dark surfaces */
  --shadow-xs: 0 1px 2px rgba(23, 33, 44, 0.04);
  --shadow-sm: 0 1px 3px rgba(23, 33, 44, 0.06), 0 1px 2px rgba(23, 33, 44, 0.03);
  --shadow-md: 0 8px 20px -8px rgba(23, 33, 44, 0.14), 0 2px 4px -2px rgba(23, 33, 44, 0.05);
  --shadow-lg: 0 24px 48px -14px rgba(23, 33, 44, 0.24), 0 4px 10px -4px rgba(23, 33, 44, 0.06);

  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%235f6e80' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* Icons drawn with CSS masks (theme toggle, phone menu) */
  --icon-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E");
  --icon-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5z'/%3E%3C/svg%3E");
  --icon-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E");
  --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");

  /* Semantic aliases used by page styles */
  --best: var(--success);
  --best-tint: var(--success-tint);
  --worst: var(--danger);
  --worst-tint: var(--danger-tint);
  --warn: var(--warning);
  --warn-tint: var(--warning-tint);
  --card-bg: var(--surface);
  --primary-dark: var(--primary-hover);
  --gradient-brand: var(--primary-solid);
  --shadow: var(--shadow-sm);
  --shadow-lift: var(--shadow-lg);
}

/* ---------- Colour — dark (deep slate) ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #111820;
  --surface: #1b242e;
  --surface-2: #242f3a;
  --surface-3: #2b3744;
  --input-bg: #161f28;
  --border: #303d49;
  --border-strong: #3d4b59;
  --divider: #2a3640;
  --text: #f1f4f6;
  --text-2: #cfd7de;
  --muted: #a7b2be;

  --primary: #40c8de;
  --primary-hover: #65d9e9;
  --primary-solid: #40c8de;  /* ink text sits on it (≈9:1) */
  --primary-solid-hover: #65d9e9;
  --primary-deep: #65d9e9;
  --primary-tint: #203b46;
  --primary-tint-2: #284d5a;
  --ring: rgba(64, 200, 222, 0.34);
  --on-primary: #0b1a20;

  --success: #5cc98b;
  --success-tint: rgba(92, 201, 139, 0.13);
  --warning: #f0b45a;
  --warning-tint: rgba(240, 180, 90, 0.13);
  --danger: #f08c82;
  --danger-tint: rgba(240, 140, 130, 0.13);
  --info: #7fa9f5;
  --info-tint: rgba(127, 169, 245, 0.14);

  --chart-secondary: #5d6f80;
  --chart-grid: rgba(241, 244, 246, 0.07);

  --season-ss: #e889ae;
  --season-aw: #e6a067;
  --season-bts: #86aef0;

  --overlay: rgba(6, 10, 14, 0.66);
  --scrollbar: #3d4b59;

  --highlight: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 10px 24px -10px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 28px 56px -14px rgba(0, 0, 0, 0.7);

  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%23a7b2be' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Base
   ========================================================================== */
* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--scrollbar) transparent;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Theme switch: surfaces, borders and text cross-fade together (~200ms).
   Components that declare their own transition list include these too. */
:where(body, body *, body *::before, body *::after) {
  transition-property: background-color, border-color, color, fill, stroke, box-shadow;
  transition-duration: var(--dur-theme);
  transition-timing-function: var(--ease-in-out);
}

/* Content fades in on every page load (opacity + tiny lift, no layout shift). */
.page { animation: page-in var(--dur-menu) var(--ease) backwards; }
@keyframes page-in { from { opacity: 0; transform: translateY(4px); } }

a { color: inherit; }
a:focus-visible, [tabindex]:focus-visible, summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--radius-xs); }
h1, h2, h3 { color: var(--text); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-snug); line-height: var(--leading-tight); }
h2 { font-size: var(--text-lg); }
h3 { font-size: var(--text-md); }
strong, b { font-weight: var(--weight-semibold); }
small { font-size: var(--text-xs); }
::selection { background: var(--primary-tint-2); color: var(--text); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--primary-solid); }
/* Figures line up in columns and KPI values. */
table, .stat-value, .sales-value, .mini-meter small, .rank-pill, .badge, input[type="number"] { font-variant-numeric: tabular-nums; }

.hidden { display: none !important; }

/* ==========================================================================
   Top navigation
   ========================================================================== */
.topnav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--nav-h);
  padding: 0 var(--space-6);
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(1.3) blur(12px);
  -webkit-backdrop-filter: saturate(1.3) blur(12px);
  position: sticky;
  top: 0;
  z-index: 20;
}
.topnav .brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--text);
  flex: none;
  border-radius: var(--radius-md);
}
.topnav .brand img {
  display: block;
  height: 30px;
  width: auto;
  background: #fff; /* the logo artwork needs its white plate in both themes */
  border-radius: var(--radius-md);
  padding: 4px 7px;
  box-shadow: 0 0 0 1px var(--border), var(--shadow-xs);
}
.topnav nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 2px;
}
.topnav nav a {
  position: relative;
  text-decoration: none;
  padding: 7px 11px;
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: 20px;
  color: var(--muted);
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
/* Underline indicator: grows in on hover (neutral), stays on the active page (accent). */
.topnav nav a::after {
  content: "";
  position: absolute;
  left: 11px;
  right: 11px;
  bottom: -13px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--border-strong);
  opacity: 0;
  transform: scaleX(0.4);
  transition: transform var(--dur-menu) var(--ease), opacity var(--dur-menu) var(--ease), background-color var(--dur-theme) var(--ease-in-out);
}
.topnav nav a:hover { color: var(--text); background: color-mix(in srgb, var(--surface-3) 60%, transparent); }
.topnav nav a:hover::after { opacity: 1; transform: scaleX(1); }
.topnav nav a.active { color: var(--text); font-weight: var(--weight-semibold); }
.topnav nav a.active::after { opacity: 1; transform: scaleX(1); background: var(--primary); }
.topnav nav a:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
/* Eight pages (longer in RU/UZ): tighten the menu on laptop widths so it stays on one line. */
@media (max-width: 1280px) {
  .topnav { padding: 0 var(--space-4); gap: var(--space-3); }
  .topnav nav a { padding: 7px 7px; font-size: var(--text-sm); }
  .topnav nav a::after { left: 7px; right: 7px; }
}
@media (max-width: 1180px) {
  .topnav { gap: var(--space-2); padding: 0 var(--space-3); }
  .topnav nav { gap: 0; }
  .topnav nav a { padding: 6px 5px; font-size: 12.5px; letter-spacing: -0.005em; }
  .topnav nav a::after { left: 5px; right: 5px; }
  .lang-switch { margin-left: 6px; }
  .lang-switch button { padding: 5px 6px; }
}

/* Icon buttons: the emoji the script writes is hidden and a line icon is drawn instead. */
.theme-toggle, .nav-toggle {
  position: relative;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: var(--radius-md);
  font-size: 0;
  line-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
}
.theme-toggle { margin-left: var(--space-1); }
.theme-toggle::before, .nav-toggle::before {
  content: "";
  width: 17px;
  height: 17px;
  background: currentColor;
  -webkit-mask: var(--icon-moon) center / contain no-repeat;
  mask: var(--icon-moon) center / contain no-repeat;
}
:root[data-theme="dark"] .theme-toggle::before { -webkit-mask-image: var(--icon-sun); mask-image: var(--icon-sun); }
.theme-toggle:hover, .nav-toggle:hover { background: var(--surface-2); border-color: var(--border-strong); color: var(--text); }

/* ---------- Language switch (EN | RU | UZ) ---------- */
.lang-switch {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  margin-left: var(--space-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.lang-switch button {
  background: transparent;
  color: var(--muted);
  border: none;
  border-radius: 6px;
  padding: 5px 8px;
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  line-height: 18px;
  letter-spacing: 0.06em;
  box-shadow: none;
}
.lang-switch button:hover { background: transparent; color: var(--text); }
.lang-switch button.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
:root[data-theme="dark"] .lang-switch button.active { background: var(--surface-3); }

/* ---------- Phone: menu behind a menu button ---------- */
.nav-toggle { display: none; }
@media (max-width: 1020px) {
  .topnav { flex-wrap: wrap; padding: 10px var(--space-4); gap: var(--space-2); min-height: 0; }
  .nav-toggle { display: inline-flex; order: 3; }
  .nav-toggle::before { -webkit-mask-image: var(--icon-menu); mask-image: var(--icon-menu); }
  .nav-toggle[aria-expanded="true"]::before { -webkit-mask-image: var(--icon-close); mask-image: var(--icon-close); }
  .topnav nav { order: 2; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-1); }
  .topnav nav a { display: none; }
  .topnav nav a::after { display: none; }
  /* Open: the links drop below the header row, one per line. */
  .topnav.nav-open nav {
    order: 4; flex-basis: 100%; margin-left: 0; justify-content: flex-start;
    padding: var(--space-2) 0 var(--space-1); border-top: 1px solid var(--border);
    animation: menu-in var(--dur-menu) var(--ease);
  }
  .topnav.nav-open nav a { display: block; order: 5; flex-basis: 100%; padding: 10px 12px; font-size: var(--text-md); }
  .topnav.nav-open nav a.active { background: var(--primary-tint); color: var(--primary-deep); }
  .topnav.nav-open nav .lang-switch, .topnav.nav-open nav .theme-toggle { order: 1; margin: 0 0 var(--space-2); }
  .topnav.nav-open .nav-toggle { margin-left: auto; }
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px); } }

/* ==========================================================================
   Layout
   ========================================================================== */
.page { max-width: 1120px; margin: 0 auto; padding: var(--space-10) var(--space-6) var(--space-12); }
@media (max-width: 860px) { .page { padding: var(--space-6) var(--space-4) var(--space-10); } }

/* Page title block: plain title + description over a hairline, like the company site. */
.page-header {
  position: relative;
  margin: 0 0 var(--space-8);
  padding: 0 0 var(--space-6);
  border-bottom: 1px solid var(--border);
}
.page-header h1 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.15;
}
.page-header .subtitle { margin: 0; color: var(--muted); font-size: var(--text-md); line-height: 1.6; max-width: 70ch; }

/* Decorative floating bubbles / stars: retired (no continuous motion). */
.bubbles, .stars { display: none !important; }

/* ==========================================================================
   Cards
   ========================================================================== */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-5);
  box-shadow: var(--highlight), var(--shadow-xs);
}
.card h2 { margin: 0 0 var(--space-4); font-size: var(--text-lg); }
.card h3 { font-size: var(--text-md); margin: var(--space-6) 0 var(--space-3); }
@media (max-width: 560px) { .card { padding: var(--space-4); } }

/* Shared hover for clickable cards: 2px lift, firmer border, soft shadow. */
.tool-card.active, .nav-tile, .item-card, .model-card, .vt-save {
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
    box-shadow var(--dur-menu) var(--ease), background-color var(--dur-theme) var(--ease-in-out), color var(--dur-theme) var(--ease-in-out);
}

.hint { color: var(--muted); font-size: var(--text-sm); line-height: 1.55; margin: var(--space-2) 0 var(--space-4); }
.status { color: var(--muted); font-size: var(--text-sm); min-height: 1.2em; margin-top: var(--space-3); }
.status.error { color: var(--danger); font-weight: var(--weight-medium); }
.status:not(:empty) { animation: fade-in var(--dur-menu) var(--ease); }

/* Small uppercase section label */
.eyebrow, .filters-heading, .age-bar-label, .supplier-label {
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--muted);
}

/* ==========================================================================
   Buttons — primary (default), .ghost (secondary), .danger, .small
   ========================================================================== */
button, .link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--primary-solid);
  color: var(--on-primary);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 7px 15px;
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.005em;
  line-height: 20px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255, 255, 255, 0.10);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
    color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), opacity var(--dur) var(--ease), filter var(--dur) var(--ease);
}
button:hover, .link-button:hover { background: var(--primary-solid-hover); }
/* Pressed: a touch darker, shadow flattens — no scaling. */
button:active:not(:disabled), .link-button:active { box-shadow: none; filter: brightness(0.94); }
button:focus-visible, .link-button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
button:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
button:disabled:hover { background: var(--primary-solid); }

button.ghost {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
  font-weight: var(--weight-medium);
  box-shadow: var(--shadow-xs);
}
button.ghost:hover { background: var(--surface-2); border-color: var(--border-strong); }
button.ghost:disabled:hover { background: var(--surface); }
button.ghost.danger { color: var(--danger); }
button.ghost.danger:hover { background: var(--danger-tint); border-color: color-mix(in srgb, var(--danger) 40%, var(--border-strong)); }
button.small, .link-button.small { padding: 4px 10px; font-size: var(--text-sm); border-radius: var(--radius-sm); }

/* ==========================================================================
   Form controls
   ========================================================================== */
input[type="text"], input[type="number"], input[type="search"], input[type="email"], input[type="password"], select, textarea {
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: 20px;
  color: var(--text);
  background-color: var(--input-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 7px 11px;
  box-shadow: var(--shadow-xs);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    background-color var(--dur-theme) var(--ease-in-out), color var(--dur-theme) var(--ease-in-out);
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 0.85; }
input[type="text"]:hover, input[type="number"]:hover, input[type="search"]:hover, input[type="email"]:hover, input[type="password"]:hover, select:hover, textarea:hover {
  border-color: color-mix(in srgb, var(--border-strong) 55%, var(--muted));
}
input[type="text"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="email"]:focus, input[type="password"]:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--ring);
}
input:disabled, select:disabled, textarea:disabled {
  background-color: var(--surface-2);
  color: var(--muted);
  border-color: var(--border);
  box-shadow: none;
  cursor: not-allowed;
}
select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 30px;
  background-image: var(--chevron);
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
  cursor: pointer;
}
select option { background: var(--surface); color: var(--text); }

/* Label + control stack */
.filter-field { display: flex; flex-direction: column; }
.filter-field label {
  display: flex;
  align-items: flex-end;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-2);
  margin-bottom: 6px;
  line-height: var(--leading-tight);
}
.filter-field input, .filter-field select { width: 100%; }

/* ---------- File picker ---------- */
.file-drop {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}
.file-drop input[type="file"] { display: none; }
.file-drop label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--surface-2);
  color: var(--text);
  border: 1px dashed color-mix(in srgb, var(--primary) 45%, var(--border-strong));
  border-radius: var(--radius-md);
  padding: 9px 16px;
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  line-height: 20px;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.file-drop label:hover { background: var(--primary-tint); border-color: var(--primary); color: var(--primary-deep); }
.file-drop span { color: var(--muted); font-size: var(--text-sm); }

/* ---------- Chips (filters, ages) ---------- */
.age-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: var(--space-1) 0 6px; }
.age-chip {
  background: var(--surface);
  color: var(--text-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  padding: 3px 12px;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  box-shadow: none;
}
.age-chip:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }
.age-chip.active, .age-chip.active:hover { background: var(--primary-tint); color: var(--primary-deep); border-color: color-mix(in srgb, var(--primary) 55%, transparent); font-weight: var(--weight-semibold); }
.age-chip:disabled { opacity: 0.45; cursor: default; }
.age-chip:disabled:hover { background: var(--surface); }

/* ==========================================================================
   Tables
   ========================================================================== */
.table-wrap {
  overflow-x: auto;
  margin: var(--space-3) 0 var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--highlight), var(--shadow-xs);
}
table { border-collapse: collapse; width: 100%; font-size: var(--text-sm); }
th, td { border-bottom: 1px solid var(--divider); padding: 10px 14px; text-align: left; white-space: nowrap; vertical-align: middle; }
th {
  background: var(--surface-2);
  color: var(--text-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.01em;
  border-bottom-color: var(--border);
  position: sticky;
  top: 0;
  z-index: 1;
}
td { color: var(--text); }
tbody td { transition: background-color var(--dur) var(--ease), color var(--dur-theme) var(--ease-in-out), border-color var(--dur-theme) var(--ease-in-out); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: color-mix(in srgb, var(--surface-2) 65%, var(--surface)); }
td.num, th.num { text-align: right; }

/* ---------- Badges (status always carries its text, not colour alone) ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 18px;
  padding: 1px 9px 1px 8px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  background: var(--surface-2);
  color: var(--text-2);
}
.badge-best, .badge-worst, .badge-warn, .badge-info { box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 18%, transparent); }
.badge-best::before, .badge-worst::before, .badge-warn::before, .badge-info::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-best { background: var(--success-tint); color: var(--success); }
.badge-worst { background: var(--danger-tint); color: var(--danger); }
.badge-warn { background: var(--warning-tint); color: var(--warning); }
.badge-info { background: var(--info-tint); color: var(--info); }

/* ==========================================================================
   Dialogs — short fade + lift in, and the same out
   ========================================================================== */
dialog {
  color: var(--text);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-menu) var(--ease), transform var(--dur-menu) var(--ease),
    overlay var(--dur-menu) allow-discrete, display var(--dur-menu) allow-discrete;
}
dialog[open] { opacity: 1; transform: none; }
@starting-style { dialog[open] { opacity: 0; transform: translateY(8px); } }
dialog::backdrop {
  background: var(--overlay);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity var(--dur-menu) var(--ease), overlay var(--dur-menu) allow-discrete, display var(--dur-menu) allow-discrete;
}
dialog[open]::backdrop { opacity: 1; }
@starting-style { dialog[open]::backdrop { opacity: 0; } }

/* Disclosure panels (details/summary) open with a short fade. */
details[open] > :not(summary) { animation: fade-in var(--dur-menu) var(--ease); }
summary { transition: color var(--dur) var(--ease); }

@keyframes fade-in { from { opacity: 0; transform: translateY(-2px); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(6px); } }

/* ==========================================================================
   Reduced motion: keep colour changes, drop movement.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after, ::backdrop {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ==========================================================================
   Retail Assistant side panel + corner bubble (assistant-panel.js)
   ========================================================================== */
.ai-panel { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.ai-panel.open { pointer-events: auto; }
.ai-panel-backdrop {
  position: absolute; inset: 0;
  background: var(--overlay);
  opacity: 0;
  transition: opacity 220ms var(--ease);
}
.ai-panel.open .ai-panel-backdrop { opacity: 1; }
.ai-panel-sheet {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(480px, 100%);
  display: flex; flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  transform: translateX(104%);
  transition: transform 260ms var(--ease);
}
.ai-panel.open .ai-panel-sheet { transform: none; }
.ai-panel-head {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
}
.ai-panel-mark {
  flex: none; display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--primary-tint);
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--primary);
}
.ai-panel-mark img { width: 20px; height: 20px; }
.ai-panel-title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.ai-panel-title strong { font-size: var(--text-md); color: var(--text); }
.ai-panel-title span { font-size: var(--text-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-panel-btn {
  flex: none; display: grid; place-items: center;
  width: 34px; height: 34px; padding: 0;
  border: 0; border-radius: var(--radius-md);
  background: transparent; color: var(--muted);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.ai-panel-btn:hover { background: var(--surface-2); color: var(--text); }
.ai-panel-btn svg { width: 18px; height: 18px; }
.ai-panel-frame { flex: 1; width: 100%; border: 0; background: var(--surface); }
html.ai-panel-open { overflow: hidden; }

.ai-bubble {
  position: fixed; right: 20px; bottom: 20px; z-index: 50;
  display: grid; place-items: center;
  width: 58px; height: 58px; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow-lg), 0 0 0 2px var(--primary);
  cursor: pointer;
  transition: transform var(--dur) var(--ease);
}
.ai-bubble::before {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid var(--primary);
  opacity: 0;
  animation: ai-ping 2.8s var(--ease) infinite;
}
.ai-bubble:hover { transform: scale(1.06); }
.ai-bubble img { width: 28px; height: 28px; }
.ai-bubble span {
  position: absolute; right: -4px; top: -4px;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  background: var(--primary-solid); color: var(--on-primary);
  font-size: 10px; font-weight: var(--weight-bold); letter-spacing: 0.04em;
}
html.ai-panel-open .ai-bubble { opacity: 0; pointer-events: none; }
@keyframes ai-ping { 0% { opacity: 0.6; transform: scale(0.9); } 70%, 100% { opacity: 0; transform: scale(1.25); } }
@media (max-width: 560px) {
  .ai-bubble { right: 14px; bottom: 14px; width: 52px; height: 52px; }
}

/* ==========================================================================
   Signed-in person's menu (theme.js initSession)
   ========================================================================== */
.user-menu { position: relative; margin-left: var(--space-1); }
.user-button {
  width: 34px; height: 34px; padding: 0;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--primary-tint); color: var(--primary-deep);
  border: 1px solid var(--primary-tint-2);
  font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: 0.02em;
  box-shadow: none;
}
.user-button:hover { background: var(--primary-tint-2); }
.user-panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 30;
  display: none; flex-direction: column; gap: 2px;
  min-width: 220px; max-width: 280px;
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.user-menu.open .user-panel { display: flex; animation: fade-in var(--dur-menu) var(--ease); }
.user-panel strong { color: var(--text); font-size: var(--text-base); overflow-wrap: anywhere; }
.user-panel .user-email { color: var(--muted); font-size: var(--text-sm); overflow-wrap: anywhere; }
.user-panel .user-role { color: var(--primary-deep); font-size: var(--text-xs); font-weight: var(--weight-semibold); margin: var(--space-1) 0 var(--space-3); }
.user-panel .user-logout { align-self: flex-start; }
.session-note { color: var(--warning); background: var(--warning-tint); border-color: transparent; }
html.no-assistant .ai-orb, html.no-assistant .ai-bubble { display: none !important; }
.nav-count {
  display: inline-grid; place-items: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--radius-full);
  background: var(--danger); color: #fff;
  font-size: 10px; font-weight: var(--weight-bold); line-height: 1;
}
.dept-switch {
  max-width: 170px;
  padding: 5px 28px 5px 10px;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  border-color: var(--primary-tint-2);
  background-color: var(--primary-tint);
  color: var(--primary-deep);
}
html:not(.is-admin) .year-art-btn { display: none !important; }


/* ==========================================================================
   Grouped top menu (theme.js groupNav): Sales ▾ · Assortment ▾ · Tools ▾
   ========================================================================== */
.nav-group { position: relative; }
.nav-group-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 11px; border: 0; border-radius: var(--radius-md);
  background: transparent; box-shadow: none;
  color: var(--muted); font: inherit; font-size: var(--text-base); font-weight: var(--weight-medium); line-height: 20px;
  white-space: nowrap; cursor: pointer; position: relative;
}
.nav-group-btn::after {   /* chevron */
  content: ""; width: 7px; height: 7px; margin-top: -3px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg); transition: transform var(--dur) var(--ease); opacity: 0.7;
}
.nav-group-btn:hover, .nav-group.open .nav-group-btn { color: var(--text); background: color-mix(in srgb, var(--surface-3) 60%, transparent); }
.nav-group.open .nav-group-btn::after { transform: rotate(-135deg); margin-top: 3px; }
.nav-group.has-active .nav-group-btn { color: var(--text); font-weight: var(--weight-semibold); }
.nav-group.has-active .nav-group-btn > span { position: relative; }
.nav-group.has-active .nav-group-btn > span::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -20px; height: 2px;
  border-radius: 2px 2px 0 0; background: var(--primary);
}
.nav-menu {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 40;
  display: none; flex-direction: column; gap: 2px;
  min-width: 230px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.nav-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } /* hover bridge */
.nav-group.open .nav-menu { display: flex; animation: fade-in var(--dur-menu) var(--ease); }
@media (hover: hover) and (min-width: 1021px) {
  .nav-group:hover .nav-menu { display: flex; }
}
.topnav nav .nav-menu a { display: block; padding: 9px 12px; font-size: var(--text-base); color: var(--text-2); }
.topnav nav .nav-menu a::after { display: none; }
.topnav nav .nav-menu a:hover { background: var(--surface-2); color: var(--text); }
.topnav nav .nav-menu a.active { background: var(--primary-tint); color: var(--primary-deep); }

/* Language and theme inside the account menu */
.user-prefs {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  margin: 0 0 var(--space-3); padding: var(--space-3) 0 0; border-top: 1px solid var(--divider);
}
.user-prefs .lang-switch { margin: 0; }
.user-panel { min-width: 250px; }
.dept-switch { min-width: 140px; }

/* With the links grouped there is room again: back to the comfortable size. */
@media (max-width: 1280px) and (min-width: 1021px) {
  .topnav nav a, .nav-group-btn { padding: 7px 9px; font-size: var(--text-sm); }
}

/* Phone: the groups open out inside the ☰ menu, each with its name as a small heading. */
@media (max-width: 1020px) {
  .nav-group { display: none; }
  .topnav.nav-open .nav-group { display: block; order: 5; flex-basis: 100%; }
  .topnav.nav-open .nav-group-btn {
    pointer-events: none; padding: 10px 12px 2px;
    font-size: var(--text-2xs); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted);
  }
  .topnav.nav-open .nav-group-btn::after, .topnav.nav-open .nav-group-btn > span::after { display: none; }
  .topnav.nav-open .nav-menu {
    position: static; display: flex; min-width: 0; padding: 0;
    border: 0; box-shadow: none; background: transparent; animation: none;
  }
  .topnav.nav-open nav .nav-menu a { padding: 10px 12px 10px 20px; font-size: var(--text-md); }
  .topnav.nav-open .user-menu { order: 6; }
}