/* ==========================================================================
   Princess & Paladin — tracker cards
   Shared by /side-quests/couch-quest.html and /side-quests/spooky-quest.html

   These two pages are the same tracker with different subject matter, so the
   card, filter, form and detail styling lives here instead of twice over.
   Colors come from the folder accent in pp.css, so Couch Quest reads dusk
   and Spooky Quest reads pumpkin without either page overriding anything.

   Load it after pp.css:
     <link rel="stylesheet" href="/assets/pp.css">
     <link rel="stylesheet" href="/assets/pp-tracker.css">
   ========================================================================== */

:root{
  /* the two colours the tracker needs that aren't in pp.css */
  --family:  #5A8A7A;
  --unavail: #4A4441;   /* nothing we have — the pill and the line beneath */
}

.cq-bar .cq-spacer{ flex:1 1 auto; }

  .cq-filter{
    font-family:var(--font-body); font-size:.74rem; font-weight:500;
    letter-spacing:.1em; text-transform:uppercase; color:var(--gold);
    background:var(--panel); border:1px solid var(--line-gold);
    border-radius:999px; padding:7px 15px; cursor:pointer;
    transition:color .15s ease, background .15s ease, border-color .15s ease;
  }
  .cq-filter:hover{ color:#fff; background:var(--pink); border-color:var(--pink); }
  .cq-filter[aria-pressed="true"]{ color:#fff; background:var(--sage); border-color:var(--sage); }

  .cq-selects{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:16px; }
  .cq-pick{ display:flex; align-items:center; gap:6px; }
  .cq-pick label{
    font-family:var(--font-body); font-size:.66rem; font-weight:600;
    letter-spacing:.12em; text-transform:uppercase; color:var(--gold);
  }
  .cq-pick select{
    font-family:var(--font-body); font-size:.84rem; color:var(--ink);
    background:var(--panel); border:1px solid var(--line-gold);
    border-radius:999px; padding:6px 12px; cursor:pointer;
  }
  .cq-pick select:focus{ outline:2px solid var(--pink); outline-offset:1px; }
  .cq-reset{
    font-family:var(--font-serif); font-style:italic; font-size:.88rem;
    color:var(--ink-soft); background:none; border:0; cursor:pointer; padding:4px 2px;
  }
  .cq-reset:hover{ color:var(--burgundy); }

  .cq-count{ font-family:var(--font-serif); font-style:italic; font-size:.95rem; color:var(--ink-soft); }
  .cq-sync{ font-family:var(--font-body); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }
  .cq-sync[data-state="saving"]{ color:var(--gold); }
  .cq-sync[data-state="error"]{ color:var(--blade); }
  .cq-form.open, .cq-detail.open{ display:block; }

  .cq-fields{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  .cq-field{ display:flex; flex-direction:column; gap:5px; min-width:0; }
  .cq-field.wide{ grid-column:1 / -1; }
  .cq-field.hidden{ display:none; }

  .cq-field label{
    font-family:var(--font-body); font-size:.72rem; font-weight:600;
    letter-spacing:.12em; text-transform:uppercase; color:var(--gold);
  }
  .cq-field input, .cq-field select{
    font-family:var(--font-body); font-size:.95rem; color:var(--ink);
    background:#fff; border:1px solid var(--line);
    border-radius:var(--radius-sm); padding:9px 12px; width:100%;
  }
  .cq-field input:focus, .cq-field select:focus{ outline:2px solid var(--pink); outline-offset:1px; }

  .cq-hint{ font-family:var(--font-serif); font-style:italic; font-size:.85rem; color:var(--ink-soft); }
  .cq-inline{ display:flex; gap:8px; align-items:flex-start; }
  .cq-inline input{ flex:1 1 auto; }

  .cq-results{ display:none; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:10px; margin-top:12px; }
  .cq-results.open{ display:grid; }
  .cq-result{
    text-align:left; padding:0; overflow:hidden; cursor:pointer;
    background:var(--panel); border:1px solid var(--line);
    border-radius:var(--radius-sm); transition:border-color .15s ease, transform .15s ease;
  }
  .cq-result:hover{ border-color:var(--pink); transform:translateY(-2px); }
  .cq-result img{ width:100%; aspect-ratio:2/3; object-fit:cover; display:block; background:var(--parchment); }
  .cq-rname{ font-family:var(--font-serif); font-weight:600; font-size:.86rem; line-height:1.2; padding:7px 8px 2px; color:var(--ink); }
  .cq-rmeta{ font-family:var(--font-body); font-size:.7rem; color:var(--ink-soft); padding:0 8px 8px; }

  .cq-tagpick{ display:flex; flex-wrap:wrap; gap:6px; }
  .cq-tagpick button{
    font-family:var(--font-body); font-size:.74rem; color:var(--ink-soft);
    background:var(--parchment); border:1px solid var(--parchment-border);
    border-radius:999px; padding:4px 11px; cursor:pointer;
  }
  .cq-tagpick button[aria-pressed="true"]{ color:#fff; background:var(--sage); border-color:var(--sage); }

  .cq-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
  .cq-detail-head img{ width:84px; aspect-ratio:2/3; object-fit:cover; border-radius:var(--radius-sm); flex-shrink:0; background:var(--parchment); }
  .cq-detail-head h2{ margin:0 0 4px; font-size:1.5rem; }
  .cq-detail-meta{ font-family:var(--font-serif); font-style:italic; color:var(--ink-soft); margin:0 0 10px; }

  .cq-block{ padding:14px 0; border-top:1px solid var(--line); }
  .cq-block:first-child{ border-top:0; }
  .cq-block-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:9px; }
  .cq-block-name{ font-family:var(--font-body); font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); }
  .cq-block-count{ font-family:var(--font-serif); font-style:italic; font-size:.9rem; color:var(--ink-soft); }

  .cq-step{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-top:10px; }
  .cq-step button{
    font-family:var(--font-body); font-size:.78rem; font-weight:500;
    min-width:34px; height:30px; padding:0 10px; line-height:1;
    color:var(--gold); background:var(--panel); border:1px solid var(--line-gold);
    border-radius:999px; cursor:pointer;
  }
  .cq-step button:hover{ color:#fff; background:var(--pink); border-color:var(--pink); }
  .cq-step input{
    font-family:var(--font-body); font-size:.9rem; width:70px; text-align:center;
    color:var(--ink); background:#fff; border:1px solid var(--line);
    border-radius:var(--radius-sm); padding:6px 8px;
  }
  .cq-check-label{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: .9rem;
    color: var(--ink);
    cursor: pointer;
    user-select: none;
  }
  .cq-check-label input[type="checkbox"]{
    width: 16px; height: 16px;
    accent-color: var(--pink);
    cursor: pointer;
  }
  .cq-stream{
    font-family: var(--font-body);
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: #fff;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 2px 6px;
    white-space: nowrap;
  }
  .cq-stream[data-sub="false"]::after{ content: " ✦"; font-size: .6rem; }
  .cq-subs.open{ display:block; }
  .cq-subs .cq-tagpick button{
    color: #fff;
    border-color: transparent;
    opacity: .38;
    filter: grayscale(.6);
  }
  .cq-subs .cq-tagpick button[aria-pressed="true"]{
    opacity: 1;
    filter: none;
  }
  .cq-subs .cq-tagpick button[data-light="true"]{ color: var(--ink); }
  .cq-dates label{
    font-family: var(--font-body);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gold);
  }
  .cq-dates input[type="date"]{
    font-family: var(--font-body);
    font-size: .84rem;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 5px 9px;
  }
  .cq-dates input[type="date"]:focus{ outline: 2px solid var(--pink); outline-offset: 1px; }
  .cq-dates .cq-dateclear{
    font-family: var(--font-serif);
    font-style: italic;
    font-size: .84rem;
    color: var(--ink-soft);
    background: none;
    border: 0;
    cursor: pointer;
    padding: 4px 2px;
  }
  .cq-dates .cq-dateclear:hover{ color: var(--burgundy); }

  .cq-ep-count{
    font-family: var(--font-serif);
    font-style: italic;
    font-size: .9rem;
    color: var(--ink);
    background: transparent;
    border: 0;
    border-bottom: 1px dashed var(--line-strong);
    border-radius: 0;
    width: 2.6em;
    text-align: center;
    padding: 0 2px;
  }
  .cq-ep-count:focus{ outline: none; border-bottom-color: var(--pink); }

  .cq-step .cq-steplabel{ font-family:var(--font-serif); font-style:italic; font-size:.86rem; color:var(--ink-soft); }
  @media (max-width:900px){ .cq-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
  @media (max-width:700px){ .cq-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

  .cq-card{
    position:relative; display:flex; flex-direction:column; padding:0; overflow:hidden;
    border-radius:var(--radius-sm); background:var(--panel); border:1px solid var(--line);
    box-shadow:var(--lift); transition:transform .18s ease, box-shadow .18s ease;
  }
  .cq-card:hover{ transform:translateY(-3px); box-shadow:var(--lift-lg); }
  .cq-card.is-done{ opacity:.62; }

  .cq-posterwrap{ position:relative; cursor:pointer; }
  .cq-poster{ aspect-ratio:2/3; width:100%; object-fit:cover; display:block; background:var(--parchment); }
  .cq-poster-none{
    aspect-ratio:2/3; display:flex; align-items:center; justify-content:center;
    padding:14px; text-align:center;
    background:radial-gradient(ellipse at 30% 25%,rgba(156,116,64,.14),transparent 60%),var(--parchment);
    font-family:var(--font-serif); font-style:italic; font-size:.95rem;
    color:var(--gold-deep); line-height:1.3;
  }
  .cq-ring{ position:absolute; bottom:7px; right:7px; background:rgba(255,253,248,.92); border-radius:50%; padding:3px; }
  .cq-who[data-who="danni"]{    color:#fff;        background:var(--pink); }
  .cq-who[data-who="brendon"]{  color:#fff;        background:var(--blade); }
  .cq-who[data-who="family"]{   color:#fff;        background:var(--family); }

  .cq-body{ padding:11px 12px 13px; display:flex; flex-direction:column; gap:7px; }
  .cq-name{ font-family:var(--font-serif); font-weight:600; font-size:1rem; line-height:1.2; margin:0; color:var(--ink); word-break:break-word; }
  .cq-where{ font-family:var(--font-serif); font-style:italic; font-size:.85rem; color:var(--ink-soft); }

  .cq-meta{ display:flex; flex-wrap:wrap; gap:5px; align-items:center; }

  .cq-status{
    font-family:var(--font-body); font-size:.68rem; font-weight:600;
    letter-spacing:.1em; text-transform:uppercase; color:#fff; border:none;
    border-radius:999px; padding:4px 11px; cursor:pointer;
  }
  .cq-status[data-status="want"]{ background:var(--gold); }
  .cq-status[data-status="watching"]{ background:var(--pink); }
  .cq-status[data-status="watched"]{ background:var(--sage-deep); }

  .cq-pri{
    font-family:var(--font-body); font-size:.66rem; font-weight:600;
    letter-spacing:.08em; text-transform:uppercase;
    border-radius:999px; padding:3px 9px; border:1px solid transparent;
  }
  .cq-pri[data-tier="high"]{ color:#fff; background:var(--burgundy); }
  .cq-pri[data-tier="mid"]{ color:var(--gold-deep); background:var(--parchment); border-color:var(--parchment-border); }
  .cq-pri[data-tier="low"]{ color:var(--ink-soft); background:rgba(46,36,31,.07); }

  .cq-tags{ display:flex; flex-wrap:wrap; gap:4px; }
  .cq-tags span{
    font-family:var(--font-body); font-size:.68rem; color:var(--ink-soft);
    background:rgba(46,36,31,.07); border-radius:999px; padding:2px 8px;
  }

  .cq-tools{ position:absolute; top:7px; right:7px; display:flex; gap:5px; opacity:0; transition:opacity .15s ease; }
  .cq-card:hover .cq-tools, .cq-card:focus-within .cq-tools{ opacity:1; }
  .cq-tools button{
    width:26px; height:26px; display:flex; align-items:center; justify-content:center;
    font-size:.8rem; color:var(--ink); background:rgba(255,253,248,.94);
    border:1px solid var(--line); border-radius:999px; cursor:pointer; line-height:1;
  }
  .cq-tools button:hover{ color:#fff; background:var(--burgundy); border-color:var(--burgundy); }
  @media (hover:none){ .cq-tools{ opacity:1; } }

  @media (max-width:560px){
    .cq-fields{ grid-template-columns:1fr; }
    .cq-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
    .cq-selects{ gap:8px; }
  }

  /* --- unavailable ---
     Shown when none of the services a title is on are ones we have. The pill
     sits at the top RIGHT of the poster, opposite the who badge. The line
     under the title picks up the same grey so the two read as a pair.

     The edit tools live in that corner too, but they're hidden until you
     hover the card — so the pill steps aside on hover and the two never
     overlap. Where hover doesn't exist the tools are always shown, so there
     the pill drops to a second row beneath them instead. */
  .cq-unavail{
    position:absolute; top:7px; right:7px; left:auto; transform:none;
    transition:opacity .15s ease;
    font-family:var(--font-body); font-size:.6rem; font-weight:700;
    letter-spacing:.1em; text-transform:uppercase;
    color:#fff; background:var(--unavail);
    border:1px solid transparent; border-radius:999px;
    padding:3px 10px; white-space:nowrap;
  }
  .cq-card:hover .cq-unavail,
  .cq-card:focus-within .cq-unavail{ opacity:0; }

  @media (hover:none){
    .cq-unavail{ top:40px; opacity:1; }
    .cq-card:hover .cq-unavail,
    .cq-card:focus-within .cq-unavail{ opacity:1; }
  }

  .cq-card.is-unavail .cq-where,
  .cq-card.is-unavail .cq-dateline{ color:var(--unavail); }

  /* --- rentable on Amazon ---
     Sits under the Unavailable sash, only when a title we don't have on any
     subscribed service can still be rented or bought on Amazon. */
  .cq-amazon{
    display:inline-block;
    font-family:var(--font-body); font-size:.64rem; font-weight:600;
    letter-spacing:.06em; text-transform:uppercase;
    color:#fff; background:var(--gold-deep);
    border-radius:999px; padding:3px 9px;
    margin:0 0 2px;
  }

  /* --- season cards (Couch Quest) ---
     A show is a framed group: its own card first, carrying the overall
     progress, then one card per season. The group spans as many columns as
     it has cards and borrows the grid's own columns (subgrid), so a season
     card is exactly as wide as any other card. Past the column count it
     wraps inside the frame. `dense` lets a film tuck into the gap a group
     leaves at the end of a row instead of leaving a hole. */
  .cq-grid.has-shows{ gap:22px 18px; grid-auto-flow:row dense; align-items:start; }

  .cq-show{
    display:grid; grid-template-columns:subgrid; row-gap:22px; align-items:start;
    margin:-8px; padding:8px;
    background:rgba(156,116,64,.07);
    border:1px solid var(--line-gold);
    border-radius:calc(var(--radius-sm) + 8px);
  }
  /* how many columns a group spans is set inline by render(), from the
     grid's live column count, so it can never ask for more than exist */

  .cq-showcard .cq-status{ cursor:default; }
  .cq-showcard .pp-progress{ margin:2px 0 1px; }

  .cq-season .cq-name{ font-size:.95rem; }
  .cq-seasontag{
    position:absolute; top:7px; left:7px;
    font-family:var(--font-body); font-size:.62rem; font-weight:700; letter-spacing:.08em;
    color:var(--ink); background:rgba(255,253,248,.94);
    border:1px solid var(--line-gold); border-radius:999px; padding:3px 8px;
  }

  /* the status pill that sits beside a season's name in the detail panel */
  .cq-block-name .cq-status{ margin-left:8px; vertical-align:1px; }

  /* the season you opened the detail panel from */
  .cq-block.is-flash{ animation:cq-flash 1.6s ease-out; }
  @keyframes cq-flash{
    0%, 30%{ background:var(--panel-tint); box-shadow:0 0 0 8px var(--panel-tint); }
    100%   { background:transparent;       box-shadow:0 0 0 8px transparent; }
  }