/* Shopkeeper HQ - the operations console.
   Slate-tinted mid-grey surfaces. The owner's eyes tire easily and they squint,
   so nothing here is near-black and nothing is near-white: text tops out around
   8:1 on card, which is the halation guard. Cards sit LIGHTER than the ground -
   on a mid-tone ground a drop shadow reads as smudge, so the luminance step plus
   a hairline is what separates a card, not elevation.
   System fonts only: no network, no build step. */

:root {
  /* Surfaces */
  --bg: #2e323a;        /* page ground */
  --panel: #353a44;     /* card - one step LIGHTER than ground */
  --panel-2: #3d434f;   /* hover, active row */
  --well: #262a31;      /* inset: rail, inputs, chart plot, track */

  /* Hairlines */
  --hairline: #444a56;
  --hairline-2: #565d6b;

  /* Ink (on --panel: 8.1 / 5.9 / 4.65) */
  --text: #d6dae0;
  --dim: #b4bbc6;
  --faint: #9ea6b2;

  /* Identity */
  --amber: #dfa960;
  --amber-fg: #e8bc80;
  --amber-soft: #423a2e;

  /* Semantic (loss was #d8686c at 3.3:1 - failed AA, lightened not brightened) */
  --profit: #62bc8d;
  --profit-deep: #2d7050;
  --loss: #e88f92;
  --loss-deep: #6d3a3d;
  --info: #8fb0cd;
  --warn: #e0925c;

  /* Delta pills */
  --pill-up-bg: #2e4a3d;   --pill-up-fg: #7fd3a6;
  --pill-down-bg: #4c3235; --pill-down-fg: #ee9ea1;
  --pill-flat-bg: #3b414d; --pill-flat-fg: #b4bbc6;

  /* Chart series - blue/amber/teal/mauve/neutral. Deliberately avoids the
     red-green axis, so protan and deutan viewers still read every slice. */
  --c1: #5e8fc4; --c2: #dfa960; --c3: #6fc2b4; --c4: #c58bb4; --c5: #98a2b3;

  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;

  --r1: 4px; --r2: 8px; --r3: 12px; --rp: 999px;
}

* { box-sizing: border-box; }
html { font-size: 16px; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--mono); font-size: 0.88rem; line-height: 1.55;
}

/* ---- Shell ---- */
.shell { display: grid; grid-template-columns: 212px 1fr; min-height: 100vh; }
.side {
  background: var(--well); border-right: 1px solid var(--hairline);
  display: flex; flex-direction: column; padding: 14px 10px;
  position: sticky; top: 0; height: 100vh;
}
.side-brand { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.13em; padding: 4px 10px 16px; }
.brand-mark { color: var(--amber); margin-right: 5px; }
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-nav a {
  display: flex; align-items: center; gap: 10px; color: var(--dim);
  text-decoration: none; font-size: 0.85rem; padding: 8px 10px; border-radius: var(--r2);
}
.side-nav a:hover { background: var(--panel); color: var(--text); }
.side-nav a.active { background: var(--amber-soft); color: var(--amber-fg); }
.side-nav a.active .ni { color: var(--amber); }
.ni { width: 16px; height: 16px; flex: none; }
.badge { margin-left: auto; background: var(--amber); color: #221a0e; border-radius: var(--r1); font-size: 0.72rem; font-weight: 700; padding: 0 6px; }
.side-foot { margin-top: auto; padding: 10px; border-top: 1px solid var(--hairline); }

.mode-token { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; }
.mode-token::before { content: "["; } .mode-token::after { content: "]"; }
.mode-demo { color: var(--info); } .mode-dry { color: var(--amber); } .mode-live { color: var(--profit); }

.main-col { min-width: 0; display: flex; flex-direction: column; }
.statusbar {
  display: flex; align-items: center; gap: 10px; background: var(--panel);
  border-bottom: 1px solid var(--hairline); padding: 8px 20px; font-size: 0.79rem; color: var(--dim);
}
.statusbar-right { margin-left: auto; color: var(--faint); }
.statusbar-right a { color: var(--amber); text-decoration: none; }
.statusbar-right a:hover { text-decoration: underline; }
main { padding: 16px 20px 44px; max-width: 1320px; width: 100%; }

/* ---- Page header: the first line answers "do I have work?" ---- */
.pagehead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.pagehead-line { font-family: var(--sans); font-size: 1.05rem; color: var(--text); }
.pagehead-line strong { color: var(--amber); }

/* ---- Grid ---- */
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; align-items: start; }
.sp3 { grid-column: span 3; min-width: 0; }
.sp4 { grid-column: span 4; min-width: 0; }
.sp6 { grid-column: span 6; min-width: 0; }
.sp8 { grid-column: span 8; min-width: 0; }
.sp12 { grid-column: span 12; min-width: 0; }

/* ---- Panels ---- */
.panel { background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--r3); margin-bottom: 14px; min-width: 0; }
.grid > .panel, .grid > div > .panel:last-child { margin-bottom: 0; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 15px; border-bottom: 1px solid var(--hairline); }
.panel-head h2 { margin: 0; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--dim); }
.panel-body { padding: 14px 15px; }
.panel-body.flush { padding: 0; }
.panel-alert { border-color: var(--loss); }
.panel-alert .panel-head h2 { color: var(--loss); }

/* ---- KPI ---- */
.kpi { display: flex; flex-direction: column; gap: 4px; }
.kpi-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.11em; color: var(--faint); }
.kpi-row { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.kpi-value { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15; }
.kpi-note { font-size: 0.75rem; color: var(--faint); }
.kpi-mini { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--hairline); }
.kpi-mini:last-child { border-bottom: 0; }
.kpi-mini-label { font-size: 0.76rem; color: var(--dim); }
.kpi-mini-val { font-size: 0.95rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.pill { display: inline-flex; align-items: center; gap: 3px; font-size: 0.72rem; font-weight: 700; padding: 1px 8px; border-radius: var(--rp); white-space: nowrap; }
.pill-up { background: var(--pill-up-bg); color: var(--pill-up-fg); }
.pill-down { background: var(--pill-down-bg); color: var(--pill-down-fg); }
.pill-flat { background: var(--pill-flat-bg); color: var(--pill-flat-fg); }

.money { font-variant-numeric: tabular-nums; white-space: nowrap; }
.money.profit, .kpi-value.profit, .kpi-mini-val.profit { color: var(--profit); }
.money.loss, .kpi-value.loss, .kpi-mini-val.loss { color: var(--loss); }

/* ---- Decisions ---- */
.decision { padding: 12px 0; border-bottom: 1px solid var(--hairline); }
.decision:first-child { padding-top: 0; }
.decision:last-child { border-bottom: 0; padding-bottom: 0; }
.decision-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.tag { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; padding: 1px 7px; border-radius: var(--r1); background: var(--well); border: 1px solid var(--hairline-2); color: var(--dim); }
.tag-launch { color: var(--info); border-color: var(--info); }
.tag-kill { color: var(--loss); border-color: var(--loss); }
.tag-ad_kit { color: var(--amber); border-color: var(--amber-dim, var(--amber)); }
.tag-scale { color: var(--profit); border-color: var(--profit); }
.decision .who { font-size: 0.7rem; color: var(--faint); }
.decision .ask { font-family: var(--sans); font-size: 0.95rem; margin: 2px 0 8px; color: var(--text); }
.decision .detail { font-size: 0.79rem; color: var(--dim); margin: 6px 0 8px; white-space: pre-wrap; max-width: 70ch; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- Buttons ---- */
button, .btn {
  font-family: var(--mono); font-size: 0.8rem; cursor: pointer; border-radius: var(--r2);
  padding: 8px 16px; border: 1px solid var(--hairline-2); background: var(--panel-2); color: var(--text);
}
button:hover { border-color: var(--faint); }
button.yes { background: var(--profit-deep); color: #e9f6ef; border-color: var(--profit-deep); font-weight: 700; }
button.yes:hover { background: #35815d; border-color: #35815d; }
button.no { background: transparent; color: var(--dim); }
button.no:hover { color: var(--text); border-color: var(--faint); }
button.small { padding: 5px 12px; font-size: 0.76rem; }
button.danger { background: var(--loss-deep); border-color: var(--loss-deep); color: #f9e6e7; font-weight: 700; }
button.danger:hover { background: #85474a; border-color: #85474a; }
button:active { transform: translateY(1px); }
button:disabled, form.busy button { opacity: 0.55; cursor: progress; transform: none; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--amber);
}

/* ---- Analyst note ---- */
.note-voice { font-family: var(--sans); font-size: 0.92rem; line-height: 1.6; color: var(--text); max-width: 78ch; margin: 0; }

/* ---- Feed ---- */
.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; border-bottom: 1px solid var(--hairline); font-size: 0.8rem; color: var(--dim); }
.feed li:last-child { border-bottom: 0; }
.feed .ts { color: var(--faint); white-space: nowrap; font-size: 0.75rem; padding-top: 2px; }
.feed .dot { flex: none; width: 7px; height: 7px; border-radius: 50%; margin-top: 6px; background: var(--hairline-2); }
.dot-amber { background: var(--amber) !important; }
.dot-green { background: var(--profit) !important; }
.dot-red { background: var(--loss) !important; }

/* ---- Tables ---- */
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
th { text-align: left; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--faint); border-bottom: 1px solid var(--hairline-2); padding: 8px 10px; white-space: nowrap; }
td { border-bottom: 1px solid var(--hairline); padding: 9px 10px; vertical-align: top; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--panel-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td .note, .note { color: var(--faint); font-size: 0.75rem; }
.warnrow td { background: rgba(232, 143, 146, 0.06); }

/* ---- Chips: status is a dot + a word, never color alone ---- */
.chip { display: inline-flex; align-items: center; gap: 7px; font-size: 0.74rem; padding: 2px 10px; border-radius: var(--rp); border: 1px solid var(--hairline-2); background: var(--well); white-space: nowrap; }
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); flex: none; }
.chip-paid .dot, .chip-candidate .dot { background: var(--amber); }
.chip-placed .dot, .chip-shipped .dot, .chip-listed .dot, .chip-approved .dot { background: var(--info); }
.chip-delivered .dot, .chip-live .dot { background: var(--profit); }
.chip-refunded .dot { background: var(--loss); }
.chip-stuck { border-color: var(--loss); color: var(--loss); font-weight: 700; }
.chip-stuck .dot { background: var(--loss); }
.chip-killed { color: var(--faint); }
.chip-killed .dot { background: var(--hairline-2); }
.chip-queued .dot { background: var(--info); }
.chip-deferred { color: var(--amber-fg); border-color: var(--amber); }
.chip-deferred .dot { background: var(--amber); }
.tile-off { opacity: 0.65; }

/* Live-work strip: one honest line in the statusbar while agents work. */
.live-strip {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  color: var(--text); background: var(--well); border: 1px solid var(--hairline-2);
  border-radius: var(--rp); padding: 2px 12px; font-size: 0.76rem; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 46ch;
}
.live-strip:hover { border-color: var(--profit); }
.live-strip .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .live-strip .dot-green { animation: livepulse 2s ease-in-out infinite; }
  @keyframes livepulse { 50% { opacity: 0.35; } }
}

/* Count chips (pipeline / order flow) */
.counts { display: flex; gap: 8px; flex-wrap: wrap; }
.count { display: flex; flex-direction: column; gap: 1px; padding: 8px 14px; border: 1px solid var(--hairline); border-radius: var(--r2); background: var(--well); min-width: 92px; }
.count-n { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.count-l { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--faint); }

/* ---- Forms ---- */
form.inline { display: inline; }
label { display: block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--dim); margin: 10px 0 5px; }
input[type=text], input[type=number], input[type=date], textarea, select {
  font-family: var(--mono); font-size: 0.86rem; width: 100%; max-width: 420px;
  padding: 8px 10px; border: 1px solid var(--hairline-2); border-radius: var(--r2);
  background: var(--well); color: var(--text);
}
input::placeholder, textarea::placeholder { color: var(--faint); }
textarea { max-width: 100%; min-height: 88px; font-family: var(--sans); }
.form-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
::-webkit-calendar-picker-indicator { filter: invert(0.72); }

details { margin: 6px 0; }
summary { cursor: pointer; color: var(--amber); font-size: 0.78rem; }
summary::marker { color: var(--faint); }
summary:hover { color: var(--amber-fg); }
.adkit { background: var(--well); border: 1px solid var(--hairline); border-radius: var(--r2); padding: 12px 14px; margin-top: 8px; }
.adkit h4 { margin: 10px 0 5px; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.11em; color: var(--amber); }
.adkit p { margin: 3px 0; font-size: 0.8rem; color: var(--dim); }
.adkit p strong { color: var(--text); }
.copyable { font-family: var(--sans); font-size: 0.86rem; background: var(--panel-2); border: 1px solid var(--hairline); border-radius: var(--r2); padding: 10px 12px; white-space: pre-wrap; color: var(--text); }

.flash { background: var(--panel); border: 1px solid var(--hairline-2); border-radius: var(--r2); padding: 10px 14px; margin-bottom: 14px; font-size: 0.84rem; }
.flash::before { content: "> "; color: var(--amber); font-weight: 700; }

/* Empty states name who acts next and what unblocks it. */
.empty { color: var(--dim); padding: 6px 0 4px; font-size: 0.84rem; }
.empty strong { display: block; color: var(--text); font-size: 0.9rem; margin-bottom: 3px; }
.empty span { color: var(--faint); }

.readiness { list-style: none; padding: 0; margin: 0; }
.readiness li { padding: 7px 0; border-bottom: 1px solid var(--hairline); font-size: 0.82rem; color: var(--dim); }
.readiness li:last-child { border-bottom: 0; }
.sub { color: var(--dim); font-size: 0.82rem; margin: 0 0 12px; max-width: 78ch; }
h1 { display: none; }

/* ---- Help prose ---- */
.prose h1 { display: block; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.09em; margin: 0 0 12px; }
.prose h2 { font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.11em; color: var(--amber); margin: 26px 0 8px; }
.prose h3 { font-size: 0.9rem; color: var(--text); margin: 18px 0 6px; font-family: var(--sans); font-weight: 700; }
.prose p, .prose ul { font-family: var(--sans); font-size: 0.9rem; max-width: 72ch; color: var(--text); }
.prose ul { padding-left: 20px; } .prose li { margin: 4px 0; }
.prose code { font-family: var(--mono); font-size: 0.85em; background: var(--well); border: 1px solid var(--hairline); border-radius: var(--r1); padding: 1px 5px; color: var(--amber); }

@media (max-width: 1080px) {
  .sp3, .sp4, .sp8 { grid-column: span 6; }
}
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: static; height: auto; flex-direction: row; align-items: center; gap: 8px; padding: 8px 10px; }
  .side-brand { padding: 0 6px; }
  .side-nav { flex-direction: row; overflow-x: auto; }
  .side-nav a span:not(.badge) { display: none; }
  .side-foot { display: none; }
  .sp3, .sp4, .sp6, .sp8 { grid-column: span 12; }
  main { padding: 14px 12px 40px; }
  button { padding: 10px 16px; }
}
@media (prefers-reduced-motion: no-preference) {
  .flash { animation: settle 200ms ease-out; }
  @keyframes settle { from { opacity: 0; transform: translateY(-3px); } }
}

/* ---- Auth pages (v2) ---- */
.auth-body {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 20px;
}
.auth-card {
  background: var(--panel); border: 1px solid var(--hairline);
  border-radius: var(--r3); padding: 26px 28px; width: 100%; max-width: 420px;
}
.auth-card label { margin-top: 14px; }
.auth-card button { width: 100%; margin-top: 18px; padding: 11px; }
.auth-card .note { margin-top: 14px; display: block; }
.flash-error { border-color: var(--loss); }
.flash-error::before { content: "! "; color: var(--loss); }