/* Project pages (_layouts/project.html). One column, system font, light and dark. */

:root {
    --text: #0d0d0d;
    --muted: #6e6e73;
    --bg: #ffffff;
    --surface: #f5f5f7;
    --border: #e3e3e6;
    --link: #0d0d0d;
    --font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --col: 680px;
    --gutter: 16px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --text: #ececec;
        --muted: #9a9aa0;
        --bg: #0d0d0d;
        --surface: #1a1a1c;
        --border: #2c2c2f;
        --link: #ffffff;
    }
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 17px/1.6 var(--font);
    -webkit-font-smoothing: antialiased;
}

main, header.site, footer.site {
    max-width: calc(var(--col) + 2 * var(--gutter));
    margin: 0 auto;
    padding: 0 var(--gutter);
}

a { color: var(--link); text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 0.2em; }
a:hover { text-decoration-color: currentColor; }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: var(--gutter); top: 8px; background: var(--bg); padding: 4px 8px; }

header.site { padding-top: 24px; font-size: 15px; }
header.site a { text-decoration: none; color: var(--muted); }
header.site a:hover { color: var(--text); }

/* Title block */
.hero { padding: 96px 0 56px; text-align: center; }
.hero h1 {
    margin: 0 0 24px;
    font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem);
    line-height: 1.1;
    font-weight: 600;
    letter-spacing: -0.02em;
}
.authors { margin: 0 0 4px; font-size: 1rem; }
.authors a { text-decoration: none; }
.authors a:hover { text-decoration: underline; }
.meta { margin: 0; color: var(--muted); font-size: 0.9375rem; }

.links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}
.links a, .links .soon {
    display: inline-block;
    padding: 6px 16px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.9375rem;
    text-decoration: none;
}
.links a:hover { border-color: var(--text); }
.links .soon { color: var(--muted); cursor: default; }

/* Sections */
section { margin: 0 0 64px; }
h2 {
    margin: 0 0 16px;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}
p { margin: 0 0 16px; }
.lede { font-size: 1.0625rem; }
.muted { color: var(--muted); }
.note { color: var(--muted); font-size: 0.875rem; }
.intro { margin-bottom: 48px; }

/* Figures */
.fig { margin: 0 0 32px; }
/* Paper figures are drawn for white paper, so they sit on a white card (visible in dark mode). */
.fig-img { background: #fff; border-radius: 8px; padding: 12px; }
.fig img { display: block; width: 100%; height: auto; }
.fig--wide .fig-img { overflow-x: auto; }
@media (max-width: 600px) { .fig--wide img { width: 600px; max-width: none; } }
/* Wider than the column on large screens, the column width on phones; the caption stays in the column. */
.fig--bleed .fig-img {
    width: min(960px, 100vw - 2 * var(--gutter));
    margin-left: calc(50% - min(480px, 50vw - var(--gutter)));
}
.fig--bleed img { width: auto; max-width: 100%; margin: 0 auto; }
.placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: var(--surface);
    border: 1px dashed var(--border);
    border-radius: 8px;
    color: var(--muted);
    font-size: 0.875rem;
}
figcaption, .caption { margin-top: 12px; color: var(--muted); font-size: 0.875rem; line-height: 1.5; }

/* Tables */
.table-wrap { overflow-x: auto; margin: 0; }
.caption { margin: 12px 0 32px; }
table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
th, td { padding: 8px 12px; text-align: right; border-bottom: 1px solid var(--border); white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
thead th { font-weight: 600; border-bottom-color: var(--text); }
tr.ours td { font-weight: 600; }
table.text th, table.text td { text-align: left; }

/* BibTeX */
pre {
    margin: 0;
    padding: 16px;
    overflow-x: auto;
    background: var(--surface);
    border-radius: 8px;
    font: 0.8125rem/1.6 var(--mono);
}

footer.site { padding-top: 32px; padding-bottom: 48px; border-top: 1px solid var(--border); font-size: 0.875rem; }
footer.site a { color: var(--muted); text-decoration: none; }

/* Videos (_includes/project/video.html): same white card as figures */
.fig video { display: block; width: 100%; height: auto; }
@media (max-width: 600px) { .fig--wide video { width: 600px; max-width: none; } }
.fig--bleed video { width: auto; max-width: 100%; margin: 0 auto; }

/* DRIFT (drift/index.html): inline SVG results charts that follow the theme */
:root { --drift: #1F4FB0; --drift-2: #79A8F2; --drift-grid: #ececef; }
@media (prefers-color-scheme: dark) { :root { --drift: #79A8F2; --drift-2: #4A78C8; --drift-grid: #222225; } }
.drift-media { margin: 0 0 12px; overflow-x: auto; }
.drift-svg { display: block; width: 100%; height: auto; min-width: 560px; }
.drift-svg text { font-family: var(--font); font-size: 15px; fill: var(--text); }
.drift-svg .ttl { font-weight: 600; }
.drift-svg .tick, .drift-svg .lab, .drift-svg .val { font-size: 13px; fill: var(--muted); }
.drift-svg .val { fill: var(--text); }
.drift-svg .grp { font-size: 12px; fill: var(--muted); }
.drift-svg .ax { font-size: 13px; fill: var(--muted); }
.drift-svg .lab-ours, .drift-svg .val-ours { font-size: 13px; font-weight: 600; fill: var(--drift); }
.drift-svg .lab-sym, .drift-svg .val-sym { font-size: 13px; fill: var(--text); }
.drift-svg .grid { stroke: var(--drift-grid); }
.drift-svg .axis { stroke: var(--muted); }
.drift-svg .pt { fill: var(--muted); } .drift-svg .pt-ours { fill: var(--drift); } .drift-svg .pt-sym { fill: var(--drift-2); }
.drift-svg .band, .drift-svg .band-ours, .drift-svg .band-sym { stroke-width: 8; stroke-linecap: round; opacity: 0.3; }
.drift-svg .band { stroke: var(--muted); } .drift-svg .band-ours { stroke: var(--drift); } .drift-svg .band-sym { stroke: var(--drift-2); }
.drift-svg .bar { fill: var(--muted); opacity: 0.45; } .drift-svg .bar-ours { fill: var(--drift); } .drift-svg .bar-sym { fill: var(--drift-2); }
.drift-svg .pt-g:hover .pt, .drift-svg .pt-g:hover .bar { fill: var(--text); opacity: 1; }
/* DRIFT diagrams (teaser and overview), same palette as the paper: amber = actions and actor, teal = predictor heads */
:root { --drift-amb: #E0892A; --drift-amb-t: #8A4B0F; --drift-teal: #1A8C7E; --drift-teal-t: #0F5A51; }
@media (prefers-color-scheme: dark) { :root { --drift-amb: #F2A65A; --drift-amb-t: #F2B36B; --drift-teal: #3FB3A4; --drift-teal-t: #8FDCD1; } }
.drift-diagram { min-width: 700px; }
.drift-diagram .ttl2 { font-size: 17px; font-weight: 600; }
.drift-diagram .lb { font-size: 14px; fill: var(--text); }
.drift-diagram .lb-amb, .drift-diagram .lab-amb { font-size: 14px; fill: var(--drift-amb-t); }
.drift-diagram .lab-amb { font-size: 13px; }
.drift-diagram .math, .drift-diagram .math-amb { font-size: 15px; font-style: italic; }
.drift-diagram .math-amb { fill: var(--drift-amb-t); }
.drift-diagram .sub { font-size: 11px; }
.drift-diagram .approx { font-size: 16px; }
.drift-diagram .hero { fill: var(--drift); }
.drift-diagram .hero-t { fill: #fff; font-size: 20px; font-weight: 600; }
.drift-diagram .hero-s { fill: #fff; font-size: 16px; font-weight: 600; }
.drift-diagram .mod { fill: var(--surface); stroke: var(--muted); stroke-width: 1.2; }
.drift-diagram .mod-stc { fill: var(--bg); stroke: var(--muted); stroke-width: 1.2; }
.drift-diagram .ema { fill: var(--surface); stroke: var(--border); stroke-width: 1.2; }
.drift-diagram .mod-amb { fill: var(--drift-amb); fill-opacity: 0.12; stroke: var(--drift-amb); stroke-width: 1.2; }
.drift-diagram .mod-teal { fill: var(--drift-teal); fill-opacity: 0.12; stroke: var(--drift-teal); stroke-width: 1.2; }
.drift-diagram .grp { fill: var(--surface); }
.drift-diagram .bg { fill: var(--bg); }
.drift-diagram .tok-b { fill: var(--drift); fill-opacity: 0.22; stroke: var(--drift); stroke-width: 0.8; }
.drift-diagram .tok-a { fill: var(--drift-amb); fill-opacity: 0.45; stroke: var(--drift-amb); stroke-width: 0.8; }
.drift-diagram .lat { fill: var(--muted); }
.drift-diagram .lat-f { fill: none; stroke: var(--muted); stroke-width: 0.8; }
.drift-diagram .tile { clip-path: inset(0 round 4px); }
.drift-diagram .tile-f { fill: none; stroke: var(--text); stroke-opacity: 0.3; stroke-width: 0.8; }
.drift-diagram .ln, .drift-diagram .ln-amb, .drift-diagram .ln-teal, .drift-diagram .ln-faint { fill: none; stroke: var(--muted); stroke-width: 1.2; stroke-linejoin: round; }
.drift-diagram .ln-amb { stroke: var(--drift-amb); } .drift-diagram .ln-teal { stroke: var(--drift-teal); } .drift-diagram .ln-faint { stroke: var(--border); }
.drift-diagram .ahd { fill: var(--muted); } .drift-diagram .ahd-amb { fill: var(--drift-amb); } .drift-diagram .ahd-teal { fill: var(--drift-teal); }
.drift-diagram .sg { stroke: var(--muted); stroke-width: 1.2; }
.drift-diagram .ico { fill: var(--drift-teal); fill-opacity: 0.4; stroke: var(--drift-teal-t); stroke-width: 0.8; stroke-linejoin: round; stroke-linecap: round; }
.drift-diagram .ico-l { fill: none; }