/* Drawing sheets (Pedal and Cable): the frame and its zone marks, the ruled title block, section
   rhythm, statement and document headings, tables, view captions and print. base.css stays as it is;
   this file only adds. The frame line sits --half outside the content edge, so the h1 still starts at
   --edge under the wordmark. Rules are 1px paper; table rows are 1px --rule (enamel on screen, ink on paper). Nothing is centred. */
:root{--half:calc(var(--edge) / 2);--pad:calc(var(--half) - 1px);--gap:24px;--rule:var(--enamel)}

/* ---- The sheet and its frame. main.sheet's top padding holds the 24px zone-number strip. */
main.sheet{position:relative;padding-top:32px}
.frame{border:1px solid var(--paper);margin-inline:calc(-1 * var(--half));padding:0 var(--pad) 64px}

/* ---- Zone marks: drawn by js/ui/draw.js over the whole sheet, edge to edge. Decoration only. */
svg.zones{position:absolute;top:0;left:calc(-1 * var(--edge));width:calc(100% + 2 * var(--edge));height:100%;overflow:visible;pointer-events:none;color:var(--paper)}
svg.zones line{stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke}
svg.zones text{font:400 13.5px/1 var(--mono);fill:currentColor}

/* ---- Title block. Its top edge is the frame's top line and it runs to the frame's side lines.
   Desktop: the main cell over columns 1-7, the fields over 8-12 as a 6-part grid. The 1px rules
   between field cells are the paper showing through a 1px grid gap. */
.title-block{margin-inline:calc(-1 * var(--pad));display:grid;grid-template-columns:calc(var(--pad) + (100% - 2 * var(--pad) - 11 * var(--gap)) * 7 / 12 + 7 * var(--gap)) minmax(0,1fr);border-bottom:1px solid var(--paper)}
.tb-main{padding:24px var(--gap) 24px var(--pad);min-width:0}
.tb-main .lead{margin-top:16px;max-width:34em}
.tb-fields{margin:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;padding-left:1px;background:var(--paper)}
.tb-cell{grid-column:span 2;padding:12px 16px;background:var(--deep);min-width:0}
.tb-cell[data-key="title"]{grid-column:span 6}
.tb-cell dt{font-size:15px;line-height:20px}
.tb-cell dd{margin:4px 0 0;font-size:17px;line-height:1.4}
.tb-cell dd.mono{font-family:var(--mono)}

.noscript{padding-top:24px;font-size:15px;line-height:20px;color:var(--paper)}

/* ---- Sections: 48px under the title block, then 96px apart, space only, no rules between. */
.block{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start;margin-top:48px}
.block > *{grid-column:1 / -1;min-width:0}
.block:empty{display:none}
.block:not(:empty) ~ .block{margin-top:96px}

/* ---- Headings. A statement is set like the h1; a document heading is Body 700, as a drawing
   titles its parts list. */
.statement{margin:0;max-width:13.2em;font-size:clamp(46px,6.9vw,116px);font-weight:700;line-height:.93;letter-spacing:-.03em;text-wrap:balance}
.doc-h{margin:0;font-size:1em;font-weight:700;line-height:1.4}

/* ---- Tables: Label cells, a paper rule under the header and along the bottom, enamel between rows. */
.doc-table{width:100%;border-collapse:collapse;font-size:15px;line-height:20px}
.doc-table th,.doc-table td{padding:12px 16px;text-align:left;vertical-align:top;font-weight:400}
.doc-table tr > :first-child{padding-left:0}
.doc-table thead th{border-bottom:1px solid var(--paper)}
.doc-table tbody tr{border-bottom:1px solid var(--rule)}
.doc-table tbody tr:last-child{border-bottom-color:var(--paper)}
.doc-table .mono{font-family:var(--mono);font-size:13.5px}

/* ---- Figures: the caption 12px under its drawing, the view letter in Commit Mono. */
figure{margin:0}
figcaption{margin-top:12px;font-size:15px;line-height:20px}
figcaption .vl{font-family:var(--mono);font-size:13.5px}

/* ---- Code. Inline code and listings are Commit Mono, paper, on the sheet's own ground: one face,
   one weight, one colour, so a comment reads exactly like the code around it. Listing line numbers
   are a CSS counter, so they are never selected or copied. */
.prose code{font-family:var(--mono);font-size:13.5px;color:var(--paper);background:none;white-space:nowrap}
.listing pre{margin:0;padding:16px;border:1px solid var(--paper);background:var(--deep);color:var(--paper);font:400 13.5px/1.5 var(--mono);overflow-x:auto}
.listing code{font:inherit;counter-reset:ln}
.listing .ln{counter-increment:ln}
.listing .ln::before{content:counter(ln);display:inline-block;width:32px;margin-right:16px;text-align:right;-webkit-user-select:none;user-select:none}
.listing pre:focus-visible{outline:2px solid var(--paper);outline-offset:3px}

/* ---- Footnotes. A marker is the font's own superscript figure at the text's size (Apfel Grotezk has
   sups), so no new type size appears; 4px each side widens its hit area. Back links are Label with a
   1px underline. A targeted footnote gets a 1px outline at once, with no flash. */
sup.fn{font-size:inherit;line-height:inherit;vertical-align:baseline;font-variant-position:super;font-feature-settings:"sups"}
sup.fn a{padding:0 4px;margin-left:-3px;color:var(--paper);text-decoration:none}
sup.fn a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
sup.fn a:focus-visible{outline:2px solid var(--paper);outline-offset:2px}
.footnotes a{color:var(--paper);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.footnotes a:hover{text-decoration-thickness:2px}
.fn-back{margin-left:8px}
.footnotes li:target{outline:1px solid var(--paper);outline-offset:4px}

/* ---- The drawing kit's classes, for every drawn view on both sheets. Fills and line kinds live here,
   never in SVG attributes, so print can swap the tokens. Strokes are the drawing's currentColor
   (paper) and keep their pixel width at any scale. */
.f-enamel{fill:var(--enamel)}
.f-rubber{fill:var(--rubber)}
.f-deep{fill:var(--deep)}
.f-paper{fill:var(--paper)}
.f-lamp{fill:var(--lamp)}
.f-none{fill:none}
.l-hair,.l-obj,.l-hi,.l-hidden,.l-centre,.l-phantom{stroke:currentColor;vector-effect:non-scaling-stroke;stroke-linejoin:miter;stroke-linecap:butt}
.l-hair,.l-hidden,.l-centre,.l-phantom{stroke-width:1px}
.l-obj{stroke-width:1.5px}
.l-hi{stroke-width:2px}
.l-hidden{stroke-dasharray:6 4}
.l-centre{stroke-dasharray:16 4 2 4}
.l-phantom{stroke-dasharray:16 4 2 4 2 4}
.hatch-line{stroke:currentColor;stroke-width:1px}
.t-label{font:400 15px/20px var(--sans);fill:currentColor}
.t-num{font:400 13.5px/1 var(--mono);fill:currentColor}
/* A drawn part's focus box: a 2px paper rectangle 4px outside its shapes, shown on focus-visible. */
.focus-box{visibility:hidden;fill:none;stroke:currentColor;stroke-width:2px;vector-effect:non-scaling-stroke;pointer-events:none}

/* ---- The linked highlight, shared by the Pedal sheet and later the Manual. State comes from the
   is-active class set by script, never a hover selector, because iOS emulates hover on a tap. Active: the part's
   shapes take a paper fill and a 2px ink outline, its balloon a paper fill, a 2px stroke and an ink
   numeral, its leader 2px with the dot still paper; its row a paper ground with ink text. Always a
   ground change plus a weight change, never colour alone, and no other part is dimmed. The run
   lamp's lens keeps its own fill. */
g.part{outline:none}
.part:focus-visible .focus-box{visibility:visible}
g.shapes .face,g.shapes .edge,g.part .balloon circle,g.part .balloon text,g.part .leader line,[role="row"][data-part]{transition:fill 120ms ease-out,stroke 120ms ease-out,stroke-width 120ms ease-out,background-color 120ms ease-out,color 120ms ease-out}
g.shapes.is-active .face:not(.lens){fill:var(--paper)}
g.shapes.is-active .edge{stroke:var(--ink);stroke-width:2px}
g.part.is-active .balloon circle{fill:var(--paper);stroke-width:2px}
g.part.is-active .balloon text{fill:var(--ink)}
g.part.is-active .leader line{stroke-width:2px}
[role="row"][data-part].is-active{background-color:var(--paper);color:var(--ink)}
[role="row"]:has(.part-ref:focus-visible){outline:2px solid var(--paper);outline-offset:3px}
.part-ref:focus-visible{outline:none}
html.calm g.shapes .face,html.calm g.shapes .edge,html.calm g.part .balloon circle,html.calm g.part .balloon text,html.calm g.part .leader line,html.calm [role="row"][data-part]{transition:none}
@media (prefers-reduced-motion:reduce){
  g.shapes .face,g.shapes .edge,g.part .balloon circle,g.part .balloon text,g.part .leader line,[role="row"][data-part]{transition:none}
}

/* ---- Tablet: the main cell full width, the fields in three columns below it, a 16px grid gap. */
@media (max-width:1199px){
  :root{--gap:16px}
  .title-block{grid-template-columns:minmax(0,1fr)}
  .tb-main{padding-right:var(--pad)}
  .tb-fields{grid-template-columns:repeat(3,minmax(0,1fr));padding:1px 0 0}
  .tb-cell{grid-column:span 1}
  .tb-cell[data-key="title"]{grid-column:span 3}
}

/* ---- Phone: the frame keeps only its top and bottom lines, full-bleed like the nav cable; no zone
   marks; one column. The fields form two columns: left values start at --edge, right ones sit 16px
   past a 1px rule, and Sheet moves after Drawn by. */
@media (max-width:760px){
  main.sheet{padding-top:24px}
  svg.zones{display:none}
  .frame{border-inline:0;margin-inline:calc(-1 * var(--edge));padding:0 var(--edge) 48px}
  .title-block{margin-inline:calc(-1 * var(--edge))}
  .tb-main{padding:24px var(--edge)}
  .tb-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tb-cell{padding:12px var(--edge) 12px 16px}
  .tb-cell[data-key="title"]{order:1;grid-column:span 2;padding-inline:var(--edge)}
  .tb-cell[data-key="number"]{order:2}
  .tb-cell[data-key="revision"]{order:3}
  .tb-cell[data-key="scale"]{order:4}
  .tb-cell[data-key="date"]{order:5}
  .tb-cell[data-key="drawn"]{order:6}
  .tb-cell[data-key="sheet"]{order:7}
  .tb-cell[data-key="material"]{order:8;grid-column:span 2;padding-inline:var(--edge)}
  .tb-cell[data-key="status"]{order:9;grid-column:span 2;padding-inline:var(--edge)}
  .tb-cell:is([data-key="number"],[data-key="scale"],[data-key="drawn"]){padding:12px 16px 12px var(--edge)}
  .block{grid-template-columns:minmax(0,1fr)}
  .block:not(:empty) ~ .block{margin-top:64px}
}

/* Phone type steps follow Phase 1's own query, so a portrait tablet reads with phone sizes. */
@media (max-width:760px),(max-aspect-ratio:1/1){
  .statement{font-size:clamp(40px,12vw,76px)}
  .tb-cell dd{font-size:15px}
  figcaption .vl,.doc-table .mono,.listing pre,.t-num{font-size:12px}
}

/* ---- Print: the sheet as ink on white A4, for both sheets. The phone layout is the print layout
   (A4 less margins is about 703px, so the phone rules apply); these rules sit on top of it. Tokens
   swap so every class-filled drawing and every text colour turns to ink on white; anything that
   was a paper ground loses it outright, so "Background graphics" cannot print slabs of ink. */
.print-only{display:none}
@page{size:A4;margin:14mm 12mm}
@media print{
  :root{--paper:#14201a;--deep:#fff;--enamel:#fff;--rubber:#fff;--rule:#14201a;--edge:16px}
  html,body{background:#fff}
  body.shell{min-height:0;padding:0}
  .print-only{display:block}

  /* The nav: plain words 16px apart, no cable, no tags, no punched hole; the current page in 700. */
  .tags{gap:4px 16px}
  .tags::before,.tags a[aria-current="page"]::before{display:none}
  .tags a,.tags a:hover,.tags a[aria-current="page"],.tags a[aria-current="page"]:hover{height:auto;padding:0;background:none;color:var(--ink)}
  a,.word,.colophon a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
  a:focus-visible,button:focus-visible,.listing pre:focus-visible{outline:none}

  /* The frame: a 1px line on all four sides, drawn again on every page (Safari draws only the first
     page's top and the last page's bottom; accepted). Zone marks stay on screen. */
  main.sheet{padding-top:16px}
  svg.zones{display:none}
  .frame{border:1px solid var(--paper);margin-inline:0;padding:0 var(--edge) 24px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
  .title-block{margin-inline:calc(-1 * var(--edge))}
  /* The title block's cell rules are its ground showing through a 1px gap, so that ground prints. */
  .tb-fields,.tb-cell{-webkit-print-color-adjust:exact;print-color-adjust:exact}

  .listing pre{padding:12px;background:none;border:1px solid var(--ink);color:var(--ink);line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere;overflow:visible}

  /* Sections flow as plain blocks on paper, whatever width rules the page size matches (Chrome
     measures media queries in print against the page, not the printable area), so nothing is
     placed by the screen grid and the break rules below can work between headings and text. */
  .block{display:block}
  .block:not(:empty) ~ .block{margin-top:40px}
  .shell .colophon{padding-top:16px;break-inside:avoid}
  .statement{font-size:40px;max-width:none}
  .doc-table th,.doc-table td{padding-block:8px}

  /* No highlight, pin or focus prints: a pinned part and its row keep their rest look, at once. */
  g.shapes .face,g.shapes .edge,g.part .balloon circle,g.part .balloon text,g.part .leader line,[role="row"][data-part]{transition:none}
  g.shapes.is-active .face:not(.lens){fill:#fff}
  g.shapes.is-active .edge{stroke:currentColor;stroke-width:1.5px}
  g.part.is-active .balloon circle{fill:#fff;stroke-width:1px}
  g.part.is-active .balloon text{fill:currentColor}
  g.part.is-active .leader line{stroke-width:1px}
  [role="row"][data-part].is-active{background:none;color:inherit}
  .part:focus-visible .focus-box{visibility:hidden}
  [role="row"]:has(.part-ref:focus-visible),sup.fn a:focus-visible,.footnotes li:target{outline:none}
  sup.fn a{color:var(--ink)}

  .title-block,figure,table,.spec-group,.listing,.footnotes li{break-inside:avoid}
  h1,h2,h3,.statement,.doc-h,.lead{break-after:avoid}
  .f-lamp{fill:#fff}
}