/* Base: reset, type, focus, and the controls everything shares. */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  min-height: 100vh; background: var(--bg); color: var(--t1); font: 400 var(--fs-14)/1.5 var(--sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-synthesis: none;
}
button, input, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
button:disabled { cursor: default; }
ul { list-style: none; padding: 0; }
a { color: inherit; }
svg { display: block; }
img { max-width: 100%; }
[hidden] { display: none !important; }
kbd { font: 500 11px/1 var(--mono); border-radius: 6px; padding: 4px 6px; color: var(--t2); background: var(--s3); white-space: nowrap; }
.mono { font-family: var(--mono); font-size: .92em; }
.muted { color: var(--t3); }
.n { font: 400 var(--fs-12)/1 var(--sans); color: var(--t3); font-variant-numeric: tabular-nums; }
.ic { width: 16px; height: 16px; flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 300; background: var(--t1); color: var(--on-t1); padding: 10px 16px; border-radius: var(--r-ctl); text-decoration: none; font-weight: 500; transition: top var(--dur-quick); }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--t1); outline-offset: 2px; border-radius: 6px; }
:focus:not(:focus-visible) { outline: 0; }
::selection { background: color-mix(in srgb, var(--t1) 24%, transparent); }

/* the logo: drawn by mask so it follows the text colour without a request per use */
.mark { display: block; width: 20px; height: 20px; flex: none; background: currentColor; -webkit-mask: url("../icons/mark-20.svg") center / contain no-repeat; mask: url("../icons/mark-20.svg") center / contain no-repeat; }
.wordmark { font: 700 18px/20px var(--sans); letter-spacing: -.03em; white-space: nowrap; }

.icon-btn { width: 36px; height: 36px; border-radius: var(--r-ctl); display: grid; place-items: center; color: var(--t2); transition: background var(--dur-quick), color var(--dur-quick); flex: none; }
.icon-btn:hover { background: var(--s2); color: var(--t1); }

/* buttons: primary is a white pill with dark text, secondary an outline pill, ghost is text that fills on hover */
.btn, .btn-s { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line-2); border-radius: var(--r-pill); font-weight: 500; transition: background var(--dur-quick), border-color var(--dur-quick), color var(--dur-quick); white-space: nowrap; text-decoration: none; }
.btn { height: 40px; padding: 0 20px; font-size: var(--fs-14); }
.btn-s { height: 32px; padding: 0 14px; font-size: var(--fs-13); }
.btn:hover, .btn-s:hover { background: var(--s2); }
.btn.primary { background: var(--t1); color: var(--on-t1); border-color: var(--t1); }
.btn.primary:hover { background: color-mix(in srgb, var(--t1) 86%, var(--bg)); }
.btn kbd, .btn-s kbd { background: color-mix(in srgb, currentColor 14%, transparent); color: inherit; opacity: .8; }
.btn .ic, .btn-s .ic { width: 16px; height: 16px; }
.ghost { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: var(--r-ctl); color: var(--t2); font-size: var(--fs-13); font-weight: 500; text-decoration: none; transition: background var(--dur-quick), color var(--dur-quick); white-space: nowrap; }
.ghost:hover { background: var(--s2); color: var(--t1); }
.ghost .ic { width: 14px; height: 14px; }
.link-btn { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-13); color: var(--t2); padding: 8px 12px; margin-left: -12px; border-radius: var(--r-ctl); }
.link-btn:hover { color: var(--t1); background: var(--s2); }
.link-btn .ic { width: 14px; height: 14px; }

/* filter chips: pills, the only pills in the app */
.chip, .pill { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: var(--r-pill); background: var(--s2); color: var(--t2); font-size: var(--fs-13); font-weight: 450; text-decoration: none; transition: background var(--dur-quick), color var(--dur-quick); white-space: nowrap; }
.chip:hover, .pill:hover { background: var(--s3); color: var(--t1); }
.chip[aria-pressed="true"], .chip[aria-current="page"], .pill[aria-pressed="true"] { background: var(--t1); color: var(--on-t1); }
.chip[aria-pressed="true"] .n, .chip[aria-current="page"] .n, .pill[aria-pressed="true"] .n { color: inherit; opacity: .7; }
.chip.zero, .pill.zero { color: var(--t3); }
a.chip { text-decoration: none; }
.sw { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--c, #999); box-shadow: inset 0 0 0 1px rgba(128, 128, 128, .35); flex: none; }

/* select */
.sel { display: flex; align-items: center; gap: 8px; font-size: var(--fs-13); color: var(--t3); }
.sel select { appearance: none; -webkit-appearance: none; height: 36px; border: 0; border-radius: var(--r-ctl); background-color: var(--s2); background-repeat: no-repeat; background-position: right 12px center; font-weight: 500; font-size: var(--fs-13); color: var(--t1); padding: 0 34px 0 14px; cursor: pointer; transition: background-color var(--dur-quick); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23a1a1a1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
:root[data-theme="light"] .sel select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23555555' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.sel select:hover { background-color: var(--s3); }
.sel select option { background: var(--s2); color: var(--t1); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }