/* ═══════════════════════════════════════════════════════════════════════
   SafeRise — the AI's visual presence · css/saferise-ai-presence.css
   SR-584, founder direction 15 Oct 2026. Surface code srai-.

   SR-592 · indigo (founder direction, 16 Oct, from the homepage AI imagery):
   indigo-violet #7C5CF5 leads, brighter violet #9D6BFF through the top of every
   wave bar, the orb and the send; deep indigo grounds. Was SR-588's Dawn Indigo.
   THE RULE THIS SHEET EXISTS FOR: this colour belongs to the AI and to nothing
   else. The rest of the member's room stays gold. That is what makes this a
   STATE the member recognises rather than a second theme competing with the
   brand — and it is why no rule here touches a .sr-dash-, .sr-begin- or
   .sr-cover- class that is not inside an AI surface.

   THREE LEVELS OF PRESENCE, never the same UI twice:
     1 · the rail      — always there, quiet; a pulse when collapsed, a
                         context card with real routes when open.
     2 · the dashboard — ONE mid-size card. Never a hero: the AI is
                         available, it does not take the page.
     3 · the panel     — the full conversation, and only once the member
                         has engaged. js/saferise-ai.js owns its content;
                         this sheet only dresses it.

   Loaded once by js/saferise-rail.js, so every page that renders the rail
   gets the same presence. It is inserted BEFORE the system sheet, which
   must stay last (CLAUDE.md).
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --srai:#7C5CF5; --srai-lt:#A99BFA; --srai-pale:#DCD5FF; --srai-deep:#4B32B8; --srai-violet:#9D6BFF;
  --srai-glow:rgba(157,107,255,.45); --srai-line:rgba(150,125,250,.22);
  --srai-ink:#0D0A1E; --srai-card:#17133A; --srai-text:#DAD4F7; --srai-soft:#A096D6;
}

/* ── the synthesizer: one component, every surface ─────────────────────
   Filled by js/saferise-rail.js from data-bars. It reads as a live signal
   rather than an equaliser graphic because each bar carries its own delay
   and duration. It stops dead for prefers-reduced-motion. */
.srai-wave{display:inline-flex;align-items:center;gap:2px;height:16px;flex:none}
.srai-wave i{display:block;width:2px;height:22%;border-radius:2px;background:linear-gradient(180deg,var(--srai-violet) 0%,var(--srai) 60%);opacity:.55;
  transition:height .3s,opacity .3s}
/* SR-586 · still at rest; it moves only while SafeRise is really listening or
   answering (js/saferise-ai.js sets srai-live on <html>). A wave that moves
   all the time said "listening" when nothing was. */
.srai-live .srai-wave i{animation:srai-bob 1.2s ease-in-out infinite;opacity:.9}
.srai-wave--lg{height:30px;gap:3px}
.srai-wave--lg i{width:3px}
@keyframes srai-bob{0%,100%{height:14%}50%{height:100%}}

/* the orb: the AI's face. One gradient, one slow ring. */
.srai-orb{position:relative;flex:none;width:38px;height:38px;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#F4F3FF,var(--srai) 48%,var(--srai-violet) 100%);
  box-shadow:0 0 26px var(--srai-glow),inset 0 0 12px rgba(255,255,255,.3)}
.srai-orb::after{content:"";position:absolute;inset:-7px;border-radius:50%;
  border:1px solid rgba(150,125,250,.30);animation:srai-pulse 4.2s ease-out infinite}
.srai-orb--sm{width:30px;height:30px}
@keyframes srai-pulse{0%{transform:scale(.82);opacity:.9}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}

@media (prefers-reduced-motion:reduce){
  .srai-wave i{animation:none;height:34%}
  .srai-orb::after{animation:none;opacity:.5;transform:scale(1)}
}

/* ══ 1 · THE RAIL ══════════════════════════════════════════════════════
   The button keeps its existing markup and its existing behaviour; this is
   the violet state it wears. Collapsed, the pulse is the whole presence. */
.sr-ai-btn{position:relative;color:var(--srai-pale)!important}
.sr-ai-btn svg{color:var(--srai-lt)}
.sr-ai-btn::before{content:"";position:absolute;left:11px;top:50%;width:26px;height:26px;margin-top:-13px;
  border-radius:50%;border:1px solid rgba(150,125,250,.34);animation:srai-pulse 4.2s ease-out infinite;pointer-events:none}
.sr-ai-btn.on,.sr-ai-btn:hover{background:linear-gradient(135deg,rgba(124,92,245,.26),rgba(124,92,245,.07))!important;
  box-shadow:inset 0 0 0 1px var(--srai-line)}
.sr-ai-btn .srai-wave{margin-left:auto}
.sr-dash-navrail:not(.sr-dash-navrailopen) .sr-ai-btn .srai-wave{display:none}
.sr-dash-navrail:not(.sr-dash-navrailopen) .sr-ai-btn::before{left:50%;margin-left:-13px}

/* ══ 2 · THE DASHBOARD CARD ════════════════════════════════════════════
   SR-586 · the third card in Begin Here, the same size as its neighbours
   (it also carries .sr-begin-card--panel for the row's margins). Orb, name
   and the wave; one entry with a microphone; four ways in; the privacy cue. */
/* FOUNDER FEEDBACK 18 Oct · ONE AI PALETTE. This card was violet, the front
   door was blue glass and the rail panel was near-black: three colour schemes
   for one companion, on one screen. The card and the panel now wear the glass
   family defined below, which is the one measured from the approved mockup. */
.srai-card{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:14px;padding:20px 20px 18px;
  background:linear-gradient(165deg,#22407E 0%,#152A5C 100%);
  border:0;box-shadow:inset 0 0 0 1px var(--srai-glass-edge),0 26px 50px -40px #000}
@supports (backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px)){
  .srai-card{background:linear-gradient(165deg,var(--srai-glass-mid) 0%,var(--srai-glass-deep) 100%);
    -webkit-backdrop-filter:var(--srai-blur);backdrop-filter:var(--srai-blur)}
}
.srai-card>*{position:relative;z-index:1}
.srai-top{display:flex;align-items:center;gap:11px}
.srai-who{min-width:0;flex:1}
.srai-name{margin:0;font-size:15px;color:#F4F3FF}
.srai-sub{margin:2px 0 0;font-size:12.5px;line-height:1.4;color:#ABA2DD}
.srai-ask{display:flex;align-items:center;gap:6px;padding:6px 6px 6px 14px;border-radius:999px;
  background:rgba(8,6,16,.66);box-shadow:inset 0 0 0 1px rgba(150,125,250,.22)}
/* FOUNDER FEEDBACK 18 Oct · the box did not grow with the words in it, so a
   long sentence scrolled inside a one-line pill and could not be read back.
   It is a textarea now: one line at rest, growing to six, then scrolling. The
   pill becomes a rounded rectangle as it grows rather than stretching an
   ellipse. */
.srai-ask{align-items:flex-end;transition:border-radius .12s}
.srai-ask.is-grown{border-radius:18px}
.srai-ask input,.srai-ask textarea{all:unset;flex:1;min-width:0;font-size:14px;line-height:1.5;
  color:#F4F3FF;font-family:inherit;padding:7px 0;max-height:9.5em;overflow-y:auto;
  white-space:pre-wrap;overflow-wrap:anywhere;resize:none}
.srai-ask input::placeholder,.srai-ask textarea::placeholder{color:#8278BC}
.srai-mic,.srai-go{all:unset;cursor:pointer;width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center}
.srai-mic[hidden]{display:none}
.srai-mic{box-shadow:inset 0 0 0 1px rgba(150,125,250,.3)}
.srai-mic svg{width:15px;height:15px;fill:none;stroke:var(--srai-lt);stroke-width:1.4;stroke-linecap:round}
.srai-mic:hover{background:rgba(124,92,245,.18)}
.srai-go{background:linear-gradient(135deg,#8A63FF,#6A3FF0);box-shadow:0 10px 24px -12px var(--srai-glow)}
.srai-go svg{width:14px;height:14px;fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.srai-go:hover{filter:brightness(1.1)}
.srai-mic:focus-visible,.srai-go:focus-visible{outline:2px solid var(--srai-lt);outline-offset:3px}
.srai-intents{display:flex;flex-wrap:wrap;gap:7px}
.srai-intent{all:unset;cursor:pointer;padding:6px 12px;border-radius:999px;font-size:12px;color:var(--srai-text);
  background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(150,125,250,.16)}
.srai-intent:hover{background:rgba(124,92,245,.18);color:#F4F3FF}
.srai-intent:focus-visible{outline:2px solid var(--srai);outline-offset:2px}
.srai-privline{display:flex;align-items:center;gap:7px;margin:auto 0 0;padding-top:12px;border-top:1px solid rgba(150,125,250,.14);
  font-size:11.5px;color:#9288CB}
.srai-privline svg{width:12px;height:12px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6}

/* ══ 3 · THE PANEL ═════════════════════════════════════════════════════
   The conversation and everything in it belongs to js/saferise-ai.js. The
   rules below change its ground and its chrome only — never its copy, its
   controls or its order. */
/* UXAI-015 · the panel predated the glass family and was still an opaque
   slab while every other AI surface had become translucent. §33's test is
   that the background stays faintly visible through an AI surface, and the
   panel was the one place it did not. Same tokens as .srai-card, same
   opaque fallback where backdrop-filter is unsupported - not a second
   treatment that merely resembles the first. */
.sr-ai-panel{background:var(--srai-glass-deep,rgba(23,48,104,.82))!important;
  border-left:1px solid var(--srai-line)!important;border-right:1px solid var(--srai-line)!important}
@supports ((-webkit-backdrop-filter:blur(2px)) or (backdrop-filter:blur(2px))){
  .sr-ai-panel{background:linear-gradient(168deg,var(--srai-glass-mid,rgba(34,58,120,.74)) 0%,var(--srai-glass-deep,rgba(23,48,104,.82)) 100%)!important;
    -webkit-backdrop-filter:var(--srai-blur);backdrop-filter:var(--srai-blur)}}
.sr-ai-head{border-bottom:1px solid rgba(150,125,250,.14)!important}
.sr-ai-name{color:#F4F3FF!important}
.sr-ai-ctxk{color:var(--srai-soft)!important}
.sr-ai-ctxv{color:#ECEBFB!important}
.sr-ai-close{color:var(--srai-lt)!important}
.sr-ai-close:hover{background:rgba(124,92,245,.18)!important}

/* SR-586 · less in the panel: where you are is one quiet line, not a box */
.sr-ai-ctx{display:flex;align-items:baseline;gap:8px;padding:8px 12px!important;border-radius:10px!important}
.sr-ai-ctx .sr-ai-ctxk{margin:0!important;letter-spacing:.16em!important}
.sr-ai-ctx .sr-ai-ctxv{font-size:13px!important;line-height:1.4!important}

@media (max-width:760px){
  .srai-card{padding:18px 16px 16px}
}

/* SR-589 · on Sunrise (body.rd-soft, the slate-blue room) the Midnight grounds
   read as a dark slab. The same indigo, lifted a step to sit in that room. */
body.rd-soft .srai-card{box-shadow:inset 0 0 0 1px var(--srai-glass-edge),0 0 30px -14px rgba(90,130,230,.45);
  background:linear-gradient(160deg,var(--srai-glass-light) 0%,var(--srai-glass-mid) 62%,var(--srai-glass-deep) 100%)}
body.rd-soft .sr-ai-panel{background:linear-gradient(175deg,var(--srai-glass-light,rgba(52,70,140,.56)) 0%,var(--srai-glass-mid,rgba(34,58,120,.74)) 100%)!important}

/* ═══════════════════════════════════════════════════════════════════════
   WAVE 1 · THE COMPANION COMPONENT FAMILY
   AI COMPANION + SOVEREIGN INTELLIGENCE handover, 18 October 2026.

   WHY THIS EXTENDS THIS SHEET RATHER THAN STARTING ANOTHER ONE. The
   handover's §1 says "do not introduce a separate AI visual brand", and
   §36 says do not replace functioning systems because a newer strategy
   document describes them in newer language. This sheet already IS the
   AI's visual brand: SR-592 settled indigo-violet #7C5CF5 from the
   homepage AI imagery, and the orb, the synthesiser wave and the three
   levels of presence are built and live. A second sheet would have made
   two AI brands, which is the exact failure §33 names.

   THE ONE REAL CHANGE: translucency. Everything above grounds the AI on
   an opaque near-black slab. The handover moves AI surfaces to
   translucent sunrise-indigo glass, with the photography and the
   dashboard behind still faintly visible. That is what the tokens below
   add, and it is the whole difference between an AI panel that reads as
   a separate app and one that reads as SafeRise thinking.

   COLOUR OWNERSHIP, per §1, enforced here by which token each component
   may reach for:
     indigo  — the environment, the depth, the container
     gold    — action and guidance. Every primary CTA. var(--gold)
     purple  — live intelligence only: orb edge, synthesiser, active
               state, Synthesis. Restrained. This sheet never paints a
               surface purple; it paints an EDGE purple.

   The handover's suggested token values are tuning references, not
   mandatory replacements (its own words), so the purple below stays
   SR-592's #7C5CF5 rather than introducing a second one at
   rgba(132,76,255). The glass values are taken as given.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  /* MEASURED FROM THE APPROVED MOCKUP, not estimated. Sampled as the
     median of a flat interior region of each surface in the 18 October
     AI Companion sheet, with text pixels excluded:

       modal glass            #173068  rgb(23,48,104)
       choice card, lead      #223472  rgb(34,52,114)
       choice card, plain     #223262  rgb(34,50,98)
       side panel             #192D62  rgb(25,45,98)
       midsection             #1B2F64  rgb(27,47,100)
       SYNTHESIS surface      #3F3775  rgb(63,55,117)   - lighter AND
                                       more violet than every other
                                       surface. That is the restrained
                                       purple earning its one moment.
       synthesis selected     #2E3486  rgb(46,52,134)
       gold CTA               #EFCB9E  rgb(239,203,158) - CHAMPAGNE, not
                                       the deep #D8AA43 the console uses

     The first pass of this block was estimated from the handover's token
     list and came out markedly darker and more violet than the mockup:
     rgba(18,24,66) against a measured rgb(23,48,104) is both darker and
     starved of blue, and it read heavy rather than premium. These values
     are the mockup's own.

     The handover's listed tokens are, in its words, "tuning references
     rather than mandatory replacements" - these are that tuning, done
     against the artwork instead of against the list. */
  --srai-glass-deep:rgba(23,48,104,.82);
  --srai-glass-mid:rgba(34,58,120,.74);
  --srai-glass-light:rgba(52,70,140,.56);
  --srai-glass-edge:rgba(150,172,236,.34);
  --srai-glass-hi:rgba(120,150,232,.26);
  --srai-glass-synth:rgba(63,55,117,.84);
  /* champagne, the mockup's CTA - lighter and warmer than console gold */
  --srai-gold-1:#F6DFB4; --srai-gold-2:#EFCB9E; --srai-gold-ink:#2A1D08;
  --srai-blur:blur(18px) saturate(115%);
}

/* ── AICompanionSurface · the shared skin ────────────────────────────
   Every Companion surface wears this: modal, panel, inline. One skin,
   so none of them can drift into looking like a different product.
   The fallback matters — backdrop-filter is unsupported or disabled in
   enough places that a glass surface with no fallback becomes an
   unreadable transparent box. Opaque first, glass only where supported. */
.srai-surface{
  position:relative;border-radius:22px;overflow:hidden;
  background:linear-gradient(165deg,#22407E 0%,#152A5C 100%);
  box-shadow:inset 0 0 0 1px var(--srai-glass-edge),0 28px 70px -30px rgba(6,12,36,.72);
  color:var(--srai-text)}
@supports (backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px)){
  .srai-surface{
    background:linear-gradient(165deg,var(--srai-glass-mid) 0%,var(--srai-glass-deep) 100%);
    -webkit-backdrop-filter:var(--srai-blur);backdrop-filter:var(--srai-blur)}
}
/* the one purple gesture on a surface: a lit edge at the top, never a fill */
.srai-surface::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px 300px at 50% -40%,rgba(140,120,250,.16),transparent 64%)}
.srai-surface>*{position:relative;z-index:1}

/* ── AICompanionModal ────────────────────────────────────────────────── */
.srai-modal{width:min(620px,calc(100vw - 32px));padding:34px 32px 26px;text-align:center;
  display:grid;justify-items:center;gap:16px}
.srai-eyebrow{display:flex;align-items:center;gap:8px;margin:0;align-self:start;justify-self:start;
  font:600 9.5px/1 'DM Sans',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--srai-lt)}
.srai-h{margin:0;font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;
  font-size:clamp(27px,4.4vw,40px);line-height:1.12;color:#F6F4FF}
.srai-lede{margin:0;max-width:46ch;font:400 14.5px/1.65 'DM Sans',sans-serif;color:#D8DCF4}

/* ── AIChoiceCard · Guide me / I'll explore ─────────────────────────── */
.srai-choices{display:grid;gap:12px;width:100%;grid-template-columns:1fr}
@media(min-width:620px){.srai-choices{grid-template-columns:1fr 1fr}}
.srai-choice{display:grid;justify-items:center;gap:9px;padding:22px 18px 18px;border-radius:16px;
  background:var(--srai-glass-light);box-shadow:inset 0 0 0 1px var(--srai-glass-edge);text-align:center}
.srai-choice--lead{box-shadow:inset 0 0 0 1px rgba(160,150,250,.46);
  background:linear-gradient(170deg,rgba(74,90,180,.52),rgba(52,70,140,.46))}
.srai-choiceh{margin:0;font-family:'Cormorant Garamond',Georgia,serif;font-size:22px;font-weight:500;color:#F6F4FF}
.srai-choiceb{margin:0;font:400 13px/1.55 'DM Sans',sans-serif;color:#BFC6E8;max-width:26ch}

/* ── CTAs · gold is action, always (§1 colour ownership) ─────────────── */
.srai-cta{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;padding:13px 26px;border-radius:999px;cursor:pointer;border:0;
  font:600 15px/1 'DM Sans',sans-serif;color:var(--srai-gold-ink);text-decoration:none;
  background:linear-gradient(180deg,var(--srai-gold-1),var(--srai-gold-2))}
.srai-cta--quiet{background:transparent;color:#EDEAFF;
  box-shadow:inset 0 0 0 1px var(--srai-glass-edge)}
.srai-cta:focus-visible,.srai-cta--quiet:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ── AIQuickIntent · the eight approved starting intents ─────────────── */
.srai-intents{display:grid;gap:9px;grid-template-columns:1fr;width:100%}
@media(min-width:520px){.srai-intents{grid-template-columns:1fr 1fr}}
.srai-intent{min-height:46px;padding:12px 15px;text-align:left;cursor:pointer;border:0;
  border-radius:12px;font:500 14px/1.35 'DM Sans',sans-serif;color:#EDEAFF;
  background:var(--srai-glass-light);box-shadow:inset 0 0 0 1px var(--srai-glass-edge);
  transition:background .15s}
.srai-intent:hover{background:rgba(124,92,245,.20)}
.srai-intent:focus-visible{outline:2px solid var(--srai-violet);outline-offset:2px}

/* ── AIInput · type, and speak as a first-class affordance (§19) ─────── */
.srai-input{display:flex;gap:8px;width:100%}
.srai-input input{flex:1 1 auto;min-height:48px;padding:12px 16px;border-radius:999px;
  background:rgba(8,10,30,.42);border:1px solid var(--srai-glass-edge);color:#F2F0FF;
  font:400 15px/1.3 'DM Sans',sans-serif}
.srai-input input::placeholder{color:var(--srai-soft)}
.srai-send{flex:0 0 48px;width:48px;height:48px;border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;color:#fff;
  background:linear-gradient(180deg,var(--srai-violet),var(--srai))}
.srai-speak{display:grid;justify-items:center;gap:7px;margin:4px 0 0}
.srai-mic{width:56px;height:56px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;
  color:#fff;background:linear-gradient(180deg,var(--srai-violet),var(--srai-deep));
  box-shadow:0 0 0 6px rgba(124,92,245,.14)}
.srai-speakl{margin:0;font:500 12px/1 'DM Sans',sans-serif;color:var(--srai-soft)}

/* ── AIPrivacyNote · never small print, never omitted ────────────────── */
.srai-privacy{display:flex;align-items:flex-start;gap:9px;margin:4px 0 0;padding-top:14px;width:100%;
  border-top:1px solid rgba(150,125,250,.16);
  font:400 12px/1.55 'DM Sans',sans-serif;color:var(--srai-soft);text-align:left}
.srai-privacy svg{flex:0 0 15px;width:15px;height:15px;margin-top:1px;
  fill:none;stroke:var(--srai-lt);stroke-width:1.5}

/* ── AICompanionInline · embedded, lower weight than the modal (§6) ──── */
.srai-inline{padding:20px 20px 18px;border-radius:18px;display:grid;gap:13px}
.srai-inline .srai-h{font-size:clamp(19px,2.6vw,24px)}
.srai-inline .srai-lede{font-size:13.5px}
.srai-inline-acts{display:flex;flex-wrap:wrap;gap:8px}
.srai-chip{min-height:40px;padding:10px 16px;border-radius:999px;cursor:pointer;border:0;
  font:500 13px/1 'DM Sans',sans-serif;color:#EDEAFF;
  background:var(--srai-glass-light);box-shadow:inset 0 0 0 1px var(--srai-glass-edge)}
.srai-chip:hover{background:rgba(124,92,245,.20)}

/* ── AISynthSurface · the one place purple leads ─────────────────────
   Measured at #3F3775: lighter than every other surface and the only one
   that tips violet. §1 says purple is live intelligence and synthesis,
   restrained everywhere else - so it earns exactly one surface, and this
   is it. */
.srai-surface--synth{background:linear-gradient(165deg,#4A4288 0%,#332C66 100%)}
@supports (backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px)){
  .srai-surface--synth{background:linear-gradient(165deg,var(--srai-glass-synth) 0%,rgba(46,40,92,.86) 100%)}
}

/* ── AIReflection · the Synthesis close, where purple is most visible ── */
.srai-reflect{display:grid;gap:9px;width:100%}
.srai-opt{display:flex;align-items:center;gap:11px;min-height:46px;padding:12px 16px;border-radius:12px;
  cursor:pointer;border:0;text-align:left;width:100%;
  font:500 14px/1.3 'DM Sans',sans-serif;color:#EDEAFF;
  background:var(--srai-glass-light);box-shadow:inset 0 0 0 1px var(--srai-glass-edge)}
.srai-opt[aria-pressed="true"]{background:linear-gradient(100deg,rgba(46,52,134,.96),rgba(74,66,160,.72));
  box-shadow:inset 0 0 0 1px rgba(170,160,255,.58)}
.srai-opt i{flex:0 0 18px;width:18px;height:18px;border-radius:50%;
  box-shadow:inset 0 0 0 1px var(--srai-glass-edge)}
.srai-opt[aria-pressed="true"] i{background:var(--srai-violet);box-shadow:none}

/* ── 390 · the width that decides the POC (§30) ──────────────────────── */
@media(max-width:560px){
  .srai-modal{padding:26px 18px 20px;border-radius:18px;width:calc(100vw - 20px)}
  .srai-surface{border-radius:18px}
  .srai-choices,.srai-intents{grid-template-columns:1fr}
  .srai-cta{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .srai-intent,.srai-chip{transition:none}
}

/* ══ UXAI-018 · the Intent & Transition Concierge ═════════════════════════
   One recommendation, read top to bottom: what SafeRise understood, what to
   start with, why it fits, then the one choice that matters. The Companion
   family above carries the surface, the orb, the lede, the CTA and the
   chips; these are only the few things this surface adds. No duration, no
   countdown, nothing that invites watching - the same restraint the player
   holds. */
.sr-con-rec{margin:.65rem 0 .25rem;font-size:1.06rem;line-height:1.4}
.sr-con-why{margin:0 0 1rem;opacity:.78;font-size:.94rem;line-height:1.55}
.sr-con-goal{margin:0 0 .85rem;font-size:.86rem;opacity:.72}
.sr-con-modes{margin:0 0 .5rem;display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
/* The gap and the no-fit line are the two places SafeRise says what it does
   NOT have. They are quiet and plain - never a warning, never an apology. */
.sr-con-gap,.sr-con-nofit{margin:0 0 .9rem;font-size:.88rem;line-height:1.55;opacity:.74;
  border-left:2px solid var(--srai-glass-edge);padding-left:.75rem}
.sr-con-nofit{margin-top:.25rem}
.sr-con-alt,.sr-con-back{display:inline-block;margin:.35rem .75rem 0 0;padding:0;border:0;background:none;
  color:inherit;opacity:.62;font:inherit;font-size:.88rem;text-decoration:underline;
  text-underline-offset:3px;cursor:pointer}
.sr-con-alt:hover,.sr-con-back:hover,.sr-con-alt:focus-visible,.sr-con-back:focus-visible{opacity:.95}
@media (max-width:420px){
  .sr-con-modes{gap:.5rem}
  .sr-con-modes .srai-cta{width:100%;text-align:center}
}

/* A Concierge turn inside the Companion panel. It is not an answer from the
   model and does not dress as one - no sources row, no corrections, no "show
   me why", because nothing was composed. Spacing only; the sr-con- family
   above carries everything else. */
.sr-ai-turn--con{padding:2px 0}
.sr-ai-turn--con .sr-con-rec{margin:.5rem 0 .2rem}
.sr-ai-turn--con .sr-con-modes{margin:.7rem 0 .2rem}

/* One control, full width, where four chips used to duplicate the front
   door's own eight. */
.srai-intents--one{grid-template-columns:1fr}

/* ═══════════════════════════════════════════════════════════════════════
   UXAI-017 · the member's two settings, in the panel they already have
   open. 390 first: the options wrap, each one is a full tap target, and
   nothing is a switch too small to hit. Colour follows the family — the
   chosen option takes the violet edge, never a violet surface.
   ═══════════════════════════════════════════════════════════════════════ */
.sr-ai-prefs{all:unset;cursor:pointer;font:500 12px/1 'DM Sans',system-ui,sans-serif;
  color:var(--srai-soft,#A096D6);padding:6px 8px;border-radius:999px;white-space:nowrap}
.sr-ai-prefs:hover{color:var(--srai-pale,#DCD5FF)}
.sr-ai-prefs:focus-visible{outline:2px solid var(--srai-lt,#A99BFA);outline-offset:2px}

.sr-ai-prefsbox{box-sizing:border-box;margin:0 0 14px;padding:14px;border-radius:16px;
  background:var(--srai-glass-deep,rgba(23,48,104,.82));
  box-shadow:inset 0 0 0 1px var(--srai-glass-edge,rgba(150,125,250,.22))}
.sr-ai-prefk{margin:0 0 8px;font:500 11px/1.3 'DM Sans',system-ui,sans-serif;letter-spacing:.14em;
  text-transform:uppercase;color:var(--srai-soft,#A096D6)}
.sr-ai-prefk + .sr-ai-prefrow{margin-bottom:6px}
.sr-ai-prefrow{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.sr-ai-pref{min-height:36px;display:inline-flex;align-items:center}
.sr-ai-pref[aria-pressed="true"]{box-shadow:inset 0 0 0 1px var(--srai-violet,#9D6BFF);
  color:var(--srai-pale,#DCD5FF)}
.sr-ai-prefnote{margin:0 0 14px;font-size:12px;line-height:1.5;color:var(--srai-soft,#A096D6)}
.sr-ai-prefnote:last-child{margin-bottom:0}
.sr-ai-prefrec{margin:0 0 12px;padding:12px;border-radius:12px;
  border-left:2px solid var(--srai-violet,#9D6BFF);background:rgba(10,12,28,.38)}
.sr-ai-prefrec p{margin:0 0 10px;font-size:13.5px;line-height:1.5;color:var(--srai-text,#DAD4F7)}

/* ═══════════════════════════════════════════════════════════════════════
   UXAI-016 · the in-context Companion. One card, in the body of a page,
   in the same glass as every other AI surface. 390 first: it stacks, the
   action is full width, and "Not now" is a real tap target rather than a
   dismissal cross too small to hit deliberately.
   ═══════════════════════════════════════════════════════════════════════ */
.sr-aic{box-sizing:border-box;display:flex;flex-direction:column;gap:12px;
  padding:16px;border-radius:16px;margin:0 0 20px}
.sr-aic-orb{flex:0 0 auto;width:22px;height:22px}
.sr-aic-body{min-width:0}
.sr-aic-k{margin:0 0 4px;font:500 11px/1.3 'DM Sans',system-ui,sans-serif;letter-spacing:.14em;
  text-transform:uppercase;color:var(--srai-soft,#A096D6)}
.sr-aic-ask{margin:0;font-size:15.5px;line-height:1.5;color:var(--srai-text,#DAD4F7)}
.sr-aic-go{justify-content:center;min-height:40px}
.sr-aic-no{all:unset;cursor:pointer;align-self:flex-start;min-height:36px;display:inline-flex;align-items:center;
  padding:0 4px;font:500 12px/1 'DM Sans',system-ui,sans-serif;color:var(--srai-soft,#A096D6)}
.sr-aic-no:hover{color:var(--srai-pale,#DCD5FF)}
.sr-aic-no:focus-visible,.sr-aic-go:focus-visible{outline:2px solid var(--srai-lt,#A99BFA);outline-offset:2px}
@media (min-width:600px){
  .sr-aic{flex-direction:row;align-items:center;gap:14px;padding:16px 18px}
  .sr-aic-body{flex:1}
  .sr-aic-go{min-height:36px}
  .sr-aic-no{align-self:center}
}

/* ═══════════════════════════════════════════════════════════════════════
   UXAI-050 · the Team Support situation input. NOT in the Companion's
   indigo: this is not the AI Companion, it calls no model, and dressing it
   as one would claim a capability it does not have. It takes the manager
   page's own surface and stays there. 390 first.
   ═══════════════════════════════════════════════════════════════════════ */
.sr-mgc-form{display:flex;flex-direction:column;gap:10px;margin:0 0 10px}
.sr-mgc-label{font-size:14px;line-height:1.5;color:var(--rd-body,#C9C6CF)}
.sr-mgc-input{box-sizing:border-box;width:100%;min-height:46px;padding:12px 14px;border-radius:12px;
  border:1px solid var(--rd-hair,rgba(245,237,216,.16));background:var(--rd-ground,#0F0F15);
  color:var(--rd-heading,#F5EDD8);font:16px/1.45 'DM Sans',system-ui,sans-serif}
.sr-mgc-input:focus-visible,.sr-mgc-go:focus-visible,.sr-mgc-again:focus-visible,.sr-mgc-cta:focus-visible{
  outline:2px solid var(--rd-accent,#D4A843);outline-offset:2px}
.sr-mgc-go{min-height:46px;border:0;border-radius:999px;cursor:pointer;
  background:var(--rd-accent,#D4A843);color:#1A1405;font:600 14px/1 'DM Sans',system-ui,sans-serif}
.sr-mgc-note{margin:0;font-size:12.5px;line-height:1.5;color:var(--rd-meta,#9C9AA4)}
.sr-mgc-out{padding:16px;border-radius:14px;background:var(--rd-card,#1B1B23);
  box-shadow:inset 0 0 0 1px var(--rd-hair,rgba(245,237,216,.1))}
.sr-mgc-out--line{box-shadow:inset 0 0 0 1px var(--rd-accent,#D4A843)}
.sr-mgc-k{margin:0 0 6px;font:700 10.5px/1.3 'DM Sans',system-ui,sans-serif;letter-spacing:.18em;
  text-transform:uppercase;color:var(--rd-meta,#9C9AA4)}
.sr-mgc-t{margin:0 0 8px;font-size:18px;line-height:1.4;color:var(--rd-heading,#F5EDD8)}
.sr-mgc-t:focus-visible,.sr-mgc-why:focus-visible{outline:2px solid var(--rd-accent,#D4A843);outline-offset:4px}
.sr-mgc-why{margin:0 0 14px;font-size:14.5px;line-height:1.6;color:var(--rd-body,#C9C6CF)}
.sr-mgc-acts{display:flex;flex-direction:column;gap:10px;margin:0}
.sr-mgc-cta{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;
  border-radius:999px;text-decoration:none;font:600 13.5px/1 'DM Sans',system-ui,sans-serif;
  background:var(--rd-accent,#D4A843);color:#1A1405}
.sr-mgc-again{all:unset;cursor:pointer;min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  font:500 13px/1 'DM Sans',system-ui,sans-serif;color:var(--rd-meta,#9C9AA4)}
.sr-mgc-again:hover{color:var(--rd-heading,#F5EDD8)}
@media (min-width:600px){
  .sr-mgc-form{flex-direction:row;align-items:center}
  .sr-mgc-input{flex:1}
  .sr-mgc-go{padding:0 20px;white-space:nowrap}
  .sr-mgc-acts{flex-direction:row;align-items:center;gap:14px}
}

/* UXAI-050 · the seven parts. Numbered so a manager can see the shape at a
   glance and skip to the one they need; the escalation part carries the
   page's accent edge because it is the one that must not be missed. */
.sr-mgc-part{margin:0 0 18px}
.sr-mgc-part:last-of-type{margin-bottom:14px}
.sr-mgc-ph{display:flex;align-items:center;gap:9px;margin:0 0 8px;
  font:600 12px/1.3 'DM Sans',system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;
  color:var(--rd-meta,#9C9AA4)}
.sr-mgc-pn{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;
  flex:0 0 auto;border-radius:50%;font-size:11px;letter-spacing:0;
  background:var(--rd-hair,rgba(245,237,216,.12));color:var(--rd-body,#C9C6CF)}
.sr-mgc-p{margin:0 0 8px;font-size:14.5px;line-height:1.6;color:var(--rd-body,#C9C6CF)}
.sr-mgc-line{padding-left:12px;border-left:2px solid var(--rd-accent,#D4A843)}
.sr-mgc-asks,.sr-mgc-avoid{margin:0;padding-left:20px}
.sr-mgc-asks li,.sr-mgc-avoid li{margin:0 0 6px;font-size:14.5px;line-height:1.55;color:var(--rd-body,#C9C6CF)}
.sr-mgc-asks li{font-style:italic}
.sr-mgc-pt{margin:0 0 6px;font-size:16px;line-height:1.4}
.sr-mgc-plink{color:var(--rd-heading,#F5EDD8)}
.sr-mgc-pw{margin:0 0 6px;font-size:14px;line-height:1.55;color:var(--rd-body,#C9C6CF)}
.sr-mgc-pn2{margin:0;font-size:12.5px;line-height:1.5;color:var(--rd-meta,#9C9AA4)}

/* Directive §4A · the two arrival actions. Guide me is the gold CTA; I'll
   explore is a real, equal-weight choice rather than a greyed-out escape —
   a member who wants to look around is not making a lesser decision. 390
   first: both full width and stacked, side by side only with room. */
.sr-mdl-choice{display:flex;flex-direction:column;gap:10px;margin:18px 0 0}
.sr-mdl-guide{all:unset;cursor:pointer;box-sizing:border-box;display:inline-flex;align-items:center;
  justify-content:center;min-height:48px;padding:0 22px;border-radius:999px;
  font:600 15px/1 'DM Sans',system-ui,sans-serif;
  background:linear-gradient(135deg,var(--srai-gold-1,#F6DFB4),var(--srai-gold-2,#EFCB9E));
  color:var(--srai-gold-ink,#2A1D08)}
.sr-mdl-explore{justify-content:center;min-height:48px;font-size:14px}
.sr-mdl-guide:focus-visible,.sr-mdl-explore:focus-visible{outline:2px solid var(--srai-lt,#A99BFA);outline-offset:3px}
@media (min-width:520px){
  .sr-mdl-choice{flex-direction:row;align-items:center}
  .sr-mdl-choice > *{flex:1}
}

/* Directive §5B · the starter form of the in-context card. The chips carry
   whole sentences, so they wrap rather than truncate — a starter cut off
   mid-sentence is a starter nobody presses. */
.sr-aic--many{flex-direction:column;align-items:flex-start}
.sr-aic-starters{display:flex;flex-direction:column;gap:8px;margin:8px 0 0}
.sr-aic-start{text-align:left;white-space:normal;line-height:1.45;padding:10px 14px;min-height:44px;
  border-radius:14px}
@media (min-width:760px){
  .sr-aic--many{flex-direction:row;align-items:flex-start}
  .sr-aic-starters{flex-direction:row;flex-wrap:wrap}
  .sr-aic-start{max-width:320px}
}

/* Directive §7 · the Organization Copilot. The Hub's own surface, not the
   Companion's: it answers from counts and states, calls no model, and
   should not borrow a visual language that implies one. */
.sr-oc-lede{margin:0 0 18px;font-size:14.5px;line-height:1.6;color:var(--rd-body,#C9C6CF)}
.sr-oc-q{margin:0 0 18px;padding-left:12px;border-left:2px solid var(--rd-hair,rgba(245,237,216,.16))}
.sr-oc-qh{margin:0 0 8px;font:600 14px/1.4 'DM Sans',system-ui,sans-serif;color:var(--rd-heading,#F5EDD8)}
.sr-oc-a{margin:0 0 6px;font-size:14.5px;line-height:1.6;color:var(--rd-body,#C9C6CF)}
.sr-oc-a:last-child{margin-bottom:0}
.sr-oc-foot{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--rd-hair,rgba(245,237,216,.1));
  font-size:12.5px;line-height:1.55;color:var(--rd-meta,#9C9AA4)}

/* ═══════════════════════════════════════════════════════════════════════
   Directive §5A · the employee first run. Modal, dismissible, once. 390
   first: everything stacks, the two actions are full width, and the box
   scrolls rather than trapping content off-screen on a short phone.
   ═══════════════════════════════════════════════════════════════════════ */
.sr-pf{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;padding:16px}
.sr-pf-back{position:absolute;inset:0;background:rgba(5,5,12,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.sr-pf-box{position:relative;box-sizing:border-box;width:min(560px,100%);max-height:calc(100vh - 32px);
  overflow:auto;padding:24px 20px;border-radius:20px}
.sr-pf-x{all:unset;cursor:pointer;position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--srai-lt,#A99BFA)}
.sr-pf-x svg{width:18px;height:18px}
.sr-pf-block{margin:0 0 18px}
.sr-pf-privacy{padding:14px;border-radius:12px;border-left:2px solid var(--srai-violet,#9D6BFF);
  background:rgba(10,12,28,.38)}
.sr-pf-k{margin:0 0 6px;font:500 11px/1.3 'DM Sans',system-ui,sans-serif;letter-spacing:.14em;
  text-transform:uppercase;color:var(--srai-soft,#A096D6)}
.sr-pf-body{margin:0;font-size:14.5px;line-height:1.6;color:var(--srai-text,#DAD4F7)}
.sr-pf-row{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px}
.sr-pf-opt{min-height:38px;display:inline-flex;align-items:center}
.sr-pf-opt[aria-pressed="true"]{box-shadow:inset 0 0 0 1px var(--srai-violet,#9D6BFF);color:var(--srai-pale,#DCD5FF)}
.sr-pf-note{margin:0;font-size:12px;line-height:1.5;color:var(--srai-soft,#A096D6)}
.sr-pf-acts{display:flex;flex-direction:column;gap:10px;margin:20px 0 0}
.sr-pf-guide{all:unset;cursor:pointer;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 22px;border-radius:999px;font:600 15px/1 'DM Sans',system-ui,sans-serif;
  background:linear-gradient(135deg,var(--srai-gold-1,#F6DFB4),var(--srai-gold-2,#EFCB9E));
  color:var(--srai-gold-ink,#2A1D08)}
.sr-pf-explore{justify-content:center;min-height:48px}
.sr-pf-guide:focus-visible,.sr-pf-explore:focus-visible,.sr-pf-x:focus-visible,.sr-pf-opt:focus-visible{
  outline:2px solid var(--srai-lt,#A99BFA);outline-offset:3px}
body.sr-pf-open{overflow:hidden}
@media (min-width:520px){
  .sr-pf-box{padding:28px 26px}
  .sr-pf-acts{flex-direction:row;align-items:center}
  .sr-pf-acts > *{flex:1}
}

/* ═══════════════════════════════════════════════════════════════════════
   UXAI-013 · the homepage AI Companion.

   TWO PARTS, and the split is the founder ruling of 19 October. The SECTION
   introduces: an eyebrow, the artwork, a line and one button. The POP-UP
   demonstrates, over a homepage that stays visible and recognisable behind
   it — a soft blur and a restrained indigo scrim, never a replacement for
   the page.

   390 first: the dialog is a sheet pinned to the bottom of the screen with
   its own scroll, so a long answer never pushes its actions off a phone. It
   becomes a centred card once there is height for one.
   ═══════════════════════════════════════════════════════════════════════ */
.sr-tdsec{max-width:680px;margin:0 auto;padding:0 16px}
.sr-tdsec-lede{margin:14px 0 16px;font-size:15.5px;line-height:1.6;color:var(--srai-text,#DAD4F7)}
.sr-tdsec-acts{margin:0}

.sr-td-modal{position:fixed;inset:0;z-index:2147483000}
/* §3 - the homepage stays recognisable behind it. 10px of blur with a .52
   scrim turned the AI section into mush; 5px and .34 soften it without
   taking it away, which is what the ruling asks for. */
.sr-td-scrim{position:absolute;inset:0;background:rgba(18,26,56,.34);
  -webkit-backdrop-filter:blur(5px) saturate(108%);backdrop-filter:blur(5px) saturate(108%)}
.sr-td-box{position:absolute;left:0;right:0;bottom:0;box-sizing:border-box;width:100%;
  max-height:88vh;display:flex;flex-direction:column;
  border-radius:22px 22px 0 0;padding:24px 18px calc(18px + env(safe-area-inset-bottom,0px))}
.sr-td-in{overflow:auto;-webkit-overflow-scrolling:touch}
/* one measure for the whole dialog, centred in whatever room it is given.
   Without it the copy sat hard against the left edge with the balance of
   the card empty to its right. */
.sr-td-col{width:100%;max-width:430px;margin:0 auto}
.sr-td-x{all:unset;cursor:pointer;position:absolute;top:12px;right:12px;width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--srai-lt,#A99BFA)}
.sr-td-x svg{width:18px;height:18px}
.sr-td-x:focus-visible{outline:2px solid var(--srai-lt,#A99BFA);outline-offset:2px}

/* the shared eyebrow carries an orb taller than its own line, and the modal
   draws a rule beneath it: without room the orb sits across the rule */
.sr-td-box .srai-eyebrow{display:flex;align-items:center;gap:10px;min-height:34px;padding-right:44px}
/* ── the console treatment, applied to the homepage dialog ─────────────
   The approved console designs put a quiet marked eyebrow at the top, the
   orb centred and large above a centred serif line, and - on a wide enough
   screen - the commissioned artwork beside the words behind a curved edge.
   Below that width there is no room for two columns, so the artwork is not
   shown at all rather than stacked and cropped into meaninglessness. */
.sr-td-eyebrow{gap:7px;color:var(--srai-lt,#A99BFA)}
.sr-td-box .sr-td-eyebrow{display:flex;justify-content:center;width:100%;box-sizing:border-box;padding:0 44px}
.sr-td-spark{width:13px;height:13px;flex:0 0 auto;fill:currentColor}
.sr-td-orb{display:flex;justify-content:center;margin:14px 0 12px}
.srai-orb--lg{width:64px;height:64px}
.sr-td-box .sr-td-h,.sr-td-box .sr-td-lede{text-align:center}
.sr-td-box .sr-td-lede{margin-left:auto;margin-right:auto;max-width:42ch}
.sr-td-note{display:flex;gap:9px;align-items:flex-start;justify-content:center;text-align:center}
.sr-td-shield{width:15px;height:15px;flex:0 0 auto;margin-top:1px;color:var(--srai-lt,#A99BFA)}
/* ── the scenery ───────────────────────────────────────────────────────
   One image behind the whole dialog, not a column beside it: the glass is
   laid ON the scenery, which is what the console designs do. On a phone it
   is texture only - held well back by the veil so nothing competes with
   the copy - and it opens up at the two-column width. */
.sr-td-art{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:inherit;pointer-events:none}
.sr-td-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:62% 56%}
.sr-td-veil{position:absolute;inset:0;
  background:linear-gradient(168deg,rgba(30,36,92,.90) 0%,rgba(19,24,62,.95) 100%)}
.sr-td-curve{display:none}

/* ── the glass itself ──────────────────────────────────────────────────
   Deeper and slightly more opaque than the inline card it replaces: at this
   size a lighter glass let the page behind read straight through the copy.
   The lit top edge is the one purple gesture, as everywhere else. */
.sr-td-box{overflow:hidden;background:linear-gradient(168deg,rgba(38,46,104,.92) 0%,rgba(22,27,68,.96) 100%);
  box-shadow:inset 0 0 0 1px rgba(150,125,250,.26),0 40px 90px -36px rgba(4,8,30,.78)}
/* the gradient above is the fallback for a browser with no scenery loaded;
   where the image lands it sits behind, and the box itself goes clear */
@supports (backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px)){
  .sr-td-box{background:transparent;
    -webkit-backdrop-filter:blur(14px) saturate(116%);backdrop-filter:blur(14px) saturate(116%)}
}
.sr-td-box::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(620px 260px at 50% -26%,rgba(150,128,255,.20),transparent 66%)}
/* the close control is positioned against the box and must keep
   position:absolute - it only needs lifting above the lit edge */
.sr-td-in{position:relative;z-index:1}
.sr-td-x{z-index:2}
.sr-td-h{margin:0 0 10px;font:400 24px/1.3 'Cormorant Garamond',Georgia,serif;color:#F4F3FF}
/* focused on open so the reader lands inside the dialog; it carries
   tabindex="-1" and is never a tab stop, so a ring here is noise */
.sr-td-h:focus,.sr-td-h:focus-visible{outline:none}
.sr-td-lede,.sr-td-body{margin:0 0 16px;font-size:15px;line-height:1.6;color:var(--srai-text,#DAD4F7)}
.sr-td-form{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px;justify-content:center}
.sr-td-input{box-sizing:border-box;flex:1 1 100%;min-height:48px;padding:12px 14px;border-radius:12px;
  border:1px solid var(--srai-line,rgba(150,125,250,.22));background:rgba(10,12,28,.42);
  color:#F4F3FF;font:16px/1.45 'DM Sans',system-ui,sans-serif}
.sr-td-input::placeholder{color:var(--srai-soft,#A096D6)}
.sr-td-input:focus-visible{outline:2px solid var(--srai-lt,#A99BFA);outline-offset:2px}
.sr-td-mic{flex:0 0 auto;width:48px;height:48px}
.sr-td-mic.is-hearing{box-shadow:0 0 0 2px var(--srai-violet,#9D6BFF)}
.sr-td-go{flex:1 1 auto;min-height:48px;border:0;border-radius:999px;cursor:pointer;
  font:600 14px/1 'DM Sans',system-ui,sans-serif;
  background:linear-gradient(135deg,var(--srai-gold-1,#F6DFB4),var(--srai-gold-2,#EFCB9E));
  color:var(--srai-gold-ink,#2A1D08)}
.sr-td-or{text-align:center;margin:0 0 8px;font:500 11px/1.3 'DM Sans',system-ui,sans-serif;letter-spacing:.14em;
  text-transform:uppercase;color:var(--srai-soft,#A096D6)}
.sr-td-starters{display:flex;flex-direction:column;gap:8px;margin:0 0 14px;align-items:stretch}
.sr-td-start{text-align:center;justify-content:center;white-space:normal;line-height:1.45;padding:10px 14px;min-height:44px;border-radius:14px}
.sr-td-note{margin:12px 0 0;font-size:12px;line-height:1.5;color:var(--srai-soft,#A096D6)}
.sr-td-pick{margin:0 0 16px;padding:14px;border-radius:12px;
  border-left:2px solid var(--srai-violet,#9D6BFF);background:rgba(10,12,28,.38)}
.sr-td-pk{margin:0 0 6px;font:500 11px/1.3 'DM Sans',system-ui,sans-serif;letter-spacing:.14em;
  text-transform:uppercase;color:var(--srai-soft,#A096D6)}
.sr-td-pt{margin:0 0 6px;font-size:16px;line-height:1.5;color:#F4F3FF}
.sr-td-why{margin:0;font-size:14px;line-height:1.55;color:var(--srai-text,#DAD4F7)}
.sr-td-acts{display:flex;flex-direction:column;gap:10px;margin:0;justify-content:center}
.sr-td-acts--quiet{margin-top:12px}
.sr-td-cta{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;
  border:0;cursor:pointer;border-radius:999px;text-decoration:none;font:600 15px/1 'DM Sans',system-ui,sans-serif;
  background:linear-gradient(135deg,var(--srai-gold-1,#F6DFB4),var(--srai-gold-2,#EFCB9E));
  color:var(--srai-gold-ink,#2A1D08)}
.sr-td-second{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;
  border-radius:999px;text-decoration:none;font:500 13.5px/1 'DM Sans',system-ui,sans-serif;
  color:var(--srai-pale,#DCD5FF);box-shadow:inset 0 0 0 1px var(--srai-line,rgba(150,125,250,.22))}
.sr-td-again{all:unset;cursor:pointer;min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  font:500 13px/1 'DM Sans',system-ui,sans-serif;color:var(--srai-soft,#A096D6)}
.sr-td-again:hover{color:var(--srai-pale,#DCD5FF)}
.sr-td-cta:focus-visible,.sr-td-second:focus-visible,.sr-td-again:focus-visible,
.sr-td-go:focus-visible,.sr-td-start:focus-visible,.sr-td-mic:focus-visible{
  outline:2px solid var(--srai-lt,#A99BFA);outline-offset:3px}
.sr-td-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* the page is held still behind the dialog and put back on close */
body.sr-td-open{position:fixed;left:0;right:0;width:100%;overflow:hidden}

@media (min-width:620px){
  .sr-td-box{top:50%;bottom:auto;left:50%;transform:translate(-50%,-50%);
    width:min(600px,calc(100vw - 48px));max-height:min(84vh,760px);
    border-radius:22px;padding:30px 28px 26px}
  .sr-td-form{flex-wrap:nowrap}
  .sr-td-input{flex:1 1 auto}
  .sr-td-go{flex:0 0 auto;padding:0 20px}
  /* two to a row here, so the whole dialog is readable without scrolling:
     six stacked pills ran past the bottom of the box */
  .sr-td-col{max-width:470px}
  .sr-td-starters{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .sr-td-start{max-width:none}
  .sr-td-acts{flex-direction:row;align-items:center;justify-content:center}
}

/* ── where the scenery opens up ───────────────────────────
   1040px is where a reading column and open scenery both fit with air
   around them. The veil becomes a left-to-right fall: full glass under the
   copy, clear sky on the right, with the curve as the seam between them. */
@media (min-width:1040px){
  .sr-td-box{width:min(1000px,calc(100vw - 72px));max-height:min(86vh,720px);padding:0}
  /* no vertical centring here: in a scrolling column it clips the top and
     bottom of anything taller than the box, which cost the eyebrow and the
     orientation line. The measure is centred horizontally and that is all. */
  .sr-td-in{position:relative;z-index:1;width:66%;height:100%;
    overflow:auto;padding:34px 48px 30px}
  .sr-td-veil{background:
    linear-gradient(90deg,rgba(24,29,76,.95) 0%,rgba(24,29,76,.93) 58%,
                          rgba(24,29,76,.55) 70%,rgba(20,25,66,.24) 84%,rgba(20,25,66,.32) 100%),
    linear-gradient(190deg,transparent 46%,rgba(14,18,52,.46) 100%)}
  .sr-td-curve{display:block;position:absolute;top:-1px;bottom:-1px;left:59%;
    width:150px;height:calc(100% + 2px)}
  .sr-td-curve-fill{fill:rgba(24,29,76,.86)}
  .sr-td-curve-edge{stroke:rgba(168,148,255,.30);stroke-width:1.1;
    vector-effect:non-scaling-stroke}
  .sr-td-art img{object-position:78% 52%}
  /* over open sky the control needs its own ground to be seen against */
  .sr-td-x{z-index:2;top:14px;right:14px;color:#F4F1FF;background:rgba(14,18,48,.46);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
}
@media (prefers-reduced-motion:reduce){
  .sr-td-scrim,.sr-td-box{transition:none;animation:none}
}

/* ══ THE CONSOLE TREATMENT · every Companion surface ═══════════════════
   Founder direction, 19-20 Oct: the treatment approved on the homepage
   pop-up - glass laid on scenery, the quiet marked eyebrow, the orb centred
   over the title on a dialog - carried to every other AI surface, so the
   Companion reads as one presence wherever it appears.

   One scenery for all of them: assets/home2/closing-island, the island at
   sunset already shipped on the homepage. It is texture under a veil, never
   content, and the veil is heavy enough that type keeps its contrast; the
   homepage dialog (.sr-td-box) carries its own, stronger arrangement and is
   left out. :not() rather than !important, so nothing here escalates. */
.srai-surface:not(.sr-td-box){background:
  linear-gradient(170deg,rgba(54,70,138,.86) 0%,rgba(37,58,118,.92) 100%),
  url('/assets/home2/closing-island-760.webp') 62% 58%/cover no-repeat,#172C62}
@supports (backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px)){
  .srai-surface:not(.sr-td-box){background:
    linear-gradient(170deg,rgba(54,70,138,.86) 0%,rgba(37,58,118,.92) 100%),
    url('/assets/home2/closing-island-760.webp') 62% 58%/cover no-repeat,#172C62}
}
/* Founder direction, 20 Oct: one tone on every surface - the slate glass of
   the Sunrise render - so Midnight now measures the same as Sunrise (sampled:
   modal 48,63,117 vs 50,65,116; panel 39,60,119 vs 39,60,119). The
   synthesis close takes that tone too, not a separate purple field. */
/* Sunrise: the lighter slate glass it already uses, over the same scenery */
body.rd-soft .srai-surface:not(.sr-td-box){background:
  linear-gradient(170deg,rgba(52,70,140,.80) 0%,rgba(34,58,120,.88) 100%),
  url('/assets/home2/closing-island-760.webp') 62% 58%/cover no-repeat,#2A3F86}

/* The persistent side panel. Its existing grounds are !important (the rail
   is styled by an older sheet that also uses !important); these match that
   weight only to be heard, and change nothing but the ground. The scenery
   sits at the head of the panel and the veil thickens down it, so the
   conversation below never reads over sky. */
.sr-ai-panel{background:
  linear-gradient(180deg,rgba(48,68,138,.66) 0%,rgba(41,62,128,.88) 26%,rgba(37,60,122,.95) 52%,rgba(37,60,122,.95) 100%),
  url('/assets/home2/closing-island-760.webp') 60% 30%/cover no-repeat,#172C62!important}
body.rd-soft .sr-ai-panel{background:
  linear-gradient(180deg,rgba(52,70,140,.74) 0%,rgba(40,62,128,.90) 32%,rgba(34,58,120,.95) 100%),
  url('/assets/home2/closing-island-760.webp') 60% 30%/cover no-repeat,#2A3F86!important}

/* the quiet mark the console designs put before AI Companion */
.srai-mark{gap:7px}
.srai-mark::before{content:"";flex:none;width:13px;height:13px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 .6l1.5 4.3 4.3 1.5-4.3 1.5L8 12.2 6.5 7.9 2.2 6.4l4.3-1.5z'/%3E%3Cpath d='M13.2 10.4l.7 2 2 .7-2 .7-.7 2-.7-2-2-.7 2-.7z' opacity='.65'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 .6l1.5 4.3 4.3 1.5-4.3 1.5L8 12.2 6.5 7.9 2.2 6.4l4.3-1.5z'/%3E%3Cpath d='M13.2 10.4l.7 2 2 .7-2 .7-.7 2-.7-2-2-.7 2-.7z' opacity='.65'/%3E%3C/svg%3E") center/contain no-repeat}
/* on a dialog the orb is the AI's face, centred and large over the title */
.srai-orbstage{display:flex;justify-content:center;width:100%;margin:2px 0 -2px}
.srai-orb--lg{width:64px;height:64px}
@media (max-width:600px){.srai-orbstage .srai-orb--lg{width:54px;height:54px}}

/* the panel head wears the orb beside the name */
.sr-ai-name{display:flex;align-items:center;gap:10px}
.sr-ai-name .srai-orb--sm{width:26px;height:26px}

/* founder, 20 Oct: the deliberate reopen now lives in the AI section */
.sr-ai-try{margin:22px 0 0;text-align:center}

/* Founder, 21 Oct · the arrival's buttons. The centred welcome sized the
   choice row to its content (~114px), so "I'll explore" wrapped onto two
   lines and the pair came out different sizes, and the guidance levels sat
   inline with no gap between them. Now: Guide me and I'll explore are one
   size and one shape, side by side (stacked only on the narrowest phones),
   and the four levels are evenly spaced pills that wrap as a centred group. */
.sr-mdl-box .sr-mdl-choice{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;
  width:100%;max-width:400px;margin:20px auto 0;justify-self:center;align-items:stretch}
.sr-mdl-box .sr-mdl-choice > *{flex:none}
.sr-mdl-box .sr-mdl-guide,.sr-mdl-box .sr-mdl-explore{box-sizing:border-box;width:100%;min-height:48px;margin:0;
  padding:0 20px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
  text-align:center;white-space:nowrap;font:600 15px/1.2 'DM Sans',system-ui,sans-serif}
.sr-mdl-box .sr-mdl-gc{width:100%;margin-top:22px;justify-self:center;text-align:center}
.sr-mdl-box .sr-mdl-gcrow{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:12px 0 14px}
.sr-mdl-box .sr-mdl-gcbtn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;margin:0;padding:0 18px;border-radius:999px;text-align:center;white-space:nowrap;font-size:14px}
@media (max-width:359px){
  .sr-mdl-box .sr-mdl-choice{grid-template-columns:1fr}
}

/* Founder, 21 Oct · the "After this practice" bar sat tight against the
   meditation player above it; it now has room above and below. */
[data-sr-ai-context][data-sr-ai-key="after-practice"]:not([hidden]){margin:24px 0 22px}

/* Founder, 21 Oct · the panel's guidance box. It was squeezed to 321px inside
   the conversation column (content 459px, overflow hidden), cutting the
   presence choices off, and its buttons were uneven and wrapped to 60px.
   Now it takes its full height (the panel itself scrolls), and the choices
   are an even two-column grid of equal pills; an odd last one spans the row. */
.sr-ai-panel .sr-ai-prefsbox{flex:none;overflow:visible}
.sr-ai-panel .sr-ai-prefrow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.sr-ai-panel .sr-ai-pref{box-sizing:border-box;width:100%;min-height:42px;margin:0;padding:0 12px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;text-align:center;white-space:nowrap;font-size:13.5px;line-height:1.2}
.sr-ai-panel .sr-ai-pref:last-child:nth-child(odd){grid-column:1 / -1}
.sr-ai-panel .sr-ai-prefk{margin-top:4px}

/* Founder, 21 Oct · the protocol page's AI bar is the dashboard's bar: one
   slim glass strip, orb, name and wave on the left, the field with the
   microphone and send in the middle, the suggestion on the right, the
   privacy line under the field. Stacks on a phone. */
.sr-aic-bar{display:grid;grid-template-columns:minmax(200px,auto) minmax(0,1fr) auto;align-items:center;
  column-gap:20px;row-gap:6px;margin:0;padding:14px 18px 12px;border-radius:16px}
.sr-aic-bar .srai-top{grid-column:1;grid-row:1 / span 2;align-self:center;gap:12px}
.sr-aic-bar .srai-wave{margin-left:6px}
.sr-aic-bar .srai-ask{grid-column:2;grid-row:1;margin:0}
.sr-aic-bar .srai-ask .srai-mic{width:46px;height:46px;flex:none}
.sr-aic-bar .srai-intents{grid-column:3;grid-row:1;display:flex;width:auto}
.sr-aic-bar .srai-intent{min-height:44px;padding:0 18px;border-radius:999px;display:inline-flex;align-items:center;
  justify-content:center;white-space:nowrap;text-align:center}
.sr-aic-bar .srai-privline{grid-column:2 / span 2;grid-row:2;margin:0;padding:0;border-top:0;font-size:12px}
@media(max-width:860px){
  .sr-aic-bar{grid-template-columns:minmax(0,1fr);row-gap:12px;padding:16px}
  .sr-aic-bar .srai-top,.sr-aic-bar .srai-ask,.sr-aic-bar .srai-intents,.sr-aic-bar .srai-privline{grid-column:1;grid-row:auto}
  .sr-aic-bar .srai-intents,.sr-aic-bar .srai-intent{width:100%;white-space:normal}
}

/* Readability floor (21 Oct): AI panel and protocol-page labels never under 12px */
.sr-ai-prefk,.sr-aic-k,.sr-mgc-k,.sr-pf-k,.sr-td-or,.sr-td-pk,.srai-privline{font-size:12px}

/* ── 21 Oct · AI chat: protocol mini banner + one type scale ─────────────
   Chat body is DM Sans only, four sizes: 15 (answers), 13.5 (secondary
   lines, buttons, links), 12 (uppercase labels). The serif stays on the
   panel name in the header and nowhere else in the chat. */
.sr-ai-panel .sr-ai-src li.sr-ai-pcard-li{list-style:none;margin:0 0 8px;padding:0}
.sr-ai-panel .sr-ai-src li.sr-ai-pcard-li::before{content:none;display:none}
.sr-ai-panel .sr-ai-src:has(.sr-ai-pcard-li){padding:0;margin:10px 0 4px}
.sr-ai-pcard{display:flex;align-items:center;gap:12px;box-sizing:border-box;width:100%;min-height:76px;padding:8px 12px 8px 8px;
  border-radius:14px;border:1px solid color-mix(in srgb,var(--pc,#8B4CF8) 42%,transparent);
  background:linear-gradient(90deg,color-mix(in srgb,var(--pc,#8B4CF8) 16%,#0E0C1C) 0%,#0E0C1C 70%);
  color:#F4F3FF;text-decoration:none!important;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
a.sr-ai-pcard:hover{border-color:var(--pc,#8B4CF8);transform:translateY(-1px);box-shadow:0 6px 22px -10px var(--pc,#8B4CF8);color:#FFFFFF}
a.sr-ai-pcard:focus-visible{outline:2px solid #22F0F8;outline-offset:2px}
.sr-ai-pcard--still{margin:10px 0 12px}
.sr-ai-pcard-img{flex:none;width:46px;height:60px;border-radius:8px;overflow:hidden;background:#15122A;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.sr-ai-pcard-img img{width:100%;height:100%;object-fit:cover;display:block}
.sr-ai-pcard-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.sr-ai-panel .sr-ai-pcard-k{font:600 12px/1.2 'DM Sans',system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--pc,#C4B2FF);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-ai-panel .sr-ai-pcard-h{font:600 15px/1.25 'DM Sans',system-ui,sans-serif;color:#F4F3FF}
.sr-ai-panel .sr-ai-pcard-s{font:400 13.5px/1.35 'DM Sans',system-ui,sans-serif;color:#B9B3D9}
.sr-ai-pcard-go{flex:none;width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  color:#FFFFFF;background:linear-gradient(135deg,#8B4CF8,#5A62F8)}

/* one type scale for the conversation */
.sr-ai-panel .sr-ai-thread,.sr-ai-panel .sr-ai-thread *{font-family:'DM Sans',system-ui,sans-serif}
.sr-ai-panel .sr-ai-turn p,.sr-ai-panel .sr-ai-turn--boundary p,.sr-ai-panel .sr-con-rec,.sr-ai-panel .sr-ai-nextgo{font-size:15px!important;line-height:1.6!important;font-style:normal}
.sr-ai-panel .sr-con-rec,.sr-ai-panel .sr-con-rec strong,.sr-ai-panel .sr-ai-nextgo{font-weight:600}
.sr-ai-panel .sr-ai-thread .sr-ai-recnote,.sr-ai-panel .sr-ai-src li,.sr-ai-panel .sr-ai-thread .sr-ai-why p,.sr-ai-panel .sr-ai-thread .sr-ai-nextwhy,.sr-ai-panel .sr-ai-thread .sr-ai-follow,
.sr-ai-panel .sr-ai-thread .sr-con-why,.sr-ai-panel .sr-ai-thread .sr-con-goal,.sr-ai-panel .sr-ai-thread .sr-con-gap,.sr-ai-panel .sr-ai-thread .sr-con-nofit,.sr-ai-panel .sr-ai-allow,
.sr-ai-panel .sr-ai-voiceask p,.sr-ai-panel .sr-ai-voicestate,.sr-ai-panel .sr-ai-ctxv{font-size:13.5px!important;line-height:1.5!important}
.sr-ai-panel .sr-ai-corrbtn,.sr-ai-panel .sr-ai-listen,.sr-ai-panel .sr-con-alt,.sr-ai-panel .sr-con-modes button,.sr-ai-panel .sr-ai-new,
.sr-ai-panel .sr-ai-send,.sr-ai-panel .sr-ai-pref{font-family:'DM Sans',system-ui,sans-serif;font-size:13.5px!important;font-weight:600}
.sr-ai-panel .sr-ai-on p,.sr-ai-panel .sr-ai-nextk,.sr-ai-panel .sr-ai-ctxk,.sr-ai-panel .sr-ai-prefk{font-size:12px!important;font-weight:600!important;letter-spacing:.14em!important}
.sr-ai-panel .sr-ai-input,.sr-ai-panel textarea{font-family:'DM Sans',system-ui,sans-serif;font-size:15px}

/* 21 Oct · mini banner border in the dashboard palette: violet → cyan gradient
   hairline with a soft violet glow (the track colour stays on the label only) */
.sr-ai-pcard{border:1px solid transparent;
  background:linear-gradient(90deg,rgba(139,76,248,.16) 0%,#0E0C1C 70%) padding-box,
             linear-gradient(120deg,#8B4CF8 0%,#5A62F8 55%,#22F0F8 100%) border-box;
  box-shadow:0 0 0 1px rgba(139,76,248,.10),0 8px 24px -14px rgba(139,76,248,.65)}
a.sr-ai-pcard:hover{border-color:transparent;
  background:linear-gradient(90deg,rgba(139,76,248,.24) 0%,#100D22 70%) padding-box,
             linear-gradient(120deg,#A06BFF 0%,#5A62F8 50%,#22F0F8 100%) border-box;
  box-shadow:0 0 0 1px rgba(34,240,248,.18),0 10px 28px -12px rgba(34,240,248,.45)}
.sr-ai-pcard-img{box-shadow:0 0 0 1px rgba(196,178,255,.28)}
.sr-ai-panel .sr-ai-pcard-k{letter-spacing:.08em}

/* 21 Oct · fill: one flat colour taken from the cover (--pf, set by
   saferise-ai.js), no gradient inside the banner. Only the border and glow
   are violet-to-cyan. */
.sr-ai-pcard{
  background:linear-gradient(color-mix(in srgb,rgb(var(--pf,58,34,110)) 72%,#07060F),color-mix(in srgb,rgb(var(--pf,58,34,110)) 72%,#07060F)) padding-box,
             linear-gradient(120deg,#8B4CF8 0%,#5A62F8 55%,#22F0F8 100%) border-box}
a.sr-ai-pcard:hover{
  background:linear-gradient(rgb(var(--pf,58,34,110)),rgb(var(--pf,58,34,110))) padding-box,
             linear-gradient(120deg,#A06BFF 0%,#5A62F8 50%,#22F0F8 100%) border-box}
.sr-ai-panel .sr-ai-pcard-s{color:#E2DEF2}
/* 21 Oct · title in the refined serif (as the panel name), no kicker line */
.sr-ai-panel .sr-ai-pcard-h{font:500 19px/1.15 'Cormorant Garamond','Cormorant',Georgia,serif;letter-spacing:.005em;color:#FFFFFF}
.sr-ai-pcard-txt{gap:4px}

/* 21 Oct · protocol AI bar: slimmer, no suggestion button (two columns) */
.sr-aic-bar{grid-template-columns:minmax(200px,auto) minmax(0,1fr);padding:9px 16px 8px;row-gap:4px;border-radius:14px}
.sr-aic-bar .srai-ask{padding:3px 4px 3px 14px}
.sr-aic-bar .srai-ask .srai-mic{width:36px;height:36px}
.sr-aic-bar .srai-ask .srai-go{width:34px;height:34px}
.sr-aic-bar .srai-ask input{font-size:14px}
.sr-aic-bar .srai-orb{width:28px;height:28px}
.sr-aic-bar .srai-privline{grid-column:2;font-size:12px}
@media(max-width:860px){.sr-aic-bar{grid-template-columns:minmax(0,1fr);padding:12px 14px}.sr-aic-bar .srai-privline{grid-column:1}}
/* the slim bar keeps two columns down to 600px; stacks only on phones */
@media(min-width:601px) and (max-width:860px){
  .sr-aic-bar{grid-template-columns:minmax(170px,auto) minmax(0,1fr);padding:9px 14px 8px;row-gap:4px}
  .sr-aic-bar .srai-top{grid-column:1;grid-row:1 / span 2}
  .sr-aic-bar .srai-ask{grid-column:2;grid-row:1}
  .sr-aic-bar .srai-privline{grid-column:2;grid-row:2}
  .sr-aic-bar .srai-wave{display:none}
}