/* Plank & Pinion. Every colour and size is a custom property from /tokens.css (data/ui.yaml); this file holds none.
   The layout follows html[data-layout]: "wide" puts the pieces in a side rail and the report and designs in a column
   beside the sheet; "narrow" (below ui.client.wide_px, set by boot.mjs) puts them in a tabbed drawer under it. */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font: var(--font)/1.4 Bahnschrift, "DIN Alternate", "Roboto Condensed", "Segoe UI", system-ui, sans-serif;
  overflow: hidden;
}

button, input, select { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

h1, h2, h3, p { margin: 0; }

/* --- the frame ------------------------------------------------------------------------------------------------ */

.app { display: grid; height: 100dvh; min-height: 0; }

html[data-layout="wide"] .app {
  grid-template-columns: var(--rail) minmax(0, 1fr) var(--rail);
  grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "bar bar bar" "pieces sheet report" "pieces sheet designs";
}

html[data-layout="narrow"] .app {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "bar" "sheet" "tabs" "drawer";
}

.bar {
  grid-area: bar;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  padding: 0 var(--gap);
  min-height: var(--tap);
  min-width: 0;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.brand { font-size: 1.05em; font-weight: 600; white-space: nowrap; }
.brand a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; min-height: var(--tap); }
.nav-host { min-width: 0; }

/* --- the sheet and its title block ---------------------------------------------------------------------------- */

.sheet-area {
  grid-area: sheet;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  background: var(--sheet-ground);
}

.sheet { display: block; width: 100%; height: 100%; min-height: 0; cursor: crosshair; }
.sheet.panning { cursor: grabbing; }

/* A drawing's title block, under the sheet at its right: the sheet's size, what the last test said, the two actions. */
.titleblock {
  justify-self: end;
  margin: 0 var(--gap) var(--gap);
  display: grid;
  grid-template-columns: minmax(0, auto) auto;
  grid-template-areas: "size actions" "status actions";
  column-gap: calc(var(--gap) * 2);
  align-items: center;
  max-width: calc(100% - var(--gap) * 2);
  padding: var(--gap) calc(var(--gap) * 1.5);
  background: var(--sheet-ground);
  border: 2px solid var(--sheet-ink);
  color: var(--sheet-ink);
}

.tb-sheet { grid-area: size; font-weight: 600; }
.tb-status { grid-area: status; color: var(--sheet-ink-soft); font-size: 0.9em; min-height: 1.4em; }
.tb-status.bad { color: var(--sheet-bad); }
.tb-actions { grid-area: actions; display: flex; gap: var(--gap); }

html[data-layout="narrow"] .titleblock { justify-self: stretch; grid-template-columns: minmax(0, 1fr) auto; }
html[data-layout="narrow"] .pane-pieces > .pane-head { display: none; }
html[data-layout="narrow"] .tb-status { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- buttons ---------------------------------------------------------------------------------------------------- */

.act {
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0 calc(var(--gap) * 2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--raised);
  color: var(--text);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
}

.act:disabled { opacity: 0.55; cursor: default; }
.act-test { background: var(--pick); border-color: var(--pick); color: var(--pick-text); }
.act-quiet { background: transparent; }
.titleblock .act { border-color: var(--sheet-ink); background: transparent; color: var(--sheet-ink); }
.titleblock .act-test { background: var(--sheet-ink); color: var(--sheet-ground); }

/* --- panes, tabs and the drawer --------------------------------------------------------------------------------- */

.pane {
  min-height: 0;
  overflow-y: auto;
  padding: var(--gap);
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  background: var(--panel);
}

.pane-head { font-size: 0.95em; font-weight: 600; color: var(--muted); }

html[data-layout="wide"] .tabs { display: none; }
html[data-layout="wide"] .pane-pieces { grid-area: pieces; border-right: 1px solid var(--line); }
html[data-layout="wide"] .pane-report { grid-area: report; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); }
html[data-layout="wide"] .pane-designs { grid-area: designs; border-left: 1px solid var(--line); }

.tabs {
  grid-area: tabs;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--panel);
  border-top: 1px solid var(--line);
}

.tabs [role="tab"] {
  min-height: var(--tap);
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--muted);
  font-weight: 600;
  cursor: pointer;
}

.tabs [role="tab"][aria-selected="true"] { color: var(--text); border-bottom-color: var(--pick); }

html[data-layout="narrow"] .pane { grid-area: drawer; height: var(--drawer); }
html[data-layout="narrow"] .pane:not(.open) { display: none; }

/* --- the palette and the picked piece --------------------------------------------------------------------------- */

.palette {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--tap) * 2), 1fr));
  gap: calc(var(--gap) / 2);
}

.tool {
  min-height: var(--tap);
  padding: calc(var(--gap) / 2) var(--gap);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--raised);
  text-align: left;
  line-height: 1.15;
  cursor: pointer;
}

.tool[aria-pressed="true"] { border-color: var(--pick); box-shadow: inset 0 0 0 1px var(--pick); }

.picked { display: flex; flex-direction: column; gap: var(--gap); }
.picked-tip { color: var(--muted); font-size: 0.92em; max-width: 60ch; }
.picked-row { display: flex; flex-wrap: wrap; gap: var(--gap); align-items: flex-end; }
.picked-name { font-weight: 600; }

.field { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 calc(var(--tap) * 3); }
.field-label { color: var(--muted); font-size: 0.85em; }
.field select {
  min-height: var(--tap);
  width: 100%;
  padding: 0 var(--gap);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--raised);
}

/* --- the name dialog -------------------------------------------------------------------------------------------- */

.ask {
  width: min(calc(100vw - var(--gap) * 4), calc(var(--rail) * 1.6));
  padding: calc(var(--gap) * 2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
}

.ask::backdrop { background: var(--bg); opacity: 0.7; }
.ask-form { display: flex; flex-direction: column; gap: var(--gap); }
.ask-label { font-weight: 600; }
.ask-input {
  min-height: var(--tap);
  padding: 0 var(--gap);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--raised);
}
.ask-error { color: var(--bad); min-height: 1.4em; font-size: 0.92em; }
.ask-actions { display: flex; justify-content: flex-end; gap: var(--gap); }

/* --- the landing page ------------------------------------------------------------------------------------------- */

body.landing { overflow: auto; }
.land {
  max-width: 62ch;
  margin: 0 auto;
  padding: calc(var(--gap) * 4) calc(var(--gap) * 2);
  display: flex;
  flex-direction: column;
  gap: calc(var(--gap) * 2);
}
.land-hook { font-size: 1.5em; line-height: 1.25; font-weight: 600; }
.land-body { color: var(--muted); }
.land-play { align-self: flex-start; }

/* --- the house nav ---------------------------------------------------------------------------------------------- */
/* The drop-in draws 24 px buttons; every tap target on the bench is var(--tap), so here they are sized up. Their
   colours stay the drop-in's. On a phone the bar wraps and the nav takes its own row. */
.bar { flex-wrap: wrap; }
.nav-host .tn-nav { flex-wrap: wrap; justify-content: flex-end; }
.nav-host .tn-nav-btn { min-height: var(--tap); min-width: var(--tap); justify-content: center; }

/* --- the report panel ------------------------------------------------------------------------------------------- */

.rp-empty, .rp-nothing, .rp-key, .rp-stale, .ds-empty { color: var(--muted); font-size: 0.92em; max-width: 60ch; }
.rp-stale { color: var(--bad); }
.rp-rate { display: flex; align-items: baseline; gap: var(--gap); flex-wrap: wrap; }
.rp-number { font-size: 2.2em; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.rp-unit { color: var(--muted); }
.rp-facts { display: grid; grid-template-columns: auto 1fr; gap: 2px calc(var(--gap) * 2); margin: 0; }
.rp-facts dt { color: var(--muted); }
.rp-facts dd { margin: 0; font-variant-numeric: tabular-nums; }
.rp-sub { font-size: 0.95em; font-weight: 600; color: var(--muted); }
.rp-machines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--gap); }
.rp-machine { display: flex; flex-direction: column; gap: 2px; padding-left: var(--gap); border-left: 3px solid transparent; }
.rp-machine.slow { border-left-color: var(--sheet-slow); }
.rp-name { font-weight: 600; }
.rp-slow { color: var(--sheet-slow); font-weight: 600; }
.rp-nums { color: var(--muted); font-size: 0.85em; font-variant-numeric: tabular-nums; }
.rp-bar { display: block; width: 100%; height: calc(var(--gap) * 1.25); border: 1px solid var(--line); }
.rp-busy { fill: var(--text); }
.rp-starved { fill: var(--raised); }
.rp-blocked { fill: var(--sheet-slow); }

/* --- the designs list ------------------------------------------------------------------------------------------- */

.ds-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--gap); }
.ds-count { color: var(--muted); font-size: 0.9em; font-variant-numeric: tabular-nums; }
.ds-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--gap); }
.ds-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  padding: var(--gap);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.ds-text { min-width: 0; flex: 1 1 calc(var(--tap) * 3); }
.ds-name { font-weight: 600; overflow-wrap: anywhere; }
.ds-meta { color: var(--muted); font-size: 0.9em; }
.ds-acts { display: flex; gap: var(--gap); }