/* community.css (C1-03; split by B2 for v1.1): the always-loaded half of the layer's skin, after
   tokens.css, base.css and components.css — strip, chip, header button, the block's heading and
   invite, highlight, print. Everything behind a dialog is community.dialogs.css, injected with the
   bundle on first use. Tokens only, cb- prefix, 5,120 B raw: that is why these comments are short. */

:root{--cb-h:26px;--cb-t:24px}

/* the strip beside a fact. The line is reserved before the script runs, so mounting one moves nothing;
   .cb-has hands it back, and a C-23 dense row reserves none (its chip sits on the line itself). */
@media (scripting: enabled){
  [data-cb]:not(tr)::after{content:"";display:block;height:var(--cb-h)}
  [data-cb].cb-has::after,[data-cb][data-cb-dense]::after{display:none}
}
.cb-strip{display:flex;align-items:center;flex-wrap:wrap;gap:2px;min-height:var(--cb-h);margin:0;color:var(--muted);font-family:var(--font-body);font-size:var(--fs-1);line-height:1}
.cb-b,.cb-chip{display:inline-flex;align-items:center;justify-content:center;gap:3px;min-width:var(--cb-t);min-height:var(--cb-t);padding:0 5px;border:1px solid transparent;border-radius:var(--r-1);background:transparent;color:inherit;font:inherit;cursor:pointer}
.cb-b:hover{border-color:var(--line);background:var(--panel-2);color:var(--ink)}
.cb-b:focus-visible,.cb-chip:focus-visible,.cb-notes:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.cb-b svg,.cb-chip svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cb-n,.cb-score{font-family:var(--font-mono);font-size:11px;font-variant-numeric:tabular-nums}
.cb-n:empty,.cb-score:empty,.cb-msg:empty{display:none}
.cb-up[aria-pressed="true"]{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 35%,transparent);background:color-mix(in srgb,var(--ok) 10%,transparent)}
/* --warm is large-text only (4.1:1): a pressed down-vote tints the glyph, the count stays ink. */
.cb-down[aria-pressed="true"]{color:var(--warm);border-color:color-mix(in srgb,var(--warm) 40%,transparent);background:var(--warm-soft)}
.cb-down[aria-pressed="true"] .cb-n{color:var(--ink)}
.cb-flag.cb-on{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 35%,transparent)}
.cb-notes{border:0;background:transparent;color:var(--muted);font:inherit;font-size:var(--fs-1);text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--line-strong);cursor:pointer;min-height:var(--cb-t);padding:0 4px}
.cb-notes:hover{color:var(--ink)}
.cb-msg{color:var(--bad);font-size:var(--fs-1);margin:0 0 0 4px}
.cb-hint{margin:4px 0 0;font-size:var(--fs-1);color:var(--muted)}
[aria-busy="true"]{cursor:progress;opacity:.7}   /* B2: waiting for the bundle */
/* where a #cb= deep link lands */
.cb-hl{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-1);animation:cb-fade 2s ease-out}
@keyframes cb-fade{from{background:color-mix(in srgb,var(--accent) 16%,transparent)}}

/* the collapsed chip on an atom */
.cb-atom{display:inline-flex;align-items:center;gap:2px;vertical-align:middle;margin-left:6px}
.cb-chip{border-radius:var(--r-pill);color:var(--faint)}
.cb-chip svg{stroke-width:2.6}
.cb-chip:hover,.cb-atom.cb-open .cb-chip{color:var(--muted);border-color:var(--line);background:var(--panel-2)}
.cb-atom.cb-open .cb-score{display:none}
.cb-atomstrip{min-height:0}
.cb-atomstrip .cb-msg{flex-basis:100%}

@media (pointer:coarse){
  :root{--cb-t:28px}
  .cb-strip,.cb-atom{gap:4px}
  .lede .cb-strip,.lede>.cb-atom{display:flex;width:100%;margin:4px 0 0}
}
@media print{.cb-strip,.cb-atom,.cb-account,.cb-invite{display:none!important}[data-cb]::after{display:none}}
@media (prefers-reduced-motion:reduce){.cb-b,.cb-chip,.cb-hl{transition:none!important;animation:none!important}}

/* the header account mount. B2 polish: #cb-account is a FOURTH child of a header grid components.css (not
   ours) sizes for three, so it fell to a row of its own above the phone breakpoint. The fourth column is
   declared here, skipped where three still fit: home (search hidden, D-73) and phones (whose collapsed
   brand + nav row already fills the width). */
.cb-account{position:relative;display:inline-flex}
@media (min-width:641px){
  body:not(.home) .container:has(>.cb-account){grid-template-columns:auto minmax(0,1fr) auto auto}
}
/* 641-819: brand, nav and button on row one, search across row two; four abreast fits from about 820 px. */
@media (min-width:641px) and (max-width:819px){
  body:not(.home) .container:has(>.cb-account){grid-template-columns:auto 1fr auto}
  body:not(.home) .container:has(>.cb-account) .site-search{grid-column:1/-1;grid-row:2}
  body:not(.home) .container:has(>.cb-account) .site-nav{justify-self:end}
}

/* the page block; its cards are the bundle's */
.cb-disclaim{margin:calc(-1 * var(--s-2)) 0 var(--s-3);color:var(--muted);font-size:var(--fs-2)}
.cb-invite{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);margin:0 0 var(--s-4);color:var(--muted);font-size:var(--fs-3)}
.cb-list{display:grid;gap:var(--s-3)}