/* SettleClock site. The app's cool slate neutrals and ledger green, amber
   for what falls due soon and red for what is late, nothing else coloured.
   Type is Anek Latin from Ek Type, an Indian foundry, served from this site
   under the SIL Open Font License (/assets/fonts/OFL.txt): condensed and
   heavy for headings and figures, normal width for reading. One 12-column
   grid; every second column starts at column 7. The one bold element is the
   calculator's financial-year timeline, and the three-dates rule below it
   uses the same marks. No shadows, no gradients, no pure white, no motion,
   no corner softer than 8px. Every text colour reads at 4.5:1 or better. */

@font-face {
  font-family: "Anek";
  src: url("/assets/fonts/anek-latin-ext.woff2") format("woff2");
  font-weight: 100 800;
  font-stretch: 75% 125%;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Anek";
  src: url("/assets/fonts/anek-latin.woff2") format("woff2");
  font-weight: 100 800;
  font-stretch: 75% 125%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #eceff3;
  --surface: #f7f8fa;
  --surface-2: #e3e8ee;
  --field: #fbfcfd;
  --line: #d5dbe2;
  --line-strong: #7a8593;
  --ink: #17202b;
  --ink-2: #3f4a58;
  --ink-3: #56606e;
  --accent: #0e6b5a;
  --on-accent: #f7f8fa;
  --late: #b42318;
  --soon: #8a5a00;
  --clock-used: #9fcfc1; /* the payment window; 3:1 against --late by lightness */
  --deep: #0b3f35;       /* the closing band */
  --on-deep: #eef4f2;
  --on-deep-2: #bcd3cc;
  --font: "Anek", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --gap: 24px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14181d; --surface: #1b2128; --surface-2: #232a33; --field: #161b21;
    --line: #2f3843; --line-strong: #6b7684;
    --ink: #e4e8ed; --ink-2: #b0b9c4; --ink-3: #8f99a5;
    --accent: #4aa892; --on-accent: #111519; --late: #f07568; --soon: #e0a93a; --clock-used: #2b4d45;
    --deep: #17443a; --on-deep: #e4efeb; --on-deep-2: #b4cfc7;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; margin: 0; }
/* The hidden attribute must win over any display set below. */
[hidden] { display: none !important; }
#calc:focus { outline: none; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 24px; }
body { background: var(--bg); color: var(--ink); font: 400 18px/1.55 var(--font); font-kerning: normal; }
p, dd, li, summary { text-wrap: pretty; }
a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px); }
.nowrap { white-space: nowrap; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; top: 8px; }
.skip:focus { left: 16px; z-index: 10; background: var(--surface); padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: 4px; }

/* ---- type ---- */
h1, h2, h3 { color: var(--ink); }
h1 { font-size: clamp(44px, 1.6rem + 3.4vw, 82px); font-weight: 700; font-stretch: 82%; line-height: 0.98; word-spacing: 0.05em; text-wrap: balance; }
h2 { font-size: clamp(34px, 1.4rem + 2.2vw, 58px); font-weight: 700; font-stretch: 84%; line-height: 1.02; word-spacing: 0.04em; text-wrap: balance; }
h3 { font-size: 22px; font-weight: 650; font-stretch: 96%; line-height: 1.25; }
.lead { font-size: clamp(19px, 1rem + 0.3vw, 22px); line-height: 1.5; color: var(--ink-2); max-width: 46ch; }
.cite { font-size: 15px; line-height: 1.55; color: var(--ink-3); max-width: 68ch; }

/* ---- the grid: two columns always meet at column 7 ---- */
.grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.grid12 > :first-child { grid-column: 1 / 7; padding-right: 32px; }
.grid12 > :last-child { grid-column: 7 / -1; }

/* ---- buttons ---- */
.btn {
  font: 600 17px/1 var(--font); min-height: 50px; padding: 0 24px; display: inline-flex; align-items: center;
  color: var(--on-accent); background: var(--accent); border: 1px solid var(--accent); border-radius: 6px;
  cursor: pointer; text-decoration: none; text-align: center;
}
.btn:hover { background: color-mix(in srgb, var(--accent) 84%, var(--ink)); }
.btn-quiet { color: var(--ink); background: transparent; border-color: var(--line-strong); }
.btn-quiet:hover { background: var(--surface-2); }
.btn-small { min-height: 42px; padding: 0 18px; font-size: 16px; }
.link { font: inherit; color: var(--accent); background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ---- header ---- */
.top .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 32px; min-height: 86px; padding-top: 12px; padding-bottom: 12px; }
.top nav { margin-left: auto; }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; font-size: 24px; font-weight: 700; font-stretch: 92%; line-height: 1; }
.brand svg { width: 30px; height: 30px; flex: none; }
.top nav ul { display: flex; flex-wrap: wrap; align-items: center; gap: 0 30px; list-style: none; padding: 0; font-size: 17px; font-weight: 500; }
.top nav a:not(.btn) { color: var(--ink-2); text-decoration: none; display: inline-block; padding: 10px 0; }
.top nav a:not(.btn):hover { color: var(--ink); text-decoration: underline; }

/* ---- sections ---- */
main > section { padding: clamp(64px, 7.5vw, 112px) 0; }
.band { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rule, .faq-wrap { border-top: 1px solid var(--line); }
.split { align-items: end; }
.split-wide { align-items: start; }
.split-wide .lead { margin-top: 22px; max-width: 34ch; }

/* ---- hero ---- */
.hero { padding-top: clamp(20px, 2.5vw, 40px) !important; padding-bottom: clamp(56px, 6vw, 88px) !important; }
.hero-head { margin-bottom: clamp(28px, 3vw, 40px); }
.hero h1 { max-width: 22ch; }
.hero .lead { margin-top: 18px; max-width: 62ch; }

/* ---- the calculator ---- */
.sheet { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.sheet form { padding: 26px 36px 0; }
.sheet-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; margin-bottom: 22px; }
.sheet-head h2 { font-size: 30px; font-stretch: 92%; }
.sample { font-size: 16px; color: var(--ink-3); }

.entry { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.45fr) minmax(0, 1.2fr); gap: 20px; align-items: start; }
.field { display: grid; gap: 8px; align-content: start; min-width: 0; border: 0; padding: 0; }
label, legend { font-size: 15px; font-weight: 600; color: var(--ink-2); padding: 0; line-height: 1.3; }
legend { margin-bottom: 8px; }
input[type="text"], input[type="date"], select {
  font: 400 18px/1.2 var(--font); color: var(--ink); background: var(--field); border: 1px solid var(--line-strong);
  border-radius: 4px; height: 50px; padding: 0 14px; width: 100%; min-width: 0;
}
input[type="text"]:hover, input[type="date"]:hover, select:hover { border-color: var(--ink-3); }
input[aria-invalid="true"] { border: 2px solid var(--late); padding: 0 13px; }
.hint { font-size: 14px; color: var(--ink-3); line-height: 1.45; }
.error { font-size: 14px; color: var(--late); font-weight: 600; line-height: 1.4; }

/* Radio groups drawn as one segmented control; the inputs stay real radios. */
.segmented { display: flex; width: 100%; border: 1px solid var(--line-strong); border-radius: 4px; overflow: hidden; background: var(--field); }
.segmented label { position: relative; display: block; cursor: pointer; flex: 1 1 0; min-width: 0; }
.segmented label + label { border-left: 1px solid var(--line-strong); }
.segmented input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.segmented span { display: flex; align-items: center; justify-content: center; height: 48px; padding: 0 8px; font-size: 17px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.segmented input:checked + span { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.segmented input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: -5px; }
.segmented input:checked:focus-visible + span { outline-color: var(--on-accent); }

.more { margin-top: 22px; border-top: 1px solid var(--line); }
.more summary { cursor: pointer; padding: 15px 0; font-size: 17px; font-weight: 600; color: var(--ink-2); width: fit-content; }
.more summary:hover { color: var(--ink); }
.more summary::marker { color: var(--accent); }
.more-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 20px; padding: 4px 0 30px; }

/* ---- the answer ---- */
.result, .empty { border-top: 1px solid var(--line); padding: 30px 36px 34px; }
.result.stale { opacity: 0.45; }
.empty { color: var(--ink-3); font-size: 18px; }
.verdict { margin: 0; font-size: clamp(27px, 1.1rem + 1.5vw, 40px); font-weight: 700; font-stretch: 86%; line-height: 1.12; word-spacing: 0.04em; max-width: 32ch; text-wrap: balance; }
.verdict.late { color: var(--late); }
.verdict.ok { color: var(--accent); }
.verdict.soon { color: var(--soon); }
.figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); margin-top: 18px; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); }
.figures div { padding: 16px 0; min-width: 0; }
.figures div + div { padding-left: var(--gap); border-left: 1px solid var(--line); }
.figures dt { font-size: 15px; font-weight: 500; color: var(--ink-3); }
.figures dd { font-size: clamp(25px, 1rem + 1.2vw, 34px); font-weight: 650; font-stretch: 94%; line-height: 1.15; font-variant-numeric: tabular-nums lining-nums; overflow-wrap: anywhere; margin-top: 4px; }
.figures dd.late { color: var(--late); }
.result-foot { margin-top: 22px; }
.explain { color: var(--ink-2); }
.explain p + p { margin-top: 10px; }
.note { font-size: 15px; line-height: 1.55; color: var(--ink-3); }
.result-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 18px; }
.copy-msg { font-size: 15px; color: var(--ink-3); }

/* The financial-year timeline: April to 31 March, the bill's window, its
   due date, today or the payment day, and the year-end line. */
.timeline { margin: 24px 0 2px; }
.timeline svg { display: block; width: 100%; height: auto; overflow: visible; }
.tl-year { fill: var(--surface-2); }
.tl-axis { stroke: var(--line-strong); stroke-width: 2; }
.tl-tick { stroke: var(--line-strong); stroke-width: 1.5; }
.tl-month { fill: var(--ink-3); font: 500 14px var(--font); }
.tl-window { fill: var(--clock-used); stroke: var(--accent); stroke-width: 1.5; }
.tl-late { fill: var(--late); }
.tl-yearend { stroke: var(--ink); stroke-width: 3; }
.tl-yearend-label { fill: var(--ink); font: 650 14px var(--font); }
.tl-after { fill: var(--late); opacity: 0.07; }
.tl-due { fill: var(--ink); }
.tl-mark { fill: var(--accent); }
.tl-mark.late { fill: var(--late); }
.tl-label { fill: var(--ink-2); font: 650 15.5px var(--font); }
.tl-label.late { fill: var(--late); }
@media (forced-colors: active) {
  .timeline svg * { forced-color-adjust: none; }
  .tl-year { fill: Canvas; }
  .tl-window { fill: Highlight; stroke: CanvasText; }
  .tl-late, .tl-mark.late, .tl-due, .tl-mark { fill: CanvasText; }
  .tl-after { fill: CanvasText; opacity: 0.25; }
  .tl-axis, .tl-tick, .tl-yearend { stroke: CanvasText; }
  .tl-month, .tl-label, .tl-yearend-label, .tl-label.late { fill: CanvasText; }
  .segmented input:checked + span { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .dates li::before { forced-color-adjust: none; background: CanvasText; }
  .dates li:nth-child(1)::before { background: Highlight; }
}

/* ---- the rule: the same marks as the timeline ---- */
.rule h2 { max-width: 16ch; }
.dates { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); margin-top: clamp(44px, 5vw, 72px); border-top: 2px solid var(--ink); }
.dates li { position: relative; padding: 30px 32px 0 0; }
.dates li::before { content: ""; position: absolute; left: 0; }
.dates li:nth-child(1)::before { top: -8px; width: 44px; height: 14px; background: var(--clock-used); outline: 1.5px solid var(--accent); outline-offset: -1.5px; }
.dates li:nth-child(2)::before { top: -8px; width: 14px; height: 14px; background: var(--ink); transform: rotate(45deg); }
.dates li:nth-child(3)::before { top: -16px; width: 4px; height: 30px; background: var(--ink); }
.date { display: block; font-size: clamp(38px, 1.5rem + 2vw, 56px); font-weight: 700; font-stretch: 84%; line-height: 1.05; word-spacing: 0.04em; margin-bottom: 14px; }
.date-what { display: block; }
.dates h3 { margin-bottom: 8px; }
.dates li > p:last-child { color: var(--ink-2); max-width: 36ch; }
.rule .cite { margin-top: clamp(40px, 5vw, 64px); }

/* ---- the app ---- */
.shot { margin: 0; }
.shot a { display: block; }
.shot img { display: block; width: 100%; height: auto; border-radius: 6px; }
.shot figcaption { margin-top: 12px; font-size: 15px; color: var(--ink-3); max-width: 68ch; }
.shot-wide { margin-top: clamp(36px, 4vw, 56px); }
.steps { list-style: none; padding: 0; counter-reset: step; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 40px; margin-top: clamp(48px, 6vw, 80px); }
.steps li { counter-increment: step; border-top: 1px solid var(--line); padding: 20px 16px 0 0; }
.steps li::before { content: counter(step); display: block; font-size: 44px; font-weight: 700; font-stretch: 84%; line-height: 1; color: var(--accent); margin-bottom: 16px; }
.steps h3 { margin-bottom: 8px; }
.steps p { color: var(--ink-2); font-size: 17px; }

.output-row + .output-row { margin-top: clamp(56px, 7vw, 96px); }
.output-row .shot-wide { margin-top: 0; }
.outputs { margin-top: 32px; }
.outputs div { min-width: 0; }
.outputs dt { font-size: 26px; font-weight: 700; font-stretch: 92%; line-height: 1.18; }
.outputs dd { margin-top: 8px; color: var(--ink-2); max-width: 46ch; }
.gets h2 { margin-bottom: clamp(36px, 4vw, 56px); }

/* ---- your data ---- */
.data { border-top: 1px solid var(--line-strong); }
.data div { display: grid; grid-template-columns: 12.5rem minmax(0, 1fr); gap: 6px 28px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.data dt { font-size: 19px; font-weight: 650; line-height: 1.35; }
.data dd { color: var(--ink-2); }

/* ---- who ---- */
.pair { margin-top: clamp(40px, 5vw, 64px); }
.pair > div { border-top: 1px solid var(--line-strong); padding-top: 22px; }
.pair h3 { font-size: 30px; font-weight: 700; font-stretch: 90%; margin-bottom: 12px; }
.pair p { color: var(--ink-2); max-width: 52ch; }
.requirement { margin-top: 40px; color: var(--ink); max-width: 68ch; }

/* ---- questions ---- */
.faq-wrap .split-wide > div:first-child { position: sticky; top: 24px; }
.faq { border-top: 1px solid var(--line-strong); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { position: relative; list-style: none; cursor: pointer; padding: 20px 0 20px 30px; font-size: 20px; font-weight: 600; line-height: 1.35; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: ""; position: absolute; left: 4px; top: 29px; border-style: solid; border-width: 6px 0 6px 9px; border-color: transparent transparent transparent var(--accent); }
.faq details[open] summary::before { transform: rotate(90deg); }
.faq summary:hover { color: var(--accent); }
.faq details p { color: var(--ink-2); padding: 0 0 24px 30px; max-width: 64ch; }

/* ---- the pilot ---- */
.pilot { background: var(--deep); color: var(--on-deep); }
.pilot h2 { color: var(--on-deep); max-width: 14ch; }
.pilot .lead { color: var(--on-deep-2); max-width: 44ch; margin-top: 0; }
.pilot .btn { color: var(--deep); background: var(--on-deep); border-color: var(--on-deep); }
.pilot .btn:hover { background: color-mix(in srgb, var(--on-deep) 86%, var(--deep)); }
.pilot :focus-visible { outline-color: var(--on-deep); }
.fine { margin-top: 24px; font-size: 15px; color: var(--on-deep-2); max-width: 52ch; }

/* ---- footer ---- */
footer { padding: 52px 0 60px; font-size: 15px; line-height: 1.55; color: var(--ink-3); }
footer .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 24px; }
.foot-brand { grid-column: 1 / 7; padding-right: 32px; }
.foot-law { grid-column: 7 / 11; }
footer ul { grid-column: 11 / -1; list-style: none; padding: 0; display: grid; gap: 2px; align-content: start; }
.brand-text { font-size: 22px; font-weight: 700; font-stretch: 92%; color: var(--ink); margin-bottom: 6px; line-height: 1.1; }
footer a { color: var(--ink-2); display: inline-block; padding: 4px 0; }
.foot-note { margin-top: 10px; font-size: 14px; }

/* ---- privacy, terms and the missing page ---- */
.doc { padding: 40px 0 96px; }
.doc h1 { font-size: clamp(44px, 1.8rem + 3vw, 76px); max-width: none; }
.doc h2 { font-size: 28px; font-stretch: 92%; margin-top: 44px; max-width: none; }
.doc p, .doc li { color: var(--ink-2); max-width: 70ch; }
.doc ul { margin-top: 12px; padding-left: 22px; display: grid; gap: 8px; }
.doc .updated { margin-top: 12px; font-size: 15px; color: var(--ink-3); }
.doc h1 + p, .doc .updated + p { margin-top: 20px; }
.doc h2 + p, .doc h2 + ul { margin-top: 12px; }
.doc p + p { margin-top: 12px; }

/* ---- dark mode: the light app pictures sit back a little ---- */
@media (prefers-color-scheme: dark) {
  .shot img { filter: brightness(0.88); }
}

/* ---- narrower screens ---- */
@media (max-width: 1100px) {
  .entry { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .entry > div.field { grid-column: span 2; }
  .entry > fieldset { grid-column: span 3; }
  .more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-brand { grid-column: 1 / 7; }
  .foot-law { grid-column: 1 / -1; grid-row: 2; }
  footer ul { grid-column: 7 / -1; }
}
@media (max-width: 900px) {
  .grid12 { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .grid12 > :first-child, .grid12 > :last-child { grid-column: 1 / -1; padding-right: 0; }
  .faq-wrap .split-wide > div:first-child { position: static; }
  .dates { grid-template-columns: minmax(0, 1fr); border-top: 0; border-left: 2px solid var(--ink); margin-left: 8px; }
  .dates li { padding: 0 0 40px 32px; }
  .dates li:last-child { padding-bottom: 0; }
  .dates li:nth-child(1)::before { top: 4px; left: -12px; width: 22px; height: 12px; }
  .dates li:nth-child(2)::before { top: 4px; left: -8px; }
  .dates li:nth-child(3)::before { top: 0; left: -16px; width: 30px; height: 4px; }
  .pair > div + div { margin-top: 12px; }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  .top .wrap { min-height: 0; }
  .top nav { order: 3; width: 100%; margin-left: 0; }
  .top-cta { margin-left: auto; }
  .top nav ul { gap: 0 22px; font-size: 16px; }
  .sheet form { padding: 22px 16px 0; }
  .result, .empty { padding: 22px 16px 26px; }
  .entry > div.field { grid-column: span 3; }
  .entry > fieldset { grid-column: 1 / -1; }
  .more-grid { grid-template-columns: minmax(0, 1fr); }
  .figures { grid-template-columns: minmax(0, 1fr); }
  .figures div, .figures div + div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0; border-left: 0; }
  .figures div + div { border-top: 1px solid var(--line); }
  .figures dd { font-size: 24px; margin: 0; text-align: right; }
  .steps { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; }
  .steps li::before { grid-row: 1 / span 2; font-size: 34px; margin: 0; }
  .outputs dt { font-size: 23px; }
  footer .wrap { grid-template-columns: minmax(0, 1fr); }
  .foot-brand, .foot-law, footer ul { grid-column: 1 / -1; grid-row: auto; padding-right: 0; }
}
@media (max-width: 420px) {
  .entry > div.field { grid-column: 1 / -1; }
}

@media print {
  .top nav, .top-cta, .sheet form, .skip, .result-actions, .empty, .actions { display: none; }
  .pilot { background: none; color: var(--ink); }
}