/* Liquid glass upgrade (2026-09-26 v4): the workbench header is a floating pane
   of light frosted glass with a specular rim and a cool shadow. The sticky
   strip behind it stays transparent at the top and only turns opaque at its
   bottom edge, so scrolled content frosts through the material instead of
   sliding out from under a hard band. */
.topbar{
  --bar-ink:#16202f;
  --bar-muted:#5b6b81;
  --bar-focus:#2a6fd6;
  --bar-veil:#ffffff;
  --bar-gap-t:16px;
  --bar-gap-b:14px;
  --bar-gap-x:24px;
  --bar-pad-x:24px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  column-gap:16px;
  height:92px;
  margin:0;
  padding:var(--bar-gap-t) calc(var(--bar-gap-x) + var(--bar-pad-x)) var(--bar-gap-b);
  position:sticky;top:0;z-index:70;
  border:0;
  border-radius:0;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0 60%,var(--bar-veil) 96%);
  box-shadow:none;
  -webkit-backdrop-filter:blur(28px) saturate(175%);
  backdrop-filter:blur(28px) saturate(175%);
}

/* The floating pane. Negative z-index paints it above the strip background but
   below the brand, navigation and actions. */
.topbar::before{
  content:"";
  position:absolute;
  inset:var(--bar-gap-t) var(--bar-gap-x) var(--bar-gap-b);
  z-index:-1;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.88);
  background:linear-gradient(152deg,rgba(255,255,255,var(--v4-glass-alpha-top,.50)) 0%,rgba(255,255,255,var(--v4-glass-alpha-mid,.26)) 46%,rgba(226,238,253,var(--v4-glass-alpha-tint,.31)) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.98),inset 0 -1px 0 rgba(255,255,255,.5),0 0 0 1px rgba(158,180,209,.34),0 16px 34px -18px rgba(38,58,94,.30),0 4px 12px rgba(38,58,94,.08);
  -webkit-backdrop-filter:blur(30px) saturate(190%);
  backdrop-filter:blur(30px) saturate(190%);
}

[data-theme="dark"] .topbar{
  --bar-ink:#f4f7fc;
  --bar-muted:rgba(230,237,248,.70);
  --bar-focus:#9cc4ff;
  --bar-veil:#101114;
}

[data-theme="dark"] .topbar::before{
  border-color:rgba(255,255,255,.18);
  background:linear-gradient(152deg,rgba(255,255,255,var(--v4-glass-alpha-dark-top,.24)) 0%,rgba(255,255,255,var(--v4-glass-alpha-dark-mid,.14)) 46%,rgba(75,99,131,var(--v4-glass-alpha-dark-tint,.15)) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -1px 0 rgba(255,255,255,.06),0 0 0 1px rgba(255,255,255,.08),0 16px 32px -16px rgba(0,0,0,.65),0 4px 12px rgba(0,0,0,.28);
}

/* The grey workbench backdrop only exists on wide screens outside home/essay,
   so the veil matches it there and stays white everywhere else. */
@media(min-width:761px){
  html:not([data-theme="dark"]) body:not([data-view="home"]):not([data-view="essay"]) .topbar{--bar-veil:#f3f5f8}
}

.topbar::after{content:none}

@media(min-width:901px){
  .layout>.sidebar{top:92px;max-height:calc(100vh - 92px)}
}

/* The home landing is a full-bleed story scene — no top bar there at all. */
body[data-view="home"] .topbar{display:none!important}

.topbar .brand{
  justify-self:start;
  align-items:center;
  height:40px;
  min-width:0;
  color:var(--bar-ink);
  font-size:24px;
  font-weight:700;
  line-height:1;
  letter-spacing:-.04em;
  text-shadow:none;
}

.topbar .global-nav{
  justify-self:center;
  display:flex;
  align-items:center;
  gap:6px;
  margin:0;
}

.topbar .global-nav button{
  position:relative;
  height:34px;
  padding:0 14px;
  border-radius:999px;
  color:var(--bar-muted);
  font-size:14px;
  font-weight:500;
  letter-spacing:0;
  white-space:nowrap;
  background:transparent;
  box-shadow:none;
  transition:color .2s ease,background .2s ease;
}

.topbar .global-nav button::before,
.topbar .global-nav button::after{content:none}

.topbar .global-nav button:hover{
  color:var(--bar-ink);
  background:rgba(255,255,255,.62)!important;
}

.topbar .global-nav button.active{color:var(--bar-ink);font-weight:650}

/* Sliding capsule (Smooth Option Switcher): the brightest pane on the glass. */
.topbar .global-nav.v4-smooth-switch>.v4-switch-indicator{
  border-radius:999px;
  border:1px solid rgba(255,255,255,var(--v4-glass-alpha-border,.82));
  background:linear-gradient(180deg,rgba(255,255,255,var(--v4-glass-alpha-top,.50)),rgba(243,248,255,var(--v4-glass-alpha-tint,.31)));
  box-shadow:0 0 0 1px rgba(163,183,209,.18),0 5px 13px rgba(38,58,94,.13),inset 0 1px 0 rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(var(--v4-glass-blur,22px)) saturate(175%);
  backdrop-filter:blur(var(--v4-glass-blur,22px)) saturate(175%);
}
[data-theme="dark"] .topbar .global-nav.v4-smooth-switch>.v4-switch-indicator{
  border-color:rgba(255,255,255,.24);
  background:linear-gradient(180deg,rgba(255,255,255,var(--v4-glass-alpha-dark-top,.24)),rgba(255,255,255,var(--v4-glass-alpha-dark-mid,.14)));
  box-shadow:0 0 0 1px rgba(255,255,255,.10),0 6px 16px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.35);
}
.topbar .global-nav.v4-smooth-switch>button{color:var(--bar-muted)}
.topbar .global-nav.v4-smooth-switch>button.active,[data-theme="dark"] .topbar .global-nav.v4-smooth-switch>button.active{color:var(--bar-ink)}
.topbar .global-nav.v4-smooth-switch>button:hover{background:transparent!important}

.topbar .top-actions{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  margin-left:0;
}

.topbar .search-trigger{
  height:38px;
  min-width:0;
  padding:0 15px;
  border:1px solid rgba(255,255,255,.92);
  border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.60));
  color:var(--bar-ink);
  font-size:13px;
  box-shadow:0 0 0 1px rgba(163,183,209,.22),0 4px 10px rgba(38,58,94,.14),inset 0 1px 0 #fff;
  transition:background .2s ease,box-shadow .2s ease;
}

.topbar .search-trigger:hover{
  background:linear-gradient(180deg,#fff,rgba(255,255,255,.78));
  box-shadow:0 0 0 1px rgba(163,183,209,.28),0 6px 15px rgba(38,58,94,.18),inset 0 1px 0 #fff;
}

[data-theme="dark"] .topbar .search-trigger{
  border-color:rgba(255,255,255,.20);
  background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.08));
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 6px 14px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.26);
}

.topbar .search-trigger:focus-visible,
.topbar .global-nav button:focus-visible{
  outline:2px solid var(--bar-focus,#2a6fd6);
  outline-offset:2px;
}

.topbar .search-trigger .ico{width:16px;height:16px}

/* Mobile bottom bar: sliding glass capsule. */
#mobileNav.v4-smooth-switch>.v4-switch-indicator{
  border-radius:15px;
  border:1px solid rgba(255,255,255,.9);
  background:linear-gradient(180deg,rgba(255,255,255,var(--v4-glass-alpha-top,.50)),rgba(255,255,255,var(--v4-glass-alpha-tint,.31)));
  box-shadow:0 8px 18px rgba(20,30,50,.13),inset 0 1px 0 rgba(255,255,255,.88);
  -webkit-backdrop-filter:blur(var(--v4-glass-blur,22px)) saturate(175%);
  backdrop-filter:blur(var(--v4-glass-blur,22px)) saturate(175%);
}
[data-theme="dark"] #mobileNav.v4-smooth-switch>.v4-switch-indicator{
  border-color:rgba(255,255,255,.18);
  background:linear-gradient(145deg,rgba(255,255,255,var(--v4-glass-alpha-dark-top,.24)),rgba(255,255,255,var(--v4-glass-alpha-dark-mid,.14)));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 6px 16px rgba(0,0,0,.3);
}
#mobileNav.v4-smooth-switch>button.active{color:var(--v4-blue,#06c)}

/* Mobile hardening: the smooth-switch container is position:relative, which
   would pull the bottom bar out of its fixed slot — pin it back. Segmented
   labels must never wrap into vertical stacks on narrow screens. */
#mobileNav.v4-smooth-switch{position:fixed}
.v4-segmented button{white-space:nowrap}
@media(max-width:760px){.v4-segmented{max-width:100%;overflow-x:auto}}

@media(max-width:1100px){
  .topbar{--bar-gap-t:14px;--bar-gap-b:12px;--bar-gap-x:18px;--bar-pad-x:20px;height:88px;column-gap:12px;padding:var(--bar-gap-t) calc(var(--bar-gap-x) + var(--bar-pad-x)) var(--bar-gap-b)}
  .topbar .global-nav{gap:6px}
  .topbar .global-nav button{padding:0 14px}
}

/* 761-900px: the navigation is hidden by the workbench rules, so the bar keeps
   two zones and the search stays pinned to the right. */
@media(min-width:761px) and (max-width:900px){
  .topbar{grid-template-columns:1fr auto;column-gap:14px;padding:var(--bar-gap-t) calc(var(--bar-gap-x) + var(--bar-pad-x)) var(--bar-gap-b)!important}
}

@media(max-width:760px){
  .topbar{--bar-gap-t:12px;--bar-gap-b:10px;--bar-gap-x:12px;--bar-pad-x:14px;grid-template-columns:1fr auto;column-gap:10px;height:78px;padding:var(--bar-gap-t) calc(var(--bar-gap-x) + var(--bar-pad-x)) var(--bar-gap-b)}
  .topbar::before{border-radius:18px}
  .topbar .global-nav{display:none}
  .topbar .brand{height:36px;font-size:21px}
  .topbar .search-trigger{
    width:36px;
    height:36px;
    padding:0;
    justify-content:center;
    border-radius:50%;
  }
  .topbar .search-trigger .ico{display:inline-flex;width:17px;height:17px}
}

@media(prefers-reduced-motion:reduce){
  .topbar *{transition:none!important}
}

html.reduce-motion .topbar *{transition:none!important}