/* Generated by scripts/diff-pages.ts from src/utils/compareRender.ts — edit those, not this file. */
:root {}

    /* A comparison is two models side by side; the shared sheet is sized for one. */
    main { max-width: 1180px; }
    .cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 8px; }
    @media (max-width: 640px) { .cmp { grid-template-columns: 1fr; } }
    .cmp .side { border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 14px 16px; }
    .cmp .side h3 { margin: 0 0 2px; font-size: 15px; }
    .cmp .side .role { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--soft); }
    .cmp .side dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 10px 0 0; font-size: 13.5px; }
    .cmp .side dt { color: var(--soft); }
    .cmp .side dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
    .headline { font-size: 17px; line-height: 1.55; margin: 0 0 20px; padding: 14px 16px; border: 1px solid var(--line); border-left: 3px solid var(--b1); border-radius: 0 12px 12px 0; background: var(--card); }
    .delta { font-variant-numeric: tabular-nums; }
    .delta.up { color: var(--warn); }
    .delta.down { color: var(--ok); }
    .yes { color: var(--ok); font-weight: 700; }
    .no { color: #b4232a; font-weight: 700; }
    .unk { color: var(--soft); }
    .flip { background: color-mix(in srgb, #d08700 9%, transparent); }
    td.st { width: 78px; }
    .st span { font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; border-radius: 999px; padding: 2px 8px; }
    .st .added { color: var(--ok); background: color-mix(in srgb, #0f7b53 12%, transparent); }
    .st .removed { color: #b4232a; background: color-mix(in srgb, #b4232a 10%, transparent); }
    .st .changed { color: var(--warn); background: color-mix(in srgb, #d08700 13%, transparent); }
    .st .same { color: var(--soft); background: color-mix(in srgb, #64748b 10%, transparent); }
    tr.same td { color: var(--soft); }
    .keys { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--warn); }
    .rowsfold > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--b1); margin: 0 0 10px; }
    .rowsfold > summary::marker { color: var(--soft); }
    .notes li { margin: 0 0 6px; color: var(--muted); font-size: 13.5px; }
    .pairs { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
    .pairs a { display: block; border: 1px solid var(--line); border-radius: 11px; background: var(--card); padding: 12px 14px; color: inherit; }
    .pairs a:hover { text-decoration: none; border-color: var(--b1); }
    .pairs .t { font-weight: 700; font-size: 14px; }
    .pairs .w { color: var(--soft); font-size: 12.5px; margin-top: 3px; }