/* MINDSHAFT dashboard — deep in the shaft. Basalt ground, panels one step up, lamp on primary actions
   and the live marker only. Needs tokens.css first. Standalone: does not use shaft.css or app.css. */

/* ---------- Base ---------- */
:root { color-scheme: dark; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--basalt); color: var(--basalt-ink);
  font-family: var(--text); font-size: var(--s-body); line-height: 1.5;
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 0.18em; }
button, input { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 600; line-height: 0.95; letter-spacing: -0.01em; }
p { margin: 0; }
code { font-family: var(--code); font-size: 0.92em; }
::selection { background: var(--lamp); color: var(--lamp-ink); }
:focus-visible { outline: 3px solid var(--basalt-ink); outline-offset: 3px; }
.sr-only { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[hidden] { display: none !important; }
.wrap { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--margin); }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--basalt-soft); }
.note { color: var(--basalt-soft); font-size: var(--s-body); }
.note.err { color: var(--bad-on-dark); }
.note.ok { color: var(--ok-on-dark); }

/* ---------- Bar ---------- */
.bar { position: sticky; top: 0; z-index: 20; background: var(--basalt); }
.bar-in { display: flex; align-items: center; gap: clamp(12px, 3vw, 36px); min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; font-family: var(--display); font-weight: 600; font-size: var(--s-lead); }
.brand img { width: 28px; height: 28px; }
.bar nav { display: flex; gap: clamp(4px, 1.6vw, 20px); margin-left: auto; }
.bar nav a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 8px; text-decoration: none; color: var(--basalt-soft); font-weight: 500; }
@media (hover: hover) { .bar nav a:hover { color: var(--basalt-ink); } }
@media (max-width: 720px) { .bar nav a:not(.keep) { display: none; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border: 0; border-radius: var(--radius);
  background: var(--slate); color: var(--slate-ink);
  font-weight: 600; font-size: var(--s-body); text-decoration: none; cursor: pointer;
  transition: transform .12s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.btn-lamp { background: var(--lamp); color: var(--lamp-ink); }
.btn-sm { min-height: 44px; padding: 0 16px; }
.btn-ghost { background: transparent; color: var(--basalt-soft); padding-inline: 10px; text-decoration: underline; text-underline-offset: 0.2em; }
.btn-danger { background: var(--slate); color: var(--bad-on-dark); }
.btn-danger.armed { background: var(--bad-on-dark); color: var(--basalt); }
@media (hover: hover) {
  .btn:hover { background: var(--basalt-soft); color: var(--basalt); }
  .btn-lamp:hover { background: var(--lamp-hover); color: var(--lamp-ink); }
  .btn-ghost:hover { background: transparent; color: var(--basalt-ink); }
  .btn-danger:hover { background: var(--bad-on-dark); color: var(--basalt); }
  .btn[disabled]:hover { background: var(--slate); color: var(--slate-ink); }
  .btn-lamp[disabled]:hover { background: var(--lamp); color: var(--lamp-ink); }
}
.actions { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 520px) { .actions .btn { flex: 1 1 100%; } }

/* ---------- Fields: filled, with a 2px floor line ---------- */
.field {
  min-height: 48px; padding: 0 14px; min-width: 0;
  background: var(--basalt); color: var(--basalt-ink);
  border: 0; border-bottom: 2px solid var(--basalt-soft); border-radius: var(--radius);
  font-size: var(--s-body);
}
.field::placeholder { color: var(--basalt-soft); }
.field:focus { outline: none; border-bottom-color: var(--basalt-ink); }
.field:focus-visible { outline: 3px solid var(--basalt-ink); outline-offset: 2px; }

/* ---------- Depth badge: a small column filled to its stratum ---------- */
.depth { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--basalt-ink); white-space: nowrap; }
.depth-bar { display: inline-grid; grid-template-rows: repeat(3, 5px); gap: 2px; width: 8px; }
.depth-bar i { background: var(--slate); }
.depth[data-level="1"] .depth-bar i:nth-child(1),
.depth[data-level="2"] .depth-bar i:nth-child(1),
.depth[data-level="3"] .depth-bar i:nth-child(1) { background: var(--d1); }
.depth[data-level="2"] .depth-bar i:nth-child(2),
.depth[data-level="3"] .depth-bar i:nth-child(2) { background: var(--d2); }
.depth[data-level="3"] .depth-bar i:nth-child(3) { background: var(--d3); }
.depth small { font-weight: 400; color: var(--basalt-soft); font-size: inherit; }

/* ---------- Command lines (real code) ---------- */
.cmd { display: flex; align-items: center; gap: 12px; background: var(--basalt); padding: 6px 6px 6px 16px; min-height: 56px; }
.cmd code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; color: var(--basalt-ink); scrollbar-width: none; }
.cmd code::-webkit-scrollbar { display: none; }
.cmd code::before { content: "$ "; color: var(--basalt-soft); }
.copy { flex: none; }

/* ---------- Page ---------- */
.dash { padding-top: clamp(24px, 4vw, 48px); padding-bottom: 80px; }
.loading-screen { min-height: 60svh; display: grid; place-items: center; color: var(--basalt-soft); }
.dash-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 32px; margin-bottom: clamp(20px, 3vw, 36px); }
.who { min-width: 0; }
.who h1 { font-size: var(--s-head); overflow-wrap: anywhere; }
.who-meta { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; color: var(--basalt-soft); }
.who-meta code { color: var(--basalt-ink); margin-right: 4px; }
.rename { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.rename .field { flex: 1 1 240px; }

/* Rig status: a filled block; the square is the live marker */
.rig { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 48px; padding: 8px 16px; background: var(--step-1); font-weight: 600; }
.rig i { width: 12px; height: 12px; background: var(--basalt-soft); flex: none; }
.rig.on i { background: var(--lamp); }
.rig small { font-weight: 400; color: var(--basalt-soft); font-size: var(--s-body); }

.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.panel { background: var(--step-1); padding: clamp(18px, 2vw, 28px); min-width: 0; }
.panel h2 { font-size: var(--s-lead); margin-bottom: 16px; }
.panel h2 + .note { margin-top: -8px; margin-bottom: 16px; }
.c8 { grid-column: span 8; } .c4 { grid-column: span 4; } .c6 { grid-column: span 6; }
.c7 { grid-column: span 7; } .c5 { grid-column: span 5; } .c12 { grid-column: 1 / -1; }
@media (max-width: 1000px) { .c8, .c4, .c6, .c7, .c5 { grid-column: 1 / -1; } }
.stack { display: grid; gap: 12px; align-content: start; }

/* ---------- The dig: strata bar on the left edge, question, four rows ---------- */
.dig { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: clamp(18px, 2.4vw, 32px); padding: 0 clamp(18px, 2.4vw, 36px) 0 0; min-height: 520px; }
.dig-gauge { display: grid; grid-template-rows: 5fr 3fr 2fr; }
.dig-gauge i { background: var(--basalt); }
.dig[data-level="1"] .dig-gauge i:nth-child(1),
.dig[data-level="2"] .dig-gauge i:nth-child(1),
.dig[data-level="3"] .dig-gauge i:nth-child(1) { background: var(--d1); }
.dig[data-level="2"] .dig-gauge i:nth-child(2),
.dig[data-level="3"] .dig-gauge i:nth-child(2) { background: var(--d2); }
.dig[data-level="3"] .dig-gauge i:nth-child(3) { background: var(--d3); }
.dig-body { display: flex; flex-direction: column; min-width: 0; padding-block: clamp(18px, 2.4vw, 32px); }
.dig-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 24px; }
.dig-top .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; color: var(--basalt-soft); padding-top: 6px; }
.timer { text-align: right; }
.timer b { display: block; font-family: var(--display); font-weight: 600; font-size: var(--s-head); line-height: 0.9; font-variant-numeric: tabular-nums; }
.timer span { display: block; margin-top: 6px; color: var(--basalt-soft); }
.timer.hot b { color: var(--bad-on-dark); }

.question { margin-top: clamp(24px, 3.4vw, 44px); font-size: var(--s-lead); line-height: 1.3; font-weight: 500; overflow-wrap: anywhere; max-width: 40ch; }
.question.code { font-family: var(--code); font-size: var(--s-body); font-weight: 400; line-height: 1.55; max-width: none; white-space: pre-wrap; }

.choices { list-style: none; margin: clamp(20px, 3vw, 32px) 0 0; padding: 0; display: grid; gap: 4px; }
.choices li {
  display: flex; align-items: stretch; min-height: 64px;
  background: var(--basalt); color: var(--basalt-ink); overflow-wrap: anywhere;
}
.choices .l {
  flex: none; width: 56px; display: grid; place-items: center;
  background: var(--slate); font-family: var(--display); font-weight: 600; font-size: var(--s-lead); line-height: 1;
}
.choices .t { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 12px 18px; min-width: 0; }
.choices .tag { font-style: normal; font-weight: 600; }
.choices li.picked { background: var(--basalt-ink); color: var(--basalt); }
.choices li.picked .l { background: var(--basalt-soft); color: var(--basalt); }
.choices li.right { background: var(--ok-on-dark); color: var(--basalt); }
.choices li.right .l { background: var(--basalt); color: var(--ok-on-dark); }
.choices li.wrong { background: var(--bad-on-dark); color: var(--basalt); }
.choices li.wrong .l { background: var(--basalt); color: var(--bad-on-dark); }
.choices li.dim { color: var(--basalt-soft); }
.choices li.dim .l { background: var(--step-1); }

.verdict { margin-top: auto; padding-top: 28px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; }
.verdict b { font-family: var(--display); font-weight: 600; font-size: var(--s-lead); line-height: 1.1; }
.verdict[data-status="correct"] b { color: var(--ok-on-dark); }
.verdict[data-status="wrong"] b { color: var(--bad-on-dark); }
.verdict[data-status="missed"] b { color: var(--basalt-soft); }
.verdict span { color: var(--basalt-soft); }

.dig-empty { margin-top: clamp(28px, 5vw, 64px); max-width: 44ch; }
.dig-empty h3 { font-size: var(--s-head); }
.dig-empty p { margin-top: 16px; font-size: var(--s-lead); line-height: 1.35; }
.dig-empty .cmd { margin-top: 20px; max-width: 440px; }

/* ---------- Hold ---------- */
.hold-state { font-family: var(--display); font-weight: 600; font-size: var(--s-lead); line-height: 1.1; }
.hold-state.ok { color: var(--ok-on-dark); }
.hold-state.wait { color: var(--basalt-ink); }
.hold-state.no { color: var(--bad-on-dark); }
.hold p:not(.hold-state):not(.note) { margin-top: 8px; }
.meter { margin-top: 16px; height: 12px; background: var(--basalt); }
.meter i { display: block; height: 100%; width: 0; background: var(--basalt-ink); }
.meter-legend { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; color: var(--basalt-soft); }

/* ---------- Tally: balance is the one big figure ---------- */
.balance b {
  display: block; font-family: var(--display); font-weight: 600; font-size: var(--s-display);
  line-height: 0.85; font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.balance span { display: block; margin-top: 10px; color: var(--basalt-soft); }
.kv { margin: 24px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 4px; }
.kv > div { background: var(--basalt); padding: 14px 16px; min-width: 0; }
.kv dt { color: var(--basalt-soft); }
.kv dd { margin: 2px 0 0; font-family: var(--display); font-weight: 600; font-size: var(--s-lead); line-height: 1.15; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* ---------- Core sample: marks hang from the surface, deeper = longer ---------- */
.core { display: grid; grid-template-columns: repeat(40, minmax(0, 1fr)); gap: 3px; height: 64px; }
.core > * { position: relative; display: block; height: 100%; }
.core > *::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 34%; background: var(--slate); }
.core [data-level="2"]::before { height: 64%; }
.core [data-level="3"]::before { height: 100%; }
.core .correct::before { background: var(--ok-on-dark); }
.core .wrong::before { background: var(--bad-on-dark); }
.core .missed::before { background: var(--basalt-soft); }
.core .open::before { background: var(--lamp); }
.core .blank::before { background: var(--basalt); }
.core a:focus-visible { outline-offset: 1px; }
.core-legend { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 4px 20px; color: var(--basalt-soft); font-size: var(--s-small); }
.core-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; }
.sw-correct { background: var(--ok-on-dark); }
.sw-wrong { background: var(--bad-on-dark); }
.sw-missed { background: var(--basalt-soft); }
.sw-open { background: var(--lamp); }
.core-detail { margin-top: 12px; min-height: 1.5em; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .core { grid-template-columns: repeat(8, minmax(0, 1fr)); grid-auto-rows: 48px; height: auto; row-gap: 6px; }
}

/* ---------- Quiet panels: chart and payouts ---------- */
.quiet h2 { color: var(--basalt-soft); }
.chart { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 3px; align-items: end; height: 160px; }
.chart div { position: relative; height: 100%; display: flex; align-items: flex-end; }
.chart div i { display: block; width: 100%; background: var(--basalt-soft); min-height: 2px; }
.chart div.zero i { background: var(--slate); }
.chart div:last-child i { background: var(--basalt-ink); }
.chart div:focus-visible { outline-offset: 1px; }
.chart div:focus-visible i { background: var(--basalt-ink); }
@media (hover: hover) { .chart div:hover i { background: var(--basalt-ink); } }
.chart-axis { display: flex; justify-content: space-between; margin-top: 10px; color: var(--basalt-soft); font-size: var(--s-small); }
.chart-read { margin-top: 8px; min-height: 1.5em; }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data { width: 100%; border-collapse: collapse; }
table.data th { text-align: left; font-weight: 500; color: var(--basalt-soft); padding: 0 12px 10px 0; white-space: nowrap; }
table.data td { padding: 12px 12px 12px 0; border-top: 2px solid var(--basalt); vertical-align: middle; }
table.data .r { text-align: right; }
table.data th:last-child, table.data td:last-child { padding-right: 0; }
.empty { color: var(--basalt-soft); padding: 24px 0; }

/* ---------- Withdraw ---------- */
.wd form > .note:first-child { display: block; color: var(--basalt-ink); margin-bottom: 6px; }
.wd-row { display: flex; gap: 8px; }
.wd-row .field { flex: 1; font-variant-numeric: tabular-nums; }
.wd-steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 4px; }
.wd-steps li { display: flex; align-items: center; gap: 12px; color: var(--basalt-soft); }
.wd-steps li::before { content: ""; width: 12px; height: 12px; background: var(--slate); flex: none; }
.wd-steps li.done { color: var(--basalt-ink); }
.wd-steps li.done::before { background: var(--ok-on-dark); }
.wd-steps li.now { color: var(--basalt-ink); font-weight: 600; }
.wd-steps li.now::before { background: var(--lamp); }
.wd-pending { padding: 16px 18px; background: var(--basalt); margin-bottom: 14px; }
.wd-pending b { font-family: var(--display); font-weight: 600; font-size: var(--s-head); line-height: 0.95; font-variant-numeric: tabular-nums; }
.wd #wd-body > p:not(.note) { margin-top: 4px; }

/* Wallet picker (when several wallets are installed) */
.wallets { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.wallet-btn {
  width: 100%; display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 16px;
  background: var(--basalt); color: var(--basalt-ink); border: 0; border-radius: var(--radius);
  cursor: pointer; text-align: left; font-weight: 600; transition: transform .12s var(--ease);
}
.wallet-btn:active { transform: translateY(1px); }
.wallet-btn[disabled] { cursor: progress; }
.wallet-btn img { width: 28px; height: 28px; flex: none; }
@media (hover: hover) { .wallet-btn:hover { background: var(--slate); } }

/* ---------- Setup + terminals ---------- */
.setup p { margin-bottom: 14px; }
.setup .cmd + .cmd { margin-top: 4px; }
.danger-zone { display: grid; gap: 16px; justify-items: start; }
.danger-zone p { max-width: 56ch; }
#regen-status { margin-top: 12px; }

/* ---------- Phone ---------- */
@media (max-width: 600px) {
  .dig { grid-template-columns: 10px minmax(0, 1fr); gap: 14px; padding-right: 16px; min-height: 0; }
  .dig-body { padding-block: 18px 20px; }
  .dig-top { flex-direction: column-reverse; align-items: flex-start; }
  .timer { text-align: left; }
  .choices .l { width: 48px; }
  .choices .t { padding: 12px 14px; }
  .dash-head { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .wallet-btn { transition: none; }
  .btn:active, .wallet-btn:active { transform: none; }
}
@media (max-width: 600px) {
  .bar nav { display: none; }
  .bar .btn-sm { margin-left: auto; white-space: nowrap; }
  .brand { font-size: var(--s-body); }
}

/* access levels in the Hold panel */
.lvl-row { display: flex; gap: 4px; margin-top: 12px; }
.lvl { flex: 1; padding: 6px 8px; background: var(--basalt); color: var(--basalt-soft); font-size: var(--s-small); }
.lvl b { font-weight: 600; }
.lvl.on { background: var(--slate); color: var(--basalt-ink); }
.lvl.on b { color: var(--lamp); }