/* web/mint.css — the Mint panel on top of design.css (the Empire MAX console's sheet, copied verbatim).
   Phone-first: one column at any width under 720px, two tiles side by side from 480px, the log capped in height
   so the mind line stays one flick away. Dark by default (design.css :root); red beats content (body[data-lamp=red]). */

body.mint { margin: 0; min-height: 100dvh; background: var(--canvas); color: var(--text); }
.mint-shell { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 100dvh; }
.mint-bar { position: sticky; top: 0; z-index: 5; background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.mint-bar .identity { flex: none; }
.mint-live { flex: 1 1 auto; min-width: 0; }
.mint-bar .clock { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--text-2); }
.mint-out { block-size: 24px; padding-inline: 8px; font-size: var(--fs-meta); color: var(--text-2); border-color: var(--hair); flex: none; }
.mint-main { padding: 10px 12px calc(16px + env(safe-area-inset-bottom)); max-width: 980px; margin-inline: auto; width: 100%; box-sizing: border-box; }
@media (min-width: 720px) { .mint-main { padding-inline: 20px; } }

.panel-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; block-size: auto; min-block-size: var(--row-24); }
.panel-head .label { font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); }
.panel-head .btn { margin-inline-start: auto; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---- red beats content --------------------------------------------------------------------------------- */
.mint-banner { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: color-mix(in srgb, var(--red) 82%, black); color: var(--paper); font-size: var(--fs-row); line-height: var(--lh-row); position: sticky; top: 32px; z-index: 4; }
.mint-banner .dot { background: var(--paper); }
.mint-banner b { font-weight: 500; }
.mint-banner span { color: color-mix(in srgb, var(--paper) 80%, transparent); font-size: var(--fs-body); }
body[data-lamp="red"] .bg-vignette { box-shadow: inset 0 0 0 3px var(--red), inset 0 0 120px rgba(158, 46, 36, .45); }
body[data-lamp="red"] .mint-main > .card, body[data-lamp="red"] .mint-tile, body[data-lamp="red"] .mint-tripwire { border-color: color-mix(in srgb, var(--red) 60%, var(--hair)); }
body[data-lamp="red"] .mint-main { filter: saturate(.55); }
body[data-lamp="red"] .mint-now { color: var(--red); }

/* ---- 1. health --------------------------------------------------------------------------------------------- */
.mint-health-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lamp { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding-inline: 10px 12px; border-radius: var(--r-pill); border: 1px solid var(--hair-strong); font-size: var(--fs-caption); }
.lamp i { width: 10px; height: 10px; border-radius: 50%; background: var(--grey); box-shadow: 0 0 0 3px color-mix(in srgb, var(--grey) 25%, transparent); }
.lamp b { font-weight: 500; text-transform: uppercase; letter-spacing: .06em; }
.lamp span { color: var(--text-2); font-family: var(--font-mono); }
.lamp[data-colour="green"] i { background: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 30%, transparent); animation: breathe-lamp 4s ease-in-out infinite; }
.lamp[data-colour="amber"] i { background: var(--amber); box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 30%, transparent); }
.lamp[data-colour="red"] i { background: var(--red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 35%, transparent); animation: blink-lamp 1s steps(2) infinite; }
.lamp[data-colour="red"] { border-color: var(--red); }
@keyframes breathe-lamp { 0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 30%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--green) 12%, transparent); } }
@keyframes blink-lamp { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .lamp i { animation: none !important; } }

.pill-state b { font-weight: 500; }
.pill-state[data-state="green"] { border-color: var(--green); color: var(--text); }
.pill-state[data-state="amber"] { border-color: var(--amber); color: var(--text); }
.pill-state[data-state="red"] { border-color: var(--red); background: color-mix(in srgb, var(--red) 22%, transparent); color: var(--text); }
.pill-state[data-state="grey"] { color: var(--text-2); }
.spin { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--text-2); border-top-color: transparent; animation: spin var(--dur-spin) linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

.mint-organs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.organ { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px; border-radius: var(--r-input); background: var(--raised); font-size: var(--fs-meta); color: var(--text-2); }
.organ i { width: 8px; height: 8px; border-radius: 50%; background: var(--grey); }
.organ[data-state="ok"] i { background: var(--green); }
.organ[data-state="down"] i { background: var(--red); }
.organ[data-state="down"] { color: var(--text); }
.mint-sentinel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.sentinel-word { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-meta); color: var(--text-2); }
.sentinel-word b { font-weight: 500; font-family: var(--font-mono); color: var(--text); font-size: var(--fs-caption); }
.sentinel-word[data-state="amber"] b { color: var(--amber); }
.sentinel-word[data-state="red"] b { color: var(--red); }

/* ---- 2. the mind line -------------------------------------------------------------------------------------- */
.mint-now { margin: 0; font-size: var(--fs-section); line-height: var(--lh-section); font-weight: 500; letter-spacing: -.01em; overflow-wrap: anywhere; }
@media (min-width: 720px) { .mint-now { font-size: var(--fs-page); line-height: var(--lh-page); } }
.mint-countdowns { gap: 12px; }
.mint-count { display: inline-flex; flex-direction: column; gap: 0; min-width: 120px; }
.mint-count .label { font-size: var(--fs-meta); color: var(--text-2); }
.mint-count b { font-size: var(--fs-card); line-height: var(--lh-card); font-weight: 500; font-variant-numeric: tabular-nums; }
.mint-count small { font-size: var(--fs-meta); color: var(--text-2); }
.pill[data-state="green"] { border-color: var(--green); }
.pill[data-state="amber"] { border-color: var(--amber); }
.pill[data-state="red"] { border-color: var(--red); background: color-mix(in srgb, var(--red) 22%, transparent); }
.pill[data-state="grey"] { color: var(--text-2); }
.pill .pk { color: var(--text-2); }
#btc[data-state="ok"] .dot { background: var(--green); } #btc[data-state="wait"] .dot { background: var(--amber); }

/* ---- 3. activity ------------------------------------------------------------------------------------------- */
.mint-activity { position: relative; }
.mint-log { list-style: none; margin: 0; padding: 0; max-height: 46dvh; overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid var(--hair); font-size: 12px; line-height: 18px; }
@media (min-width: 720px) { .mint-log { max-height: 420px; } }
.mint-log li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; padding: 5px 0; border-bottom: 1px solid var(--hair); }
.mint-log .ts { color: var(--text-2); white-space: nowrap; }
.mint-log .ts b { color: var(--text); font-weight: 400; }
.mint-log .tags { display: inline-flex; gap: 4px; align-items: center; }
.mint-log .tag { display: inline-flex; align-items: center; height: 16px; padding-inline: 6px; border-radius: 999px; border: 1px solid var(--hair-strong); font-size: 10px; line-height: 1; color: var(--text-2); font-family: var(--font-sans); }
.mint-log .tag.kind[data-k="green"] { border-color: var(--green); color: var(--text); background: color-mix(in srgb, var(--green) 18%, transparent); }
.mint-log .tag.kind[data-k="amber"] { border-color: var(--amber); color: var(--text); background: color-mix(in srgb, var(--amber) 18%, transparent); }
.mint-log .msg { grid-column: 1 / -1; font-family: var(--font-sans); font-size: var(--fs-body); line-height: 18px; overflow-wrap: anywhere; }
.mint-log li[data-k="green"] .msg { color: var(--text); }
.mint-log li[data-k="grey"] .msg { color: color-mix(in srgb, var(--text) 80%, var(--text-2)); }
.mint-log li.is-new { animation: row-in var(--dur-open) var(--ease-open); }
@keyframes row-in { from { background: color-mix(in srgb, var(--gold) 18%, transparent); } to { background: transparent; } }
.mint-jump { position: sticky; }

/* ---- 4. positions ------------------------------------------------------------------------------------------ */
.pos { gap: 8px; }
.pos-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pos-head .id { font-weight: 500; font-size: var(--fs-row); }
.pos-head .strat { color: var(--text-2); font-size: var(--fs-meta); }
.pos-head .pnl { margin-inline-start: auto; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-card); font-weight: 500; }
.pos-head .pnl[data-k="green"] { color: var(--green); } .pos-head .pnl[data-k="red"] { color: var(--red); }
.pos-bar { position: relative; height: 40px; margin-block: 2px 4px; }
.pos-bar .track { position: absolute; inset: 16px 0 auto 0; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--red), var(--input) 55%, var(--green)); opacity: .85; }
.pos-bar .end { position: absolute; top: 0; font-size: 10px; line-height: 12px; color: var(--text-2); font-family: var(--font-mono); white-space: nowrap; }
.pos-bar .end.stop { left: 0; } .pos-bar .end.entry { left: 62.5%; transform: translateX(-50%); }
.pos-bar .end.entry::after, .pos-bar .end.stop::after { content: ""; position: absolute; top: 13px; left: 50%; width: 1px; height: 12px; background: var(--hair-strong); }
.pos-bar .end.stop::after { left: 0; }
.pos-bar .px { position: absolute; top: 12px; width: 3px; height: 14px; border-radius: 2px; background: var(--paper); box-shadow: 0 0 0 2px var(--card); transform: translateX(-50%); }
.pos-bar .pxlabel { position: absolute; top: 28px; font-size: 10px; line-height: 12px; font-family: var(--font-mono); color: var(--text); transform: translateX(-50%); white-space: nowrap; }
.pos-kv { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 2px 8px; font-size: var(--fs-caption); }
.pos-kv span { color: var(--text-2); } .pos-kv b { font-weight: 400; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.pos-stop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 8px; border-radius: var(--r-input); background: var(--raised); font-size: var(--fs-caption); }
.pos-stop[data-state="green"] { border-inline-start: 3px solid var(--green); }
.pos-stop[data-state="amber"] { border-inline-start: 3px solid var(--amber); }
.pos-stop[data-state="grey"] { border-inline-start: 3px solid var(--grey); color: var(--text-2); }
.pos-stop .algo { font-family: var(--font-mono); color: var(--text-2); overflow-wrap: anywhere; }
.mint-empty { padding: 10px 0; color: var(--text-2); font-size: var(--fs-body); }

/* ---- 5. thinking ------------------------------------------------------------------------------------------- */
.mint-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; }
.mint-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; padding: 6px 0; border-top: 1px solid var(--hair); font-size: var(--fs-body); line-height: 18px; align-items: start; }
.mint-list li:first-child { border-top: 0; }
.mint-list .v { display: inline-flex; align-items: center; height: 18px; padding-inline: 6px; border-radius: 999px; border: 1px solid var(--hair-strong); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); white-space: nowrap; }
.mint-list .v[data-k="green"] { border-color: var(--green); color: var(--text); }
.mint-list .v[data-k="red"] { border-color: var(--red); color: var(--text); background: color-mix(in srgb, var(--red) 18%, transparent); }
.mint-list .v[data-k="amber"] { border-color: var(--amber); color: var(--text); }
.mint-list .t { overflow-wrap: anywhere; }
.mint-list .t small { display: block; color: var(--text-2); font-family: var(--font-mono); font-size: 11px; }
.mint-list .t b { font-weight: 500; }
.mint-timeline li { position: relative; padding-inline-start: 14px; }
.mint-timeline li::before { content: ""; position: absolute; left: 3px; top: 12px; width: 6px; height: 6px; border-radius: 50%; background: var(--grey); }
.mint-timeline li[data-k="green"]::before { background: var(--green); } .mint-timeline li[data-k="red"]::before { background: var(--red); } .mint-timeline li[data-k="amber"]::before { background: var(--amber); }

/* ---- 6. bar flags ------------------------------------------------------------------------------------------ */
.scan-group { display: flex; flex-direction: column; gap: 4px; }
.scan-group .caption { font-family: var(--font-mono); }
.scan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 4px; }
.cell { display: flex; flex-direction: column; gap: 1px; padding: 5px 6px; border-radius: 6px; border: 1px solid var(--hair); background: var(--raised); font-size: 11px; line-height: 14px; color: var(--text-2); }
.cell b { font-weight: 500; color: var(--text); font-size: 12px; }
.cell small { font-family: var(--font-mono); font-size: 10px; }
.cell[data-entry="1"] { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.cell[data-exit="1"] { border-color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber); }
.cell[data-open="1"] { background: color-mix(in srgb, var(--gold) 26%, var(--raised)); }
.cell .f { display: flex; gap: 4px; }
.cell .f i { width: 6px; height: 6px; border-radius: 50%; background: var(--hair-strong); }
.cell[data-entry="1"] .f i.e { background: var(--green); } .cell[data-exit="1"] .f i.x { background: var(--amber); } .cell[data-open="1"] .f i.o { background: var(--gold); }

/* ---- 7. money ---------------------------------------------------------------------------------------------- */
.mint-tiles { display: grid; grid-template-columns: 1fr; gap: var(--gap-grid); }
@media (min-width: 480px) { .mint-tiles { grid-template-columns: 1fr 1fr; } }
.mint-tile .card-value { font-size: var(--fs-hero); line-height: var(--lh-hero); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.mint-tile .card-value .unit { font-size: var(--fs-caption); font-weight: 400; color: var(--text-2); margin-inline-start: 6px; }
.mint-kv { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; font-size: var(--fs-caption); }
.mint-kv span { color: var(--text-2); } .mint-kv b { font-weight: 400; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.mint-tile[data-blind="1"] .card-value { color: var(--text-2); }
.mint-tw-bar { position: relative; height: 10px; border-radius: 5px; background: var(--input); margin-block: 6px 10px; overflow: visible; }
.mint-tw-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 5px; background: linear-gradient(90deg, var(--red), var(--amber) 40%, var(--green)); width: 0; transition: width var(--dur-gauge) var(--ease-env); }
.mint-tw-bar b { position: absolute; top: -4px; width: 3px; height: 18px; border-radius: 2px; background: var(--paper); transform: translateX(-50%); left: 0; box-shadow: 0 0 0 2px var(--card); }

/* ---- 8. alarms --------------------------------------------------------------------------------------------- */
.mint-strip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; margin: -4px -4px 6px; border-radius: var(--r-input); background: color-mix(in srgb, var(--red) 32%, var(--card)); border: 1px solid var(--red); font-size: var(--fs-body); }
.mint-strip b { font-weight: 500; }
.mint-strip small { margin-inline-start: auto; color: var(--text-2); }
#alarms li[data-k="red"] .v { border-color: var(--red); }

.mint-foot { display: flex; flex-wrap: wrap; gap: 6px 16px; padding-block: 8px; justify-content: space-between; }

/* ---- the door ------------------------------------------------------------------------------------------------ */
.mint-door { display: grid; place-items: center; min-height: 100dvh; }
.mint-gate { position: relative; z-index: 1; width: 100%; max-width: 420px; padding: 16px; box-sizing: border-box; }
.mint-gate-card { gap: 12px; }
.mint-gate details summary { cursor: pointer; list-style: none; }
.mint-gate details summary::-webkit-details-marker { display: none; }
.mint-gate details[open] summary { margin-bottom: 8px; }
.mint-gate .field { display: flex; flex-direction: column; gap: 4px; }
.mint-gate .input { width: 100%; box-sizing: border-box; }

/* ---- tables, facts, the rest ------------------------------------------------------------------------------- */
.mint-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-inline: -4px; padding-inline: 4px; }
.mint-table { border-collapse: collapse; width: 100%; font-size: 11px; line-height: 16px; font-variant-numeric: tabular-nums; }
.mint-table th { text-align: end; font-weight: 400; color: var(--text-2); font-family: var(--font-sans); font-size: 10px; padding: 4px 4px; border-bottom: 1px solid var(--hair-strong); white-space: nowrap; }
.mint-table th:first-child, .mint-table td:first-child { text-align: start; font-family: var(--font-sans); font-weight: 500; }
.mint-table td { text-align: end; padding: 5px 4px; border-bottom: 1px solid var(--hair); white-space: nowrap; }
.mint-table td[data-k="green"] { color: var(--green); } .mint-table td[data-k="amber"] { color: var(--amber); } .mint-table td[data-k="red"] { color: var(--red); } .mint-table td[data-k="dim"] { color: var(--text-2); }
.mint-table tr[data-open="1"] td:first-child::after { content: " ●"; color: var(--gold); }
.mint-kv-2 { grid-template-columns: auto 1fr auto 1fr; }
@media (max-width: 479px) { .mint-kv-2 { grid-template-columns: auto 1fr; } }
.rest-item { display: grid; grid-template-columns: minmax(90px, auto) minmax(0, 1fr); gap: 4px 10px; padding: 6px 0; border-top: 1px solid var(--hair); font-size: var(--fs-caption); }
.rest-item:first-child { border-top: 0; }
.rest-item .k { color: var(--text-2); font-family: var(--font-mono); overflow-wrap: anywhere; }
.rest-item .v { font-family: var(--font-mono); overflow-wrap: anywhere; white-space: pre-wrap; }
.rest-item .v.obj { display: grid; grid-template-columns: minmax(80px, auto) minmax(0, 1fr); gap: 2px 8px; }
.rest-item .v.obj > span:nth-child(odd) { color: var(--text-2); }
.mint-raw { margin: 0; padding: 8px; border-radius: var(--r-input); background: var(--raised); font-size: 11px; line-height: 15px; max-height: 60dvh; overflow: auto; white-space: pre; }

/* ---- the herald ------------------------------------------------------------------------------------------- */
.mint-watch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
@media (min-width: 480px) { .mint-watch { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mint-watch-cell { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: var(--r-input); background: var(--raised); }
.mint-watch-cell b { font-size: var(--fs-card); line-height: var(--lh-card); font-weight: 500; overflow-wrap: anywhere; }
.rota { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding-inline: 8px; border-radius: var(--r-pill); border: 1px solid var(--hair); font-size: var(--fs-meta); }
.rota b { font-weight: 500; } .rota span { color: var(--text-2); font-family: var(--font-mono); }
.rota[data-today="1"] { border-color: var(--gold); }
#h-fills[data-state="wait"] .dot { background: var(--amber); } #h-fills span { font-family: var(--font-mono); font-size: var(--fs-caption); overflow-wrap: anywhere; }