/* AutoStacc's frame: skip link, sidebar (an icon rail that expands on computers, a drawer on phones), top bar, tool */
/* buttons, the account menu (js/account-nav.js, on platform and project pages) and footer. Drawn by js/layout.js on */
/* platform pages; project pages add css/project-frame.css. */


:root { --side-wide: 248px; --side-rail: 68px; --side: var(--side-rail); --topbar: 58px; }
.side-open { --side: var(--side-wide); }

/* ---------- skip link: hidden until a keyboard user tabs to it ---------- */
.skip-link {
  position: fixed;
  top: 8px; left: 8px;
  z-index: 300;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--teal);
  color: var(--on-accent);
  font-weight: 700;
  transform: translateY(-160%);
  transition: transform .12s var(--snap);
}
.skip-link:focus { transform: none; color: var(--on-accent); }

/* the page fills the window, so a short page keeps its footer at the bottom */
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.site-frame ~ main, .project-frame ~ main { flex: 1 0 auto; }
body:has(> .site-frame) { padding-left: var(--side); }

/* ---------- sidebar ---------- */
.side {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 60;
  width: var(--side);
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 16px 12px 24px;
  overflow-y: auto;
  background: color-mix(in srgb, var(--panel) 72%, transparent);
  -webkit-backdrop-filter: var(--blur-bar, blur(20px));
  backdrop-filter: var(--blur-bar, blur(20px));
  border-right: 1px solid var(--glass-edge, var(--line));
  font-family: var(--font);
  view-transition-name: side;
}
.side-close { display: none; }
.brand { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 8px; border-radius: 10px; color: var(--text); font-size: 1.2rem; letter-spacing: -.02em; }
.brand:hover { color: var(--text); background: var(--panel-2); }
.brand b { color: var(--teal); font-weight: 750; }
.brand-name { font-weight: 650; }
.mark { width: 30px; height: 30px; flex: none; }
.mark rect:nth-child(1) { fill: var(--teal); }
.mark rect:nth-child(2) { fill: var(--amber); }
.mark rect:nth-child(3) { fill: var(--coral); }
.mark rect:nth-child(4) { fill: var(--violet); }
/* the blocks stack in when a page opens */
@media (prefers-reduced-motion: no-preference) {
  .brand .mark rect { animation: block-in .45s var(--snap) both; transform-box: fill-box; }
  .brand .mark rect:nth-child(2) { animation-delay: .06s; }
  .brand .mark rect:nth-child(3) { animation-delay: .12s; }
  .brand .mark rect:nth-child(4) { animation-delay: .18s; }
  .brand:hover .mark rect { animation: wiggle .4s var(--snap); }
}
@keyframes block-in { from { opacity: 0; transform: translateX(-40%); } to { opacity: 1; transform: none; } }
@keyframes wiggle { 40% { transform: translateX(8%); } 70% { transform: translateX(-4%); } }

.side-label { margin: 10px 10px 6px; font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.side-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.side-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--text);
  font-weight: 550;
  position: relative;
}
.side-nav a:hover { background: var(--panel-2); color: var(--text); }
/* the current page reads like a selected track: tinted row with a coloured edge */
.side-nav [aria-current] { background: color-mix(in srgb, var(--teal) 12%, var(--panel)); }
.side-nav [aria-current]::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--teal); }
.side-icon { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--teal); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.side-icon-stacc { stroke: var(--amber); }
.side-icon-about { stroke: var(--violet); }
.side-icon-all { stroke: var(--lime); }
.side-icon-community { stroke: var(--coral); }
.side-icon-creators { stroke: var(--amber); }
/* expand/collapse, at the foot of the sidebar (computers only) */
.side-collapse {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-weight: 550;
  cursor: pointer;
}
.side-collapse:hover { background: var(--panel-2); color: var(--text); }
.side-collapse-icon { width: 20px; display: grid; place-items: center; }
.side-collapse-icon::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .2s var(--snap); }
.side-open .side-collapse-icon::before { transform: rotate(135deg); }
/* the rail: icons only, names on hover (title) and for screen readers */
@media (min-width: 901px) {
  :root:not(.side-open) .side { padding-inline: 10px; align-items: stretch; }
  :root:not(.side-open) .side .side-text,
  :root:not(.side-open) .side-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  :root:not(.side-open) .side-nav a, :root:not(.side-open) .side-collapse, :root:not(.side-open) .brand { justify-content: center; padding-inline: 0; }
  :root:not(.side-open) .side-nav ul + .side-label + ul,
  :root:not(.side-open) .side-nav ul + div > .side-label + ul { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
}

/* ---------- top bar ---------- */
.site-frame { display: contents; }
/* Before js/layout.js draws the frame, its space is kept (top bar, sidebar rail, phone bar), so nothing jumps when it
   appears. Project pages draw their own frame (css/project-frame.css). */
body:not([data-project]) > #site-header:empty { display: block; height: var(--topbar); }
body:not([data-project]):has(> #site-header:empty) { padding-left: var(--side); }
.side-scrim { display: none; }
/* The page fills the screen, so the footer (drawn by js/layout.js) and late lists settle below the fold, not in view. */
body:not([data-project]) > main.platform { min-height: calc(100svh - var(--topbar)); }
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--topbar);
  padding: 0 20px;
  /* frosted but dense: browsers may skip the blur for text, so a page's big title scrolling under a thinner bar read
     through it (owner, 2026-10-27); colour still glows through */
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  -webkit-backdrop-filter: var(--blur-bar, blur(20px));
  backdrop-filter: var(--blur-bar, blur(20px));
  border-bottom: 1px solid var(--glass-edge, var(--line));
  font-family: var(--font);
  view-transition-name: topbar;
}
.menu-toggle, .topbar-brand { display: none; }
.topbar-tools { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.tool-link, .theme-switch, .snd {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size: .9rem;
  font-weight: 550;
  cursor: pointer;
  white-space: nowrap;
  text-shadow: none;
}
.tool-link:hover, .theme-switch:hover, .snd:hover { border-color: var(--teal); color: var(--text); }
.tool-link[aria-current] { border-color: var(--teal); background: color-mix(in srgb, var(--teal) 12%, var(--panel)); }
/* "Create account": the one filled tool, so a new visitor sees where to start (phones keep it on the login page) */
.tool-cta { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--on-accent); }
.tool-cta:hover { color: var(--on-accent); box-shadow: 0 3px 0 var(--stack); }
.cart-count { font-family: var(--mono); font-weight: 700; color: var(--teal); }
.cart-count:not(:empty) { display: inline-block; margin-left: .3em; }
.snd { font-family: var(--mono); font-size: .78rem; letter-spacing: .04em; }
.snd[aria-pressed="true"] { border-color: var(--teal); color: var(--teal); }
/* theme switch: a half-filled dot (auto), sun-ish disc (light) or moon-ish disc (dark) */
.theme-icon { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
[data-theme-cycle][data-mode="light"] .theme-icon { background: transparent; }
[data-theme-cycle][data-mode="dark"] .theme-icon { background: currentColor; }
.account-theme, .theme-foot { gap: 8px; }
@keyframes menu-out { to { opacity: 0; transform: scale(.96); } }
.theme-foot { display: inline-flex; align-items: center; margin-left: 12px; vertical-align: middle; }

/* ---------- account menu: your initial in the top bar, opening a short list of account destinations ---------- */
.account-menu { position: relative; }
.account-button { display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--panel); cursor: pointer; }
.account-button:hover, .account-button[aria-expanded="true"] { border-color: var(--teal); }
.account-button:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.avatar { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--teal); color: var(--on-accent); font-family: var(--font); font-size: .9rem; font-weight: 750; }
.account-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 70;
  width: min(280px, calc(100vw - 24px));
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  /* nearly solid: inside the blurred top bar its own blur can't reach the page */
  background: color-mix(in srgb, var(--panel) 95%, transparent);
  -webkit-backdrop-filter: var(--blur-bar, blur(20px));
  backdrop-filter: var(--blur-bar, blur(20px));
  border-color: var(--glass-edge, var(--line));
  box-shadow: var(--shadow);
  font-family: var(--font);
  text-shadow: none;
}
.account-who { display: grid; gap: 2px; margin: 0 0 6px; padding: 8px 10px 10px; border-bottom: 1px solid var(--line); font-size: .9rem; }
.account-who strong { color: var(--text); font-weight: 650; }
.account-who span { color: var(--muted); font-size: .82rem; overflow-wrap: anywhere; }
.account-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.account-panel a, .account-signout, .account-theme { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; font-size: .92rem; font-weight: 550; text-align: left; cursor: pointer; }
.account-panel a:hover, .account-signout:hover, .account-theme:hover { background: var(--panel-2); color: var(--text); }
.account-panel [aria-current] { background: color-mix(in srgb, var(--teal) 12%, var(--panel)); }
.account-signout { margin-top: 6px; border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .account-panel:not([hidden]) { transform-origin: top right; animation: menu-in .18s var(--snap); }
  .account-panel.closing { animation: menu-out .14s ease-in forwards; }
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--glass-edge, var(--line)); padding: 28px 0 36px; background: color-mix(in srgb, var(--panel) 55%, transparent); color: var(--muted); font-family: var(--font); font-size: .92rem; }
.site-footer .wrap { display: grid; gap: 14px; }
/* platform footer: the mark and tagline, then link columns, then the small print */
.footer-grid { grid-template-columns: minmax(200px, 1.4fr) repeat(3, minmax(110px, 1fr)); gap: 24px 32px; align-items: start; }
.footer-brand .brand { display: inline-flex; padding: 0; }
.footer-brand .brand:hover { background: none; }
.footer-brand p { margin: 8px 0 0; }
.footer-title { margin: 0 0 6px; font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.footer-col a { color: var(--text); }
.footer-legal { grid-column: 1 / -1; margin: 8px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: .85rem; }
.footer-project, .footer-platform { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.footer-project > span { font-weight: 650; color: var(--text); }
.socials { display: flex; gap: 6px 16px; flex-wrap: wrap; }
.site-footer a { display: inline-block; padding-block: 4px; color: var(--muted); text-shadow: none; }
@media (max-width: 900px) {
  .site-footer a, .theme-foot { display: inline-flex; align-items: center; min-height: 44px; }
  /* phones: each column's links flow side by side, so 44px targets don't make the footer endless */
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-col ul { display: flex; flex-wrap: wrap; gap: 0 18px; }
}
.site-footer a:hover { color: var(--teal); }

/* ---------- phones and small tablets: the sidebar becomes a drawer ---------- */
@media (max-width: 900px) {
  body:has(> .site-frame), body:not([data-project]):has(> #site-header:empty) { padding-left: 0; }
  .side, .side-open .side {
    width: min(78vw, 280px);
    gap: 10px;
    padding: 12px 10px 20px;
    transform: translateX(-105%);
    transition: transform .22s var(--snap);
    box-shadow: var(--shadow);
  }
  .side.open { transform: none; }
  .side-close {
    display: inline-flex;
    align-self: flex-end;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 12px;
    right: 10px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
  }
  /* The dim and blur behind the drawer fade in and out with its slide (js/layout.js toggles .open). */
  .side-scrim { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, .32); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .22s var(--snap), visibility 0s linear .22s; }
  .side-scrim.open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .22s var(--snap), visibility 0s; }
  html.menu-open { overflow: hidden; }
  .side-close:hover { background: var(--panel-2); }
  .side-collapse { display: none; }
  .side .brand { padding-right: 48px; }
  .side-label { margin-top: 6px; }
  .topbar { padding: 0 12px; }
  /* The bottom quick-links bar has the Menu button, so the top bar shows the logo instead of a second menu button. */
  .menu-toggle { display: none; }
  .topbar-brand { display: inline-flex; align-items: center; min-height: 44px; padding: 4px 8px 4px 4px; }
  .topbar-brand .mark { width: 34px; height: 34px; }
}
@media (max-width: 700px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .tool-link, .theme-switch, .snd { padding: 6px 10px; min-height: 44px; }
  .topbar-tools { gap: 4px; }
  .tool-cta { display: none; }
}
/* the narrowest phones: the top bar keeps every tool on screen (project pages add the sound switch) */
@media (max-width: 380px) {
  .topbar { gap: 6px; padding: 0 8px; }
  .topbar-tools { gap: 3px; min-width: 0; }
  .tool-link, .theme-switch, .snd { padding: 6px 8px; font-size: .82rem; }
  .snd { font-size: .68rem; }
}
@media (prefers-reduced-motion: reduce) {
  .side, .side-scrim, .side-scrim.open { transition: none; }
}

/* ---------- phones: a quick-links bar within thumb reach (Store, Projects, Community, Your Stacc or Log in, Menu) ---------- */
.tabbar { display: none; }
@media (max-width: 900px) {
  .tabbar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 40;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    padding-bottom: env(safe-area-inset-bottom);
    background: color-mix(in srgb, var(--panel) 72%, transparent);
    -webkit-backdrop-filter: var(--blur-bar, blur(20px));
    backdrop-filter: var(--blur-bar, blur(20px));
    border-top: 1px solid var(--glass-edge, var(--line));
    font-family: var(--font);
    view-transition-name: tabbar;
  }
  .tabbar a, .tabbar button {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 3px;
    min-height: 56px;
    padding: 6px 4px;
    background: none;
    border: 0;
    color: var(--muted);
    font: inherit;
    font-size: .7rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
  }
  /* five names share 320px: a long one shrinks to fit its column rather than push the bar sideways */
  .tabbar span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tabbar [hidden] { display: none; }
  .tabbar a[aria-current], .tabbar button[aria-current], .tabbar a:hover, .tabbar button:hover { color: var(--text); }
  .tabbar a[aria-current] .side-icon, .tabbar button[aria-current] .side-icon { stroke-width: 2.4; }
  .tabbar .side-icon { width: 22px; height: 22px; }
  body:has(> .site-frame), body:not([data-project]):has(> #site-header:empty) { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
}
@media (max-width: 380px) { .tabbar a, .tabbar button { padding-inline: 1px; font-size: .64rem; } }
/* blur isn't motion: only visitors who ask for less transparency get a solid bar */
@media (prefers-reduced-transparency: reduce) { .tabbar { background: var(--panel); -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* the cart count bumps when something is added (GS.showCartCount) */
@media (prefers-reduced-motion: no-preference) {
  .cart-count.bump { animation: count-bump .42s var(--snap); }
}
@keyframes count-bump { 30% { transform: scale(1.45); color: var(--teal); } }

/* the store's notice (js/site-notice.js, set in Control Center › Settings › Switches): one calm line above the page */
.site-notice { margin: 0; padding: 10px 20px; text-align: center; font-family: var(--font); font-size: .92rem; font-weight: 600;
  color: var(--text); background: color-mix(in srgb, var(--amber) 22%, var(--panel)); border-bottom: 1px solid var(--line); }

/* ---------- press feedback (owner, 2026-10-22): touch gets a quick press on the frame's controls, like a button ---------- */
@media (prefers-reduced-motion: no-preference) {
  .side-nav a, .tabbar a, .tabbar button, .tool-link, .theme-switch, .brand, .topbar-brand, .account-panel a, .account-signout { transition: transform .08s ease-out, background-color .12s; }
  .side-nav a:active, .tabbar a:active, .tabbar button:active, .tool-link:active, .theme-switch:active, .brand:active, .topbar-brand:active, .account-panel a:active, .account-signout:active { transform: scale(.96); }
}
.side-nav a:active, .tabbar a:active, .tabbar button:active, .account-panel a:active, .account-signout:active { background: var(--panel-2); }
/* Lighter effects (html.fx-lite): the frame's bars are nearly solid instead of frosted. */
.fx-lite :is(.topbar, .side, .tabbar) { background: color-mix(in srgb, var(--panel) 96%, transparent); }
/* The bell (js/account-bell.js): what waits on you, beside the account menu; its list reuses the account panel. */
.bell { position: relative; }
.bell-link { gap: 4px; }
.bell-panel a { justify-content: space-between; gap: 10px; }
.bell-panel .small-print { margin: 0; padding: 8px 10px; }
.bell-count { min-width: 1.4em; padding: 0 5px; border-radius: 999px; background: var(--coral); color: #fff; font-family: var(--mono); font-size: .72rem; font-weight: 700; text-align: center; }

/* The account menu's "Become a creator" line for people without a creator (js/account-nav.js). */
.account-extra { margin: 6px 0 0; padding: 6px 0 0; border-top: 1px solid var(--line); font-size: .9rem; }

/* ---------- the site-wide search in the top bar (js/site-search.js; owner, 2026-10-27, #230) ----------
   One slim bar in the middle of the header; on phones a full-width row under the logo and tools. Scoped to a page
   with its own search, it stands in for that page's search box, which hides. */
.site-search { position: relative; display: flex; align-items: center; flex: 1 1 auto; max-width: 640px; min-width: 0; height: 40px;
  margin-inline: auto 8px; padding: 0 4px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--bg) 70%, var(--panel)); }
.site-search:focus-within { border-color: var(--accent); }
.site-search-input { flex: 1; min-width: 0; height: 100%; padding: 0 10px; border: 0; background: transparent; color: var(--text); font: inherit; font-size: .95rem; outline: none; }
.site-search-input::-webkit-search-cancel-button { display: none; }
.site-search-scope { flex: none; min-height: 30px; margin-left: 2px; padding: 0 10px; border: 0; border-radius: 999px; background: var(--panel-2);
  color: var(--text); font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.site-search-scope[aria-pressed="false"] { background: transparent; color: var(--muted); border: 1px dashed var(--line); }
.site-search-filters { flex: none; min-height: 30px; padding: 0 10px; border: 0; border-left: 1px solid var(--line); background: transparent;
  color: var(--muted); font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; }
.site-search-filters:hover { color: var(--text); }
.site-search-filters[hidden] { display: none; }
.site-search-go { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.site-search-go:hover { color: var(--text); background: var(--panel-2); }
.site-search-suggest { position: absolute; z-index: 80; top: calc(100% + 6px); left: 0; right: 0; max-height: min(70vh, 520px); overflow: auto; padding: 6px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--panel); box-shadow: var(--shadow); text-shadow: none; }
.site-search-suggest[hidden] { display: none; }
.site-search-group > p { margin: 8px 10px 2px; font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.site-search-opt { display: grid; gap: 1px; padding: 7px 10px; border-radius: 8px; color: var(--text); text-decoration: none; }
.site-search-opt small { color: var(--muted); font-size: .78rem; }
.site-search-opt:hover, .site-search-opt[aria-selected="true"] { background: var(--panel-2); }
.site-search-suggest > .site-search-opt { margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; color: var(--accent); }
/* Scoped: the page's own search box sits in the bar (js/site-search.js); what's left of its form steps aside, and its
   suggestion list drops below the bar. */
.site-search-scoped :is(form[data-search-form], form.cm-search) { display: none; }
.site-search-input[hidden] { display: none; }
.site-search .suggest { position: absolute; z-index: 80; top: calc(100% + 6px); left: 0; right: 0; }
/* The community's panels sit in the header (js/community-kit.js), beside the bell (js/account-bell.js). */
.cm-header-tools { display: flex; gap: 2px; }
.cm-header-tools .cm-bar-button.btn { min-height: 40px; padding: 4px 10px; border: 0; background: transparent; color: var(--muted); font-size: .86rem; width: auto; }
.cm-header-tools .cm-bar-button[aria-expanded="true"], .cm-header-tools .cm-bar-button.btn:hover { background: var(--panel-2); color: var(--text); }
@media (max-width: 900px) {
  :root { --topbar: 106px; } /* set before the header is drawn, so the page doesn't jump when the search row appears */
  .has-site-search .topbar { flex-wrap: wrap; height: auto; min-height: var(--topbar); padding-block: 6px 8px; row-gap: 6px; }
  .has-site-search .site-search { order: 3; flex: 1 0 100%; max-width: none; margin: 0; }
  .has-site-search .topbar-tools { margin-left: auto; }
  .cm-header-tools .cm-bar-button.btn { padding: 4px 8px; font-size: .8rem; }
}
/* The header's Filters button opens the page's filters, so the page's own button steps aside with its search box. */
.site-search-scoped .browse-filter-toggle { display: none; }
/* On a computer the filters sit beside the results already, so the header's Filters button is only for phones and tablets. */
@media (min-width: 901px) { .site-search-filters { display: none; } }

/* Whatever scrolls into view (keyboard focus, a jump link) clears the sticky top bar, and on phones the bottom bar too
   (owner, 2026-10-28, #230: the phone header is two rows tall with the search bar). */
html { scroll-padding-top: calc(var(--topbar) + 8px); }
@media (max-width: 900px) { html { scroll-padding-bottom: calc(72px + env(safe-area-inset-bottom)); } }