/* The judging and briefs pages (compare.html, briefs.html): the research page's language (research.html), shared. */
@font-face { font-family: 'Martian Grotesk'; src: url('brand/MartianGrotesk.woff2') format('woff2'); font-weight: 100 900; font-stretch: 75% 112.5%; font-display: swap; unicode-range: U+0000-0130, U+0131-0151, U+0152-02BB, U+02BC-02C5, U+02C6-036F, U+0400-052F, U+1E00-1EFF, U+20B4, U+20BD, U+2116, U+2150-215F, U+2189, U+2248, U+2260, U+A78B-A78C, U+FB01-FB02; }
@font-face { font-family: 'Martian Grotesk'; src: url('brand/MartianGrotesk-latin.woff2') format('woff2'); font-weight: 100 900; font-stretch: 75% 112.5%; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+2002-2003, U+2011, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2070, U+2074-2079, U+2080-2089, U+20AC, U+2122, U+2190-2193, U+2212; }
@font-face { font-family: 'Martian Mono'; src: url('brand/MartianMono-Regular.woff2') format('woff2'); font-display: swap; unicode-range: U+0000-0130, U+0131-0151, U+0152-02BB, U+02BC-02C5, U+02C6-036F, U+0400-052F, U+1E00-1EFF, U+20B4, U+20BD, U+2116, U+2248, U+2260, U+A78B-A78C; }
@font-face { font-family: 'Martian Mono'; src: url('brand/MartianMono-Regular-latin.woff2') format('woff2'); font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+2002-2003, U+2011, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2070, U+2074-2079, U+2080-2089, U+20AC, U+2122, U+2190-2193, U+2212; }
:root {
  --portal: #3153cc; --deep: #182255; --paper: #f1efe6; --bright: #fffdf7; --lime: #d5ff43; --lime-edge: #a9cc2a; --portal-edge: #22399a;
  --bg: #10173b; --fg: #f1efe6; --muted: #a3aacb; --line: #26306a; --card: #161f4d; --sunk: #0d1335; --link: #d5ff43; --accent: var(--lime);
  --good: #7be3a2; --bad: #ff8a75; --warn: #ffd27a;
  --body: 'Martian Grotesk', Arial, sans-serif; --mono: 'Martian Mono', ui-monospace, Menlo, monospace; --out: cubic-bezier(.16, 1, .3, 1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.6 var(--body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: var(--link); }
h1, h2, h3 { text-wrap: balance; margin: 0; }
h2 { font-size: clamp(28px, 4vw, 44px); line-height: 1.04; font-weight: 600; font-stretch: 112.5%; letter-spacing: -.01em; }
h2 i, h1 i { font-style: normal; color: var(--lime); }
h3 { font-size: 18px; font-weight: 600; }
.mono { font-family: var(--mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; }
.wrap { max-width: 1180px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 40px); }
.lede { font-size: 16.5px; max-width: 62ch; color: var(--muted); margin: 14px 0 0; text-wrap: pretty; }
.kicker { color: var(--muted); display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.kicker::after { content: ''; width: 36px; height: 1px; background: currentColor; opacity: .5; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
[hidden] { display: none !important; }

.btn { --edge: rgba(0,0,0,.25); display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 5px; padding: 11px 16px; font: 600 14px var(--body); text-decoration: none; border: 0; cursor: pointer; position: relative; box-shadow: 0 3px 0 var(--edge); transition: transform .15s var(--out), box-shadow .15s var(--out), background-color .2s; color: inherit; background: none; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--edge); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--edge); transition-duration: .06s; }
.btn.lime { background: var(--lime); color: var(--deep); --edge: var(--lime-edge); }
.btn.line { color: var(--fg); box-shadow: inset 0 0 0 1px rgba(255,253,247,.4); }
.btn.line:hover { box-shadow: inset 0 0 0 1px var(--bright); background: rgba(255,253,247,.06); transform: none; }
.btn.small { padding: 7px 11px; font-size: 12.5px; }
.btn.danger { color: var(--bad); box-shadow: inset 0 0 0 1px rgba(255,138,117,.5); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: default; transform: none; }

/* top bar: the landing page's, solid */
.bar { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--portal) 92%, transparent); backdrop-filter: blur(12px) saturate(1.3); -webkit-backdrop-filter: blur(12px) saturate(1.3); box-shadow: 0 1px 0 rgba(255,253,247,.12); color: var(--bright); }
.top { display: flex; align-items: center; gap: 18px; height: 60px; }
.top img { height: 22px; display: block; }
.top nav { display: flex; gap: 2px; margin-left: auto; flex-wrap: wrap; }
.top nav a { color: var(--bright); text-decoration: none; font-size: 13px; opacity: .85; padding: 6px 9px; border-radius: 4px; }
.top nav a:hover { opacity: 1; background: rgba(255,253,247,.08); }
.top .btn { padding: 8px 14px; font-size: 13px; }
.top .btn .short { display: none; }
@media (max-width: 760px) { .top nav { display: none; } .top #account { margin-left: auto; } }
@media (max-width: 760px) { .top .btn .long { display: none; } .top .btn .short { display: inline; } }

.banner { border-radius: 6px; padding: 12px 14px; margin-top: 18px; background: rgba(255,210,122,.12); border: 1px solid rgba(255,210,122,.45); color: var(--fg); font-size: 14px; }
.block { padding-block: clamp(44px, 6vw, 76px); border-top: 1px solid var(--line); }
.head { display: flex; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 26px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 18px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; align-items: start; }
.empty { color: var(--muted); font-size: 14px; padding: 14px; border: 1px dashed var(--line); border-radius: 6px; text-align: center; }
.ok { color: var(--good); } .bad { color: var(--bad); } .warn { color: var(--warn); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.seg button { background: none; border: 0; color: var(--muted); padding: 8px 14px; font: 600 13px var(--body); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--lime); color: var(--deep); }
.tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tag { font: 10.5px var(--mono); letter-spacing: .05em; text-transform: uppercase; border: 1px solid var(--line); border-radius: 3px; padding: 2px 6px; color: var(--muted); }
.tag.good { color: var(--good); border-color: rgba(123,227,162,.4); }
.tag.bad { color: var(--bad); border-color: rgba(255,138,117,.4); }
footer { border-top: 1px solid var(--line); padding-block: 28px 40px; color: var(--muted); font-size: 12.5px; }
footer .row { justify-content: space-between; align-items: flex-start; }
footer p { margin: 0; max-width: 70ch; }
.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: var(--deep); color: var(--bright); border: 1px solid var(--lime); border-radius: 6px; padding: 10px 14px; font-size: 13.5px; z-index: 60; max-width: calc(100vw - 32px); box-shadow: 0 12px 30px rgba(0,0,0,.45); }
.set-preview { width:100%; height:auto; aspect-ratio:4/3; border-radius:6px; background:rgba(255,253,247,.06); object-fit:contain; display:block; }
.preview-state { display:grid; place-items:center; min-height:120px; color:var(--muted); font-size:12px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.note { font-size: 12.5px; color: var(--muted); margin: 0; }
.msg { font-size: 13.5px; margin: 0; min-height: 1.2em; }
.top #account { margin-left: 8px; }
@media (max-width: 760px) { .top #account { margin-left: auto; } }   /* (after the line above: the nav is hidden, so the account and button go right) */

/* compare.html: two sets side by side, one choice */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; }
.side { display: grid; gap: 10px; align-content: start; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 14px; }
.side h3 { font-size: 15.5px; overflow-wrap: anywhere; }
.side .btn { width: 100%; min-height: 46px; }
.side.chosen { border-color: var(--lime); box-shadow: 0 0 0 1px var(--lime); }
.judged { color: var(--muted); font-size: 13px; }
@media (max-width: 640px) { .pair { gap: 8px; } .side { padding: 8px; } .side h3 { font-size: 13px; } .side .tags { display: none; } }

/* briefs.html: a card per brief */
.briefs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; align-items: stretch; }
.brief { display: flex; flex-direction: column; gap: 12px; min-width: 0; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 18px; }
.brief img { width: 100%; height: clamp(140px, 18vw, 190px); object-fit: cover; border-radius: 6px; background: var(--sunk); }
.brief p { margin: 0; font-size: 14px; }
.brief .counts { font-size: 12.5px; color: var(--muted); }
.brief .btn { justify-self: start; min-height: 44px; }

/* briefs.html: how a challenge works, and each challenge's entries */
.how { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px; counter-reset: s; }
.how li { counter-increment: s; position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 12px 14px 12px 48px; font-size: 13.5px; }
.how li::before { content: counter(s); position: absolute; left: 14px; top: 12px; width: 22px; height: 22px; border-radius: 4px; background: var(--lime); color: var(--deep); font: 600 12px/22px var(--body); text-align: center; }
.how b { display: block; }
.how span { color: var(--muted); }
.brief { scroll-margin-top: 80px; }
.brief:target { border-color: var(--lime); }
.brief .acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 2px; }
.brief .acts .btn { justify-self: auto; }
.entries { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.entries a { position: relative; display: grid; gap: 4px; color: var(--fg); text-decoration: none; font-size: 11.5px; min-width: 0; }
.entries a span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entries .set-preview { aspect-ratio: 1; }
.entries .preview-state { min-height: 0; font-size: 0; }
.entries .toppick { position: absolute; top: 4px; left: 4px; z-index: 1; background: var(--lime); color: var(--deep); font: 600 10px var(--mono); letter-spacing: .05em; text-transform: uppercase; padding: 2px 5px; border-radius: 3px; }

/* research.html's people's scores reuse these */
table.scores { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.scores th, .scores td { text-align: left; padding: 8px; border-bottom: 1px solid var(--line); }
.scores th { color: var(--muted); font-weight: 500; }