:root { --brand:#0b5; --ink:#222; --muted:#666; --bg:#fff; }
* { box-sizing:border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color:var(--ink); background:var(--bg); }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }


.nav-wrap { max-width: 1100px; margin:0 auto; display:flex; gap:16px; align-items:center; padding:10px 16px; }
.brand { font-weight: 700; font-size: 18px; display:flex; align-items:center; gap:8px; }
.beta-badge { font-size: 10px; font-weight:700; color:#c00; border:1px solid #f2c4c4; padding:2px 6px; border-radius: 999px; }
.nav { margin-left:auto; display:flex; gap:14px; flex-wrap: wrap; }
.nav a { font-size: 14px; color:#333; }
.nav .primary { font-weight:700; }
.nav-toggle { display:none; }

.footer { border-top:1px solid #eee; margin-top:48px; background:#fafafa; }
.footer-inner { max-width: 1100px; margin:0 auto; padding:20px 16px; font-size: 14px; color:var(--muted); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.last-updated { font-size: 12px; color: var(--muted); margin-top: 24px; }

main.page { max-width:900px; margin:24px auto; padding:0 16px; line-height:1.6; }
main.page h1 { font-size: 28px; margin: 16px 0; }
main.page h2 { font-size: 20px; margin: 16px 0 8px; }
.callout { background:#f6fff9; border:1px solid #e3f7ea; padding:12px 14px; border-radius:8px; }

@media (max-width: 720px){
  .nav { display:none; }
  .nav-toggle { display:block; margin-left:auto; }
  .nav.open { display:flex; flex-direction:column; width:100%; gap:12px; margin-top:10px; }
}

/* ---- Form grid alignment tune-up ---- */
.card .grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 20px;
}
.card .grid > label {
  display: grid;
  grid-template-columns: 220px 1fr;
  align-items: center;
  gap: 8px;
  min-height: 40px;
}
.card .grid > label > span:first-child {
  white-space: nowrap;
  color: var(--muted, #444);
}
.card input[type="text"],
.card input[type="number"],
.card input[placeholder*=":"],
.card select {
  max-width: 320px;
  height: 36px;
  padding: 6px 10px;
  box-sizing: border-box;
}
.card .grid > label input[type="checkbox"] {
  transform: translateY(1px);
}
.provider-off-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  align-items: center;
  gap: 8px;
}
.provider-off-row .off-inline {
  display: flex; gap: 10px; align-items: center;
}
.provider-off-row input[type="text"] { max-width: 360px; }
input[inputmode="numeric"],
input[type="number"] { text-align: right; }
#weeklyCapOverride {
  max-width: 160px;
  opacity: 0.92;
}
#weeklyCapOverride::placeholder { color: #666; }
@media (max-width: 820px) {
  .card .grid { grid-template-columns: 1fr; }
  .card .grid > label { grid-template-columns: 1fr; }
  .provider-off-row { grid-template-columns: 1fr; }
}


/* ===== Professional theme pass (no JS) ===== */
:root{ --hdr-h: 60px; 
  --brand:#0B3D91;   /* federal blue */
  --accent:#FDB81E;  /* golden accent */
  --ink:#1b1b1b;
  --muted:#555;
  --bg:#f7f9fc;
  --card:#ffffff;
  --line:#e6e9ef;
}

*{ box-sizing:border-box }
html, body{ height:100% }
body{
  margin:0; color:var(--ink); background:var(--bg);
  font: 15px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  overflow-wrap: anywhere;
}

.container{
  max-width: 1080px;
  margin: 0 auto;
  padding: 18px 22px;
}

/* Header */

.site-header .hstack{ display:flex; align-items:center; gap:16px }
.brand{ display:flex; align-items:center; gap:10px }
.brand-link{ font-weight:700; color:var(--brand); text-decoration:none; letter-spacing:.2px }
.badge{ background: var(--accent); color:#000; font-weight:700; font-size:12px; padding:2px 8px; border-radius:999px }

.nav{ display:flex; align-items:center; gap:18px; margin-left:auto }
.nav a{
  color:var(--ink); text-decoration:none; padding:14px 4px; border-bottom: 2px solid transparent;
}
.nav a:hover, .nav a:focus{ border-bottom-color: var(--accent) }
.hamburger{ display:none; margin-left:8px; background:transparent; border:0; font-size:20px; line-height:1 }

/* Footer */
.site-footer{ background:#fff; border-top:1px solid var(--line); margin-top:40px }
.site-footer .fstack{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap }
.site-footer .footline{ margin:10px 0 0 0; color:var(--muted) }
.site-footer .meta{ margin:10px 0; font-size:14px; color:var(--muted) }
.site-footer a{ color: var(--brand); text-decoration: none }
.site-footer a:hover{ text-decoration: underline }

/* Cards & layout */
.card{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px; box-shadow: 0 1px 3px rgba(0,0,0,.03) }
.container h1{ margin: 6px 0 12px; font-size: 30px }
.container h2{ margin: 18px 0 8px; font-size: 20px; color: var(--brand) }
a.button, .btn{
  display:inline-block; padding:10px 16px; border-radius:10px; text-decoration:none; font-weight:600; border:2px solid transparent;
}
.btn-primary{ background:var(--brand); color:#fff }
.btn-primary:hover{ filter:brightness(.95) }
.btn-ghost{ background:transparent; color:var(--brand); border-color: var(--brand) }
.btn-ghost:hover{ background:rgba(11,61,145,.06) }

/* Home hero */
.hero{
  background: linear-gradient(135deg, rgba(11,61,145,.06), rgba(253,184,30,.06));
  border-bottom:1px solid var(--line);
}
.hero .wrap{ padding: 48px 0 }
.hero h1{ font-size: 38px; margin: 0 0 8px }
.hero p.lead{ font-size: 18px; color:#2a2a2a; margin:0 0 18px }
.hero .cta{ display:flex; gap:12px; flex-wrap:wrap }

/* Details "popup" */
.notice{ position:relative }
.notice[open]::before{
  content:""; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index: 900;
}
.notice[open] .notice-card{
  position: fixed; inset: 10% auto auto 50%; transform: translateX(-50%);
  width:min(720px, 92vw); background:#fff; border:1px solid var(--line); border-radius:12px; 
  padding:18px; z-index: 901; box-shadow: 0 15px 30px rgba(0,0,0,.2);
}
.notice summary{ list-style:none }
.notice summary::-webkit-details-marker{ display:none }
.notice summary .btn{ cursor:pointer }

/* Content polish */
main.container p{ margin: 8px 0 }
ul, ol{ padding-left: 20px }
details{ background:#fff; border:1px solid var(--line); border-radius:10px; padding:10px 14px; margin:10px 0 }
details[open]{ border-color: var(--brand) }
details summary{ font-weight:600; cursor:pointer }

/* Mobile nav */
@media (max-width: 860px){
  .nav{ display:none }
  .nav.open{ display:flex; position:absolute; left:0; right:0; top:100%; background:#fff; padding:10px 18px; border-bottom: 2px solid var(--brand) }
  .hamburger{ display:block }
  .hero .wrap{ padding: 28px 0 }
  .container{ padding:16px }
}


/* ===== Anchoring content: page cards, prose widths ===== */
.page{ margin: 18px auto; }
.prose{ max-width: 72ch; }
.page.prose{ padding: 24px; }

/* Guard long lines and tables */
main.container{ overflow: hidden }
.page :where(h1,h2,h3){ scroll-margin-top: 84px }

/* Nav wrapping without double rows looking messy */
.nav{ flex-wrap: wrap }
.nav a{ white-space: nowrap }

/* Reduce visual duplication on home hero by tightening nav spacing */
@media (min-width: 861px){
  .nav a{ padding: 12px 6px }
}

/* Ensure nothing spills: images, tables */
.page img, .page table{ max-width: 100%; height: auto }
.page table{ border-collapse: collapse; width: 100% }
.page th, .page td{ border:1px solid var(--line); padding:6px 8px; vertical-align: top }

/* Footer tighter alignment on small screens */
@media (max-width: 520px){
  .site-footer .fstack{ gap:8px }
  .site-footer .footline, .site-footer .meta{ text-align:center; width:100% }
}


/* ===== Planner page polish (no JS) ===== */
#schedule { width:100%; border-collapse: collapse; background:#fff; }
#schedule th, #schedule td { border:1px solid var(--line); padding:6px 8px; text-align: center; }
#schedule thead th { position: sticky; top: calc(var(--hdr-h) + 4px); background: #f2f5fb; z-index: 2; }
#schedule tbody tr:nth-child(odd) { background: #fafbfe; }

/* Status & totals card spacing */
#status, #totals, #intake, #p1, #p2, #r1, #r2 { margin-bottom: 16px; }
#statusBody ul{ margin: 6px 0 0 18px; padding:0 }

/* Make labels snap into a neat grid (already adopted site-wide) */
#intake .grid > label,
#p1 .grid > label, #p2 .grid > label,
#r1 .grid > label, #r2 .grid > label {
  display:grid; grid-template-columns:220px 1fr; align-items:center; gap:8px; min-height:40px;
}

/* Ensure long content doesn't spill */
.page { overflow: hidden }
#schedule-wrap { overflow-x:auto; }
#schedule-wrap table { min-width: 720px; }

/* Buttons row alignment */
.actions, .controls, .cta-row { display:flex; gap:10px; flex-wrap:wrap }

/* ===== Accessibility & Print polish ===== */
.skip-link{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden }
.skip-link:focus{ position:fixed; left:16px; top:12px; width:auto; height:auto; padding:8px 12px; background:#fff; border:2px solid var(--brand); border-radius:8px; z-index:2000 }
:where(a, button, input, select, details, summary):focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
@media print{
  .site-header, .site-footer, .hero, .notice, .cta, nav, .nav{ display:none !important; }
  body{ background:#fff }
  .card{ box-shadow:none; border-color:#bbb }
  .container{ max-width: 100%; padding:0 }
  .page{ margin:0; border:0; }
  #schedule th, #schedule td{ border-color:#000; padding:4px 6px }
}

/* ===== Footer redesign ===== */
.site-footer{ background:#fff; border-top:1px solid var(--line); margin-top:40px }
.footer-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:18px; padding-top:18px; }
.footer-grid h4{ margin:0 0 8px 0; font-size:14px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px }
.footer-grid ul{ margin:0; padding:0; list-style:none }
.footer-grid li{ margin:6px 0 }
.footer-grid a{ color:var(--brand); text-decoration:none }
.footer-grid a:hover{ text-decoration:underline }
.footer-meta{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0 18px }
.footer-meta .trust{ margin:0; color:var(--muted) }
.footer-meta .copy{ margin:0; color:var(--muted); font-size:14px }
@media (max-width: 820px){
  .footer-grid{ grid-template-columns:1fr 1fr }
  .footer-meta{ flex-direction:column; align-items:flex-start }
}

/* Sticky header reinforcement */


/* ===== Breadcrumbs ===== */








/* ===== Frozen header (always visible) ===== */




/* ===== Legal pages typography unify ===== */



.page.card.prose p  { font-size: 16px; line-height: 1.65; margin: 8px 0; }
.page.card.prose ul { padding-left: 20px; margin: 8px 0; }
.page.card.prose li { margin: 4px 0; }



/* FINAL frozen header */


#schedule thead th{ position: sticky; top: calc(var(--hdr-h) + 4px); }


/* ===== Legal pages unified typography (including nested cards) ===== */





.page.card.prose p  { font-size: 16px; line-height: 1.65; margin: 8px 0; }
.page.card.prose ul { padding-left: 20px; margin: 8px 0; }
.page.card.prose li { margin: 4px 0; }

/* Nested callout card at top of Terms/Privacy */



/* Breadcrumbs spacing under fixed header */




/* === Breadcrumbs clearance under fixed header === */
:root{ --hdr-h: 60px; }





/* === Legal pages unified typography (override any earlier rules) === */







/* ===== Legal pages — consistent styles (scoped) ===== */






/* ===== Breadcrumbs pinned under frozen header ===== */
:root{ --hdr-h: 60px; }



/* === Canonical header/breadcrumbs block (Pattern A) === */
:root { --hdr-h: 72px; }           /* adjust to your real header height */

/* Reserve space before JS injects header to prevent overlap/flicker */


/* Fixed header on top */


/* Body content starts below header */


/* Breadcrumbs sit directly under the header and stick while scrolling */


.breadcrumbs .container { padding: 8px 22px; }
.breadcrumbs nav { font-size: 14px; color: var(--muted); }
.breadcrumbs a { text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs .sep { margin: 0 6px; }

@media (max-width: 768px){
  :root { --hdr-h: 80px; } /* tweak if mobile header is taller */
}


/* === Header visuals === */


/* === Legal pages unified heading styles === */


/* Ensure links inside headings don't turn brand blue */


/* Breadcrumbs visual */




/* === Hard opacity guard for header/breadcrumbs === */

/* === QA v4: Canonical header/breadcrumbs and legal styles === */
:root { --hdr-h: 72px; } /* adjust if needed */

#site-header { height: var(--hdr-h); } /* reserve space before injection */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: #fff !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.04);
}

body { padding-top: var(--hdr-h); }

.breadcrumbs {
  position: sticky;
  top: var(--hdr-h);
  margin-top: 0;
  background: #fff !important;
  border-bottom: 1px solid var(--line);
  z-index: 999;
}
.breadcrumbs .container { padding: 8px 22px; }
.breadcrumbs nav { font-size: 14px; color: var(--muted); }
.breadcrumbs a { text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs .sep { margin: 0 6px; }

/* Legal pages unified headings and typography */
.page.card.prose.legal h1{ color: var(--ink) !important; }

.page.card.prose.legal h1{ color: inherit !important; text-decoration: none; }

/* Ensure legal body text inherits and remains consistent */
.page.card.prose.legal, .page.card.prose.legal * {
  font-family: inherit !important;
  color: var(--ink);
}

/* Mobile header height tweak if header wraps */
@media (max-width: 768px){
  :root { --hdr-h: 80px; }
}

/* PHASE6 invalid input outline */
input.invalid{outline:2px solid #c00;}

/* PHASE7: compliance banner */
.compliance-banner{padding:.5rem 0;color:#333;font-size:.9rem;}

/* PHASE7a: ensure labels for recipient hours don't get covered */
label[for='r1Hours'], label[for='r2Hours']{display:block;margin-bottom:4px;}

/* PHASE7b: prevent label overlap and ensure full-width inputs */
label[for='r1Hours'], label[for='r2Hours']{display:block;margin-bottom:6px;}
#r1Hours, #r2Hours{display:block;width:100%;}

/* PHASE7c: labels full width */
label[for='r1Hours'], label[for='r2Hours']{display:block;margin-bottom:6px;}
#r1Hours,#r2Hours{display:block;width:100%;}