/* ═══════════════════════════════════════════════════════════════════════════
   overlays.css — EVERY PANEL THAT OPENS (founder 2026-09-12). Loaded last.

   The command bar, the recalibration protocol, the protocol run, the welcome,
   the notifications and the celebration were the last surfaces in the old skin:
   card frames, capitals, monospace, gradient chrome, a flame and confetti.
   One frame, one type law, one pill, no gamification. The Intercept and the
   Record are untouched. Governed by DESIGN-CONSTITUTION.md.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── THE GROUND BEHIND A PANEL ─────────────────────────────────────────────── */
#recal-panel, #protocol, #celebrate, #welcome, #cmdk{
  background:rgba(3,16,31,.82) !important;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
html[data-theme="light"] :is(#recal-panel,#protocol,#celebrate,#welcome,#cmdk){
  background:rgba(232,240,248,.86) !important; }

/* ── ONE FRAME ─────────────────────────────────────────────────────────────── */
#recal-panel > div,
#protocol > .card,
#celebrate #cb-card,
#welcome #wc-card,
#cmdk .cmdk-panel,
#notif-panel{
  position:relative; isolation:isolate;
  border-radius:24px !important;
  background:linear-gradient(150deg,rgba(0,191,255,.08),rgba(10,122,205,.06) 55%,rgba(255,255,255,.012)) !important;
  border:1px solid rgba(160,225,255,.16) !important;
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 30px 70px -40px rgba(18,64,184,.95) !important; }
#recal-panel > div{ padding:40px 36px 34px !important; margin:32px 0; }
#protocol > .card{ padding:38px 34px 30px !important; }
#celebrate #cb-card, #welcome #wc-card{ padding:40px 34px 32px !important; }
html[data-theme="light"] :is(#recal-panel > div,#protocol > .card,#celebrate #cb-card,#welcome #wc-card,#cmdk .cmdk-panel,#notif-panel){
  background:linear-gradient(150deg,rgba(255,255,255,.96),rgba(240,247,252,.92)) !important;
  border-color:rgba(11,30,51,.10) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 30px 70px -44px rgba(11,30,51,.45) !important; }

/* ── ONE TYPE LAW, the website's ───────────────────────────────────────────── */
:is(#recal-panel,#protocol,#celebrate,#welcome,#cmdk,#notif-panel) :is(h1,h2,h3){
  font-family:var(--f-disp) !important; font-weight:500 !important;
  font-size:clamp(24px,2.4vw,34px) !important; line-height:1.06 !important;
  letter-spacing:-.022em !important; color:rgb(var(--ink)) !important;
  background:none !important; -webkit-text-fill-color:currentColor !important; text-wrap:balance; }
:is(#recal-panel,#protocol,#celebrate,#welcome,#cmdk,#notif-panel) :is(h1,h2,h3) em,
:is(#recal-panel,#protocol,#celebrate,#welcome) p em{
  font-family:var(--f-em) !important; font-style:italic !important; font-weight:400 !important;
  font-size:1.14em !important; letter-spacing:0 !important; color:#CFF3FF !important; }
html[data-theme="light"] :is(#recal-panel,#protocol,#celebrate,#welcome) :is(h1,h2,h3) em{ color:#0B1E33 !important; }

/* capitals, tracking and monospace leave every panel */
:is(#recal-panel,#protocol,#celebrate,#welcome,#cmdk,#notif-panel) :is(.overline,.font-mono,[class*="tracking-"],[style*="letter-spacing"]){
  font-family:var(--f-body) !important; letter-spacing:0 !important; text-transform:none !important; }
:is(#recal-panel,#protocol,#celebrate,#welcome,#cmdk,#notif-panel) .overline{
  font:400 13.5px/1.4 var(--f-body) !important; color:rgb(var(--ink3)) !important; }
:is(#recal-panel,#protocol,#celebrate,#welcome) p:not(.overline){
  font-family:var(--f-body) !important; font-size:16px !important; line-height:1.55 !important;
  color:rgb(var(--ink2)) !important; }
#recal-title{ font:500 22px/1.2 var(--f-disp) !important; letter-spacing:-.02em !important; color:rgb(var(--ink)) !important; }

/* ── NO GAMIFICATION: the flame and the confetti leave (design DNA) ────────── */
#cb-confetti, #cb-flame{ display:none !important; }
#wc-ico{ border:0 !important; background:none !important; border-radius:0 !important; }

/* ── CONTROLS: one pill, everything else quiet text ────────────────────────── */
:is(#recal-panel,#protocol,#celebrate,#welcome) button:is(.ui-btn--primary,.landing-cta,[class*="bg-gradient"],[class*="from-primary"]){
  min-height:52px; padding:0 22px; border-radius:999px !important;
  border:1px solid rgba(160,225,255,.22) !important;
  background:linear-gradient(115deg,rgba(10,122,205,.62),rgba(0,191,255,.42) 50%,rgba(0,63,92,.62)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32), 0 14px 36px -16px rgba(47,123,255,.85) !important;
  color:rgb(var(--ink)) !important; font:600 16px/1 var(--f-body) !important; letter-spacing:0 !important; }
:is(#recal-panel,#protocol,#celebrate,#welcome,#notif-panel) button:not(.ui-btn--primary):not(.landing-cta):not([class*="bg-gradient"]):not([class*="from-primary"]){
  background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important;
  color:rgb(var(--ink2)) !important; font:500 14px/1.4 var(--f-body) !important; letter-spacing:0 !important;
  min-height:44px; text-transform:none !important; }
:is(#recal-panel,#protocol,#celebrate,#welcome,#notif-panel) button:not(.ui-btn--primary):not(.landing-cta):hover{ color:rgb(var(--ink)) !important; }

/* fields: a wash and a hairline, never a box (the Intercept's rule) */
:is(#recal-panel,#protocol) :is(input,textarea,select){
  background:rgba(0,191,255,.05) !important; border:0 !important; border-bottom:1px solid var(--hair) !important;
  border-radius:8px !important; color:rgb(var(--ink)) !important;
  font:400 16px/1.4 var(--f-body) !important; letter-spacing:0 !important; min-height:44px; }
:is(#recal-panel,#protocol) :is(input,textarea):focus-visible{
  outline:none; background:rgba(0,191,255,.09) !important; border-bottom-color:var(--ice2) !important; }
:is(#recal-panel,#protocol) label{ font:400 13.5px/1.4 var(--f-body) !important; color:rgb(var(--ink3)) !important;
  letter-spacing:0 !important; text-transform:none !important; }

/* ── THE COMMAND BAR ───────────────────────────────────────────────────────── */
#cmdk .cmdk-panel{ padding:0 !important; overflow:hidden; }
#cmdk .cmdk-state{ font:400 13px/1.4 var(--f-body) !important; color:rgb(var(--ink3)) !important;
  letter-spacing:0 !important; text-transform:none !important; padding:16px 22px 0 !important; border:0 !important; }
#cmdk .cmdk-inp-row{ border:0 !important; border-bottom:1px solid var(--hair) !important;
  padding:10px 22px 16px !important; gap:12px; align-items:baseline; }
#cmdk .cmdk-prompt{ color:rgb(var(--ink3)) !important; font:400 18px/1 var(--f-body) !important; }
#cmdk #cmdk-input{
  background:transparent !important; border:0 !important; box-shadow:none !important;
  font-family:var(--f-disp) !important; font-weight:500 !important; font-size:22px !important;
  line-height:1.2 !important; letter-spacing:-.02em !important; color:rgb(var(--ink)) !important; }
#cmdk #cmdk-input::placeholder{ color:rgb(var(--ink3)) !important; font-weight:400; }
#cmdk #cmdk-list{ padding:8px 0 !important; max-height:52vh; overflow:auto; }
#cmdk #cmdk-list [role="option"], #cmdk .cmdk-item{
  border:0 !important; border-radius:0 !important; background:transparent !important;
  padding:12px 22px !important; min-height:48px;
  font:400 16px/1.35 var(--f-body) !important; color:rgb(var(--ink2)) !important; }
#cmdk #cmdk-list [role="option"][aria-selected="true"], #cmdk .cmdk-item.is-sel, #cmdk .cmdk-item[aria-selected="true"]{
  background:rgba(0,191,255,.055) !important; color:rgb(var(--ink)) !important;
  box-shadow:inset 2px 0 0 var(--mg-ice,#7FD3FF) !important; }
#cmdk .cmdk-group, #cmdk #cmdk-list .group{
  font:400 13px/1.4 var(--f-body) !important; color:rgb(var(--ink3)) !important;
  letter-spacing:0 !important; text-transform:none !important; padding:14px 22px 6px !important; }
#cmdk .cmdk-foot{
  border:0 !important; border-top:1px solid var(--hair) !important; padding:12px 22px !important;
  font:400 12.5px/1.4 var(--f-body) !important; color:rgb(var(--ink3)) !important; letter-spacing:0 !important; gap:18px; }

/* ── NOTIFICATIONS ─────────────────────────────────────────────────────────── */
#notif-panel > div:first-child{ border:0 !important; border-bottom:1px solid var(--hair) !important; }
#notif-panel #notif-count-lbl{ font:400 12.5px/1.4 var(--f-body) !important; color:rgb(var(--ink3)) !important; letter-spacing:0 !important; }

/* the command bar's leftovers: a three-letter badge on every row, a shouted tier,
   and a key cap with a border. The badge says nothing the label does not. */
#cmdk .cmdk-tag{ display:none !important; }
#cmdk .cmdk-item{ display:flex; align-items:baseline; gap:12px; }
#cmdk .cmdk-item.on{ background:rgba(0,191,255,.055) !important; color:rgb(var(--ink)) !important;
  box-shadow:inset 2px 0 0 var(--mg-ice,#7FD3FF) !important; }
#cmdk .cmdk-label{ font:400 16px/1.35 var(--f-body) !important; letter-spacing:0 !important; }
#cmdk .cmdk-item.on .cmdk-label{ color:rgb(var(--ink)) !important; }
#cmdk .cmdk-key{
  margin-left:auto; border:0 !important; background:transparent !important; box-shadow:none !important;
  font:400 12.5px/1 var(--f-body) !important; color:rgb(var(--ink3)) !important; letter-spacing:0 !important; }
#cmdk .cmdk-state{ display:flex; align-items:baseline; justify-content:space-between; gap:18px; }
#cmdk .cmdk-state-word{ font:500 15px/1.35 var(--f-body) !important; letter-spacing:0 !important;
  text-transform:lowercase; color:rgb(var(--ink)) !important; }
#cmdk .cmdk-state-word::first-letter{ text-transform:uppercase; }
#cmdk .cmdk-state-dir{ display:block; font:400 14px/1.45 var(--f-body) !important; color:rgb(var(--ink2)) !important;
  letter-spacing:0 !important; margin-top:3px; max-width:52ch; }
#cmdk .cmdk-state :is(.cmdk-bs, .cmdk-state-bs, [class*="blind"]){
  font:400 13px/1.4 var(--f-body) !important; color:rgb(var(--ink3)) !important;
  letter-spacing:0 !important; text-transform:none !important; text-align:right; }

/* ── THE RECALIBRATION PROTOCOL ────────────────────────────────────────────
   The pacer keeps its circle, because a breath is a cycle; it loses the glow,
   the heavy stroke and the shouting. Track is a hairline, the arc is ice. */
#recal-panel #recal-arc-glow{ display:none !important; }
#recal-panel #recal-arc{ stroke-width:1.6 !important; stroke:var(--mg-ice,#7FD3FF) !important; }
#recal-panel #recal-ring-svg circle:first-of-type{ stroke-width:1 !important; stroke:rgba(0,191,255,.16) !important; }
#recal-panel .recal-timer{
  font-family:var(--f-body) !important; font-weight:300 !important; font-size:52px !important;
  letter-spacing:-.04em !important; font-variant-numeric:tabular-nums; color:rgb(var(--ink)) !important;
  text-shadow:none !important; }
#recal-panel .recal-phase-lbl{
  font:400 13.5px/1.4 var(--f-body) !important; letter-spacing:0 !important; text-transform:none !important;
  color:rgb(var(--ink3)) !important; margin-top:4px; }
#recal-panel #recal-cycle-lbl{
  font:400 13.5px/1.4 var(--f-body) !important; letter-spacing:0 !important; text-transform:none !important;
  color:rgb(var(--ink3)) !important; }
#recal-panel #recal-kind{ margin-bottom:8px !important; }
#recal-panel #recal-why{ font-size:16px !important; line-height:1.55 !important; max-width:46ch !important;
  color:rgb(var(--ink2)) !important; margin-left:auto; margin-right:auto; }
html[data-theme="light"] #recal-panel #recal-arc{ stroke:#0B7ACD !important; }
html[data-theme="light"] #recal-panel #recal-ring-svg circle:first-of-type{ stroke:rgba(11,30,51,.14) !important; }

/* ── THE SENTRY: three rows and a sentence, in the field ───────────────────── */
.sn-guard{ border:0; background:none; padding:0; }
.sn-guard__head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding-bottom:12px; border-bottom:1px solid var(--hair); }
.sn-guard__label{ font:400 13.5px/1.4 var(--f-body); color:rgb(var(--ink3)); letter-spacing:0; text-transform:none; }
.sn-guard__state{ font:500 14px/1.4 var(--f-body); color:rgb(var(--ink)); white-space:nowrap; }
.sn-guard__rows{ display:block; }
.sn-guard__row{ display:flex; align-items:baseline; gap:20px; padding:12px 0; min-height:44px;
  border-bottom:1px solid var(--hair); }
.sn-guard__n{ flex:0 0 96px; font:500 15px/1.4 var(--f-body); color:rgb(var(--ink)); }
.sn-guard__s{ flex:1; font:400 15px/1.5 var(--f-body); color:rgb(var(--ink2)); max-width:52ch; }
.sn-guard__fix{ background:none; border:0; padding:0; margin-left:6px; min-height:44px;
  font:500 15px/1.5 var(--f-body); color:var(--mg-ice,#7FD3FF); cursor:pointer; text-decoration:none; }
.sn-guard__fix:hover{ color:rgb(var(--ink)); }
.sn-guard__next{ padding-top:18px; }
.sn-guard__moment{ font:500 16px/1.4 var(--f-body); color:rgb(var(--ink)); margin:6px 0 0; }
.sn-guard__say{ font:400 15px/1.55 var(--f-body); color:rgb(var(--ink2)); margin:10px 0 0; max-width:52ch; }

/* ═══════════════════════════════════════════════════════════════════════════
   §MEMO — THE ISSUED DOCUMENTS (founder 2026-09-14).

   Seven windows open on one shell (`memoSheetOpen` / `#memo-overlay`, js/01):
   the Doctrine, the Dossier, the Session Brief, the Canon, the Memorandum to
   the Board, the Memorandum of Record, and the Recalibration memo. The 09-12
   overlay pass reskinned every panel that opens and missed these, so they were
   still wearing the old instrument: a 3px sheet, Inter 200 headings, 8px
   letter-spaced capitals for every label, monospace cyan buttons.

   The markup is inline-styled and identical across js/10, js/11 and js/13, so
   the law is applied here rather than rewritten seven times. One frame, one
   type law, one pill. Governed by DESIGN-CONSTITUTION.md §2, §4, §9, §12.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── THE GROUND BEHIND THE DOCUMENT ────────────────────────────────────────── */
#memo-overlay{
  background:rgba(3,16,31,.82) !important;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  font-family:var(--f-body) !important;
  padding:24px !important; }
html[data-theme="light"] #memo-overlay{ background:rgba(232,240,248,.86) !important; }

/* ── ONE FRAME: the sheet is the same glass as every other panel ───────────── */
#memo-overlay #memo-sheet{
  position:relative; isolation:isolate;
  border-radius:24px !important;
  padding:40px 38px 34px !important;
  background:linear-gradient(150deg,rgba(0,191,255,.08),rgba(10,122,205,.06) 55%,rgba(255,255,255,.012)) !important;
  border:1px solid rgba(160,225,255,.16) !important;
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 30px 70px -40px rgba(18,64,184,.95) !important; }
html[data-theme="light"] #memo-overlay #memo-sheet{
  background:linear-gradient(150deg,rgba(255,255,255,.96),rgba(240,247,252,.92)) !important;
  border-color:rgba(11,30,51,.10) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 30px 70px -44px rgba(11,30,51,.45) !important; }

/* ── ONE TYPE LAW ──────────────────────────────────────────────────────────
   Capitals, tracking and monospace leave the document, exactly as they left
   every other panel. The three rungs of text do the hierarchy instead. */
#memo-overlay :is(p,div,span,li,b,strong,td,th){
  font-family:var(--f-body) !important; letter-spacing:0 !important; text-transform:none !important; }

/* the provenance line above the title ("Areté · The Doctrine") */
#memo-overlay p[style*="letter-spacing:.44em"]{
  font:400 13px/1.4 var(--f-body) !important; color:rgb(var(--ink3)) !important; }

/* the sentence of the document */
#memo-overlay p[style*="font-family:Inter"]{
  font-family:var(--f-disp) !important; font-weight:500 !important;
  font-size:clamp(26px,2.4vw,34px) !important; line-height:1.06 !important;
  letter-spacing:-.022em !important; color:rgb(var(--ink)) !important;
  margin:8px 0 0 !important; max-width:22ch; text-wrap:balance; }
#memo-overlay p[style*="font-family:Inter"] em{
  font-family:var(--f-em) !important; font-style:italic; font-weight:500;
  font-size:1.08em; color:#dff4ff !important; }
html[data-theme="light"] #memo-overlay p[style*="font-family:Inter"] em{ color:#0B1E33 !important; }

/* the date / reference stamp */
#memo-overlay > #memo-sheet > div:first-of-type > span{
  font:400 13px/1.4 var(--f-body) !important; color:rgb(var(--ink3)) !important; white-space:nowrap; }

/* the label above each row */
#memo-overlay p[style*="letter-spacing:.34em"]{
  font:400 13.5px/1.4 var(--f-body) !important; color:rgb(var(--ink3)) !important;
  margin:0 0 6px !important; }

/* the body of each row */
#memo-overlay .voice-counsel{
  font:400 16px/1.55 var(--f-body) !important; color:rgb(var(--ink2)) !important; max-width:52ch; }
#memo-overlay .voice-counsel strong,
#memo-overlay .voice-counsel b{ font-weight:500 !important; color:rgb(var(--ink)) !important; }

/* text never wears ice: the emphasis inside a row is the top rung of ink, not a hue */
#memo-overlay [style*="var(--ice)"], #memo-overlay [style*="--ice)"]{
  color:#CFF3FF !important; font-weight:500; text-shadow:none !important; }
html[data-theme="light"] #memo-overlay [style*="var(--ice)"]{ color:#0B1E33 !important; }

/* the closing provenance paragraph */
#memo-overlay #memo-sheet > p:last-of-type,
#memo-overlay p[style*="border-top"]{
  font:400 13.5px/1.55 var(--f-body) !important; color:rgb(var(--ink3)) !important;
  border-top:1px solid var(--hair) !important; padding-top:16px !important;
  margin:30px 0 0 !important; max-width:52ch; }

/* ── ONE PILL, ONE QUIET EXIT ──────────────────────────────────────────────
   Print is the document's single action; Close is a text exit, not a twin. */
#memo-overlay .memo-noprint{ display:flex; align-items:center; gap:18px !important; margin-top:30px !important; }
#memo-overlay .memo-print, #memo-overlay .memo-noprint button{
  min-height:52px; padding:0 22px; border-radius:999px !important;
  border:1px solid rgba(160,225,255,.22) !important;
  background:linear-gradient(115deg,rgba(10,122,205,.62),rgba(0,191,255,.42) 50%,rgba(0,63,92,.62)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32), 0 14px 36px -16px rgba(47,123,255,.85) !important;
  color:rgb(var(--ink)) !important; font:600 16px/1 var(--f-body) !important;
  letter-spacing:0 !important; text-transform:none !important; min-width:200px; }
#memo-overlay .memo-noprint button:hover{ transform:translateY(-2px); }
#memo-overlay .memo-noprint button:active{ transform:scale(.985); }
#memo-overlay .memo-close, #memo-overlay .memo-noprint button + button{
  min-width:0; min-height:44px; padding:0 !important;
  background:none !important; border:0 !important; box-shadow:none !important;
  color:rgb(var(--ink2)) !important; font:500 14px/1.4 var(--f-body) !important; transform:none !important; }
#memo-overlay .memo-noprint button + button:hover{ color:rgb(var(--ink)) !important; }
#memo-overlay .memo-noprint button:focus-visible{ outline:2px solid var(--ice2); outline-offset:3px; }

/* ── SUPPORTING ROWS: hairlines, never boxes ───────────────────────────────── */
#memo-overlay #memo-sheet > div:first-of-type{ margin-bottom:30px !important; gap:24px; }

@media (max-width:760px){
  #memo-overlay{ padding:0 !important; align-items:flex-end !important; }
  #memo-overlay #memo-sheet{
    width:100vw !important; max-width:none !important; max-height:92vh !important;
    border-radius:24px 24px 0 0 !important; padding:30px 20px 24px !important;
    -webkit-backdrop-filter:none; backdrop-filter:none; }
  #memo-overlay .memo-noprint{ flex-direction:column; align-items:stretch; gap:12px !important; }
  #memo-overlay .memo-noprint button{ width:100%; } }

/* ── PRINT: a printed memorandum is paper, not a themed screen ─────────────── */
@media print{
  #memo-overlay #memo-sheet{
    background:#fff !important; border:none !important; box-shadow:none !important;
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
    border-radius:0 !important; padding:0 !important; max-width:none !important; }
  #memo-overlay :is(p,div,span,b,strong,.voice-counsel){ color:#0B1E33 !important; }
  #memo-overlay :is(p[style*="letter-spacing:.44em"],p[style*="letter-spacing:.34em"],p[style*="border-top"]),
  #memo-overlay > #memo-sheet > div:first-of-type > span{ color:#4B5B6B !important; } }