/* Shared look for every page on weebohelps.com.
   Colours come from the Weebo brand pack (Nov 2026): the production card
   palette for dark mode, plus darker shades of the same accents for light
   mode so small text stays readable. Dark is the default; phones set to
   light mode get the light version. */
:root {
  --paper: #202225;      /* charcoal canvas */
  --tape: #2E333B;       /* raised panel: receipts, cards */
  --surface: #17191D;    /* input boxes */
  --ink: #F5F3EE;        /* off-white text */
  --muted: #C0C3C8;      /* secondary grey text */
  --line: #3D434C;       /* subtle dividers */
  --field-line: #6C7B81; /* input borders (Weebo metal shadow) */
  --note: #81FBB9;       /* mint: links, gains, current menu item */
  --on-note: #17191D;    /* text on mint */
  --num: #F4BC45;        /* amber: key result numbers */
  --loss: #FF8A8A;       /* lighter red so small loss numbers stay readable */
  --rule: #DC383C;       /* news red: short accent rules only */
  --mascot-bg: #040B17;  /* matches the background of the mascot art */
  color-scheme: dark;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --paper: #F5F3EE;
    --tape: #FFFFFF;
    --surface: #FFFFFF;
    --ink: #17191D;
    --muted: #4F545C;
    --line: #D6D3CB;
    --field-line: #85817A;
    --note: #0B7A50;
    --on-note: #FFFFFF;
    --num: #8A5A00;
    --loss: #B3261E;
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --paper: #F5F3EE;
  --tape: #FFFFFF;
  --surface: #FFFFFF;
  --ink: #17191D;
  --muted: #4F545C;
  --line: #D6D3CB;
  --field-line: #85817A;
  --note: #0B7A50;
  --on-note: #FFFFFF;
  --num: #8A5A00;
  --loss: #B3261E;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: inherit; }
html { scroll-padding-top: env(safe-area-inset-top, 0px); height: 100%; }
body {
  margin: 0;
  min-height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}
main { max-width: 34rem; margin: 0 auto; padding: 1.75rem 1.125rem 3rem; }
a { color: var(--note); }
h1, h2, .brand, .card strong, .row.total, .board-text {
  font-family: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  font-weight: 700;
}
h1 {
  font-size: clamp(2.4rem, 11vw, 3.4rem);
  line-height: 1;
  margin: 0 0 0.6rem;
}
h1.calc-title { font-size: clamp(1.9rem, 8vw, 2.5rem); line-height: 1.05; margin-bottom: 0.4rem; }
h2 { font-size: 1.6rem; line-height: 1.1; margin: 0 0 0.4rem; }
/* "Weebo helps" with the short red underline from the video cards */
.brand, .masthead { position: relative; }
.brand::after, .masthead::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.1em;
  width: 1.6em;
  height: 3px;
  border-radius: 2px;
  background: var(--rule);
}
.masthead { display: inline-block; padding-bottom: 0.15em; }
.masthead::after { height: 4px; }
.brand {
  display: inline-block;
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--ink);
  text-decoration: none;
  margin-bottom: 1.1rem;
  padding: 0.2rem 0 0.25rem;
}
.lede { color: var(--muted); margin: 0 0 1.5rem; max-width: 30rem; }
/* Calculator menu: one row you can swipe sideways. It runs to the screen
   edges (cancelling main's side padding) and fades at an edge when more
   buttons are hidden there. calc.js adds the more-left / more-right classes. */
nav {
  position: relative;
  display: flex;
  gap: 0.375rem;
  margin: -0.5rem -1.125rem 1rem;
  padding: 0.5rem 1.125rem; /* room for the buttons' glow */
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
nav::-webkit-scrollbar { display: none; }
nav.more-right { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent); }
nav.more-left { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 3rem), transparent); }
nav.more-left.more-right { -webkit-mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent); }
/* Wide screens (usually a mouse, not a finger): wrap instead of swiping. */
@media (min-width: 40rem) {
  nav { flex-wrap: wrap; overflow: visible; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
  nav.more-left, nav.more-right { -webkit-mask-image: none; mask-image: none; }
}
nav a {
  flex: 0 0 auto;
  white-space: nowrap;
  text-align: center;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  background: transparent;
}
/* Thin mint "aura" on buttons and cards: a faint 1px mint edge plus a soft
   glow, to lift them off the background. */
nav a, .card a {
  border-color: color-mix(in srgb, var(--note) 38%, transparent);
  box-shadow: 0 0 7px -1px color-mix(in srgb, var(--note) 28%, transparent);
  transition: border-color 0.15s, box-shadow 0.15s;
}
nav a:hover, .card a:hover {
  border-color: color-mix(in srgb, var(--note) 70%, transparent);
  box-shadow: 0 0 9px 0 color-mix(in srgb, var(--note) 40%, transparent);
}
nav a[aria-current="page"] { background: var(--note); color: var(--on-note); border-color: var(--note); }
a:focus-visible, input:focus-visible { outline: 3px solid var(--note); outline-offset: 2px; }
.what { color: var(--muted); margin: 0 0 1.25rem; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.875rem 0.75rem; margin-bottom: 1.5rem; }
.field { display: flex; flex-direction: column; gap: 0.3rem; }
.field.wide { grid-column: 1 / -1; }
label { font-size: 0.875rem; font-weight: 500; }
.hint { font-size: 0.8rem; color: var(--muted); }
input {
  width: 100%;
  font: inherit;
  font-variant-numeric: tabular-nums;
  padding: 0.7rem 0.75rem;
  border: 1px solid var(--field-line);
  border-radius: 0.5rem;
  background: var(--surface);
  color: var(--ink);
}
input::placeholder { color: var(--muted); opacity: 0.8; }
/* Month menus (inflation page): drawn to match the input boxes. */
select {
  width: 100%;
  font: inherit;
  padding: 0.7rem 2rem 0.7rem 0.75rem;
  border: 1px solid var(--field-line);
  border-radius: 0.5rem;
  /* small down-arrow drawn with two triangles */
  background: linear-gradient(45deg, transparent 50%, var(--muted) 50%) no-repeat right 1.05rem center / 0.4rem 0.4rem,
              linear-gradient(135deg, var(--muted) 50%, transparent 50%) no-repeat right 0.7rem center / 0.4rem 0.4rem,
              var(--surface);
  color: var(--ink);
  -webkit-appearance: none;
  appearance: none;
}
select:focus-visible { outline: 3px solid var(--note); outline-offset: 2px; }
/* A second part on the same calculator page, below the first receipt. */
h2.sub { margin-top: 2.5rem; }
.receipt {
  background: var(--tape);
  border: 1px solid var(--line);
  border-bottom: none;
  padding: 1.25rem 1.125rem 1.5rem;
  position: relative;
  font-variant-numeric: tabular-nums;
}
.receipt::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -10px;
  height: 10px;
  background:
    linear-gradient(135deg, var(--tape) 50%, transparent 50%) 0 0 / 14px 10px repeat-x,
    linear-gradient(225deg, var(--tape) 50%, transparent 50%) 0 0 / 14px 10px repeat-x;
}
.row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.4rem 0; }
.row span:last-child { text-align: right; white-space: nowrap; font-weight: 600; }
.row.total {
  border-top: 1px dashed var(--line);
  margin-top: 0.5rem;
  padding-top: 0.9rem;
  font-size: 1.45rem;
  line-height: 1.15;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 1rem;
  row-gap: 0;
}
.row.total span:first-child { white-space: nowrap; }
.row.total span:last-child { font-size: 1.9rem; color: var(--num); margin-left: auto; }
.neg { color: var(--loss); }
.pos { color: var(--note); }
.verdict { margin: 0.9rem 0 0; font-size: 0.95rem; }
.empty { color: var(--muted); margin: 0; }
.assume { margin-top: 2rem; font-size: 0.85rem; color: var(--muted); }
.assume p { margin: 0 0 0.5rem; }

/* Home page: the canonical Weebo art, shown whole (never cropped) on a
   panel the same navy as its own background. */
.hero {
  display: flex;
  justify-content: center;
  height: clamp(150px, 46vw, 230px);
  margin: 0 0 1.25rem;
  background: var(--mascot-bg);
  border-radius: 1rem;
  overflow: hidden;
}
.hero img { display: block; height: 100%; width: auto; max-width: 100%; object-fit: contain; }

/* Home page list of calculators */
.cards { list-style: none; padding: 0; margin: 0 0 2.25rem; display: grid; gap: 0.75rem; }
.card a {
  display: block;
  padding: 1rem 1.125rem;
  background: var(--tape);
  border-width: 1px;
  border-style: solid; /* colour comes from the mint aura rule above */
  border-radius: 0.75rem;
  color: var(--ink);
  text-decoration: none;
}
.card strong { display: block; font-size: 1.4rem; line-height: 1.15; margin-bottom: 0.2rem; }
.card span { color: var(--muted); font-size: 0.95rem; }
.about p { margin: 0 0 0.75rem; }

/* Page not found: Professor Weebo, with the message chalked on the board.
   The board sits at about 6-94% across and 11-61% down the picture. */
.board { position: relative; width: min(100%, 14rem); margin: 0 auto 1.5rem; border-radius: 1rem; overflow: hidden; }
.board img { display: block; width: 100%; height: auto; }
.board-text {
  position: absolute;
  left: 8%; right: 8%; top: 11%; height: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  color: #F5F3EE;
  opacity: 0.9;
}
.board-text b { font-size: 3.25rem; line-height: 1; font-weight: 700; }
.board-text span { font-size: 1.15rem; font-weight: 600; letter-spacing: 0.02em; }

footer { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: 0.85rem; color: var(--muted); }
footer p { margin: 0 0 0.5rem; }
@media (max-width: 22rem) { .fields { grid-template-columns: 1fr; } }