/* --- Design tokens --- */
    :root {
      color-scheme: light dark;
      --bg: #f4f6fb;
      --bg-grad-1: #eef1fb;
      --bg-grad-2: #f7f4fb;
      --surface: #ffffff;
      --surface-2: #f0f2f8;
      --text: #1a1d24;
      --muted: rgba(26,29,36,.62);
      --border: rgba(26,29,36,.13);
      --border-strong: rgba(26,29,36,.28);
      --accent: #4361ee;
      --accent-soft: rgba(67,97,238,.12);
      --shadow: 0 1px 2px rgba(20,24,40,.06), 0 4px 16px rgba(20,24,40,.06);
      --shadow-lg: 0 8px 30px rgba(20,24,40,.14);
      --radius: 14px;
      --radius-sm: 9px;
      --ok: #1e8f52; --ok-bg: rgba(30,143,82,.13);
      --bad: #d13b3b; --bad-bg: rgba(209,59,59,.12);
      --warn: #b5860b;
    }
    @media (prefers-color-scheme: dark) {
      :root {
        --bg: #0e1017;
        --bg-grad-1: #12141f;
        --bg-grad-2: #171320;
        --surface: #191c26;
        --surface-2: #1f2330;
        --text: #e7e9f0;
        --muted: rgba(231,233,240,.60);
        --border: rgba(231,233,240,.12);
        --border-strong: rgba(231,233,240,.26);
        --accent: #7c9bff;
        --accent-soft: rgba(124,155,255,.16);
        --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 18px rgba(0,0,0,.35);
        --shadow-lg: 0 10px 34px rgba(0,0,0,.5);
        --ok: #4ccf8a; --ok-bg: rgba(46,160,67,.20);
        --bad: #ff6b6b; --bad-bg: rgba(218,54,51,.18);
        --warn: #e3b341;
      }
    }

    * { box-sizing: border-box; }
    body {
      font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
      max-width: 1080px; margin: 0 auto; padding: 2.5rem 1.25rem 4rem;
      color: var(--text);
      background:
        radial-gradient(1200px 600px at 15% -10%, var(--bg-grad-1), transparent 60%),
        radial-gradient(1000px 500px at 95% 0%, var(--bg-grad-2), transparent 55%),
        var(--bg);
      background-attachment: fixed;
      min-height: 100vh;
      line-height: 1.5;
    }
    h1 { font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 .3rem;
      display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
    h1 .subtitle { font-weight: 400; color: var(--muted); font-size: .95rem; letter-spacing: 0; }
    .row { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin: 1rem 0; }
    label { font-weight: 600; }
    input[type="text"] { padding: .4rem .6rem; }
    #drop {
      border: 2px dashed var(--border-strong); border-radius: var(--radius);
      padding: 2.5rem; text-align: center; color: var(--muted); cursor: pointer;
      background: var(--surface); transition: border-color .15s, background .15s, color .15s;
    }
    #drop:hover { border-color: var(--accent); color: var(--text); }
    #drop.over { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
    .card {
      border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem;
      margin: 1rem 0; background: var(--surface); box-shadow: var(--shadow);
    }
    .card h2 { font-size: .95rem; margin: 0 0 .6rem; display: flex; justify-content: space-between; align-items: center; }
    pre { white-space: pre-wrap; word-break: break-word; margin: 0; }
    button { padding: .4rem .8rem; cursor: pointer; font: inherit; }
    .fr { color: var(--muted); font-weight: 400; }
    .error { color: var(--bad); }
    .hidden { display: none !important; }
    .badge { font-weight: 600; padding: .2rem .55rem; border-radius: 999px; font-size: .82rem; }
    .badge.legal { background: var(--ok-bg); color: var(--ok); }
    .badge.illegal { background: var(--bad-bg); color: var(--bad); }
    #legalityReport { margin-top: .75rem; font-size: .85rem; color: var(--muted); }

    .tabs { display: inline-flex; gap: .2rem; padding: .3rem; margin: 1.25rem 0 1.75rem;
      background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; }
    .tabs button {
      background: none; border: none; border-radius: 999px;
      padding: .5rem 1.2rem; font: inherit; font-weight: 600; color: var(--muted);
      transition: background .15s, color .15s;
    }
    .tabs button:hover { color: var(--text); }
    .tabs button[aria-selected="true"] { color: #fff; background: var(--accent); box-shadow: var(--shadow); }
    @media (prefers-color-scheme: dark) { .tabs button[aria-selected="true"] { color: #0e1017; } }
    .placeholder { color: var(--muted); text-align: center; padding: 3rem 1rem; }

    /* --- Generator --- */
    .gen-section-title { font-size: 1.05rem; font-weight: 700; margin: 1.75rem 0 .85rem; letter-spacing: -.01em; }
    .game-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: .85rem; }
    @media (max-width: 620px) { .game-picker { grid-template-columns: repeat(2, 1fr); } }
    .game-card {
      position: relative; overflow: hidden; isolation: isolate;
      display: flex; align-items: center; min-height: 104px; padding: .8rem 1rem;
      border: 1px solid var(--border); border-radius: var(--radius);
      background: var(--surface); box-shadow: var(--shadow);
      font: inherit; color: var(--text); cursor: pointer; text-align: left;
      transition: transform .15s, box-shadow .15s, border-color .15s;
    }
    /* Mascot artwork fills the right half; a scrim keeps the name legible. It's
       fully contained (object-fit: contain) so wide Pokémon aren't clipped. */
    .game-card .g-art {
      position: absolute; z-index: -2; right: 0; top: 0; bottom: 0;
      width: 58%; height: 100%; object-fit: contain; object-position: right center;
      opacity: .95; filter: drop-shadow(0 3px 8px rgba(0,0,0,.25));
      transition: transform .2s, opacity .2s;
      pointer-events: none;
    }
    .game-card::before {
      content: ''; position: absolute; z-index: -1; inset: 0;
      background: linear-gradient(90deg, var(--surface) 46%, rgba(0,0,0,0) 92%);
    }
    .game-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); }
    .game-card:hover .g-art { transform: scale(1.05); opacity: 1; }
    .game-card[aria-pressed="true"] {
      border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent), var(--shadow-lg);
    }
    .game-card .g-name { font-weight: 700; font-size: 1rem; line-height: 1.2; max-width: 55%; }
    .game-card .emoji { display: none; }

    .species-controls { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
    #speciesSearch { flex: 1 1 14rem; min-width: 10rem; max-width: 22rem; padding: .45rem .6rem; box-sizing: border-box; }
    .sort-label { font-weight: 600; opacity: .8; }
    #speciesSort { padding: .4rem .5rem; }
    .species-count { opacity: .7; font-size: .85rem; margin-left: auto; }
    .species-grid {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
      gap: .7rem; margin-top: 1rem;
    }
    .species-card {
      display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
      text-align: center; gap: .3rem; padding: .6rem .5rem; border: 1px solid var(--border);
      border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow);
      font: inherit; color: var(--text); cursor: pointer;
      transition: transform .12s, box-shadow .12s, border-color .12s;
    }
    .species-card:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow-lg); }
    .species-card img { width: 76px; height: 76px; object-fit: contain; }
    .species-card .s-name { font-size: .8rem; font-weight: 600; }
    .s-types { display: flex; gap: .2rem; flex-wrap: wrap; justify-content: center; align-content: flex-start; }
    .species-card .s-types { margin-top: .1rem; row-gap: .2rem; }
    .species-card .type-icon { height: 15px; }
    .type-icon { height: 18px; width: auto; }
    .gen-hint { opacity: .6; font-size: .85rem; margin-top: 1rem; }

    /* Unified control look across the app. */
    .field, .opt-row select, .opt-row input[type="number"], .combo-button,
    .cta-row select, .combo-search, #moveSearch, .stats-btn, #tradeCode,
    .adv-row .adv-value, .iv-table input, #speciesSearch, #speciesSort, #prefix {
      box-sizing: border-box; height: 2.2rem; padding: .4rem .6rem;
      border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
      background: var(--surface); color: var(--text); font: inherit;
      transition: border-color .12s, box-shadow .12s;
    }
    .iv-table input { height: 1.95rem; }
    select:hover, input:hover, .combo-button:hover { border-color: var(--accent); }
    select:focus-visible, input:focus-visible, .combo-button:focus-visible, button:focus-visible {
      outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
    }

    .link-btn { background: none; border: none; color: var(--accent); font: inherit; cursor: pointer;
      padding: 0; margin-left: 1rem; text-decoration: none; font-weight: 600; }
    .link-btn:hover { text-decoration: underline; }
    .options-panel {
      display: flex; gap: 1.75rem; flex-wrap: wrap; align-items: flex-start;
      background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
      padding: 1.4rem; box-shadow: var(--shadow);
    }
    .opt-preview { display: flex; flex-direction: column; align-items: center; gap: .5rem; width: 190px; flex: 0 0 auto; }
    .opt-preview > img {
      width: 170px; height: 170px; object-fit: contain;
      background: radial-gradient(circle at 50% 45%, var(--accent-soft), transparent 68%);
      filter: drop-shadow(0 6px 14px rgba(0,0,0,.22));
    }
    .opt-preview .s-types { justify-content: center; }
    .opt-name { font-weight: 700; font-size: 1.05rem; }
    .opt-fields { flex: 1 1 420px; display: flex; flex-direction: column; gap: .7rem; }
    .opt-row { display: flex; align-items: center; gap: .75rem; }
    .opt-row > label, .opt-row-label { flex: 0 0 7rem; font-weight: 600; }
    .opt-row select, .opt-row .combo { width: 14rem; }
    .opt-row input[type="number"] { width: 14rem; }
    .field-hint { font-size: .8rem; color: var(--muted); flex: 1 1 auto; max-width: 28rem; }

    .cta-row { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
    .cta-card #ctaNote { margin: .6rem 0 0; max-width: none; color: var(--warn); }

    /* Custom accessible combobox (used for the ball picker) */
    .combo { position: relative; }
    .combo-button {
      display: flex; align-items: center; gap: .5rem; width: 100%;
      cursor: pointer; text-align: left;
    }
    .combo-button::after { content: '▾'; margin-left: auto; color: var(--muted); }
    .combo-button img, .combo-option img { width: 22px; height: 22px; object-fit: contain; flex: 0 0 auto; }
    .combo-panel {
      position: absolute; z-index: 10; top: calc(100% + 4px); left: 0; right: 0;
      border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
      background: var(--surface); box-shadow: var(--shadow-lg);
    }
    .combo-search { width: calc(100% - .5rem); margin: .3rem; }
    .combo-list {
      max-height: 15rem; overflow-y: auto; margin: 0; padding: .3rem; list-style: none;
    }
    .combo-option.hidden { display: none; }
    .combo-option {
      display: flex; align-items: center; gap: .5rem; padding: .4rem .55rem;
      border-radius: var(--radius-sm); cursor: pointer;
    }
    .combo-option[aria-selected="true"] { font-weight: 600; }
    .combo-option.active, .combo-option:hover { background: var(--accent-soft); }
    .combo-noicon { width: 22px; flex: 0 0 auto; }

    /* Moveset */
    .moveset { margin-top: 1.5rem; }
    .moveset-title { margin-bottom: .6rem; }
    .moveset-layout { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: flex-start; }
    .move-slots { flex: 0 0 260px; }
    .move-pool { flex: 1 1 300px; min-width: 260px; }
    .move-slots-label, .move-pool label { font-weight: 600; font-size: .85rem; }
    .slots { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; counter-reset: slot; }
    .slot {
      display: flex; align-items: center; gap: .5rem; min-height: 2.4rem;
      padding: .35rem .55rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
      background: var(--surface);
    }
    .slot::before { counter-increment: slot; content: counter(slot); color: var(--muted); font-size: .8rem; width: 1rem; flex: 0 0 auto; }
    .slot.empty { border-style: dashed; border-color: var(--border); color: var(--muted); background: none; }
    .slot.filled { cursor: grab; box-shadow: var(--shadow); }
    .slot.filled:hover { border-color: var(--accent); }
    .slot.dragover { border-color: var(--accent); background: var(--accent-soft); }
    .slot .m-name { flex: 1 1 auto; font-weight: 600; font-size: .85rem; }
    .slot .type-icon { height: 16px; }
    .slot .remove { background: none; border: none; color: inherit; opacity: .6; cursor: pointer; font: inherit; padding: 0 .2rem; }
    .slot .remove:hover { opacity: 1; }
    .slot-hint { margin-top: .5rem; }

    #moveSearch { width: 100%; }
    .move-list { list-style: none; margin: .5rem 0 0; padding: 0; max-height: 18rem; overflow-y: auto;
      border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow); }
    .move-option {
      display: flex; align-items: center; gap: .5rem; padding: .45rem .65rem; cursor: pointer;
      border-bottom: 1px solid var(--border);
    }
    .move-option:last-child { border-bottom: none; }
    .move-option:hover:not(.chosen) { background: var(--accent-soft); }
    .move-option.chosen { opacity: .4; cursor: default; }
    .move-option .m-name { flex: 1 1 auto; font-size: .85rem; }
    .move-option .type-icon { height: 16px; }
    .move-badge { font-size: .68rem; font-weight: 600; padding: .05rem .35rem; border-radius: 999px;
      border: 1px solid var(--border-strong); color: var(--muted); white-space: nowrap; }
    .move-power { flex: 0 0 2.5rem; text-align: right; font-size: .8rem; font-variant-numeric: tabular-nums; opacity: .75; }
    .cat-icon { height: 15px; width: auto; flex: 0 0 auto; }
    .slot .cat-icon { height: 14px; }

    /* Stats */
    .stats { margin-top: 1.5rem; }
    .stats-title { display: flex; align-items: center; gap: .75rem; }
    .legality-badge { font-size: .75rem; font-weight: 600; padding: .15rem .55rem; border-radius: 999px; }
    .legality-badge.checking { border: 1px solid var(--border-strong); color: var(--muted); }
    .legality-badge.legal { background: var(--ok-bg); color: var(--ok); border: 1px solid transparent; }
    .legality-badge.illegal { background: var(--bad-bg); color: var(--bad); border: 1px solid transparent; }
    .stats-actions { display: flex; gap: .5rem; margin: .6rem 0; flex-wrap: wrap; }
    .stats-btn { cursor: pointer; font-weight: 600; }
    .stats-btn:hover { border-color: var(--accent); color: var(--accent); }
    .iv-table { border-collapse: collapse; }
    .iv-table th, .iv-table td { padding: .3rem .5rem; text-align: center; font-size: .85rem; }
    .iv-table th { font-weight: 600; color: var(--muted); }
    .iv-table input { width: 3.3rem; text-align: center; }
    .ev-row td { color: var(--muted); font-variant-numeric: tabular-nums; }
    .ev-row .ev-label, .iv-table .row-label { font-weight: 600; color: var(--muted); text-align: right; padding-right: .6rem; }
    .total-row td { font-weight: 700; font-variant-numeric: tabular-nums; }
    .stats-layout { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }
    .stat-radar { margin: 0; flex: 0 0 auto; }
    .stat-radar svg { width: 220px; height: 220px; }
    .radar-grid { fill: none; stroke: var(--border-strong); }
    .radar-axis { stroke: var(--border); }
    .radar-shape { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.5; }
    .radar-label { font-size: 10px; fill: currentColor; opacity: .75; }
    .radar-value { font-size: 9px; fill: currentColor; opacity: .9; font-weight: 600; }
    .legality-report {
      margin-top: .7rem; padding: .7rem .9rem; white-space: pre-wrap; font-size: .8rem;
      border: 1px solid var(--bad-bg); border-radius: var(--radius-sm); background: var(--bad-bg); color: var(--bad);
    }
    .degraded-badge {
      font-size: .75rem; font-weight: 600; padding: .15rem .55rem; border-radius: 999px;
      background: rgba(210,153,34,.18); color: var(--warn); border: 1px solid transparent;
    }

    /* Legality panel: highlighted command lines + French problem list. Shared by
       both tabs (generator: #legalityPanel; converter: #convLegalityPanel). */
    .legality-panel {
      margin-top: .8rem; padding: .8rem .9rem; border-radius: var(--radius-sm);
      border: 1px solid var(--border); background: var(--surface-2); font-size: .85rem;
    }
    .legality-panel-title { font-weight: 700; margin-bottom: .5rem; }
    .legality-note {
      margin: 0 0 .6rem; padding: .5rem .7rem; border-radius: var(--radius-sm);
      background: rgba(210,153,34,.14); color: var(--warn); font-size: .82rem;
    }
    .legality-lines {
      margin: 0 0 .7rem; padding: .6rem .7rem; border-radius: var(--radius-sm);
      background: var(--surface); border: 1px solid var(--border);
      font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .82rem;
      white-space: pre-wrap; overflow-x: auto;
    }
    .legality-line { display: block; padding: 0 .3rem; border-radius: 3px; }
    .legality-line.invalid { background: var(--bad-bg); color: var(--bad); font-weight: 600; }
    .legality-line.fishy { background: rgba(210,153,34,.16); color: var(--warn); font-weight: 600; }
    .legality-issues { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
    .legality-issue { display: flex; align-items: baseline; gap: .5rem; }
    .legality-dot { flex: 0 0 auto; font-weight: 700; }
    .legality-issue.invalid .legality-dot { color: var(--bad); }
    .legality-issue.fishy .legality-dot { color: var(--warn); }
    .legality-ref {
      display: inline-block; margin-right: .4rem; padding: .05rem .35rem; border-radius: 3px;
      background: var(--surface); border: 1px solid var(--border); font-size: .78rem;
    }

    /* Advanced options */
    .advanced { margin-top: 1.5rem; }
    .advanced-list { display: flex; flex-direction: column; gap: .5rem; margin-top: .6rem; }
    .adv-row { display: flex; align-items: center; gap: .75rem; min-height: 2.1rem; }
    .adv-row > label.adv-toggle { display: flex; align-items: center; gap: .5rem; flex: 0 0 15rem; font-weight: 600; }
    .adv-row .adv-value { width: 12rem; }
    .adv-row .adv-value:disabled { opacity: .4; }
    .adv-row .adv-fixed { color: var(--muted); font-size: .85rem; }

    /* Generate command */
    .generate { margin-top: 1.5rem; }
    .generate-controls { display: flex; align-items: center; gap: .75rem; margin: .6rem 0; flex-wrap: wrap; }
    .gen-code-label { font-weight: 600; }
    #tradeCode { width: 12rem; }
    .generate-warning { color: var(--warn); font-size: .85rem; margin: .3rem 0; }
    .command-box { position: relative; margin-top: .6rem; }
    .command-box pre {
      margin: 0; padding: .9rem 1rem; white-space: pre-wrap; font-size: .85rem;
      font-family: ui-monospace, "SF Mono", Menlo, monospace;
      border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2);
    }
    .copy-btn { position: absolute; top: .55rem; right: .6rem; margin: 0; }

    /* Converter summary card */
    .summary-body { display: flex; gap: 1.25rem; align-items: flex-start; flex-wrap: wrap; }
    #sumSprite { width: 120px; height: 120px; object-fit: contain; flex: 0 0 auto;
      background: radial-gradient(circle at 50% 45%, var(--accent-soft), transparent 68%); }
    .summary-grid {
      flex: 1 1 320px; margin: 0; display: grid; gap: .3rem .9rem;
      grid-template-columns: auto 1fr; align-content: start; font-size: .9rem;
    }
    .summary-grid dt { color: var(--muted); font-weight: 600; }
    .summary-grid dd { margin: 0; font-weight: 600; }
    .summary-grid .full { grid-column: 1 / -1; }
    .summary-trainer { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--border); }
    .summary-subtitle { color: var(--muted); font-weight: 700; font-size: .8rem;
      text-transform: uppercase; letter-spacing: .04em; margin-bottom: .5rem;
      display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
    .summary-game-logo { height: 34px; max-width: 160px; object-fit: contain; }
    .summary-trainer-body { display: flex; gap: 1.25rem; align-items: flex-start; flex-wrap: wrap; }
    .summary-trainer-sprite { width: 84px; height: 84px; object-fit: contain; flex: 0 0 auto;
      border-radius: var(--radius-sm); background: var(--surface-2); }
    .summary-moves { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .1rem; }
    .summary-moves span { padding: .1rem .5rem; border-radius: 999px; background: var(--surface-2);
      border: 1px solid var(--border); font-size: .82rem; font-weight: 600; }
    .legality-details { margin-top: .8rem; font-size: .85rem; }
    .legality-details summary { cursor: pointer; color: var(--muted); font-weight: 600; }
    .legality-details pre { margin-top: .5rem; padding: .7rem .9rem; white-space: pre-wrap;
      border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }

    /* Primary action buttons (Generate, Copy in converter). */
    #generateBtn, #copy {
      background: var(--accent); color: #fff; border: none; border-radius: var(--radius-sm);
      padding: .5rem 1.1rem; font-weight: 600; box-shadow: var(--shadow);
    }
    @media (prefers-color-scheme: dark) { #generateBtn, #copy { color: #0e1017; } }
    #generateBtn:hover, #copy:hover { filter: brightness(1.07); }
    #generateBtn:disabled { opacity: .5; cursor: default; filter: none; }

    /* The IV/EV/Total table has a fixed intrinsic width (label + 6 number inputs);
       it can't shrink, so wrap it in an own scroll container instead of letting it
       push the whole page wider than the viewport. min-width:0 is required so this
       flex item may shrink below its content width (default is min-width:auto). */
    .iv-table-wrap { min-width: 0; max-width: 100%; overflow-x: auto; }

    /* --- Narrow screens: stop horizontal overflow from the stats table and the
       advanced-options rows (label + value on one line is too wide on a phone). --- */
    @media (max-width: 560px) {
      /* Config rows (Nature/Ability/Ball…) stack: label above, fluid control below,
         so the fixed 14rem selects and their effect hints can't overflow. */
      .opt-row { flex-direction: column; align-items: stretch; gap: .3rem; }
      .opt-row > label, .opt-row-label { flex: none; }
      .opt-row select, .opt-row .combo, .opt-row input[type="number"] { width: 100%; box-sizing: border-box; }
      .field-hint { max-width: 100%; }

      /* Advanced options stack: label above, full-width value below. */
      .adv-row { flex-direction: column; align-items: stretch; gap: .3rem; }
      .adv-row > label.adv-toggle { flex: none; }
      .adv-row .adv-value { width: 100%; box-sizing: border-box; }
      .opt-fields { flex-basis: 100%; min-width: 0; }

      /* The scrollable table never widens the page. */
      .stats-layout { align-items: stretch; }
      .iv-table-wrap { -webkit-overflow-scrolling: touch; }
    }