/* ============================================================
   SHARED TOP BAR — identical geometry on the research (index)
   and architecture pages. One master, two palettes.
   Colours arrive as semantic tokens defined per page:
     --tbbg    bar background
     --tbline  hairline / border
     --tbpanel panel fills (switcher, toggle button)
     --tbacc   accent (diamond, status dot, hover)
     --tbmut   muted text
   ============================================================ */
.topbar{position:sticky; top:0; z-index:60; background:var(--tbbg);
  backdrop-filter:blur(10px); border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease);}
.topbar.stuck{border-bottom-color:var(--tbline);}
.topbar .wrap{max-width:1218px; margin:0 auto; padding-inline:var(--pad);}
.topbar-in{display:flex; align-items:center; justify-content:space-between; height:56px; gap:16px;}

/* brand — Barlow Condensed, identical on both pages */
.brand{font-family:"Barlow Condensed",var(--fd),sans-serif; font-weight:700; font-size:18px;
  letter-spacing:.09em; text-transform:uppercase; line-height:1.6;
  display:flex; align-items:center; gap:10px; white-space:nowrap; color:inherit;}
.brand em{font-style:normal; width:9px; height:9px; border:1.5px solid var(--tbacc);
  transform:rotate(45deg); flex:none;}

/* middle — page-specific content (status on research, section links on architecture) */
.topbar-mid{display:flex; align-items:center; min-width:0; overflow:hidden;}
.topbar-mid .status{font-family:var(--fm),monospace; font-size:.7rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--tbmut); display:flex; align-items:center; gap:10px; white-space:nowrap;}
.topbar-mid .status i{width:7px; height:7px; border-radius:50%; background:var(--tbacc);
  box-shadow:0 0 8px var(--tbacc); flex:none;}
.topbar-mid nav.sect{display:flex; align-items:center; gap:20px; white-space:nowrap;}
.topbar-mid nav.sect a{font-family:var(--fm),monospace; font-size:.7rem; letter-spacing:.05em;
  text-transform:uppercase; color:var(--tbmut); transition:color .2s;}
.topbar-mid nav.sect a:hover{color:var(--ink);}

/* end — site switcher, anchored right */
.topbar-end{display:flex; align-items:center; gap:12px; flex:none;}
.topbar-end .kbtn{display:none;}

/* notes pages — same topbar as the rest of the site, two notes-specific
   extras: the RSS link, and the theme toggle (notes pages have no left
   rail, so the toggle lives here on desktop). On mobile both move to a
   fixed bottom bar — the notes equivalent of the rail. */
body.notes .topbar-end .kbtn{display:inline-flex;}
body.notes .rss{display:inline-flex; align-items:center; gap:7px; font-family:var(--fm),monospace; font-size:.7rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--tbmut); border:1px solid var(--tbline);
  border-radius:999px; padding:7px 13px; background:var(--tbpanel); transition:.2s var(--ease); flex:none; white-space:nowrap;}
body.notes .rss:hover{color:var(--ink); border-color:var(--ir2); transform:translateY(-1px);}
body.notes .rss svg{width:12px; height:12px;}
body.notes .nbot{display:none;}

/* site switcher — geometry identical on both pages */
.swx{display:inline-flex; padding:3px; gap:2px; border:1px solid var(--tbline); border-radius:8px;
  background:var(--tbpanel); vertical-align:middle;}
.swx a{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.72rem;
  letter-spacing:.02em; padding:6px 11px; border-radius:6px; color:var(--tbmut);
  transition:.18s var(--ease); white-space:nowrap; line-height:1.6;}
.swx a:hover{color:var(--ink);}
.swx a[aria-current="page"]{background:var(--ink); color:var(--paper); font-weight:400;}

/* mobile: single-row topbar (brand + swx); the left rail becomes a fixed
   bottom bar holding the section links (dots with labels, horizontally
   scrollable when tight) plus the theme toggle at its right edge */
@media(max-width:980px){
  .topbar-in{flex-wrap:wrap; justify-content:flex-start; gap:6px 12px; height:auto; min-height:52px;
    padding-block:6px; overflow:visible;}
  .brand{flex:none;}
  .topbar-end{margin-left:auto; flex:none;}
  .swx{flex:none;}
  .swx a{padding:6px 7px; font-size:.68rem;}
  .topbar-end .kbtn{display:none;}
  .topbar-mid{order:3; width:100%; min-width:0; overflow-x:auto; overflow-y:hidden;}
  .topbar-mid nav.sect{display:none;}
  section[id]{scroll-margin-top:76px; scroll-margin-bottom:72px;}

  /* rail: fixed bottom bar — section links stay one thumb-hop away,
     theme toggle docked at the right end of the same bar */
  .rail{top:auto; bottom:0; left:0; right:0; width:auto; height:calc(56px + env(safe-area-inset-bottom));
    flex-direction:row; align-items:stretch; justify-content:flex-start;
    padding:0 0 env(safe-area-inset-bottom); gap:0; border-right:0; border-top:1px solid var(--tbline);
    background:var(--tbbg); backdrop-filter:blur(10px);}
  .rail .mark, .rail .track{display:none;}
  .rail nav{order:1; flex-direction:row; gap:0; margin:0; flex:1 1 auto; min-width:0; align-items:stretch;
    overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:thin;}
  .rail nav::-webkit-scrollbar{height:3px;}
  .rail nav::-webkit-scrollbar-track{background:transparent;}
  .rail nav::-webkit-scrollbar-thumb{background:var(--tbline); border-radius:2px;}
  .rail nav a{flex:1 1 auto; min-width:56px; width:auto; height:auto; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:5px; padding:7px 4px 5px;}
  .rail nav a i{width:7px; height:7px; flex:none;}
  .rail nav a span{position:static; transform:none; opacity:1; pointer-events:none; background:none;
    border:0; box-shadow:none; padding:0; font-size:.52rem; letter-spacing:.05em; line-height:1.2;
    color:var(--tbmut); text-align:center;}
  .rail nav a.on span{color:var(--ink);}
  .rail .kbtn{order:2; display:grid; place-items:center; flex:none; align-self:stretch; min-width:52px;
    font-size:.8rem; padding:0 14px; border:0; border-left:1px solid var(--tbline); border-radius:0;
    background:transparent; color:var(--tbmut);}
  .rail .kbtn:hover{color:var(--ink); background:color-mix(in srgb,var(--paper2) 55%,transparent);}
  body{padding-bottom:calc(56px + env(safe-area-inset-bottom));}

  /* notes: RSS + theme slide down out of the topbar into the bottom bar */
  body.notes .topbar-end .rss, body.notes .topbar-end .kbtn{display:none;}
  body.notes .nbot{display:flex; position:fixed; bottom:0; left:0; right:0; z-index:60;
    height:calc(56px + env(safe-area-inset-bottom)); padding:0 0 env(safe-area-inset-bottom);
    align-items:stretch; border-top:1px solid var(--tbline);
    background:var(--tbbg); backdrop-filter:blur(10px);}
  body.notes .nbot .rss{flex:1 1 auto; justify-content:center; border:0; border-radius:0;
    background:transparent; font-size:.74rem; letter-spacing:.12em; transform:none;}
  body.notes .nbot .rss svg{width:13px; height:13px;}
  body.notes .nbot .kbtn{display:grid; place-items:center; flex:none; align-self:stretch; min-width:56px;
    font-size:.8rem; padding:0 14px; border:0; border-left:1px solid var(--tbline); border-radius:0;
    background:transparent; color:var(--tbmut);}
  body.notes .nbot .kbtn:hover{color:var(--ink); background:color-mix(in srgb,var(--paper2) 55%,transparent);}
}