/* Stellar Engineering · gridshell.css · the timber gridshell experiment (demos/gridshell/index.html)
   Built on site.css: same tokens, header, footer, grid, cable links and still state.
   Page tokens  --s/--sl  small 15/22 px: notes, labels, tables, plot text (the third and smallest size)
                --pass    #17663a  dark green, 7.0:1 on white: a passed check (structural state only)
                --fail    #a3132f  dark red,   7.8:1 on white: a flagged check (structural state only)
                The three values match blind-check.css, so the demos share one small size and one pair of state colours.
   Drawing      the canvas laths run a mid grey (#8e9196, 3.2:1 on white, so the gentlest lath is still a visible graphic)
                to ink by curvature; laths and supports the net itself hides are drawn thin behind, in the plan grey.
                The key bar below is the same grey-to-ink ramp, interpolated the same way (sRGB).        */

.gs { --s: 15px; --sl: 22px; --pass: #17663a; --fail: #a3132f; }
.gs h3 { margin: 0; font: inherit; }
.gs cite { font-style: normal; }
.gs strong { font-weight: inherit; }
.gs .note { font-size: var(--s); line-height: var(--sl); color: var(--grey); max-width: 33em; }   /* running text at 15 px: at most 33em, about 74 characters */
.gs .fail { color: var(--fail); }
.gs .status.pass:has(.st), .gs .status.fail:has(.st) { color: var(--ink); }   /* only the leading word carries the state; a converged readout stays ink */
.gs .status.pass .st { color: var(--pass); }
.gs .status.fail .st { color: var(--fail); }

/* ---------- head: the title on the column-5 axis, as on the home page and every demo ---------- */
.gs .head { margin-top: calc(var(--u) * 1.5); row-gap: 6px; }
.gs h1 { grid-column: 5 / -1; grid-row: 1; align-self: baseline; font-size: var(--d); line-height: var(--dl); letter-spacing: var(--track); }
.gs .blurb { grid-column: 5 / 12; max-width: 34em; color: var(--grey); }   /* every demo: the title in ink, then its grey lines */
.gs .lineage { color: var(--grey); margin-top: 6px; }
.gs .nojs { margin: var(--u) var(--m) 0; }

/* ---------- the bench: controls in the left column, the net and its readouts on the axis ---------- */
.gs .bench { margin-top: calc(var(--u) * 1.5); }
.gs .stage { grid-column: 5 / -1; grid-row: 1; }
#form-canvas { display: block; width: 100%; height: clamp(400px, calc(100svh - 344px), 620px); touch-action: pan-y; cursor: grab; }
#form-canvas:active { cursor: grabbing; }

.gs .stage-cap { grid-column: 5 / -1; grid-row: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 32px; margin-top: 8px; }   /* caption, toggle and key on one baseline */
.gs .state { flex: 1 1 auto; }

.gs .mode { display: flex; gap: 24px; }
.gs .mode button { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0; border: 0; background: none; font: inherit; color: var(--grey); cursor: pointer; }
.gs .mode button::before { content: ""; flex: none; width: 10px; height: 10px; border: 1.25px solid currentColor; border-radius: 50%; }   /* an open node; filled when chosen */
.gs .mode button[aria-pressed="true"] { color: var(--ink); }
.gs .mode button[aria-pressed="true"]::before { background: var(--ink); }
.gs .mode button:hover { color: var(--ink); }
.gs .mode .arrow { width: 14px; height: 14px; margin-left: -4px; }

.gs .key { width: 168px; font-size: var(--s); line-height: var(--sl); color: var(--grey); padding-top: 2px; }
.gs .key-bar { height: 4px; margin: 6px 0 4px; background: linear-gradient(90deg, #8e9196, #111214); }
.gs .key-labels { display: flex; justify-content: space-between; }

.gs .settings { grid-column: 1 / 5; grid-row: 1 / span 3; align-self: start; min-width: 0; max-width: 400px; }
.gs .controls { display: grid; gap: 14px; }
.gs label { display: block; font-size: var(--s); line-height: var(--sl); color: var(--grey); }   /* .lab and output: the shared kit (site.css) */

.gs select { margin-top: 4px; }   /* sliders, selects, buttons and the nudge row: the shared demo kit (site.css) */

.gs .reset-row { display: flex; align-items: center; gap: 16px; margin-top: 20px; }
.gs .reset-row p { font-size: var(--s); line-height: var(--sl); color: var(--grey); }
#reset { flex: none; }

.gs .plan-wrap { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 28px; }
#plan-canvas { display: block; width: 100%; height: 180px; touch-action: pan-y; cursor: crosshair; }
.gs .nudge { margin-top: 12px; }
.gs #support-help { margin-top: 12px; }

.gs .results { grid-column: 5 / -1; grid-row: 3; margin-top: calc(var(--u) * 1.5); }
.gs .solve { min-height: var(--tl); }
.gs .readouts { display: grid; grid-template-columns: repeat(3, minmax(0, 15em)); gap: 16px var(--g); margin: var(--u) 0 0; padding-top: 14px; border-top: 1px solid var(--ink); }   /* the rule runs to column 12 */
.gs .readouts dt { font-size: var(--s); line-height: var(--sl); color: var(--grey); }
.gs .readouts dd { margin: 2px 0 0; white-space: nowrap; }
.gs .bend-note strong, .gs output { white-space: nowrap; }   /* a value keeps its unit (joined by a thin space, gridshell.js) */
.gs .bend-note { display: flex; flex-wrap: wrap; gap: 4px 40px; margin-top: var(--u); color: var(--grey); }
.gs .bend-note strong { color: var(--ink); }
.gs .bend-note + .note { margin-top: 6px; }
.gs #form-help { margin-top: 12px; }
.gs .note p + p { margin-top: 6px; }
.gs .scope-line { margin-top: var(--u); }

.gs .method { margin-top: 4px; max-width: 46em; }   /* summary and chevron: the shared kit (site.css) */
.gs .scope { padding: 0 0 8px; }                    /* the opened notes start flush with the chevron, as on every demo */
.gs .scope p { font-size: var(--s); line-height: var(--sl); color: var(--grey); max-width: 33em; }
.gs .scope p + p { margin-top: 10px; }
.gs .scope h2 { margin-bottom: 6px; }

/* ---------- the check: the same solver against the closed-form catenary ---------- */
.gs .check { margin-top: calc(var(--u) * 5); row-gap: 0; }
.gs .check h2 { grid-column: 5 / -1; grid-row: 1; align-self: baseline; font-size: var(--d); line-height: var(--dl); letter-spacing: var(--track); }
.gs .check-intro { grid-column: 5 / 12; max-width: 34em; margin-top: 12px; color: var(--grey); }
.gs .status { grid-column: 5 / 12; max-width: 34em; margin-top: var(--u); }
/* the check reads on the page's column-5 axis: the two panels take columns 5-8 and 9-12, and every rule in the
   section (the formula rules, the hand line's) ends on column 12 */
.gs .panel { min-width: 0; margin-top: calc(var(--u) * 2); }
.gs .pa { grid-column: 5 / 9; }
.gs .pb { grid-column: 9 / -1; }
.gs .panel h3, .gs .hand-line h3 { margin-bottom: 6px; }
.gs .plot { display: block; width: min(100%, 470px); height: auto; margin: 16px 0 10px; overflow: visible; }
.gs .plot line, .gs .plot polyline, .gs .plot circle { vector-effect: non-scaling-stroke; }
/* the plot's text is 15 px on screen at any width: the plot scales with its column, so gridshell.js sets --fs, its
   size in plot units; a white halo where the curve or the tolerance line runs under a label */
.gs .plot text { fill: var(--grey); font-size: var(--fs, 15px); paint-order: stroke; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; }
.gs .study-wrap { max-width: 470px; margin-top: 16px; overflow-x: auto; }   /* where the table cannot fit (below about 330 px) it scrolls in this frame */
.gs .study-wrap.is-scroll { border-right: 1px solid var(--grey); }         /* and shows its cut edge (gridshell.js) */
.gs .study-table { border-collapse: collapse; width: 100%; font-size: var(--s); line-height: var(--sl); text-align: right; font-variant-numeric: tabular-nums; }
.gs .study-table caption { text-align: left; padding-bottom: 6px; }
.gs .study-table th { font-weight: 400; color: var(--grey); border-bottom: 1px solid var(--ink); padding: 6px 0 6px 16px; }
.gs .study-table td { border-bottom: 1px solid var(--plan); padding: 6px 0 6px 16px; white-space: nowrap; }   /* figures align by magnitude; a number never breaks */
.gs .study-table :is(th, td):first-child { padding-left: 0; }
.gs .formula { margin: 12px 0; padding: 10px 0; border-block: 1px solid var(--plan); overflow-wrap: anywhere; }
.gs .hand-line { grid-column: 5 / -1; margin-top: calc(var(--u) * 2.5); }

.gs .next { margin-top: calc(var(--u) * 3); }
.gs .next > span { grid-column: 5 / -1; justify-self: start; }   /* "Next:" stays outside the link so the link fits a 360 px phone */

.gs .ft { margin-top: calc(var(--u) * 5); }

/* ---------- tablets and narrow desktops: the net takes the whole width, the controls sit below it ---------- */
@media (max-width: 1099px) {
  .gs .stage, .gs .stage-cap { grid-column: 1 / -1; }
  .gs .settings { grid-column: 1 / -1; grid-row: 3; max-width: none; margin-top: calc(var(--u) * 1.5); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--g); align-items: start; }
  .gs .controls { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--g); }
  .gs .controls, .gs .reset-row { grid-column: 1; }
  .gs .plan-wrap { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
  .gs .results { grid-column: 1 / -1; grid-row: 4; }
  .gs .pa, .gs .pb { grid-column: 1 / -1; }
}
@media (max-width: 899px) and (min-width: 761px) {
  .gs h1, .gs .blurb, .gs .check h2, .gs .check-intro, .gs .status, .gs .hand-line, .gs .next > span { grid-column: 3 / -1; }
}

/* ---------- phone ---------- */
@media (max-width: 760px) {
  .gs .head { margin-top: var(--u); }
  .gs .head > *, .gs .bench > *, .gs .check > * { grid-row: auto !important; }
  .gs .bench { margin-top: var(--u); }
  #form-canvas { height: 320px; }
  .gs .stage-cap { gap: 4px 32px; }
  .gs .state { flex-basis: 100%; }
  .gs .settings { display: block; }
  .gs .controls { grid-template-columns: minmax(0, 1fr); }
  .gs .plan-wrap { grid-template-columns: 130px minmax(0, 1fr); gap: 12px; margin-top: 28px; }   /* the four nudge buttons fit one row beside the plan */
  #plan-canvas { height: 130px; }
  .gs .readouts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gs .check { margin-top: calc(var(--u) * 3); }
  .gs .check h2 { margin-top: 2px; }
  .gs .ft { margin-top: calc(var(--u) * 4); }
}
@media (max-width: 374px) { .gs .study-table th, .gs .study-table td { padding-left: 10px; } }   /* the study table fits its column at every width from 320 px */
@media (max-width: 349px) {   /* (its frame scrolls only if it ever cannot); the exponents keep the 12 px floor */
  .gs .study-table { font-size: 14px; } .gs .study-table th, .gs .study-table td { padding-left: 6px; } .gs .study-table .ex::before { font-size: 12px; }
}
@media (max-width: 359px) {   /* below 360 px the link may wrap; a wrapped cable cannot hang, so it is a plain hairline underline */
  .gs .plan-wrap { grid-template-columns: minmax(0, 1fr); }   /* the plan above its tools */
  #plan-canvas { width: 150px; height: 150px; }
}

@media print {
  .gs .method summary svg { display: none; }
}