/* Elevation E-1, the luffing boom truck (src/lib/boom.mjs, /assets/boom.js).
   site.css holds the base .boom-x grid (drawing | panel, one column under 900 px). This file
   adds the stage, the sliders, the readouts' load state, the inset plot and the tip handle.
   The drawing's own styles travel inside its SVG. Load states use the site's zone tokens,
   amber and red only: there is no green "safe" state. */

.boom-x { --bx-rule: rgba(243, 241, 234, .12); --bx-warn-text: #ffc35c; --bx-over-text: #ff8a80; }
.boom-x-stage { position: relative; display: block; padding: clamp(6px, 1.6vw, 18px); min-width: 0; }
.boom-x-stage .bx-svg { display: block; width: 100%; height: auto; }
/* Side by side, the drawing stays in view while the panel scrolls past it. */
@media (min-width: 901px) { .bx-sheet { position: sticky; top: calc(var(--chrome-h) + 16px); } }
.bx-hint { margin: 8px 4px 0; font: 500 10.5px/1.4 var(--mono); letter-spacing: .04em; color: var(--chalk-3); }
.bx-hint[hidden] { display: none; }
.bx-hint span { color: var(--hv); }

.boom-x-panel { gap: 16px; }

/* ---------- sliders ---------- */
.bx-controls { display: grid; gap: 12px; }
.bx-controls[hidden] { display: none; }
.bx-ctl-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.bx-ctl label { font: 600 10.5px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--chalk-2); }
.bx-val { font: 600 15px/1 var(--mono); font-variant-numeric: tabular-nums; color: #fff; white-space: nowrap; }
.bx-ends { display: flex; justify-content: space-between; font: 500 10px/1 var(--mono); color: var(--chalk-3); }
.bx-ctl input[type="range"] {
  --pct: 50%;
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 30px; margin: 2px 0;
  background: transparent; cursor: pointer; touch-action: pan-y;
}
.bx-ctl input[type="range"]:focus-visible { outline: 2px solid var(--hv); outline-offset: 3px; }
.bx-ctl input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; background: linear-gradient(to right, var(--hv) 0 var(--pct), rgba(243, 241, 234, .42) var(--pct) 100%);
}
.bx-ctl input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 24px; height: 24px; margin-top: -10px;
  background: var(--hv); border: 2px solid #0c0d0b; box-shadow: 0 0 0 1px var(--hv); border-radius: 3px;
}
.bx-ctl input[type="range"]::-moz-range-track { height: 4px; background: rgba(243, 241, 234, .42); }
.bx-ctl input[type="range"]::-moz-range-progress { height: 4px; background: var(--hv); }
.bx-ctl input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; background: var(--hv); border: 2px solid #0c0d0b; box-shadow: 0 0 0 1px var(--hv); border-radius: 3px; }

/* ---------- readouts and load state ---------- */
.boom-x-read b { font-variant-numeric: tabular-nums; }
.boom-x-read .bx-cap { box-shadow: inset 3px 0 0 transparent; transition: box-shadow .2s; }
.boom-x[data-state="warn"] .boom-x-read .bx-cap { box-shadow: inset 3px 0 0 var(--zone-warn); }
.boom-x[data-state="over"] .boom-x-read .bx-cap { box-shadow: inset 3px 0 0 var(--zone-over); }
.bx-share { margin: -6px 0 0; font: 500 11.5px/1.4 var(--mono); color: var(--chalk-3); }
.bx-state { margin: 0; padding: 10px 12px; font: 600 12.5px/1.45 var(--mono); border: 1px solid var(--bx-rule); border-left-width: 3px; }
.bx-state[hidden], .bx-state [hidden] { display: none; }
.boom-x[data-state="warn"] .bx-state { border-color: var(--zone-warn); background: rgba(255, 176, 32, .1); color: var(--bx-warn-text); }
.boom-x[data-state="over"] .bx-state { border-color: var(--zone-over); background: rgba(236, 59, 46, .12); color: var(--bx-over-text); }
.bx-state sup.cite a { color: inherit; }

/* load state on the drawing */
.boom-x[data-state="warn"] .bx-svg .ld { stroke: var(--zone-warn); fill: rgba(255, 176, 32, .22); }
.boom-x[data-state="over"] .bx-svg .ld { stroke: var(--zone-over); fill: rgba(236, 59, 46, .3); }
.boom-x[data-state="warn"] .bx-svg .sl { stroke: var(--zone-warn); }
.boom-x[data-state="over"] .bx-svg .sl { stroke: var(--zone-over); }
.boom-x[data-state="warn"] .bx-svg .ldx { stroke: var(--zone-warn); stroke-opacity: .55; }
.boom-x[data-state="over"] .bx-svg .ldx { stroke: var(--zone-over); stroke-opacity: .6; }

/* ---------- tip handle (shown once boom.js is running) ---------- */
.boom-x:not([data-ready]) .bx-tip { display: none; }
.bx-tip { cursor: grab; }
.bx-tip-hit { fill: rgba(0, 0, 0, 0); pointer-events: all; touch-action: none; }
.bx-tip-ring { fill: rgba(12, 13, 11, .35); stroke: #f3f1ea; stroke-width: 1.5px; pointer-events: none; transition: stroke .2s, fill .2s; }
.bx-tip-dot { fill: #f3f1ea; pointer-events: none; }
.bx-tip-pulse { fill: none; stroke: var(--hv); stroke-width: 1.5px; pointer-events: none; transform-box: fill-box; transform-origin: center; animation: bx-pulse 2s cubic-bezier(.2, .7, .1, 1) infinite; }
@keyframes bx-pulse { from { transform: scale(1); opacity: .95; } to { transform: scale(2.7); opacity: 0; } }
.boom-x.is-touched .bx-tip-pulse, html[data-motion="off"] .bx-tip-pulse { animation: none; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .bx-tip-pulse { animation: none; opacity: 0; } }
.bx-tip:hover .bx-tip-ring, .boom-x.is-dragging .bx-tip-ring { stroke: var(--hv); fill: rgba(255, 194, 26, .2); }
.boom-x[data-state="warn"] .bx-tip-ring { stroke: var(--zone-warn); }
.boom-x[data-state="over"] .bx-tip-ring { stroke: var(--zone-over); }
.boom-x.is-dragging, .boom-x.is-dragging .bx-tip { cursor: grabbing; }
.boom-x.is-dragging .bx-svg { user-select: none; -webkit-user-select: none; }
.boom-x[data-ready] [data-boom-grab="boom"] { cursor: grab; }

/* ---------- inset: capacity against radius ---------- */
.bx-inset { border: 1px solid var(--bx-rule); padding: 12px 12px 10px; min-width: 0; }
.bx-isvg { display: block; width: 100%; max-width: 440px; height: auto; overflow: visible; }
.bx-isvg text { font-family: var(--mono); font-size: 10px; fill: var(--chalk-3); }
.bx-isvg .i-ax { fill: var(--chalk-2); font-weight: 600; letter-spacing: .02em; }
.bx-isvg .i-grid { fill: none; stroke: rgba(243, 241, 234, .08); }
.bx-isvg .i-axis { fill: none; stroke: rgba(243, 241, 234, .55); }
.bx-isvg .i-momA { fill: rgba(255, 194, 26, .14); }
.bx-isvg .i-line { fill: none; stroke: var(--hv); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.bx-isvg .i-load { fill: none; stroke: var(--chalk-2); stroke-width: 1; stroke-dasharray: 4 3; }
.bx-isvg .i-lt { fill: var(--chalk-2); font-weight: 600; paint-order: stroke; stroke: #0c0d0b; stroke-width: 3px; }
.bx-isvg .i-drop { fill: none; stroke: rgba(243, 241, 234, .5); stroke-dasharray: 2 3; }
.bx-isvg .i-halo { fill: rgba(243, 241, 234, .16); }
.bx-isvg .i-pt { fill: #f3f1ea; stroke: #0c0d0b; stroke-width: 1.5; transition: fill .2s; }
.boom-x[data-state="warn"] .bx-isvg .i-pt { fill: var(--zone-warn); }
.boom-x[data-state="over"] .bx-isvg .i-pt { fill: var(--zone-over); }
.boom-x[data-state="warn"] .bx-isvg .i-halo { fill: rgba(255, 176, 32, .25); }
.boom-x[data-state="over"] .bx-isvg .i-halo { fill: rgba(236, 59, 46, .3); }
.bx-legend { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font: 500 10.5px/1.3 var(--mono); color: var(--chalk-2); }
.bx-legend li { display: flex; align-items: center; gap: 6px; }
.bx-legend .sw { display: inline-block; flex: none; width: 14px; height: 10px; border: 1px solid rgba(255, 194, 26, .75); }
.bx-legend .sw-cap { background: repeating-linear-gradient(45deg, rgba(255, 194, 26, .55) 0 2px, transparent 2px 5px); }
.bx-legend .sw-mom { background: rgba(255, 194, 26, .14); }
.bx-legend .sw-dot { width: 9px; height: 9px; border: 0; border-radius: 50%; background: #f3f1ea; }

/* ---------- no-JS table ---------- */
.bx-table summary { cursor: pointer; min-height: 24px; padding: 3px 0; font: 600 10.5px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--chalk-3); }
.bx-table summary:hover { color: var(--chalk); }
.bx-table[open] summary { margin-bottom: 8px; }
.bx-table .table-wrap { overflow-x: auto; }

@media (max-width: 900px) {
  /* minmax(0, …): the open no-JS table must not widen the column past the screen */
  .boom-x { grid-template-columns: minmax(0, 1fr); }
  .boom-x-stage { padding: 8px 4px 10px; }
  .bx-hint { margin: 6px 12px 0; }
}
@media (max-width: 480px) {
  .bx-table .spec { font-size: 12px; }
  .bx-table .spec th, .bx-table .spec td { padding: 6px 5px; }
  .bx-table .spec thead th { font-size: 9.5px; letter-spacing: .04em; }
}

/* ---------- forced colors: the slider track and the drawing's labels ---------- */
@media (forced-colors: active) {
  .bx-ctl input[type="range"]::-webkit-slider-runnable-track { forced-color-adjust: none; height: 6px; border: 1px solid CanvasText; background: linear-gradient(to right, Highlight 0 var(--pct), Canvas var(--pct) 100%); }
  .bx-ctl input[type="range"]::-webkit-slider-thumb { forced-color-adjust: none; margin-top: -11px; background: Highlight; border: 2px solid CanvasText; box-shadow: none; }
  .bx-ctl input[type="range"]::-moz-range-track { forced-color-adjust: none; height: 6px; border: 1px solid CanvasText; background: Canvas; }
  .bx-ctl input[type="range"]::-moz-range-progress { forced-color-adjust: none; height: 6px; background: Highlight; }
  .bx-ctl input[type="range"]::-moz-range-thumb { forced-color-adjust: none; background: Highlight; border: 2px solid CanvasText; box-shadow: none; }
  /* Labels with a halo (paint-order: stroke): fill and stroke would both be forced to one colour, a solid blob. */
  .boom-x .bx-svg .t, .bx-isvg .i-lt, .bx-isvg .i-ax, .bx-isvg text { forced-color-adjust: none; fill: CanvasText; stroke: none; }
  .boom-x .bx-svg .t, .bx-isvg .i-lt { stroke: Canvas; }
}