/* ================================
   Time To Dismiss — Styles (clean)
   ================================ */

/* ---------- Theme (Light) ---------- */
:root{
  --bg:#ffffff;
  --text:#0b132b;
  --muted:#475569;          /* slate-600 */
  --accent:#2563eb;         /* brand blue */
  --ring:rgba(37,99,235,.25);

  /* Surfaces */
  --card:#ffffff;
  --elev:#ffffff;

  /* App status colors */
  --called:#28a745;
  --calledText:#081f0f;
  --picked:#6c757d;
  --waiting:#f8fafc;        /* subtle off-white for waiting rows */
}

/* ---------- Base ---------- */
*{ box-sizing:border-box }
html,body{ height:100% }
html, body { margin:0; padding:0; overflow-x:hidden; }
body.sd-body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}
a{ color:inherit; text-decoration:none }

/* Layout container */
.container{ width:min(1100px, 92%); margin-inline:auto; padding:1rem; }
.master-main{ padding:14px 0 28px; }

/* Master Caller: sticky controls + scrollable list for easier mobile use */
.master-main{ display:flex; flex-direction:column; min-height:100vh; }
#masterList{ flex:1 1 auto; overflow:auto; overscroll-behavior:contain; touch-action:manipulation pan-y; }
.controls.controls-top{ position:sticky; top:0; z-index:10; background:#fff; }

/* When ticker is visible, give the list breathing room so it doesn't get obscured */
body.has-ticker #masterList{ padding-bottom:84px; }
@supports(padding: max(0px)){
  body.has-ticker #masterList{ padding-bottom:max(84px, env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Header (Universal) ---------- */
.site-header {
  position: sticky; top:0; z-index:50;
  background:#ffffff;
  border-bottom:1px solid #e5e7eb;
  /* keep it simple: no blur/color-mix */
}
.site-header .hdr-mobile{ display:none; }
.header-inner { display:flex; align-items:center; justify-content:space-between; padding:14px 0; }
.brand { display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px; color:var(--text); }
.brand-logo { height:38px; width:auto; display:block; }
.brand-name { font-size:1.15rem; font-weight:700; }

/* Header truncation and layout safety */
.site-header .header-inner{ gap:.75rem; }
.site-header .auth-inline{ display:flex; gap:.5rem; align-items:center; min-width:0; }
.site-header .user-chip{ display:flex; gap:.5rem; align-items:center; min-width:0; }
#userEmail{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:52vw; font-weight:600; }
@media (min-width: 900px){ #userEmail{ max-width:340px; } }

.main-nav { display:flex; align-items:center; gap:18px; }
.nav-link { color:#334155; font-weight:600; }
.nav-link:hover { color:#0b132b; }
.nav-link.login { padding:.55rem .9rem; border:1px solid #e5e7eb; border-radius:12px; }
.nav-toggle { display:none; background:none; border:0; padding:8px; margin-left:6px; }
.nav-toggle span { display:block; width:22px; height:2px; background:var(--text); margin:4px 0; border-radius:2px; }

/* Mobile Menu */
.mobile-menu { display:none; }
.mobile-menu[hidden] { display:none !important; }
@media (max-width: 820px){
  .main-nav .nav-link { display:none; }
  .main-nav .nav-link.login { display:none; }
  .nav-toggle { display:block; }
  .mobile-menu {
    display:grid; gap:10px; padding:14px 4%;
    background:#ffffff; border-bottom:1px solid #e5e7eb;
  }
  .mobile-menu a {
    color:#0b132b; padding:10px 12px; border:1px solid #e5e7eb; border-radius:12px;
  }
  .mobile-menu a.login{ border-color:#2563eb; }
}

/* Current-page highlight */
.main-nav .nav-link.active,
.main-nav .nav-link[aria-current="page"] {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---------- Buttons ---------- */
.btn {
  display:inline-block; font-weight:700; border-radius:14px;
  padding:.85rem 1.1rem; border:1px solid #e5e7eb;
  background:#ffffff; color:var(--text);
  transition: transform .06s ease, box-shadow .2s ease, border-color .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:focus { outline: 3px solid var(--ring); outline-offset:2px; }

.btn-primary{
  background: var(--accent);
  color:#ffffff;
  border-color:transparent;
  box-shadow: 0 10px 30px -12px rgba(37,99,235,.35);
}
.btn-secondary{
  background:#eef2ff; color:#1e293b; border-color:#e2e8f0;
}
.btn-outline{ background:#ffffff; color:#0b132b; }
.btn-ghost{ background:#ffffff; color:#475569; }

/* ---------- Owner Console (Create Org) ---------- */
.owner-section{ margin:10px 0 18px; }
.owner-create-form{ padding:12px; display:grid; gap:10px; align-items:end; grid-template-columns: 1.2fr 1fr 1.2fr auto; }
@media (max-width: 820px){ .owner-create-form{ grid-template-columns: 1fr; } }
.field{ display:flex; flex-direction:column; gap:6px; }
.label-strong{ font-weight:700; }
.btn--ghost{ background:#ffffff; color:#475569; }
.btn-sm{ padding:.5rem .7rem; border-radius:10px; font-weight:700; }
.btn-xs{ padding:.25rem .45rem; border-radius:8px; font-size:.8rem; font-weight:700; }

/* ---------- Homepage (Hero / Features / How / Footer) ---------- */
.hero{
  padding: 90px 0 56px;
  background:#ffffff;
  border-bottom:1px solid #f1f5f9;
}
.hero-inner { text-align:center; }
.hero h1{
  font-size: clamp(2rem, 3.8vw, 3.2rem);
  line-height:1.08; margin:0 0 14px; font-weight:800;
}
.hero p{ color:var(--muted); margin:0 auto 22px; font-size: clamp(1rem, 1.2vw, 1.15rem); max-width:60ch; }
.hero-cta { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:12px; }

.hero-highlights{
  display:flex; gap:18px; justify-content:center; margin:22px 0 0; padding:0; list-style:none; color:var(--muted);
  flex-wrap:wrap;
}
.hero-highlights li{ border:1px solid #e5e7eb; border-radius:999px; padding:.45rem .8rem; }

/* Scope the 12-col feature grid so it doesn't affect app pages */
.features{ padding:54px 0; }
.features .grid{
  display:grid; gap:16px;
  grid-template-columns: repeat(12, 1fr);
}
.features .card{
  grid-column: span 6;
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:20px; padding:20px;
  box-shadow: 0 6px 24px -12px rgba(15,23,42,.15);
}
.features .card h3 { margin:.2rem 0 .35rem; font-size:1.1rem; }
.features .card p { color:var(--muted); margin:0; }
@media (max-width: 900px){ .features .card { grid-column: span 12; } }

.how{ padding:42px 0 66px; border-top:1px solid #f1f5f9; }
.how h2{ text-align:center; margin:0 0 18px; font-size:clamp(1.4rem, 2.4vw, 2rem); }
.steps{ max-width:780px; margin:0 auto; color:var(--muted); }
.steps li{ margin:10px 0; }
.how-cta{ display:flex; gap:12px; justify-content:center; margin-top:16px; flex-wrap:wrap; }

.site-footer{
  background:#ffffff; border-top:1px solid #e5e7eb;
}
.footer-inner{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:22px 0; color:#475569; flex-wrap:wrap;
}
.footer-nav{ display:flex; gap:14px; flex-wrap:wrap; }
.footer-nav a{ color:#475569; }
.footer-nav a:hover{ color:#0b132b; }

/* A11y helpers */

/* ---- Scanner overlay ---- */
.qr-sheet{ position:fixed; inset:0; background:rgba(2,6,23,.85); z-index:9999; display:flex; align-items:center; justify-content:center; padding:16px; }
.qr-frame{ width:min(680px,96vw); max-width:680px; background:#0b132b; border-radius:16px; padding:12px; border:1px solid #1f2937; box-shadow:0 10px 30px rgba(0,0,0,.3); }
.qr-head{ display:flex; align-items:center; justify-content:space-between; color:#fff; margin:4px 4px 8px 4px; }
.qr-title{ font-weight:800; }
.qr-video-wrap{ position:relative; border-radius:12px; overflow:hidden; background:#000; }
#qrVideo{ width:100%; height:auto; display:block; background:#000; }
#qrStatus{ position:absolute; left:8px; bottom:8px; background:rgba(2,6,23,.7); color:#fff; padding:.35rem .6rem; border-radius:8px; font-weight:700; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
.qr-actions{ display:flex; gap:8px; justify-content:flex-end; margin-top:10px; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }
.qr-sheet[hidden] { display: none !important; } /* Ensure hidden attribute hides the scanner overlay regardless of base display */

/* ---------- App: Lists / Rows ---------- */
.student-list{
  list-style:none; padding:0; margin:0;
  display:grid; gap:.6rem;
  grid-template-columns:1fr; /* default single column */
}
/* Ensure vertical panning always works inside interactive rows */
#masterList .student, #masterList .actions{ touch-action: pan-y; }
/* Ensure buttons themselves don't block vertical scrolling on touch */
#masterList .actions button,
#masterList .actions .btn,
#masterList .actions [role="button"]{ touch-action: pan-y; }
/* Avoid text selection/callouts in action clusters so drags become scrolls */
#masterList .actions,
#masterList .actions .btn,
#masterList .actions button,
#masterList .actions [role="button"],
#masterList .car-tag,
#masterList .meta{
  -webkit-user-select: none; -ms-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
/* Encourage browsers to treat taps as clicks without delay */
.btn, button{ touch-action: manipulation; }

/* Class page controls */
.class-controls{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:8px 0 12px; }
.buzz-switch{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; }
.buzz-switch.in-sheet{ margin-left:0; }
.chip-sheet .sheet-subhead{ font-weight:700; margin:8px 0 6px; font-size:.95rem; }

/* Global aggregate "Now Calling" section (multi-class) */
#globalCalledSection { margin: 12px 0 18px; }
#globalCalledSection .called-shelf { margin-bottom: 8px; }
/* called tiles already styled via .student.called */

/* Student row layout */
.student{
  position:relative;
  background:#ffffff; color:var(--text);
  border:1px solid #e5e7eb;
  padding:1rem; border-radius:12px;
  display:grid; grid-template-columns:1fr auto auto; column-gap:12px; align-items:center;
  transition:background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.student .name{
  font-size:1.25rem; font-weight:700;
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.student .status{ font-size:.9rem; color:#64748b; margin-left:.75rem; justify-self:end; }
.student .elapsed{ margin-left:.5rem; font-size:.85rem; color:var(--muted); font-variant-numeric: tabular-nums; }
.car-tag{
  justify-self:center;
  display:inline-flex; align-items:center; justify-content:center;
  background:#e2e8f0; color:#0b132b;
  padding:.25rem .55rem; border-radius:8px; min-width:3.1rem; font-weight:700;
}
.actions{ display:flex; gap:.5rem }
.master .meta{ color:var(--muted); margin-left:.5rem; font-size:.9rem }

/* States */
.student.waiting{ background:var(--waiting); }
.student.picked{
  background:linear-gradient(0deg, rgba(108,117,125,.08), rgba(108,117,125,.08)), #ffffff;
  opacity:.92; filter:saturate(.95);
}
.student.picked_up{
  background:#dcfce7; /* emerald-100 */
  border-color:#bbf7d0; /* emerald-200 */
}
.student.picked_up .status{ color:#166534; font-weight:800 }
.student.called{
  background:var(--called); color:var(--calledText);
  border-color:transparent;
  box-shadow:0 0 0 3px rgba(40,167,69,.35), 0 8px 20px rgba(40,167,69,.2);
  transform:translateZ(0) scale(1.01);
}
.student.called .status{ color:rgba(0,0,0,.65); font-weight:700 }
.student.called .car-tag{ background:rgba(0,0,0,.12); color:var(--calledText); font-weight:900 }
.student.en_route{ background:#ffedd5; /* orange-100 */ }
.student.en_route .status{ color:#ea580c; font-weight:700 }
/* Absent: muted violet tone, always rendered at the bottom of lists */
.student.absent{ background:#f3e8ff; /* violet-100 */ color:#3b0764; }
.student.absent .status{ color:#6b21a8; font-weight:700 }
.student.called.aging1 { animation: ttdPulse 1.2s ease-in-out infinite; }
.student.called.aging2 { animation: ttdShake 0.6s linear infinite; }
@keyframes ttdPulse {
  0% { box-shadow: 0 0 0 0 rgba(14,165,233,0.20); }
  70%{ box-shadow: 0 0 0 8px rgba(14,165,233,0); }
  100%{ box-shadow: 0 0 0 0 rgba(14,165,233,0); }
}
@keyframes ttdShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  50% { transform: translateX(2px); }
  75% { transform: translateX(-1px); }
}
@media (prefers-reduced-motion: reduce) {
  .student.called.aging1,
  .student.called.aging2 { animation: none !important; }
}
.student.called .inline-actions{ margin-left:auto; display:inline-flex; gap:6px; align-items:center }
.student.called .enroute-bar{ position:relative; margin-top:6px; background:#f1f5f9; border:1px solid #e5e7eb; height:10px; border-radius:8px; overflow:hidden }
.student.called .enroute-bar .fill{ position:absolute; left:0; top:0; bottom:0; width:100%; background:#fdba74; /* orange-300 */ animation: enroute-countdown linear forwards }
.student.called .enroute-bar .enroute-label{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:.78rem; color:#9a3412; font-weight:800 }
@keyframes enroute-countdown { from{ width:100% } to{ width:0% } }

/* Flash sweep on change (toggle .flash in JS) */
.student.flash::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:12px;
  background:linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 12%, rgba(255,255,255,0) 25%) no-repeat;
  background-size:200% 200%;
  animation:row-sweep 900ms ease;
}
.student.flash{ animation:row-pulse 900ms ease }
@keyframes row-sweep{0%{background-position:-180% 50%}45%{background-position:20% 50%}100%{background-position:180% 50%}}
@keyframes row-pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,0)}30%{box-shadow:0 0 0 8px rgba(37,99,235,.25)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}

/* Bigger spacing on big screens */
@media (min-width:1100px){
  .student{ padding:1.1rem 1.25rem }
  .student .name{ font-size:1.35rem }
}

/* car-card styles removed (legacy cars UI retired) */

/* ---------- Master: bottom pop-up ticker ---------- */
.caller-ticker{ position:fixed; left:50%; bottom:calc(12px + env(safe-area-inset-bottom, 0px)); transform:translateX(-50%); z-index:900; width:min(1100px, 92%); }
.caller-ticker[hidden]{ display:none !important; }
.caller-ticker .ticker-scrim{ display:none; position:fixed; inset:0; background:rgba(2,6,23,0.35); z-index:0; }
.caller-ticker .ticker-inner{ position:relative; z-index:1; border:1px solid #e5e7eb; background:#ffffff; border-radius:14px; padding:8px 10px; overflow:hidden; box-shadow:0 10px 30px rgba(2,6,23,0.18); display:flex; align-items:center; gap:8px }
.caller-ticker .ticker-scrim{ pointer-events: none; }
.caller-ticker.expanded .ticker-scrim{ display:block; pointer-events: auto; }
.caller-ticker.expanded .ticker-inner{ flex-direction: column; align-items: stretch; }
.caller-ticker .expand-btn{ flex:0 0 auto; margin-left:auto }
.caller-ticker .ticker-track{ display:flex; gap:6px; overflow-x:auto; padding:2px; touch-action: pan-x; }
.caller-ticker .ticker-track .tick{ display:inline-flex; align-items:center; gap:8px; background:#f8fafc; border:1px solid #e5e7eb; padding:4px 8px; border-radius:10px; white-space:nowrap }
.caller-ticker .ticker-panel{ display:none; border-top:1px solid #e5e7eb; margin-top:8px; padding-top:8px; overscroll-behavior: contain; flex:1 1 auto; width:100%; min-width:0; }
.caller-ticker.expanded .ticker-panel{ display:block }
.caller-ticker.expanded .ticker-track{ display:none }
.caller-ticker.expanded .expand-btn{ display:none }
.caller-ticker .ticker-panel .panel-head{ position:sticky; top:0; background:#fff; display:flex; align-items:center; justify-content:space-between; gap:8px; border-bottom:1px solid #e5e7eb; padding:10px; margin:0 0 8px 0; }
.caller-ticker .ticker-panel .panel-title{ font-weight:800; color:#0b132b }
.caller-ticker .panel-list .tick{ display:flex; align-items:center; justify-content:space-between; gap:8px; border:1px solid #e5e7eb; border-radius:10px; padding:10px 12px; margin:8px 0; background:#fff }
.caller-ticker .panel-list .tick .inline-actions{ display:inline-flex; gap:6px }
.caller-ticker .panel-list .tick .who{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.caller-ticker .ticker-track{ display:flex; gap:12px; align-items:center; white-space:nowrap; animation:none }
.caller-ticker .tick{ display:inline-flex; align-items:center; gap:10px; padding:4px 10px; border-radius:999px; background:#f8fafc; border:1px solid #e5e7eb }
.caller-ticker .who{ font-weight:800; color:#0b132b }
/* removed marquee animation for better mobile UX */

@media (max-width: 560px){
  .caller-ticker{ left:0; right:0; transform:none; width:auto; margin:0 10px; }
  .caller-ticker .tick{ gap:6px; padding:2px 6px }
}

/* Expandable ticker panel */
.caller-ticker .expand-btn{ position:absolute; right:8px; top:8px; z-index:2; }
.caller-ticker .ticker-panel{ display:none; padding:0 10px 10px; border-top:1px solid #e5e7eb; max-height:55vh; overflow:auto; background:#fff; }
.caller-ticker.expanded .ticker-panel{ display:block; }
.caller-ticker.expanded .ticker-track{ animation-play-state: paused; opacity:.85 }
.caller-ticker.expanded .ticker-inner{ padding-bottom:6px; }
.caller-ticker .panel-list{ display:grid; gap:8px; grid-template-columns:1fr; }
.caller-ticker .panel-list .tick{ display:flex; justify-content:space-between; }

/* On phones, make the expanded panel behave like a bottom sheet */
@media (max-width: 780px){
  .caller-ticker{ left:0; right:0; transform:none; width:auto; bottom:calc(10px + env(safe-area-inset-bottom, 0px)); }
  .caller-ticker .ticker-inner{ border-radius:16px; }
  .caller-ticker.expanded .ticker-inner{ padding:0; }
  .caller-ticker.expanded .ticker-panel{ max-height:62vh; border-top-left-radius:16px; border-top-right-radius:16px; padding-bottom:env(safe-area-inset-bottom, 0px); }
  .caller-ticker.expanded .ticker-track{ display:none; }
  .caller-ticker .panel-list{ padding:0 10px 10px; }
  .caller-ticker .expand-btn{ top:10px; right:10px; }
}


/* ---------- Toasts ---------- */
.call-toasts{
  position:fixed; top:.75rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; gap:.5rem; align-items:center;
  width:min(100%, 1200px); z-index:1000; pointer-events:none; padding:0 .5rem;
}
.call-toast{
  background:var(--called); color:var(--calledText);
  font-weight:900;
  font-size:clamp(1.25rem, 4.8vw, 2.75rem);
  line-height:1.2;
  padding:.6rem 1rem; border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.18), 0 0 0 3px rgba(40,167,69,.25);
  max-width:100%; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  animation:toast-in 180ms ease-out, toast-life 3000ms ease-in-out forwards;
}
.call-toast.out{ animation:toast-out 240ms ease forwards }
@keyframes toast-in{from{transform:translateY(-16px) scale(.98); opacity:0} to{transform:translateY(0) scale(1); opacity:1}}
@keyframes toast-out{to{transform:translateY(-12px) scale(.98); opacity:0}}
@keyframes toast-life{0%{opacity:0} 8%{opacity:1} 85%{opacity:1} 100%{opacity:0}}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .student{ transition:none }
  .student.flash,.student.flash::after{ animation:none }
  .call-toast{ animation:none }
}

/* ---------- Master / Controls / Auth ---------- */
.page-intro{ border-bottom:1px solid #e5e7eb; background:#ffffff; }
.page-intro .container{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; }
.page-title{ margin:0; font-size:1.2rem; font-weight:800; }
.page-title.page-title-tight{ margin:0 0 .5rem 0; font-size:1.25rem; font-weight:800; }
.controls.controls-top{ margin:.5rem 0 1rem; }

.auth-inline{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.auth-inline input{
  background:#ffffff; border:1px solid #d1d5db; color:#0b132b;
  border-radius:12px; padding:.55rem .7rem; min-width:180px;
}
.auth-inline input::placeholder{ color:#64748b; }

.controls{
  background:#ffffff; border:1px solid #e5e7eb; border-radius:14px; padding:10px;
  display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1rem;
}
.controls input,
.controls select{
  background:#ffffff; border:1px solid #d1d5db; color:#0b132b;
  border-radius:12px; padding:.55rem .7rem; font-size:16px; /* avoid iOS zoom on focus */
}
.controls input::placeholder{ color:#64748b; }

/* ---------- Utilities ---------- */
body{ padding-top:0; }               /* ensure content doesn't crash into header */
a.btn[href*="callerproject.html"],
a.btn[href*="classes.html"]:where(:first-child),
.topbar, .back-bar, .header-back, .legacy-header { display:none !important; } /* retire old bars */

/* --- App cards & grids (used by classes.html and cars.html) --- */
.grid{
  display:grid;
  gap:16px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.card{
  display:block;
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:14px 16px;
  box-shadow: 0 6px 24px -12px rgba(15,23,42,.12);
  transition: transform .06s ease, box-shadow .2s ease;
}
.card:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 32px -12px rgba(15,23,42,.16);
}
.card-title{ font-size:1.05rem; font-weight:700; color:var(--text); }

/* car-card small helper removed */

/* Consistent app header look across all pages */
header.site-header .brand {
  font-size: 1.05rem;
  letter-spacing: 0.2px;
}
header.site-header .nav-link {
  padding: .35rem .6rem;
  border-radius: .5rem;
  text-decoration: none;
  opacity: .9;
}
header.site-header .nav-link:hover {
  background: #f3f4f6;
  opacity: 1;
}
header.site-header .user-chip .role-badge {
  text-transform: uppercase;
  letter-spacing:  .04em;
}

/* Admin page tools grid */
.admin-tools{ margin:16px 0; }
.admin-tools > h2{ font-size:1.1rem; margin:0 0 8px 0; }
.admin-tools .grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; }
.admin-tools .card h3{ margin:.2rem 0 .35rem; font-size:1.05rem; }
.admin-tools .card .small{ color:var(--muted); margin:0 0 10px; }

/* --- Class board shelves (auto-grow + bubble to top) --- */
.class-board{ display:grid; gap:.8rem; margin-top:.5rem; }
.class-board .called-shelf{ display:grid; gap:.8rem; grid-template-columns:1fr !important; }
.class-board .waiting-list{ display:grid; gap:.5rem; grid-template-columns:1fr; }

/* Larger, more legible called tiles */
.called-shelf .student{ padding:1.25rem 1.5rem; border-radius:16px; will-change:auto; }
.called-shelf .student.called{ box-shadow:0 10px 24px rgba(0,0,0,.12); }
.called-shelf .student .name{ font-size:clamp(1.4rem, 3vw, 2rem); line-height:1.15; }
.called-shelf .student .car-tag{ font-size:clamp(.95rem, 1.8vw, 1.15rem); padding:.28rem .65rem; border-radius:999px; }
.called-shelf .student .status{ font-weight:800; }

/* Gentle slide-in when a student becomes called (no scale to avoid overlap) */
.student.called.enter{ animation:shelf-in 220ms ease-out; }
@keyframes shelf-in{ from{ opacity:0; transform:translateY(-6px) } to{ opacity:1; transform:translateY(0) } }

/* removed duplicate 'bubble-in' animation to avoid conflicting overrides */

/* Compact waiting tiles */
.waiting-list .student{ padding:.75rem .85rem; transform-origin:center; transform: scale(0.94); will-change: transform; }
/* Wide screens: allow 2 columns for dense classes */
@media (min-width: 980px){
  /* Only the waiting list becomes two columns on wide screens */
  .class-board .waiting-list{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* On wide screens, show Called (green) tiles in two columns and slightly reduce size */
@media (min-width: 980px){
  .class-board .called-shelf,
  #globalCalledSection .called-shelf{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .called-shelf .student{ padding:1rem 1.2rem; }
  .called-shelf .student .name{ font-size: clamp(1.2rem, 2.2vw, 1.6rem); }
  .called-shelf .student .car-tag{ font-size: clamp(.9rem, 1.4vw, 1.05rem); }
}

/* ===== Mobile polish ===== */
@media (max-width: 780px){
  /* Header: wrap neatly + prevent overflow */
  header.site-header .header-inner{
    display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding:10px 0;
  }
  header.site-header .brand{ flex:1 1 auto; }
  header.site-header .auth-inline{
    order:2; flex:1 1 100%; display:flex; align-items:center; gap:10px;
    min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  header.site-header #userEmail{
    min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; opacity:.9; font-size:.95rem;
  }
  header.site-header .role-badge{ font-size:.85rem; padding:.35rem .6rem; }

  /* Nav becomes horizontal pills with safe overflow */
  header.site-header nav{
    order:3; flex:1 1 100%; display:flex; gap:8px; overflow-x:auto; padding-bottom:6px;
    
  }
  header.site-header nav::-webkit-scrollbar{ display:none; }
  header.site-header .nav-link{
    padding:.4rem .6rem; border:1px solid #e5e7eb; border-radius:999px; background:#fff; flex:0 0 auto;
  }

  /* Page intro title scale */
  h1.page-title, .page-intro h1{
    font-size:clamp(1.25rem,4.6vw,1.9rem); line-height:1.2; margin-bottom:.35rem;
  }

  /* Controls: stack full width */
  .controls{ flex-direction:column; align-items:stretch; gap:8px; }
  .controls > *{ width:100%; min-height:44px; }
  .controls input, .controls select{ width:100%; }

  /* Student row: single column + comfy actions */
  .student{
    grid-template-columns:1fr; row-gap:.5rem;
  }
  /* Compact sizing specifically for Master Caller list */
  .student-list.master .student{ padding:.7rem .8rem; }
  .student-list.master .student .name{ font-size:1.05rem; }
  .student-list.master .actions .btn{ padding:.7rem .8rem; }
  .student .status{ justify-self:start; margin-left:0; }
  .car-tag{ justify-self:start; }
  .student .actions{
    display:grid; grid-template-columns:1fr 1fr; gap:.5rem; width:100%;
  }
  .student .actions .btn{ width:100%; padding:.85rem .9rem; }

  /* Very small: stack action buttons one per row */
  @media (max-width: 420px){
    .student .actions{ grid-template-columns:1fr; }
  }

  /* Lists and container breathing space */
  .student-list{ gap:.75rem; }
  .container{ padding-left:14px; padding-right:14px; }
}

/* ===== Mobile — professional layout ===== */
@media (max-width: 780px){
  /* Kill horizontal scroll everywhere */
  html, body { max-width: 100vw; overflow-x: hidden; }
  .container, .site-header, .header-inner, .call-toasts { max-width: 100vw; }

  /* Header: 2-row grid
     Row 1: brand | user chip
     Row 2: horizontal scrolling nav pills */
  header.site-header .header-inner{
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand user"
      "nav   nav";
    align-items: center;
    gap: 8px;
    padding: 10px 0;
  }
  header.site-header .brand{ grid-area: brand; min-width:0; }
  header.site-header .auth-inline{
    grid-area: user; justify-self: end;
    display:flex; align-items:center; gap:8px;
    min-width:0; max-width: 62vw; overflow:hidden; text-overflow:ellipsis;
  }
  header.site-header #userEmail{
    max-width: 48vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    opacity:.9; font-size:.95rem;
  }
  header.site-header .role-badge{ font-size:.85rem; padding:.35rem .6rem; }

  header.site-header nav{
    grid-area: nav;
    display:flex; gap:8px; overflow-x:auto; padding: 4px 0 8px;
    
  }
  header.site-header nav::-webkit-scrollbar{ display:none; }
  header.site-header .nav-link{
    flex: 0 0 auto;
    padding:.42rem .7rem; border:1px solid #e5e7eb; border-radius:999px;
    background:#fff; opacity:.95;
  }
  header.site-header .nav-link:hover{ background:#f3f4f6; opacity:1; }

  /* Page titles */
  h1.page-title, .page-intro h1{
    font-size:clamp(1.2rem, 4.8vw, 1.9rem);
    line-height:1.2; margin-bottom:.35rem;
  }

  /* Controls: stack full width */
  .controls{
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .controls > *{ width:100%; min-height:44px; }

  /* Student rows: single column info + grid actions that fit */
  .student{
    grid-template-columns: 1fr;
    row-gap: .55rem;
  }
  .student .status{ justify-self:start; margin-left:0; }
  .car-tag{ justify-self:start; }

  /* Actions auto-fit: 3 across if room, else 2, else 1 */
  .student .actions{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: .5rem;
    width: 100%;
  }
  .student .actions .btn{ width:100%; padding:.85rem .9rem; }

  /* Lists + padding */
  .student-list{ gap:.8rem; }
  .container{ padding-left:14px; padding-right:14px; }
}

/* ===== Mobile — clean, professional override ===== */
@media (max-width: 820px){
  /* Never allow horizontal scroll */
  html, body { max-width: 100vw; overflow-x: hidden; }

  /* Container should not exceed viewport */
  .container { width: 100%; max-width: 100%; padding-left: 14px; padding-right: 14px; }

  /* Header: 2-row grid (brand | user) on first row; pill nav on second row */
  header.site-header .header-inner{
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand user"
      "nav   nav";
    align-items: center;
    gap: 8px;
    padding: 10px 0;
  }
  header.site-header .brand{ grid-area: brand; min-width: 0; }
  header.site-header .auth-inline{
    grid-area: user; justify-self: end;
    display: flex; align-items: center; gap: 8px;
    min-width: 0; max-width: 62vw; overflow: hidden; text-overflow: ellipsis;
  }
  header.site-header #userEmail{
    max-width: 48vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    opacity: .9; font-size: .95rem;
  }
  header.site-header .role-badge{ font-size: .85rem; padding: .35rem .6rem; }

  header.site-header nav{
    grid-area: nav;
    display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 8px;
    
  }
  header.site-header nav::-webkit-scrollbar{ display: none; }
  header.site-header .nav-link{
    flex: 0 0 auto;
    padding: .42rem .7rem;
    border: 1px solid #e5e7eb; border-radius: 999px; background: #fff; opacity: .95;
  }
  header.site-header .nav-link:hover{ background: #f3f4f6; opacity: 1; }

  /* Page titles */
  h1.page-title, .page-intro h1{
    font-size:clamp(1.2rem, 4.8vw, 1.9rem);
    line-height:1.2; margin-bottom:.35rem;
  }

  /* Controls: stack full width */
  .controls{
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .controls > *{ width:100%; min-height:44px; }

  /* Student rows: single column info + grid actions that fit */
  .student{
    grid-template-columns: 1fr;
    row-gap: .55rem;
  }
  .student .status{ justify-self:start; margin-left:0; }
  .car-tag{ justify-self:start; }

  /* Actions auto-fit: 3 across if room, else 2, else 1 */
  .student .actions{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: .5rem;
    width: 100%;
  }
  .student .actions .btn{ width:100%; padding:.85rem .9rem; }

  /* Lists + padding */
  .student-list{ gap:.8rem; }
  .container{ padding-left:14px; padding-right:14px; }
}

/* Mobile compact view for class page */
@media (max-width: 640px) {
  /* Class page title */
  #className {
    font-size: clamp(16px, 4.6vw, 22px);
    margin: 6px 0 6px;
  }

  /* Student row: tighter padding and 2-col layout (name + tag) */
  body:has(#className) .student {
    padding: 8px 10px;
    border-radius: 12px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 6px;
  }

  /* Name (single line) */
  body:has(#className) .student .name {
    font-size: clamp(13px, 3.9vw, 16px);
    line-height: 1.15;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Car tag pill */
  body:has(#className) .student .car-tag {
    justify-self: end;
    font-size: 12px;
    padding: 2px 8px;
    line-height: 1.1;
    border-radius: 999px;
    min-width: unset;
  }

  /* Status on its own small line */
  body:has(#className) .student .status {
    grid-column: 1 / -1;
    font-size: 12px;
    line-height: 1.1;
    margin-top: 2px;
    color: #64748b;
  }

  /* Slightly denser list gap */
  body:has(#className) .student-list { gap: 8px; }
}

/* If you prefer two visible lines for long names, swap the name block above for this: */
/*
.card .name, .card h2, .card h3 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: clamp(13px, 3.9vw, 16px);
  line-height: 1.1;
  margin: 0;
}
*/

/* Defensive: media everywhere */
img, svg, video { max-width: 100%; height: auto; }
button, input, select { max-width: 100%; }

/* Strong, consistent focus ring */
:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; border-radius:12px; }

/* Guard: never allow accidental horizontal scroll at any size */
html, body { overflow-x: hidden; }

/* ---- Owner Console (page shell) ---- */
.owner-main{ max-width:1100px; padding:20px 16px; }
.titlebar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; border-bottom:1px solid #e5e7eb; padding-bottom:12px; }
.badge{ font-size:.85rem; opacity:.8; }
.grid-cards-320{ display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:12px; }

/* --- Utilities (generic) --- */
.mt-8{ margin-top:8px; }
.mt-12{ margin-top:12px; }
.w-100{ width:100%; }

/* Fail-safe: stop passive overlays from eating scroll on mobile */
.overlay,
.backdrop,
.scrim,
.click-catcher,
.modal-backdrop {
  pointer-events: none !important;
}

/* If something left body locked, unlock it */
body.no-scroll { overflow: auto !important; }

/* Flex children must be allowed to shrink for inner scrolling to work */
main, .page, .content-wrapper, .list-wrapper { min-height: 0; }

/* When ticker is visible, add breathing room at bottom so content isn't obscured */
body.has-ticker .container{ padding-bottom: 84px; }
@supports(padding: max(0px)){
  body.has-ticker .container{ padding-bottom: max(84px, env(safe-area-inset-bottom, 0px)); }
}

/* ===== Aging UX tweaks + iOS scrolling ===== */
/* Momentum scroll on iOS for inner list */
/* momentum scrolling is default on modern iOS; no vendor prop needed */

/* Make aging clearly visible even on bright green background */
.student.called.aging1{ 
  transform: translateZ(0) scale(1.03) !important;
  box-shadow: 0 0 0 4px rgba(14,165,233,.25), 0 10px 28px rgba(14,165,233,.18) !important;
}
@keyframes ttdShakeStrong{
  0%,100%{ transform: translateX(0) scale(1.05); }
  25%{ transform: translateX(-3px) scale(1.05); }
  50%{ transform: translateX(3px) scale(1.05); }
  75%{ transform: translateX(-2px) scale(1.05); }
}
.student.called.aging2{ animation: ttdShakeStrong 0.6s linear infinite !important; }
@media (prefers-reduced-motion: reduce){ .student.called.aging1, .student.called.aging2{ animation:none !important; transform:none !important; } }

/* On mobile, when the soft keyboard is open (approx via focus), hide the ticker */
@media (max-width: 780px){
  body.kbd-open .caller-ticker{ display:none !important; }
  .caller-ticker .expand-btn{ min-height:36px; padding:.35rem .6rem; }
}

/* --- Compact chip selector for class filter --- */
.chip-select{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-right:6px; }
.chip-select .chip{ display:inline-flex; align-items:center; gap:6px; padding:.3rem .55rem; border:1px solid #e5e7eb; border-radius:999px; background:#fff; font-weight:600; cursor:pointer; -webkit-user-select:none; user-select:none; }
.chip-select .chip input{ appearance:none; width:16px; height:16px; border:2px solid #cbd5e1; border-radius:4px; display:inline-block; position:relative; }
.chip-select .chip input:checked{ background:var(--accent); border-color:var(--accent); }
.chip-select .chip input:checked::after{ content:""; position:absolute; inset:3px; background:#fff; border-radius:2px; }
.chip-select .chip span{ font-size:.95rem; }

.class-controls label.small{ margin-right:4px; }

@media (max-width:780px){
  .chip-select{ gap:8px; }
  .chip-select .chip{ padding:.4rem .65rem; }
}

/* ---- Mobile chip sheet (for class filter) ---- */
.chip-sheet{
  position: fixed; left:0; right:0; bottom:-100%;
  background:#fff; border-top:1px solid #e5e7eb;
  box-shadow: 0 -14px 40px rgba(15,23,42,.18);
  border-top-left-radius:16px; border-top-right-radius:16px;
  padding:10px 14px 14px; z-index:1100;
  transition: bottom .22s ease;
  max-height: 75vh; overflow:auto;
}
.chip-sheet.open{ bottom:0; }
.chip-sheet .sheet-header{
  display:flex; align-items:center; gap:8px; position:sticky; top:0; background:#fff; padding:8px 0; z-index:1;
 }
.chip-sheet .sheet-header ._sp{ flex:1 }
.chip-sheet .chip-select{ margin-top:8px; }

/* Show Filter button on mobile, hide inline chips; reverse on desktop */
@media (max-width: 900px){
  #filterBtn{ display:inline-block; }
  /* Hide desktop All/Clear on mobile; use sheet header controls instead */
  #selectAllBtn, #clearSelBtn{ display:none; }
}
@media (min-width: 901px){
  #filterBtn{ display:none; }
  .chip-sheet{
    position: static; bottom:auto; left:auto; right:auto;
    box-shadow:none; border-top:0; border-radius:0; padding:0; max-height:none; overflow:visible;
  }
  .chip-sheet .sheet-header{ display:none; }
}

/* === Compact mobile header (toolbar + panel) === */
@media (max-width: 780px){
  header.site-header .header-inner{ display:none; }
  header.site-header .hdr-mobile{ display:flex; position:sticky; top:0; z-index:60; background:#fff; border-bottom:1px solid #e5e7eb; padding:8px 4%; gap:8px; }
  .icon-btn{ background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:.45rem .6rem; font-weight:800; }
  .icon-btn:focus{ outline:3px solid var(--ring); outline-offset:2px; }

  .hdr-menu-scrim{ position:fixed; inset:0; background:rgba(2,6,23,.4); z-index:59; opacity:0; transition:opacity .2s ease; }
  .hdr-menu-scrim.open{ opacity:1; }
  .hdr-menu-panel{ position:fixed; right:0; top:0; bottom:0; width:min(86vw, 360px); background:#fff; border-left:1px solid #e5e7eb; z-index:60; transform:translateX(100%); transition:transform .22s ease; box-shadow: -12px 0 30px rgba(2,6,23,.18); }
  .hdr-menu-panel.open{ transform:translateX(0); }
  .hdr-menu-panel .menu-inner{ display:flex; flex-direction:column; height:100%; }
  .hdr-menu-panel .menu-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px; border-bottom:1px solid #e5e7eb; }
  .hdr-menu-panel .menu-links{ display:grid; gap:8px; padding:12px; }
  .hdr-menu-panel .menu-links a{ padding:.6rem .8rem; border:1px solid #e5e7eb; border-radius:12px; font-weight:700; }
  .hdr-menu-panel .menu-auth{ margin-top:auto; padding:12px; display:flex; gap:8px; }
}
/* Fail-safe: stop passive overlays from eating scroll on mobile */
.overlay,
.backdrop,
.scrim,
.click-catcher,
.modal-backdrop {
  pointer-events: none !important;
}
/* If something left body locked, unlock it */
body.no-scroll { overflow: auto !important; }

/* Ensure the main list can actually scroll */
html, body { height: 100%; }

/* Mobile header scrim must not block scroll when closed */
@media (max-width: 780px){
  .hdr-menu-scrim{
    display: none;           /* hide it entirely */ 
    pointer-events: none;    /* and make it inert */
  }
  .hdr-menu-scrim.open{
    display: block;          /* only clickable when open */
    pointer-events: auto;
  }
}

/* === Scroll unlock: allow natural wheel/trackpad + touch scroll across action rows === */
/* Keep rows and action containers as vertical pan targets */
#masterList .student,
#masterList .actions {
  touch-action: pan-y;
}
/* But let individual buttons use the browser's default gesture handling */
#masterList .actions button,
#masterList .actions .btn,
#masterList .actions [role="button"]{
  touch-action: auto; /* override earlier pan-y constraint */
}
/* ================================================
   MASTER CALLER — SCROLL-SAFE OVERRIDES (FINAL)
   Append to the end of styles.css
   ================================================ */

/* 1) One true scroll container: the list */
html, body { height: 100%; overflow-x: hidden; }
.master-main {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
#masterList {
  flex: 1 1 auto;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

/* 2) Make sticky bits behave (header/controls) */
.controls.controls-top {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #fff;
}

/* 3) Overlays & scrims must be inert unless open */
.overlay, .backdrop, .scrim, .click-catcher, .modal-backdrop { 
  pointer-events: none !important; 
}
.caller-ticker .ticker-scrim { 
  display: none; 
  pointer-events: none; 
}
.caller-ticker.expanded .ticker-scrim { 
  display: block; 
  pointer-events: auto; 
}

/* Mobile header slide-out: scrim must not block when closed */
@media (max-width: 780px){
  .hdr-menu-scrim { display: none; pointer-events: none; }
  .hdr-menu-scrim.open { display: block; pointer-events: auto; }
}

/* 4) Let the browser do its job: remove over-constrained touch-action */
#masterList .student,
#masterList .actions {
  /* Let UA decide; don’t force pan-y on whole row cluster */
  touch-action: auto !important;
}
/* Buttons should never suppress scrolling gestures */
#masterList .actions button,
#masterList .actions .btn,
#masterList .actions [role="button"],
button, .btn {
  touch-action: auto !important;
}

/* 5) The real culprit: transforms on tiles were expanding hitboxes.
      Remove scale to avoid invisible overlap that swallows scroll. */
.student.called {
  /* keep the “called” look with shadow/color, but DO NOT scale */
  transform: none !important;
  will-change: auto !important;
}
/* Aging effects: use shadow only; no transform-based shake/scale */
.student.called.aging1,
.student.called.aging2 {
  animation: none !important; /* purely visual fallback below */
  box-shadow: 0 0 0 4px rgba(14,165,233,.25), 0 10px 28px rgba(14,165,233,.18) !important;
}

/* Optional: a subtle pulse using only shadow (no movement) */
@keyframes shadowPulseOnly {
  0%   { box-shadow: 0 0 0 0 rgba(14,165,233,.18), 0 8px 22px rgba(14,165,233,.15); }
  70%  { box-shadow: 0 0 0 10px rgba(14,165,233,0),   0 8px 22px rgba(14,165,233,.15); }
  100% { box-shadow: 0 0 0 0 rgba(14,165,233,0),      0 8px 22px rgba(14,165,233,.15); }
}
.student.called.aging1 { animation: shadowPulseOnly 1.2s ease-in-out infinite !important; }

/* 6) Flex children must be allowed to shrink so inner scrolling works */
main, .page, .content-wrapper, .list-wrapper { min-height: 0 !important; }

/* 7) If anything ever “locked” body, force it back */
body.no-scroll { overflow: auto !important; }

/* 8) When ticker shows, add breathing room so it doesn’t sit over content */
body.has-ticker #masterList { 
  padding-bottom: 84px; 
}
@supports(padding: max(0px)) {
  body.has-ticker #masterList { 
    padding-bottom: max(84px, env(safe-area-inset-bottom, 0px)); 
  }
}

/* 9) Desktop polish: wheel/trackpad scroll should work *anywhere* over a row */
.student, .actions, .btn, button {
  /* nothing special needed beyond making sure we didn’t block it with transforms */
  -webkit-user-select: none;
          user-select: none;
}

/* 10) Safety: disable horizontal scroll leaks on small screens */
@media (max-width: 820px){
  html, body { max-width: 100vw; overflow-x: hidden; }
}

/* 11) Keep toast clicks passing through */
.call-toasts, .call-toast { pointer-events: none !important; }

/* === FINAL MOBILE OVERRIDES (ensure no double header; compact menu) === */
@media (max-width: 820px){
  /* Only the slim toolbar on phones */
  header.site-header .header-inner{ display:none !important; }
  header.site-header .hdr-mobile{ display:flex !important; }

  /* Menu panel: compact, list-like links */
  .hdr-menu-panel .menu-links{ padding:10px 12px; gap:10px; }
  .hdr-menu-panel .menu-links a{
    display:flex; align-items:center; justify-content:flex-start;
    padding:10px 12px; line-height:1.2; min-height:0;
    border:1px solid #e5e7eb; border-radius:12px; background:#fff;
    font-weight:700; color:#0b132b;
  }
  .hdr-menu-panel .menu-links a:active{ background:#f3f4f6; }
  .hdr-menu-panel .menu-auth{ padding:10px 12px; }
  .hdr-menu-panel .menu-head{ padding:10px 12px; }
}

/* ---------- Homepage utilities ---------- */
.section-title{ margin:0 0 .5rem 0; font-size:1.25rem; }
.section-title--spaced{ margin:1rem 0 .5rem 0; }
.banner-warning{ background:#fffbeb; border:1px solid #fde68a; color:#854d0e; border-radius:10px; padding:.75rem 1rem; }
.mt-14{ margin-top:14px; }