/* DashLog Installer.
 *
 * Tokens and typography are journey1's, kept deliberately: the serif display
 * face, the generous whitespace and the one-thing-per-screen rhythm are what
 * make an irreversible act feel considered rather than transactional. Two
 * choices in here are load-bearing and should not be "tidied":
 *
 *   --final is near-black, not red. The permanent step is signalled with
 *   WEIGHT, not alarm. Red reads as "error"; this is not an error, it is a
 *   decision, and it deserves gravity rather than panic.
 *
 *   The panic strip is fixed to the viewport. Its whole value is being
 *   readable without scrolling at the moment someone is deciding whether to
 *   pull a cable.
 */

:root{
  --bg:#fafbfb; --bg-sunken:#f0f3f4;
  --fg:#10171c; --fg-2:#3f4c54; --fg-3:#5f6c74;
  --rule:#dce2e4; --rule-strong:#c3ccd0; --control:#848f94;
  --accent:#0b5f6b; --accent-hover:#094c56; --accent-fg:#fff; --accent-soft:#e4eff0;
  --final:#10171c; --final-hover:#000; --final-fg:#fff;
  --caution:#8a5a00; --ok:#1c6b46; --bad:#8c2f26;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Mono","SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0e1417; --bg-sunken:#151d21;
    --fg:#e8eef0; --fg-2:#b3c0c6; --fg-3:#8d9aa1;
    --rule:#253036; --rule-strong:#35434a; --control:#7d8d95;
    --accent:#4fc0cf; --accent-hover:#74d3e0; --accent-fg:#06181c; --accent-soft:#14282d;
    --final:#e8eef0; --final-hover:#fff; --final-fg:#06181c;
    --caution:#e0a83c; --ok:#5fc48f; --bad:#f0857a;
  }
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--fg);
  font:16px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;
  padding-bottom:5.5rem;            /* room for the fixed panic strip */
}

.bar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.1rem 2rem; border-bottom:1px solid var(--rule);
}
.wordmark{font-size:.75rem; letter-spacing:.14em; color:var(--fg-3)}
.wordmark b{color:var(--fg); font-weight:700}
.bar-right{font-size:.72rem; color:var(--fg-3)}

main{max-width:40rem; margin:0 auto; padding:3.5rem 2rem 2rem}
.screen[hidden]{display:none}

h1{
  font:400 2.6rem/1.15 var(--serif);
  letter-spacing:-.015em; margin:.4rem 0 1.1rem;
}
.lede{font-size:1.05rem; color:var(--fg-2); margin:0 0 .8rem; max-width:34rem}
.muted{color:var(--fg-3); margin:0 0 .8rem; max-width:34rem; font-size:.95rem}
.aside{color:var(--fg-3); font-size:.85rem}
.mono{font-family:var(--mono)}
.versions{font-size:1.25rem; margin:0 0 .6rem; letter-spacing:-.01em}

/* THE EVIDENCE STRIP. Every conclusion sits under what was actually read, so
   an inference is never asserted without its input on screen. If the page has
   the wrong board, the wrong name is visible BEFORE the button is. */
.strip{
  font-size:.75rem; letter-spacing:.02em; color:var(--fg-3);
  margin:0 0 .3rem; display:flex; gap:.55rem; flex-wrap:wrap;
}
.strip b{color:var(--fg-2); font-weight:600}
.strip span:not(:last-child)::after{content:" ·"; color:var(--rule-strong)}

.actions{display:flex; gap:1rem; align-items:center; flex-wrap:wrap; margin:1.6rem 0 0}

button{font:inherit; cursor:pointer; border-radius:3px; padding:.7rem 1.4rem;
       border:1px solid transparent; transition:background 160ms, border-color 160ms}
button:disabled{opacity:.45; cursor:not-allowed}
button:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.primary{background:var(--accent); color:var(--accent-fg); font-weight:600}
.primary:hover:not(:disabled){background:var(--accent-hover)}
.ghost{background:transparent; color:var(--fg-2); border-color:var(--control)}
.ghost:hover:not(:disabled){border-color:var(--fg-2)}
.final{background:var(--final); color:var(--final-fg); font-weight:600}
.final:hover:not(:disabled){background:var(--final-hover)}
.link{background:none; border:none; padding:0; color:var(--accent);
      text-decoration:underline; text-underline-offset:3px; font-size:.95rem}

.offer{margin-top:2.2rem; padding-top:1.2rem; border-top:1px solid var(--rule)}

/* board picker — shape first, because that is what the person can SEE */
.choices{display:grid; gap:.6rem; margin-top:1.4rem}
.choice{
  text-align:left; width:100%; padding:.85rem 1rem; line-height:1.4;
  background:transparent; border:1px solid var(--rule-strong); color:var(--fg);
}
.choice:hover{border-color:var(--control)}
.choice[aria-pressed="true"]{border-color:var(--accent); background:var(--accent-soft)}
.choice{display:flex; gap:1.1rem; align-items:center}
.choice .shape{display:block; font-weight:600}
.choice .id{display:block; font-size:.82rem; color:var(--fg-3); margin-top:.15rem}
/* Fixed box so every outline is drawn to the SAME scale and the relative
   sizes mean something. currentColor so the art picks up the selected state
   with the text rather than needing its own rule. */
.choice .art{width:72px; height:44px; flex:none; display:grid; place-items:center; color:var(--fg-3)}
.choice[aria-pressed="true"] .art{color:var(--accent)}

/* the permanent-step fact table */
.facts{
  display:grid; grid-template-columns:auto 1fr; gap:.55rem 1.6rem;
  margin:1.8rem 0; padding:1.2rem 0; border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule); font-size:.92rem;
}
.facts dt{color:var(--fg-3)}
.facts dd{margin:0; font-family:var(--mono); font-size:.85rem}
.facts dd.no{color:var(--caution); font-weight:600}

.notready{
  border-left:3px solid var(--caution); padding:.7rem 1rem; margin:1.4rem 0;
  background:var(--bg-sunken); font-size:.9rem; color:var(--fg-2);
}
.notready b{display:block; color:var(--caution)}

/* Typed confirmation, in front of the checkbox. Two deliberate acts, not one:
   typing a word cannot be done by a mis-aimed click. */
.typed{display:flex; gap:.7rem; align-items:center; margin:1.8rem 0 .3rem; font-size:.95rem}
.typed b{font-family:var(--mono); letter-spacing:.05em}
.typed input{
  font:inherit; font-family:var(--mono); text-transform:uppercase;
  width:8rem; padding:.45rem .6rem; border-radius:3px;
  border:1px solid var(--control); background:var(--bg); color:var(--fg);
}
.typed input:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.typed input[data-ok="yes"]{border-color:var(--ok); color:var(--ok)}

.consent{display:flex; gap:.6rem; align-items:flex-start; margin:1.1rem 0 0; font-size:.95rem}
.consent input{margin-top:.3rem}
.consent:has(input:disabled){opacity:.45}

.track{height:4px; background:var(--bg-sunken); border-radius:2px; overflow:hidden; margin:1.4rem 0 .4rem}
.fill{height:100%; width:0; background:var(--accent); transition:width 120ms linear}

/* disclosures: "what gets written" and "how this was worked out" */
details{border-top:1px solid var(--rule); margin-top:.2rem}
summary{
  cursor:pointer; padding:.85rem 0; font-size:.88rem; color:var(--fg-2);
  list-style:none; display:flex; align-items:center; gap:.5rem;
}
summary::-webkit-details-marker{display:none}
summary::before{content:"›"; color:var(--fg-3); transition:transform 160ms}
details[open] summary::before{transform:rotate(90deg)}
details .body{padding:0 0 1.2rem}
.disclose{margin-top:2.4rem}

/* the write ledger, with live per-region state */
.ledger{width:100%; border-collapse:collapse; font-size:.85rem}
.ledger td{padding:.55rem .8rem .55rem 0; border-bottom:1px solid var(--rule); vertical-align:top}
.ledger tr:last-child td{border-bottom:none}
.ledger .what{font-weight:600}
.ledger .why{display:block; font-weight:400; color:var(--fg-3); font-size:.8rem; margin-top:.1rem}
.ledger .addr,.ledger .size{font-family:var(--mono); font-size:.78rem; color:var(--fg-3); white-space:nowrap}
.ledger .size{text-align:right}
.ledger .st{font-family:var(--mono); font-size:.72rem; white-space:nowrap; color:var(--fg-3)}
.ledger tr[data-s="active"] .st{color:var(--caution)}
.ledger tr[data-s="done"] .st{color:var(--ok)}
.ledger tr[data-s="failed"] .st{color:var(--bad)}
/* what is deliberately NOT written, shown rather than merely promised */
.ledger tr.untouched td{color:var(--fg-3)}
.ledger tr.untouched .addr{border-left:2px dashed var(--rule-strong); padding-left:.6rem}

.trace{font-family:var(--mono); font-size:.8rem; color:var(--fg-2); margin:0; line-height:1.9}
.trace .concl{color:var(--fg); display:block; margin-top:.6rem}

/* fixed, because its value is being readable without scrolling at the exact
   moment someone is deciding whether to pull the cable */
.panic{
  position:fixed; left:0; right:0; bottom:0; z-index:20;
  display:flex; gap:1rem; align-items:baseline; flex-wrap:wrap;
  padding:.9rem 2rem; border-top:1px solid var(--rule);
  background:var(--bg); font-size:.9rem;
}
.panic .q{font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; color:var(--fg-3); white-space:nowrap}
.panic[data-tone="safe"] .a{color:var(--ok)}
.panic[data-tone="hold"] .a{color:var(--bad); font-weight:600}
.panic[data-tone="halfway"] .a{color:var(--caution); font-weight:600}

@media (max-width:38rem){
  main{padding:2rem 1.2rem}
  h1{font-size:2rem}
  .bar,.panic{padding-left:1.2rem; padding-right:1.2rem}
}