/* Reach shared visual foundation
   Semantic tokens and shared component states only; feature layouts stay intact. */

:root{
  /* Existing Reach palette expressed as interface roles. */
  --vf-surface-canvas:#F7F8F4;
  --vf-surface-navigation:#FCFBF8;
  --vf-surface-content:#FFFFFF;
  --vf-surface-subtle:#F2F5F0;
  --vf-surface-metric:#F5F8F4;
  --vf-surface-actionable:#FFFFFF;
  --vf-surface-selected:#E5EEE7;
  --vf-surface-disabled:#EEF1ED;
  --vf-text-primary:#13263A;
  --vf-text-secondary:#53636C;
  --vf-text-tertiary:#66757D;
  --vf-border:#CDD7CF;
  --vf-border-strong:#AAB9AE;
  --vf-border-selected:#7FA18A;
  --vf-focus:#0D5A3B;
  --vf-focus-ring:rgba(13,90,59,.25);
  --vf-primary:#0D5A3B;
  --vf-primary-hover:#083D2A;
  --vf-primary-pressed:#062F20;
  --vf-secondary-bg:#E9F2EC;
  --vf-secondary-hover:#DDEADF;
  --vf-danger:#A64040;
  --vf-danger-hover:#8C3333;
  --vf-danger-soft:#F8EAEA;
  --vf-success:#2F6F4E;
  --vf-success-soft:#EAF2EC;
  --vf-warning:#8A5A16;
  --vf-warning-soft:#FBF1D7;

  --vf-font-display:Recoleta,"Iowan Old Style",Palatino,Georgia,serif;
  --vf-font-interface:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --vf-type-page-eyebrow:11px;
  --vf-type-page-title:clamp(38px,3vw,50px);
  --vf-type-page-description:16px;
  --vf-type-section-title:24px;
  --vf-type-card-title:17px;
  --vf-type-body:15px;
  --vf-type-meta:13px;
  --vf-type-label:13px;
  --vf-type-table:11px;

  --vf-space-1:4px;
  --vf-space-2:8px;
  --vf-space-3:12px;
  --vf-space-4:16px;
  --vf-space-5:20px;
  --vf-space-6:24px;
  --vf-space-8:32px;
  --vf-space-10:40px;
  --vf-space-12:48px;
  --vf-space-16:64px;
  --vf-page-gutter:48px;
  --vf-section-gap:32px;
  --vf-card-padding:20px;
  --vf-grid-gap:16px;
  --vf-form-gap:16px;
  --vf-modal-section-gap:24px;

  --vf-radius-control:9px;
  --vf-radius-card:14px;
  --vf-radius-modal:18px;
  --vf-shadow-content:0 1px 2px rgba(19,38,58,.035);
  --vf-shadow-actionable:0 5px 16px rgba(19,38,58,.055);
  --vf-shadow-hover:0 9px 22px rgba(19,38,58,.085);
}

html[data-theme="dark"]{
  --vf-surface-canvas:#0C1613;
  --vf-surface-navigation:#0C1613;
  --vf-surface-content:#17251F;
  --vf-surface-subtle:#14231D;
  --vf-surface-metric:#182821;
  --vf-surface-actionable:#17251F;
  --vf-surface-selected:#1B3028;
  --vf-surface-disabled:#1A2822;
  --vf-text-primary:#F1F5F2;
  --vf-text-secondary:#B2C1BA;
  --vf-text-tertiary:#98AAA1;
  --vf-border:#385046;
  --vf-border-strong:#587267;
  --vf-border-selected:#72C995;
  --vf-focus:#72C995;
  --vf-focus-ring:rgba(114,201,149,.42);
  --vf-primary:#72C995;
  --vf-primary-hover:#8FD8AB;
  --vf-primary-pressed:#5DB47F;
  --vf-secondary-bg:#1B3028;
  --vf-secondary-hover:#244036;
  --vf-danger:#F08B84;
  --vf-danger-hover:#F3A09A;
  --vf-danger-soft:#3B2222;
  --vf-success:#72C995;
  --vf-success-soft:#193227;
  --vf-warning:#E5C56E;
  --vf-warning-soft:#372F1D;
  --vf-shadow-content:0 1px 2px rgba(0,0,0,.18);
  --vf-shadow-actionable:0 5px 18px rgba(0,0,0,.22);
  --vf-shadow-hover:0 10px 24px rgba(0,0,0,.3);
}

/* Typography hierarchy */
body{
  color:var(--vf-text-primary);
  font-family:var(--vf-font-interface);
  font-size:var(--vf-type-body);
  line-height:1.6;
}

.topbar h1,
.page-title h1{
  margin:var(--vf-space-1) 0 var(--vf-space-2);
  color:var(--vf-text-primary);
  font-family:var(--vf-font-display);
  font-size:var(--vf-type-page-title);
  font-weight:500;
  line-height:1.04;
  letter-spacing:-.03em;
}

.topbar p,
.page-title p{
  max-width:900px;
  margin:0;
  color:var(--vf-text-secondary);
  font-size:var(--vf-type-page-description);
  line-height:1.55;
}

.eyebrow,
.goal-deck-surface-kicker{
  color:var(--vf-primary);
  font-size:var(--vf-type-page-eyebrow);
  font-weight:800;
  line-height:1.25;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.section-head h2{
  margin:0 0 var(--vf-space-1);
  color:var(--vf-text-primary);
  font-family:var(--vf-font-interface);
  font-size:var(--vf-type-section-title);
  font-weight:720;
  line-height:1.25;
  letter-spacing:-.018em;
}

.section-head p{
  margin:0;
  color:var(--vf-text-secondary);
  font-size:14px;
  line-height:1.55;
}

.card h3,
.goal-card h3,
.teacher-card h3,
.all-record-card h3,
.mini-head h3{
  color:var(--vf-text-primary);
  font-family:var(--vf-font-interface);
  font-size:var(--vf-type-card-title);
  font-weight:720;
  line-height:1.35;
  letter-spacing:-.012em;
}

.subtle,
.muted,
.goal-footer,
.message-meta,
.message-time,
.all-record-person,
.detail-metric span{
  color:var(--vf-text-secondary);
  font-size:var(--vf-type-meta);
  line-height:1.5;
}

.field>span,
.field-label,
.account-email-controls label>span{
  color:var(--vf-text-primary);
  font-size:var(--vf-type-label);
  font-weight:720;
  line-height:1.35;
}

table th,
.staff-table th,
.admin-members-table th,
.oversight-table th,
.login-activity-table th,
.onboarding-table th{
  color:var(--vf-text-tertiary);
  font-size:var(--vf-type-table);
  font-weight:780;
  line-height:1.3;
  letter-spacing:.085em;
  text-transform:uppercase;
}

/* Shared spacing rhythm */
.main{padding:var(--vf-space-10) var(--vf-page-gutter) var(--vf-space-16)}
.topbar,.page-title{gap:var(--vf-space-8);margin-bottom:var(--vf-section-gap)}
.section-head{gap:var(--vf-space-4);margin:var(--vf-section-gap) 0 var(--vf-space-4)}
.grid,.goal-list,.coach-grid,.leadership-grid{gap:var(--vf-grid-gap)}
.stats{gap:var(--vf-grid-gap);margin-bottom:var(--vf-space-6)}
.card,.goal-card,.teacher-card,.all-record-card{padding:var(--vf-card-padding)}
.form-grid{gap:var(--vf-form-gap)}
.form-two{gap:var(--vf-form-gap)}
.actions{gap:var(--vf-space-2);margin-top:var(--vf-space-4)}
.modal{padding:var(--vf-space-6)}
.modal-head{gap:var(--vf-space-5);margin-bottom:var(--vf-modal-section-gap);padding-bottom:var(--vf-space-4)}
.detail-section,.account-setting-section{margin-top:var(--vf-space-5);padding-top:var(--vf-space-5)}

/* Surface hierarchy */
.reach-sidebar{
  background:var(--vf-surface-navigation);
  border-right-color:var(--vf-border);
  box-shadow:4px 0 16px rgba(19,38,58,.035);
}

.card,
.goal-card,
.teacher-card,
.all-record-card,
.timeline-content,
.digest-card{
  border:1px solid var(--vf-border);
  border-radius:var(--vf-radius-card);
  background:var(--vf-surface-content);
  box-shadow:var(--vf-shadow-content);
}

.stats .stat,
.evidence-summary .card,
.all-records-summary .card,
.leadership-mini-stat{
  min-height:108px;
  border:1px solid var(--vf-border);
  border-top:2px solid var(--vf-primary);
  background:var(--vf-surface-metric);
  box-shadow:none;
}

.stats .stat strong,
.evidence-summary .card strong,
.all-records-summary .card strong,
.leadership-mini-stat strong,
.detail-metric strong{
  color:var(--vf-text-primary);
  font-family:var(--vf-font-display);
  font-weight:500;
  font-variant-numeric:tabular-nums lining-nums;
  letter-spacing:-.02em;
}

.stats .stat span,
.evidence-summary .card span,
.all-records-summary .card span,
.leadership-mini-stat span{
  color:var(--vf-text-secondary);
  font-size:var(--vf-type-meta);
  font-weight:600;
}

.area-card,
button.goal-card,
.message-row,
.goal-deck-add,
.account-shortcuts button{
  border-color:var(--vf-border-strong)!important;
  background:var(--vf-surface-actionable)!important;
  box-shadow:var(--vf-shadow-actionable)!important;
}

.area-card:hover,
button.goal-card:hover,
.message-row:hover,
.goal-deck-add:hover,
.account-shortcuts button:hover{
  border-color:var(--vf-border-selected)!important;
  background:var(--vf-surface-content)!important;
  box-shadow:var(--vf-shadow-hover)!important;
}

.notice,
.requirements,
.oversight-privacy,
.leadership-privacy,
.onboarding-private-note{
  border:1px solid var(--vf-border);
  border-left:3px solid var(--vf-primary);
  border-radius:var(--vf-radius-control);
  background:var(--vf-surface-subtle);
  color:var(--vf-text-secondary);
  box-shadow:none;
}

.notice-success{border-color:#BCD4C3;border-left-color:var(--vf-success);background:var(--vf-success-soft);color:var(--vf-success)}
.notice-error{border-color:#E2BDBD;border-left-color:var(--vf-danger);background:var(--vf-danger-soft);color:var(--vf-danger)}
.requirements.warn{border-color:#E3CF9E;border-left-color:var(--vf-warning);background:var(--vf-warning-soft);color:var(--vf-warning)}

/* Navigation, selection, and pressed states */
.sidebar-section-label,
.sidebar-footer-label{color:var(--vf-text-tertiary)}
.reach-sidebar .nav button{color:#344554;font-weight:600}
.reach-sidebar .nav button:hover{background:var(--vf-surface-subtle);color:var(--vf-text-primary)}
.reach-sidebar .nav button.active,
.reach-sidebar .nav button.active:hover{
  background:var(--vf-surface-selected);
  color:var(--vf-text-primary);
}
.reach-sidebar .nav button.active::before{background:var(--vf-primary)}
.reach-sidebar .nav button:disabled,
.segmented button:disabled,
.area-card:disabled,
.account-shortcuts button:disabled{
  background:transparent!important;
  box-shadow:none!important;
  color:var(--vf-text-tertiary)!important;
  cursor:not-allowed;
  opacity:.56;
}

.segmented{
  gap:var(--vf-space-1);
  padding:var(--vf-space-1);
  border:1px solid var(--vf-border);
  border-radius:11px;
  background:var(--vf-surface-subtle);
}
.segmented button{
  min-height:38px;
  border-radius:7px;
  color:var(--vf-text-secondary);
  font-size:13px;
  font-weight:700;
}
.segmented button:hover{background:var(--vf-surface-content);color:var(--vf-text-primary)}
.segmented button.active,
.segmented button[aria-pressed="true"]{
  background:var(--vf-surface-content);
  color:var(--vf-primary);
  box-shadow:0 1px 3px rgba(19,38,58,.08);
}
.segmented button:active{background:var(--vf-surface-selected)}

/* Action hierarchy */
.btn{
  min-height:44px;
  padding:0 var(--vf-space-4);
  border:1px solid transparent;
  border-radius:var(--vf-radius-control);
  box-shadow:none;
  font-size:14px;
  font-weight:720;
  line-height:1.2;
  transition:background-color 140ms ease,border-color 140ms ease,color 140ms ease,box-shadow 140ms ease;
}
.btn:hover{transform:none}
.btn-primary{border-color:var(--vf-primary);background:var(--vf-primary);color:#FFF}
.btn-primary:hover{border-color:var(--vf-primary-hover);background:var(--vf-primary-hover);color:#FFF}
.btn-primary:active{border-color:var(--vf-primary-pressed);background:var(--vf-primary-pressed);box-shadow:inset 0 2px 3px rgba(0,0,0,.16)}
.btn-secondary{border-color:#BCD0C1;background:var(--vf-secondary-bg);color:#174A32}
.btn-secondary:hover{border-color:var(--vf-border-selected);background:var(--vf-secondary-hover);color:var(--vf-primary-hover)}
.btn-secondary:active{background:var(--vf-surface-selected);box-shadow:inset 0 1px 2px rgba(19,38,58,.12)}
.btn-ghost{border-color:var(--vf-border-strong);background:var(--vf-surface-content);color:var(--vf-text-primary)}
.btn-ghost:hover{border-color:var(--vf-primary);background:var(--vf-surface-subtle);color:var(--vf-primary)}
.btn-ghost:active{background:var(--vf-surface-selected);box-shadow:inset 0 1px 2px rgba(19,38,58,.12)}
.btn-danger{border-color:var(--vf-danger);background:var(--vf-danger-soft);color:var(--vf-danger)}
.btn-danger:hover{border-color:var(--vf-danger-hover);background:var(--vf-danger);color:#FFF}
.btn-danger:active{background:var(--vf-danger-hover);box-shadow:inset 0 2px 3px rgba(0,0,0,.14);color:#FFF}
.btn:disabled,
.btn[aria-disabled="true"]{
  border-color:var(--vf-border);
  background:var(--vf-surface-disabled);
  box-shadow:none;
  color:var(--vf-text-tertiary);
  cursor:not-allowed;
  opacity:.68;
}

/* Form controls */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="number"],
input[type="password"],
textarea,
select,
.field input,
.field textarea,
.field select,
.staff-table select,
.admin-members-table select,
.permission-choice select{
  min-height:44px;
  border:1px solid var(--vf-border-strong);
  border-radius:var(--vf-radius-control);
  background:var(--vf-surface-content);
  color:var(--vf-text-primary);
  box-shadow:none;
}
textarea{padding:var(--vf-space-3) var(--vf-space-4);line-height:1.5}
input::placeholder,textarea::placeholder{color:var(--vf-text-tertiary);opacity:.9}
input:hover,textarea:hover,select:hover{border-color:var(--vf-border-selected)}
input:disabled,textarea:disabled,select:disabled{
  border-color:var(--vf-border);
  background:var(--vf-surface-disabled);
  color:var(--vf-text-tertiary);
  cursor:not-allowed;
  opacity:1;
}
input[type="checkbox"],input[type="radio"]{accent-color:var(--vf-primary)}

/* One consistent keyboard focus treatment. */
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
a:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--vf-focus-ring);
  outline-offset:2px;
}
.field input:focus,
.field textarea:focus,
.field select:focus,
.staff-table select:focus,
.admin-members-table select:focus,
.permission-choice select:focus{
  border-color:var(--vf-focus);
  box-shadow:0 0 0 3px var(--vf-focus-ring);
  outline:0;
}

/* Compact, restrained status language. */
.badge,
.onboarding-badge,
.onboarding-status,
.leadership-status{
  display:inline-flex;
  min-height:24px;
  align-items:center;
  padding:3px 8px;
  border:1px solid var(--vf-border);
  border-radius:999px;
  background:var(--vf-surface-subtle);
  color:var(--vf-text-secondary);
  font-size:11px;
  font-weight:760;
  line-height:1.2;
}
.badge.professional,
.badge.on_track,
.badge.strong_progress,
.onboarding-status.redeemed,
.leadership-status.good{
  border-color:#C4D8C9;
  background:var(--vf-success-soft);
  color:#245D40;
}
.badge.faith,
.badge.review_due,
.onboarding-status.invited,
.leadership-status.warn{
  border-color:#E5D09A;
  background:var(--vf-warning-soft);
  color:var(--vf-warning);
}
.badge.support_needed,
.onboarding-status.failed{
  border-color:#E4BDBD;
  background:var(--vf-danger-soft);
  color:var(--vf-danger);
}
.badge.active,
.badge.completed,
.badge.archived,
.badge.cancelled,
.badge.not_started,
.leadership-status.neutral{
  border-color:var(--vf-border);
  background:var(--vf-surface-subtle);
  color:var(--vf-text-secondary);
}

/* Shared icon geometry. */
.sidebar-nav-icon{width:20px;height:20px;stroke-width:1.8}
.icon-btn{
  width:42px;
  height:42px;
  display:inline-grid;
  padding:0;
  border:1px solid var(--vf-border-strong);
  border-radius:var(--vf-radius-control);
  place-items:center;
  background:var(--vf-surface-content);
  color:var(--vf-text-primary);
  font-size:20px;
  font-weight:500;
  line-height:1;
}
.icon-btn:hover{border-color:var(--vf-primary);background:var(--vf-surface-subtle);color:var(--vf-primary)}
.icon-btn:active{background:var(--vf-surface-selected)}
.area-card-arrow{width:20px;min-width:20px;font-size:20px;line-height:1;text-align:center}

/* Modal and table separators remain visible without becoming heavy. */
.modal{border:1px solid var(--vf-border);border-radius:var(--vf-radius-modal);background:var(--vf-surface-content)}
.modal-head{border-bottom:1px solid var(--vf-border)}
.modal h2{color:var(--vf-text-primary);font-size:28px;font-weight:720;line-height:1.2;letter-spacing:-.018em}
.detail-section,.account-setting-section{border-top-color:var(--vf-border)}
.staff-table td,
.admin-members-table td,
.oversight-table td,
.login-activity-table td,
.onboarding-table td{
  border-color:var(--vf-border)!important;
  background:var(--vf-surface-content);
}

html[data-theme="dark"] .reach-sidebar .nav button{color:#C1CDC7}
html[data-theme="dark"] .reach-sidebar .nav button:hover{background:var(--vf-surface-subtle);color:var(--vf-text-primary)}
html[data-theme="dark"] .btn-primary{color:#0C1613}
html[data-theme="dark"] .btn-primary:hover{color:#0C1613}
html[data-theme="dark"] .btn-secondary{border-color:#416152;color:#D9F0E2}
html[data-theme="dark"] .btn:disabled,
html[data-theme="dark"] .btn[aria-disabled="true"]{color:var(--vf-text-tertiary)}
html[data-theme="dark"] .badge.professional,
html[data-theme="dark"] .badge.on_track,
html[data-theme="dark"] .badge.strong_progress,
html[data-theme="dark"] .onboarding-status.redeemed,
html[data-theme="dark"] .leadership-status.good{border-color:#426454;color:#D9F0E2}
html[data-theme="dark"] .badge.faith,
html[data-theme="dark"] .badge.review_due,
html[data-theme="dark"] .onboarding-status.invited,
html[data-theme="dark"] .leadership-status.warn{border-color:#806D39;color:#F0D98F}
html[data-theme="dark"] .badge.support_needed,
html[data-theme="dark"] .onboarding-status.failed{border-color:#7D4747;color:#F3B0AA}
html[data-theme="dark"] .notice-success{border-color:#426454;color:#A8DDBB}
html[data-theme="dark"] .notice-error{border-color:#7D4747;color:#F3B0AA}
html[data-theme="dark"] .requirements.warn{border-color:#806D39;color:#F0D98F}

@media(max-width:1100px){:root{--vf-page-gutter:32px}.main{padding-top:32px;padding-bottom:56px}}
@media(max-width:900px){:root{--vf-page-gutter:24px}.main{padding-top:28px;padding-bottom:48px}}
@media(max-width:620px){
  :root{--vf-page-gutter:16px;--vf-section-gap:24px;--vf-card-padding:16px;--vf-grid-gap:12px;--vf-modal-section-gap:20px}
  .main{padding-top:24px;padding-bottom:40px}
  .topbar h1,.page-title h1{font-size:36px}
  .topbar,.page-title{gap:var(--vf-space-4)}
  .modal{padding:var(--vf-space-5)}
}

@media(prefers-reduced-motion:reduce){
  .btn,.icon-btn,.segmented button,.area-card,button.goal-card,.message-row,.account-shortcuts button{transition:none!important}
}