/* Analyze My Income — unified interface system.
   One visual language for app-shell, landing-page and planner-page.
   Light theme priorities: readability, consistent spacing, strong hierarchy, no decorative gradients. */

:root {
  --ami-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --ami-page: #f6f8fa;
  --ami-surface: #ffffff;
  --ami-surface-soft: #f8fafc;
  --ami-surface-accent: #ecfdf5;
  --ami-text: #0f172a;
  --ami-text-2: #334155;
  --ami-text-3: #475569;
  --ami-border: #cbd5e1;
  --ami-green: #059669;
  --ami-green-dark: #047857;
  --ami-green-text: #065f46;
  --ami-radius: 18px;
  --ami-shadow: 0 8px 22px rgba(15, 23, 42, .055);
}

body.app-shell,
body.landing-page,
body.planner-page {
  font-family: var(--ami-sans) !important;
}

body.app-shell *,
body.landing-page *,
body.planner-page * {
  box-sizing: border-box;
}

body.app-shell button,
body.app-shell input,
body.app-shell select,
body.app-shell textarea,
body.landing-page button,
body.landing-page input,
body.landing-page select,
body.landing-page textarea,
body.planner-page button,
body.planner-page input,
body.planner-page select,
body.planner-page textarea {
  font-family: inherit !important;
}

/* ONE PAGE CANVAS + ONE CONTENT WIDTH */
html:not(.dark) body.app-shell,
html:not(.dark) body.landing-page,
html:not(.dark) body.planner-page {
  margin: 0 !important;
  background: var(--ami-page) !important;
  background-image: none !important;
  color: var(--ami-text) !important;
}

html:not(.dark) body.app-shell .page-glow {
  display: none !important;
}

html:not(.dark) body.app-shell #calculatorApp,
html:not(.dark) body.landing-page .calc-hub,
html:not(.dark) body.landing-page .landing-wrap,
html:not(.dark) body.planner-page .planner-shell {
  width: 100% !important;
  max-width: 1120px !important;
  margin: 0 auto !important;
  padding: 24px 28px 64px !important;
}

/* ONE HEADER / BRAND SYSTEM */
html:not(.dark) .ami-site-header {
  margin: 0 0 10px !important;
}

html:not(.dark) body.app-shell .topbar,
html:not(.dark) body.landing-page .hub-top,
html:not(.dark) body.landing-page .landing-topbar,
html:not(.dark) body.planner-page .planner-topbar {
  min-height: 48px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

html:not(.dark) body.app-shell .brand-lockup,
html:not(.dark) body.landing-page .hub-brand,
html:not(.dark) body.landing-page .landing-brand,
html:not(.dark) body.planner-page .planner-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  color: var(--ami-text) !important;
  text-decoration: none !important;
}

html:not(.dark) body.app-shell .brand-mark,
html:not(.dark) body.landing-page .hub-mark,
html:not(.dark) body.landing-page .landing-brand-mark,
html:not(.dark) body.planner-page .planner-brand-mark {
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
  display: grid !important;
  place-items: center !important;
  background: var(--ami-green) !important;
  background-image: none !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  box-shadow: none !important;
}

html:not(.dark) body.app-shell .brand-lockup strong,
html:not(.dark) body.landing-page .hub-brand strong,
html:not(.dark) body.landing-page .landing-brand-copy strong,
html:not(.dark) body.planner-page .planner-brand-copy strong {
  color: var(--ami-text) !important;
  font-size: 16px !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
}

html:not(.dark) body.app-shell .brand-lockup small,
html:not(.dark) body.landing-page .hub-brand small,
html:not(.dark) body.landing-page .landing-brand-copy small,
html:not(.dark) body.planner-page .planner-brand-copy small {
  color: var(--ami-text-3) !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* ONE PRIMARY NAV */
html:not(.dark) .ami-primary-tools {
  display: flex !important;
  gap: 6px !important;
  margin: 18px 0 0 !important;
  padding: 6px !important;
  overflow-x: auto !important;
  background: var(--ami-surface) !important;
  border: 1px solid var(--ami-border) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}

html:not(.dark) .ami-primary-tool {
  min-height: 44px !important;
  padding: 9px 13px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--ami-text-2) !important;
  box-shadow: none !important;
}

html:not(.dark) .ami-primary-tool:hover {
  background: var(--ami-surface-soft) !important;
  transform: none !important;
}

html:not(.dark) .ami-primary-tool.is-active {
  background: var(--ami-surface-accent) !important;
  color: var(--ami-green-text) !important;
}

html:not(.dark) .ami-tool-copy strong {
  color: inherit !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
}

/* ONE HERO — no boxed variant, no gradients, same spacing everywhere */
html:not(.dark) body.app-shell .calculator-hero.simple-hero,
html:not(.dark) body.app-shell .hero-surface,
html:not(.dark) body.landing-page .hub-hero,
html:not(.dark) body.landing-page .landing-hero,
html:not(.dark) body.planner-page .planner-hero,
html:not(.dark) body.planner-page .simple-planner-hero {
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 44px 4px 34px !important;
  display: block !important;
  background: transparent !important;
  background-image: none !important;
  color: var(--ami-text) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html:not(.dark) body.app-shell .hero-surface::after,
html:not(.dark) body.landing-page .landing-hero::after {
  display: none !important;
}

html:not(.dark) body.app-shell .calculator-hero h1,
html:not(.dark) body.app-shell .hero-surface h1,
html:not(.dark) body.landing-page .hub-hero h1,
html:not(.dark) body.landing-page .landing-hero h1,
html:not(.dark) body.planner-page .planner-hero h1,
html:not(.dark) body.planner-page .simple-planner-hero h1 {
  max-width: 920px !important;
  margin: 12px 0 14px !important;
  color: var(--ami-text) !important;
  font-size: clamp(48px, 6vw, 64px) !important;
  line-height: 1.03 !important;
  letter-spacing: -.045em !important;
  font-weight: 900 !important;
  text-wrap: balance;
}

html:not(.dark) body.app-shell .calculator-hero p,
html:not(.dark) body.app-shell .hero-surface p,
html:not(.dark) body.landing-page .hub-hero p,
html:not(.dark) body.landing-page .landing-hero > p:not(:first-child),
html:not(.dark) body.planner-page .planner-hero p,
html:not(.dark) body.planner-page .simple-planner-hero p {
  max-width: 790px !important;
  margin: 0 !important;
  color: var(--ami-text-2) !important;
  font-size: 19px !important;
  line-height: 1.65 !important;
  font-weight: 450 !important;
}

html:not(.dark) body.app-shell .calculator-badges,
html:not(.dark) body.app-shell .eyebrow {
  gap: 8px !important;
}

html:not(.dark) body.app-shell .calculator-badges span,
html:not(.dark) body.app-shell .eyebrow span,
html:not(.dark) body.landing-page .hub-hero > span,
html:not(.dark) body.landing-page .landing-hero p:first-child,
html:not(.dark) body.landing-page .hub-hero .kicker,
html:not(.dark) body.planner-page .planner-kicker {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 30px !important;
  padding: 6px 10px !important;
  background: var(--ami-surface-accent) !important;
  color: var(--ami-green-text) !important;
  border: 1px solid #86efac !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: .035em !important;
  text-transform: uppercase !important;
}

/* remove faint/decorative hero clutter */
html:not(.dark) body.app-shell .example-button,
html:not(.dark) body.app-shell .example-notice,
html:not(.dark) body.app-shell .hero-visual {
  display: none !important;
}

/* HERO CTA: same button and supporting text */
html:not(.dark) body.planner-page .planner-hero-actions {
  margin-top: 24px !important;
  gap: 14px !important;
}

html:not(.dark) body.planner-page .planner-hero-actions a,
html:not(.dark) body.app-shell .primary-cta {
  min-height: 54px !important;
  padding: 0 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--ami-green) !important;
  background-image: none !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  font-size: 16px !important;
  font-weight: 900 !important;
}

html:not(.dark) body.planner-page .planner-hero-actions > span {
  color: var(--ami-text-2) !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
}

/* ONE TWO-COLUMN CALCULATOR LAYOUT */
html:not(.dark) body.app-shell .simple-calculator-grid,
html:not(.dark) body.planner-page .simple-planner-grid,
html:not(.dark) body.planner-page .planner-grid {
  width: 100% !important;
  max-width: none !important;
  margin: 8px 0 0 !important;
  display: grid !important;
  grid-template-columns: minmax(340px, .88fr) minmax(0, 1.12fr) !important;
  gap: 24px !important;
  align-items: start !important;
}

/* ONE CARD SYSTEM */
html:not(.dark) body.app-shell .glass-panel,
html:not(.dark) body.app-shell .simple-match-card,
html:not(.dark) body.app-shell .result-details,
html:not(.dark) body.landing-page .quick-question,
html:not(.dark) body.landing-page .hub-card,
html:not(.dark) body.landing-page .landing-card,
html:not(.dark) body.landing-page .landing-input-panel,
html:not(.dark) body.planner-page .planner-panel,
html:not(.dark) body.planner-page .planner-content section,
html:not(.dark) body.planner-page .planner-breakdown-shell {
  background: var(--ami-surface) !important;
  background-image: none !important;
  color: var(--ami-text) !important;
  border: 1px solid var(--ami-border) !important;
  border-radius: var(--ami-radius) !important;
  box-shadow: var(--ami-shadow) !important;
  backdrop-filter: none !important;
}

html:not(.dark) body.app-shell .simple-input-panel,
html:not(.dark) body.planner-page .simple-planner-inputs,
html:not(.dark) body.planner-page .planner-inputs {
  padding: 26px !important;
}

html:not(.dark) body.landing-page .hub-card,
html:not(.dark) body.landing-page .quick-question {
  padding: 24px !important;
}

/* SECTION TITLES */
html:not(.dark) body.app-shell h2,
html:not(.dark) body.landing-page h2,
html:not(.dark) body.planner-page h2 {
  color: var(--ami-text) !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
}

html:not(.dark) body.app-shell .section-heading h2,
html:not(.dark) body.planner-page .planner-section-head h3 {
  font-size: 22px !important;
}

html:not(.dark) body.app-shell main p,
html:not(.dark) body.app-shell main li,
html:not(.dark) body.landing-page main p,
html:not(.dark) body.landing-page main li,
html:not(.dark) body.planner-page .planner-content p,
html:not(.dark) body.planner-page .planner-content li {
  color: var(--ami-text-2) !important;
  font-size: 17px !important;
  line-height: 1.7 !important;
}

/* INPUTS: same label, same input, same helper text */
html:not(.dark) body.app-shell .field-label,
html:not(.dark) body.landing-page .landing-field,
html:not(.dark) body.planner-page .planner-field {
  color: var(--ami-text-2) !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-weight: 800 !important;
}

html:not(.dark) body.app-shell .input-field,
html:not(.dark) body.landing-page .landing-field input,
html:not(.dark) body.landing-page .landing-field select,
html:not(.dark) body.planner-page .planner-field input,
html:not(.dark) body.planner-page .planner-field select {
  width: 100% !important;
  min-height: 56px !important;
  margin-top: 8px !important;
  padding: 13px 14px !important;
  background: #fff !important;
  color: var(--ami-text) !important;
  border: 1px solid #aebdca !important;
  border-radius: 12px !important;
  font-size: 18px !important;
  font-weight: 650 !important;
}

html:not(.dark) body.app-shell .input-field:focus,
html:not(.dark) body.landing-page .landing-field input:focus,
html:not(.dark) body.landing-page .landing-field select:focus,
html:not(.dark) body.planner-page .planner-field input:focus,
html:not(.dark) body.planner-page .planner-field select:focus {
  border-color: var(--ami-green) !important;
  box-shadow: 0 0 0 3px rgba(5, 150, 105, .14) !important;
}

/* No microscopic copy. 14px absolute floor for UI support text, 15px where it carries meaning. */
html:not(.dark) body.app-shell small,
html:not(.dark) body.landing-page small,
html:not(.dark) body.planner-page small {
  color: var(--ami-text-3) !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

html:not(.dark) body.app-shell .field-help,
html:not(.dark) body.app-shell .active-assumptions,
html:not(.dark) body.app-shell .accuracy-details summary small,
html:not(.dark) body.app-shell .result-details > summary small,
html:not(.dark) body.app-shell .simple-match-card p,
html:not(.dark) body.app-shell .simple-trust-line,
html:not(.dark) body.planner-page .planner-field small,
html:not(.dark) body.planner-page .planner-divider p,
html:not(.dark) body.planner-page .planner-optional summary small,
html:not(.dark) body.planner-page .planner-result-details > summary small,
html:not(.dark) body.planner-page .planner-footer,
html:not(.dark) body.planner-page .simple-trust-line {
  color: var(--ami-text-3) !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
}

html:not(.dark) body.app-shell .accuracy-details summary strong,
html:not(.dark) body.app-shell .result-details > summary strong,
html:not(.dark) body.planner-page .planner-optional summary strong,
html:not(.dark) body.planner-page .planner-result-details > summary strong {
  color: var(--ami-text) !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
}

/* ONE BUTTON SYSTEM */
html:not(.dark) body.app-shell .calculate-button,
html:not(.dark) body.app-shell .primary-cta,
html:not(.dark) body.landing-page .landing-calculate,
html:not(.dark) body.planner-page .planner-submit {
  width: 100% !important;
  min-height: 58px !important;
  padding: 12px 18px !important;
  background: var(--ami-green) !important;
  background-image: none !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  font-size: 17px !important;
  font-weight: 900 !important;
}

html:not(.dark) body.app-shell .calculate-button:hover,
html:not(.dark) body.landing-page .landing-calculate:hover,
html:not(.dark) body.planner-page .planner-submit:hover {
  background: var(--ami-green-dark) !important;
  transform: none !important;
}

/* ONE RESULTS SYSTEM */
html:not(.dark) body.app-shell .result-intro,
html:not(.dark) body.planner-page .planner-results-intro {
  padding: 4px 0 10px !important;
}

html:not(.dark) body.app-shell .result-intro > span,
html:not(.dark) body.planner-page .planner-results-intro > span {
  color: var(--ami-green-text) !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
  letter-spacing: .04em !important;
}

html:not(.dark) body.app-shell .result-intro h2,
html:not(.dark) body.planner-page .planner-results-intro h2 {
  margin: 6px 0 0 !important;
  color: var(--ami-text) !important;
  font-size: 32px !important;
  line-height: 1.12 !important;
}

html:not(.dark) body.planner-page .planner-primary,
html:not(.dark) body.planner-page .core-finder-summary,
html:not(.dark) body.planner-page .s-corp-verdict,
html:not(.dark) body.app-shell .result-hero,
html:not(.dark) body.app-shell .simple-match-card {
  padding: 28px !important;
  background: var(--ami-surface-accent) !important;
  background-image: none !important;
  color: var(--ami-text) !important;
  border: 2px solid #6ee7b7 !important;
  border-radius: var(--ami-radius) !important;
  box-shadow: none !important;
}

html:not(.dark) body.app-shell #heroLabel,
html:not(.dark) body.planner-page .planner-primary .planner-primary-label,
html:not(.dark) body.planner-page .core-finder-summary small,
html:not(.dark) body.planner-page .s-corp-verdict-pill {
  color: var(--ami-green-text) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

html:not(.dark) body.app-shell #heroMainAmount,
html:not(.dark) body.app-shell .result-hero strong,
html:not(.dark) body.app-shell .simple-match-card strong,
html:not(.dark) body.planner-page .planner-primary > strong,
html:not(.dark) body.planner-page .core-finder-summary strong,
html:not(.dark) body.planner-page .s-corp-money-row strong {
  color: var(--ami-text) !important;
  font-size: clamp(46px, 6vw, 66px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.04em !important;
}

html:not(.dark) body.planner-page .planner-primary p,
html:not(.dark) body.planner-page .core-finder-summary span,
html:not(.dark) body.planner-page .s-corp-verdict-copy,
html:not(.dark) body.app-shell .simple-match-card p {
  color: var(--ami-text-2) !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
}

html:not(.dark) body.planner-page .planner-metric {
  padding: 20px !important;
}

html:not(.dark) body.planner-page .planner-metric small {
  color: var(--ami-text-3) !important;
  font-size: 14px !important;
  min-height: 0 !important;
}

html:not(.dark) body.planner-page .planner-metric strong {
  color: var(--ami-text) !important;
  font-size: 25px !important;
}

html:not(.dark) body.planner-page .planner-metric em {
  color: var(--ami-text-3) !important;
  font-size: 14px !important;
}

/* ALL TOOLS uses the SAME hero and typography, then simple cards */
html:not(.dark) body.landing-page .quick-questions {
  gap: 16px !important;
  margin: 6px 0 42px !important;
}

html:not(.dark) body.landing-page .quick-question {
  min-height: 148px !important;
}

html:not(.dark) body.landing-page .quick-question small,
html:not(.dark) body.landing-page .hub-card .tag,
html:not(.dark) body.landing-page .group-kicker,
html:not(.dark) body.landing-page .hub-section-head span {
  color: var(--ami-green-text) !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
  letter-spacing: .03em !important;
}

html:not(.dark) body.landing-page .quick-question strong,
html:not(.dark) body.landing-page .hub-card h3,
html:not(.dark) body.landing-page .hub-card strong {
  color: var(--ami-text) !important;
  font-size: 20px !important;
  line-height: 1.35 !important;
}

html:not(.dark) body.landing-page .quick-question span,
html:not(.dark) body.landing-page .hub-card > strong {
  color: var(--ami-green-dark) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}

html:not(.dark) body.landing-page .hub-card p,
html:not(.dark) body.landing-page .group-head p {
  color: var(--ami-text-2) !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
}

html:not(.dark) body.landing-page .hub-card.is-primary {
  background: var(--ami-surface) !important;
  border: 2px solid #86efac !important;
}

html:not(.dark) body.landing-page .group-head {
  gap: 24px !important;
  padding-bottom: 18px !important;
  border-bottom-color: var(--ami-border) !important;
}

html:not(.dark) body.landing-page .group-head h2,
html:not(.dark) body.landing-page .hub-section-head h2 {
  color: var(--ami-text) !important;
  font-size: 30px !important;
  line-height: 1.15 !important;
}

/* generic specialist landing pages also follow the same readable palette */
html:not(.dark) body.landing-page .landing-card h2,
html:not(.dark) body.landing-page .landing-section-head h2 {
  color: var(--ami-text) !important;
}

html:not(.dark) body.landing-page .landing-card p,
html:not(.dark) body.landing-page .landing-page main p {
  color: var(--ami-text-2) !important;
  font-size: 17px !important;
}

/* Desktop spacing: keep cards away from viewport/borders and from each other. */
@media (min-width: 851px) {
  html:not(.dark) body.app-shell .simple-input-panel,
  html:not(.dark) body.planner-page .simple-planner-inputs,
  html:not(.dark) body.planner-page .planner-inputs {
    position: sticky !important;
    top: 18px !important;
  }
}

/* Tablet/mobile — same system, single column, generous edge padding. */
@media (max-width: 850px) {
  html:not(.dark) body.app-shell #calculatorApp,
  html:not(.dark) body.landing-page .calc-hub,
  html:not(.dark) body.landing-page .landing-wrap,
  html:not(.dark) body.planner-page .planner-shell {
    padding: 18px 18px 48px !important;
  }

  html:not(.dark) body.app-shell .simple-calculator-grid,
  html:not(.dark) body.planner-page .simple-planner-grid,
  html:not(.dark) body.planner-page .planner-grid {
    grid-template-columns: 1fr !important;
  }

  html:not(.dark) body.app-shell .simple-input-panel,
  html:not(.dark) body.planner-page .simple-planner-inputs,
  html:not(.dark) body.planner-page .planner-inputs {
    position: static !important;
  }
}

@media (max-width: 680px) {
  html:not(.dark) body.app-shell #calculatorApp,
  html:not(.dark) body.landing-page .calc-hub,
  html:not(.dark) body.landing-page .landing-wrap,
  html:not(.dark) body.planner-page .planner-shell {
    padding: 14px 14px 40px !important;
  }

  html:not(.dark) body.app-shell .calculator-hero.simple-hero,
  html:not(.dark) body.landing-page .hub-hero,
  html:not(.dark) body.landing-page .landing-hero,
  html:not(.dark) body.planner-page .planner-hero,
  html:not(.dark) body.planner-page .simple-planner-hero {
    padding: 34px 2px 26px !important;
  }

  html:not(.dark) body.app-shell .calculator-hero h1,
  html:not(.dark) body.landing-page .hub-hero h1,
  html:not(.dark) body.landing-page .landing-hero h1,
  html:not(.dark) body.planner-page .planner-hero h1 {
    font-size: clamp(40px, 12vw, 52px) !important;
  }

  html:not(.dark) body.app-shell .calculator-hero p,
  html:not(.dark) body.landing-page .hub-hero p,
  html:not(.dark) body.landing-page .landing-hero > p:not(:first-child),
  html:not(.dark) body.planner-page .planner-hero p {
    font-size: 18px !important;
  }

  html:not(.dark) body.app-shell .simple-input-panel,
  html:not(.dark) body.planner-page .simple-planner-inputs,
  html:not(.dark) body.planner-page .planner-inputs,
  html:not(.dark) body.landing-page .hub-card,
  html:not(.dark) body.landing-page .quick-question {
    padding: 20px !important;
  }
}