/* ══════════════ ROBOLS MATH — DESIGN SYSTEM ══════════════
   THREE colour systems, each with exactly one job:
   · CATEGORY (9 hues) → which branch of mathematics
   · BRASS             → rank, rating, achievement — nothing else
   · INK               → interactive chrome (nav, buttons, focus)
   Status green/red are deliberately brighter than the
   Algebra/Combinatorics hues so they never read as categories.
   ═════════════════════════════════════════════════════════ */

/* ══════════════ FACES ══════════════
   Self-hosted, replacing the Google Fonts stylesheet this used to link.
   The files are the ones Google was serving: same subsets, same bytes, so
   nothing about the rendering changes. What goes is a render-blocking
   request to a third party on every page, two origins in the policy, and
   two preconnects.

   One file per family per subset, not per weight. All three are variable
   fonts, so a single file covers every weight the site asks for and the
   range below says so. Newsreader Italic is the exception: its only axis
   is opsz, so it is declared at the one weight it has.

   unicode-range is what keeps this cheap. A visitor reading English
   fetches the four latin files and nothing else; the ext and Vietnamese
   files are fetched only if a name or a statement actually contains one of
   those characters. The ranges are copied from the stylesheet Google was
   serving, so the split behaves exactly as it did.

   opsz is left to the browser: font-optical-sizing is auto by default, and
   Newsreader is drawn for it. */
@font-face{font-family:'Newsreader';font-style:normal;font-weight:200 800;font-display:swap;
  src:url(/fonts/Newsreader-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:200 800;font-display:swap;
  src:url(/fonts/Newsreader-latinext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:200 800;font-display:swap;
  src:url(/fonts/Newsreader-vietnamese.woff2) format('woff2');
  unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}

@font-face{font-family:'Newsreader';font-style:italic;font-weight:400;font-display:swap;
  src:url(/fonts/Newsreader-Italic-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400;font-display:swap;
  src:url(/fonts/Newsreader-Italic-latinext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400;font-display:swap;
  src:url(/fonts/Newsreader-Italic-vietnamese.woff2) format('woff2');
  unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}

@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/fonts/Archivo-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/fonts/Archivo-latinext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/fonts/Archivo-vietnamese.woff2) format('woff2');
  unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}

@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(/fonts/JetBrainsMono-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(/fonts/JetBrainsMono-latinext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(/fonts/JetBrainsMono-vietnamese.woff2) format('woff2');
  unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
html[data-theme="light"]{
  --paper:#FCFBF8; --surface:#FFFFFF; --surface-2:#F4F3EE;
  --ink:#16181B; --ink-2:#585E66; --ink-3:#696F77;
  --line:#E5E3DC; --line-2:#D1CFC6;
  --accent:#16181B; --accent-2:#EEEDE7;
  --brass:#846526; --brass-2:#F6EFDC;
  --pos:#157F4E; --neg:#B03A2C;

  --alg:#0F6B4F;  --alg-bg:#E4F2EC;
  --geo:#8C6410;  --geo-bg:#F8F0DB;
  --trg:#0D6E86;  --trg-bg:#E1F0F4;
  --nt:#3345A0;   --nt-bg:#E8EAF8;
  --comb:#9C2E3D; --comb-bg:#F9E8EA;
  --calc:#A85218; --calc-bg:#FBEBE0;
  --lin:#6A3789;  --lin-bg:#F1E9F7;
  --log:#4A5A6B;  --log-bg:#EAEEF1;
  --triv:#9B2F72; --triv-bg:#F8E6F0;
}
html[data-theme="dark"]{
  --paper:#0B0D10; --surface:#14171B; --surface-2:#1B1F24;
  --ink:#F0EFEA; --ink-2:#9BA2AA; --ink-3:#80878F;
  --line:#232830; --line-2:#343A43;
  --accent:#F0EFEA; --accent-2:#1E2228;
  --brass:#CBA765; --brass-2:#2C2617;
  --pos:#4FD09A; --neg:#E8776A;

  --alg:#4FC9A6;  --alg-bg:#0F2E26;
  --geo:#DCA83F;  --geo-bg:#332810;
  --trg:#4FBCD6;  --trg-bg:#0E2E38;
  --nt:#8496F2;   --nt-bg:#1A2046;
  --comb:#E8737F; --comb-bg:#361A20;
  --calc:#EC9257; --calc-bg:#3A2314;
  --lin:#BB8FD9;  --lin-bg:#291A38;
  --log:#93A6B8;  --log-bg:#1E252C;
  --triv:#E381BC; --triv-bg:#361A2C;
}

.t-alg{--c:var(--alg);--cbg:var(--alg-bg);}
.t-geo{--c:var(--geo);--cbg:var(--geo-bg);}
.t-trg{--c:var(--trg);--cbg:var(--trg-bg);}
.t-nt{--c:var(--nt);--cbg:var(--nt-bg);}
.t-comb{--c:var(--comb);--cbg:var(--comb-bg);}
.t-calc{--c:var(--calc);--cbg:var(--calc-bg);}
.t-lin{--c:var(--lin);--cbg:var(--lin-bg);}
.t-log{--c:var(--log);--cbg:var(--log-bg);}
.t-triv{--c:var(--triv);--cbg:var(--triv-bg);}

*{box-sizing:border-box;margin:0;padding:0;}

body{
  /* Fallback --c/--cbg so an unmapped category never renders an invalid
     colour; every t-* class overrides these. */
  --c:var(--ink-3); --cbg:var(--surface-2);
  background:var(--paper); font-family:'Archivo',sans-serif; font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased; color:var(--ink);
  transition:background .25s, color .25s;
}
h1,h2,h3{font-family:'Newsreader',serif;font-weight:500;letter-spacing:-.015em;line-height:1.12;}
a{color:inherit;text-decoration:none;}
button,input,select,textarea{font-family:inherit;color:inherit;}
button{cursor:pointer;background:none;border:none;}
::selection{background:var(--brass);color:var(--paper);}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;}

/* Ten nav destinations sit between the top of every page and its content.
   Hidden until tabbed to, so it costs a sighted reader nothing and saves a
   keyboard one ten presses per navigation. Positioned fixed rather than
   absolute: the nav below it is sticky and would otherwise cover it. */
/* min-height here rather than in the mobile block: this link is a sibling of
   .app, not a descendant, so an @container rule keyed to .app never reaches
   it. The size is small enough to want the floor on every screen anyway. */
.skip-link{position:fixed;top:-100px;left:16px;z-index:100;padding:10px 16px;
  background:var(--brass);color:var(--paper);border-radius:8px;min-height:44px;
  display:flex;align-items:center;
  font-size:14px;font-weight:500;line-height:1;text-decoration:none;transition:top .12s ease;}
.skip-link:focus{top:12px;}

.app{container-type:inline-size; container-name:app; min-height:100vh; display:flex; flex-direction:column;}
.wrap{max-width:1000px; margin:0 auto; padding:0 32px; width:100%;}
/* Lets short pages still push the sticky mobile tab bar to the bottom. */
.app > .wrap{flex:1; display:flex; flex-direction:column;}

/* ═══ TOP NAV ═══ */
.nav{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--paper) 90%,transparent);backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid var(--line);}
.nav-in{max-width:1000px;margin:0 auto;padding:0 32px;height:60px;display:flex;align-items:center;gap:32px;}
.brand{display:flex;align-items:baseline;gap:9px;flex-shrink:0;}
.brand .glyph{font-family:'Newsreader',serif;font-size:19px;font-weight:600;color:var(--brass);letter-spacing:-.03em;}
.brand .word{font-family:'Newsreader',serif;font-size:16.5px;font-weight:500;}
.nav-links{display:flex;gap:24px;flex:1;}
.nlink{font-size:13.5px;font-weight:500;color:var(--ink-2);padding:4px 0;position:relative;transition:color .15s;}
.nlink::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1.5px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .2s;}
.nlink:hover{color:var(--ink);}
.nlink.on{color:var(--ink);}
.nlink.on::after{transform:scaleX(1);}
.nav-right{display:flex;align-items:center;gap:14px;flex-shrink:0;margin-left:auto;}
.rate-tag{font-family:'JetBrains Mono',monospace;font-size:11.5px;font-weight:500;color:var(--brass);letter-spacing:.04em;padding-right:14px;border-right:1px solid var(--line);}
.rate-tag[hidden]{display:none;}
.icb{width:26px;height:26px;display:grid;place-items:center;color:var(--ink-2);border-radius:4px;transition:.15s;}
.icb:hover{color:var(--ink);background:var(--surface-2);}
html[data-theme="dark"] .i-sun{display:none;}
html[data-theme="light"] .i-moon{display:none;}
.me{width:28px;height:28px;border:1px solid var(--line-2);border-radius:50%;display:grid;place-items:center;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--ink-2);transition:.15s;flex-shrink:0;overflow:hidden;}
.me:hover{border-color:var(--ink);color:var(--ink);}
.me img{width:100%;height:100%;object-fit:cover;display:block;}
.nav-signin{font-size:12.5px;font-weight:500;padding:7px 15px;border:1px solid var(--line-2);border-radius:3px;transition:.15s;white-space:nowrap;}
.nav-signin:hover{border-color:var(--ink);}
#nav-auth{display:flex;align-items:center;gap:12px;}
.nav-admin{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--brass);border:1px solid var(--brass);padding:4px 9px;border-radius:2px;transition:.15s;white-space:nowrap;}
.nav-admin:hover{background:var(--brass);color:var(--paper);}
.mob-only{display:none;}

/* ═══ NOTIFICATIONS ═══ */
.notif-wrap{position:relative;display:inline-flex;}
.notif-count{position:absolute;top:-3px;right:-4px;min-width:15px;height:15px;padding:0 4px;border-radius:8px;background:var(--brass);color:var(--paper);font-family:'JetBrains Mono',monospace;font-size:8.5px;display:grid;place-items:center;}
/* display:grid above outranks the hidden attribute, so it needs saying. */
.notif-count[hidden]{display:none;}
/* ═══ DAY STREAK ═══
   Unlit is the ordinary state of a day that has not been earned yet: an
   outline, in the muted ink of everything else that is waiting. Lit is brass,
   the colour this site uses for a figure that means something. The difference
   has to read at a glance from across a bar, because that glance is the whole
   mechanism. */
.streak-tag{display:inline-flex;align-items:center;gap:5px;font-family:'JetBrains Mono',monospace;
  font-size:11.5px;font-weight:500;color:var(--ink-3);letter-spacing:.04em;padding-right:14px;
  border-right:1px solid var(--line);cursor:pointer;transition:color .18s;}
.streak-tag svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;}
.streak-tag:hover{color:var(--ink-2);}
.streak-tag.lit{color:var(--brass);}
/* The last day a long run can be saved. Not an alarm, but not the same grey
   as an ordinary unlit day either: something is actually at stake here. */
.streak-tag.grace{color:var(--warn,#c9803f);}
.streak-card .sflame.grace{color:var(--warn,#c9803f);}
.streak-tag.lit svg{fill:var(--brass);stroke:var(--brass);}
/* One pulse when a solve lights it, and then never again: a flame that moves
   on every page is a distraction rather than a reward. */
.streak-tag.just svg{animation:streak-pop .55s ease-out 2;}
@keyframes streak-pop{0%{transform:scale(1);}40%{transform:scale(1.35);}100%{transform:scale(1);}}
@media (prefers-reduced-motion:reduce){.streak-tag.just svg{animation:none;}}

.streak-panel{display:none;position:absolute;top:34px;right:0;width:272px;background:var(--surface);
  border:1px solid var(--line-2);border-radius:4px;box-shadow:0 10px 32px rgba(0,0,0,.16);z-index:70;}
.streak-panel.show{display:block;}
.streak-card{padding:22px 20px 20px;text-align:center;}
.streak-card .sflame{display:block;margin:0 auto 10px;color:var(--ink-3);}
.streak-card .sflame svg{width:52px;height:52px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linejoin:round;}
.streak-card .sflame.lit{color:var(--brass);}
.streak-card .sflame.lit svg{fill:var(--brass);stroke:var(--brass);}
.streak-card h3{font-size:19px;margin-bottom:14px;}
.streak-card .slede{font-size:12.5px;line-height:1.55;color:var(--ink-2);margin:14px 0 14px;}
.streak-card .sbest{font-size:11.5px;color:var(--ink-3);margin:-8px 0 14px;}
.streak-card .btn{width:100%;justify-content:center;}

/* The week, oldest first, so the gap you left is where you left it. */
/* On a profile the flame sits inline with the other figures, so it takes the
   line's own size rather than the bar's. */
.meta svg{vertical-align:-2px;fill:var(--brass);stroke:var(--brass);stroke-width:1.5;stroke-linejoin:round;}

.sweek{display:flex;justify-content:center;gap:6px;}
.sweek-d{display:flex;flex-direction:column;align-items:center;gap:5px;}
.sweek-d i{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);font-style:normal;}
.sweek-d b{display:flex;align-items:center;justify-content:center;width:22px;height:22px;
  border:1px solid var(--line-2);border-radius:3px;font-size:11px;font-weight:600;color:transparent;}
.sweek-d.on b{background:var(--brass);border-color:var(--brass);color:var(--surface);}
.sweek-d.now i{color:var(--ink);}
.sweek-d.now b{border-color:var(--ink-3);}
.sweek-d.now.on b{border-color:var(--brass);}

.notif-panel{display:none;position:absolute;top:34px;right:0;width:320px;max-height:400px;overflow-y:auto;background:var(--surface);border:1px solid var(--line-2);border-radius:4px;box-shadow:0 10px 32px rgba(0,0,0,.16);z-index:70;}
.notif-panel.show{display:block;}
.notif-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--line);font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);}
.notif-head button{font-family:inherit;font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);transition:color .15s;}
.notif-head button:hover{color:var(--ink);}
.notif{display:flex;gap:11px;padding:12px 14px;border-bottom:1px solid var(--line);transition:background .15s;}
.notif:last-child{border-bottom:none;}
.notif:hover{background:var(--surface-2);}
.notif.unread{background:var(--brass-2);}
.notif-icon{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--brass);flex-shrink:0;width:14px;}
.notif-main{min-width:0;}
.notif-title{display:block;font-size:13px;font-weight:500;}
.notif-body{display:block;margin-top:2px;font-size:12px;color:var(--ink-2);white-space:pre-line;}
.contrib-remark{display:block;margin-top:4px;font-size:12.5px;color:var(--ink-2);white-space:pre-line;}
.notif-when{display:block;margin-top:4px;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);}
.notif-empty{padding:22px 14px;text-align:center;color:var(--ink-3);font-size:13px;}

/* ═══ MOBILE BOTTOM TABS ═══ */
/* Solid rather than translucent, with a shadow under the page above it: a
   reader on a phone could not tell the bar from the page it was floating
   over, which made the whole navigation invisible to anyone who had not
   been told it was there. */
.tabs{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:45;
  background:var(--paper);
  border-top:1px solid var(--line-2);
  box-shadow:0 -10px 26px color-mix(in srgb,var(--ink) 12%,transparent);
  padding:7px 6px calc(7px + env(safe-area-inset-bottom));
}
.tabs .row{display:grid; grid-auto-flow:column; grid-auto-columns:1fr;}
.tab{display:flex;flex-direction:column;align-items:center;gap:4px;padding:5px 0;color:var(--ink-3);transition:color .15s;position:relative;}
.tab svg{display:block;}
.tab span{font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;}
/* Where you are, said twice: in the brass the site uses for anything live,
   and with a mark on the edge of the bar above the tab. Colour alone was
   one step of grey apart from the rest and went unnoticed. */
.tab.on{color:var(--brass);}
.tab.on span{font-weight:600;}
.tab.on::before{content:'';position:absolute;top:-7px;left:20%;right:20%;height:2px;
  border-radius:0 0 2px 2px;background:var(--brass);}

/* ═══ MOBILE OVERFLOW SHEET ═══ */
.sheet{display:none;position:fixed;inset:0;z-index:60;background:color-mix(in srgb,var(--paper) 82%,transparent);backdrop-filter:blur(8px);}
.sheet.show{display:block;}
.sheet-in{position:absolute;left:14px;right:14px;bottom:14px;background:var(--surface);border:1px solid var(--line-2);border-radius:12px;overflow:hidden;}
.sheet-in a,.sheet-in button{display:block;width:100%;text-align:left;padding:15px 20px;font-size:14.5px;border-bottom:1px solid var(--line);font-family:inherit;}
.sheet-in :last-child{border-bottom:none;color:var(--ink-3);}

/* ═══ SHELL ═══ */
.page{padding:52px 0 96px;animation:fade .32s ease;flex:1;}
@keyframes fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){.page{animation:none;}*{transition-duration:.01ms !important;}}
.eyebrow{font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:13px;}
.ptitle{font-size:38px;margin-bottom:8px;}
/* A lede runs the width of the thing it introduces. The container caps it
   at 1000 pixels, which is the same edge the board, the search field and
   every table on the page stop at, and a line that ends where the rows end
   reads as deliberate where a shorter one reads as a mistake. */
.plede{color:var(--ink-2);font-size:14.5px;line-height:1.65;margin-bottom:38px;}
.shead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:13px;border-bottom:1px solid var(--line);margin-bottom:4px;}
.shead h2{font-size:15.5px;font-weight:500;}
.shead .more{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;}
.tp{display:inline-flex;align-items:center;gap:6px;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--c);background:var(--cbg);padding:3px 8px;border-radius:2px;white-space:nowrap;}
.tp b{width:4px;height:4px;border-radius:50%;background:var(--c);display:block;}

/* ═══ BUTTONS ═══ */
.btn{font-size:12.5px;font-weight:500;padding:9px 20px;border-radius:3px;transition:.15s;white-space:nowrap;display:inline-block;text-align:center;}
.btn-solid{background:var(--ink);color:var(--paper);}
.btn-solid:hover{opacity:.85;}
.btn-line{border:1px solid var(--line-2);color:var(--ink);}
.btn-line:hover{border-color:var(--ink);}
.btn:disabled{opacity:.5;cursor:default;}
.btn-full{width:100%;}

/* ═══ HERO / HOME ═══ */
.hero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:54px;align-items:start;padding-bottom:50px;}
.hero-grid h1{font-size:52px;letter-spacing:-.028em;margin-bottom:18px;max-width:12ch;}
.hero-grid h1 em{font-style:italic;color:var(--brass);font-weight:400;}
.hero-grid .sub{color:var(--ink-2);font-size:15.5px;max-width:min(56ch,100%);line-height:1.65;}

/* ═══ LIVE PROBLEM PANEL ═══ */
.live{border:1px solid var(--line);background:var(--surface);border-radius:3px;overflow:hidden;}
.live-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 20px;border-bottom:1px solid var(--line);background:var(--cbg);}
.live-src{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--c);}
.live-rate{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--brass);}
.live-body{padding:26px 22px 20px;display:flex;gap:16px;}
.spine{width:3px;background:var(--line);border-radius:2px;flex-shrink:0;position:relative;}
.spine i{position:absolute;bottom:0;left:0;right:0;background:var(--c);border-radius:2px;display:block;}
/* Display maths sets to whatever width the expression needs, and the card
   clips at its edge, so a wide equation was simply cut off with no way to
   reach the rest. It scrolls in its own right instead: the card keeps its
   shape and the page never scrolls sideways.

   Applied to every place maths is rendered, not just the problem card, since
   a solution or a comment can carry the same expression. */
/* safe centring is what makes both cases work: an equation that fits is
   centred as it should be, and one that overflows falls back to starting at
   the left edge, which is what keeps the beginning of it reachable. Plain
   centring pushes the left of an over-wide equation outside the scroll
   origin, where nothing can bring it back. */
.katex-display{overflow-x:auto;overflow-y:hidden;padding:2px 0 6px;
  display:flex;justify-content:safe center;}
.live-q{font-family:'Newsreader',serif;font-size:17.5px;line-height:1.55;white-space:pre-line;}
/* A list is a block of its own, so it drops the paragraph's pre-line: source
   indentation would otherwise show up in front of every item, and a wrapped
   line would keep the break the author's editor happened to put there. */
.lx-list{margin:.6em 0;padding-left:1.5em;white-space:normal;}
.lx-list .lx-list{margin:.35em 0 0;}
.lx-list li{margin:.3em 0;}
.lx-list li.lx-custom{list-style:none;position:relative;}
/* A label the author wrote, such as (a), hangs where the marker would be. */
.lx-list li.lx-custom > .lx-mark{position:absolute;right:100%;padding-right:.45em;white-space:nowrap;}
.live-q i{font-style:italic;}
/* The figure is normalised to currentColor upstream, so colour comes from
   the inherited --ink and it reads on either theme without a second file.
   The SVG carries a viewBox but no width, which is what lets it scale. */
/* A video linked in a comment, shown under it. Nothing loads from YouTube
   until the thumbnail is clicked; the player is the nocookie domain. */
.unranked{font-family:'JetBrains Mono',monospace;font-size:9px;font-style:normal;letter-spacing:.08em;
  text-transform:uppercase;color:var(--comb);border:1px solid var(--comb);border-radius:2px;
  padding:1px 5px;margin-left:7px;vertical-align:1px;}

/* An account under an integrity flag, said plainly on its public profile
   and nowhere else: the reason and the evidence stay with the admin. */
.flag-note{border:1px solid var(--comb);background:var(--comb-bg);border-radius:4px;
  padding:12px 15px;margin-bottom:20px;font-size:13.5px;line-height:1.55;color:var(--ink);}
.flag-note b{color:var(--comb);}

/* The Community page's contributors: who proposed the problems, by count. */
/* Two columns filled top to bottom, 1-5 then 6-10, so a page of ten is always
   a full five by two and reads down like a ranking. One column on a phone. */
.comm-contribs{display:grid;grid-template-columns:1fr;gap:8px;margin:12px 0 0;}
@media (min-width:720px){
  .comm-contribs{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(5,auto);grid-auto-flow:column;}
}
#comm-contrib-pager{padding-top:0;margin:18px 0 40px;}
#comm-contrib-pager:empty{margin:0 0 34px;}
.comm-contrib{display:flex;align-items:baseline;gap:10px;padding:11px 14px;border:1px solid var(--line);border-radius:3px;background:var(--surface);transition:border-color .15s;}
.comm-contrib:hover{border-color:var(--brass);}
.comm-contrib .n{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--brass);min-width:18px;}
.comm-contrib .who{flex:1;min-width:0;font-size:14px;font-weight:500;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.comm-contrib .cnt{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-3);white-space:nowrap;}

.ytcard{white-space:normal;margin:14px 0 4px;max-width:460px;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:#0B0D10;}
.ytcard-play{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;background:none;cursor:pointer;}
.ytcard-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.ytcard-play::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(11,13,16,.55),rgba(11,13,16,0) 45%);}
.ytcard-mark{position:absolute;left:12px;bottom:12px;z-index:1;display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:2px;border:1px solid rgba(240,239,234,.34);background:rgba(11,13,16,.62);color:#F0EFEA;font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;transition:background .18s,border-color .18s,color .18s;}
.ytcard-play:hover .ytcard-mark,.ytcard-play:focus-visible .ytcard-mark{background:var(--brass);border-color:var(--brass);color:#0B0D10;}
.ytcard iframe{display:block;width:100%;aspect-ratio:16/9;border:0;}
.ytcard-foot{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:9px 12px;background:var(--surface);border-top:1px solid var(--line);}
.ytcard-title{font-family:'Archivo',sans-serif;font-size:12.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ytcard-foot .ulink{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;white-space:nowrap;}

.live-figure{margin:18px 0 4px;color:var(--ink);}
/* width must be explicit: an inline SVG with no width attribute defaults to
   height:100% of an auto-height parent, which collapses it to nothing. With
   a width set, height:auto derives from the viewBox's aspect ratio. */
.live-figure svg{display:block;width:100%;max-width:min(calc(460px * var(--fig-scale,1)),100%);height:auto;margin:0 auto;}
.choices{padding:4px 22px 22px 41px;display:flex;flex-direction:column;gap:1px;}
.choice{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:10px 12px;border:1px solid transparent;border-radius:3px;transition:.14s;}
.choice:hover{background:var(--surface-2);}
.choice .key{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--ink-3);width:16px;height:16px;border:1px solid var(--line-2);border-radius:50%;display:grid;place-items:center;flex-shrink:0;transition:.14s;}
.choice .val{font-family:'Newsreader',serif;font-size:16px;}
.choice.pick{border-color:var(--line-2);background:var(--surface-2);}
.choice.pick .key{background:var(--ink);border-color:var(--ink);color:var(--paper);}
.choice.right{border-color:var(--pos);background:color-mix(in srgb,var(--pos) 9%,transparent);}
.choice.right .key{background:var(--pos);border-color:var(--pos);color:var(--paper);}
.choice.wrong .key{border-color:var(--neg);color:var(--neg);}
.choice .mark{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;}
.choice.right .mark{color:var(--pos);}
.choice.wrong .mark{color:var(--neg);}
.live-foot{padding:14px 22px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.live-foot .stat{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--ink-3);letter-spacing:.05em;}
.live-foot .stat.ok{color:var(--pos);}
.live-foot .stat.no{color:var(--neg);}
.numeric-entry{padding:4px 22px 22px 41px;}
.numeric-row{display:flex;align-items:center;gap:12px;max-width:300px;}
.signflip{flex-shrink:0;width:44px;height:44px;border-radius:10px;
  border:1px solid var(--line-2);background:transparent;color:var(--ink-2);
  font-size:19px;line-height:1;cursor:pointer;
  transition:border-color .15s,color .15s,background .15s;}
.signflip:hover{border-color:var(--ink-3);color:var(--ink);}
.signflip.on{border-color:var(--c);color:var(--c);background:var(--cbg);}
.signflip:focus-visible{outline:2px solid var(--c);outline-offset:2px;}
.numeric-entry input{width:100%;max-width:260px;background:transparent;border:none;border-bottom:1px solid var(--line-2);padding:7px 0;font-family:'JetBrains Mono',monospace;font-size:15px;transition:border-color .15s;}
.numeric-entry input:focus{outline:none;border-bottom-color:var(--ink);}

/* ═══ ARCHIVE COMPOSITION BAR ═══ */
.comp{padding-bottom:52px;}
.comp-bar{display:flex;height:46px;gap:2px;margin-bottom:18px;}
.comp-seg{background:var(--c);border-radius:2px;opacity:.9;transition:opacity .18s,transform .18s;min-width:3px;}
.comp-seg:hover{opacity:1;transform:scaleY(1.08);}
.comp-key{display:grid;grid-template-columns:repeat(5,1fr);gap:11px 18px;margin-bottom:52px;}
.comp-key a{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-2);}
.comp-key i{width:9px;height:9px;border-radius:2px;background:var(--c);display:block;flex-shrink:0;}
.comp-key span{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-3);margin-left:auto;}
.comp-key a:hover{color:var(--ink);}

/* ═══ STAT GROUPS ═══ */
.strip{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:52px;}
.strip div{padding:22px 0;}
.strip div + div{border-left:1px solid var(--line);padding-left:24px;}
.strip .n{font-family:'JetBrains Mono',monospace;font-size:22px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.strip .l{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin-top:5px;}
.stat-line{display:grid;grid-template-columns:repeat(auto-fit,minmax(152px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden;margin-bottom:44px;}
.stat-line div{display:flex;align-items:baseline;gap:9px;padding:16px 18px;background:var(--paper);}
.stat-line .n{font-family:'JetBrains Mono',monospace;font-size:20px;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums;}
.stat-line .l{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);}

/* ═══ PROBLEM ROWS ═══ */
.filters{display:flex;gap:18px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:4px;}
.fchip{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-3);font-weight:500;padding:2px 0;border-bottom:1.5px solid transparent;transition:.15s;white-space:nowrap;}
.fchip i{width:6px;height:6px;border-radius:50%;background:var(--c,var(--ink-3));display:block;}
.fchip:hover{color:var(--ink);}
.fchip.on{color:var(--ink);border-bottom-color:var(--c,var(--ink));}
.prow{display:grid;grid-template-columns:4px 1fr auto auto;gap:20px;align-items:center;padding:17px 12px 17px 0;border-bottom:1px solid var(--line);transition:background .15s;width:100%;text-align:left;}
.prow:hover{background:var(--surface-2);}
.prow .sp{height:36px;background:var(--line);border-radius:2px;position:relative;overflow:hidden;}
.prow .sp i{position:absolute;bottom:0;left:0;right:0;background:var(--c);display:block;}
.prow .body{min-width:0;}
.prow .ttl{font-family:'Newsreader',serif;font-size:16.5px;margin-bottom:6px;display:block;}
.prow .meta{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--ink-3);letter-spacing:.06em;display:flex;gap:11px;align-items:center;flex-wrap:wrap;}
.prow .meta .done{color:var(--pos);}
.prow .meta .forfeited{color:var(--ink-3);font-style:italic;}
.prow .rate{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--brass);}
.prow .pct{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-3);width:44px;text-align:right;}

/* ═══ LOCKED DISCUSSION ═══ */
.locked-note{display:flex;align-items:center;gap:11px;padding:26px 0;color:var(--ink-3);font-size:13.5px;}
.locked-note svg{flex-shrink:0;}
.live-actions{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.giveup-note{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);}

/* ═══ THREADED COMMENTS ═══ */
.cmt-controls{display:flex;justify-content:flex-end;padding:30px 0 14px;border-bottom:1px solid var(--line);}
a.who-name{transition:color .15s;}
a.who-name:hover{color:var(--brass);}
.cmt-actions{display:flex;align-items:center;gap:6px;margin-top:9px;}
.vote{width:22px;height:22px;display:grid;place-items:center;border:1px solid transparent;border-radius:3px;color:var(--ink-3);transition:.14s;}
.vote:hover:not(:disabled){color:var(--ink);border-color:var(--line-2);}
.vote:disabled{opacity:.3;cursor:default;}
.vote.up.on{color:var(--pos);border-color:var(--pos);}
.vote.down.on{color:var(--neg);border-color:var(--neg);}
.cmt-score{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--ink-2);min-width:16px;text-align:center;}
.cmt-reply{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin-left:8px;transition:color .14s;}
.cmt-reply:hover{color:var(--ink);}
/* Each level indents behind a rule, so the nesting reads without boxes. */
.cmt.d1,.cmt.d2{margin-left:20px;padding-left:16px;border-left:1px solid var(--line);}
.reply-box{margin:14px 0 4px;}
.reply-input{width:100%;min-height:66px;padding:11px 13px;border:1px solid var(--line-2);border-radius:3px;font-family:inherit;font-size:14px;background:var(--surface);resize:vertical;margin-bottom:9px;}
.reply-input:focus{outline:none;border-color:var(--ink);}

/* ═══ REVEALED ANSWER ═══ */
.revealed{display:flex;align-items:baseline;gap:12px;margin-top:14px;padding:11px 14px;border:1px solid var(--pos);border-radius:3px;background:color-mix(in srgb,var(--pos) 8%,transparent);}
.revealed .lbl{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--pos);}
.revealed .val{font-family:'JetBrains Mono',monospace;font-size:16px;color:var(--pos);}
.choice:disabled{cursor:default;}

/* ═══ TAGS + SUGGESTION ═══ */
#tags-root .tagrow{padding:20px 0 0;}
.tag-suggest{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);border:1px dashed var(--line-2);padding:3px 9px;border-radius:2px;transition:.15s;}
.tag-suggest:hover{border-color:var(--ink);color:var(--ink);}
.suggest-box{margin-top:18px;padding:20px;border:1px solid var(--line);border-radius:4px;max-width:380px;}

/* ═══ NEXT ═══ */
#next-root{padding:22px 0 0;}
.next-btn{display:inline-flex;}
.all-done{font-family:'Newsreader',serif;font-size:18px;color:var(--pos);padding:6px 0;}

/* ═══ FASTEST SOLVERS ═══ */
.first-solvers-bar{padding:26px 0 0;}
.first-solvers{margin-top:16px;border-top:1px solid var(--line);}
.frow{display:grid;grid-template-columns:44px 1fr auto;gap:14px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line);font-size:13.5px;}
.fpos{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--ink-3);}
.fname{font-weight:500;}
.fcountry{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.05em;color:var(--ink-3);}

/* ═══ DIFFICULTY VOTE ═══ */
.votebox{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:20px 0;border-bottom:1px solid var(--line);margin-top:26px;}
.vlabel{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);}
.vscale{display:flex;gap:5px;}
.vbtn{width:27px;height:27px;border:1px solid var(--line-2);border-radius:3px;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-2);transition:.14s;}
.vbtn:hover{border-color:var(--ink);color:var(--ink);}
.vbtn.on{background:var(--brass);border-color:var(--brass);color:var(--paper);}
.vnote{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-left:auto;}

/* ═══ NEW BADGE + FEATURED ═══ */
.newtag{font-family:'JetBrains Mono',monospace;font-size:8.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--brass);border:1px solid var(--brass);padding:2px 6px;border-radius:2px;}
.featured-label{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--brass);margin-bottom:10px;}
.featured-open{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-left:12px;transition:color .15s;}
.featured-open:hover{color:var(--ink);}

/* ═══ ADMIN PANEL ═══ */
.adm-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,14px);opacity:0;transition:.22s;z-index:90;background:var(--pos);color:var(--paper);padding:12px 20px;border-radius:3px;font-size:13.5px;font-weight:500;box-shadow:0 8px 24px rgba(0,0,0,.2);max-width:90vw;}
.adm-toast.show{opacity:1;transform:translate(-50%,0);}
.contrib-status{font-family:'JetBrains Mono',monospace;font-size:8.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;padding:3px 8px;border-radius:2px;flex-shrink:0;width:76px;text-align:center;}
.contrib-status.accepted{background:color-mix(in srgb,var(--pos) 16%,transparent);color:var(--pos);}
.contrib-status.pending{background:var(--surface-2);color:var(--ink-3);}
.contrib-status.rejected{background:color-mix(in srgb,var(--neg) 14%,transparent);color:var(--neg);}
.adm-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:30px;}
.adm-strip > div{background:var(--paper);padding:16px 18px;}
.adm-strip .n{display:block;font-family:'JetBrains Mono',monospace;font-size:20px;color:var(--ink);}
.adm-strip .l{display:block;margin-top:4px;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);}

.adm{border:1px solid var(--line);border-radius:3px;margin-bottom:10px;background:var(--surface);}
.adm > summary{display:flex;align-items:center;gap:12px;padding:15px 18px;cursor:pointer;list-style:none;user-select:none;}
.adm > summary::-webkit-details-marker{display:none;}
.adm > summary:hover{background:var(--surface-2);}
.adm-title{font-family:'Newsreader',serif;font-size:16px;flex:1;}
.adm-count{font-family:'JetBrains Mono',monospace;font-size:10px;background:var(--brass);color:var(--paper);padding:2px 7px;border-radius:9px;}
.adm-chev{color:var(--ink-3);transition:transform .18s;flex-shrink:0;}
.adm[open] > summary .adm-chev{transform:rotate(180deg);}
.adm[open] > summary{border-bottom:1px solid var(--line);}
.adm-body{padding:20px 18px 24px;}
.adm-note{font-size:12.5px;color:var(--ink-2);line-height:1.7;margin-bottom:16px;}
.adm-note code{font-family:'JetBrains Mono',monospace;font-size:11px;background:var(--surface-2);padding:1px 5px;border-radius:2px;}

.adm-split{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start;}
.adm-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.adm-preview-label{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px;}

/* A decision the importer cannot make for the reviewer. Brass because it is
   asking rather than reporting a fault: nothing here has gone wrong. */
.adm-callout{border:1px solid var(--brass);background:var(--brass-2);border-radius:6px;
  padding:14px 18px;margin:0 0 18px;}
.adm-callout h4{font-family:'Newsreader',serif;font-size:16px;font-weight:500;margin-bottom:4px;}
.adm-callout .adm-note{margin-bottom:10px;}
.adm-callout .adm-item:last-child{border-bottom:0;padding-bottom:0;}
.adm-item{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);}
.adm-item.stacked{align-items:flex-start;flex-wrap:wrap;}
.adm-item:last-child{border-bottom:none;}
.adm-item.bad{opacity:.65;}
/* Done rather than wrong. .bad on a stacked row paints the red rule a failed
   CSV line gets, which is the opposite of what an announcement that went out
   as intended should look like. */
.adm-item.done{opacity:.6;}
.adm-item-main{flex:1;min-width:0;}
.adm-item-title{display:block;font-size:14px;font-weight:500;}
.adm-item-title em{font-style:normal;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-left:6px;}
.adm-item-meta{display:block;margin-top:3px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.05em;color:var(--ink-3);}
.adm-quote{margin-top:9px;white-space:pre-line;padding:11px 13px;background:var(--surface-2);border-radius:3px;font-size:13.5px;color:var(--ink-2);width:100%;}
.adm-actions{display:flex;gap:8px;flex-wrap:wrap;flex-shrink:0;}
.adm-actions .btn{padding:7px 13px;font-size:12px;}
.adm-line,.adm-date{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--ink-3);flex-shrink:0;width:78px;}
.adm-line{width:40px;}
/* A heading inside a section body. Not .adm-line, which is the 40px chip a
   CSV row's line number sits in and which folds a heading into a column. */
.adm-sub{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink);margin:0 0 10px;}
/* A row corrected in the panel rather than in the file. Brass, because that
   is what this palette uses for the thing worth noticing in a list. */
.adm-edited{color:var(--brass);margin-left:4px;font-weight:400;}

/* ═══ CONTESTS TABLE (admin) ═══ */
#contest-new,#contest-new-desc,.ct-label,.ct-desc{
  border:1px solid var(--line-2);border-radius:3px;background:var(--surface);
  padding:8px 11px;font-size:12.5px;font-family:inherit;color:var(--ink);width:100%;}
#contest-new,.ct-label{width:auto;min-width:160px;}
#contest-new-desc,.ct-desc{resize:vertical;line-height:1.5;margin-top:10px;}
.ct-desc{margin-top:0;min-width:220px;}
#contest-new:focus,#contest-new-desc:focus,.ct-label:focus,.ct-desc:focus{border-color:var(--ink-3);outline:none;}
.contest-table-wrap{overflow-x:auto;}
.contest-table{width:100%;border-collapse:collapse;}
.contest-table th{text-align:left;font-family:'JetBrains Mono',monospace;font-size:9.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding:0 10px 8px 0;}
.contest-table td{padding:8px 10px 8px 0;vertical-align:top;border-bottom:1px solid var(--line);}
.contest-table tr:last-child td{border-bottom:none;}
.contest-table .ct-meta{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--ink-3);
  white-space:nowrap;padding-top:16px;}
.contest-table .ct-save{margin-bottom:6px;}
.contest-table .msg{display:block;margin:0;font-size:11px;}
.adm-renamed{color:var(--brass);font-weight:500;}
/* The edit form inside the import dialog. Its fields sit tighter than the
   page forms do: sixteen columns at the usual 22px apart is a modal nobody
   reaches the bottom of. */
#prev-fields .fld{margin-bottom:13px;}
#prev-fields textarea{min-height:0;}
.modal-card .adm-sub{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);}
/* Two selectors, because the .modal-card rule setting 412px comes later in
   this file and a single class would lose to it. */
.modal-card.prev-card{max-width:640px;}
/* Sixteen fields put Previous and Next a long scroll below the row being
   read, which is the wrong place for the control you press most. The negative
   margins let the bar span the card's padding so nothing shows beside it as
   the fields pass underneath. */
.prev-card .modal-actions{position:sticky;bottom:-34px;z-index:1;flex-wrap:wrap;
  align-items:center;background:var(--surface);border-top:1px solid var(--line);
  margin:16px -34px -34px;padding:14px 34px 34px;}
.fld-edited > label{color:var(--brass);}
.fld-was{font-size:8.5px;letter-spacing:.1em;opacity:.75;}

.adm-setting{width:88px;border:1px solid var(--line-2);border-radius:3px;padding:7px 10px;font-family:'JetBrains Mono',monospace;font-size:12.5px;background:var(--surface);}
.adm select[multiple]{height:auto;padding:8px 10px;background-image:none;}

/* ═══ BROWSE CONTROLS ═══ */
.browse-bar{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px;}
.searchfield{display:flex;align-items:center;gap:9px;flex:1;min-width:210px;border:1px solid var(--line-2);border-radius:3px;padding:0 12px;background:var(--surface);transition:border-color .15s;}
.searchfield:focus-within{border-color:var(--ink);}
.searchfield svg{color:var(--ink-3);flex-shrink:0;}
.searchfield input{flex:1;border:none;background:none;padding:11px 0;font-size:14px;outline:none;}
.searchfield input::-webkit-search-cancel-button{cursor:pointer;}
.tagfield{flex:0 1 240px;}

.browse-filters{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px;}
.segmented{display:inline-flex;border:1px solid var(--line-2);border-radius:3px;overflow:hidden;}
.segmented button{font-size:12px;font-weight:500;padding:7px 14px;color:var(--ink-2);border-right:1px solid var(--line-2);transition:.15s;}
.segmented button:last-child{border-right:none;}
.segmented button:hover:not(:disabled){background:var(--surface-2);color:var(--ink);}
.segmented button.on{background:var(--accent);color:var(--paper);}
.segmented button:disabled{opacity:.4;cursor:default;}
.minisel{border:1px solid var(--line-2);border-radius:3px;background:var(--surface);padding:7px 30px 7px 11px;font-size:12px;color:var(--ink-2);cursor:pointer;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%238B9199' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:12px;}
.minisel:hover{border-color:var(--ink);}
.browse-count{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);}
.active-filters{display:flex;gap:8px;flex-wrap:wrap;padding:0 0 14px;}

.prow .solvers{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-3);width:44px;text-align:right;}

/* ═══ PAGER ═══ */
.pager{display:flex;align-items:center;justify-content:center;gap:18px;padding:30px 0 0;}
.pbtn{font-size:12.5px;font-weight:500;color:var(--ink-2);border:1px solid var(--line-2);border-radius:3px;padding:8px 15px;transition:.15s;}
.pbtn:hover:not(:disabled){border-color:var(--ink);color:var(--ink);}
.pbtn:disabled{opacity:.35;cursor:default;}
.pinfo{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);}

/* ═══ HOME SEARCH ═══ */
.home-search{padding:0 0 46px;}
.home-search .searchfield{max-width:520px;}
#home-results{margin-top:10px;}

/* ═══ TAGS ═══ */
.tagrow{display:flex;flex-wrap:wrap;gap:7px;padding:0 22px 18px 41px;}
.tagchip{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);border:1px solid var(--line);padding:3px 8px;border-radius:2px;transition:.15s;}
.tagchip:hover{border-color:var(--ink);color:var(--ink);}
/* Provenance rather than subject matter, so it reads as a different kind
   of fact from the topics beside it. */
.tagchip.contest{color:var(--brass);border-color:var(--brass);}
.tagchip.contest:hover{background:var(--brass-2);color:var(--brass);}
.tagchip.on{border-color:var(--ink);color:var(--ink);}

/* ═══ LEADERBOARD ═══ */
/* Six tabs do not fit a phone, so the strip scrolls itself rather than
   dragging the whole page sideways. */
.ltabs{display:flex;gap:22px;border-bottom:1px solid var(--line);margin-bottom:4px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}

/* ── A row that scrolls says so ──
   Both of these hide their scrollbar, which on a phone left the fourth
   leaderboard tab reading "Problems solv" with nothing to suggest there was
   a fifth. A shadow at each end, and only at the end there is more to see.

   Four background layers and no JavaScript. The two paper-coloured ones are
   attached `local`, so they travel with the content; the two dark ones are
   attached `scroll`, so they stay put against the box. At rest the cover
   sits exactly on top of the shadow and nothing shows. Scroll, and the cover
   slides away and uncovers it. A row with nothing to scroll never moves, so
   it never shows a shadow either, which is the whole point: the cue appears
   only when it means something. */
.ltabs, .scroll-cue{
  background:
    linear-gradient(to right, var(--paper) 40%, transparent) 0 0 / 26px 100% no-repeat local,
    linear-gradient(to left,  var(--paper) 40%, transparent) 100% 0 / 26px 100% no-repeat local,
    linear-gradient(to right, color-mix(in srgb, var(--ink) 22%, transparent), transparent) 0 0 / 18px 100% no-repeat scroll,
    linear-gradient(to left,  color-mix(in srgb, var(--ink) 22%, transparent), transparent) 100% 0 / 18px 100% no-repeat scroll;
}
.ltabs::-webkit-scrollbar{display:none;}
/* The overall score is on the board before it counts for anything, so the
   tab says so and the line under the tabs says what it is. */
.beta{font-style:normal;font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--brass);border:1px solid var(--brass);border-radius:3px;padding:1px 3px;margin-left:5px;vertical-align:1px;opacity:.85;}
.lnote{font-size:12.5px;line-height:1.55;color:var(--ink-3);margin:11px 0 2px;}
.lnote b{font-weight:600;color:var(--ink-2);}
/* The tier mark: beside a name on a board, a profile or a comment byline.
   Brass, except Rookie, which is where everyone starts and so says the
   least. */
.tmark{display:inline-flex;align-items:center;color:var(--brass);margin-left:5px;vertical-align:-3px;cursor:help;}
.tmark.dim{color:var(--ink-3);opacity:.75;}
.tmark svg{width:16px;height:16px;display:block;}
.nm .tmark svg{width:19px;height:19px;}
.cmt-meta .tmark{margin-left:3px;vertical-align:-2px;}
.cmt-meta .tmark svg{width:14px;height:14px;}
/* An over-cap problem: where the answer box would be. */
.caplock{border:1px dashed var(--line-2,var(--line));border-radius:6px;padding:14px 16px;margin:14px 0 2px;background:var(--paper-2,transparent);}
.caplock-t{display:block;font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--brass);margin-bottom:6px;}
.caplock p{font-size:13.5px;line-height:1.6;color:var(--ink-2);margin:0 0 11px;}
.caplock b{font-weight:600;color:var(--ink);}
.caplock-go{display:flex;flex-wrap:wrap;gap:8px;}
/* The problem's aside: where it came from, or what the statement is taking
   for granted. Smaller and quieter than the statement, and set off by a
   rule so it never reads as another sentence of the problem. */
.live-note{margin:16px 0 0;padding-top:11px;border-top:1px solid var(--line);
  font-size:12.5px;line-height:1.6;color:var(--ink-3);}
.live-note .katex{font-size:1em;}
/* The tier beside a season, in the past-seasons panel. */
.seasons-tier{font-size:12.5px;color:var(--ink-2);}
/* Where the comparison stops being about this season. */
.cmp-divider{border-top:1px solid var(--line-2);margin-top:6px;padding-top:10px;}
.cmp-divider .cmp-label{font-family:'JetBrains Mono',monospace;font-size:9.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);}
/* The two tables on the overall-score explainer. */
.score-table{width:100%;border-collapse:collapse;font-size:14px;margin:4px 0 20px;min-width:420px;}
.score-table th,.score-table td{text-align:center;padding:10px 12px;border-bottom:1px solid var(--line);}
.score-table thead th{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3);border-bottom:1px solid var(--line-2);}
/* The prose column wraps, so it reads left while the figures stay centred. */
.score-table td:last-child{text-align:left;color:var(--ink-2);}
.score-table thead th:last-child{text-align:left;}
.lnote a{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px;}
.lnote a:hover{color:var(--ink);}

/* ── A season's figures on a profile ── */
/* The strip is one season's, so it says which above itself rather than
   leaving a reader to assume a career total. */
.stat-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 11px;}
.stat-head-t{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);}
.stat-head-m{display:inline-flex;align-items:center;gap:3px;font-size:13px;color:var(--ink-2);}
.stat-head-m .tmark{margin-left:3px;}
.stat-past{display:flex;align-items:center;gap:12px;margin:-14px 0 40px;}
.stat-past .note{font-size:12.5px;color:var(--ink-3);}
.stat-head .more{margin-left:auto;}
.stat-head + .stat-line{margin-bottom:26px;}

/* The past-seasons panel: the seasons as cards, and the one being read
   beneath them. */
.seasons-modal{max-width:880px;}
.sncards{display:flex;gap:10px;overflow-x:auto;padding-bottom:8px;margin-bottom:20px;
  scrollbar-width:none;}
.sncards::-webkit-scrollbar{display:none;}
.sncard{flex:0 0 138px;display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:16px 10px;border:1px solid var(--line);border-radius:6px;background:var(--paper);
  font-family:inherit;transition:border-color .15s,background .15s;}
.sncard:hover{border-color:var(--ink-3);}
.sncard.on{border-color:var(--brass);background:color-mix(in srgb,var(--brass) 7%,var(--paper));}
.sncard-s{font-size:16.5px;font-weight:600;color:var(--ink);}
.sncard-d{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3);}
.sncard-m{display:block;margin:4px 0 2px;}
.sncard-m .tmark{margin:0;vertical-align:0;}
.sncard-m .tmark svg{width:30px;height:30px;}
.sncard-t{font-size:12.5px;color:var(--ink-2);}
.sncard-r{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.06em;
  color:var(--ink-3);}
.sndetail{min-height:120px;}
.sndetail-h{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:12px;}
.sndetail-s{font-size:17px;font-weight:600;}
.sndetail-t{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--ink-2);}
.seasons-modal .stat-line{margin-bottom:10px;}

/* ── What is coming ── */
.soon{border:1px solid var(--line);border-radius:6px;padding:15px 18px 13px;margin-bottom:26px;}
.soon-t{display:block;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--brass);margin-bottom:10px;}
.soon-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;}
.soon-list li{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;font-size:13.5px;}
.soon-day{flex:0 0 132px;color:var(--ink);font-weight:500;}
.soon-day i{font-style:normal;color:var(--ink-3);font-size:11.5px;margin-left:6px;}
.soon-slots{color:var(--ink-2);}
.soon-slots b{font-family:'JetBrains Mono',monospace;font-weight:500;color:var(--ink);}
.soon-slots em{font-style:normal;color:var(--ink-3);margin:0 7px;}
.soon-none{color:var(--ink-3);}
.soon-note{font-size:11.5px;color:var(--ink-3);margin:10px 0 0;}
@media (max-width:560px){ .soon-day{flex:0 0 100%;} }

/* ── A notice on the home page ── */
.notices{display:flex;flex-direction:column;gap:12px;margin:0 0 44px;}
.notice{border:1px solid color-mix(in srgb,var(--brass) 38%,var(--line-2));
  border-left:3px solid var(--brass);border-radius:6px;padding:19px 22px;
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb,var(--brass) 16%,transparent) 0%,
                    transparent 62%),
    linear-gradient(180deg, color-mix(in srgb,var(--brass) 7%,var(--surface)), var(--surface));
  box-shadow:0 1px 0 color-mix(in srgb,var(--brass) 18%,transparent);}
.notice-t{font-size:16.5px;margin:0 0 6px;}
.notice-b{font-size:13.5px;line-height:1.65;color:var(--ink-2);margin:0 0 10px;}
.notice-b:last-child{margin-bottom:0;}
.notice .btn{margin-top:2px;}
/* Which board the home page is showing, beside its heading. */
.lb-metric{color:var(--ink-3);font-weight:400;}
.ltab{font-size:13px;font-weight:500;color:var(--ink-3);padding:0 0 13px;position:relative;transition:color .15s;white-space:nowrap;flex:0 0 auto;}
.ltab::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1.5px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .2s;}
.ltab:hover{color:var(--ink);}
.ltab.on{color:var(--ink);}
.ltab.on::after{transform:scaleX(1);}
.lrow{display:grid;grid-template-columns:44px 1fr 88px 34px;gap:16px;align-items:center;padding:15px 12px 15px 0;border-bottom:1px solid var(--line);transition:background .15s;}
.lrow:hover{background:var(--surface-2);}
.lrow.self{background:var(--brass-2);}
.lrank{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--ink-3);display:flex;align-items:center;gap:8px;}
.lrow.self .lrank{color:var(--brass);}
.who{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:500;min-width:0;}
a.who .whoname{transition:color .15s;}
a.who:hover .whoname{color:var(--brass);}
.init{width:26px;height:26px;border:1px solid var(--line-2);border-radius:50%;display:grid;place-items:center;flex-shrink:0;font-family:'JetBrains Mono',monospace;font-size:9.5px;color:var(--ink-2);overflow:hidden;}
.init img{width:100%;height:100%;object-fit:cover;display:block;}
.who .aff{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--ink-3);letter-spacing:.06em;display:inline-flex;align-items:center;gap:5px;}
/* The name and the flag are separate elements so the narrow layout can
   keep one and drop the other, which means the gap between them has to
   be a real one rather than the space that used to be in the string. */
.who .aff-flag{font-size:12px;line-height:1;letter-spacing:0;}
.lval{font-family:'JetBrains Mono',monospace;font-size:13.5px;text-align:right;font-variant-numeric:tabular-nums;}
/* Quieter than the rating it sits beside: it is context, not the number the
   row is sorted by. */
.lsolved{font-style:normal;color:var(--ink-3);font-size:11.5px;}
/* A rating the system is not yet sure of. Deliberately quiet: the number is
   still the solver's real standing, and the mark is a caveat beside it
   rather than a penalty stamped on it. */
.prov{font-style:normal;color:var(--brass);opacity:.8;margin-left:3px;cursor:help;}
.medal{width:13px;height:13px;flex-shrink:0;}

/* ═══ CONTRIBUTE ═══ */
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:54px;margin-bottom:56px;}
/* A grid item will not shrink below the intrinsic width of its content
   unless told to, so on a narrow screen the single column was sized by the
   widest thing in the form and took the page sideways with it. */
.cgrid > *{min-width:0;}
.cblock h3{font-size:20px;margin-bottom:9px;}
.cblock p.note{color:var(--ink-2);font-size:13.5px;margin-bottom:26px;line-height:1.65;}
.crow{display:flex;gap:13px;align-items:center;padding:15px 0;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--ink-2);flex-wrap:wrap;}
.crow .nm{color:var(--ink);font-weight:500;flex-shrink:0;}
.crow .when{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--ink-3);flex-shrink:0;}

/* ═══ ACHIEVEMENT SEALS (§7.7 — SVG rings, never emoji) ═══ */
/* ══════════════ BADGES ══════════════ */
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px;padding:22px 0 0;}
.badge{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:16px 10px;border:1px solid var(--line);border-radius:3px;transition:border-color .15s;}
.badge:hover{border-color:var(--line-2);}
.badge svg{flex-shrink:0;}
.badge-name{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);line-height:1.45;}
.badge-next{font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.05em;color:var(--ink-3);}
.badge.lock{opacity:.34;}
.badge.lock .badge-name{color:var(--ink-3);}
.badges-card{max-width:640px;}
.badge-group{margin-bottom:26px;}
.badge-group h3{font-size:13px;font-family:'JetBrains Mono',monospace;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);font-weight:500;}
.badge-group .badges{padding-top:12px;}
@media (max-width:520px){.badges{grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:8px;}}

/* ═══ TOP-VOTED SOLUTIONS ═══ */
.solrow{display:grid;grid-template-columns:44px 1fr;gap:15px;align-items:start;padding:15px 0;border-bottom:1px solid var(--line);transition:background .15s;}
.solrow:last-child{border-bottom:none;}
.solrow:hover{background:var(--surface-2);}
.solscore{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--pos);text-align:right;padding-top:2px;}
.solbody{min-width:0;}
.soltext{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:14px;}
.solmeta{display:block;margin-top:5px;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--c);}

/* ═══ ACTIVITY FEED ═══ */
.arow{display:grid;grid-template-columns:8px 1fr auto;gap:15px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);font-size:13.5px;transition:background .15s;}
.arow:hover{background:var(--surface-2);}
.arow:last-child{border-bottom:none;}
.adot{width:7px;height:7px;border-radius:50%;background:var(--c);}
.arow .d{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--ink-3);}
.arow .d.up{color:var(--pos);}
.arow .d.dn{color:var(--neg);}
.arow em{font-style:normal;font-family:'Newsreader',serif;font-size:15px;}

/* ═══ ABOUT ═══ */
.about-lede{font-family:'Newsreader',serif;font-size:22px;line-height:1.5;max-width:min(36ch,100%);margin-bottom:44px;letter-spacing:-.01em;}
.ablock{display:grid;grid-template-columns:180px 1fr;gap:38px;padding:28px 0;border-top:1px solid var(--line);}
.ablock h3{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);padding-top:4px;}
.ablock p{color:var(--ink-2);font-size:14.5px;line-height:1.75;}
.ablock p + p{margin-top:14px;}
.ablock b{color:var(--ink);font-weight:500;}
.legend{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:46px;margin-bottom:56px;}

/* ═══ DISCUSSION ═══ */
.backlink{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);display:inline-block;margin-bottom:26px;transition:color .15s;}
.backlink:hover{color:var(--ink);}
.cmt{padding:16px 0;border-bottom:1px solid var(--line);}
.cmt:last-child{border-bottom:none;}
.cmt-meta{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.06em;color:var(--ink-3);display:flex;gap:12px;margin-bottom:7px;}
.cmt-meta .who-name{color:var(--ink-2);}
.cmt-body{font-family:'Newsreader',serif;font-size:15.5px;line-height:1.6;white-space:pre-wrap;}

/* The draft, rendered the way it will be posted. Dashed rather than solid so
   it reads as not-yet-real, and it takes the surface a comment sits on so the
   maths is judged against the background it will actually appear over. */
.cmt-preview{border:1px dashed var(--line-2);border-radius:3px;
  padding:12px 14px;margin:0 0 14px;background:var(--surface);}
.cmt-preview-tag{display:block;font-family:'JetBrains Mono',monospace;font-size:9.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin-bottom:7px;}
.cmt-preview .cmt-body{font-size:15px;}
.reply-box .cmt-preview{margin:0 0 9px;}
.cmt-preview-warn{font-family:'Archivo',sans-serif;font-size:12px;color:var(--neg);
  margin:10px 0 0;padding-top:9px;border-top:1px solid var(--line);}

/* ═══ FORMS (§7.10 — underline only, never filled boxes) ═══ */
.fld{margin-bottom:22px;}
/* A yes-or-no inside a dialog. The label above a field is a mono caption in
   caps, which is wrong for a sentence somebody has to read and decide on, and
   .fld input is a full-width line with a bottom border, which is wrong for a
   box. Both are undone here rather than given a new field type. */
.fld.check{margin-bottom:14px;}
.fld.check label{display:flex;align-items:flex-start;gap:9px;font-family:inherit;font-size:13.5px;
  letter-spacing:normal;text-transform:none;color:var(--ink);margin-bottom:0;cursor:pointer;}
.fld.check input{width:auto;flex:none;margin-top:2px;border-bottom:none;accent-color:var(--brass);}
.fld.check .hint{font-size:12px;line-height:1.5;color:var(--ink-2);margin:6px 0 0 23px;}
.fld label{display:block;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink);margin-bottom:8px;}
.fld input,.fld select,.fld textarea{width:100%;background:transparent;border:none;border-bottom:1px solid var(--line-2);padding:7px 0;font-size:14px;transition:border-color .15s;border-radius:0;}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-bottom-color:var(--ink);}
.fld textarea{min-height:64px;resize:vertical;font-family:'Newsreader',serif;font-size:15.5px;}
.fld input::placeholder,.fld textarea::placeholder{color:var(--ink-3);font-family:'Archivo',sans-serif;font-size:13.5px;}
.fld select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;padding-right:22px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%238B9199' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 0 center;background-size:13px;
}
.fld select option{background:var(--surface);color:var(--ink);}

/* ═══ AUTH ═══ */
.auth-page{padding:64px 0 96px;display:flex;justify-content:center;flex:1;}
.auth-card{width:100%;max-width:392px;}
.auth-card h1{font-size:29px;margin-bottom:8px;}
.auth-card .lede{color:var(--ink-2);font-size:13.5px;margin-bottom:32px;}
.auth-tabs{display:flex;gap:22px;border-bottom:1px solid var(--line);margin-bottom:30px;}
.auth-tab{font-size:13.5px;font-weight:500;color:var(--ink-3);padding:0 0 11px;position:relative;transition:color .15s;}
.auth-tab::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1.5px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .2s;}
.auth-tab:hover{color:var(--ink);}
.auth-tab.on{color:var(--ink);}
.auth-tab.on::after{transform:scaleX(1);}
.auth-divider{display:flex;align-items:center;gap:12px;margin:22px 0;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--line);}
.auth-links{margin-top:20px;display:flex;justify-content:center;gap:16px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;}
.auth-links a{color:var(--ink-3);transition:color .15s;}
.auth-links a:hover{color:var(--ink);}
.msg{font-size:12.5px;margin-bottom:18px;line-height:1.5;}
.msg:empty{display:none;}
.msg.error{color:var(--neg);}
.msg.success{color:var(--pos);}
.msg.info{color:var(--ink-2);}
.gbtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;font-size:13px;font-weight:500;padding:10px 20px;border:1px solid var(--line-2);border-radius:3px;transition:.15s;}
.gbtn:hover{border-color:var(--ink);}
.gbtn svg{flex-shrink:0;}

/* ═══ PROFILE ═══ */
.phead{display:flex;align-items:flex-start;gap:24px;margin-bottom:42px;}
/* overflow:hidden + object-fit:cover means any aspect ratio crops to a
   centred circle rather than distorting. */
.pav{width:74px;height:74px;border:1px solid var(--line-2);border-radius:50%;display:grid;place-items:center;flex-shrink:0;font-family:'Newsreader',serif;font-size:26px;font-weight:500;overflow:hidden;position:relative;}
.pav img{width:100%;height:100%;object-fit:cover;display:block;grid-area:1/1;}
.pav.editable{cursor:pointer;}
.pav-hint{
  position:absolute;inset:0;display:grid;place-items:center;
  background:color-mix(in srgb,var(--ink) 62%,transparent);color:var(--paper);
  font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.11em;text-transform:uppercase;
  opacity:0;transition:opacity .15s;
}
.pav.editable:hover .pav-hint,
.pav.editable:focus-within .pav-hint{opacity:1;}
.phead .nm{font-size:30px;margin-bottom:7px;}
.phead .meta{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-3);letter-spacing:.06em;display:flex;gap:16px;flex-wrap:wrap;}
.phead .meta b{color:var(--brass);font-weight:500;}
.phead-actions{margin-left:auto;display:flex;gap:10px;flex-shrink:0;}
.mrow{display:grid;grid-template-columns:14px 132px 1fr 40px;gap:14px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line);}
.mrow:last-child{border-bottom:none;}
.mrow .dot{width:8px;height:8px;border-radius:50%;background:var(--c);}
.mrow .t{font-size:13.5px;color:var(--ink-2);}
.mrow .t em{font-style:normal;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--ink-3);margin-left:6px;}
.shead .more{cursor:pointer;transition:color .15s;}
.shead button.more:hover{color:var(--ink);}
.mtrack{height:3px;background:var(--line);position:relative;border-radius:2px;overflow:hidden;}
.mtrack i{position:absolute;left:0;top:0;bottom:0;background:var(--c);display:block;}
.mrow .p{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-3);text-align:right;font-variant-numeric:tabular-nums;}

/* profile detail rows (view mode) */

/* ═══ MODAL (onboarding) ═══ */
.modal-overlay{position:fixed;inset:0;background:color-mix(in srgb,var(--paper) 80%,transparent);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:20px;z-index:100;}
.modal-card{background:var(--surface);border:1px solid var(--line-2);border-radius:3px;padding:34px;width:100%;max-width:412px;max-height:88vh;overflow-y:auto;}
/* The policy editor holds a whole legal document, so it needs the room. */
.modal-card.wide{max-width:820px;}
.modal-card h2{font-size:23px;margin-bottom:7px;}
.modal-card .lede{color:var(--ink-2);font-size:13.5px;margin-bottom:28px;}
.modal-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:8px;}

/* ═══ RECAP POP-UP (weekly / monthly top solvers) ═══ */
.recap-card{max-width:460px;padding:30px 30px 24px;}
.recap-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:22px;}
.recap-close{font-size:19px;line-height:1;color:var(--ink-3);padding:2px;flex-shrink:0;}
.recap-close:hover{color:var(--ink);}
.recap-card .eyebrow{margin-bottom:9px;}
.recap-card h2{font-size:22px;margin-bottom:5px;}
.recap-card .lede{color:var(--ink-2);font-size:13px;margin:0;}
.recap-cols{display:flex;align-items:center;gap:11px;padding:0 0 7px;}
.recap-cols span{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);}
.recap-cols .rc-name{flex:1;}
.recap-cols .rc-solved,.recap-cols .rc-rating{width:52px;text-align:right;}
.recap-list{border-top:1px solid var(--line);}
.recap-row{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--line);}
.rc-rank{width:20px;flex-shrink:0;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ink-3);display:flex;align-items:center;gap:3px;}
.rc-rank svg{width:12px;height:12px;flex-shrink:0;}
.rc-rank.top1{color:var(--brass);} .rc-rank.top2{color:var(--ink-2);} .rc-rank.top3{color:var(--geo);}
.recap-row .init{width:24px;height:24px;font-size:9px;}
.rc-who{flex:1;min-width:0;display:flex;align-items:center;gap:6px;overflow:hidden;}
.rc-name-txt{font-size:13.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* Flag only — the country name that `countryHtml` also renders is dropped
   here, not just hidden on narrow screens, since a full country name plus
   ten rows of numbers has no room in a pop-up at any width. */
.rc-who .aff-name{display:none;}
.rc-who .aff-flag{font-size:12px;line-height:1;flex-shrink:0;}
.rc-solved-val{width:52px;text-align:right;font-size:13.5px;font-weight:500;color:var(--ink);}
.rc-rating-val{width:52px;text-align:right;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--brass);}
.recap-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:18px;padding-top:16px;flex-wrap:wrap;}
.recap-foot .consent{margin:0;flex:1;min-width:200px;}
.recap-foot .consent label{font-size:12.5px;}

.state{color:var(--ink-3);font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:44px 0;text-align:center;}

/* ── Rows on their way ──
   Blocks laid into the real .prow and .lrow grids, so the placeholder has the
   height the answer will have. The sheen is a pseudo-element sliding across
   rather than an animated background-position, which keeps the animation on
   transform and off the paint path.

   It stops for anyone who asked motion to stop; the blocks stay, because the
   shape is the useful part and the movement is only a hint that something is
   still happening. */
.skel .prow, .skel .lrow{pointer-events:none;}
.sk{display:block;position:relative;overflow:hidden;border-radius:3px;
  background:var(--surface-2);height:11px;}
.sk::after{content:'';position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg, transparent,
    color-mix(in srgb, var(--ink) 8%, transparent), transparent);
  animation:skwave 1.5s ease-in-out infinite;}
@keyframes skwave{to{transform:translateX(100%);}}
@media (prefers-reduced-motion:reduce){.sk::after{animation:none;}}

/* The heights below are measured from the real rows, not guessed, because a
   placeholder of the wrong height moves the page when it is replaced, which
   is the fault it exists to avoid. A problem row's body is 52px (a 26px
   title over a 21px line of tags); a board row's tallest cell is 26px. The
   rest of each row's height comes from the shared .prow and .lrow padding. */
.skel .body{height:52px;display:flex;flex-direction:column;justify-content:center;gap:8px;}
.skel .lrow > .skcell{display:flex;align-items:center;height:26px;}

.sk-spine{height:34px;border-radius:2px;}
.sk-ttl{height:13px;}
.sk-meta{height:9px;width:38%;}
.sk-rate{height:11px;width:30px;}
.sk-solv{height:11px;width:18px;}
.sk-soonday{height:12px;width:92px;}
.sk-soonslot{height:12px;width:150px;}
.sk-soonnote{height:9px;width:180px;}
.sk-rank{height:11px;width:22px;}
.sk-name{height:13px;}
.sk-score{height:11px;width:52px;}
.sk-vs{height:11px;width:22px;}

/* Titles and names in three widths, cycled, so a column of them does not
   line up into a block. */
.sk-ttl.a, .sk-name.a{width:62%;}
.sk-ttl.b, .sk-name.b{width:44%;}
.sk-ttl.c, .sk-name.c{width:72%;}

/* ══════════ MOBILE (container queries, single 700px breakpoint) ══════════ */
/* ══ CHROME: phones and tablets ══
   The header needs about 850px to lay out six nav links beside the brand and
   the controls, so anything narrower than that gets the tab bar instead —
   which covers every iPad in portrait. Content layout is a separate question
   and keeps its own, narrower breakpoint below: a tablet has room for two
   columns even when it has no room for the nav. */
@container app (max-width:860px){
  .nav-links{display:none;}
  .nav-right{gap:7px;}
  /* The avatar duplicates the You tab below, so it gives up its place. XP
     stays: it is the number that moves when a problem is solved, and it
     still fits here -- it is only dropped once the bar genuinely runs out
     of room, well below this. */
  .nav-right .me{display:none;}
  .mob-only{display:grid;}
  .tabs{display:block;}
  /* .app is the query container, so it cannot be styled from inside its
     own block. The space the fixed bar needs is reserved below the last
     child instead. */
  .site-foot{margin-bottom:calc(60px + env(safe-area-inset-bottom));}
}

/* Measured, not guessed: with both tags shown the bar needs about 294px and
   first overflows just under 460. The streak is the one that earns its place
   on a narrow screen, so the rating is what goes. */
@container app (max-width:460px){
  .nav-right .rate-tag{display:none;}
}

@container app (max-width:700px){
  .wrap{padding:0 18px;}
  .nav-in{padding:0 18px;height:54px;gap:12px;}
  .brand .word{font-size:15px;}
  .page{padding:30px 0 26px;}

  .ptitle{font-size:29px;}
  .plede{font-size:13.5px;margin-bottom:26px;}
  .hero-grid{grid-template-columns:1fr;gap:28px;padding-bottom:38px;}
  .hero-grid h1{font-size:34px;max-width:none;}
  .hero-grid .sub{font-size:14.5px;}

  .live-body{padding:20px 16px 16px;}
  .live-q{font-size:16px;}
  .choices{padding:2px 16px 16px 33px;}
  .numeric-entry{padding:2px 16px 16px 33px;}
  .live-top,.live-foot{padding-left:16px;padding-right:16px;}
  .live-foot{flex-direction:column;align-items:stretch;gap:10px;}
  .live-foot .btn{width:100%;}
  .live-src{font-size:9.5px;}

  .strip{grid-template-columns:1fr 1fr;margin-bottom:38px;}
  .strip div{padding:16px 0;}
  .strip div + div{border-left:none;padding-left:0;}
  .strip div:nth-child(2),.strip div:nth-child(4){border-left:1px solid var(--line);padding-left:18px;}
  .strip div:nth-child(3),.strip div:nth-child(4){border-top:1px solid var(--line);}
  .strip .n{font-size:19px;}

  .stat-line{margin-bottom:32px;}
  .stat-line div{padding:13px 16px;flex:1 1 auto;}
  .stat-line .n{font-size:17px;}
  .stat-line .l{font-size:9px;}

  .comp-bar{height:34px;}
  .comp-key{grid-template-columns:1fr 1fr;gap:9px 14px;margin-bottom:38px;}
  .comp-key a{font-size:11.5px;}
  .comp{padding-bottom:38px;}

  /* Same cue as the leaderboard tabs; see .scroll-cue. Only on a phone,
     because this is the only width at which the chips stop wrapping and
     start scrolling. */
  .filters{gap:14px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    background:
      linear-gradient(to right, var(--paper) 40%, transparent) 0 0 / 26px 100% no-repeat local,
      linear-gradient(to left,  var(--paper) 40%, transparent) 100% 0 / 26px 100% no-repeat local,
      linear-gradient(to right, color-mix(in srgb, var(--ink) 22%, transparent), transparent) 0 0 / 18px 100% no-repeat scroll,
      linear-gradient(to left,  color-mix(in srgb, var(--ink) 22%, transparent), transparent) 100% 0 / 18px 100% no-repeat scroll;}
  .filters::-webkit-scrollbar{display:none;}
  /* Row drops the solve-% column; the spine grows so the category colour
     stays legible (§6). */
  .prow{grid-template-columns:4px 1fr auto auto;gap:14px;padding:15px 0;}
  .prow .ttl{font-size:15.5px;}
  .prow .sp{height:42px;}
  .prow .pct{display:none;}
  .prow .rate{font-size:12px;}
  .prow .solvers{width:auto;min-width:24px;font-size:10.5px;}

  .browse-bar{gap:9px;}
  .searchfield,.tagfield{flex:1 1 100%;min-width:0;}
  .browse-filters{gap:9px;}
  .segmented button{padding:7px 11px;font-size:11.5px;}
  .browse-count{margin-left:0;width:100%;}
  .pager{gap:12px;}

  .lrow{grid-template-columns:34px 1fr 62px 30px;gap:9px;padding:13px 0;}
  .lcmp{padding:4px 4px;}
  .who{font-size:13.5px;gap:10px;}
  /* The row has no width for "Philippines" here, but it has width for the
     flag, and the flag carries the same fact. */
  .who .aff-name{display:none;}
  .init{width:24px;height:24px;font-size:9px;}

  .adm-strip{grid-template-columns:repeat(2,1fr);}
  .adm-split,.adm-row{grid-template-columns:1fr;gap:18px;}
  .adm-item{flex-wrap:wrap;}
  .adm-actions{width:100%;}

  .cmt.d1,.cmt.d2{margin-left:10px;padding-left:12px;}
  .frow{grid-template-columns:32px 1fr auto;gap:10px;font-size:13px;}
  .suggest-box{max-width:none;}
  .votebox{gap:11px;}
  .vscale{gap:4px;}
  .vbtn{width:25px;height:25px;font-size:10px;}
  .vnote{margin-left:0;width:100%;}

  .cgrid{grid-template-columns:1fr;gap:40px;margin-bottom:38px;}
  .cblock p.note{max-width:none;}
  .crow{font-size:12.5px;gap:9px;}
  .crow .when{margin-left:0;}

  .seals{grid-template-columns:repeat(3,1fr);gap:20px 10px;}
  .arow{grid-template-columns:8px 1fr;row-gap:5px;}
  .arow .d{grid-column:2;justify-self:start;}

  .about-lede{font-size:19px;max-width:none;}
  .ablock{grid-template-columns:1fr;gap:12px;padding:22px 0;}
  .ablock p{font-size:13.5px;}
  .two-col{grid-template-columns:1fr;gap:36px;}
  .tagrow{padding:0 16px 14px 33px;}

  .phead{gap:16px;margin-bottom:28px;flex-wrap:wrap;}
  .pav{width:58px;height:58px;font-size:21px;}
  .phead .nm{font-size:24px;}
  .phead .meta{font-size:10px;gap:12px;}
  .phead-actions{margin-left:0;width:100%;}
  .phead-actions .btn{flex:1;}
  /* Bar drops to its own line; the percentage stays on the label's line
     rather than being pushed to a third row by auto-placement. */
  .mrow{grid-template-columns:14px 1fr auto;gap:11px;row-gap:9px;}
  .mrow .p{grid-row:1;grid-column:3;}
  .mrow .mtrack{grid-row:2;grid-column:1/-1;}


  .auth-page{padding:36px 0 40px;}
  .modal-card{padding:26px 22px;}

  /* ── Touch targets ──────────────────────────────────────────────────────
     WCAG 2.5.8 asks for 24px and a thumb would like 44. The controls here
     were drawn for a mouse: a filter chip answers to 19px of height, a nav
     icon to 26 square.

     Height is the part that is free, so most of this is bought with an
     invisible ::after rather than by making anything bigger. The chip keeps
     its size and its underline exactly where they were, and only the area
     that answers a tap grows.

     Width is not free in the nav: the brand, four icons and Sign in already
     take 313px of a 375px screen, so 44px icons would not fit. Their centres
     sit 33px apart, so they grow to 32 and stop there, which clears the 24px
     the standard asks for without two of them ever overlapping. The chips
     are 14px apart and grow by 5 a side, leaving 4px between hit areas. */
  .fchip, .icb{position:relative;}
  .fchip::after, .icb::after{content:'';position:absolute;}
  .fchip::after{inset:-13px -5px;}   /* 19 -> 45 tall, 'All' 15 -> 25 wide */
  .icb::after{inset:-9px -3px;}      /* 26 -> 44 tall, 26 -> 32 wide */

  /* These have room to grow for real, so they do. */
  .minisel{min-height:44px;}
  .segmented button{min-height:44px;}
  .brand{min-height:44px;}

  /* The home page's category list is a 2-column grid whose rows sit 9px
     apart. Padding it to 44 would push the page down by five rows' worth, so
     it takes 4px a side instead: 26px, past the 24 the standard asks for,
     with a pixel left between one row's hit area and the next. The width was
     never the problem at 163px. */
  .comp-key a{position:relative;}
  .comp-key a::after{content:'';position:absolute;inset:-4px 0;}

  /* "Full board" and "Archive" sit at the end of a section heading. 10px a
     side rather than the 14 that would reach 44, because the heading has a
     list directly under it and a hit area that hangs that far down would
     start catching taps meant for the first row. */
  .shead .more{position:relative;}
  .shead .more::after{content:'';position:absolute;inset:-10px -6px;}

  /* One leaderboard tab is labelled XP, which is 18px of text. The rest are
     wide enough already; this only sets a floor. */
  .ltab{min-width:44px;}

  /* The way back off a problem page, at 10.5px of uppercase mono: 16px tall
     and the only control on the page that missed. It sits alone above the
     statement with nothing beside it, so the hit area can grow in every
     direction without meeting anything. */
  .backlink{position:relative;}
  .backlink::after{content:'';position:absolute;inset:-14px -8px;}

  /* The footer links are 20px tall and 14px apart, so the ::after trick would
     have the rows overlapping and a tap landing between them would open the
     wrong page. Real padding instead, with the row gap given up to pay for it:
     the links reach 44px and the footer keeps roughly the height it had. */
  .site-foot.compact .foot-links{row-gap:0;}
  .foot-links a{padding:12px 0;}
}

/* ── Preview additions: title, topics and a pending schedule ── */
.live-main{flex:1;min-width:0;}
.live-title{font-family:'Newsreader',serif;font-size:15px;font-weight:600;margin-bottom:7px;}
.live-tags{display:flex;flex-wrap:wrap;gap:7px;padding:0 22px 18px;}
.live-tags .tagchip{cursor:default;}
.live-sched{padding:11px 22px;border-top:1px solid var(--line);font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--brass);}

/* ── Destructive confirmations read as such ── */
.btn.danger{border-color:var(--neg);color:var(--neg);}
.btn.danger:hover{background:var(--neg);color:var(--paper);}

/* ── Moderation log ── */
.adm-log-item{display:flex;align-items:baseline;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);}
.adm-log-when{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.05em;color:var(--ink-3);white-space:nowrap;flex-shrink:0;min-width:104px;}
.adm-log-body{flex:1;min-width:0;font-size:13.5px;}
.adm-log-actor{font-weight:500;}
.adm-log-actor em{font-style:normal;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-left:5px;}
.adm-log-act{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--c,var(--ink-2));margin:0 5px;}
.adm-log-remark{display:block;margin-top:4px;font-size:13px;color:var(--ink-2);font-style:italic;}

/* ── Topic chips input ── */
.taginput{display:flex;flex-wrap:wrap;align-items:center;gap:7px;padding:8px 10px;border:1px solid var(--line-2);border-radius:3px;background:var(--surface);}
.taginput:focus-within{border-color:var(--ink-3);}
.taginput-chips{display:contents;}
.taginput-chip{display:inline-flex;align-items:center;gap:6px;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink);border:1px solid var(--line-2);background:var(--surface-2);padding:4px 5px 4px 8px;border-radius:2px;}
.taginput-chip.new{border-color:var(--brass);color:var(--brass);}
.taginput-chip i{font-style:normal;font-size:8px;opacity:.7;}
.taginput-chip button{border:none;background:none;color:inherit;font-size:13px;line-height:1;padding:0 2px;cursor:pointer;opacity:.6;}
.taginput-chip button:hover{opacity:1;}
.taginput-field{flex:1;min-width:130px;border:none;background:none;color:var(--ink);font-family:inherit;font-size:13.5px;padding:3px 0;outline:none;}
.taginput-hint{margin-top:5px;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.05em;color:var(--brass);min-height:12px;}

/* ── Bookmarks ── */
/* The star lives beside the row rather than inside it: the row is an anchor,
   and a button nested in a link is neither valid nor reliably clickable. */
.prow-wrap{display:flex;align-items:stretch;gap:0;}
.prow-wrap .prow{flex:1;min-width:0;}
.prow-star{display:flex;align-items:center;justify-content:center;width:34px;flex-shrink:0;border:none;background:none;color:var(--ink-3);border-bottom:1px solid var(--line);cursor:pointer;transition:color .15s;}
.prow-star:hover{color:var(--brass);}
.prow-star.on{color:var(--brass);}
.prow-star:disabled{opacity:.5;cursor:default;}
.prow-wrap:hover{background:var(--surface-2);}
#bookmark-btn.on{border-color:var(--brass);color:var(--brass);}

/* ── Brand mark ── */
/* The artwork is dark line art over an opaque white disc, so the dark theme
   inverts it: the disc goes near-black against the paper and the lines read
   white, which is the same figure rather than a different one. */
.brand{align-items:center;}
.brand .glyph{height:26px;width:auto;display:block;flex-shrink:0;}
/* The mark fills its triangles with the surface colour behind it — that is
   what makes the weave — so one file cannot serve both themes. There are two,
   and only ever one is displayed. */
.brand .glyph-dark{display:none;}
html[data-theme="dark"] .brand .glyph-light{display:none;}
html[data-theme="dark"] .brand .glyph-dark{display:block;}
[data-theme="dark"] .brand .glyph{filter:invert(1);}
/* Tighter on phones: the nav is already crowded there, and the mark is
   wider than the letter it replaces. */
@media (max-width:640px){.brand{gap:7px;}.brand .glyph{height:18px;}}

/* ── Offences ── */
.adm-item-title em.banned{color:var(--neg);}
.adm-item.stacked.bad{opacity:1;border-left:2px solid var(--neg);padding-left:11px;}

/* ── Home hero quote ── */
/* Set apart from the sentence that follows it: it is someone else's line, and
   reading as body copy would flatten it into the site's own voice. */
.hero-grid .hero-quote{font-family:'Newsreader',serif;font-style:italic;font-size:17px;line-height:1.5;color:var(--ink);max-width:min(46ch,100%);margin-bottom:14px;padding-left:14px;border-left:2px solid var(--brass);}
@media (max-width:900px){.hero-grid .hero-quote{font-size:16px;}}

/* ══════════════ ANALYTICS ══════════════ */
.antiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden;margin-top:8px;}
.antile{background:var(--paper);padding:18px 20px;}
.antile .n{display:block;font-family:'JetBrains Mono',monospace;font-size:25px;font-weight:500;letter-spacing:-.02em;}
.antile .l{display:block;margin-top:5px;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);}
.antile .s{display:block;margin-top:6px;font-size:12px;color:var(--ink-2);}
.anote{color:var(--ink-2);font-size:13.5px;margin:-8px 0 16px;}
.anfoot{margin-top:46px;padding-top:18px;border-top:1px solid var(--line);font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.06em;color:var(--ink-3);}

/* ── What broke ──
   A fault reads as one block: the message in the page's own voice, then the
   facts about it in mono underneath, the way a problem row carries its
   figures. A resolved one stays legible but stops asking to be looked at. */
.errlist{display:flex;flex-direction:column;gap:2px;margin-top:14px;}
.errrow{padding:14px 0;border-bottom:1px solid var(--line);}
.errrow.done{opacity:.5;}
.errhead{display:flex;align-items:baseline;gap:12px;}
.errmsg{font-size:13.5px;color:var(--ink);word-break:break-word;}
.errhits{margin-left:auto;flex-shrink:0;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--brass);}
.errmeta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:7px;
  font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);}
.errdone{font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--ink-3);
  border-bottom:1px solid var(--line-2);transition:color .15s;}
.errdone:hover:not(:disabled){color:var(--ink);}
.errdone:disabled{opacity:.4;}
.errstack{margin-top:9px;}
.errstack summary{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);cursor:pointer;}
.errstack summary:hover{color:var(--ink-2);}
.errstack pre{margin-top:8px;padding:12px;background:var(--surface-2);border-radius:3px;
  font-family:'JetBrains Mono',monospace;font-size:11px;line-height:1.5;color:var(--ink-2);
  white-space:pre-wrap;word-break:break-word;overflow-x:auto;}

.chart{width:100%;height:auto;display:block;overflow:visible;}
.chart .grid{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke;}
.chart .axis{font-family:'JetBrains Mono',monospace;font-size:9px;fill:var(--ink-3);}

.anbars{display:flex;flex-direction:column;gap:9px;}
.anbar{display:grid;grid-template-columns:minmax(90px,1.1fr) 3fr minmax(64px,auto);gap:14px;align-items:center;}
.anbar-l{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.anbar-t{height:8px;background:var(--surface-2);border-radius:2px;overflow:hidden;}
.anbar-t i{display:block;height:100%;background:var(--c);border-radius:2px;transition:width .3s;}
.anbar-v{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--ink-3);text-align:right;white-space:nowrap;}

.antable-wrap{overflow-x:auto;}
.antable{width:100%;border-collapse:collapse;font-size:13px;min-width:600px;}
.antable th{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);font-weight:500;text-align:right;padding:0 0 11px;border-bottom:1px solid var(--line);}
.antable th:first-child{text-align:left;}
.antable td{padding:12px 0;border-bottom:1px solid var(--line);text-align:right;font-family:'JetBrains Mono',monospace;font-size:12px;}
.antable td:first-child{text-align:left;font-family:'Archivo',sans-serif;font-size:13.5px;}
.antable td.brass{color:var(--brass);}
.antable .tp{display:inline-flex;align-items:center;gap:7px;}
.antable .tp b{width:7px;height:7px;border-radius:50%;background:var(--c);display:inline-block;}

.angrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:34px;}
.anpanel h3{font-size:15px;margin-bottom:14px;}

@media (max-width:640px){
  .antile .n{font-size:21px;}
  .anbar{grid-template-columns:minmax(72px,1fr) 2fr auto;gap:10px;}
}

/* ── Social accounts ── */
.socials{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin-top:16px;}
.social{display:flex;align-items:center;gap:11px;padding:13px 15px;border:1px solid var(--line);border-radius:3px;transition:.15s;}
.social:hover{border-color:var(--ink);background:var(--surface-2);}
.social svg{flex-shrink:0;color:var(--ink-2);transition:color .15s;}
.social:hover svg{color:var(--ink);}
.social-n{font-size:13.5px;font-weight:500;}
.social-h{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.04em;color:var(--ink-3);}
@media (max-width:520px){.social-h{display:none;}}

/* One-attempt warning on multiple choice */
.one-shot{padding:0 22px 4px;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);}
.ansingle{display:flex;align-items:baseline;gap:14px;padding:20px 0;}
.ansingle .n{font-family:'JetBrains Mono',monospace;font-size:30px;font-weight:500;}
.ansingle .l{font-size:13px;color:var(--ink-3);}

/* ══════════════ LEGAL PAGES ══════════════ */
.legal{max-width:880px;}
.legal-meta{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin-top:-14px;}
.legal-toc{display:flex;flex-wrap:wrap;gap:8px 16px;margin:30px 0 8px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.legal-toc a{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);transition:color .15s;}
.legal-toc a:hover{color:var(--ink);}
.legal h2{font-size:21px;margin:42px 0 12px;scroll-margin-top:80px;}
.legal h3{font-size:15.5px;margin:26px 0 8px;color:var(--ink-2);}
.legal p{margin-bottom:13px;color:var(--ink-2);font-size:14.5px;line-height:1.7;}
.legal ul{margin:0 0 15px 20px;color:var(--ink-2);font-size:14.5px;line-height:1.7;}
.legal li{margin-bottom:7px;}
.legal b{color:var(--ink);font-weight:500;}
.legal-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px 34px;margin-bottom:18px;}
/* Asked once, after solving, and easy to decline. Loud enough to be seen
   past the answer, quiet enough not to feel like a toll. */
.nudge{display:flex;gap:16px;align-items:center;flex-wrap:wrap;justify-content:space-between;
  margin:22px 0 0;padding:14px 16px;border:1px solid var(--brass);background:var(--brass-2);border-radius:3px;}
.nudge-body{font-size:14px;line-height:1.6;color:var(--ink-2);}
.nudge-body b{color:var(--ink);}
.nudge-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.nudge-close{font-size:12.5px;color:var(--ink-3);padding:6px 4px;}
.nudge-close:hover{color:var(--ink);}
/* Left behind after the nudge sends someone here, so the control they were
   pointed at is obvious when they arrive. */
.votebox.asked{border-color:var(--brass);background:var(--brass-2);}
/* The rating line. Colours come from the page so it follows the theme, and
   the grid sits well behind the data rather than competing with it. */
.rc{margin:6px 0 4px;}
.rc-plot{position:relative;touch-action:pan-y;}
.rc-svg{display:block;width:100%;height:auto;overflow:visible;}
.rc-grid{stroke:var(--line);stroke-width:1;}
.rc-axis{stroke:var(--line-2);stroke-width:1;}
.rc-tick{fill:var(--ink-3);font-family:ui-monospace,'JetBrains Mono',monospace;font-size:10px;}
/* Where a season began. Dashed, so it reads as a boundary rather than as
   another gridline, and named in the air above the stretch it opens. */
.rc-season-line{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:3 4;opacity:.55;}
.rc-season{fill:var(--ink-3);font-family:ui-monospace,'JetBrains Mono',monospace;font-size:8.5px;
  letter-spacing:.1em;text-transform:uppercase;}
.rc-cross{stroke:var(--line-2);stroke-width:1;opacity:0;}
.rc-plot.on .rc-cross{opacity:1;}
.rc-focus{stroke:var(--surface);stroke-width:2;}
/* Sits above the plot and never under the pointer, or the move that opened
   it would immediately be a move that left. */
.rc-tip{position:absolute;pointer-events:none;background:var(--surface-2);border:1px solid var(--line-2);
  border-radius:6px;padding:8px 11px;min-width:104px;white-space:nowrap;
  box-shadow:0 6px 20px rgba(0,0,0,.18);z-index:2;}
.rc-tip-rate{font-size:16px;font-weight:600;color:var(--ink);
  font-family:ui-monospace,'JetBrains Mono',monospace;line-height:1.25;}
.rc-tip-day{font-size:11.5px;color:var(--ink-2);}
.rc-tip-games{font-size:11.5px;color:var(--ink-3);}
.rc-tip-row{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-2);margin-top:4px;}
.rc-tip-row i{width:9px;height:3px;border-radius:2px;display:block;flex:none;}
.rc-tip-row b{margin-left:auto;color:var(--ink);font-family:ui-monospace,Consolas,monospace;}
.rc-foot{display:flex;justify-content:space-between;margin-top:6px;
  font-size:11.5px;color:var(--ink-3);}
.rc-dot{stroke:var(--surface);stroke-width:1.5;}
.rc-legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:10px;}
.rc-key{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-2);}
.rc-key i{width:11px;height:3px;border-radius:2px;display:block;}
.rc-key b{color:var(--ink);font-family:ui-monospace,Consolas,monospace;}
.cmp-chart{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);}
.policy-admin{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 24px;}
.policy-archive{margin-top:52px;padding-top:22px;border-top:1px solid var(--line);}
.policy-archive h3{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:6px;}
.policy-past{display:grid;gap:2px;padding:12px 14px;margin-top:8px;border:1px solid var(--line);
  border-radius:3px;transition:.15s;}
.policy-past:hover{border-color:var(--ink-3);}
.policy-past.on{border-color:var(--brass);background:var(--brass-2);}
.policy-past-v{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ink);}
.policy-past-d,.policy-past-s{font-size:12.5px;color:var(--ink-3);}
.policy-notice{display:flex;gap:18px;align-items:center;flex-wrap:wrap;
  margin:0 0 30px;padding:16px 18px;border:1px solid var(--brass);
  background:var(--brass-2);border-radius:3px;}
.policy-notice p{margin:0;font-size:14px;line-height:1.65;color:var(--ink-2);}
.policy-notice.previewing{border-style:dashed;}
.legal-foot{display:flex;gap:22px;flex-wrap:wrap;margin-top:52px;padding-top:20px;border-top:1px solid var(--line);}
.ulink{text-decoration:underline;text-underline-offset:2px;color:var(--ink);}
.ulink:hover{color:var(--brass);}

/* Consent checkbox on sign-up and onboarding */
.consent{display:flex;align-items:flex-start;gap:10px;margin:4px 0 18px;font-size:13px;color:var(--ink-2);line-height:1.5;}
.consent input{margin-top:2px;flex-shrink:0;width:15px;height:15px;accent-color:var(--brass);cursor:pointer;}
.consent label{cursor:pointer;}

/* ══════════════ SITE FOOTER ══════════════ */
.site-foot{margin-top:70px;border-top:1px solid var(--line);background:var(--surface);}
.site-foot.compact{margin-top:56px;}
.site-foot.compact .foot-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;padding:18px 32px;}
.site-foot.compact .foot-links{flex-direction:row;flex-wrap:wrap;gap:18px;}
.site-foot.compact .foot-legal{padding:0;margin:0;max-width:none;}
@media (max-width:760px){
  .site-foot.compact .foot-in{padding:16px 22px;gap:8px 16px;}
  .site-foot.compact .foot-links{gap:14px;}
}
.foot-in{max-width:1000px;margin:0 auto;padding:38px 32px 30px;display:grid;grid-template-columns:1.4fr 1fr;gap:44px;}
.foot-brand{font-family:'Newsreader',serif;font-size:17px;font-weight:600;display:block;margin-bottom:10px;}
.foot-about p{color:var(--ink-2);font-size:13.5px;line-height:1.7;max-width:min(62ch,100%);}
.foot-links{display:flex;flex-direction:column;gap:9px;align-items:flex-start;}
.foot-links a{font-size:13px;color:var(--ink-2);transition:color .15s;}
.foot-links a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:2px;}
.foot-legal{max-width:1000px;margin:0 auto;padding:0 32px 34px;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.08em;color:var(--ink-3);}
@media (max-width:760px){
  .foot-in{grid-template-columns:1fr;gap:28px;padding:30px 22px 22px;}
  .foot-legal{padding:0 22px 26px;}
}

/* Problems on hold in the admin list */
.adm-item.held{opacity:.72;}
.adm-item-title em.held-tag{color:var(--brass);}

/* The proposer's solution, set apart from the statement in the review queue */
/* The solution as it will appear once posted. Boxed like the proposal quote
   so it reads as a preview rather than as part of the form. */
.adm-solution-preview{margin-top:24px;padding:14px 16px;background:var(--surface);
  border:1px solid var(--line);border-radius:3px;}
.adm-solution-preview .live-figure{margin:14px 0;}
.adm-quote.solution{border-left:2px solid var(--brass);background:var(--brass-2);}
.adm-quote.solution .adm-item-meta{margin-bottom:6px;}

/* Founding Mathlete toggle in the users list */
.adm-check{display:inline-flex;align-items:center;gap:7px;flex-shrink:0;cursor:pointer;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);}
.adm-check input{width:14px;height:14px;accent-color:var(--brass);cursor:pointer;}
.adm-check:hover{color:var(--ink-2);}
.adm-item-title em.founding{color:var(--brass);}

/* ══════════════ TAP-TO-REVEAL TOOLTIPS ══════════════ */
/* A title attribute is hover-only, so on a phone the text was unreachable. */
[data-tip]{cursor:help;}
.tip-pop{position:absolute;z-index:200;max-width:min(280px,calc(100vw - 24px));padding:9px 12px;
  background:var(--ink);color:var(--paper);border-radius:4px;font-size:12.5px;line-height:1.45;
  box-shadow:0 6px 20px rgba(0,0,0,.28);opacity:0;visibility:hidden;transition:opacity .13s;
  pointer-events:none;}
.tip-pop.show{opacity:1;visibility:visible;}

/* ══════════════ BADGE CATALOGUE ══════════════ */
.badge-intro{margin-bottom:8px;}
.badge-intro p{color:var(--ink-2);font-size:14.5px;line-height:1.7;margin-bottom:12px;}
.badge-intro b{color:var(--ink);font-weight:500;}
.badge-tally{color:var(--ink-2);font-size:13.5px;padding:16px 0 0;border-top:1px solid var(--line);margin-top:22px;}
.cat-badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden;margin-top:14px;}
.cat-badge{display:flex;gap:14px;padding:16px 18px;background:var(--paper);align-items:flex-start;}
.cat-badge.got{background:var(--surface);}
.cat-badge-icon{flex-shrink:0;padding-top:1px;}
.cat-badge-main{min-width:0;}
.cat-badge-name{display:block;font-size:14px;font-weight:500;}
.cat-badge-name em.got-tag{font-style:normal;font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--pos);margin-left:7px;}
.cat-badge-desc{display:block;margin-top:3px;font-size:13px;color:var(--ink-2);line-height:1.5;}
.tier-list{display:flex;flex-wrap:wrap;gap:5px 10px;margin-top:8px;}
.tier{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.05em;color:var(--ink-3);}
.tier b{color:var(--brass);font-weight:500;margin-right:4px;}
.tier-one{display:inline-block;margin-top:8px;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);}
.cat-badge-progress{display:block;margin-top:7px;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.05em;color:var(--brass);}

/* ═══ SHARE ═══ */
.share{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:22px 0 0;}
.share-label{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);margin-right:2px;}
.share-btn{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid var(--line-2);border-radius:2px;background:var(--surface);color:var(--ink-2);cursor:pointer;transition:.15s;}
.share-btn:hover{color:var(--ink);border-color:var(--ink-3);}
.share-btn.done{color:var(--pos);border-color:var(--pos);}
.share-txt{font-size:12.5px;font-weight:500;}
.share-url{flex:1 1 100%;min-width:0;margin-top:2px;padding:8px 10px;border:1px solid var(--line-2);border-radius:2px;background:var(--surface-2);color:var(--ink-2);font-family:'JetBrains Mono',monospace;font-size:12px;}

/* ═══ CATEGORY LANDING PAGES ═══ */
.page-intro{margin-bottom:34px;}
.page-intro p{color:var(--ink-2);font-size:14.5px;line-height:1.7;margin-bottom:12px;}
.cat-listhead{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding-bottom:11px;border-bottom:1px solid var(--line);margin-bottom:2px;}
.cat-listhead h2{font-size:19px;}
.cat-count{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.08em;color:var(--ink-3);}
.cat-more{margin-top:16px;}

/* Pages of a category, rendered by the Worker so that something which does
   not run scripts can walk the whole archive. */
.cat-pager{display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:18px;padding-top:16px;border-top:1px solid var(--line);}
.cat-pager a{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);transition:color .15s;}
.cat-pager a:hover{color:var(--ink);}
.cat-pos{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);}
.cat-more a{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--brass);}
.cat-more a:hover{color:var(--ink);}
.cat-other{margin-top:44px;padding-top:26px;border-top:1px solid var(--line);}
.cat-other h2{font-size:15px;margin-bottom:14px;}
.cat-chips{display:flex;flex-wrap:wrap;gap:8px;}
.cat-chip{padding:7px 12px;border:1px solid var(--line-2);border-radius:2px;font-size:13px;color:var(--ink-2);transition:.15s;}
.cat-chip:hover{color:var(--ink);border-color:var(--ink-3);}
.cat-strip{display:flex;flex-wrap:wrap;gap:7px;}
.cat-strip a{padding:6px 11px;border:1px solid var(--line);border-radius:2px;font-size:12.5px;color:var(--ink-3);transition:.15s;}
.cat-strip a:hover{color:var(--ink);border-color:var(--ink-3);}

/* ═══ CONTESTS LANDING PAGE ═══ */
.contest-group{margin-bottom:40px;}
.contest-group h2{font-size:19px;margin-bottom:4px;}
.contest-group .grouplede{color:var(--ink-3);font-size:13px;margin-bottom:16px;}
.contest-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;}
.contest-card{display:flex;flex-direction:column;gap:6px;padding:16px 18px;border:1px solid var(--line-2);border-radius:3px;transition:.15s;}
.contest-card:hover{border-color:var(--ink-3);}
.contest-card .cc-name{font-family:'Newsreader',serif;font-size:16.5px;font-weight:500;}
.contest-card .cc-tagline{font-size:12px;color:var(--ink-3);line-height:1.4;}
.contest-empty{padding:16px 18px;border:1px dashed var(--line-2);border-radius:3px;color:var(--ink-3);font-size:13px;}

/* ═══ ABOUT: HERO MARK ═══ */
.about-head{display:flex;align-items:flex-start;justify-content:space-between;gap:32px;}
.about-mark{width:150px;height:150px;flex-shrink:0;margin-top:4px;}
.about-mark-dark{display:none;}
html[data-theme="dark"] .about-mark-light{display:none;}
html[data-theme="dark"] .about-mark-dark{display:block;}
@container app (max-width:700px){
  .about-head{gap:18px;}
  .about-mark{width:84px;height:84px;}
}

/* ═══ ABOUT: VIDEO ═══ */
/* The poster fills the frame until it is clicked, and the iframe replaces it
   in the same box, so the layout never shifts at the swap. The background is
   the video's own black rather than a theme colour: a letterboxed player
   looks wrong against paper in light mode. */
.vplay{position:relative;aspect-ratio:16/9;max-width:640px;background:#0B0D10;border:1px solid var(--line);border-radius:3px;overflow:hidden;margin-top:18px;}
.vplay-btn{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer;}
.vplay-poster{width:100%;height:100%;object-fit:cover;display:block;}
/* The control sits in a corner rather than the middle: the poster is the
   video's title card, and a centred badge lands straight on the logo. */
.vplay-btn::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(11,13,16,.5),rgba(11,13,16,0) 42%);}
.vplay-mark{position:absolute;left:14px;bottom:14px;z-index:1;display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:2px;border:1px solid rgba(240,239,234,.34);background:rgba(11,13,16,.6);color:#F0EFEA;font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;transition:background .18s,border-color .18s,color .18s;}
.vplay-btn:hover .vplay-mark,.vplay-btn:focus-visible .vplay-mark{background:var(--brass);border-color:var(--brass);color:#0B0D10;}
.vplay iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.ablock p.vplay-note{font-size:12.5px;color:var(--ink-3);margin-top:12px;}
.site-foot.compact .foot-brand{margin-bottom:0;font-size:15px;}
.live-meta{display:flex;align-items:center;gap:12px;}
.live-streak{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-2);border:1px solid var(--line-2);border-radius:2px;padding:3px 7px;white-space:nowrap;}
.live-solution{border-top:1px solid var(--line);padding:14px 16px 16px 33px;}
.live-solution-label{display:block;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px;}
.live-solution-body{font-size:14px;line-height:1.65;color:var(--ink-2);white-space:pre-wrap;}

/* ═══ LEADERBOARD: FIND AND COMPARE ═══ */
.lb-find{margin-bottom:18px;}
.lb-hits{border:1px solid var(--line);border-radius:3px;margin-top:10px;overflow:hidden;}
.lb-hit{display:grid;grid-template-columns:28px 1fr auto auto;gap:12px;align-items:center;width:100%;padding:11px 14px;background:var(--paper);border:0;border-bottom:1px solid var(--line);text-align:left;cursor:pointer;transition:background .15s;}
.lb-hit:last-child{border-bottom:0;}
.lb-hit:hover{background:var(--surface-2);}
.lb-hit-name{font-size:14px;font-weight:500;color:var(--ink);}
/* The same two-part country as a leaderboard row, so it needs the same real
   gap between the name and the flag. */
.lb-hit .aff{display:inline-flex;align-items:center;gap:5px;min-width:0;}
.lb-hit .aff-name{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--ink-3);letter-spacing:.06em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lb-hit .aff-flag{font-size:12px;line-height:1;}
.lb-hit-rate{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--brass);}
/* A link rather than a button: the home page shows the same board without
   the comparison code, so it has to be able to navigate there. */
.lcmp{display:inline-block;text-align:center;text-decoration:none;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);background:none;border:1px solid var(--line-2);border-radius:2px;padding:4px 6px;cursor:pointer;transition:.15s;}
.lcmp:hover{color:var(--ink);border-color:var(--ink-3);}
.cmp{border:1px solid var(--line-2);border-radius:3px;background:var(--surface);margin-bottom:22px;overflow:hidden;}
.cmp-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:14px 18px;border-bottom:1px solid var(--line);}
.cmp-title{font-family:'Newsreader',serif;font-size:17px;}
.cmp-actions{display:flex;gap:8px;}
.cmp-note{padding:12px 18px 0;font-size:13px;color:var(--ink-2);}
.cmp-grid{padding:6px 18px 16px;}
.cmp-row{display:grid;grid-template-columns:1fr 92px 92px;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);}
.cmp-row:last-child{border-bottom:0;}
.cmp-header{border-bottom:1px solid var(--line-2);}
.cmp-header .cmp-val{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);}
.cmp-label{font-size:13.5px;color:var(--ink-2);}
.cmp-val{font-family:'JetBrains Mono',monospace;font-size:13.5px;text-align:right;color:var(--ink);}
.cmp-val.ahead{color:var(--pos);}
.cmp-val.behind{color:var(--neg);}
@container app (max-width:700px){
  .cmp-row{grid-template-columns:1fr 68px 68px;gap:8px;}
  .cmp-label{font-size:12.5px;}
  .cmp-val{font-size:12.5px;}
}
.cmp-header .cmp-val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* A hint under a field. It was inheriting body styling — 15px at full
   contrast — which made it louder than the label above it and the answer
   beside it. Supporting text should recede. */
.fld .note{display:block;margin-top:7px;font-size:12.5px;line-height:1.6;color:var(--ink-3);max-width:52ch;}
/* The same note, used outside a field — beside the import buttons, where it
   reports how many figures were picked up. */
.live-actions .note{align-self:center;font-size:12.5px;color:var(--ink-3);}
.note.warn{color:var(--neg);}
/* A select has no ::placeholder, but a required one holding its empty option
   is :invalid — which is exactly the unchosen state. This makes "Select a
   category" recede like the placeholder it is, and snap to full contrast the
   moment a real choice is made. */
.fld select:invalid{color:var(--ink-3);}
.rate-note{padding:11px 16px 13px 33px;border-top:1px solid var(--line);font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.06em;color:var(--ink-2);}
.rate-pending{font-style:normal;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.05em;color:var(--brass);margin-left:7px;}

/* ═══ MAILBOX ═══ */
/* List beside conversation. The list keeps its width so the reading column
   does not jump when you move between threads of different lengths. */
.mail{display:grid;grid-template-columns:320px 1fr;gap:26px;margin-top:26px;align-items:start;}
.mail-actions{margin-bottom:12px;}
.mail-side{position:sticky;top:78px;}
.mail-list{margin-top:12px;border-top:1px solid var(--line);max-height:62vh;overflow-y:auto;}

.mail-row{display:block;width:100%;text-align:left;background:none;border:0;
  border-bottom:1px solid var(--line);padding:12px 10px;cursor:pointer;font:inherit;
  border-left:2px solid transparent;}
.mail-row:hover{background:var(--surface-2);}
.mail-row.on{background:var(--surface-2);border-left-color:var(--brass);}
.mail-row-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
.mail-who{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);}
.mail-when{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--ink-3);
  flex-shrink:0;margin-left:auto;}
.mail-subject{display:block;font-size:14px;font-weight:500;color:var(--ink);margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mail-preview{display:block;font-size:12.5px;color:var(--ink-3);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* The count and the Closed chip ride on the date line rather than taking a
   line of their own under the preview. A row was four lines tall for three
   lines of content, which on a phone is one thread fewer per screen for a
   number nobody scans down. margin-left:auto on the count pushes it and the
   date to the right together, so a solver's row, which has no sender, still
   reads from the left. */
.mail-count{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--ink-3);
  margin-left:auto;}
.mail-count::before{content:'\00b7';margin-right:8px;opacity:.55;}
.mail-row-top .mail-when{margin-left:8px;}
.mail-closed{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);font-style:normal;}
/* Unread is carried by weight and a mark, not colour alone. */
.mail-row.unread .mail-subject{font-weight:600;}
.mail-row.unread .mail-subject::before{content:'';display:inline-block;width:6px;height:6px;
  border-radius:50%;background:var(--brass);margin-right:7px;vertical-align:middle;}

.mail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding-bottom:14px;border-bottom:1px solid var(--line);}
.mail-head h2{font-family:'Newsreader',serif;font-size:22px;font-weight:500;}
.mail-sub{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);margin-top:4px;}

.msg-stream{display:flex;flex-direction:column;gap:14px;padding:20px 0;
  max-height:52vh;overflow-y:auto;}
.msg-line{display:flex;}
.msg-line.mine{justify-content:flex-end;}
.msg-bubble{max-width:min(560px,88%);border:1px solid var(--line);border-radius:10px;
  padding:12px 15px;background:var(--surface);}
.msg-line.mine .msg-bubble{background:var(--brass-2);border-color:var(--brass);}
.msg-body{font-family:'Newsreader',serif;font-size:15.5px;line-height:1.6;
  white-space:pre-wrap;color:var(--ink);}
.msg-meta{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.05em;
  color:var(--ink-3);margin-top:8px;}
/* Under my own last message only: whether the other side has read it. */
.msg-seen{color:var(--brass);}
.msg-seen::before{content:'· ';color:var(--ink-3);}

.mail-reply textarea,.mail-compose textarea{width:100%;background:var(--surface);
  border:1px solid var(--line-2);border-radius:6px;padding:11px 13px;font:inherit;
  font-size:14.5px;color:var(--ink);resize:vertical;}
.mail-reply textarea:focus,.mail-compose textarea:focus{outline:none;border-color:var(--ink);}
.mail-reply .live-actions{margin-top:10px;}

.mail-compose{border:1px solid var(--line);border-radius:10px;padding:22px 24px;
  background:var(--surface);}
.mail-compose h2{font-family:'Newsreader',serif;font-size:20px;font-weight:500;
  margin-bottom:14px;}
.mail-targets{margin-top:8px;display:flex;flex-direction:column;
  max-height:210px;overflow-y:auto;}
.mail-target{text-align:left;background:none;border:0;border-bottom:1px solid var(--line);
  padding:9px 4px;font:inherit;font-size:13.5px;color:var(--ink);cursor:pointer;
  display:flex;align-items:baseline;gap:10px;}
.mail-target:hover{background:var(--surface-2);}
.mail-target em{font-family:'JetBrains Mono',monospace;font-size:9.5px;font-style:normal;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);margin-left:auto;}

/* The way back to the list, and so only ever shown where the list has been
   put away. Declared before the stacked layout below, which turns it on:
   the two rules weigh the same, so whichever comes last wins. */
.mail-back{display:none;background:none;border:0;padding:0;margin-bottom:10px;
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);cursor:pointer;}
.mail-back:hover{color:var(--brass);}

@container app (max-width:860px){
  .mail{grid-template-columns:1fr;}
  .mail-side{position:static;}
  .mail-list{max-height:none;}
  /* One pane at a time. Stacked, the list and the conversation are a screen
     each, and showing both put the reply box a full screen below the fold
     with every thread to scroll past on the way. The list stands until a
     thread is opened; then the thread stands, with a way back. */
  .mail.on-main .mail-side{display:none;}
  .mail:not(.on-main) .mail-main{display:none;}
  .mail-back{display:block;}
  /* Compose and search share a line, and the gap under the lede shrinks.
     There was more than a third of a phone screen above the first thread,
     spent on a heading nobody needs to re-read and two controls stacked one
     under the other. */
  .mail{margin-top:14px;}
  .mail-side{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center;}
  .mail-actions{margin-bottom:0;}
  .mail-list{grid-column:1 / -1;}
  /* A little shorter than the 52vh it gets beside the list, so the reply box
     and its Send button land above the fold on a phone rather than five
     pixels below it. The stream scrolls on its own, so a long thread costs
     nothing here. */
  .msg-stream{max-height:46vh;}
}

/* ═══ NO ZOOM ON FOCUS ═══ */
/* Safari on iOS zooms the whole page in when a focused field's text is under
   16px, and every field on this site was: 14px in a form, 13.5px in the tag
   box, 12.5px in a setting. The page came back magnified with the rest of it
   off the side of the screen, which is what made every text box feel like a
   trap. Nothing here is a design change at desktop sizes; it only lifts the
   fields to the size that stops the zoom, and only where the zoom happens.
   Listed selector by selector rather than with !important, so each one still
   loses to anything more specific that comes later. */
@media (max-width:820px){
  input,select,textarea,
  .fld input,.fld select,.fld textarea,
  .numeric-entry input,.reply-input,.searchfield input,.taginput-field,
  .adm-setting,.search,.mail-reply textarea,.mail-compose textarea{
    font-size:16px;
  }
}

/* ── Quiz bee ─────────────────────────────────────────────────────────────
   The board reuses .live wholesale -- same border, same coloured header bar,
   same spine, same statement face -- so a question in a bee reads like a
   problem in the archive, which is the point. What .live normally takes from
   the category, this takes from the brass accent, because a bee question
   deliberately shows no category: naming the topic on a timed question is
   most of a hint. */
.qz-board{--c:var(--brass);--cbg:var(--brass-2);}
.qz-board.revealing{--c:var(--ink-3);--cbg:var(--surface-2);}

.qz-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px;}
.qz-head .ptitle{margin:0;}
.qz-mine{text-align:right;flex-shrink:0;}
.qz-mine-score{display:block;font-family:'JetBrains Mono',monospace;font-size:26px;line-height:1;color:var(--brass);}
.qz-mine-label{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);}

.qz-grid{display:grid;gap:18px;align-items:start;}
@media (min-width:900px){.qz-grid{grid-template-columns:1fr 246px;}}

.qz-top-right{display:flex;align-items:center;gap:14px;}
.qz-points{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);}
/* Tabular figures so the seconds do not shuffle the layout as they tick. */
.qz-timer{font-family:'JetBrains Mono',monospace;font-size:17px;font-variant-numeric:tabular-nums;color:var(--c);min-width:3.4em;text-align:right;}
.qz-timer.urgent{color:var(--neg);}
.qz-timer.done{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);}

.qz-voided{padding:9px 20px;background:var(--surface-2);border-bottom:1px solid var(--line);
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.05em;color:var(--ink-3);}

.qz-foot{flex-direction:column;align-items:stretch;gap:10px;}
.qz-answer{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.qz-answer-label{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);}
.qz-answer input{flex:1;min-width:8rem;background:var(--surface-2);border:1px solid var(--line-2);
  border-radius:3px;padding:9px 12px;color:var(--ink);font-family:'JetBrains Mono',monospace;
  font-size:16px;font-variant-numeric:tabular-nums;}
.qz-answer input:focus-visible{outline:2px solid var(--brass);outline-offset:1px;}
.qz-answer input:disabled{opacity:.55;}
.qz-recorded{margin:0;font-size:12.5px;color:var(--ink-3);}
.qz-recorded b{color:var(--ink);font-family:'JetBrains Mono',monospace;}
.qz-recorded.bad{color:var(--neg);}

.qz-reveal{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap;}
.qz-verdict{display:flex;align-items:center;gap:11px;font-size:14px;}
.qz-verdict-mark{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:14px;flex-shrink:0;}
.qz-verdict.right .qz-verdict-mark{background:var(--pos);color:var(--paper);}
.qz-verdict.wrong .qz-verdict-mark{background:var(--neg);color:var(--paper);}
.qz-verdict.void .qz-verdict-mark{background:var(--surface-2);color:var(--ink-3);}
.qz-verdict b{display:block;font-weight:500;}
.qz-yours{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-3);}
.qz-next{font-family:'JetBrains Mono',monospace;font-size:11px;font-variant-numeric:tabular-nums;color:var(--ink-3);}

/* The lobby and the final card share a shape: one big number or statement,
   centred, with the detail underneath in small caps. */
.qz-lobby{border:1px solid var(--line);border-radius:3px;background:var(--surface);
  padding:38px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;}
.qz-lobby-clock{font-family:'JetBrains Mono',monospace;font-size:44px;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--brass);}
.qz-lobby-when{margin:0;color:var(--ink-2);font-size:14.5px;}
.qz-in{margin:0;font-size:13.5px;color:var(--pos);}
.qz-in.full{color:var(--neg);}
.qz-lobby-meta{margin:0;font-family:'JetBrains Mono',monospace;font-size:10.5px;
  letter-spacing:.06em;color:var(--ink-3);}

.qz-side{border:1px solid var(--line);border-radius:3px;background:var(--surface);overflow:hidden;}
.qz-side-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:12px 16px;border-bottom:1px solid var(--line);}
.qz-side-head h2{margin:0;font-size:14px;font-weight:500;}
.qz-count{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.06em;color:var(--ink-3);}
.qz-board-list{list-style:none;margin:0;padding:6px 0;}
.qz-board-list.you{border-top:1px solid var(--line);}
.qz-board-list li{display:grid;grid-template-columns:1.6rem 1fr auto;gap:10px;align-items:baseline;
  padding:7px 16px;font-size:13.5px;}
.qz-board-list li.mine{background:var(--brass-2);}
.qz-place{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-3);}
.qz-who{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.qz-score{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums;color:var(--brass);}
.qz-empty{margin:0;padding:14px 16px;font-size:13px;color:var(--ink-3);}

@media (max-width:640px){
  .qz-lobby-clock{font-size:36px;}
  .qz-answer input{width:100%;}
}

/* ── Quiz host desk ───────────────────────────────────────────────────── */
.fldgrid{display:grid;gap:0 22px;}
@media (min-width:720px){.fldgrid{grid-template-columns:1fr 1fr;}}

.tw{overflow-x:auto;}
.rowname{display:block;}

.hq-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:560px;}
.hq-table th,.hq-table td{text-align:center;padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:middle;}
/* The one column left of centre: a problem title runs to several words and
   wraps, and a centred ragged paragraph is harder to read down a column. */
.hq-table .hq-name{text-align:left;}
.hq-table thead th{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3);border-bottom:1px solid var(--line-2);}
.hq-table .num{text-align:center;font-variant-numeric:tabular-nums;}
.hq-table .hq-rowacts{justify-content:center;}
.hq-table tr.voided .rowname{text-decoration:line-through;color:var(--ink-3);}
.hq-num,.hq-answer{width:5.5rem;background:var(--surface-2);border:1px solid var(--line-2);
  border-radius:3px;padding:5px 8px;color:var(--ink);font-family:'JetBrains Mono',monospace;
  font-size:13px;text-align:right;font-variant-numeric:tabular-nums;}
.hq-answer{width:6.5rem;border-color:var(--brass);}
.hq-num:disabled{opacity:.5;}
.hq-rowacts{display:flex;gap:6px;justify-content:flex-end;}
.hq-live{margin-bottom:26px;}
.hq-live .qz-board-list{padding:0;}

/* ── Quiz bee: rounds, feed, final card, review ───────────────────────── */
.qz-sep{font-weight:400;opacity:.45;margin:0 2px;}

/* The rail holds the standings and the feed, stacked. */
.qz-rail{display:flex;flex-direction:column;gap:14px;}

.qz-feed{border:1px solid var(--line);border-radius:3px;background:var(--surface);overflow:hidden;}
.qz-feed-head{padding:12px 16px;border-bottom:1px solid var(--line);font-size:14px;font-weight:500;}
.qz-feed-list{list-style:none;margin:0;padding:6px 0;max-height:280px;overflow-y:auto;}
.qz-feed-list li{display:grid;grid-template-columns:auto 1fr;gap:10px;padding:7px 16px;
  font-size:13px;line-height:1.5;color:var(--ink-2);}
/* A consequence of an action reads differently from something the host
   chose to say, so it is marked rather than left to look like speech. */
.qz-feed-list li.system{color:var(--brass);}
.qz-feed-list li.system .qz-feed-body{font-style:italic;}
.qz-feed-when{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--ink-3);
  padding-top:2px;white-space:nowrap;}

/* The final card is the most important thing on the page once a bee ends,
   so it is sized like it, and given room before the paper below it. */
.qz-final{border:1px solid var(--line);border-radius:3px;background:var(--surface);
  padding:36px 26px;text-align:center;display:flex;flex-direction:column;
  align-items:center;gap:14px;margin-bottom:26px;}
.qz-final-title{margin:0;font-family:'Newsreader',serif;font-size:28px;line-height:1.2;
  font-weight:500;color:var(--ink);}
.qz-final-line{margin:0;font-size:17px;line-height:1.5;color:var(--ink-2);}
.qz-final-line b{color:var(--brass);font-weight:500;}
.qz-final-note{margin:0;font-family:'JetBrains Mono',monospace;font-size:10.5px;
  letter-spacing:.05em;color:var(--ink-3);}

.qz-navbar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-bottom:14px;}
.qz-jump{display:flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;
  font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);}
.qz-jump select{background:var(--surface-2);border:1px solid var(--line-2);border-radius:3px;
  padding:6px 9px;color:var(--ink);font-size:13px;font-family:inherit;letter-spacing:normal;
  text-transform:none;}

@media (max-width:640px){
  .qz-final-title{font-size:23px;}
  .qz-final-line{font-size:15.5px;}
  .qz-navbar{justify-content:center;}
}

/* ── Host desk: comments ──────────────────────────────────────────────── */
.hq-say{display:flex;gap:8px;align-items:flex-start;margin-bottom:16px;}
.hq-say textarea{flex:1;background:var(--surface-2);border:1px solid var(--line-2);
  border-radius:3px;padding:9px 11px;color:var(--ink);font:inherit;font-size:14px;resize:vertical;}
.hq-say textarea:focus-visible{outline:2px solid var(--brass);outline-offset:1px;}
.hq-sent{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.hq-sent li{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:baseline;
  padding:10px 0;border-bottom:1px solid var(--line);font-size:13.5px;}
.hq-sent li:last-child{border-bottom:none;}
.hq-sent li.system .hq-sent-body{color:var(--brass);font-style:italic;}
.hq-sent-when{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--ink-3);white-space:nowrap;}
.hq-round{background:var(--surface-2);border:1px solid var(--line-2);border-radius:3px;
  padding:5px 7px;color:var(--ink);font-size:12.5px;font-family:inherit;}

/* ── Quiz bee: protests, provisional results, statistics ─────────────── */
.qz-report{padding:10px 22px 14px;border-top:1px solid var(--line);}
.qz-report-open{background:none;border:none;padding:0;cursor:pointer;
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3);text-decoration:underline;}
.qz-report-open:hover{color:var(--brass);}
.qz-report-form{display:flex;flex-direction:column;gap:8px;margin-top:10px;}
/* display:flex above outranks the browser's own [hidden] rule, so the form
   sat open under every question and the link to open it did nothing. */
.qz-report-form[hidden]{display:none;}
.qz-report-form textarea{background:var(--surface-2);border:1px solid var(--line-2);
  border-radius:3px;padding:8px 10px;color:var(--ink);font:inherit;font-size:13.5px;resize:vertical;}
.qz-report-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.qz-report-said{font-size:12.5px;color:var(--ink-3);}
.qz-report-said.sent{color:var(--pos);}

.qz-final-provisional{margin:0;max-width:34rem;font-size:13.5px;line-height:1.55;
  color:var(--brass);background:var(--brass-2);border-radius:3px;padding:10px 14px;}
.qz-final-official{margin:0;font-family:'JetBrains Mono',monospace;font-size:10.5px;
  letter-spacing:.07em;text-transform:uppercase;color:var(--pos);}

.qz-stats{margin-top:34px;}
/* The site's own stat strip, three across rather than four, since six
   figures split evenly that way and .n/.l already carry the type. */
.qz-strip .n,.qz-strip .l{display:block;}
/* Grid lines drawn by the gap rather than by borders on the cells. .strip
   borders its top, bottom and the left of every cell after the first,
   which is right for one row and wrong as soon as six figures wrap into
   two: the second row began with a stray left rule and nothing divided
   the rows. A 1px gap over a line-coloured ground rules every edge of
   every cell, however many rows there are. Doubled class to outrank
   .strip's own div rules, including its mobile ones. */
.strip.qz-strip{grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-bottom:22px;}
.strip.qz-strip > div{background:var(--surface);padding:16px 18px;border-left:none;
  text-align:center;}
@media (max-width:640px){
  .strip.qz-strip{grid-template-columns:repeat(2,1fr);}
  .strip.qz-strip > div{padding:14px 12px;}
}
.qz-stat-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:480px;}
.qz-stat-table th,.qz-stat-table td{text-align:center;padding:9px 10px;
  border-bottom:1px solid var(--line);}
.qz-stat-table thead th{font-family:'JetBrains Mono',monospace;font-size:9.5px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);
  border-bottom:1px solid var(--line-2);}
.qz-stat-table .num{text-align:center;font-variant-numeric:tabular-nums;}
.qz-stat-table tr.voided td{color:var(--ink-3);}
/* The rate reads as a number and as a length at once, so a glance down the
   column finds the question everybody missed. */
.qz-rate{display:inline-block;position:relative;padding:2px 7px;border-radius:2px;
  font-family:'JetBrains Mono',monospace;}
.qz-rate::before{content:'';position:absolute;inset:0;border-radius:2px;
  width:var(--rate);background:var(--brass);opacity:.16;}

/* ── Host desk: protests and the lock ────────────────────────────────── */
.hq-lock{margin-bottom:22px;}
.hq-reports{list-style:none;margin:0 0 22px;padding:0;}
.hq-reports li{display:grid;grid-template-columns:auto 1fr auto;gap:12px;
  align-items:baseline;padding:10px 0;border-bottom:1px solid var(--line);font-size:13.5px;}
.hq-reports li:last-child{border-bottom:none;}
.hq-reports li.done{opacity:.55;}
.hq-rep-q{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--brass);white-space:nowrap;}
.hq-rep-body b{font-weight:500;color:var(--ink);}

/* ── Timed tests ─────────────────────────────────────────────────────────
   The landing borrows the bee's head, grid, rail and final card; the paper
   borrows its board. What is new is the bar with the clock, which holds
   the top of the window so the time left is never a scroll away, and the strip
   of numbered buttons for moving between questions. */
/* Three short figures fit three across at any width, and wrapping them two
   and one leaves an empty cell. */
.strip.qz-strip.tt-facts{grid-template-columns:repeat(3,1fr);}
.strip.qz-strip.tt-facts > div{padding:14px 8px;}
.tt-intro{border:1px solid var(--line);border-radius:3px;background:var(--surface);padding:20px 22px;}
.tt-intro .tt-facts{margin:0 0 16px;}
.tt-when{margin:0 0 12px;font-size:14.5px;color:var(--ink-2);}
.tt-rules{margin:0 0 18px;padding-left:18px;font-size:13.5px;line-height:1.55;color:var(--ink-2);}
.tt-rules li + li{margin-top:5px;}
.tt-h{margin:18px 0 8px;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);}
.tt-about{margin:0 0 4px;font-family:'Newsreader',serif;font-size:16px;line-height:1.55;color:var(--ink);white-space:pre-line;}
.tt-go{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.tt-go-note{font-size:13px;color:var(--ink-3);}
.tt-go-note b{font-family:'JetBrains Mono',monospace;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums;}
.tt-go-note.warn{color:var(--neg);}
.tt-say{margin:12px 0 0;font-size:13px;color:var(--ink-2);}
.tt-say.bad{color:var(--neg);}
.tt-result{margin-bottom:18px;}
.tt-sub{margin-top:30px;}
.tt-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:420px;}
.tt-table th,.tt-table td{text-align:center;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:middle;}
.tt-table thead th{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3);border-bottom:1px solid var(--line-2);}
.tt-table .num{font-variant-numeric:tabular-nums;font-family:'JetBrains Mono',monospace;}

.tt-bar{position:sticky;top:8px;z-index:30;display:flex;align-items:center;gap:14px;
  padding:10px 16px;margin-bottom:14px;border:1px solid var(--line);border-radius:3px;
  background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(10px);}
.tt-bar-title{flex:1;min-width:0;font-family:'Newsreader',serif;font-size:18px;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tt-bar-title em{display:block;font-style:normal;font-family:'JetBrains Mono',monospace;
  font-size:10.5px;letter-spacing:.05em;color:var(--ink-3);}
.tt-clock{font-family:'JetBrains Mono',monospace;font-size:22px;font-variant-numeric:tabular-nums;color:var(--brass);}
.tt-clock.urgent{color:var(--neg);}

.tt-navwrap{margin-bottom:14px;}
.tt-nav{display:flex;flex-direction:column;gap:10px;}
.tt-navpart{display:flex;flex-direction:column;gap:6px;}
.tt-navlabel{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);}
.tt-navbtns{display:flex;flex-wrap:wrap;gap:6px;}
.tt-num{position:relative;width:38px;height:38px;border:1px solid var(--line-2);border-radius:3px;
  background:var(--surface);font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--ink-2);
  cursor:pointer;transition:.12s;}
.tt-num:hover{border-color:var(--ink-3);}
.tt-num.done{background:var(--brass-2);border-color:var(--brass);color:var(--ink);}
.tt-num.at{outline:2px solid var(--ink);outline-offset:1px;}
/* A corner notch for a flag, so a question can be answered and flagged at
   once and still read as both. */
.tt-num.flag::after{content:'';position:absolute;top:-1px;right:-1px;border-style:solid;
  border-width:0 11px 11px 0;border-color:transparent var(--neg) transparent transparent;border-top-right-radius:3px;}
.tt-legend{margin:8px 0 0;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.05em;color:var(--ink-3);}

.tt-flag{background:none;border:1px solid var(--line-2);border-radius:3px;padding:3px 9px;cursor:pointer;
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);}
.tt-flag:hover{border-color:var(--ink-3);color:var(--ink);}
.tt-flag.on{border-color:var(--neg);color:var(--neg);}
.tt-said{margin:0;font-size:14px;color:var(--ink-2);}
.tt-said b{font-family:'JetBrains Mono',monospace;font-weight:500;color:var(--ink);}
.tt-board .choice:disabled:hover{background:none;}
/* Narrower where the nav itself narrows. */
@container app (max-width:700px){
  .tt-bar{padding:8px 12px;gap:10px;}
  .tt-bar-title{font-size:15px;}
  .tt-clock{font-size:19px;}
  .tt-intro{padding:16px;}
  .tt-num{width:34px;height:34px;}
}
.qz-answer .signflip{width:40px;height:40px;}
.signflip:disabled{opacity:.5;cursor:default;}

/* ── Problem picker (bee and test desks) ─────────────────────────────── */
.pk-bar{margin-bottom:10px;}
.pk-search{margin-bottom:10px;}
.pk-selects{margin-bottom:0;gap:8px;}
.pk-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:4px 0 10px;border-bottom:1px solid var(--line);margin-bottom:4px;}
.pk-head .browse-count{margin-left:0;}


/* -- Competitions: the public lists of bees and tests ------------------- */
.cp-row{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:16px 18px;border:1px solid var(--line);border-radius:3px;background:var(--surface);
  margin-bottom:10px;transition:border-color .15s,transform .15s;}
.cp-row:hover{border-color:var(--ink-3);transform:translateX(2px);}
.cp-main{display:flex;flex-direction:column;gap:6px;min-width:0;}
.cp-title{font-family:'Newsreader',serif;font-size:18px;line-height:1.25;color:var(--ink);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.cp-meta{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.05em;
  color:var(--ink-3);}
/* The state reads at a glance, so it carries colour rather than only words:
   brass for something you can still join, green while it is open, plain ink
   once it is over. */
.cp-state{font-family:'JetBrains Mono',monospace;font-size:9.5px;font-style:normal;
  letter-spacing:.11em;text-transform:uppercase;padding:3px 7px;border-radius:2px;
  border:1px solid var(--line-2);color:var(--ink-3);}
.cp-state.soon{border-color:var(--brass);color:var(--brass);background:var(--brass-2);}
.cp-state.live{border-color:var(--pos);color:var(--pos);}
.cp-side{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex-shrink:0;text-align:right;}
.cp-side-label{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);}
.cp-side-val{font-size:15px;color:var(--ink);max-width:11rem;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
.cp-side-sub{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--brass);}
.cp-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin:34px 0 14px;padding-bottom:8px;border-bottom:1px solid var(--line);}
.cp-head:first-of-type{margin-top:8px;}
.cp-head h2{margin:0;font-size:17px;font-weight:500;}
.cp-all{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);}
.cp-all:hover{color:var(--ink);}
.cp-foot{margin:26px 0 0;font-family:'JetBrains Mono',monospace;font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);}
.cp-foot a:hover{color:var(--ink);}
@container app (max-width:700px){
  .cp-row{flex-direction:column;align-items:flex-start;gap:10px;}
  .cp-side{align-items:flex-start;text-align:left;flex-direction:row;gap:8px;align-items:baseline;}
  .cp-title{font-size:16px;}
}


/* -- The share card's panel -------------------------------------------- */
.card-modal{max-width:620px;}
/* The card is drawn at its real 1080 and scaled to fit, so the preview is
   the picture rather than an approximation of it. */
/* Square, and never so tall that the buttons under it fall off the screen:
   on a short window the preview gives way rather than the controls. */
.card-stage{position:relative;width:min(100%,46vh);aspect-ratio:1;overflow:hidden;
  border:1px solid var(--line);border-radius:3px;background:var(--surface-2);
  margin:0 auto 16px;}
.card-stage .sharecard{position:absolute;top:0;left:0;}
.card-stage .state{position:absolute;inset:0;display:grid;place-items:center;}
.card-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-bottom:18px;}
.card-themes{display:flex;border:1px solid var(--line-2);border-radius:3px;overflow:hidden;}
.card-theme{padding:7px 14px;font-size:12.5px;color:var(--ink-3);background:var(--surface);
  cursor:pointer;transition:.15s;}
.card-theme + .card-theme{border-left:1px solid var(--line-2);}
.card-theme:hover{color:var(--ink);}
.card-theme.on{background:var(--ink);color:var(--paper);}
.card-tools .note.bad{color:var(--neg);}

/* The save-as-a-picture button, on the problem's own header bar.
   It takes the category's colour like everything else on that bar, so it
   reads as part of the problem rather than as a stray control. */
.live-save{display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;flex-shrink:0;margin-left:4px;border:1px solid var(--c);
  border-radius:50%;background:transparent;color:var(--c);cursor:pointer;transition:.15s;}
.live-save:hover{background:var(--c);color:var(--paper);}
.live-save:focus-visible{outline:2px solid var(--c);outline-offset:2px;}
.live-top{min-height:56px;}

/* A link written into prose -- a statement, a comment, a test's About. It
   has to be visible as a link inside a paragraph that is mostly maths, so
   it takes the brass the site uses for anything worth pressing, and says
   when it leads off the site. */
.plink{color:var(--brass);text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px;overflow-wrap:anywhere;}
.plink:hover{color:var(--ink);}
.plink.ext::after{content:'\2197';margin-left:.12em;font-size:.85em;
  text-decoration:none;display:inline-block;}

/* -- Points a part at a time, on the test desk ------------------------- */
.dt-parts{display:flex;flex-direction:column;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:3px;margin-bottom:14px;}
.dt-part{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--surface);padding:10px 14px;}
.dt-part-name{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--brass);min-width:5.5rem;}
.dt-part-meta{flex:1;min-width:10rem;font-size:12.5px;color:var(--ink-3);}
.dt-part .hq-num{width:4.5rem;}

/* The break between the top of the board and your own row below it. */
.lgap{display:flex;align-items:center;gap:12px;margin:10px 0 6px;}
.lgap::before,.lgap::after{content:'';flex:1;border-top:1px dashed var(--line-2);}
.lgap span{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);}

/* A tier already reached, in the catalogue's list of them. */
.tier.got{border-color:var(--brass);color:var(--ink);}
.tier.got b{color:var(--brass);}

/* -- One badge's own page --------------------------------------------- */
.bp-head{display:flex;align-items:flex-start;gap:20px;margin-bottom:18px;}
.bp-icon{flex-shrink:0;display:grid;place-items:center;width:76px;height:76px;
  border:1px solid var(--line-2);border-radius:50%;background:var(--surface);}
.bp-icon svg{width:38px;height:38px;}
.bp-headmain{min-width:0;}
.bp-headmain .ptitle{margin:0 0 6px;}
.bp-group{color:var(--brass);}
.bp-desc{margin:0;font-size:15px;color:var(--ink-2);}
.bp-mine{margin:0 0 26px;padding:12px 16px;border:1px solid var(--line);border-radius:3px;
  background:var(--surface);font-size:14px;color:var(--ink-2);}
.bp-mine.got{border-color:var(--brass);}
.bp-mine b{color:var(--brass);font-weight:500;}
.bp-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:560px;}
.bp-table th,.bp-table td{text-align:center;padding:10px;border-bottom:1px solid var(--line);
  vertical-align:middle;}
.bp-table thead th{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3);border-bottom:1px solid var(--line-2);}
.bp-table .num{font-variant-numeric:tabular-nums;font-family:'JetBrains Mono',monospace;}
.bp-table tr.mine td{background:var(--brass-2);}
.bp-who{display:block;color:var(--ink);text-decoration:underline;text-underline-offset:2px;}
.bp-who:hover{color:var(--brass);}
.bp-when{display:block;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--ink-3);}
.bp-nobody{color:var(--ink-3);}

/* Present for screen readers and crawlers, not drawn: the problem page's
   title, which the design shows only in the tab. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* The check a proposer sees before a proposal is sent (contribute.js). */
.modal-card.pp-confirm{max-width:680px;}
.pp-confirm-warn{font-size:13.5px;line-height:1.55;color:var(--ink);margin:4px 0 22px;padding:12px 14px;
  border:1px solid var(--brass);border-radius:3px;background:color-mix(in srgb,var(--brass) 8%,transparent);}
.pp-confirm-warn code{font-size:12px;}
.pp-confirm .modal-actions{justify-content:flex-end;}