/* marriagetaxpenaltycalculator.com
 *
 * One visual direction: a cool, document-like ground with brass as the only
 * interactive accent, and the result's polarity carried by a validated
 * diverging pair (blue = bonus, red = penalty).
 *
 * Three constraints the palette imposes, measured rather than assumed:
 *
 *   1. Brass (--brass) is never a text colour on the page ground. The fill
 *      value reaches only ~3.4:1 on light; --brass-ink (#8A5E12, 5.46:1) is
 *      the text-safe step, and --on-brass (5.12:1 on the fill) is what sits on
 *      top of a brass button.
 *   2. --pos-mark and --neg-mark are never text either. They measure 3.79:1
 *      and 4.24:1 on the light ground, which clears the 3:1 floor for a
 *      graphical object but not the 4.5:1 floor for text. They are the chart's
 *      strokes and fills; the words use --pos-ink (6.34:1) and --neg-ink
 *      (6.09:1).
 *   3. Brass is deliberately neither red nor blue, so no control can ever be
 *      mistaken for a result.
 *
 * The chart's two hues come from a palette validated for colour-vision
 * deficiency: worst-pair CVD separation ΔE 21.6 light / 19.2 dark, well clear
 * of the ≥8 target. Colour is never the sole signal regardless — the sign, the
 * verdict word and the axis labels all say the same thing in text.
 */

/* ---------------------------------------------------------------- tokens -- */

:root {
  color-scheme: light;

  --bg:        #FAFAFC;
  --surface:   #F1F2F6;
  --raised:    #FFFFFF;
  --ink:       #12161F;
  --muted:     #5B6472;
  --rule:      #DFE2E9;
  --grid:      rgb(18 22 31 / 8%);

  --brass:     #B07D1A;
  --brass-ink: #8A5E12;
  --on-brass:  #1A1204;

  --pos-mark:  #e34948;
  --pos-ink:   #B3231F;
  --pos-wash:  rgb(227 73 72 / 14%);
  --neg-mark:  #2a78d6;
  --neg-ink:   #1B5FB0;
  --neg-wash:  rgb(42 120 214 / 14%);
  --zero:      #8A8F98;

  --font-display: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body:    system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Not optional on a page about money: without tabular figures the numbers
     jitter sideways as they update, which reads as instability. */
  --font-num:     ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --maxw: 1040px;
  --radius: 10px;
  --lift: 0 1px 2px rgb(18 22 31 / 5%), 0 8px 24px rgb(18 22 31 / 5%);
}

/* The un-stamped "system" state is the common one, so dark is defined for the
   OS setting as well as for the explicit stamp. The :not() guard lets an
   explicit light choice beat a dark OS. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:        #0E1218;
    --surface:   #171D26;
    --raised:    #1C232E;
    --ink:       #E6EAF1;
    --muted:     #9AA5B4;
    --rule:      #28313D;
    --grid:      rgb(230 234 241 / 10%);
    --brass:     #D9A63C;
    --brass-ink: #D9A63C;
    --on-brass:  #140E02;
    --pos-mark:  #e66767;
    --pos-ink:   #F4837F;
    --pos-wash:  rgb(230 103 103 / 18%);
    --neg-mark:  #3987e5;
    --neg-ink:   #78B4F5;
    --neg-wash:  rgb(57 135 229 / 18%);
    --zero:      #79828F;
    --lift: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px rgb(0 0 0 / 24%);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:        #0E1218;
  --surface:   #171D26;
  --raised:    #1C232E;
  --ink:       #E6EAF1;
  --muted:     #9AA5B4;
  --rule:      #28313D;
  --grid:      rgb(230 234 241 / 10%);
  --brass:     #D9A63C;
  --brass-ink: #D9A63C;
  --on-brass:  #140E02;
  --pos-mark:  #e66767;
  --pos-ink:   #F4837F;
  --pos-wash:  rgb(230 103 103 / 18%);
  --neg-mark:  #3987e5;
  --neg-ink:   #78B4F5;
  --neg-wash:  rgb(57 135 229 / 18%);
  --zero:      #79828F;
  --lift: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px rgb(0 0 0 / 24%);
}

/* ------------------------------------------------------------------ base -- */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 20px;
}

main.wrap {
  padding-top: 28px;
  padding-bottom: 56px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

:is(a, button, input, summary):focus-visible {
  outline: 2px solid var(--brass-ink);
  outline-offset: 2px;
  border-radius: 3px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--raised); color: var(--ink);
  padding: 10px 16px; border: 1px solid var(--rule); border-radius: 8px; z-index: 10;
}
.skip:focus { left: 16px; top: 12px; }

/* ---------------------------------------------------------------- topbar -- */

.topbar {
  border-bottom: 1px solid var(--rule);
  background: var(--raised);
}
.topbar-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display);
  font-size: 16px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--ink); text-decoration: none;
  margin-right: auto;
}
.brand-mark {
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 6px;
  background: var(--brass); color: var(--on-brass);
  font-family: var(--font-num); font-size: 14px; font-weight: 700;
}
.topbar nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 16px;
}
.topbar nav a {
  color: var(--muted); text-decoration: none; font-size: 14px;
}
.topbar nav a:hover { color: var(--ink); }
.topbar nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }

/* Below this the header keeps only the brand and the theme button, on one
   shallow row. The four secondary pages are reachable from the footer on every
   page, so nothing becomes unreachable -- and on a phone the calculator is
   what the visitor came for, not the terms of use. */
@media (max-width: 640px) {
  .topbar nav { display: none; }
  /* nowrap keeps the theme button on the brand's row. With the default wrap,
     a narrow phone (320px, where the full site name does not fit beside the
     button) pushed the button onto a second line and the header grew to
     100px. The brand's text wraps instead, which costs a line of 15px type
     rather than a whole row of chrome. */
  .topbar-inner { padding: 9px 20px; gap: 12px; flex-wrap: nowrap; }
  .brand { font-size: 15px; line-height: 1.25; min-width: 0; }
}

/* Icon-only, sized as a proper 38px tap target rather than shrink-wrapped to
   an 18px glyph. */
.themetoggle {
  flex: none;
  display: grid; place-items: center;
  width: 38px; height: 38px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 999px;
  padding: 0; cursor: pointer;
}
.themetoggle:hover { border-color: var(--brass); color: var(--brass-ink); }
.themetoggle svg { display: block; }

/* Show the glyph for the theme the button switches TO. Same three-state
   handling as the colour tokens: the bare rule covers light and the un-stamped
   default, the media query covers a dark OS, and the stamp wins over both. */
.themetoggle .i-sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .themetoggle .i-moon { display: none; }
  :root:not([data-theme="light"]) .themetoggle .i-sun  { display: block; }
}
:root[data-theme="dark"] .themetoggle .i-moon { display: none; }
:root[data-theme="dark"] .themetoggle .i-sun  { display: block; }

/* -------------------------------------------------------------- masthead -- */

.masthead { padding-bottom: 4px; }
.eyebrow {
  font-size: 11px; font-weight: 650; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 6px;
}
h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 4.6vw, 40px);
  line-height: 1.1; letter-spacing: -0.015em;
  margin: 0; text-wrap: balance;
}
.dek {
  margin: 10px 0 0; max-width: 62ch;
  color: var(--muted); font-size: 15.5px;
}
.dek em { font-style: normal; color: var(--ink); font-weight: 600; }

/* ----------------------------------------------------------------- cards -- */

.card {
  background: var(--raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--lift);
  padding: 22px;
}
.cardhead {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
}
h2 {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 600; letter-spacing: -0.01em; margin: 0;
}
.hint { margin: 0; color: var(--muted); font-size: 13.5px; max-width: 60ch; }

.prose { font-size: 15.5px; }
.prose h2 { margin: 26px 0 10px; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose ul { margin: 0 0 12px; max-width: 68ch; }
.prose ul { padding-left: 20px; }
.prose li { margin-bottom: 7px; }
.prose a { color: var(--brass-ink); }

.cta {
  display: inline-block; background: var(--brass); color: var(--on-brass);
  padding: 9px 18px; border-radius: 8px; text-decoration: none; font-weight: 650;
}

/* -------------------------------------------------------------- controls -- */

.fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
}
label.field { display: flex; flex-direction: column; gap: 6px; }
.field > span {
  font-size: 12px; font-weight: 650; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--muted);
}
.moneyinput {
  display: flex; align-items: center; gap: 2px;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 8px; padding: 0 12px;
}
.moneyinput:focus-within { border-color: var(--brass); }
.moneyinput s { color: var(--muted); text-decoration: none; }
.moneyinput input {
  width: 100%; border: 0; background: none; color: inherit;
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: 18px; padding: 10px 0;
}
.moneyinput input:focus { outline: none; }
.moneyinput input::-webkit-outer-spin-button,
.moneyinput input::-webkit-inner-spin-button { appearance: none; margin: 0; }
.moneyinput input[type=number] { -moz-appearance: textfield; }
.moneyinput.invalid { border-color: var(--pos-ink); }

/* The children control is a select, but it sits in the same row as the money
   fields and has to match their height and weight exactly or the row reads as
   broken. Appearance is stripped and the chevron drawn as a background so the
   box is ours rather than the platform's. */
.selectinput { padding: 0; position: relative; }
.selectinput select {
  appearance: none;
  width: 100%;
  border: 0;
  background: none;
  color: inherit;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 18px;
  padding: 10px 34px 10px 12px;
  cursor: pointer;
}
.selectinput select:focus { outline: none; }
.selectinput::after {
  content: "";
  position: absolute; right: 13px; top: 50%; width: 9px; height: 9px;
  transform: translateY(-70%) rotate(45deg);
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  pointer-events: none;
}

.fielderror {
  margin: 14px 0 0; color: var(--pos-ink); font-size: 14px; font-weight: 500;
}

.splitrow { margin-top: 22px; }
.splitlabel {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; font-size: 12px; font-weight: 650; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
}
.splitlabel b {
  color: var(--ink); font-weight: 650; letter-spacing: 0;
  text-transform: none; font-size: 13.5px;
}

input[type=range] {
  -webkit-appearance: none; appearance: none;
  width: 100%; background: none; margin: 0; height: 26px; cursor: pointer;
}
input[type=range]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px; background: var(--surface); border: 1px solid var(--rule);
}
input[type=range]::-moz-range-track {
  height: 6px; border-radius: 999px; background: var(--surface); border: 1px solid var(--rule);
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; margin-top: -8px; border-radius: 50%;
  background: var(--brass); border: 2px solid var(--raised); box-shadow: 0 0 0 1px var(--brass);
}
input[type=range]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--brass); border: 2px solid var(--raised); box-shadow: 0 0 0 1px var(--brass);
}
.ticks {
  display: flex; justify-content: space-between;
  font-size: 11.5px; color: var(--muted); margin-top: 2px;
}

.presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.presets span { font-size: 12px; color: var(--muted); align-self: center; margin-right: 2px; }
.chip {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 999px;
  color: var(--ink); font: inherit; font-size: 13px; padding: 5px 12px; cursor: pointer;
}
.chip:hover { border-color: var(--brass); }

/* --------------------------------------------------------------- verdict -- */

.verdict { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 26px; }
@media (max-width: 720px) { .verdict { grid-template-columns: 1fr; gap: 20px; } }

.tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  padding: 4px 11px; border-radius: 999px; border: 1px solid currentColor;
}
.tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.tag.penalty { color: var(--pos-ink); }
.tag.bonus   { color: var(--neg-ink); }
.tag.none    { color: var(--muted); }

.hero {
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: clamp(42px, 8.5vw, 68px); line-height: 1;
  font-weight: 600; letter-spacing: -0.03em; margin: 14px 0 4px;
}
.hero.penalty { color: var(--pos-ink); }
.hero.bonus   { color: var(--neg-ink); }
.hero.none    { color: var(--ink); }
.heroline { margin: 8px 0 0; max-width: 46ch; }

.ledger { border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; align-self: start; margin: 0; }
.ledger div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 11px 14px; border-bottom: 1px solid var(--rule); font-size: 14.5px;
}
.ledger div:last-child { border-bottom: 0; background: var(--surface); font-weight: 650; }
.ledger dt { color: var(--muted); margin: 0; }
.ledger dd { margin: 0; }
.ledger small { display: block; color: var(--muted); font-weight: 400; font-size: 12px; }
.ledger dd.penalty { color: var(--pos-ink); }
.ledger dd.bonus   { color: var(--neg-ink); }

/* ----------------------------------------------------------------- chart -- */

.segmented {
  display: inline-flex; background: var(--surface);
  border: 1px solid var(--rule); border-radius: 999px; padding: 3px;
}
.segmented button {
  border: 0; background: none; color: var(--muted);
  font: inherit; font-size: 13px; padding: 5px 13px; border-radius: 999px; cursor: pointer;
}
.segmented button[aria-pressed="true"] { background: var(--brass); color: var(--on-brass); font-weight: 600; }

.plotwrap { position: relative; }
svg#plot { display: block; width: 100%; height: auto; touch-action: pan-y; }
svg#plot text { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

.tip {
  position: absolute; pointer-events: none; opacity: 0; transition: opacity .1s;
  background: var(--raised); border: 1px solid var(--rule); border-radius: 8px;
  box-shadow: var(--lift); padding: 8px 11px; font-size: 13px; line-height: 1.4;
  white-space: nowrap; transform: translate(-50%, -100%); z-index: 3;
}
.tip b { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

.caption { margin: 12px 0 0; color: var(--muted); font-size: 13px; }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: -1px; margin: 0 3px 0 8px; }
.swatch.pos { background: var(--pos-mark); }
.swatch.neg { background: var(--neg-mark); }

details { margin-top: 14px; }
summary { cursor: pointer; font-size: 13.5px; color: var(--brass-ink); }

.tablescroll { overflow-x: auto; margin-top: 12px; }
table { border-collapse: collapse; font-size: 13.5px; width: 100%; }
caption { text-align: left; color: var(--muted); font-size: 13px; padding-bottom: 8px; }
th, td { text-align: right; padding: 6px 12px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
th:first-child, td:first-child, th:last-child, td:last-child { text-align: left; }
th {
  color: var(--muted); font-weight: 650; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.05em;
}
td.num, table.brackets td:nth-child(2), table.brackets td:nth-child(3) {
  font-family: var(--font-num); font-variant-numeric: tabular-nums; text-align: right;
}
.yes { color: var(--muted); }
.no  { color: var(--pos-ink); font-weight: 650; }

/* ------------------------------------------------------------ mechanisms -- */

.mechs { display: flex; flex-direction: column; }
.mech {
  display: grid; grid-template-columns: 122px minmax(0, 1fr);
  gap: 18px; padding: 15px 0; border-top: 1px solid var(--rule); align-items: start;
}
.mech:first-child { border-top: 0; padding-top: 0; }
@media (max-width: 620px) { .mech { grid-template-columns: 1fr; gap: 7px; } }
.state {
  font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 4px; border: 1px solid currentColor; justify-self: start;
}
.state.on   { color: var(--pos-ink); }
.state.good { color: var(--neg-ink); }
.state.off  { color: var(--muted); }
.state.todo { color: var(--brass-ink); }
.mech h3 { margin: 0 0 3px; font-size: 15px; font-weight: 650; }
.mech p  { margin: 0; color: var(--muted); font-size: 14px; max-width: 64ch; }

/* ---------------------------------------------------------------- guides -- */

/* Reading pages are narrower than the calculator. The calculator needs the
   full width for its chart and its two-column verdict; an article does not,
   and at 1040px the prose column filled barely half the card and left the rest
   empty. */
main.reading { max-width: 780px; }



.guidelist { list-style: none; margin: 0; padding: 0; }
.guidelist li { margin-bottom: 10px; }
.guidelist.big li {
  border-top: 1px solid var(--rule);
  padding: 14px 0;
  margin-bottom: 0;
  display: flex; flex-direction: column; gap: 3px;
}
.guidelist.big li:first-child { border-top: 0; padding-top: 0; }
.guidelist.big a {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 600; letter-spacing: -0.005em;
  text-decoration: none; color: var(--ink);
}
.guidelist.big a:hover { color: var(--brass-ink); text-decoration: underline; }
.guidelist.big span { color: var(--muted); font-size: 14.5px; }

.guide ol { margin: 0 0 12px; padding-left: 22px; }
.guide ol li { margin-bottom: 10px; }
.guide hr { border: 0; border-top: 1px solid var(--rule); margin: 26px 0 16px; }
.guidefoot, .note { color: var(--muted); font-size: 14px; }
.note {
  border-left: 3px solid var(--brass);
  padding-left: 12px;
  margin-top: 20px;
}
.eyebrow a { color: var(--muted); }

/* ------------------------------------------------------------------- faq -- */

.faq-item { border-top: 1px solid var(--rule); padding: 16px 0 4px; }
.faq-item:first-of-type { border-top: 0; }
.faq h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 17px; font-weight: 600; letter-spacing: -0.005em;
}
.faq p { color: var(--muted); }

/* ---------------------------------------------------------------- footer -- */

.sitefoot { border-top: 1px solid var(--rule); background: var(--raised); }
.footinner { padding-top: 22px; padding-bottom: 32px; color: var(--muted); font-size: 13px; }
.footinner p { margin: 0 0 10px; max-width: 78ch; }
.footinner a { color: var(--brass-ink); }
.disclaim { border-left: 3px solid var(--brass); padding-left: 12px; color: var(--ink); }
.footnav a { margin-right: 2px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}