/* Device layouts: phone tabs, tablet header, desktop rail. See DESIGN.md. */
/* Desktop rail and phone tabs: see DESIGN.md. Tablets keep the header and theme bar. */
.rail, .tabs { display:none; }
.rail a { text-decoration:none; }
.tabs a { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-width:0;
          color:var(--faint); text-decoration:none; font:500 0.6875rem/1.2 var(--sans); }
.tabs a[aria-current] { color:var(--fg); }
@media (max-width:44.9375em) {
  body:has(.tabs) { --tabs-h:3.75rem; }  /* grows with the reader's text size */
  .tabs { display:flex; position:fixed; z-index:45; left:0; right:0; bottom:0; height:calc(var(--tabs-h) + env(safe-area-inset-bottom));
          padding:0 4px env(safe-area-inset-bottom); background:color-mix(in srgb, var(--bg) 94%, transparent);
          backdrop-filter:blur(8px); border-top:1px solid var(--rule); }
}
@media (min-width:64em) {
  :root { --shell-left:max(32px, calc((100vw - 1120px) / 2)); --column-left:calc(var(--shell-left) + 200px + clamp(40px, 5vw, 80px)); --subnav-h:0px; }
  body:has(.rail) .wrap, body:has(.rail) footer.site .in { max-width:728px; margin:0 0 0 calc(var(--column-left) - var(--gutter)); }
  body:has(.rail) header.site, body:has(.rail) nav.subnav { display:none; }
  body:has(.rail) main { padding-top:72px; }
  /* The rail is 220px with no side padding: its links fill it edge to edge (their hover fill),
     and everything else is inset 10px, so the text lines up at 200px. Nothing reaches past
     its box, so it can never scroll sideways, at any text size. */
  .rail { display:flex; flex-direction:column; gap:28px; position:fixed; z-index:30; top:0; bottom:0;
          left:calc(var(--shell-left) - 10px); width:220px; padding:28px 0 24px;
          overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none; }
  .rail > .brand, .rail-foot { margin:0 10px; }
  .rail > .brand { display:flex; min-width:0; white-space:normal; line-height:1.1; }  /* wraps at large text sizes */
  .rail :focus-visible { outline-offset:-2px; }
  .rail .brand { font-size:1.3125rem; gap:9px; } .rail .brand .logo-mark { width:46px; height:33px; }
  .rail nav { display:grid; gap:1px; }
  .rail nav a { display:flex; align-items:center; gap:10px; min-height:36px; padding:0 10px; margin:0; border-radius:var(--round);
                color:var(--muted); font-size:0.9375rem; }
  @media (hover:hover) { .rail nav a:hover { color:var(--fg); background:var(--surface); } }
  .rail nav a[aria-current] { color:var(--fg); font-weight:600; }
  .rail nav a[aria-current]::after { content:""; margin-left:auto; width:6px; height:6px; border-radius:50%; background:var(--accent); }
  .rail nav .newcount { margin-left:auto; }
  .rail-foot { margin-top:auto; display:grid; gap:12px; }
  .rail-foot .pill-link { justify-content:center; min-height:42px; }
  .rail .langmenu ul { right:auto; left:0; top:auto; bottom:calc(100% + 6px); }
  .rail .langmenu summary { border:0; padding:0; color:var(--faint); }
  h1 { font-size:3rem; }
}

/* Print: just the pieces, black on white. */
@media print {
  .rail, .tabs, header.site, nav.subnav, footer.site, .filters, form.fbar, .actions, .progress, .toast, .email-line, .pager, dialog { display:none !important; }
  body { background:#fff; color:#000; font-size:12pt; }
  .wrap, body:has(.rail) .wrap { max-width:none; margin:0; padding:0; }
  li.item { break-inside:avoid; padding:14pt 0; }
  li.item h2 a::after { content:" (" attr(href) ")"; font:400 9pt var(--sans); color:#555; word-break:break-all; }
  a { color:#000; }
}

/* Things that need JavaScript stay hidden without it. */
.js-flex { display:none !important; }
.js .js-flex { display:inline-flex !important; }
.rail-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; }
.rail-display { align-items:center; gap:6px; min-height:36px; padding:0; background:none; border:0; color:var(--faint);
                font:500 0.8125rem/1 var(--sans); cursor:pointer; }
  @media (hover:hover) { .rail-display:hover { color:var(--fg); } }

/* Phones: every target at least 44px tall, and nothing wider than the screen.
   ":root" outranks the pages' own styles, which load after this file. */
@media (max-width:44.9375em) {
  :root a.brand { min-height:44px; }
  :root .theme-tag { padding:15px 0; margin:-15px 0; }
  :root .fbtn, :root .opt span, :root .chip, :root .btn.small, :root .pager .pages a, :root .pager .pages span,
  :root .pager .btn { min-height:44px; }
  :root .clear, :root .visit { display:inline-flex; align-items:center; min-height:44px; }
  :root .section-title .section-action { white-space:normal; text-align:right; line-height:1.3; max-width:62%; }
}
/* The smallest phones: a slightly smaller wordmark so three app-bar icons still fit. */
@media (max-width:22.4375em) {
  :root header.site a.brand { font-size:1.0625rem; gap:5px; }
  :root header.site a.brand .logo-mark { width:34px; height:24px; }
}
/* Narrow phones: a section's action ("See all themes") drops under its title instead of pushing the page wider. */
@media (max-width:26.1875em) {
  :root .section-title { flex-wrap:wrap; row-gap:4px; }
  :root .section-title .section-action { order:3; flex:1 1 100%; max-width:none; text-align:left; }
}
/* Tablets: the last header icon's glyph, not its 44px target, lines up with the column edge. */
@media (min-width:45em) and (max-width:63.9375em) {
  header.site [data-open="sheet-display"] { margin-right:-12px; }
}
/* Large browser text on small phones: labels wrap instead of pushing past the screen edge. */
@media (max-width:44.9375em) {
  :root .tabs a { text-align:center; line-height:1.15; overflow-wrap:anywhere; }
  :root header.site .bar { min-width:0; }
  :root header.site a.brand { min-width:0; white-space:normal; line-height:1.05; }
  :root header.site .right { flex:none; }
}