/* ==========================================================================
   Ledger design system · Brand Rev. 05 "Mist & Ink"
   Carried forward from the previous build's public/admin.css, which is the
   truth about how this product looks. The Ember/Bone brand sheet PDF in that
   repo's docs/ is an EARLIER revision and is superseded -- it is the first
   thing you find when you go looking, and it is wrong.

   "Precision light." Onyx surfaces step down through three tiers separated by
   hairline borders. IBM Plex Mono for every number. ONE cobalt (#2F66F2) for
   every action -- it never varies, so "this is clickable" is never ambiguous.
   Depth is stacked material and hairlines, not blurred shadows.
   ========================================================================== */

:root {
  --ember: #2f66f2;          /* the one action colour. Named --ember for */
  --ember-700: #4176f4;      /* continuity with the old token names. */
  --ember-soft: rgba(47, 102, 242, 0.16);
  --gold: #f0be3e;

  --bg: #0e1320;
  --surface: #161c2b;
  --surface-2: #1b2233;

  --ink: #e9eef6;
  --ink-soft: #aeb7c6;
  --muted: #94a0b4;
  --faint: #6e7789;

  --line: rgba(233, 238, 246, 0.12);
  --line-soft: rgba(233, 238, 246, 0.07);
  --line-strong: rgba(233, 238, 246, 0.22);

  --green: #3dd68c;  --green-bg: rgba(61, 214, 140, 0.16);
  --amber: #f0be3e;  --amber-bg: rgba(240, 190, 62, 0.16);
  --red:   #e0685e;  --red-bg:   rgba(224, 104, 94, 0.16);
  --info:  #8fb4f2;
  --focus: rgba(47, 102, 242, 0.35);

  --r: 12px; --r-sm: 8px; --r-xs: 6px;
  --ctl-h: 40px; --ico: 16px; --ico-nav: 18px;

  --sh-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.02) inset;
  --sh: 0 8px 24px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.03) inset;

  --display: 'Space Grotesk', 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;

  --rail: 244px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 14.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ember-700); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { font-family: var(--display); font-weight: 650; letter-spacing: -0.01em; margin: 0; }
h1 { font-size: 22px; }
h2 { font-size: 16px; }

code, .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

::selection { background: rgba(47, 102, 242, 0.3); }

/* ── controls ─────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--ctl-h); padding: 0 16px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--ink);
  font: inherit; font-weight: 600; cursor: pointer;
}
.btn:hover { border-color: var(--line-strong); }
.btn:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
.btn-primary {
  background: var(--ember); border-color: var(--ember); color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.14) inset, 0 2px 10px rgba(47, 102, 242, 0.3);
}
.btn-primary:hover { background: var(--ember-700); border-color: var(--ember-700); }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }

label { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); margin: 0 0 6px; }

input[type='text'], input[type='email'], input[type='password'] {
  width: 100%; height: var(--ctl-h); padding: 0 12px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  font: inherit;
}
input::placeholder { color: var(--faint); }
input:focus { outline: none; border-color: var(--ember); box-shadow: 0 0 0 3px var(--focus); }

/* ── sign in ──────────────────────────────────────────────────────────────── */

.signin-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.signin {
  width: 100%; max-width: 380px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 28px; box-shadow: var(--sh);
}
.signin .mark { display: flex; align-items: center; gap: 11px; margin-bottom: 22px; }
.signin .mark img { height: 38px; width: auto; }
.signin .mark .wm { font-family: var(--display); font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.signin .mark .sub { display: block; font-size: 11px; font-weight: 600; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }
.signin .field { margin-bottom: 14px; }
.signin .btn { width: 100%; margin-top: 6px; }
.hint { font-size: 12.5px; color: var(--muted); margin: 14px 0 0; }

.alert {
  border-radius: var(--r-sm); padding: 10px 12px; font-size: 13px;
  margin-bottom: 16px; border: 1px solid transparent;
}
.alert-error { background: var(--red-bg); border-color: rgba(224, 104, 94, 0.4); color: #ffd9d5; }
.alert-info { background: var(--ember-soft); border-color: rgba(47, 102, 242, 0.4); color: var(--info); }
.alert[hidden] { display: none; }

/* ── shell ────────────────────────────────────────────────────────────────── */

.shell { display: grid; grid-template-columns: var(--rail) 1fr; min-height: 100vh; }

.side {
  background: var(--surface); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 2px;
  padding: 16px 12px; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.side .logo { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; }
.side .logo img { height: 34px; width: auto; }
.side .logo .wm { font-family: var(--display); font-size: 16.5px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.side .logo .sub { display: block; font-size: 10px; font-weight: 600; color: var(--muted); letter-spacing: 0.07em; text-transform: uppercase; }

.navlabel {
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--faint); padding: 14px 10px 6px;
}
.snav { display: flex; flex-direction: column; gap: 2px; }
.snav a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 10px;
  color: var(--ink-soft); font-weight: 600; font-size: 13.5px;
}
.snav a:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.snav a svg { width: var(--ico-nav); height: var(--ico-nav); color: var(--muted); flex: none; }
.snav a:hover svg { color: var(--ink); }
.snav a.active { background: var(--ember); color: #fff; box-shadow: var(--sh-sm); }
.snav a.active svg { color: #fff; }

.side .foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.side .who { padding: 8px 10px; font-size: 12.5px; }
.side .who .name { font-weight: 650; color: var(--ink); }
.side .who .shop { color: var(--muted); font-size: 11.5px; }

.main { display: flex; flex-direction: column; min-width: 0; }
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 28px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--bg); z-index: 5;
}
.topbar .ttl p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.content { padding: 28px; max-width: 1100px; }

/* ── panels and empty states ──────────────────────────────────────────────── */

.panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 22px; margin-bottom: 18px;
}

.empty { text-align: left; }
.empty .badge {
  display: inline-block; font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gold); background: var(--amber-bg);
  border-radius: 5px; padding: 3px 7px; margin-bottom: 12px;
}
.empty h2 { margin-bottom: 8px; }
.empty p { color: var(--ink-soft); margin: 0 0 10px; max-width: 62ch; }
.empty ul { color: var(--ink-soft); margin: 0 0 4px; padding-left: 20px; max-width: 62ch; }
.empty li { margin-bottom: 5px; }
.empty .note { color: var(--muted); font-size: 12.5px; }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; font-size: 13.5px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 3px 9px;
}
.pill-ok { background: var(--green-bg); color: var(--green); }
.pill-warn { background: var(--amber-bg); color: var(--amber); }
.pill-bad { background: var(--red-bg); color: var(--red); }

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; overflow: visible; }
  .side .navlabel, .side .foot { display: none; }
  .snav { flex-direction: row; flex-wrap: wrap; }
  .content { padding: 20px; }
}

/* ── metric tiles ─────────────────────────────────────────────────────────── */

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.tile {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.tile .tk { font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.tile .tv { font-family: var(--mono); font-size: 21px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── data grid ────────────────────────────────────────────────────────────── */

table.grid { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.grid th {
  text-align: left; font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--muted);
  padding: 0 12px 10px; border-bottom: 1px solid var(--line);
}
table.grid td { padding: 11px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
table.grid tr:last-child td { border-bottom: none; }
table.grid tr:hover td { background: var(--surface-2); }

/* Every number is mono and tabular, so columns line up and a price is never
   mistaken for a label. */
table.grid .num, td.num, th.num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }

.cell-name { font-weight: 600; }
.sub-line { display: block; font-weight: 400; font-size: 12px; color: var(--muted); margin-top: 2px; }
.dim { color: var(--faint); }
code { font-family: var(--mono); font-size: 12.5px; color: var(--ink-soft); }

/* ── the "what needs doing" list ──────────────────────────────────────────── */

.todos { list-style: none; margin: 14px 0 0; padding: 0; }
.todo {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 11px 0; border-bottom: 1px solid var(--line-soft);
}
.todo:last-child { border-bottom: none; }
.todo-count {
  min-width: 42px; text-align: right;
  font-family: var(--mono); font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.todo-label { font-weight: 600; }

/* Work waiting reads as gold -- the previous build's cue for "this surfaces
   itself". Nothing waiting is quiet rather than green: a shop with nothing to
   do should not look like an achievement. */
.todo-live  .todo-count { color: var(--gold); }
.todo-clear .todo-count { color: var(--faint); }
.todo-clear .todo-label { font-weight: 500; color: var(--ink-soft); }

/* A queue with no code behind it. Deliberately not styled as a zero: a dash is
   "we did not look", and it must not be mistaken for "nothing to do". */
.todo-absent .todo-count { color: var(--faint); }
.todo-absent .todo-label { font-weight: 500; color: var(--muted); }

.panel h2 + .todos { margin-top: 10px; }
.panel h2 { margin-bottom: 2px; }

/* ==========================================================================
   Light. The same tokens, restated -- every component reads from the names, so
   nothing below the token block knows which theme it is in.

   Carried from the previous build's halo.css, including its --faint decision:
   the obvious #8A93A3 measures 3.1:1 on white and fails AA, so it is darkened
   to sit above the line while staying clearly quieter than --muted.

   Default is the machine's preference; an explicit choice wins over it.
   ========================================================================== */

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ember: #2f66f2; --ember-700: #1e4fd0; --ember-soft: rgba(47, 102, 242, 0.08);
    --gold: #8a5a08;
    --bg: #f1f4f9; --surface: #ffffff; --surface-2: #f7f9fc;
    --ink: #0e1320; --ink-soft: #4a5364; --muted: #5a6577; --faint: #626c7a;
    --line: rgba(14, 19, 32, 0.12);
    --line-soft: rgba(14, 19, 32, 0.07);
    --line-strong: rgba(14, 19, 32, 0.22);
    --green: #0e7a50; --green-bg: #e3f5ec;
    --amber: #8a5a08; --amber-bg: #fdf3de;
    --red: #c4453a;   --red-bg: #fbeae8;
    --info: #1e4fd0;  --focus: rgba(47, 102, 242, 0.30);
    --sh-sm: 0 1px 2px rgba(20, 25, 42, 0.06);
    --sh: 0 1px 2px rgba(20, 25, 42, 0.05), 0 6px 18px rgba(20, 25, 42, 0.07);
  }
}

:root[data-theme="light"] {
  --ember: #2f66f2; --ember-700: #1e4fd0; --ember-soft: rgba(47, 102, 242, 0.08);
  --gold: #8a5a08;
  --bg: #f1f4f9; --surface: #ffffff; --surface-2: #f7f9fc;
  --ink: #0e1320; --ink-soft: #4a5364; --muted: #5a6577; --faint: #626c7a;
  --line: rgba(14, 19, 32, 0.12);
  --line-soft: rgba(14, 19, 32, 0.07);
  --line-strong: rgba(14, 19, 32, 0.22);
  --green: #0e7a50; --green-bg: #e3f5ec;
  --amber: #8a5a08; --amber-bg: #fdf3de;
  --red: #c4453a;   --red-bg: #fbeae8;
  --info: #1e4fd0;  --focus: rgba(47, 102, 242, 0.30);
  --sh-sm: 0 1px 2px rgba(20, 25, 42, 0.06);
  --sh: 0 1px 2px rgba(20, 25, 42, 0.05), 0 6px 18px rgba(20, 25, 42, 0.07);
}

/* The dark theme's error text is a pale tint that vanishes on white. */
:root[data-theme="light"] .alert-error { color: var(--red); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .alert-error { color: var(--red); }
}

/* ── topbar tools ─────────────────────────────────────────────────────────── */

.tools { display: flex; align-items: center; gap: 8px; flex: none; }
.updated { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink-soft); cursor: pointer;
}
.icon-btn:hover { border-color: var(--line-strong); color: var(--ink); }
.icon-btn:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
.icon-btn svg { width: 17px; height: 17px; }

/* One button, two glyphs, showing the theme you would switch TO -- which is
   what a toggle is asking. Showing the current state makes people click twice. */
.ico-sun { display: none; }
:root[data-theme="light"] .ico-sun { display: block; }
:root[data-theme="light"] .ico-moon { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .ico-sun { display: block; }
  :root:not([data-theme="dark"]) .ico-moon { display: none; }
}

/* ── connection status in the rail ────────────────────────────────────────── */

.conn { list-style: none; margin: 0 0 12px; padding: 0 10px; font-size: 11.5px; }
.conn li { display: flex; align-items: center; gap: 7px; padding: 2px 0; color: var(--ink-soft); }
.conn .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); flex: none; }
.conn .dot.on { background: var(--green); }

/* ── recent sales tree ────────────────────────────────────────────────────── */

.sales-tree { margin-top: 14px; }

.chev {
  display: inline-block; width: 12px; flex: none;
  color: var(--muted); font-size: 15px; line-height: 1;
  transition: transform 0.12s ease;
}
.sday[data-open="true"] > .sday-head > .chev,
.order[data-open="true"] > .order-head > .chev { transform: rotate(90deg); }

.sday { border-top: 1px solid var(--line); }
.sday:first-child { border-top: none; }
.sday-head, .order-head {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 8px; border: none; background: none; color: inherit;
  font: inherit; text-align: left; cursor: pointer;
}
.sday-head:hover, .order-head:hover { background: var(--surface-2); }
.sday-head { font-weight: 650; }
.sd-date { min-width: 150px; }
.sd-meta { flex: 1; font-weight: 400; font-size: 12.5px; }
.sd-total { font-weight: 650; }

.sday-orders, .order-lines { display: none; }
.sday[data-open="true"] > .sday-orders { display: block; }
.order[data-open="true"] > .order-lines { display: block; }

.order { border-top: 1px solid var(--line-soft); margin-left: 20px; }
.order-head { font-size: 13px; padding: 8px; }
.chan {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--muted); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 5px; padding: 2px 6px; flex: none;
}
.oref { font-family: var(--mono); font-size: 12px; min-width: 165px; }
.ocards { flex: 1; font-size: 12.5px; }
.ototal { font-weight: 650; min-width: 84px; text-align: right; }
.otime { font-size: 12px; min-width: 66px; text-align: right; }
.oship { min-width: 96px; text-align: right; }

.sale-line {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 8px 9px 40px; cursor: pointer;
  border-top: 1px solid var(--line-soft);
}
.sale-line:hover { background: var(--ember-soft); }
.sale-line:focus-visible { outline: 2px solid var(--ember); outline-offset: -2px; }
.sl-name { flex: 1; font-weight: 600; font-size: 13px; }
.sl-cond { font-size: 12px; color: var(--muted); min-width: 44px; }
.sl-qty { min-width: 40px; text-align: right; color: var(--muted); }
.sl-price { min-width: 84px; text-align: right; font-weight: 600; }

/* ── sale details drawer ──────────────────────────────────────────────────── */

.drawer { position: fixed; inset: 0; z-index: 40; }
.drawer[hidden] { display: none; }
.drawer-scrim { position: absolute; inset: 0; background: rgba(6, 9, 17, 0.5); }
.drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(480px, 100%);
  background: var(--surface); border-left: 1px solid var(--line);
  box-shadow: var(--sh); display: flex; flex-direction: column;
}
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--line); flex: none;
}
.drawer-head h2 { font-size: 17px; }
.drawer-body { padding: 20px; overflow-y: auto; }

.dtitle { font-family: var(--display); font-size: 17px; font-weight: 650; margin: 0; }
.dsub { color: var(--muted); font-size: 13px; margin: 4px 0 18px; }

.dmoney { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; }
.dm {
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 10px 12px; display: flex; flex-direction: column; gap: 4px;
}
.dm-total { background: var(--green-bg); border-color: transparent; }
.dm-total .dmv { color: var(--green); }
.dmk { font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.dmv { font-family: var(--mono); font-size: 16px; font-weight: 600; }

.dgrid { display: grid; grid-template-columns: max-content 1fr; gap: 0; margin: 0 0 20px; font-size: 13px; }
.dgrid dt { color: var(--muted); padding: 9px 18px 9px 0; border-top: 1px solid var(--line-soft); }
.dgrid dd { margin: 0; padding: 9px 0; border-top: 1px solid var(--line-soft); text-align: right; }
.dgrid dt:first-of-type, .dgrid dt:first-of-type + dd { border-top: none; }

.dlink { width: 100%; }
.pill-chan {
  background: var(--surface-2); color: var(--ink-soft); border: 1px solid var(--line);
  text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.04em;
}

.draw { margin-top: 18px; }
.draw summary { cursor: pointer; font-size: 12.5px; color: var(--muted); }
.raw {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 12px; font-family: var(--mono); font-size: 11.5px; overflow-x: auto;
  color: var(--ink-soft); margin-top: 10px;
}

/* No scroll lock on the body.
   Setting overflow:hidden while the page is scrolled makes the browser clamp
   the scroll position, so the fixed drawer paints over a page that has jumped
   -- and closing it leaves the reader somewhere they were not. The drawer
   scrolls internally; the page behind it staying scrollable is a smaller cost
   than losing someone's place in a list of sales. */

@media (max-width: 760px) {
  .oref, .otime, .ocards { display: none; }
  .sd-meta { font-size: 12px; }
  .dmoney { grid-template-columns: 1fr; }
}

/* ── inventory ────────────────────────────────────────────────────────────── */

.inv-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.statline { margin: 0; color: var(--ink-soft); font-size: 13.5px; }
.statline strong { color: var(--ink); font-weight: 650; }

.tabs { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.tab {
  border: none; background: none; color: var(--muted); font: inherit; font-size: 13.5px; font-weight: 600;
  padding: 9px 12px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab:hover { color: var(--ink); }
.tab.on { color: var(--ember); border-bottom-color: var(--ember); }
.tab .tcount { font-size: 12px; color: var(--faint); margin-left: 3px; }
.tab.on .tcount { color: var(--ember); }
/* Disabled rather than hidden: the shape of the screen stays honest, and a
   click cannot lead somewhere that does not exist. */
.tab-off { color: var(--faint); cursor: not-allowed; opacity: 0.7; }

.filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.filter-search { flex: 1; min-width: 220px; }
.filters select {
  height: var(--ctl-h); padding: 0 10px; font: inherit; font-size: 13.5px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-sm);
}
.filters select:focus { outline: none; border-color: var(--ember); box-shadow: 0 0 0 3px var(--focus); }
.shown { font-size: 12.5px; margin-left: auto; font-variant-numeric: tabular-nums; }

.panel-flush { padding: 0; overflow: hidden; }
table.inv { margin: 0; }
table.inv th { padding-top: 14px; }
table.inv td, table.inv th { padding-left: 10px; padding-right: 10px; }
table.inv th:first-child, table.inv td:first-child { padding-left: 16px; }
table.inv th:last-child, table.inv td:last-child { padding-right: 16px; }

.c-thumb { width: 46px; }
.thumb {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 46px; border-radius: 4px;
  background: var(--surface-2); border: 1px solid var(--line);
  font-family: var(--mono); font-size: 9.5px; font-weight: 700; color: var(--faint);
  letter-spacing: 0.02em;
}
.inv-name { color: var(--ink); font-weight: 650; }
.inv-name:hover { color: var(--ember); text-decoration: none; }

.c-stock { width: 84px; }
.stock-in {
  width: 66px; height: 32px; padding: 0 8px; text-align: right;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-xs);
  font: inherit; font-family: var(--mono); font-variant-numeric: tabular-nums;
}
.stock-in:focus { outline: none; border-color: var(--ember); box-shadow: 0 0 0 3px var(--focus); }

.c-adjust { width: 78px; white-space: nowrap; }
.adj {
  width: 28px; height: 28px; padding: 0; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-xs);
  background: var(--surface-2); color: var(--ink-soft);
  font: inherit; font-size: 15px; line-height: 1;
}
.adj:hover { border-color: var(--line-strong); color: var(--ink); }
.adj[disabled] { opacity: 0.5; cursor: wait; }
.c-where { width: 70px; }
.c-act { width: 48px; text-align: right; }
.c-act .icon-btn { width: 30px; height: 30px; }

.pager { display: flex; gap: 8px; margin: 16px 0; }

/* ── edit listing ─────────────────────────────────────────────────────────── */

.edit-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.crumb { margin: 0 0 12px; font-size: 13px; }
.edit-actions { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.save-note { font-size: 12.5px; color: var(--muted); }
.save-note.ok { color: var(--green); }
.save-note.bad { color: var(--red); }

.sect {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 14px;
}
.frow { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-top: 16px; }
.frow label { margin-bottom: 6px; }

.stepper { display: flex; align-items: center; gap: 6px; }
.stepper input {
  width: 80px; height: var(--ctl-h); text-align: center; padding: 0 8px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-sm); font: inherit; font-family: var(--mono);
}
.stepper .adj { width: 34px; height: var(--ctl-h); }

.willlist {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line);
}
.wl-k { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.wl-v { font-size: 18px; font-weight: 650; }

.edit-side .panel { position: sticky; top: 92px; }
.ch-top { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.ch-k { font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.ch-v { font-size: 19px; font-weight: 650; }

@media (max-width: 980px) {
  .edit-wrap { grid-template-columns: 1fr; }
  .edit-side .panel { position: static; }
}

/* ── "or" divider on the sign-in card ─────────────────────────────────────── */

.or { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--faint); font-size: 12px; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
#google-block .btn { width: 100%; }
#google-block[hidden] { display: none; }

/* -- connections ---------------------------------------------------------- */

/* Success and caution alerts. The existing pair covers error and information;
   an import that half-worked is neither of those, and colouring it as
   information is how "25 listings were not touched" reads as "all done". */
.alert-ok   { background: var(--green-bg); border-color: rgba(61, 214, 140, 0.4); color: var(--green); }
.alert-warn { background: var(--amber-bg); border-color: rgba(240, 190, 62, 0.4); color: var(--amber); }

.conn-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.conn-head h2 { margin: 0 0 2px; }
.conn-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; }

/* Disconnect is destructive and should not look like the other three. */
.btn-danger { color: var(--red); border-color: rgba(224, 104, 94, 0.45); }
.btn-danger:hover { background: var(--red-bg); }

.conn-settings { margin-top: 14px; padding: 14px 16px; border-radius: 8px; background: var(--surface-2); }
.conn-settings .field { margin-bottom: 10px; }
.conn-settings .field:last-child { margin-bottom: 0; }
.conn-settings label { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.conn-settings .note { margin: 0; }

/* -- inventory: market confidence and channel badges ---------------------- */

/* Shown only when the sources disagree enough to matter. A percentage on every
   row is noise; a percentage on the twelve rows worth checking is a signal. */
.conf-low {
  font-size: 11px; font-weight: 700; color: var(--amber);
  font-variant-numeric: tabular-nums; margin-left: 4px;
}

.chan {
  display: inline-block; padding: 1px 6px; border-radius: 4px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
  background: var(--surface-2); color: var(--ink-soft);
  border: 1px solid var(--line-soft);
}
.chan-ebay { color: var(--info); border-color: rgba(47, 102, 242, 0.4); }

/* Which marketplace a market price is for. Shown on the number itself, because
   a figure that silently changes meaning between rows is worse than one that is
   consistently approximate. */
.src-tag {
  font-size: 10px; font-weight: 700; letter-spacing: 0.03em;
  color: var(--muted); text-transform: uppercase; margin-left: 4px;
}

/* -- card drawer ---------------------------------------------------------- */

.drawer { display: none; }
.drawer.open {
  display: block; position: fixed; inset: 0; z-index: 60;
  background: rgba(8, 11, 18, 0.62);
}
.drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(560px, 100%);
  background: var(--surface); border-left: 1px solid var(--line);
  display: flex; flex-direction: column; overflow: hidden;
}
.drawer-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 20px 22px 14px; border-bottom: 1px solid var(--line-soft);
}
.drawer-head h2 { margin: 0; font-size: 17px; }
.drawer-head .note { margin: 3px 0 0; }
.drawer-body { padding: 18px 22px 28px; overflow-y: auto; }

.card-top { display: flex; gap: 18px; align-items: flex-start; }
.card-art { width: 132px; border-radius: 8px; border: 1px solid var(--line-soft); flex: none; }
.card-art-none {
  width: 132px; height: 184px; display: grid; place-items: center;
  background: var(--surface-2); color: var(--faint); font-size: 12px;
}
.card-money { min-width: 0; flex: 1; }
.kicker {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted);
}
.big-price {
  font-family: var(--mono); font-size: 30px; font-weight: 600;
  font-variant-numeric: tabular-nums; line-height: 1.15; margin: 4px 0 2px;
}
.big-price .conf { font-size: 12px; color: var(--muted); margin-left: 6px; font-family: var(--body); }
.big-price .conf-warn { color: var(--amber); }
.you-ask { font-size: 13px; color: var(--ink-soft); }
.warn-note { color: var(--amber); margin: 6px 0 0; }
.gap { color: var(--muted); }
.gap-wide { color: var(--amber); font-weight: 600; }

.moves { display: flex; gap: 18px; margin-top: 14px; }
.moves .kicker { display: block; margin-bottom: 2px; }
.move { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 14px; }
.move.up { color: var(--green); }
.move.down { color: var(--red); }
.move.flat { color: var(--muted); }

.panel-sub { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.panel-sub .kicker { display: block; margin-bottom: 8px; }
.src-list { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.src-list li {
  display: flex; align-items: center; gap: 10px; padding: 5px 0;
  border-bottom: 1px solid var(--line-soft);
}
.src-list li:last-child { border-bottom: none; }
.src-list .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; margin-left: auto; }

.verdict {
  font-size: 13px; color: var(--ink-soft); margin: 0 0 10px;
  padding: 9px 11px; border-radius: 6px;
  background: var(--amber-bg); border: 1px solid rgba(240, 190, 62, 0.3);
}
table.graded { font-size: 13px; }
table.graded tr.wins td { background: rgba(61, 214, 140, 0.07); }
.net-up { color: var(--green); }
.net-down { color: var(--red); }

/* The picture in the list. Fixed box so a slow or broken image never reflows. */
.thumb-img {
  width: 34px; height: 47px; object-fit: cover; border-radius: 4px;
  border: 1px solid var(--line-soft); background: var(--surface-2); display: block;
}

/* -- 90-day band, sparkline, repricing ------------------------------------ */

.band-track {
  position: relative; height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--surface-2), var(--ember-soft));
  border: 1px solid var(--line-soft);
}
.band-dot {
  position: absolute; top: 50%; width: 10px; height: 10px; border-radius: 50%;
  background: var(--ember); border: 2px solid var(--surface);
  transform: translate(-50%, -50%);
}
.band-ends {
  display: flex; justify-content: space-between; margin-top: 5px;
  font-size: 11.5px; color: var(--muted);
}
.band-ends .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.spark { width: 100%; height: 34px; color: var(--ember); display: block; }

.verdict-line { font-size: 13px; color: var(--ink-soft); margin: 0 0 10px; }
.switch { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.switch input { width: 16px; height: 16px; accent-color: var(--ember); }

/* -- add listing ---------------------------------------------------------- */

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 16px; }
.card-results { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.card-hit {
  display: flex; align-items: center; gap: 10px; text-align: left; width: 100%;
  padding: 7px 9px; border-radius: 7px; border: 1px solid var(--line-soft);
  background: var(--surface-2); color: var(--ink); cursor: pointer; font: inherit;
}
.card-hit:hover { border-color: var(--ember); }
.card-hit img, .card-hit .thumb { width: 30px; height: 42px; object-fit: cover; border-radius: 3px; flex: none; }

.chosen { display: flex; gap: 14px; align-items: flex-start; margin-top: 14px; }
.chosen img { width: 84px; border-radius: 6px; border: 1px solid var(--line-soft); }

.ready-row { padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.ready-row:last-child { border-bottom: none; }
.ready-head { display: flex; align-items: center; gap: 9px; }
.ready-name { font-weight: 600; font-size: 13.5px; }
.pill-warn { background: var(--amber-bg); color: var(--amber); }
.ready-missing { margin: 7px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--muted); }
.ready-missing li { margin-bottom: 3px; }
.ready-missing strong { color: var(--ink-soft); }
.is-ready .ready-name { color: var(--ink); }

/* -- what it is worth, on the add-listing form ---------------------------- */

.price-top { display: flex; gap: 22px; align-items: flex-start; }
.ask-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.ask-row .big-price { font-size: 26px; margin: 2px 0; }
.ask-row .note { margin: 2px 0 0; max-width: 46ch; }
.band { margin-top: 4px; }

/* A link that is a button, for switching to the finish a card is priced in. */
.link-btn {
  background: none; border: none; padding: 0; font: inherit; cursor: pointer;
  color: var(--ember); text-decoration: underline;
}

/* What a sale actually leaves. */
table.econ { width: 100%; font-size: 13.5px; margin-top: 4px; }
table.econ td { padding: 5px 0; border-bottom: 1px solid var(--line-soft); }
table.econ td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
table.econ tr.econ-last td { font-weight: 700; border-bottom: none; }
.kicker .pill { margin-left: 8px; vertical-align: middle; }

/* -- exporting to a marketplace ------------------------------------------- */

.head-actions { display: flex; gap: 8px; }
.chan-picker { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 12px; }

/* -- orders, as things you pack ------------------------------------------- */

.order-card { padding-bottom: 8px; }
.order-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.order-right { display: flex; align-items: center; gap: 14px; }
table.pick td.thumb { width: 44px; }
table.pick td.thumb img { width: 36px; border-radius: 4px; display: block; }
.tab-n { opacity: .7; font-variant-numeric: tabular-nums; }

/* -- what you keep, at two prices at once --------------------------------- */

table.econ thead th { padding: 0 0 8px; text-align: right; vertical-align: bottom; }
table.econ thead th:first-child { width: 40%; }
table.econ thead th .kicker { display: block; }
table.econ thead th .col-price {
  display: block; font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 16px; font-weight: 700; color: var(--ink);
}
table.econ thead th .pill { margin: 4px 0 0; }
table.econ.econ-two thead th:first-child { width: 34%; }
table.econ td.num .good { color: var(--green); }
table.econ td.num .bad  { color: var(--red); }