/* WhenIsMyCheck.com — ChatGPT-style, elder-friendly, high-contrast */
:root{
  --bg: #ffffff;
  --panel: #f7f7f8;
  --text: #0b0f14;
  --muted: #4a5568;
  --border: #d0d7de;
  --accent: #0b57d0; /* accessible blue */
  --success: #0b6b2e; /* dark green for contrast */
  --danger: #b42318;
  --shadow: rgba(15, 23, 42, 0.08);
  --radius: 18px;
  --maxw: 860px;
  --header-height: 72px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

@media (prefers-color-scheme: dark){
  :root{
    --bg: #0b0f14;
    --panel: #111827;
    --text: #f8fafc;
    --muted: #cbd5e1;
    --border: #263041;
    --accent: #60a5fa;
    --success: #22c55e;
    --danger: #fb7185;
  }
}

*{box-sizing:border-box}
html{color-scheme:light dark}
body{
  margin:0;
  padding-top: var(--header-height);
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-size: 18px;
}

a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
small{font-size: 14px; color: var(--muted)}
hr{border:0; border-top:1px solid var(--border); margin: 24px 0}

.skip-link{
  position:absolute; left:-9999px; top:10px;
  background: var(--accent); color:white; padding: 10px 14px; border-radius: 10px;
}
.skip-link:focus{left:10px; z-index:9999}

header{
  position: fixed;
  top:0;
  left:0;
  right:0;
  height: var(--header-height);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  z-index: 50;
}
.nav{
  max-width: var(--maxw);
  margin: 0 auto;
  height: var(--header-height);
  padding: 0 16px;
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:space-between;
}
.brand{
  display:flex; gap:10px; align-items:center;
  font-weight: 800; letter-spacing: .2px;
}
.badge{
  font-size: 12px;
  border: 1px solid var(--border);
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--muted);
}
.navlinks{
  display:flex;
  gap:12px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.navlinks::-webkit-scrollbar{display:none;}
.navlinks a{
  padding: 8px 10px;
  border-radius: 10px;
}
.navlinks a:hover{
  background: var(--panel);
  text-decoration:none;
}

@media (max-width: 768px){
  .navlinks{
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .navlinks::-webkit-scrollbar{display:none;}
  .navlinks a{
    white-space: nowrap;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--panel) 65%, transparent);
    padding: 8px 12px;
  }
}

main{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 28px 16px 60px;
}

/* Ensure anchored jumps aren't hidden behind the fixed header */
:where(main [id]){scroll-margin-top: calc(var(--header-height) + 20px);}

h1{font-size: 38px; line-height: 1.15; margin: 0 0 10px}
h2{font-size: 28px; margin: 28px 0 10px}

/* Step number styling */
.step-num{font-weight: 900;}
h3{font-size: 22px; margin: 22px 0 8px}

.card{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: 0 6px 20px var(--shadow);
}
.card + .card{margin-top:16px}

.grid{
  display:grid;
  gap:16px;
}
@media (min-width: 840px){
  .grid-2{grid-template-columns: 1fr 1fr}
}

label{display:block; font-weight: 700; margin: 6px 0}
.help{color:var(--muted); margin-top:6px}
input[type="number"], input[type="text"]{
  width: 100%;
  padding: 18px 16px;
  font-size: 20px;
  border-radius: 14px;
  border: 2px solid var(--border);
  background: var(--bg);
  color: var(--text);
}
input[type="number"]:focus, input[type="text"]:focus, button:focus, .option:focus-within{
  outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 2px;
}

/* Validation highlighting (client-side, no tracking) */
.invalid{
  outline: 3px solid rgba(239,68,68,0.9);
  outline-offset: 4px;
}
input.invalid, select.invalid{
  border-color: rgba(239,68,68,0.9) !important;
  box-shadow: 0 0 0 4px rgba(239,68,68,0.12);
}
.options.invalid{
  border-radius: 18px;
}

.inline{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
}
.pill{
  border: 1px solid var(--border);
  background: var(--bg);
  padding: 10px 12px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.options{
  display:grid;
  gap:12px;
}
@media (min-width: 640px){
  .options.cols-2{grid-template-columns: 1fr 1fr}
  .options.cols-3{grid-template-columns: 1fr 1fr 1fr}
}
.option{
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: 16px;
  padding: 14px 14px;
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.option input{margin-top: 6px; transform: scale(1.35)}
.option strong{display:block; font-size: 20px; line-height:1.2}
.option span{display:block; color: var(--muted); margin-top: 4px}
.option.selected{
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}

button{
  cursor:pointer;
  border: 0;
  border-radius: 14px;
  padding: 16px 16px;
  font-weight: 800;
  font-size: 18px;
  min-height: 64px;
}
.btn-primary{background: var(--accent); color: white}
.btn-secondary{background: var(--bg); border: 2px solid var(--border); color: var(--text)}
.btn-danger{background: var(--danger); color: white}
.btn-row{display:flex; gap:10px; flex-wrap:wrap}
.btn-row > button{flex:1 1 180px}

.notice{
  border-left: 6px solid var(--accent);
  padding: 12px 14px;
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  border-radius: 14px;
}
.notice.warn{border-left-color: #f59e0b}
.notice.ok{border-left-color: var(--success)}
.notice.bad{border-left-color: var(--danger)}

.banner{
  background: var(--text);
  color: var(--bg);
  padding: 12px 14px;
  border-radius: 14px;
  font-weight: 900;
  letter-spacing: .4px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}

.table-wrap{overflow:auto; border-radius: 14px; border:1px solid var(--border)}
table{border-collapse:collapse; width:100%; min-width: 680px; background: var(--bg)}
th, td{border-bottom:1px solid var(--border); padding: 12px 12px; text-align:left}
th{position:sticky; top:0; background: var(--panel); font-size: 14px; text-transform: uppercase; letter-spacing:.08em}
tr.shifted td{font-weight: 800}

.kpi{
  display:flex; gap:12px; flex-wrap:wrap;
}
.kpi .box{
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: 16px;
  padding: 14px 14px;
  flex: 1 1 220px;
}
.kpi .big{
  font-size: 28px; font-weight: 900; line-height:1.2;
}
.kpi .meta{color:var(--muted)}
.good{color: var(--success); font-weight: 900}
.muted{color: var(--muted)}
.hidden{display:none !important}

.ad-slot{
  min-height: 250px;
  border: 1px dashed var(--border);
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  color: var(--muted);
  font-size: 14px;
}


@media (max-width: 560px){
  /* Compact results card on phones */
  #results .card{padding: 14px;}
  #results .kpi{gap: 10px;}
  #results #action-bar{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  #results #action-bar > button{min-width:0;}
  #results #btn-ics{grid-column: 1 / -1;}
}


footer{
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel) 50%, transparent);
}
.footer-inner{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 22px 16px;
  display:flex;
  flex-direction:column;
  gap:10px;
}


/* Cookie consent — compact bottom bar */
#consent-banner{
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 12px 16px !important;
  border-radius: 0 !important;
  border: 0 !important;
  border-top: 1px solid rgba(255,255,255,0.18) !important;
  background: #263238 !important;
  color: #ffffff !important;
  box-shadow: 0 -10px 30px rgba(0,0,0,0.18) !important;
}
#consent-banner strong{color:#ffffff;}
#consent-banner .help{color: rgba(255,255,255,0.82); font-size: 14px; margin-top: 4px;}
#consent-banner .grid{gap: 12px;}
#consent-banner .btn-row{gap: 10px; flex-wrap: nowrap;}
#consent-banner .btn-row > button{
  flex: 0 0 auto;
  min-height: 44px;
  padding: 10px 12px;
  font-size: 16px;
}
#consent-banner .btn-secondary{background: transparent; color: #ffffff; border-color: rgba(255,255,255,0.45);}
#consent-banner .btn-primary{background: #0b57d0; color: #ffffff;}
@media (min-width: 640px){
  #consent-banner{padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;}
  #consent-banner .grid{
    grid-template-columns: 1fr auto;
    align-items: center;
  }
  #consent-banner .btn-row{justify-content: flex-end;}
}
@media (max-width: 520px){
  #consent-banner{padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;}
  #consent-banner .btn-row{flex-direction: column; align-items: stretch;}
  #consent-banner .btn-row > button{width: 100%;}
}


@media print{
  header, .no-print, .ad-slot {display:none !important}
  body{background:#fff; color:#000; padding-top:0 !important}
  main{max-width: none; padding: 0 0}
  .card{box-shadow:none}
  table{min-width:0}
}


/* Listen button speaking state (A11y feedback) */
.is-speaking{
  position: relative;
  background: var(--success) !important;
  color: #ffffff !important;
  border-color: color-mix(in srgb, var(--success) 70%, #000) !important;
  animation: wimc-pulse 2s infinite;
}
.is-speaking::before{
  content: "■ ";
  font-weight: 900;
}
@keyframes wimc-pulse{
  0%{transform: scale(1); box-shadow: 0 0 0 0 rgba(34,197,94,0.45);}
  70%{transform: scale(1.02); box-shadow: 0 0 0 10px rgba(34,197,94,0);}
  100%{transform: scale(1); box-shadow: 0 0 0 0 rgba(34,197,94,0);}
}
@media (prefers-reduced-motion: reduce){
  .is-speaking{animation:none;}
}



/* Article → Calculator prompt */
.article-calc-prompt{margin: 18px 0 22px}
.article-calc-prompt .prompt-inner{box-shadow:none}
.article-calc-prompt .help{font-size: 16px}
.article-calc-prompt .options{margin-top: 10px}
.article-calc-prompt .btn-row > button{flex: 1 1 220px}


/* Cite / Copy */
.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 16px;
  line-height: 1.5;
  word-break: break-word;
}
.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;
}
.cite-grid{
  display:grid;
  gap:16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: 14px;
}
.cite-item{
  background: var(--panel);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
.cite-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}
.cite-row{margin-top: 12px}
.cite-text{
  margin-top: 8px;
  padding: 12px;
  border: 2px solid var(--border);
  border-radius: 14px;
  background: var(--bg);
}
.btn-secondary.is-copied{
  outline: 3px solid rgba(11,87,208,0.25);
}


/* FAQ blocks */
.faq-list{
  margin-top: 10px;
}
.faq-item{
  border-top: 1px solid var(--border);
  padding: 12px 0;
}
.faq-item:first-child{
  border-top: 0;
}
.faq-item > summary{
  cursor: pointer;
  font-weight: 800;
  font-size: 20px;
  line-height: 1.4;
  list-style: none;
}
.faq-item > summary::-webkit-details-marker{ display:none; }
.faq-answer p{
  margin: 10px 0 0;
  font-size: 20px;
  line-height: 1.6;
}

/* Prefer PDF callout (used on PDF landing pages and optionally elsewhere) */
.prefer-pdf{
  margin-top: 14px;
}
.prefer-pdf .pdf-links{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 10px;
}
.prefer-pdf a.btn{
  display:inline-flex;
}