:root{
    --navy: #0D173E;
    --navy-soft: #172352;
    --blue: #1B45C9;
    --blue-deep: #102C8F;
    --blue-soft: #7FA8EA;
    --blue-pale: #EAF0FD;
    --green: #1B3E2C;
    --bg: #F5F4EF;
    --paper: #FFFFFF;
    --ink: #16201C;
    --ink-muted: #5B6560;
    --line: #E4E1D6;
    --radius: 14px;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:'IBM Plex Sans', sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.display{
    font-family:'Fraunces', serif;
    font-weight:600;
    letter-spacing:-0.01em;
    color:var(--navy);
    margin:0;
  }
  .mono{font-family:'IBM Plex Mono', monospace;}
  a{color:inherit;}
  button{font-family:inherit;cursor:pointer;}
  ::selection{background:var(--blue-pale);}

  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{
    outline:2px solid var(--blue);
    outline-offset:2px;
  }

  /* ---------- Header (white, so the logo blends) ---------- */
  header.site{
    position:sticky; top:0; z-index:40;
    background:#FFFFFF;
    border-bottom:1px solid var(--line);
    box-shadow:0 1px 0 rgba(13,23,62,0.03);
  }
  header.site .accent-line{height:6px; background:linear-gradient(90deg, var(--navy) 0%, var(--blue) 55%, var(--blue-soft) 100%);}
  .header-inner{
    max-width:1280px; margin:0 auto;
    display:flex; align-items:center; justify-content:space-between;
    padding:20px 28px;
  }
  .brand{display:flex; align-items:center; gap:16px;}
  .brand img{height:62px; width:auto;}
  .brand-text{display:flex; flex-direction:column; line-height:1.15;}
  .brand-text .name{font-family:'Fraunces', serif; font-weight:700; font-size:1.5rem; color:var(--navy);}
  .brand-text .name .amp{color:var(--blue);}
  .brand-text .tag{font-family:'IBM Plex Mono', monospace; font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--blue-deep); font-weight:600; margin-top:2px;}
  nav.top{display:flex; gap:10px; font-size:0.86rem;}
  nav.top button{
    background:none; border:none; padding:10px 16px; border-radius:9px; font-weight:600; color:var(--ink-muted); font-family:inherit; font-size:0.86rem;
    transition:background .15s ease, color .15s ease;
  }
  nav.top button:hover{background:var(--blue-pale); color:var(--blue-deep);}
  nav.top button.on{background:var(--navy); color:#fff;}

  /* ---------- Hero ---------- */
  .hero{
    background: radial-gradient(circle at 15% 20%, rgba(27,69,201,0.22), transparent 45%), linear-gradient(180deg, var(--navy) 0%, #08102c 100%);
    color:#fff;
    padding:64px 28px 40px;
  }
  .hero-inner{max-width:1280px; margin:0 auto;}
  .eyebrow{
    font-family:'IBM Plex Mono', monospace; font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase;
    color:var(--blue-soft); margin-bottom:14px; display:flex; align-items:center; gap:10px;
  }
  .eyebrow::before{content:''; width:22px; height:1px; background:var(--blue-soft); display:inline-block;}
  .hero h1{
    font-size:clamp(2rem, 4.2vw, 3.4rem);
    color:#fff;
    max-width:16ch;
    line-height:1.03;
  }
  .hero p.sub{
    max-width:56ch; margin-top:16px; color:#c7cde0; font-size:1.02rem; line-height:1.55;
  }
  .hero p.sub b{color:#fff;}
  .stats-row{display:flex; gap:34px; margin-top:34px; flex-wrap:wrap;}
  .stat .num{font-family:'Fraunces', serif; font-size:1.9rem; color:var(--blue-soft); font-weight:600;}
  .stat .label{font-size:0.75rem; color:#9aa3c0; text-transform:uppercase; letter-spacing:0.06em; margin-top:2px;}

  .searchbar{
    margin-top:36px; background:var(--paper); border-radius:16px; padding:8px;
    display:flex; align-items:center; gap:8px; box-shadow:0 18px 40px rgba(0,0,0,0.28);
    max-width:680px;
  }
  .searchbar input{
    flex:1; border:none; outline:none; padding:14px 12px; font-size:1rem; color:var(--ink); background:transparent; font-family:'IBM Plex Sans';
  }
  .searchbar button{
    background:var(--blue); color:#fff; border:none; border-radius:11px; padding:13px 22px;
    font-weight:600; font-size:0.92rem; transition:background .15s ease;
  }
  .searchbar button:hover{background:var(--blue-deep);}

  .zone-strip{
    margin-top:38px; display:grid; grid-template-columns:repeat(6,1fr); gap:2px;
    border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,0.12);
  }
  .zone-chip{
    background:rgba(255,255,255,0.04);
    padding:14px 10px; text-align:left; border:none; color:#d6dbef; cursor:pointer;
    transition:background .15s ease, color .15s ease;
    border-right:1px solid rgba(255,255,255,0.08);
  }
  .zone-chip:last-child{border-right:none;}
  .zone-chip .zn{font-family:'IBM Plex Mono'; font-size:0.66rem; text-transform:uppercase; letter-spacing:0.06em; opacity:0.75;}
  .zone-chip .zc{font-family:'Fraunces'; font-weight:600; font-size:1.15rem; margin-top:3px;}
  .zone-chip:hover{background:rgba(255,255,255,0.09);}
  .zone-chip.active{background:var(--blue); color:#fff;}
  .zone-chip.active .zn{color:#fff; opacity:0.75;}

  /* ---------- Main layout ---------- */
  .layout{max-width:1280px; margin:0 auto; padding:34px 28px 90px; display:grid; grid-template-columns:270px 1fr; gap:30px;}
  @media (max-width:900px){ .layout{grid-template-columns:1fr;} }

  .panel{
    background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
    padding:20px; height:max-content;
  }
  .panel h3{font-size:0.95rem; margin-bottom:14px; display:flex; align-items:center; gap:8px;}
  .panel h3::before{content:''; width:6px; height:6px; background:var(--blue); border-radius:50%; display:inline-block;}
  .field{margin-bottom:20px;}
  .field label{
    display:block; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-muted); margin-bottom:8px; font-weight:600;
  }
  .field select, .field input[type=text]{
    width:100%; padding:10px 12px; border-radius:9px; border:1px solid var(--line); background:#FBFAF6; font-size:0.9rem; color:var(--ink); font-family:inherit;
  }
  .toggle-group{display:grid; grid-template-columns:1fr 1fr; gap:1px; border:1px solid var(--line); border-radius:9px; overflow:hidden; background:var(--line);}
  .toggle-group button{
    padding:9px 6px; border:none; background:#FBFAF6; font-size:0.78rem; color:var(--ink-muted); font-weight:500; line-height:1.25;
  }
  .toggle-group button.active{background:var(--navy); color:#fff;}
  .toggle-group button[data-type="all"], .toggle-group button[data-type="health"]{grid-column:1 / -1;}
  .checkbox-list label{
    display:flex; align-items:center; gap:8px; font-size:0.87rem; color:var(--ink); margin-bottom:8px; text-transform:none; letter-spacing:0; font-weight:400;
  }
  .checkbox-list input{accent-color:var(--blue);}
  .reset-btn{
    width:100%; background:none; border:1px solid var(--line); color:var(--ink-muted);
    padding:9px; border-radius:9px; font-size:0.82rem; margin-top:4px;
  }
  .reset-btn:hover{border-color:var(--navy); color:var(--navy);}

  .results-header{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px; flex-wrap:wrap; gap:10px;}
  .active-filters{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px;}
  .active-filters .chip{
    display:flex; align-items:center; gap:6px; background:var(--blue-pale); color:var(--blue-deep);
    padding:5px 10px 5px 12px; border-radius:20px; font-size:0.76rem; font-weight:600;
  }
  .active-filters .chip button{background:none; border:none; color:var(--blue-deep); opacity:0.7; font-size:0.85rem; line-height:1;}
  .active-filters .chip button:hover{opacity:1;}
  .results-count{font-size:0.95rem; color:var(--ink-muted);}
  .results-count b{color:var(--navy); font-family:'Fraunces';}
  .sort-select select{padding:8px 10px; border-radius:8px; border:1px solid var(--line); font-size:0.82rem; background:var(--paper);}

  .grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:16px;}
  .card{
    background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:18px;
    display:flex; flex-direction:column; gap:10px; transition:box-shadow .15s ease, transform .15s ease;
  }
  .card:hover{box-shadow:0 10px 26px rgba(13,23,62,0.08); transform:translateY(-2px);}
  .card-top{display:flex; justify-content:space-between; align-items:flex-start; gap:8px;}
  .badge{
    font-family:'IBM Plex Mono'; font-size:0.62rem; text-transform:uppercase; letter-spacing:0.05em;
    padding:4px 8px; border-radius:20px; white-space:nowrap; font-weight:600;
  }
  .badge.Federal{background:#e6efe9; color:var(--green);}
  .badge.State{background:var(--blue-pale); color:var(--blue-deep);}
  .badge.Private{background:#fbeee0; color:#a5551e;}
  .badge.type{background:#f1eee2; color:var(--ink-muted);}
  .card .prog{font-family:'Fraunces'; font-size:1.12rem; color:var(--navy); line-height:1.25;}
  .card .inst{font-size:0.86rem; color:var(--ink); font-weight:500;}
  .card .fac{font-size:0.78rem; color:var(--ink-muted);}
  .card .meta{display:flex; gap:14px; font-size:0.78rem; color:var(--ink-muted); margin-top:2px; flex-wrap:wrap;}
  .card .meta span{display:flex; align-items:center; gap:5px;}
  .card-actions{display:flex; gap:8px; margin-top:6px;}
  .card-actions a, .card-actions button{
    flex:1; text-align:center; padding:8px 10px; border-radius:8px; font-size:0.78rem; font-weight:600; text-decoration:none;
    border:1px solid var(--line); color:var(--navy); background:#FBFAF6;
  }
  .card-actions a:hover{border-color:var(--navy);}
  .card-actions button.add{background:var(--navy); color:#fff; border-color:var(--navy);}
  .card-actions button.add.added{background:var(--blue); color:#fff; border-color:var(--blue);}

  .load-more{display:flex; justify-content:center; margin-top:26px;}
  .load-more button{
    background:var(--paper); border:1px solid var(--line); color:var(--navy); font-weight:600;
    padding:12px 26px; border-radius:10px; font-size:0.88rem;
  }
  .load-more button:hover{border-color:var(--navy);}

  .empty{ text-align:center; padding:70px 20px; color:var(--ink-muted); }
  .empty .display{font-size:1.4rem; margin-bottom:8px;}

  .tray{
    position:fixed; left:0; right:0; bottom:0; z-index:50;
    background:var(--navy); color:#fff; padding:14px 28px;
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    transform:translateY(110%); transition:transform .25s ease;
    box-shadow:0 -8px 30px rgba(0,0,0,0.25);
  }
  .tray.show{transform:translateY(0);}
  .tray-items{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
  .tray-chip{
    background:rgba(255,255,255,0.1); padding:6px 12px; border-radius:20px; font-size:0.78rem; display:flex; align-items:center; gap:8px;
  }
  .tray-chip button{background:none; border:none; color:#fff; opacity:0.7; font-size:0.9rem; line-height:1;}
  .tray button.compare-btn{
    background:var(--blue); color:#fff; border:none; padding:11px 22px; border-radius:9px; font-weight:700; font-size:0.88rem; white-space:nowrap;
  }
  .tray button.compare-btn:hover:not(:disabled){background:var(--blue-deep);}
  .tray button.compare-btn:disabled{opacity:0.4; cursor:not-allowed;}
  .tray-hint{font-size:0.76rem; color:#9aa3c0;}

  .toast{
    position:fixed; top:18px; left:50%; z-index:70;
    background:var(--navy); color:#fff; padding:12px 22px; border-radius:10px;
    font-size:0.86rem; font-weight:600; text-align:center; max-width:min(90vw, 420px);
    box-shadow:0 12px 30px rgba(13,23,62,0.3);
    opacity:0; pointer-events:none;
    transform:translate(-50%, -12px);
    transition:opacity .2s ease, transform .2s ease;
  }
  .toast.show{ opacity:1; transform:translate(-50%, 0); }

  .modal-backdrop{
    position:fixed; inset:0; background:rgba(13,23,62,0.55); z-index:60; display:none; align-items:center; justify-content:center; padding:24px;
  }
  .modal-backdrop.show{display:flex;}
  .modal{
    background:var(--paper); border-radius:16px; max-width:920px; width:100%; max-height:86vh; overflow:auto; padding:30px;
  }
  .modal-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:20px;}
  .modal-head button{background:none; border:none; font-size:1.3rem; color:var(--ink-muted);}
  .compare-table{width:100%; border-collapse:collapse; font-size:0.88rem;}
  .compare-table th, .compare-table td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top;}
  .compare-table th{font-family:'Fraunces'; color:var(--navy); font-weight:600; background:#FBFAF6;}
  .compare-table td.label{color:var(--ink-muted); font-size:0.76rem; text-transform:uppercase; letter-spacing:0.04em; white-space:nowrap;}

  footer{
    background:var(--navy); color:#b9c0da; padding:34px 28px; font-size:0.8rem; text-align:center;
  }
  footer b{color:#fff;}
  footer .sub{margin-top:6px; color:#8891b3; font-size:0.76rem;}

  @media (prefers-reduced-motion: reduce){
    *{transition:none !important; animation:none !important;}
  }

.datanote{
  margin:14px 0 18px; padding:12px 14px; border-radius:10px;
  background:#eef4fb; border:1px solid #bcd0e8; color:#2b3f56;
  font-size:.86rem; line-height:1.55;
}
.datanote strong{ color:#1c2c3e; }
.soon{
  font-size:.62rem; text-transform:uppercase; letter-spacing:.05em;
  background:#e4e8ee; color:#5d6b7c; padding:2px 5px; border-radius:4px;
  margin-left:5px; font-weight:700; vertical-align:middle;
}
.soon-box{
  padding:11px 13px; border-radius:9px; background:#f6f7f9;
  border:1px dashed #c8cfd8; color:#5d6b7c; font-size:.8rem; line-height:1.5;
}
.soon-inline{ color:#8a95a3; font-style:italic; }
select[disabled]{ background:#f3f4f6; color:#9aa4b1; cursor:not-allowed; }

  /* ===================== Responsive ===================== */
  html{ -webkit-text-size-adjust:100%; }
  img{ max-width:100%; height:auto; }
  .layout > *{ min-width:0; }              /* long names must not force overflow */
  .card .prog, .card .inst, .card .fac{ overflow-wrap:anywhere; }
  :focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
  #modalBody{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .filter-toggle{ display:none; }

  /* ---------- Tablet ---------- */
  @media (max-width:1024px){
    .header-inner{ padding:16px 20px; }
    .brand img{ height:52px; }
    .brand-text .name{ font-size:1.3rem; }
    .hero{ padding:48px 20px 34px; }
    .stats-row{ gap:24px; }
    .zone-strip{ grid-template-columns:repeat(3,1fr); }
    .zone-chip{ border-right:none;
      box-shadow:inset -1px 0 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(255,255,255,0.08); }
    .layout{ padding:26px 20px 110px; }
    .compare-table{ min-width:520px; }
  }

  /* ---------- Filters collapse once the rail cannot sit beside results ---------- */
  @media (max-width:900px){
    .layout{ padding:20px 18px 150px; gap:14px; }
    .filter-toggle{
      display:flex; align-items:center; justify-content:space-between; gap:10px;
      width:100%; min-height:50px; padding:13px 16px; cursor:pointer;
      background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
      font-family:inherit; font-size:0.92rem; font-weight:600; color:var(--navy);
    }
    .filter-toggle .ft-caret{ color:var(--blue); transition:transform .2s ease; }
    .filter-toggle[aria-expanded="true"] .ft-caret{ transform:rotate(180deg); }
    .panel{ display:none; }
    .panel.open{ display:block; }
    /* iOS silently zooms the page when a focused field is under 16px */
    .field select, .field input[type=text], .searchbar input{ font-size:16px; }
    /* thumb-sized targets */
    .toggle-group button{ min-height:46px; padding:13px 8px; font-size:0.82rem; }
    .checkbox-list label{ padding:5px 0; font-size:0.9rem; }
    .reset-btn{ min-height:46px; }
    .card-actions a, .card-actions button{
      min-height:44px; display:flex; align-items:center; justify-content:center; }
    nav.top button{ min-height:40px; }
  }

  /* ---------- Phone ---------- */
  @media (max-width:640px){
    .header-inner{ padding:11px 14px; gap:8px; flex-wrap:nowrap; }
    .brand{ gap:9px; min-width:0; }
    .brand img{ height:38px; }
    .brand-text{ min-width:0; }
    .brand-text .name{ font-size:1.05rem; }
    .brand-text .tag{ font-size:0.56rem; letter-spacing:0.05em; }
    /* three nav items will not fit beside the logo; scroll them instead */
    /* min-width:0 lets a flex item shrink past its content, which is what
       makes the horizontal scroll work instead of widening the page */
    nav.top{ gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch;
      flex:0 1 auto; min-width:0; scrollbar-width:none; }
    nav.top::-webkit-scrollbar{ display:none; }
    nav.top button{ white-space:nowrap; font-size:0.76rem; padding:7px 11px; }

    .hero{ padding:30px 14px 26px; }
    .hero h1{ font-size:1.72rem; max-width:none; }
    .hero p.sub{ font-size:0.92rem; margin-top:12px; }
    .eyebrow{ font-size:0.64rem; margin-bottom:11px; }
    .datanote{ font-size:0.79rem; padding:11px 12px; line-height:1.5; }

    .stats-row{ display:grid; grid-template-columns:1fr 1fr; gap:15px 10px; margin-top:22px; }
    .stat .num{ font-size:1.45rem; }
    .stat .label{ font-size:0.63rem; }

    .searchbar{ margin-top:22px; padding:6px; border-radius:13px; min-width:0; }
    /* a text input carries an intrinsic minimum width; without min-width:0 it
       refuses to shrink and widens the whole page on narrow phones */
    .searchbar input{ padding:12px 10px; min-width:0; }
    .searchbar button{ padding:13px 15px; font-size:0.85rem; flex:0 0 auto; min-height:44px; }

    .zone-strip{ margin-top:22px; grid-template-columns:1fr 1fr; }
    .zone-chip{ min-height:58px; padding:11px 12px; }
    .zone-chip .zc{ font-size:1rem; }

    .layout{ padding:16px 13px 165px; }
    .panel{ padding:16px; }
    .grid{ grid-template-columns:1fr; gap:12px; }
    .card{ padding:15px; }
    .card .prog{ font-size:1.02rem; }
    .results-header{ gap:9px; }
    .sort-select, .sort-select select{ width:100%; }
    /* selects under 16px also trigger the iOS focus zoom */
    .sort-select select{ min-height:44px; font-size:16px; }
    .load-more button{ width:100%; min-height:48px; }
    .empty{ padding:46px 16px; }
    .empty .display{ font-size:1.2rem; }

    /* compare tray stacks; chips scroll rather than shoving the button off-screen */
    .tray{ flex-direction:column; align-items:stretch; padding:11px 14px; gap:9px; }
    .tray-items{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
      padding-bottom:2px; }
    .tray-chip{ flex:0 0 auto; white-space:nowrap; }
    .tray button.compare-btn{ width:100%; min-height:46px; }
    .tray-hint{ display:none; }

    /* comparison opens as a sheet from the bottom */
    .modal-backdrop{ padding:0; align-items:flex-end; }
    .modal{ border-radius:15px 15px 0 0; max-height:92vh; padding:18px 15px 22px; }
    .modal-head h2{ font-size:1.08rem; }
    .compare-table{ min-width:540px; font-size:0.82rem; }
    .compare-table th, .compare-table td{ padding:9px 10px; }

    footer{ padding:26px 15px; }
  }

  @media (max-width:390px){
    .hero h1{ font-size:1.56rem; }
    .brand-text .tag{ display:none; }
    .stat .num{ font-size:1.32rem; }
  }