/* boat crane sizer -- layout + schematic styling.
   inherits tokens.css + site.css (dark palette, type stack).
   shares visual vocabulary with the beam tool. */

:root {
  --member-color: var(--page-fg);
  --strut-color:  var(--page-fg-2);
  --load-color:   #f59e0b;
  --reaction-color: #22c55e;
  --annotation-color: var(--page-fg-2);
}

body { margin: 0; }

.crane-header,
.crane-app,
.crane-footer {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.crane-header {
  padding-top: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: 1.5rem;
}
.crane-header .h-display { margin: .4rem 0 .7rem; }
.crane-header .lede      { max-width: 65ch; }
.crane-header .small     { font-size: .88rem; margin-top: .5rem; }

/* ---------- params form ---------- */

.params {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem 2rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.param-group {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.param-group legend {
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--page-fg-2);
  padding: 0;
  margin-bottom: .35rem;
  font-weight: 500;
}

.param-group label {
  display: grid;
  /* label (flex) | input (fixed) | unit (fixed) — locked columns keep the
     input boxes + unit labels aligned vertically across every row. */
  grid-template-columns: 1fr 9ch 3ch;
  align-items: baseline;
  gap: .4rem;
  font-family: var(--font-mono);
  font-size: .9rem;
  color: var(--page-fg);
}
.param-group label abbr {
  color: var(--page-fg-3);
  text-decoration: none;
  border: none;
  margin-left: .25rem;
  font-size: .82rem;
}
.param-group input[type=number],
.param-group select {
  background: #141414;
  color: var(--page-fg);
  border: 1px solid var(--rule);
  padding: .3rem .5rem;
  font: inherit;
  font-size: .9rem;
  width: 100%;
  box-sizing: border-box;
  text-align: right;
}
.param-group select { text-align: left; }
.param-group .unit {
  color: var(--page-fg-3);
  font-size: .78rem;
  text-align: left;
}

/* ---------- schematic svg ---------- */

.schematic {
  padding: 1.5rem 0;
  display: grid;
  grid-template-columns: minmax(200px, 240px) 1fr;
  gap: 1.25rem;
  align-items: start;
}
.schematic-stage {
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.schematic-svg {
  width: 100%;
  background: #101010;
  border: 1px solid var(--rule);
  display: block;
  aspect-ratio: 1000 / 600;
  user-select: none;
}

/* Live "editing: X controls Y" hint. Sits atop the schematic so the user
   sees at a glance what the field they just clicked on actually affects. */
.controls-hint {
  font-family: var(--font-mono);
  font-size: .85rem;
  padding: .45rem .7rem;
  border: 1px solid var(--rule);
  background: #0d0d0d;
  color: var(--page-fg-3);
  min-height: 1.7rem;
  line-height: 1.3;
  transition: border-color .12s ease, color .12s ease;
}
.controls-hint.is-editing {
  border-color: var(--ink-accent, #60a5fa);
  color: var(--page-fg);
}
/* Weak-link mode — border color tracks severity so the bar gets progressively
   louder as util climbs. Matches the 4-tier scheme in the results panel. */
.controls-hint.is-weaklink { color: var(--page-fg); }
.controls-hint.is-weaklink.sev-ok   { border-color: rgba(34, 197, 94, .35); }
.controls-hint.is-weaklink.sev-warn { border-color: rgba(245, 158, 11, .5); }
.controls-hint.is-weaklink.sev-high { border-color: rgba(249, 115, 22, .6); }
.controls-hint.is-weaklink.sev-fail { border-color: rgba(239, 68, 68, .6); }
.controls-hint strong { color: var(--page-fg); font-weight: 500; }
.controls-hint-label {
  text-transform: uppercase;
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--page-fg-3);
  margin-right: .35rem;
}

/* Highlight has two modes controlled by the svg's parent class:
     .mode-editing  — cyan-blue, shows what the focused input affects
     .mode-weaklink — severity color (green/yellow/orange/red), shows the
                      governing check member. Color tracks the weak-link
                      bar so the schematic reads the same story at a glance.
   Default (unclassed) falls back to the editing color.
*/
#crane-svg .is-highlighted {
  stroke: var(--ink-accent, #60a5fa) !important;
  filter: drop-shadow(0 0 3px rgba(96, 165, 250, .6));
}
#crane-svg text.is-highlighted,
#crane-svg .load-label.is-highlighted {
  fill: var(--ink-accent, #60a5fa) !important;
  stroke: none !important;
  filter: none;
}

#crane-svg.mode-weaklink.sev-ok   .is-highlighted {
  stroke: #4ade80 !important;
  filter: drop-shadow(0 0 3px rgba(74, 222, 128, .55));
}
#crane-svg.mode-weaklink.sev-ok   text.is-highlighted,
#crane-svg.mode-weaklink.sev-ok   .load-label.is-highlighted { fill: #4ade80 !important; stroke: none !important; filter: none; }

#crane-svg.mode-weaklink.sev-warn .is-highlighted {
  stroke: #fbbf24 !important;
  filter: drop-shadow(0 0 3px rgba(251, 191, 36, .6));
}
#crane-svg.mode-weaklink.sev-warn text.is-highlighted,
#crane-svg.mode-weaklink.sev-warn .load-label.is-highlighted { fill: #fbbf24 !important; stroke: none !important; filter: none; }

#crane-svg.mode-weaklink.sev-high .is-highlighted {
  stroke: #fb923c !important;
  filter: drop-shadow(0 0 4px rgba(251, 146, 60, .7));
}
#crane-svg.mode-weaklink.sev-high text.is-highlighted,
#crane-svg.mode-weaklink.sev-high .load-label.is-highlighted { fill: #fb923c !important; stroke: none !important; filter: none; }

#crane-svg.mode-weaklink.sev-fail .is-highlighted {
  stroke: #f87171 !important;
  filter: drop-shadow(0 0 5px rgba(248, 113, 113, .75));
}
#crane-svg.mode-weaklink.sev-fail text.is-highlighted,
#crane-svg.mode-weaklink.sev-fail .load-label.is-highlighted { fill: #f87171 !important; stroke: none !important; filter: none; }

/* Sections summary panel (to the left of the schematic). One block per member
   with the pipe designation + OD / ID / wall thickness. */
.section-summary {
  font-family: var(--font-mono);
  font-size: .82rem;
  border: 1px solid var(--rule);
  background: #0d0d0d;
  padding: .75rem .85rem;
}
.section-summary h3 {
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--page-fg-2);
  margin: 0 0 .6rem 0;
  font-weight: 500;
}
.section-summary .sect-entry {
  margin-bottom: .7rem;
}
.section-summary .sect-entry:last-child { margin-bottom: 0; }
.section-summary .sect-role {
  color: var(--page-fg-3);
  text-transform: uppercase;
  font-size: .66rem;
  letter-spacing: .04em;
  margin-bottom: .08rem;
}
.section-summary .sect-select {
  background: #141414;
  color: var(--page-fg);
  border: 1px solid var(--rule);
  padding: .2rem .4rem;
  font: inherit;
  font-size: .85rem;
  font-family: var(--font-mono);
  width: 100%;
  margin-bottom: .25rem;
  cursor: pointer;
}
.section-summary .sect-select:hover { border-color: var(--page-fg-3); }
.section-summary .sect-select:focus { border-color: var(--page-fg-2); outline: none; }
.section-summary .sect-dims {
  color: var(--page-fg-3);
  font-size: .74rem;
  line-height: 1.35;
}
.section-summary .sect-dims strong {
  color: var(--page-fg-2);
  font-weight: 500;
}
.section-summary .sect-fit {
  margin-top: .65rem;
  padding-top: .55rem;
  border-top: 1px solid var(--rule);
  color: var(--page-fg-3);
  font-size: .74rem;
  line-height: 1.4;
}
.section-summary .sect-fit strong { color: var(--page-fg-2); font-weight: 500; }

.member-line {
  stroke: var(--member-color);
  stroke-width: 4;
  fill: none;
  stroke-linecap: round;
  cursor: pointer;
}
.member-line.boom-outer {
  stroke-width: 6;
}
.member-line.boom-inner {
  stroke-width: 3;
  stroke: var(--page-fg-2);
}
.member-line.strut {
  stroke: var(--strut-color);
  stroke-width: 3;
  stroke-dasharray: 2 4;
}
.node-dot {
  fill: var(--page-fg);
  stroke: #101010;
  stroke-width: 1;
}
.node-label {
  fill: var(--page-fg-2);
  font-family: var(--font-mono);
  font-size: 13px;
}
.member-label {
  fill: var(--page-fg-3);
  font-family: var(--font-mono);
  font-size: 11px;
}

/* Dimension labels on the schematic */
.dim-line {
  stroke: var(--page-fg-3);
  stroke-width: 1;
  opacity: 0.75;
}
.dim-ext {
  stroke: var(--page-fg-3);
  stroke-width: 0.75;
  stroke-dasharray: 2 3;
  opacity: 0.55;
}
.dim-angle-arc {
  stroke: var(--page-fg-3);
  stroke-width: 1;
  opacity: 0.75;
}
.dim-label {
  fill: var(--page-fg-2);
  font-family: var(--font-mono);
  font-size: 11px;
  paint-order: stroke;
  stroke: #101010;
  stroke-width: 3;
  stroke-linejoin: round;
}

.load-arrow {
  stroke: var(--load-color);
  stroke-width: 2.5;
  fill: var(--load-color);
}
.load-label {
  fill: var(--load-color);
  font-family: var(--font-mono);
  font-size: 12px;
}

.reaction-arrow {
  stroke: var(--reaction-color);
  stroke-width: 2.5;
  fill: var(--reaction-color);
}
.reaction-label {
  fill: var(--reaction-color);
  font-family: var(--font-mono);
  font-size: 11px;
}

.ground-hatch {
  stroke: var(--page-fg-3);
  stroke-width: 1;
}

/* Tip-deflection ghost line + label: E to E' = E - (0, δ). */
.deflection-line {
  stroke: #f59e0b;
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: 0.7;
}
.deflection-dot {
  fill: #f59e0b;
  stroke: #101010;
  stroke-width: 1;
}
.deflection-label {
  fill: #f59e0b;
  font-family: var(--font-mono);
  font-size: 11px;
  paint-order: stroke;
  stroke: #101010;
  stroke-width: 3;
  stroke-linejoin: round;
}

/* ---------- member detail panel (FBD + V + M) ---------- */

.member-detail {
  padding: 1rem 0;
  border-top: 1px solid var(--rule);
}
.member-detail[hidden] { display: none; }

.schematic-hint {
  margin: .4rem 0 0;
  font-size: .75rem;
  color: var(--page-fg-3);
  text-align: center;
}

.detail-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .75rem;
}
.detail-header h3 {
  font-size: .95rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--page-fg-2);
  margin: 0;
  font-weight: 500;
}
.detail-close {
  background: transparent;
  border: none;
  color: var(--page-fg-3);
  font-size: 1.4rem;
  cursor: pointer;
  line-height: 1;
  padding: 0 .4rem;
}
.detail-close:hover { color: var(--page-fg); }

.detail-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.detail-panel {
  background: #0d0d0d;
  border: 1px solid var(--rule);
  padding: .5rem;
}
.detail-svg {
  width: 100%;
  height: auto;
  display: block;
}
.detail-caption {
  margin: .4rem .1rem 0;
  font-size: .72rem;
  color: var(--page-fg-3);
  line-height: 1.35;
}

/* FBD sub-panel */
.fbd-member {
  stroke: var(--page-fg);
  stroke-width: 3;
  stroke-linecap: round;
}
.fbd-node { fill: var(--page-fg); stroke: #0d0d0d; stroke-width: 1; }
.fbd-arrow {
  stroke: var(--reaction-color);
  fill: var(--reaction-color);
  stroke-width: 2;
}
.fbd-moment {
  stroke: var(--reaction-color);
  fill: none;
  stroke-width: 2;
}
.fbd-label {
  fill: var(--page-fg-2);
  font-family: var(--font-mono);
  font-size: 10px;
}

/* V / M diagram sub-panel */
.detail-title {
  fill: var(--page-fg);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
}
.diag-unit {
  fill: var(--page-fg-3);
  font-family: var(--font-mono);
  font-size: 10px;
}
.diag-axis {
  stroke: var(--page-fg-3);
  stroke-width: 1;
}
.diag-zero {
  stroke: var(--page-fg-3);
  stroke-width: 0.75;
  stroke-dasharray: 2 3;
  opacity: 0.6;
}
.diag-area {
  fill: rgba(96, 165, 250, .18);
  stroke: none;
}
.diag-line {
  fill: none;
  stroke: #60a5fa;
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.diag-station {
  stroke: var(--page-fg-3);
  stroke-width: 0.6;
  stroke-dasharray: 1 3;
  opacity: 0.7;
}
.diag-station-label {
  fill: var(--page-fg-3);
  font-family: var(--font-mono);
  font-size: 9px;
}
.diag-peak { fill: #f59e0b; stroke: #0d0d0d; stroke-width: 1; }
.diag-peak-label {
  fill: #f59e0b;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
}
.diag-tick {
  fill: var(--page-fg-3);
  font-family: var(--font-mono);
  font-size: 9px;
}

/* "Selected member" mode — cyan highlight on the clicked member. Same
   color as editing-focus mode since they're closely related ("I am
   currently investigating this member"). */
#crane-svg.mode-selected .is-highlighted {
  stroke: var(--ink-accent, #60a5fa) !important;
  filter: drop-shadow(0 0 3px rgba(96, 165, 250, .55));
}
#crane-svg.mode-selected text.is-highlighted,
#crane-svg.mode-selected .load-label.is-highlighted {
  fill: var(--ink-accent, #60a5fa) !important;
  stroke: none !important;
  filter: none;
}

/* ---------- results ---------- */

.results {
  padding: 1.5rem 0;
  border-top: 1px solid var(--rule);
}
.results-heading {
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--page-fg-2);
  margin: 1.2rem 0 .5rem;
  font-weight: 500;
}
.results-heading:first-child { margin-top: 0; }

.results-grid {
  display: grid;
  grid-template-columns: minmax(14ch, max-content) 1fr;
  gap: .35rem 1.5rem;
  font-family: var(--font-mono);
  font-size: .95rem;
}
.results-grid dt {
  color: var(--page-fg-3);
  text-transform: uppercase;
  font-size: .78rem;
  letter-spacing: .04em;
  align-self: center;
}
.results-grid dd { margin: 0; color: var(--page-fg); }
.results-grid .muted { color: var(--page-fg-3); }

.unstable-banner {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid var(--err);
  border-left-width: 4px;
  padding: .9rem 1.1rem;
  color: var(--page-fg);
  font-size: .92rem;
  margin-bottom: .5rem;
}
.unstable-banner strong { color: var(--err); margin-right: .35rem; }

/* Check badges (stress / buckling ratio). Color-coded utilization. */
.check-badge {
  display: inline-block;
  padding: .05rem .45rem;
  border-radius: 2px;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .02em;
  border: 1px solid transparent;
  margin: 0 .15rem;
}
.check-ok {
  background: rgba(34, 197, 94, .12);
  color: #4ade80;
  border-color: rgba(34, 197, 94, .35);
}
.check-warn {
  background: rgba(245, 158, 11, .12);
  color: #fbbf24;
  border-color: rgba(245, 158, 11, .35);
}
.check-high {
  background: rgba(249, 115, 22, .14);
  color: #fb923c;
  border-color: rgba(249, 115, 22, .45);
}
.check-fail {
  background: rgba(239, 68, 68, .15);
  color: #f87171;
  border-color: rgba(239, 68, 68, .4);
}
.check-legend { margin-top: 1rem; }
.small { font-size: .82rem; }

.deflection-warn {
  margin-top: .75rem;
  padding: .6rem .8rem;
  border: 1px solid rgba(245, 158, 11, .35);
  background: rgba(245, 158, 11, .06);
  color: var(--page-fg);
  line-height: 1.45;
}

/* ---------- toolbar (export buttons) ---------- */

.toolbar {
  display: flex;
  gap: .5rem;
  margin: 0 0 1rem;
  flex-wrap: wrap;
}
.toolbar-btn {
  font: inherit;
  font-family: var(--font-mono);
  font-size: .82rem;
  color: var(--page-fg);
  background: #141414;
  border: 1px solid var(--rule);
  padding: .4rem .75rem;
  cursor: pointer;
  letter-spacing: .02em;
}
.toolbar-btn:hover  { border-color: var(--page-fg-2); }
.toolbar-btn:active { background: #0a0a0a; }
.toolbar-btn:focus-visible { outline: 1px solid var(--ink-accent, #60a5fa); outline-offset: 2px; }

/* ---------- print-only elements ---------- */

.print-only { display: none; }

/* ---------- footer ---------- */

.crane-footer {
  border-top: 1px solid var(--rule);
  margin-top: 2rem;
  padding-top: 1.5rem;
  padding-bottom: 3rem;
  color: var(--page-fg-3);
  font-size: .92rem;
}
.crane-footer a { color: var(--page-fg); border-bottom: 1px solid var(--page-fg-3); text-decoration: none; }
.crane-footer a:hover { border-bottom-color: var(--ink-accent); }

/* ---------- mobile ---------- */

@media (max-width: 768px) {
  .params { grid-template-columns: 1fr; gap: 1rem; }
  .results-grid { grid-template-columns: 1fr; gap: .2rem; }
  .schematic { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: 1fr; }
}

/* ---------- print ---------- */
/*
 * Report layout: drop the dark theme, swap to print-friendly ink, strip
 * chrome + UI-looking borders from form elements so inputs read as
 * typeset values rather than wireframes. Two-column results grids + a
 * smaller diagram to fit more per page.
 *
 * Target: 2–3 letter pages instead of 5.
 */
@media print {
  @page { margin: 0.6in 0.65in; size: letter; }

  :root {
    --page-fg:  #111;
    --page-fg-2:#333;
    --page-fg-3:#555;
    --rule:     #999;
  }

  body { background: #fff; color: #111; font-size: 10pt; line-height: 1.4; }

  nav.eyebrow, .toolbar, .controls-hint, .schematic-hint, .crane-footer, noscript, .detail-close { display: none !important; }
  .member-detail { padding: .5rem 0; border-top: 1px solid #bbb; }
  .detail-panel { background: #fff !important; border-color: #bbb !important; }
  .detail-svg .fbd-member   { stroke: #111 !important; }
  .detail-svg .fbd-node     { fill: #111 !important; stroke: #fff !important; }
  .detail-svg .fbd-arrow    { stroke: #444 !important; fill: #444 !important; }
  .detail-svg .fbd-moment   { stroke: #444 !important; }
  .detail-svg .fbd-label    { fill: #222 !important; }
  .detail-svg .detail-title { fill: #111 !important; }
  .detail-svg .diag-axis    { stroke: #666 !important; }
  .detail-svg .diag-zero    { stroke: #888 !important; }
  .detail-svg .diag-area    { fill: rgba(100, 100, 100, .12) !important; }
  .detail-svg .diag-line    { stroke: #333 !important; }
  .detail-svg .diag-station { stroke: #999 !important; }
  .detail-svg .diag-station-label,
  .detail-svg .diag-tick,
  .detail-svg .diag-unit    { fill: #555 !important; }
  .detail-svg .diag-peak    { fill: #c60 !important; stroke: #fff !important; }
  .detail-svg .diag-peak-label { fill: #742 !important; }

  .crane-header,
  .crane-app,
  .crane-footer { max-width: none; padding: 0; margin: 0; }
  .crane-header { padding-bottom: .5rem; margin-bottom: .5rem; border-bottom: 1px solid #999; }
  .crane-header .h-display { font-size: 16pt; margin: 0 0 .2rem; }
  .crane-header .lede      { font-size: 9.5pt; max-width: none; color: #333; margin: 0 0 .2rem; }
  .crane-header .small     { font-size: 8.5pt; color: #555; font-style: italic; }

  /* ----- inputs: typeset as key-value rows, not form widgets ----- */
  .params {
    border: none !important;
    padding: 0 !important;
    margin: 0 0 .75rem;
    gap: .4rem 1.25rem;
    grid-template-columns: repeat(3, 1fr);
  }
  .param-group { gap: .1rem; }
  .param-group legend {
    font-size: 8.5pt;
    color: #555;
    margin-bottom: .15rem;
    padding: 0;
    border-bottom: 1px solid #ccc;
    width: 100%;
  }
  .param-group label {
    /* max-content for label so "Outer tube length" doesn't wrap, auto for
       the value column (driven by input width), fixed unit column. */
    grid-template-columns: max-content auto 2.5ch;
    gap: .3rem;
    font-size: 9.5pt;
    padding: 0;
  }
  .param-group .field-label { white-space: nowrap; }
  /* Drop the variable-name abbr in print — the same letters are labeled
     on the diagram itself, so the abbr just eats column width and
     pushes labels onto two lines. */
  .param-group label abbr { display: none; }
  .param-group input[type=number] {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    font-weight: 600;
    color: #111 !important;
    width: auto;
    min-width: 3ch;
    /* Hide the spinner controls — they print as ugly squares in some PDFs. */
    -moz-appearance: textfield;
  }
  .param-group input[type=number]::-webkit-outer-spin-button,
  .param-group input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  .param-group .unit { font-size: 8.5pt; color: #666; }

  /* ----- sections panel: drop the card chrome ----- */
  .schematic {
    padding: 0;
    gap: 1rem;
    grid-template-columns: 1.8in 1fr;
    margin-bottom: .5rem;
  }
  .section-summary {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    font-size: 9pt;
  }
  .section-summary h3 {
    font-size: 8.5pt;
    color: #555 !important;
    border-bottom: 1px solid #ccc;
    padding-bottom: .15rem;
    margin-bottom: .35rem;
  }
  .section-summary .sect-entry { margin-bottom: .45rem; }
  .section-summary .sect-role {
    color: #555 !important;
    font-size: 7.5pt;
    margin-bottom: .05rem;
  }
  .section-summary .sect-select {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    color: #111 !important;
    font-weight: 600;
    font-size: 9.5pt;
    /* Kill the dropdown chevron — we're printing the value, not editing. */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
  .section-summary .sect-dims {
    color: #444 !important;
    font-size: 8pt;
    line-height: 1.35;
  }
  .section-summary .sect-fit {
    border-top: 1px solid #ddd;
    padding-top: .35rem;
    margin-top: .4rem;
    font-size: 8pt;
  }

  /* ----- schematic: ink on white, no border ----- */
  .schematic-stage { gap: 0; }
  .schematic-svg {
    background: #fff !important;
    border: none !important;
    max-height: 3.8in;
  }
  .schematic-svg .member-line     { stroke: #111 !important; }
  .schematic-svg .member-line.strut { stroke: #444 !important; }
  .schematic-svg .ground-hatch   { stroke: #666 !important; }
  .schematic-svg .dim-line,
  .schematic-svg .dim-ext,
  .schematic-svg .dim-angle-arc  { stroke: #777 !important; }
  .schematic-svg .node-dot       { fill: #111 !important; stroke: #fff !important; }
  /* Drop the dark halo (paint-order stroke) so labels don't render as
     doubled glyphs under PDF text extraction. Ink on white is enough. */
  .schematic-svg .node-label,
  .schematic-svg .dim-label,
  .schematic-svg .load-label,
  .schematic-svg .reaction-label,
  .schematic-svg .deflection-label {
    fill: #222 !important;
    stroke: none !important;
    paint-order: normal !important;
  }
  .schematic-svg .load-arrow     { stroke: #222 !important; fill: #222 !important; }
  .schematic-svg .reaction-arrow { stroke: #444 !important; fill: #444 !important; }
  .schematic-svg .deflection-line,
  .schematic-svg .deflection-dot { stroke: #444 !important; fill: #444 !important; }

  /* ----- results: two-column dense grid ----- */
  .results {
    padding: 0 !important;
    border: none !important;
    margin-top: .5rem;
  }
  .results-heading {
    font-size: 9pt;
    color: #111 !important;
    margin: .7rem 0 .25rem;
    border-bottom: 1px solid #ccc;
    padding-bottom: .1rem;
  }
  .results-heading:first-child { margin-top: 0; }
  .results-grid {
    font-size: 9pt;
    gap: .15rem 1rem;
    grid-template-columns: minmax(9ch, max-content) 1fr minmax(9ch, max-content) 1fr;
  }
  .results-grid dt { color: #555 !important; font-size: 7.5pt; }
  .results-grid .muted { color: #555 !important; }

  /* Check badges: outlined, no fill, strong text — reads cleanly on white
     and also in grayscale. */
  .check-badge {
    background: #fff !important;
    border: 1px solid #999 !important;
    color: #111 !important;
    font-weight: 600;
    font-size: 7.5pt;
  }
  .check-ok   { border-color: #2a7 !important; color: #064 !important; }
  .check-warn { border-color: #c82 !important; color: #741 !important; }
  .check-high { border-color: #d63 !important; color: #622 !important; }
  .check-fail { border-color: #c33 !important; color: #801 !important; }

  .check-legend, .small, .deflection-warn {
    font-size: 8pt;
    line-height: 1.35;
  }
  .deflection-warn {
    background: transparent !important;
    border: 1px solid #c82 !important;
    padding: .35rem .5rem;
    margin-top: .35rem;
  }

  /* ----- print-only footer meta ----- */
  .print-only { display: block; }
  .print-meta {
    margin-top: 1rem;
    padding-top: .5rem;
    border-top: 1px solid #999;
    font-family: var(--font-mono);
    font-size: 7.5pt;
    color: #555;
    page-break-inside: avoid;
    line-height: 1.45;
  }
  .print-meta div { margin-bottom: .1rem; }
  .print-meta .print-config-url {
    display: block;
    word-break: break-all;
    color: #777;
    font-size: 7pt;
    line-height: 1.35;
    margin-top: .2rem;
  }
  .print-meta .print-disclaimer {
    margin-top: .4rem;
    font-style: italic;
    color: #666;
    max-width: 70ch;
  }

  /* Page-break behaviour. */
  .schematic, .section-summary, .param-group,
  .results-heading + dl, .deflection-warn { page-break-inside: avoid; }
  .results-heading { page-break-after: avoid; }
}