/* BoomTrucks.ca calculator pages (C-501..C-507). Extends the .calc set in site.css: field
   tags, checkboxes, segmented radios, the flag list, caveats, drawings and the formula block.
   No animation or transition is used, so the Motion toggle has nothing to stop. */

.calc { margin: 0; }
.calc-in { grid-template-columns: repeat(auto-fill, minmax(min(100%, 168px), 1fr)); }
.calc-in > [hidden], .calc [data-show][hidden], .calc [data-insulated][hidden] { display: none; }
.calc-group { grid-column: 1 / -1; margin: 6px 0 -4px; padding-top: 14px; border-top: 1px solid var(--line); font: 600 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-2); }
.calc-group:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.field .tag { display: inline-block; margin-left: 6px; padding: 2px 5px; border: 1px solid var(--line-2); font: 600 9.5px/1 var(--mono); letter-spacing: .08em; color: var(--fg-2); vertical-align: 1px; }
.field input:invalid:not(:placeholder-shown) { outline: 2px solid var(--err-text); outline-offset: -1px; }

/* checkbox field */
.check { grid-column: 1 / -1; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 4px 10px; align-items: start; font-size: 14.5px; line-height: 1.45; color: var(--fg); cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--hv); }
.check input:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; box-shadow: var(--ring-halo); }
.check small { grid-column: 2; font-size: 12px; color: var(--fg-3); }

/* segmented radio group */
.segf { grid-column: 1 / -1; border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 6px; }
.segf legend { padding: 0; margin-bottom: 6px; font: 600 10.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.seg-r { display: flex; flex-wrap: wrap; border: 1px solid var(--ctl-line); width: fit-content; max-width: 100%; }
.seg-r label { position: relative; display: flex; }
.seg-r input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg-r span { display: flex; align-items: center; min-height: 40px; padding: 8px 12px; font: 600 11px/1.2 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--fg-2); }
.seg-r input:checked + span { background: var(--fg); color: var(--bg); }
/* The ring sits inside the segment: --fg on an empty segment, --bg on the filled (checked) one. */
.seg-r input:focus-visible + span { outline: 2px solid var(--fg); outline-offset: -2px; }
.seg-r input:checked:focus-visible + span { outline-color: var(--bg); }

/* output panel */
.out-big b.is-long { font-size: clamp(1.45rem, 3.2vw, 2.15rem); line-height: 1.12; letter-spacing: -.02em; overflow-wrap: anywhere; }
.out-big b.is-text { font-size: clamp(1.35rem, 2.6vw, 1.8rem); line-height: 1.15; letter-spacing: -.01em; }
.out-big span { text-transform: none; letter-spacing: .02em; font-size: 12.5px; line-height: 1.5; color: var(--chalk-2); }
.out-big span a, .out-flags a, .out-rows a, .out-note a { color: var(--hv); }
.out-rows div { align-items: baseline; }
.out-rows b { overflow-wrap: anywhere; }
.out-flags { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
/* display: grid above would otherwise win over the hidden attribute */
.out-flags[hidden] { display: none; }
.flag { border-left: 3px solid var(--chalk-3); background: rgba(243, 241, 234, .06); padding: 9px 12px; font-size: 13.5px; line-height: 1.5; color: var(--chalk); }
.flag-k { display: block; margin-bottom: 2px; font: 600 10px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--chalk-3); }
.flag-over { border-left-color: var(--zone-over); }
.flag-over .flag-k { color: #ff8a80; }
.flag-warn { border-left-color: var(--zone-warn); }
.flag-warn .flag-k { color: var(--hv-2); }
.out-note { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--chalk-2); }
.out-note b { color: #fff; font-weight: 600; }
.out-cta { margin: 0; }
.calc-out .cite a { color: var(--hv); }

/* drawings (inline SVG from calc-core.js); light lines on the dark output panel */
.calc-fig { margin: 0; border: 1px solid rgba(243, 241, 234, .14); color: var(--chalk); }
.cx-svg { display: block; width: 100%; height: auto; font-family: var(--mono); }
.cx-gnd { stroke: currentColor; stroke-opacity: .7; stroke-width: 1.4; }
.cx-truck { fill: #1d201b; stroke: currentColor; stroke-opacity: .6; }
.cx-wheel { fill: #0a0b09; stroke: currentColor; stroke-opacity: .6; }
.cx-cl { stroke: currentColor; stroke-opacity: .35; stroke-dasharray: 8 3 2 3; }
.cx-boom { stroke: #ffc21a; stroke-width: 5; stroke-linecap: round; }
.cx-pin { fill: #11120e; stroke: #ffc21a; stroke-width: 1.4; }
.cx-rope { stroke: #e9e5da; stroke-width: 1.4; }
.cx-hook { fill: none; stroke: #e9e5da; stroke-width: 1.6; }
.cx-load { fill: #2b2f28; stroke: currentColor; stroke-opacity: .8; }
.cx-dim { stroke: currentColor; stroke-opacity: .85; }
.cx-ext { stroke: currentColor; stroke-opacity: .35; stroke-dasharray: 3 3; }
.cx-arc { fill: none; stroke: #ffc21a; stroke-width: 1.2; }
.cx-t { font-size: 11px; fill: currentColor; paint-order: stroke; stroke: #0c0d0b; stroke-width: 3px; }

/* caveats under the inputs and output, inside the calculator card */
.calc-caveats { padding: 16px 20px 6px; border-top: 1px solid var(--line); background: var(--bg); }
.calc-caveats h2 { font: 600 10.5px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); margin: 0 0 8px; }
.calc-caveats ul { margin: 0 0 10px; padding-left: 1.1em; font-size: 14px; line-height: 1.5; color: var(--fg-2); }
.calc-caveats li { margin-bottom: 4px; }
.calc-caveats li::marker { color: var(--accent-text); }
.calc-caveats .note { margin: 0 0 12px; }
.calc-foot { font-size: 11.5px; line-height: 1.6; }
.calc-foot p { margin: 0; }
.calc-foot p + p { margin-top: 8px; }

/* reference panels under the calculator (published rates, wages, ground values) */
.calc-ref { margin-top: 20px; }
.calc-ref > div { padding: 4px 18px 18px; }
.calc-ref p { font-size: 14.5px; color: var(--fg-2); max-width: 74ch; }

/* Keep wide tables inside their own scroll box: a 1fr grid track would otherwise grow to the
   table's min-width and scroll the whole page sideways at phone width. */
[data-kind="calculator"] .doc > .prose, [data-kind="calculator"] .doc > .doc-side { min-width: 0; }
@media (max-width: 640px) { [data-kind="calculator"] .spec.stack { min-width: 0; } }

/* prose: formula block */
.formula { margin: 1.2em 0 1.6em; padding: 16px 18px; background: var(--bg-2); border: 1px solid var(--line); border-left: 3px solid var(--hv); font: 500 13px/1.75 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--fg); }
.prose .table-wrap .spec { font-size: 14px; }

@media (max-width: 560px) {
  .calc-head { flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 16px; }
  .calc-in, .calc-out { padding: 18px 16px; }
  .calc-caveats, .calc-foot { padding-left: 16px; padding-right: 16px; }
  .out-rows div { flex-direction: column; gap: 3px; }
  .out-rows b { text-align: left; }
  .seg-r { width: 100%; }
  .seg-r label { flex: 1 1 auto; }
  .seg-r span { justify-content: center; width: 100%; }
}

@media (forced-colors: active) {
  .seg-r input:checked + span { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; }
  /* Labels drawn with a halo (paint-order: stroke) would be forced to one colour for fill and stroke. */
  .cx-t { forced-color-adjust: none; fill: CanvasText; stroke: Canvas; }
}