/*
 * Guidance — the page-level styles the `details.json` layer keys on
 * (`helpers/guidance.js`), written once for every 2026 tool: the warn and
 * highlight classes a guidance entry toggles, and the Read More dialog.
 *
 * The dialog rules are the generator page's own (2026-09-03), moved here
 * unchanged; the warn and highlight rules are the converter page's — the
 * later of the two — on the shared status token, with the generator's red
 * as the fallback where a page defines no tokens.
 *
 * @author Saleh Abdel Motaal <dev@smotaal.io>
 * @ai Claude Fable 5.1 (code generation)
 */

.field-guidance-warn {
    color: var(--status-warning, #c44040) !important;
}

.field-highlight {
    outline: 2px solid var(--status-warning, #c44040);
    outline-offset: 2px;
    border-radius: 2px;
}

/* The Read More dialog carries its own styles —
   2026/elements/documentation-dialog-element.js */
/*
 * r4 — the design system of the one-page application, over the shell, the
 * views, the dialogs and the controls; and the rules the tools' markup needs,
 * taken from `spa/index.html` and written with the tokens of
 * `elements/common/styles.css` instead of system colours mixed by hand.
 *
 * Colours are the `--color-*` tokens only: a change of palette changes those
 * tokens. Sizes that the design fixes are custom properties on `:root` below,
 * so a page or a test reads them by name.
 *
 * @author Saleh Abdel Motaal <dev@smotaal.io>
 * @ai Claude Fable 5.1, Claude Opus 5.5 (code generation)
 */

/* ==== The page ========================================================== */

:root {
    /* The delay before a tooltip shows (the developer, 2026-10-21: "sooner, not too soon"). */
    --tooltip-delay: 450ms;
    /* The widths a dialog takes, by what it holds. */
    --dialog-narrow-width: 26em;
    --dialog-width: 36em;
    --dialog-wide-width: 52em;
    --dialog-full-width: 72em;
    --control-radius: 6px;
    --surface-radius: 10px;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    line-height: 1.45;
}

body {
    margin: 0;
    padding: 0;
    background: var(--color-surface);
    color: var(--color-text-primary);
}

[hidden] {
    display: none !important;
}

h2,
h3,
h4 {
    line-height: 1.25;
}

a {
    color: var(--color-primary);
}

code {
    font-size: 0.92em;
}

/* ==== Controls ========================================================== */

button,
input,
select,
textarea {
    font: inherit;
}

button.action,
tool-strip > button,
.zoom-bar button,
dialog button,
.progress-actions button,
.row > button {
    padding: 0.32em 0.9em;
    border: 1px solid var(--color-border-light);
    border-radius: var(--control-radius);
    background: var(--color-surface);
    color: var(--color-text-primary);
    cursor: pointer;
    line-height: 1.3;
}

button.action:hover:not(:disabled),
tool-strip > button:hover:not(:disabled),
.zoom-bar button:hover:not(:disabled),
dialog button:hover:not(:disabled) {
    background: var(--color-surface-hover);
}

button:disabled {
    opacity: 0.5;
    cursor: default;
}

button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 1px;
}

/* The one action a view leads to. */
button.primary,
#test-form-generation-button,
#sheet-generation-button,
#verdict-analyze-button,
#profiling-generation-button,
#profile-build-button {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-inverse);
    font-weight: 600;
}

button.primary:hover:not(:disabled),
#test-form-generation-button:hover:not(:disabled) {
    background: var(--color-primary-hover);
}

/* ==== Tooltips: the page's, after a delay ================================ */

/* The browser's own tip is replaced by the page's: the text is the control's `data-tooltip`, drawn under it after
   the delay, and gone at once when the pointer or the focus leaves (the developer, 2026-10-21: "Proper CSS tooltips
   when hovering over tabs, controls… etc, instead of the standard browser tips, sooner, not too soon, cleaner,
   consistent"). */
/* The tip is fixed at its own static place, under the control's text: a fixed box is clipped by no scrolling
   ancestor and adds nothing to the page's width, hidden or shown. */
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: fixed;
    z-index: 1000;
    margin-block-start: 0.7em;
    inline-size: max-content;
    max-inline-size: min(22em, 80vw);
    padding: 0.35em 0.6em;
    border: 1px solid var(--color-border);
    border-radius: var(--control-radius);
    background: var(--color-surface-elevated);
    color: var(--color-text-primary);
    box-shadow: 0 2px 8px var(--color-shadow);
    font-size: 0.82rem;
    font-weight: normal;
    line-height: 1.35;
    text-align: start;
    white-space: normal;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s ease, visibility 0s linear 0.12s;
}

[data-tooltip]:is(:hover, :focus-visible)::after {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.12s ease var(--tooltip-delay), visibility 0s linear var(--tooltip-delay);
}

/* What trails a strip opens its tip toward the start, so it stays on the page. */
tool-strip > [slot="trailing"][data-tooltip]::after,
[data-tooltip-end]::after {
    translate: calc(-100% + 3em) 0;
}

@media (hover: none) {
    [data-tooltip]::after {
        display: none;
    }
}

/* ==== The shell ========================================================= */

/* The views fill the shell's middle; the Help side bar stands beside them in the shell's aside-right slot (the
   developer, 2026-10-21: "Help opening in a resizable side-bar, like the resizable logs panel, show/hide"). */
conres-app > section {
    display: none;
    height: 100%;
    min-height: 0;
    min-width: 0;
}

conres-app > section:target,
conres-app > section:has(:target),
conres-app:not(:has(:target)) > section:first-of-type {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
}

/* On a phone the shell stands the side bar over the view rather than beside it, which a phone has no room for. */
@media (max-width: 44em) {
    conres-app > side-bar {
        background: var(--color-surface-elevated);
    }
}

/* The tab row: the tabs wrap on a narrow window rather than push the page wider. */
#tools-tabs > a {
    padding: 0.45em 0.85em;
}

@media (max-width: 44em) {
    #tools-tabs > a {
        padding: 0.35em 0.5em;
        font-size: 0.88em;
    }

    #session-line {
        display: none;
    }
}

/* On the first screen and the journey the tabs other than the current one stand faded until hovered, a shortcut to
   the tools (the developer, 2026-10-15). */
conres-app:not([data-way="tools"]) > #tools-tabs > a:not([aria-current="page"]):not([href="#fork"]) {
    opacity: 0.25;
}

conres-app:not([data-way="tools"]) > #tools-tabs > a:not([aria-current="page"]):is(:hover, :focus-visible) {
    opacity: 1;
}

#session-line {
    color: var(--color-text-secondary);
}

#storage-status {
    display: flex;
    gap: 0.5em;
    flex-wrap: wrap;
    align-items: center;
}

/* The storage line's badges and the blob URL badge are one line in the status row's first cell, so the log keeps
   the second cell to itself (the developer, 2026-11-03). */
.status-line > #storage-status {
    display: contents;
}

/* ==== A view: its strip above its panes ================================= */

conres-app section > .view,
conres-app section > :is(test-form-generator-app, segmenter-app, viewer-app, pdf-validator-app, pre-validation-app, profiler-app) {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
    min-width: 0;
}

tool-strip > button {
    font-size: inherit;
}

tool-strip > strong[slot="modes"] {
    font-size: 1.02em;
}

.panes {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    min-width: 0;
}

.panes.with-side {
    grid-template-columns: minmax(0, 3fr) minmax(18em, 2fr);
}

.panes > .main,
.panes > .side {
    position: relative;
    overflow: auto;
    overscroll-behavior: contain;
    min-height: 0;
    min-width: 0;
    box-sizing: border-box;
    padding: 1em 1.5em 2em;
    display: flex;
    flex-flow: column;
}

.panes > .side {
    border-inline-start: 1px solid var(--color-border);
    background: var(--color-surface-elevated);
}

@media (max-width: 62em) {
    .panes.with-side {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 3fr) minmax(0, 2fr);
    }

    .panes > .side {
        border-inline-start: 0;
        border-block-start: 1px solid var(--color-border);
    }
}

@media (max-width: 44em) {
    .panes > .main,
    .panes > .side {
        padding: 0.8em 0.9em 1.5em;
    }
}

/* Contents shorter than their pane stand in its middle, and a pane they overflow scrolls from its start (the
   developer, 2026-10-21: "if the height of the tab is larger than the full height of the contents, the contents
   are vertically center, not hanging at the top"). */
.panes > .main:is(.reading, #validator-main-pane, #main-pane, #profiler-main-pane, #pre-validation-main-pane) {
    display: flex;
    flex-direction: column;
    justify-content: safe center;
}

.panes > .main:is(.reading, #validator-main-pane, #main-pane) > * {
    flex: 0 0 auto;
    margin-block: 0;
}

/* The space between the contents is the column's gap, so the contents' own box is what stands in the middle. */
.panes > .main:is(.reading, #validator-main-pane, #main-pane) {
    gap: 0.8em;
}

/* A page of text reads in a measured column in the middle of its pane. */
.main.reading {
    align-items: center;
}

.main.reading > * {
    inline-size: min(100%, 52em);
    box-sizing: border-box;
}

.main.reading :is(h2, h3) {
    text-align: start;
}

.main h2,
.side h2 {
    font-size: 1.22em;
    text-align: center;
    margin-block: 0.9em 0.4em;
}

.main h3,
.side h3 {
    font-size: 1em;
}

.panes > .main > h2:first-child,
.panes > .side > h2:first-child {
    margin-block-start: 0.2em;
}

/* ==== The first screen, the tools' list, the journey's own pages ========== */

.fork-ways {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(15em, 100%), 1fr));
    gap: 0.9em;
    margin: 0.8em 0 1.2em;
}

.fork-ways > a {
    display: block;
    padding: 0.9em 1.1em;
    border: 1px solid var(--color-border);
    border-radius: var(--surface-radius);
    background: var(--color-surface-elevated);
    color: var(--color-text-primary);
    text-decoration: none;
}

.fork-ways > a:hover {
    border-color: var(--color-primary);
}

.fork-ways > a strong {
    display: block;
    margin-block-end: 0.3em;
    color: var(--color-primary);
}

.fork-ways > a:not([href]),
.returning a:not([href]) {
    opacity: 0.5;
    cursor: not-allowed;
}

.plan {
    padding-inline-start: 1.4em;
}

.plan li {
    margin-block: 0.3em;
}

.returning {
    columns: 2 16em;
    padding-inline-start: 1.2em;
}

.not-yet {
    display: block;
    margin-block-start: 1.2em;
    color: var(--color-text-secondary);
}

.first-person {
    border-inline-start: 3px solid var(--color-info);
    padding: 0.3em 0.9em;
    background: var(--color-surface-elevated);
}

.row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    align-items: center;
    margin-block: 0.6em;
}

input.gate {
    display: none;
}

/* ==== The journey: the tracks, each a wizard ============================ */

conres-app > section#journey {
    grid-template-rows: auto minmax(0, 1fr);
}

.journey-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.4em 1em;
    padding: 0.45em 1em;
    background: var(--color-surface-elevated);
    border-block-end: 1px solid var(--color-border);
}

.tracks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3em 0.5em;
    font-size: 0.9em;
}

.tracks a {
    padding: 0.25em 0.8em;
    border: 1px solid var(--color-border-light);
    border-radius: 999px;
    color: inherit;
    text-decoration: none;
}

.tracks a[aria-current="true"] {
    font-weight: 600;
    background: var(--color-surface);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.journey-head settings-choice {
    margin: 0;
    font-size: 0.9em;
}

/* One track at a time: the one the address names a step of, else the first. */
#journey > steps-wizard {
    display: none;
    min-height: 0;
    min-width: 0;
}

#journey > steps-wizard:has(:target),
#journey:not(:has(:target)) > steps-wizard:first-of-type {
    display: grid;
}

/* A track of one station with no flow of its own has nothing to lead to: the station takes the whole track, the
   side steps and the footer step aside (the Segmenter's and the Viewer's tracks, at full width since 0768821). A
   wizard of one station that holds a flow, the Calibrator's and the Profiler's tabs, keeps its side steps. */
:is(#track-segment, #track-look)::part(layout) {
    inline-size: 100%;
    block-size: 100%;
    grid-template-columns: minmax(0, 1fr);
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

:is(#track-segment, #track-look)::part(checklist),
:is(#track-segment, #track-look)::part(footer) {
    display: none;
}

/* A wizard fills the view it is in. */
conres-app > section > steps-wizard {
    min-height: 0;
    min-width: 0;
}

/* A tool's station fills the step: its own panes scroll, the step does not. */
steps-wizard > :is(#pre-validation, #generator, #segmenter, #viewer, #profiler) {
    block-size: 100%;
    min-block-size: 0;
}

steps-wizard > section > :is(test-form-generator-app, segmenter-app, viewer-app, pre-validation-app, profiler-app, .view) {
    block-size: 100%;
}

/* Inside a wizard the tool's flow is the wizard's: the flow fills the pane. */
steps-wizard :is(pre-validation-app, profiler-app) > .panes > .main > steps-container {
    inline-size: 100%;
}

/* Inside a track, a tool's own mode switch does nothing: its flow follows the journey's mode. */
conres-app:not([data-way="tools"]) #journey settings-choice:is([name="pre-validation-steps-mode"], [name="profiler-steps-mode"]) {
    display: none;
}

/* A station's strip inside a wizard: its tool's name and its actions; the station's own heading is the side step. */
steps-wizard > section > * > tool-strip {
    position: static;
}

/* The inlined Profiler: its strip steps aside inside the Calibrator's flow, and its pane is no scroller of its own
   inside the Calibrator's. */
#pre-validation-profiler > profiler-app > tool-strip {
    display: none;
}

#pre-validation-profiler > profiler-app > .panes > .main {
    padding: 0;
    overflow: visible;
    overscroll-behavior: auto;
}

/* ==== Help: the side bar ================================================ */

#help-panel h2 {
    margin-block-start: 0;
    font-size: 1.15em;
}

#help-panel h3 {
    margin-block: 1.1em 0.3em;
    font-size: 0.95em;
}

#help-panel h4 {
    margin-block: 0.8em 0.2em;
    font-size: 0.92em;
}

#help-panel .overview ul {
    padding-inline-start: 1.2em;
}

/* ==== Dialogs: one look, one scroller, nothing clipped ==================== */

/* Every dialog is one box sized by what it holds, never wider or taller than the window, itself the one container
   that scrolls (the developer, 2026-10-21: "consistent look and feel, to make sure they do not clip, that there is
   only one scrolling container instead of the nested nightmare we have now, sized appropriately depending on what
   they are meant to contain"). The box, the backdrop and the small screen are every dialog's own, in the common
   stylesheet (`elements/common/styles.css`, the developer, 2026-11-03); this page says only how wide each of its
   dialogs is, by what it holds, and the padding of its own. */
#verify-digest-modal,
choice-dialog {
    --dialog-width: var(--dialog-narrow-width);
}

inbound-dialog,
documentation-dialog {
    --dialog-width: var(--dialog-wide-width);
}

:is(#segmenter-scans-modal, #segmenter-packs-modal, #viewer-packs-modal, #viewer-results-modal),
merge-dialog {
    --dialog-width: var(--dialog-full-width);
}

:is(#sign-in-dialog, #verify-digest-modal) {
    padding: 1.2em 1.4em;
}

:is(#segmenter-scans-modal, #segmenter-packs-modal, #viewer-packs-modal, #viewer-results-modal) {
    padding: 0;
}

/* The inner scrollers give way to the dialog's one: the bodies and the lists take their whole height. */
dialog .information-body,
segmenter-scans .information-body {
    max-height: none;
    overflow: visible;
}

dialog item-list,
inbound-dialog item-list {
    --item-list-max-height: none;
    overflow: visible;
}

/* The toolbar of a full dialog stays at its top while it scrolls. */
:is(#segmenter-scans-modal, #segmenter-packs-modal, #viewer-packs-modal, #viewer-results-modal) > .browser-toolbar:first-child {
    position: sticky;
    top: 0;
    z-index: 1;
}

/* Results: the two sides' grids side by side where the width allows, then the plots that carry both. */
#viewer-results-modal :is(.results-split, .results-plots) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(26em, 100%), 1fr));
    gap: 1em;
}

#viewer-results-modal .results-plots {
    margin-block-start: 1em;
}

#viewer-results-modal .results-split h4 {
    margin-block: 0 0.5em;
}

/* The native close, a form of method dialog, without a box of its own: its Close is the toolbar's last item,
   wherever forms are styled. */
#viewer-results-modal > .browser-toolbar > form {
    display: contents;
}

dialog h3:first-child {
    margin-block-start: 0;
}

/* ==== The drag overlay ================================================== */

inbound-dialog::part(overlay) {
    border-radius: var(--surface-radius);
}

/* ==== What the tools' markup declared (from spa/index.html) ============== */

.stored-data-actions {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.5em 1em;
    align-items: center;
}

.stored-data-row {
    display: contents;
}

.stored-data-row > output {
    font-size: 0.9em;
    color: var(--color-text-secondary);
}

/* Settings › Debug: the Stored data and Caches groups on one grid, so their buttons and their sizes line up
   (the developer, 2026-11-03: "`Stored Data` and `Caches` `settings-group` need to inherit a shared grid (likely
   best with `display: contents` so the rows are aligned"). The panel's body is the grid; each group takes its two
   columns as a subgrid; the group's fieldset is `display: contents`, since a fieldset cannot pass a subgrid on, so
   the group draws the frame and the legend sits on it as the fieldset's did; the rows take the columns again, each
   row staying `display: contents`. */
#debug-details::part(body) {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: 1em;
}

#debug-details > * {
    grid-column: 1 / -1;
}

#debug-details > settings-group {
    display: grid;
    grid-template-columns: subgrid;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 0.4em 1em 1em 1em;
}

#debug-details > settings-group[hidden] {
    display: none;
}

#debug-details > settings-group::part(fieldset) {
    display: contents;
}

#debug-details > settings-group::part(legend) {
    grid-column: 1 / -1;
    justify-self: start;
    margin-block: -1.15em 0.2em;
    background: var(--color-surface);
}

#debug-details > settings-group::part(note),
#debug-details > settings-group > settings-field {
    grid-column: 1 / -1;
}

#debug-details .stored-data-actions {
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
}

.entries > li {
    margin-block-end: 0.6em;
}

.measurements-route[hidden] {
    display: none;
}

.device-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em 1em;
    align-items: end;
}

.device-row > :first-child {
    flex: 1 1 16em;
}

.device-row > :last-child {
    flex: 1 1 12em;
}

.device-row > settings-field {
    min-width: 0;
    max-width: 100%;
}

.tag-values {
    margin: 0.2em 0 0.8em 1.8em;
}

.tag-values table {
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.tag-values td {
    border: 1px solid var(--color-border-light);
    padding: 0.2em 0.6em;
    text-align: right;
}

.tag-values pre {
    max-height: 14em;
    overflow: auto;
    margin: 0;
    padding: 0.4em;
    font-size: smaller;
    background: var(--color-surface-sunken);
}

#viewer-stages {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    min-height: 0;
}

#viewer-stages > section {
    display: none;
}

#viewer-stages > section:target,
#viewer-stages > section:has(:target),
#viewer-stages:not(:has(:target)) > #viewer-compare {
    display: grid;
}

/* The progress over a pane: the generation's stage and Cancel alone. It stays on the pane, not modal (the
   developer, 2026-11-03: "the progress itself needs to behave like an overlay, because it is not an extension of
   what is under it, it is a substitution for it"), and keeps the dialogs' rules: the backdrop's blur over the pane
   with its own surface, its scroll held, its title and its button centred, and a progress of one fixed height, so
   the button stays where it is as the workers' rows and the subtasks come and go. */
dialog.progress {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 2em;
    border: 0;
    box-sizing: border-box;
    background: color-mix(in srgb, var(--color-surface) 88%, transparent);
    backdrop-filter: blur(0.0625rem);
    color: var(--color-text-primary);
    overflow: auto;
    overscroll-behavior: contain;
}

dialog.progress[open] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-flow: row;
    place-content: center;
    justify-items: center;
    gap: 0.8em;
    text-align: center;
}

/* One height for the whole run: the subtasks' lines, and a row for each worker the run makes, the number the
   Generator shows beside its Workers field and gives its element as `--effective-worker-count` (the developer,
   2026-11-03: "the height needed for the number of rows per the worker count and the height for the subtasks… etc
   are stable so the button does not keep moving around"; 2026-11-04). */
dialog.progress generator-generation {
    display: block;
    min-block-size: calc(11em + 1.5em * max(1, var(--effective-worker-count, 1)));
}

.panes > .main:has(> dialog.progress[open]) {
    overflow: hidden;
}

dialog.progress h3 {
    margin: 0;
}

dialog.progress output {
    display: block;
    max-width: 36em;
    font-size: 0.92em;
}

dialog.progress fieldset {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 0.4em;
    width: auto;
    margin: 0;
}

/* The overview dialogs hold what Help shows; they are never opened on this page. */
dialog.overview {
    display: none;
}

#generator #customization-details {
    inline-size: min(100%, 48em);
    margin-inline: auto;
}

.main fieldset:disabled {
    opacity: 0.5;
    pointer-events: none;
}

#verify-digest-code::part(input) {
    font-family: ui-monospace, Menlo, monospace;
    letter-spacing: 0.1em;
}

.browser,
.information {
    border: 1px solid var(--color-border);
    border-radius: var(--surface-radius);
    overflow: hidden;
    margin-block: 0.5em;
    background: var(--color-surface);
    flex: 1;
    display: flex;
    flex-flow: column;
}

.browser-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.55em 0.9em;
    background: var(--color-surface-elevated);
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
}

#segmenter-main-pane {
    display: flex;
    flex-direction: column;
}

#segmenter-main-pane > segmenter-explorer {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
}

#segmenter-main-pane > segmenter-explorer > .browser {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    margin: 0;
}

#segmenter-main-pane #entry-list {
    flex: 1 1 auto;
    min-height: 0;
    --item-list-max-height: none;
}

segmenter-packs item-list > item-row[data-pack-pending] {
    border-left: 3px solid var(--color-border-light);
}

segmenter-packs item-list > item-row > item-list {
    --item-row-marker-width: 2em;
    --item-row-marker-height: 1.6em;
    margin-inline-start: 1em;
}

segmenter-intake item-list {
    --item-row-marker-height: 9em;
}

#dropped-scans-empty {
    margin: 0;
    padding: 1.2em 1em;
    text-align: center;
    color: var(--color-text-secondary);
    font-size: 0.9em;
}

.scans-list {
    --item-row-marker-height: 9em;
}

/* A ConRes target its run records as refused is flagged in every list and
   strip that shows it: red at 20% (the developer's #f003), laid over the
   row's own background so its selection and hover still show. */
item-row[data-analysis="refused"]::part(row) {
    background-image: linear-gradient(#f003, #f003);
}

.preview {
    margin: 0 0 1em 0;
    text-align: center;
}

.preview img {
    max-width: 100%;
    max-height: 22em;
    border-radius: var(--control-radius);
    background: var(--color-surface-sunken);
    transform-origin: center;
}

/* A quarter-turn swaps the picture's extent: laid out within the panel's
   height across and the panel's width down, so the turned picture fits. */
.preview[data-correction-degrees="90"] img,
.preview[data-correction-degrees="270"] img {
    max-width: 22em;
    max-height: 100%;
}

.preview[data-correction-degrees="90"],
.preview[data-correction-degrees="270"] {
    min-height: 22em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.preview figcaption {
    font-size: 0.82em;
    color: var(--color-text-secondary);
    margin-top: 0.35em;
}

.plain-list {
    margin: 0.2em 0 0.6em 0;
    padding-left: 1.2em;
    font-size: 0.9em;
}

.information-body {
    padding: 0.9em 1.1em;
    /* max-height: 34em; */
    overflow-y: auto;
    flex: 1;
}

.information h3 {
    margin: 1.2em 0 0.4em 0;
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
}

.information h3:first-child {
    margin-top: 0;
}

.information table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
}

.information table.compact th {
    width: 8em;
}

.information th {
    text-align: left;
    font-weight: normal;
    color: var(--color-text-secondary);
    padding: 0.22em 0.6em 0.22em 0;
    vertical-align: top;
    white-space: nowrap;
    width: 11em;
}

.information td {
    padding: 0.22em 0;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.information pre {
    background: var(--color-surface-sunken);
    padding: 0.7em;
    border-radius: var(--control-radius);
    overflow-x: auto;
    font-size: 0.82em;
    margin: 0.3em 0;
}

.badge {
    display: inline-block;
    padding: 0.1em 0.55em;
    border-radius: 999px;
    font-size: 0.82em;
    background: var(--color-neutral);
}

button.badge {
    font: inherit;
    font-size: 0.82em;
    color: inherit;
    border: 0;
    cursor: pointer;
}

.badge.pass {
    background: var(--color-success-background);
    color: var(--color-success-text);
}

.badge.warn {
    background: var(--color-warning-background);
    color: var(--color-warning-text);
}

.badge.error {
    background: var(--color-danger-background);
    color: var(--color-danger-text);
}

.badge.info {
    background: var(--color-info-background);
    color: var(--color-info-text);
}

.source-panel {
    border: 1px solid var(--color-border);
    border-radius: var(--surface-radius);
    margin: 1em 0;
    overflow: hidden;
}

.source-header {
    display: flex;
    align-items: center;
    gap: 0.8em;
    flex-wrap: wrap;
    padding: 0.6em 0.9em;
    background: var(--color-surface-elevated);
    border-bottom: 1px solid var(--color-border);
}

#inspect-pane {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    padding: 0;
}

.zoom-bar {
    display: flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.45em 0.9em;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-elevated);
    flex-wrap: wrap;
}

.zoom-bar .zoom-level {
    font-variant-numeric: tabular-nums;
    min-width: 7em;
    font-size: 0.9em;
}

.zoom-bar .shortcut {
    color: var(--color-text-secondary);
    font-size: 0.8em;
}

#compare-pane {
    display: flex;
    flex-direction: column;
}

#compare-pane > .compare-panels {
    display: grid;
    flex: 1 1 auto;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1em;
    margin-bottom: 0.8em;
}

@media (max-width: 62em) {
    #compare-pane > .compare-panels {
        grid-template-columns: minmax(0, 1fr);
    }
}

.compare-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--surface-radius);
    overflow: hidden;
}

.compare-panel > viewer-frame {
    flex: 1 1 auto;
    min-height: 12em;
}

.compare-panel .panel-selectors {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.4em 0.6em;
    align-items: center;
    padding: 0.6em 0.9em;
    background: var(--color-surface-elevated);
    border-bottom: 1px solid var(--color-border);
}

.compare-panel .panel-selectors settings-field {
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    margin-block: 0;
    font-size: 0.88em;
}

.compare-panel .panel-caption {
    padding: 0.4em 0.9em;
    font-size: 0.85em;
    border-top: 1px solid var(--color-border);
    min-height: 1.4em;
    display: flex;
    gap: 0.5em;
    align-items: center;
    flex-wrap: wrap;
}

/* What a caption's dialog holds is the panel alone: the page's panel frame gives way to the dialog's own box. */
.panel-caption > .information {
    border: none;
    border-radius: 0;
    margin: 0;
    background: none;
}

.filmstrip {
    border: 1px solid var(--color-border);
    border-radius: var(--surface-radius);
    overflow: hidden;
    margin-top: 0.8em;
}

.filmstrip > item-list {
    min-height: 7em;
}

.finding {
    width: 100%;
    box-sizing: border-box;
    padding: 0.45em 0.7em;
    margin: 0.25em 0;
    border-left: 4px solid transparent;
    border-radius: 0 var(--control-radius) var(--control-radius) 0;
    display: flex;
    gap: 0.5em;
    align-items: baseline;
}

.finding[data-status="fail"][data-severity="error"] {
    border-left-color: var(--color-danger);
    background: var(--color-danger-background);
}

.finding[data-status="fail"][data-severity="warning"] {
    border-left-color: var(--color-warning);
    background: var(--color-warning-background);
}

.finding[data-status="pass"] {
    border-left-color: var(--color-success);
    background: var(--color-success-background);
}

.finding[data-status="skipped"] {
    border-left-color: var(--color-border-light);
    background: var(--color-surface-elevated);
}

.finding .status-icon {
    flex-shrink: 0;
    width: 1.2em;
    text-align: center;
}

.finding .fix-check {
    flex-shrink: 0;
    margin-left: auto;
}

.finding-details {
    font-size: 0.85em;
    color: var(--color-text-secondary);
    margin-left: 1.7em;
}

.summary-errors { color: var(--color-danger); }
.summary-warnings { color: var(--color-warning-text); }
.summary-passed { color: var(--color-success); }
.summary-skipped { color: var(--color-text-secondary); }

.changelog {
    padding: 0.5em 1em;
    background: var(--color-success-background);
    border-left: 4px solid var(--color-success);
    border-radius: 0 var(--control-radius) var(--control-radius) 0;
    font-size: 0.85em;
}

.doc-info {
    font-size: 0.9em;
}

#verdict-results {
    display: block;
    max-width: 52em;
    margin: 1em auto;
}

#verdict-results table {
    margin: 0.5em auto;
    border-collapse: collapse;
    font-size: smaller;
}

#verdict-results td {
    border: 1px solid var(--color-border-light);
    padding: 0.25em 0.5em;
    text-align: center;
}

#profiling-page-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em 1em;
    align-items: center;
    justify-content: center;
}

#profiling-page-options[hidden] {
    display: none;
}

.tag-list,
.tag-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35em 1.25em;
    justify-content: center;
    max-width: 44em;
}

.tag-list label {
    text-align: left;
    cursor: help;
}

.tag-options[hidden] {
    display: none;
}

.tag-options label {
    text-align: left;
}

#profile-build-report {
    display: block;
    max-width: 52em;
    white-space: pre-wrap;
    font-family: ui-monospace, Menlo, monospace;
    font-size: smaller;
    text-align: left;
}

/* ==== The settings view: one container scrolls, its tab list sticky ======= */

#settings {
    grid-template-rows: auto minmax(0, 1fr);
}

#settings-container {
    overflow: auto;
    overscroll-behavior: contain;
    min-height: 0;
}

#settings-container > tab-list {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--color-surface-elevated);
}

#settings-views {
    padding: 0 1.5em 3em;
    max-width: 76em;
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
}

#settings-views > section {
    display: none;
}

#settings-views > section:target,
#settings-views > section:has(:target),
#settings-views:not(:has(:target)) > section:first-of-type {
    display: block;
}

#settings-views > section > h2 {
    margin-block: 0.5em;
}

/* ==== Forms: the two-track grid of every tool's fields ==================== */

fieldset {
    border: none;
    min-width: 0;
}

.field-grid,
:is(section, article, .main, .side) :is(form, fieldset) {
    display: grid;
    width: fit-content;
    max-width: 100%;
    margin: 1em auto;
    grid-template-columns: [row-start] minmax(0, 1fr) [field-start] minmax(0, 3fr) [row-end];
    gap: 0.9em;
    box-sizing: border-box;
}

:is(section, article, .main, .side) :is(form, fieldset) label:not(:has(+ .full-row)) {
    grid-column: row-start;
    text-align: right;
}

:is(section, article, .main, .side) :is(form, fieldset) :is(input, select) {
    grid-column: field-start;
}

.full-row,
:is(section, article, .main, .side) :is(form, fieldset) :is(progress, progress + output, .full-row, label:has(+ .full-row, + progress)) {
    grid-column-start: row-start;
    grid-column-end: row-end;
    place-self: center;
    max-width: 100%;
}

:is(section, article, .main, .side) :is(form, fieldset) > :is(settings-field:not([type="checkbox"]), settings-choice) {
    grid-column: row-start / row-end;
    grid-template-columns: subgrid;
    place-self: stretch;
    min-width: 0;
}

:is(section, article, .main, .side) :is(form, fieldset) > settings-field[type="checkbox"] {
    grid-column: row-start / row-end;
    place-self: center stretch;
}

/* A choice laid out in a column (the Calibrator's three ways) wraps its long options rather than push the pane
   wider at a phone's width. */
settings-choice[layout="column"] {
    min-width: 0;
    max-width: 100%;
}

.guidance {
    display: block;
    max-width: 40em;
    margin: 0.25em auto;
    font-size: smaller;
    color: var(--color-text-secondary);
    text-align: center;
}

output.status,
output.line {
    display: block;
    max-width: 40em;
    text-align: center;
    padding: 0.5em;
    font-size: smaller;
    margin: 0 auto;
}

:is(section, article) :is(ul, ol) > li {
    margin-block: 0.4em;
}

.placeholder {
    color: var(--color-text-secondary);
    text-align: center;
    padding: 3em 1em;
}

.status-line {
    display: flex;
    gap: 0.6em;
    align-items: baseline;
    flex-wrap: wrap;
    font-size: 0.92em;
    padding: 0.4em 0;
}