/* Rust "Forged" (SPEC 7.6). Steel and machined plates, graphite actions, rust only on the mark
   and the focus ring, rustc's own colours in the diagnostics. Scale 12 14 16 18 28; space 4 8 12
   16 24 32; radius 3. */

@font-face { font-family: "Fira Sans"; font-weight: 400; font-display: swap; src: url("fonts/FiraSans-400.woff2") format("woff2"); }
@font-face { font-family: "Fira Sans"; font-weight: 500; font-display: swap; src: url("fonts/FiraSans-500.woff2") format("woff2"); }
@font-face { font-family: "Fira Mono"; font-weight: 400; font-display: swap; src: url("fonts/FiraMono-400.woff2") format("woff2"); }
@font-face { font-family: "Fira Mono"; font-weight: 500; font-display: swap; src: url("fonts/FiraMono-500.woff2") format("woff2"); }
@font-face { font-family: "Alfa Slab One"; font-weight: 400; font-display: swap; src: url("fonts/AlfaSlabOne-400.woff2") format("woff2"); }

:root {
  --steel: #EDEFF2; --plate: #FFFFFF; --ink: #16181D; --muted: #57606A; --rule: #6E7781;
  --hairline: #D0D7DE; --highlight: #FFFFFF;
  --act: #16181D; --act-ink: #FFFFFF; --rust: #B7410E;
  --d-error: #CF222E; --d-gutter: #0969DA; --d-help: #0E7490; --d-note: #1A7F37; --d-warn: #9A6700;
  --sans: "Fira Sans", system-ui, sans-serif; --mono: "Fira Mono", ui-monospace, monospace;
  --slab: "Alfa Slab One", "Fira Sans", serif;
  --gutter: 24px; --bar: 56px; --trace: 36px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --steel: #24292F; --plate: #2D333B; --ink: #E6EDF3; --muted: #9DA7B3; --rule: #768390;
  --hairline: #444C56; --highlight: #3D444D;
  --act: #E6EDF3; --act-ink: #16181D; --rust: #F0883E;
  --d-error: #FF7B72; --d-gutter: #79C0FF; --d-help: #56D4DD; --d-note: #56D364; --d-warn: #D29922;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --steel: #24292F; --plate: #2D333B; --ink: #E6EDF3; --muted: #9DA7B3; --rule: #768390;
    --hairline: #444C56; --highlight: #3D444D;
    --act: #E6EDF3; --act-ink: #16181D; --rust: #F0883E;
    --d-error: #FF7B72; --d-gutter: #79C0FF; --d-help: #56D4DD; --d-note: #56D364; --d-warn: #D29922;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--steel); color: var(--ink); font: 400 14px/20px var(--sans); }
button, input { font: inherit; color: inherit; }
h1, h2, p, ul, dl, dd, pre { margin: 0; }
ul { padding: 0; list-style: none; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.icon { width: 20px; height: 20px; fill: currentColor; flex: none; }
:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }

/* ---- the frame ---- */
.app { min-height: 100dvh; padding-bottom: calc(var(--trace) + env(safe-area-inset-bottom)); }
.bar {
  position: sticky; top: 0; z-index: 3; height: var(--bar);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left));
  background: var(--steel); border-bottom: 1px solid var(--hairline);
}
.brand { display: flex; align-items: center; gap: 12px; }
.mark { width: 20px; height: 20px; fill: var(--rust); }
h1 { font: 400 28px/32px var(--slab); letter-spacing: 0; }
.ghost {
  display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 12px;
  border: 1px solid var(--rule); border-radius: 3px; background: var(--plate); cursor: pointer;
}
main { max-width: 1280px; margin: 0 auto; padding: 24px var(--gutter) 32px; }

/* ---- composer ---- */
.composer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: end; max-width: 720px; margin-bottom: 24px; }
.composer label { grid-column: 1 / -1; color: var(--muted); font-size: 12px; line-height: 16px; }
.field {
  height: 40px; padding: 0 12px; border: 1px solid var(--rule); border-radius: 3px;
  background: var(--plate); font-size: 16px; line-height: 22px; min-width: 0;
}
.field::placeholder { color: var(--muted); }
.field[aria-invalid="true"] { border-color: var(--d-error); }
.act {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px;
  border: 1px solid var(--act); border-radius: 3px; background: var(--act); color: var(--act-ink);
  font-weight: 500; cursor: pointer; white-space: nowrap;
}
.composer .diag-slot { grid-column: 1 / -1; min-width: 0; }
.diag, .rename { min-width: 0; }

/* ---- the diagnostic (the signature) ---- */
.diag-block {
  font: 400 14px/20px var(--mono); color: var(--ink); white-space: pre; overflow-x: auto;
  padding: 12px 16px; background: var(--plate); border: 1px solid var(--rule); border-radius: 3px;
  animation: reveal 120ms linear;
}
@keyframes reveal { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.d-err { color: var(--d-error); font-weight: 500; }
.d-msg { font-weight: 500; }
.d-gut { color: var(--d-gutter); font-weight: 500; }
.d-help { color: var(--d-help); font-weight: 500; }
.d-note { color: var(--d-note); font-weight: 500; }
.d-warn { color: var(--d-warn); font-weight: 500; }

/* ---- the board ---- */
.board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; }
.col-head {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px 12px;
  padding: 0 0 8px; margin-bottom: 12px; border-bottom: 1px solid var(--rule); background: var(--steel);
}
.col-head h2 { font: 500 18px/24px var(--sans); }
.count { font: 400 14px/20px var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.variant { grid-column: 1 / -1; font: 400 12px/16px var(--mono); color: var(--muted); }
.plates { display: grid; gap: 8px; }
.empty { padding: 16px; border: 1px dashed var(--rule); border-radius: 3px; color: var(--muted); }
.empty p:first-child { color: var(--ink); }
.empty code { display: block; margin-top: 8px; font: 400 12px/16px var(--mono); }

/* the machined plate */
.plate {
  position: relative; display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; padding: 12px;
  background: var(--plate); border: 1px solid var(--rule); border-radius: 3px;
  box-shadow: inset 0 1px 0 var(--highlight);
}
.plate:focus-visible { outline-offset: 1px; }
/* a change made in another panel lands: rustc's "-->" pointer blue, then back to the rule edge */
.plate.remote { border-color: var(--d-gutter); box-shadow: inset 0 1px 0 var(--highlight), 0 0 0 1px var(--d-gutter); animation: landed 900ms ease-out; }
@keyframes landed { from { box-shadow: inset 0 1px 0 var(--highlight), 0 0 0 3px var(--d-gutter); } }
.board-error:empty { display: none; }
.board-error { margin-bottom: 16px; max-width: 720px; }
.dismissable { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; }
.stale { margin-top: 24px; }
.stale .col-head h2::after { content: " (not current)"; font: 400 12px/16px var(--mono); color: var(--muted); }
.conn-warn { color: var(--ink); }
.title { grid-column: 1 / -1; font: 400 16px/22px var(--sans); overflow-wrap: anywhere; }
.tools { display: flex; gap: 4px; margin-left: auto; }
.tool {
  display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0;
  border: 1px solid transparent; border-radius: 3px; background: transparent; color: var(--muted); cursor: pointer;
}
.foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.age { margin-right: auto; }
.age { font: 400 12px/16px var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.pick { display: inline-flex; border: 1px solid var(--rule); border-radius: 3px; }
.seg:first-child { border-radius: 2px 0 0 2px; }
.seg:last-child { border-radius: 0 2px 2px 0; }
.seg:focus-visible { position: relative; z-index: 1; }
.seg {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 28px; padding: 4px 8px; border: 0; border-left: 1px solid var(--rule); background: var(--plate);
  font-size: 12px; line-height: 16px; cursor: pointer; white-space: nowrap;
}
.seg:first-child { border-left: 0; }
.seg.is-current { background: var(--act); color: var(--act-ink); font-weight: 500; cursor: default; }
.rename { grid-column: 1 / -1; display: grid; gap: 8px; }
.plate.editing .menu-btn { display: none; }
.rename .field { width: 100%; }
.menu-btn { display: none; }
.rename-actions { display: flex; gap: 8px; }
.rename-actions .act, .rename-actions .ghost { height: 32px; min-height: 32px; }
/* the card's actions on touch widths and in the tile: a bottom sheet of real buttons */
.sheet {
  position: fixed; z-index: 6; left: 16px; right: 16px; bottom: calc(var(--trace) + 12px + env(safe-area-inset-bottom));
  display: grid; gap: 12px; padding: 16px; max-width: 560px; margin: 0 auto;
  background: var(--plate); border: 1px solid var(--rule); border-radius: 3px; box-shadow: 0 8px 24px rgb(0 0 0 / .18);
}
.sheet-title { font: 500 16px/22px var(--sans); overflow-wrap: anywhere; }
.sheet-variant { font: 400 12px/16px var(--mono); color: var(--muted); }
.sheet-moves, .sheet-rest { display: flex; flex-wrap: wrap; gap: 8px; }
.sheet-moves .act { flex: 1 1 0; }

@media (hover: hover) and (pointer: fine) {
  .ghost:hover, .seg:not(.is-current):hover { background: var(--steel); }
  .tool:hover { border-color: var(--rule); color: var(--ink); }
  .act:hover { box-shadow: inset 0 0 0 1px var(--act-ink); }
}

/* loading: cargo's own status lines, for the real requests */
.cargo { font: 400 14px/20px var(--mono); white-space: pre; }
.cargo b { color: var(--d-note); font-weight: 500; }

/* ---- the trace (footer) ---- */
.trace {
  position: fixed; inset: auto 0 0 0; z-index: 3; min-height: var(--trace);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 8px var(--gutter) calc(8px + env(safe-area-inset-bottom));
  background: var(--plate); border-top: 1px solid var(--rule);
  font: 400 12px/16px var(--mono); color: var(--muted); font-variant-numeric: tabular-nums;
}
.trace .live { color: var(--ink); }
.trace .warn { color: var(--d-warn); font-weight: 500; }

/* ---- toast ---- */
.toast-dock { position: fixed; z-index: 5; left: 50%; transform: translateX(-50%); bottom: calc(var(--trace) + 16px + env(safe-area-inset-bottom)); }
.toast {
  display: flex; white-space: nowrap; align-items: center; gap: 16px; padding: 8px 8px 8px 16px;
  background: var(--act); color: var(--act-ink); border-radius: 3px; font-size: 14px;
}
.toast button { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px; border: 1px solid var(--act-ink); border-radius: 3px; background: transparent; color: var(--act-ink); font-weight: 500; cursor: pointer; }

/* ---- about ---- */
dialog.about {
  width: min(640px, calc(100vw - 32px)); max-height: calc(100dvh - 64px); padding: 0;
  background: var(--plate); color: var(--ink); border: 1px solid var(--rule); border-radius: 3px;
  box-shadow: 0 8px 24px rgb(0 0 0 / .18);
}
dialog.about::backdrop { background: rgb(22 24 29 / .5); }
.about-head { position: sticky; top: 0; display: flex; align-items: center; gap: 12px; padding: 16px 24px; background: var(--plate); border-bottom: 1px solid var(--hairline); }
.about-head h2 { flex: 1; font: 500 18px/24px var(--sans); }
.about-body { padding: 24px; display: grid; gap: 24px; }
.about-body p { max-width: 64ch; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; }
.facts dt { color: var(--muted); }
.facts dd code, .files code { font: 400 12px/16px var(--mono); }
.files { display: flex; flex-wrap: wrap; gap: 8px; }
.about h3 { margin: 0 0 8px; font: 500 14px/20px var(--sans); }
.keys { display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; }
.keys kbd { font: 400 12px/16px var(--mono); padding: 2px 4px; border: 1px solid var(--rule); border-radius: 3px; }
.marks { display: flex; gap: 12px; align-items: center; }
.marks svg { width: 20px; height: 20px; }
.leptos { fill: var(--ink); }

/* ---- tablet and phone (under 1024): compact plates; the actions live in the sheet ---- */
@media (max-width: 1023px) {
  :root { --gutter: 16px; }
  .board { gap: 16px; }
  .plate { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; padding: 10px 8px 10px 12px; }
  .plate .title { grid-column: 1; }
  .plate .foot { grid-column: 1; }
  .pick, .tools { display: none; }
  .menu-btn { display: inline-grid; place-items: center; grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 44px; height: 44px; padding: 0; border: 1px solid transparent; border-radius: 3px; background: transparent; color: var(--muted); cursor: pointer; }
}

/* ---- phone (under 600): stacked sections, sticky headers ---- */
@media (max-width: 599px) {
  :root { --gutter: 16px; --bar: 52px; }
  main { padding-top: 16px; }
  .composer { margin-bottom: 16px; }
  .board { grid-template-columns: 1fr; gap: 24px; }
  .col-head { position: sticky; top: var(--bar); z-index: 2; padding-top: 12px; }
  .diag-block { font-size: 12px; line-height: 16px; padding: 12px; }
  .cargo { font-size: 12px; }
  :root { --trace: 52px; }
  .app { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .trace { align-items: flex-start; flex-direction: column; gap: 0; }
  .facts, .keys { grid-template-columns: 1fr; gap: 4px; }
  .facts dd, .keys dd { margin-bottom: 8px; }
}

/* ---- coarse pointers: 44 px targets, 16 px inputs ---- */
@media (pointer: coarse) {
  .ghost, .seg, .tool, .toast button, .rename-actions .act, .rename-actions .ghost { min-height: 44px; height: auto; }
  .tool { width: 44px; height: 44px; }
  .field, .act { height: 44px; }
  .seg { padding: 4px 10px; font-size: 14px; }
}

/* ---- the tile (?embed=1, 420 x 640): three narrow columns, the trace kept ---- */
.tile { --gutter: 12px; --bar: 44px; --trace: 28px; height: 640px; overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding-bottom: 0; }
.tile .bar { position: static; }
.tile h1 { font-size: 18px; line-height: 24px; }
.tile .bar .ghost span { display: none; }
.tile .bar .ghost { padding: 4px 8px; }
.tile main { padding: 8px var(--gutter) 8px; min-height: 0; overflow: hidden; width: 100%; display: flex; flex-direction: column; }
.tile main > .board { flex: 1 1 0; min-height: 0; }
.tile .composer { grid-template-columns: minmax(0, 1fr) auto; margin-bottom: 8px; max-width: none; }
.tile .composer label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tile .field, .tile .act { height: 32px; font-size: 14px; }
.tile .act { padding: 0 8px; }
.tile .act span { display: none; }
.tile .board { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); align-items: stretch; gap: 8px; }
.tile .col { min-height: 0; overflow-y: auto; }
.tile .col-head { position: static; padding-bottom: 4px; margin-bottom: 8px; grid-template-columns: auto 1fr; gap: 0 6px; }
.tile .col-head h2 { font-size: 14px; line-height: 20px; }
.tile .count { font-size: 12px; }
.tile .plates { gap: 4px; }
.tile .plate { padding: 8px 4px 8px 8px; gap: 2px 4px; grid-template-columns: minmax(0, 1fr) 24px; }
.tile .title { font-size: 12px; line-height: 16px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tile .tools, .tile .pick { display: none; }
.tile .menu-btn { width: 24px; height: 24px; align-self: start; }
.tile .menu-btn .icon { width: 16px; height: 16px; }
.tile .empty { padding: 8px; font-size: 12px; line-height: 16px; }
.tile .trace { position: static; padding: 4px var(--gutter); font-size: 12px; }
.tile .trace { flex-direction: row; }
.tile .trace .conn { display: none; }
.tile .sheet { left: 12px; right: 12px; bottom: 44px; padding: 12px; gap: 8px; box-shadow: 0 8px 24px rgb(0 0 0 / .18), 0 0 0 100vmax rgb(22 24 29 / .5); }
.tile .toast-dock { bottom: 52px; }
.tile .diag-block { font-size: 12px; line-height: 16px; padding: 8px; }
.tile .rename { position: fixed; z-index: 6; left: 12px; right: 12px; top: 96px; padding: 8px; background: var(--plate); border: 1px solid var(--rule); border-radius: 3px; box-shadow: 0 8px 24px rgb(0 0 0 / .18), 0 0 0 100vmax rgb(22 24 29 / .5); }

@media (max-width: 600px) {
  dialog.about { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  .about-head { padding: 12px 16px; padding-top: max(12px, env(safe-area-inset-top)); }
  .about-body { padding: 16px; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) { .diag-block, .plate.remote { animation: none; } }