/* Profit Dashboard - UI Phase 2 style system.
   Light SaaS analytics look: white cards on a very light grey plane, one violet
   accent for links and primary actions, green/red reserved for profit/loss and
   status. Every colour is a token below; dark mode redefines the tokens only
   (following the system setting). Local assets only: system fonts, no CDN. */
:root {
  /* surfaces + ink */
  --bg: #f4f4f1; --panel: #ffffff; --panel-2: #f9f9f7; --ink: #17171a; --ink-2: #4c4b48; --muted: #75736d;
  --line: #e7e6e1; --line-strong: #d4d3cd; --hover: rgba(23, 23, 26, .035); --shadow: 0 1px 2px rgba(23, 23, 26, .05);
  /* the one accent */
  --accent: #5444c4; --accent-ink: #ffffff; --accent-soft: #efedfb; --accent-line: #c9c3f1;
  /* meaning: profit/loss and status only */
  --pos: #18742a; --neg: #c0332f;
  --ok: #18742a; --ok-bg: #e9f5ec; --ok-line: #b9dcc1;
  --warn: #8a5a00; --warn-bg: #fdf6e3; --warn-line: #ecd08a;
  --err: #b42318; --err-bg: #fdeeec; --err-line: #f2c1bb;
  --dirty-bg: #f1effc;
  /* charts (validated with the dataviz palette checks for each surface) */
  --c-revenue: #2a78d6; --c-profit: #eb6834; --c-up: #2a78d6; --c-down: #e34948; --c-total: #52514e;
  --c-text: #17171a; --c-muted: #75736d; --c-grid: #ecebe6; --c-tip: #17171a; --c-tip-ink: #ffffff;
  /* type scale */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-xs: 11.5px; --fs-sm: 12.5px; --fs-base: 14px; --fs-md: 15px; --fs-lg: 18px; --fs-xl: 22px; --fs-tile: 25px;
  --radius: 10px; --radius-sm: 6px;
  --sidebar-w: 232px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111111; --panel: #1b1b1a; --panel-2: #20201f; --ink: #eeede8; --ink-2: #c3c2b7; --muted: #9a988f;
    --line: #2c2c2a; --line-strong: #3b3b38; --hover: rgba(255, 255, 255, .04); --shadow: none;
    --accent: #a69cf3; --accent-ink: #16132a; --accent-soft: #29254a; --accent-line: #4a4386;
    --pos: #46c25a; --neg: #f07a72;
    --ok: #46c25a; --ok-bg: #15281a; --ok-line: #2c5535;
    --warn: #f0c560; --warn-bg: #2a2310; --warn-line: #5d4b17;
    --err: #f07a72; --err-bg: #2d1615; --err-line: #64302c;
    --dirty-bg: #24213d;
    --c-revenue: #3987e5; --c-profit: #d95926; --c-up: #3987e5; --c-down: #e66767; --c-total: #a3a29a;
    --c-text: #eeede8; --c-muted: #9a988f; --c-grid: #2c2c2a; --c-tip: #eeede8; --c-tip-ink: #17171a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #111111; --panel: #1b1b1a; --panel-2: #20201f; --ink: #eeede8; --ink-2: #c3c2b7; --muted: #9a988f;
  --line: #2c2c2a; --line-strong: #3b3b38; --hover: rgba(255, 255, 255, .04); --shadow: none;
  --accent: #a69cf3; --accent-ink: #16132a; --accent-soft: #29254a; --accent-line: #4a4386;
  --pos: #46c25a; --neg: #f07a72;
  --ok: #46c25a; --ok-bg: #15281a; --ok-line: #2c5535;
  --warn: #f0c560; --warn-bg: #2a2310; --warn-line: #5d4b17;
  --err: #f07a72; --err-bg: #2d1615; --err-line: #64302c;
  --dirty-bg: #24213d;
  --c-revenue: #3987e5; --c-profit: #d95926; --c-up: #3987e5; --c-down: #e66767; --c-total: #a3a29a;
  --c-text: #eeede8; --c-muted: #9a988f; --c-grid: #2c2c2a; --c-tip: #eeede8; --c-tip-ink: #17171a;
  color-scheme: dark;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
body { margin: 0; font: var(--fs-base)/1.5 var(--font); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
h1 { font-size: var(--fs-xl); font-weight: 650; letter-spacing: -.01em; margin: .25rem 0 .9rem; text-wrap: balance; }
h2 { font-size: var(--fs-md); font-weight: 650; margin: 1.5rem 0 .6rem; }
h3 { font-size: var(--fs-base); font-weight: 650; }
code, kbd { font: var(--fs-sm) var(--mono); background: var(--panel-2); border: 1px solid var(--line); padding: 0 4px; border-radius: 4px; overflow-wrap: anywhere; }
.neg { color: var(--neg); }
.pos { color: var(--pos); }
.hint { color: var(--muted); max-width: 72rem; font-size: var(--fs-sm); }
.sub { display: block; color: var(--muted); font-size: var(--fs-sm); }
.sub-inline { color: var(--muted); font-size: var(--fs-sm); }
.freshness { color: var(--muted); font-size: var(--fs-xs); margin-top: 1rem; }
.error { color: var(--err); }
.ok { color: var(--ok); }
p.error, .flash, .warn { padding: .55rem .8rem; border-radius: var(--radius-sm); font-size: var(--fs-sm); }
p.error { background: var(--err-bg); border: 1px solid var(--err-line); }
.flash { background: var(--ok-bg); border: 1px solid var(--ok-line); color: var(--ink); }
.warn { background: var(--warn-bg); border: 1px solid var(--warn-line); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- controls ---------- */
button, .button { font: inherit; font-size: var(--fs-sm); font-weight: 550; padding: .42rem .85rem; border: 1px solid var(--line-strong);
  background: var(--panel); color: var(--ink); border-radius: var(--radius-sm); cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: .35rem; line-height: 1.3; }
button:hover, .button:hover { background: var(--panel-2); border-color: var(--muted); }
button.primary, .button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
button.primary:hover { filter: brightness(1.08); background: var(--accent); }
button.small, .button.small { padding: .22rem .6rem; font-size: var(--fs-xs); }
button.danger { color: var(--err); }
button.link { background: none; border: 0; color: var(--accent); cursor: pointer; font: inherit; padding: 0; text-decoration: underline; }
input, select, textarea { font: inherit; font-size: var(--fs-sm); padding: .36rem .5rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--panel); color: var(--ink); }
input:focus, select:focus { outline: 2px solid var(--accent-line); outline-offset: 0; border-color: var(--accent); }
.page-head { display: flex; justify-content: space-between; align-items: center; gap: .75rem 1rem; flex-wrap: wrap; }
.page-head h1, .page-head h2 { margin-bottom: .5rem; }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.toolbar { display: flex; gap: .75rem 1rem; align-items: center; margin: .75rem 0; flex-wrap: wrap; }
.toolbar input[type=search] { width: min(24rem, 100%); }
.check { display: inline-flex; gap: .4rem; align-items: center; color: var(--ink-2); font-size: var(--fs-sm); }

/* ---------- layout: sidebar + top bar ---------- */
body.has-sidebar { display: flex; min-height: 100vh; }
.sidebar { width: var(--sidebar-w); flex: none; background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 30; }
.sidebar a { color: var(--ink-2); text-decoration: none; }
.sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: .9rem .7rem .7rem 1.1rem; }
.sidebar .brand { font-weight: 700; font-size: var(--fs-md); color: var(--ink); white-space: nowrap; letter-spacing: -.01em; }
.side-nav { flex: 1; padding: 0 .5rem; }
.nav-group { padding: .3rem 0 .45rem; }
.nav-group-label { display: flex; align-items: center; gap: .6rem; padding: .4rem .6rem; color: var(--muted); font-size: var(--fs-xs);
  font-weight: 650; text-transform: uppercase; letter-spacing: .06em; }
.nav-group.current > .nav-group-label { color: var(--ink); }
.nav-item { display: flex; align-items: center; gap: .4rem; margin: 1px 0; padding: .38rem .6rem .38rem 2.35rem; font-size: var(--fs-base);
  border-radius: var(--radius-sm); }
.nav-item:hover { background: var(--hover); color: var(--ink); }
.nav-item[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 650; }
.nav-item.soon, .nav-group.soon .nav-group-label { color: var(--muted); opacity: .7; cursor: default; }
.nav-item.soon:hover { background: none; color: var(--muted); }
.soon-tag { margin-left: auto; font-size: 10px; font-weight: 550; text-transform: none; letter-spacing: 0; border: 1px solid var(--line-strong);
  border-radius: 999px; padding: 0 .4rem; color: var(--muted); white-space: nowrap; }
.settings-group { border-top: 1px solid var(--line); padding: .45rem .5rem .8rem; }
.settings-group > .nav-group-label { text-transform: none; font-size: var(--fs-base); letter-spacing: 0; color: var(--ink-2); font-weight: 550;
  border-radius: var(--radius-sm); }
.settings-group > .nav-group-label:hover { background: var(--hover); }
.settings-group:not(.open) .nav-item { display: none; }
.icon { flex: none; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; padding: .35rem; border: 0; background: none;
  color: var(--ink-2); border-radius: var(--radius-sm); cursor: pointer; }
.icon-btn:hover { background: var(--hover); color: var(--ink); }
.collapse-btn { color: var(--muted); }
body.nav-collapsed .sidebar { width: 60px; }
body.nav-collapsed .sidebar .label, body.nav-collapsed .sidebar .brand, body.nav-collapsed .soon-tag,
body.nav-collapsed .sidebar .nav-item { display: none; }
body.nav-collapsed .sidebar-head { justify-content: center; padding: .9rem 0 .6rem; }
body.nav-collapsed .collapse-btn .icon { transform: rotate(180deg); }
body.nav-collapsed .nav-group-label { justify-content: center; padding: .55rem 0; }
body.nav-collapsed .side-nav, body.nav-collapsed .settings-group { padding-left: .25rem; padding-right: .25rem; }

.page { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* Auto margins stop a flex item stretching; without the width, main grows to fit its widest table. */
.page > main { width: 100%; min-width: 0; padding: 1.25rem 1.5rem 3rem; max-width: 1560px; margin: 0 auto; }
.topbar { display: flex; gap: .6rem 1.25rem; align-items: center; padding: .6rem 1.5rem; background: var(--panel);
  border-bottom: 1px solid var(--line); flex-wrap: wrap; position: sticky; top: 0; z-index: 20; }
.crumbs { min-width: 0; }
.breadcrumb { font-size: var(--fs-xs); color: var(--muted); display: flex; gap: .35rem; flex-wrap: wrap; }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); text-decoration: underline; }
.page-title { font-weight: 650; font-size: var(--fs-lg); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 32rem; }
.topbar-range { flex: 1; min-width: 0; }
.topbar-right { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.topbar .acct { color: var(--ink-2); font-size: var(--fs-sm); white-space: nowrap; padding: .25rem .6rem; border: 1px solid var(--line);
  border-radius: 999px; background: var(--panel-2); }
.menu-btn { display: none; }
details.menu { position: relative; }
details.menu > summary { list-style: none; cursor: pointer; }
details.menu > summary::-webkit-details-marker { display: none; }
.menu-body { position: absolute; right: 0; top: calc(100% + .45rem); background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: 0 10px 30px rgba(0, 0, 0, .14); padding: .7rem .9rem; min-width: 15rem; max-width: min(26rem, 90vw);
  z-index: 40; font-size: var(--fs-sm); }
.menu-body p { margin: .15rem 0 .45rem; }
.menu-body ul { margin: 0 0 .45rem; padding-left: 1.1rem; }
.user-menu .menu-body a, .user-menu .menu-body .logout button { display: block; padding: .3rem 0; }
.logout { margin: 0; }
.status-dot { display: inline-flex; padding: .5rem; border-radius: 50%; }
.status-dot:hover { background: var(--hover); }
.status-dot .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); }
.status-dot.bad .dot { background: var(--err); box-shadow: 0 0 0 3px var(--err-bg); }
.nav-scrim[hidden] { display: none; }

/* slim dismissible failure bar under the top bar */
.site-alert { background: var(--err-bg); border-bottom: 1px solid var(--err-line); color: var(--err); padding: .32rem 1.5rem; font-size: var(--fs-sm);
  display: flex; gap: 1rem; align-items: center; justify-content: space-between; }
.site-alert[hidden] { display: none; }
.site-alert a { color: var(--err); font-weight: 600; }
.site-alert .dismiss { color: var(--err); font-size: var(--fs-xs); white-space: nowrap; }

/* ---------- date range picker (top bar) ---------- */
.range-picker { display: flex; flex-wrap: wrap; gap: .45rem 1rem; align-items: center; margin: 0; }
.presets { display: flex; flex-wrap: wrap; gap: .3rem; }
.chip { padding: .26rem .7rem; border: 1px solid var(--line); border-radius: 999px; background: var(--panel);
  color: var(--ink-2); text-decoration: none; font-size: var(--fs-sm); white-space: nowrap; }
.chip:hover { border-color: var(--line-strong); color: var(--ink); background: var(--panel-2); }
.chip.active { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); font-weight: 650; }
.range-picker .custom { display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; font-size: var(--fs-sm); color: var(--muted); }
.range-picker .custom input { padding: .22rem .4rem; }
.range-label { flex-basis: 100%; margin: 0; font-size: var(--fs-xs); color: var(--muted); }

/* ---------- cards, tiles, badges ---------- */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.15rem 1.15rem;
  margin-bottom: 1.1rem; box-shadow: var(--shadow); min-width: 0; }
.panel h2 { margin: 0 0 .75rem; }
.panel .table-wrap { border: 0; border-top: 1px solid var(--line); border-radius: 0; margin: 0 -1.15rem; }
.panel .table-wrap:last-child { margin-bottom: -1.15rem; border-radius: 0 0 var(--radius) var(--radius); }
.panel.narrow { max-width: 34rem; }
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 1.1rem; }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .8rem; margin-bottom: 1.1rem; align-items: start; }
@media (min-width: 1100px) { .tiles { grid-template-columns: repeat(4, 1fr); } }   /* 8 tiles: two even rows */
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: .85rem 1rem .8rem;
  display: flex; flex-direction: column; gap: .2rem; min-width: 0; box-shadow: var(--shadow); }
details.tile > summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: .2rem; }
details.tile > summary::-webkit-details-marker { display: none; }
details.tile[open] { grid-row: span 2; }
.tile .k { font-size: var(--fs-sm); color: var(--ink-2); font-weight: 550; }
.tile .v { font-size: var(--fs-tile); font-weight: 650; letter-spacing: -.02em; line-height: 1.2; white-space: nowrap; }   /* never clipped */
.tile .s { font-size: var(--fs-xs); color: var(--muted); }
.tile-profit .v { color: var(--pos); }
.tile-profit .v .neg { color: var(--neg); }
.tile.incomplete .v, .incomplete, .incomplete .neg { color: var(--muted) !important; }
.cmp { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; white-space: nowrap; }
.cmp.good { color: var(--pos); }
.cmp.bad { color: var(--neg); }
.cmp .cmp-label { font-weight: 450; color: var(--muted); }
table.mini { width: 100%; margin-top: .5rem; font-size: var(--fs-xs); border-collapse: collapse; }
table.mini td { padding: .2rem 0; border-top: 1px solid var(--line); color: var(--ink-2); }
table.mini .num { text-align: right; font-variant-numeric: tabular-nums; padding-left: .5rem; }

.badges { display: flex; gap: .4rem; flex-wrap: wrap; margin: 0 0 .9rem; }
.badges:empty { display: none; }
.badge { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--fs-xs); font-weight: 550; padding: .05rem .5rem;
  border-radius: 999px; background: var(--panel); border: 1px solid var(--line); color: var(--ink-2); text-decoration: none; max-width: 100%; }
.badge::before { flex: none; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
a.badge:hover { border-color: var(--line-strong); color: var(--ink); }
.badge-est::before { background: var(--accent); }
.badge-missing::before { background: var(--warn); }
.badge-ok::before { background: var(--ok); }
.badge[title] { cursor: help; }
a.badge[title] { cursor: pointer; }

.automation-strip { display: flex; align-items: center; gap: .5rem; margin: 0 0 .9rem; font-size: var(--fs-sm); color: var(--ink-2); }
.automation-strip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; }
.automation-strip.bad::before { background: var(--err); }
.automation-strip.bad { color: var(--ink); }

.chart-box { position: relative; height: 300px; }
.chart-box.tall { height: 420px; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
/* Tall tables scroll inside their card, so the header stays on top and the totals row stays at the bottom. */
.table-wrap.scroll { max-height: calc(100vh - 230px); min-height: 280px; overflow: auto; }
table.data, table.cogs { border-collapse: separate; border-spacing: 0; width: 100%; font-size: var(--fs-sm); }
table.data th, table.data td, table.cogs th, table.cogs td { padding: .5rem .65rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
table.data th, table.cogs th { position: sticky; top: 0; background: var(--panel-2); font-size: var(--fs-xs); color: var(--muted); font-weight: 650;
  text-transform: uppercase; letter-spacing: .04em; z-index: 2; white-space: nowrap; }
table.data th button { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-transform: inherit; letter-spacing: inherit; }
table.data th button:hover { color: var(--ink); }
table.data th button.asc::after { content: " \25B2"; }
table.data th button.desc::after { content: " \25BC"; }
table.data .num, table.cogs .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.data tbody tr:hover td, table.cogs tbody tr:hover td { background: var(--hover); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data td.img { width: 48px; padding-right: 0; }
table.data td.img img { display: block; border-radius: 6px; object-fit: contain; background: #fff; border: 1px solid var(--line); }
table.data td.sku { min-width: 14rem; max-width: 24rem; }
table.data td.sku a:first-child { font-weight: 600; text-decoration: none; }
table.data td.sku a:first-child:hover { text-decoration: underline; }
table.data .title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 22rem; }
table.data td.profit { font-weight: 650; }
table.data tfoot td { background: var(--panel-2); }
table.data tr.total td { font-weight: 700; border-top: 1px solid var(--line-strong); border-bottom: 0; }
.table-wrap.scroll tr.total td { position: sticky; bottom: 0; z-index: 1; box-shadow: 0 -1px 0 var(--line-strong); }
table.data tr.unalloc td { color: var(--ink-2); }
table.data tr.sub-total td { font-weight: 650; background: var(--panel-2); }
table.data td.indent { padding-left: 1.7rem; }
table.mini-data { font-size: var(--fs-sm); }
td.nowrap { white-space: nowrap; }
td.detail { max-width: 34rem; overflow-wrap: anywhere; }
td.msg { max-width: 28rem; overflow-wrap: anywhere; }
td.total { font-weight: 650; }
[hidden] { display: none !important; }

/* column picker */
.col-picker .menu-body { min-width: 13rem; }
.col-picker label { display: flex; gap: .5rem; align-items: center; padding: .18rem 0; color: var(--ink); cursor: pointer; }
.col-picker .menu-foot { border-top: 1px solid var(--line); margin-top: .4rem; padding-top: .4rem; }

/* ---------- COGS editor ---------- */
table.cogs input.cost { width: 6.4rem; text-align: right; font-variant-numeric: tabular-nums; }
table.cogs input.note { width: 12rem; }
table.cogs td.sku { min-width: 13rem; max-width: 20rem; }
.sku-name { font-weight: 600; overflow-wrap: anywhere; }
tr.missing td { background: var(--warn-bg); }
tr.dirty td { background: var(--dirty-bg); }
tr.has-error td { background: var(--err-bg); }
tr.saving { opacity: .55; }
tr.future td { color: var(--muted); }
.row-actions { white-space: nowrap; }
.row-actions .apply { display: none; gap: .35rem; align-items: center; }
tr.dirty .row-actions .apply { display: inline-flex; }
tr.dirty .history-link { display: none; }
.row-actions .apply input[type=date] { padding: .15rem .3rem; }
.row-actions .error, .row-actions .saved { display: block; white-space: normal; font-size: var(--fs-xs); max-width: 22rem; }
.saved { color: var(--ok); animation: fade 6s forwards; }
@keyframes fade { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
form.add-cost { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; background: var(--panel); border: 1px solid var(--line);
  padding: .85rem; border-radius: var(--radius); margin-bottom: 1rem; }
form.add-cost label { display: flex; flex-direction: column; gap: .2rem; font-size: var(--fs-xs); color: var(--muted); }
form.add-cost input.cost { width: 6.4rem; text-align: right; }
form.upload { display: flex; gap: .75rem; align-items: center; margin: 1rem 0; flex-wrap: wrap; }
.preview tr.st-error td { background: var(--err-bg); }
.preview tr.st-new .st { background: var(--ok-bg); }
.preview tr.st-replace .st { background: var(--warn-bg); }
.preview tr.st-error .st { background: var(--err-bg); }

/* ---------- login ---------- */
.login-page { display: grid; place-items: center; min-height: 100vh; padding: 1rem; }
.login-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 1.6rem; width: min(22rem, 100%);
  display: flex; flex-direction: column; gap: .85rem; box-shadow: var(--shadow); }
.login-card h1 { margin: 0 0 .25rem; }
.login-card label { display: flex; flex-direction: column; gap: .25rem; font-size: var(--fs-sm); color: var(--ink-2); }

/* ---------- SKU detail ---------- */
.sku-head { display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem; }
.sku-head img { border-radius: var(--radius-sm); border: 1px solid var(--line); background: #fff; object-fit: contain; }
.sku-head h1 { margin: 0; }
.sku-head .sub { margin: .1rem 0 0; }
.back-links { font-size: var(--fs-sm); margin: 0 0 .75rem; }

/* ---------- settings, health ---------- */
form.settings { display: flex; flex-direction: column; gap: 1rem; max-width: 46rem; }
form.settings fieldset { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: .85rem 1.1rem; }
form.settings legend { font-weight: 650; padding: 0 .3rem; }
.radio { display: flex; gap: .5rem; align-items: center; padding: .2rem 0; }
form.settings button { align-self: flex-start; }
form.stack { display: flex; flex-direction: column; gap: .7rem; align-items: flex-start; }
form.stack label { display: flex; flex-direction: column; gap: .2rem; color: var(--ink-2); font-size: var(--fs-sm); }
form.stack input { width: 18rem; max-width: 100%; }
tr.row-bad td { background: var(--err-bg); }
tr.row-warn td { background: var(--warn-bg); }
details.recon { border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: .5rem; background: var(--panel); }
details.recon.flagged { border-color: var(--err-line); }
details.recon > summary { cursor: pointer; padding: .55rem .8rem; display: flex; gap: 1rem; flex-wrap: wrap; align-items: baseline; }
details.recon > summary .num { margin-left: auto; font-variant-numeric: tabular-nums; }
details.recon table { margin: 0 .8rem .8rem; width: calc(100% - 1.6rem); }
.recon-id { font-weight: 650; }

/* ---------- tools ---------- */
.account-head { margin-top: 1.4rem; }
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr)); gap: 1rem; }
.tool-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: .95rem 1.1rem; display: flex;
  flex-direction: column; gap: .45rem; min-width: 0; box-shadow: var(--shadow); }
.tool-card.state-failed, .tool-card.state-error { border-color: var(--err-line); }
.tool-card.state-stale { border-color: var(--warn-line); }
.tool-card header { display: flex; justify-content: space-between; align-items: center; gap: .75rem; }
.tool-card h3 { margin: 0; font-size: var(--fs-md); }
.tool-card .purpose { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); }
.tool-card .reason { margin: 0; font-size: var(--fs-sm); overflow-wrap: anywhere; }
.tool-card footer { margin-top: auto; font-size: var(--fs-sm); }
.tool-card details > summary { cursor: pointer; font-size: var(--fs-sm); padding: .25rem 0; color: var(--ink-2); }
.tool-card details .table-wrap, .tool-card details table { margin-top: .4rem; }
.tool-card td .title { max-width: 16rem; }
.pill { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--fs-xs); font-weight: 650; padding: .1rem .55rem;
  border-radius: 999px; white-space: nowrap; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink-2); }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.pill-ok, .pill-running { color: var(--ok); border-color: var(--ok-line); background: var(--ok-bg); }
.pill-ok::before, .pill-running::before { background: var(--ok); }
.pill-failed, .pill-error { color: var(--err); border-color: var(--err-line); background: var(--err-bg); }
.pill-failed::before, .pill-error::before { background: var(--err); }
.pill-stale { color: var(--warn); border-color: var(--warn-line); background: var(--warn-bg); }
.pill-stale::before { background: var(--warn); }
dl.facts { display: grid; grid-template-columns: 7.5rem 1fr; gap: .25rem .75rem; margin: .25rem 0; font-size: var(--fs-sm); }
dl.facts.wide { grid-template-columns: 8rem 1fr; max-width: 60rem; }
dl.facts dt { color: var(--muted); }
dl.facts dd { margin: 0; overflow-wrap: anywhere; }
.result-ok { color: var(--ok); }
.result-failed { color: var(--err); font-weight: 650; }
.result-running { color: var(--accent); }
form.filters { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: flex-end; margin: .25rem 0 .9rem; font-size: var(--fs-sm); }
form.filters label { display: flex; flex-direction: column; gap: .2rem; color: var(--muted); font-size: var(--fs-xs); }
form.filters input:not([type=date]) { width: 11rem; }
form.filters select { max-width: 14rem; }
pre.log { background: #161615; color: #e8e8e3; padding: .8rem 1rem; border-radius: var(--radius); overflow-x: auto;
  font: 12px/1.5 var(--mono); white-space: pre; max-height: 75vh; border: 1px solid var(--line); }
.automation h2 { margin-bottom: .25rem; }

/* ---------- phones ---------- */
@media (max-width: 860px) {
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; transform: translateX(-100%); transition: transform .18s ease; width: 260px; }
  body.nav-open .sidebar { transform: none; box-shadow: 4px 0 30px rgba(0, 0, 0, .25); }
  body.nav-collapsed .sidebar { width: 260px; }
  body.nav-collapsed .sidebar .label, body.nav-collapsed .sidebar .brand, body.nav-collapsed .soon-tag { display: revert; }
  body.nav-collapsed .sidebar .nav-item { display: flex; }
  body.nav-collapsed .nav-group-label { justify-content: flex-start; padding: .4rem .6rem; }
  .collapse-btn { display: none; }
  .nav-scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .4); z-index: 25; }
  .menu-btn { display: inline-flex; }
  .topbar { padding: .5rem .75rem; position: static; }      /* a sticky bar with the range picker would cover the screen */
  .crumbs { flex: 1 1 0; }                                  /* shrink, so the dot and menu stay on the first row */
  .breadcrumb { flex-wrap: nowrap; white-space: nowrap; overflow: hidden; }
  .breadcrumb > * { overflow: hidden; text-overflow: ellipsis; }
  .page-title { max-width: 100%; font-size: var(--fs-md); }
  .topbar-right { flex: none; margin-left: 0; }
  .topbar .acct { display: none; }
  .topbar-range { order: 5; flex-basis: 100%; }
  .topbar-range .presets { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; padding-bottom: .15rem; }
  .site-alert { padding: .3rem .75rem; }
  .page > main { padding: .9rem .75rem 2.5rem; }
  .tiles { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .tile { padding: .7rem .8rem; }
  .tile .v { font-size: clamp(17px, 5.4vw, var(--fs-xl)); }
  .panel { padding: .85rem .85rem 1rem; }
  .panel .table-wrap { margin: 0 -.85rem; }
  .panel .table-wrap:last-child { margin-bottom: -1rem; }
  .table-wrap.scroll { max-height: 70vh; }
}
@media (max-width: 380px) { .tiles { grid-template-columns: 1fr; } }