/* THE WATCHLIST ROOM — the Watchlist page (view-watchlist): the people who know
   you, tonight's catalogue tiles, the lists rail and the setup card. Moved out of
   app.css on 15 Oct as part of the rebuild; same pixels. Loaded straight after
   app.css (see room-css in index.html). The classes the Sports page, the Markets
   editor and the Media front page also draw with — .wl-panel*, .wl-card*,
   .wl-acts, .wl-grid, .wl-empty, .wl-small, .wl-basis, .wl-service*, .wl-pick*
   and .wl-why — stay in app.css. The dead .wl-row, .wl-row-poster, .wl-row-main,
   .wl-row-title and .wl-mine rules (nothing draws them) were dropped in the move. */

  /* THE RECEIPT, UNDERNEATH THE PROPOSAL, ALWAYS. A proposal with no sentence
     behind it is a guess wearing a fact's clothing — sql/watchlist.sql says so
     in those words — and behind a chevron it may as well not be there, because
     the moment he decides yes or no is this one. */
  .wl-evidence{ font-size:var(--type-body); color:var(--text-dim); line-height:1.6; margin-top:var(--space-2);
    padding-left:var(--space-3); border-left:2px solid var(--glass-border-hi); }
  .wl-evidence-when{ display:block; font-size:var(--type-label); color:var(--text-faint); margin-top:var(--space-1); }

  .wl-tile{ border:1px solid var(--glass-border); border-radius:var(--radius-card); background:var(--glass-bg);
    padding:var(--space-3); display:flex; flex-direction:column; gap:var(--space-2); }
  /* The part of the tile that opens it. Everything except the button, so the
     poster and the title are a door rather than decoration — "cant open movies
     to read about them…just images" was exactly this tile. It says so on hover
     as well as on the pointer, because a card that is clickable and does not
     look clickable is one nobody clicks. */
  .wl-tile-open{ display:flex; flex-direction:column; gap:var(--space-2); cursor:pointer; border-radius:var(--radius-card); }
  .wl-tile-open:hover .wl-poster,
  .wl-tile-open:hover .wl-poster-none{ outline:2px solid var(--orb-accent, var(--accent)); outline-offset:2px; }
  .wl-tile-open:hover .wl-tile-title{ color:var(--orb-accent, var(--accent)); }
  .wl-poster{ width:100%; aspect-ratio:2/3; border-radius:var(--radius-card); object-fit:cover; display:block;
    background:rgba(120,120,140,.12); }
  .wl-poster-none{ width:100%; aspect-ratio:2/3; border-radius:var(--radius-card); background:rgba(120,120,140,.12);
    display:flex; align-items:center; justify-content:center; color:var(--text-faint); font-size:var(--type-label);
    text-align:center; padding:var(--space-2); }
  .wl-tile-title{ font-size:var(--type-body); font-weight:650; color:var(--text); line-height:1.35; }
  .wl-tile-sub{ font-size:var(--type-body); color:var(--text-dim); }
  .wl-tile .btn{ font-size:var(--type-body); padding:var(--space-2) var(--space-3); width:100%; }

  .wl-row-sub{ font-size:var(--type-body); color:var(--text-dim); line-height:1.6; }

  /* ===== LISTS ON THE WATCHLIST ==========================================
     23 September. Matt: "watchlist is not very good. No way to really build
     different lists." A rail of lists on the left, posters in the middle, and
     under every poster the names of every list that title is in.

     The rail collapses ABOVE the posters on a narrow screen rather than
     beside them, because a 236px column and a poster grid cannot both be
     readable at 380px and the rail is the thing you steer with.

     Everything that moves here moves with transform and opacity. A hover that
     animated `left` on this app once cost 379 re-layouts in six seconds. */
  .wl-lists{ display:grid; grid-template-columns:minmax(0,236px) minmax(0,1fr); gap:var(--space-4);
    align-items:start; }
  @media(max-width:860px){ .wl-lists{ grid-template-columns:1fr; } }
  .wl-rail{ border:1px solid var(--glass-border); border-radius:var(--radius-card);
    background:var(--glass-bg); overflow:hidden; }
  .wl-rail-head{ padding:var(--space-2) var(--space-3); font-size:var(--type-label); font-weight:700;
    letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint);
    border-bottom:1px solid var(--glass-border); }
  .wl-rail-row{ display:flex; align-items:center; gap:var(--space-2); padding:0 var(--space-3);
    min-height:36px; cursor:pointer; color:var(--text-dim);
    border-left:2px solid transparent; border-bottom:1px solid var(--glass-border); }
  .wl-rail-row:hover{ background:rgba(120,120,140,.10); color:var(--text); }
  .wl-rail-row.active{ background:rgba(120,120,140,.16); color:var(--text);
    border-left-color:var(--orb-accent, var(--accent)); }
  .wl-rail-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    font-size:var(--type-body); font-weight:600; }
  /* AUTO says "Lucid built this one and you cannot add to it". It is a word
     rather than an icon because it is the answer to a question somebody will
     ask once and then never again, and a word can be read the first time. */
  .wl-rail-auto{ flex:none; font-size:var(--type-label); font-weight:700; letter-spacing:.04em;
    color:var(--orb-accent, var(--accent)); }
  .wl-rail-count{ flex:none; font-family:var(--mono, ui-monospace, monospace);
    font-size:var(--type-label); color:var(--text-faint); font-variant-numeric:tabular-nums; }
  .wl-rail-make{ padding:var(--space-2) var(--space-3); }
  .wl-rail-make .btn{ width:100%; }
  .wl-rail-note{ font-size:var(--type-label); color:var(--text-faint); line-height:1.6;
    margin:var(--space-3) 0 0; }
  /* The sentence that stands where the lists he made would be when Lucid
     could not read them. House rule 211: a rail with nothing on it because a
     read failed must not look like a man who has not made any lists. */
  .wl-rail-trouble{ font-size:var(--type-label); color:var(--text-dim); line-height:1.6;
    margin-top:var(--space-3); padding:var(--space-2) var(--space-3);
    border:1px solid var(--glass-border-hi); border-radius:var(--radius-control);
    background:rgba(120,120,140,.08); }

  .wl-lists-main{ min-width:0; }
  .wl-list-head{ display:flex; align-items:baseline; gap:var(--space-3); flex-wrap:wrap; }
  .wl-list-name{ font-family:var(--font-display); font-size:var(--type-lead); font-weight:600; color:var(--text); }
  .wl-list-del{ margin-left:auto; }
  .wl-list-why{ font-size:var(--type-body); color:var(--text-dim); line-height:1.6;
    margin:var(--space-1) 0 var(--space-4); max-width:74ch; }
  /* Smaller than .wl-grid's 178px on purpose: this is a list you are scanning,
     not a shop window, and at 128px a dozen of them are on screen at once. */
  .wl-list-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(128px,1fr));
    gap:var(--space-4); }
  @media(max-width:560px){ .wl-list-grid{ grid-template-columns:repeat(auto-fill, minmax(104px,1fr));
    gap:var(--space-3); } }
  .wl-ptile{ position:relative; min-width:0; }
  .wl-ptile-art{ cursor:pointer; border-radius:var(--radius-card); }
  .wl-ptile-art:hover .wl-poster,
  .wl-ptile-art:hover .wl-poster-none{ outline:2px solid var(--orb-accent, var(--accent)); outline-offset:2px; }
  .wl-ptile-add{ position:absolute; top:var(--space-2); right:var(--space-2);
    width:26px; height:26px; border-radius:var(--radius-pill); cursor:pointer;
    border:1px solid var(--glass-border-hi); background:rgba(4,6,14,.78); color:#fff;
    font-size:var(--type-body); font-weight:700; line-height:1; padding:0;
    transition:transform 130ms ease, background 130ms ease; }
  .wl-ptile-add:hover{ background:rgba(4,6,14,.94); transform:scale(1.08); }
  .wl-ptile-title{ font-size:var(--type-body); font-weight:600; color:var(--text);
    line-height:1.3; margin-top:var(--space-2); cursor:pointer; }
  .wl-ptile-title:hover{ color:var(--orb-accent, var(--accent)); }
  .wl-ptile-year{ color:var(--text-faint); font-weight:400; }
  /* THE LINE THAT ANSWERS THE COMPLAINT. Every list this title is in, named,
     under the poster — which is the thing the old one row / one status shape
     made impossible to say. */
  .wl-inlists{ display:flex; flex-wrap:wrap; gap:3px; margin-top:var(--space-1); }
  /* A NAME LONGER THAN THE TILE IS CUT WITH AN ELLIPSIS, NOT LET OUT OF THE
     TILE. At 430px a tile is 104px wide and "Recommended to me" is wider than
     that; without this the chip ran off the right-hand edge of the last column
     and was sliced by the edge of the screen with nothing to say it had been.
     An ellipsis says "there is more of this name"; a clean cut says nothing. */
  .wl-inlist{ font-size:var(--type-label); font-weight:600; padding:1px var(--space-2);
    border-radius:var(--radius-tight); color:var(--text-dim);
    max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    border:1px solid var(--glass-border); background:rgba(120,120,140,.10); }
  .wl-inlist.auto{ color:var(--orb-accent, var(--accent));
    border-color:var(--glass-border-hi); }

  .wl-lists-pick{ display:flex; flex-wrap:wrap; gap:var(--space-2); }
  .wl-lists-pick-btn{ font-size:var(--type-body); font-weight:600; padding:5px var(--space-3);
    border-radius:var(--radius-pill); cursor:pointer; color:var(--text-dim);
    border:1px solid var(--glass-border); background:rgba(120,120,140,.10); }
  .wl-lists-pick-btn:hover:not(:disabled){ color:var(--text); background:rgba(120,120,140,.22); }
  .wl-lists-pick-btn.on{ color:var(--text); border-color:var(--glass-border-hi);
    background:rgba(120,120,140,.28); }
  .wl-lists-pick-btn:disabled{ opacity:.55; cursor:not-allowed; }
  .wl-lists-pick-auto{ font-size:var(--type-label); font-weight:700; letter-spacing:.04em;
    color:var(--text-faint); }

  .wl-setup{ border:1px solid var(--glass-border-hi); border-radius:var(--radius-card); background:rgba(120,120,140,.08);
    padding:var(--space-4) var(--space-4); }
  .wl-setup-head{ font-size:var(--type-body); font-weight:650; color:var(--text); line-height:1.55; }
  .wl-setup-what{ font-size:var(--type-body); color:var(--text-dim); line-height:1.65; margin:var(--space-2) 0 0; }
  .wl-setup-steps{ font-size:var(--type-body); color:var(--text-dim); line-height:1.7; padding-left:var(--space-5); margin:var(--space-3) 0 0; }
  .wl-setup-steps li{ margin-bottom:var(--space-2); }
  .wl-setup-var{ font-family:var(--font-mono); font-size:var(--type-body); color:var(--text); }

/* ---- WATCHLIST A: one card per person ---- */
.wl-plead{
  font-size:var(--type-lead); color:var(--text-dim); line-height:1.5;
  margin:0 0 var(--space-2); max-width:var(--prose-measure);
}
.wl-plead b{ color:var(--text); font-weight:650; }
.wl-pnote-top{
  font-size:var(--type-label); color:var(--text-faint); line-height:1.6;
  margin:0 0 var(--space-4); max-width:var(--prose-measure);
}
.wl-pcards{ display:flex; flex-direction:column; gap:var(--space-4); }
.wl-pcard{
  border:1px solid var(--glass-border); border-radius:var(--radius-card);
  background:var(--glass-bg); padding:var(--space-4);
}
.wl-phead{ display:flex; align-items:center; gap:12px; margin-bottom:var(--space-3); }
.wl-pface{
  flex:0 0 auto; width:40px; height:40px; border-radius:50%; overflow:hidden;
  border:1px solid var(--glass-border); background:var(--surface-2, var(--glass-bg));
  color:var(--text-dim); font-size:var(--type-body); font-weight:650;
  display:flex; align-items:center; justify-content:center;
}
.wl-pface img{ width:100%; height:100%; object-fit:cover; }
.wl-pwho{ min-width:0; flex:1 1 auto; display:flex; flex-direction:column; gap:2px; }
.wl-pname{ font-size:var(--type-lead); font-weight:650; color:var(--text); }
.wl-pfacts{ font-size:var(--type-label); color:var(--text-dim); }
.wl-pacts{ flex:0 0 auto; text-align:right; }
.wl-plink{ margin-top:6px; display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; }
.wl-plink-note{
  flex:1 1 100%; font-size:var(--type-label); color:var(--text-faint);
  line-height:1.5; text-align:right;
}

/* The posters. A row that scrolls sideways rather than a grid that reflows:
   a person's recommendations are a sequence, and the newest one is the one
   that should be under your eye. */
.wl-prow{
  display:grid; gap:12px; grid-template-columns:repeat(auto-fill, minmax(132px, 1fr));
}
.wl-pitem{ cursor:pointer; min-width:0; }
.wl-pposter{
  position:relative; aspect-ratio:2 / 3; border-radius:var(--radius-card);
  overflow:hidden; border:1px solid var(--glass-border);
  background:var(--glass-bg); display:flex; align-items:center; justify-content:center;
}
.wl-pposter img{ width:100%; height:100%; object-fit:cover; display:block; }
.wl-pnoposter{
  font-size:var(--type-label); color:var(--text-dim); padding:var(--space-2);
  text-align:center; line-height:1.4;
}
.wl-pbadge{
  position:absolute; top:6px; right:6px; width:22px; height:22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:var(--type-label); font-weight:700; color:var(--text);
  background:var(--glass-bg); border:1px solid var(--glass-border);
}
.wl-pbadge.ok{ color:var(--cat-green, var(--accent)); }
.wl-pbadge.on{ color:var(--accent); }
.wl-pbadge.off{ color:var(--text-faint); }
.wl-pstars{
  position:absolute; left:0; right:0; bottom:0; padding:4px 6px;
  font-size:var(--type-label); color:var(--text); background:var(--glass-bg);
  letter-spacing:1px; text-align:center;
}
.wl-ptitle{
  margin-top:6px; font-size:var(--type-body); font-weight:600; color:var(--text);
  line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* WHERE THE NAME CAME FROM, which is the only provenance there is. It is set
   small and plain on purpose: it is a note about his own handwriting, not a
   quotation, and it must never be mistaken for one. */
.wl-psaid{ font-size:var(--type-label); color:var(--text-dim); line-height:1.45; }
.wl-psaid b{ color:var(--text); font-weight:650; }
.wl-pnote{ font-size:var(--type-label); color:var(--text-faint); line-height:1.45; margin-top:2px; }
.wl-pquiet{
  margin-top:var(--space-3); padding-top:var(--space-3);
  border-top:1px solid var(--glass-border);
  font-size:var(--type-label); color:var(--text-dim); line-height:1.6;
}

/* A TEXT ACTION MUST NOT READ AS A DISABLED CONTROL — see the note in app.css under
   .feed-life .mini-link; this is the Watchlist A half of the same rule. */
.wl-pacts .mini-link{
  background:none; border:0; padding:0; box-shadow:none; min-height:0;
  font:inherit; color:var(--blue); text-decoration:underline; cursor:pointer;
}
.wl-pacts .mini-link:hover{ color:var(--accent); }

@media (max-width: 640px){
  .wl-prow{ grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)); gap:10px; }
  .wl-phead{ flex-wrap:wrap; }
  .wl-pacts{ flex:1 1 100%; text-align:left; }
  .wl-plink, .wl-plink-note{ justify-content:flex-start; text-align:left; }
}

/* The same glyph in the watchlist face: without this an icon fills the whole disc
   edge to edge (see .ht-av .ci-glyph in app.css). */
.wl-pface .ci-glyph{ width:52%; height:52%; display:block; flex:none; }