/* ==========================================================================
   BuckBallot social look: option A "Handbill", chosen by Chris on November 12.
   1880s political-cartoon poster colors on a clean social app. Loads last.
   Rules from his spec: bright colors on buttons, results and highlights; cream
   behind all reading text; thick ink outlines; one wood-type headline per screen;
   Inter for body text and numbers; halftone and sunburst only on big moments;
   one loud element and at most one Buck picture per screen.
   Contrast (WCAG AA): ink on cream 16.9, cobalt on cream 6.1, ink on gold 10.2,
   ink on green 5.4, cream on cobalt 6.1. Red is used only for large lettering
   (cream on red and red on cream are 3.8, fine at 24px, or 18.7px bold, and up).
   ========================================================================== */
@font-face{font-family:"Ultra";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ultra-latin-400-normal.woff2) format("woff2")}

html.skin-social{
  --bb-red:#E63B2E; --bb-cobalt:#1F4FD8; --bb-gold:#F5B700; --bb-green:#1E9E5A; --bb-ink:#141414; --bb-cream:#FFF4DC;
  --bb-ground:#F6E3B4;       /* the paper behind the cards */
  --bb-card:#FFF4DC;         /* cream: behind all reading text */
  --bb-text:#141414;
  --bb-line:#141414;         /* outlines and hard shadows */
  --bb-link:#1F4FD8;
  --bb-soft:#5A4A2E;         /* secondary text: 7.6 on cream */
  --bb-on-gold:#141414; --bb-on-cobalt:#FFF4DC; --bb-on-red:#FFF4DC;
  --bb-outline:3px solid var(--bb-line); --bb-shadow:5px 5px 0 var(--bb-line); --bb-radius:10px;
  --bb-head:"Ultra","Rockwell Extra Bold",Rockwell,Georgia,serif;
  --bb-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --bb-grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .3 0 0 0 0 .22 0 0 0 0 .08 0 0 0 .14 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --bb-tabbar-h:72px;
}
/* Night edition: dark paper, cream ink. Bright colors stay; text on them stays dark or cream as in daylight. */
html.skin-social[data-theme="dark"]{
  --bb-ground:#16120D; --bb-card:#241E16; --bb-text:#F6ECD6; --bb-line:#F6ECD6; --bb-link:#9DB8FF; --bb-soft:#D3C3A2;
  --bb-shadow:5px 5px 0 #000;
}

html.skin-social body{background:var(--bb-ground);background-image:var(--bb-grain);color:var(--bb-text);font-family:var(--bb-body)}

/* ---------- top bar: the name is the one wood-type headline ---------- */
html.skin-social header.top{background:var(--bb-card);border-bottom:var(--bb-outline);border-top:0;box-shadow:none}
html.skin-social header.top .topbar{min-height:58px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
html.skin-social .h-mark,html.skin-social .mast-mark{display:none !important}
html.skin-social .brand{font-family:var(--bb-head);font-weight:400;font-size:28px;line-height:1;letter-spacing:.01em;color:var(--bb-red);text-decoration:none}
html.skin-social .brand i{font-style:normal;color:var(--bb-cobalt)}
html.skin-social[data-theme="dark"] .brand i{color:#7FA0FF}
html.skin-social #acct-btn{min-height:44px;padding:0 16px;border:2.5px solid var(--bb-line);border-radius:999px;background:var(--bb-card);color:var(--bb-text);font-weight:800;box-shadow:none}

/* ---------- three tabs; the gold coin in the middle ---------- */
.bb-tabbar{display:flex;align-items:center;gap:6px;margin:0 auto}
.bb-tab{display:inline-flex;align-items:center;gap:8px;min-height:44px;min-width:76px;padding:6px 14px;border:2.5px solid transparent;border-radius:12px;color:var(--bb-text);text-decoration:none;font-weight:800;font-size:15px;transition:transform .15s ease,background .15s ease}
.bb-tab svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;flex:none}
.bb-tab:hover{transform:translateY(-2px)}
.bb-tab[aria-current="page"]{background:var(--bb-gold);color:var(--bb-on-gold);border-color:var(--bb-line)}
.bb-coin{display:inline-flex;align-items:center;gap:10px;border:0;background:transparent;color:var(--bb-text);text-decoration:none;cursor:pointer;padding:0 6px;font:inherit}
.bb-coin__face{position:relative;display:block;flex:none;width:52px;height:52px;border-radius:50%;border:3px solid var(--bb-line);background:var(--bb-gold);
  box-shadow:inset 0 0 0 5px var(--bb-gold),inset 0 0 0 10px var(--bb-red),0 4px 0 var(--bb-line);transition:transform .18s ease}
.bb-coin__face::before,.bb-coin__face::after{content:"";position:absolute;left:50%;top:50%;background:#141414;border-radius:3px;transform:translate(-50%,-50%)}
.bb-coin__face::before{width:20px;height:6px} .bb-coin__face::after{width:6px;height:20px}
.bb-coin__label{font-weight:800;font-size:14px;line-height:1.1;white-space:nowrap;background:var(--bb-card);border:2.5px solid var(--bb-line);border-radius:6px;padding:3px 8px}
.bb-coin:hover .bb-coin__face{transform:translateY(-3px) rotate(-8deg)}
.bb-coin[aria-current="page"] .bb-coin__label{background:var(--bb-gold);color:var(--bb-on-gold)}
.bb-coin.is-drop .bb-coin__face{animation:bb-drop .7s cubic-bezier(.3,0,.4,1) both}
@keyframes bb-drop{0%{transform:translateY(-40px)}45%{transform:translateY(0)}62%{transform:translateY(-12px)}78%{transform:translateY(0)}90%{transform:translateY(-4px)}100%{transform:translateY(0)}}
.bb-tabbar .me-dot{position:absolute;top:4px;right:10px}
.bb-tab{position:relative}

/* the bottom tab bar is used up to 960px wide; four tabs and the coin don't fit a top bar until then */
@media (max-width:960px){
  html.skin-social header.top .bb-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:20;margin:0;display:grid;grid-template-columns:1fr 1fr auto 1fr;align-items:end;gap:0;
    padding:6px max(10px,env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px)) max(10px,env(safe-area-inset-left,0px));
    background:var(--bb-card);border-top:var(--bb-outline)}
  .bb-tab{flex-direction:column;justify-self:center;gap:2px;font-size:14px;padding:6px 6px;min-width:64px;white-space:nowrap}
  .bb-coin{flex-direction:column;gap:6px;margin-top:-34px}
  .bb-coin__face{width:72px;height:72px;box-shadow:inset 0 0 0 6px var(--bb-gold),inset 0 0 0 12px var(--bb-red),0 4px 0 var(--bb-line)}
  .bb-coin__face::before{width:28px;height:8px} .bb-coin__face::after{width:8px;height:28px}
  html.skin-social main.wrap{padding-bottom:calc(var(--bb-tabbar-h) + 48px + env(safe-area-inset-bottom,0px))}
  html.skin-social .site-foot{padding-bottom:calc(var(--bb-tabbar-h) + 44px + env(safe-area-inset-bottom,0px))}
  html.skin-social .vfoot{bottom:calc(var(--bb-tabbar-h) + 14px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:400px){ .bb-coin__label{font-size:13px;padding:2px 5px} .bb-tab{font-size:13px;min-width:56px;padding:6px 3px} }
@media (max-width:360px){ .bb-tab{white-space:normal;text-align:center;line-height:1.1;min-width:0;padding:4px 2px} .bb-coin__label{white-space:normal;max-width:98px;text-align:center} }
@media (max-width:350px){ .bb-tab{min-width:52px;padding:6px 2px} html.skin-social .brand{font-size:24px} .bb-left b{font-size:21px} }

/* the legal footer stays on the Look it up pages only */
html.skin-social body[data-screen="books"] .site-foot,html.skin-social body[data-screen="lookup"] .site-foot,html.skin-social body[data-screen="feed"] .site-foot,html.skin-social body[data-screen="post"] .site-foot,html.skin-social body[data-screen="you"] .site-foot{display:none}

/* ---------- screens ---------- */
.bb-screen{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:22px}
.bb-h2{margin:0;font:800 20px/1.25 var(--bb-body);color:var(--bb-text)}
/* one wood-type headline per screen (the name in the top bar): every other heading is Inter */
html.skin-social .bb-screen h1,html.skin-social .bb-screen h2,html.skin-social .bb-screen h3{font-family:var(--bb-body);font-weight:800;letter-spacing:0;font-variation-settings:normal;color:var(--bb-text)}
.bb-soft{color:var(--bb-soft)}
.bb-link{color:var(--bb-link);font-weight:700;text-underline-offset:3px}
.bb-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- the post card (one design for every post) ---------- */
.bb-card,.bb-pinned,.bb-panel{position:relative;background:var(--bb-card);background-image:var(--bb-grain);color:var(--bb-text);border:var(--bb-outline);box-shadow:var(--bb-shadow);
  border-radius:7px 13px 8px 12px / 12px 7px 13px 8px;transition:transform .18s ease,box-shadow .18s ease}
.bb-card:active{transform:rotate(-.6deg) translate(2px,2px);box-shadow:2px 2px 0 var(--bb-line)}
.bb-card__head{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--bb-gold);color:var(--bb-on-gold);border-bottom:var(--bb-outline);border-radius:5px 10px 0 0}
.bb-card--vote .bb-card__head{background:var(--bb-cobalt);color:var(--bb-on-cobalt)}
.bb-avatar{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:2.5px solid #141414;background:var(--bb-cobalt);color:#FFF4DC;font-weight:800;font-size:15px;text-transform:uppercase}
.bb-avatar--red{background:var(--bb-red)} .bb-avatar--green{background:var(--bb-green);color:#141414} .bb-avatar--ink{background:#141414}
.bb-card__who{display:flex;flex-direction:column;min-width:0;flex:1}
.bb-card__name{border:0;background:none;padding:0;color:inherit;font:800 16px/1.2 var(--bb-body);text-align:left;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bb-card__name:hover{text-decoration:underline}
.bb-card__meta{font-size:14px;line-height:1.3}
.bb-mine{display:inline-block;margin-left:6px;padding:0 7px;border:2px solid #141414;border-radius:999px;background:var(--bb-cream);color:#141414;font-size:12.5px;font-weight:800;vertical-align:1px}
.bb-card__more{flex:none;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:inherit;font:800 22px/1 var(--bb-body);cursor:pointer}
.bb-card__more:hover{background:rgba(20,20,20,.1)}
.bb-menu{position:absolute;right:10px;top:56px;z-index:6;display:flex;flex-direction:column;min-width:190px;background:var(--bb-card);border:var(--bb-outline);border-radius:8px;box-shadow:4px 4px 0 var(--bb-line);overflow:hidden}
.bb-menu button,.bb-menu a{min-height:44px;padding:0 14px;border:0;border-top:2px solid var(--bb-line);background:transparent;color:var(--bb-text);font:700 15px var(--bb-body);text-align:left;text-decoration:none;display:flex;align-items:center;cursor:pointer}
.bb-menu > :first-child{border-top:0}
.bb-menu button:hover,.bb-menu a:hover{background:var(--bb-gold);color:var(--bb-on-gold)}
.bb-menu button:disabled{opacity:.6;cursor:default;background:transparent;color:var(--bb-text)}
.bb-card__body{display:flex;flex-direction:column;gap:12px;padding:12px 14px 14px}
.bb-card__actions{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:10px 12px 12px;border-top:var(--bb-outline)}

.bb-top3{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.bb-top3__item{display:flex;align-items:center;gap:12px}
.bb-top3__n{flex:none;display:grid;place-items:center;min-width:58px;height:46px;padding:0 4px;border:2.5px solid #141414;border-radius:6px;box-shadow:3px 3px 0 #141414;font:400 26px/1 var(--bb-head);font-variant-numeric:tabular-nums}
.bb-top3__item:nth-child(1) .bb-top3__n{background:var(--bb-red);color:var(--bb-on-red)}
.bb-top3__item:nth-child(2) .bb-top3__n{background:var(--bb-cobalt);color:var(--bb-on-cobalt)}
.bb-top3__item:nth-child(3) .bb-top3__n{background:var(--bb-gold);color:var(--bb-on-gold)}
.bb-top3__label{font-weight:700;font-size:16px;line-height:1.25}
.bb-vs{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:15px}
.bb-vs b{font-weight:800}
.bb-delta{display:inline-flex;align-items:center;padding:1px 9px;border:2px solid var(--bb-line);border-radius:999px;font-weight:700;font-size:14px;background:var(--bb-card)}
.bb-delta.up::before{content:"▲";font-size:10px;margin-right:5px;color:var(--bb-green)}
.bb-delta.down::before{content:"▼";font-size:10px;margin-right:5px;color:var(--bb-red)}
.bb-note{margin:0;font-size:16px;line-height:1.45;overflow-wrap:anywhere}
.bb-take__on{margin:0;font-size:15px;line-height:1.4}
.bb-take__on b{display:block;font-size:16px;margin-bottom:2px}
.bb-pill{display:inline-block;padding:1px 10px;border:2px solid #141414;border-radius:999px;font-weight:800;font-size:14px;vertical-align:1px}
.bb-pill--yes{background:var(--bb-green);color:#141414} .bb-pill--no{background:var(--bb-gold);color:#141414}

.bb-act{display:inline-flex;align-items:center;gap:5px;min-height:44px;padding:0 9px;border:2.5px solid var(--bb-line);border-radius:10px;background:var(--bb-card);color:var(--bb-text);
  font:700 14px var(--bb-body);text-decoration:none;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.bb-act svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.bb-act:hover{transform:translateY(-2px);box-shadow:0 3px 0 var(--bb-line)}
.bb-act:active{transform:translateY(1px);box-shadow:none}
.bb-act--make{margin-left:auto;background:var(--bb-gold);color:var(--bb-on-gold)}
.bb-act--cosign[aria-pressed="true"]{background:#141414;color:#FFF4DC;border-color:#141414}
html.skin-social[data-theme="dark"] .bb-act--cosign[aria-pressed="true"]{background:var(--bb-cream);color:#141414;border-color:var(--bb-cream)}

/* the CO-SIGNED stamp */
.bb-stamp{position:absolute;top:auto;bottom:92px;right:8px;z-index:2;pointer-events:none;padding:4px 12px;border:4px solid var(--bb-red);border-radius:4px;color:var(--bb-red);
  font:900 19px/1.1 var(--bb-body);letter-spacing:.08em;opacity:0;transform:rotate(-12deg);mix-blend-mode:multiply;filter:url(#bb-inkrough)}
html.skin-social[data-theme="dark"] .bb-stamp{mix-blend-mode:normal;color:#FF6B5E;border-color:#FF6B5E}
.bb-card.is-cosigned .bb-stamp{opacity:.92}
.bb-card.is-thunk .bb-stamp{animation:bb-thunk .42s cubic-bezier(.2,.9,.3,1.3) both}
.bb-card.is-thunk{animation:bb-shake .32s ease .16s both}
@keyframes bb-thunk{0%{opacity:0;transform:rotate(-12deg) scale(2.3)}55%{opacity:.95;transform:rotate(-12deg) scale(.9)}75%{transform:rotate(-12deg) scale(1.05)}100%{opacity:.92;transform:rotate(-12deg) scale(1)}}
@keyframes bb-shake{0%,100%{transform:none}30%{transform:translateY(3px)}60%{transform:translateY(-1px)}}

/* buttons and chips */
.bb-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 18px;border:2.5px solid var(--bb-line);border-radius:10px;background:var(--bb-card);color:var(--bb-text);
  font:800 16px/1.15 var(--bb-body);text-decoration:none;cursor:pointer;box-shadow:3px 3px 0 var(--bb-line);transition:transform .15s ease,box-shadow .15s ease}
.bb-btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--bb-line)}
.bb-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--bb-line)}
.bb-btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:3px 3px 0 var(--bb-line)}
.bb-btn--main{background:var(--bb-cobalt);color:#FFF4DC}
.bb-btn--gold{background:var(--bb-gold);color:#141414}
.bb-btn--big{min-height:56px;font-size:18px;padding:0 22px}
.bb-btn[aria-pressed="true"]{background:#141414;color:#FFF4DC}
html.skin-social[data-theme="dark"] .bb-btn[aria-pressed="true"]{background:var(--bb-cream);color:#141414}
.bb-textbtn{border:0;background:none;padding:0 2px;min-height:44px;color:var(--bb-link);font:700 15px var(--bb-body);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.bb-chip{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 11px;border:2px solid var(--bb-line);border-radius:999px;background:var(--bb-card);color:var(--bb-text);font:700 14px/1.2 var(--bb-body);text-decoration:none;cursor:pointer;align-self:flex-start}
.bb-chip--fact::after{content:"↗";font-size:13px}
.bb-chip--fact:hover{background:var(--bb-gold);color:#141414}

/* pinned question and vote cards */
.bb-pinned{display:flex;flex-direction:column;gap:12px;padding:14px}
.bb-pinned__tag,.bb-vote__label{align-self:flex-start;margin:0;padding:3px 10px;border:2px solid #141414;border-radius:6px;background:var(--bb-cobalt);color:#FFF4DC;font-weight:800;font-size:14px}
.bb-vote__label{background:var(--bb-card);color:var(--bb-text);border-color:var(--bb-line)}
.bb-pinned__on{margin:0;font-size:15px;line-height:1.4}
.bb-pinned__q,.bb-vote__q{margin:0;font-weight:800;font-size:18px;line-height:1.3}
.bb-vote__what{margin:0;font-size:16px;line-height:1.4}
.bb-vote__btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bb-vote__n{margin:0;font-size:14px;color:var(--bb-soft)}
.bb-vote__n a{color:var(--bb-link);font-weight:700}
.bb-status{margin:0;font-size:14px;font-weight:700;min-height:0}
.bb-status:empty{display:none}

/* sort control, end of feed, empty state */
.bb-sortrow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:-6px 0 -8px}
.bb-sortrow select{min-height:44px;padding:0 10px;border:2.5px solid var(--bb-line);border-radius:10px;background:var(--bb-card);color:var(--bb-text);font:700 15px var(--bb-body)}
.bb-end{display:flex;align-items:center;gap:14px;padding:14px;border:3px dashed var(--bb-line);border-radius:10px;background:var(--bb-card)}
.bb-end b{display:block;font-size:17px}
.bb-end p{margin:2px 0 8px;font-size:15px}
.bb-buck{flex:none;width:64px;height:64px;border-radius:50%;border:2.5px solid var(--bb-line);object-fit:cover;background:var(--bb-cream)}
.bb-empty{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:16px}
.bb-empty__row{display:flex;align-items:center;gap:14px}
.bb-empty b{font-size:18px}

/* ---------- the + flow ---------- */
.bb-steps{display:flex;gap:6px;align-items:center;font-weight:800;font-size:14px}
.bb-steps i{display:block;flex:1;height:8px;border:2px solid var(--bb-line);border-radius:999px;background:var(--bb-card)}
.bb-steps i.on{background:var(--bb-gold)}
.bb-choice{display:grid;gap:14px}
.bb-pick{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:16px;text-align:left;cursor:pointer;color:var(--bb-text);font-family:var(--bb-body)}
.bb-pick b{font-size:19px}
.bb-pick span{font-size:15px}
.bb-pick[aria-pressed="true"]{background:var(--bb-gold);color:#141414}
.bb-pick select{min-height:44px;margin-top:4px;padding:0 10px;border:2.5px solid #141414;border-radius:8px;background:#FFF4DC;color:#141414;font:700 16px var(--bb-body);max-width:100%}
.bb-left{position:sticky;top:calc(66px + env(safe-area-inset-top,0px));z-index:4;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 -4px;padding:10px 14px;background:var(--bb-card);border:var(--bb-outline);border-radius:10px;box-shadow:var(--bb-shadow)}
.bb-left b{font:400 26px/1.1 var(--bb-head);font-variant-numeric:tabular-nums}
.bb-left.is-done{background:var(--bb-green);color:#141414}
.bb-left.is-over{background:var(--bb-red);color:#FFF4DC}
.bb-rows{display:flex;flex-direction:column;gap:12px}
.bb-row{display:flex;flex-direction:column;gap:6px;padding:10px 12px 8px}
.bb-row__top{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px}
.bb-row__lab{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-width:0}
.bb-row__top .bb-chip{min-height:30px;font-size:14px}
.bb-row__name{font-weight:800;font-size:16px;line-height:1.25}
.bb-row__val{font:400 24px/1 var(--bb-head);font-variant-numeric:tabular-nums;min-width:2ch;text-align:right}
.bb-row__ctl{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:10px}
.bb-step{width:44px;height:44px;border:2.5px solid var(--bb-line);border-radius:50%;background:var(--bb-card);color:var(--bb-text);font:800 22px/1 var(--bb-body);cursor:pointer;box-shadow:2px 2px 0 var(--bb-line)}
.bb-step:active{transform:translate(1px,1px);box-shadow:none}
.bb-range{-webkit-appearance:none;appearance:none;width:100%;height:34px;background:transparent;margin:0}
.bb-range::-webkit-slider-runnable-track{height:12px;border:2.5px solid var(--bb-line);border-radius:999px;background:linear-gradient(to right,var(--bb-gold) var(--fill,0%),var(--bb-card) var(--fill,0%))}
.bb-range::-moz-range-track{height:8px;border:2.5px solid var(--bb-line);border-radius:999px;background:var(--bb-card)}
.bb-range::-moz-range-progress{height:8px;background:var(--bb-gold);border-radius:999px}
.bb-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:30px;height:30px;margin-top:-11px;border-radius:50%;border:3px solid #141414;background:var(--bb-cobalt);box-shadow:2px 2px 0 #141414}
.bb-range::-moz-range-thumb{width:26px;height:26px;border-radius:50%;border:3px solid #141414;background:var(--bb-cobalt)}
.bb-range:focus-visible{outline:3px solid var(--bb-link);outline-offset:3px;border-radius:999px}
.bb-flowbar{position:sticky;bottom:calc(var(--bb-tabbar-h) + 22px + env(safe-area-inset-bottom,0px));z-index:4;display:flex;gap:10px;justify-content:space-between;align-items:center}
@media (min-width:761px){ .bb-flowbar{bottom:16px} }
.bb-compare{display:flex;flex-direction:column;gap:10px;padding:14px}
.bb-cmp{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:center}
.bb-cmp__name{font-weight:700;font-size:15px}
.bb-cmp__d{font-weight:800;font-size:14px}
.bb-cmp__bars{grid-column:1 / -1;position:relative;height:16px;border:2px solid var(--bb-line);border-radius:4px;background:var(--bb-card);overflow:hidden}
.bb-cmp__bars i{position:absolute;left:0;top:0;bottom:0;background:var(--bb-gold)}
.bb-cmp__bars b{position:absolute;top:-2px;bottom:-2px;width:3px;background:var(--bb-line)}
.bb-key{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0;font-size:14px}
.bb-key span{display:inline-flex;align-items:center;gap:6px}
.bb-key .sw{display:inline-block;width:18px;height:12px;border:2px solid var(--bb-line);background:var(--bb-gold)}
.bb-key .tick{display:inline-block;width:3px;height:14px;background:var(--bb-line)}
.bb-field{display:flex;flex-direction:column;gap:6px}
.bb-field label{font-weight:800;font-size:16px}
.bb-field textarea{width:100%;min-height:96px;padding:10px 12px;border:2.5px solid var(--bb-line);border-radius:10px;background:var(--bb-card);color:var(--bb-text);font:16px/1.4 var(--bb-body);resize:vertical}
.bb-field small{font-size:14px;color:var(--bb-soft)}
.bb-post{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:64px;border:3px solid #141414;border-radius:14px;background:var(--bb-gold);color:#141414;font:400 22px/1 var(--bb-head);letter-spacing:.01em;cursor:pointer;box-shadow:5px 5px 0 var(--bb-line);transition:transform .15s ease,box-shadow .15s ease}
.bb-post .bb-coin__face{width:40px;height:40px;box-shadow:inset 0 0 0 4px var(--bb-gold),inset 0 0 0 8px var(--bb-red)}
.bb-post .bb-coin__face::before{width:16px;height:5px} .bb-post .bb-coin__face::after{width:5px;height:16px}
.bb-post:hover{transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--bb-line)}
.bb-post:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--bb-line)}
.bb-post:disabled{opacity:.55;cursor:not-allowed}

/* the big moment: halftone and sunburst, never behind the feed */
.bb-burst{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:24px max(24px,env(safe-area-inset-right,0px)) 24px max(24px,env(safe-area-inset-left,0px));
  background:radial-gradient(rgba(20,20,20,.22) 1.6px,transparent 2.2px) 0 0/11px 11px,repeating-conic-gradient(from 0deg at 50% 45%,#E63B2E 0 9deg,#F5B700 9deg 18deg)}
.bb-burst[hidden]{display:none}
.bb-burst__card{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;max-width:340px;padding:22px 20px;text-align:center;background:#FFF4DC;color:#141414;border:3px solid #141414;border-radius:10px;box-shadow:8px 8px 0 #141414;animation:bb-pop .45s cubic-bezier(.2,.9,.3,1.4) both}
.bb-burst__card .bb-buck{width:96px;height:96px;border-color:#141414}
html.skin-social .bb-burst__card h2{margin:0;font:400 30px/1.05 var(--bb-head);color:#E63B2E;letter-spacing:.01em}
.bb-burst__card p{margin:0;font-size:16px}
@keyframes bb-pop{0%{transform:scale(.6) rotate(-4deg);opacity:0}100%{transform:none;opacity:1}}

/* ---------- You ---------- */
.bb-me{display:flex;align-items:center;gap:14px;padding:14px}
.bb-me .bb-avatar{width:64px;height:64px;font-size:22px}
.bb-me__who{display:flex;flex-direction:column;min-width:0;flex:1}
.bb-me__name{margin:0;font:800 22px/1.2 var(--bb-body);overflow-wrap:anywhere}
.bb-me__meta{font-size:15px}
.bb-verified{display:inline-block;margin-left:6px;padding:0 8px;border:2px solid #141414;border-radius:999px;background:var(--bb-green);color:#141414;font-size:13px;font-weight:800;vertical-align:2px}
.bb-gear{flex:none;width:48px;height:48px;border:2.5px solid var(--bb-line);border-radius:50%;background:var(--bb-card);color:var(--bb-text);cursor:pointer;display:grid;place-items:center}
.bb-gear svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.bb-split{display:flex;flex-direction:column;gap:12px;padding:14px}
.bb-stack{display:flex;height:56px;border:3px solid #141414;border-radius:8px;overflow:hidden;box-shadow:4px 4px 0 var(--bb-line)}
.bb-stack i{display:block;height:100%;border-right:2px solid #141414}
.bb-stack i:last-child{border-right:0}
.bb-legend{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:6px 18px}
.bb-legend li{display:flex;align-items:center;gap:8px;font-size:15px}
.bb-legend .sw{flex:none;width:16px;height:16px;border:2px solid #141414;border-radius:3px}
.bb-legend b{margin-left:auto;font-variant-numeric:tabular-nums}
.bb-compare-lines{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;font-size:16px}
.bb-badges{display:flex;flex-wrap:wrap;gap:14px}
.bb-badge{display:flex;flex-direction:column;align-items:center;gap:6px;width:104px;font-weight:800;font-size:14px;text-align:center}
.bb-badge img{width:96px;height:96px;border-radius:50%;border:3px solid var(--bb-line);box-shadow:3px 3px 0 var(--bb-line);transition:transform .18s ease}
.bb-badge img:hover{transform:scale(1.06) rotate(-3deg)}
.bb-smalllinks{display:flex;flex-wrap:wrap;gap:4px 18px;align-items:center}
.bb-settings{display:flex;flex-direction:column;gap:12px;padding:14px}
.bb-settings[hidden]{display:none}
html.skin-social .bb-settings .settings{margin:0;padding:0;border:0;background:none;box-shadow:none}
html.skin-social .bb-settings .settings h2{display:none}

/* ---------- Look it up ---------- */
.bb-list{display:flex;flex-direction:column}
.bb-list a{display:flex;flex-direction:column;gap:2px;min-height:60px;justify-content:center;padding:10px 14px;border-top:2px solid var(--bb-line);color:var(--bb-text);text-decoration:none}
.bb-list a:first-child{border-top:0}
.bb-list a b{font-size:17px}
.bb-list a span{font-size:14px;color:var(--bb-soft)}
.bb-list a:hover{background:var(--bb-gold);color:#141414}
.bb-list a:hover span{color:#141414}

/* focus and motion */
html.skin-social .bb-screen :focus-visible,html.skin-social .bb-tabbar :focus-visible{outline:3px solid var(--bb-link);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .bb-card,.bb-act,.bb-btn,.bb-tab,.bb-coin__face,.bb-badge img,.bb-post{transition:none !important}
  .bb-card:active{transform:none}
  .bb-card.is-thunk,.bb-card.is-thunk .bb-stamp,.bb-coin.is-drop .bb-coin__face,.bb-burst__card{animation:none !important}
}

/* ---------- The Books: a scoreboard ---------- */
.bk-switch{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.bk-switch .bb-btn{min-height:44px;padding:0 16px;font-size:15px}
.bk-switch select{min-height:44px;padding:0 10px;border:2.5px solid var(--bb-line);border-radius:10px;background:var(--bb-card);color:var(--bb-text);font:700 15px var(--bb-body);max-width:100%}
.bk-score{display:flex;flex-direction:column;gap:10px;padding:18px 16px}
html.skin-social .bb-screen .bk-head{margin:0;font:400 clamp(30px,8.6vw,46px)/1.08 var(--bb-head);letter-spacing:.005em;color:var(--bb-cobalt);text-wrap:balance}
html.skin-social[data-theme="dark"] .bb-screen .bk-head{color:#9DB8FF}
.bk-amt{color:var(--bb-red);white-space:nowrap}
html.skin-social[data-theme="dark"] .bk-amt{color:#FF7A6E}
.bk-asof{margin:0;font-size:14px;color:var(--bb-soft)}
.bk-line{margin:0;font-size:17px;line-height:1.4}
.bk-line b{font-size:22px;font-variant-numeric:tabular-nums}
.bb-srclink{color:var(--bb-link);font-weight:700;font-size:14px;text-underline-offset:3px;white-space:nowrap}
.bb-srclink::after{content:" ↗";font-size:12px}
.bk-vis{padding:14px 14px 10px}
.bk-chart{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px}
.bk-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:end}
.bk-side{margin:0;display:flex;flex-direction:column;gap:6px}
.bk-side figcaption{font-size:15px;line-height:1.25}
.bk-side figcaption b{display:block;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.bk-col{display:flex;flex-direction:column;justify-content:flex-end;border:3px solid #141414;border-radius:4px;overflow:visible;background:var(--bb-card)}
.bk-blk{position:relative;display:flex;align-items:center;justify-content:center;padding:0 6px;border-top:2px solid #141414;min-height:2px}
.bk-blk:first-child{border-top:0}
.bk-own{background:var(--bb-green)}
.bk-adj{background:#7FCFA4}
.bk-owe{background:var(--bb-red)}
.bk-owe:nth-child(2n){background:#C92F23}
.bk-gap{background:repeating-linear-gradient(-45deg,var(--bb-card) 0 7px,rgba(20,20,20,.18) 7px 9px)}
.bk-lab{font-weight:800;font-size:13px;line-height:1.15;text-align:center;color:#141414;background:#FFF4DC;border:2px solid #141414;border-radius:4px;padding:1px 6px;max-width:100%}
.bk-owe .bk-lab{background:#FFF4DC}
.bk-lab--out{position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);white-space:nowrap}
.bk-buck{width:72px;height:72px;align-self:end}
.bk-cap{margin:8px 0 0;font-size:14px}
.bk-caveat{margin:-6px 2px 0;font-size:14px;line-height:1.45;color:var(--bb-soft)}
.bk-down{display:flex;flex-direction:column;gap:12px}
.bk-down > .bb-btn{align-self:flex-start}
.bk-more{padding:0}
.bk-more summary{min-height:52px;display:flex;align-items:center;padding:0 16px;font-weight:800;font-size:16px;cursor:pointer}
.bk-more[open] summary{border-bottom:2.5px solid var(--bb-line)}
.bk-more > :not(summary){margin-left:16px;margin-right:16px}
.bk-more h2{margin-top:14px !important}
.bk-items{list-style:none;padding:0;margin:10px 0 16px;display:flex;flex-direction:column;gap:10px;font-size:15px;line-height:1.45}
.bk-items li{display:flex;flex-direction:column;gap:2px}
.bk-items a{color:var(--bb-link)}
/* Desk cards: official numbers, labeled, never a person */
.bb-card--desk .bb-card__head{background:var(--bb-cobalt);color:#FFF4DC}
.bb-desk-name{cursor:default}
.bb-desk-name:hover{text-decoration:none}
.bb-desk-head{margin:0;font-weight:800;font-size:19px;line-height:1.3}

/* "[name]'s two bucks": the note on a post */
.bb-twobucks{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border-left:5px solid var(--bb-gold);background:rgba(245,183,0,.10);border-radius:0 8px 8px 0}
.bb-twobucks__label{font-weight:800;font-size:14px;letter-spacing:.02em}

/* ---------- Today's numbers: tiles that open inside the app ---------- */
.tl-strip{display:flex;flex-direction:column;gap:10px;margin:0 -16px;padding:0 16px}
.tl-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.tl-upd{font-size:14px}
.tl-row{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 16px 12px 2px;margin-right:-16px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.tl-tile{flex:none;scroll-snap-align:start;width:156px;min-height:150px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:12px;text-align:left;cursor:pointer;
  background:var(--bb-card);color:var(--bb-text);border:3px solid var(--bb-line);border-radius:10px;box-shadow:4px 4px 0 var(--bb-line);font-family:var(--bb-body);transition:transform .15s ease,box-shadow .15s ease}
.tl-tile:hover{transform:translate(-1px,-2px);box-shadow:5px 6px 0 var(--bb-line)}
.tl-tile:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--bb-line)}
.tl-wide{width:200px}
.tl-t0{border-top:10px solid var(--bb-red)} .tl-t1{border-top:10px solid var(--bb-cobalt)} .tl-t2{border-top:10px solid var(--bb-gold)} .tl-t3{border-top:10px solid var(--bb-green)}
.tl-label{font-size:13px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.tl-value{font-size:24px;line-height:1.15;font-weight:800;font-variant-numeric:tabular-nums}
.tl-wide .tl-value{font-size:19px}
.tl-sub{font-size:14px;line-height:1.3;color:var(--bb-soft)}
.tl-date{margin-top:auto;font-size:13px;font-weight:700;color:var(--bb-soft)}
dialog.bb-sheet{width:min(560px,calc(100vw - 24px));max-height:calc(100vh - 48px);overflow:auto;padding:18px;background:var(--bb-card);color:var(--bb-text);border:3px solid var(--bb-line);border-radius:12px;box-shadow:8px 8px 0 #141414}
dialog.bb-sheet::backdrop{background:rgba(20,20,20,.5)}
.tl-sheet-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.tl-close{min-height:44px;padding:0 14px;font-size:15px}
html.skin-social .tl-sheet-value{margin:6px 0 2px;font:800 30px/1.15 var(--bb-body);color:var(--bb-text);letter-spacing:0}
dialog.bb-sheet p{font-size:16px;line-height:1.45}
.tl-bars,.tl-list{list-style:none;padding:0;margin:12px 0;display:flex;flex-direction:column;gap:10px}
.tl-bars li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;font-size:15px}
.tl-bars i{grid-column:1 / -1;display:block;height:10px;border:2px solid var(--bb-line);border-radius:3px;background:var(--bb-gold);min-width:4px}
.tl-list li{display:flex;justify-content:space-between;gap:10px;font-size:15px;border-top:2px solid var(--bb-line);padding-top:8px}
.tl-items a{color:var(--bb-link);font-weight:700;line-height:1.35}
.tl-src{font-size:14px !important;color:var(--bb-soft);margin-top:14px}
.bb-chip--in::after{content:"›";font-size:16px;margin-left:2px}

/* ---------- People vs. Congress ---------- */
.bb-card--pvc .bb-card__head{background:#141414;color:#FFF4DC}
.bb-card--pvc .bb-desk-tag{background:var(--bb-gold)}
.pc-preview{margin:0;padding:8px 10px;border:2px dashed var(--bb-line);border-radius:6px;font-size:14px;font-weight:700}
.pc-big{margin:0;font-size:17px}
.pc-big b{font:400 34px/1 var(--bb-head);color:var(--bb-cobalt);margin-right:4px}
html.skin-social[data-theme="dark"] .pc-big b{color:#9DB8FF}
.pc-split{display:flex;flex-direction:column;gap:6px}
.pc-row{display:grid;grid-template-columns:96px minmax(0,1fr) 44px;align-items:center;gap:8px;font-size:14px}
.pc-row b{text-align:right;font-variant-numeric:tabular-nums}
.pc-bar{display:block;height:14px;border:2px solid var(--bb-line);border-radius:3px;background:var(--bb-card);overflow:hidden}
.pc-bar i{display:block;height:100%;background:var(--bb-gold)}
.pc-congress{margin:0;padding:8px 10px;border-left:5px solid var(--bb-red);background:rgba(230,59,46,.08);font-size:15px;line-height:1.4}
.pc-congress.pc-acted{border-left-color:var(--bb-green);background:rgba(30,158,90,.10)}
.pc-method{margin:0;font-size:14px}
.bb-card--pvc .bb-avatar{border-color:#FFF4DC;background:var(--bb-red)}