/* A compact, inspectable console shared by every Emvona view. */
:root {
  --canvas: #fff;
  --paper: #fff;
  --paper-tint: #fafafa;
  --wash: #f5f5f4;
  --wash-strong: #ececeb;
  --ink: #171717;
  --ink-soft: #484848;
  --muted: #797979;
  --line: #e6e6e4;
  --line-strong: #d7d7d5;
  --green: #171717;
  --green-deep: #111;
  --green-pale: #eee;
  --coral: #a26053;
  --coral-pale: #faf3f1;
  --sand: #f8f8f6;
  --shadow: none;
  --shadow-soft: none;
  --radius: 5px;
  --font: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --display: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'DM Mono', SFMono-Regular, Consolas, monospace;
}

body { background: #fff; color: var(--ink); font: 13px/1.5 var(--font); }
a, .text-link { color: #405bb1; }
::selection { background: #e7e7e7; color: #111; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, [tabindex]:focus-visible { outline: 2px solid #242424; outline-offset: 2px; }

/* TypeSafe's full label rail becomes a horizontal, scrollable nav on phones. */
.app-shell,
.app-shell.with-detail { grid-template-columns: 224px minmax(270px, 292px) minmax(0, 1fr) minmax(228px, 252px); background: #fff; }
.app-shell:not(.with-detail), .app-shell.no-detail,
.app-shell:has(.detail-pane[hidden]) { grid-template-columns: 224px minmax(270px, 292px) minmax(0, 1fr); }
.app-shell.console-single, .app-shell.console-single:not(.with-detail),
.app-shell.console-single.no-detail { grid-template-columns: 224px minmax(0, 1fr); }
.app-shell.console-list, .app-shell.console-list:not(.with-detail),
.app-shell.console-list.no-detail { grid-template-columns: 224px minmax(270px, 292px) minmax(0, 1fr); }
.rail { align-items: stretch; gap: 0; padding: 20px 9px 12px; background: #fafafa; border-right: 1px solid #e8e8e6; }
.rail .brand { display: flex; align-items: center; justify-content: flex-start; gap: 9px; width: auto; height: 38px; margin: 0 5px 27px; padding: 0 5px; border-radius: 0; background: transparent; box-shadow: none; color: #171717; }
.brand-mark { color: #171717; font: 600 22px/1 var(--display); letter-spacing: -.09em; }
.brand-mark > span { width: 5px; height: 5px; margin-left: 1px; background: #171717; }
.rail .brand-word { display: inline; color: #171717; font: 600 11px/1 var(--mono); letter-spacing: .015em; text-transform: uppercase; }
.brand-cube { width: 23px; height: 23px; flex: 0 0 auto; color: #181818; }
.rail-nav { align-items: stretch; gap: 2px; }
.rail-action { display: flex; align-items: center; justify-content: flex-start; gap: 11px; width: 100%; height: 34px; padding: 0 10px; border-radius: 5px; color: #4e4e4e; transition: background .15s var(--ease-out), color .15s var(--ease-out); }
.rail-action > span { display: inline; font: 500 13px/1.1 var(--font); }
.rail-action svg { flex: 0 0 auto; width: 16px; height: 16px; stroke-width: 1.7; }
@media (hover: hover) and (pointer: fine){.rail-action:hover { transform: none; background: #efefee; color: #171717; }}
.rail-action.active, .rail-action[aria-current='page'] { background: #181818; color: #fff; }
.rail-action.active::before, .rail-action[aria-current='page']::before { display: none; }
.rail-bottom { display: flex; justify-content: flex-start; align-items: center; gap: 12px; width: 100%; padding: 16px 8px 4px; border-top: 1px solid var(--line); }
.rail-private { display: flex; align-items: center; gap: 8px; width: auto; height: auto; color: #777; }
.rail-private svg { width: 15px; height: 15px; stroke-width: 1.6; }
.rail-private > span { display: inline; color: #777; font: 400 11px/1.2 var(--font); }
.rail-workspace-avatar { display: grid; place-items: center; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: #181818; color: #fff; font: 500 12px/1 var(--font); }
.rail-workspace-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rail-workspace-copy strong { color: #333; font: 500 12px/1.4 var(--font); }
.rail-workspace-copy small { color: #737373; font: 400 10px/1.4 var(--font); }

/* People and topic lists read as navigation rows, not a stack of cards. */
.people-pane, .topics-pane { background: #fff; border-right: 1px solid var(--line); }
.people-header, .topics-pane .tp-pane-header { padding: 24px 18px 12px; }
.people-header h1, .people-header h2, .pane-title { color: #171717; font: 500 27px/1.12 var(--display); letter-spacing: -.055em; }
.eyebrow, .list-label, .list-heading, .tp-kicker, .understanding-step,
.em-thread-label, .em-story-word, .em-gentle-line span { color: #777; font: 500 10px/1.4 var(--mono); letter-spacing: .035em; text-transform: uppercase; }
.people-subtitle { color: #858585; font-size: 11px; }
.people-header .add-button, .tp-add-circle { width: 31px; height: 31px; border: 1px solid var(--line-strong); border-radius: 4px; background: #fff; color: #1d1d1d; box-shadow: none; }
@media (hover: hover) and (pointer: fine){.people-header .add-button:hover, .tp-add-circle:hover { transform: none; background: #f2f2f2; border-color: #bfbfbd; }}
.people-pane > .search-wrap, .tp-search { margin: 8px 16px 14px; }
.search-wrap input, .search-wrap .search-input, .tp-search input { height: 38px; border: 1px solid #dededc; border-radius: 4px; background: #fff; color: #222; font-size: 12px; box-shadow: none; }
.search-wrap input:focus, .tp-search input:focus { border-color: #777; background: #fff; box-shadow: none; }
.search-wrap svg, .search-icon, .tp-search-icon { color: #929292; }
.search-wrap kbd { border-color: var(--line); border-radius: 3px; color: #999; }
.filter-row { padding: 0 16px 12px; gap: 5px; }
.filter-chip { padding: 6px 9px; border: 1px solid transparent; border-radius: 4px; color: #777; font-size: 11px; font-weight: 500; }
@media (hover: hover) and (pointer: fine){.filter-chip:hover { background: #f3f3f3; color: #222; }}
.filter-chip.active, .filter-chip[aria-selected='true'] { border-color: #e1e1df; background: #ececec; color: #171717; }
.list-heading, .list-label { padding: 8px 18px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: #888; }
.people-list, .tp-topic-list { padding: 0; }
.person-item, .tp-topic-row { min-height: 66px; padding: 10px 16px; border: 0; border-bottom: 1px solid #f0f0ef; border-radius: 0; background: #fff; transition: background .15s var(--ease-out); }
@media (hover: hover) and (pointer: fine){.person-item:hover, .tp-topic-row:hover { background: #f6f6f5; }}
.person-item.active, .person-item[aria-selected='true'], .tp-topic-row.active { border-color: #ebebea; background: #eee; }
@media (hover: hover) and (pointer: fine){.person-item.active:hover { background: #eaeaea; }}
.avatar, .tp-topic-initial, .message-avatar, .em-circle-avatar { width: 38px; height: 38px; border: 1px solid #e5e5e3; border-radius: 4px; background: #ececeb; color: #474747; font: 600 12px/1 var(--display); }
.avatar[data-tone='rose'], .avatar[data-tone='amber'], .avatar[data-tone='lavender'],
.avatar.guessed, .person-item:nth-child(n) .avatar,
.tp-topic-row:nth-child(n) .tp-topic-initial { background: #ececeb; color: #474747; }
.tp-topic-initial { flex-basis: 38px; font-size: 14px; }
.person-name, .tp-topic-row-copy strong { color: #222; font-size: 12px; font-weight: 600; }
.person-preview, .tp-topic-row-copy small { color: #8a8a8a; font-size: 11px; }
.person-date, .person-cue, .person-cue.guess { color: #888; font-size: 10px; }
.person-source { min-width: 0; max-width: 88px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #999; font-size: 10px; }
.person-cue::before, .person-cue.guess::before { background: #a8a8a8; }
.sample-banner, .tp-first-card { margin: 2px 16px 10px; padding: 13px; border: 1px solid var(--line); border-radius: 4px; background: #f8f8f6; }
.sample-banner .status-dot { background: #999; }
.sample-banner strong, .tp-first-card strong { color: #303030; font-weight: 600; }
.sample-banner p, .tp-first-card p { color: #777; }
.tp-first-ornament { width: 30px; height: 30px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 4px; background: #fff; color: #555; }
.tp-first-card > button, .tp-starters summary { color: #405bb1; font-weight: 500; }
.tp-starter-set { border-top-color: var(--line); }
.tp-starter-set button, .tp-starters button { border-color: #dededc; border-radius: 4px; background: #fff; color: #555; font-size: 10px; font-weight: 500; }
@media (hover: hover) and (pointer: fine){.tp-starter-set button:hover, .tp-starters button:hover { border-color: #aaa; color: #111; }}
.tp-starter-set small { color: #888; font: 500 9px/1.3 var(--mono); letter-spacing: .02em; }
.people-footer, .tp-pane-footer { padding: 12px 16px; border-top: 1px solid var(--line); }
.people-footer p, .tp-pane-footer p { color: #888; }

/* Shared headers, buttons, evidence panels, forms and message rows. */
.main-pane, .main-header, .main-content, .detail-pane { background: #fff; }
.main-pane::before { display: none; }
.main-header { min-height: 58px; padding: 10px 24px; border-bottom: 1px solid var(--line); backdrop-filter: none; }
.main-header .avatar, .avatar.small, .main-header .avatar.small { width: 35px; height: 35px; border-radius: 4px; }
.main-header h1, .main-header h2, .main-person strong { color: #222; font-weight: 600; }
.main-header p, .main-person small { color: #888; }
.main-content { padding: 22px 26px 32px; }
.main-content > * { width: min(100%, 1040px); }
.main-content > * + *, .main-content > .content-inner > * + * { margin-top: 13px; }
.ch-depth { border: 1px solid var(--line); border-radius: 5px; background: #fff; }
.ch-depth > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 63px; padding: 13px 19px; cursor: pointer; list-style: none; }
.ch-depth > summary::-webkit-details-marker { display: none; }
.ch-depth > summary > span:first-child { display: grid; gap: 3px; }
.ch-depth > summary strong { color: #303030; font-size: 12px; font-weight: 600; }
.ch-depth > summary small { color: #8a8a87; font-size: 10px; }
.ch-depth > summary > span:last-child { color: #777; font-size: 20px; line-height: 1; }
.ch-depth[open] > summary > span:last-child { transform: rotate(45deg); }
.ch-depth-body { display: grid; gap: 12px; padding: 0 13px 13px; }
.ch-depth-body > * { min-width: 0; margin: 0; }
.message-section .section-heading h3 small { color: #939390; font-size: 10px; font-weight: 400; }
.ch-more-messages { margin-top: 11px; }
.ch-source-context { display: grid; gap: 8px; max-height: min(56vh, 430px); margin-top: 15px; overflow: auto; }
.ch-source-line { padding: 11px 13px; border: 1px solid var(--line); border-radius: 4px; background: #fafaf9; }
.ch-source-line.is-cited { border-color: #aeb6aa; background: #f5f8f3; }
.ch-source-line p { margin: 0 0 6px; color: #333; overflow-wrap: anywhere; }
.ch-source-line small { color: #888; font-size: 10px; }
.ch-source-link { display: inline-block; margin-top: 7px; padding: 0; border: 0; background: transparent; color: #405bb1; font: 500 10px/1.4 var(--font); }
@media (hover: hover) and (pointer: fine){.ch-source-link:hover { text-decoration: underline; }}
.source-row .ch-remove-source { flex: 0 0 auto; margin-left: auto; padding: 5px 7px; border: 1px solid var(--line); border-radius: 3px; background: #fff; color: #777; font: 500 10px/1.3 var(--font); }
@media (hover: hover) and (pointer: fine){.source-row .ch-remove-source:hover { border-color: #999; color: #333; }}
.ch-privacy-notice { border: 1px solid #cfc7b6; background: #faf8f2; padding: 18px 20px; border-radius: 5px; color: #3f3b34; }
.ch-privacy-notice strong { display: block; font-size: 13px; }
.ch-privacy-notice p { margin: 6px 0 14px; line-height: 1.55; font-size: 12px; }
.section-heading { margin: 20px 0 10px; }
.section-heading h2, .section-heading h3, .section-card h3, .section-card h4 { color: #222; font-weight: 600; }
.hero-card { min-height: 0; padding: 26px 29px; border: 1px solid var(--line); border-radius: 5px; background: #f8f8f6; box-shadow: none; }
.hero-card::after { display: none; }
.hero-card h1, .hero-card h2 { max-width: 720px; color: #171717; font: 500 clamp(28px, 3vw, 39px)/1.09 var(--display); letter-spacing: -.06em; }
.hero-card p, .hero-foot, .hero-foot .confidence-label { color: #777; }
.hero-foot .status-dot, .hero-foot .guess .status-dot, .person-item .status-dot { background: #999; }
.hero-kicker, .hero-card .eyebrow, .demo-note { color: #777; font-family: var(--mono); font-weight: 500; letter-spacing: .03em; }
.sparkle-mark { border-color: #dededc; border-radius: 3px; background: #fff; color: #333; }
.section-card, .insight-card, .action-card, .composer,
.memory-story, .privacy-hero { border: 1px solid var(--line); border-radius: 5px; background: #fff; box-shadow: none; }
.section-card { padding: 18px 20px; }
.content-pair { gap: 10px; }
.content-pair .insight-card, .content-pair .action-card { min-height: 170px; padding: 18px 20px; }
.content-pair .action-card { border-color: var(--line); background: #fff; }
.insight-card::before { top: 0; bottom: 0; width: 2px; border-radius: 0; background: #8b8b8b; }
.insight-card.guess::before { background: #b6a18f; }
.insight-card .eyebrow, .insight-card.guess .eyebrow,
.content-pair .action-card .eyebrow { color: #777; }
.insight-card h3, .action-card h3 { color: #222; font-weight: 600; }
.insight-card p, .action-card p, .content-pair .action-card p { color: #666; }
.content-pair .insight-card blockquote, .memory-story-quote,
.understanding-cell blockquote, .understanding-list blockquote { color: #555; font: 400 13px/1.55 var(--font); }
.action-icon { border: 1px solid var(--line); border-radius: 4px; background: #f7f7f7; color: #555; }
.moment-context, .change-note, .understanding-heading,
.understanding-foot { border-color: var(--line); border-radius: 4px; background: #f9f9f8; color: #666; }
.moment-context button, .change-note strong, .understanding-item-top strong { color: #333; }
.moment-context > span svg { color: #777; }
.change-note .eyebrow { color: #888; }
.change-note p { color: #666; }
.change-line, .understanding-basis, .understanding-item-top .message-source,
.understanding-item-top .note-source { border-radius: 3px; background: #ececeb; color: #555; }
.understanding-cell > blockquote, .understanding-list li { border-left-color: #ccc; }
.understanding-risk .understanding-list li { border-left-color: #baa9a2; }
.understanding-heading .eyebrow, .understanding-step { color: #888; }
.understanding-cell h4, .understanding-heading h3 { color: #252525; font-weight: 600; }
.understanding-cell > p, .understanding-list p, .understanding-foot p { color: #666; }
.composer { border-color: var(--line); }
.composer-heading .eyebrow, .message-section .section-heading .eyebrow { color: #888; }
.composer-input, .composer textarea { color: #222; }
.draft-feedback, .message-note, .source-note, .confidence-label { color: #898989; }
.message-list { gap: 9px; }
.message-avatar { flex-basis: 25px; width: 25px; height: 25px; font-size: 9px; }
.message-bubble, .message-row.mine .message-bubble, .message-bubble.mine { padding: 11px 13px; border-color: #e1e1df; border-radius: 5px; background: #f8f8f7; box-shadow: none; color: #414141; }
.message-bubble p { color: #414141; }
.message-bubble small, .message-meta { color: #999; }
.tag, .tag.guess, .date-divider, .detail-stat, .detail-section-head span { border: 1px solid var(--line); border-radius: 4px; background: #f4f4f3; color: #666; }
.detail-pane { padding: 0 18px 24px; border-left-color: var(--line); }
.detail-header { min-height: 58px; }
.detail-profile { padding: 20px 0; }
.detail-profile .avatar, .avatar.large { border-radius: 5px; background: #e9e9e8; color: #444; }
.detail-profile h2, .memory-entry strong { color: #252525; font-weight: 600; }
.detail-section { padding: 17px 0; }
.memory-entry { border-left-color: #d5d5d3; }
.memory-entry::before, .memory-entry.guess::before { background: #888; box-shadow: 0 0 0 3px #f4f4f3; }
.memory-entry p, .detail-section p { color: #666; }
.detail-pane select { border-color: var(--line); border-radius: 4px; background: #fff; color: #444; }
.page-view .main-header, .emotions-page .em-page-header,
.topics-page .tp-page-header { min-height: 83px; }
.page-header-inner h1, .emotions-page .em-page-header h1,
.topics-page .tp-page-header h1 { color: #171717; font: 500 clamp(24px, 2.4vw, 31px)/1.1 var(--display); letter-spacing: -.055em; }
.page-header-inner p, .emotions-page .em-page-header p,
.topics-page .tp-page-header p { color: #888; font-size: 11px; }
.page-view .main-content { padding-top: 20px; }
.memory-story, .source-row { border-bottom-color: var(--line); }
@media (hover: hover) and (pointer: fine){.memory-story:hover { transform: none; border-color: #bcbcbc; }}
.memory-story-feeling { color: #555; }
.privacy-hero { background: #f8f8f6; }
.privacy-hero-icon, .source-row > span { border: 1px solid var(--line); border-radius: 4px; background: #fff; color: #555; }
.privacy-hero h2, .settings-row h3 { color: #252525; font-weight: 600; }
.privacy-hero p, .settings-row p { color: #777; }
.button, .button-quiet, .button-danger, .icon-button,
.file-picker, .view-toggle button { border-radius: 4px; font-weight: 500; box-shadow: none; }
.button { min-height: 34px; padding: 7px 11px; border-color: #dcdcdc; background: #fff; color: #333; }
@media (hover: hover) and (pointer: fine){.button:hover { transform: none; border-color: #bdbdbd; background: #f5f5f5; box-shadow: none; }}
.button-primary{ border-color: #171717; background: #171717; color: #fff; box-shadow: none; }@media (hover: hover) and (pointer: fine){ .button-primary:hover { border-color: #171717; background: #171717; color: #fff; box-shadow: none; }}
@media (hover: hover) and (pointer: fine){.button-primary:hover { background: #333; }}
.button-quiet { border-color: transparent; background: transparent; color: #333; }
@media (hover: hover) and (pointer: fine){.button-quiet:hover { border-color: var(--line); background: #f5f5f5; }}
.button-coral { border-color: #9d5f53; background: #9d5f53; color: #fff; }
.icon-button { color: #777; }
@media (hover: hover) and (pointer: fine){.icon-button:hover { border-color: var(--line); background: #f5f5f5; color: #222; }}
.text-link { font-weight: 500; }
.field input, .field select, .field textarea, .modal input.field,
.modal select.field, .modal textarea.field, .tp-field input,
.tp-field select, .tp-field textarea { border-color: #dededc; border-radius: 4px; background: #fff; color: #222; box-shadow: none; }
.field input:focus, .field select:focus, .field textarea:focus,
.modal input.field:focus, .modal select.field:focus, .modal textarea.field:focus,
.tp-field input:focus, .tp-field select:focus, .tp-field textarea:focus { border-color: #777; box-shadow: none; }
.field label, .field-label, .tp-field > span { color: #555; font-weight: 600; }
.modal-backdrop { background: rgba(0,0,0,.37); backdrop-filter: none; }
.modal { border-color: #d5d5d5; border-radius: 6px; box-shadow: 0 18px 55px #0002; }
.modal-header h2, .modal-body > h2 { color: #171717; font-weight: 500; }
.dropzone, .import-example, .danger-zone, .view-toggle,
.toast { border-color: var(--line); border-radius: 4px; background: #f8f8f7; color: #666; box-shadow: none; }
.dropzone.dragging { border-color: #777; background: #eee; }
.toast { background: #fff; }

/* Topics: each thesis becomes a compact inspectable result. */
.topics-page { --tp-ink: #202020; --tp-muted: #777; --tp-line: #e5e5e3; --tp-card: #fff; }
.tp-kicker, .tp-section-top .eyebrow,
.tp-focus-heading .eyebrow { color: #858585; font-family: var(--mono); font-weight: 500; }
.topics-page h2, .topics-page h3 { color: #222; font-weight: 600; }
.topics-page .tp-page-body { padding-top: 18px; padding-bottom: 32px; }
.topics-page .tp-page-body > * + * { margin-top: 10px; }
.tp-empty-hero { grid-template-columns: 1fr; min-height: 0; padding: 29px; border-color: var(--line); border-radius: 5px; background: #f8f8f6; box-shadow: none; }
.tp-empty-copy h2 { max-width: 690px; color: #171717; font: 500 clamp(30px, 3vw, 43px)/1.05 var(--display); }
.tp-empty-copy p { max-width: 600px; color: #777; font-size: 12px; }
.tp-empty-actions { margin-top: 20px; }
.tp-example-diagram { display: none; }
.tp-example-preview, .tp-principle-strip, .tp-topic-hero,
.tp-theses, .tp-focus, .tp-library, .tp-questions, .tp-cross-topic,
.tp-no-thesis { border-color: var(--line); border-radius: 5px; background: #fff; box-shadow: none; }
.tp-example-preview, .tp-theses, .tp-library, .tp-questions,
.tp-cross-topic, .tp-focus { padding: 18px 20px; }
.tp-example-preview .eyebrow { color: #888; }
.tp-example-preview p, .tp-section-intro, .tp-source-empty p,
.tp-topic-hero p, .tp-cross-topic > p { color: #777; }
.tp-preview-sides { gap: 0; margin: 16px 0 12px; border: 1px solid var(--line); }
.tp-preview-sides span, .tp-preview-sides span:nth-child(n) { min-height: 54px; padding: 13px; border: 0; border-right: 1px solid var(--line); border-radius: 0; background: #fff; color: #555; font-weight: 500; }
.tp-preview-sides span:last-child { border-right: 0; }
.tp-principle-strip { justify-content: flex-start; gap: 12px 25px; color: #888; }
.tp-principle-strip strong { color: #333; }
.tp-topic-hero { padding: 20px 22px 0; background: #f8f8f6; }
.tp-topic-hero h2 { color: #171717; font-weight: 500; }
.topics-page .tp-topic-hero-actions button, .topics-page .tp-focus-actions button { border-radius: 3px; color: #333; font-weight: 500; }
.topics-page .tp-topic-hero-actions button:last-child, .topics-page .tp-focus-actions button:last-child { color: #777; }
@media (hover: hover) and (pointer: fine){.topics-page .tp-topic-hero-actions button:hover, .topics-page .tp-focus-actions button:hover { background: #ececeb; color: #171717; }}
.tp-topic-stats { border-top-color: var(--line); }
.tp-topic-stats span, .tp-topic-stats span + span { color: #777; border-color: var(--line); }
.tp-thesis-list, .tp-side-switch { gap: 5px; }
.tp-thesis-tab, .tp-side-switch button, .tp-cross-list button,
.tp-starters button { border-color: #dededc; border-radius: 4px; background: #fff; color: #555; }
@media (hover: hover) and (pointer: fine){.tp-thesis-tab:hover { transform: none; border-color: #aaa; }}
.tp-thesis-tab.active, .tp-side-switch button.active { border-color: #cdcdcb; background: #ececec; color: #171717; }
.tp-thesis-tab strong, .tp-side-switch button { font-weight: 500; }
.tp-focus-meta span, .tp-focus-meta .tp-own-rating { padding: 5px 8px; border-color: var(--line); border-radius: 3px; background: #f8f8f7; color: #777; }
.tp-focus-meta strong, .tp-focus-meta .tp-own-rating strong { color: #333; }
.tp-change-view { margin-top: 14px; padding: 11px 13px; border-color: var(--line); border-radius: 4px; background: #f8f8f6; }
.tp-change-icon { border: 1px solid var(--line); border-radius: 3px; background: #fff; color: #555; }
.tp-change-view strong, .tp-change-view p { color: #666; }
.tp-side-grid { gap: 0; border: 1px solid var(--line); }
.tp-side, .tp-side-challenge, .tp-side-alternative { min-height: 160px; border: 0; border-right: 1px solid var(--line); border-radius: 0; background: #fff; }
.tp-side:last-child { border-right: 0; }
.tp-side-head { min-height: 40px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.tp-side-head h3, .tp-side-challenge .tp-side-head h3,
.tp-side-alternative .tp-side-head h3 { color: #333; font-weight: 600; }
.tp-side-dot, .tp-side-challenge .tp-side-dot,
.tp-side-alternative .tp-side-dot { background: #777; }
.tp-count, .tp-source-kind, .tp-source-type { border: 1px solid var(--line); border-radius: 3px; background: #f6f6f5; color: #777; }
.tp-side-body { padding: 10px 12px; }
.tp-side-empty, .tp-side-challenge .tp-side-empty,
.tp-side-alternative .tp-side-empty { min-height: 87px; padding: 9px; border-color: var(--line); border-radius: 4px; background: #fafafa; }
.tp-side-empty > span, .tp-side-challenge .tp-side-empty > span,
.tp-side-alternative .tp-side-empty > span { color: #999; }
.tp-side-empty p, .tp-side-empty small { color: #888; }
.tp-side-add, .tp-side-challenge .tp-side-add,
.tp-side-alternative .tp-side-add { margin: 0 10px 10px; padding: 8px; border-color: var(--line); border-radius: 4px; background: #fff; color: #444; font-weight: 500; }
@media (hover: hover) and (pointer: fine){.tp-side-add:hover { border-color: #aaa; background: #f8f8f8; }}
.tp-perspective-card, .tp-source-card { border-color: var(--line); border-radius: 4px; background: #fff; }
.tp-perspective-card p, .tp-source-card blockquote { color: #555; }
.tp-perspective-meta, .tp-source-card-bottom,
.tp-question-list, .tp-question-row { border-color: var(--line); }
.tp-source-grid { gap: 8px; }
.tp-source-card { padding: 13px; }
.tp-source-card h3 { font-weight: 600; }
.tp-source-card-bottom a, .tp-source-mini a,
.tp-source-mini button, .tp-excerpt-details summary,
.tp-link-button { color: #405bb1; font-weight: 500; }
.tp-source-mini, .tp-source-mini strong, .tp-source-card-top,
.tp-source-byline, .tp-source-card-bottom { color: #888; }
.tp-source-empty, .tp-open-empty { border-color: var(--line); border-radius: 4px; background: #fafafa; }
.tp-source-empty > span { border: 1px solid var(--line); border-radius: 4px; background: #fff; color: #777; }
.tp-question-row p { color: #555; }
.tp-source-card-top, .tp-source-byline, .tp-source-card-bottom,
.tp-unsourced, .tp-count, .tp-source-kind,
.tp-focus-meta span, .tp-side-empty small { font-size: 10px; }
.tp-cross-topic { background: #fff; }
@media (hover: hover) and (pointer: fine){.tp-cross-list button:hover { border-color: #aaa; background: #f7f7f7; }}
.tp-form { padding: 14px; border-color: var(--line); border-radius: 4px; background: #fff; box-shadow: none; }
.tp-form-head h3 { color: #333; font-weight: 600; }
.tp-icon-close { border-radius: 4px; background: #f1f1f0; color: #555; }
.tp-field > span { color: #555; font-weight: 600; }
.tp-field small, .tp-form-tip { color: #888; }
.tp-mobile-back { border-radius: 4px; background: #eee; color: #333; }

/* Emotions: keep the expressive face; make the surrounding analysis precise. */
.emotions-page { --em-ink: #202020; --em-muted: #777; --em-line: #e5e5e3; --em-paper: #fff; }
.emotions-page .em-page-body { padding-top: 18px; padding-bottom: 32px; }
.emotions-page .em-page-header .eyebrow { color: #777; font-family: var(--mono); font-weight: 500; }
.emotions-page .em-page-body > * + * { margin-top: 10px; }
.emotions-page h2, .emotions-page h3 { color: #222; font-weight: 600; }
.em-opening { padding: 12px 15px; border-color: var(--line); border-radius: 4px; background: #f8f8f6; }
.em-opening .eyebrow, .em-section-lead .eyebrow,
.em-card-title-row .eyebrow { color: #858585; font-family: var(--mono); font-weight: 500; }
.em-opening p, .em-section-lead > p { color: #777; }
.em-opening-mark { border-color: var(--line); border-radius: 3px; background: #fff; color: #555; }
.em-workspace { gap: 10px; }
.em-face-card, .em-story-card, .em-influence-card,
.em-how-card, .em-circle-card { border-color: var(--line); border-radius: 5px; background: #fff; box-shadow: none; }
.em-face-card, .em-story-card, .em-influence-card,
.em-how-card, .em-circle-card { padding: 18px 20px; }
.em-card-title-row { margin-bottom: 11px; }
.em-demo-badge { border: 1px solid var(--line); border-radius: 3px; background: #f6f6f5; color: #888; }
.em-face-stage { min-height: 230px; border-color: var(--line); border-radius: 4px; background: #fafafa; }
.em-face-svg { filter: none; }
@media (hover: hover) and (pointer: fine){.em-face-stage:hover .em-face-svg { transform: none; }}
.em-stage-note, .em-identity > div:first-child span,
.em-thread-reading span { color: #888; }
.em-control-heading label, .em-identity strong { color: #333; font-weight: 600; }
.em-control-heading output { color: #666; }
.em-face-controls input[type='range'] { accent-color: #333; }
.em-identity-options button, .em-feeling-picks button,
.em-influence-picks button, .em-circle-person { border-color: var(--line); border-radius: 4px; background: #fff; color: #555; font-weight: 500; }
@media (hover: hover) and (pointer: fine){.em-identity-options button:hover, .em-feeling-picks button:hover,
.em-influence-picks button:hover, .em-circle-person:hover { transform: none; border-color: #aaa; background: #f8f8f8; color: #222; }}
.em-identity-options button.active, .em-feeling-picks button.active,
.em-influence-picks button.active { border-color: #cececc; background: #ececec; color: #171717; box-shadow: none; }
.em-story-word, .em-gentle-line span { color: #888; }
.em-story-detail p, .em-influence-result p,
.em-how-grid p, .em-circle-person-copy > span { color: #777; }
.em-example-thread, .em-gentle-line p,
.em-influence-result, .em-circle-empty { border-color: var(--line); border-radius: 4px; background: #f9f9f8; }
.em-chat-bubble { border-color: var(--line); border-radius: 4px; background: #fff; color: #444; }
.em-thread-reading { border-top-color: var(--line); }
.em-thread-reading strong, .em-influence-picks strong,
.em-circle-person-copy strong { color: #333; font-weight: 600; }
.em-gentle-line p { border-left-color: #aaa; color: #666; }
.em-influence-picks { gap: 0; margin-top: 16px; border: 1px solid var(--line); }
.em-influence-picks button { min-height: 65px; border: 0; border-right: 1px solid var(--line); border-radius: 0; }
.em-influence-picks button:last-child { border-right: 0; }
.em-influence-picks span { color: #888; }
.em-influence-accent { background: #999; }
.em-influence-result { margin-top: 14px; border: 1px solid var(--line); }
.em-options { border-top-color: var(--line); }
.em-options summary { color: #424242; font-weight: 500; }
.em-options summary span { color: #777; }
.em-influence-options .em-influence-picks { margin-top: 12px; }
.em-ask-pill { border-color: var(--line); border-radius: 3px; background: #fff; color: #555; }
.em-how-card { background: #fff; }
.em-how-grid, .em-how-grid > div + div,
.em-how-grid > div:nth-child(n) { border-color: var(--line); }
.em-how-index { border: 1px solid var(--line); border-radius: 3px; background: #f4f4f3; color: #777; font-family: var(--mono); font-weight: 500; }
.em-care-risk, .em-care-risk strong { color: #666; }
.em-circle-list { gap: 0; border: 1px solid var(--line); }
.em-circle-person { min-height: 84px; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; }
.em-circle-person-copy small { color: #666; font-size: 11px; line-height: 1.45; }
.em-all-people { color: #405bb1; font-weight: 500; }

/* The new landing page uses TypeSafe's editorial hero and strict content grid. */
.console-home { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; background: #fff; }
.ch-hero { display: grid; grid-template-columns: minmax(300px, 42%) minmax(0, 1fr); flex: 0 0 272px; height: 272px; min-height: 272px; overflow: hidden; border-bottom: 1px solid var(--line); background: #f8f8f6; }
.ch-hero-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 28px clamp(26px, 3vw, 44px); }
.ch-mono, .ch-feature-no, .ch-art-code, .ch-art-card > span,
.ch-art-card small { color: #777; font: 400 10px/1.3 var(--mono); letter-spacing: .01em; }
.ch-hero-copy .ch-mono { margin-bottom: 7px; color: #555; }
.ch-hero-copy h1 { margin: 0; color: #111; font: 500 clamp(47px, 5vw, 70px)/.92 var(--display); letter-spacing: -.075em; }
.ch-hero-copy p { max-width: 395px; margin: 12px 0 17px; color: #666; font-size: 12px; line-height: 1.5; }
.ch-hero-copy .button, .ch-hero-copy button { min-height: 42px; border-radius: 0; }
.ch-primary { display: inline-flex; align-items: center; justify-content: space-between; gap: 20px; min-width: 166px; padding: 0 17px; border: 1px solid #171717; background: #171717; color: #fff; font: 500 12px/1 var(--font); }
@media (hover: hover) and (pointer: fine){.ch-primary:hover { background: #333; }}
.ch-primary span { font-size: 18px; line-height: 1; }
.ch-hero-art { position: relative; min-width: 0; overflow: hidden; border-left: 1px solid var(--line); background: radial-gradient(circle at 72% 42%, #eae6f0 0, transparent 26%), radial-gradient(circle at 37% 76%, #e9f0ee 0, transparent 31%), #f5f5f3; }
.ch-art-grid { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0, transparent 91px, #e9e9e7 92px), repeating-linear-gradient(0deg, transparent 0, transparent 67px, #ececea 68px); }
.ch-art-code { position: absolute; top: 19px; left: 23px; z-index: 1; color: #727272; font-size: 10px; line-height: 1.5; }
.ch-art-card { position: absolute; display: flex; flex-direction: column; gap: 10px; width: min(42%, 250px); min-height: 130px; padding: 14px 16px; border: 1px solid #d5d5d2; background: #fff; box-shadow: 3px 4px 0 #e8e8e5; transform: rotate(-4deg); z-index: 2; }
.ch-art-card strong { max-width: 210px; color: #292929; font: 500 clamp(17px, 1.8vw, 25px)/1.18 var(--display); letter-spacing: -.04em; }
.ch-art-card small { margin-top: auto; color: #999; }
.ch-art-card-a { left: 19%; top: 58px; }
.ch-art-card-b { right: 9%; bottom: 23px; transform: rotate(5deg); }
.ch-art-orbit { position: absolute; right: 15%; top: 11px; width: 85px; height: 85px; border: 1px solid #bbb; border-radius: 50%; transform: rotate(-16deg); }
.ch-art-orbit::before, .ch-art-orbit::after { content: ''; position: absolute; border: 1px solid #b8b8b6; border-radius: 50%; }
.ch-art-orbit::before { inset: 10px 28px; transform: rotate(60deg); }
.ch-art-orbit::after { inset: 24px 6px; transform: rotate(-25deg); }
.ch-art-orbit i { position: absolute; display: block; width: 6px; height: 6px; border-radius: 50%; background: #999; }
.ch-art-orbit i:nth-child(1) { top: 10px; right: 13px; }
.ch-art-orbit i:nth-child(2) { left: 6px; top: 48px; }
.ch-art-orbit i:nth-child(3) { right: 28px; bottom: 3px; }
.ch-content { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); flex: 1 0 auto; border-bottom: 1px solid var(--line); }
.ch-usecases { min-width: 0; padding: 32px clamp(24px, 3vw, 40px); border-right: 1px solid var(--line); }
.ch-quickstart { min-width: 0; padding: 32px 24px; overflow-wrap: anywhere; }
.ch-usecases h2, .ch-quickstart h2 { margin: 0 0 20px; color: #171717; font: 500 clamp(25px, 2.8vw, 36px)/1.08 var(--display); letter-spacing: -.055em; }
.ch-usecases p, .ch-quickstart p { color: #777; }
.ch-section-heading .ch-mono, .ch-quickstart > .ch-mono { display: block; margin-bottom: 9px; color: #777; }
.ch-feature-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.ch-feature-grid button { display: grid; grid-template-columns: 28px minmax(0,1fr); align-content: start; gap: 6px 10px; min-height: 120px; padding: 16px; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; color: #333; text-align: left; }
@media (hover: hover) and (pointer: fine){.ch-feature-grid button:hover { background: #f8f8f6; }}
.ch-feature-no { grid-column: 1; grid-row: 1 / 3; color: #999; }
.ch-feature-grid strong { grid-column: 2; font: 600 13px/1.3 var(--font); }
.ch-feature-grid p { grid-column: 2; margin: 0; color: #777; font-size: 11px; line-height: 1.45; }
.ch-quickstart > p { margin: 0 0 18px; font-size: 12px; line-height: 1.5; }
.ch-quick-action { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 41px; padding: 0 12px; border: 1px solid var(--line); border-bottom: 0; background: #fff; color: #333; font-size: 12px; text-align: left; }
@media (hover: hover) and (pointer: fine){.ch-quick-action:hover { background: #f8f8f6; }}
.ch-quick-action:nth-of-type(2) { border-bottom: 1px solid var(--line); }
.ch-quick-action span { color: #888; }
.ch-quick-note { display: flex; flex-direction: column; gap: 7px; margin-top: 20px; padding: 14px; border: 1px solid var(--line); background: #f8f8f6; }
.ch-quick-note strong { color: #333; font-size: 12px; font-weight: 600; }
.ch-quick-note span { color: #777; font-size: 11px; line-height: 1.5; }
.ch-resources { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); min-height: 85px; }
.ch-resources > * { display: flex; flex-direction: column; justify-content: center; gap: 6px; min-width: 0; padding: 15px 22px; border: 0; border-right: 1px solid var(--line); background: #fff; color: #555; text-align: left; text-decoration: none; }
@media (hover: hover) and (pointer: fine){.ch-resources > *:hover { background: #f8f8f6; }}
.ch-resources strong { color: #333; font-size: 12px; font-weight: 500; }

@media (max-width: 1420px) {
  .app-shell.with-detail { grid-template-columns: 224px minmax(250px, 272px) minmax(0, 1fr) minmax(220px, 238px); }
  .app-shell:not(.with-detail), .app-shell.no-detail,
  .app-shell.console-list { grid-template-columns: 224px minmax(250px, 272px) minmax(0, 1fr); }
  .app-shell.console-single { grid-template-columns: 224px minmax(0, 1fr); }
}
@media (max-width: 1160px) {
  .app-shell.with-detail, .app-shell.no-detail,
  .app-shell:not(.with-detail), .app-shell.console-list { grid-template-columns: 208px 260px minmax(0, 1fr); }
  .app-shell.console-single { grid-template-columns: 208px minmax(0, 1fr); }
  .rail { padding-inline: 8px; }
  .detail-pane.is-open { box-shadow: -8px 0 35px #0002; }
  .ch-hero { grid-template-columns: minmax(260px, 46%) minmax(0, 1fr); }
  .tp-side { border-right: 0; border-bottom: 1px solid var(--line); }
  .tp-side:last-child { border-bottom: 0; }
}
@media (max-width: 1000px) {
  .app-shell.with-detail, .app-shell.no-detail,
  .app-shell:not(.with-detail), .app-shell.console-list { grid-template-columns: 64px minmax(245px, 280px) minmax(0, 1fr); }
  .app-shell.console-single { grid-template-columns: 64px minmax(0, 1fr); }
  .rail { align-items: center; padding-inline: 7px; }
  .rail .brand { justify-content: center; width: 45px; margin-inline: 0; }
  .rail .brand-word, .rail-action > span, .rail-private > span { display: none; }
  .rail-workspace-copy { display: none; }
  .rail-nav { align-items: center; }
  .rail-action { justify-content: center; width: 44px; padding: 0; }
  .rail-bottom { justify-content: center; }
  .ch-content { grid-template-columns: minmax(0, 1.45fr) minmax(230px, 1fr); }
  .em-influence-picks button:nth-child(2n) { border-right: 0; }
  .em-influence-picks button:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 680px) {
  .app-shell, .app-shell.with-detail, .app-shell.no-detail,
  .app-shell.console-single, .app-shell.console-list,
  .app-shell:not(.with-detail) { display: block; height: 100dvh; min-height: 0; }
  .rail { position: fixed; inset: 0 0 auto; display: flex; justify-content: flex-start; align-items: stretch; width: 100%; height: 52px; padding: 0 8px; overflow: hidden; border-right: 0; border-bottom: 1px solid var(--line); border-top: 0; background: #fafafa; box-shadow: none; backdrop-filter: none; z-index: 15; }
  .rail .brand, .rail-bottom { display: none; }
  .rail-nav { display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; gap: 3px; width: 100%; max-width: none; height: 52px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .rail-nav::-webkit-scrollbar { display: none; }
  .rail-action { display: flex; flex: 0 0 auto; flex-direction: row; justify-content: center; gap: 6px; width: auto; height: 44px; margin-block: 3px; padding: 0 9px; border-radius: 8px; background: transparent; white-space: nowrap; }
  .rail-action svg { width: 15px; height: 15px; }
  .rail-action > span { display: inline; font-size: 11px; font-weight: 500; }
  .rail-action.active, .rail-action[aria-current='page'] { border-bottom: 0; background: #181818; color: #fff; }
  .people-pane, .topics-pane, .main-pane { height: calc(100dvh - 52px); margin-top: 52px; padding-bottom: 0; }
  .app-shell.mobile-open .people-pane { display: none; }
  .app-shell.mobile-open .main-pane { display: flex; }
  .app-shell.console-single .main-pane { display: flex; }
  .app-shell.console-single .main-pane.checkin-workbench { display: block; }
  .app-shell.console-list:not(.mobile-open) .topics-pane { display: flex; }
  .app-shell.console-list:not(.mobile-open) .main-pane { display: none; }
  .app-shell.console-list.mobile-open .topics-pane { display: none; }
  .app-shell.console-list.mobile-open .main-pane { display: flex; }
  .main-header, .page-view .main-header { min-height: 57px; padding: 10px 16px; }
  .main-content { padding: 17px 16px 28px; }
  .people-header, .topics-pane .tp-pane-header { padding: 19px 16px 12px; }
  .people-header h1, .people-header h2, .pane-title { font-size: 25px; }
  .person-item, .tp-topic-row { min-height: 66px; }
  .hero-card { padding: 22px; }
  .hero-card h1, .hero-card h2 { font-size: 29px; }
  .content-pair .insight-card, .content-pair .action-card,
  .section-card { padding: 16px; }
  .modal, .modal.small, .modal.large { max-height: 93dvh; border-radius: 6px 6px 0 0; }
  .toast.visible { bottom: 14px; }
  .tp-side-grid { display: block; }
  .tp-side { border-right: 0; border-bottom: 1px solid var(--line); }
  .tp-side:last-child { border-bottom: 0; }
  .tp-preview-sides { grid-template-columns: 1fr; }
  .tp-preview-sides span:nth-child(n) { border-right: 0; border-bottom: 1px solid var(--line); }
  .tp-preview-sides span:last-child { border-bottom: 0; }
  .em-influence-picks { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .em-influence-picks button:nth-child(2n) { border-right: 0; }
  .em-influence-picks button:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .em-circle-list { display: block; }
  .em-circle-person { width: 100%; border-right: 0; }
  .ch-hero { grid-template-columns: 1fr; flex: 0 0 auto; height: auto; min-height: 0; overflow: visible; }
  .ch-hero-copy { padding: 31px 24px; }
  .ch-hero-art { min-height: 175px; border-left: 0; border-top: 1px solid var(--line); }
  .ch-art-card { min-height: 102px; width: min(42%, 185px); padding: 10px 12px; gap: 6px; }
  .ch-art-card strong { font-size: 16px; }
  .ch-art-card-a { top: 37px; left: 12%; }
  .ch-art-card-b { right: 8%; bottom: 12px; }
  .ch-art-orbit { right: 12%; top: 3px; width: 60px; height: 60px; }
  .ch-content { grid-template-columns: 1fr; }
  .ch-usecases { border-right: 0; border-bottom: 1px solid var(--line); }
  .ch-quickstart, .ch-usecases { padding: 23px; }
  .ch-resources > * { min-height: 72px; }
}
@media (max-width: 560px) {
  .ch-feature-grid { grid-template-columns: 1fr; }
  .ch-feature-grid button { min-height: 84px; }
  .tp-topic-stats { flex-wrap: nowrap; justify-content: space-between; }
  .tp-topic-stats span, .tp-topic-stats span + span { flex: 0 1 auto; margin-right: 0; padding: 10px 5px; font-size: 9px; white-space: nowrap; }
  .tp-topic-stats span:first-child { padding-left: 0; }
}
@media (max-width: 390px) {
  .rail-action { padding-inline: 8px; }
  .rail-action > span { font-size: 10px; }
  .main-content { padding-inline: 14px; }
  .tp-topic-hero, .tp-theses, .tp-focus, .tp-library,
  .tp-questions, .tp-cross-topic { padding-inline: 15px; }
}

/* Keep the removal backup scope readable at narrow modal widths. */
.ch-source-removal-backup { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.ch-source-removal-backup .button { margin-top: 10px; }