/* =====================================================================
   PRETTY GIRLS WHO SERVE — house style
   Editorial identity: didone masthead, hairline ruby rules, pearl paper,
   one foil seal. Structure comes from rules and numerals, not from cards.
   ===================================================================== */
:root{
  --pearl:#FFFFFF;        /* paper: pure white */
  --paper-2:#FFF4F8;      /* the faintest pink band */
  --ink:#1B1119;          /* text */
  --ink-2:#6A5C66;        /* secondary text */
  --ruby:#8E1230;         /* the brand */
  --ruby-deep:#570A1D;
  --bubblegum:#FF4E9B;    /* the girl */
  --baby:#FFD7E7;
  --foil:#B08A2E;         /* certification only */
  --rule:rgba(27,17,25,.16);
  --rule-soft:rgba(27,17,25,.08);
  --ok:#1F6B45; --warn:#9A6B05; --bad:#A31621;
  --display:"Bodoni Moda",Didot,"Playfair Display",Georgia,serif;
  --text:"Manrope","Inter",-apple-system,Segoe UI,Roboto,sans-serif;
  --shell:1240px;
  box-sizing:border-box;
}
*,*::before,*::after{box-sizing:inherit}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--pearl);color:var(--ink);font-family:var(--text);
  font-size:16.5px;line-height:1.62;font-weight:450;-webkit-font-smoothing:antialiased}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1!important;transform:none!important}.rule-draw{transform:none!important}}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
:focus-visible{outline:2px solid var(--bubblegum);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- paper ---------- */
.satin{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1000px 440px at 100% -12%,rgba(255,215,231,.42),transparent 64%),
    radial-gradient(760px 420px at -8% 4%,rgba(255,78,155,.05),transparent 62%),
    #fff;}
.dust{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.42}
.app{position:relative;z-index:2}

/* ---------- masthead ---------- */
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:20px;
  padding:0 26px;height:66px;background:rgba(255,255,255,.94);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--ink)}
.mark{display:flex;align-items:baseline;gap:10px;text-decoration:none;color:var(--ink);white-space:nowrap}
.mark .gem{width:9px;height:9px;transform:rotate(45deg);background:var(--ruby);flex:none;align-self:center}
.mark b{font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:.01em;font-style:italic}
.nav{display:flex;gap:2px;margin-left:10px;overflow-x:auto;scrollbar-width:none;height:100%;align-items:stretch}
.nav::-webkit-scrollbar{display:none}
.nav button{display:flex;align-items:center;padding:0 15px;font-size:14px;font-weight:600;color:var(--ink-2);
  border-bottom:2px solid transparent;white-space:nowrap;transition:color .18s,border-color .18s}
.nav button:hover{color:var(--ink)}
.nav button.on{color:var(--ruby);border-bottom-color:var(--ruby)}
.who{margin-left:auto;display:flex;align-items:center;gap:11px}
.who .meta{display:grid;line-height:1.25;text-align:right}
.who .meta b{font-size:13.5px;font-weight:700}
.who .meta span{font-size:12px;color:var(--ink-2)}
@media (max-width:760px){.who .meta{display:none}}
.who .avatar{width:34px;height:34px;border-radius:50%;border:1px solid var(--ruby);color:var(--ruby);
  display:grid;place-items:center;font-family:var(--display);font-size:14px;font-weight:600}
.roleswitch{border:1px solid var(--rule);padding:7px 13px;font-size:12px;font-weight:600;color:var(--ink-2);border-radius:2px}
.roleswitch:hover{border-color:var(--ruby);color:var(--ruby)}

main{max-width:var(--shell);margin:0 auto;padding:40px 26px 96px}

/* phones: the masthead stacks, the nav gets its own scrolling row */
@media (max-width:820px){
  .topbar{height:auto;flex-wrap:wrap;row-gap:0;padding:10px 16px 0;align-items:center}
  .mark b{font-size:17px}
  .who{order:2}
  .roleswitch{order:3;margin-left:10px}
  .nav{order:4;width:100%;margin:8px 0 0;height:auto;border-top:1px solid var(--rule-soft)}
  .nav button{padding:11px 14px 10px;font-size:13.5px}
  main{padding:26px 16px 80px}
  h1{font-size:clamp(38px,11vw,58px)}
  .cover .kicker{flex-direction:column;gap:2px;align-items:flex-start}
  .coverfoot{gap:12px}
  .btn{padding:11px 20px}
  .figure{padding:16px 14px 14px}
  .drawer .dh,.drawer .db{padding-left:18px;padding-right:18px}
}
@media (max-width:420px){
  .mark b{font-size:15px}
  .figures{grid-template-columns:1fr 1fr}
  .seal,.progressdial{width:108px;height:108px}
}

/* ---------- one orchestrated entrance ---------- */
.rv{opacity:0;transform:translateY(10px);transition:opacity .55s ease,transform .55s ease}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.06s}.rv.d2{transition-delay:.12s}.rv.d3{transition-delay:.18s}

/* ---------- editorial type ---------- */
h1{font-family:var(--display);font-weight:500;font-size:clamp(46px,8vw,104px);line-height:.94;
  letter-spacing:-.015em;margin:0 0 14px}
h2{font-family:var(--display);font-weight:500;font-size:clamp(28px,4vw,46px);line-height:1.06;margin:0 0 12px}
h3{font-family:var(--text);font-weight:700;font-size:16px;letter-spacing:.005em;margin:0 0 10px}
h1 em,h2 em{font-style:italic;font-weight:400}
p{margin:0 0 14px}
.lede{font-size:clamp(16.5px,1.5vw,19px);line-height:1.6;color:var(--ink-2);max-width:56ch}
.small{font-size:13px;color:var(--ink-2)}
.eyebrow{font-family:var(--display);font-style:italic;font-size:15px;color:var(--ruby);margin:0 0 6px;font-weight:500}
.num{font-family:var(--display);font-variant-numeric:lining-nums tabular-nums}

/* a masthead rule that draws itself once, on load */
.hr{height:1px;background:var(--ink);margin:18px 0 26px;transform-origin:left;
  animation:draw .9s cubic-bezier(.2,.8,.2,1) both}
.hr.thin{background:var(--rule)}
.hr.ruby{background:var(--ruby);height:2px}
@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- cover ---------- */
.cover{position:relative;padding:8px 0 0}
.cover .kicker{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  font-size:12.5px;color:var(--ink-2);border-bottom:1px solid var(--ink);padding-bottom:10px;margin-bottom:26px}
.cover .kicker b{font-weight:700;color:var(--ink)}
.cover h1{max-width:15ch}
.coverfoot{display:flex;gap:26px;flex-wrap:wrap;align-items:center;margin-top:22px}

/* ---------- the ledger (National) ---------- */
.ledger{width:100%;border-collapse:collapse;margin-top:6px}
.ledger th{font-family:var(--text);font-size:11.5px;font-weight:700;color:var(--ink-2);text-align:left;
  padding:0 14px 9px 0;border-bottom:1px solid var(--ink);letter-spacing:.02em}
.ledger th.r,.ledger td.r{text-align:right;padding-right:0}
.ledger td{padding:16px 14px 16px 0;border-bottom:1px solid var(--rule-soft);vertical-align:baseline}
.ledger tr{cursor:pointer;transition:background .16s}
.ledger tr:hover td{background:var(--paper-2)}
.ledger .chapname{font-family:var(--display);font-size:22px;line-height:1.12;font-weight:500}
.ledger .campus{font-size:12.5px;color:var(--ink-2)}
.ledger .lead{font-size:14px}
.ledger .lead span{display:block;font-size:12px;color:var(--ink-2)}
.ledger .fig{font-family:var(--display);font-size:22px;font-variant-numeric:tabular-nums}
.ledger tr.flagged .chapname{color:var(--ruby)}
.ledger tr.flagged td:first-child{box-shadow:inset 3px 0 0 var(--ruby)}
.ledger tr.flagged td:first-child{padding-left:14px}
@media (max-width:860px){
  .ledger,.ledger tbody,.ledger tr,.ledger td{display:block;width:100%}
  .ledger thead{display:none}
  .ledger tr{border-bottom:1px solid var(--rule);padding:16px 0}
  .ledger td{border:0;padding:3px 0}
  .ledger td.r{text-align:left}
  .ledger tr.flagged td:first-child{box-shadow:none;padding-left:12px;border-left:3px solid var(--ruby)}
}

/* ---------- figures ---------- */
.figures{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink)}
@media (max-width:760px){.figures{grid-template-columns:repeat(2,1fr)}}
.figure{padding:20px 20px 18px;border-left:1px solid var(--rule-soft)}
.figure:first-child{border-left:0;padding-left:0}
@media (max-width:760px){.figure:nth-child(3){border-left:0;padding-left:0}}
.figure b{display:block;font-family:var(--display);font-weight:500;font-size:clamp(34px,4.6vw,52px);
  line-height:.98;font-variant-numeric:tabular-nums}
.figure span{display:block;font-size:12.5px;color:var(--ink-2);margin-top:4px;max-width:20ch}
.figure.alert b{color:var(--ruby)}
.figure.good b{color:var(--ok)}

/* ---------- status marks ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  padding:3px 0;border:0;color:var(--ink-2)}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.pill.certified{color:var(--ok)}
.pill.in_progress{color:var(--bubblegum)}
.pill.not_started{color:var(--ink-2)}
.pill.not_started::before{background:transparent;border:1px solid var(--ink-2)}
.pill.expired{color:var(--bad)}
.pill.flag{color:var(--warn);font-size:11.5px}
.pill.ghost{color:var(--ruby)}
.flags{display:flex;gap:14px;flex-wrap:wrap;margin-top:4px}

/* ---------- roster ---------- */
.roster{border-top:1px solid var(--ink);margin-top:10px}
.person{display:grid;grid-template-columns:38px 1fr auto;gap:14px;align-items:center;
  padding:15px 0;border-bottom:1px solid var(--rule-soft)}
.person .av{width:38px;height:38px;border-radius:50%;border:1px solid var(--rule);
  display:grid;place-items:center;font-family:var(--display);font-size:14px;color:var(--ruby)}
.person .nm{font-size:16px;font-weight:600}
.person .nm .small{font-weight:450}
.person .rl{font-family:var(--display);font-style:italic;font-size:14.5px;color:var(--ink-2)}
.person .rt{display:grid;justify-items:end;gap:6px}
.person .mini{height:2px;width:104px;background:var(--rule)}
.person .mini i{display:block;height:100%;background:var(--ruby)}
.person.is_certified .av{border-color:var(--ok);color:var(--ok)}
@media (max-width:560px){.person{grid-template-columns:38px 1fr}.person .rt{grid-column:2/-1;justify-items:start}}

/* ---------- panels (used sparingly, not for everything) ---------- */
.panel{background:var(--paper-2);border:1px solid rgba(255,78,155,.22);padding:22px;border-radius:2px}
.panel h3{padding-bottom:9px;border-bottom:1px solid var(--rule-soft);margin-bottom:6px}
.cols{display:grid;gap:22px}
.c2{grid-template-columns:1fr 1fr}.c3{grid-template-columns:repeat(3,1fr)}
.c-side{grid-template-columns:minmax(0,1fr) 300px}
@media (max-width:900px){.c2,.c3,.c-side{grid-template-columns:1fr}}
.listrow{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--rule-soft);font-size:14.5px}
.listrow:last-child{border-bottom:0}
.listrow span:first-child{color:var(--ink-2)}

/* ---------- the seal: the one bold moment ---------- */
.seal{width:132px;height:132px;flex:none;position:relative;display:grid;place-items:center;text-align:center}
.seal .disc{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#F0D9A0,var(--foil) 52%,#7E5E15);
  box-shadow:0 10px 26px rgba(126,94,21,.34),inset 0 -6px 14px rgba(0,0,0,.2)}
.seal .disc::after{content:"";position:absolute;inset:7px;border-radius:50%;border:1px solid rgba(255,255,255,.45)}
.seal .txt{position:relative;z-index:2;font-family:var(--display);font-size:13px;line-height:1.15;color:#3B2A05;font-weight:600;padding:0 16px}
.seal.pending .disc{background:none;border:1px dashed var(--rule);box-shadow:none}
.seal.pending .txt{color:var(--ink-2)}
.progressdial{width:132px;height:132px;flex:none;border-radius:50%;display:grid;place-items:center;position:relative;
  background:conic-gradient(var(--ruby) calc(var(--p,0)*1%),var(--rule-soft) 0)}
.progressdial::after{content:"";position:absolute;inset:9px;border-radius:50%;background:#fff}
.progressdial b{position:relative;z-index:2;font-family:var(--display);font-size:32px;line-height:1}
.progressdial span{position:relative;z-index:2;font-size:11px;color:var(--ink-2)}

/* ---------- plates (chapter tiles where a grid is right) ---------- */
.plates{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--ink)}
@media (max-width:760px){.plates{grid-template-columns:1fr}}
.plate{text-align:left;padding:22px 22px 22px 0;border-bottom:1px solid var(--rule-soft);position:relative}
.plate:nth-child(even){padding-left:22px;border-left:1px solid var(--rule-soft)}
@media (max-width:760px){.plate:nth-child(even){padding-left:0;border-left:0}}
.plate .pn{font-family:var(--display);font-size:20px}
.plate .ps{font-size:12.5px;color:var(--ink-2);margin-top:2px}
.plate ul{list-style:none;margin:12px 0 0;padding:0}
.plate li{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid var(--rule-soft);font-size:14px}

/* ---------- the week's queue ---------- */
.queue{border-top:1px solid var(--ink);margin-top:26px}
.qitem{display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;width:100%;text-align:left;
  padding:22px 0;border-bottom:1px solid var(--rule-soft);transition:padding-left .2s}
.qitem:hover{padding-left:10px}
.qcount{font-family:var(--display);font-size:clamp(34px,5vw,50px);line-height:.9;min-width:1.6em;color:var(--ink)}
.qitem.p1 .qcount{color:var(--ruby)}
.qitem.p2 .qcount{color:var(--warn)}
.qtitle{display:block;font-size:17.5px;font-weight:600}
.qdetail{display:block;font-size:13.5px;color:var(--ink-2)}
.qgo{font-size:13px;font-weight:600;color:var(--ruby);border-bottom:1px solid var(--ruby);padding-bottom:1px}
@media (max-width:560px){.qitem{grid-template-columns:auto 1fr;gap:16px}.qgo{display:none}}

/* ---------- the Sister Network ---------- */
.sisters{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:24px}
@media (max-width:1050px){.sisters{grid-template-columns:repeat(3,1fr)}}
@media (max-width:780px){.sisters{grid-template-columns:repeat(2,1fr)}}
@media (max-width:440px){.sisters{grid-template-columns:1fr}}
.sister{text-align:left;display:grid;gap:3px;padding:0 0 18px;border-bottom:1px solid var(--rule-soft);transition:transform .22s}
.sister:hover{transform:translateY(-3px)}
.sister:hover .face{box-shadow:0 10px 26px rgba(142,18,48,.2)}
.face{display:block;width:100%;aspect-ratio:4/5;background:var(--paper-2) center/cover no-repeat;border-radius:2px;margin-bottom:12px;
  transition:box-shadow .22s}
.face.letters{display:grid;place-items:center;font-family:var(--display);font-size:38px;color:var(--ruby);
  background:linear-gradient(160deg,var(--paper-2),#FFE7F1)}
.sname{font-size:16.5px;font-weight:700;line-height:1.2}
.sname em{font-family:var(--display);font-style:italic;font-weight:400;color:var(--bubblegum);font-size:14px}
.schap{font-family:var(--display);font-style:italic;font-size:14px;color:var(--ruby)}
.smaj{font-size:13px;color:var(--ink-2)}
.sister.me .face{outline:2px solid var(--bubblegum);outline-offset:2px}
.badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.badges>span{font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:999px;white-space:nowrap}
.badge-p31{background:var(--foil);color:#33240A}
.badge-board{background:var(--ruby);color:#fff}
.badge-founding{background:var(--bubblegum);color:#3A0018}
.badge-eff{background:var(--paper-2);color:var(--ruby);border:1px solid rgba(142,18,48,.3)}
.bigface{width:100%;aspect-ratio:4/3;background:var(--paper-2) center/cover no-repeat;border-radius:2px}
.bigface.letters{display:grid;place-items:center;font-family:var(--display);font-size:62px;color:var(--ruby);
  background:linear-gradient(160deg,var(--paper-2),#FFE7F1)}

/* ---------- her privacy switches ---------- */
.toggle{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;padding:13px 0;border-top:1px solid var(--rule-soft)}
.toggle:first-of-type{border-top:0}
.toggle input{width:19px;height:19px;margin-top:3px;accent-color:var(--bubblegum)}
.toggle b{display:block;font-size:15px}
.toggle .small{display:block;margin-top:2px}
.fields label{display:grid;gap:5px;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:12px}
.fields input,.fields textarea,.filters select{border:1px solid var(--rule);background:#fff;padding:10px 12px;
  font-size:15px;font-weight:450;color:var(--ink);border-radius:2px;font-family:var(--text)}
.filters select{border:0;border-bottom:1px solid var(--ink);border-radius:0;padding:7px 2px;background:transparent}

/* ---------- dues queue ---------- */
.duesbar{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:16px 0;margin-top:24px;
  border-top:1px solid var(--ink);border-bottom:1px solid var(--rule)}
.pickall{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600}
.pickall input,.ledger input[type=checkbox]{width:18px;height:18px;accent-color:var(--ruby)}
.proofbtn{font-size:13px;font-weight:600;color:var(--ruby);border-bottom:1px solid var(--ruby);padding-bottom:1px}
.proofimg{width:100%;border:1px solid var(--rule);border-radius:2px}
.proofshot{aspect-ratio:4/3;background:var(--paper-2);display:grid;place-items:center;padding:24px;text-align:center;
  color:var(--ink-2);font-size:14px;border:1px dashed var(--rule)}

/* ---------- the welcome ---------- */
#welcome{position:fixed;inset:0;z-index:80;background:#fff;display:grid;place-items:center;text-align:center;overflow:hidden}
#welcome.gone{display:none}
#welcome .glow{position:absolute;width:120vmax;height:120vmax;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,215,231,.85),rgba(255,78,155,.12) 55%,transparent 72%);
  animation:bloom 2.6s cubic-bezier(.2,.8,.2,1) both}
@keyframes bloom{from{transform:scale(.15);opacity:0}60%{opacity:1}to{transform:scale(1);opacity:1}}
#welcome .wgem{width:16px;height:16px;transform:rotate(45deg) scale(0);background:linear-gradient(135deg,#E2455F,var(--ruby));
  margin:0 auto 26px;box-shadow:0 0 40px rgba(226,69,95,.7);animation:gem .9s cubic-bezier(.2,1.4,.3,1) .15s both}
@keyframes gem{to{transform:rotate(45deg) scale(1)}}
#welcome .winner{position:relative;z-index:2;padding:30px}
#welcome .wline{font-family:var(--display);font-size:clamp(15px,2vw,20px);font-style:italic;color:var(--ruby);
  opacity:0;animation:up .8s cubic-bezier(.2,.8,.2,1) .5s both}
#welcome .wname{font-family:var(--display);font-size:clamp(46px,11vw,120px);line-height:.94;margin:6px 0 0;
  opacity:0;animation:up 1s cubic-bezier(.2,.8,.2,1) .85s both}
#welcome .wsub{font-size:clamp(14px,1.6vw,17px);color:var(--ink-2);margin-top:16px;
  opacity:0;animation:up .8s cubic-bezier(.2,.8,.2,1) 1.35s both}
#welcome .wgo{margin-top:30px;opacity:0;animation:up .7s cubic-bezier(.2,.8,.2,1) 1.85s both}
@keyframes up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
#welcome .wskip{position:absolute;top:18px;right:20px;z-index:3;font-size:12px;color:var(--ink-2);
  border-bottom:1px solid var(--rule);padding-bottom:2px}
@media (prefers-reduced-motion:reduce){
  #welcome .glow,#welcome .wgem,#welcome .wline,#welcome .wname,#welcome .wsub,#welcome .wgo{animation:none;opacity:1;transform:none}
}

/* ---------- filters ---------- */
.filters{display:flex;gap:18px;flex-wrap:wrap;align-items:center;padding:14px 0;border-bottom:1px solid var(--rule)}
.filters input{border:0;border-bottom:1px solid var(--ink);background:transparent;padding:7px 2px;font-size:15px;min-width:230px;flex:1}
.filters input::placeholder{color:var(--ink-2)}
.chipbtn{font-size:13px;font-weight:600;color:var(--ink-2);padding:4px 0;border-bottom:2px solid transparent}
.chipbtn:hover{color:var(--ink)}
.chipbtn.on{color:var(--ruby);border-bottom-color:var(--ruby)}

/* ---------- drawer ---------- */
.scrim{position:fixed;inset:0;background:rgba(20,8,14,.46);z-index:60;opacity:0;pointer-events:none;transition:opacity .28s}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(580px,95vw);background:#fff;z-index:61;
  transform:translateX(102%);transition:transform .34s cubic-bezier(.22,.9,.24,1);display:grid;grid-template-rows:auto 1fr;
  box-shadow:-20px 0 70px rgba(43,7,16,.3)}
.drawer.on{transform:none}
.drawer .dh{position:relative;padding:26px 26px 20px;border-bottom:1px solid var(--ink);background:#fff}
.drawer .dh h2{margin:0;font-size:clamp(26px,4vw,38px)}
.drawer .db{overflow:auto;padding:24px 26px 40px}
.closeX{position:absolute;top:18px;right:20px;width:32px;height:32px;border:1px solid var(--rule);border-radius:50%;
  font-size:14px;color:var(--ink-2)}
.closeX:hover{border-color:var(--ruby);color:var(--ruby)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--ruby);color:#fff;
  border:1px solid var(--ruby);padding:12px 26px;font-size:14.5px;font-weight:600;text-decoration:none;border-radius:2px;
  transition:background .18s,color .18s}
.btn:hover{background:var(--ruby-deep);border-color:var(--ruby-deep)}
.btn.ghost{background:transparent;color:var(--ruby)}
.btn.ghost:hover{background:var(--ruby);color:#fff}
.btn.pink{background:var(--bubblegum);border-color:var(--bubblegum);color:#3A0018}
.btn.pink:hover{background:#F02F84;border-color:#F02F84}
.btn.sm{padding:8px 16px;font-size:13px}
.btnrow{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}

/* ---------- notes ---------- */
.note{border-left:2px solid var(--ruby);padding:4px 0 4px 18px;margin:20px 0;max-width:62ch}
.note.warn{border-left-color:var(--warn)}
.note.good{border-left-color:var(--ok)}
.note b{font-weight:700}
.empty{padding:60px 0;color:var(--ink-2);border-top:1px solid var(--rule)}
.offline{background:var(--ink);color:var(--baby);text-align:center;padding:7px 16px;font-size:12.5px}
.offline b{color:#fff}