@media print {
    /* Global
  /* ------------------------------------------------------------------------ */

    :root {
        --color-ink: black;
        --color-canvas: white;
        --border-dark: 1px solid var(--color-ink);
        --border-light: 1px solid color-mix(in oklch, var(--color-ink), transparent 75%);
        --font-sans: "Adwaita Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Hiragino Sans GB", "Hiragino Sans", "Apple SD Gothic Neo", "Microsoft YaHei", "Meiryo", "Malgun Gothic";
    }

    @page {
        margin: 0.5in;
    }

    html {
        font-size: 10pt;
    }

    main {
        inline-size: unset;
        margin: 0;
        orphans: 3;
        padding: 0;
        widows: 2;
    }

    /* Browsers usually disable backgrounds on print, so this ensures icons
    (which use BG masks) will show up. */
    .icon,
    .knob,
    .switch {
        -webkit-print-color-adjust: exact;
        color-adjust: exact;
        print-color-adjust: exact;
    }

    .nav__menu,
    .nav__trigger,
    .header__actions {
        display: none;
    }

    .header {
        padding: 0;
    }

    .header__title {
        margin-block-end: 1ch;
    }

    /* Cards
  /* -------------------------------------------------------------------------- */

    .card {
        --card-color: var(--color-ink) !important;

        background: var(--color-canvas);
        border: var(--border-light);
        box-shadow: none;
        break-inside: avoid;
        color: var(--color-ink);
    }

    .card {
        .card__board {
            background: var(--color-canvas);
            border-block-end: var(--border-light);
            border-inline-end: var(--border-light);
            color: var(--color-ink);
        }
    }

    .card__title {
        font-weight: bold;
    }

    /* Events
  /* ------------------------------------------------------------------------ */

    .events__columns {
        border-inline: none;
    }

    .events__column-header {
        background: none;
        margin: 0;
        padding-block: 1ch;
    }

    .events__time-block {
        padding: 0 1ch;

        .events__column:first-child & {
            padding-inline-start: 0;
        }

        .events__column:last-child & {
            padding-inline-end: 0;
        }
    }

    .events__none {
        padding-block: 2ch;
    }

    .event {
        --card-color: var(--color-ink) !important;

        background: var(--color-canvas);
        border: var(--border-light);
        box-shadow: none;
        break-inside: avoid;
        color: var(--color-ink);

        .avatar {
            --avatar-size: 2lh;
        }
    }

    /* Boards
  /* ------------------------------------------------------------------------ */

    .filters,
    .card--new,
    .cards__decoration,
    .card-columns:before,
    .cards--maybe:before {
        display: none;
    }

    .card-columns {
        border-block-start: var(--border-light);
        margin-block-end: 1ch;
        min-block-size: unset;
    }

    .cards--on-deck,
    .cards--doing {
        padding-inline: 0;
    }

    .cards--maybe {
        background: none;
        margin: 0;
        padding-inline: 1ch;

        .card__header {
            margin-inline: calc(-1 * var(--card-padding-inline));
        }

        .card__body {
            padding-block-start: calc(var(--card-padding-block) / 2);
        }
    }

    /* Card perma
  /* ------------------------------------------------------------------------ */

    .card-perma__notch,
    .card-perma__actions,
    .comment--new,
    .comments__subscribers,
    .card__meta-avatars--assignees>div>div:last-child,
    .steps>.step:last-child,
    .card__board-name .icon,
    div:has(> .card__tag-picker-button),
    .delete-card,
    .header--card .header__title {
        display: none;
    }

    .card-perma {
        display: block;
        inline-size: 100%;
        margin: 0 0 1lh;

        .card {
            aspect-ratio: unset;
        }

        .card__title {
            font-size: var(--text-x-large);
        }
    }

    .card-perma__bg {
        background: transparent;
        padding: 0;
    }

    .comments {
        --row-gap: 0;
        --comment-padding-inline: 1.4lh;

        padding-inline: 0;
    }

    .comment {
        --comment-max: none;

        border-block-end: var(--border-light);
    }

    .comment__content {
        background: none;
    }

    .comment__avatar {
        --btn-size: 2lh;

        margin-inline-start: 0;
    }

    .comment__author h3 {
        margin-inline: 0;
    }

    .comment__edit {
        display: none;
    }

    .comment__body {
        text-align: start;
    }

    .reactions {
        margin-block-start: 0;
    }

    /* Settings
  /* ------------------------------------------------------------------------ */

    .settings__user-filter .input,
    .settings__user-list-tips {
        display: none;
    }

    .settings__panel {
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        text-align: left;

        h2 {

            &:before,
            &:after {
                display: none;
            }
        }
    }

    .settings__panel--users {
        form:has(.btn--negative) {
            display: none;
        }

        .btn {
            background-color: transparent;
            border: none;
            color: var(--color-ink);
            opacity: 1;
        }

        .btn:not(:has(input:checked)) {
            opacity: 0;
        }
    }

    .settings__panel--entropy {
        display: none;
    }

    .settings__user-filter {
        background: none;
        margin: 0;
        padding: 0;

        /* Hide the "Everyone" switch */
        >li:first-child {
            display: none;
        }
    }

    /* Routes & Execution reports
  /* ------------------------------------------------------------------------ */

    .header {
        padding-block-start: 1em;
    }

    .route__panel,
    .route-detail__execution {
        border: none;
        border-radius: 0;
        box-shadow: none;
        break-inside: avoid;
    }

    .route__panel {
        background: var(--color-canvas);
    }

    /* ------------------------------------------------------------------------ */
    /* Execution detail — inspection field-report aesthetic                     */
    /*                                                                          */
    /* Severity is encoded redundantly per MIL-STD-1472H: a left gutter rule    */
    /* (thin / dashed / thick) + explicit label, so the report stays legible    */
    /* on B&W laser prints. Indicators render as outlined pills; only Major     */
    /* fills solid for unmistakable emphasis.                                   */
    /* ------------------------------------------------------------------------ */

    /* Section container: strip the screen "panel" chrome — the group heading's
       underline does the visual dividing on paper. */
    .execution__group {
        background: transparent;
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        margin: 0 0 1.4em;
    }

    .execution__group > h2 {
        margin: 0 0 0.5em;
        padding: 0 0 0.25em;
        font-size: 10.5pt;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        border-block-end: 1pt solid var(--color-ink);
        break-after: avoid;
    }

    /* Stack: drop the screen padding, let cards butt up cleanly. */
    .execution__card-stack {
        display: flex;
        flex-direction: column;
        gap: 0.5em;
        padding: 0;
    }

    /* Card: two-column grid on paper. Text content flows in the left
       column; reference hero + captured photos stack in a ~3cm right rail,
       mirroring the old Mechbase col-9/col-3 report split. Left border is
       colored by severity (green/amber/red); print-color-adjust: exact
       keeps the accent visible on color printers. */
    .execution__card {
        --card-accent: oklch(var(--lch-green-dark)); /* pass */
        --card-accent-ink: oklch(var(--lch-green-darkest));
        --card-accent-tint: oklch(var(--lch-green-lightest));

        display: grid;
        grid-template-columns: minmax(0, 1fr) 3cm;
        grid-auto-flow: dense;
        column-gap: 0.8em;
        row-gap: 0.3em;
        align-items: start;
        position: relative;
        inline-size: 100%;
        margin: 0;
        background: var(--color-canvas);
        border: var(--border-light);
        border-inline-start: none; /* painted by ::before below */
        border-radius: 0;
        box-shadow: none;
        padding: 0.55em 0.8em 0.55em 1.6em; /* room for the severity tab */
        break-inside: avoid;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Severity tab: a colored strip running the full height of the card's
       left edge. Pass cards get a thinner 3pt rule (enough to signal
       "ok" without shouting); fail cards keep the wider 1em strip for
       visual weight. */
    .execution__card::before {
        content: "";
        position: absolute;
        inset-inline-start: -1px;
        inset-block-start: -1px;
        inset-block-end: -1px;
        inline-size: calc(1em + 1px);
        background: var(--card-accent);
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Pass cards: thin rule is sufficient — save visual weight for fails. */
    .execution__card[data-state="pass"]::before {
        inline-size: calc(3pt + 1px);
    }

    .execution__card[data-state="pass"] {
        padding-inline-start: 0.8em; /* less gutter needed with thin rule */
    }

    .execution__card[data-state="fail"][data-severity="minor"] {
        --card-accent: oklch(var(--lch-yellow-darker)); /* amber */
        --card-accent-ink: oklch(var(--lch-yellow-darkest));
        --card-accent-tint: oklch(var(--lch-yellow-lightest));
    }

    .execution__card[data-state="fail"][data-severity="major"] {
        --card-accent: oklch(var(--lch-red-dark)); /* red */
        --card-accent-ink: oklch(var(--lch-red-darkest));
        --card-accent-tint: oklch(var(--lch-red-lightest));
    }

    /* Multi-check fails have no card-level severity (per-row instead),
       so keep the tab amber as a generic "fail" signal. */
    .execution__card[data-state="fail"]:not([data-severity]) {
        --card-accent: oklch(var(--lch-yellow-darker));
        --card-accent-ink: oklch(var(--lch-yellow-darkest));
        --card-accent-tint: oklch(var(--lch-yellow-lightest));
    }

    /* Footer is a pure grouping wrapper on paper — hoist its children
       (notes, resolve frame) up into the card grid so they can live in
       the left column alongside the breadcrumb/head. */
    .execution__card-foot {
        display: contents;
    }

    /* Text content: left column */
    .execution__card > .execution__card-breadcrumb,
    .execution__card > .execution__card-head,
    .execution__card > .execution__card-body,
    .execution__note-readout {
        grid-column: 1;
        min-inline-size: 0;
    }

    /* Reference hero: top of the right rail. Width fixed at 3cm, height
       follows the image's natural aspect ratio — no crop, no letterbox,
       no max cap. Overrides the components-layer rules that force
       `block-size: 100%` and `object-fit: cover` on screen. */
    .execution__card > .gallery-hero {
        grid-column: 2;
        align-self: start;
        display: block;
        inline-size: 3cm;
        block-size: auto;
        height: auto;
        max-block-size: none;
        aspect-ratio: auto;
        margin: 0;
        overflow: visible;
        break-inside: avoid;
    }

    .execution__card > .gallery-hero img {
        display: block;
        inline-size: 100%;
        block-size: auto;
        height: auto;
        max-block-size: none;
        aspect-ratio: auto;
        object-fit: fill;
        object-position: initial;
    }

    /* Don't print the "Add reference photo" upload form — if there's no
       reference image to show, the right rail simply stays empty. */
    .gallery-hero--empty {
        display: none !important;
    }

    /* Hide interactive overlays — count badge and asset-photo stamp are
       screen affordances, not useful on a printed report. */
    .gallery-hero__count,
    .gallery-hero__stamp {
        display: none !important;
    }

    /* Breadcrumb: tiny, uppercase — reads like a document locator. */
    .execution__card-breadcrumb {
        margin: 0 0 0.1em;
        font-size: 8pt;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: color-mix(in oklch, var(--color-ink), transparent 35%);
        justify-content: flex-start;
    }

    .execution__card-head {
        align-items: baseline;
        gap: 1ch;
    }

    /* Inline title + subtitle on paper — reads as "type @ location". */
    .execution__card-titles {
        display: flex;
        flex-direction: row;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 0.5ch;
    }

    .execution__card-title {
        margin: 0;
        font-size: 10.5pt;
        font-weight: 700;
        line-height: 1.25;
    }

    .execution__card-subtitle {
        font-size: 9pt;
        font-weight: 400;
        color: color-mix(in oklch, var(--color-ink), transparent 25%);
    }

    /* ---- Indicator pills — tinted bg, dark severity-color text --------- */

    /* Pills echo the left tab: pale severity tint (card-accent-tint) for
       the fill, dark severity ink (card-accent-ink) for the text. Gives
       high contrast on paper *and* stays readable if the printer / PDF
       strips the background colors — the text is dark enough to sit on
       plain white paper. */
    .execution__indicator {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        background: var(--card-accent-tint, transparent);
        color: var(--card-accent-ink, var(--color-ink));
        border: 0.5pt solid var(--card-accent, var(--color-ink));
        padding: 0.1em 0.65em;
        font-size: 8pt;
        font-weight: 700;
        letter-spacing: 0.06em;
    }

    .execution__indicator--sm {
        font-size: 7.5pt;
        padding: 0.05em 0.5em;
    }

    .execution__indicator--value {
        font-family: var(--font-data, inherit);
        font-variant-numeric: tabular-nums;
        letter-spacing: 0;
        text-transform: none;
    }

    /* Per-row severity chips inside multi-check cards — the card itself
       carries no accent color (multi_check skips the card-level tab), so
       these chips set their own tint/ink pair scoped to their row. */
    .execution__check-row[data-check-state="pass"] .execution__indicator--pass {
        background: oklch(var(--lch-green-lightest));
        color: oklch(var(--lch-green-darkest));
        border-color: oklch(var(--lch-green-dark));
    }

    .execution__check-row[data-check-state="fail"] .execution__indicator--minor {
        background: oklch(var(--lch-yellow-lightest));
        color: oklch(var(--lch-yellow-darkest));
        border-color: oklch(var(--lch-yellow-darker));
    }

    .execution__check-row[data-check-state="fail"] .execution__indicator--major {
        background: oklch(var(--lch-red-lightest));
        color: oklch(var(--lch-red-darkest));
        border-color: oklch(var(--lch-red-dark));
    }

    /* Severity label — positioned inside the colored left tab, rotated so
       it reads bottom-to-top. White text on the saturated accent strip
       gives high contrast on color printers and stays legible in B&W. */
    .execution__severity-readout {
        position: absolute;
        inset-inline-start: -1px;
        inset-block-start: -1px;
        inset-block-end: -1px;
        inline-size: calc(1em + 1px);
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
        z-index: 1;
        background: var(--card-accent);
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .execution__severity-readout > .execution__indicator {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        background: transparent;
        border: none;
        padding: 0;
        margin: 0;
        color: white;
        font-size: 6pt;
        font-weight: 800;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        white-space: nowrap;
        transform: rotate(-90deg);
    }

    /* The dot marker from screen is not needed inside the tab. */
    .execution__severity-readout .execution__indicator--severity::before {
        display: none;
    }

    /* ---- Multi-check rows: quiet grid of check labels + outcome ---------- */

    .execution__checks {
        gap: 0.25em;
    }

    .execution__check-row {
        background: transparent;
        border: 1pt solid color-mix(in oklch, var(--color-ink), transparent 70%);
        border-radius: 0;
        padding: 0.2em 0.5em;
    }

    .execution__check-row[data-check-state="fail"] {
        border-color: var(--color-ink);
    }

    .execution__check-label {
        font-size: 9pt;
    }

    /* ---- Photo strip ---------------------------------------------------- */

    /* Captured photos: right rail, stacked vertically under the hero.
       3cm-wide tiles, heights follow the image aspect ratio so
       thermography hotspot overlays (positioned by % coordinates) stay
       aligned with the image content. */
    .execution__card-photos {
        grid-column: 2;
        align-self: start;
        display: flex;
        flex-direction: column;
        gap: 0.25em;
        inline-size: 3cm;
    }

    .execution__card-photo {
        display: block;
        inline-size: 3cm;
        block-size: auto;
        height: auto;
        max-block-size: none;
        aspect-ratio: auto;
        border: 1pt solid color-mix(in oklch, var(--color-ink), transparent 50%);
        border-radius: 0;
        overflow: visible;
    }

    .execution__card-photo img {
        display: block;
        inline-size: 100%;
        block-size: auto;
        height: auto;
        max-block-size: none;
        aspect-ratio: auto;
        object-fit: fill;
    }

    /* Measurement-type photo grids use the .attachments + .attachment
       markup. Override the screen's fixed 8rem height so thumbnails keep
       their natural aspect ratio on paper. */
    .execution__card-photos.attachments {
        grid-column: 2;
        flex-direction: column;
        padding: 0;
        overflow: visible;
    }

    .execution__card-photos .attachment {
        block-size: auto;
        inline-size: 3cm;
        box-shadow: none;
        border-radius: 0;
        border: 1pt solid color-mix(in oklch, var(--color-ink), transparent 50%);
        overflow: visible;
    }

    .execution__card-photos .attachment__thumb {
        inline-size: 100%;
        block-size: auto;
        border-radius: 0;
    }

    /* Thermography hotspot dots — ensure they render on paper. */
    .thermography-hotspot {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Thermography tooltips are interactive-only — hide on print. */
    .thermography-tooltip {
        display: none !important;
    }

    /* ---- Note readout: quoted block, editorial feel --------------------- */

    .execution__note-readout {
        background: transparent;
        border: 0;
        border-inline-start: 2pt solid var(--card-accent, var(--color-ink));
        border-radius: 0;
        padding: 0.2em 0 0.2em 0.75em;
        margin-block-start: 0.15em;
        font-size: 9pt;
        line-height: 1.4;
    }

    /* ---- Hide interactive / modal chrome -------------------------------- */

    .execution__resolve-frame,
    .execution__card-foot turbo-frame,
    dialog,
    #lightbox-dialog {
        display: none !important;
    }

    /* ---- Meta summary line (who / when / NC count) ---------------------- */

    .routes {
        padding: 0;
    }

    .routes > .flex.align-center.justify-center {
        justify-content: flex-start;
        gap: 1.5ch;
        margin-block: 0.25em 1em;
        padding-block-end: 0.4em;
        border-block-end: 0.5pt solid color-mix(in oklch, var(--color-ink), transparent 60%);
        break-after: avoid;
    }

    .routes > .flex.align-center.justify-center .txt-negative {
        color: var(--color-ink);
        font-weight: 700;
    }

    /* ---- Page-break policy --------------------------------------------- */

    .execution__group {
        /* Groups may break across pages if tall, but never orphan the heading
           alone at the bottom of a page. */
        break-inside: auto;
    }

    .execution__card {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}