/* css/main/competition-search.css — part 22/30 of the app styles (was css/main.css; loaded in this order by index.html). */
      /* ═══════════════════════════════════════════════════════════════
         SEARCH COMPETITIONS (phase 3a of the unification, 2026-08-26)
         Ported from `competitions/index.html`, with two changes for the better:
         ⛔ The hard-coded greens `#0a7d34` become `var(--success)`: a
            hex that does not change with the theme is forbidden by the house
            standards, and that green was painted the same on black as on white.
         ⛔ The entity selector no longer brings its own overlay: it uses `TLPicker`,
            which is this app's selector.
         ═══════════════════════════════════════════════════════════════ */

      /* ── THE FILTER HEADER, STICKY AS A WHOLE ─────────────────────────
         ⛔ IT IS A SINGLE LAYER WITH TWO ROWS, and that is the fix (Santi,
         2026-08-27). Before, only the types row stuck: when scrolling, the
         entity selector —which sits ABOVE— went up and disappeared,
         leaving the chips alone stuck to the edge. His words: *«only the
         competition blocks should scroll, not the
         entity selector button»*.

         ⛔ And they are WRAPPED IN A CONTAINER, not two `sticky` in a row:
         with two, the second needs a `top` equal to the height of the first, and
         that height changes with text size, with touch mode and with
         tablet zoom. A hand-written number there ends up leaving a gap or
         overlapping, and gives no warning. With a single container there is nothing to compute.

         ⚠️ IT COSTS HEIGHT, and on a phone height is the scarce resource: ~100 px of
         the iPhone's 812. That is why the padding is tight and the types row no longer
         has its own border or background —the header supplies them—: two borders
         in a row was what was seen before.
         ═══════════════════════════════════════════════════════════════ */
      .bsc-head {
        position: sticky;
        /* ⛔ NEGATIVE ON PURPOSE: it raises the 5 px of `.content`'s padding so
           that no slit is left between the app header and this bar through
           which the cards can be seen passing. The inner padding gives them back, so
           what is seen inside does not change. See `--content-pt`. */
        top: calc(-1 * var(--content-pt, 0px));
        z-index: 5;
        background: var(--bg);
        border-bottom: 1px solid var(--border-soft);
        padding-top: calc(10px + var(--content-pt, 0px));
        margin-bottom: 2px;
        /* ⛔ NO NEGATIVE MARGINS HERE. It had them for a few hours, when the
           side margin was padded in the `.view` and this bar had to break out
           of it so its bottom line reached both edges. When the
           margin moved to the card —where it belongs— the bar already uses the full width
           on its own, and those negatives would have pushed it 16 px OUTSIDE the
           screen on each side. */
      }
      .bsc-filter {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 0 0 10px;
      }
      .bsc-chip {
        min-height: 38px;
        padding: 6px 13px;
        border-radius: 999px;
        border: 1px solid var(--border);
        background: var(--surface);
        color: var(--muted);
        font-family: "Oswald", sans-serif;
        font-size: 13px;
        letter-spacing: 0.4px;
        cursor: pointer;
      }
      .bsc-chip.active { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
      .bsc-aire { border-left: 3px solid var(--cv-type-aire-bd); }
      .bsc-fuego { border-left: 3px solid var(--cv-type-fuego-bd); }
      .bsc-aahh { border-left: 3px solid var(--cv-type-aahh-bd); }
      .bsc-plato { border-left: 3px solid var(--cv-type-plato-bd); }
      .bsc-aire.active { background: var(--cv-type-aire-bg); color: var(--cv-type-aire-fg); border-color: var(--cv-type-aire-bd); }
      .bsc-fuego.active { background: var(--cv-type-fuego-bg); color: var(--cv-type-fuego-fg); border-color: var(--cv-type-fuego-bd); }
      .bsc-aahh.active { background: var(--cv-type-aahh-bg); color: var(--cv-type-aahh-fg); border-color: var(--cv-type-aahh-bd); }
      .bsc-plato.active { background: var(--cv-type-plato-bg); color: var(--cv-type-plato-fg); border-color: var(--cv-type-plato-bd); }
      .bsc-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
      @media (pointer: coarse) { .bsc-chip { min-height: 44px; } }

      /* Entity selector button. Inside `.bsc-head` it has no padding
         of its own: the top one is supplied by the header. */
      .ent-bar { margin: 0 0 8px; }
      .ent-btn {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        min-height: 44px;
        padding: 8px 12px;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--surface);
        color: var(--muted);
        font-family: "Oswald", sans-serif;
        font-size: 14px;
        letter-spacing: 0.3px;
        cursor: pointer;
      }
      .ent-btn.ent-on { color: var(--text); border-color: var(--accent); }
      /* ══ CLUB AND FEDERATION DIRECTORY (dir-entidades.js, 2026-09-25) ══
         Country and region selectors, a search box and one card per entity that
         unfolds in place with tappable contact details. */
      /* «About this directory»: collapsible, so that on a phone there is room for
         the list. Collapsed it is ONE line. */
      .ent-dir-info { padding: 0; margin-bottom: 10px; overflow: hidden; }
      .ent-dir-info-hd {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        min-height: 44px;
        padding: 8px 12px;
        border: 0;
        background: none;
        color: var(--text);
        font: inherit;
        font-size: 14px;
        text-align: left;
        cursor: pointer;
      }
      .ent-dir-info-hd span { flex: 1 1 auto; }
      .ent-dir-info-hd svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--muted); }
      .ent-dir-info-hd > svg:last-child { transition: transform 0.2s; }
      .ent-dir-info-hd[aria-expanded="true"] > svg:last-child { transform: rotate(180deg); }
      .ent-dir-info-hd:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
      .ent-dir-info-b { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 0 14px 14px; }
      .ent-dir-info-b p { margin: 0; }
      .ent-dir-info-b .btn-secondary { width: auto; min-height: 44px; margin: 0; }
      @media (prefers-reduced-motion: reduce) { .ent-dir-info-hd > svg:last-child { transition: none; } }
      .ent-dir-sel { display: flex; gap: 8px; margin-bottom: 8px; }
      .ent-dir-sel .ent-btn { flex: 1 1 0; min-width: 0; }
      .ent-dir-q { margin-bottom: 12px; }
      .ent-dir-card { padding: 0; margin-bottom: 10px; overflow: hidden; }
      .ent-dir-hd {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        min-height: 56px;
        padding: 10px 14px;
        border: 0;
        background: none;
        color: var(--text);
        font: inherit;
        text-align: left;
        cursor: pointer;
      }
      .ent-dir-hd:hover { background: var(--hover-soft); }
      .ent-dir-hd:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
      .ent-dir-hd > svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--muted); transition: transform 0.2s; }
      .ent-dir-hd[aria-expanded="true"] > svg { transform: rotate(180deg); }
      .ent-dir-hd-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
      .ent-dir-n { font-family: "Oswald", sans-serif; font-size: 16px; line-height: 1.25; word-break: break-word; }
      .ent-dir-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
      .ent-dir-tipo {
        padding: 1px 8px;
        border: 1px solid var(--border);
        border-radius: 999px;
        font-size: 11px;
        letter-spacing: 0.4px;
        text-transform: uppercase;
      }
      .ent-dir-body { padding: 4px 14px 14px; border-top: 1px solid var(--border-soft); }
      .ent-dir-dato { padding: 6px 0 0; font-size: 14px; line-height: 1.45; color: var(--text); word-break: break-word; }
      .ent-dir-acts {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 8px;
        margin-top: 12px;
      }
      .ent-dir-act {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        width: 100%;
        margin: 0;
        min-height: 44px;
        padding: 8px 12px;
        text-decoration: none;
      }
      .ent-dir-act svg { width: 18px; height: 18px; flex: 0 0 auto; }
      .ent-dir-act { padding: 8px; font-size: 13px; letter-spacing: 0.5px; }
      .ent-dir-act span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      /* The last one, if left alone on its row, full width: the text is not split. */
      .ent-dir-act:last-child:nth-child(odd) { grid-column: 1 / -1; }
      .ent-dir-campos { margin-top: 14px; }
      .ent-dir-campos .form-label { margin-bottom: 4px; }
      .ent-dir-campo {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 44px;
        color: var(--accent);
        text-decoration: none;
        font-size: 14px;
      }
      .ent-dir-campo svg { width: 18px; height: 18px; flex: 0 0 auto; }
      .ent-dir-campo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
      @media (prefers-reduced-motion: reduce) { .ent-dir-hd > svg { transition: none; } }
      .ent-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
      .ent-txt {
        flex: 1 1 auto;
        min-width: 0;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .ent-btn svg { flex: 0 0 auto; width: 18px; height: 18px; }

      /* ── Competition card ── */
      .cc-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 14px;
        margin-bottom: 12px;
      }
      /* ⚠️ `.cc-inelig` hides NOTHING: the competition is seen the same and with its
         reason written out (Santi's decision, 2026-07-15). It only lowers the
         intensity a notch so it does not compete with those the shooter can enter. */
      .cc-card.cc-inelig { opacity: 0.92; }
      .cc-hd { display: flex; align-items: flex-start; gap: 10px; }
      .cc-name {
        flex: 1 1 auto;
        font-family: "Oswald", sans-serif;
        font-size: 16px;
        line-height: 1.2;
        color: var(--text);
        word-break: break-word;
      }
      .cc-org {
        margin-bottom: 6px;
        font-family: "Oswald", sans-serif;
        font-size: 13px;
        color: var(--text);
        word-break: break-word;
      }
      .cc-org-k {
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.6px;
        font-size: 10px;
        margin-right: 7px;
      }
      /* Who co-organizes (`tlCoorgHtml`, js/app.js). With several, a button that
         unfolds the list in place: the card does not grow until asked. */
      .cc-coorg { margin-top: -2px; }
      .cc-coorg-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 32px;
        margin: -6px 0 -6px -6px;
        padding: 4px 6px;
        border: 0;
        border-radius: 6px;
        background: none;
        font: inherit;
        color: var(--text);
        cursor: pointer;
      }
      .cc-coorg-btn .cc-org-k { margin-right: 0; }
      .cc-coorg-btn:hover { background: var(--hover-soft); }
      .cc-coorg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
      .cc-coorg-btn svg { width: 16px; height: 16px; color: var(--muted); transition: transform 0.2s; }
      .cc-coorg-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
      .cc-coorg-n {
        min-width: 20px;
        padding: 1px 6px;
        border-radius: 999px;
        background: var(--surface2);
        border: 1px solid var(--border);
        font-size: 12px;
        line-height: 1.3;
        text-align: center;
      }
      .cc-coorg-list {
        list-style: none;
        margin: 6px 0 2px;
        padding: 0 0 0 10px;
        border-left: 2px solid var(--border);
      }
      .cc-coorg-list li { padding: 2px 0; }
      .hist-fila .hist-coorg { margin: 6px 0 0 2px; }
      @media (pointer: coarse) { .cc-coorg-btn { min-height: 44px; margin: -12px 0 -12px -6px; } }
      @media (prefers-reduced-motion: reduce) { .cc-coorg-btn svg { transition: none; } }
      .cc-access {
        margin-top: 6px;
        font-size: 13px;
        line-height: 1.4;
        font-family: "Oswald", sans-serif;
        letter-spacing: 0.3px;
      }
      .cc-access-open { color: var(--success); }
      .cc-access-closed { color: var(--muted); }
      .cc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
      .cc-chip {
        font-family: "Oswald", sans-serif;
        font-size: 11px;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        color: var(--accent);
        background: color-mix(in srgb, var(--accent) 12%, var(--surface));
        border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
        border-radius: 999px;
        padding: 3px 9px;
      }
      .cc-desc {
        margin-top: 10px;
        font-size: 14px;
        line-height: 1.5;
        color: var(--text);
        white-space: pre-wrap;
        word-break: break-word;
      }
      .cc-rows { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
      .cc-row { display: flex; gap: 10px; font-size: 13px; }
      .cc-k {
        flex: 0 0 96px;
        color: var(--muted);
        font-family: "Oswald", sans-serif;
        font-size: 12px;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        padding-top: 1px;
      }
      .cc-v { flex: 1 1 auto; color: var(--text); word-break: break-word; }
      .cc-free { color: var(--success); font-weight: 600; }
      .cc-tag {
        flex: 0 0 auto;
        font-family: "Oswald", sans-serif;
        font-size: 10px;
        letter-spacing: 1px;
        text-transform: uppercase;
        padding: 3px 8px;
        border-radius: 999px;
        white-space: nowrap;
      }
      .cc-late {
        color: var(--danger);
        background: color-mix(in srgb, var(--danger) 12%, var(--surface));
        border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent);
      }
      /* ⛔ The reason why they CANNOT pre-register is written out, not only in
         color: color as the only indicator is forbidden. */
      .cc-reason {
        margin-top: 10px;
        font-size: 13px;
        line-height: 1.45;
        color: var(--danger);
        background: color-mix(in srgb, var(--danger) 8%, var(--surface));
        border: 1px solid color-mix(in srgb, var(--danger) 28%, transparent);
        border-radius: 10px;
        padding: 8px 10px;
      }
      /* #118: that day they already compete in another. It is a NOTICE, not a «no»: text in the
         normal color (reading contrast in both themes), the tone is given by the
         icon and the warning background, and never by color alone. */
      .cc-mismo-dia {
        margin-top: 10px;
        display: flex;
        gap: 8px;
        align-items: flex-start;
        font-size: 13px;
        line-height: 1.45;
        color: var(--text);
        background: var(--warn-dim);
        border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
        border-radius: 10px;
        padding: 8px 10px;
      }
      .cc-mismo-dia svg {
        flex: 0 0 auto;
        width: 16px;
        height: 16px;
        margin-top: 1px;
        color: var(--warn);
      }
      .cc-prereg {
        margin-top: 12px;
        width: 100%;
        min-height: 46px;
        border-radius: 10px;
        border: none;
        font-family: "Oswald", sans-serif;
        font-size: 14px;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        background: var(--accent);
        color: var(--accent-fg);
        cursor: pointer;
      }
      .cc-prereg:disabled {
        background: var(--surface2);
        color: var(--muted);
        border: 1px solid var(--border);
        cursor: not-allowed;
      }
      .cc-prereg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
      /* ⭐ «Counts towards the ranking» goes on the CARD and not hidden in the details:
         it is information on which the shooter decides to pre-register. It is only
         drawn when it DOES count — a «doesn't count» on every card would be noise. */
      .cc-rank {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 8px;
        font-family: "Oswald", sans-serif;
        font-size: 11px;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        color: var(--accent);
      }
      .cc-rank svg { width: 13px; height: 13px; flex: 0 0 auto; }

      /* Quotas «Places · Pre-registrations · Registrations», per range */
      .cc-cupos { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
      .cc-cupo-row {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 4px 14px;
        padding: 8px 10px;
        border: 1px solid var(--border-soft);
        border-radius: 10px;
        background: var(--surface2);
      }
      /* ⚠️ Full: the border is reinforcement, not the message. What really
         tells the shooter is the written notice in the form. */
      .cc-cupo-full { border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
      .cc-cupo-camp {
        flex: 1 0 100%;
        font-family: "Oswald", sans-serif;
        font-size: 12px;
        letter-spacing: 0.4px;
        color: var(--text);
      }
      .cc-cupo-cell {
        font-size: 11px;
        letter-spacing: 0.3px;
        text-transform: uppercase;
        color: var(--muted);
      }
      .cc-cupo-cell b {
        font-family: "Oswald", sans-serif;
        /* 16 and not 15: the house scale has THIRTEEN steps and 15 is not one of
           them (UX-UI-normas §5). It came from the directory, which used `rem`. */
        font-size: 16px;
        color: var(--text);
        margin-right: 5px;
        font-variant-numeric: tabular-nums;
      }

      /* A4 poster, centered, right above the button */
      .cc-poster-wrap { margin-top: 14px; display: flex; justify-content: center; }
      .cc-poster {
        display: block;
        width: min(66%, 190px);
        aspect-ratio: 210 / 297;
        padding: 0;
        border: 1px solid var(--border);
        border-radius: 6px;
        overflow: hidden;
        background: var(--surface2);
        cursor: pointer;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
      }
      .cc-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
      .cc-poster-pdf-lbl {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        font-family: "Oswald", sans-serif;
        font-size: 24px;
        font-weight: 700;
        letter-spacing: 2px;
        color: var(--muted);
      }
      .cc-poster:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

      /* Full-screen poster, INSIDE the app (does not open a new tab).
         ⛔ It carries `.modal-overlay` so the BACK button closes it, just like
         the diploma viewer; the two classes together beat `.open`. */
      .modal-overlay.cc-lightbox {
        position: fixed;
        inset: 0;
        z-index: 1200;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        background: rgba(0, 0, 0, 0.92);
        padding-top: env(safe-area-inset-top, 0px);
        overflow: hidden;
      }
      .cc-lb-bar { flex: 0 0 auto; padding: 10px 12px; }
      .cc-lb-back {
        min-height: 44px;
        padding: 8px 16px;
        border: 1px solid rgba(255, 255, 255, 0.4);
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.08);
        color: #fff;
        font-family: "Oswald", sans-serif;
        font-size: 14px;
        letter-spacing: 0.5px;
        cursor: pointer;
      }
      .cc-lb-back:hover { background: rgba(255, 255, 255, 0.16); }
      .cc-lb-body {
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 12px 16px;
        min-height: 0;
      }
      .cc-lb-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
      .cc-lb-pdf { width: 100%; height: 100%; border: none; border-radius: 6px; background: #fff; }

      /* ── Pre-registration form, full screen ── */
      .modal-overlay.prf-overlay {
        position: fixed;
        inset: 0;
        z-index: 1200;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        background: var(--bg);
        padding-top: env(safe-area-inset-top, 0px);
        overflow: hidden;
      }
      /* ⛔ Confirm goes at the TOP and fixed: in AAHH the list of modalities is long,
         and with the button at the end one had to go through all of it to reach it. */
      .prf-bar {
        flex: 0 0 auto;
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        padding: 10px 12px;
        border-bottom: 1px solid var(--border-soft);
        background: var(--surface);
      }
      .prf-head { flex: 0 0 auto; padding: 14px 16px 0; background: var(--bg); }
      .prf-head > div { max-width: 560px; margin: 0 auto; }
      /* Same case as `.cd-scroll`, and the same fix: this layer was written
         by copying that one, `-webkit-overflow-scrolling` included. */
      .prf-scroll {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        touch-action: pan-y;
        padding: 4px 16px calc(32px + env(safe-area-inset-bottom, 0px));
      }
      .prf-scroll > * { max-width: 560px; margin-left: auto; margin-right: auto; }
      .prf-title { font-family: "Oswald", sans-serif; font-size: 24px; color: var(--text); margin-bottom: 4px; }
      .prf-name { font-size: 14px; color: var(--muted); margin-bottom: 14px; word-break: break-word; }
      .prf-sec { margin-top: 22px; }
      .prf-h {
        font-family: "Oswald", sans-serif;
        font-size: 13px;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        color: var(--accent);
        margin: 0 0 10px;
        padding-bottom: 6px;
        border-bottom: 1px solid var(--border-soft);
      }
      .prf-hint { font-size: 13px; color: var(--muted); margin-bottom: 8px; line-height: 1.45; }
      /* ══ THE TERMS OF USE BEFORE CREATING A PROFILE (2026-09-16) ═══════════
         `tlCondicionesPedir` (js/app.js). It is a `prf-overlay` —full-screen
         layer—: fixed header, the document scrolling in its frame and the footer
         with the checkbox and buttons ALWAYS in view. If the footer scrolled with the
         text, one would have to reach the end of thirty clauses to accept, and
         that does not make anyone read more: it makes them tap without looking. */
      .cond-ov .prf-head { padding-bottom: 10px; border-bottom: 1px solid var(--border-soft); }
      .cond-frame { flex: 1 1 auto; min-height: 0; }
      .cond-pie {
        flex: 0 0 auto;
        background: var(--surface);
        border-top: 1px solid var(--border-soft);
        padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px));
      }
      .cond-pie-in { max-width: 560px; margin: 0 auto; }
      .cond-pie .form-explain { margin: 0; }
      .cond-pie .chk-row { margin-top: 8px; }
      .cond-pie .cond-menor { margin-top: 6px; }
      /* The link to the policy: a button that looks like a link, with its
         full touch area even though the text is small. */
      .cond-enlace {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0 2px;
        margin: -12px 0;
        border: 0;
        background: none;
        font: inherit;
        color: var(--accent);
        text-decoration: underline;
        text-underline-offset: 2px;
        cursor: pointer;
      }
      .cond-enlace:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
      .cond-btns { display: flex; gap: 8px; margin-top: 10px; }
      .cond-btns > button { flex: 1 1 0; min-height: 44px; margin-top: 0; }
      .cond-btns .btn-primary:disabled { opacity: .45; cursor: not-allowed; }
      .prf-count { font-family: "Oswald", sans-serif; font-size: 16px; color: var(--text); margin-bottom: 10px; }
      .prf-opts { display: flex; flex-direction: column; gap: 8px; }
      .prf-opt {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 46px;
        padding: 8px 12px;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--surface);
        cursor: pointer;
        font-size: 14px;
        color: var(--text);
      }
      .prf-opt:hover { border-color: var(--accent); }
      .prf-opt input { width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--accent); }
      .prf-opt:has(input:disabled) { opacity: 0.45; cursor: not-allowed; }
      .prf-opt:has(input:checked) {
        border-color: var(--accent);
        background: color-mix(in srgb, var(--accent) 10%, var(--surface));
      }
      .prf-opt:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
      .prf-err {
        margin-top: 12px;
        font-size: 14px;
        color: var(--danger);
        background: color-mix(in srgb, var(--danger) 8%, var(--surface));
        border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
        border-radius: 10px;
        padding: 10px 12px;
      }
      /* Payment and assignment-order notice: they are warnings, not errors */
      .prf-note {
        margin-bottom: 12px;
        padding: 10px 12px;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--surface2);
        font-size: 13px;
        line-height: 1.5;
        color: var(--text);
      }
      .prf-cupo-box { margin-top: 10px; }
      .prf-cupo-line { font-size: 13px; color: var(--muted); }
      .prf-cupo-warn {
        margin-top: 6px;
        font-size: 13px;
        line-height: 1.45;
        color: var(--text);
        background: color-mix(in srgb, var(--danger) 8%, var(--surface));
        border: 1px solid color-mix(in srgb, var(--danger) 28%, transparent);
        border-radius: 10px;
        padding: 8px 10px;
      }
      /* AAHH modality group headings (body › weapon type) */
      .prf-grp1 {
        font-family: "Oswald", sans-serif;
        font-size: 13px;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--accent);
        margin: 16px 0 6px;
        padding-bottom: 4px;
        border-bottom: 1px solid var(--border-soft);
      }
      .prf-grp1:first-child { margin-top: 0; }
      .prf-grp2 {
        font-family: "Oswald", sans-serif;
        font-size: 11px;
        letter-spacing: 0.6px;
        text-transform: uppercase;
        color: var(--muted);
        margin: 10px 0 4px;
      }
      .prf-dist { color: var(--muted); font-weight: 400; }