/* Mosse tokens define the visual language; better-layout and better-ui guide structure and feedback. */
:root {
  --knowledge-sidebar: 14rem;
  --knowledge-gutter: var(--sp-8);
  --knowledge-control: var(--sp-10);
  --knowledge-motion: 150ms;
  --knowledge-wordmark: 1.75rem;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-sans); color: var(--text); font-size: var(--fs-md); background: var(--canvas); line-height: var(--lh-base); -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button { cursor: pointer; border: 0; background: none; color: inherit; -webkit-tap-highlight-color: transparent; }
button:disabled { opacity: .45; cursor: not-allowed; }
button, input, select { outline: none; }
button:focus-visible, input:focus-visible, [tabindex]:focus-visible, a:focus-visible { outline: var(--sp-0-5) solid var(--ring-color); outline-offset: var(--sp-0-5); }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
svg { width: var(--sp-5); height: var(--sp-5); stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
[data-icon] { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.app-shell { display: flex; min-height: 100dvh; }
.sidebar { position: fixed; inset-block: 0; inset-inline-start: 0; width: var(--knowledge-sidebar); background: var(--sidebar); padding: var(--sp-8) var(--sp-3) var(--sp-4); border-inline-end: var(--sp-px) solid var(--border); display: flex; flex-direction: column; z-index: 10; overflow-y: auto; }
.wordmark { display: flex; align-items: center; gap: var(--sp-1); font-size: var(--knowledge-wordmark); letter-spacing: -.055em; font-weight: var(--fw-semibold); line-height: 1; padding-inline-start: var(--sp-3); width: fit-content; }
.brand-dot { display: inline-block; width: var(--sp-1-5); height: var(--sp-1-5); border-radius: var(--r-full); background: var(--accent); margin-block-start: var(--sp-4); }
.product-label { font-size: var(--fs-sm); color: var(--muted); margin: var(--sp-3) var(--sp-3) var(--sp-8); display: flex; align-items: center; gap: var(--sp-2); }
.product-label span { font-size: var(--fs-xs); background: var(--surface-3); border-radius: var(--r-xs); padding: 0 var(--sp-1-5); }
.space-card { display: flex; gap: var(--sp-3); align-items: center; padding: var(--sp-3); margin-block-end: var(--sp-6); min-width: 0; }
.space-card > div { min-width: 0; }
.space-icon { width: var(--sp-8); height: var(--sp-8); background: var(--surface-2); border-radius: var(--r-sm); color: var(--muted); }
.space-card strong { font-size: var(--fs-base); font-weight: var(--fw-medium); overflow-wrap: anywhere; }
.space-card small, .profile small { display: block; font-size: var(--fs-sm); color: var(--muted); }
.nav-item { display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: var(--knowledge-control); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); color: var(--muted); font-size: var(--fs-base); margin-block-end: var(--sp-1); text-align: start; }
.nav-item.active { background: var(--surface-3); font-weight: var(--fw-medium); color: var(--text); }
.nav-item.active > [data-icon] { color: var(--accent-fg); }
.nav-count { margin-inline-start: auto; font-size: var(--fs-sm); min-width: var(--sp-5); text-align: center; color: var(--muted); font-variant-numeric: tabular-nums; }
.sidebar-bottom { margin-block-start: auto; }
.mini-guide { margin: var(--sp-8) var(--sp-3); color: var(--muted); }
.mini-guide strong { display: block; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text); }
.mini-guide p { margin: var(--sp-2) 0 0; line-height: var(--lh-base); font-size: var(--fs-xs); }
.profile { width: 100%; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); text-align: start; font-size: var(--fs-base); border-radius: var(--r-sm); }
.profile > [data-icon] { margin-inline-start: auto; color: var(--muted); }
.avatar { width: var(--sp-8); height: var(--sp-8); display: grid; place-items: center; border-radius: var(--r-full); background: var(--surface-3); color: var(--muted); font-size: var(--fs-sm); flex-shrink: 0; }
.main-shell { margin-inline-start: var(--knowledge-sidebar); width: calc(100% - var(--knowledge-sidebar)); min-width: 0; }
.topbar { min-height: var(--sp-14); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-2) var(--knowledge-gutter); border-block-end: var(--sp-px) solid var(--border); }
.breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--muted); min-width: 0; overflow-wrap: anywhere; }
.breadcrumb strong { font-weight: var(--fw-medium); color: var(--text); }
.crumb-slash { color: var(--text-faint); }
.top-actions { display: flex; align-items: center; gap: var(--sp-4); flex-shrink: 0; }
.connection-state { display: flex; align-items: center; gap: var(--sp-1-5); font-size: var(--fs-sm); color: var(--muted); }
.connection-state i { width: var(--sp-1-5); height: var(--sp-1-5); border-radius: var(--r-full); background: var(--ok); }
.connection-state[data-state="demo"] i { background: var(--muted); }
.connection-state[data-state="error"] i { background: var(--danger-text); }
.icon-button { width: var(--knowledge-control); min-height: var(--knowledge-control); border: var(--sp-px) solid var(--border-strong); border-radius: var(--r-sm); display: inline-flex; justify-content: center; align-items: center; color: var(--muted); flex-shrink: 0; }
.icon-button svg { width: var(--sp-4); height: var(--sp-4); }
main { container-type: inline-size; container-name: knowledge; padding: var(--sp-8) var(--knowledge-gutter) var(--sp-10); margin: 0; }
.view, .page-heading > div { min-width: 0; }
.page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-6); margin-block-end: var(--sp-8); }
h1 { font-size: var(--fs-2xl); line-height: var(--lh-tight); letter-spacing: -.03em; font-weight: var(--fw-semibold); margin: 0 0 var(--sp-2); }
.page-heading p { margin: 0; color: var(--muted); font-size: var(--fs-md); }
.primary, .secondary { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); font-size: var(--fs-base); border-radius: var(--r-sm); min-height: var(--knowledge-control); padding: var(--sp-2) var(--sp-4); font-weight: var(--fw-medium); flex-shrink: 0; }
.primary { background: var(--action); color: var(--action-fg); }
.primary svg, .secondary svg { width: var(--sp-4); height: var(--sp-4); }
.secondary { background: var(--canvas); border: var(--sp-px) solid var(--border-control); }
.stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); margin-block-end: var(--sp-8); }
.stat { min-width: 0; }
.stat-label { display: flex; align-items: center; gap: var(--sp-2); color: var(--muted); font-size: var(--fs-sm); }
.stat-label > [data-icon] { display: none; }
.stat-value { font-size: var(--fs-xl); font-weight: var(--fw-semibold); line-height: var(--lh-tight); margin: var(--sp-2) 0 var(--sp-1); font-variant-numeric: tabular-nums; }
.stat small { font-size: var(--fs-sm); color: var(--muted); display: block; }
.upload-zone { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-4); border: var(--sp-px) dashed var(--border-field); background: var(--surface-1); padding: var(--sp-6); border-radius: var(--r-lg); cursor: pointer; margin-block-end: var(--sp-8); }
.upload-zone.dragging { background: var(--accent-soft); border-color: var(--accent); }
.upload-zone[aria-disabled="true"] { cursor: progress; }
.upload-icon { width: var(--sp-10); height: var(--sp-10); color: var(--accent-fg); }
.upload-icon svg { width: var(--sp-6); height: var(--sp-6); }
.upload-copy { min-width: 0; flex: 1; }
.upload-copy strong { font-size: var(--fs-md); font-weight: var(--fw-medium); }
.upload-copy strong span { color: var(--accent-fg); margin-inline-start: var(--sp-1-5); text-decoration: underline; text-underline-offset: var(--sp-0-5); }
.upload-copy p { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); color: var(--muted); }
.upload-tag { margin-inline-start: auto; display: flex; gap: var(--sp-1-5); align-items: center; color: var(--muted); font-size: var(--fs-sm); }
.upload-tag svg { width: var(--sp-4); height: var(--sp-4); }
.list-toolbar { display: flex; justify-content: space-between; align-items: center; margin-block-end: var(--sp-4); gap: var(--sp-4); flex-wrap: wrap; }
.section-title { font-size: var(--fs-md); font-weight: var(--fw-medium); display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.section-title > span { font-size: var(--fs-sm); color: var(--muted); font-weight: var(--fw-normal); font-variant-numeric: tabular-nums; }
.list-controls { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.search-field { display: flex; align-items: center; gap: var(--sp-2); border: var(--sp-px) solid var(--border-field); border-radius: var(--r-sm); min-height: var(--knowledge-control); padding-inline: var(--sp-3); background: var(--surface-1); min-width: 0; }
.search-field:focus-within { outline: var(--sp-0-5) solid var(--ring-color); outline-offset: var(--sp-0-5); }
.search-field svg { width: var(--sp-4); height: var(--sp-4); color: var(--subtle); }
input { border: var(--sp-px) solid var(--border-field); border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3); background: var(--field-bg); color: var(--text); min-height: var(--knowledge-control); }
input::placeholder { color: var(--subtle); }
.search-field input { border: 0; width: 11rem; min-width: 0; font-size: var(--fs-base); padding: 0; background: transparent; }
.search-field input:focus-visible { outline: none; }
.table-wrap { border-block-start: var(--sp-px) solid var(--border); }
table { width: 100%; border-collapse: collapse; text-align: start; table-layout: fixed; }
th { font-size: var(--fs-sm); font-weight: var(--fw-normal); color: var(--muted); padding: var(--sp-3) var(--sp-3); border-block-end: var(--sp-px) solid var(--border); text-align: start; }
th:first-child { width: 44%; padding-inline-start: var(--sp-11); }
th:last-child { width: 5rem; padding-inline-end: 0; }
th:nth-child(2) { width: 18%; }
th:nth-child(3) { width: 12%; }
td { padding: var(--sp-4) var(--sp-3); border-block-end: var(--sp-px) solid var(--border); font-size: var(--fs-sm); color: var(--muted); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
td:first-child { padding-inline-start: 0; }
td:last-child { padding-inline-end: 0; text-align: end; }
.file-cell { display: flex; align-items: flex-start; gap: var(--sp-3); min-width: 0; }
.file-cell > div { min-width: 0; }
.file-symbol { flex-shrink: 0; width: var(--sp-8); min-height: var(--sp-10); border: var(--sp-px) solid var(--border); border-radius: var(--r-xs); display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--surface-1); color: var(--muted); }
.file-symbol svg { width: var(--sp-4); height: var(--sp-4); }
.file-symbol small { font-size: var(--fs-xs); line-height: var(--lh-tight); }
.file-name { color: var(--text); font-weight: var(--fw-medium); font-size: var(--fs-md); overflow-wrap: anywhere; }
.file-sub { font-size: var(--fs-sm); color: var(--muted); margin-block-start: var(--sp-1); overflow-wrap: anywhere; }
.badge { display: inline-flex; align-items: center; gap: var(--sp-1-5); border-radius: var(--r-xs); padding: var(--sp-0-5) var(--sp-2); font-size: var(--fs-sm); background: var(--surface-2); color: var(--muted); }
.badge i { width: var(--sp-1-5); height: var(--sp-1-5); border-radius: var(--r-full); background: currentColor; flex-shrink: 0; }
.badge.completed { background: var(--ok-soft); color: var(--ok-text); }
.badge.processing, .badge.pending, .badge.finalizing { background: var(--accent-soft); color: var(--accent-fg); }
.badge.failed, .badge.cancelled { background: var(--danger-soft); color: var(--danger-text); }
.text-button { font-size: var(--fs-sm); display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1-5); color: var(--accent-fg); padding: var(--sp-2); min-height: var(--knowledge-control); border-radius: var(--r-xs); }
.text-button svg { width: var(--sp-4); height: var(--sp-4); }
.list-footer { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); flex-wrap: wrap; font-size: var(--fs-sm); color: var(--muted); margin-block-start: var(--sp-4); font-variant-numeric: tabular-nums; }
.list-footer > div { display: flex; gap: var(--sp-2); }
.small-button { font-size: var(--fs-sm); border: var(--sp-px) solid var(--border-strong); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); min-height: var(--knowledge-control); }
.bottom-note { display: flex; align-items: flex-start; gap: var(--sp-2); margin-block-start: var(--sp-6); font-size: var(--fs-sm); color: var(--muted); }
.bottom-note svg { width: var(--sp-4); height: var(--sp-4); }
.empty { display: flex; align-items: center; flex-direction: column; gap: var(--sp-2); padding: var(--sp-12) var(--sp-4); color: var(--muted); text-align: center; }
.empty > [data-icon] { margin-block-end: var(--sp-2); }
.empty > strong { font-weight: var(--fw-medium); color: var(--text); font-size: var(--fs-md); }
.empty > p { font-size: var(--fs-base); margin: 0 0 var(--sp-2); max-width: 34rem; }
.empty .error-text { color: var(--danger-text); }
.demo-banner { padding: var(--sp-3) var(--knowledge-gutter); display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--muted); background: var(--surface-1); }
.demo-banner svg { width: var(--sp-4); height: var(--sp-4); }
.demo-banner strong { color: var(--text); font-weight: var(--fw-medium); }
.upload-queue { margin-block: calc(-1 * var(--sp-4)) var(--sp-8); padding: var(--sp-3) var(--sp-4); background: var(--surface-1); border-radius: var(--r-sm); }
.queue-row { display: flex; align-items: flex-start; gap: var(--sp-3); flex-wrap: wrap; font-size: var(--fs-sm); padding-block: var(--sp-1); }
.queue-row > span:nth-child(2) { min-width: 0; overflow-wrap: anywhere; }
.queue-row > span:last-child { margin-inline-start: auto; color: var(--muted); }
.queue-row .error-text { color: var(--danger-text) !important; }
.retrieval-form { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3); border: var(--sp-px) solid var(--border-field); border-radius: calc(var(--r-sm) + var(--sp-2) + var(--sp-px)); padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4); background: var(--surface-1); }
.retrieval-form > [data-icon] { color: var(--muted); }
.retrieval-form input { flex: 1; min-width: 10rem; border: 0; background: transparent; padding-inline: 0; }
.suggestions { display: flex; gap: var(--sp-2); align-items: center; margin-block: var(--sp-4) var(--sp-6); font-size: var(--fs-sm); color: var(--muted); flex-wrap: wrap; }
.suggestions button { border: var(--sp-px) solid var(--border-strong); border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3); color: var(--text); min-height: var(--knowledge-control); }
.retrieval-note { display: flex; gap: var(--sp-2); align-items: flex-start; color: var(--muted); font-size: var(--fs-sm); margin-block-end: var(--sp-8); }
.retrieval-note svg { width: var(--sp-4); height: var(--sp-4); }
.search-empty { margin-block: var(--sp-8); }
.results-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-block-end: var(--sp-4); font-size: var(--fs-sm); color: var(--muted); }
.result-card { border-block-start: var(--sp-px) solid var(--border); padding-block: var(--sp-6); }
.result-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3); flex-wrap: wrap; margin-block-end: var(--sp-4); }
.result-source { font-size: var(--fs-md); font-weight: var(--fw-medium); display: flex; align-items: flex-start; gap: var(--sp-2); min-width: 0; overflow-wrap: anywhere; }
.result-source svg { width: var(--sp-4); height: var(--sp-4); color: var(--accent-fg); }
.result-score { font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.result-content { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--fs-md); line-height: 1.85; color: var(--text); margin: 0; max-width: 70ch; }
.result-footer { font-size: var(--fs-sm); color: var(--muted); margin-block-start: var(--sp-4); overflow-wrap: anywhere; }
.connect-banner { background: var(--surface-1); border-radius: var(--r-lg); padding: var(--sp-6); display: flex; align-items: flex-start; flex-wrap: wrap; gap: var(--sp-4); margin-block-end: var(--sp-8); }
.connect-icon { width: var(--sp-8); height: var(--sp-8); color: var(--accent-fg); }
.connect-banner > div { flex: 1; min-width: 12rem; }
.connect-banner strong { font-size: var(--fs-md); font-weight: var(--fw-medium); }
.connect-banner p { font-size: var(--fs-base); margin: var(--sp-2) 0 0; color: var(--muted); }
.scope-chip { font-size: var(--fs-sm); display: flex; align-items: center; gap: var(--sp-1-5); margin-inline-start: auto; color: var(--muted); }
.scope-chip svg { width: var(--sp-4); height: var(--sp-4); }
.connect-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); gap: var(--sp-10); }
.connect-layout > div { min-width: 0; }
.section-description { font-size: var(--fs-base); color: var(--muted); margin: var(--sp-2) 0 var(--sp-4); }
.key-form { display: flex; align-items: center; gap: var(--sp-2); margin-block-end: var(--sp-4); }
.key-form input { width: 100%; min-width: 0; font-size: var(--fs-base); }
.key-row { padding-block: var(--sp-4); border-block-end: var(--sp-px) solid var(--border); display: flex; align-items: center; gap: var(--sp-3); }
.key-row .key-info { flex: 1; min-width: 0; }
.key-name { font-size: var(--fs-md); font-weight: var(--fw-medium); overflow-wrap: anywhere; }
.key-meta { font-size: var(--fs-sm); color: var(--muted); margin-block-start: var(--sp-1); font-variant-numeric: tabular-nums; }
.key-row .text-button { color: var(--muted); }
.key-list .empty { padding-block: var(--sp-6); }
.scope-note { display: flex; align-items: flex-start; gap: var(--sp-2); margin-block-start: var(--sp-6); color: var(--muted); }
.scope-note svg { width: var(--sp-4); height: var(--sp-4); }
.scope-note p { font-size: var(--fs-sm); margin: 0; }
.integration-card { border: var(--sp-px) solid var(--border); border-radius: var(--r-lg); overflow: hidden; min-width: 0; }
.tabs { display: flex; border-block-end: var(--sp-px) solid var(--border); padding-inline: var(--sp-5); gap: var(--sp-6); }
.tabs button { font-size: var(--fs-base); color: var(--muted); min-height: var(--sp-12); padding: var(--sp-2) 0; border-block-end: var(--sp-0-5) solid transparent; }
.tabs button.selected { font-weight: var(--fw-medium); color: var(--text); border-block-end-color: var(--accent); }
.integration-content { padding: var(--sp-5); }
.integration-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-2); }
.integration-heading strong { font-size: var(--fs-md); font-weight: var(--fw-medium); }
.integration-content > p { font-size: var(--fs-base); color: var(--muted); margin: var(--sp-2) 0 var(--sp-4); }
pre { font-family: var(--font-mono); background: var(--surface-1); padding: var(--sp-4); border-radius: var(--r-sm); font-size: var(--fs-sm); line-height: 1.8; overflow: auto; overscroll-behavior: contain; margin: 0; tab-size: 2; white-space: pre-wrap; overflow-wrap: anywhere; }
code { font-family: var(--font-mono); }
.endpoint-line { display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-sm); color: var(--muted); margin-block: var(--sp-5); }
.endpoint-line code { color: var(--text); overflow-wrap: anywhere; }
.integration-tip { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--muted); }
.integration-tip svg { width: var(--sp-4); height: var(--sp-4); }
.next-step { display: flex; align-items: flex-start; gap: var(--sp-3); margin-block-start: var(--sp-8); }
.next-step > [data-icon] { color: var(--accent-fg); }
.next-step strong { font-size: var(--fs-md); font-weight: var(--fw-medium); }
.next-step p { font-size: var(--fs-base); color: var(--muted); margin: var(--sp-2) 0 0; max-width: 70ch; }
.login-shell { min-height: 100dvh; background: var(--surface-1); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--sp-8) var(--sp-4); }
.login-brand { margin-block-end: var(--sp-8); padding: 0; }
.login-card { width: 28rem; max-width: 100%; padding: var(--sp-8); background: var(--canvas); border: var(--sp-px) solid var(--border); border-radius: var(--r-xl); }
.eyebrow { font-size: var(--fs-sm); letter-spacing: .1em; font-weight: var(--fw-medium); color: var(--accent-fg); margin-block-end: var(--sp-3); }
.login-card h1 { font-size: var(--fs-2xl); line-height: var(--lh-base); }
.muted { color: var(--muted); }
.login-card > p { font-size: var(--fs-base); margin-block: var(--sp-4) var(--sp-6); }
.login-card label { display: block; font-size: var(--fs-base); margin-block-end: var(--sp-2); }
.login-card input { width: 100%; }
.login-card .primary { width: 100%; margin-block-start: var(--sp-4); }
.login-note { font-size: var(--fs-sm); color: var(--muted); margin-block-start: var(--sp-6); text-align: center; }
.error-text { color: var(--danger-text); }
dialog { max-width: calc(100% - var(--sp-8)); width: 32rem; max-height: calc(100dvh - var(--sp-8)); overflow-y: auto; overscroll-behavior: contain; border: var(--sp-px) solid var(--border); padding: var(--sp-6); border-radius: var(--r-xl); color: var(--text); background: var(--canvas); box-shadow: var(--shadow-md); }
dialog::backdrop { background: var(--overlay-bg); }
.dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); margin-block-end: var(--sp-5); }
.dialog-header h2 { font-size: var(--fs-lg); font-weight: var(--fw-medium); margin: var(--sp-2) 0 0; }
.dialog-header .icon-button { border: 0; }
.dialog-footer { display: flex; justify-content: flex-end; margin-block-start: var(--sp-6); }
.help-steps { padding-inline-start: var(--sp-6); margin: 0; }
.help-steps li { font-size: var(--fs-md); padding-inline-start: var(--sp-1); margin-block-end: var(--sp-6); }
.help-steps strong { font-weight: var(--fw-medium); }
.help-steps p { font-size: var(--fs-base); color: var(--muted); margin-block: var(--sp-2); }
dialog > p { font-size: var(--fs-base); }
.secret-box { display: flex; align-items: flex-start; gap: var(--sp-2); background: var(--surface-1); padding: var(--sp-4); border-radius: var(--r-lg); }
.secret-box code { font-size: var(--fs-sm); overflow-wrap: anywhere; flex: 1; min-width: 0; margin-block: var(--sp-2); }
.credential-scope { display: flex; align-items: flex-start; gap: var(--sp-2); color: var(--muted); font-size: var(--fs-sm); margin-block-start: var(--sp-4); }
.credential-scope svg { width: var(--sp-4); height: var(--sp-4); }
.toast { position: fixed; inset-block-end: var(--sp-6); inset-inline: var(--sp-4); margin-inline: auto; width: fit-content; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); background: var(--inverse-surface); color: var(--inverse-text); box-shadow: var(--shadow-md); font-size: var(--fs-base); max-width: calc(100% - var(--sp-8)); z-index: 200; overflow-wrap: anywhere; }
.sr-only { position: absolute; width: var(--sp-px); height: var(--sp-px); padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.mobile-only { display: none; }

/* Frequent interactions respond immediately. Hover never sticks on touch. */
@media (hover: hover) {
  .nav-item:hover, .profile:hover { background: var(--surface-2); }
  .nav-item.active:hover { background: var(--surface-3); }
  .icon-button:not(:disabled):hover, .secondary:not(:disabled):hover, .small-button:not(:disabled):hover, .suggestions button:hover, .text-button:not(:disabled):hover { background: var(--surface-1); }
  .primary:not(:disabled):hover { background: var(--action-hover); }
  .upload-zone:not([aria-disabled="true"]):hover { background: var(--accent-soft); border-color: var(--accent); }
  tbody tr:hover { background: var(--surface-1); }
  .tabs button:hover { color: var(--text); }
}
button:not(:disabled):active { background: var(--surface-2); }
.primary:not(:disabled):active { background: var(--action-hover); }
@media (prefers-reduced-motion: no-preference) {
  .primary, .secondary, .icon-button, .small-button, .text-button { transition: transform var(--knowledge-motion) ease-out; }
  :is(.primary, .secondary, .icon-button, .small-button, .text-button):not(:disabled):active { transform: scale(.96); }
}

/* Keep full navigation labels once the sidebar would take too much reading space. */
@media (max-width: 68rem) {
  .connect-layout { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
  .upload-tag { flex-basis: 100%; margin-inline-start: var(--sp-14); }
}
@media (max-width: 52rem) {
  :root { --knowledge-gutter: var(--sp-6); }
  .app-shell { display: block; }
  .sidebar { position: static; width: 100%; padding: var(--sp-5) var(--knowledge-gutter) var(--sp-2); border-inline-end: 0; border-block-end: var(--sp-px) solid var(--border); display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--sp-3); row-gap: var(--sp-4); }
  .sidebar .wordmark { padding: 0; align-self: center; }
  .product-label { margin: 0; justify-self: end; align-self: center; }
  .space-card, .sidebar-bottom { display: none; }
  .sidebar nav { grid-column: 1 / -1; display: flex; gap: var(--sp-2); }
  .nav-item { width: auto; flex: 1; justify-content: center; gap: var(--sp-2); margin: 0; padding-inline: var(--sp-2); white-space: nowrap; }
  .nav-count { display: none; }
  .main-shell { margin: 0; width: 100%; }
  .topbar { min-height: var(--sp-12); }
  .connection-state { display: none; }
  .top-actions .icon-button { border: 0; }
  .mobile-only { display: inline-flex; }
  main { padding-block-start: var(--sp-6); }
  .page-heading { flex-wrap: wrap; gap: var(--sp-4); margin-block-end: var(--sp-6); }
  .page-heading > div { flex-basis: 100%; }
  .stats-grid { gap: var(--sp-4); margin-block-end: var(--sp-6); }
  .stat small { display: none; }
  .upload-zone { padding: var(--sp-5); gap: var(--sp-3); }
  .upload-icon { width: var(--sp-8); }
  .upload-tag { margin-inline-start: var(--sp-11); }
  .list-controls { flex: 1; justify-content: flex-end; }
  .search-field { flex: 1; max-width: 20rem; }
  .search-field input { width: 100%; }
  .list-footer { align-items: flex-start; }
  .connect-banner { padding: var(--sp-5); }
  .scope-chip { margin-inline-start: var(--sp-12); }
}
@media (max-width: 28rem) {
  :root { --knowledge-gutter: var(--sp-4); }
  .product-label span { display: none; }
  .nav-item > [data-icon] { display: none; }
  h1 { font-size: var(--fs-xl); }
  .stats-grid { gap: var(--sp-2); }
  .list-controls { flex-basis: 100%; }
  .search-field { max-width: none; }
  .upload-zone { padding: var(--sp-4); }
  .upload-copy p { overflow-wrap: anywhere; }
  .upload-tag { font-size: var(--fs-xs); }
  .retrieval-form { padding: var(--sp-2); }
  .retrieval-form > [data-icon] { display: none; }
  .retrieval-form input { flex-basis: 100%; padding-inline: var(--sp-2); }
  .retrieval-form .primary { width: 100%; }
  .key-form { flex-wrap: wrap; }
  .key-form input { flex-basis: 100%; }
  .connect-banner > div { min-width: 0; flex-basis: calc(100% - var(--sp-12)); }
  .integration-content { padding: var(--sp-4); }
  .integration-content pre { padding: var(--sp-3); }
  .result-source { flex-basis: 100%; }
  .login-card { padding: var(--sp-6); }
}
@media (forced-colors: active) {
  .upload-zone, .integration-card, .connect-banner, .stat, .badge, .nav-item.active { border: var(--sp-px) solid CanvasText; }
  .primary, .secondary, .icon-button, .small-button, .suggestions button { border: var(--sp-px) solid ButtonText; }
}

/* The table adapts to its own reading space, including the sidebar boundary. */
@container knowledge (max-width: 42rem) {
  table, tbody { display: block; }
  thead { position: absolute; width: var(--sp-px); height: var(--sp-px); overflow: hidden; clip: rect(0, 0, 0, 0); }
  tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2) var(--sp-3); padding-block: var(--sp-5); border-block-end: var(--sp-px) solid var(--border); }
  td { border: 0; padding: 0; min-width: 0; }
  td:first-child { grid-column: 1 / -1; }
  td:nth-child(2) { grid-column: 1 / -1; margin-inline-start: var(--sp-11); }
  td:nth-child(3) { margin-inline-start: var(--sp-11); }
  td:nth-child(3)::before, td:nth-child(4)::before { content: attr(data-label) ' '; color: var(--muted); }
  td:nth-child(4) { text-align: end; }
  td:last-child { grid-column: 1 / -1; text-align: start; margin-inline-start: var(--sp-11); }
  td:last-child:empty { display: none; }
}
@container knowledge (max-width: 56rem) {
  .connect-layout { grid-template-columns: minmax(0, 1fr); }
}
@container knowledge (min-width: 28rem) and (max-width: 42rem) {
  tbody tr { grid-template-columns: minmax(0, 1fr) auto; }
  td:first-child { grid-column: 1; }
  td:nth-child(2) { grid-column: 2; margin-inline-start: 0; }
  td:nth-child(3) { grid-column: 1; }
  td:nth-child(4) { grid-column: 2; }
  .badge { white-space: nowrap; }
}