/* ============================================================================
   California Safe Driver v2 "Court Docket" -- site-wide visual system.
   Tokens, typography, nav, hero, course docket, audiences, body copy,
   testimonials, footer, language picker, mobile breakpoints.
   ============================================================================ */

:root{
  --csd-navy:#38458E; --csd-dark:#2c3e50; --csd-gold:#c75300; --csd-green:#3a5a3a;
  --csd-cream:#f2eee8; --csd-page:#faf7f2; --csd-graybar:#e8e6e1; --csd-white:#ffffff;
  --csd-text:#1a2d52; --csd-text-light:#555555;
  /* Legacy token aliases so pre-v2 inline styles still render correctly. */
  --csd-orange:#c75300; --csd-primary:#38458E; --csd-bg:#faf7f2;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-padding-top:96px}
[id]{scroll-margin-top:96px}
body{font-family:'Inter',system-ui,sans-serif;color:var(--csd-text);background:var(--csd-page);line-height:1.55;font-size:16px}
h1,h2,h3,h4{font-family:'Playfair Display',Georgia,serif;font-style:normal;font-weight:700;margin:0 0 .6em;line-height:1.2;color:var(--csd-text)}
a{color:var(--csd-navy)}
em{font-style:italic}
img{max-width:100%;height:auto}

/* --- NAV ------------------------------------------------------------------ */
.site-nav{display:flex;align-items:center;justify-content:space-between;padding:.8rem 9rem;background:var(--csd-page);border-bottom:1px solid var(--csd-graybar);position:sticky;top:0;z-index:50}
.nav-brand{display:flex;align-items:center;gap:1.3rem;text-decoration:none;color:var(--csd-text);position:relative;z-index:2}
.nav-brand-logo{width:140px;height:140px;min-width:140px;flex:0 0 140px;border-radius:50%;background:var(--csd-page);border:0;box-shadow:none;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:-40px}
/* Belt-and-suspenders: use a high-specificity selector chain
   (.nav-brand + .nav-brand-logo + img = 0,0,3,1) to decisively beat the
   legacy main.css .nav-brand img rule (0,0,1,1). Plus an all-attrs reset
   with !important so no v1 width/height/margin/border leaks through. */
.nav-brand .nav-brand-logo img,
a.nav-brand .nav-brand-logo img{
  display:block;
  width:94% !important;
  height:94% !important;
  max-width:none !important;
  min-width:0 !important;
  border-radius:0 !important;
  margin:0 !important;
  padding:0 !important;
  object-fit:contain;
}
.nav-brand-text{font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:2.8rem;color:var(--csd-navy);line-height:1.05}
.nav-brand-tag{display:block;font-family:'Inter',system-ui,sans-serif;font-weight:600;font-size:.95rem;letter-spacing:.22em;text-transform:uppercase;color:var(--csd-text-light);margin-top:.35rem;padding-left:4px}
.nav-links{display:flex;align-items:center;gap:2.2rem}
.nav-links a{color:var(--csd-text);text-decoration:none;font-size:.92rem;font-weight:500}
.btn-enroll-nav{background:var(--csd-gold);color:#fff !important;padding:.5rem 1.1rem;border-radius:5px;font-weight:600 !important;white-space:nowrap}
.btn-login{border:1px solid var(--csd-navy);padding:.5rem 1.1rem;border-radius:5px;color:var(--csd-navy) !important;white-space:nowrap}
.btn-login:hover{background:var(--csd-navy);color:#fff !important;border-color:var(--csd-navy)}

/* Hamburger (mobile) */
.hamburger{display:none;background:transparent;border:0;cursor:pointer;padding:.5rem;width:44px;height:44px;flex-direction:column;justify-content:space-around;align-items:center;z-index:60}
.hamburger-line{display:block;width:24px;height:2px;background:var(--csd-navy);border-radius:1px;transition:transform .2s ease,opacity .2s ease}
.hamburger.is-active .hamburger-line:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.is-active .hamburger-line:nth-child(2){opacity:0}
.hamburger.is-active .hamburger-line:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* --- Language picker ------------------------------------------------------ */
.lang-selector{position:relative}
.btn-lang{display:inline-flex;align-items:center;gap:.35rem;background:transparent;border:1px solid var(--csd-graybar);color:var(--csd-text);padding:.5rem 1.1rem;border-radius:5px;font-size:.85rem;font-weight:500;cursor:pointer;font-family:inherit;white-space:nowrap}
.btn-lang:hover{border-color:var(--csd-navy)}
.btn-lang .lang-caret{transition:transform .15s}
.btn-lang-open .lang-caret{transform:rotate(180deg)}
.lang-dropdown{display:none;position:absolute;top:100%;right:0;margin-top:.3rem;background:#fff;border:1px solid var(--csd-graybar);border-radius:5px;box-shadow:0 4px 14px rgba(0,0,0,.08);list-style:none;padding:.3rem 0;min-width:160px;z-index:60}
.lang-dropdown-open{display:block}
.lang-dropdown li{margin:0}
.lang-option{display:flex;align-items:center;gap:.5rem;width:100%;text-align:left;padding:.5rem .85rem;border:0;background:transparent;color:var(--csd-text);font-size:.88rem;cursor:pointer;font-family:inherit}
.lang-option:hover{background:var(--csd-cream)}
.lang-option.lang-active{color:var(--csd-navy);font-weight:600}

/* --- HERO ----------------------------------------------------------------- */
.hero{background:var(--csd-navy);color:var(--csd-white);position:relative}
.hero-wrap{display:grid;grid-template-columns:1.05fr 1fr;max-width:1280px;margin:0 auto;align-items:stretch;min-height:440px}
.hero-copy{padding:3rem 2.5rem 2.5rem;display:flex;flex-direction:column;justify-content:center}
.hero-eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:#e8b58a;font-weight:600;margin-bottom:1rem}
.hero-eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--csd-gold);display:inline-block}
.hero-eyebrow .dot:nth-of-type(2){margin-left:1rem}
.hero h1{color:var(--csd-white);font-size:clamp(1.9rem,3.7vw,3rem);margin:0 0 1rem;max-width:560px;letter-spacing:-.01em}
.hero h1 .accent{display:block;color:#eb975b;font-size:.75em;font-weight:600;margin-top:.2em;letter-spacing:.01em;line-height:1.15}
.hero-copy p{color:#dde1ee;max-width:540px;font-size:1.02rem;margin:0 0 1.5rem}
.hero-ctas{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center;justify-content:space-between;max-width:540px}
.hero-ctas .btn-primary{margin-right:auto}
.hero-ctas .btn-ghost{margin-left:auto}
.btn-primary{background:var(--csd-gold);color:#fff;padding:.8rem 1.6rem;border-radius:6px;text-decoration:none;font-weight:700;display:inline-flex;align-items:center;gap:.4rem;box-shadow:0 4px 12px rgba(226,107,21,.25);transition:transform .18s cubic-bezier(.2,.7,.2,1.2),box-shadow .18s ease,background .18s ease;will-change:transform;border:0;cursor:pointer;font-family:inherit;font-size:.95rem}
.btn-primary:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 10px 24px rgba(226,107,21,.45);background:#f07a25}
.btn-primary:active{transform:translateY(-1px) scale(1.01);box-shadow:0 4px 10px rgba(226,107,21,.35);transition-duration:.08s}
.btn-primary span[aria-hidden]{transition:transform .2s ease}
.btn-primary:hover span[aria-hidden]{transform:translateX(4px)}
.btn-ghost{border:1.5px solid rgba(255,255,255,.45);color:#fff;padding:.8rem 1.4rem;border-radius:6px;text-decoration:none;font-weight:600;display:inline-flex;align-items:center;gap:.45rem;transition:border-color .18s ease,background .18s ease}
.btn-ghost:hover{border-color:rgba(255,255,255,.8);background:rgba(255,255,255,.08)}
.hero-img-wrap{position:relative;min-height:320px}
.hero-img-wrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:85% center}
.hero-img-wrap::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(56,69,142,.35) 0%,rgba(56,69,142,0) 30%)}
.hero-trust{display:flex;gap:1rem;flex-wrap:nowrap;margin-top:1.2rem;font-size:.78rem;color:#dde1ee;white-space:nowrap}
.hero-trust-item{display:inline-flex;align-items:center;gap:.35rem;font-weight:500;white-space:nowrap}
.hero-trust-item svg{flex-shrink:0;color:var(--csd-gold)}
.hero-shield{position:absolute;top:1.2rem;left:1.2rem;border-radius:4px;border:2px solid rgba(255,255,255,.2);z-index:2;overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.25);line-height:1.25}
.hero-shield .shield-accent{display:block;background:var(--csd-gold);color:#fff;padding:.22rem .85rem;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;text-align:center}
.hero-shield .shield-body{display:block;background:var(--csd-navy);color:#fff;padding:.42rem .85rem;font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;text-align:center}

/* --- CREDENTIAL BAR ------------------------------------------------------- */
.cred-bar{background:var(--csd-cream);border-top:3px solid var(--csd-gold)}
.cred-bar-inner{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);padding:1.2rem 2.5rem;gap:1.5rem}
.cred{display:flex;align-items:center;gap:.85rem;font-size:.85rem;color:var(--csd-text);border-right:1px solid rgba(44,62,80,.15);padding-right:1.2rem}
.cred:last-child{border-right:none}
.cred-icon{width:38px;height:38px;flex:0 0 38px;border-radius:50%;background:var(--csd-navy);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Playfair Display',serif;font-weight:700;font-size:1.05rem}
.cred-label{font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--csd-text-light);margin-bottom:2px;font-weight:600}
.cred-value{font-weight:600;color:var(--csd-text);font-size:.92rem;line-height:1.25}

/* --- PROGRAM DOCKET ------------------------------------------------------- */
.docket{max-width:1280px;margin:0 auto;padding:2rem 2.5rem 0}
.docket-head{display:flex;align-items:end;justify-content:space-between;flex-wrap:wrap;gap:1rem;border-bottom:2px solid var(--csd-text);padding-bottom:.9rem;margin-bottom:0}
.docket-head h2{font-size:1.9rem;color:var(--csd-text);margin:0}
.docket-head .sub{font-size:.82rem;color:var(--csd-text-light);font-weight:500;letter-spacing:.12em;text-transform:uppercase}
.docket-grid{display:grid;grid-template-columns:repeat(4,1fr)}
/* docket-cell: grid-item wrapper for a slot that has sibling anchors (A25 card + Spanish pill).
   position:relative is the anchor for the absolutely-placed pill. */
.docket-cell{position:relative;display:flex;flex-direction:column;border-right:1px solid var(--csd-graybar);min-width:0}
.docket-cell>.docket-col{flex:1;border-right:none}
.docket-col{padding:1.5rem 1.3rem 1.6rem;border-right:1px solid var(--csd-graybar);display:flex;flex-direction:column;text-decoration:none;color:var(--csd-text);transition:background .15s;min-width:0}
.docket-col:last-child{border-right:none}
.docket-col:hover{background:var(--csd-cream)}
/* Spanish pill: sits inside .docket-cell, absolutely positioned over the A25 card. */
:root{--a25-pill-bg:#E8820C}
.a25-spanish-pill{position:absolute;top:calc(1.5rem + 96px + .9rem + 2.85rem + .1rem);right:.9rem;z-index:2;display:inline-block;padding:.18rem .55rem;background:var(--a25-pill-bg);color:#fff;font-size:.72rem;font-weight:700;border:1px solid #000;border-radius:0;letter-spacing:.04em;text-decoration:none;line-height:1.3;white-space:nowrap}
.a25-spanish-pill:hover{opacity:.88}
/* Inline Español link: shown only on mobile (hidden desktop via display:none here, overridden in <=720px mq). */
.a25-es-inline{display:none;color:var(--csd-navy);text-decoration:none;cursor:pointer}
.a25-es-inline [lang]{text-decoration:underline}
.docket-badge{height:96px;display:flex;align-items:center;justify-content:center;margin-bottom:.9rem}
.docket-badge img{max-height:96px;width:auto;object-fit:contain}
.docket-col .title{font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:1.15rem;color:var(--csd-text);margin:0 0 .75rem;line-height:1.25;text-align:center;min-height:2.85rem}
.docket-col .meta{display:grid;grid-template-columns:auto 1fr;gap:.3rem .75rem;font-size:.82rem;color:var(--csd-text-light);margin-bottom:1rem}
.docket-col .meta dt{font-weight:600;color:var(--csd-dark)}
.docket-col .meta dd{margin:0;color:var(--csd-text-light)}
.docket-col .learn{margin-top:auto;font-weight:600;color:var(--csd-navy);font-size:.88rem;display:inline-flex;align-items:center;gap:.3rem}
.docket-col .learn::after{content:"→";transition:transform .2s}
.docket-col:hover .learn::after{transform:translateX(3px)}
.docket-footnote{font-size:.82rem;color:var(--csd-text-light);padding:1rem 0;font-style:italic;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.docket-footnote a{color:var(--csd-gold);font-weight:600;text-decoration:none}
/* Jump-to-next-available button on course detail session header */
.btn-jump-next{display:inline-block;background:var(--csd-orange);color:#fff;font-size:.82rem;font-weight:700;padding:.3rem .85rem;border-radius:4px;text-decoration:none;white-space:nowrap}
.btn-jump-next:hover{opacity:.88}

/* --- AUDIENCE ------------------------------------------------------------- */
.audiences{background:var(--csd-cream);padding:1.5rem 2.5rem}
.aud-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.aud-head{grid-column:1/-1;margin-bottom:.5rem}
.aud-head h2{font-size:1.6rem;margin:0 0 .3rem}
.aud-head p{margin:0;color:var(--csd-text-light);font-size:.95rem}
.aud-card{background:var(--csd-white);padding:1.3rem 1.2rem;border-top:3px solid var(--csd-navy);border-radius:2px}
.aud-card:nth-child(3){border-top-color:var(--csd-gold)}
.aud-card:nth-child(4){border-top-color:var(--csd-green)}
.aud-card:nth-child(5){border-top-color:var(--csd-dark)}
.aud-card h3{font-family:'Playfair Display',serif;font-size:1.05rem;margin:0 0 .4rem;color:var(--csd-text)}
.aud-card p{margin:0;font-size:.88rem;color:var(--csd-text-light);line-height:1.5}

/* --- BODY CONTENT --------------------------------------------------------- */
.body-wrap{max-width:920px;margin:0 auto;padding:3rem 2.5rem}
.body-wrap h2{font-size:1.7rem;color:var(--csd-text);margin-top:2.3rem}
.body-wrap h3{font-size:1.3rem;color:var(--csd-navy);margin-top:2rem;padding-bottom:.4rem;border-bottom:1px solid var(--csd-graybar)}
.body-wrap h4{font-size:1.05rem;margin-top:1.2rem}
.body-wrap p{font-size:1rem;line-height:1.7;margin:0 0 1rem}
.body-wrap ul{padding-left:1.2rem}
.body-wrap ul li{margin-bottom:.4rem}
.program-meta{font-size:.88rem;color:var(--csd-text-light);margin:-.4rem 0 1rem;letter-spacing:.03em}
.pullquote{border-left:3px solid var(--csd-gold);padding:.4rem 0 .4rem 1.2rem;font-family:'Playfair Display',serif;font-size:1.3rem;color:var(--csd-text);margin:1.5rem 0}
.disclaimer-text{font-size:.82rem;color:var(--csd-text-light);font-style:italic;padding-top:1.2rem;border-top:1px solid var(--csd-graybar);margin-top:1.5rem}

/* Generic content page (for extending v2 to non-home pages) */
.content-page{max-width:920px;margin:0 auto;padding:2.5rem 2.5rem 3rem}
.content-page h1{font-size:2.2rem;color:var(--csd-text);margin:0 0 1rem}
.content-page h2{font-size:1.5rem;color:var(--csd-text);margin-top:2rem}
.content-page h3{font-size:1.2rem;color:var(--csd-navy);margin-top:1.6rem}
.content-page p{font-size:1rem;line-height:1.7;margin:0 0 1rem}
.content-page ul,.content-page ol{padding-left:1.2rem;line-height:1.7}
.content-page ul li,.content-page ol li{margin-bottom:.4rem}
.content-page a{color:var(--csd-navy);text-decoration:underline}

/* Messages */
.csd-message{max-width:920px;margin:1rem auto;padding:.85rem 1.2rem;border-radius:4px;font-size:.95rem}
.csd-message-success{background:#e5f5e0;color:#1b5e20;border-left:3px solid #3a5a3a}
.csd-message-error,.csd-message-danger{background:#fcebea;color:#8b1a14;border-left:3px solid #c0392b}
.csd-message-warning{background:#fff6dc;color:#7a5400;border-left:3px solid #e6c97a}
.csd-message-info{background:#e4edf7;color:#1a2d52;border-left:3px solid var(--csd-navy)}

/* Forms (generic) */
form.v2-form{max-width:560px;margin:1.5rem 0}
form.v2-form label{display:block;font-weight:600;font-size:.9rem;margin:1rem 0 .35rem;color:var(--csd-text)}
form.v2-form input[type="text"],form.v2-form input[type="email"],form.v2-form input[type="password"],form.v2-form input[type="tel"],form.v2-form input[type="number"],form.v2-form input[type="date"],form.v2-form select,form.v2-form textarea{width:100%;padding:.6rem .8rem;border:1px solid var(--csd-graybar);border-radius:5px;font-size:1rem;font-family:inherit;background:#fff;color:var(--csd-text)}
form.v2-form input:focus,form.v2-form select:focus,form.v2-form textarea:focus{outline:none;border-color:var(--csd-navy);box-shadow:0 0 0 3px rgba(56,69,142,.12)}
form.v2-form .v2-submit{margin-top:1.2rem}
/* dash-form: the court-user-edit (and future dashboard) form. Reuse the same
   input styling as form.v2-form so fields are not browser-default tiny boxes. */
.dash-form .dash-form-grid{display:flex;flex-direction:column;gap:1rem;max-width:560px}
.dash-form .dash-form-field label{display:block;font-weight:600;font-size:.9rem;margin:0 0 .35rem;color:var(--csd-text)}
.dash-form .dash-form-field input[type="text"],.dash-form .dash-form-field input[type="email"],.dash-form .dash-form-field input[type="tel"],.dash-form .dash-form-field input[type="number"],.dash-form .dash-form-field select,.dash-form .dash-form-field textarea{width:100%;padding:.6rem .8rem;border:1px solid var(--csd-graybar);border-radius:5px;font-size:1rem;font-family:inherit;background:#fff;color:var(--csd-text)}
.dash-form .dash-form-field input:focus,.dash-form .dash-form-field select:focus,.dash-form .dash-form-field textarea:focus{outline:none;border-color:var(--csd-navy);box-shadow:0 0 0 3px rgba(56,69,142,.12)}
.dash-form .dash-form-field small{display:block;margin-top:.3rem;font-size:.82rem;color:var(--csd-text-light)}
.dash-form .dash-form-field .errorlist{list-style:none;margin:.3rem 0 0;padding:0;color:#991b1b;font-size:.82rem}

/* --- TESTIMONIAL STRIP ---------------------------------------------------- */
.testi-strip{background:var(--csd-dark);color:var(--csd-white);padding:3rem 2.5rem}
.testi-strip-inner{max-width:1200px;margin:0 auto}
.testi-strip h2{color:var(--csd-white);font-size:1.7rem;margin:0 0 .3rem}
.testi-strip .tag{color:#bcc4d5;font-style:italic;margin:0 0 1.8rem;font-size:1.1rem}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.testi-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);padding:1.1rem 1.2rem;border-radius:4px}
.testi-text{margin:0 0 .6rem;font-size:.93rem;line-height:1.55;color:#e5e9f2}
.testi-author{margin:0;font-size:.82rem;color:#9aa4bd}

/* --- FOOTER --------------------------------------------------------------- */
.site-footer{background:var(--csd-navy);color:#fff;text-align:center;padding:2rem 1.5rem;font-size:.88rem}
.site-footer p{margin:.35rem 0;color:#d8dce3}
.site-footer a{color:#f4d6bf;text-decoration:none;margin:0 .15rem}
.footer-logos{display:flex;justify-content:center;align-items:center;gap:2rem;margin-bottom:1rem;flex-wrap:wrap}
.footer-logos img{background:#fff;padding:8px;border-radius:6px}

/* --- DASHBOARD overrides -------------------------------------------------- */
/* Dashboards stay data-dense: v2 applies colors + typography here, NOT the
   hero-level whitespace. Tables keep their compact rhythm. */
body.v2-dashboard .site-nav{padding:.6rem 2rem} /* denser nav for authed views */
body.v2-dashboard .nav-brand-logo{width:72px;height:72px;margin-bottom:-14px}
body.v2-dashboard .nav-brand-text{font-size:1.4rem}
body.v2-dashboard .nav-brand-tag{font-size:.6rem;letter-spacing:.14em;margin-top:.2rem}
body.v2-dashboard .nav-links{gap:1.2rem}

/* Dashboard table styling: map v1 admin-table patterns to v2 tokens.
   Header is WHITE bg with navy text + 2px bottom border (was navy bg before
   but hover-state on sort links made text invisible against the dark bg). */
.v2-table,.dash-table{width:100%;border-collapse:collapse;font-size:.92rem;background:#fff;border:1px solid var(--csd-graybar);border-radius:4px;overflow:hidden}
.v2-table thead th,.dash-table thead th{background:#fff;color:var(--csd-text);text-align:left;padding:.65rem .85rem;font-size:.75rem;letter-spacing:.08em;font-weight:700;text-transform:uppercase;border-bottom:2px solid var(--csd-navy)}
.v2-table thead th a,.dash-table thead th a{color:var(--csd-text);text-decoration:none}
.v2-table thead th a:hover,.dash-table thead th a:hover{color:var(--csd-navy);text-decoration:underline}
.v2-table tbody td,.dash-table tbody td{padding:.55rem .85rem;border-top:1px solid var(--csd-graybar);vertical-align:top}
.v2-table tbody tr:hover,.dash-table tbody tr:hover{background:var(--csd-cream)}
.v2-table a,.dash-table a{color:var(--csd-navy);text-decoration:none;font-weight:500}
.v2-table a:hover,.dash-table a:hover{text-decoration:underline}
.dash-table th,.dash-table td{vertical-align:middle}
.dash-table-scroll{border:1px solid var(--csd-graybar);border-radius:4px;overflow:auto}
.dash-row-sent{background:#f3f4f6;color:#6b7280}
.dash-row-sent:hover{background:#eef0f3 !important}
.dash-sent-to-printer-pill{display:inline-block;margin-right:.35rem;padding:.15rem .55rem;border-radius:999px;background:#eef5ea;color:#1f5e2e;border:1px solid #c9e0bf;font-size:.72rem;font-weight:700;white-space:nowrap}
.dash-shipping-actions{display:flex;gap:.5rem;flex-wrap:wrap;align-items:flex-end}
.dash-cluster-compact{gap:8px}
.dash-cluster-compact .dash-action-btn{display:inline-flex;align-items:center;justify-content:center;padding:8px 16px;font-size:14px;line-height:1.15;min-height:0;box-sizing:border-box}
.dash-cluster-compact .dash-generate-selected-btn{min-width:240px}
.dash-cluster-compact .dash-filter-group{gap:.15rem}
.dash-cluster-compact .dash-filter-group select{padding:.3rem .55rem;font-size:.82rem}
.dash-cluster-modern{gap:6px}
.dash-cluster-modern .dash-action-btn{display:inline-flex;align-items:center;justify-content:center;padding:6px 12px;font-size:13px;font-weight:500;line-height:1.15;min-height:0;border:0;border-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,.05);box-sizing:border-box}
.dash-cluster-modern .dash-action-btn:not(.dash-action-primary){border:1px solid #d0cdc6}
.dash-cluster-modern .dash-filter-group select{padding:6px 12px;font-size:13px}
/* Per-row carrier service picker in the ready-to-ship queue. Matches the
   compact row action buttons (same border, radius, font) so it reads as part
   of the row cluster rather than a bolt-on control. */
.dash-row-service-select{padding:.2rem .4rem;font-size:.72rem;line-height:1.1;border:1px solid #d0cdc6;border-radius:4px;background:#fff;color:var(--csd-navy);max-width:7.5rem}
.dash-row-service-select:focus{outline:2px solid var(--csd-navy);outline-offset:1px}
.dash-disclosure-menu{position:relative;margin-left:auto}
.dash-disclosure-menu > summary{list-style:none;background:#fff;color:var(--csd-navy);border:1.5px solid #d0cdc6}
.dash-disclosure-menu > summary::-webkit-details-marker{display:none}
.dash-disclosure-menu[open] > summary{background:var(--csd-cream)}
.dash-cluster-compact .dash-more-actions-trigger{min-width:36px;width:36px;padding:8px 10px;background:transparent;color:var(--csd-navy);border-color:transparent;font-size:18px;font-weight:700;line-height:1}
.dash-cluster-compact .dash-more-actions-trigger:hover,.dash-cluster-compact .dash-more-actions-trigger:focus{background:var(--csd-cream);border-color:transparent;outline:2px solid transparent}
.dash-cluster-compact .dash-disclosure-menu[open] > .dash-more-actions-trigger{background:var(--csd-cream);border-color:transparent}
.dash-disclosure-menu__panel{position:absolute;right:0;top:calc(100% + .35rem);z-index:20;min-width:260px;background:#fff;border:1px solid var(--csd-graybar);border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,.12);padding:.5rem;display:flex;flex-direction:column;gap:.45rem}
.dash-disclosure-menu__panel .dash-action-btn{width:100%;justify-content:flex-start;background:#fff;color:var(--csd-navy);border:1px solid #d0cdc6}
/* Dashboard pill / status tags (commonly used in admin lists) */
.pill{display:inline-block;padding:.15rem .5rem;border-radius:10px;font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;background:var(--csd-graybar);color:var(--csd-text)}
.pill-navy{background:var(--csd-navy);color:#fff}
.pill-gold{background:var(--csd-gold);color:#fff}
.pill-green{background:var(--csd-green);color:#fff}
.pill-cream{background:var(--csd-cream);color:var(--csd-text)}

/* Dashboard action buttons */
.v2-btn{display:inline-flex;align-items:center;gap:.3rem;padding:.4rem .85rem;border-radius:4px;font-size:.85rem;font-weight:600;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:background .15s ease,border-color .15s ease;font-family:inherit}
.v2-btn-primary{background:var(--csd-gold);color:#fff}
.v2-btn-primary:hover{background:#f07a25;color:#fff}
.v2-btn-secondary{background:#fff;color:var(--csd-navy);border-color:var(--csd-navy)}
.v2-btn-secondary:hover{background:var(--csd-navy);color:#fff}
.v2-btn-danger{background:#fff;color:#8b1a14;border-color:#8b1a14}
.v2-btn-danger:hover{background:#8b1a14;color:#fff}

/* Dashboard card / panel */
.v2-card{background:#fff;border:1px solid var(--csd-graybar);border-radius:4px;padding:1rem 1.2rem;margin-bottom:1rem}
.v2-card h2,.v2-card h3{margin-top:0;font-size:1.15rem;color:var(--csd-text)}

/* --- MOBILE BREAKPOINTS --------------------------------------------------- */
@media (max-width:960px){
  .site-nav{padding:.8rem 2rem}
  .nav-brand-text{font-size:2rem}
  .nav-brand-tag{font-size:.8rem}
  .nav-brand-logo{width:110px;height:110px;min-width:110px;flex:0 0 110px;margin-bottom:-28px}
  .hero-wrap{grid-template-columns:1fr}
  .hero-img-wrap{min-height:260px;order:-1}
  .cred-bar-inner{grid-template-columns:repeat(2,1fr)}
  .cred{border-right:none}
  .docket-grid{grid-template-columns:repeat(2,1fr)}
  .docket-cell:nth-child(2),.docket-col:nth-child(2){border-right:none}
  .docket-cell,.docket-col{border-bottom:1px solid var(--csd-graybar)}
  .aud-inner{grid-template-columns:1fr}
  .testi-grid{grid-template-columns:1fr}
  .content-page{padding:2rem 1.5rem 2.5rem}
}
/* Drawer up to 768px, where main.css also collapses the nav. */
@media (max-width:768px){
  .hamburger{display:flex}
  .nav-links{position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;gap:0;padding:.5rem 0;box-shadow:0 6px 18px rgba(0,0,0,.08);display:none;border-top:1px solid var(--csd-graybar)}
  .nav-links.nav-open{display:flex}
  .nav-links > a,.nav-links > .lang-selector{padding:.8rem 1.2rem;border-bottom:1px solid var(--csd-graybar);text-align:left;font-size:1rem}
  /* width:auto undoes main.css width:100%, which pushed the inset buttons past the right edge. */
  .nav-links > a{width:auto}
  .nav-links > a.btn-logout{margin:0;border-width:0 0 1px;border-radius:0}
  .nav-links > a.btn-enroll-nav{background:var(--csd-gold);color:#fff !important;margin:.4rem 1rem;border-radius:5px;justify-content:center;border-bottom:0;padding:.6rem 1.2rem}
  .nav-links > a.btn-login{border:1px solid var(--csd-navy);color:var(--csd-navy) !important;margin:.4rem 1rem;border-radius:5px;text-align:center;border-bottom:0;padding:.55rem 1.2rem}
  .lang-dropdown{position:static;box-shadow:none;border:0;padding:0;margin-top:.5rem}
}
@media (max-width:720px){
  .site-nav{padding:.7rem 1rem}
  .nav-brand-text{display:none}
  .nav-brand-tag{display:none}
  .nav-brand-logo{width:72px;height:72px;min-width:72px;flex:0 0 72px;margin-bottom:-18px;border-width:3px}
  /* Hero adjustments */
  .hero-copy{padding:2rem 1.2rem}
  .hero h1{font-size:1.9rem;overflow-wrap:break-word}
  .hero-ctas{max-width:100%;flex-direction:column;align-items:stretch}
  .hero-ctas .btn-primary,.hero-ctas .btn-ghost{margin:0;justify-content:center;text-align:center}
  .hero-trust{flex-direction:column;gap:.5rem}
  .hero-shield{top:.6rem;left:.6rem;transform:scale(.85);transform-origin:top left}
  /* Docket */
  .docket{padding:1.5rem 1rem 0}
  .docket-head h2{font-size:1.4rem}
  .docket-grid{grid-template-columns:repeat(2,1fr)}
  .docket-cell,.docket-col{border-right:none}
  /* Mobile Spanish: hide the overlay pill; show the inline Español link instead. */
  .a25-spanish-pill{display:none}
  .a25-es-inline{display:inline !important}
  /* Audiences + body + testi */
  .audiences,.testi-strip{padding:1.5rem 1rem}
  .body-wrap{padding:2rem 1.1rem}
  .content-page{padding:1.5rem 1.1rem 2rem}
  .content-page h1{font-size:1.7rem}
  /* Dashboard mobile: denser nav, responsive tables */
  body.v2-dashboard .site-nav{padding:.5rem .8rem}
  .dash-shipping-actions{display:grid;grid-template-columns:1fr;align-items:stretch}
  .dash-shipping-actions .dash-filter-group,.dash-shipping-actions .dash-action-btn,.dash-disclosure-menu{width:100%;margin-left:0}
  .dash-cluster-compact .dash-action-btn{min-height:44px}
  .dash-cluster-modern .dash-action-btn{min-height:44px}
  .dash-cluster-compact .dash-generate-selected-btn{min-width:0}
  .dash-cluster-compact .dash-more-actions-trigger{width:100%}
  .dash-disclosure-menu__panel{position:static;margin-top:.4rem;box-shadow:none}
  .dash-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .dash-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;min-width:0;font-size:.85rem}
  .dash-table th,.dash-table td{padding:.45rem .55rem}
}
@media (max-width:440px){
  /* Extra-narrow phones: small comfort tweaks only. Empirical mobile
     screenshots at 375/390/430 show the default H1 + shield sizes
     render cleanly; no need to over-shrink. */
  .hero h1{font-size:1.65rem;line-height:1.2;overflow-wrap:break-word}
  .hero-copy{padding:1.5rem 1rem}
  .hero-copy p{font-size:.95rem;line-height:1.55}
  .hero-eyebrow{font-size:.7rem;letter-spacing:.14em}
  .hero-shield{top:.4rem;left:.4rem;transform:scale(.72);transform-origin:top left}
  .docket-head h2{font-size:1.2rem}
  .docket-col .title{font-size:1rem}
  .aud-head h2{font-size:1.3rem}
  .testi-strip h2{font-size:1.35rem}
  .body-wrap h2{font-size:1.35rem}
  .body-wrap h3{font-size:1.1rem}
  .cred-bar-inner{grid-template-columns:1fr}
  .cred{padding-right:0}
}

/* ============================================================
   Tooltip (used by both /dashboard/* and /portal/* pages).
   Was previously dashboard-only; moved here so portal renders
   the SVG icon at the correct 14x14 size instead of huge default.
   ============================================================ */
.dash-tooltip{position:relative;display:inline-flex;align-items:center;vertical-align:middle;cursor:help;color:var(--csd-navy,#1a2b4a);outline:none}
.dash-tooltip-icon{width:14px;height:14px;margin-left:.25rem;flex-shrink:0}
.dash-tooltip-underline{text-decoration:underline dotted;text-underline-offset:.2em}
/* 2026-04-28: position:fixed escapes ancestor overflow:hidden clipping (table cells,
   sticky headers, modals). JS in _dash_base.html sets top/left in viewport coords
   on hover. Default placement is above-center; JS flips to below or clamps left
   when needed. The tooltip becomes invisible when not hovered (opacity:0). */
.dash-tooltip-bubble{position:fixed;top:0;left:0;background:#1a2b4a;color:#fff;padding:.5rem .7rem;border-radius:6px;font-size:.8rem;line-height:1.4;font-weight:400;letter-spacing:.01em;text-transform:none;text-align:left;white-space:normal;width:max-content;max-width:260px;box-shadow:0 4px 12px rgba(0,0,0,.15);z-index:9999;opacity:0;pointer-events:none;transition:opacity .12s ease-out}
.dash-tooltip-bubble::after{content:"";position:absolute;left:50%;transform:translateX(-50%);border:5px solid transparent}
.dash-tooltip-bubble[data-placement="above"]::after{top:100%;border-top-color:#1a2b4a}
.dash-tooltip-bubble[data-placement="below"]::after{bottom:100%;border-bottom-color:#1a2b4a}
.dash-tooltip:hover .dash-tooltip-bubble,.dash-tooltip:focus .dash-tooltip-bubble,.dash-tooltip.dash-tooltip-open .dash-tooltip-bubble{opacity:1;pointer-events:auto}

/* 2026-05-01: Self-hosted Noto Sans Gurmukhi for Punjabi (pa) locale.
   Files in static/fonts/. Scoped to body/html with lang^="pa" so other
   locales are unaffected. font-display:swap so latin fallback shows
   while gurmukhi loads. */
@font-face {
    font-family: "Noto Sans Gurmukhi";
    src: url("/static/fonts/NotoSansGurmukhi-Regular.2d3c8bcfbe7d.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Noto Sans Gurmukhi";
    src: url("/static/fonts/NotoSansGurmukhi-Bold.34cda6b78687.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
body[lang^="pa"], html[lang^="pa"] {
    font-family: "Noto Sans Gurmukhi", "Inter", system-ui, -apple-system, sans-serif;
}

/* ADA dashboard: student-grouped accordion list.
   Each enrollment renders as one <tr> wrapping a single <td colspan=6> that
   contains a <details> element. The <summary> uses CSS grid so its columns
   visually line up with the surrounding .dash-table thead columns. */
.ada-student-cell { padding: 0 !important; }
.ada-student-card { background: #fff; }
.ada-student-card > summary {
    list-style: none;
    cursor: pointer;
    padding: .55rem .85rem;
    display: grid;
    grid-template-columns: 1.6fr 1.6fr 1.4fr 1.4fr 1fr 1fr;
    gap: .5rem;
    align-items: center;
}
.ada-student-card > summary::-webkit-details-marker { display: none; }
.ada-student-card > summary:hover { background: var(--csd-cream); }
.ada-summary-grid > span { font-size: .92rem; color: var(--csd-text); }
.ada-col-name a { color: var(--csd-navy); font-weight: 500; text-decoration: none; }
.ada-col-name a:hover { text-decoration: underline; }
.ada-col-count { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.ada-event-badge {
    display: inline-block;
    background: var(--csd-cream);
    border: 1px solid var(--csd-graybar);
    border-radius: 999px;
    padding: .1rem .55rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--csd-text);
    white-space: nowrap;
}
.ada-caret {
    width: 0; height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--csd-text-light);
    transition: transform .15s ease;
    flex: 0 0 auto;
}
.ada-student-card[open] > summary .ada-caret { transform: rotate(180deg); }
.ada-timeline {
    background: var(--csd-cream);
    border-top: 1px solid var(--csd-graybar);
    padding: .75rem 1rem .85rem 1.25rem;
}
.ada-timeline-list { list-style: none; margin: 0; padding: 0; }
.ada-timeline-item {
    padding: .5rem 0;
    border-bottom: 1px solid var(--csd-graybar);
    font-size: .85rem;
}
.ada-timeline-item:last-child { border-bottom: none; }
.ada-timeline-head {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    font-weight: 600;
    color: var(--csd-text);
}
.ada-timeline-meta { font-weight: 400; color: var(--csd-text-light); }
.ada-timeline-notes { margin-top: .2rem; color: var(--csd-text); white-space: pre-wrap; }
@media (max-width: 768px) {
    .ada-student-card > summary {
        grid-template-columns: 1fr 1fr;
        row-gap: .25rem;
    }
    .ada-col-count { justify-content: flex-start; }
}

.dash-table a.cancel-label-btn,
.dash-table .cancel-label-btn {
    background: #fff;
    border: 1px solid #b91c1c;
    color: #b91c1c;
}

.csd-book-pill {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    margin-left: 0.4rem;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 999px;
    line-height: 1.3;
    vertical-align: middle;
    cursor: help;
}
.csd-book-pill--shipped {
    background: #fff;
    color: var(--csd-primary);
    border: 1px solid var(--csd-primary);
}
.csd-book-pill--delivered {
    background: var(--csd-success, #155724);
    color: #fff;
    border: 1px solid var(--csd-success, #155724);
}
.csd-book-pill--rts {
    background: #dc3545;
    color: #fff;
    border: 1px solid #dc3545;
}
.csd-book-pill--skip {
    background: #f0eee8;
    color: #666;
    border: 1px solid #e0ddd5;
}

.payment-action-panel { padding: 1.5rem; }
.payment-action-panel .pay-cim-btn { width: 100%; margin-bottom: 0.5rem; }
.payment-action-panel .pay-new-card-btn { width: 100%; }
.payment-action-panel .use-different-card-link { display: inline-block; margin-top: 0.5rem; text-decoration: underline; cursor: pointer; }
.payment-action-panel .new-card-section { display: none; margin-top: 1rem; }
.payment-action-panel.show-new-card .new-card-section { display: block; }
.payment-status-box { display: none; padding: 1rem; margin-top: 1rem; border-radius: 4px; }
.payment-status-box.is-visible { display: block; }
.payment-status-box.is-working { background: var(--csd-pale-blue, #e3f2fd); border: 1px solid var(--csd-blue, #1565c0); }
.payment-status-box.is-held { background: var(--csd-pale-yellow, #fff8e1); border: 1px solid #ffa000; }
.payment-status-box.is-error { background: var(--csd-pale-red, #ffebee); border: 1px solid #d32f2f; }
.payment-status-box.is-processing { background: var(--csd-pale-blue, #e3f2fd); border: 1px solid var(--csd-blue, #1565c0); }
/* Unknown outcome, not a failure. Amber like is-held rather than red, because
   the card may already be charged and this must not read as "try again". */
.payment-status-box.is-unresolved { background: var(--csd-pale-yellow, #fff8e1); border: 1px solid #ffa000; }
.seat-hold-countdown { color: var(--csd-text-light, #666); font-size: 0.9rem; margin-top: 0.5rem; }

.enrollment-search-wrap { position: relative; }
.dropdown-results {
    position: absolute;
    background: white;
    border: 1px solid #ddd;
    max-height: 300px;
    overflow-y: auto;
    z-index: 100;
    width: min(420px, 100%);
}
.dropdown-result-item {
    display: block;
    width: 100%;
    padding: 8px;
    cursor: pointer;
    border: 0;
    border-bottom: 1px solid #eee;
    background: white;
    color: inherit;
    text-align: left;
}
.dropdown-result-item:hover { background: #f5f5f5; }
.enrollment-preview {
    background: #f9f9f9;
    padding: 12px;
    border-left: 3px solid #1a2d52;
    margin-top: 8px;
    font-size: 0.9em;
}

/* Replacement request v2 wizard */
.replacement-wizard {
    max-width: 780px;
}
.replacement-wizard__panel {
    background: #fff;
    border: 1px solid var(--csd-graybar, #e1ddd3);
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 10px 24px rgba(26, 43, 74, 0.08);
}
.replacement-wizard__panel h1 {
    color: var(--csd-navy, #1a2b4a);
    font-family: "Playfair Display", Georgia, serif;
    font-size: 2rem;
    line-height: 1.15;
    margin: 0 0 .65rem;
}
.replacement-wizard__eyebrow {
    color: var(--csd-primary, #8b1e2d);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    margin: 0 0 .4rem;
    text-transform: uppercase;
}
.replacement-wizard__lead {
    color: var(--csd-text, #333);
    line-height: 1.55;
    margin: 0 0 1.2rem;
}
.replacement-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .45rem;
    margin-bottom: 1.25rem;
}
.replacement-steps__item {
    border: 1px solid var(--csd-graybar, #e1ddd3);
    border-radius: 999px;
    color: var(--csd-text-light, #666);
    font-size: .82rem;
    font-weight: 700;
    padding: .4rem .65rem;
    text-align: center;
}
.replacement-steps__item.is-active {
    background: var(--csd-navy, #1a2b4a);
    border-color: var(--csd-navy, #1a2b4a);
    color: #fff;
}
.replacement-steps__item.is-complete {
    background: #eef7f1;
    border-color: #b9dec4;
    color: #1f6b3a;
}
.replacement-field-label {
    color: var(--csd-navy, #1a2b4a);
    display: block;
    font-weight: 700;
    margin: .8rem 0 .35rem;
}
.replacement-select,
.replacement-file {
    border: 1px solid #cfc9bd;
    border-radius: 6px;
    font-size: 1rem;
    min-height: 44px;
    padding: .6rem .7rem;
    width: 100%;
}
.replacement-reason-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 1rem;
}
.replacement-reason-card {
    background: #fbfaf7;
    border: 1px solid var(--csd-graybar, #e1ddd3);
    border-radius: 8px;
    padding: .9rem;
}
.replacement-reason-card--muted {
    background: #f4f6f8;
}
.replacement-reason-card p {
    color: var(--csd-primary, #8b1e2d);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .06em;
    margin: 0 0 .35rem;
    text-transform: uppercase;
}
.replacement-reason-card h2,
.replacement-summary h2 {
    color: var(--csd-navy, #1a2b4a);
    font-size: 1rem;
    line-height: 1.25;
    margin: 0 0 .35rem;
}
.replacement-reason-card span,
.replacement-summary p {
    color: var(--csd-text, #333);
    font-size: .95rem;
    line-height: 1.5;
}
.replacement-summary {
    border-top: 1px solid var(--csd-graybar, #e1ddd3);
    margin-top: 1rem;
    padding-top: 1rem;
}
.replacement-charge-note {
    background: #eef6fb;
    border: 1px solid #b8d7e8;
    border-radius: 8px;
    color: #17364a;
    line-height: 1.5;
    margin: 1rem 0;
    padding: .85rem 1rem;
}
.replacement-note {
    color: var(--csd-text-light, #666);
    font-size: .9rem;
    line-height: 1.45;
}
.replacement-alert {
    border-radius: 6px;
    margin-bottom: 1rem;
    padding: .75rem 1rem;
}
.replacement-alert--error {
    background: #fde8e8;
    border-left: 4px solid #c0392b;
    color: #6b1c1c;
}
.replacement-actions {
    align-items: center;
    display: flex;
    gap: .75rem;
    justify-content: flex-end;
    margin-top: 1.25rem;
}
.replacement-primary {
    font-weight: 700;
    min-height: 44px;
    padding: .75rem 1.35rem;
}
.replacement-link {
    color: var(--csd-navy, #1a2b4a);
    font-weight: 700;
}
@media (max-width: 640px) {
    .replacement-wizard__panel {
        padding: 1rem;
    }
    .replacement-wizard__panel h1 {
        font-size: 1.55rem;
    }
    .replacement-steps {
        gap: .3rem;
    }
    .replacement-steps__item {
        font-size: .75rem;
        padding: .35rem .3rem;
    }
    .replacement-reason-grid {
        grid-template-columns: 1fr;
    }
    .replacement-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }
    .replacement-actions .btn-primary,
    .replacement-actions .replacement-link {
        text-align: center;
        width: 100%;
    }
}

/* --- HOME COURSE DOCKET, C22 (2026-10-01) ---------------------------------
   Five across at 1200px and wider; below that, "Live Zoom classes" and
   "Self-paced online" rows, compact rows on phones. --four: no E-Bike
   Dynamics card yet. The E-Bike card is in the markup twice (last in the
   row at 1200px+, in the Live Zoom group below) so Tab order follows the
   visible order; the copy not shown is display:none. */
.docket-new{display:block;font-family:'Inter',system-ui,sans-serif;font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--csd-gold);margin-top:.35rem}
.docket-col .meta .nowrap{white-space:nowrap}
@media (min-width:1200px){
  .docket-grouped{display:grid;grid-template-columns:repeat(5,1fr)}
  .docket-grouped--four{grid-template-columns:repeat(4,1fr)}
  .docket-grouped .docket-group-head{display:none}
  .docket-grouped .docket-grid{display:contents}
  .docket-grid>.docket-col--new{display:none}
  .docket-grouped .docket-grid>:last-child{border-right:1px solid var(--csd-graybar)}
  .docket-grouped--four .docket-grid:last-child>:last-child{border-right:none}
  /* five across leaves no room beside "4.5 hours": lift the Spanish tag into the empty second title line */
  .a25-spanish-pill{top:calc(1.5rem + 96px + .9rem + 1.55rem)}
}
@media (max-width:1199.98px){
  .docket-grouped>.docket-col.docket-col--new{display:none}
  .docket-group-head{padding-top:1.6rem}
  .docket-group-head h2{font-size:1.3rem}
  .docket-grouped .docket-col .title{text-wrap:balance}
  .docket-grouped .docket-grid{grid-template-columns:repeat(3,1fr)}
  .docket-grouped .docket-grid--pair{grid-template-columns:repeat(2,1fr);width:66.667%;margin:0 auto}
}
@media (max-width:960px){
  .docket-grouped .docket-cell,.docket-grouped .docket-col{border-bottom:0}
  .docket-grouped .docket-grid>:not(:last-child){border-right:1px solid var(--csd-graybar)}
  .docket-grouped .a25-spanish-pill{top:calc(1.5rem + 96px + .9rem + 1.55rem)}
}
/* Phone: compact rows, badge on the left, details on the right. */
@media (max-width:720px){
  .docket-group-head h2{font-size:1.15rem}
  .docket-grouped .docket-grid,.docket-grouped .docket-grid--pair{grid-template-columns:1fr;width:auto}
  .docket-grouped .docket-grid>:not(:last-child){border-right:0;border-bottom:1px solid var(--csd-graybar)}
  .docket-grouped .docket-col{display:grid;grid-template-columns:72px 1fr;column-gap:1rem;align-items:start;padding:1.1rem .25rem}
  .docket-grouped .docket-col>*{grid-column:2}
  .docket-grouped .docket-badge{grid-column:1;grid-row:1 / span 3;height:72px;margin:0}
  .docket-grouped .docket-badge img{max-height:72px}
  .docket-grouped .docket-col .title{text-align:left;min-height:0;margin-bottom:.5rem}
  .docket-grouped .docket-col .meta{margin-bottom:.6rem}
  .docket-grouped .docket-col .learn{margin-top:0}
}

/* t283: the nav row overflowed between the phone drawer (768px) and wide
   screens. The side padding lines up with the class cards, the brand name
   scales with the window, below 960px the bar shows the round logo alone,
   and links that do not fit (Spanish, logged in) wrap to a second row. */
@media (min-width:769px){
  .nav-links a{white-space:nowrap}
  .site-nav{gap:1.5rem;padding-left:max(1.5rem,calc((100vw - 1280px)/2 + 2.5rem));padding-right:max(1.5rem,calc((100vw - 1280px)/2 + 2.5rem))}
  .nav-links{gap:1rem;flex-wrap:wrap;justify-content:flex-end}
  .nav-brand{flex:none}
}
@media (min-width:769px) and (max-width:1399.98px){
  .nav-brand{gap:.8rem}
  .nav-brand-logo{width:96px;height:96px;min-width:96px;flex:0 0 96px;margin-bottom:-24px}
  .nav-brand-text{font-size:clamp(1.5rem,calc(9.9vw - 82px),2.3rem)}
  .nav-brand-tag{font-size:clamp(.55rem,calc(3.9vw - 33px),.9rem);letter-spacing:.16em}
}
@media (min-width:769px) and (max-width:1099.98px){
  .nav-links{gap:.7rem}
  .nav-links a{font-size:.85rem}
  .btn-enroll-nav,.btn-login,.btn-lang{padding:.45rem .75rem}
}
@media (min-width:769px) and (max-width:959.98px){
  .nav-brand-text,.nav-brand-tag{display:none}
}
@media (min-width:1400px){
  .nav-brand-text{font-size:2.3rem}
  .nav-brand-tag{font-size:.9rem;letter-spacing:.18em}
  .nav-links{gap:1.2rem}
}