:root {
  color-scheme: light dark;
  --surface: Canvas;
  --text: CanvasText;
  --control: ButtonFace;
  --control-text: ButtonText;
  --line: GrayText;
  --focus: Highlight;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  font: 100%/1.5 system-ui, sans-serif;
  background: var(--surface);
  color: var(--text);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
.page-header, main { width: min(100%, 68rem); margin-inline: auto; padding: var(--space-4); }
.page-header { border-bottom: 1px solid var(--line); font-weight: 600; display: flex; align-items: center; gap: var(--space-3); }
main { padding-block: var(--space-8); }
h1 { margin: 0 0 var(--space-2); font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.2; }
h2 { margin: var(--space-6) 0 var(--space-2); font-size: 1.25rem; }
p { max-width: 65ch; margin-block: var(--space-3); }
button, input, select, textarea, .button { font: inherit; }
button, .button { display: inline-block; min-height: 2.75rem; padding: var(--space-2) var(--space-4); border: 1px solid var(--text); border-radius: var(--space-1); background: var(--control); color: var(--control-text); text-decoration: none; cursor: pointer; }
button:disabled { opacity: .6; cursor: wait; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
input, select, textarea { min-width: 0; max-width: 100%; min-height: 2.75rem; padding: var(--space-2); color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: var(--space-1); }
label { font-weight: 600; }
.account-actions, form { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-3); }
.account-actions { margin-block: var(--space-4) var(--space-6); }
form { padding-block: var(--space-4); border-block: 1px solid var(--line); }
.date-field { display: grid; gap: var(--space-1); }
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--space-6); padding: var(--space-6) 0; margin: var(--space-4) 0; border-block: 1px solid var(--line); }
.metrics dt { font-size: .9375rem; }
.metrics dt span { display: block; }
.metrics dd { margin: var(--space-2) 0 0; font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.secondary { font-size: .9375rem; }
[role="alert"] { border-inline-start: 3px solid var(--text); padding: var(--space-3) var(--space-4); margin-block: var(--space-4); }
.skip-link { position: absolute; inset-inline-start: var(--space-4); top: -5rem; padding: var(--space-2); background: var(--surface); color: var(--text); }
.skip-link:focus { top: var(--space-2); }
@media (max-width: 30rem) { .date-field { width: 100%; } form button { flex: 1; } }
.tabs, .chat-navigation { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-2); margin-block: var(--space-4); }
[role="tab"][aria-selected="true"] { border-bottom-width: 4px; font-weight: 700; }
.preview-note { border-inline-start: 3px solid var(--line); padding-inline-start: var(--space-3); }
.chat-compose { display: grid; gap: var(--space-2); width: 100%; }
textarea { width: 100%; resize: vertical; }
.chat-turn { border-block-end: 1px solid var(--line); padding-block: var(--space-4); overflow-wrap: anywhere; }
.chat-turn h3 { margin-block: 0 var(--space-2); }
.chat-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-turn.selected { border-inline-start: 3px solid var(--line); padding-inline-start: var(--space-3); }
#chat-details { margin-block: var(--space-4); }
summary { cursor: pointer; min-height: 2.75rem; padding-block: var(--space-2); }
#chat-pending, #chat-delete-confirm { border: 1px solid var(--line); padding: var(--space-3); margin-block: var(--space-4); }
#memory-proposal { border: 1px solid var(--line); padding: var(--space-4); margin-block: var(--space-4); overflow-wrap: anywhere; }
#memory-proposal dl { margin-block: var(--space-3); }
#memory-proposal dl div { margin-block: var(--space-2); }
#memory-proposal dt { font-weight: 600; }
#memory-proposal dd { margin-inline: 0; white-space: pre-wrap; }
#memory-list { list-style: none; padding: 0; }
.memory-item { border-block-end: 1px solid var(--line); padding-block: var(--space-3); overflow-wrap: anywhere; }
.memory-item p { margin-block: var(--space-2); white-space: pre-wrap; }
#memory-detail, #memory-editor, #memory-confirm, #memory-pending { border: 1px solid var(--line); padding: var(--space-4); margin-block: var(--space-4); overflow-wrap: anywhere; }
#memory-detail dl div { margin-block: var(--space-3); }
#memory-detail dt { font-weight: 600; }
#memory-detail dd { margin-inline: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
#memory-editor-inputs { width: 100%; min-width: 0; margin: 0; padding: var(--space-3); border: 1px solid var(--line); }
.memory-field { display: grid; gap: var(--space-1); margin-block: var(--space-3); }
.memory-field input, .memory-field select { width: 100%; }
#memory-confirm button, #memory-pending button { margin-block: var(--space-1); }
.trend-table { border-collapse: collapse; margin: var(--space-4) 0; font-variant-numeric: tabular-nums; }
.trend-table caption { text-align: start; font-weight: 600; padding-bottom: var(--space-2); }
.trend-table th, .trend-table td { padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--line); text-align: end; }
.trend-table th[scope="row"], .trend-table thead th:first-child { text-align: start; }
.trend-scroll { max-width: 100%; overflow-x: auto; }
.stack-form { display: grid; gap: var(--space-2); max-width: 26rem; align-items: start; }
.stack-form button { justify-self: start; margin-top: var(--space-2); }
.check { display: flex; gap: var(--space-2); align-items: center; font-weight: 400; }
.check input { min-height: auto; }
.link-button { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }

/* Main logo (icon only), LOGO/final/svg/chob-mark.svg inline: ink #141414 in light,
   #f2f2ee in dark; at least 16 px; clear space = the bar height. */
.brand { display: inline-flex; color: #141414; padding: .25rem; }
.brand-mark { display: block; width: 2.25rem; height: 2.25rem; }
@media (prefers-color-scheme: dark) { .brand { color: #f2f2ee; } }