/* ==========================================================================
   Calcuroo — global stylesheet (design "E3": rounded shapes, ink outlines,
   lime highlights, purple links; bold outline + offset shadow only on key
   elements, light outlines everywhere else)
   Themes: light tokens on :root (the default); dark tokens apply when the
   user picked dark, or picked System and the system prefers dark.
   ========================================================================== */

/* Bricolage Grotesque (SIL Open Font License, see assets/fonts/OFL.txt), self-hosted */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/bricolage-grotesque-latin-400.woff2") format("woff2");
  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;
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/bricolage-grotesque-latin-600.woff2") format("woff2");
  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;
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/bricolage-grotesque-latin-800.woff2") format("woff2");
  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: #fafaf7;
  --surface: #f0f0ea;
  --surface-2: #e6e6de;
  --card: #ffffff;
  --text: #111111;
  --muted: #3d3d3d;
  /* Ink: outlines and the offset "sticker" shadows */
  --ink: #111111;
  --shadow-ink: #111111;
  --border: #dcdcd4;
  --border-strong: #111111;
  /* Purple: links, focus ring, the second chart series */
  --accent: #4c1d95;
  --accent-strong: #3b1574;
  --accent-text: #ffffff;
  /* Lime highlight, always with ink text on it */
  --lime: #c6f432;
  --lime-strong: #b5e31f;
  --on-lime: #111111;
  --on-lime-muted: #3d3d3d;
  --result-up: #14632f;
  --result-down: #9b1c1c;
  --result-warn: #9b1c1c;
  --focus: #4c1d95;
  --error: #b3261e;
  --error-soft: #fdecea;
  --success: #1a6e34;
  --header-bg: #fafaf7;
  /* Bars: ink, grey and purple (no lime lines on white) */
  --chart-start: #111111;
  --chart-contrib: #84847c;
  --chart-interest: #4c1d95;
  --chart-grid: #e2e2da;
  --chart-text: #111111;
  /* Offset "sticker" shadows: no blur */
  --shadow-sm: 3px 3px 0 var(--shadow-ink);
  --shadow: 4px 4px 0 var(--shadow-ink);
  --shadow-lg: 6px 6px 0 var(--shadow-ink);
  /* Bold outline (key elements only) and light outline (everything else) */
  --bw: 2.5px;
  --bw-light: 1.5px;
  --radius: 18px;
  --radius-sm: 14px;
  --radius-lg: 26px;
  --container: 1160px;
  --header-h: 64px;
  --font: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121212;
    --surface: #262626;
    --surface-2: #303030;
    --card: #1c1c1c;
    --text: #f4f4ee;
    --muted: #b8b8b0;
    --ink: #f4f4ee;
    --shadow-ink: #f4f4ee;
    --border: #3d3d3a;
    --border-strong: #f4f4ee;
    --accent: #b9a3ff;
    --accent-strong: #d2c4ff;
    --accent-text: #121212;
    --focus: #b9a3ff;
    --error: #ff9b8f;
    --error-soft: rgba(255, 155, 143, 0.14);
    --success: #7fe0a0;
    --header-bg: #121212;
    --chart-start: #f4f4ee;
    --chart-contrib: #6e6e68;
    --chart-interest: #b9a3ff;
    --chart-grid: #333330;
    --chart-text: #f4f4ee;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #121212;
  --surface: #262626;
  --surface-2: #303030;
  --card: #1c1c1c;
  --text: #f4f4ee;
  --muted: #b8b8b0;
  --ink: #f4f4ee;
  --shadow-ink: #f4f4ee;
  --border: #3d3d3a;
  --border-strong: #f4f4ee;
  --accent: #b9a3ff;
  --accent-strong: #d2c4ff;
  --accent-text: #121212;
  --focus: #b9a3ff;
  --error: #ff9b8f;
  --error-soft: rgba(255, 155, 143, 0.14);
  --success: #7fe0a0;
  --header-bg: #121212;
  --chart-start: #f4f4ee;
  --chart-contrib: #6e6e68;
  --chart-interest: #b9a3ff;
  --chart-grid: #333330;
  --chart-text: #f4f4ee;
  color-scheme: dark;
}

/* Categories share one neutral look: ink text and icons on white tiles */
:root { --cat: var(--text); --cat-soft: var(--card); }

/* Base ------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

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

/* Keep anchor targets clear of the sticky header */
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main { flex: 1; min-width: 0; width: 100%; }

img, svg, canvas { display: block; max-width: 100%; }

a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-strong); }

h1, h2, h3 { line-height: 1.2; margin: 0 0 0.6em; font-weight: 800; letter-spacing: -0.015em; }
h1 { font-size: clamp(1.9rem, 4.5vw, 3rem); letter-spacing: -0.04em; }
h2 { font-size: clamp(1.35rem, 2.6vw, 1.75rem); letter-spacing: -0.03em; }
h3 { font-size: 1.125rem; }
p { margin: 0 0 1em; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

.icon {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}
@media (max-width: 767px) {
  .container { padding: 0 16px; }
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  background: var(--accent);
  color: var(--accent-text);
  padding: 8px 14px;
  border-radius: 8px;
  z-index: 100;
}
.skip-link:focus { left: 8px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Header ----------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-h);
  gap: 16px;
}

.logo {
  display: inline-flex;
  align-items: center;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
  text-decoration: none;
}
.logo span { color: var(--accent); }
.logo:hover { color: var(--text); }
.logo-mark { width: 30px; height: 30px; margin-right: 9px; }
.logo-mark rect { fill: var(--accent); }
.logo-mark path { stroke: var(--accent-text); }

.header-actions { display: flex; align-items: center; gap: 8px; }

.icon-btn,
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.icon-btn:hover,
.nav-toggle:hover { border-color: var(--border-strong); background: var(--surface); }
.nav-toggle { display: none; }
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  position: relative;
  transition: transform 0.2s ease, background 0.2s ease;
}
.nav-toggle-bars::before,
.nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }

.site-nav ul {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  border-radius: 999px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.site-nav a:hover { background: var(--cat-soft); color: var(--text); }
.nav-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cat); }

/* Theme switcher: dropdown on desktop, segmented buttons in the mobile menu */
.theme-menu { position: relative; }
.theme-toggle .icon { width: 20px; height: 20px; display: none; }
.theme-toggle[data-current="light"] .i-light,
.theme-toggle[data-current="dark"] .i-dark,
.theme-toggle[data-current="system"] .i-system { display: block; }

.theme-list {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 60;
  min-width: 176px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
}
.theme-list[hidden] { display: none; }
.theme-list button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
  text-align: left;
  cursor: pointer;
}
.theme-list button:hover { background: var(--surface); }
.theme-list button[aria-pressed="true"] { background: var(--surface); color: var(--text); font-weight: 600; }
.theme-list button[aria-pressed="true"] .icon { color: var(--accent); }
.theme-list .icon { width: 18px; height: 18px; }

.nav-theme { display: none; }
.nav-theme-label {
  display: block;
  margin: 4px 2px 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.theme-seg {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.theme-seg button {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 6px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
.theme-seg .icon { width: 16px; height: 16px; }
.theme-seg button[aria-pressed="true"] { background: var(--card); color: var(--text); box-shadow: var(--shadow-sm); }

@media (max-width: 767px) {
  .nav-toggle { display: inline-flex; }
  .theme-menu { display: none; }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
  }
  .site-nav.is-open { display: block; }
  .site-nav ul {
    flex-direction: column;
    align-items: stretch;
    padding: 8px 16px 16px;
  }
  .site-nav a { display: flex; border-radius: var(--radius-sm); padding: 12px 14px; }
  .nav-theme { display: block; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
}

/* Footer ----------------------------------------------------------------- */

.site-footer {
  margin-top: 72px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  font-size: 0.95rem;
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-top: 28px;
  padding-bottom: 28px;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-links a { color: var(--muted); text-decoration: none; }
.footer-links a:hover { color: var(--accent); text-decoration: underline; }
.copyright { color: var(--muted); margin: 0; }

/* Hero ------------------------------------------------------------------- */

.hero {
  padding: clamp(48px, 7vw, 96px) 0 clamp(36px, 5vw, 64px);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}
.hero-copy { min-width: 0; text-align: center; }
.hero h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); margin-bottom: 0.4em; letter-spacing: -0.045em; }
/* "Calculators" on a rounded lime highlight */
.hero h1 .grad {
  display: inline-block;
  padding: 0 0.18em 0.04em;
  color: var(--on-lime);
  background: var(--lime);
  border: 2px solid var(--ink);
  border-radius: 0.3em;
}
.hero p.lead {
  max-width: 600px;
  margin: 0 auto 28px;
  color: var(--muted);
  font-size: clamp(1.02rem, 1.8vw, 1.18rem);
}

.search {
  position: relative;
  max-width: 580px;
  margin: 0 auto;
}
/* Only the magnifying glass, not the icons in the results dropdown */
.search > .icon {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  color: var(--accent);
  pointer-events: none;
}
.search input {
  width: 100%;
  height: 62px;
  padding: 0 22px 0 54px;
  font: inherit;
  font-size: 1.08rem;
  color: var(--text);
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.search input::placeholder { color: var(--muted); opacity: 1; }
.search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 5px var(--surface), var(--shadow-lg); }

/* Search results dropdown (combobox + listbox) */
.search-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 40;
  overflow: hidden;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
}
.search-panel[hidden] { display: none; }
.search-list {
  /* About eight rows; scrolls inside if there are more */
  max-height: min(456px, 62vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
}
.search-list:empty { display: none; }
.search-option {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 10px;
  border-radius: 12px;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
}
.search-option:hover { color: var(--text); }
.search-option.is-active { background: var(--cat-soft); box-shadow: inset 0 0 0 2px var(--cat); }
.search-option .card-icon { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; }
.search-option .card-icon .icon { width: 20px; height: 20px; }
.search-option-text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; line-height: 1.3; }
.search-option-title { font-weight: 600; overflow-wrap: anywhere; }
.search-option-cat { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--muted); }
.search-empty { margin: 0; padding: 16px 18px; color: var(--muted); font-size: 0.95rem; }
.search-empty a { font-weight: 600; }
.search-hint {
  margin: 0;
  padding: 8px 14px;
  font-size: 0.78rem;
  color: var(--muted);
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.search-hint kbd {
  font-family: var(--font);
  font-size: 0.75rem;
  padding: 0 5px;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  background: var(--card);
}
@media (max-width: 767px) {
  .search-hint { display: none; }
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.hero-meta li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 0.88rem;
  color: var(--muted);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.hero-meta strong { color: var(--text); }
.hero-meta .icon { width: 16px; height: 16px; color: var(--accent); }

.hero-widget { min-width: 0; }

@media (min-width: 960px) {
  /* Top-aligned so the calculator card always starts a full hero padding below the sticky header */
  .hero-inner { grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.7fr); gap: 56px; align-items: start; }
  .hero-copy { padding-top: 40px; }
  .hero-widget { padding-top: 8px; }
  .hero-copy { text-align: left; }
  .hero p.lead { margin-left: 0; }
  .search { margin: 0; }
  .hero-meta { justify-content: flex-start; }
}
/* With the history column the widget is about 590px wide: text takes the rest.
   The text is centred against the Quick calculator, with less padding above
   and below, so there's no big gap under the search box. */
@media (min-width: 1024px) {
  .hero { padding: clamp(40px, 4.5vw, 64px) 0; }
  .hero-inner { grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: center; }
  .hero-copy,
  .hero-widget { padding-top: 0; }
}
/* Narrowest two-column range: a little more room for the search placeholder */
@media (min-width: 1024px) and (max-width: 1199px) {
  .hero-inner { gap: 32px; }
  .search input { font-size: 1rem; padding-left: 48px; }
  .search > .icon { left: 16px; }
}

/* Mini calculator (homepage hero) ---------------------------------------- */

.mini-calc {
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
  padding: 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow-lg);
}
.mini-calc:focus-visible { outline-offset: 4px; border-radius: 22px; }
.mini-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 4px 10px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
}
.mini-title kbd {
  font-family: var(--font);
  font-size: 0.75rem;
  font-weight: 500;
  padding: 1px 7px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
}
.mini-display {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 116px;
  margin-bottom: 12px;
  padding: 10px 14px 10px;
  text-align: right;
  background: var(--surface);
  border-radius: 14px;
  overflow: hidden;
}
/* Lines that may get long scroll sideways (scrollbar hidden), always showing the end */
.mini-expr,
.mini-main {
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.mini-expr::-webkit-scrollbar,
.mini-main::-webkit-scrollbar { display: none; }
.mini-expr {
  min-height: 1.4em;
  font-size: 0.88rem;
  color: var(--muted);
}
.mini-main {
  min-height: 2.6rem;
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.mini-main.is-sm { font-size: 1.6rem; line-height: 1.6; }
.mini-main.is-xs { font-size: 1.2rem; line-height: 2.1; }
.mini-main.is-error { font-size: 1.2rem; line-height: 2.1; color: var(--error); }
.mini-main.is-rising { animation: mini-rise 0.32s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes mini-rise {
  from { opacity: 0.35; transform: translateY(14px) scale(0.86); transform-origin: right bottom; }
  to { opacity: 1; transform: none; }
}
/* Live answer preview: faded, appears only for a complete expression */
.mini-preview {
  min-height: 1.5em;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
}
/* The muted colour gives the faded look; full opacity keeps it readable (WCAG AA) */
.mini-preview.is-visible { opacity: 1; }
.mini-preview.is-error { color: var(--error); font-size: 0.9rem; }
.mini-preview.is-fading-in { animation: mini-fade 0.2s ease-out; }
@keyframes mini-fade {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: none; }
}

/* Card layout: title, display and keypad stack in one column. The history
   panel is absolutely positioned inside a grid area, so however many entries
   it holds it never changes the card's size:
   - below 1024px it covers the keypad area and slides in when opened;
   - from 1024px it is a second column beside the calculator. */
.mini-calc {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "title" "display" "keys";
}
.mini-title { grid-area: title; }
.mini-display { grid-area: display; }
.mini-keys { grid-area: keys; }

.mini-title-actions { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 479px) {
  .mini-title kbd { display: none; } /* not useful on small touch screens, and makes room for the links */
}
/* History toggle: icon button with a small count badge */
.mini-history-open {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.mini-history-open:hover { color: var(--text); border-color: var(--border-strong); }
.mini-history-open:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.mini-history-open[aria-expanded="true"] { color: var(--accent); background: var(--surface); border-color: transparent; }
.mini-history-open .icon { width: 20px; height: 20px; }
.mini-history-badge {
  position: absolute;
  top: -10px;
  right: -10px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  color: var(--accent-text);
  background: var(--accent);
  border: 2px solid var(--card);
  border-radius: 999px;
  box-sizing: content-box;
}
.mini-history-badge[hidden] { display: none; }
.mini-history-count {
  min-width: 22px;
  padding: 0 7px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
  color: var(--text);
  background: var(--surface-2);
  border-radius: 999px;
}

.mini-history {
  position: absolute;
  inset: 0;
  z-index: 2;
  grid-area: keys;
  min-width: 0;
  background: var(--card);
  /* Hidden until opened on small screens */
  visibility: hidden;
  opacity: 0;
  transform: translateX(12px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}
.mini-calc.is-history-open .mini-history {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
}
.mini-calc.is-history-open .mini-keys { visibility: hidden; }
.mini-history-inner { display: flex; flex-direction: column; height: 100%; }
.mini-history-close { display: none; width: 40px; height: 40px; }
.mini-history-close .icon { width: 18px; height: 18px; }

.mini-history-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 8px;
  margin-bottom: 6px;
}
.mini-history-back {
  min-height: 40px;
  padding: 0 10px;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent);
  background: var(--surface);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}
.mini-history-back:hover { background: var(--surface-2); }
.mini-history-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0;
}
.mini-history-title .icon { width: 18px; height: 18px; color: var(--accent); }

/* Only the list scrolls, never the page */
.mini-history-box { position: relative; flex: 1 1 auto; min-height: 0; }
.mini-history-scroll {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.mini-history-scroll::-webkit-scrollbar { width: 6px; }
.mini-history-scroll::-webkit-scrollbar-track { background: transparent; }
.mini-history-scroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }
/* Soft fade at the bottom while more entries are hidden below */
.mini-history-box::after {
  content: "";
  position: absolute;
  left: 0;
  right: 8px;
  bottom: 0;
  height: 28px;
  background: linear-gradient(to bottom, transparent, var(--card));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.mini-history-box.has-more::after { opacity: 1; }
.mini-history-list { margin: 0; padding: 0; list-style: none; }
.mini-history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 40px;
  padding: 6px 10px;
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: left;
  color: var(--text);
  background: transparent;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}
.mini-history-item:hover,
.mini-history-item:focus-visible { background: var(--surface); }
.mini-history-expr {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9rem;
  color: var(--muted);
}
.mini-history-value { flex: 0 0 auto; font-weight: 700; white-space: nowrap; }
.mini-history-empty { margin: 10px; font-size: 0.9rem; color: var(--muted); }
.mini-history-foot { padding-top: 4px; border-top: 1px solid var(--border); }
.mini-history-clear { min-height: 40px; margin-left: 8px; }
/* Keep its space when hidden so nothing shifts */
.mini-history-clear[hidden] { display: inline-block; visibility: hidden; }

/* Wide screens: the card has a second column for the history that is 0px
   wide when closed (so the card is the original 340px calculator) and slides
   open to the right. The hero gives the widget only the width it needs, so the
   text column shrinks smoothly while the calculator glides left. */
@media (min-width: 1024px) {
  .mini-calc {
    width: auto;
    max-width: none;
    margin: 0 0 0 auto;
    grid-template-columns: 306px 0px;
    grid-template-areas:
      "title history"
      "display history"
      "keys history";
    column-gap: 0px;
    transition: grid-template-columns 0.3s ease, column-gap 0.3s ease;
  }
  .mini-calc.is-history-open {
    grid-template-columns: 306px 237px;
    column-gap: 16px;
  }
  .mini-history {
    grid-area: history;
    overflow: hidden; /* clips the panel while its column grows or shrinks */
    opacity: 1;
    transform: none;
    transition: visibility 0s linear 0.3s;
  }
  .mini-calc.is-history-open .mini-history {
    visibility: visible;
    transition: visibility 0s;
  }
  .mini-history-inner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 237px;
    padding-left: 16px;
    border-left: 1px solid var(--border);
    opacity: 0;
    transform: translateX(-24px);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  .mini-calc.is-history-open .mini-history-inner { opacity: 1; transform: none; }
  .mini-calc.is-history-open .mini-keys { visibility: visible; }
  .mini-history-back { display: none; }
  .mini-history-close { display: inline-flex; }
  .mini-history-head { flex-wrap: nowrap; margin-bottom: 8px; }
}
.mini-keys {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.mini-keys button {
  height: 54px;
  min-width: 0;
  border: 0;
  border-radius: 13px;
  font: inherit;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  cursor: pointer;
  transition: background 0.12s ease, transform 0.08s ease;
}
.mini-keys button:hover { background: var(--surface-2); }
.mini-keys button:active,
.mini-keys button.is-pressed { transform: scale(0.95); }
.mini-keys .key-fn { color: var(--muted); font-size: 1.05rem; }
.mini-keys .key-op { color: var(--accent); background: var(--surface); }
.mini-keys .key-op:hover { background: var(--surface); filter: brightness(0.97); }
.mini-keys .key-eq { color: var(--accent-text); background: var(--accent); }
.mini-keys .key-eq:hover { background: var(--accent-strong); }
.mini-keys .key-zero { grid-column: span 2; }

/* "Scientific ↗" link in the Quick calculator's top bar */
.mini-sci-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 40px;
  padding: 0 11px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  background: var(--card);
  border-radius: 10px;
}
.mini-sci-link:hover { color: var(--text); text-decoration: underline; }
/* Embedded calculators shouldn't send people away mid-use */
.is-embed .mini-sci-link { display: none; }

/* Scientific calculator --------------------------------------------------- */
/* One card: title, display, (mobile) Basic/Scientific switch, function keys,
   number pad. History reuses the Quick calculator's panel: over the number pad
   below 1024px, sliding open to the right from 1024px. */
.sci-calc {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "title" "display" "mode" "sci" "keys";
  width: 100%;
  max-width: 520px;
  margin: 8px auto 0;
  padding: 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow-lg);
}
.sci-calc:focus-visible { outline-offset: 4px; }
.sci-display { min-height: 140px; }
.sci-flags { display: flex; gap: 6px; min-height: 20px; margin-bottom: 2px; }
.sci-flag {
  padding: 1px 7px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 18px;
  color: var(--cat);
  background: var(--cat-soft);
  border-radius: 999px;
}
.sci-flag[hidden] { display: none; }
.sci-mode { grid-area: mode; margin: 0 0 12px; }
.sci-mode .segmented { display: flex; }
.sci-mode .segmented label { flex: 1; text-align: center; min-height: 40px; line-height: 24px; }
.sci-fn {
  grid-area: sci;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 12px;
}
.sci-calc.is-basic .sci-fn { display: none; }
.sci-fn button {
  min-width: 0;
  height: 42px;
  padding: 0 2px;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.08s ease;
}
.sci-fn button:hover { background: var(--surface-2); }
.sci-fn button:active,
.sci-fn button.is-pressed { transform: scale(0.95); }
.sci-fn .is-toggle { color: var(--cat); background: var(--cat-soft); }
.sci-fn .is-toggle[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--cat); }
.sci-fn .key-mem { color: var(--muted); }
.sci-calc .mini-keys button { height: 52px; }

.sci-calc.is-history-open .mini-history {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
}
.sci-calc.is-history-open .mini-keys { visibility: hidden; }

@media (min-width: 1024px) {
  .sci-calc {
    width: fit-content;
    max-width: none;
    margin: 8px 0 0;
    /* function keys | number pad | history (0px until opened) */
    grid-template-columns: 316px 288px 0px;
    grid-template-areas:
      "title title history"
      "display display history"
      "sci keys history";
    transition: grid-template-columns 0.3s ease;
  }
  .sci-calc.is-history-open { grid-template-columns: 316px 288px 253px; }
  .sci-mode { display: none; }
  .sci-calc.is-basic .sci-fn,
  .sci-fn {
    display: grid;
    grid-template-rows: repeat(6, minmax(40px, 1fr));
    margin-bottom: 0;
    padding-right: 16px;
  }
  .sci-fn button { height: auto; }
  .sci-calc .mini-keys { grid-template-rows: repeat(5, minmax(48px, 1fr)); }
  .sci-calc .mini-keys button { height: auto; }
  .sci-calc .mini-history { transition: visibility 0s linear 0.3s; }
  .sci-calc.is-history-open .mini-history { visibility: visible; transition: visibility 0s; }
  .sci-calc .mini-history-inner { left: 16px; }
  .sci-calc.is-history-open .mini-history-inner { opacity: 1; transform: none; }
  .sci-calc.is-history-open .mini-keys { visibility: visible; }
}

.sci-shortcuts kbd {
  font-family: var(--font);
  font-size: 0.85rem;
  padding: 1px 6px;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  background: var(--surface);
}
.article kbd {
  font-family: var(--font);
  font-size: 0.85em;
  padding: 0 5px;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  background: var(--surface);
}

/* Section headings ------------------------------------------------------- */

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.section-head h2 { margin: 0; }
.section-head p { margin: 0; color: var(--muted); font-size: 0.95rem; }
.section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: var(--cat);
  background: var(--cat-soft);
}
.section-icon .icon { width: 22px; height: 22px; }

.no-results {
  text-align: center;
  color: var(--muted);
  padding: 32px 0;
}

/* Popular calculators ---------------------------------------------------- */

.popular { padding-top: 48px; }
.popular[hidden] { display: none; }
/* 1, 2 or 4 columns so four cards never leave one alone on a row */
.feature-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 640px) and (max-width: 1099px) {
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* An odd last card takes the full row */
  .feature-grid > li:nth-child(odd):last-child { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  /* Three per row; a last row of two shares the width, and four cards go 2 + 2 */
  .feature-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .feature-grid > li { grid-column: span 2; }
  .feature-grid > li:nth-child(3n+1):nth-last-child(2),
  .feature-grid > li:nth-child(3n+2):last-child,
  .feature-grid > li:first-child:nth-last-child(4),
  .feature-grid > li:first-child:nth-last-child(4) ~ li { grid-column: span 3; }
  .feature-grid > li:nth-child(3n+1):last-child { grid-column: 1 / -1; }
  /* 7, 10… cards: a row of 3, then the last four as two rows of 2 */
  .feature-grid > li:first-child:nth-last-child(3n+4) ~ li:nth-last-child(-n+4) { grid-column: span 3; }
}
.feature-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  padding: 24px;
  color: var(--text);
  text-decoration: none;
  background: linear-gradient(155deg, var(--cat-soft), var(--card) 58%);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.feature-card:hover { color: var(--text); transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--cat); }
.feature-card:focus-visible { outline: 3px solid var(--cat); outline-offset: 3px; border-radius: 18px; }
.feature-card h3 { margin: 4px 0 0; font-size: 1.2rem; }
.feature-card p { margin: 0; color: var(--muted); font-size: 0.95rem; line-height: 1.55; }
.feature-card .card-icon { width: 52px; height: 52px; border-radius: 15px; }
.feature-card .card-icon .icon { width: 28px; height: 28px; }
.feature-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; }
.feature-tags li {
  padding: 2px 9px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.feature-card .card-cta { margin-top: auto; padding-top: 6px; color: var(--cat); font-weight: 700; }

/* Calculator category sections ------------------------------------------ */

.category { padding-top: 44px; }
.category .section-head h2 { color: var(--cat); }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.calc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 20px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
}
.calc-card h3 { margin: 6px 0 0; font-size: 1.05rem; }
.calc-card p { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.5; }

.card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  color: var(--cat);
  background: var(--cat-soft);
}
.card-icon .icon { width: 24px; height: 24px; }

a.calc-card {
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
a.calc-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--cat); color: var(--text); }
a.calc-card:focus-visible { outline: 3px solid var(--cat); outline-offset: 3px; border-radius: var(--radius); }
a.calc-card .card-cta { margin-top: auto; padding-top: 8px; color: var(--cat); font-weight: 600; font-size: 0.92rem; }


/* Page header (inner pages) --------------------------------------------- */

.page-head { padding: clamp(28px, 5vw, 48px) 0 8px; }
.page-head .lead { color: var(--muted); font-size: 1.08rem; max-width: 720px; }

.breadcrumb {
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 12px;
}
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--accent); }

/* Calculator ------------------------------------------------------------- */

.calc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
/* Grid items default to min-width: auto, which lets wide content
   (the table, the canvas) stretch the column past the viewport */
.calc-layout > * { min-width: 0; }
@media (min-width: 960px) {
  /* In rem so the input column grows with the larger base font on big screens */
  .calc-layout { grid-template-columns: minmax(20rem, 25rem) minmax(0, 1fr); }
  .calc-panel { position: sticky; top: 84px; }
}

.panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: clamp(18px, 3vw, 28px);
}

.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 6px;
}
.field label .optional { font-weight: 400; color: var(--muted); }

.input-wrap { position: relative; }
.input-wrap .affix {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
  font-weight: 500;
}
.input-wrap .prefix { left: 14px; }
.input-wrap .suffix { right: 14px; }
.field .input-wrap.has-prefix input { padding-left: 34px; }
.field .input-wrap.has-suffix input { padding-right: 52px; }

.field input:not([type="range"]),
.field select {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238892a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.field input:not([type="range"]):hover,
.field select:hover { border-color: var(--muted); }
.field input:not([type="range"]):focus,
.field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--surface); }
.field input[aria-invalid="true"] { border-color: var(--error); }
.field input[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px var(--error-soft); }
.field input::placeholder { color: var(--muted); opacity: 0.75; }

.field input[type="number"] { -moz-appearance: textfield; }
.field input[type="number"]::-webkit-outer-spin-button,
.field input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.field-error {
  margin: 6px 0 0;
  font-size: 0.88rem;
  color: var(--error);
}
.field-error:empty { display: none; }

/* Range sliders (synced with a number box). Tall hit area for touch. */
.range {
  display: block;
  width: 100%;
  height: 36px;
  margin: 6px 0 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  --fill: 50%;
}
.range:focus { outline: none; }
.range:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 999px; }
.range::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--accent) var(--fill), var(--surface-2) var(--fill));
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 28px;
  height: 28px;
  margin-top: -10px;
  border-radius: 50%;
  background: var(--card);
  border: 3px solid var(--accent);
  box-shadow: var(--shadow);
  transition: transform 0.12s ease;
}
.range:active::-webkit-slider-thumb { transform: scale(1.12); }
.range::-moz-range-track { height: 8px; border-radius: 999px; background: var(--surface-2); }
.range::-moz-range-progress { height: 8px; border-radius: 999px; background: var(--accent); }
.range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--card);
  border: 3px solid var(--accent);
  box-shadow: var(--shadow);
}

.field-row { display: grid; gap: 0 14px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
/* Line up side-by-side inputs even when one label wraps onto two lines:
   each field shares four rows (label, control, error, slider) with its neighbour */
.field-row > .field {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
}
.field-row > .field > label { grid-row: 1; align-self: end; }
.field-row > .field > .input-wrap,
.field-row > .field > input,
.field-row > .field > select { grid-row: 2; }
.field-row > .field > .field-error { grid-row: 3; }
.field-row > .field > .range { grid-row: 4; }
@media (max-width: 767px) { .field-row { grid-template-columns: minmax(0, 1fr); } }

/* Buttons share the row when there is room and stack when there isn't */
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

.btn {
  flex: 1 1 120px;
  min-width: 0;
  height: 50px;
  padding: 0 20px;
  font: inherit;
  font-weight: 600;
  border-radius: 12px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { flex-grow: 2; background: var(--accent); color: var(--accent-text); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--accent-strong); }
.btn-secondary { background: var(--card); color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover { border-color: var(--muted); background: var(--surface); }
.btn-sm {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
}
.btn-sm .icon { width: 18px; height: 18px; }

.results-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 260px;
  text-align: center;
  color: var(--muted);
}
.results-empty svg { width: 48px; height: 48px; margin-bottom: 12px; color: var(--chart-contrib); }

.results[hidden],
.results-empty[hidden] { display: none; }

.stats {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.stat-primary,
.stat-wide { grid-column: 1 / -1; }
.stat[hidden] { display: none; }
@media (max-width: 559px) {
  .stats { grid-template-columns: minmax(0, 1fr); }
}
.stat {
  min-width: 0;
  container-type: inline-size;
  padding: 16px 18px;
  background: var(--surface);
  border-radius: 12px;
  border: 1px solid var(--border);
}
.stat-label { display: block; font-size: 0.88rem; color: var(--muted); margin-bottom: 2px; }
.stat-value {
  display: block;
  /* Sized to the card so a value like $999,999,999.99 always fits on one line */
  font-size: clamp(1rem, 4.5vw, 1.8rem);
  font-size: clamp(1rem, 10.5cqi, 2.25rem);
  font-weight: 750;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Highlighted result that shares a row with another (e.g. unweighted + weighted GPA) */
.stat-accent { background: linear-gradient(135deg, var(--surface), var(--surface)); border-color: transparent; }
.stat-accent .stat-value { color: var(--accent); }
.stat-value.is-up { color: var(--success); }
.stat-value.is-down { color: var(--error); }
/* Short values (a letter grade, a GPA) can be much bigger than money amounts */
.stat-value.is-short { font-size: clamp(1.6rem, 22cqi, 2.25rem); }
.stat-sub { display: block; margin-top: 2px; font-size: 0.82rem; color: var(--muted); }
.stat-primary {
  background: linear-gradient(135deg, var(--surface), var(--surface));
  border-color: transparent;
}
.stat-primary .stat-value { color: var(--accent); }

.results h2 { font-size: 1.15rem; margin: 8px 0 12px; }

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  font-size: 0.9rem;
  color: var(--muted);
}
.chart-legend li { display: inline-flex; align-items: center; gap: 8px; }
.swatch { width: 12px; height: 12px; border-radius: 3px; }
.swatch-start { background: var(--chart-start); }
.swatch-contrib { background: var(--chart-contrib); }
.swatch-interest { background: var(--chart-interest); }

.chart-wrap { width: 100%; min-width: 0; margin-bottom: 28px; }
.chart-wrap canvas { width: 100%; }

/* Only the table scrolls sideways, never the page */
.table-wrap,
.table-scroll {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-scroll { margin: 0 0 1em; }

.table-wrap {
  max-height: 480px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
table.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.93rem;
  font-variant-numeric: tabular-nums;
}
.data-table th,
.data-table td { padding: 10px 14px; text-align: right; white-space: nowrap; }
.data-table th:first-child,
.data-table td:first-child { text-align: left; }
.data-table thead th {
  position: sticky;
  top: 0;
  background: var(--surface);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}
.data-table tbody tr + tr td { border-top: 1px solid var(--border); }
.data-table tbody tr:hover td { background: var(--surface); }
.data-table tbody td:last-child { font-weight: 600; }

.note { font-size: 0.88rem; color: var(--muted); margin-top: 12px; }

/* Percentage calculator cards ------------------------------------------- */

.pct-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.pct-grid > * { min-width: 0; }
@media (min-width: 768px) {
  .pct-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.pct-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.pct-card-head h2 { font-size: 1.15rem; margin: 0; }

.link-btn {
  flex: 0 0 auto;
  padding: 4px 0;
  font: inherit;
  font-size: 0.9rem;
  color: var(--accent);
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.link-btn:hover { color: var(--accent-strong); }

.pct-result {
  min-width: 0;
  container-type: inline-size;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.pct-answer {
  display: block;
  font-size: clamp(1.4rem, 5vw, 2rem);
  font-size: clamp(1.4rem, 9cqi, 2rem);
  font-weight: 750;
  line-height: 1.3;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  /* Extremely long numbers scroll inside the box rather than breaking */
  overflow-x: auto;
}
/* Brief fade-in for live results (disabled for reduced motion below) */
.is-pop { animation: result-pop 0.28s ease-out; }
@keyframes result-pop {
  from { opacity: 0.3; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
.pct-num { white-space: nowrap; }
.pct-answer.is-up { color: var(--success); }
.pct-answer.is-down { color: var(--error); }
.pct-explain {
  margin: 6px 0 0;
  font-size: 0.92rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.pct-explain.is-warning { color: var(--error); }

.toggle-field { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
.toggle-field legend { padding: 0; margin-bottom: 6px; font-weight: 600; font-size: 0.95rem; }
.segmented {
  display: inline-flex;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.segmented input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segmented label {
  padding: 8px 18px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--muted);
  cursor: pointer;
}
.segmented input:checked + label { background: var(--accent); color: var(--accent-text); }
.segmented input:focus-visible + label { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Grade calculator: tabs, assignment rows, results ---------------------- */

.tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 20px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.tabs-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  min-height: 48px;
  padding: 6px 10px;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.tab:hover { color: var(--text); }
.tab .icon { width: 18px; height: 18px; }
.tab[aria-selected="true"] { color: var(--text); background: var(--card); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--border-strong); }
.tab[aria-selected="true"] .icon { color: var(--cat); }
@media (max-width: 479px) {
  .tab { font-size: 0.86rem; padding: 6px; }
  .tab .icon { display: none; }
}
.tab-panel[hidden] { display: none; }

@media (min-width: 960px) {
  .calc-layout.is-wide { grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); }
  .calc-layout.is-wide > .results-panel { position: sticky; top: 84px; }
  .is-embed .calc-layout.is-wide > .results-panel { top: 16px; }
}

.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.panel-head h2,
.results-title { margin: 0; font-size: 1.15rem; }
.results-title { margin-bottom: 14px; }

.grade-list { margin: 0; padding: 0; list-style: none; }
.grade-head,
.grade-row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) 44px;
  gap: 10px;
  align-items: end;
}
.grade-rows.is-points .grade-head,
.grade-rows.is-points .grade-row {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.9fr) minmax(0, 0.9fr) minmax(0, 0.9fr) 44px;
}
.grade-rows.is-gpa .grade-head,
.grade-rows.is-gpa .grade-row {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr) minmax(0, 1.5fr) minmax(0, 0.8fr) 44px;
}
.grade-head { padding-bottom: 6px; font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.grade-head small { font-weight: 400; }
.grade-row { margin-bottom: 10px; }
.grade-row .field { margin: 0; min-width: 0; }
.grade-row .input-wrap { display: block; }
.cell-label { display: block; margin-bottom: 4px; font-size: 0.82rem; font-weight: 600; color: var(--muted); }
.grade-rows:not(.is-points) .cell-points,
.grade-rows.is-points .cell-pct { display: none; }
.row-remove { width: 44px; height: 48px; }
.row-remove .icon { width: 18px; height: 18px; }
.row-remove:disabled { opacity: 0.4; cursor: not-allowed; }

/* Wide rows: column headings above, so the per-cell labels are for screen readers only */
@media (min-width: 600px) {
  .grade-row .cell-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}
/* Narrow rows: each assignment becomes a small card */
@media (max-width: 599px) {
  .grade-head { display: none; }
  .grade-row,
  .grade-rows.is-points .grade-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px;
    padding: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
  }
  .grade-row .cell-name { grid-column: 1 / 3; }
  .grade-row .row-remove { grid-column: 3; grid-row: 1; align-self: end; }
  .grade-rows.is-points .grade-row .cell-weight { grid-column: 1; }
}

/* GPA rows (class, grade, type, credits) need more room for "Dual Enrollment",
   so they switch to cards below 768px with the class type on its own line */
.grade-row select { padding: 0 28px 0 10px; background-position: right 10px center; }
@media (max-width: 767px) {
  .grade-rows.is-gpa .grade-head { display: none; }
  .grade-rows.is-gpa .grade-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px;
    padding: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
  }
  .grade-rows.is-gpa .cell-name { grid-area: 1 / 1 / 2 / 3; }
  .grade-rows.is-gpa .row-remove { grid-area: 1 / 3; align-self: end; }
  .grade-rows.is-gpa .cell-grade { grid-area: 2 / 1; }
  .grade-rows.is-gpa .cell-credits { grid-area: 2 / 2; }
  .grade-rows.is-gpa .cell-type { grid-area: 3 / 1 / 4 / -1; }
  .grade-rows.is-gpa .grade-row .cell-label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
}

.grade-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 6px; }
.grade-actions .note { margin: 0; }

.grade-message { margin: 0 0 8px; color: var(--muted); }
.grade-message.is-warning { color: var(--error); }
.grade-message.is-success { color: var(--success); }
.grade-notes { margin: 0; padding: 0; list-style: none; font-size: 0.88rem; color: var(--muted); }
.grade-notes li { margin-top: 4px; }
.table-title { margin: 22px 0 10px; font-size: 1rem; }
.data-table td.is-met { color: var(--success); font-weight: 600; }

.scale-table { margin: 0 0 1em; }
.scale-table .compare { min-width: 320px; }

/* Hours calculator ------------------------------------------------------ */

.time-format {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-bottom: 14px;
}
.time-format legend { float: left; margin: 0; }
.field .field-label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 0.95rem; }

/* A time is three selects: hour : minute AM/PM (24-hour hides AM/PM) */
.time-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.time-input { display: inline-flex; align-items: center; gap: 6px; }
.time-input select {
  width: auto;
  height: 48px;
  min-width: 66px;
  padding: 0 28px 0 12px;
  font: inherit;
  color: var(--text);
  background-color: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238892a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.time-input select:hover { border-color: var(--muted); }
.time-input select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--surface); }
.time-input .t-sep { font-weight: 700; color: var(--muted); }
.hours-app.is-24h .time-input [data-part="period"] { display: none; }
.now-btn { height: 48px; }

/* Weekly timesheet: a table-like grid on wide screens, a card per day below */
.ts-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.ts-head,
.ts-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) minmax(0, 1fr) 110px 110px;
  gap: 12px;
  align-items: center;
}
.ts-head { padding-bottom: 6px; font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.ts-head span:last-child { text-align: right; }
.ts-row { padding: 8px 0; border-top: 1px solid var(--border); }
.ts-row.is-error .ts-result { color: var(--error); }
.ts-day { font-weight: 700; }
.ts-cell { min-width: 0; margin: 0; }
.ts-cell .cell-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.ts-break input { width: 100%; }
.ts-result { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.ts-result small { display: block; font-size: 0.8rem; font-weight: 500; color: var(--muted); }
.ts-options-title { margin: 24px 0 12px; font-size: 1rem; }
.ts-options-title .optional { font-weight: 400; color: var(--muted); }
.ts-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 14px; }
.ts-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) {
  .ts-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ts-stats .stat-primary { grid-column: 1 / -1; }
  .ts-stats .stat-wide { grid-column: span 2; }
}
@media (max-width: 899px) {
  .ts-head { display: none; }
  .ts-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "day result" "start end" "brk brk";
    gap: 10px;
    margin-bottom: 10px;
    padding: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
  }
  .ts-day { grid-area: day; }
  .ts-result { grid-area: result; }
  .ts-start { grid-area: start; }
  .ts-end { grid-area: end; }
  .ts-break { grid-area: brk; }
  .ts-cell .cell-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
  .ts-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .ts-row { grid-template-areas: "day result" "start start" "end end" "brk brk"; }
  .ts-options { grid-template-columns: minmax(0, 1fr); }
}

/* Add up hours: add/subtract, hours, minutes, remove */
.grade-rows.is-addup .grade-head,
.grade-rows.is-addup .grade-row { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) 44px; }
@media (max-width: 599px) {
  .grade-rows.is-addup .grade-head { display: grid; }
  .grade-rows.is-addup .grade-row {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) 44px;
    padding: 0;
    background: none;
    border: 0;
  }
  .grade-rows.is-addup .grade-row .cell-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .grade-rows.is-addup .grade-row .row-remove { grid-column: auto; grid-row: auto; }
}

/* Average calculator ---------------------------------------------------- */

.panel-links { display: inline-flex; gap: 14px; }
.field textarea.avg-textarea {
  display: block;
  width: 100%;
  min-height: 180px;
  padding: 12px 14px;
  font: inherit;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  resize: vertical;
}
.field textarea.avg-textarea:hover { border-color: var(--muted); }
.field textarea.avg-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--surface); }
.field textarea.avg-textarea::placeholder { color: var(--muted); opacity: 0.75; }
.avg-sorted {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
/* All secondary results the same size; very long pasted values wrap instead of overflowing */
.avg-stats .stat:not(.stat-primary) .stat-value {
  font-size: clamp(1.15rem, 4.5vw, 1.5rem); /* by screen width, so a full-width card matches the rest */
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Weighted rows (value, weight) and time rows (h, m, s) reuse the grade rows */
.grade-rows.is-weighted .grade-head,
.grade-rows.is-weighted .grade-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; }
.grade-rows.is-times .grade-head,
.grade-rows.is-times .grade-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 44px; }
@media (max-width: 599px) {
  .grade-rows.is-weighted .grade-head,
  .grade-rows.is-times .grade-head { display: grid; }
  .grade-rows.is-weighted .grade-row,
  .grade-rows.is-times .grade-row { padding: 0; background: none; border: 0; }
  .grade-rows.is-weighted .grade-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; }
  .grade-rows.is-times .grade-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 44px; }
  .grade-rows.is-weighted .grade-row .cell-label,
  .grade-rows.is-times .grade-row .cell-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .grade-rows.is-weighted .grade-row .row-remove,
  .grade-rows.is-times .grade-row .row-remove { grid-column: auto; grid-row: auto; }
}

/* "display: grid" would otherwise override the hidden attribute */
.field-row[hidden] { display: none; }

/* ROI calculator: one currency choice for both tabs */
.roi-currency { max-width: 240px; margin-bottom: 14px; }

/* SEO ROI calculator */
.field .note { margin-top: 6px; }
@media (min-width: 560px) {
  .stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.stats-3 .stat-value { font-size: clamp(1rem, 4.5vw, 1.35rem); font-size: clamp(1rem, 11cqi, 1.5rem); }
/* A sentence instead of a number (e.g. "Not within this period") */
.stat-value.is-text { font-size: clamp(1rem, 7cqi, 1.35rem); white-space: normal; }
.swatch-seo-cost { background: var(--chart-contrib); }
.swatch-seo-return { background: var(--chart-interest); }

/* Simplify fraction calculator ------------------------------------------ */

/* Inputs stacked like a written fraction; the whole number is centred on the line */
.frac-input {
  display: grid;
  grid-template-columns: minmax(0, 7.5rem) minmax(0, 10rem);
  grid-template-areas:
    "lw ln"
    "w  n"
    "w  line"
    "w  d"
    ".  ld";
  column-gap: 16px;
  justify-content: center;
  align-items: center;
  margin-bottom: 4px;
}
.frac-input label { margin: 0 0 6px; text-align: center; white-space: nowrap; }
.frac-input .frac-label-den { margin: 6px 0 0; }
.frac-input .frac-label-whole { grid-area: lw; font-size: 0.88rem; align-self: end; }
.frac-label-num { grid-area: ln; }
.frac-label-den { grid-area: ld; }
.frac-in-whole { grid-area: w; }
.frac-in-num { grid-area: n; }
.frac-in-den { grid-area: d; }
.field.frac-input input:not([type="range"]) {
  height: 56px;
  text-align: center;
  font-size: 1.35rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.frac-input-line { grid-area: line; height: 3px; margin: 10px 4px; border-radius: 2px; background: var(--cat); }
@media (max-width: 359px) {
  .frac-input { grid-template-columns: minmax(0, 5.5rem) minmax(0, 1fr); column-gap: 10px; }
  .frac-input .frac-label-whole .optional { display: none; }
}
.frac-errors .field-error:empty { display: none; }

/* Big answer, written as a stacked fraction */
.frac-answer {
  margin-bottom: 20px;
  padding: 18px 20px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--cat-soft), var(--surface));
  text-align: center;
}
.frac-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.15em;
  min-height: 2.6em;
  font-size: clamp(2rem, 9vw, 3rem);
  font-weight: 750;
  line-height: 1.1;
  color: var(--cat);
  font-variant-numeric: tabular-nums;
  /* Very long numbers scroll inside the box rather than overflow the page */
  overflow-x: auto;
}
.frac-dash { color: var(--muted); font-weight: 600; }
.frac-sign,
.frac-int { white-space: nowrap; }
.frac-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  vertical-align: middle;
}
.frac-top,
.frac-bottom { padding: 0 0.15em; white-space: nowrap; }
.frac-top { border-bottom: 0.07em solid currentColor; padding-bottom: 0.04em; }
.frac-bottom { padding-top: 0.04em; }
.frac-stack.is-small { font-size: 0.62em; }
.frac-status { margin: 8px 0 0; color: var(--muted); overflow-wrap: anywhere; }
.frac-status.is-warning { color: var(--error); }
.frac-status.is-success { color: var(--success); font-weight: 600; }

/* Mixed number stat: "2" beside a small stacked fraction */
#frac-mixed { display: flex; align-items: center; gap: 0.2em; }
.frac-repeat { text-decoration: overline; }

.frac-steps { margin: 0; padding-left: 1.4em; overflow-wrap: anywhere; }
.frac-steps > li { margin-bottom: 10px; }
.frac-euclid {
  margin: 8px 0;
  padding: 10px 14px;
  list-style: none;
  font-family: var(--mono);
  font-size: 0.92rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.frac-euclid li + li { margin-top: 4px; }

.frac-equiv { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.frac-equiv li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  align-items: safe center;
  min-width: 0;
  padding: 8px 4px 10px;
  /* Long numbers scroll inside their card */
  overflow-x: auto;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--cat);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.frac-equiv .frac-stack.is-small { font-size: 0.75em; }
.frac-equiv-times { font-size: 0.75rem; font-weight: 600; color: var(--muted); }

/* Bar picture: one bar per whole, split into equal parts */
.frac-vis-row { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 12px; align-items: center; margin-bottom: 12px; }
.frac-vis-label { font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.frac-vis-bars { display: grid; gap: 6px; }
.frac-vis-bar {
  display: grid;
  gap: 2px;
  height: 28px;
  padding: 2px;
  background: var(--border-strong);
  border-radius: 8px;
}
.frac-vis-bar > span { background: var(--surface); border-radius: 4px; }
.frac-vis-bar > span.is-on { background: var(--cat); }
.frac-visual .note { margin-top: 4px; }

/* 3-part date input: [Month ▾] [Day ▾] [Year ▾] [calendar] (date-input.js) */

.date-field { min-width: 0; padding: 0; border: 0; }
/* Floated so the legend lays out like a normal label (with room for "Today") */
.date-field > legend:not(.visually-hidden) { float: left; width: 100%; padding: 0; margin-bottom: 6px; font-weight: 600; font-size: 0.95rem; }
.date-field > legend.label-row { display: flex; }
.date-field > legend:not(.visually-hidden) + * { clear: both; }
.date-parts { position: relative; display: flex; align-items: center; gap: 6px; min-width: 0; }
.field .date-parts select { height: 48px; min-width: 0; }
.field .date-parts select { padding: 0 26px 0 10px; background-position: right 9px center; cursor: pointer; }
.date-parts [data-part="month"] { flex: 1 1 auto; }
.date-parts [data-part="day"] { flex: 0 0 4.3rem; }
/* Year: a slimmer left gap so "2026" fits beside the arrow at the old text-box width */
.field .date-parts [data-part="year"] { flex: 0 0 4.6rem; padding: 0 24px 0 8px; background-position: right 8px center; font-variant-numeric: tabular-nums; }
.date-parts select[aria-invalid="true"] { border-color: var(--error); }
.date-cal { flex: 0 0 44px; height: 48px; }
.date-cal .icon { width: 20px; height: 20px; color: var(--cat); }
/* The native date input stays in the page (it holds the value and opens the
   browser's picker) but is invisible, sitting under the calendar button */
.field .date-parts input.date-native { position: absolute; right: 0; bottom: 0; width: 44px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }
/* Fallback when the browser can't open its picker from the button: show the native box */
.show-native .date-parts { flex-wrap: wrap; }
.field.show-native .date-parts input.date-native { position: static; flex: 1 1 100%; width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--border-strong); opacity: 1; pointer-events: auto; }
.date-note { margin: 6px 0 0; font-size: 0.85rem; color: var(--muted); }
.date-note:empty { display: none; }
/* Phones: compact parts, still on one line, so the longest month ("September") fits */
@media (max-width: 440px) {
  .date-parts { gap: 4px; }
  .field .date-parts select { padding: 0 20px 0 8px; background-position: right 6px center; font-size: 0.95rem; }
  .date-parts [data-part="day"] { flex-basis: 3.6rem; }
  .field .date-parts [data-part="year"] { flex-basis: 4.1rem; padding: 0 18px 0 5px; background-position: right 5px center; }
  .date-cal { flex-basis: 40px; }
}
/* The narrowest phones: the month gets its own line; day, year and the
   calendar button share the line below */
@media (max-width: 370px) {
  .date-parts { flex-wrap: wrap; row-gap: 8px; }
  .date-parts [data-part="month"] { flex: 1 1 100%; }
  .date-parts [data-part="day"],
  .field .date-parts [data-part="year"] { flex: 1 1 0; }
}

/* Batting average calculator -------------------------------------------- */

/* Two whole-number boxes per row, even on phones; inputs line up if a label wraps */
.count-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; align-items: end; }
.more-stats {
  margin: 4px 0 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.more-stats > summary {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  padding: 12px 40px 12px 16px;
  position: relative;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.more-stats > summary::-webkit-details-marker { display: none; }
.more-stats > summary .optional { font-weight: 400; font-size: 0.88rem; color: var(--muted); }
.more-stats > summary::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 18px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--cat);
  border-bottom: 2px solid var(--cat);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.more-stats[open] > summary::after { transform: rotate(225deg); top: 21px; }
.more-stats > summary:focus-visible { outline: 3px solid var(--cat); outline-offset: 2px; border-radius: 12px; }
.more-stats > .count-grid { padding: 4px 16px 2px; }

/* Date calculator ------------------------------------------------------- */

/* A label with a small "Today" button at the end of the line */
.label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.field .label-row label { margin: 0; }
/* Results here are words ("26 years 5 months 7 days"), so they are sized
   for words and may wrap instead of being squeezed onto one line */
.date-stats .stat:not(.stat-primary) .stat-value { font-size: clamp(1.05rem, 7.5cqi, 1.6rem); white-space: normal; }
.date-units { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
/* Years, months and days side by side; inputs line up even if a label wraps */
.date-units.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 10px; align-items: end; }
.holiday-box { margin-top: 6px; border-top: 1px solid var(--border); }
.holiday-box .table-title { margin: 16px 0 4px; }
.holiday-box > .note { margin: 0 0 10px; }
.holiday-add { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.holiday-add .date-field { width: 100%; margin: 0; }
.holiday-add .btn { flex: 0 0 auto; }
.chip-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.chip-list[hidden] { display: none; }
.chip-list li {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: 100%;
  padding: 3px 3px 3px 12px;
  font-size: 0.88rem;
  background: var(--cat-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.chip-list li span { min-width: 0; overflow-wrap: anywhere; }
.chip-remove { width: 30px; height: 30px; border-radius: 50%; border-color: transparent; background: transparent; }
.chip-remove .icon { width: 15px; height: 15px; }
.preset-label { margin: 0 0 8px; font-weight: 600; font-size: 0.95rem; }
.preset-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.preset-row .btn { flex: 0 0 auto; }
/* The new date, written out in full */
.date-answer {
  margin-bottom: 20px;
  padding: 18px 20px;
  text-align: center;
  background: linear-gradient(135deg, var(--cat-soft), var(--surface));
  border-radius: 14px;
}
.date-big { margin: 0; font-size: clamp(1.35rem, 5vw, 1.9rem); font-weight: 750; line-height: 1.25; color: var(--cat); overflow-wrap: anywhere; }
.date-iso { margin: 6px 0 0; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Sales tax calculator ------------------------------------------------- */

/* Tax rate rows: name, rate and (with two or more rows) a remove button */
.tax-rows { margin: 4px 0 6px; padding: 0; list-style: none; }
.tax-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 44px; gap: 10px; align-items: start; }
.tax-rows:not(.is-multi) .tax-row { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.tax-row .field { min-width: 0; margin-bottom: 10px; }
.tax-row .row-remove { margin-top: 24px; }
.tax-row .row-remove[hidden] { display: none; }
.tax-breakdown {
  margin: -8px 0 16px;
  padding: 10px 16px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.tax-breakdown li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-variant-numeric: tabular-nums; }
.tax-breakdown li + li { border-top: 1px dashed var(--border); }
.tax-breakdown span { min-width: 0; overflow-wrap: anywhere; color: var(--muted); }
.tax-working { margin: 0 0 10px; color: var(--muted); overflow-wrap: anywhere; }

/* Decimal to fraction calculator ----------------------------------------- */

.field input.dec-big-input { font-size: 1.2rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.check-field { display: flex; align-items: center; gap: 10px; margin: 4px 0 16px; }
.check-field input { width: 20px; height: 20px; margin: 0; accent-color: var(--cat); cursor: pointer; }
.check-field label { font-weight: 600; font-size: 0.95rem; cursor: pointer; }
/* A stacked fraction inside a result card: "3" beside a small stacked 1/8 */
.stat-value.frac-inline { display: flex; align-items: center; gap: 0.2em; }
.stat-accent .stat-value.frac-inline { color: var(--cat); }
.stat-accent:has(.frac-inline) { background: linear-gradient(135deg, var(--cat-soft), var(--surface)); }
.frac-explain { margin: 0; overflow-wrap: anywhere; }

/* Mixed number calculator ------------------------------------------------ */

/* Fraction input without a whole-number box */
.frac-input.is-plain {
  grid-template-columns: minmax(0, 10rem);
  grid-template-areas: "ln" "n" "line" "d" "ld";
}
/* One card per row, for results in a narrow column */
.stats.stats-1 { grid-template-columns: minmax(0, 1fr); }
.frac-substeps { margin: 6px 0 0; padding-left: 1.1em; font-variant-numeric: tabular-nums; }
.frac-substeps li + li { margin-top: 2px; }

/* Two stacked inputs with the operator between them: in a column on narrow
   panels, side by side (operator buttons stacked) when there is room */
.mix-sum { container-type: inline-size; margin-bottom: 4px; }
.mix-sum-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.mix-block { min-width: 0; margin: 0; padding: 0; border: 0; }
.mix-block legend {
  width: 100%;
  margin-bottom: 8px;
  padding: 0;
  font-size: 0.9rem;
  font-weight: 700;
  text-align: center;
  color: var(--muted);
}
.mix-block .frac-input {
  grid-template-columns: minmax(0, 4fr) minmax(0, 5fr);
  max-width: 300px;
  margin: 0 auto;
}
.mix-op {
  display: flex;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  margin: 10px 0 14px;
  padding: 0;
  border: 0;
}
.mix-op input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mix-op label {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.mix-op label:hover { border-color: var(--cat); }
.mix-op input:checked + label { background: var(--cat); border-color: var(--cat); color: var(--card); }
.mix-op input:focus-visible + label { outline: 3px solid var(--cat); outline-offset: 2px; }
@container (min-width: 520px) {
  .mix-sum-grid { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 14px; }
  .mix-op { flex-direction: column; margin: 30px 0 0; }
  .mix-op label { width: 42px; height: 42px; }
}

/* Fraction calculator ---------------------------------------------------- */

/* Fractions and operators: a column on narrow panels; on wider ones they
   flow and wrap like written maths, each operator kept with its fraction */
.fc-expr { container-type: inline-size; margin-bottom: 14px; }
.fc-flow { display: flex; flex-direction: column; gap: 4px; }
.fc-item { display: flex; flex-direction: column; align-items: stretch; min-width: 0; }
.fc-term {
  min-width: 0;
  margin: 0;
  padding: 10px 14px 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
}
/* Floated so the legend sits inside the card instead of on its border */
.fc-term legend {
  float: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 32px;
  margin-bottom: 4px;
  padding: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--muted);
}
.fc-term legend + * { clear: both; }
.fc-remove { width: 32px; height: 32px; }
.fc-remove .icon { width: 16px; height: 16px; }
.fc-remove[hidden] { display: none; }
.fc-term .frac-input { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr); max-width: 300px; margin: 0 auto 4px; }
.fc-term .field-error:empty { display: none; }
.fc-op.mix-op { margin: 8px 0; }
@container (min-width: 520px) {
  .fc-flow { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px 12px; }
  .fc-item { flex-direction: row; align-items: center; gap: 12px; }
  .fc-term { width: 230px; }
  .fc-op.mix-op { flex-direction: column; margin: 0; }
}
/* Fraction tools box: hidden in embeds like the rest of the page content */
.fc-tools { margin-top: 32px; }
.is-embed .fc-tools { display: none; }

/* Article content -------------------------------------------------------- */

.article {
  max-width: 760px;
  min-width: 0;
  margin: 56px auto 0;
  overflow-wrap: break-word;
}
.article h2 { margin-top: 2em; }
.article h2:first-child { margin-top: 0; }
.article ul,
.article ol { padding-left: 1.3em; margin: 0 0 1em; }
.article li { margin-bottom: 0.4em; }
/* Card grids are lists too — undo the article list indent */
/* Homepage categories: the generator sets cols-N so every row is full on
   desktop (2, 3 or 4 columns, 9 cards as 3 × 3); on tablets a lone last card
   spans both columns */
@media (min-width: 560px) and (max-width: 999px) {
  .category .card-grid[class*="cols-"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .category .card-grid[class*="cols-"] > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .category .card-grid.cols-1 { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1000px) {
  .category .card-grid.cols-1 { grid-template-columns: minmax(0, 1fr); }
  .category .card-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .category .card-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .category .card-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.article .card-grid { padding-left: 0; margin: 0; }
.article .card-grid > li { margin: 0; }

.formula {
  margin: 0 0 1em;
  padding: 18px 20px;
  font-family: var(--mono);
  font-size: clamp(1rem, 2.4vw, 1.2rem);
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow-x: auto;
}

.callout {
  padding: 16px 20px;
  margin: 0 0 1em;
  background: var(--surface);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.callout p:last-child { margin-bottom: 0; }

.compare {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.compare th,
.compare td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: right; white-space: nowrap; }
.compare th:first-child,
.compare td:first-child { text-align: left; }
.compare thead th { background: var(--surface); }

.faq details {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  margin-bottom: 10px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.faq details:hover { border-color: var(--border-strong); }
.faq details[open] { box-shadow: var(--shadow-sm); }
.faq summary {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  border-radius: 12px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: 0 0 auto;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--accent);
  transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 18px 16px; color: var(--muted); }
.faq details > div p:last-child { margin-bottom: 0; }

.related { margin-top: 2em; }

.disclaimer { font-size: 0.88rem; color: var(--muted); margin-top: 2em; }

/* Embed widget ----------------------------------------------------------- */

.embed-box {
  margin-top: 2.5em;
  padding: clamp(18px, 3vw, 24px);
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
}
.embed-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.embed-head .card-icon { flex: 0 0 auto; }
.article .embed-head h2 { margin: 0 0 4px; font-size: 1.15rem; }
.embed-head p { margin: 0; color: var(--muted); font-size: 0.92rem; }
.embed-code {
  display: block;
  width: 100%;
  min-height: 132px;
  padding: 12px 14px;
  font-family: var(--mono);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  resize: vertical;
}
.embed-actions,
.copy-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; }
.copy-status { font-size: 0.9rem; font-weight: 600; color: var(--success); }

.embed-credit { display: none; }

/* Embedded mode (?embed=1): only the calculator and its results */
.is-embed .skip-link,
.is-embed .site-header,
.is-embed .site-footer,
.is-embed .article,
.is-embed .breadcrumb,
.is-embed .page-head .lead { display: none !important; }
.is-embed body { min-height: 0; }
.is-embed .page-head { padding: 16px 0 14px; }
.is-embed .page-head h1 { margin: 0; font-size: 1.4rem; }
.is-embed .calc-panel { top: 16px; }
.is-embed .embed-credit {
  display: block;
  margin: 16px 0;
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted);
}

/* Simple text pages ------------------------------------------------------ */

.prose { max-width: 760px; }
.prose h2 { margin-top: 1.6em; }

.contact-card {
  display: inline-flex;
  max-width: 100%;
  overflow-wrap: anywhere;
  flex-direction: column;
  gap: 4px;
  margin: 8px 0 24px;
  padding: 20px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.contact-card span { color: var(--muted); font-size: 0.9rem; }
.contact-card a { font-size: 1.2rem; font-weight: 600; }

/* Large screens / TVs ---------------------------------------------------- */

@media (min-width: 1800px) {
  html { font-size: 18px; }
  :root { --container: 1400px; }
}
@media (min-width: 2560px) {
  html { font-size: 22px; }
  :root { --container: 1680px; }
}

/* ==========================================================================
   E3 components. Two weights of outline:
   - BOLD (2.5px ink + offset shadow) only on key elements: the Quick and
     Scientific calculators, the search box, primary buttons, the theme,
     menu and history buttons, the Popular cards, each calculator's input
     card and its main result box.
   - LIGHT (1.5px ink, no shadow) on everything else.
   Lime always carries ink text. Colours come from the tokens at the top.
   ========================================================================== */

/* Header, navigation and footer ----------------------------------------- */

.site-header {
  background: var(--header-bg);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: var(--bw-light) solid var(--ink);
}
.logo { letter-spacing: -0.04em; }
.logo span { color: var(--text); }
.logo-mark {
  border: 2px solid var(--ink);
  border-radius: 10px;
  box-shadow: 2px 2px 0 var(--shadow-ink);
}
.logo-mark rect { fill: var(--lime); }
.logo-mark path { stroke: var(--on-lime); }

/* Small icon buttons (remove a row, calendar, close): light */
.icon-btn {
  background: var(--card);
  border: var(--bw-light) solid var(--ink);
  transition: background 0.15s ease;
}
.icon-btn:hover { background: var(--surface); border-color: var(--ink); }

/* Theme, menu and history buttons: bold stickers that lift and press */
.theme-toggle,
.nav-toggle,
.mini-history-open {
  color: var(--text);
  background: var(--card);
  border: var(--bw) solid var(--ink);
  box-shadow: var(--shadow-sm);
  transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.15s ease;
}
.theme-toggle:hover,
.nav-toggle:hover,
.mini-history-open:hover {
  color: var(--text);
  background: var(--surface);
  border-color: var(--ink);
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--shadow-ink);
}
.theme-toggle:active,
.nav-toggle:active,
.mini-history-open:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--shadow-ink); }
.mini-history-open[aria-expanded="true"] { color: var(--on-lime); background: var(--lime); border-color: var(--ink); }

.site-nav ul { gap: 8px; }
.site-nav a {
  padding: 6px 15px;
  font-weight: 600;
  background: var(--card);
  border: var(--bw-light) solid var(--ink);
  border-radius: 999px;
}
.site-nav a:hover { background: var(--surface); }
.nav-dot { display: none; }

.theme-list {
  border: var(--bw-light) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.theme-list button { font-weight: 600; }
.theme-list button[aria-pressed="true"],
.theme-seg button[aria-pressed="true"] { color: var(--on-lime); background: var(--lime); box-shadow: inset 0 0 0 var(--bw-light) var(--ink); }
.theme-list button[aria-pressed="true"] .icon { color: var(--on-lime); }
.theme-seg { background: var(--card); border: var(--bw-light) solid var(--ink); border-radius: var(--radius-sm); }

@media (max-width: 767px) {
  .site-nav { border-bottom: var(--bw-light) solid var(--ink); box-shadow: none; }
  .site-nav ul { gap: 10px; padding-top: 14px; }
}

.skip-link { color: var(--on-lime); background: var(--lime); border: 2px solid var(--ink); }

.site-footer { background: var(--surface); border-top: var(--bw-light) solid var(--ink); }
.footer-links a { color: var(--text); font-weight: 600; }
.footer-links a:hover { color: var(--text); text-decoration-thickness: 2px; }

/* Hero, search and homepage --------------------------------------------- */

.hero { border-bottom: var(--bw-light) solid var(--ink); }
.search > .icon { color: var(--text); }
.search input {
  background: var(--card);
  border: var(--bw) solid var(--ink);
  box-shadow: var(--shadow);
}
.search input:focus { border-color: var(--ink); box-shadow: var(--shadow); }
.search input:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.search-panel {
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.search-option.is-active { background: var(--surface); box-shadow: inset 0 0 0 var(--bw-light) var(--ink); }
.search-hint { border-top: var(--bw-light) solid var(--ink); }
.search-hint kbd,
.mini-title kbd,
.sci-shortcuts kbd,
.article kbd { border: 1px solid var(--ink); }

.hero-meta li {
  color: var(--text);
  font-weight: 600;
  background: var(--card);
  border: var(--bw-light) solid var(--ink);
}
.hero-meta .icon { color: var(--text); }

.section-icon,
.card-icon {
  color: var(--text);
  background: var(--card);
  border: var(--bw-light) solid var(--ink);
}
.section-icon { border-radius: var(--radius-sm); }
.card-icon { border-radius: var(--radius-sm); }

/* Popular cards: bold */
.feature-card {
  background: var(--card);
  border: var(--bw) solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: 5px 5px 0 var(--shadow-ink);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.feature-card:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--shadow-ink); border-color: var(--ink); }
.feature-card:focus-visible { border-radius: var(--radius-lg); }
.feature-card .card-cta,
a.calc-card .card-cta { color: var(--text); font-weight: 800; }
.feature-tags li { color: var(--text); background: var(--card); border: var(--bw-light) solid var(--ink); }

/* Category and related calculator cards: light, a small shadow on hover */
.calc-card {
  background: var(--card);
  border: var(--bw-light) solid var(--ink);
  border-radius: var(--radius);
}
a.calc-card { box-shadow: none; transition: transform 0.15s ease, box-shadow 0.15s ease; }
a.calc-card:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-sm); border-color: var(--ink); }
a.calc-card:focus-visible { border-radius: var(--radius); }

/* Quick calculator and Scientific calculator ---------------------------- */

.mini-calc,
.sci-calc {
  border: var(--bw) solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.mini-calc:focus-visible { border-radius: var(--radius-lg); }
.mini-title { color: var(--text); font-weight: 800; }
.mini-display { background: var(--surface); border: var(--bw-light) solid var(--ink); border-radius: var(--radius-sm); }
.mini-main { font-weight: 800; }
.mini-keys button,
.sci-fn button {
  font-weight: 600;
  background: var(--card);
  border: var(--bw-light) solid var(--ink);
  box-shadow: 2px 2px 0 var(--shadow-ink);
  transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.12s ease;
}
.mini-keys button { border-radius: 12px; }
.sci-fn button { border-radius: 10px; }
.mini-keys button:hover,
.sci-fn button:hover { background: var(--surface); }
.mini-keys button:active,
.mini-keys button.is-pressed,
.sci-fn button:active,
.sci-fn button.is-pressed { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--shadow-ink); }
.mini-keys .key-fn { color: var(--text); background: var(--surface); }
.mini-keys .key-fn:hover { background: var(--surface-2); }
.mini-keys .key-op,
.mini-keys .key-op:hover { color: var(--text); background: var(--card); filter: none; }
.mini-keys .key-op:hover { background: var(--surface); }
.mini-keys .key-eq { font-weight: 800; color: var(--on-lime); background: var(--lime); }
.mini-keys .key-eq:hover { background: var(--lime-strong); }
.sci-fn .is-toggle { color: var(--text); background: var(--card); }
.sci-fn .is-toggle[aria-pressed="true"] { color: var(--on-lime); background: var(--lime); }
.sci-flag { color: var(--text); background: var(--card); border: 1px solid var(--ink); }

.mini-sci-link { color: var(--text); background: var(--card); border: var(--bw-light) solid var(--ink); }
.mini-sci-link:hover { color: var(--text); background: var(--surface); }
.mini-history-back { color: var(--text); border: var(--bw-light) solid var(--ink); }
.mini-history-badge { color: var(--on-lime); background: var(--lime); border: var(--bw-light) solid var(--ink); }
.mini-history-count { color: var(--on-lime); background: var(--lime); border: 1px solid var(--ink); }
@media (min-width: 1024px) {
  .mini-history-inner { border-left: var(--bw-light) solid var(--ink); }
}

/* Calculator panels: the input card is bold, the results card is light.
   Every results card is a live region (aria-live); input cards are not. */

.panel {
  border: var(--bw) solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.panel[aria-live] { border-width: var(--bw-light); box-shadow: none; }

/* Fields --------------------------------------------------------------- */

.field input:not([type="range"]),
.field select,
.time-input select,
.field textarea.avg-textarea,
.embed-code {
  background-color: var(--card);
  border: var(--bw-light) solid var(--ink);
  border-radius: var(--radius-sm);
}
.field input:not([type="range"]):hover,
.field select:hover,
.time-input select:hover,
.field textarea.avg-textarea:hover { border-color: var(--ink); }
.field input:not([type="range"]):focus,
.field select:focus,
.time-input select:focus,
.field textarea.avg-textarea:focus { border-color: var(--ink); box-shadow: none; outline: 3px solid var(--focus); outline-offset: 2px; }
.field input[aria-invalid="true"],
.field input[aria-invalid="true"]:hover,
.date-parts select[aria-invalid="true"],
.date-parts select[aria-invalid="true"]:hover { border-color: var(--error); box-shadow: inset 0 0 0 1px var(--error); }
.field input[aria-invalid="true"]:focus { box-shadow: inset 0 0 0 1px var(--error); }
/* Dropdown arrows in ink (light text colour in the dark theme, below) */
.field select,
.time-input select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111111' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.field.show-native .date-parts input.date-native { border: var(--bw-light) solid var(--ink); }

/* Sliders: ink-outlined track filled in purple, lime thumb */
.range::-webkit-slider-runnable-track {
  height: 10px;
  background: linear-gradient(to right, var(--accent) var(--fill), var(--card) var(--fill));
  border: var(--bw-light) solid var(--ink);
}
.range::-webkit-slider-thumb {
  width: 24px;
  height: 24px;
  margin-top: -8px;
  background: var(--lime);
  border: 2px solid var(--ink);
  box-shadow: none;
}
.range::-moz-range-track { height: 8px; background: var(--card); border: var(--bw-light) solid var(--ink); }
.range::-moz-range-progress { height: 8px; background: var(--accent); }
.range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: var(--lime);
  border: 2px solid var(--ink);
  box-shadow: none;
}

/* Buttons: primary bold lime, everything else light */
.btn {
  font-weight: 800;
  border: var(--bw-light) solid var(--ink);
  border-radius: var(--radius-sm);
  box-shadow: none;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.15s ease;
}
.btn:active { transform: none; }
.btn-primary {
  color: var(--on-lime);
  background: var(--lime);
  border-width: var(--bw);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--lime-strong); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--shadow-ink); }
.btn-primary:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--shadow-ink); }
.btn-secondary { color: var(--text); background: var(--card); border-color: var(--ink); }
.btn-secondary:hover { color: var(--text); background: var(--surface); border-color: var(--ink); }
.link-btn { font-weight: 600; }

/* Small remove buttons inside chips stay flat */
.chip-list .chip-remove,
.chip-list .chip-remove:hover { color: var(--text); background: transparent; border-color: transparent; }
.chip-list .chip-remove:hover { background: var(--surface); }

/* Toggles and tabs: the chosen option turns lime */
.segmented { background: var(--card); border: var(--bw-light) solid var(--ink); }
.segmented input:checked + label { color: var(--on-lime); background: var(--lime); box-shadow: inset 0 0 0 var(--bw-light) var(--ink); }
.tabs {
  background: var(--card);
  border: var(--bw-light) solid var(--ink);
  border-radius: var(--radius);
}
.tab { border-radius: 12px; }
.tab:hover { color: var(--text); background: var(--surface); }
.tab[aria-selected="true"] { color: var(--on-lime); background: var(--lime); box-shadow: inset 0 0 0 var(--bw-light) var(--ink); }
.tab[aria-selected="true"] .icon { color: var(--on-lime); }
.mix-op label { background: var(--card); border: var(--bw-light) solid var(--ink); }
.mix-op label:hover { border-color: var(--ink); background: var(--surface); }
.mix-op input:checked + label { color: var(--on-lime); background: var(--lime); border-color: var(--ink); }
.check-field input { accent-color: var(--accent); }

/* Results: the main result box is bold lime; small stat boxes are light -- */

.stat {
  background: var(--card);
  border: var(--bw-light) solid var(--ink);
  border-radius: var(--radius);
}
.stat-value { font-weight: 800; }
.stat-primary,
.frac-answer,
.date-answer {
  color: var(--on-lime);
  background: var(--lime);
  border: var(--bw) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
/* A highlighted stat sharing a row, and each percentage answer: light lime */
.stat-accent,
.stat-accent:has(.frac-inline),
.pct-result {
  color: var(--on-lime);
  background: var(--lime);
  border: var(--bw-light) solid var(--ink);
  border-radius: var(--radius);
}
.stat-primary .stat-label,
.stat-primary .stat-sub,
.stat-accent .stat-label,
.stat-accent .stat-sub,
.pct-explain,
.frac-dash,
.frac-status,
.date-iso { color: var(--on-lime-muted); }
.stat-primary .stat-value,
.stat-primary .stat-value.is-up,
.stat-primary .stat-value.is-down,
.stat-accent .stat-value,
.stat-accent .stat-value.frac-inline,
.pct-answer,
.frac-display,
.date-big { font-weight: 800; color: var(--on-lime); }
.pct-answer.is-up { color: var(--result-up); }
.pct-answer.is-down { color: var(--result-down); }
.pct-explain.is-warning,
.frac-status.is-warning { color: var(--result-warn); }
.frac-status.is-success { color: var(--on-lime); }

.results-empty svg { color: var(--muted); }
.swatch { border: 1px solid var(--ink); }
.swatch-seo-cost { background: var(--chart-text); }
.swatch-seo-return { background: var(--chart-interest); }

.table-wrap { border: var(--bw-light) solid var(--ink); border-radius: var(--radius-sm); }
.data-table thead th,
.compare thead th { background: var(--surface); border-bottom: var(--bw-light) solid var(--ink); }

/* Inner tiles: rows, terms and boxes inside a panel */
.fc-term,
.frac-equiv li,
.frac-euclid,
.tax-breakdown,
.more-stats,
.formula { background: var(--surface); border: var(--bw-light) solid var(--ink); border-radius: var(--radius-sm); }
.frac-equiv li { color: var(--text); }
.frac-vis-bar { background: var(--ink); }
.frac-vis-bar > span { background: var(--card); }
.frac-vis-bar > span.is-on { background: var(--accent); }
@media (max-width: 599px) {
  .grade-row { border-width: var(--bw-light); border-color: var(--ink); border-radius: var(--radius-sm); }
}
@media (max-width: 767px) {
  .grade-rows.is-gpa .grade-row { border: var(--bw-light) solid var(--ink); border-radius: var(--radius-sm); }
}
@media (max-width: 899px) {
  .ts-row { border: var(--bw-light) solid var(--ink); border-radius: var(--radius-sm); }
}
.chip-list li { color: var(--text); background: var(--card); border: var(--bw-light) solid var(--ink); }

/* Article content ------------------------------------------------------- */

.callout {
  background: var(--surface);
  border: var(--bw-light) solid var(--ink);
  border-radius: var(--radius-sm);
}
.faq details { border: var(--bw-light) solid var(--ink); border-radius: var(--radius); }
.faq details:hover { border-color: var(--ink); }
.faq details[open] { box-shadow: none; }
.faq summary { border-radius: var(--radius); }
.faq summary::after { font-weight: 800; color: var(--text); }
.embed-box { border: var(--bw-light) dashed var(--ink); border-radius: var(--radius-lg); }
.contact-card { background: var(--card); border: var(--bw-light) solid var(--ink); border-radius: var(--radius); }

/* Saved data: favourites star, "Your favourites", history and clear messages */

/* H1 with the "Save to favourites" star beside it */
.page-title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 0.6em; }
.page-title h1 { margin: 0; }
.fav-toggle { flex: 0 0 auto; }
.fav-toggle[hidden],
.is-embed .fav-toggle { display: none; }
.fav-toggle[aria-pressed="true"],
.fav-toggle[aria-pressed="true"]:hover { color: var(--on-lime); background: var(--lime); }
.fav-toggle[aria-pressed="true"] .icon { fill: currentColor; }

.favourites { padding-top: 48px; }
.favourites[hidden],
.favourites.is-searching { display: none; }
.favourites .fav-clear { margin-left: auto; }
.fav-grid > li { position: relative; }
.fav-remove { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; }
.fav-remove .icon { width: 18px; height: 18px; }

/* "History cleared" appears where the (now hidden) Clear history button was */
.mini-history-foot { display: grid; align-items: center; }
.mini-history-clear,
.mini-history-status { grid-area: 1 / 1; justify-self: start; }
.mini-history-status { margin-left: 8px; font-size: 0.9rem; font-weight: 600; color: var(--success); }
.mini-history-status:empty { display: none; }
.saved-data-actions .copy-status { color: var(--success); }

/* Phones: the category lists become compact rows (icon, name, arrow) so the
   homepage is shorter. Popular and Your favourites keep their full cards. */
@media (max-width: 640px) {
  .category .card-grid,
  .category .card-grid[class*="cols-"] { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .category .calc-card {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 8px 16px 8px 10px;
    border-radius: var(--radius-sm);
  }
  .category .calc-card .card-top { flex: 0 0 auto; }
  .category .calc-card .card-icon { width: 36px; height: 36px; border-radius: 10px; }
  .category .calc-card .card-icon .icon { width: 20px; height: 20px; }
  .category .calc-card h3 { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 1rem; }
  .category .calc-card p { display: none; }
  /* "Open calculator" stays in the link text for screen readers; the row shows just → */
  .category a.calc-card .card-cta { flex: 0 0 auto; margin: 0; padding: 0; font-size: 0; }
  .category a.calc-card .card-cta::after { content: "→"; content: "→" / ""; font-size: 1.25rem; line-height: 1; }
}

/* 404 page (built into the production copy): search box and a way home */
.not-found-search { margin: 28px 0 0; }
.not-found-home { margin: 40px 0 0; }

/* Focus: one thick purple ring on every interactive element */
a.calc-card:focus-visible,
.feature-card:focus-visible,
.range:focus-visible,
.segmented input:focus-visible + label,
.mix-op input:focus-visible + label,
.more-stats > summary:focus-visible,
.mini-history-open:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* Dark theme: dropdown arrows in the light text colour */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .field select,
  :root:not([data-theme="light"]) .time-input select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23f4f4ee' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}
:root[data-theme="dark"] .field select,
:root[data-theme="dark"] .time-input select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23f4f4ee' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Print (e.g. the weekly timesheet's Print button) ------------------------ */

@media print {
  /* Always print in light colours, even when the screen uses the dark theme
     (same specificity as the dark-theme rules, and later, so these win) */
  :root:not([data-theme="print-only"]),
  :root[data-theme="dark"] {
    --bg: #fff;
    --surface: #fff;
    --surface-2: #f2f2f2;
    --card: #fff;
    --text: #000;
    --muted: #444;
    --border: #bbb;
    --border-strong: #999;
    --accent: #0f766e;
    --accent-text: #fff;
    --error: #b71c1c;
    --success: #1b5e20;
    --cat: #000;
    --cat-soft: #fff;
    --ink: #999;
    --shadow-ink: transparent;
    --lime: #fff;
    --on-lime: #000;
    --on-lime-muted: #444;
    --result-up: #1b5e20;
    --result-down: #b71c1c;
    --result-warn: #b71c1c;
    color-scheme: light;
  }
  body { background: #fff; color: #000; font-size: 11pt; }
  .skip-link,
  .site-header,
  .site-footer,
  .article,
  .breadcrumb,
  .page-head .lead,
  .tabs,
  .time-format,
  .embed-credit,
  .btn,
  .link-btn,
  .row-remove,
  .icon-btn,
  .ts-options-title,
  .ts-options,
  .ts-options + .note { display: none !important; }
  .page-head { padding: 0 0 8px; }
  .page-head h1 { font-size: 18pt; }
  .panel,
  .stat,
  .table-wrap { box-shadow: none !important; background: #fff !important; border: 1px solid #bbb !important; }
  .panel { break-inside: avoid; padding: 10pt; }
  .stat-value { color: #000 !important; }
  .table-wrap { max-height: none; overflow: visible; }
  .data-table thead th { position: static; }
  .time-input select { border: 0; background-image: none; padding: 0 2px; height: auto; min-width: 0; }
  .ts-row { break-inside: avoid; }
  @page { margin: 14mm; }
}

/* Motion ----------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after { transition: none !important; animation: none !important; }
  /* No lifting or pressing: the sticker shadows stay put */
  a.calc-card:hover,
  .feature-card:hover,
  .btn-primary:hover,
  .btn-primary:active,
  .theme-toggle:hover,
  .theme-toggle:active,
  .nav-toggle:hover,
  .nav-toggle:active,
  .mini-history-open:hover,
  .mini-history-open:active,
  .mini-keys button:hover,
  .mini-keys button:active,
  .mini-keys button.is-pressed,
  .sci-fn button:hover,
  .sci-fn button:active,
  .sci-fn button.is-pressed { transform: none; }
}