/* taxcalculator.co.nz. Same system as payecalculator.co.nz (Jobtracker design system) in its own colour, plum.
   everything else, soft panels, chips, a coloured band instead of black) with its own colour: IRD-style navy.
   Contrast: navy #4A2D6B on white 11.4:1; band text #DCCFEA on navy 7.6:1; small print #C3B2DA on navy 5.6:1. */
@font-face{font-family:Bitter;src:url(/fonts/bitter-700-latin.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF}
@font-face{font-family:Bitter;src:url(/fonts/bitter-700-latin-ext.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0100-024F,U+1E00-1EFF,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Bitter Fallback";src:local("Georgia");size-adjust:89.5%;font-weight:700}
:root{
  --paper:#FFFFFF; --ink:#201e1d; --muted:#5A6169; --line:#E3E5E8; --input-line:#8B94A0;
  --accent:#4A2D6B; --accent-hover:#3A2254; --soft:#F3EFF8; --soft-line:#DDD2EA;
  --band:#4A2D6B; --band-text:#DCCFEA; --band-fine:#C3B2DA;
  --chip:#F1F2F4; --good-bg:#F0F7F2; --good-line:#CDE3D3; --good-ink:#1E5631;
  /* Money leaving: not the danger red. PAYE is a fact, not an error. */
  --out:#9A3A28; --out-soft:#FBF5F3; --out-line:#EBD9D4;
  --ks:#2F5DA8; --sl:#6A45A3; --acc:#8B5A0B; --take:#1E6B3A;
  --warn:#8F5F08; --warn-soft:#FAF4E6; --warn-line:#E8DCC0;
  --display:Bitter,"Bitter Fallback",Georgia,"Times New Roman",serif;
  --frame:min(1180px, calc(100% - 32px)); --radius:10px;
  --shadow:0 1px 2px rgba(32,30,29,.05),0 8px 24px rgba(32,30,29,.07);
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.015em;line-height:1.15;margin:0 0 .5em;text-wrap:balance}
h1{font-size:clamp(2rem,4.6vw,3.1rem)}
h2{font-size:clamp(1.5rem,3vw,2rem)}
h3{font-size:1.2rem}
p{margin:0 0 1em}
a{color:var(--accent);text-underline-offset:3px}
a:hover{color:var(--accent-hover)}
img,svg{max-width:100%}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}
.wrap{width:var(--frame);margin-inline:auto}
.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;z-index:50;background:#fff;padding:8px 12px}
.muted{color:var(--muted)}
.eyebrow{font-size:.82rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:0 0 10px}
.lead{font-size:clamp(1.05rem,1.6vw,1.2rem);color:var(--muted);max-width:62ch}

/* Header */
.site-head{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;gap:16px;height:64px}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font:700 1.3rem/1 var(--display);letter-spacing:-.02em;margin-right:auto}
.brand svg{width:34px;height:34px;flex:none}
.brand small{font:600 .95rem/1 system-ui,sans-serif;color:var(--muted);letter-spacing:0}
.nav{display:flex;gap:4px;align-items:center}
.nav a{color:var(--ink);text-decoration:none;font-size:.98rem;font-weight:500;padding:8px 12px;border-radius:8px}
.nav a:hover,.nav a[aria-current=page]{background:var(--soft);color:var(--accent)}
.menu{display:none}
.menu summary{list-style:none;cursor:pointer;width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line);border-radius:10px}
.menu summary::-webkit-details-marker{display:none}
.bars{display:grid;gap:5px;width:20px}.bars i{display:block;height:2px;background:var(--ink);border-radius:2px}
.menu-panel{position:fixed;inset:64px 0 0 0;background:var(--paper);padding:12px 16px 32px;display:flex;flex-direction:column;overflow-y:auto;z-index:30}
.menu-panel a{font:700 1.4rem/1.2 var(--display);color:var(--ink);text-decoration:none;padding:16px 4px;border-bottom:1px solid var(--line)}
@media (max-width:860px){.nav{display:none}.menu{display:block}}

/* Buttons and chips */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--accent);color:#fff!important;text-decoration:none;font-weight:600;font-size:1rem;padding:12px 20px;border-radius:8px;border:1px solid var(--accent);cursor:pointer}
.btn:hover{background:var(--accent-hover)}
.btn.ghost{background:#fff;color:var(--accent)!important;border-color:var(--soft-line)}
.btn.ghost:hover{border-color:var(--accent);background:var(--soft)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--chip);border-radius:999px;padding:5px 12px;font-size:.88rem;color:#40454B}

/* Sections */
section{padding:clamp(48px,6vw,80px) 0}
section.tight{padding:clamp(32px,4vw,48px) 0}
.soft{background:var(--soft)}
.band{background:var(--band);color:var(--band-text)}
.band h2,.band h3{color:#fff}
.band a{color:#fff}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.section-head h2{margin:0}
.section-head p{margin:0;max-width:56ch}
.crumbs{font-size:.9rem;color:var(--muted);padding-top:18px}
.crumbs a{color:var(--muted)}
.page-head{padding:16px 0 28px}
.page-head .lead{max-width:none;margin:0}
.page-head + section{padding-top:24px}

/* Hero with calculator */
.hero{padding:24px 0 48px;background:linear-gradient(180deg,var(--soft) 0,var(--paper) 520px)}
.hero-top{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.hero-top h1{margin:0;max-width:22ch}
.hero-top .lead{margin:8px 0 0}
.trust{display:flex;flex-wrap:wrap;gap:8px}

/* Calculator layout */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:20px;align-items:start}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}
.panel h2{font-size:1.25rem;margin-bottom:14px}
.field{display:grid;gap:6px;margin-bottom:14px}
.field > span,.field legend{font-weight:600;font-size:.95rem}
.field small{color:var(--muted);font-size:.85rem}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
input[type=number],input[type=text],select{font:inherit;color:var(--ink);background:#fff;border:1px solid var(--input-line);border-radius:8px;padding:10px 12px;min-height:46px;width:100%}
input:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(74,45,107,.18)}
.money{position:relative}.money input{padding-left:28px}.money::before{content:"$";position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted)}
fieldset{border:0;margin:0 0 14px;padding:0}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg label{position:relative}
.seg input{position:absolute;opacity:0;width:1px;height:1px}
.seg span{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid var(--soft-line);border-radius:999px;cursor:pointer;font-size:.95rem;background:#fff}
.seg input:checked + span{background:var(--accent);border-color:var(--accent);color:#fff}
.seg input:focus-visible + span{outline:3px solid var(--accent);outline-offset:2px}
.check{display:flex;align-items:center;gap:10px;font-weight:600;font-size:.95rem;margin:4px 0 12px;cursor:pointer}
.check input{width:20px;height:20px;accent-color:var(--accent)}
details.more{border-top:1px solid var(--line);padding-top:12px;margin-top:4px}
details.more summary{cursor:pointer;font-weight:600;color:var(--accent);margin-bottom:12px}

/* Results */
.payslip{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;box-shadow:var(--shadow)}
.payslip-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;background:var(--accent);color:#fff;padding:16px 20px}
.payslip-head b{font:700 1.05rem/1 var(--display)}
.payslip-head span{font-size:.9rem;color:var(--band-text)}
.takehome{padding:18px 20px 6px}
.takehome small{display:block;color:var(--muted);font-weight:600;font-size:.9rem}
.takehome strong{display:block;font:700 clamp(2.2rem,5vw,3rem)/1.1 var(--display);color:var(--take);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.split{display:flex;height:14px;border-radius:999px;overflow:hidden;margin:12px 20px 8px;background:var(--chip)}
.split i{display:block;height:100%}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;padding:0 20px 12px;font-size:.85rem;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block}
.lines{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.lines td{padding:9px 20px;border-top:1px solid var(--line)}
.lines td:last-child{text-align:right;white-space:nowrap}
.lines tr.out td:last-child{color:var(--out)}
.lines tr.total td{font-weight:700;background:var(--good-bg);color:var(--good-ink)}
.lines tr.emp td{color:var(--muted);font-size:.95rem}
.periods{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:.95rem;margin-top:16px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.periods th,.periods td{padding:9px 12px;text-align:right;border-top:1px solid var(--line)}
.periods th:first-child,.periods td:first-child{text-align:left}
.periods thead th{border-top:0;background:var(--soft);font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--accent)}
.periods tr.total td{font-weight:700;color:var(--good-ink)}
.tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.tools .btn{font-size:.92rem;padding:9px 14px}
.note{font-size:.88rem;color:var(--muted);margin-top:12px}
.flash{color:var(--good-ink);font-weight:600;font-size:.9rem}

/* Cards and guides */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;text-decoration:none;color:var(--ink);transition:box-shadow .2s ease,transform .2s ease}
a.card:hover{box-shadow:var(--shadow);transform:translateY(-2px);color:var(--ink)}
.card h3{margin-bottom:6px}
.card p{color:var(--muted);margin:0 0 12px;font-size:.96rem}
.card .go{margin-top:auto;font-weight:600;color:var(--accent)}
.figure{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.figure svg{display:block;width:100%;height:auto}
.figure figcaption{font-size:.9rem;color:var(--muted);margin-top:10px}
.split2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,48px);align-items:center}
.prose{max-width:72ch}
.prose h2{margin-top:1.6em;font-size:1.5rem}
.prose h3{margin-top:1.3em}
.prose ul,.prose ol{padding-left:1.2em}
.prose li{margin-bottom:.4em}
.guide{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;align-items:start}
.aside{position:sticky;top:84px;display:grid;gap:16px}
.box{background:var(--soft);border:1px solid var(--soft-line);border-radius:var(--radius);padding:18px}
.box h3{font-size:1.05rem;margin-bottom:8px}
.box p,.box li{font-size:.95rem}
.callout{border-left:4px solid var(--accent);background:var(--soft);padding:14px 18px;border-radius:0 8px 8px 0;margin:18px 0}
.tbl{width:100%;border-collapse:collapse;font-size:.95rem;margin:12px 0 18px;font-variant-numeric:tabular-nums}
.tbl th,.tbl td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.tbl thead th{background:var(--soft);color:var(--accent);font-size:.8rem;text-transform:uppercase;letter-spacing:.06em}
.src{font-size:.85rem;color:var(--muted)}

/* Ads: never above the result, clearly labelled */
.ad{margin:28px 0;padding:10px;border:1px dashed var(--line);border-radius:8px;text-align:center;min-height:120px}
.ad small{display:block;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}

/* Footer */
.site-foot{background:var(--band);color:var(--band-text);padding:48px 0 32px;font-size:.95rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px}
.site-foot h2{font:700 .8rem/1 system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#fff;margin:4px 0 12px}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li a{display:block;padding:6px 0;color:var(--band-text);text-decoration:none}
.site-foot li a:hover{color:#fff}
.site-foot .brand{color:#fff}.site-foot .brand small{color:var(--band-fine)}
.fine{border-top:1px solid rgba(255,255,255,.15);margin-top:32px;padding-top:18px;font-size:.85rem;color:var(--band-fine);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.fine a{color:var(--band-text)}

/* Responsive */
@media (max-width:980px){.calc{grid-template-columns:1fr}.guide{grid-template-columns:1fr}.aside{position:static}}
@media (max-width:760px){.split2{grid-template-columns:1fr}.foot-grid{grid-template-columns:1fr 1fr}.foot-grid > div:first-child{grid-column:1/-1}.site-foot li a{padding:11px 0}}
@media (max-width:600px){
  body{font-size:16px}
  .hero{padding:14px 0 32px}
  .panel{padding:16px}
  .row2{grid-template-columns:1fr}
  .periods{font-size:.85rem}.periods th,.periods td{padding:8px 8px}
  .lines td{padding:8px 14px}
  .tools .btn{flex:1 1 auto}
}

/* Print: the result as a payslip */
@media print{
  .site-head,.site-foot,.ad,.tools,form,.no-print,.crumbs{display:none!important}
  .calc{grid-template-columns:1fr}
  .payslip,.periods{box-shadow:none;break-inside:avoid}
  body{font-size:12pt}
}

/* Long-form guides (Jobtracker article pattern) */
.byline{font-size:.92rem;color:var(--muted);margin:4px 0 10px}
.inshort{background:var(--soft);border:1px solid var(--soft-line);border-radius:8px;padding:12px 16px;margin:12px 0 0;font-size:.98rem}
.toc{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 20px;margin:8px 0 24px}
.toc b{display:block;font-family:var(--display);margin-bottom:6px}
.toc ol{margin:0;padding-left:1.2em}
.toc li{margin:4px 0}
.prose h2[id]{scroll-margin-top:84px}
.sources{border-top:1px solid var(--line);margin-top:36px;padding-top:8px}
.sources h2{font-size:1.2rem}
.sources li{font-size:.95rem;margin-bottom:6px}

/* Full-width text (10 Nov 2026): intros run the full width; long text sits in two columns, not a narrow centred strip */
.lead{max-width:none}
.hero-top{display:block}
.hero-top h1{max-width:none}
.hero-top .trust{margin-top:14px}
.faq{display:grid;grid-template-columns:1fr 1fr;gap:20px 40px;margin-top:8px}
.faq > div{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px}
.faq h3{font-size:1.1rem;margin-bottom:8px}
.faq p{margin:0;color:var(--muted)}
.prose.wide{max-width:none;columns:2;column-gap:56px}
.prose.wide > h2:first-child{margin-top:0}
.prose.wide h2,.prose.wide h3{break-after:avoid}
.prose.wide p,.prose.wide li,.prose.wide .callout,.prose.wide table{break-inside:avoid}
@media (max-width:860px){.faq{grid-template-columns:1fr}.prose.wide{columns:1}}
/* Guide articles fill the column up to the sidebar */
.guide .prose{max-width:none}
.guide{grid-template-columns:minmax(0,1fr) 300px;gap:40px}

/* Section intros run the full width they have */
.section-head p{max-width:none;flex:1 1 420px}
/* Section heading, then its intro underneath on the full width */
.section-head{display:block}
.section-head p{margin:10px 0 0;max-width:none}

/* taxcalculator.co.nz additions */
.brand img{width:36px;height:36px;flex:none}
.site-foot .brand img{width:30px;height:30px}
.lang{position:relative;margin-left:4px}
.lang summary{list-style:none;cursor:pointer;font-size:.92rem;font-weight:600;padding:8px 12px;border:1px solid var(--line);border-radius:8px;white-space:nowrap}
.lang summary::-webkit-details-marker{display:none}
.lang div{position:absolute;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:6px;display:grid;min-width:170px;z-index:40}
.lang a{color:var(--ink);text-decoration:none;padding:9px 12px;border-radius:6px}
.lang a:hover,.lang a[aria-current]{background:var(--soft)}
.review{background:var(--warn-soft);border-bottom:1px solid var(--warn-line);color:var(--warn);font-size:.92rem;padding:8px 0}
.periods td .bar{display:inline-block;height:8px;width:calc(var(--w) * .6);max-width:60%;background:var(--accent);opacity:.25;border-radius:4px;margin-right:8px;vertical-align:middle}
@media (max-width:860px){.lang summary{padding:8px 10px}}
.periods td:last-child{white-space:nowrap}

/* ==== Official form look (decided 10 Nov 2026) ====
   Shared by payecalculator, taxcalculator and kiwisavercalculator: appended to the end of each styles.css.
   Edit here, then run: node _build/apply-form-look.mjs
   Flat and square, ruled lines instead of boxes, results set out like an IRD assessment or an annual statement.
   No shadows, no gradients, no pills, no hover lifts, no side stripes. */
:root{--radius:0;--shadow:none;--rule:var(--ink);--hair:#C9CDD2}

/* Header: a plain rule, the current page underlined rather than tinted */
.site-head{border-bottom:2px solid var(--rule)}
.nav a{border-radius:0;padding:8px 10px}
.nav a:hover,.nav a[aria-current=page]{background:none;color:var(--accent);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px}
.menu summary,.lang summary,.lang div,.lang a{border-radius:0}
.lang div{box-shadow:none;border-color:var(--rule)}

/* Hero: paper, no wash */
.hero{background:var(--paper)}

/* Trust line: plain text separated by dots, not pills */
.trust,.chips{gap:0}
.chip{background:none;border-radius:0;padding:0;font-size:.9rem;color:var(--muted)}
.chip + .chip::before{content:"·";margin:0 10px;color:var(--hair)}

/* Buttons: square */
.btn{border-radius:0}
.btn.ghost{background:var(--paper);border-color:var(--rule);color:var(--ink)!important}
.btn.ghost:hover{background:var(--paper);text-decoration:underline}

/* Form panel: a ruled section of a form, not a floating card */
.panel{border:1px solid var(--rule);border-top:3px solid var(--rule);border-radius:0;box-shadow:none}
.panel h2{padding-bottom:10px;border-bottom:1px solid var(--hair)}
input[type=number],input[type=text],select{border-radius:0;border-color:var(--input-line)}
input:focus,select:focus{box-shadow:none;outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}

/* Choices: a joined row of square boxes, like tick boxes on a form */
.seg{gap:0}
.seg span{border-radius:0;border-color:var(--input-line);margin-left:-1px;min-height:42px}
.seg label:first-child span{margin-left:0}
.seg input:checked + span{position:relative;z-index:1}
details.more{border-top:1px solid var(--hair)}

/* Result: set out like an assessment. Heading as text over a heavy rule, figures on dotted lines, total under a double rule */
.payslip{border:1px solid var(--rule);border-radius:0;box-shadow:none}
.payslip-head{background:var(--paper);color:var(--ink);border-bottom:3px solid var(--rule);padding:14px 20px}
.payslip-head b{font-size:1.15rem}
.payslip-head span{color:var(--muted)}
.split{border-radius:0;height:12px}
.legend i{border-radius:0}
.lines td{border-top:0;border-bottom:1px dotted var(--hair)}
.lines tr.total td{background:none;color:var(--ink);border-top:3px double var(--rule);border-bottom:0;font-size:1.05rem}
.periods{border:0;border-top:2px solid var(--rule);border-radius:0;background:var(--paper)}
.periods thead th{background:none;color:var(--ink);text-transform:none;letter-spacing:0;font-size:.85rem;border-bottom:1px solid var(--rule)}
.periods td{border-top:1px dotted var(--hair)}
.periods td .bar{border-radius:0;opacity:.35}

/* Cards: ruled entries in a grid, no boxes, no lift */
.card{border:0;border-top:2px solid var(--rule);border-radius:0;padding:14px 0 0;background:none;transition:none}
a.card:hover{box-shadow:none;transform:none}
a.card:hover h3{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.cards{gap:28px 32px}
.figure{border:1px solid var(--hair);border-radius:0}

/* Notes and asides: square boxes with a hairline, no stripe */
.box,.inshort,.toc{border-radius:0;border-color:var(--hair);background:var(--paper)}
.box{border-top:2px solid var(--rule)}
.callout{border:1px solid var(--hair);border-left:1px solid var(--hair);border-radius:0;background:var(--soft)}
.tbl thead th{background:none;color:var(--ink);text-transform:none;letter-spacing:0;font-size:.88rem;border-bottom:2px solid var(--rule)}

/* FAQ: plain question and answer under a rule */
.faq{gap:8px 48px}
.faq > div{background:none;border:0;border-top:1px solid var(--rule);border-radius:0;padding:16px 0 12px}
.faq p{color:var(--ink)}

/* Sections: a rule between them rather than tinted bands */
.soft{background:var(--paper);border-top:1px solid var(--hair)}
.review{border-radius:0}
.ad{border-radius:0}
:focus-visible{border-radius:0}

/* KiwiSaver parts (harmless on the other sites, which do not use these classes) */
.answer{border:0;border-top:3px solid var(--rule);border-bottom:1px solid var(--rule);border-left:0;box-shadow:none;border-radius:0;padding:14px 0}
.result{border:1px solid var(--rule);border-radius:0;box-shadow:none}
.result-head{background:var(--paper);color:var(--ink);border-bottom:3px solid var(--rule)}
.stmt{border-radius:0;border-color:var(--hair);background:var(--paper);border-top:2px solid var(--rule)}
.status{border:1px solid var(--warn-line);border-left:1px solid var(--warn-line);border-top:3px solid var(--warn);border-radius:0}
.party{border:0;border-top:2px solid var(--rule);border-radius:0;padding:14px 0 0;background:none}
.election-card{border-left:0;border-top:3px solid var(--rule)}
.explain .steps li{border:0;border-top:2px solid var(--rule);border-radius:0;padding:14px 0 0;background:none}
.formula code{border-radius:0;background:var(--paper);border-color:var(--hair)}
.tl-track{border-radius:0;height:8px}
.tl-fill{border-radius:0;background:var(--accent)}
.legend i,.sw{border-radius:0}

/* Choice rows fill the width evenly, so a wrapped choice never sits alone and short */
.seg label{flex:1 1 auto}
.seg span{width:100%;justify-content:center;margin-top:-1px}
/* Step bars stay small so the last column never runs off the edge */
.periods td .bar{width:calc(var(--w) * .35);max-width:35%}