.ci-news-cards * { box-sizing: border-box; }
.ci-news-cards { box-sizing: border-box; font-family: 'Nunito Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #202224; margin: 0 auto; max-width: calc(1200px + 56px); padding: 20px 28px; width: 100%; }
@media (max-width: 1199.98px) { .ci-news-cards { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 560px) { .ci-news-cards { padding-left: 20px; padding-right: 20px; } }
/* A track MINIMUM, not a column count — COMPONENT_GENERATION.md §1.1. The floor
   is 280px, not the card's 345px: a 320px phone leaves 280px of content. */
.ci-news-cards-list { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
.ci-ncslide { max-width: 345px; min-width: 0; }
/* A shelf of fewer than four cards fills the desktop row in thirds (v5 home: 3 x 386, DREAM-816); four or more keep the 285 tracks. */
@media (min-width: 1200px) {
  .ci-news-cards-list:not(:has(> .ci-ncslide ~ .ci-ncslide ~ .ci-ncslide ~ .ci-ncslide)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ci-news-cards-list:not(:has(> .ci-ncslide ~ .ci-ncslide ~ .ci-ncslide ~ .ci-ncslide)) > .ci-ncslide { max-width: none; }
}
/* Tablets: v5's 345px cards 24 apart both ways (DREAM-746, 816), the TRACK capped too, from where two fit past a scrollbar (650); below, one fills. */
@media (min-width: 650px) and (max-width: 1199.98px) { .ci-news-cards-list { gap: 24px; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 345px)); } }
@media (max-width: 649.98px) { .ci-ncslide { max-width: none; } }
.ci-ncard { border: 1px solid #d9d9d9; border-radius: 12px; color: #202224; display: flex; flex-direction: column; gap: 12px; height: 100%; padding: 11px; position: relative; }
.ci-ncard-thumb { background: linear-gradient(135deg, #e4e4e9, #d9d9d9); border-radius: 12px; display: block; flex: none; height: 230px; overflow: hidden; position: relative; width: 100%; }
.ci-ncard-thumb img, .ci-ncard-thumb picture { height: 100%; left: 0; position: absolute; top: 0; width: 100%; }
.ci-ncard-img { object-fit: cover; }
.ci-ncard-img[src=""], .ci-ncard-img:not([src]) { opacity: 0; }
/* v4 (0459): the 84px title box is the only link; the focus ring goes round the card (the Focus variant), 3-5px
   out of its 1px border, covering nothing. A card with no destination (link unwrapped, or href="") is Disabled. */
.ci-ncard-headline { display: block; font-size: 24px; font-weight: 700; height: 84px; line-height: 28px; margin: 0; overflow: hidden; }
.ci-ncard-headline a { -webkit-box-orient: vertical; color: #202224; display: -webkit-box; height: 100%; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; text-decoration: none; }
.ci-ncard-link:focus-visible { outline: none; }
.ci-ncard-link:focus-visible::after { border-radius: 8px; content: ''; inset: -4px; outline: 2px solid #5749dd; pointer-events: none; position: absolute; }
@media (hover: hover) { .ci-ncard-headline a:hover { color: #0c866a; text-decoration: underline; } }
.ci-ncard-headline a:active { color: #1b5547; text-decoration: underline; }
.ci-ncard:not(:has(.ci-ncard-link[href]:not([href=""]))) { opacity: .4; }
.ci-ncard-headline:not(:has(.ci-ncard-link)) { -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; }
.ci-ncard-excerpt { -webkit-box-orient: vertical; display: -webkit-box; font-size: 14px; font-weight: 400; -webkit-line-clamp: 3; line-clamp: 3; line-height: 20px; margin: 0; overflow: hidden; }
.ci-ncard-foot { display: flex; flex-direction: column; gap: 12px; margin-top: auto; }
.ci-ncard-meta { align-items: center; display: flex; gap: 8px; margin: 0; min-height: 12px; }
.ci-ncard-date, .ci-ncard-category { font-size: 12px; font-weight: 700; line-height: 24px; margin: -8px 0 -8px; white-space: nowrap; }
.ci-ncard-date { flex: none; }
.ci-ncard-category { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ci-ncard-sep { background: #202224; flex: none; height: 12px; width: 1px; }
/* Publish drops an empty leaf (removeWhenEmpty); what it leaves alone goes with it. */
.ci-ncard-sep:first-child, .ci-ncard-sep:last-child { display: none; }
.ci-ncard-meta:not(:has(.ci-ncard-date)):not(:has(.ci-ncard-category)) { display: none; }
.ci-ncard-author { align-items: center; border-top: 1px solid #d9d9d9; display: flex; gap: 8px; padding-top: 12px; }
.ci-ncard-avatar { border-radius: 50%; flex: none; height: 32px; object-fit: cover; width: 32px; }
.ci-ncard-avatar[src=""], .ci-ncard-avatar:not([src]) { display: none; }
.ci-ncard-author picture { display: contents; }
.ci-ncard-who { display: flex; flex: 1; flex-direction: column; gap: 4px; justify-content: center; min-height: 32px; min-width: 0; }
.ci-ncard-aname { font-size: 16px; font-weight: 700; line-height: 22px; margin: -5px 0 -6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-ncard-arole { font-size: 14px; font-weight: 400; line-height: 20px; margin: -4px 0 -6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* One class per :has() (COMPONENT_GENERATION.md): the canvas splits a list into bare rules. */
.ci-ncard-aname:not(:has(.ci-ncard-aname-first)):not(:has(.ci-ncard-aname-last)) { display: none; }
.ci-ncard-author:not(:has(.ci-ncard-aname-first)):not(:has(.ci-ncard-aname-last)):not(:has(.ci-ncard-arole)) { display: none; }
.ci-ncard-foot:not(:has(.ci-ncard-date)):not(:has(.ci-ncard-category)):not(:has(.ci-ncard-aname-first)):not(:has(.ci-ncard-aname-last)):not(:has(.ci-ncard-arole)) { display: none; }
/* "Hide excerpt on tablet and phone" (v5 home): its marker survives only while the switch is off (DREAM-816). */
@media (max-width: 1199.98px) { .ci-news-cards:not(:has(> .ci-news-cards-excerpt)) .ci-ncard-excerpt { display: none; } }
/* Asked of SCRIPTING, not undone by a <noscript> rule: `display` has no
   un-hiding half — `revert` rolls back to the UA origin and strips the card's
   own `display` (`.ci-bgd-main` is flex, `.ci-vcard` grid). Where the pager
   cannot run, the cut is never made — the lead, PR #169. */
@media (scripting: enabled) {
  .ci-news-cards-list:not([data-pager-ready]) > [data-past-batch] { display: none; }
}
/* The panel marks a non-matching card `hidden`; this states what that means
   loudly enough to survive a baked `Page.css` rule setting display on the
   card (render KNOWLEDGE.md, "Stale baked page CSS"). */
.ci-news-cards-list > *[hidden] { display: none !important; }
/* Hidden until the script takes over: without JavaScript the button would
   promise a batch it cannot reveal. Stated here, NOT in the <noscript> below —
   the editor parses that block as markup and bakes its rules into Page.css,
   where they apply with scripting ON (render KNOWLEDGE.md, "Stale baked CSS"). */
.ci-cpager { display: none; }
.ci-news-cards-list[data-pager-ready] > .ci-cpager { display: flex; flex-direction: column; gap: 12px; align-items: center; grid-column: 1 / -1; padding-top: 20px; }
.ci-cpager[hidden] { display: none; }
.ci-cpager .ci-cpager-count { color: #545658; font-size: 14px; font-variant-numeric: tabular-nums; line-height: 20px; }
/* NL button/secondary without its arrow: 23px + the 1px border make the design's 24px sides.
   Under `.ci-cpager` so a pre-0410 version's flat rules on the page lose (PR #496 R1.5). */
.ci-cpager .ci-cpager-btn { -webkit-appearance: none; align-items: center; appearance: none; background: none; border: 1px solid #5749dd; border-radius: 4px; color: #5749dd; cursor: pointer; display: inline-flex; font-family: inherit; font-size: 18px; font-weight: 700; height: 48px; justify-content: center; line-height: 24px; margin: 0; max-width: 100%; padding: 0 23px; position: relative; }
.ci-cpager .ci-cpager-btn:hover { background: #f3f2ff; }
.ci-cpager .ci-cpager-btn:active { background: none; border-color: #3d31b8; color: #3d31b8; }
.ci-cpager .ci-cpager-btn:focus-visible { outline: none; }
/* The drawn ring, 3px out at radius 8/10 (an outline would round to 9): 6px off the padding box. */
.ci-cpager .ci-cpager-btn:focus-visible::after { border: 2px solid #5749dd; border-radius: 10px; content: ''; inset: -6px; pointer-events: none; position: absolute; }
.ci-cpager .ci-cpager-btn[hidden] { display: none; }
.ci-ctoolbar * { box-sizing: border-box; }
/* A part of the list it controls, never a section of its own: it spans the
   list's layout and leaves the section's padding to the section. */
.ci-ctoolbar { box-sizing: border-box; color: #202224; grid-column: 1 / -1; margin: 0; width: 100%; }
/* form/search, Light: 40px, the glyph first; Figma's 8/12 pads sit inside the 1px border. */
.ci-ctoolbar label.ci-ctoolbar-search { align-items: center; background: #fff; border: 1px solid #d9d9d9; border-radius: 4px; cursor: text; display: flex; gap: 8px; height: 40px; margin: 0; padding: 8px 12px; position: relative; }
.ci-ctoolbar label.ci-ctoolbar-search::before { content: ''; inset: -3px -1px; position: absolute; }
.ci-ctoolbar label.ci-ctoolbar-search:focus-within::after { border: 2px solid #5749dd; border-radius: 14px; content: ''; inset: -6px; pointer-events: none; position: absolute; }
/* `inset` and `transform` undo a pre-0410 sheet's right-hand absolute glyph. */
.ci-ctoolbar label > .ci-ctoolbar-icon { color: #545658; display: block; flex: none; height: 16px; inset: auto; position: relative; transform: none; width: 16px; }
.ci-ctoolbar label > .ci-ctoolbar-input { -webkit-appearance: none; appearance: none; background: none; border: 0; border-radius: 0; color: #202224; flex: 1; font-family: inherit; font-size: 14px; font-weight: 400; height: 20px; letter-spacing: 0; line-height: 20px; margin: 0; min-width: 0; outline: none; padding: 0; position: relative; top: 1px; }
.ci-ctoolbar label > .ci-ctoolbar-input:focus-visible { outline: none; }
.ci-ctoolbar label > .ci-ctoolbar-input::placeholder { color: #545658; opacity: 1; }
.ci-ctoolbar label > .ci-ctoolbar-input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.ci-ctoolbar label > .ci-ctoolbar-input::-webkit-search-decoration { -webkit-appearance: none; }
@media (hover: hover) {
  .ci-ctoolbar label.ci-ctoolbar-search:hover { border-color: #545658; }
  .ci-ctoolbar .ci-ctoolbar-reset:hover { text-decoration: underline; }
}
.ci-ctoolbar label.ci-ctoolbar-search:active { background: #ededed; border-color: #545658; }
.ci-ctoolbar .ci-ctoolbar-chips { display: flex; flex-wrap: wrap; gap: 12px 8px; margin-top: 12px; }
.ci-ctoolbar .ci-ctoolbar-chips:empty { display: none; }
/* filter/chip, an applied filter with its close glyph (0438): 32px pill, 44px hit area (rows 12 apart,
   so two rows' areas never overlap). Hover and pressed draw the 1px line inset, so the pill keeps
   its width (user call, DREAM-718). */
.ci-ctoolbar .ci-ctoolbar-chip { align-items: center; background: #f3f3f3; border: 0; border-radius: 999px; color: #202224; cursor: pointer; display: inline-flex; font-family: inherit; font-size: 12px; font-style: normal; font-weight: 400; gap: 6px; letter-spacing: 0; line-height: 20px; margin: 0; max-width: 100%; min-height: 32px; overflow-wrap: anywhere; padding: 6px 8px 6px 12px; position: relative; text-align: left; }
.ci-ctoolbar .ci-ctoolbar-chip::before { content: ''; inset: -6px 0; position: absolute; }
.ci-ctoolbar .ci-ctoolbar-chip-icon { display: block; flex: none; height: 12px; width: 12px; }
/* Unguarded, so a pre-0438 sheet's green :hover cannot win on a touch screen. */
.ci-ctoolbar .ci-ctoolbar-chip:hover { background: #f3f3f3; }
@media (hover: hover) {
  .ci-ctoolbar .ci-ctoolbar-chip:hover { background: #ededed; box-shadow: inset 0 0 0 1px #545658; }
}
.ci-ctoolbar .ci-ctoolbar-chip:active { background: #ededed; box-shadow: inset 0 0 0 1px #545658; color: #545658; }
.ci-ctoolbar .ci-ctoolbar-chip:focus-visible { outline: none; }
/* Figma's ring: 2px #5749DD, 3px out, radius 8 inside (a rounded rect round the pill). */
.ci-ctoolbar .ci-ctoolbar-chip:focus-visible::after { border: 2px solid #5749dd; border-radius: 10px; content: ''; inset: -5px; pointer-events: none; position: absolute; }
@media (forced-colors: active) { .ci-ctoolbar .ci-ctoolbar-chip, .ci-ctoolbar .ci-ctoolbar-chip:focus-visible { outline: 1px solid ButtonText; outline-offset: -1px; } }
.ci-ctoolbar .ci-ctoolbar-meta { color: #545658; font-size: 14px; font-variant-numeric: tabular-nums; line-height: 20px; margin: 12px 0 0; }
/* The link carries its own 12px: a hidden link leaves the row 0 high, so no gap (R1.6). */
.ci-ctoolbar .ci-ctoolbar-meta-row { display: flex; margin: 0; }
/* link/text: 700 16/22 #0C866A; hover underlines, pressed #0D9070; a 44px hit area. */
.ci-ctoolbar .ci-ctoolbar-reset { background: none; border: 0; border-radius: 5px; color: #0c866a; cursor: pointer; font-family: inherit; font-size: 16px; font-weight: 700; line-height: 22px; margin: 12px 0 0; padding: 0; position: relative; }
.ci-ctoolbar .ci-ctoolbar-reset::before { content: ''; inset: -11px 0; position: absolute; }
.ci-ctoolbar .ci-ctoolbar-reset:active { color: #0d9070; text-decoration: underline; }
.ci-ctoolbar .ci-ctoolbar-reset:focus-visible { outline: 2px solid #5749dd; outline-offset: 3px; }
.ci-ctoolbar .ci-ctoolbar-reset[hidden] { display: none; }
/* feedback/empty-state: NoResults by default, Empty (`data-empty="none"`) on a list with no rows.
   Figma's pad 48 plus its 1px stroke inside the layout: 49 on every side, and the height hugs
   the words (the default copy measures 49+116+49 = 214), with no minimum (0425). */
.ci-ctoolbar div.ci-ctoolbar-empty { align-items: center; background: #ededed; border: 0; border-radius: 12px; display: flex; flex-direction: column; gap: 12px; margin: 16px 0 0; padding: 49px; text-align: center; }
.ci-ctoolbar div.ci-ctoolbar-empty[hidden] { display: none; }
.ci-ctoolbar .ci-ctoolbar-empty-title { color: #202224; font-size: 20px; font-weight: 700; line-height: 28px; margin: -6px 0 -8px; }
.ci-ctoolbar .ci-ctoolbar-none-title { color: #202224; display: none; font-size: 20px; font-weight: 700; line-height: 28px; margin: -6px 0 -8px; }
.ci-ctoolbar .ci-ctoolbar-empty-text { color: #545658; font-size: 14px; line-height: 20px; margin: -4px 0 -6px; max-width: 420px; }
.ci-ctoolbar .ci-ctoolbar-none-text { color: #545658; display: none; font-size: 14px; line-height: 20px; margin: -4px 0 -6px; max-width: 420px; }
.ci-ctoolbar-empty[data-empty="none"] > .ci-ctoolbar-empty-title { display: none; }
.ci-ctoolbar-empty[data-empty="none"] > .ci-ctoolbar-empty-text { display: none; }
.ci-ctoolbar-empty[data-empty="none"] > .ci-ctoolbar-none-title { display: block; }
.ci-ctoolbar-empty[data-empty="none"] > .ci-ctoolbar-none-text { display: block; }
.ci-ctoolbar-empty[data-empty="none"] > .ci-ctoolbar-clear { display: none; }
/* Empty's own button/primary (0479): the hub link, shown only on a list with no rows, and only where it has an address. */
.ci-ctoolbar .ci-ctoolbar-hub { display: none; }
.ci-ctoolbar .ci-ctoolbar-empty[data-empty="none"] > .ci-ctoolbar-hub[href]:not([href=""]) { display: inline-flex; }
/* button/primary with its arrow; the white ring sits 1px off the grey panel, the purple 5px out. */
.ci-ctoolbar .ci-ctoolbar-clear, .ci-ctoolbar .ci-ctoolbar-empty > .ci-ctoolbar-hub { align-items: center; background: #0c866a; border: 0; border-radius: 4px; color: #fff; cursor: pointer; flex: none; font-family: inherit; font-size: 18px; font-weight: 700; gap: 4px; height: 48px; justify-content: center; line-height: 24px; margin: 0; max-width: 100%; padding: 0 24px; text-decoration: none; }
.ci-ctoolbar .ci-ctoolbar-clear { display: inline-flex; }
.ci-ctoolbar .ci-ctoolbar-clear:hover, .ci-ctoolbar .ci-ctoolbar-hub:hover { background: #0d9070; }
.ci-ctoolbar .ci-ctoolbar-clear:active, .ci-ctoolbar .ci-ctoolbar-hub:active { background: #1b5547; }
.ci-ctoolbar .ci-ctoolbar-clear:focus-visible, .ci-ctoolbar .ci-ctoolbar-hub:focus-visible { box-shadow: 0 0 0 1px #ededed, 0 0 0 3px #fff; outline: 2px solid #5749dd; outline-offset: 5px; }
.ci-ctoolbar .ci-ctoolbar-clear-label, .ci-ctoolbar .ci-ctoolbar-hub-label { margin: -5px 0 -6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-ctoolbar .ci-ctoolbar-clear-icon { display: block; flex: none; height: 12px; width: 12px; }
/* Its own rule: 0410 finds its version by the clear icon's rule text (PR #578 R1.8). */
.ci-ctoolbar .ci-ctoolbar-hub-icon { display: block; flex: none; height: 12px; width: 12px; }