/* ============================================================
 *  Results section (index.html, <section id="main-viz">):
 *  the two-line setup, the UBO2014 PSNR chart and the
 *  related-datasets table. The chart and the table are
 *  generated by tools/results/build_results.py from the
 *  paper's tables.
 * ============================================================ */

#main-viz {
    --res-ink2: #3a3f47;
    --res-ours-bg: #e8efff;      /* accent tint: the RoboCloth row (= --accent-soft) */
    --res-base-bg: #f5f6f8;      /* lighter neutral tint: the UBO rows (main baseline) */
    --res-yes: #1f9d55;          /* check glyph */
    --res-no: #c3c9d2;           /* cross glyph */
    --res-rule: #d5dae1;
}

#main-viz .res-setup { margin-bottom: 0; }

/* --------  cards (same look as the room panel)  -------- */

.res-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(20, 30, 50, 0.04), 0 8px 24px rgba(20, 30, 50, 0.05);
    margin: 0 1rem;
    overflow: hidden;
}

/* --------  chart (caption styled like the Method section's)  -------- */

.res-figure { margin: 2rem 0 0; }
.res-figure figcaption {
    margin: 0.8rem 1rem 0;
    font-size: 0.95rem;           /* captions, as the Method section's */
    line-height: 1.55;
    color: var(--muted);
}
.res-figure figcaption b { color: var(--brand); }

.res-chart-card { padding: 1.2rem 1.4rem 1rem; }
.res-chart-img {
    display: block;
    width: 100%;
    max-width: 960px;
    height: auto;
    margin: 0 auto;
}

/* --------  related-datasets table  -------- */

.res-subtitle {
    margin: 2.6rem 1rem 0.9rem;
    text-align: center;
    font-size: 1.25rem;           /* sub-heading, as .subsection-title */
    font-weight: 600;
    line-height: 1.25;
}

.res-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    /* scroll hint: a soft shadow on the right edge while more columns are hidden */
    background:
        linear-gradient(to left, var(--panel) 45%, rgba(255, 255, 255, 0)) right center / 2.5rem 100% no-repeat local,
        radial-gradient(farthest-side at 100% 50%, rgba(20, 30, 50, 0.16), rgba(20, 30, 50, 0)) right center / 0.75rem 100% no-repeat scroll;
}

.res-table {
    width: 100%;
    min-width: 46rem;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--brand);
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
}
.res-related .res-c-stub { width: 22%; }
.res-related .res-c-num { width: 9%; }
.res-related .res-c-flag { width: 12%; }

.res-table th,
.res-table td {
    padding: 0.62rem 0.8rem;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    border-bottom: 1px solid var(--border);
}
.res-table tbody tr:last-child > * { border-bottom: 0; }
.res-table .res-num { text-align: right; }

.res-table thead th {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.25;
    color: var(--muted);
    white-space: normal;
    padding-top: 0.8rem;
    padding-bottom: 0.55rem;
    vertical-align: bottom;
    background: #fbfcfd;
}

/* row headers: the dataset name, sticky while the columns scroll on narrow screens */
.res-table .res-stub {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--panel);
    text-align: left;
    padding-left: 1.15rem;
}
.res-table thead .res-stub { background: #fbfcfd; }
.res-table tbody .res-stub { font-weight: 600; }
.res-table tbody td { color: var(--res-ink2); }

/* the UBO rows: main baseline, lighter tint */
.res-table tr.res-base > * { background: var(--res-base-bg); }

/* the RoboCloth row: accent tint, bold, accent edge */
.res-table tr.res-ours > * {
    background: var(--res-ours-bg);
    font-weight: 700;
    color: var(--brand);
    border-top: 1px solid var(--res-rule);
}
.res-table tr.res-ours .res-stub { box-shadow: inset 3px 0 0 var(--accent); }

.res-tag {
    display: inline-block;
    vertical-align: 0.1em;
    margin-left: 0.45rem;
    padding: 0.08rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted);
    background: #e9ecf1;
}
.res-tag-ours { color: #fff; background: var(--accent); }

/* check / cross glyphs (inline SVG, stroke = currentColor) */
.res-glyph {
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    vertical-align: -0.2em;
    line-height: 0;
}
.res-glyph svg { display: block; width: 100%; height: 100%; }
.res-yes { color: var(--res-yes); }
.res-no { color: var(--res-no); }
.res-table tr.res-ours .res-yes { color: var(--accent); }

.res-footnote {
    padding: 0.85rem 1.15rem 0.95rem;
    border-top: 1px solid var(--border);
    background: #fbfcfd;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--muted);
}
.res-footnote p { margin: 0; }
.res-footnote b { color: var(--brand); font-weight: 600; }

/* --------  narrow screens  -------- */

/* the phone layout of the chart (build_results.py CHART_NARROW_MAX) */
@media (max-width: 820px) {
    .res-chart-img { max-width: 440px; }
    .res-chart-card { padding: 1rem 0.9rem 0.8rem; }
}

@media (max-width: 720px) {
    .res-table .res-stub { box-shadow: 1px 0 0 var(--border); }
    .res-table tr.res-ours .res-stub { box-shadow: inset 3px 0 0 var(--accent), 1px 0 0 var(--border); }
}

@media (max-width: 576px) {
    .res-subtitle { font-size: 1.15rem; margin-top: 2.2rem; }
    /* auto layout: columns take their min-content width, so the headers never collide */
    .res-table { table-layout: auto; min-width: 40rem; font-size: 0.95rem; }
    .res-table th,
    .res-table td { padding: 0.5rem 0.55rem; }
    .res-table .res-stub { padding-left: 0.85rem; }
    .res-table thead th { font-size: 0.72rem; }
    .res-tag { display: block; width: max-content; margin: 0.15rem 0 0; }
    .res-footnote { padding: 0.75rem 0.85rem 0.85rem; }
}

/* the datasets table opens the section: its heading sits right under the rule */
.section-rule + .res-subtitle { margin-top: 0.6rem; }

/* --------  qualitative galleries (moved here from the paper's supplement)  -------- */

.qual-fig { margin-top: 1.8rem; }
.qual-title {
    margin: 0 1rem 0.55rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink, #1f1f1f);
}
.qual-table {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: 0.45rem;
    row-gap: 0.3rem;
    margin: 0 1rem;
}
.qual-head {
    grid-column: 2;
    grid-row: 1;
    display: grid;
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
    text-align: center;
    font-weight: 600;
    font-size: clamp(0.68rem, 1.6vw, 0.92rem);
    color: var(--ink, #1f1f1f);
    padding: 0 0.6rem;              /* match the card padding so headers sit over the cells */
}
.qual-head .is-ours { color: #3367d6; }
.qual-rowlabels {
    grid-column: 1;
    grid-row: 2;
    display: grid;
    grid-template-rows: repeat(var(--rows), minmax(0, 1fr));
    align-items: center;
    justify-items: center;
    padding: 0.6rem 0;              /* match the card padding so labels sit beside the cells */
    font-size: clamp(0.66rem, 1.5vw, 0.86rem);
    color: var(--muted);
}
.qual-rowlabels span {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
}
.qual-card {
    display: block;
    padding: 0.6rem;
    text-decoration: none;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.qual-card:hover { box-shadow: 0 2px 6px rgba(20, 30, 50, 0.08), 0 14px 32px rgba(20, 30, 50, 0.10); transform: translateY(-1px); }
.qual-card img { display: block; width: 100%; height: auto; border-radius: 6px; }
.qual-img { grid-column: 2; grid-row: 2; margin: 0; min-width: 0; }
.qual-render {
    margin: 0.4rem 1rem 0;
    font-size: 0.82rem;
    color: var(--muted);
}
.qual-fig figcaption { margin-top: 0.55rem; }
@media (max-width: 820px) {
    .qual-table { column-gap: 0.25rem; }
    .qual-head { padding: 0 0.35rem; }
    .qual-rowlabels { padding: 0.35rem 0; }
    .qual-card { padding: 0.35rem; }
}

/* --- results.html (companion page) and the link to it --- */
.res-more { text-align: center; margin: 1.2rem 0 0.4rem; }
.results-page { padding-top: 1.2rem; }
.results-header { margin: 0 1rem 1rem; }
.results-header h1 { font-size: 1.6rem; font-weight: 600; margin: 0 0 0.25rem; }
.results-header .subtitle { color: var(--muted); margin: 0; }