/* Flash Bonsai.
 *
 * The tokens and components below are lifted from the firmware's own setup
 * page (src/firmware/bonsai-firmware/bonsai-setup.html) so that flashing a
 * board and setting it up afterwards look like one product. Keep them in step
 * when that page changes.
 *
 * Light only, like the setup page: no dark palette is defined there, and a
 * second one invented here would drift from it.
 */

:root{
  --bg:#fbfbfa;
  --surface:#ffffff;
  --line:#e7e5e1;
  --line-soft:#f0efec;
  --text:#15181c;
  --text-dim:#767b83;
  --text-faint:#a3a7ad;
  --pale-blue:#eaf1ff;
  --ink-blue:#2f5fc4;
  --accent:#4d7ff2;
  --pale-yellow:#fbf3db;
  --ink-yellow:#7a5200;
  --pale-red:#fdebec;
  --ink-red:#9f2f2d;
  --pale-green:#edf3ec;
  --ink-green:#346538;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; color-scheme:light; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  font-size:15px;
  line-height:1.55;
  min-height:100vh;
}

/* ============ SHELL ============ */
.shell{ max-width:1080px; margin:0 auto; padding:22px 20px 56px; }

.topbar{
  display:flex; align-items:center; gap:14px;
  padding-bottom:20px; border-bottom:1px solid var(--line); margin-bottom:28px;
}
.logo{ height:24px; width:auto; display:block; }
.topbar-page{ font-size:13.5px; color:var(--text-dim); }
.topbar .spacer{ flex:1; }
.topbar a{ font-size:13.5px; color:var(--text-dim); text-decoration:none; }
.topbar a:hover{ color:var(--text); }

.layout{ display:block; }

/* ============ STEP RAIL (desktop) ============ */
.rail{ display:none; }
.rail ol{ list-style:none; margin:0; padding:0; }
.rail li{
  display:flex; gap:12px; align-items:flex-start; padding:11px 0;
  color:var(--text-faint); font-size:13.5px; line-height:1.4;
}
.rail .num{
  font-size:12px; font-variant-numeric:tabular-nums; letter-spacing:.01em;
  width:20px; flex-shrink:0; padding-top:1px;
}
.rail li.done{ color:var(--text-dim); }
.rail li.current{ color:var(--text); font-weight:600; }
.rail li.current .num{ color:var(--accent); }
.rail li.done .num::before{ content:"\2713"; }
.rail li.done .num span{ display:none; }

/* ============ MOBILE PROGRESS ============ */
.mprog{ margin-bottom:26px; }
.mprog-track{ display:flex; gap:5px; margin-bottom:9px; }
.mprog-track i{
  flex:1; height:3px; border-radius:2px; background:var(--line);
  transition:background .3s ease;
}
.mprog-track i.on{ background:var(--text); }
.mprog-meta{
  display:flex; justify-content:space-between;
  font-size:12.5px; color:var(--text-dim); font-variant-numeric:tabular-nums;
}
.mprog-meta b{ color:var(--text); font-weight:600; }

/* ============ PANEL ============ */
.panel{ min-width:0; }
.step{ display:none; }
.step.active{ display:block; animation:fade .35s cubic-bezier(.16,1,.3,1); }
@keyframes fade{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }
@media (prefers-reduced-motion: reduce){ .step.active{ animation:none; } }

h1{ font-size:26px; line-height:1.25; font-weight:600; letter-spacing:-.015em; margin:0 0 10px; }
h2{ font-size:15px; font-weight:600; margin:26px 0 12px; letter-spacing:-.005em; }
p.sub{ color:var(--text-dim); font-size:14.5px; margin:0 0 28px; max-width:56ch; }

/* ============ CONTROLS ============ */
.btn{
  appearance:none; border:1px solid transparent; border-radius:8px;
  padding:12px 20px; font-size:14.5px; font-weight:600;
  font-family:inherit; cursor:pointer; white-space:nowrap;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:active{ transform:scale(.985); }
.btn-primary{ background:var(--text); color:#fff; }
.btn-primary:hover:not(:disabled){ background:#33383f; }
.btn-primary:disabled{ background:var(--line); color:var(--text-faint); cursor:not-allowed; }
.btn-secondary{ background:transparent; border-color:var(--line); color:var(--text); }
.btn-secondary:hover:not(:disabled){ border-color:#cfcdc8; }
.btn-secondary:disabled{ color:var(--text-faint); cursor:not-allowed; }
.btn-quiet{ background:transparent; color:var(--text-dim); border:none; padding:12px 4px; }
.btn-quiet:hover:not(:disabled){ color:var(--text); }
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.actions{
  display:flex; gap:10px; align-items:center;
  margin-top:30px; padding-top:22px; border-top:1px solid var(--line);
}
.actions .spacer{ flex:1; }
.actions .btn-primary{ min-width:150px; }

@media(max-width:619px){
  .actions{ display:grid; gap:9px; margin-top:26px; padding-top:20px; }
  .actions .spacer{ display:none; }
  .actions .btn{ width:100%; padding:14px 18px; }
  .actions .btn-primary{ order:1; min-width:0; }
  .actions .btn-secondary{ order:2; }
  .actions .btn-quiet{ order:3; padding:8px; margin-top:2px; }
}

/* ============ RELEASE CARDS ============ */
.opts{ display:grid; gap:9px; margin-bottom:4px; }
.opt{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  background:var(--surface); border:1px solid var(--line);
  border-radius:10px; padding:14px 16px; cursor:pointer;
  font-family:inherit; font-size:inherit; color:inherit;
  transition:border-color .15s ease, background .15s ease;
}
.opt:hover{ border-color:#cfcdc8; }
.opt.sel{ border-color:var(--accent); background:var(--pale-blue); }
.opt:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.opt .radio{
  width:16px; height:16px; border-radius:50%;
  border:1.5px solid #c6c4bf; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.opt.sel .radio{ border-color:var(--accent); }
.opt.sel .radio::after{ content:""; width:8px; height:8px; border-radius:50%; background:var(--accent); }
.opt-body{ min-width:0; flex:1; }
.opt-name, .opt-meta{ display:block; }
.opt-name{ font-size:14.5px; font-weight:500; }
.opt-meta{ font-family:var(--mono); font-size:11px; color:var(--text-dim); }

.tag{ display:inline-block; font-size:11.5px; font-weight:500; padding:3px 9px; border-radius:999px; }
.tag-blue{ background:var(--pale-blue); color:var(--ink-blue); }
.tag-green{ background:var(--pale-green); color:var(--ink-green); }

/* ============ NOTES ============ */
.tip{
  background:var(--pale-yellow); border-radius:10px; padding:15px 17px;
  margin-bottom:22px; font-size:13.5px; line-height:1.55; color:var(--ink-yellow);
}
.tip b{ display:block; font-size:13px; margin-bottom:3px; font-weight:600; }
.tip p{ margin:0; color:#8a6210; }

.errbox{
  background:var(--pale-red); color:var(--ink-red);
  border-radius:8px; padding:11px 14px; font-size:13.5px;
  margin-bottom:18px; display:none;
}
.errbox.show{ display:block; }

/* ============ SUMMARY ROWS ============ */
.summary{
  border:1px solid var(--line); border-radius:10px;
  background:var(--surface); overflow:hidden; margin-bottom:22px;
}
.srow{
  display:flex; gap:14px; padding:14px 16px;
  border-bottom:1px solid var(--line-soft); font-size:14px; align-items:flex-start;
}
.srow:last-child{ border-bottom:none; }
.srow .k{ width:104px; flex-shrink:0; color:var(--text-dim); font-size:12.5px; padding-top:1px; }
.srow .v{ flex:1; min-width:0; word-break:break-word; }
.srow .v .mono, .srow .mono{ font-family:var(--mono); font-size:13px; }
.srow .size{ color:var(--text-dim); font-size:12.5px; font-variant-numeric:tabular-nums; }

/* ============ PROGRESS AND LOG ============ */
.progress{ margin-bottom:20px; }
.bar{ height:4px; border-radius:2px; background:var(--line); overflow:hidden; }
.bar span{ display:block; height:100%; width:0; background:var(--text); transition:width .2s ease; }
.progress-label{
  margin:9px 0 0; font-size:12.5px; color:var(--text-dim);
  font-variant-numeric:tabular-nums;
}

.logbox{ margin-bottom:4px; }
.logbox summary{
  font-size:13px; color:var(--text-dim); cursor:pointer; padding:4px 0;
  list-style:none;
}
.logbox summary::-webkit-details-marker{ display:none; }
.logbox summary::before{ content:"+\00a0"; }
.logbox[open] summary::before{ content:"\2212\00a0"; }
.logbox summary:hover{ color:var(--text); }
.logbox pre{
  margin:8px 0 0; padding:13px 15px; max-height:220px; overflow:auto;
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  font-family:var(--mono); font-size:12px; line-height:1.5; color:var(--text-dim);
  white-space:pre-wrap; overflow-wrap:anywhere;
}

/* ============ FINAL STATE ============ */
.center{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:14px; padding:34px 0 10px;
}
.badge{ width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.badge.ok{ background:var(--pale-green); color:var(--ink-green); }
.badge.err{ background:var(--pale-red); color:var(--ink-red); }
.badge svg{ width:21px; height:21px; }
.center .t{ font-weight:600; font-size:16px; }
.center .d{ color:var(--text-dim); font-size:14px; max-width:44ch; }

/* ============ FOOT ============ */
.foot{
  margin:40px 0 0; padding-top:20px; border-top:1px solid var(--line);
  font-size:12.5px; color:var(--text-dim); max-width:66ch;
}
.foot a{ color:var(--text-dim); }
.foot a:hover{ color:var(--text); }

/* ============ DESKTOP LAYOUT ============ */
@media(min-width:860px){
  .shell{ padding:30px 32px 72px; }
  .topbar{ margin-bottom:40px; }
  .logo{ height:27px; }
  .layout{ display:grid; grid-template-columns:216px 1fr; gap:56px; align-items:start; }
  .rail{ display:block; position:sticky; top:30px; }
  .mprog{ display:none; }
  .panel{ max-width:640px; }
  h1{ font-size:30px; }
  .foot{ margin-left:272px; }
}