/* ════════════════════════════════════════════════════════════════════════
   queue.css — The Queue page (2026-06 redesign)
   ────────────────────────────────────────────────────────────────────────
   A shared "stuff we want to watch" ledger. Two jobs: easy IN, fast SCAN.
   Structure map:
     .q-page                       page shell
       .q-head                     title row + count
       .q-addbox                   full-width TMDB search add box
         .q-add-results            live result rows
       .q-bar                      filter (left) + sort (right) row
         .q-filter / .q-sort       toggle buttons
       #queue-page-list            section host
         .q-section                one section (header + rows / cluster)
           .q-section-head         glyph + label + optional VIEW ALL
           .q-row                  the 44px ledger row
             .q-rail               3px adder-accent rail
             .q-thumb              27x38 poster
             .q-rowmain            title + meta
             .q-dots               "I'm in" accent dots
             .q-avail              availability badge
           .q-fade-cluster         collapsed FADING preview
           .q-cleared-strip        collapsed CLEARED scroller
   Typography (three voices): Cinzel = page title, Spectral = item titles,
   Share Tech Mono = all meta/labels. No inline styles in JS.
   ════════════════════════════════════════════════════════════════════════ */

@layer features {

  /* Queue-scoped tokens. "Next episode" progress is sage; system color, so a
     token rather than a per-row hex. Accent (who) stays data-driven inline. */
  .q-page {
    --q-sage: #7faa7f;
    --q-stream: #7fb4dd;
    --q-row-h: 3.3rem;            /* ~44px + 20% */
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 0.75rem 4rem;
  }

  /* ── Header ───────────────────────────────────────────────────────────── */
  .q-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0 1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--gold) 22%, transparent);
    margin-bottom: 1.125rem;
  }
  .q-head-title {
    font-family: var(--font-occult);
    font-weight: 700;
    font-size: 1.625rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--gold);
    text-shadow: 0 0 24px color-mix(in srgb, var(--gold) 35%, transparent);
  }
  .q-head-count {
    font-family: var(--font-vhs);
    font-size: 0.6875rem;
    letter-spacing: 2px;
    color: var(--gold-pale);
    white-space: nowrap;
    opacity: 0.85;
  }

  /* ── Add box ──────────────────────────────────────────────────────────── */
  .q-addbox { position: relative; margin-bottom: 1rem; }
  .q-addbox-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.75rem 0.875rem 0.75rem 2.25rem;
    background: var(--chamber);
    border: 1px solid var(--border-bright);
    border-radius: 8px;
    color: var(--static);
    font-family: var(--font-grimoire);
    font-size: 0.9375rem;
    outline: none;
    transition: border-color 0.2s;
  }
  .q-addbox-input:focus { border-color: var(--gold); }
  .q-addbox-rune {
    position: absolute;
    left: 0.75rem; top: 0.8125rem;
    color: var(--dust);
    font-family: var(--font-vhs);
    font-size: 0.875rem;
    pointer-events: none;
  }
  .q-add-results {
    margin-top: 0.375rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }
  .q-add-results:empty { display: none; }
  .q-add-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.4375rem 0.5rem;
    background: var(--deep);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.12s;
  }
  .q-add-row:hover { border-color: var(--border-bright); }
  .q-add-thumb {
    width: 30px; height: 44px;
    object-fit: cover;
    border-radius: 3px;
    flex-shrink: 0;
    background: var(--chamber);
  }
  .q-add-info { flex: 1; min-width: 0; }
  .q-add-title {
    font-family: var(--font-literary);
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--static);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .q-add-meta {
    font-family: var(--font-vhs);
    font-size: 0.5625rem;
    letter-spacing: 1px;
    color: var(--dust);
    margin-top: 0.0625rem;
  }
  .q-add-go {
    flex-shrink: 0;
    font-family: var(--font-vhs);
    font-size: 0.625rem;
    letter-spacing: 1px;
    color: var(--gold);
    border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
    border-radius: 999px;
    padding: 0.1875rem 0.5rem;
  }

  /* ── Filter + sort bar ────────────────────────────────────────────────── */
  .q-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
  }
  .q-bar-group { display: flex; gap: 0.375rem; flex-wrap: wrap; }
  .q-chip {
    font-family: var(--font-vhs);
    font-size: 0.625rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--dust);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.3125rem 0.625rem;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
  }
  .q-chip:hover { border-color: var(--border-bright); color: var(--fog); }
  .q-chip.active {
    color: var(--gold);
    border-color: color-mix(in srgb, var(--gold) 45%, transparent);
    background: color-mix(in srgb, var(--gold) 8%, transparent);
  }

  /* ── Section ──────────────────────────────────────────────────────────── */
  .q-section { margin-bottom: 1.75rem; }
  .q-section-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.625rem;
    padding-bottom: 0.4375rem;
    border-bottom: 1px solid color-mix(in srgb, var(--gold) 16%, transparent);
  }
  .q-section-glyph { color: var(--gold-pale); font-size: 0.8125rem; }
  .q-section-label {
    font-family: var(--font-vhs);
    font-size: 0.6875rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--static);
  }
  .q-section-n {
    font-family: var(--font-vhs);
    font-size: 0.5625rem;
    letter-spacing: 0.5px;
    color: var(--gold-pale);
    background: color-mix(in srgb, var(--gold) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--gold) 22%, transparent);
    border-radius: 999px;
    padding: 0.0625rem 0.4375rem;
  }
  .q-section-more {
    margin-left: auto;
    font-family: var(--font-vhs);
    font-size: 0.5625rem;
    letter-spacing: 1px;
    color: var(--gold);
    cursor: pointer;
    border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
    border-radius: 999px;
    padding: 0.125rem 0.5rem;
  }
  .q-section-more:hover { background: color-mix(in srgb, var(--gold) 10%, transparent); }
  /* Per-section rune colors (occult identity: started=gold, new=blood, cleared=sage) */
  .q-section.started .q-section-glyph { color: var(--gold); }
  .q-section.new .q-section-glyph { color: var(--blood-bright); }
  .q-section.cleared .q-section-glyph { color: var(--q-sage); }
  .q-section.fading .q-section-head { border-bottom-color: color-mix(in srgb, var(--blood) 14%, transparent); }
  .q-section.fading .q-section-label { color: var(--dust); }
  .q-section.fading .q-section-n {
    color: var(--dust);
    background: rgba(255,255,255,0.03);
    border-color: var(--border);
  }

  .q-rows { display: flex; flex-direction: column; gap: 0.375rem; }

  /* ── Row ── fixed-column grid so thumb / title / dots / availability all
     line up vertically down the whole list. Columns:
       [thumb 32px] [title+meta 1fr] [interest dots] [availability]
     The accent rail is an absolute full-height strip flush to the left edge. */
  .q-row {
    position: relative;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 5.5rem 13rem;
    align-items: center;
    gap: 0.75rem;
    min-height: var(--q-row-h);
    padding: 0.3125rem 0.875rem 0.3125rem 0.9375rem;
    background:
      linear-gradient(90deg, color-mix(in srgb, var(--m-accent, var(--picker-default)) 9%, transparent), transparent 38%),
      rgba(18, 12, 28, 0.55);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.14s, background 0.14s;
  }
  .q-row:hover {
    border-color: color-mix(in srgb, var(--m-accent, var(--gold)) 45%, var(--border));
    background:
      linear-gradient(90deg, color-mix(in srgb, var(--m-accent, var(--picker-default)) 14%, transparent), transparent 42%),
      rgba(24, 16, 36, 0.7);
  }
  .q-rail {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--m-accent, var(--picker-default));
    box-shadow: 0 0 10px color-mix(in srgb, var(--m-accent, var(--picker-default)) 45%, transparent);
  }
  @media (max-width: 760px) {
    .q-row { grid-template-columns: 28px minmax(0, 1fr) 3.75rem 6rem; gap: 0.5rem; }
  }
  .q-thumb {
    width: 32px; height: 46px;
    object-fit: cover;
    border-radius: 2px;
    flex-shrink: 0;
    background: var(--deep);
  }
  .q-thumb-ph {
    width: 32px; height: 46px;
    border-radius: 2px;
    flex-shrink: 0;
    background: var(--deep);
    display: flex; align-items: center; justify-content: center;
    color: var(--border-bright);
    font-size: 0.875rem;
  }
  .q-rowmain { flex: 1; min-width: 0; }
  .q-rowtitle {
    font-family: var(--font-literary);
    font-weight: 600;
    font-size: 0.9375rem;
    color: #e8dcc8;
    line-height: 1.25;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .q-rowmeta {
    font-family: var(--font-vhs);
    font-size: 0.6875rem;
    letter-spacing: 0.5px;
    color: var(--dust);
    margin-top: 0.125rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .q-next { color: var(--q-sage); text-shadow: 0 0 10px color-mix(in srgb, var(--q-sage) 35%, transparent); }
  .q-newtag {
    display: inline-block;
    margin-left: 0.4375rem;
    font-family: var(--font-vhs);
    font-size: 0.5rem;
    letter-spacing: 1px;
    color: var(--blood-bright);
    border: 1px solid color-mix(in srgb, var(--blood-bright) 40%, transparent);
    background: color-mix(in srgb, var(--blood-bright) 12%, transparent);
    border-radius: 3px;
    padding: 0.0625rem 0.3125rem;
    vertical-align: middle;
  }

  /* dots — one per interested member, glowing in their accent color */
  .q-dots {
    display: flex;
    align-items: center;
    gap: 0.3125rem;
    flex-shrink: 0;
  }
  .q-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--d-accent, var(--picker-default));
    box-shadow: 0 0 7px color-mix(in srgb, var(--d-accent, var(--picker-default)) 55%, transparent);
  }

  /* availability — owner names as accent chips (person signal), far right */
  .q-avail {
    flex-shrink: 0;
    min-width: 5rem;
    max-width: 17rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.25rem 0.3125rem;
    font-family: var(--font-vhs);
    font-size: 0.625rem;
    letter-spacing: 0.5px;
    text-align: right;
  }
  .q-avail-owner {
    display: inline-flex;
    align-items: center;
    color: var(--o-accent, var(--gold-pale));
    border: 1px solid color-mix(in srgb, var(--o-accent, var(--gold)) 30%, transparent);
    background: color-mix(in srgb, var(--o-accent, var(--gold)) 9%, transparent);
    border-radius: 999px;
    padding: 0.0625rem 0.4375rem;
    white-space: nowrap;
  }
  .q-avail-more { color: var(--dust); align-self: center; }
  .q-avail-stream {
    display: inline-flex;
    align-items: center;
    color: var(--q-stream);
    border: 1px solid color-mix(in srgb, var(--q-stream) 30%, transparent);
    background: color-mix(in srgb, var(--q-stream) 9%, transparent);
    border-radius: 999px;
    padding: 0.0625rem 0.4375rem;
    white-space: nowrap;
  }
  .q-avail-none { color: var(--border-bright); }

  /* ── Fading cluster ───────────────────────────────────────────────────── */
  .q-section.fading .q-rows { opacity: 0.4; transition: opacity 0.2s; }
  .q-section.fading.open .q-rows { opacity: 0.85; }
  /* expanded body: clickable full-height rail on the left collapses the section */
  .q-fade-body { display: flex; align-items: stretch; gap: 0.5rem; }
  .q-fade-body .q-rows { flex: 1; min-width: 0; }
  .q-fade-closerail {
    flex-shrink: 0;
    width: 1.125rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--blood) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--blood) 25%, transparent);
    cursor: pointer;
    transition: background 0.14s, border-color 0.14s;
  }
  .q-fade-closerail:hover {
    background: color-mix(in srgb, var(--blood-bright) 24%, transparent);
    border-color: var(--blood-bright);
  }
  .q-fade-closehint {
    position: sticky;
    top: 45vh;
    display: block;
    text-align: center;
    font-family: var(--font-vhs);
    font-size: 0.5625rem;
    line-height: 1.2;
    letter-spacing: 0.5px;
    color: var(--blood-bright);
    padding: 0.375rem 0;
    pointer-events: none;
  }
  .q-morerow {
    padding: 0.5rem 0.875rem;
    font-family: var(--font-vhs);
    font-size: 0.5625rem;
    letter-spacing: 1.5px;
    color: var(--dust);
    text-align: center;
    border: 1px dashed var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.14s, color 0.14s;
  }
  .q-morerow:hover { border-color: var(--border-bright); color: var(--fog); }

  /* ── Cleared strip ────────────────────────────────────────────────────── */
  .q-cleared-strip {
    font-family: var(--font-vhs);
    font-size: 0.5625rem;
    letter-spacing: 0.5px;
    color: var(--fog);
    white-space: nowrap;
    overflow-x: auto;
    padding: 0.5rem 0.625rem;
    background: rgba(18, 12, 28, 0.4);
    border: 1px solid var(--border);
    border-radius: 8px;
  }
  .q-cleared-strip.collapsed { display: none; }
  .q-cleared-item { margin-right: 1.25rem; color: color-mix(in srgb, var(--q-sage) 70%, var(--fog)); }
  .q-cleared-item .q-cleared-date { color: var(--dust); }

  /* ── Empty ────────────────────────────────────────────────────────────── */
  .q-empty {
    text-align: center;
    padding: 3rem 1rem;
    font-family: var(--font-vhs);
    font-size: 0.6875rem;
    letter-spacing: 1px;
    color: var(--dust);
  }

  /* ── Detail sheet ─────────────────────────────────────────────────────── */
  .q-detail-poster {
    width: 120px; height: 180px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--deep);
    flex-shrink: 0;
  }
  .q-detail-head { display: flex; gap: 1rem; margin-bottom: 1rem; }
  .q-detail-title {
    font-family: var(--font-occult);
    font-size: 1.125rem;
    color: var(--gold-pale);
    margin-bottom: 0.375rem;
  }
  .q-detail-meta {
    font-family: var(--font-vhs);
    font-size: 0.625rem;
    letter-spacing: 1px;
    color: var(--dust);
    margin-bottom: 0.5rem;
  }
  .q-detail-imin {
    display: inline-flex; align-items: center; gap: 0.375rem;
    font-family: var(--font-vhs);
    font-size: 0.6875rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    border: 1px solid var(--border-bright);
    border-radius: 999px;
    padding: 0.375rem 0.75rem;
    color: var(--fog);
    transition: all 0.15s;
  }
  .q-detail-imin.on {
    color: var(--gold);
    border-color: color-mix(in srgb, var(--gold) 50%, transparent);
    background: color-mix(in srgb, var(--gold) 10%, transparent);
  }
}