/* MINDSHAFT: economy, login, authorize. Borehole-log direction.
   Load after tokens.css. Self-contained: these pages no longer load shaft.css, site.css or app.css.
   body.surface = daylight paper (economy). body.deep = basalt, the bottom of the shaft (login, authorize). */

/* ---------- Page fields ---------- */
.surface {
  color-scheme: light;
  --bg: var(--paper); --fg: var(--paper-ink); --soft: var(--paper-soft);
  --panel: var(--step-2); --fill: var(--step-2); --fill-hover: var(--sand); --rule: var(--paper);
}
.deep {
  color-scheme: dark;
  --bg: var(--basalt); --fg: var(--basalt-ink); --soft: var(--basalt-soft);
  --panel: var(--step-1); --fill: var(--slate); --fill-hover: var(--basalt); --rule: var(--slate);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--text);
  font-size: var(--s-body);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2 { margin: 0; font-family: var(--display); font-weight: 600; line-height: 0.95; letter-spacing: -0.01em; text-wrap: balance; }
p { margin: 0; }
code { font-family: var(--code); font-size: 0.92em; }
::selection { background: var(--fg); color: var(--bg); }
:focus-visible { outline: 3px solid var(--fg); outline-offset: 3px; }
[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(--soft); }
.lead { font-size: var(--s-lead); line-height: 1.35; }
.note { color: var(--soft); }
.surface .note.err { color: var(--bad); }
.surface .note.ok { color: var(--ok); }
.deep .note.err { color: var(--bad-on-dark); }
.deep .note.ok { color: var(--ok-on-dark); }

/* ---------- Top bar ---------- */
.bar { position: sticky; top: 0; z-index: 20; background: var(--bg); }
.bar-in { display: flex; align-items: center; gap: clamp(12px, 2.4vw, 32px); min-height: 72px; }
.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); line-height: 1;
}
.brand img { width: 28px; height: 28px; flex: none; }
.bar-links { display: flex; gap: clamp(8px, 2vw, 28px); margin-left: auto; }
.bar-links a {
  display: inline-flex; align-items: center; min-height: 44px; padding-inline: 4px;
  font-weight: 600; text-decoration: none; color: var(--soft);
}
.bar-links a[aria-current="page"] { color: var(--fg); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
@media (hover: hover) { .bar-links a:hover { color: var(--fg); } }
@media (max-width: 479px) {
  .bar-links a[aria-current="page"] { display: none; }
  .brand { font-size: var(--s-body); }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 20px;
  border: 0; border-radius: var(--radius);
  background: var(--fill); color: var(--fg);
  font-family: var(--text); font-weight: 600; font-size: var(--s-body); line-height: 1.1;
  text-decoration: none; text-align: center; cursor: pointer;
  transition: transform 120ms var(--ease);
}
.btn-lamp { background: var(--lamp); color: var(--lamp-ink); }
.bar .btn { flex: none; min-height: 44px; padding: 0 16px; }
@media (hover: hover) {
  .btn:hover { background: var(--fill-hover); }
  .btn-lamp:hover { background: var(--lamp-hover); }
  .deep .bar .btn:not(.btn-lamp):hover { background: var(--step-1); }
}
.btn:active { transform: scale(0.98); }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }

/* ---------- Depth marker (from depthBadge in core.js) ---------- */
.depth { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; white-space: nowrap; }
.depth-bar { display: inline-grid; grid-template-rows: repeat(3, 6px); gap: 2px; width: 12px; flex: none; }
.depth-bar i { background: var(--rule); }
.depth[data-level="1"] .depth-bar i:nth-child(1) { background: var(--d1); }
.depth[data-level="2"] .depth-bar i:nth-child(-n+2) { background: var(--d2); }
.depth[data-level="3"] .depth-bar i { background: var(--d3); }
.depth small { font-size: inherit; font-weight: 400; color: var(--soft); }

/* ---------- Tables ---------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sheet { background: var(--panel); padding: clamp(8px, 1.6vw, 20px) clamp(16px, 2vw, 28px); }
table.data { width: 100%; border-collapse: collapse; }
table.data th { text-align: left; font-weight: 600; color: var(--soft); padding: 12px 16px 12px 0; white-space: nowrap; vertical-align: bottom; }
table.data td { padding: 14px 16px 14px 0; border-top: 2px solid var(--rule); vertical-align: middle; }
table.data th:last-child, table.data td:last-child { padding-right: 0; }
table.data tbody tr:first-child td { border-top-width: 3px; }
table.data .r { text-align: right; }
table.data .empty { color: var(--soft); padding-block: 28px; }
#rules tbody tr:first-child td { border-top: 0; }

/* ---------- Economy: survey sheet ---------- */
.sheet-head {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px 24px; align-items: end;
  padding-top: clamp(32px, 6vw, 96px); padding-bottom: clamp(32px, 5vw, 72px);
}
.sheet-head h1 { grid-column: 1 / span 8; font-size: var(--s-display); line-height: 0.88; }
.sheet-head .lead { grid-column: 9 / -1; max-width: 30ch; }
@media (max-width: 900px) {
  .sheet-head h1, .sheet-head .lead { grid-column: 1 / -1; }
}

/* the first stratum: live totals on sand */
.totals { background: var(--sand); color: var(--sand-ink); }
.totals-in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding-block: clamp(28px, 4vw, 56px); }
.stat { min-width: 0; }
.stat b { display: block; font-family: var(--display); font-weight: 600; font-size: var(--s-head); line-height: 0.95; overflow-wrap: anywhere; }
.stat span { display: block; margin-top: 8px; color: var(--sand-soft); }
@media (max-width: 760px) { .totals-in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; } }

.econ {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(56px, 7vw, 112px) clamp(24px, 3vw, 48px);
  padding-top: clamp(56px, 7vw, 112px); padding-bottom: clamp(64px, 8vw, 128px);
}
.econ > section { min-width: 0; }
.econ-rules { grid-column: 1 / span 5; }
.econ-depths { grid-column: 6 / -1; }
.econ-full { grid-column: 1 / -1; }
.econ h2 { font-size: var(--s-head); margin-bottom: 20px; }
.econ h2 + .note { margin-top: -4px; margin-bottom: 20px; max-width: 62ch; }
@media (max-width: 1000px) { .econ-rules, .econ-depths { grid-column: 1 / -1; } }

/* Depths: the log column. Each row is a band, filled with its depth colour, stacked surface to core. */
#tiers { border-collapse: collapse; }
#tiers tbody td { border-top: 0; padding-block: 18px; }
#tiers tbody td:first-child { width: 34%; padding-left: 16px; color: var(--paper-ink); }
#tiers tbody tr[data-level="1"] td:first-child { background: var(--d1); padding-block: 40px; }
#tiers tbody tr[data-level="2"] td:first-child { background: var(--d2); padding-block: 30px; }
#tiers tbody tr[data-level="3"] td:first-child { background: var(--d3); padding-block: 22px; }
#tiers tbody tr + tr td:not(:first-child) { border-top: 2px solid var(--rule); }
#tiers tbody td:nth-child(2), #tiers th:nth-child(2) { padding-left: 20px; }
#tiers th:first-child { padding-left: 16px; }
#tiers .depth { font-family: var(--display); font-weight: 600; font-size: var(--s-lead); line-height: 1; color: inherit; }
#tiers .depth-bar { display: none; }

@media (max-width: 600px) {
  .sheet { padding-inline: 12px; }
  /* stacked rows instead of wide tables */
  .stackable thead { display: none; }
  .stackable tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; padding: 16px 0; border-top: 2px solid var(--rule); }
  .stackable tbody tr:first-child { border-top: 0; }
  .stackable tbody td, .stackable tbody td.r { border: 0; padding: 0; text-align: left; min-width: 0; overflow-wrap: anywhere; }
  .stackable tbody td:first-child { grid-column: 1 / -1; font-weight: 600; }
  .stackable td[data-label]::before { content: attr(data-label); display: block; color: var(--soft); }
  #rounds tbody td:first-child::before { content: "Round "; display: inline; }
  #rounds tbody tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stackable tbody td.empty { grid-column: 1 / -1; }

  /* depth log keeps its column: band on the left, facts stacked on the right */
  #tiers thead { display: none; }
  #tiers tbody tr { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) minmax(0, 2fr); }
  #tiers tbody td { padding: 12px 0 12px 12px; text-align: left; min-width: 0; overflow-wrap: anywhere; }
  #tiers tbody td:first-child { width: auto; grid-row: span 2; padding-left: 12px; }
  #tiers tbody td:nth-child(2) { grid-column: 2 / -1; padding-left: 12px; }
  #tiers tbody tr + tr td:not(:first-child) { border-top: 0; }
  #tiers tbody tr + tr td:nth-child(2) { border-top: 2px solid var(--rule); }
  #tiers td[data-label]:not(:nth-child(2))::before { content: attr(data-label); display: block; color: var(--soft); }
  #tiers tbody td.empty { grid-column: 1 / -1; grid-row: auto; }
}

/* ---------- Footer: the bottom of the hole ---------- */
.foot { background: var(--basalt); color: var(--basalt-ink); }
.foot-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 40px; padding-block: clamp(32px, 4vw, 56px); }
.foot-links { display: flex; flex-wrap: wrap; gap: 0 28px; }
.foot-links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: none; }
@media (hover: hover) { .foot-links a:hover { text-decoration: underline; text-underline-offset: 5px; } }
.foot-note { color: var(--basalt-soft); max-width: 48ch; }
.foot :focus-visible { outline-color: var(--basalt-ink); }

/* ---------- Login + authorize: deep in the shaft ---------- */
.shaft-main { padding-block: clamp(16px, 3vw, 40px) clamp(32px, 5vw, 64px); }
.panel {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 11fr);
  max-width: 1200px; margin-inline: auto;
  min-height: min(760px, calc(100svh - 72px - 2 * clamp(16px, 3vw, 40px)));
  background: var(--panel);
}
.panel-art { position: relative; overflow: hidden; background: var(--paper); }
.panel-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.panel-body { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: clamp(28px, 5vw, 80px); }
.panel-body h1 { font-size: var(--s-head); max-width: 14ch; }
.panel-body .lead { margin-top: 20px; max-width: 34ch; color: var(--fg); }
@media (max-width: 760px) {
  .panel { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .panel-art { display: none; }
  .panel-body { padding: 28px 20px 32px; }
}

/* wallet picker */
.wallets { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 6px; max-width: 560px; }
.wallets > .note { padding: 12px 0; }
.wallet-btn {
  width: 100%; display: flex; align-items: center; gap: 16px; min-height: 68px; padding: 0 20px;
  background: var(--fill); color: var(--fg); border: 0; border-radius: var(--radius);
  font-weight: 600; font-size: var(--s-body); text-align: left; cursor: pointer;
  transition: transform 120ms var(--ease);
}
@media (hover: hover) { .wallet-btn:hover:not([disabled]) { background: var(--fill-hover); } }
.wallet-btn:active { transform: scale(0.99); }
.wallet-btn[disabled] { cursor: progress; }
.wallet-btn[disabled]:not(.busy) { opacity: 0.55; }
.wallet-btn img, .wallet-btn .wicon { width: 32px; height: 32px; flex: none; }
.wallet-btn .wicon { display: grid; place-items: center; background: var(--basalt); font-family: var(--display); font-weight: 600; font-size: var(--s-body); }
.wallet-btn .go { margin-left: auto; color: var(--soft); font-weight: 500; text-align: right; }
.wallet-btn.busy .go { color: var(--fg); font-weight: 600; }
.login-status { margin-top: 16px; min-height: 1.5em; max-width: 560px; }
.hint { margin-top: 24px; max-width: 560px; color: var(--soft); }
.hint b { color: var(--fg); font-weight: 600; }
.hint + .hint { margin-top: 12px; }

/* authorize */
.code-big {
  margin-top: 32px; display: inline-block; max-width: 100%;
  padding: 14px 20px 10px; background: var(--fill);
  font-family: var(--display); font-weight: 600; font-size: var(--s-head); line-height: 1;
  letter-spacing: 0.04em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.facts { margin: 28px 0 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 28px; max-width: 600px; }
.facts dt { color: var(--soft); }
.facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.warn { margin-top: 28px; max-width: 600px; padding: 20px 22px; background: var(--bad); color: var(--copper-ink); }
.warn b { display: block; margin-bottom: 6px; font-weight: 600; }
.actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }
.panel-body > .note[role="status"] { margin-top: 20px; min-height: 1.5em; }
@media (max-width: 520px) {
  .actions .btn { flex: 1 1 100%; }
  .facts { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .facts dd + dt { margin-top: 10px; }
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .btn, .wallet-btn { transition: none; }
  .btn:active, .wallet-btn:active { transform: none; }
}

/* ---------- economy additions: pictures, entrances, phone fixes ---------- */
.sheet-head h1 { grid-column: 1 / span 7 !important; grid-row: 1; }
.sheet-head .lead { grid-column: 1 / span 6 !important; grid-row: 2; align-self: start !important; }
.head-pic { grid-column: 9 / -1; grid-row: 1 / span 2; margin: 0; align-self: end; justify-self: end; width: min(300px, 100%); background: var(--paper); }
.head-pic img { max-height: 380px; width: auto; margin-left: auto; }
.head-pic img, .econ-pic img { mix-blend-mode: multiply; filter: grayscale(1) contrast(1.45) brightness(1.14); }
.sheet-head .lead { align-self: end; }
.econ-pic { grid-column: 1 / span 7; margin: 0; background: var(--paper); }
.econ-pic img { max-height: 420px; width: auto; }
.econ { row-gap: clamp(72px, 9vw, 128px); }
.totals-in b { white-space: nowrap; font-size: clamp(2rem, 1rem + 3vw, 4rem); }
.js [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity 560ms var(--ease), transform 560ms var(--ease); }
.js [data-reveal].in { opacity: 1; transform: none; }
@media (max-width: 900px) { .sheet-head h1, .sheet-head .lead { grid-column: 1 / -1 !important; } .head-pic { grid-column: 1 / -1; grid-row: auto; justify-self: start; } .head-pic img { max-height: 240px; margin-left: 0; } .econ-pic { grid-column: 1 / -1; } }
@media (max-width: 760px) {
  .bar-links a:not([aria-current]) { display: none; }
  .totals-in b { font-size: var(--s-lead); }
}
@media (max-width: 600px) { #rounds tbody tr:nth-child(n + 7) { display: none; } }
@media (prefers-reduced-motion: reduce) { .js [data-reveal] { transform: none; transition: opacity 200ms linear; } }

.econ-pic-right { grid-column: 6 / -1; justify-self: end; }
.econ-pic-small { grid-column: 1 / span 5; grid-row: 2; align-self: start; }
.econ-pic-small img { max-height: 300px; }
.econ-pic figcaption { margin-top: 8px; font-size: var(--s-small); color: var(--soft, #4f4a40); }
@media (max-width: 1000px) { .totals-in { grid-template-columns: repeat(2, minmax(0, 1fr)); } .econ-pic-small, .econ-pic-right { grid-column: 1 / -1; grid-row: auto; justify-self: start; } }
@media (max-width: 600px) {
  #rounds thead { display: table-header-group; }
  #rounds tbody tr { display: table-row; padding: 0; }
  #rounds tbody td, #rounds tbody td.r { display: table-cell; padding: 12px 8px; border-top: 2px solid var(--rule, #c8c8c1); }
  #rounds tbody td:first-child { font-weight: 600; }
  #rounds td[data-label]::before { content: none; }
  #rounds th:nth-child(2), #rounds td:nth-child(2), #rounds th:nth-child(4), #rounds td:nth-child(4), #rounds th:nth-child(5), #rounds td:nth-child(5) { display: none; }
}
@media (max-width: 600px) {
  #earn thead { display: table-header-group; }
  #earn tbody tr { display: table-row; padding: 0; }
  #earn tbody td, #earn tbody td.r { display: table-cell; padding: 12px 8px; border-top: 2px solid var(--rule, #c8c8c1); }
  #earn td[data-label]::before { content: none; }
  #earn tbody td.r { text-align: right; }
  #earn th:nth-child(2), #earn td:nth-child(2), #earn th:nth-child(3), #earn td:nth-child(3) { display: none; }
}
/* On phones the tables sit straight on the paper: no stack of identical filled panels. */
@media (max-width: 600px) { .econ .sheet { background: transparent; padding: 0; } }

/* ---------- Economy: "Where the ore came from" payout cross-section (#ore) ----------
   One row per depth. Shaft column (basalt, lamp cage on the current depth) | band in the depth colour,
   min-height proportional to its share of the draw, holding a darker bar = SHAFT paid there | facts on the panel.
   Text never sits on --d3: names on the bands are >=24px (large text), figures sit on --step-2 beside the band.
   Bar steps are >=3:1 against their band: #5c4622 on d1, #2a1608 on d2, #3a0f07 on d3. */
.ore { --ore-h: clamp(400px, 40vw, 580px); padding-top: clamp(56px, 7vw, 112px); }
.ore h2 { font-size: var(--s-head); margin-bottom: 20px; }
.ore h2 + .note { margin-top: -4px; margin-bottom: 24px; max-width: 62ch; }
.ore-chart { list-style: none; margin: 0; padding: 0; background: var(--panel); }
.ore-row {
  display: grid; grid-template-columns: 28px minmax(0, 3fr) minmax(0, 2fr);
  --ore-ink: var(--copper-ink); --ore-step: #2a1608; --ore-fill: var(--d2);
}
.ore-row[data-level="1"] { --ore-ink: var(--paper-ink); --ore-step: #5c4622; --ore-fill: var(--d1); }
.ore-row[data-level="3"] { --ore-step: #3a0f07; --ore-fill: var(--d3); }
.ore-row + .ore-row .ore-facts { border-top: 2px solid var(--rule); }

.ore-shaft { position: relative; background: var(--basalt); }
.ore-cage {
  display: none; position: absolute; left: 50%; top: 50%;
  width: 14px; height: 14px; margin: -7px 0 0 -7px; background: var(--lamp);
}
.ore-current .ore-cage { display: block; }

.ore-band {
  display: flex; flex-direction: column; justify-content: center; gap: 10px;
  min-height: calc(var(--ore-share, 0.3333) * var(--ore-h));
  padding: 12px clamp(14px, 2vw, 28px);
  background: var(--ore-fill); color: var(--ore-ink);
}
.ore-name { font-family: var(--display); font-weight: 600; font-size: max(1.5rem, var(--s-lead)); line-height: 1; }
.ore-track { display: block; height: clamp(14px, 1.6vw, 22px); }
.ore-bar {
  display: block; height: 100%; background: var(--ore-step);
  transform: scaleX(var(--ore-v, 0)); transform-origin: left center;
}
.ore-grow .ore-bar { transition: transform 500ms var(--ease); }

.ore-facts { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; padding: 14px clamp(14px, 2vw, 28px); }
.ore-num { font-family: var(--display); font-weight: 600; font-size: var(--s-lead); line-height: 1; font-variant-numeric: tabular-nums; }
.ore-line { color: var(--soft); overflow-wrap: anywhere; }
.ore-here { font-weight: 600; }

@media (max-width: 600px) {
  .ore-row { grid-template-columns: 20px minmax(0, 1fr); }
  .ore-shaft { grid-row: 1 / span 2; }
  .ore-facts { grid-column: 2; padding: 12px 12px 16px; }
  .ore-row + .ore-row .ore-facts { border-top: 0; }
  .ore-band { padding-inline: 12px; }
  .ore-cage { width: 12px; height: 12px; margin: -6px 0 0 -6px; }
}
@media (prefers-reduced-motion: reduce) { .ore-grow .ore-bar { transition: none; } }

/* band names always sit on a light chip so they read on every band colour */
.ore-name { background: var(--step-2); color: var(--paper-ink) !important; padding: 2px 8px; align-self: flex-start; }
#tiers .depth { background: var(--step-2); color: var(--paper-ink) !important; padding: 4px 8px; }