/* Q-OIL project page.
   Type, title gradient, buttons and section rhythm follow the LMP page (Nerfies template);
   cards and the pseudocode diff follow the ASTEROID page. */
:root {
    --ink: #1c1d22;
    --ink-2: #4a4c55;
    --ink-3: #8a8c95;
    --line: #e4e5ea;
    --soft: #f6f7fa;
    --navy: #1f3f7a;            /* Q-OIL in charts and highlights */
    --link: #209cee;            /* LMP author links */
    --btn: #363636;             /* LMP dark pill buttons */
    --grad: linear-gradient(to right, #4285f4, #6a4fb4, #ac3f87);
    --good: #1f7a3f;
    --bad: #b3261e;
    --amber: #d08a1a;
    --qoil-video: #3fbfa4;      /* line colors inside the timelapse overlays */
    --bcrl-video: #e39a4c;

    /* charts.js palette (validated: Q-OIL navy vs. grays) */
    --chart-ours: #1f3f7a; --chart-base: #a9acb4; --chart-base-2: #a9acb4; --chart-base-3: #dfe1e6;
    --chart-focus: #4a4c55; --chart-grid: #eceef2;

    --title: 'Google Sans', 'Noto Sans', sans-serif;
    --body: 'Noto Sans', sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
body { margin: 0; background: #fff; color: var(--ink); font-family: var(--body); font-size: 1rem; line-height: 1.65; -webkit-font-smoothing: antialiased; }
img, video { display: block; max-width: 100%; }
figure { margin: 0; }
p { margin: 0 0 1rem; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid #4285f4; outline-offset: 3px; border-radius: 6px; }

.container { width: min(960px, 100% - 2rem); margin-inline: auto; }
.narrow { max-width: 780px; margin-inline: auto; }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ---------- Header ---------- */
.hero { padding: 3.5rem 0 1rem; text-align: center; }
.pub-title { font-family: var(--title); font-weight: 600; font-size: clamp(2rem, 1.3rem + 2.4vw, 3rem); line-height: 1.15; margin: 0 auto; max-width: 21em; text-wrap: balance; }
.pub-title .grad { font-weight: 600; }
.authors { font-family: var(--title); font-size: 1.25rem; margin-top: 1.1rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.15rem 0.9rem; }
.authors span { color: var(--ink); }
.affil { font-family: var(--title); font-size: 1.05rem; color: var(--ink-2); margin: 0.5rem 0 0; }
.affil-note { font-size: 0.9rem; color: var(--ink-3); margin: 0.1rem 0 0; }
.links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 1.1rem; }
.btn { display: inline-flex; align-items: center; gap: 0.45rem; background: var(--btn); color: #fff; border-radius: 999px; padding: 0.42rem 1.05rem; font-size: 1rem; }
.btn:hover { background: #242424; text-decoration: none; }
.btn svg, .btn img { width: 1.05em; height: 1.05em; }
.btn[aria-disabled="true"] { background: #b5b7bf; pointer-events: none; }

/* ---------- Sections ---------- */
.section { padding: 3.25rem 0; }
.rule { width: 75%; height: 1px; background: #d6dbdf; border: 0; margin: 0 auto; }
.section-title { font-family: var(--body); font-weight: 600; font-size: 2rem; line-height: 1.2; text-align: center; margin: 0 0 0.6rem; }
.sub-title { font-family: var(--body); font-weight: 600; font-size: 1.25rem; margin: 0 0 1rem; }
.sub-title.center { text-align: center; }
.sub-title + .lede { margin: -0.6rem 0 1.1rem; color: var(--ink-2); max-width: 780px; text-wrap: pretty; }
.justified { text-align: justify; hyphens: auto; }
.block + .block { margin-top: 3rem; }

/* ---------- Training-run carousel (hero) ---------- */
.carousel { max-width: 760px; margin: 2rem auto 0; }
.seg-toggle { position: relative; display: flex; max-width: 640px; margin: 0 auto 0.9rem; padding: 4px; background: #ece7f3; border-radius: 999px; box-shadow: inset 0 1px 3px rgba(60, 40, 100, 0.12); list-style: none; }
.seg-toggle li { flex: 1 1 0%; min-width: 0; display: flex; }
.seg-toggle button {
    flex: 1; min-width: 0; border: 0; background: none; border-radius: 999px; cursor: pointer;
    font: 500 0.9rem var(--body); color: #4b4560; padding: 0.42rem 0.4rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: color 0.2s;
}
.seg-toggle button[aria-selected="true"] { background: var(--grad); color: #fff; box-shadow: 0 2px 8px rgba(106, 79, 180, 0.35); }
.stage { display: grid; }
.stage > .panel { grid-area: 1 / 1; visibility: hidden; }
.stage > .panel.is-active { visibility: visible; }
.stage video { width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; background: #0b0d11; }
.summary { max-width: 780px; margin: 2rem auto 0; text-align: justify; hyphens: auto; color: var(--ink); }

/* ---------- Cards (ASTEROID) ---------- */
.card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 1rem 1.1rem; box-shadow: 0 0 14px 2px rgba(0, 51, 102, 0.05); }
.card h3 { font: 500 1.15rem/1.3 var(--body); margin: 0 0 0.7rem; text-align: center; }
.card video { width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; background: #0b0d11; }
.card .cap { font-size: 0.92rem; color: var(--ink-2); margin: 0.7rem 0 0; text-align: center; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.two > * { min-width: 0; }

/* ---------- Findings (click-through) ---------- */
.stepper { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); gap: 1.25rem; align-items: start; }
/* Equal-height entries that span the height of the plot frame next to them */
.step-list { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-rows: 1fr; gap: 0.5rem; }
.step-list li { display: flex; }
.step-list button {
    width: 100%; display: grid; grid-template-columns: 1.7rem 1fr; gap: 0.7rem; align-items: center; text-align: left;
    padding: 0.7rem 0.85rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer;
    font: 400 0.95rem/1.3 var(--body); color: var(--ink-2);
}
.step-list button:hover { background: var(--soft); color: var(--ink); }
.step-list button[aria-selected="true"] { background: #fff; border-color: var(--line); box-shadow: 0 0 14px 2px rgba(0, 51, 102, 0.06); color: var(--ink); font-weight: 500; }
.step-list .n { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; border: 1.5px solid #c9ccd4; font: 500 0.82rem var(--body); color: var(--ink-3); }
.step-list button[aria-selected="true"] .n { background: var(--grad); border-color: transparent; color: #fff; }
.plot-frame { position: relative; aspect-ratio: 2 / 1; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.plot-frame img { position: absolute; inset: 1rem; width: calc(100% - 2rem); height: calc(100% - 2rem); object-fit: contain; }
.stage .step-cap { margin: 0.75rem 0 0; color: var(--ink-2); font-size: 0.95rem; }
.stage .step-cap b { color: var(--ink); font-weight: 600; }

/* ---------- Pseudocode diff (ASTEROID) ---------- */
.cmp-card { display: flex; flex-direction: column; }
.cmp-card.is-ours { border-color: #b9c8de; box-shadow: 0 4px 22px rgba(0, 51, 102, 0.08); }
.cmp-head { font: 700 1.1rem var(--body); margin-bottom: 0.6rem; }
.cmp-head small { font-weight: 400; color: var(--ink-3); }
ol.code { list-style: none; counter-reset: ln; margin: 0 0 0.75rem; padding: 0; font: 400 0.86rem/1.55 var(--mono); }
ol.code li { counter-increment: ln; position: relative; padding: 0.18rem 0.5rem 0.18rem 2.2rem; border-left: 3px solid transparent; border-radius: 0 4px 4px 0; }
ol.code li::before { content: counter(ln); position: absolute; left: 0.5rem; color: #b5b7bf; font-size: 0.8rem; }
ol.code li.i1 { padding-left: 3.4rem; }
ol.code .kw { font-weight: 600; }
ol.code li.m-add { background: #e8f5ec; border-left-color: var(--good); }
ol.code li.m-chg { background: #fdf3e2; border-left-color: var(--amber); }
.cmp-verdict { font-size: 0.93rem; margin-top: auto; padding-top: 0.25rem; }
.cmp-verdict.good { color: var(--navy); }
.cmp-verdict.bad { color: var(--bad); }
.cmp-legend { margin: 0.8rem 0 0; color: var(--ink-3); font-size: 0.88rem; text-align: center; }
.cmp-legend .lg { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0 0.6rem; }
.cmp-legend .lg::before { content: ""; width: 14px; height: 14px; border-radius: 3px; }
.cmp-legend .lg.add::before { background: #e8f5ec; border-left: 3px solid var(--good); }
.cmp-legend .lg.chg::before { background: #fdf3e2; border-left: 3px solid var(--amber); }

/* ---------- Comparison labels under the maze ---------- */
.compare-labels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1rem; }
.compare-labels div { border-top: 3px solid var(--line); padding-top: 0.5rem; font-size: 0.92rem; color: var(--ink-2); }
.compare-labels b { display: block; color: var(--ink); font-family: var(--body); font-weight: 500; }
.compare-labels .is-ours { border-image: var(--grad) 1; }

/* ---------- Results ---------- */
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; list-style: none; padding: 0; margin: 0 0 2.5rem; }
.facts li { text-align: center; padding: 0.9rem 0.8rem; border: 1px solid var(--line); border-radius: 16px; color: var(--ink-2); font-size: 0.95rem; }
.facts b { display: block; font: 500 1.35rem var(--body); color: var(--navy); margin-bottom: 0.15rem; }
.plot-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: end; }
.plot-row.two { grid-template-columns: repeat(2, 1fr); }
/* Plots exported at different resolutions: narrower rows keep their text at a similar size */
.plot-row.two { max-width: 800px; margin-inline: auto; }
.plot-row.compact { max-width: 720px; margin-inline: auto; }
.plot-row img { width: 100%; }
.legend { width: 100%; max-width: min(40rem, 100%); margin: 0.7rem auto 0; }
.legend.sm { max-width: min(26rem, 100%); }

/* ---------- Charts (shared charts.js) ---------- */
.chart { position: relative; }
.seg { display: inline-flex; padding: 3px; background: #ece7f3; border-radius: 999px; box-shadow: inset 0 1px 3px rgba(60, 40, 100, 0.12); }
.seg button { font: 500 0.88rem var(--body); border: 0; background: none; padding: 0.3rem 0.85rem; border-radius: 999px; color: #4b4560; cursor: pointer; }
.seg button[aria-pressed="true"], .seg button.active { background: var(--grad); color: #fff; box-shadow: 0 2px 8px rgba(106, 79, 180, 0.3); }
.chart-plot-wrap { position: relative; }
.chart-plot { width: 100%; }
.chart-plot svg { display: block; overflow: visible; }
.chart .tick { font: 12px var(--body); fill: var(--ink-3); }
.chart .bar-label { font: 12px var(--body); fill: var(--ink-2); }
.chart .bar-label.is-ours { fill: var(--chart-ours); font-weight: 700; }
.chart-tip { position: absolute; z-index: 3; pointer-events: none; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 6px 22px rgba(0, 51, 102, 0.1); padding: 0.55rem 0.7rem; font-size: 0.84rem; min-width: 11rem; display: grid; gap: 0.15rem; }
.chart-tip[hidden] { display: none; }
.chart-tip b { font-weight: 600; margin-bottom: 0.15rem; }
.chart-tip span { display: grid; grid-template-columns: 0.9rem 1fr auto; gap: 0.45rem; align-items: center; color: var(--ink-2); }
.chart-tip span i { width: 0.9rem; height: 3px; border-radius: 2px; background: var(--chart-base); }
.chart-tip span.is-ours { color: var(--ink); font-weight: 600; }
.chart-tip span.is-ours i { background: var(--chart-ours); }
.chart-tip em { font-style: normal; font-variant-numeric: tabular-nums; }
.bar-key { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.1rem; font-size: 0.9rem; color: var(--ink-2); margin-bottom: 0.3rem; }
.bar-key i { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 3px; margin-right: 0.35rem; vertical-align: -0.08em; }/* ---------- Ablation ---------- */

.abl { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; }
.abl > * { min-width: 0; }
.abl-plot img { width: 100%; }
.abl-plot figcaption, .heat-cap { font-size: 0.88rem; color: var(--ink-3); text-align: center; margin: 0.4rem 0 0; }
.heat-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.heat-pair figcaption { text-align: center; font-size: 0.92rem; color: var(--ink-2); margin-bottom: 0.35rem; }
.heat-pair img { width: 100%; aspect-ratio: 1; border-radius: 8px; }
.abl-side > p:last-child { margin: 1rem 0 0; color: var(--ink-2); }
.abl-side b { color: var(--ink); font-weight: 600; }

/* ---------- Simulator ---------- */
.sim { display: grid; grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); gap: 1.75rem; align-items: start; }
.sim .demo-arena { width: 100%; aspect-ratio: 4 / 3; display: block; border-radius: 12px; cursor: pointer; touch-action: none; }
.sim .demo-arena:focus-visible { outline: 2px solid #6a4fb4; outline-offset: 3px; }
.sim .demo-legend { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 0.75rem; align-items: center; margin-top: 0.6rem; font-size: 0.82rem; color: var(--ink-3); }
.sim .demo-legend-name { grid-row: 1 / 3; color: var(--ink-2); }
.sim .demo-legend-bar { height: 8px; border-radius: 4px; }
.sim .demo-legend-labels { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }
.sim-side { display: grid; gap: 1rem; }
.sim-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.sim-row[hidden] { display: none; }
.sim-row .label { font-size: 0.9rem; color: var(--ink-3); min-width: 4.5rem; }
.switch { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.93rem; cursor: pointer; }
.switch input { appearance: none; width: 2.3rem; height: 1.3rem; border-radius: 999px; background: #d4d6dc; position: relative; cursor: pointer; transition: background 0.15s; margin: 0; }
.switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: calc(1.3rem - 4px); height: calc(1.3rem - 4px); border-radius: 50%; background: #fff; transition: transform 0.15s; }
.switch input:checked { background: #6a4fb4; }
.switch input:checked::after { transform: translateX(1rem); }
.ghost-btn { font: 500 0.88rem var(--body); border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 999px; padding: 0.3rem 0.9rem; cursor: pointer; }
.ghost-btn:hover { border-color: #c9ccd4; }
.readouts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin: 0; }
.readouts dt { font-size: 0.8rem; color: var(--ink-3); }
.readouts dd { margin: 0; font: 500 1.05rem var(--body); font-variant-numeric: tabular-nums; }
.sim .demo-chart { width: 100%; height: 140px; display: block; }
.sim-key { display: flex; gap: 1.1rem; font-size: 0.86rem; color: var(--ink-2); }
.sim-key i { display: inline-block; width: 0.9rem; height: 3px; border-radius: 2px; margin-right: 0.35rem; vertical-align: 0.2em; }
.sim-key i.dash { background: repeating-linear-gradient(to right, #4a4c55 0 4px, transparent 4px 7px); }
.sim-help { font-size: 0.9rem; color: var(--ink-3); margin: 0; }
.sim-help b { font-weight: 600; color: var(--ink-2); }


/* ---------- Citation / footer ---------- */
.bib { position: relative; background: var(--soft); border-radius: 12px; padding: 1.1rem 1.25rem; overflow-x: auto; }
.bib pre { margin: 0; font: 0.84rem/1.55 var(--mono); }
.copy { position: absolute; top: 0.7rem; right: 0.7rem; border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 0.2rem 0.75rem; font: 500 0.82rem var(--body); cursor: pointer; }
footer { color: var(--ink-3); font-size: 0.88rem; text-align: center; padding: 2rem 0 2.5rem; }

/* ---------- Findings -> design links ---------- */
.eq { margin: 0.45rem 0 0; font-family: 'Castoro', Georgia, serif; font-size: 1.02rem; color: var(--ink); }
.eq sub, .eq sup { font-size: 0.7em; }
.so { display: flex; gap: 0.55rem; align-items: baseline; margin: 0.35rem 0 0; font-size: 0.93rem; color: var(--navy); }
.so .tag { flex: none; font-size: 0.74rem; font-weight: 600; padding: 0.05rem 0.55rem; border-radius: 999px; background: #eef1f8; color: var(--navy); }
.so.is-bench { color: #5a3f9e; }
.so.is-bench .tag { background: #f2edf8; color: #5a3f9e; }
.fb {
    display: inline-grid; place-items: center; width: 1.15rem; height: 1.15rem; margin-left: 0.5rem; vertical-align: 0.05em;
    border-radius: 50%; background: var(--grad); color: #fff; font: 600 0.68rem var(--body); text-decoration: none;
}
.fb:hover { text-decoration: none; filter: brightness(1.1); box-shadow: 0 0 0 3px rgba(106, 79, 180, 0.18); }
.lg-fb { display: inline-flex; align-items: center; gap: 0.25rem; margin: 0 0.6rem; }
.lg-fb .fb { margin: 0 0.1rem 0 0; }
.lg-fb .fb:last-of-type { margin-right: 0.4rem; }

/* ---------- Try-it drop-down ---------- */
.try { max-width: 960px; margin: 2rem auto 0; }
.try > summary {
    list-style: none; display: block; width: fit-content; margin: 0 auto; cursor: pointer;
    background: var(--grad); color: #fff; border-radius: 999px; padding: 0.55rem 1.4rem;
    font: 500 1rem var(--body); box-shadow: 0 2px 10px rgba(106, 79, 180, 0.3);
}
.try > summary::-webkit-details-marker { display: none; }
.try > summary::after { content: "▾"; margin-left: 0.5rem; display: inline-block; transition: transform 0.2s; }
.try[open] > summary::after { transform: rotate(180deg); }
.try-body { margin-top: 1.25rem; text-align: left; }

@media (max-width: 820px) {
    .two, .stepper, .compare-labels, .facts, .abl, .sim, .plot-row { grid-template-columns: 1fr; }
    .step-list { grid-auto-flow: column; grid-auto-columns: minmax(10rem, 1fr); grid-auto-rows: auto; overflow-x: auto; padding-bottom: 0.25rem; }
    .plot-row.two { grid-template-columns: 1fr; }
    .seg-toggle button { font-size: 0.8rem; }
    .readouts { grid-template-columns: repeat(2, 1fr); }
}