/* =========================================================
   2019 Bond Program - interactive data story
   Uses shared variables and page structure from common.css
   ========================================================= */

.page-heading-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:36px;
}

.bond-loading,
.bond-error{
  padding:24px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  box-shadow:var(--shadow);
}

.bond-loading{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:180px;
  color:var(--forest-dark);
  font-weight:700;
}

.bond-loading-spinner{
  width:24px;
  height:24px;
  border:3px solid #DDE6DA;
  border-top-color:var(--copper);
  border-radius:50%;
  animation:bond-spin .8s linear infinite;
}

@keyframes bond-spin{
  to{transform:rotate(360deg)}
}

.bond-error{
  border-left:5px solid #A83D36;
  color:#4A2522;
}

.bond-error strong{
  color:#7A2520;
  font-size:1.05rem;
}

.bond-error p{
  margin:7px 0 0;
}

.bond-dashboard{
  display:grid;
  gap:30px;
}

.bond-section-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  padding:8px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.92);
  box-shadow:0 8px 24px rgba(28,67,32,.07);
}

.bond-section-nav a{
  padding:9px 16px;
  border-radius:9px;
  color:var(--forest-dark);
  font-size:.9rem;
  font-weight:800;
  text-decoration:none;
  transition:background .18s ease,color .18s ease,transform .18s ease;
}

.bond-section-nav a:hover,
.bond-section-nav a:focus-visible{
  color:#fff;
  background:var(--forest-dark);
  transform:translateY(-1px);
}

.bond-overview,
.project-explorer{
  display:grid;
  gap:22px;
}

.section-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:34px;
}

.section-heading h2,

.section-heading>p{
  max-width:590px;
  margin:0;
  color:var(--muted);
  text-align:right;
  line-height:1.55;
}

.story-card,
.filter-panel,
.table-card,

.story-card{
  padding:24px;
}

.story-card h3{
  margin:3px 0 0;
  color:var(--forest-dark);
  font-family:"Cormorant Garamond",serif;
  font-size:1.55rem;
  line-height:1.1;
}

.legend-dot{
  width:10px;
  height:10px;
  flex:0 0 10px;
  border-radius:50%;
  background:#0D3262;
}

.legend-dot--contract{background:#D49B24}
.legend-dot--remaining{background:#8C9298}

.fact{
  appearance:none;
  min-height:88px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  border:1px solid #E1E6DE;
  border-radius:12px;
  background:#FAFBF9;
  color:var(--text);
  text-align:left;
  cursor:pointer;
  transition:border-color .18s ease,background .18s ease,transform .18s ease;
}

.fact:hover,
.fact:focus-visible{
  border-color:#9EB49A;
  background:#F0F5EE;
  transform:translateY(-1px);
}

.fact[aria-pressed="true"]{
  border-color:var(--forest);
  background:#EEF4EB;
  box-shadow:0 0 0 2px rgba(27,94,32,.09);
}

.fact img{
  width:34px;
  height:34px;
  flex:0 0 34px;
  object-fit:contain;
}

.fact span{
  color:#5D685F;
  font-size:.8rem;
  line-height:1.2;
}

.fact strong{
  display:block;
  color:#0D3262;
  font-size:1.45rem;
  line-height:1;
}

.project-explorer{
  padding-top:12px;
  scroll-margin-top:18px;
}

.filter-panel{
  padding:20px;
}

.filter-grid{
  display:grid;
  grid-template-columns:minmax(250px,1.55fr) repeat(4,minmax(140px,.8fr)) auto;
  align-items:end;
  gap:12px;
}

.filter-control{
  min-width:0;
  display:grid;
  gap:6px;
  color:#445048;
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.025em;
}

.filter-control select,
.filter-control input{
  width:100%;
  min-height:43px;
  padding:9px 11px;
  border:1px solid #CED7CC;
  border-radius:9px;
  background:#fff;
  color:#2F3832;
  outline:none;
}

.filter-control select:focus,
.filter-control input:focus{
  border-color:var(--forest);
  box-shadow:0 0 0 3px rgba(27,94,32,.11);
}

.input-with-icon{
  position:relative;
  display:block;
}

.input-with-icon svg{
  position:absolute;
  left:12px;
  top:50%;
  width:18px;
  height:18px;
  fill:none;
  stroke:#536159;
  stroke-width:1.8;
  stroke-linecap:round;
  transform:translateY(-50%);
  pointer-events:none;
}

.input-with-icon input{
  padding-left:39px;
}

.clear-filters,
.load-more{
  min-height:43px;
  padding:9px 15px;
  border:1px solid var(--forest-dark);
  border-radius:9px;
  background:var(--forest-dark);
  color:#fff;
  font-weight:800;
  cursor:pointer;
  transition:background .18s ease,transform .18s ease;
}

.clear-filters:hover,
.clear-filters:focus-visible,
.load-more:hover,
.load-more:focus-visible{
  background:var(--forest);
  transform:translateY(-1px);
}

.table-card{
  overflow:hidden;
}

.table-scroll{
  overflow:auto;
  max-height:720px;
}

.project-table{
  width:100%;
  min-width:1130px;
  border-collapse:separate;
  border-spacing:0;
  background:#fff;
  font-size:.84rem;
}

.project-table th,
.project-table td{
  padding:11px 12px;
  border-bottom:1px solid #E5E9E3;
  vertical-align:middle;
}

.project-table thead th{
  position:sticky;
  top:0;
  z-index:3;
  padding:0;
  background:#202523;
  color:#fff;
  text-align:left;
}

.project-table thead button{
  appearance:none;
  width:100%;
  padding:11px 12px;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  font-weight:800;
  text-align:inherit;
  cursor:pointer;
}

.project-table thead button:hover,
.project-table thead button:focus-visible{
  background:#313936;
}

.project-table thead button[data-sort-direction="asc"]::after{
  content:" \25B2";
  color:#F0B53A;
}

.project-table thead button[data-sort-direction="desc"]::after{
  content:" \25BC";
  color:#F0B53A;
}

.project-table tbody tr:nth-child(even){
  background:#F5F7F4;
}

.project-table tbody tr:hover{
  background:#EEF4EB;
}

.project-table td{
  color:#354039;
}

.project-table td.project-name{
  min-width:240px;
  color:#24372A;
  font-weight:700;
}

.project-table .number-cell{
  text-align:right;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

.money-negative{
  color:#9A312B !important;
  font-weight:700;
}

.status-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:82px;
  padding:4px 8px;
  border-radius:999px;
  background:#E7ECE6;
  color:#47534A;
  font-size:.72rem;
  font-weight:800;
}

.status-pill--complete{
  background:#E5F1E2;
  color:#215D2A;
}

.status-pill--open{
  background:#E4EDF8;
  color:#1B4D7A;
}

.status-pill--contracted{
  background:#FFF0C9;
  color:#855C00;
}

.status-pill--cancelled{
  background:#F4E5E3;
  color:#8A312C;
}

.view-project{
  appearance:none;
  padding:6px 10px;
  border:1px solid #B9C8B5;
  border-radius:7px;
  background:#fff;
  color:var(--forest-dark);
  font-size:.76rem;
  font-weight:800;
  cursor:pointer;
}

.view-project:hover,
.view-project:focus-visible{
  border-color:var(--forest);
  background:#EEF4EB;
}

.project-table tfoot th,
.project-table tfoot td{
  position:sticky;
  bottom:0;
  z-index:2;
  border-bottom:0;
  background:#2A2F2D;
  color:#fff;
  font-weight:800;
}

.project-table tfoot th{
  text-align:left;
}

.table-empty td{
  padding:42px 18px;
  color:#6B756E;
  text-align:center;
}

.table-actions{
  min-height:58px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:10px 14px;
  border-top:1px solid #E2E7E0;
  background:#FAFBF9;
}

.table-actions p{
  margin:0;
  color:#667168;
  font-size:.82rem;
}

.load-more{
  min-height:38px;
  padding:7px 14px;
}

.project-modal{
  position:fixed;
  inset:0;
  z-index:10000;
  display:grid;
  place-items:center;
  padding:22px;
}

.project-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(12,26,15,.66);
  backdrop-filter:blur(3px);
}

.project-modal-dialog{
  position:relative;
  z-index:1;
  width:min(860px,100%);
  max-height:min(88vh,920px);
  overflow:auto;
  padding:30px;
  border:1px solid rgba(255,255,255,.42);
  border-radius:20px;
  background:#fff;
  box-shadow:0 26px 80px rgba(0,0,0,.3);
}

.modal-close{
  position:absolute;
  top:12px;
  right:14px;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:50%;
  background:#EEF2EC;
  color:#364139;
  font-size:1.8rem;
  line-height:1;
  cursor:pointer;
}

.modal-close:hover,
.modal-close:focus-visible{
  background:#DFE9DC;
  color:var(--forest-dark);
}

.modal-eyebrow{
  margin:0;
  color:var(--copper);
  font-size:.75rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.project-modal-dialog h2{
  max-width:720px;
  margin:5px 50px 5px 0;
  color:var(--forest-dark);
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(2rem,4vw,3rem);
  line-height:1.02;
}

.modal-subtitle{
  margin:0;
  color:#657068;
}

.modal-kpis{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin:22px 0;
}

.modal-kpi{
  padding:13px;
  border:1px solid #DEE5DC;
  border-radius:11px;
  background:#F8FAF7;
}

.modal-kpi span{
  display:block;
  color:#6D776F;
  font-size:.68rem;
  font-weight:800;
  text-transform:uppercase;
}

.modal-kpi strong{
  display:block;
  margin-top:3px;
  color:#0D3262;
  font-size:1.15rem;
}

.modal-section{
  margin-top:20px;
}

.modal-section h3{
  margin:0 0 7px;
  color:#2C3B30;
  font-size:1rem;
}

.modal-section p{
  margin:0;
  color:#59645C;
  line-height:1.6;
}

.fy-breakdown{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:7px;
}

.fy-item{
  padding:9px 7px;
  border:1px solid #E1E6DE;
  border-radius:9px;
  background:#FAFBF9;
  text-align:center;
}

.fy-item span{
  display:block;
  color:#6A756D;
  font-size:.69rem;
  font-weight:800;
}

.fy-item strong{
  display:block;
  margin-top:3px;
  color:#26372B;
  font-size:.78rem;
}

.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;
}

body.modal-open{
  overflow:hidden;
}

@media(max-width:1180px){

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

  .filter-control--search{
    grid-column:span 2;
  }
}

@media(max-width:900px){

  .section-heading{
    align-items:flex-start;
    flex-direction:column;
    gap:8px;
  }

  .section-heading>p{
    max-width:760px;
    text-align:left;
  }

  .modal-kpis{
    grid-template-columns:repeat(2,1fr);
  }

  .fy-breakdown{
    grid-template-columns:repeat(4,1fr);
  }
}

@media(max-width:700px){
  .page-heading-row{
    align-items:flex-start;
  }

  .bond-section-nav{
    justify-content:flex-start;
  }

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

  .filter-control--search{
    grid-column:auto;
  }

    .project-modal{
    padding:10px;
  }

  .project-modal-dialog{
    padding:24px 18px;
    border-radius:15px;
  }

  .modal-kpis{
    grid-template-columns:1fr 1fr;
  }

  .fy-breakdown{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:470px){

  .story-card,
  .filter-panel{
    padding:18px;
  }

  .modal-kpis{
    grid-template-columns:1fr;
  }
}

@media(prefers-reduced-motion:reduce){
  .bond-loading-spinner{
    animation:none;
  }

  .bond-section-nav a,
  .fact,
  .clear-filters,
  .load-more{
    transition:none;
  }
}

/* =========================================================
   District project map
   ========================================================= */

.district-map-section{
  display:grid;
  gap:22px;
  scroll-margin-top:22px;
}

.map-section-heading{
  padding-top:2px;
}

.map-story-card{
  overflow:hidden;
  border:1px solid #D8E0D6;
  border-radius:20px;
  background:#fff;
  box-shadow:0 16px 38px rgba(28,67,32,.10);
}

.map-toolbar{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:22px;
  padding:20px 22px 18px;
  border-bottom:1px solid #E1E6DE;
  background:linear-gradient(180deg,#FFFFFF,#F8FAF7);
}

.map-filter-block{
  min-width:0;
  flex:1;
}

.map-toolbar-label{
  display:block;
  margin-bottom:8px;
  color:#425047;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.map-category-filters{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
}

.map-site-buttons button{
  appearance:none;
  -webkit-appearance:none;
  font:inherit;
  cursor:pointer;
}

.map-site-buttons button:focus-visible{
  outline:3px solid rgba(181,110,58,.28);
  outline-offset:2px;
}

.map-layout{
  min-height:650px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 305px;
}

.district-map{
  width:100%;
  height:100%;
  min-height:650px;
  background:#E8EEE7;
}

.map-site-navigation{
  margin-top:17px;
}

.map-site-buttons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
}

.map-site-buttons button{
  min-width:0;
  padding:8px 9px;
  border:1px solid #D9E0D6;
  border-radius:8px;
  color:#173D23;
  background:#fff;
  text-align:left;
  font-size:.72rem;
  font-weight:800;
  line-height:1.15;
  transition:border-color .16s ease,background .16s ease,transform .16s ease;
}

.map-site-buttons button span{
  display:block;
  margin-top:3px;
  overflow:hidden;
  color:#69746C;
  font-size:.67rem;
  font-weight:600;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.map-site-buttons button:hover{
  border-color:#91A090;
  background:#F1F6EF;
  transform:translateY(-1px);
}

.map-note{
  margin:0;
  padding:12px 22px 14px;
  border-top:1px solid #E1E6DE;
  color:#69736B;
  background:#FCFDFC;
  font-size:.78rem;
  line-height:1.45;
}

/* Leaflet map treatment */

/* Accessible fallback if the external map library or service is unavailable. */

@media(max-width:1080px){
  .map-layout{
    grid-template-columns:1fr;
  }

  .map-site-navigation{
    grid-column:2;
  }

  .map-site-navigation{
    grid-row:5;
  }
}

@media(max-width:760px){
  .map-toolbar{
    align-items:flex-start;
    flex-direction:column;
    padding:17px;
  }
  
  .map-layout,
  .district-map{
    min-height:540px;
  }

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

  .map-note{
    padding-inline:17px;
  }

}

@media(max-width:520px){

  .map-layout,
  .district-map{
    min-height:500px;
  }

  .map-site-buttons{
    grid-template-columns:1fr 1fr;
  }

}

@media(prefers-reduced-motion:reduce){
  .map-site-buttons button{
    transition:none;
  }
}

/* =========================================================
   Illustrated district map
   ========================================================= */

/* =========================================================
   Hierarchical bond map explorer
   Bond Subcategory > Project Category > Project Title
   ========================================================= */

.hierarchy-map-card{
  overflow:hidden;
}

.hierarchy-map-toolbar{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  padding:18px;
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.98);
}

.hierarchy-map-toolbar .map-filter-block{
  min-width:0;
  flex:1 1 auto;
}

.hierarchy-map-toolbar .map-toolbar-label{
  display:block;
  margin-bottom:9px;
  color:var(--forest-dark);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.hierarchy-map-toolbar .map-toolbar-label small{
  color:var(--muted);
  font-size:.68rem;
  letter-spacing:.04em;
  text-transform:none;
}

.hierarchy-map-toolbar .map-category-filters{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.map-back-button{
  appearance:none;
  flex:0 0 auto;
  min-height:40px;
  padding:8px 14px;
  border:1px solid var(--forest-dark);
  border-radius:10px;
  background:#fff;
  color:var(--forest-dark);
  font-weight:800;
  cursor:pointer;
}

.map-back-button:hover,
.map-back-button:focus-visible{
  background:var(--forest-dark);
  color:#fff;
}

.map-explorer-status{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:10px 18px;
  border-bottom:1px solid var(--line);
  background:#F8FAF7;
}

.map-breadcrumb{
  color:var(--forest-dark);
  font-size:.82rem;
  font-weight:800;
}

.map-explorer-status p{
  margin:0;
  color:var(--muted);
  font-size:.82rem;
  text-align:right;
}

.hierarchy-map-layout{
  display:grid;
  grid-template-columns:minmax(0,1.72fr) minmax(285px,.68fr);
  min-height:590px;
}

.hierarchy-map-stage{
  min-width:0;
  background:#EDE5D7;
}

.hierarchy-map-figure{
  position:relative;
  min-height:590px;
  height:100%;
  margin:0;
  overflow:hidden;
  background:#EEE7DB;
}

.hierarchy-map-image{
  display:block;
  width:100%;
  height:100%;
  min-height:590px;
  object-fit:cover;
}

.hierarchy-map-overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.map-popup-card{
  position:absolute;
  width:min(190px,22%);
  max-height:210px;
  transform:translate(-50%,-50%);
  overflow:hidden;
  border:1px solid rgba(17,61,24,.28);
  border-radius:12px;
  background:rgba(255,255,255,.96);
  box-shadow:0 12px 28px rgba(35,48,38,.19);
  pointer-events:auto;
}

.map-popup-site{
  appearance:none;
  width:100%;
  padding:8px 10px;
  border:0;
  border-bottom:1px solid #E2E7E0;
  background:var(--forest-dark);
  color:#fff;
  font-size:.76rem;
  font-weight:800;
  text-align:left;
  cursor:pointer;
}

.map-popup-site:hover,
.map-popup-site:focus-visible{
  background:var(--forest);
}

.map-popup-options{
  max-height:168px;
  overflow:auto;
  padding:5px;
}

.map-popup-option{
  appearance:none;
  width:100%;
  display:grid;
  grid-template-columns:8px 1fr;
  align-items:start;
  gap:7px;
  padding:5px 6px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:#354039;
  font-size:.67rem;
  font-weight:700;
  line-height:1.18;
  text-align:left;
  cursor:pointer;
}

.map-popup-option span{
  width:8px;
  height:8px;
  margin-top:2px;
  border-radius:50%;
  background:var(--option-color,#6E873E);
}

.map-popup-option:hover,
.map-popup-option:focus-visible{
  background:#EEF4EB;
  color:var(--forest-dark);
}

.school-map-popup{
  appearance:none;
  position:absolute;
  width:min(205px,25%);
  transform:translate(-50%,-50%);
  padding:10px 12px;
  border:1px solid color-mix(in srgb,var(--popup-color) 42%,#fff);
  border-left:5px solid var(--popup-color);
  border-radius:11px;
  background:rgba(255,255,255,.96);
  color:#26342B;
  text-align:left;
  box-shadow:0 10px 24px rgba(35,48,38,.19);
  cursor:pointer;
  pointer-events:auto;
  transition:transform .18s ease,box-shadow .18s ease;
}

.school-map-popup:hover,
.school-map-popup:focus-visible{
  transform:translate(-50%,-54%);
  box-shadow:0 15px 30px rgba(35,48,38,.24);
}

.school-map-popup small{
  display:block;
  margin-bottom:3px;
  color:#6A756D;
  font-size:.58rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.school-map-popup strong{
  display:block;
  font-size:.76rem;
  line-height:1.2;
}

.hierarchy-map-sidebar{
  display:flex;
  flex-direction:column;
  gap:15px;
  padding:22px;
  border-left:1px solid var(--line);
  background:#fff;
}

.map-sidebar-eyebrow{
  margin:0;
  color:var(--copper);
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.hierarchy-map-sidebar h3{
  margin:-7px 0 0;
  color:var(--forest-dark);
  font-family:"Cormorant Garamond",serif;
  font-size:1.65rem;
  line-height:1.05;
}

.hierarchy-map-detail{
  padding:15px;
  border:1px solid var(--line);
  border-radius:13px;
  background:#F8FAF7;
}

.hierarchy-map-detail p{
  margin:0;
  color:#58635B;
  font-size:.9rem;
  line-height:1.55;
}

.hierarchy-map-detail p + p{
  margin-top:10px;
}

.hierarchy-map-detail strong{
  color:var(--forest-dark);
}

.hierarchy-map-sidebar .map-site-navigation{
  margin-top:auto;
}

.hierarchy-map-sidebar .map-toolbar-label{
  display:block;
  margin-bottom:8px;
  color:var(--forest-dark);
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.hierarchy-map-sidebar .map-site-buttons{
  display:grid;
  gap:7px;
}

.hierarchy-map-sidebar .map-site-buttons button{
  appearance:none;
  width:100%;
  padding:9px 10px;
  border:1px solid #D5DED2;
  border-radius:9px;
  background:#fff;
  color:var(--forest-dark);
  font-weight:800;
  text-align:left;
  cursor:pointer;
}

.hierarchy-map-sidebar .map-site-buttons button span{
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:.68rem;
  font-weight:600;
}

.hierarchy-map-sidebar .map-site-buttons button:hover,
.hierarchy-map-sidebar .map-site-buttons button:focus-visible,
.hierarchy-map-sidebar .map-site-buttons button[aria-pressed="true"]{
  border-color:var(--forest);
  background:#EEF4EB;
}

@media(max-width:1080px){
  .hierarchy-map-layout{
    grid-template-columns:1fr;
  }

  .hierarchy-map-sidebar{
    border-top:1px solid var(--line);
    border-left:0;
  }

  .hierarchy-map-sidebar .map-site-buttons{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:760px){
  .hierarchy-map-toolbar,
  .map-explorer-status{
    align-items:flex-start;
    flex-direction:column;
  }

  .map-explorer-status p{
    text-align:left;
  }

  .hierarchy-map-toolbar .map-category-filters{
    flex-wrap:nowrap;
    width:100%;
    padding-bottom:5px;
    overflow-x:auto;
    scroll-snap-type:x proximity;
  }

  .hierarchy-map-figure,
  .hierarchy-map-image{
    min-height:660px;
  }

  .map-popup-card{
    width:31%;
    max-height:180px;
  }

  .map-popup-site{
    padding:6px 7px;
    font-size:.65rem;
  }

  .map-popup-option{
    padding:4px;
    font-size:.58rem;
  }

  .school-map-popup{
    width:31%;
    padding:8px;
  }

  .school-map-popup small{
    display:none;
  }

  .school-map-popup strong{
    font-size:.66rem;
  }

  .hierarchy-map-sidebar .map-site-buttons{
    grid-template-columns:1fr 1fr;
  }
}

/* =========================================================
   Bond map v5 - dropdown + hover/focus project cards
   ========================================================= */
.map-project-type-select{
  width:min(340px,100%);
  min-height:42px;
  padding:9px 38px 9px 12px;
  border:1px solid #CED7CC;
  border-radius:10px;
  background:#fff;
  color:#2F3832;
  font:inherit;
  font-size:.9rem;
  font-weight:700;
  cursor:pointer;
}
.map-project-type-select:hover,
.map-project-type-select:focus-visible{
  border-color:var(--forest);
  box-shadow:0 0 0 3px rgba(27,94,32,.10);
  outline:none;
}
.map-filter-block[hidden]{display:none!important}

/* Keep the SVG and percentage overlay in the same 1600x1000 geometry. */
.hierarchy-map-stage{align-self:start}
.hierarchy-map-figure{
  width:100%;
  height:auto;
  min-height:0;
  aspect-ratio:8 / 5;
  align-self:start;
}
.hierarchy-map-image{
  width:100%;
  height:100%;
  min-height:0;
  object-fit:contain;
}
.hierarchy-map-overlay{
  pointer-events:auto;
}

.map-site-target{
  position:absolute;
  z-index:1;
  appearance:none;
  padding:0;
  border:2px solid transparent;
  border-radius:16px;
  background:transparent;
  cursor:pointer;
  pointer-events:auto;
  transition:border-color .15s ease,background .15s ease;
}
.map-site-target:hover,
.map-site-target:focus-visible{
  border-color:rgba(17,61,24,.42);
  background:rgba(17,61,24,.035);
  outline:none;
}

.map-highlight{
  position:absolute;
  z-index:2;
  border:2px solid color-mix(in srgb,var(--highlight-color) 78%,#fff);
  background:color-mix(in srgb,var(--highlight-color) 9%,transparent);
  box-shadow:0 0 0 1px rgba(255,255,255,.35);
  pointer-events:none;
}
.map-highlight--round{border-radius:15px}
.map-highlight--pill{border-radius:999px}

.map-info-marker{
  position:absolute;
  z-index:4;
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  transform:translate(-50%,-50%);
  padding:0;
  border:2px solid #fff;
  border-radius:50%;
  background:var(--marker-color,var(--forest-dark));
  color:#fff;
  font:inherit;
  font-size:.9rem;
  font-weight:900;
  font-style:normal;
  line-height:1;
  box-shadow:0 7px 17px rgba(17,61,24,.26);
  cursor:pointer;
  pointer-events:auto;
  transition:transform .15s ease,box-shadow .15s ease;
}
.map-info-marker:hover,
.map-info-marker:focus-visible,
.map-info-marker.is-open{
  transform:translate(-50%,-54%) scale(1.06);
  box-shadow:0 10px 22px rgba(17,61,24,.30);
  outline:none;
}
.map-info-marker:focus-visible{
  box-shadow:0 0 0 4px rgba(181,110,58,.28),0 10px 22px rgba(17,61,24,.30);
}

.map-project-card{
  position:absolute;
  z-index:8;
  width:min(310px,42vw);
  max-height:350px;
  overflow:hidden;
  border:1px solid rgba(17,61,24,.20);
  border-top:4px solid var(--card-color,var(--forest-dark));
  border-radius:15px;
  background:rgba(255,255,255,.985);
  color:#27342B;
  box-shadow:0 20px 44px rgba(35,48,38,.24);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .14s ease,visibility .14s ease,transform .14s ease;
}
.map-project-card--north{transform:translate(-50%,calc(-100% - 12px))}
.map-project-card--south{transform:translate(-50%,12px)}
.map-project-card--east{transform:translate(12px,-50%)}
.map-project-card--west{transform:translate(calc(-100% - 12px),-50%)}

.map-info-marker:hover + .map-project-card,
.map-info-marker:focus-visible + .map-project-card,
.map-info-marker.is-open + .map-project-card,
.map-project-card:hover,
.map-project-card:focus-within{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.map-project-card__header{
  padding:13px 14px 11px;
  border-bottom:1px solid #E4EAE2;
  background:linear-gradient(180deg,color-mix(in srgb,var(--card-color) 10%,#fff),#fff);
}
.map-project-card__eyebrow{
  margin:0 0 4px;
  color:#69756D;
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.075em;
  line-height:1.25;
  text-transform:uppercase;
}
.map-project-card__header h4{
  margin:0;
  color:var(--forest-dark);
  font-size:1rem;
  line-height:1.17;
}
.map-project-card__meta{
  margin:5px 0 0;
  color:#647067;
  font-size:.7rem;
  line-height:1.3;
}
.map-project-card__list{
  max-height:255px;
  overflow:auto;
  padding:7px;
}
.map-project-line{
  appearance:none;
  width:100%;
  display:block;
  padding:9px 9px 10px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#28352D;
  text-align:left;
  cursor:pointer;
}
.map-project-line + .map-project-line{margin-top:2px}
.map-project-line:hover,
.map-project-line:focus-visible{
  background:#EEF4EB;
  outline:none;
}
.map-project-line strong{
  display:block;
  color:var(--forest-dark);
  font-size:.76rem;
  line-height:1.2;
}
/* "Not shown on the map yet": project name with its status beside it. */
.map-project-line__title{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
}
.map-project-line__status{
  min-width:0;
  flex:none;
  padding:2px 7px;
  font-size:.6rem;
}
.map-project-line__desc{
  display:block;
  margin-top:4px;
  color:#56635B;
  font-size:.69rem;
  line-height:1.28;
}
.map-project-line__stats{
  display:block;
  margin-top:6px;
  color:#6B756E;
  font-size:.65rem;
  font-weight:700;
  line-height:1.2;
}

@media (max-width:900px){
  .map-project-card{width:min(290px,65vw)}
}
@media (max-width:760px){
  .map-project-type-select{width:100%}
  .map-project-card{width:min(270px,78vw);max-height:315px}
  .map-info-marker{width:30px;height:30px}
}

/* =========================================================
   Transaction-level bond expense explorer
   ========================================================= */
.transaction-explorer{
  padding-top:30px;
  scroll-margin-top:18px;
}

.line-filter-grid{
  grid-template-columns:minmax(280px,1.55fr) repeat(4,minmax(140px,.8fr)) auto;
}

.line-item-source{
  min-width:0;
  color:#667169 !important;
  font-weight:600 !important;
}

.bond-inline-error{
  margin:0 0 16px;
  padding:12px 14px;
  border:1px solid #E3C9C6;
  border-radius:10px;
  background:#FFF7F6;
  color:#7B3B36;
  font-weight:700;
}

.line-item-table-scroll{
  max-height:780px;
}

.line-item-table{
  min-width:1500px;
}

.line-item-table thead th{
  padding:11px 12px;
  font-weight:800;
}

.line-item-table td{
  vertical-align:top;
}

.line-item-table td:first-child{
  white-space:nowrap;
}

.line-item-project{
  min-width:255px;
}

.line-item-project strong{
  color:#26372B;
  font-weight:800;
}

.line-item-project small,
.line-item-subtext{
  display:block;
  margin-top:4px;
  color:#6B756E;
  font-size:.72rem;
  font-weight:600;
  line-height:1.35;
}

.line-item-memo{
  min-width:360px;
  max-width:520px;
  line-height:1.42;
}

.line-item-table tfoot th,
.line-item-table tfoot td{
  position:sticky;
  bottom:0;
  z-index:2;
  background:#F1F4EF;
  border-top:1px solid #D9E0D6;
  font-weight:800;
}

.modal-section-heading{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  margin-bottom:8px;
}

.modal-section-heading h3,
.modal-section-heading p{
  margin:0;
}

.modal-section-heading p{
  color:#6A756D;
  font-size:.78rem;
  font-weight:700;
}

.modal-line-items-scroll{
  max-height:360px;
  overflow:auto;
  border:1px solid #DEE5DC;
  border-radius:10px;
}

.modal-line-items-table{
  width:100%;
  min-width:720px;
  border-collapse:collapse;
  background:#fff;
  font-size:.78rem;
}

.modal-line-items-table th,
.modal-line-items-table td{
  padding:9px 10px;
  border-bottom:1px solid #E7EBE5;
  text-align:left;
  vertical-align:top;
}

.modal-line-items-table thead th{
  position:sticky;
  top:0;
  z-index:2;
  background:#26312A;
  color:#fff;
  font-weight:800;
}

.modal-line-items-table tbody tr:nth-child(even){
  background:#F7F9F6;
}

.modal-line-items-table small{
  display:block;
  margin-top:3px;
  color:#6B756E;
  line-height:1.35;
}

.modal-line-items-table td:first-child{
  white-space:nowrap;
}

/* Popup title: project name followed by its school or "District-wide". */
.modal-title-scope{
  color:#6A7A6E;
  font-size:.62em;
  font-weight:700;
  white-space:nowrap;
}

/* Popup expense table: sort and filter buttons in the header ribbon,
   highlighted school rows. */
.modal-line-table-wrap{
  position:relative;
}

.modal-th-inner{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.number-cell .modal-th-inner{
  justify-content:flex-end;
}

.modal-filter-button{
  width:22px;
  height:22px;
  display:inline-grid;
  place-items:center;
  flex:none;
  padding:0;
  border:1px solid rgba(255,255,255,.28);
  border-radius:5px;
  background:transparent;
  color:rgba(255,255,255,.75);
  cursor:pointer;
}

.modal-filter-button:hover,
.modal-filter-button:focus-visible,
.modal-filter-button[aria-expanded="true"]{
  border-color:#fff;
  color:#fff;
}

/* A filter is applied to this column. */
.modal-filter-button.is-active{
  border-color:#E0A77F;
  background:#E0A77F;
  color:#26312A;
}

.modal-filter-popover{
  position:absolute;
  z-index:5;
  width:max-content;
  min-width:200px;
  max-width:min(320px,100%);
  padding:8px;
  border:1px solid #CED7CC;
  border-radius:10px;
  background:#fff;
  box-shadow:0 12px 30px rgba(20,32,24,.22);
}

.modal-filter-popover[hidden]{
  display:none;
}

.modal-filter-choices{
  max-height:240px;
  display:grid;
  gap:2px;
  overflow:auto;
}

.modal-filter-choice{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  padding:7px 9px;
  border:0;
  border-radius:6px;
  background:none;
  color:#2F3832;
  font:inherit;
  font-size:.82rem;
  text-align:left;
  cursor:pointer;
}

.modal-filter-choice:hover,
.modal-filter-choice:focus-visible{
  background:#EEF2EC;
}

.modal-filter-choice[aria-pressed="true"]{
  font-weight:800;
}

.modal-filter-check{
  width:1em;
  color:var(--forest);
  visibility:hidden;
}

.modal-filter-choice[aria-pressed="true"] .modal-filter-check{
  visibility:visible;
}

.modal-filter-search{
  display:grid;
  gap:6px;
  color:#445048;
  font-size:.76rem;
  font-weight:800;
}

.modal-filter-search input{
  width:260px;
  max-width:100%;
  min-height:36px;
  padding:7px 10px;
  border:1px solid #CED7CC;
  border-radius:8px;
  font:inherit;
  font-weight:400;
}

.modal-filter-search input:focus{
  border-color:var(--forest);
  box-shadow:0 0 0 3px rgba(27,94,32,.11);
  outline:none;
}

.modal-filter-clear{
  margin-top:8px;
  padding:5px 9px;
  border:1px solid #CED7CC;
  border-radius:6px;
  background:#F8FAF7;
  color:#2F3832;
  font:inherit;
  font-size:.78rem;
  font-weight:700;
  cursor:pointer;
}

.modal-sort-button{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:0;
  border:0;
  background:none;
  color:inherit;
  font:inherit;
  font-weight:800;
  cursor:pointer;
}

.modal-sort-button:hover,
.modal-sort-button:focus-visible{
  text-decoration:underline;
}

.number-cell .modal-sort-button{
  flex-direction:row-reverse;
}

.modal-sort-indicator{
  min-width:.7em;
  font-size:.7em;
}

.modal-line-focus-note{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 8px !important;
  font-size:.8rem;
}

.modal-line-focus-swatch{
  width:14px;
  height:14px;
  flex:none;
  border:2px solid #26312A;
  border-radius:3px;
  background:#fff;
  box-shadow:0 2px 5px rgba(20,32,24,.3);
}

/* Selected look: dark outline with a soft shadow fading out around it. */
.modal-line-items-table tbody tr.is-focus-site{
  position:relative;
  background:#fff;
  outline:2px solid #26312A;
  outline-offset:-2px;
  box-shadow:0 3px 12px rgba(20,32,24,.18);
}

/* Spending by school: the school whose map opened the popup stands out. */
.fy-breakdown--focused .fy-item{
  opacity:.72;
}

.fy-breakdown--focused .fy-item--focus{
  opacity:1;
  border:2px solid #26312A;
  background:#fff;
  box-shadow:0 4px 14px rgba(20,32,24,.22);
}

.fy-item--focus strong{
  color:#14251A;
  font-size:.92rem;
}

.fy-item-tag{
  display:block;
  margin-top:2px;
  color:#26312A;
  font-size:.62rem;
  font-style:normal;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}

@media(max-width:1100px){
  .line-filter-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .line-filter-grid .filter-control--search{
    grid-column:1 / -1;
  }
}

@media(max-width:640px){
  .line-filter-grid{
    grid-template-columns:1fr;
  }

  .line-filter-grid .filter-control--search{
    grid-column:auto;
  }

  .modal-section-heading{
    align-items:flex-start;
    flex-direction:column;
    gap:8px;
  }
}

/* =========================================================
   Rendered school maps: object glows, notes, coming-soon sites
   ========================================================= */

/* Glow images sit in the same 1600x1000 percentage grid as the markers.
   Each is a soft halo around the object only (the object itself is cut
   out), so the render shows through untouched. */
.map-glow{
  position:absolute;
  z-index:3;
  max-width:none;
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease;
}
.map-glow.is-active{
  opacity:1;
  animation:mapGlowPulse 1.8s ease-in-out infinite;
}
@keyframes mapGlowPulse{
  0%,100%{opacity:1}
  50%{opacity:.6}
}
@media (prefers-reduced-motion:reduce){
  .map-glow.is-active{animation:none}
}

.map-project-card__note{
  margin:7px 0 0;
  padding:6px 8px;
  border-radius:8px;
  background:#FFF6E8;
  color:#6B4A2B;
  font-size:.68rem;
  line-height:1.3;
}

.map-unmapped-title{margin:14px 0 4px}
.map-unmapped-list{
  display:grid;
  gap:2px;
  margin:0 -9px;
}

.map-site-target--soon{
  cursor:default;
  pointer-events:auto;
}
.map-site-target--soon:hover{
  border-color:rgba(104,113,105,.35);
  background:rgba(255,255,255,.18);
}
.map-site-target--soon::after{
  content:attr(data-soon-label);
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  padding:5px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.94);
  color:#56635B;
  font-size:.72rem;
  font-weight:700;
  white-space:nowrap;
  box-shadow:0 4px 12px rgba(35,48,38,.16);
  opacity:0;
  transition:opacity .15s ease;
}
.map-site-target--soon:hover::after{opacity:1}

.map-site-buttons button.is-soon{
  opacity:.55;
  cursor:not-allowed;
}

/* Let project cards extend past the edge of the map so they can always open
   to the upper right of their circled i. The map image keeps the card's
   rounded corner on its own. */
.map-story-card.hierarchy-map-card,
.hierarchy-map-card .hierarchy-map-figure{overflow:visible}
.hierarchy-map-card .hierarchy-map-stage{border-bottom-left-radius:20px}
.hierarchy-map-card .hierarchy-map-figure,
.hierarchy-map-card .hierarchy-map-image{border-bottom-left-radius:20px}
.map-project-card{z-index:30}
@media (max-width:1080px){
  .hierarchy-map-card .hierarchy-map-stage,
  .hierarchy-map-card .hierarchy-map-figure,
  .hierarchy-map-card .hierarchy-map-image{border-bottom-left-radius:0}
}

/* =========================================================
   Cleaned-up page layout (summary, projects, expense records)
   ========================================================= */

/* Keep every dashboard section inside the page width. Without this the grid
   track grew to fit the widest table and pushed content past the right edge. */
.bond-dashboard{grid-template-columns:minmax(0,1fr)}

.section-heading{align-items:flex-end}
.section-heading h2{
  margin:2px 0 0;
  max-width:none;
  color:var(--forest-dark);
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(1.7rem,2.6vw,2.15rem);
  line-height:1.1;
  text-align:left;
}

.summary-card,
.bond-summary ~ .project-explorer .filter-panel,
.bond-summary ~ .project-explorer .table-card,
.records-details{
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  box-shadow:0 10px 28px rgba(28,67,32,.07);
}

/* --- program summary ------------------------------------ */

.bond-summary{gap:16px}

.summary-card{padding:22px 24px}

.summary-headline{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:6px 14px;
}
.summary-total{
  margin:0;
  color:var(--forest-dark);
  font-size:1.15rem;
  font-weight:700;
}
.summary-total strong{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(2.4rem,4.5vw,3.2rem);
  line-height:1;
  margin-right:4px;
}
.summary-of{
  margin:0;
  color:var(--muted);
  font-size:1rem;
  font-weight:600;
}

.summary-bar{
  display:flex;
  height:14px;
  margin-top:16px;
  overflow:hidden;
  border-radius:999px;
  background:#E3E7E2;
}
.summary-bar span{height:100%;transition:width .35s ease}
.summary-bar__spent{background:linear-gradient(90deg,#0D3262,#1B5E20)}
.summary-bar__contract{background:#D49B24}

.summary-legend{
  display:flex;
  flex-wrap:wrap;
  gap:8px 22px;
  margin:12px 0 0;
  color:#5E6961;
  font-size:.86rem;
}
.summary-legend span{display:inline-flex;align-items:center;gap:7px}

.summary-breakdowns{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.summary-breakdowns h3{
  margin:0 0 10px;
  color:var(--forest-dark);
  font-size:1rem;
  font-weight:800;
}

.breakdown-chart{display:grid;gap:2px}
.breakdown-row{
  appearance:none;
  display:grid;
  grid-template-columns:minmax(120px,1.1fr) minmax(60px,1fr) 64px;
  align-items:center;
  gap:12px;
  width:100%;
  padding:7px 8px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
}
.breakdown-row:hover,
.breakdown-row:focus-visible{background:#F1F5EF;outline:none}
.breakdown-row[aria-pressed="true"]{background:#E5F0E2;box-shadow:inset 3px 0 0 var(--forest)}
.breakdown-label{
  min-width:0;
  color:#26372B;
  font-size:.85rem;
  font-weight:700;
  line-height:1.2;
}
.breakdown-label small{
  display:block;
  color:#748078;
  font-size:.7rem;
  font-weight:600;
}
.breakdown-track{
  height:9px;
  overflow:hidden;
  border-radius:999px;
  background:#E9ECE8;
}
.breakdown-bar{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#0D3262,#1B5E20);
}
.breakdown-value{
  color:#1E3326;
  font-size:.85rem;
  font-weight:800;
  text-align:right;
  font-variant-numeric:tabular-nums;
}

/* --- projects ------------------------------------------- */

.project-filter-grid{
  grid-template-columns:minmax(220px,1.6fr) minmax(170px,1fr) minmax(170px,1fr) auto;
}

.status-chips{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:7px;
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid #E4E8E2;
}
.status-chips__label{
  margin-right:4px;
  color:#445048;
  font-size:.76rem;
  font-weight:800;
}
.status-chip{
  appearance:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 11px;
  border:1px solid #D8E0D6;
  border-radius:999px;
  background:#fff;
  color:#34433A;
  font:inherit;
  font-size:.78rem;
  font-weight:700;
  cursor:pointer;
}
.status-chip i{width:8px;height:8px;border-radius:50%}
.status-chip span{color:#748078;font-weight:600}
.status-chip:hover,
.status-chip:focus-visible{border-color:var(--forest);outline:none}
.status-chip[aria-pressed="true"]{
  border-color:var(--forest-dark);
  background:var(--forest-dark);
  color:#fff;
}
.status-chip[aria-pressed="true"] span{color:rgba(255,255,255,.8)}

.result-summary{
  margin:10px 0 0;
  color:#59645C;
  font-size:.84rem;
  font-weight:700;
}

.project-table--simple{min-width:640px}
.project-table--simple th:nth-child(2),
.project-table--simple td:nth-child(2){width:80px}
.project-table--simple th:nth-child(3),
.project-table--simple td:nth-child(3),
.project-table--simple th:nth-child(4),
.project-table--simple td:nth-child(4){width:130px}
.project-table--simple th:nth-child(5),
.project-table--simple td:nth-child(5){width:120px}

.project-link{
  appearance:none;
  display:block;
  width:100%;
  padding:0;
  border:0;
  background:none;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
}
.project-link strong{
  color:var(--forest-dark);
  font-weight:800;
}
.project-link small{
  display:block;
  margin-top:3px;
  color:#6B756E;
  font-size:.72rem;
  font-weight:600;
}
.project-link:hover strong,
.project-link:focus-visible strong{text-decoration:underline}
.project-link:focus-visible{outline:2px solid var(--forest);outline-offset:3px;border-radius:4px}
.project-table--simple tbody tr{cursor:pointer}

/* --- expense records (collapsed by default) ------------- */

.transaction-explorer{padding-top:0}

.records-details > summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:20px 24px;
  cursor:pointer;
  list-style:none;
}
.records-details > summary::-webkit-details-marker{display:none}
.records-details > summary:focus-visible{outline:3px solid var(--forest);outline-offset:-3px;border-radius:16px}
.records-details .section-kicker{display:block}
.records-title{
  display:block;
  margin-top:2px;
  color:var(--forest-dark);
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(1.5rem,2.3vw,1.85rem);
  font-weight:700;
  line-height:1.1;
}
.records-sub{
  display:block;
  margin-top:5px;
  color:var(--muted);
  font-size:.9rem;
}
.records-toggle{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 14px;
  border:1px solid var(--forest-dark);
  border-radius:9px;
  color:var(--forest-dark);
  font-size:.86rem;
  font-weight:800;
}
.records-toggle::before{content:"Show expenses"}
.records-toggle::after{content:"\25BE";font-size:.8rem}
.records-details[open] .records-toggle::before{content:"Hide expenses"}
.records-details[open] .records-toggle::after{content:"\25B4"}

.records-body{
  display:grid;
  gap:14px;
  padding:0 24px 22px;
}
.records-body .filter-panel{
  padding:0;
  border:0;
  box-shadow:none;
  background:none;
}
.records-body .table-card{
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:none;
}
.records-body .line-item-source{margin:0;font-size:.78rem}

.line-filter-grid{
  grid-template-columns:minmax(220px,1.6fr) minmax(150px,.8fr) minmax(150px,.8fr) auto;
}
.line-item-table--simple{min-width:760px}
.line-item-table--simple .line-item-memo{min-width:260px;max-width:none}
.line-item-table--simple .line-item-memo strong{display:block;color:#26372B;font-weight:800}
.line-item-table--simple .line-item-memo small{
  display:block;
  margin-top:3px;
  color:#6B756E;
  font-size:.72rem;
  font-weight:600;
}
.line-item-table--simple .line-item-project{min-width:200px}
.line-item-table--simple td:nth-child(4){white-space:nowrap}

@media (max-width:900px){
  .summary-breakdowns{grid-template-columns:1fr}
  .project-filter-grid,
  .line-filter-grid{grid-template-columns:1fr 1fr}
  .project-filter-grid .filter-control--search,
  .line-filter-grid .filter-control--search{grid-column:1 / -1}
  .section-heading{flex-direction:column;align-items:flex-start;gap:8px}
  .section-heading>p{text-align:left}
}
@media (max-width:560px){
  .project-filter-grid,
  .line-filter-grid{grid-template-columns:1fr}
  .summary-card{padding:18px}
  .records-details > summary{flex-direction:column;align-items:flex-start;padding:18px}
  .records-body{padding:0 16px 18px}
  .breakdown-row{grid-template-columns:minmax(100px,1fr) minmax(50px,.8fr) 58px;gap:8px}
}
.records-body .table-card{padding:0;overflow:hidden}
.line-item-table--simple tfoot th,
.line-item-table--simple tfoot td{
  background:#EEF3EC;
  color:#1E3326;
}
.cell-subtext{
  display:block;
  margin-top:2px;
  color:#6B756E;
  font-size:.7rem;
  font-weight:600;
}
.map-unmapped-list{
  max-height:300px;
  overflow:auto;
  padding-right:4px;
}

.budget-undocumented{color:#6B756E;font-style:italic;font-weight:600}


/* Voter-approved category chart */
.summary-breakdowns--single{grid-template-columns:1fr}
.ballot-heading{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px 20px;
  margin-bottom:10px;
}
.ballot-heading h3{margin:0}
.ballot-heading p{margin:4px 0 0;color:#5E6961;font-size:.86rem}
.ballot-pdf-link{
  flex:0 0 auto;
  padding:8px 13px;
  border:1px solid var(--forest-dark);
  border-radius:9px;
  color:var(--forest-dark);
  font-size:.82rem;
  font-weight:800;
  text-decoration:none;
}
.ballot-pdf-link:hover,
.ballot-pdf-link:focus-visible{background:var(--forest-dark);color:#fff}
.ballot-row{grid-template-columns:minmax(180px,1.4fr) minmax(80px,1fr) 150px}
.breakdown-value small{
  display:block;
  color:#6B756E;
  font-size:.7rem;
  font-weight:600;
}
.breakdown-bar--over{background:linear-gradient(90deg,#B56E3A,#D49B24)}
.ballot-group{
  margin:12px 8px 2px;
  color:var(--forest);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.ballot-total{
  margin:12px 8px 0;
  padding-top:10px;
  border-top:1px solid #E4E8E2;
  color:#34433A;
  font-size:.86rem;
  text-align:right;
}
@media (max-width:560px){
  .ballot-row{grid-template-columns:1fr 92px}
  .ballot-row .breakdown-track{grid-column:1 / -1;order:3}
}
.ballot-total{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;align-items:baseline}
.ballot-key{color:#6B756E;font-size:.76rem;text-align:left}

.ballot-total-value{display:flex;flex-direction:column;align-items:flex-end;color:#1E3326;font-variant-numeric:tabular-nums}
.ballot-total-value strong{color:#1E3326;font-size:.9rem;font-weight:800}
.ballot-total-value small{color:#6B756E;font-size:.72rem;font-weight:600}