/* Layout: white page with a bento grid of tinted tiles, each tile one job. Legal and account pages reuse the same tokens. */
:root {
  --bg: #ffffff; --fg: #1B1B3A; --muted: #5C5F7A; --line: #E4E3F3; --soft: #F4F3FD;
  --brand: #5B50E0; --brand-dark: #3B32B8; --brand-tint: #EDEBFD; --mark: #F59E0B;
  --bad: #DC3A3A; --bad-tint: #FDECEC; --good: #5B50E0; --good-tint: #EDEBFD;
  --display: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --num: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 17px/1.6 var(--body);
  padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px)); }
.wrap { max-width: 1080px; margin: 0 auto; }
nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 18px; }
.brand { display: flex; align-items: center; gap: 10px; font: 700 1.45rem var(--display); letter-spacing: -.01em; color: var(--brand-dark); text-decoration: none; }
.brand svg { flex: none; }
nav .links { display: flex; gap: 20px; font-weight: 600; font-size: .95rem; }
nav .links a { color: var(--fg); text-decoration: none; }
nav .links a:hover { color: var(--brand); }
@media (max-width: 520px) { nav .links a:not(:last-child) { display: none; } }

.eyebrow { display: inline-flex; gap: 8px; align-items: center; font-size: .85rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); }
.eyebrow::before { content: ""; width: 28px; height: 3px; background: var(--brand); border-radius: 2px; }
h1 { font: 600 clamp(2.2rem, 6vw, 3.6rem)/1.08 var(--display); letter-spacing: -.02em; margin: 14px 0 16px; max-width: 16ch; text-wrap: balance; }
.hl { background: linear-gradient(transparent 62%, var(--mark) 62% 92%, transparent 92%); padding-inline: 2px; }
h2 { font: 600 clamp(1.5rem, 3.6vw, 2.1rem)/1.2 var(--display); letter-spacing: -.01em; margin: 0 0 10px; text-wrap: balance; }
h3 { font: 600 1.15rem var(--display); margin: 0 0 6px; }
.lede { font-size: 1.2rem; color: var(--muted); max-width: 54ch; margin: 0 0 32px; }
.hero-pad { padding-block: 28px 8px; }

.card { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 24px; box-shadow: 0 1px 2px rgba(27,27,58,.04), 0 12px 32px -12px rgba(27,27,58,.12); }
.card > h2 { font-size: 1.3rem; margin-bottom: 16px; }
.shift { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
@media (max-width: 480px) { .shift { grid-template-columns: minmax(0, 1fr); } .card { padding: 18px; } }
.tile .shift:last-of-type { border-bottom: 0; }
label { display: flex; flex-direction: column; gap: 6px; font-size: .88rem; font-weight: 600; color: var(--muted); min-width: 0; }
label.check { flex-direction: row; align-items: center; gap: 10px; color: var(--fg); font-size: 1rem; }
input, select, textarea, button { font: inherit; color: var(--fg); background: #fff; border: 1.5px solid var(--line); border-radius: 12px; padding: 11px 13px; min-height: 48px; min-width: 0; }
input:hover, select:hover, textarea:hover { border-color: #B8B6D6; }
input[type=checkbox] { appearance: none; -webkit-appearance: none; flex: none; width: 22px; height: 22px; min-height: 0; margin: 0; padding: 0; background: #fff; border: 1.5px solid #9A98BE; border-radius: 6px; display: inline-grid; place-content: center; cursor: pointer; }
input[type=checkbox]::after { content: ""; width: 11px; height: 6px; border: solid #fff; border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
input[type=checkbox]:checked { background: var(--brand-dark); border-color: var(--brand-dark); }
input[type=checkbox]:checked::after { opacity: 1; }
input[type=checkbox]:focus-visible { outline: 3px solid var(--mark); outline-offset: 2px; }
button { cursor: pointer; font-weight: 600; }
button:hover { border-color: var(--brand); color: var(--brand); }
button.primary { background: var(--brand); color: #fff; border-color: var(--brand); }
button.primary:hover { background: var(--brand-dark); color: #fff; }
button.link { border: 0; min-height: 0; padding: 4px 0; background: none; color: var(--muted); text-decoration: underline; justify-self: start; font-weight: 600; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.stack { display: grid; gap: 14px; }
.note { color: var(--muted); font-size: .92rem; margin: 0; }

.chip { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; padding: 8px 14px; border-radius: 999px; font-size: .95rem; width: fit-content; }
.chip.bad { background: var(--bad-tint); color: var(--bad); }
.chip.good { background: var(--good-tint); color: var(--good); }
.chip.neutral { background: var(--soft); color: var(--muted); }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums lining-nums; font-size: .95rem; }
th, td { padding: 9px 0; border-bottom: 1px dashed var(--line); text-align: left; vertical-align: top; }
th { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
td:last-child, th:last-child { text-align: right; }
tfoot td { font-weight: 700; border-bottom: 0; }
.scroll { overflow-x: auto; }
textarea { width: 100%; resize: vertical; font-size: .95rem; line-height: 1.5; }
.row { display: flex; flex-wrap: wrap; gap: 10px; }
.row > button { flex: 1 1 150px; }

.tag { display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: var(--mark); color: var(--fg); }
.kpis { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 4px; }
.rates td:first-child, .rates th:first-child { padding-right: 12px; }
footer { margin: 72px 0 48px; padding-top: 24px; border-top: 1px solid var(--line); font-size: .88rem; color: var(--muted); }
a { color: var(--brand); }
@media (prefers-reduced-motion: no-preference) { button, input, select { transition: border-color .15s, background-color .15s; } }

/* Bento grid */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; margin-top: 8px; }
.tile { border-radius: 28px; padding: clamp(20px, 3vw, 32px); min-width: 0; background: var(--soft); }
.tile > h2 { font-size: 1.35rem; margin-bottom: 14px; }
.tile.white { background: #fff; border: 1.5px solid var(--line); }
.tile.mint { background: var(--brand-tint); }
.tile.ice { background: var(--brand-tint); }
.tile.ice .note { color: var(--muted); }
.tile.dark { background: var(--brand-dark); color: #fff; }
.tile.dark .lede, .tile.dark .note { color: rgba(255, 255, 255, .78); }
.tile.dark h1 { color: #fff; max-width: 15ch; margin-top: 18px; }
.tile.dark .eyebrow { color: var(--mark); }
.tile.dark .eyebrow::before { background: var(--mark); }
.tile.dark .hl { background: none; color: var(--mark); }
.s3 { grid-column: span 3; } .s4 { grid-column: span 4; } .s5 { grid-column: span 5; } .s6 { grid-column: span 6; }
.s7 { grid-column: span 7; } .s8 { grid-column: span 8; } .s12 { grid-column: 1 / -1; }
.bento-head { grid-column: 1 / -1; padding: 40px 4px 4px; }
.bento-head h2 { margin: 0 0 6px; }
.bento-head p { margin: 0; color: var(--muted); max-width: 60ch; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 12px; }
.pills span { font-size: .85rem; font-weight: 700; padding: 6px 12px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, .35); }
.hero-tile { display: flex; flex-direction: column; min-height: 340px; }
.hero-tile .lede { margin-bottom: 20px; }
.amount-tile { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.amount-tile small { display: flex; justify-content: space-between; gap: 8px; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.amount-n { font: 600 clamp(2.8rem, 7.5vw, 4.6rem)/1 var(--num); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.025em; }
.amount-tile .chip { background: #fff; }
.amount-n { color: var(--brand-dark); }
.step { background: var(--soft); }
.step.t1 { background: var(--brand-tint); } .step.t2 { background: #FEF3D6; } .step.t3 { background: #EEEDFA; } .step.t4 { background: var(--soft); }
.step .n { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--brand-dark); color: #fff; font: 600 1rem var(--num); margin-bottom: 14px; }
.step p { margin: 0; color: var(--muted); font-size: .95rem; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.fact { background: #fff; border-radius: 18px; padding: 16px; }
.fact b { display: block; font: 600 1.8rem/1.1 var(--num); color: var(--brand-dark); font-variant-numeric: tabular-nums; }
.fact span { font-size: .88rem; color: var(--muted); }
.tile .tag { margin-bottom: 12px; }
.employer-tile:has(+ [hidden]) { grid-column: 1 / -1; }
.tile table td, .tile table th { border-bottom-color: rgba(27, 27, 58, .14); }
@media (max-width: 860px) {
  .s3 { grid-column: span 6; }
  .s4, .s5, .s6, .s7, .s8 { grid-column: 1 / -1; }
  .hero-tile { min-height: 0; }
}
@media (max-width: 520px) { .s3 { grid-column: 1 / -1; } .facts { grid-template-columns: 1fr; } .tile { border-radius: 22px; } }

/* Calculator form */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: end; margin-bottom: 8px; }
@media (max-width: 560px) { .grid2 { grid-template-columns: minmax(0, 1fr); } }
.tile .note { margin: 6px 0 14px; }
fieldset.seg { display: flex; flex-wrap: wrap; gap: 0; border: 1.5px solid var(--line); border-radius: 12px; padding: 0; margin: 4px 0 0; overflow: hidden; min-width: 0; }
fieldset.seg legend { float: left; width: 100%; padding: 0; font-size: .88rem; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
fieldset.seg { border: 0; overflow: visible; }
fieldset.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
fieldset.seg label { flex: 1 1 0; min-width: 90px; text-align: center; justify-content: center; padding: 11px 10px; min-height: 46px; border: 1.5px solid var(--line); margin-left: -1.5px; color: var(--fg); font-size: .95rem; cursor: pointer; background: #fff; }
fieldset.seg label:first-of-type { border-radius: 12px 0 0 12px; margin-left: 0; }
fieldset.seg label:last-of-type { border-radius: 0 12px 12px 0; }
fieldset.seg input:checked + label { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; position: relative; z-index: 1; }
fieldset.seg input:focus-visible + label { outline: 3px solid var(--brand); outline-offset: 2px; z-index: 2; }
.dow { font-size: .8rem; font-weight: 500; color: var(--brand); min-height: 1.2em; }

/* Summary tile */
.summary-tile { display: flex; flex-direction: column; gap: 14px; }
.summary-tile small { display: flex; justify-content: space-between; gap: 8px; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-dark); }
.alert { border-radius: 16px; padding: 14px 16px; display: grid; gap: 4px; }
.alert.bad { background: var(--bad); color: #fff; }
.alert b { font: 600 1.1rem var(--num); }
.alert span { font-size: .92rem; opacity: .95; }
dl.sum { margin: 0; display: grid; }
dl.sum > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid rgba(27, 27, 58, .12); font-variant-numeric: tabular-nums lining-nums; }
dl.sum dt { color: var(--muted); font-size: .93rem; }
dl.sum dd { margin: 0; font-weight: 600; white-space: nowrap; }
dl.sum .sub dt { padding-left: 14px; font-size: .85rem; }
dl.sum .sub dd { font-weight: 500; font-size: .9rem; }
dl.sum .total { border-bottom: 2px solid var(--brand-dark); }
dl.sum .total dt { color: var(--fg); font-weight: 600; }

/* Report preview */
dialog { border: 0; border-radius: 22px; padding: 22px; width: min(720px, calc(100vw - 32px)); max-height: 88vh; overflow: auto; color: var(--fg); background: #fff; box-shadow: 0 24px 80px rgba(27, 27, 58, .35); }
dialog::backdrop { background: rgba(27, 27, 58, .55); }
.dlg-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; font: 600 1.2rem var(--display); }
.report h3 { font: 600 1.5rem var(--display); margin: 0 0 4px; }
.report h4 { font: 600 1.05rem var(--display); margin: 16px 0 6px; }
.report p { margin: 2px 0; font-size: .9rem; color: var(--muted); }
.report p.b { color: var(--fg); font-weight: 600; }
.report hr { border: 0; border-top: 1px solid var(--line); margin: 8px 0; }
.report .rr { display: grid; grid-template-columns: 1fr; font-size: .88rem; font-variant-numeric: tabular-nums lining-nums; padding: 2px 0; }
.report .rr { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.report .rr .r { text-align: right; }
.report .rr.b { font-weight: 600; }
.report { overflow-x: auto; }
button:disabled { opacity: .5; cursor: not-allowed; }

/* Calculator first: compact intro, step headings, shift cards, live bar */
.intro-tile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 32px; padding-block: 22px; }
.intro-tile h1 { font-size: clamp(1.7rem, 4.5vw, 2.5rem); margin: 6px 0 0; max-width: none; }
.intro-tile .lede { font-size: 1rem; margin: 0; max-width: 46ch; }
.form-tile { align-self: start; }
.step-h { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.step-h h2 { margin: 0 !important; font-size: 1.3rem; }
.step-h .n { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--brand-dark); color: #fff; font: 600 .95rem var(--num); }
button.wide { width: 100%; }
.shift { display: block; padding: 16px; margin-bottom: 12px; border: 1.5px solid var(--line); border-radius: 18px; background: var(--soft); }
.shift:last-of-type { border-bottom: 1.5px solid var(--line); margin-bottom: 12px; }
.shift-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.shift-h b { font: 600 1.05rem var(--display); }
.shift-h .dow { margin-right: auto; }
.shift-h .pay { font: 600 1.05rem var(--num); font-variant-numeric: tabular-nums lining-nums; color: var(--brand-dark); }
.shift-f { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 720px) { .shift-f { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
details.more { margin-top: 12px; }
details.more summary { cursor: pointer; font-weight: 600; font-size: .92rem; color: var(--brand); padding: 6px 0; }
details.more .grid2 { margin-top: 8px; }
details.more .check { margin-top: 8px; }
.shift-a { display: flex; gap: 18px; margin-top: 6px; }
.livebar { display: none; }
@media (max-width: 860px) {
  .livebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 12px max(16px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    background: var(--brand-dark); color: #fff; text-decoration: none; font: 600 .98rem var(--num); font-variant-numeric: tabular-nums lining-nums; box-shadow: 0 -6px 24px rgba(27, 27, 58, .25); }
  .livebar[hidden] { display: none; }
  .livebar span:nth-child(2) { margin-right: auto; color: var(--mark); }
  .livebar.bad span:nth-child(2) { color: #ffb4ae; }
  .livebar b { text-decoration: underline; font-weight: 600; }
  .wrap { padding-bottom: 64px; }
}

/* Take-home calculator and mode tabs */
.sr, fieldset.seg legend.sr { position: absolute; float: none; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
fieldset.tabs { grid-column: 1 / -1; margin: 0; }
fieldset.tabs label { font: 600 1.05rem var(--display); min-height: 54px; border-radius: 0; }
fieldset.tabs label:first-of-type { border-radius: 16px 0 0 16px; }
fieldset.tabs label:last-of-type { border-radius: 0 16px 16px 0; }
input.big { font: 600 1.4rem var(--num); font-variant-numeric: tabular-nums lining-nums; min-height: 56px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chip-btn { min-height: 38px; padding: 6px 14px; border-radius: 999px; font-size: .9rem; font-weight: 600; border-color: var(--line); }
.chip-btn.on { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.bar { display: flex; height: 34px; border-radius: 10px; overflow: hidden; background: rgba(27, 27, 58, .1); font: 600 .85rem var(--num); }
.bar span { display: grid; align-items: center; padding-inline: 10px; white-space: nowrap; }
.bar .net { background: var(--brand-dark); color: #fff; }
.bar .tax { background: var(--mark); color: var(--fg); justify-items: center; padding-inline: 4px; }
#takeTile .link { color: var(--brand-dark); font-weight: 600; }
#dayTile .link { color: var(--brand-dark); font-weight: 600; }

/* Goal cards: the first choice a visitor makes */
fieldset.goals { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
fieldset.goals legend { font: 600 .8rem var(--num); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; padding: 0; float: none; width: auto; grid-column: 1 / -1; }
fieldset.goals { position: relative; }
fieldset.goals input { position: absolute; opacity: 0; pointer-events: none; }
fieldset.goals label { display: grid; gap: 4px; padding: 16px 18px; border: 1.5px solid var(--line); border-radius: 16px; background: #fff; cursor: pointer; min-height: 88px; }
fieldset.goals label b { font: 600 1.1rem var(--display); color: var(--brand-dark); }
fieldset.goals label span { font-size: .9rem; color: var(--muted); font-weight: 400; }
fieldset.goals input:checked + label { border-color: var(--brand-dark); background: var(--brand-tint); box-shadow: inset 0 0 0 1px var(--brand-dark); }
fieldset.goals input:focus-visible + label { outline: 3px solid var(--mark); outline-offset: 2px; }
@media (max-width: 900px) { fieldset.goals { grid-template-columns: 1fr; } }
h3.sum-h { font: 600 .75rem var(--num); letter-spacing: .08em; text-transform: uppercase; color: var(--brand); margin: 16px 0 2px; }
dl.sum .warn dd { color: #9a3412; }
details.more.changed > summary::after { content: "changed"; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--mark); color: var(--fg); font-size: .72rem; }
details.more select, details.more input[type=number] { margin-top: 4px; }
details.more > label { display: block; margin-top: 10px; }

/* Charts */
.charts { display: grid; gap: 18px; margin-top: 18px; }
.chart h3 { font: 600 .75rem var(--num); letter-spacing: .08em; text-transform: uppercase; color: var(--brand); margin: 0 0 8px; }
.donut-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.donut-wrap svg { width: 150px; height: 150px; flex: none; }
.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .9rem; flex: 1; min-width: 160px; }
.legend li { display: flex; align-items: center; gap: 8px; }
.legend i { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.legend b { margin-left: auto; font-variant-numeric: tabular-nums; }
.stack { display: flex; height: 30px; border-radius: 8px; overflow: hidden; background: rgba(27,27,58,.1); gap: 2px; }
.stack span { display: block; min-width: 2px; }
.stack-key { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: .82rem; color: var(--muted); }
.stack-key i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; }

/* Result tabs, slider, story, scenarios */
.story { margin: 12px 0 0; font-size: 1.02rem; line-height: 1.5; color: var(--fg); }
.story b { font-weight: 700; color: var(--brand-dark); }
.rtabs { display: flex; gap: 4px; margin: 18px 0 14px; padding: 4px; background: rgba(27,27,58,.08); border-radius: 12px; }
.rtabs button { flex: 1; min-height: 40px; border: 0; border-radius: 9px; background: transparent; font: 600 .88rem var(--num); color: var(--muted); cursor: pointer; padding: 6px 4px; }
.rtabs button[aria-selected=true] { background: #fff; color: var(--brand-dark); box-shadow: 0 1px 3px rgba(27,27,58,.18); }
.rtabs button:focus-visible { outline: 3px solid var(--mark); outline-offset: 1px; }
.tpanel[hidden] { display: none; }
input.slider { appearance: none; -webkit-appearance: none; width: 100%; min-height: 0; height: 8px; padding: 0; border: 0; border-radius: 99px; margin: 14px 0 6px; cursor: pointer;
  background: linear-gradient(to right, var(--brand-dark) var(--fill, 30%), #DAD9EE var(--fill, 30%)); }
input.slider::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: var(--mark); border: 3px solid var(--brand-dark); box-shadow: 0 2px 6px rgba(27,27,58,.3); }
input.slider::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--mark); border: 3px solid var(--brand-dark); }
input.slider:focus-visible { outline: 3px solid var(--mark); outline-offset: 4px; }
.donut-wrap text.dn { font: 700 22px var(--num); fill: var(--brand-dark); }
.donut-wrap text.dl { font: 500 11px var(--num); fill: var(--muted); }
.whatif-in { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.whatif-in label { font-size: .82rem; }
.scen { display: grid; gap: 10px; margin-top: 12px; }
.sc { background: #fff; border-radius: 14px; padding: 14px 16px; border: 1px solid var(--line); }
.sc h4 { margin: 0; font: 600 .8rem var(--num); letter-spacing: .05em; text-transform: uppercase; color: var(--brand); }
.sc-n { font: 700 1.9rem var(--num); color: var(--brand-dark); font-variant-numeric: tabular-nums lining-nums; }
.sc em { font-style: normal; font-weight: 600; font-size: .88rem; color: var(--muted); }
.sc em.up { color: #166534; } .sc em.down { color: #9a3412; }
.sc dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 0; }
.sc dl div { display: grid; } .sc dt { font-size: .78rem; color: var(--muted); } .sc dd { margin: 0; font-weight: 600; }
.sc p { margin: 10px 0 0; font-size: .88rem; color: var(--muted); }
.sc p b { color: var(--brand-dark); }
@media (prefers-reduced-motion: no-preference) { .bar span, .stack span { transition: width .35s ease; } }

.ftb-card { margin: 12px 0 0; padding: 12px 14px; background: #fff; border-radius: 12px; border-left: 4px solid var(--mark); font-size: .92rem; line-height: 1.45; }
.ftb-card:empty { display: none; }
.ftb-card a { color: var(--brand); font-weight: 600; }

/* ---- Refresh: jade and sun on white, with one deep-green result panel */
:root { --coral: #DC3A3A; --sky: #5B7FF0; --deep: #3B32B8; }
h1, h2, h3 { font-weight: 700; letter-spacing: -.025em; }
h1 { font-size: clamp(2.4rem, 7vw, 4.4rem); line-height: 1.02; letter-spacing: -.035em; max-width: 14ch; margin: 8px 0 16px; }
.tile { border-radius: 24px; }
.tile.white { border-color: var(--line); }
.hero { grid-column: 1 / -1; padding: clamp(12px, 3vw, 32px) 4px 8px; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 12px 40px; align-items: end; }
.hero .lede { margin: 0 0 8px; font-size: 1.15rem; max-width: 40ch; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 12px 0 0; padding: 0; list-style: none; font-size: .92rem; font-weight: 600; color: var(--muted); }
.hero-proof li::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); margin-right: 8px; }
@media (max-width: 760px) { .hero { grid-template-columns: 1fr; } }
button.primary { background: var(--brand); border-color: var(--brand); }
button.primary:hover { background: var(--deep); border-color: var(--deep); }

.ftb-card { color: var(--fg); }
.ftb-card a { color: var(--brand); }
.sc { color: var(--fg); }
.sc em.up { color: #5B50E0; }
input.slider { background: linear-gradient(to right, var(--brand) var(--fill, 30%), #DAD9EE var(--fill, 30%)); }
input.slider::-webkit-slider-thumb { border-color: var(--deep); }
fieldset.goals label b { color: var(--deep); font-size: 1.15rem; }
fieldset.goals label { border-radius: 20px; padding: 18px 20px; }
fieldset.goals input:checked + label { background: var(--brand-tint); border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
fieldset.seg input:checked + label, .chip-btn.on { background: var(--deep); border-color: var(--deep); }
.step .n { background: var(--deep); }
.step.t2 { background: #FEF3D6; }

/* Roster check */
.roster { padding: clamp(20px, 3vw, 32px); }
.roster-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 28px; }
@media (max-width: 860px) { .roster-grid { grid-template-columns: 1fr; } }
.roster-in { display: grid; gap: 14px; align-content: start; }
.roster-in .note { margin: 0; }
.roster-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.filebtn { flex-direction: row; display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; border: 1.5px dashed var(--brand); border-radius: 12px; color: var(--brand); font-weight: 700; cursor: pointer; background: #fff; position: relative; }
.filebtn:hover { background: var(--brand-tint); }
.filebtn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; min-height: 0; }
.filebtn:focus-within { outline: 3px solid var(--mark); outline-offset: 2px; }
textarea.mono { font: 500 .88rem/1.55 ui-monospace, "SF Mono", Menlo, Consolas, monospace; background: #fff; white-space: pre; overflow: auto; }
.roster-out { background: #fff; border-radius: 20px; padding: 18px; display: grid; gap: 14px; align-content: start; border: 1.5px solid var(--line); min-width: 0; }
.roster-empty { padding: 28px 8px; text-align: center; color: var(--muted); }
.roster-empty b { display: block; color: var(--fg); font: 700 1.2rem var(--display); margin-bottom: 4px; }
.roster-total { display: grid; gap: 2px; padding: 18px 20px; border-radius: 16px; }
.roster-total span { font-weight: 700; font-size: .85rem; }
.roster-total b { font: 800 clamp(2.2rem, 6vw, 3.2rem)/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums lining-nums; }
.roster-total em { font-style: normal; font-size: .95rem; }
.roster-total.bad { background: var(--coral); color: #fff; }
.roster-total.good { background: var(--deep); color: #fff; }
.roster-total.good b { color: #16A34A; }
.people { display: grid; gap: 8px; }
.person { border: 1.5px solid var(--line); border-radius: 16px; background: #fff; }
.person.short { border-color: #F6C3C3; }
.person summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 40px 1fr auto; gap: 4px 12px; align-items: center; padding: 12px 14px; }
.person summary::-webkit-details-marker { display: none; }
.person[open] summary { border-bottom: 1px dashed var(--line); }
.avatar { grid-row: span 2; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-tint); color: var(--brand); font: 700 1.05rem var(--display); }
.person.short .avatar { background: #FDECEC; color: var(--coral); }
.who b, .amts b { display: block; font-weight: 700; }
.who small, .amts small { display: block; color: var(--muted); font-size: .82rem; }
.amts { text-align: right; }
.person.short .amts b { color: var(--coral); }
.meter { grid-column: 2 / -1; height: 6px; border-radius: 99px; background: #E8E7F6; overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--brand); border-radius: 99px; }
.person.short .meter i { background: var(--coral); }
.person .scroll { padding: 4px 14px 12px; }
.person table { font-size: .9rem; }
.person th { font-size: .72rem; }
.pill { display: inline-block; padding: 2px 9px; border-radius: 99px; font-weight: 700; font-size: .78rem; white-space: nowrap; }
.pill.bad { background: #FDECEC; color: var(--coral); }
.pill.good { background: var(--brand-tint); color: var(--brand); }
.roster-skip { margin: 0; }
@media (max-width: 520px) { .person summary { grid-template-columns: 36px 1fr; } .amts { grid-column: 2; text-align: left; } .avatar { width: 36px; height: 36px; } }

/* ---- Dashboard look: indigo, amber, red and green stat cards on soft lavender tiles */
:root { --indigo: #5B50E0; --amber: #F59E0B; --red: #DC3A3A; --green: #15803D; }
body { font-size: 16px; }
h1 { font-weight: 800; letter-spacing: -.04em; }
.tile { box-shadow: none; }
.tile.white { box-shadow: 0 1px 2px rgba(27,27,58,.04), 0 10px 30px -14px rgba(59,50,184,.22); border-color: #ECEBF8; }
#takeTile { background: var(--soft); }
#dayTile { background: var(--soft); }
.kpi4 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kpi { border-radius: 18px; padding: 16px 16px 14px; display: grid; gap: 2px; align-content: center; min-width: 0; }
.kpi span { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .92; }
.kpi b { font: 800 clamp(1.5rem, 4vw, 2rem)/1.1 var(--num); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.02em; }
.kpi small { font-size: .8rem; opacity: .9; }
.kpi.take { grid-column: 1 / -1; background: var(--kt-bg); color: var(--kt-fg); padding: 20px; }
.kpi.take b { font-size: clamp(2.6rem, 8vw, 3.8rem); letter-spacing: -.035em; }
.kpi.take em { font-style: normal; font-size: .75rem; font-weight: 700; opacity: .9; justify-self: end; grid-row: 1; grid-column: 2; }
.kpi.gross { background: var(--kg-bg); color: var(--kg-fg); }
.kpi.tax { background: var(--kx-bg); color: var(--kx-fg); }
.kpi.sup { background: var(--ks-bg); color: var(--ks-fg); grid-column: 1 / -1; }

.tile .bar { background: #E4E3F3; margin-top: 12px; }
.bar .net { background: var(--kt-bg); color: var(--kt-fg); }
.bar .tax { background: var(--kx-bg); color: var(--kx-fg); }
.story { margin-top: 12px; }
.story b { color: var(--indigo); }
.rtabs { background: #E8E7F6; }
.rtabs button[aria-selected=true] { color: var(--indigo); }
#takeTile .chart h3, #takeTile h3.sum-h { color: var(--indigo); }
#dayTile .chart h3, #dayTile h3.sum-h { color: var(--indigo); }
#takeTile .charts, #takeTile dl.sum { background: #fff; border-radius: 18px; padding: 16px; margin-top: 0; }
#dayTile .charts, #dayTile dl.sum { background: #fff; border-radius: 18px; padding: 16px; margin-top: 0; }
#takeTile .tpanel[data-panel=detail] .note, #takeTile .tpanel[data-panel=detail] details { margin-inline: 4px; }
#dayTile .tpanel[data-panel=detail] .note, #dayTile .tpanel[data-panel=detail] details { margin-inline: 4px; }
#takeTile .link { color: var(--indigo); }
#dayTile .link { color: var(--indigo); }
.sc { background: #fff; }
.chart h3, h3.sum-h { color: var(--indigo); }
fieldset.goals label { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; align-items: center; }
fieldset.goals label .ico { grid-row: span 2; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-tint); color: var(--indigo); }
fieldset.goals input:checked + label .ico { background: var(--indigo); color: #fff; }
fieldset.goals label b, fieldset.goals label span:not(.ico) { grid-column: 2; }
.hero-proof li::before { background: var(--indigo); }
.step .n { background: var(--indigo); }
.step.t1, .step.t2, .step.t3, .step.t4 { background: var(--soft); }
.fact b { color: var(--indigo); }
.tag { background: var(--brand-tint); color: var(--indigo); }
/* Roster as a stat dashboard */
.rkpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rkpi { border-radius: 16px; padding: 14px 16px; display: grid; gap: 2px; }
.rkpi span { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .92; }
.rkpi b { font: 800 clamp(1.6rem, 4.5vw, 2.2rem)/1.1 var(--num); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.02em; }
.rkpi small { font-size: .8rem; opacity: .9; }
.rkpi.red { background: var(--red); color: #fff; grid-column: 1 / -1; }
.rkpi.indigo { background: var(--kg-bg); color: var(--kg-fg); }
.rkpi.amber { background: var(--ks-bg); color: var(--ks-fg); }
.rkpi.green { background: var(--kt-bg); color: var(--kt-fg); }
.rkpi.green.all { grid-column: 1 / -1; }
.roster-out { background: var(--soft); border-color: transparent; }
.person { background: #fff; border-color: #ECEBF8; }
.person.short { border-color: #F6C3C3; }
.avatar { background: var(--brand-tint); color: var(--indigo); }
.meter i { background: var(--indigo); }
.pill.good { background: var(--brand-tint); color: var(--indigo); }
.kpi small, .kpi span, .kpi em, .rkpi small, .rkpi span { color: inherit; }
.kpi.take small { opacity: .92; }
#takeTile .donut-wrap { flex-direction: column; align-items: stretch; gap: 12px; }
#dayTile .donut-wrap { flex-direction: column; align-items: stretch; gap: 12px; }
#takeTile .donut-wrap svg { align-self: center; }
#dayTile .donut-wrap svg { align-self: center; }
#takeTile .legend { min-width: 0; }
#dayTile .legend { min-width: 0; }
.kpi small, .rkpi small { text-transform: none; letter-spacing: 0; font-weight: 500; }

/* Calmer default: one indigo family, red only for money owed */
:root {
  --kt-bg: #4B42D6; --kt-fg: #fff;
  --kg-bg: #fff; --kg-fg: #3B32B8;
  --kx-bg: #fff; --kx-fg: #3B32B8;
  --ks-bg: #fff; --ks-fg: #3B32B8;
  --c1: #4B42D6; --c2: #A9A3F2; --c3: #7A70EA; --c4: #D3D1EC; --c5: #2F2890;
  --b1: #E4E3F3; --b2: #C6C2F6; --b3: #9A92F0; --b4: #5B50E0; --b5: #2F2890;
  --cap1: #4B42D6; --cap2: #A9A3F2; --cap3: #E4E3F3;
}
.kpi.gross, .kpi.tax, .kpi.sup { box-shadow: inset 0 0 0 1.5px #E4E3F3; }
.bar .tax { color: #2F2890; }
.kpi.tax small { opacity: .8; }

/* Roster grid */
.roster-head { display: flex; flex-wrap: wrap; gap: 14px 24px; justify-content: space-between; align-items: end; margin-bottom: 14px; }
.roster-head .note { max-width: 62ch; margin: 0; }
.award-pick { min-width: min(100%, 320px); }
.rgrid { background: #fff; border-radius: 18px; border: 1.5px solid var(--line); padding: 6px; }
.rgrid table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 980px; }
.rgrid th { padding: 10px 6px; font-size: .72rem; text-align: left; white-space: nowrap; border-bottom: 1.5px solid var(--line); }
.rgrid td { padding: 6px 4px; border-bottom: 1px solid #F0EFFA; text-align: left; }
.rgrid tr:last-child td { border-bottom: 0; }
.rgrid td:last-child, .rgrid th:last-child { text-align: center; }
.rgrid input:not([type=checkbox]), .rgrid select { width: 100%; min-height: 40px; padding: 7px 9px; font-size: .92rem; border-radius: 10px; border-color: transparent; background: var(--soft); }
.rgrid input:focus, .rgrid select:focus { background: #fff; border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px rgba(91,80,224,.18); }
.rgrid td:nth-child(1) { min-width: 130px; } .rgrid td:nth-child(2) { min-width: 110px; } .rgrid td:nth-child(3) { min-width: 140px; } .rgrid td:nth-child(4) { min-width: 100px; }
.rgrid td:nth-child(5), .rgrid td:nth-child(6), .rgrid td:nth-child(10), .rgrid td:nth-child(11) { min-width: 78px; } .rgrid td:nth-child(7) { min-width: 96px; } .rgrid td:nth-child(9) { min-width: 130px; }
.rgrid td.c { text-align: center; }
.rgrid .rm { min-height: 34px; width: 34px; padding: 0; border-radius: 50%; border: 0; background: transparent; color: var(--muted); font-size: 1.3rem; line-height: 1; }
.rgrid .rm:hover { background: #FDECEC; color: var(--red); }
.roster-actions { margin-top: 12px; }
.roster-out { margin-top: 18px; }
.rgrid { position: relative; } .rgrid th .sr { position: absolute; }
input.slider::-webkit-slider-thumb { background: #fff; border: 3px solid var(--indigo); }
input.slider::-moz-range-thumb { background: #fff; border: 3px solid var(--indigo); }

/* ================= Obsidian: black, ivory and one champagne gold. Quiet, typographic, unhurried. ================= */
:root {
  color-scheme: dark;
  --bg: #070722; --panel: #0D0D36; --panel2: #14144A; --fg: #F3F2FF; --muted: #A9A8D0; --line: rgba(255,255,255,.1); --hair: rgba(13,13,54,.12);
  --gold: #9B8CFF; --gold-lite: #D9D3FF; --gold-dim: #5C4FC9; --red: #FF8A7A; --soft: #0D0D36;
  --brand: #9B8CFF; --brand-dark: #9B8CFF; --brand-tint: rgba(155,140,255,.12); --mark: #9B8CFF; --indigo: #9B8CFF; --deep: #070722; --ink: #070722;
  --serif: "Outfit", system-ui, sans-serif;
  --display: "Outfit", system-ui, sans-serif; --body: "Outfit", system-ui, sans-serif; --num: "Outfit", system-ui, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --kt-bg: transparent; --kt-fg: var(--fg); --kg-bg: transparent; --kg-fg: var(--fg); --kx-bg: transparent; --kx-fg: var(--fg); --ks-bg: transparent; --ks-fg: var(--fg);
  --c1: #9B8CFF; --c2: #4B4F9A; --c3: #D9D3FF; --c4: #2A2A66; --c5: #5C4FC9;
  --b1: #1E1E58; --b2: #34307A; --b3: #5A4FC0; --b4: #9B8CFF; --b5: #E4E0FF; --cap1: #9B8CFF; --cap2: #D9D3FF; --cap3: #24245E;
}
html { background: var(--bg); }
body { background: radial-gradient(1000px 520px at 82% -10%, rgba(109,92,240,.28), transparent 62%), radial-gradient(700px 400px at -5% 40%, rgba(67,56,240,.14), transparent 60%), var(--bg); color: var(--fg); font: 400 17px/1.65 var(--body); }
h1, h2, h3 { font-family: var(--serif); color: var(--fg); }
h1 { font-weight: 800; font-size: clamp(2.4rem, 6vw, 4.2rem); line-height: 1.02; letter-spacing: -.03em; max-width: 14ch; margin: 0; }
h2 { font-weight: 700; font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -.02em; }
h3 { font-weight: 600; }
.tile h2, .roster h2 { font-weight: 700; }
a { color: var(--gold); text-underline-offset: 3px; text-decoration-color: rgba(155,140,255,.4); }
.note, .lede { color: var(--muted); }
label { color: var(--muted); font-weight: 400; font-size: .86rem; }
label.check { color: var(--fg); }
::placeholder { color: #6F6FA0; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Nav */
nav { position: sticky; top: 0; z-index: 20; padding: 18px 4px; background: rgba(7,7,34,.82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.brand { font-family: var(--serif); font-weight: 700; font-size: 1.5rem; letter-spacing: -.02em; color: var(--fg); }

nav .links a { color: var(--fg); font-weight: 400; font-size: .92rem; letter-spacing: .02em; position: relative; text-decoration: none; }
nav .links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
nav .links a:hover { color: var(--gold-lite); } nav .links a:hover::after { transform: scaleX(1); }

/* Hero: no box, just space and a hairline */
.hero { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; padding: clamp(48px, 9vw, 112px) 4px clamp(36px, 5vw, 64px); background: none; border: 0; border-radius: 0; border-bottom: 1px solid var(--line); margin-bottom: 20px; overflow: visible; position: relative; }
.hero::before, .hero::after { display: none; }
.hero h1 { color: var(--fg); }
.hero .lede { color: var(--muted); font-size: 1.12rem; font-weight: 300; max-width: 34ch; margin: 0 0 20px; }
.hero-proof { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.hero-proof li { border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 12px 0; font-size: .92rem; font-weight: 400; color: var(--fg); display: flex; align-items: center; gap: 12px; }
.hero-proof li::before { content: ""; width: 14px; height: 1px; background: var(--gold); margin: 0; border-radius: 0; }
@media (max-width: 760px) { .hero { grid-template-columns: 1fr; } }

/* Tiles: hairline panels */
.tile, .tile.white, .tile.mint, .tile.ice, .tile.step, .step { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: none; color: var(--fg); }
.tile > h2 { margin-bottom: 16px; }
.bento-head h2, .bento-head p { color: var(--fg); } .bento-head p { color: var(--muted); }
.bento-head { padding-top: 72px; }
.step .n { background: transparent; border: 1px solid var(--gold); color: var(--gold); font-family: var(--serif); font-size: 1.2rem; font-weight: 500; }
.step p { color: var(--muted); } .step.t1, .step.t2, .step.t3, .step.t4 { background: var(--panel); }
.fact { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; } .fact b { color: var(--gold-lite); font-family: var(--serif); font-weight: 500; font-size: 2rem; } .fact span { color: var(--muted); }
.tag { background: transparent; border: 1px solid var(--gold); color: var(--gold); text-transform: none; letter-spacing: .02em; font-weight: 400; }

/* Start cards */
fieldset.goals { gap: 14px; }
fieldset.goals label { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; color: var(--fg); padding: 22px 24px; }
fieldset.goals label b { font-family: var(--serif); font-size: 1.2rem; font-weight: 700; color: var(--fg); }
fieldset.goals label span:not(.ico) { color: var(--muted); font-size: .95rem; font-weight: 300; }
fieldset.goals label .ico { background: transparent; color: var(--gold); border: 1px solid var(--line); border-radius: 50%; }
fieldset.goals input:checked + label { background: linear-gradient(180deg, rgba(155,140,255,.10), rgba(155,140,255,.03)); border-color: var(--gold); box-shadow: none; }
fieldset.goals input:checked + label .ico { background: var(--gold); color: #070722; border-color: var(--gold); transform: none; }
fieldset.goals label:hover { transform: translateY(-2px); border-color: rgba(155,140,255,.55); box-shadow: 0 20px 40px -24px rgba(0,0,0,.9); }

/* Inputs and buttons */
input, select, textarea { background: var(--panel2); color: var(--fg); border: 1px solid var(--line); border-radius: 10px; }
input:hover, select:hover, textarea:hover { border-color: rgba(255,255,255,.2); }
input:focus, select:focus, textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(155,140,255,.15); outline: none; }
input.big { font: 300 1.9rem var(--serif); letter-spacing: 0; min-height: 66px; }
select option { background: #14144A; color: var(--fg); }
input[type=checkbox] { background: var(--panel2); border-color: #5E5E9C; border-radius: 4px; } input[type=checkbox]:checked { background: var(--gold); border-color: var(--gold); } input[type=checkbox]::after { border-color: #070722; }
button { background: transparent; color: var(--fg); border: 1px solid var(--line); border-radius: 10px; font-weight: 400; letter-spacing: .02em; }
button:hover { border-color: var(--gold); color: var(--gold-lite); }
button.primary { background: #6D5CF0; color: #fff; border-color: #6D5CF0; font-weight: 500; box-shadow: none; overflow: visible; }
button.primary::after { display: none; }
button.primary:hover { background: #8272FF; border-color: #8272FF; color: #fff; transform: none; box-shadow: 0 14px 30px -16px rgba(130,114,255,.8); }
button.link { background: none; border: 0; color: var(--gold); }
.filebtn { background: transparent; border: 1px dashed rgba(155,140,255,.6); color: var(--gold); border-radius: 10px; }
.filebtn:hover { background: rgba(155,140,255,.08); }
fieldset.seg label, fieldset.seg label:first-of-type, fieldset.seg label:last-of-type { background: transparent; color: var(--muted); border: 1px solid var(--line); border-radius: 0; margin-left: -1px; font-weight: 400; }
fieldset.seg label:first-of-type { border-radius: 10px 0 0 10px; margin-left: 0; } fieldset.seg label:last-of-type { border-radius: 0 10px 10px 0; }
fieldset.seg input:checked + label { background: rgba(155,140,255,.14); border-color: var(--gold); color: var(--gold-lite); }
.chip-btn { border-radius: 999px; color: var(--muted); } .chip-btn.on { background: rgba(155,140,255,.14); border-color: var(--gold); color: var(--gold-lite); }
input.slider { background: linear-gradient(to right, var(--gold) var(--fill, 30%), rgba(255,255,255,.14) var(--fill, 30%)); height: 2px; }
input.slider::-webkit-slider-thumb { background: var(--bg); border: 2px solid var(--gold); width: 22px; height: 22px; box-shadow: 0 0 0 5px rgba(155,140,255,.12); }
input.slider::-moz-range-thumb { background: var(--bg); border: 2px solid var(--gold); }
details.more > summary { color: var(--gold); font-weight: 400; letter-spacing: .02em; }
details.more.changed > summary::after { background: var(--gold); color: #070722; }
dl.sum > div { border-bottom-color: var(--line); } dl.sum dt { color: var(--muted); } dl.sum dd { color: var(--fg); font-weight: 400; } dl.sum .total { border-bottom-color: var(--gold); } dl.sum .total dt { color: var(--fg); } dl.sum .warn dd { color: var(--red); }
h3.sum-h, .chart h3 { color: var(--gold); font-family: var(--body); font-size: .8rem; font-weight: 400; letter-spacing: .08em; text-transform: none; }
table th { color: var(--muted); } td, th { border-bottom-color: var(--line); } .tile table td, .tile table th { border-bottom-color: var(--line); }
.chip.neutral { background: var(--panel2); color: var(--muted); }

/* Result: a statement, not a dashboard */
#takeTile { background: linear-gradient(180deg, #121244, #0A0A2C); border: 1px solid rgba(155,140,255,.28); padding: clamp(24px, 3vw, 36px); position: relative; overflow: hidden; }
#dayTile { background: linear-gradient(180deg, #121244, #0A0A2C); border: 1px solid rgba(155,140,255,.28); padding: clamp(24px, 3vw, 36px); position: relative; overflow: hidden; }
#takeTile::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
#dayTile::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.kpi4 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.kpi, #takeTile .kpi.gross, #takeTile .kpi.tax, #takeTile .kpi.sup { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 16px 14px 4px 0; color: var(--fg); -webkit-backdrop-filter: none; backdrop-filter: none; }
.kpi, #dayTile .kpi.gross, #dayTile .kpi.tax, #dayTile .kpi.sup { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 16px 14px 4px 0; color: var(--fg); -webkit-backdrop-filter: none; backdrop-filter: none; }
.kpi + .kpi:not(.take) { border-left: 1px solid var(--line); padding-left: 16px; }
.kpi.take, #takeTile .kpi.take { grid-column: 1 / -1; background: none; box-shadow: none; padding: 4px 0 24px; border-bottom: 1px solid var(--line); }
.kpi.take, #dayTile .kpi.take { grid-column: 1 / -1; background: none; box-shadow: none; padding: 4px 0 24px; border-bottom: 1px solid var(--line); }
.kpi.sup { grid-column: auto; }
.kpi span { font: 400 .86rem var(--body); letter-spacing: .02em; text-transform: none; color: var(--muted); opacity: 1; }
.kpi b { font: 400 clamp(1.5rem, 3.2vw, 1.9rem)/1.2 var(--serif); font-weight: 500; letter-spacing: 0; color: var(--fg); }
.kpi.take b { font: 300 clamp(3.4rem, 9vw, 5.2rem)/1 var(--serif); letter-spacing: -.02em; color: var(--gold-lite); }
.kpi small { color: var(--muted); font-size: .8rem; opacity: 1; text-transform: none; }
.kpi.sup small { display: none; }
.bar { height: 3px; border-radius: 0; background: rgba(255,255,255,.14); margin-top: 22px; }
#takeTile .bar .net, .bar .net { background: var(--gold); } #takeTile .bar .tax, .bar .tax { background: transparent; }
#dayTile .bar .net, .bar .net { background: var(--gold); } #dayTile .bar .tax, .bar .tax { background: transparent; }
.story, #takeTile .story { color: var(--muted); font-size: 1.02rem; line-height: 1.7; margin-top: 18px; } .story b, #takeTile .story b { color: var(--gold-lite); font-weight: 500; }
.story, #dayTile .story { color: var(--muted); font-size: 1.02rem; line-height: 1.7; margin-top: 18px; } .story b, #dayTile .story b { color: var(--gold-lite); font-weight: 500; }
.ftb-card { background: transparent; border: 1px solid var(--line); border-left: 2px solid var(--gold); border-radius: 8px; color: var(--muted); } .ftb-card b { color: var(--fg); font-weight: 500; } .ftb-card a { color: var(--gold); }

/* Tabs: text with a gold underline that glides */
.rtabs, #takeTile .rtabs { background: none; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0; margin: 26px 0 18px; gap: 4px; }
.rtabs, #dayTile .rtabs { background: none; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0; margin: 26px 0 18px; gap: 4px; }
.rtabs .ind { top: auto; bottom: -1px; height: 2px; background: var(--gold); border-radius: 0; box-shadow: none; }
.rtabs button, #takeTile .rtabs button { background: transparent !important; color: var(--muted); font: 400 .95rem var(--body); letter-spacing: .02em; border: 0; border-radius: 0; min-height: 44px; }
.rtabs button, #dayTile .rtabs button { background: transparent !important; color: var(--muted); font: 400 .95rem var(--body); letter-spacing: .02em; border: 0; border-radius: 0; min-height: 44px; }
.rtabs button:hover, #takeTile .rtabs button[aria-selected=true] { color: var(--gold-lite); }
.rtabs button:hover, #dayTile .rtabs button[aria-selected=true] { color: var(--gold-lite); }
#takeTile .charts, #takeTile dl.sum { background: transparent; border: 0; padding: 0; }
#dayTile .charts, #dayTile dl.sum { background: transparent; border: 0; padding: 0; }
#takeTile .link { color: var(--gold); }
#dayTile .link { color: var(--gold); }
.donut-wrap text.dn, #takeTile .donut-wrap text.dn { fill: var(--gold-lite); font: 500 24px var(--serif); } .donut-wrap text.dl, #takeTile .donut-wrap text.dl { fill: var(--muted); }
.donut-wrap text.dn, #dayTile .donut-wrap text.dn { fill: var(--gold-lite); font: 500 24px var(--serif); } .donut-wrap text.dl, #dayTile .donut-wrap text.dl { fill: var(--muted); }
#takeTile .legend { color: var(--fg); } .stack { background: rgba(255,255,255,.1); border-radius: 0; height: 8px; gap: 1px; } .stack-key { color: var(--muted); }
#dayTile .legend { color: var(--fg); } .stack { background: rgba(255,255,255,.1); border-radius: 0; height: 8px; gap: 1px; } .stack-key { color: var(--muted); }
.sc { background: var(--panel2); border: 1px solid var(--line); color: var(--fg); border-radius: 12px; }
.sc h4 { color: var(--gold); font: 400 .85rem var(--body); letter-spacing: .04em; text-transform: none; } .sc-n { font: 400 2.2rem var(--serif); color: var(--fg); } .sc em { color: var(--muted); } .sc em.up { color: var(--gold-lite); } .sc em.down { color: var(--red); } .sc p, .sc dt { color: var(--muted); } .sc p b { color: var(--fg); } .sc dd { color: var(--fg); }
#takeTile .whatif-in label { color: var(--muted); }
#dayTile .whatif-in label { color: var(--muted); }

/* Roster */
.rgrid, .roster-out { background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; }
.rgrid th { color: var(--muted); border-bottom-color: var(--line); } .rgrid td { border-bottom-color: rgba(255,255,255,.06); }
.rgrid input:not([type=checkbox]), .rgrid select { background: transparent; border-color: transparent; } .rgrid input:focus, .rgrid select:focus { background: var(--panel); border-color: var(--gold); box-shadow: none; }
.rgrid .rm:hover { background: rgba(255,138,122,.12); color: var(--red); }
.rkpi, .rkpi.indigo, .rkpi.amber, .rkpi.green { background: transparent; border: 1px solid var(--line); border-radius: 10px; color: var(--fg); }
.rkpi.red { background: rgba(255,138,122,.08); border-color: rgba(255,138,122,.5); color: var(--fg); } .rkpi.red b { color: var(--red); }
.rkpi span { color: var(--muted); text-transform: none; letter-spacing: .02em; font-weight: 400; font-size: .85rem; opacity: 1; } .rkpi b { font: 500 2.1rem var(--serif); color: var(--fg); } .rkpi small { color: var(--muted); }
.person { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; } .person.short { border-color: rgba(255,138,122,.45); }
.avatar { background: transparent; border: 1px solid var(--gold); color: var(--gold); font-family: var(--serif); } .person.short .avatar { border-color: var(--red); color: var(--red); background: transparent; }
.who small, .amts small { color: var(--muted); } .person.short .amts b { color: var(--red); }
.meter { background: rgba(255,255,255,.1); height: 3px; } .meter i, .roster-out .meter i { background: var(--gold); } .person.short .meter i { background: var(--red); }
.pill.bad { background: rgba(255,138,122,.12); color: var(--red); } .pill.good { background: rgba(155,140,255,.12); color: var(--gold-lite); }
.roster-empty b { color: var(--fg); }

/* Footer, account pages and mobile bar */
footer { border-top-color: var(--line); color: var(--muted); }
.livebar { background: #121244; border-top: 1px solid var(--line); color: var(--fg); box-shadow: none; } .livebar span:nth-child(2) { color: var(--gold-lite); }
.alert { background: var(--panel2); border-color: var(--line); color: var(--fg); }
.card { background: var(--panel); border: 1px solid var(--line); box-shadow: none; color: var(--fg); }
dialog { background: var(--panel); color: var(--fg); border: 1px solid var(--line); }

/* Motion: slow, soft, once */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes ring { from { stroke-dasharray: 0 100; } }
@keyframes grow { from { transform: scaleX(0); } }
.tpanel:not([hidden]) { animation: rise .7s var(--ease) both; }
.donut-wrap.draw circle { animation: ring 1.6s var(--ease) both; }
.donut-wrap.draw circle:nth-child(2) { animation-delay: .12s; } .donut-wrap.draw circle:nth-child(3) { animation-delay: .24s; }
.roster-out.enter .meter i { transform-origin: left; animation: grow 1.3s var(--ease) both; } .roster-out.enter .rkpi, .roster-out.enter .person { animation: rise .8s var(--ease) both; }
.roster-out.enter .person:nth-child(2) { animation-delay: .06s; } .roster-out.enter .person:nth-child(3) { animation-delay: .12s; } .roster-out.enter .person:nth-child(4) { animation-delay: .18s; } .roster-out.enter .person:nth-child(5) { animation-delay: .24s; }
.bar span, .stack span { transition: width 1s var(--ease); }
.rtabs .ind { transition: transform .7s var(--ease), width .7s var(--ease); }
.person, .sc { transition: transform .5s var(--ease), border-color .4s, box-shadow .5s var(--ease); } .person:hover, .sc:hover { transform: translateY(-2px); border-color: rgba(155,140,255,.4); box-shadow: 0 22px 40px -26px #000; }
details.more[open] > :not(summary), .person[open] > :not(summary) { animation: rise .55s var(--ease) both; }
@media (prefers-reduced-motion: no-preference) {
  .hero h1 { animation: rise 1.4s var(--ease) both; } .hero > div { animation: rise 1.4s var(--ease) .25s both; }
  fieldset.goals label { animation: rise 1.1s var(--ease) both; } fieldset.goals label:nth-of-type(1) { animation-delay: .45s; } fieldset.goals label:nth-of-type(2) { animation-delay: .6s; }
  #takeForm { animation: rise 1.1s var(--ease) .7s both; } #takeTile { animation: rise 1.1s var(--ease) .85s both; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }
.kpi b, .kpi.take b, input.big, .sc-n, .rkpi b, .fact b, .roster-total b, .donut-wrap text, .brand, h1, h2, h3, .amount-n, fieldset.goals label b { font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1; }
h1, h2, h3, .brand, fieldset.goals label b { font-feature-settings: "lnum" 1; font-variant-numeric: lining-nums; }
.rtabs { position: relative; }
.rtabs .ind { position: absolute; left: 0; width: var(--w, 25%); transform: translateX(var(--x, 0px)); pointer-events: none; }
.rtabs button { position: relative; z-index: 1; flex: 1; }

/* ================= Light: ivory white, navy ink, violet accent. Same luxury layout, no dark backgrounds. ================= */
:root {
  color-scheme: light;
  --bg: #FBFBFE; --panel: #FFFFFF; --panel2: #F4F3FC; --fg: #0D0D36; --muted: #5E6190; --line: rgba(13,13,54,.12); --hair: rgba(13,13,54,.12);
  --gold: #5B4BF0; --gold-lite: #3B2FD0; --gold-dim: #8C82F5; --red: #D8453A; --soft: #F4F3FC;
  --brand: #5B4BF0; --brand-dark: #3B2FD0; --brand-tint: rgba(91,75,240,.08); --mark: #5B4BF0; --indigo: #5B4BF0; --deep: #0D0D36; --ink: #0D0D36;
  --c1: #5B4BF0; --c2: #B9B2FA; --c3: #8C82F5; --c4: #E3E1F7; --c5: #2F2790;
  --b1: #E8E7F7; --b2: #CFCBF8; --b3: #A59CF5; --b4: #5B4BF0; --b5: #2F2790; --cap1: #5B4BF0; --cap2: #A59CF5; --cap3: #E3E1F7;
}
html { background: var(--bg); }
body { background: radial-gradient(1000px 480px at 85% -12%, rgba(109,92,240,.12), transparent 62%), radial-gradient(700px 380px at -8% 35%, rgba(67,56,240,.06), transparent 60%), var(--bg); }
::placeholder { color: #9A9CC0; }
nav { background: rgba(251,251,254,.86); }

a { text-decoration-color: rgba(91,75,240,.4); }
nav .links a:hover { color: #3B2FD0; }
.tile, .tile.white, .tile.mint, .tile.ice, .tile.step, .step, .step.t1, .step.t2, .step.t3, .step.t4 { background: var(--panel); box-shadow: 0 1px 1px rgba(13,13,54,.03), 0 28px 48px -34px rgba(13,13,54,.28); }
.fact, .sc, .rgrid, .roster-out { background: var(--panel2); }
.fact b, .rkpi b, .sc-n { color: var(--fg); }
fieldset.goals label { background: var(--panel); box-shadow: 0 1px 1px rgba(13,13,54,.03); }
fieldset.goals input:checked + label { background: linear-gradient(180deg, rgba(91,75,240,.09), rgba(91,75,240,.02)); border-color: #5B4BF0; }
fieldset.goals input:checked + label .ico { background: #5B4BF0; color: #fff; border-color: #5B4BF0; }
fieldset.goals label:hover { box-shadow: 0 22px 40px -26px rgba(13,13,54,.35); border-color: rgba(91,75,240,.5); }
input, select, textarea { background: #fff; }
select option { background: #fff; color: var(--fg); }
input[type=checkbox] { background: #fff; border-color: #9A9CC0; } input[type=checkbox]:checked { background: #5B4BF0; border-color: #5B4BF0; } input[type=checkbox]::after { border-color: #fff; }
button { color: var(--fg); background: #fff; }
button:hover { border-color: #5B4BF0; color: #3B2FD0; }
button.primary { background: #5B4BF0; color: #fff; border-color: #5B4BF0; }
button.primary:hover { background: #4A3AE0; border-color: #4A3AE0; color: #fff; box-shadow: 0 16px 30px -16px rgba(74,58,224,.7); }
button.link { background: none; color: #4A3AE0; }
.filebtn { background: #fff; color: #4A3AE0; border-color: rgba(91,75,240,.6); } .filebtn:hover { background: rgba(91,75,240,.06); }
fieldset.seg label, fieldset.seg label:first-of-type, fieldset.seg label:last-of-type { background: #fff; color: var(--muted); }
fieldset.seg input:checked + label { background: rgba(91,75,240,.1); border-color: #5B4BF0; color: #3B2FD0; }
.chip-btn { background: #fff; } .chip-btn.on { background: rgba(91,75,240,.1); border-color: #5B4BF0; color: #3B2FD0; }
input.slider { background: linear-gradient(to right, #5B4BF0 var(--fill, 30%), rgba(13,13,54,.14) var(--fill, 30%)); }
input.slider::-webkit-slider-thumb { background: #fff; border-color: #5B4BF0; box-shadow: 0 0 0 5px rgba(91,75,240,.14); }
input.slider::-moz-range-thumb { background: #fff; border-color: #5B4BF0; }
details.more > summary { color: #4A3AE0; } details.more.changed > summary::after { background: #5B4BF0; color: #fff; }
dl.sum dd { color: var(--fg); } dl.sum .total dt { color: var(--fg); } dl.sum .warn dd { color: var(--red); }
h3.sum-h, .chart h3, .sc h4 { color: #4A3AE0; }
.tag { color: #4A3AE0; border-color: #5B4BF0; }
.step .n { color: #4A3AE0; border-color: #5B4BF0; background: #fff; }
.hero-proof li::before { background: #5B4BF0; }

/* Result: light statement with a violet hairline on top */
#takeTile { background: linear-gradient(180deg, #FFFFFF, #F5F4FD); border: 1px solid var(--line); box-shadow: 0 1px 1px rgba(13,13,54,.03), 0 36px 60px -40px rgba(59,47,208,.45); }
#dayTile { background: linear-gradient(180deg, #FFFFFF, #F5F4FD); border: 1px solid var(--line); box-shadow: 0 1px 1px rgba(13,13,54,.03), 0 36px 60px -40px rgba(59,47,208,.45); }
#takeTile::before { background: linear-gradient(90deg, transparent, #5B4BF0, transparent); }
#dayTile::before { background: linear-gradient(90deg, transparent, #5B4BF0, transparent); }
.kpi, #takeTile .kpi.gross, #takeTile .kpi.tax, #takeTile .kpi.sup { color: var(--fg); }
.kpi, #dayTile .kpi.gross, #dayTile .kpi.tax, #dayTile .kpi.sup { color: var(--fg); }
.kpi b { color: var(--fg); }
.kpi.take b, #takeTile .kpi.take b { color: #3B2FD0; }
.kpi.take b, #dayTile .kpi.take b { color: #3B2FD0; }
.kpi span, .kpi small { color: var(--muted); }
.bar { background: rgba(13,13,54,.1); } #takeTile .bar .net, .bar .net { background: #5B4BF0; }
.bar { background: rgba(13,13,54,.1); } #dayTile .bar .net, .bar .net { background: #5B4BF0; }
.story, #takeTile .story { color: var(--muted); } .story b, #takeTile .story b { color: #3B2FD0; }
.story, #dayTile .story { color: var(--muted); } .story b, #dayTile .story b { color: #3B2FD0; }
.ftb-card { background: #fff; color: var(--muted); border-left-color: #5B4BF0; } .ftb-card a { color: #4A3AE0; }
.rtabs .ind { background: #5B4BF0; }
.rtabs button:hover, #takeTile .rtabs button[aria-selected=true] { color: #3B2FD0; }
.rtabs button:hover, #dayTile .rtabs button[aria-selected=true] { color: #3B2FD0; }
#takeTile .link { color: #4A3AE0; } #takeTile .legend, #takeTile .whatif-in label { color: var(--fg); }
#dayTile .link { color: #4A3AE0; } #dayTile .legend, #dayTile .whatif-in label { color: var(--fg); }
.donut-wrap text.dn, #takeTile .donut-wrap text.dn { fill: #3B2FD0; } .donut-wrap text.dl, #takeTile .donut-wrap text.dl { fill: var(--muted); }
.donut-wrap text.dn, #dayTile .donut-wrap text.dn { fill: #3B2FD0; } .donut-wrap text.dl, #dayTile .donut-wrap text.dl { fill: var(--muted); }
.stack { background: rgba(13,13,54,.1); } .stack-key { color: var(--muted); }
.sc { border: 1px solid var(--line); } .sc em.up { color: #3B2FD0; } .sc p b { color: var(--fg); }

/* Roster */
.rgrid { border-color: var(--line); } .rgrid td { border-bottom-color: rgba(13,13,54,.07); }
.rgrid input:not([type=checkbox]), .rgrid select { background: transparent; } .rgrid input:focus, .rgrid select:focus { background: #fff; border-color: #5B4BF0; }
.rgrid .rm:hover { background: rgba(216,69,58,.1); color: var(--red); }
.rkpi, .rkpi.indigo, .rkpi.amber, .rkpi.green { background: #fff; color: var(--fg); }
.rkpi.red { background: rgba(216,69,58,.06); border-color: rgba(216,69,58,.45); } .rkpi.red b { color: var(--red); }
.person { background: #fff; } .person.short { border-color: rgba(216,69,58,.4); } .person.short .avatar { border-color: var(--red); color: var(--red); }
.avatar { border-color: #5B4BF0; color: #4A3AE0; background: #fff; }
.meter { background: rgba(13,13,54,.1); } .meter i, .roster-out .meter i { background: #5B4BF0; } .person.short .meter i { background: var(--red); }
.pill.bad { background: rgba(216,69,58,.1); color: var(--red); } .pill.good { background: rgba(91,75,240,.1); color: #3B2FD0; }
.livebar { background: #fff; color: var(--fg); border-top: 1px solid var(--line); box-shadow: 0 -10px 30px -18px rgba(13,13,54,.3); } .livebar span:nth-child(2) { color: #3B2FD0; }
.person:hover, .sc:hover { box-shadow: 0 22px 40px -28px rgba(13,13,54,.4); border-color: rgba(91,75,240,.4); }

/* ================= Night sky palette on the luxury layout: lavender page, navy hero and result, electric violet ================= */
:root {
  --bg: #F1F0FA; --panel: #FFFFFF; --panel2: #F6F5FD; --fg: #0F1038; --muted: #5C5F86; --line: rgba(15,16,56,.12); --hair: rgba(15,16,56,.12);
  --gold: #4338F0; --gold-lite: #3B32B8; --gold-dim: #8B7CF6; --red: #E5484D; --soft: #F6F5FD;
  --brand: #4338F0; --brand-dark: #0B0B5E; --brand-tint: rgba(67,56,240,.08); --mark: #8B5CF6; --indigo: #4338F0; --deep: #0B0B5E; --ink: #0B0B5E;
  --c1: #4338F0; --c2: #A99BFA; --c3: #7A4DF0; --c4: #D9D4FB; --c5: #0B0B5E;
  --b1: #E9E7FD; --b2: #CFC9FB; --b3: #A99BFA; --b4: #5B4BF0; --b5: #0B0B5E; --cap1: #4338F0; --cap2: #A99BFA; --cap3: #E2E1F4;
}
body { background: radial-gradient(1000px 480px at 85% -12%, rgba(122,77,240,.10), transparent 62%), #F1F0FA; }
nav { background: rgba(241,240,250,.86); }

a, button.link, details.more > summary, .filebtn, #takeTile .link { color: #4338F0; }
a, button.link, details.more > summary, .filebtn, #dayTile .link { color: #4338F0; }
button.primary { background: linear-gradient(90deg, #3B3BF5, #7A4DF0); border: 0; color: #fff; }
button.primary:hover { background: linear-gradient(90deg, #3B3BF5, #7A4DF0); filter: brightness(1.08); box-shadow: 0 16px 30px -14px rgba(90,70,240,.7); color: #fff; }
fieldset.seg input:checked + label { background: #0B0B5E; border-color: #0B0B5E; color: #fff; }
.chip-btn.on { background: #0B0B5E; border-color: #0B0B5E; color: #fff; }
fieldset.goals input:checked + label { border-color: #4338F0; background: #fff; box-shadow: inset 0 0 0 1px #4338F0; }
fieldset.goals input:checked + label .ico { background: linear-gradient(135deg, #3B3BF5, #7A4DF0); color: #fff; border-color: transparent; }
input.slider { background: linear-gradient(to right, #4338F0 var(--fill, 30%), rgba(15,16,56,.14) var(--fill, 30%)); }
input.slider::-webkit-slider-thumb { border-color: #4338F0; box-shadow: 0 0 0 5px rgba(67,56,240,.14); }
h3.sum-h, .chart h3, .sc h4 { color: #4338F0; }
.step .n, .avatar { color: #4338F0; border-color: #4338F0; }
.hero-proof li::before { background: #4338F0; }

/* Hero: a navy sheet */
.hero { background: #0B0B5E; border-radius: 30px; border: 0; padding: clamp(32px, 5vw, 64px); margin-top: 8px; overflow: hidden; isolation: isolate; border-bottom: 0; }
.hero::before { display: block; content: ""; position: absolute; width: 620px; height: 620px; right: -140px; top: -260px; z-index: -1; background: radial-gradient(closest-side, rgba(122,77,240,.55), rgba(67,56,240,.15) 58%, transparent 72%); }
.hero h1 { color: #fff; } .hero .lede { color: rgba(255,255,255,.78); }
.hero-proof li { color: rgba(255,255,255,.9); border-top-color: rgba(255,255,255,.16); } .hero-proof li::before { background: #A99BFA; }

/* Result: navy panel, violet figure, white cards for the detail */
#takeTile { background: #0B0B5E; border: 0; color: #fff; box-shadow: none; }
#dayTile { background: #0B0B5E; border: 0; color: #fff; box-shadow: none; }
#takeTile::before { background: linear-gradient(90deg, transparent, #A99BFA, transparent); }
#dayTile::before { background: linear-gradient(90deg, transparent, #A99BFA, transparent); }
#takeTile .kpi.take { background: none; }
#dayTile .kpi.take { background: none; }
#takeTile .kpi.take b { color: #fff; }
#dayTile .kpi.take b { color: #fff; }
#takeTile .kpi b { color: #fff; } #takeTile .kpi span, #takeTile .kpi small { color: rgba(255,255,255,.72); }
#dayTile .kpi b { color: #fff; } #dayTile .kpi span, #dayTile .kpi small { color: rgba(255,255,255,.72); }
#takeTile .kpi + .kpi:not(.take) { border-left-color: rgba(255,255,255,.16); } #takeTile .kpi.take { border-bottom-color: rgba(255,255,255,.16); }
#dayTile .kpi + .kpi:not(.take) { border-left-color: rgba(255,255,255,.16); } #dayTile .kpi.take { border-bottom-color: rgba(255,255,255,.16); }
#takeTile .bar { background: rgba(255,255,255,.16); } #takeTile .bar .net { background: linear-gradient(90deg, #5B50F5, #A99BFA); }
#dayTile .bar { background: rgba(255,255,255,.16); } #dayTile .bar .net { background: linear-gradient(90deg, #5B50F5, #A99BFA); }
#takeTile .story { color: rgba(255,255,255,.82); } #takeTile .story b { color: #C8BFFF; }
#dayTile .story { color: rgba(255,255,255,.82); } #dayTile .story b { color: #C8BFFF; }
#takeTile .rtabs { border-bottom-color: rgba(255,255,255,.16); } #takeTile .rtabs button { color: rgba(255,255,255,.7); }
#dayTile .rtabs { border-bottom-color: rgba(255,255,255,.16); } #dayTile .rtabs button { color: rgba(255,255,255,.7); }
#takeTile .rtabs button:hover, #takeTile .rtabs button[aria-selected=true] { color: #fff; } #takeTile .rtabs .ind { background: #A99BFA; }
#dayTile .rtabs button:hover, #dayTile .rtabs button[aria-selected=true] { color: #fff; } #dayTile .rtabs .ind { background: #A99BFA; }
#takeTile .charts, #takeTile dl.sum { background: #fff; border-radius: 18px; padding: 18px; color: var(--fg); }
#dayTile .charts, #dayTile dl.sum { background: #fff; border-radius: 18px; padding: 18px; color: var(--fg); }
#takeTile .note, #takeTile details.more > summary, #takeTile .whatif-in label { color: rgba(255,255,255,.82); }
#dayTile .note, #dayTile details.more > summary, #dayTile .whatif-in label { color: rgba(255,255,255,.82); }
#takeTile .link { color: #C8BFFF; }
#dayTile .link { color: #C8BFFF; }
#takeTile .ftb-card { background: #fff; color: var(--muted); } #takeTile .ftb-card b { color: var(--fg); } #takeTile .ftb-card a { color: #4338F0; }
#dayTile .ftb-card { background: #fff; color: var(--muted); } #dayTile .ftb-card b { color: var(--fg); } #dayTile .ftb-card a { color: #4338F0; }
#takeTile .sc { background: #fff; }
#dayTile .sc { background: #fff; }
#takeTile dl.sum dt { color: var(--muted); } #takeTile dl.sum dd { color: var(--fg); }
#dayTile dl.sum dt { color: var(--muted); } #dayTile dl.sum dd { color: var(--fg); }

/* Roster tints */
.rgrid, .roster-out { background: #F6F5FD; }
.meter i, .roster-out .meter i { background: linear-gradient(90deg, #3B3BF5, #7A4DF0); } .person.short .meter i { background: var(--red); }
.rkpi.red { background: rgba(229,72,77,.07); border-color: rgba(229,72,77,.45); } .rkpi.red b, .person.short .amts b { color: var(--red); }
.person.short { border-color: rgba(229,72,77,.4); } .person.short .avatar { border-color: var(--red); color: var(--red); }
.pill.bad { background: rgba(229,72,77,.1); color: var(--red); } .pill.good { background: rgba(67,56,240,.1); color: #3B32B8; }
.fact b { color: #3B32B8; } .sc em.up { color: #3B32B8; }
.livebar { background: #0B0B5E; color: #fff; border-top: 0; } .livebar span:nth-child(2) { color: #C8BFFF; }


/* ---- Slop pass: solid fills, no decorative glows, no blur, no icon tiles or avatars, sentence-case labels */
nav { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bg); }
body { background: var(--bg); }
.hero::before, #takeTile::before { display: none; }
.hero::before, #dayTile::before { display: none; }
.hero::before { animation: none; }
button.primary, button.primary:hover { background: #4338F0; filter: none; }
button.primary:hover { background: #3A30D8; box-shadow: none; }
fieldset.goals input:checked + label { background: #fff; }
fieldset.goals label { display: block; }
fieldset.goals label b, fieldset.goals label span:not(.ico) { grid-column: auto; display: block; }
#takeTile .bar .net, .meter i, .roster-out .meter i { background: #6B5CF6; }
#dayTile .bar .net, .meter i, .roster-out .meter i { background: #6B5CF6; }
.person.short .meter i { background: var(--red); }
#takeTile { background: #0B0B5E; }
#dayTile { background: #0B0B5E; }
th, .rgrid th, .tag, fieldset.goals legend { text-transform: none; letter-spacing: .01em; font-weight: 500; }
.person summary { grid-template-columns: 1fr auto; }
.person .meter { grid-column: 1 / -1; }
.who b, .amts b { font-weight: 500; }
@media (max-width: 520px) { .person summary { grid-template-columns: 1fr; } .amts { text-align: left; } }
fieldset.goals label span:not(.ico) { margin-top: 8px; }
.doc h1 { margin: 48px 0 18px; }
.doc td:last-child, .doc th:last-child { text-align: left; }

/* Not-advice notice: the plainest thing on the page */
.notice { grid-column: 1 / -1; background: #fff; border: 2px solid #0B0B5E; border-radius: 14px; padding: 18px 22px; color: var(--fg); }
.notice b { display: block; font: 600 clamp(1.4rem, 3vw, 1.8rem)/1.2 var(--serif); color: #0B0B5E; margin-bottom: 6px; }
.notice p { margin: 0; color: var(--fg); font-weight: 400; font-size: .98rem; max-width: 90ch; }
.disclaim { margin: 14px 0 0; font-size: .85rem; color: var(--muted); }
#takeTile .disclaim { color: rgba(255,255,255,.8); }
#dayTile .disclaim { color: rgba(255,255,255,.8); }
.roster-disclaim { margin-top: 12px; }
footer b { color: var(--fg); font-weight: 500; }

/* ---- Theme toggle: an icon button, no words */
.theme-toggle { display: inline-grid; place-items: center; width: 40px; height: 40px; min-height: 0; padding: 0; border-radius: 50%; background: transparent; border: 1px solid var(--line); color: var(--fg); cursor: pointer; }
.theme-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle:hover { border-color: #4338F0; color: #4338F0; }
nav .links { align-items: center; }
@media (max-width: 520px) { nav .links a { display: none; } nav .links .theme-toggle { display: inline-grid; } }

/* ---- Dark mode: true black with white text and one soft lilac accent. Light stays the default. */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000000; --panel: #0F0F10; --panel2: #171718; --soft: #171718; --fg: #F4F4F5; --muted: #A6A6AD; --line: rgba(255,255,255,.14); --hair: rgba(255,255,255,.14);
  --gold: #CFC8FF; --gold-lite: #E9E7FF; --brand: #CFC8FF; --brand-dark: #E9E7FF; --brand-tint: rgba(207,200,255,.12); --indigo: #CFC8FF; --mark: #CFC8FF; --red: #FF8A7A; --deep: #0F0F10;
  --c1: #E9E7FF; --c2: #6B6B78; --c3: #A39BFF; --c4: #3A3A44; --c5: #CFC8FF;
  --b1: #202024; --b2: #34343C; --b3: #5A5A66; --b4: #A39BFF; --b5: #EDEBFF; --cap1: #CFC8FF; --cap2: #8C84E8; --cap3: #2A2A30;
}
html[data-theme="dark"] body, html[data-theme="dark"] nav { background: #000; }
html[data-theme="dark"] ::placeholder { color: #7B7B84; }
html[data-theme="dark"] a, html[data-theme="dark"] button.link, html[data-theme="dark"] details.more > summary, html[data-theme="dark"] .filebtn { color: #CFC8FF; }
html[data-theme="dark"] .tile, html[data-theme="dark"] .tile.white, html[data-theme="dark"] .tile.mint, html[data-theme="dark"] .tile.ice, html[data-theme="dark"] .tile.step, html[data-theme="dark"] .step, html[data-theme="dark"] .step.t1, html[data-theme="dark"] .step.t2, html[data-theme="dark"] .step.t3, html[data-theme="dark"] .step.t4 { background: var(--panel); border-color: var(--line); box-shadow: none; }
html[data-theme="dark"] .hero { background: #000; border: 1px solid var(--line); }
html[data-theme="dark"] .hero::before { display: none; }
html[data-theme="dark"] #takeTile { background: #0F0F10; border: 1px solid rgba(255,255,255,.2); }
html[data-theme="dark"] #dayTile { background: #0F0F10; border: 1px solid rgba(255,255,255,.2); }
html[data-theme="dark"] #takeTile::before { display: none; }
html[data-theme="dark"] #dayTile::before { display: none; }
html[data-theme="dark"] .notice { background: var(--panel); border-color: #F4F4F5; }
html[data-theme="dark"] .notice b { color: #fff; } html[data-theme="dark"] .notice p, html[data-theme="dark"] .notice a { color: var(--fg); }
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { background: var(--panel2); color: var(--fg); border-color: var(--line); }
html[data-theme="dark"] select option { background: #171718; color: var(--fg); }
html[data-theme="dark"] input[type=checkbox] { background: var(--panel2); border-color: #6F6F78; } html[data-theme="dark"] input[type=checkbox]:checked { background: #F4F4F5; border-color: #F4F4F5; } html[data-theme="dark"] input[type=checkbox]::after { border-color: #000; }
html[data-theme="dark"] button { background: transparent; color: var(--fg); border-color: var(--line); }
html[data-theme="dark"] button:hover, html[data-theme="dark"] .theme-toggle:hover { border-color: #CFC8FF; color: #E9E7FF; }
html[data-theme="dark"] button.primary { background: #F4F4F5; border-color: #F4F4F5; color: #000; } html[data-theme="dark"] button.primary:hover { background: #fff; border-color: #fff; color: #000; box-shadow: none; }
html[data-theme="dark"] button.link { background: none; border: 0; }
html[data-theme="dark"] .filebtn { background: transparent; border-color: rgba(207,200,255,.6); }
html[data-theme="dark"] fieldset.seg label, html[data-theme="dark"] fieldset.seg label:first-of-type, html[data-theme="dark"] fieldset.seg label:last-of-type { background: transparent; color: var(--muted); border-color: var(--line); }
html[data-theme="dark"] fieldset.seg input:checked + label { background: #F4F4F5; border-color: #F4F4F5; color: #000; }
html[data-theme="dark"] .chip-btn { background: transparent; color: var(--muted); } html[data-theme="dark"] .chip-btn.on { background: #F4F4F5; border-color: #F4F4F5; color: #000; }
html[data-theme="dark"] fieldset.goals label { background: var(--panel); border-color: var(--line); } html[data-theme="dark"] fieldset.goals label b { color: var(--fg); }
html[data-theme="dark"] fieldset.goals input:checked + label { background: var(--panel2); border-color: #F4F4F5; box-shadow: inset 0 0 0 1px #F4F4F5; }
html[data-theme="dark"] input.slider { background: linear-gradient(to right, #F4F4F5 var(--fill, 30%), rgba(255,255,255,.2) var(--fill, 30%)); }
html[data-theme="dark"] input.slider::-webkit-slider-thumb { background: #000; border-color: #F4F4F5; box-shadow: 0 0 0 5px rgba(255,255,255,.12); } html[data-theme="dark"] input.slider::-moz-range-thumb { background: #000; border-color: #F4F4F5; }
html[data-theme="dark"] h3.sum-h, html[data-theme="dark"] .chart h3, html[data-theme="dark"] .sc h4 { color: #CFC8FF; }
html[data-theme="dark"] .fact, html[data-theme="dark"] .sc, html[data-theme="dark"] .rgrid, html[data-theme="dark"] .roster-out { background: var(--panel2); border-color: var(--line); }
html[data-theme="dark"] .fact b, html[data-theme="dark"] .sc em.up, html[data-theme="dark"] .rkpi b, html[data-theme="dark"] .sc-n { color: var(--fg); }
html[data-theme="dark"] #takeTile .charts, html[data-theme="dark"] #takeTile dl.sum, html[data-theme="dark"] #takeTile .sc, html[data-theme="dark"] #takeTile .ftb-card { background: var(--panel2); color: var(--fg); }
html[data-theme="dark"] #dayTile .charts, html[data-theme="dark"] #dayTile dl.sum, html[data-theme="dark"] #dayTile .sc, html[data-theme="dark"] #dayTile .ftb-card { background: var(--panel2); color: var(--fg); }
html[data-theme="dark"] #takeTile dl.sum dt, html[data-theme="dark"] .ftb-card, html[data-theme="dark"] .sc p, html[data-theme="dark"] .sc dt { color: var(--muted); } html[data-theme="dark"] #takeTile dl.sum dd, html[data-theme="dark"] .ftb-card b { color: var(--fg); }
html[data-theme="dark"] #dayTile dl.sum dt, html[data-theme="dark"] .ftb-card, html[data-theme="dark"] .sc p, html[data-theme="dark"] .sc dt { color: var(--muted); } html[data-theme="dark"] #dayTile dl.sum dd, html[data-theme="dark"] .ftb-card b { color: var(--fg); }
html[data-theme="dark"] .ftb-card a { color: #CFC8FF; }
html[data-theme="dark"] #takeTile .donut-wrap text.dn { fill: #E9E7FF; } html[data-theme="dark"] #takeTile .legend { color: var(--fg); }
html[data-theme="dark"] #dayTile .donut-wrap text.dn { fill: #E9E7FF; } html[data-theme="dark"] #dayTile .legend { color: var(--fg); }
html[data-theme="dark"] #takeTile .bar .net, html[data-theme="dark"] .meter i, html[data-theme="dark"] .roster-out .meter i { background: #E9E7FF; }
html[data-theme="dark"] #dayTile .bar .net, html[data-theme="dark"] .meter i, html[data-theme="dark"] .roster-out .meter i { background: #E9E7FF; }
html[data-theme="dark"] #takeTile .bar { background: rgba(255,255,255,.18); }
html[data-theme="dark"] #dayTile .bar { background: rgba(255,255,255,.18); }
html[data-theme="dark"] #takeTile .rtabs .ind { background: #E9E7FF; }
html[data-theme="dark"] #dayTile .rtabs .ind { background: #E9E7FF; }
html[data-theme="dark"] #takeTile .story b { color: #E9E7FF; } html[data-theme="dark"] #takeTile .link { color: #CFC8FF; }
html[data-theme="dark"] #dayTile .story b { color: #E9E7FF; } html[data-theme="dark"] #dayTile .link { color: #CFC8FF; }
html[data-theme="dark"] .person, html[data-theme="dark"] .rkpi, html[data-theme="dark"] .rkpi.indigo, html[data-theme="dark"] .rkpi.amber, html[data-theme="dark"] .rkpi.green { background: var(--panel); border-color: var(--line); color: var(--fg); }
html[data-theme="dark"] .rkpi.red { background: rgba(255,138,122,.1); border-color: rgba(255,138,122,.5); }
html[data-theme="dark"] .person.short { border-color: rgba(255,138,122,.5); }
html[data-theme="dark"] .avatar { background: transparent; color: #CFC8FF; border-color: #CFC8FF; }
html[data-theme="dark"] .meter { background: rgba(255,255,255,.16); } html[data-theme="dark"] .person.short .meter i { background: var(--red); }
html[data-theme="dark"] .pill.good { background: rgba(207,200,255,.14); color: #E9E7FF; } html[data-theme="dark"] .pill.bad { background: rgba(255,138,122,.14); color: var(--red); }
html[data-theme="dark"] .rgrid th { color: var(--muted); } html[data-theme="dark"] .rgrid td { border-bottom-color: rgba(255,255,255,.08); }
html[data-theme="dark"] .rgrid input:focus, html[data-theme="dark"] .rgrid select:focus { background: var(--panel); border-color: #CFC8FF; }
html[data-theme="dark"] .rgrid input::-webkit-calendar-picker-indicator { filter: invert(.8); }
html[data-theme="dark"] .livebar { background: #0F0F10; color: #fff; border-top: 1px solid var(--line); }
html[data-theme="dark"] dl.sum .total { border-bottom-color: #E9E7FF; }
html[data-theme="dark"] .doc p, html[data-theme="dark"] .doc li { color: var(--muted); } html[data-theme="dark"] .doc td b, html[data-theme="dark"] .doc li b { color: var(--fg); }
html[data-theme="dark"] .step .n, html[data-theme="dark"] .tag { background: transparent; color: #CFC8FF; border-color: #CFC8FF; }
html[data-theme="dark"] dialog, html[data-theme="dark"] .report { background: var(--panel); color: var(--fg); }
html[data-theme="dark"] .alert { background: var(--panel2); color: var(--fg); border-color: var(--line); }
html[data-theme="dark"] nav .links a { color: var(--fg); } html[data-theme="dark"] nav .links a:hover { color: #E9E7FF; }


/* Roster columns in display order: name, age, type, level, date, start, hours, break, paid, public holiday, rostered hours */
.rgrid table { min-width: 0; table-layout: fixed; }
.rgrid th, .rgrid td { padding-inline: 3px; }
.rgrid td:nth-child(n) { min-width: 0; }
.rgrid th:nth-child(1) { width: 12%; } .rgrid th:nth-child(2) { width: 7%; } .rgrid th:nth-child(3) { width: 10%; } .rgrid th:nth-child(4) { width: 10%; }
.rgrid th:nth-child(5) { width: 14%; } .rgrid th:nth-child(6) { width: 11%; } .rgrid th:nth-child(7) { width: 7%; } .rgrid th:nth-child(8) { width: 8%; }
.rgrid th:nth-child(9) { width: 9%; } .rgrid th:nth-child(10) { width: 6%; } .rgrid th:nth-child(11) { width: 7%; } .rgrid th:nth-child(12) { width: 4%; }
.rgrid input:not([type=checkbox]), .rgrid select { padding-inline: 6px; font-size: .88rem; }
.rgrid input[type=date], .rgrid input[type=time] { padding-inline: 4px; font-size: .82rem; }
@media (max-width: 1000px) { .rgrid table { table-layout: auto; min-width: 960px; } .rgrid th:nth-child(n) { width: auto; } }

/* Outfit pass: bolder, tighter headings and body weight 400 */
label, .note, .lede { font-weight: 400; }
.hero-proof, .lede { font-weight: 400; }

/* ---- Review pass: stale-rates banner, age pill, result column layout, readable table heads */
.stale { background: #FFF3F0; border: 2px solid #C2410C; color: #7A2E0E; border-radius: 14px; padding: 14px 18px; }
.stale[hidden] { display: none; }
.stale a { color: #7A2E0E; }
html[data-theme="dark"] .stale { background: #2A1710; border-color: #FB923C; color: #FED7AA; }
html[data-theme="dark"] .stale a { color: #FED7AA; }
.agepill { display: inline-block; margin: 6px 0 0; padding: 5px 12px; border-radius: 999px; background: var(--brand-tint); color: var(--fg); font-size: .9rem; font-weight: 600; }
.limits, .stamp { margin-top: 14px; font-size: .85rem; }
.stamp { margin-top: 6px; opacity: .85; }
#sumTile .limits, #sumTile .stamp { color: inherit; }
.rgrid th, .person th { font-size: .8rem; }
label[for="m-check"] b::after { content: "Start here"; margin-left: 10px; padding: 2px 10px; border-radius: 999px; background: var(--brand-tint); color: var(--fg); font-size: .72rem; font-weight: 600; vertical-align: middle; }
.seeresult { display: none; }
/* The answer stays in view while the numbers are entered on the left */
@media (min-width: 1001px) {
  #sumTile, #takeTile, #dayTile { position: sticky; top: 92px; align-self: start; max-height: calc(100vh - 112px); overflow: auto; }
  /* The answer panel spans the form and the breakdown beside it, so it never slides over a full-width tile below. */
  #sumTile { grid-row: span 2; }
  section[aria-label="Breakdown and report"] { grid-column: span 7; }
}
@media (max-width: 1000px) {
  .seeresult { display: block; margin-top: 18px; padding: 14px; border-radius: 12px; background: var(--fg); color: var(--bg); text-align: center; font-weight: 600; text-decoration: none; }
}
.hero { align-items: center; padding-block: clamp(28px, 4vw, 52px); }
.seg input:disabled + label { opacity: .4; cursor: not-allowed; }
fieldset.split { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px 4px; margin: 12px 0 0; }
fieldset.split legend { padding: 0 6px; font-size: .9rem; font-weight: 600; color: var(--fg); }
.rgrid th:nth-child(1) { width: 11%; } .rgrid th:nth-child(2) { width: 6%; } .rgrid th:nth-child(3) { width: 9%; } .rgrid th:nth-child(4) { width: 11%; }
.rgrid th:nth-child(5) { width: 12%; } .rgrid th:nth-child(6) { width: 9%; } .rgrid th:nth-child(7) { width: 6%; } .rgrid th:nth-child(8) { width: 6%; }
.rgrid th:nth-child(9) { width: 7%; } .rgrid th:nth-child(10) { width: 5%; } .rgrid th:nth-child(11) { width: 5%; } .rgrid th:nth-child(12) { width: 9%; }
.rgrid th:nth-child(13) { width: 6%; } .rgrid th:nth-child(14) { width: 3%; }
@media (max-width: 1000px) { .rgrid table { min-width: 1100px; } .rgrid th:nth-child(n) { width: auto; } }
.actions { display: grid; gap: 14px; }

/* ---- Design pass: smaller hero, amber for "worth checking", readable step badges, phone layouts */
.hero { padding: clamp(22px, 3.2vw, 40px) clamp(24px, 4vw, 52px); }
.hero h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); }
.hero .lede { margin-bottom: 8px; }
.hero-proof li { padding: 9px 0; }
.alert.warn { background: #FFF1D6; color: #5C3A00; border: 1px solid #E8B04A; }
.alert.warn b, .alert.warn span { color: #5C3A00; }
html[data-theme="dark"] .alert.warn { background: #2A2010; color: #FFD9A0; border-color: #8A6420; }
html[data-theme="dark"] .alert.warn b, html[data-theme="dark"] .alert.warn span { color: #FFD9A0; }
html[data-theme="dark"] .step-h .n { background: #C8BFFF; color: #0A0A0A; }
#takebar[hidden] { display: none; }
@media (max-width: 1000px) {
  /* Take-home: the answer comes first, then the numbers; the bar at the bottom follows you down */
  .bento > * { order: 10; }
  .bento > .hero { order: 0; } .bento > .goals { order: 1; } .pair > * { order: 10; } #takeForm, #dayForm { order: 2; } #takeTile, #dayTile { order: 3; }
  /* Shift check: trim the explanations so the form is shorter */
  #awardHint, #typeHint, #levelHint { display: none; }
  .step.s3 { grid-column: span 6; padding: 16px; } .step p { font-size: .9rem; }
}
@media (max-width: 700px) {
  .hero { padding: 22px 20px; border-radius: 22px; }
  .hero-proof { display: flex; flex-wrap: wrap; gap: 0 16px; } .hero-proof li { border: 0; padding: 4px 0; }
  /* Roster: one card per row instead of sideways scrolling */
  .rgrid table, .rgrid tbody { display: block; min-width: 0 !important; width: 100%; }
  .rgrid thead { display: none; }
  .rgrid tr { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; padding: 14px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 14px; position: relative; }
  .rgrid td { display: block; width: auto; padding: 0; border: 0; }
  .rgrid td::before { content: attr(data-l); display: block; margin-bottom: 4px; font-size: .78rem; color: var(--muted); }
  .rgrid td:nth-child(1), .rgrid td:nth-child(4) { grid-column: 1 / -1; }
  .rgrid td:last-child { position: absolute; top: 8px; right: 8px; }
  .rgrid td:last-child::before { display: none; }
  .rgrid td.c { display: flex; align-items: center; gap: 8px; }
  .rgrid td.c::before { margin: 0; order: 2; }
  .rgrid input:not([type=checkbox]), .rgrid select { width: 100%; }
}
.hero-proof { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 12px; }
.hero-proof li { border: 0; padding: 4px 0; }
@media (max-width: 700px) {
  .hero-proof { display: none; }
  .hero h1 { font-size: 1.9rem; } .hero .lede { font-size: 1rem; margin: 10px 0 0; }
  fieldset.goals label > span:not(.sr) { display: none; }
  fieldset.goals label { padding: 14px 16px; }
}
@media (max-width: 700px) { fieldset.goals label { min-height: 0; gap: 0; align-content: start; } fieldset.goals { gap: 10px; } }

/* ---- Award helper, back pay, next steps, link tools and the analytics banner */
#awardHelp { margin-top: 6px; }
.backpay, .helpblock { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.helpblock h3 { margin: 0 0 8px; font-size: 1.05rem; }
.helpblock ul { margin: 0 0 8px; padding-left: 20px; } .helpblock li { margin-bottom: 4px; font-size: .92rem; }
.backpay select { margin-top: 6px; }
.tools { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 16px; font-size: .92rem; align-items: center; }
.tools .link { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; cursor: pointer; font: inherit; }
.tools a { color: inherit; }
#consent { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40; max-width: 640px; margin: 0 auto; padding: 16px 18px; border-radius: 16px; background: #fff; color: #14143A; border: 1px solid rgba(20,20,58,.18); box-shadow: 0 12px 40px -12px rgba(10,10,40,.45); display: grid; gap: 12px; }
#consent p { margin: 0; font-size: .95rem; color: #14143A; } #consent a { color: #3B2FD0; }
#consent div { display: flex; gap: 10px; flex-wrap: wrap; }
#consent button { flex: 1 1 140px; padding: 12px 16px; border-radius: 12px; border: 1px solid #14143A; background: #fff; color: #14143A; font-weight: 600; cursor: pointer; font-family: inherit; font-size: 1rem; }
html[data-theme="dark"] #consent { background: #141416; color: #fff; border-color: rgba(255,255,255,.25); } html[data-theme="dark"] #consent p { color: #fff; } html[data-theme="dark"] #consent a { color: #C8BFFF; } html[data-theme="dark"] #consent button { background: #141416; color: #fff; border-color: #fff; }
.copyweek { margin-left: 8px; }

/* ---- Contrast fixes found by an automated WCAG check */
.alert.bad { background: #C42B2B; }
.alert span { opacity: 1; }
.rkpi.red small, .rkpi small { color: #4B4D72; }
html[data-theme="dark"] .rkpi small { color: var(--muted); }
.person.short .amts b { color: #B3242A; }
html[data-theme="dark"] .person.short .amts b { color: #FF8A8A; }

/* ---- Employer page pointer on the home page */
.employer-pointer h2 { margin: 0 0 6px; font-size: 1.4rem; }
.employer-pointer p { margin: 0 0 10px; }
.cta-link { display: inline-block; padding: 12px 20px; border-radius: 12px; background: var(--fg); color: var(--bg) !important; font-weight: 600; text-decoration: none; }

/* language picker and non-Latin fonts */
select.lang{font:inherit;font-size:.85rem;background:transparent;color:inherit;border:1px solid var(--line,#8886);border-radius:8px;padding:.3rem .5rem;cursor:pointer}
.langnote{font-size:.85rem;opacity:.85}
html:lang(zh-Hans) body{font-family:Outfit,"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif}
html:lang(hi) body{font-family:Outfit,"Noto Sans Devanagari","Nirmala UI","Kohinoor Devanagari",system-ui,sans-serif}

/* The form, the answer and the breakdown share one grid so the sticky answer panel stops where they end. */
.pair { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; align-items: start; }
@media (max-width: 1000px) { .pair { display: contents; } }

/* Not-affiliated line at the top of every page: quiet, one line */
.affil { margin: 0; padding: 8px 0 0; text-align: center; font-size: .8rem; color: var(--muted); }
@media (max-width: 480px) { .affil { font-size: .74rem; padding-inline: 8px; } nav .brand { font-size: 1.05rem; gap: 8px; white-space: nowrap; } nav .brand svg { width: 26px; height: 26px; } }

/* Logo mark: solid violet tile with an equals sign */
.brand svg rect { stroke: none; } .brand svg path { stroke: #fff; }
html[data-theme="dark"] .brand svg rect:first-child { fill: #F4F4F5; } html[data-theme="dark"] .brand svg rect:not(:first-child) { fill: #0B0B5E; } html[data-theme="dark"] .brand svg path { stroke: #0B0B5E; }

/* One colour for every main button: the dark navy of the hero (light mode) and the light fill used in dark mode. Secondary buttons stay white with a border. */
:root { --btn-bg: #0B0B5E; --btn-fg: #fff; --btn-hover: #1F1F86; }
html[data-theme="dark"] { --btn-bg: #F4F4F5; --btn-fg: #000; --btn-hover: #fff; }
html:root button.primary, html:root .cta-link, html:root .seeresult { background: var(--btn-bg); background-image: none; color: var(--btn-fg) !important; border-color: var(--btn-bg); filter: none; box-shadow: none; }
html:root button.primary:hover, html:root .cta-link:hover, html:root .seeresult:hover { background: var(--btn-hover); border-color: var(--btn-hover); color: var(--btn-fg) !important; filter: none; box-shadow: none; }

/* The three money figures stack as rows whenever their box is too narrow for three columns (phones, and the narrow answer panel on a laptop). */
#takeTile { container-type: inline-size; }
#dayTile { container-type: inline-size; }
@container (max-width: 560px) {
  .kpi4 { grid-template-columns: 1fr; gap: 0; }
  .kpi:not(.take) { grid-template-columns: 1fr auto; grid-template-areas: "l v" "s s"; align-items: baseline; column-gap: 12px; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.16); border-radius: 0; background: transparent; }
  .kpi:not(.take) span { grid-area: l; }
  .kpi:not(.take) b { grid-area: v; text-align: right; font-size: clamp(1.3rem, 6.5cqw, 1.7rem); }
  .kpi:not(.take) small { grid-area: s; }
}

/* Narrow phones and big numbers */
@media (max-width: 420px) {
  nav { gap: 8px; }
  nav .links { gap: 8px; }
  nav .brand { font-size: .98rem; gap: 6px; }
  select.lang { padding: .3rem .3rem; font-size: .78rem; max-width: 88px; text-overflow: ellipsis; }
  .theme-toggle { width: 36px; height: 36px; }
  .rtabs button { padding-inline: 8px; font-size: .85rem; }
}
.shift-a { flex-wrap: wrap; row-gap: 6px; }
.shift-a .link { white-space: nowrap; }
.kpi.take b { overflow-wrap: anywhere; }
#takeTile .kpi.take b { font-size: clamp(2.1rem, 11.5cqw, 3.8rem); }
#dayTile .kpi.take b { font-size: clamp(2.1rem, 11.5cqw, 3.8rem); }
.rgrid th { white-space: normal; line-height: 1.15; vertical-align: bottom; }
@media (max-width: 340px) { nav .brand { font-size: .86rem; } nav .brand svg { width: 24px; height: 24px; } select.lang { max-width: 74px; } }
@media (max-width: 380px) { .rtabs button { padding-inline: 4px; font-size: .8rem; } }
.rgrid th { overflow-wrap: anywhere; }
@media (max-width: 380px) { .rtabs { grid-template-columns: repeat(4, auto); justify-content: space-between; } .rtabs button { white-space: nowrap; } }
@media (max-width: 380px) { .rtabs { display: flex; gap: 4px; justify-content: space-between; } .rtabs button { flex: 0 0 auto; width: auto; min-width: 0; } }

/* fringe benefit helper and ATO rates page: long option text and wide tables stay inside the screen */
details.more select { width: 100%; max-width: 100%; text-overflow: ellipsis; }
.doc .tw { overflow-x: auto; margin: 12px 0; } .doc .tw table { margin: 0; min-width: 100%; width: max-content; }
#takeTile .bar .net, #takeTile .bar .tax, #dayTile .bar .net, #dayTile .bar .tax { color: #fff; }
#takeTile .bar .net, #dayTile .bar .net { background: #5B4BF0; }
html[data-theme="dark"] #takeTile .bar .net, html[data-theme="dark"] #dayTile .bar .net { color: #0B0B5E; }

/* printing the take-home result: just the figures, every tab open */
@media print {
  nav, .affil, footer, .langnote, .livebar, #takeForm, #dayForm, form.tile, fieldset.goals, .rtabs, #takeActions, #takeShareNote, #toCheck, #bonusTop, .theme-toggle, select.lang { display: none !important; }
  .m-check:not(#m-check), #check, .pair.m-check { display: none !important; }
  body, .wrap { background: #fff !important; color: #000 !important; }
  #takeTile { box-shadow: none !important; border: 0 !important; position: static !important; grid-column: 1 / -1 !important; }
  #takeTile .tpanel[hidden] { display: block !important; }
  #takeTile .tpanel[data-panel=whatif] { display: none !important; }
}

/* where your tax goes: a bar behind each line */
#takeTile .cmp { margin: 8px 0 22px; } #takeTile .cmp h3 { font-size: 1rem; margin: 0 0 6px; }
ul.dist { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 6px; }
ul.dist li { position: relative; display: flex; justify-content: space-between; gap: 12px; padding: 7px 10px; border-radius: 8px; overflow: hidden; font-size: .92rem; }
ul.dist li i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--brand-tint, rgba(91,75,240,.14)); z-index: 0; border-radius: 8px; }
ul.dist li span, ul.dist li b { position: relative; z-index: 1; }
#takeTile .note a, #takeTile .cmp h3, #dayTile .note a { color: #CFC8FF; }
html[data-theme="dark"] #takeTile .ftb-card a, html[data-theme="dark"] #dayTile .ftb-card a { color: #CFC8FF; }

/* site menu (nav.js) */
nav { position: sticky; }
.menu-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--fg); font: inherit; font-weight: 600; font-size: .92rem; cursor: pointer; }
.menu-btn:hover, .menu-btn[aria-expanded="true"] { border-color: var(--brand, #5B4BF0); }
.menu-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; width: min(94vw, 640px); max-height: calc(100vh - 100px); overflow: auto; background: var(--bg, #fff); color: var(--fg); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 50px rgba(0, 0, 0, .28); padding: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 22px; text-align: left; }
.menu-panel[hidden] { display: none; }
.menu-panel h2 { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; font-weight: 600; }
.menu-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.menu-panel a { display: block; padding: 9px 10px; border-radius: 8px; color: var(--fg); text-decoration: none; font-weight: 500; font-size: .95rem; }
.menu-panel a:hover, .menu-panel a[aria-current="page"] { background: rgba(91, 75, 240, .14); }
nav .links > a[aria-current="page"] { color: var(--brand); }
@media (max-width: 960px) { nav .links > a.inline { display: none; } }
@media (max-width: 560px) { .menu-panel { grid-template-columns: 1fr; right: -2px; } .menu-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .menu-btn { padding: 6px 11px; } }
@media print { .menu-panel, .menu-btn { display: none !important; } }
@media (max-width: 400px) { nav .links { gap: 6px; } nav .links select.lang { max-width: 58px; padding-inline: 6px; text-overflow: ellipsis; } .menu-btn { padding: 6px 9px; } }
nav .links a, nav .brand { white-space: nowrap; }
nav .links { gap: 16px; flex-wrap: nowrap; }
@media (max-width: 1100px) { nav .links > a.inline { display: none; } }
@media (max-width: 400px) { nav .links { gap: 6px; } }

/* menu on the far right, theme toggle next to it, language before that; all the same height */
nav .links { gap: 10px; align-items: center; }
nav .links select.lang { order: 97; }
nav .links .theme-toggle { order: 98; }
.menu-btn { order: 99; }
nav .links select.lang, nav .links .theme-toggle, .menu-btn { height: 40px; min-height: 40px; box-sizing: border-box; }
nav .links .theme-toggle { width: 40px; }
@media (max-width: 900px) {
  nav { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  nav .brand { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  nav .links { justify-self: end; }
  nav.menu-open { position: static; }
  .menu-panel { position: static; grid-column: 1 / -1; width: 100%; max-width: none; max-height: none; box-shadow: none; margin: 8px 0 0; }
}
@media (max-width: 560px) {
  nav .links { gap: 8px; }
  nav .links select.lang, nav .links .theme-toggle, .menu-btn { height: 38px; min-height: 38px; }
  nav .links .theme-toggle, .menu-btn { width: 38px; padding: 0; justify-content: center; }
}
@media (max-width: 340px) { nav .links { gap: 5px; } nav .links select.lang { max-width: 50px; } nav .links select.lang, nav .links .theme-toggle, .menu-btn { height: 36px; min-height: 36px; } nav .links .theme-toggle, .menu-btn { width: 36px; } }
@media (max-width: 480px) { nav .links select.lang { max-width: 66px; padding-inline: 8px 4px; } }
/* five result tabs: scroll sideways on narrow phones instead of running off the tile */
@media (max-width: 430px) {
  .rtabs { overflow-x: auto; scrollbar-width: none; position: relative; }
  .rtabs::-webkit-scrollbar { display: none; }
  .rtabs button { flex: 0 0 auto; padding-inline: 12px; white-space: nowrap; }
}

/* printing take-home or day results: leave out the marketing and rates sections */
@media print { body[data-mode="take"] main.bento > :not(.pair), body[data-mode="day"] main.bento > :not(.pair) { display: none !important; } }

/* Take-home: amount with a "how often" box, reset buttons, result selectors and the pay-period table */
.amt { display: flex; gap: 8px; } .amt input { flex: 1 1 auto; min-width: 0; } .amt select { flex: 0 0 auto; width: auto; }
.form-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 14px; }
.rsel { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; } .rsel label { flex: 1 1 140px; margin: 0; font-size: .8rem; font-weight: 600; } .rsel select { width: 100%; margin-top: 4px; }
table.periods { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: .88rem; }
table.periods caption { text-align: left; font: 600 .75rem var(--num); letter-spacing: .08em; text-transform: uppercase; color: var(--brand); padding-bottom: 8px; }
table.periods th, table.periods td { padding: 8px 6px; text-align: right; border-bottom: 1px solid var(--line); } table.periods th:first-child, table.periods td:first-child { text-align: left; }
table.periods thead th { font-size: .75rem; color: var(--muted); font-weight: 600; } table.periods tr.total th, table.periods tr.total td { font-weight: 700; color: var(--brand-dark); border-bottom: 2px solid var(--brand-dark); }
@media (max-width: 520px) { table.periods { font-size: .74rem; min-width: 290px; } table.periods th, table.periods td { padding: 7px 3px; } }
html[data-theme="dark"] table.periods tr.total th, html[data-theme="dark"] table.periods tr.total td { color: #fff; border-bottom-color: #CFC8FF; }
/* Take-home form: every field is a label above a full-width box */
#takeForm details.more label:not(.check) { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 0; }
#takeForm details.more label:not(.check) > input:not([type=checkbox]), #takeForm details.more label:not(.check) > select { width: 100%; }
#takeForm details.more .amt select { width: auto; max-width: 46%; }
#takeForm details.more label.check { margin: 10px 0 0; }

/* Pay checker result: same navy card as the take-home and salary results */
#sumTile { background: #0B0B5E; border: 0; color: #fff; box-shadow: none; }
#sumTile small, #sumTile .amount-n { color: #fff; }
#sumTile small { color: rgba(255,255,255,.82); }
#sumTile dl.sum { background: #fff; color: var(--fg); border-radius: 18px; padding: 4px 18px; }
#sumTile .note, #sumTile .helpblock li, #sumTile .backpay label { color: rgba(255,255,255,.85); }
#sumTile .helpblock, #sumTile .backpay { border-top-color: rgba(255,255,255,.18); }
#sumTile a, #sumTile .tools .link, #sumTile .note a { color: #C8BFFF; }
#sumTile .backpay select { color: var(--fg); }
html[data-theme="dark"] #sumTile { background: #0F0F10; border: 1px solid rgba(255,255,255,.2); }
.tw { overflow-x: auto; max-width: 100%; }

/* Contrast fixes found in testing: result selectors, pay-period tables and the pay checker rows in dark mode */
.rsel label { color: rgba(255, 255, 255, .88); }
#periods { background: #fff; color: var(--fg); border-radius: 18px; padding: 16px; margin-bottom: 14px; } #periods:empty { display: none; }
#periods .periods caption { color: var(--brand-dark); } #periods .periods thead th { color: var(--muted); } #periods .note { color: var(--muted); }
html[data-theme="dark"] #periods { background: var(--panel2); }
html[data-theme="dark"] #periods .periods caption { color: #CFC8FF; }
html[data-theme="dark"] #sumTile dl.sum { background: var(--panel2); color: var(--fg); } html[data-theme="dark"] #sumTile dl.sum dt { color: var(--muted); } html[data-theme="dark"] #sumTile dl.sum dd { color: var(--fg); }
table.periods { font-size: .8rem; } table.periods td, table.periods th[scope=row] { white-space: nowrap; } table.periods th, table.periods td { padding: 8px 4px; }
#periods > div + div { margin-top: 18px; }

/* Found in testing: heading in the pay checker help block on navy, and focus rings on the navy result cards */
#sumTile .helpblock h3 { color: #fff; }
#sumTile :focus-visible, #takeTile :focus-visible, #dayTile :focus-visible { outline-color: #fff; }
html[data-theme="dark"] #sumTile .helpblock h3 { color: var(--fg); }

/* Calculator first: a slim banner and compact mode tabs so the form starts near the top of the screen */
.hero { padding: 22px 32px !important; min-height: 0 !important; gap: 8px 40px; align-items: center; }
.hero h1 { font-size: clamp(1.7rem, 3.2vw, 2.4rem) !important; line-height: 1.1; max-width: none !important; margin: 0 !important; }
.hero .lede { margin: 0 0 6px; font-size: .98rem; } .hero-proof { margin: 0; gap: 4px 18px; }
fieldset.goals label { padding: 14px 18px !important; } fieldset.goals label b { font-size: 1.05rem; }
fieldset.goals label span { display: none; } fieldset.goals input:checked + label span { display: block; }
@media (max-width: 700px) { .hero { padding: 18px 20px !important; } .hero .lede, .hero-proof { display: none; } }
.hero { padding: 16px 28px !important; } .hero-proof { display: none; } .hero .lede { margin: 0; }
.cap-left { font-weight: 500; color: var(--muted); font-size: .85em; } .cap-live { font-weight: 600; color: var(--fg); }

/* Extra settings: a compact two-column list of section headings, like a menu. A section opens to the full width when you click it. */
.settings-title { margin: 22px 0 4px; font: 700 1.05rem var(--display); letter-spacing: .02em; text-transform: uppercase; border-bottom: 2px solid var(--brand); padding-bottom: 6px; }
.settings-head .form-tools { margin: 4px 0 10px; }
.settings-grid { display: grid; grid-template-columns: 1fr; gap: 0 28px; }
@media (min-width: 700px) { .settings-grid { grid-template-columns: 1fr 1fr; } }
.settings-grid > details.more { margin: 0; border-bottom: 1px solid var(--line); padding: 2px 0; }
.settings-grid > details.more[open] { grid-column: 1 / -1; padding-bottom: 14px; }
.settings-grid > details.more > summary { padding: 10px 2px; font-weight: 600; display: flex; align-items: center; gap: 4px; }

/* Language button: always a short code */
nav .links select.lang { width: auto; min-width: 0; max-width: none; padding-inline: 12px 6px; font-weight: 600; letter-spacing: .04em; }

/* Wide screens: the top fields sit in two columns, so the extra settings come into view without scrolling far */
@media (min-width: 1001px) {
  #takeForm { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; align-content: start; }
  #takeForm > * { grid-column: 1 / -1; }
  #takeForm #payTypeSeg { grid-column: 1; grid-row: 1; }
  #takeForm #cycleSeg { grid-column: 2; grid-row: 1; margin-top: 0 !important; }
  #takeForm label[for=amount] { grid-column: 1; grid-row: 2; margin-top: 12px !important; }
  #takeForm #slider { grid-column: 1; grid-row: 3; }
  #takeForm #amountHint { grid-column: 1; grid-row: 4; }
  #takeForm label[for=hours] { grid-column: 2; grid-row: 2; margin-top: 12px !important; }
  #takeForm .chips { grid-column: 2; grid-row: 3 / span 2; align-self: start; }
  #takeForm label[for=extras] { grid-column: 1; grid-row: 5; margin-top: 8px !important; }
  #takeForm label[for=extras] + p.note { grid-column: 1; grid-row: 6; }
  #takeForm label[for=payDate] { grid-column: 2; grid-row: 5; margin-top: 8px !important; }
  #takeForm label[for=payDate] + p.note { grid-column: 2; grid-row: 6; }
  #takeForm .big { padding-block: 10px; font-size: 1.35rem; }
}

/* Menu: a wide panel on laptops with four columns, each link with a line of explanation */
.menu-panel a b { display: block; font-weight: 600; } .menu-panel a small { display: block; margin-top: 2px; font-size: .8rem; font-weight: 400; color: var(--muted); line-height: 1.35; }
.menu-foot { grid-column: 1 / -1; margin: 6px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: .82rem; color: var(--muted); }
@media (min-width: 1001px) {
  .menu-panel { width: min(1080px, calc(100vw - 32px)); display: grid; grid-template-columns: 1.1fr 1.2fr 1fr 1fr; gap: 22px 26px; padding: 24px 28px 18px; border-radius: 18px; box-shadow: 0 24px 60px -24px rgba(13, 13, 54, .45); }
  .menu-panel[hidden] { display: none; }
  .menu-panel h2 { font-size: .74rem; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 2px solid var(--brand, #5B4BF0); color: var(--fg); }
  .menu-panel ul { gap: 4px; }
  .menu-panel a { padding: 10px 12px; border-radius: 10px; }
  .menu-panel a:hover { background: var(--brand-tint, rgba(91, 75, 240, .12)); }
  .menu-panel a:hover b { color: var(--brand-dark, #3B32B8); }
}
@media (max-width: 1000px) { .menu-panel a small { display: none; } .menu-foot { display: none; } }
html[data-theme="dark"] .menu-panel a:hover { background: rgba(255, 255, 255, .08); } html[data-theme="dark"] .menu-panel a:hover b { color: #fff; }
html[data-theme="dark"] .menu-panel h2 { border-bottom-color: #CFC8FF; }
nav .links select.lang { }
#cycleSeg label { padding-inline: 6px; white-space: nowrap; font-size: .92rem; }
.settings-grid > details.more > summary { list-style: none; cursor: pointer; flex-wrap: wrap; } .settings-grid > details.more > summary::-webkit-details-marker { display: none; }
.settings-grid > details.more > summary::before { content: ""; flex: none; width: 7px; height: 7px; margin: 0 8px 2px 2px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s; }
.settings-grid > details.more[open] > summary::before { transform: rotate(45deg); margin-bottom: 4px; }

/* Result panels: one pay period at a time on phones, edge to edge, with tabs that scroll instead of overlapping */
.pchips { display: flex; gap: 6px; margin-bottom: 10px; }
.pchips button { flex: 1; min-height: 38px; padding: 6px 4px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--muted); font: 600 .8rem var(--num); cursor: pointer; }
.pchips button[aria-pressed="true"] { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
html[data-theme="dark"] .pchips button[aria-pressed="true"] { background: #E9E7FF; border-color: #E9E7FF; color: #0A0A0A; }
@media (min-width: 701px) { .pchips { display: none; } }
@media (max-width: 700px) {
  #periods th[data-p], #periods td[data-p] { display: none; }
  #periods[data-show="w"] [data-p="w"], #periods[data-show="f"] [data-p="f"], #periods[data-show="m"] [data-p="m"], #periods[data-show="y"] [data-p="y"] { display: table-cell; }
  #periods table.periods { font-size: .95rem; } #periods table.periods td { font-weight: 600; }
  /* Edge to edge: the form, the result and the report use the whole screen width */
  #takeForm, #takeTile, #dayForm, #dayTile, #calc, #sumTile, section[aria-label="Breakdown and report"] { margin-inline: -16px; border-radius: 0; border-inline: 0; }
  #takeTile, #dayTile, #sumTile { padding-inline: 16px; }
  #takeForm, #dayForm, #calc, section[aria-label="Breakdown and report"] { padding-inline: 16px; }
  #takeTile .charts, #takeTile #periods, #dayTile .charts, #sumTile dl.sum, #takeTile .sc { margin-inline: -16px; border-radius: 0; padding-inline: 16px; }
  .rtabs { overflow-x: auto; margin-inline: -16px !important; padding-inline: 16px !important; scrollbar-width: none; } .rtabs::-webkit-scrollbar { display: none; }
  .rtabs button { flex: none !important; padding-inline: 14px !important; white-space: nowrap; }
}
/* Laptops: a little wider so the form and the result both have room */
@media (min-width: 1100px) { .wrap { max-width: 1280px; } }

/* Top bar on laptops: drop-down groups, a call-to-action button and room to breathe. Phones keep the Menu button. */
.dd, .nav-cta { display: none; }
@media (min-width: 1001px) {
  nav { padding-block: 14px; }
  nav .links { align-items: center; gap: 4px; }
  nav .links > a.inline, .menu-btn { display: none; }
  .menu-panel { display: none !important; }
  .dd { display: block; position: relative; order: 1; }
  .dd-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 14px; border: 0; border-radius: 10px; background: transparent; color: var(--fg); font: inherit; font-weight: 600; font-size: .95rem; cursor: pointer; }
  .dd-btn svg { opacity: .6; transition: transform .15s; }
  .dd-btn:hover, .dd.on > .dd-btn { background: var(--brand-tint, rgba(91, 75, 240, .12)); color: var(--brand-dark, #3B32B8); }
  .dd.on > .dd-btn svg { transform: rotate(180deg); }
  .dd-panel { position: absolute; left: 0; top: calc(100% + 8px); z-index: 50; width: 330px; padding: 10px; background: var(--bg, #fff); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 60px -24px rgba(13, 13, 54, .45); }
  .dd-panel[hidden] { display: none; }
  .dd-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
  .dd-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
  .dd-panel a { display: block; padding: 10px 12px; border-radius: 10px; color: var(--fg); text-decoration: none; }
  .dd-panel a b { display: block; font-weight: 600; font-size: .95rem; } .dd-panel a small { display: block; margin-top: 2px; font-size: .8rem; font-weight: 400; color: var(--muted); line-height: 1.35; }
  .dd-panel a:hover, .dd-panel a[aria-current="page"] { background: var(--brand-tint, rgba(91, 75, 240, .12)); } .dd-panel a:hover b { color: var(--brand-dark, #3B32B8); }
  .dd-panel a::after, nav .links .dd-btn::after { display: none; }
  .nav-cta { display: inline-flex; align-items: center; order: 100; margin-left: 8px; min-height: 40px; padding: 8px 18px; border-radius: 999px; background: var(--brand-dark, #3B32B8); color: #fff !important; font-weight: 600; font-size: .92rem; text-decoration: none; white-space: nowrap; box-shadow: 0 6px 16px -8px rgba(59, 50, 184, .7); }
  nav .links a.nav-cta:hover { background: var(--brand, #5B4BF0); color: #fff !important; } nav .links a.nav-cta::after { display: none; }
  nav .links select.lang { order: 97; margin-left: 8px; } nav .links .theme-toggle { order: 98; }
  html[data-theme="dark"] .dd-btn:hover, html[data-theme="dark"] .dd.on > .dd-btn { background: rgba(255, 255, 255, .1); color: #fff; }
  html[data-theme="dark"] .dd-panel a:hover, html[data-theme="dark"] .dd-panel a[aria-current="page"] { background: rgba(255, 255, 255, .08); } html[data-theme="dark"] .dd-panel a:hover b { color: #fff; }
  html[data-theme="dark"] .nav-cta { background: #E9E7FF; color: #0A0A0A !important; } html[data-theme="dark"] nav .links a.nav-cta:hover { background: #fff; color: #0A0A0A !important; }
  /* Use the whole screen width */
  .wrap { max-width: none !important; padding-inline: clamp(20px, 3vw, 48px); }
}
@media (max-width: 1000px) { .dd, .nav-cta { display: none !important; } }
@media (min-width: 1001px) { .dd-panel { background: #fff; } html[data-theme="dark"] .dd-panel { background: #171718; } }
/* Narrow laptops: drop the button and tighten the groups so the bar never overflows */
@media (min-width: 1001px) and (max-width: 1400px) { .nav-cta { display: none; } .dd-btn { padding: 6px 9px; font-size: .9rem; } nav .links { gap: 0; } }
/* Anchors land below the sticky bar; long translated words never widen the settings column */
[id] { scroll-margin-top: 90px; }
.settings-grid > *, .settings-grid details { min-width: 0; }
.note, .settings-grid summary { overflow-wrap: anywhere; }
@media (min-width: 1001px) and (max-width: 1400px) { nav .links select.lang { min-width: 56px; flex: none; } .dd-btn { white-space: nowrap; } nav .links { flex-wrap: nowrap; } }
/* No decorative gradients: flat page, flat hero, solid fills */
html:root body { background: var(--bg); }
html[data-theme="dark"] body { background: #000; }
html:root .hero::before, html:root #takeTile::before, html:root #dayTile::before { display: none; }
html:root #takeTile .bar .net, html:root #dayTile .bar .net, html:root .meter i, html:root .roster-out .meter i { background: #A99BFA; }
html[data-theme="dark"] #takeTile .bar .net, html[data-theme="dark"] #dayTile .bar .net, html[data-theme="dark"] .meter i, html[data-theme="dark"] .roster-out .meter i { background: #E9E7FF; }
html:root .person.short .meter i { background: var(--red); }
html:root fieldset.goals input:checked + label { background: #fff; }
html[data-theme="dark"] fieldset.goals input:checked + label { background: rgba(255,255,255,.06); }
html:root fieldset.goals input:checked + label .ico { background: var(--brand-dark); }
html[data-theme="dark"] fieldset.goals input:checked + label .ico { background: #E9E7FF; color: #0A0A0A; }
/* Laptop: the form and the result card in a row end at the same line; the page scrolls, not the card */
@media (min-width: 1001px) {
  .pair > .form-tile, #sumTile, #takeTile, #dayTile { align-self: stretch; position: static; max-height: none; overflow: visible; }
}
/* Result tabs scroll instead of overlapping; the settings row title stays on one line with its cap note */
.rtabs { display: flex; overflow-x: auto; gap: 2px; scrollbar-width: none; } .rtabs::-webkit-scrollbar { display: none; }
.rtabs button { flex: none; white-space: nowrap; padding-inline: 10px; }
.settings-grid > details.more > summary { display: block; flex-wrap: nowrap; }
.settings-grid > details.more > summary::before { display: inline-block; vertical-align: middle; }
.settings-grid > details.more > summary .cap-left { white-space: nowrap; }
#periods table.periods { font-size: .8rem; } #periods table.periods th, #periods table.periods td { padding: 8px 4px; } #periods table.periods thead th { white-space: nowrap; }
@media (min-width: 1001px) and (max-width: 1360px) { #periods table.periods { font-size: .74rem; } #periods table.periods th, #periods table.periods td { padding: 8px 3px; } #periods table.periods th:first-child, #periods table.periods td:first-child { max-width: 72px; } #periods { padding-inline: 12px; } }

/* ===== Design pass 3: equal columns, designed dark mode, inner pages in the home-page style ===== */
@media (min-width: 1001px) {
  .pair > .form-tile, .pair > .s5, .s7, .s5 { grid-column: span 6; }
  section[aria-label="Breakdown and report"] { grid-column: span 6; }
}

/* Dark: deep ink with a violet accent. Depth comes from three surface steps, not from pure black. */
html[data-theme="dark"] {
  --bg: #0A0B16; --panel: #12142A; --panel2: #1A1D38; --soft: #1A1D38; --fg: #F1F1FA; --muted: #A4A8C6;
  --line: rgba(160,168,255,.16); --hair: rgba(160,168,255,.16);
  --gold: #B3A8FF; --gold-lite: #D8D3FF; --brand: #B3A8FF; --brand-dark: #D8D3FF; --brand-tint: rgba(139,124,255,.16);
  --indigo: #B3A8FF; --mark: #B3A8FF; --deep: #12142A;
  --btn-bg: #6A5AF0; --btn-fg: #fff; --btn-hover: #5B4BE0;
  --c1: #D8D3FF; --c2: #5A6090; --c3: #8F7CFF; --c4: #2B3060; --c5: #B3A8FF;
  --b1: #23274D; --b2: #3A3F7A; --b3: #5C58C8; --b4: #8F7CFF; --b5: #E2DEFF; --cap1: #B3A8FF; --cap2: #8F7CFF; --cap3: #262B58;
}
html[data-theme="dark"] body { background: radial-gradient(900px 500px at 85% -8%, rgba(124,108,245,.16), transparent 65%), var(--bg); }
html[data-theme="dark"] nav { background: rgba(10,11,22,.86); border-bottom-color: var(--line); }
html[data-theme="dark"] .hero, html[data-theme="dark"] .tile, html[data-theme="dark"] .tile.white, html[data-theme="dark"] .tile.mint, html[data-theme="dark"] .tile.ice, html[data-theme="dark"] .step, html[data-theme="dark"] #takeTile, html[data-theme="dark"] #dayTile, html[data-theme="dark"] #sumTile { background: var(--panel); border: 1px solid var(--line); box-shadow: 0 1px 0 rgba(255,255,255,.04) inset; }
html[data-theme="dark"] .hero { background: linear-gradient(180deg, #171A3A, #12142A); }
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { background: #0E1024; border-color: rgba(160,168,255,.22); }
html[data-theme="dark"] input:focus, html[data-theme="dark"] select:focus, html[data-theme="dark"] textarea:focus { border-color: #8F7CFF; box-shadow: 0 0 0 3px rgba(143,124,255,.25); outline: 0; }
html[data-theme="dark"] select option { background: #12142A; }
html[data-theme="dark"] .dd-panel, html[data-theme="dark"] .menu-panel { background: #12142A; border-color: var(--line); }
html[data-theme="dark"] fieldset.seg input:checked + label, html[data-theme="dark"] .chip-btn.on { background: #6A5AF0; border-color: #6A5AF0; color: #fff; }
html[data-theme="dark"] fieldset.goals input:checked + label { background: var(--brand-tint); border-color: #8F7CFF; box-shadow: inset 0 0 0 1px #8F7CFF; }
html[data-theme="dark"] input.slider { background: linear-gradient(to right, #8F7CFF var(--fill, 30%), rgba(255,255,255,.18) var(--fill, 30%)); }
html[data-theme="dark"] input.slider::-webkit-slider-thumb { background: #fff; border-color: #6A5AF0; box-shadow: 0 0 0 5px rgba(143,124,255,.25); } html[data-theme="dark"] input.slider::-moz-range-thumb { background: #fff; border-color: #6A5AF0; }
html[data-theme="dark"] input[type=checkbox]:checked { background: #6A5AF0; border-color: #6A5AF0; }
html[data-theme="dark"] input[type=checkbox]::after { border-color: #fff; }
html[data-theme="dark"] .fact, html[data-theme="dark"] .sc, html[data-theme="dark"] .rgrid, html[data-theme="dark"] .roster-out, html[data-theme="dark"] #takeTile .charts, html[data-theme="dark"] #takeTile dl.sum, html[data-theme="dark"] #dayTile .charts, html[data-theme="dark"] #dayTile dl.sum, html[data-theme="dark"] #takeTile .sc, html[data-theme="dark"] #dayTile .sc { background: var(--panel2); }
html[data-theme="dark"] #takeTile .bar .net, html[data-theme="dark"] #dayTile .bar .net, html[data-theme="dark"] .meter i, html[data-theme="dark"] .roster-out .meter i, html[data-theme="dark"] #takeTile .rtabs .ind, html[data-theme="dark"] #dayTile .rtabs .ind { background: #8F7CFF; }
html[data-theme="dark"] .livebar { background: #12142A; border-top-color: var(--line); }
html[data-theme="dark"] .brand svg rect:first-child { fill: #6A5AF0; } html[data-theme="dark"] .brand svg rect:not(:first-child) { fill: #fff; } html[data-theme="dark"] .brand svg path { stroke: #fff; }
html[data-theme="dark"] .brand { color: #E6E2FF; }
html[data-theme="dark"] .dd-btn:hover, html[data-theme="dark"] .theme-toggle:hover { background: var(--brand-tint); }
html[data-theme="dark"] table th { color: var(--muted); }
html[data-theme="dark"] td, html[data-theme="dark"] th { border-bottom-color: rgba(160,168,255,.12); }

/* Inner pages (rates, FBT, loans, child care, privacy…): a hero card, then each section as a card, like the home page. doc.js adds the wrappers. */
main.doc.styled { max-width: 1000px; display: grid; gap: 14px; padding-top: 14px; }
main.doc.styled > .doc-hero { padding: clamp(22px, 4vw, 44px); border-radius: 28px; border: 1px solid var(--line); background: var(--panel, #fff); }
main.doc.styled > .doc-hero h1 { max-width: 20ch; font-size: clamp(2rem, 5vw, 3.2rem); }
main.doc.styled > .doc-hero p { max-width: 62ch; }
main.doc.styled > .doc-hero .lede { margin-top: 14px; }
main.doc.styled .doc-card { padding: clamp(18px, 3vw, 30px); border-radius: 24px; border: 1px solid var(--line); background: var(--panel, #fff); min-width: 0; overflow-x: auto; }
main.doc.styled .doc-card > h2:first-child { margin-top: 0; }
main.doc.styled .doc-card > :last-child { margin-bottom: 0; }
.doc-eyebrow { display: inline-block; font: 600 .78rem var(--num); letter-spacing: .1em; text-transform: uppercase; color: var(--brand); margin-bottom: 10px; }
html:not([data-theme="dark"]) main.doc.styled > .doc-hero { background: var(--brand-tint); border-color: transparent; }
html:not([data-theme="dark"]) main.doc.styled .doc-card { background: #fff; border-color: rgba(11,11,94,.1); }
html[data-theme="dark"] main.doc.styled > .doc-hero { background: linear-gradient(180deg, #171A3A, #12142A); }
@media (max-width: 700px) { main.doc.styled > .doc-hero, main.doc.styled .doc-card { border-radius: 20px; } }

/* Contact form */
.contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.contact-grid .field { display: grid; gap: 6px; }
.contact-grid .wide { grid-column: 1 / -1; }
.contact-topics { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.contact-topics label { display: inline-flex; align-items: center; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; color: var(--fg); }
.contact-topics input { position: absolute; opacity: 0; pointer-events: none; }
.contact-topics input:checked + span, .contact-topics label:has(input:checked) { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); }
.contact-topics label:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.contact-hp { position: absolute; left: -9999px; }
@media (max-width: 700px) { .contact-grid { grid-template-columns: 1fr; } }

/* Assistant */
.fp-panel { position: fixed; right: 18px; bottom: 76px; z-index: 61; width: min(400px, calc(100vw - 24px)); height: min(600px, calc(100vh - 100px)); display: grid; grid-template-rows: auto 1fr auto auto; background: var(--panel, #fff); color: var(--fg); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 24px 60px rgba(0,0,0,.28); overflow: hidden; }
.fp-panel[hidden] { display: none; }
.fp-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.fp-head b { font: 700 1rem var(--display); } .fp-head small { display: block; color: var(--muted); font-size: .78rem; font-weight: 400; }
.fp-head button { border: 0; background: none; color: var(--fg); font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 4px 8px; border-radius: 8px; }
.fp-log { overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.fp-msg { max-width: 88%; padding: 10px 13px; border-radius: 16px; font-size: .94rem; line-height: 1.5; overflow-wrap: anywhere; }
.fp-msg.bot { align-self: flex-start; background: var(--brand-tint); border-bottom-left-radius: 5px; }
.fp-msg.me { align-self: flex-end; background: var(--btn-bg); color: var(--btn-fg); border-bottom-right-radius: 5px; }
.fp-msg a { color: inherit; font-weight: 600; } .fp-msg.me a { color: var(--btn-fg); }
.fp-msg table { width: 100%; border-collapse: collapse; margin: 6px 0 0; font-size: .88rem; } .fp-msg td { padding: 3px 0; border: 0; } .fp-msg td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.fp-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 10px; }
.fp-chips button { font: 500 .82rem var(--num); padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--fg); cursor: pointer; }
.fp-chips button:hover { border-color: var(--brand); }
.fp-form { display: flex; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid var(--line); }
.fp-form input { flex: 1; min-width: 0; margin: 0; }
.fp-form button { padding: 0 16px; border-radius: 12px; border: 0; background: var(--btn-bg); color: var(--btn-fg); font-weight: 600; cursor: pointer; }
main.doc.styled .doc-flow { display: grid; gap: 14px; min-width: 0; }
main.doc.styled > .doc-hero { padding: clamp(20px, 3.5vw, 36px); }
main.doc.styled > .doc-hero h1 { margin: 0 0 12px; }
main.doc.styled > .doc-hero > :last-child { margin-bottom: 0; }
main.doc.styled > .doc-hero label { margin: 14px 0 0 !important; }
main.doc.styled, main.doc.styled .doc-flow { grid-template-columns: minmax(0, 1fr); }
.fp-panel { grid-template-columns: minmax(0, 1fr); } .fp-head > div { min-width: 0; } .fp-head small { overflow-wrap: anywhere; }

.fp-tools { display: flex; align-items: center; gap: 2px; flex: none; }
.fp-head .fp-spk, .fp-form .fp-mic { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 10px; border: 0; background: none; color: var(--fg); cursor: pointer; }
.fp-form .fp-mic { border: 1px solid var(--line); width: 42px; height: auto; flex: none; }
.fp-form .fp-mic.on { background: #C2410C; color: #fff; border-color: #C2410C; animation: fpPulse 1.2s ease-in-out infinite; }
@keyframes fpPulse { 50% { box-shadow: 0 0 0 6px rgba(194,65,12,.25); } }
@media (prefers-reduced-motion: reduce) { .fp-form .fp-mic.on { animation: none; } }

/* Dot: same look as the chat on dotinfy.com.au (navy, royal, cyan, paper bubbles, rounded card, typing dots) */
.fp-panel { border: 1px solid #E1E5EF; border-radius: 28px; background: #fff; box-shadow: 0 40px 80px -30px rgba(11,16,128,.45); color: #0B0F45; }
.fp-head { padding: 16px 22px; border-bottom: 1px solid #E1E5EF; }
.fp-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.fp-head b { color: #0B1080; font: 600 .98rem var(--display); letter-spacing: .01em; }
.fp-head small { display: flex; align-items: center; gap: 6px; color: #848BA8; font: 400 .72rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.fp-head small i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #2BD47D; box-shadow: 0 0 0 3px rgba(43,212,125,.18); }
.fp-head .fp-spk, .fp-head button { color: #0B1080; }
.fp-log { background: #FCFDFF; padding: 24px 22px; gap: 12px; scroll-behavior: smooth; }
.fp-msg { max-width: 86%; padding: 12px 16px; border-radius: 18px; font-size: .95rem; line-height: 1.6; animation: fpIn .45s cubic-bezier(.32,.72,0,1) both; }
.fp-msg.bot { background: #fff; border: 1px solid #E1E5EF; color: #0B0F45; border-bottom-left-radius: 6px; }
.fp-msg.me { background: #0B1080; color: #fff; border-bottom-right-radius: 6px; }
.fp-msg a { color: #1E56C8; } .fp-msg.me a { color: #fff; }
.fp-msg td { border-bottom: 1px solid #EEF1F7; padding: 5px 0; }
@keyframes fpIn { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.fp-typing { display: inline-flex; gap: 5px; padding: 14px 16px; }
.fp-typing i { width: 7px; height: 7px; border-radius: 50%; background: #1E56C8; animation: fpDot 1s ease-in-out infinite; }
.fp-typing i:nth-child(2) { animation-delay: .15s; } .fp-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes fpDot { 0%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }
.fp-chips { padding: 16px 22px 18px; gap: 8px; border-top: 1px solid #E1E5EF; background: #fff; }
.fp-chips button { border: 1px solid #C9D0E0; background: #fff; color: #0B1080; font: 500 .86rem var(--body); padding: 9px 14px; border-radius: 999px; transition: border-color .3s, color .3s, transform .3s; }
.fp-chips button:hover { border-color: #12A8F0; color: #1E56C8; transform: translateY(-1px); }
.fp-form { border-top: 1px solid #E1E5EF; background: #fff; padding: 12px 16px 16px; }
.fp-form input { border-radius: 999px; border: 1px solid #C9D0E0; background: #fff; color: #0B0F45; padding: 10px 16px; }
.fp-form input:focus { border-color: #12A8F0; box-shadow: 0 0 0 3px rgba(18,168,240,.2); outline: 0; }
.fp-form button[type=submit] { border-radius: 999px; background: #0B1080; color: #fff; padding: 0 18px; }
.fp-form .fp-mic { border-radius: 999px; border-color: #C9D0E0; color: #0B1080; }
@media (prefers-reduced-motion: reduce) { .fp-msg, .fp-typing i { animation: none; } }
html[data-theme="dark"] .fp-panel { background: #12142A; border-color: rgba(160,168,255,.22); color: #F1F1FA; }
html[data-theme="dark"] .fp-head, html[data-theme="dark"] .fp-chips, html[data-theme="dark"] .fp-form { background: #12142A; border-color: rgba(160,168,255,.16); }
html[data-theme="dark"] .fp-head b, html[data-theme="dark"] .fp-head .fp-spk, html[data-theme="dark"] .fp-head button { color: #E6E2FF; }
html[data-theme="dark"] .fp-log { background: #0A0B16; }
html[data-theme="dark"] .fp-msg.bot { background: #1A1D38; border-color: rgba(160,168,255,.18); color: #F1F1FA; }
html[data-theme="dark"] .fp-msg.me { background: #6A5AF0; }
html[data-theme="dark"] .fp-msg a { color: #B3A8FF; } html[data-theme="dark"] .fp-msg td { border-bottom-color: rgba(160,168,255,.14); }
html[data-theme="dark"] .fp-typing i { background: #B3A8FF; }
html[data-theme="dark"] .fp-chips button { background: transparent; color: #E6E2FF; border-color: rgba(160,168,255,.3); }
html[data-theme="dark"] .fp-form input { background: #0E1024; color: #F1F1FA; border-color: rgba(160,168,255,.22); }
html[data-theme="dark"] .fp-form button[type=submit] { background: #6A5AF0; }
html[data-theme="dark"] .fp-form .fp-mic { color: #E6E2FF; border-color: rgba(160,168,255,.3); }
.fp-head small { white-space: nowrap; }
@media (max-width: 380px) { .fp-head small { white-space: normal; } }

/* Dot's face is a canvas drawn by assistant.js */

/* Dot is just the sphere: no pill and no name. The launcher floats on its own shadow. */
.fp-panel { bottom: 112px; height: min(600px, calc(100vh - 132px)); }
.fp-head small { white-space: normal; line-height: 1.35; }
.fp-who { flex: 1; }

/* Dot launcher: from the Dot Infy chat widget */
.dot-launcher { position: fixed; z-index: 60; right: 24px; bottom: 22px; display: flex; align-items: flex-end; gap: 10px; transition: opacity .5s, transform .6s; }
.dl-dot { position: relative; flex: none; width: 64px; height: 64px; border: 0; background: none; padding: 0; cursor: grab; touch-action: none; border-radius: 50%; }
.dl-dot:hover, html[data-theme="dark"] .dl-dot { background: none; border: 0; }
.dl-dot:active { cursor: grabbing; }
.dl-dot:focus-visible { outline: 2px solid #12A8F0; outline-offset: 2px; }
.dl-dot canvas { display: block; width: 100%; height: 100%; transform-origin: 50% 80%; }
.dl-bubble { position: relative; margin-bottom: 36px; max-width: 252px; padding: 10px 13px 11px; border-radius: 14px 14px 5px 14px; background: #fff; box-shadow: 0 18px 40px -18px rgba(11,16,128,.35), 0 0 0 1px #DCE3F2; font-size: .82rem; line-height: 1.4; color: #0B1080; transform-origin: 100% 100%; transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .3s; }
.dot-launcher:not(.open) .dl-bubble { transform: scale(.85); opacity: 0; pointer-events: none; }
.dl-bubble small { display: block; margin-bottom: 4px; font: 500 .7rem ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: #6B76A8; }
.dl-bubble p { margin: 0; padding-right: 12px; }
.dl-close { position: absolute; top: 4px; right: 5px; width: 20px; height: 20px; border: 0; background: none; border-radius: 50%; font-size: .85rem; line-height: 1; color: #6B76A8; cursor: pointer; padding: 0; }
.dl-close:hover { color: #0B1080; background: #F1F4FB; }
.dl-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.dl-chips:empty { display: none; }
.dl-chip { padding: 4px 9px; border-radius: 999px; border: 1px solid #DCE3F2; background: #fff; font: 500 .7rem/1.3 system-ui, sans-serif; color: #0B1080; cursor: pointer; }
.dl-chip:hover, .dl-chip:focus-visible { border-color: #12A8F0; color: #1E56C8; background: #F5F9FF; }
.dl-chip:first-child { background: #0B1080; border-color: #0B1080; color: #fff; }
.dl-chip:first-child:hover { background: #1E56C8; border-color: #1E56C8; }
.dl-z { position: absolute; right: 4px; top: -4px; font: 600 .85rem ui-monospace, monospace; color: #1E56C8; opacity: 0; pointer-events: none; }
.dot-launcher.sleep .dl-z { animation: dlZ 2.6s infinite; }
@keyframes dlZ { 0% { opacity: 0; transform: translate(0,6px) scale(.7); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(10px,-18px) scale(1.15); } }
html[data-theme="dark"] .dl-bubble { background: #12142A; color: #F1F1FA; box-shadow: 0 18px 40px -18px rgba(0,0,0,.6), 0 0 0 1px rgba(160,168,255,.22); }
html[data-theme="dark"] .dl-bubble small, html[data-theme="dark"] .dl-close { color: #A4A8C6; }
html[data-theme="dark"] .dl-chip { background: transparent; border-color: rgba(160,168,255,.3); color: #E6E2FF; }
html[data-theme="dark"] .dl-chip:first-child { background: #6A5AF0; border-color: #6A5AF0; color: #fff; }
.fp-panel { bottom: 100px; height: min(600px, calc(100vh - 120px)); }
.fp-who .dotface { width: 54px; height: 54px; margin: -6px -4px -6px -6px; }
@media (max-width: 760px) { .dl-dot { width: 52px; height: 52px; } .dl-bubble { max-width: 200px; margin-bottom: 30px; } }
@media (max-width: 520px) { .dot-launcher { right: 10px; bottom: 10px; } .fp-panel { bottom: 8px; height: calc(100vh - 16px); } }
@media print { .dot-launcher { display: none !important; } }
.dot-launcher .dl-chip { padding: 4px 9px; min-height: 0; min-width: 0; margin: 0; font: 500 .7rem/1.3 system-ui, sans-serif; letter-spacing: 0; text-transform: none; border-radius: 999px; box-shadow: none; width: auto; }
.dot-launcher .dl-close { padding: 0; min-height: 0; min-width: 0; width: 20px; height: 20px; font-size: .85rem; border-radius: 50%; border: 0; background: none; box-shadow: none; }
.dot-launcher .dl-dot { padding: 0; min-height: 0; min-width: 0; width: 64px; height: 64px; border: 0; background: none; box-shadow: none; border-radius: 50%; }
@media (max-width: 760px) { .dot-launcher .dl-dot { width: 52px; height: 52px; } }
.dot-launcher .dl-chip:first-child { background: #0B1080; border: 1px solid #0B1080; color: #fff; }
html[data-theme="dark"] .dot-launcher .dl-chip { background: transparent; border: 1px solid rgba(160,168,255,.3); color: #E6E2FF; }
html[data-theme="dark"] .dot-launcher .dl-chip:first-child { background: #6A5AF0; border-color: #6A5AF0; color: #fff; }

.dot-launcher { bottom: calc(22px + var(--dot-lift, 0px)); transition: opacity .5s, transform .6s, bottom .25s; }
.fp-panel { bottom: calc(100px + var(--dot-lift, 0px)); height: min(600px, calc(100vh - 120px - var(--dot-lift, 0px))); }
@media (max-width: 520px) { .dot-launcher { bottom: calc(10px + var(--dot-lift, 0px)); } .fp-panel { bottom: 8px; height: calc(100vh - 16px); } }

/* Compact banner: the title on the left, a two-line summary on the right, so the banner stays short */
.hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 8px clamp(20px, 4vw, 56px); padding: clamp(18px, 2.4vw, 30px) clamp(24px, 4vw, 52px); }
.hero h1 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); max-width: 18ch; }
.hero .lede { max-width: 62ch; font-size: 1rem; line-height: 1.5; margin: 0; }
.hero-proof { display: none; }
@media (max-width: 760px) { .hero { grid-template-columns: 1fr; padding: 20px 22px; } .hero .lede { font-size: .95rem; } }
.hero h1 { max-width: 22ch; }

/* ===== Inner pages, round two: navy title banner, answer tiles beside the inputs, key-figure rows ===== */
html:root main.doc.styled > header.doc-hero { background: #0B0B5E; border: 0; border-radius: 30px; color: #fff; padding: clamp(24px, 4vw, 44px); }
html[data-theme="dark"]:root main.doc.styled > header.doc-hero { background: linear-gradient(180deg, #1B1F52, #12142A); border: 1px solid var(--line); }
main.doc.styled > .doc-hero h1 { color: #fff; font-size: clamp(2rem, 4.4vw, 3.1rem); max-width: 22ch; margin: 0 0 12px; }
main.doc.styled > .doc-hero .lede { color: rgba(255,255,255,.84); font-size: 1.05rem; max-width: 62ch; margin: 0; }
main.doc.styled > .doc-hero a { color: #CFE0FF; }
main.doc.styled > .doc-hero .doc-eyebrow { color: #A9C4FF; margin-bottom: 14px; letter-spacing: .12em; }
main.doc.styled > .doc-hero label { color: rgba(255,255,255,.85); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 18px 0 0 !important; }
main.doc.styled > .doc-hero select { background: #fff; color: #0B0B5E; border-color: transparent; }
.hero-more { margin-top: 16px; max-width: 72ch; }
.hero-more summary { cursor: pointer; width: fit-content; color: #CFE0FF; font-size: .9rem; font-weight: 600; list-style: none; padding: 6px 12px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; }
.hero-more summary::-webkit-details-marker { display: none; }
.hero-more summary::after { content: " +"; } .hero-more[open] summary::after { content: " \2212"; }
.hero-more p { color: rgba(255,255,255,.78); font-size: .93rem; margin: 12px 0 0; }

.doc .calc label { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; margin: 0; font-size: .88rem; color: var(--muted); }
.doc .calc input:not([type=checkbox]), .doc .calc select { width: 100%; box-sizing: border-box; }
.doc-card .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: stretch; margin: 6px 0 0; }
.split-form { min-width: 0; }
.split-form .calc { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.split-form .calc:first-child { margin-top: 0; }
.answer { background: #0B0B5E; color: #fff; border-radius: 22px; padding: clamp(18px, 2.4vw, 28px); display: flex; flex-direction: column; gap: 14px; min-width: 0; align-self: stretch; }
.answer .kpis { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.answer .kpis:empty { display: none; }
.kpi { background: rgba(255,255,255,.09); border-radius: 14px; padding: 12px 14px; min-width: 0; }
.kpi small { display: block; font: 500 .78rem var(--num); letter-spacing: .03em; color: rgba(255,255,255,.72); }
.kpi b { display: block; font: 600 1.4rem/1.2 var(--num); font-variant-numeric: tabular-nums lining-nums; overflow-wrap: anywhere; margin-top: 2px; }
.answer .kpi.lead { grid-column: 1 / -1; background: none; padding: 0 0 12px; border-bottom: 1px solid rgba(255,255,255,.2); border-radius: 0; }
.answer .kpi.lead b { font-size: clamp(2.2rem, 4vw, 3.1rem); letter-spacing: -.02em; }
.answer .res, .answer p { color: rgba(255,255,255,.82); font-weight: 400; font-size: .92rem; line-height: 1.55; margin: 0; }
.answer .res:empty, .answer p:empty { display: none; }
.answer #mDutySrc { color: rgba(255,255,255,.6); font-size: .82rem; }
.answer .note { color: rgba(255,255,255,.65); }
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.kpi-row:empty { display: none; }
.kpi-row .kpi { background: #fff; border: 1px solid rgba(11,11,94,.1); color: var(--fg); border-radius: 20px; padding: 16px 18px; }
.kpi-row .kpi small { color: var(--muted); }
.kpi-row .kpi b { font-size: 1.7rem; color: var(--brand-dark); }
.kpi-row .kpi.lead { background: #0B0B5E; border-color: #0B0B5E; }
.kpi-row .kpi.lead small { color: rgba(255,255,255,.72); } .kpi-row .kpi.lead b { color: #fff; }
.doc .tw table { border-collapse: collapse; width: 100%; }
.doc .tw th { text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; }
.doc .tw tbody tr:nth-child(even) td { background: rgba(91,75,240,.045); }
.doc .tw td:first-child { font-weight: 500; }
#cOut .res { display: none; }
@media (max-width: 900px) { .doc-card .split { grid-template-columns: minmax(0, 1fr); } .split-form .calc { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }
@media (max-width: 520px) { .answer .kpis { grid-template-columns: minmax(0, 1fr); } .kpi b { font-size: 1.25rem; } }
html[data-theme="dark"] .answer { background: #1A1D38; border: 1px solid var(--line); }
html[data-theme="dark"] .kpi-row .kpi { background: var(--panel); border-color: var(--line); }
html[data-theme="dark"] .kpi-row .kpi b { color: #D8D3FF; }
html[data-theme="dark"] .kpi-row .kpi.lead { background: #1A1D38; }
html[data-theme="dark"] .doc .tw tbody tr:nth-child(even) td { background: rgba(160,168,255,.06); }
html:root main.doc.styled .answer, html:root main.doc.styled .answer .kpi b, html:root main.doc.styled .answer .kpi.lead b { color: #fff; }
html:root main.doc.styled .answer .kpi small { color: rgba(255,255,255,.72); }
html:root main.doc.styled .answer .res, html:root main.doc.styled .answer p { color: rgba(255,255,255,.84); }
html:root main.doc.styled .answer #mDutySrc { color: rgba(255,255,255,.6); }
html:root main.doc.styled .answer .note { color: rgba(255,255,255,.66); }
html:root main.doc.styled .kpi-row .kpi b { color: var(--brand-dark); }
html:root main.doc.styled .kpi-row .kpi.lead b { color: #fff; }
html:root main.doc.styled .kpi-row .kpi small { color: var(--muted); }
html:root main.doc.styled .kpi-row .kpi.lead small { color: rgba(255,255,255,.72); }
html[data-theme="dark"]:root main.doc.styled .kpi-row .kpi b { color: #D8D3FF; }
html[data-theme="dark"]:root main.doc.styled .kpi-row .kpi.lead b { color: #fff; }

/* ===== Pro design pass (see docs/BRAND.md): tokens, payslip answers, one motion, quiet reading sections ===== */
:root { --ink: #0B0B5E; --violet: #5B4BF0; --signal: #12A8F0; --lilac: #F0EFFA; --sheet: #FFFFFF; --shortfall: #C2410C; }
html[data-theme="dark"] { --ink: #1A1D38; --violet: #6A5AF0; --lilac: #0A0B16; --sheet: #12142A; }

/* signature: the answer is a pay slip (big total, dashed rules between figures); no scalloped edge */
#sumTile, #takeTile, #dayTile, .answer { border-radius: 22px; -webkit-mask: none; mask: none; }
#sumTile, #takeTile, #dayTile { padding-block: 28px; }
.answer { padding-block: 20px; }
.kpi, .answer .kpi.lead { border-radius: 4px; }
.answer .kpi.lead b, #sumTile .amount-n, #takeTile .amount-n, #dayTile .amount-n { font-feature-settings: "tnum" 1, "lnum" 1; }
.answer .kpi:not(.lead) { background: none; border-top: 1px dashed rgba(255,255,255,.28); border-radius: 0; padding: 10px 2px 0; }
html[data-theme="dark"] #sumTile, html[data-theme="dark"] #takeTile, html[data-theme="dark"] #dayTile, html[data-theme="dark"] .answer { border: 0; }

/* one orchestrated moment: the title banner. The rest only answers actions. */
@media (prefers-reduced-motion: no-preference) {
  .hero h1 { animation: rise .8s var(--ease) both; } .hero > div { animation: rise .8s var(--ease) .12s both; }
  fieldset.goals label, #takeForm, #takeTile { animation: none; }
  details.more[open] > :not(summary), .person[open] > :not(summary) { animation-duration: .25s; }
}
fieldset.goals label:hover, .person:hover, .sc:hover { transform: none; box-shadow: none; }
.fp-chips button:hover { transform: none; }

/* the three tools: the open one is solid, the others stay quiet */
html:root fieldset.goals input:checked + label { background: var(--ink); border-color: var(--ink); box-shadow: none; color: #fff; }
html:root fieldset.goals input:checked + label b, html:root fieldset.goals input:checked + label span { color: #fff; }
html[data-theme="dark"]:root fieldset.goals input:checked + label { background: var(--violet); border-color: var(--violet); }
fieldset.goals label { box-shadow: none; }

/* inner pages: breadcrumb instead of a caps label; reading sections are flat, calculated ones are boxed */
.doc-crumb { display: flex; gap: 8px; align-items: center; font-size: .9rem; margin-bottom: 14px; color: rgba(255,255,255,.7); }
.doc-crumb a { color: #CFE0FF; text-decoration: none; } .doc-crumb a:hover, .doc-crumb a:focus-visible { text-decoration: underline; }
main.doc.styled .doc-eyebrow { display: none; }
main.doc.styled .doc-card:not(:has(.split, table, .tw, form, .calc, .kid)) { background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 26px 2px 4px; overflow: visible; }
html:not([data-theme="dark"]) main.doc.styled .doc-card:not(:has(.split, table, .tw, form, .calc, .kid)) { background: none; border-color: rgba(11,11,94,.14); }

/* focus you can see everywhere */
:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; }
.doc-hero :focus-visible, .answer :focus-visible, fieldset.goals input:checked + label:focus-visible { outline-color: #fff; }
html:root fieldset.goals input:checked + label b::after { background: #fff; color: var(--ink); }
html[data-theme="dark"]:root fieldset.goals input:checked + label b::after { color: #2A1F8F; }
html:root main.doc.styled .doc-hero p, html:root main.doc.styled .doc-hero .hero-more p, html:root main.doc.styled .doc-hero li { color: rgba(255,255,255,.84); }
html:root main.doc.styled .doc-hero .hero-more summary { color: #CFE0FF; }
html[data-theme="dark"] { --btn-hover: #5B4BE0; }

/* No big banner on the calculator page: the three tool cards are the first thing you see. The title stays for screen readers and search. */
main.bento > .hero { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; animation: none; }
main.bento > .hero * { animation: none; }
.bento { padding-top: 14px; }
/* the one motion: an answer prints out of the slip when it appears (first load, or when you switch tool) */
@keyframes slipPrint { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: no-preference) {
  #sumTile:not([hidden]), #takeTile:not([hidden]), #dayTile:not([hidden]) { animation: slipPrint .7s cubic-bezier(.2,.7,.2,1) both; }
}

/* Extra sections under the take-home and salary or day rate tabs */
.more-tile[data-empty="1"] { display: none; }
.more-tile h2 { margin: 0 0 6px; }
.ladder { width: 100%; border-collapse: collapse; }
.ladder th { text-align: left; font-weight: 600; font-size: .78rem; color: var(--muted); padding: 8px 6px; }
.ladder td { padding: 9px 6px; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums lining-nums; }
.ladder td:nth-child(n+2), .ladder th:nth-child(n+2) { text-align: right; }
.ladder tr.head td, .ladder tr.sub td { color: var(--muted); }
.ladder tr.total td { font-weight: 700; border-top: 2px solid var(--fg); }
#daySide .ladder td:nth-child(n+2) { white-space: normal; }
.nexts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-top: 10px; }
.nexts a { display: block; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; color: var(--fg); text-decoration: none; }
.nexts a b { display: block; font-size: 1rem; } .nexts a span { display: block; margin-top: 4px; font-size: .88rem; color: var(--muted); }
.nexts a:hover, .nexts a:focus-visible { border-color: var(--violet); }
#takeFaq details { border-top: 1px solid var(--line); padding: 10px 0; } #takeFaq details:first-of-type { border-top: 0; }
#takeFaq summary { cursor: pointer; font-weight: 600; } #takeFaq details p { margin: 8px 0 0; color: var(--muted); font-size: .95rem; }
.daysbar { display: flex; height: 38px; border-radius: 10px; overflow: hidden; margin: 12px 0 10px; gap: 2px; }
.daysbar span { display: grid; place-items: center; min-width: 0; font: 600 .8rem var(--num); color: #fff; }
.daysbar .bill, .whylegend .bill { background: #0B0B5E; } .daysbar .leave, .whylegend .leave { background: #5B4BF0; } .daysbar .hol, .whylegend .hol { background: #12A8F0; color: #06153F; }
.daysbar .sick, .whylegend .sick { background: #8B7CF6; } .daysbar .gap, .whylegend .gap { background: #C2410C; }
.whylegend { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; margin: 0; padding: 0; font-size: .9rem; color: var(--muted); }
.whylegend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }
#dayBreak label { display: block; font-size: .92rem; } #dayBreak input.slider { width: 100%; margin-top: 8px; }
#breakChart svg { width: 100%; height: auto; margin-top: 8px; color: var(--muted); }
.cover { margin: 8px 0 10px; padding-left: 1.1rem; } .cover li { margin: 6px 0; color: var(--muted); } .cover b { color: var(--fg); }
html[data-theme="dark"] .daysbar .bill, html[data-theme="dark"] .whylegend .bill { background: #3A3F7A; }

/* Reserve the header's final size so the menu being added by nav.js doesn't shift the page */
nav { min-height: 76px; }
@media (max-width: 1000px) { nav .links { min-width: 151px; justify-content: flex-end; } }