/*
  CheapAI design system.

  Structure, spacing, radii, component behaviour and states follow the Revieme app's UI standard
  (shell, rows, inline editors, button hierarchy, tinted notices, 44 px targets). The ONLY things not carried
  over are Revieme's brand colour and its wording: the brand colour here is CheapAI moss green.

  Palette
    Brand:    moss green  #3f6212 (hover #365314) on light, #9be15d (hover #bef264) on dark
    Neutrals: the standard's cool greys and near-black surfaces
    Status:   green / amber / red hues from the standard, plus darker "-text" variants so coloured TEXT on a
              tinted background measures at least 4.5:1 (the standard's own light-mode values measure 3.4-3.9:1).
  Contrast (WCAG): white on primary 7.1, dark on dark-mode primary 12.2, primary text on surfaces >= 6.6,
                   muted text >= 4.6, status text on tints >= 5.5.
  The brand green is deliberately yellow-leaning (hue ~86) so it is ~66 degrees away from the status "success" green
  (hue ~154): a primary button is never mistaken for a "paid" or "ready" tick.
*/

:root {
  --primary: #3f6212;
  --primary-hover: #365314;
  --primary-contrast: #ffffff;

  --success: #1c8a5a;  --success-text: #146c47;  --success-bg: #e7f6ee;
  --warning: #b4750e;  --warning-text: #8a5606;  --warning-bg: #fdf1de;
  --error: #d64545;    --error-text: #b42318;     --error-bg: #fbe9e9;

  --bg: #f4f7fb;
  --surface: #ffffff;
  --surface-alt: #f5f7fa;
  --border: #dde4ec;
  --text: #172033;
  --muted: #667085;
  --faint: #5f6b7a;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --tap: 44px;
  --nav-height: 64px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --shadow: 0 8px 22px rgba(19, 49, 84, .08);
  color-scheme: light dark;
}

/* Dark tokens: used when the device prefers dark AND Light was not chosen, or whenever Dark was chosen. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary: #9be15d;
    --primary-hover: #bef264;
    --primary-contrast: #0b0f14;

    --success: #4bd693;  --success-text: #4bd693;  --success-bg: #113626;
    --warning: #e8ad4c;  --warning-text: #e8ad4c;  --warning-bg: #3a2c11;
    --error: #ef7373;    --error-text: #ef7373;    --error-bg: #3a1616;

    --bg: #0b0f14;
    --surface: #12171f;
    --surface-alt: #171d27;
    --border: #2a3140;
    --text: #eef1f5;
    --muted: #9aa7b6;
    --faint: #8a97a8;
    --shadow: 0 8px 22px rgba(0, 0, 0, .35);
  }
}
:root[data-theme="dark"] {
    --primary: #9be15d;
    --primary-hover: #bef264;
    --primary-contrast: #0b0f14;

    --success: #4bd693;  --success-text: #4bd693;  --success-bg: #113626;
    --warning: #e8ad4c;  --warning-text: #e8ad4c;  --warning-bg: #3a2c11;
    --error: #ef7373;    --error-text: #ef7373;    --error-bg: #3a1616;

    --bg: #0b0f14;
    --surface: #12171f;
    --surface-alt: #171d27;
    --border: #2a3140;
    --text: #eef1f5;
    --muted: #9aa7b6;
    --faint: #8a97a8;
    --shadow: 0 8px 22px rgba(0, 0, 0, .35);
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; }
p { margin: 0 0 10px; }
a { color: var(--primary); }
button { font-family: inherit; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 45%, transparent); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -999px; top: 8px; display: inline-flex; align-items: center; min-height: var(--tap); background: var(--surface); color: var(--text); padding: 0 16px; border-radius: var(--radius-sm); z-index: 100; font-weight: 700; }
.skip:focus { left: 8px; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.mono { font-family: ui-monospace, Menlo, monospace; font-size: 1.02rem; }
.pad { padding: 24px 0; }
.icon { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ------------------------------------------------------------------ shell */
.app-shell { display: flex; min-height: 100vh; }
.app-shell__main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--bg); }
.app-content { flex: 1; width: 100%; padding: 20px 16px calc(var(--nav-height) + 28px + var(--safe-bottom)); }
.workspace-layout { width: 100%; margin: 0; }
.workspace-layout--focused { max-width: 960px; }
.workspace-layout--standard { max-width: 1200px; }
.app-foot { margin-top: 28px; color: var(--muted); font-size: .8rem; max-width: 720px; }

/* sidebar: desktop only */
.sidebar { display: none; }
@media (min-width: 881px) {
  .sidebar { display: flex; flex-direction: column; width: 240px; flex-shrink: 0; height: 100vh; position: sticky; top: 0; border-right: 1px solid var(--border); background: var(--surface); padding: 20px 14px; overflow-y: auto; }
  .app-content { padding: 28px 48px 48px 32px; }
  .brandbar, .bottom-nav-wrap { display: none; }
}
.sidebar__brand { display: flex; align-items: center; gap: 10px; padding: 0 8px; margin-bottom: 24px; min-height: var(--tap); text-decoration: none; color: var(--text); font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em; }
.sidebar__brand small { font-size: .7rem; font-weight: 600; color: var(--muted); letter-spacing: 0; align-self: flex-end; padding-bottom: 14px; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--primary); color: var(--primary-contrast); font-weight: 800; font-size: 1rem; flex: none; }
.sidebar__nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.sidebar__link { display: flex; align-items: center; gap: 12px; min-height: var(--tap); padding: 10px 12px; border-radius: var(--radius-sm); color: var(--muted); font-size: .88rem; font-weight: 500; text-decoration: none; line-height: 1.25; }
.sidebar__link:hover { background: var(--surface-alt); color: var(--text); }
.sidebar__link--active { background: var(--surface-alt); color: var(--primary); font-weight: 700; }
.sidebar__link .badge { margin-left: auto; }
/* sub-items hang off one vertical line, each with a dot on it */
.sidebar__subnav { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 4px 20px; position: relative; }
.sidebar__subnav::before { content: ""; position: absolute; left: 4px; top: 16px; bottom: 16px; width: 2px; background: var(--border); }
.sidebar__sublink { position: relative; display: flex; align-items: center; min-height: var(--tap); padding: 6px 8px 6px 22px; border-radius: var(--radius-sm); color: var(--muted); font-size: .88rem; text-decoration: none; }
.sidebar__sublink::before { content: ""; position: absolute; left: 0; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--surface); border: 2px solid var(--border); }
.sidebar__sublink:hover, .sidebar__sublink--active { color: var(--primary); background: var(--surface-alt); }
.sidebar__sublink--active::before { background: var(--primary); border-color: var(--primary); }
.sidebar__footer { border-top: 1px solid var(--border); padding-top: 14px; margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.sidebar__help { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap); color: var(--primary); text-decoration: none; font-size: .85rem; font-weight: 700; padding: 8px 12px; border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border)); border-radius: var(--radius-sm); }
.sidebar__help:hover { background: var(--surface-alt); }
.sidebar__note { margin: 0; color: var(--muted); font-size: .75rem; line-height: 1.45; }

/* mobile brand bar + bottom navigation */
.brandbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px; background: var(--surface); border-bottom: 1px solid var(--border); min-height: 56px; }
@media (min-width: 881px) { .brandbar { display: none; } }   /* after the rule above, or it would win */
.brandbar__brand { display: flex; align-items: center; gap: 10px; min-height: var(--tap); text-decoration: none; color: var(--text); font-size: 1.1rem; font-weight: 800; letter-spacing: -.02em; }
.brandbar__brand small { color: var(--muted); font-weight: 600; font-size: .7rem; }
.bottom-nav-wrap { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding-bottom: var(--safe-bottom); background: var(--surface); border-top: 1px solid var(--border); }
.bottom-nav { display: flex; height: var(--nav-height); }
.bottom-nav__item { flex: 1; min-width: 0; border: 0; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: .72rem; color: var(--faint); cursor: pointer; text-decoration: none; padding: 0 2px; }
.bottom-nav__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bottom-nav__item.is-active { color: var(--primary); font-weight: 700; }
.bottom-nav__icon { position: relative; display: inline-flex; }
.badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--primary); color: var(--primary-contrast); font-size: .7rem; font-weight: 800; }
.bottom-nav__icon .badge { position: absolute; top: -8px; right: -12px; }
.badge[hidden] { display: none; }

/* ---------------------------------------------------------------- headers */
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
.eyebrow { margin: 0 0 5px; color: var(--primary); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.page-header h1, h1 { font-size: clamp(24px, 2.4vw, 30px); line-height: 1.18; letter-spacing: -.025em; font-weight: 800; }
.page-header .sub { margin: 8px 0 0; color: var(--muted); font-size: 14px; max-width: 640px; }
h2 { font-size: 18px; letter-spacing: -.01em; font-weight: 750; }
.section { display: grid; gap: 12px; margin-bottom: 24px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.back { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); color: var(--primary); text-decoration: none; font-weight: 600; }
.back:hover { text-decoration: underline; }
.tap { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); }

/* ---------------------------------------------------------------- buttons */
/* primary: solid brand; secondary: bordered surface with brand text; disabled: solid muted pair, never faded */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: var(--tap); padding: 10px 16px; border: 0; border-radius: 11px; background: var(--primary); color: var(--primary-contrast); font: inherit; font-size: .95rem; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; }
.btn:hover:not(:disabled) { background: var(--primary-hover); }
.btn:disabled { background: var(--surface-alt); color: var(--muted); border: 1px solid var(--border); cursor: default; }
.btn.ghost { background: var(--surface); color: var(--primary); border: 1px solid var(--border); }
.btn.ghost:hover:not(:disabled) { background: var(--surface-alt); }
.btn.danger { background: var(--error-text); color: #fff; }
.btn.danger:hover:not(:disabled) { filter: brightness(.92); background: var(--error-text); }
.btn.big { padding: 15px 24px; border-radius: 999px; font-size: 1rem; }
.btn.small { padding: 8px 14px; font-size: .88rem; }
a.btn { text-decoration: none; }
.btn .icon { width: 18px; height: 18px; }

/* ------------------------------------------------------------------ forms */
label { font-weight: 600; }
input, select, textarea { width: 100%; min-width: 0; min-height: var(--tap); padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; }
textarea { min-height: 88px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent); }
.form { display: grid; gap: 14px; max-width: 600px; }
.form label { display: grid; gap: 6px; font-size: .9rem; }
.form label.check, label.check { display: flex; align-items: center; gap: 10px; min-height: var(--tap); font-weight: 500; }
input[type=checkbox] { width: 22px; height: 22px; min-height: 0; flex: none; margin: 0; accent-color: var(--primary); }
.selrow, .row label { display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap); cursor: pointer; font-weight: 500; }
.row input[type=checkbox], table input[type=checkbox] { min-width: 0; width: 22px; }
.search { display: flex; gap: 8px; margin: 0 0 14px; }
.search input { flex: 1; }
.hint { margin: 0; color: var(--muted); font-size: .85rem; }
.error { color: var(--error-text); }
.editor { display: grid; gap: 14px; padding: 18px; margin: 8px 0 4px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); max-width: 600px; }
.editor label { display: grid; gap: 6px; font-size: .9rem; font-weight: 600; }
.editor .buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.editor[hidden] { display: none; }

/* ---------------------------------------------------------------- surfaces */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px 20px; margin-bottom: 14px; }
.panel h2 { margin-bottom: 10px; }
.summary { margin-bottom: 18px; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.row { display: flex; gap: 8px 12px; flex-wrap: wrap; align-items: center; margin: 10px 0; }
.row input, .row select { width: auto; min-width: 140px; }
.row input[type=checkbox] { min-width: 0; }

/* notices: tinted attention cards, never red unless something truly failed */
.note, .flash { padding: 12px 14px; border-radius: var(--radius-md); border: 1px solid color-mix(in srgb, var(--success) 28%, var(--border)); background: var(--success-bg); color: var(--success-text); margin: 0 0 14px; }
.note.warn { border-color: color-mix(in srgb, var(--warning) 30%, var(--border)); background: var(--warning-bg); color: var(--warning-text); }
/* Real errors (failed action, refused form, sending paused) are red; amber is only for heads-ups. */
.note.bad, .flash.err { border-color: color-mix(in srgb, var(--error) 35%, var(--border)); background: var(--error-bg); color: var(--error-text); }
.note a, .flash a { color: inherit; font-weight: 700; }
.flash { white-space: pre-wrap; }
.flag { color: var(--warning-text); font-size: .8rem; }
.flag.bad { color: var(--error-text); }

/* status pills and tags: tinted, text always carries the meaning */
.pill, .tag { display: inline-flex; align-items: center; white-space: nowrap; padding: 3px 10px; border-radius: 999px; font-size: .75rem; font-weight: 700; background: var(--surface-alt); color: var(--muted); border: 1px solid var(--border); }
.pill.paid, .pill.delivered, .pill.sent, .tag-ok { background: var(--success-bg); color: var(--success-text); border-color: transparent; }
.pill.payment_claimed, .pill.awaiting_payment, .pill.draft, .pill.pending, .pill.unconfirmed, .tag-warn { background: var(--warning-bg); color: var(--warning-text); border-color: transparent; }
.pill.failed { background: var(--error-bg); color: var(--error-text); border-color: transparent; }
.cat { color: var(--muted); font-size: .8rem; }

/* status icon + flat rows (the default row pattern) */
.status-icon { display: inline-flex; flex: none; }
.status-icon.is-present { color: var(--success); }
.status-icon.is-todo { color: var(--warning); }
.status-icon.is-missing { color: var(--error); }
.rows { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 14px; }
.rowitem { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--border); }
.rowitem:first-child { border-top: 0; }
.rowitem__label { font-weight: 750; font-size: .95rem; min-width: 0; overflow-wrap: anywhere; }
.rowitem__value { color: var(--muted); font-size: .88rem; margin-top: 2px; overflow-wrap: anywhere; }
.rowitem__side { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.pencil { display: inline-grid; place-items: center; width: var(--tap); height: var(--tap); border: 0; border-radius: 6px; color: var(--primary); background: var(--surface-alt); cursor: pointer; text-decoration: none; }
.pencil:hover { background: color-mix(in srgb, var(--primary) 12%, var(--surface-alt)); }
.rowitem__editor { grid-column: 1 / -1; }
.prow { border-top: 1px solid var(--border); }
.prow:first-child { border-top: 0; }
.prow > .rowitem { border-top: 0; }
.prow__editor { padding: 0 16px 16px; }
.prow__editor[hidden] { display: none; }
.prow__editor .editor { max-width: 720px; }
.grid2 { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

/* chips (filters) */
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 12px; }
.chips.wrap { flex-wrap: wrap; overflow: visible; }
.chip { display: inline-flex; align-items: center; white-space: nowrap; min-height: var(--tap); padding: 0 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); text-decoration: none; font-size: .9rem; font-weight: 500; }
.chip:hover { background: var(--surface-alt); }
.chip.on { background: var(--primary); color: var(--primary-contrast); border-color: var(--primary); font-weight: 700; }

/* --------------------------------------------------------------- store */
.hero { margin-bottom: 18px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.card { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid var(--border); border-radius: 15px; background: var(--surface); transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.card:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); transform: translateY(-1px); box-shadow: var(--shadow); }
.card h3 { font-size: 1rem; line-height: 1.3; }
.card h3 a { display: flex; align-items: center; min-height: var(--tap); color: var(--text); text-decoration: none; }
.card p { margin: 0; }
.card .meta { display: flex; gap: 8px; justify-content: space-between; align-items: center; }
.buy { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 12px; }
.price { font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; }
.detail { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 22px; max-width: 760px; }
.detail .meta { display: flex; justify-content: space-between; gap: 8px; align-items: center; margin-bottom: 8px; }
.facts { padding-left: 18px; }
.terms { margin: 16px 0; padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }
.terms h2 { font-size: 1rem; margin-bottom: 8px; }
.terms ul, .terms-list { margin: 8px 0 0; padding-left: 18px; }
.terms li { margin: 3px 0; }
.buy.big { justify-content: flex-start; gap: 20px; margin: 18px 0 8px; }
.lines { list-style: none; padding: 0; margin: 0 0 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.line { display: flex; justify-content: space-between; gap: 14px; padding: 14px 16px; border-top: 1px solid var(--border); }
.line:first-child { border-top: 0; }
.line > div:first-child { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.total { font-size: 1.1rem; text-align: right; margin: 8px 0 16px; }
.status { display: inline-flex; padding: 6px 14px; border-radius: 999px; background: var(--warning-bg); color: var(--warning-text); font-weight: 800; margin-bottom: 14px; }
.status[data-status=delivered] { background: var(--success-bg); color: var(--success-text); }
.status[data-status=refunded], .status[data-status=cancelled] { background: var(--surface-alt); color: var(--muted); }
.pay { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px 20px; margin: 16px 0; max-width: 640px; }
dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0 0 12px; }
dt { color: var(--muted); } dd { margin: 0; }
.delivery { white-space: pre-wrap; word-break: break-word; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; margin: 8px 0; font: inherit; }

/* ------------------------------------------------------------ admin lists */
.conv { display: block; min-height: var(--tap); padding: 14px 16px; border-top: 1px solid var(--border); color: var(--text); text-decoration: none; min-width: 0; }
.conv:first-child { border-top: 0; }
.conv:hover { background: var(--surface-alt); }
.conv .row { margin: 0; }
.preview { margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; max-width: 720px; }
.msg { max-width: 85%; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); }
.msg pre { margin: 0; white-space: pre-wrap; word-break: break-word; font: inherit; }
.msg.in { align-self: flex-start; border-bottom-left-radius: 4px; }
.msg.out { align-self: flex-end; background: color-mix(in srgb, var(--primary) 9%, var(--surface)); border-color: color-mix(in srgb, var(--primary) 22%, var(--border)); border-bottom-right-radius: 4px; }
.msg.phone { border-style: dashed; background: var(--surface); }
.msg .when { font-size: .75rem; color: var(--muted); margin-top: 4px; }
.reply { max-width: 720px; }
.outitem { padding: 14px 16px; border-top: 1px solid var(--border); display: grid; gap: 6px; }
.outitem:first-child { border-top: 0; }
.outitem__head { display: flex; gap: 8px 12px; flex-wrap: wrap; align-items: center; }

/* in-page confirmation */
dialog.ask { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--text); padding: 20px; width: min(92vw, 440px); box-shadow: 0 24px 60px rgba(0, 0, 0, .3); }
dialog.ask::backdrop { background: rgba(11, 15, 20, .55); }
dialog.ask h2 { font-size: 1.1rem; margin: 0 0 6px; }
dialog.ask p { margin: 0 0 14px; color: var(--muted); }
dialog.ask label { display: grid; gap: 6px; font-size: .9rem; font-weight: 600; margin-bottom: 14px; }
dialog.ask .row { justify-content: flex-end; margin: 0; }
dialog.ask .menu { display: grid; gap: 4px; margin: 0 0 12px; }
dialog.ask .menu a { display: flex; align-items: center; gap: 12px; min-height: var(--tap); padding: 8px 12px; border-radius: var(--radius-sm); color: var(--text); text-decoration: none; font-weight: 600; }
dialog.ask .menu a:hover { background: var(--surface-alt); }
@media (max-width: 520px) { dialog.ask .row .btn { flex: 1 1 40%; } }

/* sticky save bar: appears only after a change */
.savebar { position: sticky; bottom: calc(var(--nav-height) + var(--safe-bottom) + 8px); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; margin-top: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow); max-width: 600px; z-index: 5; }
.savebar[hidden] { display: none; }
@media (min-width: 881px) { .savebar { bottom: 16px; } }

@media (max-width: 520px) {
  .rowitem { grid-template-columns: auto minmax(0, 1fr); }
  .rowitem__side { grid-column: 2; justify-content: flex-start; }
  .line { flex-direction: column; }
  .search { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .card { transition: none; } .card:hover { transform: none; } }

/* small helpers */
@media (min-width: 881px) { .mobile-only { display: none; } }
.empty { text-align: center; padding: 36px 20px; display: grid; justify-items: center; gap: 8px; }
.empty__icon { width: 36px; height: 36px; color: var(--faint); }
.empty h2 { margin: 0; }
.empty p { margin: 0 0 8px; max-width: 420px; }
.prose p:last-child { margin-bottom: 0; }

/* sign-in: one focused card, no navigation */
.bare { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: var(--bg); }
.bare__card { width: min(100%, 420px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 24px; box-shadow: var(--shadow); }
.bare__brand { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: 18px; }
.bare__title { font-size: 1.5rem; margin-bottom: 4px; }

/* product rows: select, status icon, details, pencil */
.prow .rowitem { grid-template-columns: auto auto minmax(0, 1fr) auto; padding: 10px 14px; }
.prow .selrow { padding-right: 0; }
@media (max-width: 520px) { .prow .rowitem { grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 8px; } }
.prow .selrow, .selrow:has(input.sel) { min-width: var(--tap); justify-content: center; }

/* theme switch: one button that cycles Auto, Light, Dark */
.theme-toggle { display: inline-flex; align-items: center; gap: 12px; min-height: var(--tap); min-width: var(--tap); padding: 10px 12px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted); font: inherit; font-size: .88rem; font-weight: 500; cursor: pointer; text-align: left; }
.theme-toggle:hover { background: var(--surface-alt); color: var(--text); }
.theme-toggle .i-auto, .theme-toggle .i-light, .theme-toggle .i-dark { display: none; }
.theme-toggle[data-mode="auto"] .i-auto, .theme-toggle[data-mode="light"] .i-light, .theme-toggle[data-mode="dark"] .i-dark { display: block; }
.theme-toggle--icon { justify-content: center; padding: 0; border: 1px solid var(--border); background: var(--surface); }
.theme-toggle--icon .theme-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.sidebar__footer .theme-toggle { width: 100%; }

/* Long labels (e.g. "Full warranty, length set by the supplier") wrap inside their card instead of running past it. */
.card .meta, .detail .meta { flex-wrap: wrap; row-gap: 6px; }
.card .meta .tag, .detail .meta .tag { white-space: normal; min-width: 0; max-width: 100%; border-radius: 14px; line-height: 1.25; text-align: left; }
.card .meta .cat { flex-shrink: 0; }
/* Signed-in person (sidebar) and team page */
.sidebar__me{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;padding:8px 12px 12px}
.sidebar__me-name{font-weight:600}
.sidebar__signout{margin-left:auto;display:inline-flex;align-items:center;min-height:44px;padding:0 4px;color:var(--text-muted,inherit);text-decoration:underline}
.auditlist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.linkbox{width:100%;font-family:ui-monospace,monospace;font-size:.85rem;word-break:break-all}

.bare__theme { position: fixed; top: 12px; right: 12px; }

.prow .buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.crm .buttons { display: flex; gap: 10px; flex-wrap: wrap; }

/* Logo: the light and dark versions are both in the page; the one that suits the active theme shows. */
.logo { display: block; height: auto; max-width: 100%; }
.logo--dark { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo--light { display: none; } :root:not([data-theme="light"]) .logo--dark { display: block; } }
:root[data-theme="dark"] .logo--light { display: none; }
:root[data-theme="dark"] .logo--dark { display: block; }
.sidebar__brand .logo { width: 150px; height: 48px; margin-left: -10px; }   /* the logo files carry some empty margin; pull it back so the mark lines up with the menu */
.brandbar__brand .logo { width: 125px; height: 40px; margin-left: -8px; }
.bare__brand { margin: 0 0 14px -12px; }
.bare__brand .logo { width: 175px; height: 56px; }

.catrow { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; align-items: end; padding: 10px 0; border-top: 1px solid var(--border); }
.catrow:first-of-type { border-top: 0; }
.catrow__name { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.catrow label { display: grid; gap: 4px; font-size: .85rem; }
@media (min-width: 640px) { .catrow { grid-template-columns: minmax(0, 1fr) 120px 140px; } .catrow__name { grid-column: auto; align-self: center; } }

/* Contacts (mini CRM) */
.crmlist { display: grid; gap: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; margin: 12px 0; }
.crmrow { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 12px; align-items: center; padding: 12px 14px; min-height: 64px; border-top: 1px solid var(--border); color: var(--text); text-decoration: none; }
.crmrow:first-child { border-top: 0; }
.crmrow:hover { background: var(--surface-alt); }
.crmrow__main { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.crmrow__stats { grid-column: 2; }
.avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--primary); color: var(--primary-contrast); font-weight: 700; font-size: .85rem; }
@media (min-width: 760px) { .crmrow { grid-template-columns: 44px minmax(0, 1fr) minmax(200px, 280px); } .crmrow__stats { grid-column: auto; text-align: right; } }
.crm { display: grid; gap: 16px; }
@media (min-width: 1100px) { .crm { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } .crm__thread { position: sticky; top: 16px; } }
.crm .panel { margin-bottom: 14px; }
.crm .small { margin-top: 4px; }
.crmrow__main .pill { justify-self: start; }

.sidebar__note { margin: 2px 12px 8px; font-size: .78rem; color: var(--text-muted); }
.trow { display: grid; gap: 6px 10px; grid-template-columns: 1fr; padding: 10px 0; border-top: 1px solid var(--border); }
.trow:first-of-type { border-top: 0; }
@media (min-width: 640px) { .trow { grid-template-columns: minmax(160px, 1fr) minmax(220px, 1fr); align-items: end; } }
.trow .buttons { grid-column: 1 / -1; }
.trow label { display: grid; gap: 4px; font-size: .85rem; }
.trow input { width: 100%; min-width: 0; }
.app-foot--help { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; color: var(--text); font-size: .9rem; }
.app-foot--help .tap { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.trow .buttons { display: flex; gap: 10px; flex-wrap: wrap; }

#team-alerts h3 { margin-top: 22px; }
.detailsbox { margin: 10px 0; padding: 10px 12px; background: var(--surface-alt); border-radius: var(--radius-md); }
.detailsbox pre { white-space: pre-wrap; overflow-wrap: anywhere; margin: 6px 0; }

/* a long status pill (for example "has not ticked the WhatsApp box...") wraps instead of pushing the page sideways on a phone */
.pill.pill--wrap, .crm .pill { white-space: normal; text-align: left; max-width: 100%; }