/* Stellar Engineering · blind-check.css · the two beam pages: demos/blind-check.html and demos/tests.html
   Built on site.css (tokens, header, footer, 12-column grid, cable links). This file adds only:
     --s/--sl   a third size, 15/22 px: labels, notes, tables, the arithmetic and the test list
     --pass     #17663a  dark green, 7.0:1 on white   structural state only: the word that states agreement or a passing run
     --fail     #a3132f  dark red,   7.8:1 on white   structural state only: disagreement, out of scope, a failure
                Passes are quiet and failures loud: a passing value is ink, and a status line colours only its status
                words, each by its own meaning.
     weight 600 for <strong> only (the governing ratio, a flagged answer)
     Measure    running text at 15 px is at most 33em (about 74 characters), at 17 px 34em; tables, formulas and the
                answers keep their columns
   Layout, 1100 px and up: the page reads on the column-5 axis, as the home page does. Columns 1-4 carry the
   inputs, the hand check's title and print button, and (tests.html) what a pass establishes. The inputs sit
   beside the drawing and the answers, so a change is seen where it is made. The DOM order is unchanged.
   Below 1100 px everything sits on one axis; below 760 px site.css turns the grid into one column.            */

:root { --s: 15px; --sl: 22px; --pass: #17663a; --fail: #a3132f; }

.beam main > * { grid-column: 1 / -1; min-width: 0; }
h2, h3 { margin: 0; font: inherit; }
strong { font-weight: 600; }
.nw { white-space: nowrap; }                     /* a number and its unit, a product: set by the page script, never broken */
figure { margin: 0; }
.note, .lbl, .status, caption, .assumptions, .source-links, .test-list { font-size: var(--s); line-height: var(--sl); }
.note, .lbl, caption, .assumptions { color: var(--grey); }

/* ---------- head: the h1 on the column-5 axis, as on the home page ---------- */
.demo-head { display: grid; grid-template-columns: subgrid; margin-top: calc(var(--u) * 1.5); }
.demo-head h1 { grid-column: 5 / 13; font-size: var(--d); line-height: var(--dl); letter-spacing: var(--track); }
.demo-head p { grid-column: 5 / 11; max-width: 34em; margin-top: 6px; color: var(--grey); }   /* every demo: the title in ink, then its grey lines */
noscript p { grid-column: 5 / 11; margin-top: var(--u); }

/* ---------- the problem (columns 1-4) beside the drawing and the answers (columns 5-12) ---------- */
.input-panel { grid-column: 1 / 5 !important; grid-row: 2; margin-top: calc(var(--u) * 2); }
.out { grid-column: 5 / 13 !important; grid-row: 2; margin-top: calc(var(--u) * 2); }

.controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px var(--g); align-items: end; }
.controls label { display: block; font-size: var(--s); line-height: var(--sl); color: var(--grey); }
.controls label:has(select) { grid-column: 1 / -1; }
/* every label on one line, so the label rows keep one rhythm: "Point position a (m from left)" needs about 200 px and
   "Uniform load w (kN/m)" about 160, so where half the panel is narrower than that the fields take a row each */
@media (min-width: 1100px) and (max-width: 1399px) { .controls label[for=point], .controls label[for=position] { grid-column: 1 / -1; } }
@media (min-width: 1100px) and (max-width: 1199px) { .controls { grid-template-columns: minmax(0, 1fr); } }
.controls input, .controls select { margin-top: 4px; }   /* fields, checkbox and buttons: the shared demo kit (site.css) */
.toggle { display: flex; align-items: center; gap: 12px; min-height: 44px; margin-top: 18px; cursor: pointer; }
#input-status { margin-top: 6px; }

/* the drawing: the script writes the member, supports, loads and dimensions in ink and one grey;
   the page sets the type (over the script's own font attribute) and keeps strokes at their px weights.
   It has the answers' width (columns 5-10), so the pin's ground line starts on the column-5 line and the roller's
   ends with the table; its labels are sized by the script (--label) to stay 15 px at any scale. */
.beam-figure { max-width: calc((100% - 7 * var(--g)) * 6 / 8 + 5 * var(--g)); }
.beam-picture { display: block; width: 100%; height: auto; aspect-ratio: 800 / 180; overflow: visible; }
.beam-picture path, .beam-picture circle { vector-effect: non-scaling-stroke; }
.beam-picture g { font-family: "Host Grotesk", "Host Grotesk Fallback", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: var(--label, 17.6px); }
.beam-figure figcaption { margin-top: 10px; max-width: 33em; }

/* ---------- the answers ---------- */
.results-panel { margin-top: calc(var(--u) * 2); }
.results-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; column-gap: var(--g); }
.key > span { display: block; }                     /* a two-line key: A Equations / B 60 elements */
.key .k { display: inline-block; width: 1.1em; color: var(--ink); }
.table-wrap { overflow-x: auto; }
.table-wrap.is-scroll { border-right: 1px solid var(--grey); }   /* a table that scrolls shows its cut edge (blind-check.js) */
.results-panel > .results-top, .results-panel > .table-wrap { max-width: calc((100% - 7 * var(--g)) * 6 / 8 + 5 * var(--g)); }   /* columns 5-10: A and B read side by side */
.results-panel > .note, .results-panel > .status { max-width: 33em; }                 /* the verdict and notes keep a reading measure */
table { border-collapse: collapse; width: 100%; text-align: left; font-variant-numeric: tabular-nums; }
caption { caption-side: top; text-align: left; padding: 4px 0 6px; }
th, td { padding: 10px 0; border-bottom: 1px solid var(--plan); vertical-align: baseline; white-space: nowrap; }
th { font-weight: 400; font-size: var(--s); color: var(--grey); }
thead th { border-bottom-color: var(--ink); }
thead th + th, td { text-align: right; padding-left: var(--g); }
tbody th { color: var(--ink); font-size: var(--t); }
td.fail { color: var(--fail); }                     /* and its value in the heavier weight: the flag is not colour alone; a passing value stays ink */
.status { margin-top: 12px; max-width: 33em; }
.status.note { color: var(--grey); }
.status.fail { color: var(--fail); }
.status:has(.st) { color: var(--ink); }          /* only the status words carry a state colour */
.status.pass .st { color: var(--pass); }          /* a line with one status word: its line's state (the tests' count) */
.status.fail .st { color: var(--fail); }
.status .st.ok { color: var(--pass); }            /* a line with several: each word by its own meaning (blind-check.js) */
.status .st.bad { color: var(--fail); }
#comparison-status { font-size: var(--t); line-height: var(--tl); margin-top: 14px; max-width: 34em; }
#comparison-status:empty, #model-scope:empty { display: none; }
.results-panel > .note { margin-top: var(--u); }
.results-panel > .note + .note { margin-top: 4px; }
.note.scope { color: var(--ink); }

/* ---------- the hand check: the sheet on the axis, its title and the print button in the margin ---------- */
.hand-check { display: grid; grid-template-columns: subgrid; align-items: start; margin-top: calc(var(--u) * 4); padding-top: var(--u); border-top: 1px solid var(--ink); }
.hand-check .results-top { flex-direction: column; align-items: flex-start; gap: 14px; grid-column: 1 / 5; grid-row: 1 / span 6; }
.hand-check > :not(.results-top) { grid-column: 5 / 13; }
.hand-check > .assumptions, .hand-check > .source-links { grid-column: 5 / 12; }
.hand-summary { font-size: var(--d); line-height: var(--dl); letter-spacing: var(--track); margin: calc(var(--u) * .5) 0 var(--u); }
.hand-summary small { display: block; font-size: var(--t); line-height: var(--tl); letter-spacing: 0; color: var(--grey); margin-top: 6px; }
.hand-summary .hold { display: block; }            /* a HOLD clause on its own line above the ratio (blind-check.js) */
.formula { font-size: var(--s); line-height: var(--sl); padding: 9px 0; border-top: 1px solid var(--plan); overflow-wrap: anywhere; text-wrap: pretty; }   /* every rule runs to the main column's edge */
#hand-check .status { margin-top: 0; padding-top: 12px; border-top: 1px solid var(--plan); max-width: none; }   /* the rule runs to the column's edge */
#hand-check .status strong { display: block; max-width: 33em; font-weight: 400; color: var(--ink); }      /* the scope line: plain ink at the sheet's measure */
.hand-check h3 { margin-top: calc(var(--u) * 2); }
.assumptions { list-style: none; margin: 8px 0 0; padding: 0; max-width: 33em; }
.assumptions li { text-wrap: pretty; }
.assumptions li + li { margin-top: 8px; }
.source-links { margin-top: var(--u); color: var(--grey); }
.source-links a { color: var(--ink); }
.source-links a.u, .t-scope a.u { --pb: 11px; }   /* 44 px targets on a 22 px line (site.css pads a.u by --pb) */

/* ---------- method and limits: quieter, closed, on the axis ---------- */
.method { grid-column: 5 / 13 !important; margin-top: calc(var(--u) * 3); border-top: 1px solid var(--plan); }   /* summary and chevron: the shared kit */
.method .note { max-width: 33em; margin-top: 4px; }
.method table { margin-top: 12px; max-width: 40em; }
.props td:first-child { text-align: left; padding-left: 0; }

.beam .ft { margin-top: calc(var(--u) * 6); }

/* ---------- tests.html: the run on the axis; what a pass establishes held beside it in columns 1-4 ---------- */
.tests .demo-head { grid-row: 1; }
.t-results { grid-column: 5 / 13 !important; grid-row: 2; margin-top: calc(var(--u) * 3); }
.t-scope { grid-column: 1 / 5 !important; grid-row: 2; align-self: start; position: sticky; top: var(--u); margin-top: calc(var(--u) * 3); padding-right: var(--g); }
#test-summary { font-size: var(--d); line-height: var(--dl); letter-spacing: var(--track); margin-top: 8px; text-wrap: balance; }   /* ink; only its count carries the state colour (tests-view.js) */
.actions { display: flex; flex-wrap: wrap; align-items: center; column-gap: 28px; row-gap: 12px; margin-top: var(--u); }   /* clears the link's 44 px box when the row wraps */
.test-list { list-style: none; margin: calc(var(--u) * 1.5) 0 0; padding: 0; max-width: 48em; }
.test-list li { padding: 1px 0 1px 1.2em; text-indent: -1.2em; text-wrap: pretty; }   /* a wrapped line hangs under its test name, never a lone word */
.test-list li.fail { color: var(--fail); }
/* the run set out by suite (tests-view.js): one disclosure per suite with its count, the result in a narrow
   grey column and the case beside it in ink, so the eye reads down the cases rather than a repeated PASS */
.test-groups { margin-top: calc(var(--u) * 1.5); border-bottom: 1px solid var(--plan); }   /* rules and counts end on column 12, as the duel's sheet does */
/* the page paints before the 94 checks run ("Running tests…"); the run is set out by tests-view.js, and until it is, its
   place is held, so nothing on screen moves when the tests finish: on a phone the seven closed suites exactly, wider
   enough to keep the footer below the fold (tests.html turns this off when JavaScript is off) */
.tests #test-results { display: none; }
.t-results:not(:has(.test-groups)) { padding-bottom: calc(var(--u) * 1.5 + 2600px); }
.t-group { border-top: 1px solid var(--plan); }
.t-group summary { display: flex; align-items: center; gap: 10px; min-height: 44px; list-style: none; cursor: pointer; }
.t-group summary::-webkit-details-marker { display: none; }
.t-group summary > svg { flex: none; width: 10px; height: 10px; overflow: visible; }   /* the chevron */
.t-group[open] summary > svg { transform: rotate(90deg); }
.t-suite { flex: 1 1 auto; }
.t-suite .harr { display: inline-block; width: 1em; height: 1em; vertical-align: -0.14em; }   /* "↔" drawn: the site's arrow, two-headed (tests-view.js) */
.t-suite .harr .arrow { width: 100%; height: 100%; }
.t-count { color: var(--grey); font-variant-numeric: tabular-nums; }
.t-count.fail { color: var(--fail); }
.t-group .test-list { margin: 0 0 14px 20px; }
.t-group .test-list li { display: grid; grid-template-columns: 3.4em minmax(0, 1fr); padding: 1px 0; text-indent: 0; }
.t-res { color: var(--grey); }
.t-group .test-list li.fail .t-res, .t-group .test-list li.fail .t-case { color: var(--fail); }
.t-scope h2, .t-scope .note, .t-scope .source-links { max-width: 33em; }   /* one measure when the column stacks below the run */
.t-scope .note { margin-top: 8px; }
.t-scope h2 + .note { margin-top: 10px; }
.t-scope .source-links { margin-top: var(--u); }

/* ---------- one axis below 1100 px; the title stays where every page puts it (column 5, column 3 below 900) ---------- */
@media (max-width: 1099px) {
  .demo-head h1 { grid-column: 5 / -1; }
  .demo-head p, noscript p { grid-column: 5 / 12; }
  .input-panel, .out, .method, .t-results, .t-scope { grid-column: 1 / -1 !important; grid-row: auto; }
  .out { margin-top: calc(var(--u) * 1.5); }
  .controls { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .controls label:has(select) { grid-column: span 2; }
  .results-panel > .results-top, .results-panel > .table-wrap, .beam-figure { max-width: 44em; }
  .hand-check > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .hand-check .results-top { flex-direction: row; align-items: center; justify-content: space-between; }
  .t-scope { position: static; padding-right: 0; margin-top: calc(var(--u) * 2); }
}
@media (max-width: 999px) and (min-width: 761px) {   /* four fields to a row only from 1000 px; below, two */
  .controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .controls label:has(select) { grid-column: auto; }
}
@media (max-width: 899px) and (min-width: 761px) {
  .demo-head h1, .demo-head p, noscript p { grid-column: 3 / -1; }
}

/* ---------- phone ---------- */
@media (max-width: 760px) {
  .demo-head { margin-top: var(--u); }
  .demo-head h1, .demo-head p, noscript p { grid-column: 1 / -1; }
  .controls { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px var(--g); }
  .controls label:has(select), .controls label[for=point], .controls label[for=position] { grid-column: 1 / -1; }   /* every label on one line */
  @media (max-width: 379px) { .controls { grid-template-columns: minmax(0, 1fr); } }
  .input-panel { margin-top: calc(var(--u) * 1.5); }
  .beam-picture text[fill] { display: none; }                               /* the P label: at phone size the P and a inputs above carry it */
  thead th + th, td { padding-left: 10px; }
  tbody th, td { font-size: var(--s); }                                     /* the tables fit from 360 px in every state; narrower, they scroll in their own frame */
  thead th { white-space: normal; vertical-align: bottom; }
  thead th + th { width: 1%; }                                              /* the figure columns as narrow as their figures: "Checker / A" on two lines */
  tbody th { white-space: normal; }                                         /* and a row label takes two lines ("Deflection / (mm)") only when long figures need the room */
  .results-panel { margin-top: calc(var(--u) * 1.5); }
  .hand-check { margin-top: calc(var(--u) * 2); }
  .hand-summary { margin-top: 0; }
  .hand-summary .lim { white-space: normal; }    /* "exceeds the illustrative elastic limit." is longer than a phone's line: it breaks before "illustrative" */
  .t-results { margin-top: calc(var(--u) * 2); }
  .t-results:not(:has(.test-groups)) { padding-bottom: calc(var(--u) * 1.5 + 7 * 45px + 1px); }   /* seven closed suites and the closing rule */
  #test-summary { min-height: calc(2 * var(--dl)); }   /* "Running tests…" holds the two lines the result takes */
  .beam .ft { margin-top: calc(var(--u) * 4); }
}

/* phone screens: each source link on its own 44 px row, so no two tap targets overlap (screen only: an A4 page
   is narrower than 760 px, and the printout keeps its one-line list) */
@media screen and (max-width: 760px) {
  .hand-check .source-links .sep { display: none; }
  .hand-check .source-links a.u { display: block; width: fit-content; margin-block: 0; }
}

/* ---------- print: the hand check alone, on one A4 page ---------- */
@media print {
  @page { size: A4; margin: 15mm; }
  html, body { background: #fff; color: #000; }
  body { font-size: 10pt; line-height: 1.35; }
  .skip, .hd, .ft, .demo-head, noscript, .input-panel, .out, .no-print { display: none !important; }
  main.grid { display: block; padding: 0; }
  .hand-check { display: block; margin: 0; padding: 0; border: 0; break-inside: avoid; }
  .hand-check * { color: #000 !important; }
  .hand-check .results-top { display: block; }
  .hand-check h2 { font-size: 18pt; line-height: 1.2; margin-bottom: 4pt; }
  .lbl { font-size: 9pt; }
  .hand-summary { font-size: 12pt; line-height: 1.3; margin: 6pt 0 8pt; }
  .hand-summary small { font-size: 9pt; line-height: 1.3; margin-top: 2pt; }
  .formula { font-size: 9pt; line-height: 1.35; padding: 4pt 0; max-width: none; border-color: #999; }
  #hand-check .status { font-size: 9pt; line-height: 1.35; padding-top: 6pt; max-width: none; border-color: #999; }
  #hand-check .status strong { max-width: none; }   /* on paper the sheet's lines all run the full width */
  .hand-check h3 { font-size: 12pt; margin-top: 10pt; }
  .assumptions, .source-links { font-size: 8.5pt; line-height: 1.35; max-width: none; }
  .assumptions li + li { margin-top: 3pt; }
  .source-links { margin-top: 8pt; }
  .cab { display: none; }
  .source-links a { text-decoration: underline; text-underline-offset: 2pt; }
}