/* ==========================================================================
   FINO DESIGN SYSTEM — tokens + base component classes
   Canonical spec: ../FINO-DESIGN-SYSTEM.md
   Direction: LIGHT Apple-clean spine + Linear-grade discipline. Single accent #B8864E.
   Every value derived from the six reference systems (Apple / Linear / ElevenLabs /
   Cursor / Mastercard / Ollama) — see the .md for citations.

   ADOPTION: link this AFTER style.css / admin-nav.css, then use --fino-* vars and
   .fino-* classes. This file does NOT modify existing pages or selectors.
   ========================================================================== */

/* Inter is already imported by style.css. If used standalone, uncomment:
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); */

:root {
  /* ---- 1. Color: canvas & surface ---------------------------------------- */
  --fino-canvas:            #FAF6EE;
  --fino-canvas-sunken:     #F2EDE0;
  --fino-surface:           #FFFFFF;
  --fino-surface-raised:    #FFFFFF;
  --fino-surface-sunken:    #F2EDE0;
  --fino-ink-invert-surface:#17181d;

  /* ---- Color: hairlines & borders --------------------------------------- */
  --fino-hairline:          #E3DBC8;
  --fino-hairline-soft:     #EFE9DA;
  --fino-hairline-strong:   #d4d8df;

  /* ---- Color: text / ink ------------------------------------------------- */
  --fino-ink:               #1A1410;
  --fino-ink-secondary:     #4A413A;
  --fino-ink-muted:         #5C5247;
  --fino-ink-faint:         #8E8478;
  --fino-ink-disabled:      #a3a7af;
  --fino-on-accent:         #1A1410;
  --fino-on-invert:         #ffffff;
  --fino-on-invert-muted:   rgba(255, 255, 255, 0.7);

  /* ---- Color: accent (the single interactive color) --------------------- */
  --fino-accent:            #B8864E;
  --fino-accent-hover:      #A07238;
  --fino-accent-press:      #9C7038;
  --fino-accent-rgb:        184, 134, 78;
  --fino-accent-soft:       #FBF2E0;
  --fino-focus-ring:        rgba(184, 134, 78, 0.32);

  /* ---- Color: semantic --------------------------------------------------- */
  --fino-success:           #137a45;
  --fino-success-soft:      rgba(19, 122, 69, 0.10);
  --fino-warn:              #855410;   /* AA: 6.42:1 on white, 5.56:1 on -soft chip */
  --fino-warn-soft:         rgba(133, 84, 16, 0.10);
  --fino-danger:            #c0271f;
  --fino-danger-soft:       rgba(192, 39, 31, 0.10);
  --fino-danger-ring:       rgba(192, 39, 31, 0.28);
  --fino-info:              #106e7c;   /* teal — its OWN hue, never the action accent. 5.93:1 white, 5.12:1 chip */
  --fino-info-soft:         rgba(16, 110, 124, 0.10);

  /* ---- Color: terminal / health traffic lights -------------------------- */
  --fino-term-red:          #ff5f56;
  --fino-term-yellow:       #ffbd2e;
  --fino-term-green:        #27c93f;

  /* ---- 2. Typography ----------------------------------------------------- */
  --fino-font: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Helvetica Neue", Arial, sans-serif;
  --fino-font-display: "Inter Display", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --fino-font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* size / weight / line-height / tracking grouped per token */
  --fino-text-display:        700 36px/1.1 var(--fino-font-display);
  --fino-text-display-track:  -0.02em;
  --fino-text-h1:             700 28px/1.2 var(--fino-font-display);
  --fino-text-h1-track:       -0.015em;
  --fino-text-h2:             600 20px/1.3 var(--fino-font);
  --fino-text-h2-track:       -0.012em;
  --fino-text-h3:             600 17px/1.35 var(--fino-font);
  --fino-text-h3-track:       -0.01em;
  --fino-text-body:           400 17px/1.45 var(--fino-font);
  --fino-text-body-track:     -0.01em;
  --fino-text-ui:             400 14px/1.4 var(--fino-font);
  --fino-text-ui-strong:      600 14px/1.4 var(--fino-font);
  --fino-text-ui-track:       -0.006em;
  --fino-text-button:         600 14px/1.0 var(--fino-font);
  --fino-text-eyebrow:        600 12px/1.3 var(--fino-font);
  --fino-text-eyebrow-track:  0.06em;
  --fino-text-caption:        400 12px/1.35 var(--fino-font);
  --fino-text-mono:           400 13px/1.5 var(--fino-font-mono);

  /* ---- 3. Spacing (4px base) -------------------------------------------- */
  --fino-space-1: 4px;
  --fino-space-2: 8px;
  --fino-space-3: 12px;
  --fino-space-4: 16px;
  --fino-space-5: 20px;
  --fino-space-6: 32px;
  --fino-space-7: 48px;
  --fino-space-8: 64px;
  --fino-max:     1240px;

  /* ---- 4. Radius -------------------------------------------------------- */
  --fino-radius-xs:   4px;
  --fino-radius-sm:   6px;
  --fino-radius-md:   8px;
  --fino-radius-lg:   12px;
  --fino-radius-xl:   16px;
  --fino-radius-pill: 9999px;
  --fino-btn-radius: 8px;
  --fino-table-row-h: 56px;
  --fino-card-radius: 12px;

  /* ---- 5. Elevation & motion ------------------------------------------- */
  --fino-elev-0:     0 1px 2px rgba(40, 28, 14, 0.04), 0 1px 1px rgba(40, 28, 14, 0.03);
  --fino-elev-1:     0 2px 4px rgba(40, 28, 14, 0.06), 0 1px 2px rgba(40, 28, 14, 0.04);
  --fino-elev-2:     0 8px 16px rgba(40, 28, 14, 0.08), 0 2px 4px rgba(40, 28, 14, 0.04);
  --fino-elev-3:     0 16px 48px rgba(20, 28, 45, 0.12);
  --fino-elev-image: 0 5px 30px rgba(0, 0, 0, 0.18);
  --fino-overlay:    rgba(17, 18, 29, 0.45);
  --fino-press:      scale(0.97);
  --fino-motion-snap: 90ms;
  --fino-motion-base: 180ms;
  --fino-motion-glide: 320ms;
  --fino-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --fino-ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1);
  --fino-transition: var(--fino-motion-base) var(--fino-ease-in-out);
}

/* ==========================================================================
   TYPOGRAPHY UTILITIES
   ========================================================================== */
.fino-display    { font: var(--fino-text-display);  letter-spacing: var(--fino-text-display-track); color: var(--fino-ink); margin: 0; }
.fino-h1         { font: var(--fino-text-h1);        letter-spacing: var(--fino-text-h1-track);      color: var(--fino-ink); margin: 0; }
.fino-h2         { font: var(--fino-text-h2);        letter-spacing: var(--fino-text-h2-track);      color: var(--fino-ink); margin: 0; }
.fino-h3         { font: var(--fino-text-h3);        letter-spacing: var(--fino-text-h3-track);      color: var(--fino-ink); margin: 0; }
.fino-body       { font: var(--fino-text-body);      letter-spacing: var(--fino-text-body-track);    color: var(--fino-ink-secondary); }
.fino-body-strong{ font: var(--fino-text-body); font-weight: 600; letter-spacing: var(--fino-text-body-track); color: var(--fino-ink); }
.fino-ui         { font: var(--fino-text-ui);        letter-spacing: var(--fino-text-ui-track);      color: var(--fino-ink-secondary); }
.fino-ui-strong  { font: var(--fino-text-ui); font-weight: 600; letter-spacing: var(--fino-text-ui-track); color: var(--fino-ink); }
.fino-caption    { font: var(--fino-text-caption);   color: var(--fino-ink-muted); }
.fino-eyebrow {
  font: var(--fino-text-eyebrow);
  letter-spacing: var(--fino-text-eyebrow-track);
  text-transform: uppercase;
  color: var(--fino-ink-muted);
  display: inline-flex; align-items: center; gap: var(--fino-space-2);
}
.fino-eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: var(--fino-radius-pill);
  background: var(--fino-accent); flex: none;
}
.fino-mono, .fino-id {
  font: var(--fino-text-mono);
  color: var(--fino-ink-secondary);
}
.fino-id {
  background: var(--fino-surface-sunken);
  border-radius: var(--fino-radius-xs);
  padding: 2px 6px;
}
.fino-muted   { color: var(--fino-ink-muted); }
.fino-link    { color: var(--fino-accent); text-decoration: none; }
.fino-link:hover { color: var(--fino-accent-hover); text-decoration: underline; }

/* ==========================================================================
   LAYOUT — page shell, top nav, nav rail, page header
   ========================================================================== */
.fino-page {
  font: var(--fino-text-body);
  letter-spacing: var(--fino-text-body-track);
  color: var(--fino-ink);
  background: var(--fino-canvas);
  -webkit-font-smoothing: antialiased;
}
.fino-shell {
  max-width: var(--fino-max);
  margin: 0 auto;
  padding: var(--fino-space-6);
}

/* 6.1 Top nav */
.fino-topbar {
  display: flex; align-items: center; justify-content: space-between;
  height: 56px; padding: 0 var(--fino-space-6);
  background: var(--fino-surface);
  border-bottom: 1px solid var(--fino-hairline);
  position: sticky; top: 0; z-index: 40;
}
.fino-topbar__left  { display: flex; align-items: center; gap: var(--fino-space-3); }
.fino-topbar__right { display: flex; align-items: center; gap: var(--fino-space-4); }
.fino-topbar__sub   { font: var(--fino-text-ui); color: var(--fino-ink-muted); }
.fino-topbar a      { color: var(--fino-ink-secondary); text-decoration: none; font: var(--fino-text-ui); }
.fino-topbar a:hover{ color: var(--fino-ink); }

/* 6.2 Nav rail */
.fino-nav { display: flex; flex-wrap: wrap; gap: var(--fino-space-1); margin-bottom: var(--fino-space-5); }
.fino-nav__item {
  font: var(--fino-text-ui);
  color: var(--fino-ink-muted);
  padding: 8px 12px;
  border-radius: var(--fino-radius-md);
  text-decoration: none;
  transition: background var(--fino-transition), color var(--fino-transition);
}
.fino-nav__item:hover { background: var(--fino-surface-sunken); color: var(--fino-ink-secondary); }
.fino-nav__item.is-active {
  color: var(--fino-accent);
  background: var(--fino-accent-soft);
  font-weight: 600;
}
.fino-nav__item:focus-visible { outline: 3px solid var(--fino-focus-ring); outline-offset: 1px; }

/* 6.3 Page header */
.fino-page-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--fino-space-4); margin-bottom: var(--fino-space-5);
}
.fino-page-header__titles { display: flex; flex-direction: column; gap: var(--fino-space-2); }
.fino-page-header h1 { font: var(--fino-text-h1); letter-spacing: var(--fino-text-h1-track); color: var(--fino-ink); margin: 0; }
.fino-page-header__actions { display: flex; align-items: center; gap: var(--fino-space-2); }

/* ==========================================================================
   6.4 CARD / PANEL
   ========================================================================== */
.fino-card {
  background: var(--fino-surface);
  border: 1px solid var(--fino-hairline);
  border-radius: var(--fino-card-radius);
  padding: var(--fino-space-5);
  box-shadow: var(--fino-elev-0);
}
.fino-card > :first-child { margin-top: 0; }
.fino-card--inset    { background: var(--fino-surface-raised); }
.fino-card--flush    { padding: 0; overflow: hidden; }   /* wrap a .fino-table */
.fino-card--interactive {
  cursor: pointer;
  transition: box-shadow var(--fino-transition), border-color var(--fino-transition);
}
.fino-card--interactive:hover {
  box-shadow: var(--fino-elev-2);
  border-color: var(--fino-hairline-strong);
}
.fino-card__title { font: var(--fino-text-h2); letter-spacing: var(--fino-text-h2-track); color: var(--fino-ink); margin: 0 0 var(--fino-space-4); }

/* ==========================================================================
   6.5 DATA TABLE
   ========================================================================== */
.fino-table { width: 100%; border-collapse: collapse; font: var(--fino-text-ui); }
.fino-table thead th {
  text-align: left;
  font: var(--fino-text-button); /* 14/600 */
  color: var(--fino-ink-muted);
  background: var(--fino-surface-sunken);
  padding: 12px 16px;
  border-bottom: 1px solid var(--fino-hairline);
  white-space: nowrap;
}
.fino-table th.is-numeric, .fino-table td.is-numeric { text-align: right; font-variant-numeric: tabular-nums; }
.fino-table tbody td {
  color: var(--fino-ink-secondary);
  height: var(--fino-table-row-h);
  padding: 12px 16px;
  border-bottom: 1px solid var(--fino-hairline-soft);
  vertical-align: middle;
}
.fino-table tbody tr:last-child td { border-bottom: 0; }
.fino-table tbody tr.is-clickable { cursor: pointer; }
.fino-table tbody tr.is-clickable:hover { background: var(--fino-accent-soft); }
.fino-table tbody tr.is-selected { background: var(--fino-accent-soft); box-shadow: inset 2px 0 0 var(--fino-accent); }
.fino-table--zebra tbody tr:nth-child(even) { background: var(--fino-canvas-sunken); }
.fino-table__empty td, .fino-table__empty {
  text-align: center; color: var(--fino-ink-muted);
  padding: var(--fino-space-8) var(--fino-space-4);
}
.fino-table__error td, .fino-table__error {
  text-align: center; color: var(--fino-danger); padding: var(--fino-space-7) var(--fino-space-4);
}

/* Attention row — needs operator action (e.g. awaiting confirmation) */
.fino-table tbody tr.is-attention td { background: var(--fino-warn-soft); }
.fino-table tbody tr.is-attention.is-clickable:hover td { background: var(--fino-warn-soft); }

/* Numeric / right-aligned column */
.fino-table .fino-col-right, .fino-col-right { text-align: right; font-variant-numeric: tabular-nums; }

/* Stacked primary+meta cell (e.g. store name + location) */
.fino-cell-stack { display: flex; flex-direction: column; gap: 2px; }
.fino-cell-stack small { font: var(--fino-text-caption); color: var(--fino-ink-muted); }

/* Product cell with thumbnail */
.fino-cell-product { display: flex; align-items: center; gap: var(--fino-space-3); }
.fino-thumb {
  width: 36px; height: 36px; border-radius: var(--fino-radius-sm);
  border: 1px solid var(--fino-hairline); background: var(--fino-surface-sunken);
  flex: none; display: grid; place-items: center; color: var(--fino-ink-disabled);
  overflow: hidden;
}
.fino-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Row action cluster (right-aligned) */
.fino-row-actions { display: flex; gap: var(--fino-space-1); justify-content: flex-end; white-space: nowrap; align-items: center; }

/* Keyboard-operable row trigger — a real focusable control inside the row's
   first cell so the row is reachable by Tab and operable by Enter/Space, with a
   visible focus ring. Pair with tr.is-clickable for the hover tint. */
.fino-row-trigger {
  appearance: none; background: transparent; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--fino-space-2);
  border-radius: var(--fino-radius-xs);
}
.fino-row-trigger:focus-visible { outline: 3px solid var(--fino-focus-ring); outline-offset: 2px; }

/* Inline-editable numeric cell (on-hand) shown as a focused input */
.fino-editcell { display: inline-flex; align-items: center; }
.fino-editcell .fino-input {
  width: 76px; min-height: 32px; padding: 5px 8px; text-align: right;
  font: var(--fino-text-ui);
}
.fino-editcell.is-active .fino-input {
  border-color: var(--fino-accent); box-shadow: 0 0 0 3px var(--fino-focus-ring);
}

/* Dense tracking editor used in admin order box rows */
.fino-tracking-edit {
  display: grid;
  grid-template-columns: minmax(86px, 0.5fr) minmax(180px, 1fr) auto;
  gap: var(--fino-space-2);
  align-items: center;
  min-width: min(520px, 58vw);
}
.fino-tracking-edit .fino-input {
  min-height: 32px;
  padding: 6px 8px;
  font: var(--fino-text-ui);
  letter-spacing: 0;
}

/* Skeleton table rows (loading) */
.fino-skeleton--cell { height: 14px; width: 80%; }
.fino-skeleton--pill { height: 18px; width: 64px; border-radius: var(--fino-radius-pill); }
.fino-skeleton--num  { width: 40px; margin-left: auto; }

/* ==========================================================================
   6.6 BUTTONS
   ========================================================================== */
.fino-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--fino-space-2);
  font: var(--fino-text-button);
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: var(--fino-btn-radius);
  cursor: pointer;
  transition: background var(--fino-transition), color var(--fino-transition),
              border-color var(--fino-transition), transform var(--fino-transition);
  text-decoration: none;
  -webkit-appearance: none; appearance: none;
}
.fino-btn:active:not(:disabled) { transform: var(--fino-press); }
.fino-btn:focus-visible { outline: 3px solid var(--fino-focus-ring); outline-offset: 1px; }
.fino-btn:disabled, .fino-btn.is-disabled {
  cursor: not-allowed; transform: none;
  background: var(--fino-surface-sunken); color: var(--fino-ink-disabled); border-color: var(--fino-hairline);
}

/* Primary — Apple pill */
.fino-btn--primary {
  background: var(--fino-accent); color: var(--fino-on-accent);
  border-radius: var(--fino-btn-radius); padding: 10px 22px;
}
.fino-btn--primary:hover:not(:disabled) { background: var(--fino-accent-hover); }
.fino-btn--primary:active:not(:disabled) { background: var(--fino-accent-press); }

/* Secondary */
.fino-btn--secondary {
  background: var(--fino-surface); color: var(--fino-ink);
  border-color: var(--fino-hairline-strong); padding: 9px 17px;
}
.fino-btn--secondary:hover:not(:disabled) { background: var(--fino-surface-sunken); border-color: var(--fino-ink-muted); }

/* Compact variant — for dense table-row actions (e.g. Confirm).
   Real reduced control: 32px min-height + tighter padding/label, NOT a min-height reset
   and NOT a manually shrunk primary. Compose with any variant: .fino-btn--primary.fino-btn--sm */
.fino-btn--sm {
  min-height: 32px;
  font: var(--fino-text-eyebrow); letter-spacing: 0; text-transform: none;
  padding: 6px 14px;
}
.fino-btn--sm.fino-btn--primary  { padding: 7px 16px; }   /* keep the pill proportionate at 32px */
.fino-btn--sm.fino-btn--tertiary { padding: 6px 10px; }

/* Tertiary / link */
.fino-btn--tertiary {
  background: transparent; color: var(--fino-accent);
  min-height: 36px; padding: 7px 10px; border-radius: var(--fino-radius-sm);
}
.fino-btn--tertiary:hover:not(:disabled) { color: var(--fino-accent-hover); text-decoration: underline; }
.fino-btn--tertiary:disabled { background: transparent; border-color: transparent; }
.fino-btn--tertiary.is-quiet { color: var(--fino-ink-muted); }
.fino-btn--tertiary.is-quiet:hover:not(:disabled) { color: var(--fino-ink); }

/* Danger */
.fino-btn--danger {
  background: var(--fino-surface); color: var(--fino-danger);
  border-color: var(--fino-danger);
}
.fino-btn--danger:hover:not(:disabled) { background: var(--fino-danger-soft); }
.fino-btn--danger.is-solid { background: var(--fino-danger); color: var(--fino-on-accent); border-color: var(--fino-danger); }
.fino-btn--danger.is-solid:hover:not(:disabled) { filter: brightness(1.08); }

/* ==========================================================================
   6.7 / 6.8 INPUTS, TEXTAREA, SELECT
   ========================================================================== */
.fino-field { display: flex; flex-direction: column; gap: var(--fino-space-2); }
.fino-label { font: var(--fino-text-button); color: var(--fino-ink-secondary); }
.fino-hint  { font: var(--fino-text-caption); color: var(--fino-ink-muted); }
.fino-error-text { font: var(--fino-text-caption); color: var(--fino-danger); }

.fino-input, .fino-textarea, .fino-select {
  font: var(--fino-text-body); /* 17px to avoid iOS zoom; UI-dense forms may override to 14px */
  letter-spacing: var(--fino-text-body-track);
  color: var(--fino-ink);
  background: var(--fino-surface);
  border: 1px solid var(--fino-hairline-strong);
  border-radius: var(--fino-radius-md);
  padding: 12px 14px;
  min-height: 44px;
  width: 100%;
  transition: border-color var(--fino-transition), box-shadow var(--fino-transition);
  -webkit-appearance: none; appearance: none;
}
.fino-textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.fino-input::placeholder, .fino-textarea::placeholder { color: var(--fino-ink-disabled); }
.fino-input:hover, .fino-textarea:hover, .fino-select:hover { border-color: var(--fino-ink-muted); }
.fino-input:focus, .fino-textarea:focus, .fino-select:focus {
  outline: none;
  border-color: var(--fino-accent);
  box-shadow: 0 0 0 3px var(--fino-focus-ring);
}
.fino-input:disabled, .fino-input[readonly],
.fino-textarea:disabled, .fino-select:disabled {
  background: var(--fino-surface-sunken); color: var(--fino-ink-muted); cursor: not-allowed;
}
.fino-input.is-error, .fino-textarea.is-error, .fino-select.is-error { border-color: var(--fino-danger); }
.fino-input.is-error:focus, .fino-textarea.is-error:focus, .fino-select.is-error:focus {
  box-shadow: 0 0 0 3px var(--fino-danger-ring);
}

/* Select chevron */
.fino-select {
  padding-right: var(--fino-space-6);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236e7178' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--fino-space-3) center;
}

/* ==========================================================================
   6.9 DROPZONE + progress
   ========================================================================== */
.fino-dropzone {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 84px; padding: var(--fino-space-4);
  font: var(--fino-text-ui); color: var(--fino-ink-muted);
  background: var(--fino-surface);
  border: 1px dashed var(--fino-hairline-strong);
  border-radius: var(--fino-radius-lg);
  cursor: pointer;
  transition: border-color var(--fino-transition), background var(--fino-transition);
}
.fino-dropzone:hover, .fino-dropzone:focus-visible {
  outline: none; border-color: var(--fino-accent); background: var(--fino-accent-soft);
}
.fino-dropzone.is-dragover { border-width: 2px; border-color: var(--fino-accent); background: var(--fino-accent-soft); }
.fino-dropzone.is-error { border-color: var(--fino-danger); color: var(--fino-danger); }

/* Large, marketing-prominent dropzone (file-upload pages) */
.fino-dropzone--lg {
  min-height: 168px; flex-direction: column; gap: var(--fino-space-3);
  padding: var(--fino-space-6);
}
.fino-dropzone--sm { min-height: 120px; }
.fino-dropzone__icon {
  width: 36px; height: 36px; color: var(--fino-ink-muted);
  transition: color var(--fino-transition), transform var(--fino-transition);
}
.fino-dropzone:hover .fino-dropzone__icon,
.fino-dropzone.is-dragover .fino-dropzone__icon { color: var(--fino-accent); transform: translateY(-2px); }
.fino-dropzone.is-error .fino-dropzone__icon { color: var(--fino-danger); }
.fino-dropzone__title { font: var(--fino-text-h3); letter-spacing: var(--fino-text-h3-track); color: var(--fino-ink); }
.fino-dropzone__hint  { font: var(--fino-text-caption); color: var(--fino-ink-muted); }
.fino-dropzone__cta   { color: var(--fino-accent); font-weight: 600; }
.fino-dropzone.is-error .fino-dropzone__title,
.fino-dropzone.is-error .fino-dropzone__hint { color: var(--fino-danger); }

/* State-preview chips (mockup: shows rest / hover / drag treatments) */
.fino-dropzone__states { display: flex; gap: var(--fino-space-2); margin-top: var(--fino-space-3); flex-wrap: wrap; }
.fino-state-pill {
  font: var(--fino-text-caption); color: var(--fino-ink-muted);
  border: 1px solid var(--fino-hairline); border-radius: var(--fino-radius-pill);
  padding: 3px 10px; background: var(--fino-surface);
}
.fino-state-pill--accent {
  border-color: var(--fino-accent); color: var(--fino-accent); background: var(--fino-accent-soft);
}

.fino-tray { display: flex; flex-wrap: wrap; gap: var(--fino-space-3); margin-top: var(--fino-space-3); }
.fino-tile {
  position: relative; width: 76px; height: 76px;
  border: 1px solid var(--fino-hairline); border-radius: var(--fino-radius-sm);
  overflow: hidden; background: var(--fino-surface-sunken);
}
.fino-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Uploaded / parsed-file confirmation row */
.fino-filecard {
  display: flex; align-items: center; gap: var(--fino-space-3);
  border: 1px solid var(--fino-hairline); border-radius: var(--fino-radius-md);
  padding: var(--fino-space-3) var(--fino-space-4); background: var(--fino-surface-raised);
  margin-top: var(--fino-space-4);
}
.fino-filecard__icon {
  width: 32px; height: 32px; border-radius: var(--fino-radius-sm);
  background: var(--fino-accent-soft); color: var(--fino-accent);
  display: grid; place-items: center; flex: none;
}
.fino-filecard__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fino-filecard__meta strong { font: var(--fino-text-ui-strong); color: var(--fino-ink); }
.fino-filecard__meta small  { font: var(--fino-text-caption); color: var(--fino-ink-muted); }
.fino-filecard__action { margin-left: auto; }
.fino-filecard--uploading { background: var(--fino-surface); }

/* Progress bar (upload / scan) */
.fino-progress { height: 6px; border-radius: var(--fino-radius-pill); background: var(--fino-surface-sunken); overflow: hidden; }
.fino-progress__fill { height: 100%; background: var(--fino-accent); border-radius: inherit; transition: width var(--fino-transition); }
.fino-progress--inline { flex: 1 1 auto; min-width: 80px; }
/* Determinate fill presets (avoid inline style for static/mockup widths) */
.fino-progress__fill--25 { width: 25%; }
.fino-progress__fill--50 { width: 50%; }
.fino-progress__fill--62 { width: 62%; }
.fino-progress__fill--75 { width: 75%; }
/* Indeterminate sweep for unknown-duration uploads */
.fino-progress__fill--indeterminate {
  width: 40%; animation: fino-progress-slide 1.2s ease-in-out infinite;
}
@keyframes fino-progress-slide {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(280%); }
}
@media (prefers-reduced-motion: reduce) {
  .fino-progress__fill--indeterminate { animation: none; width: 100%; opacity: 0.5; }
}

/* ==========================================================================
   6.10 STATUS BADGE / PILL
   ========================================================================== */
.fino-badge {
  display: inline-flex; align-items: center; gap: var(--fino-space-2);
  font: var(--fino-text-button); /* 14/600; use 12px override for dense tables */
  padding: 2px 10px;
  border-radius: var(--fino-radius-pill);
  background: var(--fino-surface-sunken);
  color: var(--fino-ink-muted);
  white-space: nowrap;
}
.fino-badge--sm { font: var(--fino-text-eyebrow); letter-spacing: 0; text-transform: none; padding: 2px 8px; }
.fino-badge::before {
  content: ""; width: 6px; height: 6px; border-radius: var(--fino-radius-pill);
  background: currentColor; flex: none; opacity: 0.9;
}
.fino-badge.no-dot::before { display: none; }
.fino-badge--success { background: var(--fino-success-soft); color: var(--fino-success); }
.fino-badge--warn    { background: var(--fino-warn-soft);    color: var(--fino-warn); }
.fino-badge--danger  { background: var(--fino-danger-soft);  color: var(--fino-danger); }
.fino-badge--info    { background: var(--fino-info-soft);    color: var(--fino-info); }
.fino-badge--neutral { background: var(--fino-surface-sunken); color: var(--fino-ink-muted); }

/* ==========================================================================
   6.11 SEGMENTED CONTROL + TABS
   ========================================================================== */
.fino-segmented {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--fino-surface-sunken); border-radius: var(--fino-radius-pill);
}
.fino-segmented__item {
  font: var(--fino-text-button); color: var(--fino-ink-muted);
  padding: 6px 14px; border-radius: var(--fino-radius-pill);
  cursor: pointer; border: 0; background: transparent;
  transition: background var(--fino-transition), color var(--fino-transition), box-shadow var(--fino-transition);
}
.fino-segmented__item:hover { color: var(--fino-ink-secondary); }
.fino-segmented__item.is-active,
.fino-segmented__item[aria-pressed="true"],
.fino-segmented__item[aria-checked="true"] {
  background: var(--fino-surface); color: var(--fino-ink); box-shadow: var(--fino-elev-1);
}
.fino-segmented__item:focus-visible { outline: 3px solid var(--fino-focus-ring); outline-offset: 1px; }
/* Count subscript on a filter item (e.g. "All 12") */
.fino-segmented__count { margin-left: var(--fino-space-1); opacity: 0.6; font-variant-numeric: tabular-nums; }
/* Visually break a "separate bucket" tab (e.g. Archived & legacy) off from the
   real-order tabs so it never reads as part of the active order set. */
.fino-segmented__item.is-separated {
  margin-left: 8px; padding-left: 18px;
  border-left: 1px solid var(--fino-hairline-strong, var(--fino-hairline));
  border-top-left-radius: 0; border-bottom-left-radius: 0;
}

.fino-tabs { display: flex; gap: var(--fino-space-5); border-bottom: 1px solid var(--fino-hairline); }
.fino-tabs__item {
  font: var(--fino-text-button); color: var(--fino-ink-muted);
  padding: var(--fino-space-3) 0; border: 0; background: transparent; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--fino-transition), border-color var(--fino-transition);
}
.fino-tabs__item:hover { color: var(--fino-ink-secondary); }
.fino-tabs__item.is-active { color: var(--fino-accent); border-bottom-color: var(--fino-accent); }
.fino-tabs__item:focus-visible { outline: 3px solid var(--fino-focus-ring); outline-offset: 2px; }

/* ==========================================================================
   6.12 MODAL
   ========================================================================== */
.fino-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: var(--fino-overlay);
  display: flex; align-items: center; justify-content: center; padding: var(--fino-space-5);
}
.fino-modal {
  background: var(--fino-surface);
  border-radius: var(--fino-radius-lg);
  box-shadow: var(--fino-elev-3);
  width: 100%; max-width: 560px; max-height: 90vh; overflow: hidden;
  display: flex; flex-direction: column;
  animation: fino-modal-in var(--fino-transition);
}
.fino-modal--wide { max-width: 720px; }
@keyframes fino-modal-in { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: scale(1); } }
.fino-modal__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--fino-space-5) var(--fino-space-6);
  border-bottom: 1px solid var(--fino-hairline-soft);
}
.fino-modal__title { font: var(--fino-text-h3); letter-spacing: var(--fino-text-h3-track); color: var(--fino-ink); margin: 0; }
.fino-modal__body { padding: var(--fino-space-6); overflow-y: auto; display: flex; flex-direction: column; gap: var(--fino-space-5); }
.fino-modal__foot {
  display: flex; justify-content: flex-end; gap: var(--fino-space-2);
  padding: var(--fino-space-4) var(--fino-space-6);
  border-top: 1px solid var(--fino-hairline-soft);
}

/* ==========================================================================
   6.13 EMPTY STATE
   ========================================================================== */
.fino-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--fino-space-3);
  padding: var(--fino-space-8) var(--fino-space-4);
  max-width: 360px; margin: 0 auto;
}
.fino-empty--wide { max-width: 420px; }
.fino-empty__icon { color: var(--fino-ink-disabled); width: 32px; height: 32px; }
.fino-empty__title { font: var(--fino-text-h3); letter-spacing: var(--fino-text-h3-track); color: var(--fino-ink); margin: 0; }
.fino-empty__body  { font: var(--fino-text-ui); color: var(--fino-ink-muted); margin: 0; }
.fino-empty__actions { display: flex; gap: var(--fino-space-2); margin-top: var(--fino-space-2); }

/* ==========================================================================
   6.14 LOADING SKELETON
   ========================================================================== */
.fino-skeleton {
  display: block; height: 14px; border-radius: var(--fino-radius-sm);
  background: linear-gradient(90deg, var(--fino-surface-sunken) 0%, var(--fino-hairline-soft) 50%, var(--fino-surface-sunken) 100%);
  background-size: 200% 100%;
  animation: fino-shimmer 1.4s linear infinite;
}
.fino-skeleton + .fino-skeleton { margin-top: var(--fino-space-3); }
.fino-skeleton--title { height: 20px; width: 40%; }
.fino-skeleton--line  { width: 100%; }
.fino-skeleton--short { width: 60%; }
@keyframes fino-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .fino-skeleton { animation: none; background: var(--fino-surface-sunken); }
  .fino-modal { animation: none; }
}

/* ==========================================================================
   6.15 TOAST
   ========================================================================== */
.fino-toast-stack {
  position: fixed; bottom: var(--fino-space-5); right: var(--fino-space-5); z-index: 200;
  display: flex; flex-direction: column; gap: var(--fino-space-2); max-width: 360px;
}
.fino-toast {
  display: flex; align-items: center; gap: var(--fino-space-3);
  background: var(--fino-surface); color: var(--fino-ink);
  border: 1px solid var(--fino-hairline); border-radius: var(--fino-radius-md);
  box-shadow: var(--fino-elev-2);
  padding: 12px 16px; font: var(--fino-text-ui);
  animation: fino-toast-in var(--fino-transition);
}
.fino-toast::before {
  content: ""; width: 6px; height: 6px; border-radius: var(--fino-radius-pill);
  background: var(--fino-accent); flex: none;
}
.fino-toast--success::before { background: var(--fino-success); }
.fino-toast--warn::before    { background: var(--fino-warn); }
.fino-toast--danger::before  { background: var(--fino-danger); }
@keyframes fino-toast-in { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: translateX(0); } }

/* ==========================================================================
   6.16 CODE / MONO SURFACE
   ========================================================================== */
.fino-code {
  font: var(--fino-text-mono); color: var(--fino-ink-secondary);
  background: var(--fino-surface-sunken);
  border: 1px solid var(--fino-hairline);
  border-radius: var(--fino-radius-lg);
  padding: var(--fino-space-4);
  overflow-x: auto;
}
.fino-code__head { display: flex; gap: var(--fino-space-1); margin-bottom: var(--fino-space-3); }
.fino-code__light { width: 12px; height: 12px; border-radius: var(--fino-radius-pill); }
.fino-code__light--red    { background: var(--fino-term-red); }
.fino-code__light--yellow { background: var(--fino-term-yellow); }
.fino-code__light--green  { background: var(--fino-term-green); }

/* Health traffic-light dot (inline) */
.fino-status-dot { width: 10px; height: 10px; border-radius: var(--fino-radius-pill); display: inline-block; flex: none; }
.fino-status-dot--up     { background: var(--fino-term-green); }
.fino-status-dot--warn   { background: var(--fino-term-yellow); }
.fino-status-dot--down   { background: var(--fino-term-red); }

/* The one Apple shadow — product imagery resting on a surface only */
.fino-product-shadow { box-shadow: var(--fino-elev-image); }

/* ==========================================================================
   PAGE COMPOSITION — toolbars, search, section heads, grids, save bar
   (operator-page layout primitives, all token-derived)
   ========================================================================== */

/* Filter/search toolbar above a table */
.fino-toolbar {
  display: flex; align-items: center; gap: var(--fino-space-4);
  margin-bottom: var(--fino-space-5); flex-wrap: wrap;
}

/* Search field with leading icon */
.fino-search { position: relative; flex: 1 1 280px; max-width: 360px; }
.fino-search .fino-input { padding-left: 38px; min-height: 40px; font: var(--fino-text-ui); }
.fino-search__icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--fino-ink-muted); pointer-events: none;
}

/* Secondary section header (h2-weight) within a page */
.fino-section-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--fino-space-4);
  margin: var(--fino-space-6) 0 var(--fino-space-4);
}
.fino-section-head__title { font: var(--fino-text-h2); letter-spacing: var(--fino-text-h2-track); color: var(--fino-ink); margin: 0; }
.fino-section-head__sub   { font: var(--fino-text-ui); color: var(--fino-ink-muted); margin: 4px 0 0; }

/* Two-up content grid (e.g. error + empty previews, form + side states) */
.fino-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--fino-space-5); align-items: start; }
.fino-grid-2--wide { grid-template-columns: 1.35fr 1fr; }
.fino-grid-2.is-spaced { margin-top: var(--fino-space-6); }
.fino-stack { display: flex; flex-direction: column; gap: var(--fino-space-5); }

/* Two-column form row */
.fino-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--fino-space-4); }
.fino-form-row.is-spaced { margin-top: var(--fino-space-5); }

/* Right-aligned action footer for cards/forms */
.fino-actions-end { display: flex; justify-content: flex-end; gap: var(--fino-space-2); }
.fino-actions-end.is-spaced { margin-top: var(--fino-space-5); }

/* Live-status inline row (e.g. Scanner online) */
.fino-live-row { display: flex; align-items: center; gap: var(--fino-space-2); font: var(--fino-text-ui); color: var(--fino-ink-secondary); }

/* Mapping: source → target alignment helpers */
.fino-map-arrow  { color: var(--fino-ink-muted); }
.fino-map-select .fino-select { min-height: 40px; font: var(--fino-text-ui); max-width: 280px; }
.fino-select.is-warn { border-color: var(--fino-warn); }

/* Sticky save bar */
.fino-savebar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--fino-space-4);
  margin-top: var(--fino-space-4); padding: var(--fino-space-4) var(--fino-space-5);
  background: var(--fino-surface); border: 1px solid var(--fino-hairline);
  border-radius: var(--fino-radius-lg); box-shadow: var(--fino-elev-2);
}
.fino-savebar__meta { font: var(--fino-text-ui); color: var(--fino-ink-muted); }
.fino-savebar__actions { display: flex; gap: var(--fino-space-2); }

/* Labeled state-preview block (mockup: show a loading/error/empty treatment in context) */
.fino-state-label {
  padding: 12px 16px; border-bottom: 1px solid var(--fino-hairline-soft);
  font: var(--fino-text-ui-strong); color: var(--fino-ink-muted);
}

/* Dense empty/error column block centered inside a table cell */
.fino-cell-block { display: flex; flex-direction: column; align-items: center; gap: var(--fino-space-3); }
.fino-cell-block__title { color: var(--fino-ink); font: var(--fino-text-h3); letter-spacing: var(--fino-text-h3-track); }
.fino-cell-block__body  { color: var(--fino-ink-muted); font: var(--fino-text-ui); }

/* Mockup page shell glue (sunken canvas, transparent shell) */
.fino-page--sunken { background: var(--fino-canvas-sunken); }
.fino-page--sunken .fino-shell { background: transparent; }
.fino-annotate {
  max-width: var(--fino-max); margin: var(--fino-space-3) auto 0;
  padding: 0 var(--fino-space-6) var(--fino-space-7);
  font: var(--fino-text-caption); color: var(--fino-ink-muted);
}

/* Top-nav brand logo (rooster wordmark image, ~22px tall per §6.1) */
.fino-topbar__logo { height: 22px; width: auto; display: block; }
.fino-topbar__brand { display: inline-flex; align-items: center; }

/* ==========================================================================
   RESPONSIVE — Linear/Apple breakpoints (operator portal is desktop-first)
   ========================================================================== */
@media (max-width: 1024px) {
  .fino-shell { padding: var(--fino-space-5); }
}
@media (max-width: 900px) {
  .fino-grid-2, .fino-grid-2--wide { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .fino-shell { padding: var(--fino-space-4); }
  .fino-page-header { flex-direction: column; align-items: flex-start; }
  .fino-nav { overflow-x: auto; flex-wrap: nowrap; }
}
@media (max-width: 560px) {
  .fino-form-row { grid-template-columns: 1fr; }
  .fino-tracking-edit { grid-template-columns: 1fr; min-width: 220px; }
}