/* ======================================================
   Outlook East Website — styles.css
   Modal Refactor: Chunk 1–3C + 3C.1 (default hidden modals)
   Font: Arial
====================================================== */
:root {
  --oe-green: #537B72; /*Existing header green. Old #49746C*/
  --oe-warm-bg: #F5F3EA;
  --oe-band: #EFECDD;
  --oe-card: #E3E5D7;
  --oe-link: #415295;
  --oe-hover: #7F978B;
  --oe-accent: #DEB721; /* placeholder: adjust to match your sign's yellow Old: D8C65A*/
}

/* Breakpoints:
/* Mobile: <=700 */
/* Tablet: 701-1024 */
/* Desktop: 1025+ */
/* Large: 1100+ */
*/

/* Base reset (restored) */
*,*::before,*::after{box-sizing:border-box;}
body{
  margin:0;
  font-family: Arial, sans-serif;
  background: var(--oe-warm-bg);
  color:#333;
}

/* ================= Accessibility Utilities ================= */
/* Hide visually but keep available to screen readers */
.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;
}


/* ================= Header / Navigation ================= */
.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 32px;
  background:var(--oe-green);
}
.logo{height:48px;display:block;}
.site-nav{display:flex;gap:20px;}
.site-nav a{
  color:#fff;
  text-decoration:none;
  font-weight:500;
}

.site-nav a:hover{
  color: var(--oe-accent);
  text-decoration:none;
}

.site-nav a.active{
  color: var(--oe-accent);
  text-decoration:none;
}

.site-nav a:focus-visible{
  outline: 2px solid var(--oe-accent);
  outline-offset: 3px;
  border-radius: 6px;
}


.nav-toggle{
  display:none;
  background:transparent;
  border:2px solid rgba(255,255,255,0.75);
  padding:10px 12px;
  border-radius:10px;
  cursor:pointer;
}
.hamburger{
  width:22px;height:2px;background:#fff;position:relative;display:inline-block;
}
.hamburger::before,.hamburger::after{
  content:"";position:absolute;left:0;width:22px;height:2px;background:#fff;
}
.hamburger::before{top:-7px;}
.hamburger::after{top:7px;}

/* ================= Page Content ================= */
.page-content{padding:48px 32px;}
.page-intro{
  max-width:980px;
  width:100%;
  line-height:1.55;
  margin:10px 0 8px 0;
}


/* ================= Hero ================= */
.hero{
  position:relative;
  height:55vh;
  min-height:360px;
  max-height:520px;
  overflow:hidden;
}
.hero img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 30%;
  display:block;
}
.hero-text{
  position:absolute;
  bottom:30px;
  left:30px;
  background:rgba(73,116,108,0.75);
  color:#fff;
  padding:18px;
  max-width:360px;
}
.hero-text h1{margin:0 0 10px 0;font-weight:600;}

/* ================= Home Sections ================= */
.who-we-are{padding:40px 32px;background:var(--oe-warm-bg);}
.quick-links{padding:48px 32px;background:var(--oe-band);}

.quick-links-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  margin-top:18px;
}
.quick-link{
  display:block;
  text-decoration:none;
  background:var(--oe-card);
  padding:18px;
  border-radius:10px;
  color:#2b2b2b;
  transition:transform 0.08s ease, box-shadow 0.08s ease;
}
.quick-link h3{margin:0 0 6px 0;color:var(--oe-green);}
.quick-link p{margin:0;line-height:1.35;}
.quick-link:hover{
  outline:2px solid var(--oe-hover);
  outline-offset:2px;
  transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(0,0,0,0.08);
}

/* ================= Committees Page ================= */
.committee-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  margin-top:22px;
}
.committee-card{
  background:var(--oe-card);
  padding:20px;
  border-radius:10px;
}
.committee-card h2{margin:0 0 8px 0;color:var(--oe-green);}
.committee-card p{margin:0 0 10px 0;line-height:1.45;}
.committee-card .meta{margin:0 0 6px 0;}
.committee-card a{text-decoration:none;}
.committee-card a:hover{text-decoration:underline;}

/* Optional helper bands (if you used them) */
.rac-note,.cta-band{
  margin-top:28px;
  padding:22px;
  border-radius:10px;
  max-width:980px;
}
.rac-note{background:var(--oe-warm-bg);}
.cta-band{background:var(--oe-band);}
.cta-button{
  display:inline-block;
  background:var(--oe-green);
  color:#fff;
  text-decoration:none;
  padding:10px 14px;
  border-radius:10px;
  font-weight:600;
}
.cta-button:hover{outline:2px solid var(--oe-hover);outline-offset:2px;}

/* ================= Contact Page ================= */
.contact-card{
  background:var(--oe-card);
  padding:20px;
  max-width:520px;
  border-radius:8px;
}
.small-note{margin-top:18px;font-size:14px;color:#555;}

/* ================= Resident Dashboard  ================= */


/* Search bar row */
.resident-search{
  margin: 18px 0 22px;
}

/* Dashboard search should match Directory/Documents search width */
.resident-dashboard .resident-search .search-field{
  width: min(520px, 100%);
  display: block;
}


.resident-search__form{
  display: block;
}

.resident-search__input{
  width: 100%;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.18);
  font-size: 16px;
  background: #fff
}

.resident-search__input:focus-visible{
  outline: 2px solid var(--oe-green);
  outline-offset: 2px;
}

/* 2-column grid like the wire */
.resident-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

/* Big “box” cards */
.resident-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 14px;
  padding: 18px 18px 20px;
}

.resident-card__title{
  margin: 0 0 12px;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

/* Link style in cards */
.resident-card__link{
  display: inline-block;
  margin: 2px 0 8px;
  text-decoration: none;
  color: var(--oe-green);
  font-weight: 600;
}

.resident-card__link:hover{
  text-decoration: underline;
}

/* Small line under “View Directory” like the wire */
.resident-card__rule{
  margin-top: 10px;
  height: 1px;
  width: 58%;
  background: rgba(0,0,0,0.18);
}

/* Lists inside cards */
.resident-card__list{
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.resident-card__list li{
  margin: 6px 0;
}

.resident-card__list a{
  color: inherit;
  text-decoration: none;
}

.resident-card__list a:hover{
  text-decoration: underline;
}

/* Documents filter row */
.resident-card__filters{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 8px 0 14px;
}

.resident-card__label{
  display: block;
  font-weight: 600;
  margin: 0 0 6px;
}

.resident-card__select{
  width: 100%;
  padding: 10px 10px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.18);
  background: #fff;
}

/* Match OE "designed" dropdown look on the Dashboard (caret + appearance reset)
   while keeping other pages unaffected. */
.resident-dashboard .resident-card__select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 38px;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(0,0,0,0.55) 50%),
    linear-gradient(135deg, rgba(0,0,0,0.55) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* Mobile: stack to 1 column */
@media (max-width: 760px){
  .resident-grid{
    grid-template-columns: 1fr;
  }
}

.container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Give dashboard content breathing room above footer */
.resident-dashboard .resident-grid{
  margin-bottom: 48px;
}

/* ================= Footer ================= */
.site-footer{
  padding:20px 32px;
  background:var(--oe-card);
  font-size:14px;
}

/* ================= Mobile Responsive ================= */
@media (max-width:700px){
  .site-header{padding:14px 18px;display:grid;grid-template-columns:1fr auto;grid-template-areas:'logo toggle' 'nav nav';align-items:center;gap:10px;}
  .logo-link{grid-area:logo;}
  .nav-toggle{grid-area:toggle;justify-self:end;}
  .site-nav{grid-area:nav;}
  .site-nav{display:none;width:100%;padding-top:8px;}
  .site-header.is-open .site-nav{display:flex;flex-direction:column;gap:12px;}

  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;}

  .site-nav{
    display:none;
    width:100%;
    flex-direction:column;
    gap:10px;
    margin-top:10px;
    padding-top:10px;
    border-top:1px solid rgba(255,255,255,0.25);
  }
  .site-nav a{padding:10px 0;white-space:nowrap;}
  .site-header.is-open .site-nav{display:flex;}

  .page-content{padding:28px 18px;}
  .page-content h1{font-size:1.9rem;margin-bottom:12px;}
  .page-intro{margin-top:6px;}

  .hero-text{left:18px;right:18px;max-width:none;}

  .quick-links-grid{grid-template-columns:1fr;}
  .quick-links,.who-we-are{padding:32px 18px;}
  .quick-link{padding:20px;} /* micro-polish */

  .committee-grid{grid-template-columns:1fr;}

  .site-footer{text-align:center;line-height:1.6;}
  .site-footer a{display:inline-block;margin:4px 6px;}
}

/* ================= Tablet (Portrait iPad & Similar) ================= */
@media (min-width: 701px) and (max-width: 1024px) {

  /* Header spacing */
  .site-header {
    padding: 14px 24px;
  }

  /* Switch to hamburger nav */
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .site-nav {
    display: none;
    width: 100%;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.25);
  }

  .site-header.is-open .site-nav {
    display: flex;
  }

  .site-nav a {
    padding: 10px 0;
  }

  /* Content padding */
  .page-content {
    padding: 36px 28px;
  }

  /* Hero sizing */
  .hero {
    height: 48vh;
    min-height: 320px;
  }

  .hero-text {
    max-width: 420px;
  }

  /* Committees + cards stay 2-column */
  .committee-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Quick links grid */
  .quick-links-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* TODO(CLEANUP): move into Tablet breakpoint block */
/* ================= Index: Tablet polish (701–1024) ================= */
@media (min-width: 701px) and (max-width: 1024px) {

  /* Section rhythm: tighter than desktop, looser than mobile */
  .who-we-are,
  .quick-links{
    padding: 36px 28px;
  }

  /* Hero: reduce vertical dominance */
  .hero{
    height: 46vh;
    min-height: 320px;
    max-height: 460px;
  }

  .hero-text{
    left: 24px;
    bottom: 24px;
    padding: 16px 18px;
    max-width: 440px;
  }

  .hero-text h1{
    font-size: 1.9rem;
    line-height: 1.15;
  }

  .hero-text p{
    margin-top: 8px;
    line-height: 1.45;
  }

  /* Quick Links: 2 columns with softened spacing */
  .quick-links-grid{
    gap: 16px;
    margin-top: 16px;
  }

  .quick-link{
    padding: 18px;
  }
}

/* Resident Info */
.resident-info .content-section {
  padding: 28px 0;
  border-top: 1px solid rgba(0,0,0,0.08);
}

.resident-info .content-section:first-of-type {
  border-top: none;
}

.resident-info .content-section h2 {
  margin: 0 0 10px;
}

.resident-info .content-section h3 {
  margin: 18px 0 8px;
}

.resident-info .page-note {
  padding: 28px 0 40px;
  border-top: 1px solid rgba(0,0,0,0.08);
  opacity: 0.9;
}

/* ================= Resident Info Landing Layout ================= */

.resident-info .page-intro {
  margin-bottom: 18px;
}

.resident-hero {
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 16px;
  padding: 22px 22px;
  margin: 14px 0 22px;
  background: rgba(0,0,0,0.02);
}

.resident-hero__content h2 {
  margin: 0 0 10px;
}

.resident-hero__content {
  max-width: 900px;
  margin: 0;
}

.resident-hero__content p {
  margin: 0 0 14px;
  max-width: 100%;
}

.resident-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Button styles (scoped so we don't disrupt your site) */
.resident-info .btn {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
}

.resident-info .btn--primary {
  background: var(--oe-green);
  color: #fff;
  border: 1px solid rgba(0,0,0,0.10);
}

.resident-info .btn--ghost {
  background: transparent;
  color: var(--oe-green);
  border: 1px solid rgba(0,0,0,0.18);
}

/* Cards */
.resident-cards {
  margin: 0 0 10px;
}

.resident-cards__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.resident-card {
  display: block;
  padding: 16px 16px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.10);
  text-decoration: none;
  color: inherit;
  background: #fff;
}

.resident-card h3 {
  margin: 0 0 6px;
}

.resident-card p {
  margin: 0;
  opacity: 0.9;
}

.resident-card:hover {
  border-color: rgba(0,0,0,0.18);
  transform: translateY(-1px);
}

/* Responsive: cards become columns on wider screens */
@media (min-width: 800px) {
  .resident-cards__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1100px) {
  .resident-cards__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ================= Resident Dashboard Cards (matches Committees) ================= */

.resident-card{
  background: rgba(83, 123, 114, 0.10);   /* OE green tint (same family as committees) */
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  padding: 22px 22px 24px;
  box-shadow: none;
}

/* Title */
.resident-card__title{
  margin: 0 0 8px;
  font-size: 20px;
  color: var(--oe-green);
}

/* Link */
.resident-card__link{
  font-weight: 600;
  color: var(--oe-green);
  text-decoration: none;
}

.resident-card__link:hover{
  text-decoration: underline;
}
/* ================= Resident Dashboard (Committees-style) ================= */

.resident-dashboard .container{
  padding-bottom: 64px; /* keeps cards from kissing the footer */
}

/* Search bar stays “clean white” */
.resident-search__input{
  background: #fff;
}

/* Grid spacing closer to committees */
.resident-grid{
  gap: 18px;
}

/* Cards match committees */
.resident-dashboard .resident-card{
  background: var(--oe-card);
  border: 0;
  border-radius: 10px;
  padding: 20px;
  box-shadow: none;
}

/* Title style like committees */
.resident-dashboard .resident-card__title{
  margin: 0 0 8px 0;
  color: var(--oe-green);
  font-size: 22px;
  line-height: 1.15;
}

/* Links behave like committees links */
.resident-dashboard .resident-card__link{
  color: var(--oe-link);
  font-weight: 600;
}

.resident-dashboard .resident-card__link:hover{
  text-decoration: underline;
}

/* Optional: if you keep the “rule” line, soften it */
.resident-dashboard .resident-card__rule{
  width: 60%;
  background: rgba(0,0,0,0.12);
}

/* Dashboard tool: Email by Home Model */
.resident-dashboard .resident-card__tool{
  margin-top: 14px;
}

.resident-dashboard .resident-card__toolRow{
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: end;
}

.resident-dashboard .resident-card__hint{
  margin: 8px 0 12px;
  font-size: 13px;
  line-height: 1.35;
  opacity: 0.85;
}

@media (max-width: 640px){
  .resident-dashboard .resident-card__toolRow{
    grid-template-columns: 1fr;
  }
  .resident-dashboard .resident-card__toolRow .btn{
    width: 100%;
  }
}

/* Lists: match your current clean style */
.resident-dashboard .resident-card__list a{
  color: inherit;
}
/* ================= Table-friendly Focus Ring ================= */
/* Safari renders outlines on <tr> strangely; draw focus on the row cells instead. */
.directory-row:focus-visible{
  outline: none;
}

/* Apply a subtle "row ring" using the first/last cell borders */
.directory-row:focus-visible td{
  background: rgba(83, 123, 114, 0.06); /* OE green tint; safe even if var not present */
}

.directory-row:focus-visible td:first-child{
  border-top: 2px solid var(--oe-green);
  border-bottom: 2px solid var(--oe-green);
  border-left: 2px solid var(--oe-green);
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}

.directory-row:focus-visible td:not(:first-child):not(:last-child){
  border-top: 2px solid var(--oe-green);
  border-bottom: 2px solid var(--oe-green);
}

.directory-row:focus-visible td:last-child{
  border-top: 2px solid var(--oe-green);
  border-bottom: 2px solid var(--oe-green);
  border-right: 2px solid var(--oe-green);
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

/* ================= Directory Row Spacing ================= */
.directory-row td{
  padding: 14px 12px;
  line-height: 1.45;
}
/* ================= Directory Controls: Stacked Layout ================= */

.directory-controls--stack{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  margin: 12px 0 18px;
}

/* Row 1: Primary buttons */
.directory-controls--stack .directory-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* Row 2: Search */
.directory-controls--stack .directory-tools{
  width:100%;
}

/* Constrain search width */
.directory-controls--stack .search-field{
  position:relative;
  width: min(520px, 100%);
}

/* Row 3: Filters */
.directory-controls--stack .directory-filters-row{
  width:100%;
}
.directory-hint{
  font-size: 13px;
  opacity: 0.65;
  margin: 6px 0 12px;
}

.search-field{
  position:relative;
  width: 320px;         
  max-width: 100%;
  display: inline-block;
}

.search-icon{
  position:absolute;
  left:12px;
  top:50%;
  transform: translateY(-50%);
  opacity:0.55;
  pointer-events:none;
  font-size: 16px;
}

.directory-search{
  width: 100%;
  padding: 10px 12px 10px 34px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.18);
  background: #fff;
  font-size: 15px;
}

.directory-search:focus{
  outline: none;
  border-color: rgba(83, 123, 114, 0.65);
  box-shadow: 0 0 0 3px rgba(83, 123, 114, 0.18);
}

@media (max-width: 700px){
  .directory-controls{
    flex-direction:column;
    align-items:stretch;
  }
  .search-field{
    min-width: 100%;
    max-width: 100%;
  }
}
/* ================= Directory Buttons: Primary + Ghost ================= */
.directory-controls--stack .btn{
  appearance: none;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1;
  border: 1px solid rgba(0,0,0,0.18);
  background: rgba(255,255,255,0.55);
  color: #2b2b2b;
  cursor: pointer;
}

.directory-controls--stack .btn--primary{
  background: var(--oe-green);
  border-color: var(--oe-green);
  color: #fff;
  font-weight: 600;
}

.directory-controls--stack .btn--ghost{
  background: transparent;
  border-color: rgba(0,0,0,0.22);
  color: #2b2b2b;
}

.directory-controls--stack .btn:hover{
  filter: brightness(0.98);
}

.directory-controls--stack .btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(83, 123, 114, 0.22);
}
/* ================= Resident Directory: Table Grid + Alternating Rows ================= */

/* Ensure the table can draw clean grid lines */
.directory-table{
  width: 100%;
  border-collapse: collapse; /* makes borders behave like a spreadsheet */
}

/* Header row: subtle divider */
.directory-table thead th{
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid rgba(0,0,0,0.12);
}

/* Body cells: grid lines */
.directory-table tbody td{
  padding: 12px 14px;
  border-bottom: 1px solid rgba(0,0,0,0.12);   /* horizontal lines */
  border-right: 1px solid rgba(0,0,0,0.10);    /* vertical lines */
  vertical-align: middle;
}

/* Remove right border on last column so it doesn't look boxed */
.directory-table tbody td:last-child,
.directory-table thead th:last-child{
  border-right: none;
}

/* Alternating row background */
.directory-table tbody tr:nth-child(even){
  background: rgba(83, 123, 114, 0.06);
}

/* Row hover and keyboard focus (keep accessible, don't turn into a big card) */
.directory-table tbody tr.directory-row:hover{
  background: rgba(83, 123, 114, 0.10);
}

.directory-table tbody tr.directory-row:focus-visible{
  outline: 2px solid rgba(83, 123, 114, 0.55);
  outline-offset: -2px; /* outline sits inside the row */
}
.directory-table thead{
  background: rgba(0,0,0,0.02);
}
.directory-table{
  border: 1px solid rgba(0,0,0,0.12);
  background: transparent;
}
.directory-table-wrapper{
  overflow-x: auto; /* future-proof for mobile */
}
.directory-table{
  border-radius: 6px;
}
/* Resident Directory — Mobile List, Search Toolbar, Filters Panel */
/* Breakpoints: */
/* Mobile: <=700px */

/* Desktop/tablet: keep directory layout aligned to content width */
.directory-tools{
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 980px;
}

.search-field{
  position: relative;
  flex: 1 1 auto;
  max-width: 560px; /* keeps Filters near the search */
}

.search-icon{
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.55;
  pointer-events: none;
}

.directory-search{
  width: 100%;
  padding: 12px 12px 12px 38px; /* room for icon */
  border: 1px solid rgba(0,0,0,0.16);
  border-radius: 12px;
  background: #fff;
  font: inherit;
}

.directory-search:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(83, 123, 114, 0.22);
  border-color: rgba(83, 123, 114, 0.55);
}

/* Directory table: ensure full grid closure including right edge */
.directory-table{
  border-collapse: collapse;
  border: 1px solid rgba(0,0,0,0.18);
  width: 100%;
}

.directory-table th,
.directory-table td{
  border: 1px solid rgba(0,0,0,0.18);
}

/* Mobile list hidden by default; visible on small screens */
.directory-list{ display: none; }

/* Filters button (existing styling via .btn/.btn--ghost) should remain consistent */
#filtersBtn{
  min-height: 44px;
  white-space: nowrap;
}

/* Mobile: stack toolbar controls + switch to list layout */
@media (max-width:700px){
  .directory-tools{
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    max-width: none;
  }

  .search-field{ max-width: none; }

  /* Hide desktop table, show mobile list */
  .directory-table-wrapper{ display: none; }
  .directory-list{ display: block; }

  /* Mobile row button */
  .directory-row{
    width: 100%;
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 14px 12px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(0,0,0,0.14);
    text-align: left;
    cursor: pointer;
    font-size: 17px;
}
  }

  .directory-row__addr{
    font-weight: 700;
    min-width: 44px;
  }

  .directory-row__dot{
    opacity: 0.45;
  }

  .directory-row__name{
    font-weight: 600;
  }

  .directory-row__chev{
    font-size: 28px;
    opacity: 0.5;
    padding-left: 6px;
  }

  .directory-row:focus-visible{
    outline: 2px solid var(--oe-green);
    outline-offset: 2px;
    border-radius: 10px;
  }

  .directory-row mark{
    background: rgba(222, 183, 33, 0.35);
    padding: 0 2px;
    border-radius: 4px;
  }
/* Filters Panel (UI only) */

.filters-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.22);
  z-index: 60;
}

.filters-panel{
  position: relative;
  z-index: 61;
  margin-top: 10px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  max-width: 780px;

  transform: translateY(-6px);
  opacity: 0;
  transition: transform 160ms ease, opacity 160ms ease;
}

.filters-panel.is-open{
  transform: translateY(0);
  opacity: 1;
}

.filters-panel__header{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 12px 14px;
  background: rgba(0,0,0,0.03);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.filters-panel__title{ font-weight: 700; }

.filters-panel__close{
  min-width: 44px;
  min-height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.14);
  background: transparent;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}

.filters-panel__body{ padding: 14px; }

.filters-field{ display:block; margin-bottom: 12px; }
.filters-field__label{ display:block; font-weight: 600; margin-bottom: 6px; }

.filters-field input{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.16);
  font: inherit;
}

.filters-toggle{
  display:flex;
  align-items:center;
  gap: 10px;
  margin: 10px 0;
  opacity: 0.72; /* disabled for now */
}

.filters-panel__note{
  margin-top: 10px;
  font-size: 14px;
  opacity: 0.75;
}

@media (max-width:700px){
  /* keep filters panel full width under toolbar */
  .filters-panel{ max-width: none; }
}

/* desktop hides it */
/* width: 54px; */
/* height: 5px; */
/* border-radius: 999px; */
/* background: rgba(0,0,0,0.22); */
/* margin: 10px auto 10px; */
/* position: relative; */
/* } (fixed orphaned brace from commented sheet-grabber block) */

@media (max-width:700px){
  .sheet-grabber{ display:block; }
}

/* =============== Filters Panel (UI only) ================= */
.filters-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.22);
  z-index: 60;
}

/* Panel (desktop = inline drop-down under search/tools) */
.filters-panel{
  position: relative;
  z-index: 61;
  margin-top: 10px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  max-width: 980px;
}

/* Slide-down feel */
.filters-panel{
  transform: translateY(-6px);
  opacity: 0;
  transition: transform 160ms ease, opacity 160ms ease;
}
.filters-panel.is-open{
  transform: translateY(0);
  opacity: 1;
}

.filters-panel__header{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 12px 14px;
  background: rgba(0,0,0,0.03);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.filters-panel__title{
  font-weight: 700;
  font-size: 16px;
}

.filters-panel__close{
  min-width: 44px;
  min-height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.14);
  background: transparent;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}

.filters-panel__body{
  padding: 14px;
}

.filters-field{
  display:block;
  margin-bottom: 12px;
}
.filters-field__label{
  display:block;
  font-weight: 600;
  margin: 0 0 6px;
}
.filters-field input{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.16);
}

.filters-toggle{
  display:flex;
  align-items:center;
  gap: 10px;
  margin: 10px 0;
  opacity: 0.72; /* disabled UI for now */
}

.filters-panel__note{
  margin-top: 10px;
  font-size: 14px;
  opacity: 0.75;
}

/* Mobile: panel looks “sheet-like” and overlay helps click-out */
@media (max-width:700px){
  .filters-panel{
    border-radius: 16px;
  }
}
/* Desktop: no dim overlay for filters */
@media (min-width:701px){
  .filters-overlay{ display:none !important; }

  .filters-panel{
    margin-top: 8px;
  }
}

/* OE Modal Refactor — Chunk 1 (Inventory) + Chunk 2 (Canonical Styles) */
/* Status: In Progress (Do NOT delete legacy modal blocks yet) */

/* CHUNK 1 — INVENTORY (what exists today) */
/* Modal-related token counts in this file (rough): */
/* CHUNK 3A — Cleanup Pass A (Generic Modal Duplicates) */
/* Removed earlier generic modal rules now covered by the canonical contract block. */
/* Kept: ID-scoped rules (e.g., #new-resident, #modal-resident-detail) and directory-specific variants. */
/* Removed selectors (summary): */
/* CHUNK 3C — Cleanup Pass C (Consolidate remaining shell tweaks) */
/* Goal: Keep ID-scoped modal rules only where they are truly content-specific. */
/* Any remaining ID-based shell tweaks should eventually migrate to modifiers */
/* (e.g., .modal__dialog--wide) when corresponding HTML is updated. */

/* ======================================================
   CHUNK 3C — Cleanup Pass C (Consolidate remaining shell tweaks)
   Goal: Keep ID-scoped modal rules only where they are truly content-specific.
   Any remaining ID-based shell tweaks should eventually migrate to modifiers
   (e.g., .modal__dialog--wide) when corresponding HTML is updated.
====================================================== */

/* TEMPORARY: ID-scoped shell mappings (remove once HTML adopts modifiers) */
/* Example: If a specific modal needs wide layout, prefer adding .modal__dialog--wide in HTML.
   Until then, keep any ID-scoped shell tweaks in this one section (not scattered elsewhere). */

/* CHUNK 3C.1 — Default Hidden Modal Fix
   Reason: Modals must be hidden by default unless explicitly opened
   via .is-open or aria-hidden="false". */

/* Modal default: hidden */
.modal{
  display: none;
}

/* Modal open states */
.modal.is-open,
.modal[aria-hidden="false"]{
  display: flex;
}

/* ======================================================
   CHUNK 2 — OE Modal Contract — Canonical Styles (v1.0)
   Source of truth: OE_Canonical_Modal_DOM_and_Behavior_Contract_v1.0.docx
   Goal: One reusable modal shell across the site.
====================================================== */

body.modal-open{
  overflow: hidden;
}

.modal{
  position: fixed;
  inset: 0;
  align-items: center;
  justify-content: center;
  padding: 28px 18px;
  z-index: 900;
}

.modal__overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 910;
}

.modal__dialog{
  position: relative;
  z-index: 920;
  width: min(560px, 92vw);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  background: #F3F1E8;
  border: 1px solid rgba(0,0,0,0.14);
  box-shadow: 0 22px 60px rgba(0,0,0,0.28);
}

.modal__dialog--wide{
  width: min(760px, 94vw);
}

.modal__header{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  background: var(--oe-green);
  color: #fff;
}

.modal__title{
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.modal__helper{
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.35;
  opacity: 0.92;
}

.modal__close{
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.14);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.modal__close:hover{
  background: rgba(255,255,255,0.22);
}

.modal__close:focus-visible{
  outline: 3px solid rgba(255,255,255,0.35);
  outline-offset: 2px;
}

.modal__body{
  flex: 1 1 auto;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 18px;
}

.modal__footer{
  flex: 0 0 auto;
  padding: 14px 18px 16px;
  border-top: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.02);
}

.modal__actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.modal__disclaimer{
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.35;
  opacity: 0.78;
  text-align: center;
}

@media (prefers-reduced-motion: reduce){
  .modal,
  .modal__dialog{
    transition: none !important;
  }
}

@media (max-width: 700px){
  .modal{
    align-items: flex-end;
    padding: 0;
  }
  .modal__dialog{
    width: 100%;
    max-height: 92vh;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -18px 45px rgba(0,0,0,0.25);
  }
  .modal__body{
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
  }
}

/* ======================================================
   CHUNK 4A/4B — Modal Variant Hardening + Form Polish
   Goal:
   - Keep variants few, named, and intentional
   - Improve form rhythm/spacing without changing JS behavior
====================================================== */

/* ---- Chunk 4A: Variant sizing ---- */
/* Default dialog already defined in canonical block. These are explicit opt-in modifiers. */
.modal__dialog--wide{
  width: min(860px, 94vw);
}

.modal__dialog--form{
  width: min(680px, 92vw);
}

/* Tight confirmation dialogs */
.modal__dialog--compact{
  width: min(520px, 92vw);
}

/* ---- Chunk 4B: Form polish (scoped to modals) ---- */
.modal .modal__lead{
  margin: 0 0 14px 0;
  font-size: 15px;
  line-height: 1.45;
}


/* Update My Info – Saved/No-Changes step: left-align message text (matches OE modal style) */
#modal-update-info [data-step="saved"] .modal__lead{
  text-align: left;
}


.modal .modal__field{
  margin: 14px 0 0 0;
}

.modal .modal__label{
  display: block;
  margin: 0 0 8px 0;
  font-size: 12.5px;
  font-weight: 700;
  color: #2f3b37;
}

.modal .modal__input,
.modal select,
.modal textarea{
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;          /* shorter field height */
  min-height: 42px;           /* consistent across Safari/Chrome */
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 12px;
  background: #fff;
  font-size: 15px;
  line-height: 1.15;
}

/* Safari: ensure native selects match inputs */
.modal select{
  -webkit-appearance: none;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(47,59,55,.75) 50%),
    linear-gradient(135deg, rgba(47,59,55,.75) 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 13px) calc(50% - 3px),
    0 0;
  background-size: 5px 5px, 5px 5px, 100% 100%;
  background-repeat: no-repeat;
  padding-right: 34px;
}

.modal .modal__input:focus,
.modal select:focus,
.modal textarea:focus{
  outline: 3px solid rgba(83,123,114,0.25);
  outline-offset: 2px;
}

/* 2-up row used for First/Last name */
.oe-field-row{
  display: grid;
  gap: 12px;
}

.oe-field-row--2{
  grid-template-columns: 1fr 1fr;
}

/* Address row: House # select + suffix + Move-in */
.oe-field-row--address{
  display: grid;
  grid-template-columns: minmax(180px, 240px) auto minmax(220px, 280px);
  column-gap: 18px;
  row-gap: 8px;
  align-items: center;
}

.oe-input--house{
  width: 100%;
  max-width: 240px;
}

.oe-address-suffix{
  font-weight: 700;
  color: #2f3b37;
  white-space: nowrap;
  padding-bottom: 0;
}

/* Move-in block inside the address row */
.oe-movein-inline{
  min-width: 220px;
}

.oe-inline-label{
  display: block;
  margin: 0 0 6px 0;
  font-size: 12.5px;
  font-weight: 700;
  color: #2f3b37;
}

#oeNrMoveIn{
  max-width: 260px;
}

/* Checkbox group */
.modal__checks{
  margin-top: 12px;
}

.modal__check{
  gap: 10px;
}

.modal__check input{
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

/* Actions row: keep buttons consistent and wrap cleanly */
.modal__actions{
  justify-content: flex-start;
}

/* Mobile stacking */
@media (max-width: 700px){
  .oe-field-row--2{
    grid-template-columns: 1fr;
  }
  .oe-field-row--address{
    grid-template-columns: 1fr;
    align-items: start;
  }
  .oe-input--house{
    max-width: none;
  }
  #oeNrMoveIn{
    max-width: none;
  }
}

/* ======================================================
   CHUNK 4A/4B.1 — Modal Variant Application + Form/Buttons/Disclaimer Polish
   Purpose:
   - Apply compact vs form variants to existing modals WITHOUT HTML changes
   - Improve modal form rhythm (labels, grids, address row)
   - Improve button sizing + hierarchy in modals
   - Normalize disclaimer/footnote sizing across modals
====================================================== */

/* ---------- Variant application (temporary ID mapping) ---------- */
#modal-update-info .modal__dialog{
  width: min(520px, 92vw);
  max-height: 72vh;
}

#new-resident .modal__dialog{
  width: min(860px, 96vw);
  max-height: 90vh;
}

/* ---------- Modal typography + spacing ---------- */
.modal__body{
  padding: 18px 20px;
}

#modal-update-info .modal__body{
  padding: 16px 18px;
}

#new-resident .modal__body{
  padding: 20px 22px;
}

/* Reduce “unnecessary scroll” feel on compact modal */
#modal-update-info .modal__body{
  overflow: visible;
}

/* ---------- Form fields (modal) ---------- */
.modal__field{
  margin: 0 0 14px;
}

.modal__label{
  display: block;
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 6px;
}

.modal__lead{
  font-size: 14px;
  line-height: 1.45;
  margin: 0 0 14px;
}

.modal__helper{
  font-size: 13.5px;
  line-height: 1.35;
  margin: 6px 0 0;
  opacity: 0.85;
}

/* Inputs/selects inside modals */
.modal .modal__input{
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  font-size: 14px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.18);
  background: #fff;
}

.modal .modal__input:focus{
  outline: 3px solid rgba(83,123,114,0.22);
  outline-offset: 2px;
}

/* ---------- New Resident: Name row (2-up) ---------- */
#new-resident .oe-field-row--name{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 700px){
  #new-resident .oe-field-row--name{
    grid-template-columns: 1fr;
  }
}

/* ---------- New Resident: Address row (House # + suffix + Move-In) ---------- */
@media (max-width: 860px){
#new-resident .oe-input--house{ grid-area: house; }
}

@media (max-width: 600px){
}

/* ---------- Checkboxes (Directory Visibility) ---------- */
.modal__checks{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.modal__checks label{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}

.modal__check{
  width: 18px;
  height: 18px;
  accent-color: var(--oe-green);
}

/* ---------- Actions + buttons (make them feel intentional) ---------- */
.modal__actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 12px;
}

#modal-update-info .modal__actions{
  justify-content: flex-start;
}

#new-resident .modal__actions{
  justify-content: flex-start;
}

/* Button base inside modals */
.modal .btn{
  min-height: 40px;
  padding: 9px 14px;
  font-size: 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
}

.modal .btn--primary{
  background: var(--oe-green);
  color: #fff;
  border-color: rgba(0,0,0,0.10);
}

.modal .btn--primary:hover{
  filter: brightness(0.98);
}

.modal .btn--secondary{
  background: rgba(0,0,0,0.03);
  color: rgba(0,0,0,0.82);
  border-color: rgba(0,0,0,0.14);
}

.modal .btn--secondary:hover{
  background: rgba(0,0,0,0.05);
}

/* ---------- Disclaimer / footnote sizing ---------- */
.modal__disclaimer,
.modal__footnote,
.modal__note{
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.35;
  opacity: 0.78;
  text-align: center;
}

/* Keep the compact modal’s disclaimer closer to the actions */
#modal-update-info .modal__footnote{
  margin-top: 10px;
}

/* ======================================================
   CHUNK 4B.2 — Button Shape + Checkbox Fix
   - Modal primary/secondary buttons use rounded-rectangle corners (not pills)
   - Fix checkbox label layout (previously label got width/height)
====================================================== */

/* Buttons inside modals: rounded rectangles like page buttons */
.modal .btn{
  border-radius: 12px;   /* was 999px */
  min-height: 44px;
  padding: 10px 16px;
}

/* Keep secondary from looking “flat gray” */
.modal .btn--secondary{
  background: rgba(255,255,255,0.55);
  border-color: rgba(0,0,0,0.16);
}

/* Checkbox layout fix */
.modal__checks{
  margin-top: 10px;
}

.modal__checks .modal__check{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  line-height: 1.25;
}

/* The size + accent belong to the INPUT, not the LABEL */
.modal__checks .modal__check input[type="checkbox"]{
  width: 18px;
  height: 18px;
  accent-color: var(--oe-green);
  flex: 0 0 auto;
}

.modal__checks .modal__check span{
  display: inline-block;
}

/* ======================================================
   CHUNK 4B.3 — Compact Verification + Checkbox Wrap Fix
   - Update Info: tighten dialog + input size (less tall/less wide)
   - Unsaved Confirm: treat as compact confirmation modal
   - New Resident: fix checkbox label width so text doesn't "stack"
====================================================== */

/* ---------- Compact verification modal sizing ---------- */
#modal-update-info .modal__dialog,
#modal-unsaved-confirm .modal__dialog{
  width: min(480px, 92vw);
  max-height: 70vh;
}

/* Update Info email input: not overly tall, not overly wide */
#modal-update-info .modal__field{
  max-width: 440px;
}

#modal-update-info .modal__input{
  min-height: 40px;      /* was 44 */
  padding: 9px 12px;     /* slightly tighter */
  font-size: 14px;
}

/* Reduce perceived "right stretch" by keeping content block narrower */
#modal-update-info .modal__body{
  padding-left: 18px;
  padding-right: 18px;
}

/* ---------- Confirmation modal actions (match our button system) ---------- */
#modal-unsaved-confirm .modal__actions{
  margin-top: 10px;
}

/* If confirmation uses plain buttons, give them our btn treatment */
#modal-unsaved-confirm button{
  border-radius: 12px;
  min-height: 40px;
  padding: 9px 14px;
}

/* ---------- Checkbox wrap fix (New Resident + future committee checkboxes) ---------- */
.modal__checks .modal__check{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  line-height: 1.25;
}

/* Make sure the label text gets the horizontal space */
.modal__checks .modal__check span{
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
}

/* Keep checkbox itself fixed-size */
.modal__checks .modal__check input[type="checkbox"]{
  flex: 0 0 auto;
}

/* ======================================================
   CHUNK 4B.4 — Update Info field sizing (height + width)
   Goal: Inputs should not feel jumbo or full-bleed.
====================================================== */

/* Narrow the content column inside Update Info modal */
#modal-update-info .modal__body{
  max-width: 560px;
}

/* Keep fields from stretching edge-to-edge */
#modal-update-info .modal__field{
  max-width: 520px;
}

/* Apply to verify + edit step inputs in Update Info */
#modal-update-info .modal__input{
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 12px;
}

/* Optional: slightly smaller focus ring */
#modal-update-info .modal__input:focus{
  outline-width: 2px;
}

/* Make the label/input spacing feel tighter (less “tall”) */
#modal-update-info .modal__label{
  margin-bottom: 5px;
}
#modal-update-info .modal__field{
  margin-bottom: 12px;
}

/* ======================================================
   CHUNK 4B.5 — Force input containment (no overflow)
   Some legacy rules are forcing inputs wider/taller than intended.
   This block hard-stops overflow inside #modal-update-info.
====================================================== */

#modal-update-info .modal__dialog{
  width: min(560px, 92vw);
}

#modal-update-info .modal__body{
  max-width: 520px;
  margin: 0 auto;
}

/* Ensure fields are a normal column that cannot overflow */
#modal-update-info .modal__field{
  width: 100%;
  max-width: 520px;
}

/* The important parts: box-sizing + max-width */
#modal-update-info .modal__input{
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 40px !important;
  padding: 8px 12px !important;
}

/* If any rule is adding weird margins, neutralize */
#modal-update-info input.modal__input{
  margin: 0 !important;
}

/* ======================================================
   CHUNK 4B.6 — Make Verify step match Edit step (width + feel)
   - Keep Email field from looking "too long" in verify step
   - Normalize input heights across both steps
====================================================== */

/* Constrain the verify step content to the same column width as edit */
#modal-update-info .oe-step[data-step="verify"]{
  max-width: 520px;
  margin: 0 auto;
}

/* Make the verify email input the same max width as the edit inputs */
#modal-update-info .oe-step[data-step="verify"] .modal__field{
  max-width: 520px;
}

/* Optional: bring the verify email input in a touch so it doesn't feel edge-to-edge */
#modal-update-info .oe-step[data-step="verify"] .modal__input{
  border-radius: 12px;
}

/* Normalize all Update Info inputs to same height */
#modal-update-info .modal__input{
  min-height: 40px !important;
}

/* ======================================================
   CHUNK 4B.7 — Final polish (Update Info modal)
   - Reduce vertical "air" so modal feels intentional, not tall
   - Refine helper + footnote typography
   - Normalize action row spacing/alignment
====================================================== */

#modal-update-info .modal__body{
  padding-top: 18px;
  padding-bottom: 18px;
}

/* Title-to-body spacing */
#modal-update-info .modal__lead{
  margin: 0 0 12px 0;
  line-height: 1.35;
}

/* Field stack spacing */
#modal-update-info .modal__field{
  margin-bottom: 12px;
}
#modal-update-info .modal__label{
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 5px;
}

/* Inputs: slightly less tall feel while keeping accessibility */
#modal-update-info .modal__input{
  min-height: 40px !important;
  padding: 8px 12px !important;
}

/* Helper + footnote typography */
#modal-update-info .modal__helper{
  margin: 6px 0 10px 0;
  font-size: 13px;
  line-height: 1.35;
  opacity: 0.92;
}

#modal-update-info .modal__footnote{
  margin-top: 12px;
  font-size: 12.5px;
  line-height: 1.35;
  opacity: 0.88;
  text-align: center;
}

/* Checkbox group: slightly tighter */
#modal-update-info .modal__checks{
  margin-top: 8px;
}
#modal-update-info .modal__check{
  gap: 10px;
  margin: 8px 0;
}

/* Actions: align and tighten */
#modal-update-info .modal__actions{
  margin-top: 14px;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

#modal-update-info .modal__actions .btn{
  min-height: 40px;
  padding: 9px 16px;
}

/* Keep primary from shrinking too small */
#modal-update-info .modal__actions .btn--primary{
  min-width: 110px;
}

/* Error styling (if shown) */
#modal-update-info .modal__error{
  margin: 8px 0 0 0;
  font-size: 13px;
}


/* =========================
   STEP 3E — New Resident: Address Row Canonical Layout
   House Number + "Outlook East Road" + Move-In Date
   (Single source of truth — replaces earlier experimental overrides)
   ========================= */

#new-resident .oe-field-row--address{
  display: grid;
  grid-template-columns: 180px 1fr 240px;
  gap: 18px;
  align-items: center;
}

/* House number select stays compact */
#new-resident #oeNrHouse{
  width: 100%;
  max-width: 180px;
}

/* Middle suffix is static text (not pill/button) */
#new-resident .oe-address-suffix{
  background: none;
  border: 0;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--oe-ink-700, #334);
  font-weight: 600;
  justify-self: center;
  text-align: center;
  white-space: nowrap;
}

/* Move-in block: label above field */
#new-resident .oe-movein-inline{
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 240px;
  justify-self: end;
}

#new-resident .oe-inline-label{
  font-weight: 700;
}

/* Move-in input should not stretch beyond its column */
#new-resident #oeNrMoveIn{
  width: 100%;
}

/* Responsive: stack cleanly on smaller widths */
@media (max-width: 720px){
  #new-resident .oe-field-row--address{
    grid-template-columns: 1fr;
    gap: 12px;
  }
  #new-resident #oeNrHouse{
    max-width: 100%;
  }
  #new-resident .oe-address-suffix{
    justify-self: start;
    text-align: left;
  }
  #new-resident .oe-movein-inline{
    max-width: 100%;
    justify-self: start;
  }
}




/* ======================================================
   PATCH v2.1 — New Resident address row cohesion
   - House Number label sits directly above the dropdown
   - "Outlook East Road" appears immediately after dropdown
   - Keeps Move-In Date aligned to the right
   ====================================================== */

#new-resident label.modal__label[for="oeNrHouse"]{
  margin-bottom: 6px;
}

#new-resident .oe-field-row--address{
  display: grid;
  grid-template-columns: minmax(160px, 200px) auto 1fr;
  align-items: end;
  column-gap: 12px;
  row-gap: 10px;
}

/* dropdown column */
#new-resident #oeNrHouse{
  width: 100%;
}

/* suffix immediately after dropdown */
#new-resident .oe-field-row--address .oe-address-suffix{
  grid-column: 2;
  align-self: center;
  justify-self: start;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  font-weight: 600;
  color: var(--oe-text, #1F2423);
  white-space: nowrap;
}

/* Move-in on the right */
#new-resident .oe-field-row--address .oe-movein-inline{
  grid-column: 3;
  justify-self: end;
  width: min(260px, 100%);
}

#new-resident .oe-field-row--address .oe-movein-inline .oe-inline-label{
  margin-bottom: 6px;
}

#new-resident .oe-input--movein{
  width: 100%;
}

/* Stack cleanly on narrow widths */
@media (max-width: 720px){
  #new-resident .oe-field-row--address{
    grid-template-columns: 1fr;
  }
  #new-resident .oe-field-row--address .oe-address-suffix{
    grid-column: 1;
    justify-self: start;
    align-self: start;
  }
  #new-resident .oe-field-row--address .oe-movein-inline{
    grid-column: 1;
    justify-self: stretch;
    width: 100%;
  }
}



/* =========================
   Filters Panel Background
   ========================= */
#filtersPanel {
  background-color: var(--oe-bg); /* warm light green */
}

#filtersPanel .filters-panel__body {
  background-color: var(--oe-bg);
}


/* ======================================================
   Filters Panel — Final OE Styling Override (v4)
   Fixes:
   - Restore OE green header
   - Warm light green panel + body background
   - Prevent input from feeling "full-bleed"
====================================================== */

#filtersPanel.filters-panel{
  background: var(--oe-warm-bg);
}

/* Header: OE green */
#filtersPanel .filters-panel__header{
  background: var(--oe-green);
  color: #fff;
}

#filtersPanel .filters-panel__title{
  color: #fff;
}

#filtersPanel .filters-panel__close{
  color: #fff;
  border-color: rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.12);
}

#filtersPanel .filters-panel__close:hover{
  background: rgba(255,255,255,0.20);
}

/* Body: warm light green + comfortable padding */
#filtersPanel .filters-panel__body{
  background: var(--oe-warm-bg);
  padding: 16px; /* slightly more breathing room */
}

/* Address / Unit field: contained (not "edge to edge") */
#filtersPanel .filters-field input{
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

/* Optional: soften the label divider so it matches OE */
#filtersPanel .filters-field__label{
  color: #2f3b37;
}


/* ======================================================
   Accessibility: Visible keyboard focus in modals (v2)
   Ensures Tab navigation shows a clear focus ring for:
   - modal close buttons (X)
   - any buttons/links/inputs inside modals (including confirm overlays)
====================================================== */

.modal :focus {
  outline: none; /* let :focus-visible handle it */
}

.modal button:focus-visible,
.modal [role="button"]:focus-visible,
.modal a:focus-visible,
.modal input:focus-visible,
.modal select:focus-visible,
.modal textarea:focus-visible,
.modal [tabindex]:focus-visible {
  outline: 3px solid rgba(79, 119, 106, 0.85); /* OE green ring */
  outline-offset: 3px;
}

/* Ensure the header close button shows the ring nicely */
.modal .modal-close:focus-visible,
.modal [data-modal-close]:focus-visible,
.modal .filters-panel__close:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.95);
  outline-offset: 3px;
}

/* If any button styles suppress focus visibility, re-enable it safely */
.modal button {
  -webkit-tap-highlight-color: transparent;
}



/* ================= Modal Mobile Fit & Scroll (Contract) ================= */
@media (max-width:700px){
  /* Allow the open modal container to scroll if the dialog exceeds viewport */
  .modal.is-open,
  .modal[aria-hidden="false"]{
    align-items: flex-start;
    padding: 12px 10px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Dialog should never exceed viewport height */
  .modal__dialog{
    width: min(560px, 94vw);
    max-height: calc(100dvh - 24px);
    border-radius: 18px;
    overflow: hidden;
  }

  /* Ensure internal scrolling works in the body */
  .modal__body{
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
  }

  /* Defensive: remove any accidental "overflow: visible" overrides */
  #modal-update-info .modal__body{
    overflow: auto !important;
  }
}



/* =========================================================
   Global Button System (restored)
   ========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 16px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,0.18);
  background:#ffffff;
  color:#2b2b2b;
  font-weight:600;
  font-size:14px;
  line-height:1;
  text-decoration:none;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}
.btn:focus{
  outline:2px solid rgba(75, 125, 114, 0.35);
  outline-offset:2px;
}
.btn--primary{
  background:#4B7D72;
  border-color:#4B7D72;
  color:#ffffff;
}
.btn--secondary{
  background:#ffffff;
  border-color: rgba(0,0,0,0.22);
  color:#2b2b2b;
}
.btn--ghost{
  background:transparent;
  border-color: rgba(75, 125, 114, 0.45);
  color:#4B7D72;
}
.btn--sm{
  padding:6px 10px;
  border-radius:10px;
  font-size:12px;
}
.btn:disabled,
.btn[aria-disabled="true"]{
  opacity:0.55;
  cursor:not-allowed;
}

/* Button layout helpers on cards */
.committee-actions,
.board-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}

/* Tighten spacing above Committee Interests in New Resident modal */
#new-resident .modal__section-title{
  margin-top:12px;
}
#new-resident .modal__checkbox-group{
  margin-top:6px;
}
#new-resident .modal__checkbox{
  margin:6px 0;
}


/* =========================================================
   New Resident modal spacing tweaks (Directory Visibility ↔ Committee Interests)
   ========================================================= */
#new-resident .modal__field--directory-visibility{
  margin-bottom:12px;
}
#new-resident .modal__field--committee-interests{
  margin-top:10px;
}
#new-resident .modal__checks--compact{
  margin-top:6px;
}
#new-resident .modal__check{
  margin:6px 0;
}

/* Bulletin board card actions */
.board-card__actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}



/* POLISH v2: Update My Info confirmation copy should be left aligned */
#modal-update-info .modal__lead{
  text-align: left;
}
#modal-update-info .modal__body{
  text-align: left;
}



/* Modal select caret (restore dropdown affordance) */
.modal__select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #4f6f66 50%),
    linear-gradient(135deg, #4f6f66 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size:
    6px 6px,
    6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.25rem;
}



/* New Resident House Number select has no class attribute; apply caret + padding by element selector */
.modal .modal__field select,
#oeNrHouse {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #4f6f66 50%),
    linear-gradient(135deg, #4f6f66 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size:
    6px 6px,
    6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.25rem;
}



/* Update My Info – Saved/No-Changes step polish (left-aligned like other OE modal content) */
#modal-update-info [data-step="saved"]{
  text-align: left;
}

#modal-update-info [data-step="saved"] .modal__lead{
  text-align: left;
  margin-top: 0;
  margin-bottom: 0.75rem;
}

#modal-update-info [data-step="saved"] .modal__actions{
  justify-content: flex-start;
}

#modal-update-info [data-step="saved"] .modal__actions .btn{
  min-width: 0;
}



/* Update My Info – Saved step final alignment fix */
#modal-update-info .oe-step[data-step="saved"]{
  text-align: left;
}

#modal-update-info .oe-step[data-step="saved"] .modal__lead{
  text-align: left;
}

#modal-update-info .oe-step[data-step="saved"] .modal__actions{
  justify-content: flex-start;
}

/* ================= Resident Documents Page ================= */
/* Restore comfortable spacing between listed document items (and keep it scoped). */
.resident-documents .documents-list{
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.resident-documents .documents-list .document-card{
  margin: 0 0 18px;
}