/* The site navigation — the margin rail, and the spine it folds into.
   ============================================================
   Replaces the visual half of the Google Sites sidebar replica. The outer
   element keeps its old hooks (`.gs-sidebar`, `#gs-sidebar`, `.gs-scrim`,
   `body.nav-open`) so the drawer below 1280px and the scripts that drive it
   are untouched; everything inside is new and prefixed `sn-`, so none of the
   old `.gs-l1` / `.gs-l2` / `.gs-chev` rules can reach it.

   Both halves of the site load this sheet — the templated pages by <link> in
   base.njk, the legacy pages injected by lib/legacy-chrome.mjs after their
   own inlined chrome <style>. That ordering is what lets it win: the nine
   style-*.css fragments each carry a byte-exact copy of the replica's
   sidebar rules, and rather than edit nine extractions, this sheet is loaded
   after them and scoped one class tighter (`.gs-sidebar.sn`).

   ---- the idea ----

   One continuous rule runs the height of the panel, the way a drafting
   margin runs down a sheet. Top-level labels sit against it and are gathered
   by it; children hang off a second, dashed rule one step in, each fastened
   with a short tick. Where you are is a filled accent square sitting *on*
   the rule — a position marker on a ruler, which is what a nav is.

   Nothing is folded away. All thirteen destinations and their eleven
   children are on screen at once, so the shape of the site is legible from
   any page and every link is one click rather than two.

   ---- the fold ----

   The button in the wordmark row collapses the panel to 48px: the ordinals
   and nothing else, with each section's name and children in a small ruled
   plate that opens beside it. The choice is remembered (localStorage
   `navFold`) and applied before first paint by lib/theme-bootstrap.mjs, for
   the same reason the theme is — a panel that resolves its width in a load
   handler has already painted at the other width, and the whole page slides
   sideways a second in.

   The rule does NOT continue into the folded state. It was there for one
   draft, on the argument that a rail which stays put reads as the words
   sliding away rather than as a second object. That argument cost half of a
   48px panel to a line with nothing hanging off it, and squeezed the only
   content the state has into the remainder. A margin rule is for things to
   hang from; with no labels there is nothing to hang, so it goes.

   ---- the type ----

   Fluid, and derived from the viewport rather than from rem.

   The site scales content type with the window so nobody has to zoom:
   site.css sets `html { font-size: clamp(16px, 11px + 0.55vw, 21.5px) }`.
   The trouble for a component that appears on every page is that the root
   is not one curve — it is four. The legacy pages do not load site.css;
   they take fluid-dense.css (100%–125%), or fluid-reading.css (100%–140%),
   or, on /help, nothing at all and a flat 16px. A nav sized in rem
   therefore rendered at four different sizes across the site.

   Sizing it in px fixed that and broke the point of the system: on a large
   display the nav stayed small while everything beside it grew.

   So the panel takes the site's own curve at 0.82 of its size, written
   against vw so no page's root can move it:

       site   clamp(16px,   11px + 0.55vw,  21.5px)
       nav    clamp(13px,    9px + 0.45vw,  17.5px)

   Identical on every page at a given window width, and it grows with the
   window like the rest of the site. Everything inside is in em, so the whole
   panel scales as one object.

   ---- the four things ----

     paper rather than a tinted card       --sn-paper
     a ruled edge and a hard offset cast   1.5px / 3px 3px 0 (the flyout)
     mono for anything that labels         --sn-mono
     ink plus one accent, and no third     --sn-ink / --sn-accent

   Borrowed rather than imported, as every other sheet in this language
   borrows them: the legacy pages do not load site.css and must not have to.

   ---- ground ----

   Paper, like the rest of the site. To put the panel back on the charcoal
   slab it used to sit on — which keeps the anchor the dark banner sits on,
   and is the one decision here that is purely taste — replace the six
   values under `.gs-sidebar.sn` with:

     --sn-paper: #191a20;  --sn-ink: #8f8f9c;  --sn-strong: #f5f5f8;
     --sn-soft: #c6c6d0;   --sn-faint: #4f4f5c; --sn-accent: #8a8aff;

   and drop the html.dark-mode block. Nothing else changes. */

/* ---- tokens ---- */
.gs-sidebar.sn {
  --sn-paper: #fffefb;
  --sn-ink: #55555f;
  --sn-strong: #111118;
  --sn-soft: #3f3f46;
  --sn-faint: #bab7b0;
  --sn-accent: #5a5ad1;
  --sn-hatch: rgba(60, 50, 40, 0.07);
  --sn-cast: rgba(60, 50, 40, 0.16);
  --sn-mono: "Roboto Mono", ui-monospace, Menlo, Consolas, monospace;
  /* Where the rule runs, and where the labels start beside it. Named because
     the marker, the ticks and the bands all have to land on the same two
     numbers, in both states. */
  --sn-rule: 1.85em;
  --sn-text: 2.85em;
}
html.dark-mode .gs-sidebar.sn {
  --sn-paper: #15151e;
  --sn-ink: #a8a8b4;
  --sn-strong: #f1f1f5;
  --sn-soft: #b3b3bc;
  --sn-faint: #4b4b5a;
  --sn-accent: #8a8aff;
  --sn-hatch: rgba(226, 226, 255, 0.05);
  --sn-cast: rgba(226, 226, 255, 0.09);
}

/* ---- the width, and what follows it ----
   One number drives the panel and the page beside it. site.css already
   offsets the templated pages with `body { margin-left: var(--sidebar-w) }`,
   so redeclaring the token on the folded root moves them; the legacy pages
   hardcode 250px in each style-*.css extraction, so they get an explicit
   override at a specificity those cannot reach. */
/* The column is fluid because the type is. Fixed at 250px it was right at
   one window width and wrong either side of it: at 1920 the type has grown
   to 17.5px and `instructor reports` — the longest child label, 10.8em of
   mono plus its indent — no longer fits on one line, so it wrapped.

   Sized off the same curve, so the longest label always has its line:
   16.2em of nav type, which is 145.8px + 7.29vw at the nav's 0.45vw slope,
   rounded up a little for slack. */
:root { --sidebar-w: clamp(224px, 152px + 7.3vw, 292px); }
html.nav-fold { --sidebar-w: 48px; }
/* Every legacy offset that was written against a 250px panel, restated
   against the token. There is no single rule to override: six of the nine
   fragments move the body, the help bot moves three fixed panes, and the
   report pages move a `.full-width-page` and a section bar and leave the
   body alone. Overriding only `body.standalone` — which is what a first
   pass did — left the report pages offset twice, at 250px by their own rule
   and again by the new one, and their content ran off the right edge.

   Each selector matches the fragment's own, plus one class, so it wins
   wherever the fragment set it and does nothing where the fragment did
   not. */
@media (min-width: 1280px) {
  /* six families move the body */
  body.standalone.sn-off-body { margin-left: var(--sidebar-w); }
  /* the help bot moves three fixed panes instead */
  body.standalone.sn-off-app #app,
  body.standalone.sn-off-app #scrim,
  body.standalone.sn-off-app #drawer { left: var(--sidebar-w); }
  /* the reports move their page wrapper and section bar, and leave the body
     where it is — which is why a blanket body rule offset them twice */
  body.standalone.sn-off-page .full-width-page {
    margin-left: var(--sidebar-w);
    max-width: calc(100vw - var(--sidebar-w));
  }
  body.standalone.sn-off-page .section-navbar-wrapper {
    width: calc(100vw - var(--sidebar-w));
  }
}

.gs-sidebar.sn {
  width: var(--sidebar-w);
  background: var(--sn-paper);
  border-right: 1.5px solid var(--sn-ink);
  font-family: var(--sn-mono);
  font-size: clamp(13px, 9px + 0.45vw, 17.5px);
  padding-bottom: 1.5em;
  overflow-x: hidden;
  /* Everything inheritable that a page could be setting on its own body,
     restated. Sizing the panel against the viewport stops the *font* being
     the page's, but the wordmark row was still inheriting line-height and
     came out 1.1px taller on /testimonials than everywhere else. A component
     injected into 128 pages of four different provenances inherits nothing
     it has not chosen. */
  line-height: 1.35;
  font-weight: 400;
  font-style: normal;
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-align: left;
  /* `color` was the one inheritable missing from this list, and the anchor
     reset further down used to say `color: inherit` — which at (0,2,1) beat
     `.sn-word`, `.sn-row` and even `.sn-row.sn-here`. With nothing declared
     here the chain ran to <body>, so the rail was painted in whatever ink the
     page happened to use: measured #212529 on the templated pages, #27241f on
     the galleries, #55555f on /topics, #111118 on /help, #000 on a report.
     The wordmark came out in five different inks, --sn-strong never reached
     the current page at all, and on /topics the links rendered *lighter* than
     the group labels above them, inverting the hierarchy. */
  color: var(--sn-soft);
}
/* ---- why the column lives on a wrapper ----
   The index fills the panel by being a flex child of a full-height column,
   and the obvious place for that column is the panel itself. It cannot go
   there: the nine legacy fragments carry
   `body.standalone .gs-sidebar { display: block }` at (0,2,1), which outranks
   `.gs-sidebar.sn` at (0,2,0). So on every legacy page the panel silently
   stayed `display: block`, the index took its content height instead of the
   panel's, and the rows came out 32px against 41px on the templated half —
   the same nav at two rhythms depending on which page you were on.

   Winning that fight would mean out-specifying a rule whose other job is
   hiding the whole chrome when a legacy page is embedded in an iframe, and
   getting that wrong shows the sidebar inside every embed. A wrapper needs
   no fight: the panel keeps whatever display its own half gave it, and the
   column is one level in. The percentage resolves because .gs-sidebar is
   fixed with both top and bottom set, so its height is definite. */
.sn-inner {
  display: flex; flex-direction: column;
  min-height: 100%;
}
.gs-sidebar.sn::-webkit-scrollbar { width: 4px; }
.gs-sidebar.sn::-webkit-scrollbar-thumb { background: var(--sn-faint); border-radius: 2px; }
/* Only the underline. This used to also say `color: inherit`, which at (0,2,1)
   outranked `.sn-word` (0,1,0), `.sn-row` (0,1,0) and `.sn-row.sn-here`
   (0,2,0) — see the `color` line in the panel's own block above. */
.gs-sidebar.sn a { text-decoration: none; }

/* ---- the wordmark row ----
   Against the 229px of logo and wordmark the replica spent before its first
   link — a quarter of the panel repeating what the banner and the browser
   tab already say. */
.sn-mark {
  flex: none;
  display: flex; align-items: center; gap: 0.62em;
  padding: 0.9em 0.75em 0.85em 1.15em;
  border-bottom: 1.5px solid var(--sn-ink);
}
.sn-mark .sn-logo { display: block; flex: none; line-height: 0; }
.sn-mark .sn-logo img { width: 1.75em; height: 1.75em; display: block; }
.sn-word {
  font-size: 1.07em; font-weight: 700; letter-spacing: 0.02em;
  color: var(--sn-strong); margin-right: auto;
}

/* The fold button. A control, so it keeps a ruled edge rather than taking a
   drawn one — the language's own division between a thing you read and a
   thing you press. */
.sn-fold {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 1.75em; height: 1.75em; padding: 0;
  background: none; border: 1.5px solid transparent; border-radius: 4px;
  color: var(--sn-ink); cursor: pointer;
}
.sn-fold svg {
  width: 1.25em; height: 1.25em; fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.sn-fold:hover { color: var(--sn-strong); border-color: var(--sn-faint); }
.sn-fold:focus-visible { outline: 2px solid var(--sn-accent); outline-offset: 2px; }
/* The chevron is the only thing in the panel that turns, and it turns
   because the reader pressed it. */
.sn-fold .sn-fold-chev { transform-origin: 10px 10px; }
html.nav-fold .sn-fold .sn-fold-chev { transform: rotate(180deg); }

/* ---- the margin rule, and the rhythm ----
   The index takes the height the panel has and the rows share it out. A nav
   with a fixed row height leaves whatever is left over as dead paper at the
   bottom — measured at 200px on a 14" laptop, with the rows crammed tight
   above it, which is the worst of both.

   Every row gets an equal share, so the rhythm stays even: the item's growth
   factor is its own row plus its children (`--n`, written by both
   generators), and it hands one share to its row and the rest to its
   children's block. min-height keeps a short window compact, max-height
   stops a 4K display giving each link an inch of paper. Between the two the
   panel simply fits, at any height. */
.sn-index {
  position: relative; flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  padding: 0.4em 0 0;
}
.sn-index::before {
  content: ""; position: absolute; left: var(--sn-rule); top: 0; bottom: 0;
  border-left: 1px solid var(--sn-faint);
}

/* flex-basis is 0, not auto, at all three levels. With `auto` the share each
   box gets depends on its own content height as well as its grow factor, and
   the two compound: section rows came out 36.6px while their own children
   came out 41.8px, which is a visibly irregular rhythm. From a basis of zero
   the distribution is purely proportional — an item takes n/24 of the
   column, hands one part to its row and the rest to its children — so every
   row in the index is exactly 1/24 of it. min-height still wins underneath,
   which is what keeps a short window compact and scrolling. */
/* The wrappers carry no layout at all in this state: every row — section and
   child alike — is a direct flex item of the index, so one distribution sets
   every height and the rhythm is even by construction.

   The nested version could not be. An item grew by its own factor and then
   split that internally, and the two distributions compounded: section rows
   came out 36.6px against their own children at 41.8px. Zeroing the
   wrappers' automatic minimum evened the shares and let rows spill out of
   the wrappers instead — twelve overlapping rows at 1280x700.

   `display: contents` costs the wrappers their boxes, which is why the
   child rule and the tick below are drawn on the child rows themselves. */
.sn-item { display: contents; }
.sn-row {
  position: relative;
  display: flex; align-items: center;
  flex: 1 1 0;
  min-height: 1.78em; max-height: 2.9em;
  padding: 0.1em 1em 0.1em var(--sn-text);
  line-height: 1.35; color: var(--sn-soft);
}
.sn-row:hover { color: var(--sn-strong); }
/* A section with no page of its own. It labels its children rather than
   going anywhere, so it does not light up under the pointer. */
.sn-group { cursor: default; }
.sn-group:hover { color: var(--sn-soft); }

/* ---- the numbers are for the spine, and only the spine ----
   A column of ordinals down the left of the open panel is a second thing to
   read beside every label, in a panel whose whole idea is one rule and the
   words hanging off it. It made the rail look cramped and it earned nothing:
   nobody navigates a thirteen-item list by number when the words are there.

   Folded, they are all there is, and they work — not as names but as
   positions in the order the reader has just collapsed, with each naming
   itself in the flyout on hover or focus. Drawn in that state and no other.
   They are aria-hidden in both generators, so the link is named by its
   label whichever state the panel is in. */
.sn-no { display: none; }
.sn-ext { font-size: 0.72em; color: var(--sn-faint); margin-left: 0.3em; }

/* Only the children take a tick — a top-level label sits against the rule
   and is gathered by it. A tick on every row turns the margin into a file
   tree, which is a different idea and a busier one. */
.sn-kids { display: contents; }
/* The child row is a size down, which means its `em` is a size down too —
   so 1.85em on it is a *smaller* floor than 1.85em on a parent row, the two
   start from different bases, and flex hands them different final heights.
   Dividing by the ratio puts both floors at the same number of pixels, and
   the rhythm comes out even. */
.sn-kid {
  padding-left: 4.4em; font-size: 0.91em;
  /* The child row is a size down, so its `em` is too: 1.85em on it is a
     smaller floor than 1.85em on a section row. Divided by the ratio, both
     floors are the same number of pixels and the two levels start level. */
  min-height: calc(1.78em / 0.91);
  max-height: calc(2.9em / 0.91);
  /* The tick is a background rather than a pseudo-element: with the wrappers
     gone, ::before carries the vertical rule and ::after the marker, and an
     element has only the two. */
  background-image: repeating-linear-gradient(
    to right, var(--sn-faint) 0 2px, transparent 2px 4px);
  background-repeat: no-repeat;
  background-size: 0.79em 1px;
  background-position: 3.63em center;
}
.sn-kid:hover {
  background-image: linear-gradient(var(--sn-ink), var(--sn-ink));
}
/* The children's own rule, one step in. Drawn per row and butted together
   rather than as one line down a wrapper that no longer has a box; the last
   child's stops on its own midline, where the last tick meets it, so the
   rule ends at the last child rather than running past into nothing. */
.sn-kid::before {
  content: ""; position: absolute; left: 3.3em; top: 0; bottom: 0;
  border-left: 1px dashed var(--sn-faint);
}
.sn-kid:last-child::before { bottom: 50%; }
.sn-kids-h, .sn-tip { display: none; }

/* Where you are: a filled square on the rule it belongs to — the margin for
   a section, the child rule for a page inside one. */
.sn-row.sn-here { color: var(--sn-strong); font-weight: 500; }
.sn-row.sn-here::after {
  content: ""; position: absolute; left: calc(var(--sn-rule) - 0.22em); top: 50%;
  width: 0.48em; height: 0.48em; margin-top: -0.24em; background: var(--sn-accent);
}
.sn-kid.sn-here::after { left: 3.06em; }
.sn-row:focus-visible { outline: 2px solid var(--sn-accent); outline-offset: -2px; }

/* ---- the bands ----
   Content, then reference, then the two doors into the app. Thirteen links
   at one weight made `privacy` look exactly as important as `try sway`,
   which is the only thing on the site we want pressed.

   "reference" rather than "the small print", which named `privacy` and
   mislabelled the three beside it: faq, help and contact are among the most
   useful pages in the panel, not fine print. All four are things you look
   up rather than read. */
.sn-band {
  flex: none;
  position: relative; margin: 0.85em 1em 0.35em var(--sn-text); padding-top: 0.6em;
  border-top: 1px dashed var(--sn-faint);
  font-size: 0.68em; line-height: 1.4; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--sn-faint);
}

/* ============================================================
   Folded — the spine
   ============================================================
   Forty-eight pixels, and all of them the ordinals'. No rule: see the note
   at the top. Everything that carried a word is taken out of sight rather
   than out of the accessibility tree, so the flyout is the only thing that
   can overflow the panel. */
html.nav-fold .gs-sidebar.sn { overflow: visible; }
html.nav-fold .sn-word { display: none; }
html.nav-fold .sn-mark { padding: 0.9em 0 0.85em; flex-direction: column; gap: 0.5em; }
html.nav-fold .sn-index { padding-top: 0.5em; }
html.nav-fold .sn-index::before { display: none; }
/* The children are a flyout here, not rows, so they add no height — every
   item is one row and takes one share. Inheriting --n would give /resources
   five times the space of /news. */
/* The wrappers become boxes again: the flyout is positioned against the item,
   and the children are a plate rather than rows in the column. */
html.nav-fold .sn-item { display: block; position: relative; flex: 1 0 auto; }
html.nav-fold .sn-row { justify-content: center; padding: 0.34em 0; }
html.nav-fold .sn-kid { background-image: none; }
html.nav-fold .sn-kid::before { display: none; }
html.nav-fold .sn-ext { display: none; }
/* Taken out of sight, not out of the accessibility tree. `display: none` on
   the label left each link named by its ordinal — a screen reader in the
   folded state read out "01, 02, 03". Clipped, the link is still called
   "feedback" whichever state the panel is in. */
html.nav-fold .sn-lb {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
html.nav-fold .sn-no {
  display: inline; font-size: 0.95em; font-style: normal; letter-spacing: 0.04em;
  /* The only thing left in the panel, so it stops being secondary type. */
  color: var(--sn-soft);
}
html.nav-fold .sn-row:hover { background: var(--sn-hatch); }
html.nav-fold .sn-row:hover .sn-no { color: var(--sn-strong); }
/* No rule to sit on, so the marker becomes the panel's own edge. */
html.nav-fold .sn-row.sn-here { box-shadow: inset 2px 0 0 var(--sn-accent); }
html.nav-fold .sn-row.sn-here .sn-no { color: var(--sn-accent); font-weight: 700; }
html.nav-fold .sn-row.sn-here::after { display: none; }
html.nav-fold .sn-band { margin: 0.6em 0.7em; padding: 0; }
html.nav-fold .sn-band span { display: none; }

/* The flyout is a thing you read, so it is a plate: paper, a ruled edge and
   the hard cast, exactly as every card on the site is.

   Hidden with opacity rather than `display: none`, because a display:none
   element cannot take focus — and the whole reason a keyboard reader can
   reach `from students` in this state is that focus landing on it fires
   :focus-within on the item and brings the plate up. Hide it the obvious way
   and the three hrefless groups become unreachable without a mouse.
   pointer-events keeps the invisible plate from swallowing clicks meant for
   the page. */
html.nav-fold .sn-kids,
html.nav-fold .sn-tip {
  display: block;
  opacity: 0; pointer-events: none;
  position: absolute; left: 100%; top: -0.4em; z-index: 1260;
  min-width: 11em; padding: 0.4em 0 0.45em;
  background: var(--sn-paper);
  border: 1.5px solid var(--sn-ink); border-radius: 0 5px 5px 0;
  box-shadow: 3px 3px 0 var(--sn-cast);
}
html.nav-fold .sn-item:hover > .sn-kids,
html.nav-fold .sn-item:focus-within > .sn-kids,
html.nav-fold .sn-item:hover > .sn-tip,
html.nav-fold .sn-item:focus-within > .sn-tip { opacity: 1; pointer-events: auto; }
html.nav-fold .sn-kids::before { display: none; }
html.nav-fold .sn-tip,
html.nav-fold .sn-kids .sn-kids-h {
  font-size: 0.68em; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--sn-faint);
  padding: 0.2em 1.5em 0.5em; white-space: nowrap;
}
html.nav-fold .sn-kids .sn-kids-h {
  display: block; border-bottom: 1px dashed var(--sn-faint); margin-bottom: 0.35em;
}
html.nav-fold .sn-kid {
  padding: 0.28em 1.1em; font-size: 0.95em; white-space: nowrap;
  border-left: 2px solid transparent; text-align: left;
}
html.nav-fold .sn-kid::before { display: none; }
html.nav-fold .sn-kid:hover { background: var(--sn-hatch); }
html.nav-fold .sn-kid.sn-here { border-left-color: var(--sn-accent); }
html.nav-fold .sn-kid.sn-here::after { display: none; }

/* ---- below the sidebar breakpoint ----
   The panel is a drawer there, opened from the banner's hamburger, and a
   48px drawer is no use to anybody. The fold is a desktop affordance, so
   the button goes and the open state is forced. */
@media (max-width: 1279px) {
  .sn-fold { display: none; }
  html.nav-fold { --sidebar-w: 250px; }
  :root { --sidebar-w: 250px; }
  html.nav-fold .gs-sidebar.sn { width: 250px; overflow-y: auto; overflow-x: hidden; }
  html.nav-fold .sn-word { display: block; }
  html.nav-fold .sn-mark { flex-direction: row; padding: 0.9em 0.75em 0.85em 1.15em; gap: 0.62em; }
  html.nav-fold .sn-index { padding-top: 0.4em; }
  html.nav-fold .sn-index::before { display: block; }
  html.nav-fold .sn-item { display: contents; }
  html.nav-fold .sn-row { justify-content: flex-start; padding: 0.1em 1em 0.1em var(--sn-text); }
  html.nav-fold .sn-lb {
    position: static; width: auto; height: auto; overflow: visible;
    clip-path: none; white-space: normal;
  }
  html.nav-fold .sn-ext { display: inline; }
  html.nav-fold .sn-no { display: none; }
  html.nav-fold .sn-row.sn-here { box-shadow: none; }
  html.nav-fold .sn-row.sn-here::after { display: block; }
  html.nav-fold .sn-kids { display: contents; }
  html.nav-fold .sn-tip { display: none; }
  html.nav-fold .sn-kids-h { display: none; }
  html.nav-fold .sn-kid {
    padding: 0.1em 1em 0.1em 4.4em; font-size: 0.91em;
    white-space: normal; border-left: 0;
    background-image: repeating-linear-gradient(
      to right, var(--sn-faint) 0 2px, transparent 2px 4px);
    background-repeat: no-repeat;
    background-size: 0.79em 1px;
    background-position: 3.63em center;
  }
  html.nav-fold .sn-kid::before { display: block; }
  html.nav-fold .sn-kid.sn-here::after { display: block; }
  html.nav-fold .sn-band {
    margin: 0.85em 1em 0.35em var(--sn-text); padding-top: 0.6em;
  }
  html.nav-fold .sn-band span { display: inline; }
}