/* ══════════════════════════════════════════════════════════════════════
   ONBOARDING CLAUDE — channel cards + qcard flow
   Owner: spec B implementer. Loaded from index.html after components.css.
   Scope rule: the .chan-* family is unscoped because chat-home shares it; the
   few screen-specific deltas are scoped to .onb6-chat-start (the chat screen) or
   .home__cgroup (home), never to a route.

   B5 (2026-09-03): the art is direction B, ported verbatim from
   design/research/onboarding-claude-creative-v2/directions-b.html (AI = B-AI-2).
   Monochrome only — N50 plate, white / N200 / N300 depth ladder, N300 dashed
   ghosts. No photo, no per-channel tint, no growth curve, no brand-colour
   favicon. --primary-500 appears exactly once per card: the signal pill arrow.
   ══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   CHANNEL CARD FORMAT v1 — the slot contract (D3-report §2, direction B).
   A new channel or a new goal fills the slots; it does not invent slots.

   1 · PLATE   .chan-card__art — the ONLY surface of the card. 237 × 158
                (--onbc-chan-ratio 3 / 2), fill --neutral-50, --radius-xl,
                --shadow-1. Borderless: no border and no inset ring; the
                shadow alone separates the plate from the page.
   2 · SCENE   .chan-art__scene — inset 0 inside the plate. THE ONLY
       SLOT      purpose-specific slot. Parts catalogue (direction B):
                A receding stack (1 front + max 3 behind) · B rank ladder
                (bare numeric ranks + dashed ghosts of past positions) ·
                D single window (question pill + one answer line + skeleton
                + sources row + dashed past row).
   3 · SIGNAL  .chan-art__sig — bottom-right pill, identical vessel, size,
                weight and corner on all three cards: right / bottom =
                --onbc-chan-sig-off, white + --border + --shadow-2 +
                --radius-full, 11 / 14, number semibold N900 and word regular
                N700, trailing ph-arrow-up-right at 12 (the card's only
                --primary-500). Copy types, no fourth type:
                <count> <noun> · #a → #b (once per set) · <verb> ×n ·
                +<pct> <noun>.
   4 · TITLE   .chan-card__title — pattern (c): NO arrow, margin-top 12,
                min-height --onbc-chan-title-2l (= 2 × --type-b4-lh) so the
                tag rows of all three cards align whether the title wraps or
                not. Verb-first, no trailing period.
   5 · TAGS    .chan-card__tags — max 2 DS .tag pills: <platforms> and
                <cadence>. No margin of their own; the title's reserved
                second line is the gap.

   禁則: 2 本以上の線 / 2 箇所以上のアクセント / 1× で 10px 未満の文字 /
         写真・ブランド色ロゴ・絵文字・装飾 SVG（データ可視化のパスを除く）/
         順位軸をセット内で 2 枚以上 / カードの枠線・カード背景 /
         アート内での中間階調（N50・白+N200・白+N300・N300 破線の 4 段のみ）。
   ══════════════════════════════════════════════════════════════════════ */

/* ---------------------------------------------------------------------------
   LOCAL VARIABLES — declared once, referenced everywhere below.
   Colour / spacing / radius / type all come from tokens.css. The values here
   are the ones the DS has no slot for: mock-art internals. They are art
   geometry, not UI chrome, and are never used outside .chan-*. They are the
   --d-* block of directions-b.html renamed to the --onbc-chan-* namespace.
   --------------------------------------------------------------------------- */
:root {
  /* plate + card shell */
  --onbc-chan-ratio:      3 / 2;    /* 237 × 158 at the chat/home card measure */
  --onbc-chan-title-2l:   calc(var(--type-b4-lh) * 2);  /* title row pattern (c) */
  --onbc-chan-hair:       1px;      /* every stroke in the art is 1px. No 2px. */
  --onbc-chan-lift:       -2px;     /* hover: the WHOLE card lifts (art + title + tags) */
  --onbc-chan-dur:        200ms;
  --onbc-chan-ease:       cubic-bezier(0.2, 0, 0, 1);
  --onbc-chan-focus-w:    2px;
  /* art typography — floor is 10px at 1×, two steps only: 10 (meta) and 11 (signal) */
  --onbc-chan-fs-sig:     11px;  --onbc-chan-lh-sig:  14px;
  --onbc-chan-fs-meta:    10px;  --onbc-chan-lh-meta: 13px;
  --onbc-chan-fs-icon:    12px;
  /* art geometry */
  --onbc-chan-sig-off:    10px;
  --onbc-chan-avatar:     18px;
  --onbc-chan-fav:        12px;
  --onbc-chan-dot:        6px;
  --onbc-chan-dot-sm:     5px;
  --onbc-chan-rung-h:     9px;
  --onbc-chan-rung-now:   22px;
  --onbc-chan-rank-col:   18px;
  --onbc-chan-climb-col:  20px;
  --onbc-chan-skel-h:     5px;
  --onbc-chan-skel-w:     62%;
  --onbc-chan-chip-h:     16px;
  --onbc-chan-chip-sm:    14px;
  --onbc-chan-qpill-h:    15px;
  /* qcard option row — Figma Master 4294:54538 */
  --onbc-chan-qopt-h:     40px;
}

/* ============================================================================
   1 · CHANNEL CARD — plate → title → tags.
   No card border and no card background: only the plate is a surface
   (spec R3 / research "高品質な実例ほど枠線を使わない").
   Shared by screens/onboarding-claude-chat.html and screens/chat-home.html.
   ============================================================================ */
.chan-grid       { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
                   gap: var(--space-8); align-items: start; }

/* the whole card is one hit target: it lifts as a unit on hover */
.chan-card       { display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 0;
                   border: 0; background: none; text-align: left; font: inherit; color: inherit;
                   cursor: pointer; -webkit-appearance: none; appearance: none;
                   margin-bottom: 0;
                   transition: margin var(--onbc-chan-dur) var(--onbc-chan-ease); }

/* PLATE (slot 1). Borderless: --shadow-1 alone gives the boundary. */
.chan-card__art  { position: relative; width: 100%; aspect-ratio: var(--onbc-chan-ratio);
                   border-radius: var(--radius-xl); overflow: hidden;
                   background: var(--neutral-50); box-shadow: var(--shadow-1);
                   transition: box-shadow var(--onbc-chan-dur) var(--onbc-chan-ease); }

/* TITLE (slot 4) — pattern (c): no arrow, two lines reserved so the three tag
   rows align even when one title wraps and the others do not. */
.chan-card__title{ display: block; margin-top: var(--space-5);
                   min-height: var(--onbc-chan-title-2l);
                   font: var(--type-b4-weight) var(--type-b4-size)/var(--type-b4-lh) var(--font-sans);
                   color: var(--text-secondary);
                   transition: color var(--onbc-chan-dur) var(--onbc-chan-ease); }
/* TAGS (slot 5) — no margin of their own; the reserved second title line is the gap. */
.chan-card__tags { display: flex; flex-wrap: wrap; gap: var(--space-3); }
/* the shared .tag ships N500 on N100 = 3.07:1; card tags carry real information, so
   they run at N700 (10.2:1) while keeping the DS pill geometry and 12px size. */
.chan-card__tags .tag { color: var(--text-secondary); }

/* hover — the card lifts as one unit, the plate steps up one elevation tier and
   the title darkens. The SCENE IS NOT SCALED: direction B's art is nothing but
   10px type and 1px hairlines, and a 1.03 zoom resamples every glyph and every
   stroke. The lift + shadow already read as "this is a button", so the scene
   stays pixel-exact. The plate never grows, so the row gutter is untouched. */
.chan-card:hover                 { margin-top: var(--onbc-chan-lift);
                                   margin-bottom: calc(-1 * var(--onbc-chan-lift)); }
.chan-card:hover .chan-card__art { box-shadow: var(--shadow-2); }
.chan-card:hover .chan-card__title { color: var(--text-primary); }

.chan-card:focus-visible { outline: var(--onbc-chan-focus-w) solid var(--border-strong);
                           outline-offset: var(--onbc-chan-focus-w); border-radius: var(--radius-xs); }

@media (prefers-reduced-motion: reduce) {
  .chan-card                       { transition: none; }
  .chan-card:hover                 { margin-top: 0; margin-bottom: 0; }
}

/* ============================================================================
   CODEX AWARENESS CARDS — approved Product scene + proof chip direction.
   Shared by onboarding-codex-chat and the completed-onboarding home mirror.
   The three scenes intentionally share one mint-to-white palette.
   ============================================================================ */
.app.onb6-codex-flow .onb6-channel-art--social,
.app.onb6-codex-flow .onb6-channel-art--search,
.app.onb6-codex-flow .onb6-channel-art--voices {
  padding: 0;
  background: linear-gradient(145deg, color-mix(in srgb, var(--secondary-green) 42%, var(--surface)), var(--surface));
  color: var(--text-primary);
}

/* Conversation-measure invariant: proposal copy, cards, composer and qcard all use
   the shared chat width. Card density must never widen the assistant turn. */
.app.onb6-codex-flow .onb6-chat-start .ob__inner { max-width: var(--layout-chat-content-w); }

.app.onb6-codex-flow .onb6-proof-window {
  position: absolute;
  inset: var(--space-3) var(--space-4) var(--space-7);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: var(--onbc-chan-hair) solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}

.app.onb6-codex-flow .onb6-proof-head {
  min-height: var(--space-10);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-4);
  border-bottom: var(--onbc-chan-hair) solid var(--border);
  color: var(--text-secondary);
  font: var(--fw-medium) var(--type-c1-size)/var(--type-c1-lh) var(--font-sans);
}

.app.onb6-codex-flow .onb6-proof-head .ph { font-size: var(--onbc-chan-fs-icon); }

.app.onb6-codex-flow .onb6-proof-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--space-3) var(--space-4);
}

.app.onb6-codex-flow .onb6-proof-chip {
  position: absolute;
  right: var(--space-2);
  bottom: var(--space-2);
  z-index: 4;
  min-width: 104px;
  min-height: var(--space-11);
  display: grid;
  grid-template-columns: var(--space-9) auto;
  grid-template-rows: auto auto;
  gap: 0 var(--space-2);
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border: var(--onbc-chan-hair) solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-2);
  white-space: nowrap;
}

.app.onb6-codex-flow .onb6-proof-chip > .ph {
  grid-row: 1 / span 2;
  width: var(--space-9);
  height: var(--space-9);
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--secondary-green) 58%, var(--surface));
  color: var(--art-green-900);
  font-size: var(--onbc-chan-fs-icon);
}

.app.onb6-codex-flow .onb6-proof-chip small {
  color: var(--text-muted);
  font: var(--type-c1-weight) var(--type-c1-size)/var(--type-c1-lh) var(--font-sans);
}

.app.onb6-codex-flow .onb6-proof-chip b {
  color: var(--text-primary);
  font: var(--fw-semibold) var(--onbc-chan-fs-sig)/var(--onbc-chan-lh-sig) var(--font-sans);
  font-variant-numeric: tabular-nums;
}

.app.onb6-codex-flow .onb6-proof-post {
  display: grid;
  grid-template-columns: var(--onbc-chan-avatar) minmax(0, 1fr);
  gap: 0 var(--space-2);
  align-items: center;
  font: var(--fw-semibold) var(--type-c1-size)/var(--type-c1-lh) var(--font-sans);
}

.app.onb6-codex-flow .onb6-proof-post > .ph {
  grid-row: 1 / span 2;
  width: var(--onbc-chan-avatar);
  height: var(--onbc-chan-avatar);
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--secondary-green) 52%, var(--surface));
  color: var(--art-green-900);
  font-size: var(--onbc-chan-fs-meta);
}

.app.onb6-codex-flow .onb6-proof-post small {
  overflow: hidden;
  color: var(--text-secondary);
  font-weight: var(--fw-regular);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app.onb6-codex-flow .onb6-proof-chart {
  display: block;
  width: 100%;
  height: var(--space-10);
  margin-top: var(--space-2);
}

.app.onb6-codex-flow .onb6-proof-chart path { fill: color-mix(in srgb, var(--secondary-green) 38%, transparent); }
.app.onb6-codex-flow .onb6-proof-chart polyline {
  fill: none;
  stroke: var(--art-green-900);
  stroke-width: var(--onbc-chan-hair);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app.onb6-codex-flow .onb6-proof-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.app.onb6-codex-flow .onb6-proof-metrics > span {
  display: grid;
  grid-template-columns: auto auto;
  gap: 0 var(--space-1);
  justify-content: start;
  align-items: center;
}

.app.onb6-codex-flow .onb6-proof-metrics .ph {
  grid-row: 1 / span 2;
  color: var(--text-secondary);
  font-size: var(--onbc-chan-fs-meta);
}

.app.onb6-codex-flow .onb6-proof-metrics b,
.app.onb6-codex-flow .onb6-proof-metrics small {
  font: var(--fw-semibold) var(--onbc-chan-fs-meta)/var(--onbc-chan-lh-meta) var(--font-sans);
  font-variant-numeric: tabular-nums;
}

.app.onb6-codex-flow .onb6-proof-metrics small { color: var(--art-green-900); font-size: var(--onbc-chan-fs-meta); }

.app.onb6-codex-flow .onb6-proof-query {
  min-height: var(--space-9);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  border: var(--onbc-chan-hair) solid var(--border-strong);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--text-secondary);
  font: var(--type-c1-weight) var(--type-c1-size)/var(--type-c1-lh) var(--font-sans);
}

.app.onb6-codex-flow .onb6-proof-query span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app.onb6-codex-flow .onb6-proof-ranks { display: grid; gap: var(--space-1); margin-top: var(--space-2); }
.app.onb6-codex-flow .onb6-proof-ranks > span {
  min-height: var(--space-5);
  display: grid;
  grid-template-columns: var(--space-7) minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: center;
  color: var(--text-muted);
  font: var(--type-c1-weight) var(--type-c1-size)/var(--type-c1-lh) var(--font-sans);
}

.app.onb6-codex-flow .onb6-proof-ranks > span > i:not(.ph) {
  height: var(--onbc-chan-skel-h);
  border-radius: var(--radius-full);
  background: var(--neutral-100);
}

.app.onb6-codex-flow .onb6-proof-ranks > .is-active {
  min-height: var(--space-9);
  margin: 0 calc(-1 * var(--space-2));
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-primary);
  box-shadow: 0 0 0 var(--onbc-chan-hair) var(--border-strong), var(--shadow-1);
}

.app.onb6-codex-flow .onb6-proof-result { min-width: 0; display: grid; }
.app.onb6-codex-flow .onb6-proof-result b,
.app.onb6-codex-flow .onb6-proof-result small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app.onb6-codex-flow .onb6-proof-result b { color: var(--art-green-900); font-weight: var(--fw-semibold); }
.app.onb6-codex-flow .onb6-proof-result small { color: var(--text-muted); }
.app.onb6-codex-flow .onb6-proof-ranks .is-active > .ph { color: var(--art-green-900); }

.app.onb6-codex-flow .onb6-proof-prompt {
  margin-left: auto;
  max-width: 78%;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--neutral-100);
  color: var(--text-secondary);
  font: var(--type-c1-weight) var(--onbc-chan-fs-meta)/var(--onbc-chan-lh-meta) var(--font-sans);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app.onb6-codex-flow .onb6-proof-answer {
  margin-top: var(--space-2);
  color: var(--text-secondary);
  font: var(--type-c1-weight) var(--type-c1-size)/var(--type-c1-lh) var(--font-sans);
}

.app.onb6-codex-flow .onb6-proof-answer b { color: var(--text-primary); font-weight: var(--fw-semibold); }
.app.onb6-codex-flow .onb6-proof-sources { display: flex; gap: var(--space-1); margin-top: var(--space-2); }
.app.onb6-codex-flow .onb6-proof-sources > span {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  background: var(--neutral-100);
  color: var(--text-secondary);
  font: var(--type-c1-weight) var(--type-c1-size)/var(--type-c1-lh) var(--font-sans);
}
.app.onb6-codex-flow .onb6-proof-sources .ph { flex: 0 0 auto; color: var(--art-green-900); }
.app.onb6-codex-flow .onb6-proof-sources span span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.app.onb6-codex-flow .onb6-proof-visibility {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  color: var(--text-muted);
  font: var(--type-c1-weight) var(--onbc-chan-fs-meta)/var(--onbc-chan-lh-meta) var(--font-sans);
}
.app.onb6-codex-flow .onb6-proof-visibility > span {
  flex: 1;
  height: var(--onbc-chan-skel-h);
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--neutral-100);
}
.app.onb6-codex-flow .onb6-proof-visibility i {
  display: block;
  width: 70%;
  height: 100%;
  border-radius: inherit;
  background: var(--art-green-900);
}

/* One reusable story for every channel: a recognizable product surface first,
   followed by a fixed KPI rail that explains the user benefit without jargon. */
.app.onb6-codex-flow .onb6-proof-window--kpi {
  inset: var(--space-3) var(--space-4) var(--space-6);
  display: grid;
  grid-template-rows: minmax(0, 1fr) var(--space-13);
}

.app.onb6-codex-flow .onb6-channel-demo {
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
}

.app.onb6-codex-flow .onb6-channel-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: var(--onbc-chan-hair) solid var(--border);
  background: var(--surface-subtle);
}

.app.onb6-codex-flow .onb6-channel-kpis:has(> span:nth-child(3):last-child) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.app.onb6-codex-flow .onb6-channel-kpis > span {
  min-width: 0;
  display: grid;
  align-content: center;
  justify-items: start;
  padding: var(--space-3) var(--space-4);
}

.app.onb6-codex-flow .onb6-channel-kpis > span + span {
  border-left: var(--onbc-chan-hair) solid var(--border);
}

.app.onb6-codex-flow .onb6-channel-kpis small,
.app.onb6-codex-flow .onb6-channel-kpis b,
.app.onb6-codex-flow .onb6-channel-kpis em {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app.onb6-codex-flow .onb6-channel-kpis small {
  color: var(--text-muted);
  font: var(--type-c3-weight) var(--type-c3-size)/var(--type-c3-lh) var(--font-sans);
}

.app.onb6-codex-flow .onb6-channel-kpis b {
  color: var(--text-primary);
  font: var(--fw-semibold) var(--type-c1-size)/var(--type-c1-lh) var(--font-sans);
  font-variant-numeric: tabular-nums;
}

.app.onb6-codex-flow .onb6-channel-kpis em {
  display: inline-flex;
  align-items: center;
  color: var(--art-green-900);
  font: normal var(--fw-medium) var(--type-c3-size)/var(--type-c3-lh) var(--font-sans);
  font-variant-numeric: tabular-nums;
}

.app.onb6-codex-flow .onb6-social-demo { gap: var(--space-2); }
.app.onb6-codex-flow .onb6-social-account {
  display: grid;
  grid-template-columns: var(--space-8) minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: center;
}
.app.onb6-codex-flow .onb6-social-account > span:nth-child(2) { min-width: 0; display: grid; }
.app.onb6-codex-flow .onb6-social-account b,
.app.onb6-codex-flow .onb6-social-account small,
.app.onb6-codex-flow .onb6-social-copy {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app.onb6-codex-flow .onb6-social-account b { font: var(--fw-semibold) var(--type-c1-size)/var(--type-c1-lh) var(--font-sans); }
.app.onb6-codex-flow .onb6-social-account small,
.app.onb6-codex-flow .onb6-social-copy { color: var(--text-secondary); font: var(--type-c1-weight) var(--type-c3-size)/var(--type-c3-lh) var(--font-sans); }
.app.onb6-codex-flow .onb6-social-avatar,
.app.onb6-codex-flow .onb6-ai-avatar {
  width: var(--space-8);
  height: var(--space-8);
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--secondary-green) 58%, var(--surface));
  color: var(--art-green-900);
}
.app.onb6-codex-flow .onb6-platform-mark { width: var(--space-5); height: var(--space-5); }
.app.onb6-codex-flow .onb6-social-media {
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  display: block;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.app.onb6-codex-flow .onb6-search-demo { gap: var(--space-4); }
.app.onb6-codex-flow .onb6-search-bar {
  min-height: var(--space-9);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  border: var(--onbc-chan-hair) solid var(--border-strong);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  font: var(--type-c1-weight) var(--type-c3-size)/var(--type-c3-lh) var(--font-sans);
}
.app.onb6-codex-flow .onb6-search-bar span { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app.onb6-codex-flow .onb6-search-result { display: grid; gap: var(--space-1); }
.app.onb6-codex-flow .onb6-search-result > span { display: flex; align-items: center; gap: var(--space-2); color: var(--text-muted); }
.app.onb6-codex-flow .onb6-search-result b { color: var(--art-green-900); font: var(--fw-medium) var(--type-c1-size)/var(--type-c1-lh) var(--font-sans); }
.app.onb6-codex-flow .onb6-search-result small { overflow: hidden; color: var(--text-secondary); font: var(--type-c1-weight) var(--type-c3-size)/var(--type-c3-lh) var(--font-sans); text-overflow: ellipsis; white-space: nowrap; }
.app.onb6-codex-flow .onb6-search-result--muted { opacity: .42; }

.app.onb6-codex-flow .onb6-ai-demo { gap: var(--space-4); }
.app.onb6-codex-flow .onb6-ai-head { display: flex; align-items: center; gap: var(--space-2); color: var(--text-primary); font: var(--fw-semibold) var(--type-c1-size)/var(--type-c1-lh) var(--font-sans); }
.app.onb6-codex-flow .onb6-ai-head > .ph { color: var(--art-green-900); }
.app.onb6-codex-flow .onb6-ai-prompt {
  align-self: flex-end;
  max-width: 88%;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--neutral-100);
  color: var(--text-secondary);
  font: var(--type-c1-weight) var(--type-c3-size)/var(--type-c3-lh) var(--font-sans);
}
.app.onb6-codex-flow .onb6-ai-answer { display: grid; grid-template-columns: var(--space-8) minmax(0, 1fr); gap: var(--space-2); color: var(--text-secondary); font: var(--type-c1-weight) var(--type-c3-size)/var(--type-c3-lh) var(--font-sans); }
.app.onb6-codex-flow .onb6-ai-answer > span:last-child { min-width: 0; }
.app.onb6-codex-flow .onb6-ai-answer b { color: var(--text-primary); font-weight: var(--fw-semibold); }
.app.onb6-codex-flow .onb6-ai-answer small { max-width: 100%; display: flex; align-items: center; gap: var(--space-1); margin-top: var(--space-2); overflow: hidden; color: var(--art-green-900); text-overflow: ellipsis; white-space: nowrap; }

/* The onboarding session keeps the normal 760px conversation measure, so its
   three proof scenes use a compact density instead of widening the reply. */
.app.onb6-codex-flow .onb6-chat-start .onb6-proof-window--kpi {
  inset: var(--space-2) var(--space-2) var(--space-4);
  grid-template-rows: minmax(0, 1fr) var(--space-12);
}
.app.onb6-codex-flow .onb6-chat-start .onb6-channel-demo {
  overflow: hidden;
  padding: var(--space-2) var(--space-3);
}
.app.onb6-codex-flow .onb6-chat-start .onb6-channel-kpis > span {
  padding: var(--space-2);
}
.app.onb6-codex-flow .onb6-chat-start .onb6-social-demo,
.app.onb6-codex-flow .onb6-chat-start .onb6-search-demo,
.app.onb6-codex-flow .onb6-chat-start .onb6-ai-demo {
  gap: var(--space-2);
}
.app.onb6-codex-flow .onb6-chat-start .onb6-search-result--muted { display: none; }
.app.onb6-codex-flow .onb6-chat-start .onb6-ai-prompt { padding: var(--space-1) var(--space-2); }

/* ============================================================================
   2 · SCENE SLOT (slot 2) — direction B. Three different scenes, one shared
   depth ladder: plate N50 → far = N50 fill + N200 ring → mid = white + N200
   ring → front = white + N300 border + --shadow-1 → ghost = N300 dashed.
   No line is ever drawn; growth is carried by placement plus the signal pill.
   ============================================================================ */
.chan-art__scene { position: absolute; inset: 0; }

/* --- SIGNAL (slot 3) — identical on all three cards ---------------------- */
.chan-art__sig   { position: absolute; right: var(--onbc-chan-sig-off); bottom: var(--onbc-chan-sig-off);
                   display: inline-flex; align-items: center; gap: var(--space-2);
                   max-width: calc(100% - var(--onbc-chan-sig-off) - var(--onbc-chan-sig-off));
                   padding: var(--space-2) var(--space-4);
                   background: var(--surface); border: var(--onbc-chan-hair) solid var(--border);
                   border-radius: var(--radius-full); box-shadow: var(--shadow-2);
                   white-space: nowrap; overflow: hidden;
                   font: var(--fw-regular) var(--onbc-chan-fs-sig)/var(--onbc-chan-lh-sig) var(--font-sans);
                   color: var(--text-secondary); }
.chan-art__sig b   { font-weight: var(--fw-semibold); color: var(--text-primary); }
.chan-art__sig .ph { flex: 0 0 auto; font-size: var(--onbc-chan-fs-icon); color: var(--primary-500); }

/* neutral avatar / favicon stand-ins — no brand marks anywhere in the art */
.chan-art__avatar { flex: 0 0 auto; width: var(--onbc-chan-avatar); height: var(--onbc-chan-avatar);
                   border-radius: var(--radius-full);
                   display: inline-flex; align-items: center; justify-content: center;
                   background: var(--surface-hover); color: var(--text-muted);
                   box-shadow: 0 0 0 var(--onbc-chan-hair) var(--border); }
.chan-art__avatar .ph { font-size: var(--onbc-chan-fs-meta); }
.chan-art__fav   { flex: 0 0 auto; width: var(--onbc-chan-fav); height: var(--onbc-chan-fav);
                   border-radius: var(--radius-full);
                   display: inline-flex; align-items: center; justify-content: center;
                   background: var(--surface-hover); color: var(--text-muted);
                   box-shadow: 0 0 0 var(--onbc-chan-hair) var(--border); }
.chan-art__fav .ph { font-size: var(--onbc-chan-fs-meta); }

/* ============================================================================
   2a · SOCIAL — part A, a receding post stack: one post multiplying into the
   distance, up and to the right. Front paper is the largest and nearest.
   ============================================================================ */
/* B6: the depth ladder is now exactly the one named in section 2's header —
   middle = white + --border (N200), back = N50 fill + --border, front = white +
   --border-strong (N300) + --shadow-1. Tier 1 used to carry an N300 ring, which
   made it a second "front" and left three indistinguishable treatments. */
.chan-art__tier       { position: absolute; border-radius: var(--radius-sm); background: var(--surface);
                        box-shadow: 0 0 0 var(--onbc-chan-hair) var(--border); }
.chan-art__tierav     { position: absolute; left: var(--space-3); top: var(--space-3);
                        width: var(--onbc-chan-dot); height: var(--onbc-chan-dot);
                        border-radius: var(--radius-full); background: var(--border); }
/* B6 re-balance: the 3 : 2 plate is 158 tall and the signal pill's top edge sits at
   124, so the whole deck has to live in the 116px above it. The FRONT post takes
   what it needs (its media placeholder has to read as an image, not a rule); the
   three receding cards give up the room. Their top offsets drop from ~11px a step
   to ~4px and their BOTTOMS now ladder up ~16px a step, so the recession is
   carried by the bottom edges plus a real size ladder — 99.7 / 87.8 / 76.0 / 64.1
   tall front-to-back, where B5 was 72.8 / 72.8 / 69.6 / 66.5 (no foreshortening).
   Consequence: .chan-art__tierav (each tier's 6px avatar, 6px in from its top-left)
   now sits behind the card in front of it. Keeping it visible needs a >=12px top
   step per tier = 36px above the post, which caps the post at 76 tall = a 23px
   media block. It comes back untouched if the plate ever returns to 4 / 3. */
.chan-art__tier--3    { left: 42%; right: 7%;  top: 2.5%; bottom: 57%; background: var(--neutral-50); }
.chan-art__tier--2    { left: 30%; right: 19%; top: 5%;   bottom: 47%; }
.chan-art__tier--1    { left: 18%; right: 31%; top: 7.5%; bottom: 37%; }

.chan-art__post       { position: absolute; left: 6%; right: 46%; top: 10%; bottom: 27%;
                        display: flex; flex-direction: column; gap: var(--space-2);
                        padding: var(--space-3); border-radius: var(--radius-sm);
                        background: var(--surface); border: var(--onbc-chan-hair) solid var(--border-strong);
                        box-shadow: var(--shadow-1); }
.chan-art__poster     { flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-2); }
.chan-art__name       { font: var(--fw-semibold) var(--onbc-chan-fs-meta)/var(--onbc-chan-lh-meta) var(--font-sans);
                        color: var(--text-primary); }
/* the post's media, as a placeholder plate — direction B carries no photograph */
.chan-art__body       { flex: 1 1 auto; min-height: 0; border-radius: var(--radius-2xs);
                        background: var(--neutral-100); }
.chan-art__acts       { flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-2);
                        color: var(--text-muted);
                        font: var(--fw-regular) var(--onbc-chan-fs-meta)/var(--onbc-chan-lh-meta) var(--font-sans); }
.chan-art__acts .ph   { font-size: var(--onbc-chan-fs-meta); }

/* ============================================================================
   2b · SEARCH — part B, a rank ladder where the row's PAST positions stay on
   screen as dashed ghosts. #1 on top (Semrush's inverted axis), climb column
   on the left. This is the set's only ranking axis.
   ============================================================================ */
.chan-art__ladder   { position: absolute; left: 6%; right: 7%; top: 9%; bottom: 9%;
                      padding-left: var(--onbc-chan-climb-col);
                      display: flex; flex-direction: column; justify-content: space-between; }
.chan-art__rung     { display: flex; align-items: center; gap: var(--space-3); }
.chan-art__rank     { flex: 0 0 var(--onbc-chan-rank-col); text-align: right;
                      font: var(--fw-regular) var(--onbc-chan-fs-meta)/var(--onbc-chan-lh-meta) var(--font-sans);
                      color: var(--text-muted); }
.chan-art__rank--now{ font-weight: var(--fw-semibold); color: var(--text-primary); }
.chan-art__bar      { height: var(--onbc-chan-rung-h); border-radius: var(--radius-full);
                      background: var(--neutral-200); }
.chan-art__bar--w82 { flex: 0 1 82%; }
.chan-art__bar--w74 { flex: 0 1 74%; }
.chan-art__bar--w68 { flex: 0 1 68%; }
.chan-art__bar--w60 { flex: 0 1 60%; }
.chan-art__bar--w55 { flex: 0 1 55%; }
.chan-art__bar--w44 { flex: 0 1 44%; }
/* past position, kept on screen instead of erased */
.chan-art__bar--ghost { background: none; border: var(--onbc-chan-hair) dashed var(--neutral-300); }
.chan-art__now      { flex: 1 1 auto; min-width: 0; height: var(--onbc-chan-rung-now);
                      display: flex; align-items: center; gap: var(--space-2);
                      padding: 0 var(--space-4); border-radius: var(--radius-full);
                      background: var(--surface); border: var(--onbc-chan-hair) solid var(--border-strong);
                      box-shadow: var(--shadow-1);
                      font: var(--fw-medium) var(--onbc-chan-fs-meta)/var(--onbc-chan-lh-meta) var(--font-sans);
                      color: var(--text-primary); white-space: nowrap; overflow: hidden; }
.chan-art__climb    { position: absolute; left: 0; top: 0; bottom: 0; width: var(--onbc-chan-climb-col);
                      display: flex; flex-direction: column; align-items: center; color: var(--text-muted); }
.chan-art__climb .ph{ font-size: var(--onbc-chan-fs-meta); }
.chan-art__climb::after { content: ""; flex: 1 1 auto; width: 0;
                      border-left: var(--onbc-chan-hair) dashed var(--neutral-300); }

/* ============================================================================
   2c · AI ANSWERS — part D / B-AI-2, one answer window in which SYNTO climbs
   the Sources row to first place. The past order stays below as a dashed ghost
   row: the same "do not erase the past" device as the search ladder.
   Vertical padding and row gap are one step tighter than directions-b.html
   because this plate is 3 : 2 (158 tall) rather than the sheet's 4 : 3 (184).
   ============================================================================ */
.chan-art__win      { position: absolute; left: 6%; right: 6%; top: 8%; bottom: 26%;
                      display: flex; flex-direction: column; gap: var(--space-1);
                      padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
                      background: var(--surface); border: var(--onbc-chan-hair) solid var(--border-strong);
                      box-shadow: var(--shadow-1); }
.chan-art__ask      { flex: 0 0 auto; align-self: flex-end; max-width: 100%;
                      height: var(--onbc-chan-qpill-h);
                      display: inline-flex; align-items: center; padding: 0 var(--space-3);
                      border-radius: var(--radius-full);
                      background: var(--surface-hover); color: var(--text-secondary);
                      font: var(--fw-regular) var(--onbc-chan-fs-meta)/var(--onbc-chan-lh-meta) var(--font-sans);
                      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chan-art__answer   { flex: 0 0 auto;
                      font: var(--fw-regular) var(--onbc-chan-fs-meta)/var(--onbc-chan-lh-meta) var(--font-sans);
                      color: var(--text-secondary);
                      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chan-art__skel     { flex: 0 0 auto; height: var(--onbc-chan-skel-h); width: var(--onbc-chan-skel-w);
                      border-radius: var(--radius-full); background: var(--neutral-200); }
.chan-art__srclabel { flex: 0 0 auto; margin-top: auto;
                      font: var(--fw-regular) var(--onbc-chan-fs-meta)/var(--onbc-chan-lh-meta) var(--font-sans);
                      color: var(--text-muted); }
.chan-art__srcrow   { flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.chan-art__srcchip  { flex: 0 1 auto; min-width: 0; height: var(--onbc-chan-chip-h);
                      display: inline-flex; align-items: center; gap: var(--space-2);
                      padding: 0 var(--space-3); border-radius: var(--radius-full);
                      background: var(--neutral-100); color: var(--text-muted);
                      font: var(--fw-regular) var(--onbc-chan-fs-meta)/var(--onbc-chan-lh-meta) var(--font-sans);
                      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chan-art__srcchip i { flex: 0 0 auto; width: var(--onbc-chan-dot-sm); height: var(--onbc-chan-dot-sm);
                      border-radius: var(--radius-full); background: var(--neutral-300); }
/* the cited source: the DS "selected" treatment — white fill + N900 hairline */
.chan-art__srcchip--you   { background: var(--surface); color: var(--text-primary); font-weight: var(--fw-medium);
                      box-shadow: 0 0 0 var(--onbc-chan-hair) var(--border-active); }
.chan-art__srcchip--you i { background: var(--neutral-900); }
/* the past order, kept on screen as a dashed ghost row */
.chan-art__srcrow--past   { margin-top: var(--space-1); }
.chan-art__srcrow--past .chan-art__srcchip { flex: 1 1 0; height: var(--onbc-chan-chip-sm);
                      background: none; border: var(--onbc-chan-hair) dashed var(--neutral-300);
                      color: var(--text-faint); }
.chan-art__srcchip--ghyou { flex: 0 1 auto; border-color: var(--neutral-400); }

/* ============================================================================
   3 · CHAT SCREEN — cards in the first assistant turn, then the picked channel
   opens its own conversation + docked qcard ([data-pick] / [data-pickpane]).
   ============================================================================ */
/* one measure for the whole column: the copy, the card row and the composer all
   run 470→1230. components.css insets .onb6-proposal by 28px a side, which left
   the card row 52px short of the composer directly below it. */
.onb6-chat-start .onb6-proposal { width: 100%; }

/* picked card keeps a 1px --border-strong ring; the other two recede */
.chan-card.is-picked .chan-card__art {
                   box-shadow: var(--shadow-1), 0 0 0 var(--onbc-chan-hair) var(--border-strong); }
.chan-grid:has(.chan-card.is-picked) .chan-card:not(.is-picked) { opacity: .45; }

/* the follow-up turn (user bubble + one assistant line) */
.chan-pane       { display: flex; flex-direction: column; gap: var(--space-6); }

/* while a channel is picked the docked qcard replaces the free composer, and the
   feed sits against it the way a chat feed does (newest turn in view). */
.onb6-chat-start:has(.chan-card.is-picked) .ob-composer { display: none; }
/* picked: keep the newest turn at the bottom but stay scrollable (統括 2026-09-02).
   A single child inside a column-reverse scroller anchors to the bottom edge while the overflowed
   intro copy remains reachable by scrolling up; justify-content:flex-end clipped it for good. */
.onb6-chat-start:has(.chan-card.is-picked) .ob { flex-direction: column-reverse; justify-content: flex-start; }

/* ---- docked qcard (Figma Master 4294:54538) --------------------------------
   .qdock / .qcard / .qopt carry the geometry already; these are the four deltas
   the Figma question card asks for: 40px option rows at radius 12, N50 hover
   (not N100), N700 option labels, N500 pager. */
.chan-dock .qopt       { min-height: var(--onbc-chan-qopt-h); align-items: center;
                         padding: var(--space-2) var(--space-5); border-radius: var(--radius-lg); }
.chan-dock .qopt:hover { background: var(--surface-subtle); }
.chan-dock .qopt__t    { color: var(--text-secondary); }
.chan-dock .qcard__pager { color: var(--text-muted); }

/* ============================================================================
   4 · HOME — the same three cards sit under the chat box (replaces .home-actions)
   ============================================================================ */
.home__cgroup .chan-grid { gap: var(--space-5); margin-top: var(--space-4); }

/* ============================================================================
   AWARENESS CREATIVE v5 — product surface + overlapping growth proof.
   Shared by the Chat home discovery row and the first Codex onboarding turn.
   Platform UI stays neutral; Secondary Green is reserved for measurable growth.
   ============================================================================ */
.chan-card__art--awareness {
  aspect-ratio: 4 / 3;
  background: linear-gradient(145deg, var(--neutral-100), var(--surface));
}

.awareness-art {
  --awareness-fs-micro: 8px;
  --awareness-lh-micro: 10px;
  --awareness-fs-detail: 9px;
  --awareness-lh-detail: 12px;
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  background: linear-gradient(145deg, color-mix(in srgb, var(--neutral-200) 72%, var(--surface)), var(--surface));
}

.awareness-art--social,
.awareness-art--search,
.awareness-art--ai { isolation: isolate; }

.awareness-art::before {
  content: "";
  position: absolute;
  left: -18%;
  top: -42%;
  width: 70%;
  aspect-ratio: 1;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--neutral-200) 58%, transparent);
  filter: blur(var(--space-5));
}

.awareness-product,
.awareness-growth {
  position: absolute;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: var(--onbc-chan-hair) solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}

.awareness-product {
  z-index: 2;
  left: var(--space-5);
  top: var(--space-5);
  width: 72%;
  height: 76%;
}

.awareness-art--social .awareness-product { height: 78%; }
.awareness-art--search .awareness-product { height: 80%; }

.awareness-growth {
  z-index: 3;
  right: var(--space-5);
  bottom: var(--space-5);
  width: 57%;
  display: flex;
  padding: var(--space-3);
  box-shadow: var(--shadow-2);
}

.awareness-platform-head {
  position: relative;
  min-height: var(--space-9);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4);
}

.awareness-platform-head::after {
  content: "";
  position: absolute;
  right: var(--space-4);
  bottom: 0;
  left: var(--space-4);
  height: var(--onbc-chan-hair);
  background: var(--border);
}

.awareness-platform-head img {
  width: var(--space-5);
  height: var(--space-5);
  object-fit: contain;
}

.awareness-platform-head b,
.awareness-growth-head {
  font: var(--fw-semibold) var(--awareness-fs-detail)/var(--awareness-lh-detail) var(--font-sans);
}

.awareness-product-body {
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: var(--space-3) var(--space-4);
}

.awareness-account {
  display: grid;
  grid-template-columns: var(--space-6) minmax(0, 1fr);
  gap: var(--space-2);
  align-items: center;
}

.awareness-avatar {
  width: var(--space-6);
  height: var(--space-6);
  display: grid;
  place-items: center;
  padding: var(--space-1);
  overflow: hidden;
  border: var(--onbc-chan-hair) solid var(--border);
  border-radius: var(--radius-full);
  background: var(--neutral-100);
}

.awareness-avatar img { width: var(--space-5); height: var(--space-5); object-fit: contain; }
.awareness-account > span:last-child { min-width: 0; display: grid; }
.awareness-account b { font: var(--fw-semibold) var(--awareness-fs-detail)/var(--awareness-lh-detail) var(--font-sans); }
.awareness-account small,
.awareness-post-copy {
  overflow: hidden;
  color: var(--text-muted);
  font: var(--type-c1-weight) var(--awareness-fs-micro)/var(--awareness-lh-micro) var(--font-sans);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.awareness-post-copy {
  display: -webkit-box;
  flex: 0 0 auto;
  margin-top: var(--space-1);
  overflow: hidden;
  color: var(--text-secondary);
  font-size: var(--onbc-chan-fs-meta);
  line-height: var(--onbc-chan-lh-meta);
  text-overflow: clip;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.awareness-post-media {
  width: 100%;
  height: var(--space-12);
  flex: 0 0 auto;
  margin-top: var(--space-2);
  border-radius: var(--radius-xs);
  object-fit: cover;
}

.awareness-post-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-2);
  color: var(--text-muted);
}

.awareness-post-actions > span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font: var(--type-c1-weight) var(--awareness-fs-micro)/var(--awareness-lh-micro) var(--font-sans);
}

.awareness-post-actions .ph { font-size: var(--onbc-chan-fs-meta); }

.awareness-search-body { gap: var(--space-2); }
.awareness-search-query {
  min-height: var(--space-7);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-2);
  border: var(--onbc-chan-hair) solid var(--border-strong);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  font: var(--type-c1-weight) var(--awareness-fs-micro)/var(--awareness-lh-micro) var(--font-sans);
}

.awareness-search-query span,
.awareness-search-result b,
.awareness-search-result small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.awareness-search-result { display: grid; gap: var(--space-1); }
.awareness-search-result > span { display: flex; align-items: center; gap: var(--space-1); color: var(--text-muted); font: var(--type-c1-weight) var(--awareness-fs-micro)/var(--awareness-lh-micro) var(--font-sans); }
.awareness-search-result b { color: var(--text-primary); font: var(--fw-semibold) var(--awareness-fs-detail)/var(--awareness-lh-detail) var(--font-sans); }
.awareness-search-result small { color: var(--text-secondary); font: var(--type-c1-weight) var(--awareness-fs-micro)/var(--awareness-lh-micro) var(--font-sans); }
.awareness-search-result--muted { margin-top: var(--space-2); opacity: .4; }

.awareness-ai-body { gap: var(--space-3); }
.awareness-ai-prompt {
  align-self: flex-end;
  max-width: 100%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--neutral-100);
  color: var(--text-secondary);
  font: var(--type-c1-weight) var(--awareness-fs-micro)/var(--awareness-lh-micro) var(--font-sans);
}

.awareness-ai-answer {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text-secondary);
  font: var(--type-c1-weight) var(--awareness-fs-detail)/var(--awareness-lh-detail) var(--font-sans);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.awareness-ai-answer b { color: var(--text-primary); font-weight: var(--fw-semibold); }

.awareness-growth-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text-secondary);
}

.awareness-growth-head em {
  display: inline-flex;
  align-items: center;
  color: color-mix(in srgb, var(--secondary-green) 58%, var(--neutral-700));
  font-style: normal;
}

.awareness-growth-main {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.awareness-growth-main b {
  color: var(--text-primary);
  font: var(--fw-semibold) var(--type-s1-size)/var(--type-b3-lh) var(--font-sans);
  letter-spacing: var(--letter-spacing-ui);
  font-variant-numeric: tabular-nums;
}

.awareness-growth-main small {
  display: block;
  color: color-mix(in srgb, var(--secondary-green) 58%, var(--neutral-700));
  font: var(--fw-semibold) var(--awareness-fs-micro)/var(--awareness-lh-micro) var(--font-sans);
  white-space: nowrap;
}

.awareness-chart {
  position: relative;
  height: var(--space-6);
  flex: 0 0 auto;
  display: block;
  margin-top: var(--space-1);
}

.awareness-chart::before,
.awareness-chart::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(0 84%, 18% 80%, 33% 86%, 50% 54%, 65% 60%, 82% 24%, 100% 10%, 100% 100%, 0 100%);
}

.awareness-chart::before {
  background: linear-gradient(to bottom, var(--secondary-green), color-mix(in srgb, var(--secondary-green) 20%, transparent));
}

.awareness-chart::after {
  background: var(--secondary-green);
  clip-path: polygon(0 81%, 18% 77%, 33% 83%, 50% 51%, 65% 57%, 82% 21%, 100% 7%, 100% 12%, 82% 27%, 65% 63%, 50% 57%, 33% 89%, 18% 83%, 0 87%);
}

.awareness-growth-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-1);
  padding-top: var(--space-1);
  border-top: var(--onbc-chan-hair) solid var(--border);
}

.awareness-art--search .awareness-growth-metrics {
  grid-template-columns: 1.2fr 1fr .8fr;
  gap: var(--space-1);
}

.awareness-growth-metrics > span { min-width: 0; display: grid; gap: 0; }
.awareness-growth-metrics small {
  overflow: hidden;
  color: var(--text-muted);
  font: var(--type-c1-weight) var(--awareness-fs-micro)/var(--awareness-lh-micro) var(--font-sans);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.awareness-metric-pair {
  min-width: 0;
  display: block;
  margin-top: calc(-1 * var(--space-1));
}
.awareness-metric-pair b,
.awareness-metric-pair em {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.awareness-metric-pair b { color: var(--text-primary); font: var(--fw-semibold) var(--awareness-fs-detail)/var(--awareness-lh-detail) var(--font-sans); }
.awareness-metric-pair em {
  color: color-mix(in srgb, var(--secondary-green) 58%, var(--neutral-700));
  font: normal var(--fw-semibold) var(--awareness-fs-micro)/var(--awareness-lh-micro) var(--font-sans);
}

.awareness-growth-metrics .awareness-metric-pair em { display: none; }
.awareness-growth-metrics small,
.awareness-growth-metrics .awareness-metric-pair b { line-height: 1; }

/* Comparison-only treatment for design/onboarding-card-outline.html.
   The production route remains borderless; this groups preview and title as one
   selectable object without changing the 760px grid or artwork proportions. */
.app.onb6-codex-flow.onb6-card-outline-variant .onb6-channel-card {
  gap: 0;
  overflow: hidden;
  border: var(--stroke-1) solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface);
}

.app.onb6-codex-flow.onb6-card-outline-variant .onb6-channel-card:hover {
  border-color: var(--border-strong);
}

.app.onb6-codex-flow.onb6-card-outline-variant .onb6-channel-preview {
  border-radius: 0;
  box-shadow: none;
}

.app.onb6-codex-flow.onb6-card-outline-variant .onb6-channel-copy {
  padding: var(--space-5) var(--space-5) var(--space-6);
}

.app.onb6-codex-flow.onb6-card-outline-variant .onb6-channel-card:focus-visible {
  box-shadow: var(--focus-ring);
}

@media (prefers-reduced-motion: reduce) {
  .awareness-art { transition: none; }
}

/* ============================================================================
   AWARENESS CREATIVE V14 FINAL — one product fragment, one visible outcome.
   Shared by Chat home and the Codex onboarding recommendation surface.
   ============================================================================ */
:is(.app.onb6-codex-flow, .home__cgroup) .awareness-art {
  transform: none;
  background: linear-gradient(145deg, var(--neutral-100), var(--surface));
}

:is(.app.onb6-codex-flow, .home__cgroup) .awareness-art::before {
  display: none;
}

:is(.app.onb6-codex-flow, .home__cgroup) .awareness-product {
  inset: var(--space-4);
  width: auto;
  height: auto;
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
}

:is(.app.onb6-codex-flow, .home__cgroup) .awareness-platform-head {
  min-height: var(--space-9);
  padding: 0 var(--space-4);
}

:is(.app.onb6-codex-flow, .home__cgroup) .awareness-platform-head::after {
  right: var(--space-4);
  left: var(--space-4);
}

:is(.app.onb6-codex-flow, .home__cgroup) .awareness-growth {
  display: none;
}

/* Social: the post and actions fade above the separate, crisp growth chart. */
:is(.app.onb6-codex-flow, .home__cgroup) .awareness-art--social .awareness-product {
  height: auto;
}

:is(.app.onb6-codex-flow, .home__cgroup) .awareness-art--social .awareness-product-body {
  position: relative;
  padding: var(--space-4);
  mask-image: linear-gradient(to bottom, var(--neutral-900) 0%, var(--neutral-900) 12%, color-mix(in srgb, var(--neutral-900) 32%, transparent) 76%, color-mix(in srgb, var(--neutral-900) 25%, transparent) 100%);
}

:is(.app.onb6-codex-flow, .home__cgroup) .awareness-art--social .awareness-avatar {
  border: 0;
  background: transparent;
}

:is(.app.onb6-codex-flow, .home__cgroup) .awareness-art--social .awareness-avatar img {
  visibility: visible;
}

:is(.app.onb6-codex-flow, .home__cgroup) .awareness-art--social .awareness-account > span:last-child {
  width: 48%;
  height: var(--space-2);
  border-radius: var(--radius-full);
  background: var(--neutral-300);
}

:is(.app.onb6-codex-flow, .home__cgroup) .awareness-art--social .awareness-account b,
:is(.app.onb6-codex-flow, .home__cgroup) .awareness-art--social .awareness-post-copy {
  color: transparent;
  font-size: 0;
}

:is(.app.onb6-codex-flow, .home__cgroup) .awareness-art--social .awareness-post-copy {
  position: relative;
  height: var(--space-11);
  margin-top: var(--space-4);
  overflow: hidden;
  border-radius: var(--radius-sm);
  background:
    radial-gradient(circle at 72% 38%, var(--neutral-200) 0 13%, transparent 13.5%),
    linear-gradient(142deg, var(--neutral-100) 0 46%, var(--neutral-200) 46.5% 68%, var(--neutral-100) 68.5% 100%);
}

:is(.app.onb6-codex-flow, .home__cgroup) .awareness-art--social .awareness-post-copy::before,
:is(.app.onb6-codex-flow, .home__cgroup) .awareness-art--social .awareness-post-copy::after {
  content: "";
  position: absolute;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--neutral-300) 72%, transparent);
}

:is(.app.onb6-codex-flow, .home__cgroup) .awareness-art--social .awareness-post-copy::before {
  left: var(--space-5);
  bottom: calc(-1 * var(--space-7));
  width: var(--space-12);
  height: var(--space-12);
  border-radius: var(--radius-full);
}

:is(.app.onb6-codex-flow, .home__cgroup) .awareness-art--social .awareness-post-copy::after {
  right: var(--space-5);
  bottom: calc(-1 * var(--space-3));
  width: 42%;
  height: var(--space-9);
  opacity: .7;
}

:is(.app.onb6-codex-flow, .home__cgroup) .awareness-art--social .awareness-post-media {
  display: none;
}

:is(.app.onb6-codex-flow, .home__cgroup) .awareness-art--social .awareness-post-actions {
  display: flex;
  flex: 0 0 auto;
  margin-top: var(--space-2);
  padding-top: 0;
  color: var(--neutral-500);
}

:is(.app.onb6-codex-flow, .home__cgroup) .awareness-art--social .awareness-post-actions .ph {
  font-size: var(--space-5);
}

:is(.app.onb6-codex-flow, .home__cgroup) .awareness-art--social .awareness-growth {
  z-index: 4;
  right: calc(var(--space-2) + var(--space-4));
  bottom: var(--space-4);
  left: calc(var(--space-2) + var(--space-4));
  width: auto;
  height: 54%;
  display: block;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: transparent;
  box-shadow: none;
}

:is(.app.onb6-codex-flow, .home__cgroup) .awareness-art--social .awareness-growth-head,
:is(.app.onb6-codex-flow, .home__cgroup) .awareness-art--social .awareness-growth-main,
:is(.app.onb6-codex-flow, .home__cgroup) .awareness-art--social .awareness-growth-metrics {
  display: none;
}

:is(.app.onb6-codex-flow, .home__cgroup) .awareness-art--social .awareness-chart { height: 100%; margin: 0; overflow: visible; border: 0; background: url("assets/agent-creative-options/social-outcome.svg") center / 100% 100% no-repeat; }
:is(.app.onb6-codex-flow, .home__cgroup) .awareness-art--social .awareness-chart::before,
:is(.app.onb6-codex-flow, .home__cgroup) .awareness-art--social .awareness-chart::after { display: none; }

/* Align chart edges with the inset post content and platform logo. */
:is(.app.onb6-codex-flow, .home__cgroup) .awareness-art--social .awareness-chart > span { display: none; }
/* Search: restore the original compact result and left ranking scale. */
:is(.app.onb6-codex-flow, .home__cgroup) .awareness-art--search .awareness-search-body { position: relative; display: block; padding: var(--space-4); }
:is(.app.onb6-codex-flow, .home__cgroup) .awareness-art--search .awareness-search-query { display: none; }
:is(.app.onb6-codex-flow, .home__cgroup) .awareness-art--search .awareness-search-body::before { content: '#1\A#4\A#8'; position: absolute; display: block; left: var(--space-3); top: var(--space-2); white-space: pre; color: var(--neutral-400); font: var(--fw-regular) var(--awareness-fs-detail)/var(--space-9) var(--font-sans); }
:is(.app.onb6-codex-flow, .home__cgroup) .awareness-art--search .awareness-search-body::after { display: none; }
:is(.app.onb6-codex-flow, .home__cgroup) .awareness-art--search .awareness-search-result { position: absolute; left: var(--space-9); right: var(--space-3); top: var(--space-4); min-height: var(--space-8); display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-3); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--awareness-installed-shadow); }
:is(.app.onb6-codex-flow, .home__cgroup) .awareness-art--search .awareness-search-result > span,
:is(.app.onb6-codex-flow, .home__cgroup) .awareness-art--search .awareness-search-result > small { display: none; }
:is(.app.onb6-codex-flow, .home__cgroup) .awareness-art--search .awareness-search-result:not(.awareness-search-result--muted) > b { display: flex; align-items: center; line-height: var(--awareness-lh-detail); font-size: 0; }
:is(.app.onb6-codex-flow, .home__cgroup) .awareness-art--search .awareness-search-result > b::before { content: 'Northwind Coffee'; display: block; font: var(--fw-semibold) var(--awareness-fs-detail)/var(--awareness-lh-detail) var(--font-sans); }
:is(.app.onb6-codex-flow, .home__cgroup) .awareness-art--search .awareness-search-result > img.bico { width: var(--space-5); height: var(--space-5); flex: 0 0 auto; object-fit: contain; }
:is(.app.onb6-codex-flow, .home__cgroup) .awareness-art--search .awareness-search-result:not(.awareness-search-result--muted)::before { display: none; }
:is(.app.onb6-codex-flow, .home__cgroup) .awareness-art--search .awareness-search-result:not(.awareness-search-result--muted)::after { content: '#1'; display: block; position: static; margin-left: auto; color: var(--neutral-700); font: var(--fw-medium) var(--awareness-fs-detail)/var(--awareness-lh-detail) var(--font-sans); }
:is(.app.onb6-codex-flow, .home__cgroup) .awareness-art--search .awareness-search-result--muted { top: calc(var(--space-4) + var(--space-9)); left: var(--space-9); right: var(--space-3); min-height: var(--space-8); background: radial-gradient(circle at var(--space-4) 50%,var(--neutral-200) 0 var(--space-1),transparent calc(var(--space-1) + var(--stroke-hairline))),linear-gradient(var(--neutral-200),var(--neutral-200)) left var(--space-7) center / 64% var(--space-2) no-repeat; box-shadow: none; opacity: .65; }
:is(.app.onb6-codex-flow, .home__cgroup) .awareness-art--search .awareness-search-result--muted > *,
:is(.app.onb6-codex-flow, .home__cgroup) .awareness-art--search .awareness-search-result--muted::before { display: none; }
:is(.app.onb6-codex-flow, .home__cgroup) .awareness-art--search .awareness-search-result--muted::after { content: ''; position: absolute; top: var(--space-9); right: 0; left: 0; height: var(--space-8); border-radius: var(--radius-sm); background: radial-gradient(circle at var(--space-4) 50%,var(--neutral-200) 0 var(--space-1),transparent calc(var(--space-1) + var(--stroke-hairline))),linear-gradient(var(--neutral-200),var(--neutral-200)) left var(--space-7) center / 48% var(--space-2) no-repeat; opacity: .55; }

/* AI answers: one brand is the shared result across several people's AI searches. */
:is(.app.onb6-codex-flow, .home__cgroup) .awareness-art--ai .awareness-ai-body {
  position: relative;
  display: block;
  padding: 0;
  overflow: hidden;
  background: url("assets/awareness-ai-connections.svg") center / 100% 100% no-repeat;
}

:is(.app.onb6-codex-flow, .home__cgroup) .awareness-art--ai .awareness-ai-body::before,
:is(.app.onb6-codex-flow, .home__cgroup) .awareness-art--ai .awareness-ai-body::after {
  content: "";
  position: absolute;
  left: 52%;
  top: 52%;
  border-radius: var(--radius-full);
  transform: translate(-50%, -50%);
}

:is(.app.onb6-codex-flow, .home__cgroup) .awareness-art--ai .awareness-ai-body::before {
  z-index: 1;
  width: var(--space-11);
  height: var(--space-11);
  background: color-mix(in srgb, var(--neutral-200) 72%, transparent);
  box-shadow:
    0 0 0 var(--space-3) color-mix(in srgb, var(--neutral-100) 82%, transparent),
    0 0 0 var(--space-6) color-mix(in srgb, var(--neutral-100) 42%, transparent);
}

:is(.app.onb6-codex-flow, .home__cgroup) .awareness-art--ai .awareness-ai-body::after {
  z-index: 4;
  width: var(--space-10);
  height: var(--space-10);
  background: var(--surface) url("assets/noimosai-symbol-gradient.svg") center / var(--space-6) var(--space-6) no-repeat;
  box-shadow: var(--shadow-1);
}

:is(.app.onb6-codex-flow, .home__cgroup) .awareness-art--ai .awareness-ai-prompt,
:is(.app.onb6-codex-flow, .home__cgroup) .awareness-art--ai .awareness-ai-answer,
:is(.app.onb6-codex-flow, .home__cgroup) .awareness-art--ai .awareness-growth {
  position: absolute;
  z-index: 2;
  min-height: var(--space-9);
  display: block;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: var(--radius-full);
  background-color: var(--surface-subtle);
  background-repeat: no-repeat;
  background-position:
    left var(--space-8) top var(--space-4),
    left var(--space-8) bottom var(--space-4);
  background-size:
    44% var(--space-1),
    28% var(--space-1);
  box-shadow: none;
  color: transparent;
  font-size: 0;
}

:is(.app.onb6-codex-flow, .home__cgroup) .awareness-art--ai .awareness-ai-prompt {
  top: var(--space-4);
  left: var(--space-4);
  width: 40%;
  max-width: none;
  background-image:
    linear-gradient(var(--neutral-300), var(--neutral-300)),
    linear-gradient(var(--neutral-200), var(--neutral-200));
}

:is(.app.onb6-codex-flow, .home__cgroup) .awareness-art--ai .awareness-ai-answer {
  top: var(--space-7);
  right: var(--space-4);
  width: 36%;
  background-image:
    linear-gradient(var(--neutral-300), var(--neutral-300)),
    linear-gradient(var(--neutral-200), var(--neutral-200));
  background-size:
    36% var(--space-1),
    48% var(--space-1);
}

:is(.app.onb6-codex-flow, .home__cgroup) .awareness-art--ai .awareness-avatar {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  width: var(--space-6);
  height: var(--space-6);
  padding: 0;
  border: 0;
  color: var(--neutral-500);
  background: var(--neutral-200);
  transform: translateY(-50%);
}

:is(.app.onb6-codex-flow, .home__cgroup) .awareness-art--ai .awareness-avatar .ph {
  font-size: var(--space-5);
}

/* One shared connection plane keeps every line anchored to the same brand center. */
:is(.app.onb6-codex-flow, .home__cgroup) .awareness-art--ai .awareness-ai-prompt::after,
:is(.app.onb6-codex-flow, .home__cgroup) .awareness-art--ai .awareness-ai-answer::after,
:is(.app.onb6-codex-flow, .home__cgroup) .awareness-art--ai .awareness-growth::after {
  display: none;
}

:is(.app.onb6-codex-flow, .home__cgroup) .awareness-art--ai .awareness-growth {
  position: absolute;
  z-index: 2;
  right: auto;
  bottom: var(--space-5);
  left: var(--space-6);
  width: 38%;
  height: var(--space-9);
  background-image:
    linear-gradient(var(--neutral-300), var(--neutral-300)),
    linear-gradient(var(--neutral-200), var(--neutral-200));
  background-size:
    52% var(--space-1),
    34% var(--space-1);
  background-position:
    left var(--space-8) top var(--space-4),
    left var(--space-8) bottom var(--space-4);
}

/* Installed-list surface: measured from ChatGPT Plugins, 2026-09-07.
   Keep the scene rigid: a 4px lift over 200ms, with a constant hairline and shadow. */
:is(.app.onb6-codex-flow, .home__cgroup) {
  --awareness-installed-shadow: inset 0 0 0 var(--stroke-hairline) var(--black-10),
    0 var(--space-2) var(--space-6) color-mix(in srgb, var(--black-10) 50%, transparent);
}
:is(.app.onb6-codex-flow, .home__cgroup) :is(.onb6-channel-preview, .chan-card__art--awareness) {
  overflow: visible;
  background: transparent;
  box-shadow: none;
  transform: none;
  transition: transform var(--onbc-chan-dur) cubic-bezier(0, 0, .2, 1);
}
:is(.app.onb6-codex-flow, .home__cgroup) .awareness-art {
  overflow: visible;
  background: transparent;
}
:is(.app.onb6-codex-flow, .home__cgroup) .awareness-product {
  /* Match the existing title's 4px inline padding without moving its text. */
  left: var(--space-2);
  right: var(--space-2);
  box-shadow: var(--awareness-installed-shadow);
}
:is(.app.onb6-codex-flow, .home__cgroup) .awareness-art--social .awareness-growth {
  left: calc(var(--space-2) + var(--space-4));
  right: calc(var(--space-2) + var(--space-4));
}
:is(.app.onb6-codex-flow, .home__cgroup) :is(.onb6-channel-card, .chan-card):is(:hover, :focus-visible) :is(.onb6-channel-preview, .chan-card__art--awareness) {
  transform: translateY(calc(-1 * var(--space-2)));
  box-shadow: none;
}
:is(.app.onb6-codex-flow, .home__cgroup) :is(.onb6-channel-card, .chan-card):is(:hover, :focus-visible) .awareness-art {
  transform: none;
}
.home__cgroup .chan-card:has(.awareness-art):hover { margin-top: 0; margin-bottom: 0; }

/* Current Home templates keep their authored content and share the same surface behavior. */
.home-goal-template-set .home-template-preview {
  width: calc(100% - var(--space-2) * 2);
  margin-inline: var(--space-2);
  border: 0;
  box-shadow: var(--awareness-installed-shadow);
  transition: transform var(--onbc-chan-dur) cubic-bezier(0, 0, .2, 1);
}
.home-goal-template-set .chan-card:is(:hover, :focus-visible) .home-template-preview {
  transform: translateY(calc(-1 * var(--space-2)));
  background: var(--surface);
}

/* The awareness face ends 8px inside its preview; no extra row gap is needed. */
.app.onb6-codex-flow .onb6-channel-card:has(.awareness-art) { gap: 0; }
.home__cgroup .chan-card:has(.awareness-art) .chan-card__title { margin-top: 0; }
.home-goal-template-set .chan-card:has(.home-template-preview) .chan-card__title { margin-top: var(--space-4); }

/* Manus Playbook comparison: the gray frame keeps breathing room around the zoom. */
:is(.app.onb6-codex-flow [data-awareness-surface="zoom"], .agent-catalog) :is(.onb6-channel-card, .agent-catalog__card) { gap: var(--space-4); }
:is(.app.onb6-codex-flow [data-awareness-surface="zoom"], .agent-catalog) .onb6-channel-preview {
  width: calc(100% - var(--space-2) * 2);
  margin-inline: var(--space-2);
  overflow: hidden;
  background: var(--neutral-100);
  transform: none;
}
:is(.app.onb6-codex-flow [data-awareness-surface="zoom"], .agent-catalog) .awareness-art {
  transform: scale(.88);
  transform-origin: center;
  transition: transform 150ms ease;
}
:is(.app.onb6-codex-flow [data-awareness-surface="zoom"], .agent-catalog) :is(.onb6-channel-card, .agent-catalog__card):is(:hover, :focus-visible) .onb6-channel-preview {
  transform: none;
}
:is(.app.onb6-codex-flow [data-awareness-surface="zoom"], .agent-catalog) :is(.onb6-channel-card, .agent-catalog__card):is(:hover, :focus-visible) .awareness-art {
  /* 1.05 times the resting scene, with gray still visible on every edge. */
  transform: scale(.924);
}
@media (prefers-reduced-motion: reduce) {
  :is(.app.onb6-codex-flow, .home__cgroup) :is(.onb6-channel-preview, .chan-card__art--awareness, .home-template-preview) { transition: none; }
  :is(.app.onb6-codex-flow, .home__cgroup) :is(.onb6-channel-card, .agent-catalog__card, .chan-card):is(:hover, :focus-visible) :is(.onb6-channel-preview, .chan-card__art--awareness, .home-template-preview) { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  :is(.app.onb6-codex-flow [data-awareness-surface="zoom"], .agent-catalog) .awareness-art { transition: none; }
  :is(.app.onb6-codex-flow [data-awareness-surface="zoom"], .agent-catalog) :is(.onb6-channel-card, .agent-catalog__card):is(:hover, :focus-visible) .awareness-art { transform: scale(.88); }
}

/* Shared creative rule, user direction2026-09-08: internal illustrations are static.
   The existing whole-card hover zoom remains an interaction affordance. */
.awareness-art, .awareness-art::before, .awareness-art::after,
.awareness-art *, .awareness-art *::before, .awareness-art *::after { animation: none !important; }
.awareness-art *, .awareness-art *::before, .awareness-art *::after { transition: none !important; }