/* ==========================================================================
   junior.basketball — Session Plans section (generated pages)
   Loaded after /site.css. Source: session-plans-source/plans.css
   (publish.sh copies it to /session-plans/plans.css — edit the source, not the copy).
   ========================================================================== */

:root {
  --max: 1040px;
  /* court diagram palette, dark site */
  --floor: #1f4331; --paint: #26503b; --line: #8fa597; --zone: rgba(181,227,42,0.10);
  --o: #b5e32a; --on-o: #0f1a13; --x: #ff7a66; --c: #f2ede4; --ballc: #f08a3e;
  --cone: #f1c84b; --pad: #8c98a6; --bump: #f5c04a; --step-bg: #0f1a13; --step-ink: #f2ede4;
  --lab: #c9d3c6; --rule: rgba(255,255,255,0.10); --panel: rgba(255,255,255,0.04);
}

/* ---------- index ---------- */
.sp-how { display: grid; gap: 0.6rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); margin: 1.5rem 0 2.5rem; padding: 0; list-style: none; }
.sp-how li { border-left: 3px solid var(--lime); padding: 0.2rem 0 0.2rem 0.85rem; color: var(--chalk-dk); font-size: 0.95rem; }
.sp-how strong { display: block; color: var(--chalk); font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.sp-group { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.5rem; text-transform: uppercase; color: var(--chalk); margin: 2.5rem 0 1rem; display: flex; align-items: baseline; gap: 0.75rem; }
.sp-group small { font-weight: 600; font-size: 0.85rem; letter-spacing: 0.06em; color: #a6b3a2; }
.sp-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.sp-card { display: grid; grid-template-rows: auto auto 1fr auto; gap: 0.55rem; padding: 1.25rem 1.3rem; text-decoration: none; color: inherit;
  background: var(--panel); border: 1px solid var(--rule); border-radius: 8px; transition: border-color 0.2s, transform 0.2s; min-width: 0; }
.sp-card:hover, .sp-card:focus-visible { border-color: rgba(181,227,42,0.5); transform: translateY(-2px); }
.sp-card:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.sp-card h3 { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.35rem; line-height: 1.05; text-transform: uppercase; color: var(--chalk); margin: 0; }
.sp-card p { font-size: 0.9rem; color: var(--chalk-dk); line-height: 1.5; margin: 0; }
.sp-card .go { font-family: 'Barlow Condensed', sans-serif; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lime); }
.sp-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.sp-chip { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px; border-radius: 99px; border: 1px solid rgba(242,237,228,0.25); color: var(--chalk-dk); }
.sp-chip.age { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.sp-mini { display: flex; height: 6px; gap: 2px; border-radius: 3px; overflow: hidden; }

/* ---------- plan page ---------- */
.sp-lead { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); margin-bottom: 1.5rem; }
@media (min-width: 860px) { .sp-lead { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.sp-lead > * { min-width: 0; }
.sp-k { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lime); margin: 0 0 0.4rem; }
.sp-mech { color: var(--chalk-dk); font-size: 1.05rem; margin: 0 0 1.2rem; }
.sp-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.sp-chain li { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1rem; line-height: 1.15; color: var(--chalk); background: var(--panel); border: 1px solid var(--rule); border-left: 3px solid var(--lime); padding: 0.3rem 0.6rem; }
.sp-chain li + li::before { content: '→'; color: var(--lime); margin: 0 0.45rem 0 -0.2rem; }
.sp-setup { align-self: start; background: var(--panel); border: 1px solid var(--rule); border-radius: 8px; padding: 1rem 1.15rem; font-size: 0.93rem; color: var(--chalk-dk); }
.sp-setup p { margin: 0 0 0.6rem; } .sp-setup p:last-child { margin: 0; }
.sp-setup ul { margin: 0 0 0.6rem 1.1rem; } .sp-setup li { margin-bottom: 0.3rem; }
.sp-setup strong { color: var(--chalk); }

.intro-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.25rem; margin: 0 0 1.5rem; }
.print-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.8rem 1.4rem; cursor: pointer;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1rem; letter-spacing: 0.08em; text-transform: uppercase;
  border: none; border-radius: 4px; background: var(--lime); color: var(--ink); transition: all 0.2s; }
.print-btn:hover { background: var(--lime-dk); transform: translateY(-2px); }
.print-btn:focus-visible { outline: 2px solid var(--chalk); outline-offset: 3px; }
.print-tip { font-size: 0.85rem; color: #a6b3a2; margin: 0; }

.sp-legend { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; font-size: 0.82rem; color: #a6b3a2; margin: 0 0 1rem; padding: 0; list-style: none; }
.sp-legend li { display: inline-flex; align-items: center; gap: 0.4rem; }
.sp-legend svg { width: 30px; height: 15px; }

.sp-clock { margin: 0 0 0.5rem; }
.sp-bar { display: flex; gap: 2px; height: 34px; overflow: hidden; border-radius: 3px; }
.sp-seg { display: flex; align-items: center; padding: 0 0.45rem; min-width: 4px; overflow: hidden; white-space: nowrap; text-decoration: none;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.85rem; color: var(--ink); }
.sp-seg.block { background: var(--lime); } .sp-seg.edge { background: #f0a050; } .sp-seg.rest { background: rgba(242,237,228,0.18); color: var(--chalk-dk); }
.sp-seg:focus-visible { outline: 2px solid var(--chalk); outline-offset: 2px; }
.sp-mini .sp-seg { padding: 0; }
@media (max-width: 600px) {
  .sp-bar .sp-seg { font-size: 0; padding: 0; } .sp-bar { height: 14px; }
  /* Plan pages: the bar still looks like a slim 14px strip, but each segment is a 24px-tall, 24px-wide-minimum tap target
     (WCAG 2.2). The extra height is transparent padding (the colour is clipped to the content box). The Session Builder's
     bar (.sb-bar) is decorative and not a link, so it is left alone. */
  .sp-bar:not(.sb-bar) { height: 24px; }
  .sp-bar:not(.sb-bar) .sp-seg { min-width: 24px; padding: 5px 0; background-clip: content-box; }
}
.sp-ticks { display: flex; justify-content: space-between; font-size: 0.75rem; color: #a6b3a2; margin-top: 0.3rem; font-variant-numeric: tabular-nums; }

.sp-block { margin-top: 2.25rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); scroll-margin-top: 5rem; }
article .sp-block h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.8rem; margin: 0 0 1rem; }
.sp-block h2 .kind { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; color: var(--lime); }
.sp-block h2 .min { margin-left: auto; font-size: 1.15rem; color: var(--chalk-dk); font-variant-numeric: tabular-nums; }
.sp-body { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) { .sp-body.has-fig { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.sp-body > * { min-width: 0; }
.sp-fig { margin: 0; background: var(--panel); border: 1px solid var(--rule); border-radius: 8px; padding: 0.6rem; align-self: start; }
.sp-fig figcaption { font-size: 0.85rem; color: #a6b3a2; line-height: 1.5; padding: 0.5rem 0.2rem 0.1rem; }
.sp-text ul { margin: 0 0 1rem 1.2rem; } .sp-text ul ul { margin: 0.3rem 0 0.3rem 1.1rem; }
.sp-text li { margin-bottom: 0.45rem; }
.sp-text p { margin-bottom: 0.9rem; }
.sp-text code, .sp-setup code { font-size: 0.88em; background: rgba(255,255,255,0.08); padding: 0.05em 0.35em; border-radius: 3px; }
/* Links inside plan text (e.g. a Coach notes link to a playbook) use the site's light green, not the browser default blue. */
.sp-text a { color: var(--lime); text-decoration: underline; text-underline-offset: 2px; }
.sp-text a:hover { color: var(--lime-dk); }
.sp-text a:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; border-radius: 2px; }

.sp-table-wrap { overflow-x: auto; }
.sp-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; color: var(--chalk-dk); }
.sp-table th, .sp-table td { text-align: left; padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.sp-table th { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: #a6b3a2; }

/* ---------- court svg ---------- */
.court { width: 100%; height: auto; display: block; }
.fl { fill: var(--floor); } .pt { fill: var(--paint); }
.cl { stroke: var(--line); stroke-width: 0.06; fill: none; } .bb { stroke: var(--line); stroke-width: 0.1; }
.rim { stroke: var(--ballc); stroke-width: 0.07; }
.split { stroke: var(--line); stroke-width: 0.05; stroke-dasharray: 0.35 0.25; }
.zone { fill: var(--zone); stroke: var(--line); stroke-width: 0.04; stroke-dasharray: 0.2 0.15; }
.guide { stroke: var(--lab); stroke-width: 0.05; stroke-dasharray: 0.15 0.15; }
.cone { fill: var(--cone); } .pad { fill: var(--pad); }
.mo { stroke: var(--o); fill: var(--o); } .mx { stroke: var(--x); fill: var(--x); } .mc { stroke: var(--c); fill: var(--c); }
.mv { fill: none; stroke-width: 0.075; stroke-linecap: round; stroke-linejoin: round; }
.ah { stroke: none; }
.po { fill: var(--o); }
.pot { fill: var(--on-o); font: 700 0.52px 'Barlow Condensed', sans-serif; text-anchor: middle; dominant-baseline: central; }
.px line { stroke: var(--x); stroke-width: 0.12; stroke-linecap: round; }
.xt { fill: var(--x); font: 700 0.44px 'Barlow Condensed', sans-serif; }
.pc { fill: var(--floor); stroke: var(--c); stroke-width: 0.07; }
.pct { fill: var(--c); font: 700 0.5px 'Barlow Condensed', sans-serif; text-anchor: middle; dominant-baseline: central; }
.pq { fill: var(--floor); stroke: var(--o); stroke-width: 0.06; }
.ball { fill: var(--ballc); stroke: var(--ink); stroke-width: 0.04; }
.bump { fill: var(--bump); stroke: var(--x); stroke-width: 0.04; }
.step { fill: var(--step-bg); stroke: var(--step-ink); stroke-width: 0.04; }
.stept { fill: var(--step-ink); font: 700 0.36px 'Barlow', sans-serif; text-anchor: middle; dominant-baseline: central; }
.lab { fill: var(--lab); font: 600 0.42px 'Barlow', sans-serif; text-anchor: middle; dominant-baseline: central; }

/* ---------- session builder (/session-plans/builder/) ---------- */
.sb-main { max-width: 1180px; }
.sb-controls { --sb-ctl: 2.75rem; display: flex; flex-wrap: wrap; align-items: end; gap: 0.9rem 1rem; margin: 0 0 1.75rem; }
.sb-ages { border: 0; display: flex; gap: 0; min-width: 0; }
.sb-ages legend, .sb-field { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: #a6b3a2; }
.sb-ages legend, .sb-field { line-height: 1.2; }
.sb-ages legend { margin-bottom: 0.4rem; padding: 0; }
.sb-ages label { position: relative; }
.sb-ages input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.sb-ages span { display: flex; align-items: center; height: var(--sb-ctl); line-height: 1; padding: 0 0.9rem; border: 1px solid rgba(242,237,228,0.25); margin-left: -1px; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.05rem; color: var(--chalk-dk); }
.sb-ages label:first-of-type span { border-radius: 4px 0 0 4px; } .sb-ages label:last-of-type span { border-radius: 0 4px 4px 0; }
.sb-ages input:checked + span { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.sb-ages input:focus-visible + span { outline: 2px solid var(--chalk); outline-offset: 2px; position: relative; }
.sb-field { display: grid; gap: 0.4rem; flex: 1 1 8rem; min-width: 0; }
.sb-field.wide { flex-basis: 12rem; }
.sb-field input { font: 500 0.98rem 'Barlow', sans-serif; color: var(--chalk); background: var(--panel); border: 1px solid rgba(242,237,228,0.25); border-radius: 4px; height: var(--sb-ctl); line-height: normal; padding: 0 0.7rem; width: 100%; text-transform: none; letter-spacing: 0; }
.sb-field input:focus-visible { outline: 2px solid var(--lime); outline-offset: 1px; }
.sb-actions { display: flex; gap: 0.6rem; align-items: center; }
.sb-actions .print-btn, .sb-clear { height: var(--sb-ctl); padding-block: 0; line-height: 1; }
.sb-actions .print-btn:hover { transform: none; }
.sb-clear { background: none; border: 1px solid rgba(242,237,228,0.3); color: var(--chalk-dk); border-radius: 4px; padding: 0.75rem 1rem; cursor: pointer; font: 700 0.95rem 'Barlow Condensed', sans-serif; letter-spacing: 0.08em; text-transform: uppercase; }
.sb-clear:hover { border-color: var(--chalk); color: var(--chalk); }

.sb-grid { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .sb-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .sb-lib { position: sticky; top: 4.75rem; max-height: calc(100vh - 5.75rem); overflow-y: auto; padding-right: 0.4rem; } }
.sb-h { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.35rem; text-transform: uppercase; color: var(--chalk); margin: 0 0 0.75rem; }
.sb-plan { background: var(--panel); border: 1px solid var(--rule); border-radius: 8px; padding: 0.9rem 0.95rem; margin-bottom: 0.8rem; }
.sb-plan-h { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.35rem 0.75rem; align-items: center; margin-bottom: 0.6rem; }
.sb-plan-h .sp-chips { grid-column: 1 / -1; }
.sb-plan h3 { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.2rem; line-height: 1.05; text-transform: uppercase; color: var(--chalk); margin: 0; }
.sb-view { font-size: 0.8rem; color: var(--lime); white-space: nowrap; }
.sb-pieces { list-style: none; margin: 0 0 0.6rem; padding: 0; display: grid; gap: 0.4rem; }
.sb-piece { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 0.55rem; align-items: center; padding: 0.45rem 0.5rem; border-radius: 5px; border: 1px solid var(--rule); background: rgba(15,26,19,0.35); cursor: grab; font-size: 0.86rem; color: var(--chalk-dk); line-height: 1.35; }
.sb-piece:hover { border-color: rgba(181,227,42,0.45); }
.sb-piece:active { cursor: grabbing; }
.sb-piece[data-piece="main"] { border-left: 3px solid var(--lime); }
.sb-piece[data-piece="warm"], .sb-piece[data-piece="fin"] { border-left: 3px solid #f0a050; }
.sb-piece.is-in { background: rgba(181,227,42,0.08); }
.sb-pt strong { display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: #c3cdbf; }
.sb-grip { color: #7d8c7a; letter-spacing: -2px; font-size: 0.9rem; }
.sb-pm { font-variant-numeric: tabular-nums; color: var(--chalk); font-weight: 600; white-space: nowrap; }
.sb-add, .sb-all { font: 700 0.8rem 'Barlow Condensed', sans-serif; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; border-radius: 4px; padding: 0.4rem 0.65rem; min-height: 2rem; }
.sb-add { background: var(--lime); color: var(--ink); border: 0; }
.sb-piece.is-in .sb-add { background: transparent; color: var(--lime); border: 1px solid rgba(181,227,42,0.5); }
.sb-all { background: none; color: var(--chalk-dk); border: 1px solid rgba(242,237,228,0.25); width: 100%; }
.sb-add:focus-visible, .sb-all:focus-visible, .sb-x:focus-visible, .sb-mins button:focus-visible { outline: 2px solid var(--chalk); outline-offset: 2px; }

.sb-session { scroll-margin-top: 5rem; background: var(--panel); border: 1px solid var(--rule); border-radius: 8px; padding: 1rem 1.1rem 1.1rem; transition: border-color 0.15s, background 0.15s; min-width: 0; }
.sb-session.sb-dragging { border-style: dashed; border-color: rgba(181,227,42,0.5); }
.sb-session.sb-over { background: rgba(181,227,42,0.06); }
.sb-head { margin-bottom: 0.8rem; }
.sb-head .sb-h { margin-bottom: 0.15rem; }
.sb-sub { font-size: 0.88rem; color: #a6b3a2; margin: 0 0 0.6rem; }
.sb-stats { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.6rem; margin-bottom: 0.55rem; }
.sb-stat { font-family: 'Barlow Condensed', sans-serif; font-size: 1.05rem; color: var(--chalk-dk); font-variant-numeric: tabular-nums; }
.sb-stat b { font-size: 1.5rem; color: var(--lime); font-weight: 800; }
.sb-stat.over b { color: #ff9a6b; }
.sb-msg { font-size: 0.8rem; color: #a6b3a2; margin-right: 0.8rem; }
.sb-bar { height: 12px; }
.sb-bar .sp-seg { padding: 0; } .sp-seg.tpl { background: rgba(242,237,228,0.32); }
.sb-empty { font-size: 0.9rem; color: #a6b3a2; border: 1px dashed rgba(242,237,228,0.25); border-radius: 6px; padding: 0.6rem 0.8rem; margin: 0 0 0.6rem; }
.sb-rows { list-style: none; margin: 0; padding: 0; }
.sb-row { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr) auto; gap: 0.75rem; align-items: start; padding: 0.6rem 0.5rem; border-top: 1px solid var(--rule); font-size: 0.92rem; }
.sb-time { font-variant-numeric: tabular-nums; color: #a6b3a2; font-size: 0.85rem; padding-top: 0.1rem; }
.sb-what { color: var(--chalk-dk); min-width: 0; line-height: 1.45; }
.sb-what strong { color: var(--chalk); margin-right: 0.3rem; }
.sb-hint { display: block; font-style: normal; font-size: 0.78rem; color: var(--lime); margin-top: 0.2rem; }
.sb-row.slot { background: repeating-linear-gradient(135deg, transparent 0 8px, rgba(242,237,228,0.025) 8px 16px); }
.sb-row.zero { opacity: 0.45; } .sb-row.zero .sb-what { text-decoration: line-through; }
.sb-mins { display: inline-flex; align-items: center; gap: 0.3rem; font-variant-numeric: tabular-nums; }
.sb-mins b { min-width: 1.7rem; text-align: center; color: var(--chalk); font-family: 'Barlow Condensed', sans-serif; font-size: 1.1rem; }
.sb-mins button { width: 1.9rem; height: 1.9rem; border-radius: 4px; border: 1px solid rgba(242,237,228,0.25); background: none; color: var(--chalk-dk); cursor: pointer; font-size: 1rem; line-height: 1; }
.sb-mins button:hover { border-color: var(--chalk); color: var(--chalk); }
.sb-row.plan { border-left: 3px solid #f0a050; }
.sb-row.plan.main { border-left-color: var(--lime); border-top-color: transparent; }
.sb-row.plan.rest .sb-what { color: #a6b3a2; }
.sb-row.plan summary { cursor: pointer; list-style-position: outside; }
.sb-row.plan details[data-rest] summary { cursor: default; list-style: none; pointer-events: none; }
.sb-row.plan details[data-rest] summary::-webkit-details-marker { display: none; }
.sb-from { display: inline-block; font-size: 0.78rem; color: #a6b3a2; }
.sb-warn { display: block; font-size: 0.76rem; color: #ffb38a; }
.sb-detail { padding: 0.7rem 0 0.2rem; }
.sb-detail .sp-body.has-fig { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1180px) { .sb-detail .sp-body.has-fig { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.sb-group { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.5rem 0.5rem 0.2rem; border-top: 1px solid var(--rule); border-left: 3px solid var(--lime);
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lime); }
.sb-x { background: none; border: 1px solid rgba(242,237,228,0.25); color: var(--chalk-dk); border-radius: 4px; cursor: pointer; font: 700 0.75rem 'Barlow Condensed', sans-serif; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.25rem 0.5rem; min-height: 1.9rem; min-width: 1.9rem; }
.sb-x:hover { border-color: #ff9a6b; color: #ff9a6b; }
.sb-target { outline: 2px solid var(--lime); outline-offset: -2px; background: rgba(181,227,42,0.08) !important; }
@keyframes sb-flash { from { background: rgba(181,227,42,0.25); } to { background: transparent; } }
.sb-flash { animation: sb-flash 1.2s ease-out; }
@media (prefers-reduced-motion: reduce) { .sb-flash { animation: none; } }
.sb-note { font-size: 0.85rem; color: #a6b3a2; margin: 0.8rem 0 0; }
.sb-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sb-print { display: none; }
.sb-dock { display: none; }
@media (max-width: 899px) {
  .sb-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; gap: 1rem; align-items: baseline; justify-content: space-between;
    padding: 0.7rem 16px calc(0.7rem + env(safe-area-inset-bottom, 0px)); background: var(--ink); border-top: 1px solid rgba(181,227,42,0.35);
    color: var(--chalk-dk); text-decoration: none; font-family: 'Barlow Condensed', sans-serif; font-size: 1rem; font-variant-numeric: tabular-nums; }
  .sb-dock b { color: var(--lime); font-size: 1.2rem; }
  .sb-dock .go { color: var(--lime); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.85rem; }
  .sb-main { padding-bottom: 4.5rem; }
}
@media (max-width: 600px) { .sb-row { grid-template-columns: 3.3rem minmax(0, 1fr) auto; gap: 0.5rem; padding: 0.55rem 0.3rem; } .sb-time { font-size: 0.78rem; } .sb-group span { min-width: 0; flex: 1 1 12rem; } .sb-piece { grid-template-columns: minmax(0, 1fr) auto auto; } .sb-grip { display: none; } }
@media print {
  .sb-print { display: block; }
  .sb-pfields { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 9pt; margin: 0 0 8px; }
  .sb-run { margin-bottom: 6px; } .sb-run td:last-child { width: 30%; }
  .sb-pnote { font-size: 8.5pt; margin: 0 0 6px; }
  .sb-print .sp-block:first-of-type { break-before: page; }
}

/* ---------- print: A4 clipboard sheets ---------- */
@page { size: A4; margin: 12mm 12mm 14mm; }
@media print {
  :root {
    --floor: #ffffff; --paint: #edf2f8; --line: #8d97a2; --zone: rgba(29,91,189,0.08);
    --o: #1d5bbd; --on-o: #ffffff; --x: #c22f2a; --c: #39404a; --ballc: #c8581a;
    --cone: #d99c00; --pad: #7b8898; --bump: #f2b233; --step-bg: #ffffff; --step-ink: #1c232c;
    --lab: #4f5964; --rule: #c9cfd5; --panel: #ffffff;
    --chalk: #1c232c; --chalk-dk: #2b333d; --lime: #3d6b12; --ink: #ffffff;
  }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { background: #fff !important; color: #1c232c; font-size: 9.6pt; line-height: 1.38; }
  body::before { display: none !important; }
  .site-header, .crumbs, .intro-actions, .related, footer, .no-print { display: none !important; }
  main { max-width: none; padding: 0; }
  .guide-eyebrow { margin: 0 0 4px; } .guide-eyebrow::before { display: none; }
  h1 { font-size: 22pt; margin-bottom: 6px; color: #1c232c; }
  .sp-mech { font-size: 9.8pt; margin-bottom: 6px; }
  .sp-lead { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 10px; margin-bottom: 8px; }
  .sp-chain li { font-size: 9pt; padding: 2px 5px; }
  .sp-setup { padding: 7px 9px; font-size: 8.6pt; }
  .sp-legend { font-size: 7.5pt; margin-bottom: 4px; } .sp-legend svg { width: 22px; height: 11px; }
  .sp-bar { height: 20px; } .sp-seg { font-size: 7.5pt; color: #fff; } .sp-seg.block { background: #1d5bbd; } .sp-seg.edge { background: #c8581a; } .sp-seg.rest { background: #d6dbe0; color: #4f5964; }
  .sp-block { margin-top: 8px; padding-top: 6px; break-inside: avoid; page-break-inside: avoid; }
  article .sp-block h2 { font-size: 14pt; margin-bottom: 5px; color: #1c232c; } .sp-block h2 .min { font-size: 11pt; }
  .sp-body.has-fig { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 12px; }
  .sp-fig { padding: 3px; border-color: #c9cfd5; } .sp-fig svg { max-height: 100mm; } .sp-fig figcaption { font-size: 7.6pt; color: #4f5964; padding-top: 3px; }
  .lab { font-size: 0.5px; } .stept { font-size: 0.4px; }
  .sp-text li { margin-bottom: 2px; } .sp-text ul { margin-bottom: 5px; }
  article p, article li, article ol, article ul { color: #1c232c; }
  article strong { color: #000; }
  .sp-table { font-size: 8pt; color: #1c232c; } .sp-table th, .sp-table td { padding: 3px 5px; border-color: #c9cfd5; } .sp-table th { color: #4f5964; }
  .attrib { font-size: 7.5pt; color: #4f5964; margin-top: 10px; padding-top: 6px; border-color: #c9cfd5; }
  a, .sp-text a { color: inherit; text-decoration: none; }
}