/* Mini profiles (2026-10-09): the card from profile-card.js, as a popover on wide screens and a bottom sheet on phones.
   Also used for the live preview on account.html (.pc-card). Night tokens from night.css; light mode via theme.css tokens. */
.pc-pop, .pc-card { width: min(340px, calc(100vw - 24px)); padding: 18px 18px 16px; border-radius: 16px; border: 1px solid var(--line2);
  background: linear-gradient(180deg, #181d36, #0e1122); color: var(--ivory); box-shadow: 0 30px 70px rgba(0,0,0,.55); display: grid; gap: 12px; }
.pc-pop { position: fixed; z-index: 75; opacity: 0; transform: translateY(6px) scale(.98); transition: opacity .2s ease, transform .25s var(--ease); }
.pc-pop.in { opacity: 1; transform: none; }
.pc-pop.sheet { left: 0 !important; right: 0; bottom: 0; top: auto !important; width: 100%; border-radius: 20px 20px 0 0; padding: 20px 20px calc(22px + env(safe-area-inset-bottom)); transform: translateY(30px); }
.pc-pop.sheet.in { transform: none; }
.pc-back { position: fixed; inset: 0; z-index: 74; background: transparent; }
@media (max-width: 640px) { .pc-back { background: rgba(5,6,12,.45); } }
.pc-top { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; }
.pc-av { width: 48px !important; height: 48px !important; font-size: 21px !important; }
.pc-id { display: grid; gap: 4px; min-width: 0; }
.pc-name { font: 500 26px/1 var(--serif); }
.pc-city { display: flex; gap: 5px; align-items: center; font: 400 12px/1.2 var(--mono); color: var(--muted); }
.pc-city svg { width: 12px; height: 12px; flex: none; }
.pc-x { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--hair); background: none; color: var(--ivory); cursor: pointer; display: grid; place-items: center; align-self: start; }
.pc-x svg { width: 12px; height: 12px; }
.pc-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.pc-tier { display: inline-flex; padding: 5px 10px; border-radius: 999px; font: 700 10px/1 Lato, "Helvetica Neue", Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; border: 1px solid var(--line2); color: var(--gold2); }
.pc-tier.t0 { color: var(--muted); border-color: var(--hair); }
.pc-tier.t2 { border-color: rgba(221,69,45,.55); color: #ffb3a6; }
.pc-tier.t3, .pc-tier.t4 { color: #1b1408; border-color: transparent; background: linear-gradient(180deg, #f6d995, #e8b95a 55%, #c9973f); }
.pc-bio { margin: 0; font-size: 18px; line-height: 1.4; color: var(--ivory2); }
.pc-facts { margin: 0; display: grid; gap: 7px; }
.pc-facts div { display: grid; grid-template-columns: 112px 1fr; gap: 10px; align-items: baseline; }
.pc-facts dt { display: flex; gap: 6px; align-items: center; font: 700 10px/1.2 Lato, "Helvetica Neue", Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pc-facts dt svg { width: 13px; height: 13px; flex: none; color: var(--gold); }
.pc-facts dd { margin: 0; font-size: 16px; line-height: 1.3; }
.pc-badges { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--hair); }
.pc-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; border: 1px solid var(--line); font: 900 12px/1 var(--display); letter-spacing: .02em; text-transform: uppercase; }
.pc-badge svg { width: 20px; height: 20px; padding: 4px; border-radius: 50%; color: #1b1408; background: linear-gradient(180deg, #f6d995, #e8b95a 55%, #c9973f); }

/* the names on the wall are buttons now */
button.who { font: inherit; color: inherit; text-align: left; background: none; cursor: pointer; width: 100%; }
button.who:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.act .avb { padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; }

:where([data-theme="light"]) .pc-pop, :where([data-theme="light"]) .pc-card { background: linear-gradient(180deg, #fffdf8, #f6f1e6); box-shadow: 0 24px 60px rgba(60, 45, 20, .2); }
:where([data-theme="light"]) .pc-tier.t2 { color: #b8321c; }
@media (max-width: 640px) { :where([data-theme="light"]) .pc-back { background: rgba(60, 50, 30, .3); } }

/* the avatar circle, so the card looks the same on pages that don't carry home.html's styles (account.html) */
.pc-av.av, .pc-card .av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 500 17px/1 var(--serif); color: #1b1408; background: var(--gold); box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--ring, var(--gold)); }
.pc-av.av.t0, .pc-card .av.t0 { background: #c9cbe0; --ring: #9aa0c4; }
.pc-av.av.t1 { background: #c9cbe0; --ring: #9aa0c4; } .pc-av.av.t2 { background: #f0c37a; --ring: var(--red); } .pc-av.av.t3, .pc-av.av.t4 { background: linear-gradient(135deg, #fbe7b4, #c69440); --ring: var(--gold2); }