/* Shared interface foundation. Preserve cover artwork and the existing product language.
   Radius scale: panels 16px, controls 10px, badges/avatars fully rounded.
   Layers: sticky navigation 20, mobile submit bar 15, toast 50, native dialogs top layer. */
@font-face {
  font-family: "Noto Sans SC UI";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/noto-sans-sc-ui.woff2") format("woff2");
}
:root {
  --font-sans: "Noto Sans SC UI", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --serif: "Iowan Old Style", "Songti SC", "STSong", "Noto Sans SC UI", "Noto Sans SC", serif;
  --ink: #23372d;
  --ink-soft: #475c50;
  --muted: #58695e;
  --surface: #f3f6f3;
  --paper: #fdfefd;
  --paper-secondary: #f6f8f6;
  --control: #fdfefd;
  --line: #dce4de;
  --line-strong: #bccac0;
  --accent: #1b684c;
  --accent-2: #124f38;
  --accent-soft: #e6f1e9;
  --accent-panel: var(--accent-soft);
  --on-accent: #fcfefc;
  --shadow-float: 0 16px 48px rgba(30, 61, 43, .1), 0 2px 8px rgba(30, 61, 43, .04);
  --shadow-paper: 0 8px 32px rgba(30, 61, 43, .055), 0 1px 3px rgba(30, 61, 43, .04);
  --focus: #2c805b;
  --theme-paper: var(--paper);
  --theme-surface: var(--paper-secondary);
  --theme-line: var(--line);
  --ambient-a: var(--surface);
  --ambient-b: var(--surface);
}
.theme-default { --accent: #1b684c; --accent-2: #124f38; --accent-soft: #e6f1e9; }
:is(.theme-default, .theme-health, .theme-daily, .theme-finance) {
  --theme-paper: var(--paper);
  --theme-surface: var(--paper-secondary);
  --theme-line: var(--line);
  --ambient-a: var(--surface);
  --ambient-b: var(--surface);
}
/* Semantic status colors remain distinct from decorative brand colors. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f0f4f1;
  --ink-soft: #c5d0c8;
  --muted: #9aa99f;
  --surface: #101512;
  --paper: #171e1a;
  --paper-secondary: #1d2621;
  --control: #111814;
  --line: #2d3a33;
  --line-strong: #4b5d53;
  --accent: #8fd3ae;
  --accent-2: #bae7cb;
  --accent-soft: #20382b;
  --accent-panel: color-mix(in srgb, var(--accent) 7%, var(--paper-secondary));
  --on-accent: #102219;
  --focus: #a5dfbd;
  --danger: #f2aaa4;
  --danger-soft: #3a2524;
  --warn: #e5c77f;
  --warn-soft: #332f1f;
  --tone-pending-fg: #ecd38c;
  --tone-pending-bg: #332f1f;
  --tone-pending-border: #6d6240;
  --tone-progress-fg: #b7d5ee;
  --tone-progress-bg: #1d3140;
  --tone-progress-border: #48667d;
  --tone-success-fg: #b6e1c1;
  --tone-success-bg: #203427;
  --tone-success-border: #486b53;
  --tone-danger-fg: #f2b4ad;
  --tone-danger-bg: #3a2524;
  --tone-danger-border: #7b4e49;
  --tone-neutral-fg: #cbd5ce;
  --tone-neutral-bg: #252f29;
  --tone-neutral-border: #4d5e54;
  --shadow-float: 0 22px 64px rgba(0, 0, 0, .34), 0 2px 10px rgba(0, 0, 0, .2);
  --shadow-paper: 0 12px 36px rgba(0, 0, 0, .2), 0 1px 3px rgba(0, 0, 0, .22);
}
[data-theme="dark"] .theme-default { --accent: #8fd3ae; --accent-2: #bae7cb; --accent-soft: #20382b; }
[data-theme="dark"] .theme-health { --accent: #b3d2b9; --accent-2: #d0e4d3; --accent-soft: #2f4134; }
[data-theme="dark"] .theme-daily { --accent: #e7b59d; --accent-2: #f4d2be; --accent-soft: #42362f; }
[data-theme="dark"] .theme-finance { --accent: #accddd; --accent-2: #cfdfeb; --accent-soft: #2c3c43; }
[data-theme="dark"] :is(.theme-default, .theme-health, .theme-daily, .theme-finance) {
  --theme-paper: var(--paper);
  --theme-surface: var(--paper-secondary);
  --theme-line: var(--line);
  --ambient-a: var(--surface);
  --ambient-b: var(--surface);
}
[data-theme="dark"] :is(input, textarea, select) { background: var(--control); }
[data-theme="dark"] .auth-layout > .promise-garden { background: var(--accent-panel); }
[data-theme="dark"] .auth-layout .promise-garden-scene { filter: saturate(1.12) brightness(1.04) contrast(1.04); }
[data-theme="dark"] .next-action, [data-theme="dark"] .action-panel .panel-head { background: var(--accent-panel); }
[data-theme="dark"] .nav-button.active { background: color-mix(in srgb, var(--accent) 10%, var(--paper-secondary)); }
[data-theme="dark"] .management-shell .commitment-card.active { background: color-mix(in srgb, var(--accent) 11%, var(--paper)); }
body { font-family: var(--font-sans); font-size: 14px; line-height: 1.65; }
button, input, textarea, select { font-family: inherit; }
button { touch-action: manipulation; }
:where(button, a, input, textarea, select, summary):focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
:where(input, textarea, select)::placeholder { color: var(--muted); opacity: 1; }
input, textarea, select { min-height: 46px; padding: 11px 13px; background: var(--paper); font-size: 14px; }
input:disabled { background: var(--paper-secondary); }
input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
label, .participant-source-field legend, .cover-fieldset legend { font-size: 13px; }
.hint, .form-error { font-size: 12px; line-height: 1.65; }
.form-row { min-width: 0; gap: 8px; align-content: start; }
.button { min-height: 44px; padding: 10px 16px; border-radius: var(--radius-control); background: var(--paper); font-size: 13px; font-weight: 600; line-height: 1.4; }
.button.small { min-height: 36px; padding: 7px 11px; font-size: 12px; }
.button.primary { color: var(--on-accent); border-color: var(--accent); background: var(--accent); }
.button.primary:hover { color: var(--on-accent); }
.button.quiet { color: var(--ink-soft); }
.button.quiet:hover { background: var(--accent-soft); }
.button:disabled:hover { color: inherit; border-color: var(--line); }
.button.primary:disabled:hover { color: var(--on-accent); border-color: var(--accent); background: var(--accent); }
.icon { width: 20px; height: 20px; flex: 0 0 auto; fill: currentColor; vertical-align: middle; }
.button.small .icon { width: 16px; height: 16px; }
.icon-button { width: 40px; min-height: 40px; padding: 8px; background: transparent; }
.appearance-control { min-height: 38px; padding: 8px 10px; color: var(--ink-soft); background: transparent; font-size: 12px; }
.appearance-control .icon { width: 18px; height: 18px; }
.badge { font-size: 11px; font-weight: 600; box-shadow: none; }
.badge.tone-info { --badge-fg: var(--tone-progress-fg); --badge-bg: var(--tone-progress-bg); --badge-border: var(--tone-progress-border); }
.skip-link { position: fixed; z-index: 50; top: 10px; left: 16px; padding: 10px 16px; border-radius: 10px; color: var(--on-accent); background: var(--accent); transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.app-shell, .standalone-shell { background: var(--surface); }
.app-shell::before { display: none; }
.topbar { height: 72px; padding-inline: 28px; border-color: var(--line); background: var(--paper); backdrop-filter: none; }
.brand-copy strong { font-size: 16px; font-weight: 650; letter-spacing: .04em; }
.brand-copy small { margin-top: 5px; font-size: 11px; }
.brand-mark { color: #fcfefc; background: #1b684c; }
.top-actions { gap: 12px; }
.user-chip { gap: 10px; padding-inline: 14px 6px; border-left: 1px solid var(--line); font-size: 13px; }
.user-avatar { display: grid; flex: 0 0 auto; width: 36px; height: 36px; place-items: center; border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line)); border-radius: 50%; color: var(--accent); background: var(--accent-soft); font-size: 14px; font-weight: 600; }
.user-role { padding-left: 0; border: 0; font-size: 11px; }
.workspace { width: min(1600px, 100%); min-height: calc(100dvh - 72px); grid-template-columns: 292px minmax(0, 1fr); margin-inline: auto; }
.sidebar { position: sticky; top: 72px; align-self: start; max-height: calc(100dvh - 72px); padding: 24px 20px; overflow-y: auto; scrollbar-width: thin; border-color: var(--line); background: var(--paper-secondary); backdrop-filter: none; }
.nav-row { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); gap: 5px; padding: 0; border: 0; border-radius: 0; background: transparent; }
.nav-button { display: flex; align-items: center; gap: 13px; min-height: 44px; padding: 10px 14px; border-radius: var(--radius-control); color: var(--ink-soft); font-size: 14px; text-align: left; white-space: nowrap; }
.nav-button .icon { width: 19px; height: 19px; }
.nav-button:hover { background: var(--paper); }
.nav-button.active { color: var(--accent); background: var(--accent-soft); font-weight: 650; }
.nav-count { display: grid; min-width: 23px; height: 23px; margin-left: auto; padding-inline: 5px; place-items: center; border-radius: 6px; color: var(--accent); background: var(--accent-soft); font-size: 11px; }
.sidebar-head { gap: 8px; margin: 28px 0 16px; }
.sidebar-head h2 { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.sidebar-count { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.sidebar-actions { display: flex; gap: 6px; }
.list-toggle { display: none; }
.person-filter { margin: 0 0 18px; gap: 8px; }
.person-filter label { font-size: 12px; }
.person-filter select { min-height: 40px; font-size: 12px; }
.commitment-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; overflow: visible; border: 0; background: transparent; }
.commitment-card { padding: 15px 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.commitment-card:last-child { border-bottom: 1px solid var(--line); }
.commitment-card:hover { border-color: var(--line-strong); background: var(--paper); }
.commitment-card.active { border-color: color-mix(in srgb, var(--accent) 52%, var(--line)); background: var(--accent-soft); box-shadow: none; }
.commitment-card::before { display: none; }
.list-item-top { margin-bottom: 10px; }
.list-item-top .badge { min-height: 22px; padding: 3px 7px; font-size: 10px; }
.list-item-id, .list-item-date { font-size: 11px; font-weight: 400; }
.list-item-title { font-size: 14px; font-weight: 600; line-height: 1.65; }
.list-item-meta { min-height: 28px; margin-top: 14px; }
.mini-avatar { border-color: var(--paper); color: var(--on-accent); }
.mini-avatar small { right: -9px; bottom: -5px; padding: 0 3px; border-color: var(--paper); font-size: 8px; }
.list-pager { gap: 3px; }
.list-pager .button { padding: 5px 2px; border-color: transparent; font-size: 11px; }
.list-pager span { font-size: 10px; }
.inactive-group summary span { background: var(--accent-soft); }
.main { padding: 32px clamp(24px, 3vw, 48px) 56px; }
.main:focus { outline: none; }
.main-inner { width: min(1040px, 100%); }
.panel { border-color: var(--line); background: var(--paper); box-shadow: var(--shadow-paper); }
.panel-head { padding: 24px 28px; border-color: var(--line); }
.panel-head h2 { font-size: 23px; font-weight: 650; letter-spacing: -.02em; }
.panel-head h3 { font-size: 18px; }
.panel-head p { margin-top: 8px; font-size: 13px; line-height: 1.7; }
.panel-body { padding: 28px; }
.page-panel:not(.create-panel) { border: 0; background: transparent; box-shadow: none; }
.page-panel:not(.create-panel) > .panel-head { padding: 0 0 24px; border: 0; }
.page-panel:not(.create-panel) > .panel-body { padding: 0; }
/* Compact imagery leaves room for the terms and the next action. */
.contract-document { box-shadow: var(--shadow-paper); }
.contract-visual-hero, .standalone-shell .contract-visual-hero { min-height: 250px; padding: 24px; }
.contract-heading, .standalone-shell .contract-heading { gap: 20px; padding: 22px 24px; border-color: color-mix(in srgb, var(--paper) 70%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--paper) 95%, transparent); box-shadow: 0 6px 18px rgba(20, 40, 26, .12); backdrop-filter: blur(12px); }
.hero-title { margin: 10px 0 8px; font-family: var(--font-sans); font-size: clamp(24px, 2.35vw, 32px); font-weight: 600; line-height: 1.45; letter-spacing: -.035em; overflow-wrap: anywhere; }
.document-overline { font-size: 11px; letter-spacing: .02em; }
.contract-intro { font-size: 12px; line-height: 1.8; }
.document-actions { flex-direction: column; align-items: flex-end; }
.contract-heading .button.quiet { background: var(--paper); }
.contract-document .hero-panel, .standalone-shell .contract-document .hero-panel { padding: 26px 28px; background: transparent; }
.contract-reading-grid, .standalone-shell .contract-reading-grid { gap: 24px; margin-top: 0; padding: 0 0 22px; border-top: 0; }
.field-label, .contract-milestones span { font-size: 12px; }
.clause-copy { margin-top: 10px; font-family: var(--font-sans); font-size: 17px; font-weight: 400; line-height: 1.9; }
.contract-milestones > div { grid-template-columns: 80px minmax(0, 1fr); gap: 8px; padding: 8px 0 8px 20px; }
.contract-milestones strong { font-size: 13px; font-weight: 550; font-variant-numeric: tabular-nums; }
.next-action { gap: 16px 24px; margin: 22px 0; padding: 20px; border-color: color-mix(in srgb, var(--accent) 26%, var(--line)); background: var(--accent-panel); box-shadow: none; }
.next-action h2 { margin-top: 0; font-size: 17px; font-weight: 600; }
.next-action p { font-size: 12px; line-height: 1.8; }
.next-action .section-label { display: none; }
.next-action-buttons { gap: 8px; }
.next-action-buttons .button { min-height: 42px; padding: 9px 12px; font-size: 12px; }
.contract-parties, .standalone-shell .contract-parties { margin-top: 22px; }
.participant-credit { padding-top: 20px; }
.credit-avatar { color: var(--on-accent); }
.credit-avatar small { font-size: 9px; }
.participant-copy strong { font-size: 14px; font-weight: 600; }
.credit-metrics { margin-top: 7px; font-size: 11px; }
.contract-discussion { margin-top: 22px; padding-top: 20px; }
.discussion-heading .section-label { display: none; }
.discussion-heading h2 { font-size: 16px; font-weight: 600; }
.discussion-heading > span { font-size: 12px; }
.discussion-empty { padding: 18px; background: var(--paper-secondary); font-size: 12px; }
.discussion-form { padding: 16px; background: var(--paper-secondary); }
.discussion-form label { font-size: 12px; }
.discussion-form-actions span, .discussion-readonly { font-size: 12px; }
.discussion-message { background: var(--paper-secondary); }
.discussion-message header strong { font-size: 13px; }
.discussion-message p { font-size: 14px; }
.discussion-message time { font-size: 11px; }
.record-browser { box-shadow: none; }
.record-tabs { gap: 4px; padding: 6px; background: var(--paper-secondary); }
.record-tab { min-height: 46px; padding: 12px 14px; }
.record-tab.active { color: var(--accent); background: var(--accent-soft); }
.record-tab:hover { background: var(--paper); }
.record-tab strong { font-size: 13px; font-weight: 600; }
.record-tab small { font-size: 11px; }
.record-tab-panel { padding: 12px 24px 20px; }
.record { padding: 20px; border-color: var(--line); }
.record-meta, .record-copy { font-size: 12px; line-height: 1.8; }
.record-title { font-size: 14px; font-weight: 600; }
.record-list > .empty-list { padding: 36px 16px; font-size: 13px; }
/* Forms retain their business field order and grouped sections. */
.create-panel .panel-head { padding: 28px; }
.create-panel .panel-body { padding: 0 28px 28px; }
.form-grid.create-timing-grid { align-items: start; }
.create-form-sections { border: 0; background: transparent; }
.create-form-section { padding: 26px 0; }
.create-form-section-participants { background: transparent; }
.create-section-heading h3 { font-size: 16px; font-weight: 600; }
.create-section-heading p { max-width: 65ch; margin-top: 6px; font-size: 12px; line-height: 1.8; }
.create-section-heading { margin-bottom: 20px; }
.create-form-section + .create-form-section { border-color: var(--line); }
.performance-mode-option > span { min-height: 80px; padding: 14px 38px 14px 14px; border-radius: var(--radius-control); background: var(--paper-secondary); }
.performance-mode-option small, .participant-link-notice span { font-size: 12px; line-height: 1.6; }
.performance-mode-option > span::after { background: var(--paper); box-shadow: inset 0 0 0 3px var(--paper); }
.performance-mode-option input:checked + span { background: var(--accent-soft); }
.performance-mode-option input:disabled + span { opacity: .6; cursor: not-allowed; }
.participant-link-notice { background: var(--accent-soft); }
.cover-choice-card { min-height: 94px; padding: 12px; border-radius: var(--radius-control); background: var(--paper-secondary); }
.cover-choice-art { height: 62px; }
.cover-choice-copy strong { font-size: 13px; }
.cover-choice-copy small { font-size: 11px; line-height: 1.6; }
.cover-choice-check { background: var(--paper); }
.cover-choice-card:has(input:checked) .cover-choice-check { color: var(--on-accent); }
.stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.stat-card { padding: 24px; border-color: var(--line); border-radius: var(--radius-container); background: var(--paper); box-shadow: var(--shadow-paper); }
.stat-person, .member-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.stat-person > div, .member-identity > div { min-width: 0; }
.stat-person .user-avatar { width: 42px; height: 42px; }
.stat-name { font-size: 16px; font-weight: 600; }
.member-email { margin-top: 3px; font-size: 12px; overflow-wrap: anywhere; }
.stat-metrics { gap: 22px 10px; margin-top: 22px; padding-top: 20px; border: 0; border-top: 1px solid var(--line); }
.stat-metric { padding: 0; border: 0; text-align: left; }
.stat-metric strong { color: var(--ink); font-size: 25px; font-weight: 550; font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.stat-metric span { font-size: 12px; }
.member { padding: 20px 0; }
.member-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.page-panel .record-list { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-container); background: var(--paper); }
.page-panel .record { border-left-width: 3px; border-color: var(--line); }
.page-panel .notification-unread { border-left-color: var(--accent); background: var(--accent-soft); }
.empty-state { display: grid; justify-items: center; gap: 12px; padding: 64px 24px; text-align: center; }
.empty-state > .icon { box-sizing: content-box; width: 28px; height: 28px; margin-bottom: 4px; padding: 18px; border-radius: 16px; color: var(--accent); background: var(--accent-soft); }
.empty-state h3, .empty-state strong { margin: 0; font-size: 17px; font-weight: 600; }
.empty-state p { max-width: 32ch; margin: 0; color: var(--muted); font-size: 13px; }
.empty-state.compact { gap: 8px; padding: 28px 12px; }
.empty-state.compact > .icon { width: 22px; height: 22px; padding: 12px; }
.empty-state.compact strong { font-size: 13px; }
.empty-state.compact p { font-size: 12px; }
/* A composed welcome, using the existing garden instead of replacing its identity. */
.auth-shell, .invite-shell { background: var(--surface); }
.auth-utility { position: absolute; top: 24px; right: 32px; }
.auth-with-story { position: relative; padding: 88px 32px 64px; }
.auth-layout { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: stretch; gap: 0; width: min(1080px, 100%); overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--paper); box-shadow: var(--shadow-float); }
.auth-layout > .promise-garden { display: flex; flex-direction: column; justify-content: center; padding: 44px 32px; background: var(--accent-panel); }
.auth-layout .promise-garden-scene { margin: 0 auto; width: min(460px, 100%); }
.auth-layout .promise-garden h2 { font-family: var(--font-sans); font-size: 24px; font-weight: 500; line-height: 1.6; letter-spacing: -.04em; }
.promise-garden figcaption p, .promise-garden-steps li { font-size: 12px; }
.auth-layout > .auth-card { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 52px 48px; border: 0; border-left: 1px solid var(--line); border-radius: 0; background: var(--paper); box-shadow: none; }
.auth-card .brand { font-size: 16px; font-weight: 600; }
.auth-layout .auth-card h1 { margin: 30px 0 20px; font-family: var(--font-sans); font-size: 30px; font-weight: 600; line-height: 1.55; letter-spacing: -.04em; }
.auth-card > .hint { margin: 0 0 26px; font-size: 12px; }
.auth-form { gap: 20px; }
.auth-form input { min-height: 48px; font-size: 14px; }
.button.auth-submit { min-height: 48px; margin-top: 6px; font-size: 14px; }
.auth-mode-switch { margin-bottom: 24px; background: var(--paper-secondary); }
.auth-mode-switch button.active { color: var(--accent); background: var(--paper); }
.password-field { position: relative; }
.password-field input { padding-right: 50px; }
.password-toggle { position: absolute; top: 2px; right: 2px; display: grid; width: 44px; height: calc(100% - 4px); min-height: 40px; padding: 0; place-items: center; border: 0; border-radius: 8px; color: var(--muted); background: transparent; }
.password-toggle:hover { color: var(--accent); background: var(--accent-soft); }
.promise-garden-toggle { border-color: var(--line-strong); background: var(--paper); }
.invite-card, .invite-note-dialog, .invite-claim-card, .themed-page .invite-card { background: var(--paper); }
.themed-page .invite-shell { background: var(--surface); }
.invite-claim-layout { background: var(--paper); }
.claim-contract-preview { background: var(--paper-secondary); }
.claim-heading h1 { font-family: var(--font-sans); font-weight: 550; }
.claim-heading > span, .claim-footnote, .invite-note-surface header p { font-size: 12px; }
.claim-terms span { font-size: 11px; }
.claim-terms p { font-family: var(--font-sans); font-size: 15px; }
.claim-current-form, .invite-cover-countdown.claim-countdown, .invite-discussion, .invite-box { background: var(--accent-soft); }
.claim-current-form span { font-size: 12px; }
.claim-divider { font-size: 12px; }
.invite-discussion { background: var(--paper-secondary); }
.cover-theme-switcher, .cover-theme-button, .invite-link { background: var(--paper); }
.cover-theme-button.selected { background: var(--accent-soft); }
.cover-theme-heading small, .cover-theme-button small { font-size: 11px; }
.cover-band { color: var(--ink); background: color-mix(in srgb, var(--paper) 96%, transparent); }
.cover-reference, .cover-parties, .cover-band-meta small { color: var(--ink-soft); }
.cover-band-meta time { color: var(--ink); }
.cover-band-meta { font-family: var(--font-sans); }
.cover-band-meta > span:not(.badge) { border-color: var(--line-strong); }
.cover-band-meta { border-color: var(--line-strong); }
.invite-cover-countdown { color: var(--ink); background: var(--paper); }
.invite-cover-countdown-head, .invite-cover-sync { color: var(--muted); }
.invite-cover-countdown.is-urgent { background: var(--danger-soft); }
.invite-cover-countdown.is-checking { background: var(--paper-secondary); }
.invite-cover-countdown.is-checking .invite-cover-countdown-head strong { color: var(--muted); }
.invite-cover-actions .button.primary { color: var(--on-accent); }
.invite-cover-actions .invite-note-button { color: var(--ink); background: var(--paper); }
.standalone-list-entry { color: var(--ink); border-color: var(--line); background: var(--paper); }
.readonly-notice { color: var(--tone-progress-fg); border-color: var(--tone-progress-border); background: var(--tone-progress-bg); }
.warning { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.action-panel .panel-head { background: var(--accent-panel); }
/* The native modal stays open on errors and restores focus when dismissed. */
.interface-dialog { width: min(480px, calc(100% - 32px)); max-height: calc(100dvh - 48px); padding: 0; overflow-y: auto; border: 1px solid var(--line-strong); border-radius: var(--radius-container); color: var(--ink); background: var(--paper); box-shadow: var(--shadow-float); }
.interface-dialog::backdrop { background: rgba(16, 32, 23, .55); backdrop-filter: blur(4px); }
.dialog-form { padding: 28px; }
.dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 24px; }
.dialog-heading h2 { margin: 0 0 8px; font-size: 22px; font-weight: 600; }
.dialog-heading p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.75; }
.dialog-fields { display: grid; gap: 18px; }
.dialog-fields:empty { display: none; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.form-feedback { margin: 0 0 16px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--danger) 36%, var(--line)); border-radius: var(--radius-control); color: var(--danger); background: var(--danger-soft); font-size: 13px; }
.form-feedback[hidden] { display: none; }
.dialog-fields + .form-feedback { margin: 18px 0 0; }
.form-feedback:focus { outline: 2px solid var(--danger); outline-offset: 3px; }
[aria-busy="true"] > .dialog-actions, form[aria-busy="true"] .auth-submit { cursor: progress; }
.toast { right: 24px; bottom: 24px; max-width: min(420px, calc(100vw - 32px)); padding: 14px 18px; font-size: 13px; }
.toast.error { color: var(--danger); border: 1px solid var(--danger); background: var(--danger-soft); }
.app-loading { background: var(--surface); }
.loading-shell { border-color: var(--line); background: var(--paper); }
.loading-sidebar { border-color: var(--line); }
.loading-brand, .loading-line, .loading-card { background: var(--accent-soft); }
[data-theme="dark"] .loading-brand::after, [data-theme="dark"] .loading-line::after, [data-theme="dark"] .loading-card::after { background: linear-gradient(100deg, transparent 30%, rgba(163, 189, 169, .14) 48%, transparent 66%); }
@media (max-width: 1280px) {
  .next-action { grid-template-columns: minmax(0, 1fr); }
  .next-action-buttons { justify-content: flex-start; }
  .contract-reading-grid { grid-template-columns: minmax(0, 1fr) 230px; }
  .member { align-items: flex-start; }
  .member-actions { max-width: 220px; }
}
@media (max-width: 1024px) {
  .topbar { padding-inline: 20px; }
  .appearance-control > span, .user-role { display: none; }
  .workspace { grid-template-columns: 260px minmax(0, 1fr); }
  .sidebar { padding-inline: 16px; }
  .main { padding: 24px; }
  .stats-grid { grid-template-columns: minmax(0, 1fr); }
  .contract-reading-grid { grid-template-columns: minmax(0, 1fr); }
  .contract-milestones { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: 16px; border-top: 1px solid var(--line); border-left: 0; }
  .contract-milestones > div { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 0 12px; }
  .contract-milestones > div:first-child { padding-left: 0; }
  .contract-milestones > div + div { border-top: 0; border-left: 1px solid var(--line); }
  .contract-heading { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .document-actions { flex-direction: row; align-items: center; }
  .contract-visual-hero { min-height: 230px; padding: 18px; }
  .auth-layout > .auth-card { padding: 40px 32px; }
  .auth-layout .promise-garden h2 { font-size: 21px; }
  .auth-layout > .promise-garden { padding-inline: 24px; }
}
@media (max-width: 960px) {
  .workspace { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: static; width: 100%; max-height: none; padding: 14px 20px; overflow: visible; border-right: 0; border-bottom: 1px solid var(--line); }
  .nav-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .nav-row:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nav-button { position: relative; justify-content: center; gap: 9px; padding: 10px 6px; }
  .nav-count { margin-left: 0; }
  .sidebar-head { margin: 14px 0 0; }
  .list-toggle { display: inline-flex; }
  .list-toggle .icon { transition: transform .15s ease; }
  .is-list-open .list-toggle .icon { transform: rotate(180deg); }
  .sidebar-library { display: none; }
  .is-list-open .sidebar-library { display: block; padding-top: 18px; }
  .sidebar-library .commitment-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .list-item:nth-child(odd), .list-item:nth-last-child(2):nth-child(odd) { border: 1px solid var(--line); }
  .list-item.active:nth-child(odd) { border-color: var(--accent); }
  .list-pager { grid-template-columns: auto minmax(0, 1fr) auto; }
  .list-pager .button { padding-inline: 12px; }
  .main { padding: 24px 20px 40px; }
  .contract-reading-grid { grid-template-columns: minmax(0, 1fr) 230px; }
  .contract-milestones { grid-template-columns: minmax(0, 1fr); padding-top: 0; border-top: 0; border-left: 1px solid var(--line); }
  .contract-milestones > div, .contract-milestones > div:first-child { flex-direction: row; justify-content: space-between; padding: 8px 0 8px 16px; }
  .contract-milestones > div + div { border-left: 0; }
}
@media (max-width: 767px) {
  .auth-with-story { padding: 70px 18px 32px; align-items: start; }
  .auth-utility { top: 16px; right: 20px; }
  .auth-layout { width: min(480px, 100%); grid-template-columns: minmax(0, 1fr); gap: 0; border-radius: var(--radius-container); }
  .auth-layout > .auth-card { grid-row: 1; padding: 30px 26px; border-left: 0; }
  .auth-layout .auth-card h1 { margin-top: 24px; font-size: 28px; }
  .auth-layout > .promise-garden { padding: 28px 20px; border-top: 1px solid var(--line); }
  .auth-layout .promise-garden-scene { max-width: 260px; }
  .auth-layout .promise-garden h2 { font-size: 20px; }
  .auth-layout .promise-garden figcaption { margin-top: 0; }
  .promise-garden-footer { gap: 18px; }
  .stats-grid, .performance-mode-grid, .performance-role-grid, .cover-choice-grid, .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .form-row.wide, .field-card.wide { grid-column: auto; }
  .form-grid.create-timing-grid { grid-template-columns: minmax(0, 1fr); }
  .contract-reading-grid, .standalone-shell .contract-reading-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .contract-milestones { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: 16px; border-top: 1px solid var(--line); border-left: 0; }
  .contract-milestones > div, .contract-milestones > div:first-child { display: flex; flex-direction: column; justify-content: flex-start; gap: 6px; padding: 0 10px; text-align: left; }
  .contract-milestones > div:first-child { padding-left: 0; }
  .contract-milestones > div + div { border-left: 1px solid var(--line); }
  .contract-milestones .milestone-result .badge { align-self: flex-start; }
}
@media (max-width: 680px) {
  .topbar { height: 64px; padding-inline: 16px; gap: 10px; }
  .top-actions { gap: 6px; }
  .top-actions .button { min-height: 38px; padding: 8px; font-size: 11px; }
  .top-actions .appearance-control { width: 34px; padding-inline: 5px; }
  .brand { gap: 8px; white-space: nowrap; }
  .brand-mark { flex-basis: 30px; width: 30px; height: 30px; }
  .brand-copy strong { font-size: 14px; }
  .sidebar { padding: 12px 16px 16px; }
  .sidebar-head h2 { font-size: 12px; }
  .sidebar-actions .button { min-height: 38px; padding: 8px 10px; }
  .sidebar-head .list-toggle { gap: 4px; font-size: 11px; }
  .nav-row { gap: 4px; }
  .nav-button { min-height: 46px; gap: 6px; font-size: 12px; }
  .nav-button .icon { width: 17px; height: 17px; }
  .nav-count { position: absolute; top: 0; right: 0; min-width: 17px; height: 17px; padding-inline: 3px; font-size: 9px; }
  .sidebar-library .commitment-list { grid-template-columns: minmax(0, 1fr); }
  .inactive-list .list-item { border: 1px solid var(--line) !important; }
  .main { padding: 18px 12px 32px; }
  .contract-visual-hero, .standalone-shell .contract-visual-hero { min-height: 220px; padding: 14px; }
  .contract-heading, .standalone-shell .contract-heading { grid-template-columns: minmax(0, 1fr); padding: 18px; gap: 12px; background: var(--paper); }
  .document-overline { font-size: 10px; }
  .hero-title { font-size: 24px; line-height: 1.5; }
  .contract-intro { font-size: 12px; line-height: 1.7; }
  .document-actions { flex-direction: row; width: 100%; justify-content: space-between; }
  .contract-document .hero-panel, .standalone-shell .contract-document .hero-panel { padding: 22px 18px; }
  .clause-copy { font-size: 16px; line-height: 1.9; }
  .field-label, .contract-milestones span { font-size: 11px; }
  .contract-milestones strong { font-size: 12px; }
  .contract-milestones .badge { font-size: 10px; }
  .next-action { grid-template-columns: minmax(0, 1fr); margin-block: 20px; padding: 16px; }
  .next-action h2 { font-size: 16px; line-height: 1.6; }
  .next-action p { font-size: 12px; }
  .next-action-buttons { justify-content: flex-start; }
  .next-action-buttons .button { min-height: 44px; }
  .participant-grid { grid-template-columns: minmax(0, 1fr); }
  .participant-credit { grid-template-columns: 40px minmax(0, 1fr); gap: 16px; padding: 16px 0; }
  .participant-credit + .participant-credit { padding: 16px 0 0; border-top: 1px solid var(--line); border-left: 0; }
  .credit-avatar { width: 40px; height: 40px; }
  .participant-copy .badge { font-size: 10px; }
  .participant-copy strong { font-size: 14px; }
  .participant-copy .credit-metrics { display: flex; font-size: 11px; }
  .discussion-heading { margin-bottom: 14px; }
  .discussion-form { padding: 12px; }
  .discussion-form-actions { gap: 10px; }
  .contract-share-actions { flex-wrap: wrap; }
  .contract-share-actions .button { min-height: 44px; flex: 1 1 auto; }
  .record-tab { min-height: 52px; padding: 10px; }
  .record-tab strong { font-size: 12px; }
  .record-tab small { font-size: 10px; }
  .record-tab-panel { padding: 10px 16px 18px; }
  .panel-head, .panel-body { padding: 20px; }
  .panel-head h2 { font-size: 22px; }
  .panel-head p { font-size: 12px; }
  .create-panel .panel-head { padding: 24px 20px; }
  .create-panel .panel-body { padding: 0 20px calc(94px + env(safe-area-inset-bottom)); }
  .create-form-section { padding: 22px 0; }
  .create-section-heading h3 { font-size: 15px; }
  .create-section-heading p { font-size: 12px; line-height: 1.75; }
  .create-submit-bar { background: var(--paper); border-color: var(--line); box-shadow: var(--shadow-float); }
  .performance-mode-option > span { min-height: 78px; }
  input, textarea, select, .auth-form input { font-size: 16px; }
  .stat-card { padding: 22px; }
  .member { flex-direction: column; align-items: stretch; gap: 14px; }
  .member-actions { max-width: none; justify-content: flex-start; }
  .member-actions .button { min-height: 40px; }
  .standalone-main { padding: 66px 12px 32px; }
  .standalone-shell .contract-visual-hero { min-height: 220px; }
  .standalone-shell .record-tabs { display: grid; }
  .dialog-form { padding: 22px; }
  .dialog-heading h2 { font-size: 21px; }
  .interface-dialog { max-height: calc(100dvh - 32px); }
  .dialog-actions .button { min-height: 44px; flex: 1; }
  .toast { right: 16px; bottom: calc(18px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-transparency: reduce) {
  .contract-heading, .standalone-shell .contract-heading { background: var(--paper); backdrop-filter: none; }
  .interface-dialog::backdrop { backdrop-filter: none; }
}