/* =====================================================================
   Lehman College SCPS - Find Your Program
   Stylesheet

   All colours live in the :root block below. Changing a value there
   updates it everywhere in the app, so start there before editing
   anything further down.
   ===================================================================== */
:root{
    --maroon:#7a1f2b;
    --maroon-dark:#5c1620;
    --ink:#1f2430;
    --paper:#faf7f3;
    --card:#ffffff;
    --line:#e7e0d8;
    --muted:#6b6459;
    --healthcare:#0061a0;
    --healthcare-related:#008481;
    --computer:#003c5b;
    --trades:#677077;
    --business:#a21c40;
    --smallbiz:#9f6a11;
    --music:#598000;
    --latino:#006649;
    --language:#367c9b;
    --adultlearning:#a4670f;
    --swim:#397bb2;
    --degrees:#4a5257;
    --focus:#e89f23;
    --focus-ink:#1f2430;   /* dark half of the focus ring  */
    --focus-halo:#ffd166;  /* light half of the focus ring */
    --radius:20px;
  }
  *{box-sizing:border-box;}
  html{background:var(--maroon-dark);overscroll-behavior:none;}  /* paints edge/overscroll areas so no white border shows */
  html,body{height:100%;margin:0;padding:0;border:0;}
  body{overscroll-behavior:none;}
  body{
    margin:0;
    font-family:'Segoe UI', system-ui, -apple-system, Helvetica, Arial, sans-serif;
    background:
      radial-gradient(1200px 800px at 15% -10%, #fdf1e4 0%, transparent 55%),
      radial-gradient(1000px 700px at 110% 10%, #f3e6e2 0%, transparent 55%),
      var(--paper);
    color:var(--ink);
    height:100vh;
    height:100dvh;
    overflow:hidden;
    display:flex;
    flex-direction:column;
  }
  /* Text is selectable/copyable everywhere; interactive controls stay select-free
     so tapping buttons never triggers accidental text selection. */
  button, .btn, .hdr-btn, .home-btn, .big-tile, .opt-card, .cat-tile, .chip,
  .jb-step, .foot-item, .close-pdf, .view-link, .schol-apply{
    user-select:none;
    -webkit-user-select:none;
  }
  /* ===== Header ===== */
  header{
    background:
      linear-gradient(120deg, rgba(0,0,0,.06), transparent 40%),
      linear-gradient(120deg, var(--maroon-dark), var(--maroon) 55%, #8f2836);
    color:#fff;
    padding:16px 32px;
    padding-top:calc(16px + env(safe-area-inset-top, 0px));
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex:0 0 auto;
    box-shadow:0 4px 18px rgba(0,0,0,.22);
    z-index:20;
    border-bottom:3px solid rgba(255,255,255,.14);
  }
  .brand{display:flex;align-items:center;gap:14px;}
  .brand .crest{
    width:48px;height:48px;border-radius:13px;
    object-fit:cover;display:block;flex:0 0 auto;
    box-shadow:0 3px 10px rgba(0,0,0,.25);
    border:2px solid rgba(255,255,255,.55);
  }
  .brand h1{font-size:21px;margin:0;line-height:1.15;font-weight:800;letter-spacing:-.2px;}
  .brand p{margin:3px 0 0;font-size:12.5px;opacity:.88;font-weight:400;}
  .header-actions{display:flex;align-items:center;gap:10px;}
  .hdr-btn{
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.4);
    color:#fff;
    border-radius:999px;
    padding:12px 20px;
    font-size:14.5px;
    font-weight:600;
    cursor:pointer;
    display:flex; align-items:center; gap:8px;
    transition:background .12s ease, transform .08s ease;
  }
  .hdr-btn:active{background:rgba(255,255,255,.3); transform:scale(.97);}
  .hdr-btn.pdf-toggle.is-open{background:rgba(255,255,255,.92);color:var(--maroon-dark);border-color:#fff;}
  .hdr-short{display:none;font-weight:800;}
  #navBackBtn{display:none;}
  #navBackBtn.show{display:flex;}
  .filter-bar{
    display:flex;gap:10px;flex-wrap:wrap;align-items:center;
    max-width:1180px;margin:0 auto 16px;
  }
  .filter-bar select{
    border:2px solid var(--line);border-radius:999px;padding:10px 14px;
    font-size:13.5px;font-weight:600;color:var(--ink);background:#fff;
    outline:none;font-family:inherit;cursor:pointer;
  }
  .filter-bar select:focus{border-color:var(--maroon);}
  .filter-bar .fb-clear{
    background:transparent;border:none;color:var(--maroon);font-weight:700;
    font-size:13px;cursor:pointer;padding:8px 10px;font-family:inherit;
  }
  .no-match{
    max-width:600px;margin:30px auto;text-align:center;color:var(--muted);
    font-size:15px;background:#fff;border:1px dashed var(--line);border-radius:16px;padding:28px;
  }
  .home-btn{
    background:rgba(255,255,255,.16);
    border:1px solid rgba(255,255,255,.5);
    color:#fff;
    border-radius:999px;
    padding:12px 22px;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
    display:flex; align-items:center; gap:8px;
    transition:background .12s ease, transform .08s ease;
  }
  .home-btn:active{background:rgba(255,255,255,.32); transform:scale(.97);}

  /* ===== Body row: stage + pdf side panel ===== */
  .body-row{
    flex:1 1 auto;
    display:flex;
    min-height:0;
    overflow:hidden;
  }
  /* ===== Main stage ===== */
  main{
    flex:1 1 auto;
    position:relative;
    overflow:hidden;
    min-width:0;
  }

  /* ===== PDF side panel ===== */
  aside#pdfPanel{
    flex:0 0 380px;
    width:380px;
    background:#3a3530;
    border-left:1px solid #22201d;
    display:flex;
    flex-direction:column;
    min-height:0;
    transition:flex-basis .22s ease, width .22s ease;
    overflow:hidden;
  }
  aside#pdfPanel.collapsed{flex:0 0 0px; width:0;}
  .pdf-panel-head{
    flex:0 0 auto;
    background:linear-gradient(120deg,#2a2622,#3a3530);
    color:#fff;
    padding:14px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid #22201d;
  }
  .pdf-panel-head .title{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;white-space:nowrap;}
  .pdf-panel-head .close-pdf{
    background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);color:#fff;
    border-radius:50%;width:32px;height:32px;font-size:14px;cursor:pointer;flex:0 0 auto;
  }
  .pdf-panel-head .close-pdf:active{background:rgba(255,255,255,.28);}
  .pdf-frame-wrap{flex:1 1 auto;min-height:0;background:#57514a;}
  .pdf-frame-wrap iframe{width:100%;height:100%;border:none;display:block;background:#57514a;}
  .pdf-panel-foot{
    flex:0 0 auto;padding:10px 16px;background:#2a2622;color:rgba(255,255,255,.65);
    font-size:11.5px;text-align:center;border-top:1px solid #22201d;
  }
  .screen{
    position:absolute;
    inset:0;
    padding:34px 48px 26px;
    overflow-y:auto;
    display:none;
    animation:fadein .28s ease;
  }
  /* Screens are focused programmatically so screen readers announce the
     new view; they are containers, not controls, so they take no ring. */
  .screen:focus, .screen:focus-visible{outline:none;}
  #journeyBar:focus-visible{
    outline:3px solid var(--focus-ink);
    outline-offset:-3px;
    box-shadow:inset 0 0 0 6px var(--focus-halo);
  }
  /* Every interactive element gets the same high-contrast focus ring.
     :focus-visible keeps it off mouse/touch taps but always on for
     keyboard and switch users. */
  .opt-card:focus-visible, .cat-tile:focus-visible, .prog-card:focus-visible,
  .schol-bar:focus-visible, .foot-item:focus-visible, .btn:focus-visible,
  .hdr-btn:focus-visible, .home-btn:focus-visible, .chip:focus-visible,
  .jb-step:focus-visible, .close-pdf:focus-visible, .modal-close:focus-visible,
  .schol-apply:focus-visible, .fb-clear:focus-visible, .big-tile:focus-visible,
  .filter-bar select:focus-visible{
    outline:3px solid var(--focus-ink);
    outline-offset:2px;
    box-shadow:0 0 0 6px var(--focus-halo);
  }
  /* ===== <div> -> <button> reset =====
     Several tiles and cards were <div onclick> and are now real buttons
     so they work with a keyboard. Visually nothing may change.
     :where() has ZERO specificity, so this only clears the browser's own
     button defaults; every .cat-tile / .opt-card / .prog-card /
     .schol-bar / .big-tile / .jb-step / .foot-item rule in this
     stylesheet still wins, exactly as it did when they were <div>s. */
  :where(button.opt-card, button.cat-tile, button.prog-card, button.schol-bar,
         button.big-tile, button.jb-step, button.foot-item, a.foot-item){
    font:inherit;
    color:inherit;
    text-align:inherit;
    background:none;
    border:none;
    padding:0;
    margin:0;
    cursor:pointer;
    text-decoration:none;
    appearance:none; -webkit-appearance:none;
  }
  /* These filled their grid or container as <div>s; <button> shrink-wraps. */
  button.opt-card, button.cat-tile, button.prog-card, button.schol-bar{width:100%;}
  /* .big-tile is the one promoted element laid out as display:block.
     A <button> vertically CENTRES its content where a <div> top-aligns
     it, which pushed the emoji and heading down inside the two shorter
     welcome tiles. An explicit column flow restores the original
     top-aligned layout exactly.
     Scoped to >820px because below that the tiles are already a two-column
     grid (emoji beside the text), which has no such centring problem. */
  @media (min-width:821px){
    button.big-tile{display:flex; flex-direction:column;
                    align-items:stretch; justify-content:flex-start;}
  }
  /* Footer items sit in a flex row and must keep their intrinsic width. */
  a.foot-item, button.foot-item{width:auto; flex:0 1 auto;}
  @media (forced-colors: active){
    .opt-card:focus-visible, .cat-tile:focus-visible, .prog-card:focus-visible,
    .schol-bar:focus-visible, .foot-item:focus-visible, .btn:focus-visible,
    .hdr-btn:focus-visible, .home-btn:focus-visible, .jb-step:focus-visible,
    .close-pdf:focus-visible, .modal-close:focus-visible, .big-tile:focus-visible{
      outline:3px solid Highlight;
      box-shadow:none;
    }
    .prog-card, .opt-card, .cat-tile, .big-tile{border:1px solid CanvasText;}
  }
  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
      animation-duration:.01ms !important;
      animation-iteration-count:1 !important;
      transition-duration:.01ms !important;
    }
  }
  .screen.active{display:block;}
  @keyframes fadein{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

  .center-col{
    max-width:1000px;
    margin:0 auto;
    text-align:center;
  }

  /* ===== Welcome ===== */
  .welcome-title{
    font-size:44px;
    font-weight:800;
    margin:16px 0 8px;
    letter-spacing:-.5px;
  }
  .welcome-sub{
    font-size:19px;
    color:var(--muted);
    max-width:640px;
    margin:0 auto 40px;
    line-height:1.5;
  }
  .welcome-actions{
    display:flex;
    flex-wrap:wrap;
    gap:22px;
    justify-content:center;
  }
  .big-tile{
    width:270px;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:24px;
    padding:32px 22px;
    cursor:pointer;
    box-shadow:0 14px 32px rgba(90,40,30,.10);
    transition:transform .12s ease, box-shadow .12s ease;
  }
  .big-tile:active{transform:scale(.97); box-shadow:0 6px 16px rgba(90,40,30,.12);}
  .big-tile .emoji{
    font-size:34px;display:flex;align-items:center;justify-content:center;
    width:66px;height:66px;border-radius:18px;margin:0 auto 16px;
    background:#fdf1ef;
  }
  .big-tile h3{margin:0 0 8px;font-size:20px;font-weight:800;}
  .big-tile p{margin:0;font-size:14px;color:var(--muted);line-height:1.4;}
  .big-tile.primary{background:linear-gradient(150deg,var(--maroon),#a4303f 65%,#b95a3f);color:#fff;box-shadow:0 16px 36px rgba(122,31,43,.28);}
  .big-tile.primary .emoji{background:rgba(255,255,255,.16);}
  .big-tile.primary p{color:rgba(255,255,255,.88);}

  .idle-strip{
    margin-top:52px;
    font-size:13.5px;
    color:var(--muted);
    display:inline-flex;align-items:center;gap:8px;
    background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 18px;
  }

  /* ===== Quiz ===== */
  .quiz-wrap{max-width:820px;margin:0 auto;}
  .progress-track{
    height:8px;background:var(--line);border-radius:99px;overflow:hidden;margin-bottom:26px;
  }
  .progress-fill{
    height:100%;background:linear-gradient(90deg,var(--maroon),#c85a4a);
    border-radius:99px; transition:width .3s ease;
  }
  .q-count{font-size:13px;color:var(--muted);font-weight:600;letter-spacing:.4px;text-transform:uppercase;margin-bottom:10px;}
  .q-title{font-size:28px;font-weight:800;margin:0 0 26px;line-height:1.3;}
  .options-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px;
  }
  .opt-card{
    background:var(--card);
    border:2px solid var(--line);
    border-radius:18px;
    padding:20px 18px;
    text-align:left;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:14px;
    font-size:16px;
    font-weight:600;
    box-shadow:0 3px 10px rgba(60,30,20,.04);
    transition:border-color .12s, transform .1s, box-shadow .12s;
  }
  .opt-card:active{transform:scale(.98);}
  .opt-card .ico{
    font-size:22px;flex:0 0 auto;width:44px;height:44px;border-radius:12px;
    background:#f2ede6;display:flex;align-items:center;justify-content:center;
  }
  .opt-card.selected{border-color:var(--maroon); background:#fdf1ef; box-shadow:0 6px 16px rgba(122,31,43,.14);}
  .opt-card.selected .ico{background:var(--maroon);}
  .quiz-nav{
    display:flex;justify-content:space-between;align-items:center;margin-top:30px;
  }
  .btn{
    border:none; border-radius:999px; padding:14px 26px; font-size:15px; font-weight:700;
    cursor:pointer;
  }
  .btn-ghost{background:transparent;color:var(--maroon);border:2px solid var(--line);}
  .btn-primary{background:var(--maroon);color:#fff;}
  .btn-primary:disabled{background:#d8cfc7;color:#524b43;cursor:not-allowed;}

  /* ===== Results ===== */
  .results-head{max-width:820px;margin:0 auto 26px;text-align:center;}
  .results-head h2{font-size:30px;margin:0 0 8px;}
  .results-head p{color:var(--muted);margin:0;font-size:15px;}
  .cards-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:18px;
    max-width:1180px;
    margin:0 auto;
  }
  .prog-card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:18px;
    padding:20px;
    text-align:left;
    cursor:pointer;
    box-shadow:0 8px 22px rgba(60,30,20,.07);
    display:flex;flex-direction:column;gap:10px;
    border-top:4px solid transparent;
    transition:transform .1s ease, box-shadow .12s ease;
  }
  .prog-card:active{transform:scale(.98); box-shadow:0 4px 12px rgba(60,30,20,.10);}
  .badge{
    display:inline-flex;
    align-items:center;
    gap:5px;
    font-size:11.5px;
    font-weight:700;
    letter-spacing:.3px;
    text-transform:uppercase;
    color:#fff;
    padding:6px 12px;
    border-radius:999px;
    align-self:flex-start;
    box-shadow:0 2px 6px rgba(0,0,0,.12);
  }
  .prog-card h4{margin:0;font-size:18.5px;line-height:1.3;font-weight:800;}
  .prog-card .blurb{font-size:13.5px;color:var(--muted);line-height:1.45;flex:1;}
  .facts{display:flex;flex-wrap:wrap;gap:8px;font-size:12.5px;color:var(--ink);}
  .fact-pill{background:#f2ede6;border-radius:999px;padding:5px 11px;font-weight:700;}
  .view-link{font-size:13.5px;font-weight:800;color:var(--maroon);margin-top:2px;display:flex;align-items:center;gap:4px;}
  .results-actions{display:flex;gap:14px;justify-content:center;margin-top:30px;flex-wrap:wrap;}

  /* ===== Browse ===== */
  .cat-grid{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:16px;max-width:1180px;margin:0 auto;
  }
  .cat-tile{
    background:var(--maroon);  /* fallback painted before the color-mix gradient */
    border-radius:18px;padding:24px 18px;color:#fff;cursor:pointer;
    display:flex;flex-direction:column;gap:8px;min-height:135px;justify-content:flex-end;
    box-shadow:0 10px 24px rgba(0,0,0,.14);
    position:relative;overflow:hidden;
    transition:transform .1s ease;
  }
  .cat-tile:active{transform:scale(.97);}
  .cat-tile::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(200deg, rgba(255,255,255,.16), transparent 55%);
    pointer-events:none;
  }
  .cat-tile .n{font-size:12.5px;opacity:.9;font-weight:700;letter-spacing:.2px;}
  .cat-tile h4{margin:0;font-size:19px;font-weight:800;}
  .back-row{max-width:1180px;margin:0 auto 18px;display:flex;align-items:center;gap:14px;}

  /* ===== Journey step bar ===== */
  #journeyBar{
    flex:0 0 auto;
    background:#fff;
    border-bottom:1px solid var(--line);
    padding:10px 32px 8px;
    display:flex;
    justify-content:center;
    z-index:15;
    /* Narrow screens scroll the four steps sideways instead of clipping
       "Register" off the right edge. */
    overflow-x:auto;
    scrollbar-width:none;
  }
  #journeyBar::-webkit-scrollbar{display:none;}
  #journeyBar .jb-step{flex:0 0 auto;}
  #journeyBar.hidden{display:none;}
  .jb-track{display:flex;align-items:center;gap:0;max-width:760px;width:100%;}
  .jb-step{
    display:flex;align-items:center;gap:8px;
    font-size:13px;font-weight:700;color:var(--muted);
    cursor:pointer;white-space:nowrap;padding:4px 2px;
  }
  .jb-step .dot{
    width:26px;height:26px;border-radius:50%;
    background:#f2ede6;border:2px solid var(--line);color:var(--muted);
    display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;
    transition:background .15s,border-color .15s,color .15s;
  }
  .jb-step.done .dot{background:var(--maroon);border-color:var(--maroon);color:#fff;}
  .jb-step.current{color:var(--maroon);}
  .jb-step.current .dot{background:#fff;border-color:var(--maroon);color:var(--maroon);box-shadow:0 0 0 4px rgba(122,31,43,.15);}
  .jb-step.done{color:var(--maroon-dark);}
  .jb-conn{flex:1;height:3px;background:var(--line);margin:0 10px;border-radius:99px;min-width:24px;}
  .jb-conn.done{background:var(--maroon);}

  .sem-timeline{max-width:900px;margin:40px auto 0;text-align:left;}
  .sem-timeline .tl-head{font-size:13px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);margin-bottom:14px;text-align:center;}
  .tl-track{display:flex;align-items:flex-start;position:relative;gap:18px;}
  /* line spans exactly from the first dot's center to the last dot's center */
  .tl-track::before{content:"";position:absolute;top:9px;left:calc(12.5% - 2px);right:calc(12.5% - 2px);height:4px;background:linear-gradient(90deg,var(--maroon),#c98a1f);border-radius:99px;}
  .tl-item{flex:1;position:relative;text-align:center;padding-top:32px;}
  .tl-item::before{content:"";position:absolute;top:2px;left:50%;transform:translateX(-50%);width:18px;height:18px;border-radius:50%;background:#fff;border:5px solid var(--maroon);box-shadow:0 2px 6px rgba(0,0,0,.15);}
  .tl-item b{display:block;font-size:14px;margin-bottom:6px;}
  .tl-item span{font-size:12px;color:var(--muted);line-height:1.5;display:block;padding:0 4px;max-width:220px;margin:0 auto;}

  /* ===== Program duration bar (modal) ===== */
  .dur-wrap{margin:4px 0 18px;}
  .dur-label{font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:700;margin-bottom:6px;display:flex;justify-content:space-between;}
  .dur-track{height:12px;background:#f2ede6;border-radius:99px;overflow:hidden;}
  .dur-fill{height:100%;background:linear-gradient(90deg,var(--maroon),#c98a1f);border-radius:99px;}
  .dur-scale{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted);margin-top:4px;}

  /* ===== Month timeline (modal) ===== */
  .mt-wrap{margin:4px 0 18px;}
  .mt-track{position:relative;height:10px;background:#e9e2d9;border-radius:99px;}
  .mt-fill{position:absolute;top:0;height:100%;background:linear-gradient(90deg,var(--maroon),#a4303f);border-radius:99px;}
  .mt-labels{display:flex;margin-top:5px;}
  .mt-labels span{flex:1;font-size:10.5px;color:var(--muted);font-weight:600;}
  .mt-cap{font-size:11.5px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.4px;margin-bottom:6px;display:flex;justify-content:space-between;}

  /* ===== Program course list (modal) ===== */
  .courses-box{background:#f7f5f1;border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:14px;}
  .courses-box b{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);margin-bottom:8px;}
  .courses-box ol{margin:0;padding-left:20px;font-size:13.5px;line-height:1.55;}
  .courses-box li{margin-bottom:3px;}

  /* ===== Scholarship note bar (modal) ===== */
  .schol-bar{
    background:#f7f0df;border:1px solid #e8d9b5;border-radius:12px;
    padding:11px 14px;font-size:13.5px;font-weight:600;color:#5a4a22;
    margin-bottom:14px;cursor:pointer;display:flex;align-items:center;gap:8px;
  }
  .schol-bar:active{background:#f0e6cd;}

  /* ===== Scholarships ===== */
  .schol-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px;max-width:1180px;margin:0 auto;}
  .schol-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px;text-align:left;border-top:5px solid var(--maroon);box-shadow:0 8px 22px rgba(60,30,20,.07);}
  .schol-card .pct{font-size:26px;font-weight:800;color:var(--maroon);}
  .schol-card h4{margin:4px 0 8px;font-size:18px;}
  .schol-card p{margin:0 0 10px;font-size:13.5px;color:#3a352e;line-height:1.5;}
  .schol-card .how{background:#fdf6e9;border-radius:10px;padding:10px 12px;font-size:12.5px;line-height:1.5;}
  .schol-apply{
    display:block;width:100%;margin-top:12px;
    background:var(--maroon);color:#fff;border:none;border-radius:12px;
    padding:12px 14px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;
  }
  .schol-apply:active{background:var(--maroon-dark);}
  .schol-apply.ghost{background:#fff;color:var(--maroon);border:2px solid var(--line);}
  .schol-note{max-width:1180px;margin:20px auto 0;font-size:12.5px;color:var(--muted);text-align:center;line-height:1.5;}

  /* ===== Modal ===== */
  .modal-overlay{
    position:fixed;inset:0;background:rgba(30,15,10,.5);
    display:none;align-items:center;justify-content:center;z-index:100;padding:20px;
  }
  .modal-overlay.active{display:flex;}
  .modal{
    background:#fff;border-radius:22px;max-width:640px;width:100%;max-height:86vh;overflow-y:auto;
    padding:30px 30px 26px;position:relative;
  }
  .modal-close{
    position:absolute;top:16px;right:16px;background:#f2ede6;border:none;border-radius:50%;
    width:38px;height:38px;font-size:18px;cursor:pointer;color:var(--ink);
  }
  #modalBody:focus, #modalBody:focus-visible{outline:none;}
  .modal h3{margin:6px 0 6px;font-size:24px;}
  .modal .m-badge{margin-bottom:12px;}
  .modal .m-desc{font-size:15px;line-height:1.6;color:#3a352e;margin-bottom:18px;}
  .modal .kv-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;margin-bottom:18px;
  }
  .kv-grid div{font-size:13.5px;}
  .kv-grid b{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);margin-bottom:3px;}
  .modal .contact-cta{
    background:#fdf1ef;border-radius:14px;padding:16px 18px;font-size:14px;line-height:1.5;
  }
  .modal .contact-cta b{color:var(--maroon);}

  /* ===== Footer (contact strip) ===== */
  footer{
    flex:0 0 auto;
    background:
      linear-gradient(60deg, rgba(0,0,0,.08), transparent 40%),
      linear-gradient(60deg, #8f2836, var(--maroon) 45%, var(--maroon-dark));
    color:#fff;
    padding:12px 18px;
    padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px));
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
    flex-wrap:nowrap;
    overflow:hidden;
    border-top:3px solid rgba(255,255,255,.14);
    box-shadow:0 -4px 18px rgba(0,0,0,.18);
    z-index:20;
  }
  .foot-item{display:flex;align-items:center;gap:9px;font-size:12.5px;min-width:0;flex-shrink:1;white-space:nowrap;}
  .foot-item .ico{
    width:28px;height:28px;border-radius:9px;background:rgba(255,255,255,.16);
    display:flex;align-items:center;justify-content:center;font-size:13px;flex:0 0 auto;
  }
  .foot-item b{display:block;font-size:13px;font-weight:700;}
  .foot-item span.sub{display:block;font-size:10.5px;opacity:.82;}
  .foot-sep{width:1px;height:28px;background:rgba(255,255,255,.22);flex:0 0 auto;}

  /* scrollbar */
  ::-webkit-scrollbar{width:10px;}
  ::-webkit-scrollbar-thumb{background:#d8cfc7;border-radius:10px;}

  /* ===== Responsive: tablets ===== */
  @media (max-width:1000px){
    footer{gap:14px;padding:10px 14px;}
    .foot-sep{display:none;}
    .screen{padding:26px 22px 22px;}
  }

  /* ===== Responsive: phones (natural app layout) ===== */
  @media (max-width:820px){
    /* pin the app to the exact screen box: nothing outside it can ever show */
    body{position:fixed;inset:0;width:100%;height:100%;}
    header{padding:10px 10px;padding-top:calc(10px + env(safe-area-inset-top, 0px));}
    .brand{gap:9px;}
    .brand .crest{display:none;}  /* save header space on phones */
    .brand h1{font-size:14px;white-space:nowrap;}
    .brand p{display:none;}  /* subtitle hides on phones */
    .header-actions{gap:6px;}
    .hdr-btn,.home-btn{padding:8px 9px;font-size:13px;}
    .hdr-label{display:none;}  /* icon-only buttons on phones */
    .hdr-short{display:inline;}  /* language shows short code (ES/EN) */

    .screen{padding:12px 16px 16px;}
    .welcome-title{font-size:24px;margin:6px 0 4px;}
    .welcome-sub{font-size:14px;margin-bottom:14px;line-height:1.4;}
    .welcome-actions{gap:10px;}
    .big-tile{width:100%;max-width:420px;padding:14px 16px;display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;column-gap:14px;row-gap:2px;align-items:center;text-align:left;}
    .big-tile .emoji{width:44px;height:44px;font-size:22px;margin:0;grid-row:1/3;}
    .big-tile h3{font-size:17px;margin:0 0 2px;}
    .big-tile p{font-size:12.5px;}
    .idle-strip{margin-top:16px;font-size:11.5px;padding:7px 14px;}

    /* semester timeline becomes a vertical list; line drawn per item so it
       ends exactly at the last dot */
    .sem-timeline{margin-top:28px;}
    .tl-track{flex-direction:column;gap:0;align-items:stretch;}
    .tl-track::before{display:none;}
    .tl-item{text-align:left;padding:0 0 22px 38px;position:relative;}
    .tl-item::before{left:2px;top:0;transform:none;}
    .tl-item::after{content:"";position:absolute;left:9px;top:20px;bottom:-2px;width:4px;background:linear-gradient(180deg,var(--maroon),#a8621f);border-radius:99px;}
    .tl-item:last-child{padding-bottom:0;}
    .tl-item:last-child::after{display:none;}
    .tl-item span{padding:0;max-width:none;margin:0;}

    /* journey bar: compact, scrollable if needed */
    #journeyBar{padding:7px 8px 5px;}
    .jb-track{max-width:100%;}
    .jb-step{font-size:10.5px;gap:4px;letter-spacing:-.2px;}
    .jb-step .dot{width:20px;height:20px;font-size:10px;border-width:2px;}
    .jb-conn{margin:0 3px;min-width:6px;}

    .options-grid{grid-template-columns:1fr;}
    .q-title{font-size:22px;}
    .quiz-nav{flex-wrap:wrap;gap:10px;}
    .btn{padding:12px 18px;font-size:14px;}

    .cards-grid{grid-template-columns:1fr;}
    .cat-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
    .cat-tile{min-height:110px;padding:16px 14px;}
    .cat-tile h4{font-size:16px;}
    .back-row{flex-wrap:wrap;gap:10px;}

    .schol-grid{grid-template-columns:1fr;}
    .modal{padding:22px 18px;border-radius:18px;max-height:92vh;}
    .modal .kv-grid{grid-template-columns:1fr;}

    /* PDF panel becomes a full-screen overlay instead of a side column */
    aside#pdfPanel{
      position:fixed;inset:0;width:100%;z-index:60;
      flex:none;border-left:none;
      visibility:visible;
      transition:transform .25s ease, visibility 0s linear 0s;
    }
    aside#pdfPanel.collapsed{
      width:100%;flex:none;transform:translateX(100%);
      visibility:hidden;
      transition:transform .25s ease, visibility 0s linear .25s;
    }

    footer{gap:8px;padding:8px 8px;padding-bottom:calc(8px + env(safe-area-inset-bottom, 0px));justify-content:space-around;}
    .foot-item.loc{display:none;}  /* addresses hide on phones; phone/contact/register stay */
    .foot-item{font-size:11px;gap:6px;}
    .foot-item b{font-size:11.5px;}
    .foot-item span.sub{display:none;}  /* subtitles hide on phones */
    .foot-item .ico{width:24px;height:24px;font-size:12px;border-radius:8px;}
  }

  @media (max-width:400px){
    .cat-grid{grid-template-columns:1fr;}
    .welcome-title{font-size:24px;}
    .brand h1{font-size:12px;}
    .hdr-btn,.home-btn{padding:7px 7px;font-size:12px;}
    /* At this width the sixth header button ("Start Over") was being cut
       off the right edge once "Back" appeared. Letting the row wrap and
       the brand yield space keeps every control reachable. */
    header{flex-wrap:wrap;row-gap:4px;}
    .header-actions{flex:1 1 auto;justify-content:flex-end;flex-wrap:wrap;min-width:0;}
    .brand{flex:0 1 auto;min-width:0;overflow:hidden;}
    .brand h1{overflow:hidden;text-overflow:ellipsis;}
    #journeyBar{justify-content:flex-start;}
    .header-actions{gap:3px;}
  }