/* Smarter Artist components. Every state on lookbook sheet 12, plus the sheet,
   the title block, the drawing kit and the tool shell (sheet 11).
   Depends on tokens.css. Square corners only. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; font-family: var(--f-text); font-size: var(--t-body); line-height: 1.5; }
img, svg { max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: var(--focus); outline-offset: var(--focus-offset); }
.bp :focus-visible { outline-color: var(--bp-pencil); }

/* ---------- grounds ---------- */
.bp {
  --ground: var(--bp-ink); --ink: var(--bp-vellum); --pencil: var(--bp-pencil); --rule: var(--bp-rule);
  --muted: var(--bp-muted); --marker: var(--bp-marker); --note-orange: var(--bp-marker);
  background-color: var(--bp-ink); color: var(--bp-vellum);
  background-image:
    linear-gradient(var(--bp-grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--bp-grid-major) 1px, transparent 1px),
    linear-gradient(var(--bp-fine) 1px, transparent 1px),
    linear-gradient(90deg, var(--bp-fine) 1px, transparent 1px);
  background-size: var(--grid-major) var(--grid-major), var(--grid-major) var(--grid-major), var(--grid-fine) var(--grid-fine), var(--grid-fine) var(--grid-fine);
  background-position: -1px -1px;
}
.pp {
  --ground: var(--pp-paper); --ink: var(--pp-ink); --pencil: var(--pp-pencil); --rule: var(--pp-rule);
  --muted: var(--pp-muted); --marker: var(--pp-marker); --note-orange: var(--pp-text-orange);
  background-color: var(--pp-paper); color: var(--pp-ink);
  background-image:
    linear-gradient(var(--pp-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--pp-grid) 1px, transparent 1px);
  background-size: var(--grid-fine) var(--grid-fine), var(--grid-fine) var(--grid-fine);
  background-position: -1px -1px;
}
.pp.pp-plain { background-image: none; }

/* ---------- type ---------- */
.display, h1, h2, h3 { font-family: var(--f-display); font-weight: 800; line-height: .98; letter-spacing: 0; }
h1, .h1 { font-size: var(--t-h1); font-weight: 900; line-height: .94; }
h2, .h2 { font-size: var(--t-h2); }
h3, .h3 { font-size: var(--t-h3); }
.lede { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.45; }
.small { font-size: var(--t-small); }
.muted { color: var(--muted); }
.label {
  font-family: var(--f-mono); font-size: var(--t-label); font-weight: 400; letter-spacing: .06em;
  text-transform: uppercase; color: var(--pencil); line-height: 1.6;
}
.label-ink { color: var(--ink); }
.prose p + p { margin-top: var(--s2); }
.prose { max-width: 40em; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--s2); top: -64px; z-index: 50; background: var(--pp-ink); color: var(--pp-paper); padding: var(--s1) var(--s2); font-family: var(--f-mono); font-size: 12px; }
.skip:focus { top: var(--s2); }

/* ---------- the sheet: frame, registration marks, title block ---------- */
.sheet { position: relative; min-height: 100vh; padding: 28px; display: flex; flex-direction: column; }
.frame { position: absolute; inset: 28px; border: var(--line) solid currentColor; pointer-events: none; z-index: 0; }
.frame::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--pencil); }
.reg { position: absolute; width: 26px; height: 26px; pointer-events: none; z-index: 1; }
.reg::before, .reg::after { content: ""; position: absolute; background: currentColor; }
.reg::before { left: 12px; top: 0; width: 2px; height: 26px; }
.reg::after { top: 12px; left: 0; height: 2px; width: 26px; }
.reg i { position: absolute; inset: 5px; border: 1.5px solid currentColor; border-radius: 50%; }
.reg-tl { left: 15px; top: 15px; } .reg-tr { right: 15px; top: 15px; } .reg-bl { left: 15px; bottom: 15px; }
.sheet-body { position: relative; z-index: 1; flex: 1; padding: clamp(24px, 4.5vw, 64px) clamp(20px, 5vw, 64px) var(--s6); }
.sheet-foot { position: relative; z-index: 2; display: flex; justify-content: flex-end; align-items: flex-end; gap: var(--s3); flex-wrap: wrap; }
.sheet-foot .foot-note { flex: 1 1 260px; padding: 0 var(--s3) var(--s2) clamp(20px, 5vw, 64px); }

/* the drawing line: the sheet's label row, never sticky */
.drawing-line { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); align-items: baseline; padding-bottom: var(--s3); }
.drawing-line a { text-decoration: none; }
.drawing-line a:hover, .drawing-line a[aria-current="page"] { text-decoration: underline; color: var(--ink); }
.drawing-line .home { margin-right: auto; }

/* title block (the mark) */
.tb { width: 440px; max-width: 100%; border-top: var(--line) solid currentColor; border-left: var(--line) solid currentColor;
  display: grid; grid-template-columns: 1.5fr 1fr; font-family: var(--f-mono); font-size: 10px; letter-spacing: .05em;
  color: var(--pencil); background: var(--ground); text-transform: uppercase; }
.tb > div { border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 7px 10px; min-width: 0; }
.tb > div:nth-child(2n+1):not(.tb-brand) { border-right-color: var(--rule); }
.tb .tb-brand { grid-column: 1 / 3; display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2);
  padding: 10px 12px 8px; border-bottom: var(--line) solid var(--ink); border-right: 0; }
.tb .tb-brand b { font-family: var(--f-display); font-weight: 900; font-size: 34px; line-height: 1; color: var(--ink); letter-spacing: 0; text-transform: none; white-space: nowrap; }
.tb .tb-brand em { font-style: normal; font-size: 9px; text-align: right; line-height: 1.5; }
.tb span { display: block; font-family: var(--f-text); font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--ink); margin-top: 2px; overflow-wrap: anywhere; }
.tb > div:nth-child(odd):not(.tb-brand), .tb > div:last-child { border-right: 0; }
.tb > div:nth-last-child(-n+2) { border-bottom: 0; }
.tb > div:nth-child(even):not(.tb-brand) { border-right: 1px solid var(--rule); }
/* compact title block */
.tb-compact { display: inline-block; border-top: var(--line) solid currentColor; border-left: var(--line) solid currentColor; padding: 8px 12px 6px; background: var(--ground); }
.tb-compact b { display: block; font-family: var(--f-display); font-weight: 900; font-size: 24px; line-height: 1; color: var(--ink); }
.tb-compact i { display: block; font-style: normal; font-family: var(--f-mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--pencil); margin-top: 4px; }
/* presented-by: the product keeps its name, Smarter Artist signs as DRAWN BY */
.tb-endorsed { display: grid; grid-template-columns: auto auto; width: max-content; max-width: 100%; border-top: var(--line) solid currentColor; border-left: var(--line) solid currentColor; background: var(--ground); }
.tb-endorsed > div { padding: 8px 12px 6px; min-width: 0; }
.tb-endorsed > div + div { border-left: 1px solid var(--rule); }
.tb-endorsed .label { display: block; font-size: 9px; }
.tb-endorsed b { display: block; font-family: var(--f-display); font-weight: 900; line-height: 1; color: var(--ink); }
.tb-endorsed .proj b { font-size: 24px; }
.tb-endorsed .drawn b { font-size: 18px; }
/* stamp */
.stamp { display: inline-grid; place-items: center; width: 56px; height: 56px; border: var(--line) solid currentColor; font-family: var(--f-display); font-weight: 900; font-size: 30px; line-height: 1; position: relative; }
.stamp::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 9px; height: 2px; background: var(--marker); }

/* ---------- drawing kit as CSS ---------- */
/* dimension line: attaches a name to a span; replaces eyebrows */
.dim { position: relative; display: flex; justify-content: center; align-items: center; min-height: 22px; border-left: 1.5px solid currentColor; border-right: 1.5px solid currentColor; }
.dim::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: currentColor; transform: translateY(-50%); }
.dim > span { position: relative; background: var(--ground); padding: 0 var(--s1); font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.dim.dim-start { justify-content: flex-start; }
.dim.dim-start > span { margin-left: var(--s2); }
.leader { display: block; width: 100%; height: 1.5px; background: currentColor; }

/* detail callout: station number over code; our link style */
.callout { display: inline-flex; align-items: center; text-decoration: none; color: inherit; max-width: 100%; }
.callout .bubble { flex: none; position: relative; width: 58px; height: 58px; border: var(--line) solid currentColor; border-radius: 50%; background: var(--ground); }
.callout .bubble::after { content: ""; position: absolute; left: 0; right: 0; top: 27px; height: 2px; background: currentColor; }
.callout .bubble b { position: absolute; left: 0; right: 0; top: 5px; text-align: center; font-family: var(--f-display); font-weight: 900; font-size: 21px; line-height: 1; }
.callout .bubble i { position: absolute; left: 0; right: 0; top: 34px; text-align: center; font-style: normal; font-family: var(--f-mono); font-size: 9px; letter-spacing: .02em; }
.callout .lead { flex: 0 0 40px; height: 1.5px; background: currentColor; }
.callout .what { padding-left: var(--s1); font-weight: 700; font-size: var(--t-small); line-height: 1.3; }
.callout:hover .what, .callout:focus-visible .what { text-decoration: underline; }

/* section cut: event above the line, pressure hatched below */
.cut { border: 1.5px solid currentColor; }
.cut > div { position: relative; padding: 10px 12px; border-top: 1.5px solid currentColor; }
.cut > div:first-child { border-top: 0; }
.cut > div.hatched { background: repeating-linear-gradient(45deg, transparent 0 9px, var(--pp-hatch) 9px 10.5px); }
.bp .cut > div.hatched { background: repeating-linear-gradient(45deg, transparent 0 9px, #2A3D60 9px 10.5px); }
.cut > div > span { background: var(--ground); padding: 0 4px; }

/* scale bar */
.scale { display: inline-block; }
.scale .bars { display: flex; }
.scale .bars i { display: block; width: 64px; height: 14px; border: 1.5px solid currentColor; margin-right: -1.5px; }
.scale .bars i:nth-child(odd) { background: currentColor; }
.scale .ticks { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 10px; margin-top: 4px; }
.scale .kind { font-family: var(--f-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--pencil); margin-top: 6px; }

/* revision cloud wraps one thing per sheet */
.clouded { position: relative; display: inline-block; padding: 8px 18px 10px; }
.clouded > svg.cloud { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.clouded > svg.cloud path { fill: none; stroke: var(--marker); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }

/* ---------- the hand and the plain notes ---------- */
.hand { font-family: var(--f-hand); color: var(--note-orange); font-size: var(--t-hand); line-height: 1.1; font-weight: 400; text-transform: lowercase; }
.note { font-style: italic; font-size: var(--t-small); line-height: 1.45; padding-left: 12px; border-left: var(--line) solid var(--pencil); color: var(--muted); }

/* a row with a margin column; notes never sit on text */
.annotated { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 260px); column-gap: var(--s6); align-items: start; }
.annotated > .margin { padding-top: var(--s1); }
.annotated .margin .hand { display: block; position: relative; padding-left: 28px; transform: rotate(-2deg); transform-origin: left top; }
.annotated .margin .hand::before { content: ""; position: absolute; left: 0; top: .6em; width: 20px; height: 2.5px; background: var(--note-orange); border-radius: 2px; }
@media (max-width: 899px) {
  .annotated { grid-template-columns: minmax(0, 1fr); }
  .annotated > .margin { padding-top: var(--s2); }
  .annotated .margin .hand { transform: none; padding-left: 14px; border-left: 2.5px solid var(--note-orange); }
  .annotated .margin .hand::before { display: none; }
}

/* ---------- controls (tier three: people already know them) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s1); min-height: 48px; padding: 11px 22px;
  font-family: var(--f-display); font-weight: 900; font-size: 22px; line-height: 1; letter-spacing: .01em;
  border: var(--line) solid transparent; border-radius: 0; cursor: pointer; text-decoration: none; text-align: center; }
.btn-primary { background: var(--pp-ink); color: var(--pp-paper); border-color: var(--pp-ink); }
.btn-primary:hover { background: #1c2a45; }
.bp .btn-primary { background: var(--bp-marker); color: var(--bp-ink); border-color: var(--bp-marker); }
.bp .btn-primary:hover { background: #ff7438; }
.btn-primary:focus-visible { outline: var(--focus); outline-offset: var(--focus-offset); }
.btn[disabled], .btn[aria-disabled="true"] { background: #DDD5C2; color: #6F6A5E; border-color: #DDD5C2; cursor: not-allowed; }
.btn-plain { background: transparent; color: var(--ink); border-color: currentColor; }
.btn-plain:hover { background: rgba(15, 26, 46, .06); }
.textlink { font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }

/* fields */
.field { display: block; margin-bottom: var(--s3); }
.field > .field-label { display: block; font-weight: 700; font-size: 16px; margin-bottom: 4px; }
.field > .field-hint { display: block; font-size: 14px; color: var(--muted); margin-bottom: var(--s1); }
.input, .textarea, .select { display: block; width: 100%; border: var(--line) solid var(--pp-ink); border-radius: 0; background: #FBF9F2; color: var(--pp-ink); padding: 10px 12px; font-size: 17px; line-height: 1.4; }
.textarea { min-height: 120px; resize: vertical; }
.input:focus-visible, .textarea:focus-visible, .select:focus-visible { outline: var(--focus); outline-offset: 2px; }
.field-error .input, .field-error .textarea { border-color: var(--pp-ink); border-style: dashed; }
.fieldset { border: 0; padding: 0; margin: 0 0 var(--s3); min-width: 0; }
.fieldset > legend { font-weight: 700; font-size: 16px; margin-bottom: var(--s1); padding: 0; }

/* choice: unselected / selected (the reader's pick, tinted, with a check) */
.choices { display: grid; gap: var(--s1); }
.choice { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--s2); min-height: 48px;
  border: var(--line) solid var(--pp-ink); background: #FBF9F2; padding: 10px 14px; cursor: pointer; font-size: 16px; line-height: 1.35; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice .pick { flex: none; font-family: var(--f-text); font-weight: 700; font-size: 14px; color: var(--pp-text-orange); visibility: hidden; }
.choice:has(input:checked) { background: var(--pp-pick); border-color: var(--pp-marker); }
.choice:has(input:checked) .pick { visibility: visible; }
.choice:has(input:focus-visible) { outline: var(--focus); outline-offset: var(--focus-offset); }
.choice.is-picked { background: var(--pp-pick); border-color: var(--pp-marker); }
.choice.is-picked .pick { visibility: visible; }

/* the ruler: scores are bars you fill, no sliders, no stars */
.ruler { display: inline-flex; border: 0; padding: 0; margin: 0; }
.ruler label { position: relative; display: block; width: 22px; height: 22px; border: var(--line) solid var(--pp-ink); margin-right: 3px; cursor: pointer; background: #FBF9F2; }
.ruler input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ruler label:has(input:focus-visible) { outline: var(--focus); outline-offset: 2px; }
.ruler:has(input[value="1"]:checked) label:nth-of-type(-n+1),
.ruler:has(input[value="2"]:checked) label:nth-of-type(-n+2),
.ruler:has(input[value="3"]:checked) label:nth-of-type(-n+3),
.ruler:has(input[value="4"]:checked) label:nth-of-type(-n+4),
.ruler:has(input[value="5"]:checked) label:nth-of-type(-n+5) { background: var(--pp-ink); }
.bars-ro { display: inline-flex; gap: 3px; vertical-align: middle; }
.bars-ro i { display: block; width: 14px; height: 14px; border: var(--line) solid var(--pp-ink); }
.bars-ro i.on { background: var(--pp-ink); }

/* loading: a dimension line that fills */
.loading { max-width: 420px; }
.loading .meter { position: relative; height: 14px; margin: 8px 0 6px; border-left: var(--line) solid var(--pp-ink); border-right: var(--line) solid var(--pp-ink); }
.loading .meter::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 1px; background: var(--pp-ink); opacity: .35; }
.loading .meter > i { display: block; position: absolute; left: 0; top: 5px; height: 3px; width: var(--fill, 0%); background: var(--pp-ink); transition: width .25s linear; }

/* empty */
.empty { border: var(--line) dashed var(--pp-pencil); padding: var(--s6) var(--s3); text-align: center; }
.empty h3 { font-size: 30px; margin-bottom: 6px; }

/* error */
.error { display: grid; grid-template-columns: 26px 1fr; gap: 6px 14px; border: var(--line) solid var(--pp-ink); padding: 14px 16px; background: #FBF9F2; }
.error .mark { width: 26px; height: 26px; border: var(--line) solid var(--pp-ink); display: grid; place-items: center; font-family: var(--f-display); font-weight: 900; font-size: 17px; line-height: 1; }
.error b { display: block; font-size: 16px; }
.error p { font-size: 15px; line-height: 1.45; }

/* success: the approval stamp, in ink */
.saved { display: inline-block; border: var(--line) solid var(--pp-ink); padding: 8px 14px 6px; transform: rotate(-2deg); background: #FBF9F2; }
.saved b { display: block; font-family: var(--f-display); font-weight: 900; font-size: 24px; line-height: 1; }
.saved i { display: block; font-style: normal; font-family: var(--f-mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--pp-pencil); margin-top: 4px; }

/* status is ink with a square marker; never orange */
.status { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.status::before { content: ""; flex: none; width: 10px; height: 10px; border: 1.5px solid currentColor; }
.status.live::before { background: currentColor; }
.status.prog::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }

/* ---------- tables: the sheet index ---------- */
.index { width: 100%; border-collapse: collapse; border-top: var(--line) solid currentColor; border-bottom: var(--line) solid currentColor; }
.index th { text-align: left; font-family: var(--f-mono); font-weight: 400; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--pencil); padding: 10px 12px; border-bottom: var(--line) solid currentColor; }
.index td { padding: 10px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; font-size: 15px; line-height: 1.4; }
.index tr:last-child td { border-bottom: 0; }
.index .code { font-family: var(--f-display); font-weight: 900; font-size: 22px; line-height: 1; white-space: nowrap; }
.index .name { font-weight: 700; }
.index .num { font-family: var(--f-display); font-weight: 900; font-size: 20px; }

/* ---------- the tool shell: blueprint rail, paper work area ---------- */
.tool { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.rail { position: relative; padding: var(--s4) 0 var(--s4); border-right: var(--line) solid var(--bp-vellum); }
.rail .rail-name { display: block; padding: 0 var(--s3); font-family: var(--f-display); font-weight: 900; font-size: 26px; line-height: 1; color: var(--bp-vellum); text-decoration: none; }
.rail .rail-code { display: block; padding: 6px var(--s3) 0; }
.rail nav { margin-top: var(--s4); }
.rail nav ol { list-style: none; }
.rail nav a { display: block; padding: 9px var(--s3) 9px 21px; border-left: 3px solid transparent; text-decoration: none; color: var(--bp-muted); font-size: 15px; line-height: 1.3; }
.rail nav a .label { display: block; font-size: 9px; margin-top: 2px; }
.rail nav a:hover { color: var(--bp-vellum); }
.rail nav a[aria-current="step"] { border-left-color: var(--bp-vellum); color: var(--bp-vellum); font-weight: 700; }
.rail .rail-foot { padding: var(--s4) var(--s3) 0; }
.rail .rail-foot a { color: var(--bp-pencil); font-family: var(--f-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.stationbar { display: none; }
.stationbar .sb-top { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); }
.work { position: relative; display: flex; flex-direction: column; min-width: 0; }
.work-body { flex: 1; padding: clamp(24px, 4vw, 56px) clamp(20px, 4.5vw, 64px) var(--s6); }
.work-foot { display: flex; justify-content: flex-end; align-items: flex-end; flex-wrap: wrap; gap: var(--s2); }
.work-foot .foot-note { flex: 1 1 260px; padding: 0 var(--s3) var(--s2) clamp(20px, 4.5vw, 64px); }
.module { max-width: 920px; }
.module + .module { margin-top: var(--s8); }
.module-head { margin-bottom: var(--s4); }
.module-head h2 { font-size: clamp(32px, 3.6vw, 46px); }
.module-head p { margin-top: var(--s1); color: var(--pp-muted); max-width: 44em; }
.module-actions { margin-top: var(--s4); }
.needs-js { border: var(--line) solid var(--pp-ink); padding: 12px 16px; margin-bottom: var(--s4); background: #FBF9F2; font-size: 16px; }
.needs-js b { font-weight: 700; }
html.js .needs-js { display: none; }
html.js .module[hidden] { display: none; }
.result-block { margin-top: var(--s4); }
@media (max-width: 899px) {
  .tool { grid-template-columns: minmax(0, 1fr); }
  .rail { display: none; }
  .stationbar { display: block; border-bottom: var(--line) solid var(--bp-vellum); padding: 12px var(--s2); }
  .stationbar .sb-name { font-family: var(--f-display); font-weight: 900; font-size: 20px; line-height: 1; color: var(--bp-vellum); text-decoration: none; }
  .stationbar details { position: relative; }
  .stationbar summary { cursor: pointer; list-style: none; font-size: 14px; color: var(--bp-vellum); padding: 6px 2px; white-space: nowrap; }
  .stationbar summary::-webkit-details-marker { display: none; }
  .stationbar summary::after { content: " \25BE"; }
  .stationbar details:not([open]) ol { display: none; }
  .stationbar ol { list-style: none; margin-top: 8px; }
  .stationbar ol a { display: block; padding: 8px 0; color: var(--bp-muted); text-decoration: none; font-size: 15px; border-top: 1px solid var(--bp-rule); }
  .stationbar ol a[aria-current="step"] { color: var(--bp-vellum); font-weight: 700; }
}

/* ---------- general layout helpers ---------- */
.stack > * + * { margin-top: var(--s3); }
.stack-lg > * + * { margin-top: var(--s6); }
.cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s6); }
.cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
@media (max-width: 899px) { .cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .cols-2, .cols-3 { grid-template-columns: minmax(0, 1fr); } }
.rule-top { border-top: var(--line) solid currentColor; padding-top: var(--s2); }
.panel { border: var(--line) solid currentColor; padding: var(--s3); background: var(--ground); }
.pp .panel { background: #FBF9F2; }

/* ---------- phones: tighter frame, compact title block ---------- */
@media (max-width: 599px) {
  .sheet { padding: 12px; }
  .frame { inset: 12px; }
  .frame::before { inset: 4px; }
  .reg { display: none; }
  .tb { width: 100%; }
  .tb .tb-brand b { font-size: 28px; }
  .sheet-foot .foot-note, .work-foot .foot-note { padding-left: 20px; }
}
@media (max-width: 359px) {
  .tb .tb-brand { flex-direction: column; gap: 4px; }
  .tb .tb-brand em { text-align: left; }
}

@media print {
  .rail, .stationbar, .no-print, .skip, .drawing-line { display: none !important; }
  .tool { display: block; }
  body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* sheet index on phones: each row becomes a small card */
.index tbody th.group { text-align: left; padding: 22px 12px 8px; border-bottom: var(--line) solid currentColor; font-family: var(--f-display); font-weight: 800; font-size: 24px; letter-spacing: 0; text-transform: none; color: var(--ink); }
.index tbody th.group a { text-decoration: none; }
.index tbody th.group a:hover { text-decoration: underline; }
.index tbody th.group .label { margin-left: 10px; }
@media (max-width: 699px) {
  .index.stackable thead { display: none; }
  .index.stackable, .index.stackable tbody, .index.stackable tr, .index.stackable td, .index.stackable th.group { display: block; width: 100%; }
  .index.stackable tr { padding: 12px 0; border-bottom: 1px solid var(--rule); }
  .index.stackable tr.grouprow { padding: 0; border-bottom: 0; }
  .index.stackable td { border: 0; padding: 2px 4px; }
  .index.stackable td[data-label]::before { content: attr(data-label); display: block; font-family: var(--f-mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--pencil); margin-top: 6px; }
  .index.stackable td.code::before, .index.stackable td.name::before { display: none; }
}
.clouded-box { position: relative; }
.clouded-box > svg.cloud { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); overflow: visible; pointer-events: none; }
.clouded-box > svg.cloud path { fill: none; stroke: var(--marker); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }