/* ChinaImports Design System — components (v1, 2026-10-26)
   Requires tokens.css. Every rule reads var(--ci-*). Prefix: .ci-
   States every interactive component has: rest · hover · active(press) · focus-visible · disabled.
   Elevation rule: hairline/tonal at rest, shadow only when floating (dock, sheet, toast, dialog). */

/* ── base ───────────────────────────────────────── */
.ci, .ci * { box-sizing: border-box; }
.ci { font-family: var(--ci-font); color: var(--ci-ink); -webkit-font-smoothing: antialiased; font-size: var(--ci-fs-15); line-height: var(--ci-lh-body); }
/* :where() keeps this at zero specificity so .ci-btn--* colours always win */
:where(.ci) a { color: inherit; text-decoration: none; }
.ci button, .ci input, .ci textarea, .ci select { font-family: inherit; }
.ci :focus-visible { outline: 2px solid var(--ci-focus); outline-offset: 2px; }
.ci .num { font-variant-numeric: tabular-nums; }
/* dc runtime wraps every binding in span.sc-interp — keep it invisible to descendant rules */
.ci span.sc-interp { font: inherit !important; color: inherit !important; letter-spacing: inherit !important; text-transform: inherit !important; display: inline !important; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; filter: none !important; position: static !important; }

/* ── type ───────────────────────────────────────── */
.ci-display { font-size: var(--ci-fs-64); line-height: 1.02; font-weight: var(--ci-fw-semibold); letter-spacing: var(--ci-track-display); margin: 0; text-wrap: balance; }
.ci-h1 { font-size: var(--ci-fs-40); line-height: var(--ci-lh-tight); font-weight: var(--ci-fw-semibold); letter-spacing: var(--ci-track-tight); margin: 0; text-wrap: balance; }
.ci-h2 { font-size: var(--ci-fs-30); line-height: 1.15; font-weight: var(--ci-fw-semibold); letter-spacing: var(--ci-track-tight); margin: 0; text-wrap: balance; }
.ci-h3 { font-size: var(--ci-fs-18); line-height: var(--ci-lh-snug); font-weight: var(--ci-fw-semibold); margin: 0; }
.ci-title { font-size: var(--ci-fs-16); line-height: var(--ci-lh-snug); font-weight: var(--ci-fw-semibold); margin: 0; }
.ci-body { font-size: var(--ci-fs-15); color: var(--ci-ink-2); margin: 0; }
.ci-lead { font-size: var(--ci-fs-18); color: var(--ci-ink-2); margin: 0; max-width: 36em; }
.ci-meta { font-size: var(--ci-fs-13); color: var(--ci-ink-3); }
.ci-label { font-size: var(--ci-fs-12); font-weight: var(--ci-fw-semibold); color: var(--ci-ink-3); }
.ci-accent { color: var(--ci-primary); }

/* ── buttons ────────────────────────────────────── */
.ci-btn { height: var(--ci-btn-h); padding: 0 var(--ci-s-5); border: 0; border-radius: var(--ci-r-sm); display: inline-flex; align-items: center; justify-content: center; gap: var(--ci-s-2); font-size: var(--ci-fs-15); font-weight: var(--ci-fw-semibold); cursor: pointer; white-space: nowrap; transition: background-color var(--ci-t-fast), transform var(--ci-t-fast), box-shadow var(--ci-t-fast); }
.ci-btn:active { transform: scale(.98); }
.ci-btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.ci-btn--primary[disabled] { opacity: 1; background: var(--ci-blue-200); }   /* opacity on a filled button leaves a band behind the label */
.ci-btn--primary { background: var(--ci-primary); color: var(--ci-on-primary); }
.ci-btn--primary:hover { background: var(--ci-primary-hover); }
.ci-btn--secondary { background: var(--ci-surface); color: var(--ci-ink); box-shadow: inset 0 0 0 1px var(--ci-line-2); }
.ci-btn--secondary:hover { background: var(--ci-surface-2); }
.ci-btn--soft { background: var(--ci-blue-50); color: var(--ci-primary); }
.ci-btn--soft:hover { background: var(--ci-blue-100); }
.ci-btn--ghost { background: transparent; color: var(--ci-primary); padding: 0 var(--ci-s-2); }
.ci-btn--dark { background: var(--ci-blue-900); color: #fff; }
.ci-btn--wa { background: var(--ci-wa-strong); color: var(--ci-on-primary); }
.ci-btn--on-blue { background: var(--ci-surface); color: var(--ci-primary); }
.ci-btn--on-blue:hover { background: var(--ci-blue-50); }
.ci-btn--sm { height: var(--ci-btn-h-sm); padding: 0 var(--ci-s-4); font-size: var(--ci-fs-14); }
.ci-btn--lg { height: 56px; padding: 0 var(--ci-s-6); font-size: var(--ci-fs-16); }
.ci-btn--block { width: 100%; }
.ci-icon-btn { width: var(--ci-touch); height: var(--ci-touch); border-radius: var(--ci-r-sm); border: 0; display: inline-grid; place-items: center; background: transparent; color: var(--ci-ink-2); cursor: pointer; transition: background-color var(--ci-t-fast), transform var(--ci-t-fast); }
.ci-icon-btn:hover { background: var(--ci-surface-3); }
.ci-icon-btn:active { transform: scale(.96); }
.ci-icon-btn--primary { background: var(--ci-primary); color: #fff; }
.ci-icon-btn--primary:hover { background: var(--ci-primary-hover); }
.ci-icon-btn--round { border-radius: 50%; background: var(--ci-surface); box-shadow: inset 0 0 0 1px var(--ci-line); }
.ci-link { position: relative; color: var(--ci-primary); font-weight: var(--ci-fw-medium); font-size: var(--ci-fs-14); background: none; border: 0; padding: 0; cursor: pointer; }
.ci-link::after { content: ""; position: absolute; inset: -12px -6px; }   /* 44px hit area without moving the text */

/* ── badges / status ────────────────────────────── */
.ci-badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--ci-r-pill); font-size: var(--ci-fs-12); font-weight: var(--ci-fw-semibold); white-space: nowrap; }
.ci-badge--green { background: var(--ci-green-700); color: var(--ci-on-primary); }
.ci-badge--blue { background: var(--ci-blue-50); color: var(--ci-primary); }
.ci-badge--amber { background: var(--ci-amber-50); color: var(--ci-amber-700); }
.ci-badge--grey { background: var(--ci-surface-3); color: var(--ci-ink-2); }
.ci-badge--glass { background: rgba(255,255,255,.2); color: #fff; }
.ci-badge--new { height: 20px; padding: 0 8px; background: var(--ci-blue-50); color: var(--ci-primary); font-size: var(--ci-fs-11); }

/* ── app bar (greeting) ─────────────────────────── */
.ci-appbar { display: flex; align-items: center; gap: var(--ci-s-3); min-height: var(--ci-topbar-h); }
.ci-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--ci-blue-900) center/cover; color: #fff; display: grid; place-items: center; font-size: var(--ci-fs-14); font-weight: var(--ci-fw-semibold); flex: none; }
.ci-avatar--sm { width: 32px; height: 32px; font-size: var(--ci-fs-12); }
.ci-appbar__text { flex: 1; min-width: 0; }
.ci-appbar__hi { font-size: var(--ci-fs-18); font-weight: var(--ci-fw-semibold); line-height: 1.2; }
.ci-appbar__sub { font-size: var(--ci-fs-13); color: var(--ci-ink-3); }

/* ── quick actions ──────────────────────────────── */
.ci-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ci-s-2); }
.ci-quick__item { display: grid; justify-items: center; align-content: start; gap: var(--ci-s-2); padding: var(--ci-s-3) var(--ci-s-1); border-radius: var(--ci-r-md); background: var(--ci-surface-2); box-shadow: none; text-align: center; font-size: var(--ci-fs-12); font-weight: var(--ci-fw-medium); line-height: 1.25; color: var(--ci-ink-2); cursor: pointer; transition: background-color var(--ci-t-fast), transform var(--ci-t-fast); }
.ci-quick__item:hover { background: var(--ci-surface-3); }
.ci-quick__item:active { transform: scale(.97); }
.ci-quick__disc { width: 40px; height: 40px; border-radius: 50%; background: var(--ci-blue-50); color: var(--ci-primary); display: grid; place-items: center; }

/* ── section head ───────────────────────────────── */
.ci-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ci-s-3); margin-bottom: var(--ci-s-3); }

/* ── hero card (blue, illustration bleeds out) ──── */
.ci-hero-card { position: relative; border-radius: var(--ci-r-lg); background: linear-gradient(135deg, var(--ci-blue-600) 0%, var(--ci-blue-600) 55%, var(--ci-blue-500) 100%); color: #fff; padding: var(--ci-s-4); min-height: 136px; overflow: visible; box-shadow: var(--ci-shadow-blue); display: grid; align-content: space-between; gap: var(--ci-s-2); }
.ci-hero-card__body { position: relative; z-index: 1; display: grid; gap: 6px; max-width: 58%; }
.ci-hero-card__id { font-size: var(--ci-fs-18); font-weight: var(--ci-fw-semibold); }
.ci-hero-card__meta { display: flex; align-items: center; gap: 6px; font-size: var(--ci-fs-12); color: rgba(255,255,255,.85); }
.ci-hero-card__foot { position: relative; z-index: 1; font-size: var(--ci-fs-13); color: rgba(255,255,255,.85); max-width: 58%; }
.ci-hero-card__foot b { color: #fff; font-size: var(--ci-fs-16); }
.ci-hero-card__art { position: absolute; right: -8px; bottom: 4px; width: auto; max-width: 52%; max-height: min(170px, 100%); height: auto; object-fit: contain; pointer-events: none; filter: drop-shadow(0 10px 14px rgba(10,23,63,.35)); }

/* ── cards + key/value rows ─────────────────────── */
.ci-card { background: var(--ci-surface-2); border-radius: var(--ci-r-md); padding: var(--ci-s-4); display: grid; gap: var(--ci-s-3); }
.ci-card--white { background: var(--ci-surface); box-shadow: inset 0 0 0 1px var(--ci-line); }
.ci-card--link { cursor: pointer; transition: background-color var(--ci-t-fast); }
.ci-card--link:hover { background: var(--ci-surface-3); }
.ci-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ci-s-3); }
.ci-card__title { display: flex; align-items: center; gap: var(--ci-s-2); font-weight: var(--ci-fw-semibold); font-size: var(--ci-fs-15); }
.ci-kv { display: flex; justify-content: space-between; gap: var(--ci-s-3); font-size: var(--ci-fs-14); color: var(--ci-ink-3); }
.ci-kv__k { display: flex; align-items: center; gap: var(--ci-s-2); }
.ci-kv__v { color: var(--ci-ink); font-weight: var(--ci-fw-medium); text-align: right; font-variant-numeric: tabular-nums; }
.ci-divider { height: 1px; background: var(--ci-line); border: 0; margin: 0; }
.ci-person { display: flex; align-items: center; gap: var(--ci-s-3); background: var(--ci-surface); border-radius: var(--ci-r-sm); padding: var(--ci-s-2) var(--ci-s-3); }
.ci-person__text { flex: 1; min-width: 0; font-size: var(--ci-fs-14); font-weight: var(--ci-fw-semibold); line-height: 1.25; }
.ci-person__text span { display: block; font-size: var(--ci-fs-12); font-weight: var(--ci-fw-regular); color: var(--ci-ink-3); }

/* ── photo / illustration cards (text below, never on top) ── */
.ci-media-card { display: grid; grid-template-rows: auto 1fr; border-radius: var(--ci-r-md); overflow: hidden; background: var(--ci-surface); box-shadow: inset 0 0 0 1px var(--ci-line); }
.ci-media-card__img { aspect-ratio: 4/3; background: var(--ci-surface-2) center/cover no-repeat; }
.ci-media-card__img--contain { background-size: contain; }
.ci-media-card__body { padding: var(--ci-s-4); display: grid; gap: 4px; align-content: start; }
.ci-art-tile { border-radius: var(--ci-r-md); background: var(--ci-surface-2); display: grid; place-items: center; aspect-ratio: 3/2; overflow: hidden; padding: var(--ci-s-3); }
.ci-art-tile img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; min-height: 0; }

/* ── list (grouped rows) ────────────────────────── */
.ci-list { display: grid; gap: var(--ci-s-2); }
.ci-list__item { display: flex; align-items: center; gap: var(--ci-s-3); padding: var(--ci-s-3); border-radius: var(--ci-r-sm); background: var(--ci-surface-2); transition: background-color var(--ci-t-fast); text-align: left; width: 100%; border: 0; font: inherit; color: inherit; }
a.ci-list__item, button.ci-list__item { cursor: pointer; }
a.ci-list__item:hover, button.ci-list__item:hover { background: var(--ci-surface-3); }
.ci-list__icon { width: 36px; height: 36px; border-radius: var(--ci-r-sm); background: var(--ci-surface); color: var(--ci-primary); display: grid; place-items: center; flex: none; }
.ci-list__text { flex: 1; min-width: 0; font-size: var(--ci-fs-14); font-weight: var(--ci-fw-semibold); line-height: 1.3; }
.ci-list__text span { display: block; font-size: var(--ci-fs-12); font-weight: var(--ci-fw-regular); color: var(--ci-ink-3); }

/* ── chips (outlined suggestions) ───────────────── */
.ci-chips { display: flex; flex-wrap: wrap; gap: var(--ci-s-2); }
.ci-chip { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 var(--ci-s-3); border-radius: var(--ci-r-pill); background: var(--ci-surface); box-shadow: inset 0 0 0 1px var(--ci-line-2); font-size: var(--ci-fs-13); color: var(--ci-ink-2); cursor: pointer; border: 0; transition: background-color var(--ci-t-fast); }
.ci-chip:hover { background: var(--ci-surface-2); }
.ci-chip.is-on { background: var(--ci-blue-900); color: var(--ci-on-primary); box-shadow: none; }
.ci-suggest { display: grid; justify-items: center; gap: var(--ci-s-3); padding: var(--ci-s-5) var(--ci-s-4); border-radius: var(--ci-r-md); background: var(--ci-surface); box-shadow: inset 0 0 0 1px var(--ci-line); text-align: center; font-size: var(--ci-fs-13); color: var(--ci-ink-2); cursor: pointer; }

/* ── dock (floating bottom nav) ─────────────────── */
.ci-dock { position: fixed; left: var(--ci-gutter); right: var(--ci-gutter); max-width: 440px; margin-inline: auto; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 40; height: var(--ci-dock-h); border-radius: var(--ci-r-lg); background: var(--ci-blue-600); box-shadow: var(--ci-shadow-3); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--ci-s-2); }
.ci-dock__item { height: 46px; min-width: 46px; border-radius: var(--ci-r-sm); display: inline-flex; align-items: center; justify-content: center; gap: var(--ci-s-2); padding: 0 var(--ci-s-3); color: rgba(255,255,255,.88); font-size: var(--ci-fs-14); font-weight: var(--ci-fw-semibold); transition: background-color var(--ci-t-base) var(--ci-ease), color var(--ci-t-base); }
.ci-dock__item { position: relative; }
.ci-dock__item .ci-dock__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* hidden, still read aloud */
.ci-dock__item.is-on { background: var(--ci-surface); color: var(--ci-primary); }
.ci-dock__item.is-on .ci-dock__label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }

/* ── bottom sheet / dialog ──────────────────────── */
.ci-scrim { position: fixed; inset: 0; z-index: 80; background: rgba(10,23,63,.45); display: grid; place-items: end center; overflow-y: auto; overscroll-behavior: contain; animation: ci-fade var(--ci-t-base) ease-out; }
.ci-sheet { width: 100%; max-width: 520px; background: var(--ci-surface); border-radius: var(--ci-r-lg) var(--ci-r-lg) 0 0; padding: var(--ci-s-5) var(--ci-s-4) calc(var(--ci-s-5) + env(safe-area-inset-bottom, 0px)); display: grid; gap: var(--ci-s-4); box-shadow: var(--ci-shadow-3); position: relative; max-height: calc(100dvh - 16px); overflow-y: auto; overscroll-behavior: contain; animation: ci-sheet-up var(--ci-t-sheet) var(--ci-ease-sheet); }
.ci-sheet::before { content: ""; justify-self: center; width: 40px; height: 4px; border-radius: 4px; background: var(--ci-line-2); margin-top: -8px; }
.ci-sheet__head { display: flex; align-items: center; gap: var(--ci-s-2); }
@media (min-width: 861px) { .ci-scrim { place-items: center; } .ci-sheet { border-radius: var(--ci-r-lg); max-width: 440px; animation: ci-pop var(--ci-t-sheet) var(--ci-ease-sheet); } .ci-sheet::before { display: none; } }

/* ── forms ──────────────────────────────────────── */
.ci-field { display: grid; gap: 6px; }
.ci-field > label { font-size: var(--ci-fs-13); font-weight: var(--ci-fw-semibold); color: var(--ci-ink-2); }
.ci-hint { font-size: var(--ci-fs-12); color: var(--ci-ink-3); }
.ci-input { height: var(--ci-input-h); width: 100%; border: 0; border-radius: var(--ci-r-sm); background: var(--ci-surface); box-shadow: inset 0 0 0 1px var(--ci-line-input); padding: 0 var(--ci-s-4); font-size: var(--ci-fs-16); color: var(--ci-ink); outline: none; transition: box-shadow var(--ci-t-fast); }
.ci-input::placeholder { color: var(--ci-ink-4); }
.ci-input:focus { box-shadow: inset 0 0 0 1.5px var(--ci-primary), 0 0 0 4px var(--ci-blue-50); }
.ci-input.is-error { box-shadow: inset 0 0 0 1.5px var(--ci-red-600); }
textarea.ci-input { height: 96px; padding: var(--ci-s-3) var(--ci-s-4); resize: vertical; }
.ci-input-group { display: flex; align-items: center; border-radius: var(--ci-r-sm); background: var(--ci-surface); box-shadow: inset 0 0 0 1px var(--ci-line-input); }
.ci-input-group:focus-within { box-shadow: inset 0 0 0 1.5px var(--ci-primary), 0 0 0 4px var(--ci-blue-50); }
.ci-input-group > span { padding-left: var(--ci-s-4); font-weight: var(--ci-fw-semibold); color: var(--ci-ink-2); }
.ci-input-group .ci-input { box-shadow: none; flex: 1; min-width: 0; padding-left: var(--ci-s-2); background: transparent; }
.ci-error { font-size: var(--ci-fs-13); font-weight: var(--ci-fw-medium); color: var(--ci-red-600); }
.ci-otp { letter-spacing: .6em; text-align: center; font-size: var(--ci-fs-24); font-weight: var(--ci-fw-semibold); height: 60px; }
.ci-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: var(--ci-r-sm); background: var(--ci-surface-3); }
.ci-seg button { min-height: var(--ci-touch); border: 0; border-radius: 8px; background: transparent; font-size: var(--ci-fs-14); font-weight: var(--ci-fw-semibold); color: var(--ci-ink-3); cursor: pointer; }
.ci-seg button.is-on { background: var(--ci-surface); color: var(--ci-ink); box-shadow: var(--ci-shadow-1); }
.ci-option { display: flex; align-items: center; gap: var(--ci-s-3); width: 100%; padding: var(--ci-s-3) var(--ci-s-4); border: 0; border-radius: var(--ci-r-sm); background: var(--ci-surface-2); text-align: left; cursor: pointer; }
.ci-option.is-on { background: var(--ci-blue-50); box-shadow: inset 0 0 0 1.5px var(--ci-primary); }
.ci-option b { display: block; font-size: var(--ci-fs-15); font-weight: var(--ci-fw-semibold); color: var(--ci-ink); }
.ci-option small { display: block; font-size: var(--ci-fs-13); color: var(--ci-ink-3); }
.ci-pill-opt { height: 40px; padding: 0 var(--ci-s-4); border: 0; border-radius: var(--ci-r-pill); background: var(--ci-surface-3); font-size: var(--ci-fs-14); font-weight: var(--ci-fw-medium); color: var(--ci-ink-2); cursor: pointer; }
.ci-pill-opt.is-on { background: var(--ci-blue-900); color: #fff; }

/* ── stepper / route progress ───────────────────── */
.ci-steps { display: flex; gap: 6px; }
.ci-steps i { flex: 1; height: 4px; border-radius: 4px; background: var(--ci-line); }
.ci-steps i.is-on { background: var(--ci-primary); }
.ci-route { position: relative; display: flex; justify-content: space-between; align-items: center; height: 16px; }
.ci-route::before { content: ""; position: absolute; left: 4px; right: 4px; top: 7px; height: 2px; background: var(--ci-line-2); }
.ci-route__fill { position: absolute; left: 4px; top: 7px; height: 2px; background: var(--ci-primary); }
.ci-route i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--ci-line-2); }
.ci-route i.is-done { background: var(--ci-primary); }
.ci-route i.is-now { width: 16px; height: 16px; background: var(--ci-primary); box-shadow: 0 0 0 4px var(--ci-blue-100); }

/* ── tabs ───────────────────────────────────────── */
.ci-tabs { display: flex; gap: var(--ci-s-1); border-bottom: 1px solid var(--ci-line); }
.ci-tabs a, .ci-tabs button { min-height: var(--ci-touch); padding: var(--ci-s-3) var(--ci-s-3); border: 0; background: none; font-size: var(--ci-fs-14); font-weight: var(--ci-fw-semibold); color: var(--ci-ink-3); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
.ci-tabs .is-on { color: var(--ci-primary); border-bottom-color: var(--ci-primary); }

/* ── chat ───────────────────────────────────────── */
.ci-chat { display: grid; gap: var(--ci-s-3); }
.ci-chat__day { justify-self: center; font-size: var(--ci-fs-12); color: var(--ci-ink-3); background: var(--ci-surface-3); padding: 4px 10px; border-radius: var(--ci-r-pill); }
.ci-bubble { max-width: 78%; padding: var(--ci-s-3) var(--ci-s-4); border-radius: var(--ci-r-md); font-size: var(--ci-fs-14); line-height: 1.45; }
.ci-bubble--me { justify-self: end; background: var(--ci-primary); color: #fff; border-bottom-right-radius: 4px; }
.ci-bubble--them { justify-self: start; background: var(--ci-surface-3); color: var(--ci-ink); border-bottom-left-radius: 4px; }
.ci-bubble__time { font-size: var(--ci-fs-11); color: var(--ci-ink-3); }
.ci-bubble__time--me { justify-self: end; }
.ci-composer { border-radius: var(--ci-r-md); background: var(--ci-surface); box-shadow: inset 0 0 0 1px var(--ci-line-2); padding: var(--ci-s-3); display: grid; gap: var(--ci-s-2); }
.ci-composer input { border: 0; outline: none; font-size: var(--ci-fs-16); background: transparent; min-width: 0; }
.ci-composer__bar { display: flex; align-items: center; gap: var(--ci-s-1); color: var(--ci-ink-3); }

/* ── table ──────────────────────────────────────── */
.ci-table { width: 100%; border-collapse: collapse; font-size: var(--ci-fs-14); }
.ci-table th { text-align: left; font-size: var(--ci-fs-12); font-weight: var(--ci-fw-semibold); color: var(--ci-ink-3); padding: 0 var(--ci-s-4) var(--ci-s-3) 0; border-bottom: 1px solid var(--ci-line-2); }
.ci-table td { padding: var(--ci-s-3) var(--ci-s-4) var(--ci-s-3) 0; border-bottom: 1px solid var(--ci-line); color: var(--ci-ink-2); }
.ci-table td:first-child { color: var(--ci-ink); font-weight: var(--ci-fw-semibold); }

/* ── accordion ──────────────────────────────────── */
.ci-acc { border-top: 1px solid var(--ci-line); }
.ci-acc:last-child { border-bottom: 1px solid var(--ci-line); }
.ci-acc button { width: 100%; display: flex; justify-content: space-between; gap: var(--ci-s-4); padding: var(--ci-s-4) 0; border: 0; background: none; text-align: left; font-size: var(--ci-fs-16); font-weight: var(--ci-fw-semibold); color: var(--ci-ink); cursor: pointer; }
.ci-acc p { margin: 0; padding: 0 0 var(--ci-s-4); color: var(--ci-ink-2); font-size: var(--ci-fs-15); max-width: 62ch; animation: ci-fade var(--ci-t-base) ease-out; }

/* ── toast, empty ───────────────────────────────── */
.ci-toast { position: fixed; left: 50%; bottom: calc(var(--ci-dock-h) + 28px); transform: translateX(-50%); z-index: 90; background: var(--ci-blue-950); color: var(--ci-on-primary); max-width: calc(100vw - 32px); text-align: center; padding: var(--ci-s-3) var(--ci-s-4); border-radius: var(--ci-r-sm); font-size: var(--ci-fs-14); font-weight: var(--ci-fw-medium); box-shadow: var(--ci-shadow-2); animation: ci-toast var(--ci-t-base) ease-out; }
.ci-empty { display: grid; justify-items: center; gap: var(--ci-s-2); padding: var(--ci-s-8) var(--ci-s-4); text-align: center; border-radius: var(--ci-r-md); background: var(--ci-surface-2); }
.ci-empty img { width: 160px; height: auto; margin-bottom: var(--ci-s-2); }

/* ── web chrome ─────────────────────────────────── */
.ci-wrap { max-width: var(--ci-max); margin: 0 auto; padding: 0 28px; }
.ci-nav { position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--ci-line); }
.ci-nav__in { height: 68px; display: flex; align-items: center; gap: var(--ci-s-8); }
.ci-nav__links { display: flex; gap: var(--ci-s-1); flex: 1; }
.ci-nav__links a { padding: 8px 12px; border-radius: var(--ci-r-sm); font-size: var(--ci-fs-15); font-weight: var(--ci-fw-medium); color: var(--ci-ink-2); }
.ci-nav__links a:hover { background: var(--ci-surface-2); }
.ci-nav__links a.is-on { color: var(--ci-primary); }
.ci-logo { display: flex; align-items: center; gap: 10px; font-size: var(--ci-fs-20); font-weight: var(--ci-fw-bold); letter-spacing: -.02em; }
.ci-logo img { width: 36px; height: 36px; }
.ci-logo i { font-style: normal; color: var(--ci-ink-3); font-weight: var(--ci-fw-semibold); }
.ci-footer { border-top: 1px solid var(--ci-line); padding: var(--ci-s-10) 0; margin-top: var(--ci-s-16); font-size: var(--ci-fs-14); color: var(--ci-ink-3); }

/* ── motion ─────────────────────────────────────── */
@keyframes ci-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes ci-sheet-up { from { transform: translateY(100%) } to { transform: none } }
@keyframes ci-pop { from { transform: translateY(12px) scale(.98); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes ci-toast { from { transform: translate(-50%, 8px); opacity: 0 } to { transform: translate(-50%, 0); opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .ci *, .ci *::before, .ci *::after { animation: none !important; transition: none !important; } }

@media (max-width: 860px) {
  .ci-wrap { padding: 0 var(--ci-gutter); }
  .ci-display { font-size: var(--ci-fs-40); }
  .ci-h1 { font-size: var(--ci-fs-30); }
  .ci-h2 { font-size: var(--ci-fs-24); }
  .ci-lead { font-size: var(--ci-fs-16); }
}

/* ── phone ergonomics (audit 2026-10-26) ────────── */
@media (max-width: 860px) {
  .ci { --ci-btn-h-sm: 44px; }
  .ci-pill-opt { min-height: var(--ci-touch); }
  .ci-chip { height: var(--ci-touch); }
  /* toasts sit at the top on phones so they never cover the action they confirm */
  .ci-toast { top: calc(12px + env(safe-area-inset-top, 0px)); bottom: auto; }
}
@media (max-width: 400px) {
  .ci-hero-card__art { max-width: 46%; }
  .ci-hero-card__body, .ci-hero-card__foot { max-width: 56%; }
}
/* visually hidden, still announced */
.ci-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Sheet contract: the scrim carries role=dialog + aria-modal + aria-labelledby; opening moves focus into the
   sheet, Esc and the scrim close it, Tab stays inside, closing returns focus to the trigger. */

/* promoted from the boards (audit pass 2, 2026-10-26) */
.is-on .ci-badge--blue { background: var(--ci-surface); }
figure.ci-media-card { margin: 0; }
.ci-media-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ci-empty img { height: auto; }
.ci-hero-card__body .ci-badge { justify-self: start; }
.ci-hero-card__foot b { white-space: nowrap; }