/*  Digishots WMS — main stylesheet
 *
 *  Visual language: "Material wyciszony" — typografia robi hierarchię,
 *  kolor jest akcentem. Mobile-first, scanner-first.
 *  See DESIGN.md (alongside this file) for the design brief.
 *
 *  Layers:
 *    1. Fonts            — @font-face for local woff2
 *    2. Tokens           — CSS variables (palette, type, spacing)
 *    3. Reset / base     — body, links, headings
 *    4. Layout           — app shell, statusbar, main, mobile/desktop
 *    5. Primitives       — Pill, FieldLabel, Display, Tooltip, Dot
 *    6. Components       — buttons, forms, lists, tables, flash, badges
 *    7. Page accents     — page-specific small helpers
 */

/* ────────────────────────── 1. Fonts ──────────────────────────────── */

@font-face {
  font-family: 'General Sans';
  src: url('/static/fonts/general-sans-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('/static/fonts/general-sans-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('/static/fonts/general-sans-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/static/fonts/jetbrains-mono-latin.woff2') format('woff2');
  font-weight: 400 500; font-style: normal; font-display: swap;
  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;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/static/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  font-weight: 400 500; font-style: normal; font-display: swap;
  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-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* ────────────────────────── 2. Tokens ─────────────────────────────── */

:root {
  /* Palette: groszek (primary) / mięta (secondary) / leśna zieleń (text accent) */
  --accent:        #c7d96b;   /* groszek — primary action */
  --accent-2:      #7fc7a3;   /* mięta */
  --accent-deep:   #3e8a5c;   /* leśna zieleń — tekst akcentowy */
  --accent-soft:   #e3edd2;   /* groszek 22% on surface */
  --accent-bg:     #e9efd9;   /* groszek 16% — selection */

  /* Surfaces — bardzo jasny celadon */
  --bg:            #eef3ec;   /* aplikacja */
  --surface:       #f6f8f4;   /* karty / floating */
  --surface-2:     #e6ede4;   /* zagłębienia, podsumowania */

  /* Ink — neutralna, lekko chłodna */
  --ink:           #0f1612;
  --ink-2:         #465048;
  --ink-3:         #7e887f;
  --ink-on-accent: #162515;   /* tekst na groszku — prawie czarny */

  /* Lines */
  --line:          rgba(20, 40, 30, 0.08);
  --line-strong:   rgba(20, 40, 30, 0.18);

  /* Status — sparingly */
  --warn-bg:       #fbf5dc;
  --warn-fg:       #7a6a1a;
  --warn-dot:      #d4b94a;
  --err-bg:        #fbecec;
  --err-fg:        #8a2a2a;
  --mismatch-bg:   #fbf8ea;   /* row tinting when count doesn't match */

  /* Typography */
  --font:          "General Sans", "Inter", system-ui, sans-serif;
  --font-mono:     "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale — Material-subtle */
  --fs-display:    32px;      /* key liczba na ekranie */
  --fs-title:      26px;      /* tytuł strony */
  --fs-subtitle:   20px;      /* sekcja */
  --fs-body-lg:    16px;
  --fs-body:       14px;
  --fs-meta:       12px;
  --fs-eyebrow:    11px;      /* uppercase tracking, FieldLabel */

  /* Spacing (4px grid) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;

  /* Radii — Material-subtle */
  --radius:        2px;        /* default — buttons, pills, fields */
  --radius-pill:   100px;      /* chip / tag */
  --radius-cta:    4px;        /* large CTAs, banners */
  --radius-tooltip:4px;

  /* Container width — desktop shell.
     shell-max = default (mobile-first: scanner/form/detail screens)
     shell-wide = list / table screens (more columns benefit from breathing room) */
  --shell-max:  480px;
  --shell-wide: 1240px;
}

/* ────────────────────────── 3. Reset / base ───────────────────────── */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--fs-body)/1.45 var(--font);
  min-height: 100vh;
  padding-bottom: env(safe-area-inset-bottom);
  letter-spacing: 0;
}

a { color: inherit; }

h1, h2, h3 { margin: 0; }
h1 {
  font: 500 var(--fs-title)/1.15 var(--font);
  letter-spacing: -0.4px;
  color: var(--ink);
  word-break: break-word;
}
h2 {
  font: 500 var(--fs-subtitle)/1.2 var(--font);
  letter-spacing: -0.3px;
  color: var(--ink);
  margin: var(--sp-5) 0 var(--sp-3);
}
h3 {
  font: 500 var(--fs-body-lg)/1.3 var(--font);
  color: var(--ink);
}

p  { margin: var(--sp-1) 0; line-height: 1.5; }

::selection { background: var(--accent-bg); color: var(--ink); }

/* ────────────────────────── 4. Layout ─────────────────────────────── */

/* App shell — full-bleed on mobile, centered shell on desktop.
   Default: 480px (scanner/form/detail). Use class .wide for list screens. */
main {
  display: block;
  min-height: 100dvh;
  background: var(--bg);
  position: relative;
}

@media (min-width: 720px) {
  body { background: #d6ddd4; }   /* slightly darker frame around shell */
  main {
    max-width: var(--shell-max);
    margin: 0 auto;
    box-shadow: 0 0 0 1px var(--line-strong);
    background: var(--bg);
    min-height: 100dvh;
  }
  main.wide { max-width: var(--shell-wide); }
  /* In wide mode, keep prose readable — limit text-heavy elements,
     but let tables/lists/grids span the full shell. */
  main.wide .screen > h1,
  main.wide .screen > h2,
  main.wide .screen > .eyebrow,
  main.wide .screen > p { max-width: 720px; }
  main.wide .screen { padding-left: var(--sp-7); padding-right: var(--sp-7); }
}

/* StatusStrip — 44px top bar, always visible */
.statusbar {
  height: 44px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding: 0 var(--sp-4);
  gap: var(--sp-3);
  flex-shrink: 0;
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 10;
}
.statusbar .back-btn,
.statusbar .menu-btn {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: none;
  color: var(--ink);
  cursor: pointer;
  margin-left: -8px;
  border-radius: var(--radius);
}
.statusbar .back-btn:active,
.statusbar .menu-btn:active { background: var(--surface-2); }
.statusbar .title {
  font: 500 13px/1 var(--font);
  letter-spacing: -0.1px;
  color: var(--ink);
}
.statusbar .right {
  margin-left: auto;
  display: flex; align-items: center; gap: var(--sp-3);
}
.statusbar .right .mark {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  color: var(--ink-3);
}
.statusbar .avatar {
  width: 24px; height: 24px;
  border-radius: 12px;
  background: var(--accent-bg);
  color: var(--accent-deep);
  display: flex; align-items: center; justify-content: center;
  font: 600 10px/1 var(--font);
}

/* Page content padding */
.screen {
  padding: var(--sp-6) var(--sp-6) var(--sp-7);
}
.screen.compact { padding-top: var(--sp-5); }

/* Sticky bottom CTA dock — for primary action */
.cta-dock {
  position: sticky;
  bottom: 0;
  padding: var(--sp-3) var(--sp-6) calc(var(--sp-4) + env(safe-area-inset-bottom));
  background: var(--bg);
  border-top: 1px solid var(--line);
  z-index: 5;
}

/* ────────────────────────── 5. Primitives ─────────────────────────── */

/* Mono — tabular nums + zero letter-spacing (numbers, codes) */
.mono {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum' on;
  letter-spacing: 0;
}

/* Muted text — secondary */
.muted { color: var(--ink-3); }

/* Numbers — tabular bold variant */
.num {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

/* Code — small monospace identifier under a name */
.code {
  display: block;
  margin: 2px 0 0;
  font: 400 var(--fs-eyebrow)/1.3 var(--font-mono);
  color: var(--ink-3);
  letter-spacing: 0.6px;
}

/* Sub — small non-mono secondary line */
.sub {
  display: block;
  margin: 2px 0 0;
  font-size: var(--fs-meta);
  color: var(--ink-2);
}

/* Unit — caption next to a number (szt., opak., MW…) */
.unit {
  font-size: var(--fs-eyebrow);
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* FieldLabel / Eyebrow — uppercase label above a value */
.eyebrow {
  display: inline-flex;
  align-items: center;
  font: 600 var(--fs-eyebrow)/1 var(--font);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 4px;
}

/* Display — large mono value (count, code) */
.display {
  font: 500 var(--fs-display)/1 var(--font);
  letter-spacing: -0.6px;
  color: var(--ink);
}
.display.mono { letter-spacing: 0; }
.display.huge { font-size: 44px; letter-spacing: -1.2px; }

/* Pill — small uppercase chip (status, type) */
.pill {
  display: inline-flex;
  align-items: center;
  font: 600 10px/1 var(--font);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: var(--radius);
  white-space: nowrap;
  background: var(--accent-bg);
  color: var(--accent-deep);
}
.pill.neutral { background: var(--surface-2); color: var(--ink-2); }
.pill.warn    { background: var(--warn-bg);   color: var(--warn-fg); }
.pill.mute    { background: transparent;      color: var(--ink-3); }

/* Help icon — small "?" circle next to a label */
.help-icon {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1px solid var(--ink-3);
  color: var(--ink-3);
  font: 600 9px/1 var(--font);
  margin-left: 6px;
  vertical-align: middle;
  cursor: help;
}

/* Status dots */
.dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ink-3);
  vertical-align: 1px;
}
.dot.active { background: var(--accent-deep); }
.dot.warn   { background: var(--warn-dot); }

/* Tooltip — black bubble (called manually) */
.tooltip {
  position: absolute;
  background: var(--ink);
  color: #f4f6f1;
  padding: 10px 12px;
  border-radius: var(--radius-tooltip);
  font-size: var(--fs-meta);
  line-height: 1.45;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  max-width: 240px;
  z-index: 30;
}

/* ────────────────────────── 6. Components ─────────────────────────── */

/* ── Buttons ── */

/* Primary CTA — full-width 52px uppercase */
.btn-primary, button.primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  padding: 0 var(--sp-4);
  background: var(--accent);
  color: var(--ink-on-accent);
  border: none;
  border-radius: var(--radius-cta);
  font: 600 var(--fs-body)/1 var(--font);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
}
.btn-primary:active, button.primary:active {
  background: var(--accent-2);
}
.btn-primary[disabled], button.primary[disabled] {
  background: var(--surface-2);
  color: var(--ink-3);
  cursor: not-allowed;
}

/* Secondary — outline 48px */
.btn-secondary, .cancel, a.cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 var(--sp-5);
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-cta);
  font: 500 13px/1 var(--font);
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
}
.btn-secondary:active, .cancel:active { background: var(--surface-2); }

/* Chip button — small inline action (+ Dodaj, Edytuj…) */
.chip, a.chip, button.chip {
  display: inline-flex;
  align-items: center;
  font: 500 var(--fs-meta)/1 var(--font);
  letter-spacing: 0.2px;
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-2);
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
}
.chip:active { background: var(--surface-2); }
.chip.cta { background: var(--accent); color: var(--ink-on-accent); border-color: var(--accent); font-weight: 600; }

/* Link-styled inline button */
.linklike {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
}

/* ── Forms ── */

/* Form field — border-bottom only (Material) */
.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: var(--sp-5) 0;
}
.form-field > label {
  font: 600 var(--fs-eyebrow)/1 var(--font);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink-3);
}
.form-field input,
.form-field select,
.form-field textarea {
  font: 500 var(--fs-body-lg)/1.4 var(--font);
  padding: 10px 0;
  min-height: 44px;
  border: none;
  border-bottom: 1.5px solid var(--line-strong);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
}
.form-field input[type="number"],
.form-field input[type="search"] { font-family: var(--font-mono); letter-spacing: 0; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-bottom-color: var(--accent-deep);
}
.form-field textarea { resize: vertical; min-height: 60px; padding: 10px 0; }
.form-field .hint {
  font-size: var(--fs-meta);
  color: var(--ink-3);
  margin-top: 6px;
  line-height: 1.5;
}
.form-field.row-group { display: flex; flex-direction: row; gap: var(--sp-4); }
.form-field.row-group > .form-field { flex: 1; margin: 0; }

label.check {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) 0; cursor: pointer;
  font-size: var(--fs-body);
  color: var(--ink);
}
label.check input[type="checkbox"] {
  width: 20px; height: 20px;
  accent-color: var(--accent-deep);
}

/* Form actions row — sticky cancel + primary */
.actions-row {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}
.actions-row .primary,
.actions-row .btn-primary { flex: 1; }
.actions-row .cancel { flex: 0 0 auto; }

/* Search row */
.search-row {
  display: flex;
  gap: var(--sp-2);
  margin: var(--sp-3) 0 var(--sp-3);
}
.search-row input[type="search"] {
  flex: 1;
  padding: 12px var(--sp-3);
  min-height: 44px;
  font: 500 var(--fs-body)/1 var(--font-mono);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
}
.search-row input[type="search"]:focus {
  outline: none;
  border-color: var(--accent-deep);
}
.search-row button {
  min-height: 44px;
  padding: 0 var(--sp-4);
  background: var(--accent);
  color: var(--ink-on-accent);
  border: none;
  border-radius: var(--radius);
  font: 600 13px/1 var(--font);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  cursor: pointer;
}

/* Filter chips — radio pill group */
.filter-chips {
  display: flex; gap: var(--sp-2); flex-wrap: wrap;
  margin: var(--sp-3) 0;
}
.filter-chips label {
  cursor: pointer;
  padding: 6px var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  font-size: var(--fs-meta);
  color: var(--ink-2);
  user-select: none;
}
.filter-chips input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.filter-chips input[type="radio"]:checked + span {
  background: var(--accent-bg);
  color: var(--accent-deep);
  font-weight: 600;
  padding: 6px var(--sp-3);
  margin: -6px calc(-1 * var(--sp-3));
  border-radius: var(--radius-pill);
  display: inline-block;
}

/* ── Flash messages — borderless, accent-bg + left bar ── */
.flash {
  margin: var(--sp-3) 0;
  padding: var(--sp-3) var(--sp-4);
  border-left: 3px solid var(--accent);
  background: var(--accent-bg);
  font-size: var(--fs-body);
  color: var(--ink);
}
.flash.ok  { border-left-color: var(--accent-deep); }
.flash.err { border-left-color: var(--err-fg); background: var(--err-bg); color: var(--err-fg); }
.flash.warn{ border-left-color: var(--warn-dot); background: var(--warn-bg); color: var(--warn-fg); }

/* ── Badges (legacy MG/MW labels — now Pill variants) ── */

/* Operator zna te skróty z miesięcy pracy; w nowym designie
   MG (główny — opakowania) → neutral chip,
   MW (wysyłkowy — luzem) → accent chip. */
.badge {
  display: inline-flex;
  align-items: center;
  font: 600 10px/1 var(--font);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: var(--radius);
  white-space: nowrap;
}
.badge-MG      { background: var(--surface-2); color: var(--ink-2); }
.badge-MW      { background: var(--accent-bg); color: var(--accent-deep); }
.badge-unknown { background: transparent;      color: var(--ink-3); border: 1px dashed var(--line-strong); }

/* Status badge — sync run / cron status (admin) */
.status-badge {
  display: inline-flex; align-items: center;
  padding: 3px 8px;
  border-radius: var(--radius);
  font: 600 10px/1 var(--font);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.status-running { background: var(--warn-bg); color: var(--warn-fg); }
.status-success { background: var(--accent-bg); color: var(--accent-deep); }
.status-failed  { background: var(--err-bg);   color: var(--err-fg); }
.status-pending { color: var(--ink-3); }
.status-sending { color: var(--accent-2); font-weight: 600; }
.status-done    { color: var(--accent-deep); font-weight: 600; }

/* Status text inline (no bg) */
.test-ok      { color: var(--accent-deep); font-weight: 600; }
.test-fail    { color: var(--err-fg);      font-weight: 600; }
.test-pending { color: var(--ink-3); }
.lvl-info  { color: var(--ink-3); }
.lvl-warn  { color: var(--warn-fg); font-weight: 600; }
.lvl-error { color: var(--err-fg);  font-weight: 600; }

/* ── Lists ── */

/* Generic row list — title + meta on each side */
.row-list { list-style: none; padding: 0; margin: var(--sp-3) 0 0; }
.row-list li {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px var(--sp-4);
  align-items: center;
}
.row-list li:last-child { border-bottom: none; }
.row-list .meta-r {
  text-align: right;
  font-size: var(--fs-meta);
  color: var(--ink-3);
  white-space: nowrap;
}
.row-list .meta-r .num { font-size: 18px; color: var(--ink); }

/* Placement-list (container detail — what's in this container) */
.placement-list { list-style: none; padding: 0; margin: 0; }
.placement-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px var(--sp-4);
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.placement-list li:last-child { border-bottom: none; }
.placement-list .item .name { margin: 0; font: 500 15px/1.3 var(--font); }
.placement-list .count-row {
  text-align: right;
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
}
.placement-list .count {
  font: 500 22px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.4px;
  color: var(--ink);
}

/* Detail row — left label / right value (used in product/location detail) */
.detail-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.detail-row > .label { font-size: var(--fs-body); color: var(--ink-2); }
.detail-row > .value { font: 500 var(--fs-body)/1.3 var(--font); color: var(--ink); text-align: right; }
.detail-row > .value.mono { font-family: var(--font-mono); letter-spacing: 0; }
.detail-row:last-child { border-bottom: none; }

/* Section — group of detail rows under a FieldLabel */
.section {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}
.section:first-of-type { border-top: none; padding-top: 0; }

/* KV (description list) — used on admin detail pages */
dl.kv {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--sp-2) var(--sp-4);
  margin: var(--sp-3) 0;
}
dl.kv dt { color: var(--ink-3); font-size: var(--fs-meta); }
dl.kv dd { margin: 0; font-size: var(--fs-body); }

/* ── Tables (admin) — clean rows, no border except bottom ── */
.data-table, table.admin-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--sp-3) 0;
}
.data-table th, .data-table td,
table.admin-table th, table.admin-table td {
  text-align: left;
  padding: 12px var(--sp-2);
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  font-size: var(--fs-body);
}
.data-table th, table.admin-table th {
  font: 600 var(--fs-eyebrow)/1 var(--font);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-3);
}
.data-table tr.inactive td, table.admin-table tr.inactive td { opacity: 0.55; }
.data-table .num, table.admin-table .num {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  white-space: nowrap;
  letter-spacing: 0;
}
.data-table th.num, table.admin-table th.num {
  font-family: var(--font);
  letter-spacing: 1px;
  font-weight: 600;
}
.data-table .num.zero, table.admin-table .num.zero { color: var(--ink-3); font-weight: 400; }
.data-table .sub { display: block; margin: 2px 0 0; font-size: var(--fs-meta); color: var(--ink-3); }
.data-table .actions, table.admin-table .actions {
  white-space: nowrap; text-align: right;
}
.data-table .actions a, .data-table .actions button,
table.admin-table .actions a, table.admin-table .actions button {
  font: 500 var(--fs-meta)/1 var(--font);
  padding: 5px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  cursor: pointer;
  background: transparent;
  font-family: inherit;
  margin-left: var(--sp-1);
}
.data-table .actions form, table.admin-table .actions form { display: inline-block; margin: 0; }

/* Date / time / duration cell utilities */
.dt-cell  { font: 500 var(--fs-meta)/1.3 var(--font-mono); white-space: nowrap; color: var(--ink-3); letter-spacing: 0; }
.dur-cell { font: 500 var(--fs-body)/1 var(--font-mono); white-space: nowrap; letter-spacing: 0; }

/* ── Pagination ── */
.pagination {
  display: flex;
  gap: var(--sp-2);
  justify-content: space-between;
  margin: var(--sp-6) 0;
}
.pagination a, .pagination span.disabled {
  flex: 1;
  text-align: center;
  padding: 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 500 13px/1 var(--font);
}
.pagination span.disabled { color: var(--ink-3); border-color: var(--line); }
.pagination .page-info {
  flex: 0 0 auto;
  padding: 12px;
  color: var(--ink-3);
  font: 500 var(--fs-meta)/1 var(--font-mono);
}

/* ── Tile grid (admin landing) ── */
.tile-grid {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: var(--sp-3);
}
.tile {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--line);
  border-radius: var(--radius-cta);
  padding: var(--sp-4);
  background: var(--surface);
}
.tile:active { background: var(--surface-2); }
.tile h3 { margin: 0 0 6px; font-size: var(--fs-body-lg); }
.tile p  { margin: 0; color: var(--ink-3); font-size: var(--fs-meta); line-height: 1.4; }
.tile.disabled { opacity: 0.55; pointer-events: none; }
.tile .badge { float: right; }

/* ── Locked-context / Notes / Code-block ── */

/* Subdued info panel with left accent */
.locked-context {
  margin: var(--sp-4) 0;
  padding: var(--sp-3) var(--sp-4);
  background: var(--accent-bg);
  border-left: 3px solid var(--accent);
  font-size: var(--fs-body);
  color: var(--ink);
}
.locked-context.tint-ok { border-left-color: var(--accent-deep); }
.locked-context p { margin: 6px 0 0; font-size: var(--fs-meta); color: var(--ink-2); line-height: 1.5; }
.locked-context p.warn { color: var(--warn-fg); }
.locked-context .num { font-weight: 500; }

/* Pair — k: v line inside locked-context */
.locked-context .pair {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--sp-3); margin: 4px 0;
}
.locked-context .pair .k { color: var(--ink-3); font-size: var(--fs-meta); }

/* Notes box — bordered free-form text */
.notes-box {
  margin: var(--sp-4) 0;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-2);
  border-left: 3px solid var(--line-strong);
  white-space: pre-wrap;
  font-size: var(--fs-body);
}

/* Preformatted block */
pre.code-block {
  background: var(--surface-2);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius);
  font: 400 var(--fs-meta)/1.5 var(--font-mono);
  overflow-x: auto;
  margin: var(--sp-3) 0;
  letter-spacing: 0;
}

/* Error pre-wrap box */
.err-box {
  background: var(--err-bg);
  border-left: 3px solid var(--err-fg);
  padding: var(--sp-3) var(--sp-4);
  color: var(--err-fg);
  font: 400 var(--fs-meta)/1.45 var(--font-mono);
  white-space: pre-wrap;
  word-break: break-word;
  margin: var(--sp-3) 0;
  letter-spacing: 0;
}

/* ── Entry table — multi-row inline form (IWM, transfer) ── */
table.entry-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--sp-4) 0;
}
table.entry-table th,
table.entry-table td {
  text-align: left;
  padding: 12px var(--sp-2);
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
table.entry-table th {
  font: 600 var(--fs-eyebrow)/1 var(--font);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-3);
}
table.entry-table input[type="text"],
table.entry-table input[type="number"] {
  font: 500 var(--fs-body)/1.3 var(--font-mono);
  padding: 8px 10px;
  min-height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  width: 100%;
  letter-spacing: 0;
}
table.entry-table input[type="number"] {
  text-align: right;
  font-variant-numeric: tabular-nums;
  max-width: 90px;
}
table.entry-table input:focus { outline: none; border-color: var(--accent-deep); }
table.entry-table .item-cell .name { display: block; font-weight: 500; }
table.entry-table .item-cell .sub {
  font-size: var(--fs-eyebrow);
  color: var(--ink-3);
  font-family: var(--font-mono);
  letter-spacing: 0;
}
table.entry-table td.row-actions-col { width: 40px; text-align: center; }
table.entry-table td.row-actions-col button {
  border: none; background: none;
  color: var(--ink-3);
  font-size: 18px;
  cursor: pointer;
  padding: 4px var(--sp-2);
  font-family: inherit;
}
table.entry-table td.row-actions-col button:active { color: var(--err-fg); }

/* Add-row CTA — dashed */
.btn-add-row {
  display: block;
  width: 100%;
  padding: 12px var(--sp-4);
  margin: var(--sp-2) 0 var(--sp-4);
  font: 500 13px/1 var(--font);
  letter-spacing: 0.4px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-cta);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  text-align: center;
}
.btn-add-row:active { background: var(--surface-2); }

/* Inline count edit */
.count-inline { margin: 0; }
.count-inline input[type="number"] {
  width: 80px;
  padding: 4px 8px;
  font: 500 var(--fs-body)/1 var(--font-mono);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  text-align: right;
  font-variant-numeric: tabular-nums;
  background: var(--surface);
  color: var(--ink);
  letter-spacing: 0;
}

/* ── Row-actions (under list items: rozpakuj / usuń) ── */
.row-actions {
  margin: 4px 0 0;
  display: flex;
  gap: var(--sp-3);
  align-items: center;
}
.row-actions form { margin: 0; }
.row-action {
  font: 500 var(--fs-meta)/1 var(--font);
  color: var(--ink-3);
  text-decoration: none;
}
.row-action.row-action-emph { color: var(--accent-deep); font-weight: 600; }
.row-action.linklike {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}

/* ── Empty state ── */
.empty, .empty-state {
  padding: var(--sp-6) 0;
  color: var(--ink-3);
  text-align: center;
  font-style: normal;
  font-size: var(--fs-body);
}

/* ── HTMX indicators ── */
.htmx-indicator { display: none; align-self: center; color: var(--ink-3); }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { display: inline; }
.htmx-request #results { opacity: 0.5; transition: opacity 200ms; }

/* ── Plain link / row-link helpers ── */
a.plain { color: inherit; text-decoration: none; }
a.row-link { display: block; color: inherit; text-decoration: none; }

/* ── Section head: title + chip CTA ── */
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
}

/* ── Toolbar (heading + CTA) ── */
.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.toolbar a.cta {
  padding: 6px var(--sp-3);
  background: var(--accent);
  color: var(--ink-on-accent);
  text-decoration: none;
  border-radius: var(--radius-cta);
  font: 600 var(--fs-meta)/1 var(--font);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

/* ── Crumb / breadcrumb ── */
.crumb {
  margin: 0 0 var(--sp-3);
  color: var(--ink-3);
  font-size: var(--fs-meta);
}
.crumb a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted var(--line-strong);
}
.crumb a:active { color: var(--ink); }
.crumb .sep { margin: 0 var(--sp-2); }

/* ── Meta line under main content ── */
.meta {
  margin-top: var(--sp-6);
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-meta);
  color: var(--ink-3);
}

/* Actions bar (Edytuj / Usuń pod treścią) */
.actions-bar {
  display: flex;
  gap: var(--sp-2);
  margin: var(--sp-4) 0;
  flex-wrap: wrap;
}
.actions-bar a,
.actions-bar button {
  padding: 8px var(--sp-4);
  font: 500 13px/1 var(--font);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  font-family: inherit;
}
.actions-bar form { margin: 0; }
.actions-bar .primary {
  background: var(--accent);
  color: var(--ink-on-accent);
  border-color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

/* App drawer (slides out from hamburger menu in statusbar) */
.drawer {
  display: none;
  position: fixed;            /* viewport-anchored, śledzi sticky statusbar */
  top: 44px; left: 0; right: 0;
  max-width: var(--shell-wide);
  margin: 0 auto;
  background: var(--surface);
  border-bottom: 1px solid var(--line-strong);
  z-index: 9;
}
.drawer.open { display: flex; flex-direction: column; }
.drawer a {
  padding: 14px var(--sp-6);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  font: 500 var(--fs-body)/1 var(--font);
}
.drawer a.active { background: var(--accent-bg); color: var(--accent-deep); }
.drawer a:active { background: var(--surface-2); }
/* Drawer rozciąga się na pełną szerokość main (left:0/right:0 z .drawer
   base rule) — niezależnie od `.wide`. Hamburger jest po lewej krawędzi
   statusbara, więc dropdown z prawej także — symetria. */

/* ────────────────────────── 7. Page accents ───────────────────────── */

/* Container header — slug + warehouse pill */
.container-header { margin: 0 0 var(--sp-5); }
.container-header .badges { margin-bottom: var(--sp-2); }
.container-header .slug-line {
  font: 400 var(--fs-eyebrow)/1.3 var(--font-mono);
  color: var(--ink-3);
  letter-spacing: 0.6px;
  word-break: break-all;
}
.container-header h1 { margin: var(--sp-1) 0; }
.container-header .location { font-size: var(--fs-body); color: var(--ink-2); margin-top: var(--sp-2); }
.container-header .location-missing { color: var(--warn-fg); }

/* /containers list — operator landing (3-col row with checkbox+main+stats) */
.container-list { list-style: none; padding: 0; margin: 0; }
.container-list li {
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: stretch;
}
.container-list li:last-child { border-bottom: none; }
.container-list .pick {
  display: flex; align-items: center;
  padding: 0 var(--sp-3); cursor: pointer;
}
.container-list .pick input { width: 20px; height: 20px; accent-color: var(--accent-deep); }
.container-list a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 4px var(--sp-4);
  padding: 14px 4px;
  text-decoration: none;
  color: inherit;
  align-items: baseline;
}
.container-list a:active { background: var(--surface-2); }
.container-list .row-loc {
  font: 600 var(--fs-body-lg)/1 var(--font-mono);
  letter-spacing: 0;
  min-width: 3.5em;
  color: var(--ink);
}
.container-list .row-loc-missing { color: var(--warn-fg); }
.container-list .row-main .name { margin: 0; font: 500 15px/1.3 var(--font); }
.container-list .row-right {
  text-align: right;
  font-size: var(--fs-meta);
  color: var(--ink-3);
  white-space: nowrap;
}
.container-list .row-right .badge { margin-bottom: 4px; }
.container-list .row-right .stat { display: block; }

/* Sticky batch-print bar */
.batch-bar {
  display: none;
  position: sticky;
  top: 44px;
  z-index: 5;
  background: var(--bg);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--line);
}
.batch-bar.shown { display: block; }
.batch-bar button {
  width: 100%;
  min-height: 44px;
  padding: 0 var(--sp-4);
  background: var(--accent);
  color: var(--ink-on-accent);
  border: none;
  border-radius: var(--radius-cta);
  font: 600 13px/1 var(--font);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  cursor: pointer;
}

/* Transfer detail — two-side diagram bulks → SKU */
.flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--sp-3);
  align-items: stretch;
  margin: var(--sp-4) 0;
}
.flow .side {
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-cta);
  background: var(--surface);
}
.flow .side h3 {
  margin: 0 0 var(--sp-2);
  font: 600 var(--fs-eyebrow)/1 var(--font);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-3);
}
.flow .side .num { font: 500 24px/1 var(--font-mono); letter-spacing: 0; color: var(--ink); }
.flow .side .row { margin: 4px 0; }
.flow .arrow {
  font-size: 24px;
  color: var(--ink-3);
  align-self: center;
  text-align: center;
}
@media (max-width: 500px) {
  .flow { grid-template-columns: 1fr; }
  .flow .arrow { transform: rotate(90deg); padding: var(--sp-2); }
}

/* Transfer (rozpakowanie) — live formula preview "X opak. → Y szt." */
.calc-preview {
  margin: var(--sp-4) 0;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-2);
  border-left: 3px solid var(--accent-2);
}
.calc-preview .formula {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.calc-preview .formula .qty {
  font: 500 32px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.4px;
  color: var(--ink);
}
.calc-preview .formula .result {
  color: var(--accent-deep);
  font: 600 13px/1 var(--font);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

/* /admin/sync — row of "Run …" buttons */
.run-controls { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin: var(--sp-3) 0; }
.run-controls form { margin: 0; }
.run-controls button {
  padding: 10px var(--sp-4);
  font: 600 12px/1 var(--font);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--ink-on-accent);
  border-radius: var(--radius-cta);
  min-height: 40px;
}
.run-controls button[disabled] {
  background: transparent; color: var(--ink-3); border-color: var(--line); cursor: not-allowed;
}

/* /admin/sync — stats summary cell */
.stats-summary { font-size: var(--fs-meta); color: var(--ink-3); }
.stats-summary code { font: 400 var(--fs-meta)/1 var(--font-mono); letter-spacing: 0; }

/* /admin/cron — when cell coloring */
.when-soon   { color: var(--warn-fg); font-weight: 600; }
.when-future { color: var(--ink-3); }

/* /admin/cron/form — preset chips */
.preset-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.preset-list button {
  font: 500 var(--fs-meta)/1 var(--font-mono);
  padding: 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  letter-spacing: 0;
}
.preset-list button:active { background: var(--surface-2); }

/* /admin/notifications/form — JS-toggled per-kind block */
.kind-block { display: none; }
.kind-block.active { display: block; }

/* Scanner-empty placeholder (dashes + caret) */
.scan-line {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: var(--sp-5) 0;
}
.scan-line .eyebrow { margin: 0; }
.scan-line .placeholder {
  font: 400 22px/1 var(--font-mono);
  color: var(--ink-3);
  letter-spacing: 4px;
  flex: 1;
}
.caret {
  display: inline-block;
  width: 1.5px; height: 0.85em;
  background: var(--accent-deep);
  margin-left: 2px;
  vertical-align: -1px;
  animation: blink 1.05s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* Loc chip (legacy mw/mg location code in products list) */
.loc-chip {
  display: inline-block;
  padding: 2px 7px;
  border-radius: var(--radius);
  font: 500 var(--fs-eyebrow)/1.4 var(--font-mono);
  letter-spacing: 0;
}
.loc-chip.loc-mw { background: var(--accent-bg); color: var(--accent-deep); }
.loc-chip.loc-mg { background: var(--surface-2); color: var(--ink-2); }

/* Komplet badge — accent pill */
.komplet-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: var(--radius);
  font: 600 10px/1 var(--font);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--accent-deep);
  background: var(--accent-bg);
  margin-left: var(--sp-2);
  vertical-align: middle;
}

/* Style picker — radio cards on /me/style */
.style-card {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-cta);
  margin: var(--sp-3) 0;
  cursor: pointer;
  background: var(--surface);
}
.style-card.selected {
  border-color: var(--accent-deep);
  background: var(--accent-bg);
}
.style-card input[type="radio"] {
  margin-top: 4px;
  width: 18px; height: 18px;
  accent-color: var(--accent-deep);
}
.style-card .style-card-body { flex: 1; }
.style-card .style-name {
  font: 500 var(--fs-body-lg)/1.3 var(--font);
  color: var(--ink);
  margin: 2px 0;
}
.style-card .sub { margin-top: var(--sp-2); line-height: 1.5; }

/* Selection state (lista — left bar + accent bg) */
li.selected, tr.selected,
.selected:not(.style-card) {
  background: var(--accent-bg);
  position: relative;
}
li.selected::before, tr.selected::before,
.selected:not(.style-card)::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
}

/* ── Scanner bar (global, _base.html) ────────────────────────────────
   Primary scan input across operator pages. Wzór z new_design.md §6
   "Skaner — wzorce": Material-style border-bottom, mono font (kody są
   cyframi/uppercase), centered, ink-3 placeholder. Większy niż zwykłe
   pole filtra — to **pierwsza klasa interakcji**.
*/
.scanner-bar {
  margin: var(--sp-4) auto var(--sp-5);
  max-width: 640px;
}
.scanner-bar__field {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1.5px solid var(--line-strong);
  transition: border-bottom-color 120ms ease;
}
.scanner-bar__field:focus-within {
  border-bottom-color: var(--accent-deep);
}
.scanner-bar__input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  text-align: center;
  font: 500 20px/1.3 var(--font-mono);
  color: var(--ink);
  letter-spacing: 1px;
  padding: 8px 0;
  -webkit-appearance: none;
  appearance: none;
}
.scanner-bar__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.scanner-bar__input::placeholder {
  color: var(--ink-3);
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.scanner-bar__clear {
  background: none;
  border: none;
  cursor: pointer;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  font: 500 22px/1 var(--font);
  color: var(--ink-3);
  border-radius: 50%;
  flex-shrink: 0;
}
.scanner-bar__clear:active { background: var(--surface-2); color: var(--ink); }
@media (hover: hover) {
  .scanner-bar__clear:hover { background: var(--surface-2); color: var(--ink); }
}

/* ── Scanner suggest (typeahead pod belką) ──────────────────────────── */
.scanner-suggest {
  max-width: 640px;
  margin: calc(var(--sp-3) * -1) auto var(--sp-4);
  background: var(--surface);
  border-radius: var(--r-md, 16px);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}
.scanner-suggest__list { list-style: none; margin: 0; padding: 0; }
.scanner-suggest__list li { border-bottom: 1px solid var(--surface-2); }
.scanner-suggest__list li:last-child { border-bottom: none; }
.scanner-suggest__list li.active,
.scanner-suggest__list li:hover { background: var(--surface-2); }
.scanner-suggest__row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  text-decoration: none; color: var(--ink); flex-wrap: wrap;
}
.scanner-suggest__slug { font: 600 14px/1.2 var(--font-mono); letter-spacing: 0.5px; }
.scanner-suggest__name { flex: 1; font: 400 14px/1.2 var(--font); color: var(--ink-2); }
.scanner-suggest__loc {
  font: 500 12px/1 var(--font-mono); color: var(--ink-3);
  padding: 2px 6px; background: var(--surface-2); border-radius: 4px;
}
.scanner-suggest__empty {
  margin: 0; padding: var(--sp-3) var(--sp-4);
  color: var(--ink-3); font-size: 14px;
}

/* ── List-page typeahead (suggest products/bulks/locations) ─────────── */
/* Wizualnie tożsame ze .scanner-suggest — różny mechanizm (per-page JS
   `list-suggest.js` + endpoint zwracający HTML zamiast JSON), spójny look. */
#list-suggest {
  max-width: 640px;
  margin: calc(var(--sp-3) * -1) auto var(--sp-4);
}
#list-suggest .list-suggest__list {
  list-style: none; margin: 0; padding: 0;
  background: var(--surface);
  border-radius: var(--r-md, 16px);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}
#list-suggest .list-suggest__list li { border-bottom: 1px solid var(--surface-2); }
#list-suggest .list-suggest__list li:last-child { border-bottom: none; }
#list-suggest .list-suggest__list li:hover { background: var(--surface-2); }
#list-suggest .list-suggest__row {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4);
  text-decoration: none; color: var(--ink);
}
#list-suggest .list-suggest__primary { font: 600 14px/1.2 var(--font-mono); letter-spacing: 0.3px; }
#list-suggest .list-suggest__name { flex: 1; font: 400 14px/1.2 var(--font); color: var(--ink-2); }
#list-suggest .list-suggest__meta {
  font: 500 12px/1 var(--font-mono); color: var(--ink-3);
  padding: 2px 6px; background: var(--surface-2); border-radius: 4px;
}
#list-suggest .list-suggest__sub {
  flex-basis: 100%; font: 400 12px/1.2 var(--font); color: var(--ink-3);
}
#list-suggest .list-suggest__empty {
  margin: 0; padding: var(--sp-3) var(--sp-4);
  color: var(--ink-3); font-size: 14px;
  background: var(--surface); border-radius: var(--r-md, 16px); box-shadow: var(--shadow-2);
}