/* =====================================================================
   1099TaxHelper.com — App Design System (Phase 1 pilot)
   ---------------------------------------------------------------------
   Loads AFTER styles-mobile.css so it wins the cascade at equal
   specificity. !important is used only where styles-mobile.css already
   uses it. No external fonts, no frameworks, no third-party assets.
   ===================================================================== */

:root{
  --ink:#0f172a;
  --ink-2:#334155;
  --ink-3:#64748b;
  --line:#e2e8f0;
  --line-soft:#eef2f7;
  --bg:#f4f6fa;
  --card:#ffffff;
  --brand:#059669;
  --brand-deep:#047857;
  --brand-soft:#ecfdf5;
  --navy:#0f172a;
  --navy-2:#1e293b;
  --amber-soft:#fffbeb;
  --amber-line:#fde68a;
  --teal-soft:#f0fdfa;
  --teal-line:#99f6e4;
  --blue:#2563eb;
  --violet:#7c3aed;
  --radius:14px;
  --radius-lg:16px;
  --shadow:0 4px 20px rgba(15,23,42,.05);
  --shadow-lift:0 6px 24px rgba(15,23,42,.08);
}

/* ---------- Base ---------- */
/* Guarantee the HTML `hidden` attribute always hides elements (e.g. the
   state-filter empty message), regardless of other display rules. */
[hidden]{display:none !important}
html{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg);
  color:var(--ink);
}
body{background:var(--bg)}

/* Links: keep affordance without relying on color alone */
main a{
  color:var(--brand-deep);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  text-decoration-color:rgba(5,150,105,.45);
}
main a:hover{color:var(--brand);text-decoration-color:var(--brand)}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible,select:focus-visible{
  outline:3px solid var(--brand);
  outline-offset:2px;
  border-radius:6px;
}

/* ---------- Nav ---------- */
nav.top{
  background:var(--card);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 3px rgba(15,23,42,.04);
}
nav.top .links a{border-radius:6px}
nav.top .links a:hover{color:var(--brand-deep)}

/* ---------- Hero ---------- */
.hero{
  background:linear-gradient(180deg,#eef4fb 0%,var(--bg) 100%) !important;
  border-bottom:1px solid var(--line);
}
.badge{
  background:var(--card);
  border:1px solid var(--line);
  color:var(--ink-2);
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.lead{color:var(--ink-2);max-width:62ch}

/* Trust chips */
.trust-chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px;padding:0;list-style:none}
.trust-chips li{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--card);border:1px solid var(--line);
  border-radius:999px;padding:5px 12px;
  font-size:12px;font-weight:600;color:var(--ink-2);
}
.trust-chips li svg{flex:none}

/* ---------- Calculator card ---------- */
.calc{
  background:var(--card) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--radius-lg) !important;
  box-shadow:var(--shadow);
  /* padding: mobile keeps 18px from styles-mobile.css; generous desktop
     padding is applied in the 768px media query below. */
}
@media (min-width:768px){
  .calc{padding:28px !important}
}
.calc h2{color:var(--ink)}
.calc .hint{font-size:13px;color:var(--ink-3);margin:0 0 10px}
.calc label{color:var(--ink-2)}
.calc input,.calc select{
  border:1px solid #cbd5e1;
  border-radius:10px !important;
  background:#fbfdff;
  font-variant-numeric:tabular-nums;
}
.calc input:focus,.calc select:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(5,150,105,.18) !important;
  background:#fff;
}

/* Two-column app layout: inputs left, results right (desktop) */
.calc-grid{display:block}
@media (min-width:768px){
  .calc-grid{
    display:grid;
    grid-template-columns:minmax(0,5fr) minmax(0,6fr);
    gap:24px;
    align-items:start;
  }
  .calc-inputs label:first-of-type{margin-top:0 !important}
}

/* ---------- Result panel ---------- */
.result{
  background:linear-gradient(160deg,var(--navy) 0%,var(--navy-2) 100%) !important;
  color:#fff;
  border-radius:var(--radius) !important;
  box-shadow:var(--shadow);
  /* padding + margin-top: mobile values (16px/16px) come from
     styles-mobile.css; desktop overrides below. */
}
@media (min-width:768px){
  .result{padding:22px !important}
  /* In the two-column app layout the result panel tops the right
     column, so remove the stacked-layout top margin. */
  .calc-output .result{margin-top:0 !important}
}
.result .label{
  font-size:11px !important;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#94e5c8;
  opacity:1;
  font-weight:700;
}
.result .value{
  color:#fff;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}
@media (min-width:768px){
  .result .value{font-size:2.75rem !important;line-height:1.1}
}
.result .sub{color:#cbd5e1;opacity:1;font-size:13px}

/* ---------- Visual breakdown bars ---------- */
.bars{margin-top:14px}
.bar-row{margin:10px 0}
.bar-head{
  display:flex;justify-content:space-between;gap:12px;
  font-size:13px;color:var(--ink-2);margin-bottom:4px;
}
.bar-head .bar-val{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.bar{
  height:10px;border-radius:999px;background:var(--line-soft);
  overflow:hidden;border:1px solid var(--line);
}
.bar .fill{
  display:block;height:100%;width:0;border-radius:999px;
  transition:width .35s ease;
  min-width:0;max-width:100%;
}
@media (prefers-reduced-motion:reduce){.bar .fill{transition:none}}
.f-take{background:#10b981}
.f-se{background:#f59e0b}
.f-fed{background:#3b82f6}
.f-state{background:#8b5cf6}
.f-med{background:#0ea5e9}
.f-sur{background:#8b5cf6}

/* ---------- Breakdown list ---------- */
.breakdown div{border-bottom:1px solid var(--line-soft)}
.breakdown span:last-child{font-weight:600;font-variant-numeric:tabular-nums}

/* ---------- Disclosure note ---------- */
.disclose{
  margin-top:14px !important;
  padding:10px 14px;
  background:#f8fafc;
  border:1px solid var(--line);
  border-radius:10px;
  font-size:12.5px !important;
  color:var(--ink-3);
  line-height:1.5;
}

/* ---------- Tables ---------- */
table{
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:var(--shadow);
}
th{background:#f8fafc;color:var(--ink-3)}
tr.highlight td{background:var(--brand-soft);color:#065f46}

/* ---------- State selector ---------- */
.state-search{margin:16px 0 10px;max-width:420px}
.state-search label{
  display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:6px;
}
.state-search input{
  width:100%;min-height:48px;padding:12px 14px;
  font-size:16px;border:1px solid #cbd5e1;border-radius:10px;
  background:var(--card);
}
.state-search input:focus{
  outline:0;border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(5,150,105,.18);
}
.state-empty{
  background:var(--card);border:1px dashed var(--line);
  border-radius:10px;padding:14px 16px;
  font-size:14px;color:var(--ink-3);margin:10px 0;
}
/* CRITICAL: styles-mobile.css sets `.state-grid a{display:flex !important}`
   at all widths, which would defeat the [hidden] attribute set by the
   search filter. Higher-specificity rule restores hiding. */
.state-grid a[hidden]{display:none !important}
/* Card layout is declared here (self-contained component) as well as in
   styles-mobile.css, so cards render as cards even if the mobile sheet's
   rules are unavailable. Plain declarations: styles-mobile's !important
   breakpoint rules still control responsive column counts. */
.state-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:8px;
}
.state-grid a{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:56px;
  padding:10px 14px;
  background:var(--card) !important;
  border:1px solid var(--line) !important;
  border-radius:12px !important;
  box-shadow:0 1px 3px rgba(15,23,42,.04);
  text-decoration:none;
  color:var(--ink-2) !important;
  font-weight:600;
}
.state-grid a:hover{
  border-color:var(--brand) !important;
  background:var(--brand-soft) !important;
  color:var(--brand-deep) !important;
  box-shadow:var(--shadow);
}
.state-grid a .rate{color:var(--ink-3)}
/* No-income-tax states: subtle green badge */
.state-grid a.nt .rate{
  display:inline-block;
  background:#dcfce7;color:#166534;
  border:1px solid #bbf7d0;
  border-radius:8px;padding:2px 8px;
  font-size:10.5px;font-weight:600;margin-top:4px;
  white-space:normal;line-height:1.4;max-width:100%;
  align-self:flex-start;
}

/* ---------- Guide cards ---------- */
.guide-grid a{
  background:var(--card) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--radius) !important;
  box-shadow:0 1px 3px rgba(15,23,42,.04);
  text-decoration:none;
}
.guide-grid a:hover{
  border-color:var(--brand) !important;
  box-shadow:var(--shadow-lift);
}
.guide-grid a strong{color:var(--ink)}
.guide-grid a:hover strong{color:var(--brand-deep)}

/* ---------- Related pills ---------- */
.related a{
  background:var(--card);border:1px solid var(--line);
  text-decoration:none;
}
.related a:hover{border-color:var(--brand);color:var(--brand-deep)}

/* ---------- Callout (30% rule etc.): soft teal, calm ---------- */
.callout{
  background:var(--teal-soft) !important;
  border:1px solid var(--teal-line) !important;
  border-left:4px solid #14b8a6 !important;
  border-radius:12px !important;
  box-shadow:none;
}
.callout h3{color:#0f766e !important}

/* ---------- Alert ---------- */
.alert{border-radius:10px}

/* ---------- FAQ accordions (details/summary) ---------- */
details{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  margin-bottom:10px;
  box-shadow:0 1px 3px rgba(15,23,42,.04);
}
details summary{
  padding:14px 16px;cursor:pointer;font-weight:600;font-size:14.5px;
  list-style:none;display:flex;justify-content:space-between;
  align-items:center;gap:12px;border-radius:12px;
}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";color:var(--brand);font-size:20px;font-weight:400;flex:none}
details[open] summary::after{content:"−"}
details > p{padding:0 16px 14px;color:var(--ink-2);margin:0;font-size:14.5px}

/* ---------- Lever cards (deductions guide) ---------- */
.lever{
  background:var(--card);
  border:1px solid var(--line);
  border-left:4px solid var(--brand);
  border-radius:12px;
  padding:18px 22px;margin:16px 0;
  box-shadow:0 1px 3px rgba(15,23,42,.04);
}
.lever .meta{
  display:inline-block;
  background:var(--brand-soft);color:var(--brand-deep);
  border:1px solid #a7f3d0;border-radius:999px;
  padding:2px 10px;font-size:11px;font-weight:700;
  letter-spacing:.05em;margin-bottom:8px;
}
.lever h3{margin-top:0}

/* ---------- Footer ---------- */
footer{background:var(--navy)}

/* ---------- Answer-first panel (snippet-optimized quick answers) ---------- */
.answer-box{
  background:var(--card);
  border:1px solid var(--line);
  border-left:4px solid var(--brand);
  border-radius:12px;
  padding:16px 20px;
  margin:18px 0;
  box-shadow:var(--shadow);
}
.answer-box .eyebrow{
  display:block;
  font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--brand-deep);
  margin-bottom:6px;
}
.answer-box p{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink)}