/* Package 1 · Chapters 1–3. Colors and type follow the shared style guide. */
.opening-panel { height:100%; display:flex; flex-direction:column; gap:10px; padding:14px 0; min-height:0; }
.opening-panel p { margin:0; }
.opening-heading { color:var(--ink); font:500 14px/1.35 var(--body); }
.opening-summary { color:var(--ink); font:13px/1.5 var(--mono); min-height:3em; }
.opening-caption { color:var(--muted); font:12px/1.5 var(--body); }
.opening-plot { position:relative; flex:1; min-height:220px; }
.opening-panel svg text { font-size:11px; }
.opening-panel .opening-gridline { stroke:var(--faint); stroke-dasharray:2 3; stroke-width:.7; }
.opening-button { align-self:flex-start; border:1px solid var(--accent); border-radius:6px; background:transparent; color:var(--accent); padding:9px 16px; min-height:42px; font:500 14px var(--body); cursor:pointer; }
.opening-button:hover { background:var(--surface); color:var(--ink); }
.opening-button:disabled { opacity:.5; cursor:default; }
.opening-panel :focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.opening-guess { justify-content:center; }
.guess-controls label { display:flex; align-items:baseline; justify-content:space-between; color:var(--muted); font-size:13px; gap:12px; }
.guess-controls output { color:var(--accent); font:500 clamp(22px,3vw,32px)/1.2 var(--mono); }
.guess-controls input { width:100%; min-height:32px; accent-color:var(--accent); cursor:pointer; margin:5px 0 0; }
.guess-range-labels { display:flex; justify-content:space-between; color:var(--muted); font:11px var(--mono); }
.guess-feedback { min-height:3em; color:var(--ink); font-size:14px; line-height:1.5; }
.guess-comparison { flex:0 1 auto; }
.guess-comparison svg { width:100%; height:auto; }
.guess-mark line { stroke:var(--accent); stroke-width:2; }
.guess-mark circle { fill:var(--accent); }
.guess-mark text { fill:var(--accent); }
.guess-mark[data-kind="actual"] line,.guess-mark[data-kind="actual"] circle { stroke:var(--c-social); fill:var(--c-social); }
.guess-mark[data-kind="actual"] text { fill:var(--c-social); }
.drop-line { fill:none; stroke-linejoin:round; stroke-linecap:round; }
.drop-endpoint circle { stroke:var(--bg); stroke-width:2; }
.opening-panel .drop-end-value { fill:currentColor; font-weight:500; font-size:13px; }
.opening-panel .drop-end-period { font-size:10px; }
.opening-panel .drop-labels text { font-size:11px; }
.drop-cursor line { stroke:var(--muted); stroke-dasharray:3 4; opacity:.7; }
.drop-cursor circle { stroke:var(--bg); stroke-width:2; }
.drop-input { cursor:crosshair; touch-action:pan-y; }
.drop-input:focus-visible { outline-offset:2px; }
.opening-inspection { min-height:3em; color:var(--muted); font:12px/1.5 var(--mono); }
.week-connector { stroke:var(--muted); stroke-width:2; }
.week-start { fill:var(--bg); stroke:var(--muted); stroke-width:2; }
.week-end { fill:var(--c-social); stroke:var(--bg); stroke-width:1; }
.opening-panel .week-row-title { fill:var(--ink); font:500 13px var(--body); }
.opening-panel .week-end-label { fill:var(--c-social); }
.opening-weekdays .opening-plot { min-height:270px; }
@media (max-width:820px) {
  #guess .viz { min-height:500px; }
  #drop .viz,#weekdays .viz { min-height:440px; }
  .opening-panel { gap:8px; padding:8px 0; }
  .opening-caption { font-size:11px; }
  .opening-summary { font-size:12px; }
  .opening-inspection { font-size:11px; }
  .guess-controls output { font-size:23px; }
  .guess-feedback { font-size:13px; min-height:3em; }
  .opening-button { min-height:40px; padding:8px 12px; }
}