/* The mine page: board, round, deploy, ledger, feed. Tokens and generic components live in mine.css. */

/* ---------- hero row ---------- */
.hero { padding-block: 64px 40px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; }
.hero h1 { max-width: 12ch; margin-top: 18px; }
.hero .lead { max-width: 46ch; margin-top: 18px; }
.hero-ctas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
.hero .flex { gap: 16px; }
@media (max-width: 1023px) { .hero-grid { grid-template-columns: 1fr; } .hero { padding-top: 40px; } }
/* phones: the nav keeps brand + menu; round status and the simulation qualifier move into the hero row */
.hero-sim { display: none; }
@media (max-width: 640px) {
  .nav #nav-status, .nav [data-sim] { display: none !important; }
  .hero-sim { display: inline-flex; }
  .hero .flex { gap: 10px; }
}

/* ---------- board ---------- */
.mine-grid { align-items: start; }
.board-card { padding: 0; min-height: 520px; aspect-ratio: 16 / 11; background: #040405; }
.board-card canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.board-tags { position: absolute; inset: 0; pointer-events: none; }
.board-head { position: absolute; left: 24px; right: 24px; top: 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px; z-index: 2; pointer-events: none; }
.board-head > * { pointer-events: auto; }
.board-legend { position: absolute; left: 24px; bottom: 18px; display: flex; gap: 14px; flex-wrap: wrap; z-index: 2; font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); }
.board-legend span { display: inline-flex; align-items: center; gap: 6px; }
.board-legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.board-legend .solo i { background: var(--violet); }
.board-legend .shared i { background: var(--mint); }
.board-legend .mine i { background: var(--text); }
.board-legend .win i { background: var(--lime); }
.sector-tag {
  position: absolute; left: 0; top: 0; pointer-events: auto; cursor: pointer;
  display: inline-grid; grid-template-columns: auto auto; gap: 0 6px; align-items: center;
  height: 26px; padding: 0 9px 0 8px; border: 0; border-radius: var(--r-full);
  background: rgba(0, 0, 0, 0.8); color: var(--text); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em; white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
  will-change: transform;
}
.sector-tag .n { color: var(--text-muted); font-size: 10px; letter-spacing: 0.08em; }
.sector-tag .n::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; background: var(--mint); }
.sector-tag.is-solo .n::before { background: var(--violet); }
.sector-tag .v { font-variant-numeric: tabular-nums; }
.sector-tag .m { grid-column: 1 / -1; font-size: 10px; color: var(--mint); letter-spacing: 0.04em; }
.sector-tag .m:empty { display: none; }
.sector-tag.is-mine { height: auto; padding-block: 3px; }
.sector-tag.is-empty .v { display: none; }
.sector-tag.is-empty { opacity: 0.92; }
.sector-tag:hover { background: rgba(0, 0, 0, 0.85); opacity: 1; }
.sector-tag.is-selected { background: var(--text); color: var(--ink); opacity: 1; }
.sector-tag.is-selected .n, .sector-tag.is-selected .m { color: var(--ink-faint); }
.sector-tag.is-selected .n::before { background: var(--ink); }
.sector-tag.is-win { background: var(--lime); color: var(--ink); opacity: 1; }
.sector-tag.is-win .n, .sector-tag.is-win .m { color: var(--ink-muted); }
.sector-tag.is-win .n::before { background: var(--ink); }
.sector-tag:disabled { cursor: not-allowed; }
.board-fallback { position: absolute; inset: 72px 24px 56px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.sector-tag--flat { position: static; height: auto; min-height: 56px; border-radius: var(--r-md); background: var(--surface-2); justify-items: start; align-content: center; padding: 8px 10px; }
.board-card.no-gl canvas { display: none; }
@media (max-width: 767px) { .board-card { min-height: 0; aspect-ratio: 1 / 1.05; } .board-head { left: 16px; right: 16px; top: 14px; } .board-legend { left: 16px; bottom: 12px; gap: 10px; } .sector-tag { height: 22px; font-size: 10px; padding: 0 7px 0 6px; } .sector-tag .n { font-size: 9px; } }

/* ---------- side column ---------- */
.side { display: grid; gap: var(--card-gap); align-content: start; }
.round-top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; }
.clock { position: relative; width: 112px; height: 112px; }
.clock svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.clock circle { fill: none; stroke-width: 6; stroke-linecap: round; }
.clock .track { stroke: var(--surface-3); }
.clock .arc { stroke: var(--mint); transition: stroke-dashoffset 1s linear, stroke var(--dur-base); }
.clock.is-last .arc { stroke: var(--coral); }
.clock.is-sealed .arc { stroke: var(--violet); }
.clock.is-pending .arc { stroke: var(--text-ghost); }
.clock-face { position: absolute; inset: 0; display: grid; place-items: center; }
.clock-face b { font-family: var(--font-mono); font-weight: 500; font-size: 22px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.round-state { display: grid; gap: 6px; }
.round-state .pill { justify-self: start; }
.round-state p { font-size: var(--fs-sm); color: var(--text-muted); }

.deploy-card .picked { display: flex; flex-wrap: wrap; gap: 6px; min-height: 32px; }
.deploy-card .picked .pill { height: 28px; padding: 0 10px; cursor: pointer; }
.deploy-card .picked .pill:hover { background: var(--line-hover); }
.deploy-card .picked .none { font-size: var(--fs-sm); color: var(--text-faint); align-self: center; }
.deploy-card .total, .stake-form .total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: var(--fs-sm); color: var(--text-faint); }
.deploy-card .total b, .stake-form .total b { font-family: var(--font-mono); font-weight: 500; font-size: 18px; color: var(--text); }
.deploy-card .btn--block { width: 100%; }
.deploy-note { font-size: var(--fs-xs); color: var(--text-faint); min-height: 18px; }
.deploy-note.is-warn { color: var(--warn); }

/* ---------- ledger (mint fill) ---------- */
.ledger .numeral { margin-top: 2px; }
.ledger .kv > div { border-color: var(--line-paper); }
.ledger-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.ledger-actions .btn { flex: 1 1 120px; }
.ledger .btn--ink[disabled] { opacity: 0.35; }
.ledger .waiting { margin-top: 14px; }

/* ---------- stats, feed, history ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--card-gap); }
.stats .card { padding: 20px 22px; }
@media (max-width: 1023px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.feed .row { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.feed .who { font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); }
.feed .who.is-you { color: var(--mint); }
.feed .what { color: var(--text-muted); }
.feed .amt { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.feed .t { font-family: var(--font-mono); font-size: 11px; color: var(--text-ghost); }
.feed .row.is-resolve { background: var(--surface-3); }
.feed .row.is-strike { background: var(--lime); color: var(--ink); }
.feed .row.is-strike .what, .feed .row.is-strike .who, .feed .row.is-strike .t { color: var(--ink-muted); }
.hist .row { grid-template-columns: 56px minmax(0, 1fr) auto; }
.hist .id { font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); }
.hist .ore { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.hist .row.is-strike { background: var(--lime); color: var(--ink); }
.hist .row.is-strike .id, .hist .row.is-strike .muted { color: var(--ink-muted); }
.empty { padding: 24px 0; text-align: center; font-size: var(--fs-sm); color: var(--text-faint); }

/* ---------- result banner ---------- */
.banner { position: fixed; left: 50%; bottom: 24px; z-index: 60; transform: translate(-50%, 24px); opacity: 0; width: min(560px, calc(100vw - 32px)); padding: 18px 22px; border-radius: var(--r-lg); background: var(--surface-2); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; transition: opacity 300ms var(--ease), transform 500ms var(--ease); pointer-events: none; }
.banner.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.banner.is-strike { background: var(--lime); color: var(--ink); }
.banner.is-win { background: var(--mint); color: var(--ink); }
.banner.is-err { background: var(--coral); color: var(--ink); }
.banner h4 { font-size: 18px; }
.banner p { font-size: var(--fs-sm); color: var(--text-muted); }
.banner.is-strike p, .banner.is-win p, .banner.is-err p { color: var(--ink-muted); }
.banner .btn--icon { background: rgba(0, 0, 0, 0.12); color: inherit; }

/* ---------- proofs (the paper block) ---------- */
.proofs .kv dd { font-family: var(--font-mono); font-size: 13px; max-width: 62%; }
.proofs .panel { margin-top: 16px; }
.proofs .panel + .panel { margin-top: 12px; }
.proofs .pending { color: var(--ink-faint); }

/* ---------- learn / rounds pages ---------- */
.prose { max-width: 68ch; }
.prose p + p { margin-top: 14px; }
.prose h3 { margin: 40px 0 14px; }
.rules .card p { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 10px; }
.rules .card .numeral { font-size: 40px; }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table th { text-align: left; font-weight: 500; font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--text-faint); padding: 0 12px 12px 0; }
.table td { padding: 12px 12px 12px 0; border-top: 1px solid var(--line); vertical-align: top; }
.table td.mono { font-family: var(--font-mono); font-size: 13px; }

/* ---------- rounds page ---------- */
.hist--wide .row { grid-template-columns: 64px minmax(0, 1fr) auto 150px; }
.hist--wide .fee { font-family: var(--font-mono); font-size: 12px; text-align: right; }
.hist .row.is-won { background: var(--surface-3); }
.hist .row.is-strike .fee { color: var(--ink-muted); }
.heat { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.heat-cell { position: relative; aspect-ratio: 1; border-radius: var(--r-md); background: var(--surface-2); display: grid; align-content: space-between; padding: 8px; overflow: hidden; font-family: var(--font-mono); }
.heat-cell::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--k) * 100%); background: var(--surface-3); }
.heat-cell.is-top { background: var(--mint); color: var(--ink); }
.heat-cell.is-top::before { display: none; }
.heat-cell span { position: relative; font-size: 10px; letter-spacing: 0.08em; color: var(--text-faint); }
.heat-cell.is-top span { color: var(--ink-faint); }
.heat-cell b { position: relative; font-weight: 500; font-size: 16px; }
@media (max-width: 767px) { .hist--wide .row { grid-template-columns: 44px minmax(0, 1fr) auto; } .hist--wide .fee { grid-column: 2 / -1; text-align: left; } }

/* ---------- deploy modes + autominer ---------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.seg--wrap { flex-wrap: wrap; border-radius: var(--r-lg); }
.deploy-card .card-head .seg button { height: 30px; }
#mode-manual .picked { flex: 1 1 auto; }
#auto-live .ledger-actions { margin-top: 18px; }
.pill--stopped::before { background: var(--coral); }

/* ---------- stake page ---------- */
.stake-form .btn--block { width: 100%; }
.stake-form .hint { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-xs); color: var(--text-faint); }
.stake-form .hint button { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: var(--mint); }
.flow { display: grid; gap: 10px; }
.flow .row { grid-template-columns: minmax(0, 1fr) auto; }
.flow .row b { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; }
.share { height: 10px; border-radius: var(--r-full); background: rgba(11, 11, 12, .12); overflow: hidden; display: flex; margin-top: 18px; }
.share i { display: block; height: 100%; background: var(--ink); }
.share i + i { background: rgba(11, 11, 12, .55); }
.share i + i + i { background: rgba(11, 11, 12, .3); }

/* ---------- mine page columns ---------- */
.main-col { gap: var(--card-gap); align-content: start; }
.main-col > .grid { align-items: start; }
.stats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.side .feed .rows { max-height: 420px; overflow: hidden; }
.feed .row { grid-template-columns: auto minmax(0, 1fr) auto; }
.feed .row .t { display: none; }
/* tablets and phones: one column, and the round and deploy cards follow the board directly */
@media (max-width: 1023px) {
  .main-col { display: contents; }
  .main-col > .board-card, .main-col > .grid, .side { grid-column: 1 / -1; }
  .main-col > .board-card { order: 1; }
  .side { order: 2; }
  .main-col > .grid { order: 3; }
}