/* ═══════════════════════════════════════════════════════════════════════════
   shell.css — THE SHELL (founder 2026-09-12). Loaded last.

   The rail, the header and the marks are one instrument, not chrome around one.
   One icon grammar: a 24 box, straight lines and one circle, 1.4 stroke, a single
   filled mark where something is present. One active language: a lit edge and full
   ink, nothing else. One container in the whole shell, the Intercept's pill; every
   other control stands in the field. Governed by DESIGN-CONSTITUTION.md.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── THE MARKS ─────────────────────────────────────────────────────────────── */
/* founder 2026-09-12: the marks go back to the ones she had. The weight goes back
   with them, and each header mark keeps the stroke it was drawn with. */
#ui-rail .ui-dest svg, #ui-tabbar .ui-dest svg{
  width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; overflow:visible; }

/* ── THE RAIL: a plane in the same field, not a panel beside it ────────────── */
#ui-rail{
  background:linear-gradient(180deg, rgba(3,16,31,.86), rgba(3,16,31,.94));
  border-right:0 !important; box-shadow:none;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  padding-top:18px; padding-bottom:14px; }
/* the boundary is a hairline that fades out at both ends, never a rule down the page */
#ui-rail::after{
  content:''; position:absolute; top:0; bottom:0; right:0; width:1px; pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(127,211,255,.13) 18%, rgba(127,211,255,.13) 82%, transparent); }

#ui-rail .ui-rail__brand{ height:38px; margin-bottom:26px; }
#ui-rail .ui-rail__brand span{
  font-family:var(--f-body); font-weight:500; font-size:10px; letter-spacing:.30em;
  color:rgba(238,244,250,.62); }
#ui-rail .ui-rail__brand:hover span{ color:rgb(var(--ink)); }

/* ── A DESTINATION: quiet until it is where you are ────────────────────────── */
#ui-rail .ui-dest, #ui-tabbar .ui-dest{
  position:relative; gap:7px; height:60px; border:0 !important; border-radius:0 !important;
  background:transparent !important; box-shadow:none !important;
  color:rgb(var(--ink3)); font:500 12px/1 var(--f-body); letter-spacing:0; text-transform:none;
  transition:color .18s ease, background-color .18s ease; }
#ui-rail .ui-dest{ margin-bottom:2px; }
#ui-rail .ui-dest:hover, #ui-tabbar .ui-dest:hover{ color:rgb(var(--ink2)); background:transparent !important; }
#ui-rail .ui-dest:focus-visible, #ui-tabbar .ui-dest:focus-visible{
  outline:2px solid var(--ice2); outline-offset:-3px; border-radius:2px !important; }

/* the active room: full ink, a breath of light on the plane, and one lit edge */
#ui-rail .ui-dest[aria-current="page"], #ui-rail .ui-dest.active,
#ui-tabbar .ui-dest[aria-current="page"], #ui-tabbar .ui-dest.active{
  color:rgb(var(--ink)); background:rgba(0,191,255,.045) !important; }
#ui-rail .ui-dest::before{
  content:''; position:absolute; left:0; top:12px; bottom:12px; width:2px; border-radius:0;
  background:var(--mg-ice,#7FD3FF); transform:scaleY(0); transform-origin:50% 50%;
  transition:transform .22s cubic-bezier(.2,.8,.2,1); }
#ui-rail .ui-dest[aria-current="page"]::before, #ui-rail .ui-dest.active::before{ transform:scaleY(1); }
#ui-tabbar .ui-dest::before{
  content:''; position:absolute; left:22%; right:22%; top:0; height:2px;
  background:var(--mg-ice,#7FD3FF); transform:scaleX(0);
  transition:transform .22s cubic-bezier(.2,.8,.2,1); }
#ui-tabbar .ui-dest[aria-current="page"]::before, #ui-tabbar .ui-dest.active::before{ transform:scaleX(1); }
@media (prefers-reduced-motion:reduce){
  #ui-rail .ui-dest::before, #ui-tabbar .ui-dest::before{ transition:none; }
}

/* More sits with the rooms, quieter, and keeps the same language */
#ui-rail .ui-dest--more{ margin-top:6px; color:rgb(var(--ink3)); }

/* ── THE TAB BAR: the same plane, along the bottom ─────────────────────────── */
#ui-tabbar{
  background:linear-gradient(0deg, rgba(3,16,31,.96), rgba(3,16,31,.88));
  border-top:0 !important; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
#ui-tabbar::before{
  content:''; position:absolute; left:0; right:0; top:0; height:1px; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(127,211,255,.14) 20%, rgba(127,211,255,.14) 80%, transparent); }

/* ── THE HEADER: a control line, not a row of buttons ──────────────────────── */
#content-wrap > header{
  background:transparent !important; border-bottom:0 !important;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
#content-wrap > header::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(127,211,255,.10) 16%, rgba(127,211,255,.10) 84%, transparent); }

/* rhythm: the doorway, a gap, the quiet cluster, a gap, the person */
#content-wrap > header > div:last-child{ gap:0 !important; }
#content-wrap > header #intercept-btn{ margin-right:18px; }
#content-wrap > header #float-btn,
#content-wrap > header #notif-bell,
#content-wrap > header #cmdk-btn,
#content-wrap > header #veil-toggle,
#content-wrap > header #theme-toggle,
#content-wrap > header #ui-more-btn{ margin:0 1px; }
#content-wrap > header #avatar{ margin-left:18px; }

/* every utility stands in the field: no container, no border, no fill */
#content-wrap > header .theme-toggle{
  width:40px; height:40px; display:grid; place-items:center;
  background:transparent !important; border:0 !important; border-radius:0 !important;
  box-shadow:none !important; color:rgb(var(--ink3)); transition:color .18s ease; }
#content-wrap > header .theme-toggle:hover{ color:rgb(var(--ink)); background:transparent !important; }
#content-wrap > header .theme-toggle:focus-visible{ outline:2px solid var(--ice2); outline-offset:-4px; }
#content-wrap > header .theme-toggle[aria-pressed="true"]{ color:var(--mg-ice,#7FD3FF); }

/* the doorway into the instrument: the one container in the shell, the pill's own glass */
#content-wrap > header #intercept-btn{
  height:34px; padding:0 15px; gap:8px; border-radius:999px;
  border:1px solid rgba(160,225,255,.20) !important;
  background:linear-gradient(115deg,rgba(10,122,205,.44),rgba(0,191,255,.28) 50%,rgba(0,63,92,.46)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 8px 22px -14px rgba(47,123,255,.8) !important;
  color:rgb(var(--ink)); transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s; }
#content-wrap > header #intercept-btn:hover{ transform:translateY(-1px); }
#content-wrap > header #intercept-btn:active{ transform:none; }
#content-wrap > header #intercept-btn .int-label{
  font:600 13px/1 var(--f-body); letter-spacing:0; text-transform:none; }

/* unread is a state, so it keeps its mark: one point of ice, no badge block */
#content-wrap > header .notif-badge{
  position:absolute; top:9px; right:9px; min-width:0; width:6px; height:6px; padding:0;
  border-radius:50%; border:0; background:var(--ice,#00BFFF); color:transparent;
  font-size:0; line-height:0; box-shadow:none; }

/* the identity seal: a ring and the initials, nothing else */
#content-wrap > header #avatar{
  width:32px; height:32px; border-radius:50%;
  background:transparent !important; background-image:none !important;
  border:1px solid rgba(160,225,255,.26); color:rgb(var(--ink2));
  font-family:var(--f-body); font-weight:500; font-size:11px; letter-spacing:.04em;
  box-shadow:none; transition:border-color .18s ease, color .18s ease; }
#content-wrap > header #avatar:hover{ border-color:rgba(200,236,255,.5); color:rgb(var(--ink)); }
#content-wrap > header #avatar:focus-visible{ outline:2px solid var(--ice2); outline-offset:3px; }

/* the load reads in words; the streak leaves the shell (no records of rigor in the chrome) */
#content-wrap > header #load-wrap .overline,
#content-wrap > header #load-wrap span{ font:400 12px/1.4 var(--f-body) !important; letter-spacing:0 !important;
  text-transform:none !important; color:rgb(var(--ink3)) !important; }
#content-wrap > header #load-wrap{ margin-right:20px; }
#content-wrap > header #streak-pill{ display:none !important; }
#menu-toggle{ display:none !important; }   /* the rail is the menu; the layout cycler was chrome */

/* ── THE MORE SHEET: the same plane as the rail ────────────────────────────── */
#ui-more{
  background:linear-gradient(180deg, rgba(26,42,63,.97), rgba(3,16,31,.98));
  border:0; box-shadow:0 -18px 60px -26px rgba(0,0,0,.9); }
#ui-more::before{
  content:''; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(127,211,255,.16), transparent); }
#ui-more .ui-more__title{ font-family:var(--f-disp); font-weight:500; font-size:17px; letter-spacing:-.02em; }

/* ── LIGHT THEME: the same shell, the ink the other way up ─────────────────── */
html[data-theme="light"] #ui-rail{ background:linear-gradient(180deg, rgba(246,250,253,.9), rgba(238,245,251,.96)); }
html[data-theme="light"] #ui-tabbar{ background:linear-gradient(0deg, rgba(238,245,251,.97), rgba(246,250,253,.9)); }
html[data-theme="light"] #ui-rail::after,
html[data-theme="light"] #ui-tabbar::before,
html[data-theme="light"] #content-wrap > header::after{ background:linear-gradient(180deg, transparent, rgba(11,30,51,.12) 18%, rgba(11,30,51,.12) 82%, transparent); }
html[data-theme="light"] #content-wrap > header::after,
html[data-theme="light"] #ui-tabbar::before{ background:linear-gradient(90deg, transparent, rgba(11,30,51,.12) 18%, rgba(11,30,51,.12) 82%, transparent); }
html[data-theme="light"] #ui-rail .ui-dest[aria-current="page"],
html[data-theme="light"] #ui-tabbar .ui-dest[aria-current="page"]{ background:rgba(11,122,205,.07) !important; }
html[data-theme="light"] #ui-rail .ui-dest::before,
html[data-theme="light"] #ui-tabbar .ui-dest::before{ background:#0B7ACD; }
html[data-theme="light"] #content-wrap > header #avatar{ border-color:rgba(11,30,51,.24); }

/* More is a room in the rail, not a floating button: the ring around its mark goes */
#ui-rail .ui-dest--more svg{
  width:22px !important; height:22px !important; padding:0 !important;
  border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; }
#ui-rail .ui-dest--more:hover svg{ background:transparent !important; border:0 !important; }
#ui-rail .ui-dest--more{ height:60px; padding:0; }
#ui-rail .ui-dest--more span{ font:500 12px/1 var(--f-body) !important; letter-spacing:0 !important; }
/* the mark is engraved either way up */
html[data-theme="light"] #ui-rail .ui-rail__brand span{ color:rgba(11,30,51,.62); }
html[data-theme="light"] #ui-rail .ui-rail__brand:hover span{ color:#0B1E33; }

/* ── UI/UX PRO PASS ────────────────────────────────────────────────────────
   Every control answers to a finger: the mark keeps its size, the hit area grows
   to 44 underneath it. Nothing moves on screen. */
#content-wrap > header .theme-toggle{ width:44px; height:44px; }
#content-wrap > header #intercept-btn,
#content-wrap > header #avatar,
#ui-rail .ui-rail__brand{ position:relative; }
#content-wrap > header #intercept-btn::after,
#content-wrap > header #avatar::after,
#ui-rail .ui-rail__brand::after{
  content:''; position:absolute; left:0; right:0; top:50%; height:44px; transform:translateY(-50%); }
@media (max-width:1023px){
  #content-wrap > header #intercept-btn{ height:44px; padding:0 16px; }
}
#content-wrap > header #avatar::after{ left:-6px; right:-6px; }