/* Local font faces — Google Fonts vendored under static/calcorama/fonts/. */
@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("../fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("../fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../fonts/inter-700.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../fonts/fraunces-400.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("../fonts/fraunces-500.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("../fonts/fraunces-600.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../fonts/jetbrains-mono-400.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("../fonts/jetbrains-mono-500.woff2") format("woff2"); }

/* Calcorama — Django-style multi-page, Bootstrap 5 + custom design system */

:root {
  --cc-primary: #1f4d3f;
  --cc-primary-2: #266c56;
  --cc-accent: #c2410c;
  --cc-bg: #faf8f3;
  --cc-bg-alt: #f3efe6;
  --cc-surface: #ffffff;
  --cc-text: #1a1d1c;
  --cc-text-muted: #5b605d;
  --cc-line: rgba(26, 29, 28, 0.09);
  --cc-line-strong: rgba(26, 29, 28, 0.18);
  --cc-radius: 14px;
  --cc-radius-lg: 22px;
  --cc-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 8px 24px -12px rgba(20,30,25,0.10);
  --cc-shadow-lg: 0 1px 0 rgba(0,0,0,0.04), 0 24px 60px -24px rgba(20,30,25,0.20);

  --cc-font: "Inter", system-ui, -apple-system, sans-serif;
  --cc-font-display: "Fraunces", Georgia, serif;
  --cc-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --bs-body-font-family: var(--cc-font);
  --bs-body-bg: var(--cc-bg);
  --bs-body-color: var(--cc-text);
  --bs-border-radius: var(--cc-radius);
}

.cc-cat-card,
.cc-trend-card,
.cc-search-row,
.cc-recent-card,
.cc-calc-header-art,
.cc-atlas-art,
.cc-mobile-menu-item {
  --cc-glyph-soft:  oklch(0.92 0.04 var(--hue));
  --cc-glyph-vivid: oklch(0.74 0.13 var(--hue));
}

[data-theme="dark"] {
  --cc-bg: #0f1311;
  --cc-bg-alt: #161b18;
  --cc-surface: #1a201d;
  --cc-text: #ecefe9;
  --cc-text-muted: #a4ada6;
  --cc-line: rgba(255,255,255,0.10);
  --cc-line-strong: rgba(255,255,255,0.22);
  --cc-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 12px 30px -16px rgba(0,0,0,0.6);
}

* { box-sizing: border-box; }
html, body { background: var(--cc-bg); color: var(--cc-text); }
body { font-family: var(--cc-font); -webkit-font-smoothing: antialiased; }

/* Typography */
.cc-h1 { font-family: var(--cc-font-display); font-weight: 500; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.05; letter-spacing: -0.02em; margin: 0; }
.cc-h2 { font-family: var(--cc-font-display); font-weight: 500; font-size: 1.6rem; letter-spacing: -0.01em; margin: 0; }
.cc-lead { font-size: 1.05rem; color: var(--cc-text-muted); line-height: 1.55; max-width: 60ch; margin-top: 1rem; }
.cc-eyebrow { font-family: var(--cc-font-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cc-text-muted); }
.text-accent { color: var(--cc-accent) !important; }
.cc-link { color: var(--cc-primary); font-weight: 500; text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; }
.cc-link:hover { text-decoration: underline; }

/* Forms */
.form-control, .form-select { background-color: var(--cc-surface); color: var(--cc-text); border-color: var(--cc-line); }
.form-control:focus, .form-select:focus { border-color: var(--cc-primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--cc-primary) 18%, transparent); }
.input-group-text { background: var(--cc-bg-alt); border-color: var(--cc-line); color: var(--cc-text-muted); }
.btn-dark { background: var(--cc-text); border-color: var(--cc-text); color: var(--cc-bg); }
.btn-dark:hover { background: var(--cc-text); opacity: 0.9; color: var(--cc-bg); }
.btn-outline-dark { color: var(--cc-text); border-color: var(--cc-line-strong); }
.btn-outline-dark:hover { background: var(--cc-text); color: var(--cc-bg); }
.form-range::-webkit-slider-thumb { background: var(--cc-primary); }
.form-range::-moz-range-thumb { background: var(--cc-primary); }
[data-theme="dark"] .form-range::-webkit-slider-thumb { background: var(--cc-accent); }
[data-theme="dark"] .form-range::-moz-range-thumb { background: var(--cc-accent); }
[data-theme="dark"] .form-range::-webkit-slider-runnable-track { background-color: var(--cc-line-strong); }
[data-theme="dark"] .form-range::-moz-range-track { background-color: var(--cc-line-strong); }
[data-theme="dark"] .form-check-input:not(:checked) { background-color: var(--cc-bg-alt); border-color: var(--cc-line-strong); }
.form-switch .form-check-input:not(:checked) { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e"); }
[data-theme="dark"] .form-switch .form-check-input:not(:checked) { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.55%29'/%3e%3c/svg%3e"); }
.form-check-input:checked { background-color: var(--cc-primary); border-color: var(--cc-primary); }
.form-check-input:focus { border-color: var(--cc-primary); box-shadow: 0 0 0 0.2rem color-mix(in oklab, var(--cc-primary) 25%, transparent); }
[data-theme="dark"] .form-check-input:checked { background-color: var(--cc-accent); border-color: var(--cc-accent); }
[data-theme="dark"] .form-check-input:focus { border-color: var(--cc-accent); box-shadow: 0 0 0 0.2rem color-mix(in oklab, var(--cc-accent) 25%, transparent); }
.form-label { font-family: var(--cc-font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--cc-text-muted); margin-bottom: 0.4rem; }
.cc-slider-num { display: inline-block; width: 5em; padding: 0.1rem 0.35rem; margin: 0 0.25rem; font-family: var(--cc-font-mono); font-size: 0.85rem; font-weight: 600; text-transform: none; letter-spacing: normal; color: var(--cc-text); background: var(--cc-bg); border: 1px solid var(--cc-line); border-radius: 0.25rem; vertical-align: middle; }
.cc-slider-num:focus { outline: none; border-color: var(--cc-primary); box-shadow: 0 0 0 2px rgba(0,0,0,0.04); }
/* Calculator page layout — used by both calc detail pages and embed widgets. */

.cc-calc-page { background: var(--cc-bg, #fff); }

/* Breadcrumb */
.cc-breadcrumb { display: flex; gap: .5rem; align-items: center;
  font-family: var(--cc-font-mono); font-size: .78rem;
  color: var(--cc-text-muted); margin-bottom: 1rem; }
.cc-breadcrumb a { color: var(--cc-text-muted); text-decoration: none; }
.cc-breadcrumb a:hover { color: var(--cc-primary); text-decoration: underline; }
.cc-breadcrumb .active { color: var(--cc-text); font-weight: 500; }
.cc-breadcrumb span { color: var(--cc-line, #d1d5db); }

/* Calc header (glyph + title + tagline) */
.cc-calc-header { display: flex; gap: 1.4rem; align-items: flex-start;
  padding: 1.5rem 0 2rem; border-bottom: 1px solid var(--cc-line);
  margin: 1.5rem 0 2rem; }
.cc-calc-header-art { width: 96px; height: 96px; border-radius: var(--cc-radius);
  display: flex; align-items: center; justify-content: center;
  background: oklch(0.96 0.04 var(--hue)); flex-shrink: 0; flex: 0 0 auto; }
.cc-calc-cat { font-family: var(--cc-font-mono); font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--cc-text-muted); margin-bottom: 0.4rem; }

/* Panels (inputs / results / explanation) */
.cc-panel { background: var(--cc-surface); border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius-lg); box-shadow: var(--cc-shadow);
  margin-bottom: 1.5rem; overflow: hidden; }
.cc-panel-head { display: flex; align-items: center; gap: 0.8rem;
  padding: 1rem 1.5rem; border-bottom: 1px solid var(--cc-line); background: var(--cc-surface); }
.cc-panel-step { font-family: var(--cc-font-mono); font-size: 0.75rem;
  padding: 0.2rem 0.5rem; background: var(--cc-bg-alt);
  border-radius: 4px; color: var(--cc-text-muted); }
.cc-panel-title { font-family: var(--cc-font-display); font-size: 1.1rem;
  font-weight: 500; }
.cc-panel-body { padding: 1.5rem; background: var(--cc-surface); }
.cc-results { background: var(--cc-bg-alt); }

/* Prose (description / article body / formulas) */
.cc-prose { font-size: 1rem; line-height: 1.65; color: var(--cc-text-muted); max-width: 70ch; }
.cc-prose strong { color: var(--cc-text); }
.cc-prose h2 { font-family: var(--cc-font-display); font-size: 1.5rem; font-weight: 500; color: var(--cc-text); margin-top: 1.5rem; }
.cc-prose h3 { font-family: var(--cc-font-display); font-size: 1.2rem; font-weight: 500; color: var(--cc-text); margin-top: 1rem; }
.cc-prose h5 { font-family: var(--cc-font-display); font-weight: 500; color: var(--cc-text); margin-top: 1.2rem; }
.cc-prose p { line-height: 1.7; }
.cc-prose ul, .cc-prose ol { line-height: 1.7; padding-left: 1.5rem; }
.cc-prose blockquote { border-left: 3px solid var(--cc-line-strong, #9ca3af);
  padding: .25rem 0 .25rem 1rem; color: var(--cc-text-muted);
  font-family: var(--cc-font-display); font-size: 1.05rem; }
.cc-prose .formula { background: var(--cc-bg-alt); padding: .75rem 1rem;
  border-radius: .5rem; font-family: var(--cc-font-mono); font-size: 1rem; }
.formula { font-family: var(--cc-font-mono); background: var(--cc-bg-alt);
  padding: 0.85rem 1rem; border-radius: 8px; border-left: 3px solid var(--cc-primary);
  color: var(--cc-text); margin: 0.8rem 0; white-space: pre-wrap; font-size: 0.95rem; }

/* KPIs / charts (results panel components) */
.kpi { padding: 1.2rem; background: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: var(--cc-radius); }
.kpi-large { padding: 1.6rem; }
.kpi-highlight { background: color-mix(in oklab, var(--cc-primary) 8%, var(--cc-surface)); border-color: var(--cc-primary); }
.kpi-label { font-family: var(--cc-font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--cc-text-muted); }
.kpi-value { font-family: var(--cc-font-display); font-size: 1.7rem; font-weight: 500; color: var(--cc-text); margin-top: 0.3rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi-sub { font-size: 0.82rem; color: var(--cc-text-muted); margin-top: 0.3rem; }
.mini-stat { padding: 0.85rem; background: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: 10px; }
.mini-label { font-size: 0.72rem; color: var(--cc-text-muted); font-family: var(--cc-font-mono); text-transform: uppercase; letter-spacing: 0.06em; }
.mini-val { font-family: var(--cc-font-display); font-weight: 500; font-size: 1.05rem; margin-top: 0.2rem; font-variant-numeric: tabular-nums; }
.chart-wrap { padding: 1.2rem; background: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: var(--cc-radius); }
.chart-title { font-family: var(--cc-font-mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--cc-text-muted); margin-bottom: 0.8rem; }
.chart-axis { font-family: var(--cc-font-mono); font-size: 10px; fill: var(--cc-text-muted); }
.legend-dot { display: inline-block; width: 12px; height: 4px; border-radius: 2px; margin-right: 4px; vertical-align: middle; }

/* Linear segmented gauge — BMI-style. .cc-gauge is the generic alias. */
.bmi-gauge, .cc-gauge { position: relative; display: flex; height: 56px; border-radius: 10px; overflow: hidden; border: 1px solid var(--cc-line); }
.bmi-seg, .cc-gauge-seg { display: flex; flex-direction: column; align-items: center; justify-content: center; color: rgba(0,0,0,0.78); position: relative; padding: 0 0.3rem; min-width: 0; }
.bmi-seg span, .cc-gauge-seg span { font-size: 0.78rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bmi-seg .bmi-bound, .cc-gauge-seg .cc-gauge-bound { font-family: var(--cc-font-mono); font-size: 0.65rem; opacity: 0.7; position: absolute; bottom: 4px; right: 4px; }
.bmi-marker, .cc-gauge-marker { position: absolute; top: -8px; bottom: -8px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; pointer-events: none; transition: left 0.25s ease; }
.bmi-marker-dot, .cc-gauge-marker-dot { width: 14px; height: 14px; background: var(--cc-text); border: 3px solid var(--cc-surface); border-radius: 50%; box-shadow: var(--cc-shadow); }
.bmi-marker-label, .cc-gauge-marker-label { font-family: var(--cc-font-mono); font-size: 0.75rem; font-weight: 600; background: var(--cc-text); color: var(--cc-bg); padding: 0.1rem 0.4rem; border-radius: 4px; margin-top: 4px; white-space: nowrap; }

/* Donut chart (SVG-driven) with side legend */
.cc-donut-wrap { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.cc-donut-svg { width: 150px; height: 150px; flex-shrink: 0; }
.cc-donut-center-label { font-family: var(--cc-font-mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.08em; fill: var(--cc-text-muted); }
.cc-donut-center-val { font-family: var(--cc-font-display); font-size: 1.3rem; font-weight: 600; fill: var(--cc-text); }
.cc-donut-legend { flex: 1 1 160px; display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; }
.cc-donut-legend-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.92rem; }
.cc-donut-legend-row .cc-donut-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.cc-donut-legend-row .cc-donut-pct { font-family: var(--cc-font-mono); font-size: 0.85rem; color: var(--cc-text-muted); }

/* Timeline / progress bar with markers */
.cc-timeline { position: relative; height: 10px; background: var(--cc-bg-alt); border-radius: 999px; margin: 1.5rem 0 2.4rem; border: 1px solid var(--cc-line); }
.cc-timeline-fill { position: absolute; top: 0; bottom: 0; left: 0; background: var(--cc-primary); border-radius: 999px; transition: width 0.35s ease; }
.cc-timeline-tick { position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--cc-line-strong); transform: translateX(-50%); }
.cc-timeline-tick::after { content: attr(data-label); position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%); font-family: var(--cc-font-mono); font-size: 0.65rem; color: var(--cc-text-muted); white-space: nowrap; }
.cc-timeline-now { position: absolute; top: -7px; bottom: -7px; width: 4px; background: var(--cc-text); transform: translateX(-50%); border-radius: 4px; box-shadow: 0 0 0 4px color-mix(in oklab, var(--cc-primary) 22%, transparent); transition: left 0.35s ease; }
.cc-timeline-now::after { content: attr(data-label); position: absolute; top: 18px; left: 50%; transform: translateX(-50%); font-family: var(--cc-font-mono); font-size: 0.7rem; font-weight: 600; color: var(--cc-text); background: var(--cc-surface); padding: 0.12rem 0.45rem; border-radius: 4px; border: 1px solid var(--cc-line); white-space: nowrap; }
.cc-timeline-band { position: absolute; top: 0; bottom: 0; background: color-mix(in oklab, var(--cc-accent) 40%, transparent); border-radius: 0; }

/* Compact swatch for legends */
.cc-swatch { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; display: inline-block; }

/* Number line — single horizontal line with marker (temperature, percentage etc.) */
.cc-numline { position: relative; height: 6px; background: linear-gradient(90deg, oklch(0.78 0.10 240), oklch(0.78 0.10 60), oklch(0.66 0.18 28)); border-radius: 999px; margin: 2.2rem 0 2.6rem; }
.cc-numline-tick { position: absolute; top: -5px; bottom: -5px; width: 1.5px; background: var(--cc-line-strong); transform: translateX(-50%); opacity: 0.6; }
.cc-numline-tick::after { content: attr(data-label); position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); font-family: var(--cc-font-mono); font-size: 0.62rem; color: var(--cc-text-muted); white-space: nowrap; }
.cc-numline-marker { position: absolute; top: -10px; bottom: -10px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; pointer-events: none; transition: left 0.35s ease; }
.cc-numline-marker-dot { width: 14px; height: 14px; background: var(--cc-text); border: 3px solid var(--cc-surface); border-radius: 50%; box-shadow: var(--cc-shadow); }
.cc-numline-marker-label { font-family: var(--cc-font-mono); font-size: 0.72rem; font-weight: 600; background: var(--cc-text); color: var(--cc-bg); padding: 0.1rem 0.4rem; border-radius: 4px; margin-top: 4px; white-space: nowrap; }
.badge-soft { display: inline-block; padding: 0.3rem 0.7rem; background: color-mix(in oklab, var(--c) 18%, transparent); color: var(--c); border-radius: 999px; font-weight: 600; font-size: 0.85rem; }

/* Stack bar (macros, etc.) */
.stack-bar { display: flex; height: 56px; border-radius: 10px; overflow: hidden; border: 1px solid var(--cc-line); transition: all 0.25s ease; }
.stack-seg { display: flex; align-items: center; justify-content: flex-start; padding: 0 0.8rem; color: rgba(255,255,255,0.95); font-size: 0.85rem; font-weight: 500; min-width: 0; overflow: hidden; transition: flex 0.25s ease; }
.stack-seg span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Chips & steppers */
.chip { border: 1px solid var(--cc-line); background: var(--cc-surface); padding: 0.3rem 0.7rem; border-radius: 999px; font-size: 0.8rem; cursor: pointer; color: inherit; }
.chip-on { background: var(--cc-text); color: var(--cc-bg); border-color: var(--cc-text); }
.stepper { display: flex; align-items: center; border: 1px solid var(--cc-line); border-radius: 8px; background: var(--cc-surface); }
.stepper button { border: 0; background: transparent; width: 36px; height: 36px; font-size: 1.1rem; cursor: pointer; color: inherit; }
.stepper span { flex: 1; text-align: center; font-family: var(--cc-font-display); font-size: 1.2rem; font-weight: 500; }

/* Mode tabs */
.mode-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.4rem; background: var(--cc-bg-alt); border-radius: 12px; }
.mode-tab { border: 0; background: transparent; padding: 0.5rem 0.9rem; border-radius: 8px; cursor: pointer; font-size: 0.85rem; font-weight: 500; color: var(--cc-text-muted); }
.mode-tab.on { background: var(--cc-surface); color: var(--cc-text); box-shadow: var(--cc-shadow); }

/* EN fallback banner */
.cc-fallback-banner {
  background: oklch(0.96 0.02 80);
  border-bottom: 1px solid oklch(0.88 0.04 80);
  color: oklch(0.36 0.05 80);
  padding: .5rem 1rem;
  font-size: .9rem;
  text-align: center;
}

/* Coming soon (calc stubs) */
.cc-coming-soon h2 { color: var(--cc-text-muted); font-style: italic; }
.cc-coming-soon p { max-width: 60ch; }

/* Article byline / author block */
.cc-byline { display: flex; gap: .75rem; align-items: center;
  margin-top: 1rem; font-size: .9rem; }
.cc-byline-photo { border-radius: 50%; object-fit: cover; }
.cc-author-bio { border-top: 1px solid var(--cc-line);
  padding-top: 2rem; margin-top: 2rem; }
.cc-author-photo { border-radius: 50%; float: left; margin-right: 1rem; }
.cc-author-links { list-style: none; padding-left: 0; }
.cc-author-links a { color: var(--cc-primary); }

/* ── Engagement: example chips in Inputs panel head ──────────────────── */
.cc-examples { display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.4rem; margin-left: auto; }
.cc-examples-label { font-family: var(--cc-font-mono); font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--cc-text-muted); }
.cc-example-chip { border: 1px solid var(--cc-line); background: var(--cc-surface);
  padding: 0.25rem 0.7rem; border-radius: 999px; font-size: 0.78rem;
  cursor: pointer; color: var(--cc-text); transition: all 0.15s; }
.cc-example-chip:hover { background: oklch(0.96 0.04 var(--hue, 200));
  border-color: oklch(0.74 0.13 var(--hue, 200)); color: var(--cc-text); }
.cc-example-chip:focus-visible { outline: 2px solid var(--cc-primary);
  outline-offset: 2px; }

/* ── Engagement: Recent calculations panel ───────────────────────────── */
.cc-history { background: var(--cc-surface); border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius-lg); box-shadow: var(--cc-shadow);
  margin-bottom: 1.5rem; overflow: hidden; }
.cc-history .cc-panel-head { justify-content: space-between; }
.cc-history-clear { border: 0; background: transparent; padding: 0.2rem 0.5rem;
  font-family: var(--cc-font-mono); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--cc-text-muted); cursor: pointer;
  border-radius: 4px; }
.cc-history-clear:hover { color: var(--cc-text); background: var(--cc-bg-alt); }
.cc-history-list { list-style: none; padding: 0; margin: 0; display: flex;
  flex-direction: column; gap: 0.6rem; }
.cc-history-card { display: flex; align-items: center; gap: 1rem;
  padding: 0.7rem 0.9rem; background: var(--cc-bg-alt); border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius); }
.cc-history-card-meta { flex: 0 0 auto; min-width: 5.5rem; }
.cc-history-time { font-family: var(--cc-font-mono); font-size: 0.72rem;
  color: var(--cc-text-muted); }
.cc-history-card-summary { flex: 1 1 auto; font-family: var(--cc-font-display);
  font-weight: 500; font-variant-numeric: tabular-nums; color: var(--cc-text);
  overflow: hidden; text-overflow: ellipsis; }
.cc-history-card-actions { flex: 0 0 auto; display: flex; gap: 0.3rem; }
.cc-history-card-actions button { height: 32px; padding: 0 0.65rem;
  border: 1px solid var(--cc-line);
  background: var(--cc-surface); border-radius: 8px; cursor: pointer;
  font-size: 0.82rem; color: var(--cc-text); display: inline-flex;
  align-items: center; justify-content: center; gap: 0.35rem;
  transition: all 0.15s; }
.cc-history-action-icon { font-size: 0.95rem; line-height: 1; }
.cc-history-action-label { font-family: var(--cc-font-mono); font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.06em; }
.cc-history-card-actions button:hover { background: var(--cc-text); color: var(--cc-bg);
  border-color: var(--cc-text); }
.cc-history-card-actions button:focus-visible { outline: 2px solid var(--cc-primary);
  outline-offset: 2px; }

/* ── Engagement: Share popover (top-of-page) ─────────────────────────── */
.cc-share-wrap { position: relative; display: inline-block; }
.cc-share-trigger-icon { width: 14px; height: 14px; vertical-align: -2px;
  margin-right: 0.3rem; }
.cc-share-pop { position: absolute; top: calc(100% + 0.4rem); right: 0;
  z-index: 60; min-width: 12rem;
  display: flex; flex-direction: column; gap: 0.15rem;
  padding: 0.4rem; background: var(--cc-surface); border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius); box-shadow: var(--cc-shadow); }
.cc-share-pop[hidden] { display: none; }
.cc-share-target { display: flex; align-items: center; gap: 0.6rem;
  padding: 0.45rem 0.6rem; border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: var(--cc-text); cursor: pointer;
  font-family: var(--cc-font-base); font-size: 0.85rem; text-align: left;
  transition: background 0.12s, color 0.12s; }
.cc-share-target:hover, .cc-share-target:focus-visible {
  background: var(--cc-bg-alt); color: var(--cc-share-brand, var(--cc-text));
  outline: none; }
.cc-share-target:focus-visible { border-color: var(--cc-primary); }
.cc-share-target-icon { width: 18px; height: 18px; flex: 0 0 18px; }
.cc-share-target-label { flex: 1 1 auto; }

/* ── Engagement: Toasts (banner-style, top-right, stacked) ───────────── */
/* Container that stacks multiple concurrent toasts. Pointer-events disabled
   on the wrapper so it never blocks underlying clicks; re-enabled on each
   toast so the close button works. */
.cc-toast-stack { position: fixed; top: 1rem; right: 1rem; z-index: 1080;
  display: flex; flex-direction: column; gap: 0.5rem; max-width: 380px;
  pointer-events: none; }
.cc-toast { display: flex; align-items: center; gap: 0.75rem;
  padding: 0.85rem 1rem; border-radius: 8px;
  background: var(--cc-toast-bg, oklch(0.55 0.12 150)); color: #fff;
  font-size: 0.92rem; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  opacity: 0; transform: translateX(20px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: auto; min-width: 240px; }
.cc-toast--visible { opacity: 1; transform: translateX(0); }
.cc-toast-icon { flex: 0 0 26px; width: 26px; height: 26px; }
.cc-toast-icon svg { display: block; width: 100%; height: 100%;
  stroke: #fff; fill: none; }
.cc-toast-body { flex: 1 1 auto; min-width: 0; line-height: 1.35; }
.cc-toast-title { font-weight: 700; font-size: 0.98rem; }
.cc-toast-msg   { font-weight: 400; opacity: 0.95; }
.cc-toast-close { flex: 0 0 28px; width: 28px; height: 28px; padding: 0;
  border: 0; background: transparent; color: #fff; cursor: pointer;
  font-size: 1.4rem; line-height: 1; opacity: 0.85; border-radius: 4px; }
.cc-toast-close:hover  { opacity: 1; background: rgba(255,255,255,0.12); }
.cc-toast-close:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.cc-toast--success { --cc-toast-bg: oklch(0.55 0.13 150); }
.cc-toast--error   { --cc-toast-bg: oklch(0.55 0.18 25);  }
.cc-toast--warning { --cc-toast-bg: oklch(0.70 0.16 60);  }
.cc-toast--info    { --cc-toast-bg: oklch(0.55 0.15 250); }
@media (max-width: 480px) {
  .cc-toast-stack { left: 1rem; right: 1rem; max-width: none; }
}

/* ── Engagement: Vote up/down widget ─────────────────────────────────── */
/* Two Bootstrap btn-outline-dark btn-sm buttons sitting next to each other.
   The .cc-vote-btn class only adds the icon+count layout and the active-
   state coloring; the rounded outline + sizing come from Bootstrap. */
.cc-vote { display: inline-flex; align-items: stretch; gap: 0.4rem; }
.cc-vote-btn { display: inline-flex; align-items: center; gap: 0.35rem;
  line-height: 1; }
.cc-vote-icon { flex: 0 0 16px; vertical-align: -2px; }
.cc-vote-count { font-family: var(--cc-font-mono); font-size: 0.78rem;
  font-variant-numeric: tabular-nums; }
.cc-vote-up.is-active,
.cc-vote-up.is-active:hover,
.cc-vote-up.is-active:focus {
  background: oklch(0.95 0.06 145); color: oklch(0.38 0.18 145);
  border-color: oklch(0.55 0.16 145);
}
.cc-vote-down.is-active,
.cc-vote-down.is-active:hover,
.cc-vote-down.is-active:focus {
  background: oklch(0.95 0.06 25); color: oklch(0.40 0.18 25);
  border-color: oklch(0.55 0.16 25);
}
.cc-vote-btn[disabled] { cursor: progress; }

/* ── Engagement: Feedback CTA + modal ────────────────────────────────── */
.cc-feedback-cta { margin: 1.6rem 0 0.8rem; text-align: center; }
.cc-feedback-cta .cc-link { font-size: 0.92rem; }
.cc-feedback-modal { position: fixed; inset: 0; z-index: 1090;
  display: flex; align-items: center; justify-content: center; padding: 1rem; }
.cc-feedback-modal[hidden] { display: none; }
.cc-feedback-backdrop { position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.45); cursor: pointer; }
.cc-feedback-dialog { position: relative; z-index: 1; width: min(560px, 100%);
  max-height: 90vh; overflow-y: auto; background: var(--cc-bg);
  border-radius: var(--cc-radius); box-shadow: var(--cc-shadow); padding: 1.4rem; }
.cc-feedback-head { display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1rem; }
.cc-feedback-head .cc-iconbtn { font-size: 1.4rem; line-height: 1;
  width: 32px; height: 32px; }
.cc-feedback-row { margin-bottom: 0.9rem; }
.cc-feedback-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; }
.cc-feedback-kinds label { display: flex; align-items: center; gap: 0.45rem;
  padding: 0.45rem 0.6rem; border: 1px solid var(--cc-line); border-radius: 6px;
  cursor: pointer; font-size: 0.86rem; transition: background 0.12s, border-color 0.12s; }
.cc-feedback-kinds label:hover { background: var(--cc-bg-alt); }
.cc-feedback-kinds input[type="radio"] { accent-color: var(--cc-primary); }
.cc-feedback-kinds label:has(input:checked) { border-color: var(--cc-primary);
  background: var(--cc-bg-alt); }
.cc-feedback-status { min-height: 1.2rem; font-size: 0.86rem; color: var(--cc-muted);
  margin-bottom: 0.7rem; }
.cc-feedback-actions { display: flex; gap: 0.5rem; justify-content: flex-end; }

/* Calc page responsive overrides */
@media (max-width: 768px) {
  .cc-calc-header { flex-direction: column; gap: 1rem; }
  .cc-calc-header-art { width: 64px; height: 64px; }
  .cc-examples { width: 100%; margin-left: 0; }
  .cc-history-card { flex-wrap: wrap; }
  .cc-history-card-meta { flex: 1 1 auto; }
  .cc-feedback-kinds { grid-template-columns: 1fr; }
}

/* Horizontal bar list (calories-burned, dog-food-portion). */
.cc-bar-row { display: flex; align-items: center; gap: 0.7rem; padding: 0.32rem 0; }
.cc-bar-label { flex: 0 0 110px; font-size: 0.85rem; color: var(--cc-text-muted); text-transform: capitalize; }
.cc-bar-track { flex: 1; height: 16px; background: var(--cc-bg-alt); border-radius: 999px; border: 1px solid var(--cc-line); overflow: hidden; }
.cc-bar-fill { height: 100%; background: var(--cc-primary); transition: width 0.3s ease; }
.cc-bar-val { flex: 0 0 auto; font-family: var(--cc-font-mono); font-size: 0.78rem; color: var(--cc-text); }

/* Cycle calendar (menstrual-cycle). */
.cc-cycle-row { display: flex; align-items: center; gap: 0.7rem; padding: 0.4rem 0; }
.cc-cycle-label { flex: 0 0 90px; font-family: var(--cc-font-mono); font-size: 0.78rem; color: var(--cc-text-muted); }
.cc-cycle-bar { position: relative; flex: 1; height: 22px; background: var(--cc-bg-alt); border-radius: 6px; border: 1px solid var(--cc-line); overflow: hidden; }
.cc-cycle-period { position: absolute; top: 0; left: 0; bottom: 0; background: oklch(0.65 0.18 22); }
.cc-cycle-fertile { position: absolute; top: 0; bottom: 0; background: oklch(0.78 0.13 145); opacity: 0.6; }
.cc-cycle-ovul { position: absolute; top: 4px; bottom: 4px; width: 4px; background: var(--cc-text); border-radius: 999px; transform: translateX(-50%); box-shadow: 0 0 0 3px color-mix(in oklab, var(--cc-text) 22%, transparent); }

/* ──────────────────────────────────────────────────────────────────────
   Standard calculator (#22) — keypad-style widget with paper-tape history.
   3-layer depth in light: surface → display → keypad panel → keys (lighter
   than panel, lifted by border + shadow). In dark: keypad panel is the
   *darkest* layer; keys rebound by being lighter than the panel.
   Backspace red and equals green stay vivid in both themes.

   Embed iframe note: the embed view does not currently set [data-theme],
   so the calc renders in light tokens regardless of the chosen `bg`.
   A future `?theme=dark` embed param can lift this — the calc itself is
   already wired to switch via [data-theme] alone.
   ────────────────────────────────────────────────────────────────────── */
:root {
  --calc-display-bg: #ede7d6;
  --calc-keypad-bg:  #c9c1aa;
  --calc-key-bg:        #f7f3e8;
  --calc-key-bg-hover:  #fffdf5;
  --calc-key-bg-active: #e2dccb;
  --calc-key-text:   var(--cc-text);
  --calc-key-border: 1px solid rgba(26, 29, 28, 0.10);
  --calc-key-shadow: 0 1px 0 rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --calc-tape-divider: rgba(26, 29, 28, 0.10);
  --calc-result-ok:  #166e2e;
  --calc-result-err: #a3232a;
  --calc-backspace-bg:       #a3232a;
  --calc-backspace-bg-hover: #b8282f;
  --calc-equals-bg:          #166e2e;
  --calc-equals-bg-hover:    #1a823a;
}
[data-theme="dark"] {
  --calc-display-bg: #1a1a1a;
  --calc-keypad-bg:  #0f1311;
  --calc-key-bg:        #2c2c2c;
  --calc-key-bg-hover:  #353535;
  --calc-key-bg-active: #3f3f3f;
  --calc-key-text: #ededed;
  --calc-key-border: 0;
  --calc-key-shadow: none;
  --calc-tape-divider: rgba(255, 255, 255, 0.06);
  --calc-result-ok:  #4ade80;
  --calc-result-err: #ef4444;
  --calc-equals-bg:       #1f8a3a;
  --calc-equals-bg-hover: #239f43;
}

/* Hide the cross-calc engagement history drawer for keypad-style calcs —
   the visible paper tape is its in-page replacement. */
.cc-calc-page[data-calc="standard-calculator"] .cc-history-mount,
.cc-calc-page[data-calc="scientific-calculator"] .cc-history-mount,
.cc-calc-page[data-calc="graphing-calculator"] .cc-history-mount,
[data-calc="standard-calculator"] .cc-stdcalc-results-stub,
[data-calc="scientific-calculator"] .cc-stdcalc-results-stub,
[data-calc="graphing-calculator"] .cc-stdcalc-results-stub { display: none; }

.cc-stdcalc-panel .cc-panel-body { padding: 0; }

.cc-stdcalc {
  display: flex; flex-direction: column;
  max-width: 480px; margin: 0 auto;
}

.cc-stdcalc-display {
  background: var(--calc-display-bg);
  display: flex; flex-direction: column;
  border-radius: var(--cc-radius) var(--cc-radius) 0 0;
}

.cc-stdcalc-tape {
  position: relative;
  height: 220px; overflow-y: auto;
  padding: 16px 20px 12px;
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: 6px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklab, var(--cc-text) 18%, transparent) transparent;
}
.cc-stdcalc-tape::-webkit-scrollbar { width: 4px; }
.cc-stdcalc-tape::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--cc-text) 18%, transparent);
  border-radius: 2px;
}

.cc-tape-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; padding: 6px 8px;
  border-radius: 6px; cursor: pointer;
  transition: background 0.1s ease;
}
.cc-tape-row:hover { background: color-mix(in oklab, var(--cc-text) 6%, transparent); }
.cc-tape-expr {
  color: var(--cc-text-muted);
  font-family: var(--cc-font-mono);
  font-size: 14px;
  word-break: break-all;
}
.cc-tape-res {
  color: var(--cc-text);
  font-size: 15px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
.cc-tape-res::before {
  content: '= '; color: var(--cc-text-muted); font-weight: 400;
}

.cc-stdcalc-tape-clear {
  position: absolute; top: 8px; right: 12px;
  background: transparent; border: 0;
  color: var(--cc-text-muted);
  opacity: 0.45; cursor: pointer;
  padding: 6px; border-radius: 4px;
  transition: opacity 0.15s ease, background 0.15s ease;
  display: inline-flex; align-items: center; justify-content: center;
}
.cc-stdcalc-tape-clear:hover {
  opacity: 1;
  background: color-mix(in oklab, var(--cc-text) 8%, transparent);
}
.cc-stdcalc-tape-empty {
  color: var(--cc-text-muted);
  opacity: 0.5; align-self: center; text-align: center;
  font-size: 14px; font-style: italic;
}

.cc-stdcalc-active {
  border-top: 1px solid var(--calc-tape-divider);
  padding: 14px 20px 18px;
  display: flex; flex-direction: column; gap: 4px;
  min-height: 96px;
}
.cc-stdcalc-expr {
  color: var(--cc-text);
  font-family: var(--cc-font-mono);
  font-size: 22px; font-weight: 500;
  text-align: right; min-height: 28px;
  overflow-x: auto; white-space: nowrap;
  /* Keep the tail visible when the expression is long. */
  direction: rtl;
}
.cc-stdcalc-expr-inner { direction: ltr; unicode-bidi: bidi-override; }
.cc-stdcalc-result {
  font-size: 32px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right; min-height: 40px;
  color: var(--calc-result-ok);
}
.cc-stdcalc-result[data-state="error"] { color: var(--calc-result-err); }
.cc-stdcalc-result[data-state="muted"] { color: var(--cc-text-muted); opacity: 0.55; }

.cc-stdcalc-keypad {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 64px);
  gap: 8px; padding: 12px;
  background: var(--calc-keypad-bg);
  border-radius: 0 0 var(--cc-radius) var(--cc-radius);
}

.cc-key {
  background: var(--calc-key-bg);
  color: var(--calc-key-text);
  border: var(--calc-key-border);
  border-radius: 10px;
  font-family: var(--cc-font);
  font-size: 22px; font-weight: 600;
  cursor: pointer;
  transition: background 0.08s ease, transform 0.08s ease, box-shadow 0.08s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: var(--calc-key-shadow);
  display: inline-flex; align-items: center; justify-content: center;
}
.cc-key:hover  { background: var(--calc-key-bg-hover); }
.cc-key:active { background: var(--calc-key-bg-active); transform: translateY(1px); }
.cc-key:focus-visible {
  outline: 2px solid var(--cc-primary);
  outline-offset: 2px;
}
.cc-key--fn { font-size: 19px; }
.cc-key--fn sup { font-size: 0.65em; }
.cc-key--backspace {
  background: var(--calc-backspace-bg); color: #fff; font-size: 18px; border: 0;
}
.cc-key--backspace:hover { background: var(--calc-backspace-bg-hover); }
.cc-key--equals {
  background: var(--calc-equals-bg); color: #fff;
  grid-row: span 2; font-size: 28px; border: 0;
}
.cc-key--equals:hover { background: var(--calc-equals-bg-hover); }

@media (max-width: 480px) {
  .cc-stdcalc-keypad { grid-template-rows: repeat(5, 56px); gap: 6px; padding: 8px; }
  .cc-key { font-size: 19px; border-radius: 8px; }
  .cc-key--equals { font-size: 24px; }
  .cc-key--backspace { font-size: 16px; }
  .cc-stdcalc-tape { height: 180px; }
  .cc-stdcalc-result { font-size: 28px; }
}

/* ──────────────────────────────────────────────────────────────────────
   Scientific calculator (#23) — horizontal keypad (5 rows × 9 cols),
   GNOME-calculator-inspired. Reuses the standard-calc chrome (display +
   tape + theme tokens). DEG/RAD is a segmented control between display
   and keypad; memory holds a small "M" badge top-left of the tape.
   The card itself widens to ~840px on desktop to fit 9 columns; on
   mobile (≤ 700px) cells shrink and on very narrow screens (≤ 480px)
   the keypad scrolls horizontally rather than wrapping.
   ────────────────────────────────────────────────────────────────────── */
.cc-scicalc--horizontal { max-width: 840px; }

/* Angle-mode segmented control */
.cc-scicalc-modebar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: color-mix(in oklab, var(--calc-keypad-bg) 70%, var(--cc-surface));
  border-top: 1px solid var(--calc-tape-divider);
}
.cc-scicalc-modelabel {
  font-family: var(--cc-font-mono);
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--cc-text-muted);
}
.cc-scicalc-segmented {
  display: inline-flex;
  background: color-mix(in oklab, var(--cc-text) 8%, transparent);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.cc-scicalc-seg {
  border: 0; background: transparent;
  font-family: var(--cc-font-mono);
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--cc-text-muted);
  padding: 5px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.cc-scicalc-seg[data-active="on"] {
  background: var(--cc-surface);
  color: var(--cc-text);
  box-shadow: 0 1px 2px rgba(0,0,0,0.10);
}
[data-theme="dark"] .cc-scicalc-seg[data-active="on"] {
  background: color-mix(in oklab, var(--cc-primary) 80%, transparent);
  color: #fff;
  box-shadow: none;
}

/* Horizontal keypad: 9 cols × 5 rows, = spans 2 rows in column 5. */
.cc-scicalc-keypad--horizontal {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(5, 56px);
  gap: 6px; padding: 10px;
  background: var(--calc-keypad-bg);
  border-radius: 0 0 var(--cc-radius) var(--cc-radius);
}

/* Legacy 8×5 keypad rule retained as a no-op fallback if some other
   surface still emits the old class (none does today, but the rule cost
   is zero). */
.cc-scicalc-keypad:not(.cc-scicalc-keypad--horizontal) {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(8, 52px);
  gap: 6px; padding: 10px;
  background: var(--calc-keypad-bg);
  border-radius: 0 0 var(--cc-radius) var(--cc-radius);
}

.cc-scicalc .cc-key { font-size: 17px; border-radius: 8px; }
.cc-scicalc .cc-key--fn { font-size: 13px; letter-spacing: 0.01em; }
.cc-scicalc .cc-key--fn sup { font-size: 0.7em; }
.cc-scicalc .cc-key--equals { font-size: 24px; }
.cc-scicalc .cc-key--backspace { font-size: 16px; }
.cc-scicalc .cc-key--clear { font-weight: 700; letter-spacing: 0.04em; }

.cc-scicalc .cc-key--shift {
  font-size: 13px; font-weight: 700;
  background: color-mix(in oklab, var(--cc-primary) 22%, var(--calc-key-bg));
}
.cc-scicalc .cc-key--shift.cc-key--active {
  background: var(--cc-primary); color: #fff; border: 0;
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--cc-primary) 40%, transparent);
}
.cc-scicalc .cc-key--mode {
  font-size: 13px; font-weight: 700; letter-spacing: 0.04em;
}
.cc-scicalc .cc-key--mem { font-size: 13px; font-weight: 700; }

/* Secondary-label flip when 2nd is active */
.cc-key-primary, .cc-key-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
}
.cc-key-secondary { display: none; }
.cc-scicalc[data-shift="on"] .cc-key-primary   { display: none; }
.cc-scicalc[data-shift="on"] .cc-key-secondary { display: inline-flex; }

/* DEG / RAD / M badges — sit in the top-left of the tape, opposite the
   trash icon. Positioned absolutely inside .cc-stdcalc-tape (which is
   already position: relative). */
.cc-scicalc-badges {
  position: absolute; top: 8px; left: 12px;
  display: inline-flex; gap: 6px; pointer-events: none;
}
.cc-scicalc-badge {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--cc-font-mono);
  font-size: 10px; letter-spacing: 0.08em;
  padding: 2px 6px; border-radius: 4px;
  background: color-mix(in oklab, var(--cc-text) 12%, transparent);
  color: var(--cc-text-muted);
}
.cc-scicalc-badge--mem {
  background: color-mix(in oklab, var(--cc-primary) 30%, transparent);
  color: var(--cc-primary);
  font-weight: 700;
}
[data-theme="dark"] .cc-scicalc-badge--mem {
  color: #5fb574;
  background: color-mix(in oklab, #5fb574 25%, transparent);
}

@media (max-width: 700px) {
  .cc-scicalc-keypad--horizontal {
    grid-template-rows: repeat(5, 48px);
    gap: 4px; padding: 6px;
  }
  .cc-scicalc .cc-key { font-size: 15px; border-radius: 6px; }
  .cc-scicalc .cc-key--fn { font-size: 11px; }
  .cc-scicalc .cc-key--equals { font-size: 20px; }
  .cc-scicalc .cc-key--shift,
  .cc-scicalc .cc-key--mem { font-size: 11px; }
  .cc-scicalc-modebar { padding: 8px 10px; gap: 8px; }
  .cc-scicalc-seg { padding: 4px 10px; font-size: 11px; }
}
@media (max-width: 480px) {
  /* Allow horizontal scroll on very narrow screens — the 9-col grid
     stays visually intact rather than wrapping into ugly fragments. */
  .cc-stdcalc-panel .cc-panel-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cc-scicalc-keypad--horizontal { min-width: 540px; }
  .cc-stdcalc-display { min-width: 540px; }
  .cc-scicalc-modebar { min-width: 540px; }
}

/* ──────────────────────────────────────────────────────────────────────
   Graphing calculator (#24) — TI-83-inspired f/g/h plotter. Canvas left,
   function inputs + window + DEG/RAD right, table of values below.
   Curve colors are driven from JS (theme-aware) since canvas can't read
   CSS variables; the swatch dot in each function row mirrors the JS
   color via inline `--fn-color`.
   ────────────────────────────────────────────────────────────────────── */
.cc-graphcalc-panel { max-width: 1080px; margin: 0 auto; }
.cc-graphcalc-panel .cc-panel-body { padding: 16px; }
.cc-graphcalc-grid {
  display: grid;
  /* Both tracks pinned to minmax(0, …) so the inputs inside can shrink
     below their content width instead of blowing the track out. */
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.cc-graphcalc-side, .cc-graphcalc-window, .cc-graphcalc-winrow,
.cc-graphcalc-fn, .cc-graphcalc-fns { min-width: 0; }

/* Graph canvas card */
.cc-graphcalc-graph {
  background: var(--cc-surface);
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius);
  padding: 8px;
  display: flex; flex-direction: column; gap: 8px;
}
.cc-graphcalc-canvas {
  display: block;
  width: 100%;
  height: 480px;
  border-radius: 8px;
  background: var(--cc-surface);
  cursor: grab;
  -webkit-user-select: none; user-select: none;
}
[data-theme="dark"] .cc-graphcalc-canvas { background: #1a201d; }

.cc-graphcalc-zoombar {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.cc-graphcalc-zoombtn {
  flex: 1 1 auto;
  background: var(--cc-bg-alt);
  color: var(--cc-text);
  border: 1px solid var(--cc-line);
  border-radius: 8px;
  padding: 6px 12px;
  font-family: var(--cc-font);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: background 0.1s ease, border-color 0.1s ease;
}
.cc-graphcalc-zoombtn:hover {
  background: color-mix(in oklab, var(--cc-text) 8%, var(--cc-bg-alt));
  border-color: var(--cc-line-strong);
}
.cc-graphcalc-zoombtn:active { transform: translateY(1px); }

/* Right side panel */
.cc-graphcalc-side {
  display: flex; flex-direction: column; gap: 14px;
}
.cc-graphcalc-fns { display: flex; flex-direction: column; gap: 8px; }
.cc-graphcalc-fn {
  display: grid;
  grid-template-columns: 12px auto 1fr 16px;
  align-items: center;
  gap: 8px;
  background: var(--cc-surface);
  border: 1px solid var(--cc-line);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: text;
}
.cc-graphcalc-fnswatch {
  width: 12px; height: 12px;
  border-radius: 3px;
  background: var(--fn-color);
}
.cc-graphcalc-fnlabel {
  font-family: var(--cc-font-mono);
  font-size: 14px; font-weight: 600;
  color: var(--cc-text-muted);
  letter-spacing: 0.02em;
}
.cc-graphcalc-fn input[type="text"] {
  border: 0;
  background: transparent;
  font-family: var(--cc-font-mono);
  font-size: 15px;
  color: var(--cc-text);
  outline: none;
  padding: 4px 6px;
  border-radius: 4px;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
.cc-graphcalc-fn input[type="text"]:focus {
  background: var(--cc-bg-alt);
}
.cc-graphcalc-fnstatus {
  font-size: 13px; font-weight: 700;
  width: 16px; text-align: center;
}
.cc-graphcalc-fnstatus[data-state="ok"]    { color: #10b981; }
.cc-graphcalc-fnstatus[data-state="error"] { color: #dc2626; cursor: help; }
.cc-graphcalc-fnstatus[data-state="empty"] { color: transparent; }

/* Instant CSS tooltip for the parser-error indicator. The native `title`
   attribute has a 1-1.5 s show delay across browsers; this avoids it. */
.cc-graphcalc-fnstatus[data-tooltip] { position: relative; }
.cc-graphcalc-fnstatus[data-tooltip]:hover::before,
.cc-graphcalc-fnstatus[data-tooltip]:focus::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  right: -8px;
  background: rgba(20, 25, 30, 0.96);
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  font-family: var(--cc-font);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  width: max-content;
  max-width: 280px;
  white-space: normal;
  text-align: left;
  z-index: 100;
  pointer-events: none;
  box-shadow: 0 6px 20px -6px rgba(0,0,0,0.35);
  /* Show instantly — no transition / no animation delay. */
}
.cc-graphcalc-fnstatus[data-tooltip]:hover::after,
.cc-graphcalc-fnstatus[data-tooltip]:focus::after {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  right: 0;
  width: 0; height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid rgba(20, 25, 30, 0.96);
  z-index: 101;
  pointer-events: none;
}

/* Window editor */
.cc-graphcalc-window {
  border: 1px solid var(--cc-line);
  border-radius: 8px;
  padding: 10px 12px 12px;
  background: var(--cc-surface);
}
.cc-graphcalc-window legend {
  font-family: var(--cc-font-mono);
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--cc-text-muted);
  padding: 0 6px;
  margin-bottom: 4px;
}
.cc-graphcalc-winrow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.cc-graphcalc-window label {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--cc-font-mono);
  font-size: 13px;
  color: var(--cc-text-muted);
  padding: 4px 0;
  min-width: 0;       /* let the flex parent (1fr grid track) actually constrain us */
}
.cc-graphcalc-window label sub { font-size: 0.8em; }
.cc-graphcalc-window input[type="number"] {
  flex: 1 1 0;
  min-width: 0;
  width: 100%;        /* belt-and-braces: tame the browser's 200px-ish default */
  background: var(--cc-bg-alt);
  border: 1px solid var(--cc-line);
  border-radius: 6px;
  padding: 4px 6px;
  font-family: var(--cc-font-mono);
  font-size: 13px;
  color: var(--cc-text);
  outline: none;
  box-sizing: border-box;
}
.cc-graphcalc-window input[type="number"]:focus { border-color: var(--cc-primary); }

/* Mode toggle (DEG/RAD) — reuses the segmented control from sci calc */
.cc-graphcalc-modebar {
  display: flex; align-items: center; gap: 12px;
}
.cc-graphcalc-modelabel {
  font-family: var(--cc-font-mono);
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--cc-text-muted);
}

.cc-graphcalc-hint {
  font-size: 12px; line-height: 1.5;
  color: var(--cc-text-muted);
  background: var(--cc-bg-alt);
  border-radius: 6px;
  padding: 8px 10px;
}

/* Compact syntax cheat-sheet above the function inputs — keeps the
   `^` convention and the function vocabulary in front of the user
   without forcing them to read the editorial description below. */
.cc-graphcalc-syntax {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; line-height: 1.5;
  color: var(--cc-text-muted);
  background: color-mix(in oklab, var(--cc-primary) 7%, var(--cc-surface));
  border: 1px solid color-mix(in oklab, var(--cc-primary) 18%, var(--cc-line));
  border-radius: 8px;
  padding: 10px 12px;
}
.cc-graphcalc-syntax-label {
  font-family: var(--cc-font-mono);
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 700;
  color: var(--cc-primary);
}
[data-theme="dark"] .cc-graphcalc-syntax-label {
  color: color-mix(in oklab, var(--cc-primary) 60%, #ffffff);
}
.cc-graphcalc-syntax code {
  font-family: var(--cc-font-mono);
  font-size: 12px;
  background: color-mix(in oklab, var(--cc-text) 10%, transparent);
  color: var(--cc-text);
  padding: 1px 5px;
  border-radius: 3px;
}

/* Table of values */
.cc-graphcalc-tablewrap {
  margin-top: 16px;
  background: var(--cc-surface);
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius);
  padding: 10px 14px 14px;
}
.cc-graphcalc-tablectls {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.cc-graphcalc-tablelabel {
  font-family: var(--cc-font-mono);
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--cc-text-muted);
  font-weight: 700;
}
.cc-graphcalc-tablectl {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--cc-font-mono);
  font-size: 12px;
  color: var(--cc-text-muted);
}
.cc-graphcalc-tablectl sub { font-size: 0.8em; }
.cc-graphcalc-tablectl input {
  background: var(--cc-bg-alt);
  border: 1px solid var(--cc-line);
  border-radius: 6px;
  padding: 3px 6px;
  font-family: var(--cc-font-mono);
  font-size: 12px;
  color: var(--cc-text);
  width: 70px;
  outline: none;
}
.cc-graphcalc-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--cc-font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.cc-graphcalc-table th {
  text-align: right;
  padding: 6px 12px;
  border-bottom: 1px solid var(--cc-line);
  color: var(--cc-text);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
}
.cc-graphcalc-table th:first-child {
  text-align: left;
  color: var(--cc-text-muted);
}
.cc-graphcalc-tcell {
  text-align: right;
  padding: 5px 12px;
  border-bottom: 1px solid color-mix(in oklab, var(--cc-text) 5%, transparent);
}
.cc-graphcalc-tcell--x {
  text-align: left;
  color: var(--cc-text-muted);
  font-weight: 600;
}

/* Mobile: stack canvas above the side panel, then table below. */
@media (max-width: 820px) {
  .cc-graphcalc-grid { grid-template-columns: 1fr; }
  .cc-graphcalc-canvas { height: 360px; }
  .cc-graphcalc-side { flex-direction: column; }
}

/* ──────────────────────────────────────────────────────────────────────
   Quadratic equation solver (#25) — KPI cards + auto-windowed parabola
   plot. Uses the standard cc-panel / cc-inputs / cc-results layout so it
   lives comfortably alongside the other domain calcs and embeds.
   ────────────────────────────────────────────────────────────────────── */
.cc-quad-coeflabel {
  font-size: 0.85em;
  color: var(--cc-text-muted);
  font-weight: 400;
}
.cc-quad-equation {
  font-family: var(--cc-font-mono);
  font-size: clamp(1.1rem, 2.4vw, 1.6rem);
  font-weight: 600;
  text-align: center;
  padding: 14px 16px;
  margin-bottom: 8px;
  background: var(--cc-bg-alt);
  border-radius: var(--cc-radius);
  letter-spacing: 0.01em;
  word-break: break-word;
}
.cc-quad-caselabel {
  text-align: center;
  font-size: 0.9rem;
  color: var(--cc-text-muted);
  font-style: italic;
  margin-bottom: 8px;
}
.cc-quad-kpi { padding: 12px 14px; }
.cc-quad-kpi-value {
  font-family: var(--cc-font-mono);
  font-size: 1.1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.cc-quad-kpi-small { font-size: 0.95rem; }
.cc-quad-kpi-roots .cc-quad-kpi-value { font-size: 1.2rem; }

.cc-quad-kpi[data-disc="pos"]  { border-left: 3px solid #10b981; }
.cc-quad-kpi[data-disc="zero"] { border-left: 3px solid #d97706; }
.cc-quad-kpi[data-disc="neg"]  { border-left: 3px solid #6366f1; }

.cc-quad-canvas {
  display: block;
  width: 100%;
  height: 360px;
  border-radius: 8px;
  background: var(--cc-surface);
}
[data-theme="dark"] .cc-quad-canvas { background: #1a201d; }

.cc-quad-legend {
  display: flex; flex-wrap: wrap; gap: 16px;
  margin-top: 10px;
  font-size: 12px; color: var(--cc-text-muted);
}
.cc-quad-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.cc-quad-legend-dot { width: 10px; height: 10px; border-radius: 50%; }
.cc-quad-legend-diamond { transform: rotate(45deg); border-radius: 1px; }

@media (max-width: 480px) {
  .cc-quad-canvas { height: 260px; }
}
@media (max-width: 480px) {
  .cc-graphcalc-canvas { height: 280px; }
  .cc-graphcalc-tablectl input { width: 56px; }
}
/* Site chrome — topbar, hero, footer, atlas, cards. NOT used by embeds. */

/* Subcategory atlas glyph — needs darker vivid stroke for readability at 40px */
.cc-atlas-art {
  --cc-glyph-vivid: oklch(0.55 0.15 var(--hue));
}

/* Topbar */
.cc-topbar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklab, var(--cc-bg) 85%, transparent);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid var(--cc-line);
}
.cc-topbar > .container-xxl { position: relative; padding-top: 0.85rem; padding-bottom: 0.85rem; display: flex; align-items: center; gap: 1rem; }
.cc-logo { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: inherit; }
.cc-logo-text { font-family: var(--cc-font-display); font-size: 1.25rem; font-weight: 500; letter-spacing: -0.01em; }
.cc-logo-text-accent { color: var(--cc-accent); }

.cc-search-wrap { position: relative; flex: 1; max-width: 560px; }
.cc-search { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.8rem; background: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: 999px; transition: border-color 0.15s, box-shadow 0.15s; }
.cc-search:focus-within { border-color: var(--cc-primary); box-shadow: 0 0 0 4px color-mix(in oklab, var(--cc-primary) 12%, transparent); }
.cc-search svg { color: var(--cc-text-muted); flex-shrink: 0; }
.cc-search-btn { display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; padding: 0; color: var(--cc-text-muted); cursor: pointer; flex-shrink: 0; transition: color 0.15s; }
.cc-search-btn:hover, .cc-search-btn:focus-visible { color: var(--cc-primary); outline: 0; }
.cc-search input { flex: 1; border: 0; outline: 0; background: transparent; color: inherit; font-size: 0.95rem; min-width: 0; }
.cc-search input::placeholder { color: var(--cc-text-muted); }
.cc-kbd { font-family: var(--cc-font-mono); font-size: 0.7rem; background: var(--cc-bg-alt); padding: 0.15rem 0.4rem; border-radius: 4px; color: var(--cc-text-muted); }
.cc-search-menu {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  background: var(--cc-surface); border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius); box-shadow: var(--cc-shadow-lg);
  overflow: hidden; max-height: 60vh; overflow-y: auto; display: none;
}
.cc-search-menu.show { display: block; }
.cc-search-item { display: flex; align-items: center; gap: 0.85rem; width: 100%; padding: 0.75rem 1rem; border: 0; background: transparent; text-align: left; cursor: pointer; border-bottom: 1px solid var(--cc-line); color: inherit; text-decoration: none; }
.cc-search-item:last-child { border-bottom: 0; }
.cc-search-item:hover, .cc-search-item.active { background: var(--cc-bg-alt); color: inherit; }
.cc-search-title { font-weight: 500; }
.cc-search-blurb { font-size: 0.82rem; color: var(--cc-text-muted); }
.cc-search-cat { margin-left: auto; font-family: var(--cc-font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--cc-text-muted); padding: 0.2rem 0.5rem; background: var(--cc-bg-alt); border-radius: 999px; }
.cc-search-empty { padding: 1.5rem; text-align: center; color: var(--cc-text-muted); }
.cc-search-item mark, .cc-hero-search-dropdown mark { background: oklch(from var(--cc-primary) l c h / 0.22); color: inherit; padding: 0 0.12em; border-radius: 2px; font-weight: 600; }

.cc-iconbtn { width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--cc-line); background: var(--cc-surface); color: inherit; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.cc-iconbtn:hover { background: var(--cc-bg-alt); }
.cc-lang { position: relative; display: inline-flex; }
.cc-lang-trigger {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  background: var(--cc-bg-alt); border: 0; border-radius: 999px;
  font-family: var(--cc-font-mono); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em;
  color: var(--cc-text); cursor: pointer;
}
.cc-lang-trigger:hover { background: color-mix(in oklab, var(--cc-bg-alt) 60%, var(--cc-line)); }
.cc-lang-trigger svg { color: var(--cc-text-muted); }
.cc-lang-menu {
  position: absolute; top: calc(100% + 6px); right: 0; min-width: 180px;
  background: var(--cc-surface); border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius); box-shadow: var(--cc-shadow-lg);
  overflow: hidden; z-index: 60;
}
.cc-lang-menu[hidden] { display: none; }
.cc-lang-menu-item {
  display: flex; align-items: baseline; gap: 0.7rem;
  padding: 0.55rem 0.85rem; color: inherit; text-decoration: none;
  border-bottom: 1px solid var(--cc-line); font-size: 0.92rem;
}
.cc-lang-menu-item:last-child { border-bottom: 0; }
.cc-lang-menu-item:hover { background: var(--cc-bg-alt); }
.cc-lang-menu-item.on { color: var(--cc-primary); }
.cc-lang-menu-code { font-family: var(--cc-font-mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em; color: var(--cc-text-muted); min-width: 1.8rem; }
.cc-lang-menu-item.on .cc-lang-menu-code { color: var(--cc-primary); }
.cc-lang-flag { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif; font-size: 1em; line-height: 1; }
.cc-lang-trigger .cc-lang-flag { font-size: 1.05em; }
.cc-topbar-controls { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.cc-hamburger svg { display: block; }

/* ── Topbar: Recent calculators dropdown ─────────────────────────────── */
.cc-recents-wrap { position: relative; display: none; }
@media (min-width: 768px) { .cc-recents-wrap { display: inline-flex; } }
.cc-recents-wrap[hidden] { display: none !important; }
.cc-recents-trigger {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  background: var(--cc-bg-alt); border: 0; border-radius: 999px;
  font-family: var(--cc-font-base); font-size: 0.82rem; font-weight: 500;
  color: var(--cc-text); cursor: pointer;
  max-width: 14rem;
}
.cc-recents-trigger:hover { background: color-mix(in oklab, var(--cc-bg-alt) 60%, var(--cc-line)); }
.cc-recents-icon, .cc-recents-chevron { color: var(--cc-text-muted); flex: 0 0 auto; }
.cc-recents-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-recents-wrap.is-open .cc-recents-chevron { transform: rotate(180deg); }
.cc-recents-menu {
  position: absolute; top: calc(100% + 6px); right: 0; min-width: 240px;
  background: var(--cc-surface); border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius); box-shadow: var(--cc-shadow-lg);
  overflow: hidden; z-index: 60;
}
.cc-recents-menu[hidden] { display: none; }
.cc-recents-item {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 0.85rem; color: inherit; text-decoration: none;
  border-bottom: 1px solid var(--cc-line); font-size: 0.9rem;
}
.cc-recents-item:last-child { border-bottom: 0; }
.cc-recents-item:hover { background: var(--cc-bg-alt); color: var(--cc-primary); }
.cc-recents-item-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cc-primary); flex: 0 0 auto;
}
.cc-recents-item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-mobile-menu {
  position: absolute; top: calc(100% + 6px); right: calc(var(--bs-gutter-x, 1.5rem) / 2);
  min-width: 200px; background: var(--cc-surface); border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius); box-shadow: var(--cc-shadow-lg);
  overflow: hidden; z-index: 60;
}
.cc-mobile-menu[hidden] { display: none; }
.cc-mobile-menu-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; color: inherit; text-decoration: none; border-bottom: 1px solid var(--cc-line); font-size: 0.95rem; }
.cc-mobile-menu-item svg { flex: 0 0 auto; }
.cc-mobile-menu-item:last-child { border-bottom: 0; }
.cc-mobile-menu-item:hover { background: var(--cc-bg-alt); }
@media (min-width: 768px) { .cc-mobile-menu { display: none; } }

/* Hero */
.cc-hero { padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3.5rem); }
.cc-tag { border: 1px solid var(--cc-line); background: var(--cc-surface); padding: 0.4rem 0.85rem; border-radius: 999px; font-size: 0.85rem; cursor: pointer; color: inherit; transition: all 0.15s; text-decoration: none; display: inline-block; }
.cc-tag:hover { border-color: var(--cc-primary); color: var(--cc-primary); }
.cc-feature {
  display: block; width: 100%; height: 100%; min-height: 360px;
  text-align: left; border: 1px solid var(--cc-line); background: var(--cc-surface);
  border-radius: var(--cc-radius-lg); padding: 0; cursor: pointer;
  box-shadow: var(--cc-shadow); overflow: hidden; color: inherit;
  text-decoration: none; transition: transform 0.2s, box-shadow 0.2s;
}
.cc-feature:hover { transform: translateY(-2px); box-shadow: var(--cc-shadow-lg); color: inherit; }
.cc-feature-tag { font-family: var(--cc-font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cc-accent); padding: 1.2rem 1.5rem 0.5rem; }
.cc-feature-art { padding: 0 1.5rem; }
.cc-feature-body { padding: 1.2rem 1.5rem 1.5rem; }
.cc-feature-title { font-family: var(--cc-font-display); font-size: 1.5rem; font-weight: 500; line-height: 1.15; }
.cc-feature-blurb { color: var(--cc-text-muted); margin-top: 0.4rem; font-size: 0.95rem; }
.cc-feature-cta { margin-top: 1rem; color: var(--cc-primary); font-weight: 500; font-size: 0.9rem; }

/* Sections */
.cc-section { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.cc-section-alt { background: var(--cc-bg-alt); border-top: 1px solid var(--cc-line); border-bottom: 1px solid var(--cc-line); }
.cc-section-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.cc-section-meta { font-family: var(--cc-font-mono); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cc-text-muted); }

/* Category card */
.cc-cat-card {
  display: flex; flex-direction: column; gap: 0.4rem; width: 100%; min-height: 180px;
  padding: 1rem; text-align: left; border: 1px solid var(--cc-line); background: var(--cc-surface);
  border-radius: var(--cc-radius); cursor: pointer; color: inherit; text-decoration: none;
  box-shadow: var(--cc-shadow); position: relative; overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.cc-cat-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, color-mix(in oklab, oklch(0.74 0.13 var(--hue)) 8%, transparent) 0%, transparent 50%); }
.cc-cat-card:hover { transform: translateY(-2px); box-shadow: var(--cc-shadow-lg); border-color: oklch(0.74 0.13 var(--hue)); color: inherit; }
.cc-cat-title { font-family: var(--cc-font-display); font-size: 1.1rem; font-weight: 500; margin-top: 0.2rem; }
.cc-cat-blurb { font-size: 0.82rem; color: var(--cc-text-muted); line-height: 1.35; }
.cc-cat-meta { display: flex; justify-content: space-between; align-items: center; font-family: var(--cc-font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--cc-text-muted); margin-top: auto; padding-top: 0.45rem; border-top: 1px dashed var(--cc-line); }
.cc-cat-arrow { font-size: 1rem; color: oklch(0.65 0.13 var(--hue)); }
.cc-cat-subs { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.35rem; }
.cc-cat-subs span { font-size: 0.7rem; padding: 0.1rem 0.45rem; background: var(--cc-bg-alt); border-radius: 999px; color: var(--cc-text-muted); }

/* Trending / recent cards */
.cc-trend-card, .cc-recent-card {
  display: flex; flex-direction: column; gap: 0.5rem; width: 100%; min-height: 160px;
  padding: 1.25rem; text-align: left; border: 1px solid var(--cc-line); background: var(--cc-surface);
  border-radius: var(--cc-radius); cursor: pointer; color: inherit; text-decoration: none;
  box-shadow: var(--cc-shadow); position: relative; transition: transform 0.15s, box-shadow 0.15s;
}
.cc-trend-card:hover, .cc-recent-card:hover { transform: translateY(-2px); box-shadow: var(--cc-shadow-lg); color: inherit; }
.cc-trend-num { position: absolute; top: 0.7rem; right: 0.9rem; font-family: var(--cc-font-display); font-size: 1.4rem; color: var(--cc-line-strong); font-weight: 500; }
.cc-trend-new { position: absolute; top: 0.7rem; right: 0.9rem; font-family: var(--cc-font-mono); font-size: 0.65rem; font-weight: 600; letter-spacing: 0.08em; padding: 0.15rem 0.45rem; border-radius: 999px; color: oklch(0.42 0.18 var(--hue, 230)); background: oklch(0.94 0.06 var(--hue, 230)); border: 1px solid oklch(0.85 0.10 var(--hue, 230)); }
.cc-trend-title { font-family: var(--cc-font-display); font-size: 1.1rem; font-weight: 500; margin-top: 0.3rem; line-height: 1.2; }
.cc-trend-cat { font-family: var(--cc-font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--cc-text-muted); margin-top: auto; }
.cc-recent-title { font-family: var(--cc-font-display); font-size: 1rem; font-weight: 500; }
.cc-recent-result { font-family: var(--cc-font-mono); font-size: 0.85rem; color: var(--cc-primary); }
.cc-recent-time { font-size: 0.72rem; color: var(--cc-text-muted); margin-top: auto; }

/* Footer */
.cc-footer { background: var(--cc-bg-alt); border-top: 1px solid var(--cc-line); padding: 3rem 0 1.5rem; margin-top: 4rem; }
.cc-footer-h { font-family: var(--cc-font-mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--cc-text-muted); margin-bottom: 0.8rem; }
.cc-footer-blurb { font-size: 0.875rem; color: var(--cc-text-muted); line-height: 1.5; max-width: 320px; }
.cc-footer-links { list-style: none; padding: 0; margin: 0; }
.cc-footer-links-3col { column-count: 3; column-gap: 1.5rem; }
.cc-footer-links-3col li { break-inside: avoid; }
@media (max-width: 575px) { .cc-footer-links-3col { column-count: 2; } }
.cc-footer-links li { padding: 0.25rem 0; font-size: 0.9rem; cursor: pointer; }
.cc-footer-links li a { color: inherit; text-decoration: none; }
.cc-footer-links li:hover { color: var(--cc-primary); }
.cc-fineprint { font-size: 0.75rem; color: var(--cc-text-muted); margin-top: 1rem; font-family: var(--cc-font-mono); }
.cc-footer-bottom { display: flex; justify-content: space-between; gap: 1rem; padding-top: 2rem; margin-top: 2rem; border-top: 1px solid var(--cc-line); font-family: var(--cc-font-mono); font-size: 0.75rem; color: var(--cc-text-muted); }

/* Topbar responsive overrides */
@media (max-width: 768px) {
  .cc-topbar > .container-xxl { flex-wrap: wrap; }
  .cc-search-wrap { max-width: none; flex-basis: 100%; order: 99; }
  .cc-kbd { display: none; }
}

/* Hero search */
.cc-hero-stack {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}

.cc-hero-stack .cc-lead { margin-inline: auto; }

.cc-hero-search {
  position: relative;
  margin: 1.5rem auto 1rem;
  max-width: 720px;
}

.cc-hero-search-input {
  width: 100%;
  padding: 1rem 1.25rem;
  font-size: 1.125rem;
  border: 1px solid var(--cc-border, oklch(0.88 0 0));
  border-radius: 12px;
  background: var(--cc-surface, #fff);
  color: inherit;
  outline: none;
  transition: border-color 120ms, box-shadow 120ms;
}

.cc-hero-search-input:focus {
  border-color: var(--cc-primary);
  box-shadow: 0 0 0 4px oklch(from var(--cc-primary) l c h / 0.18);
}

.cc-hero-search-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--cc-surface, #fff);
  border: 1px solid var(--cc-border, oklch(0.88 0 0));
  border-radius: 12px;
  box-shadow: 0 10px 30px oklch(0 0 0 / 0.08);
  z-index: 20;
  max-height: 60vh;
  overflow-y: auto;
}

.cc-hero-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

/* Atlas layout — category page subcategory strips */
.cc-atlas { display: grid; gap: 1.5rem; margin-top: 2rem; }

.cc-atlas-strip {
  background: var(--cc-surface);
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius);
  padding: 1.5rem 1.75rem 1rem;
  box-shadow: var(--cc-shadow);
  position: relative;
  transition: border-color 200ms ease;
}
.cc-atlas-strip::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  border-radius: var(--cc-radius) 0 0 var(--cc-radius);
  background: oklch(0.74 0.13 var(--hue));
  opacity: 0.7;
}
.cc-atlas-strip:hover { border-color: oklch(0.74 0.13 var(--hue)); }

.cc-atlas-head {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px dashed var(--cc-line);
}

.cc-atlas-art {
  width: 56px; height: 56px;
  border-radius: 14px;
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: oklch(0.96 0.04 var(--hue));
}
.cc-atlas-art svg { width: 40px; height: 40px; }

.cc-atlas-title-block { flex: 1 1 auto; min-width: 0; }
.cc-atlas-title-block h2 {
  margin: 0 0 0.25rem;
  font-family: var(--cc-font-display);
  font-size: 1.4rem;
  letter-spacing: -0.01em;
}
.cc-atlas-title-block h2 a { color: var(--cc-text); text-decoration: none; }
.cc-atlas-title-block h2 a:hover { color: oklch(0.55 0.13 var(--hue)); }
.cc-atlas-title-block p {
  margin: 0;
  color: var(--cc-text-muted);
  font-size: 0.95rem;
  line-height: 1.4;
}

.cc-atlas-meta {
  flex: 0 0 auto;
  text-align: right;
  font-family: var(--cc-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cc-text-muted);
  padding-top: 0.4rem;
}
.cc-atlas-meta strong { color: var(--cc-text); font-weight: 600; }

.cc-atlas-list {
  list-style: none;
  margin: 0; padding: 0.25rem 0 0;
  display: grid;
}
.cc-atlas-list a {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 2fr auto;
  gap: 1rem;
  align-items: baseline;
  padding: 0.65rem 0.5rem 0.65rem 0;
  border-bottom: 1px solid var(--cc-line);
  color: var(--cc-text);
  text-decoration: none;
  transition: padding-left 200ms ease, background 200ms ease;
}
.cc-atlas-list li:last-child a { border-bottom: 0; }
.cc-atlas-list a:hover {
  padding-left: 0.6rem;
  background: oklch(0.97 0.02 var(--hue) / 0.6);
}
.cc-atlas-row-name { font-weight: 600; font-size: 1rem; }
.cc-atlas-row-tag { color: var(--cc-text-muted); font-size: 0.92rem; line-height: 1.35; }
.cc-atlas-row-arrow {
  font-family: var(--cc-font-mono);
  color: oklch(0.55 0.13 var(--hue));
  font-size: 1.1rem;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 200ms ease, transform 200ms ease;
}
.cc-atlas-list a:hover .cc-atlas-row-arrow { opacity: 1; transform: translateX(0); }

.cc-cat-stats {
  font-family: var(--cc-font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cc-text-muted);
  margin-top: 0.5rem;
}
.cc-cat-stats strong { color: var(--cc-text); font-weight: 600; }

@media (max-width: 720px) {
  .cc-atlas-head { flex-wrap: wrap; }
  .cc-atlas-meta { width: 100%; text-align: left; padding-top: 0; }
  .cc-atlas-list a { grid-template-columns: 1fr auto; }
  .cc-atlas-row-tag { grid-column: 1 / -1; }
}

/* ── Embed snippet generator modal ──────────────────────────────────── */
.cc-embed-modal-content { height: 90vh; max-height: 900px; }
.modal-fullscreen-lg-down .cc-embed-modal-content { height: 100%; max-height: none; }

.cc-embed-modal-body {
  display: flex;
  gap: 1rem;
  padding: 0;
  overflow: hidden;
  flex: 1 1 auto;
}

.cc-embed-modal-config {
  flex: 0 0 360px;
  min-width: 0;
  overflow-y: auto;
  padding: 1rem 1.25rem 1.25rem;
  border-right: 1px solid var(--cc-line);
}

.cc-embed-modal-preview {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 1rem 1.25rem 1.25rem 0;
}

.cc-embed-preview-frame {
  flex: 1 1 auto;
  width: 100%;
  border: 1px solid var(--cc-line);
  border-radius: 8px;
  background: #fff;
  min-height: 0;
}

/* Stack vertically on small screens */
@media (max-width: 991.98px) {
  .cc-embed-modal-body { flex-direction: column; gap: 0; }
  .cc-embed-modal-config {
    flex: 0 0 auto;
    border-right: 0;
    border-bottom: 1px solid var(--cc-line);
  }
  .cc-embed-modal-preview {
    flex: 1 1 auto;
    padding: 1rem 1.25rem 1.25rem;
    min-height: 320px;
  }
}

/* Color pickers — fixed-width swatch glued to a flex text input. */
.cc-embed-color-group .form-control-color {
  flex: 0 0 2.5rem;
  width: 2.5rem;
  padding: 0.15rem;
  border-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.cc-embed-color-group .form-control-color::-webkit-color-swatch { border-radius: 4px; border: 0; }
.cc-embed-color-group .form-control-color::-moz-color-swatch { border-radius: 4px; border: 0; }
.cc-embed-color-group .form-control:not(.form-control-color) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  font-family: var(--cc-font-mono);
  font-size: 0.85rem;
}

/* Snippet panel + copy button */
.cc-embed-snippet {
  background: var(--cc-bg-alt);
  padding: 0.7rem 0.85rem;
  border-radius: 6px;
  font-size: 0.74rem;
  font-family: var(--cc-font-mono);
  white-space: pre-wrap;
  word-break: break-all;
  margin: 0;
  max-height: 9rem;
  overflow-y: auto;
  color: var(--cc-text);
}
.cc-embed-copy-btn {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
}

/* ── Footer legal links row ──────────────────────────────────────────────── */
.cc-footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .55rem;
  align-items: center;
  margin: 1.5rem 0 .75rem;
  font-size: .85rem;
  color: var(--cc-text-muted);
}
.cc-footer-legal a {
  color: var(--cc-text-muted);
  text-decoration: none;
  border-bottom: 1px dotted var(--cc-line);
}
.cc-footer-legal a:hover { color: var(--cc-text); border-bottom-color: var(--cc-text); }

/* ── Legal article pages ─────────────────────────────────────────────────── */
.cc-legal-article {
  max-width: 760px;
  margin: 2.5rem auto;
  padding: 0 1rem;
  color: var(--cc-text);
}
.cc-legal-article h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 2.4rem;
  letter-spacing: -.01em;
  margin: 0 0 .25rem;
}
.cc-legal-article .cc-legal-meta {
  color: var(--cc-text-muted);
  font-size: .9rem;
  margin: 0 0 2rem;
}
.cc-legal-article h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 1.45rem;
  margin: 2rem 0 .75rem;
  letter-spacing: -.005em;
}
.cc-legal-article p, .cc-legal-article li {
  font-size: 1rem;
  line-height: 1.65;
  margin: 0 0 1rem;
}
.cc-legal-article ul {
  padding-left: 1.4rem;
}
.cc-legal-article a {
  color: var(--cc-primary);
  border-bottom: 1px solid var(--cc-line);
  text-decoration: none;
}
.cc-legal-article a:hover {
  border-bottom-color: var(--cc-primary);
}

/* ============================================================
 * Cookie consent banner
 * ============================================================ */
.cc-cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9000;
  background: var(--cc-bg-alt);
  border-top: 1px solid var(--cc-line);
  box-shadow: 0 -8px 24px -12px rgba(0, 0, 0, .12);
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
  will-change: transform;
}
.cc-cookie-banner--visible {
  transform: translateY(0);
}
.cc-cookie-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.1rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}
.cc-cookie-text {
  flex: 1 1 320px;
  min-width: 0;
}
.cc-cookie-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 1.05rem;
  margin: 0 0 .35rem;
  color: var(--cc-text);
}
.cc-cookie-text p {
  margin: 0;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--cc-text-muted);
}
.cc-cookie-text a {
  color: var(--cc-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cc-cookie-actions {
  display: flex;
  gap: .5rem;
  flex: 0 0 auto;
}
.cc-cookie-actions .cc-btn {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .9rem;
  font-weight: 600;
  padding: .55rem 1.1rem;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.cc-cookie-actions .cc-btn-ghost {
  background: transparent;
  color: var(--cc-text);
  border-color: var(--cc-line);
}
.cc-cookie-actions .cc-btn-ghost:hover {
  border-color: var(--cc-text);
}
.cc-cookie-actions .cc-btn-primary {
  background: var(--cc-primary);
  color: #faf8f3;
  border-color: var(--cc-primary);
}
.cc-cookie-actions .cc-btn-primary:hover {
  background: var(--cc-primary-2);
  border-color: var(--cc-primary-2);
}
@media (max-width: 640px) {
  .cc-cookie-actions {
    width: 100%;
    flex-direction: column-reverse;
  }
  .cc-cookie-actions .cc-btn {
    width: 100%;
  }
}