/* ============================================================================
   Penn & Teller: Fool Us ledger — season view and A–Z roster.

   Loaded through the head partial's extraStyles hook. Before that hook existed
   this file was linked by nobody, and the page shipped with every component
   stacked in a bare column — so if the layout ever looks like that again, check
   that the <link> is actually in the served HTML before touching anything here.
   ========================================================================== */

.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

.fool-us-hero .sub { max-width:60ch; margin-left:auto; margin-right:auto; }
.fool-us-hero .sub strong { color:var(--accent-ink); font-weight:600; }
/* The hero states the size of the thing once, in a sentence. The four stat
   tiles it replaces said the same numbers louder, above the content, and were
   the first thing every reader had to scroll past. */
.fool-us-body { padding-top:clamp(1.4rem,3vw,2.2rem); }

/* --- Season rail ---------------------------------------------------------- */
.fool-us-nav { display:flex; flex-wrap:wrap; align-items:center; gap:.55rem .7rem; padding-bottom:1.1rem; border-bottom:1px solid var(--line-soft); }
.fool-us-nav-label { color:var(--muted); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; }
.fool-us-nav ul { display:flex; flex-wrap:wrap; gap:.35rem; margin:0; padding:0; list-style:none; }
.fool-us-nav a { display:inline-flex; align-items:center; justify-content:center; min-width:2.5rem; min-height:2.5rem; padding:0 .7rem; border:1px solid var(--line-soft); border-radius:var(--radius); color:var(--ink-soft); font-size:.86rem; text-decoration:none; transition:border-color .18s, color .18s, background .18s; }
.fool-us-nav a:hover { border-color:var(--gold); color:var(--accent-ink); background:color-mix(in srgb,var(--gold) 8%,transparent); }
.fool-us-nav a[aria-current] { border-color:var(--gold); color:#FBEEC8; background:var(--wine); }
.fool-us-nav-az a { min-width:0; letter-spacing:.06em; }

/* --- Search + result filter ----------------------------------------------- */
.fool-us-tools { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; margin:1.2rem 0 1rem; }
.fool-us-search { display:flex; gap:.45rem; flex:1 1 22rem; max-width:30rem; margin:0; }
.fool-us-search-field { position:relative; flex:1; min-width:0; }
.fool-us-search input { width:100%; min-width:0; min-height:2.9rem; background:var(--ground-3); border-color:var(--line-control); }
.fool-us-search button { flex:none; }

/* Typeahead over all 568 acts. It sits above the cards below it and is capped
   in height, because a list that pushes the page around as you type is worse
   than no list at all. */
.fool-us-suggestions { position:absolute; z-index:30; top:calc(100% + .3rem); left:0; right:0; max-height:19rem; overflow-y:auto; padding:.25rem; border:1px solid var(--line-control); border-radius:var(--radius); background:var(--ground-2); box-shadow:0 18px 40px -18px var(--panel-shadow); }
.fool-us-suggestion { display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:.15rem .6rem; padding:.5rem .6rem; border-radius:var(--radius); cursor:pointer; }
.fool-us-suggestion:hover, .fool-us-suggestion[aria-selected="true"] { background:color-mix(in srgb,var(--gold) 14%,transparent); }
.fool-us-suggestion-name { font-family:var(--font-display); font-size:1rem; color:var(--ink); }
/* The season line wraps under the name rather than truncating it: which
   seasons an act appeared in is the reason to show this list at all. */
.fool-us-suggestion-note { grid-column:1; color:var(--muted); font-size:.72rem; }
.fool-us-suggestion-fooled { grid-column:2; grid-row:1; align-self:center; padding:.15rem .45rem; border:1px solid color-mix(in srgb,var(--gold) 68%,var(--line)); border-radius:99px; color:var(--accent-ink); font-size:.56rem; letter-spacing:.05em; text-transform:uppercase; white-space:nowrap; }
.fool-us-suggestion-empty { padding:.7rem .6rem; color:var(--muted); font-size:.84rem; }
/* Two links, not a checkbox plus Apply: the state is the thing that is
   highlighted, and changing it is one click with no JavaScript. */
.fool-us-filter { display:inline-flex; flex:none; padding:.2rem; border:1px solid var(--line-soft); border-radius:var(--radius); background:var(--ground-2); }
.fool-us-filter a { padding:.55rem 1rem; border-radius:calc(var(--radius) + 1px); color:var(--muted); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; white-space:nowrap; transition:color .18s, background .18s; }
.fool-us-filter a:hover { color:var(--accent-ink); }
.fool-us-filter a[aria-current] { color:#FBEEC8; background:var(--wine); }

.fool-us-letters { display:flex; flex-wrap:wrap; gap:.3rem; margin:0 0 .9rem; }
.fool-us-letters a { display:inline-flex; align-items:center; justify-content:center; width:2.1rem; min-height:2.1rem; border:1px solid var(--line-soft); border-radius:100%; color:var(--ink-soft); font-size:.74rem; text-decoration:none; }
.fool-us-letters a:hover { border-color:var(--accent-ink); color:var(--accent-ink); }
.fool-us-letters a[aria-current] { border-color:var(--gold); color:var(--accent-ink); background:color-mix(in srgb,var(--gold) 12%,transparent); }
.fool-us-result-note { margin:0 0 1.4rem; color:var(--muted); font-size:.84rem; }
.fool-us-result-note a, .fool-us-empty a { color:var(--accent-ink); }
.fool-us-empty { margin:2.5rem 0; padding:1.6rem; border:1px dashed var(--line); border-radius:var(--radius); color:var(--ink-soft); text-align:center; }

/* The landing hero names the whole record, so this band carries the season the
   listing below actually belongs to. */
.fool-us-season-band { display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem .9rem; margin:1.6rem 0 1.4rem; padding-bottom:.6rem; border-bottom:1px solid var(--line); }
.fool-us-season-band h2 { font-size:1.7rem; color:var(--accent-ink); }
.fool-us-season-band p { margin:0; color:var(--muted); font-size:.84rem; }
.fool-us-season-band strong { color:var(--accent-ink); font-weight:600; }

/* --- Season view: episodes of acts ---------------------------------------- */
.fool-us-episode { margin:0 0 2.2rem; }
.fool-us-episode > header { display:flex; flex-wrap:wrap; align-items:baseline; gap:.35rem .9rem; margin-bottom:.85rem; padding-bottom:.5rem; border-bottom:1px solid var(--line); }
.fool-us-episode h2 { color:var(--accent-ink); font-size:1.35rem; }
.fool-us-episode > header p { margin:0; color:var(--ink-soft); font-size:.88rem; }
.fool-us-episode > header span { color:var(--muted); }
.fool-us-acts { display:grid; grid-template-columns:repeat(auto-fill,minmax(14rem,1fr)); gap:.7rem; margin:0; padding:0; list-style:none; }

/* --- The act card, shared by both views ----------------------------------- */
/* One card = one thing a reader wants. Nothing is hidden behind a disclosure:
   almost every act appeared exactly once, so there was never enough underneath
   an accordion to justify the click it cost. */
.fool-us-act { position:relative; display:flex; flex-direction:column; gap:.45rem; padding:1rem 1.05rem; border:1px solid var(--line-soft); border-left:3px solid var(--line-soft); border-radius:var(--radius); background:var(--ground-2); transition:border-color .18s, transform .18s, box-shadow .18s; }
.fool-us-act.result-fooled { border-left-color:var(--gold); }
.fool-us-act:hover { border-color:var(--line); transform:translateY(-2px); box-shadow:0 16px 34px -26px var(--panel-shadow); }
.fool-us-act-name { margin:0; font-family:var(--font-display); font-size:1.2rem; line-height:1.2; }
/* A permanent underline, not just a colour shift. Handing a fan to a bookable
   magician is what this page is for, and "the name is a slightly different
   brown" is not a link affordance — a reader has to already know to try it. */
.fool-us-act-name a { color:var(--accent-ink); text-decoration:underline; text-decoration-thickness:1px; text-decoration-color:color-mix(in srgb,var(--gold) 55%,transparent); text-underline-offset:4px; }
/* Stretched link: the whole card opens the profile, but the YouTube mark and
   the season links inside it stay separately clickable via their own z-index.
   Without this the profile — the single most valuable link on the page — would
   again be a small target inside a large card. */
.fool-us-act-name a::after { content:''; position:absolute; inset:0; border-radius:inherit; }
.fool-us-act:hover .fool-us-act-name a { text-decoration-color:var(--gold); }
.fool-us-act-name span { color:var(--ink); }
.fool-us-act-meta { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin:0; }
.fool-us-act-repeat, .fool-us-appearance-when, .fool-us-yt { position:relative; z-index:1; }
.fool-us-act-repeat { color:var(--muted); font-size:.72rem; text-decoration:none; border-bottom:1px solid var(--line-soft); }
.fool-us-act-repeat:hover { color:var(--accent-ink); }
.fool-us-aliases { margin:0; color:var(--muted); font-size:.74rem; }
.fool-us-note { margin:0; color:var(--muted); font-size:.78rem; font-style:italic; line-height:1.4; }
/* The affordance the accordion used to be: a quiet cue that the card is a link,
   which appears only where a profile actually exists. */
.fool-us-act-go { margin-top:auto; padding-top:.2rem; color:var(--accent-ink); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; opacity:0; transition:opacity .18s; }
.fool-us-act:hover .fool-us-act-go, .fool-us-act:focus-within .fool-us-act-go { opacity:1; }
@media (hover:none) { .fool-us-act-go { opacity:1; } }

/* 508 of 683 judged performances did not fool them, so "did not fool" is the
   default state, not news: it is set as quiet text and only the 175 that DID
   fool them get a drawn pill. Marking the exception rather than the rule is
   what lets a reader find the foolers by scanning instead of reading. */
.result-pill { display:inline-flex; align-items:center; width:max-content; padding:.2rem 0; border:1px solid transparent; border-radius:99px; color:var(--muted); font-size:.6rem; letter-spacing:.05em; line-height:1.3; text-transform:uppercase; white-space:nowrap; }
.result-pill.fooled, .result-pill.fooled-other { padding:.2rem .5rem; border-color:color-mix(in srgb,var(--gold) 68%,var(--line)); color:var(--accent-ink); background:color-mix(in srgb,var(--gold) 10%,transparent); }

/* --- A–Z roster ----------------------------------------------------------- */
.fool-us-roster { display:grid; grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr)); gap:.7rem; align-items:start; }
.fool-us-letter { grid-column:1/-1; margin:1.5rem 0 .1rem; padding-bottom:.3rem; border-bottom:1px solid var(--line); color:var(--accent-ink); font-size:1.5rem; scroll-margin-top:6rem; }
.fool-us-letter:first-child { margin-top:0; }
.fool-us-appearances { display:flex; flex-direction:column; gap:.4rem; margin:.15rem 0 0; padding:0; list-style:none; }
.fool-us-appearances li { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; }
.fool-us-appearance-when { color:var(--ink-soft); font-size:.76rem; letter-spacing:.03em; text-decoration:none; white-space:nowrap; border-bottom:1px solid var(--line-soft); }
.fool-us-appearance-when span { color:var(--muted); }
.fool-us-appearance-when:hover { color:var(--accent-ink); border-bottom-color:var(--gold); }

/* --- YouTube mark --------------------------------------------------------- */
/* Two states, and the difference has to survive a glance: a full-colour mark is
   a clip we opened and checked, a grey outline is a search we are offering
   because we could not find one. Passing the second off as the first is exactly
   the claim this ledger refuses to make. */
.fool-us-yt { display:inline-flex; align-items:center; justify-content:center; width:2.2rem; height:2.2rem; margin-left:auto; border-radius:var(--radius); text-decoration:none; transition:background .18s, opacity .18s; }
.fool-us-yt svg { display:block; }
.fool-us-yt.is-verified .fool-us-yt-body { fill:#FF0000; }
.fool-us-yt.is-verified .fool-us-yt-play { fill:#FFFFFF; }
.fool-us-yt.is-search { opacity:.75; }
.fool-us-yt.is-search .fool-us-yt-body { fill:none; stroke:var(--muted); stroke-width:1.6; }
.fool-us-yt.is-search .fool-us-yt-play { fill:var(--muted); }
.fool-us-yt:hover { background:color-mix(in srgb,var(--gold) 12%,transparent); opacity:1; }
.fool-us-acts .fool-us-yt { position:absolute; top:.6rem; right:.55rem; margin-left:0; }

/* --- Foot ----------------------------------------------------------------- */
.fool-us-pager { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1rem; margin:2.4rem 0 0; padding-top:1.1rem; border-top:1px solid var(--line-soft); color:var(--muted); font-size:.84rem; }
.fool-us-pager a { color:var(--accent-ink); text-decoration:none; }
.fool-us-pager > :last-child { text-align:right; }
.fool-us-pager-all { text-align:center; }
.fool-us-filing { max-width:72ch; margin:2rem auto 0; color:var(--muted); font-size:.82rem; line-height:1.55; }

.fool-us-about { max-width:66ch; margin:3rem auto 0; padding-top:1.6rem; border-top:1px solid var(--line); }
.fool-us-about h2 { margin:0 0 .6rem; font-size:1.5rem; }
.fool-us-about p { color:var(--ink-soft); font-size:.92rem; line-height:1.7; }
.fool-us-about strong { color:var(--accent-ink); font-weight:600; }
.fool-us-sources, .fool-us-correction { font-size:.84rem; color:var(--muted); }
.fool-us-about a { color:var(--accent-ink); }

@media (max-width:720px) {
  .fool-us-tools { flex-direction:column; align-items:stretch; }
  /* flex-basis is the CROSS axis once this stacks, so the row's `flex:1 1 22rem`
     became a 22rem-tall search box. Height must come from the input alone. */
  .fool-us-search { flex:0 0 auto; max-width:none; }
  .fool-us-filter { align-self:flex-start; }
  .fool-us-acts, .fool-us-roster { grid-template-columns:1fr; }
  .fool-us-pager { grid-template-columns:1fr; justify-items:center; gap:.6rem; }
  .fool-us-pager > :last-child { text-align:center; }
}