:root {
  --ink: #17202a;
  --muted: #667085;
  --line: #d9dee7;
  --paper: #ffffff;
  --bg: #f4f7fb;
  --purple: #7653c7;
  --purple-soft: #eee9ff;
  --green: #4b9b67;
  --green-soft: #e8f5e9;
  --yellow: #c99318;
  --yellow-soft: #fff5cf;
  --orange: #c86f2d;
  --orange-soft: #ffead8;
  --blue: #257c92;
  --blue-soft: #e3f5f7;
  --red: #bc4c58;
  --red-soft: #fde8ea;
  --shadow: 0 10px 30px rgba(31, 42, 68, .07);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--ink);
}

button, select, textarea, input { font: inherit; }

.topbar {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px max(24px, calc((100vw - 1480px) / 2));
  background: #0e2d44;
  color: white;
}
.primary-nav { display: flex; align-items: center; gap: 5px; margin-left: auto; }
.nav-item { display: flex; align-items: center; gap: 7px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #cfe0ea; padding: 9px 11px; font-size: 12px; font-weight: 700; cursor: pointer; }
.nav-item:hover { background: rgba(255,255,255,.08); color: white; }
.nav-item.active { border-color: rgba(255,255,255,.24); background: rgba(255,255,255,.13); color: white; }
.nav-item span { color: #79b9d2; font-size: 14px; }

.topbar h1 { margin: 4px 0 0; font-size: 22px; }
.brand-lockup { display: flex; align-items: center; gap: 18px; }
.brand-lockup img { width: 150px; height: 50px; object-fit: contain; object-position: left center; padding-right: 18px; border-right: 1px solid rgba(255,255,255,.25); }
.eyebrow {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 11px;
  font-weight: 700;
  color: #7890a3;
}
.topbar .eyebrow { color: #adc2d1; }

.top-actions { display: flex; align-items: center; gap: 6px; margin-left: 8px; }
.demo-badge {
  padding: 4px 7px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
}
.save-state { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; background: rgba(255,255,255,.07); padding: 4px 7px; font-size: 10px; color: #cfe0ea; white-space: nowrap; }
.save-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #70c594; box-shadow: 0 0 0 2px rgba(112,197,148,.14); }
.save-state span { display: none; }

.app-shell {
  max-width: 1480px;
  margin: 0 auto;
  padding: 24px;
}
.app-page[hidden] { display: none; }
.page-heading { padding: 22px; margin-bottom: 18px; }
.page-heading h2 { margin: 5px 0 7px; font-size: 27px; }
.page-heading p:last-child { margin: 0; color: var(--muted); font-size: 13px; }
.notification-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.scope-filter { flex: 0 0 190px; color: #4d5a6c; font-size: 10px; font-weight: 700; }
.scope-filter select { display: block; width: 100%; min-height: 40px; margin-top: 5px; }
.help-hero { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: 26px; margin-bottom: 18px; }
.help-hero h2 { margin: 5px 0 8px; font-size: 30px; }
.help-hero p:last-child { max-width: 760px; margin: 0; color: var(--muted); line-height: 1.55; }
.help-jump-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.help-jump-links a { border: 1px solid #cfdbe5; border-radius: 999px; background: #f6f9fb; color: #176c88; padding: 7px 11px; font-size: 11px; font-weight: 700; text-decoration: none; }
.help-jump-links a:hover { border-color: #68a8bb; background: #eaf6f9; }
.help-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.help-card { padding: 24px; scroll-margin-top: 16px; }
.help-card-heading { display: flex; align-items: center; gap: 12px; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.help-card-heading h3 { margin: 3px 0 0; font-size: 21px; }
.help-icon { display: grid; place-items: center; flex: 0 0 42px; height: 42px; border-radius: 11px; background: #e6f5f8; color: #176c88; font-size: 20px; }
.help-card > p { color: #526174; line-height: 1.62; }
.help-card h4 { margin: 20px 0 8px; color: #25364a; font-size: 13px; }
.help-card ul { margin: 0; padding-left: 20px; color: #526174; font-size: 13px; line-height: 1.55; }
.help-card li + li { margin-top: 8px; }
.help-definitions { display: grid; gap: 8px; margin: 0; }
.help-definitions div { border-left: 3px solid #79b9ca; border-radius: 0 8px 8px 0; background: #f5f9fb; padding: 10px 12px; }
.help-definitions dt { color: #25364a; font-size: 12px; font-weight: 700; }
.help-definitions dd { margin: 3px 0 0; color: #5b6878; font-size: 12px; line-height: 1.5; }
.help-callout { border-radius: 9px; background: #fff7df; padding: 12px; color: #6c5825 !important; font-size: 12px; }
.help-status-guide { display: grid; grid-template-columns: max-content 1fr; align-items: center; gap: 7px 10px; }
.help-status-guide p { margin: 0; color: #5b6878; font-size: 12px; }
.help-status { min-width: 70px; border-radius: 999px; padding: 4px 8px; text-align: center; font-size: 10px; font-weight: 700; }
.help-status.normal { background: #eaf5ee; color: #287a47; }
.help-status.warning { background: #fff1c2; color: #86630e; }
.help-status.urgent { background: #fde2e5; color: #a92f3a; }
.resources-section { margin-top: 18px; padding: 26px; }
.resources-intro { margin: 0 0 18px; color: var(--muted); font-size: 13px; }
.resource-stage-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.resource-stage { border: 1px solid #d9e3eb; border-radius: 12px; background: #f8fbfc; padding: 18px; scroll-margin-top: 18px; }
.resource-stage:target { border-color: #2b8ba3; box-shadow: 0 0 0 4px rgba(43,139,163,.14); }
.resource-stage-number { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #dff2f6; color: #176c88; font-size: 11px; font-weight: 800; }
.resource-stage h4 { margin: 10px 0 13px; }
.resource-stage ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.resource-stage li { display: flex; align-items: flex-start; gap: 7px; color: #4c5b6d; font-size: 12px; line-height: 1.4; }
.attendance-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; }
.attendance-filters { display: flex; align-items: end; gap: 10px; }
.attendance-filters label, .year-filter { color: #4d5a6c; font-size: 10px; font-weight: 700; }
.attendance-filters select, .year-filter select { display: block; min-width: 180px; min-height: 40px; margin-top: 5px; }
.attendance-filters label[hidden] { display: none; }
.attendance-summary { padding: 18px; margin-bottom: 18px; }
.attendance-summary .section-heading { margin-bottom: 14px; }
.attendance-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.attendance-chart-panel { min-width: 0; padding: 13px; border: 1px solid #dce3eb; border-radius: 11px; background: #fbfcfd; }
.attendance-chart-panel h4 { margin: 0 0 8px; color: #3e4c5e; font-size: 12px; }
.attendance-chart-panel svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-axis { fill: none; stroke: #aeb9c7; stroke-width: 1; }
.chart-line { fill: none; stroke: var(--blue); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.chart-dot { fill: white; stroke: var(--blue); stroke-width: 3; }
.chart-value, .chart-date, .chart-y-label { fill: #5a687a; font-family: Inter, sans-serif; font-size: 10px; text-anchor: middle; }
.chart-value { fill: #253548; font-weight: 700; }
.chart-y-label { text-anchor: start; }
.empty-chart { margin: 0; padding: 35px 10px; color: var(--muted); text-align: center; font-size: 11px; }
.individual-attendance-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.individual-attendance-stats article { display: grid; place-items: center; min-height: 105px; border: 1px solid #cddce8; border-radius: 11px; background: #f4f9fd; text-align: center; }
.individual-attendance-stats strong { display: block; color: #164d68; font-size: 28px; }
.individual-attendance-stats span { display: block; color: var(--muted); font-size: 11px; font-weight: 700; }
.individual-attendance-stats .attendance-rate-wheel { --attendance-progress: 0deg; width: 112px; min-height: 112px; margin: 0 auto; border: 0; border-radius: 50%; background: radial-gradient(closest-side, white 72%, transparent 73% 99%, white 100%), conic-gradient(var(--blue) var(--attendance-progress), #dfe6ec 0); }
.attendance-rate-wheel strong { font-size: 23px; }
.individual-attendance-breakdown { display: grid; gap: 12px; }
.individual-group-panel { padding: 13px; border: 1px solid #d8e2eb; border-radius: 11px; background: #fbfcfd; }
.individual-group-panel h4 { margin: 0 0 10px; color: #3e4c5e; font-size: 12px; }

.attendance-accordions { display: grid; gap: 12px; }
.attendance-tabbar { display: flex; align-items: center; gap: 12px; padding: 10px; margin-bottom: 12px; overflow: hidden; }
.attendance-tabs { display: flex; flex: 1 1 auto; gap: 7px; overflow-x: auto; padding: 2px; scrollbar-width: none; scroll-behavior: smooth; }
.attendance-tabs::-webkit-scrollbar { display: none; }
.tab-scroll-button { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 36px; border: 1px solid #cdd7e2; border-radius: 8px; background: white; color: #416477; font-size: 22px; cursor: pointer; }
.tab-scroll-button:hover { background: var(--blue-soft); border-color: #8fc6d2; }
#manageAttendanceTabs { flex: 0 0 auto; border-color: var(--purple); background: var(--purple-soft); color: #513a91; font-weight: 800; box-shadow: 0 0 0 2px rgba(118,83,199,.1); }
#manageAttendanceTabs:hover { background: #e4dcff; }
.attendance-tab { flex: 0 0 auto; border: 1px solid #ccd5e1; border-radius: 9px; background: #f8fafc; color: #536174; padding: 9px 12px; font-size: 11px; font-weight: 700; cursor: pointer; }
.attendance-tab:hover { border-color: #8db8c8; background: #f0f7fa; }
.attendance-tab.active { border-color: var(--blue); background: var(--blue-soft); color: #165e72; box-shadow: 0 0 0 2px rgba(37,124,146,.1); }
.attendance-group { overflow: hidden; }
.attendance-group-header { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 14px; padding: 16px 18px; border-bottom: 1px solid var(--line); background: #f1f6fa; font-weight: 800; }
.meeting-count { color: var(--muted); font-size: 11px; font-weight: 600; }
.attendance-table-wrap { overflow-x: auto; padding: 14px; }
.attendance-table { min-width: 0; table-layout: fixed; }
.attendance-table th:first-child, .attendance-table td:first-child { width: 200px; min-width: 200px; max-width: 200px; }
.attendance-table th:not(:first-child), .attendance-table td:not(:first-child) { width: var(--meeting-column-width, 200px); min-width: var(--meeting-column-width, 200px); max-width: var(--meeting-column-width, 200px); }
.attendance-table th:first-child { position: sticky; left: 0; z-index: 3; background: #f7f9fb; }
.outside-term { background: #f4f5f7; }
.outside-term select { color: #8a94a3; background: #eceff2; cursor: not-allowed; }
.meeting-date-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.edit-meeting-date { border: 0; background: none; color: inherit; padding: 0; font: inherit; cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.remove-meeting-date { display: grid; place-items: center; flex: 0 0 24px; width: 24px; height: 24px; border: 1px solid #e3b7bc; border-radius: 6px; background: #fff5f6; color: #a33b47; font-size: 16px; cursor: pointer; }
.remove-meeting-date:hover { background: var(--red-soft); }
.attendance-select { min-height: 36px; font-size: 11px; }
.delegate-button { display: block; width: 100%; margin-top: 6px; border: 1px solid #b8cce0; border-radius: 7px; background: #f3f8fc; color: #176c88; padding: 6px; font-size: 10px; cursor: pointer; }
.delegate-button[hidden] { display: none; }
.empty-meetings { margin: 0; padding: 24px; color: var(--muted); text-align: center; font-size: 12px; }
.managed-committee-list { display: grid; gap: 8px; margin-top: 16px; }
.managed-committee { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 11px; border: 1px solid #dce2ea; border-radius: 9px; background: #fafbfd; font-size: 12px; font-weight: 700; }

.notification-settings { padding: 18px; }
.notification-defaults-heading { margin-bottom: 12px; }
.notification-defaults-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.notification-settings label { display: block; padding: 10px; border: 1px solid #dce2ea; border-radius: 9px; background: #fafbfd; color: #3d4b5e; font-size: 11px; font-weight: 700; }
.notification-settings select { width: 100%; min-height: 36px; margin-top: 6px; }
.notification-defaults-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 11px; }
.notification-defaults-footer p { margin: 0; color: var(--muted); font-size: 10px; }
.email-composer { padding: 22px; margin-top: 18px; }
.email-composer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .8fr); gap: 18px; }
.email-draft-fields, .signature-editor { display: grid; align-content: start; gap: 12px; border: 1px solid #dce3eb; border-radius: 12px; background: #fafbfd; padding: 16px; }
.email-composer label { color: #475467; font-size: 11px; font-weight: 700; }
.email-composer label > select, .email-composer label > input, .email-composer label > textarea { display: block; width: 100%; margin-top: 6px; }
.email-composer select, .email-composer input { min-height: 40px; }
.email-composer textarea { min-height: 96px; }
.email-body-field textarea { min-height: 190px; }
.signature-actions { display: flex; gap: 8px; }
.signature-actions button { min-height: 38px; }
.email-output { margin-top: 18px; border: 1px solid #b9d6df; border-radius: 12px; background: #f2fafb; padding: 16px; }
.email-output-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.email-output-heading h4 { margin: 3px 0 0; }
.email-output { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.email-output-heading, .email-output label:first-of-type { grid-column: 1 / -1; }
.email-output textarea { min-height: 82px; background: white; }
.email-output #emailRecipientsOutput { min-height: 62px; }
.notification-table-card { padding: 18px; margin-top: 18px; }
.notification-table-wrap { max-width: 100%; }
.notification-table { min-width: 880px; table-layout: fixed; }
.notification-table th:first-child, .notification-table td:first-child { width: 190px; }
.notification-table th:not(:first-child), .notification-table td:not(:first-child) { width: 170px; }
.notification-sort { border: 0; background: none; color: inherit; padding: 0; font: inherit; line-height: 1.35; text-align: left; text-transform: inherit; letter-spacing: inherit; cursor: pointer; }
.notification-sort.active { color: #176c88; }
.not-scheduled { color: #8b95a3; font-style: italic; }
.notification-stage-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 3px 0 14px; scrollbar-width: none; }
.notification-stage-tabs::-webkit-scrollbar { display: none; }
.notification-stage-tab { flex: 0 0 auto; border: 1px solid #cdd8e4; border-radius: 999px; background: #f6f8fb; color: #475467; padding: 9px 14px; font-weight: 700; cursor: pointer; }
.notification-stage-tab:hover { border-color: #6aa7ba; background: #eef8fb; }
.notification-stage-tab.active { border-color: #21829b; background: #dff4f8; color: #115b70; box-shadow: inset 0 0 0 1px #21829b; }
.notification-legend { display: flex; justify-content: flex-end; gap: 18px; margin: -4px 0 10px; color: #667085; font-size: 12px; }
.notification-legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.warning-dot { background: #f2c94c; }
.urgent-dot { background: #d94b56; }
.notification-warning td { background: #fff8df; }
.notification-warning td:first-child { background: #fff8df; }
.notification-urgent td { background: #fde8ea; }
.notification-urgent td:first-child { background: #fde8ea; }
.notification-warning td:first-child { box-shadow: inset 4px 0 #e7ad22; }
.notification-urgent td:first-child { box-shadow: inset 4px 0 #c6434d; }
.checkin-countdown { display: block; width: max-content; margin-top: 5px; border-radius: 999px; background: rgba(255,255,255,.72); padding: 2px 7px; color: #475467; font-size: 11px; font-style: normal; font-weight: 700; }
.compact-dialog { width: min(520px, calc(100vw - 28px)); }
.completion-exception-dialog { width: min(1120px, calc(100vw - 28px)); }
.completion-exception-dialog .dialog-heading p:last-child { max-width: 700px; margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.exception-member-banner { margin: 16px 0 12px; border-radius: 9px; background: #edf7fa; padding: 10px 12px; color: #285d6a; font-size: 12px; }
.exception-stage-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-height: 62vh; overflow-y: auto; padding-right: 4px; }
.exception-stage-card { border: 1px solid #dce3eb; border-radius: 11px; background: #fafbfd; padding: 14px; }
.exception-stage-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid #e1e6ed; }
.exception-stage-heading h3 { margin: 3px 0 0; font-size: 16px; }
.exception-toggle { display: flex; align-items: center; gap: 7px; color: #5a4095; font-size: 10px; font-weight: 700; }
.exception-requirement-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 10px; }
.exception-requirement-groups fieldset { min-width: 0; margin: 0; border: 1px solid #dde3eb; border-radius: 8px; padding: 9px; }
.exception-requirement-groups legend { padding: 0 4px; color: #526174; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.exception-requirement-groups label { display: flex; align-items: flex-start; gap: 7px; margin-top: 6px; color: #3f4d60; font-size: 10px; line-height: 1.35; }
.exception-requirement-groups input:disabled { opacity: .45; }
.exception-footer > div { display: flex; gap: 8px; }
.dialog-field { display: block; margin-top: 20px; color: #475467; font-size: 11px; font-weight: 700; }
.dialog-field input { display: block; width: 100%; min-height: 44px; margin-top: 7px; border: 1px solid #cfd6e2; border-radius: 9px; padding: 0 11px; }

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
}

.member-bar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 18px;
  margin-bottom: 18px;
}
.member-selector-row { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.member-selector-row .member-picker-wrap { flex: 1 1 620px; max-width: 760px; }
.member-scope-filter { margin-left: auto; }

.member-picker-wrap label, .notes label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #475467;
  margin-bottom: 7px;
}

select, input[type="text"], textarea {
  width: 100%;
  border: 1px solid #cfd6e2;
  border-radius: 9px;
  background: white;
  color: var(--ink);
}

select, input[type="text"] { min-height: 44px; padding: 0 12px; }
textarea {
  resize: vertical;
  min-height: 360px;
  padding: 12px;
  line-height: 1.45;
}
#notesInput { transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease; }
#notesInput.save-confirmed { background: #e7f7eb; border-color: var(--green); box-shadow: 0 0 0 3px rgba(75,155,103,.16); }
.challenge-text { transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease; }
.challenge-text.save-confirmed { background: #e7f7eb; border-color: var(--green); box-shadow: 0 0 0 3px rgba(75,155,103,.16); }

.member-meta {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.member-meta[hidden] { display: none; }
.member-meta > div {
  border-left: 1px solid var(--line);
  padding-left: 16px;
}
.member-meta > div:first-child { border-left: 0; padding-left: 0; }
.member-meta .profile-field { align-self: stretch; }
.profile-field select, .profile-field input { min-height: 40px; }
.field-hint { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; }
#memberOrg { transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease; }
#memberOrg.save-confirmed { background: #e7f7eb; border-color: var(--green); box-shadow: 0 0 0 3px rgba(75,155,103,.16); }
.profile-field input.save-confirmed { background: #e7f7eb; border-color: var(--green); box-shadow: 0 0 0 3px rgba(75,155,103,.16); }
.resource-input-link { display: flex; align-items: flex-start; gap: 7px; border: 1px solid #c8dce4; border-radius: 8px; background: #f3fafb; padding: 9px; color: #176c88; font-size: 12px; font-weight: 700; text-decoration: none; }
.resource-input-link:hover { border-color: #4f9eb2; background: #e6f5f8; }
.resource-input-note { display: block; margin-top: 7px; color: #718096; font-size: 9px; line-height: 1.4; }
.milestone-note { color: #6953a2; font-size: 10px; font-weight: 600; }
.meta-label {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 5px;
}

.progress-card { padding: 18px; margin-bottom: 18px; }

.dashboard { padding: 22px; }
.dashboard-heading { display: flex; justify-content: space-between; align-items: end; gap: 18px; }
.dashboard-heading h2 { margin: 5px 0 0; font-size: 25px; }
.dashboard-heading > p, .dashboard-actions p { margin: 0; color: var(--muted); font-size: 13px; }
.dashboard-actions { display: flex; align-items: center; gap: 14px; }
.compact-button { width: auto; margin-top: 0; padding: 10px 14px; white-space: nowrap; }
.add-member-form {
  display: grid;
  grid-template-columns: minmax(160px, .8fr) minmax(210px, 1fr) minmax(250px, 1.4fr) minmax(160px, .8fr) auto;
  gap: 12px;
  align-items: end;
  margin-top: 20px;
  padding: 16px;
  border: 1px solid #cbd8e3;
  border-radius: 12px;
  background: #f7fafc;
}
.add-member-form[hidden] { display: none; }
.add-member-form label { display: block; margin-bottom: 6px; color: #475467; font-size: 11px; font-weight: 700; }
.form-actions { display: flex; gap: 8px; }
.secondary-button { min-height: 40px; border: 1px solid #cfd6e2; border-radius: 9px; background: white; padding: 0 12px; cursor: pointer; }
.integration-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 22px 0; }
.role-fulfillment { margin: 26px 0 22px; padding-top: 22px; border-top: 1px solid var(--line); }
.dashboard-insights { margin: 26px 0 22px; padding-top: 22px; border-top: 1px solid var(--line); }
.insight-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.insight-tab { display: flex; align-items: center; gap: 10px; border: 1px solid #d5dce6; border-radius: 11px; background: #f8fafc; padding: 11px 13px; color: #4c596a; font-weight: 700; cursor: pointer; text-align: left; }
.insight-tab.active { border-color: var(--purple); background: var(--purple-soft); color: #4f3990; }
.insight-icon { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 8px; background: white; box-shadow: inset 0 0 0 1px #dbe1e9; font-size: 17px; font-weight: 800; }
.insight-panel { padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #fbfcfd; }
.insight-panel[hidden] { display: none; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 14px; }
.section-heading h3 { margin: 4px 0 0; font-size: 19px; }
.section-heading > span { color: var(--muted); font-size: 11px; }
.role-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.role-stat { padding: 10px 12px; border: 1px solid #dce2ea; border-radius: 9px; background: #fbfcfd; }
.role-stat-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; font-size: 11px; line-height: 1.35; }
.role-stat-heading span { color: #4f5d70; }
.role-stat-heading strong { flex: 0 0 auto; color: #263445; }
.role-progress { height: 7px; margin-top: 8px; overflow: hidden; border-radius: 999px; background: #e4e8ee; }
.role-progress > div { height: 100%; border-radius: inherit; background: var(--blue); transition: width .3s ease; }
.challenge-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.challenge-stat { display: flex; align-items: center; gap: 14px; padding: 18px; border: 1px solid; border-radius: 11px; }
.challenge-stat strong { font-size: 28px; }
.challenge-stat span { font-size: 13px; font-weight: 700; }
.challenge-stat.active { background: var(--red-soft); border-color: #e6b5bb; color: #943c47; }
.challenge-stat.resolved { background: var(--green-soft); border-color: #b3d5bc; color: #317248; }
.committee-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.committee-stat { display: flex; align-items: center; gap: 10px; padding: 11px; border: 1px solid #d8e0e9; border-radius: 10px; background: white; color: #4b596b; font-size: 11px; font-weight: 700; }
.committee-stat-icon { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; background: var(--blue-soft); color: var(--blue); font-size: 14px; }
.summary-card {
  display: flex;
  align-items: center;
  gap: 15px;
  min-height: 126px;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 16px;
  background: #fafbfc;
}
.summary-card[data-state="inadequate"] { background: #fff4f5; border-color: #efc4c8; --ring-color: var(--red); }
.summary-card[data-state="partially-adequate"] { background: #fff9e8; border-color: #ead28e; --ring-color: var(--yellow); }
.summary-card[data-state="adequate"] { background: #edf8f0; border-color: #b8d8c1; --ring-color: var(--green); }
.progress-ring {
  --progress: 0deg;
  flex: 0 0 84px;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  display: grid;
  place-content: center;
  text-align: center;
  background: radial-gradient(closest-side, white 73%, transparent 74% 99%, white 100%), conic-gradient(var(--ring-color) var(--progress), #e1e5eb 0);
}
.ring-count { display: block; font-size: 24px; line-height: 1; }
.ring-total { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }
.state-label { display: block; text-transform: capitalize; font-weight: 800; }
.state-copy { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
table { width: 100%; border-collapse: collapse; min-width: 1340px; }
th, td { padding: 13px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
table th:first-child, table td:first-child { position: sticky; left: 0; z-index: 2; background: white; box-shadow: 1px 0 0 var(--line); }
table thead th:first-child { z-index: 4; background: #f7f9fb; }
table tbody tr:hover td:first-child { background: #fafcff; }
th { background: #f7f9fb; color: #586475; font-size: 11px; line-height: 1.35; text-transform: uppercase; letter-spacing: .04em; }
td { font-size: 13px; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fafcff; }
.member-link { border: 0; padding: 0; background: none; color: #176c88; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.delete-member { border: 1px solid #e3b7bc; border-radius: 7px; background: #fff5f6; color: #a33b47; padding: 6px 9px; font-size: 11px; font-weight: 700; cursor: pointer; }
.delete-member:hover { background: var(--red-soft); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.integration-badge { display: inline-block; border-radius: 999px; padding: 6px 9px; font-size: 11px; font-weight: 800; text-transform: capitalize; white-space: nowrap; }
.integration-badge.inadequate { color: #923642; background: var(--red-soft); }
.integration-badge.partially-adequate { color: #7a5a0d; background: var(--yellow-soft); }
.integration-badge.adequate { color: #28643c; background: var(--green-soft); }
.stage-done { color: #34784b; font-weight: 700; }
.stage-left { color: #6b7280; }
.committee-progress-cell { min-width: 220px; }
.committee-line { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid #edf0f4; color: #5d6878; font-size: 11px; }
.committee-line:last-child { border-bottom: 0; }
.committee-line span { max-width: 155px; }
.committee-line strong { white-space: nowrap; font-size: 10px; }
.committee-line.complete strong { color: var(--green); }
.no-committee { display: block; max-width: 180px; color: #8a6470; font-size: 11px; font-style: italic; line-height: 1.4; }
.active-challenge-count { color: #a33b47; font-weight: 800; text-align: center; }
.sort-button { display: inline-flex; align-items: center; gap: 5px; border: 0; padding: 0; background: none; color: inherit; font: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; text-align: left; }
.sort-button span { color: #9aa4b2; font-size: 12px; }
.sort-button.active { color: #176c88; }
.section-column-head { display: grid; gap: 7px; min-width: 115px; }
.section-column-head select { min-height: 30px; padding: 0 7px; border-radius: 6px; font-size: 10px; text-transform: none; letter-spacing: 0; }
.progress-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.progress-head h2 { margin: 4px 0 0; font-size: 24px; }
.progress-head > span { color: var(--muted); font-size: 13px; }
.lifecycle-meta { display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: 12px; }
.current-stage-actions { display: flex; align-items: center; gap: 7px; }
.current-stage-actions > span { border-radius: 999px; background: var(--blue-soft); color: #1e6577; padding: 7px 10px; }
.exception-button { border: 1px solid #bba8e8; border-radius: 999px; background: #f2edff; color: #5a4095; padding: 7px 10px; font-size: 10px; font-weight: 700; cursor: pointer; }
.exception-button:hover { background: #e8defe; }
.progress-track {
  height: 8px;
  background: #e7ebf2;
  border-radius: 999px;
  overflow: hidden;
  margin: 16px 0 14px;
}
.progress-fill {
  height: 100%;
  width: 0;
  background: #3c8d61;
  transition: width .25s ease;
}
.stage-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.stage-tab {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fafbfc;
  padding: 10px;
  cursor: pointer;
  color: #475467;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-weight: 600;
}
.stage-tab.active { border-color: var(--purple); background: var(--purple-soft); color: #4e3592; }
.stage-tab.completed .tab-check {
  background: var(--green);
  color: white;
  border-color: var(--green);
}
.tab-check {
  width: 20px;
  height: 20px;
  border: 1px solid #b8c0cc;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: transparent;
}

.stage-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 18px;
  align-items: start;
}

.journey, .notes { padding: 20px; }
.journey-heading, .notes-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.journey-heading h2, .notes-header h2 { margin: 4px 0 0; font-size: 22px; }
.checklist-actions { display: flex; gap: 7px; margin-left: auto; }
.checklist-actions .secondary-button { min-height: 34px; padding: 0 10px; font-size: 10px; }

.engagement-timer { margin-top: 20px; padding: 14px; border: 1px solid #b9cde0; border-radius: 11px; background: #f4f9fd; }
.timer-heading { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.timer-heading p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.timer-fields { display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)) minmax(140px, .8fr); gap: 10px; align-items: end; margin-top: 12px; }
.timer-fields label { color: #475467; font-size: 10px; font-weight: 700; }
.timer-fields input, .timer-fields select { display: block; width: 100%; min-height: 40px; margin-top: 5px; border: 1px solid #c7d3df; border-radius: 8px; background: white; padding: 0 9px; }
.timer-fields label[hidden] { display: none; }
.next-checkin { min-height: 40px; padding: 8px 10px; border-radius: 8px; background: white; border: 1px solid #d4dde6; }
.next-checkin span { display: block; color: var(--muted); font-size: 9px; }
.next-checkin strong { display: block; margin-top: 3px; font-size: 11px; }
.timer-warning { display: flex; align-items: center; gap: 7px; border: 1px solid #e2a64e; border-radius: 999px; background: #fff3d7; color: #8a5912; padding: 7px 10px; font-size: 10px; }
.timer-warning[hidden] { display: none; }
.timer-warning span { font-size: 16px; }

.committee-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
  padding: 13px 14px;
  border: 1px solid #cfd8e5;
  border-radius: 11px;
  background: #f7f9fc;
}
.committee-toolbar[hidden] { display: none; }
.committee-switcher, .modal-committee-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 7px; }
.committee-chip {
  border: 1px solid #cbd3df;
  border-radius: 999px;
  background: white;
  color: #4e5b6d;
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.committee-chip.active { border-color: var(--purple); background: var(--purple-soft); color: #503990; }
.committee-chip.complete::before { content: "✓ "; color: var(--green); }
.committee-empty-copy { color: var(--muted); font-size: 12px; }
.committee-summary-copy { margin: 12px 0; color: #586475; font-size: 12px; line-height: 1.4; }
.checklist-disabled { opacity: .58; }
.checklist-disabled .check-row { pointer-events: none; }

.completion-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border-radius: 999px;
  background: #f0f2f5;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.status-dot {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #c8ced8;
  color: transparent;
}
.completion-status.complete { background: var(--green-soft); color: #28643c; }
.completion-status.complete .status-dot { background: var(--green); color: white; }

.gate-card, .completion-card {
  max-width: 620px;
  margin: 24px auto;
  text-align: left;
  background: #fff2dc;
  border: 1px solid #f0b965;
  padding: 14px 18px;
  border-radius: 12px;
  position: relative;
}
.gate-label {
  display: block;
  color: #8b5b1f;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .08em;
  margin-bottom: 10px;
  text-align: center;
}
.gate-arrow {
  display: block;
  position: absolute;
  left: 50%;
  bottom: -26px;
  transform: translateX(-50%);
  color: #a7afbc;
  font-size: 20px;
}

.logic-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 38px;
}
.logic-card, .risk-card, .response-card {
  min-height: 150px;
  padding: 15px;
  border-radius: 12px;
  border: 1px solid;
}
.logic-label {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 10px;
  font-weight: 800;
}
.input-card { background: var(--green-soft); border-color: #a9d1b4; }
.activity-card { background: var(--yellow-soft); border-color: #e4c567; }
.output-card { background: var(--orange-soft); border-color: #e2ae80; }
.outcome-card { background: var(--blue-soft); border-color: #8ecad3; }

.completion-card {
  background: var(--purple-soft);
  border-color: #aa95df;
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  transition: .2s ease;
}
.completion-card .logic-label { color: #5e4699; margin-right: 10px; }
.completion-card.complete { background: var(--green-soft); border-color: #78b68b; }
.completion-card.complete .logic-label { color: #28643c; }
.milestone-flag {
  margin-left: auto;
  border-radius: 999px;
  padding: 5px 9px;
  background: rgba(255,255,255,.75);
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.completion-card.complete .milestone-flag { color: #28643c; }

.checklist { display: grid; gap: 9px; margin-top: 12px; }
.gate-card .checklist { max-width: 520px; margin: 0 auto; }
.check-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.35;
  font-size: 13px;
  cursor: pointer;
}
.check-row input { position: absolute; opacity: 0; pointer-events: none; }
.custom-check {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 1px solid #aeb7c4;
  border-radius: 5px;
  background: rgba(255,255,255,.75);
  color: transparent;
  font-size: 12px;
  font-weight: 800;
  transition: .15s ease;
}
.check-row input:focus-visible + .custom-check { outline: 3px solid rgba(37,124,146,.3); outline-offset: 2px; }
.check-row input:checked + .custom-check { background: var(--green); border-color: var(--green); color: white; }
.check-row input:checked ~ .check-copy { color: #53605a; text-decoration: line-through; }

.risk-response-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 22px;
}
.challenge-table-wrap { overflow-x: auto; margin-top: 22px; border: 1px solid #e0a1a8; border-radius: 12px; }
.challenge-table { min-width: 720px; background: white; }
.challenge-table th { background: #fff3f4; color: #713a41; }
.challenge-table th:nth-child(1) { width: 44%; }
.challenge-table th:nth-child(2) { width: 16%; }
.challenge-table th:nth-child(4) { width: 76px; }
.challenge-table td { vertical-align: top; }
.challenge-table textarea { min-height: 112px; padding: 10px; border-color: #d8a9ae; }
.challenge-table .checklist { margin-top: 0; }
.challenge-table-footer { display: flex; justify-content: flex-end; padding: 10px 12px; background: #fff8f8; border-top: 1px solid #efd1d4; }
.empty-challenges { padding: 26px; color: var(--muted); text-align: center; font-style: italic; }
.risk-card { background: var(--red-soft); border-color: #e0a1a8; min-height: 118px; }
.response-card { background: #eef9df; border-color: #b7d48e; min-height: 118px; }
.friction-row { margin-top: 12px; }
.friction-row textarea {
  min-height: 88px;
  padding: 9px 10px;
  border: 1px solid #d3a7ac;
  background: rgba(255,255,255,.78);
  line-height: 1.4;
}

.notes { position: sticky; top: 18px; }
.autosave-copy { font-size: 11px; color: var(--muted); }
.notes > label { margin-top: 20px; }
.quick-prompts {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.quick-prompts > span { width: 100%; font-size: 11px; color: var(--muted); }
.quick-prompts button {
  border: 1px solid #d3d9e2;
  border-radius: 999px;
  background: #f8fafc;
  padding: 6px 9px;
  font-size: 11px;
  cursor: pointer;
}
.primary-button {
  width: 100%;
  border: 0;
  border-radius: 9px;
  background: #0e2d44;
  color: white;
  padding: 12px;
  font-weight: 700;
  margin-top: 18px;
  cursor: pointer;
}
.primary-button.compact-button { width: auto; margin-top: 0; padding: 10px 14px; }

.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  background: #17202a;
  color: white;
  border-radius: 8px;
  padding: 10px 14px;
  box-shadow: var(--shadow);
  font-size: 13px;
  z-index: 30;
}

.committee-dialog {
  width: min(820px, calc(100vw - 28px));
  max-height: calc(100vh - 40px);
  border: 0;
  border-radius: 16px;
  padding: 0;
  box-shadow: 0 24px 70px rgba(14,45,68,.24);
}
.committee-dialog::backdrop { background: rgba(14,28,42,.48); backdrop-filter: blur(2px); }
.dialog-shell { padding: 22px; }
.dialog-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.dialog-heading h2 { margin: 4px 0 0; }
.icon-button { border: 0; border-radius: 8px; background: #f0f2f5; width: 34px; height: 34px; color: #536071; font-size: 22px; cursor: pointer; }
.committee-add-row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; margin: 20px 0 14px; }
.committee-add-row label { font-size: 12px; font-weight: 700; }
.modal-committee-tabs { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.modal-checklists { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.modal-checklists .logic-card { min-height: 190px; }
.empty-committee { margin-top: 16px; padding: 28px; border: 1px dashed #c6cfdb; border-radius: 10px; color: var(--muted); text-align: center; font-size: 13px; }
.dialog-footer { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; }

@media (max-width: 1050px) {
  .stage-layout { grid-template-columns: 1fr; }
  .notes { position: static; }
  .logic-grid { grid-template-columns: repeat(2, 1fr); }
  textarea { min-height: 220px; }
  .integration-summary { grid-template-columns: 1fr; }
  .role-stats { grid-template-columns: 1fr; }
  .timer-fields { grid-template-columns: 1fr 1fr; }
  .topbar { flex-wrap: wrap; }
  .help-grid { grid-template-columns: 1fr; }
  .resource-stage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .primary-nav { order: 3; width: 100%; justify-content: center; }
  .notification-defaults-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .email-composer-grid { grid-template-columns: 1fr; }
  .member-meta { grid-template-columns: repeat(2, 1fr); }
  .journey-heading { flex-wrap: wrap; }
  .checklist-actions { order: 3; width: 100%; margin-left: 0; }
  .attendance-charts { grid-template-columns: 1fr; }
  .committee-summary { grid-template-columns: 1fr 1fr; }
  .add-member-form { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .app-shell { padding: 12px; }
  .member-bar { grid-template-columns: 1fr; }
  .member-selector-row { align-items: stretch; flex-direction: column; }
  .member-scope-filter { width: 100%; margin-left: 0; }
  .member-meta { grid-template-columns: 1fr; }
  .member-meta > div { border-left: 0; border-top: 1px solid var(--line); padding: 10px 0 0; }
  .stage-tabs { grid-template-columns: 1fr 1fr; }
  .logic-grid, .risk-response-grid { grid-template-columns: 1fr; }
  .progress-head, .journey-heading { align-items: flex-start; flex-direction: column; }
  .lifecycle-meta { align-items: flex-start; flex-direction: column; gap: 7px; }
  .current-stage-actions { align-items: flex-start; flex-direction: column; }
  .exception-stage-list, .exception-requirement-groups { grid-template-columns: 1fr; }
  .notification-defaults-grid { grid-template-columns: 1fr; }
  .notification-defaults-footer { align-items: flex-start; flex-direction: column; }
  .dashboard-heading { align-items: flex-start; flex-direction: column; }
  .add-member-form { grid-template-columns: 1fr; }
  .insight-tabs, .challenge-summary, .committee-summary { grid-template-columns: 1fr; }
  .brand-lockup img { width: 110px; }
  .timer-heading { align-items: flex-start; flex-direction: column; }
  .timer-fields { grid-template-columns: 1fr; }
  .primary-nav { overflow-x: auto; justify-content: flex-start; }
  .help-hero { align-items: flex-start; flex-direction: column; }
  .help-jump-links { justify-content: flex-start; }
  .resource-stage-grid { grid-template-columns: 1fr; }
  .nav-item { white-space: nowrap; }
  .attendance-group-header { grid-template-columns: 1fr auto; }
  .attendance-group-header .add-meeting { grid-column: 1 / -1; }
  .attendance-tabbar { align-items: stretch; flex-direction: column; }
  .email-output { grid-template-columns: 1fr; }
  .email-output-heading, .email-output label:first-of-type { grid-column: auto; }
  .attendance-heading { align-items: flex-start; flex-direction: column; }
  .notification-heading { align-items: flex-start; flex-direction: column; }
  .attendance-filters { width: 100%; align-items: stretch; flex-direction: column; }
  .attendance-filters select { width: 100%; }
  .individual-attendance-stats { grid-template-columns: 1fr; }
  .committee-toolbar { align-items: flex-start; flex-direction: column; }
  .committee-add-row, .modal-checklists { grid-template-columns: 1fr; }
}