/* Every colour lives here. The names are still the Budget app's (--card, --text,
   --on-primary, --ok-*, --danger-*), so a rule copied between the two means the same thing,
   but the values are this site's own: a deep navy and a hot orange.
 *
 * The navy is both the ink and the brand — body text, headings, buttons, links, and the bar
 * of a chart. The orange is the one thing on a page worth looking at twice: the "calcs" half
 * of the logo, every focus ring, the warm stretch of a chart, the point of the wheel.
 * Everything else is quiet furniture around those two, and the Budget app keeps its own
 * palette (and its own theme picker) to itself.
 *
 * Light is the default; theme.js adds data-scheme="dark" when the device asks for dark or the
 * visitor picks it. */
:root {
  color-scheme: light;
  --bg: #f4f6fb;
  --card: #ffffff;
  --text: #0a1b3c;
  --muted: #58668b;
  --primary: #0a1b3c;
  --primary-dark: #061127;
  --on-primary: #ffffff;
  --highlight: #fe5321;
  --accent: #e8ecf7;
  --border: #dce2f0;
  --input-bg: #ffffff;
  --ok-bg: #ebfbee;
  --ok-border: #b2f2bb;
  --ok-text: #1b5e20;
  --danger: #b42318;
  --danger-bg: #fef3f2;
  --danger-border: #fecdca;
  /* The warm slot in every chart is the site's orange, under the name the calculators
     already had for it. */
  --interest: var(--highlight);
  --fees: #7c86a2;
  --help: #b42318;
  --growth: #2f9e44;
  --rest: #a9b1c6;
  --radius: 16px;
  --shadow: 0 4px 18px rgba(10, 27, 60, 0.08);
  --shadow-hover: 0 10px 26px rgba(10, 27, 60, 0.18);
}

/* The same two colours on a dark page. The navy becomes the surface everything sits on — the
   card is the navy itself — and the orange marks the same things it marks in the light. The
   ink and the interactive colour are the navy brought up until they read on it, which is why
   the text on a primary surface here is the navy rather than white. */
:root[data-scheme="dark"] {
  color-scheme: dark;
  --bg: #050b18;
  --card: #0a1b3c;
  --text: #e9edfa;
  --muted: #9dabc9;
  --primary: #93a7dd;
  --primary-dark: #b7c5ec;
  --on-primary: #0a1b3c;
  --highlight: #fe5321;
  --accent: #122347;
  --border: #1e2e52;
  --input-bg: #08142d;
  --ok-bg: #12301c;
  --ok-border: #2f6b42;
  --ok-text: #8ce99a;
  --danger: #ff8a80;
  --danger-bg: #3a1d22;
  --danger-border: #6b2c33;
  --interest: var(--highlight);
  --fees: #8b95ae;
  --help: #ff8787;
  --growth: #69db7c;
  --rest: #45536f;
  --shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
  --shadow-hover: 0 10px 26px rgba(0, 0, 0, 0.45);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

a { color: var(--primary); }

.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Header / footer */
.site-header {
  background: var(--card);
  border-bottom: 1px solid var(--border);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.brand {
  display: inline-flex;
  align-items: center;
  color: var(--text);
  text-decoration: none;
}
/* The wordmark is the logo file itself: "cozy" in the navy and "calcs" in the orange, the
   same two colours the rest of the site is built from, with a light rim around every letter
   that holds it off the navy card as well as the white one. Being a PNG on a transparent
   background, the one file does for both themes, and it is several times the size it is drawn
   at so it stays sharp on a high-density screen. */
.brand-logo {
  display: block;
  height: 30px;
  width: auto;
}

/* Light / dark switch in the header (theme.js wires it up) */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  background: var(--accent);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
}
.theme-toggle:hover { border-color: var(--primary); }
.theme-toggle:focus-visible { outline: 2px solid var(--highlight); outline-offset: 2px; }
.theme-toggle-icon { font-size: 1rem; line-height: 1; }
.theme-toggle-text { white-space: nowrap; }

.site-footer {
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
  padding: 40px 20px;
}

/* Hero */
.hero {
  padding: 64px 0 32px;
  text-align: center;
}
.hero h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  margin: 0 0 12px;
}
.hero p {
  font-size: 1.1rem;
  color: var(--muted);
  max-width: 560px;
  margin: 0 auto;
}
/* The mascot above the heading, on the same transparent background as the logo, so one file
   does for both themes. It is handed over at close to the size it is drawn, which sets how
   wide it can go before a high-density screen starts stretching it. */
.hero-art {
  display: block;
  width: min(100%, 300px);
  height: auto;
  margin: 0 auto 4px;
}

/* Tiles */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  padding: 24px 0 40px;
}
.tile {
  display: block;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
  box-shadow: var(--shadow);
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
/* A tile under the pointer lifts and its edge turns the site's orange: the one thing on the
   homepage that answers a pointer, in both themes, and the same colour the keyboard ring is. */
a.tile:hover,
a.tile:focus-visible {
  transform: translateY(-4px);
  border-color: var(--highlight);
  box-shadow: var(--shadow-hover);
  outline: none;
}
.tile .icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  margin-bottom: 16px;
}
.tile h3 { margin: 0 0 6px; font-size: 1.2rem; }
.tile p { margin: 0 0 14px; color: var(--muted); font-size: 0.95rem; }
.tile .cta { font-weight: 600; color: var(--primary); }
.tile.disabled { opacity: 0.6; cursor: default; box-shadow: none; }
.tile.disabled .cta { color: var(--muted); }

/* Index categories */
.category { margin-bottom: 8px; }
.category-title { margin: 28px 0 0; font-size: 1.3rem; }
.category .tiles { padding: 12px 0 8px; }

/* A closed category is a card you tap: it previews the tools inside and opens
   the whole grid when clicked (home.js). The tiles are only hidden while
   <html> carries data-js, which the inline script in <head> sets, so with
   JavaScript off nothing is hidden and every tile is still reachable. */
.category-toggle {
  display: block;
  width: 100%;
  padding: 16px 18px;
  font: inherit;
  text-align: left;
  color: inherit;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
/* A category answers the pointer the same way its tiles do. */
.category-toggle:hover { border-color: var(--highlight); }
.category-toggle:focus-visible { outline: 2px solid var(--highlight); outline-offset: 2px; }
.category-top { display: flex; align-items: center; gap: 10px; }
.category-name { font-weight: 700; }
.category-count {
  margin-left: auto;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.category-chevron {
  color: var(--primary);
  font-size: 0.9rem;
  line-height: 1;
  transition: transform 0.15s ease;
}

/* The preview of what is inside: one chip per tool, named like its tile. */
.category-preview { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  font-size: 0.8rem;
  color: var(--muted);
  background: var(--accent);
  border-radius: 999px;
}
.chip-icon { font-size: 0.95rem; line-height: 1; }

/* Open: the tiles take the preview's place, and the card becomes a plain bar
   with the chevron pointing back up at itself. */
.category:not([data-collapsed]) .category-toggle {
  padding: 10px 14px;
  background: var(--accent);
  box-shadow: none;
}
.category:not([data-collapsed]) .category-preview { display: none; }
.category:not([data-collapsed]) .category-chevron { transform: rotate(180deg); }
:root[data-js="on"] .category[data-collapsed] .tiles { display: none; }

/* Calculator page */
.page-title { padding: 40px 0 8px; }
.page-title h1 { margin: 0 0 6px; }
.page-title p { margin: 0; color: var(--muted); }
.back-link { display: inline-block; margin-bottom: 14px; text-decoration: none; font-weight: 600; }

/* minmax(0, ...) lets grid columns shrink below their content width, so wide
   content (tables, long select text) can't push the page wider than the screen. */
.calc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 24px;
  padding: 24px 0;
  align-items: start;
}
.calc-layout > * { min-width: 0; }
@media (max-width: 800px) {
  .calc-layout { grid-template-columns: minmax(0, 1fr); }
}

.panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
}
.panel h2 { margin-top: 0; font-size: 1.15rem; }

.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 6px; }
.field input,
.field select {
  width: 100%;
  padding: 10px 12px;
  font-size: 1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--input-bg);
  color: var(--text);
}
/* A box being typed in gets the orange ring: the one thing on the page that should catch the
   eye, and the same colour in both themes. */
.field input:focus,
.field select:focus {
  outline: 2px solid var(--highlight);
  outline-offset: 1px;
}
.field .hint { font-size: 0.8rem; color: var(--muted); margin-top: 4px; }
.row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.field { min-width: 0; }
/* An amount and the frequency it is paid at are one entry — "$650 per week" — so the
   frequency box sits beside the figure and keeps the width its longest option needs
   ("Every 6 months"). The figure takes whatever is left. */
.pair { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }

.error {
  color: var(--danger);
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.9rem;
  margin-bottom: 12px;
}
.hidden { display: none; }

.big-result {
  background: var(--primary);
  color: var(--on-primary);
  border-radius: 14px;
  padding: 20px;
  text-align: center;
  margin-bottom: 18px;
}
.big-result .label { opacity: 0.85; font-size: 0.9rem; }
.big-result .value { font-size: 2.2rem; font-weight: 700; }

.stats {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.stat {
  background: var(--accent);
  border-radius: 12px;
  padding: 12px 14px;
}
.stat .label { font-size: 0.8rem; color: var(--muted); }
.stat .value { font-weight: 700; font-size: 1.05rem; }

.bar {
  display: flex;
  height: 16px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--border);
  margin: 6px 0;
}
/* A stretch of a bar and the swatch that labels it are one colour, and they are written as one
   rule so that giving a chart a colour cannot leave its legend behind. */
.bar .principal, .legend .dot.principal { background: var(--primary); }
.bar .interest, .legend .dot.interest { background: var(--interest); }
.bar .fees, .legend .dot.fees { background: var(--fees); }
.big-result .sub { font-size: 0.85rem; opacity: 0.85; margin-top: 4px; }
.panel h2.spaced { margin-top: 24px; }
.note {
  background: var(--ok-bg);
  border: 1px solid var(--ok-border);
  color: var(--ok-text);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.9rem;
  margin: 0 0 18px;
}
.note.neutral {
  background: var(--accent);
  border-color: var(--border);
  color: var(--text);
}
.fee-table { margin-bottom: 4px; }
.fee-table tr.total-row td { font-weight: 700; border-bottom: none; }
.legend { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--muted); margin-bottom: 20px; }

table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th, td { padding: 8px 6px; text-align: right; border-bottom: 1px solid var(--border); }
th:first-child, td:first-child { text-align: left; }
th { color: var(--muted); font-weight: 600; }
.table-wrap { max-height: 300px; overflow-y: auto; }

/* Pay calculator */
.hint.spaced-hint { font-size: 0.8rem; color: var(--muted); margin: -8px 0 16px; }
.scroll-x { overflow-x: auto; margin-bottom: 4px; }
.pay-table th, .pay-table td { white-space: nowrap; }
.pay-table tr.total-row td { font-weight: 700; border-bottom: none; }
.bar .net, .legend .dot.net { background: var(--primary); }
.bar .tax, .legend .dot.tax { background: var(--interest); }
.bar .levy, .legend .dot.levy { background: var(--fees); }
.bar .help, .legend .dot.help { background: var(--help); }

/* Offset calculator */
.bar .saved, .legend .dot.saved { background: var(--growth); }
.legend.wrap { flex-wrap: wrap; gap: 6px 14px; justify-content: flex-start; }
.legend .dot, .person-card .dot, .pie-key .dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
/* The swatch and the name it labels are one entry, so the square sits clear of the
   word instead of touching it. Most legends get that gap from a space typed in the
   markup; this one is built by the script, so it says so here. */
.legend .dot { margin-right: 6px; }
.fine-print { font-size: 0.8rem; color: var(--muted); margin: 20px 0 0; overflow-wrap: anywhere; }

/* Why / how / FAQ: the three cards of prose that sit under every calculator. They are
   the same panels as the calculator itself, stacked full width below it. Nothing in
   them needs JavaScript — the questions are <details>, which the browser opens and
   closes on its own, so the answers are all there with scripting off. */
.calc-info { display: grid; gap: 24px; padding: 0 0 32px; }
/* The same minmax(0, 1fr) guard the calculator columns get: a grid item that will not
   shrink below its content would let a nowrap formula push the page wider than the
   screen, and the formula is meant to scroll sideways instead. */
.calc-info > * { min-width: 0; }
.calc-info h2 { margin: 0 0 10px; }
.calc-info p { margin: 0 0 12px; }
.calc-info section > p:last-child { margin-bottom: 0; }
.calc-info ul { margin: 0 0 12px; padding-left: 20px; }
.calc-info li { margin-bottom: 6px; }
.calc-info li:last-child { margin-bottom: 0; }
/* A formula is quoted rather than typeset, so it keeps the spacing it was written with —
   "(1 + r)^-n" is unreadable as running text. On a phone it scrolls sideways instead of
   wrapping into something that says the opposite. */
.formula {
  background: var(--accent);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
  overflow-x: auto;
  white-space: nowrap;
}
/* One closed row per question, with the same chevron a category shows on the front page,
   turned over once the answer is open. */
.faq { display: grid; gap: 10px; }
.faq details {
  background: var(--accent);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0 14px;
}
.faq details[open] { background: var(--card); border-color: var(--primary); }
.faq summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "▾"; color: var(--muted); font-size: 0.85rem; transition: transform 0.2s; }
.faq details[open] summary::after { transform: rotate(180deg); }
.faq summary:focus-visible { outline: 2px solid var(--highlight); outline-offset: 2px; border-radius: 8px; }
.faq p { margin: 0 0 14px; color: var(--muted); font-size: 0.9rem; }
@media (prefers-reduced-motion: reduce) {
  .faq summary::after { transition: none; }
}

/* Lifestyle calculators */
.bar .cost, .legend .dot.cost { background: var(--primary); }
.bar .rest, .legend .dot.rest { background: var(--rest); }
.bar .putin, .legend .dot.putin { background: var(--primary); }
.bar .growth, .legend .dot.growth { background: var(--growth); }

/* Flatmate or on your own */
/* The caption over each of the two bars, so it is clear which week is which. */
.bar-caption { font-size: 0.8rem; color: var(--muted); margin: 0 0 6px; }
.bar + .bar-caption { margin-top: 16px; }
/* The legend swatches take the same two colours as the stretches of the bars, so
   the rent and the bills can be told apart at a glance. */
/* The two stretches of that page's bar are named for what they pay for rather than for the
   part of a loan they stand for, so their swatches are named the same way — and share the
   colours those stretches are drawn in. */
.legend .dot.rent, .legend .dot.putin { background: var(--primary); }
.legend .dot.bills, .legend .dot.rest { background: var(--rest); }

/* Flatmate bills */
/* One row per person and one row per bill. The label wraps its box rather than
   pointing at an id, because a repeated row has no single id to point at. */
.rows { margin-bottom: 12px; }
/* Each flatmate and each bill is a card of its own, tinted like the site's other
   nested blocks, so a row reads as one entry rather than six loose boxes. */
.entry-row {
  display: grid;
  gap: 10px;
  align-items: end;
  background: var(--accent);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 10px;
}
.entry-row.person { grid-template-columns: minmax(0, 1fr) 92px 38px; }
/* A bill is read as a name and then as figures, so the name takes a row of its own and
   the amount, the frequency and the ✕ share the row under it. A flatmate's row is short
   enough to stay on one line. */
.entry-row.bill { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 38px; }
.entry-row.bill .field-name { grid-column: 1 / -1; }
.entry-row.bill .field-amount { grid-column: 1; }
.entry-row.bill .field-frequency { grid-column: 2; }
.entry-row.bill .remove { grid-column: 3; }
.entry-row .field { margin-bottom: 0; }
.entry-row .field label { font-size: 0.78rem; margin-bottom: 4px; }
/* The label wraps the box, so the box would otherwise inherit the label's weight. */
.entry-row .field input,
.entry-row .field select { font-weight: 400; }
/* The ✕ sits in the bottom row of boxes, so it lines up with them whatever height
   the labels above leave. It is the colour of the boxes beside it, not of the card
   it sits on. */
.icon-btn {
  font: inherit;
  font-size: 0.9rem;
  line-height: 1;
  color: var(--muted);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  width: 38px;
  height: 38px;
  padding: 0;
  cursor: pointer;
}
.icon-btn:hover:not(:disabled) { color: var(--danger); border-color: var(--danger-border); }
.icon-btn:disabled { opacity: 0.35; cursor: default; }
/* An "add a row" button reads as a gap in the list rather than one of the cards
   above it, so it keeps the panel's own background. */
.add-row {
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary);
  background: none;
  border: 1px dashed var(--border);
  border-radius: 10px;
  width: 100%;
  padding: 9px 12px;
  cursor: pointer;
}
.add-row:hover:not(:disabled) { border-color: var(--primary); }
.add-row:disabled { opacity: 0.4; cursor: default; }
.add-note { font-size: 0.8rem; color: var(--muted); margin: 6px 0 0; }
/* The even-split switch is a checkbox, not one of the full-width boxes. */
.field.check label { display: flex; align-items: center; gap: 8px; margin-bottom: 0; }
.field.check input { width: 18px; height: 18px; padding: 0; accent-color: var(--primary); }
/* One colour per person, in the order the rest of the site uses its palette: the bar's
   stretch, the swatches in the legend, on the cards and beside the pie key, and the
   wedges of the pie itself. Past six people the colours start again. A swatch wears the
   colour as a background; an SVG shape has none to wear, so the pie takes it as a fill
   and the six colours are listed a second time. */
.bar .p1, .legend .dot.p1, .person-card .dot.p1, .pie-key .dot.p1 { background: var(--primary); }
.bar .p2, .legend .dot.p2, .person-card .dot.p2, .pie-key .dot.p2 { background: var(--growth); }
.bar .p3, .legend .dot.p3, .person-card .dot.p3, .pie-key .dot.p3 { background: var(--interest); }
.bar .p4, .legend .dot.p4, .person-card .dot.p4, .pie-key .dot.p4 { background: var(--help); }
.bar .p5, .legend .dot.p5, .person-card .dot.p5, .pie-key .dot.p5 { background: var(--fees); }
.bar .p6, .legend .dot.p6, .person-card .dot.p6, .pie-key .dot.p6 { background: var(--rest); }
.pie .p1 { fill: var(--primary); }
.pie .p2 { fill: var(--growth); }
.pie .p3 { fill: var(--interest); }
.pie .p4 { fill: var(--help); }
.pie .p5 { fill: var(--fees); }
.pie .p6 { fill: var(--rest); }
/* The person cards at the top of the results: one per flatmate, saying every bill they
   pay into, the slice they put in and how often that bill comes round. The money sits
   on the right so the amounts line up down a card. The hint under them pulls itself up
   8px (see .hint.spaced-hint), so the cards give that room back rather than let it land
   on the bottom card. */
.person-cards { display: grid; gap: 10px; margin: 0 0 24px; }
.person-card {
  background: var(--accent);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
}
.person-card .dot, .pie-key .dot { flex: none; }
.pc-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pc-name { font-weight: 700; }
.pc-week { margin-left: auto; font-weight: 700; }
.pc-sub { font-size: 0.8rem; color: var(--muted); margin-top: 2px; }
.pc-bills { list-style: none; margin: 10px 0 0; padding: 0; }
.pc-bills li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 0.9rem;
  padding: 5px 0;
  border-top: 1px dashed var(--border);
}
.pc-bills li:first-child { border-top: 0; padding-top: 0; }
.pb-name { color: var(--muted); }
/* "$325.00 a week" is one answer, so the amount and its frequency stay together. */
.pb-what { white-space: nowrap; }
/* The pie lives in the headline card, which is the site's blue — the very blue the first
   person's wedge is — so it is drawn on a plate of the panel's colour rather than straight
   on the card. The plate is also the colour of the line between the wedges. */
.pie-wrap {
  background: var(--card);
  border-radius: 14px;
  padding: 14px;
  margin-top: 16px;
  text-align: left;
}
.pie { display: block; width: 132px; height: 132px; margin: 0 auto; }
.pie path, .pie circle { stroke: var(--card); stroke-width: 1; }
/* What each wedge is, and what it comes to in a week and in a month. */
.pie-key { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.pie-key li { display: flex; align-items: baseline; gap: 8px; font-size: 0.85rem; }
.pk-name { font-weight: 600; color: var(--text); }
.pk-money { margin-left: auto; color: var(--muted); white-space: nowrap; }
/* Both wide tables carry a column per person — or per period — so they are wider
   than a phone and scroll sideways rather than squeeze into unreadable columns.
   The frequency column is a word rather than an amount, so it reads left like the
   bill's name. */
.shares-table th, .shares-table td,
.bill-table th, .bill-table td { white-space: nowrap; }
.bill-table .freq { text-align: left; }
.bill-table tr.total-row td { font-weight: 700; border-bottom: none; }
/* Phones: the amount and the ✕ hold the second row and the frequency drops to a row of
   its own, because "Every 6 months" is the widest thing in a bill and needs the room. */
@media (max-width: 600px) {
  .entry-row.person { grid-template-columns: minmax(0, 1fr) 38px; }
  .entry-row.person .field-name { grid-column: 1 / -1; grid-row: 1; }
  .entry-row.person .field-pct { grid-column: 1; grid-row: 2; }
  .entry-row.person .remove { grid-column: 2; grid-row: 2; }
  .entry-row.bill { grid-template-columns: minmax(0, 1fr) 38px; }
  .entry-row.bill .field-name { grid-column: 1 / -1; grid-row: 1; }
  .entry-row.bill .field-amount { grid-column: 1; grid-row: 2; }
  .entry-row.bill .remove { grid-column: 2; grid-row: 2; }
  .entry-row.bill .field-frequency { grid-column: 1 / -1; grid-row: 3; }
  .person-card { padding: 10px 12px; }
  .pc-bills li { font-size: 0.82rem; }
  .pie-wrap { padding: 12px; }
  .pie { width: 116px; height: 116px; }
  .pie-key li { font-size: 0.8rem; }
}

/* Spin the wheel */
/* One row per name and nothing else, so a row is a name and a way to take it out again. */
.entry-row.name-row { grid-template-columns: minmax(0, 1fr) 38px; }
/* What the winner owes: a chip per ready-made answer, and a box for everything else. These
   ones are buttons, and they are scoped to their own list — the homepage has a .chip of its
   own for the preview of what is inside a category, which is a different thing entirely. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.chips .chip {
  font: inherit;
  font-size: 0.85rem;
  color: var(--text);
  background: var(--accent);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 12px;
  cursor: pointer;
}
.chips .chip:hover:not(:disabled) { border-color: var(--primary); }
.chips .chip[aria-pressed="true"] { border-color: var(--highlight); color: var(--primary); font-weight: 600; }
.chips .chip:disabled { opacity: 0.5; cursor: default; }
/* The spin button is the one loud thing on the page, which is rather the point. */
.spin-btn {
  font: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--on-primary);
  background: var(--primary);
  border: 0;
  border-radius: 12px;
  width: 100%;
  padding: 14px 18px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}
.spin-btn:hover:not(:disabled) { background: var(--primary-dark); }
.spin-btn:active:not(:disabled) { transform: translateY(1px); }
.spin-btn:disabled { opacity: 0.65; cursor: default; }

/* The wheel. Everything is drawn in one 200×200 box: the wedges first — the only part
   that turns — and then the rim, the hub and the pointer painted over the top. */
.wheel-wrap { position: relative; margin: 4px 0 18px; }
.wheel {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 8px 18px rgba(10, 27, 60, 0.2));
}
/* A group inside an SVG needs its own box to turn about, or the wheel spins around the
   corner of the drawing instead of the middle. */
.wheel-slices {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transition: transform 4.4s cubic-bezier(0.13, 0.7, 0.15, 1);
}
.wheel .wedge { stroke: var(--card); stroke-width: 1; }
.wheel .wedge.win { stroke: var(--text); stroke-width: 3; }
/* The names are written on the wedges, so they wear a halo rather than a colour: white
   lettering with a dark edge, which stays readable on a pale wedge and a dark one. */
.wheel-name {
  fill: #fff;
  font-weight: 700;
  stroke: rgba(0, 0, 0, 0.35);
  stroke-width: 2.5;
  paint-order: stroke;
}
.wheel-rim { fill: none; stroke: var(--border); stroke-width: 6; }
.wheel-hub { fill: var(--card); stroke: var(--border); stroke-width: 3; }
.wheel-pointer { fill: var(--highlight); stroke: var(--card); stroke-width: 2.5; }

/* The wheel's own twelve. The first two are the site's colours — the navy as the theme has it,
   and the orange — and the rest are a fairground palette, bright and alternating warm and cool,
   so no two wedges that touch look alike however many names are in the draw. */
.wheel .c1 { fill: var(--primary); }
.wheel .c2 { fill: var(--highlight); }
.wheel .c3 { fill: #2f9e44; }
.wheel .c4 { fill: #c2255c; }
.wheel .c5 { fill: #1c7ed6; }
.wheel .c6 { fill: #eab308; }
.wheel .c7 { fill: #7048e8; }
.wheel .c8 { fill: #0b7285; }
.wheel .c9 { fill: #9c36b5; }
.wheel .c10 { fill: #a61e4d; }
.wheel .c11 { fill: #5f3dc4; }
.wheel .c12 { fill: #0ca678; }

/* Who it landed on, and what they owe. */
.spin-result { text-align: center; }
.spin-emoji { font-size: 2.4rem; line-height: 1; }
.spin-line { font-size: 1.15rem; margin-top: 6px; overflow-wrap: anywhere; }
.spin-line strong { font-size: 1.35rem; }

/* The shower of what they owe when the wheel stops: falling, fading, then gone. */
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.confetti span {
  position: absolute;
  top: -12%;
  font-size: 1.15rem;
  animation-name: confetti-fall;
  animation-timing-function: ease-in;
  animation-fill-mode: both;
}
@keyframes confetti-fall {
  from { top: -12%; transform: rotate(0deg); opacity: 1; }
  to { top: 108%; transform: rotate(320deg); opacity: 0.2; }
}

/* Phones: the wheel keeps the width it is given and the answer steps down with it. */
@media (max-width: 600px) {
  .wheel { max-width: 260px; }
  .spin-emoji { font-size: 2rem; }
  .spin-line { font-size: 1.05rem; }
}

/* Somebody who asked not to watch moving things still gets a wheel that goes round, and
   no shower of emoji over it. */
@media (prefers-reduced-motion: reduce) {
  .wheel-slices { transition-duration: 0.5s; }
  .confetti { display: none; }
}

/* Cost per use */
/* Two lines per thing: the name, then its three figures and the ✕ under it — the shape the
   bill rows take, so a name and a number never fight over the same line. Everything on the
   second line is a short figure or a short pick, so the three get equal room. */
.entry-row.thing { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 38px; }
.entry-row.thing .field-name { grid-column: 1 / -1; }
.entry-row.thing .field-price { grid-column: 1; }
.entry-row.thing .field-uses { grid-column: 2; }
.entry-row.thing .field-often { grid-column: 3; }
.entry-row.thing .remove { grid-column: 4; }
/* Phones: the name takes a line of its own, the two figures and the ✕ the one under it, and
   how often drops to a third, where "a fortnight" has the width to be written out. */
@media (max-width: 600px) {
  .entry-row.thing { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 38px; }
  .entry-row.thing .field-name { grid-column: 1 / -1; grid-row: 1; }
  .entry-row.thing .field-price { grid-column: 1; grid-row: 2; }
  .entry-row.thing .field-uses { grid-column: 2; grid-row: 2; }
  .entry-row.thing .remove { grid-column: 3; grid-row: 2; }
  .entry-row.thing .field-often { grid-column: 1 / -1; grid-row: 3; }
}

/* Never let anything push the page wider than the screen */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg { max-width: 100%; height: auto; }
.panel, .stat, .person-card, .big-result, .note, .error, .hint { overflow-wrap: anywhere; }
.field select { text-overflow: ellipsis; }
.pay-table { min-width: 100%; }

/* iOS Safari zooms the page when a focused input is under 16px */
@media (max-width: 800px) {
  .field input,
  .field select { font-size: 16px; }
}

/* Phones */
@media (max-width: 600px) {
  .container { padding: 0 14px; }
  .site-header .container { height: 56px; }
  .brand-logo { height: 26px; }
  .hero { padding: 36px 0 16px; }
  .hero-art { width: min(100%, 220px); }
  .page-title { padding: 24px 0 4px; }
  .page-title h1 { font-size: 1.5rem; }
  .calc-layout { gap: 16px; padding: 16px 0; }
  .calc-info { gap: 16px; padding: 0 0 24px; }
  .panel { padding: 16px; border-radius: 14px; }
  .tiles { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .tile { padding: 22px 18px; }
  .big-result { padding: 16px; }
  .big-result .value { font-size: 1.8rem; }
  .stats { gap: 8px; }
  .stat { padding: 10px 12px; }
  .stat .value { font-size: 1rem; }
  table { font-size: 0.82rem; }
  th, td { padding: 8px 5px; }
  .site-footer { padding: 28px 14px; }
}

/* Very small phones: stack the paired fields and stats */
@media (max-width: 380px) {
  .row,
  .stats { grid-template-columns: minmax(0, 1fr); }
}