/* RELIEF Studio. Layout: a top bar, one working column up to 1100px, cards only where an object needs edges.
   Instrument palette: graphite and paper, one signal red borrowed from the rig's printed shell. */
:root {
  --bg: #f5f6f7; --panel: #ffffff; --ink: #16191d; --ink2: #4a515c; --muted: #7d8591; --rule: #dde1e6;
  --accent: #b4302b; --accent-ink: #8f221e; --ok: #1f7a4a; --warn: #9a6a00; --bad: #b4302b; --focus: #2a78d6;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #121417; --panel: #1b1e23; --ink: #eceef1; --ink2: #b9bfc8; --muted: #828a96; --rule: #2c3138;
  --accent: #e0574f; --accent-ink: #f08a84; --ok: #48b07a; --warn: #e0b64a; --bad: #e0574f; --focus: #6aa8ef; color-scheme: dark } }
:root[data-theme="dark"] {
  --bg: #121417; --panel: #1b1e23; --ink: #eceef1; --ink2: #b9bfc8; --muted: #828a96; --rule: #2c3138;
  --accent: #e0574f; --accent-ink: #f08a84; --ok: #48b07a; --warn: #e0b64a; --bad: #e0574f; --focus: #6aa8ef; color-scheme: dark }

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 var(--sans); }
a { color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); font-size: 13px; }

.bar { display: flex; align-items: center; gap: 24px; padding: 10px 20px; flex-wrap: wrap; position: sticky; top: 0; z-index: 2;
       background: color-mix(in srgb, var(--panel) 86%, transparent); backdrop-filter: saturate(1.4) blur(10px);
       -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--rule); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: .08em; color: var(--ink);
         text-decoration: none; }
.brand .sub { font-weight: 400; letter-spacing: 0; color: var(--muted); }
.mark { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--accent);
        box-shadow: inset 0 0 0 3px var(--panel), inset 0 0 0 6px var(--accent); }
nav { display: flex; gap: 4px; }
nav a { padding: 6px 12px; border-radius: 7px; color: var(--ink2); text-decoration: none; transition: background .15s, color .15s; }
nav a:hover { background: var(--soft); color: var(--ink); }
nav a[aria-current="page"] { background: var(--soft); color: var(--ink); font-weight: 500;
                             box-shadow: inset 0 -2px 0 var(--accent); border-radius: 7px 7px 4px 4px; }
.right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
select, input, button { font: inherit; }
select, input, textarea { background: var(--panel); color: var(--ink); border: 1px solid var(--rule); border-radius: 8px; padding: 7px 10px;
                          transition: border-color .15s, box-shadow .15s; }
select:hover, input:hover, textarea:hover { border-color: color-mix(in srgb, var(--muted) 60%, var(--rule)); }
select:focus, input:focus, textarea:focus { outline: none; border-color: var(--focus);
                                            box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 22%, transparent); }
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); }
button { background: var(--ink); color: var(--panel); border: 1px solid var(--ink); border-radius: 8px; padding: 7px 14px; cursor: pointer;
         font-weight: 500; transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .05s; }
button:hover:not(:disabled) { background: color-mix(in srgb, var(--ink) 84%, var(--panel)); }
button:active:not(:disabled) { transform: translateY(1px); }
button.ghost { background: var(--panel); color: var(--ink); border: 1px solid var(--rule); }
button.ghost:hover:not(:disabled) { background: var(--soft); border-color: color-mix(in srgb, var(--muted) 50%, var(--rule)); }
button:disabled { opacity: .45; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { button, nav a, select, input, textarea { transition: none; } }

main { max-width: 1100px; margin: 0 auto; padding: 28px 20px 60px; }
h1 { font-size: 28px; font-weight: 600; letter-spacing: -.012em; line-height: 1.2; margin: 0 0 6px; text-wrap: balance; }
h2 { font-size: 17px; font-weight: 600; margin: 28px 0 10px; }
.lede { color: var(--ink2); margin: 0 0 22px; max-width: 68ch; }
.panel { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-sm); }
.empty { text-align: center; padding: 56px 20px; color: var(--ink2); }
.empty::before { content: ""; display: block; width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%;
                 border: 2px dashed color-mix(in srgb, var(--muted) 55%, transparent);
                 background: radial-gradient(circle at 35% 30%, var(--panel), var(--soft)); }
.empty strong { display: block; color: var(--ink); font-size: 17px; margin-bottom: 6px; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--rule); }
th { font-weight: 500; color: var(--muted); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; }
tbody tr:last-child > td { border-bottom: 0; }
.panel > table, .panel.table-wrap > table { margin: -6px 0; }
/* a list of objects: the whole row opens the object (the name's link stretches over its row) */
table.list tbody tr { position: relative; transition: background .12s; }
table.list tbody tr:hover { background: var(--soft); }
table.list td:first-child a { color: var(--ink); font-weight: 500; text-decoration: none; }
table.list td:first-child a::after { content: ""; position: absolute; inset: 0; }
table.list tbody tr:hover td:first-child a { color: var(--accent-ink); }
table.list td.go { width: 1%; color: var(--muted); text-align: right; }
.who { display: flex; align-items: center; gap: 10px; }
.avatar { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600;
          background: var(--chip); color: var(--ink2); }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
.row label { display: grid; gap: 4px; font-size: 13px; color: var(--ink2); }
.pill { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 10px; border: 1px solid var(--rule); color: var(--ink2); }
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 2px 10px 2px 8px; border-radius: 999px;
          background: var(--chip); color: var(--ink2); white-space: nowrap; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.status.on { background: color-mix(in srgb, var(--ok) 14%, var(--panel)); color: var(--ok); }
.status.on::before { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent); }
.pill.owner { border-color: var(--accent); color: var(--accent-ink); }
.notice { border: 1px solid var(--rule); border-left: 3px solid var(--warn); padding: 10px 14px; background: var(--panel); margin: 12px 0;
          border-radius: 0 8px 8px 0; }
.error { border-left-color: var(--bad); }
.signin { display: grid; place-items: center; min-height: 60vh; gap: 16px; }
.foot { text-align: center; color: var(--muted); font-size: 12px; padding: 20px; }
@media (max-width: 640px) { .bar { gap: 10px; } nav { order: 3; width: 100%; } }
/* five pages on a phone: the row wraps rather than pushing the page sideways (audit 2026-10-25 walk, Organisation added) */
@media (max-width: 480px) { nav { flex-wrap: wrap; row-gap: 2px; } nav a { padding: 6px 9px; } }

/* M2: scanners, coins, capture */
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--muted); opacity: .5; margin-right: 6px; vertical-align: 1px; }
.dot.on { background: var(--ok); opacity: 1; }
.faces { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.face h3 { margin: 0 0 10px; font-size: 16px; }
.rail { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 10px; }
.rail li { font-size: 12px; padding: 3px 8px; border-radius: 10px; border: 1px solid var(--rule); color: var(--muted); }
.rail li.done { color: var(--ok); border-color: var(--ok); }
.rail li.now { color: var(--ink); border-color: var(--ink); font-weight: 500; }
.facts { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 8px 0; }
.facts div { min-width: 0; }
.facts dt { font-size: 12px; color: var(--muted); }
.facts dd { margin: 0; font-variant-numeric: tabular-nums; }
.fcimg img { width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--rule); margin: 6px 0; }
.small { font-size: 13px; color: var(--ink2); }

/* M3: AI readings (views/readings.js) */
.readings { margin-top: 16px; }
.readings h2 { margin-top: 0; }
.reading { border-top: 1px solid var(--rule); padding: 12px 0; }
.reading h4 { font-size: 13px; font-weight: 600; margin: 10px 0 4px; color: var(--ink2); }
.reading details { margin: 8px 0; }
.rlist { margin: 0; padding-left: 18px; }
.rlist li { margin: 2px 0; }
.pill.ai { border-color: var(--warn); color: var(--warn); }
.pill.status-accepted { border-color: var(--ok); color: var(--ok); }
.pill.status-rejected { border-color: var(--bad); color: var(--bad); }
.pill.conf-high { border-color: var(--ok); }
.pill.conf-low { border-style: dashed; }

/* the view takes focus after navigation (screen readers); no ring around the whole page */
#view:focus { outline: none; }

/* ---------------------------------------------------------------- the coin journey (STUDIO-COIN-JOURNEY.md)
   One stage (the coin), one rail of five steps, one label card. Only the next action is a filled button. */
:root { --stage: #0f1114; --stage-ink: #d7dbe0; --chip: #eef0f3; --soft: #f0f2f5; --radius: 12px;
        --shadow: 0 1px 2px rgba(16,19,23,.06), 0 4px 16px rgba(16,19,23,.06); --shadow-sm: 0 1px 2px rgba(16,19,23,.04); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --chip: #262a31; --soft: #20242a; --shadow: none; --shadow-sm: none; } }
:root[data-theme="dark"] { --chip: #262a31; --soft: #20242a; --shadow: none; --shadow-sm: none; }

/* disclosures: one chevron that turns, in place of the browser's triangle */
details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: ""; flex: none; width: 7px; height: 7px; border: solid var(--muted); border-width: 0 1.6px 1.6px 0;
                            transform: rotate(-45deg); transition: transform .15s; margin: 0 3px 0 1px; }
details[open] > summary::before { transform: rotate(45deg); }
details > summary:hover { color: var(--ink); }

button.link { background: none; border: 0; padding: 2px 0; color: var(--ink2); text-decoration: underline; text-underline-offset: 3px;
              text-decoration-color: var(--muted); }
button.link:hover:not(:disabled) { color: var(--ink); background: none; }
button.link:disabled { text-decoration: none; }
button.big { padding: 11px 20px; font-size: 16px; font-weight: 500; border-radius: 10px; }
small { display: block; color: var(--muted); font-size: 12px; }
.table-wrap { overflow-x: auto; }
.coins-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.coins-head .lede { margin-bottom: 18px; }
details.more { margin-top: 18px; }
details.more > summary, .facts-form > summary { cursor: pointer; color: var(--ink2); font-weight: 500; }
details.more[open] > summary { margin-bottom: 12px; }
.grid-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px 14px; margin-top: 12px; }
.grid-form label { display: grid; gap: 4px; font-size: 13px; color: var(--ink2); align-content: start; }
.grid-form .form-acts { grid-column: 1 / -1; display: flex; gap: 12px; align-items: center; }

.journey .j-head { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 18px; }
.journey .j-head h1 { margin: 0; overflow-wrap: anywhere; }
.journey .back { color: var(--muted); text-decoration: none; font-size: 13.5px; }
.journey .back:hover { color: var(--ink); }
.j-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, 1fr); gap: 22px; align-items: start; }
@media (max-width: 860px) { .j-grid { grid-template-columns: minmax(0, 1fr); } }

.stage-wrap { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.stage { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: var(--radius); overflow: hidden; color: var(--stage-ink);
         background: radial-gradient(120% 90% at 50% 35%, #23272e 0%, var(--stage) 70%); display: grid; place-items: center;
         border: 1px solid var(--rule); box-shadow: var(--shadow); }
.stage > * { grid-area: 1 / 1; }
.stage-pic { margin: 0; width: 100%; height: 100%; }
.stage-pic img { width: 100%; height: 100%; object-fit: contain; padding: 4%; }   /* the whole coin, never cropped */
.stage-cap { font-size: 13px; color: var(--ink2); text-align: center; margin: 8px 0 0; max-width: 60ch; text-wrap: balance; }
.stage-cap:empty { display: none; }
/* the lab's viewer on the stage: its viewport fills the square; its hint line and facts bar give way to the stage's own
   caption (the gear inside the viewport keeps every expert control, as the owner approved in the lab) */
.stage .v3d-host.stage-3d { width: 100%; height: 100%; background: transparent; overflow: auto; }
.stage .v3d-host.stage-3d > .stack { height: 100%; display: flex; flex-direction: column; gap: 0; }
.stage .v3d-host .viewport.fill { flex: 1 1 auto; height: auto; min-height: 0; border: 0; border-radius: 0; }
.stage .v3d-host > .stack > .hint, .stage .v3d-host > .stack > .row.tight { display: none; }
.stage .v3d-host > .stack > .grid2 { flex: 0 0 auto; padding: 10px; background: var(--panel); color: var(--ink); }
.stage-note { align-self: end; font-size: 13px; color: #b9c0c9; margin: 0 0 12px; z-index: 1; }
.stage-empty { text-align: center; padding: 24px; max-width: 34ch; font-size: 14px; line-height: 1.6; color: #aab1bb; text-wrap: balance; }
.stage-empty .disc { display: block; width: 46%; aspect-ratio: 1; margin: 0 auto 18px; border-radius: 50%;
                     border: 2px dashed #3a4049; background: radial-gradient(circle at 35% 30%, #2a2f37, #16191d); }
.seg { display: inline-flex; gap: 2px; padding: 3px; margin-top: 10px; background: var(--soft); border: 1px solid var(--rule); border-radius: 10px; }
.seg:empty { display: none; }
.seg button { background: transparent; color: var(--ink2); border: 0; padding: 5px 16px; border-radius: 7px; font-size: 13px; font-weight: 400; }
.seg button:hover:not(.on) { background: transparent; color: var(--ink); }
.seg button.on { background: var(--panel); color: var(--ink); box-shadow: var(--shadow); font-weight: 500; }
.stage-acts { margin-top: 6px; }


.flip { background: var(--panel); border: 1px solid var(--accent); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 12px;
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent); }
#steps { padding: 6px; background: var(--panel); border: 1px solid var(--rule); border-radius: calc(var(--radius) + 4px); box-shadow: var(--shadow-sm); }
.rail-head { display: flex; align-items: center; gap: 12px; padding: 8px 14px 6px; font-size: 13px; color: var(--ink2); }
.rail-head strong { font-weight: 600; color: var(--ink); }
.rail-head .meter { flex: 1; height: 4px; border-radius: 2px; background: var(--chip); overflow: hidden; }
.rail-head .meter i { display: block; height: 100%; background: var(--ok); border-radius: 2px; transition: width .4s ease; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
#steps .flip { margin: 6px 6px 8px; }
.step { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 12px 14px;
        border: 1px solid transparent; border-radius: var(--radius); }
.step:not(:last-child)::after { content: ""; position: absolute; left: 28px; top: 44px; bottom: -11px; width: 2px; border-radius: 1px;
                                background: var(--rule); }
.step.done:not(:last-child)::after { background: color-mix(in srgb, var(--ok) 55%, var(--rule)); }
.step.next, .step.active, .step.failed { background: var(--panel); margin: 3px 0; z-index: 1; }
.step.done .detail { color: var(--muted); font-size: 13.5px; }
.step .num { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 600;
             border: 1.5px solid var(--rule); color: var(--muted); }
.step .head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.step .tag { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.step .detail { margin: 2px 0 0; color: var(--ink2); font-size: 14px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.step .acts { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.step .why { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.step .detail.small { font-size: 13px; color: var(--muted); }
.step .note { display: grid; gap: 4px; margin-top: 10px; color: var(--ink2); }
.step .note textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; padding: 6px 8px; border: 1px solid var(--rule);
  border-radius: 6px; background: var(--bg); color: var(--ink); resize: vertical; }
.keep-frames { display: flex; gap: 8px; align-items: baseline; margin: 12px 0 4px; color: var(--ink2); }
.keep-frames input { margin: 0; flex: none; }
.step.blocked { opacity: .62; }
.step .num { position: relative; z-index: 1; background: var(--panel); }
.step.done .num { background: var(--ok); border-color: var(--ok); color: #fff; }
.step.next { border-color: var(--ink); box-shadow: var(--shadow), 0 0 0 3px color-mix(in srgb, var(--ink) 6%, transparent); }
.step.next .num { background: var(--ink); border-color: var(--ink); color: var(--panel); }
.step.active { border-color: var(--focus); }
.step.active .num { border-color: var(--focus); color: var(--focus); animation: pulse 1.6s ease-in-out infinite; }
.step.active { background: color-mix(in srgb, var(--focus) 5%, var(--panel)); }
.step.failed { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 5%, var(--panel)); }
.step.failed .num, .step.failed .tag { border-color: var(--bad); color: var(--bad); }
.bar-track { height: 4px; background: var(--soft); border-radius: 2px; margin-top: 8px; overflow: hidden; }
.bar-track i { display: block; height: 100%; background: var(--focus); border-radius: 2px; transition: width .4s ease; }
@keyframes pulse { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--focus) 18%, transparent); } }
@media (prefers-reduced-motion: reduce) { .step.active .num { animation: none; } .bar-track i { transition: none; } }
.scanner-pick { margin-top: 10px; }
#j-error .notice { margin-top: 0; }

.label-card { margin-top: 22px; }
.label-card .eyebrow { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.label-card { padding: 22px 24px; }
.label-card h2 { margin: 4px 0 6px; font-size: 24px; letter-spacing: -.01em; text-wrap: balance; overflow-wrap: anywhere; }
.parts { list-style: none; padding: 0; margin: 14px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.parts li { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; border-radius: 10px;
            background: var(--soft); border: 1px solid color-mix(in srgb, var(--rule) 60%, transparent); min-width: 0; }
.parts .k { color: var(--muted); font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; }
.parts .v { font-size: 17px; font-weight: 500; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; margin-bottom: 6px; }
.parts .chip { margin-top: auto; max-width: 100%; white-space: normal; }
.chip { display: inline-block; font-size: 11.5px; padding: 2px 8px; border-radius: 999px; background: var(--chip); color: var(--ink2); white-space: nowrap;
        border: 1px solid transparent; }
.chip.src-owner { background: color-mix(in srgb, var(--ok) 16%, var(--chip)); }
.chip.src-measured, .chip.src-measured_provisional, .chip.src-measured_plane, .chip.src-measured_image, .chip.src-solid { background: color-mix(in srgb, var(--focus) 16%, var(--chip)); }
.chip.src-standard, .chip.src-parsed { border: 1px dashed var(--muted); background: var(--panel); }
.chip.src-accepted { background: color-mix(in srgb, var(--warn) 20%, var(--chip)); }
@media (max-width: 560px) { .parts { grid-template-columns: minmax(0, 1fr); gap: 6px; }
                            .parts li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; padding: 10px 12px; }
                            .parts .k { grid-column: 1 / -1; } .parts .v { font-size: 15px; margin: 0; } .parts .chip { margin: 0; }
                            .label-card { padding: 18px; } }
.suggest { border: 1px dashed var(--warn); border-radius: 10px; padding: 10px 12px; margin: 10px 0; }
.suggest p { margin: 0 0 4px; }
.suggest .acts { display: flex; gap: 10px; margin-top: 8px; }
.noai { font-size: 13px; color: var(--ink2); background: transparent; border: 1px dashed var(--rule); border-radius: 8px; padding: 8px 12px; margin: 10px 0; }
.facts-form { margin-top: 12px; }

.report-dlg { width: min(1000px, 96vw); height: min(90vh, 1100px); padding: 0; border: 1px solid var(--rule); border-radius: var(--radius);
              background: var(--panel); color: var(--ink); }
.report-dlg[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.report-dlg::backdrop { background: rgba(10, 12, 15, .55); }
.report-dlg .dlg-head { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--rule); }
.report-dlg .dlg-head button { margin-left: auto; }
.report-dlg #report-body { min-height: 0; }
.report-dlg iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }


/* deleting a coin (soft, restorable): a quiet way in from Details, an inline confirmation, a note on a deleted coin */
table.list td button { position: relative; z-index: 1; }               /* above the row's stretched link */
.trash-link { margin: 10px 2px 0; }
.trash-link a { color: var(--muted); }
.trash-link a:hover { color: var(--ink); }
button.danger { background: var(--bad); border-color: var(--bad); color: #fff; }
button.danger:hover:not(:disabled) { background: color-mix(in srgb, var(--bad) 85%, #000); }
button.ghost.danger { background: var(--panel); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, var(--rule)); }
button.ghost.danger:hover:not(:disabled) { background: color-mix(in srgb, var(--bad) 8%, var(--panel)); }
.danger-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 18px 0 6px; padding-top: 14px; border-top: 1px solid var(--rule); }
.danger-row.confirm { padding: 12px 14px; border: 1px solid var(--bad); border-radius: 10px;
                      background: color-mix(in srgb, var(--bad) 6%, var(--panel)); }
.danger-row .acts { display: flex; gap: 12px; align-items: center; }
.deleted-note { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: 0 0 18px;
                padding: 12px 16px; border: 1px solid var(--bad); border-left-width: 4px; border-radius: 10px;
                background: color-mix(in srgb, var(--bad) 6%, var(--panel)); }
.deleted-note div { max-width: 70ch; }
.journey.is-deleted .steps .acts, .journey.is-deleted .steps .why { display: none; }      /* a deleted coin is read only */
.journey.is-deleted .stage { filter: grayscale(.4) brightness(.85); }

/* the coins list: a picture of each coin, where it stands, search, filter and sort */
.list-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 12px; }
.list-tools .search { flex: 1 1 240px; }
.list-tools .search input { width: 100%; padding-left: 32px;
  background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%237d8591' stroke-width='2'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m11 11 3.5 3.5'/%3E%3C/svg%3E") no-repeat 10px 50%; }
.list-tools .seg { margin: 0; }
.list-tools .seg .n { font-size: 11px; color: var(--muted); margin-left: 2px; }
table.coins td { vertical-align: middle; }
.coin-cell { display: flex; align-items: center; gap: 12px; min-width: 0; }
.coin-cell .thumb { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
                    background: radial-gradient(circle at 50% 40%, #23272e, var(--stage)); }
.coin-cell .thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }      /* the whole coin, never cropped */
.coin-cell .thumb .disc { width: 62%; aspect-ratio: 1; border-radius: 50%; border: 1.5px dashed #4a515c; }
.coin-text { display: grid; min-width: 0; }
.coin-text small { margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.coins td.when { color: var(--muted); font-size: 13px; white-space: nowrap; }
.stage-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 2px 10px 2px 8px; border-radius: 999px;
             background: var(--chip); color: var(--ink2); white-space: nowrap; }
.stage-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .7; }
.stage-tag.st-new { color: var(--muted); }
.stage-tag.st-half { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, var(--panel)); }
.stage-tag.st-scanning { color: var(--focus); background: color-mix(in srgb, var(--focus) 12%, var(--panel)); }
.stage-tag.st-scanning::before { animation: blink 1.2s ease-in-out infinite; }
.stage-tag.st-measured { color: var(--ink2); }
.stage-tag.st-accepted { color: var(--ok); background: color-mix(in srgb, var(--ok) 13%, var(--panel)); }
@keyframes blink { 50% { opacity: .2; } }
.panel .none { margin: 14px 4px 4px; }
@media (max-width: 640px) { table.coins th:nth-child(3), table.coins td.when { display: none; }
                            .list-tools .seg { overflow-x: auto; max-width: 100%; } }

/* the coins list, owner decision 9: readable relief pictures cropped to the coin's own outline (each picture scaled by its
   outline's own fit, at most 1.1 of the whole coin plus its 6 % margin, never into the coin), larger on hover or tap; the
   standard title, the type's name, the
   subline metal · diameter · weight · grade · status */
.thumbs { display: flex; gap: 4px; flex: none; }
/* NEXT-FIXES item 17 (owner 2026-10-27, "we never fixed the thumbnail sizes"): 96 px for one face, 2 x 80 px for both,
   72 px on a phone; the rows sized to match; served from a 192 px picture (cloud/worker/jobs/assets.py THUMB_PX) */
.coin-cell .thumb { width: 96px; height: 96px; padding: 0; border: 0; position: relative; z-index: 1; cursor: zoom-in; }
.coin-cell .thumb.none { cursor: default; }
.coin-cell .thumb img { transform-origin: 50% 50%; }
.thumbs.both .thumb { width: 80px; height: 80px; }
table.coins td:has(.coin-cell) { padding-top: 8px; padding-bottom: 8px; }
@media (max-width: 640px) { .coin-cell .thumb, .thumbs.both .thumb { width: 72px; height: 72px; }
                            .coin-cell { gap: 10px; } }
.coin-cell .thumb .zoom { display: none; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 30;
  width: min(300px, 78vw); aspect-ratio: 1; border-radius: 50%; overflow: hidden; pointer-events: none;
  background: radial-gradient(circle at 50% 40%, #23272e, var(--stage)); box-shadow: 0 12px 40px rgba(0, 0, 0, .35); }
.coin-cell .thumb .zoom img { width: 100%; height: 100%; object-fit: contain; display: block; }
.coin-cell .thumb.open .zoom { display: block; }
@media (hover: hover) { .coin-cell .thumb:not(.none):hover .zoom { display: block; } }
.coin-text .title-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; min-width: 0; }
.coin-text .type-name { font-size: 13.5px; color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coin-text .subline { color: var(--ink2); }
.coin-text .nick { font-size: 12px; }
.coin-text .g-exp { border-bottom: 1px dotted var(--muted); cursor: help; }
.chip.id-proposed { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, var(--panel)); }
.chip.id-proposed.id-low { border: 1px solid var(--warn); font-weight: 600; }
.chip.id-unverified { border: 1px dashed var(--muted); background: var(--panel); color: var(--muted); }
.chip.id-confirmed { color: var(--ok); background: color-mix(in srgb, var(--ok) 13%, var(--panel)); }
.chip.id-reviewed { color: var(--ok); background: var(--panel); border: 1px solid color-mix(in srgb, var(--ok) 55%, var(--rule)); }
/* the one status model (statusview.js): the document's standing apart from the record's, and the next action */
.coin-text .row-state { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; white-space: normal; color: var(--ink2); }
.rep-chip { display: inline-block; font-size: 11.5px; padding: 0 8px; border-radius: 999px; background: var(--chip); color: var(--ink2); white-space: nowrap; }
.rep-chip.tone-ok, .rep-chip.safe { color: var(--ok); background: color-mix(in srgb, var(--ok) 13%, var(--panel)); }
.rep-chip.tone-attention { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, var(--panel)); }
.rep-chip.tone-bad { color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, var(--panel)); }
.row-next { color: var(--muted); }
.coin-text .g-exp.g-low { color: var(--warn); }
.stage-tag.st-accepted_exceptions, .stage-tag.st-reviewed { color: var(--ok); background: color-mix(in srgb, var(--ok) 13%, var(--panel)); }
.stage-tag.st-accepted_scan, .stage-tag.st-waiting { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, var(--panel)); }
.list-facets { margin-top: -4px; }
.list-facets .facet { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink2); }
.list-facets .facet select, .list-facets .facet input[type="number"] { padding: 5px 8px; font-size: 13px; max-width: 160px; }
.list-facets .facet input[type="number"] { width: 84px; }
.list-facets .facet.check input { width: auto; }
@media (max-width: 640px) { table.coins th.stage-col, table.coins td.stage-col { display: none; }
  .coin-text small.subline, .coin-text .type-name { white-space: normal; }
  .list-facets .facet { flex: 1 1 40%; } .list-facets .facet select { max-width: none; width: 100%; } }

/* a person's upright (owner decision 9): drag the picture round, or the 90 degree and fine buttons; 12 o'clock is marked */
.upright-card .up-sides { display: grid; gap: 18px; }
.up-side { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.up-dial { position: relative; flex: none; width: min(220px, 70vw); aspect-ratio: 1; border-radius: 50%; overflow: hidden; cursor: grab;
  touch-action: none; user-select: none; -webkit-user-select: none; background: radial-gradient(circle at 50% 40%, #23272e, var(--stage));
  box-shadow: inset 0 0 0 1px var(--rule); }
.up-dial.dragging { cursor: grabbing; }
/* guide lines (owner 2026-10-28): a vertical and a horizontal line through the dial's centre, so a date line or a bust's
   axis can be lined up; they stay still while the picture turns under them */
.up-dial .up-guide { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.up-dial .up-guide::before, .up-dial .up-guide::after { content: ""; position: absolute; background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25); }
.up-dial .up-guide::before { left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-0.5px); }
.up-dial .up-guide::after { top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-0.5px); }
.up-dial .up-pic { position: absolute; inset: 0; display: grid; place-items: center; color: var(--stage-ink); }
.up-dial .up-pic img { width: 100%; height: 100%; object-fit: contain; display: block; transform: scale(1.1); pointer-events: none; }
.up-dial .up-top { position: absolute; left: 50%; top: 4px; width: 0; height: 0; transform: translateX(-50%);
  border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 10px solid var(--accent); }
.up-body { flex: 1 1 220px; min-width: 0; }
.up-body .up-name { margin: 0 0 2px; }
.up-steps { flex-wrap: wrap; gap: 6px; }
.up-steps button { padding: 4px 9px; font-size: 13px; font-variant-numeric: tabular-nums; min-width: 52px; }
.up-steps button[data-up-step="1"] { margin-right: 10px; }   /* a gap between the counter-clockwise and clockwise groups */
.up-range { display: flex; align-items: center; gap: 8px; margin: 6px 0 8px; max-width: 320px; }
.up-range input[type="range"] { flex: 1; min-width: 0; accent-color: var(--accent, currentColor); }
.up-line { margin: 8px 0; }

/* getting started: three things, ticked as they happen */
.firstrun { margin: 0 0 16px; }
.firstrun .fr-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.firstrun .fr-head button { margin-left: auto; }
.firstrun ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.firstrun li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--soft); }
.firstrun li > span:last-child { display: grid; }
.firstrun .tick { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--rule); display: grid; place-items: center;
                  font-size: 12px; color: #fff; background: var(--panel); }
.firstrun li.ok .tick { background: var(--ok); border-color: var(--ok); }
.firstrun li.ok strong { color: var(--muted); text-decoration: line-through; font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .stage-tag.st-scanning::before { animation: none; } }

/* the top bar's live status and the notices it raises */
.live { display: inline-flex; align-items: center; gap: 8px; max-width: 320px; padding: 5px 12px 5px 10px; border-radius: 999px;
        border: 1px solid var(--rule); background: var(--panel); color: var(--ink2); font-size: 13px; text-decoration: none; white-space: nowrap; }
.live:hover { border-color: color-mix(in srgb, var(--muted) 50%, var(--rule)); color: var(--ink); }
.live .ltext { overflow: hidden; text-overflow: ellipsis; }
.live .lsub { color: var(--muted); }
.live .ldot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.live.on .ldot { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); }
.live.back .ldot { background: transparent; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ok) 55%, var(--muted)); }   /* reconnecting: a hollow dot */
.live.busy { border-color: color-mix(in srgb, var(--focus) 45%, var(--rule)); color: var(--ink); }
.live.busy .ldot { background: var(--focus); animation: pulse 1.6s ease-in-out infinite; }
@media (max-width: 640px) { .live .lsub { display: none; } .live { max-width: 46vw; } }
/* the release pill (views/release.js): a button in the live pill's clothes, beside it, with its '?' */
.upd-wrap { display: inline-flex; align-items: center; gap: 4px; }
button.live.upd { font: inherit; font-size: 13px; cursor: pointer; border-color: color-mix(in srgb, var(--warn) 55%, var(--rule)); color: var(--ink); }
button.live.upd:hover { background: color-mix(in srgb, var(--warn) 10%, var(--panel)); }
.live.upd .ldot { background: var(--warn); }
#toasts { position: fixed; right: 16px; bottom: 16px; z-index: 20; display: grid; gap: 8px; max-width: min(380px, calc(100vw - 32px)); }
.toast { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--ink); color: var(--panel);
         box-shadow: 0 8px 28px rgba(10,12,15,.28); font-size: 14px; animation: toast-in .25s ease-out; transition: opacity .5s, transform .5s; }
.toast .tdot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.toast a { color: var(--panel); font-weight: 600; margin-left: auto; }
.toast button.link { color: var(--panel); opacity: .6; font-size: 18px; line-height: 1; text-decoration: none; }
.toast button.link:hover:not(:disabled) { color: var(--panel); opacity: 1; }
.toast.out { opacity: 0; transform: translateY(6px); }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; transition: none; } .live.busy .ldot { animation: none; } }

/* the next step's button, pinned to the bottom on a phone */
.dock { display: none; }
@media (max-width: 860px) {
  .dock:not([hidden]) { display: flex; align-items: center; gap: 12px; justify-content: space-between; position: fixed; left: 0; right: 0; bottom: 0;
          z-index: 5; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--rule);
          background: color-mix(in srgb, var(--panel) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .dock span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dock button { flex: none; padding: 10px 18px; }
  .journey:has(.dock:not([hidden])) { padding-bottom: 64px; }
}

/* sign-in: what RELIEF is, beside the form */
.signin { min-height: calc(100vh - 160px); }
.signin-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 0; width: min(960px, 100%); background: var(--panel);
               border: 1px solid var(--rule); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); }
.signin-intro { padding: 40px; color: var(--stage-ink); background: radial-gradient(120% 120% at 20% 10%, #262b33 0%, var(--stage) 70%); }
.signin-intro h1 { color: #fff; font-size: 30px; margin: 18px 0 10px; }
.signin-intro p { color: #b9c0c9; max-width: 42ch; margin: 0 0 20px; }
.signin-intro ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; color: #d7dbe0; font-size: 14px; }
.signin-intro li { display: flex; gap: 10px; align-items: baseline; }
.signin-intro li::before { content: "✓"; color: #48b07a; font-weight: 600; }
.big-mark { display: block; width: 40px; height: 40px; border-width: 3px; box-shadow: inset 0 0 0 6px var(--stage), inset 0 0 0 12px var(--accent); }
.signin-form { padding: 32px; display: grid; align-content: center; justify-items: center; }
.signin-form h2 { margin: 0 0 4px; justify-self: start; }
.signin-form .small { justify-self: start; }
.signin-form form { justify-self: stretch; }
@media (max-width: 760px) { .signin-card { grid-template-columns: minmax(0, 1fr); } .signin-intro { padding: 28px 24px; }
                            .signin-intro ul { display: none; } .signin-form { padding: 20px 12px; } }

/* a page's outline while it loads */
.skel { display: grid; gap: 12px; }
.skel i { display: block; border-radius: 6px; background: linear-gradient(90deg, var(--chip) 0%, var(--soft) 50%, var(--chip) 100%);
          background-size: 200% 100%; animation: shimmer 1.3s linear infinite; }
.sk-line { height: 12px; } .sk-line.big { height: 26px; } .w15 { width: 15%; } .w20 { width: 20%; } .w30 { width: 30%; }
.w40 { width: 40%; } .w50 { width: 50%; }
.sk-panel { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); padding: 12px 18px; display: grid; min-height: 120px; }
.sk-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.sk-row:last-child { border-bottom: 0; }
.sk-row .w15 { margin-left: auto; }
.skel .sk-dot { width: 40px; height: 40px; border-radius: 50%; flex: none; }
.sk-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, 1fr); gap: 22px; margin-top: 8px; }
.skel .sk-block { height: 110px; border-radius: var(--radius); } .skel .sk-block.sq { height: auto; aspect-ratio: 1; }
.sk-stack { display: grid; gap: 10px; align-content: start; }
@media (max-width: 860px) { .sk-grid { grid-template-columns: minmax(0, 1fr); } }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skel i { animation: none; } }
nav[hidden] { display: none; }                         /* nav's own display would otherwise show it before sign-in */
@media (max-width: 480px) { .live .ltext { display: none; } .live { padding: 8px; } .live.upd .lact { padding-left: 2px; } }   /* the release pill keeps Reload */
@media (max-width: 640px) {
  .list-tools .seg { flex-wrap: nowrap; } .list-tools .seg button { white-space: nowrap; padding: 5px 12px; }
  .list-tools .sort { margin-left: auto; }
  .coins-head > button.big { width: 100%; }
  table.coins thead { display: none; }
  table.coins tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-bottom: 1px solid var(--rule); }
  table.coins tbody tr:last-child { border-bottom: 0; }
  table.coins td { border: 0; padding: 8px 6px; }
  table.coins td:nth-child(2) { grid-column: 1; padding: 0 6px 10px 62px; }
  table.coins td.go { grid-column: 2; grid-row: 1 / span 2; }
}

/* ---- audit 2026-10-25 (docs/audit/2026-10-25-studio-audit/BACKLOG.md): the 3D stage's states and tools (V1-V4), the
   coin's measurements (M1-M6) and raw evidence (R1), the coins list's status (S3), the organisation page and the
   not-found page (N1, N2) */
.stage-state { display: grid; justify-items: center; gap: 10px; max-width: 42ch; z-index: 1; }   /* over a viewer still loading */
.stage-state p { margin: 0; }
.stage-state strong { color: #e6e9ed; font-weight: 600; }
.stage-state.tone-bad strong { color: #f3aca7; }
.stage-state.tone-warn strong { color: #ecd28a; }
.stage-state .acts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; align-items: center; }
.stage-state .acts button.ghost { background: transparent; color: #e6e9ed; border-color: #4a515c; }
.stage-state .acts button.ghost:hover:not(:disabled) { background: #262a31; }
.stage-state .acts a.link { color: #d7dbe0; }
.stage-state .disc { width: 28%; margin: 0 auto 4px; }
.spin { width: 28px; height: 28px; border-radius: 50%; border: 3px solid #4a515c; border-top-color: #d7dbe0; animation: stage-spin 1s linear infinite; }
@keyframes stage-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }
.stage-tools { width: 100%; }
.stage-tools:empty { display: none; }
.v3d-tools { margin-top: 8px; display: grid; gap: 6px; }
.v3d-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; }
.v3d-bar button { padding: 4px 12px; font-size: 13px; }
.v3d-bar button[aria-pressed="true"] { background: var(--ink); color: var(--panel); border-color: var(--ink); }
.v3d-gain { color: var(--ink2); }
.v3d-guide { border: 1px solid var(--rule); border-radius: 10px; padding: 6px 12px; background: var(--panel); }
.v3d-guide > summary { color: var(--ink2); font-weight: 500; }
.v3d-guide ul { margin: 6px 0 2px; padding-left: 18px; display: grid; gap: 3px; }
.card-head h2 { margin: 0 0 2px; font-size: 17px; }
.card-head p { margin: 0 0 12px; max-width: 72ch; }
.meas-card, .evidence-card { margin-top: 18px; }
table.meas td { vertical-align: top; }
table.meas td.num { white-space: nowrap; font-variant-numeric: tabular-nums; }
table.meas tr.primary td:first-child, table.meas tr.primary td.num { font-weight: 600; }
table.meas small.m-basis { display: block; color: var(--muted); margin-top: 3px; }
/* a phone: each measurement is a block (quantity and value, what it is, its statistic and source), not four squeezed
   columns (the audit walk's 390 px page was 7,600 px tall) */
@media (max-width: 640px) {
  table.meas thead { display: none; }
  table.meas, table.meas tbody, table.meas tr, table.meas td { display: block; }
  table.meas tr { padding: 10px 0; border-bottom: 1px solid var(--rule); }
  table.meas tbody tr:last-child { border-bottom: 0; }
  table.meas td { padding: 2px 0; border: 0; }
  table.meas td:first-child { float: left; margin-right: 10px; }
  table.meas td.num { white-space: normal; }
  table.meas td:nth-child(3) { clear: left; padding-top: 4px; }
}
.kind { display: inline-block; font-size: 11.5px; padding: 1px 8px; border-radius: 6px; border: 1px solid var(--rule); color: var(--ink2); white-space: nowrap; }
.kind.k-physical { border-color: color-mix(in srgb, var(--ok) 55%, var(--rule)); color: var(--ok); }
.kind.k-image { border-color: color-mix(in srgb, var(--focus) 55%, var(--rule)); color: var(--focus); }
.kind.k-calculation, .kind.k-check { border-style: dashed; }
.kind.k-assumption, .kind.k-reference { border-color: color-mix(in srgb, var(--warn) 55%, var(--rule)); color: var(--warn); }
.chip.m-primary { background: color-mix(in srgb, var(--ink) 10%, var(--chip)); color: var(--ink); }
.chip.m-prov { background: color-mix(in srgb, var(--warn) 18%, var(--chip)); }
.chip.m-passed { background: color-mix(in srgb, var(--ok) 18%, var(--chip)); }
.chip.m-failed { background: color-mix(in srgb, var(--bad) 18%, var(--chip)); }
.chip.m-not_evaluated { background: var(--panel); border: 1px dashed var(--muted); }
.notice.m-disc { margin: 10px 0 0; font-size: 13.5px; }
.ev-policy { margin: 0 0 4px; }
table.ev td.num { font-variant-numeric: tabular-nums; }
.evidence-card .acts { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 10px 0 0; }
.evidence-card .danger-row.confirm ul { margin: 6px 0 8px; padding-left: 18px; }
.ev-why { margin-top: 10px; }
.ev-why ul { margin: 6px 0; padding-left: 18px; }
.stage-hints { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; }
.stage-tag.st-measuring { color: var(--focus); background: color-mix(in srgb, var(--focus) 12%, var(--panel)); }
.stage-tag.st-measuring::before { animation: blink 1.2s ease-in-out infinite; }
.stage-tag.st-working { color: var(--ink2); background: var(--soft); }
.stage-tag.st-failed { color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, var(--panel)); }
.stage-tag.st-ready { color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 10%, var(--panel)); }
.stage-tag.st-attention, .stage-tag.st-changes, .stage-tag.st-changed { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, var(--panel)); }
@media (prefers-reduced-motion: reduce) { .stage-tag.st-measuring::before { animation: none; } }
.org-card { margin-bottom: 14px; }
.org-card h2 { margin: 0 0 8px; font-size: 17px; }
.org-card p { margin: 0 0 6px; }
/* Processing profiles (cloud/speedprofiles.py): three options, the current one marked, those outside the plan dimmed */
.speed-opts { display: grid; gap: 8px; margin: 4px 0 8px; }
.speed-opt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 10px; cursor: pointer; }
.speed-opt input { margin-top: 3px; }
.speed-opt .speed-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.speed-opt.is-current { border-color: var(--accent, var(--ink)); }
.speed-opt.is-locked { opacity: 0.6; cursor: default; }
.org-facts { gap: 10px 32px; margin: 0; }
.org-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.org-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.muted-card { background: var(--soft); box-shadow: none; }
.notfound p { margin: 6px 0 0; }

/* where a coin stands: four separate dimensions, never one count (coin.js dimsHtml) */
.dims { list-style: none; margin: 0; padding: 10px 14px 6px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; }
.dim { display: flex; flex-direction: column; gap: 1px; padding-left: 10px; border-left: 3px solid var(--chip); min-width: 0; }
.dim-k { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.dim-v { font-size: 13px; color: var(--ink); overflow-wrap: anywhere; }
.dim-ok { border-left-color: var(--ok); }
.dim-attention { border-left-color: var(--warn); }
.dim-bad { border-left-color: var(--bad); }
.dim-working { border-left-color: var(--focus); }
.step.info .tag { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, var(--panel)); }
/* the measurements summary a dealer acts on; the full table under Methodology */
.ms-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 18px; margin: 4px 0 10px; }
.ms-cell dt { font-size: 12px; color: var(--muted); }
.ms-cell dd { margin: 2px 0 0; display: flex; flex-direction: column; gap: 2px; }
.ms-cell dd strong { font-size: 17px; font-weight: 600; }
.ms-cell dd small { color: var(--ink2); font-size: 12px; line-height: 1.35; }
.ms-limits { margin: 0 0 8px; padding: 8px 12px 8px 26px; border-radius: 8px; background: color-mix(in srgb, var(--warn) 9%, var(--panel)); font-size: 13px; }
.ms-limits li + li { margin-top: 3px; }
.ms-next { font-size: 13px; margin: 0 0 8px; }
.methodology > summary { cursor: pointer; font-size: 13px; color: var(--accent-ink); padding: 4px 0; }
@media (max-width: 640px) { .ms-grid { grid-template-columns: 1fr; } .dims { grid-template-columns: 1fr; } }

/* the report page (views/report.js): the draft's slots, the lint beside each, the release check */
.rp-group { border: 1px solid var(--rule); border-radius: var(--radius); padding: 12px 14px; margin: 0 0 14px; }
.rp-group legend { font-weight: 600; padding: 0 6px; }
.rp-slot { display: grid; gap: 4px; margin: 10px 0; }
.rp-slot textarea, .rp-slot input { width: 100%; max-width: 68ch; box-sizing: border-box; font: inherit; }
.rp-slot input[type="number"] { max-width: 12ch; }
.rp-lint { color: var(--bad); margin: 0; }
.rp-lint:empty { display: none; }
.rp-acts { flex-wrap: wrap; gap: 8px; }
#rp a.button { display: inline-block; padding: 8px 14px; border-radius: var(--radius); background: var(--ink); color: var(--panel); text-decoration: none; }
#rp details table { width: 100%; }

/* the display turn (cloud/display.py): a coin in a holder lies upside down to its label; its pictures are turned on
   screen by 180 degrees, a rotation and never a mirror, and never a measurement */
.turn180 img, img.turn180 { transform: rotate(180deg); }

/* do less, say more (LAB-TO-CLOUD.md 4.4, 4.1): the timeline, the open items, the type to confirm, the display turn */
.timeline-card { margin-top: 18px; }
.tl-table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.tl-table th, .tl-table td { text-align: left; vertical-align: top; padding: 4px 10px 4px 0; border-top: 1px solid var(--rule);
                             font-weight: 400; overflow-wrap: anywhere; }
.tl-table td.mono { white-space: nowrap; }
/* owner decision 4: the four categories with their share, the people line, the Numista line */
.tl-sub { font-size: 13px; margin: 10px 0 0; }
.tl-stack { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--chip); margin: 6px 0 4px; }
.tl-seg { display: block; height: 100%; }
.tl-legend { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 0; }
.tl-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: baseline; }
.tl-processing { background: var(--ok); }
.tl-queue { background: var(--muted); }
.tl-waiting_for_person { background: var(--warn); }
.tl-manual_review { background: var(--focus); }
.tl-waits { margin: 4px 0 8px; padding-left: 18px; }
.tl-people { margin: 6px 0 0; }
/* one confirm (owner decision 10): what stays proposed, not confirmed until the reviewer's identity tick */
.pnc { display: inline-block; font-size: 11.5px; padding: 0 6px; border-radius: 9px; border: 1px dashed var(--warn); color: var(--warn);
  white-space: nowrap; }
.lc-pnc-line { margin: 2px 0 6px; }
.lc-one { margin-top: 12px; border-top: 1px solid var(--rule); padding-top: 10px; }
.lc-one summary { cursor: pointer; }
.lc-one ul, .rv-oc ul { margin: 4px 0 6px; padding-left: 18px; }
.lc-one li q, .rv-oc li q { overflow-wrap: anywhere; }
.rv-oc { margin: 6px 0 0 30px; }
.rv-oc .pnc.ok { border-style: solid; border-color: var(--ok); color: var(--ok); }
/* the holder's label entered after the blind grade (owner decision 2) */
.lc-hl { margin-top: 10px; }
.lc-hl summary { cursor: pointer; color: var(--ink2); }
.hl-form { margin-top: 6px; }
.hl-form .hl-seen { display: flex; gap: 6px; align-items: flex-start; grid-column: 1 / -1; }
.hl-form .hl-seen input { width: auto; }
/* the review's upright correction (owner decision 9) */
.rv-upfix { margin-top: 10px; }
.rv-upfix .upright-card { padding: 0; border: 0; background: none; box-shadow: none; }
.lc-open { margin-top: 12px; }
.lc-open h3, .lc-cat h3 { font-size: 13px; margin: 0 0 4px; }
.lc-open ul { margin: 4px 0 8px; padding-left: 18px; }
.lc-open li { margin-bottom: 6px; }
.lc-prop { margin-top: 2px; }
.lc-prop q { font-style: normal; }
.lc-prop-lint { display: block; color: var(--warn); }
.lc-type-acts { margin-top: 8px; }
.lc-type-pick ul { margin: 6px 0; padding-left: 18px; }
.turn-toggle { display: inline-flex; gap: 6px; align-items: baseline; flex-wrap: wrap; margin-left: 12px; }
@media (max-width: 640px) { .turn-toggle { margin-left: 0; display: flex; } }

/* the health page's Numista counter against the Free plan (owner decision 8) */
.nu-meter { height: 8px; border-radius: 4px; background: var(--chip); overflow: hidden; margin: 4px 0 10px; max-width: 420px; }
.nu-meter span { display: block; height: 100%; background: var(--ok); }
#numista-line.warn { color: var(--warn); }
#numista-line.warn + .nu-meter span { background: var(--warn); }
/* a long path or id in a notice (the health page's disk problem) wraps instead of widening a phone page */
.notice { overflow-wrap: anywhere; }
.lc-ai-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.lc-ai-head h3 { margin-bottom: 0; }

/* the coin page's status summary (statusview.js summaryOf): the headline, the next action, one line per facet */
.cs { padding: 10px 14px 8px; }
.cs .dims { padding: 8px 0 4px; }
.cs-headline { margin: 0; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.cs-next { margin: 4px 0 0; color: var(--ink2); }
.cs-held { margin: 6px 0 0; padding: 6px 10px; border-radius: 8px; background: color-mix(in srgb, var(--warn) 9%, var(--panel)); }
.cs-group ul { margin: 2px 0 4px; padding-left: 18px; }
.cs-more { margin-top: 4px; color: var(--ink2); }
.cs-more summary { cursor: pointer; color: var(--muted); }
.dim-low .dim-v { color: var(--warn); }
.dim-none { border-left-color: var(--chip); }
/* internals under one disclosure (statusview.js, saymore.js techOf) */
details.tech { margin-top: 4px; color: var(--muted); }
details.tech summary { cursor: pointer; }
details.tech dl { margin: 4px 0 0; display: grid; gap: 2px; }
details.tech dl div { display: flex; gap: 8px; flex-wrap: wrap; }
details.tech dt { color: var(--muted); }
details.tech dd { margin: 0; overflow-wrap: anywhere; }
.chip.oi-partly { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, var(--panel)); }
.chip.oi-answered { color: var(--ok); background: color-mix(in srgb, var(--ok) 13%, var(--panel)); }
.lc-prop-unresolved { display: block; color: var(--warn); }
.tl-notes { margin: 6px 0 0; color: var(--ink2); }
/* the report page's standing (report.js standingHtml) */
.rp-standing .rp-buyer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 8px; }
.rp-standing .rp-facts ul { margin: 0; padding-left: 18px; }
.g-low { color: var(--warn); }
.cs-parts > summary { cursor: pointer; color: var(--muted); margin-top: 6px; }
@media (min-width: 700px) { .cs-parts > summary { display: none; } }

/* the scanners page: what a scanner is doing now and whether it has room for another side (NEXT-FIXES items 10, 13) */
.scn-line { display: block; margin-top: 3px; max-width: 46ch; }
.scn-line.warn { color: var(--warn); }

/* List on eBay (views/listing.js): the coin page's card and the draft page */
.listing-card { margin-top: 22px; }
.listing-card .why, .lst-exits .why { display: inline-block; max-width: 60ch; }
.lst-form .panel { margin-top: 18px; }
.lst-title { font-size: 18px; font-weight: 600; margin: 4px 0 8px; overflow-wrap: anywhere; }
.lst-desc { white-space: pre-wrap; font: 14px/1.5 var(--sans); background: var(--bg); border: 1px solid var(--rule);
            border-radius: 8px; padding: 12px; margin: 0 0 12px; overflow-wrap: anywhere; }
.lst-form textarea { width: 100%; }
.lst-check { color: var(--bad); margin: 6px 0 10px; padding-left: 18px; }
.lst-rows { width: 100%; border-collapse: collapse; }
.lst-rows th, .lst-rows td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.lst-pics { display: flex; gap: 16px; flex-wrap: wrap; }
.lst-pics figure { margin: 0; }
.lst-pics img { width: 240px; max-width: 100%; height: auto; border-radius: 8px; background: #000; }
.lst-estimate { margin-top: 12px; }
@media (max-width: 640px) { .lst-rows td.small { display: block; padding-top: 0; } .lst-pics img { width: 100%; } }


/* ---------------------------------------------------------------- simplify (docs/design/simplify-2026-10-27)
   The '?' tip (views/tips.js): an 18 px circle with a 32 px touch target, its popover under it in the top layer; the
   Details disclosure (views/disclose.js); the Help page (views/help.js); the bar's Help link. */
.tipped { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
button.tip { position: relative; z-index: 1; flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; padding: 0;
             border-radius: 50%; background: var(--panel); border: 1px solid var(--rule); color: var(--ink2);
             font: 600 11px/1 var(--sans); vertical-align: 1px; cursor: help; }
button.tip::before { content: ""; position: absolute; inset: -7px; }
button.tip:hover:not(:disabled) { background: var(--soft); color: var(--ink); border-color: color-mix(in srgb, var(--muted) 50%, var(--rule)); }
button.tip[aria-expanded="true"] { background: var(--ink); color: var(--panel); border-color: var(--ink); }
.tip-pop { display: none; position: fixed; inset: auto; margin: 0; z-index: 40; max-inline-size: min(320px, calc(100vw - 32px));
           padding: 10px 12px; font: 13px/1.45 var(--sans); color: var(--ink); background: var(--panel); white-space: normal;
           text-align: left; border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow-sm), 0 6px 24px rgba(16,19,23,.12); }
.tip-pop:popover-open { display: grid; gap: 6px; }
.tip-pop.open { display: grid; gap: 6px; }
.tip-pop.placing { visibility: hidden; }
.tip-pop:focus { outline: none; }
.tip-pop .tip-own { color: var(--ink); }
.tip-pop .tip-gen { color: var(--ink2); }
.tip-pop .tip-more { font-size: 12.5px; }
details.disclose { margin-top: 14px; }
details.disclose > summary { color: var(--ink2); font-weight: 500; }
details.disclose > .disclose-body { margin-top: 10px; }
.bar .helplink { color: var(--ink2); text-decoration: none; padding: 6px 10px; border-radius: 7px; }
.bar .helplink:hover, .bar .helplink[aria-current="page"] { background: var(--soft); color: var(--ink); }
.help h1 { margin-bottom: 14px; }
.help-toc ul { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 10px; }
.help-toc ul ul { margin-top: 4px; padding-left: 14px; gap: 2px; }
.help-toc a { color: var(--ink2); }
.help-toc a:hover { color: var(--ink); }
.help-group h2 { margin-top: 30px; }
.help-q { margin: 10px 0; max-width: 76ch; scroll-margin-top: 72px; }
.help-q h3 { margin: 0 0 6px; font-size: 16px; }
.help-q p { margin: 6px 0 0; color: var(--ink2); }
.help-q .help-tip { color: var(--ink); }
.help-q.on, .help-q:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 18%, transparent); }
/* THE grade chip (statusview.js gradeChip): its number and its confidence, low confidence and an older pair's marked */
.chip.g-chip { font-variant-numeric: tabular-nums; }
.chip.g-chip.g-low { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, var(--panel)); }
.chip.g-chip.g-earlier { border: 1px dashed var(--warn); }
/* an older pair's estimate: its age as its own chip beside the grade, never in the confidence's place */
.chip.g-flag { margin-left: 4px; color: var(--warn); border: 1px dashed var(--warn); background: var(--panel); }
/* the coins list, simplified (views/coins.js rowHtml, DESIGN.md 4.3): the title on one line with its identity chip, the
   key facts as numbers on the next, the status chip in its column (on a phone, under the facts) */
.coins-head h1.tipped { display: inline-flex; gap: 8px; }
.coin-text .title-line { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; min-width: 0; }
.coin-text .title-line > a { min-width: 0; max-width: min(50ch, 100%); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coin-text .title-line > .chip, .coin-text .title-line > .tipped { flex: none; }
.coin-text .facts-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px; font-size: 13px;
                         color: var(--ink2); font-variant-numeric: tabular-nums; }
.coin-text .facts-line .fact { color: var(--ink2); }
.coin-text .facts-line .fact-q { color: var(--muted); }
.stage-tag.tone-working { color: var(--focus); background: color-mix(in srgb, var(--focus) 12%, var(--panel)); }
.stage-tag.tone-working::before { animation: blink 1.2s ease-in-out infinite; }
.stage-tag.st-incomplete { color: var(--ink2); }
.stage-tag.tone-bad { color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, var(--panel)); }
.stage-tag.st-ready, .stage-tag.st-changes, .stage-tag.st-changed { color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 10%, var(--panel)); }
.list-filters { margin: 0; }
.list-filters > summary { font-size: 13px; padding: 6px 2px; }
.list-filters .facet-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.more-rows { margin: 12px 4px 4px; }
@media (max-width: 640px) { table.coins td.stage-col { display: block; padding: 0 6px 10px 88px; }      /* under the facts */
                            .coin-text .title-line { flex-wrap: wrap; }
                            .coin-text .title-line > a { flex: 1 1 100%; max-width: 100%; white-space: normal; display: -webkit-box;
                                                         -webkit-line-clamp: 2; -webkit-box-orient: vertical; } }
@media (prefers-reduced-motion: reduce) { .stage-tag.tone-working::before { animation: none; } }
/* the coin page, simplified (views/coin.js, DESIGN.md 4.1): what the coin is under its name, the status card with the one
   next action, the key facts as numbers, what needs the person, the steps one line each, everything else under Details */
.journey .j-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; color: var(--ink2); font-size: 14px; }
.journey .j-sub:empty { display: none; }
.journey .j-sub .j-type { color: var(--ink2); }
#steps { display: grid; gap: 0; }
#steps > div:empty { display: none; }
.cs { padding: 12px 14px 10px; }
.cs-headline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-weight: 400; }
.cs-headline .stage-tag { font-size: 13px; }
.cs-unmet { color: var(--warn); font-size: 13.5px; }
.cs-next-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 10px; }
.cs-next-row .cs-next { margin: 0; flex: 1 1 220px; color: var(--ink); }
.cs-next-row > button:not(.tip) { flex: none; }
.cs-next-row.flip { padding: 10px 12px; border: 1px solid var(--accent); border-radius: var(--radius);
                    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent); margin: 10px 0 0; }
/* the flip line is an instruction, not an error: a neutral tint, never the accent's red border (polish-wip 9be2d67) */
.cs .flip { background: color-mix(in srgb, var(--focus) 6%, var(--panel)); border: 1px solid color-mix(in srgb, var(--focus) 28%, var(--rule));
  box-shadow: none; }
.cs .flip.small { margin: 8px 0 0; padding: 6px 10px; border-radius: 8px; box-shadow: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.kf { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 2px 0 0; padding: 10px 14px;
      border-top: 1px solid var(--rule); font-variant-numeric: tabular-nums; }
.kf-row { display: contents; }
.kf dt { color: var(--muted); font-size: 13px; padding-top: 1px; }
.kf dd { margin: 0; min-width: 0; font-size: 14px; color: var(--ink); }
.kf dd .tipped { white-space: normal; flex-wrap: wrap; }
.kf-v.tone-ok { color: var(--ok); }
.kf-v.tone-attention { color: var(--warn); }
.kf-sub { color: var(--muted); font-size: 13px; }
.kf-todo dd { font-size: 13.5px; color: var(--ink2); }
.kf-todo .todo-v { color: var(--ink2); }
.kf-todo button.link { font-size: 13.5px; padding: 0; }
#kf-box .kf + .kf { border-top: 1px solid var(--rule); }
.kf dt { white-space: nowrap; }
#steps-box { border-top: 1px solid var(--rule); padding-top: 4px; }
#steps-box .steps { gap: 0; }
#steps-box .step { padding: 6px 10px; gap: 10px; grid-template-columns: 26px minmax(0, 1fr); align-items: start; }
#steps-box .step:not(:last-child)::after { left: 22px; top: 32px; bottom: -6px; }
#steps-box .step .num { width: 24px; height: 24px; font-size: 12px; }
#steps-box .step.next, #steps-box .step.active, #steps-box .step.failed { margin: 2px 0; }
#steps-box .step.next { box-shadow: none; }
#steps-box .step .head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; padding-top: 2px; }
#steps-box .step .head strong { font-weight: 500; font-size: 14.5px; }
.step-d > summary { display: flex; align-items: baseline; }
.step-d > summary::before { order: 2; margin-left: auto; align-self: center; }
.step-d[open] > summary { margin-bottom: 2px; }
.step-d > .detail { margin-top: 2px; }
#parts-box details.cs-parts { margin: 0; padding: 6px 14px 10px; border-top: 1px solid var(--rule); }
#parts-box details.cs-parts > summary { color: var(--muted); font-weight: 400; }
#parts-box details.cs-parts > summary { display: flex; }
.j-more { display: grid; gap: 10px; margin-top: 22px; }
.j-more > details.panel { padding: 12px 18px; margin: 0; }
.j-more > details.panel > summary { font-weight: 500; color: var(--ink); }
.j-more > details.panel .d-state { color: var(--muted); font-weight: 400; }
.j-more > details.panel[open] > summary { margin-bottom: 4px; }
.j-more .label-card, .j-more .meas-card, .j-more .timeline-card, .j-more .evidence-card, .j-more .open-card, .j-more .upright-card { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.j-more .label-card h2 { margin-top: 0; }
.open-list { margin: 4px 0 8px; padding-left: 18px; }
.open-list li { margin-bottom: 8px; }
.lc-prop .chip { margin-right: 4px; }
.lc-prop[data-kind="alone"] .chip, .lc-prop[data-kind="awaiting"] .chip { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, var(--panel)); }
.stage-acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 16px; }
.turn-toggle label { display: inline-flex; gap: 6px; align-items: baseline; color: var(--ink2); }
.while-scan .ws-head { display: flex; align-items: center; gap: 6px; }
.while-scan .ws-head h3 { margin: 0; }
.stage-cap .tip { margin-left: 4px; }
.stage-cap:has(.cap-text:empty):not(:has(.cap-toggle)) { display: none; }
@media (max-width: 640px) { .kf { grid-template-columns: minmax(84px, max-content) minmax(0, 1fr); gap: 4px 10px; padding: 10px 12px; }

                            .j-more > details.panel { padding: 12px 14px; } }
/* the report page, simplified (views/report.js, DESIGN.md 4.6): the chips, the one next action, the report's order and
   the last check in one line; the slots a person fills in sight, the proposals, the filled slots and the release table
   under closed Details */
.rp-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.rp-title .rp-name { font-size: 17px; font-weight: 400; color: var(--ink2); overflow-wrap: anywhere; }
.rp-standing { display: grid; gap: 10px; }
.rp-now, .rp-path { display: grid; gap: 8px; min-width: 0; }
.rp-path { border-top: 1px solid var(--rule); padding-top: 10px; }
.rp-standing .cs-next-row { margin-top: 0; }
.rp-order { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.rp-steps { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; }
.rp-step { display: inline-flex; align-items: center; gap: 6px; color: var(--ink2); font-size: 13.5px; }
.rp-step .num { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--rule); font-size: 11px; }
.rp-step.done { color: var(--ok); }
.rp-step.done .num { background: color-mix(in srgb, var(--ok) 14%, var(--panel)); border-color: transparent; }
.rp-step.next { color: var(--ink); font-weight: 500; }
.rp-step.next .num { background: var(--ink); color: var(--panel); border-color: var(--ink); }
.rp-ran, .rp-gnote { margin: 0; color: var(--ink2); display: flex; flex-wrap: wrap; gap: 4px 12px; }
.rp-ran[data-changed="true"] { color: var(--warn); }
.rp-ran .tipped, .rp-gnote .tipped { white-space: normal; }
.rp-draft-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.rp-draft-head h2 { margin: 0; display: inline-flex; align-items: center; gap: 6px; }
.rp-group { border: 0; padding: 0; margin: 12px 0 0; min-width: 0; }
.rp-group legend { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; padding: 0; margin-bottom: 4px; }
.rp-slot { margin: 8px 0; min-width: 0; }
.rp-slot > label { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.rp-slot textarea, .rp-slot input { width: 100%; }
.rp-lint:empty { display: none; }
.rp-slot-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.rp-slot-k { color: var(--ink2); font-size: 13.5px; }
.rp-prop { flex: 1 1 160px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.rp-kind { flex: none; }
.rp-prop-slot[data-kind="alone"] .rp-kind, .rp-prop-slot[data-kind="awaiting"] .rp-kind { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, var(--panel)); }
.rp-use { padding: 2px 10px; font-size: 13px; }
details.rp-edit { margin-top: 2px; }
details.rp-edit > summary { font-size: 13px; color: var(--muted); cursor: pointer; }
details.rp-fold { margin-top: 12px; }
details.rp-release { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); padding: 10px 16px; }
details.rp-release table { display: block; overflow-x: auto; }
.rp-whynot:empty, .rp-wait:empty { display: none; }
.rp-whynot { margin: 6px 0 0; }
.rp-links .acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* the stage's look picker (views/facelook.js): one small select under the tabs, its '?' beside it */
.stage-look { margin-top: 8px; display: flex; justify-content: center; }
.stage-look:empty { display: none; }
.stage-look label { display: inline-flex; align-items: center; gap: 6px; }
.stage-look select { font-size: 13px; padding: 4px 8px; }
.stage-pic canvas, .stage-pic .stage-blend { width: 100%; height: 100%; object-fit: contain; padding: 4%; display: block; box-sizing: border-box; }
/* the browser's blend of the colour picture and the shaded relief when a canvas may not read them */
.stage-pic .stage-blend { position: relative; padding: 0; }
.stage-pic .stage-blend img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 4%; }
.stage-pic .stage-blend img.shade { mix-blend-mode: multiply; filter: brightness(1.57); }
.stage-pic { position: relative; }
.stage-bar { position: absolute; right: 5%; bottom: 4%; display: flex; align-items: center; gap: 6px; font-size: 11px; color: #d7dbe0;
             background: rgba(16, 19, 23, .55); padding: 3px 6px; border-radius: 6px; }
.stage-bar i { display: block; width: 72px; height: 8px; border-radius: 2px; border: 1px solid rgba(255, 255, 255, .35); }

/* the review's remaining work on the coin's status card (statusview.js workHtml; v0.1.43, outside review finding 4) */
.cs-work { margin: 6px 0 0; }
.cs-work p { margin: 2px 0 0; }
.cs-work-k { color: var(--muted, #7d8591); }
.cs-work-i { white-space: nowrap; }

/* the developers' Costs page (views/costs.js; docs/design/COSTS.md): tiles, the per-day chart (AI series 1, GPU
   series 2: validated against the panel colour in both themes), the tables */
.costs { --cost-ai: #2a78d6; --cost-gpu: #eb6834; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .costs { --cost-ai: #3987e5; --cost-gpu: #d95926; } }
:root[data-theme="dark"] .costs { --cost-ai: #3987e5; --cost-gpu: #d95926; }
.cost-controls { gap: 16px; margin: 8px 0 4px; }
.cost-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 8px 0; }
.cost-tile { background: var(--panel); border: 1px solid var(--rule); border-radius: 8px; padding: 10px 12px; }
.cost-big { font-size: 1.5rem; font-variant-numeric: tabular-nums; color: var(--ink); }
.cost-table td.num, .cost-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cost-chart { margin: 4px 0 12px; }
.cost-chart svg { width: 100%; height: auto; max-height: 180px; display: block; }
.cost-chart .cost-ai { fill: var(--cost-ai); }
.cost-chart .cost-gpu { fill: var(--cost-gpu); }
.cost-chart .cost-axis { stroke: var(--rule); stroke-width: 1; }
.cost-chart .cost-tick { fill: var(--muted); font-size: 11px; font-family: var(--mono); }
.cost-chart g:hover rect.cost-ai, .cost-chart g:hover rect.cost-gpu { opacity: .8; }
.cost-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: -1px; margin: 0 2px 0 8px; }
.cost-ai-key { background: var(--cost-ai); }
.cost-gpu-key { background: var(--cost-gpu); }