/* community.css (C1-03): the community layer's skin, after tokens.css, base.css and components.css.
   Tokens only, never a hex; classes prefixed cb-; light and dark come free; no engine card class restyled. */

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

/* the strip beside a fact */
/* The line is reserved before the script runs, so mounting a strip moves nothing; .cb-has hands it back. */
/* C-23: a dense row takes a chip on its own line, so it reserves none. */
@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,.cb-link:focus-visible,.cb-mi:focus-visible,.cb-thumb: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,.cb-count{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 and chip, the count stays in 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,.cb-link{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}
/* where a #cb= deep link lands: two seconds, then gone */
.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 inside an engine card */
.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-dialog,.cb-invite{display:none!important}[data-cb]::after{display:none}}
@media (prefers-reduced-motion:reduce){.cb-b,.cb-chip,.cb-dialog,.cb-hl{transition:none!important;animation:none!important}}

/* the header account mount */
.cb-account{position:relative;display:inline-flex}
.cb-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:60;min-width:12rem;padding:4px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-2);box-shadow:var(--shadow)}
.cb-mi{display:block;width:100%;text-align:left;padding:8px 10px;min-height:var(--cb-t);border:0;border-radius:var(--r-1);background:transparent;color:var(--ink);font:inherit;font-size:var(--fs-2);text-decoration:none;cursor:pointer}
.cb-mi:hover{background:var(--panel-2)}

/* dialogs: a bottom sheet under 640 px */
.cb-dialog{width:min(560px,calc(100vw - 2*var(--gutter)));max-width:none;max-height:min(86vh,44rem);padding:0;border:1px solid var(--line);border-radius:var(--r-4);background:var(--panel);color:var(--ink);font-family:var(--font-body);font-size:var(--fs-3);line-height:var(--lh-body);box-shadow:var(--shadow);overflow:hidden}
.cb-dialog::backdrop{background:color-mix(in srgb,var(--ink) 55%,transparent)}
.cb-dh{display:flex;align-items:center;gap:var(--s-3);padding:14px 16px 10px;border-bottom:1px solid var(--line);background:var(--panel)}
.cb-dt{margin:0;font-size:var(--fs-5)}
.cb-x{margin-left:auto;width:32px;height:32px;line-height:1;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--panel);color:var(--muted);font-size:var(--fs-5);cursor:pointer}
.cb-x:hover{color:var(--ink);border-color:var(--line-strong)}
.cb-db{padding:14px 16px 18px;overflow:auto;max-height:calc(min(86vh,44rem) - 58px)}
.cb-lead{margin:0 0 var(--s-3);font-size:var(--fs-4)}
.cb-quote{margin:0 0 var(--s-3);padding:8px 12px;border-left:3px solid var(--accent-line);background:var(--panel-2);border-radius:0 var(--r-2) var(--r-2) 0;color:var(--muted);font-size:var(--fs-2)}
@media (max-width:639px){
  .cb-dialog{width:100%;margin:auto auto 0;border-radius:var(--r-4) var(--r-4) 0 0;max-height:92vh}
  .cb-db{max-height:calc(92vh - 58px)}
}
.cb-lightbox .cb-db{padding:0}
.cb-lightbox img{display:block;width:100%;height:auto}
.cb-lightbox .cb-hint{margin:0;padding:8px 14px 14px}

/* forms */
.cb-field{margin:0 0 var(--s-3)}
.cb-field>label{display:flex;gap:var(--s-2);align-items:baseline;font-size:var(--fs-2);font-weight:500;margin-bottom:4px}
.cb-field input,.cb-field textarea,.cb-pw{width:100%;padding:8px 10px;min-height:var(--cb-t);border:1.5px solid var(--line-strong);border-radius:var(--r-2);background:var(--panel);color:var(--ink);font:inherit;font-size:var(--fs-3)}
.cb-field textarea{resize:vertical;line-height:var(--lh-body)}
.cb-field input:focus,.cb-field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.cb-field [aria-invalid="true"]{border-color:var(--bad)}
.cb-pw{display:flex;gap:6px;padding:0;border:0}
.cb-pw input{flex:1}
.cb-show{flex:none;padding:0 10px;min-height:var(--cb-t);border:1px solid var(--line-strong);border-radius:var(--r-2);background:var(--panel-2);color:var(--muted);font:inherit;font-size:var(--fs-1);cursor:pointer}
.cb-count{margin-left:auto;color:var(--faint)}
.cb-hint{margin:4px 0 0;font-size:var(--fs-1);color:var(--muted)}
.cb-priv{margin:calc(-1 * var(--s-2)) 0 var(--s-3)}
.cb-err{margin:4px 0 0;font-size:var(--fs-1);color:var(--bad)}
.cb-radios{margin:0 0 var(--s-3);padding:0;border:0}
.cb-radios legend{padding:0;margin-bottom:4px;font-size:var(--fs-2);font-weight:500}
.cb-radio,.cb-check{display:flex;align-items:flex-start;gap:8px;padding:5px 2px;min-height:var(--cb-t);font-size:var(--fs-3);cursor:pointer}
.cb-radio input,.cb-check input{margin:2px 0 0;width:16px;height:16px;accent-color:var(--accent);flex:none}
.cb-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.cb-tabs{display:flex;gap:4px;margin:0 0 var(--s-3);border-bottom:1px solid var(--line)}
.cb-tabs button{padding:8px 12px;min-height:var(--cb-t);border:0;border-bottom:2px solid transparent;background:transparent;color:var(--muted);font:inherit;font-size:var(--fs-2);font-weight:500;cursor:pointer}
.cb-tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.cb-actions{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-3)}
.cb-link{color:var(--accent);font-size:var(--fs-2);text-decoration-color:currentColor}
.cb-mine{padding:10px 0;border-top:1px solid var(--line)}
.cb-status{margin:0 0 4px;font-size:var(--fs-1);font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.cb-status.cb-approved{color:var(--ok)}
.cb-status.cb-rejected{color:var(--bad)}

/* the page block */
.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)}
.cb-card{padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-3);background:var(--panel);box-shadow:var(--shadow-sm)}
.cb-card .cb-strip{margin-top:var(--s-2)}
.cb-card .cb-body{font-size:var(--fs-3);line-height:var(--lh-body)}
.cb-card .cb-body p{margin:0 0 var(--s-2)}
.cb-card .cb-body a{overflow-wrap:anywhere}
.cb-src,.cb-by,.cb-for{margin:0;font-size:var(--fs-1);color:var(--muted)}
.cb-src,.cb-for{margin-bottom:4px}
.cb-src a,.cb-about{color:var(--muted)}
.cb-thumbs{display:flex;flex-wrap:wrap;gap:6px;margin:var(--s-2) 0}
.cb-thumb{margin:0;padding:0;border:1px solid var(--line);border-radius:var(--r-1);background:var(--panel-2);overflow:hidden;cursor:pointer}
.cb-thumb:hover{border-color:var(--line-strong)}
.cb-thumb img{display:block;width:110px;height:82px;object-fit:cover}
.cb-thumb figcaption{padding:2px 4px;font-size:11px;color:var(--muted)}