/* ---- shell ---- */
#app{display:flex;min-height:100dvh}
.rail{width:var(--rail);flex:none;background:var(--surface);border-right:1px solid var(--line);
  display:flex;flex-direction:column;position:sticky;top:0;height:100dvh;z-index:6}
.rail-top{display:flex;align-items:center;padding:20px 18px 16px}
.brand{font:600 16.5px var(--sans);letter-spacing:-.02em;line-height:1.15}
.brand em{display:block;font:400 10.5px var(--mono);letter-spacing:.15em;color:var(--faint);
  font-style:normal;margin-top:2px;text-transform:uppercase}
nav{display:flex;flex-direction:column;gap:1px;padding:6px 10px;overflow-y:auto;flex:1;
  scrollbar-width:thin}
nav button{display:flex;align-items:center;gap:10px;cursor:pointer;background:none;border:0;
  border-radius:9px;color:var(--muted);padding:10px 12px;font-size:14.5px;text-align:left;
  width:100%;transition:background .14s,color .14s}
nav button:hover{background:var(--surface-2);color:var(--text)}
nav button.on{background:var(--surface-2);color:var(--text);font-weight:500}
nav button:focus-visible{outline:2px solid var(--h4);outline-offset:-2px}
/* THE RAIL LOST ITS CIRCLES (2026-09-06, Solomon: "get rid of the circles at
   the top left, the old logo or design"). Two things went: the aura mark beside
   the wordmark, and a 9px gradient dot on every nav row. The dot's only job was
   an active state the row's own background and weight already carry — so the
   rail was drawing eleven decorative circles to say something it was also
   saying twice over. The active row now gets one thin accent edge, which is
   what it should always have been: an indicator, not an ornament. */
nav button{position:relative}
nav button.on::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;
  border-radius:0 2px 2px 0;background:var(--h1)}
nav #qn{margin-left:auto;font:500 10.5px var(--mono);color:var(--h1)}
nav .more-toggle{color:var(--faint);font-size:13px;letter-spacing:.02em}
nav .more-toggle .chev{margin-left:auto;font-size:10px;transition:transform .18s ease}
nav .more-toggle[aria-expanded="true"] .chev{transform:rotate(180deg)}
nav .more-toggle:hover{color:var(--muted)}
nav .nav-more{display:flex;flex-direction:column;gap:1px;margin-top:2px;padding-left:8px;border-left:1px solid var(--line);margin-left:14px}
nav .nav-more[hidden]{display:none}
nav .nav-more button{font-size:13.5px;color:var(--faint);padding:8px 12px}
nav .nav-more button.on{color:var(--text);background:var(--surface-2)}
/* .new-pip — small pulsing dot on freshly-shipped rail items (Automations
   right now). Uses the client's own accent (--h1) so it feels native to
   the warm-paper aesthetic rather than a pasted-in marketing effect. */
nav .new-pip{margin-left:auto;width:6px;height:6px;border-radius:50%;
  background:var(--h1);box-shadow:0 0 0 rgba(255,46,139,0);
  animation:os-new-pulse 4.2s ease-in-out infinite;flex:none}
@keyframes os-new-pulse{
  0%,100%{opacity:.55;transform:scale(1);box-shadow:0 0 0 rgba(255,46,139,0)}
  50%   {opacity:1;   transform:scale(1.25);box-shadow:0 0 10px rgba(255,46,139,.5)}
}
@media(prefers-reduced-motion:reduce){nav .new-pip{animation:none;opacity:.8}}
.rail-foot{border-top:1px solid var(--line);padding:12px 18px 16px;display:flex;
  align-items:center;gap:10px}
#built{font:400 10px var(--mono);color:var(--faint);opacity:.55}
.out{margin-left:auto;cursor:pointer;background:none;border:0;color:var(--faint);font-size:12.5px}
.out:hover{color:var(--text)}
.railbtn{display:none}
main{flex:1;min-width:0;position:relative;padding:34px 0 80px}
main > .wrap{position:relative;z-index:1}
.page{display:none}.page.on{display:block}
h2{font:600 27px/1.2 var(--sans);margin:0 0 6px;letter-spacing:-.028em}
.lede{color:var(--muted);font-size:14.5px;margin:0 0 22px;line-height:1.6;max-width:62ch}

/* the rail folds to a scrolling top bar on small screens — no JS drawer to break */
@media(max-width:820px){
  #app{display:block}
  .rail{width:auto;height:auto;position:sticky;top:0;flex-direction:row;align-items:center;
    border-right:0;border-bottom:1px solid var(--line);gap:4px;padding-right:10px}
  .rail-top{padding:11px 14px}
  .brand em{display:none}
  nav{flex-direction:row;overflow-x:auto;padding:8px 4px;gap:2px;scrollbar-width:none}
  nav::-webkit-scrollbar{display:none}
  nav button{width:auto;white-space:nowrap}
  nav button.on::before{left:6px;right:6px;top:auto;bottom:0;width:auto;height:2px;
    border-radius:2px 2px 0 0}
  /* Horizontal scroll bar on mobile — the dropdown doesn't earn its place
     when everything can fit in a scroll. Show all rail items inline. */
  nav .more-toggle{display:none}
  nav .nav-more{display:flex !important;flex-direction:row;border-left:0;margin-left:0;padding-left:0;gap:2px}
  nav .nav-more[hidden]{display:flex !important}
  .rail-foot{border-top:0;padding:0 4px 0 0}
  #built{display:none}
  .fieldbg{inset:0}
}