/* Shared theme for the "Fans Also Like" secondary-pages prototype.
   Tokens copied 1:1 from spotify_affinity_map_A-artifact.html so these pages
   read as the same product as the live map, not a separate skin. */
:root{
  --bg:#0b0e17; --ink:#eef1f8; --ink2:#aab3c8; --ink3:#6b7488; --line:#1d2333;
  --panel:#0f1424e6; --gold:#f2c14e; --card:#0f1424;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:radial-gradient(120% 90% at 30% 0%,#131a2e 0%,var(--bg) 55%,#080a12 100%);
  background-attachment:fixed;
  color:var(--ink); font-family:var(--sans); line-height:1.5; min-height:100vh;
}
a{color:inherit}
.wrap{max-width:920px;margin:0 auto;padding:0 22px 80px}

/* ---- nav ---- */
.topnav{border-bottom:1px solid var(--line);padding:15px 22px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.topnav .word{font-family:var(--serif);font-weight:600;font-size:18px;text-decoration:none;color:var(--ink)}
.topnav .navlinks{display:flex;gap:16px;font-size:13px;color:var(--ink2)}
.topnav .navlinks a{text-decoration:none;color:var(--ink2);border-bottom:1px solid transparent}
.topnav .navlinks a:hover{color:var(--ink);border-color:var(--line)}
.topnav .live{margin-left:auto;font-family:var(--mono);font-size:11px;color:#0b0e17;background:var(--gold);
  padding:5px 11px;border-radius:20px;font-weight:700;text-decoration:none}

/* ---- breadcrumb ---- */
.crumbs{font-family:var(--mono);font-size:11px;color:var(--ink3);letter-spacing:.02em;
  padding:18px 0 0;text-transform:uppercase}
.crumbs a{color:var(--ink3);text-decoration:none;border-bottom:1px dotted var(--ink3)}
.crumbs a:hover{color:var(--ink2)}
.crumbs .sep{margin:0 7px;opacity:.5}
.crumbs .here{color:var(--ink2)}
.crumbs .dead{color:var(--ink3);opacity:.55}

/* ---- header block (region/scene/artist) ---- */
.pagehead{padding:18px 0 6px;display:flex;align-items:flex-start;gap:16px}
.swatch{width:20px;height:20px;border-radius:6px;flex:0 0 auto;margin-top:6px}
/* F13 fix (2026-08-13): swatch(big=True) was emitting the plain "swatch" class (build script
   bug, see build_affinity_site_prototype.py) so this rule never had anything to target. The
   region/scene/artist pagehead swatch is now a real step up from the base 20px. */
.swatch.big{width:30px;height:30px;border-radius:9px}
.pagehead h1{font-family:var(--serif);font-weight:600;font-size:34px;margin:0;line-height:1.15}
.coretag{display:inline-block;font-family:var(--mono);font-size:11px;color:var(--ink3);
  border:1px solid var(--line);border-radius:20px;padding:2px 10px;margin:8px 6px 0 0;vertical-align:middle}
.coretag b{color:var(--gold);font-weight:600;text-transform:uppercase;font-size:9px;letter-spacing:.06em;margin-right:5px}
a.coretag{text-decoration:none;border-color:#4a3f24}
a.coretag:hover{color:var(--gold);border-color:var(--gold)}
.statrow{display:flex;gap:26px;flex-wrap:wrap;margin:16px 0 6px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.statrow .stat b{display:block;font-family:var(--mono);font-size:19px;color:var(--ink)}
.statrow .stat span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink3);margin-top:3px}

/* ---- prose ---- */
.lede{font-size:15px;color:var(--ink2);max-width:64ch;margin:14px 0}
h2.h{font-family:var(--serif);font-weight:600;font-size:19px;margin:34px 0 10px}
h3.h3{font-family:var(--serif);font-weight:600;font-size:15px;margin:0 0 4px}

/* ---- callouts ---- */
.callout{border:1px solid var(--line);border-left:3px solid var(--gold);background:var(--panel);
  border-radius:6px;padding:13px 16px;margin:16px 0;font-size:13px;color:var(--ink2)}
.callout b{color:var(--ink)}
.callout.scope{border-left-color:var(--ink3)}

/* ---- cards / grid ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin:12px 0}
.card{border:1px solid var(--line);border-radius:10px;padding:14px;background:#0d1220;
  transition:border-color .12s;text-decoration:none}
.card.link:hover{border-color:#3a4568}
.card .top{display:flex;align-items:center;gap:9px}
.card .top .swatch{width:11px;height:11px;margin:0;border-radius:50%}
.card .fam{font-family:var(--serif);font-weight:600;font-size:15px}
.card .core{font-size:10.5px;color:var(--ink3);font-family:var(--mono);margin-top:3px}
.card .meta{font-size:11px;color:var(--ink3);margin-top:9px;font-family:var(--mono)}
.tag{display:inline-block;font-size:9px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink3);border:1px solid var(--line);border-radius:12px;padding:2px 8px;vertical-align:middle}
a.tag{color:var(--gold);border-color:#4a3f24;text-decoration:none}
a.tag:hover{border-color:var(--gold);background:rgba(242,193,78,.08)}
.card .tag{margin-top:9px}

/* ---- roster / list rows ---- */
.roster{border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:10px 0}
/* flex-wrap + a real flex-basis on .nm (not the old bare flex:1, which meant basis 0) - found on
   real mobile 2026-08-10 (Max, iPhone screenshot): with align-items:center and no wrap, a long
   multi-word name (e.g. "The Hellp") got squeezed by its nowrap siblings (.scenetag, .d) until
   its own text wrapped internally, and the row's fixed height (set by that wrap) put .scenetag
   at the vertical center of BOTH name lines - reading as overlapping the second line. Not a
   breakpoint fix (no @media anywhere in this file): flex-wrap responds to whatever the actual
   content needs at ANY width, so .scenetag/.d drop to their own line together once .nm can't
   hold its 160px basis, on a narrow phone or a merely-narrow browser window alike. */
.rrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:10px 14px;border-bottom:1px solid #141a29;font-size:13.5px}
.rrow:last-child{border-bottom:none}
.rrow a{text-decoration:none;font-weight:600;color:var(--ink);border-bottom:1px dotted var(--ink3)}
.rrow a:hover{color:var(--gold);border-color:var(--gold)}
.rrow .nm{flex:1 1 160px;min-width:0;display:flex;align-items:center;gap:8px}
.rrow .swatch{width:9px;height:9px;border-radius:50%;margin-top:0}
.rrow .d{font-family:var(--mono);font-size:11px;color:var(--ink3);white-space:nowrap;margin-left:auto}
.rrow .scenetag{font-family:var(--mono);font-size:10px;color:var(--ink3);border:1px solid var(--line);
  border-radius:10px;padding:1px 7px;white-space:nowrap}
.rrow.self{background:#12182c}
.rrow .seed{font-size:9px;color:var(--gold);border:1px solid #4a3f24;border-radius:8px;padding:0 5px;text-transform:uppercase;letter-spacing:.05em}

/* ---- scene table (region page) ---- */
.scenetable{border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:10px 0}
.srow{padding:12px 16px;border-bottom:1px solid #141a29}
.srow:last-child{border-bottom:none}
.srow .fam{font-family:var(--serif);font-size:15px;font-weight:600}
.srow a.fam{text-decoration:none;color:var(--ink);border-bottom:1px dotted var(--ink3)}
.srow a.fam:hover{color:var(--gold);border-color:var(--gold)}
.srow .core{font-family:var(--mono);font-size:10.5px;color:var(--ink3);margin-left:8px}
.srow .n{font-family:var(--mono);font-size:11px;color:var(--ink3);float:right}
.srow .sample{font-size:12px;color:var(--ink2);margin-top:4px}

footer.pf{margin-top:50px;padding-top:16px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:11px;color:var(--ink3)}
footer.pf a{color:var(--ink3)}
footer.pf .credit{color:var(--ink2);font-family:var(--sans)}

/* 2026-08-14 (Max): the snapshot stat clause ("snapshot: N artists, N regions, N scenes at
   the current default granularity") pushed the footer to 5 wrapped lines of dense mono text
   on a real phone width (~390px, confirmed via a live-viewport check) -- the least essential
   part of the footer, buried under the credit line and Spotify disclaimer. Dropped on mobile;
   kept on desktop where it wraps to a tidy 2 lines. First @media rule in this stylesheet. */
@media (max-width:640px){
  footer.pf .snapshot-detail{display:none}
}

/* ---- lorem-ipsum / thin-coverage placeholder blocks ---- */
.placeholder{position:relative;border:1px dashed #3a4568;border-radius:8px;padding:12px 14px 14px;
  margin:10px 0;background:rgba(255,255,255,.015)}
.placeholder p{font-style:italic;color:var(--ink3);font-size:13px;margin:0}
.placeholder .ptag{position:absolute;top:-9px;left:12px;background:var(--bg);padding:0 6px;
  font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:#8b93ab}

/* ---- warn callout (known limitations, unresolved gaps) ---- */
.callout.warn{border-left-color:#c9764a}
.callout.warn b{color:var(--ink)}

/* ---- FAQ (native disclosure — free keyboard/screen-reader support) ---- */
.faq{border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:10px 0}
.faq details{border-bottom:1px solid #141a29}
.faq details:last-child{border-bottom:none}
.faq summary{padding:14px 16px;cursor:pointer;font-family:var(--serif);font-size:15px;
  font-weight:600;list-style:none;display:flex;align-items:center;gap:10px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";font-family:var(--mono);color:var(--gold);width:14px;flex:0 0 auto}
.faq details[open] summary::before{content:"\2212"}
.faq .a{padding:0 16px 16px 40px;font-size:13.5px;color:var(--ink2);line-height:1.6}

/* ---- form (feedback) ---- */
.field{margin:14px 0}
.field label{display:block;font-family:var(--mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ink3);margin-bottom:6px}
.field input[type=text],.field input[type=email],.field select,.field textarea{
  width:100%;background:#0c1120e6;border:1px solid #29314a;color:var(--ink);border-radius:8px;
  padding:9px 11px;font-size:13.5px;font-family:var(--sans);outline:none}
.field textarea{resize:vertical;min-height:110px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.submitrow{display:flex;align-items:center;gap:14px;margin-top:18px}
.btn-primary{background:var(--gold);color:#0b0e17;border:none;border-radius:8px;padding:10px 20px;
  font-size:13.5px;font-weight:700;cursor:pointer;font-family:var(--sans)}
.btn-primary:hover{background:#f5cd6b}
.btn-primary:disabled{opacity:.55;cursor:default}
.formnote{font-size:12px;color:var(--ink3)}
.formstatus{margin-top:14px;font-size:13px;border-radius:8px;padding:10px 13px;display:none}
.formstatus.show{display:block}
.formstatus.ok{background:#122417;border:1px solid #234a2c;color:#a9e3b8}
.formstatus.err{background:#241414;border:1px solid #4a2323;color:#e3b1a9}