/* PLAYWRENCH base.css - THE PATCH NOTES shared system (chosen by Victor 2026-07-03,
   "most universal, least personality"). Steam release-notes / changelog language.
   Near-white page, dark ink, ONE signal blue, ui-monospace for every number/tag/
   version. No shadows, no gradients, no glass, no dark inverted plates. 4px radius max.

   Reskin doctrine: this is a TOKEN/TYPE/COMPONENT swap over the prior workbench
   system. Page HTML structure, order, copy, and every class name are unchanged;
   the arm stylesheets (schedule-1, voidling-bound) inherit the new language through
   the SAME token names (values remapped) so no arm markup changed. Bombanana keeps
   the field-manual skin via a self-contained bombanana/arm.css (loaded after this).

   Accessibility floor (AMENDED 2026-07-03, binding): meaning-carrying text 16px;
   gating labels sentence case, 14px minimum; tap targets 44px minimum including the
   nav ::after hit areas and mistake-recovery controls; any sticky plate passes taps
   through its body; any answer naming a color renders its swatch.

   Brand strings: PLAYWRENCH. Domain: https://playwrench.com */

:root {
  /* ---- patch-notes palette ---- */
  --page: #fafbfc;
  --panel: #ffffff;
  --ink: #1b1e22;
  --slate: #5a636e;
  --slate-soft: #78828e;
  --blue: #2456d6;
  --blue-ink: #1c46ad;
  --hair: #dce0e6;
  --hair-strong: #c4cad2;
  --border-2: #1b1e22;

  /* ---- compatibility tokens ----
     The arm stylesheets (schedule-1, voidling-bound) reference the historical
     token names. They are kept alive here and REMAPPED to the patch-notes values,
     which converts every arm component (including the former dark answer plate)
     to the patch-notes language with no arm markup change:
       - paper surfaces become the near-white page / white panel;
       - ink stays the dark text + 2px border color;
       - "paper-on-ink" (former plate text) becomes dark INK, "dim-on-ink" becomes
         slate, so the arm plates read dark-figures-on-light instead of inverted. */
  --paper: var(--page);
  --paper-2: var(--panel);
  --ink-dim: var(--slate);
  --paper-on-ink: var(--ink);
  --dim-on-ink: var(--slate);

  /* --accent is the single per-arm action color. The patch-notes signal is the
     blue; arms may override --accent in their arm.css, but the hub default is the
     signal blue so links/primary actions are consistent. */
  --accent: var(--blue);

  /* per-arm accent chips - ONLY used as a small square on hub game tiles */
  --arm-steel: #3f6ea5;
  --arm-lab: #3f8a54;
  --arm-void: #6a4fa3;

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --tap: 44px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 860px; margin: 0 auto; padding: 0 20px; }

a { color: var(--blue); text-decoration: none; text-underline-offset: 2px; }
a:hover { color: var(--blue-ink); text-decoration: underline; }

/* ---------- header: patch-notes bar ---------- */
.bar {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 10px 18px;
  max-width: 860px; margin: 0 auto; padding: 18px 20px 14px;
}
.wordmark {
  font-family: var(--sans); font-weight: 700; font-size: 19px;
  letter-spacing: 0; color: var(--ink); text-decoration: none; white-space: nowrap;
}
.wordmark:hover { color: var(--ink); text-decoration: none; }
.bar-links { display: flex; flex-wrap: wrap; gap: 4px 6px; font-family: var(--mono); font-size: 13.5px; }
/* nav links keep the 44px touch target via a transparent hit area (::after). */
.bar-links a {
  color: var(--slate); text-decoration: none; position: relative;
  padding: 3px 8px; border: 1px solid var(--hair); border-radius: 4px;
  background: var(--panel); display: inline-block;
}
.bar-links a::after { content: ""; position: absolute; inset: -14px -6px; }
.bar-links a:hover { color: var(--blue); border-color: var(--hair-strong); text-decoration: none; }
.bar-links a.here { border-color: var(--blue); color: var(--blue-ink); }
/* Hub link that precedes the arm wordmark in an arm header. */
.bar-hub {
  font-family: var(--sans); font-weight: 700; font-size: 19px;
  letter-spacing: 0; color: var(--slate); text-decoration: none; white-space: nowrap;
}
.bar-hub:hover { color: var(--blue); text-decoration: none; }
.bar-brand { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex-wrap: wrap; }
.bar-sep { color: var(--slate-soft); font-family: var(--mono); }

/* Narrow phones: shrink the arm header so PLAYWRENCH / ARM + nav share cleanly. */
@media (max-width: 420px) {
  .bar-hub, .bar-brand .wordmark { font-size: 16px; }
  .bar-brand { gap: 6px; }
  .bar-links { gap: 4px 6px; }
}

/* the single thin blue rule under the header (the patch-notes motif). Arms may
   layer their own chip identity, but the motif rule is the shared signal. */
.motif-rule { height: 2px; background: var(--blue); border: 0; margin: 0; }

.page-head { padding: 26px 0 8px; }
.page-head h1 {
  margin: 0 0 8px; font-size: 30px; line-height: 1.15; font-weight: 700;
  letter-spacing: 0; text-transform: none;
}
.page-head .spec-line {
  font-family: var(--sans); font-size: 15px; color: var(--slate);
  margin: 0; text-transform: none; letter-spacing: 0;
}

/* ---------- module / tool picker tiles ---------- */
.tile-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin: 16px 0 20px;
}
.tile {
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 10px; min-height: 96px; padding: 14px;
  border: 1px solid var(--hair); background: var(--panel);
  color: var(--ink); text-decoration: none; border-radius: 4px;
}
.tile svg { width: 30px; height: 30px; display: block; color: var(--slate); }
.tile-name {
  font-weight: 700; text-transform: none; letter-spacing: 0; font-size: 16px;
  color: var(--ink);
}
.tile:hover, .tile:active { border-color: var(--blue); text-decoration: none; }
.tile:hover .tile-name, .tile:active .tile-name { color: var(--blue); }
.tile:hover svg, .tile:active svg { color: var(--blue); }
.tile-alt { border-style: dashed; border-color: var(--hair-strong); }

/* ---------- game tile (hub root): a release entry / directory block ---------- */
.game-tile {
  display: block; border: 1px solid var(--hair); background: var(--panel);
  color: var(--ink); text-decoration: none; border-radius: 4px;
  padding: 16px; margin: 14px 0 8px;
  position: relative;
}
.game-tile:hover, .game-tile:active { border-color: var(--blue); text-decoration: none; }
.game-tile .gt-name {
  font-weight: 700; text-transform: none; letter-spacing: 0; font-size: 20px;
  color: var(--ink);
}
.game-tile:hover .gt-name, .game-tile:active .gt-name { color: var(--blue); }
.game-tile .gt-line {
  font-family: var(--sans); font-size: 15px; color: var(--slate); margin: 8px 0 0;
}
.tool-row {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 22px;
  font-family: var(--mono); font-size: 13.5px;
}
.tool-row a {
  color: var(--blue); text-decoration: none; white-space: nowrap;
  border: 1px solid var(--hair); border-radius: 4px; padding: 4px 9px; background: var(--page);
}
.tool-row a:hover { border-color: var(--blue); text-decoration: none; }

/* per-arm accent chip: the ONLY per-arm identity on the hub. A small square left
   of a game name. Arms set the color via their own chip class; base ships the hub
   steel default. The chip is decorative, not a link. */
.arm-chip {
  width: 13px; height: 13px; border-radius: 2px; flex: 0 0 auto;
  display: inline-block; vertical-align: middle; margin-right: 8px;
  background: var(--arm-steel);
}
.arm-chip.arm-steel { background: var(--arm-steel); }
.arm-chip.arm-lab { background: var(--arm-lab); }
.arm-chip.arm-void { background: var(--arm-void); }

/* ---------- module page: answer plate -> patch-notes result block ---------- */
/* The former dark inverted plate becomes a light 2px-bordered result block with
   dark mono figures. Kept STICKY where the markup asked for it; taps pass through
   the body so covered controls never eat a tap (accessibility floor). */
.answer-plate {
  position: sticky; top: 0; z-index: 5;
  background: var(--panel); color: var(--ink);
  border: 2px solid var(--border-2); border-radius: 4px;
  padding: 14px 16px; margin: 14px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.answer-plate.idle {
  background: var(--panel); color: var(--slate);
  border: 1px dashed var(--hair-strong);
}
.answer-main { min-width: 0; }
.answer-big {
  font-family: var(--mono); font-weight: 700;
  font-size: clamp(1.9rem, 10vw, 3.4rem); line-height: 1.02;
  overflow-wrap: anywhere; color: var(--ink); letter-spacing: -0.01em;
}
.answer-plate.idle .answer-big {
  font-size: 1rem; letter-spacing: 0; font-weight: 600; color: var(--slate);
}
.answer-sub {
  font-family: var(--mono); font-size: 13px; margin-top: 6px;
  color: var(--slate); text-transform: none; letter-spacing: 0;
}
.answer-plate.idle .answer-sub { color: var(--slate-soft); }
.answer-big .bad { color: var(--blue-ink); }
.answer-big .plate-swatch {
  width: 22px; height: 22px; border: 1.5px solid var(--hair-strong);
  border-radius: 3px; display: inline-block; vertical-align: baseline;
  margin-right: 10px; flex: none;
}
/* sticky plate passes taps through its body; its own controls stay tappable. */
.answer-plate { pointer-events: none; }
.answer-plate button, .answer-plate a, .answer-plate input { pointer-events: auto; }
.field { scroll-margin-top: 160px; }

.btn-reset {
  flex: none; font-family: var(--sans); font-weight: 600; font-size: 14px;
  letter-spacing: 0; text-transform: none;
  background: var(--blue); color: #fff; border: 1px solid var(--blue); border-radius: 4px;
  min-height: 44px; padding: 10px 16px; cursor: pointer;
}
.btn-reset:hover { background: var(--blue-ink); border-color: var(--blue-ink); }
.btn-reset:disabled { visibility: hidden; }

/* ---------- module page: live form ---------- */
.field { margin: 16px 0; }
.field-label {
  /* sentence-case gating labels, 14px min (accessibility floor). */
  font-family: var(--mono); font-size: 0.875rem; font-weight: 700;
  letter-spacing: 0; color: var(--ink);
  display: block; margin-bottom: 8px;
}
.field-label .opt { color: var(--slate); font-weight: 400; }
.field-help { font-size: 0.82rem; color: var(--slate); margin: -4px 0 8px; }
.field-error { font-family: var(--mono); font-size: 0.78rem; color: var(--blue-ink); margin: 6px 0 0; min-height: 1em; }

.choice-row { display: flex; flex-wrap: wrap; gap: 8px; }
.choice-btn {
  min-height: 48px; min-width: 48px; padding: 8px 14px;
  border: 1px solid var(--hair-strong); border-radius: 4px;
  background: var(--panel); color: var(--ink);
  font-family: var(--mono); font-size: 1rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
}
.choice-btn:hover { border-color: var(--slate); }
.choice-btn.on { background: var(--blue); border-color: var(--blue); color: #fff; }

.seq-out {
  font-family: var(--mono); font-size: 0.9rem; margin-top: 8px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 24px;
  color: var(--slate);
}
.seq-out .swatch { vertical-align: middle; }
.btn-undo {
  font-family: var(--mono); font-size: 0.78rem; text-transform: none; letter-spacing: 0;
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--hair-strong); border-radius: 4px;
  min-height: 44px; padding: 4px 12px; cursor: pointer;
}
.btn-undo:hover { border-color: var(--slate); }

.text-input {
  width: 100%; min-height: var(--tap); border: 1px solid var(--hair-strong);
  border-radius: 4px; background: var(--panel); color: var(--ink);
  font-family: var(--mono); font-size: 1.35rem; padding: 10px 14px;
}
.text-input:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }

/* ---------- module page: callout + collapsed procedure ---------- */
.callout-box {
  border: 1px solid var(--hair-strong); border-radius: 4px; background: var(--panel);
  padding: 12px; margin: 18px 0 8px;
}
.callout-label {
  font-family: var(--mono); font-size: 12.5px; font-weight: 700;
  text-transform: none; letter-spacing: 0; color: var(--slate);
  margin: 0 0 6px;
}
.callout-text { font-family: var(--mono); font-size: 0.95rem; font-weight: 600; margin: 0; color: var(--ink); }
.btn-copy {
  margin-top: 10px; font-family: var(--sans); font-size: 14px; font-weight: 600;
  text-transform: none; letter-spacing: 0;
  background: var(--blue); color: #fff; border: 1px solid var(--blue); border-radius: 4px;
  min-height: 44px; padding: 8px 16px; cursor: pointer;
}
.btn-copy:hover { background: var(--blue-ink); border-color: var(--blue-ink); }

/* collapsible spec / procedure sections: hairline rules, sentence-case summaries */
details.spec { border-top: 1px solid var(--hair); }
details.spec:last-of-type { border-bottom: 1px solid var(--hair); }
details.spec summary {
  font-family: var(--sans); font-size: 15px; font-weight: 600;
  text-transform: none; letter-spacing: 0;
  padding: 13px 2px; cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
details.spec summary::-webkit-details-marker { display: none; }
details.spec summary::after { content: "+"; font-family: var(--mono); font-size: 1rem; color: var(--slate-soft); font-weight: 400; }
details.spec[open] summary::after { content: "\2212"; }
details.spec.warn summary { color: var(--blue-ink); }
details.spec .spec-body { padding: 0 2px 14px; font-size: 0.9rem; color: var(--slate); }
details.spec .spec-body ol { margin: 0; padding-left: 20px; }
details.spec .spec-body li { margin: 6px 0; }
details.spec .spec-body p { margin: 6px 0; }

.blocks { margin: 6px 0 20px; }

/* ---------- footer ---------- */
.site-footer {
  border-top: 1px solid var(--hair); margin-top: 40px;
  padding: 16px 0 40px; font-family: var(--sans); font-size: 13.5px;
  color: var(--slate-soft); line-height: 1.7;
}
.site-footer a { color: var(--blue); }
.site-footer p { margin: 0 0 6px; }
.sibling-links { margin-bottom: 8px; }
.sibling-links a { margin-right: 12px; white-space: nowrap; }

/* ---------- manual page ---------- */
.manual-search {
  width: 100%; min-height: var(--tap); border: 1px solid var(--hair-strong);
  border-radius: 4px; background: var(--panel); color: var(--ink);
  font-family: var(--mono); font-size: 1rem; padding: 10px 14px; margin: 14px 0 6px;
}
.manual-search:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
.search-count { font-family: var(--mono); font-size: 12.5px; color: var(--slate); margin: 0 0 10px; }

details.manual-module { border-top: 1px solid var(--hair); }
details.manual-module:last-of-type { border-bottom: 1px solid var(--hair); }
details.manual-module summary {
  cursor: pointer; list-style: none; padding: 13px 2px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
details.manual-module summary::-webkit-details-marker { display: none; }
details.manual-module summary .mm-name {
  font-weight: 700; text-transform: none; letter-spacing: 0; font-size: 15px; color: var(--ink);
}
details.manual-module summary .mm-tag {
  font-family: var(--mono); font-size: 12.5px; color: var(--slate);
  text-transform: none; letter-spacing: 0; white-space: nowrap;
}
details.manual-module summary::after { content: none; }
details.manual-module .mm-body { padding: 0 2px 16px; font-size: 1rem; }
.mm-body h3 {
  font-family: var(--sans); font-size: 15px; font-weight: 700; text-transform: none;
  letter-spacing: 0; margin: 16px 0 6px;
}
.mm-body table { border-collapse: collapse; width: 100%; font-size: 14px; font-family: var(--mono); }
.mm-body th, .mm-body td { border-bottom: 1px solid var(--hair); padding: 8px 10px; text-align: left; }
.mm-body th { color: var(--slate); font-weight: 600; font-size: 13px; text-transform: none; letter-spacing: 0; border-bottom: 1px solid var(--hair-strong); }
.mm-body .callout-text { background: var(--panel); border: 1px solid var(--hair-strong); border-radius: 4px; padding: 10px; }
.mm-body ol { padding-left: 20px; }
.mm-body li { margin: 5px 0; }
.mm-meta { font-family: var(--mono); font-size: 12.5px; color: var(--slate); }
.mm-tool-link { font-family: var(--mono); font-size: 0.8rem; }

/* ---------- changelog ---------- */
.log-entry { border-top: 1px solid var(--hair); padding: 14px 0 6px; }
.log-entry h2 { margin: 0; font-size: 16px; text-transform: none; letter-spacing: 0; font-weight: 700; }
.log-date { font-family: var(--mono); font-size: 12.5px; color: var(--slate); margin: 4px 0 8px; }
.log-entry ul { padding-left: 20px; font-size: 0.9rem; }
.log-entry li { margin: 5px 0; }
pre.embed-snippet {
  background: var(--panel); border: 1px solid var(--hair-strong); border-radius: 4px;
  padding: 12px; overflow-x: auto; font-size: 0.8rem; font-family: var(--mono);
}

/* ---------- embed mode ---------- */
body.embed .bar, body.embed .motif-rule, body.embed .page-head,
body.embed .site-footer, body.embed .seo-note { display: none; }
body.embed .wrap { padding: 8px; }
/* 2026-07-03 retrofit (V5a, L5): voidling wraps its SEO H2 sections, FAQ, and the
   species roster in .blocks; base only hid .seo-note, so an iframed voidling tool
   shipped a full prose page below itself. Strip .blocks in embed mode like the
   other demoted reference prose. (Bombanana has no .blocks; its module-page prose
   is .tool-brief + .seo-note, both handled below.) */
body.embed .blocks, body.embed .tool-brief { display: none; }
/* 2026-07-03 retrofit (B6 + V5b, L5): embed mode strips the footer, which carries
   the fan-made disclaimer and the link home. A third-party viewer sees the tool
   cold, so keep ONE minimal attribution line that only exists in embed mode. It
   is injected by each arm's embed-detection JS (element .embed-attrib). */
.embed-attrib { display: none; }
body.embed .embed-attrib {
  display: block; margin: 12px 0 4px; padding-top: 10px;
  border-top: 1px solid var(--hair);
  font-family: var(--sans); font-size: 12.5px; color: var(--slate-soft); line-height: 1.6;
}
body.embed .embed-attrib a { color: var(--blue); white-space: nowrap; }

/* ---------- seo copy under the tool ---------- */
.seo-note { font-size: 1rem; color: var(--ink); margin: 14px 0 0; }
.seo-note p { margin: 6px 0; }

/* ---------- print ---------- */
@media print {
  body { background: #fff; color: #000; font-size: 11pt; }
  .bar, .motif-rule, .manual-search, .search-count, .site-footer, .no-print { display: none !important; }
  details.manual-module, details.spec { border-color: #000; }
  details.manual-module .mm-body, details.spec .spec-body { display: block; }
  a { color: #000; text-decoration: none; }
}