/* Themed custom selects and chips (used by js/options-layer.js). */
    /* =====================================================================
       THEMED SELECTORS (additive, CSS only). Dropdown = HUD listbox / mobile bottom sheet,
       small option sets = chip rails. Tokens only, so Midnight + Matinee both work.
       The native <select> stays in the DOM (visually hidden) and keeps its id + events.
       ===================================================================== */
    .tsel-native {
      position: absolute !important; width: 1px !important; height: 1px !important;
      margin: -1px !important; padding: 0 !important; border: 0 !important;
      overflow: hidden !important; clip: rect(0 0 0 0) !important; opacity: 0 !important; pointer-events: none !important;
    }
    .tsel { position: relative; min-width: 0; }
    html[data-theme] .tsel-label {
      font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.12em;
      text-transform: uppercase; color: var(--text-dim); display: flex; align-items: center; gap: 6px;
    }
    html[data-theme] .tsel-label::before { content: '◈'; color: var(--accent-4); font-size: 10px; }

    /* ---- dropdown button ---- */
    html[data-theme] .tsel-btn {
      width: 100%; min-height: 44px; display: flex; align-items: center; gap: 10px;
      padding: 9px 12px; text-align: left; cursor: pointer;
      background-color: var(--field); color: var(--text);
      border: var(--border-w) solid var(--border-color); border-radius: 14px;
      font: 600 13.5px/1.25 var(--font-body);
    }
    html[data-theme] .tsel-btn .tsel-glyph { font-family: var(--font-mono); font-size: 11px; color: var(--accent-4); flex: none; }
    html[data-theme] .tsel-btn .tsel-val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    html[data-theme] .tsel-btn .tsel-caret { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); flex: none; transition: transform 300ms var(--ease); }
    html[data-theme] .tsel-btn[aria-expanded="true"] .tsel-caret { transform: rotate(180deg); }
    html[data-theme] .tsel-btn:hover { border-color: var(--primary-line); }
    html[data-theme] .tsel-btn:focus-visible, html[data-theme] .tsel-btn[aria-expanded="true"] {
      border-color: var(--focus); background-color: var(--field-focus);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 22%, transparent);
    }
    html[data-theme="matinee"] .tsel-btn { box-shadow: 2px 2px 0 #111315; }
    html[data-theme="matinee"] .tsel-btn:active, html[data-theme="matinee"] .tsel-btn[aria-expanded="true"] { transform: translate(2px, 2px); box-shadow: 0 0 0 #111315; }
    html[data-theme="matinee"] .tsel-btn .tsel-glyph { color: var(--accent-1); }

    /* ---- chip rails ---- */
    .tchips { display: flex; flex-wrap: wrap; gap: 8px; }
    .tchips--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); }
    html[data-theme] .tchip {
      min-height: 40px; padding: 8px 12px; cursor: pointer;
      display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px;
      background-color: var(--field); color: var(--text);
      border: var(--border-w) solid var(--border-color); border-radius: 12px;
      font: 600 11.5px/1.15 var(--font-mono); letter-spacing: 0.05em; text-align: left;
    }
    .tchips--grid .tchip { align-items: center; text-align: center; }
    html[data-theme] .tchip .tchip-sub { font: 500 9.5px/1.2 var(--font-mono); letter-spacing: 0.04em; text-transform: none; color: var(--text-dim); }
    .tchips--compact .tchip-sub { display: none; }
    html[data-theme] .tchip:hover { border-color: var(--primary-line); }
    html[data-theme] .tchip[aria-checked="true"] { background-color: var(--thumb); border-color: var(--thumb-line); color: var(--thumb-ink); }
    html[data-theme] .tchip[aria-checked="true"] .tchip-sub { color: inherit; opacity: 0.8; }
    html[data-theme="midnight"] .tchip[aria-checked="true"] { box-shadow: var(--chip-shadow); }
    html[data-theme="matinee"] .tchip { box-shadow: 2px 2px 0 #111315; }
    html[data-theme="matinee"] .tchip[aria-checked="true"] { transform: translate(2px, 2px); box-shadow: 0 0 0 #111315; }

    /* ---- field tiles in the Share form + editor modal (match the Browse filter tiles) ---- */
    html[data-theme] #uploadForm .grid > div:has(> .tsel),
    html[data-theme] #modalEditorBlock .grid > div:has(> .tsel) {
      background-color: var(--surface-2); border: 1px solid var(--border-color);
      border-radius: var(--r-tile); padding: 10px 12px 12px;
    }
    html[data-theme] #uploadForm .grid > div:has(> .tsel):focus-within,
    html[data-theme] #modalEditorBlock .grid > div:has(> .tsel):focus-within {
      border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 18%, transparent);
    }
    html[data-theme] #uploadForm .grid > div:has(> .tsel) > .tsel-label,
    html[data-theme] #modalEditorBlock .grid > div:has(> .tsel) > .tsel-label { margin-bottom: 6px; }
    html[data-theme] #modalEditorBlock .tsel-label { font-size: 10px; font-weight: 600; }

    /* ---- shared panel (dropdown on desktop, bottom sheet on phones) ---- */
    #tselScrim { position: fixed; inset: 0; z-index: 9998; background: var(--overlay); display: none; }
    #tselScrim.on { display: block; }
    #tselPanel {
      position: fixed; z-index: 9999; display: none; flex-direction: column;
      background-color: var(--surface-solid); color: var(--text);
      border: var(--border); border-radius: 18px; overflow: hidden;
      box-shadow: var(--shadow-hover);
    }
    #tselPanel.on { display: flex; animation: tselIn 220ms var(--ease) both; }
    @keyframes tselIn { from { opacity: 0; transform: translateY(8px) scale(0.985); } to { opacity: 1; transform: none; } }
    #tselPanel .tsel-head {
      display: flex; align-items: center; justify-content: space-between; gap: 10px;
      padding: 10px 12px 8px 14px; border-bottom: 1px solid var(--border-color);
      font: 600 10px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--eyebrow);
    }
    #tselPanel .tsel-x {
      width: 32px; height: 32px; border-radius: 10px; cursor: pointer; flex: none;
      background: var(--surface-2); color: var(--text-dim); border: 1px solid var(--border-color); font-size: 12px;
    }
    #tselPanel .tsel-list { overflow-y: auto; padding: 6px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
    #tselPanel .tsel-item {
      width: 100%; min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 8px 10px;
      border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--text);
      font: 600 13.5px/1.25 var(--font-body); text-align: left; cursor: pointer;
    }
    #tselPanel .tsel-item .tsel-g { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); flex: none; width: 14px; text-align: center; }
    #tselPanel .tsel-item .tsel-t { flex: 1; min-width: 0; }
    #tselPanel .tsel-item .tsel-s { display: block; margin-top: 2px; font: 500 10px/1.2 var(--font-mono); letter-spacing: 0.04em; color: var(--text-dim); }
    #tselPanel .tsel-item:hover, #tselPanel .tsel-item:focus-visible { background-color: var(--primary-soft); border-color: var(--primary-line); outline: none; }
    #tselPanel .tsel-item[aria-selected="true"] { background-color: var(--thumb); border-color: var(--thumb-line); color: var(--thumb-ink); }
    #tselPanel .tsel-item[aria-selected="true"] .tsel-g { color: inherit; }
    #tselPanel .tsel-item[aria-selected="true"] .tsel-s { color: inherit; opacity: 0.8; }
    html[data-theme="matinee"] #tselPanel .tsel-item:hover, html[data-theme="matinee"] #tselPanel .tsel-item:focus-visible { background-color: #FEF3C7; border-color: #111315; }
    html[data-theme="matinee"] #tselPanel .tsel-item[aria-selected="true"]:hover { background-color: #111315; }
    @media (max-width: 639px) {
      #tselPanel {
        left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; width: auto !important;
        max-height: 72vh; border-radius: 22px 22px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px);
      }
      #tselPanel.on { animation-name: tselSheet; }
      #tselPanel .tsel-list { max-height: 56vh; }
      .tchip { min-height: 44px; }
    }
    @keyframes tselSheet { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
    @media (prefers-reduced-motion: reduce) {
      #tselPanel.on { animation: none; }
      html[data-theme] .tsel-btn .tsel-caret { transition: none; }
    }
    @media (min-width: 640px) { #tselScrim { background: transparent; } }