/* TendFolk design system ─ Tokens first: every color, size, radius, and shadow below derives from :root. ─ Spacing: 8px grid. Allowed steps: 4, 8, 12, 16, 24, 32, 40, 48, 64. ─ Type scale: 12, 13, 14, 16, 18, 22, 28 (rem-based). Body copy 16, UI text 14. ─ Radius rule: inputs and buttons 8px, cards and panels 12px, badges and avatars pill. ─ Weight rule: 400 body, 500 labels and buttons, 600 headings and emphasis, 700 wordmark only. ─ Motion rule: 150ms ease for state, 400ms ease for entrance; all gated by prefers-reduced-motion. Full documentation: docs/design-system.md */ :root { /* Spacing (8px grid) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 40px; --sp-8: 48px; /* Type scale */ --fs-xs: 0.75rem; /* 12 — eyebrows, badges */ --fs-sm: 0.8125rem; /* 13 — metadata, fine print */ --fs-md: 0.875rem; /* 14 — UI text, secondary copy */ --fs-base: 1rem; /* 16 — body copy, inputs */ --fs-lg: 1.125rem; /* 18 — panel headings */ --fs-xl: 1.375rem; /* 22 — page headings (min) */ --fs-2xl: 1.75rem; /* 28 — page headings (max) */ /* Surfaces and text */ --bg: #f4f6f8; --surface: #ffffff; --surface-2: #f0f3f6; --border: #dfe6ec; --border-strong: #c9d4de; --ink: #1b2733; --muted: #5b6b7b; --faint: #6b7d8f; /* 4.5:1 on --surface; safe for small text */ /* Accent (calm slate blue — the one accent on the page) */ --accent: #27679b; --accent-strong: #1f5680; --accent-ink: #ffffff; --accent-soft: #e9f1f8; --accent-border: #c3d7e8; --navy: #123047; /* Semantic status (separate from accent) */ --success: #177857; --success-soft: #e5f4ee; --success-border: #b9e0cf; --danger: #b42318; --danger-soft: #fbeae8; --danger-border: #f0c3bd; --warn: #9a6410; --warn-soft: #fdf3e0; --warn-border: #eed49a; --wash: #e9f4f1; --overlay: rgba(10, 16, 22, 0.55); --tooltip-bg: rgba(18, 48, 71, 0.96); /* Shape */ --radius-input: 8px; --radius-card: 12px; /* Elevation */ --shadow-1: 0 1px 2px rgba(18, 38, 58, 0.05); --shadow-2: 0 1px 2px rgba(18, 38, 58, 0.05), 0 8px 24px rgba(18, 38, 58, 0.06); /* Motion */ --ease: cubic-bezier(0.16, 1, 0.3, 1); --speed-state: 0.15s; --speed-enter: 0.4s; /* Layers */ --z-topbar: 10; --z-modal: 30; --z-tooltip: 60; --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; color-scheme: light; } /* Dark theme: follows the header toggle (data-theme="dark" on ). Tokens only — components never branch on theme directly. */ :root[data-theme="dark"] { --bg: #10161d; --surface: #171f28; --surface-2: #1d2733; --border: #2a3745; --border-strong: #3a4a5c; --ink: #e7edf3; --muted: #9daebe; --faint: #8c9dae; --accent: #6ba7d8; --accent-strong: #85b8e2; --accent-ink: #0d1721; --accent-soft: #1a2c3d; --accent-border: #2e4a63; --success: #52c79b; --success-soft: #142d24; --success-border: #23503f; --danger: #f08c82; --danger-soft: #33201d; --danger-border: #5c322c; --warn: #e2b366; --warn-soft: #2e2415; --warn-border: #55401f; --wash: #131f22; --overlay: rgba(0, 0, 0, 0.6); --tooltip-bg: rgba(231, 237, 243, 0.96); --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-2: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 28px rgba(0, 0, 0, 0.3); color-scheme: dark; } * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 96px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; min-height: 100dvh; color: var(--ink); background: linear-gradient(180deg, var(--wash) 0, rgba(0, 0, 0, 0) 320px), var(--bg); background-repeat: no-repeat; background-color: var(--bg); font-family: var(--font-sans); font-size: var(--fs-base); line-height: 1.55; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } button:disabled { cursor: not-allowed; opacity: 0.6; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .skip-link { position: absolute; top: -48px; left: var(--sp-4); z-index: calc(var(--z-tooltip) + 1); padding: var(--sp-2) var(--sp-4); color: var(--accent-ink); background: var(--accent); border-radius: 0 0 var(--radius-input) var(--radius-input); font-weight: 500; text-decoration: none; transition: top var(--speed-state) ease; } .skip-link:focus-visible { top: 0; } h1, h2, h3, p, dl { margin-top: 0; } h1 { margin-bottom: var(--sp-1); font-size: clamp(var(--fs-xl), 2.4vw, var(--fs-2xl)); font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; text-wrap: balance; } h2 { margin-bottom: 0; font-size: var(--fs-lg); font-weight: 600; letter-spacing: -0.01em; } h3 { margin-bottom: var(--sp-1); font-size: var(--fs-md); font-weight: 600; } a { color: var(--accent); } .muted, .fine-print { color: var(--muted); } .fine-print { margin-bottom: 0; font-size: var(--fs-sm); } .fine-print a { color: var(--accent); font-weight: 500; } .eyebrow { margin: 0 0 var(--sp-1); color: var(--muted); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } /* ---------- Top bar ---------- */ .topbar { position: sticky; top: 0; z-index: var(--z-topbar); display: grid; grid-template-columns: minmax(240px, 1fr) auto auto; align-items: center; gap: var(--sp-4); min-height: 64px; padding: var(--sp-2) clamp(var(--sp-4), 3vw, var(--sp-6)); background: color-mix(in srgb, var(--surface) 88%, transparent); border-bottom: 1px solid var(--border); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .brand { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; color: inherit; text-decoration: none; } .brand-mark { display: grid; flex: 0 0 38px; width: 38px; height: 38px; place-items: center; color: #ffffff; background: var(--navy); border-radius: 10px; font-size: var(--fs-md); font-weight: 700; } .brand strong { display: block; font-weight: 700; letter-spacing: -0.01em; } .brand small { display: block; color: var(--muted); font-size: var(--fs-sm); } .topnav { display: flex; gap: 2px; padding: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; } .topnav a { padding: var(--sp-2) var(--sp-4); color: var(--muted); border-radius: 999px; font-size: var(--fs-md); font-weight: 500; text-decoration: none; transition: color var(--speed-state) ease, background var(--speed-state) ease; } .topnav a:hover { color: var(--ink); background: var(--surface); } .account-bar { display: flex; align-items: center; gap: var(--sp-2); color: var(--muted); font-size: var(--fs-md); font-weight: 500; } .account-bar form { margin: 0; } .account-bar button, .theme-toggle { min-height: 36px; padding: 0 var(--sp-3); color: var(--ink); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-input); font-size: var(--fs-sm); font-weight: 500; transition: border-color var(--speed-state) ease, background var(--speed-state) ease; } .account-bar button:hover, .theme-toggle:hover { border-color: var(--border-strong); background: var(--surface-2); } .theme-toggle { display: inline-grid; place-items: center; min-width: 36px; padding: 0; line-height: 1; } .theme-toggle .theme-icon-dark, :root[data-theme="dark"] .theme-toggle .theme-icon-light { display: none; } :root[data-theme="dark"] .theme-toggle .theme-icon-dark { display: block; } /* ---------- Loading button state ---------- */ [data-loading-button].is-loading { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); cursor: wait; opacity: 0.82; } [data-loading-button].is-loading::before { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 999px; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { [data-loading-button].is-loading::before { animation-duration: 1.6s; } } /* ---------- Shell and messages ---------- */ .shell { width: min(1480px, 100%); margin: 0 auto; padding: clamp(var(--sp-4), 3vw, var(--sp-6)); } .narrow-shell { width: min(720px, 100%); } .message-stack { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-4); } .message { padding: var(--sp-3) var(--sp-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-input); font-weight: 500; } .message.success { color: var(--success); background: var(--success-soft); border-color: var(--success-border); } .message.error { color: var(--danger); background: var(--danger-soft); border-color: var(--danger-border); } /* ---------- Context header ---------- */ .context-header { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-6); align-items: flex-end; justify-content: space-between; padding: clamp(var(--sp-2), 2vw, var(--sp-5)) var(--sp-1) var(--sp-5); } .context-sub { margin-bottom: 0; color: var(--muted); font-size: var(--fs-md); } .context-stats { display: flex; flex-wrap: wrap; gap: 0; margin: 0; } .context-stats > div { display: grid; gap: 2px; padding: var(--sp-1) var(--sp-5); border-left: 1px solid var(--border-strong); } .context-stats > div:first-child { padding-left: 0; border-left: 0; } .context-stats dt { color: var(--muted); font-size: var(--fs-sm); } .context-stats dd { margin: 0; font-size: var(--fs-lg); font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } /* ---------- Workspace layout ---------- */ .workspace { display: grid; grid-template-columns: 286px minmax(0, 1fr) 360px; gap: var(--sp-4); align-items: start; } @media (prefers-reduced-motion: no-preference) { .workspace > * { animation: rise var(--speed-enter) var(--ease) both; } .workspace > :nth-child(2) { animation-delay: 0.05s; } .workspace > :nth-child(3) { animation-delay: 0.1s; } } @keyframes rise { from { opacity: 0; transform: translateY(8px); } } .side-panel, .panel, .copilot-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-1); } .side-panel, .copilot-panel { position: sticky; top: 84px; display: grid; gap: var(--sp-5); padding: var(--sp-5); } .panel { padding: var(--sp-5); } .main-grid { display: grid; gap: var(--sp-4); min-width: 0; } .workspace > *, .main-grid > * { min-width: 0; } .section-head, .panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); } .coverage-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius-input); margin-bottom: var(--sp-3); } .coverage-current { margin: 0; font-size: var(--fs-md); } .coverage-form { display: flex; align-items: center; gap: var(--sp-2); } .coverage-form select { padding: var(--sp-1) var(--sp-2); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-input); font-size: var(--fs-sm); } .content-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); } #plan, #timeline, #family-tasks, #copilot, .data-entry-panel { scroll-margin-top: 96px; } /* ---------- Side panel blocks ---------- */ .plan-card, .patient-switcher, .access-box { display: grid; gap: var(--sp-2); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--border); } .plan-card p { margin-bottom: 0; color: var(--muted); font-size: var(--fs-md); } .panel-title-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); } .panel-title-row span { display: grid; min-width: 26px; height: 26px; padding: 0 var(--sp-1); place-items: center; color: var(--accent); background: var(--accent-soft); border-radius: 999px; font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; } .patient-switcher a { display: block; padding: var(--sp-2) var(--sp-3); color: var(--ink); background: transparent; border: 1px solid var(--border); border-radius: var(--radius-input); font-weight: 500; text-decoration: none; transition: border-color var(--speed-state) ease, background var(--speed-state) ease; } .patient-switcher a:hover { border-color: var(--border-strong); background: var(--surface-2); } .patient-switcher a.active { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); } .text-link { padding: 0; color: var(--accent); background: transparent; border: 0; font-size: var(--fs-md); font-weight: 500; } .binder-list { display: grid; gap: var(--sp-3); margin: 0; } .binder-list dt { color: var(--muted); font-size: var(--fs-sm); } .binder-list dd { margin: 2px 0 0; font-weight: 500; } .crisis-box { display: grid; gap: var(--sp-2); padding: var(--sp-4); background: var(--danger-soft); border: 1px solid var(--danger-border); border-radius: var(--radius-card); } .crisis-box p { margin-bottom: 0; color: var(--muted); font-size: var(--fs-md); } .calendar-box { display: grid; gap: var(--sp-2); padding: var(--sp-4); background: var(--accent-soft); border: 1px solid var(--accent-border); border-radius: var(--radius-card); } .calendar-box p { margin-bottom: 0; color: var(--muted); font-size: var(--fs-md); } .calendar-link { display: inline-grid; place-items: center; text-decoration: none; } .team-list { display: grid; gap: var(--sp-2); } .team-member { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: var(--sp-2); align-items: center; padding: var(--sp-2); border-radius: var(--radius-input); } .team-member:hover { background: var(--surface-2); } .avatar { display: grid; width: 38px; height: 38px; place-items: center; color: var(--accent); background: var(--accent-soft); border-radius: 999px; font-size: var(--fs-sm); font-weight: 600; } .team-member strong, .team-member small { display: block; } .team-member strong { font-weight: 500; } .team-member small { color: var(--muted); } .access-box p { margin-bottom: 0; font-size: var(--fs-md); } /* ---------- Next actions and week strip ---------- */ .action-stack { display: grid; gap: var(--sp-3); } .next-action { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-4); align-items: center; padding: var(--sp-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-1); transition: border-color var(--speed-state) ease; } .next-action:hover { border-color: var(--border-strong); } .next-action p { margin-bottom: 0; color: var(--muted); font-size: var(--fs-md); } .week-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); } .day-chip { display: grid; gap: 2px; min-height: 74px; padding: var(--sp-3) var(--sp-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); } .day-chip strong { color: var(--muted); font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; } .day-chip small { color: var(--faint); font-size: var(--fs-sm); } .day-chip span { font-size: var(--fs-md); font-weight: 500; } .day-chip.risk { background: var(--danger-soft); border-color: var(--danger-border); } .day-chip.visit { background: var(--accent-soft); border-color: var(--accent-border); } .day-chip.paper { background: var(--surface-2); border-color: var(--border); } .day-chip.med { background: var(--warn-soft); border-color: var(--warn-border); } /* ---------- List rows ---------- */ .row-item, .timeline-item, .task-item { border-top: 1px solid var(--border); } .row-item { padding: var(--sp-4) 0; } .row-item:last-child, .timeline-item:last-child, .task-item:last-child { padding-bottom: 0; } .row-item strong, .row-item span { display: block; } .row-item strong { font-weight: 600; } .row-item span, .task-item small { color: var(--muted); font-size: var(--fs-sm); } .row-item p, .timeline-item p { margin-bottom: 0; color: var(--muted); font-size: var(--fs-md); } .timeline-item { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-4) 0; } .timeline-item > span { color: var(--muted); font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; } .timeline-item strong { font-weight: 600; } .task-item { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--sp-3); align-items: start; padding: var(--sp-4) 0; } .task-item > div:not(.item-actions) { min-width: 0; } .task-item > .item-actions { grid-column: 2; margin-top: 0; } .task-item strong { font-weight: 600; } .priority { display: inline-flex; align-items: center; justify-content: center; min-height: 26px; padding: 3px var(--sp-2); color: var(--accent); background: var(--accent-soft); border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; } .priority.high { color: var(--danger); background: var(--danger-soft); } .priority.medium { color: var(--warn); background: var(--warn-soft); } .appointment-actions, .item-actions, .document-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-top: var(--sp-2); } .appointment-actions form, .item-actions form { margin: 0; } .document-actions a { color: var(--accent); font-weight: 500; overflow-wrap: anywhere; } .document-summary { margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-input); font-size: var(--fs-md); } .document-summary + .mini-btn, .row-item > .mini-btn { margin-top: var(--sp-2); } /* ---------- Empty states ---------- */ .empty-state { display: grid; gap: var(--sp-1); margin-top: var(--sp-3); padding: var(--sp-5) var(--sp-4); text-align: center; background: var(--surface-2); border: 1px dashed var(--border-strong); border-radius: var(--radius-card); } .empty-state strong { font-weight: 600; } .empty-state p { margin: 0; color: var(--muted); font-size: var(--fs-md); } .empty-state a { justify-self: center; margin-top: var(--sp-2); } /* ---------- Buttons ---------- */ .primary-btn, .secondary-btn, .icon-btn, .mini-btn, .ghost-btn, .action-grid button { min-height: 38px; border: 1px solid transparent; border-radius: var(--radius-input); font-size: var(--fs-md); font-weight: 500; transition: background var(--speed-state) ease, border-color var(--speed-state) ease, transform 0.1s ease; } .primary-btn:active, .secondary-btn:active, .icon-btn:active, .mini-btn:active, .ghost-btn:active, .action-grid button:active { transform: scale(0.98); } @media (prefers-reduced-motion: reduce) { .primary-btn:active, .secondary-btn:active, .icon-btn:active, .mini-btn:active, .ghost-btn:active, .action-grid button:active { transform: none; } } .primary-btn { padding: 0 var(--sp-4); color: var(--accent-ink); background: var(--accent); } .primary-btn:hover { background: var(--accent-strong); } .secondary-btn, .icon-btn, .action-grid button { color: var(--ink); background: var(--surface); border-color: var(--border); } .secondary-btn:hover, .icon-btn:hover, .action-grid button:hover { border-color: var(--border-strong); background: var(--surface-2); } .secondary-btn { padding: 0 var(--sp-4); } .ghost-btn { padding: 0 var(--sp-4); color: var(--accent); background: var(--accent-soft); border-color: var(--accent-border); } .ghost-btn:hover { border-color: var(--accent); } .inline-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); } .mini-btn { min-height: 30px; padding: 0 var(--sp-2); color: var(--accent); background: transparent; border-color: var(--border); font-size: var(--fs-sm); } .mini-btn:hover { background: var(--accent-soft); border-color: var(--accent-border); } .danger-btn { color: var(--danger); } .danger-btn:hover { background: var(--danger-soft); border-color: var(--danger-border); } .icon-btn { min-width: 64px; padding: 0 var(--sp-3); font-size: var(--fs-sm); } .cancel-btn { display: inline-grid; place-items: center; min-height: 38px; padding: 0 var(--sp-4); color: var(--ink); text-decoration: none; } /* ---------- Tooltip ---------- */ .ui-tooltip { position: fixed; z-index: var(--z-tooltip); max-width: min(280px, calc(100vw - 24px)); padding: var(--sp-2) var(--sp-2); color: var(--surface); background: var(--tooltip-bg); border-radius: var(--radius-input); box-shadow: var(--shadow-2); font-size: var(--fs-sm); font-weight: 500; line-height: 1.35; pointer-events: none; } :root[data-theme="dark"] .ui-tooltip { color: var(--bg); } /* ---------- Copilot panel ---------- */ .copilot-panel { gap: var(--sp-4); } .copilot-suggestion { display: grid; gap: 3px; padding: var(--sp-3) var(--sp-4); text-align: left; background: var(--accent-soft); border: 1px solid var(--accent-border); border-radius: var(--radius-input); font-size: var(--fs-md); transition: border-color var(--speed-state) ease; } button.copilot-suggestion:hover { border-color: var(--accent); } .copilot-suggestion strong { font-weight: 600; } .copilot-suggestion span { color: var(--muted); } textarea { width: 100%; min-height: 120px; resize: vertical; padding: var(--sp-3); color: var(--ink); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-input); } textarea:focus-visible { background: var(--surface); } .action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); } .answer-box { min-height: 220px; padding: var(--sp-4); overflow-wrap: anywhere; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-input); font-size: var(--fs-md); } .answer-box p { margin-bottom: 0; } .answer-mode { display: inline-block; margin-bottom: var(--sp-2); padding: 2px var(--sp-2); color: var(--success); background: var(--success-soft); border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; } .loading-note { margin-bottom: var(--sp-3); font-size: var(--fs-sm); } .answer-skeleton { display: grid; gap: var(--sp-2); } .answer-skeleton span { height: 12px; border-radius: 6px; background: var(--border); } .answer-skeleton span:nth-child(2) { width: 92%; } .answer-skeleton span:nth-child(3) { width: 78%; } .answer-skeleton span:nth-child(4) { width: 55%; } @media (prefers-reduced-motion: no-preference) { .answer-skeleton span { background: linear-gradient(90deg, var(--border) 25%, var(--surface-2) 45%, var(--border) 65%); background-size: 200% 100%; animation: shimmer 1.4s ease infinite; } } @keyframes shimmer { from { background-position: 120% 0; } to { background-position: -80% 0; } } .copilot-share-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); } .share-status { padding: var(--sp-2) var(--sp-3); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-input); } .print-answer, .print-answer-btn[hidden], .email-answer-btn[hidden] { display: none; } .print-answer pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; } /* ---------- Forms ---------- */ .record-form, .auth-form, .access-box form { display: grid; gap: var(--sp-4); } .field, .record-field { display: grid; gap: var(--sp-1); } .field label, .record-field label, .form-grid label, .access-box label { color: var(--ink); font-size: var(--fs-sm); font-weight: 500; } .field-help, .helptext { color: var(--muted); font-size: var(--fs-sm); } .field-help ul { margin: var(--sp-1) 0 0; padding-left: var(--sp-4); } .form-control, .field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea { width: 100%; min-height: 38px; padding: var(--sp-2) var(--sp-3); color: var(--ink); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-input); transition: border-color var(--speed-state) ease; } .form-control:hover, .field input:hover, .field select:hover, .field textarea:hover { border-color: var(--faint); } textarea.form-control { min-height: 84px; } .errorlist { margin: 0; padding: 0; color: var(--danger); font-size: var(--fs-sm); list-style: none; } .field-invalid .form-control { border-color: var(--danger); } .form-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; } .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); margin-top: var(--sp-4); } .form-grid details { align-self: start; padding: var(--sp-4); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-card); } .form-grid details[open] { background: var(--surface); } .form-grid summary { cursor: pointer; font-weight: 600; } .form-grid form { display: grid; gap: var(--sp-4); margin-top: var(--sp-4); } .document-file-field { gap: var(--sp-3); } .current-upload, .replace-upload { display: grid; gap: var(--sp-1); } .current-upload span, .replace-upload span { color: var(--muted); font-size: var(--fs-sm); } .current-upload a { color: var(--accent); font-weight: 500; overflow-wrap: anywhere; } .clear-upload { display: flex; gap: var(--sp-2); align-items: center; width: fit-content; padding: var(--sp-2) var(--sp-3); color: var(--ink); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-input); font-size: var(--fs-md); } .clear-upload input { width: 16px; height: 16px; } /* ---------- Auth pages ---------- */ .auth-page { min-height: 100dvh; background: linear-gradient(180deg, var(--wash) 0, rgba(0, 0, 0, 0) 60%), var(--bg); } .auth-shell { display: grid; min-height: 100dvh; place-items: center; padding: var(--sp-5); } .auth-card { width: min(460px, 100%); padding: clamp(var(--sp-5), 5vw, var(--sp-6)); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-2); } @media (prefers-reduced-motion: no-preference) { .auth-card { animation: rise var(--speed-enter) var(--ease) both; } } .auth-brand { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-5); } .auth-brand strong { font-weight: 700; letter-spacing: -0.01em; } .auth-card h1 { font-size: var(--fs-xl); } .auth-intro, .onboarding-copy { color: var(--muted); } .auth-form { margin-top: var(--sp-4); } .auth-card .fine-print { margin-top: var(--sp-4); } .auth-disclaimer { padding-top: var(--sp-4); border-top: 1px solid var(--border); color: var(--faint); } /* ---------- Site footer ---------- */ .site-footer { width: min(1480px, 100%); margin: 0 auto; padding: var(--sp-5) clamp(var(--sp-4), 3vw, var(--sp-6)) var(--sp-6); color: var(--muted); font-size: var(--fs-sm); } .site-footer p { margin: 0; } /* ---------- Modals and dialogs ---------- */ .modal { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: var(--sp-4); background: var(--overlay); } .modal[hidden] { display: none; } .modal-card { position: relative; width: min(540px, 100%); padding: var(--sp-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-2); } @media (prefers-reduced-motion: no-preference) { .modal:not([hidden]) .modal-card { animation: rise 0.25s var(--ease) both; } } .modal-card ol { margin-bottom: 0; padding-left: var(--sp-5); } .modal-card li + li { margin-top: var(--sp-2); } .close-btn { position: absolute; top: var(--sp-3); right: var(--sp-3); width: 36px; height: 36px; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-input); font-size: 1.25rem; line-height: 1; } .close-btn:hover { color: var(--ink); background: var(--surface-2); } .explanation-modal-card { width: min(780px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); overflow: auto; } .explanation-modal-card pre { max-height: 58vh; padding: var(--sp-4); overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-input); font: inherit; } .confirm-dialog { width: min(400px, calc(100vw - 40px)); padding: var(--sp-5); color: var(--ink); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-2); } .confirm-dialog::backdrop { background: var(--overlay); } .confirm-dialog h2 { margin-bottom: var(--sp-2); } .confirm-dialog p { margin-bottom: var(--sp-4); color: var(--muted); } .confirm-dialog .form-actions { justify-content: flex-end; } .confirm-dialog .danger-solid { color: #ffffff; background: var(--danger); } .confirm-dialog .danger-solid:hover { background: var(--danger); filter: brightness(0.92); } :root[data-theme="dark"] .confirm-dialog .danger-solid { color: #1c0d0b; } /* ---------- Responsive ---------- */ @media (max-width: 1240px) { .workspace { grid-template-columns: minmax(0, 1fr) 350px; } .side-panel { position: static; grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); } .side-panel > h2 { grid-column: 1 / -1; } } @media (max-width: 980px) { .topbar { grid-template-columns: 1fr auto; } .topnav { grid-column: 1 / -1; justify-content: center; order: 3; } .account-bar { grid-column: 1 / -1; order: 4; } .workspace, .content-columns { grid-template-columns: minmax(0, 1fr); } .context-header { align-items: flex-start; flex-direction: column; } .side-panel { grid-template-columns: 1fr; order: 3; } .main-grid { order: 1; } .copilot-panel { position: static; order: 2; } } @media (max-width: 700px) { .topbar { position: static; grid-template-columns: 1fr; } .topnav { width: 100%; justify-content: flex-start; overflow-x: auto; } .shell { padding: var(--sp-4); } .context-header { padding-bottom: var(--sp-4); } .context-stats > div { padding: var(--sp-1) var(--sp-4); } .action-grid { grid-template-columns: 1fr; } .section-head, .panel-head { align-items: flex-start; flex-direction: column; } .next-action { grid-template-columns: minmax(0, 1fr); } .week-strip { display: flex; overflow-x: auto; padding-bottom: 2px; } .day-chip { flex: 0 0 150px; } .primary-btn, .secondary-btn, .icon-btn, .mini-btn, .ghost-btn, .action-grid button { width: 100%; } .timeline-item, .task-item { grid-template-columns: 1fr; } .task-item > .item-actions { grid-column: 1; } .form-grid { grid-template-columns: 1fr; } } /* ---------- Print ---------- */ @media print { @page { margin: 0.55in; } body { background: #ffffff; } body * { display: none !important; } .shell, .workspace, .copilot-panel, .print-answer, .print-answer * { display: block; } .copilot-panel { position: static; width: auto; max-width: none; padding: 0; border: 0; box-shadow: none; background: #ffffff; overflow: visible; } .print-answer { color: #111827; font-family: var(--font-sans); padding: 0; overflow: visible; } .print-answer h1 { max-width: none; margin-bottom: 12px; font-size: 24pt; line-height: 1.15; } .print-answer p { font-size: 11pt; } .print-answer pre { display: block; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: 11pt; line-height: 1.45; } }