:root {
  --directory-blue:#0077B6;
  --directory-navy:#023E8A;
  --directory-orange:#FF8A5B;
  --directory-ink:#172026;
  --directory-muted:#5D6B73;
  --directory-line:#D7E0E6;
  --directory-soft:#F4F8FA;
  --directory-white:#FFFFFF;
  --directory-danger:#A32626;
  --directory-success:#18704D;
}

* {
  box-sizing:border-box;
}

.directory-body {
  margin:0;
  background:var(--directory-soft);
  color:var(--directory-ink);
  font:16px/1.5 Arial, sans-serif;
}

.directory-body a {
  color:var(--directory-blue);
}

.directory-nav-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:16px clamp(18px, 4vw, 48px);
  background:var(--directory-blue);
  color:var(--directory-white);
}

.directory-brand {
  color:var(--directory-white);
  font-weight:700;
  text-decoration:none;
  line-height:1.1;
}

a.directory-brand {
  color:var(--directory-white);
}

.directory-brand span {
  display:block;
  font-size:13px;
  font-weight:400;
  opacity:0.9;
}

.directory-nav-links {
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  justify-content:flex-end;
}

.directory-nav-links a {
  color:var(--directory-white);
  font-weight:700;
  text-decoration:none;
}

.directory-container {
  width:min(1120px, calc(100% - 32px));
  margin:0 auto;
}

.directory-main {
  padding:36px 0 56px;
}

.directory-hero {
  background:linear-gradient(120deg, var(--directory-navy), var(--directory-blue));
  color:var(--directory-white);
  padding:52px 0;
}

.directory-hero .directory-container {
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(300px, 420px);
  gap:42px;
  align-items:center;
}

h1 {
  margin:0 0 20px 0;
}

.directory-copy h1,
.directory-title-row h1 {
  margin:0 0 20px 0;
  font-size:clamp(34px, 5vw, 56px);
  line-height:1.05;
}

.directory-lede {
  max-width:680px;
  font-size:20px;
  margin:18px 0 0;
}

.directory-kicker {
  margin:0 0 8px;
  color:var(--directory-orange);
  font-size:13px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
}

.directory-panel,
.directory-info-block {
  background:var(--directory-white);
  border:1px solid var(--directory-line);
  border-radius:8px;
  padding:24px;
  box-shadow:0 10px 28px rgba(23, 32, 38, 0.06);
}

.directory-login-panel h2,
.directory-panel h2,
.directory-info-block h2,
.directory-results-heading h2 {
  margin:0 0 14px;
  color:var(--directory-navy);
  font-size:24px;
  line-height:1.2;
}

.directory-subpanel h3,
.directory-contact-block h3,
.directory-admin-account h3,
.directory-teacher-row h3 {
  margin:0 0 12px;
  color:var(--directory-ink);
  font-size:18px;
  line-height:1.2;
}

.directory-grid {
  display:grid;
  gap:18px;
}

.directory-grid-3 {
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

.directory-form {
  display:grid;
  gap:22px;
}

.directory-section-heading,
.directory-title-row,
.directory-child-row-header,
.directory-family-top {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
}

.directory-section-heading p {
  margin:3px 0 0;
  color:var(--directory-muted);
}

.directory-subpanel {
  border:1px solid var(--directory-line);
  border-radius:8px;
  padding:18px;
  margin-top:18px;
  background:#FBFDFE;
}

.directory-parent-2-toggle {
  margin-top:18px;
}

.directory-field-grid {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
}

.directory-field-grid-child {
  grid-template-columns:minmax(160px, 1.5fr) 90px minmax(130px, 1fr) minmax(180px, 1.3fr);
}

.directory-search-form,
.directory-teacher-form {
  display:grid;
  grid-template-columns:minmax(220px, 1fr) minmax(160px, 0.45fr) minmax(200px, 0.7fr) auto;
  gap:16px;
  align-items:end;
}

.directory-body label {
  display:block;
  margin:0;
  color:var(--directory-ink);
  font-weight:700;
}

.directory-input {
  display:block;
  width:100%;
  min-height:44px;
  margin-top:6px;
  padding:10px 12px;
  border:1px solid #B9C7D0;
  border-radius:6px;
  background:var(--directory-white);
  color:var(--directory-ink);
  font:16px/1.4 Arial, sans-serif;
}

textarea.directory-input {
  min-height:78px;
  resize:vertical;
}

.directory-initial-input {
  text-transform:uppercase;
}

.directory-checkbox-grid {
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-top:14px;
}

.directory-check-row {
  display:flex;
  align-items:flex-start;
  gap:9px;
  font-weight:700;
}

.directory-check-row input {
  flex:0 0 auto;
  margin-top:4px;
}

.directory-button,
.directory-link-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:9px 16px;
  border:1px solid transparent;
  border-radius:6px;
  font:700 15px/1.2 Arial, sans-serif;
  text-decoration:none;
  cursor:pointer;
}

.directory-button-primary {
  background:var(--directory-orange);
  color:#111;
  border-color:var(--directory-orange);
}

.directory-button-secondary {
  background:var(--directory-white);
  color:var(--directory-navy);
  border-color:var(--directory-blue);
}

.directory-button-danger {
  background:var(--directory-white);
  color:var(--directory-danger);
  border-color:var(--directory-danger);
}

.directory-link-button {
  min-height:0;
  padding:0;
  background:transparent;
  color:var(--directory-danger);
  border:none;
}

.directory-text-link-button {
  display:inline-flex;
  align-items:center;
  padding:0;
  border:none;
  background:transparent;
  color:var(--directory-navy);
  font:700 15px/1.2 Arial, sans-serif;
  text-decoration:underline;
  text-underline-offset:2px;
  cursor:pointer;
}

.directory-text-link-button:hover {
  color:var(--directory-orange);
}

.directory-actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.directory-inline-form {
  margin:0;
}

.directory-search-actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  justify-content:flex-end;
}

.directory-opted-out-panel,
.directory-remove-panel {
  margin-top:22px;
}

.directory-admin-tabs {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:20px 0 22px;
  border-bottom:1px solid var(--directory-line);
}

.directory-admin-tabs a {
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:9px 14px;
  border:1px solid var(--directory-line);
  border-bottom:none;
  border-radius:6px 6px 0 0;
  background:var(--directory-white);
  color:var(--directory-navy);
  font-weight:700;
  text-decoration:none;
}

.directory-admin-tabs a[aria-current="page"] {
  background:var(--directory-navy);
  border-color:var(--directory-navy);
  color:var(--directory-white);
}

.directory-note,
.directory-muted {
  color:var(--directory-muted);
}

.directory-alert {
  border-radius:8px;
  padding:14px 16px;
  margin-bottom:18px;
  border:1px solid var(--directory-line);
  background:var(--directory-white);
}

.directory-alert ul {
  margin:8px 0 0;
  padding-left:20px;
}

.directory-alert-success {
  border-color:#BCE0C2;
  background:#F0FBF2;
  color:#145A31;
}

.directory-alert-error {
  border-color:#E2B5B5;
  background:#FFF4F4;
  color:#7A1F1F;
}

.directory-alert-info {
  border-color:#BFD7E8;
  background:#F2F8FC;
  color:#174966;
}

.directory-status {
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:4px 10px;
  border-radius:999px;
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
}

.directory-status-approved {
  background:#E8F7EF;
  color:var(--directory-success);
}

.directory-status-admin {
  background:#E8EEF9;
  color:var(--directory-navy);
}

.directory-status-pending {
  background:#FFF4E0;
  color:#7D4A00;
}

.directory-status-disabled,
.directory-status-rejected {
  background:#FCEBEB;
  color:var(--directory-danger);
}

.directory-results-heading {
  margin:28px 0 12px;
}

.directory-results-summary {
  margin:6px 0 0;
  color:var(--directory-muted);
}

.directory-results {
  display:grid;
  gap:18px;
}

.directory-family-card h2 {
  margin-bottom:8px;
}

.directory-family-top {
  flex-wrap:wrap;
}

.directory-family-edit-link {
  flex:0 0 auto;
}

.directory-eyebrow {
  margin:10px 0 6px;
  color:var(--directory-muted);
  font-size:12px;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
}

.directory-eyebrow-contacts {
  margin-top:18px;
}

.directory-child-list {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.directory-child-chip {
  display:inline-flex;
  flex-wrap:wrap;
  gap:7px;
  align-items:center;
  padding:6px 10px;
  border-radius:6px;
  background:#EEF6FA;
  color:var(--directory-ink);
  font-weight:700;
}

.directory-child-chip span {
  color:var(--directory-muted);
  font-weight:400;
}

.directory-contact-grid {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:18px;
  margin-top:18px;
}

.directory-contact-block {
  border-top:1px solid var(--directory-line);
  padding-top:16px;
}

.directory-contact-block p {
  margin:0 0 8px;
}

.directory-admin-list,
.directory-teacher-list {
  display:grid;
  gap:14px;
}

.directory-admin-account,
.directory-teacher-row {
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:18px;
  align-items:start;
  padding:16px 0;
  border-top:1px solid var(--directory-line);
}

.directory-admin-account:first-child,
.directory-teacher-row:first-child {
  border-top:none;
}

.directory-admin-account p {
  margin:0 0 8px;
}

.directory-teacher-row p {
  margin:0 0 8px;
}

.directory-admin-actions {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-end;
}

.directory-admin-action-option {
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-right:auto;
  color:var(--directory-ink);
  font-weight:700;
}

.directory-admin-action-option input {
  flex:0 0 auto;
  margin-top:4px;
}

.directory-teacher-row {
  align-items:center;
}

.directory-teacher-toggle-row {
  margin-top:-12px;
  padding-top:0;
  border-top:none;
}

@media (max-width: 900px) {
  .directory-hero .directory-container,
  .directory-grid-3,
  .directory-field-grid,
  .directory-field-grid-child,
  .directory-search-form,
  .directory-teacher-form,
  .directory-contact-grid,
  .directory-admin-account,
  .directory-teacher-row {
    grid-template-columns:1fr;
  }

  .directory-title-row,
  .directory-section-heading,
  .directory-child-row-header,
  .directory-family-top {
    flex-direction:column;
  }

  .directory-nav-bar {
    align-items:flex-start;
    flex-direction:column;
  }

  .directory-nav-links {
    justify-content:flex-start;
  }
}

@media (max-width: 520px) {
  .directory-container {
    width:min(100% - 22px, 1120px);
  }

  .directory-panel,
  .directory-info-block {
    padding:18px;
  }

  .directory-copy h1,
  .directory-title-row h1 {
    font-size:32px;
  }

  .directory-lede {
    font-size:18px;
  }
}