/* ============================================================================
   Kyklos design system — ported from the <style> block in kyklos-mockup.html.
   NOT linked from any template yet. The mockup defaulted to LIGHT with a
   prefers-color-scheme dark override; here the DEFAULT is DARK (the app's
   resting theme) and light is opt-in via :root[data-theme="light"]. There is no
   prefers-color-scheme switching — the user toggles the theme explicitly.
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  /* dark theme (default) */
  --bg:#2b2b2b;--rail:#242424;--panel:#323232;--panel2:#383838;--sunk:#272727;
  --fg:#f2f2f2;--muted:#aaa59c;--line:#464646;--accent:#D9A441;--accent-fg:#231a07;
  --accent-soft:rgba(217,164,65,.15);--good:#8bca9d;--good-soft:rgba(139,202,157,.14);--bad:#eb957f;--bad-soft:rgba(235,149,127,.14);
  --shadow:0 12px 36px rgba(0,0,0,.5);--ring:#D9A441;
  box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#f2f2ef;--rail:#e9e8e4;--panel:#ffffff;--panel2:#f6f5f2;--sunk:#ecebe7;
  --fg:#242424;--muted:#6b675f;--line:#dcdad4;--accent:#9c6f14;--accent-fg:#ffffff;
  --accent-soft:#f3e6c8;--good:#2c7f45;--good-soft:#dcefe1;--bad:#b4432b;--bad-soft:#f6dfd8;
  --shadow:0 10px 34px rgba(30,25,15,.16);--ring:#9c6f14;
  color-scheme:light;
}

/* ---------- base elements ---------- */
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;height:100%;background:var(--bg);color:var(--fg);font:15px/1.45 'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
/* Links that act as UI controls shed the underline (plain content links keep
   theirs); each keeps a color/background hover instead. */
a.nav,a.btn,.ptabs a,.tabs a,.brand a,a.pill,a.mk,.rail .card.flat a{text-decoration:none}
.ptabs a:hover,.tabs a:hover,.rail .card.flat a:hover{color:var(--fg)}
:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.01em}
h1{font-size:26px;line-height:1.15}
h2{font-size:17px}
h3{font-size:15px}
p{margin:0}

/* ---------- layout helpers ---------- */
.muted{color:var(--muted)}
.small{font-size:13px}
.tiny{font-size:12px}
.good{color:var(--good)}.bad{color:var(--bad)}.gold{color:var(--accent)}
.row{display:flex;gap:10px;align-items:center}
.row.wrap{flex-wrap:wrap}
.sp{flex:1}
.stack>*+*{margin-top:12px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

/* ---------- shell ---------- */
.shell{display:grid;grid-template-columns:236px minmax(0,1fr);height:100%}
.rail{background:var(--rail);border-right:1px solid var(--line);overflow:auto;padding:18px 12px 24px;display:flex;flex-direction:column;gap:4px}
.brand{display:flex;align-items:center;gap:10px;padding:4px 8px 16px}
.brand b{font-size:19px;letter-spacing:.14em;font-weight:800}
.brand small{display:block;font-size:11px;color:var(--accent);font-style:italic;letter-spacing:.02em;margin-top:-2px}
.navgrp{font-size:12px;color:var(--muted);padding:14px 10px 4px}
.nav{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;border:0;background:none;width:100%;text-align:left;color:var(--fg)}
.nav:hover{background:var(--sunk)}
.nav.on{background:var(--panel);box-shadow:inset 3px 0 0 var(--accent);font-weight:600}
.nav .ct{margin-left:auto;font-size:12px;background:var(--accent-soft);color:var(--accent);border-radius:20px;padding:0 7px;font-weight:700}
.nav svg{width:17px;height:17px;flex:none;opacity:.8}
.main{display:flex;flex-direction:column;min-width:0;height:100%}
.top{display:flex;align-items:center;gap:12px;padding:12px 24px;border-bottom:1px solid var(--line);background:var(--bg)}
.search{flex:1;max-width:420px;display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:7px 11px}
.search input{border:0;background:none;outline:none;width:100%}
.view{flex:1;overflow:auto;padding:24px 28px 60px}
.pagehead{display:flex;align-items:flex-end;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.pagehead .sub{color:var(--muted);margin-top:4px}

/* ---------- components ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.card.flat{background:var(--panel2)}
.card h2{margin-bottom:10px}
.cardhead{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.cardhead h2{margin:0}
.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:7px 13px;cursor:pointer;font-weight:600;font-size:14px;white-space:nowrap}
.btn:hover{border-color:var(--muted)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.btn.primary:hover{filter:brightness(1.07)}
.btn.ghost{background:none;border-color:transparent}
.btn.sm{padding:4px 10px;font-size:13px}
.btn.danger{color:var(--bad)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--panel)}
.seg button{border:0;background:none;padding:6px 12px;cursor:pointer;font-weight:600;font-size:13px;color:var(--muted)}
.seg button.on{background:var(--accent-soft);color:var(--accent)}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:14px;flex-wrap:wrap}
.tabs button{border:0;background:none;padding:8px 12px;cursor:pointer;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button.on{color:var(--fg);border-color:var(--accent)}
.pill{display:inline-flex;align-items:center;gap:5px;border-radius:20px;padding:1px 9px;font-size:12px;font-weight:600;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.pill.good{background:var(--good-soft);border-color:transparent;color:var(--good)}
.pill.bad{background:var(--bad-soft);border-color:transparent;color:var(--bad)}
.pill.gold{background:var(--accent-soft);border-color:transparent;color:var(--accent)}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:left;font-size:12px;color:var(--muted);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl .num{text-align:right}
.tbl tr.click{cursor:pointer}
.tbl tr.click:hover td{background:var(--panel2)}
.scrollx{overflow-x:auto}
/* background-COLOR, not the shorthand — the shorthand would reset the select
   chevron's background-image set on the base `select` rule. */
input.f,select.f,textarea.f{background-color:var(--panel2);border:1px solid var(--line);border-radius:7px;padding:6px 9px;width:100%;outline:none}
input.f:focus,select.f:focus,textarea.f:focus{border-color:var(--accent)}
input.f.num{text-align:right}
label.fl{display:block;font-size:12px;color:var(--muted);margin-bottom:4px;font-weight:600}
.switch{position:relative;width:38px;height:22px;flex:none}
.switch input{opacity:0;width:0;height:0;position:absolute}
.switch span{position:absolute;inset:0;border-radius:20px;background:var(--line);cursor:pointer;transition:.15s}
.switch span::after{content:"";position:absolute;width:16px;height:16px;left:3px;top:3px;border-radius:50%;background:var(--panel);transition:.15s}
.switch input:checked+span{background:var(--accent)}
.switch input:checked+span::after{transform:translateX(16px)}
.kpi .v{font-size:24px;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.kpi .l{font-size:13px;color:var(--muted)}
.bar{height:8px;border-radius:5px;background:var(--sunk);overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent);border-radius:5px}
.bar.good i{background:var(--good)}
.divider{height:1px;background:var(--line);margin:12px 0}
.note{font-size:13px;color:var(--muted);border-left:3px solid var(--accent);padding:6px 10px;background:var(--accent-soft);border-radius:0 6px 6px 0}
.empty{padding:28px;text-align:center;color:var(--muted)}

/* calc tooltip */
.calc{border-bottom:1px dotted var(--accent);cursor:help;white-space:nowrap}
.calc::after{content:"\24D8";font-size:.72em;color:var(--accent);margin-left:3px;vertical-align:super}
#tip{position:fixed;z-index:200;max-width:340px;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:12px 14px;font-size:13px;display:none}
#tip .t{font-weight:700;margin-bottom:4px}
#tip .fx{background:var(--panel2);border-radius:6px;padding:6px 8px;margin:6px 0;font-weight:600}
#tip table{width:100%;border-collapse:collapse}
#tip td{padding:2px 0;vertical-align:top}
#tip td.v{text-align:right;font-weight:600;padding-left:10px;white-space:nowrap}
#tip .src{color:var(--muted);font-size:11.5px}

/* marketplace chips */
.mk{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;border-radius:6px;padding:2px 7px;border:1px solid var(--line);cursor:pointer;background:var(--panel);white-space:nowrap}
.mk::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--muted)}
.mk.live::before{background:var(--good)}
.mk.pending_takedown{border-color:var(--bad);color:var(--bad)}
.mk.pending_takedown::before{background:var(--bad)}
.mk.sold::before{background:var(--accent)}
.mk.not_listed{color:var(--muted);border-style:dashed}
.mk.ended{color:var(--muted);text-decoration:line-through}

/* provenance dots */
.prov{display:inline-block;width:8px;height:8px;border-radius:50%;margin-left:5px;vertical-align:middle}
.prov.e{border:1.5px solid var(--accent)}
.prov.m{background:var(--fg)}
.prov.x{background:var(--bad)}

/* thumbnail */
.thumb{width:40px;height:40px;border-radius:8px;background:var(--sunk);display:grid;place-items:center;font-weight:800;color:var(--muted);font-size:13px;flex:none;overflow:hidden;position:relative}
.thumb.lg{width:100%;height:auto;aspect-ratio:1;font-size:34px;border-radius:10px}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb .stripe{position:absolute;left:0;right:0;bottom:0;height:4px}
.flag{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--bad);font-weight:600}

/* toast */
#toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%) translateY(20px);background:var(--fg);color:var(--bg);border-radius:10px;padding:10px 16px;font-weight:600;font-size:14px;opacity:0;pointer-events:none;transition:.2s;z-index:300;display:flex;gap:14px;align-items:center;max-width:92vw}
#toast.on{opacity:1;transform:translateX(-50%);pointer-events:auto}
#toast button{background:none;border:0;color:var(--accent);font-weight:700;cursor:pointer}

/* popover menu */
.pop{position:fixed;z-index:150;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:6px;min-width:220px}
.pop button{display:block;width:100%;text-align:left;border:0;background:none;padding:8px 10px;border-radius:6px;cursor:pointer}
.pop button:hover{background:var(--panel2)}

/* dialog */
dialog.modal{border:1px solid var(--line);border-radius:16px;padding:0;background:var(--panel);color:var(--fg);width:min(1080px,96vw);max-height:92vh;box-shadow:var(--shadow)}
dialog.modal::backdrop{background:rgba(15,12,8,.55)}
dialog.modal.narrow{width:min(620px,96vw)}
.mhead{display:flex;align-items:center;gap:12px;padding:16px 22px;border-bottom:1px solid var(--line)}
.mbody{padding:20px 22px;overflow:auto;max-height:calc(92vh - 140px)}
.mfoot{display:flex;align-items:center;gap:10px;padding:12px 22px;border-top:1px solid var(--line);background:var(--panel2);border-radius:0 0 16px 16px}

/* wizard steps */
.steps{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.step{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--muted);padding:4px 8px;border-radius:20px;border:0;background:none;cursor:pointer}
.step .n{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;border:1.5px solid var(--line)}
.step.on{color:var(--fg)}
.step.on .n{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.step.done .n{background:var(--good-soft);border-color:var(--good);color:var(--good)}

/* ---------- phone pieces (used later) ---------- */
.ptabs{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);background:var(--panel);padding:6px 4px 12px}
.ptabs button{border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;font-weight:600;color:var(--muted);cursor:pointer;padding:4px 0}
.ptabs button.on{color:var(--accent)}
.ptabs button svg{width:22px;height:22px}
.ptabs .cap{margin-top:-22px}
.ptabs .cap span{width:54px;height:54px;border-radius:50%;background:var(--accent);color:var(--accent-fg);display:grid;place-items:center;box-shadow:var(--shadow)}
.pcard{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:10px}
.plist>*{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.plist>*:last-child{border-bottom:0}
.bigbtn{width:100%;padding:14px;border-radius:12px;font-weight:700;font-size:16px;border:0;background:var(--accent);color:var(--accent-fg);cursor:pointer}
.bigbtn.alt{background:var(--panel);border:1px solid var(--line);color:var(--fg)}
.sheet{position:absolute;left:0;right:0;bottom:0;background:var(--panel);border-radius:22px 22px 0 0;box-shadow:var(--shadow);padding:10px 16px 24px;z-index:20;transform:translateY(110%);transition:transform .22s}
.sheet.on{transform:none}
.sheet .grab{width:40px;height:4px;border-radius:3px;background:var(--line);margin:0 auto 12px}
.scrim{position:absolute;inset:0;background:rgba(0,0,0,.4);z-index:19;display:none}
.scrim.on{display:block}

/* ============================================================================
   New components (not in the mockup) — same visual language, built on the
   tokens above.
   ========================================================================== */

/* ---------- native controls, themed globally ----------
   Bare inputs/selects/textarea adopt the .f field look without needing a class.
   checkbox/radio/file are excluded (styled separately below). */
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]),
select,
textarea{
  background-color:var(--panel2);border:1px solid var(--line);border-radius:7px;
  padding:6px 9px;width:100%;outline:none;color:inherit;font:inherit;
}
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):focus,
select:focus,
textarea:focus{border-color:var(--accent)}
::placeholder{color:var(--muted);opacity:1}

/* number: no spin buttons anywhere, right-aligned text */
input[type=number]{text-align:right;-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* date: accent-tinted calendar icon, pointer cursor. The filter approximates
   the gold accent (the native glyph can't take a CSS variable directly). */
input[type=date]{cursor:pointer}
input[type=date]::-webkit-calendar-picker-indicator{
  cursor:pointer;
  filter:invert(72%) sepia(49%) saturate(621%) hue-rotate(2deg) brightness(91%) contrast(88%);
}

/* select: no native chrome, accent chevron (inline SVG), room on the right */
select{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  padding-right:30px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23D9A441' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;background-position:right 10px center;background-size:14px;
}
/* light theme uses the darker gold for the chevron too */
:root[data-theme="light"] select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239c6f14' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}

/* checkbox / radio: brand accent */
input[type=checkbox],input[type=radio]{accent-color:var(--accent);width:auto;cursor:pointer}

/* ---------- .money-field: "$" inside the left edge of a money input ---------- */
.money-field{position:relative;display:block}
.money-field::before{content:"$";position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;font-weight:600}
.money-field input{padding-left:20px;text-align:right}

/* ---------- .file-picker: hidden-but-focusable file input + .btn label ----------
   Markup order must be <input type=file><label> so the focus ring can show on
   the label when the (visually hidden) input is keyboard-focused. */
.file-picker{display:inline-flex;align-items:center;gap:10px}
.file-picker input[type=file]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.file-picker label{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:7px 13px;cursor:pointer;font-weight:600;font-size:14px;white-space:nowrap}
.file-picker label:hover{border-color:var(--muted)}
.file-picker input[type=file]:focus-visible+label{outline:2px solid var(--ring);outline-offset:2px}
.file-picker .count{color:var(--muted);font-size:13px}

/* ---------- editable fields ----------
   .edit reads as plain text until hover/focus reveals the field border;
   .dirty marks an unsaved change; its sibling .edit-actions appears only then. */
.edit{display:block;width:100%;border:1px solid transparent;background-color:transparent;border-radius:7px;padding:6px 9px;font:inherit;color:inherit;outline:none}
.edit:hover{border-color:var(--line)}
.edit:focus{border-color:var(--accent)}
.edit.dirty{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.edit-actions{display:none;gap:6px;align-items:center;margin-top:6px}
.edit.dirty~.edit-actions,.edit-actions.on{display:inline-flex}
.edit-actions button{border:1px solid var(--line);background:var(--panel);border-radius:7px;padding:4px 9px;font-size:13px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.edit-actions .save{color:var(--good)}
.edit-actions .save:hover{border-color:var(--good)}
.edit-actions .cancel{color:var(--bad)}
.edit-actions .cancel:hover{border-color:var(--bad)}
.saved-tick{display:inline-flex;align-items:center;gap:4px;color:var(--good);font-weight:700;font-size:13px;animation:saved-fade 1.6s ease forwards}
.saved-tick::before{content:"\2713"}
@keyframes saved-fade{0%{opacity:0;transform:translateY(2px)}15%{opacity:1;transform:none}70%{opacity:1}100%{opacity:0}}

/* ---------- .flash-stack: server-rendered toasts, stacked bottom-center ---------- */
.flash-stack{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:300;max-width:92vw;align-items:stretch;pointer-events:none}
.flash-stack .flash{display:flex;gap:14px;align-items:center;background:var(--panel);color:var(--fg);border:1px solid var(--line);border-left:4px solid var(--muted);border-radius:10px;padding:10px 16px;font-weight:600;font-size:14px;box-shadow:var(--shadow);pointer-events:auto;animation:flash-in .2s ease}
.flash-stack .flash.success{border-left-color:var(--good)}
.flash-stack .flash.error{border-left-color:var(--bad)}
.flash-stack .flash.undo{border-left-color:var(--accent)}
.flash-stack .flash button{background:none;border:0;color:var(--accent);font-weight:700;cursor:pointer;margin-left:auto}
@keyframes flash-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- responsive (ported) + reduced motion ---------- */
@media (max-width:1100px){.grid3{grid-template-columns:1fr 1fr}}
@media (max-width:860px){.grid2,.grid3{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ============================================================================
   App shell (new; wires the ported pieces into app.html — not in the mockup).
   The desktop .rail and the phone .ptabs bar are mutually exclusive, swapped at
   760px. Everything here is specific to the app chrome.
   ========================================================================== */

/* theme toggle: show the moon in dark, the sun in light */
#themebtn .icon-sun{display:none}
:root[data-theme="light"] #themebtn .icon-moon{display:none}
:root[data-theme="light"] #themebtn .icon-sun{display:inline}

/* brand wordmark in the rail */
.rail .brand small{margin-top:-2px}

/* rail footer card (signed-in user + log out) pinned to the bottom */
.rail .card.flat{padding:10px 12px}
.rail .card.flat a{display:inline-block;margin-top:4px}
/* a button that reads as a text link (the POST log-out control) */
.linklike{background:none;border:0;padding:0;margin-top:4px;cursor:pointer;font:inherit;text-decoration:none}
.linklike:hover{text-decoration:underline}

/* generic nowrap cell utility (the inventory table's lived in style.css) */
.nowrap{white-space:nowrap}

/* dimmed table rows (e.g. an undone activity group) */
.tbl tr.dim td{opacity:.55}

/* the bottom tab bar is phone-only; the rail is desktop-only */
.ptabs{display:none}
.ptabs a{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;font-weight:600;color:var(--muted);text-decoration:none;padding:4px 0}
.ptabs a.on{color:var(--accent)}
.ptabs a svg{width:22px;height:22px}

@media (max-width:760px){
  .shell{grid-template-columns:1fr}
  .rail{display:none}
  .top{padding:10px 16px}
  .view{padding:16px 16px calc(84px + env(safe-area-inset-bottom,0px))}
  .ptabs{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:40;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
}

/* ============================================================================
   Inventory page. The index page keeps the JS hook classes/attributes it had
   under style.css (data-*, .editable, .row-menu/.open, .chip-pop/.open-up/
   .align-right, [hidden] toggles, #bulk-form); this section re-houses the
   show/hide MECHANICS and the look in the design-system language so the page
   works with ONLY kyklos.css loaded.
   ========================================================================== */
.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}

/* tabs rendered as links */
.tabs a{padding:8px 12px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a.active{color:var(--fg);border-color:var(--accent)}

/* takedown banner inside a card */
.takedown-list{list-style:none;margin:8px 0 0;padding:0}
.takedown-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0}

/* bulk toolbar: a card.flat row, shown only when rows are selected. Base rule
   sets NO display so the UA [hidden] rule hides it; :not([hidden]) reveals it. */
.bulk-toolbar{margin-bottom:12px}
.bulk-toolbar:not([hidden]){display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bulk-count{color:var(--accent);font-weight:700}
.bulk-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bulk-price{display:inline-flex;align-items:center;gap:6px}
.bulk-price-input{width:7rem}

/* table */
.check-col{width:30px;text-align:center}
.actions-col{width:1%;text-align:right;white-space:nowrap}
.listed-cell{white-space:normal}
.item-title{font-weight:600;color:var(--fg)}
.item-title:hover{color:var(--accent)}
.listing-chips{display:inline-flex;flex-wrap:wrap;gap:4px;align-items:center}

/* The row menu and chip popovers overflow the table; .scrollx (overflow-x:auto)
   would clip them vertically too. The table is hidden below 760px (mobile cards
   shown) so no horizontal scroll is needed there — above 760px drop the scroll
   container entirely so nothing clips. The wrapping card must not clip either. */
.inv-table-card{overflow:visible}
@media (min-width:761px){
  .inv-scroll{overflow:visible}
}

/* row-menu popover (⋮): kept classes; .pop look; shown via .open */
.row-menu{position:relative;display:inline-block}
.row-menu-btn{background:none;border:1px solid transparent;border-radius:8px;color:var(--muted);font-size:18px;line-height:1;padding:2px 8px;cursor:pointer}
.row-menu-btn:hover{color:var(--fg);border-color:var(--line)}
.row-menu-list{display:none;position:absolute;right:0;top:calc(100% + 4px);z-index:150;min-width:220px;max-width:80vw;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:6px;text-align:left}
.row-menu.open .row-menu-list{display:block}
.row-menu-item{display:block;width:100%;text-align:left;background:none;border:0;border-radius:6px;padding:8px 10px;font:inherit;color:var(--fg);cursor:pointer}
.row-menu-item:hover{background:var(--panel2)}
.row-menu-item.danger{color:var(--bad)}
.row-price-form,.row-sold-form{padding:6px 8px}
.row-price-form:not([hidden]),.row-sold-form:not([hidden]){display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.row-price-form input,.row-sold-form input,.row-sold-form select{width:auto}

/* per-marketplace chip popover: kept classes; shown via [hidden] + positioned
   by the JS-toggled .align-right/.open-up */
.chip-pop{position:relative;display:inline-block}
.chip-pop-panel{position:absolute;z-index:150;top:calc(100% + 4px);left:0;min-width:12rem;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:8px;text-align:left}
.chip-pop-panel.align-right{left:auto;right:0}
.chip-pop-panel.open-up{top:auto;bottom:calc(100% + 4px)}
.chip-pop-panel form{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0}
.chip-pop-panel input[type=text]{width:auto;flex:1;min-width:9rem}
.chip-pop-panel a{display:inline-block;margin-bottom:4px}
.chip-pop-status{font-size:12px;color:var(--muted)}
/* the "not yet listed" chip doubles as the add affordance */
.mk.none{color:var(--muted);border-style:dashed}
.mk.none::before{background:var(--muted)}

/* inline-editable money cells: plain text until hover/focus (the .edit look is
   on the input); the editor shows via the [hidden] toggle */
.editable .cell-value{cursor:pointer;border-bottom:1px dashed transparent}
.editable .cell-value:hover{border-bottom-color:var(--line)}
.cell-edit:not([hidden]){display:inline-flex;gap:6px;align-items:center}
.cell-input{width:7rem;text-align:right}

/* ---- settings page: tab bar scrolls (not wraps) on narrow screens ---- */
@media (max-width:760px){
  .settings-tabs{flex-wrap:nowrap;overflow-x:auto}
  .settings-tabs button{white-space:nowrap}
}

/* ---- signed-out (auth) pages ---- */
.auth-wrap{min-height:100dvh;display:grid;place-items:center;padding:24px}
.auth-card{width:min(400px,100%)}
.auth-brand{justify-content:center;padding:4px 0 18px}
.btn-google{width:100%;justify-content:center;background:var(--panel);border:1px solid var(--line)}
.btn-google:hover{border-color:var(--muted)}

/* ---- item detail page ---- */
.edit-field{display:block}
.edit-field .fl{margin-bottom:4px}
.photo-gallery{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.photo-thumb{position:relative;width:120px;height:120px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.photo-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.photo-thumb form{position:absolute;top:4px;right:4px;margin:0}
.photo-del{background:rgba(0,0,0,.6);color:#fff;border:0;border-radius:6px;width:26px;height:26px;line-height:1;cursor:pointer}
.photo-del:hover{background:var(--bad)}
.photo-upload{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* desktop table vs mobile cards swap */
.item-cards{display:none}
@media (max-width:760px){
  .item-table{display:none}
  .item-cards{display:block}
  .item-card-body{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0}
  .item-card-body dt{color:var(--muted)}
  .item-card-body dd{margin:0}
}

/* ============================================================================
   Purchase intake — ported from the mockup (modal/dialog, steps, seg, calc
   tooltip, prov dots, kpi, bar, flag were ported earlier; these are the
   remaining components). All use the theme tokens, so both themes work.
   ========================================================================== */
.srcgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.srctile{border:1.5px dashed var(--line);border-radius:12px;padding:18px 14px;text-align:left;cursor:pointer;background:var(--panel2);display:flex;flex-direction:column;gap:6px;position:relative}
.srctile:hover{border-color:var(--accent)}
.srctile b{font-size:15px}
.srctile input{position:absolute;inset:0;opacity:0;cursor:pointer}

.check{display:flex;gap:10px;align-items:flex-start;padding:7px 0}
.check i{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:800}
.check i.ok{background:var(--good-soft);color:var(--good)}
.check i.warn{background:var(--accent-soft);color:var(--accent)}
.check i.no{background:var(--bad-soft);color:var(--bad)}

.progress{height:6px;border-radius:4px;background:var(--sunk);overflow:hidden}
.progress i{display:block;height:100%;width:0;background:var(--accent);transition:width .3s}
/* indeterminate "reading…" bar (animation disabled under reduced-motion) */
.progress.indeterminate i{width:40%;animation:kyk-indeterminate 1.1s ease-in-out infinite}
@keyframes kyk-indeterminate{0%{margin-left:-40%}100%{margin-left:100%}}

.lines td{padding:6px 6px}
.lines input.f{padding:4px 6px}
.lines tr.dim td{opacity:.55}
/* a field whose value is missing/truncated: red border + placeholder */
.lines input.missing{border-color:var(--bad)}

.traycard{border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--panel);display:flex;flex-direction:column;gap:8px}

.step:disabled{opacity:.45;cursor:not-allowed}

/* phone: the intake modal goes full-screen, step bar collapses (JS swaps text) */
@media (max-width:760px){
  .srcgrid{grid-template-columns:1fr 1fr}
  dialog.modal{width:100vw;height:100dvh;max-width:100vw;max-height:100dvh;border-radius:0;border:0}
  dialog.modal .mbody{max-height:calc(100dvh - 120px)}
}

/* ---------- Assistant (Ask Kyklos): slide-in panel + full page chat ---------- */
#asst-backdrop{position:fixed;inset:0;background:rgba(15,12,8,.45);z-index:110}
.asst-panel{position:fixed;top:0;right:0;bottom:0;width:min(460px,100vw);z-index:120;
  background:var(--panel);border-left:1px solid var(--line);box-shadow:var(--shadow);
  display:flex;flex-direction:column;transform:translateX(100%);transition:transform .22s}
.asst-panel.open{transform:none}
.asst-head{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line)}
.asst-chat{display:flex;flex-direction:column;min-height:0;flex:1}
.asst-msgs{flex:1;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.asst-bubble{max-width:85%;padding:9px 13px;border-radius:14px;font-size:14px;
  white-space:pre-wrap;word-break:break-word;line-height:1.4}
.asst-bubble.user{align-self:flex-end;background:var(--accent-soft);color:var(--fg);border-bottom-right-radius:4px}
.asst-bubble.assistant{align-self:flex-start;background:var(--panel2);border:1px solid var(--line);border-bottom-left-radius:4px}
.asst-chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 14px 8px}
.asst-chip{border:1px solid var(--line);background:var(--panel);border-radius:18px;
  padding:6px 12px;font-size:13px;font-weight:600;cursor:pointer;color:var(--fg)}
.asst-chip:hover{border-color:var(--muted)}
.asst-typing{align-self:flex-start;display:inline-flex;gap:4px;padding:10px 13px}
.asst-typing i{width:7px;height:7px;border-radius:50%;background:var(--muted);display:inline-block;animation:asst-blink 1.2s infinite}
.asst-typing i:nth-child(2){animation-delay:.2s}
.asst-typing i:nth-child(3){animation-delay:.4s}
@keyframes asst-blink{0%,60%,100%{opacity:.25}30%{opacity:1}}
.asst-card{border:1px solid var(--line);background:var(--panel);border-radius:12px;padding:12px 14px;align-self:stretch;font-size:14px}
.asst-card h4{margin:0 0 6px;font-size:14px}
.asst-card .asst-line{color:var(--fg);font-size:13px;padding:1px 0}
.asst-card .asst-side{margin-top:6px}
.asst-card .asst-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.asst-card.done{border-color:var(--good);background:var(--good-soft)}
.asst-card.failed,.asst-card.expired,.asst-card.cancelled{opacity:.8}
.asst-form{border-top:1px solid var(--line);padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.asst-form textarea{width:100%;resize:none;min-height:44px;max-height:160px;background:var(--sunk);
  border:1px solid var(--line);border-radius:10px;padding:9px 11px;color:var(--fg);font:inherit;font-size:14px}
.asst-form .asst-row{display:flex;align-items:center;gap:10px}
.asst-count{font-size:12px;color:var(--muted)}
/* Full page: list on the left, chat on the right */
.asst-page{display:grid;grid-template-columns:260px minmax(0,1fr);gap:16px;height:calc(100dvh - 120px)}
.asst-page .asst-list{overflow:auto;display:flex;flex-direction:column;gap:6px}
.asst-page .asst-list a{display:block;padding:9px 11px;border:1px solid var(--line);border-radius:10px;
  background:var(--panel);text-decoration:none;color:var(--fg)}
.asst-page .asst-list a.on{border-color:var(--accent);background:var(--accent-soft)}
.asst-page .asst-chat{border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:hidden}
@media (max-width:760px){.asst-page{grid-template-columns:1fr;height:auto}.asst-page .asst-list{display:none}}