/* Shared workspace presentation. Tool-specific layouts stay in styles.css. */
:root {
  --ui-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ui-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --ui-radius: 6px;
  --ui-selection: color-mix(in srgb, var(--signal) 13%, var(--paper));
}
:root, :root[data-theme] {
  --surface-0: var(--paper);
  --surface-1: var(--paper-2);
  --surface-2: var(--paper-3);
  --surface-3: var(--paper-3);
  --control-bg: var(--paper-2);
  --control-bg-strong: var(--paper-3);
  --control-bg-soft: var(--paper-2);
  --accent: var(--signal);
  --text-primary: var(--ink);
  --text-secondary: var(--ink-dim);
  --text-quiet: var(--ink-dim);
  --surface-accent: var(--ui-selection);
  --line-soft: var(--rule);
  --line-medium: var(--rule);
  --line-strong: var(--rule-bright);
}
body { font-family: var(--ui-font); letter-spacing: 0; background: var(--paper); }
body::before { background: none; }
body.workspace-locked #bottomNav,
body.workspace-locked #bottomNavDrawer,
body.workspace-locked #bottomNavScrim,
body:has(#app[hidden]) #bottomNav,
body:has(#app[hidden]) #bottomNavDrawer { display: none !important; }
:where(button, a, input, select, textarea, summary):focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
button { letter-spacing: 0; }
input, textarea, select { color: var(--ink); accent-color: var(--signal); }
::placeholder { color: var(--ink-faint); opacity: 1; }
#app ::placeholder { font-style: normal; }
code, pre, .mono { font-family: var(--ui-mono); }
#app.app { width: 100%; max-width: 1920px; padding: 22px 32px 40px; animation: none; transform: none; }
#app .topbar { gap: 16px; padding-bottom: 18px; background: transparent; }
#app .topbar-title { font: 650 21px var(--ui-font); letter-spacing: 0; }
#app .topbar-title .version { font: 11px var(--ui-mono); }
#app .app-shell { grid-template-columns: 212px minmax(0, 1fr); gap: 28px; margin-top: 24px; }
#app .app-shell:has(.sidebar.is-collapsed) { grid-template-columns: 52px minmax(0, 1fr); }
#app .content { min-width: 0; }
#app .sidebar { background: transparent; border: 0; border-right: 1px solid var(--rule); border-radius: 0; box-shadow: none; padding: 0 16px 12px 0; top: 16px; max-height: calc(100dvh - 32px); overflow-y: auto; scrollbar-width: thin; }
#app .sidebar-group { font: 600 11px var(--ui-font); letter-spacing: 0; text-transform: none; color: var(--ink-faint); padding: 18px 10px 6px; }
#app .sidebar .tab { min-height: 38px; padding: 8px 10px; border: 0; border-radius: var(--ui-radius); justify-content: flex-start; font: 500 13px var(--ui-font); color: var(--ink-dim); background: transparent; box-shadow: none; }
#app .sidebar .tab:hover { color: var(--ink); background: var(--paper-2); }
#app .sidebar .tab.active { color: var(--signal); background: var(--ui-selection); }
#app .sidebar .tab.active::before { display: none; }
#app .sidebar .tab-icon { display: grid; place-items: center; flex: 0 0 18px; width: 18px; }
#app .sidebar.is-collapsed { padding-right: 8px; border: 0; }
#app .sidebar.is-collapsed .tab { justify-content: center; min-height: 42px; padding: 8px; }
#app .sidebar.is-collapsed .tab-label, #app .sidebar.is-collapsed .sidebar-group { display: none; }
#app .sidebar-toggle { border-color: var(--rule); background: transparent; margin-left: auto; }
#app .view-hero { display:flex; align-items:center; justify-content:space-between; gap:12px; background:transparent; box-shadow:none; border:0; border-radius:0; padding:0; margin-bottom:12px; min-height:32px; }
#app :is(.view-hero h1, .view-hero h2, .section-title h2, .panel h2) { font-family: var(--ui-font); font-style: normal; letter-spacing: 0; }
#app .view-hero h1 { font-size:18px; font-weight:650; margin:0; }
#app .view-hero .muted { max-width: 72ch; font-size: 14px; color: var(--ink-dim); }
#app .view-eyebrow { font: 500 11px var(--ui-font); letter-spacing: 0; color: var(--ink-faint); }
#app .view-stat { background: transparent; border: 0; border-left: 1px solid var(--rule); border-radius: 0; box-shadow: none; }
#app .panel { background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--ui-radius); box-shadow: none; }
#app :is(button, input, textarea, select) { letter-spacing: 0; }
#app :is(button.primary, button.secondary, button.ghost) { font-family: var(--ui-font); text-transform: none; border-radius: var(--ui-radius); }
#app button.primary { background: var(--signal); color: var(--paper); box-shadow: none; border-color: var(--signal); }
#app :is(button.secondary, button.ghost) { background: var(--paper-2); color: var(--ink); border: 1px solid var(--rule); box-shadow: none; }
#app :is(input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']), textarea, select) { background: var(--paper); border-color: var(--rule-bright); border-radius: var(--ui-radius); font-family: var(--ui-font); font-style: normal; }
#themeToggle.theme-toggle { position: static; inset: auto; width: 36px; height: 36px; min-height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; box-shadow: none; flex-shrink: 0; }
#themeToggle .theme-toggle-label { display: none; }
#appearanceMenu.appearance-menu { position: fixed; z-index: 220; top: 84px; right: 24px; left: auto; bottom: auto; max-width: calc(100vw - 32px); max-height: calc(100dvh - 112px); overflow: auto; }
.welcome-header .welcome-brand { margin-right: auto; }
.welcome-header #themeToggle { margin-right: 12px; }
#app :is(.output, .chat-message, .markdown) { font-family: var(--ui-font); letter-spacing: 0; }
#app .chat-hero .view-hero-stats { gap: 12px; }
.settings-page .settings-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding-bottom: 24px; border-bottom: 1px solid var(--rule); }
.settings-page h1 { font: 650 28px var(--ui-font); margin: 6px 0 8px; letter-spacing: 0; }
.settings-page .settings-layout { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 32px; padding-top: 24px; }
.settings-nav { display: flex; flex-direction: column; align-self: start; gap: 4px; position: sticky; top: 20px; }
.settings-nav .settings-search { font: 500 12px var(--ui-font); color: var(--ink-dim); display: grid; gap: 8px; margin-bottom: 12px; }
.settings-nav input { width: 100%; min-width: 0; padding: 10px; }
.settings-nav button { font: 500 13px var(--ui-font); text-align: left; border: 0; padding: 10px; border-radius: var(--ui-radius); color: var(--ink-dim); cursor: pointer; }
.settings-nav button[aria-pressed='true'] { background: var(--ui-selection); color: var(--signal); }
.settings-panels { min-width: 0; max-width: 840px; }
.settings-panels .settings-section { display: grid; gap: 14px; padding: 0 0 28px; margin: 0 0 28px; border-bottom: 1px solid var(--rule); }
.settings-panels .settings-label { font: 650 17px var(--ui-font); color: var(--ink); letter-spacing: 0; text-transform: none; }
.settings-panels .split { display: none; }
.settings-panels .hint { font: 13px/1.65 var(--ui-font); color: var(--ink-dim); max-width: 70ch; }
.settings-panels label:not(.coach-toggle):not(.file-button) { display: grid; gap: 8px; font: 500 13px var(--ui-font); color: var(--ink-dim); }
.settings-panels .coach-toggle { display: flex; align-items: center; gap: 10px; font: 14px/1.5 var(--ui-font); }
.settings-panels .coach-toggle input { flex: 0 0 18px; width: 18px; height: 18px; }
.settings-panels :is(input:not([type='checkbox']), select) { padding: 11px 12px; width: 100%; }
.settings-panels :is(.secondary, .file-button) { width: fit-content; min-height: 40px; padding: 10px 14px; }
.settings-panels .settings-filtered { display: none; }
.settings-savebar { display: flex; align-items: center; justify-content: space-between; gap: 16px; position: sticky; bottom: 0; z-index: 3; padding: 16px 0; border-top: 1px solid var(--rule); background: var(--paper); }
.settings-savebar > span { font: 13px/1.5 var(--ui-font); color: var(--ink-dim); }
.settings-savebar > div { display: flex; gap: 8px; flex-shrink: 0; }
.settings-savebar button { min-height: 40px; }
.fixture-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 10px 0; font-size: 12px; color: var(--ink-dim); }
.fixture-controls button { padding: 6px 10px; border: 1px solid var(--rule); border-radius: 4px; }
.lock-screen { background: var(--paper); }
.lock-appearance { position: fixed; top: 16px; right: 16px; z-index: 2; }
.lock-screen .lock-backdrop { display: none; }
.lock-screen .lock-card { background: var(--paper-2); border: 1px solid var(--rule); border-radius: 8px; box-shadow: none; width: min(440px, calc(100% - 32px)); }
.lock-screen :is(.lock-field label, .lock-check, .lock-foot, .lock-mode, .lock-submit) { font-family: var(--ui-font); letter-spacing: 0; text-transform: none; }
.lock-screen .lock-field label { font-size: 13px; color: var(--ink-dim); }
.lock-screen .lock-check { display: flex; gap: 10px; align-items: center; grid-template-columns: none; font-size: 13px; color: var(--ink-dim); }
.lock-screen .lock-check input { flex: 0 0 18px; width: 18px; height: 18px; }
.lock-screen .lock-submit { background: var(--signal); color: var(--paper); box-shadow: none; border-color: var(--signal); font-size: 14px; }
.lock-screen .lock-foot { font-size: 12px; color: var(--ink-dim); }
.lock-screen .lock-mark-pulse { display: none; }
@media (min-width: 1600px) { #app.app { padding-inline: 48px; } #app .app-shell { gap: 40px; } }
@media (min-width: 881px) and (max-width: 1100px) { #app.app { padding-inline: 20px; } #app .app-shell { grid-template-columns: 180px minmax(0, 1fr); gap: 20px; } .settings-page .settings-layout { grid-template-columns: 140px minmax(0, 1fr); gap: 20px; } }
@media (max-width: 880px) {
  #app.app { padding: 16px 16px calc(var(--bn-h, 72px) + 20px); }
  #app .app-shell, #app .app-shell:has(.sidebar.is-collapsed) { display: block; margin-top: 20px; }
  #app .sidebar { display: none; }
  #app .topbar { flex-wrap: wrap; }
  #app .view-hero { padding-bottom: 16px; }
  #app .view-hero h1 { font-size: 24px; }
  .settings-page .settings-head { flex-direction: column; gap: 12px; }
  .settings-page .settings-layout { display: block; padding-top: 18px; }
  .settings-nav { position: static; display: flex; flex-direction: row; flex-wrap: wrap; gap: 4px; margin-bottom: 24px; }
  .settings-nav .settings-search { flex: 1 1 100%; margin-bottom: 8px; }
  .settings-nav button { min-height: 44px; }
  .settings-savebar { bottom: var(--bn-h, 72px); flex-wrap: wrap; padding: 12px 0; }
  #settings.active .settings-savebar { position: fixed; bottom: var(--bn-h, 72px); left: 16px; right: 16px; }
  .settings-page { padding-bottom: 116px; }
  .settings-savebar > div { margin-left: auto; }
  .settings-savebar button { min-height: 44px; }
  .settings-panels .settings-coach-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  :is(.app, .view, .tab, .lock-card, .lock-mark) { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

:root[data-motion='off'] :is(#app *, .bn-drawer *, .tin-welcome *) { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
:root[data-motion='subtle'] .brain-activity.is-processing::before { animation: none !important; }
:root[data-motion='subtle'] #app .view.active > :is(.view-hero, .panel, .notes-shell, .settings-layout) { animation-duration: 100ms; }

/* Brief, event-driven feedback. No root transforms or idle animation loops. */
@keyframes tin-surface-arrive { from { opacity: .85; } to { opacity: 1; } }
@keyframes tin-result-arrive { from { opacity: .6; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  #app .view:not(#studio).active > :is(.view-hero, .section-title, .panel, .notes-shell, .settings-head, .settings-layout) {
    animation: tin-surface-arrive 180ms ease-out;
  }
  #app :is(button, .tab, .note-row, .settings-nav button) {
    transition: background-color 140ms ease-out, border-color 140ms ease-out, color 140ms ease-out;
  }
  #app details[open] > :not(summary) { animation: tin-result-arrive 160ms ease-out; }
  #noteAIPanel[data-state='done'] { animation: tin-result-arrive 200ms ease-out; }
}
@media (max-width: 880px) {
  .bn-drawer:not(.is-open) { pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bn-drawer-panel, .bn-drawer-scrim { transition: none !important; }
}

/* Brain workspace styles live in brain.css. */
.rpc-view-tabs { display:flex;gap:8px;border-bottom:1px solid var(--rule);padding:0 0 16px;margin-bottom:24px; }
.rpc-view-tabs button { padding:8px 14px;min-height:36px;border:1px solid var(--rule);border-radius:6px;font:600 13px/1.4 var(--ui-font);background:transparent;color:var(--ink-dim); }
.rpc-view-tabs button:hover { color:var(--ink);border-color:var(--ink-dim); }
.rpc-view-tabs button[aria-pressed="true"] { background:var(--signal);border-color:var(--signal);color:var(--paper); }
.rpc-desktop-connect { display:grid;grid-template-columns:minmax(0,1.25fr) minmax(220px,.75fr);gap:32px;padding:8px 0 28px;border-bottom:1px solid var(--rule); }
.rpc-desktop-main h2,.rpc-desktop-setup h2 { margin:0 0 12px;font:600 22px/1.3 var(--ui-font); }
.rpc-desktop-main p,.rpc-desktop-checklist li,.rpc-desktop-setup li { font:14px/1.65 var(--ui-font);color:var(--ink-dim); }
.rpc-connect-link { display:inline-flex;align-items:center;gap:12px;margin:8px 0;padding:12px 18px;max-width:100%;box-sizing:border-box;border:1px solid var(--signal);border-radius:6px;background:var(--signal);color:var(--paper);font:600 14px/1.4 var(--ui-font);text-decoration:none; }
.rpc-connect-link:hover { filter:brightness(1.08); }
.rpc-connect-link:focus-visible { outline:2px solid var(--ink);outline-offset:4px; }
.rpc-desktop-main .rpc-desktop-note { font-size:12px;color:var(--ink-dim); }
.rpc-desktop-checklist h3 { margin:0;font:600 15px/1.5 var(--ui-font); }
.rpc-desktop-checklist ul { padding-left:20px;display:grid;gap:10px; }
.rpc-desktop-setup { padding:28px 0; }
.rpc-desktop-setup ol { padding-left:24px;display:grid;gap:18px;max-width:80ch; }
.rpc-desktop-setup strong { color:var(--ink);font-weight:600; }
.rpc-desktop-help { display:flex;flex-wrap:wrap;gap:12px 24px;margin:24px 0;font:13px/1.5 var(--ui-font); }
.rpc-desktop-connect a,.rpc-desktop-setup a { overflow-wrap:anywhere; }
.rpc-desktop-setup a { color:var(--signal);text-underline-offset:3px; }
@media(max-width:680px){.rpc-desktop-connect { grid-template-columns:minmax(0,1fr);gap:24px; }.rpc-desktop-main h2,.rpc-desktop-setup h2{font-size:20px;}}
.cat-chip-group { display: inline-flex; align-items: center; gap: 2px; }
.cat-chip-group :is(.cat-chip-edit, .cat-chip-del) { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--rule); border-radius: 4px; background: var(--paper); color: var(--ink-dim); }
.cat-chip-group :is(.cat-chip-edit, .cat-chip-del):focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.chat-cat-group { display: flex; align-items: center; gap: 4px; min-width: 0; }
.chat-cat-group .chat-cat-row { flex: 1; min-width: 0; }
.chat-cat-group .chat-cat-actions { display: flex; position: static; opacity: 1; }
.context-receipt { width: min(640px,calc(100vw - 32px)); max-height: calc(100dvh - 40px); overflow: auto; }
.context-receipt dl { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 12px; font: 14px/1.5 var(--ui-font); }
.context-receipt dd { margin: 0; overflow-wrap: anywhere; }
.context-receipt li { margin-bottom: 12px; overflow-wrap: anywhere; }
.agent-console-head, .agent-worker-row { display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:space-between; }
.agent-console-metrics { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-block:1px solid var(--rule);margin:20px 0; }
.agent-console-metrics > div { padding:16px 8px;display:grid;gap:8px; }
.agent-console-metrics span { color:var(--ink-dim);font:13px var(--ui-font);text-transform:capitalize; }
.agent-console-metrics strong { font:600 26px var(--ui-font); }
.agent-worker-row, .agent-job-row { border-bottom:1px solid var(--rule);padding:16px 0; }
.agent-worker-row > div { flex:1 1 200px; }
.agent-worker-row p, #agentsConsole p { color:var(--ink-dim);font:13px/1.6 var(--ui-font);overflow-wrap:anywhere; }
.agent-queue { margin-top:28px; }
[data-agent-form] { display:grid;gap:16px; }
[data-agent-form] label { display:grid;gap:8px;font:13px var(--ui-font);color:var(--ink-dim); }
[data-agent-form] :is(select,textarea) { width:100%;padding:10px; }
[data-agent-form] button { justify-self:start; }
.agent-job-row summary { font:500 14px/1.5 var(--ui-font);cursor:pointer;overflow-wrap:anywhere; }
@media(max-width:600px) { .agent-console-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:500px) { .context-receipt dl { grid-template-columns: minmax(0,1fr); gap: 6px; } }
.note-ai-original { border-top: 1px solid var(--rule); padding-top: 12px; }
.note-ai-original summary { cursor: pointer; font-size: 13px; }
.note-ai-original pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 320px; overflow: auto; font: inherit; }
.note-trash-row { display:flex;gap:16px;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--rule); }
.note-trash-row span { min-width:0;overflow-wrap:anywhere; }
.notes-search-row { display:flex;gap:8px; }
.notes-search-row input { min-width:0;flex:1;width:auto; }
.brain-evidence-flow > div { position:relative; }
.brain-evidence-flow > div::after { content:'';position:absolute;inset:0 auto auto 0;height:2px;width:0;background:var(--signal); }
@keyframes tin-stage-progress { from { width:12%;opacity:.45; } to { width:100%;opacity:1; } }
@keyframes tin-result-arrive { from { opacity:.5; } to { opacity:1; } }
@media(prefers-reduced-motion:no-preference) {
  :root[data-motion='expressive'] .brain-evidence-flow[data-processing='observing'] > div:first-child::after,
  :root[data-motion='expressive'] .brain-evidence-flow[data-processing='consolidating'] > div:nth-child(2)::after,
  :root[data-motion='expressive'] .brain-evidence-flow[data-processing='profiling'] > div:nth-child(3)::after { animation:tin-stage-progress 1.8s ease-in-out infinite alternate; }
  :root:not([data-motion='off']) :is(.compare-pane[data-status='done'],.research-step.is-done,.note-ai-panel[data-state='done']) { animation:tin-result-arrive 180ms ease-out; }
}
.calendar-nav-icon { display:inline-block;flex:none;width:20px;height:20px;background:currentColor;mask:url('/assets/icons/calendar-days.svg') center/contain no-repeat; }
.agenda-toolbar { display:flex;align-items:end;flex-wrap:wrap;gap:12px;padding-block:20px;border-bottom:1px solid var(--rule); }
.agenda-toolbar label,.agenda-editor label { display:grid;gap:8px;font:13px var(--ui-font);color:var(--ink-dim); }
.agenda-toolbar input,.agenda-toolbar select { padding:8px; }
.agenda-metrics { display:flex;flex-wrap:wrap;gap:24px; }
.agenda-metrics > div { display:grid;gap:8px; }
.agenda-metrics span { font:12px var(--ui-font);color:var(--ink-dim);text-transform:capitalize; }
.agenda-metrics strong { font:600 24px var(--ui-font); }
.agenda-layout { display:grid;grid-template-columns:minmax(330px,1.1fr) minmax(260px,1fr);gap:32px;padding-block:24px; }
.agenda-week,.agenda-grid { display:grid;grid-template-columns:repeat(7,minmax(0,1fr)); }
.agenda-week span { padding:8px;text-align:center;font:12px var(--ui-font);color:var(--ink-dim); }
.agenda-date { min-width:0;min-height:72px;border:1px solid var(--rule);border-radius:0;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:8px 2px;font:14px var(--ui-font);color:var(--ink); }
.agenda-date small { min-height:14px;font:11px var(--ui-font);color:var(--ink-dim);white-space:nowrap; }
.agenda-date.is-outside { color:var(--ink-faint); }
.agenda-date.is-today { border-bottom:2px solid var(--signal); }
.agenda-date[aria-pressed='true'] { background:var(--ui-selection);outline:2px solid var(--signal);outline-offset:-2px; }
.agenda-day h2 { font:600 19px var(--ui-font);margin-top:0; }
.agenda-plan { display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:16px 0;border-bottom:1px solid var(--rule); }
.agenda-plan > div { min-width:0;flex:1 1 180px; }
.agenda-plan-title { text-align:left;padding:0;border:0;background:none;font:600 14px var(--ui-font);color:var(--ink);overflow-wrap:anywhere; }
.agenda-plan p { font:12px/1.5 var(--ui-font);color:var(--ink-dim); }
.agenda-editor form { display:grid;gap:16px; }
.agenda-fields { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px; }
.agenda-editor :is(input:not([type='checkbox']),select,textarea) { min-width:0;width:100%;padding:10px; }
.agenda-editor .agenda-reminder { display:flex;align-items:center;gap:10px; }
@media(max-width:1050px) { .agenda-layout { grid-template-columns:minmax(0,1fr); } }
@media(max-width:500px) { .agenda-fields { grid-template-columns:minmax(0,1fr); }.agenda-date { min-height:60px; } }

#privateSyncDialog { width:min(560px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:20px;box-sizing:border-box;overflow:auto;border-radius:8px; }
#privateSyncDialog .modal-head { padding:0 0 12px;margin-bottom:12px; }
#privateSyncDialog form { padding:0; }
#privateSyncDialog input { border-radius:6px;max-width:100%; }
#privateSyncDialog input[name='endpoint'] { font-size:12px;letter-spacing:0; }
#privateSyncDialog p { line-height:1.5; }