:root {
  /* Canonical UI tokens: docs/plans/2026-07-12-fable-uiux-design-system.md */
  --brand: #1d4ed8;
  --brand-strong: #1e40af;
  --brand-soft: #eff6ff;
  --bg: #f5f7fb;
  --surface: #ffffff;
  --surface-sub: #f8fafc;
  --text: #0f172a;
  --text-sub: #475569;
  --text-faint: #64748b;
  --line: #e2e8f0;
  --ok: #15803d;
  --ok-soft: #f0fdf4;
  --warn: #a16207;
  --warn-text: #78350f;
  --warn-soft: #fffbeb;
  --danger: #b91c1c;
  --danger-soft: #fef2f2;
  --info: #0e7490;
  --info-soft: #ecfeff;
  --radius-card: 16px;
  --radius-ctl: 10px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(15,23,42,.05), 0 8px 24px rgba(15,23,42,.06);
  --shadow-pop: 0 12px 32px rgba(15,23,42,.14);
  --font: "Inter", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
  /* Compatibility aliases keep established components on the canonical palette. */
  --panel: var(--surface);
  --panel-2: var(--surface-sub);
  --line-strong: var(--brand-soft);
  --muted: var(--text-sub);
  --subtle: var(--text-faint);
  --blue: var(--brand);
  --cyan: var(--info);
  --green: var(--ok);
  --amber: var(--warn);
  --red: var(--danger);
  --purple: var(--brand);
  --pink: var(--danger);
  --shadow: var(--shadow-card);
  --primary: var(--brand);
  --success: var(--ok);
  --radius-sm: var(--radius-ctl);
  --radius-md: var(--radius-ctl);
  --radius-lg: var(--radius-card);
  --radius: var(--radius-ctl);
  --weight-normal: 400;
  --weight-strong: 600;
  --weight-heavy: 800;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --motion-fast: 150ms;
  --ease-standard: ease;
}

/* S11: people operations and owner read-only role preview */
.view-as-control { display: grid; gap: 2px; min-width: 150px; font-size: 12px; color: var(--text-sub); }
.view-as-control select { min-height: 38px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--text); font-weight: var(--weight-strong); padding: 0 30px 0 10px; }
.view-as-banner { position: sticky; top: 0; z-index: 90; display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 46px; padding: 8px 16px; background: var(--warn-soft); border: 1px solid var(--warn); color: var(--warn); }
.view-as-banner[hidden] { display: none; }
.hd-session-banner { position: sticky; top: 0; z-index: 91; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 46px; padding: 8px 16px; background: var(--info-soft); border: 1px solid var(--info); color: var(--text); }
.hd-session-banner[hidden] { display: none; }
.hd-session-banner strong { color: var(--info); }
.hd-session-banner small { color: var(--text-sub); }
.view-as-readonly form,
.view-as-readonly #markNotificationsRead,
.view-as-readonly .unit-admin-panel,
.view-as-readonly [data-new-project],
.view-as-readonly [data-invoice-open],
.view-as-readonly #saveUnitPlan,
.view-as-readonly [data-payment-decision],
.view-as-readonly [data-payment-execute],
.view-as-readonly [data-payment-resubmit] { display: none !important; }
.remind-header-user { text-decoration: none; color: inherit; }
.field-member-link { display: inline-flex; margin-top: 8px; color: var(--brand); font-weight: var(--weight-strong); text-decoration: none; }

.owner-people-overview { margin-bottom: 16px; }
.hr-operations { display: grid; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.hr-operations-summary { display: flex; flex-wrap: wrap; gap: 8px; }
.hr-operations-summary span { padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text-sub); font-size: 13px; }
.danger-text { color: var(--danger) !important; }
.hr-workflow-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.hr-workflow-card { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.hr-workflow-card > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hr-workflow-card > header > div { display: flex; align-items: center; gap: 8px; }
.hr-workflow-card ol { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.hr-workflow-card li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 50px; border-top: 1px solid var(--line); }
.hr-workflow-card li > span { display: grid; width: 24px; height: 24px; place-items: center; border-radius: var(--radius-pill); background: var(--surface-sub); color: var(--text-sub); font-size: 12px; font-weight: var(--weight-strong); }
.hr-workflow-card li > div { display: grid; gap: 2px; }
.hr-workflow-card li small { color: var(--text-sub); }
.hr-workflow-card li.is-done { opacity: .68; }
.hr-workflow-card li.is-done > span { background: var(--ok-soft); color: var(--ok); }
.hr-workflow-card li.is-overdue { color: var(--danger); }
.hr-workflow-create { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(150px, .6fr) auto; align-items: end; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.hr-workflow-create > strong { grid-column: 1 / -1; }
.hr-workflow-create label { display: grid; gap: 4px; color: var(--text-sub); font-size: 13px; font-weight: var(--weight-strong); }
.member-directory, .recruiting-workspace, .team-people-section { display: grid; min-width: 0; max-width: 100%; gap: 14px; padding: 16px 0; }
#peopleSystem { width: 100%; min-width: 0; max-width: 100%; grid-template-columns: minmax(0, 1fr); overflow: hidden; }
.recruiting-workspace { overflow: hidden; }
.member-directory > header, .recruiting-workspace > header, .team-people-section > header { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.member-directory h3, .recruiting-workspace h3, .team-people-section h3 { margin: 2px 0 0; font-size: 16px; }
.member-list-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.member-list-card { display: grid; gap: 12px; min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--text); text-decoration: none; }
.member-list-card:hover { border-color: var(--brand); box-shadow: 0 6px 18px color-mix(in srgb, var(--text-sub) 8%, transparent); }
.member-list-card header, .member-list-card footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.member-list-card header div { display: grid; gap: 3px; min-width: 0; }
.member-list-card header strong { font-size: 14px; }
.member-list-card header small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-sub); }
.member-list-card header em { color: var(--brand); font-style: normal; font-weight: var(--weight-strong); }
.member-card-skills { display: flex; flex-wrap: wrap; gap: 6px; }
.member-card-skills span { padding: 4px 7px; border-radius: var(--radius-sm); background: var(--brand-soft); color: var(--brand); font-size: 12px; }
.member-list-card footer { justify-content: flex-start; flex-wrap: wrap; color: var(--text-sub); font-size: 12px; }

.recruiting-kpis { display: grid; width: 100%; min-width: 0; max-width: 100%; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.recruiting-kpis article { display: grid; gap: 7px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.recruiting-kpis article strong { font-size: 20px; }
.recruiting-kpis i { height: 7px; overflow: hidden; border-radius: var(--radius-sm); background: var(--surface-sub); }
.recruiting-kpis i b { display: block; height: 100%; background: var(--info); }
.recruiting-pipeline { display: grid; width: 100%; min-width: 0; max-width: 100%; grid-template-columns: repeat(4, minmax(180px, 1fr)); gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.recruiting-pipeline > section { display: flex; flex-direction: column; gap: 8px; min-width: 180px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.recruiting-pipeline > section.is-drop-target { border-color: var(--brand); background: var(--brand-soft); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--brand) 14%, transparent); }
.recruiting-pipeline > section > header { display: flex; justify-content: space-between; }
.recruiting-pipeline > section > header span { min-width: 24px; padding: 2px 6px; border-radius: var(--radius-md); background: var(--text); color: var(--surface); text-align: center; }
.applicant-card { display: grid; gap: 6px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.applicant-card[draggable="true"] { cursor: grab; }
.applicant-card.is-dragging { opacity: .46; cursor: grabbing; }
.applicant-card small, .applicant-card p { margin: 0; color: var(--text-sub); font-size: 12px; }
.applicant-card label { display: grid; gap: 3px; font-size: 12px; color: var(--text-sub); }
.applicant-card select { width: 100%; min-height: 34px; }
.pipeline-empty { margin: auto; color: var(--text-faint); }
.recruiting-forms { display: grid; width: 100%; min-width: 0; max-width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.recruiting-forms form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.recruiting-forms form strong { grid-column: 1 / -1; }
.recruiting-forms form label { display: grid; gap: 5px; color: var(--text-sub); font-size: 12px; font-weight: var(--weight-strong); }
.recruiting-forms form button { grid-column: 1 / -1; justify-self: start; }
.team-ranking-inline { display: grid; gap: 8px; }
.people-planning { display: grid; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.people-planning .panel-head p { margin: 4px 0 0; color: var(--text-sub); }
.people-planning-grid { min-width: 0; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); }
.assignment-primary-toolbar, .assignment-entry-link { align-items: center; display: flex; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.assignment-primary-toolbar label { display: grid; gap: 4px; min-width: 180px; font-weight: var(--weight-strong); }
.assignment-entry-link { padding: 16px; border: 1px solid var(--line); background: var(--surface); }
.people-planning-head, .people-planning-row { display: grid; grid-template-columns: 210px repeat(7, minmax(118px, 1fr)); min-width: 1036px; }
.people-planning-head { position: sticky; top: 0; z-index: 1; background: var(--surface-sub); color: var(--text-sub); font-size: 12px; font-weight: var(--weight-strong); }
.people-planning-head span, .people-planning-row > header, .people-planning-row > div { min-width: 0; padding: 9px; border-right: 1px solid var(--surface-sub); }
.people-planning-row { border-top: 1px solid var(--surface-sub); }
.people-planning-row > header { display: grid; gap: 3px; background: var(--surface); }
.people-planning-row > header small { color: var(--text-sub); }
.people-planning-row > div { display: grid; align-content: start; gap: 5px; min-height: 66px; }
.planning-entry { display: grid; gap: 2px; padding: 6px; border-left: 3px solid var(--info); background: var(--surface-sub); font-size: 12px; overflow-wrap: anywhere; }
button.planning-entry { width: 100%; border-top: 0; border-right: 0; border-bottom: 0; border-radius: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.planning-entry.assigned { border-left-color: var(--brand); background: var(--brand-soft); }
.planning-entry.leave, .planning-entry.unavailable { border-left-color: var(--danger); background: var(--danger-soft); }
.planning-entry small, .planning-empty { color: var(--text-sub); font-weight: var(--weight-strong); }
.planning-entry em { color: var(--danger); font-size: 12px; font-style: normal; font-weight: var(--weight-strong); }
.planning-entry.has-warning { border-left-color: var(--danger); background: var(--danger-soft); }
.planning-free { display: block; color: var(--info); font-size: 12px; font-weight: var(--weight-strong); }
.planning-free.full { color: var(--danger); }
.planning-skill-badges { display: flex; flex-wrap: wrap; gap: 3px; }
.planning-skill-badges span { padding: 2px 5px; border-radius: var(--radius-sm); background: var(--brand-soft); color: var(--brand); font-size: 12px; font-weight: var(--weight-strong); }
.assignment-drop-cell { transition: background .16s ease, box-shadow .16s ease; }
.assignment-drop-cell.is-drop-target { background: var(--brand-soft); box-shadow: inset 0 0 0 2px var(--brand); }
.assignment-board-summary { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, .8fr); gap: 10px; }
.assignment-source-chain { display: flex; width: 100%; min-width: 0; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; color: var(--subtle); font-size: 12px; font-weight: var(--weight-strong); }
.assignment-source-chain span { padding: 5px 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.assignment-source-chain b { color: var(--primary); }
.assignment-board-summary > section { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.assignment-board-summary > section > header { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.assignment-board-summary > section > header small { color: var(--text-sub); }
.unassigned-projects { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 8px; }
.unassigned-project { display: grid; gap: 6px; min-width: 0; padding: 9px; border: 1px solid var(--line); border-left: 3px solid var(--danger); border-radius: var(--radius-sm); background: var(--surface); cursor: grab; user-select: none; }
.unassigned-project.is-dragging { opacity: .55; }
.unassigned-project header { display: flex; justify-content: space-between; gap: 6px; }
.unassigned-project header span { color: var(--danger); font-size: 12px; font-weight: var(--weight-strong); white-space: nowrap; }
.unassigned-project p { margin: 0; color: var(--text-sub); font-size: 12px; overflow-wrap: anywhere; }
.assignment-recommendation-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; margin-top: 5px; padding-top: 8px; border-top: 1px solid var(--surface-sub); }
.assignment-recommendation-head small { color: var(--text-sub); font-size: 12px; text-align: right; }
.assignment-recommendations { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.assignment-recommendations > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; padding: 7px 0; border-bottom: 1px solid var(--surface-sub); }
.assignment-recommendation-rank { display: flex; gap: 6px; align-items: center; min-width: 0; }
.assignment-recommendation-rank b { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font-size: 12px; }
.assignment-recommendation-rank strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.assignment-recommendation-rank em { margin-left: auto; color: var(--info); font-style: normal; font-weight: var(--weight-strong); }
.assignment-recommendation-meta { display: flex; gap: 4px; justify-content: flex-end; color: var(--text-sub); font-size: 12px; }
.assignment-recommendation-reasons { grid-column: 1 / -1; display: flex; gap: 4px; flex-wrap: wrap; }
.assignment-recommendation-reasons span { padding: 2px 5px; border-radius: var(--radius-sm); background: var(--surface-sub); color: var(--text-sub); font-size: 12px; }
.assignment-recommendations .inline-actions { grid-column: 1 / -1; justify-content: flex-end; }
.assignment-no-candidate { padding: 8px 0; color: var(--text-sub); }
.available-day-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.available-day-strip span { display: grid; gap: 2px; padding: 7px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-sub); font-size: 12px; }
.assignment-decision { width: min(620px, calc(100% - 28px)); }
.assignment-decision-facts { display: flex; flex-wrap: wrap; gap: 7px; }
.assignment-decision-facts span { padding: 6px 8px; border-radius: var(--radius-sm); background: var(--brand-soft); color: var(--brand); font-weight: var(--weight-strong); }
.assignment-warning-list { display: grid; gap: 7px; margin: 12px 0; padding: 0; list-style: none; }
.assignment-warning { display: grid; gap: 2px; padding: 9px; border-left: 3px solid var(--warn); background: var(--warn-soft); }
.assignment-warning.danger { border-left-color: var(--danger); background: var(--danger-soft); }
.assignment-warning span { color: var(--text-sub); font-size: 12px; }
.assignment-safe { padding: 10px; background: var(--ok-soft); color: var(--info); font-weight: var(--weight-strong); }
.assignment-override-reason { display: grid; gap: 5px; color: var(--text-sub); font-size: 12px; }
.assignment-override-reason textarea { width: 100%; min-width: 0; }
.people-planning-forms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.people-planning-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-md); }
.people-planning-form > strong { grid-column: 1 / -1; }
.people-planning-form label, .planning-rules label { display: grid; min-width: 0; gap: 4px; color: var(--text-sub); font-size: 12px; }
.people-planning-form input, .people-planning-form select, .planning-rules input { width: 100%; min-width: 0; }
.people-planning-form label.planning-check { grid-template-columns: 22px 1fr; align-content: end; align-items: center; min-height: 42px; }
.people-planning-form label.planning-check input { width: 18px; height: 18px; margin: 0; }
.people-planning-form button { align-self: end; min-height: 42px; }
.planning-master-section { padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-md); }
.planning-master-section > summary { cursor: pointer; font-weight: var(--weight-strong); }
.planning-master-section[open] > summary { margin-bottom: 12px; }
.planning-rules { display: grid; gap: 9px; margin: 12px 0; }
.planning-rules > header { display: flex; justify-content: space-between; gap: 8px; }
.planning-rules [data-rule-row] { display: grid; grid-template-columns: minmax(150px, 1fr) repeat(3, minmax(90px, .6fr)); gap: 8px; align-items: end; padding: 9px; background: var(--surface); }

.member-page-body { margin: 0; min-height: 100vh; overflow-x: hidden; background: var(--surface-sub); color: var(--text); }
.member-page-shell { width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding: 20px 0 48px; }
.member-page-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.member-page-brand { display: grid; color: var(--text); text-align: right; text-decoration: none; }
.member-page-brand span { color: var(--text-sub); font-size: 12px; }
.member-page { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.member-hero { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.member-hero h1 { margin: 2px 0 6px; font-size: 32px; letter-spacing: 0; }
.member-hero p { margin: 0; color: var(--text-sub); }
.member-hero-facts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.member-hero-facts span { padding: 8px 10px; border-radius: var(--radius-md); background: var(--brand-soft); color: var(--brand); font-weight: var(--weight-strong); }
.member-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.member-tabs button { min-width: 92px; min-height: 40px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-sub); font-weight: var(--weight-strong); }
.member-tabs button.active { background: var(--brand); color: var(--surface); }
.member-tabs #memberProfileBack { margin-right: auto; border: 1px solid var(--line); }
.member-tab-body { min-height: 360px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.member-records, .member-records > section, .member-record-list { display: grid; gap: 12px; min-width: 0; }
.member-records > section { padding-top: 16px; border-top: 1px solid var(--line); }
.member-record-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 10px; }
.member-record-summary article { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-sub); }
.member-record-summary span, .member-record-summary small { color: var(--text-sub); font-size: 12px; }
.member-record-summary strong { font-size: 20px; }
.member-cert-row, .member-employment-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.member-cert-row > div, .member-employment-row > div { display: grid; gap: 4px; min-width: 0; }
.member-cert-row small, .member-employment-row small { color: var(--text-sub); overflow-wrap: anywhere; }
.member-record-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-sub); }
.member-record-form header, .member-record-form .wide { grid-column: 1 / -1; }
.member-record-form header { display: grid; gap: 3px; }
.member-record-form header small { color: var(--text-sub); }
.member-record-form label { display: grid; gap: 5px; color: var(--text-sub); font-size: 13px; font-weight: var(--weight-strong); }
.member-record-form input[type="file"] { box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; overflow: hidden; }
.member-record-form input[type="file"]::file-selector-button { min-height: 38px; margin-right: 8px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; }
.member-career-ledger { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.member-career-ledger li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.member-career-ledger li > span { color: var(--text-sub); font-size: 13px; }
.member-career-ledger li > div { display: grid; gap: 3px; }
.member-career-ledger small { color: var(--text-sub); }
.member-agree-check { display: flex; align-items: center; gap: 10px; }
.member-skill-grid, .member-capacity, .member-number-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.member-skill-grid article, .member-capacity article, .member-number-grid article { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.member-skill-grid article strong, .member-capacity article strong, .member-number-grid article strong { font-size: 20px; }
.member-level { display: flex; gap: 4px; }
.member-level i { width: 18px; height: 6px; border-radius: var(--radius-sm); background: var(--line); }
.member-level i.active { background: var(--info); }
.member-inline-form, .member-evaluation-form, .member-profile-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.member-inline-form label, .member-evaluation-form label, .member-profile-form label { display: grid; gap: 5px; color: var(--text-sub); font-size: 12px; }
.member-profile-form .member-leader-toggle { align-content: center; grid-template-columns: 20px 1fr; }
.member-profile-form .member-leader-toggle input { width: 18px; height: 18px; margin: 0; }
.member-evaluation-form .wide { grid-column: span 2; }
.member-profile-form .wide { grid-column: span 3; }
.member-evaluation-form textarea { min-height: 76px; }
.member-evaluation-form > header { display: grid; gap: 3px; }
.member-evaluation-form > header small { color: var(--text-sub); }
.member-value-inputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.member-value-input { display: grid; grid-template-columns: 96px 1fr; gap: 8px; min-width: 0; margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.member-value-input legend { padding: 0 4px; color: var(--text); font-weight: var(--weight-strong); }
.member-value-input label { align-content: start; }
.member-value-input textarea { min-height: 62px; resize: vertical; }
.member-evaluation-list { display: grid; gap: 10px; }
.member-evaluation-row { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-md); }
.member-evaluation-row header, .member-evaluation-row div { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.member-evaluation-row p { margin: 0; }
.member-evaluation-row small { color: var(--text-sub); }
.member-value-details { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.member-value-details li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; padding: 7px 9px; border-radius: var(--radius-sm); background: var(--surface); }
.member-value-details li small { grid-column: 1 / -1; }
.member-objective-facts { display: flex; gap: 8px; padding: 9px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.member-objective-facts small { flex-basis: 100%; }
.member-value-trend { display: grid; gap: 12px; margin-bottom: 16px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.member-value-trend > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.member-value-trend h3, .member-value-trend p { margin: 2px 0; }
.member-value-trend > header > strong { color: var(--brand); font-size: 24px; }
.member-value-chart { display: flex; align-items: end; gap: 10px; min-height: 156px; overflow-x: auto; padding: 8px 4px 0; border-bottom: 1px solid var(--line); }
.member-value-chart article { display: grid; flex: 1 0 64px; grid-template-rows: 110px auto auto; gap: 3px; text-align: center; }
.member-value-chart article > span { display: flex; align-items: end; justify-content: center; }
.member-value-chart article b { display: block; width: 30px; min-height: 8px; border-radius: var(--radius-sm) var(--radius-ctl) 0 0; background: var(--brand); }
.member-value-chart em { color: var(--brand); font-style: normal; font-weight: var(--weight-heavy); }
.member-value-chart small { color: var(--text-sub); font-size: 12px; }
.member-grade-panel { display: grid; width: 100%; min-width: 0; max-width: 100%; gap: 12px; margin-bottom: 16px; padding: 16px; border: 1px solid var(--brand); border-radius: var(--radius-md); background: var(--brand-soft); overflow-wrap: anywhere; }
.member-grade-panel > * { min-width: 0; max-width: 100%; }
.member-grade-panel > header, .member-grade-proposal > div { display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.member-grade-panel h3, .member-grade-panel p { margin: 2px 0; }
.member-grade-facts { display: grid; width: auto; min-width: 0; max-width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; justify-self: stretch; }
.member-grade-facts article { display: grid; gap: 4px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.member-grade-facts span, .member-grade-proposal small, .member-grade-history span { color: var(--text-sub); font-size: 12px; }
.member-grade-criteria { display: grid; gap: 4px; padding: 10px; border-left: 3px solid var(--brand); background: var(--surface); }
.member-grade-readiness { display: grid; width: auto; min-width: 0; max-width: 100%; gap: 8px; padding: 12px; border: 1px solid var(--brand); border-radius: var(--radius-sm); background: var(--surface); justify-self: stretch; }
.member-grade-readiness > header { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.member-grade-readiness > p, .member-grade-readiness > small { margin: 0; color: var(--text-sub); }
.member-grade-readiness ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.member-grade-readiness li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 2px 6px; align-items: center; padding: 8px; border-radius: var(--radius-sm); background: var(--surface); }
.member-grade-readiness li > span { grid-row: span 2; color: var(--danger); font-weight: var(--weight-heavy); text-align: center; }
.member-grade-readiness li.met > span { color: var(--info); }
.member-grade-readiness li small { color: var(--text-sub); }
.member-grade-proposal-form { display: grid; width: auto; min-width: 0; max-width: 100%; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); justify-self: stretch; }
.member-grade-proposal-form > strong, .member-grade-proposal-form .wide, .member-grade-proposal-form button { grid-column: 1 / -1; }
.member-grade-proposal-form label { display: grid; min-width: 0; gap: 5px; color: var(--text-sub); font-size: 12px; }
.member-grade-proposal-form input, .member-grade-proposal-form select, .member-grade-proposal-form textarea, .member-grade-proposal-form button { width: 100%; min-width: 0; max-width: 100%; }
.member-grade-proposal-form textarea { min-height: 72px; }
.member-grade-proposals { display: grid; gap: 8px; }
.member-grade-proposal { display: grid; gap: 7px; padding: 11px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.member-grade-history { display: grid; gap: 6px; padding-left: 20px; }
.member-grade-history li { display: grid; gap: 2px; }
.member-development { display: grid; gap: 8px; padding: 10px; border-radius: var(--radius-sm); background: var(--brand-soft); }
.member-development > header { align-items: center; }
.member-development > header span { color: var(--brand); font-size: 12px; font-weight: var(--weight-strong); }
.member-development progress { width: 100%; height: 10px; accent-color: var(--info); }
.member-development form { display: grid; grid-template-columns: minmax(110px, .8fr) minmax(110px, .8fr) auto; align-items: end; gap: 8px; }
.member-development form label { display: grid; gap: 3px; color: var(--text-sub); font-size: 12px; }
.member-development form select, .member-development form input { min-width: 0; min-height: 36px; }
.member-single-note { margin-top: 14px; color: var(--text-sub); }
.member-trend { display: grid; gap: 10px; margin-top: 16px; }
.member-trend article { display: grid; grid-template-columns: 80px minmax(80px, 1fr) auto; align-items: center; gap: 10px; }
.member-trend article span { height: 12px; overflow: hidden; border-radius: var(--radius-sm); background: var(--surface-sub); }
.member-trend article span b { display: block; height: 100%; background: var(--info); }
.member-trend article em { font-style: normal; font-weight: var(--weight-strong); }
.member-attribution { display: grid; gap: 14px; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.member-attribution > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.member-attribution > header p, .member-attribution > header h3 { margin: 3px 0; }
.member-attribution > header h3 { font-size: 24px; }
.member-attribution-trend { display: grid; gap: 8px; }
.member-attribution-trend article { display: grid; grid-template-columns: 72px minmax(80px, 1fr) auto; align-items: center; gap: 8px; }
.member-attribution-trend article span { height: 10px; overflow: hidden; border-radius: var(--radius-sm); background: var(--surface-sub); }
.member-attribution-trend article span b { display: block; height: 100%; background: var(--info); }
.member-attribution-trend article em { font-style: normal; font-weight: var(--weight-strong); }
.member-attribution-trend article small { grid-column: 2 / -1; color: var(--text-sub); }
.member-attribution-chain { display: grid; gap: 8px; }
.member-attribution-chain article { padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.member-attribution-chain article > div { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 7px; }
.member-attribution-chain span { display: grid; gap: 2px; font-size: 12px; }
.member-attribution-chain i { color: var(--text-sub); font-style: normal; }
.personal-contribution-strip, .field-contribution { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--text-faint); border-radius: var(--radius-md); background: var(--info-soft); color: var(--text); text-decoration: none; }
.personal-contribution-strip span, .field-contribution span { display: grid; gap: 2px; font-weight: var(--weight-strong); }
.personal-contribution-strip small, .field-contribution small { color: var(--text-sub); font-weight: var(--weight-strong); }
.personal-contribution-strip strong, .field-contribution strong { color: var(--info); font-size: 20px; }
.personal-contribution-strip em, .field-contribution em { color: var(--info); font-size: 12px; font-style: normal; font-weight: var(--weight-strong); }
.member-error { padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.member-message { min-height: 22px; color: var(--danger); }
.member-view-banner { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1px solid var(--warn); border-radius: var(--radius-md); background: var(--warn-soft); color: var(--warn); }
.member-view-banner span { flex: 1; }
.member-view-banner a { color: var(--brand); font-weight: var(--weight-strong); }

@media (max-width: 720px) {
  .hd-session-banner { align-items: flex-start; flex-direction: column; gap: 4px; }
  .view-as-control { min-width: 120px; }
  .view-as-banner { align-items: flex-start; flex-direction: column; gap: 5px; }
  .recruiting-forms { grid-template-columns: 1fr; }
  .recruiting-forms form { grid-template-columns: 1fr; }
  #assignmentBoard .people-planning { width: calc(100vw - 54px); max-width: calc(100vw - 54px); padding: 12px; }
  .people-planning-forms { grid-template-columns: 1fr; }
  .people-planning-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .people-planning-form > strong, .people-planning-form > button { grid-column: 1 / -1; }
  .assignment-board-summary { grid-template-columns: 1fr; }
  .unassigned-projects { grid-template-columns: 1fr; }
  .available-day-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .planning-rules [data-rule-row] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .planning-rules [data-rule-row] > span { grid-column: 1 / -1; }
  .member-page-shell { width: min(100% - 20px, 1120px); padding-top: 10px; }
  .member-hero { align-items: flex-start; flex-direction: column; padding: 16px; }
  .member-hero h1 { font-size: 24px; }
  .member-hero-facts { justify-content: flex-start; }
  .member-tabs { position: sticky; top: 0; z-index: 5; display: grid; width: 100%; min-width: 0; grid-template-columns: 58px repeat(5, minmax(0, 1fr)); overflow: hidden; }
  .member-tabs button { width: 100%; min-width: 0; min-height: 44px; padding: 8px 2px; font-size: 14px; white-space: nowrap; }
  .member-tabs #memberProfileBack { min-width: 0; margin-right: 0; }
  .member-tab-body { padding: 12px; }
  .member-tab-body, .member-tab-body > * { width: 100%; min-width: 0; max-width: 100%; }
  .member-record-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .member-record-summary button { grid-column: 1 / -1; min-height: 44px; }
  .member-cert-row, .member-employment-row { grid-template-columns: minmax(0, 1fr) auto; }
  .member-cert-row > a, .member-cert-row > button, .member-employment-row > a, .member-employment-row > button { min-height: 44px; }
  .member-record-form { grid-template-columns: minmax(0, 1fr); }
  .member-record-form header, .member-record-form .wide { grid-column: auto; }
  .member-career-ledger li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .member-skill-grid, .member-capacity, .member-number-grid { grid-template-columns: minmax(0, 1fr); }
  .member-inline-form, .member-evaluation-form, .member-profile-form { grid-template-columns: 1fr; }
  .member-evaluation-form .wide, .member-profile-form .wide { grid-column: auto; }
  .member-value-inputs, .member-grade-readiness ul { grid-template-columns: 1fr; }
  .member-value-input { grid-template-columns: 78px minmax(0, 1fr); }
  .member-development form { grid-template-columns: 1fr 1fr; }
  .member-development form button { grid-column: 1 / -1; width: 100%; }
  .member-grade-facts, .member-grade-proposal-form { grid-template-columns: 1fr; }
  .member-grade-proposal-form > strong, .member-grade-proposal-form .wide, .member-grade-proposal-form button { grid-column: auto; }
  .member-view-banner { align-items: flex-start; flex-direction: column; }
  .member-trend article { grid-template-columns: 66px minmax(60px, 1fr); }
  .member-trend article em { grid-column: 2; }
  .member-attribution > header { align-items: flex-start; flex-direction: column; }
  .member-attribution-trend article { grid-template-columns: 62px minmax(50px, 1fr); }
  .member-attribution-trend article em, .member-attribution-trend article small { grid-column: 2; }
  .member-attribution-chain article > div { display: grid; grid-template-columns: 1fr auto; }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; width: 100%; max-width: 100dvw; overflow-x: hidden; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  width: 100%;
  max-width: 100dvw;
  min-height: 100vh;
  color: var(--text);
  font-family: "Inter", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
  font-size: 16px;
  background: linear-gradient(145deg, var(--surface) 0%, var(--brand-soft) 52%, var(--brand-soft) 100%);
  overflow-x: hidden;
  overscroll-behavior-x: none;
  touch-action: manipulation;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(color-mix(in srgb, var(--surface) 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--surface) 3%, transparent) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity: .45;
}
.ambient { display: none; }
.ambient-a { left: -160px; top: -130px; background: var(--cyan); }
.ambient-b { right: -160px; top: 80px; background: var(--purple); }

button, select, input, textarea { font: inherit; font-size: 16px; }
.ui-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
button { cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.route-focus-pulse { animation: routeFocusPulse 1.45s ease; scroll-margin-top: 20px; }
@keyframes routeFocusPulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 34%, transparent); }
  45% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--brand) 12%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.glass { backdrop-filter: blur(18px); }

.app-shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; height: auto; position: relative; z-index: 1; width: 100%; max-width: 100dvw; overflow: visible; align-items: start; }
.sidebar {
  position: sticky;
  top: 0;
  height: 100dvh;
  max-height: 100dvh;
  min-height: 0;
  padding: 18px 16px 22px;
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  backdrop-filter: blur(18px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.brand { display: flex; gap: 14px; align-items: center; }
.brand-mark {
  width: 56px; height: 56px; border-radius: var(--radius-lg);
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--info), var(--cyan) 42%, var(--blue) 72%, var(--purple));
  color: var(--surface); font-weight: var(--weight-heavy); font-size: 24px; letter-spacing: 0;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--brand) 18%, transparent);
}
.eyebrow { margin: 0 0 6px; color: var(--cyan); font-size: 12px; text-transform: uppercase; letter-spacing: 0; font-weight: var(--weight-heavy); }
.decision-rules { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.decision-rules li { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--surface) 72%, transparent); color: var(--muted); font-weight: var(--weight-strong); }
.decision-rules li strong { width: 26px; height: 26px; border-radius: var(--radius-pill); display: grid; place-items: center; background: color-mix(in srgb, var(--brand) 10%, transparent); color: var(--blue); }
h1, h2, h3, p { margin-top: 0; }
h1 { margin: 0; font-size: 20px; line-height: 1.17; letter-spacing: 0; }
h2 { margin: 0; font-size: 32px; letter-spacing: 0; }
h3 { margin: 0; font-size: 16px; letter-spacing: 0; }

.mission-card, .sidebar-card {
  padding: 16px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 6%, transparent), color-mix(in srgb, var(--surface) 82%, transparent));
  border: 1px solid var(--line);
}
.mission-card { display: flex; gap: 12px; align-items: flex-start; }
.mission-card p, .sidebar-card span { margin: 5px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.pulse-dot { width: 11px; height: 11px; margin-top: 4px; border-radius: var(--radius-pill); background: var(--green); box-shadow: 0 0 0 8px color-mix(in srgb, var(--ok) 12%, transparent); }
.sidebar-card { display: grid; gap: 8px; }

.nav-tabs {
  display: grid;
  gap: 10px;
  overflow: visible;
  align-content: start;
  align-items: start;
  padding-right: 2px;
  flex: 0 0 auto;
  min-height: 0;
  max-height: none;
  overscroll-behavior: auto;
}
.nav-section { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: 10px; overflow: visible; box-shadow: 0 8px 20px color-mix(in srgb, var(--text) 4%, transparent); }
.nav-section-today { position: relative; z-index: 0; background: linear-gradient(145deg, var(--surface), var(--brand-soft)); border: 1px solid color-mix(in srgb, var(--brand) 18%, transparent); box-shadow: 0 16px 36px color-mix(in srgb, var(--text) 9%, transparent); }
.nav-section-head, .nav-section summary { display:flex; align-items:center; justify-content:space-between; gap:10px; color: var(--text); }
.nav-section summary { cursor:pointer; list-style:none; }
.nav-section summary::-webkit-details-marker { display:none; }
.nav-section-title, .nav-section-head .nav-section-title { min-width:0; display:grid; gap:4px; }
.nav-section summary strong, .nav-section-head strong { display:block; font-size: 14px; letter-spacing: 0; word-break: keep-all; color: var(--text); }
.nav-section summary small, .nav-section-head small { display:block; color: var(--text-sub); font-size: 12px; line-height:1.55; }
.nav-section-head em, .nav-section summary em { color: var(--blue); font-style:normal; font-size: 12px; font-weight: var(--weight-heavy); white-space:nowrap; }
.nav-section-meta { display:flex; flex-shrink:0; align-items:center; gap:6px; }
.nav-section-meta b { display:grid; place-items:center; min-width:22px; height:22px; padding:0 6px; border-radius:var(--radius-pill); background:color-mix(in srgb, var(--brand) 8%, transparent); color:var(--blue); font-size: 12px; }
.role-focused-nav { overflow: visible; align-self: start; }
.role-focused-nav .nav-section-head { display:grid; grid-template-columns:1fr; align-items:stretch; }
.nav-click-note { margin-top: 10px; padding: 10px 11px; border-radius: var(--radius-lg); background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 10%, transparent), color-mix(in srgb, var(--info) 8%, transparent)); color: var(--brand); font-size: 12px; font-weight: var(--weight-heavy); line-height: 1.45; border: 1px solid color-mix(in srgb, var(--brand) 14%, transparent); }
.nav-section-body { display:grid; gap:8px; margin-top:10px; }
.nav-section-today button { margin-top: 0; }
.nav-today-jump { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent); border-radius: var(--radius-pill); padding: 10px 12px; min-height: 46px; color: var(--surface); background: linear-gradient(135deg, var(--cyan), var(--blue)); font-size: 12px; font-weight: var(--weight-heavy); box-shadow: 0 10px 22px color-mix(in srgb, var(--brand) 18%, transparent); white-space: nowrap; }
.nav-tabs button {
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--text);
  background: var(--surface);
  padding: 11px 12px;
  border-radius: var(--radius-lg);
  text-align: left;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  align-items: center;
  gap: 9px;
  transition: 150ms ease;
  width: 100%;
  min-height: 76px;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--text) 4%, transparent);
}
.nav-tabs button:hover { color: var(--text); background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 34%, transparent); transform: translateY(-1px); box-shadow: 0 14px 28px color-mix(in srgb, var(--brand) 12%, transparent); }
.nav-tabs button:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 30%, transparent); outline-offset: 2px; }
.nav-tabs button.active {
  color: var(--text);
  border-color: color-mix(in srgb, var(--brand) 62%, transparent);
  background: linear-gradient(135deg, var(--brand-soft), color-mix(in srgb, var(--ok-soft) 94%, transparent));
  box-shadow: 0 14px 30px color-mix(in srgb, var(--brand) 16%, transparent), inset 5px 0 0 var(--blue);
}
.nav-tabs button.nav-launch-card .nav-label { min-width:0; display:grid; gap:4px; }
.nav-tabs button.nav-launch-card .nav-label strong { color: var(--text); font-weight: var(--weight-heavy); line-height:1.18; font-size: 16px; word-break: keep-all; overflow-wrap: normal; }
.nav-tabs button.nav-launch-card .nav-label em { color: var(--brand); font-style: normal; font-size: 12px; font-weight: var(--weight-heavy); display:inline-flex; width:max-content; max-width:100%; align-items:center; gap:4px; padding:3px 7px; border-radius:var(--radius-pill); background:color-mix(in srgb, var(--brand) 9%, transparent); }
.nav-tabs small.nav-role { grid-column:1; justify-self:start; color: var(--text-sub); min-width:0; text-align:left; line-height:1.25; font-size: 12px; font-weight: var(--weight-heavy); overflow-wrap: normal; word-break: keep-all; white-space: normal; }
.nav-tabs button i { grid-column:2; grid-row:1 / span 2; display:grid; place-items:center; width:30px; height:30px; border-radius:var(--radius-pill); background:var(--text); color:var(--surface); font-style:normal; font-weight: var(--weight-heavy); transition:150ms ease; }
.nav-tabs button:hover i, .nav-tabs button.active i { transform: translateX(2px); background: var(--blue); }
.nav-tabs .nav-today-jump { display:inline-flex; width:100%; min-height:46px; grid-template-columns:none; text-align:center; margin-top:10px; }

.main { min-width: 0; width: 100%; max-width: 1440px; min-height: 100dvh; height: auto; margin-inline: auto; padding: 28px 34px 44px; overflow-x: hidden; overflow-y: visible; overscroll-behavior: auto; }
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-bottom: 24px;
}

@media (min-width: 1181px) {
  .app-shell { display: block; }
  .sidebar { position: fixed; left: 0; top: 0; width: 232px; z-index: 30; }
  .main { margin-left: 232px; margin-right: auto; width: calc(100% - 232px); max-width: 1440px; }
}

.top-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.top-controls { display:block; }
.top-controls > summary { display:none; cursor:pointer; font-weight: var(--weight-heavy); color:var(--blue); border:1px solid var(--line); background:var(--surface); border-radius: var(--radius-lg); padding:12px 14px; }
.top-controls > summary::-webkit-details-marker { display:none; }
.select-wrap {
  display: flex; gap: 9px; align-items: center;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 9px 12px;
  color: var(--muted);
  font-size: 13px;
}
select, input, textarea {
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 10px 12px;
  outline: none;
  min-height: 44px;
}
select:focus, input:focus, textarea:focus { border-color: color-mix(in srgb, var(--info) 70%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--info) 8%, transparent); }
.primary, .secondary {
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  padding: 12px 15px;
  min-height: 46px;
  color: var(--surface);
  font-weight: var(--weight-heavy);
  background: linear-gradient(135deg, var(--cyan), var(--blue));
  box-shadow: 0 16px 36px color-mix(in srgb, var(--info) 22%, transparent);
}
.secondary { color: var(--text); background: var(--surface); border-color: var(--line); box-shadow: none; }

.tab-panel { display: none; animation: fadeIn 150ms ease; }
.route-boot-status { display: flex; align-items: center; gap: 14px; min-height: 112px; margin-bottom: 16px; padding: 18px; border: 1px solid var(--line); background: var(--surface); }
.route-boot-status[hidden] { display: none; }
.route-boot-status p { margin: 4px 0 0; color: var(--text-sub); }
.route-boot-mark { display: grid; flex: 0 0 44px; width: 44px; height: 44px; place-items: center; border-radius: var(--radius-sm); background: var(--brand); color: var(--surface); font-size: 20px; font-weight: var(--weight-heavy); }
.tab-panel.active { display: grid; gap: 20px; }
.integrated-view-nav { width: 100%; overflow-x: auto; gap: 2px; scrollbar-width: thin; }
.integrated-view-nav button { min-height: 44px; flex: 0 0 auto; white-space: nowrap; }
.integrated-subview { display: grid; gap: 20px; min-width: 0; }
.integrated-subview[hidden] { display: none !important; }
.management-nav { margin-top: 10px; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.hero-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(340px, 0.7fr); gap: 20px; }
.hero-card, .risk-card, .panel, .metric-card, .project-card, .kpi-card, .experiment-card {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.hero-card {
  padding: 24px;
  min-height: 218px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--brand) 10%, transparent), color-mix(in srgb, var(--info) 6%, transparent) 45%, color-mix(in srgb, var(--brand) 7%, transparent)),
    var(--panel);
  overflow: hidden;
  position: relative;
  display: grid;
  align-content: space-between;
}
.hero-card:after { display: none; }
.hero-copy { position: relative; z-index: 1; }
.hero-card h3 { font-size: 32px; line-height: 1.08; max-width: 900px; }
.hero-card p { color: var(--muted); max-width: 860px; line-height: 1.6; margin-top: 12px; font-size: 14px; }
.decision-strip { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 24px; }
.decision-pill { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 13px; background: color-mix(in srgb, var(--surface) 88%, transparent); }
.decision-pill strong { display:block; font-size: 13px; margin-bottom: 4px; }
.decision-pill span { color: var(--muted); font-size: 12px; }
.risk-card { padding: 22px; display: grid; gap: 14px; }
.risk-score { min-height: 138px; display: grid; place-items: center; }
.data-ring { width: 124px; height: 124px; overflow: visible; }
.data-ring circle { fill: none; stroke-width: 11; transform: rotate(-90deg); transform-origin: 50% 50%; }
.data-ring-track { stroke: var(--line); }
.data-ring-value { stroke: var(--brand); stroke-linecap: round; }
.data-ring.danger .data-ring-value { stroke: var(--danger); }
.data-ring text { fill: var(--text); font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.data-ring .data-ring-label { fill: var(--text-sub); font-size: 12px; font-weight: 600; }
.risk-card p { color: var(--muted); line-height: 1.6; margin: 0; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 16px; }
.metric-card { padding: 16px; display: grid; gap: 9px; min-height: 136px; }
.metric-card .value { font-size: 24px; font-weight: var(--weight-heavy); letter-spacing: 0; }
.metric-card .meta { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 12px; }
.progress { height: 8px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--surface) 8%, transparent); overflow: hidden; }
.progress > i { display:block; height: 100%; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--cyan), var(--green)); transition: width 150ms ease; }
.progress.danger > i { background: linear-gradient(90deg, var(--amber), var(--red)); }
.progress.purple > i { background: linear-gradient(90deg, var(--purple), var(--pink)); }

.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.two-col.wide-left { grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.8fr); }
.three-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.panel { padding: 20px; min-width: 0; }
.panel.compact p { color: var(--muted); line-height: 1.6; margin: 10px 0 0; }
.panel-head { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 10px; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--brand) 13%, transparent); color: var(--brand); border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent);
  font-size: 12px; font-weight: var(--weight-heavy); white-space: nowrap;
}
.badge.success { background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 24%, transparent); }
.badge.danger { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 24%, transparent); }
.icon-bubble { display:inline-grid; place-items:center; width:42px; height:42px; border-radius:var(--radius-md); background:var(--info-soft); color:var(--info); font-weight:var(--weight-heavy); margin-bottom:14px; }
.icon-bubble.green { background:var(--ok-soft); color:var(--ok); }
.icon-bubble.purple { background:var(--brand-soft); color:var(--brand); }

.funnel { display: grid; gap: 12px; }
.funnel-row { display: grid; grid-template-columns: 120px minmax(160px, 1fr) 128px; gap: 12px; align-items: center; }
.nowrap { white-space: nowrap; }
.bar { height: 34px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--text) 6%, transparent); overflow: hidden; border: 1px solid color-mix(in srgb, var(--surface) 4%, transparent); }
.bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--cyan)); }
.amount { text-align: right; font-weight: var(--weight-heavy); }
.action-list, .review-list, .pipeline { display: grid; gap: 10px; }
.action-item, .review-item, .pipe-step {
  display: grid; gap: 8px;
  padding: 14px; border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--brand) 6%, transparent); border: 1px solid var(--line);
}
.action-item strong, .review-item strong, .pipe-step strong { display: flex; justify-content: space-between; gap: 8px; }
.action-item p, .review-item p, .pipe-step p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.severity-high { border-color: color-mix(in srgb, var(--danger) 38%, transparent); }
.severity-mid { border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.severity-low { border-color: color-mix(in srgb, var(--ok) 24%, transparent); }
.severity-high, .today-action-column.danger { background: linear-gradient(135deg, color-mix(in srgb, var(--danger-soft) 92%, transparent), color-mix(in srgb, var(--surface) 88%, transparent)); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.severity-mid, .today-action-column.warning { background: linear-gradient(135deg, color-mix(in srgb, var(--warn-soft) 92%, transparent), color-mix(in srgb, var(--surface) 88%, transparent)); border-color: color-mix(in srgb, var(--warn) 28%, transparent); }
.severity-low, .today-action-column.info { background: linear-gradient(135deg, color-mix(in srgb, var(--brand-soft) 92%, transparent), color-mix(in srgb, var(--surface) 88%, transparent)); border-color: color-mix(in srgb, var(--brand) 24%, transparent); }

.table-wrap { overflow:auto; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.table-wrap.limited { max-height: 340px; }
.table-wrap.limited::after { content:'最大5行表示。残りは各詳細画面・CSVで確認'; display:block; position:sticky; bottom:0; padding:8px 12px; background:color-mix(in srgb, var(--surface) 96%, transparent); color:var(--muted); font-size: 12px; font-weight: var(--weight-strong); border-top:1px solid var(--line); }
table { width: 100%; border-collapse: collapse; min-width: 860px; }
th, td { padding: 11px 12px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
th { color: var(--muted); font-size: 12px; font-weight: var(--weight-heavy); background: color-mix(in srgb, var(--surface-sub) 92%, transparent); }
td { color: var(--text); font-size: 13px; vertical-align: top; }
tr:last-child td { border-bottom: 0; }
.positive { color: var(--green); }
.negative { color: var(--red); }
.warning { color: var(--amber); }

.segmented { display:flex; padding: 4px; border-radius: var(--radius-lg); background: color-mix(in srgb, var(--surface) 90%, transparent); border: 1px solid var(--line); }
.segmented button { background: transparent; color: var(--muted); border: 0; padding: 8px 12px; border-radius: var(--radius-md); font-weight: var(--weight-heavy); }
.segmented button.active { background: color-mix(in srgb, var(--info) 18%, transparent); color: var(--text); }

.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.project-card { padding: 18px; display: grid; gap: 14px; }
.project-card header { display:flex; justify-content: space-between; gap: 10px; }
.project-card h4 { margin: 0 0 4px; font-size: 16px; }
.project-card small { color: var(--muted); }
.assignment-strip { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.assignment-strip span { border:1px solid var(--line); border-radius: var(--radius-pill); padding: 6px 8px; background: color-mix(in srgb, var(--text) 4%, transparent); color: var(--subtle); font-size: 12px; font-weight: var(--weight-strong); overflow-wrap:anywhere; }
.project-stat { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.project-stat div { background: color-mix(in srgb, var(--surface) 4%, transparent); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 10px; }
.project-stat span { display: block; color: var(--muted); font-size: 12px; margin-bottom: 4px; }
.project-stat strong { font-size: 16px; }

textarea { width: 100%; min-height: 132px; resize: vertical; line-height: 1.6; margin-top: 4px; }
.inline-actions { display:flex; align-items:center; gap: 12px; margin-top: 12px; color: var(--muted); flex-wrap: wrap; }
.kpi-grid, .experiment-grid, .impact-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.impact-grid.compact { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.kpi-card, .experiment-card { padding: 17px; }
.kpi-card .kpi-value { font-size: 24px; font-weight: var(--weight-heavy); letter-spacing: 0; margin: 8px 0; }
.experiment-card { display: grid; gap: 12px; }
.experiment-card p { color: var(--muted); line-height: 1.55; margin: 0; }
.experiment-card button { justify-self: start; }
.impact-card { border:1px solid var(--line); background:color-mix(in srgb, var(--surface) 5%, transparent); border-radius: var(--radius-lg); padding:16px; }
.impact-card strong { display:block; font-size: 24px; letter-spacing: 0; margin-top:6px; }
.stacked-system { display: grid; gap: 16px; }
.stacked-system .table-wrap { margin-top: 0; }
.stacked-system small { color: var(--muted); }
.model-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.model-card { padding: 16px; border-radius: var(--radius-lg); background: color-mix(in srgb, var(--surface) 92%, transparent); border: 1px solid var(--line); }
.model-card ul { margin: 12px 0 0; padding-left: 18px; color: var(--muted); line-height: 1.7; }

.toast { position: fixed; right: 22px; bottom: 22px; padding: 14px 16px; border-radius: var(--radius-lg); background: var(--text); color: var(--surface); font-weight: var(--weight-heavy); box-shadow: var(--shadow); opacity: 0; transform: translateY(8px); pointer-events: none; transition: 150ms ease; z-index: 50; }
.toast.show { opacity: 1; transform: none; }
.load-error-banner { align-items: center; background: var(--danger-soft); border: 1px solid var(--danger); display: flex; justify-content: space-between; gap: 16px; margin: 0 0 14px; padding: 12px 14px; }
.load-error-banner[hidden] { display: none; }
.load-error-banner strong { color: var(--danger); }
.load-error-banner p { margin: 3px 0 0; color: var(--text-sub); }

@media (max-width: 768px) {
  .app-shell { grid-template-columns: 1fr; height: auto; min-height: 100vh; overflow: visible; }
  .sidebar { position: relative; height: auto; max-height: none; overflow: visible; order: 2; }
  .main { height: auto; overflow-y: visible; order: 1; }
  .nav-tabs { grid-template-columns: 1fr; }
  .sidebar-card { margin-top: 0; }
  .above-fold-grid { grid-template-columns: 1fr; }
  .above-fold-grid .first-view-kpis .impact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-grid, .kpi-grid, .experiment-grid, .impact-grid, .impact-grid.compact { grid-template-columns: repeat(2, 1fr); }
  .project-grid, .model-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .main { padding: 14px 12px 30px; max-width: 100vw; }
  .sidebar { padding: 16px 12px; gap: 12px; }
  .brand-mark { width: 44px; height: 44px; border-radius: var(--radius-lg); font-size: 20px; }
  h1 { font-size: 16px; }
  h2 { font-size: 24px; line-height: 1.15; }
  h3 { line-height: 1.25; }
  .topbar, .top-actions, .panel-head { flex-direction: column; align-items: stretch; }
  .top-controls { width:100%; }
  .top-controls > summary { display:block; }
  .top-controls .top-actions { margin-top:10px; }
  .top-actions > *, .select-wrap, .top-actions button, .top-actions .badge { width: 100%; max-width: none; }
  .select-wrap { justify-content: space-between; }
  .hero-grid, .two-col, .two-col.wide-left, .three-col, .decision-strip { grid-template-columns: 1fr; }
  .metric-grid, .kpi-grid, .project-grid, .model-grid, .experiment-grid, .impact-grid, .form-grid, .flow-grid, .data-grid, .entry-map, .roadmap-modules { grid-template-columns: 1fr !important; }
  #unitPerformance .model-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  #unitPerformance .model-summary .impact-card { padding: 12px; overflow-wrap: normal; }
  #unitPerformance .model-summary .impact-card strong { font-size: 16px; letter-spacing: 0; white-space: nowrap; }
  .mission-card, .sidebar-card, .panel, .hero-card, .risk-card { max-width: 100%; overflow-wrap: anywhere; }
  .mission-card > div, .sidebar-card strong, .sidebar-card span, .text-link { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  .mission-card .text-link { display: block; }
  .nav-tabs { display: grid; grid-template-columns: 1fr; gap: 9px; overflow: visible; padding-bottom: 0; }
  .nav-section { padding: 11px; border-radius: var(--radius-lg); }
  .nav-section-head, .nav-section summary { align-items: flex-start; }
  .nav-tabs button { min-width: 0; width: 100%; padding: 12px; align-items: center; gap: 8px; grid-template-columns: minmax(0, 1fr) 28px; }
  .nav-tabs button.nav-launch-card .nav-label strong { min-width: 0; word-break: keep-all; overflow-wrap: normal; }
  .nav-tabs button small.nav-role { min-width: 0; overflow-wrap: normal; text-align:left; font-size: 12px; justify-self:start; }
  .nav-today-jump { width: 100%; justify-content: center; }
  .action-cta, .mini, .segmented button { font-size: 16px; }
  .hero-card, .risk-card, .panel, .metric-card, .project-card, .kpi-card, .experiment-card { border-radius: var(--radius-lg); }
  .hero-card { padding: 18px; min-height: auto; }
  .hero-card h3 { font-size: 24px; }
  .funnel-row { grid-template-columns: 92px 1fr; }
  .funnel-row .amount { grid-column: 2; text-align: left; }
  .table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 680px; }
}

.field-grid { display: grid; grid-template-columns: minmax(280px, 420px) 1fr; gap: 18px; align-items: start; }
.field-phone { border: 1px solid var(--line-strong); border-radius: var(--radius-lg); padding: 22px; background: linear-gradient(180deg, var(--surface), var(--surface)); box-shadow: var(--shadow); }
.field-phone h3 { margin: 6px 0 16px; font-size: 24px; }
.field-phone select, .field-phone textarea { width: 100%; margin: 8px 0 12px; border: 1px solid var(--line); border-radius: var(--radius-lg); color: var(--text); background: var(--surface); padding: 12px; }
.field-phone textarea { min-height: 118px; resize: vertical; }
.quick-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.quick-actions button, .mini { border: 1px solid var(--line-strong); border-radius: var(--radius-pill); padding: 9px 10px; color: var(--text); background: color-mix(in srgb, var(--brand) 8%, transparent); font-size: 12px; }
.security-strip { display:flex; justify-content:space-between; gap:12px; border:1px solid var(--line-strong); border-radius: var(--radius-lg); padding:14px 16px; margin-bottom:16px; background:color-mix(in srgb, var(--brand) 6%, transparent); color:var(--text); }
@media (max-width: 900px) { .field-grid { grid-template-columns: 1fr; } .quick-actions { grid-template-columns: 1fr; } }


/* PC-first production ERP refinements */
.caption, .muted { color: var(--muted); font-size: 13px; line-height: 1.55; }
.flow-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.flow-card, .data-card, .entry-row, .roadmap-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 14px;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--text) 4%, transparent);
}
.flow-card h4 { margin: 10px 0 8px; font-size: 14px; }
.flow-card p, .data-card p, .entry-row p, .roadmap-item p { color: var(--muted); line-height: 1.5; margin: 0; font-size: 13px; }
.flow-card small, .entry-row small, .roadmap-item span { color: var(--subtle); display: block; margin-top: 8px; font-size: 12px; }
.data-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.data-card { display: grid; gap: 8px; }
.data-card > span { font-size: 24px; font-weight: var(--weight-heavy); letter-spacing: 0; }
.readiness-panel { display: grid; gap: 16px; }
.readiness-score { border-radius: var(--radius-lg); padding: 20px; background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 10%, transparent), color-mix(in srgb, var(--ok) 8%, transparent)); border: 1px solid var(--line-strong); }
.readiness-score strong { display: block; font-size: 32px; letter-spacing: 0; }
.readiness-score span { color: var(--muted); font-weight: var(--weight-strong); }
.readiness-copy p { color: var(--muted); line-height: 1.65; }
.input-workbench { border:1px solid var(--line); background: var(--panel); border-radius: var(--radius); padding:20px; box-shadow: var(--shadow); }
.entry-map { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.entry-row { display:grid; grid-template-columns: 110px 1fr; gap: 6px 12px; align-items:start; }
.entry-row p, .entry-row small { grid-column: 2; }
.form-grid { display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.form-grid label { display:grid; gap:6px; color:var(--muted); font-weight: var(--weight-strong); font-size: 12px; }
.form-grid input, .form-grid select { width:100%; }
.field-grid { grid-template-columns: minmax(0, 1fr); }
.field-log { max-height: 420px; overflow: auto; }
.panel.nested { box-shadow: none; background: color-mix(in srgb, var(--surface) 72%, transparent); }
.model-summary { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.roadmap-list { display:grid; gap: 12px; }
code { color:var(--brand); font-weight: var(--weight-strong); }
.badge.danger { background: color-mix(in srgb, var(--danger) 8%, transparent); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 18%, transparent); }
.badge.success { background: color-mix(in srgb, var(--ok) 8%, transparent); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 18%, transparent); }
.badge { background: color-mix(in srgb, var(--brand) 8%, transparent); color: var(--brand); border-color: color-mix(in srgb, var(--brand) 18%, transparent); }
.value, .kpi-value, .amount, .risk-score strong, .metric-card .value { font-variant-numeric: tabular-nums; }
@media (max-width: 1280px) { .flow-grid, .data-grid, .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.period-strip { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; color:var(--muted); font-size: 12px; font-weight: var(--weight-strong); }
.period-strip span { border:1px solid var(--line); background:var(--surface); border-radius:var(--radius-pill); padding:6px 9px; }
.action-cta { justify-self:start; padding:8px 11px; font-size: 12px; }
.top-actions .badge { max-width: 260px; white-space: normal; justify-content:center; }

.roadmap-grid { display:grid; gap:18px; }
.roadmap-modules { display:grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap:12px; }
.roadmap-card { border:1px solid var(--line); background:var(--surface); border-radius: var(--radius-lg); padding:14px; display:grid; gap:8px; }
.roadmap-card.urgent { border-color: color-mix(in srgb, var(--danger) 22%, transparent); background: linear-gradient(180deg, var(--surface), var(--danger-soft)); }
.roadmap-card h4 { margin:0; font-size: 14px; }
.roadmap-card small { color:var(--subtle); font-weight: var(--weight-strong); }
.roadmap-card p, .phase-row p { margin:0; color:var(--muted); line-height:1.5; font-size: 13px; }
.phase-row { border-left:4px solid var(--blue); padding:10px 12px; background:var(--surface); border-radius: var(--radius-md); }
@media (max-width: 1500px) { .roadmap-modules { grid-template-columns: repeat(3, minmax(0, 1fr)); } }


/* Field / management separation and unit performance */
.text-link { color: var(--blue); font-weight: var(--weight-strong); text-decoration: none; display: inline-block; margin-top: 8px; }
.link-button { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pill { display: inline-flex; padding: 6px 10px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--brand) 10%, transparent); color: var(--text); border: 1px solid color-mix(in srgb, var(--brand) 16%, transparent); font-size: 12px; font-weight: var(--weight-strong); }
.unit-card { margin-bottom: 16px; }
.team-profit-reward { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 12px 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--info-soft); }
.team-profit-reward > div, .team-profit-reward label { display: grid; min-width: 0; gap: 4px; }
.team-profit-reward span, .team-profit-reward label, .team-profit-reward small { color: var(--text-sub); font-size: 12px; }
.team-profit-reward strong { color: var(--info); font-size: 16px; }
.team-profit-reward input { width: 100%; min-width: 0; }
.bonus-simulation-grid { margin:16px 0; }
.bonus-simulation-grid .panel-head { align-items:flex-start; }
.bonus-simulation-form { display:grid; grid-template-columns:minmax(220px,360px) auto minmax(220px,1fr); gap:12px; align-items:end; margin:14px 0; padding:12px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface-sub); }
.bonus-simulation-form label { display:grid; gap:5px; min-width:0; }
.bonus-simulation-form [role="status"] { color:var(--text-sub); font-size:var(--font-xs); line-height:1.45; }
.pricebook-workspace { display: grid; gap: 16px; margin-bottom: 20px; padding: 18px 0; border-top: 1px solid var(--brand-soft); border-bottom: 1px solid var(--brand-soft); }
.pricebook-workspace > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.pricebook-workspace h3, .pricebook-workspace h4, .pricebook-workspace p { margin-top: 0; }
.pricebook-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 14px; align-items: start; }
.pricebook-layout aside { padding: 12px; border-left: 3px solid var(--info); background: var(--info-soft); }
.pricebook-layout aside ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pricebook-layout aside li { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; font-size: 12px; }
.pricebook-revision { min-width: 210px; }
.pricebook-revision summary { cursor: pointer; font-weight: var(--weight-strong); color: var(--brand); }
.pricebook-form { display: grid; grid-template-columns: repeat(4, minmax(140px, 1fr)); gap: 8px; width: min(920px, calc(100vw - 320px)); margin-top: 10px; padding: 12px; border: 1px solid var(--line); background: var(--surface); }
.pricebook-form label, .pricebook-estimate-form label { display: grid; gap: 4px; min-width: 0; font-size: 12px; font-weight: var(--weight-strong); color: var(--text-sub); }
.pricebook-form input, .pricebook-form select, .pricebook-estimate-form input, .pricebook-estimate-form select { width: 100%; min-width: 0; }
.pricebook-reason { grid-column: span 2; }
.pricebook-estimate-form { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; padding: 14px; border: 1px solid var(--line); background: var(--info-soft); }
.pricebook-line-list { display: grid; gap: 6px; margin-top: 8px; }
.pricebook-estimate-line { display: grid; grid-template-columns: minmax(220px, 1fr) 120px 36px; gap: 8px; align-items: end; }
.pricebook-line-delete { width: 36px; height: 36px; align-self: end; }
.pricebook-line-add { margin-top: 8px; }
.pricebook-estimate-summary { display: grid; gap: 8px; align-content: start; }
.pricebook-estimate-summary span { display: flex; justify-content: space-between; gap: 10px; }
.construction-estimate-options { display: grid; gap: 10px; min-width: 0; margin: 12px 0 0; padding: 12px; border: 1px solid var(--text-faint); background: var(--info-soft); }
.construction-estimate-options[hidden], .construction-breakdown-fields[hidden] { display: none !important; }
.construction-estimate-options legend { padding: 0 6px; color: var(--info); font-size: 13px; font-weight: var(--weight-heavy); }
.construction-breakdown-fields { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: 8px; min-width: 0; }
.construction-breakdown-fields > details { grid-column: 1 / -1; }
.construction-breakdown-fields > details summary { cursor: pointer; color: var(--brand); font-size: 12px; font-weight: var(--weight-strong); }
.construction-rate-grid { display: grid; grid-template-columns: repeat(3, minmax(110px, 1fr)); gap: 8px; margin-top: 8px; }
.construction-welfare-total { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; grid-column: 1 / -1; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.construction-welfare-total strong { color: var(--info); font-size: 20px; }
.construction-welfare-total small { color: var(--text-sub); }
.construction-breakdown-fields > p { grid-column: 1 / -1; margin: 0; color: var(--text-sub); font-size: 12px; }
.construction-estimate-modal { width: min(1040px, calc(100vw - 40px)); max-height: calc(100vh - 40px); overflow: auto; }
.construction-estimate-modal > .icon-button { position: absolute; top: 14px; right: 14px; }
.construction-estimate-modal > footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.construction-estimate-sheet { display: grid; gap: 16px; padding: 4px; color: var(--text); background: var(--surface); }
.construction-estimate-sheet > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-right: 44px; border-bottom: 2px solid var(--text); }
.construction-estimate-sheet > header h3 { margin: 3px 0 10px; font-size: 24px; }
.construction-estimate-sheet > header > strong { margin-bottom: 10px; font-size: 24px; }
.construction-estimate-sheet dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.construction-estimate-sheet dl > div { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 8px; }
.construction-estimate-sheet dt { color: var(--text-sub); font-size: 12px; font-weight: var(--weight-strong); }
.construction-estimate-sheet dd { margin: 0; overflow-wrap: anywhere; font-weight: var(--weight-strong); }
.construction-sheet-columns { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 14px; }
.construction-estimate-sheet table { min-width: 0; }
.construction-sheet-total td { border-top: 2px solid var(--text); font-weight: var(--weight-heavy); }
.construction-estimate-sheet > p { margin: 0; color: var(--text-sub); font-size: 12px; }
.similar-estimates, .pricebook-learning { display: grid; gap: 10px; padding: 14px 0; border-top: 1px solid var(--brand-soft); }
.similar-estimates > div:last-child { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.similar-estimate { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); background: var(--surface); }
.similar-estimate header { display: flex; justify-content: space-between; gap: 8px; }
.similar-estimate header > div { display: grid; gap: 3px; min-width: 0; }
.similar-estimate small { color: var(--text-sub); overflow-wrap: anywhere; }
.similar-estimate em { color: var(--info); font-size: 16px; font-style: normal; font-weight: var(--weight-heavy); }
.similar-estimate p { margin: 0; color: var(--text-sub); font-size: 12px; }
.similar-estimate > div { display: flex; flex-wrap: wrap; gap: 5px; }
.similar-estimate > div span { padding: 4px 6px; border-radius: var(--radius-sm); background: var(--brand-soft); font-size: 12px; }
.audit-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; }
.audit-list li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 10px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--text) 4%, transparent); font-size: 13px; }
.field-only-page { min-height: 100vh; max-width: 100dvw; overflow-x: hidden; }
.field-only-page .ambient { display: none; }
.field-only-page { padding-bottom: max(102px, env(safe-area-inset-bottom)); }
.field-shell { width: min(920px, calc(100dvw - 28px)); max-width: calc(100dvw - 28px); margin: 0 auto; padding: 28px 0 48px; display: grid; gap: 18px; overflow-x: clip; }
.field-topbar, .field-step-grid, .field-card, .field-shell > .panel { width: 100%; max-width: 100%; min-width: 0; }
.field-offline-banner { align-items: center; background: var(--warn-soft); border: 1px solid var(--warn); display: flex; gap: 10px; padding: 12px 14px; }
.field-offline-banner[hidden] { display: none; }
.field-offline-banner strong { color: var(--warn); }
.field-topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px; border-radius: var(--radius-lg); }
.field-topbar h1 { margin: 4px 0; font-size: 32px; letter-spacing: 0; }
.field-step-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.field-card { padding: 22px; border-radius: var(--radius-lg); }
.field-simple-form { margin: 16px 0; }
.field-upload-box { display: grid; gap: 8px; min-width: 0; max-width: 100%; margin: 14px 0; padding: 16px; border: 1px dashed color-mix(in srgb, var(--brand) 35%, transparent); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--brand-soft) 72%, transparent); color: var(--text); font-weight: var(--weight-strong); overflow: hidden; }
.field-upload-box input { width: 100%; min-width: 0; max-width: 100%; padding: 12px; border-radius: var(--radius-md); border: 1px solid color-mix(in srgb, var(--text-faint) 50%, transparent); background: var(--surface); }
.field-upload-box span { min-width: 0; max-width: 100%; font-size: 14px; color: var(--muted); font-weight: var(--weight-strong); overflow-wrap: anywhere; }
.field-upload-box progress { width: 100%; height: 10px; }
.evidence-preview { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; min-width: 0; max-width: 100%; }
.evidence-chip { display: grid; gap: 4px; padding: 8px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--surface) 75%, transparent); border: 1px solid color-mix(in srgb, var(--text) 8%, transparent); font-size: 12px; }
.evidence-chip img { width: 100%; height: 72px; object-fit: cover; border-radius: var(--radius-md); }
.evidence-chip small { color: var(--muted); }
.field-today-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 18px 0; }
.field-today-strip span, .completion-preview, .field-context-help { border: 1px solid color-mix(in srgb, var(--text) 8%, transparent); background: color-mix(in srgb, var(--surface) 72%, transparent); border-radius: var(--radius-lg); padding: 12px 14px; }
.field-quick-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 16px 0; }
.field-quick-actions button { border: 1px solid color-mix(in srgb, var(--brand) 50%, transparent); background: var(--brand-soft); color: var(--brand); border-radius: var(--radius-lg); padding: 13px 10px; min-height: 52px; font-weight: var(--weight-strong); cursor: pointer; }
.field-quick-actions button:hover, .field-quick-actions button:focus { background: var(--brand-soft); outline: 3px solid color-mix(in srgb, var(--brand) 18%, transparent); }
.field-today-strip strong { display: block; margin-top: 4px; font-size: 20px; color: var(--text); }
.report-type-section { margin-top: 18px; }
.report-type-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.report-type-button { min-height: 86px; border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--surface) 78%, transparent); color: var(--text); text-align: left; padding: 14px; cursor: pointer; transition: .18s ease; }
.report-type-grid > .report-type-button { width: 100%; max-width: 100%; min-width: 0; display: grid; justify-content: stretch; }
.report-type-button strong { display: block; font-size: 16px; margin-bottom: 6px; }
.report-type-button span { color: var(--muted); font-size: 12px; line-height: 1.5; }
.report-type-button.active { border-color: color-mix(in srgb, var(--brand) 55%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 12%, transparent); background: var(--brand-soft); }
.field-context-help { margin: 14px 0 0; color: var(--text); }
.completion-preview { margin: 14px 0; }
.preview-row strong { display: block; margin-bottom: 4px; }
.preview-row p, .preview-row small { margin: 0; color: var(--muted); }
.preview-row.success strong { color: var(--ok); }
.preview-row.warning strong { color: var(--warn); }
.big-action { min-height: 56px; padding-inline: 28px; font-size: 16px; }
.admin-only { display: none !important; }
body[data-admin-mode="true"] .admin-only { display: revert !important; }
.tab-panel.admin-only.active { display: none !important; }
body[data-admin-mode="true"] .tab-panel.admin-only.active { display: grid !important; }
.model-summary.compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 880px) {
  .field-topbar { align-items: flex-start; flex-direction: column; }
  .field-step-grid, .field-today-strip, .field-quick-actions, .report-type-grid, .model-summary.compact, .impact-grid.compact { grid-template-columns: 1fr; }
}


/* Role-first internal management OS */
.role-home-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.role-home-card { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-lg); padding: 18px; display: grid; gap: 14px; box-shadow: 0 8px 24px color-mix(in srgb, var(--text) 5%, transparent); }
.role-home-card h3 { line-height: 1.45; }
.role-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.executive-kpi p { color: var(--muted); line-height: 1.45; margin: 8px 0 0; }
.seven-step { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.field-check-panel { margin: 16px 0; padding: 16px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 74%, transparent); }
.field-check-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.field-check-grid label { display: flex; align-items: center; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); font-weight: var(--weight-strong); }
.field-choice-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1280px) { .seven-step { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 880px) { .role-home-grid, .seven-step, .field-check-grid, .field-choice-form { grid-template-columns: 1fr; } }

@media (max-width: 880px) {
  .seven-step { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
  .seven-step .impact-card { padding: 12px; }
  .seven-step .impact-card strong { font-size: 16px; }
  .seven-step .impact-card p:not(.eyebrow) { font-size: 12px; line-height: 1.4; }
}

/* Human-centered role UX */
.business-timeline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.timeline-card { padding: 18px; border: 1px solid color-mix(in srgb, var(--brand) 16%, transparent); border-radius: var(--radius-lg); background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 92%, transparent), color-mix(in srgb, var(--brand-soft) 72%, transparent)); box-shadow: 0 12px 34px color-mix(in srgb, var(--text) 6%, transparent); display: grid; gap: 8px; }
.timeline-card strong { font-size: 24px; letter-spacing: 0; color: var(--text); }
.timeline-card p, .timeline-card small { margin: 0; color: var(--muted); line-height: 1.5; }
.operating-room-hero { border: 1px solid color-mix(in srgb, var(--ok) 22%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--ok-soft) 90%, transparent), color-mix(in srgb, var(--surface) 88%, transparent)); }
.progress.compact { height: 9px; min-width: 120px; margin: 0; }
.ux-principle-strip, .executive-focus-strip { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; margin-bottom: 16px; padding: 14px; border: 1px solid color-mix(in srgb, var(--brand) 18%, transparent); border-radius: var(--radius-lg); background: linear-gradient(135deg, color-mix(in srgb, var(--brand-soft) 92%, transparent), color-mix(in srgb, var(--surface) 82%, transparent)); }
.ux-principle-strip { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ux-principle-strip div, .executive-focus-strip div { display: grid; gap: 4px; }
.ux-principle-strip strong, .executive-focus-strip strong { color: var(--text); font-size: 14px; }
.ux-principle-strip span, .executive-focus-strip span { color: var(--muted); font-size: 12px; line-height: 1.5; }
.role-home-card-ux header { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
.role-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--radius-lg); background: var(--text); color: var(--surface); font-weight: var(--weight-heavy); font-size: 13px; box-shadow: 0 10px 20px color-mix(in srgb, var(--text) 18%, transparent); }
.stakeholder-switchboard { grid-column:1 / -1; display:grid; gap:12px; }
.stakeholder-role-panel { border:1px solid var(--line); border-radius: var(--radius-lg); background:var(--surface); overflow:hidden; box-shadow:0 10px 26px color-mix(in srgb, var(--text) 5%, transparent); }
.stakeholder-role-panel summary { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:start; padding:16px; cursor:pointer; list-style:none; }
.stakeholder-role-panel summary::-webkit-details-marker { display:none; }
.stakeholder-role-panel summary h3 { line-height:1.42; }
.stakeholder-role-panel summary b { align-self:center; color:var(--blue); background:color-mix(in srgb, var(--brand) 8%, transparent); border-radius:var(--radius-pill); padding:7px 10px; font-size: 12px; white-space:nowrap; }
.stakeholder-role-body { display:grid; gap:12px; padding:0 16px 16px 72px; }
.role-outcome { display:grid; gap:4px; padding:12px; border-radius: var(--radius-lg); background:color-mix(in srgb, var(--brand) 6%, transparent); }
.role-outcome.muted { background:color-mix(in srgb, var(--text-faint) 7%, transparent); }
.role-outcome span { color:var(--muted); line-height:1.55; }
.role-stress, .role-promise { margin: 0; padding: 10px 12px; border-radius: var(--radius-lg); line-height: 1.55; font-size: 13px; }
.role-stress { background: color-mix(in srgb, var(--warn) 12%, transparent); color: var(--warn); }
.role-promise { background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ok); }
.sales-next-list, .manager-queue-list { display: grid; gap: 10px; }
.sales-next-card { display: grid; gap: 6px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--surface) 82%, transparent); }
.sales-next-card.priority { border-color: color-mix(in srgb, var(--brand) 38%, transparent); box-shadow: 0 8px 22px color-mix(in srgb, var(--brand) 8%, transparent); }
.sales-next-card strong { display: flex; justify-content: space-between; gap: 12px; }
.sales-next-card p, .sales-next-card small, .manager-queue small { margin: 0; color: var(--muted); line-height: 1.5; }
.field-ergonomics-note { display: grid; gap: 6px; margin: 10px 0 16px; padding: 14px 16px; border-radius: var(--radius-lg); background: color-mix(in srgb, var(--ok) 12%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 22%, transparent); color: var(--ok); }
.field-ergonomics-note span { color: var(--ok); line-height: 1.55; font-size: 13px; }
.field-voice-row { display: flex; align-items: center; gap: 10px; margin: 12px 0 8px; padding: 10px; border: 1px solid var(--brand); border-radius: var(--radius-md); background: var(--brand-soft); }
.field-voice-row button { min-height: 46px; white-space: nowrap; }
.field-voice-row button[aria-pressed="true"] { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }
.field-voice-row span { color: var(--text-sub); font-size: 12px; }
.field-required-check { border-color: color-mix(in srgb, var(--brand) 34%, var(--line)); background: var(--brand-soft); }
.field-required-check > strong { margin-left: auto; padding: 2px 6px; border-radius: var(--radius-sm); background: var(--brand); color: var(--surface); font-size: 12px; }
@media (max-width: 520px) { .field-voice-row { align-items: stretch; flex-direction: column; } .field-voice-row button { width: 100%; } }
.field-sticky-action-rail { position: fixed; left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 10px; border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: 0 16px 40px color-mix(in srgb, var(--text) 16%, transparent); backdrop-filter: blur(12px); z-index: 80; pointer-events: none; transition: opacity .16s ease, transform .16s ease; }
.field-sticky-action-rail button { position: relative; width: 100%; min-width: 0; border: 0; border-radius: var(--radius-lg); padding: 13px 8px; background: var(--text); color: var(--surface); font-weight: var(--weight-heavy); cursor: pointer; pointer-events: auto; touch-action: manipulation; }
.field-sticky-action-rail button:nth-child(3) { background: var(--warn); }
.field-sticky-action-rail.submit-visible { opacity: 0; transform: translateY(calc(100% + 24px)); }
@media (max-width: 880px) {
  .ux-principle-strip, .executive-focus-strip, .business-timeline { grid-template-columns: 1fr; }
  .field-sticky-action-rail { bottom: max(8px, env(safe-area-inset-bottom)); }
}

body.auth-open { overflow: hidden; }
#loginOverlay { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; overflow: auto; box-sizing: border-box; padding: 24px; background: var(--bg); }
#loginOverlay::before { content: ''; position: fixed; inset: 0 0 auto; height: 4px; background: var(--brand); }
.auth-dialog { display: grid; gap: 12px; width: min(440px, 100%); min-width: 0; max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; box-sizing: border-box; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); box-shadow: var(--shadow-pop); }
.auth-handoff-page { min-height: 100dvh; display: grid; place-items: center; box-sizing: border-box; padding: 24px; background: var(--surface-sub); }
.auth-handoff-page h1 { margin: 0; font-size: 24px; }
.auth-handoff-page p { margin: 0; color: var(--text-sub); }
.auth-dialog h2 { font-size: 24px; line-height: 1.25; letter-spacing: 0; word-break: keep-all; overflow-wrap: normal; }
.auth-login-heading { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 12px; }
.auth-login-heading strong { display: block; font-size: 13px; color: var(--brand); }
.auth-login-heading h2 { margin: 2px 0 0; }
.auth-brand-mark { display: grid; width: 48px; height: 48px; place-items: center; border-radius: var(--radius-sm); background: var(--text); color: var(--surface); font-size: 24px; font-weight: var(--weight-heavy); }
.auth-dialog [data-auth-description] { margin: 0 0 4px; color: var(--text-sub); }
.auth-dialog input { width: 100%; min-height: 48px; box-sizing: border-box; padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; }
.auth-dialog input:focus { border-color: var(--brand); outline: 3px solid color-mix(in srgb, var(--brand) 14%, transparent); }
.auth-action { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.auth-login-form { display: grid; gap: 10px; min-width: 0; margin: 0; }
.auth-label { display: block; font-size: 13px; font-weight: var(--weight-strong); color: var(--text-sub); }
.auth-divider { display: flex; align-items: center; gap: 10px; color: var(--text-sub); font-size: 12px; }
.auth-divider::before, .auth-divider::after { content: ''; height: 1px; flex: 1; background: var(--surface-sub); }
.auth-emergency { border-top: 1px solid var(--surface-sub); padding-top: 10px; }
.auth-emergency summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--text-sub); font-size: 13px; font-weight: var(--weight-strong); }
.auth-emergency[open] { display: grid; gap: 10px; }
.auth-role-switcher { padding-top: 2px; }
.auth-role-switcher summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--text-sub); font-size: 13px; font-weight: var(--weight-strong); }
.auth-role-switcher[open] { display: grid; gap: 10px; }
.auth-role-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.auth-role-grid a { min-height: 44px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text-sub); font-size: 13px; font-weight: var(--weight-strong); text-decoration: none; }
.auth-role-grid a[aria-current="page"] { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.auth-dialog-mfa-setup { width: min(760px, calc(100vw - 32px)); }
.auth-dialog-mfa-setup .auth-mfa-step { grid-template-columns: minmax(240px, .9fr) minmax(280px, 1.1fr); align-items: start; column-gap: 16px; }
.auth-dialog-mfa-setup .auth-mfa-heading { grid-column: 1 / -1; }
.auth-dialog-mfa-setup .auth-mfa-setup { grid-column: 1; grid-row: 2; }
.auth-dialog-mfa-setup .auth-code-entry { grid-column: 2; grid-row: 2; }
.brand { color: inherit; text-decoration: none; }
.role-landing[hidden] { display: none; }
.role-landing { display: grid; gap: 16px; width: 100%; padding: 4px 0 18px; }
.role-landing > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.role-landing > header h2 { margin: 2px 0 4px; font-size: 24px; letter-spacing: 0; }
.role-landing > header p { margin: 0; color: var(--muted); }
.landing-bell { min-width: 88px; text-decoration: none; }
.role-landing-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.role-landing-metric { display: grid; gap: 5px; min-height: 92px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); text-decoration: none; }
.role-landing-metric:is(button) { cursor: pointer; font: inherit; text-align: left; width: 100%; }
.role-landing-metric:hover { border-color: var(--brand); }
.role-landing-metric.active { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); background: var(--brand-soft); }
.role-landing-metric span, .role-landing-metric small { color: var(--muted); font-size: 12px; font-weight: var(--weight-strong); }
.role-landing-metric strong { font-size: 20px; }
.role-landing-metric.danger { border-color: var(--danger-soft); background: var(--danger-soft); }
.role-landing-metric.danger strong { color: var(--danger); }
.role-landing-columns { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr); gap: 16px; }
.role-landing-columns > section { min-width: 0; }
.role-landing-columns h3 { margin: 0 0 8px; font-size: 16px; }
.role-landing-list { display: grid; gap: 7px; }
.role-landing-row { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); text-decoration: none; }
.role-landing-row > span { display: grid; gap: 3px; min-width: 0; flex: 1; }
.role-landing-row strong, .role-landing-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role-landing-row small { color: var(--muted); }
.role-landing-row b { white-space: nowrap; }
.role-landing-row em { color: var(--brand); font-style: normal; font-weight: var(--weight-strong); white-space: nowrap; }
.activity-driver-panel { min-width: 0; }
.driver-sheet { min-width: 940px; }
.driver-sheet th:last-child, .driver-sheet td:last-child { width: 52px; text-align: center; }
.driver-path { display: flex; align-items: center; gap: 8px; min-width: 360px; }
.driver-path > span { color: var(--text-sub); }
.driver-path b { margin-left: 4px; color: var(--text); }
.activity-driver-modal { width: min(1080px, calc(100vw - 40px)); }
.driver-template-bar { display: flex; flex-wrap: wrap; gap: 8px; }
.driver-template-bar button:last-child { margin-left: auto; }
.driver-editor { min-width: 960px; }
.driver-editor th, .driver-editor td { padding: 7px; }
.driver-editor input, .driver-editor select { min-width: 0; width: 100%; min-height: 40px; }
.driver-editor th:nth-child(1), .driver-editor td:nth-child(1), .driver-editor th:last-child, .driver-editor td:last-child { width: 44px; }
.driver-editor th:nth-child(2) { width: 190px; }
.driver-editor th:nth-child(3), .driver-editor th:nth-child(4), .driver-editor th:nth-child(7) { width: 120px; }
.driver-grip { color: var(--text-sub); text-align: center; }
.driver-save-status { min-height: 20px; color: var(--text-sub); }
.activity-weekly-band { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.activity-week-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.activity-week-heading h4, .activity-week-unit h4 { margin: 0; }
.activity-week-heading label { display: grid; gap: 4px; color: var(--text-sub); font-size: var(--font-xs); }
.activity-week-heading input { min-height: 40px; }
.activity-week-unit + .activity-week-unit { margin-top: 18px; }
.activity-week-unit > h4 { margin-bottom: 8px; }
.activity-week-grid { min-width: 760px; }
.activity-week-grid th:first-child { min-width: 150px; }
.activity-week-grid th:not(:first-child), .activity-week-grid td:not(:first-child) { min-width: 118px; }
.activity-week-grid td > small, .activity-week-grid td:first-child small { display: block; margin-top: 4px; color: var(--text-sub); }
.activity-target-cell { display: grid; gap: 4px; }
.activity-target-cell input { width: 100%; min-height: 38px; }
.activity-target-cell small { white-space: nowrap; }
.activity-week-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 10px; min-height: 40px; }
.activity-week-actions span { color: var(--text-sub); }
.personal-activity-card { display: grid; gap: 12px; }
.personal-activity-row { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(120px, 2fr) minmax(110px, auto); align-items: center; gap: 14px; }
.personal-activity-row small { display: block; color: var(--text-sub); margin-top: 2px; }
.personal-activity-row b { text-align: right; font-variant-numeric: tabular-nums; }
.personal-activity-progress { height: 7px; overflow: hidden; background: var(--surface-sub); border-radius: var(--radius-sm); }
.personal-activity-progress span { display: block; width: var(--activity-progress); height: 100%; background: var(--brand); border-radius: inherit; }
.owner-cascade-band { margin-top: 20px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.owner-cascade-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.owner-cascade-kpi { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.owner-cascade-kpi > span, .owner-cascade-kpi > small { display: block; color: var(--text-sub); }
.owner-cascade-kpi > strong { display: block; margin: 6px 0; font-size: var(--font-xl); }
.owner-cascade-kpi details { margin-top: 12px; }
.owner-cascade-kpi summary { display: flex; align-items: center; min-height: 44px; color: var(--brand); cursor: pointer; font-weight: var(--weight-strong); }
.owner-cascade-team { padding: 10px 0; border-top: 1px solid var(--line); }
.owner-cascade-team summary { display: grid; grid-template-columns: minmax(120px, 1fr) repeat(3, auto); align-items: center; gap: 10px; color: var(--text); }
.owner-cascade-team summary span { color: var(--text-sub); font-size: var(--font-xs); }
@media (max-width: 699px) {
  .activity-driver-modal { width: calc(100vw - 24px); padding: 16px; }
  .driver-template-bar button { flex: 1 1 calc(50% - 8px); }
  .driver-template-bar button:last-child { margin-left: 0; }
  .activity-week-heading { align-items: stretch; flex-direction: column; }
  .activity-week-heading input { width: 100%; }
  .personal-activity-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
  .personal-activity-progress { grid-column: 1 / -1; grid-row: 2; }
  .owner-cascade-grid { grid-template-columns: 1fr; }
  .owner-cascade-team summary { grid-template-columns: 1fr; }
}
.role-landing-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.role-landing-links a, .role-landing-primary-link { display: flex; justify-content: space-between; min-height: 52px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--brand); font-weight: var(--weight-strong); text-decoration: none; }
.role-pipeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.role-pipeline div { display: grid; gap: 8px; padding: 12px; border-top: 3px solid var(--brand); background: var(--surface); }
.role-pipeline span { color: var(--muted); }
.role-landing-empty { margin: 0; padding: 16px; border: 1px dashed var(--line); color: var(--muted); }
.role-landing-header-actions { align-items: center; display: flex; gap: 10px; }
.personal-home-body { min-height: 100vh; background: var(--bg); }
.personal-home-shell { width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding: 20px 0 48px; }
.personal-home-topbar { display: flex; align-items: center; gap: 12px; min-height: 56px; }
.personal-home-topbar .icon-button { width: 44px; min-width: 44px; height: 44px; }
.personal-home-brand { display: grid; color: var(--text); text-decoration: none; }
.personal-home-brand span { color: var(--text-sub); font-size: var(--font-xs); }
.personal-home { display: grid; gap: 20px; }
.personal-profile-band { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 16px; min-height: 88px; padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.personal-profile-band h1, .personal-profile-band p { margin: 0; }
.personal-avatar { display: grid; width: 48px; height: 48px; place-items: center; border-radius: var(--radius-pill); background: var(--text); color: var(--surface); font-size: var(--font-xl); font-weight: var(--weight-heavy); }
.personal-section { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.personal-workplace-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.personal-workplace { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 56px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text); text-decoration: none; }
.personal-workplace:hover { border-color: var(--brand); color: var(--brand); }
.personal-todo-list { display: grid; }
.personal-todo-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 20px; align-items: center; gap: 10px; min-height: 54px; border-top: 1px solid var(--line); color: var(--text); text-decoration: none; }
.personal-todo-row:first-child { border-top: 0; }
.personal-todo-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.personal-todo-row time { color: var(--text-sub); font-size: var(--font-xs); }
.personal-todo-row > b { color: var(--brand); }
.personal-todo-chips { display: flex; gap: 4px; }
.personal-todo-chips i { padding: 3px 6px; border-radius: var(--radius-pill); background: var(--surface-sub); color: var(--text-sub); font-size: var(--font-xs); font-style: normal; white-space: nowrap; }
.personal-empty { margin: 0; padding: 18px 0; color: var(--text-sub); }
.personal-number-section + .personal-number-section { margin-top: 16px; }
.personal-surface-label { display: inline-flex; margin-bottom: 8px; padding: 4px 8px; border-radius: var(--radius-pill); background: var(--surface-sub); color: var(--text-sub); font-size: var(--font-xs); font-weight: var(--weight-strong); }
.personal-number-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.personal-number-card { display: grid; gap: 6px; min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text); text-decoration: none; }
.personal-number-card > span, .personal-number-card > small { color: var(--text-sub); }
.personal-number-card > strong { font-size: var(--font-xl); }
.personal-growth-grade { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.personal-growth ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.personal-growth li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.personal-growth li b { font-weight: var(--weight-strong); white-space: nowrap; }
.personal-growth h3 { margin: 18px 0 4px; font-size: var(--font-md); }
.personal-bonus-estimate .panel-head > strong { color:var(--brand); font-size:var(--font-xl); }
.personal-bonus-estimate > p { color:var(--text-sub); }
.personal-bonus-estimate ul { display:grid; gap:0; margin:0; padding:0; list-style:none; }
.personal-bonus-estimate li { display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-top:1px solid var(--line); }
@media (max-width: 699px) {
  .personal-home-shell { width: min(calc(100% - 24px), 1120px); padding-top: 8px; }
  .personal-profile-band { grid-template-columns: 48px minmax(0, 1fr); padding: 12px; }
  .personal-profile-band > .status-pill { grid-column: 2; justify-self: start; }
  .personal-workplace-grid { grid-template-columns: 1fr; }
  .personal-number-grid { grid-template-columns: 1fr; }
  .bonus-simulation-form { grid-template-columns:1fr; }
  .personal-todo-row { grid-template-columns: auto minmax(0, 1fr) 18px; }
  .personal-todo-row time { grid-column: 2; }
}
.role-landing-primary-actions { display: flex; gap: 8px; }
.role-landing-primary-actions > a, .role-landing-primary-actions > button { align-items: center; display: inline-flex; justify-content: center; min-height: 42px; text-decoration: none; }
.role-landing-action-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.role-landing-action-row > a { align-items: center; color: var(--text); display: flex; gap: 12px; min-width: 0; text-decoration: none; }
.role-landing-action-row > a > span { display: grid; flex: 1; gap: 3px; min-width: 0; }
.role-landing-action-row > button { min-height: 42px; min-width: 76px; }
.role-landing-action-row.is-resolving { opacity: .55; }
body[data-role-landing="true"] .remind-header-actions [data-new-project],
body[data-role-landing="true"] .remind-header-actions [data-invoice-open] { display: none !important; }
body[data-role="owner"] .executive-panel-heading { display: none; }
.owner-discovery-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.owner-discovery-strip button { min-height: 86px; display: grid; gap: 3px; align-content: center; text-align: left; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); }
.owner-discovery-strip button:hover { border-color: var(--brand); box-shadow: 0 6px 18px color-mix(in srgb, var(--brand) 10%, transparent); }
.owner-discovery-strip span, .owner-discovery-strip small { color: var(--muted); }
.owner-discovery-strip strong { font-size: 20px; }
.inbox-link-widget { align-content: center; }
.project-name-link { display: grid; gap: 2px; text-align: left; }
.case-navigation { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.case-navigation nav { color: var(--muted); font-size: 13px; }
.five-track-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.five-track-strip span { display: grid; gap: 3px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.five-track-strip small { color: var(--muted); font-size: 12px; font-weight: var(--weight-strong); }
.five-track-strip strong { font-size: 13px; overflow-wrap: anywhere; }
.team-wizard { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.team-wizard fieldset { margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); min-width: 0; }
.team-wizard legend { padding: 0 6px; font-weight: var(--weight-strong); }
.team-wizard legend b { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 5px; border-radius: 50%; background: var(--brand); color: white; }
.team-wizard .form-grid { grid-template-columns: 1fr; }
.team-wizard input, .team-wizard select { min-width: 0; width: 100%; box-sizing: border-box; }

@media (max-width: 600px) {
  #loginOverlay { align-items: start !important; padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)) !important; }
  .auth-dialog { width: 100%; max-height: calc(100dvh - 24px); padding: 16px; }
  .auth-dialog h2 { font-size: 24px; }
  .auth-role-grid { grid-template-columns: repeat(2, 1fr); }
  .owner-discovery-strip, .team-wizard { grid-template-columns: 1fr; }
  .five-track-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .role-landing > header, .role-landing-columns { grid-template-columns: 1fr; flex-direction: column; }
  .role-landing-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .role-landing-metric { min-height: 82px; padding: 11px; }
  .role-landing-metric strong { font-size: 16px; }
  .role-pipeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .role-landing-row { align-items: flex-start; flex-wrap: wrap; }
  .role-landing-header-actions, .role-landing-primary-actions { align-items: stretch; width: 100%; }
  .role-landing-header-actions { flex-direction: column; }
  .role-landing-primary-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .role-landing-primary-actions:has(> :only-child) { grid-template-columns: 1fr; }
  .role-landing-primary-actions > a, .role-landing-primary-actions > button, .landing-bell { min-height: 44px; width: 100%; }
  .role-landing-action-row { align-items: stretch; grid-template-columns: 1fr; }
  .role-landing-action-row > a { width: 100%; }
  .role-landing-action-row > button { min-height: 44px; width: 100%; }
  .field-shell { width: calc(100dvw - 16px); max-width: calc(100dvw - 16px); padding: 10px 0 120px; gap: 10px; }
  .field-topbar, .field-card, .panel { border-radius: var(--radius-lg); padding: 14px; }
  .field-topbar h1 { font-size: 32px; line-height: 1.05; }
  .field-topbar p { line-height: 1.55; }
  .field-only-page .seven-step { grid-template-columns: 1fr !important; }
  .field-today-strip span, .completion-preview, .field-context-help, .field-check-panel { border-radius: var(--radius-lg); padding: 10px; }
  .field-quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; }
  .field-quick-actions button { min-height: 56px; padding: 12px 8px; }
  .report-type-button { min-height: 68px; padding: 12px; }
  .field-upload-box { padding: 12px; border-radius: var(--radius-lg); }
  textarea { min-height: 104px; }
  .inline-actions { display: grid; grid-template-columns: 1fr; }
  .big-action { width: 100%; min-height: 56px; }
  .field-sticky-action-rail { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 8px; border-radius: var(--radius-lg); }
  .field-sticky-action-rail button { min-height: 56px; padding: 10px 4px; font-size: 16px; }
  #loginOverlay input, #loginOverlay button { font-size: 16px !important; min-height: 48px; }
}

@media (max-width: 760px) {
  .mini, .action-cta, .segmented button { font-size: 16px; min-height: 46px; }
}

/* Goal cascade: dense spreadsheet ergonomics with existing design tokens. */
.goal-cascade-strip { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); padding:10px 14px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); box-shadow:var(--shadow-card); }
.goal-cascade-lines { display:flex; min-width:0; gap:var(--space-4); overflow-x:auto; scrollbar-width:thin; }
.goal-cascade-lines span { display:grid; grid-template-columns:auto auto; gap:2px 8px; min-width:max-content; }
.goal-cascade-lines small { grid-row:1 / 3; align-self:center; color:var(--text-sub); font-size:12px; }
.goal-cascade-lines strong { font-size:12px; }
.goal-cascade-lines b { font-size:13px; font-variant-numeric:tabular-nums; }
.goal-cascade-strip > em { flex:0 0 auto; color:var(--text-sub); font-size:12px; font-style:normal; }
.goal-terminal { display:grid; grid-template-columns:minmax(240px, .8fr) minmax(0, 1.2fr); gap:var(--space-4); align-items:stretch; }
.goal-terminal > div:first-child { padding:18px; border-left:4px solid var(--primary); background:var(--surface-subtle); }
.goal-terminal h2 { margin:4px 0; font-size:24px; letter-spacing:0; font-variant-numeric:tabular-nums; }
.goal-terminal p { margin:0; color:var(--text-sub); }
.goal-summary-tiles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-3); }
.goal-summary-tiles article { display:flex; flex-direction:column; justify-content:center; min-height:92px; padding:14px; border:1px solid var(--line); background:var(--surface); }
.goal-summary-tiles span { color:var(--text-sub); font-size:12px; }
.goal-summary-tiles strong { margin-top:6px; font-size:24px; font-variant-numeric:tabular-nums; }
.goal-grid-wrap { max-width:100%; overflow:auto; }
.goal-grid { min-width:980px; table-layout:fixed; }
.goal-grid th:first-child,.goal-grid td:first-child { position:sticky; left:0; z-index:1; width:260px; background:var(--surface); }
.money-magnitude-hint { display:block; margin-top:4px; color:var(--text-muted); font-size:12px; line-height:1.35; font-variant-numeric:tabular-nums; }
.money-magnitude-hint.warning { color:var(--danger); font-weight:var(--weight-strong); }
.goal-grid th { white-space:nowrap; }
.goal-grid td { vertical-align:top; font-variant-numeric:tabular-nums; }
.goal-grid td small,.goal-grid td strong { display:block; }
.goal-grid td small { margin-top:3px; color:var(--text-sub); }
.goal-progress-buttons { display:flex; gap:3px; min-width:max-content; }
.goal-progress-buttons button { min-width:42px; min-height:36px; padding:5px 7px; border:1px solid var(--line); background:var(--surface); color:var(--text); font-size:12px; }
.goal-progress-buttons button.active { border-color:var(--primary); color:var(--primary); background:var(--primary-soft); font-weight:800; }
.goal-gantt { min-width:980px; margin-top:var(--space-4); overflow:hidden; border:1px solid var(--line); }
.goal-gantt-head,.goal-gantt-row { display:grid; grid-template-columns:240px repeat(12,minmax(42px,1fr)); min-height:34px; align-items:center; border-bottom:1px solid var(--line); }
.goal-gantt-head > *,.goal-gantt-row > * { height:100%; padding:8px; border-right:1px solid var(--line); text-align:center; }
.goal-gantt-row strong,.goal-gantt-head span { text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.goal-gantt-row i { position:relative; }
.goal-gantt-row i.active::after { content:''; position:absolute; inset:12px 3px; border-radius:var(--radius-sm); background:var(--primary); opacity:.72; }
.goal-bowler { min-width:1240px; }
.goal-bowler .goal-gantt-head,.goal-bowler .goal-gantt-row { grid-template-columns:220px 88px 180px repeat(12,minmax(42px,1fr)); }
.goal-bowler-task { font-weight:var(--weight-strong); font-variant-numeric:tabular-nums; }
.goal-bowler-kpi { display:flex; flex-direction:column; gap:2px; align-items:flex-start; overflow:hidden; font-size:12px; white-space:nowrap; }
.goal-bowler-kpi span { max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.goal-bowler-kpi b { font-variant-numeric:tabular-nums; }
.goal-bowler-empty { color:var(--text-muted); }
.role-initiatives { margin:var(--space-4) 0; padding:14px; border:1px solid var(--line); background:var(--surface); }
.role-initiative-list { display:grid; gap:8px; }
.role-initiative-list article { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--space-3); align-items:center; padding:9px 0; border-top:1px solid var(--line); }
.role-initiative-list article:first-child { border-top:0; }
.role-initiative-list article > div:first-child { display:grid; grid-template-columns:auto minmax(0,1fr); gap:3px 8px; }
.role-initiative-list article small { grid-column:2; color:var(--text-sub); }
.goal-edit-modal textarea { min-height:96px; resize:vertical; }
.kpi-cascade-facts { display:flex; align-items:center; gap:var(--space-4); padding:12px 14px; border:1px solid var(--line); background:var(--surface-sub); overflow-x:auto; }
.kpi-cascade-facts p { flex:0 0 auto; margin:0; }
.kpi-cascade-facts span { display:flex; align-items:center; gap:8px; min-width:max-content; }
.kpi-cascade-facts strong { font-size:12px; }
.kpi-cascade-facts b { font-size:13px; font-variant-numeric:tabular-nums; }
.role-capacity-gap { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 16px; border:1px solid var(--line); background:var(--surface-sub); }
.role-capacity-gap h3,.role-capacity-gap p { margin:0; }
.role-capacity-gap h3 { font-size:14px; }
.role-capacity-gap p:not(.eyebrow) { margin-top:4px; color:var(--text-muted); font-size:12px; }
@media (max-width:760px) { .role-capacity-gap { align-items:flex-start; flex-direction:column; } .role-capacity-gap .secondary { width:100%; } }
.field-goal-strip { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-bottom:12px; }
.field-goal-strip span { display:flex; flex-direction:column; gap:4px; padding:10px; border:1px solid var(--line); background:var(--surface-sub); }
.field-goal-strip small { color:var(--text-sub); font-size:12px; }
.field-goal-strip strong { font-size:16px; }
.field-goal-tasks { display:grid; gap:8px; }
.field-goal-tasks article { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; min-height:56px; padding:10px 0; border-top:1px solid var(--line); }
.field-goal-tasks article:first-child { border-top:0; }
.field-goal-tasks article div { display:grid; gap:4px; }
.field-goal-tasks article small { color:var(--text-sub); font-size:12px; }
.field-goal-tasks button { min-width:72px; min-height:44px; }
.hq-company-growth { color:var(--text-sub); font-size:13px; font-variant-numeric:tabular-nums; }
@media (max-width:760px) {
  .goal-cascade-strip { align-items:flex-start; flex-direction:column; }
  .goal-cascade-lines { width:100%; }
  .goal-terminal { grid-template-columns:1fr; }
  .goal-summary-tiles { gap:6px; }
  .goal-summary-tiles article { min-height:76px; padding:10px; }
  .goal-summary-tiles strong { font-size:20px; }
  .goal-grid-wrap { margin-inline:calc(var(--space-4) * -1); padding-inline:var(--space-4); }
  .goal-grid th:first-child,.goal-grid td:first-child { position:static; width:220px; }
  .role-initiative-list article { grid-template-columns:1fr; }
  .goal-progress-buttons { overflow-x:auto; padding-bottom:2px; }
  .goal-progress-buttons button { min-width:48px; min-height:44px; }
}


/* Intuitive operation layer — 2026-06-20 */
.active-tab-guide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: -8px 0 22px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--brand) 18%, transparent);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 8%, transparent), color-mix(in srgb, var(--info) 5%, transparent)), var(--surface);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--text) 5%, transparent);
}
.active-tab-guide strong { display:block; font-size: 16px; letter-spacing: 0; }
.guide-kicker { display:block; color: var(--cyan); font-size: 12px; letter-spacing: 0; text-transform: uppercase; font-weight: var(--weight-heavy); margin-bottom: 3px; }
.guide-cta { text-decoration: none; white-space: nowrap; }
.today-action-panel { display:grid; gap:14px; padding:18px; border:1px solid color-mix(in srgb, var(--danger) 20%, transparent); border-radius: var(--radius-lg); background: linear-gradient(135deg, color-mix(in srgb, var(--warn-soft) 96%, transparent), color-mix(in srgb, var(--surface) 94%, transparent)); box-shadow: 0 18px 50px color-mix(in srgb, var(--text) 8%, transparent); }
.executive-command-card { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:18px; align-items:center; padding:22px; border:1px solid color-mix(in srgb, var(--danger) 24%, transparent); border-radius: var(--radius-lg); background:linear-gradient(135deg,var(--warn-soft),var(--surface)); box-shadow:0 22px 58px color-mix(in srgb, var(--text) 10%, transparent); }
.executive-command-card h3 { font-size: 32px; line-height:1.12; letter-spacing: 0; }
.executive-command-card p { margin:8px 0 0; color:var(--muted); line-height:1.65; }
.executive-command-card .primary, .executive-command-card .executive-primary-cta { min-height:54px; padding:0 22px; border-radius: var(--radius-lg); font-size: 16px; box-shadow:0 16px 36px color-mix(in srgb, var(--brand) 22%, transparent); display:flex; align-items:center; justify-content:center; text-align:center; white-space:normal; }
.above-fold-grid { display:grid; grid-template-columns: minmax(420px, 1.2fr) minmax(360px, .8fr); gap:16px; align-items:start; }
.above-fold-grid .first-view-kpis { height:100%; }
.above-fold-grid .first-view-kpis .impact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap:10px; }
.above-fold-grid .executive-kpi { padding:10px; }
.above-fold-grid .executive-kpi strong { font-size: 20px; }
.today-action-head { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; }
.today-action-head h3 { font-size: 32px; }
.today-action-head p { margin: 6px 0 0; color: var(--muted); line-height: 1.55; }
.today-action-grid { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.today-action-column { display:grid; gap:10px; padding:14px; border:1px solid var(--line); border-radius: var(--radius-lg); }
.today-action-column > strong { font-size: 16px; }
.today-action-column > small { color: var(--muted); font-weight: var(--weight-strong); }
.drilldown-block { border:1px solid var(--line); border-radius: var(--radius-lg); background:color-mix(in srgb, var(--surface) 74%, transparent); overflow:hidden; }
.drilldown-block > summary { display:flex; justify-content:space-between; gap:14px; align-items:center; cursor:pointer; list-style:none; padding:16px 18px; color:var(--text); }
.drilldown-block > summary::-webkit-details-marker { display:none; }
.drilldown-block > summary span { color:var(--blue); font-weight: var(--weight-heavy); }
.drilldown-block > summary strong { font-size: 14px; }
.drilldown-content { display:grid; gap:16px; padding:0 16px 16px; }
.period-target { align-items: stretch; }
.period-target select { min-width: 132px; }
.period-target input { width: 118px; }
#projectCards.project-grid { grid-template-columns: minmax(0, 1fr); }
.project-focus-strip {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:14px 16px;
  border:1px solid color-mix(in srgb, var(--brand) 18%, transparent);
  border-radius: var(--radius-lg);
  background:var(--surface);
}
.project-focus-strip.from-notification { border-color: color-mix(in srgb, var(--danger) 28%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--danger) 6%, transparent), var(--surface)); }
.project-focus-strip strong { display:block; font-size: 20px; letter-spacing: 0; }
.project-focus-strip small { display:block; color:var(--muted); margin-top:4px; }
.project-card-list { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.project-card.active-project { border-color: color-mix(in srgb, var(--brand) 42%, transparent); box-shadow: 0 14px 32px color-mix(in srgb, var(--brand) 12%, transparent); }
.project-card.active-project header h4::before { content:'開いている案件'; display:block; color:var(--blue); font-size: 12px; letter-spacing: 0; margin-bottom:4px; }
.compact-project-form { grid-column: 1 / -1; display:grid; gap:12px; }
.project-form-quick { display:grid; grid-template-columns: minmax(220px, 1.2fr) repeat(3, minmax(160px, 1fr)); gap: 12px; }
.project-form-quick label, .form-section label, .project-notes-grid label { display:grid; gap:6px; color:var(--muted); font-weight: var(--weight-strong); font-size: 12px; }
.project-form-quick input, .project-form-quick select { width:100%; }
.form-section { border:1px solid var(--line); border-radius: var(--radius-lg); background:color-mix(in srgb, var(--surface) 72%, transparent); overflow:hidden; }
.form-section summary { cursor:pointer; padding:12px 14px; color:var(--text); font-weight: var(--weight-heavy); list-style:none; }
.form-section summary::-webkit-details-marker { display:none; }
.form-section summary::after { content:'開く'; float:right; color:var(--blue); font-size: 12px; }
.form-section[open] summary::after { content:'閉じる'; }
.form-section:not([open]) > .form-grid { display:none; }
.form-section .form-grid { padding: 0 14px 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.project-notes-grid { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:12px; }
.project-notes-grid textarea { min-height:88px; }
.notification-card strong { align-items:center; }
.notification-card .primary.mini { justify-self:end; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }
@media (max-width: 1280px) {
  .project-card-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-form-quick, .form-section .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .active-tab-guide, .project-focus-strip { align-items:stretch; flex-direction:column; }
  .executive-command-card { grid-template-columns:1fr; padding:18px; }
  .executive-command-card .primary, .executive-command-card .executive-primary-cta { width:100%; justify-content:center; }
  .stakeholder-role-panel summary { grid-template-columns:auto minmax(0,1fr); }
  .stakeholder-role-panel summary b { grid-column:2; justify-self:start; }
  .stakeholder-role-body { padding:0 14px 14px; }
  .active-tab-guide { display:none; }
  .executive-command-card, .today-action-panel, .action-item, .panel, .impact-card { min-width:0; max-width:100%; box-sizing:border-box; overflow-wrap:anywhere; }
  .executive-command-card .primary, .action-cta { white-space:normal; min-width:0; max-width:100%; }
  .executive-command-card h3, .today-action-head h3 { overflow-wrap:anywhere; }
  .guide-cta, .project-focus-strip button { width:100%; justify-content:center; }
  .above-fold-grid { grid-template-columns:1fr !important; width:100%; max-width:100%; }
  .above-fold-grid .first-view-kpis .impact-grid { grid-template-columns:1fr !important; }
  .today-action-panel, .above-fold-grid .first-view-kpis, .executive-focus-strip, .drilldown-block { width:100%; max-width:100%; min-width:0; }
  .today-action-grid { grid-template-columns:1fr; }
  .today-action-head { flex-direction:column; }
  .period-target { display:grid; grid-template-columns: 1fr; }
  .period-target input, .period-target select { width:100%; }
  .project-card-list, .project-form-quick, .form-section .form-grid, .project-notes-grid { grid-template-columns: 1fr; }
}


/* Role-first UX: ordinary users see at most five daily screens. */
.role-focused-nav .nav-settings-link { margin-top: 10px; font-size: 12px; opacity: .78; }
.role-completion-banner { display:flex; gap:12px; align-items:flex-start; justify-content:space-between; padding:14px 16px; border:1px solid color-mix(in srgb, var(--brand) 22%, transparent); background:linear-gradient(135deg, color-mix(in srgb, var(--brand-soft) 96%, transparent), color-mix(in srgb, var(--surface) 92%, transparent)); border-radius: var(--radius-lg); margin-bottom:14px; }
.role-completion-banner strong { font-size: 16px; color:var(--text); }
.role-completion-banner span { color:var(--text-sub); font-size: 13px; line-height:1.55; }
.accounting-blockers { margin-bottom:14px; }
.sales-action-entry .form-grid input, .sales-action-entry .form-grid select { min-height:42px; }
.today-site-list { margin: 14px 0 18px; }
.compact-head { margin-bottom:10px; }
.today-site-cards { display:grid; gap:12px; }
.today-site-card { border:1px solid color-mix(in srgb, var(--text) 12%, transparent); border-radius: var(--radius-lg); padding:14px; background:var(--surface); box-shadow:0 12px 30px color-mix(in srgb, var(--text) 8%, transparent); }
.today-site-card.current { border-color:color-mix(in srgb, var(--brand) 42%, transparent); background:linear-gradient(135deg,var(--surface),var(--brand-soft)); }
.today-site-card header { display:flex; gap:12px; align-items:center; margin-bottom:8px; }
.today-site-card header > span { width:34px; height:34px; border-radius:var(--radius-pill); display:grid; place-items:center; background:var(--text); color:var(--surface); font-weight: var(--weight-strong); }
.today-site-card strong { color:var(--text); }
.today-site-card small, .today-site-card p { color:var(--text-sub); margin:3px 0; }
.field-card-actions { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:12px; }
.field-card-actions button { min-height:48px; border:0; border-radius: var(--radius-lg); background:var(--info-soft); color:var(--text); font-weight: var(--weight-strong); }
.field-card-actions .help-action { background:var(--danger-soft); color:var(--danger); }
.field-assignment-suggestions { display: grid; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.field-assignment-suggestions > header { display: flex; justify-content: space-between; gap: 8px; margin: 0; }
.field-assignment-suggestions > header small { text-align: right; }
.field-assignment-suggestions ol { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.field-assignment-suggestions li { display: grid; grid-template-columns: 24px minmax(0,1fr) auto; gap: 8px; align-items: center; }
.field-assignment-suggestions li > b { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--brand-soft); color: var(--brand); }
.field-assignment-suggestions li > div { display: grid; min-width: 0; }
.field-assignment-suggestions li strong { display: flex; justify-content: space-between; gap: 6px; }
.field-assignment-suggestions li em { color: var(--info); font-style: normal; }
.field-assignment-suggestions li small { overflow-wrap: anywhere; }
.field-assignment-suggestions li button { min-height: 44px; }
.field-calendar-card { display: grid; gap: 14px; }
.field-calendar-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.field-calendar-days article { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.field-calendar-days article header { display: grid; gap: 2px; padding: 10px; border-bottom: 1px solid var(--surface-sub); }
.field-calendar-days article header small { color: var(--text-sub); }
.field-calendar-days ul { display: grid; gap: 6px; margin: 0; padding: 8px; list-style: none; }
.field-calendar-days li { display: grid; gap: 2px; padding: 8px; border-left: 3px solid var(--info); background: var(--surface); font-size: 12px; }
.field-calendar-days li.assigned { border-left-color: var(--brand); background: var(--brand-soft); }
.field-calendar-days li.empty { border-left-color: var(--line); color: var(--text-sub); }
.field-calendar-days li span, .field-calendar-days li em { overflow-wrap: anywhere; }
.field-calendar-days li em { color: var(--text-sub); font-style: normal; }
.field-calendar-days li > button { display: grid; gap: 2px; width: 100%; min-width: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.field-calendar-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.field-calendar-form label { display: grid; gap: 5px; color: var(--text-sub); font-size: 12px; }
.field-calendar-form .field-calendar-title { grid-column: span 3; }
.field-calendar-form button { align-self: end; min-height: 44px; }
.missing-before-submit, .ready-before-submit { margin-top:10px; border-radius: var(--radius-md); padding:10px; font-weight: var(--weight-strong); font-size: 13px; }
.missing-before-submit { background:var(--danger-soft); color:var(--danger); border:1px solid var(--danger-soft); }
.ready-before-submit { background:var(--ok-soft); color:var(--ok); border:1px solid var(--ok); }
@media (max-width: 720px) { .field-card-actions { grid-template-columns:repeat(2,minmax(0,1fr)); } .role-completion-banner { flex-direction:column; } .field-calendar-days { grid-template-columns: repeat(2, minmax(0, 1fr)); } .field-calendar-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } .field-calendar-form .field-calendar-title { grid-column: 1 / -1; } .field-calendar-form button { grid-column: 1 / -1; } .field-assignment-suggestions li { grid-template-columns: 24px minmax(0,1fr); } .field-assignment-suggestions li > button, .field-assignment-suggestions li > .badge { grid-column: 2; justify-self: stretch; } }

.building-lifecycle-finance .table-wrap { margin-top: 14px; }
.building-lifecycle-finance .readiness-copy { border-left: 4px solid var(--danger); }
.building-lifecycle-finance td small { color: var(--muted); }

/* Icon-first minimal wording UI — 2026-06-26 */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.mission-card-compact, .sidebar-card-compact { padding: 12px 14px; border-radius: var(--radius-lg); }
.mission-card-compact p, .sidebar-card-compact span { font-size: 12px; line-height: 1.25; margin-top: 4px; }
.icon-first-ui .today-action-head.compact { align-items: center; }
.icon-first-ui .today-action-head p { display: none; }
.action-bucket-title { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; }
.action-bucket-title span { width:34px; height:34px; display:grid; place-items:center; border-radius: var(--radius-md); background:var(--text); font-size: 16px; }
.action-bucket-title strong { font-size: 20px; letter-spacing: 0; }
.action-bucket-title small { color:var(--text-sub); font-size: 12px; font-weight: var(--weight-heavy); }
.compact-action { padding: 11px 12px; gap: 7px; }
.compact-action strong { display:flex; align-items:center; gap:8px; font-size: 14px; }
.compact-action strong span { width:24px; height:24px; display:grid; place-items:center; border-radius:var(--radius-pill); background:color-mix(in srgb, var(--text) 10%, transparent); color:var(--text); }
.compact-action p { margin:0; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; font-size: 12px; line-height:1.35; color:var(--text-sub); }
.icon-command { grid-template-columns:minmax(0,1fr) 170px; padding:20px; }
.icon-command h3 { display:flex; align-items:center; gap:10px; }
.icon-command .short-copy { max-width: 780px; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.number-tile { min-height: 96px; }
.number-tile .eyebrow { display:flex; align-items:center; gap:7px; letter-spacing: 0; }
.number-tile strong { font-size: 32px !important; }
.number-tile p { font-size: 13px; margin-top:4px; }
.icon-summary { grid-template-columns: repeat(3, minmax(0,1fr)); }
.icon-summary div { padding: 8px 10px; border-radius: var(--radius-lg); background:var(--surface); border:1px solid color-mix(in srgb, var(--brand) 12%, transparent); }
.role-icon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.role-card-compact { padding: 16px; display:grid; gap:12px; }
.role-card-compact header { display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; align-items:center; }
.role-card-compact h3 { font-size: 16px; line-height:1.25; }
.role-card-compact .pill-row { gap:6px; }
.role-card-compact .pill { font-size: 12px; padding:7px 9px; }
.field-only-page .field-topbar p { margin: 8px 0 0; font-weight: var(--weight-heavy); color:var(--text-sub); }
.field-only-page .seven-step { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.field-only-page .seven-step .impact-card { min-height: 88px; padding: 12px 8px; place-items:center; text-align:center; }
.field-only-page .seven-step .impact-card strong { font-size: 16px; line-height:1.25; }
.icon-status-strip span { display:flex; align-items:center; justify-content:center; gap:6px; min-height:54px; font-size: 24px; }
.icon-status-strip strong { font-size: 24px; letter-spacing: 0; }
.icon-status-strip small { font-size: 12px; color:var(--text-sub); font-weight: var(--weight-heavy); }
.field-quick-actions button { font-size: 16px; font-weight: var(--weight-heavy); min-height:62px; }
.field-context-help, .caption { font-size: 13px; line-height:1.35; }
@media (max-width: 1280px) {
  .role-icon-grid { grid-template-columns: 1fr; }
}
@media (max-width: 880px) {
  .icon-command { grid-template-columns: 1fr; }
  .icon-summary { grid-template-columns: 1fr; }
  .field-only-page .seven-step { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Spreadsheet-like ERP ledgers */
.project-ledger-workbench { display: grid; grid-template-columns: 1fr; gap: 16px; }
.project-operating-cockpit { display:grid; grid-template-columns: minmax(260px, .9fr) minmax(0, 1.6fr); gap:14px; padding:14px; border:1px solid color-mix(in srgb, var(--brand) 18%, transparent); border-radius: var(--radius-lg); background:linear-gradient(135deg, var(--brand-soft), color-mix(in srgb, var(--surface) 96%, transparent)); box-shadow:0 18px 48px color-mix(in srgb, var(--text) 8%, transparent); }
.cockpit-main-card { display:flex; flex-direction:column; justify-content:space-between; gap:10px; min-width:0; }
.cockpit-main-card h3 { margin:4px 0; font-size: 20px; line-height:1.2; letter-spacing: 0; }
.cockpit-signal-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap:10px; }
.cockpit-signal { display:grid; gap:4px; min-width:0; min-height:96px; text-align:left; text-decoration:none; border:1px solid var(--line); border-radius: var(--radius-lg); padding:12px; background:var(--surface); color:var(--text); cursor:pointer; overflow:hidden; }
.cockpit-signal > * { min-width:0; overflow-wrap:anywhere; }
.cockpit-signal span { color:var(--muted); font-size: 12px; font-weight: var(--weight-heavy); }
.cockpit-signal strong { font-size: 20px; line-height:1.05; letter-spacing: 0; overflow-wrap:anywhere; }
.cockpit-signal small { color:var(--subtle); font-weight: var(--weight-strong); }
.cockpit-signal.danger { border-color:color-mix(in srgb, var(--danger) 32%, transparent); background:color-mix(in srgb, var(--danger-soft) 95%, transparent); }
.cockpit-signal.warning { border-color:color-mix(in srgb, var(--warn) 35%, transparent); background:color-mix(in srgb, var(--warn-soft) 95%, transparent); }
.signal-row { grid-column:1 / -1; display:flex; gap:8px; flex-wrap:wrap; }
.signal-chip { display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border-radius:var(--radius-pill); border:1px solid var(--line); background:var(--surface); color:var(--text); text-decoration:none; font-size: 12px; font-weight: var(--weight-heavy); }
.signal-chip.danger { border-color:color-mix(in srgb, var(--danger) 32%, transparent); background:color-mix(in srgb, var(--danger-soft) 90%, transparent); color:var(--danger); }
.signal-chip.success { border-color:color-mix(in srgb, var(--ok) 25%, transparent); background:color-mix(in srgb, var(--ok-soft) 95%, transparent); color:var(--ok); }
.team-operating-lane { border-color:color-mix(in srgb, var(--brand) 16%, transparent); background:linear-gradient(135deg, var(--surface), var(--surface)); }
.ledger-toolbar { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:14px; border:1px solid var(--line); border-radius: var(--radius-lg); background:linear-gradient(135deg, color-mix(in srgb, var(--surface) 96%, transparent), color-mix(in srgb, var(--surface) 96%, transparent)); }
.ledger-toolbar h3 { margin:4px 0 0; font-size: 16px; line-height:1.25; }
.ledger-filters { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.ledger-filters .active { background:var(--blue); color:var(--surface); border-color:var(--blue); }
.ledger-kpis { flex-basis:100%; display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; color:var(--muted); font-size: 12px; font-weight: var(--weight-heavy); }
.ledger-kpis span { border:1px solid var(--line); border-radius:var(--radius-pill); padding:5px 8px; background:var(--surface); }
.spreadsheet-wrap { max-height: 64vh; border-radius: var(--radius-lg); background:var(--surface); }
.spreadsheet-table { min-width: 1360px; font-size: 12px; }
.spreadsheet-table th { position: sticky; top: 0; z-index: 2; padding:8px 9px; background:var(--brand-soft); color:var(--brand); }
.spreadsheet-table td { padding:6px 7px; background:var(--surface); }
.spreadsheet-table tr:hover td { background:var(--brand-soft); }
.spreadsheet-table .sticky-col { position: sticky; left: 0; z-index: 3; background:var(--surface); box-shadow: 1px 0 0 var(--line); }
.spreadsheet-table th.sticky-col { background:var(--brand-soft); }
.ledger-input { width:100%; min-width:82px; border:1px solid transparent; border-radius: var(--radius-md); padding:7px 8px; background:transparent; color:var(--text); font-size: 12px; }
.ledger-readonly-value { display:inline-block; min-width:90px; color:var(--text-sub); font-weight: var(--weight-strong); }
.ledger-input:hover, .ledger-input:focus { border-color:color-mix(in srgb, var(--brand) 35%, transparent); background:var(--surface); outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 10%, transparent); }
.ledger-input.small { min-width:64px; }
.ledger-input.wide { min-width:160px; }
.ledger-row-actions { display: grid; grid-template-columns: repeat(2, minmax(58px, 1fr)); gap: 4px; min-width: 126px; }
.ledger-owner-edit { display: grid; gap: 4px; min-width: 170px; }
.ledger-owner-edit label { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 4px; color: var(--subtle); font-size: 12px; }
.ledger-owner-edit .ledger-input { min-width: 128px; }
.number-cell { text-align:right; font-variant-numeric:tabular-nums; }
.ledger-add-row { display:grid; grid-template-columns: repeat(4, minmax(120px, 1fr)) auto; gap:8px; padding:12px; border:1px dashed color-mix(in srgb, var(--brand) 35%, transparent); border-radius: var(--radius-lg); background:var(--brand-soft); }
.ledger-add-row input, .ledger-add-row select { width:100%; }
.ledger-add-row > label { display: grid; gap: 5px; color: var(--text-sub); font-size: 12px; font-weight: var(--weight-strong); }
.compact-card-review > summary { cursor:pointer; color:var(--blue); font-weight: var(--weight-heavy); }
button.danger, .danger.mini { border-color:color-mix(in srgb, var(--danger) 25%, transparent); color:var(--danger); background:color-mix(in srgb, var(--danger-soft) 70%, transparent); }
button.danger:hover { background:var(--danger-soft); }
@media (max-width: 760px) {
  .project-operating-cockpit { grid-template-columns:1fr; }
  .cockpit-signal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cockpit-signal { min-height:108px; }
  .cockpit-signal strong { font-size: 16px; }
  .cockpit-signal small { font-size: 12px; line-height:1.3; }
  .ledger-toolbar { display:grid; }
  .ledger-filters { justify-content:flex-start; }
  .ledger-add-row { grid-template-columns:1fr; }
  .spreadsheet-wrap { max-height: 70vh; }
}

/* Copyless intuitive UI pass — reduce explanatory text, keep controls obvious */
.copyless-ui .mission-card p,
.copyless-ui .sidebar-card span:not(.sr-only),
.copyless-ui .nav-click-note,
.copyless-ui .caption {
  display: none !important;
}
.copyless-ui .active-tab-guide {
  position: relative;
  z-index: 40;
  padding: 10px 12px;
  gap: 10px;
  border-radius: var(--radius-lg);
}
.copyless-ui[data-detail-view="true"] .active-tab-guide {
  position: relative;
  inset: auto;
}
.copyless-ui[data-detail-view="true"] .tab-panel.active [id] { scroll-margin-top: 96px; }
.copyless-ui.sidebar-collapsed[data-detail-view="true"] .active-tab-guide { left: auto; }
.copyless-ui .active-tab-guide strong {
  font-size: 14px;
  line-height: 1.15;
}
.copyless-ui .guide-kicker {
  margin: 0 0 2px;
  font-size: 12px;
}
.copyless-ui .guide-cta {
  min-width: auto;
  padding: 8px 12px;
}
.copyless-ui .panel-head {
  margin-bottom: 10px;
}
.copyless-ui .panel-head h3,
.copyless-ui .ledger-toolbar h3 {
  font-size: 16px;
  line-height: 1.15;
  margin: 2px 0 0;
}
.copyless-ui .ledger-toolbar {
  align-items: center;
  padding: 12px;
}
.copyless-ui .ledger-kpis span {
  padding: 6px 8px;
  border-radius: var(--radius-pill);
  background: var(--surface);
}
.copyless-ui .role-completion-banner.compact {
  align-items: center;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.copyless-ui .role-completion-banner.compact strong {
  font-size: 14px;
}
.copyless-ui .icon-flow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  font-weight: var(--weight-heavy);
}
.copyless-ui .icon-flow span {
  padding: 8px 10px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--line);
}
.copyless-ui .icon-flow b {
  color: var(--blue);
}
.copyless-ui .spreadsheet-table th,
.copyless-ui .spreadsheet-table td {
  padding: 8px 9px;
}
.copyless-ui .ledger-input {
  min-height: 32px;
}
.copyless-ui .sales-row-actions {
  display: flex;
  gap: 6px;
  min-width: 190px;
}
.copyless-ui .sales-row-actions .mini {
  padding: 7px 9px;
}

/* Copyless role screens — executive / manager morning / field report */
.copyless-ui .executive-quick-actions,
.copyless-ui .field-action-dock {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.copyless-ui .executive-quick-actions .mini,
.copyless-ui .field-action-dock button {
  min-height:42px;
  font-weight: var(--weight-heavy);
}
.copyless-ui .field-action-dock {
  padding:12px;
  border:1px solid var(--line);
  border-radius: var(--radius-lg);
  background:linear-gradient(135deg, color-mix(in srgb, var(--brand-soft) 96%, transparent), color-mix(in srgb, var(--surface) 96%, transparent));
  margin-bottom:12px;
}
.copyless-ui .field-action-dock button {
  flex:1 1 120px;
  font-size: 16px;
}
.copyless-ui .morning-board .panel-head h3 {
  font-size: 16px;
}
.copyless-ui .morning-board .manager-queue-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.copyless-ui .morning-board .action-item {
  padding:12px;
}
.copyless-ui .morning-board .action-item p {
  display:none;
}
.copyless-ui .morning-board .action-item button {
  margin-top:8px;
}
.copyless-ui .copyless-details,
.copyless-ui .field-help-collapsed,
.copyless-ui .field-log-collapsed {
  border:1px solid var(--line);
  border-radius: var(--radius-lg);
  background:color-mix(in srgb, var(--surface) 82%, transparent);
  padding:10px 12px;
}
.copyless-ui .copyless-details summary,
.copyless-ui .field-help-collapsed summary,
.copyless-ui .field-log-collapsed summary {
  cursor:pointer;
  font-weight: var(--weight-heavy);
}
.copyless-ui .field-help-collapsed:not([open]),
.copyless-ui .field-log-collapsed:not([open]) {
  padding:8px 12px;
}
.copyless-ui #fieldMobile .model-summary .impact-card p:not(.eyebrow) {
  display:none;
}
@media (max-width: 900px) {
  .copyless-ui .morning-board .manager-queue-list { grid-template-columns: 1fr; }
}


/* 100-point copyless operations pass */
.copyless-ui .readiness-copy:not(.keep-copy) p:not(.sr-only),
.copyless-ui .roadmap-card p,
.copyless-ui .impact-card p:not(.eyebrow):not(.sr-only),
.copyless-ui .phase-row p,
.copyless-ui .muted:not(.keep-copy) {
  display: none !important;
}
.work-navigator {
  display: grid;
  grid-template-columns: repeat(7, minmax(86px, 1fr));
  gap: 8px;
  padding: 10px;
  margin: 10px 0;
  overflow-x: auto;
}
.work-step {
  min-height: 62px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  display: grid;
  place-items: center;
  gap: 2px;
  font-weight: var(--weight-heavy);
}
.work-step b {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--blue);
  color: white;
}
.work-step.done { border-color: color-mix(in srgb, var(--ok) 35%, transparent); background: color-mix(in srgb, var(--ok-soft) 85%, transparent); }
.change-profit-guard {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  margin: 8px 0 12px;
  border: 1px solid color-mix(in srgb, var(--warn) 32%, transparent);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--warn-soft) 82%, transparent);
}
.change-profit-guard span { font-weight: var(--weight-strong); color: var(--muted); }
@media (max-width: 760px) {
  .work-navigator { grid-template-columns: repeat(7, 92px); }
  .change-profit-guard { align-items: stretch; flex-direction: column; }
}

.channel-roi-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--brand-soft) 85%, transparent);
}
.channel-roi-strip strong { color: var(--blue); }
.channel-roi-strip span {
  padding: 5px 8px;
  border-radius: var(--radius-pill);
  background: white;
  font-weight: var(--weight-heavy);
}

/* Re-mind ERP attached-design UIUX pass — web + mobile + role-aware dashboards */
.remind-brand .eyebrow { letter-spacing: 0; text-transform: none; color: var(--brand); }
.remind-brand h1 { font-size: 24px; letter-spacing: 0; }
.remind-logo { position: relative; overflow: visible; background: transparent; box-shadow: none; }
.remind-logo::before { content:""; position:absolute; width:24px; height:42px; left:10px; top:7px; border-radius: var(--radius-md) var(--radius-ctl) var(--radius-card) var(--radius-card); background:var(--text); }
.remind-logo i, .remind-logo b, .remind-logo em { position:absolute; display:block; border-radius:var(--radius-pill); }
.remind-logo i { width:18px; height:18px; right:13px; top:12px; background:var(--info); }
.remind-logo b { width:16px; height:16px; right:7px; top:30px; background:var(--brand); }
.remind-logo em { width:10px; height:26px; left:26px; top:16px; background:var(--info); transform:rotate(28deg); }
.remind-mobile-card { background: linear-gradient(145deg, var(--brand-soft), var(--surface)); }
.phone-mini { width:44px; height:58px; display:grid; place-items:center; border-radius: var(--radius-lg); background:var(--text); color:var(--surface); box-shadow:0 12px 24px color-mix(in srgb, var(--text) 18%, transparent); }
.remind-topbar { display:grid; grid-template-columns:minmax(260px,1fr) auto; gap:14px; align-items:center; position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--surface) 86%, transparent); backdrop-filter:blur(18px); border-bottom:1px solid color-mix(in srgb, var(--text-faint) 18%, transparent); }
.remind-searchbar { min-height:52px; display:flex; align-items:center; gap:10px; padding:0 14px; border:1px solid var(--surface-sub); border-radius: var(--radius-lg); background:var(--surface); box-shadow:0 8px 22px color-mix(in srgb, var(--text) 4%, transparent); }
.remind-searchbar input { width:100%; border:0; outline:0; background:transparent; color:var(--text); }
.remind-searchbar kbd { border:1px solid var(--surface-sub); border-bottom-width:2px; padding:4px 8px; border-radius: var(--radius-md); color:var(--text-faint); background:var(--surface); font-size: 12px; }

.remind-searchbar { position: relative; }
.global-search-results {
  position: absolute;
  z-index: 60;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 18px 48px color-mix(in srgb, var(--text) 16%, transparent);
}
.global-search-result {
  min-height: 52px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.global-search-result:hover,
.global-search-result:focus-visible { outline: none; background: var(--brand-soft); }
.global-search-result span { grid-row: 1 / span 2; display: grid; place-items: center; min-width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--brand-soft); color: var(--brand); font-weight: var(--weight-strong); font-size: 12px; }
.global-search-result strong,
.global-search-result small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.global-search-result small { color: var(--text-sub); }
.global-search-empty { padding: 12px; color: var(--text-sub); font-weight: var(--weight-strong); }

.remind-header-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.remind-bell { position:relative; width:44px; height:44px; border:1px solid var(--surface-sub); border-radius: var(--radius-lg); background:var(--surface); }
.remind-bell b { position:absolute; right:-5px; top:-7px; min-width:20px; height:20px; display:grid; place-items:center; border-radius:var(--radius-pill); background:var(--danger); color:var(--surface); font-size: 12px; }
.remind-header-user { display:grid; grid-template-columns:42px auto; column-gap:9px; align-items:center; min-width:146px; padding:6px 9px; border:1px solid var(--surface-sub); border-radius: var(--radius-lg); background:var(--surface); }
.remind-header-user span { grid-row:1 / span 2; width:42px; height:42px; display:grid; place-items:center; border-radius:var(--radius-pill); background:var(--text); color:var(--surface); font-weight: var(--weight-heavy); }
.remind-header-user strong { align-self:end; line-height:1; }
.remind-header-user small { color:var(--text-faint); line-height:1.1; }
.remind-period-controls { grid-column:1 / -1; justify-self:end; width:auto; }
.remind-dashboard-shell { display:grid; gap:18px; }
.remind-role-hero { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; align-items:center; padding:22px; border:1px solid var(--brand-soft); border-radius: var(--radius-lg); background:radial-gradient(circle at right top, color-mix(in srgb, var(--brand) 16%, transparent), transparent 34%), linear-gradient(135deg,var(--surface),var(--brand-soft)); box-shadow:0 18px 45px color-mix(in srgb, var(--brand) 8%, transparent); }
.remind-role-hero h3 { font-size: 32px; letter-spacing: 0; }
.remind-role-hero p { margin:8px 0 0; color:var(--text-sub); font-weight: var(--weight-strong); }
.remind-user-card { min-width:190px; display:grid; gap:3px; justify-items:start; padding:16px; border-radius: var(--radius-lg); background:var(--text); color:var(--surface); box-shadow:0 16px 40px color-mix(in srgb, var(--text) 16%, transparent); }
.remind-user-card .avatar { width:54px; height:54px; display:grid; place-items:center; border-radius:var(--radius-pill); background:linear-gradient(135deg,var(--brand),var(--info)); font-weight: var(--weight-heavy); }
.remind-user-card small, .remind-user-card em { color:var(--line); font-style:normal; }
.remind-module-row { display:flex; gap:10px; overflow:auto; padding-bottom:2px; }
.remind-module { flex:0 0 auto; border:1px solid var(--surface-sub); border-radius:var(--radius-pill); padding:10px 14px; background:var(--surface); color:var(--text-sub); font-weight: var(--weight-heavy); }
.remind-module.active { background:var(--brand-soft); color:var(--brand); border-color:var(--brand); box-shadow:inset 4px 0 0 var(--brand); }
.remind-filter-row { display:flex; justify-content:space-between; gap:12px; align-items:center; flex-wrap:wrap; }
.remind-filter-row > div { display:flex; gap:8px; flex-wrap:wrap; }
.remind-filter-chip { border:1px solid var(--surface-sub); border-radius:var(--radius-pill); padding:9px 13px; background:var(--surface); color:var(--text-sub); font-weight: var(--weight-heavy); }
.remind-filter-chip.active { color:var(--brand); background:var(--brand-soft); border-color:var(--brand); }
.remind-filter-chip i { width:8px; height:8px; display:inline-block; margin-right:6px; border-radius:var(--radius-pill); background:var(--brand); }
.remind-filter-row time { padding:10px 14px; border:1px solid var(--surface-sub); border-radius: var(--radius-lg); background:var(--surface); color:var(--text-sub); font-weight: var(--weight-strong); }
.remind-kpi-grid { display:grid; grid-template-columns:repeat(6,minmax(150px,1fr)); gap:14px; }
.remind-kpi-card { min-height:148px; position:relative; overflow:hidden; padding:18px; border:1px solid var(--surface-sub); border-radius: var(--radius-lg); background:var(--surface); box-shadow:0 14px 32px color-mix(in srgb, var(--text) 6%, transparent); }
.remind-kpi-card p { margin:0; color:var(--text-faint); font-size: 13px; font-weight: var(--weight-heavy); }
.remind-kpi-card strong { display:block; margin-top:8px; font-size: 24px; letter-spacing: 0; }
.remind-kpi-card small { display:block; margin-top:7px; color:var(--ok); font-weight: var(--weight-heavy); }
.remind-kpi-card > span { position:absolute; right:16px; top:15px; width:40px; height:40px; display:grid; place-items:center; border-radius: var(--radius-lg); background:var(--brand-soft); color:var(--brand); font-weight: var(--weight-heavy); }
.remind-sparkline { position:absolute; right:13px; bottom:13px; width:76px; color:var(--brand); opacity:.78; }
.remind-kpi-card.teal > span, .remind-kpi-card.teal .remind-sparkline { color:var(--info); background:var(--info-soft); }
.remind-kpi-card.orange > span, .remind-kpi-card.orange .remind-sparkline { color:var(--warn); background:var(--warn-soft); }
.remind-kpi-card.purple > span, .remind-kpi-card.purple .remind-sparkline { color:var(--brand); background:var(--brand-soft); }
.remind-ledger-panel, .remind-widget { border:1px solid var(--surface-sub); border-radius: var(--radius-lg); background:var(--surface); box-shadow:0 16px 40px color-mix(in srgb, var(--text) 6%, transparent); overflow:hidden; }
.remind-ledger-panel > header, .remind-widget > header { display:flex; justify-content:space-between; gap:12px; align-items:center; padding:18px 20px; border-bottom:1px solid var(--surface-sub); }
.remind-ledger-panel header div:first-child { display:flex; align-items:center; gap:10px; }
.remind-ledger-panel header span { padding:4px 9px; border-radius:var(--radius-pill); background:var(--brand-soft); color:var(--brand); font-weight: var(--weight-heavy); font-size: 12px; }
.remind-table-actions { display:flex; flex-wrap:wrap; gap:8px; }
.remind-table-actions button { border:1px solid var(--surface-sub); border-radius: var(--radius-md); padding:8px 10px; background:var(--surface); color:var(--text-sub); font-weight: var(--weight-heavy); }
.remind-table-actions button.active { background:var(--brand-soft); color:var(--brand); }
.remind-table-wrap { overflow:auto; }
.remind-table-wrap table { min-width:1180px; }
.remind-table-wrap th { background:var(--surface); color:var(--text-faint); font-size: 12px; text-transform:none; }
.remind-table-wrap td strong { display:block; }
.remind-table-wrap td small, .money-cell small { display:block; color:var(--text-faint); margin-top:3px; }
.remind-pill { display:inline-flex; align-items:center; justify-content:center; min-width:74px; padding:5px 9px; border-radius:var(--radius-pill); font-size: 12px; font-weight: var(--weight-heavy); }
.remind-pill.info { background:var(--brand-soft); color:var(--brand); }
.remind-pill.warning { background:var(--warn-soft); color:var(--warn); }
.remind-pill.success { background:var(--ok-soft); color:var(--ok); }
.remind-pill.purple { background:var(--brand-soft); color:var(--brand); }
.remind-pill.danger { background:var(--danger-soft); color:var(--danger); }
.remind-pill.teal { background:var(--info-soft); color:var(--info); }
.remind-pill.muted { background:var(--surface-sub); color:var(--text-faint); }
.deadline.hot { color:var(--danger); font-weight: var(--weight-heavy); }
.money-cell { text-align:right; font-weight:var(--weight-heavy); font-variant-numeric:tabular-nums; }
.next-action-dot { width:8px; height:8px; display:inline-block; margin-right:7px; border-radius:var(--radius-pill); background:var(--brand); }
.remind-more { display:block; margin:14px auto 18px; border:0; background:transparent; color:var(--brand); font-weight: var(--weight-heavy); }
.remind-widget-grid { display:grid; grid-template-columns:repeat(4,minmax(220px,1fr)); gap:16px; align-items:stretch; }
.remind-widget { padding-bottom:16px; }
.remind-widget header h3 { font-size: 16px; }
.remind-widget header button, .remind-widget header select { border:1px solid var(--surface-sub); border-radius:var(--radius-pill); padding:7px 10px; background:var(--surface); color:var(--brand); font-weight: var(--weight-heavy); }
.report-head, .cash-summary { display:grid; gap:8px; padding:14px 16px; }
.report-list { display:grid; gap:10px; padding:0 16px 12px; }
.remind-report-card { display:grid; grid-template-columns:82px minmax(0,1fr); gap:10px; align-items:center; }
.report-thumb { height:58px; display:flex; gap:4px; align-items:end; justify-content:center; padding:6px; border-radius: var(--radius-lg); background:linear-gradient(135deg,var(--brand-soft),var(--surface)); color:var(--brand); font-size: 12px; font-weight: var(--weight-heavy); }
.report-thumb b { flex:1; padding:16px 4px 4px; border-radius: var(--radius-md); background:color-mix(in srgb, var(--surface) 78%, transparent); text-align:center; }
.report-thumb.audio { align-items:center; color:var(--text); font-size: 16px; }
.remind-widget a { color:var(--brand); font-weight: var(--weight-heavy); text-decoration:none; padding:0 16px; }
.remind-bars { height:170px; position:relative; display:flex; align-items:end; gap:10px; padding:24px 18px 18px; border-top:1px solid var(--surface-sub); }
.remind-bars i { flex:1; border-radius: var(--radius-md) var(--radius-ctl) 0 0; background:linear-gradient(var(--info),var(--info)); }
.remind-bars i:nth-child(even) { background:linear-gradient(var(--warn),var(--warn)); }
.remind-bars svg { position:absolute; inset:32px 16px 18px; width:calc(100% - 32px); height:calc(100% - 50px); pointer-events:none; }
.remind-bars .cash-flow-mini { position: static; inset: auto; width: 100%; height: 146px; pointer-events: auto; }
.cash-flow-mini .cash-in { fill: var(--info); }
.cash-flow-mini .cash-out { fill: var(--warn); }
.cash-flow-mini polyline { fill: none; stroke: var(--brand); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cash-flow-mini circle { fill: var(--brand); }
.cash-summary .teal { color:var(--info); font-weight: var(--weight-heavy); }
.cash-summary .orange { color:var(--warn); font-weight: var(--weight-heavy); }
.pl-layout { display:grid; grid-template-columns:132px minmax(0,1fr); gap:12px; padding:16px; align-items:center; }
.donut { width:124px; height:124px; display:grid; place-items:center; border-radius:var(--radius-pill); background:var(--surface-sub); }
.donut span { width:78px; height:78px; display:grid; place-items:center; text-align:center; border-radius:var(--radius-pill); background:var(--surface); color:var(--text-faint); font-weight: var(--weight-heavy); font-size: 12px; }
.donut b { color:var(--text); font-size: 20px; }
.pl-layout ul { list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.pl-layout li, .remind-task { display:flex; justify-content:space-between; gap:10px; align-items:center; }
.pl-layout li span { color:var(--text-faint); }
.remind-task-list { display:grid; gap:8px; padding:12px 16px; }
.remind-task { padding:10px; border:1px solid var(--surface-sub); border-radius: var(--radius-lg); background:var(--surface); }
.remind-task input { width:18px; height:18px; }
.remind-task span { flex:1; min-width:0; }
.remind-task small { display:block; color:var(--text-faint); margin-top:2px; }
.remind-task b { min-width:28px; text-align:center; border-radius:var(--radius-pill); padding:4px 7px; color:var(--surface); background:var(--warn); font-size: 12px; }
.remind-task.severity-high b { background:var(--danger); }
.remind-task em { color:var(--text-faint); font-style:normal; font-weight: var(--weight-heavy); font-size: 12px; }
.field-feature-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.field-contribution[hidden] { display: none; }
.field-feature-strip span { min-height:70px; display:grid; place-items:center; text-align:center; padding:14px; border:1px solid var(--brand-soft); border-radius: var(--radius-lg); background:var(--surface); color:var(--brand); font-weight: var(--weight-heavy); box-shadow:0 10px 28px color-mix(in srgb, var(--brand) 7%, transparent); }
.remind-field-hero { background:radial-gradient(circle at right top, color-mix(in srgb, var(--brand) 20%, transparent), transparent 38%), var(--surface); }
.remind-field-hero h1 { font-size: 32px; }
.remind-phone-flow .impact-card { background:var(--surface); border-color:var(--brand-soft); }
.remind-field-app .field-quick-actions button, .remind-field-app .big-action, .remind-field-app .field-sticky-action-rail button { min-height:58px; border-radius: var(--radius-lg); font-size: 16px; font-weight: var(--weight-heavy); }
.remind-field-app .field-card { border-radius: var(--radius-lg); border:1px solid var(--brand-soft); background:var(--surface); box-shadow:0 22px 60px color-mix(in srgb, var(--brand) 10%, transparent); }
.remind-complete-confirm { border:2px solid var(--ok); background:var(--ok-soft); }
@media (max-width: 1480px) { .remind-kpi-grid { grid-template-columns:repeat(3,minmax(180px,1fr)); } .remind-widget-grid { grid-template-columns:repeat(2,minmax(260px,1fr)); } }
@media (max-width: 920px) {
  .remind-topbar, .remind-role-hero { grid-template-columns:1fr; }
  .remind-header-actions { justify-content:flex-start; }
  .remind-kpi-grid, .remind-widget-grid, .field-feature-strip { grid-template-columns:1fr; }
  .remind-user-card { width:100%; }
}

/* Re-mind overflow and field-priority polish */
.main { overflow-x: clip; }
.remind-dashboard-shell { max-width:100%; overflow:hidden; }
.remind-kpi-card { min-width:0; }
.remind-kpi-card strong { font-size: 20px; white-space:nowrap; }
.remind-table-wrap { max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; }
.remind-table-wrap table { min-width:1040px; }
.remind-table-wrap th:last-child, .remind-table-wrap td:last-child { position:sticky; right:0; background:var(--surface); box-shadow:-10px 0 18px color-mix(in srgb, var(--text) 5%, transparent); }
.remind-period-controls summary { writing-mode:horizontal-tb; }
.field-next-action-card { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px; align-items:center; padding:18px; border-radius: var(--radius-lg); border:1px solid var(--brand); background:linear-gradient(135deg,var(--brand-soft),var(--surface)); box-shadow:0 18px 42px color-mix(in srgb, var(--brand) 10%, transparent); }
.field-next-action-card h2 { font-size: 32px; }
.field-next-action-card span { color:var(--text-sub); font-weight: var(--weight-strong); }
.field-next-action-card button { min-height:68px; padding:0 28px; border:0; border-radius: var(--radius-lg); background:var(--brand); color:var(--surface); font-size: 20px; font-weight: var(--weight-heavy); box-shadow:0 18px 36px color-mix(in srgb, var(--brand) 25%, transparent); }
.remind-phone-flow .impact-card:last-child { grid-column:1 / -1; min-height:78px; border-color:var(--brand); background:linear-gradient(135deg,var(--brand-soft),var(--surface)); color:var(--brand); }
@media (max-width: 920px) {
  .remind-field-hero h1 { font-size: 32px; line-height:1.12; }
  .field-next-action-card { grid-template-columns:1fr; }
  .field-next-action-card button { width:100%; }
  .remind-table-wrap table { min-width:980px; }
}

/* Re-mind reference fidelity polish — compact typography, true centered controls, logo, sidebar without card-tabs */
.copyless-ui,
.remind-field-app {
  --rm-navy: var(--text);
  --rm-blue: var(--brand);
  --rm-soft: var(--brand-soft);
  --rm-line: var(--brand-soft);
  --rm-shadow: 0 10px 28px color-mix(in srgb, var(--text) 6%, transparent);
  --rm-radius: 18px;
  color: var(--rm-navy);
  font-family: "Inter", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
  font-size: 16px;
  letter-spacing: 0;
}
.copyless-ui button,
.remind-field-app button,
.copyless-ui .primary,
.copyless-ui .secondary,
.remind-field-app .primary,
.remind-field-app .secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 9px 13px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: var(--weight-strong);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  letter-spacing: 0;
}
.copyless-ui .primary {
  background: var(--brand);
  color: var(--surface);
  box-shadow: 0 10px 20px color-mix(in srgb, var(--brand) 18%, transparent);
}
.copyless-ui .secondary { color: var(--text-sub); background: var(--surface); border-color: var(--rm-line); }
.copyless-ui .main { padding: 22px 26px 36px; background: var(--brand-soft); }
.copyless-ui .sidebar {
  width: 232px;
  padding: 20px 18px;
  gap: 18px;
  background: var(--surface);
  border-right: 1px solid var(--rm-line);
  box-shadow: none;
}
@media (min-width: 1181px) {
  .copyless-ui .sidebar { width: 232px; }
  .copyless-ui .main { margin-left: 232px; width: calc(100% - 232px); max-width: min(1440px, calc(100dvw - 232px)); }
}
.refined-remind-brand { gap: 10px; align-items: center; }
.refined-remind-brand .eyebrow { margin: 0 0 1px; color: var(--text-sub); font-size: 12px; font-weight: var(--weight-strong); letter-spacing: 0; text-transform: none; }
.refined-remind-brand h1 { font-size: 16px; font-weight: var(--weight-strong); letter-spacing: 0; color: var(--text); line-height: 1.05; }
.remind-logo-mark {
  width: 42px;
  height: 50px;
  padding: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  display: grid;
  place-items: center;
}
.remind-logo-mark::before,
.remind-logo-mark i,
.remind-logo-mark b,
.remind-logo-mark em { display: none !important; }
.remind-logo-mark svg { width: 42px; height: 50px; filter: drop-shadow(0 4px 8px color-mix(in srgb, var(--text) 10%, transparent)); }
.copyless-ui .mission-card {
  order: 5;
  margin-top: auto;
  padding: 12px;
  border-radius: var(--radius-lg);
  background: var(--brand-soft);
  border-color: var(--brand-soft);
  box-shadow: none;
}
.copyless-ui .mission-card strong { font-size: 13px; }
.copyless-ui .mission-card p,
.copyless-ui .mission-card a { font-size: 12px; line-height: 1.35; }
.copyless-ui .phone-mini { width: 36px; height: 48px; border-radius: var(--radius-md); font-size: 14px; }
.copyless-ui .sidebar-card { display: none; }
.copyless-ui .nav-tabs { gap: 3px; padding-right: 0; }
.copyless-ui .nav-section,
.copyless-ui .nav-section-today,
.copyless-ui .stakeholder-nav-section {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.copyless-ui .nav-section summary,
.copyless-ui .nav-section-head {
  min-height: 32px;
  padding: 0 4px 4px;
  align-items: center;
}
.copyless-ui .nav-section summary strong,
.copyless-ui .nav-section-head strong { font-size: 12px; font-weight: var(--weight-strong); color: var(--text-sub); letter-spacing: 0; }
.copyless-ui .nav-section summary small,
.copyless-ui .nav-section-head small,
.copyless-ui .nav-section-meta { display: none; }
.copyless-ui .nav-section-body { gap: 2px; margin-top: 2px; }
.copyless-ui .nav-today-jump { display: none; }
.copyless-ui .nav-tabs button {
  min-height: 39px;
  grid-template-columns: minmax(0, 1fr) 18px;
  gap: 6px;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  box-shadow: none;
  color: var(--text-sub);
}
.copyless-ui .nav-tabs button:hover { transform: none; box-shadow: none; background: var(--brand-soft); border-color: transparent; }
.copyless-ui .nav-tabs button.active { background: var(--brand-soft); box-shadow: inset 3px 0 0 var(--brand); border-color: transparent; color: var(--brand); }
.copyless-ui .nav-tabs button.nav-launch-card .nav-label { gap: 0; }
.copyless-ui .nav-tabs button.nav-launch-card .nav-label strong { font-size: 13px; font-weight: var(--weight-strong); line-height: 1.1; }
.copyless-ui .nav-tabs button.nav-launch-card .nav-label em,
.copyless-ui .nav-tabs small.nav-role { display: none; }
.copyless-ui .nav-tabs button i {
  width: 18px;
  height: 18px;
  background: transparent;
  color: var(--text-sub);
  font-size: 12px;
  transform: none !important;
}
.copyless-ui .nav-tabs button.active i { color: var(--brand); background: transparent; }
.copyless-ui .remind-topbar {
  grid-template-columns: minmax(320px, 1fr) auto;
  gap: 12px;
  padding: 2px 0 14px;
  margin-bottom: 14px;
  background: color-mix(in srgb, var(--brand-soft) 92%, transparent);
}
.copyless-ui .remind-searchbar { min-height: 42px; border-radius: var(--radius-lg); padding: 0 12px; box-shadow: 0 8px 18px color-mix(in srgb, var(--text) 4%, transparent); }
.copyless-ui .remind-searchbar input { font-size: 13px; min-height: 38px; }
.copyless-ui .remind-header-actions { gap: 8px; }
.copyless-ui .remind-bell { width: 40px; height: 40px; border-radius: var(--radius-lg); }
.copyless-ui .remind-header-user { grid-template-columns: 36px auto; min-width: 132px; padding: 5px 8px; border-radius: var(--radius-lg); }
.copyless-ui .remind-header-user span { width: 36px; height: 36px; font-size: 13px; }
.copyless-ui .remind-header-user strong { font-size: 12px; }
.copyless-ui .remind-header-user small { font-size: 12px; }
.copyless-ui .remind-dashboard-shell { gap: 12px; overflow: visible; }
.remind-role-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--rm-line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--rm-shadow);
}
.remind-role-strip .eyebrow { margin: 0 0 2px; font-size: 12px; letter-spacing: 0; color: var(--brand); }
.remind-role-strip strong { display: block; font-size: 14px; font-weight: var(--weight-strong); line-height: 1.2; }
.remind-role-strip span { display: block; color: var(--text-sub); font-size: 12px; margin-top: 2px; }
.remind-role-strip em { flex: 0 0 auto; font-style: normal; font-size: 12px; font-weight: var(--weight-strong); padding: 5px 8px; border-radius: var(--radius-pill); color: var(--brand); background: var(--brand-soft); }
.remind-module-drawer { border: 1px solid var(--rm-line); border-radius: var(--radius-lg); background: var(--surface); padding: 0; box-shadow: var(--rm-shadow); }
.remind-module-drawer > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 40px; padding: 0 12px; font-size: 12px; color: var(--text-sub); }
.remind-module-drawer > summary::-webkit-details-marker { display: none; }
.remind-module-drawer > summary strong { color: var(--text); font-weight: var(--weight-strong); }
.remind-module-drawer:not([open]) > .remind-module-row { display: none; }
.remind-module-row { gap: 6px; padding: 0 10px 10px; }
.remind-module { padding: 7px 10px; min-height: 34px; font-size: 12px; font-weight: var(--weight-strong); border-color: var(--brand-soft); box-shadow: none; }
.remind-module.active { box-shadow: inset 3px 0 0 var(--brand); }
.remind-filter-row { gap: 10px; }
.remind-filter-chip { min-height: 34px; padding: 7px 11px; font-size: 12px; font-weight: var(--weight-strong); border-color: var(--brand-soft); }
.remind-filter-row time { min-height: 34px; padding: 7px 11px; font-size: 12px; border-radius: var(--radius-md); }
.remind-kpi-grid { grid-template-columns: repeat(6, minmax(126px, 1fr)); gap: 10px; }
.remind-kpi-card {
  min-height: 112px;
  padding: 14px;
  border-radius: var(--radius-lg);
  border-color: var(--brand-soft);
  box-shadow: var(--rm-shadow);
}
.remind-kpi-card p { font-size: 12px; font-weight: var(--weight-strong); }
.remind-kpi-card strong { margin-top: 6px; font-size: 20px; letter-spacing: 0; }
.remind-kpi-card small { margin-top: 5px; font-size: 12px; font-weight: var(--weight-strong); }
.remind-kpi-card > span { width: 32px; height: 32px; right: 12px; top: 12px; border-radius: var(--radius-md); font-size: 14px; }
.remind-sparkline { width: 58px; bottom: 10px; right: 10px; }
.remind-ledger-panel,
.remind-widget { border-color: var(--brand-soft); border-radius: var(--radius-lg); box-shadow: var(--rm-shadow); }
.remind-ledger-panel > header,
.remind-widget > header { min-height: 50px; padding: 13px 15px; }
.remind-ledger-panel header h3,
.remind-widget header h3 { font-size: 14px; font-weight: var(--weight-strong); }
.remind-ledger-panel header span { padding: 3px 8px; font-size: 12px; }
.remind-table-actions { gap: 6px; }
.remind-table-actions button { min-height: 32px; padding: 7px 9px; border-radius: var(--radius-md); font-size: 12px; font-weight: var(--weight-strong); }
.remind-table-wrap table { min-width: 1080px; }
.remind-table-wrap th,
.remind-table-wrap td { padding: 9px 10px; font-size: 12px; }
.remind-table-wrap th { font-weight: var(--weight-strong); letter-spacing: 0; }
.remind-table-wrap td strong { font-size: 12px; font-weight: var(--weight-strong); }
.remind-table-wrap td small,
.money-cell small { font-size: 12px; }
.remind-pill { min-width: 62px; padding: 4px 8px; font-size: 12px; font-weight: var(--weight-strong); }
.remind-widget-grid { grid-template-columns: repeat(4, minmax(210px, 1fr)); gap: 12px; }
.report-head,
.cash-summary { padding: 11px 13px; font-size: 12px; }
.report-list { padding: 0 13px 10px; }
.remind-report-card { grid-template-columns: 72px minmax(0, 1fr); }
.report-thumb { height: 50px; border-radius: var(--radius-md); font-size: 12px; }
.pl-layout { grid-template-columns: 108px minmax(0, 1fr); padding: 13px; }
.donut { width: 104px; height: 104px; }
.donut span { width: 68px; height: 68px; font-size: 12px; }
.donut b { font-size: 16px; }
.pl-layout li,
.remind-task { font-size: 12px; }
.remind-task { min-height: 44px; padding: 8px; border-radius: var(--radius-md); }
.remind-task input { width: 16px; height: 16px; }
.remind-task b { font-size: 12px; }
.remind-task em { font-size: 12px; }
.remind-field-app .field-shell { max-width: 1120px; }
.field-logo-dot { display:inline-grid; place-items:center; width:24px; height:24px; margin-right:6px; border-radius: var(--radius-md); background:linear-gradient(135deg,var(--text),var(--brand) 72%,var(--brand)); color:var(--surface); font-size: 12px; font-weight: var(--weight-strong); letter-spacing: 0; vertical-align:middle; }
.remind-field-hero { border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--rm-shadow); }
.remind-field-hero .eyebrow { font-size: 12px; letter-spacing: 0; color: var(--brand); }
.remind-field-hero h1 { font-size: 32px; line-height: 1.12; font-weight: var(--weight-strong); letter-spacing: 0; }
.remind-field-hero p:not(.eyebrow) { font-size: 13px; font-weight: var(--weight-strong); color: var(--text-sub); }
.field-feature-strip { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 9px; }
.field-feature-strip span { min-height: 56px; padding: 10px 8px; border-radius: var(--radius-lg); font-size: 13px; font-weight: var(--weight-strong); line-height: 1.15; }
.field-next-action-card { padding: 15px; border-radius: var(--radius-lg); gap: 12px; }
.field-next-action-card h2 { font-size: 24px; font-weight: var(--weight-strong); }
.field-next-action-card span { font-size: 12px; font-weight: var(--weight-strong); }
.field-next-action-card button { min-height: 58px; padding: 0 22px; border-radius: var(--radius-lg); font-size: 16px; font-weight: var(--weight-strong); display:inline-flex; align-items:center; justify-content:center; gap:8px; line-height:1; }
.remind-phone-flow .impact-card { min-height: 104px; display:grid; grid-template-rows: 16px 28px auto; align-items:center; justify-items:center; text-align:center; padding: 12px 8px; border-radius: var(--radius-lg); }
.remind-phone-flow .impact-card .eyebrow { margin:0; font-size: 12px; letter-spacing: 0; }
.remind-phone-flow .impact-card strong { margin:0; font-size: 14px; line-height: 1.24; font-weight: var(--weight-strong); }
.remind-phone-flow .impact-card:last-child { min-height: 70px; grid-template-rows: 15px auto; }
.remind-field-app .field-quick-actions { gap: 8px; }
.remind-field-app .field-quick-actions button,
.remind-field-app .big-action,
.remind-field-app .field-sticky-action-rail button { min-height: 56px; border-radius: var(--radius-lg); font-size: 16px; font-weight: var(--weight-strong); display:inline-flex; align-items:center; justify-content:center; gap:7px; line-height:1; }
.remind-field-app .field-card { border-radius: var(--radius-lg); box-shadow: var(--rm-shadow); }
@media (max-width: 1480px) {
  .remind-kpi-grid { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
  .remind-widget-grid { grid-template-columns: repeat(2, minmax(240px, 1fr)); }
}
@media (max-width: 920px) {
  .copyless-ui .main { padding: 14px 12px 28px; }
  .copyless-ui .sidebar { width: auto; padding: 14px 12px; }
  .remind-topbar { grid-template-columns: 1fr; }
  .remind-kpi-grid,
  .remind-widget-grid { grid-template-columns: 1fr; }
  .field-feature-strip { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .field-next-action-card { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .remind-field-app { font-size: 13px; }
  .remind-field-hero { padding: 18px; border-radius: var(--radius-lg); }
  .remind-field-hero h1 { font-size: 24px; }
  .field-feature-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .field-feature-strip span { min-height: 54px; font-size: 12px; }
  .field-next-action-card button { width: 100%; min-height: 56px; font-size: 16px; }
  .remind-phone-flow .impact-card { min-height: 96px; }
}

/* S4 owner workspace: six destinations with a compact drill-in dashboard. */
.owner-dashboard-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.owner-dashboard-heading h3 { margin: 2px 0 4px; font-size: 20px; letter-spacing: 0; }
.owner-dashboard-heading p { margin: 0; color: var(--muted); }
.owner-tile-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.owner-dashboard-tile {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 34px auto;
  gap: 7px;
  min-width: 0;
  min-height: 160px;
  padding: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  text-align: left;
}
.owner-dashboard-tile:hover, .owner-dashboard-tile:focus-visible { border-color: var(--brand); box-shadow: 0 8px 20px color-mix(in srgb, var(--brand) 10%, transparent); }
.owner-dashboard-tile > span { color: var(--text-sub); font-size: 12px; font-weight: var(--weight-strong); }
.owner-dashboard-tile > strong { overflow: hidden; font-size: 20px; line-height: 1.15; letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; }
.owner-dashboard-tile > small { color: var(--text-sub); font-size: 12px; }
.owner-dashboard-tile > em { position: absolute; top: 11px; right: 10px; color: var(--brand); font-size: 12px; font-style: normal; font-weight: var(--weight-strong); }
.owner-dashboard-tile.red { border-color: var(--danger-soft); background: var(--danger-soft); }
.owner-mini-bars { display: flex; align-items: flex-end; gap: 4px; height: 42px; padding-top: 5px; border-bottom: 1px solid var(--line); }
.owner-mini-bars i { flex: 1; min-width: 3px; max-width: 20px; background: var(--brand); opacity: .8; }
.owner-mini-bars.teal i { background: var(--info); }
.owner-mini-bars.orange i { background: var(--warn); }
.owner-mini-bars.red i { background: var(--danger); }
.owner-hourly-section { display: grid; gap: 14px; min-width: 0; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.owner-hourly-section > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.owner-hourly-section > header h3 { margin: 2px 0 0; font-size: 20px; letter-spacing: 0; }
.owner-hourly-heading-tools { display: grid; justify-items: end; gap: 6px; }
.owner-hourly-heading-tools > span { color: var(--text-sub); font-size: 12px; }
.owner-hourly-periods button { min-width: 58px; min-height: 40px; padding: 6px 10px; font-size: 12px; }
body.copyless-ui .owner-hourly-company { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 160px; align-items: center; justify-content: stretch; gap: 18px; min-width: 0; min-height: 128px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--text); line-height: 1.3; text-align: left; white-space: normal; }
.owner-hourly-company:hover, .owner-hourly-company:focus-visible { border-color: var(--brand); box-shadow: 0 8px 20px color-mix(in srgb, var(--brand) 10%, transparent); }
.owner-hourly-company > span { display: grid; gap: 6px; min-width: 0; }
.owner-hourly-company small { color: var(--text-sub); font-size: 12px; font-weight: var(--weight-strong); }
.owner-hourly-company > span > strong { font-size: 32px; font-weight: var(--weight-heavy); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.owner-hourly-company > em { position: absolute; top: 14px; right: 14px; color: var(--brand); font-size: 12px; font-style: normal; font-weight: var(--weight-strong); }
.owner-hourly-series { display: flex !important; grid-auto-flow: column; align-items: center; flex-wrap: wrap; gap: 7px !important; color: var(--text-sub); font-size: 12px; font-variant-numeric: tabular-nums; }
.owner-hourly-series b { font-weight: var(--weight-strong); }
.owner-hourly-series i { color: var(--brand); font-style: normal; }
.owner-hourly-sparkline { width: 160px; height: 44px; overflow: visible; }
.owner-hourly-sparkline line { stroke: var(--line); stroke-width: 1; }
.owner-hourly-sparkline polyline { fill: none; stroke: var(--info); stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; }
.owner-hourly-units { display: grid; gap: 7px; }
.owner-hourly-units-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--text-sub); font-size: 12px; }
.owner-hourly-units-head strong { color: var(--text); font-size: 14px; }
body.copyless-ui .owner-hourly-unit { display: grid; grid-template-columns: minmax(140px, .8fr) minmax(180px, 2fr) minmax(120px, auto); align-items: center; justify-content: stretch; gap: 14px; min-width: 0; min-height: 54px; padding: 9px 11px; border: 1px solid transparent; border-radius: var(--radius-sm); background: var(--surface-sub); color: var(--text); line-height: 1.3; text-align: left; white-space: normal; }
.owner-hourly-unit:hover, .owner-hourly-unit:focus-visible { border-color: var(--brand); background: var(--brand-soft); }
.owner-hourly-unit > span:first-child { display: grid; gap: 2px; min-width: 0; }
.owner-hourly-unit strong { overflow-wrap: anywhere; font-size: 13px; }
.owner-hourly-unit small { color: var(--text-sub); font-size: 12px; }
.owner-hourly-unit em { font-style: normal; font-weight: var(--weight-heavy); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.owner-hourly-bar { position: relative; display: block; height: 12px; overflow: visible; border-radius: var(--radius-sm); background: var(--surface); }
.owner-hourly-bar i { display: block; height: 100%; border-radius: var(--radius-sm); background: var(--info); }
.owner-hourly-bar b { position: absolute; top: -4px; bottom: -4px; width: 0; border-left: 2px dashed var(--text-sub); }
.owner-metric-modal.owner-hourly-modal { width: min(820px, calc(100vw - 32px)); }
.owner-hourly-modal table { min-width: 610px; }
.owner-hourly-modal th, .owner-hourly-modal td { font-variant-numeric: tabular-nums; }
.owner-hourly-trend-table { display: grid; gap: 7px; min-width: 0; }
.owner-metric-modal { width: min(680px, calc(100vw - 32px)); max-height: min(760px, calc(100vh - 32px)); }
.owner-schedule-modal { width: min(920px, calc(100vw - 32px)); }
.owner-modal-value { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.owner-modal-value strong { font-size: 32px; letter-spacing: 0; }
.owner-modal-value span { color: var(--text-sub); }
.owner-modal-lines { display: grid; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.owner-modal-lines > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 12px; border-bottom: 1px solid var(--surface-sub); }
.owner-modal-lines > div:last-child { border-bottom: 0; }
.owner-modal-lines > button { display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--surface-sub); border-radius: 0; background: var(--surface); color: var(--text); text-align: left; }
.owner-modal-lines > button:last-child { border-bottom: 0; }
.owner-modal-lines > button:hover, .owner-modal-lines > button:focus-visible { background: var(--brand-soft); }
.owner-modal-lines > button i { color: var(--brand); font-style: normal; font-size: 16px; }
.owner-schedule-groups { display: grid; gap: 14px; overflow: auto; }
.owner-schedule-groups > section { display: grid; gap: 7px; min-width: 0; }
.owner-schedule-groups > section > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.owner-schedule-groups > section > header span { color: var(--text-sub); font-size: 12px; font-weight: var(--weight-strong); }
.owner-schedule-groups table { min-width: 620px; }
.owner-schedule-groups td:nth-child(3) { white-space: nowrap; font-weight: var(--weight-strong); }
.owner-status-projects { display: grid; gap: 10px; margin-bottom: 12px; padding: 12px; border: 1px solid var(--brand); border-radius: var(--radius-sm); background: var(--brand-soft); }
.owner-status-projects > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.owner-status-projects h4, .owner-status-projects p { margin: 2px 0; }
.owner-status-projects > div { display: grid; gap: 6px; }
.owner-status-projects > div > a { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); text-decoration: none; }
.owner-status-projects > div > a span { display: grid; min-width: 0; }
.owner-status-projects > div > a small { overflow: hidden; color: var(--text-sub); text-overflow: ellipsis; white-space: nowrap; }
.owner-status-projects > div > a i { color: var(--brand); font-style: normal; font-weight: var(--weight-strong); }
.business-track-lane td a[data-owner-project-status] { color: var(--brand); font-weight: var(--weight-strong); text-decoration: none; }
.owner-business-sections { display: grid; gap: 12px; margin-bottom: 16px; }
.owner-business-readonly { display: grid; gap: 14px; }
.owner-readonly-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; border-left: 3px solid var(--info); background: var(--info-soft); color: var(--text); }
.owner-readonly-banner span { color: var(--text-sub); font-size: 12px; }
.owner-business-block, .owner-approval-intro, .owner-people-overview { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--brand-soft); }
.owner-business-block .table-wrap { max-width: 100%; border-radius: var(--radius-sm); }
.owner-business-block > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.owner-business-block h4, .owner-ranking-columns h4 { margin: 2px 0 0; font-size: 16px; letter-spacing: 0; }
.owner-business-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.owner-business-metrics > span { display: grid; gap: 4px; min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-sub); font-size: 12px; }
.owner-business-metrics b { overflow: hidden; color: var(--text); font-size: 16px; letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; }
.business-six-metrics { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.business-track-grid { display: grid; gap: 10px; }
.business-track-lane { min-width: 0; border-top: 1px solid var(--line); }
.business-track-lane:first-child { border-top: 0; }
.business-track-lane > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 2px 6px; }
.business-track-lane > header div { display: flex; align-items: baseline; gap: 8px; }
.business-track-lane > header span { color: var(--text-sub); font-size: 12px; font-weight: var(--weight-heavy); }
.business-track-lane > header strong { font-size: 16px; }
.business-track-lane > header b { font-size: 13px; }
.business-track-lane table { min-width: 660px; }
.business-status-bar { display: block; width: 100%; min-width: 90px; height: 8px; overflow: hidden; border-radius: var(--radius-sm); background: var(--surface-sub); }
.business-status-bar i { display: block; height: 100%; border-radius: inherit; background: var(--brand); }
.business-status-bar.teal i { background: var(--info); }
.business-detail-table { margin-top: 10px; }
.business-basis-note { margin: -3px 0 10px; color: var(--text-sub); font-size: 12px; }
.business-unassigned { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; padding: 10px 12px; border: 1px solid var(--warn); border-radius: var(--radius-sm); background: var(--warn-soft); color: var(--warn-text); text-decoration: none; }
.business-unassigned span { font-size: 12px; }
.owner-kpi-list { display: grid; gap: 8px; }
.owner-kpi-row { display: grid; grid-template-columns: minmax(120px, .8fr) minmax(160px, 1fr) 48px; align-items: center; gap: 10px; }
.owner-kpi-row .progress { height: 8px; }
.owner-approval-intro, .owner-people-overview { display: grid; gap: 12px; margin-bottom: 14px; }
.owner-approval-intro p { margin: 0; color: var(--text-sub); }
.profit-allocation, .profit-distribution { display: grid; gap: 14px; margin-bottom: 18px; padding: 16px; border: 1px solid var(--brand); border-radius: var(--radius-md); background: var(--brand-soft); }
.profit-distribution { border-color: var(--line); background: var(--info-soft); }
.profit-allocation .panel-head, .profit-distribution .panel-head { align-items: end; }
.profit-allocation .panel-head p, .profit-distribution .panel-head p { margin: 4px 0 0; color: var(--text-sub); }
.profit-allocation .panel-head label, .profit-distribution .panel-head label { display: grid; gap: 4px; color: var(--text-sub); font-size: 12px; font-weight: var(--weight-strong); }
.profit-allocation input[type="month"], .profit-distribution input[type="month"] { min-height: 40px; }
.profit-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.profit-summary span { display: grid; gap: 3px; padding: 12px; color: var(--text-sub); font-size: 12px; }
.profit-summary span + span { border-left: 1px solid var(--surface-sub); }
.profit-summary b { color: var(--text); font-size: 16px; }
.profit-actions { display: flex; justify-content: flex-end; }
.profit-blockers { padding: 12px; border-left: 4px solid var(--danger); background: var(--danger-soft); color: var(--danger); }
.profit-blockers ul { margin: 6px 0 0; padding-left: 20px; }
.profit-allocation table select, .profit-allocation table input { width: 100%; min-width: 150px; margin: 2px 0; }
.profit-results { display: grid; gap: 10px; }
.profit-results h4 { margin: 4px 0 0; font-size: 14px; }
.profit-distribution .profit-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.profit-adjustment { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.profit-adjustment summary { cursor: pointer; font-weight: var(--weight-strong); }
.profit-adjustment form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 8px; align-items: end; margin-top: 10px; }
.profit-adjustment label { display: grid; min-width: 0; gap: 4px; color: var(--text-sub); font-size: 12px; font-weight: var(--weight-strong); }
.profit-adjustment input, .profit-adjustment select { width: 100%; min-width: 0; }
.owner-approval-flow { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px; border: 1px solid var(--brand); border-radius: var(--radius-sm); background: var(--brand-soft); }
.owner-approval-flow i { color: var(--brand); font-style: normal; }
.payment-threshold-form { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.payment-threshold-form label { display: grid; grid-template-columns: auto 130px; align-items: center; gap: 5px 10px; color: var(--text-sub); font-size: 12px; font-weight: var(--weight-heavy); }
.payment-threshold-form input { min-height: 36px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.payment-threshold-form small { grid-column: 1 / -1; color: var(--text-sub); font-weight: var(--weight-strong); }
.payment-prepare-form, .payment-request-list { min-width: 0; margin-bottom: 14px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--brand-soft); }
.payment-prepare-form .form-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.payment-reason-field { grid-column: span 2; }
.payment-request-list .table-wrap { max-width: 100%; border-radius: var(--radius-sm); }
.payment-request-list table { width: 100%; min-width: 820px; table-layout: fixed; }
.payment-request-list th:nth-child(1) { width: 13%; }
.payment-request-list th:nth-child(2) { width: 18%; }
.payment-request-list th:nth-child(3) { width: 12%; }
.payment-request-list th:nth-child(4), .payment-request-list th:nth-child(5) { width: 10%; }
.payment-request-list th:nth-child(6) { width: 17%; }
.payment-request-list th:nth-child(7) { width: 20%; }
.payment-request-list td { overflow-wrap: anywhere; }
.approval-workflow-section { display: grid; gap: 12px; min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.approval-workflow-section + .approval-workflow-section { margin-top: 14px; }
.approval-workflow-section > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.approval-workflow-section > header h3, .approval-workflow-section > header p { margin: 0; }
.approval-workflow-section > header h3 { color: var(--text); font-size: 16px; letter-spacing: 0; }
.approval-workflow-section > header p:not(.eyebrow) { margin-top: 4px; color: var(--text-sub); font-size: 12px; }
.approval-section-counts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.approval-section-counts span { display: grid; gap: 2px; min-width: 78px; padding: 7px 9px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-sub); font-size: 12px; }
.approval-section-counts b { color: var(--text); font-size: 14px; letter-spacing: 0; }

/* D4 case home: one project, one ordered history, one action rail. */
.case-detail-page[hidden] { display: none !important; }
body[data-case-view="true"] .tab-panel,
body[data-case-view="true"] #roleLanding,
body[data-case-view="true"] #activeTabGuide { display: none !important; }
.case-detail-page { display: grid; gap: 14px; min-width: 0; }
.case-loading { display: grid; min-height: 360px; place-items: center; color: var(--text-sub); }
.case-page-header { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.case-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; color: var(--text-sub); font-size: 12px; }
.case-breadcrumb strong { color: var(--text); }
.case-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.case-title-row h2, .case-title-row p { margin: 0; }
.case-title-row h2 { color: var(--text); font-size: 24px; letter-spacing: 0; }
.case-title-row p:not(.eyebrow) { margin-top: 4px; color: var(--text-sub); font-size: 12px; }
.case-money-band { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.case-money-band span { display: grid; gap: 3px; min-width: 0; padding: 9px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.case-money-band small { color: var(--text-sub); font-size: 12px; }
.case-money-band strong { overflow: hidden; color: var(--text); font-size: 13px; letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; }
.case-page-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; align-items: start; gap: 14px; min-width: 0; }
.case-timeline { display: grid; gap: 0; min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.case-timeline-item { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; min-width: 0; padding-bottom: 12px; }
.case-timeline-item:not(:last-child)::before { position: absolute; top: 14px; bottom: -2px; left: 8px; width: 2px; background: var(--line); content: ""; }
.case-timeline-marker { position: relative; z-index: 1; width: 16px; height: 16px; margin-top: 12px; border: 4px solid var(--brand-soft); border-radius: 50%; background: var(--brand); }
.case-timeline-item.type-field_report .case-timeline-marker { border-color: var(--info-soft); background: var(--info); }
.case-timeline-item.type-invoice .case-timeline-marker, .case-timeline-item.type-payment .case-timeline-marker { border-color: var(--brand-soft); background: var(--brand); }
.case-timeline-item.type-chase .case-timeline-marker { border-color: var(--danger-soft); background: var(--danger); }
.case-timeline-card { display: grid; gap: 6px; min-width: 0; padding: 11px; border: 1px solid var(--surface-sub); border-radius: var(--radius-sm); background: var(--brand-soft); }
.case-timeline-card > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.case-timeline-card > header span { color: var(--brand); font-size: 12px; font-weight: var(--weight-heavy); }
.case-timeline-card time { color: var(--text-sub); font-size: 12px; }
.case-timeline-card h3, .case-timeline-card p { margin: 0; }
.case-timeline-card h3 { color: var(--text); font-size: 14px; letter-spacing: 0; }
.case-timeline-card p { color: var(--text-sub); font-size: 12px; line-height: 1.5; }
.case-timeline-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.case-timeline-meta span, .case-timeline-meta strong { padding: 3px 6px; border-radius: var(--radius-sm); background: var(--surface-sub); color: var(--text-sub); font-size: 12px; }
.case-timeline-meta strong { color: var(--text); }
.case-photo-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.case-photo-strip figure { min-width: 0; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.case-photo-strip img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.case-photo-strip figcaption { overflow: hidden; padding: 5px; color: var(--text-sub); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.case-action-rail { position: sticky; top: 12px; display: grid; gap: 8px; min-width: 0; }
.case-action-rail section { display: grid; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.case-action-rail h3, .case-action-rail p { margin: 0; }
.case-action-rail h3 { color: var(--text); font-size: 14px; letter-spacing: 0; }
.case-action-rail p:not(.eyebrow) { color: var(--text-sub); font-size: 12px; line-height: 1.5; }
.case-action-rail > a, .case-action-rail > button { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; text-decoration: none; }
.case-report-packages { display: grid; gap: 8px; margin: 4px 0 16px 34px; padding: 12px; border: 1px solid var(--brand); border-left: 3px solid var(--brand); border-radius: var(--radius-md); background: var(--brand-soft); }
.field-report-package { display: grid; gap: 7px; min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.field-report-package > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.field-report-package > small, .field-report-package > p { margin: 0; color: var(--text-sub); font-size: 12px; overflow-wrap: anywhere; }
.field-report-package .inline-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.field-report-package.status-sent { border-color: var(--info); background: var(--info-soft); }
.case-corrections { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--brand-soft); }
.field-correction { display: grid; grid-template-columns: 112px minmax(0,1fr); gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.field-correction > div:last-child { display: grid; gap: 6px; min-width: 0; }
.field-correction header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.field-correction p, .field-correction small { margin: 0; color: var(--text-sub); overflow-wrap: anywhere; }
.field-correction.status-open { border-left: 3px solid var(--danger); }
.field-correction.status-resubmitted { border-left: 3px solid var(--warn); }
.correction-photo { position: relative; width: 112px; aspect-ratio: 4/3; overflow: hidden; border-radius: var(--radius-sm); background: var(--surface-sub); }
.correction-photo img, .correction-photo-picker img { width: 100%; height: 100%; display: block; object-fit: contain; }
.correction-photo span, .correction-pin { position: absolute; width: 18px; height: 18px; border: 3px solid var(--surface); border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 2px var(--danger); transform: translate(-50%,-50%); pointer-events: none; }
.correction-photo-picker { position: relative; width: min(100%,560px); aspect-ratio: 4/3; margin-inline: auto; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-sub); cursor: crosshair; }
.correction-photo-picker .correction-pin { left: 50%; top: 50%; }
.field-correction-modal form { display: grid; gap: 12px; }
.field-corrections-panel { display: grid; gap: 10px; border: 2px solid var(--danger-soft); background: var(--danger-soft); }
.field-correction-tasks { display: grid; gap: 10px; }
.field-correction-task { display: grid; grid-template-columns: 120px minmax(0,1fr); gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.field-correction-task > div:last-child { display: grid; gap: 8px; min-width: 0; }
.field-correction-task h3, .field-correction-task p { margin: 0; overflow-wrap: anywhere; }
.field-correction-task input[type="file"], .field-correction-task textarea, .field-correction-task button { box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; }
.field-correction-photo { position: relative; width: 120px; aspect-ratio: 4/3; overflow: hidden; border-radius: var(--radius-sm); background: var(--surface-sub); }
.field-correction-photo img { width: 100%; height: 100%; display: block; object-fit: contain; }
.field-correction-photo span { position: absolute; width: 18px; height: 18px; border: 3px solid var(--surface); border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 2px var(--danger); transform: translate(-50%,-50%); }
.field-correction-upload { display: grid; gap: 6px; padding: 10px; border: 1px dashed var(--brand); border-radius: var(--radius-sm); background: var(--brand-soft); }
.success-text { color: var(--ok); font-weight: var(--weight-strong); }
.case-project-documents { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.case-procurement { display: grid; gap: 10px; margin-top: 4px; padding: 14px 0; border-top: 1px solid var(--line); }
.purchase-order-card { display: grid; gap: 10px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: var(--radius-sm); background: var(--surface); }
.purchase-order-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.purchase-order-card > header > div { display: grid; gap: 3px; min-width: 0; }
.purchase-order-card > header strong, .purchase-order-card > header small { overflow-wrap: anywhere; }
.purchase-order-card > header small { color: var(--text-sub); }
.po-four-stage { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.po-four-stage span { display: grid; gap: 3px; min-width: 0; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-sub); }
.po-four-stage small { color: var(--text-sub); }
.po-four-stage b { overflow: hidden; font-size: 13px; letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; }
.purchase-order-card .inline-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.purchase-order-modal { width: min(680px, calc(100vw - 24px)); }
.project-document-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.project-document-row > div { display: grid; gap: 3px; min-width: 0; }
.project-document-row small { color: var(--text-sub); }
.project-document-row p { margin: 0; color: var(--warn); font-weight: var(--weight-strong); }
.project-document-row.is-old { background: var(--warn-soft); border-color: var(--warn); }
.project-document-viewer-backdrop { padding: 12px; }
.project-document-viewer { width: min(1100px,100%); height: min(900px,calc(100dvh - 24px)); }
.project-document-viewer iframe, .project-image-viewport { width: 100%; min-height: 0; flex: 1; border: 0; background: var(--surface-sub); }
.project-document-viewer { display: flex; flex-direction: column; gap: 8px; }
.project-image-viewport { overflow: auto; touch-action: pinch-zoom; display: grid; place-items: start center; }
.project-image-viewport img { width: 100%; height: auto; max-width: none; transform-origin: top center; }
.viewer-zoom-controls { display: flex; justify-content: center; gap: 8px; }
.viewer-zoom-controls button { width: 44px; min-height: 40px; }
.old-version-warning { margin: 0; padding: 8px; color: var(--danger); background: var(--warn-soft); font-weight: var(--weight-strong); }
.field-document-list { display: grid; gap: 8px; }
.field-document-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.field-document-row > div { display: grid; gap: 3px; min-width: 0; }
.field-document-row p { margin: 0; color: var(--warn); font-weight: var(--weight-strong); }
.field-document-row.is-old { background: var(--warn-soft); border-color: var(--warn); }
.field-package-send-modal form { display: grid; gap: 12px; }
.field-package-send-modal form label { display: grid; gap: 5px; color: var(--text-sub); font-size: 12px; font-weight: var(--weight-strong); }
.field-package-send-modal input, .field-package-send-modal select { box-sizing: border-box; width: 100%; min-height: 42px; }
.payment-decision-controls { display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; flex-wrap: wrap; }
.payment-decision-controls input { flex: 1 1 100%; min-width: 0; min-height: 34px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.owner-ranking-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.owner-ranking-toolbar > div { display: grid; gap: 4px; }
.owner-ranking-toolbar > div > small { color: var(--text-sub); }
.owner-ranking-toolbar label { display: flex; align-items: center; gap: 8px; color: var(--text-sub); font-size: 12px; font-weight: var(--weight-strong); }
.owner-ranking-toolbar select { min-height: 38px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.owner-ranking-filters { display: flex !important; grid-auto-flow: column; gap: 12px !important; }
.owner-ranking-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.owner-ranking-columns > section { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--brand-soft); }
.owner-ranking-list { display: grid; gap: 7px; margin-top: 10px; }
.owner-ranking-row { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 62px; padding: 9px 10px 13px; overflow: hidden; border: 1px solid var(--surface-sub); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); text-decoration: none; }
.owner-ranking-row > b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); }
.owner-ranking-row > span { display: grid; min-width: 0; }
.owner-ranking-row small { overflow: hidden; color: var(--text-sub); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.owner-ranking-row em { color: var(--info); font-style: normal; font-weight: var(--weight-heavy); }
.owner-ranking-row > i { position: absolute; bottom: 0; left: 0; height: 3px; max-width: 100%; background: var(--info); }

@media (max-width: 1180px) {
  .owner-tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .owner-business-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .business-six-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .payment-prepare-form .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .owner-readonly-banner { align-items: flex-start; flex-direction: column; }
  .owner-dashboard-heading, .owner-business-block > header, .owner-ranking-toolbar, .owner-approval-flow { align-items: stretch; flex-direction: column; }
  .profit-allocation, .profit-distribution { padding: 12px; }
  .profit-allocation .panel-head, .profit-distribution .panel-head { align-items: stretch; }
  .profit-summary { grid-template-columns: 1fr; }
  .profit-distribution .profit-summary { grid-template-columns: 1fr; }
  .profit-summary span + span { border-top: 1px solid var(--surface-sub); border-left: 0; }
  .profit-actions, .profit-actions .inline-actions { display: grid; width: 100%; }
  .profit-actions button { width: 100%; }
  .profit-adjustment form { grid-template-columns: 1fr; }
  .personal-contribution-strip, .field-contribution { grid-template-columns: minmax(0, 1fr) auto; }
  .personal-contribution-strip em, .field-contribution em { grid-column: 1 / -1; }
  .team-profit-reward { grid-template-columns: 1fr 1fr; }
  .owner-tile-grid, .owner-ranking-columns { grid-template-columns: 1fr; }
  .owner-tile-grid { width: 100%; min-width: 0; max-width: 100%; }
  .owner-dashboard-tile { width: 100%; min-width: 0; max-width: 100%; min-height: 148px; padding: 12px; }
  .owner-dashboard-tile > strong, .copyless-ui .owner-dashboard-tile > strong { max-width: 100%; overflow-wrap: anywhere; white-space: normal; }
  .owner-hourly-section > header, .owner-hourly-units-head { align-items: flex-start; flex-direction: column; gap: 4px; }
  .owner-hourly-heading-tools { width: 100%; justify-items: stretch; }
  .owner-hourly-periods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
  .owner-hourly-periods button { min-width: 0; min-height: 44px; padding-inline: 4px; font-size: 13px; }
  body.copyless-ui .owner-hourly-company { grid-template-columns: minmax(0, 1fr); min-height: 204px; padding: 14px; }
  .owner-hourly-company > span > strong { padding-right: 62px; font-size: 24px; overflow-wrap: anywhere; }
  .owner-hourly-series { display: grid !important; grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); }
  .owner-hourly-series b { white-space: nowrap; }
  .owner-hourly-series i { display: none; }
  .owner-hourly-sparkline { width: 100%; height: 40px; }
  body.copyless-ui .owner-hourly-unit { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; min-height: 74px; }
  .owner-hourly-unit .owner-hourly-bar { grid-column: 1 / -1; grid-row: 2; }
  .owner-hourly-unit em { grid-column: 2; grid-row: 1; font-size: 13px; }
  .owner-hourly-modal { width: calc(100vw - 20px); }
  .owner-status-projects > header { align-items: stretch; flex-direction: column; }
  .owner-status-projects > div > a { grid-template-columns: minmax(0, 1fr) auto; }
  .owner-status-projects > div > a i { grid-column: 1 / -1; }
  .owner-schedule-modal { width: calc(100vw - 20px); }
  .owner-schedule-groups > section > header { align-items: flex-start; flex-direction: column; gap: 3px; }
  .owner-business-metrics { grid-template-columns: 1fr 1fr; }
  .business-six-metrics { grid-template-columns: 1fr 1fr; }
  .business-track-lane > header, .business-unassigned { align-items: flex-start; flex-direction: column; }
  .business-track-lane table { min-width: 100%; table-layout: fixed; }
  .business-track-lane th, .business-track-lane td { padding: 9px 7px; font-size: 12px; }
  .business-track-lane th:nth-child(1) { width: 26%; }
  .business-track-lane th:nth-child(2) { width: 30%; }
  .business-track-lane th:nth-child(3) { width: 15%; }
  .business-track-lane th:nth-child(4) { width: 29%; }
  .business-status-bar { min-width: 0; }
  .payment-threshold-form, .payment-decision-controls { align-items: stretch; flex-direction: column; }
  .payment-threshold-form label, .payment-prepare-form .form-grid { grid-template-columns: 1fr; }
  .payment-threshold-form small, .payment-reason-field { grid-column: auto; }
  .payment-decision-controls { min-width: 210px; }
  .approval-workflow-section > header { align-items: stretch; flex-direction: column; }
  .approval-section-counts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; }
  .approval-section-counts span { min-width: 0; }
  .case-title-row { align-items: stretch; flex-direction: column; }
  .case-money-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-page-layout { grid-template-columns: 1fr; }
  .case-action-rail { position: static; grid-row: 1; }
  .case-photo-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-procurement .panel-head, .purchase-order-card > header { align-items: stretch; flex-direction: column; }
  .case-procurement .panel-head button, .purchase-order-card .inline-actions > * { width: 100%; }
  .po-four-stage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-report-packages { margin-left: 0; }
  .case-report-packages .panel-head { align-items: stretch; flex-direction: column; }
  .case-report-packages .panel-head button, .field-report-package .inline-actions > * { width: 100%; }
  .field-report-package .inline-actions { display: grid; grid-template-columns: 1fr; }
  .field-correction { grid-template-columns: 84px minmax(0,1fr); }
  .correction-photo { width: 84px; }
  .field-correction header { display: grid; }
  .field-correction-task { grid-template-columns: 1fr; }
  .field-correction-photo { width: 100%; max-height: 220px; }
  .field-document-row { align-items: stretch; flex-direction: column; }
  .field-document-row button { width: 100%; }
  .owner-kpi-row { grid-template-columns: minmax(0, 1fr) 44px; }
  .owner-kpi-row .progress { grid-column: 1 / -1; grid-row: 2; }
  .owner-modal-value { align-items: flex-start; flex-direction: column; }
  .owner-modal-lines > div { align-items: flex-start; flex-direction: column; gap: 3px; }
}

/* S6 finance: period controls and three-level drilldown. */
.finance-toolbar {
  display: grid;
  grid-template-columns: auto auto minmax(360px, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.finance-date-range { display: flex; align-items: center; justify-content: flex-end; gap: 7px; min-width: 0; }
.finance-date-range label { display: flex; align-items: center; gap: 5px; color: var(--text-sub); font-size: 12px; font-weight: var(--weight-strong); }
.finance-date-range input { width: 132px; min-height: 38px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; font-size: 12px; }
.finance-status-strip { display: flex; align-items: center; gap: 14px; padding: 4px 2px; color: var(--text-sub); font-size: 12px; }
.finance-status-strip strong { color: var(--text); font-size: 14px; }
.finance-loading, .finance-empty { display: grid; place-items: center; gap: 5px; min-height: 140px; padding: 20px; color: var(--text-sub); text-align: center; }
.finance-empty strong { color: var(--text-sub); font-size: 14px; }
.finance-drill-layer { scroll-margin-top: 120px; }
.finance-click-row.selected { background: var(--brand-soft); }
.finance-row-button { display: grid; gap: 2px; width: 100%; min-width: 150px; padding: 10px 12px; border: 0; background: transparent; color: var(--text); text-align: left; }
.finance-row-button strong { font-size: 13px; letter-spacing: 0; }
.finance-row-button small { color: var(--text-sub); font-size: 12px; }
.finance-click-row:hover { background: var(--surface); }
.finance-click-row td:last-child { width: 28px; color: var(--brand); font-size: 16px; text-align: center; }
.finance-bar-track { display: block; width: 110px; height: 7px; overflow: hidden; border-radius: var(--radius-sm); background: var(--surface-sub); }
.finance-bar-track i { display: block; height: 100%; border-radius: inherit; background: var(--brand); }
.finance-visual-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .85fr); gap: 12px; margin-top: 12px; }
.finance-chart-panel { min-width: 0; margin: 0; }
.finance-column-chart { display: flex; align-items: end; gap: 8px; min-height: 230px; overflow-x: auto; padding: 12px 2px 0; border-bottom: 1px solid var(--line); }
.finance-column-chart article { display: grid; flex: 1 0 76px; grid-template-rows: auto 142px auto auto; gap: 4px; min-width: 0; text-align: center; }
.finance-column-value { color: var(--text); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.finance-column-track { display: flex; align-items: end; justify-content: center; height: 142px; border-bottom: 1px solid var(--line); }
.finance-column-track i { display: block; width: 34px; min-height: 6px; border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: var(--primary); }
.finance-column-track i.negative { background: var(--danger); }
.finance-column-chart strong { color: var(--text); font-size: 12px; overflow-wrap: anywhere; }
.finance-column-chart small { color: var(--subtle); font-size: 12px; font-variant-numeric: tabular-nums; }
.finance-donut-layout { display: grid; grid-template-columns: 156px minmax(0, 1fr); align-items: center; gap: 16px; min-height: 230px; }
.finance-donut { display: block; width: 148px; height: 148px; overflow: visible; }
.finance-donut-track, .finance-donut-segment { fill: none; stroke-width: 14; transform: rotate(-90deg); transform-origin: 50% 50%; }
.finance-donut-track { stroke: var(--line); }
.finance-donut-segment { stroke-linecap: butt; }
.finance-donut text { fill: var(--text); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.finance-donut .finance-donut-label { fill: var(--text-sub); font-weight: 600; }
.finance-donut-legends { display: grid; align-content: center; gap: 4px; min-width: 0; }
.finance-donut-legend { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 8px; align-items: start; padding: 6px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text); text-align: left; }
.finance-donut-legend:hover, .finance-donut-legend:focus-visible { background: var(--surface-sub); }
.finance-donut-legend > i { width: 10px; height: 10px; margin-top: 3px; border-radius: 50%; }
.finance-donut-legend span { display: grid; min-width: 0; }
.finance-donut-legend strong, .finance-donut-legend small { overflow-wrap: anywhere; }
.finance-donut-legend small, .finance-empty-copy { color: var(--subtle); font-size: 12px; }
.finance-empty-copy { padding: 24px 0; }
.finance-lower-grid { align-items: stretch; }
.finance-balance-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.finance-balance-item { display: grid; align-content: start; gap: 4px; min-height: 86px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.finance-balance-item span, .finance-balance-item small { color: var(--text-sub); font-size: 12px; }
.finance-balance-item strong { color: var(--text); font-size: 14px; letter-spacing: 0; overflow-wrap: anywhere; }
@media (max-width: 1080px) {
  .finance-toolbar { grid-template-columns: 1fr 1fr; }
  .finance-date-range { grid-column: 1 / -1; justify-content: flex-start; }
  .finance-balance-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .finance-visual-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .finance-toolbar { grid-template-columns: 1fr; }
  .finance-basis, .finance-granularity { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .finance-granularity { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .finance-toolbar .segmented button { min-width: 0; padding: 8px 4px; font-size: 13px; }
  .finance-date-range { display: grid; grid-template-columns: 1fr auto 1fr; grid-column: auto; width: 100%; }
  .finance-date-range label { display: grid; gap: 3px; min-width: 0; }
  .finance-date-range input { width: 100%; min-width: 0; }
  .finance-date-range .mini { grid-column: 1 / -1; width: 100%; }
  .finance-status-strip { flex-wrap: wrap; gap: 4px 10px; }
  .finance-donut-layout { grid-template-columns: 112px minmax(0, 1fr); gap: 10px; }
  .finance-donut { width: 108px; height: 108px; }
  .finance-donut > span { width: 68px; height: 68px; }
  .finance-donut b { font-size: 14px; }
  .finance-balance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .finance-bar-track { width: 72px; }
  .finance-drill-layer .table-wrap table { min-width: 620px; }
  #financeTransactions .table-wrap { overflow: visible; border: 0; }
  #financeTransactions .table-wrap table { display: block; min-width: 0; }
  #financeTransactions thead { display: none; }
  #financeTransactions tbody { display: grid; gap: 8px; }
  #financeTransactions tr { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; padding: 11px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
  #financeTransactions td { display: grid; gap: 3px; width: auto; padding: 0; border: 0; color: var(--text); text-align: left; }
  #financeTransactions td::before { content: attr(data-label); color: var(--text-sub); font-size: 12px; font-weight: var(--weight-strong); }
  #financeTransactions td:nth-child(2) { grid-column: 1 / -1; grid-row: 1; }
  #financeTransactions td:nth-child(1) { grid-column: 1; grid-row: 2; }
  #financeTransactions td:nth-child(3) { grid-column: 2; grid-row: 2; }
#financeTransactions td:nth-child(4) { grid-column: 1 / -1; grid-row: 3; }
}

/* S7 KPI tree: targets are editable, actuals are ledger-derived. */
.kpi-tree-screen { gap: 12px; }
.kpi-snapshot-strip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kpi-snapshot-strip span { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--text-sub); font-size: 12px; }
.kpi-snapshot-strip b { color: var(--text); font-size: 12px; }
.kpi-period-toolbar { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); background: var(--surface); }
.kpi-period-toolbar label { display: flex; align-items: center; gap: 7px; color: var(--text-sub); font-size: 12px; font-weight: var(--weight-strong); }
.kpi-period-toolbar select { min-height: 38px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.kpi-period-toolbar > span { margin-left: auto; color: var(--text-sub); font-size: 12px; }
.kpi-overview-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, .8fr); gap: 12px; align-items: start; }
.kpi-overview-grid > * { min-width: 0; }
.kpi-tree-list { display: grid; gap: 7px; }
.kpi-tree-branch { display: grid; gap: 7px; }
.kpi-tree-row { display: grid; grid-template-columns: minmax(230px, 1.2fr) minmax(160px, .8fr) minmax(300px, 1.4fr); align-items: center; gap: 14px; min-height: 76px; margin-left: calc(var(--kpi-depth) * 28px); padding: 11px 12px; border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: var(--radius-md); background: var(--surface); }
.kpi-tree-panel .kpi-tree-row { grid-template-columns: minmax(170px, 1.1fr) minmax(100px, .6fr) minmax(220px, 1.2fr); }
.kpi-tree-panel .kpi-tree-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kpi-tree-row.depth-1 { border-left-color: var(--info); }
.kpi-tree-row.depth-2, .kpi-tree-row.depth-3 { border-left-color: var(--brand); }
.kpi-tree-title { display: grid; gap: 2px; min-width: 0; }
.kpi-tree-title strong { overflow: hidden; color: var(--text); font-size: 14px; letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; }
.kpi-tree-title small { color: var(--text-sub); font-size: 12px; }
.kpi-tree-title .mini { justify-self: start; width: auto; min-height: 32px; }
.kpi-row-actions { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.kpi-row-actions .mini { min-height: 32px; }
.kpi-scope { width: fit-content; padding: 2px 6px; border-radius: var(--radius-sm); background: var(--brand-soft); color: var(--brand); font-size: 12px; font-weight: var(--weight-heavy); }
.kpi-tree-progress { display: grid; grid-template-columns: minmax(70px, 1fr) 42px; align-items: center; gap: 8px; }
.kpi-tree-progress span { color: var(--text-sub); font-size: 12px; font-weight: var(--weight-heavy); text-align: right; }
.kpi-tree-values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.kpi-tree-values span { display: grid; gap: 2px; min-width: 0; color: var(--text-sub); font-size: 12px; }
.kpi-tree-values b { overflow: hidden; color: var(--text); font-size: 12px; letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; }
.kpi-gap.short b { color: var(--danger); }
.kpi-gap.clear b { color: var(--ok); }
.kpi-trend { display: flex; align-items: end; gap: 10px; min-height: 190px; padding: 16px 8px 0; border-bottom: 1px solid var(--line); }
.kpi-trend article { display: grid; flex: 1; gap: 6px; min-width: 0; text-align: center; }
.kpi-trend article > div { display: flex; align-items: end; justify-content: center; gap: 3px; height: 140px; }
.kpi-trend article i, .kpi-trend article b { display: block; width: min(14px, 40%); min-height: 4px; }
.kpi-trend article i { background: var(--brand); }
.kpi-trend article b { background: var(--info); }
.kpi-trend small { overflow: hidden; color: var(--text-sub); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.kpi-trend-legend { display: flex; gap: 16px; margin-top: 10px; color: var(--text-sub); font-size: 12px; }
.kpi-trend-legend span { display: flex; align-items: center; gap: 5px; }
.kpi-trend-legend i, .kpi-trend-legend b { width: 10px; height: 10px; }
.kpi-trend-legend i { background: var(--brand); }
.kpi-trend-legend b { background: var(--info); }
.kpi-trend-metric { display: grid; gap: 2px; margin: 0; color: var(--text); }
.kpi-trend-metric span { color: var(--text-sub); font-size: 12px; }
.member-period-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-left: 4px solid var(--brand); background: var(--brand-soft); }
.member-period-banner span { color: var(--text-sub); font-size: 12px; }
.kpi-target-form .form-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.modal-card.kpi-target-form { width: min(720px, 100%); }
.modal-card.kpi-target-form .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kpi-target-launch { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.kpi-inactive-toggle { white-space: nowrap; }
.kpi-inactive-toggle input { width: 16px; height: 16px; margin: 0; accent-color: var(--brand); }
.kpi-inactive-list { display: grid; gap: 7px; }
.kpi-inactive-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 58px; padding: 9px 11px; border: 1px solid var(--line); border-left: 4px solid var(--text-faint); border-radius: var(--radius-md); background: var(--surface-sub); }
.kpi-inactive-row > div { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 8px; min-width: 0; }
.kpi-inactive-row strong { overflow: hidden; color: var(--text); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.kpi-inactive-row small { grid-column: 2; color: var(--text-sub); font-size: 12px; overflow-wrap: anywhere; }
.member-kpi-card { display: grid; gap: 8px; min-width: 0; }
.member-kpi-card > button { justify-self: end; }
.member-kpi-goals { display: grid; gap: 5px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--brand-soft); }
.member-kpi-goals span { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.member-kpi-goals b { overflow: hidden; color: var(--text); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.member-kpi-goals small, .member-kpi-empty { margin: 0; color: var(--text-sub); font-size: 12px; }
.owner-kpi-list .kpi-tree-row { grid-template-columns: minmax(190px, 1fr) minmax(130px, .7fr) minmax(210px, 1fr); min-height: 68px; }
.owner-kpi-list .kpi-tree-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1000px) {
  .kpi-overview-grid { grid-template-columns: 1fr; }
  .kpi-tree-row, .owner-kpi-list .kpi-tree-row { grid-template-columns: 1fr 1fr; }
  .kpi-tree-values { grid-column: 1 / -1; }
  .kpi-target-form .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .owner-ranking-filters, .kpi-period-toolbar, .member-period-banner { align-items: stretch; flex-direction: column; }
  .kpi-period-toolbar > span { margin-left: 0; }
  .kpi-tree-row, .owner-kpi-list .kpi-tree-row { grid-template-columns: 1fr; gap: 9px; margin-left: calc(var(--kpi-depth) * 10px); }
  .kpi-tree-values { grid-column: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .owner-kpi-list .kpi-tree-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-target-form .form-grid { grid-template-columns: 1fr; }
  .kpi-target-launch { align-items: stretch; flex-direction: column; }
  .kpi-inactive-row { align-items: stretch; flex-direction: column; }
  .kpi-inactive-row > button { align-self: end; }
  .kpi-tree-title strong, .kpi-tree-values b { white-space: normal; overflow-wrap: anywhere; }
}

/* Re-mind fidelity polish pass 2 — collapsible sidebar + quieter controls */
.sidebar-collapse-btn {
  position: absolute;
  top: 16px;
  right: 14px;
  width: 32px;
  min-height: 32px;
  padding: 0;
  border: 1px solid var(--brand-soft);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-sub);
  box-shadow: none;
  z-index: 3;
}
.copyless-ui .top-controls > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 8px 11px;
  border-radius: var(--radius-md);
  font-size: 12px;
  color: var(--text-sub);
  background: var(--surface);
  border: 1px solid var(--rm-line);
}
.copyless-ui .top-controls:not([open]) .top-actions { display: none; }
.copyless-ui .top-controls[open] .top-actions { margin-top: 8px; padding: 10px; border: 1px solid var(--rm-line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--rm-shadow); }
.copyless-ui .select-wrap { min-height: 36px; padding: 7px 10px; border-radius: var(--radius-md); font-size: 12px; }
.copyless-ui .select-wrap select,
.copyless-ui .select-wrap input { min-height: 32px; padding: 6px 8px; font-size: 12px; }
.copyless-ui.sidebar-collapsed .sidebar { width: 76px; padding: 18px 12px; align-items: center; }
@media (min-width:1181px) {
  .copyless-ui.sidebar-collapsed .main { margin-left: 76px; width: calc(100% - 76px); max-width: calc(100dvw - 76px); }
}
.copyless-ui.sidebar-collapsed .sidebar-collapse-btn { right: 22px; }
.copyless-ui.sidebar-collapsed .refined-remind-brand { justify-content: center; margin-top: 34px; }
.copyless-ui.sidebar-collapsed .refined-remind-brand > div:last-child,
.copyless-ui.sidebar-collapsed .mission-card,
.copyless-ui.sidebar-collapsed .nav-section-title,
.copyless-ui.sidebar-collapsed .nav-section summary,
.copyless-ui.sidebar-collapsed .nav-section-head { display: none; }
.copyless-ui.sidebar-collapsed .nav-tabs { width: 100%; margin-top: 10px; }
.copyless-ui.sidebar-collapsed .nav-section-body { gap: 7px; }
.copyless-ui.sidebar-collapsed .nav-tabs button { width: 44px; height: 44px; min-height: 44px; padding: 0; grid-template-columns: 1fr; justify-items: center; border-radius: var(--radius-lg); margin: 0 auto; }
.copyless-ui.sidebar-collapsed .nav-tabs button .nav-label { display: none; }
.copyless-ui.sidebar-collapsed .nav-tabs button i { grid-column: 1; grid-row: 1; width: 22px; height: 22px; font-size: 14px; }
.copyless-ui .remind-kpi-card p,
.copyless-ui .remind-kpi-card small,
.copyless-ui .remind-filter-chip,
.copyless-ui .remind-table-actions button { font-weight: var(--weight-strong); }
.copyless-ui .remind-table-wrap th,
.copyless-ui .remind-table-wrap td { padding-top: 10px; padding-bottom: 10px; }
.copyless-ui .deadline.hot { color: var(--warn); }
.copyless-ui .remind-role-strip { box-shadow: none; }
.copyless-ui .remind-module-drawer { box-shadow: none; }
.copyless-ui .remind-bell b { min-width: 17px; height: 17px; font-size: 12px; right: -3px; top: -5px; background: var(--danger); }
.copyless-ui .remind-header-user { min-width: 118px; }
.copyless-ui .remind-logo-mark { width: 48px; height: 56px; }
.copyless-ui .remind-logo-mark svg { width: 48px; height: 56px; }
.copyless-ui .refined-remind-brand h1 { font-size: 20px; }
.copyless-ui .refined-remind-brand .eyebrow { font-size: 12px; }
.copyless-ui .cockpit-signal {
  display: grid;
  align-items: start;
  justify-content: stretch;
  justify-items: start;
  gap: 5px;
  min-height: 112px;
  padding: 12px;
  text-align: left;
}
.copyless-ui .cockpit-signal span,
.copyless-ui .cockpit-signal strong,
.copyless-ui .cockpit-signal small {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
}
.copyless-ui .cockpit-signal strong {
  font-size: 20px;
  line-height: 1.08;
}
.remind-field-app .field-topbar { gap: 14px; }
.remind-field-app .remind-field-hero h1 { font-size: 24px; line-height: 1.25; }
.remind-field-app .field-feature-strip span,
.remind-field-app .field-next-action-card button,
.remind-field-app .field-quick-actions button { text-align: center; }
.remind-field-app .ui-icon { display:inline-grid; place-items:center; width:18px; height:18px; border-radius:var(--radius-pill); background:color-mix(in srgb, var(--surface) 22%, transparent); font-size: 12px; transform: translateY(-.5px); }
.remind-field-app .field-next-action-card { background: linear-gradient(135deg,var(--brand-soft),var(--surface)); box-shadow: 0 10px 24px color-mix(in srgb, var(--brand) 8%, transparent); }
.remind-field-app .field-next-action-card button { min-height: 54px; }
.remind-field-app .remind-phone-flow { gap: 9px; }
.remind-field-app .remind-phone-flow .impact-card { min-height: 88px; border-color: var(--brand-soft); box-shadow: none; }
.remind-field-app .remind-phone-flow .impact-card.is-current { background: var(--brand-soft); border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.remind-field-app .remind-phone-flow .impact-card.is-done { background: var(--info-soft); border-color: var(--info); }
.remind-field-app .remind-phone-flow .impact-card.is-done .flow-icon { background: var(--info); color: var(--surface); }
.remind-field-app .remind-phone-flow .impact-card .eyebrow { color:var(--text-sub); font-weight: var(--weight-strong); }
.remind-field-app .remind-phone-flow .impact-card.is-current .eyebrow { color:var(--brand); }
.remind-field-app .field-card { margin-top: 12px; }
.remind-field-app .field-card .panel-head h2 { font-size: 24px; line-height:1.2; }
.remind-field-app .field-card .panel-head .eyebrow { font-size: 12px; }
.remind-field-app .field-today-strip span { min-height: 66px; padding: 10px; border-radius: var(--radius-lg); }
@media (max-width:520px) {
  .remind-field-app .remind-phone-flow .impact-card { min-height: 84px; }
  .remind-field-app .field-next-action-card { padding: 14px; }
  .remind-field-app .field-card .panel-head { gap: 8px; }
}

/* Re-mind fidelity polish pass 3 — flatter web chrome + non-emoji mobile icon system */
.copyless-ui .sidebar-collapse-btn { color:var(--brand); border-color:var(--brand); background:var(--brand-soft); font-size: 14px; }
.copyless-ui .nav-tabs button.active { background: color-mix(in srgb, var(--brand-soft) 68%, transparent); box-shadow: inset 2px 0 0 var(--brand); }
.copyless-ui .remind-role-strip,
.copyless-ui .remind-module-drawer { border-color: transparent; background: transparent; padding-left: 0; padding-right: 0; }
.copyless-ui .remind-role-strip { padding-top: 2px; padding-bottom: 2px; }
.copyless-ui .remind-role-strip em { background:var(--brand-soft); }
.copyless-ui .remind-module-drawer > summary { min-height: 32px; padding:0; }
.copyless-ui .remind-module-row { padding: 0 0 8px; }
.copyless-ui .remind-module { background:var(--surface); }
.copyless-ui .remind-ledger-panel,
.copyless-ui .remind-widget,
.copyless-ui .remind-kpi-card { box-shadow: 0 7px 18px color-mix(in srgb, var(--text) 4%, transparent); }
.copyless-ui .remind-widget-grid { gap: 10px; }
.copyless-ui .remind-table-actions button,
.copyless-ui .remind-widget header button,
.copyless-ui .remind-widget header select { line-height: 1; }
.remind-field-app .field-feature-strip span { display:flex; align-items:center; justify-content:center; gap:7px; }
.remind-field-app .field-feature-strip i,
.remind-field-app .flow-icon {
  display:inline-grid;
  place-items:center;
  width:20px;
  height:20px;
  border-radius:var(--radius-pill);
  background:var(--brand-soft);
  color:var(--brand);
  font-style:normal;
  font-size: 12px;
  font-weight: var(--weight-strong);
  line-height:1;
}
.remind-field-app .flow-icon { margin:0 auto 3px; }
.remind-field-app .remind-phone-flow .impact-card.is-current .flow-icon { background:var(--brand); color:var(--surface); }
.remind-field-app .field-feature-strip span { min-height: 50px; }
.remind-field-app .remind-phone-flow .impact-card { min-height: 80px; grid-template-rows: 14px 1fr; }
.remind-field-app .remind-phone-flow .impact-card strong { font-size: 13px; }
.remind-field-app .field-next-action-card h2 { font-size: 24px; }
.remind-field-app .field-next-action-card span { font-size: 13px; }
.remind-field-app .field-card .panel-head h2 { font-size: 24px; }
.remind-field-app .field-today-strip span { min-height: 58px; }

/* Honest readiness + responsive UI audit pass */
.badge.warning,
.badge.warn {
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 24%, transparent);
}
.master-readiness-card[data-master-plan-status="attention"],
.readiness-runtime-card {
  border-color: color-mix(in srgb, var(--warn) 24%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--warn-soft) 92%, transparent), color-mix(in srgb, var(--surface) 96%, transparent));
}
.master-readiness-card[data-master-plan-status="achieved"] {
  border-color: color-mix(in srgb, var(--ok) 24%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--ok-soft) 92%, transparent), color-mix(in srgb, var(--surface) 96%, transparent));
}
.nav-tabs .nav-launch-card,
.copyless-ui .nav-tabs .nav-launch-card {
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--text);
  background: var(--surface);
  padding: 11px 12px;
  border-radius: var(--radius-lg);
  text-align: left;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  align-items: center;
  gap: 9px;
  transition: 150ms ease;
  width: 100%;
  min-height: 76px;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--text) 4%, transparent);
}
.nav-tabs .nav-launch-card:hover,
.nav-tabs .nav-launch-card:focus-visible {
  color: var(--text);
  background: var(--brand-soft);
  border-color: color-mix(in srgb, var(--brand) 34%, transparent);
  transform: translateY(-1px);
  box-shadow: 0 14px 28px color-mix(in srgb, var(--brand) 12%, transparent);
}
.nav-tabs .nav-launch-card.active {
  color: var(--text);
  border-color: color-mix(in srgb, var(--brand) 62%, transparent);
  background: linear-gradient(135deg, var(--brand-soft), color-mix(in srgb, var(--ok-soft) 94%, transparent));
  box-shadow: 0 14px 30px color-mix(in srgb, var(--brand) 16%, transparent), inset 5px 0 0 var(--blue);
}
.nav-tabs .nav-launch-card .nav-label { min-width: 0; display: grid; gap: 4px; }
.nav-tabs .nav-launch-card .nav-label strong {
  color: var(--text);
  font-size: 16px;
  font-weight: var(--weight-strong);
  line-height: 1.18;
  letter-spacing: 0;
  word-break: keep-all;
}
.nav-tabs .nav-launch-card .nav-label em {
  color: var(--brand);
  font-style: normal;
  font-size: 12px;
  font-weight: var(--weight-strong);
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--brand) 9%, transparent);
}
.nav-tabs .nav-launch-card small.nav-role {
  grid-column: 1;
  justify-self: start;
  color: var(--text-sub);
  min-width: 0;
  text-align: left;
  line-height: 1.25;
  font-size: 12px;
  font-weight: var(--weight-strong);
  word-break: keep-all;
  white-space: normal;
}
.nav-tabs .nav-launch-card i {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-pill);
  background: var(--text);
  color: var(--surface);
  font-style: normal;
  font-weight: var(--weight-strong);
  transition: 150ms ease;
}
.nav-tabs .nav-launch-card:hover i,
.nav-tabs .nav-launch-card.active i { transform: translateX(2px); background: var(--blue); }
.copyless-ui .nav-tabs .nav-launch-card {
  min-height: 39px;
  grid-template-columns: minmax(0, 1fr) 18px;
  gap: 6px;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  box-shadow: none;
  color: var(--text-sub);
}
.copyless-ui .nav-tabs .nav-launch-card:hover { transform: none; box-shadow: none; background: var(--brand-soft); border-color: transparent; }
.copyless-ui .nav-tabs .nav-launch-card.active { background: var(--brand-soft); box-shadow: inset 3px 0 0 var(--brand); border-color: transparent; color: var(--brand); }
.copyless-ui .nav-tabs .nav-launch-card .nav-label { gap: 0; }
.copyless-ui .nav-tabs .nav-launch-card .nav-label strong { font-size: 13px; font-weight: var(--weight-strong); line-height: 1.1; }
.copyless-ui .nav-tabs .nav-launch-card .nav-label em,
.copyless-ui .nav-tabs .nav-launch-card small.nav-role { display: none; }
.copyless-ui .nav-tabs .nav-launch-card i {
  width: 18px;
  height: 18px;
  background: transparent;
  color: var(--text-sub);
  font-size: 12px;
  transform: none !important;
}
.copyless-ui .nav-tabs .nav-launch-card.active i { color: var(--brand); background: transparent; }
.copyless-ui.sidebar-collapsed .nav-tabs .nav-launch-card {
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  grid-template-columns: 1fr;
  justify-items: center;
  border-radius: var(--radius-lg);
  margin: 0 auto;
}
.copyless-ui.sidebar-collapsed .nav-tabs .nav-launch-card .nav-label { display: none; }
.copyless-ui.sidebar-collapsed .nav-tabs .nav-launch-card i { grid-column: 1; grid-row: 1; width: 22px; height: 22px; font-size: 14px; }

.nav-audit-link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  margin-top: 8px;
  padding: 0 10px;
  color: var(--text-sub);
  font-size: 12px;
  font-weight: var(--weight-strong);
}

.automation-center {
  border-color: color-mix(in srgb, var(--info) 26%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, transparent), color-mix(in srgb, var(--surface) 96%, transparent));
}

.automation-center .table-wrap h4 {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.3;
}

.automation-center table th,
.automation-center table td {
  vertical-align: top;
}

.automation-center .manager-queue-list {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: color-mix(in srgb, var(--text) 42%, transparent);
}
.modal-card {
  width: min(520px, 100%);
  max-height: calc(100vh - 40px);
  overflow: auto;
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel);
  box-shadow: var(--shadow);
}
.modal-card header,
.modal-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.modal-card label {
  display: grid;
  gap: 6px;
  font-weight: var(--weight-strong);
}
.modal-card input,
.modal-card select,
.modal-card textarea {
  min-width: 0;
  width: 100%;
}
.modal-card.user-admin-modal {
  width: min(1080px, calc(100vw - 40px));
}
.user-admin-modal [data-user-admin-modal-body],
.user-admin-modal .user-admin-panel {
  min-width: 0;
}
.user-admin-panel .ledger-add-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: center;
}
.user-admin-panel .ledger-add-row > button,
.user-admin-panel .ledger-add-row > span {
  min-height: 40px;
}
@media (max-width: 720px) {
  .modal-backdrop { padding: 12px; }
  .modal-card.user-admin-modal { width: calc(100vw - 24px); max-height: calc(100vh - 24px); padding: 14px; }
  .user-admin-panel .ledger-add-row { grid-template-columns: 1fr; }
  .user-admin-panel .ledger-add-row input,
  .user-admin-panel .ledger-add-row select,
  .user-admin-panel .ledger-add-row button { min-height: 44px; }
}
.icon-button {
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.mobile-search-toggle,
.mobile-conditions-toggle { display:none; }
.form-result {
  min-height: 20px;
  color: var(--muted);
}
.field-empty-state {
  padding: 18px;
  border: 1px dashed color-mix(in srgb, var(--brand) 26%, transparent);
  border-radius: var(--radius-lg);
  background: var(--brand-soft);
  color: var(--text-sub);
}
.field-empty-state strong { display: block; color: var(--text); font-size: 14px; line-height: 1.35; }
.field-empty-state p { margin: 6px 0 0; font-size: 13px; line-height: 1.55; }

/* UX-4..6, UX-15..20, UX-23: shared interaction and layout primitives. */
.table-sort {
  min-height: 36px;
  padding: var(--space-1) var(--space-2);
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  white-space: nowrap;
}
.table-sort:hover,
.table-sort:focus-visible { color: var(--primary); background: var(--brand-soft); }
[data-keyboard-action-row] { outline: none; }
[data-keyboard-action-row].keyboard-current,
[data-keyboard-action-row]:focus { box-shadow: inset 4px 0 0 var(--primary); background: var(--brand-soft); }
.tab-panel.tab-loading::before {
  content: "読み込んでいます";
  position: sticky;
  top: var(--space-2);
  z-index: 80;
  justify-self: center;
  padding: var(--space-2) var(--space-4) var(--space-2) 38px;
  border: 1px solid var(--brand);
  border-radius: var(--radius-md);
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: var(--weight-strong);
  box-shadow: var(--shadow);
}
.tab-panel.tab-loading::after {
  content: "";
  position: fixed;
  top: 22px;
  left: 50%;
  z-index: 81;
  width: 16px;
  height: 16px;
  border: 2px solid var(--brand);
  border-top-color: var(--primary);
  border-radius: var(--radius-pill);
  animation: ux-spin .7s linear infinite;
}
.tab-panel.tab-loading { cursor: wait; }
.tab-panel.tab-loading > * { pointer-events: none; }
@keyframes ux-spin { to { transform: rotate(360deg); } }
button:disabled,
.primary:disabled,
.secondary:disabled { cursor: not-allowed; opacity: .55; box-shadow: none; transform: none; }
.primary:hover:not(:disabled) { filter: brightness(.96); transform: translateY(-1px); }
.toast { display:flex; align-items:center; gap:var(--space-3); pointer-events:none; }
.toast.error { border: 1px solid var(--danger); background: var(--danger-soft); color: var(--danger); }
.toast.success { border: 1px solid var(--ok); background: var(--ok-soft); color: var(--ok); }
.toast:has(.toast-action) { pointer-events:auto; }
.toast-action { min-height:36px; padding:var(--space-1) var(--space-3); border:1px solid var(--surface); border-radius:var(--radius-md); background:var(--surface); color:var(--text); font-weight:var(--weight-strong); }

.field-photo-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.field-photo-slot { position: relative; min-height: 132px; margin: 0; overflow: hidden; border: 1px dashed var(--line); border-radius: var(--radius-ctl); background: var(--surface-sub); }
.field-photo-slot img { display: block; width: 100%; height: 132px; object-fit: cover; }
.field-photo-slot figcaption { position: absolute; left: var(--space-2); bottom: var(--space-2); padding: 4px 8px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--text) 78%, transparent); color: var(--surface); font-size: 12px; font-weight: 600; }
.field-photo-empty { min-height: 132px; display: grid; place-items: center; padding: var(--space-3); color: var(--text-sub); text-align: center; }
.field-complete-banner { padding: var(--space-4); border: 1px solid var(--ok); border-radius: var(--radius-ctl); background: var(--ok-soft); color: var(--ok); }
.field-project-instructions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-4); }
.field-project-instructions > section { min-width: 0; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-ctl); background: var(--surface-sub); }
.field-project-instructions article { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--line); }
.field-project-instructions p { margin: var(--space-1) 0; color: var(--text-sub); }
.field-project-instructions small { color: var(--text-faint); }
@media (max-width: 768px) { .field-project-instructions { grid-template-columns: 1fr; } }

@media print {
  :root { color-scheme: light; }
  body, .copyless-ui, .main { background: var(--surface) !important; color: var(--text) !important; }
  .sidebar, .topbar, .toast, .field-sticky-action-rail, .mobile-search-toggle, .remind-table-actions, button, .ambient { display: none !important; }
  .main, .copyless-ui .main { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
  .panel, .metric-card, .remind-kpi-card, .remind-ledger-panel, .remind-widget { break-inside: avoid; border: 1px solid var(--line) !important; box-shadow: none !important; background: var(--surface) !important; }
  .tab-panel { display: none !important; }
  .tab-panel.active { display: block !important; }
  a { color: var(--text) !important; text-decoration: none !important; }
}

@media (max-width: 768px) {
  .main,
  .copyless-ui .main { max-width: 100%; margin: 0; padding-bottom: 104px; }
  .sidebar {
    position: fixed;
    inset: auto 0 0;
    z-index: 900;
    height: auto;
    min-height: 72px;
    padding: var(--space-2);
    border-top: 1px solid var(--line);
    background: var(--surface);
    box-shadow: 0 -8px 28px color-mix(in srgb, var(--text) 12%, transparent);
  }
  .copyless-ui .sidebar .sidebar-collapse-btn { display: none !important; }
  .sidebar > .brand,
  .sidebar > .mission-card,
  .sidebar > .sidebar-card,
  .nav-section-head,
  .stakeholder-nav-section { display: none !important; }
  .nav-tabs,
  .role-focused-nav,
  .role-focused-nav .nav-section-body { display: flex; align-items: stretch; gap: var(--space-1); }
  .nav-tabs { position: static; width:100%; overflow-x:auto; padding:0; }
  .role-focused-nav { min-width:100%; padding:0; border:0; background:transparent; }
  .role-focused-nav .nav-section-body { width:100%; }
  .nav-tabs button {
    flex: 1 0 74px;
    min-width: 74px;
    min-height: 58px;
    padding: var(--space-2);
    grid-template-columns: 1fr;
    place-items:center;
    text-align:center;
    box-shadow:none;
  }
  .nav-tabs button i,
  .nav-tabs button small.nav-role,
  .nav-tabs button .nav-label em { display:none; }
  .nav-tabs button.nav-launch-card .nav-label strong { font-size: 12px; }
}

@media (max-width: 768px) {
  .main,
  .copyless-ui .main { padding-top: var(--space-3); padding-bottom: 92px; }
  .topbar { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--space-2); margin-bottom:var(--space-2); }
  .remind-header-actions { grid-column:2; grid-row:1; }
  .remind-header-actions #exportBtn,
  .remind-header-actions .view-as-control,
  .remind-header-user small { display:none; }
  .mobile-search-toggle { display:inline-grid; }
  .remind-searchbar { display:none; grid-column:1 / -1; grid-row:2; }
  .mobile-search-open .remind-searchbar { display:flex; }
  .top-controls { grid-column:1 / -1; }
  .role-focused-nav .nav-section-body { gap:2px; }
  .nav-tabs button { flex:1 1 0; min-width:58px; min-height:56px; padding-inline:4px; }
  .nav-tabs button.nav-launch-card .nav-label strong { font-size: 12px; line-height:1.15; white-space:normal; }
  .main button, .main input, .main select, .main textarea, .main a.secondary, .main a.primary,
  .remind-field-app button, .remind-field-app input, .remind-field-app select { min-height: 44px; }
  .remind-table-wrap { overflow: visible; }
  .remind-table-wrap table, .remind-table-wrap tbody { display: block; min-width: 0; width: 100%; }
  .remind-table-wrap thead { display: none; }
  .remind-table-wrap tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin-bottom: var(--space-3); padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-card); }
  .remind-table-wrap td { display: grid; gap: 3px; min-width: 0; padding: 0; border: 0; overflow-wrap: anywhere; }
  .remind-table-wrap td::before { content: attr(data-label); color: var(--text-faint); font-size: 12px; font-weight: 600; }
  .remind-table-wrap td:first-child, .remind-table-wrap td:nth-child(6) { grid-column: 1 / -1; }
}
.remind-field-app button:disabled,
.field-no-assignment .field-sticky-action-rail button {
  cursor: not-allowed;
  opacity: .56;
  box-shadow: none;
}
.remind-field-app,
.remind-field-app h1,
.remind-field-app h2,
.remind-field-app h3,
.remind-field-app strong,
.copyless-ui h1,
.copyless-ui h2,
.copyless-ui h3,
.copyless-ui strong { letter-spacing: 0; }
@media (max-width: 920px) {
  .copyless-ui .remind-header-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
  .copyless-ui .remind-header-actions > * { min-width: 0; }
  .copyless-ui .remind-searchbar { min-width: 0; }
  .copyless-ui .top-controls[open] .top-actions { display: grid; grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .copyless-ui .main { padding-left: 12px; padding-right: 12px; }
  .copyless-ui .remind-topbar { grid-template-columns: 1fr; gap: 10px; align-items: stretch; overflow: hidden; }
  .copyless-ui .remind-searchbar { width: 100%; max-width: 100%; min-width: 0; }
  .copyless-ui .remind-header-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }
  .copyless-ui .remind-header-actions .primary,
  .copyless-ui .remind-header-actions .secondary {
    width: 100%;
    min-width: 0;
    padding: 8px 6px;
    font-size: 12px;
    line-height: 1.15;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .copyless-ui .remind-header-user {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
  }
  .copyless-ui .cockpit-signal { min-height: 120px; }
  .copyless-ui .cockpit-signal strong { font-size: 16px; }
  .remind-field-app { padding-bottom: 96px; }
  .remind-field-app .field-shell { padding-left: 10px; padding-right: 10px; }
  .remind-field-app .field-sticky-action-rail { left: 8px; right: 8px; gap: 6px; padding: 8px; }
  .remind-field-app .field-sticky-action-rail button { min-height: 56px; font-size: 13px; padding: 8px 4px; }
  .remind-field-app .field-quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .remind-field-app .field-next-action-card h2,
  .remind-field-app .field-card .panel-head h2,
  .remind-field-app .remind-field-hero h1 { font-size: 20px; }
  .remind-field-app .field-feature-strip span { font-size: 12px; }
}

/* Mobile cockpit legibility guard: keep the first viewport readable and bounded. */
@media (max-width: 520px) {
  .copyless-ui {
    background: var(--brand-soft);
  }
  .copyless-ui::before,
  .copyless-ui .ambient {
    display: none;
  }
  .copyless-ui .main {
    max-width: 100dvw;
    overflow-x: hidden;
    position: relative;
    z-index: 3;
    background: var(--brand-soft);
  }
  .copyless-ui .topbar,
  .copyless-ui .remind-topbar {
    position: relative;
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0 0 12px;
  }
  .copyless-ui .remind-searchbar,
  .copyless-ui .remind-header-actions,
  .copyless-ui .remind-header-user {
    box-sizing: border-box;
    max-width: 100%;
  }
  .copyless-ui .remind-header-actions {
    grid-template-columns: repeat(4, 44px);
    justify-content: end;
  }
  .copyless-ui .remind-header-user {
    grid-column: auto;
    display: grid;
    place-items: center;
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 3px;
  }
  .copyless-ui .remind-header-user span {
    grid-row: auto;
    width: 36px;
    height: 36px;
  }
  .copyless-ui .remind-header-user strong,
  .copyless-ui .remind-header-user small { display: none; }
  .copyless-ui .remind-header-actions > .secondary,
  .copyless-ui .remind-header-actions > .primary {
    min-height: 44px;
  }
  .copyless-ui .tab-panel.active {
    gap: 12px;
  }
  .copyless-ui .tab-panel,
  .copyless-ui .integrated-subview,
  .copyless-ui .stacked-system,
  .copyless-ui .remind-dashboard-shell,
  .copyless-ui .remind-dashboard-shell > * {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  .copyless-ui .remind-table-wrap {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
  }
  .copyless-ui .remind-role-strip {
    align-items: flex-start;
    flex-direction: column;
  }
  .copyless-ui .remind-role-strip em { align-self: flex-start; }
  .copyless-ui .hero-card,
  .copyless-ui .risk-card,
  .copyless-ui .panel,
  .copyless-ui .project-operating-cockpit {
    position: relative;
    z-index: 4;
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--text) 7%, transparent);
    opacity: 1;
    backdrop-filter: none;
  }
  .copyless-ui .hero-card {
    min-height: 0;
    padding: 18px;
  }
  .copyless-ui .hero-card::after {
    display: none;
  }
  .copyless-ui .hero-copy,
  .copyless-ui .hero-copy * {
    opacity: 1;
  }
  .copyless-ui .eyebrow {
    color: var(--brand);
  }
  .copyless-ui .hero-card h3,
  .copyless-ui .risk-card h3,
  .copyless-ui .panel h3,
  .copyless-ui .project-operating-cockpit h3 {
    color: var(--text);
  }
  .copyless-ui .hero-card p,
  .copyless-ui .risk-card p,
  .copyless-ui .panel p,
  .copyless-ui .project-operating-cockpit small {
    color: var(--text-sub);
  }
  .copyless-ui .project-operating-cockpit {
    padding: 12px;
    border-radius: var(--radius-lg);
  }
  .copyless-ui .cockpit-main-card h3 {
    font-size: 16px;
    line-height: 1.28;
  }
  .copyless-ui .cockpit-main-card .inline-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .copyless-ui .cockpit-main-card .inline-actions a {
    width: 100%;
    min-width: 0;
    justify-content: center;
    white-space: normal;
  }
  .copyless-ui .cockpit-signal-grid {
    grid-template-columns: 1fr;
  }
  .copyless-ui .cockpit-signal {
    min-height: 86px;
    background: var(--surface);
    border-color: var(--line);
  }
  .copyless-ui .cockpit-signal span {
    color: var(--text-sub);
  }
  .copyless-ui .cockpit-signal strong {
    color: var(--text);
    font-size: 20px;
  }
  .copyless-ui .cockpit-signal small {
    color: var(--text-sub);
  }
}

.supervisor-page-nav { position: sticky; top: 64px; z-index: 8; display: flex; gap: 4px; overflow-x: auto; padding: 8px; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(10px); }
.supervisor-page-nav a { min-width: 72px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--text); font-weight: 600; text-decoration: none; }
.supervisor-correction-list, .inspection-history { display: grid; gap: 8px; }
.supervisor-correction, .inspection-history-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.supervisor-correction p, .inspection-history-row p { margin: 4px 0; }
.supervisor-correction.status-resubmitted { border-left: 3px solid var(--danger); padding-left: 12px; }
.supervisor-inspection-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, .8fr); gap: 24px; align-items: start; }
.supervisor-inspection-form, .inspection-template-create form { display: grid; gap: 14px; }
.inspection-checklist { display: grid; gap: 8px; }
.inspection-check-row { display: grid; grid-template-columns: minmax(120px, .35fr) minmax(180px, 1fr); gap: 10px; margin: 0; padding: 12px; border: 1px solid var(--line); }
.inspection-check-row legend { padding: 0 6px; font-weight: 600; }
.inspection-check-row p, .inspection-check-row small { grid-column: 1 / -1; margin: 0; }
.inspection-template-create { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 12px; }
.inspection-template-create summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; }
.supervisor-self { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 20px; }
.supervisor-self > strong { font-size: 24px; }
.supervisor-takeoff { display: grid; gap: 18px; }
.takeoff-new summary { min-height: 44px; display: flex; align-items: center; color: var(--primary); font-weight: 600; cursor: pointer; }
.compact-form { display: grid; gap: 10px; }
.takeoff-current { display: grid; gap: 18px; }
.takeoff-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.takeoff-toolbar label { min-width: min(420px, 100%); }
.takeoff-grid, .takeoff-support-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.takeoff-grid > section, .takeoff-support-grid > section { min-width: 0; padding-block: 4px; }
.takeoff-room-list, .takeoff-line-list, .takeoff-support-grid section { display: grid; gap: 8px; }
.takeoff-room-list article, .takeoff-line, .takeoff-support-grid article { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; padding: 10px 0; border-bottom: 1px solid var(--line); }
.takeoff-room-list article span, .takeoff-line p, .takeoff-line small, .takeoff-support-grid small { display: block; color: var(--muted); }
.takeoff-line.status-proposed { border-left: 3px solid var(--warn); padding-left: 12px; }
.takeoff-estimate-action { display: grid; grid-template-columns: minmax(180px, .45fr) auto minmax(220px, 1fr); align-items: end; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.takeoff-estimate-action span { color: var(--muted); font-size: 13px; }

@media (max-width: 760px) {
  .supervisor-page-nav { top: 52px; }
  .supervisor-inspection-layout, .supervisor-self { grid-template-columns: 1fr; }
  .takeoff-grid, .takeoff-support-grid, .takeoff-estimate-action { grid-template-columns: 1fr; }
  .takeoff-toolbar, .takeoff-room-list article, .takeoff-line, .takeoff-support-grid article { align-items: stretch; flex-direction: column; }
  .inspection-check-row { grid-template-columns: 1fr; }
  .supervisor-correction, .inspection-history-row { grid-template-columns: minmax(0, 1fr); }
  .supervisor-correction .secondary, .supervisor-self .secondary { width: 100%; }
  body[data-role="field_supervisor"] [data-tab="field"],
  body[data-role="field_supervisor"] [data-tab="field"] > .panel,
  body[data-role="field_supervisor"] #fieldMobile,
  body[data-role="field_supervisor"] #fieldMobile > * { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
  body[data-role="field_supervisor"] #fieldMobile .role-completion-banner > * { min-width: 0; max-width: 100%; }
  body[data-role="field_supervisor"] #fieldMobile .role-completion-banner span { display: block; white-space: normal; overflow-wrap: anywhere; }
  body[data-role="field_supervisor"] #fieldMobile select,
  body[data-role="field_supervisor"] #fieldMobile input,
  body[data-role="field_supervisor"] #fieldMobile textarea { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
  body[data-role="field_supervisor"] #fieldMobile button,
  body[data-role="field_supervisor"] #fieldMobile a,
  body[data-role="field_supervisor"] #fieldMobile select,
  body[data-role="field_supervisor"] #fieldMobile input,
  body[data-role="field_supervisor"] #fieldMobile summary,
  body[data-role="field_supervisor"] .remind-header-actions button,
  body[data-role="field_supervisor"] .nav-tabs a { min-height: 44px; }
  body[data-role="field_supervisor"] #fieldMobile a { display: inline-flex; align-items: center; }
}

/* Keep owner tiles isolated from the generic compact button treatment below 80px. */
.copyless-ui .owner-dashboard-tile {
  display: grid;
  grid-template-rows: auto auto 42px auto;
  align-items: stretch;
  justify-content: stretch;
  min-height: 160px;
  padding: 14px;
  border-radius: var(--radius-md);
  text-align: left;
}
.copyless-ui .owner-dashboard-tile > span {
  display: block;
  min-width: 0;
  padding-right: 34px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.copyless-ui .owner-dashboard-tile > strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.copyless-ui .owner-dashboard-tile > small { display: block; min-width: 0; }
.copyless-ui .owner-dashboard-tile .owner-mini-bars { display: flex; }
@media (max-width: 620px) {
  .copyless-ui .owner-dashboard-tile { min-height: 150px; }
}

/* S5 shared page context and detail navigation. */
.copyless-ui .active-tab-guide {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface) 97%, transparent);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--text) 7%, transparent);
}
.page-purpose { display: grid; gap: 3px; min-width: 0; }
.page-purpose h2 { margin: 0; color: var(--text); font-size: 20px; line-height: 1.25; letter-spacing: 0; }
.page-purpose p { margin: 0; color: var(--text-sub); font-size: 12px; line-height: 1.45; }
.page-context-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-width: 0; }
.page-back { min-height: 38px; white-space: nowrap; }
.page-breadcrumb { display: flex; align-items: center; justify-content: flex-end; gap: 7px; min-width: 0; color: var(--text-sub); font-size: 12px; }
.page-breadcrumb a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--brand); text-decoration: none; }
.page-breadcrumb strong { overflow: hidden; max-width: 240px; color: var(--text-sub); text-overflow: ellipsis; white-space: nowrap; }
.info-tooltip { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--brand); border-radius: 50%; background: var(--brand-soft); color: var(--brand); font-size: 12px; font-weight: var(--weight-heavy); cursor: help; }
.status-line { color: var(--text-sub); font-size: 12px; }
@media (max-width: 620px) {
  .copyless-ui .active-tab-guide { align-items: flex-start; flex-direction: column; gap: 8px; }
  .copyless-ui[data-detail-view="true"] .active-tab-guide { inset: auto; }
  .copyless-ui[data-detail-view="true"] .tab-panel.active [id] { scroll-margin-top: 142px; }
  .page-context-actions { display: grid; grid-template-columns: auto minmax(0, 1fr); width: 100%; justify-content: stretch; }
  .page-breadcrumb { min-width: 0; justify-content: flex-start; flex-wrap: nowrap; overflow: hidden; }
  .page-breadcrumb a:first-child, .page-breadcrumb a:first-child + span { display: none; }
  .page-breadcrumb a, .page-breadcrumb strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .page-breadcrumb a { min-width: 44px; }
}
.mf-connector-banner {
  margin-bottom: 12px;
}

.mf-confirm-controls {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) auto;
  gap: 8px;
  min-width: 260px;
}

.mf-confirm-controls input,
.mf-import-form textarea {
  width: 100%;
  min-width: 0;
}

.mf-import-rows {
  grid-column: 1 / -1;
}

.mf-responsibility .two-col {
  align-items: stretch;
}

.mf-responsibility .two-col > div {
  border-left: 3px solid var(--primary, var(--brand));
  padding: 10px 12px;
  background: var(--surface-soft, var(--brand-soft));
}

@media (max-width: 560px) {
  .pricebook-workspace > header, .pricebook-layout, .pricebook-estimate-form { display: grid; grid-template-columns: 1fr; }
  .pricebook-form { grid-template-columns: 1fr; width: 100%; }
  .pricebook-reason { grid-column: auto; }
  .pricebook-estimate-line { grid-template-columns: minmax(0, 1fr) 76px 36px; }
  .construction-breakdown-fields, .construction-rate-grid, .construction-estimate-sheet dl, .construction-sheet-columns { grid-template-columns: minmax(0, 1fr); }
  .construction-estimate-modal { width: calc(100vw - 24px); max-height: calc(100vh - 24px); }
  .construction-estimate-sheet > header { align-items: flex-start; flex-direction: column; padding-right: 40px; }
  .construction-estimate-sheet > header > strong { font-size: 20px; }
  .pricebook-layout aside { border-top: 3px solid var(--info); border-left: 0; }
  .similar-estimates > div:last-child { grid-template-columns: 1fr; }
  .mf-confirm-controls {
    grid-template-columns: 1fr;
    min-width: 200px;
  }

  .mf-import-form .form-grid,
  .mf-responsibility .two-col {
    grid-template-columns: 1fr;
  }

  .mf-approval-list .table-wrap {
    overflow: visible;
  }

  .mf-approval-table,
  .mf-approval-table tbody,
  .mf-approval-table tr,
  .mf-approval-table td {
    display: block;
    width: 100%;
  }

  .mf-approval-list table.mf-approval-table {
    min-width: 0;
    table-layout: auto;
  }

  .mf-approval-table thead {
    display: none;
  }

  .mf-approval-table tr {
    border: 1px solid var(--border, var(--line));
    border-radius: var(--radius-md);
    margin-bottom: 10px;
    padding: 8px 10px;
  }

  .mf-approval-table td {
    border: 0;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 8px;
    padding: 7px 0;
    white-space: normal;
  }

  .mf-approval-table td::before {
    color: var(--muted, var(--text-faint));
    content: attr(data-label);
    font-size: 12px;
    font-weight: var(--weight-strong);
  }

  .mf-approval-table .inline-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    margin-top: 0;
    min-width: 0;
    width: 100%;
  }

  .mf-approval-table .inline-actions .mini {
    min-width: 0;
    width: 100%;
  }
}

@media print {
  body:has(#constructionEstimateModal) > *:not(#constructionEstimateModal) { display: none !important; }
  #constructionEstimateModal { position: static; display: block; padding: 0; background: var(--surface); }
  #constructionEstimateModal .construction-estimate-modal { width: 100%; max-height: none; overflow: visible; border: 0; box-shadow: none; }
  #constructionEstimateModal .icon-button, #constructionEstimateModal footer { display: none !important; }
}

.automation-review { border-top: 3px solid var(--brand); }
.automation-safety { display: flex; gap: 12px; align-items: center; margin: 10px 0 14px; padding: 10px 12px; border: 1px solid var(--brand); background: var(--brand-soft); color: var(--text-sub); border-radius: var(--radius-sm); }
.automation-safety strong { flex: 0 0 auto; color: var(--brand); }
.automation-artifacts { display: grid; gap: 8px; margin-top: 12px; }
.automation-artifact { border: 1px solid var(--border, var(--line)); border-radius: var(--radius-sm); background: var(--surface); }
.automation-artifact summary { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; cursor: pointer; }
.automation-artifact pre { max-height: 320px; margin: 0; padding: 12px; overflow: auto; border-top: 1px solid var(--border, var(--line)); background: var(--brand-soft); white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
.automation-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; color: var(--muted, var(--text-faint)); }

.notification-card {
  align-items: center;
  border-radius: var(--radius-md);
  grid-template-columns: minmax(0, 1fr) minmax(220px, auto);
}
.notification-copy { min-width: 0; }
.notification-copy strong { flex-wrap: wrap; justify-content: flex-start; }
.notification-copy p, .notification-copy small { overflow-wrap: anywhere; }
.notification-inline-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; min-width: 0; }
.notification-inline-actions .mini { min-height: 40px; }
.inbox-decision { display: grid; gap: 6px; min-width: 240px; }
.inbox-decision input, .inbox-stage-label select { box-sizing: border-box; min-width: 0; width: 100%; }
.inbox-stage-label { color: var(--muted); display: grid; font-size: 12px; font-weight: var(--weight-strong); gap: 4px; min-width: 160px; }
.sales-activity-actions { display: grid; gap: 6px; grid-template-columns: repeat(3, minmax(44px, 1fr)); min-width: 144px; }
.sales-activity-actions .mini { box-sizing: border-box; width: 100%; min-height: 44px; min-width: 0; padding: 7px 9px; line-height: 1.25; overflow-wrap: anywhere; white-space: normal; }
.sales-row-actions { align-items: center; display: grid; gap: 7px; min-width: 330px; }
.sales-row-actions > .primary { width: 100%; }
.sales-landing-task { align-items: center; display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.sales-landing-task > a { align-items: center; color: var(--text); display: flex; gap: 10px; min-width: 0; text-decoration: none; }
.sales-landing-task > a > span { display: grid; flex: 1; gap: 3px; min-width: 0; }
.sales-landing-task > a strong, .sales-landing-task > a small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sales-landing-task > a small { color: var(--muted); }
.sales-landing-task .sales-activity-actions { width: 318px; }
.sales-next-contact-field { color: var(--muted); display: grid; font-size: 12px; font-weight: var(--weight-strong); gap: 4px; }
.opportunity-activity-modal form { display: grid; gap: 14px; }
.opportunity-activity-modal header p { color: var(--muted); margin: 4px 0 0; }
.opportunity-activity-modal textarea { min-height: 96px; resize: vertical; }
.opportunity-activity-modal button[type="submit"] { min-height: 46px; width: 100%; }
.activity-modal-rule { background: var(--surface); border-left: 3px solid var(--brand); color: var(--muted); margin: 0; padding: 10px 12px; }

@media (min-width: 561px) {
  .sales-activity-actions.compact { width: 318px; min-width: 318px; }
  .sales-activity-actions.compact .mini { overflow-wrap: normal; white-space: nowrap; }
}
.vendor-bill-intake { background: var(--brand-soft); border: 1px solid var(--line); border-left: 3px solid var(--info); border-radius: var(--radius-md); display: grid; gap: 12px; margin-bottom: 14px; min-width: 0; padding: 14px; }
.vendor-bill-intake .caption { margin: 0; }
.vendor-bill-summary { display: flex; flex-wrap: wrap; gap: 8px; }
.vendor-bill-summary span { background: var(--surface-sub); border-radius: var(--radius-sm); color: var(--muted); font-size: 12px; padding: 7px 9px; }
.vendor-bill-summary b { color: var(--text); margin-left: 4px; }
.vendor-bill-upload { align-items: end; background: var(--info-soft); border: 1px dashed var(--info); border-radius: var(--radius-md); display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr) auto minmax(100px, auto); padding: 12px; }
.vendor-bill-upload label { color: var(--text); display: grid; font-size: 12px; font-weight: var(--weight-strong); gap: 5px; min-width: 0; }
.vendor-bill-upload input { background: var(--surface); box-sizing: border-box; min-width: 0; width: 100%; }
.vendor-bill-upload small { color: var(--muted); overflow-wrap: anywhere; }
.vendor-bill-list { display: grid; gap: 8px; min-width: 0; }
.vendor-bill-list-head { align-items: center; display: flex; gap: 12px; justify-content: space-between; }
.vendor-bill-select-all { align-items: center; display: inline-flex; gap: 8px; font-weight: var(--weight-strong); }
.vendor-bill-select-all input { height: 18px; width: 18px; }
.vendor-bill-list-count { display: block; margin: 10px 0 6px; }
.vendor-bill-rows { display: grid; gap: 8px; min-width: 0; overflow-x: auto; padding-bottom: 4px; }
.vendor-bill-row { align-items: end; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); display: grid; gap: 8px; grid-template-columns: 28px minmax(130px, 1.3fr) repeat(7, minmax(110px, 1fr)) minmax(120px, auto); min-width: 1120px; padding: 10px; }
.vendor-bill-row label:not(.vendor-bill-select) { color: var(--muted); display: grid; font-size: 12px; font-weight: var(--weight-strong); gap: 4px; min-width: 0; }
.vendor-bill-row input, .vendor-bill-row select { box-sizing: border-box; min-width: 0; width: 100%; }
.vendor-bill-select { align-self: center; display: grid; min-height: 44px; place-items: center; }
.vendor-bill-select input { height: 20px; width: 20px; }
.vendor-bill-source { align-self: center; display: grid; gap: 4px; min-width: 0; }
.vendor-bill-source strong, .vendor-bill-source small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vendor-bill-source small { color: var(--muted); }
.vendor-bill-row-action { align-items: stretch; display: grid; gap: 6px; }
.vendor-bill-row.is-submitted { align-items: center; grid-template-columns: 28px minmax(180px, 1.2fr) minmax(160px, 1fr) minmax(140px, .8fr) minmax(180px, auto); min-width: 760px; }
.vendor-bill-row.is-submitted > div { display: grid; gap: 4px; min-width: 0; }
.vendor-bill-row.is-submitted small { color: var(--muted); }

@media (max-width: 560px) {
  .automation-review .panel-head { align-items: stretch; }
  .automation-review .panel-head > button { width: 100%; }
  .automation-safety { align-items: flex-start; flex-direction: column; }
  .automation-artifact summary { align-items: flex-start; flex-direction: column; }
  .automation-pagination { align-items: stretch; flex-direction: column; }
  .automation-pagination .inline-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .automation-pagination button { width: 100%; }
  .notification-card { align-items: stretch; grid-template-columns: 1fr; }
  .notification-inline-actions { display: grid; grid-template-columns: 1fr; justify-content: stretch; }
  .notification-inline-actions .mini, .notification-inline-actions > a, .inbox-decision { min-width: 0; width: 100%; }
  .inbox-decision .inline-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sales-landing-task { align-items: stretch; grid-template-columns: 1fr; }
  .sales-landing-task > a { width: 100%; }
  .sales-landing-task .sales-activity-actions { width: 100%; }
  .sales-activity-actions .mini { min-height: 44px; padding: 7px 5px; }
  .opportunity-activity-modal { padding: 16px; }
  .vendor-bill-intake { padding: 12px; }
  .vendor-bill-intake .panel-head, .vendor-bill-list-head { align-items: stretch; flex-direction: column; }
  .vendor-bill-list-head button, .vendor-bill-upload button { min-height: 44px; width: 100%; }
  .vendor-bill-upload { align-items: stretch; grid-template-columns: 1fr; }
  .vendor-bill-rows { overflow: visible; }
  .vendor-bill-row, .vendor-bill-row.is-submitted { grid-template-columns: 28px minmax(0, 1fr); min-width: 0; width: 100%; }
  .vendor-bill-row > label:not(.vendor-bill-select), .vendor-bill-row > .vendor-bill-row-action, .vendor-bill-row.is-submitted > div:not(.vendor-bill-select) { grid-column: 1 / -1; }
  .vendor-bill-source { grid-column: 2; }
  .vendor-bill-row input, .vendor-bill-row select, .vendor-bill-row-action button { min-height: 44px; }
}

.modal-card.construction-estimate-modal { width: min(1040px, calc(100vw - 40px)); max-width: min(1040px, calc(100vw - 40px)); }
@media (max-width: 620px) {
  .modal-card.construction-estimate-modal { width: calc(100vw - 24px); max-width: calc(100vw - 24px); padding: 16px; }
}

@media (max-width: 760px) {
  .copyless-ui .topbar,
  .copyless-ui .remind-topbar {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2);
    min-height: 48px;
    margin-bottom: var(--space-2);
  }
  .copyless-ui .remind-header-actions {
    display: flex;
    grid-column: 1;
    grid-row: 1;
    justify-content: flex-end;
    width: 100%;
  }
  .copyless-ui .mobile-search-toggle,
  .copyless-ui .mobile-conditions-toggle { display: inline-grid; flex: 0 0 44px; }
  .copyless-ui .remind-searchbar { grid-column: 1; grid-row: 2; width: 100%; }
  .copyless-ui .top-controls {
    position: absolute;
    top: 52px;
    right: 0;
    z-index: 950;
    width: min(366px, calc(100vw - 24px));
    margin: 0;
  }
  .copyless-ui .top-controls > summary { display: none; }
  .copyless-ui .top-controls:not([open]) .top-actions { display: none; }
  .copyless-ui .top-controls[open] .top-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow);
  }
}

@media (max-width: 760px) {
  body.copyless-ui[data-role="field_supervisor"] .nav-tabs .nav-launch-card { min-height: 44px; }
}

.phase-project-list { display: grid; gap: var(--space-3); }
.phase-project { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; }
.phase-project > header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3); border-bottom: 1px solid var(--line); }
.phase-project > header div { display: grid; gap: 3px; min-width: 0; }
.phase-project > header small { color: var(--muted); }
.phase-project > p, .phase-template-form { margin: 0; padding: var(--space-3); }
.phase-template-form { display: flex; align-items: end; gap: var(--space-2); }
.phase-template-form label { flex: 1; }
.phase-progress-form { display: grid; grid-template-columns: 76px minmax(108px, 1fr) auto; gap: 6px; min-width: 280px; }
.phase-progress-form input, .phase-progress-form select, .phase-progress-form button { min-height: 36px; }
.phase-gantt-scroll { width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; border-bottom: 1px solid var(--line); background: var(--panel-2); }
.phase-gantt { display: block; min-width: 720px; font-family: inherit; font-size: 12px; }
.gantt-grid-line { stroke: var(--line); stroke-width: 1; }
.gantt-plan { fill: var(--line-strong); }
.gantt-progress { fill: var(--primary); }
.gantt-dependency { fill: none; stroke: var(--muted); stroke-width: 1.5; }
.gantt-phase-label { fill: var(--text); font-weight: 600; }
.gantt-bar-label { fill: var(--surface); font-weight: 600; }
.supervisor-compliance-forms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-3); }
.supervisor-compliance-forms form { border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-3); }
.supervisor-compliance-forms h4 { margin: 0 0 var(--space-2); }
.supervisor-photo-metadata { border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-3); background: var(--panel-2); }
.supervisor-photo-metadata summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: var(--weight-strong); }
.supervisor-photo-metadata form { margin-top: var(--space-2); padding: 0; border: 0; }

@media (max-width: 760px) {
  .phase-project > header { align-items: flex-start; }
  .phase-progress-form { grid-template-columns: 72px 1fr; min-width: 220px; }
  .phase-progress-form button { grid-column: 1 / -1; min-height: 44px; width: 100%; }
  .phase-template-form, .supervisor-compliance-forms { display: grid; grid-template-columns: 1fr; }
  .phase-template-form button { min-height: 48px; width: 100%; }
}

@media (max-width: 768px) {
  body.copyless-ui main button,
  body.copyless-ui main a.primary,
  body.copyless-ui main a.secondary,
  body.copyless-ui main input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  body.copyless-ui main select,
  body.copyless-ui main textarea,
  body.remind-field-app main button,
  body.remind-field-app main a.primary,
  body.remind-field-app main a.secondary,
  body.remind-field-app main input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  body.remind-field-app main select,
  body.remind-field-app main textarea {
    min-height: 44px;
  }

  #fieldReportSubmit,
  .field-next-action .primary {
    min-height: 56px;
  }

  body.copyless-ui main .role-landing-hero .hero-actions button,
  body.copyless-ui main .role-landing-primary-actions button,
  body.remind-field-app main #voiceMemoButton {
    min-height: 44px;
  }
}
.auth-mfa-step {
  display: grid;
  gap: 10px;
  min-width: 0;
}
.auth-mfa-step:focus { outline: none; }

.auth-mfa-step[hidden] { display: none; }
.auth-mfa-heading { display: grid; gap: 6px; }
.auth-mfa-heading h2 { margin: 0; font-size: 20px; }
.auth-mfa-heading p { margin: 0; color: var(--text-sub); line-height: 1.5; }
.auth-stage-badge { width: fit-content; padding: 4px 9px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--brand) 10%, var(--surface)); color: var(--brand); font-size: 12px; font-weight: var(--weight-heavy); }
.auth-step-mark { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 50%; background: var(--brand); color: white; font-weight: var(--weight-heavy); }
.auth-mfa-setup { display: grid; gap: 10px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-sub); }
.auth-mfa-setup[hidden] { display: none; }
.auth-numbered-heading { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: start; gap: 10px; }
.auth-numbered-heading > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: var(--brand); color: white; font-weight: var(--weight-heavy); }
.auth-numbered-heading h3 { margin: 2px 0 0; font-size: 16px; line-height: 1.35; }
.auth-numbered-heading p { margin: 3px 0 0; color: var(--text-sub); font-size: 13px; line-height: 1.4; }
.auth-setup-qr { display: grid; place-items: center; gap: 5px; }
.auth-setup-qr > div { width: min(154px, 54vw); aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-sm); background: white; }
.auth-setup-qr small { color: var(--text-sub); }
.auth-setup-qr > div[hidden] { display: none; }
.auth-setup-qr svg { display: block; width: 100%; height: 100%; }
.auth-setup-actions { display: grid; gap: 7px; min-width: 0; }
.auth-setup-actions details { min-width: 0; }
.auth-setup-actions summary, #loginMfaRecovery summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--text-sub); font-size: 13px; font-weight: var(--weight-strong); }
.auth-setup-actions > .auth-action { min-height: 44px; }
.auth-method-divider { display: flex; align-items: center; gap: 8px; color: var(--text-sub); font-size: 12px; }
.auth-method-divider::before, .auth-method-divider::after { content: ''; height: 1px; flex: 1; background: var(--line); }
.auth-qr-guide, .auth-app-help p { margin: 0; color: var(--text-sub); font-size: 13px; line-height: 1.5; }
.auth-code-entry { display: grid; gap: 10px; padding-top: 2px; }
.auth-secret-row { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: stretch; gap: 8px; min-width: 0; margin-top: 8px; }
.auth-secret-row .icon-button { width: 44px; min-width: 44px; height: 44px; }
.auth-copy-status { display: block; min-height: 18px; margin-top: 4px; color: var(--ok); font-size: 12px; }
.auth-mfa-notice { display: grid; gap: 3px; margin: 0; padding: 11px 12px; border: 1px solid color-mix(in srgb, var(--brand) 24%, var(--line)); border-radius: var(--radius-sm); background: var(--brand-soft); color: var(--text-sub); font-size: 13px; line-height: 1.45; }
.auth-mfa-notice strong { color: var(--brand-strong); }
.auth-dialog .auth-mfa-code { min-height: 56px !important; text-align: center; font-size: 24px; font-weight: var(--weight-heavy); letter-spacing: 0; }
.auth-message { min-height: 20px; margin: 4px 0 0; color: var(--danger); font-size: 13px; line-height: 1.45; }
.auth-mfa-step code,
.auth-mfa-step pre {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-all;
  white-space: pre-wrap;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-sub);
}

@media (min-width: 700px) {
  .auth-dialog:has(.auth-mfa-setup:not([hidden])) { width: min(760px, calc(100vw - 32px)); }
  .auth-dialog.auth-dialog-mfa-setup { width: min(760px, calc(100vw - 32px)); }
}

@media (max-width: 699px) {
  .auth-dialog-mfa-setup .auth-mfa-step { grid-template-columns: 1fr; }
  .auth-dialog-mfa-setup .auth-mfa-heading,
  .auth-dialog-mfa-setup .auth-mfa-setup,
  .auth-dialog-mfa-setup .auth-code-entry { grid-column: 1; grid-row: auto; }
}

.role-data-quality {
  margin: 16px 0;
  padding: 16px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.role-data-quality-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.launch-readiness-card { display: grid; gap: 12px; }
.launch-readiness-card > p { margin: 0; color: var(--text-sub); }
.launch-readiness-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.launch-readiness-item { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.launch-readiness-item.pending { border-color: var(--warning); }
.launch-readiness-item.confirmed { border-color: var(--ok); }
.launch-readiness-item > div { display: grid; min-width: 0; gap: 3px; }
.launch-readiness-item small { color: var(--text-sub); overflow-wrap: anywhere; }
.launch-readiness-mark { display: grid; width: 28px; height: 28px; place-items: center; border-radius: var(--radius-pill); color: var(--surface); background: var(--warning); font-weight: var(--weight-heavy); }
.launch-readiness-item.confirmed .launch-readiness-mark { background: var(--ok); }
.launch-readiness-modal textarea { width: 100%; resize: vertical; }
.operation-time-budgets { display: grid; gap: 12px; }
.operation-time-budgets .table-wrap { max-height: 520px; overflow: auto; }

@media (max-width: 768px) {
  .launch-readiness-item { grid-template-columns: 28px minmax(0, 1fr); }
  .launch-readiness-item button { grid-column: 1 / -1; width: 100%; min-height: 44px; }
}

.role-data-quality-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  border-top: 1px solid var(--line);
}

.role-data-quality-list li > span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.role-data-quality-list small { display: block; color: var(--text-sub); }

@media (max-width: 600px) {
  .role-data-quality-list li,
  .role-data-quality-list li > span { align-items: stretch; flex-direction: column; }
  .role-data-quality-list li { padding: 12px 0; }
  .role-data-quality-list .mini { min-height: 44px; }
  .hr-operations { padding: 12px; }
  .hr-operations .panel-head { align-items: stretch; flex-direction: column; }
  .hr-workflow-create { grid-template-columns: minmax(0, 1fr); }
  .hr-workflow-create > strong { grid-column: auto; }
  .hr-workflow-card li { grid-template-columns: 28px minmax(0, 1fr); padding: 8px 0; }
  .hr-workflow-card li button { grid-column: 1 / -1; min-height: 44px; }
}
.case-client-portal{border-top:3px solid var(--primary)}
.case-client-portal .case-guidance{margin:0 0 14px;color:var(--text-sub);font-size:13px;line-height:1.6}
.client-portal-row,.client-portal-request{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;border-top:1px solid var(--line)}
.client-portal-row>div{display:grid;gap:4px;min-width:0}
.client-portal-row small,.client-portal-request small{color:var(--text-sub)}
.client-portal-request{display:grid;grid-template-columns:1fr auto}
.client-portal-request>div{display:flex;align-items:center;gap:8px}
.client-portal-request p{grid-column:1/-1;margin:0;line-height:1.6;white-space:pre-wrap}
.client-portal-request button{grid-column:2;grid-row:3}
.client-portal-link-modal input[readonly]{font-size:13px;background:var(--surface-sub)}
@media(max-width:600px){.client-portal-row{align-items:flex-start;flex-direction:column}.client-portal-row>button{width:100%}.client-portal-request{grid-template-columns:1fr}.client-portal-request button{grid-column:1;grid-row:auto;width:100%}}

/* Repository alignment: role-safe mobile navigation and field-first operations. */
.mobile-tab-bar,
.mobile-menu-layer { display: none; }
.derived-next-action { display: grid; gap: 3px; min-width: 150px; }
.remind-field-app .field-shell > .field-topbar { order: -30; }
.remind-field-app .field-shell > .field-offline-banner { order: -29; }
.remind-field-app .field-shell > .field-corrections-panel { order: -28; }
.remind-field-app .field-shell > #fieldDocumentsPanel { order: -27; }
.remind-field-app .field-shell > main { order: -26; }
.remind-field-app .field-shell > .field-contribution { order: -25; }
.remind-field-app .field-shell > .field-calendar-card { order: -20; }
.remind-field-app .field-shell > .field-step-grid { order: -19; }
.remind-field-app .field-shell > .panel { order: -18; }
.remind-field-app .field-topbar { min-height: 64px; padding: 12px 16px; border-radius: var(--radius-md); }
.remind-field-app .field-topbar > div { display: flex; align-items: center; gap: 10px; }
.remind-field-app .field-topbar .eyebrow { margin: 0; }
.remind-field-app .field-topbar h1 { margin: 0; font-size: 20px; }
.remind-field-app .field-member-link { align-items: center; min-height: 44px; margin: 0; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--brand-soft); }

@media (max-width: 768px) {
  .app-shell { display: block; }
  .sidebar { display: none !important; }
  .main,
  .copyless-ui .main {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding-bottom: calc(92px + env(safe-area-inset-bottom));
  }
  .mobile-tab-bar {
    position: fixed;
    inset: auto 0 0;
    z-index: 920;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    min-height: calc(66px + env(safe-area-inset-bottom));
    padding: 5px 4px env(safe-area-inset-bottom);
    border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface) 98%, transparent);
    box-shadow: 0 -8px 24px color-mix(in srgb, var(--text) 10%, transparent);
  }
  .mobile-tab-bar button,
  .mobile-tab-bar a {
    position: relative;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 3px;
    min-width: 0;
    min-height: 56px;
    padding: 3px 2px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-faint);
    text-decoration: none;
  }
  .mobile-tab-bar button i,
  .mobile-tab-bar a i { display: grid; width: 23px; height: 23px; place-items: center; font-style: normal; }
  .mobile-tab-bar button span,
  .mobile-tab-bar a span { max-width: 100%; overflow: hidden; font-size: 12px; font-weight: var(--weight-heavy); line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-tab-bar button.active,
  .mobile-tab-bar a.active { color: var(--brand-strong); background: var(--brand-soft); }
  .mobile-tab-bar button.active::before,
  .mobile-tab-bar a.active::before { content: ''; position: absolute; top: 3px; width: 24px; height: 2px; border-radius: var(--radius-pill); background: var(--brand); }
  .mobile-menu-layer[hidden] { display: none; }
  .mobile-menu-layer { position: fixed; inset: 0; z-index: 940; display: block; }
  .mobile-menu-scrim { position: absolute; inset: 0; width: 100%; border: 0; border-radius: 0; background: color-mix(in srgb, var(--text) 42%, transparent); }
  .mobile-menu-sheet { position: absolute; inset: auto 0 0; max-height: min(72dvh, 620px); padding: 16px 14px calc(18px + env(safe-area-inset-bottom)); overflow-y: auto; border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--surface); box-shadow: 0 -18px 48px color-mix(in srgb, var(--text) 22%, transparent); }
  .mobile-menu-sheet > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
  .mobile-menu-sheet h2 { font-size: 20px; }
  .mobile-menu-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .mobile-menu-list button { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; min-height: 52px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--text); text-align: left; }
  .mobile-menu-list button.active { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-strong); }
  .mobile-menu-list button i { font-style: normal; }
  .mobile-menu-open { overflow: hidden; }
}

.remind-field-app .today-site-card.current { border: 0; background: var(--brand); color: var(--surface); box-shadow: 0 12px 28px color-mix(in srgb, var(--brand) 22%, transparent); }
.remind-field-app .today-site-card header { align-items: flex-start; margin: 0; }
.remind-field-app .today-site-card header > span { width: 40px; height: 28px; border-radius: var(--radius-sm); background: var(--text); font-size: 12px; }
.remind-field-app .today-site-card.current header > span { background: var(--surface); color: var(--brand-strong); }
.remind-field-app .today-site-card.current strong,
.remind-field-app .today-site-card.current small,
.remind-field-app .today-site-card.current p { color: var(--surface); }
.remind-field-app .today-site-card header strong { display: block; font-size: 16px; line-height: 1.35; }
.remind-field-app .today-site-card header small { display: block; margin-top: 4px; line-height: 1.45; }
.field-site-note { margin: 12px 0; padding: 8px 12px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--surface) 14%, transparent); }
.remind-field-app .field-start-action { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 56px; border: 0; border-radius: var(--radius-md); background: var(--surface); color: var(--brand-strong); font-size: 16px; font-weight: var(--weight-heavy); }
.field-start-action span { display: grid; width: 24px; height: 24px; place-items: center; border-radius: var(--radius-pill); background: var(--brand-soft); }
.field-site-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.field-site-links > a,
.field-site-links > span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 8px; border: 1px solid color-mix(in srgb, var(--surface) 48%, transparent); border-radius: var(--radius-md); color: var(--surface); font-weight: var(--weight-strong); text-decoration: none; }
.field-site-links > a { gap: 4px; }
.field-site-links > a .ui-icon { width: 18px; height: 18px; }
.field-site-links > .field-site-manager { grid-column: 1 / -1; min-height: 24px; border: 0; font-size: 12px; opacity: .9; }
.remind-field-app .field-card-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.remind-field-app .today-site-card.current .field-card-actions button { min-height: 44px; border: 1px solid color-mix(in srgb, var(--surface) 42%, transparent); border-radius: var(--radius-md); background: color-mix(in srgb, var(--surface) 12%, transparent); color: var(--surface); }
.remind-field-app .today-site-card.current .field-card-actions .help-action { background: var(--warn-soft); color: var(--warn); }
.today-site-card.queued { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.today-site-card.queued header { min-width: 0; }
.today-site-card.queued > button { min-height: 44px; }
.field-queued-sites { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.field-queued-sites > summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 12px; cursor: pointer; list-style: none; color: var(--text-sub); font-weight: var(--weight-strong); }
.field-queued-sites > summary::-webkit-details-marker { display: none; }
.field-queued-sites > summary b { color: var(--brand-strong); }
.field-queued-sites > div { display: grid; gap: 8px; padding: 0 8px 8px; }
.field-queued-sites .today-site-card { box-shadow: none; }
.field-success-view { position: fixed; inset: 0; z-index: 1200; display: grid; grid-template-columns: minmax(0, 360px); place-content: center; justify-items: center; gap: 16px; padding: 24px; background: var(--surface); text-align: center; }
.field-success-view[hidden] { display: none; }
.field-completion-open { overflow: hidden; }
.field-success-icon { display: grid; width: 64px; height: 64px; place-items: center; border-radius: var(--radius-pill); background: var(--ok-soft); color: var(--ok); font-size: 32px; font-weight: var(--weight-heavy); }
.field-success-view strong { display: block; color: var(--ok); font-size: 20px; }
.field-success-view p { margin: 4px 0 0; color: var(--text-sub); }
.remind-field-app .field-success-view button { width: 100%; min-height: 56px; }

@media (max-width: 600px) {
  .remind-field-app .field-topbar { flex-direction: row; align-items: center; }
  .remind-field-app .field-topbar .eyebrow { font-size: 12px; }
  .remind-field-app .field-topbar .field-logo-dot { display: none; }
  .remind-field-app .field-step-grid { display: none; }
  .remind-field-app .field-today-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .remind-field-app .field-today-strip span { display: grid; min-height: 58px; place-content: center; gap: 2px; padding: 6px 2px; text-align: center; }
  .remind-field-app .field-today-strip span:nth-child(5) { display: none; }
  .remind-field-app .field-today-strip strong { margin: 0; font-size: 20px; }
  .remind-field-app .field-today-strip small { font-size: 12px; }
  .today-site-card.queued { grid-template-columns: 1fr; }
  .today-site-card.queued > button { width: 100%; }
  .field-success-view { grid-template-columns: minmax(0, 1fr); }
}

@media print {
  .mobile-tab-bar,
  .mobile-menu-layer { display: none !important; }
}
.period-strip { display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; min-height:40px; margin:0 0 12px; padding:8px 14px; border-block:1px solid var(--line); background:var(--surface); color:var(--text-sub); font-size:12px; }
.period-strip span:first-child { color:var(--text); font-weight:var(--weight-strong); }
.project-period-controls { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.project-period-controls label { display:flex; align-items:center; gap:6px; color:var(--text-sub); font-size:12px; }
.project-period-controls select { min-height:36px; }

/* Final prelaunch operability contracts. */
.remind-field-app .field-calendar-form button { min-height: 44px; }
.field-check-grid label:has(> input[data-required-check][required]) {
  border-color: color-mix(in srgb, var(--warn) 52%, var(--line));
  background: var(--warn-soft);
  box-shadow: inset 3px 0 0 var(--warn);
}
.field-check-grid label:has(> input[data-required-check][required]) > strong {
  margin-left: auto;
  padding: 3px 6px;
  border-radius: var(--radius-sm);
  background: var(--warn);
  color: var(--surface);
  font-size: 12px;
  line-height: 1.2;
}
.field-check-grid label:has(> input[data-required-check][required]:checked) {
  border-color: var(--ok);
  background: var(--ok-soft);
  box-shadow: inset 3px 0 0 var(--ok);
}
.field-check-grid label:has(> input[data-required-check][required]:checked) > strong { background: var(--ok); }

@media (max-width: 600px) {
  .remind-field-app .field-shell { padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
  .remind-field-app #submitFieldOnly { scroll-margin-bottom: calc(96px + env(safe-area-inset-bottom)); }
}

/* Full-traversal interaction contract: every office control is 44px and every field control is 56px. */
:where(button, a[href], [role="button"], input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand) 38%, transparent);
  outline-offset: 2px;
}
button[aria-busy="true"], input[type="submit"][aria-busy="true"] { cursor: wait; }
button[aria-busy="true"]::before {
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  content: "";
  animation: submit-busy-spin .7s linear infinite;
}
@keyframes submit-busy-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { button[aria-busy="true"]::before { animation: none; } }
.copyless-ui button,
.copyless-ui .primary,
.copyless-ui .secondary,
.copyless-ui input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.copyless-ui select,
.copyless-ui textarea,
.copyless-ui [role="button"] { min-height: 44px !important; }
.copyless-ui .icon-button,
.copyless-ui .remind-bell { width: 44px; min-width: 44px; height: 44px; }
.copyless-ui .sidebar-collapse-btn { width: 44px !important; min-width: 44px; height: 44px; min-height: 44px !important; }
.copyless-ui .nav-tabs button { min-height: 44px !important; }
.copyless-ui .nav-tabs .nav-tab-button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-sub);
  text-decoration: none;
}
.copyless-ui .nav-tabs .nav-tab-button .nav-label { display: grid; min-width: 0; gap: 0; }
.copyless-ui .nav-tabs .nav-tab-button .nav-label strong { font-size: 13px; font-weight: var(--weight-strong); line-height: 1.1; }
.copyless-ui .nav-tabs .nav-tab-button .nav-label em,
.copyless-ui .nav-tabs .nav-tab-button .nav-role { display: none; }
.copyless-ui .nav-tabs .nav-tab-button i { display: grid; width: 18px; height: 18px; place-items: center; font-style: normal; }
.copyless-ui .nav-tabs .nav-tab-button:hover,
.copyless-ui .nav-tabs .nav-tab-button:focus-visible { background: var(--brand-soft); color: var(--brand); }
.copyless-ui .nav-tabs .nav-tab-button.active { background: var(--brand-soft); box-shadow: inset 3px 0 0 var(--brand); color: var(--brand); }
.copyless-ui .nav-section summary,
.copyless-ui .remind-module-drawer > summary { min-height: 44px; }
.copyless-ui .top-controls > summary,
.copyless-ui .planning-master-section > summary,
.copyless-ui .compact-card-review > summary,
.copyless-ui .phase-template-admin > summary,
.copyless-ui .pricebook-revision > summary,
.copyless-ui .pricebook-assemblies > summary,
.copyless-ui .profit-adjustment > summary {
  display: flex;
  align-items: center;
  min-height: 44px;
}
.copyless-ui .segmented button { min-width: 44px !important; min-height: 44px !important; }
.copyless-ui .business-track-lane td a { display: inline-flex; align-items: center; min-height: 44px; }
.copyless-ui .info-tooltip { width: 44px; height: 44px; }
.copyless-ui .mission-card a { display: inline-flex; align-items: center; min-height: 44px; }
.copyless-ui main a[href] { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
.copyless-ui .remind-searchbar,
.copyless-ui .remind-searchbar input,
.copyless-ui .view-as-control select { min-height: 44px !important; }
.member-page-topbar a { min-height: 44px; }
.copyless-ui[data-role="field_supervisor"] .text-link { display: inline-flex; align-items: center; min-height: 44px; }
.remind-field-app .field-calendar-form > *,
.remind-field-app .field-calendar-form label,
.remind-field-app .field-calendar-form input,
.remind-field-app .field-calendar-form select { min-width: 0; }
.remind-field-app .field-member-link { min-width: 56px; justify-content: center; }
.remind-field-app .field-queued-sites > summary { min-height: 56px; }
.remind-field-app .field-sticky-action-rail button:nth-child(3) {
  background: var(--text);
  color: var(--surface);
  box-shadow: inset 0 0 0 2px var(--danger);
}
.remind-field-app .today-site-card.current .field-card-actions .help-action {
  border-color: var(--danger) !important;
  background: var(--danger-soft) !important;
  color: var(--text) !important;
}

body.remind-field-app :where(
  button,
  a[href],
  [role="button"],
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea
) { min-height: 56px !important; }
.remind-field-app #loginOverlay summary,
.remind-field-app #loginOverlay .auth-role-grid a { min-height: 56px; }