/* SIMBig 2026 Shared Task — shared styles */
:root { --bg:#ffffff; --fg:#1a1a1a; --muted:#5f6368; --line:#dde1e6; --head:#f3f4f6; --card:#fafbfc;
        --accent:#2563eb; --accent-fg:#ffffff; --win:#fff8e1; --gold:#d4a72c; --gold-fg:#9a7416;
        --todo-bg:#fff3cd; --todo-fg:#7a5a00; --focus:#2563eb; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg:#14161a; --fg:#e8e8e8; --muted:#9aa0a6; --line:#2d3036; --head:#1d2025; --card:#191c20;
          --accent:#6ea0ff; --accent-fg:#0b1020; --win:#2a2614; --gold-fg:#e8c15a; --todo-bg:#3a3110; --todo-fg:#f0d27a; --focus:#6ea0ff; }
}
:root[data-theme="dark"] { --bg:#14161a; --fg:#e8e8e8; --muted:#9aa0a6; --line:#2d3036; --head:#1d2025; --card:#191c20;
        --accent:#6ea0ff; --accent-fg:#0b1020; --win:#2a2614; --gold-fg:#e8c15a; --todo-bg:#3a3110; --todo-fg:#f0d27a; --focus:#6ea0ff; }

/* Accessibility: high contrast (follows the light/dark theme) */
:root[data-contrast="high"] { --bg:#ffffff; --fg:#000000; --muted:#000000; --line:#000000; --head:#ffffff; --card:#ffffff;
        --accent:#0000cc; --accent-fg:#ffffff; --win:#ffffff; --gold:#000000; --gold-fg:#000000; --todo-bg:#ffff00; --todo-fg:#000000; --focus:#000000; }
@media (prefers-color-scheme: dark) {
  :root[data-contrast="high"]:not([data-theme="light"]) { --bg:#000000; --fg:#ffffff; --muted:#ffffff; --line:#ffffff; --head:#000000; --card:#000000;
          --accent:#ffff00; --accent-fg:#000000; --win:#000000; --gold:#ffffff; --gold-fg:#ffffff; --todo-bg:#ffff00; --todo-fg:#000000; --focus:#ffff00; }
}
:root[data-contrast="high"][data-theme="dark"] { --bg:#000000; --fg:#ffffff; --muted:#ffffff; --line:#ffffff; --head:#000000; --card:#000000;
        --accent:#ffff00; --accent-fg:#000000; --win:#000000; --gold:#ffffff; --gold-fg:#ffffff; --todo-bg:#ffff00; --todo-fg:#000000; --focus:#ffff00; }

/* Accessibility: text size, links, spacing */
:root[data-text="-1"] { font-size:93.75%; }
:root[data-text="1"]  { font-size:112.5%; }
:root[data-text="2"]  { font-size:125%; }
:root[data-text="3"]  { font-size:150%; }
:root[data-links="underline"] a { text-decoration:underline !important; }
:root[data-spacing="wide"] body { line-height:1.9; letter-spacing:.04em; word-spacing:.12em; }
:root[data-spacing="wide"] p, :root[data-spacing="wide"] li { margin-bottom:1em; }

* { box-sizing:border-box; }
html { padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); }
body { margin:0; background:var(--bg); color:var(--fg);
       font:1rem/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
a { color:var(--accent); }
:focus-visible { outline:3px solid var(--focus); outline-offset:2px; border-radius:3px; }
.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; }
.skip { position:absolute; left:-999px; top:.5rem; z-index:100; background:var(--accent); color:var(--accent-fg);
        padding:.5rem 1rem; border-radius:6px; }
.skip:focus { left:1rem; }

/* ------------------------------------------------------------ Site menu */
header.site { position:sticky; top:0; z-index:50; background:var(--bg); border-bottom:1px solid var(--line); }
.bar { max-width:980px; margin:0 auto; padding:.5rem 16px; display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1rem; }
.brand { color:var(--fg); text-decoration:none; font-size:.95rem; white-space:nowrap; margin-right:auto; }
.brand b { color:var(--accent); }
#site-nav ul { list-style:none; margin:0; padding:0; display:flex; gap:.25rem; }
#site-nav ul { flex-wrap:wrap; }
#site-nav a { display:block; white-space:nowrap; padding:.45rem .7rem; border-radius:6px; text-decoration:none; color:var(--fg); font-size:.93rem; }
#site-nav a:hover { background:var(--head); }
#site-nav a[aria-current="page"] { color:var(--accent); font-weight:600; box-shadow:inset 0 -2px 0 var(--accent); border-radius:0; }
button { font:inherit; font-size:.9rem; padding:.4rem .8rem; border:1px solid var(--line); border-radius:6px;
         background:var(--head); color:var(--fg); cursor:pointer; }
button:hover { border-color:var(--accent); }
/* Submenus: open on hover (mouse) or with the arrow button (keyboard / touch) */
#site-nav li.has-sub { position:relative; display:flex; align-items:center; flex-wrap:wrap; }
.sub-btn { border:0; background:transparent; padding:.45rem .3rem; margin-left:-.35rem; color:var(--muted); line-height:1; }
.sub-btn::before { content:""; display:inline-block; width:.42rem; height:.42rem; border:solid currentColor; border-width:0 2px 2px 0;
                   transform:translateY(-25%) rotate(45deg); transition:transform .15s; }
.sub-btn[aria-expanded="true"]::before { transform:translateY(15%) rotate(-135deg); }
.sub-btn:hover { color:var(--accent); }
#site-nav ul.sub { display:none; position:absolute; top:100%; left:0; z-index:60; min-width:13rem; flex-direction:column; gap:0;
                   padding:.35rem; background:var(--bg); border:1px solid var(--line); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.18); }
#site-nav li.has-sub:hover > ul.sub, #site-nav .sub-btn[aria-expanded="true"] + ul.sub { display:flex; }
#site-nav ul.sub a { padding:.4rem .7rem; font-size:.9rem; border-radius:6px; box-shadow:none; font-weight:400; color:var(--fg); }
#site-nav ul.sub a:hover { background:var(--head); color:var(--accent); }
.menu-btn { display:none; }
.a11y { position:relative; }
#a11y-btn { font-size:1.15rem; line-height:1; width:2.4rem; height:2.4rem; padding:0; display:inline-flex; align-items:center; justify-content:center; }
#a11y-panel { position:absolute; right:0; top:calc(100% + .5rem); width:min(320px, calc(100vw - 32px)); background:var(--bg);
              border:1px solid var(--line); border-radius:8px; padding:1rem; box-shadow:0 8px 24px rgba(0,0,0,.18); font-size:.92rem; }
#a11y-panel h2 { font-size:1rem; margin:0 0 .5rem; padding:0; border:0; }
#a11y-panel fieldset { border:0; padding:0; margin:0 0 .85rem; }
#a11y-panel legend { font-weight:600; margin-bottom:.3rem; }
.seg { display:flex; flex-wrap:wrap; gap:.3rem; }
.seg label { cursor:pointer; }
.seg input { position:absolute; opacity:0; width:1px; height:1px; }
.seg span { display:inline-block; padding:.3rem .65rem; border:1px solid var(--line); border-radius:6px; min-width:2.4rem; text-align:center; }
.seg input:checked + span { background:var(--accent); color:var(--accent-fg); border-color:var(--accent); }
.seg input:focus-visible + span { outline:3px solid var(--focus); outline-offset:2px; }
.check { display:flex; gap:.5rem; align-items:center; margin:.35rem 0; cursor:pointer; }
.check input { width:1.1rem; height:1.1rem; accent-color:var(--accent); }
#a11y-reset { margin-top:.25rem; width:100%; }

@media (max-width:760px) {
  .menu-btn { display:inline-block; }
  .bar { flex-wrap:wrap; }
  #site-nav { display:none; order:3; flex-basis:100%; }
  #site-nav.open { display:block; }
  #site-nav ul { flex-direction:column; padding-bottom:.5rem; }
  #site-nav a[aria-current="page"] { box-shadow:inset 3px 0 0 var(--accent); }
  /* On phones the sections expand inside the menu, only via the arrow button */
  #site-nav li.has-sub:hover > ul.sub { display:none; }
  #site-nav ul.sub, #site-nav li.has-sub:hover > .sub-btn[aria-expanded="true"] + ul.sub { position:static; flex-basis:100%; min-width:0;
                     box-shadow:none; border:0; border-left:2px solid var(--line); border-radius:0; margin:0 0 .25rem .7rem; padding:0 0 0 .25rem; }
  #site-nav .sub-btn[aria-expanded="true"] + ul.sub { display:flex; }
}

/* ------------------------------------------------------------ Page */
.page { max-width:980px; margin:0 auto; padding:1.5rem 16px 3rem; }
img.banner { display:block; width:100%; height:auto; border-radius:8px; margin:0 0 1.25rem; }
h1 { margin:0 0 .25rem; font-size:1.8rem; line-height:1.25; }
h2 { margin:2.5rem 0 .5rem; font-size:1.4rem; padding-top:.5rem; border-top:1px solid var(--line); scroll-margin-top:4.5rem; }
h3 { margin:1.5rem 0 .5rem; font-size:1.1rem; scroll-margin-top:4.5rem; }
[id] { scroll-margin-top:4.5rem; }
p.sub { margin:0 0 1rem; color:var(--muted); }
.muted { color:var(--muted); font-size:.92rem; }
nav.toc { display:flex; flex-wrap:wrap; gap:.25rem 1rem; margin:0 0 1rem; font-size:.92rem; }
.box { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:1rem 1.25rem; margin:1rem 0; }
.box h3 { margin-top:0; }
.box ul { margin:.25rem 0 0; padding-left:1.2rem; }
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.75rem; margin:1rem 0; }
.stat { border:1px solid var(--line); border-radius:8px; padding:.75rem 1rem; }
.stat b { display:block; font-size:1.5rem; font-variant-numeric:tabular-nums; }
.stat span { color:var(--muted); font-size:.88rem; }
.todo { background:var(--todo-bg); color:var(--todo-fg); border-radius:4px; padding:0 .3em; font-size:.9em; }
.btn { display:inline-block; padding:.55rem 1rem; border:1px solid var(--line); border-radius:6px; text-decoration:none; font-size:.95rem; }
.btn:hover { border-color:var(--accent); }
.btn.primary { background:var(--accent); color:var(--accent-fg); border-color:var(--accent); }
.btn.btn-session { background:var(--win); color:var(--gold-fg); border-color:var(--gold); font-weight:600; }
.btn.btn-session:hover { border-color:var(--gold-fg); }

/* ------------------------------------------------------------ Hero */
.hero { display:grid; grid-template-columns:1fr 1.2fr; gap:2rem; align-items:center; margin:.5rem 0 1.5rem; }
@media (max-width:760px) { .hero { grid-template-columns:1fr; gap:1.25rem; } }
.eyebrow { margin:0 0 .5rem; font-size:.85rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--accent); }
.hero h1 { font-size:2.1rem; }
.hero .lead { font-size:1.1rem; color:var(--muted); margin:.5rem 0 1.25rem; }
.hero-cta { display:flex; flex-wrap:wrap; gap:.5rem; }
.hero figure { margin:0; }
.hero figure img { display:block; width:100%; height:auto; border-radius:10px; }
.photo { position:relative; }
.credit { position:absolute; right:.5rem; bottom:.5rem; padding:.2rem .6rem; border-radius:999px; font-size:.75rem; line-height:1.4;
          background:rgba(0,0,0,.65); color:#ffffff; text-decoration:none; backdrop-filter:blur(2px); }
.credit:hover { background:rgba(0,0,0,.85); text-decoration:underline; }
.img-ph { aspect-ratio:4/3; border-radius:10px; background:var(--head); border:1px dashed var(--line); display:flex; flex-direction:column;
          align-items:center; justify-content:center; gap:.4rem; text-align:center; color:var(--muted); font-size:.9rem; padding:1rem; }
.hero figcaption { margin-top:.4rem; font-size:.82rem; color:var(--muted); }
/* Key dates: milestones on a line (date above the dot, label below); vertical on phones */
.timeline { list-style:none; margin:.5rem 0 1.25rem; padding:0; display:grid; grid-template-columns:repeat(7,1fr); }
.timeline li { position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 .25rem; }
.timeline time { order:1; height:1.5rem; font-weight:600; color:var(--fg); font-size:.95rem; font-variant-numeric:tabular-nums; white-space:nowrap; }
.timeline li::before { content:""; order:2; position:relative; z-index:1; width:14px; height:14px; margin:.4rem 0 .5rem; border-radius:50%;
                       background:var(--bg); border:2px solid var(--line); box-sizing:border-box; }
.timeline li::after { content:""; position:absolute; left:0; right:0; top:calc(1.9rem + 6px); height:2px; background:var(--line); }
.timeline li:first-child::after { left:50%; }
.timeline li:last-child::after { right:50%; }
.timeline .label { order:3; font-size:.82rem; line-height:1.35; color:var(--muted); }
.timeline li.done::before { background:var(--accent); border-color:var(--accent); }
.timeline li.done::after, .timeline li.now::after { background:var(--accent); }
.timeline li.now::before { width:20px; height:20px; margin:calc(.4rem - 3px) 0 calc(.5rem - 3px); background:var(--gold);
                           border:3px solid var(--bg); box-shadow:0 0 0 2px var(--gold); }
.timeline li.now time { color:var(--gold-fg); }
.timeline li.now .label { color:var(--fg); font-weight:600; }
.now-tag { color:var(--gold-fg); border-color:var(--gold); margin-left:.2rem; }
@media (max-width:640px) {
  .timeline { grid-template-columns:1fr; gap:0; }
  .timeline li { flex-direction:row; align-items:flex-start; text-align:left; padding:0 0 .9rem; }
  .timeline time { width:5.5rem; flex-shrink:0; height:auto; }
  .timeline li::before { flex-shrink:0; margin:.2rem .75rem 0 0; }
  .timeline li.now::before { margin:calc(.2rem - 3px) calc(.75rem - 3px) 0 -3px; }
  .timeline li::after, .timeline li:first-child::after, .timeline li:last-child::after
    { left:calc(5.5rem + 6px); right:auto; top:0; bottom:0; width:2px; height:auto; }
  .timeline li:first-child::after { top:.6rem; }
  .timeline li:last-child::after { bottom:auto; height:.6rem; }
  .timeline .label { padding-top:.05rem; }
}

/* Live session announcement */
.box.session { border-color:var(--gold); background:var(--win); margin:.5rem 0 1.5rem; }
.box.session h2 { margin:0 0 .35rem; padding:0; border:0; font-size:1.15rem; }
.box.session p { margin:0 0 .75rem; }

/* ------------------------------------------------------------ Partners (static logo row) */
.partners { margin:1.5rem 0; text-align:center; }
.partners h2 { margin:0 0 .75rem; padding:0; border:0; font-size:.8rem; font-weight:600; letter-spacing:.06em;
               text-transform:uppercase; color:var(--muted); }
.logos { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:.75rem; }
/* Logos sit on a white tile in every theme so dark-on-transparent logos stay legible */
.logo { display:flex; align-items:center; justify-content:center; height:72px; min-width:150px; padding:.5rem 1rem;
        background:#ffffff; border:1px solid var(--line); border-radius:8px; text-decoration:none; }
.logo:hover { border-color:var(--accent); }
.logo img { display:block; max-height:52px; max-width:200px; width:auto; height:auto; }
.wordmark { color:#1a1a1a; font-weight:600; font-size:.9rem; line-height:1.3; max-width:170px; }
.wordmark-lg { font-size:1.6rem; font-weight:800; letter-spacing:-.01em; color:#1d4f9c; }
/* Infinite scroll to the left. Each track is at least as wide as the strip, so two copies loop without a gap. */
.marquee { display:flex; overflow:hidden; padding:.25rem 0;
           -webkit-mask-image:linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
                   mask-image:linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); }
.marquee.animated .track { flex-shrink:0; flex-wrap:nowrap; min-width:100%; justify-content:space-around;
                           padding-right:.75rem; animation:marquee 30s linear infinite; }
.marquee.paused .track, .marquee:hover .track, .marquee:focus-within .track { animation-play-state:paused; }
@keyframes marquee { from { transform:translateX(0); } to { transform:translateX(-100%); } }
.marquee-toggle { margin-top:.6rem; font-size:.8rem; padding:.25rem .7rem; }
/* Reduced motion (system setting or the "Stop animations" option): static, wrapping row */
@media (prefers-reduced-motion: reduce) {
  .marquee.animated .track { animation:none; flex-wrap:wrap; justify-content:center; min-width:0; }
  .marquee.animated .track[aria-hidden="true"], .marquee-toggle { display:none; }
  .marquee { -webkit-mask-image:none; mask-image:none; justify-content:center; }
}
:root[data-motion="reduce"] .marquee.animated .track { animation:none; flex-wrap:wrap; justify-content:center; min-width:0; }
:root[data-motion="reduce"] .marquee.animated .track[aria-hidden="true"], :root[data-motion="reduce"] .marquee-toggle { display:none; }
:root[data-motion="reduce"] .marquee { -webkit-mask-image:none; mask-image:none; justify-content:center; }

/* ------------------------------------------------------------ Tables */
.controls { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; margin:.5rem 0; }
.wrap { overflow-x:auto; max-width:100%; border:1px solid var(--line); border-radius:8px; }
table { border-collapse:collapse; width:100%; font-variant-numeric:tabular-nums; font-size:.93rem; }
th, td { padding:.5rem .75rem; text-align:right; white-space:nowrap; border-bottom:1px solid var(--line); }
th { background:var(--head); font-weight:600; }
table.sortable th { cursor:pointer; user-select:none; position:sticky; top:0; }
table.sortable th:hover { color:var(--accent); }
th.asc::after { content:" \25B2"; font-size:.7em; }
th.desc::after { content:" \25BC"; font-size:.7em; }
td.model, th.model, td.txt, th.txt { text-align:left; }
td.model { font-weight:600; }
tr.win td, tr.rank1 td { background:var(--win); }
/* Leaderboard: wider than the text column (up to 1320px) and compact, so all columns fit on desktop */
.lb-wrap { max-width:none; width:min(1320px, calc(100vw - 48px)); margin-left:calc(50% - min(660px, 50vw - 24px)); }
#lb { font-size:.82rem; }
#lb th, #lb td { padding:.45rem .45rem; }
#lb th { white-space:normal; vertical-align:bottom; line-height:1.25; }
#lb td:last-child { white-space:normal; min-width:6.5rem; }
#lb td:first-child, #lb th:first-child { text-align:center; }
tr.baseline td { color:var(--muted); font-style:italic; border-top:2px solid var(--line); }
tr:last-child td { border-bottom:none; }
.tag { font-style:normal; font-weight:600; font-size:.72rem; letter-spacing:.03em; text-transform:uppercase;
       padding:.05rem .4rem; border:1px solid var(--line); border-radius:999px; margin-left:.35rem; color:var(--muted); }
table.plain th, table.plain td { text-align:left; white-space:normal; }

/* ------------------------------------------------------------ Cards */
.card { border:1px solid var(--line); border-radius:8px; padding:1.25rem; margin:1rem 0; background:var(--card); }
.card.winner { border-color:var(--gold); }
.badge { display:inline-block; font-size:.78rem; font-weight:600; letter-spacing:.03em; text-transform:uppercase;
         padding:.15rem .55rem; border-radius:999px; border:1px solid var(--line); margin-bottom:.5rem; }
.card.winner .badge { border-color:var(--gold); color:var(--gold-fg); }
.card h3 { margin:.1rem 0 .25rem; }
.card .authors { margin:0 0 .75rem; color:var(--muted); font-size:.93rem; }
.card .grid { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; align-items:start; }
@media (max-width:720px) { .card .grid { grid-template-columns:1fr; } }
.cards-3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem; margin:1rem 0; }
.cards-3 .card { margin:0; }
.video { position:relative; aspect-ratio:16/9; border-radius:6px; overflow:hidden; background:var(--head);
         display:flex; align-items:center; justify-content:center; text-align:center; color:var(--muted); font-size:.9rem; }
.video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.shot { aspect-ratio:16/10; border-radius:6px; background:var(--head); display:flex; align-items:center;
        justify-content:center; color:var(--muted); font-size:.9rem; margin-bottom:.75rem; }
.card .abstract { margin:0 0 .75rem; font-size:.95rem; }
.card .meta { font-size:.9rem; margin:0; }

pre { background:var(--head); border:1px solid var(--line); border-radius:8px; padding:1rem; overflow-x:auto; font-size:.85rem; }
footer.site { max-width:980px; margin:3rem auto 0; padding:1rem 16px 2rem; border-top:1px solid var(--line); color:var(--muted); font-size:.88rem; }
.cards-3 .video { margin-bottom:.75rem; }
/* References (How to cite) */
.refs { list-style:none; padding:0; margin:1rem 0; }
.refs li { border:1px solid var(--line); border-radius:8px; background:var(--card); padding:1rem 1.25rem; margin:0 0 .75rem; }
.refs .apa { margin:0 0 .75rem; padding-left:2em; text-indent:-2em; line-height:1.55; }
.refs .apa a { overflow-wrap:anywhere; }
.ref-actions { display:flex; flex-wrap:wrap; gap:.5rem; }
.btn.sm { padding:.3rem .7rem; font-size:.85rem; background:var(--bg); color:var(--fg); cursor:pointer; font:inherit; font-size:.85rem; }
.btn.sm[aria-expanded="true"] { border-color:var(--accent); }
.refs pre { margin:.75rem 0 0; }
/* Screenshots of Task 3 resources */
.shot-link { display:block; margin:0 0 .75rem; border-radius:6px; overflow:hidden; border:1px solid var(--line); }
.shot-link:hover, .shot-link:focus-visible { border-color:var(--accent); }
.screenshot { display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; object-position:top; }
.card .meta + .meta { margin-top:.5rem; }