/* Areté — room-radar (2026-09-11). Governed by DESIGN-CONSTITUTION.md.
   Refinement only: the dial (js/44 stage) is untouched. The statement is true of the data, the
   number sits beneath the dial in the room's type, the one exit is quiet text under the sentences.
   Loads after arete-system.css; same or higher specificity, later wins. */

/* ── the statement: Syne 28px, one ink2 sentence, no label, no stamp ── */
#view-radar .rdo-title{ margin:0 0 12px; font:500 28px/1.1 var(--f-disp); letter-spacing:-.022em; color:rgb(var(--ink)); max-width:16ch; text-wrap:balance; }
#view-radar .rdo-sub{ margin:0; font:400 16px/1.55 var(--f-body); color:rgb(var(--ink2)); max-width:34ch; }

/* ── the composition sits in the middle of the viewport; the dial's column is sized by the viewport's height so the disc holds 40 to 50% of it ── */
@media (min-width:1024px){ #view-radar .rdo{ min-height:calc(100dvh - 140px); } }
#view-radar .rdo-dial{ width:100%; margin:0 auto; }
#view-radar .rdo-stage{ display:block; width:100%; height:auto; aspect-ratio:600/580; margin:0; overflow:visible; }
@media (min-width:1280px){ #view-radar .rdo{ grid-template-columns:minmax(240px,1fr) minmax(360px,min(640px,66vh)) 280px; gap:48px; align-items:center; } }
@media (min-width:1024px) and (max-width:1279px){ #view-radar .rdo{ grid-template-columns:minmax(220px,1fr) minmax(300px,min(440px,62vh)) 250px; gap:32px; align-items:center; } }
@media (max-width:1023px){ #view-radar .rdo-dial{ width:min(100%,560px); margin:8px auto 4px; } }

/* ── the number beneath the dial: Manrope 300 40px, its stamp 13px ink3, sentence case ── */
#view-radar .rdo-figure{ display:flex; flex-direction:column; align-items:center; gap:2px; margin:6px 0 0; text-align:center; }
#view-radar .rdo-figure__n{ font:300 40px/1 var(--f-body); letter-spacing:-.05em; font-variant-numeric:tabular-nums; color:rgb(var(--ink)); }
#view-radar .rdo-figure__t{ font:400 13px/1.4 var(--f-body); letter-spacing:0; text-transform:none; color:rgb(var(--ink3)); }

/* ── the sentences: a 13px ink3 label, Manrope 16px ink, a hairline between, 40ch ── */
#view-radar .rdo-h{ margin:0 0 4px; font:400 13px/1.4 var(--f-body); letter-spacing:0; text-transform:none; color:rgb(var(--ink3)); }
#view-radar .rdo-say{ margin:0; padding:12px 0; border-top:1px solid var(--hair); font:400 16px/1.5 var(--f-body); color:rgb(var(--ink)); max-width:40ch; }
#view-radar .rdo-say:last-of-type{ border-bottom:1px solid var(--hair); }

/* ── the one exit: js/24's #rd-plate, moved under the sentences, as quiet text ── */
#view-radar .rdo-r .rd-links{ margin:14px 0 0; display:block; }
#view-radar .rdo-r .rd-q, #view-radar .rdo-r .rd-q[aria-expanded="true"], html[data-theme="light"] #view-radar .rdo-r .rd-q{
  display:inline-flex; align-items:center; min-height:44px; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none;
  font:500 14px var(--f-body); letter-spacing:0; text-transform:none; color:rgb(var(--ink2)); }
#view-radar .rdo-r .rd-q:hover{ background:transparent; border:0; box-shadow:none; color:rgb(var(--ink)); }
#view-radar .rdo-r .rd-q:focus-visible{ outline:2px solid var(--ice2); outline-offset:3px; }

/* what remains of the Scope: the decisions on your plate, as rows, in the room's own type */
#view-radar details > summary{ list-style:none; border:0 !important; background:transparent !important;
  border-radius:0 !important; padding:12px 0 !important; min-height:44px;
  font:500 15px/1.4 var(--f-body) !important; color:rgb(var(--ink2)) !important; letter-spacing:0 !important; }
#view-radar details > summary::-webkit-details-marker{ display:none; }
#view-radar details > summary:hover{ color:rgb(var(--ink)) !important; }
#view-radar #radar-list{ margin-top:4px; }
#view-radar #radar-list > *{ border:0 !important; border-top:1px solid var(--hair) !important;
  border-radius:0 !important; background:transparent !important; padding:12px 0 !important; }
#view-radar :is(.overline,[class*="tracking-"],.font-mono){
  font-family:var(--f-body) !important; letter-spacing:0 !important; text-transform:none !important;
  font-size:13.5px !important; color:rgb(var(--ink3)) !important; }

/* what the plate opens: the explanation is one quiet line under the room, not a card with a mark */
#view-radar .rdo ~ * .card,
#view-radar section > .card{ border:0 !important; background:transparent !important; box-shadow:none !important;
  border-radius:0 !important; padding:20px 0 0 !important; }
#view-radar section > .card > div:first-child > :first-child:not(p):not(h2):not(h3){ display:none; }
#view-radar h2, #view-radar h3{ font-family:var(--f-disp) !important; font-weight:500 !important;
  font-size:20px !important; line-height:1.15 !important; letter-spacing:-.02em !important;
  color:rgb(var(--ink)) !important; text-transform:none !important; }
#view-radar p{ font-family:var(--f-body) !important; font-size:15px !important; line-height:1.55 !important;
  color:rgb(var(--ink2)) !important; letter-spacing:0 !important; max-width:62ch; }


/* ── HER 09-12 RECOMPOSITION ───────────────────────────────────────────────
   Two zones, not three. The field and its number on the left; the statement
   and what Areté noticed on the right, in that order, so the room has one
   entry point and the value sits with the object that carries it. */
@media (min-width:1024px){
  #view-radar .rdo{ grid-template-columns:minmax(320px,5fr) minmax(0,6fr) !important; gap:56px !important;
    align-items:center !important; max-width:var(--room-max,1180px); margin:0 auto; }
  #view-radar .rdo-l{ display:block !important; }
}
#view-radar .rdo-r{ max-width:52ch; }
#view-radar .rdo-head{ margin:0 0 22px; }
#view-radar .rdo-title{ font-size:clamp(28px,2.6vw,38px) !important; max-width:20ch !important; margin-bottom:10px !important; }
#view-radar .rdo-sub{ font-size:17px !important; line-height:1.5 !important; max-width:46ch !important; color:rgb(var(--ink2)) !important; }
#view-radar .rdo-h{ margin:26px 0 2px !important; }
#view-radar .rdo-say{ font-size:18px !important; line-height:1.5 !important; padding:14px 0 !important;
  color:rgb(var(--ink2)) !important; max-width:46ch !important; }
#view-radar .rdo-say:first-of-type{ color:rgb(var(--ink)) !important; }   /* the lead finding reads first */

/* ═══════════════════════════════════════════════════════════════════════════
   THE DIAL'S COLOUR — Stage 0 item 2 (founder 2026-09-14).

   Every colour the dial draws used to be a hex literal inside the SVG string in
   js/44-radar-orbit.js: 26 of them, the largest private ramp in the product.
   Her ruling: prefer CSS over cv() where the colour is presentation rather than
   data. On the dial it is all presentation — the geometry carries the data, the
   colour only lets you see it — so the whole ramp moves here and the module
   keeps no colour knowledge at all.

   stop-color, stroke and fill are CSS properties on SVG, so a class is enough.
   Nothing is !important: these are classes on elements that carry no competing
   presentation attribute any more.
   ═══════════════════════════════════════════════════════════════════════════ */

/* the disc, centre to rim */
#view-radar .rdo-glass-0{ stop-color:var(--mat-depth-0); }
#view-radar .rdo-glass-1{ stop-color:var(--mat-depth-1); }
#view-radar .rdo-glass-2{ stop-color:var(--mat-depth-2); }
#view-radar .rdo-glass-3{ stop-color:var(--mat-depth-3); }

/* the glow inside the glass, and the halo under a reading */
#view-radar .rdo-glow{ stop-color:var(--mg-glow); }
#view-radar .rdo-lit{ stop-color:var(--mg-ice); }

/* the sheen off the top left */
#view-radar .rdo-sheen-s{ stop-color:var(--ice-hi); }

/* the bevel at the rim */
#view-radar .rdo-edge-hi{ stop-color:var(--ice-lo); }
#view-radar .rdo-edge-lo{ stop-color:var(--mg-ice); }

/* the shadow the disc casts */
#view-radar .rdo-cast{ stop-color:var(--mat-cast); }

/* the geometry inside the glass, and the ring it sits in */
#view-radar .rdo-geom{ stroke:var(--mg-ice); }
#view-radar .rdo-ring{ stroke:var(--mg-ice); }

/* today's arc, the centre marker, and a reading's own point of light */
#view-radar .rdo-arc{ stroke:var(--ice-hi); }
#view-radar .rdo-blip{ fill:var(--ice-hi); }
#view-radar .rdo-blip--hollow{ fill:none; stroke:var(--ice-hi); }
#view-radar .rdo-needle{ fill:var(--ice-hi); }

/* the disturbance a reading makes in the water */
#view-radar .rdo-ripple{ stroke:var(--ice-lo); }