@charset "UTF-8";
/*
 * Qiankun EPC — unified visual layer (2026-10-12).
 * Loaded after app.css / workspace.css / project-record.css. It keeps the forest + copper identity
 * but replaces the accumulated one-off values with one token set: a readable type scale (no text
 * under 12px), higher text contrast, three radii, and consistent surfaces, buttons and cards.
 */

:root {
  --surface-0: #0c1513;
  --surface-1: #121e1b;
  --surface-2: #182824;
  --surface-3: #20332e;
  --border: rgba(222, 234, 224, .1);
  --border-strong: rgba(222, 234, 224, .18);
  --ink-1: #f2f0e7;
  --ink-2: #ccd5cc;
  --ink-3: #a0ada4;
  --ink-4: #7c8c82;
  --accent: #dcaa78;
  --accent-strong: #f0c79b;
  --accent-ink: #1e1710;
  --accent-soft: rgba(220, 170, 120, .12);
  --accent-line: rgba(220, 170, 120, .38);
  --sage: #9fc6a9;
  --sage-soft: rgba(159, 198, 169, .12);
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --shadow-card: inset 0 1px 0 rgba(255, 255, 255, .035), 0 10px 30px rgba(0, 0, 0, .22);
  --shadow-pop: inset 0 1px 0 rgba(255, 255, 255, .05), 0 24px 60px rgba(0, 0, 0, .38);
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-body: 15px;
  --fs-lg: 17px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  /* legacy tokens re-pointed so older rules follow the new palette */
  --bg: var(--surface-0);
  --bg-raised: var(--surface-1);
  --text: var(--ink-1);
  --text-soft: var(--ink-2);
  --muted: var(--ink-3);
  --faint: var(--ink-4);
  --copper: var(--accent);
  --copper-bright: var(--accent-strong);
  --line: var(--border);
  --line-bright: var(--border-strong);
}

html { background: var(--surface-0); }
body {
  font-size: var(--fs-md);
  line-height: 1.7;
  color: var(--ink-1);
  background:
    radial-gradient(1200px 600px at 8% -10%, rgba(76, 139, 108, .16), transparent 60%),
    radial-gradient(900px 500px at 100% 110%, rgba(184, 110, 75, .08), transparent 60%),
    var(--surface-0);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { color: var(--accent-ink); background: var(--accent-strong); }
* { scrollbar-width: thin; scrollbar-color: rgba(222, 234, 224, .18) transparent; }
.page-grain { opacity: .12; }
.ambient { opacity: .07; }

/* ---------- Buttons: one family ---------- */
.quiet-button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border: 1px solid transparent; border-radius: var(--r-sm);
  color: var(--ink-2); background: transparent; font-size: var(--fs-sm); line-height: 1.4;
  transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.quiet-button:hover { color: var(--accent-strong); background: var(--accent-soft); }
.primary-action {
  padding: 11px 20px; border: 0; border-radius: var(--r-sm);
  color: var(--accent-ink); background: linear-gradient(180deg, var(--accent-strong), var(--accent));
  font-size: var(--fs-sm); font-weight: 600; box-shadow: 0 6px 20px rgba(220, 170, 120, .18);
}
.primary-action:hover { filter: brightness(1.05); }
.status-retry, .cancel-request, .retry-question, .pending-task-resume, .resume-request {
  padding: 6px 12px; border-radius: var(--r-sm); font-size: var(--fs-sm);
}

/* ---------- Top bar: sticky, calmer ---------- */
.topbar {
  position: sticky; top: 0; z-index: 6;
  height: 64px; padding: 0 clamp(20px, 4vw, 56px);
  border-bottom: 1px solid var(--border);
  background: rgba(12, 21, 19, .78);
  backdrop-filter: saturate(140%) blur(18px);
  -webkit-backdrop-filter: saturate(140%) blur(18px);
}
.brand-name { font-size: 18px; letter-spacing: .08em; }
.brand-mark { width: 26px; height: 28px; }
.brand-description { color: var(--ink-3); font-size: var(--fs-xs); letter-spacing: .08em; }
.workspace-nav {
  gap: 4px; margin-right: 6px; padding: 4px;
  border: 1px solid var(--border); border-radius: 999px; background: rgba(255, 255, 255, .025);
}
.nav-link {
  padding: 6px 14px; border-radius: 999px; color: var(--ink-3); font-size: var(--fs-sm);
  transition: color .18s ease, background .18s ease;
}
.nav-link:hover { color: var(--ink-1); background: rgba(255, 255, 255, .04); }
.nav-link.active { color: var(--accent-ink); background: var(--accent); }
.nav-link.active::after { display: none; }
.nav-link.active span { color: inherit; }
.nav-link span { font-size: var(--fs-xs); }
.prototype-status {
  gap: 8px; padding: 5px 11px; border: 1px solid var(--border); border-radius: 999px;
  color: var(--ink-3); font-size: var(--fs-xs);
}
.prototype-status i { width: 6px; height: 6px; }
.prototype-status[data-state="ready"] { color: var(--ink-2); }
.prototype-status[data-state="ready"] i { box-shadow: 0 0 0 3px var(--sage-soft); }
.new-chat-button {
  height: 34px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  color: var(--ink-1); font-size: var(--fs-sm);
}
.new-chat-button:hover { border-color: var(--accent-line); background: var(--accent-soft); }

/* ---------- Welcome / hero ---------- */
/* One quiet motion: the contour canvas behind the hero (theme.js). No glows, grain or blinking dots. */
.main-shell { overflow: visible; overflow-x: clip; }
.welcome-screen { position: relative; isolation: isolate; padding: 72px 0 40px; }
.hero-map {
  position: absolute; z-index: -1; top: 84px; right: -2%; width: min(64%, 880px); aspect-ratio: 2.55;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%);
  mask-image: linear-gradient(90deg, transparent 0, #000 16%);
}
.welcome-screen .hero-copy { max-width: 470px; }
@media (max-width: 1099px) {
  .hero-map { position: relative; top: auto; right: auto; display: block; width: 100%; margin: -36px 0 14px; -webkit-mask-image: none; mask-image: none; }
}
.hero-eyebrow, .section-eyebrow { gap: 0; font-size: var(--fs-xs); letter-spacing: .12em; color: var(--accent); }
.welcome-screen h1 { margin: 18px 0 18px; font-family: var(--font-display); font-weight: 500; letter-spacing: .02em; }
.welcome-screen h1 em { color: var(--accent-strong); font-weight: 500; text-shadow: none; }
.hero-copy { font-size: var(--fs-body); line-height: 1.95; color: var(--ink-2); }
.analysis-scope { font-size: var(--fs-sm); color: var(--ink-3); }

.composer {
  border: 1px solid var(--border-strong); border-radius: var(--r-lg);
  background: rgba(20, 33, 30, .86);
  box-shadow: var(--shadow-pop);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.composer::before { display: none; }
.composer:focus-within {
  border-color: var(--accent-line); transform: none;
  box-shadow: var(--shadow-pop), 0 0 0 4px rgba(220, 170, 120, .08);
}
.composer-home { width: min(100%, 780px); margin-top: 36px; padding: 22px 24px 16px; }
.composer-caption { font-size: var(--fs-md); color: var(--ink-1); font-weight: 500; }
.profile-trigger {
  padding: 5px 12px; border: 1px solid var(--border-strong); border-radius: 999px;
  color: var(--ink-2); font-size: var(--fs-xs);
}
.profile-trigger:hover { border-color: var(--accent-line); color: var(--accent-strong); }
.profile-trigger span { color: var(--ink-4); }
.composer textarea { font-size: 16px; color: var(--ink-1); }
.composer textarea::placeholder { color: var(--ink-4); }
.composer-bottom { border-top-color: var(--border); }
.mode-select-label {
  padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; background: rgba(255, 255, 255, .025);
}
.mode-indicator { display: none; }
.mode-select-label select { font-size: var(--fs-sm); color: var(--ink-1); }
.composer-hint { font-size: var(--fs-xs); color: var(--ink-4); }
.send-shortcut { font-size: var(--fs-xs); color: var(--ink-4); }
.send-button {
  width: 40px; height: 40px; border: 0; border-radius: 12px; color: var(--accent-ink);
  background: var(--accent); box-shadow: none;
}
.send-button::before { display: none; }
.send-button:hover { background: var(--accent-strong); box-shadow: none; transform: none; }
.project-context-bar { font-size: var(--fs-sm); border-radius: var(--r-sm); }
.project-context-bar button { font-size: var(--fs-sm); }

/* Example questions: a quiet row of chips under the composer */
.starter-section { width: min(100%, 780px); margin-top: 22px; }
.starter-heading { display: block; margin-bottom: 10px; font-size: var(--fs-xs); color: var(--ink-3); }
.starter-grid { display: flex; flex-wrap: wrap; gap: 8px; border: 0; background: none; }
.starter-grid .starter-card {
  display: inline-flex; flex-direction: row; align-items: center; gap: 8px; min-height: 0;
  padding: 7px 14px; border: 1px solid var(--border); border-radius: 999px;
  color: var(--ink-2); background: rgba(255, 255, 255, .02); box-shadow: none; font-size: var(--fs-sm);
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.starter-grid .starter-card::after { display: none; }
.starter-grid .starter-card:hover { border-color: var(--accent-line); color: var(--ink-1); background: var(--accent-soft); transform: none; box-shadow: none; }
.starter-grid .starter-arrow { position: static; color: var(--ink-4); font-size: var(--fs-xs); transform: none; }
.starter-grid .starter-card:hover .starter-arrow { color: var(--accent-strong); transform: translateX(2px); }

.knowledge-ribbon {
  gap: 28px; margin: 64px 0 10px; padding: 18px 0 0; max-width: 780px;
  border: 0; border-top: 1px solid var(--border); border-radius: 0; background: none;
}
.knowledge-ribbon > div { flex: 0 0 auto; gap: 8px; padding: 0; border: 0; }
.knowledge-ribbon strong { color: var(--ink-2); font-size: 18px; }
.knowledge-ribbon span { color: var(--ink-4); font-size: var(--fs-xs); }
.knowledge-ribbon button {
  margin-left: auto; padding: 4px 0; border-radius: 0;
  color: var(--accent-strong); font-size: var(--fs-sm); white-space: nowrap;
}
.knowledge-ribbon button:hover { background: none; text-decoration: underline; text-underline-offset: 4px; }
.knowledge-ribbon button span { margin-left: 6px; }
.service-notice, .service-notice p { font-size: var(--fs-xs); color: var(--ink-4); }
.pending-task-notice { font-size: var(--fs-sm); border-radius: 0 var(--r-sm) var(--r-sm) 0; }

/* ---------- Conversation ---------- */
.conversation-toolbar { gap: 10px; padding-bottom: 16px; margin-bottom: 24px; }
.conversation-toolbar > span {
  padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; color: var(--ink-2); font-size: var(--fs-xs);
}
.conversation-toolbar .profile-trigger { border-style: solid; }
.conversation-heading { padding-bottom: 20px; margin-bottom: 8px; }
.conversation-kicker { color: var(--ink-3); font-size: 11px; }
.conversation-heading p { max-width: 820px; font-size: 22px; color: var(--ink-1); text-wrap: pretty; }
.reset-link { color: var(--ink-3); font-size: var(--fs-sm); }
/* the heading already shows the opening question; don't repeat it as the first bubble */
.message-list > .chat-turn:first-child > .user-question { display: none; }
.message-list { gap: 28px; }
.user-question {
  max-width: min(78%, 720px); padding: 12px 16px;
  border: 1px solid rgba(159, 198, 169, .16); border-radius: 14px 14px 4px 14px;
  color: var(--ink-1); background: linear-gradient(160deg, rgba(64, 92, 76, .45), rgba(46, 70, 58, .45));
  font-size: var(--fs-body); line-height: 1.8;
}

.answer-card {
  padding: 28px 32px; border: 1px solid var(--border); border-radius: var(--r-lg);
  background: linear-gradient(170deg, rgba(24, 39, 35, .92), rgba(16, 27, 24, .96));
  box-shadow: var(--shadow-card);
}
.answer-card::before { left: 32px; width: 64px; height: 2px; top: -1px; border-radius: 2px; }
.answer-label { gap: 10px; color: var(--ink-1); font-size: var(--fs-md); letter-spacing: .02em; }
.answer-label .mini-mark {
  width: 28px; height: 28px; border: 0; color: var(--accent-ink);
  background: linear-gradient(160deg, var(--accent-strong), var(--accent)); font-size: var(--fs-sm); font-weight: 700;
}
.answer-mode {
  padding: 3px 10px; border-color: var(--accent-line); border-radius: 999px;
  color: var(--accent-strong); background: var(--accent-soft); font-size: var(--fs-xs);
}
.answer-context { margin: 2px 0 18px 38px; color: var(--ink-4); font-size: var(--fs-xs); }
.answer-outline {
  gap: 6px; padding: 0 0 18px; margin-bottom: 20px;
}
.answer-outline button {
  padding: 5px 12px; border: 1px solid var(--border); border-radius: 999px;
  color: var(--ink-2); background: rgba(255, 255, 255, .02); font-size: var(--fs-xs);
}
.answer-outline button:hover { border-color: var(--accent-line); color: var(--accent-strong); background: var(--accent-soft); }
.assessment-strip { gap: 8px; font-size: var(--fs-xs); color: var(--ink-3); }
.assessment-strip span { padding: 3px 10px; border-radius: 999px; background: var(--sage-soft); color: var(--sage); }

.answer-content { color: var(--ink-2); font-size: var(--fs-body); line-height: 1.95; }
.answer-content p { max-width: 76ch; }
.answer-content strong { color: var(--ink-1); }
.answer-content h2 {
  position: relative; margin: 32px 0 12px; padding: 20px 0 0 14px;
  border-top: 1px solid var(--border); color: var(--ink-1); font-size: 20px; line-height: 1.6;
}
.answer-content h2::before {
  position: absolute; left: 0; top: 27px; width: 3px; height: 18px; border-radius: 2px;
  background: var(--accent); content: "";
}
.answer-content h2:first-child { padding-top: 0; }
.answer-content h2:first-child::before { top: 7px; }
.answer-content h3 { margin: 22px 0 10px; color: var(--accent-strong); font-size: var(--fs-lg); }
.answer-content li { padding-left: 4px; }
.answer-content blockquote {
  margin: 20px 0; padding: 12px 18px; border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--ink-2); background: var(--accent-soft);
}
.answer-content code { border-radius: 4px; }
.inline-source {
  padding: 0 6px; margin: 0 2px; border-radius: 999px; vertical-align: 1px;
  color: var(--accent-strong); background: var(--accent-soft); font-size: 12px; font-weight: 600;
}
.inline-source:hover { color: var(--accent-ink); background: var(--accent); }
.answer-table-wrap { border-color: var(--border); border-radius: var(--r-md); }
.answer-table { font-size: var(--fs-sm); }
.answer-table th, .answer-table td { border-color: var(--border); }
.answer-table th { color: var(--ink-1); background: rgba(255, 255, 255, .04); font-weight: 600; }
.answer-table tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .015); }
.answer-table tbody tr:hover td { background: rgba(220, 170, 120, .05); }
.answer-notice {
  margin-top: 22px; padding: 12px 16px; border-left: 0; border: 1px solid rgba(220, 170, 120, .2);
  border-radius: var(--r-sm); color: #d9bf9f; background: rgba(220, 170, 120, .06); font-size: var(--fs-sm);
}

.sources-section { margin-top: 30px; padding-top: 4px; border-top: 1px solid var(--border); }
.sources-heading h2 { color: var(--ink-1); font-size: var(--fs-md); font-weight: 600; }
.sources-heading > span { color: var(--ink-4); font-size: var(--fs-xs); }
.source-detail {
  margin-bottom: 8px; border: 1px solid var(--border); border-radius: var(--r-md);
  background: rgba(255, 255, 255, .015); transition: border-color .2s ease, background .2s ease;
}
.source-detail:hover, .source-detail[open] { border-color: var(--border-strong); background: rgba(255, 255, 255, .03); }
.source-summary { grid-template-columns: 36px minmax(0, 1fr) auto; padding: 14px 40px 14px 14px; border-radius: var(--r-md); }
.source-summary:hover { background: transparent; }
.source-summary::after { top: 22px; right: 18px; }
.source-index {
  display: grid; width: 30px; height: 22px; place-items: center; border-radius: 999px;
  color: var(--accent-strong); background: var(--accent-soft); font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 600;
}
.source-title { color: var(--ink-1); font-size: var(--fs-md); font-weight: 500; }
.source-excerpt { color: var(--ink-3); font-size: var(--fs-sm); }
.source-review {
  align-self: center; padding: 2px 8px; border-radius: 999px; color: var(--sage); background: var(--sage-soft); font-size: var(--fs-xs);
}
.source-body { padding: 0 18px 18px 64px; font-size: var(--fs-sm); }
.source-metadata { border-color: var(--border); border-radius: var(--r-sm); font-size: var(--fs-sm); }
.source-metadata dt { color: var(--ink-4); }
.source-metadata dd { color: var(--ink-2); }
.source-text { color: var(--ink-2); font-size: var(--fs-sm); }
.source-subheading { color: var(--ink-1); font-size: var(--fs-sm); }
.source-citations, .source-locator { font-size: var(--fs-sm); }
.source-empty { font-size: var(--fs-sm); }
.policy-answer-note { font-size: var(--fs-sm); color: var(--ink-3); }

.answer-followups { gap: 10px; margin-top: 24px; }
.followup-question {
  position: relative; padding: 9px 16px 9px 32px; border: 1px solid var(--border-strong); border-radius: 999px;
  color: var(--ink-2); background: rgba(255, 255, 255, .02); font-size: var(--fs-sm);
}
.followup-question::before { position: absolute; left: 14px; color: var(--accent); content: "↳"; }
.followup-question:hover { border-color: var(--accent-line); color: var(--ink-1); background: var(--accent-soft); }
.answer-actions { gap: 6px; margin-top: 22px; padding-top: 16px; }
.answer-actions .quiet-button { border-color: var(--border); }
.answer-actions .quiet-button:hover { border-color: var(--accent-line); }

.answer-loading { padding: 26px 32px; }
.loading-title { color: var(--ink-1); font-size: var(--fs-md); }
.loading-message { color: var(--ink-3); font-size: var(--fs-sm); }
.analysis-stages li { color: var(--ink-4); font-size: var(--fs-sm); }
.analysis-stages li::before { width: 9px; height: 9px; top: -5px; background: var(--surface-1); }
.loading-foot { color: var(--ink-4); font-size: var(--fs-xs); }
.loading-line { height: 8px; border-radius: 4px; }
.request-error { border-radius: var(--r-md); font-size: var(--fs-md); }
/* Streaming final answer: visibly provisional until the checked answer replaces it */
.answer-streaming { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.streaming-note {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 4px 12px;
  border: 1px solid var(--accent-line); border-radius: 999px; color: var(--accent-strong);
  background: var(--accent-soft); font-size: var(--fs-xs);
}
.streaming-note::before {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent); content: "";
  animation: waiting-pulse 1.4s ease-in-out infinite;
}
.answer-streaming .answer-content { opacity: .9; }
.answer-streaming .answer-content > :last-child::after {
  display: inline-block; width: .5em; margin-left: 2px; color: var(--accent); content: "▍";
  animation: waiting-pulse 1s steps(2) infinite;
}

.composer-followup { margin-top: 28px; padding: 16px 18px 12px; border-radius: var(--r-lg); }
.composer-followup textarea { font-size: var(--fs-body); }
.followup-scope { color: var(--ink-3); font-size: var(--fs-xs); }
.followup-mode { border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px; font-size: var(--fs-xs); background: rgba(255, 255, 255, .025); }
.conversation-disclaimer, .session-note { color: var(--ink-4); font-size: var(--fs-xs); }

/* ---------- Library & archive ---------- */
.library-heading h1 { color: var(--ink-1); }
.library-heading h1 em, .project-drawer h2 em { color: var(--accent-strong); }
.library-heading p { color: var(--ink-3); font-size: var(--fs-md); }
.library-heading .return-to-chat { border: 1px solid var(--border); }
.library-tabs {
  display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 24px;
  border: 1px solid var(--border); border-radius: 999px; background: rgba(255, 255, 255, .02);
}
.library-tabs button {
  padding: 7px 18px; border: 0; border-radius: 999px; color: var(--ink-3); font-size: var(--fs-sm);
}
.library-tabs button:hover { color: var(--ink-1); }
.library-tabs button[aria-selected=true] { color: var(--accent-ink); background: var(--accent); }
.library-search {
  border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface-2);
  box-shadow: var(--shadow-card); transition: border-color .2s ease, box-shadow .2s ease;
}
.library-search:focus-within { border-color: var(--accent-line); box-shadow: var(--shadow-card), 0 0 0 4px rgba(220, 170, 120, .08); }
.library-search input { padding: 15px 18px; font-size: var(--fs-body); outline: 0; }
.library-search input::placeholder { color: var(--ink-4); }
.library-search button {
  margin: 6px; padding: 8px 20px; border: 0; border-radius: var(--r-sm);
  color: var(--accent-ink); background: var(--accent); font-size: var(--fs-sm); font-weight: 600;
}
.library-search button:hover { background: var(--accent-strong); }
.library-filter label { color: var(--ink-3); font-size: var(--fs-sm); }
.library-filter select {
  padding: 7px 26px 7px 12px; border: 1px solid var(--border); border-radius: var(--r-sm);
  color: var(--ink-1); background-color: var(--surface-2); font-size: var(--fs-sm);
}
.library-filter > span { color: var(--ink-3); font-size: var(--fs-sm); }
.library-notice { color: var(--ink-4); font-size: var(--fs-sm); }
.library-results { gap: 14px; }
.knowledge-item {
  padding: 22px 24px; border: 1px solid var(--border); border-radius: var(--r-md);
  background: linear-gradient(170deg, rgba(26, 42, 37, .7), rgba(17, 29, 26, .7));
  transition: border-color .2s ease, transform .2s var(--ease);
}
.knowledge-item:hover { border-color: var(--border-strong); }
.knowledge-item .item-meta { gap: 8px; color: var(--ink-4); font-size: var(--fs-xs); flex-wrap: wrap; }
.knowledge-item .item-meta span:first-child {
  padding: 2px 9px; border-radius: 999px; color: var(--accent-strong); background: var(--accent-soft);
}
.knowledge-item h2 { margin: 12px 0 8px; color: var(--ink-1); font-size: var(--fs-lg); font-weight: 600; }
.knowledge-item p { color: var(--ink-2); font-size: var(--fs-md); }
.knowledge-item .item-limit { color: var(--ink-3); font-size: var(--fs-sm); }
.knowledge-item details summary { color: var(--accent-strong); font-size: var(--fs-sm); }
.knowledge-item details a { color: var(--ink-2); font-size: var(--fs-sm); }
.item-actions { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--border); }
.item-actions small { color: var(--ink-4); font-size: var(--fs-xs); }
.item-actions button { font-size: var(--fs-sm); }
.policy-overview { border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--r-md); }
.policy-eyebrow { font-size: 11px; }
.policy-overview p { color: var(--ink-2); font-size: var(--fs-sm); }
.policy-overview .policy-scope-note { color: var(--ink-3); font-size: var(--fs-xs); }
.policy-overview-stats span { font-size: var(--fs-xs); }
.policy-shortcuts .quiet-button {
  padding: 5px 12px; border: 1px solid var(--border); border-radius: 999px; font-size: var(--fs-xs);
}
.policy-badge { border-radius: 999px; font-size: var(--fs-xs); }
.policy-card-ribbon, .knowledge-item .policy-locator, .policy-metadata, .policy-excerpt-label { font-size: var(--fs-sm); }
.library-pager { font-size: var(--fs-sm); color: var(--ink-3); }
.library-pager .quiet-button { border: 1px solid var(--border); }
.empty-state { color: var(--ink-3); font-size: var(--fs-md); border: 1px dashed var(--border-strong); border-radius: var(--r-md); }
.archive-reading { border-radius: var(--r-lg); background: rgba(255, 255, 255, .015); }

/* ---------- Project drawer & record ---------- */
.drawer-backdrop { background: rgba(4, 10, 8, .62); }
.project-drawer {
  width: min(500px, 100%); padding: 32px 36px;
  border-left: 1px solid var(--border-strong); background: var(--surface-1); box-shadow: -30px 0 80px rgba(0, 0, 0, .45);
}
.project-drawer h2 { margin: 24px 0 10px; font-size: 30px; color: var(--ink-1); }
.project-drawer > p { color: var(--ink-3); font-size: var(--fs-sm); }
.project-drawer form > label { gap: 8px; color: var(--ink-2); font-size: var(--fs-sm); font-weight: 500; }
.project-drawer input, .project-drawer select, .project-drawer textarea {
  padding: 11px 13px; border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  color: var(--ink-1); background: var(--surface-0); font-size: var(--fs-md);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.project-drawer input:focus, .project-drawer select:focus, .project-drawer textarea:focus {
  border-color: var(--accent-line); outline: 0; box-shadow: 0 0 0 3px rgba(220, 170, 120, .1);
}
.project-drawer input::placeholder, .project-drawer textarea::placeholder { color: var(--ink-4); }
.project-drawer .drawer-note { color: var(--ink-4); font-size: var(--fs-xs); }
.close-drawer { width: 36px; height: 36px; border-radius: 50%; font-size: 22px; color: var(--ink-3); }
.close-drawer:hover { color: var(--ink-1); background: rgba(255, 255, 255, .06); }
.record-eyebrow { font-size: 11px; }
.record-summary-meta, .condition-badge, .condition-footer, .condition-footer .quiet-button,
.condition-history-item small, .work-owner, .parallel-note span { font-size: var(--fs-xs); }
.condition-badge { border-radius: 999px; }

/* ---------- Footer & toast ---------- */
.site-footer { padding: 18px clamp(20px, 4vw, 56px); color: var(--ink-4); font-size: var(--fs-xs); letter-spacing: .04em; }
.site-footer .quiet-button { color: var(--ink-3); font-size: var(--fs-xs); }
.toast {
  padding: 12px 18px; border: 1px solid var(--border-strong); border-radius: var(--r-md);
  color: var(--ink-1); background: rgba(32, 51, 46, .96); box-shadow: var(--shadow-pop);
  font-size: var(--fs-sm); backdrop-filter: blur(12px);
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .workspace-nav { gap: 2px; }
  .nav-link { padding: 6px 11px; }
}
@media (max-width: 720px) {
  .topbar { height: 58px; padding: 0 16px; }
  .brand-name { font-size: 16px; }
  .workspace-nav { padding: 3px; }
  .nav-link { padding: 5px 10px; font-size: var(--fs-xs); }
  .main-shell { padding: 0 16px; }
  .welcome-screen { padding-top: 36px; }
  .welcome-screen h1 { font-size: 38px; }
  .hero-copy { font-size: var(--fs-md); }
  .composer-home { padding: 14px; border-radius: 14px; }
  .composer textarea { font-size: var(--fs-md); }
  .composer-home { margin-top: 28px; }
  .starter-grid .starter-card { font-size: var(--fs-xs); padding: 6px 12px; }
  .knowledge-ribbon { flex-wrap: wrap; gap: 14px 22px; margin-top: 44px; }
  .knowledge-ribbon button { margin-left: 0; flex-basis: 100%; text-align: left; }
  .hero-map { margin-top: -20px; }
  .service-notice p, .knowledge-ribbon span { font-size: var(--fs-xs); }
  .site-footer { font-size: var(--fs-xs); }
  .conversation-heading p { font-size: 18px; }
  .user-question { max-width: 92%; font-size: var(--fs-md); }
  .answer-card { padding: 20px 16px; border-radius: 14px; }
  .answer-card::before { left: 16px; }
  .answer-context { margin-left: 0; }
  .answer-content { font-size: var(--fs-md); }
  .answer-outline button, .conversation-toolbar .quiet-button, .answer-actions .quiet-button { font-size: var(--fs-xs); }
  .source-body { padding: 0 14px 14px; }
  .library-tabs { display: flex; width: 100%; }
  .library-tabs button { flex: 1; padding: 7px 8px; font-size: var(--fs-xs); }
  .library-search input { font-size: var(--fs-md); }
  .knowledge-item { padding: 18px; }
  .knowledge-item p { font-size: var(--fs-sm); }
  .project-drawer { padding: 24px 20px; }
}
@media print {
  .topbar { position: static; }
  .message-list > .chat-turn:first-child > .user-question { display: block; }
}

/* =====================================================================
 * 2026-10-12 refinement: fewer decorations, one display face, reading layout
 * ===================================================================== */

/* Display face: Noto Serif SC (SIL OFL 1.1), subset to the fixed interface headings only.
   Text that varies (questions, answer headings) uses the system sans so glyphs never mix fonts. */
@font-face { font-family: "Qiankun Serif"; src: url("fonts/qiankun-serif-500.woff") format("woff"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "Qiankun Serif"; src: url("fonts/qiankun-serif-700.woff") format("woff"); font-weight: 700 900; font-display: swap; }
:root { --font-display: "Qiankun Serif", "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif; }
.brand-name, .library-heading h1, .project-drawer h2, .policy-overview h2, .empty-state strong { font-family: var(--font-display); }
.conversation-heading p, .answer-title, .answer-content h2, .work-package-title, .archive-reading h2 { font-family: var(--font-sans); font-weight: 600; }

/* Logo: 乾 ☰ beside 坤 ☷ */
.brand-mark { display: block; width: 26px; height: 26px; padding: 0; border: 0; transform: none; }
.brand-mark::before { display: none; }
.mark-qian { fill: var(--accent); }
.mark-kun { fill: var(--ink-2); }

/* Retired decorations */
.page-grain, .ambient, .hero-art, .hero-coordinate, .edition, .live-dot, .context-pulse, .lens-orbit, .lens-sheen { display: none !important; }
.answer-card::before, .composer-followup::before { display: none; }
.conversation-kicker { gap: 0; color: var(--ink-3); font-size: var(--fs-xs); font-weight: 500; letter-spacing: .08em; }
.conversation-kicker i { display: none; }
.policy-eyebrow, .record-eyebrow { font-size: 11px; letter-spacing: .1em; }

/* Reading layout: answer on the left, outline and sources beside it on wide screens */
.answer-layout { display: flex; flex-direction: column; }
.answer-aside { display: contents; }
.answer-aside .answer-outline { order: -1; }
.answer-main { order: 0; min-width: 0; }
.answer-aside .sources-section { order: 1; }
.aside-title { display: none; }
@media (min-width: 1180px) {
  .conversation-screen { width: min(100%, 1240px); }
  .answer-card { padding: 30px 34px; }
  .answer-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 36px; align-items: start; }
  .answer-aside {
    display: block; position: sticky; top: 84px; max-height: calc(100vh - 104px); overflow: auto;
    padding: 2px 4px 8px 26px; border-left: 1px solid var(--border); overscroll-behavior: contain;
  }
  .aside-title { display: block; width: 100%; margin-bottom: 6px; color: var(--ink-4); font-size: var(--fs-xs); letter-spacing: .08em; }
  .answer-aside .answer-outline { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 2px; margin: 0 0 18px; padding: 0 0 16px; }
  .answer-aside .answer-outline button {
    padding: 5px 10px; border: 0; border-left: 2px solid transparent; border-radius: 0 var(--r-sm) var(--r-sm) 0;
    background: none; text-align: left; line-height: 1.5;
  }
  .answer-aside .answer-outline button:hover { border-left-color: var(--accent); background: var(--accent-soft); }
  .answer-aside .sources-section { margin-top: 0; padding-top: 0; border-top: 0; }
  .answer-aside .sources-heading { flex-direction: column; gap: 2px; padding: 0 0 10px; }
  .answer-aside .source-summary { grid-template-columns: 34px minmax(0, 1fr); padding: 12px 34px 12px 12px; }
  .answer-aside .source-review { grid-column: 2; justify-self: start; }
  .answer-aside .source-excerpt { -webkit-line-clamp: 3; }
  .answer-aside .source-body { padding: 0 12px 14px; }
  .answer-aside .source-metadata { grid-template-columns: 1fr; gap: 2px; }
  .answer-aside .source-metadata dd { margin-bottom: 6px; }
  .answer-main .answer-content p { max-width: 72ch; }
}

/* Paper reading mode: answers on warm paper; the rest of the page stays dark */
[data-reading="paper"] :is(.answer-card, .answer-loading) {
  --ink-1: #1d2520; --ink-2: #333d37; --ink-3: #59645d; --ink-4: #7b857f;
  --border: rgba(29, 45, 37, .12); --border-strong: rgba(29, 45, 37, .2);
  --accent: #a3622f; --accent-strong: #8a4f22; --accent-ink: #fffaf2;
  --accent-soft: rgba(163, 98, 47, .09); --accent-line: rgba(163, 98, 47, .32);
  --sage: #3b7552; --sage-soft: rgba(59, 117, 82, .1);
  color: var(--ink-2); background: #f6f2e8; border-color: rgba(29, 45, 37, .1);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 18px 50px rgba(0, 0, 0, .35);
}
[data-reading="paper"] .answer-card :is(p, li, dd, span, small, td, h3, h4, summary, blockquote, label, .project-record-summary, .project-record-summary *) { color: var(--ink-2); }
[data-reading="paper"] .answer-card :is(strong, th, h2, .answer-label, .source-title, .condition-heading h3, .condition-value, .work-step h4, .work-package-title) { color: var(--ink-1); }
[data-reading="paper"] .answer-card :is(dt, .answer-context, .sources-heading > span, .item-meta, .condition-footer, .work-owner, .record-eyebrow, .source-excerpt) { color: var(--ink-4); }
[data-reading="paper"] .answer-card :is(.answer-content h3, .source-link, .source-index, .section-index, .inline-source, .answer-mode, .streaming-note, .record-tabs button[aria-selected=true]) { color: var(--accent-strong); }
[data-reading="paper"] .answer-card .answer-label .mini-mark { color: var(--accent-ink); }
[data-reading="paper"] .answer-card .source-review, [data-reading="paper"] .answer-card .assessment-strip span { color: var(--sage); }
[data-reading="paper"] .answer-card :is(.project-record, .source-metadata, .answer-content code, .policy-original-quote, .record-callout, .parallel-note) {
  border-color: var(--border); background: rgba(29, 45, 37, .035);
}
[data-reading="paper"] .answer-card .answer-notice { color: #7a5426; border-color: rgba(163, 98, 47, .25); background: rgba(163, 98, 47, .06); }
[data-reading="paper"] .answer-card .answer-table th { background: rgba(29, 45, 37, .05); }
[data-reading="paper"] .answer-card .answer-table tbody tr:nth-child(even) td { background: rgba(29, 45, 37, .02); }
[data-reading="paper"] .answer-card .source-summary::after { border-color: var(--ink-4); }
[data-reading="paper"] .answer-card .quiet-button:hover, [data-reading="paper"] .answer-card .followup-question:hover { color: var(--accent-strong); }
[data-reading="paper"] .answer-card .quiet-button { color: var(--ink-2); }
[data-reading="paper"] .answer-aside { border-left-color: var(--border); }
#paperModeButton { border: 1px solid var(--border); }
#paperModeButton[aria-pressed="true"] { color: var(--accent-strong); border-color: var(--accent-line); }

@media print {
  .answer-layout { display: block; }
  .answer-aside { position: static; max-height: none; overflow: visible; border: 0; padding: 0; }
  .answer-aside .answer-outline, .hero-map { display: none; }
}