/* Page structure: reset, typography, the shell (header, main, footer) and layout helpers. */

*, *::before, *::after { box-sizing: border-box; }

html { color-scheme: light dark; }
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: var(--fs);
    line-height: 1.5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a { color: inherit; text-decoration: none; }
/* A link inside running text (a paragraph, a list item, a definition, a note) is in the accent colour and underlined, so a visitor can see that it is a link: the base rule above
   leaves it looking like the words around it. `:where()` keeps the specificity of a bare `a`, so every link that has a class of its own (a button, a tab, a badge, a menu item,
   a known address) keeps the look that class gives it. */
:where(p, li, dd, .note) a:where(:not(.btn, .tab, .badge, .chip, .step, .sm-item, .sortchip, .linklike)) { color: var(--accent-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
:where(p, li, dd, .note) a:where(:not(.btn, .tab, .badge, .chip, .step, .sm-item, .sortchip, .linklike)):hover { text-decoration-thickness: 2px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
    outline: 2px solid var(--accent-text);
    outline-offset: 2px;
}

h1 { margin: 0; font-size: 28px; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; }
h2 { margin: 0; font-size: 16px; font-weight: 650; }
p { margin: 0 0 12px; }

.mono, .hash { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.main { position: relative; flex: 1 0 auto; padding-top: 28px; padding-bottom: 8px; }
.stack { display: flex; flex-direction: column; gap: var(--gap); }
.row { display: flex; flex-wrap: wrap; gap: var(--gap); align-items: flex-start; }

.skip {
    position: absolute;
    left: 8px;
    top: -60px;
    z-index: 100;
    padding: 10px 16px;
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
}
.skip:focus { top: 8px; }

/* header: a dark band with the big logo, the search and the tools; under it the bar with the menu. The band scrolls away with the page. The bar stays at
   the top, gets a small mark and a shadow once it has reached the top (header.js adds .is-stuck), and the page goes under it. The bar always has the same
   height, so nothing in the page jumps when it sticks. */
.site-header { display: contents; }
.header-band { background: var(--band); }
.header-in { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
/* Its own selector (two classes): the small-screen rule for .wrap resets all four paddings and would take the room above the logo and under the search away */
.header-band .header-in { padding-top: 14px; padding-bottom: 16px; }
.brand { order: 1; display: inline-flex; align-items: center; }
.logo { display: block; height: 64px; width: auto; max-width: 100%; }
/* Logo, search and tools share one line down to 900 px; a smaller logo keeps them from wrapping on the way */
@media (max-width: 1099px) { .logo { height: 56px; } }
@media (max-width: 900px) { .logo { height: 52px; } }
.header-bar { position: sticky; top: var(--netbar-h, 0px); z-index: 50; background: var(--surface); border-bottom: 3px solid var(--accent); transition: box-shadow .2s ease; }
.site-header.is-stuck .header-bar { box-shadow: var(--header-shadow); }
.bar-in { display: flex; align-items: center; }
.bar-mark { display: inline-flex; flex: 0 0 auto; width: 0; margin-right: 0; overflow: hidden; opacity: 0; transition: width .2s ease, margin-right .2s ease, opacity .2s ease; }
.bar-mark img { display: block; width: 32px; height: 32px; }
.site-header.is-stuck .bar-mark { width: 32px; margin-right: 10px; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .header-bar, .bar-mark { transition: none; } }
/* a link to #content or to an anchor must not end up under the bar (about 56 px high, also on a phone) */
html { scroll-padding-top: calc(76px + var(--netbar-h, 0px)); }
@media (max-width: 760px) { html { scroll-padding-top: calc(72px + var(--netbar-h, 0px)); } }
.tools { order: 2; margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.navdesk { flex: 1 1 auto; min-width: 0; display: flex; }
.nav {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 2px;
    padding: 6px 0;
}
.nav a, .nav .soon, .nav summary { flex: 0 0 auto; white-space: nowrap; }
.nav > a { padding: 8px 14px; border-radius: 8px; font-weight: 600; color: var(--muted); }
.nav > a:hover { color: var(--text); background: var(--surface2); }
.nav > a.on { color: var(--accent-text); background: var(--accent-soft); }

/* A group of the menu opens a list under it: a <details>, so it works with the keyboard and on a touch screen without a script (the script closes it on a click elsewhere) */
.navgroup { position: relative; }
.navgroup > summary, .navmenu > summary { list-style: none; cursor: pointer; }
.navgroup > summary::-webkit-details-marker, .navmenu > summary::-webkit-details-marker { display: none; }
.navtop { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 8px; font-weight: 600; color: var(--muted); }
.navtop svg { width: 12px; height: 12px; stroke-width: 2.5; transition: transform .15s ease; }
.navgroup[open] > .navtop svg { transform: rotate(180deg); }
.navtop:hover, .navgroup[open] > .navtop { color: var(--text); background: var(--surface2); }
.navtop.on { color: var(--accent-text); background: var(--accent-soft); }
.navpanel { position: absolute; z-index: 60; top: calc(100% + 8px); left: 0; width: 340px; max-width: calc(100vw - 32px); display: flex; flex-direction: column; padding: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--header-shadow); }
.navpanel a, .navpanel .soon, .navlist a, .navlist .soon { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; color: var(--text); }
.navpanel a:hover, .navlist a:hover { background: var(--surface2); }
.navpanel b, .navlist b { font-size: 15px; }
.navpanel span, .navlist span { font-size: 13px; color: var(--muted); font-weight: 400; }
.navpanel a.cur b, .navlist a.cur b { color: var(--accent-text); }

/* On a phone the row is a bar with the page you are on and a button that opens the whole list under it */
.navmenu { display: none; flex: 1 1 auto; min-width: 0; }
.navmenu > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; }
.navnow { color: var(--muted); font-size: 14px; }
.navnow b { color: var(--text); }
.navbutton { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); font-weight: 700; }
.navbutton svg { width: 18px; height: 18px; }
.navmenu[open] > summary .navbutton { border-color: var(--accent); }
.navlist { position: absolute; z-index: 60; left: 0; right: 0; top: 100%; display: flex; flex-direction: column; gap: 2px; padding: 8px 12px 16px; max-height: calc(100vh - var(--netbar-h, 0px) - 66px); max-height: calc(100dvh - var(--netbar-h, 0px) - 66px); overflow-y: auto; overscroll-behavior: contain; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--header-shadow); }
.navlist a, .navlist .soon { flex-direction: row; align-items: center; min-height: 44px; padding: 8px 12px; }
/* The descriptions are for the dropdown of a wide screen; the list of a phone is the names, one to a line */
/* (only the line under a page's name: the menu of a phone also holds the network and the theme, whose words are spans too) */
.navlist a > span, .navlist .soon > span { display: none; }
.navhead { padding: 10px 12px 2px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.navrule { height: 1px; margin: 6px 0; background: var(--border); }
.navrule:last-child { display: none; }
@media (max-width: 760px) {
    .navdesk { display: none; }
    .navmenu { display: block; }
    /* While the list is open the page behind it does not scroll (the bar is at the top, see navmenu.js) */
    html.menu-open { overflow: hidden; }
}

/* The phone's row (#760): the band is not shown, and the bar is one dark row of 56 px with the wordmark, a search button and the Menu button. It is
   the same height at the top and stuck, so nothing moves when the page scrolls (#405). The network switch and the theme are in the menu's list. */
.bar-brand, .bar-search-toggle, .bar-search, .navnet, .navnet + .navrule, .navprefs, .bst-text { display: none; }
@media (max-width: 760px) {
    .header-band { display: none; }
    .header-bar { background: var(--band); }
    .bar-in { gap: 8px; height: 53px; }
    .bar-mark, .site-header.is-stuck .bar-mark { display: none; }
    .bar-brand { display: inline-flex; align-items: center; margin-right: auto; }
    .bar-brand img { display: block; height: 30px; width: auto; }
    .bar-brand:focus-visible, .bar-search-toggle:focus-visible { outline: 2px solid var(--on-band); outline-offset: 2px; }
    .bar-search-toggle { display: inline-grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--on-band-line); color: var(--on-band); }
    .bar-search-toggle svg { width: 20px; height: 20px; }
    .bar-search-toggle[aria-expanded="true"], .bar-search-toggle:hover { background: var(--on-band-hover); text-decoration: none; }
    .navmenu { flex: 0 0 auto; }
    .navmenu > summary { padding: 0; }
    .navnow { display: none; }
    .navbutton { border-color: var(--on-band-line); background: transparent; color: var(--on-band); }
    .navmenu[open] > summary .navbutton { border-color: var(--on-band); background: var(--on-band-hover); }
    .navlist { max-height: calc(100vh - var(--netbar-h, 0px) - 56px); max-height: calc(100dvh - var(--netbar-h, 0px) - 56px); }

    /* The search field folds out under the row, over the page (it does not push the page down) */
    .bar-search { display: block; position: absolute; z-index: 60; left: 0; right: 0; top: 100%; background: var(--band); border-bottom: 3px solid var(--accent); box-shadow: var(--header-shadow); }
    /* (two classes: the phone's .wrap { padding: 0 16px } further down would otherwise take the space above and below the field away) */
    .bar-search .bar-search-in { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 14px; padding-bottom: 16px; }
    .bar-search input { flex: 1 1 0; min-width: 0; height: 44px; padding: 0 14px; border: 1px solid var(--on-band-line); border-radius: 12px; background: var(--on-band-hover); color: var(--on-band); font: inherit; font-size: 16px; }
    .bar-search input::placeholder { color: var(--on-band-muted); }
    .bar-search input:focus { outline: 2px solid var(--on-band); outline-offset: 1px; }
    .bar-search .btn { min-height: 44px; }
    /* the hint under the field (searchhint.js) in the colours of the dark panel */
    .bar-search .sh-row { background: var(--on-band-hover); color: var(--on-band); }
    .bar-search .sh-sub { color: var(--on-band-muted); }

    /* The network at the top of the list, as two wide pills; the theme and the accent colours at its end */
    .navnet { display: flex; gap: 6px; margin: 4px 0 2px; padding: 4px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface2); }
    /* (two classes, so the look of the list's links, .navlist a, does not take the gap and the colour away) */
    .navnet .net { flex: 1 1 0; flex-direction: row; justify-content: center; align-items: center; gap: 6px; min-height: 40px; padding: 5px 12px; border-radius: 999px; font-size: 14px; font-weight: 650; color: var(--muted); }
    .navnet a.net:hover { color: var(--text); background: var(--surface); }
    .navnet .net.on { background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--border); }
    .navnet + .navrule { display: block; }
    .navprefs { display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 6px 4px 0; }
    .navpref { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
    .navpref svg { width: 18px; height: 18px; margin-right: 8px; vertical-align: -3px; }
    /* The Settings link looks like the Dark mode button beside it, not like the list's links (#775) */
    .navlist a.navpref { flex-direction: row; gap: 0; padding: 0 14px; border-radius: 12px; text-decoration: none; }
    .navlist .navpref span { font-size: inherit; color: inherit; font-weight: inherit; }
}

/* A wider screen (#764): the band and its field scroll away, so the bar shows a search button once it has stuck. It opens the same fold-out field as
   the phone's (barsearch.js), here a white panel under the bar. From 1100 px the button has its words and the `/` key; below that, the icon and the key */
@media (min-width: 761px) {
    .site-header.is-stuck .bar-search-toggle { display: inline-flex; }
    .bar-search-toggle { flex: 0 0 auto; align-items: center; gap: 10px; margin-left: 12px; height: 40px; padding: 0 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface2); color: var(--muted); font-size: 14px; font-weight: 500; }
    .bar-search-toggle svg { width: 18px; height: 18px; }
    .bar-search-toggle:hover { color: var(--text); text-decoration: none; }
    .bar-search-toggle[aria-expanded="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); }
    .bar-search-toggle:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }

    .bar-search { display: block; position: absolute; z-index: 60; left: 0; right: 0; top: 100%; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--header-shadow); }
    .bar-search .bar-search-in { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 18px; padding-bottom: 18px; }
    .bar-search input { flex: 1 1 320px; min-width: 0; height: 52px; padding: 0 16px; border: 1px solid var(--field-border); border-radius: 14px; background: var(--surface); color: var(--text); font: inherit; font-size: 17px; }
    .bar-search input::placeholder { color: var(--muted); }
    .bar-search input:focus { border-color: var(--accent); outline: 2px solid var(--accent-soft); outline-offset: 0; }
    .bar-search .btn { min-height: 52px; padding: 0 26px; border-radius: 14px; }
}
@media (min-width: 1100px) {
    .bar-search-toggle { width: 260px; padding: 0 8px 0 14px; }
    .bst-text { display: block; flex: 1 1 auto; text-align: left; }
}


.icon-btn {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--on-band-line);
    background: transparent;
    color: var(--on-band);
    cursor: pointer;
}
.icon-btn:hover { background: var(--on-band-hover); }
/* The way to the settings page (#775), beside the dark/light button */
.set-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 12px; border-radius: 999px; border: 1px solid var(--on-band-line); color: var(--on-band); font-weight: 600; text-decoration: none; }
.set-btn:hover { background: var(--on-band-hover); color: var(--on-band); }
/* On the dark band the focus ring is white: the accent colour would not show against it (WCAG 1.4.11) */
.tools a:focus-visible, .tools button:focus-visible { outline-color: var(--on-band); }
.set-btn svg { flex: none; }
/* the icon shows the theme you would switch to */
.when-dark { display: none; }
:root[data-theme="dark"] .when-light { display: none; }
:root[data-theme="dark"] .when-dark { display: inline; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .when-light { display: none; }
    :root:not([data-theme="light"]) .when-dark { display: inline; }
}

/* things that need JavaScript stay hidden until it runs ([hidden] is removed by the scripts) */
[hidden] { display: none !important; }

.site-footer { padding: 28px 0 40px; color: var(--muted); font-size: 13px; }
.footer-in { display: flex; flex-direction: column; gap: 16px; }
/* The disclaimer and the tools in a card (#775) */
.footer-card { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px 24px; padding: 16px 24px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); }
.footer-in p { margin: 0; }
/* The disclaimer of every page (#57) and the network line, and at the right the tools; on a phone one column */
.footer-text { display: flex; flex-direction: column; gap: 12px; flex: 1 1 480px; min-width: 0; max-width: 820px; }
.footer-text a { color: var(--accent-text); }
.footer-tools { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 12px; }
.footer-row a { color: var(--text); }
@media (max-width: 640px) { .footer-card { padding: 14px 16px; } .footer-tools { align-items: flex-start; } .footer-row { justify-content: flex-start; } }
/* What the times are in, with a link to change it (#775) */
.tz-line a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 640px) {
    .wrap { padding: 0 16px; }
    /* (two classes: the line above would take the page's room under the menu away; the first ad under the menu used to give it, #795) */
    .wrap.main { padding-top: 16px; padding-bottom: 8px; }
    h1 { font-size: 24px; }
    .logo { height: 48px; }
}

/* a menu item whose page is not built yet: shown, but not a link */
.nav > .soon, .navpanel .soon, .navlist .soon { opacity: .55; cursor: not-allowed; user-select: none; }
.nav > .soon { padding: 8px 14px; border-radius: 8px; font-weight: 600; color: var(--muted); }