/* ═══════════════════════════════════════════════════════════════════════════
   room-forecasts.css — FORECASTS (view: uncertainty), 2026-09-25.
   Every value below is taken from DESIGN-CONSTITUTION.md and the recipe it
   cites; nothing is new. Object: THE TRACE (§7, calibration). Composition:
   object 5fr left, words 7fr right, centred (§6). Type: the room's one Syne
   sentence with one Cormorant turn (§2). No glass on the ground (§4).
   js/29-uncertainty.js paints.
   ═══════════════════════════════════════════════════════════════════════════ */

#view-uncertainty .fc5{ display:block; width:100%; max-width:var(--room-max,1180px); margin:0 auto; }
#view-uncertainty .fc5-room{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:40px; align-items:center;
  min-height:calc(100vh - var(--hdr-h,60px) - 96px); }

/* ── the object: the trace (§7, §8: no axes, no grid, no legend) ── */
#view-uncertainty .fc5-obj{ display:flex; align-items:center; justify-content:center; }
#view-uncertainty .fc5-trace{ display:block; width:100%; max-height:50vh; overflow:visible; }
#view-uncertainty .fc5-level{ stroke:rgba(160,225,255,.22); stroke-width:1; }
#view-uncertainty .fc5-stem{ stroke:rgba(160,225,255,.18); stroke-width:1; stroke-dasharray:1 4; stroke-linecap:round; }
#view-uncertainty .fc5-cast{ fill:none; stroke:rgba(0,191,255,.35); stroke-width:10; stroke-linecap:round; filter:blur(10px); }
#view-uncertainty .fc5-line{ fill:none; stroke-width:2.5; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1;
  animation:fc5-draw .6s .08s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes fc5-draw{ to{ stroke-dashoffset:0; } }
#view-uncertainty .fc5-pt{ fill:var(--mg-ice); }
#view-uncertainty .fc5-pt:not(.is-live){ r:4; }
#view-uncertainty .fc5-pt.is-live{ fill:#dff4ff; filter:drop-shadow(0 0 10px rgba(0,191,255,.5)); }
#view-uncertainty .fc5-lab{ font:400 13px var(--f-body); fill:rgb(var(--ink3)); }
#view-uncertainty .fc5-lab--on{ fill:rgb(var(--ink2)); }
#view-uncertainty .fc5-lab--dim{ fill:rgb(var(--ink3)); }

/* ── the words ── */
#view-uncertainty .fc5-words{ text-align:left; max-width:520px; }
#view-uncertainty .fc5-stamp{ margin:0; font:400 13px/1.5 var(--f-body); color:rgb(var(--ink3)); }
#view-uncertainty .fc5-sentence{ margin:10px 0 0; max-width:22ch; font:500 clamp(28px,2.6vw,36px)/1.08 var(--f-disp); letter-spacing:-.022em;
  color:rgb(var(--ink)); text-wrap:balance; }
#view-uncertainty .fc5-sentence em{ font:italic 500 1.08em var(--f-em); color:#dff4ff; }

/* the one waiting on you: supporting detail on the ground, a hairline above */
#view-uncertainty .fc5-wait{ margin-top:48px; padding-top:30px; border-top:1px solid var(--hair); }
#view-uncertainty .fc5-call{ display:flex; align-items:baseline; justify-content:space-between; gap:32px; margin-top:12px; }
#view-uncertainty .fc5-callq{ margin:0; font:500 17px/1.45 var(--f-body); color:rgb(var(--ink)); max-width:30ch; }
#view-uncertainty .fc5-said{ flex:none; font:300 40px/1 var(--f-body); letter-spacing:-.05em; color:rgb(var(--ink)); font-variant-numeric:tabular-nums; white-space:nowrap; }
#view-uncertainty .fc5-numlab{ margin-left:6px; font:400 14px var(--f-body); letter-spacing:0; color:rgb(var(--ink3)); }

/* options are words inside one pill (§9, the .int-facts recipe at a 44px tap height) */
#view-uncertainty .fc5-acts{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 22px; margin-top:30px; }
#view-uncertainty .fc5-pill, #view-uncertainty .fc5-facts{ display:inline-flex; align-items:center; padding:0 6px; min-height:44px; border-radius:999px;
  border:1px solid rgba(160,225,255,.16); background:rgba(0,191,255,.05); box-shadow:inset 0 1px 0 rgba(255,255,255,.08); }
#view-uncertainty .fc5-pill .fc5-q{ padding:0 14px; color:rgb(var(--ink)); border-radius:999px; }
#view-uncertainty .fc5-sep{ width:1px; height:14px; background:rgba(160,225,255,.18); }
#view-uncertainty .fc5-q{ display:inline-flex; align-items:center; min-height:44px; padding:0 2px; border:0; background:transparent; cursor:pointer;
  font:500 14px var(--f-body); color:rgb(var(--ink2)); transition:color var(--dur-1,180ms) cubic-bezier(.2,.8,.2,1); }
#view-uncertainty .fc5-q:hover{ color:rgb(var(--ink)); }
#view-uncertainty .fc5-q:active{ transform:scale(.985); }
#view-uncertainty .fc5-q--dim{ color:rgb(var(--ink3)); }
#view-uncertainty .fc5-q:focus-visible, #view-uncertainty .fc5-disc:focus-visible{ outline:2px solid var(--ice2); outline-offset:3px; border-radius:999px; }

/* paging: two 44px discs (§9) */
#view-uncertainty .fc5-page{ display:flex; align-items:center; gap:10px; margin-right:12px; }
#view-uncertainty .fc5-disc{ width:44px; height:44px; padding:0; display:grid; place-items:center; border-radius:50%; cursor:pointer;
  border:1px solid rgba(160,225,255,.16); background:rgba(0,191,255,.04); color:rgb(var(--ink2)); transition:color var(--dur-1,180ms) ease, border-color var(--dur-1,180ms) ease; }
#view-uncertainty .fc5-disc svg{ width:18px; height:18px; }
#view-uncertainty .fc5-disc:hover{ color:rgb(var(--ink)); border-color:rgba(160,225,255,.3); }
#view-uncertainty .fc5-pos{ font:400 13px var(--f-body); color:rgb(var(--ink3)); font-variant-numeric:tabular-nums; }

#view-uncertainty .fc5-exits{ display:flex; align-items:center; flex-wrap:wrap; gap:12px 28px; margin-top:48px; }

/* a new forecast: the Intercept's input, a Syne line with no box and a wash on focus (§9) */
#view-uncertainty .fc5-add{ border-top:0; padding-top:0; margin-top:30px; }
#view-uncertainty .fc5-input{ display:block; width:100%; resize:none; border:0; background:transparent; padding:6px 8px; margin:0 -8px;
  font:500 28px/1.1 var(--f-disp); letter-spacing:-.025em; color:rgb(var(--ink)); outline:none; box-shadow:none; }
#view-uncertainty .fc5-input::placeholder{ color:rgb(var(--ink3)); opacity:.75; font-weight:400; }
#view-uncertainty .fc5-input:focus, #view-uncertainty .fc5-input:focus-visible{ outline:none !important; box-shadow:none !important; background:rgba(0,191,255,.07); border-radius:12px; }
#view-uncertainty .fc5-prob{ display:flex; align-items:center; gap:24px; margin-top:18px; }
#view-uncertainty .fc5-range{ -webkit-appearance:none; appearance:none; flex:1 1 auto; max-width:260px; height:44px; background:transparent; cursor:pointer; }
#view-uncertainty .fc5-range::-webkit-slider-runnable-track{ height:1px; background:rgba(160,225,255,.3); }
#view-uncertainty .fc5-range::-moz-range-track{ height:1px; background:rgba(160,225,255,.3); }
#view-uncertainty .fc5-range::-webkit-slider-thumb{ -webkit-appearance:none; width:18px; height:18px; margin-top:-9px; border-radius:50%; background:#dff4ff; border:0; }
#view-uncertainty .fc5-range::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; background:#dff4ff; border:0; }
#view-uncertainty .fc5-range:focus-visible{ outline:2px solid var(--ice2); outline-offset:3px; border-radius:8px; }
#view-uncertainty .fc5-facts{ margin-top:18px; padding:0 14px; gap:12px; }
#view-uncertainty .fc5-fact{ display:inline-flex; align-items:center; gap:8px; font:400 13px var(--f-body); color:rgb(var(--ink3)); }
#view-uncertainty .fc5-field{ min-height:40px; border:0; background:transparent; padding:0; font:400 14px var(--f-body); color:rgb(var(--ink)); outline:none; color-scheme:dark; }
#view-uncertainty .fc5-field option{ background:#0B1E33; }
#view-uncertainty .fc5-field:focus-visible{ outline:2px solid var(--ice2); outline-offset:3px; border-radius:6px; }
#view-uncertainty .fc5-primary{ min-height:52px; min-width:200px; padding:0 26px; border-radius:999px; font:600 16px var(--f-body); }
#view-uncertainty .fc5-add .fc5-acts{ margin-top:30px; }
#view-uncertainty .fc5-msg{ margin:6px 0 0; min-height:18px; font:400 13px var(--f-body); color:rgb(var(--ink2)); }
#view-uncertainty .fc5-revn{ width:72px; min-height:44px; border:0; background:rgba(0,191,255,.07); border-radius:12px; text-align:center;
  font:300 28px var(--f-body); color:rgb(var(--ink)); outline:none; -moz-appearance:textfield; }
#view-uncertainty .fc5-revn::-webkit-inner-spin-button{ -webkit-appearance:none; }
#view-uncertainty .fc5-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* the record, behind its quiet word: rows on the ground (§4, §6) */
#view-uncertainty .fc5-rec{ max-width:760px; margin:6px auto 48px; }
#view-uncertainty .fc5-row{ display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:44px; border-bottom:1px solid var(--hair); }
#view-uncertainty .fc5-row:first-child{ border-top:1px solid var(--hair); }
#view-uncertainty .fc5-row__q{ margin:0; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:400 15px/1.5 var(--f-body); color:rgb(var(--ink2)); }
#view-uncertainty .fc5-row__r{ flex:none; font:400 14px var(--f-body); color:rgb(var(--ink3)); font-variant-numeric:tabular-nums; }

/* phone (§11): its own composition, object first, then the sentence, then the rest */
@media (max-width:1023px){
  #view-uncertainty .fc5-room{ grid-template-columns:minmax(0,1fr); row-gap:18px; min-height:0; padding:4px 0 24px; }
  #view-uncertainty .fc5-trace{ max-height:34vh; }
  #view-uncertainty .fc5-words{ max-width:none; }
}
@media (max-width:767px){
  #view-uncertainty .fc5-sentence{ font-size:26px; }
  #view-uncertainty .fc5-said{ font-size:34px; }
  #view-uncertainty .fc5-call{ flex-direction:column; gap:6px; }
  #view-uncertainty .fc5-primary{ width:100%; }
}
@media (prefers-reduced-motion:reduce){ #view-uncertainty .fc5-line{ animation:none; stroke-dashoffset:0; } }