/* ============================================================================
   shell.css — the app chrome, defined ONCE.
   Rail, Brain Purge orb, nav, search, admin footer, mobile drawer, Today slot.
   No view re-declares any of this. A view only renders into <main class="view">.

   TRACKED FOLLOW-UP · rail/shell retirement — the drill-down experience replaced
   this rail chrome (see styles/experience.css). Everything here EXCEPT the base
   `.view` rule is now dead: no .rail/.nav/.mobilebar/.admin markup is rendered.
   Retire this file in PR6 (when the old access/nav paths are fully replaced) and
   MOVE the `.view` base rule into experience.css then — experience.css currently
   overrides .view padding and depends on this base rule existing.
   ============================================================================ */

.app{display:flex;min-height:100vh;}

/* ---- left rail (desktop) ----
   Fixed full-height column that NEVER scrolls. Order, top to bottom:
   wordmark · (space) · centered orb · (space) · nav · search · line · admin.
   Everything sized to fit the viewport; no auto-margins / no floating. */
.rail{width:300px;flex:none;border-right:1px solid var(--border);
  padding:28px 24px 22px;display:flex;flex-direction:column;
  height:100vh;position:sticky;top:0;overflow-y:auto;}
.rail-fam{flex:none;}
.rail-fam .fam{color:var(--green);font-weight:700;font-size:15px;}
.rail-fam .brand{color:var(--cream);font-weight:800;font-size:23px;letter-spacing:-0.01em;}
.rail-fam .brand b{color:var(--green);}

/* Brain Purge orb — the brand centerpiece. The art is a FILE (web/brand/
   brain-purge.svg) that GitHub serves; the button is just a sized, transparent
   container for it. Swap the art later by replacing that one file. Generous
   space BELOW pushes the nav lower. Sizes/spacing clamp so short windows survive. */
.orb-wrap{flex:none;display:flex;justify-content:center;align-items:center;width:100%;overflow:visible;padding:clamp(18px,3.5vh,40px) 0 clamp(40px,7vh,76px);}

/* The rail's Brain Purge button IS the shared easy button (shared/easy-button.js
   + styles/easy-button.css), mounted in its halo variant — the final look: no
   bezel, the dome emerging from the dark rail carrying its OWN bloom. The dome's
   identity + press physics + glow all live in easy-button.css; this block owns
   only the rail's subtle idle breathe. (The old -28px bleed compensated for
   whitespace inside the retired image asset — the CSS dome is edge-to-edge, so
   it sizes to the rail's inner width instead. Replaced the bespoke .orb,
   2026-07-04.) */
.orb-wrap .eb-rig{animation:orb-breathe 5.5s ease-in-out infinite;}

@keyframes orb-breathe{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.012);}      /* very subtle breath */
}

/* accessibility: anyone who prefers less motion gets a calm, still orb */
@media(prefers-reduced-motion:reduce){
  .orb-wrap .eb-rig{animation:none;}
}

/* nav — sits right under the orb, fixed */
.nav{flex:none;display:flex;flex-direction:column;gap:7px;}
.navitem{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:11px;
  color:var(--body);font-size:16px;font-weight:600;cursor:pointer;text-align:left;
  background:none;border:none;font-family:var(--sans);width:100%;}
.navitem .ic{width:20px;text-align:center;flex:none;}
.navitem.on{background:var(--raised);color:var(--cream);}
.navitem:hover:not(.on){color:var(--cream);}

/* search + line + admin pinned to the bottom of the rail (one auto gap here,
   between nav and search, absorbs leftover height so the footer sits at the
   bottom and the whole column always fits without scrolling) */
.search{flex:none;margin-top:auto;padding-top:18px;}
.search input{width:100%;background:var(--raised);border:1px solid var(--border);border-radius:var(--r-input);
  padding:11px 14px;color:var(--body);font-family:var(--sans);font-size:14px;}
.search input::placeholder{color:var(--hint);}
.search input:focus{outline:none;border-color:var(--editing);box-shadow:var(--e-glow);}

.admin{flex:none;display:flex;align-items:center;gap:11px;padding:16px 6px 0;margin:14px -6px 0;border:none;border-top:1px solid var(--border);
  background:none;width:calc(100% + 12px);text-align:left;cursor:pointer;font-family:var(--sans);border-radius:0 0 10px 10px;}
.admin:hover{background:var(--forest);}
.admin .av{width:38px;height:38px;border-radius:50%;background:var(--avatar);display:flex;align-items:center;
  justify-content:center;font-weight:700;color:#10140f;flex:none;}
.admin .who{font-weight:700;color:var(--cream);font-size:14.5px;}
.admin .role{color:var(--muted);font-size:12.5px;}

/* ---- the view region ---- */
/* No hard max-width: the week grid needs room. Side padding scales with width
   so wide screens breathe and laptops stay tight. Individual text-heavy views
   cap their own readable width (e.g. .ho, .ac, .pb set their own max-width). */
.view{flex:1;min-width:0;padding:40px clamp(24px,4vw,64px) 80px;}

/* ---- mobile: rail becomes a drawer, top bar with burger + Today ---- */
.mobilebar{display:none;}
.nav-scrim,.nav-drawer{display:none;}

@media(max-width:880px){
  .rail{display:none;}
  .app{flex-direction:column;}
  .view{padding:20px 16px 60px;max-width:none;}

  .mobilebar{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:40;
    height:58px;padding:0 14px;background:rgba(10,15,12,0.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--border);}
  .mb-burger{display:flex;flex-direction:column;gap:5px;background:none;border:none;padding:8px;cursor:pointer;}
  .mb-burger span{width:22px;height:2px;background:var(--cream);border-radius:2px;display:block;}
  .mb-today{display:inline-flex;align-items:center;gap:8px;background:var(--raised);color:var(--cream);
    border:1px solid var(--border);border-radius:var(--r-input);padding:7px 15px 7px 10px;
    font-family:var(--rounded);font-weight:700;font-size:15px;cursor:pointer;}
  .mb-today img{height:26px;width:auto;display:block;}

  .nav-scrim{display:block;position:fixed;inset:0;z-index:50;background:rgba(6,8,11,0.6);
    opacity:0;pointer-events:none;transition:opacity .22s ease;}
  .nav-scrim.open{opacity:1;pointer-events:auto;}
  .nav-drawer{display:flex;position:fixed;top:0;left:0;bottom:0;z-index:51;width:284px;max-width:84vw;
    background:var(--ink);border-right:1px solid var(--border);transform:translateX(-100%);
    transition:transform .24s ease;flex-direction:column;gap:22px;padding:26px 22px;}
  .nav-drawer.open{transform:translateX(0);}
  .nav-drawer .nav{margin-top:0;}          /* drawer nav hugs the wordmark */
  .nav-drawer .admin{margin-top:auto;}     /* Betsy anchored at the bottom */
}

@media(max-width:880px){
  /* Brain Purge orb in the mobile drawer — prominent but sized for the narrower
     284px drawer (the desktop 300px would overflow). Tighter spacing for mobile. */
  .nav-drawer .orb{width:228px;margin:0 auto;}
  .nav-drawer .orb-wrap{padding:10px 0 26px;}
}