:root {
    --bg: #f7f7f8;
    --bg-card: #ffffff;
    --fg: #0a0a0a;
    --fg-soft: #3f3f46;
    --muted: #71717a;
    --muted-soft: #a1a1aa;
    --accent: #dc2626;
    --accent-soft: #fef2f2;
    --border: #e4e4e7;
    --border-soft: #f4f4f5;
    --radius: 10px;
    --radius-sm: 6px;
    --shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04);
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Diverging win-rate scale: red (losing) <-> neutral gray (even) <-> blue (winning).
       Lightness-matched arms, hue-rotated in OKLCH; every cell label clears WCAG AA. */
    --wr-loss-4: #762221;
    --wr-loss-3: #b13f3c;
    --wr-loss-2: #ea9a93;
    --wr-loss-1: #f4c2be;
    --wr-even:   #f0efec;
    --wr-win-1:  #b7d3f6;
    --wr-win-2:  #86b6ef;
    --wr-win-3:  #256abf;
    --wr-win-4:  #104281;
    --ink-on-dark: #ffffff;
    --ink-on-light: #0b0b0b;
}

* { box-sizing: border-box; }

/* Any author `display` beats the browser's rule for [hidden], which silently
   breaks every element the page toggles. Restore it once, for all of them. */
[hidden] { display: none !important; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "cv11", "ss01";
}

a { color: var(--accent); text-decoration: none; transition: color 0.12s; }
a:hover { text-decoration: underline; }

code {
    background: var(--border-soft);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--fg-soft);
}

/* ---------- header ---------- */
header {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    padding: 36px 24px 28px;
    text-align: center;
}
header h1 {
    margin: 0 0 6px;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.025em;
}
.subtitle { margin: 0; color: var(--muted); font-size: 13.5px; }
.snapshot {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
}

/* ---------- layout ---------- */
main {
    max-width: 1180px;
    margin: 0 auto;
    padding: 28px 20px 8px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px 22px;
}
.card-head {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.card h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 9px;
}
.step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.card-sub {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 12.5px;
    max-width: 62ch;
}
.card-actions { display: flex; gap: 7px; flex-wrap: wrap; }

/* ---------- controls ---------- */
.btn {
    padding: 7px 13px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--fg-soft);
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s, color 0.12s, box-shadow 0.12s;
    white-space: nowrap;
}
.btn:hover { border-color: var(--muted-soft); }
.btn:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.btn-quiet { color: var(--muted); }
.btn.is-busy { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

.field { display: flex; flex-direction: column; gap: 6px; }
.field > span {
    font-size: 10.5px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}
.field-grow { flex: 1 1 220px; min-width: 180px; }
.field input[type="search"], .field select {
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    font-size: 13px;
    font-family: inherit;
    color: var(--fg);
    transition: border-color 0.12s, box-shadow 0.12s;
}
.field select {
    padding-right: 32px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 14px;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    min-width: 190px;
}
.field input:focus, .field select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.deck-toolbar {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.selected-count {
    margin: 0 0 0 auto;
    align-self: center;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
}

/* ---------- deck picker ---------- */
.deck-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
    gap: 6px;
    max-height: 340px;
    overflow-y: auto;
    padding: 2px;
    margin: 0 -2px;
}
.deck-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
    text-align: left;
    font-family: inherit;
    min-width: 0;
}
.deck-chip:hover { border-color: var(--muted-soft); }
.deck-chip:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.deck-chip.is-selected { border-color: var(--accent); background: var(--accent-soft); }
.deck-chip input { margin: 0; accent-color: var(--accent); flex: none; }
.deck-icons { display: flex; flex: none; align-items: center; }
.result-deck .deck-icons,
.share-row .deck-icons { width: 45px; }
.deck-icons img { height: 26px; width: 26px; object-fit: contain; }
.deck-icons img + img { margin-left: -7px; }
.deck-chip-text { min-width: 0; display: flex; flex-direction: column; }
.deck-chip-name {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--fg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.deck-chip-share {
    font-size: 10.5px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.empty-note { color: var(--muted); font-size: 12.5px; padding: 18px 4px; margin: 0; }

/* ---------- share inputs ---------- */
.share-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 8px;
}
.share-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    min-width: 0;
}
.share-row .deck-chip-text { flex: 1 1 auto; }
.share-input-wrap { display: flex; align-items: center; gap: 4px; flex: none; }
.share-row input {
    width: 62px;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--fg);
    transition: border-color 0.12s, box-shadow 0.12s;
}
.share-row input::-webkit-outer-spin-button,
.share-row input::-webkit-inner-spin-button,
.custom-meta input::-webkit-outer-spin-button,
.custom-meta input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.share-row input,
.custom-meta input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.share-row input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.share-row .pct { color: var(--muted); font-size: 12px; }
.share-total {
    margin: 14px 0 0;
    color: var(--muted);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
}
.share-total strong { color: var(--fg); font-weight: 600; }
.share-total.is-warn { color: var(--accent); }

/* ---------- results ---------- */
table.data {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}
table.data thead th {
    border-bottom: 1px solid var(--border);
    padding: 9px 12px;
    font-weight: 600;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    text-align: left;
    white-space: nowrap;
}
table.data thead th.num { text-align: right; }
table.data tbody td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--border-soft);
    color: var(--fg-soft);
    font-size: 13.5px;
    vertical-align: middle;
}
table.data tbody td.num { text-align: right; }
table.data tbody tr:last-child td { border-bottom: 0; }

.result-row { cursor: pointer; transition: background-color 0.08s; }
.result-row:hover { background: var(--border-soft); }
.result-row.is-open { background: var(--border-soft); }
.result-rank { color: var(--muted); font-weight: 500; width: 34px; }
.result-deck { font-weight: 600; color: var(--fg); }
.result-deck-inner { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.result-wr { font-weight: 700; color: var(--fg); font-size: 14px; }
.result-share, .result-games { color: var(--muted); font-size: 12.5px; }

/* Bar: thin mark, rounded data-end, anchored to a shared 50% baseline. */
.bar-cell { width: 34%; min-width: 140px; padding-right: 16px !important; }
.bar-track {
    display: block;
    position: relative;
    height: 18px;
    background: linear-gradient(to right, var(--border-soft), var(--border-soft));
    border-radius: 3px;
}
.bar-baseline {
    display: block;
    position: absolute;
    top: -1px;
    bottom: -1px;
    width: 1px;
    background: var(--muted-soft);
}
.bar-fill {
    display: block;
    position: absolute;
    top: 4px;
    height: 10px;
    border-radius: 2px;
}
.bar-fill.up { background: var(--wr-win-3); border-radius: 2px 4px 4px 2px; }
.bar-fill.down { background: var(--wr-loss-3); border-radius: 4px 2px 2px 4px; }

/* Expanded per-deck breakdown */
.breakdown-cell { padding: 0 !important; background: var(--bg); }
.breakdown {
    padding: 12px 14px 14px;
    border-bottom: 1px solid var(--border-soft);
}
.breakdown h4 {
    margin: 0 0 8px;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    font-weight: 600;
}
table.breakdown-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
table.breakdown-table th {
    text-align: left;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--muted-soft);
    font-weight: 600;
    padding: 4px 10px;
    white-space: nowrap;
}
table.breakdown-table th.num { text-align: right; }
table.breakdown-table td {
    padding: 5px 10px;
    font-size: 12.5px;
    color: var(--fg-soft);
    border-top: 1px solid var(--border);
}
table.breakdown-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.breakdown-table tfoot td { font-weight: 600; color: var(--fg); }
.wr-pill {
    display: inline-block;
    min-width: 52px;
    padding: 1px 7px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 12px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.thin-flag {
    display: inline-block;
    margin-left: 6px;
    padding: 0 5px;
    border-radius: 3px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    vertical-align: 1px;
}

/* ---------- matrix ---------- */
.matrix-scroll { overflow: auto; max-height: 640px; }
table.matrix { border-collapse: separate; border-spacing: 2px; font-variant-numeric: tabular-nums; }
table.matrix th {
    font-weight: 600;
    font-size: 11px;
    color: var(--muted);
    padding: 3px 6px;
    background: var(--bg-card);
}
table.matrix thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    height: 96px;
    vertical-align: bottom;
    padding-bottom: 6px;
}
table.matrix thead th .col-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    max-height: 84px;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--fg-soft);
}
table.matrix tbody th {
    position: sticky;
    left: 0;
    z-index: 1;
    text-align: right;
    white-space: nowrap;
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--fg-soft);
}
table.matrix thead th:first-child { left: 0; z-index: 3; }
.cell {
    width: 46px;
    height: 30px;
    text-align: center;
    font-size: 11.5px;
    font-weight: 600;
    border-radius: 3px;
    cursor: default;
    color: var(--ink-on-light);
}
.cell.on-dark { color: var(--ink-on-dark); }
.cell.is-mirror { background: repeating-linear-gradient(45deg, var(--border-soft) 0 4px, var(--bg-card) 4px 8px); color: var(--muted-soft); }
.cell.is-thin::after {
    content: "";
    position: absolute;
}
.cell.is-thin { outline: 1px dashed rgba(11,11,11,0.28); outline-offset: -2px; }

.legend { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.legend-scale { display: flex; align-items: center; gap: 2px; }
.legend-swatch { width: 20px; height: 12px; border-radius: 2px; }
.legend-label { font-size: 10.5px; color: var(--muted); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.legend-note { font-size: 11px; color: var(--muted-soft); }

/* ---------- settings ---------- */
.card-settings h2 { margin-bottom: 14px; }
.settings-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 18px;
    align-items: start;
}
.field-slider input[type="range"] { accent-color: var(--accent); width: 100%; }
.field-slider em { font-style: normal; color: var(--fg); font-variant-numeric: tabular-nums; }
.field small { color: var(--muted); font-size: 11.5px; line-height: 1.45; }
.field-check {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: start;
    gap: 8px;
}
.field-check input { margin: 3px 0 0; accent-color: var(--accent); flex: none; }
.field-check > span {
    font-size: 12.5px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    color: var(--fg-soft);
    flex: 1 1 auto;
}
.field-check small { flex: 1 0 100%; padding-left: 22px; }

/* ---------- tooltip ---------- */
.tooltip {
    position: fixed;
    z-index: 50;
    pointer-events: none;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 2px 4px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.10);
    padding: 9px 11px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--fg-soft);
    max-width: 260px;
}
.tooltip strong { color: var(--fg); font-weight: 600; }
.tooltip .tt-title { display: block; margin-bottom: 3px; }
.tooltip .tt-num { font-variant-numeric: tabular-nums; }

/* ---------- footer ---------- */
footer {
    max-width: 1180px;
    margin: 26px auto 0;
    padding: 26px 20px 48px;
    border-top: 1px solid var(--border);
    color: var(--fg-soft);
}
footer h2 { margin: 0 0 12px; font-size: 15px; font-weight: 600; }
footer p { margin: 0 0 12px; font-size: 13px; max-width: 78ch; }
footer .muted { color: var(--muted); font-size: 12px; }

@media (max-width: 640px) {
    header { padding: 26px 16px 20px; }
    main { padding: 18px 12px 8px; }
    .card { padding: 16px 14px; }
    .bar-cell { display: none; }
    table.data thead th.bar-head { display: none; }
    .selected-count { margin-left: 0; }
}

/* ---------- confidence interval, tiers, field toggle ---------- */

.table-caption {
    margin: 0 0 10px;
    color: var(--muted);
    font-size: 12px;
}

.settings-summary {
    align-self: center;
    margin-right: 4px;
    color: var(--muted);
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-variant-numeric: tabular-nums;
}

table.data tbody td.result-ci {
    color: var(--muted);
    font-size: 12.5px;
    white-space: nowrap;
}

/* A rule where the data can finally tell two decks apart. */
table.data tbody tr.tier-start td { border-top: 1px solid var(--muted-soft); }

/* The interval sits behind the point estimate: recessive, but the wider mark. */
.bar-whisker {
    display: block;
    position: absolute;
    top: 8px;
    height: 2px;
    background: var(--muted-soft);
    border-radius: 1px;
}
.bar-whisker::before,
.bar-whisker::after {
    content: "";
    position: absolute;
    top: -3px;
    width: 1px;
    height: 8px;
    background: var(--muted-soft);
}
.bar-whisker::before { left: 0; }
.bar-whisker::after { right: 0; }
.bar-fill { z-index: 1; }

/* Held out of the field: still ranked, visibly not part of the meta. */
.share-row.is-out { border-style: dashed; background: var(--border-soft); }
.share-row.is-out input { color: var(--muted-soft); background: transparent; }

.field-pill {
    flex: none;
    padding: 3px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-card);
    font-family: inherit;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.12s, background 0.12s, color 0.12s, box-shadow 0.12s;
}
.field-pill:hover { border-color: var(--muted-soft); }
.field-pill:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
/* Both roles are normally on, so the on state stays quiet rather than shouting
   the default. The off state is struck through, which reads the same way in
   every language and does not rely on color to carry the meaning. */
.field-pill.is-in { color: var(--muted); }
.field-pill.is-in:hover { color: var(--fg-soft); }
.field-pill:not(.is-in) {
    border-style: dashed;
    color: var(--muted-soft);
    text-decoration: line-through;
}
.field-pill:not(.is-in):hover { color: var(--muted); }

.held-flag {
    display: inline-block;
    margin-left: 6px;
    padding: 0 5px;
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--muted);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    vertical-align: 1px;
}

.share-list {
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    /* Selecting every deck makes this list very long, so let it scroll rather
       than push the results off the page. */
    max-height: 430px;
    overflow-y: auto;
    padding: 2px;
    margin: 0 -2px;
}
.role-pills { display: flex; flex: none; gap: 3px; }
.share-row .deck-chip-name { color: var(--fg); }
a.deck-chip-name:hover { color: var(--accent); text-decoration: underline; }

@media (max-width: 640px) {
    table.data thead th.result-ci-head,
    table.data tbody td.result-ci { display: none; }
}

/* ---------- your own deck ---------- */

.custom-meta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-bottom: 12px;
}
.custom-meta .field-grow { flex: 1 1 200px; }
.custom-meta input[type="text"] {
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    font-size: 13px;
    font-family: inherit;
    color: var(--fg);
    transition: border-color 0.12s, box-shadow 0.12s;
}
.custom-meta input[type="text"]:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.custom-meta .share-input-wrap input { width: 74px; }
.custom-meta #custom-share:disabled { color: var(--muted-soft); background: var(--border-soft); }

.custom-hint {
    margin: 0 0 14px;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}
.custom-hint strong { color: var(--fg-soft); font-variant-numeric: tabular-nums; }

#custom-rates input { width: 62px; }

/* An estimate is not a record, and the results table should never let that blur. */
.held-flag.is-custom {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
}

/* Keep a labelled row on one line: the badges are short, the name is not. */
table.data tbody td.result-deck { white-space: nowrap; }
.held-flag { margin-left: 0; }

/* ---------- primary action ---------- */

/* The page has no other filled button, so one carries real weight.
   White on the accent measures 4.83:1, and 6.47:1 on hover. */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
    font-weight: 600;
    padding: 9px 16px;
    box-shadow: 0 1px 2px rgba(220,38,38,0.18);
}
.btn-primary:hover {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #ffffff;
}
.btn-primary:focus-visible {
    outline: none;
    border-color: #991b1b;
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.btn-plus {
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
    margin-top: -1px;
}

.custom-cta {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-soft);
}
.custom-cta p {
    margin: 0;
    flex: 1 1 260px;
    color: var(--muted);
    font-size: 12.5px;
    max-width: 62ch;
}

/* The copy control sits with the rates it fills, not in the meta row above,
   where its hint text pulled every other label out of line. */
.custom-copy {
    display: flex;
    gap: 14px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.custom-copy p {
    margin: 0 0 3px;
    flex: 1 1 260px;
    color: var(--muted);
    font-size: 12px;
    max-width: 62ch;
}
.custom-copy select { min-width: 220px; }