/* ============================================================
   sheet.css — layout for the engineering-drawing sheet.
   Geometry is transcribed from the turn-4 reference. We keep
   the browser-default content-box model (as the reference did)
   so the nested-loop clip dimensions stay pixel-exact — there is
   deliberately no global box-sizing reset.
   ============================================================ */

html, body { margin: 0; }
/* the idle 📎 takeover reflows text; don't let scroll-anchoring shift the page
   (which would fire a scroll event and abort the effect mid-run) */
html { overflow-anchor: none; }

body {
  background: var(--page-outside);
  color: var(--ink);
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 40px 20px;
  min-height: 100vh;
  box-sizing: border-box;
  overflow-x: hidden;
}

.viewport { position: relative; }

/* The sheet: fixed 1240px content + 26px pad (outer box = 1292px).
   scripts/main.js scales this down to fit narrow viewports. */
.sheet {
  width: 1240px;
  padding: 26px;
  position: relative;
  background: var(--sheet-bg);
  transform-origin: top left;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.03), 0 22px 60px -26px rgba(0, 0, 0, 0.4);
}

/* ---- drafting coordinate border (decorative) ---- */
.coords { position: absolute; display: flex; font-size: 8.5px; color: var(--coord); }
.coords span { flex: 1; text-align: center; }
.coords.top    { top: 7px;    left: 26px; right: 26px; }
.coords.bottom { bottom: 7px; left: 26px; right: 26px; }
.coords.left   { left: 7px;  top: 26px; bottom: 26px; flex-direction: column; }
.coords.right  { right: 7px; top: 26px; bottom: 26px; flex-direction: column; }
.coords.left span, .coords.right span { display: flex; align-items: center; }

/* ---- inner sheet frame + blueprint grid ---- */
.frame {
  border: 2px solid var(--ink);
  padding: 34px 38px 30px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  background-image:
    repeating-linear-gradient(0deg,  var(--grid-fine)   0 1px, transparent 1px 16px),
    repeating-linear-gradient(90deg, var(--grid-fine)   0 1px, transparent 1px 16px),
    repeating-linear-gradient(0deg,  var(--grid-coarse) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(90deg, var(--grid-coarse) 0 1px, transparent 1px 96px);
}

/* ---- 1. masthead ---- */
.masthead {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  border-bottom: 2px solid var(--ink); padding-bottom: 18px;
}
.wordmark-block { display: flex; flex-direction: column; gap: 8px; }
.wordmark {
  margin: 0; font-family: 'Patrick Hand', cursive; font-weight: 400;
  font-size: 46px; line-height: .95; letter-spacing: 1px; color: var(--ink);
}
.tagline { margin: 0; font-size: 10.5px; letter-spacing: 2.5px; color: var(--muted); }
.meta { text-align: right; font-size: 11px; line-height: 1.9; color: var(--secondary); }
.meta b { color: var(--ink); }
.sheet-toggle { font: inherit; background: none; border: 0; padding: 0; margin: 0; color: inherit; cursor: pointer; }
.sheet-toggle b { border-bottom: 1px dotted var(--muted); }
.sheet-toggle:hover b, .sheet-toggle:focus-visible b { border-bottom-color: var(--accent); color: var(--accent); outline: none; }
/* the sheet is #1 in ink, #2 in the cyanotype "print" — the number flips with the theme */
.sheet-toggle b::after { content: '1 OF 2'; }
:root[data-theme='cyanotype'] .sheet-toggle b::after { content: '2 OF 2'; }

/* ---- 2. FIG. 1 drawing field ---- */
.fig { position: relative; height: 600px; border: 2px solid var(--ink); background: var(--field-fill); margin: 0; }
.fig-abs { position: absolute; }
.fig-centerline { position: absolute; left: 50%; top: 24px; height: 430px; width: 0; border-left: 1px dashed var(--muted); opacity: .55; }

.clip-outer {
  position: absolute; left: 50%; top: 44px; transform: translateX(-50%);
  width: 150px; height: 296px; border: 5px solid var(--ink); border-radius: 75px;
  display: flex; align-items: flex-start; justify-content: center; padding-top: 34px;
}
.clip-mid {
  width: 85px; height: 238px; border: 5px solid var(--ink); border-radius: 43px;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 22px;
}
.clip-inner { width: 31px; height: 142px; border: 5px solid var(--ink); border-radius: 18px; }

/* dimension callouts */
.dim-v { display: flex; flex-direction: column; align-items: center; }
.dim-h { display: flex; align-items: center; }
.dim-v .dim-line { flex: 1; width: 1px; background: var(--muted); }
.dim-h .dim-line { flex: 1; height: 1px; background: var(--muted); }
.dim-arrow { color: var(--muted); font-size: 9px; line-height: 1; }
.dim-v .dim-label { font-size: 11px; color: var(--secondary); padding: 3px 0; }
.dim-h .dim-label { font-size: 11px; color: var(--secondary); padding: 0 6px; }

.datum { display: flex; flex-direction: column; align-items: center; }
.datum-stem { width: 1px; height: 8px; background: var(--muted); }
.datum-flag { font-size: 10.5px; color: var(--secondary); border: 1px solid var(--secondary); padding: 1px 6px; background: var(--sheet-bg); }

.fcf { display: flex; border: 1px solid var(--secondary); background: var(--sheet-bg); }
.fcf span { font-size: 10.5px; color: var(--secondary); padding: 3px 8px; }
.fcf span:not(:last-child) { border-right: 1px solid var(--secondary); }

.bubble { text-align: center; }
.hatch-disc { width: 62px; height: 62px; margin: 0 auto; border: 2px solid var(--ink); border-radius: 50%; background: repeating-linear-gradient(45deg, var(--secondary) 0 2px, transparent 2px 6.5px); }
.detail-disc { width: 72px; height: 72px; margin: 0 auto; border: 1.5px dashed var(--muted); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.detail-corner { width: 26px; height: 26px; border-top: 3px solid var(--ink); border-right: 3px solid var(--ink); border-top-right-radius: 20px; }
.bubble-cap { font-size: 10px; line-height: 1.6; color: var(--muted); margin-top: 8px; }

.fig-cap { position: absolute; bottom: 12px; font-size: 10px; color: var(--faint); }
.fig-cap.left  { left: 14px; }
.fig-cap.right { right: 14px; }

/* ---- 3. title block ---- */
.titleblock { border: 2px solid var(--ink); display: grid; grid-template-columns: 2.2fr 1fr .9fr .9fr; background: var(--titleblock-fill); }
.tb-cell { padding: 9px 14px 10px; border-right: 1px solid var(--ink); position: relative; }
.tb-cell:nth-child(4), .tb-cell:nth-child(8) { border-right: 0; }
.tb-cell:nth-child(n+5) { border-top: 1px solid var(--ink); }
.tb-label { font-size: 8.5px; letter-spacing: 1px; color: var(--faint); }
.tb-value { display: block; margin-top: 3px; font-size: 13.5px; font-weight: 700; color: var(--ink); }
button.tb-value { font-family: inherit; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; letter-spacing: inherit; }
.rev-trigger { border-bottom: 1.5px dotted var(--accent); width: fit-content; }
.rev-trigger:hover, .rev-trigger:focus-visible { color: var(--accent); outline: none; }

/* ---- 4/5/6/7/8 numbered sections ---- */
.spec { display: flex; flex-direction: column; gap: 12px; }
.spec-head { margin: 0; font-size: 13px; font-weight: 700; color: var(--ink); border-bottom: 1.5px solid var(--ink); padding-bottom: 7px; }
.spec-body { margin: 0; font-size: 13px; line-height: 1.75; color: var(--secondary); }

/* applications */
.apps { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 12px; }
.app-card { border: 1.5px dashed var(--muted); border-radius: 6px; padding: 16px 10px 12px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.art { height: 44px; display: flex; align-items: center; gap: 5px; }
.art-col { flex-direction: column; justify-content: flex-end; }
.apps .app-card:nth-child(2) .art { gap: 3px; }
.apps .app-card:nth-child(3) .art { gap: 4px; }
.node { width: 11px; height: 11px; border: 2px solid var(--ink); border-radius: 50%; }
.link { width: 15px; height: 2px; background: var(--ink); }
.wheels { display: flex; gap: 12px; }
.wheels span { width: 9px; height: 9px; border: 2px solid var(--ink); border-radius: 50%; }
.dotgrid { height: 44px; display: grid; grid-template-columns: repeat(3, 7px); gap: 5px; align-content: center; }
.dotgrid span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.dotgrid .hot { background: var(--accent); }
.app-label { font-size: 10px; letter-spacing: 1px; color: var(--muted); text-align: center; line-height: 1.5; }

/* tables (portfolio + ratings) */
.spec-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 11px; color: var(--secondary); }
.spec-table th { text-align: left; font-weight: 700; color: var(--ink); border-bottom: 1.5px solid var(--ink); padding: 0 18px 6px 0; vertical-align: bottom; }
.spec-table td { padding: 8px 18px 8px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.ratings th, .ratings td { padding-right: 20px; }
.spec-table th:last-child, .spec-table td:last-child { padding-right: 0; }
.spec-table td.company { color: var(--ink); }
.spec-table td.stage-accent { color: var(--accent); font-weight: 700; }

/* print-only cutting template is hidden on screen (shown by print.css) */
.print-template { display: none; }

/* notes + footer */
.notes { font-size: 11px; line-height: 2; color: var(--secondary); }
.sheet-footer { border-top: 2px solid var(--ink); padding-top: 14px; font-size: 11px; color: var(--muted); }
.sheet-footer b { color: var(--ink); }
.sheet-footer a { color: inherit; text-decoration: none; }
.sheet-footer a:hover b { text-decoration: underline; }