/* ── Artist modal stylesheet ──────────────────────────────────────────────────────────
   Extracted from styles.css so any page can host the modal: index.html and
   tools/research/graph/artist-graph.html both link this file. The modal carries
   its own `site` tokens on .am-card (below) rather than reading the host's :root,
   because hosts differ - the graph mirrors styles.css but under other names
   (--muted, --dim, --brand) and lacks the badge triplets - and the `site` theme
   is a fixed palette, not "whatever the host has". A themed host overrides these
   same tokens under .am-card[data-am-theme="..."]: poster and map are defined at
   the end of this file.

   The nine --am-* tokens at the end of the block were hardcoded near-blacks
   (#141414, #232323, #6f6b60 ...) that would render as black blobs on any paper
   theme; their defaults here are those exact values, so `site` is unchanged.
   ────────────────────────────────────────────────────────────────────────── */

/* overlay shell for a host that has no .modal-backdrop of its own (index.html keeps using its shell) */
.am-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:200;align-items:center;justify-content:center;}
.am-overlay.open{display:flex;}

/* `site` theme tokens - the values styles.css :root defines, pinned here so the card is self-sufficient */
.am-card{
  --mono:'IBM Plex Mono',monospace;--sans:'IBM Plex Sans',sans-serif;
  --bg:#0f0f0f;--surface:#1a1a1a;--surface-bright:#222;--border:#2e2e2e;--border-bright:#3a3a3a;
  --text:#e8e4dc;--text-muted:#9a928a;--text-dim:#8e8a7a;
  --amber:#c83020;--amber-dim:#7a1a10;--amber-bg:#1e0808;
  --green:#4a9a5a;--green-dim:#1e4a28;--green-bg:#0e1e12;
  --yellow:#c8a830;--yellow-dim:#5a4a10;--yellow-bg:#181408;
  --red:#d05555;--sell:#40a0a0;--sell-dim:#1a4a4a;--sell-bg:#0e1a1a;
  --hat:#d08040;--hat-dim:#3a2010;--hat-bg:#1a0e08;
  --book:#a080c0;--book-dim:#3a2a50;--book-bg:#1a1420;
  --gray:#878380;--gray-dim:#3a3530;
  --am-you-bg:#141414;--am-rule:#232323;--am-sec-h:#6f6b60;--am-sim-bg:#161616;--am-hat-no-bg:#131313;
  --am-combined-bg:#101010;--am-minimal:#57534a;--am-you-lbl:#c8c2b6;--am-gauge-track:#3a3632;
  --am-hatch-a:#242424;--am-hatch-b:#1d1d1d;--am-play-hover:#2a0c0c;
  --am-gauge-fill:var(--amber);--am-gauge-glow:200,48,32;
  font-family:var(--sans);font-size:14px;line-height:1.5;color:var(--text);
}

/* ── Artist modal / #artist view ───────────────────────────────── */
.artist-modal{background:none;border:none;padding:0;width:560px;max-width:94vw;box-shadow:none;overflow:visible;}
.am-card{position:relative;background:var(--surface);border:1px solid var(--border-bright);border-radius:6px;box-shadow:0 30px 70px rgba(0,0,0,.6);overflow:hidden;max-height:90vh;overflow-y:auto;overflow-x:hidden;}
.am-close{position:absolute;top:12px;right:14px;z-index:5;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.15);border-radius:3px;color:var(--text-muted);font-family:var(--mono);font-size:11px;padding:2px 8px;cursor:pointer;line-height:1.6;}
.am-close:hover{color:var(--text);}

/* identity header — square oEmbed avatar beside the name (banner fallback) */
.am-head{display:flex;gap:14px;align-items:center;padding:18px 20px 6px;}
.am-avatar{flex:0 0 76px;width:76px;height:76px;border-radius:6px;overflow:hidden;border:1px solid var(--border);background:repeating-linear-gradient(45deg,var(--am-hatch-a) 0 9px,var(--am-hatch-b) 9px 18px);display:flex;align-items:center;justify-content:center;}
.am-avatar-photo{background:none;border-color:var(--border-bright);}
.am-hat-fallback{width:42px;height:42px;object-fit:contain;opacity:.4;filter:grayscale(1);}
.am-photo{width:100%;height:100%;object-fit:cover;}
.am-id{flex:1;min-width:0;}
.am-name{font-family:var(--mono);font-size:21px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--amber);line-height:1.05;}
.am-none{font-size:12px;color:var(--text-dim);margin-top:6px;}
/* quiet context for an artist who is no longer active; the wording carries the
   distinction, so the deceased/defunct/retired hooks stay unstyled by design */
.am-status{font-family:var(--mono);font-size:11px;color:var(--text-dim);letter-spacing:.04em;margin-top:5px;}
.am-genres{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px;}
.am-genre{font-family:var(--mono);font-size:10px;color:var(--text);background:var(--surface-bright);border:1px solid var(--border-bright);border-radius:3px;padding:2px 7px;}

/* group divider band + meters */
.am-band{display:flex;align-items:center;gap:12px;padding:14px 20px 4px;}
.am-band-lbl{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim);}
.am-rule{flex:1;height:1px;background:var(--am-rule);}
.am-meter{display:inline-flex;align-items:center;gap:7px;cursor:help;}
.am-meter-k{font-family:var(--mono);font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--am-sec-h);}
.am-bars{display:inline-flex;gap:3px;}
.am-bar{width:8px;height:7px;border-radius:1px;background:var(--border);}
.am-bar.on{background:var(--amber);}
.am-meter-lbl{font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);}

/* sections (latest release / similar / links) */
.am-sec{padding:12px 20px 6px;}
.am-sec-h{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--am-sec-h);margin-bottom:9px;}
.am-release{display:flex;gap:12px;align-items:center;}
.am-rel-art{flex:0 0 52px;width:52px;height:52px;border-radius:4px;border:1px solid var(--border);object-fit:cover;}
.am-rel-art-ph{background:repeating-linear-gradient(45deg,var(--am-hatch-a) 0 6px,var(--am-hatch-b) 6px 12px);display:flex;align-items:center;justify-content:center;text-align:center;}
.am-rel-art-ph span{font-family:var(--mono);font-size:7px;color:var(--am-sec-h);line-height:1.4;}
.am-rel-body{min-width:0;}
.am-rel-name{font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--text);}
.am-rel-meta{display:flex;align-items:center;gap:9px;margin-top:3px;}
.am-rel-meta span{font-family:var(--mono);font-size:11px;color:var(--text-dim);}
.am-play{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;background:var(--amber-bg);border:1px solid var(--amber-dim);border-radius:4px;color:var(--amber);font-size:9px;text-decoration:none;cursor:pointer;transition:background .12s,border-color .12s;}
.am-play:hover{background:var(--am-play-hover);border-color:var(--amber);}
.am-simrow{display:flex;flex-wrap:wrap;gap:7px;}
.am-sim{font-family:var(--mono);font-size:11px;text-decoration:none;border-radius:3px;padding:4px 9px;cursor:pointer;color:var(--text-muted);background:var(--am-sim-bg);border:1px solid var(--border);}
.am-sim-in{display:inline-flex;align-items:center;gap:5px;color:var(--text);background:var(--surface-bright);border-color:var(--border-bright);}
.am-sim:hover{border-color:var(--border-bright);color:var(--text);}
.am-sim-dot{width:5px;height:5px;border-radius:50%;background:var(--amber);}
/* related acts (kinship): same chip as a tracked "similar" act, but a cool
   dot + a mono relation verb distinguish kinship from acoustic similarity. */
.am-rel-chip{gap:6px;}
.am-rel-dot{width:5px;height:5px;border-radius:50%;background:#5b8bb0;flex:0 0 auto;}
.am-rel-verb{font-family:var(--mono);font-size:9px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-dim);}
.am-rel-seen{font-family:var(--mono);font-size:9px;color:var(--text-muted);margin-left:6px;padding-left:6px;border-left:1px solid var(--border);}
.am-links{display:flex;flex-wrap:wrap;gap:7px;}
.am-link{font-family:var(--mono);font-size:10px;color:var(--text-muted);background:var(--surface-bright);border:1px solid var(--border);border-radius:3px;padding:5px 9px;text-decoration:none;cursor:pointer;}
.am-link:hover{color:var(--text);border-color:var(--border-bright);}
.am-next-inline{font-size:13px;color:var(--text);margin-top:4px;}

/* bezelled "You & this artist" footer */
.am-you{margin-top:8px;background:var(--am-you-bg);border-top:1px solid var(--border);box-shadow:inset 0 8px 12px -10px rgba(0,0,0,.7);}
.am-you-head{display:flex;align-items:center;gap:12px;padding:14px 22px 4px;}
.am-you-dot{width:6px;height:6px;border-radius:50%;background:var(--amber);}
.am-you-lbl{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--am-you-lbl);}
.am-you-body{display:flex;gap:12px;align-items:stretch;padding:12px 22px 18px;}
.am-you-main{flex:1;min-width:0;}
.am-you-badges{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:12px;}
.am-seen{font-family:var(--sans);font-size:13px;color:var(--text);}
.am-seen b{color:var(--amber);font-weight:600;}
.am-b-hat{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9px;text-transform:uppercase;border-radius:4px;}
.am-b-hat img{width:16px;height:16px;object-fit:contain;}
.am-b-hat-yes{background:var(--hat-bg);border:1px solid var(--hat-dim);color:var(--hat);padding:3px 8px 3px 5px;}
.am-b-hat-no{background:var(--am-hat-no-bg);border:1px dashed var(--hat-dim);color:var(--text-dim);padding:4px 10px 4px 5px;letter-spacing:.05em;}
.am-b-hat-no img{width:18px;height:18px;opacity:.34;filter:grayscale(.4);}
.am-b-book{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:9px;text-transform:uppercase;color:var(--book);background:var(--book-bg);border:1px solid var(--book-dim);border-radius:4px;padding:4px 8px;}
.am-book-dot{width:5px;height:5px;border-radius:50%;background:var(--book);}
.am-b-vip{font-family:var(--mono);font-size:9px;text-transform:uppercase;color:var(--green);background:var(--green-bg);border:1px solid var(--green-dim);border-radius:4px;padding:4px 8px;}
.am-b-next{font-family:var(--mono);font-size:11px;color:var(--green);background:var(--green-bg);border:1px solid var(--green-dim);border-radius:3px;padding:4px 9px;}
.am-b-fast{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--amber);background:var(--amber-bg);border:1px solid var(--amber-dim);border-radius:4px;padding:5px 9px;}
/* Photo badge — rides .am-b-book layout; sell triplet = outbound-link chip (ft-link-tour precedent) */
.am-b-photo{color:var(--sell);background:var(--sell-bg);border-color:var(--sell-dim);}
a.am-b-photo{text-decoration:none;}
a.am-b-photo:hover{border-color:var(--sell);}
span.am-b-photo{color:var(--text-dim);background:var(--am-hat-no-bg);border-style:dashed;}
.am-never{font-family:var(--mono);font-size:11px;color:var(--text-dim);}
.am-subh{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--am-sec-h);margin-bottom:9px;}
.am-tl{position:relative;padding-left:20px;}
.am-tl::before{content:'';position:absolute;left:4px;top:4px;bottom:8px;width:1px;background:var(--border);}
.am-tl-item{position:relative;margin-bottom:13px;}
.am-tl-item:last-child{margin-bottom:0;}
.am-tl-dot{position:absolute;left:-20px;top:3px;width:9px;height:9px;border-radius:50%;background:var(--border-bright);border:2px solid var(--am-you-bg);}
.am-tl-dot.on{background:var(--amber);}
.am-tl-date{font-family:var(--mono);font-size:11px;color:var(--text-muted);}
.am-tl-venue{font-family:var(--sans);font-size:13px;color:var(--text);}
.am-tl-more{font-family:var(--mono);font-size:11px;color:var(--text-dim);}
.am-combined{display:flex;gap:11px;align-items:flex-start;background:var(--am-combined-bg);border:1px solid var(--border);border-left:2px solid var(--sell);border-radius:4px;padding:11px 13px;}
.am-combined-tag{flex:none;font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--sell);background:var(--sell-bg);border:1px solid var(--sell-dim);border-radius:3px;padding:3px 7px;white-space:nowrap;margin-top:1px;}
.am-combined-body{font-family:var(--sans);font-size:12.5px;color:var(--text);line-height:1.5;}
.am-combined-body b{font-weight:600;}
.am-combined-date{color:var(--text-muted);}
.am-dot-sep{color:var(--am-sec-h);}
.am-combined-note{font-size:11.5px;color:var(--text-dim);}
.am-consider{display:flex;align-items:center;gap:12px;background:var(--yellow-bg);border:1px solid var(--yellow-dim);border-radius:5px;padding:11px 13px;}
.am-consider-body{flex:1;min-width:0;}
.am-consider-date{font-family:var(--sans);font-size:13px;color:var(--text);margin-bottom:2px;}
.am-consider-venue{font-family:var(--mono);font-size:11px;color:var(--text-muted);}
.am-dec{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;border-radius:4px;padding:7px 14px;white-space:nowrap;}
.am-dec-choose{color:var(--yellow);background:var(--bg);border:1px solid var(--yellow);}
.am-dec-buy{color:var(--green);background:var(--bg);border:1px solid var(--green);}
.am-dec-sell{color:var(--sell);background:var(--bg);border:1px solid var(--sell);}
.am-dec-pass{color:var(--gray);background:var(--bg);border:1px solid var(--gray-dim);}

/* brand-hat favorite gauge (conic fill by --aff) */
.am-gauge{position:relative;flex:0 0 108px;width:104px;height:88px;align-self:flex-end;cursor:help;}
.am-gauge::after{content:'';position:absolute;top:50%;left:50%;width:94px;height:94px;transform:translate(-50%,-50%);border-radius:50%;background:conic-gradient(var(--am-gauge-fill) calc(var(--aff)*1turn),var(--am-gauge-track) 0);-webkit-mask:radial-gradient(circle farthest-side,transparent calc(100% - 1.6px),#000 calc(100% - 1.6px));mask:radial-gradient(circle farthest-side,transparent calc(100% - 1.6px),#000 calc(100% - 1.6px));pointer-events:none;}
.am-gauge-glow{position:absolute;inset:-16px;background:radial-gradient(circle at 54% 60%,rgba(var(--am-gauge-glow),var(--glow,.1)),rgba(var(--am-gauge-glow),0) 66%);}
.am-gauge-base{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:grayscale(1) brightness(.55);opacity:.32;}
.am-gauge-fill{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;-webkit-mask:conic-gradient(#000 calc(var(--aff)*1turn),transparent 0) center/100% 100% no-repeat;mask:conic-gradient(#000 calc(var(--aff)*1turn),transparent 0) center/100% 100% no-repeat;filter:drop-shadow(0 3px 7px rgba(0,0,0,.55));}
/* Explicit favorite — the gauge is the promote/remove CTA; star = pinned to full */
.am-gauge-btn{cursor:pointer;transition:filter .12s;}
.am-gauge-btn:hover{filter:brightness(1.15);}
.am-gauge-btn:focus-visible{outline:1px solid var(--amber);outline-offset:3px;border-radius:4px;}
.am-gauge-star{position:absolute;top:-2px;right:2px;font-size:15px;line-height:1;color:var(--am-gauge-fill);text-shadow:0 0 7px rgba(var(--am-gauge-glow),.9);pointer-events:none;}

/* minimal edge case (hat-ineligible, never seen) + loose containers */
.am-minimal{border-top:1px solid var(--am-rule);padding:12px 20px 16px;font-family:var(--mono);font-size:10px;letter-spacing:.02em;color:var(--am-minimal);line-height:1.6;}
.am-loose{padding:22px 20px;}
.am-loading{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:12px;color:var(--text-muted);}
.am-hat-mini{width:24px;height:24px;object-fit:contain;opacity:.5;}
.am-err{color:var(--red);font-size:13px;}
.am-actions{display:flex;gap:8px;margin-top:12px;}
/* calling-surface breadcrumb under the name: "opened from the poster as Kingfish Ingram · ..." */
.am-from{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--text-dim);margin-top:6px;}
.am-from b{font-weight:400;color:var(--text);border-bottom:1px dotted var(--text-dim);}

/* ── poster theme: the festival poster's own paper, ink and juke-red, with Alfa Slab One for the
   name. Everything is a token swap over the site block above; the gauge draws from the brand
   hat's own red rather than the poster accent so the ring reads as part of the hat. ── */
.am-card[data-am-theme="poster"]{
  --mono:'Special Elite',monospace;--sans:'Oswald',sans-serif;
  --bg:#EDE0C2;--surface:#E3D2AB;--surface-bright:#EDE0C2;--border:#c7b58c;--border-bright:#a8925f;
  --text:#221A12;--text-muted:#5a4b33;--text-dim:#6f5e42;
  --amber:#A63D2F;--amber-dim:#7a2a20;--amber-bg:#e9cfae;
  --green:#3d6b45;--green-dim:#5a8a62;--green-bg:#d6dcc3;
  --yellow:#8A6A1F;--yellow-dim:#b09447;--yellow-bg:#e8d9ad;
  --red:#A63D2F;--sell:#2E4A6B;--sell-dim:#5f7a99;--sell-bg:#cfd6df;
  --hat:#8A6A1F;--hat-dim:#a8925f;--hat-bg:#e5d3a4;
  --book:#5a3f7a;--book-dim:#8b6fa8;--book-bg:#ddd0e3;
  --gray:#6f5e42;--gray-dim:#a8925f;
  --am-you-bg:#D9C79E;--am-rule:#b9a578;--am-sec-h:#7a6a4a;--am-sim-bg:#E9DBB8;--am-hat-no-bg:#E9DBB8;
  --am-combined-bg:#E9DBB8;--am-minimal:#7a6a4a;--am-you-lbl:#221A12;--am-gauge-track:#c7b58c;
  --am-hatch-a:#E3D2AB;--am-hatch-b:#EDE0C2;--am-play-hover:#e0c39a;
  --am-gauge-fill:#d80000;--am-gauge-glow:216,0,0;
  border-color:#221A12;border-radius:3px;box-shadow:0 30px 70px rgba(34,26,18,.45);
}
.am-card[data-am-theme="poster"] .am-name{font-family:'Alfa Slab One',serif;font-weight:400;font-size:25px;letter-spacing:0;text-transform:none;line-height:1.02;}
.am-card[data-am-theme="poster"] .am-close{background:#EDE0C2;border-color:#221A12;color:#221A12;}
.am-card[data-am-theme="poster"] .am-you{box-shadow:inset 0 8px 12px -10px rgba(34,26,18,.5);}

/* settlement line (map theme): the plate's "where" readout with the glyph the canvas
   draws. Lives in the base block, not the map theme, because the markup is theme-agnostic -
   only a caller that passes ctx.settlement ever renders it. */
.am-stl{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;
  letter-spacing:.04em;color:var(--text-muted);margin-top:5px;}
.am-stl-mark{width:13px;height:13px;flex:0 0 13px;color:var(--tint,var(--amber));}
.am-stl-why{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;
  color:var(--text-dim);margin-top:7px;}

/* ── map theme: the map plate's own bezel - paper ground, ink border with the inset paper
   outline, Oswald for the name. The accent is --tint, the settlement's REGION colour, set
   on the card by the caller, so the meters and dots match the dot that was clicked. Falls
   back to the poster juke-red if a caller passes no tint. ── */
.am-card[data-am-theme="map"]{
  --mono:'Special Elite',monospace;--sans:'Oswald',sans-serif;
  --bg:#EDE0C2;--surface:#EDE0C2;--surface-bright:#f5ecd6;--border:#c7b58c;--border-bright:#a8925f;
  --text:#221A12;--text-muted:#5a4b33;--text-dim:#6f5e42;
  --amber:var(--tint,#A63D2F);--amber-dim:#7a2a20;--amber-bg:#e9cfae;
  --green:#3d6b45;--green-dim:#5a8a62;--green-bg:#d6dcc3;
  --yellow:#8A6A1F;--yellow-dim:#b09447;--yellow-bg:#e8d9ad;
  --red:#A63D2F;--sell:#2E4A6B;--sell-dim:#5f7a99;--sell-bg:#cfd6df;
  --hat:#8A6A1F;--hat-dim:#a8925f;--hat-bg:#e5d3a4;
  --book:#5a3f7a;--book-dim:#8b6fa8;--book-bg:#ddd0e3;
  --gray:#6f5e42;--gray-dim:#a8925f;
  --am-you-bg:#E3D2AB;--am-rule:#b9a578;--am-sec-h:#7a6a4a;--am-sim-bg:#E9DBB8;--am-hat-no-bg:#E9DBB8;
  --am-combined-bg:#E9DBB8;--am-minimal:#7a6a4a;--am-you-lbl:#221A12;--am-gauge-track:#c7b58c;
  --am-hatch-a:#E3D2AB;--am-hatch-b:#EDE0C2;--am-play-hover:#e0c39a;
  /* Gauge keeps the brand hat's own red. The region tints (foothills purple, coast indigo,
     woods green) clash with the red logo the ring wraps, so the accent stops at the meters. */
  --am-gauge-fill:#d80000;--am-gauge-glow:216,0,0;
  background:linear-gradient(160deg,rgba(255,255,255,.28),transparent 55%),#EDE0C2;
  border:2px solid #221A12;border-radius:0;
  outline:1px solid #EDE0C2;outline-offset:-6px;
  box-shadow:0 8px 28px rgba(0,0,0,.55);
}
.am-card[data-am-theme="map"] .am-name{font-family:'Oswald',sans-serif;font-weight:600;font-size:22px;letter-spacing:0;text-transform:none;line-height:1.1;}
.am-card[data-am-theme="map"] .am-close{background:#EDE0C2;border-color:#221A12;color:#221A12;}
.am-card[data-am-theme="map"] .am-you{box-shadow:inset 0 8px 12px -10px rgba(34,26,18,.5);}

@media(max-width:768px){
  .artist-modal{width:100vw;max-width:100vw;}
  .am-card{border-radius:0;border:none;max-height:100vh;min-height:100vh;}
  .am-you-body{flex-wrap:wrap;}
  .am-gauge{align-self:center;margin:4px auto 0;}
}