:root {
  /* Neutrale Grundlage */
  --color-canvas: #F3F3F1;
  --color-surface: #FFFFFF;
  --color-surface-soft: #F7F7F4;
  --color-board: #F4F4F6;
  --color-text: #202422;
  --color-text-secondary: #656B68;
  --color-text-disabled: #A0A69F;
  --color-border: #E3E5E1;
  --color-control-border: #828782;
  --color-action: #1D1F1E;
  --color-on-action: #FFFFFF;
  --color-selection: var(--color-action);
  --color-on-selection: var(--color-on-action);
  --color-focus: var(--color-selection);
  --color-inverse: #202329;
  --color-on-inverse: #FFFFFF;
  --color-inverse-secondary: #C8CCC9;
  --color-shade: #090909;
  --color-accent: var(--color-action);
  --color-on-accent: var(--color-on-action);
  --color-nav: var(--color-surface);
  --color-nav-icon: var(--color-text-secondary);
  --color-nav-active: var(--color-selection);
  --color-on-nav-active: var(--color-on-selection);

  /* Ergänzte Zustände: gleiche Formel für jede Markenvariante */
  --color-action-hover: color-mix(in srgb, var(--color-action) 92%, var(--color-on-action));
  --color-action-pressed: color-mix(in srgb, var(--color-action) 92%, var(--color-shade));

  /* Semantik: Text/Icon und zugehörige helle Fläche */
  --color-success: #21764F; --color-success-soft: #E6F5EC;
  --color-warning: #8A5B00; --color-warning-soft: #FFF4DB;
  --color-danger: #B63947; --color-danger-soft: #FDEDEF;
  --color-info: #285DE5; --color-info-soft: #EAF0FF;
  --color-held: #9B5039; --color-held-soft: #F7E9E2;
  --color-category-pink: #A04880; --color-category-pink-soft: #FBEAF5;

  /* Datenfüllungen; keine kleinen Texte damit einfärben */
  --chart-success: #39C683; --chart-warning: #E3A52B;
  --chart-danger: #E64D65; --chart-held: #C68169;
  --chart-blue: #2F7DE1; --chart-pink: #E39ACB;
  --chart-neutral: #98A39C;
  --chart-track: var(--color-surface-soft);
  --chart-category-1: var(--chart-neutral);
  --chart-category-2: var(--chart-neutral);
  --chart-category-3: var(--chart-neutral);
  --chart-line: var(--color-selection);
  --chart-area: color-mix(in srgb, var(--chart-line) 8%, transparent);

  /* Projektfont einsetzen; initial aktiviert den definierten Fallback */
  --font-project: initial;
  --font-fallback: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-ui: var(--font-project, var(--font-fallback));
  --font-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
  --font-weight-regular: 400; --font-weight-medium: 500;
  --font-weight-semibold: 600; --font-weight-bold: 700;
  --font-weight-heading: var(--font-weight-medium);
  --type-kpi-xl: var(--font-weight-regular) 3.5rem/3.75rem var(--font-ui);
  --type-kpi-lg: var(--font-weight-regular) 3rem/3.25rem var(--font-ui);
  --type-display: var(--font-weight-heading) 2.5rem/3rem var(--font-ui);
  --type-title: var(--font-weight-heading) 2rem/2.5rem var(--font-ui);
  --type-title-mobile: var(--font-weight-heading) 1.75rem/2.125rem var(--font-ui);
  --type-title-compact: var(--font-weight-heading) 1.5rem/2rem var(--font-ui);
  --type-kpi: var(--font-weight-medium) 1.75rem/2rem var(--font-ui);
  --type-section: var(--font-weight-medium) 1.125rem/1.5rem var(--font-ui);
  --type-body: var(--font-weight-regular) 1rem/1.5rem var(--font-ui);
  --type-compact: var(--font-weight-regular) 0.875rem/1.25rem var(--font-ui);
  --type-label: var(--font-weight-medium) 0.875rem/1.25rem var(--font-ui);
  --type-label-touch: var(--font-weight-medium) 1rem/1.5rem var(--font-ui);
  --type-meta: var(--font-weight-regular) 0.75rem/1rem var(--font-ui);
  --type-micro: var(--font-weight-medium) 0.6875rem/1rem var(--font-ui);
  --tracking-normal: 0; --tracking-display: -0.02em; --tracking-label: 0.05em;

  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
  --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem;
  --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem;
  --radius-xs: 0.375rem; --radius-sm: 0.5rem; --radius-md: 0.75rem;
  --radius-lg: 1rem; --radius-xl: 1.5rem; --radius-2xl: 2rem;
  --radius-pill: 9999px; --radius-circle: 50%;
  --border-width: 1px; --selection-width: 2px; --focus-offset: 3px;
  --shadow-none: none;
  --shadow-subtle: 0 1px 3px rgba(24, 28, 25, 0.06);
  --shadow-overlay: 0 12px 32px rgba(24, 28, 25, 0.12), 0 2px 8px rgba(24, 28, 25, 0.04);
  --shadow-focus: 0 0 0 var(--focus-offset) var(--color-surface);

  /* Größen; auch für korrespondierende Avatare verwenden */
  --size-16: 1rem; --size-20: 1.25rem; --size-24: 1.5rem;
  --size-28: 1.75rem; --size-32: 2rem; --size-40: 2.5rem;
  --size-44: 2.75rem; --size-48: 3rem; --size-52: 3.25rem; --size-56: 3.5rem;
  --size-sidebar: 15rem; --size-icon-rail: 4rem;
  --size-board-column: 20rem; --size-context-min: 20rem; --size-content-min: 36rem;
  --icon-stroke: 1.5px;
  --bar-thin: var(--space-1); --bar-height: var(--size-16); --bar-labeled: var(--size-24);
  --curve-width: 2px;

  /* Standarddichte */
  --page-padding: var(--space-6);
  --card-gap: var(--space-4); --card-padding: var(--space-5);
  --card-radius: var(--radius-xl);
  --row-height: var(--size-48); --person-row-height: var(--size-56);
  --button-height: var(--size-40); --button-radius: var(--radius-md);
  --button-padding: var(--space-4); --button-font: var(--type-label);
  --input-height: var(--size-44); --input-padding: var(--space-3);
  --touch-target: var(--size-44); --cta-height: var(--size-52);
  --duration-fast: 150ms; --easing-standard: ease-out;
  --transition-fast: var(--duration-fast) var(--easing-standard);
}

@media (min-width: 768px) and (pointer: fine) {
  :root[data-density="compact"] {
    --page-padding: var(--space-4); --card-gap: var(--space-3);
    --card-padding: var(--space-4); --card-radius: var(--radius-lg);
    --row-height: 2.25rem; --person-row-height: var(--size-48);
    --button-height: var(--size-32); --button-radius: var(--radius-sm);
    --button-padding: var(--space-3);
  }
}
@media (max-width: 767px) {
  :root {
    --page-padding: var(--space-4); --card-gap: var(--space-3);
    --card-padding: var(--space-4); --row-height: var(--size-44);
    --button-height: var(--size-44); --button-font: var(--type-label-touch);
  }
}
@media (any-pointer: coarse) {
  :root, :root[data-density] {
    --button-height: var(--size-44); --row-height: var(--size-44);
    --person-row-height: var(--size-56); --button-font: var(--type-label-touch);
  }
}
@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--color-canvas); color: var(--color-text); font: var(--type-body); }
body { margin: 0; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button { cursor: pointer; transition: background-color var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast); }
button:disabled { cursor: not-allowed; background: var(--color-surface-soft); color: var(--color-text-disabled); }
button:disabled svg { color: inherit; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: var(--selection-width) solid var(--color-focus); outline-offset: var(--focus-offset); box-shadow: var(--shadow-focus); }
button { min-height: var(--touch-target); border: var(--border-width) solid var(--color-control-border); padding: var(--space-2) var(--button-padding); border-radius: var(--button-radius); background: var(--color-surface); color: var(--color-text); font: var(--button-font); display: inline-flex; justify-content: center; align-items: center; gap: var(--space-2); }
button:hover:not(:disabled) { background: var(--color-surface-soft); }
.primary { background: var(--color-action); color: var(--color-on-action); border-color: var(--color-action); }
.primary:hover:not(:disabled) { background: var(--color-action-hover); }
.primary:active:not(:disabled) { background: var(--color-action-pressed); }
.text-button { border-color: transparent; background: transparent; justify-content: flex-start; padding-left: 0; }
.text-button:hover:not(:disabled) { background: transparent; color: var(--color-text-secondary); }
.icon-button { width: var(--touch-target); flex: 0 0 var(--touch-target); padding: 0; border-color: transparent; background: transparent; font: var(--type-section); }
svg.icon { width: var(--size-20); height: var(--size-20); display: block; fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
[data-icon] { display: inline-flex; align-items: center; }
input, select, textarea { color: var(--color-text); background: var(--color-surface); border: var(--border-width) solid var(--color-control-border); border-radius: var(--radius-md); padding: var(--input-padding); width: 100%; min-width: 0; min-height: var(--input-height); font: var(--type-body); }
textarea { resize: vertical; min-height: calc(var(--size-48) * 2); }
input[type=checkbox], input[type=radio] { min-height: var(--size-20); width: var(--size-20); height: var(--size-20); accent-color: var(--color-action); }
input[type=range] { border: 0; accent-color: var(--color-action); padding-inline: 0; }
label, .form-label { display: block; font: var(--type-label); margin-bottom: var(--space-2); }
input::placeholder, textarea::placeholder { color: var(--color-text-secondary); opacity: 1; }
h1, h2, h3, p { margin: 0; }
h1 { font: var(--type-title); letter-spacing: var(--tracking-display); }
h2 { font: var(--type-section); }
h3 { font: var(--type-label-touch); }
small, .muted { color: var(--color-text-secondary); }
.muted { font: var(--type-compact); }
.eyebrow { font: var(--type-label); color: var(--color-text-secondary); }
.wide { width: 100%; }
.stack { display: grid; gap: var(--space-4); }
.inline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.skip-link { position: fixed; top: var(--space-4); left: var(--space-4); padding: var(--space-3); background: var(--color-surface); z-index: 100; transform: translateY(calc(-1 * var(--space-16) * 2)); }
.skip-link:focus { transform: none; }
.connection { padding: var(--space-3) var(--page-padding); background: var(--color-warning-soft); color: var(--color-warning); font: var(--type-label); text-align: center; }
.app { display: grid; grid-template-columns: var(--size-sidebar) minmax(0, 1fr); min-height: 100dvh; }
.sidebar { padding: var(--space-8) var(--space-5) var(--space-6); display: flex; flex-direction: column; gap: var(--space-8); border-right: var(--border-width) solid var(--color-border); min-width: 0; }
.brand { display: inline-flex; align-items: center; gap: var(--space-3); font: var(--type-section); font-weight: var(--font-weight-semibold); letter-spacing: var(--tracking-display); }
.brand img { width: var(--size-40); height: var(--size-40); }
.brand-sub { display: block; font: var(--type-micro); letter-spacing: var(--tracking-label); color: var(--color-text-secondary); margin-top: var(--space-1); }
.search-trigger { justify-content: flex-start; border-color: var(--color-border); border-radius: var(--radius-pill); color: var(--color-text-secondary); background: var(--color-surface-soft); font: var(--type-compact); }
.search-trigger kbd { margin-left: auto; font: var(--type-meta); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-xs); width: var(--size-20); text-align: center; }
.nav-list { display: grid; gap: var(--space-2); }
.nav-link { min-height: var(--size-48); display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); font: var(--type-label); color: var(--color-text-secondary); }
.nav-link:hover { background: var(--color-surface-soft); }
.nav-link[aria-current=page] { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-subtle); }
.nav-count { margin-left: auto; background: var(--color-surface-soft); color: var(--color-text-secondary); border-radius: var(--radius-pill); min-width: var(--size-24); text-align: center; font: var(--type-meta); padding: var(--space-1); }
.sidebar-bottom { margin-top: auto; display: grid; gap: var(--space-3); }
.sidebar-bottom p { font: var(--type-meta); color: var(--color-text-secondary); }
.manual-label { display: flex; align-items: center; gap: var(--space-2); font: var(--type-meta); }
.status-dot { width: var(--space-2); height: var(--space-2); background: var(--color-success); border-radius: var(--radius-circle); flex: 0 0 auto; }
.workspace { min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-5) var(--space-8); border-bottom: var(--border-width) solid var(--color-border); min-height: calc(var(--size-44) + var(--space-8)); }
.topbar-left, .topbar-right { display: flex; align-items: center; gap: var(--space-3); min-width: 0; font: var(--type-compact); }
.workspace-label, .header-divider { color: var(--color-text-secondary); }
.clock-wrap { display: flex; align-items: center; gap: var(--space-2); font-variant-numeric: tabular-nums; }
.clock-label { color: var(--color-text-secondary); font: var(--type-meta); }
.menu-toggle { display: none; }
.capture-top { border-radius: var(--radius-pill); }
.main { padding: var(--space-8); flex: 1; width: 100%; min-width: 0; }
.page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); }
.page-heading h1 { margin-top: var(--space-2); }
.page-heading p { margin-top: var(--space-2); color: var(--color-text-secondary); max-width: var(--size-content-min); }
.heading-actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.workspace-footer { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-8) var(--space-6); color: var(--color-text-secondary); font: var(--type-meta); }
.layout-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.main-column, .context-column { display: grid; align-content: start; gap: var(--space-6); min-width: 0; }
.panel { background: var(--color-surface); border-radius: var(--card-radius); padding: var(--card-padding); min-width: 0; }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.panel-header .text-button { font: var(--type-label); }
.panel-body { display: grid; gap: var(--space-4); }
.context-card { background: var(--color-surface-soft); padding: var(--space-4); border-radius: var(--radius-lg); }
.empty { display: grid; justify-items: start; align-content: center; gap: var(--space-3); padding: var(--space-6) 0; }
.empty > .empty-icon { width: var(--size-44); height: var(--size-44); border-radius: var(--radius-circle); background: var(--color-surface-soft); display: grid; place-items: center; color: var(--color-text-secondary); margin-bottom: var(--space-2); }
.empty h3 { font: var(--type-section); }
.empty p { font: var(--type-compact); color: var(--color-text-secondary); max-width: var(--size-content-min); }
.focus-label { display: flex; gap: var(--space-2); align-items: center; color: var(--color-text-secondary); font: var(--type-label); margin-bottom: var(--space-4); }
.focus-label .status-dot { background: var(--color-text); }
.focus-title { font: var(--type-title-compact); letter-spacing: var(--tracking-display); margin-bottom: var(--space-4); overflow-wrap: anywhere; }
.task-card { background: var(--color-surface); padding: var(--card-padding); border-radius: var(--radius-xl); min-width: 0; }
.task-card h3 { overflow-wrap: anywhere; }
.card-top { display: flex; gap: var(--space-2); align-items: flex-start; justify-content: space-between; margin-bottom: var(--space-3); }
.card-top .icon-button { margin-top: calc(-1 * var(--space-3)); margin-right: calc(-1 * var(--space-3)); }
.card-meta { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; margin-bottom: var(--space-4); }
.badge { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--size-24); padding: var(--space-1) var(--space-2); font: var(--type-meta); border-radius: var(--radius-pill); background: var(--color-surface-soft); color: var(--color-text-secondary); }
.badge.success { color: var(--color-success); background: var(--color-success-soft); }
.badge.warning { color: var(--color-warning); background: var(--color-warning-soft); }
.badge.danger { color: var(--color-danger); background: var(--color-danger-soft); }
.badge.info { color: var(--color-info); background: var(--color-info-soft); }
.badge.held { color: var(--color-held); background: var(--color-held-soft); }
.five-fields { display: grid; gap: var(--space-3); margin: 0; }
.five-fields > div { display: grid; grid-template-columns: calc(var(--space-16) + var(--space-6)) minmax(0, 1fr); gap: var(--space-2); font: var(--type-compact); }
.five-fields dt { color: var(--color-text-secondary); }
.five-fields dd { margin: 0; overflow-wrap: anywhere; }
.five-fields .missing { color: var(--color-text-secondary); }
.task-card .five-fields { padding-top: var(--space-3); border-top: var(--border-width) solid var(--color-border); }
.card-bottom { border-top: var(--border-width) solid var(--color-border); padding-top: var(--space-3); margin-top: var(--space-4); display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.card-bottom button { font: var(--type-label); }
.criteria { color: var(--color-text-secondary); font: var(--type-compact); padding: var(--space-3) 0; margin-top: var(--space-3); }
.task-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-4); }
.task-actions select { width: auto; flex: 1; min-width: var(--size-sidebar); font: var(--type-compact); }
.domain-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); }
.domain-tab { border: 0; background: transparent; border-radius: var(--radius-pill); font: var(--type-label); }
.domain-tab[aria-pressed=true] { background: var(--color-action); color: var(--color-on-action); }
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(var(--size-board-column), 1fr); align-items: start; gap: var(--space-4); overflow-x: auto; padding-bottom: var(--space-4); scroll-snap-type: x proximity; }
.board-column { background: var(--color-board); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-2xl); padding: var(--space-4); display: grid; gap: var(--space-3); scroll-snap-align: start; }
.column-heading { display: flex; align-items: center; justify-content: space-between; padding: var(--space-1) var(--space-1) var(--space-2); }
.column-heading h2 { font: var(--type-label); }
.column-empty { border: var(--border-width) dashed var(--color-control-border); padding: var(--space-5); border-radius: var(--radius-xl); color: var(--color-text-secondary); font: var(--type-compact); }
.board-column .task-card { padding: var(--space-4); }
.board-column .five-fields > div { grid-template-columns: 1fr; gap: var(--space-1); }
.segmented { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); padding: var(--space-1); border-radius: var(--radius-pill); background: var(--color-board); }
.segmented button { border-color: transparent; background: transparent; border-radius: var(--radius-pill); }
.segmented button[aria-pressed=true] { background: var(--color-surface); box-shadow: var(--shadow-subtle); }
.energy-options { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2); }
.energy-option { position: relative; display: grid; justify-items: center; gap: var(--space-1); padding: var(--space-2) 0; min-height: var(--size-52); border: var(--border-width) solid var(--color-control-border); border-radius: var(--radius-md); font: var(--type-label-touch); cursor: pointer; margin: 0; }
.energy-option input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; min-height: 100%; cursor: pointer; }
.energy-option:has(input:checked) { outline: var(--selection-width) solid var(--color-selection); outline-offset: 0; background: var(--color-surface-soft); }
.energy-option:has(input:focus-visible) { outline: var(--selection-width) solid var(--color-focus); outline-offset: var(--focus-offset); box-shadow: var(--shadow-focus); }
.checkin-note { min-height: var(--size-56); }
.field-help { font: var(--type-meta); color: var(--color-text-secondary); margin-top: var(--space-2); }
.field-error { color: var(--color-danger); font: var(--type-compact); margin-top: var(--space-2); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.form-grid .full { grid-column: 1 / -1; }
.form-check { display: flex; align-items: center; gap: var(--space-2); min-height: var(--size-44); margin: 0; font: var(--type-body); }
details { border-top: var(--border-width) solid var(--color-border); padding-top: var(--space-4); }
summary { font: var(--type-label); cursor: pointer; min-height: var(--touch-target); display: flex; align-items: center; gap: var(--space-2); }
details[open] summary { margin-bottom: var(--space-3); }
.finance-number { font: var(--type-kpi-lg); letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; margin: var(--space-4) 0 var(--space-2); }
.finance-status { font: var(--type-compact); color: var(--color-text-secondary); }
.finance-rows { display: grid; gap: 0; margin-top: var(--space-4); }
.finance-row, .setting-row { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: var(--border-width) solid var(--color-border); align-items: center; }
.finance-row strong { font: var(--type-label); font-variant-numeric: tabular-nums; text-align: right; }
.finance-row:last-child, .setting-row:last-child { border-bottom: 0; }
.timeline-list { display: grid; gap: 0; }
.timeline-item { display: grid; grid-template-columns: var(--size-56) minmax(0, 1fr) var(--size-44); gap: var(--space-3); align-items: start; padding: var(--space-4) 0; border-bottom: var(--border-width) solid var(--color-border); }
.timeline-item:last-child { border-bottom: 0; }
.timeline-time { font: var(--type-label); font-variant-numeric: tabular-nums; }
.timeline-time span { display: block; color: var(--color-text-secondary); font: var(--type-meta); margin-top: var(--space-1); }
.timeline-content { padding-left: var(--space-3); border-left: var(--selection-width) solid var(--color-text-secondary); min-height: var(--size-44); }
.timeline-content.family-event { border-color: var(--color-category-pink); }
.timeline-content p { font: var(--type-meta); color: var(--color-text-secondary); margin-top: var(--space-1); }
.calendar-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; margin-bottom: var(--space-5); }
.calendar-toolbar input { width: auto; }
.day-strip { display: grid; grid-template-columns: repeat(7, minmax(var(--size-44), 1fr)); gap: var(--space-2); margin-bottom: var(--space-6); overflow-x: auto; }
.day-pill { display: grid; justify-items: center; gap: var(--space-1); min-height: var(--size-56); padding: var(--space-2); border-radius: var(--radius-pill); background: transparent; border-color: transparent; font: var(--type-meta); }
.day-pill strong { font: var(--type-label-touch); }
.day-pill[aria-pressed=true] { background: var(--color-action); color: var(--color-on-action); }
.event-dot { width: var(--space-1); height: var(--space-1); background: currentColor; border-radius: var(--radius-circle); }
.time-grid { height: calc(var(--size-56) * 24); position: relative; margin-left: var(--size-52); margin-right: var(--space-2); }
.time-hour { position: absolute; left: 0; width: 100%; border-top: var(--border-width) solid var(--color-border); }
.time-hour-label { position: absolute; left: calc(-1 * var(--size-52)); top: calc(-1 * var(--space-2)); font: var(--type-meta); color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.time-event { position: absolute; left: var(--space-2); right: 0; padding: var(--space-2) var(--space-3); border: var(--border-width) solid var(--color-control-border); border-radius: var(--radius-xs); background: var(--color-surface-soft); display: flex; gap: var(--space-2); align-items: flex-start; justify-content: flex-start; text-align: left; overflow: auto; min-height: var(--size-44); font: var(--type-compact); }
.time-event.family-event { background: var(--color-category-pink-soft); border-color: var(--color-category-pink); }
.time-event span { display: block; font: var(--type-meta); color: var(--color-text-secondary); }
.now-line { position: absolute; left: 0; right: 0; border-top: var(--selection-width) solid var(--color-danger); pointer-events: none; }
.now-line span { position: absolute; right: 0; bottom: var(--space-1); font: var(--type-meta); color: var(--color-danger); background: var(--color-surface); padding-inline: var(--space-1); }
.calendar-scroll { overflow-x: auto; }
.calendar-note { font: var(--type-meta); color: var(--color-text-secondary); margin-bottom: var(--space-4); }
.goal-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.goal-card { display: grid; align-content: start; gap: var(--space-4); }
.goal-card .goal-heading { display: flex; justify-content: space-between; align-items: start; gap: var(--space-3); }
.goal-card h2 { overflow-wrap: anywhere; }
.goal-card dl { display: grid; gap: var(--space-3); margin: 0; font: var(--type-compact); }
.goal-card dt { color: var(--color-text-secondary); margin-bottom: var(--space-1); }
.goal-card dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.goal-progress { display: flex; align-items: center; gap: var(--space-3); color: var(--color-text-secondary); font: var(--type-meta); }
.goal-progress progress { flex: 1; height: var(--bar-thin); accent-color: var(--color-text); max-width: 100%; }
.notice-box { padding: var(--space-4); background: var(--color-info-soft); color: var(--color-info); border-radius: var(--radius-lg); font: var(--type-compact); display: grid; gap: var(--space-2); }
.notice-box.warning { background: var(--color-warning-soft); color: var(--color-warning); }
.notice-box.error { background: var(--color-danger-soft); color: var(--color-danger); }
.execution-list { display: grid; gap: var(--space-3); }
.execution-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-3); border-bottom: var(--border-width) solid var(--color-border); }
.execution-row:last-child { border: 0; }
.execution-row p { font: var(--type-meta); color: var(--color-text-secondary); margin-top: var(--space-1); }
.result-content { white-space: pre-wrap; overflow-wrap: anywhere; font: var(--type-body); background: var(--color-surface-soft); border-radius: var(--radius-lg); padding: var(--space-4); max-height: calc(var(--size-56) * 8); overflow: auto; }
.workflow-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.workflow-card { display: grid; gap: var(--space-4); align-content: start; }
.workflow-card p { font: var(--type-compact); color: var(--color-text-secondary); }
.workflow-card button { justify-self: start; }
.settings-group { display: grid; gap: var(--space-4); }
.settings-group select { max-width: var(--size-sidebar); }
.setting-row .setting-copy { display: grid; gap: var(--space-1); }
.setting-row .setting-copy p { font: var(--type-compact); color: var(--color-text-secondary); }
.trust-table { display: grid; gap: var(--space-3); }
.trust-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); align-items: center; }
.mode-view { max-width: calc(var(--size-content-min) + var(--space-16)); margin: 0 auto; }
.mode-view .page-heading { margin-block: var(--space-6); }
.mode-view .panel { margin-bottom: var(--space-5); }
.mode-caption { padding-block: var(--space-4); color: var(--color-text-secondary); font: var(--type-compact); }
.loading-state { color: var(--color-text-secondary); padding-block: var(--space-8); }
.login-screen { display: grid; place-items: center; min-height: 100dvh; padding: var(--space-6); }
.login-card { background: var(--color-surface); padding: var(--space-10); border-radius: var(--radius-2xl); width: 100%; max-width: calc(var(--size-sidebar) * 2); }
.login-copy { margin: var(--space-10) 0 var(--space-8); }
.login-copy h1 { margin-top: var(--space-3); }
.login-copy p { margin-top: var(--space-4); color: var(--color-text-secondary); }
.login-card .primary { margin-top: var(--space-6); min-height: var(--cta-height); border-radius: var(--radius-pill); justify-content: space-between; font: var(--type-label-touch); }
.login-foot { margin-top: var(--space-8); font: var(--type-meta); color: var(--color-text-secondary); }
.toast { position: fixed; right: var(--space-6); bottom: var(--space-6); max-width: calc(var(--size-content-min) - var(--space-8)); padding: var(--space-3) var(--space-4); border-radius: var(--radius-xl); background: var(--color-inverse); color: var(--color-on-inverse); box-shadow: var(--shadow-overlay); z-index: 100; display: flex; align-items: center; gap: var(--space-4); font: var(--type-compact); }
.toast .icon-button { color: var(--color-on-inverse); }
.toast .icon-button:hover { background: var(--color-inverse); }
dialog { border: 0; padding: var(--space-6); border-radius: var(--radius-xl); background: var(--color-surface); color: var(--color-text); width: calc(100% - var(--space-8)); max-width: calc(var(--size-content-min) + var(--space-8)); max-height: calc(100dvh - var(--space-8)); box-shadow: var(--shadow-overlay); }
dialog::backdrop { background: var(--color-inverse); opacity: 0.35; }
.dialog-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); margin-bottom: var(--space-6); }
.dialog-heading h2 { font: var(--type-title-compact); }
.dialog-heading p { font: var(--type-compact); color: var(--color-text-secondary); margin-top: var(--space-2); }
.dialog-heading .icon-button { margin-top: calc(-1 * var(--space-2)); margin-right: calc(-1 * var(--space-2)); }
.dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-6); border-top: var(--border-width) solid var(--color-border); padding-top: var(--space-5); }
.search-results { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.search-result { justify-content: flex-start; text-align: left; border-color: var(--color-border); }
.mobile-nav, .drawer-shade { display: none; }
body.simple-mode .sidebar, body.simple-mode .capture-top, body.simple-mode .mobile-nav, body.simple-mode .menu-toggle, body.simple-mode .workspace-label, body.simple-mode .header-divider { display: none; }
body.simple-mode .app { grid-template-columns: minmax(0, 1fr); }
body.simple-mode .topbar { padding-inline: var(--space-6); }
body.simple-mode .workspace-footer { padding-bottom: var(--space-6); }
body.family-mode .workspace-footer > span:first-child { display: none; }

@media (min-width: 1280px) {
  .layout-main { grid-template-columns: minmax(var(--size-content-min), 2fr) minmax(var(--size-context-min), 1fr); }
}
@media (max-width: 1279px) {
  .context-column { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (max-width: 1023px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar { display: none; }
  .sidebar.drawer-open { display: flex; position: fixed; inset: 0 auto 0 0; width: var(--size-sidebar); background: var(--color-canvas); z-index: 80; }
  .drawer-shade:not([hidden]) { display: block; position: fixed; inset: 0; border: 0; border-radius: 0; background: var(--color-inverse); opacity: 0.35; width: 100%; height: 100%; z-index: 70; }
  .menu-toggle { display: inline-flex; }
  .topbar { padding: var(--space-4) var(--space-6); }
  .main { padding: var(--space-6); }
  .workspace-footer { padding-inline: var(--space-6); }
}
@media (max-width: 767px) {
  h1 { font: var(--type-title-mobile); }
  .topbar { padding: var(--space-3) var(--space-4); min-height: calc(var(--size-44) + var(--space-6)); }
  .topbar-left { gap: var(--space-2); }
  .topbar-right { gap: var(--space-1); }
  .workspace-label, .header-divider, .clock-label { display: none; }
  .capture-top { width: var(--size-44); padding: 0; }
  .capture-top > span:last-child { display: none; }
  .main { padding: var(--space-6) var(--space-4); }
  .page-heading { flex-wrap: wrap; gap: var(--space-4); }
  .page-heading p { font: var(--type-compact); }
  .heading-actions { width: 100%; }
  .heading-actions .primary { min-height: var(--cta-height); border-radius: var(--radius-pill); }
  .layout-main, .main-column, .context-column { gap: var(--space-4); }
  .context-column { grid-template-columns: 1fr; }
  .goal-list, .workflow-grid { grid-template-columns: 1fr; }
  .board { grid-auto-columns: minmax(var(--size-board-column), 1fr); }
  .domain-tabs { margin-bottom: var(--space-4); }
  .domain-tab { padding-inline: var(--space-3); }
  .workspace-footer { padding: var(--space-4) var(--space-4) calc(var(--size-56) + var(--space-8) + env(safe-area-inset-bottom)); flex-wrap: wrap; }
  .mobile-nav { position: fixed; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); left: 0; right: 0; bottom: 0; padding: var(--space-2) var(--space-2) calc(var(--space-2) + env(safe-area-inset-bottom)); background: var(--color-surface); border-top: var(--border-width) solid var(--color-border); z-index: 50; }
  .mobile-nav a { display: grid; justify-items: center; align-content: center; min-height: var(--size-44); gap: var(--space-1); font: var(--type-meta); color: var(--color-text-secondary); border-radius: var(--radius-md); }
  .mobile-nav a[aria-current=page] { color: var(--color-text); background: var(--color-surface-soft); }
  .toast { left: var(--space-4); right: var(--space-4); bottom: calc(var(--size-56) + var(--space-6) + env(safe-area-inset-bottom)); max-width: none; }
  .form-grid { grid-template-columns: 1fr; }
  .five-fields > div { grid-template-columns: calc(var(--space-16) + var(--space-6)) minmax(0, 1fr); }
  .dialog-actions > button { flex: 1; }
  .login-screen { padding: var(--space-4); }
  .login-card { padding: var(--space-6); }
  .login-copy { margin-block: var(--space-8); }
  .day-strip { gap: var(--space-1); }
  .day-pill { padding-inline: 0; }
  .calendar-toolbar input { width: 100%; }
  .setting-row { flex-wrap: wrap; }
  .trust-row { grid-template-columns: 1fr; gap: var(--space-2); }
  body.simple-mode .topbar { padding-inline: var(--space-4); }
  body.simple-mode .toast { bottom: var(--space-4); }
}