/* Sculpted time dial. Functional controls are part of the hero, without a card shell. */
.opp-shell .horizon { flex:0 0 320px; width:320px; max-width:100%; position:relative; text-align:center; color:#cfdef2; padding:0 12px 4px; box-sizing:border-box; }
.horizon-stage { position:relative; width:260px; height:244px; margin:0 auto; isolation:isolate; }
.horizon-stage::before { content:''; position:absolute; inset:-18px -42px; z-index:-1; background:radial-gradient(ellipse,#5c91f526,transparent 66%); pointer-events:none; }
.horizon-orbital { position:absolute; inset:16px -2px 16px; border:1px solid #7eafff22; border-radius:50%; transform:rotate(-32deg) scaleY(.72) scaleX(1.18); pointer-events:none; }
.horizon-orbital::after { content:''; position:absolute; width:4px; height:4px; top:27px; right:32px; background:#9ac4ff; border-radius:50%; box-shadow:0 0 10px #75a8ff88; }
.horizon-dial { position:absolute; width:222px; height:222px; top:0; left:19px; border-radius:50%; cursor:grab; touch-action:none; user-select:none; outline-offset:8px; }
.horizon-dial::before { content:''; position:absolute; inset:28px; border-radius:50%; background:radial-gradient(ellipse at 30% 15%,#344f6e45,transparent 65%),linear-gradient(140deg,#17273b,#0a1422 68%); border:1px solid #7b9cc832; box-shadow:inset 1px 1px 1px #d6ebff20,inset -1px -2px 4px #0009,0 12px 24px #0006,0 0 35px #7dacf50c; transition:box-shadow .25s; }
.horizon-dial:hover::before,.horizon-dial:focus-visible::before { box-shadow:inset 1px 1px 1px #d6ebff38,inset -1px -2px 4px #0009,0 12px 24px #0006,0 0 45px #7dacf52a; }
.horizon-dial.is-dragging { cursor:grabbing; }
.horizon-dial svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.horizon-track { stroke:#253c56; fill:none; stroke-width:1.3; }
#horizon-ticks line { stroke:#4e648133; stroke-width:.8; }
#horizon-ticks .major { stroke:#819dc3; stroke-width:1; }
#horizon-arc { fill:none; stroke:url(#horizon-blue); stroke-width:2; stroke-linecap:round; transform:rotate(-90deg); transform-origin:center; transition:stroke-dasharray .25s ease; filter:drop-shadow(0 0 3px #81b4ff66); }
.is-dragging #horizon-arc { transition:none; }
#horizon-tip { fill:#e5f3ff; stroke:#a1c6ff33; stroke-width:7; filter:drop-shadow(0 0 5px #90c0ff); }
#horizon-dots circle { fill:#0b1524; stroke:#5c7698; stroke-width:1.2; }
#horizon-dots circle.selected { fill:#8be2d2; stroke:#142a36; stroke-width:1.4; }
.horizon-value { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none; }
.horizon-kicker { font-size:8px; letter-spacing:2.5px; color:#8cabc9; margin-bottom:6px; }
.horizon-value strong { font:500 65px/.98 var(--font-family); letter-spacing:-4px; color:#dcecff; text-shadow:0 2px 20px #93c3ff20; font-variant-numeric:tabular-nums; }
.horizon-value strong span { font-size:28px; font-weight:400; letter-spacing:-1px; color:#91b3dd; margin-left:2px; }
.horizon-caption { font-size:6.5px; letter-spacing:1.7px; color:#92adca; margin-top:12px; }
.horizon-drag { position:absolute; bottom:3px; left:0; right:0; display:flex; gap:7px; align-items:center; justify-content:center; color:#7994b6; font-size:9px; letter-spacing:.2px; }
.horizon-drag svg { width:16px; height:9px; fill:none; stroke:currentColor; stroke-width:1; }
.horizon-presets { display:flex; width:max-content; margin:13px auto 0; gap:3px; padding:4px; border-radius:30px; background:#0a1320b3; border:1px solid #91b7e326; box-shadow:inset 0 1px 0 #d7eaff06; }
.horizon-presets button { min-width:45px; height:30px; padding:0 12px; border:1px solid transparent; border-radius:22px; background:none; color:#859cb8; font:500 11px var(--font-family); cursor:pointer; transition:background .2s,color .2s,box-shadow .2s; }
.horizon-presets button:hover { color:#e0edff; background:#192b41; }
.horizon-presets button[aria-pressed=true] { background:linear-gradient(135deg,#c2dfff,#80abe7); color:#0e213b; border-color:#bcd7fd; box-shadow:0 2px 9px #81b7ff24,inset 0 1px 0 #e6f3ff70; }
.horizon-insight { display:flex; flex-direction:column; align-items:center; gap:5px; margin-top:14px; }
.horizon #horizon-view { display:flex; align-items:center; gap:8px; padding:0; border:0; background:none; color:#aec9ee; font:500 11px var(--font-family); cursor:pointer; }
#horizon-view:hover { color:#e3efff; }
#horizon-view > span:last-child { font-size:14px; }
#horizon-detail { color:#7f96b3; font-size:10px; line-height:1.5; max-width:300px; }
.horizon-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.horizon-reset { display:block; margin:0 0 16px; padding:8px 12px; background:#172940; border:1px solid #3c597d; border-radius:8px; color:#b5d2fc; font:500 12px var(--font-family); cursor:pointer; }
@media(max-width:950px) { .opp-shell .horizon { flex-basis:280px; width:280px; padding-inline:0; } }
@media(max-width:740px) { .opp-shell .opp-hero { flex-direction:column; align-items:flex-start; gap:20px; } .opp-shell .horizon { flex-basis:auto; align-self:center; width:300px; } }
@media(prefers-reduced-motion:reduce) { .horizon *,.horizon *::before { transition:none!important; } }

/* Compact hero: the interactive dial shares the heading's vertical rhythm. */
.opp-shell .opp-hero { display:grid; grid-template-columns:minmax(0,1fr) 246px; align-items:center; gap:32px; padding:32px 0 28px; }
.opp-shell .opp-hero > div:first-child { min-width:0; }
.opp-shell .horizon { width:246px; padding:0; }
.opp-shell .horizon-stage { width:204px; height:194px; }
.opp-shell .horizon-dial { width:180px; height:180px; left:12px; }
.opp-shell .horizon-dial::before { inset:23px; }
.opp-shell .horizon-value strong { font-size:51px; letter-spacing:-3px; }
.opp-shell .horizon-value strong span { font-size:23px; }
.opp-shell .horizon-caption { font-size:5.5px; letter-spacing:1px; margin-top:8px; }
.opp-shell .horizon-kicker { font-size:7px; letter-spacing:2px; }
.opp-shell .horizon-presets { margin-top:8px; }
.opp-shell .horizon-insight { margin-top:10px; }
@container opportunity (max-width: 700px) {
  .opp-shell .opp-hero { grid-template-columns:1fr; gap:22px; padding:26px 0 22px; }
  .opp-shell .opp-hero h1 { font-size:clamp(32px,6vw,42px); line-height:1.12; }
  .opp-shell .horizon { display:grid; grid-template-columns:116px minmax(0,1fr); grid-template-rows:auto auto; align-items:center; column-gap:16px; width:100%; padding:14px 10px; border-block:1px solid #8fb4e21c; }
  .opp-shell .horizon-stage { grid-row:1/3; width:116px; height:116px; }
  .opp-shell .horizon-dial { width:116px; height:116px; left:0; }
  .opp-shell .horizon-dial::before { inset:15px; }
  .opp-shell .horizon-value strong { font-size:34px; letter-spacing:-2px; }
  .opp-shell .horizon-value strong span { font-size:17px; }
  .opp-shell .horizon-kicker { font-size:5px; letter-spacing:1px; margin-bottom:3px; }
  .opp-shell .horizon-caption,.opp-shell .horizon-drag,.opp-shell .horizon-orbital { display:none; }
  .opp-shell .horizon-presets { margin:0; justify-self:start; align-self:end; width:100%; max-width:212px; gap:0; }
  .opp-shell .horizon-presets button { min-width:0; flex:1; padding-inline:6px; }
  .opp-shell .horizon-insight { align-items:flex-start; text-align:left; align-self:start; margin-top:10px; }
  .opp-shell #horizon-detail { font-size:9px; }
  .opp-shell .horizon #horizon-view { font-size:10px; }
}