/* page-clubs.css: Clubs directory and club page (spec/page-clubs.md). Tokens and components from dibs.css,
   plus the 18 bucket fills of spec/clubs-icons/SYSTEM.md. Every rule is scoped to .cl-*, .clm-* or the clubs
   drawer classes because every stylesheet loads on every route. */

/* ---------- bucket fills (SYSTEM.md 4): one set for both themes (Telegram 0277), white glyph.
   Hue families: related buckets share a hue and differ by lightness; unrelated families sit 30+ degrees apart. ---------- */
:root {
  --club-greek: #9100c6; --club-media: #aa5b8d; --club-arts: #f90bbe; --club-medicine: #af1b3e;
  --club-law: #4f558d; --club-business: #027cb9; --club-tech: #1c97a1; --club-environment: #266741;
  --club-faith: #ad8604; --club-culture: #72560f; --club-politics: #7f87c3; --club-service: #a9683f;
  --club-sports: #0e9254; --club-wellness: #cf686c; --club-gov: #5b5ef5; --club-academic: #017b82;
  --club-career: #1096e9; --club-social: #687813; --club-glyph: #ffffff;
}

/* ---------- directory frame (spec 2.2): one list column at --w-list, as Libraries and Dining (b1r5 m3) ---------- */
.cl-dir .page-head { margin-bottom: var(--s-4); }
.cl-dir .page-head h1 { display: flex; align-items: center; gap: var(--s-2); }
.cl-demo-tag { font-weight: 500; }
.cl-main { min-width: 0; max-width: var(--w-list); }
.cl-search { width: 100%; max-width: none; }
.cl-search input:not(:placeholder-shown) ~ kbd { display: none; }

/* bucket filter chips in the legend order (SYSTEM.md 4 rule 3; sheet.png chip row; Linear 0153 swatch plus
   label). One per bucket, tile beside the label, single select, all equal. */
.cl-types { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.cl-desk-types { margin-top: var(--s-3); }
.cl-tchip {
  display: inline-flex; align-items: center; gap: var(--s-2); height: 32px; min-height: 32px; padding: 0 var(--s-3) 0 4px;
  border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface);
  color: var(--ink-2); font: var(--t-control); font-weight: 400; white-space: nowrap;
}
.cl-tchip:hover { border-color: var(--line-strong); color: var(--ink); }
.cl-types .cl-tchip[aria-pressed="true"] { border-color: var(--ink); background: var(--surface-2); color: var(--ink); font-weight: 500; }

/* toolbar: filters left, sort alone at the right (SL126) */
.cl-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-top: var(--s-3); }
.cl-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); min-width: 0; }
.cl-select { flex: none; max-width: 260px; text-overflow: ellipsis; }
.cl-phone, .cl-phone-chip { display: none; }
.cl-filters-n:empty { display: none; }
.cl-filters-n { margin-left: -4px; }
.cl-toolbar-phone { display: none; }
/* the sort sits alone at the right of the count line (SL126 "A to Z"; Discover count row) */
.cl-count { margin-top: var(--s-3); }
.cl-dir .disc-chips:empty + .cl-count { margin-top: var(--s-3); }
#cl-count:empty { display: none; }

/* demo view label (Stripe 0110: one bordered strip above the page, title word, one line, one action) */
.cl-demo {
  display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; column-gap: var(--s-3); align-items: center;
  max-width: 880px; margin-bottom: var(--s-4); padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line-strong); border-radius: var(--r-panel); background: var(--surface-2);
}
.cl-demo > .icon { color: var(--ink-2); }
.cl-demo p { margin: 0; font: var(--t-meta); color: var(--ink-2); }
.cl-demo strong { color: var(--ink); font-weight: 600; }

/* the club row (spec 2.4): one hairline container, 12 16 padding, whole row the link.
   One fixed height for every row (SL126): 1 rule + 12 + 22 name + 2 + 20 meta + 12 = 69. */
.cl-list { margin-top: var(--s-2); }
.cl-row { display: flex; align-items: center; column-gap: var(--s-3); box-sizing: border-box; height: 69px; color: var(--ink); }
.cl-row-b { display: flex; flex: 1; flex-direction: column; justify-content: center; min-width: 0; }
.cl-list > .cl-row:first-child { border-top: 1px solid transparent; }
.cl-row:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus); }
.cl-l1 { display: flex; align-items: center; gap: var(--s-2); min-height: 22px; min-width: 0; }
.cl-name { flex: 0 1 auto; min-width: 0; font: var(--t-item); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-l1 .badge { flex-shrink: 0; margin-left: auto; }
/* one 20px meta line. Facts are shown whole or not at all: a fact that does not fit wraps onto a hidden
   second line, so a narrow phone drops trailing facts instead of cutting words. Categories may ellipsize. */
.cl-meta { display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; column-gap: var(--s-4); row-gap: 0; min-width: 0; height: 20px; overflow: hidden; margin-top: 2px; }
.cl-meta .fact { gap: 6px; font: var(--t-meta); }
.cl-meta .cl-f { white-space: nowrap; color: var(--ink-2); }
.cl-meta .cl-f.t-muted { color: var(--muted); }
/* The bucket label (SYSTEM.md 4 rule 1, the sheet's list): it takes the line's space first (large grow, capped at its
   own width) and ellipsizes rather than wrapping away, so a row always names its bucket in words. */
/* b4r3 m1: the activity fact and the bucket sit in one lead group whose flex basis is their whole width. It is the
   line's first item, so it never wraps away; a later fact or the categories stay on line 2 only when they fit beside
   the whole bucket, and otherwise wrap onto the hidden second line. Only when the line is narrower than the group
   itself (320) does the group shrink: the bucket gives way first, down to its floor, then the activity word. */
.cl-meta .cl-lead { display: flex; align-items: center; column-gap: var(--s-4); flex: 0 1 auto; min-width: 0; max-width: 100%; height: 20px; }
.cl-meta .cl-bucket { flex: 0 100 auto; min-width: var(--cl-bfloor); max-width: max-content; height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--t-meta); line-height: 20px; color: var(--ink-2); }
.cl-meta { --cl-bfloor: min(5em, calc(var(--cl-bl, 10) * 0.42em)); }
/* b4r2 m1: when the activity fact and the bucket floor cannot share the line (320), the activity word ellipsizes
   before the bucket wraps away. Its cap is the line less the gap and the bucket floor, so it binds only when the
   two would not fit together; at 360 and wider nothing changes. */
.cl-meta .cl-act { flex: 0 1 auto; min-width: 0; max-width: calc(100% - var(--s-4) - var(--cl-bfloor)); }
.cl-meta .cl-act > .cl-bars, .cl-meta .cl-act > .cl-ring { flex-shrink: 0; }
/* b4r4 m1: inside the lead group the activity fact does not shrink. Flex shrink is weighted by basis, so a
   shrinkable activity fact gave up a fraction of a px while the bucket was still above its floor and cut its word.
   The b4r2 cap above still ellipsizes the word at 320 once the bucket has reached its floor. */
.cl-meta .cl-lead > .cl-act { flex-shrink: 0; }
.cl-meta .cl-act-w { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cl-sum { flex: 1 1 0; min-width: 8em; font: var(--t-meta); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-meta .fact .icon { color: var(--muted); }
.cl-cats { flex: 1 1 0; min-width: 6em; max-width: max-content; height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--t-label); font-weight: 400; line-height: 20px; color: var(--muted); }
.cl-list > .empty { border: 0; }
.cl-more { display: flex; justify-content: center; margin-top: var(--s-4); }
.cl-more:empty { display: none; }

/* ---------- club page (spec 3.2): breadcrumb, title, 640 main plus a 320 sticky card at 48 gap ---------- */
.cl-catline { display: flex; flex-wrap: wrap; column-gap: var(--s-4); margin: 0; font: var(--t-meta); color: var(--muted); }
.cl-typelink { color: var(--ink-2); font-weight: 500; }
.cl-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); align-items: start; }
.cl-col { min-width: 0; }
.cl-side { min-width: 0; }
.cl-side.has-card { order: -1; }
.cl-side:empty { display: none; }
/* W13 (owner walk 5, 3 Nov 2026): the club opens in #drawer beside the list, as a lab does (labs.js openLab):
   docked at 480 from 1280 (as-pane, the body.pane-open margin in dibs.css), the modal drawer below, the sheet on
   phones. One column: the action card under the head, the sections, then the quiet links. */
#drawer.cl-pane .cl-db > * + * { margin-top: var(--s-6); }
#drawer.cl-pane .cl-demo { margin-bottom: 0; }

/* sections: --t-h2 headings, full-width hairlines between (A53) */
.cl-sec h2 { margin: 0 0 var(--s-3); }
.cl-sec + .cl-sec { margin-top: var(--s-8); padding-top: var(--s-8); border-top: 1px solid var(--line); }
.cl-about { margin: 0; font: var(--t-body); color: var(--ink); }
.cl-about + .cl-about { margin-top: var(--s-3); }
.cl-quote { padding-left: var(--s-4); border-left: 2px solid var(--line-strong); }
.cl-meta-line { margin: var(--s-2) 0 0; font: var(--t-meta); color: var(--ink-2); }
.cl-meta-line > .t-muted:first-child { margin-right: var(--s-2); }
.cl-empty { margin: 0; font: var(--t-meta); color: var(--muted); }
.cl-empty + button, .cl-empty + .cl-quiet { margin-top: var(--s-3); }
.cl-quiet { display: inline-block; font: var(--t-control); }
/* record facts (AT93 property rows; sys 9.6 label column) */
.cl-props { margin-top: var(--s-4); }
.cl-props dd { min-width: 0; overflow-wrap: anywhere; }
.cl-props .cl-ext-in { margin: 0; }

/* meeting rows (demo; D372 anatomy; A53 highlight pitch about 60) */
.cl-meets { margin: 0; padding: 0; list-style: none; }
.cl-meet { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: var(--s-3); padding: var(--s-2) 0; }
.cl-meet > .icon { margin-top: 2px; color: var(--muted); }
.cl-meet p { margin: 0; }
.cl-meet-t { font: var(--t-control); font-weight: 600; color: var(--ink); }
.cl-meet-s { font: var(--t-meta); color: var(--muted); }
.cl-meet-s.t-warning { color: var(--warning); }

/* event rows 36px, one 28px ghost calendar toggle (demo; D372 "Events in series") */
.cl-evs { margin: 0; padding: 0; list-style: none; }
.cl-ev { display: flex; align-items: center; gap: var(--s-3); min-height: 36px; }
.cl-ev > .icon { color: var(--muted); }
.cl-ev-d { flex-shrink: 0; min-width: 124px; font: var(--t-control); font-weight: 600; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cl-ev-t { flex: 1; min-width: 0; font: var(--t-meta); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-ev-tg { flex-shrink: 0; }
.cl-ev .cl-ev-tg[aria-pressed="true"] { border-color: transparent; background: transparent; color: var(--ink); }
.cl-ev .cl-ev-tg:hover { background: var(--surface-2); color: var(--ink); }
.cl-ev-more { margin-top: var(--s-1); }

/* how to join (demo): one property list per route (sys 9.6; AT93) */
.cl-route + .cl-route { margin-top: var(--s-6); }
.cl-route h3 { margin: 0 0 var(--s-1); }
.cl-ext { display: inline-flex; align-items: center; gap: var(--s-1); margin-top: var(--s-2); font: var(--t-control); }
.cl-ext .icon { width: 12px; height: 12px; }

/* sources: closed disclosure */
.cl-sources details > summary { color: var(--ink-2); }
.cl-srcs { margin: var(--s-2) 0 0; padding: 0; list-style: none; }
.cl-srcs li { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s-3); padding: var(--s-1) 0; font: var(--t-meta); }
.cl-srcs .cl-ext { margin-top: 0; }

/* right card (A53): sys 6 hairline panel, no shadow, one full-width primary */
.cl-card { padding: var(--s-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); }
.cl-card-l { margin: 0; font: var(--t-meta); color: var(--ink); }
.cl-card-l + .cl-card-l { margin-top: var(--s-2); }
.cl-card-btns { display: grid; gap: var(--s-2); margin-top: var(--s-4); }
.cl-card-btns > * { width: 100%; }
.cl-card-btns .icon { width: 12px; height: 12px; }
.cl-card .cl-card-m { margin-top: var(--s-3); color: var(--muted); }
.cl-report { margin: var(--s-3) 0 0; text-align: center; }
.cl-side > .cl-report:first-child { margin-top: 0; text-align: left; }

/* ---------- tiles (SYSTEM.md 3): solid bucket fill, white Lucide glyph at 50% of the 40 and 64 tiles, stroke 2.0 ----------
   40 in rows (Apple Maps 0128 badge beside a two-line name), 64 on the club page, 24 in filter chips, 16 in the
   applied chip. An uploaded logo sits on --surface with a hairline (D569) so a white logo reads in both themes. */
.cl-tile { display: inline-grid; place-items: center; flex-shrink: 0; box-sizing: border-box; overflow: hidden; user-select: none; }
.cl-tile[data-type] { background: var(--club-fill); color: var(--club-glyph); }
/* The glyph svg covers the tile; its viewBox centres the glyph box (clubs.js GLYPH: 12 in 16, 16 in 24, 20 in 40,
   32 in 64), so it shares the tile's pixel snapping. No transform or translate on a tile (see clubs.js GLYPH). */
.cl-glyph { display: block; width: 100%; height: 100%; fill: none; stroke: var(--club-glyph); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cl-tile-16 { width: 16px; height: 16px; border-radius: var(--r-control); }
.cl-tile-24 { width: 24px; height: 24px; border-radius: 6px; }
.cl-tile-40 { width: 40px; height: 40px; border-radius: var(--r-panel); }
.cl-tile-64 { width: 64px; height: 64px; border-radius: var(--r-panel); }
img.cl-tile { object-fit: cover; background: var(--surface); border: 1px solid var(--line); }

/* activity (clubs-activity.md 7; L144 three ascending bars then the word; L049 dashed circle for "no data").
   First fact on the meta line (SL126 state first). Never a warning colour. */
.cl-act { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; font: var(--t-meta); color: var(--ink-2); white-space: nowrap; }
.cl-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.cl-bars i { display: block; width: 3px; border-radius: 0; background: var(--line-strong); }
.cl-bars i:nth-child(1) { height: 5px; }
.cl-bars i:nth-child(2) { height: 8px; }
.cl-bars i:nth-child(3) { height: 11px; }
.cl-bars i.on { background: var(--ink-2); }
.cl-ring { display: inline-block; box-sizing: border-box; width: 11px; height: 11px; border: 1.5px dashed var(--muted); border-radius: 50%; }
.cl-act-low, .cl-act-cant, .cl-act-none { color: var(--muted); }
.cl-act-low .cl-bars i.on { background: var(--muted); }
.cl-act-line { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s-3); row-gap: var(--s-1); margin: 0; }
.cl-act-line .cl-act { font: var(--t-control); }
.cl-act-high .cl-act-w, .cl-act-medium .cl-act-w { color: var(--ink); }
.cl-act-line .cl-act-w { font-weight: 500; }
.cl-act-seen { font: var(--t-meta); color: var(--muted); }
.cl-act-unread { margin-top: var(--s-1); color: var(--muted); }
.cl-sigs { margin: var(--s-3) 0 0; padding: 0; list-style: none; }
/* One signal per row (V267: the fact, then the date as muted meta, actions at the right edge). The source text
   opens under its row on demand, so the list stays one line per sign (L049 health row: word plus age, detail elsewhere). */
.cl-sig { padding: var(--s-2) 0; border-top: 1px solid var(--line); font: var(--t-meta); }
.cl-sig:first-child { border-top: 0; }
.cl-sig-r { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s-3); row-gap: 2px; }
.cl-sig-l { min-width: 0; overflow-wrap: anywhere; color: var(--ink); }
.cl-sig.is-note .cl-sig-l { color: var(--muted); }
.cl-sig-d { color: var(--muted); font-variant-numeric: tabular-nums; }
.cl-sig-x { display: inline-flex; align-items: baseline; gap: var(--s-3); margin-left: auto; min-width: 0; }
.cl-sig .cl-ext { margin: 0; font: var(--t-label); min-width: 0; overflow-wrap: anywhere; }
.cl-sig-q { display: inline-flex; align-items: center; gap: 2px; padding: 0; margin-left: 0; font: var(--t-label); color: var(--ink-2); } /* b2r5 m1: no padding, so no .text-btn -8 offset (AT93 one left edge) */
.cl-sig-q .icon { width: 14px; height: 14px; transition: transform var(--dm-popover-ms, 368ms) var(--dm-popover-ease, linear); }
.cl-sig-q[aria-expanded="true"] .icon { transform: rotate(180deg); }
.cl-snip { margin: var(--s-2) 0 var(--s-1); padding: var(--s-2) var(--s-3); border-radius: var(--r-control); background: var(--surface-2); }
.cl-snip-q { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.cl-snip-f { display: block; font: 400 12px/18px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.cl-snip-m { margin: var(--s-1) 0 0; font: var(--t-label); font-weight: 400; color: var(--muted); }
.cl-sig-more { margin: var(--s-1) 0 0 calc(-1 * var(--s-2)); }
.cl-act-foot { margin: var(--s-3) 0 0; font: var(--t-label); font-weight: 400; color: var(--muted); }
.cl-act-foot + .cl-act-foot { margin-top: var(--s-1); }

/* club pane head: the tile beside the type line, under the pane's name heading (S317 org tile beside the org name) */
.cl-head { display: flex; align-items: center; gap: var(--s-4); }
.cl-head-tile { display: inline-flex; flex-shrink: 0; }
.cl-head-t { min-width: 0; }

/* officer and logo links under the card (A53 quiet link under the action card) */
.cl-own { display: grid; justify-items: center; gap: var(--s-1); margin-top: var(--s-3); text-align: center; }
.cl-side > .cl-own:first-child, .cl-side > .cl-report:first-child + .cl-own { justify-items: start; text-align: left; }
.cl-side > .cl-own:first-child { margin-top: 0; }
.cl-own-note { margin: 0; font: var(--t-label); font-weight: 400; color: var(--muted); }
.cl-own .text-btn { min-height: 28px; padding: 4px var(--s-2); font: var(--t-control); }
.cl-side > .cl-own:first-child .text-btn, .cl-side > .cl-report:first-child + .cl-own .text-btn { margin-left: calc(-1 * var(--s-2)); }
.cl-report + .cl-own { margin-top: var(--s-1); }

/* the affiliation footer, said once per view (spec 7.5) */
.cl-legal { max-width: 880px; margin: var(--s-12) 0 0; padding-top: var(--s-4); border-top: 1px solid var(--line); font: var(--t-small); font-weight: 400; color: var(--muted); }

/* claim drawer (spec 7.4): sys 10 detail frame; L444 check-your-email, V439 logo field, S183 required checks */
#drawer.cl-claim .clm-body > * + * { margin-top: var(--s-6); }
.clm-who { display: flex; align-items: center; gap: var(--s-3); }
.clm-who-t { min-width: 0; }
.clm-name { margin: 0; font: var(--t-item); color: var(--ink); }
.clm-sub { margin: 0; font: var(--t-meta); color: var(--muted); }
.clm-ok { display: inline-flex; align-items: center; gap: var(--s-1); color: var(--positive); font: var(--t-label); }
.clm-ok .icon { width: 14px; height: 14px; }
.clm-sec h3 { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-2); font: var(--t-item); color: var(--ink); }
.clm-sec p { margin: 0; font: var(--t-body); color: var(--ink-2); }
.clm-sec p + p { margin-top: var(--s-2); }
.clm-sec p.clm-help, .clm-help { font: var(--t-label); font-weight: 400; color: var(--muted); }
.clm-addr { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); border-radius: var(--r-control); background: var(--surface-2); }
.clm-sec .clm-addr { color: var(--ink); font: var(--t-control); overflow-wrap: anywhere; }
.clm-addr .icon { flex-shrink: 0; color: var(--muted); }
/* the typed club address (owner Q7, Rails club_claims/_drawer): label, the mail glyph and the field on one inset row */
.clm-label { display: block; margin: var(--s-3) 0 var(--s-1); font: var(--t-label); color: var(--ink-2); }
.clm-form .clm-addr { padding: 0 0 0 var(--s-3); }
.clm-addr input { flex: 1; min-width: 0; height: 36px; margin: 0; padding: 0 var(--s-3) 0 0; border: 0; border-radius: 0; background: transparent; color: var(--ink); font: var(--t-control); font-weight: 400; box-shadow: none; }
.clm-addr:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.clm-addr input:focus, .clm-addr input:focus-visible { outline: none; box-shadow: none; }
.clm-addr.is-invalid { box-shadow: inset 0 0 0 1px var(--danger); }
.clm-form .field-error:empty { display: none; }
.clm-again { margin-top: var(--s-3); }
.clm-again > summary { display: flex; align-items: center; gap: var(--s-2); min-height: 32px; padding: 6px 0; color: var(--ink-2); font: var(--t-control); cursor: pointer; list-style: none; }
.clm-again > summary::-webkit-details-marker { display: none; }
.clm-again > summary::before { content: ""; width: 16px; height: 16px; flex-shrink: 0; background: var(--chevron-right) no-repeat center / 16px; transition: transform var(--dm-popover-ms, 368ms) var(--dm-popover-ease, linear); }
.clm-again[open] > summary::before { transform: rotate(90deg); }
@media (pointer: coarse), (max-width: 599px) { .clm-addr input { height: 44px; } .clm-again > summary { min-height: 44px; padding-block: 0; } }
.clm-drop { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4); border: 1px dashed var(--line-strong); border-radius: var(--r-panel); background: var(--bg); }
.clm-drop.is-over { border-color: var(--accent); background: var(--accent-subtle); }
.clm-drop-t { min-width: 0; }
.clm-sec .clm-drop-l { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s-2); row-gap: var(--s-1); }
.clm-drop-l button { display: inline-flex; align-items: center; gap: 6px; }
.clm-drop-l .icon, .clm-actions .icon { width: 16px; height: 16px; }
.clm-or { font: var(--t-meta); color: var(--muted); }
.clm-sec .clm-drop-t .clm-help { margin-top: var(--s-1); }
.clm-sec .field-error { margin-top: var(--s-2); }
.clm-sec .field-error:empty { display: none; }
.clm-demo { margin: var(--s-2) 0 0 calc(-1 * var(--s-2)); }
.clm-prev { display: grid; gap: var(--s-3); }
.clm-prev figure { margin: 0; }
.clm-prev-box { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); }
.clm-prev-r { display: grid; min-width: 0; }
.clm-prev-n { min-width: 0; font: var(--t-item); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clm-prev-m { font: var(--t-label); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clm-prev figcaption { margin-top: var(--s-1); font: var(--t-label); font-weight: 400; color: var(--muted); }
#drawer .clm-check { display: flex; align-items: flex-start; gap: var(--s-2); margin: 0; padding: var(--s-2) 0; font: var(--t-meta); color: var(--ink); cursor: pointer; }
.clm-check input { margin-top: 2px; }
.clm-sec p.clm-license { margin-top: var(--s-3); font: var(--t-label); font-weight: 400; color: var(--muted); }
.clm-sec .clm-status { margin-top: var(--s-2); font: var(--t-meta); color: var(--ink-2); }
.clm-sec .clm-status:empty { display: none; }
.clm-status .text-btn { min-height: 28px; padding: 4px var(--s-2); margin-left: var(--s-1); }
.clm-sec h3 + .clm-status { margin: 0 0 var(--s-3); }
.clm-none { display: flex; align-items: center; gap: var(--s-3); }
.clm-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.clm-actions button { display: inline-flex; align-items: center; gap: 6px; }
/* the "what is missing" line sits in the footer above the gated primary (S183 keeps the gate beside its button) */
.cl-claim .df { flex-wrap: wrap; row-gap: 0; }
.cl-claim .df .clm-missing { order: -1; flex-basis: 100%; margin: 0; padding-top: var(--s-2); font: var(--t-label); font-weight: 400; color: var(--muted); text-align: right; }
.cl-claim .df .clm-missing { min-height: calc(18px + var(--s-2)); } /* reserved so the button does not jump when the line clears */
#drawer.cl-claim .df .primary:disabled, #drawer.cl-claim .df .primary:disabled:hover { background: var(--surface-2); border-color: var(--line); color: var(--muted); }
.clm-prev + .clm-help { margin-top: var(--s-3); }
@media (pointer: coarse) { .clm-or { display: none; } }
.cl-claim .df .btn-lg { white-space: nowrap; }
.clm-missing:empty { display: none; }

/* phone filters sheet: the bucket chips as one wrapping group (same chips as desktop) */
.cl-sheet-types { margin: 0 0 var(--s-4); padding: 0; border: 0; min-width: 0; }
.cl-sheet-types legend { margin-bottom: var(--s-2); padding: 0; font: var(--t-label); color: var(--ink-2); }

/* ---------- phone (spec 2.6) ---------- */
@media (max-width: 599px) {
  .cl-sig-x { margin-left: 0; } /* b2r4 n3: when the pair wraps it starts at the row edge, under the label */
  .cl-desk, .cl-desk-types { display: none; }
  .cl-toolbar-phone { display: flex; }
  .cl-phone { display: inline-flex; }
  .cl-phone-chip { display: inline-flex; }
  .cl-toolbar { justify-content: space-between; }
  .cl-search kbd { display: none; }
  /* the search pins under the 48px bar (G207 header) */
  .cl-searchwrap { position: sticky; top: 48px; z-index: 5; margin: 0 calc(-1 * var(--s-4)); padding: var(--s-2) var(--s-4); background: var(--bg); }
  .cl-ev-d { min-width: 0; }
  .cl-card { padding: var(--s-4); }
  .cl-sheet .switch-row { display: flex; align-items: center; }
  .cl-sheet .switch-row small { display: block; }
  .cl-head { gap: var(--s-3); }
  .cl-legal { margin-top: var(--s-8); }
  .cl-demo { grid-template-columns: 16px minmax(0, 1fr); row-gap: var(--s-2); }
  .cl-demo > .btn { grid-column: 2; justify-self: start; }
  .cl-props { grid-template-columns: 88px minmax(0, 1fr); }
}
/* narrow phones: the event title gets its own line under the date (D372) */
@media (max-width: 399px) {
  .cl-evs { display: grid; row-gap: 4px; }
  .cl-ev { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; grid-template-rows: auto auto; align-content: center; column-gap: var(--s-3); row-gap: 2px; padding: var(--s-2) 0; }
  .cl-ev > .icon { grid-column: 1; grid-row: 1; align-self: center; }
  .cl-ev-d { grid-column: 2; grid-row: 1; }
  .cl-ev-t { grid-column: 2; grid-row: 2; white-space: normal; }
  .cl-ev-tg { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
}
@media (max-width: 359px) {
  .cl-l1 .badge { max-width: 50%; }
}
/* 44px phone hit areas (RUBRIC; G207 full-height search) without changing the visual size of the links */
@media (pointer: coarse), (max-width: 599px) {
  .cl-tchip { height: 44px; }
  .cl-ev { min-height: 44px; }
  .cl-search { height: auto; }
  .cl-search input { min-height: 44px; }
  .cl-ext, .cl-report a, .cl-empty + .cl-quiet { display: inline-flex; align-items: center; min-height: 44px; }
  .cl-ext { margin-top: 0; }
  .cl-props .cl-ext-in, .cl-sig .cl-ext, .cl-sig-q { min-height: 0; padding-block: 12px; margin-block: -12px; }
  .cl-sig-more { display: inline-flex; align-items: center; min-height: 44px; }
  /* the 44px hit area reaches into the label line above, so no hover or press fill on touch */
  .cl-sig .cl-sig-q, .cl-sig .cl-sig-q:hover, .cl-sig .cl-sig-q:active { background: transparent; }
  .cl-count .text-btn { min-height: 44px; margin-block: -7px; }
  .cl-own .text-btn, .cl-own a { display: inline-flex; align-items: center; min-height: 44px; }
  #drawer .clm-check { min-height: 44px; }
}
/* inline type and interest links: 44px touch hit area, layout unchanged (RUBRIC) */
@media (pointer: coarse) {
  .cl-catline a, .cl-meta-line a, .cl-props dd > a:not(.cl-ext) { display: inline-block; padding-block: 12px; margin-block: -12px; }
}
/* Logo report confirmation (in place, with the copyright route; legal.js) */
.cl-report-done a { color: var(--accent); }
/* an inline link inside the sentence: keep the line pitch, take the 44px hit area from padding (RUBRIC) */
.cl-own .cl-report-done a { display: inline; min-height: 0; padding-block: 12px; margin-block: -12px; }