/* css/main/picker-distances-and-toast.css — part 8/30 of the app styles (was css/main.css; loaded in this order by index.html). */
      /* ── TLPicker — unified selector ──────────────────────── */
      button.picker-trigger {
        text-align: left;
        cursor: pointer;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23c8a84b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
        background-repeat: no-repeat;
        background-position: right 14px center;
        background-size: 14px 14px;
        padding-right: 38px;
        display: block;
        line-height: 1.4;
      }
      button.picker-trigger:focus { border-color: var(--accent); }
      button.picker-trigger:disabled {
        opacity: 0.55;
        cursor: not-allowed;
      }
      .picker-trigger-label { display: block; min-height: 1em; }
      .picker-trigger-placeholder { color: var(--muted); }
      .tl-picker-modal {
        display: flex;
        flex-direction: column;
        max-height: calc(80dvh / var(--tl-zoom, 1));
        padding-bottom: 16px;
        /* overflow:hidden — the base .modal inherits overflow-y:auto, and that
           makes the whole modal a scrollable ancestor. When
           there was scrollIntoView in the inner list, the browser also tried to
           adjust the modal's scroll and produced a visible "bounce"
           at the end of the entrance animation. The inner list
           stays scrollable; the outer container must not be. */
        overflow: hidden;
      }
      .tl-picker-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 10px;
      }
      .tl-picker-head .modal-title { margin-bottom: 0; flex: 1; }
      .tl-picker-close {
        background: none;
        border: none;
        color: var(--muted);
        font-size: 24px;
        line-height: 1;
        cursor: pointer;
        padding: 0 4px;
      }
      .tl-picker-close:hover { color: var(--text); }
      .tl-picker-add-wrap { margin-bottom: 10px; }
      .tl-picker-add-btn {
        width: 100%;
        background: transparent;
        color: var(--accent);
        border: 1px dashed var(--accent);
        border-radius: 10px;
        padding: 10px 14px;
        font-family: "Inter", sans-serif;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.4px;
        cursor: pointer;
        transition: background 0.12s, color 0.12s;
      }
      .tl-picker-add-btn:hover {
        background: var(--accent-dim);
      }
      .tl-picker-search-wrap { margin-bottom: 10px; }
      .tl-picker-list {
        flex: 1 1 auto;
        overflow-y: auto;
        overscroll-behavior: contain;
        display: flex;
        flex-direction: column;
        gap: 6px;
      }
      .tl-picker-row {
        display: flex;
        align-items: center;
        gap: 10px;
        background: var(--card);
        color: var(--text);
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 11px 14px;
        font-family: "Inter", sans-serif;
        font-size: 14px;
        text-align: left;
        cursor: pointer;
        transition: background 0.12s, border-color 0.12s;
      }
      .tl-picker-row:hover { border-color: var(--accent); }
      .tl-picker-row-selected {
        background: var(--accent-dim);
        border-color: var(--accent);
      }
      .tl-picker-row-disabled { opacity: 0.5; cursor: not-allowed; }
      .tl-picker-row-label { flex: 1; }
      /* Labels that can't be split: short hyphenated codes (SH-VI,
         SG-L). Without this, at 320 px the hyphen acts as a break point and the code
         comes out on two lines. Only applied to whoever asks (`nowrap` option). */
      .tl-picker-row-label-nowrap { white-space: nowrap; }
      .tl-picker-row-hint { color: var(--muted); font-size: 12px; }
      .tl-picker-row-check { color: var(--accent); font-weight: 700; }
      .tl-picker-empty {
        text-align: center;
        color: var(--muted);
        padding: 30px 12px;
        font-size: 13px;
      }
      /* Exit animation of the TLPicker sheet — avoids the visual "jump"
         caused by the abrupt display:flex → display:none change. */
      @keyframes tlPickerSlideDown {
        from { transform: translateY(0); opacity: 1; }
        to   { transform: translateY(100%); opacity: 0; }
      }
      .tl-picker-modal.tl-picker-closing {
        animation: tlPickerSlideDown 0.18s ease-in forwards;
      }
      /* ── Per-station distance matrix in firearm/AAHH galleries ── */
      .campo-dist-tablewrap {
        overflow-x: auto;
        border: 1px solid var(--border);
        border-radius: 6px;
        background: var(--card);
      }
      .campo-dist-table {
        width: 100%;
        border-collapse: collapse;
        font-family: "Inter", sans-serif;
        font-size: 12px;
      }
      .campo-dist-table th,
      .campo-dist-table td {
        padding: 6px 4px;
        text-align: center;
        border-bottom: 1px solid var(--border);
      }
      .campo-dist-table tbody tr:last-child th,
      .campo-dist-table tbody tr:last-child td {
        border-bottom: none;
      }
      .campo-dist-table thead th {
        background: var(--surface);
        position: sticky;
        top: 0;
        z-index: 1;
      }
      .campo-dist-row-h {
        font-family: "Oswald", sans-serif;
        font-size: 11px;
        letter-spacing: 0.5px;
        color: var(--muted);
        font-weight: 600;
        padding-left: 8px !important;
        padding-right: 8px !important;
        text-align: left !important;
        background: var(--surface);
      }
      .campo-dist-col {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
      }
      .campo-dist-col-lbl {
        color: var(--accent);
        font-family: "Oswald", sans-serif;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.5px;
        text-transform: uppercase;
      }
      .campo-dist-col-cb {
        width: 16px;
        height: 16px;
        accent-color: var(--accent);
        cursor: pointer;
        margin: 0;
      }
      .campo-dist-cb {
        width: 18px;
        height: 18px;
        accent-color: var(--accent);
        cursor: pointer;
        margin: 0;
      }
      /* ⛔ THE WIDTH IS NOT DECIDED WITH `left: 50%`, and that's why it split into three
         lines with plenty of room. A fixed box that only pins its LEFT
         edge to the centre has as available space what remains from
         there to the right edge: HALF the screen. On Santi's phone that
         is ~168 px, so the `max-width: 420px` was never reached
         and "APP updated, check the improvements" came out on three lines
         (measured with his screenshot, 2026-08-29).
         BOTH edges are pinned and it is centred with auto margins: the
         available space becomes the full width minus the margins, and
         `fit-content` sizes the bubble to the text —short, short— without
         stretching it edge to edge. The transform stays only for the
         entrance, which is the only thing it had to do. */
      .toast {
        position: fixed;
        bottom: 70px;
        left: 16px;
        right: 16px;
        margin-inline: auto;
        width: fit-content;
        transform: translateY(12px);
        background: var(--success);
        /* ⛔ NOT `var(--text)`: that changes with the theme and the toast's background doesn't,
           so in light it gave almost-black text on a saturated colour (measured:
           1.38:1 to 3.39:1). The real colour is set by `_toastFg()` in js/app.js
           looking at the background's luminance; this is only the starting state. */
        color: #ffffff;
        padding: 12px 20px;
        border-radius: 999px;
        font-size: 13px;
        font-weight: 600;
        opacity: 0;
        transition: all 0.3s;
        z-index: 200;
        /* Multi-line when the message needs it, always centred: a three-word
           notice left-aligned inside a pill reads
           crooked. `balance` spreads the lines instead of leaving a single one
           with a stray word (if the browser doesn't know it, it ignores it). */
        white-space: normal;
        line-height: 1.4;
        text-align: center;
        text-wrap: balance;
        max-width: min(92vw, 420px);
        pointer-events: none;
      }
      .toast.show {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto; /* only capturable while visible (tap to close) */
      }