/* The person page as tiles ("bento"; person.html, js/person.js): four columns on wide screens,
   two on tablets, one on phones. The violet hero tile holds the photo in their party's ring; the
   rest are white (or softly tinted) rounded tiles with a little bounce on hover. A tile with
   nothing to show stays hidden, and the grid packs the others (dense). */
.pb { --party: var(--party-other); --violet: radial-gradient(120% 140% at 100% 0%, #8d5be0, #4b33c9 45%, #21167c);
  --tile-shadow: var(--card-shadow, 0 2px 4px rgba(38, 27, 143, .05), 0 10px 26px rgba(38, 27, 143, .10));
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 14px;
  width: min(100% - 32px, 1180px); margin: 22px auto 64px; color: #150e5e; align-items: stretch; }
.pb[data-party="democrat"] { --party: var(--party-democrat); }
.pb[data-party="republican"] { --party: var(--party-republican); }
.pb > .pb-tile { grid-area: auto; min-width: 0; margin: 0; padding: 18px; border: 0; border-radius: 28px; background: #fff; box-shadow: var(--tile-shadow);
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s; }
.pb > .pb-tile[hidden] { display: none; }
.pb > .pb-tile:hover { transform: translateY(-3px); }
.pb h3, .pb .card-title, .pb .relation-title { margin: 0 0 10px; font-size: 16px; font-weight: 800; color: #150e5e; text-align: left; }
.pb .card-text { font-size: 15px; }
.pb-go { display: inline-block; margin-top: 10px; color: #4232d4; font-size: 13px; font-weight: 800; }
.pb-sub { margin: 14px 0 8px; font-size: 12px; color: #6b6890; text-transform: uppercase; letter-spacing: .06em; }

/* ---------- the hero: photo, name, position, tags, Contact / Compare ---------- */
/* Its color is the party's (js/person.js sets data-hero): red, blue, green, gold; violet for
   independents and everyone else; grey for an appointee with no party. --hero-ink is the party chip's text. */
.pb { --hero: var(--violet); --hero-ink: #21167c; }
.pb[data-hero="republican"] { --hero: radial-gradient(120% 140% at 100% 0%, #ff6b6b, #d42a33 45%, #7e0d16); --hero-ink: #a3141e; }
.pb[data-hero="democrat"] { --hero: radial-gradient(120% 140% at 100% 0%, #6b9bff, #2350e0 45%, #0c1f7e); --hero-ink: #1a3fc0; }
.pb[data-hero="green"] { --hero: radial-gradient(120% 140% at 100% 0%, #6fd697, #1f9a50 45%, #0a5229); --hero-ink: #137a3c; }
.pb[data-hero="libertarian"] { --hero: radial-gradient(120% 140% at 100% 0%, #ffcf5a, #d9930f 45%, #7a4704); --hero-ink: #8a5300; }
.pb[data-hero="appointed"] { --hero: radial-gradient(120% 140% at 100% 0%, #a3abb8, #5f6877 45%, #2b313b); --hero-ink: #3d4450; }
.pb > .pb-hero { grid-column: span 2; grid-row: span 2; display: grid; justify-items: center; align-content: center; gap: 6px; padding: 26px 22px 24px !important;
  text-align: center; background: var(--hero) !important; color: #fff; }
.pb-hero .img-box { width: min(200px, 60%); aspect-ratio: 1; margin-bottom: 16px; border: 0; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 6px #fff, 0 0 0 11px rgba(255, 255, 255, .35), 0 14px 30px rgba(0, 0, 0, .25); }
.pb-hero .img-box.filled { aspect-ratio: 1; }
.pb-hero .img-box img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.pb-hero .img-initials { color: #8d86c2; }
.pb-hero .name-row { justify-content: center; }
.pb-hero .page-heading { color: #fff; font-size: clamp(28px, 3vw, 40px); }
.pb-hero .page-subheading { margin: 0; color: rgba(255, 255, 255, .85); font-size: 18px; font-weight: 600; }
.pb-hero .position-link:hover { color: #fff; }
.pb-hero .fav-btn { color: rgba(255, 255, 255, .85); } .pb-hero .fav-btn:hover { color: #ffd84d; } .pb-hero .fav-btn.is-on { color: #ffcc00; }
.pb-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 6px; }
.pb-chip { padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .16); color: #fff; font-size: 12px; font-weight: 700; }
.pb-chip.is-party { background: #fff; color: var(--hero-ink); }
.pb-chip.is-status { background: #fff4d6; color: #7a5200; }
.pb-chip.is-appointed { background: rgba(255, 255, 255, .92); color: var(--hero-ink); text-decoration: none; }
a.pb-chip.is-appointed:hover { background: #fff; text-decoration: underline; text-underline-offset: 2px; }
.pb-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.pb-acts .contact-slot { margin: 0; }
.pb-act, .pb-acts .contact-btn { display: inline-flex; align-items: center; gap: 6px; height: auto; padding: 9px 16px; border: 0; border-radius: 14px;
  background: rgba(255, 255, 255, .18); color: #fff; font: 700 14px/1 var(--font-read); cursor: pointer; }
.pb-act:hover, .pb-acts .contact-btn:hover { background: rgba(255, 255, 255, .3); color: #fff; }
.pb-act[hidden] { display: none; }
.pb-acts .contact-btn .nav-label { display: inline; }

/* ---------- who they are: the bio and the Radicalism meter ---------- */
.pb > .pb-bio { grid-column: span 2; }
.pb-bio .person-meters { width: 100%; margin-top: 14px; font-size: 16px; }
.pb-bio .mini-meter { grid-template-columns: 6.6em 1fr; }
/* members' approval under Radicalism (js/person.js approval): green for the first box, red for the second */
.pb-bio .meter-approval { grid-template-columns: 6.6em 1fr 2.6em; }
.meter-approval[hidden] { display: none; }
.meter-split { display: flex; height: 8px; overflow: hidden; border-radius: 999px; background: #ece9fc; }
.meter-split i { display: block; background: #0a8f6a; transition: width .6s cubic-bezier(.34, 1.2, .64, 1); }
.meter-split i + i { background: #d1365a; }
.meter-pct { text-align: right; color: var(--ink, #150e5e); font-size: .95em; }
.meter-approval-note { margin: 2px 0 0; color: var(--muted, #6b6890); font-size: .72em; }
.meter-approval-note:empty { display: none; }

/* ---------- Election Day, counting down; the next meeting ---------- */
.pb-vote { display: grid; align-content: center; gap: 2px; background: linear-gradient(160deg, #e3f5ec, #c9efdd) !important; color: #0a5b43; }
.pb-big { font-size: 60px; font-weight: 900; line-height: 1; }
.pb-big-label { font-size: 16px; font-weight: 700; }
.pb-vote small { color: #2f7a62; font-size: 13px; }
.pb-vote .pb-go { color: #0a5b43; }
.pb-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-top: 10px; }
.pb-foot .pb-go { margin-top: 0; }
.pb-foot .cal-btn { padding: 7px 12px; background: rgba(255, 255, 255, .7); font-size: 13px; }
.pb-foot .cal-btn:hover { background: #fff; }
.pb-meet { background: linear-gradient(160deg, #fff7df, #ffefc2) !important; }
.pb-date { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: start; }
.pb-cal { display: grid; place-items: center; height: 56px; border-radius: 14px; background: #fff; color: #21167c; line-height: 1; }
.pb-cal small { font-size: 11px; font-weight: 800; text-transform: uppercase; } .pb-cal b { font-size: 22px; }
.pb-date b { display: block; font-size: 14px; }
.pb-date small, .pb-date .pb-urgent { display: block; color: #5d5a7d; font-size: 12.5px; line-height: 1.4; }
.pb-date .pb-urgent { margin-top: 4px; color: #7a5200; font-weight: 800; }

/* ---------- your take: one row per question ---------- */
.pb > .pb-take { grid-column: span 2; }
.pb-take .rt-person { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.pb-take .rt { grid-template-columns: 150px minmax(0, 1fr); grid-template-rows: none; align-items: center; gap: 12px; }
.pb-take .rt-q { font-size: 13px; }
.pb-take .rt-row { gap: 8px; }
.pb-take .rt-opt { grid-auto-flow: column; justify-content: center; align-items: center; gap: 8px; min-height: 0; padding: 9px 10px; border-radius: 14px; font-size: 13px; }
.pb-take .rt-emoji, .pb-take .rt.is-bare .rt-emoji { font-size: 22px; }
.pb-take .rt.is-bare .rt-opt { min-height: 0; }
.pb-take .rt-n { grid-column: 2; margin-top: -8px; font-size: 12px; }   /* (members' ratings: under the boxes) */
/* Match (js/person.js showMatch): a ring filled to the percent, the words, and why */
.pm { display: flex; align-items: center; gap: 16px; margin: 0 0 14px; padding: 12px 14px; border-radius: 16px; background: linear-gradient(120deg, #f4efff, #fdf0fb); }
.pm:empty { display: none; }
.pm-ring {
  --p: 50; flex: none; position: relative; width: 86px; height: 86px; border-radius: 50%; display: grid; place-content: center; text-align: center;
  background: conic-gradient(from -90deg, #967dfc, #c39cfa calc(var(--p) * .5%), #f0b4f1 calc(var(--p) * 1%), rgba(150, 125, 252, .15) 0);
}
.pm-ring::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: #fff; }
.pm-ring b, .pm-ring small { position: relative; line-height: 1; color: var(--btn-ink, #21167c); }
.pm-ring b { font-size: 22px; font-weight: 800; }
.pm-ring small { font-size: 11px; font-weight: 700; opacity: .7; text-transform: uppercase; letter-spacing: .06em; }
.pm-text { min-width: 0; }
.pm-words { display: block; font-size: 17px; color: var(--btn-ink, #21167c); }
.pm-why { margin: 4px 0 6px; padding-left: 18px; font-size: 13.5px; line-height: 1.4; }
.pm-note { display: block; font-size: 12px; opacity: .7; }
.pm-empty { margin: 0; font-size: 14px; }

/* ---------- stands for, controversies ---------- */
.pb-scandal { background: #fff5f7 !important; }
.pb .text-card .card-title { padding-right: 96px; }

/* ---------- in the news ---------- */
.pb-news { background: linear-gradient(160deg, #eef3ff, #dfe8ff) !important; }
.pb-news .news-list { display: grid; gap: 12px; grid-template-columns: 1fr; }
.pb-news .news-list li:first-child a { font-size: 17px; font-weight: 800; }
.pb-news .news-list li:nth-child(n + 4) { display: none; }
.pb-news .tile-more { color: #4232d4; font-size: 13px; font-weight: 800; }

/* ---------- what the office can do ---------- */
.pb > .pb-powers { grid-column: span 2; }
.pb-powers-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pb-powers-list li { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: start; }
.pb-pi { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 12px; background: #efedfd; font-size: 17px; }
.pb-powers-list.is-over .pb-pi { background: #fff4d6; }
.pb-powers-list b { display: block; font-size: 14px; }
.pb-powers-list small { display: block; color: #5d5a7d; font-size: 12.5px; line-height: 1.4; }

/* ---------- allies and opponents, the map ---------- */
.pb > .pb-rel { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-top: 18px; border-top: 0; }
.pb-rel .lump { min-height: 120px; }
.pb > .pb-map { display: grid; grid-template-rows: auto 1fr auto; gap: 8px; padding: 12px; }
.pb-map .area-mini-map { height: 100%; min-height: 190px; }

/* ---------- record: stances and bills ---------- */
.pb > .pb-record { grid-column: span 2; }
.pb-record .stand-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.pb-record .stand-item { padding: 10px 12px; border-radius: 14px; }
.pb-record .stand-item:nth-child(n + 6):not(.stand-bills) { display: none; }

/* ---------- reach them ---------- */
.pb-contact { display: grid; gap: 6px; }
.pb-contact a, .pb-write { padding: 8px 12px; border: 0; border-radius: 12px; background: #f5f3ff; color: #21167c; font: 600 14px/1.3 var(--font-read);
  text-align: left; text-decoration: none; overflow-wrap: anywhere; cursor: pointer; }
.pb-contact a:hover, .pb-write:hover { background: #ebe7ff; }
.pb-write { background: #21167c; color: #fff; font-weight: 800; } .pb-write:hover { background: #4232d4; }
/* (no Record tile: Reach them takes its place beside the allies) */
@media (min-width: 621px) {
  .pb:has(> .pb-record[hidden]) > .pb-reach { grid-column: span 2; }
  .pb:has(> .pb-record[hidden]):has(> .pb-reach[hidden]) > .pb-map { grid-column: 1 / -1; }
}
.pb-reach .person-social { justify-content: flex-start; margin-top: 12px; padding: 0; border: 0; }

/* ---------- comments: across the bottom ---------- */
.pb > .pb-talk { grid-column: 1 / -1; padding: 20px 22px; }

@media (max-width: 1000px) {
  .pb { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .pb { grid-template-columns: minmax(0, 1fr); width: auto; margin: 14px 12px 48px; }
  .pb > .pb-tile { grid-column: auto; grid-row: auto; }
  .pb > .pb-rel { grid-template-columns: 1fr; }
  .pb-take .rt { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .pb-take .rt-n { grid-column: auto; margin-top: 0; }
  .pb-take .rt.is-tallied:not(.is-bare) .rt-opt { grid-auto-flow: row; grid-template-columns: auto auto; row-gap: 2px; }   /* (the share on its own line) */
  .pb-take .rt.is-tallied:not(.is-bare) .rt-pct { grid-column: 1 / -1; justify-self: center; }
}