/*
 * CalcPrism — Calculator Page Styles
 * ===================================
 * Single-column centered layout. Solid form card,
 * consistent inputs, full-width calculate button,
 * animated result sections.
 */

/* ═══════════════════════════════════════════
   Calculator Page Layout — Editorial two-column (Phase C1)
   Inputs on the left, sticky gradient result panel on the right.
   Collapses to single column below 1024px.
   ═══════════════════════════════════════════ */

.calc-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-6) 28px var(--space-16);
}

/* Legacy wrapper — retained for any lingering references. */
.calculator-page {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-6);
}

/* Hero */
.calc-hero {
  padding: 24px 0 20px;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 40px; flex-wrap: wrap;
}
.calc-hero__title-block { max-width: 640px; flex: 1 1 480px; }
.page-title {
  font-family: var(--font-display);
  font-size: clamp(38px, 5vw, 54px);
  line-height: 1.03; letter-spacing: -0.035em; font-weight: 700;
  margin: 0 0 14px; color: var(--ink);
}
.page-title .serif { color: var(--accent); font-size: 1em; }
.calc-hero .subtitle {
  font-size: 17px; color: var(--ink-2, var(--ink-2));
  max-width: 560px; margin: 0;
}

/* Optional meta chip row (e.g. "Live rates • 6.8% avg") */
.hero-meta {
  display: flex; gap: 22px; flex-wrap: wrap;
  padding: 16px 20px; border-radius: var(--radius);
  background: var(--surface, var(--surface));
  border: 1px solid var(--line, var(--line));
  box-shadow: var(--shadow-sm);
  min-width: 260px;
}
.hero-meta-item { display: flex; flex-direction: column; gap: 2px; }
.hero-meta-item .label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-3, var(--ink-3)); font-weight: 600;
}
.hero-meta-item .value { font-size: 15px; font-weight: 600; white-space: nowrap; }
.hero-meta-item .value.dot::before {
  content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent-2, var(--accent));
  margin-right: 7px; vertical-align: middle;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-2, var(--accent)) 25%, transparent);
}

/* Two-column main grid */
.main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
  gap: 28px;
  padding: 12px 0 8px;
}
.main-grid__left { min-width: 0; }
.main-grid__right { min-width: 0; }
/* Single-column variant — used for calcs that own their result UI inside
   the inputs card (e.g. basic calculator) and don't render a right rail. */
.main-grid--single { grid-template-columns: 1fr; }
/* Below-fold cards (amortization tables, comparisons, viz) live in a
   sibling wrapper of `.inputs-panel`, so the global `.card + .card`
   margin doesn't reach them. Restore the visual gap below the inputs. */
.main-grid__below-fold > .card:first-child,
.main-grid__below-fold > section.card:first-child { margin-top: 20px; }

/* .inputs-panel is a plain wrapper — the `<section class="card">` inside the
   per-calc fragment provides the visual chrome. */
.inputs-panel { min-width: 0; }
/* Legacy per-calc `.calc-form` renders inside `.inputs-panel`; strip its own chrome
   so we don't get a card-inside-a-card effect. */
.inputs-panel .calc-form {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
}
/* When a section has both `.card` and `.calc-form` (e.g. business-valuation),
   the strip rule above also clears the `.card` chrome. Restore it — `.card-header`
   and `.card-body` provide the inner padding, so outer padding/margin stay 0. */
.inputs-panel .calc-form.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* Right column — sticky on desktop, inline on mobile. */
.result-panel {
  position: sticky;
  top: 88px;
  align-self: start;
}

/* Gradient result hero (placeholder shell for C1; C2 calcs override content) */
.result-hero {
  background: linear-gradient(135deg, #1e2d28 0%, #2e5d4e 55%, #4a8672 100%);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 30px 28px 26px;
  position: relative; overflow: hidden;
  box-shadow: var(--shadow);
}
.result-hero::before {
  content: ''; position: absolute; top: -40%; right: -30%;
  width: 360px; height: 360px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .14) 0%, transparent 65%);
  pointer-events: none;
}
.result-hero::after {
  content: ''; position: absolute; bottom: -50%; left: -20%;
  width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .06) 0%, transparent 65%);
  pointer-events: none;
}
.result-hero__inner { position: relative; z-index: 1; }
.result-eyebrow {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em;
  color: rgba(255, 255, 255, .7); font-weight: 600;
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.result-hero .pulse-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #7fe0a8;
  box-shadow: 0 0 0 3px rgba(127, 224, 168, .25);
  animation: pulse 2s ease-in-out infinite;
}
.result-hero .result-value {
  font-size: 56px; font-weight: 700; line-height: 1; letter-spacing: -0.035em;
  margin: 0 0 8px; font-variant-numeric: tabular-nums;
  color: #fff;
  -webkit-text-fill-color: #fff;
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
}
.result-hero .result-value > span { color: inherit; -webkit-text-fill-color: inherit; }
.result-hero .result-hint {
  font-size: 13px; color: rgba(255, 255, 255, .7); margin-top: 4px;
}

/* Responsive — collapse to single column, un-stick result panel. */
@media (max-width: 1023px) {
  .main-grid { grid-template-columns: 1fr; }
  .result-panel { position: static; top: auto; }
  .calc-hero { gap: 20px; padding: 16px 0 12px; }
  .hero-meta { width: 100%; }
}
@media (max-width: 560px) {
  .calc-page { padding: var(--space-4) var(--space-4) var(--space-12); }
  .inputs-panel { padding: 18px 16px; }
  .result-hero { padding: 24px 22px 22px; }
  .result-hero .result-value { font-size: 44px; }
}

.calc-breadcrumb-row { margin-bottom: var(--space-6); }
.calc-utils { display: flex; gap: var(--space-2); }
.calc-utils .btn { padding: 6px; border-radius: var(--radius-full); }

/* Header */
.calc-title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--font-extrabold);
  color: var(--ink);
  margin: 0 0 var(--space-2);
}
.calc-description {
  font-size: var(--text-base);
  color: var(--ink-2);
  line-height: var(--leading-relaxed);
  margin: 0 0 var(--space-6);
}

/* ═══════════════════════════════════════════
   Form Card — white bg, border, shadow, padding
   ═══════════════════════════════════════════ */
.calc-form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-md);
  margin-bottom: var(--space-8);
}

/* ═══════════════════════════════════════════
   Form Layout — stacked labels, grid collapse
   ═══════════════════════════════════════════ */
.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.form-group {
  display: flex;
  flex-direction: column;
}
.form-group label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--ink);
  margin-bottom: var(--space-2);
}
.label-optional {
  font-weight: var(--font-regular);
  color: var(--ink-3);
}

/* ═══════════════════════════════════════════
   Input Fields — 44px, clear borders, focus ring, 16px
   ═══════════════════════════════════════════ */
.form-group input[type="number"],
.form-group input[type="text"],
.form-group input[type="date"],
.form-group input[type="email"],
.form-group input[type="url"],
.form-group select,
.form-group textarea,
.calc-form .input {
  width: 100%;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--ink);
  background: var(--surface);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
  box-sizing: border-box;
}
.form-group textarea { min-height: auto; resize: vertical; line-height: 1.7; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.calc-form .input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ═══════════════════════════════════════════
   Input Groups — connected unit labels
   ═══════════════════════════════════════════ */
.input-group { display: flex; align-items: stretch; }
.input-group .input { flex: 1; min-width: 0; }
.input-group .input:not(.input--has-unit-left):not(.input--has-unit-both) {
  border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: none;
}
.input--has-unit-left { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: none; }
.input--has-unit-both { border-radius: 0; border-left: none; border-right: none; }
.input-group .input--has-unit-right {
  border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: none;
  border-top-left-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md);
}
.input-unit {
  display: flex; align-items: center; padding: 0 12px;
  background: var(--surface-2); border: 1px solid var(--line-strong);
  font-size: var(--text-sm); font-weight: var(--font-medium);
  color: var(--ink-2); white-space: nowrap;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.input-unit--left { border-radius: var(--radius-md) 0 0 var(--radius-md); border-right: none; }

.form-divider { height: 1px; background: var(--line-strong); border: none; margin: var(--space-5) 0; }
.form-hint { display: block; font-size: var(--text-xs); color: var(--ink-3); margin-top: var(--space-1); }
.dp-mode-toggle { display: flex; gap: var(--space-2); margin-bottom: var(--space-2); }

/* ═══════════════════════════════════════════
   Calculate Button — full-width, prominent
   ═══════════════════════════════════════════ */
.calc-btn {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  width: 100%; min-height: 48px; padding: 14px 32px;
  border: none; border-radius: var(--radius-full);
  background: var(--accent); color: #ffffff;
  font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--font-bold);
  cursor: pointer;
  transition: background var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  margin-top: var(--space-4);
}
.calc-btn:hover { background: var(--accent-2); box-shadow: 0 6px 24px rgba(0,0,0,.2); transform: translateY(-1px); }
.calc-btn:active { transform: scale(0.98); }
.calc-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: var(--shadow-sm); }
.calc-btn.is-loading { pointer-events: none; color: transparent; position: relative; }
.calc-btn.is-loading::after {
  content: ''; position: absolute; width: 22px; height: 22px;
  border: 3px solid rgba(255,255,255,.3); border-top-color: #fff;
  border-radius: 50%; animation: btn-spin 600ms linear infinite;
}
.calc-btn--secondary {
  background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--line); box-shadow: none;
}
.calc-btn--secondary:hover { background: var(--surface-2); box-shadow: var(--shadow-sm); }

/* ═══════════════════════════════════════════
   Validation Errors
   ═══════════════════════════════════════════ */
.form-error { font-size: var(--text-sm); color: var(--rose); margin-top: var(--space-1); }
.calc-error {
  color: var(--rose);
  background: rgba(220,38,38,.08);
  border: 1px solid rgba(220,38,38,.25);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}
.input-error, .form-group.has-error input, .form-group.has-error select { border-color: var(--rose); }
.input-error:focus, .form-group.has-error input:focus, .form-group.has-error select:focus {
  box-shadow: 0 0 0 3px rgba(220,38,38,.15); border-color: var(--rose);
}

/* ═══════════════════════════════════════════
   Results — hidden by default, revealed via .is-visible
   ═══════════════════════════════════════════ */
.calc-results {
  margin-bottom: var(--space-8);
  display: none;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}
.calc-results.is-visible {
  display: block;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  animation: results-reveal 300ms ease-out;
}
@keyframes results-reveal {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.result-primary {
  padding: var(--space-6); background: var(--accent-soft);
  border-left: 5px solid var(--accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin-bottom: var(--space-6);
}
.result-primary .result-label { font-size: var(--text-sm); font-weight: var(--font-regular); color: var(--ink-2); margin-bottom: var(--space-2); }
.result-primary .result-value {
  font-size: var(--text-3xl); font-weight: var(--font-bold);
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  color: var(--accent); line-height: 1.2;
  background: none; -webkit-text-fill-color: unset; -webkit-background-clip: unset;
}

.result-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-6); margin-bottom: var(--space-6); }
.result-card { padding: var(--space-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); text-align: center; box-shadow: var(--shadow-sm); }
.result-card .card-value { font-size: var(--text-2xl); font-weight: var(--font-bold); font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--accent); margin-bottom: var(--space-1); background: none; -webkit-text-fill-color: unset; }
.result-card .card-label { font-size: var(--text-xs); color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; }
.result-card.is-solved { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-sm); }

.calc-subsection-heading { font-size: var(--text-lg); font-weight: var(--font-semibold); color: var(--ink); margin-top: var(--space-6); margin-bottom: var(--space-3); }

.result-info-box {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-4) var(--space-5); background: var(--accent-soft);
  border-radius: var(--radius-md); margin-bottom: var(--space-4);
  font-size: var(--text-sm); color: var(--ink-2); line-height: var(--leading-normal);
}
.result-info-box svg { flex-shrink: 0; color: var(--accent); margin-top: 2px; }
.result-note { font-size: var(--text-sm); color: var(--ink-2); line-height: var(--leading-normal); }

.live-counter-box {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-5); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-md); margin-bottom: var(--space-4);
}
.live-counter-label { font-size: var(--text-sm); color: var(--ink-2); }
.live-counter-value { font-size: var(--text-2xl); font-weight: var(--font-bold); font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--accent); }
.live-counter-unit { font-size: var(--text-sm); color: var(--ink-3); margin-left: var(--space-1); }

/* Breakdown Table */
.result-breakdown { margin-bottom: var(--space-8); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.breakdown-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.breakdown-table th { text-align: left; padding: var(--space-3); font-weight: var(--font-semibold); color: var(--ink-2); border-bottom: 2px solid var(--line-strong); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .05em; }
.breakdown-table td { padding: var(--space-3); border-bottom: 1px solid var(--line); color: var(--ink-2); }
.breakdown-table tr:nth-child(even) td { background-color: var(--accent-soft); }
.breakdown-table tr:nth-child(odd) td { background-color: var(--surface); }
.breakdown-table td:last-child { font-variant-numeric: tabular-nums; font-family: var(--font-mono); font-weight: var(--font-medium); }
.breakdown-table td:not(:first-child) { text-align: right; }
.breakdown-table th:not(:first-child) { text-align: right; }
.breakdown-total { font-weight: var(--font-bold); }
.breakdown-total td { border-top: 2px solid var(--line-strong); }

/* Amortization / generic data table — used by paper-size series table and others. */
.amortization-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.amortization-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.amortization-table th {
  text-align: left;
  padding: var(--space-3);
  font-weight: var(--font-semibold);
  color: var(--ink-2);
  border-bottom: 2px solid var(--line-strong);
  text-transform: uppercase;
  font-size: var(--text-xs);
  letter-spacing: .05em;
  white-space: nowrap;
}
.amortization-table td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  white-space: nowrap;
}
.amortization-table tr:nth-child(even) td { background-color: var(--accent-soft); }
.amortization-table tr:nth-child(odd)  td { background-color: var(--surface); }
.amortization-table th.num,
.amortization-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.amortization-table td.mono { font-family: var(--font-mono); }
.amortization-table tbody tr:hover td { background-color: var(--accent-soft); }
.result-summary { display: flex; justify-content: space-between; align-items: center; padding: var(--space-4); background: var(--accent-soft); border-radius: var(--radius-sm); margin-top: var(--space-4); font-weight: var(--font-semibold); }
.amort-heading { font-size: var(--text-lg); font-weight: var(--font-semibold); margin-bottom: var(--space-3); }
.amort-toggle { margin-top: var(--space-3); width: 100%; display: none; }

/* Chart */
.result-chart { margin-bottom: var(--space-8); padding: var(--space-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); max-width: 100%; overflow: hidden; }
.donut-chart-wrapper { display: flex; align-items: center; justify-content: center; gap: var(--space-8); max-width: 100%; }
.donut-legend { display: flex; flex-direction: column; gap: var(--space-2); }
.donut-legend-item { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--ink-2); }
.donut-legend-dot { width: 10px; height: 10px; border-radius: var(--radius-full); flex-shrink: 0; }
.donut-legend-value { font-family: var(--font-mono); font-weight: var(--font-medium); color: var(--ink); margin-left: var(--space-1); }
.donut-legend-pct { font-size: var(--text-xs); color: var(--ink-3); margin-left: var(--space-1); }

/* BMI scale */
.bmi-scale { margin: var(--space-6) 0; max-width: 100%; overflow: visible; position: relative; padding-top: var(--space-6); }
.bmi-scale-bar {
  height: 12px; border-radius: var(--radius-full); position: relative; margin-bottom: var(--space-4);
  background: linear-gradient(to right,
    #3B82F6 0%, #3B82F6 11.67%,
    #22C55E 11.67%, #22C55E 33.33%,
    #F59E0B 33.33%, #F59E0B 50%,
    #F97316 50%, #F97316 66.67%,
    #EF4444 66.67%, #EF4444 83.33%,
    #DC2626 83.33%, #DC2626 100%
  );
}
.bmi-scale-marker { position: absolute; top: -4px; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); border: 3px solid var(--ink); box-shadow: var(--shadow-md); transform: translateX(-50%); transition: left var(--transition-base); z-index: 1; }
.bmi-scale-marker-label { position: absolute; top: -22px; transform: translateX(-50%); font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--ink); background: var(--surface); padding: 2px 6px; border-radius: var(--radius-sm); transition: left var(--transition-base); box-shadow: var(--shadow-sm); white-space: nowrap; }
.bmi-scale-labels { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--ink-3); margin-top: var(--space-1); }
.bmi-disclaimer { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-left: 3px solid var(--line-strong); border-radius: 0 var(--radius-md) var(--radius-md) 0; margin-top: var(--space-6); font-size: var(--text-sm); color: var(--ink-3); line-height: var(--leading-normal); background: var(--surface); }
.bmi-disclaimer svg { flex-shrink: 0; color: var(--ink-3); margin-top: 1px; }
.bmi-classification { font-size: var(--text-lg); font-weight: var(--font-semibold); margin-top: var(--space-1); }

/* Diagram */
.calc-diagram { display: flex; justify-content: center; padding: var(--space-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); margin-bottom: var(--space-6); max-width: 100%; overflow: hidden; }
.calc-diagram svg { max-width: 100%; height: auto; }

/* Formula */
.calc-formula { margin-top: var(--space-8); margin-bottom: var(--space-8); }
.calc-formula h3,
.formula-heading {
  display: flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--font-semibold);
  color: var(--ink); margin: 0 0 var(--space-4);
}
.formula-heading svg { color: var(--accent); flex-shrink: 0; }
/* Editorial shared section rhythm + headings used by the components below. */
section.section { margin-top: 28px; }
.section-title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: 18px;
  color: var(--ink);
}
.section-title .serif { color: var(--accent); font-size: 1em; }

.calc-section-heading {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Editorial formula card — centered equation + numbered steps.
   Used by components/formula_section.html.twig. */
.formula-section { margin-bottom: 28px; }
.formula-card {
  position: relative;
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px 28px 28px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.formula-card::before { content: none; }
.formula-eq,
.formula-box,
.formula-display {
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px;
  font-weight: 500;
  padding: 18px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: inline-block;
  margin: 4px 0 20px;
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
  font-variant-numeric: tabular-nums;
}
.formula-box strong { color: var(--accent); font-weight: 600; }

/* Variables list — dictionary-style with subtle key badges. */
.formula-vars {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 20px;
  row-gap: 10px;
  margin: 8px auto 20px;
  padding: 16px 20px;
  max-width: 640px;
  text-align: left;
  font-size: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.formula-vars dt {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  color: var(--accent);
  font-size: 13px;
  padding: 2px 8px;
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  align-self: start;
  justify-self: start;
  line-height: 1.5;
  white-space: nowrap;
}
.formula-vars dd {
  margin: 0;
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.55;
  align-self: center;
}

/* Subheading between the vars block and the worked-example steps. */
.formula-subheading {
  position: relative;
  display: inline-block;
  margin: 20px auto 14px;
  padding: 4px 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
}

/* Numbered worked-example steps — each step is a chip-like card with a
   circular counter. Populated live by calculator JS. */
.formula-steps {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 640px;
  text-align: left;
  counter-reset: formula-step;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.formula-steps li {
  counter-increment: formula-step;
  position: relative;
  padding: 12px 16px 12px 46px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.formula-steps li::before {
  content: counter(formula-step);
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.formula-steps li:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 6px rgba(46, 93, 78, .08);
}
.formula-steps li:last-child {
  background: var(--accent-soft);
  border-color: var(--accent);
  font-weight: 500;
}
.formula-steps li:last-child::before {
  background: var(--accent);
  color: #fff;
}
.formula-steps .highlight {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  color: var(--accent);
  padding: 1px 6px;
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
}
.formula-steps li:last-child .highlight {
  background: var(--surface);
  color: var(--accent);
}

@media (max-width: 640px) {
  .formula-card { padding: 24px 16px 20px; }
  .formula-vars {
    grid-template-columns: 1fr;
    padding: 14px 16px;
    row-gap: 4px;
  }
  .formula-vars dt { margin-top: 8px; }
  .formula-vars dt:first-of-type { margin-top: 0; }
  .formula-eq, .formula-box, .formula-display {
    font-size: 18px;
    padding: 14px 16px;
  }
}

/* Mortgage-style composed equation (fraction + operators). */
.formula-eq--mortgage {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 20px 28px;
  letter-spacing: 0.01em;
}
.formula-eq--mortgage .formula-token { font-style: italic; }
.formula-eq--mortgage .formula-op {
  color: var(--ink-3);
  font-weight: 500;
  font-style: normal;
}
.formula-frac {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
  text-align: center;
  font-style: italic;
}
.formula-frac__num,
.formula-frac__den { padding: 2px 8px; }
.formula-frac__bar {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--ink-2);
  border-radius: 1px;
  margin: 2px 0;
}
.formula-note {
  max-width: 560px;
  margin: 18px auto 0;
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.55;
}

.formula-subsection {
  max-width: 560px;
  margin: 22px auto 0;
}
.formula-subsection__heading {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.formula-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.formula-table th,
.formula-table td {
  padding: 6px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.08));
}
.formula-table thead th {
  font-weight: 600;
  color: var(--ink-2);
  background: var(--surface-2, transparent);
}
.formula-table tbody tr:last-child td { border-bottom: 0; }
.formula-table td:first-child,
.formula-table th:first-child { font-variant-numeric: tabular-nums; font-weight: 500; }

.steps,
.steps-container {
  list-style: none;
  padding: 0;
  margin: 18px auto 0;
  text-align: left;
  max-width: 560px;
  counter-reset: step;
}
.steps li,
.steps-container li {
  counter-increment: step;
  padding: 12px 16px 12px 48px;
  position: relative;
  font-size: 14px;
  color: var(--ink-2);
  display: block;
  gap: 0;
  line-height: 1.55;
}
.steps li::before,
.steps-container li::before {
  content: counter(step);
  position: absolute;
  left: 14px;
  top: 10px;
  width: 24px;
  height: 24px;
  min-width: 24px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
  font-size: 12px;
  display: grid;
  place-items: center;
}
.steps li code,
.steps-container li code {
  background: var(--surface);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  border: 1px solid var(--line);
  color: var(--ink);
}
.highlight { font-weight: 600; color: var(--accent); font-family: 'JetBrains Mono', monospace; }

/* Editorial related calculators — colored icon tile + name + sub-label.
   Used by components/related_calculators.html.twig. */
.related-section { margin-bottom: 28px; }
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 960px) { .related-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .related-grid { grid-template-columns: 1fr; } }
.related-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
  display: flex;
  align-items: center;
  gap: 12px;
}
.related-card:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  transform: translateY(-1px);
}
.related-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.related-icon.green  { background: var(--accent-soft); color: var(--accent); }
.related-icon.amber  { background: var(--amber-soft);  color: var(--amber); }
.related-icon.blue   { background: var(--blue-soft);   color: var(--blue); }
.related-icon.rose   { background: var(--rose-soft);   color: var(--rose); }
.related-icon.violet { background: var(--violet-soft); color: var(--violet); }
.related-icon.teal   { background: var(--teal-soft);   color: var(--teal); }
.related-title { font-size: 14px; font-weight: 600; color: var(--ink); }
.related-sub { font-size: 12px; color: var(--ink-3); }
.related-arrow {
  margin-left: auto;
  color: var(--ink-3);
  font-size: 18px;
  line-height: 1;
  transition: transform .15s ease, color .15s ease;
}
.related-card:hover .related-arrow {
  color: var(--accent);
  transform: translateX(3px);
}

/* Editorial FAQ — native <details>/<summary>, CSS-only chevron rotation.
   Used by components/faq_accordion.html.twig. */
.faq-section { margin-bottom: 28px; }
.faq {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 6px 22px;
}
.faq details {
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
}
.faq details:last-of-type { border-bottom: 0; }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::marker { content: ''; }
.faq .chev {
  color: var(--ink-3);
  transition: transform .2s ease;
  flex-shrink: 0;
}
.faq details[open] > summary .chev { transform: rotate(90deg); }
.faq details[open] > summary { color: var(--ink); }
.faq p {
  color: var(--ink-2);
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.65;
}

/* Split Layout */
.calc-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin-bottom: var(--space-8); }
.calc-live { padding: var(--space-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }

/* Content Enrichment */
.calc-section {
  margin-top: var(--space-16);
  padding-top: var(--space-10);
  border-top: 1px solid var(--line);
}
.calc-section-heading {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-xl); font-weight: var(--font-semibold);
  color: var(--ink); margin-bottom: var(--space-6);
}
.calc-section-heading svg { color: var(--accent); flex-shrink: 0; }
.calc-prose { font-size: var(--text-base); color: var(--ink-2); line-height: 1.7; max-width: 720px; }
.calc-prose p { margin-bottom: var(--space-4); }

/* Editorial worked examples — tinted tag + title + CTA.
   Used by components/worked_examples.html.twig. */
.examples-section { margin-bottom: 28px; }
.examples-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 720px) { .examples-grid { grid-template-columns: 1fr; } }
.example,
.example-card {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  text-align: left;
  font-family: inherit;
  color: inherit;
  display: block;
}
.example:hover,
.example-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.example-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}
.example-tag.tag-green  { background: var(--accent-soft); color: var(--accent); }
.example-tag.tag-amber  { background: var(--amber-soft);  color: var(--amber); }
.example-tag.tag-rose   { background: var(--rose-soft);   color: var(--rose); }
.example-tag.tag-blue   { background: var(--blue-soft);   color: var(--blue); }
.example-tag.tag-violet { background: var(--violet-soft); color: var(--violet); }
.example-tag.tag-teal   { background: var(--teal-soft);   color: var(--teal); }
.example h3,
.example-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 6px;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.example p,
.example-desc {
  font-size: 13px;
  color: var(--ink-3);
  margin: 0 0 14px;
  line-height: 1.5;
}
.example-cta {
  font-size: 13px;
  color: var(--accent);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap .15s ease;
}
.example:hover .example-cta,
.example-card:hover .example-cta { gap: 8px; }

/* Editorial reference table — table.data styling with striped rows + monospace numerics.
   Used by components/reference_table.html.twig. */
.reference-section { margin-bottom: 28px; }
.reference-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 6px 14px;
  overflow: hidden;
}
.calc-table-wrapper,
.calc-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
table.data th {
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}
table.data th:last-child,
table.data td:last-child { text-align: right; }
table.data td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}
table.data tbody tr:nth-child(even) td { background: var(--surface-2); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover td { background: color-mix(in srgb, var(--accent-soft) 60%, var(--surface-2)); }
table.data td:last-child,
table.data th:last-child,
table.data td.num {
  font-family: 'JetBrains Mono', monospace;
}

/* Editorial tips grid — icon tile + text in surface-2 cards.
   Used by components/tips_section.html.twig. */
.tips-section { margin-bottom: 28px; }
.tips-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (max-width: 720px) { .tips-grid { grid-template-columns: 1fr; } }
.tip {
  padding: 18px;
  border-radius: var(--radius);
  background: var(--surface-2);
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.tip-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--surface);
  display: grid;
  place-items: center;
  color: var(--accent);
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}
.tip-text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
}
.tip-text strong { color: var(--ink); font-weight: 600; }

/* ═══════════════════════════════════════════
   Tab List & Panels
   ═══════════════════════════════════════════ */
.tab-list { display: flex; gap: var(--space-2); padding: 0; margin-bottom: var(--space-4); }
.tab-item { flex: 1; padding: 8px 16px; border: 1.5px solid var(--accent); border-radius: var(--radius-full); font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--accent); background: var(--surface); cursor: pointer; transition: all var(--transition-fast); text-align: center; }
.tab-item:hover { background: var(--accent-soft); }
.tab-item.is-active { background: var(--accent); color: #ffffff; border-color: var(--accent); box-shadow: var(--shadow-sm); }
.tab-item.is-active:hover { background: var(--accent-2); border-color: var(--accent-2); }
.tab-panel { display: none; }
.tab-panel.is-active { display: block; }
.tab-description { font-size: var(--text-sm); color: var(--ink-2); margin-bottom: var(--space-4); }

/* ═══════════════════════════════════════════
   BMI-specific
   ═══════════════════════════════════════════ */
.toggle-group { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; margin-left: var(--space-2); vertical-align: middle; }
.toggle-btn { padding: var(--space-1) var(--space-3); font-size: var(--text-xs); font-weight: var(--font-medium); background: var(--surface); color: var(--ink-2); border: none; cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast); }
.toggle-btn.is-active { background: var(--accent); color: #fff; }
.toggle-btn:hover:not(.is-active) { background: var(--surface-2); }
.ftin-inputs { display: flex; gap: var(--space-2); align-items: center; }
.ftin-inputs input { flex: 1; }
.ftin-label { font-size: var(--text-sm); color: var(--ink-3); white-space: nowrap; }
.radio-group { display: flex; gap: var(--space-4); margin-top: var(--space-2); }
.radio-label { display: flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); color: var(--ink); cursor: pointer; }
.bmi-class-table { width: 100%; border-collapse: collapse; margin-top: var(--space-4); margin-bottom: var(--space-4); font-size: var(--text-sm); }
.bmi-class-table th { text-align: left; font-weight: var(--font-semibold); color: var(--ink-2); padding: var(--space-2) var(--space-3); border-bottom: 2px solid var(--line); }
.bmi-class-table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); }
.bmi-class-row.is-active { font-weight: var(--font-semibold); }
.bmi-class-row.is-active td { background: color-mix(in srgb, var(--active-color, var(--accent)) 10%, transparent); }
.color-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: var(--space-2); vertical-align: middle; }

/* ═══════════════════════════════════════════
   Quadratic Equation
   ═══════════════════════════════════════════ */
.quadratic-equation-display { display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap; font-family: var(--font-mono); font-size: var(--text-lg); color: var(--ink-2); margin-bottom: var(--space-4); }
.quad-input { width: 72px; text-align: center; font-family: var(--font-mono); }
.quad-term { display: inline-flex; align-items: center; gap: 2px; }
.quad-op { padding: 0 var(--space-1); }
.root-type-label { font-size: var(--text-sm); font-weight: var(--font-semibold); margin-top: var(--space-2); display: inline-block; padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); }
.root-type-label.root-type-two-real { background: rgba(34, 197, 94, 0.12); color: var(--accent); }
.root-type-label.root-type-one-real { background: rgba(245, 158, 11, 0.12); color: var(--amber); }
.root-type-label.root-type-complex { background: rgba(239, 68, 68, 0.12); color: var(--rose); }
.disc-badge { display: inline-block; padding: var(--space-1) var(--space-3); border-radius: var(--radius-md); font-weight: var(--font-semibold); font-size: var(--text-lg); margin-bottom: var(--space-1); }
.disc-badge.disc-positive { background: rgba(34, 197, 94, 0.15); color: var(--accent); }
.disc-badge.disc-zero { background: rgba(245, 158, 11, 0.15); color: var(--amber); }
.disc-badge.disc-negative { background: rgba(239, 68, 68, 0.15); color: var(--rose); }
.disc-description { font-size: var(--text-xs); margin-top: var(--space-1); }

/* ═══════════════════════════════════════════
   JSON Formatter
   ═══════════════════════════════════════════ */
.json-toolbar { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); font-size: var(--text-sm); color: var(--ink-2); }
.json-textarea { min-height: 200px; font-family: var(--font-mono); font-size: var(--text-sm); resize: vertical; }
.json-output-pre { min-height: 200px; padding: var(--space-4); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-md); font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink); overflow: auto; white-space: pre-wrap; word-break: break-all; margin: 0; position: relative; }
.json-output-label { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--ink-2); }
.json-status { font-size: var(--text-sm); margin-top: var(--space-2); }
.json-status-valid { color: var(--accent); }
.json-status-error { color: var(--rose); }
.json-error-block { padding: var(--space-4); background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.3); border-radius: var(--radius-md); color: var(--rose); font-family: var(--font-mono); font-size: var(--text-sm); }
.json-error-block .json-error-title { font-weight: var(--font-bold); margin-bottom: var(--space-1); }
.json-error-block .json-error-line { color: var(--ink-2); font-size: var(--text-xs); margin-top: var(--space-1); }
.json-key { color: #0F766E; font-weight: var(--font-semibold); }
.json-string { color: #16A34A; }
.json-number { color: #7C3AED; }
.json-boolean { color: #EA580C; }
.json-null { color: #DC2626; }
.checkbox-label { display: inline-flex; align-items: center; gap: var(--space-1); cursor: pointer; }

/* ═══════════════════════════════════════════
   Word Counter
   ═══════════════════════════════════════════ */
.wc-stats-bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-bottom: var(--space-3); }
.wc-stat-card { padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); text-align: center; }
.wc-stat-value { font-size: var(--text-xl); font-weight: var(--font-bold); font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--accent); }
.wc-stat-label { font-size: var(--text-xs); color: var(--ink-3); text-transform: uppercase; letter-spacing: .03em; }
.wc-details-row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); justify-content: center; margin-bottom: var(--space-6); padding: var(--space-2) 0; }
.wc-detail-item { font-size: var(--text-sm); color: var(--ink-2); white-space: nowrap; }
.wc-detail-value { font-weight: var(--font-semibold); font-family: var(--font-mono); color: var(--ink); }
.wc-textarea { min-height: 220px; }
.wc-keywords { margin-top: var(--space-4); padding: var(--space-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); }
.wc-keywords-heading { font-weight: var(--font-semibold); font-size: var(--text-sm); color: var(--ink-2); margin-bottom: var(--space-2); }
.wc-placeholder { font-size: var(--text-sm); color: var(--ink-3); }

/* ═══════════════════════════════════════════
   Color Converter
   ═══════════════════════════════════════════ */

/* --- Input side --- */
/* Unified picker pill: [ swatch | text input | eyedropper ] inside one .input-wrap */
.cc-picker-row { gap: 0; padding: 4px; margin-bottom: var(--space-2); }
.cc-picker-row .cc-picker-swatch {
  position: relative; flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  cursor: pointer; overflow: hidden;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow 0.15s, transform 0.1s;
}
.cc-picker-row .cc-picker-swatch:hover { box-shadow: inset 0 0 0 2px var(--accent); }
.cc-picker-row .cc-picker-swatch:active { transform: scale(0.96); }
.cc-color-input {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  padding: 0; margin: 0;
  border: 0; cursor: pointer;
  background: transparent;
  -webkit-appearance: none;
}
.cc-color-input::-webkit-color-swatch-wrapper { padding: 0; }
.cc-color-input::-webkit-color-swatch { border: none; border-radius: var(--radius-sm); }
.cc-color-input::-moz-color-swatch { border: none; border-radius: var(--radius-sm); }
.cc-color-input--tiny { width: 36px; height: 36px; }
.cc-picker-row .cc-text-input {
  flex: 1; min-width: 0;
  padding: 0 12px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 15px; font-weight: 500;
  color: var(--ink);
  background: transparent;
  border: 0; outline: none;
}
.cc-picker-row .cc-text-input::placeholder { color: var(--ink-3); font-weight: 400; }
.cc-eyedropper-btn {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  padding: 0; margin: 0;
  border: 0; border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  font-size: 18px; line-height: 1;
  transition: background 0.15s, color 0.15s;
}
.cc-eyedropper-btn:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.cc-eyedropper-btn:active { transform: scale(0.94); }

/* Channel-tinted slider tracks — visual only. */
.slider-wrap.cc-slider--r input[type="range"] { background: linear-gradient(to right, #000, #f00); }
.slider-wrap.cc-slider--g input[type="range"] { background: linear-gradient(to right, #000, #0f0); }
.slider-wrap.cc-slider--b input[type="range"] { background: linear-gradient(to right, #000, #00f); }
.slider-wrap.cc-slider--h input[type="range"] {
  background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
}

/* Palette strip */
.cc-palette-strip { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-1); }
.cc-swatch-chip {
  position: relative;
  width: 40px; height: 40px; padding: 0; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius-md);
  background-clip: padding-box;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.cc-swatch-chip:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); z-index: 1; }
.cc-swatch-chip.is-current { outline: 2px solid var(--accent); outline-offset: 2px; }
.cc-swatch-chip-label {
  position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%);
  font-size: 10px; font-weight: 600; color: rgba(0,0,0,.6);
  background: rgba(255,255,255,.82); padding: 0 4px; border-radius: 3px;
  pointer-events: none;
}

/* Harmonies */
.cc-harmonies { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-1); }
.cc-harmony { display: flex; align-items: center; gap: var(--space-3); }
.cc-harmony-label { width: 72px; flex-shrink: 0; font-size: var(--text-xs); color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.cc-harmony-row { display: flex; gap: var(--space-1); }
.cc-empty { font-size: var(--text-sm); color: var(--ink-3); padding: var(--space-2) 0; }

/* --- Result hero with embedded swatch --- */
.cc-hero {
  background: none;
  padding: 0;
  overflow: hidden;
  box-shadow: var(--shadow);
  color: inherit;
}
.cc-hero::before,
.cc-hero::after { display: none; }
.cc-hero-swatch {
  position: relative;
  width: 100%;
  min-height: 180px;
  background-size: auto, 16px 16px;
  display: flex; align-items: flex-end;
  padding: var(--space-5);
}
.cc-hero-preview {
  display: flex; align-items: baseline; gap: var(--space-4);
  width: 100%;
  text-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.cc-hero-preview-lg { font-size: 44px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.cc-hero-preview-sm { font-size: var(--text-sm); opacity: .9; }
.cc-hero-body {
  padding: 22px 26px 26px;
  background: var(--surface);
  color: var(--ink);
  position: relative; z-index: 1;
}
.cc-hero-body .result-eyebrow { color: var(--ink-3); }
/* Override -webkit-text-fill-color too — the parent .result-hero rule sets it
   to #fff for the dark-gradient hero, which would otherwise leak through here. */
.cc-hero-body .result-value { color: var(--ink); -webkit-text-fill-color: var(--ink); font-size: 34px; }
.cc-hero-body .result-value > span { color: var(--ink); -webkit-text-fill-color: var(--ink); }
.cc-hero-body .result-tagline { color: var(--ink-2); }
.cc-hero-body .result-sub-label { color: var(--ink-3); }
.cc-hero-body .result-sub-value { color: var(--ink); }
.cc-closest-badge {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--ink-2);
  margin-left: auto;
}

/* --- Format tabs card --- */
.cc-formats-card .card-header { justify-content: space-between; }
.cc-formats-card .chip-row--sm .chip { padding: 4px 10px; font-size: 12px; }
.cc-format-group { display: flex; flex-direction: column; gap: var(--space-2); }
.cc-format-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-md); font-size: var(--text-sm); }
.cc-format-label { font-weight: var(--font-semibold); color: var(--ink-2); min-width: 64px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.cc-format-value { flex: 1; font-family: var(--font-mono, monospace); color: var(--ink); word-break: break-all; min-height: 1.4em; }
.cc-copy-btn {
  flex-shrink: 0;
  padding: 4px 10px;
  font-size: 11px; font-weight: 600;
  background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.cc-copy-btn:hover { background: var(--accent-soft); color: var(--ink); border-color: var(--accent); }
.cc-copy-btn.is-copied { background: var(--accent); color: #fff; border-color: var(--accent); }

/* --- Contrast panel --- */
.cc-contrast-grid { display: flex; flex-direction: column; gap: var(--space-2); }
.cc-contrast-row {
  display: grid; grid-template-columns: 64px 1fr auto; align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-md);
}
.cc-contrast-swatch {
  width: 64px; height: 52px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
}
.cc-contrast-swatch--black { background: #000; }
.cc-contrast-swatch--white { background: #fff; }
.cc-contrast-swatch--custom { background: var(--cc-custom-bg, #f0f4f8); position: relative; padding: 4px; }
.cc-contrast-sample { font-weight: 700; font-size: 20px; letter-spacing: -.02em; }
.cc-contrast-sample--on-black { color: #fff; }
.cc-contrast-sample--on-white { color: #000; }
.cc-contrast-info { display: flex; flex-direction: column; gap: 2px; }
.cc-contrast-title { font-size: var(--text-xs); color: var(--ink-3); }
.cc-contrast-ratio { font-size: var(--text-lg); font-weight: 700; color: var(--ink); }
.cc-badges { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.cc-badge {
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  padding: 3px 6px; border-radius: var(--radius-sm);
  text-transform: uppercase;
}
.cc-badge--pass { background: rgba(34,197,94,.12); color: #15803d; border: 1px solid rgba(34,197,94,.35); }
.cc-badge--fail { background: rgba(239,68,68,.08); color: #b91c1c; border: 1px solid rgba(239,68,68,.25); opacity: .7; }
.cc-contrast-footnote { margin-top: var(--space-3); font-size: var(--text-xs); color: var(--ink-3); line-height: 1.5; }

/* --- Compare card --- */
.cc-compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-bottom: var(--space-3); }
.cc-compare-col { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); }
.cc-compare-label { font-size: var(--text-xs); color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.cc-compare-swatch { width: 100%; aspect-ratio: 2/1; border-radius: var(--radius-md); border: 1px solid var(--line); }
.cc-compare-hex { font-size: var(--text-sm); font-weight: 600; }

/* --- Responsive --- */
@media (max-width: 640px) {
  .cc-hero-swatch { min-height: 140px; padding: var(--space-4); }
  .cc-hero-preview-lg { font-size: 32px; }
  .cc-contrast-row { grid-template-columns: 52px 1fr; }
  .cc-contrast-row .cc-badges { grid-column: 1 / -1; justify-content: flex-start; }
  .cc-contrast-swatch { width: 52px; height: 44px; }
  .cc-swatch-chip { width: 34px; height: 34px; }
}

/* ═══════════════════════════════════════════
   Image Resizer
   ═══════════════════════════════════════════ */
.ir-drop-zone { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-12) var(--space-6); border: 2px dashed var(--line-strong); border-radius: var(--radius-lg); background: var(--surface); cursor: pointer; transition: border-color var(--transition-base), background var(--transition-base); margin-bottom: var(--space-6); }
.ir-drop-zone:hover, .ir-drop-zone.is-dragover { border-color: var(--accent); background: var(--accent-soft); }
.ir-drop-zone.is-dragover { border-style: solid; }
.ir-drop-icon { color: var(--ink-3); margin-bottom: var(--space-3); }
.ir-drop-text { font-size: var(--text-lg); font-weight: var(--font-semibold); color: var(--ink); margin-bottom: var(--space-1); }
.ir-drop-hint { font-size: var(--text-sm); color: var(--ink-3); }
.ir-error { color: var(--rose); font-size: var(--text-sm); margin-top: var(--space-2); }
.ir-preview { max-width: 100%; max-height: 200px; border-radius: var(--radius-md); border: 1px solid var(--line); }
.ir-presets { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.ir-privacy { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--ink-3); margin-top: var(--space-3); padding: var(--space-2) var(--space-3); background: var(--accent-soft); border-radius: var(--radius-md); }
.ir-privacy-icon { flex-shrink: 0; color: var(--accent); }
.range-input { width: 100%; height: 6px; -webkit-appearance: none; appearance: none; border-radius: var(--radius-full); background: var(--line-strong); outline: none; }
.range-input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); cursor: pointer; box-shadow: var(--shadow-sm); }
.range-input::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--accent); cursor: pointer; border: none; box-shadow: var(--shadow-sm); }

/* Source summary row, batch list, compare slider, batch results — Phase D2. */
.ir-source-summary { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); margin-bottom: var(--space-3); }
.ir-source-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--line); flex-shrink: 0; background: var(--surface-2); }
.ir-source-meta { flex: 1; min-width: 0; }
.ir-source-name { font-weight: var(--font-semibold); font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ir-source-stats { font-size: var(--text-xs); color: var(--ink-3); margin-top: 2px; }

.ir-batch-list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.ir-batch-pill { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-full); font-size: var(--text-xs); cursor: pointer; color: var(--ink-2); transition: border-color var(--transition-base), background var(--transition-base); }
.ir-batch-pill:hover { border-color: var(--accent); }
.ir-batch-pill.is-active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.ir-batch-pill-name { font-weight: var(--font-semibold); }
.ir-batch-pill-dims { color: var(--ink-3); font-size: var(--text-xs); }

.ir-toggle-row { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: var(--text-sm); color: var(--ink-2); }
.ir-toggle-row input[type="checkbox"] { accent-color: var(--accent); }

.ir-error.is-active, .ir-error:not(:empty) { color: var(--rose); font-size: var(--text-sm); margin-top: var(--space-2); }

/* Before/after compare slider. */
.ir-compare-card .card-body { padding: 0; }
.ir-compare { position: relative; width: 100%; max-height: 520px; overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: none; background: var(--surface-2); }
.ir-compare-img { display: block; width: 100%; height: auto; max-height: 520px; object-fit: contain; pointer-events: none; }
.ir-compare-img--before { width: 100%; }
.ir-compare-after-wrap { position: absolute; top: 0; left: 0; width: 50%; height: 100%; overflow: hidden; }
.ir-compare-img--after { position: absolute; top: 0; left: 0; width: auto; height: 100%; max-height: 520px; }
/* Match the after image to the before image's natural rendered box. */
.ir-compare-after-wrap .ir-compare-img--after { width: calc(100% / .5 * 1); }
.ir-compare-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--accent); transform: translateX(-1px); cursor: ew-resize; z-index: 2; }
.ir-compare-handle::before, .ir-compare-handle::after { content: ''; position: absolute; left: 50%; width: 2px; background: var(--accent); }
.ir-compare-handle::before { top: 0; bottom: 50%; transform: translateX(-50%); }
.ir-compare-handle::after { top: 50%; bottom: 0; transform: translateX(-50%); }
.ir-compare-handle-grip { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; gap: 0; box-shadow: var(--shadow-md); z-index: 1; }
.ir-compare-handle-grip svg { color: #fff; }
.ir-compare-tag { position: absolute; top: 8px; padding: 2px 8px; font-size: var(--text-xs); font-weight: var(--font-semibold); background: rgba(0, 0, 0, 0.6); color: #fff; border-radius: var(--radius-sm); pointer-events: none; }
.ir-compare-tag--before { left: 8px; }
.ir-compare-tag--after { right: 8px; }

/* Batch results panel rows. */
.ir-batch-results { display: flex; flex-direction: column; gap: var(--space-1); }
.ir-batch-result { display: grid; grid-template-columns: 1fr auto auto auto; gap: var(--space-3); align-items: center; padding: var(--space-2) var(--space-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); cursor: pointer; transition: border-color var(--transition-base); }
.ir-batch-result:hover { border-color: var(--accent); }
.ir-batch-result.is-active { border-color: var(--accent); background: var(--accent-soft); }
.ir-batch-result-name { font-size: var(--text-sm); font-weight: var(--font-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ir-batch-result-dims, .ir-batch-result-size { font-size: var(--text-xs); color: var(--ink-3); }
.ir-batch-result-delta { font-size: var(--text-xs); color: var(--accent); font-weight: var(--font-semibold); }

/* Restore [hidden] for .ir-* elements whose explicit `display` defeats the UA rule. */
.ir-source-summary[hidden],
.ir-batch-list[hidden],
.ir-drop-zone[hidden],
.ir-batch-results[hidden],
.ir-presets[hidden] { display: none; }

/* Bad-delta badge variant (good already exists at line ~5554). */
.ci-delta-badge--bad { background: var(--rose-soft, rgba(244, 63, 94, 0.12)); color: var(--rose, #f43f5e); }

@media (max-width: 520px) {
  .ir-batch-result { grid-template-columns: 1fr auto; }
  .ir-batch-result-dims, .ir-batch-result-size { grid-column: span 2; }
}

/* ── Image Compressor / Format Converter ── */
.ic-file-list { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); }
.ic-file-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); }
.ic-file-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--line); flex-shrink: 0; }
.ic-file-info { flex: 1; min-width: 0; }
.ic-file-name { font-weight: var(--font-semibold); font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ic-file-size { font-size: var(--text-xs); color: var(--ink-3); }
.ic-result-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); margin-bottom: var(--space-2); flex-wrap: wrap; }
.ic-result-name { font-weight: var(--font-semibold); font-size: var(--text-sm); flex: 1; min-width: 120px; }
.ic-result-stats { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); flex-wrap: wrap; }
.ic-result-arrow { color: var(--ink-3); }
.ic-result-savings { color: var(--accent); font-weight: 600; }
.ic-result-larger { color: var(--amber); font-weight: 600; }
.calc-btn--sm { padding: var(--space-1) var(--space-3); font-size: var(--text-sm); }

/* ── Image Cropper ── */
.icr-canvas-wrap { position: relative; display: inline-block; max-width: 100%; margin: var(--space-4) auto; overflow: hidden; border-radius: var(--radius-md); }
.icr-canvas-wrap canvas { display: block; max-width: 100%; height: auto; border-radius: var(--radius-md); }
.icr-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.icr-crop-area { position: absolute; pointer-events: all; cursor: move; box-shadow: 0 0 0 9999px rgba(0,0,0,0.5); border: 2px dashed rgba(255,255,255,0.7); }
.icr-handle { position: absolute; width: 12px; height: 12px; background: var(--accent); border: 2px solid #fff; border-radius: 2px; pointer-events: all; z-index: 1; }
.icr-handle-nw { top: -6px; left: -6px; cursor: nw-resize; }
.icr-handle-ne { top: -6px; right: -6px; cursor: ne-resize; }
.icr-handle-sw { bottom: -6px; left: -6px; cursor: sw-resize; }
.icr-handle-se { bottom: -6px; right: -6px; cursor: se-resize; }
.icr-handle-n { top: -6px; left: 50%; margin-left: -6px; cursor: n-resize; }
.icr-handle-s { bottom: -6px; left: 50%; margin-left: -6px; cursor: s-resize; }
.icr-handle-e { top: 50%; right: -6px; margin-top: -6px; cursor: e-resize; }
.icr-handle-w { top: 50%; left: -6px; margin-top: -6px; cursor: w-resize; }
.icr-ratio-active { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; }

/* Image cropper — extended UI */
.icr-canvas-wrap img { display: block; max-width: 100%; height: auto; border-radius: var(--radius-md); user-select: none; -webkit-user-drag: none; }
.icr-stage { margin: var(--space-3) 0; text-align: center; }
.icr-stage-hint { display: block; margin-top: var(--space-2); color: var(--ink-2); font-size: var(--text-xs); }
.icr-crop-area:focus { outline: 2px solid var(--accent); outline-offset: 2px; }

.icr-dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-2);
  padding: var(--space-8) var(--space-4);
  border: 2px dashed color-mix(in srgb, var(--accent) 35%, var(--line));
  border-radius: var(--radius-lg, var(--radius-md));
  background: color-mix(in srgb, var(--accent) 4%, var(--surface));
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.icr-dropzone:hover, .icr-dropzone:focus {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  box-shadow: 0 4px 16px -8px color-mix(in srgb, var(--accent) 40%, transparent);
  outline: none;
}
.icr-dropzone.is-dragging {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  transform: scale(1.005);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}
.icr-dropzone__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  font-size: 1.75rem; line-height: 1;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  border-radius: 50%;
  margin-bottom: var(--space-1);
}
.icr-dropzone__title { font-weight: var(--font-semibold); color: var(--ink); font-size: var(--text-base, 1rem); }
.icr-dropzone__hint { font-size: var(--text-xs); color: var(--ink-2); letter-spacing: 0.02em; }

/* URL row sits underneath the dropzone — give it some breathing room. */
.icr-dropzone + .field { margin-top: var(--space-4); }

.icr-custom-ratio { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
.icr-custom-ratio input[type="number"] {
  width: 4.5rem; padding: var(--space-1) var(--space-2);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); font-family: var(--font-mono); text-align: center;
}
.icr-ratio-sep { color: var(--ink-2); font-weight: var(--font-semibold); }

.icr-precise { margin-top: var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.icr-precise > summary { cursor: pointer; font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--ink-2); list-style: none; padding: var(--space-1) 0; }
.icr-precise > summary::-webkit-details-marker { display: none; }
.icr-precise > summary::before { content: '▸'; display: inline-block; margin-right: var(--space-2); transition: transform var(--transition-fast); }
.icr-precise[open] > summary::before { transform: rotate(90deg); }

.icr-thumb { position: relative; display: inline-block; max-width: 100%; }
.icr-thumb img { display: block; max-width: 100%; max-height: 200px; height: auto; border-radius: var(--radius-md); border: 1px solid var(--line); }
.icr-thumb-overlay { position: absolute; pointer-events: none; box-shadow: 0 0 0 9999px rgba(0,0,0,0.55); border: 2px solid var(--accent); border-radius: 2px; }

.aux.is-error:not(:empty) { color: var(--danger, #c0392b); margin-top: var(--space-2); font-size: var(--text-xs); }

/* Image cropper source-meta — cleaner 2-col grid with light dividers, not boxes. */
#icr-source-meta.breakdown-grid--2col {
  margin-top: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface);
}
#icr-source-meta.breakdown-grid--2col .breakdown-row {
  background: transparent !important;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line);
}
#icr-source-meta.breakdown-grid--2col .breakdown-row:nth-last-child(-n+2) { border-bottom: none; }
#icr-source-meta.breakdown-grid--2col .breakdown-row:nth-child(odd) { border-right: 1px solid var(--line); }
#icr-source-meta.breakdown-grid--2col .breakdown-label { color: var(--ink-2); font-size: var(--text-sm); }
#icr-source-meta.breakdown-grid--2col .breakdown-value { color: var(--ink); font-weight: var(--font-semibold); }

.suffix-btn {
  align-self: stretch;
  border: none; background: var(--accent); color: #fff;
  padding: 0 var(--space-5);
  font-size: var(--text-sm); font-weight: var(--font-semibold);
  cursor: pointer; border-radius: 0;
  margin: 0;
  transition: background var(--transition-fast), filter var(--transition-fast);
}
.suffix-btn:hover { background: var(--accent); filter: brightness(1.08); }
.suffix-btn:active { filter: brightness(0.95); }

/* ═══════════════════════════════════════════
   Favicon Generator
   ═══════════════════════════════════════════ */

/* ── Dropzone ────────────────────────────────────────── */
.fav-drop {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--space-8) var(--space-5);
  border: 2px dashed var(--line-strong); border-radius: var(--radius-lg);
  background: var(--surface);
  cursor: pointer; outline: none;
  transition: border-color var(--transition-base), background var(--transition-base), transform 0.12s ease;
  text-align: center;
}
.fav-drop:hover,
.fav-drop:focus-visible,
.fav-drop.is-dragover { border-color: var(--accent); background: var(--accent-soft); }
.fav-drop.is-dragover { border-style: solid; transform: scale(1.005); }
.fav-drop__icon { color: var(--ink-3); margin-bottom: var(--space-2); }
.fav-drop:hover .fav-drop__icon,
.fav-drop.is-dragover .fav-drop__icon { color: var(--accent); }
.fav-drop__text { font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--ink); margin-bottom: var(--space-1); }
.fav-drop__browse { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.fav-drop__hint { font-size: var(--text-xs); color: var(--ink-3); }
.fav-drop__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.fav-alt-sources { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); flex-wrap: wrap; }
.fav-url-row { display: flex; align-items: stretch; gap: var(--space-2); flex: 1; min-width: 200px; }
.fav-url-input {
  flex: 1; min-width: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--surface); font-size: var(--text-sm); color: var(--ink);
}
.fav-url-input:focus { outline: none; border-color: var(--accent); }

.fav-error { color: var(--rose); font-size: var(--text-sm); min-height: 0; margin-top: var(--space-2); }
.fav-error:empty { display: none; }

/* ── Source card ─────────────────────────────────────── */
.fav-source {
  display: flex; gap: var(--space-3); padding: var(--space-3);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-md);
}
.fav-source__thumb-wrap {
  flex-shrink: 0; width: 80px; height: 80px;
  border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid var(--line);
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #e5e7eb 25%, transparent 25%),
    linear-gradient(-45deg, #e5e7eb 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e5e7eb 75%),
    linear-gradient(-45deg, transparent 75%, #e5e7eb 75%);
  background-size: 12px 12px;
  background-position: 0 0, 0 6px, 6px -6px, -6px 0;
}
.fav-source__thumb { width: 100%; height: 100%; object-fit: contain; display: block; }
.fav-source__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.fav-source__name { font-size: var(--text-sm); font-weight: var(--font-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fav-source__meta { font-size: var(--text-xs); color: var(--ink-3); }
.fav-source__chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.fav-source__actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); }

.fav-chip-info {
  display: inline-flex; align-items: center;
  padding: 2px var(--space-2);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-full);
  font-size: 11px; color: var(--ink-2);
}
.fav-chip-info.is-ok { color: #0f766e; border-color: #99f6e4; background: #f0fdfa; }
.fav-chip-info.is-warn { color: #92400e; border-color: #fde68a; background: #fffbeb; }

/* ── Color controls ──────────────────────────────────── */
.fav-color-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.fav-color-swatch {
  width: 36px; height: 36px; padding: 0;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: transparent; cursor: pointer;
}
.fav-color-swatch::-webkit-color-swatch-wrapper { padding: 0; border-radius: var(--radius-sm); }
.fav-color-swatch::-webkit-color-swatch { border: none; border-radius: var(--radius-sm); }
.fav-color-row input[type="text"] {
  width: 100px; padding: var(--space-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); font-size: var(--text-sm); background: var(--surface);
}
.fav-color-presets { display: inline-flex; gap: 4px; margin-left: var(--space-2); }
.fav-color-preset {
  width: 22px; height: 22px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); cursor: pointer; padding: 0;
  transition: transform 0.12s ease, border-color var(--transition-base);
}
.fav-color-preset:hover { transform: scale(1.1); border-color: var(--accent); }

/* ── Result: hero ───────────────────────────────────── */
.fav-hero .fav-hero__metrics {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3); margin: var(--space-3) 0;
}
.fav-hero__metric {
  padding: var(--space-2); background: rgba(0, 0, 0, 0.22); border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.fav-hero__metric-label { font-size: var(--text-xs); color: rgba(255, 255, 255, 0.78); margin-bottom: 2px; }
.fav-hero__metric-value { font-size: var(--text-base); font-weight: var(--font-semibold); font-variant-numeric: tabular-nums; color: #fff; }
.fav-hero__metric-theme { display: flex; align-items: center; gap: 6px; font-size: var(--text-sm); color: #fff; }
.fav-hero__swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(255, 255, 255, 0.4); flex-shrink: 0; }
.fav-hero__actions { margin-top: var(--space-3); }
.fav-hero__actions .calc-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); }

/* ── Result: empty state ──────────────────────────────── */
.fav-empty {
  background: var(--surface); border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg); padding: var(--space-6) var(--space-5);
}
.fav-empty__body { display: flex; flex-direction: column; align-items: center; text-align: center; }
.fav-empty__icon { color: var(--ink-3); opacity: 0.6; margin-bottom: var(--space-3); }
.fav-empty__title { font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--ink); margin-bottom: var(--space-4); }
.fav-empty__steps {
  list-style: none; padding: 0; margin: 0 0 var(--space-4) 0;
  display: flex; flex-direction: column; gap: var(--space-2);
  text-align: left; width: 100%; max-width: 280px;
}
.fav-empty__steps li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--ink-2); }
.fav-empty__steps li em { font-style: normal; font-weight: var(--font-medium); color: var(--ink); }
.fav-empty__num {
  display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: var(--radius-full);
  background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: var(--font-semibold);
}
.fav-empty__privacy {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px var(--space-2);
  font-size: var(--text-xs); color: var(--ink-3);
  background: var(--accent-soft); border-radius: var(--radius-full);
}

/* ── Scheme toggle + context mockups ─────────────────── */
.fav-scheme-toggle {
  display: inline-flex; gap: 2px; padding: 2px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-full);
}
.fav-scheme-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border: none; background: transparent;
  font-size: var(--text-xs); color: var(--ink-3); cursor: pointer;
  border-radius: var(--radius-full);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.fav-scheme-btn:hover { color: var(--ink-2); }
.fav-scheme-btn.active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,0.05); }

.fav-contexts {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3); padding: var(--space-3);
  border-radius: var(--radius-md); background: #f8fafc;
  transition: background var(--transition-base);
}
.fav-contexts.is-dark { background: #1e293b; }
.fav-contexts.is-dark .fav-ctx__label { color: #cbd5e1; }
@media (max-width: 640px) { .fav-contexts { grid-template-columns: 1fr; } }

.fav-ctx { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fav-ctx__label {
  font-size: 10px; color: var(--ink-3); text-transform: uppercase;
  letter-spacing: 0.06em; font-weight: var(--font-semibold);
}
.fav-ctx__frame {
  padding: var(--space-2); background: rgba(255,255,255,0.5);
  border-radius: var(--radius-sm);
}
.fav-contexts.is-dark .fav-ctx__frame { background: rgba(0,0,0,0.25); }

.fav-browser { background: #f3f4f6; border-radius: 6px; overflow: hidden; border: 1px solid #e5e7eb; font-family: var(--font-sans, system-ui); }
.fav-contexts.is-dark .fav-browser { background: #0f172a; border-color: #334155; }
.fav-browser__chrome { display: flex; gap: 4px; padding: 5px 8px; background: #e5e7eb; }
.fav-contexts.is-dark .fav-browser__chrome { background: #1e293b; }
.fav-browser__dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.fav-browser__tabs { display: flex; padding: 4px 6px 0 6px; gap: 2px; background: #e5e7eb; }
.fav-contexts.is-dark .fav-browser__tabs { background: #1e293b; }
.fav-browser__tab {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 8px 5px 8px; border-radius: 4px 4px 0 0;
  background: #d1d5db; font-size: 11px; color: #374151; min-width: 0; max-width: 150px;
}
.fav-browser__tab--active { background: #f3f4f6; color: #111827; }
.fav-contexts.is-dark .fav-browser__tab { background: #334155; color: #cbd5e1; }
.fav-contexts.is-dark .fav-browser__tab--active { background: #0f172a; color: #f1f5f9; }
.fav-browser__fav { width: 14px; height: 14px; flex-shrink: 0; image-rendering: auto; }
.fav-browser__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fav-browser__x { color: #9ca3af; margin-left: 4px; font-size: 12px; }
.fav-browser__url { display: flex; align-items: center; gap: 6px; padding: 5px 8px; background: #f3f4f6; font-size: 11px; color: #6b7280; }
.fav-contexts.is-dark .fav-browser__url { background: #0f172a; color: #94a3b8; }
.fav-browser__lock { font-size: 9px; }

.fav-ios { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: var(--space-2); }
.fav-ios__icon { width: 56px; height: 56px; border-radius: 13px; background: transparent; box-shadow: 0 4px 10px rgba(0,0,0,0.12); }
.fav-ios__label { font-size: 10px; color: #111827; font-weight: 500; text-align: center; max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fav-contexts.is-dark .fav-ios__label { color: #f1f5f9; }

.fav-android { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: var(--space-2); }
.fav-android__icon { width: 56px; height: 56px; border-radius: 50%; background: transparent; box-shadow: 0 2px 6px rgba(0,0,0,0.12); }
.fav-android__label { font-size: 10px; color: #111827; text-align: center; max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fav-contexts.is-dark .fav-android__label { color: #f1f5f9; }

.fav-bookmark { display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: #f3f4f6; border: 1px solid #e5e7eb; border-radius: var(--radius-sm); font-size: 12px; color: #111827; }
.fav-contexts.is-dark .fav-bookmark { background: #0f172a; border-color: #334155; color: #f1f5f9; }
.fav-bookmark__fav { width: 16px; height: 16px; flex-shrink: 0; }

/* ── Sizes grid ─────────────────────────────────────── */
.fav-sizes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-2); }
.fav-size-card {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.fav-size-card:hover { border-color: var(--line-strong); box-shadow: 0 2px 6px rgba(0,0,0,0.04); }
.fav-size-preview-wrap {
  flex-shrink: 0; width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); padding: 2px;
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #e5e7eb 25%, transparent 25%),
    linear-gradient(-45deg, #e5e7eb 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e5e7eb 75%),
    linear-gradient(-45deg, transparent 75%, #e5e7eb 75%);
  background-size: 10px 10px;
  background-position: 0 0, 0 5px, 5px -5px, -5px 0;
  border: 1px solid var(--line);
}
.fav-size-preview { image-rendering: pixelated; image-rendering: crisp-edges; display: block; }
.fav-size-info { flex: 1; min-width: 0; }
.fav-size-label { font-size: var(--text-sm); font-weight: var(--font-semibold); }
.fav-size-desc { font-size: 11px; color: var(--ink-3); }
.fav-size-filesize { font-size: 11px; color: var(--ink-2); margin-top: 2px; }
.fav-ico-icon {
  width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  font-weight: var(--font-bold); font-size: var(--text-xs); color: var(--ink-3);
}
.fav-size-card--ico { background: var(--accent-soft); border-color: var(--accent); }
.fav-size-card--ico .fav-size-preview-wrap { background: none; border: none; }
.fav-size-dl { flex-shrink: 0; font-size: 11px; padding: 4px 10px; }

/* ── Code tabs ──────────────────────────────────────── */
.fav-code-tabs {
  display: flex; gap: 2px; padding: 2px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-md); margin-bottom: var(--space-2);
}
.fav-code-tab {
  flex: 1; padding: 6px 10px; border: none; background: transparent;
  font-size: var(--text-xs); font-weight: var(--font-medium);
  color: var(--ink-3); cursor: pointer; border-radius: var(--radius-sm);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.fav-code-tab:hover { color: var(--ink-2); }
.fav-code-tab.active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,0.05); }

.fav-code-pane { position: relative; }
.fav-code-copy { position: absolute; top: var(--space-2); right: var(--space-2); font-size: 11px; padding: 3px 10px; z-index: 1; }
.fav-code {
  background: var(--surface-2); padding: var(--space-3); padding-right: 64px;
  border-radius: var(--radius-md); border: 1px solid var(--line);
  font-family: var(--font-mono, monospace); font-size: 12px;
  white-space: pre-wrap; word-break: break-word;
  max-height: 280px; overflow: auto; color: var(--ink); margin: 0;
}

.fav-code-help { margin-top: var(--space-3); font-size: var(--text-xs); border-top: 1px solid var(--line); padding-top: var(--space-2); }
.fav-code-help summary { cursor: pointer; color: var(--ink-3); padding: var(--space-1) 0; }
.fav-code-help summary:hover { color: var(--ink); }
.fav-code-help__body { margin-top: var(--space-2); }
.fav-tree { background: var(--surface-2); padding: var(--space-2); border-radius: var(--radius-sm); font-size: 11px; line-height: 1.5; margin: var(--space-2) 0; }

.fav-live-card .card-header { display: flex; align-items: center; justify-content: space-between; }

/* ═══════════════════════════════════════════
   PDF to JPG Converter
   ═══════════════════════════════════════════ */
.ptj-progress-bar { height: 8px; background: var(--surface-2); border-radius: var(--radius-full); overflow: hidden; }
.ptj-progress-fill { height: 100%; background: var(--accent); border-radius: var(--radius-full); transition: width 0.3s ease; }
.ptj-pages-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-3); }
.ptj-page-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-3); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.ptj-page-thumb { max-width: 100%; height: auto; border-radius: var(--radius-sm); border: 1px solid var(--line); background: #fff; }
.ptj-page-number { font-weight: var(--font-semibold); font-size: var(--text-sm); }
.ptj-page-dims { font-size: var(--text-xs); color: var(--ink-3); }

/* ═══════════════════════════════════════════
   JPG to PDF Converter
   ═══════════════════════════════════════════ */

/* SVG defs holder — must render but occupy no layout space. */
.jtp-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ── Drop zone (upload section) ─────────────────────────── */
.jtp-drop-zone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--space-10) var(--space-6);
  border: 2px dashed var(--line-strong); border-radius: var(--radius-lg);
  background: var(--surface);
  cursor: pointer; outline: none;
  transition: border-color var(--transition-base), background var(--transition-base), transform 0.12s ease;
  text-align: center;
}
.jtp-drop-zone:hover,
.jtp-drop-zone:focus-visible,
.jtp-drop-zone.is-dragover {
  border-color: var(--accent); background: var(--accent-soft);
}
.jtp-drop-zone.is-dragover { border-style: solid; transform: scale(1.005); }
.jtp-drop-icon { color: var(--ink-3); margin-bottom: var(--space-3); }
.jtp-drop-zone:hover .jtp-drop-icon,
.jtp-drop-zone.is-dragover .jtp-drop-icon { color: var(--accent); }
.jtp-drop-text {
  font-size: var(--text-lg); font-weight: var(--font-semibold);
  color: var(--ink); margin-bottom: var(--space-1);
}
.jtp-drop-hint { font-size: var(--text-sm); color: var(--ink-3); }
.jtp-drop-browse { color: var(--accent); font-weight: var(--font-medium); text-decoration: underline; text-underline-offset: 2px; }

.jtp-error { color: var(--rose); font-size: var(--text-sm); min-height: 0; transition: min-height var(--transition-base); }
.jtp-error.is-visible { min-height: 1.2em; margin-top: var(--space-2); }

/* ── Visual chip rows (page size + fit mode diagrams) ─── */
.chip-row--visual { flex-wrap: wrap; gap: var(--space-2); }
.chip.chip--visual {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--space-3); min-width: 76px; gap: 2px;
  line-height: 1.2; text-align: center;
}
.jtp-chip-ico { width: 18px; height: 22px; color: currentColor; margin-bottom: 4px; }
.jtp-chip-ico--wide { width: 30px; height: 22px; }
.jtp-chip-ico rect { fill: none; stroke: currentColor; stroke-width: 1; }
.jtp-chip-ico .jtp-fit-img { fill: currentColor; opacity: 0.25; stroke: currentColor; stroke-width: 0.5; }
.chip.chip--visual.active .jtp-chip-ico .jtp-fit-img { opacity: 0.55; }
.jtp-chip-label { font-size: var(--text-sm); font-weight: var(--font-medium); }
.jtp-chip-sub { font-size: 10px; color: var(--ink-3); font-weight: var(--font-regular); letter-spacing: 0.02em; }
.chip.chip--visual.active .jtp-chip-sub { color: inherit; opacity: 0.8; }

/* ── Queue list (drag-to-reorder, rotate, remove) ─────── */
.jtp-image-list { display: flex; flex-direction: column; gap: var(--space-2); }
.jtp-image-item {
  display: grid;
  grid-template-columns: 18px 22px 56px 1fr auto auto;
  align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
  cursor: grab;
  transition: border-color var(--transition-base), background var(--transition-base), opacity 0.2s, transform 0.12s ease;
}
.jtp-image-item:hover { border-color: var(--line-strong); }
.jtp-image-item:active,
.jtp-image-item.is-dragging { cursor: grabbing; opacity: 0.55; }
.jtp-image-item.is-drop-target { border-color: var(--accent); border-style: dashed; background: var(--accent-soft); }

.jtp-image-handle { display: flex; align-items: center; justify-content: center; color: var(--ink-3); cursor: grab; }
.jtp-image-pos {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: var(--radius-full);
  background: var(--surface-2); color: var(--ink-2);
  font-size: 11px; font-weight: var(--font-semibold); font-variant-numeric: tabular-nums;
}
.jtp-image-thumb {
  width: 56px; height: 56px; object-fit: cover;
  border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: var(--surface-2); flex-shrink: 0;
  transition: transform 0.2s ease;
}
.jtp-image-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.jtp-image-name {
  font-size: var(--text-sm); font-weight: var(--font-medium);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jtp-image-dims { font-size: var(--text-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }

.jtp-image-btn {
  width: 28px; height: 28px; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-3); cursor: pointer; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  transition: color var(--transition-base), background var(--transition-base), border-color var(--transition-base);
}
.jtp-image-btn:hover { color: var(--ink); border-color: var(--line-strong); background: var(--surface-2); }
.jtp-image-btn--remove:hover { color: var(--rose); border-color: var(--rose); }

/* ── Process button (busy spinner) ────────────────────── */
.calc-btn.is-busy { cursor: progress; }
.jtp-btn-spinner {
  display: inline-block; width: 14px; height: 14px;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%; margin-left: var(--space-2);
  animation: jtp-spin 0.8s linear infinite;
}
.jtp-btn-spinner[hidden] { display: none; }
@keyframes jtp-spin { to { transform: rotate(360deg); } }

/* ── Privacy chip ─────────────────────────────────────── */
.jtp-privacy {
  display: flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-3); padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs); color: var(--ink-3);
  background: var(--accent-soft); border-radius: var(--radius-md);
}
.jtp-privacy-icon { flex-shrink: 0; color: var(--accent); }

/* ── Result: empty state ──────────────────────────────── */
.jtp-empty { background: var(--surface); }
.jtp-empty__body { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--space-8) var(--space-6); }
.jtp-empty__icon { color: var(--ink-3); opacity: 0.6; margin-bottom: var(--space-3); }
.jtp-empty__title { font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--ink); margin-bottom: var(--space-4); }
.jtp-empty__steps { list-style: none; padding: 0; margin: 0 0 var(--space-4) 0; display: flex; flex-direction: column; gap: var(--space-2); text-align: left; width: 100%; max-width: 280px; }
.jtp-empty__steps li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--ink-2); }
.jtp-empty__steps li em { font-style: normal; font-weight: var(--font-medium); color: var(--ink); }
.jtp-empty__num {
  display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: var(--radius-full);
  background: var(--accent-soft); color: var(--accent);
  font-size: 11px; font-weight: var(--font-semibold);
}
.jtp-empty__hint { font-size: var(--text-xs); color: var(--ink-3); font-style: italic; }

/* ── Result: queued state preview card ────────────────── */
.jtp-queued .card-hint { font-variant-numeric: tabular-nums; }
.jtp-preview-wrap {
  position: relative; display: flex; align-items: center; justify-content: center;
  padding: var(--space-3); background: var(--surface-2);
  border-radius: var(--radius-md); margin-bottom: var(--space-4);
}
.jtp-preview-wrap--ready { padding: var(--space-4); }
.jtp-preview-canvas {
  display: block; border-radius: var(--radius-sm);
  box-shadow: 0 2px 10px rgba(0,0,0,0.08); max-width: 100%;
}
.jtp-preview-badge {
  position: absolute; bottom: calc(var(--space-3) + 6px); right: calc(var(--space-3) + 6px);
  padding: 3px 8px; background: rgba(17, 17, 17, 0.82); color: #fff;
  font-size: 11px; font-weight: var(--font-medium); border-radius: var(--radius-full);
  font-variant-numeric: tabular-nums;
}
.jtp-breakdown { margin-bottom: var(--space-3); }
.jtp-queued-tagline { font-size: var(--text-xs); color: var(--ink-3); margin: 0; text-align: center; }

/* ── Result: ready hero (savings badge colorized) ───── */
.ci-delta-badge.is-positive { background: var(--teal-soft, #d7f5ea); color: var(--teal, #0c9973); }
.ci-delta-badge.is-negative { background: var(--amber-soft, #fdecc8); color: var(--amber, #b77200); }

.jtp-result-hero .result-tagline.mono {
  font-family: var(--font-mono, monospace);
  font-size: var(--text-sm);
  word-break: break-all;
  opacity: 0.9;
}
.jtp-result-actions { margin-top: var(--space-3); }
.jtp-download-btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-width: 180px; justify-content: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.jtp-download-btn.is-pulsing { animation: jtp-download-pulse 1.2s ease-out; }
@keyframes jtp-download-pulse {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(56, 139, 253, 0.55); }
  35%  { transform: scale(1.04); box-shadow: 0 0 0 10px rgba(56, 139, 253, 0); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(56, 139, 253, 0); }
}

.jtp-ready-preview { margin-top: var(--space-3); }

/* ── Mobile: tighten chip grids, shrink preview ── */
@media (max-width: 640px) {
  .chip.chip--visual { min-width: 64px; padding: var(--space-2); }
  .jtp-chip-sub { display: none; }
  .jtp-image-item { grid-template-columns: 18px 22px 44px 1fr auto auto; gap: var(--space-2); padding: var(--space-2); }
  .jtp-image-thumb { width: 44px; height: 44px; }
  .jtp-drop-zone { padding: var(--space-6) var(--space-4); }
  .jtp-empty__body { padding: var(--space-6) var(--space-4); }
}

/* ── Dark mode tweaks ─────────────────────────────────── */
[data-theme='dark'] .jtp-drop-zone { border-color: var(--line-strong); background: var(--surface); }
[data-theme='dark'] .jtp-drop-zone:hover,
[data-theme='dark'] .jtp-drop-zone:focus-visible,
[data-theme='dark'] .jtp-drop-zone.is-dragover { border-color: var(--accent); background: var(--accent-soft); }
[data-theme='dark'] .jtp-preview-badge { background: rgba(0,0,0,0.6); }
[data-theme='dark'] .jtp-image-item { background: var(--surface); }
[data-theme='dark'] .jtp-image-thumb { background: var(--surface-2); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .jtp-drop-zone { border-color: var(--line-strong); background: var(--surface); }
  :root:not([data-theme='light']) .jtp-drop-zone:hover,
  :root:not([data-theme='light']) .jtp-drop-zone:focus-visible,
  :root:not([data-theme='light']) .jtp-drop-zone.is-dragover { border-color: var(--accent); background: var(--accent-soft); }
}

/* ═══════════════════════════════════════════
   Length Converter
   ═══════════════════════════════════════════ */
.conversion-row { transition: background var(--transition-base); cursor: pointer; }
.conversion-row:hover { background: var(--accent-soft); }
.conversion-row.is-source { background: var(--accent-soft); font-weight: var(--font-semibold); }
.conversion-row.is-source td:first-child { position: relative; padding-left: 24px; }
.conversion-row.is-source td:first-child::before { content: ''; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--accent); }

/* ═══════════════════════════════════════════
   Dark Mode
   ═══════════════════════════════════════════ */
[data-theme='dark'] .calc-form { background: var(--surface); border-color: var(--line); }
[data-theme='dark'] .form-group input, [data-theme='dark'] .form-group select, [data-theme='dark'] .form-group textarea, [data-theme='dark'] .calc-form .input { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
[data-theme='dark'] .input-unit { background: var(--surface-2); border-color: var(--line-strong); color: var(--ink-2); }
[data-theme='dark'] .result-card, [data-theme='dark'] .calc-live { background: var(--surface); border-color: var(--line); }
[data-theme='dark'] .formula-box, [data-theme='dark'] .formula-display { background: var(--surface-2); border-left-color: var(--accent); }
[data-theme='dark'] .formula-vars dt { border-top-color: var(--line-strong); }
[data-theme='dark'] .breakdown-table th { color: var(--ink-2); border-color: var(--line-strong); }
[data-theme='dark'] .breakdown-table td { color: var(--ink); border-color: var(--line); }
[data-theme='dark'] .breakdown-table tr:nth-child(even) td { background-color: rgba(96, 165, 250, 0.08); }
[data-theme='dark'] .breakdown-table tr:nth-child(odd) td { background-color: var(--surface); }
[data-theme='dark'] .calc-example-card { background: var(--surface); border-color: var(--line); }
[data-theme='dark'] .calc-ref-table th { border-color: var(--line-strong); color: var(--ink-2); }
[data-theme='dark'] .calc-ref-table td { border-color: var(--line); color: var(--ink); }
[data-theme='dark'] .calc-ref-table tr:nth-child(even) { background: var(--surface-2); }
[data-theme='dark'] .calc-diagram { background: var(--surface); border-color: var(--line); }
[data-theme='dark'] .calc-diagram svg circle { stroke: var(--accent); }
[data-theme='dark'] .calc-diagram svg line { stroke: var(--ink-3); }
[data-theme='dark'] .calc-diagram svg text { fill: var(--ink-2); }
[data-theme='dark'] .calc-diagram svg path[fill="none"] { stroke: var(--ink-3); }
[data-theme='dark'] .result-chart { background: var(--surface); border-color: var(--line); }
[data-theme='dark'] .result-info-box { background: var(--accent-soft); }
[data-theme='dark'] .live-counter-box { background: var(--surface); border-color: var(--line); }
[data-theme='dark'] .toggle-btn { background: var(--surface); color: var(--ink-2); }
[data-theme='dark'] .toggle-btn.is-active { background: var(--accent); color: #fff; }
[data-theme='dark'] .toggle-group { border-color: var(--line); }
[data-theme='dark'] .wc-stat-card, [data-theme='dark'] .wc-keywords { background: var(--surface); border-color: var(--line); }
[data-theme='dark'] .wc-detail-value { color: var(--ink); }
[data-theme='dark'] .wc-detail-item { color: var(--ink-2); }
[data-theme='dark'] .cc-format-row { background: var(--surface); border-color: var(--line); }
[data-theme='dark'] .cc-swatch, [data-theme='dark'] .cc-comp-swatch { border-color: var(--line); }
[data-theme='dark'] .cc-color-input { border-color: var(--line); background: var(--surface); }
[data-theme='dark'] .ir-drop-zone { border-color: var(--line-strong); background: var(--surface); }
[data-theme='dark'] .ir-drop-zone:hover, [data-theme='dark'] .ir-drop-zone.is-dragover { border-color: var(--accent); background: var(--accent-soft); }
[data-theme='dark'] .ir-privacy { background: rgba(96, 165, 250, 0.08); }
[data-theme='dark'] .conversion-row:hover { background: rgba(96, 165, 250, 0.08); }
[data-theme='dark'] .conversion-row.is-source { background: rgba(96, 165, 250, 0.12); }
[data-theme='dark'] .json-output-pre { background: var(--surface-2); border-color: var(--line); }
[data-theme='dark'] .json-key { color: #5EEAD4; }
[data-theme='dark'] .json-string { color: #4ADE80; }
[data-theme='dark'] .json-number { color: #A78BFA; }
[data-theme='dark'] .json-boolean { color: #FB923C; }
[data-theme='dark'] .json-null { color: #F87171; }
[data-theme='dark'] .json-error-block { background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.4); }
[data-theme='dark'] .bmi-class-table th { border-color: var(--line); }
[data-theme='dark'] .bmi-class-table td { border-color: var(--line); }
[data-theme='dark'] .bmi-disclaimer { background: var(--surface); border-left-color: var(--line-strong); }
[data-theme='dark'] .bmi-scale-marker { background: var(--surface); border-color: var(--ink); }
[data-theme='dark'] .bmi-scale-marker-label { background: var(--surface-2); }
/* Editorial FAQ / table.data / example / related / formula / tip all flip via canonical
   tokens (--surface, --surface-2, --line, --ink, --ink-2, --ink-3, --accent, *-soft) which
   are already overridden in variables.css dark-mode blocks — no class-specific overrides needed. */

/* ═══════════════════════════════════════════
   Unix Timestamp Converter
   ═══════════════════════════════════════════ */
.epoch-hero { text-align: center; padding: var(--space-8) var(--space-4); margin-bottom: var(--space-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.epoch-label { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-2); }
.epoch-counter { font-family: var(--font-mono); font-size: 3rem; font-weight: var(--font-bold); color: var(--accent); line-height: 1.2; margin-bottom: var(--space-2); letter-spacing: -0.02em; }
.epoch-copy { margin-bottom: var(--space-3); }
.epoch-sub { font-size: var(--text-sm); color: var(--ink-2); line-height: 1.6; }
.epoch-sub-local { color: var(--ink-3); }

.calc-form-heading { font-size: var(--text-lg); font-weight: var(--font-semibold); color: var(--ink); margin: 0 0 var(--space-4) 0; padding-bottom: var(--space-2); border-bottom: 1px solid var(--line); }

.ts-results { margin-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.ts-result-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); background: var(--surface-2); border-radius: var(--radius-sm); font-size: var(--text-sm); }
.ts-result-label { flex: 0 0 100px; font-weight: var(--font-medium); color: var(--ink-2); }
.ts-result-value { flex: 1; color: var(--ink); word-break: break-all; }
.ts-result-mono { font-family: var(--font-mono); font-size: var(--text-sm); }
.ts-copy-btn { flex: 0 0 auto; padding: 2px 8px; font-size: var(--text-xs); background: transparent; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink-3); cursor: pointer; transition: all 150ms ease; }
.ts-copy-btn:hover { border-color: var(--accent); color: var(--accent); }

[data-theme='dark'] .epoch-hero { background: var(--surface); border-color: var(--line); }
[data-theme='dark'] .ts-result-row { background: var(--surface-2); }
[data-theme='dark'] .ts-copy-btn { border-color: var(--line-strong); color: var(--ink-3); }

/* ═══════════════════════════════════════════
   HTTP Status Codes
   ═══════════════════════════════════════════ */
.http-filters { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); }
.http-filter-btn { padding: var(--space-1) var(--space-3); font-size: var(--text-sm); font-weight: var(--font-medium); border: 1px solid var(--line); border-radius: var(--radius-full); background: transparent; color: var(--ink-2); cursor: pointer; transition: all 150ms ease; }
.http-filter-btn:hover { border-color: var(--accent); color: var(--accent); }
.http-filter-btn.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.http-count { font-size: var(--text-sm); color: var(--ink-3); margin-bottom: var(--space-2); }
.http-code-list { margin-bottom: var(--space-6); }
.http-group { margin-bottom: var(--space-4); }
.http-group-title { font-size: var(--text-base); font-weight: var(--font-semibold); padding: var(--space-2) var(--space-3); margin: 0 0 var(--space-2) 0; color: var(--ink); }
.http-card { border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: var(--space-2); background: var(--surface); transition: box-shadow 150ms ease; overflow: hidden; }
.http-card:hover { box-shadow: var(--shadow-sm); }
.http-card-header { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); cursor: pointer; }
.http-code { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 52px; padding: var(--space-1) var(--space-2); font-family: var(--font-mono); font-size: var(--text-base); font-weight: var(--font-bold); color: #fff; border-radius: var(--radius-sm); }
.http-card-text { flex: 1; min-width: 0; }
.http-name { display: block; font-weight: var(--font-semibold); color: var(--ink); font-size: var(--text-sm); }
.http-desc { display: block; font-size: var(--text-sm); color: var(--ink-2); margin-top: 2px; }
.http-expand-btn { flex: 0 0 auto; background: none; border: none; font-size: var(--text-sm); color: var(--ink-3); cursor: pointer; padding: var(--space-1); }
.http-detail { padding: var(--space-3) var(--space-3) var(--space-3) calc(52px + var(--space-3) + var(--space-3)); font-size: var(--text-sm); color: var(--ink-2); border-top: 1px solid var(--line); background: var(--surface-2); line-height: 1.6; }
.http-empty { padding: var(--space-6); text-align: center; color: var(--ink-3); }

[data-theme='dark'] .http-card { background: var(--surface); border-color: var(--line); }
[data-theme='dark'] .http-detail { background: var(--surface-2); border-color: var(--line); }
[data-theme='dark'] .http-filter-btn { border-color: var(--line-strong); }

/* ═══════════════════════════════════════════
   Regex Tester
   ═══════════════════════════════════════════ */

/* Pattern input with syntax-highlight overlay */
.rx-pattern-wrap { display: flex; align-items: stretch; gap: 0; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; }
.rx-pattern-wrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.rx-delim { font-family: var(--font-mono); font-size: var(--text-lg); font-weight: var(--font-bold); color: var(--accent); padding: 0 var(--space-2); display: flex; align-items: center; flex: 0 0 auto; user-select: none; }
.rx-flags-inline { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--accent); padding: 0 var(--space-3); display: flex; align-items: center; flex: 0 0 auto; user-select: none; font-weight: var(--font-bold); }
.rx-pattern-stack { position: relative; flex: 1; min-width: 0; }
.rx-pattern-input,
.rx-pattern-hl {
  font-family: var(--font-mono); font-size: var(--text-base); line-height: 1.5;
  padding: 10px var(--space-2);
  white-space: pre; overflow-x: auto; overflow-y: hidden;
  margin: 0; box-sizing: border-box;
}
.rx-pattern-input { position: relative; width: 100%; border: none !important; border-radius: 0 !important; background: transparent !important; color: var(--ink); box-shadow: none !important; z-index: 2; caret-color: var(--ink); }
.rx-pattern-input::placeholder { color: var(--ink-3); }
.rx-pattern-hl { position: absolute; inset: 0; pointer-events: none; color: transparent; z-index: 1; }
.rx-pattern-hl .rx-tok { color: var(--ink); }
.rx-pattern-hl .rx-tok-escape   { color: #c026d3; font-weight: var(--font-semibold); }
.rx-pattern-hl .rx-tok-class    { color: #0891b2; }
.rx-pattern-hl .rx-tok-group-open,
.rx-pattern-hl .rx-tok-group-close { color: var(--accent); font-weight: var(--font-semibold); }
.rx-pattern-hl .rx-tok-quant    { color: #ea580c; font-weight: var(--font-semibold); }
.rx-pattern-hl .rx-tok-anchor   { color: #dc2626; font-weight: var(--font-semibold); }
.rx-pattern-hl .rx-tok-alt      { color: #ea580c; font-weight: var(--font-semibold); }
.rx-pattern-hl .rx-tok-dot      { color: #059669; font-weight: var(--font-semibold); }
.rx-pattern-hl .rx-tok-literal  { color: var(--ink); }
/* The highlighted overlay intentionally renders behind the transparent input
   so the caret, selection, and copy/paste all remain native. */

/* Make the input text transparent only once the highlight overlay has rendered,
   so users still see their typing if JS never runs. */
.rx-pattern-hl:not(:empty) ~ .rx-pattern-input { color: transparent; -webkit-text-fill-color: transparent; caret-color: var(--ink); }
.rx-pattern-hl:not(:empty) ~ .rx-pattern-input::selection { background: var(--accent-soft); color: var(--ink); -webkit-text-fill-color: var(--ink); }

/* Presets */
.rx-preset-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Error box with caret indicator */
.rx-error { padding: var(--space-3); margin-top: var(--space-2); background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.3); border-radius: var(--radius-md); color: #b91c1c; font-size: var(--text-sm); }
.rx-error-title { font-weight: var(--font-semibold); margin-bottom: 2px; }
.rx-error-msg { font-family: var(--font-mono); font-size: var(--text-xs); color: #7f1d1d; }
.rx-error-caret { margin-top: var(--space-2); padding: var(--space-2); background: rgba(239, 68, 68, 0.06); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: var(--text-xs); white-space: pre; color: #991b1b; overflow-x: auto; }
[data-theme='dark'] .rx-error { background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.4); color: #fca5a5; }
[data-theme='dark'] .rx-error-msg, [data-theme='dark'] .rx-error-caret { color: #fecaca; }

/* Test-string area with line-number gutter + highlighted backdrop */
.rx-text-wrap {
  position: relative; display: grid; grid-template-columns: 44px 1fr;
  border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface);
  overflow: hidden; min-height: 180px;
}
.rx-text-wrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.rx-text-gutter {
  background: var(--surface-2); color: var(--ink-3);
  padding: var(--space-3) var(--space-2); text-align: right;
  font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.6;
  white-space: pre; overflow: hidden; user-select: none;
  border-right: 1px solid var(--line);
}
.rx-text-wrap .rx-text-backdrop,
.rx-text-wrap .rx-text-input {
  grid-column: 2;
  font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.6;
  padding: var(--space-3);
  margin: 0; box-sizing: border-box;
  white-space: pre-wrap; word-break: break-word;
}
.rx-text-backdrop {
  grid-row: 1; position: relative; min-height: 100%;
  color: transparent; pointer-events: none; overflow: hidden;
}
.rx-text-input {
  grid-row: 1; position: relative;
  width: 100%; min-height: 180px;
  background: transparent !important;
  border: none !important; box-shadow: none !important; border-radius: 0 !important;
  color: var(--ink); resize: vertical; outline: none; caret-color: var(--ink);
}

/* Match highlight mark — shared across backdrop and highlighted panel */
.rx-match { background: rgba(250, 204, 21, 0.4); border-radius: 2px; padding: 0 1px; color: inherit; }
.rx-match.is-hover { background: rgba(250, 204, 21, 0.85); outline: 1px solid var(--accent); }
[data-theme='dark'] .rx-match { background: rgba(250, 204, 21, 0.25); }
[data-theme='dark'] .rx-match.is-hover { background: rgba(250, 204, 21, 0.55); outline-color: var(--accent-2); }

/* Match badge + aux row */
.rx-aux-row { display: inline-flex; align-items: center; gap: var(--space-2); }
.rx-match-badge {
  display: inline-flex; align-items: center; padding: 2px 8px;
  background: var(--accent-soft); color: var(--accent);
  border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--font-semibold);
}
.rx-match-badge.is-zero { background: var(--surface-2); color: var(--ink-3); }
.rx-sample-select {
  font-size: var(--text-xs); padding: 2px var(--space-2);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink-2);
}

/* Highlighted output pre */
.rx-highlighted {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: var(--space-3); margin: 0;
  font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.6;
  white-space: pre-wrap; word-break: break-word;
  max-height: 280px; overflow: auto;
  color: var(--ink);
}

/* Match list */
.rx-match-list { display: flex; flex-direction: column; gap: var(--space-2); }
.rx-match-item { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); transition: background 120ms ease, border-color 120ms ease; }
.rx-match-item:hover, .rx-match-item.is-hover { border-color: var(--accent); background: var(--accent-soft); }
.rx-match-header { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); font-size: var(--text-sm); }
.rx-match-num { flex: 0 0 auto; font-weight: var(--font-semibold); color: var(--accent); font-family: var(--font-mono); }
.rx-match-text { flex: 1; font-family: var(--font-mono); background: rgba(250, 204, 21, 0.15); padding: 2px 6px; border-radius: var(--radius-sm); word-break: break-all; }
.rx-match-pos { flex: 0 0 auto; font-size: var(--text-xs); color: var(--ink-3); }
.rx-groups { padding: var(--space-2) var(--space-3); border-top: 1px solid var(--line); background: var(--surface-2); font-size: var(--text-sm); }
.rx-group { padding: 2px 0; }
.rx-group-label { font-weight: var(--font-medium); color: var(--ink-2); }
[data-theme='dark'] .rx-match-text { background: rgba(250, 204, 21, 0.1); }

.rx-empty { padding: var(--space-3); text-align: center; color: var(--ink-3); font-size: var(--text-sm); background: var(--surface-2); border-radius: var(--radius-sm); }

/* Groups panel table */
.rx-groups-table { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.rx-groups-row { display: grid; grid-template-columns: 60px 120px 1fr; gap: var(--space-3); padding: var(--space-2) var(--space-3); font-size: var(--text-sm); border-bottom: 1px solid var(--line); align-items: start; }
.rx-groups-row:last-child { border-bottom: none; }
.rx-groups-head { background: var(--surface-2); font-weight: var(--font-semibold); color: var(--ink-2); }
.rx-groups-values { display: flex; flex-wrap: wrap; gap: 6px; }
.rx-groups-values code { padding: 1px 6px; background: var(--accent-soft); color: var(--accent); border-radius: var(--radius-sm); font-size: var(--text-xs); }

/* Replace tab */
.rx-replace-preview {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: var(--space-3); margin: 0; min-height: 80px;
  font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.6;
  white-space: pre-wrap; word-break: break-word; color: var(--ink);
  max-height: 280px; overflow: auto;
}

/* Explain tab */
.rx-explain-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.rx-explain-row { display: grid; grid-template-columns: minmax(80px, auto) 1fr; gap: var(--space-3); padding: 6px var(--space-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: var(--text-sm); align-items: center; }
.rx-explain-raw { font-weight: var(--font-semibold); white-space: pre; }
.rx-explain-desc { color: var(--ink-2); }
.rx-explain-escape   .rx-explain-raw { color: #c026d3; }
.rx-explain-class    .rx-explain-raw { color: #0891b2; }
.rx-explain-group-open .rx-explain-raw,
.rx-explain-group-close .rx-explain-raw { color: var(--accent); }
.rx-explain-quant    .rx-explain-raw { color: #ea580c; }
.rx-explain-anchor   .rx-explain-raw { color: #dc2626; }
.rx-explain-alt      .rx-explain-raw { color: #ea580c; }

/* Tab count chip */
.rx-tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; padding: 0 6px; margin-left: 6px; background: var(--accent-soft); color: var(--accent); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--font-semibold); }
.tab-item.is-active .rx-tab-count { background: rgba(255,255,255,0.25); color: #fff; }

/* Tiny link-looking button in field auxes */
.link-btn { background: none; border: none; padding: 0; margin: 0; font: inherit; color: var(--accent); cursor: pointer; text-decoration: underline; font-size: var(--text-xs); }
.link-btn:hover { color: var(--accent-2); }

/* Perf warning in stats card */
.rx-perf-warn { margin-top: var(--space-3); padding: var(--space-2) var(--space-3); background: rgba(234, 88, 12, 0.1); border: 1px solid rgba(234, 88, 12, 0.3); border-radius: var(--radius-sm); color: #9a3412; font-size: var(--text-xs); line-height: 1.4; }
[data-theme='dark'] .rx-perf-warn { background: rgba(234, 88, 12, 0.15); border-color: rgba(234, 88, 12, 0.45); color: #fdba74; }

/* Cheatsheet card */
.rx-cheat { display: flex; flex-direction: column; gap: var(--space-4); }
.rx-cheat-section { }
.rx-cheat-title { font-size: var(--text-xs); font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); margin-bottom: 6px; }
.rx-cheat-list { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--space-3); margin: 0; font-size: var(--text-sm); }
.rx-cheat-list dt { color: var(--accent); font-weight: var(--font-semibold); white-space: nowrap; }
.rx-cheat-list dd { margin: 0; color: var(--ink-2); }
.rx-cheat-eg { color: var(--ink-3); font-family: var(--font-mono); font-size: var(--text-xs); margin-left: 4px; }

/* Keyboard shortcut list */
.rx-kbd-list { display: grid; grid-template-columns: auto 1fr; gap: 6px var(--space-3); margin: 0; font-size: var(--text-sm); align-items: center; }
.rx-kbd-list dt { white-space: nowrap; }
.rx-kbd-list dd { margin: 0; color: var(--ink-2); }
.rx-kbd-list kbd { display: inline-block; padding: 1px 6px; font-family: var(--font-mono); font-size: var(--text-xs); background: var(--surface-2); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: var(--radius-sm); color: var(--ink-2); }

/* Explainer partial grid (below the fold) */
.rx-explainer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-4); margin-top: var(--space-4); }
.rx-explainer-grid .formula-card { padding: var(--space-4); }
.rx-h3 { font-size: var(--text-lg); font-weight: var(--font-semibold); margin: 0 0 var(--space-2); color: var(--ink); }
.rx-bullets { margin: 0; padding-left: 1.2em; color: var(--ink-2); font-size: var(--text-sm); line-height: 1.6; }
.rx-bullets li { margin-bottom: 6px; }
.rx-bullets code { font-family: var(--font-mono); background: var(--surface-2); padding: 1px 4px; border-radius: 3px; color: var(--accent); }
.rx-example { margin-bottom: var(--space-3); padding-top: var(--space-3); border-top: 1px dashed var(--line); }
.rx-example:first-child { border-top: none; padding-top: 0; }
.rx-example-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); margin-bottom: 4px; }
.rx-example-label { font-weight: var(--font-semibold); color: var(--ink); font-size: var(--text-sm); }
.rx-example-head code { font-family: var(--font-mono); background: var(--surface-2); color: var(--accent); padding: 2px 6px; border-radius: var(--radius-sm); font-size: var(--text-xs); }
.rx-example p { margin: 0; color: var(--ink-2); font-size: var(--text-sm); line-height: 1.6; }
.rx-example p code { font-family: var(--font-mono); background: var(--surface-2); padding: 1px 4px; border-radius: 3px; color: var(--accent); font-size: 0.95em; }

[data-theme='dark'] .rx-pattern-wrap { background: var(--surface); border-color: var(--line); }
[data-theme='dark'] .rx-match-item { border-color: var(--line); }
[data-theme='dark'] .rx-groups { background: var(--surface-2); border-color: var(--line); }

/* ═══════════════════════════════════════════
   Password / UUID Generator
   ═══════════════════════════════════════════ */
.pw-output-list { display: flex; flex-direction: column; gap: var(--space-2); }
.pw-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); background: var(--surface-2); border-radius: var(--radius-sm); }
.pw-value { flex: 1; font-family: var(--font-mono); font-size: var(--text-sm); word-break: break-all; color: var(--ink); }
.pw-empty { padding: var(--space-3); text-align: center; color: var(--ink-3); font-size: var(--text-sm); }
.pw-strength-track { height: 8px; background: var(--line); border-radius: var(--radius-full); overflow: hidden; }
.pw-strength-fill { height: 100%; border-radius: var(--radius-full); transition: width 300ms ease, background 300ms ease; }
.pw-str-very-weak { background: #dc2626; }
.pw-str-weak { background: #f97316; }
.pw-str-fair { background: #eab308; }
.pw-str-strong { background: #22c55e; }
.pw-str-very-strong { background: #16a34a; }
.pw-strength-text { font-size: var(--text-sm); color: var(--ink-2); margin-top: var(--space-1); }

[data-theme='dark'] .pw-row { background: var(--surface-2); }

/* ═══════════════════════════════════════════
   IP Subnet Calculator
   ═══════════════════════════════════════════ */
.ip-error { padding: var(--space-3); margin-top: var(--space-3); background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.3); border-radius: var(--radius-md); color: #dc2626; font-size: var(--text-sm); }
.ip-binary { font-size: var(--text-xs); letter-spacing: 0.5px; word-break: break-all; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

[data-theme='dark'] .ip-error { background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.4); color: #f87171; }

/* Family toggle (v4/v6) sits in card header */
.ip-family-toggle { margin-left: auto; }

/* Preset chip row — wraps on narrow screens */
.ip-preset-row { flex-wrap: wrap; gap: var(--space-2); }

/* Copy-on-click values: styled like plain text, interactive on hover */
.ip-copy { background: transparent; border: 0; padding: 2px 6px; margin: -2px -6px; border-radius: var(--radius-sm); color: inherit; font: inherit; cursor: pointer; text-align: right; transition: background 120ms ease, color 120ms ease; position: relative; }
.ip-copy:hover { background: var(--surface-2); color: var(--accent); }
.ip-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ip-copy.is-copied { color: #16a34a; background: rgba(34, 197, 94, 0.12); }
.ip-copy.is-copied::after { content: 'Copied ✓'; position: absolute; right: 0; top: -22px; font-size: var(--text-xs); background: #16a34a; color: #fff; padding: 2px 6px; border-radius: var(--radius-sm); white-space: nowrap; pointer-events: none; }

[data-theme='dark'] .ip-copy.is-copied { color: #4ade80; background: rgba(34, 197, 94, 0.18); }

/* Address range bar — horizontal proportional visualization */
.ip-range-bar { display: flex; height: 14px; border-radius: var(--radius-full); overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); }
.ip-range-seg { display: block; height: 100%; transition: width 220ms ease; min-width: 0; }
.ip-range-seg--net { background: var(--accent); }
.ip-range-seg--usable { background: #14b8a6; }
.ip-range-seg--bcast { background: #f59e0b; }
.ip-range-labels { display: flex; justify-content: space-between; margin-top: var(--space-2); font-size: var(--text-xs); color: var(--ink-3); }
.ip-range-label { font-family: var(--font-mono, monospace); }
.ip-range-label--end { text-align: right; }
.ip-range-legend { margin-top: var(--space-3); }
.ip-range-legend .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: var(--space-2); vertical-align: 1px; }
.ip-range-legend .dot--accent { background: var(--accent); }
.ip-range-legend .dot--teal { background: #14b8a6; }
.ip-range-legend .dot--amber { background: #f59e0b; }

/* Bit ruler — 32 cells (16 on very narrow screens), coloured by network/host */
.ip-bit-ruler { display: grid; grid-template-columns: repeat(32, 1fr); gap: 2px; }
.ip-bit-cell { aspect-ratio: 1 / 1.4; border-radius: 2px; background: var(--surface-2); border: 1px solid var(--line); transition: background 120ms ease, border-color 120ms ease; }
.ip-bit-cell--net { background: var(--accent); border-color: var(--accent); }
.ip-bit-cell--edge { outline: 2px solid var(--accent); outline-offset: 1px; }
.ip-bit-axis { display: flex; justify-content: space-between; margin-top: var(--space-2); font-size: var(--text-xs); color: var(--ink-3); font-family: var(--font-mono, monospace); }

/* Worked-example binary rows */
.ip-binary-row { display: grid; grid-template-columns: 150px 1fr; gap: var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--line); align-items: center; }
.ip-binary-row:first-of-type { border-top: none; margin-top: var(--space-3); padding-top: var(--space-3); }
.ip-binary-label { font-size: var(--text-xs); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; }
.ip-binary-value { font-size: var(--text-xs); letter-spacing: 0.5px; word-break: break-all; line-height: 1.6; }
.ip-binary-value .ip-bit-net { color: var(--accent); font-weight: 600; }
.ip-binary-value .ip-bit-host { color: var(--ink-3); }

/* VLSM split table */
.ip-vlsm-actions { display: flex; gap: var(--space-3); }
.ip-vlsm-controls { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-bottom: var(--space-3); }
.ip-vlsm-label { font-size: var(--text-sm); color: var(--ink-2); }
.ip-vlsm-input { max-width: 120px; }
.ip-vlsm-table td { font-family: var(--font-mono, monospace); font-size: var(--text-xs); }
.ip-vlsm-table td.amort-note { font-family: inherit; text-align: center; color: var(--ink-3); padding: var(--space-4); }
.ip-vlsm-footer { margin-top: var(--space-3); text-align: center; }

/* Below-fold detail cards */
.ip-detail-card { margin-top: var(--space-4); }

.ip-share-label { display: inline-block; }

#ip-scope-badge { font-family: var(--font-mono, monospace); }

[data-theme='dark'] .ip-bit-cell { background: var(--surface-2); border-color: var(--line-strong); }
[data-theme='dark'] .ip-range-bar { background: var(--surface-2); border-color: var(--line-strong); }
[data-theme='dark'] .ip-copy:hover { background: var(--surface-2); }

@media (max-width: 560px) {
  .ip-bit-ruler { grid-template-columns: repeat(16, 1fr); }
  .ip-binary-row { grid-template-columns: 1fr; gap: var(--space-1); }
}

/* ═══════════════════════════════════════════
   Cron Expression Generator
   ═══════════════════════════════════════════ */
.cron-fields { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-3); }
.cron-field label { display: block; font-size: var(--text-xs); color: var(--ink-3); margin-bottom: var(--space-1); text-align: center; }
.cron-field .input { text-align: center; font-family: var(--font-mono, monospace); font-size: var(--text-base); }
.cron-presets { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cron-preset { padding: var(--space-1) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-full); background: var(--surface); font-size: var(--text-sm); cursor: pointer; transition: all 150ms ease; }
.cron-preset:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft)); }
.cron-expr-output { font-family: var(--font-mono, monospace); font-size: var(--text-2xl); letter-spacing: 2px; }
.cron-copy-row { text-align: center; margin-bottom: var(--space-4); }
.cron-description { font-size: var(--text-base); color: var(--ink-2); }
.cron-next-runs { list-style: decimal; padding-left: var(--space-5); }
.cron-next-runs li { padding: var(--space-2) 0; font-family: var(--font-mono, monospace); font-size: var(--text-sm); color: var(--ink-2); border-bottom: 1px solid var(--line); }
.cron-next-runs li:last-child { border-bottom: none; }

[data-theme='dark'] .cron-preset { background: var(--surface-2); border-color: var(--line-strong); }

/* ═══════════════════════════════════════════
   Case Converter
   ═══════════════════════════════════════════ */
.cc-outputs { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); }
.cc-output-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); }
.cc-output-label { flex: 0 0 120px; font-size: var(--text-sm); font-weight: 600; color: var(--ink-2); }
.cc-output-value { flex: 1; font-family: var(--font-mono, monospace); font-size: var(--text-sm); word-break: break-all; min-height: 1.4em; }

[data-theme='dark'] .cc-output-row { background: var(--surface-2); border-color: var(--line); }

/* ═══════════════════════════════════════════
   Palindrome Checker
   ═══════════════════════════════════════════ */
.pal-badge { display: inline-block; padding: var(--space-2) var(--space-5); border-radius: var(--radius-full); font-size: var(--text-xl); font-weight: 700; }
.pal-badge-yes { background: rgba(34, 197, 94, 0.12); color: #16a34a; border: 2px solid rgba(34, 197, 94, 0.3); }
.pal-badge-no { background: rgba(239, 68, 68, 0.08); color: #dc2626; border: 2px solid rgba(239, 68, 68, 0.3); }
.pal-info { padding: var(--space-3); margin-top: var(--space-3); font-size: var(--text-sm); color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); }
.pal-info-word { color: var(--ink-3); }

[data-theme='dark'] .pal-badge-yes { background: rgba(34, 197, 94, 0.15); color: #4ade80; }
[data-theme='dark'] .pal-badge-no { background: rgba(239, 68, 68, 0.12); color: #f87171; }
[data-theme='dark'] .pal-info { background: var(--surface-2); }

/* Line Counter & Sorter — operation buttons */
.lc-op-buttons { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.lc-op-btn { padding: var(--space-2) var(--space-3); font-size: var(--text-sm); font-weight: 500; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.lc-op-btn:hover { background: var(--surface-2); border-color: var(--accent); }

[data-theme='dark'] .lc-op-btn { background: var(--surface-2); border-color: var(--line-strong); }
[data-theme='dark'] .lc-op-btn:hover { border-color: var(--accent); }

/* Duplicate Line Remover — duplicates list */
.dlr-dup-list { display: flex; flex-direction: column; gap: var(--space-2); }
.dlr-dup-item { display: flex; justify-content: space-between; align-items: center; padding: var(--space-2) var(--space-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); font-size: var(--text-sm); }
.dlr-dup-count { font-weight: 600; font-size: var(--text-xs); padding: var(--space-1) var(--space-2); border-radius: var(--radius-full); background: rgba(99, 102, 241, 0.1); color: var(--accent); white-space: nowrap; }

[data-theme='dark'] .dlr-dup-item { background: var(--surface-2); border-color: var(--line); }
[data-theme='dark'] .dlr-dup-count { background: rgba(99, 102, 241, 0.2); }

/* Text Diff — diff output lines */
.td-line { display: flex; gap: var(--space-2); padding: 1px var(--space-2); font-family: var(--font-mono, monospace); font-size: var(--text-sm); line-height: 1.6; }
.td-prefix { flex-shrink: 0; width: 1.2em; text-align: center; user-select: none; font-weight: 700; }
.td-equal { color: var(--ink-2); }
.td-added { background: rgba(34, 197, 94, 0.1); color: #15803d; }
.td-removed { background: rgba(239, 68, 68, 0.08); color: #b91c1c; }
.td-word-add { background: rgba(34, 197, 94, 0.3); border-radius: 2px; }
.td-word-del { background: rgba(239, 68, 68, 0.25); border-radius: 2px; text-decoration: line-through; }

[data-theme='dark'] .td-added { background: rgba(34, 197, 94, 0.12); color: #4ade80; }
[data-theme='dark'] .td-removed { background: rgba(239, 68, 68, 0.12); color: #f87171; }
[data-theme='dark'] .td-word-add { background: rgba(34, 197, 94, 0.35); }
[data-theme='dark'] .td-word-del { background: rgba(239, 68, 68, 0.3); }

/* Find and Replace — highlight */
.fr-highlight { background: rgba(250, 204, 21, 0.4); border-radius: 2px; padding: 0 1px; }
.fr-preview { line-height: 1.6; }

[data-theme='dark'] .fr-highlight { background: rgba(250, 204, 21, 0.3); }

/* Data table — shared for size converter reference tables */
.data-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.data-table th { text-align: left; padding: var(--space-2) var(--space-3); font-weight: var(--font-semibold); color: var(--ink-2); border-bottom: 2px solid var(--line-strong); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; }
.data-table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.data-table tr:nth-child(even) td { background: var(--surface-2); }
.data-table .dt-active td { background: rgba(99, 102, 241, 0.08); font-weight: 600; }

[data-theme='dark'] .data-table th { border-color: var(--line-strong); }
[data-theme='dark'] .data-table td { border-color: var(--line); }
[data-theme='dark'] .data-table .dt-active td { background: rgba(99, 102, 241, 0.15); }

/* Markdown preview — basic styling */
.md-preview h1, .md-preview h2, .md-preview h3, .md-preview h4, .md-preview h5, .md-preview h6 { margin: var(--space-3) 0 var(--space-2); }
.md-preview h1 { font-size: var(--text-2xl); }
.md-preview h2 { font-size: var(--text-xl); }
.md-preview h3 { font-size: var(--text-lg); }
.md-preview p { margin: var(--space-2) 0; }
.md-preview ul, .md-preview ol { padding-left: var(--space-6); margin: var(--space-2) 0; }
.md-preview pre { background: var(--surface-2); padding: var(--space-3); border-radius: var(--radius-md); overflow-x: auto; font-size: var(--text-sm); }
.md-preview code { font-family: var(--font-mono, monospace); font-size: 0.9em; }
.md-preview pre code { background: none; padding: 0; }
.md-preview code:not(pre code) { background: var(--surface-2); padding: 1px var(--space-1); border-radius: var(--radius-sm); }
.md-preview blockquote { border-left: 3px solid var(--accent); padding: var(--space-2) var(--space-4); margin: var(--space-2) 0; color: var(--ink-2); background: var(--surface); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.md-preview table { border-collapse: collapse; width: 100%; margin: var(--space-3) 0; }
.md-preview th, .md-preview td { border: 1px solid var(--line); padding: var(--space-2) var(--space-3); text-align: left; }
.md-preview th { background: var(--surface-2); font-weight: 600; }
.md-preview hr { border: none; border-top: 1px solid var(--line); margin: var(--space-4) 0; }
.md-preview img { max-width: 100%; border-radius: var(--radius-md); }

/* ── Cooking Measurement ── */
.ck-result-row { display: flex; justify-content: space-between; align-items: center; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); }
.ck-result-row:last-child { border-bottom: none; }
.ck-result-row.is-source { background: var(--surface-2); font-weight: 600; }
.ck-result-label { color: var(--ink-2); }
.ck-result-value { font-family: var(--font-mono, monospace); font-weight: 600; }

/* Category tabs — denser, distinctly "tab-like" */
.ck-category-tabs { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); }

/* Ingredient selector */
.ck-ingredient-field.is-hidden { display: none; }
.ck-ingredient-select-wrap { margin-top: var(--space-2); }
.ck-select {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line-strong, var(--line));
  border-radius: var(--radius, 8px);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--text-sm, 0.9rem);
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: var(--space-8, 2.5rem);
}
.ck-select:focus { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Swap button */
.ck-swap-row {
  display: flex;
  justify-content: center;
  margin: calc(var(--space-2) * -1) 0 var(--space-2);
  position: relative;
  z-index: 1;
}
.ck-swap-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--line-strong, var(--line));
  border-radius: 999px;
  color: var(--ink-2);
  font-size: var(--text-sm, 0.85rem);
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.ck-swap-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft, var(--surface-2)); }
.ck-swap-btn:active { transform: scale(0.96); }
.ck-swap-btn--flash { animation: ck-swap-spin 0.35s ease; }
.ck-swap-icon { font-size: 1.1rem; line-height: 1; display: inline-block; transition: transform 0.25s ease; }
.ck-swap-btn:hover .ck-swap-icon { transform: rotate(180deg); }
@keyframes ck-swap-spin {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.05); }
  100% { transform: rotate(360deg) scale(1); }
}

/* Preset chip row — compact, distinct from selection chips */
.ck-preset-block { margin-top: var(--space-5, 1.5rem); padding-top: var(--space-4, 1rem); border-top: 1px dashed var(--line); }
.form-section-title--inline { display: block; margin-bottom: var(--space-2); color: var(--ink-2); font-size: var(--text-xs, 0.75rem); text-transform: uppercase; letter-spacing: 0.05em; }
.chip--preset {
  background: var(--surface-2);
  border-style: dashed !important;
  color: var(--ink-2);
  font-size: var(--text-xs, 0.8rem);
}
.chip--preset:hover { color: var(--accent); border-color: var(--accent) !important; border-style: solid !important; background: var(--accent-soft, var(--surface)); }

/* Context line under hero — inside the dark-green result hero, default ink-3 is unreadable. */
.ck-context-line {
  font-size: var(--text-xs, 0.75rem);
  color: rgba(255, 255, 255, 0.82);
  margin-top: var(--space-2);
  font-style: italic;
  letter-spacing: 0.01em;
}

/* Breakdown 2-column grid */
.breakdown-grid--2col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-6, 1.5rem);
}
.breakdown-grid--2col .breakdown-row {
  border-bottom: 1px solid var(--line);
  padding: var(--space-3, 0.75rem) var(--space-2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.breakdown-grid--2col .breakdown-value {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 0.25rem);
  min-width: 0;
}

/* Copy-value icon button on breakdown rows */
.ck-copy-btn {
  flex-shrink: 0;
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius, 6px);
  color: var(--ink-3, var(--ink-2));
  cursor: pointer;
  font-size: 0.9rem;
  padding: 2px 6px;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.breakdown-row:hover .ck-copy-btn,
.ck-copy-btn:focus-visible { opacity: 1; }
.ck-copy-btn:hover { color: var(--accent); background: var(--accent-soft, var(--surface-2)); }
.ck-copy-btn--copied { opacity: 1 !important; color: var(--success, var(--accent)); }
.ck-copy-btn--copied::before { content: '✓ '; }

/* Card hint muted variant */
.card-hint--muted { color: var(--ink-3, var(--ink-2)); font-weight: 400; font-size: var(--text-xs, 0.75rem); }

/* Share label (matches ci-share convention) */
.ck-share-label { display: inline-block; }

/* Responsive: 2-col breakdown stacks on narrow */
@media (max-width: 520px) {
  .breakdown-grid--2col { grid-template-columns: 1fr; }
}

/* ── Paper Size filter active (reuses .lc-op-btn) ── */
.ps-filter-active { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; }

/* ═══════════════════════════════════════════
   Responsive — Tablet
   ═══════════════════════════════════════════ */
@media (max-width: 1024px) {
  .calculator-page { max-width: 100%; padding: var(--space-6); }
  .calc-split, .cc-layout, .td-inputs, .md-split { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════
   Responsive — Mobile
   ═══════════════════════════════════════════ */
@media (max-width: 768px) {
  .calculator-page { padding: var(--space-4); }
  .calc-title { font-size: var(--text-2xl); }
  .result-primary .result-value { font-size: var(--text-2xl); }
  .form-row { grid-template-columns: 1fr; gap: var(--space-3); }
  .result-grid { grid-template-columns: repeat(2, 1fr); }
  .donut-chart-wrapper { flex-direction: column; }
  .calc-examples, .examples-grid { grid-template-columns: 1fr; }
  .tab-list { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .wc-stats-bar { gap: var(--space-2); }
  .wc-stat-label { font-size: var(--text-sm); }
  .cron-fields { grid-template-columns: repeat(3, 1fr); }
  .epoch-counter { font-size: 2rem; }
  .ts-result-label { flex: 0 0 80px; }
  .cc-output-label { flex: 0 0 90px; }
  .related-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .calculator-page { padding: var(--space-4) var(--space-3); }
  .result-grid { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .calc-title { font-size: var(--text-xl); }
  .quadratic-equation-display { font-size: var(--text-base); }
  .quad-input { width: 56px; }
  .wc-details-row { gap: var(--space-2) var(--space-3); }
  .wc-stats-bar { grid-template-columns: 1fr; }
  .cc-input-group { grid-template-columns: 1fr; }
  .cc-picker-row { flex-wrap: wrap; }
}

/* Print */
@media print {
  .calculator-page { max-width: 100%; padding: 0; }
  .calc-form, .result-card, .formula-box, .calc-live { background: #fff; border: 1px solid #ddd; box-shadow: none; }
  .calc-btn, .calc-utils, .calc-related { display: none; }
  .calc-results { opacity: 1; transform: none; pointer-events: auto; }
  .result-primary .result-value { -webkit-text-fill-color: var(--accent); color: var(--accent); }
}

@media (hover: none) { .calc-btn:hover { transform: none; } }

/* ═══════════════════════════════════════════
   System Dark Mode
   ═══════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .calc-form { background: var(--surface); border-color: var(--line); }
  :root:not([data-theme='light']) .form-group input, :root:not([data-theme='light']) .form-group select, :root:not([data-theme='light']) .form-group textarea, :root:not([data-theme='light']) .calc-form .input { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
  :root:not([data-theme='light']) .input-unit { background: var(--surface-2); border-color: var(--line-strong); }
  :root:not([data-theme='light']) .result-card, :root:not([data-theme='light']) .calc-diagram, :root:not([data-theme='light']) .result-chart { background: var(--surface-2); border-color: var(--line); }
  :root:not([data-theme='light']) .calc-diagram svg circle { stroke: var(--accent); }
  :root:not([data-theme='light']) .calc-diagram svg line { stroke: var(--ink-3); }
  :root:not([data-theme='light']) .calc-diagram svg text { fill: var(--ink-2); }
  :root:not([data-theme='light']) .calc-diagram svg path[fill="none"] { stroke: var(--ink-3); }
  :root:not([data-theme='light']) .formula-box, :root:not([data-theme='light']) .formula-display { background: var(--surface-2); border-left-color: var(--accent); }
  :root:not([data-theme='light']) .formula-vars dt { border-top-color: var(--line-strong); }
  :root:not([data-theme='light']) .toggle-btn { background: var(--surface); }
  :root:not([data-theme='light']) .toggle-btn.is-active { background: var(--accent); color: #fff; }
  :root:not([data-theme='light']) .ir-drop-zone { border-color: var(--line-strong); background: var(--surface); }
  :root:not([data-theme='light']) .ir-drop-zone:hover, :root:not([data-theme='light']) .ir-drop-zone.is-dragover { border-color: var(--accent); background: var(--accent-soft); }
  :root:not([data-theme='light']) .ir-privacy { background: rgba(96, 165, 250, 0.08); }
  :root:not([data-theme='light']) .conversion-row:hover { background: rgba(96, 165, 250, 0.08); }
  :root:not([data-theme='light']) .conversion-row.is-source { background: rgba(96, 165, 250, 0.12); }
  :root:not([data-theme='light']) .wc-stat-card, :root:not([data-theme='light']) .wc-keywords, :root:not([data-theme='light']) .cc-format-row, :root:not([data-theme='light']) .json-output-pre { background: var(--surface); border-color: var(--line); }
  :root:not([data-theme='light']) .json-key { color: #5EEAD4; }
  :root:not([data-theme='light']) .json-string { color: #4ADE80; }
  :root:not([data-theme='light']) .json-number { color: #A78BFA; }
  :root:not([data-theme='light']) .json-boolean { color: #FB923C; }
  :root:not([data-theme='light']) .json-null { color: #F87171; }
  :root:not([data-theme='light']) .json-error-block { background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.4); }
  :root:not([data-theme='light']) .breakdown-table tr:nth-child(even) td { background-color: rgba(96, 165, 250, 0.08); }
  :root:not([data-theme='light']) .breakdown-table tr:nth-child(odd) td { background-color: var(--surface); }
  :root:not([data-theme='light']) .epoch-hero { background: var(--surface); border-color: var(--line); }
  :root:not([data-theme='light']) .ts-result-row { background: var(--surface-2); }
  :root:not([data-theme='light']) .ts-copy-btn { border-color: var(--line-strong); color: var(--ink-3); }
  :root:not([data-theme='light']) .bmi-disclaimer { background: var(--surface); border-left-color: var(--line-strong); }
  :root:not([data-theme='light']) .bmi-scale-marker-label { background: var(--surface-2); }
  :root:not([data-theme='light']) .http-card { background: var(--surface); border-color: var(--line); }
  :root:not([data-theme='light']) .http-detail { background: var(--surface-2); border-color: var(--line); }
  :root:not([data-theme='light']) .http-filter-btn { border-color: var(--line-strong); }
  :root:not([data-theme='light']) .rx-pattern-wrap { background: var(--surface); border-color: var(--line); }
  :root:not([data-theme='light']) .rx-match { background: rgba(250, 204, 21, 0.25); }
  :root:not([data-theme='light']) .rx-match-item { border-color: var(--line); }
  :root:not([data-theme='light']) .rx-groups { background: var(--surface-2); border-color: var(--line); }
  :root:not([data-theme='light']) .rx-error { background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.4); }
  :root:not([data-theme='light']) .pw-row { background: var(--surface-2); }
  :root:not([data-theme='light']) .ip-error { background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.4); color: #f87171; }
  :root:not([data-theme='light']) .cron-preset { background: var(--surface-2); border-color: var(--line-strong); }
  :root:not([data-theme='light']) .cc-output-row { background: var(--surface-2); border-color: var(--line); }
  :root:not([data-theme='light']) .pal-badge-yes { background: rgba(34, 197, 94, 0.15); color: #4ade80; }
  :root:not([data-theme='light']) .pal-badge-no { background: rgba(239, 68, 68, 0.12); color: #f87171; }
  :root:not([data-theme='light']) .pal-info { background: var(--surface-2); }
  :root:not([data-theme='light']) .lc-op-btn { background: var(--surface-2); border-color: var(--line-strong); }
  :root:not([data-theme='light']) .lc-op-btn:hover { border-color: var(--accent); }
  :root:not([data-theme='light']) .dlr-dup-item { background: var(--surface-2); border-color: var(--line); }
  :root:not([data-theme='light']) .dlr-dup-count { background: rgba(99, 102, 241, 0.2); }
  :root:not([data-theme='light']) .td-added { background: rgba(34, 197, 94, 0.12); color: #4ade80; }
  :root:not([data-theme='light']) .td-removed { background: rgba(239, 68, 68, 0.12); color: #f87171; }
  :root:not([data-theme='light']) .td-word-add { background: rgba(34, 197, 94, 0.35); }
  :root:not([data-theme='light']) .td-word-del { background: rgba(239, 68, 68, 0.3); }
  :root:not([data-theme='light']) .fr-highlight { background: rgba(250, 204, 21, 0.3); }
  :root:not([data-theme='light']) .data-table th { border-color: var(--line-strong); }
  :root:not([data-theme='light']) .data-table td { border-color: var(--line); }
  :root:not([data-theme='light']) .data-table .dt-active td { background: rgba(99, 102, 241, 0.15); }
}

/* ═══════════════════════════════════════════
   Stage 9 Phase C2 — Editorial form controls
   Shared by calculators migrated to the new
   card/input-wrap/chip-row/toggle-group system.
   ═══════════════════════════════════════════ */

/* When a per-calc template brings its own `.card` wrapper, the outer
   `.inputs-panel` should disappear so we don't stack two cards. */
.inputs-panel:has(> .card) {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

/* Card — white surface with subtle border, used by both left-col
   inputs and right-col breakdown/chart. */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.card + .card,
.result-hero + .card,
.card.section {
  margin-top: 20px;
}
.card-header {
  padding: 22px 26px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.card-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.015em;
}
.card-title--sm { font-size: 15px; }
.card-hint {
  font-size: 13px;
  color: var(--ink-3);
  font-weight: 500;
}
.card-body { padding: 22px 26px 26px; }

/* Form section — groups fields under a uppercase label. */
.form-section + .form-section,
.form-section + [hidden] + .form-section,
.form-section + .json-error + .form-section,
.form-section + .json-error[hidden] + .form-section {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.form-section-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}
.form-section-title-note {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-3);
}

/* Field — label row + input + optional slider. */
.field { margin-bottom: 18px; }
.field:last-child { margin-bottom: 0; }
.field-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.field-label .aux {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
  font-weight: 500;
}

/* Input wrap — prefix/suffix flanking a stripped input. */
.input-wrap {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.input-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 15%, transparent);
}
.input-wrap .prefix,
.input-wrap .suffix {
  padding: 0 12px;
  font-size: 14px;
  color: var(--ink-3);
  font-weight: 500;
  white-space: nowrap;
  user-select: none;
}
.input-wrap input[type="number"],
.input-wrap input[type="text"] {
  flex: 1;
  min-width: 0;
  padding: 12px;
  font-size: 16px;
  font-family: inherit;
  font-weight: 500;
  color: var(--ink);
  background: transparent;
  border: 0;
  outline: none;
  -moz-appearance: textfield;
}
.input-wrap input::-webkit-outer-spin-button,
.input-wrap input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Slider row — range + tick labels. */
.slider-wrap { margin-top: 10px; }
.slider-wrap input[type="range"] {
  width: 100%;
  height: 4px;
  appearance: none;
  background: var(--line);
  border-radius: 999px;
  outline: none;
}
.slider-wrap input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--surface);
  box-shadow: 0 0 0 1px var(--accent);
  cursor: pointer;
}
.slider-wrap input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--surface);
  box-shadow: 0 0 0 1px var(--accent);
  cursor: pointer;
}
.slider-ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 11px;
  color: var(--ink-3);
  font-family: var(--font-mono);
}

/* Two-column layout for compact fields (tax + insurance). */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 520px) {
  .two-col { grid-template-columns: 1fr; }
}
/* Equal-height labels so input rows underneath align across the columns
 * even when one label is plain text and the other contains an inline
 * toggle group (e.g. yr / mo on the loan calculator's term field). */
.two-col .field-label {
  min-height: 32px;
}

/* Chip row — segmented control for preset values (loan term). */
.chip-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.chip-row[hidden] { display: none; }
.chip {
  padding: 8px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.chip:hover { border-color: var(--accent); color: var(--ink); }
.chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Toggle group — %/$ two-button switcher inline with field labels.
   Overrides the older `.toggle-btn.is-active` rule by also supporting
   the `.active` class produced by calc-runtime's bindToggleGroup. */
.toggle-group {
  display: inline-flex;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface);
}
.toggle-btn {
  padding: 4px 12px;
  border: 0;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.toggle-btn:hover:not(.active):not(.is-active) {
  background: var(--surface-2);
  color: var(--ink-2);
}
.toggle-btn.active,
.toggle-btn.is-active {
  background: var(--accent);
  color: #fff;
}

/* Tabs — soft pill group (amortization yearly/monthly). */
.tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--surface-2);
  border-radius: 12px;
}
.tab {
  padding: 8px 16px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-3);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
  font-family: inherit;
}
.tab:hover:not(.active) { color: var(--ink-2); }
.tab.active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

/* ═══════════════════════════════════════════
   Result hero — extended for mortgage-style
   big-number + cents + sub-stat row.
   ═══════════════════════════════════════════ */
.result-hero .result-value .cents {
  font-size: 0.6em;
  opacity: 0.85;
  margin-left: 2px;
  font-weight: 600;
}
.result-hero .result-value .per {
  display: block;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  letter-spacing: 0;
  margin-top: 8px;
  font-variant-numeric: normal;
}
.result-sub {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.result-sub-item { min-width: 0; }
.result-sub-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  margin-bottom: 4px;
}
.result-sub-value {
  font-size: 15px;
  color: #fff;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Cards stacked in the right column. */
.breakdown-card,
.chart-card {
  margin-top: 16px;
}

/* Breakdown grid — connected rows with hairline separators. */
.breakdown-grid {
  display: grid;
  gap: 2px;
  background: var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
}
/* Restore the [hidden] HTML attribute — `display: grid` above defeats the UA
   default. The length-converter result panel keeps a hidden flat grid for
   legacy script/test references; without this it leaks into the page. */
.breakdown-grid[hidden] { display: none; }
.breakdown-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: var(--surface);
  font-size: 14px;
  color: var(--ink-2);
}
.breakdown-label {
  display: flex;
  align-items: center;
  gap: 10px;
}
.breakdown-value {
  font-weight: 600;
  color: var(--ink);
}
.breakdown-row.total {
  background: var(--surface-2);
  font-weight: 700;
  color: var(--ink);
}
.breakdown-row.total .breakdown-label { font-weight: 600; }
.breakdown-label {
  display: flex;
  align-items: center;
  gap: 8px;
}
.breakdown-value {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ink);
}
/* Scoped to the breakdown grid to avoid colliding with legacy `.dot` usages
   in the hero-meta + homepage markers. */
.breakdown-label .dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-3);
  flex-shrink: 0;
}
.breakdown-label .dot--accent { background: var(--accent); }
.breakdown-label .dot--amber { background: var(--amber); }
.breakdown-label .dot--rose { background: var(--rose); }

/* In breakdown rows, the color dots are rounded squares (per mockup). */
.breakdown-label .dot { border-radius: 2px; }

/* Macro split bar — 3 proportional segments (protein/carbs/fat). */
.macro-split {
  display: flex;
  height: 10px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--line);
  margin-bottom: 14px;
}
.macro-seg { height: 100%; transition: flex 0.2s ease; }
.macro-seg--protein { background: var(--accent); }
.macro-seg--carbs   { background: var(--amber); }
.macro-seg--fat     { background: var(--rose); }

/* Donut chart — SVG-based, 148×148, 3 segments. */
.chart-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.donut {
  position: relative;
  width: 148px;
  height: 148px;
  flex-shrink: 0;
}
.donut svg {
  transform: rotate(-90deg);
  display: block;
}
.donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
  gap: 2px;
}
.donut-center-label {
  font-size: 11px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  margin-bottom: 2px;
  max-width: 88px;
  line-height: 1.2;
  overflow-wrap: break-word;
}
.donut-center-value {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.chart-wrap .donut-legend {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 140px;
}
/* Inside the donut chart card, stack label above value within each legend
 * row so long localized labels (e.g. Lithuanian "Pagrindinė suma") and the
 * accompanying "25 000 € · 85%" string don't try to share one line and wrap
 * awkwardly when the column is narrow. */
.chart-wrap .legend-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: 13px;
  color: var(--ink-2);
  gap: 2px;
}
.chart-wrap .legend-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  white-space: nowrap;
}
.chart-wrap .legend-val {
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  font-weight: 600;
  /* Indent under the swatch + gap so the value visually associates with
   * its label rather than the next one. */
  padding-left: 18px;
}
.sw {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}
.sw--accent { background: var(--accent); }
.sw--amber { background: var(--amber); }
.sw--rose { background: var(--rose); }

/* Editorial data table (amortization). */
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
table.data th {
  text-align: left;
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
table.data td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
table.data tr:last-child td { border-bottom: 0; }
.amort-period { font-weight: 600; }
.amort-principal { color: var(--accent); font-weight: 600; }
.amort-interest { color: var(--amber); }
.amort-note td {
  text-align: center;
  color: var(--ink-3);
  font-size: 12px;
  font-style: italic;
  padding: 14px 12px;
}
.amort-show-more-row td {
  text-align: center;
  padding: 14px 12px;
  background: var(--surface-2);
}
.show-more-btn {
  padding: 8px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.show-more-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.amort-progress {
  position: relative;
  height: 6px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
  min-width: 80px;
}
.amort-progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 999px;
}

/* Mono helper used by inline result numbers. */
.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* On tablet/mobile the right column un-sticks (already handled in the
   existing @media block at line 143); also tighten donut/legend layout. */
@media (max-width: 560px) {
  .result-sub { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .result-sub-value { font-size: 13px; }
  .chart-wrap { justify-content: center; gap: 16px; }
  .card-body { padding: 18px; }
  .card-header { padding: 14px 18px; }
}

/* ─── Field aux (cross-unit echo under inputs) ─────────────────── */
.field-aux {
  margin-top: 6px;
  font-size: 12px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════
   Mortgage — LTV badge, PMI note, savings
   insight, and extended breakdown/donut colors.
   ═══════════════════════════════════════════ */

/* Three-column grid for compact fields (tax + insurance + HOA). */
.three-col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  align-items: end;
}
.three-col > .field { margin-bottom: 0; }
@media (max-width: 720px) {
  .three-col { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 460px) {
  .three-col { grid-template-columns: 1fr; }
}

/* LTV badge — sits inside the hero eyebrow row, recolored by tier. */
.ltv-badge {
  margin-left: auto;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: none;
  font-variant-numeric: tabular-nums;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.ltv-badge--ok    { background: rgba(34, 197, 94, 0.22);  border-color: rgba(34, 197, 94, 0.45); }
.ltv-badge--warn  { background: rgba(250, 204, 21, 0.22); border-color: rgba(250, 204, 21, 0.45); }
.ltv-badge--alert { background: rgba(239, 68, 68, 0.24);  border-color: rgba(239, 68, 68, 0.5); }

/* PMI drop-off note under the hero value. */
.result-pmi-note {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.88);
  font-size: 12.5px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.4;
}
.result-pmi-note[hidden] { display: none; }
.result-pmi-note .mono { color: #fff; font-weight: 700; }
.pmi-note-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #a5b4fc;
  box-shadow: 0 0 0 3px rgba(165, 180, 252, 0.22);
  flex-shrink: 0;
}

/* Savings insight callout — sits between hero and breakdown card. */
.insight-card {
  margin-top: 16px;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.08), rgba(16, 185, 129, 0.12));
  border: 1px solid rgba(34, 197, 94, 0.28);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
}
.insight-card__accent {
  width: 4px;
  align-self: stretch;
  border-radius: 2px;
  background: linear-gradient(180deg, #22c55e, #0ea5e9);
  flex-shrink: 0;
}
.insight-card__body { flex: 1; min-width: 0; }
.insight-card__title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #047857;
  margin-bottom: 6px;
}
.insight-card__text {
  font-size: 14px;
  color: var(--ink);
  line-height: 1.55;
}
.insight-card__text strong {
  font-weight: 700;
  color: #047857;
}

/* Dark-theme variants for the insight card + badge text readability. */
[data-theme='dark'] .insight-card {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(16, 185, 129, 0.16));
  border-color: rgba(34, 197, 94, 0.4);
}
[data-theme='dark'] .insight-card__title,
[data-theme='dark'] .insight-card__text strong {
  color: #6ee7b7;
}

/* New breakdown / donut colors — HOA (teal) and PMI (indigo). */
.breakdown-label .dot--teal   { background: #14b8a6; }
.breakdown-label .dot--indigo { background: #6366f1; }
.sw--teal    { background: #14b8a6; }
.sw--indigo  { background: #6366f1; }
.sw--interest   { background: #f59e0b; }
.sw--principal  { background: var(--accent); }

/* ─── Inline explainer tooltips ─────────────────────────────── */
.info-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 6px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink-3);
  font-size: 9px;
  font-weight: 700;
  cursor: help;
  position: relative;
  vertical-align: 1px;
  user-select: none;
  outline: none;
  transition: border-color 0.15s, color 0.15s;
}
.info-tip:hover,
.info-tip:focus {
  border-color: var(--accent);
  color: var(--accent);
}
.info-tip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: #fff;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.45;
  white-space: normal;
  width: max-content;
  max-width: 240px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 100;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.info-tip::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--ink);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}
.info-tip:hover::after,
.info-tip:focus::after,
.info-tip:hover::before,
.info-tip:focus::before {
  opacity: 1;
}

/* ─── Hero tagline + hero actions ───────────────────────────── */
.result-tagline {
  margin: 14px 0 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.5;
}
.result-tagline strong {
  color: #fff;
  font-weight: 700;
}
.result-tagline .mono {
  color: #fff;
}
.result-hero__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.hero-action {
  flex: 1 1 auto;
  min-width: 130px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  font-family: inherit;
}
.hero-action:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.3);
}
.hero-action:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: 2px;
}

/* ─── Scenario compare card ─────────────────────────────────── */
.compare-card { margin-top: 16px; }
.card-link {
  background: transparent;
  border: 0;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  font-family: inherit;
}
.card-link:hover { color: var(--accent); background: var(--surface-2); }
.compare-grid {
  display: grid;
  gap: 10px;
}
.compare-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.compare-row:last-child { border-bottom: 0; }
.compare-label {
  font-size: 13px;
  color: var(--ink-2);
  font-weight: 500;
}
.compare-current {
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
}
.compare-delta {
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 70px;
  text-align: right;
}
.delta--good { color: #059669; }
.delta--bad  { color: #dc2626; }
.delta--flat { color: var(--ink-3); }
[data-theme='dark'] .delta--good { color: #34d399; }
[data-theme='dark'] .delta--bad  { color: #f87171; }

/* ─── Principal-vs-interest area chart ──────────────────────── */
.area-chart-card { margin-top: 16px; }

/* Loan calculator — balance-over-time chart layout. Y-axis labels sit
 * in a fixed-width column to the left of the SVG; the legend strip
 * sits below the SVG inside the card body. */
.loan-spark-card .loan-spark-grid {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 8px;
  align-items: stretch;
}
.loan-spark-yaxis {
  position: relative;
  height: 138px; /* svg 120 + xlabels 18 */
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  text-align: right;
  padding-right: 4px;
}
.loan-spark-yaxis span {
  position: absolute;
  right: 4px;
  white-space: nowrap;
}
.loan-spark-yaxis__top { top: -2px; }
.loan-spark-yaxis__mid { top: 56px; transform: translateY(-50%); }
.loan-spark-yaxis__bot { top: 110px; }
.loan-spark-card .loan-spark-legend {
  margin-top: 10px;
  font-size: 12px;
  color: var(--ink-2);
}

/* Credit-card payoff — full-width balance-over-time chart. Same layout
 * as the loan calculator's sparkline: y-axis gutter, SVG body, legend
 * strip below. */
.ccp-spark-card .ccp-spark-grid {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 8px;
  align-items: stretch;
}
.ccp-spark-yaxis {
  position: relative;
  height: 138px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  text-align: right;
  padding-right: 4px;
}
.ccp-spark-yaxis span {
  position: absolute;
  right: 4px;
  white-space: nowrap;
}
.ccp-spark-yaxis__top { top: -2px; }
.ccp-spark-yaxis__mid { top: 56px; transform: translateY(-50%); }
.ccp-spark-yaxis__bot { top: 110px; }
.ccp-spark-card .ccp-spark-legend {
  margin-top: 10px;
  font-size: 12px;
  color: var(--ink-2);
}
.area-chart {
  position: relative;
  width: 100%;
  padding-bottom: 4px;
}
.area-chart svg {
  width: 100%;
  height: 180px;
  display: block;
  overflow: visible;
}
.area-chart__grid line {
  stroke: var(--line);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}
.area-chart__interest-fill {
  fill: rgba(245, 158, 11, 0.18);
  stroke: none;
}
.area-chart__principal-fill {
  fill: color-mix(in srgb, var(--accent) 14%, transparent);
  stroke: none;
}
.area-chart__interest-line {
  fill: none;
  stroke: #f59e0b;
  stroke-width: 2;
  stroke-linejoin: round;
}
.area-chart__principal-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linejoin: round;
}
.area-chart__crossover {
  stroke: var(--ink-3);
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
}
.area-chart__crossover-label {
  position: absolute;
  top: 4px;
  transform: translateX(6px);
  color: var(--ink-2);
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font-mono);
  white-space: nowrap;
  pointer-events: none;
}
.area-chart__crossover-label[hidden] { display: none; }
.area-chart__xlabels {
  position: relative;
  height: 18px;
  margin-top: 6px;
  font-size: 11px;
  color: var(--ink-3);
  font-family: var(--font-mono);
}
.area-chart__xlabels span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}
.area-chart__legend {
  display: flex;
  gap: 18px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--ink-2);
}
.area-chart__legend .legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
}

/* ─── Amortization crossover / equity markers ───────────────── */
.amort-row--crossover td,
.amort-row--equity td {
  background: color-mix(in srgb, var(--accent-soft) 75%, transparent);
}
.amort-chip {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: 1px;
}
.amort-chip--crossover {
  background: rgba(245, 158, 11, 0.18);
  color: #b45309;
}
.amort-chip--equity {
  background: rgba(34, 197, 94, 0.18);
  color: #047857;
}
[data-theme='dark'] .amort-chip--crossover { color: #fbbf24; }
[data-theme='dark'] .amort-chip--equity    { color: #6ee7b7; }

/* ─── Mobile sticky payment bar ─────────────────────────────── */
.mobile-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: none;
  align-items: center;
  gap: 14px;
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08);
  transform: translateY(100%);
  transition: transform 0.25s ease;
}
.mobile-sticky.is-visible {
  transform: translateY(0);
}
.mobile-sticky__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  font-weight: 600;
}
.mobile-sticky__value {
  flex: 1;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.mobile-sticky__toggle {
  padding: 8px 14px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
@media (max-width: 1023px) {
  .mobile-sticky { display: flex; }
}

/* ─── BMI gauge (horizontal segmented scale with marker) ───────── */
.gauge { display: flex; flex-direction: column; gap: 10px; }

.gauge-track {
  position: relative;
  display: flex;
  height: 14px;
  border-radius: 999px;
  overflow: visible;
  background: var(--surface-2);
}
.gauge-seg {
  height: 100%;
  min-width: 0;
}
.gauge-seg:first-child { border-top-left-radius: 999px; border-bottom-left-radius: 999px; }
.gauge-seg:last-child  { border-top-right-radius: 999px; border-bottom-right-radius: 999px; }
/* `.gauge-marker` is the actual last child of `.gauge-track`, so the
   :last-child rule above never matches the obese segment. Pin the
   right-hand rounded corners explicitly so the pill stays closed. */
.gauge-seg--obese {
  border-top-right-radius: 999px;
  border-bottom-right-radius: 999px;
}

.gauge-seg--under  { background: #3B82F6; }
.gauge-seg--normal { background: var(--accent, #22C55E); }
.gauge-seg--over   { background: var(--amber, #F59E0B); }
.gauge-seg--obese  { background: var(--rose, #EF4444); }

/* BAC zones — safe / reduced / impaired / over legal limit. */
.gauge-seg--bac-safe     { background: var(--accent, #22C55E); }
.gauge-seg--bac-caution  { background: var(--amber, #F59E0B); }
.gauge-seg--bac-impaired { background: #F97316; }
.gauge-seg--bac-illegal  { background: var(--rose, #EF4444); }
.gauge-seg--bac-illegal {
  border-top-right-radius: 999px;
  border-bottom-right-radius: 999px;
}
.sw--bac-safe     { background: var(--accent, #22C55E); }
.sw--bac-caution  { background: var(--amber, #F59E0B); }
.sw--bac-impaired { background: #F97316; }
.sw--bac-illegal  { background: var(--rose, #EF4444); }

/* Body-fat "fitness" band — teal sits between athletes (green) and
   average (amber) on the 5-segment body-fat gauge. */
.gauge-seg--fitness { background: #14B8A6; }
.sw--fitness        { background: #14B8A6; }

.gauge-marker {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: left 0.18s ease;
}
.gauge-marker-pin {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--surface);
  border: 3px solid var(--ink);
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
.gauge-marker-label {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

.gauge-labels {
  position: relative;
  height: 18px;
  margin-top: 18px;
  color: var(--ink-3);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.gauge-labels span {
  position: absolute;
  transform: translateX(-50%);
}
.gauge-labels span:nth-child(1) { left: 0%; }
.gauge-labels span:nth-child(2) { left: 11.67%; }
.gauge-labels span:nth-child(3) { left: 33.33%; }
.gauge-labels span:nth-child(4) { left: 50%; }
.gauge-labels span:nth-child(5) { left: 100%; }

.gauge-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--ink-2);
}
.gauge-legend .legend-item { display: inline-flex; align-items: center; gap: 6px; }
.gauge-legend .sw {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}
.sw--under  { background: #3B82F6; }
.sw--normal { background: var(--accent, #22C55E); }
.sw--over   { background: var(--amber, #F59E0B); }
.sw--obese  { background: var(--rose, #EF4444); }

/* BMI tip card keeps prose styling minimal. */
.tip-body {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
}

/* ═══════════════════════════════════════════
   Phase C2 — additional patterns for percentage,
   age, length converter, and json formatter.
   ═══════════════════════════════════════════ */

/* Date input: normalize native chrome inside .input-wrap. */
.input-wrap--date {
  padding-right: 8px;
}
.input-wrap input[type="date"] {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  font-size: 15px;
  font-family: var(--font-mono);
  color: var(--ink);
  background: transparent;
  border: 0;
  outline: none;
}
.input-wrap input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.6;
}
.input-wrap input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* Readonly result-side input (length converter "To" side). */
.input-wrap--readonly {
  background: var(--surface-2);
}
.input-wrap--readonly input {
  cursor: default;
}

/* Dynamic rows for commission tiers and stacked discounts. */
.tier-row {
  margin-bottom: 8px;
}
.tier-row__inputs {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.tier-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.tier-field__label {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.input-wrap--sm {
  min-height: 36px;
}
.input-wrap--sm input[type="number"] {
  padding: 6px 10px;
  font-size: 14px;
}
.input-wrap--sm .prefix,
.input-wrap--sm .suffix {
  padding: 6px 10px;
  font-size: 13px;
}
.tier-remove {
  flex: 0 0 32px;
  height: 36px;
  width: 32px;
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  transition: color .12s ease, border-color .12s ease;
}
.tier-remove:hover {
  color: var(--danger, #d04a3a);
  border-color: var(--danger, #d04a3a);
}
.tier-remove--placeholder {
  visibility: hidden;
  pointer-events: none;
}

/* ── Discount calculator: labeled tiers + pct/amt toggle + savings bar ── */
.tier-row--discount .tier-row__inputs {
  flex-wrap: wrap;
  row-gap: 6px;
  align-items: center;
}
.discount-label {
  flex: 1 1 120px;
  min-width: 0;
  height: 36px;
  padding: 6px 10px;
  /* Match the adjacent `.input-wrap` (1.5px) so label + value rows
   * have the same border weight and don't look like two different
   * components stitched together. */
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.discount-label:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 15%, transparent);
}
.discount-label::placeholder { color: var(--ink-3); }

.tier-type-toggle {
  display: inline-flex;
  flex: 0 0 auto;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface);
  height: 36px;
}
.tier-type-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 0 10px;
  min-width: 32px;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.tier-type-btn + .tier-type-btn { border-left: 1px solid var(--line); }
.tier-type-btn:hover { color: var(--ink); }
.tier-type-btn.active {
  background: var(--accent);
  color: #fff;
}
.discount-value-wrap { flex: 0 0 120px; min-width: 100px; }

/* Result hero — currency picker + savings bar. */
.result-eyebrow-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.result-eyebrow-row .result-eyebrow { margin-bottom: 0; }
.hero-currency-label { display: inline-flex; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.hero-currency {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255, 255, 255, 0.1) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='white' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 8px center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 22px 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background .12s ease, border-color .12s ease;
}
.hero-currency:hover {
  background-color: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.32);
}
.hero-currency:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: 2px;
}
.hero-currency option { color: #111; background: #fff; }

.savings-bar {
  margin: 14px 0;
}
.savings-bar:empty { display: none; }
.savings-bar__track {
  display: flex;
  width: 100%;
  height: 14px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.savings-bar__seg {
  position: relative;
  height: 100%;
  min-width: 2px;
  transition: width .18s ease;
}
.savings-bar__seg + .savings-bar__seg {
  box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.15);
}
.savings-bar__legend {
  display: flex;
  width: 100%;
  margin-top: 8px;
  gap: 0;
}
.savings-bar__legend-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.88);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
}
.savings-bar__legend-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.savings-bar__legend-swatch {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
  box-shadow: none;
}
.savings-bar__seg--final,
.savings-bar__legend-swatch.savings-bar__seg--final { background: rgba(255, 255, 255, 0.88); }
.savings-bar__seg--save,
.savings-bar__seg--save.save-1,
.savings-bar__legend-swatch.savings-bar__seg--save,
.savings-bar__legend-swatch.savings-bar__seg--save.save-1 { background: #f5a524; }
.savings-bar__seg--save.save-2,
.savings-bar__legend-swatch.savings-bar__seg--save.save-2 { background: #f07a3f; }
.savings-bar__seg--save.save-3,
.savings-bar__legend-swatch.savings-bar__seg--save.save-3 { background: #d65a7a; }
.savings-bar__seg--save.save-4,
.savings-bar__legend-swatch.savings-bar__seg--save.save-4 { background: #8b5cf6; }

/* Countdown big-digit hero grid (days/hours/minutes/seconds). */
.countdown-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 16px;
}
.countdown-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.countdown-num {
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.countdown-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
@media (max-width: 520px) {
  .countdown-num { font-size: 24px; }
  .countdown-cell { padding: 10px 6px; }
}

/* Panel groups inside a card that swap via chip-row (margin, discount). */
.panel-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Native select wrapped in input-wrap shell (sales-tax, vat country lists). */
.input-wrap--select {
  padding: 0;
}
.input-wrap--select select {
  flex: 1;
  min-width: 0;
  padding: 10px 36px 10px 14px;
  font-size: 15px;
  font-family: var(--font-sans);
  color: var(--ink);
  background: transparent;
  border: 0;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3e%3cpath fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}

/* Chip row that wraps when unit set is long (length converter). */
.chip-row--wrap {
  flex-wrap: wrap;
  gap: 8px 8px;
}
.chip-row--wrap .chip {
  line-height: 1.25;
  text-align: center;
  white-space: normal;
}

/* Highlighted from/to rows inside the conversion grid. Keeps the parent row's
   padding so the right-aligned value stays in the same column as non-accent
   rows — only the background tint and value colour change. */
.breakdown-row--accent {
  background: var(--accent-soft);
  color: var(--ink);
}
.breakdown-row--accent .breakdown-value {
  color: var(--accent);
}

/* Pregnancy-weight trimester rows: replace the regular dot with a "you" pill
   on the active row so the highlighted state has a single, readable indicator
   instead of a dot+badge stack. The pill colour matches the trimester swatch
   (accent/teal/amber). The label wrapper has min-width:0 so long localized
   trimester names wrap inside the label column rather than pushing the badge
   onto the next line. */
.pw-you-badge {
  display: inline-block;
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
}
.pw-you-badge--teal   { background: #14b8a6; }
.pw-you-badge--amber  { background: var(--amber, #f59e0b); }
.pw-you-badge--accent { background: var(--accent); }
.pw-tri-name { min-width: 0; }
/* Keep the accent row inside the table edges (parent has overflow:hidden). */
.pw-tri-row--current { margin: 0 !important; padding: 14px 18px !important; }

/* Length converter summary card. */
.summary-card { }
.conv-summary { display: flex; flex-direction: column; gap: 6px; }
.conv-summary__big {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
}
.conv-summary__ratio {
  font-size: 13px;
  color: var(--ink-3);
  font-family: var(--font-mono);
}

/* Stats card (json formatter right column) — shares breakdown layout. */
.stats-card { }

/* ── JSON formatter ── */

.json-card .card-header {
  flex-wrap: wrap;
  gap: 12px;
}
.json-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.json-actions .chip {
  padding: 6px 12px;
  font-size: 12px;
}

.json-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 720px) {
  .json-grid { grid-template-columns: 1fr; }
}

.json-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.json-pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.json-textarea,
.json-output {
  width: 100%;
  min-height: 340px;
  max-height: 560px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.55;
  overflow: auto;
  box-sizing: border-box;
}
.json-textarea {
  resize: vertical;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.json-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.json-output {
  margin: 0;
  white-space: pre;
  tab-size: 2;
}

.json-status {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.json-status-valid { color: var(--accent); }
.json-status-error { color: var(--rose); }
.json-hint {
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.json-error {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--rose-soft);
  border: 1px solid var(--rose);
  border-radius: var(--radius-md);
  color: var(--rose);
}
.json-error-title {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 4px;
}
.json-error-msg {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-2);
}

/* Syntax highlighting tokens. */
.json-key     { color: var(--accent); font-weight: 600; }
.json-string  { color: var(--ink); }
.json-number  { color: var(--amber); }
.json-boolean { color: var(--rose); font-weight: 600; }
.json-null    { color: var(--ink-3); font-style: italic; }

/* ── Case converter ── */

/* Chip row with a two-line preview beneath each label. */
.chip-row--preview {
  gap: 8px;
}
.chip--preview {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 8px 14px;
  text-align: left;
  min-width: 110px;
  max-width: 220px;
  line-height: 1.2;
}
.chip--preview .chip-label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
}
.chip--preview .chip-preview {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  opacity: 0.85;
}
.chip--preview.active .chip-preview {
  color: #fff;
  opacity: 0.9;
}

/* Language badge shown next to "Output" header. */
.cc-lang-badge {
  display: inline-block;
  padding: 1px 6px;
  margin-left: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  vertical-align: middle;
}

/* Diff overlay — highlight changed characters in the output pane. */
.cc-diff-mark {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent);
  border-radius: 2px;
  padding: 0 1px;
}

/* Character distribution — bar per char class. */
.cc-dist {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cc-dist-row {
  display: grid;
  grid-template-columns: 44px 1fr 40px;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}
.cc-dist-label {
  font-family: var(--font-mono);
  color: var(--ink-3);
  text-transform: lowercase;
}
.cc-dist-bar {
  height: 6px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
}
.cc-dist-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.18s ease;
  width: 0%;
}
.cc-dist-val {
  text-align: right;
  color: var(--ink-2);
  font-size: 12px;
}

/* Conventions reference table — compact, accent-chip on the right. */
.cc-conv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.cc-conv-table th {
  text-align: left;
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--line);
}
.cc-conv-table th:last-child { text-align: right; }
.cc-conv-table td {
  padding: 8px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
}
.cc-conv-table td:last-child { text-align: right; }
.cc-conv-table tr:last-child td { border-bottom: none; }
.cc-conv-chip {
  display: inline-block;
  padding: 2px 8px;
  font-size: 12px;
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
}

/* Case-converter action row (mirrors .ci-actions layout). */
.ci-actions + .ci-actions { margin-top: 0; }

/* Keyboard shortcut inline badge. */
.card-hint kbd {
  display: inline-block;
  padding: 1px 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 3px;
  margin: 0 1px;
}

/* Narrow viewports: chip-preview shrinks to one line. */
@media (max-width: 520px) {
  .chip--preview { min-width: 0; max-width: 100%; flex: 1 1 calc(50% - 4px); }
  .chip--preview .chip-preview { font-size: 10px; }
}

/* Percentage tabs: allow wrap on narrow screens (4 modes). */
.tabs {
  flex-wrap: wrap;
}
@media (max-width: 520px) {
  .tabs { display: flex; width: 100%; }
  .tab { flex: 1 1 50%; }
}

/* Geometry shape diagram card — inline SVG with labeled sides/angles. */
.diagram-card .card-body {
  display: flex;
  justify-content: center;
  padding: 20px;
}
.shape-diagram {
  width: 100%;
  max-width: 260px;
  height: auto;
  color: var(--ink-2);
}
.shape-diagram .svg-label {
  font: 600 12px/1 var(--font-sans, system-ui, sans-serif);
  fill: var(--ink);
}
.shape-diagram .svg-aux {
  font: 500 10px/1 var(--font-sans, system-ui, sans-serif);
  fill: var(--ink-3);
}

/* ═══════════════════════════════════════════════════════════════
   Percentage calculator — sentence-style inputs + visual breakdown
   ═══════════════════════════════════════════════════════════════ */

.pct-modes { margin-bottom: 18px; }

.pct-examples-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}
.pct-examples-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  font-weight: 600;
}
.pct-examples .chip {
  padding: 6px 12px;
  font-size: 13px;
}

/* Sentence-style input group.
   Big centered line that reads as natural English; inline inputs are
   sized to hug their contents so the sentence stays scannable. */
.pct-sentence {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 8px;
  padding: 18px 16px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  font-family: var(--font-display, var(--font-body));
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.4;
  margin-bottom: 14px;
}
.s-token {
  color: var(--ink-2);
  white-space: nowrap;
}
.s-token--lead:empty,
.s-token--mid:empty,
.s-token--tail:empty { display: none; }

.s-input {
  display: inline-flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  padding: 2px 8px;
  transition: border-color 0.15s, box-shadow 0.15s;
  min-width: 64px;
}
.s-input:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.s-input__prefix,
.s-input__suffix {
  font-family: var(--font-mono, monospace);
  color: var(--ink-3);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  user-select: none;
}
.s-input__prefix[hidden],
.s-input__suffix:empty { display: none; }
.s-input__prefix { margin-right: 2px; }
.s-input__suffix { margin-left: 2px; }
.s-input .s-input__field,
input.s-input__field {
  flex: 1;
  min-width: 48px;
  max-width: 120px;
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 4px 2px;
  font-family: var(--font-mono, monospace);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  font-variant-numeric: tabular-nums;
  box-shadow: none;
  width: auto;
}
.s-input__field::-webkit-outer-spin-button,
.s-input__field::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.s-input__field[type='number'] { -moz-appearance: textfield; }
.s-input .s-input__field:focus,
input.s-input__field:focus { outline: none; box-shadow: none; border: none; }

.pct-swap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pct-swap:hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}
.pct-swap:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.pct-sliders {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.pct-currency-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.pct-currency-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  font-weight: 600;
}

/* ── Hero additions: confirmation, error, copy, delta colours ── */
.result-confirm {
  margin-top: 10px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--font-mono, monospace);
  font-variant-numeric: tabular-nums;
}
.result-error {
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(239, 68, 68, 0.18);
  border-radius: var(--radius-md);
  color: #ffd5d5;
  font-size: 13px;
  font-weight: 500;
}
.result-hero__actions {
  margin-top: 16px;
  display: flex;
  gap: 8px;
}
.hero-action.is-copied {
  background: rgba(127, 224, 168, 0.3);
  color: #eaffe6;
  border-color: rgba(127, 224, 168, 0.4);
}
.result-hero--up    .result-value { color: #9cf0b8; }
.result-hero--down  .result-value { color: #ffb3b3; }
.result-hero--flat  .result-value { color: #fff; }

/* ── Visual breakdown ─────────────────────────────────────────── */
.viz-card .card-body { padding-top: 14px; }
.pct-visual { display: flex; flex-direction: column; gap: 14px; }

.viz-caption {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
  text-align: center;
}
.viz-caption strong {
  color: var(--ink);
  font-family: var(--font-mono, monospace);
  font-variant-numeric: tabular-nums;
}
.viz-caption--up    { color: var(--accent); }
.viz-caption--down  { color: var(--rose); }

/* 10×10 grid — each cell = 1 %. Partial cell uses a CSS variable
   to render a vertical fill for fractional percentages. */
.pct-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 3px;
  max-width: 260px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
}
.pct-grid__cell {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
.pct-grid__cell--full {
  background: var(--accent);
  border-color: var(--accent);
}
.pct-grid__cell--partial::after {
  content: '';
  position: absolute;
  inset: 0 0 0 0;
  width: var(--fill, 0%);
  background: var(--accent);
}

/* Ratio / inverse bars. */
.pct-bar { width: 100%; }
.pct-bar__track {
  position: relative;
  height: 28px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.pct-bar__fill {
  height: 100%;
  background: var(--accent);
  border-radius: inherit;
  transition: width 0.2s ease-out;
}
.pct-bar__scale {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 12px;
  color: var(--ink-3);
  font-family: var(--font-mono, monospace);
}

/* Delta bars — two stacked mini-bars for % change mode. */
.pct-delta { display: flex; flex-direction: column; gap: 10px; }
.pct-delta__row {
  display: grid;
  grid-template-columns: 50px 1fr auto;
  align-items: center;
  gap: 10px;
}
.pct-delta__label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-3);
  font-weight: 600;
}
.pct-delta__bar {
  height: 18px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.pct-delta__fill {
  height: 100%;
  transition: width 0.2s ease-out;
  border-radius: inherit;
}
.pct-delta__fill--from { background: var(--ink-3); }
.pct-delta__fill--to.pct-delta__fill--up   { background: var(--accent); }
.pct-delta__fill--to.pct-delta__fill--down { background: var(--rose); }
.pct-delta__fill--to.pct-delta__fill--flat { background: var(--ink-2); }
.pct-delta__val {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* ── Related + Equation paired row (collapses on narrow). ─────── */
.pct-results-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
  margin-top: 20px;
}
.pct-results-row > .card { margin: 0; }
@media (max-width: 720px) {
  .pct-results-row { grid-template-columns: 1fr; }
}

/* ── Equation card compacted for narrower result panel. ───────── */
.pct-eq-card .card-body { padding: 18px 16px 22px; text-align: center; }
.pct-eq {
  font-size: 18px !important;
  padding: 14px 18px !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px !important;
}

/* ── Related results list ─────────────────────────────────────── */
.related-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.related-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.related-row__label {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.4;
}
.related-row__value {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.related-row[data-kind='complement'] { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.related-row[data-kind='up']   .related-row__value { color: var(--accent); }
.related-row[data-kind='down'] .related-row__value { color: var(--rose); }

/* ── Responsive — keep sentence readable on mobile ────────────── */
@media (max-width: 560px) {
  .pct-sentence {
    font-size: 16px;
    padding: 14px 12px;
    gap: 5px 7px;
  }
  .s-input .s-input__field,
  input.s-input__field { font-size: 15px; max-width: 96px; }
  .pct-examples { flex-wrap: wrap; }
  .pct-eq { font-size: 15px !important; padding: 10px 12px !important; }
  .pct-grid { max-width: 200px; }
}

/* ═══════════════════════════════════════════════════════════════════
   VAT calculator — scoped styles for the overhauled UI.
   Everything below is namespaced with .vat-* or scoped via .vat-card.
   ═══════════════════════════════════════════════════════════════════ */

/* Subtle "Live" pulse in the card header. */
.vat-card .card-hint.pulse {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
.vat-card .card-hint.pulse .pulse-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  animation: pulse 2s ease-in-out infinite;
}

/* ── Searchable country combobox ──────────────────────────────── */

.vat-combobox { position: relative; }
.vat-combobox__native {
  /* Keep it in DOM for a11y + no-JS, hide visually. */
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  opacity: 0; pointer-events: none;
}
.vat-combobox__btn {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  min-height: 46px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.vat-combobox__btn:hover { border-color: var(--accent-2); }
.vat-combobox__btn:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.vat-combobox__btn .cb-flag { font-size: 18px; line-height: 1; }
.vat-combobox__btn .cb-name { flex: 1; min-width: 0; font-weight: 500; }
.vat-combobox__btn .cb-rate {
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-2);
  padding: 2px 8px;
  background: var(--surface-2);
  border-radius: var(--radius-full);
}
.vat-combobox__btn .cb-caret {
  font-size: 10px;
  color: var(--ink-3);
  transition: transform var(--transition-base);
}
.vat-combobox__btn[aria-expanded='true'] .cb-caret { transform: rotate(180deg); }

.vat-combobox__panel {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  z-index: 20;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  max-height: 320px;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.vat-combobox__panel[hidden] { display: none; }
.vat-combobox__search {
  padding: 10px;
  border-bottom: 1px solid var(--line);
}
.vat-combobox__search input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font: inherit;
  color: var(--ink);
  box-sizing: border-box;
}
.vat-combobox__search input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
}
.vat-combobox__list {
  flex: 1;
  overflow-y: auto;
  margin: 0; padding: 4px 0;
  list-style: none;
}
.cb-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 14px;
  color: var(--ink);
  transition: background-color 0.08s ease;
}
.cb-item .cb-flag { font-size: 18px; line-height: 1; flex-shrink: 0; }
.cb-item .cb-name { flex: 1; min-width: 0; }
.cb-item .cb-rate {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.cb-item .cb-rate-reduced { color: var(--ink-3); }
.cb-item:hover,
.cb-item.is-active { background: var(--accent-soft); }

/* ── Stacked rate-type toggle (Standard / Reduced / Zero) ─────── */

.toggle-group--stacked {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  padding: 4px;
  background: var(--surface-2);
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  gap: 2px;
  overflow: visible;
}
.toggle-group--stacked .toggle-btn {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px;
  padding: 8px 6px;
  min-height: 48px;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-2);
  font-size: 12px;
}
.toggle-group--stacked .toggle-btn .tg-main {
  font-weight: 600;
  font-size: 13px;
}
.toggle-group--stacked .toggle-btn .tg-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.toggle-group--stacked .toggle-btn:hover:not(.active):not(:disabled) {
  background: var(--surface);
  color: var(--ink);
}
.toggle-group--stacked .toggle-btn.active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.toggle-group--stacked .toggle-btn.active .tg-sub { color: var(--accent); }
.toggle-group--stacked .toggle-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Mode swap button (inline with field label) ───────────────── */

.vat-swap-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--ink-2);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: all 0.15s;
}
.vat-swap-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
.vat-swap-btn:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ── Preset chip row (amount quick-pick) ──────────────────────── */

.chip-row--presets {
  margin-top: 8px;
  gap: 6px;
}
.chip-row--presets .chip {
  padding: 6px 12px;
  font-size: 12px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
/* QR size presets: equal-width chips with comfortable spacing. */
.qr-card .chip-row--presets { gap: 10px; }
.qr-card .chip-row--presets .chip { flex: 1; padding: 8px 14px; font-size: 13px; }
.qr-card .chip-row--presets + .input-wrap { margin-top: 10px; }

/* ── Multi-line (invoice) mode ────────────────────────────────── */

.vat-multiline-field { padding-top: 4px; }

.vat-switch {
  display: inline-flex; align-items: center; gap: 10px;
  cursor: pointer;
  user-select: none;
}
.vat-switch input { position: absolute; opacity: 0; pointer-events: none; }
.vat-switch__track {
  width: 36px; height: 20px;
  background: var(--line-strong);
  border-radius: var(--radius-full);
  position: relative;
  transition: background-color var(--transition-base);
  flex-shrink: 0;
}
.vat-switch__thumb {
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: #fff;
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base);
}
.vat-switch input:checked + .vat-switch__track { background: var(--accent); }
.vat-switch input:checked + .vat-switch__track .vat-switch__thumb {
  transform: translateX(16px);
}
.vat-switch input:focus-visible + .vat-switch__track {
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.vat-switch__label {
  font-size: 13px;
  color: var(--ink-2);
  font-weight: 500;
}

.vat-lines {
  margin-top: 12px;
  padding: 12px;
  background: var(--surface-2);
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
}
.vat-lines__table {
  width: 100%;
  border-collapse: collapse;
}
.vat-lines__table th {
  text-align: left;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  padding: 6px 8px;
}
.vat-lines__table th.num { text-align: right; }
.vat-lines__table td {
  padding: 4px;
  vertical-align: middle;
}
.vat-lines__table td:nth-child(2) input { text-align: right; }
.vat-line-desc,
.vat-line-amt {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  box-sizing: border-box;
}
.vat-line-amt {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.vat-line-desc:focus,
.vat-line-amt:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.vat-line-remove {
  width: 28px; height: 28px;
  border: 0;
  background: transparent;
  color: var(--ink-3);
  font-size: 12px;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.15s;
}
.vat-line-remove:hover {
  background: var(--rose-soft);
  color: var(--rose);
}
.vat-line-add-btn {
  margin-top: 8px;
  padding: 8px 14px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.vat-line-add-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  border-style: solid;
  background: var(--accent-soft);
}

/* ── Result hero: eyebrow chips, value, bar ──────────────────── */

.vat-hero .result-eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
  text-transform: none;
  letter-spacing: 0;
}
.vat-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(4px);
}
.vat-chip--rate {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.vat-chip--mode {
  background: rgba(255, 255, 255, 0.18);
}

.vat-hero__value {
  font-size: clamp(36px, 4.5vw, 64px) !important;
  letter-spacing: -0.035em !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}
@media (max-width: 560px) {
  .vat-hero__value { font-size: clamp(30px, 9vw, 44px) !important; }
}

/* Stacked net/VAT proportion bar on the dark hero. */
.vat-bar {
  display: flex;
  height: 6px;
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-top: 18px;
  background: rgba(255, 255, 255, 0.1);
}
.vat-bar__seg { height: 100%; transition: width 0.2s ease; }
.vat-bar__seg--net {
  background: linear-gradient(90deg, #a4d8bf 0%, #cfe9dc 100%);
}
.vat-bar__seg--vat {
  background: rgba(255, 255, 255, 0.35);
}
.vat-bar__legend {
  display: flex; gap: 16px;
  margin-top: 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
}
.vat-bar__legend i {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 2px;
  margin-right: 6px;
  vertical-align: middle;
}
.vat-bar__dot--net { background: #a4d8bf; }
.vat-bar__dot--vat { background: rgba(255, 255, 255, 0.45); }

/* ── Result sub-rows with inline copy button ──────────────────── */

.result-sub-row {
  display: flex; align-items: center; gap: 6px;
  min-width: 0;
}
.vat-copy-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  padding: 0;
  border: 0;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
  border-radius: 5px;
  cursor: pointer;
  opacity: 0;
  transition: all 0.15s;
  flex-shrink: 0;
}
.result-sub-item:hover .vat-copy-btn,
.breakdown-row:hover .vat-copy-btn,
.vat-copy-btn:focus-visible {
  opacity: 1;
}
.vat-copy-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.vat-copy-btn.is-copied {
  background: rgba(164, 216, 191, 0.25);
  color: #a4d8bf;
  opacity: 1;
}
.vat-copy-btn.is-copied::after {
  content: '✓';
  font-size: 12px;
  position: absolute;
  margin-top: -1px;
}
.vat-copy-btn.is-copied svg { display: none; }

/* Light variant for the white breakdown card. */
.vat-copy-btn--light {
  background: var(--surface-2);
  color: var(--ink-3);
}
.vat-copy-btn--light:hover {
  background: var(--accent-soft);
  color: var(--accent);
}
.vat-copy-btn--light.is-copied {
  background: var(--accent-soft);
  color: var(--accent);
}

.breakdown-value-row {
  display: flex; align-items: center; gap: 6px;
}

/* ── Action buttons (Share / CSV) ─────────────────────────────── */

.vat-actions {
  display: flex; gap: 4px;
}
.vat-action-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--ink-2);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.vat-action-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
.vat-action-btn.is-copied {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}
.vat-action-btn.is-copied::after {
  content: ' ✓';
}
.vat-action-btn svg { flex-shrink: 0; }

/* ── Reduced-rate footnote ────────────────────────────────────── */

.vat-country-note {
  margin: 14px 0 0;
  padding: 10px 12px;
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.5;
}

/* ── Dark-mode tweaks for the overhauled pieces ───────────────── */

[data-theme='dark'] .vat-combobox__panel {
  background: var(--surface);
  border-color: var(--line-strong);
}
[data-theme='dark'] .cb-item:hover,
[data-theme='dark'] .cb-item.is-active { background: var(--accent-soft); }
[data-theme='dark'] .vat-combobox__search input { background: var(--surface-2); }

[data-theme='dark'] .toggle-group--stacked {
  background: var(--surface-2);
  border-color: var(--line);
}
[data-theme='dark'] .toggle-group--stacked .toggle-btn.active {
  background: var(--surface);
}
[data-theme='dark'] .vat-country-note {
  background: var(--accent-soft);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .vat-combobox__panel { background: var(--surface); }
  :root:not([data-theme='light']) .cb-item:hover,
  :root:not([data-theme='light']) .cb-item.is-active { background: var(--accent-soft); }
  :root:not([data-theme='light']) .toggle-group--stacked { background: var(--surface-2); }
  :root:not([data-theme='light']) .toggle-group--stacked .toggle-btn.active { background: var(--surface); }
}

/* ── Responsive ───────────────────────────────────────────────── */

@media (max-width: 560px) {
  .vat-hero .result-eyebrow { gap: 4px; }
  .vat-chip { font-size: 11px; padding: 2px 8px; }
  .chip-row--presets { gap: 4px; }
  .chip-row--presets .chip { padding: 5px 10px; font-size: 11px; }
  .toggle-group--stacked .toggle-btn { min-height: 44px; padding: 6px 4px; }
  .toggle-group--stacked .toggle-btn .tg-main { font-size: 12px; }
  .vat-combobox__btn { padding: 8px 12px; }
  .vat-combobox__btn .cb-rate { font-size: 12px; }
}

/* ═══════════════════════════════════════════
   Sales Tax calculator — additions
   ═══════════════════════════════════════════ */

/* Timestamp line under the combobox — muted, small, but meets AA
   contrast via --ink-3 which is already audited at 4.74:1. */
.aux--timestamp {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: var(--ink-3);
}

.aux-link {
  color: var(--ink-3);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 2px;
}
.aux-link:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

/* City preset chips wrap row — tighter than the amount presets and
   prefixed with a small "Typical cities:" label. */
.stx-city-chips {
  margin-top: 8px;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.stx-city-chips .chip {
  font-size: 12px;
  padding: 4px 10px;
}
.stx-city-chips .chip-rate {
  color: var(--accent);
  font-weight: 600;
  margin-left: 4px;
}
.stx-city-chips .chip--clear {
  color: var(--ink-3);
  border-style: dashed;
}
.stx-city-chips .chip.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.stx-city-chips .chip-row-label {
  font-size: 12px;
  margin-right: 4px;
}
.aux--subtle {
  font-size: 12px;
  color: var(--ink-3);
  font-style: italic;
}

/* Lines table — add qty column sizing. */
.stx-lines__table th.num,
.stx-lines__table td input {
  text-align: right;
}
.stx-lines__table .tax-line-qty {
  max-width: 70px;
}

/* Exemption footnote — reuses vat-country-note base, with a left accent
   bar to read as an informational callout rather than an error. */
.stx-exempt-note {
  border-left: 3px solid var(--accent-2);
  padding-left: 12px;
  margin-top: 12px;
}

/* Receipt-style alternate view inside the breakdown card. */
.stx-receipt-view {
  margin: 0;
  padding: 16px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink);
  white-space: pre;
  overflow-x: auto;
  letter-spacing: 0;
}

/* Contextual next-step nav below the inputs. */
.stx-contextual-nav {
  margin-top: 16px;
}
.stx-contextual-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.stx-contextual-list li a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--ink);
  transition: background var(--transition-fast);
}
.stx-contextual-list li a:hover,
.stx-contextual-list li a:focus-visible {
  background: var(--surface-2);
  outline: none;
}
.stx-contextual-list li a strong {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--accent);
}
.stx-contextual-list li a .aux {
  color: var(--ink-3);
  font-size: 12px;
}

/* Mobile sticky footer — pinned to the bottom of the viewport on
   narrow screens so the hero total stays visible while scrolling
   the inputs. Desktop: hidden. */
.stx-mobile-sticky {
  display: none;
}
@media (max-width: 1023px) {
  .stx-mobile-sticky {
    display: flex;
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 40;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: var(--ink);
    color: #fff;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    pointer-events: none; /* decorative summary; inputs stay interactive */
  }
  .stx-mobile-sticky__label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.75);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .stx-mobile-sticky__value {
    font-size: 18px;
    font-weight: 600;
  }
  /* Give the last section some breathing room so the sticky footer
     doesn't overlap the final CTA / content. */
  .calc-page > section:last-child {
    padding-bottom: 80px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Tip calculator — scenario chips, people stepper, per-person hero
   ═══════════════════════════════════════════════════════════════ */

.chip.chip--stacked {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 14px;
  line-height: 1.15;
  min-width: 64px;
}
.chip--stacked .chip-main {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.chip--stacked .chip-sub {
  font-size: 11px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}
.chip.chip--stacked.active .chip-sub {
  color: rgba(255, 255, 255, 0.85);
}

.tip-scenario-row {
  flex-wrap: wrap;
  gap: 6px;
}

/* ── People stepper ─────────────────────────────────────────── */
.people-stepper {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: stretch;
  /* Matches the natural height of an adjacent `.toggle-group--stacked`
   * (4px padding × 2 + 48px min-height + 1px border × 2) so the two
   * controls line up when sharing a `.two-col` row. */
  min-height: 58px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
}
.people-stepper:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.people-step-btn {
  background: var(--surface-2);
  border: 0;
  color: var(--ink);
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  font-family: inherit;
}
.people-step-btn:hover {
  background: var(--accent-soft);
  color: var(--accent);
}
.people-step-btn:active { transform: scale(0.96); }
.people-stepper__center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  min-width: 0;
}
.people-stepper__center input[type="number"] {
  width: 3ch;
  max-width: 100%;
  background: transparent;
  border: 0;
  outline: 0;
  text-align: right;
  font-size: 18px;
  font-weight: 600;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  padding: 0;
  appearance: textfield;
  -moz-appearance: textfield;
}
.people-stepper__center input::-webkit-outer-spin-button,
.people-stepper__center input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.people-stepper__label {
  font-size: 12px;
  color: var(--ink-3);
  text-transform: lowercase;
  letter-spacing: 0.02em;
}

.people-dots {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  min-height: 10px;
}
.people-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.75;
  animation: tip-dot-in 180ms ease-out both;
}
.people-dots__more {
  font-size: 11px;
  color: var(--ink-3);
  font-family: var(--font-mono);
  margin-left: 2px;
}
@keyframes tip-dot-in {
  from { opacity: 0; transform: scale(0.4); }
  to   { opacity: 0.75; transform: scale(1); }
}

/* ── Per-person hero variant ─────────────────────────────────── */
.result-hero.result-hero--per-person .result-hint {
  color: rgba(255, 255, 255, 0.78);
}
.result-hero.result-hero--per-person .result-value::before {
  content: var(--per-person-each-label, 'Each');
  display: block;
  font-size: 11px;
  font-family: var(--font-sans, inherit);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  -webkit-text-fill-color: rgba(255, 255, 255, 0.6);
  margin-bottom: 2px;
}

/* ── Copy-button feedback ────────────────────────────────────── */
#tip-copy-btn { min-width: 150px; }
#tip-copy-btn svg { vertical-align: -2px; margin-right: 4px; }
#tip-share-btn svg { vertical-align: -2px; margin-right: 4px; }

/* ── Mobile tweaks ───────────────────────────────────────────── */
@media (max-width: 640px) {
  .chip.chip--stacked { padding: 6px 10px; min-width: 58px; }
  .chip--stacked .chip-main { font-size: 11px; }
  .chip--stacked .chip-sub { font-size: 10px; }
  .people-stepper { grid-template-columns: 40px 1fr 40px; height: 42px; }
  .people-stepper__center input[type="number"] { font-size: 16px; }
}

/* ═════════════════════════════════════════════════════════════════════
   Commission calculator — enhanced UX
   ═════════════════════════════════════════════════════════════════════ */

/* Currency selector inline with the "Total sales" field label. */
.commission-card .field-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.currency-wrap { display: inline-flex; align-items: center; }
.currency-select {
  appearance: none; -webkit-appearance: none;
  background: var(--surface-2); border: 1px solid var(--line);
  padding: 4px 22px 4px 8px; border-radius: 6px;
  font-size: 12px; font-weight: 600; color: var(--ink-2);
  cursor: pointer; font-family: inherit;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%236b6b71' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 6px center;
}
.currency-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Slider polish — themed gradient track + larger thumb. */
.range--styled {
  appearance: none; -webkit-appearance: none;
  width: 100%; height: 6px; border-radius: 6px;
  background: linear-gradient(to right, var(--accent) 0%, var(--accent-2) 50%, var(--surface-2) 50%, var(--surface-2) 100%);
  outline: none; cursor: pointer;
}
.range--styled::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 2px solid var(--accent);
  box-shadow: 0 2px 6px rgba(46, 93, 78, 0.25);
  cursor: grab; transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.range--styled::-webkit-slider-thumb:hover { transform: scale(1.1); }
.range--styled::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.05); }
.range--styled::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 2px solid var(--accent);
  box-shadow: 0 2px 6px rgba(46, 93, 78, 0.25); cursor: grab;
}
.range--styled:focus-visible { box-shadow: 0 0 0 3px var(--accent-soft); }

/* Tier rows — drag handle, color swatch, no-cap toggle. */
.tier-rows { display: flex; flex-direction: column; gap: 6px; }
.tier-row--commission { cursor: default; }
.tier-row--commission .tier-row__inputs {
  align-items: stretch; gap: 6px;
  padding: 6px; border-radius: 8px;
  transition: background 0.12s ease;
}
.tier-row--commission:hover .tier-row__inputs { background: var(--surface-2); }
.tier-row--commission.dragging { opacity: 0.5; }
.tier-row--commission .tier-field {
  flex: 1 1 0;
  min-width: 0;
  justify-content: flex-end;
}
.tier-row--commission .tier-field .input-wrap {
  width: 100%;
}
.tier-row--commission .tier-field .input-wrap input {
  flex: 1 1 auto; min-width: 0; width: 100%;
}
.tier-drag {
  flex: 0 0 14px; color: var(--ink-3); cursor: grab;
  font-size: 14px; line-height: 36px; user-select: none;
  letter-spacing: -2px; align-self: flex-end;
}
.tier-drag:active { cursor: grabbing; }
.tier-color {
  flex: 0 0 8px; width: 8px; height: 36px; border-radius: 3px;
  background: var(--accent); align-self: flex-end;
}
.tier-field--rate { flex: 0 0 88px !important; }
.tier-row--commission .tier-field__label {
  height: 20px;
  display: flex;
  align-items: center;
}
.tier-field__label--split {
  justify-content: space-between;
  gap: 8px;
}
.tier-nocap {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0 6px; height: 18px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--surface);
  font-size: 10px; font-weight: 600; color: var(--ink-3);
  cursor: pointer; user-select: none;
  text-transform: none; letter-spacing: 0;
  transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.tier-nocap:hover { border-color: var(--accent); color: var(--ink-2); }
.tier-nocap input { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; pointer-events: none; }
.tier-nocap span { line-height: 1; font-size: 12px; }
.tier-nocap:has(input:checked),
.tier-nocap.is-checked {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
/* Fallback for browsers without :has() — JS adds .is-checked */
.tier-remove {
  align-self: flex-end;
}
.tier-warnings { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.tier-warning {
  padding: 6px 10px; border-radius: 6px;
  background: rgba(234, 179, 8, 0.12); color: #8a6500;
  border: 1px solid rgba(234, 179, 8, 0.25);
  font-size: 12px; line-height: 1.4;
}
[data-theme='dark'] .tier-warning,
html:not([data-theme='light']) .tier-warning { color: #fcd34d; }

/* Commission hero — value column + progress ring. */
.comm-hero__headline {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 4px;
}
.comm-hero__value-col { flex: 1 1 auto; min-width: 0; }
.comm-hero .result-value { margin-bottom: 4px; }
.comm-ring {
  position: relative; flex: 0 0 56px; width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
}
.comm-ring svg { position: absolute; inset: 0; }
.comm-ring__label {
  position: relative; z-index: 1;
  font-size: 12px; font-weight: 700; color: #fff;
  font-variant-numeric: tabular-nums;
}
#r-ring { transition: stroke-dashoffset 0.4s ease; }

/* Empty state. */
.comm-empty {
  margin-top: 10px; padding: 10px 12px; border-radius: 8px;
  background: rgba(255,255,255,0.08); border: 1px dashed rgba(255,255,255,0.22);
  font-size: 13px; color: rgba(255,255,255,0.82);
}
.comm-hero--empty .result-value { opacity: 0.55; }

/* Stacked tier bar. */
.comm-stack { margin-top: 14px; }
.comm-stack__bar {
  display: flex; height: 10px; border-radius: 999px; overflow: hidden;
  background: rgba(255,255,255,0.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}
.comm-stack__seg {
  height: 100%; transition: width 0.35s ease;
  border-right: 1px solid rgba(0,0,0,0.15);
}
.comm-stack__seg:last-child { border-right: 0; }
.comm-stack__legend {
  margin-top: 10px; display: flex; flex-direction: column; gap: 4px;
}
.comm-stack__key {
  display: grid; grid-template-columns: 10px 1fr auto; gap: 8px; align-items: center;
  font-size: 12px; color: rgba(255,255,255,0.82);
}
.comm-stack__dot { width: 10px; height: 10px; border-radius: 3px; }
.comm-stack__range { opacity: 0.85; }
.comm-stack__amount { color: #fff; font-weight: 600; }

/* Marginal rate callout. */
.comm-marginal {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 14px; padding: 10px 12px;
  border-radius: 10px; background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
}
.comm-marginal__label {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em;
  color: rgba(255,255,255,0.72); font-weight: 600;
}
.comm-marginal__value { font-size: 16px; font-weight: 700; color: #fff; }

/* What-if card. */
.whatif-card { margin-top: 16px; }
.whatif-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.whatif-card-item {
  padding: 12px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface); display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.whatif-label { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.whatif-value { font-size: 18px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.whatif-delta { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.whatif-delta.up { color: #1a7a4c; }
.whatif-delta.down { color: #c0392b; }
[data-theme='dark'] .whatif-delta.up,
html:not([data-theme='light']) .whatif-delta.up { color: #9cf0b8; }
[data-theme='dark'] .whatif-delta.down,
html:not([data-theme='light']) .whatif-delta.down { color: #ffb3b3; }
@media (max-width: 520px) {
  .whatif-grid { grid-template-columns: 1fr; }
}

/* Breakdown row color dots. */
.breakdown-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 2px;
  margin-right: 6px; vertical-align: middle;
}

/* Formula disclosure. */
.comm-formula {
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line);
}
.comm-formula > summary {
  cursor: pointer; list-style: none;
  font-size: 12px; font-weight: 600; color: var(--ink-3);
  padding: 4px 0;
}
.comm-formula > summary::-webkit-details-marker { display: none; }
.comm-formula > summary::before {
  content: '▸'; display: inline-block; margin-right: 6px;
  transition: transform 0.15s ease; color: var(--ink-3);
}
.comm-formula[open] > summary::before { transform: rotate(90deg); }
.comm-formula__body {
  margin-top: 8px; padding: 10px 12px;
  background: var(--surface-2); border-radius: 8px;
  font-size: 12px; color: var(--ink-2); line-height: 1.6;
}
.formula-line { margin: 4px 0; }
.formula-total { font-weight: 700; color: var(--ink); margin-top: 6px; }

/* Tiered-mode compact tweaks for small screens. */
@media (max-width: 520px) {
  .tier-row--commission .tier-row__inputs { flex-wrap: wrap; }
  .tier-field--rate { flex: 1 1 100%; }
  .tier-drag { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   Margin calculator
   ═══════════════════════════════════════════════════════════════════ */

/* Header tools row — currency select + Compare toggle. */
.margin-card .card-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.card-header__tools {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.card-header__tools .currency-select {
  font-size: 12px; padding: 4px 8px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); color: var(--ink);
  font-family: inherit;
}
.card-header__tools .currency-select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
#margin-compare-toggle.is-active {
  background: var(--accent-soft); color: var(--accent);
}

/* Helper text under the "Solve for" chip row. */
.field-helper {
  margin: 8px 0 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.45;
}

/* Small chips for quick % presets. */
.chip--sm { font-size: 12px; padding: 4px 10px; }
.chip-row--tight { gap: 6px; margin-top: 8px; }

/* Stacked Cost / Profit bar in the hero. */
.margin-stack { margin-top: 18px; }
.margin-stack__bar {
  display: flex; height: 12px; border-radius: 999px; overflow: hidden;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.margin-stack__seg {
  height: 100%;
  transition: width 0.35s ease, background-color 0.2s ease;
}
.margin-stack__seg--cost   { background: rgba(255, 255, 255, 0.35); }
.margin-stack__seg--profit { background: #ffffff; }
.margin-stack__legend {
  margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.margin-stack__key {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; color: rgba(255, 255, 255, 0.86);
}
.margin-stack__dot {
  width: 10px; height: 10px; border-radius: 3px;
  flex-shrink: 0;
}
.margin-stack__dot--cost   { background: rgba(255, 255, 255, 0.45); }
.margin-stack__dot--profit { background: #ffffff; }
.margin-stack__amount {
  margin-left: auto; color: #fff; font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Loss state — swap accent from green to red. */
.margin-hero--loss {
  background: linear-gradient(135deg, #7f1d1d 0%, #b91c1c 100%);
}
.margin-hero--loss .margin-stack__seg--profit { background: #fecaca; }
.margin-hero--loss .margin-stack__dot--profit { background: #fecaca; }

/* Scenario B — compare mode second input block. */
.scenario-b {
  margin-top: 18px; padding-top: 18px;
  border-top: 1px dashed var(--line-strong);
}
.scenario-b__header {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin-bottom: 12px;
}
.scenario-b__hint {
  font-size: 12px; color: var(--ink-3);
}

/* Dark-mode loss + header tools polish. */
[data-theme='dark'] .card-header__tools .currency-select,
html:not([data-theme='light']) .card-header__tools .currency-select {
  background: var(--surface-2); color: var(--ink); border-color: var(--line-strong);
}

/* Mobile: give chips room to scroll horizontally so labels don't wrap awkwardly. */
@media (max-width: 520px) {
  .margin-card #margin-mode,
  .margin-card #margin-presets {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .margin-card #margin-mode::-webkit-scrollbar,
  .margin-card #margin-presets::-webkit-scrollbar { display: none; }
  .margin-card #margin-mode .chip,
  .margin-card #margin-presets .chip {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .margin-stack__legend { grid-template-columns: 1fr; }
}

/* ───────────────────────────────────────────────────────────────
   Loan calculator — action toast (Copy/Share/Print feedback)
   ─────────────────────────────────────────────────────────────── */
.hero-action-toast {
  position: absolute;
  right: 18px;
  bottom: 18px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  color: #eaffe6;
  background: rgba(127, 224, 168, 0.22);
  border: 1px solid rgba(127, 224, 168, 0.35);
  border-radius: 999px;
  pointer-events: none;
  animation: loan-toast-in 0.2s ease-out;
}
@keyframes loan-toast-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.result-hero__inner { position: relative; }

/* Preset row uses the shared .chip-row styles; give it a touch more breathing
   room from the first form section below. */
.loan-preset-row { margin-bottom: 4px; }

/* On narrow screens let the preset + frequency chip rows scroll horizontally
   instead of wrapping to three lines. */
@media (max-width: 480px) {
  #loan-presets,
  #freq-chips {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  #loan-presets::-webkit-scrollbar,
  #freq-chips::-webkit-scrollbar { display: none; }
  #loan-presets .chip,
  #freq-chips .chip { flex: 0 0 auto; white-space: nowrap; }
}

/* Print: hide navigation, preset chips, form actions. Keep the headline,
   result hero, donut, breakdown, and amortization. */
@media print {
  .site-header,
  .site-footer,
  .breadcrumb,
  .hero-meta,
  .result-hero__actions,
  .mobile-sticky,
  .inputs-panel .slider-wrap,
  .inputs-panel .toggle-group,
  #loan-presets,
  .examples-section,
  .related-calculators,
  .faq-accordion,
  .how-it-works-section,
  .tips-section {
    display: none !important;
  }
  .result-hero { break-inside: avoid; }
  .main-grid { grid-template-columns: 1fr !important; }
}

/* ─────────────────────────────────────────────────────────────────
   Compound Interest calculator — scoped styles
   ───────────────────────────────────────────────────────────────── */

.ci-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.ci-actions .calc-btn { flex: 1; min-width: 0; }

.ci-warning {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--amber-soft);
  color: #7a4a10;
  border-left: 3px solid var(--amber);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  line-height: 1.5;
}

/* The badge sits inside `.result-hero` (dark accent surface). Hard-code
 * a solid white pill with accent-coloured ink so the value reads with
 * high contrast regardless of locale, modifier classes, or text length.
 * Specificity is bumped via `.result-hero` and !important on the colour
 * channel so prior translucent variants and any later
 * `.ci-delta-badge.is-positive` overrides further up the cascade can't
 * resurrect the low-contrast look. */
.ci-delta-badge,
.result-hero .ci-delta-badge {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: #fff !important;
  color: var(--accent) !important;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: .02em;
}
.ci-delta-badge--good,
.result-hero .ci-delta-badge--good {
  background: #fff !important;
  color: var(--accent) !important;
}
.ci-delta-badge--on-light {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
}

.ci-stack-bar {
  display: flex;
  width: 100%;
  height: 8px;
  margin-top: var(--space-4);
  border-radius: var(--radius-full);
  overflow: hidden;
  background: var(--surface-2);
}
.ci-stack-bar[hidden] { display: none; }
.ci-stack-seg { display: block; height: 100%; transition: width .3s ease; }
.ci-stack-seg--principal { background: var(--accent); }
.ci-stack-seg--contrib   { background: var(--teal); }
.ci-stack-seg--interest  { background: var(--amber); }
.rf-stack-seg--disposal  { background: var(--rose, #f43f5e); }

/* Roofing — tilted SVG preview of the roof, sits inside the result hero */
.rf-preview {
  margin: 14px 0 6px;
  padding: 10px 12px 6px;
  border-radius: var(--radius-lg, 14px);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.rf-preview svg { display: block; width: 100%; height: auto; max-height: 120px; }
.rf-preview-caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
}
.rf-preview-caption .aux { color: rgba(255, 255, 255, 0.65); font-size: 11px; }

/* Area chart — compound interest variant */
.ci-area-chart { position: relative; height: 240px; }
.ci-area-chart svg { width: 100%; height: 220px; display: block; }

.ci-area__total-fill      { fill: var(--amber); fill-opacity: .28; stroke: none; }
.ci-area__contrib-fill    { fill: var(--teal);  fill-opacity: .45; stroke: none; }
.ci-area__principal-fill  { fill: var(--accent); fill-opacity: .55; stroke: none; }
.ci-area__total-line      { fill: none; stroke: var(--ink-2); stroke-width: 1.25; stroke-opacity: .45; }
.ci-area__hover-dot       { fill: var(--ink); stroke: #fff; stroke-width: 2; }

.ci-area__tooltip {
  position: absolute;
  top: 8px;
  transform: translateX(-50%);
  min-width: 180px;
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  font-size: var(--text-xs);
  pointer-events: none;
  z-index: 2;
}
.ci-area__tt-year {
  font-weight: var(--font-semibold);
  color: var(--ink);
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
}
.ci-area__tt-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  padding: 2px 0;
  color: var(--ink-2);
}
.ci-area__tt-row strong { font-family: var(--font-mono); color: var(--ink); }
.ci-area__tt-total {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-weight: var(--font-semibold);
}
.ci-area__tt-total strong { font-family: var(--font-mono); }

/* Table actions + schedule */
.ci-table-actions {
  display: flex;
  gap: var(--space-4);
  margin-left: auto;
}
.ci-schedule-scroll { max-height: 420px; overflow: auto; }
.ci-schedule thead th {
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 1;
}
.ci-schedule tbody td { font-variant-numeric: tabular-nums; }
.ci-bar-contrib { background: var(--teal) !important; }
.ci-schedule-toggle { margin-top: var(--space-4); width: 100%; }

/* Worked example under formula */
.ci-worked {
  margin-top: var(--space-5);
  padding: var(--space-4);
  background: var(--accent-soft);
  border-radius: var(--radius-md);
}
.ci-worked__heading {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: var(--space-3);
}
.ci-worked__steps {
  list-style: decimal inside;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-2);
  color: var(--ink-2);
  font-size: var(--text-sm);
  line-height: 1.6;
}
.ci-worked__steps .mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* Formula helpers for inline compound-interest equation */
.formula-eq--compound { flex-wrap: wrap; gap: var(--space-1); }
.formula-eq--compound sup {
  font-size: .65em;
  vertical-align: super;
  color: var(--ink-2);
  margin-left: 1px;
}
.formula-paren {
  font-size: 1.5em;
  color: var(--ink-2);
  font-weight: var(--font-regular);
}
.formula-frac--inline {
  transform: scale(.85);
  margin: 0 2px;
}

/* Delta text colour (comparison card) */
.delta--good { color: var(--accent); }
.delta--bad  { color: var(--rose); }

/* Mark the solved field visually when in inverse modes */
.field.is-solved .input-wrap { background: var(--accent-soft); border-radius: var(--radius-sm); }
.field.is-solved .input-wrap input { background: transparent; }

/* Mobile tweaks */
@media (max-width: 640px) {
  .ci-actions { flex-direction: column; }
  .ci-area-chart { height: 260px; }
  .ci-table-actions { width: 100%; justify-content: flex-end; margin-top: var(--space-2); }
}

/* ─────────────────────────────────────────────────────────────────
   Sample-size calculator — scoped styles
   Reuses .card, .form-section, .chip-row, .info-tip, .hero-action,
   .result-hero, .breakdown-card, .compare-card. Adds .ss-* helpers.
   ───────────────────────────────────────────────────────────────── */
.ss-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.ss-actions .calc-btn { flex: 1; min-width: 0; }

.ss-warning {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--amber-soft);
  color: #7a4a10;
  border-left: 3px solid var(--amber);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.ss-quick-fill { margin-top: var(--space-3); }

.chip.chip--ghost {
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--ink-2);
  font-weight: var(--font-medium);
}
.chip.chip--ghost:hover {
  border-style: solid;
  border-color: var(--accent);
  color: var(--accent);
}

/* Parent grid defines the column tracks; rows inherit them via subgrid so the
   bar column stays the same width across rows even when only some rows have a
   diff badge. Otherwise each row's `auto` value column sizes independently and
   the max-value bar visibly stops short. */
#ss-sensitivity {
  grid-template-columns: minmax(0, 3.2fr) minmax(30px, 1fr) auto;
}
.ss-sensitivity-row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  gap: var(--space-3);
  align-items: center;
  padding: 6px 0;
}
.ss-sensitivity-row.is-current .breakdown-value {
  font-weight: var(--font-semibold);
}
.ss-sensitivity-row .breakdown-label {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.3;
}
.ss-sensitivity-bar {
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--surface-2);
  overflow: hidden;
}
.ss-sensitivity-bar > span {
  display: block;
  height: 100%;
  background: var(--accent);
  transition: width .3s ease;
}
.ss-sensitivity-row.is-current .ss-sensitivity-bar > span {
  background: var(--accent);
  opacity: 1;
}
.ss-sensitivity-row:not(.is-current) .ss-sensitivity-bar > span {
  opacity: .55;
}
.ss-sensitivity-row .breakdown-value {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  justify-content: flex-end;
}
.ss-diff {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  padding: 1px 6px;
  border-radius: var(--radius-full);
}
.ss-diff--up   { background: rgba(251, 146, 60, .15); color: #b45309; }
.ss-diff--down { background: rgba(16, 185, 129, .15); color: #047857; }

.ss-sensitivity-note {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--ink-2);
}

.ss-sensitivity-empty {
  font-size: var(--text-sm);
  color: var(--ink-2);
  padding: var(--space-2) 0;
}

@media (max-width: 640px) {
  .ss-actions { flex-direction: column; }
  #ss-sensitivity { grid-template-columns: minmax(0, 1fr) auto; }
  .ss-sensitivity-row { row-gap: 4px; }
  .ss-sensitivity-bar { grid-column: 1 / -1; }
}

/* ─────────────────────────────────────────────────────────────────
   Fraction calculator — scoped styles
   ───────────────────────────────────────────────────────────────── */

/* Compact chip variant used for quick-picks and inline toggles. */
.chip.chip--sm {
  padding: 4px 10px;
  font-size: var(--text-xs);
  min-height: 28px;
  border-radius: var(--radius-sm);
}

/* Three-part operand input (whole + numerator/line/denominator stack). */
.frac-input-group {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.frac-input-group .frac-whole {
  width: 68px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.frac-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.frac-stack .frac-part {
  width: 68px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.frac-stack .frac-line {
  width: 68px;
  height: 2px;
  background: var(--ink);
  border-radius: 1px;
}

/* Quick-pick chip row under each operand. */
.frac-quickpicks {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.frac-quickpicks__label {
  font-size: var(--text-xs);
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-right: 2px;
}

/* Operation chip inner symbol — bolder + slightly larger. */
.frac-op-sym {
  font-weight: var(--font-bold);
  font-size: 1.05em;
  margin-right: 4px;
}

/* ── Result hero big fraction display ── */
.frac-result-display {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  transition: transform .25s ease, opacity .25s ease;
}
.frac-result-display.is-morphing {
  animation: frac-pop .32s cubic-bezier(.34, 1.4, .64, 1);
}
@keyframes frac-pop {
  0%   { transform: scale(.88); opacity: .5; }
  60%  { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.frac-big {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-bold);
  line-height: 1;
}
.frac-big__whole {
  font-size: 56px;
  color: inherit;
}
.frac-big__stack {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  line-height: 1;
}
.frac-big__stack[data-empty="1"] { display: none; }
.frac-big__num,
.frac-big__den {
  font-size: 38px;
  padding: 0 8px;
}
.frac-big__line {
  width: 100%;
  min-width: 48px;
  height: 3px;
  background: currentColor;
  border-radius: 2px;
}

/* Steps card: collapsed/expanded treatment. */
.frac-steps-card { margin-top: 16px; }
.frac-steps {
  list-style: decimal inside;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-2);
  color: var(--ink-2);
  font-size: var(--text-sm);
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}
.frac-steps li {
  padding: 6px 10px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
}

/* ── Formula card layout for the four fraction ops ── */
.frac-formulas-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.frac-formula-block {
  padding: var(--space-4);
  background: var(--surface-2);
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
}
.frac-formula-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-3);
  margin-bottom: var(--space-2);
  font-weight: var(--font-semibold);
}
.frac-formula-block .formula-eq { margin: 0; }

/* Common-fractions reference grid under the formula card. */
.frac-reference-card { margin-top: var(--space-4); }
.frac-reference-heading {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-2);
  margin: 0 0 var(--space-3) 0;
}
.frac-reference-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
}
.frac-reference-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}
.frac-reference-cell .mono { font-family: var(--font-mono); color: var(--ink); font-weight: var(--font-semibold); }
.frac-reference-eq { color: var(--ink-3); }
.frac-reference-pct { margin-left: auto; color: var(--ink-3); font-size: var(--text-xs); }

/* Copy-success state on share button reuses compound-interest semantics. */
#frac-share.is-copied { color: var(--accent); border-color: var(--accent); }

/* ── Mobile tweaks ── */
@media (max-width: 640px) {
  .frac-input-group { gap: var(--space-2); }
  .frac-input-group .frac-whole,
  .frac-stack .frac-part,
  .frac-stack .frac-line { width: 56px; }
  .frac-big__whole { font-size: 44px; }
  .frac-big__num,
  .frac-big__den { font-size: 30px; }
  .frac-formulas-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .frac-input-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .frac-input-group .frac-whole { width: 100%; }
}

/* ─── Retirement chart: tighter card padding + Y-axis scale labels ── */
.ret-chart-body { padding-top: 14px; }
.ret-area-chart { height: auto; padding-left: 48px; }
.ret-area-chart svg { height: 180px; }
.ret-area-ylabels {
  position: absolute;
  left: 0;
  top: 0;
  height: 180px;
  width: 44px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  padding-right: 6px;
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--ink-2);
  pointer-events: none;
}
.ret-area-ylabels span { line-height: 1; }


/* ═══════════════════════════════════════════
   Debt Payoff
   ═══════════════════════════════════════════ */

/* ── Rows container & row cards ────────────────────────── */
.dp-rows { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-4); }

.dp-row {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  transition: box-shadow var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast);
}
.dp-row.is-expanded { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.dp-row.is-dragging { opacity: 0.5; }
.dp-row--drop-above { border-top: 2px solid var(--accent); }

.dp-row__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 12px;
  border-bottom: 1px solid transparent;
}
.dp-row.is-expanded .dp-row__head { border-bottom-color: var(--line); }

.dp-row__handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-3);
  cursor: grab;
  font-size: 14px;
  line-height: 1;
  letter-spacing: -2px;
  border-radius: 6px;
}
.dp-row__handle:hover { background: var(--surface-2); color: var(--ink-2); }
.dp-row__handle:active { cursor: grabbing; }

.dp-row__title {
  flex: 0 0 auto;
  color: var(--ink-2);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}
.dp-row__title strong { color: var(--ink); font-weight: 600; }

.dp-row__summary {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: var(--text-sm);
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dp-row.is-expanded .dp-row__summary { display: none; }
.dp-row.is-collapsed .dp-row__summary { display: inline-flex; }
.dp-row__sum-name { font-weight: 600; color: var(--ink); }
.dp-row__sum-sep { color: var(--ink-3); }

.dp-row__head-actions { margin-left: auto; display: inline-flex; gap: 4px; }
.dp-row__toggle,
.dp-row__remove {
  width: 26px; height: 26px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.dp-row__toggle:hover { background: var(--surface-2); color: var(--ink); }
.dp-row__remove:hover { background: var(--rose-soft); color: var(--rose); }

.dp-row__form { padding: 4px 12px 12px; }
.dp-row.is-collapsed .dp-row__form { display: none; }
.dp-row__form .form-row { margin-bottom: var(--space-2); }
.dp-row__form .form-row:last-of-type { margin-bottom: 0; }

/* ── Per-row validation pill ──────────────────────────── */
.dp-row__warning {
  margin-top: var(--space-2);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--rose-soft);
  color: var(--rose);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  line-height: 1.4;
}
.dp-row__warning-icon { font-size: var(--text-sm); }
.dp-row__warning-text { flex: 1 1 auto; }
.dp-row__warning-text strong { font-weight: 700; }
.dp-row__warning-fix {
  flex: 0 0 auto;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  border: 1px solid var(--rose);
  background: var(--surface);
  color: var(--rose);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
}
.dp-row__warning-fix:hover { background: var(--rose); color: #fff; }

/* ── Add / totals bar ─────────────────────────────────── */
.dp-rows-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding-top: var(--space-2);
  border-top: 1px dashed var(--line);
}
#dp-add-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.dp-totals {
  margin-left: auto;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: var(--text-sm);
  color: var(--ink-2);
}
.dp-totals .dp-totals__count { font-weight: 600; color: var(--ink); }
.dp-totals .dp-totals__balance,
.dp-totals .dp-totals__min { font-weight: 600; color: var(--ink); }
.dp-totals .dp-totals__sep { color: var(--ink-3); }
.dp-totals .dp-totals__label { color: var(--ink-3); font-size: var(--text-xs); }

/* ── Strategy tabs in result panel ─────────────────────── */
.dp-strategy-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-4) 0 var(--space-3);
  flex-wrap: wrap;
}
.dp-strategy-bar__label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  font-weight: 600;
}
#dp-strategy-tabs .tab { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 14px; line-height: 1.1; }
#dp-strategy-tabs .tab .tab-hint {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
#dp-strategy-tabs .tab.active .tab-hint { color: var(--ink-2); }

/* ── Balance-over-time chart — 3 series ──────────────── */
.dp-spark-card { margin-top: var(--space-4); }
.area-chart.dp-spark svg { height: 240px; }
@media (max-width: 1023px) {
  .area-chart.dp-spark svg { height: 200px; }
}
.dp-spark-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.dp-spark-fill { stroke: none; }

.dp-spark-line--aval { stroke: var(--accent); }
.dp-spark-line--snow { stroke: var(--amber); }
.dp-spark-line--mins { stroke: var(--ink-3); stroke-dasharray: 3 4; }

.dp-spark-fill--aval { fill: var(--accent); opacity: 0.10; }
.dp-spark-fill--snow { fill: var(--amber);  opacity: 0.10; }
.dp-spark-fill--mins { fill: var(--ink-3);  opacity: 0.05; }

/* Active-strategy emphasis: dim the others. */
#dp-spark-svg.is-active--avalanche .dp-spark-line--snow,
#dp-spark-svg.is-active--avalanche .dp-spark-line--mins { opacity: 0.35; }
#dp-spark-svg.is-active--avalanche .dp-spark-line--aval { stroke-width: 2.5; }
#dp-spark-svg.is-active--avalanche .dp-spark-fill--snow,
#dp-spark-svg.is-active--avalanche .dp-spark-fill--mins { opacity: 0.03; }

#dp-spark-svg.is-active--snowball .dp-spark-line--aval,
#dp-spark-svg.is-active--snowball .dp-spark-line--mins { opacity: 0.35; }
#dp-spark-svg.is-active--snowball .dp-spark-line--snow { stroke-width: 2.5; }
#dp-spark-svg.is-active--snowball .dp-spark-fill--aval,
#dp-spark-svg.is-active--snowball .dp-spark-fill--mins { opacity: 0.03; }

#dp-spark-svg.is-active--mins .dp-spark-line--aval,
#dp-spark-svg.is-active--mins .dp-spark-line--snow { opacity: 0.35; }
#dp-spark-svg.is-active--mins .dp-spark-line--mins { stroke-width: 2.5; stroke-dasharray: none; }
#dp-spark-svg.is-active--mins .dp-spark-fill--aval,
#dp-spark-svg.is-active--mins .dp-spark-fill--snow { opacity: 0.03; }

.dp-spark-legend { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-3); }
.sw--aval { background: var(--accent); }
.sw--snow { background: var(--amber); }
.sw--mins { background: var(--ink-3); }

/* ── Per-debt payoff timeline ─────────────────────────── */
.dp-timeline { display: flex; flex-direction: column; gap: 10px; }
.dp-timeline__row { display: grid; grid-template-columns: minmax(140px, 30%) 1fr; gap: 10px; align-items: center; }
.dp-timeline__label { display: flex; flex-direction: column; min-width: 0; }
.dp-timeline__name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dp-timeline__meta { font-size: var(--text-xs); color: var(--ink-3); }
.dp-timeline__track {
  position: relative;
  background: var(--surface-2);
  border-radius: var(--radius-full);
  height: 22px;
  overflow: hidden;
}
.dp-timeline__bar {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: var(--radius-full);
  transition: width 0.3s ease;
}
.dp-timeline__month {
  position: relative;
  z-index: 1;
  padding: 0 10px;
  line-height: 22px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ink);
  mix-blend-mode: normal;
}
.dp-timeline__empty { color: var(--ink-3); font-size: var(--text-sm); padding: var(--space-3) 0; }

/* ── Payoff order chips ───────────────────────────────── */
.dp-order {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.dp-order__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border-radius: var(--radius-full);
  background: var(--surface-2);
  font-size: var(--text-sm);
  color: var(--ink);
}
.dp-order__rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 700;
}
.dp-order__name { font-weight: 600; }
.dp-order__when { color: var(--ink-3); font-size: var(--text-xs); }
.dp-order__empty { color: var(--ink-3); list-style: none; }

/* ── Small-screen tweaks ──────────────────────────────── */
@media (max-width: 520px) {
  .dp-rows-actions { flex-direction: column; align-items: stretch; }
  .dp-totals { margin-left: 0; }
  .dp-timeline__row { grid-template-columns: 1fr; gap: 4px; }
  .dp-timeline__track { height: 20px; }
  #dp-strategy-tabs { width: 100%; }
  #dp-strategy-tabs .tab { flex: 1; }
}

/* ═══════════════════════════════════════════
   Inflation calculator — live-calc UI
   ═══════════════════════════════════════════ */

/* Left column hugs its content on inflation page so the below-the-fold
   chart/table rise up against the form (the sticky result panel on the
   right stays visible on scroll). Also trim the grid's bottom padding
   so the "Value over time" card sits tight against the form. */
.main-grid__left:has(.inf-form) { align-self: start; }
.main-grid:has(.inf-form) { padding-bottom: 20px; }

/* Same treatment for the investment calculator: tight bottom padding so
   the "Growth over time" card sits close to the form/result above. */
.main-grid__left:has(#inv-mode-chips) { align-self: start; }
.main-grid:has(#inv-mode-chips) { padding-bottom: 20px; }

/* Same for the retirement-savings calculator. */
.main-grid__left:has(#ret-mode-chips) { align-self: start; }
.main-grid:has(#ret-mode-chips) { padding-bottom: 20px; }

/* Breathing room for the native chevron on <select> so it's not flush
   against the right edge of the control. */
.calc-form select.input,
.inf-form select.input {
  padding-right: 36px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(-45deg, transparent 50%, currentColor 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 12px) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Border-radius + border reset of the `.input--has-unit-left` input gets
   overridden by the higher-specificity `.calc-form .input` base style. Bump
   specificity back up inside an input-group so the prefix and input fuse. */
.input-group .input.input--has-unit-left,
.calc-form .input-group .input.input--has-unit-left {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: none;
}
.input-group .input.input--has-unit-right,
.calc-form .input-group .input.input--has-unit-right {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
}

.inf-form .inf-segmented {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--surface-2);
  border-radius: 12px;
  margin-bottom: var(--space-2);
}
.inf-form .inf-segmented .tab {
  padding: 8px 18px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-3);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.inf-form .inf-segmented .tab:hover:not(.active) { color: var(--ink-2); }
.inf-form .inf-segmented .tab.active {
  background: var(--surface);
  color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.inf-amount-row { gap: var(--space-4); }
.inf-amount-col { flex: 2; min-width: 160px; }
.inf-currency-col { flex: 1; min-width: 120px; }

.inf-slider-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.inf-slider-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--accent);
  font-size: 15px;
}
.inf-slider-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.inf-slider {
  flex: 1;
  appearance: none;
  -webkit-appearance: none;
  height: 6px;
  border-radius: 999px;
  background: var(--surface-2);
  outline: none;
}
.inf-slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: var(--surface-2);
}
.inf-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--surface);
  box-shadow: 0 0 0 1px var(--accent);
  cursor: pointer;
  margin-top: -6px;
}
.inf-slider::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: var(--surface-2);
}
.inf-slider::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--surface);
  box-shadow: 0 0 0 1px var(--accent);
  cursor: pointer;
}
.inf-years-num { max-width: 90px; text-align: right; }

.inf-country-chips .chip {
  font-size: 13px;
  padding: 7px 13px;
  white-space: nowrap;
}

.inf-form-actions {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
  margin-top: var(--space-4);
}

/* ─── Sticky result hero: sentence + delta badge on dark gradient ─── */
.inf-result-hero .inf-hero-sentence {
  font-size: 20px;
  line-height: 1.4;
  color: #fff;
  margin: 0 0 10px;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.inf-result-hero .inf-hero-sentence strong {
  color: #fff;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  white-space: nowrap;
}
.inf-result-hero .inf-hero-sub {
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  margin: 0;
}
.inf-delta {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.inf-delta.inf-delta-pos { background: rgba(255, 196, 120, 0.2); border-color: transparent; color: #ffd9a8; }
.inf-delta.inf-delta-neg { background: rgba(255, 160, 170, 0.22); border-color: transparent; color: #ffcfd6; }
.inf-delta.inf-delta-zero { background: rgba(255, 255, 255, 0.1); color: rgba(255,255,255,0.75); }

/* ─── Comparison card (below sticky hero) ─── */
.inf-compare-card { margin-top: var(--space-4); }
.inf-compare {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.5;
}
.inf-compare__icon { color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.inf-compare strong {
  color: var(--ink);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* ─── Chart ─── */
.inf-area-chart {
  position: relative;
  width: 100%;
  height: 220px;
}
.inf-area-chart svg {
  width: 100%;
  height: 100%;
  display: block;
}
.inf-chart__fill {
  fill: var(--accent);
  fill-opacity: 0.12;
}
.inf-chart__line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.inf-chart__baseline {
  stroke: var(--ink-3);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  vector-effect: non-scaling-stroke;
  opacity: 0.5;
}
.inf-chart__hover-dot {
  fill: var(--accent);
  stroke: var(--surface);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.inf-chart__tooltip {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 8px 12px;
  font-size: 12px;
  pointer-events: none;
  min-width: 120px;
}
.inf-chart__tt-year { color: var(--ink-3); font-size: 11px; margin-bottom: 2px; }
.inf-chart__tt-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--accent);
  font-size: 14px;
}
.inf-chart__tt-sub { color: var(--ink-2); font-size: 11px; margin-top: 2px; }

/* ─── Table delta colors ─── */
.inf-schedule .inf-delta-pos { color: var(--amber); font-weight: 600; }
.inf-schedule .inf-delta-neg { color: var(--rose); font-weight: 600; }
.inf-schedule .inf-delta-zero { color: var(--ink-3); }

.inf-tech-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-3);
  cursor: pointer;
  user-select: none;
}
.inf-tech-toggle input { accent-color: var(--accent); }

/* ─── Collapsed formula ─── */
.inf-formula { margin-top: var(--space-8); }
.inf-formula > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--surface);
  transition: border-color 0.15s, color 0.15s;
}
.inf-formula > summary::-webkit-details-marker { display: none; }
.inf-formula > summary::after {
  content: '▾';
  font-size: 10px;
  color: var(--ink-3);
  transition: transform 0.15s;
}
.inf-formula[open] > summary { border-color: var(--accent); color: var(--accent); }
.inf-formula[open] > summary::after { transform: rotate(180deg); color: var(--accent); }
.inf-formula > .formula-box,
.inf-formula > .formula-vars,
.inf-formula > .formula-steps { margin-top: var(--space-4); }

@media (max-width: 640px) {
  .inf-amount-row { flex-direction: column; }
  .inf-form-actions { justify-content: stretch; }
  .inf-form-actions > * { flex: 1; }
  .inf-hero-sentence { font-size: var(--text-lg); }
}

/* ═══════════════════════════════════════════════════════════════
   Salary-to-Hourly Calculator — scoped styles
   (presets, segmented, hero result, stacked bar, mobile bar)
   ═══════════════════════════════════════════════════════════════ */

.tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

.sal-form .form-group { margin-bottom: var(--space-5); }
.sal-form .form-row { margin-bottom: var(--space-5); gap: var(--space-4); }
.sal-form .form-label { display: block; font-weight: var(--font-semibold); color: var(--ink); margin-bottom: var(--space-2); font-size: var(--text-sm); }
.sal-form .form-hint--inline { display: inline; font-weight: var(--font-regular); color: var(--ink-3); margin-left: 6px; font-size: 12px; }

/* ─── Preset chips ─── */
.sal-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--space-5); }
.chip--preset {
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: var(--font-semibold);
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}
.chip--preset:hover { border-color: var(--accent); color: var(--ink); }
.chip--preset:active { transform: translateY(1px); }
.chip--preset.is-active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
[data-theme='dark'] .chip--preset.is-active { color: var(--accent-2); }

/* ─── Segmented bidirectional frequency ─── */
.sal-segmented {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.seg-item {
  flex: 1 1 auto;
  min-width: 80px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: calc(var(--radius-md) - 4px);
  background: transparent;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: var(--font-semibold);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}
.seg-item:hover { color: var(--ink); }
.seg-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.seg-item.is-active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  border-color: var(--line-strong);
}

/* ─── Tax row with chips ─── */
.sal-tax-row { display: flex; gap: var(--space-5); align-items: center; flex-wrap: wrap; }
.sal-tax-row > .input-group { flex: 0 0 140px; }
.sal-tax-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.chip--tax {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: var(--font-semibold);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.chip--tax:hover { border-color: var(--accent); color: var(--ink); }
.chip--tax.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ─── Inline validation ─── */
.sal-error { color: #b14a5e; font-size: 12px; margin-top: 6px; display: block; }
.input.is-invalid { border-color: #b14a5e; box-shadow: 0 0 0 3px rgba(177, 74, 94, 0.12); }

/* ─── Form actions ─── */
.sal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.calc-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: var(--font-semibold);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.calc-btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.sal-live-hint { color: var(--ink-3); font-size: 12px; }

/* ─── Hidden legacy cards (kept for back-compat, visually suppressed) ─── */
.sal-legacy-cards { display: none; }

/* ─── Full conversion breakdown (below the form actions) ─── */
.sal-results-full {
  margin-top: var(--space-10);
  padding-top: var(--space-8);
  border-top: 1px solid var(--line);
}
.sal-breakdown-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}
.sal-breakdown-head .amort-heading {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.01em;
}
.sal-tax-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-full);
  background: var(--surface);
  font-size: 13px;
  font-weight: var(--font-semibold);
  color: var(--ink-2);
  cursor: pointer;
  user-select: none;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.sal-tax-toggle:hover { border-color: var(--accent); color: var(--ink); }
.sal-tax-toggle input { accent-color: var(--accent); cursor: pointer; width: 16px; height: 16px; margin: 0; }

/* Breakdown table — expanded rows, clearer hierarchy */
.sal-results-full .breakdown-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-base);
}
.sal-results-full .breakdown-table thead th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  font-weight: var(--font-semibold);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line-strong);
  text-align: left;
}
.sal-results-full .breakdown-table thead th:not(:first-child) { text-align: right; }
.sal-results-full .breakdown-table tbody td {
  padding: var(--space-4) var(--space-4);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  vertical-align: middle;
}
.sal-results-full .breakdown-table tbody td:first-child {
  font-weight: var(--font-semibold);
  color: var(--ink-2);
}
.sal-results-full .breakdown-table tbody td:not(:first-child) {
  text-align: right;
  font-weight: var(--font-semibold);
  font-family: var(--font-mono);
  letter-spacing: -0.01em;
}
.sal-results-full .breakdown-table tbody tr:last-child td { border-bottom: 0; }
.sal-results-full .breakdown-table tbody tr:hover td { background: var(--surface-2); }

.breakdown-table tr.is-input td {
  background: var(--accent-soft) !important;
  font-weight: var(--font-bold);
}
.breakdown-table tr.is-input td:first-child { color: var(--accent); }
[data-theme='dark'] .breakdown-table tr.is-input td:first-child { color: var(--accent-2); }

/* ═══ Hero Result Panel ═══ */

.sal-result-hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.sal-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  font-weight: var(--font-semibold);
}
.sal-hero__eyebrow .pulse-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  animation: pulse 2s ease-in-out infinite;
}

.sal-hero__primary {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--font-mono);
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.02em;
}
.sal-hero__currency {
  font-size: clamp(20px, 3vw, 28px);
  font-weight: var(--font-semibold);
  color: var(--ink-3);
  margin-right: 2px;
}
.sal-hero__value {
  font-size: clamp(48px, 7vw, 84px);
  font-weight: var(--font-bold);
  transition: transform 200ms ease, color 200ms ease;
  display: inline-block;
}
.sal-hero__value.is-updating { transform: scale(1.03); color: var(--accent); }
.sal-hero__per {
  font-size: clamp(16px, 2vw, 20px);
  font-weight: var(--font-semibold);
  color: var(--ink-3);
  margin-left: 4px;
  font-family: var(--font-body);
}

.sal-hero__sub {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}
.sal-hero__sub-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sal-hero__sub-item .label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-3);
  font-weight: var(--font-semibold);
}
.sal-hero__sub-item .value {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--ink);
}

/* ─── Stacked bar (net vs tax) ─── */
.sal-stackbar { display: flex; flex-direction: column; gap: 8px; }
.sal-stackbar__track {
  display: flex;
  height: 10px;
  border-radius: var(--radius-full);
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}
.sal-stackbar__net { background: var(--accent); transition: width 250ms ease; }
.sal-stackbar__tax { background: var(--amber); transition: width 250ms ease; }
.sal-stackbar__legend {
  display: flex;
  gap: var(--space-4);
  font-size: 12px;
  color: var(--ink-2);
}
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-item .swatch {
  width: 10px; height: 10px; border-radius: 2px; display: inline-block;
}
.legend-item--net .swatch { background: var(--accent); }
.legend-item--tax .swatch { background: var(--amber); }
.legend-item strong { font-weight: var(--font-bold); color: var(--ink); }

/* ─── Context chip ─── */
.sal-context {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--accent-soft);
  border-radius: var(--radius-md);
  color: var(--accent);
  font-size: 13px;
  font-weight: var(--font-medium);
  align-self: flex-start;
}
[data-theme='dark'] .sal-context { color: var(--accent-2); }
.sal-context__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* ─── Hero actions (copy / share) ─── */
.sal-hero__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.btn-ghost-sm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: var(--font-semibold);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.btn-ghost-sm:hover { border-color: var(--accent); color: var(--accent); }
.btn-ghost-sm.is-success { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

/* ─── Mobile pinned bar ─── */
.sal-mobile-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  background: var(--surface);
  border-top: 1px solid var(--line-strong);
  box-shadow: 0 -8px 24px -10px rgba(0, 0, 0, 0.12);
  display: none;
}
@media (max-width: 1023px) {
  .sal-mobile-bar:not([hidden]) { display: block; }
  .calc-page { padding-bottom: 90px; }
}
.sal-mobile-bar__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--ink);
}
.sal-mobile-bar__primary {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--font-mono);
  font-weight: var(--font-bold);
}
.sal-mobile-bar__primary::before {
  content: "$";
  font-size: 14px;
  color: var(--ink-3);
  margin-right: 2px;
}
.sal-mobile-bar__value { font-size: 22px; }
.sal-mobile-bar__per { font-size: 13px; font-family: var(--font-body); color: var(--ink-3); font-weight: var(--font-semibold); }
.sal-mobile-bar__chev {
  display: inline-block;
  font-size: 18px;
  color: var(--ink-3);
  transition: transform 200ms ease;
}
.sal-mobile-bar.is-expanded .sal-mobile-bar__chev { transform: rotate(180deg); }
.sal-mobile-bar__panel {
  border-top: 1px solid var(--line);
  padding: 12px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--surface-2);
}
.sal-mobile-bar__row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--ink-2);
}
.sal-mobile-bar__row strong { color: var(--ink); font-weight: var(--font-bold); }

/* Desktop: hero result value color flash on update */
@media (max-width: 560px) {
  .sal-hero__sub { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .sal-hero__sub-item .value { font-size: var(--text-sm); }
  .sal-presets { gap: 6px; }
  .chip--preset { padding: 7px 12px; font-size: 12px; }
  .sal-tax-row { flex-direction: column; }
  .sal-tax-row > .input-group { flex: 1 1 auto; }
}

/* ═══════════════════════════════════════════════════════════════
   Freelancer Rate Calculator — scoped styles (fr-*)
   ═══════════════════════════════════════════════════════════════ */

/* Respect the HTML `hidden` attribute — our display overrides below would otherwise show empty chips. */
.fr-form [hidden], .fr-result-hero [hidden], .fr-results-full [hidden] { display: none !important; }

.fr-form .form-group { margin-bottom: var(--space-8); }
.fr-form .form-row { gap: var(--space-6); margin-bottom: var(--space-8); }
.fr-form .form-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: var(--font-semibold);
  color: var(--ink);
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
}
.fr-form .form-hint { margin-top: var(--space-2); }
.fr-form .form-label svg { stroke: var(--accent); opacity: 0.8; }
.fr-form .form-hint--inline { display: inline; font-weight: var(--font-regular); color: var(--ink-3); margin-left: 4px; font-size: 12px; }

/* ─── Preset chips ─── */
.fr-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--space-8); }

/* ─── Currency segmented ─── */
.fr-currency-seg {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.fr-currency-seg .seg-item {
  flex: 1 1 auto;
  min-width: 72px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: calc(var(--radius-md) - 4px);
  background: transparent;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: var(--font-semibold);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}
.fr-currency-seg .seg-item:hover { color: var(--ink); }
.fr-currency-seg .seg-item.is-active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  border-color: var(--line-strong);
}

/* ─── Slider + number pair ─── */
.fr-slider-row {
  display: grid;
  grid-template-columns: 1fr 140px;
  gap: var(--space-4);
  align-items: center;
}
.fr-slider-row .fr-slider-num { max-width: 140px; }

.fr-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: var(--radius-full);
  background: linear-gradient(to right, var(--accent) 0%, var(--accent) var(--fill, 50%), var(--line) var(--fill, 50%), var(--line) 100%);
  outline: none;
  cursor: pointer;
}
.fr-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--accent);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform var(--transition-fast);
}
.fr-slider::-webkit-slider-thumb:hover { transform: scale(1.1); }
.fr-slider::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--accent);
  cursor: pointer;
}
.fr-slider:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* ─── Quick chip rows (tax) ─── */
.fr-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--space-2);
}

/* ─── Warning / error hints ─── */
.fr-warn {
  display: block;
  margin-top: 8px;
  padding: 8px 12px;
  background: var(--amber-soft);
  border-left: 3px solid var(--amber);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 12px;
  line-height: 1.5;
}
.fr-error { color: #b14a5e; font-size: 12px; margin-top: 6px; display: block; }

/* ─── Advanced disclosure ─── */
.fr-advanced {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  margin-bottom: var(--space-5);
}
.fr-advanced__summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
}
.fr-advanced__summary::-webkit-details-marker { display: none; }
.fr-advanced__summary > svg:first-of-type { stroke: var(--accent); }
.fr-advanced__hint {
  margin-left: auto;
  font-weight: var(--font-regular);
  color: var(--ink-3);
  font-size: 12px;
}
.fr-advanced__summary > svg:last-child {
  transition: transform var(--transition-fast);
  color: var(--ink-3);
}
.fr-advanced[open] .fr-advanced__summary > svg:last-child { transform: rotate(180deg); }
.fr-advanced__body {
  padding: 0 16px 16px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

/* ─── Compare mode ─── */
.fr-compare-toggle { margin-bottom: var(--space-5); }
.fr-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-full);
  background: var(--surface);
  font-size: 13px;
  font-weight: var(--font-semibold);
  color: var(--ink-2);
  cursor: pointer;
  user-select: none;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.fr-toggle:hover { border-color: var(--accent); color: var(--ink); }
.fr-toggle input { accent-color: var(--accent); cursor: pointer; width: 16px; height: 16px; margin: 0; }
.fr-compare-target { margin-top: var(--space-3); max-width: 280px; }

/* ─── Actions row ─── */
.fr-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.fr-live-hint { color: var(--ink-3); font-size: 12px; }

/* ─── Hidden legacy cards ─── */
.fr-legacy-cards { display: none; }

/* ═══ Sticky hero result ═══ */

.fr-result-hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.fr-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  font-weight: var(--font-semibold);
}
.fr-hero__eyebrow .pulse-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  animation: pulse 2s ease-in-out infinite;
}
.fr-hero__primary {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--font-mono);
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.02em;
}
.fr-hero__currency {
  font-size: clamp(20px, 2.5vw, 26px);
  font-weight: var(--font-semibold);
  color: var(--ink-3);
  margin-right: 2px;
}
.fr-hero__value {
  font-size: clamp(44px, 6vw, 72px);
  font-weight: var(--font-bold);
  transition: transform 200ms ease, color 200ms ease;
  display: inline-block;
}
.fr-hero__value.is-updating { transform: scale(1.03); color: var(--accent); }
.fr-hero__per {
  font-size: clamp(14px, 1.6vw, 18px);
  font-weight: var(--font-semibold);
  color: var(--ink-3);
  margin-left: 4px;
  font-family: var(--font-body);
}
.fr-hero__sub {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}
.fr-hero__sub-item { display: flex; flex-direction: column; gap: 2px; }
.fr-hero__sub-item .label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-3);
  font-weight: var(--font-semibold);
}
.fr-hero__sub-item .value {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--ink);
}

/* ─── Compare block (inside hero) ─── */
.fr-hero__compare {
  padding: var(--space-4);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}
.fr-compare-cols {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-3);
}
.fr-compare-col { display: flex; flex-direction: column; gap: 2px; }
.fr-compare-col .label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); font-weight: var(--font-semibold); }
.fr-compare-col .value { font-size: var(--text-lg); font-weight: var(--font-bold); color: var(--ink); }
.fr-compare-arrow { font-size: 22px; color: var(--ink-3); }
.fr-compare-delta {
  margin-top: var(--space-3);
  font-weight: var(--font-bold);
  font-size: var(--text-base);
  text-align: center;
  font-family: var(--font-mono);
}
.fr-compare-delta.is-up { color: var(--accent); }
.fr-compare-delta.is-down { color: #b14a5e; }

/* ─── Benchmark context chip ─── */
.fr-context {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--accent-soft);
  border-radius: var(--radius-md);
  color: var(--accent);
  font-size: 13px;
  font-weight: var(--font-medium);
  align-self: flex-start;
  line-height: 1.4;
}
[data-theme='dark'] .fr-context { color: var(--accent-2); }
.fr-context__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

/* ─── Warning in hero ─── */
.fr-hero-warn {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 12px;
  background: var(--amber-soft);
  border-radius: var(--radius-md);
  color: var(--ink);
  font-size: 12px;
  line-height: 1.4;
}
.fr-hero-warn svg { stroke: var(--amber); flex-shrink: 0; margin-top: 2px; }

/* ─── Hero actions (copy / print) ─── */
.fr-hero__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ═══ Below-the-fold sections ═══ */

.fr-results-full {
  margin-top: var(--space-12);
  padding-top: var(--space-10);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}
.fr-section { scroll-margin-top: 80px; }
.fr-section + .fr-section {
  padding-top: var(--space-8);
  border-top: 1px solid var(--line);
}
.fr-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-10);
  flex-wrap: wrap;
}
.fr-results-full .breakdown-table { margin-bottom: 0; }
.fr-results-full .breakdown-table tbody tr:last-child td { padding-bottom: var(--space-5); }
.fr-section__head .amort-heading {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.01em;
}

/* Breakdown bars */
.fr-bars { display: flex; flex-direction: column; gap: var(--space-10); }
.fr-bar { display: flex; flex-direction: column; gap: var(--space-2); }
.fr-bar__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: var(--text-sm);
  color: var(--ink);
  font-weight: var(--font-semibold);
}
.fr-bar__label .tabular { color: var(--ink-2); font-weight: var(--font-regular); font-size: 12px; }
.fr-bar__track {
  display: flex;
  height: 14px;
  border-radius: var(--radius-full);
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}
.fr-bar__seg { transition: width 250ms ease; }
.fr-bar__seg--net { background: var(--accent); }
.fr-bar__seg--tax { background: var(--amber); }
.fr-bar__seg--billable { background: var(--accent); }
.fr-bar__seg--nonbillable { background: var(--ink-3); }
.fr-bar__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: 12px;
  color: var(--ink-2);
  margin-top: 4px;
}
.fr-bar__legend .legend-item--billable .swatch { background: var(--accent); }
.fr-bar__legend .legend-item--nonbillable .swatch { background: var(--ink-3); }

.fr-breakdown-details {
  margin-top: var(--space-6);
  border-top: 1px solid var(--line);
  padding-top: var(--space-4);
}
.fr-breakdown-details > summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: var(--font-semibold);
  color: var(--ink-2);
  margin-bottom: var(--space-3);
  list-style: none;
}
.fr-breakdown-details > summary::-webkit-details-marker { display: none; }
.fr-breakdown-details > summary::before {
  content: '▸ ';
  display: inline-block;
  transition: transform var(--transition-fast);
}
.fr-breakdown-details[open] > summary::before { transform: rotate(90deg); }

.fr-ladder-tag {
  display: inline-block;
  padding: 1px 6px;
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: var(--font-bold);
  margin-left: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ═══ Formula section (scoped) ═══ */

.fr-formula {
  margin-top: var(--space-16);
  padding-top: var(--space-10);
  border-top: 1px solid var(--line);
}
.fr-formula__head { margin-bottom: var(--space-8); }
.fr-formula__head .calc-section-heading { margin-bottom: var(--space-2); }
.fr-formula__lede {
  color: var(--ink-2);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  margin: 0;
  max-width: 60ch;
}

.fr-formula-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-10);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  counter-reset: fr-step;
}
.fr-formula-step {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  align-items: start;
  position: relative;
}
.fr-formula-step--final {
  background: var(--accent-soft);
  border-color: var(--accent);
}
[data-theme='dark'] .fr-formula-step--final { background: var(--accent-soft); }

.fr-formula-step__num {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
}
.fr-formula-step--final .fr-formula-step__num {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.fr-formula-step__body { min-width: 0; }
.fr-formula-step__title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--ink);
  letter-spacing: -0.01em;
}
.fr-formula-step__eq {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-2);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--text-base);
  margin-bottom: var(--space-3);
}
.fr-formula-step--final .fr-formula-step__eq { background: var(--surface); border: 1px solid var(--accent); }
.eq-var { color: var(--accent); font-weight: var(--font-bold); }
.eq-op { color: var(--ink-3); font-weight: var(--font-bold); }
.eq-expr { color: var(--ink); font-weight: var(--font-medium); }
.fr-formula-step__why {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

/* Live plugged-in steps */
.fr-formula-live {
  margin-bottom: var(--space-10);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.fr-formula-live > summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-4) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-weight: var(--font-semibold);
  color: var(--ink);
  font-size: var(--text-sm);
}
.fr-formula-live > summary::-webkit-details-marker { display: none; }
.fr-formula-live > summary svg {
  transition: transform var(--transition-fast);
  color: var(--ink-3);
}
.fr-formula-live[open] > summary svg { transform: rotate(180deg); }
.fr-formula-live__steps {
  list-style: decimal;
  padding: 0 var(--space-6) var(--space-5) var(--space-10);
  margin: 0;
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 2;
  border-top: 1px solid var(--line);
  padding-top: var(--space-5);
}
.fr-formula-live__steps li { margin-bottom: var(--space-2); }
.fr-formula-live__steps .highlight {
  color: var(--accent);
  font-weight: var(--font-bold);
  background: var(--accent-soft);
  padding: 2px 6px;
  border-radius: 4px;
}

/* Glossary */
.fr-formula-glossary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
}
.fr-formula-glossary__item {
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.fr-formula-glossary dt {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--accent);
  margin-bottom: var(--space-2);
}
[data-theme='dark'] .fr-formula-glossary dt { color: var(--accent-2); }
.fr-formula-glossary dd {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

@media (max-width: 560px) {
  .fr-slider-row { grid-template-columns: 1fr; gap: 10px; }
  .fr-slider-row .fr-slider-num { max-width: 100%; }
  .fr-hero__sub { gap: 8px; }
  .fr-hero__sub-item .value { font-size: var(--text-sm); }
  .fr-result-hero { padding: var(--space-5); }
  .fr-compare-cols { grid-template-columns: 1fr; text-align: center; }
  .fr-compare-arrow { display: none; }
  .fr-formula-step { grid-template-columns: 36px 1fr; gap: var(--space-4); padding: var(--space-4); }
  .fr-formula-step__num { width: 36px; height: 36px; font-size: var(--text-base); }
  .fr-formula-step__eq { gap: var(--space-2); }
}

@media print {
  .fr-hero__actions, .fr-advanced__summary > svg:last-child,
  .fr-compare-toggle, .fr-actions { display: none !important; }
  .fr-advanced[open], .fr-advanced { border: 1px solid #ddd; }
  .fr-result-hero { box-shadow: none; border: 1px solid #ddd; }
  .fr-formula-step { page-break-inside: avoid; }
}

/* ── Break-even — formula section (scoped) ──────────────────────── */
.be-formula { margin-top: 48px; }
.be-formula > .calc-section-heading { margin-bottom: 22px; }
.be-formula .be-formula-lines {
  display: grid;
  gap: 0;
  background: var(--surface-2, #f6f7f9);
  border: 1px solid var(--line, #e6e8ec);
  border-left: 3px solid var(--accent, #6366f1);
  border-radius: var(--radius, 10px);
  padding: 10px 24px;
  margin: 0 0 36px;
}
.be-formula .be-formula-line {
  display: grid;
  grid-template-columns: minmax(170px, auto) 1fr;
  align-items: baseline;
  gap: 20px;
  padding: 18px 0;
  border-top: 1px solid var(--line, #e6e8ec);
  font-size: 15px;
  line-height: 1.6;
}
.be-formula .be-formula-line:first-child { border-top: 0; }
.be-formula .be-formula-name {
  font-weight: 700;
  color: var(--ink, #14161a);
  letter-spacing: -0.01em;
}
.be-formula .be-formula-eq {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 14px;
  color: var(--ink-2, #3d4149);
  word-break: break-word;
}
.be-formula .be-var {
  color: var(--ink, #14161a);
  font-weight: 600;
  background: var(--surface, #fff);
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--line, #e6e8ec);
  white-space: nowrap;
}

.be-formula .be-formula-vars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 20px;
  margin: 0 0 40px;
  padding: 0;
  max-width: none;
  font-size: 14px;
}
.be-formula .be-formula-var {
  padding: 16px 18px;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e6e8ec);
  border-radius: var(--radius, 10px);
}
.be-formula .be-formula-var dt {
  font-weight: 700;
  color: var(--ink, #14161a);
  font-size: 13px;
  margin: 0 0 6px;
  border: 0;
  padding: 0;
}
.be-formula .be-formula-var dd {
  margin: 0;
  color: var(--ink-2, #3d4149);
  font-size: 13px;
  line-height: 1.5;
}

.be-formula .be-formula-sub-heading {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3, #6b7280);
  margin: 0 0 16px;
}
.be-formula .be-formula-steps {
  list-style: none;
  counter-reset: be-step;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.be-formula .be-formula-steps li {
  counter-increment: be-step;
  position: relative;
  padding: 16px 18px 16px 50px;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e6e8ec);
  border-radius: var(--radius, 10px);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  color: var(--ink-2, #3d4149);
  line-height: 1.6;
}
.be-formula .be-formula-steps li::before {
  content: counter(be-step);
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent, #6366f1);
  color: #fff;
  font-family: var(--font-display, inherit);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.be-formula .be-formula-steps .highlight {
  color: var(--accent, #6366f1);
  font-weight: 700;
  background: rgba(99, 102, 241, 0.08);
  padding: 1px 6px;
  border-radius: 4px;
}

@media (max-width: 640px) {
  .be-formula .be-formula-line { grid-template-columns: 1fr; gap: 4px; }
  .be-formula .be-formula-vars { grid-template-columns: 1fr; }
}

/* ── Break-even — chart (scoped) ────────────────────────────────── */
.be-chart-card { margin-top: 28px; }
.be-chart { padding-top: 10px; }
.be-chart svg { height: 260px; }
@media (max-width: 640px) {
  .be-chart svg { height: 210px; }
}
.be-chart-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.be-chart-line--revenue { stroke: var(--ok, #10b981); stroke-width: 2.5; }
.be-chart-line--total   { stroke: var(--amber, #f59e0b); stroke-width: 2.5; }
.be-chart-line--fixed   { stroke: var(--ink-3, #6b7280); stroke-dasharray: 4 4; opacity: 0.7; }
.be-chart-fill { stroke: none; }
.be-chart-fill--profit { fill: var(--ok, #10b981); opacity: 0.14; }
.be-chart-fill--loss   { fill: var(--amber, #f59e0b); opacity: 0.12; }

.be-chart .area-chart__crossover { stroke: var(--ink-2, #3d4149); stroke-width: 1.5; stroke-dasharray: 3 3; }

.be-chart-annot {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  background: var(--ink, #14161a);
  color: #fff;
  font-size: 11px;
  line-height: 1.2;
  padding: 6px 10px;
  border-radius: 6px;
  pointer-events: none;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.be-chart-annot-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.7;
}
.be-chart-annot-value { font-weight: 700; font-size: 12px; }
.be-chart-annot::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  background: var(--ink, #14161a);
}

.be-chart-xlabels {
  position: relative;
  height: 18px;
  margin-top: 10px;
  font-size: 11px;
  color: var(--ink-3, #6b7280);
  font-family: var(--font-mono, ui-monospace, monospace);
}
.be-chart-xlabels span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}
.be-chart-xlabels span:first-child { transform: none; }
.be-chart-xlabels span:last-child { transform: translateX(-100%); }
.be-chart-xlabels strong { color: var(--ink, #14161a); font-weight: 700; }

.be-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
  margin-top: 14px;
  font-size: 12px;
  color: var(--ink-2, #3d4149);
}
.be-chart-legend .legend-item { display: inline-flex; align-items: center; gap: 6px; }
.be-chart-sw {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}
.be-chart-sw--revenue { background: var(--ok, #10b981); }
.be-chart-sw--total   { background: var(--amber, #f59e0b); }
.be-chart-sw--fixed   { background: var(--ink-3, #6b7280); opacity: 0.7; }
.be-chart-sw--profit  { background: var(--ok, #10b981); opacity: 0.25; }
.be-chart-sw--loss    { background: var(--amber, #f59e0b); opacity: 0.25; }

/* ── Break-even — sensitivity table polish ───────────────────────── */
.be-sens-table tbody tr.be-sens-current {
  background: var(--surface-2, rgba(99, 102, 241, 0.06));
  font-weight: var(--font-bold, 600);
}
.be-sens-table tbody tr.be-sens-current td:first-child {
  position: relative;
  padding-left: 18px;
}
.be-sens-table tbody tr.be-sens-current td:first-child::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent, #6366f1);
}
@media (max-width: 640px) {
  .be-sens-table th.be-sens-cm,
  .be-sens-table td.be-sens-cm { display: none; }
}

/* ═════════════════════════════════════════════════════════════════
 * Budget calculator — live-runtime variant
 * Colour mapping (reuses existing tokens):
 *   Needs   → var(--accent)   (indigo)
 *   Wants   → var(--teal)     (teal)
 *   Savings → var(--amber)    (amber)
 * ═════════════════════════════════════════════════════════════════ */

/* Hero sign flip */
.bd-hero--positive .result-value { color: var(--accent); }
.bd-hero--negative .result-value { color: var(--rose, #e11d48); }
.bd-hero--negative { animation: bdShake .35s cubic-bezier(.36,.07,.19,.97); }
.bd-hero--empty .result-value { opacity: .55; }

@keyframes bdShake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-3px, 0, 0); }
  40%, 60% { transform: translate3d(3px, 0, 0); }
}

/* Row layout */
.bd-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.bd-row {
  display: grid;
  grid-template-columns: 1.25fr 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 2px 4px 2px 0;
  border-radius: var(--radius-sm);
  transition: background .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.bd-row[data-kind="income"] {
  grid-template-columns: 1.2fr 1fr 0.9fr auto;
}
.bd-row .input-wrap { min-width: 0; }
.bd-row .bd-row-amount .suffix { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12px; }

/* Frequency <select> — styled like an input with a chevron.
   Parent .input-wrap clips overflow, so the caret is a background-image on
   the <select> itself rather than a pseudo-element. */
.bd-row select.bd-freq {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  flex: 1;
  min-width: 0;
  width: 100%;
  border: 0;
  background-color: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%23697280' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px;
  padding: 15px 32px 15px 12px;
  margin: 0;
  font-size: 14px;
  font-family: inherit;
  font-weight: 500;
  color: var(--ink, var(--text));
  cursor: pointer;
  outline: none;
  line-height: 1.2;
}
.bd-row select.bd-freq:focus {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%236366f1' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
.bd-row select.bd-freq::-ms-expand { display: none; }

/* Remove button — hover/focus-revealed trash */
.bd-row-remove {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s ease, background .15s ease, color .15s ease;
}
.bd-row:hover .bd-row-remove,
.bd-row:focus-within .bd-row-remove { opacity: 1; }
.bd-row-remove:hover { color: var(--rose, #e11d48); background: var(--surface-2); }
.bd-row-remove:focus-visible { opacity: 1; outline: 2px solid var(--accent); outline-offset: 2px; }

/* Overspend warning — single line > 25% of income */
.bd-row--overspend .bd-row-amount {
  box-shadow: inset 0 0 0 1px var(--amber, #f59e0b);
}
.bd-row--overspend .bd-row-amount .suffix {
  color: var(--amber, #f59e0b);
  font-weight: var(--font-semibold);
}

/* Drag & drop */
.bd-row[draggable="true"] { cursor: grab; }
.bd-row--dragging { opacity: .5; cursor: grabbing; }
.bd-row--drop-target {
  background: var(--surface-2);
  box-shadow: 0 -2px 0 0 var(--accent) inset;
}

/* Group headers with dot + target + live aux */
.bd-group-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bd-group-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--muted);
  flex: 0 0 auto;
}
.bd-group-dot--needs   { background: var(--accent); }
.bd-group-dot--wants   { background: var(--teal, #14b8a6); }
.bd-group-dot--savings { background: var(--amber, #f59e0b); }
.bd-group-target {
  font-size: 11px;
  font-weight: var(--font-medium);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.bd-group-aux { margin-left: auto; font-variant-numeric: tabular-nums; }

/* Group header progress bar (in the form) */
.bd-group-bar {
  position: relative;
  height: 4px;
  margin: 4px 0 12px;
  background: var(--surface-2);
  border-radius: var(--radius-full);
  overflow: visible;
}
.bd-group-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: var(--radius-full);
  transition: width .3s ease;
}
.bd-group-bar-fill--needs   { background: var(--accent); }
.bd-group-bar-fill--wants   { background: var(--teal, #14b8a6); }
.bd-group-bar-fill--savings { background: var(--amber, #f59e0b); }
.bd-group-bar-target {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: var(--text);
  opacity: .55;
  border-radius: 1px;
}

/* Preset category chip row under each group */
.bd-preset-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.bd-add-chip {
  margin-top: 8px;
  border-style: dashed;
}
.bd-preset-chip { border-style: dashed; }
.bd-preset-chip--blank {
  color: var(--muted);
}

/* Composition stacked bar — extra "unallocated" segment */
.bd-stack-bar { height: 10px; }
.bd-stack-seg--unalloc {
  background: repeating-linear-gradient(45deg, var(--surface-2) 0 4px, var(--surface) 4px 8px);
  display: block;
  height: 100%;
  transition: width .3s ease;
}
.bd-stack-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
}
.bd-stack-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}
.bd-stack-legend .dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.bd-stack-legend .dot--accent { background: var(--accent); }
.bd-stack-legend .dot--teal   { background: var(--teal, #14b8a6); }
.bd-stack-legend .dot--amber  { background: var(--amber, #f59e0b); }
.bd-stack-legend .dot--muted  { background: var(--surface-2); border: 1px dashed var(--line); }

.breakdown-label .dot--muted {
  background: var(--surface-2);
  border: 1px dashed var(--line);
}

/* 50/30/20 check card */
.bd-rule-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.bd-rule-row { display: block; }
.bd-rule-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.bd-rule-label { display: inline-flex; align-items: center; gap: 8px; font-weight: var(--font-medium); }
.bd-rule-numbers { font-variant-numeric: tabular-nums; color: var(--muted); }
.bd-rule-sep { margin: 0 4px; opacity: .6; }
.bd-rule-target { color: var(--muted); }
.bd-rule-bar {
  position: relative;
  height: 6px;
  background: var(--surface-2);
  border-radius: var(--radius-full);
  overflow: visible;
}
.bd-rule-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: var(--radius-full);
  transition: width .3s ease;
}
.bd-rule-bar-target {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: var(--text);
  opacity: .55;
  border-radius: 1px;
}
.bd-rule-foot {
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}
.bd-rule-foot--good { color: #059669; }
.bd-rule-foot--bad  { color: var(--rose, #e11d48); }

/* Share label */
.bd-share-label { display: inline-block; }

/* Responsive */
@media (max-width: 640px) {
  .bd-row {
    grid-template-columns: 1fr 1fr auto;
  }
  .bd-row[data-kind="income"] {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
  }
  .bd-row[data-kind="income"] .bd-row-name { grid-column: 1 / -1; }
  .bd-row-remove { opacity: 1; }
}



/* ═══════════════════════════════════════════════════════════════
 * Business Valuation — per-method range bars + weighted legend
 * ═══════════════════════════════════════════════════════════════ */
.bv-ranges {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.bv-ranges-empty {
  font-size: 13px;
  color: var(--muted);
  padding: var(--space-3) 0;
}
.bv-range-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bv-range-row.is-primary .bv-range-label { font-weight: 600; }
.bv-range-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  font-size: 13px;
}
.bv-range-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
}
.bv-range-sub {
  color: var(--muted);
  font-size: 12px;
}
.bv-range-tag {
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 500;
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-full);
}
.bv-range-track {
  position: relative;
  height: 10px;
  background: var(--surface-2, rgba(0,0,0,.05));
  border-radius: var(--radius-full);
  overflow: visible;
}
.bv-range-fill {
  position: absolute;
  top: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--teal, var(--accent)));
  border-radius: var(--radius-full);
  transition: left .25s ease, width .25s ease;
}
.bv-range-marker {
  position: absolute;
  top: -3px;
  width: 2px;
  height: 16px;
  background: var(--text);
  border-radius: 1px;
  transform: translateX(-1px);
  transition: left .25s ease;
}
.bv-range-values {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--muted);
}
.bv-range-mid { color: var(--text); font-weight: 600; }

.bv-weight {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}
.bv-weight-heading {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 6px;
}
.bv-weight-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
}
.bv-weight-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.bv-weight-item .mono { color: var(--text); }

/* ═══════════════════════════════════════════════════════════════
 * Business Valuation — formula card (multi-method layout)
 * ═══════════════════════════════════════════════════════════════ */
.formula-methods {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  max-width: 720px;
  margin: 0 auto var(--space-5);
  text-align: left;
}
.formula-method {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.formula-method--weighted {
  grid-column: 1 / -1;
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  border-color: var(--line-strong, var(--line));
}
.formula-method__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}
.formula-eq--bv {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 2px;
  margin: 0;
  background: transparent;
  border: none;
  font-family: var(--font-display, 'JetBrains Mono', monospace);
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: .01em;
}
.formula-eq--bv .formula-token {
  font-style: italic;
  color: var(--ink);
}
.formula-eq--bv .formula-token sub {
  font-size: .65em;
  font-style: normal;
  color: var(--muted);
  font-weight: 500;
  margin-left: 1px;
}
.formula-eq--bv .formula-op {
  color: var(--muted);
  font-weight: 500;
  font-style: normal;
}
.formula-eq--bv .formula-frac {
  font-size: .9em;
}
.formula-method--weighted .formula-eq--bv { font-size: 20px; }

@media (max-width: 640px) {
  .formula-methods { grid-template-columns: 1fr; }
  .formula-eq--bv { font-size: 17px; }
}

/* ═════════════════════════════════════════════════════════════════
 * Net Worth calculator
 * ═══════════════════════════════════════════════════════════════ */

/* Section heading with live total on the right. */
.nw-section .form-section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}
.nw-section-total {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.nw-section--assets .nw-section-total:not(:empty) { color: var(--accent); }
.nw-section--liabilities .nw-section-total:not(:empty) { color: var(--rose); }

/* Collapsible category card. */
.nw-cat {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  margin-bottom: var(--space-3);
  overflow: hidden;
}
.nw-cat-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: 12px 16px;
  background: var(--surface-2);
  border: none;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  font-family: inherit;
  color: var(--ink);
  text-align: left;
  transition: background var(--transition-fast);
}
.nw-cat-header:hover { background: var(--accent-soft); }
.nw-cat.is-collapsed .nw-cat-header { border-bottom-color: transparent; }
.nw-cat-chevron {
  display: inline-block;
  font-size: 12px;
  color: var(--ink-3);
  transition: transform var(--transition-fast);
  width: 10px;
  text-align: center;
}
.nw-cat.is-collapsed .nw-cat-chevron { transform: rotate(-90deg); }
.nw-cat-title {
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
  flex: 1;
}
.nw-cat-header .info-tip { margin-left: -4px; }
.nw-cat-subtotal {
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--ink);
  min-width: 64px;
  text-align: right;
}
.nw-cat-subtotal[data-empty="true"] { color: var(--ink-3); font-weight: var(--font-regular); }
.nw-cat-body {
  padding: 12px 16px 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nw-cat.is-collapsed .nw-cat-body,
.nw-cat.is-collapsed .nw-cat-footer { display: none; }
.nw-cat-footer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 16px 12px;
  flex-wrap: wrap;
}

/* A row = description + amount + remove, in a single compact flex line. */
.nw-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nw-row .nw-name {
  flex: 1 1 50%;
  min-width: 0;
}
.nw-row .nw-amount-wrap {
  flex: 0 1 180px;
  min-width: 130px;
}
.nw-row .nw-amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.nw-remove {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-3);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.nw-remove:hover {
  background: var(--rose-soft);
  color: var(--rose);
  border-color: var(--rose);
}

/* Preset chips — lighter weight than the primary `.chip`. */
.nw-preset-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1 1 auto;
}
.nw-preset-chip {
  padding: 4px 10px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--ink-2);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: inherit;
}
.nw-preset-chip:hover {
  border-color: var(--accent);
  border-style: solid;
  color: var(--accent);
  background: var(--accent-soft);
}

/* Action row at the bottom of the inputs card. */
.nw-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

/* Signed colouring on the hero value. */
.result-hero .result-value.nw-result-value--positive,
#nw-result-value.nw-result-value--positive { color: var(--accent); }
.result-hero .result-value.nw-result-value--negative,
#nw-result-value.nw-result-value--negative { color: var(--rose); }

/* Asset-vs-liability stacked bar in the hero. */
.nw-stack-wrap {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: var(--space-3);
  row-gap: 6px;
  margin-top: var(--space-4);
  align-items: center;
}
.nw-stack-label {
  display: contents;
  font-size: var(--text-xs);
  color: var(--ink-2);
}
.nw-stack-label > span:first-child {
  font-size: var(--text-xs);
  color: var(--ink-2);
  order: 1;
}
.nw-stack-label > span:last-child {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  order: 2;
}
.nw-stack-bar {
  grid-column: 1 / -1;
  display: flex;
  width: 100%;
  height: 10px;
  border-radius: var(--radius-full);
  overflow: hidden;
  background: var(--surface-2);
}
.nw-stack-seg {
  display: block;
  height: 100%;
  transition: width .3s ease;
  border-radius: var(--radius-full);
}
.nw-stack-seg--asset { background: var(--accent); }
.nw-stack-seg--liab  { background: var(--rose); }

/* Compare card meta (pinned timestamp). */
.nw-compare-meta {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--ink-3);
  text-align: right;
}

/* Interpretation callout. */
.nw-insight-card { margin-top: 16px; background: var(--accent-soft); border-color: var(--accent); }
.nw-insight {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}
.nw-insight-icon {
  font-size: 20px;
  line-height: 1.2;
  flex-shrink: 0;
}
.nw-insight-text {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--ink);
}

/* Summary stat grid (top of the breakdown tab). */
.nw-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.nw-summary-stat {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.nw-summary-stat__label {
  font-size: var(--text-xs);
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 4px;
}
.nw-summary-stat__value {
  font-size: 22px;
  font-weight: var(--font-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  margin-bottom: 2px;
}
.nw-summary-stat__value--rose { color: var(--rose); }
.nw-summary-stat__value--accent { color: var(--accent); }
.nw-summary-stat__sub {
  font-size: var(--text-xs);
  color: var(--ink-3);
}
.nw-summary-nw-row--negative .mono { color: var(--rose); }

/* Donut chart + legend. */
.nw-donut-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: center;
  margin-bottom: var(--space-4);
}
.nw-donut-wrap {
  flex-shrink: 0;
  width: 180px;
}
.nw-donut {
  display: block;
  width: 100%;
  height: auto;
}
.nw-donut-track { stroke: var(--surface-2); }
.nw-donut-center-label {
  font-size: 10px;
  fill: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-family: var(--font-body);
}
.nw-donut-center-value {
  font-size: 13px;
  fill: var(--ink);
  font-weight: 600;
  font-family: var(--font-body);
}
.nw-donut-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.nw-donut-legend-item {
  display: grid;
  grid-template-columns: 12px 1fr auto auto;
  gap: 8px;
  align-items: center;
  font-size: var(--text-sm);
}
.nw-donut-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}
.nw-donut-name { color: var(--ink-2); }
.nw-donut-pct { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.nw-donut-amt { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.nw-donut-empty { font-size: var(--text-sm); color: var(--ink-3); }

.nw-alloc-table, .nw-summary-table { margin-top: var(--space-2); }

@media (max-width: 640px) {
  .nw-donut-row {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .nw-donut-legend { width: 100%; }
  .nw-row {
    flex-wrap: wrap;
  }
  .nw-row .nw-name { flex-basis: 100%; }
  .nw-row .nw-amount-wrap { flex: 1 1 auto; }
  .nw-cat-header { padding: 10px 12px; }
  .nw-cat-body { padding: 12px 12px 4px; }
  .nw-cat-footer { padding: 4px 12px 12px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Income Tax — horizontal bracket-fill chart
   ═════════════════════════════════════════════════════════════════════════ */

.itx-bracket-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.itx-bracket {
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  transition: border-color .2s ease, background .2s ease;
}
.itx-bracket--partial { border-color: var(--teal); }
.itx-bracket--full    { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }
.itx-bracket--empty   { opacity: .65; }

.itx-bracket-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 13px;
}
.itx-bracket-rate {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  min-width: 42px;
}
.itx-bracket--empty .itx-bracket-rate { color: var(--text-muted); }
.itx-bracket-range {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.itx-bracket-name {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
}

.itx-bracket-bar {
  position: relative;
  height: 10px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--line) 70%, transparent);
  overflow: hidden;
}
.itx-bracket-bar-fill {
  display: block;
  height: 100%;
  border-radius: 5px;
  background: var(--teal);
  transition: width .35s ease;
}
.itx-bracket--full .itx-bracket-bar-fill { background: var(--accent); }

.itx-bracket-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-muted);
}
.itx-bracket-tax { color: var(--text); font-weight: 600; }

@media (max-width: 640px) {
  .itx-bracket { padding: 8px 10px; }
  .itx-bracket-head { font-size: 12px; gap: 8px; }
  .itx-bracket-foot { font-size: 11px; }
}

/* ═══════════════════════════════════════════════════════════════════
   Age calculator — typographic hero, context chips, secondary line.
   Reuses the shared `.result-hero`, `.breakdown-card`, `.compare-card`,
   and `.ci-stack-bar` systems; only adds age-specific flourishes.
   ═══════════════════════════════════════════════════════════════════ */

.age-hero .result-value.age-result-value {
  display: flex;
  align-items: baseline;
  gap: .35em;
  line-height: 1;
}
.age-hero .age-years {
  font-size: 1em;
  font-weight: var(--font-bold, 700);
}
.age-hero .age-years-unit {
  font-size: .42em;
  font-weight: var(--font-medium, 500);
  color: var(--ink-3);
  letter-spacing: .02em;
  text-transform: lowercase;
  -webkit-text-fill-color: var(--ink-3);
}
.age-result-secondary {
  margin-top: 2px;
  font-size: var(--text-base);
  color: var(--ink-2);
  letter-spacing: .01em;
}

.age-context-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: var(--space-3) 0 var(--space-1);
}
.age-context-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: var(--text-xs);
  font-weight: var(--font-medium, 500);
  letter-spacing: .02em;
  border: 1px solid var(--line);
}

/* Seconds ticker — subtle pulse to hint it's live. */
.age-seconds-live {
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .age-hero .result-value.age-result-value {
    flex-wrap: wrap;
  }
}

/* ═══════════════════════════════════════════════════════════════
   BMI calculator — extras introduced with the 2026 redesign
   (arc gauge, healthy weight bar, action card, trajectory chart,
   hero category gradient). Scoped via .bmi-* prefixes so these do
   not collide with other calculators.
   ═══════════════════════════════════════════════════════════════ */

/* Hero gradient + pulse colours per BMI class. data-class is set on
   `.result-hero.bmi-hero` by bmi.js. */
.bmi-hero[data-class="0"] { background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 55%, #60a5fa 100%); }
.bmi-hero[data-class="1"] { background: linear-gradient(135deg, #14322a 0%, #15803d 55%, #4ade80 100%); }
.bmi-hero[data-class="2"] { background: linear-gradient(135deg, #3b2510 0%, #b45309 55%, #fbbf24 100%); }
.bmi-hero[data-class="3"] { background: linear-gradient(135deg, #3b2510 0%, #b45309 55%, #f59e0b 100%); }
.bmi-hero[data-class="4"] { background: linear-gradient(135deg, #3b1414 0%, #b91c1c 55%, #f87171 100%); }
.bmi-hero[data-class="5"] { background: linear-gradient(135deg, #2a0d0d 0%, #991b1b 55%, #ef4444 100%); }
.bmi-hero[data-class="0"] .pulse-dot { background: #93c5fd; box-shadow: 0 0 0 3px rgba(147,197,253,.3); }
.bmi-hero[data-class="1"] .pulse-dot { background: #86efac; box-shadow: 0 0 0 3px rgba(134,239,172,.3); }
.bmi-hero[data-class="2"] .pulse-dot,
.bmi-hero[data-class="3"] .pulse-dot { background: #fcd34d; box-shadow: 0 0 0 3px rgba(252,211,77,.3); }
.bmi-hero[data-class="4"] .pulse-dot,
.bmi-hero[data-class="5"] .pulse-dot { background: #fca5a5; box-shadow: 0 0 0 3px rgba(252,165,165,.3); }

/* Arc gauge — semicircle dial with crisp coloured segments and a marker
   that slides ALONG the arc to the current BMI. The big number + label
   live inside the dome via SVG <text>, so nothing overlaps. */
.bmi-arc-wrap {
  position: relative;
  width: 100%;
  max-width: 360px;
  margin: 4px auto 0;
}
.bmi-arc {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 4px 8px rgba(15, 23, 42, .06));
}
.bmi-arc-marker {
  transition: cx .35s cubic-bezier(.34, 1.56, .64, 1),
              cy .35s cubic-bezier(.34, 1.56, .64, 1),
              fill .25s ease;
  filter: drop-shadow(0 2px 4px rgba(15, 23, 42, .25));
}
.bmi-arc-marker[data-class="0"] { fill: #3B82F6; }
.bmi-arc-marker[data-class="1"] { fill: #22C55E; }
.bmi-arc-marker[data-class="2"],
.bmi-arc-marker[data-class="3"] { fill: #F59E0B; }
.bmi-arc-marker[data-class="4"],
.bmi-arc-marker[data-class="5"] { fill: #EF4444; }
.bmi-arc-marker[data-class] { stroke: #fff; }
.bmi-arc-num {
  font-size: 40px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  fill: var(--ink);
  font-family: var(--font-display, var(--font-body));
  letter-spacing: -0.02em;
}
.bmi-arc-label {
  font-size: 12px;
  font-weight: 600;
  fill: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: .12em;
}
.bmi-arc-scale {
  position: relative;
  height: 16px;
  margin-top: 6px;
  font-size: 11px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.bmi-arc-scale span {
  position: absolute;
  transform: translateX(-50%);
}
[data-theme='dark'] .bmi-arc-num { fill: var(--ink); }
[data-theme='dark'] .bmi-arc-label { fill: var(--ink-2); }

/* Healthy weight band card — kg/lb bar with green band + draggable‑looking
   marker that actually echoes the live weight. */
.bmi-range-bar { display: flex; flex-direction: column; gap: 12px; }
.bmi-range-track {
  position: relative;
  height: 12px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: visible;
}
.bmi-range-band {
  position: absolute;
  top: 0; bottom: 0;
  background: rgba(34, 197, 94, 0.22);
  border-left: 2px solid var(--accent, #22C55E);
  border-right: 2px solid var(--accent, #22C55E);
  border-radius: 4px;
}
.bmi-range-marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: left 0.25s ease;
}
.bmi-range-marker-pin {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--surface);
  border: 3px solid var(--ink);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}
.bmi-range-marker-label {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.bmi-range-axis {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  margin-top: 18px;
}

/* Action ("what it would take") card. */
.bmi-action-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bmi-action-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink);
}
.bmi-action-row--ok { border-color: var(--accent, #22C55E); background: rgba(34, 197, 94, .08); }
.bmi-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink-2);
}
.bmi-action-row--ok .bmi-action-icon { color: var(--accent, #22C55E); border-color: var(--accent, #22C55E); }

/* Caveats accordion under tip card. */
.bmi-caveats { margin-top: 12px; font-size: 13px; color: var(--ink-2); }
.bmi-caveats > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--ink);
  padding: 4px 0;
}
.bmi-caveats > p { margin-top: 8px; line-height: 1.55; }

/* Trajectory chart controls + summary. */
.bmi-traj-controls {
  display: grid;
  gap: 16px;
  margin-bottom: 18px;
}
@media (min-width: 640px) {
  .bmi-traj-controls { grid-template-columns: 1fr 1fr; gap: 24px; }
}
.bmi-traj-summary {
  margin-top: 14px;
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.55;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.bmi-traj-summary strong { color: var(--ink); font-weight: 700; }
#bmi-traj-line { transition: d 0.25s ease; }
#bmi-traj-band { transition: y 0.25s ease, height 0.25s ease; }

/* ── Date difference calculator ──────────────────────────────── */

/* Nudger row under date inputs. */
.dd-nudger {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.dd-nudge {
  appearance: none;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink-2);
  padding: 4px 10px;
  font-size: 12px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
  transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}
.dd-nudge:hover { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.dd-nudge:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); border-color: var(--accent); }

/* Swap button sits on its own line, right-aligned. */
.dd-swap {
  display: inline-flex;
  margin-top: 8px;
  font-size: 12px;
}

/* Add/subtract field row. */
.dd-addsub-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.dd-addsub-num { max-width: 110px; }

/* Toggle group variant that wraps (for holiday country picker). */
.toggle-group--wrap { flex-wrap: wrap; }

/* Timeline bar in the result hero. */
.dd-timeline { margin-top: 16px; }
.dd-timeline__bar {
  position: relative;
  height: 6px;
  background: var(--surface-2);
  border-radius: var(--radius-full, 999px);
  overflow: visible;
}
.dd-timeline__fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--accent, #22C55E), var(--accent-strong, #16A34A));
  border-radius: var(--radius-full, 999px);
  width: 0;
  transition: width 0.3s ease;
}
.dd-timeline__now {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #1e2d28;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .28);
}
.dd-timeline__now::after {
  content: 'today';
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, .92);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgba(0, 0, 0, .35);
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}
.dd-timeline__ends {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 12px;
  color: rgba(255, 255, 255, .75);
  font-variant-numeric: tabular-nums;
}
.dd-timeline__bar {
  background: rgba(255, 255, 255, .14);
}

/* Hero-scoped overrides so text reads on the dark-green gradient. */
.result-hero .dd-tagline {
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .18);
}
.result-hero .dd-hero-actions .card-link {
  color: rgba(255, 255, 255, .85);
}
.result-hero .dd-hero-actions .card-link:hover {
  color: #fff;
}

/* Playful tagline in the hero. */
.dd-tagline {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: var(--radius-sm, 6px);
  background: var(--accent-soft);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.5;
}

/* Hero action row + copy button. */
.dd-hero-actions {
  display: flex;
  gap: 12px;
  margin-top: 14px;
  justify-content: flex-end;
}

/* Related-tools card below result hero. */
.dd-related-card { margin-top: 16px; }
.dd-related-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
}
.dd-related-list a { font-size: 13px; }

/* Breakdown hint text (small grey note after the label). */
.breakdown-hint {
  font-weight: 400;
  font-size: 11px;
  color: var(--ink-3);
  margin-left: 4px;
}

/* Calendar heatmap. */
.dd-heatmap { display: flex; flex-direction: column; gap: 12px; }
.dd-heatmap__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 12px;
  color: var(--ink-2);
}
.dd-heatmap__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dd-heatmap__grid {
  display: grid;
  grid-template-columns: repeat(7, 14px);
  grid-auto-flow: row;
  gap: 3px;
  max-height: 360px;
  overflow-y: auto;
  justify-content: start;
}
.dd-heatmap__empty {
  padding: 24px;
  text-align: center;
  color: var(--ink-3);
  font-size: 13px;
}
.dd-cell {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  transition: transform 0.1s ease;
}
.dd-cell:hover { transform: scale(1.3); }
.dd-cell--blank { visibility: hidden; }
.dd-cell--weekday { background: var(--accent, #22C55E); border-color: var(--accent, #22C55E); }
.dd-cell--weekend { background: var(--accent-soft); border-color: var(--accent-soft); }
.dd-cell--holiday { background: #F97316; border-color: #EA580C; }
.dd-cell--today   { background: var(--ink); border-color: var(--ink); }

/* Month-aggregated heatmap (very long ranges). */
.dd-month-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.dd-month-cell {
  padding: 6px 10px;
  font-size: 11px;
  font-family: var(--font-mono);
  background: var(--accent-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 6px);
  color: var(--ink);
}

/* Weekday + leap-day stats grid. */
.dd-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.dd-stat {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 6px);
  background: var(--surface-2);
}
.dd-stat__label {
  font-size: 11px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.dd-stat__value {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* Milestones list. */
.dd-milestones-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin: 4px 0 8px;
}
.dd-milestones {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dd-milestones li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 6px);
  font-size: 13px;
}
.dd-milestones__label { color: var(--ink); }
.dd-milestones__date  { color: var(--ink-2); }
.dd-milestones__empty { color: var(--ink-3); font-style: italic; }

/* ─────────────────────────────────────────────────────────────────
   Time Duration calculator — scoped styles
   ───────────────────────────────────────────────────────────────── */

/* Top-align fields so the dur field's preview row hangs below without
   dragging the rest of the row (label field, op toggle, remove button)
   down with it. The toggle/remove get their own `margin-top` below to
   sit level with the input wrap. */
.td-row__inputs { align-items: flex-start; flex-wrap: wrap; row-gap: 6px; }
/* Remove button on time-duration rows aligns with the input wrap, not the
   bottom of the dur field's preview line. Same height/offset as the op
   toggle above so it matches the input rendered height (50px). */
.td-row .tier-remove,
.td-row .tier-remove--placeholder {
  align-self: flex-start;
  margin-top: calc(1em + 4px);
  height: 50px;
}
.td-field--dur { flex: 2 1 160px; min-width: 140px; }
.td-field--label { flex: 1 1 120px; min-width: 100px; }
.tier-field__label-aux { color: var(--ink-3, var(--muted)); font-weight: 400; text-transform: none; letter-spacing: 0; }

/* Op toggle/spacer aligns with the duration *input* row, not the field
   bottom. Each `.tier-field` has the structure label → input-wrap → preview;
   the dur field renders the preview, so its column is taller than the
   label field. With `align-items: flex-end` on the parent, anchoring the
   toggle to flex-end pulls it down to the preview line. Use flex-start +
   margin-top equal to the label height + gap so the toggle sits level with
   the input regardless of whether the preview row is rendered. */
.td-op-spacer {
  flex: 0 0 auto;
  align-self: flex-start;
  margin-top: calc(1em + 4px); /* matches `.tier-field__label` line + `.tier-field` row-gap */
  /* height matches the actual `.input-wrap` rendered height (input padding 12px
     + ~19px line-height + 3px border ≈ 50px) so the toggle aligns top *and*
     bottom with the duration input — not just the top. */
  height: 50px;
  width: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-3, var(--muted));
  font-size: 16px;
  font-weight: 600;
}

.td-op-toggle {
  flex: 0 0 auto;
  align-self: flex-start;
  margin-top: calc(1em + 4px); /* see `.td-op-spacer` note above */
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  height: 50px; /* match `.input-wrap` rendered height */
}
.td-op-btn {
  width: 28px;
  height: 100%;
  background: var(--surface);
  color: var(--ink-2);
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  transition: background .12s ease, color .12s ease;
}
.td-op-btn:hover:not(.is-active) { background: var(--surface-2); }
.td-op-btn.is-active { background: var(--accent); color: #fff; }
.td-op-btn[data-op="subtract"].is-active { background: var(--amber, #f59e0b); }

.td-dur-preview {
  display: block;
  min-height: 14px;
  margin-top: 4px;
  font-size: 11px;
  color: var(--ink-3, var(--muted));
  font-variant-numeric: tabular-nums;
}
.td-dur-preview--err { color: var(--danger, #d04a3a); }

.td-stack-bar { margin-top: 12px; }
.td-stack-bar:empty { display: none; }
.td-stack-seg { transition: width .3s ease; }

.result-hero--negative .result-value { color: var(--danger, #d04a3a); -webkit-text-fill-color: var(--danger, #d04a3a); }
.result-hero--negative .pulse-dot { background: var(--danger, #d04a3a); }
.result-hero--empty .result-value { opacity: .45; }
.result-hero--empty .result-hint  { opacity: .6; }

@media (max-width: 640px) {
  .td-field--dur { flex: 1 1 100%; }
  .td-field--label { flex: 1 1 100%; }
  .td-op-toggle, .td-op-spacer { align-self: center; }
}




/* ═══════════════════════════════════════════
   Water Intake Calculator
   ═══════════════════════════════════════════ */

/* Hydration-tuned hero: cool blue → cyan override of the default green. */
.result-hero--water {
  background: linear-gradient(135deg, #0b3a5b 0%, #0f5b8a 55%, #2aa8d8 100%);
}
.result-hero--water .pulse-dot { background: #7fd6ff; box-shadow: 0 0 0 3px rgba(127, 214, 255, .28); }

/* Subtle animated wave under the result value. */
.wi-wave {
  margin: 14px 0 18px;
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .14);
  overflow: hidden;
  position: relative;
}
.wi-wave__fill {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #7fd6ff 0%, #b4efff 55%, #ffffff 100%);
  box-shadow: 0 0 16px rgba(127, 214, 255, .5);
  transition: width .3s ease;
}

/* Rose-colored stacked segment for life stage (mirrors ci-stack-seg--*). */
.wi-stack-seg--life { background: var(--rose, #ef4a6a); }

/* Target-mode note under the breakdown stack bar. */
.wi-target-note {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 13px;
}

/* 16-hour drinking schedule. */
.wi-schedule { padding: 6px 0 4px; }
.wi-schedule__axis {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  font-size: 11px;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.wi-schedule__axis span { text-align: center; }
.wi-schedule__track {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  gap: 4px;
  align-items: end;
  height: 120px;
  padding: 8px 0 12px;
  border-bottom: 1px solid var(--line);
}
.wi-schedule__cup {
  position: relative;
  height: 100%;
  border-radius: 6px 6px 3px 3px;
  background: linear-gradient(to top,
    var(--accent) 0%,
    var(--accent) calc(var(--fill, .5) * 100%),
    var(--surface-2) calc(var(--fill, .5) * 100%),
    var(--surface-2) 100%);
  border: 1px solid var(--line);
  cursor: help;
  transition: transform .12s ease;
}
.wi-schedule__cup:hover { transform: translateY(-2px); }
.wi-schedule__cup--boost {
  background: linear-gradient(to top,
    var(--amber, #f59e0b) 0%,
    var(--amber, #f59e0b) calc(var(--fill, .6) * 100%),
    var(--surface-2) calc(var(--fill, .6) * 100%),
    var(--surface-2) 100%);
  border-color: var(--amber, #f59e0b);
}
.wi-schedule__cup-label {
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: var(--ink-3);
  white-space: nowrap;
}
.wi-schedule__footer {
  display: flex;
  gap: 16px;
  margin-top: 20px;
  font-size: 12px;
  color: var(--ink-2);
}
.wi-schedule-table { margin-top: 20px; }
.wi-schedule-table th { font-size: 12px; text-align: left; color: var(--ink-2); }
.wi-schedule-table td { font-size: 13px; }

/* Compare deltas — colour coding reused from fr-compare. */
.compare-delta.is-up   { color: var(--accent); }
.compare-delta.is-down { color: #b14a5e; }
.compare-delta.is-flat { color: var(--ink-3); }

/* Collapse schedule on narrow screens: show table, hide cup track. */
@media (max-width: 560px) {
  .wi-schedule__track { display: none; }
  .wi-schedule__axis  { display: none; }
}

/* ─────────────────────────────────────────────────────────────────
   Sleep calculator — cycle diagram, quick-pick chips, muted sections
   ───────────────────────────────────────────────────────────────── */

.sl-quick-row { margin-top: 10px; }
.sl-quick-row .chip { padding: 4px 10px; font-size: 13px; }

.sl-time-wrap input[type="time"] {
  font-variant-numeric: tabular-nums;
  font-size: 18px;
  letter-spacing: 0.02em;
}

.sl-diagram { color: var(--accent); }
.sl-diagram__svg {
  display: block;
  width: 100%;
  height: 110px;
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.06));
}
[data-theme='dark'] .sl-diagram__svg {
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.08));
}
.sl-diagram__axis {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
  font-size: 12px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.sl-diagram__axis-mid {
  font-size: 11px;
  color: var(--ink-3);
  font-variant-numeric: normal;
}
.sl-diagram__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--ink-2);
}
.sl-diagram__legend span { display: inline-flex; align-items: center; gap: 6px; }
.sl-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-3);
}
.sl-dot--deep  { background: #4b5fc4; }
.sl-dot--rem   { background: #d48a3a; }
.sl-dot--light { background: #8fb3cc; }

/* Muted state for nap mode (greys out the age section that isn't used). */
.form-section.is-muted { opacity: 0.5; }
.form-section.is-muted .info-tip,
.form-section.is-muted .chip { pointer-events: none; }

/* Muted breakdown row — cycles outside the recommended age range. */
.breakdown-row.is-muted { opacity: 0.55; }
.breakdown-row.is-muted .breakdown-value { color: var(--ink-3); }


/* ══════════════════════════════════════════════════════════════════
   Day of week calculator — prev/next, weekday ring, calendar, facts,
   mode-specific cards, year-at-a-glance grid.
   ══════════════════════════════════════════════════════════════════ */

/* Prev / next day nav flanking the date input. */
.dw-date-nav {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
}
.dw-date-nav .dw-date-wrap { flex: 1; min-width: 0; }
.dw-step {
  flex: 0 0 auto;
  width: 40px;
  padding: 0;
  font-size: 14px;
  line-height: 1;
}

/* Hero: big day name (not mono), weekday ring, weekend badge. */
.dw-hero .dw-hero-main {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-2);
}
.dw-day-name {
  font-size: clamp(36px, 6vw, 56px);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  -webkit-text-fill-color: #fff;
}
.dw-day-name.is-placeholder { color: rgba(255, 255, 255, .6); -webkit-text-fill-color: rgba(255, 255, 255, .6); }

.dw-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: .04em;
  background: var(--accent-soft);
  color: var(--accent);
}
.dw-badge[hidden] { display: none; }
.dw-badge.is-weekend { background: #fff0e6; color: #b5572b; }
.dw-badge.is-weekday { background: var(--accent-soft); color: var(--accent); }
.dw-badge.is-holiday { background: #fdecf1; color: #b13a60; }

/* Weekday ring — Sun–Sat pills with the active one lit. */
.dw-weekday-ring {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin: var(--space-3) 0 var(--space-2);
}
.dw-wd {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--ink-3);
  background: var(--surface);
  transition: all .15s ease;
}
.dw-wd.is-weekend { color: var(--ink-2); background: var(--surface-2, #f6f4ef); }
.dw-wd.is-active {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  transform: translateY(-1px);
}

/* Mini calendar. */
.dw-calendar-card .card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.dw-cal-nav { display: flex; gap: 6px; }
.dw-cal-nav .calc-btn { width: 32px; padding: 0; }

.dw-calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}
.dw-cal-dow {
  text-align: center;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-3);
  padding: 6px 0;
}
.dw-cal-cell {
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  border-radius: 8px;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid transparent;
}
.dw-cal-cell.is-empty { background: transparent; }
.dw-cal-cell.is-weekend { color: var(--ink-3); }
.dw-cal-cell.is-today { border-color: var(--line-strong); font-weight: var(--font-semibold); }
.dw-cal-cell.is-selected {
  background: var(--accent);
  color: #fff;
  font-weight: var(--font-semibold);
  box-shadow: 0 2px 8px rgba(0,0,0,.10);
}
.dw-cal-cell.is-holiday::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #b13a60;
  margin-top: 22px;
}
.dw-cal-cell { position: relative; }

/* Year at a glance — 12 month strip. */
.dw-year-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--space-2);
}
.dw-year-cell {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dw-year-cell.is-selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.dw-year-cell__month {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--ink);
}
.dw-year-cell__first {
  font-size: var(--text-xs);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* Suppress calendar / year / details cards outside of dow mode,
   and the mode-specific cards otherwise. JS sets [data-dw-mode]. */
#dw-result-root[data-dw-mode="between"] ~ #dw-calendar-card,
#dw-result-root[data-dw-mode="between"] ~ #dw-details-card,
#dw-result-root[data-dw-mode="add"] ~ #dw-details-card,
#dw-result-root[data-dw-mode="nextwd"] ~ #dw-details-card {
  display: none;
}

/* Error state. */
.dw-warning {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: 8px;
  background: #fdecf1;
  color: #b13a60;
  font-size: var(--text-sm);
}

@media (max-width: 560px) {
  .dw-year-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dw-day-name { font-size: clamp(32px, 12vw, 44px); }
  .dw-step { width: 36px; }
}

/* ── Business Days Calculator ─────────────────────────────────── */

.bd-quickpicks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.bd-quick {
  appearance: none;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--ink-2);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.bd-quick:hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}
.bd-quick:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Calendar strip ----------------------------------------------- */
.bd-strip-card { margin-top: 16px; }

.bd-strip {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 2px;
  padding: 4px 0;
  overflow-x: auto;
  overflow-y: hidden;
}
.bd-strip--large {
  grid-auto-flow: row;
  grid-template-columns: repeat(auto-fill, minmax(18px, 1fr));
  grid-auto-columns: auto;
}

.bd-strip-day {
  position: relative;
  aspect-ratio: 1 / 1;
  min-width: 10px;
  border-radius: 3px;
  background: var(--accent);
  cursor: default;
  transition: transform .1s ease;
}
.bd-strip-day:hover { transform: scale(1.15); z-index: 2; }
.bd-strip-day--weekend { background: var(--border); }
.bd-strip-day--holiday { background: var(--amber); }
.bd-strip-day--result {
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--accent);
  z-index: 1;
}
.bd-strip-day--today { outline: 2px solid var(--ink-2); outline-offset: 1px; }

/* Simple tooltip on hover via title attribute — browsers handle it. */

.bd-strip-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--ink-2);
}
.bd-strip-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.bd-strip-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
}
.bd-strip-swatch--work { background: var(--accent); }
.bd-strip-swatch--weekend { background: var(--border); }
.bd-strip-swatch--holiday { background: var(--amber); }
.bd-strip-swatch--result {
  background: var(--accent);
  box-shadow: 0 0 0 1px var(--ink), 0 0 0 2px var(--accent);
}

/* Named holidays list ------------------------------------------ */
.bd-holidays { margin-top: var(--space-4); }
.bd-holidays__heading {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: var(--space-2);
}
.bd-holidays__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 4px;
}
.bd-holidays__list li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 6px 10px;
  background: var(--amber-soft, rgba(245, 158, 11, .08));
  border-left: 3px solid var(--amber);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}
.bd-holidays__list li .bd-hol-date {
  font-family: var(--font-mono, monospace);
  color: var(--ink-2);
  font-size: var(--text-xs);
  white-space: nowrap;
}
.bd-holidays__list li .bd-hol-name {
  color: var(--ink);
  font-weight: var(--font-medium);
}

/* ─────────────────────────────────────────────────────────────────
   Random Number Generator — scoped styles
   Reuses .card, .form-section, .chip-row, .ci-actions, .ci-warning,
   .result-hero. Adds number chips, histogram, share label.
   ───────────────────────────────────────────────────────────────── */

.rng-share-label { pointer-events: none; }

.rng-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 40px;
}
.rng-numbers--scroll {
  max-height: 320px;
  overflow-y: auto;
  padding-right: 4px;
}
.rng-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  min-width: 40px;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--font-mono, monospace);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.rng-number:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.rng-number--dup {
  background: var(--amber-soft, rgba(245, 158, 11, .12));
  border-color: var(--amber);
  color: #7a4a10;
}
[data-theme='dark'] .rng-number--dup { color: #fbbf24; }

@keyframes rng-chip-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rng-number--in {
  animation: rng-chip-in .28s ease both;
}
@media (prefers-reduced-motion: reduce) {
  .rng-number--in { animation: none; }
}

/* Histogram */
.rng-histogram {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 80px;
  padding: 0 2px;
}
.rng-hist-bar {
  flex: 1 1 0;
  min-height: 2px;
  background: var(--accent);
  border-radius: 2px 2px 0 0;
  opacity: .85;
  transition: height .25s ease, opacity .15s ease;
}
.rng-hist-bar:hover { opacity: 1; }
.rng-histogram-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  color: var(--ink-3);
  font-size: var(--text-xs);
  font-family: var(--font-mono, monospace);
}

/* Hero value can get long when count > 1. Keep it legible. */
.result-hero .result-value#rng-hero-value {
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  word-break: break-word;
}

/* ─────────────────────────────────────────────────────────────── */
/*  Ideal Weight calculator — scoped styles                        */
/*  Prefixed .iw-* or .bmi-band* to avoid colliding with the       */
/*  shared calculator primitives (.card, .chip, .result-hero…).    */
/* ─────────────────────────────────────────────────────────────── */

/* Hero secondary line: smaller caption directly under the main number. */
.result-hero .result-sub-line {
  margin-top: 6px;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.4;
}

/* Ideal-weight hero value can wrap when showing a kg range. */
.result-hero .result-value#iw-result-primary {
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  word-break: keep-all;
}

/* Ideal-weight hero: the "above/below/within" verdict is a sentence,
   not a number. Dial back the typographic weight so it doesn't dwarf
   the sub-stats row beneath. */
.result-hero[data-mode="healthy"] .result-value#iw-result-primary {
  font-size: 1.5rem;
}

/* ── Current-weight delta card inside the hero ── */
.iw-delta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 14px 0 4px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.iw-delta__label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.72);
}
.iw-delta__value {
  font-size: 1.15rem;
  font-weight: 600;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}
.iw-delta__value--good { color: #a6f2b8; }
.iw-delta__value--bad  { color: #ffd6a1; }
.iw-delta__hint {
  flex-basis: 100%;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.72);
}

/* ── BMI band visual ── */
.bmi-band-card .card-body { padding-top: 10px; }

.bmi-band {
  position: relative;
  padding: 10px 4px 28px;
}
.bmi-band__track {
  position: relative;
  display: flex;
  width: 100%;
  height: 30px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border, #e5e7eb);
}
/* Widths are fixed proportions of a 15–35 BMI domain:
     15–18.5 = 17.5%   (under)
     18.5–25 = 32.5%   (healthy)
     25–30   = 25%     (over)
     30–35   = 25%     (obese) */
.bmi-band__zone {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 600;
  color: #ffffff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
}
.bmi-band__zone--under   { flex-basis: 17.5%; background: linear-gradient(90deg, #7dd3fc, #38bdf8); }
.bmi-band__zone--healthy { flex-basis: 32.5%; background: linear-gradient(90deg, #86efac, #22c55e); }
.bmi-band__zone--over    { flex-basis: 25%;   background: linear-gradient(90deg, #fde68a, #f59e0b); }
.bmi-band__zone--obese   { flex-basis: 25%;   background: linear-gradient(90deg, #fca5a5, #ef4444); }

.bmi-band__scale {
  position: relative;
  margin-top: 4px;
  height: 14px;
  font-size: 0.72rem;
  color: var(--text-muted, #6b7280);
  font-variant-numeric: tabular-nums;
}
.bmi-band__scale span {
  position: absolute;
  transform: translateX(-50%);
}
/* 18.5 lives at the boundary between under and healthy = 17.5% of the band. */
.bmi-band__scale span:nth-child(1) { left: 17.5%; }
.bmi-band__scale span:nth-child(2) { left: 50%; }   /* 25 = boundary healthy/over */
.bmi-band__scale span:nth-child(3) { left: 75%; }   /* 30 = boundary over/obese */

.bmi-band__marker {
  position: absolute;
  top: -2px;
  left: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  transition: left 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.bmi-band__marker-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #111827;
  border: 3px solid #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.bmi-band__marker-dot::before {
  content: '';
  display: block;
  width: 2px;
  height: 34px;
  margin: 10px auto 0;
  background: #111827;
  opacity: 0.85;
}
.bmi-band__marker-label {
  margin-top: 44px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #111827;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* ── Adjusted healthy range block below the band ── */
.iw-adjusted-note {
  margin-top: 18px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface-subtle, #f8fafc);
  border: 1px solid var(--border, #e5e7eb);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}
.iw-adjusted-note__title {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #6b7280);
  font-weight: 600;
}
.iw-adjusted-note__body {
  font-weight: 600;
  color: var(--text, #111827);
  font-variant-numeric: tabular-nums;
}
.iw-adjusted-note__reason {
  flex-basis: 100%;
  font-size: 0.82rem;
  color: var(--text-muted, #6b7280);
}

/* ── Dual-input row (ft + in side-by-side) ── */
.dual-input-row {
  display: flex;
  gap: 10px;
}
.dual-input-row .input-wrap {
  flex: 1;
  min-width: 0;
}

/* ── Caveat / special-populations note ── */
.iw-caveat {
  padding: 12px 14px;
  border-radius: 10px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #7c2d12;
  font-size: 0.88rem;
  line-height: 1.5;
}
.iw-caveat strong { display: block; margin-bottom: 2px; }
.iw-caveat__targets { color: #9a3412; }

/* ── Formula partial grid (full-width section) ── */
.formula-lede {
  margin: 0 0 14px;
  color: var(--text-muted, #6b7280);
  font-size: 0.95rem;
  line-height: 1.55;
}
.iw-formula-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.iw-formula-note {
  padding: 14px;
  border-radius: 12px;
  background: var(--surface-subtle, #f8fafc);
  border: 1px solid var(--border, #e5e7eb);
}
.iw-formula-note header {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--border, #e5e7eb);
}
.iw-formula-note h3 {
  margin: 0 0 6px;
  font-size: 0.98rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.iw-formula-eq {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-muted, #6b7280);
}
.iw-formula-note p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text, #111827);
}

/* ── Work-hours weekly timesheet: per-row subtotal badge ──────── */
.wh-day-row .tier-row__inputs {
  align-items: center;
  flex-wrap: wrap;
  row-gap: 6px;
}
.wh-day-subtotal {
  flex: 0 0 auto;
  min-width: 92px;
  padding: 6px 10px;
  text-align: right;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text, #111827);
  background: var(--surface-2, #f4f6f8);
  border: 1px solid var(--line, #e4e8ed);
  border-radius: 6px;
  white-space: nowrap;
}
.wh-day-subtotal[data-empty="true"] {
  color: var(--muted, #8a8f99);
  font-weight: 500;
}
.wh-day-subtotal--ot {
  color: var(--amber-ink, #8a5a00);
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.3);
}
@media (max-width: 560px) {
  .wh-day-subtotal {
    flex: 1 1 100%;
    text-align: left;
  }
}

/* ──────────────────────────────────────────────────────────────
   Rounding calculator
   ────────────────────────────────────────────────────────────── */

/* Delta badge reuses .ci-delta-badge but swaps in rounding semantics. */
.ci-delta-badge.rnd-delta-badge { font-variant-numeric: tabular-nums; }

/* Digit breakdown ----------------------------------------------- */
.rnd-digits-card .card-body { padding-top: 18px; padding-bottom: 18px; }
.rnd-digits {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.1;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  text-align: center;
  overflow-x: auto;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.rnd-digit-kept { color: var(--ink); }
.rnd-digit-deciding {
  color: #92400e;
  background: rgba(245, 158, 11, 0.18);
  border-radius: 4px;
  padding: 0 4px;
  margin: 0 2px;
}
[data-theme='dark'] .rnd-digit-deciding,
:root:not([data-theme='light']) .rnd-digit-deciding {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.14);
}
.rnd-digit-dropped { color: var(--ink-3); opacity: 0.6; }
.rnd-digits-explainer {
  font-size: 0.875rem;
  color: var(--ink-2);
  margin: 10px 2px 0;
  line-height: 1.5;
}

/* Methods list -------------------------------------------------- */
.rnd-methods { list-style: none; margin: 0; padding: 0; }
.rnd-method {
  border-bottom: 1px solid var(--line);
}
.rnd-method:last-child { border-bottom: none; }
.rnd-method-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 120ms ease;
  border-radius: 6px;
}
.rnd-method-row:hover { background: var(--surface-2); }
.rnd-method-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.rnd-method-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}
.rnd-method-name {
  font-weight: 600;
  color: var(--ink);
  font-size: 0.95rem;
}
.rnd-method-tag {
  font-size: 0.72rem;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.rnd-method-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
.rnd-method-delta {
  font-size: 0.78rem;
  padding: 2px 6px;
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
  min-width: 3em;
  text-align: right;
  background: transparent;
}
.rnd-method-delta.is-up {
  color: #065f46;
  background: rgba(16, 185, 129, 0.12);
}
.rnd-method-delta.is-down {
  color: #9a3412;
  background: rgba(249, 115, 22, 0.12);
}
[data-theme='dark'] .rnd-method-delta.is-up,
:root:not([data-theme='light']) .rnd-method-delta.is-up {
  color: #6ee7b7; background: rgba(16, 185, 129, 0.14);
}
[data-theme='dark'] .rnd-method-delta.is-down,
:root:not([data-theme='light']) .rnd-method-delta.is-down {
  color: #fdba74; background: rgba(249, 115, 22, 0.16);
}
.rnd-method-delta.is-zero { visibility: hidden; }
.rnd-method-value {
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  min-width: 4em;
  text-align: right;
}
.rnd-method-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 6px;
  color: var(--ink-3);
  transition: background 120ms ease, color 120ms ease;
  cursor: pointer;
}
.rnd-method-copy:hover,
.rnd-method-copy:focus-visible {
  background: var(--accent-soft);
  color: var(--accent);
  outline: none;
}
.rnd-method-copy.is-copied {
  background: rgba(16, 185, 129, 0.14);
  color: #065f46;
}
[data-theme='dark'] .rnd-method-copy.is-copied,
:root:not([data-theme='light']) .rnd-method-copy.is-copied {
  color: #6ee7b7;
}
.rnd-method-explain {
  padding: 4px 6px 14px 6px;
  color: var(--ink-2);
  font-size: 0.875rem;
  line-height: 1.55;
}
.rnd-explain-rule { margin: 0 0 6px; }
.rnd-explain-math {
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink);
  padding: 8px 10px;
  background: var(--surface-2);
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
}
/* Grouped identical results — de-emphasise followers so the eye groups them */
.rnd-method.is-grouped-follower .rnd-method-name { color: var(--ink-2); font-weight: 500; }
.rnd-method.is-grouped-follower .rnd-method-value { opacity: 0.82; }
.rnd-method.is-grouped-follower .rnd-method-tag::before {
  content: "same as above · ";
  text-transform: none;
  color: var(--ink-3);
}

/* Number-line visualization ------------------------------------- */
.rnd-numberline-wrap { position: relative; padding-top: 8px; }
.rnd-numberline {
  width: 100%;
  height: auto;
  min-height: 260px;
  max-height: 300px;
  display: block;
}
.rnd-nl-axis {
  stroke: var(--line-strong, var(--line));
  stroke-width: 1.5;
}
.rnd-nl-tick { stroke: var(--line); stroke-width: 1; }
.rnd-nl-ticklabel {
  fill: var(--ink-3);
  font-size: 11px;
  font-family: var(--font-mono);
}
.rnd-nl-input-dot {
  fill: var(--accent);
  stroke: var(--surface);
  stroke-width: 2;
}
.rnd-nl-input-label {
  fill: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-mono);
}
.rnd-nl-line { stroke-width: 1.75; opacity: 0.7; }
.rnd-nl-line--up    { stroke: #10b981; }
.rnd-nl-line--down  { stroke: #f97316; }
.rnd-nl-line--same  { stroke: #9ca3af; stroke-dasharray: 3 3; }
.rnd-nl-target-dot { stroke: var(--surface); stroke-width: 2; }
.rnd-nl-target-dot.rnd-nl-line--up    { fill: #10b981; }
.rnd-nl-target-dot.rnd-nl-line--down  { fill: #f97316; }
.rnd-nl-target-dot.rnd-nl-line--same  { fill: #9ca3af; }
.rnd-nl-target-value {
  fill: var(--ink);
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-mono);
}
.rnd-nl-target-methods {
  fill: var(--ink-3);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.rnd-nl-empty {
  fill: var(--ink-3);
  font-size: 14px;
  font-style: italic;
}

.rnd-numberline-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
  font-size: 0.78rem;
  color: var(--ink-2);
  justify-content: center;
}
.rnd-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.rnd-legend-swatch {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px var(--line);
}
.rnd-legend-swatch--input { background: var(--accent); }
.rnd-legend-swatch--up    { background: #10b981; }
.rnd-legend-swatch--down  { background: #f97316; }
.rnd-legend-swatch--same  { background: #9ca3af; }

/* Accordion ----------------------------------------------------- */
.rnd-accordion {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.rnd-accordion-item + .rnd-accordion-item {
  border-top: 1px solid var(--line);
}
.rnd-accordion-item > summary {
  list-style: none;
  padding: 12px 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: transparent;
  transition: background 120ms ease;
}
.rnd-accordion-item > summary::-webkit-details-marker { display: none; }
.rnd-accordion-item > summary:hover { background: var(--surface-2); }
.rnd-accordion-title {
  font-weight: 600;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.rnd-accordion-tag {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 2px 6px;
  border-radius: 4px;
}
.rnd-accordion-chev {
  width: 10px; height: 10px;
  border-right: 2px solid var(--ink-3);
  border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg);
  transition: transform 180ms ease;
  flex: 0 0 auto;
}
.rnd-accordion-item[open] .rnd-accordion-chev {
  transform: rotate(-135deg);
}
.rnd-accordion-body {
  padding: 0 14px 14px 14px;
  color: var(--ink-2);
  font-size: 0.9rem;
  line-height: 1.55;
}
.rnd-accordion-body p { margin: 0 0 8px; }
.rnd-accordion-example {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  background: var(--surface-2);
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--ink);
  font-size: 0.88rem;
}

/* Mobile tuning ------------------------------------------------- */
@media (max-width: 560px) {
  .rnd-digits { font-size: 1.5rem; padding: 12px; }
  .rnd-method-tag { display: none; }
  .rnd-method-right { gap: 6px; }
  .rnd-method-delta { min-width: 0; font-size: 0.72rem; }
  .rnd-method-value { font-size: 0.95rem; min-width: 3em; }
  .rnd-numberline { min-height: 240px; }
  .rnd-nl-target-methods { display: none; }
}

/* ───────────────────────────────────────────────────────────────────
   Ideal-Weight calculator — UX refinements (mode chips with icons,
   stacked activity chips, slider trigger, collapsible caveat,
   BMI-band empty state, formula spread bars, mobile sticky pill).
   Scoped via the dedicated class names so other calculators are
   unaffected.
   ─────────────────────────────────────────────────────────────── */

/* Mode chips — icon + label, parallel verb phrases. */
.chip-row--icon .chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
}
.chip__icon {
  font-size: 14px;
  line-height: 1;
  opacity: 0.8;
}
.chip.active .chip__icon { opacity: 1; }
.chip__label { line-height: 1.2; }

/* Stacked chips — Sedentary / Moderate / Athletic with subtext. */
.chip-row--stacked {
  gap: 10px;
}
.chip-row--stacked .chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 14px;
  border-radius: 12px;
  text-align: left;
  flex: 1 1 0;
  min-width: 110px;
}
.chip-row--stacked .chip__label {
  font-size: 13px;
  font-weight: 600;
}
.chip__sub {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.72;
  letter-spacing: 0.01em;
}
.chip.active .chip__sub { opacity: 0.92; }

/* "Or set with a slider" — ghost text-button below the weight input. */
.iw-slider-trigger {
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.iw-slider-trigger:hover { color: var(--accent-2, var(--accent)); }
.iw-slider-trigger[hidden] { display: none; }

/* Collapsible caveat — closed by default, expands on click. */
.iw-caveat-disclosure {
  border: 1px solid #fed7aa;
  border-radius: 10px;
  background: #fff7ed;
  overflow: hidden;
}
.iw-caveat-disclosure > summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #7c2d12;
  font-size: 0.88rem;
  font-weight: 600;
}
.iw-caveat-disclosure > summary::-webkit-details-marker { display: none; }
.iw-caveat-disclosure__chevron {
  transition: transform 0.18s ease;
  font-size: 0.9rem;
}
.iw-caveat-disclosure[open] > summary .iw-caveat-disclosure__chevron {
  transform: rotate(180deg);
}
.iw-caveat-disclosure .iw-caveat {
  border: 0;
  border-top: 1px solid #fed7aa;
  border-radius: 0;
  background: transparent;
}

/* BMI-band empty state — visible until current weight is provided. */
.bmi-band__empty {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--surface-subtle, #f8fafc);
  border: 1px dashed var(--line-strong, #d1d5db);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.bmi-band__empty[hidden] { display: none; }
.bmi-band__empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.bmi-band__empty-text {
  flex: 1 1 200px;
  font-size: 0.85rem;
  color: var(--text-muted, var(--ink-2, #6b7280));
  line-height: 1.45;
}
.bmi-band__empty-cta {
  padding: 6px 12px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: transparent;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.bmi-band__empty-cta:hover { background: var(--accent); color: #fff; }

/* Formula comparison — inline spread bar showing each formula's relative
   position within the min↔max range across all four. The grid sets a
   3-column layout: label · spread bar · value. */
.breakdown-grid--spread .breakdown-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px auto;
  align-items: center;
  gap: 14px;
}
.bd-spread {
  position: relative;
  height: 18px;
  display: flex;
  align-items: center;
}
.bd-spread__bar {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 4px;
  margin-top: -2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #86efac, #fde68a, #fca5a5);
  opacity: 0.55;
}
.bd-spread__dot {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  margin-left: -6px;
  border-radius: 50%;
  background: #111827;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: left 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
@media (max-width: 640px) {
  /* On narrow viewports the spread bar moves to its own row below the label
     so the value column doesn't get squeezed. */
  .breakdown-grid--spread .breakdown-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "label value"
      "spread spread";
    row-gap: 8px;
  }
  .breakdown-grid--spread .breakdown-label  { grid-area: label; }
  .breakdown-grid--spread .breakdown-value  { grid-area: value; }
  .breakdown-grid--spread .bd-spread        { grid-area: spread; height: 14px; }
}

/* Ghost / tertiary action button (sits next to Reset + Share). */
.calc-btn--ghost {
  background: transparent;
  color: var(--accent);
  border: 1px dashed var(--accent);
  box-shadow: none;
}
.calc-btn--ghost:hover {
  background: var(--accent);
  color: #fff;
  border-style: solid;
  box-shadow: var(--shadow-sm);
}

/* Mobile sticky pill — fixed to the bottom of the viewport on small
   screens. Hidden on ≥1024 px so the desktop sticky right rail handles it. */
.iw-mobile-pill {
  display: none;
}
@media (max-width: 1023px) {
  .iw-mobile-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 90;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.94);
    color: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: 0.9rem;
    pointer-events: auto;
  }
  .iw-mobile-pill__label {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
  }
  .iw-mobile-pill__value {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
}
@media print {
  .iw-mobile-pill { display: none !important; }
}

/* Visual confirmation pulse fired by the example-card click handler. Using
   box-shadow so the animation is composited on the GPU and doesn't shift
   layout. Respects prefers-reduced-motion. */
@keyframes iwExampleFlash {
  0%   { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.55); }
  60%  { box-shadow: 0 0 0 10px rgba(99, 102, 241, 0); }
  100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
}
.iw-example-flash {
  animation: iwExampleFlash 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
  .iw-example-flash { animation: none; }
}

/* ============================================================
   Countdown calculator — extras (ring, presets, milestones,
   single-unit, animated digits, past-state styling).
   ============================================================ */

/* Result-hero shows a localized date+time string ("2027 m. sausio 1 d.,
   penktadienis 00:00" in LT) rather than a short numeric value. The
   default 56px result-value font wraps that text onto 4 lines on narrow
   panels — clamp it down and let it wrap cleanly when needed. */
.result-hero #cd-target-formatted {
  font-size: clamp(20px, 4.6vw, 32px);
  letter-spacing: -0.015em;
  line-height: 1.15;
  word-break: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* Countdown cells inside the dark-green hero: render numbers AND labels
   in white. Default `.countdown-num { color: var(--ink) }` is dark text
   and disappears on the gradient. Also vertically + horizontally center
   the digit + label inside each cell (cells share grid row heights, so
   without `justify-content: center` short cells stick their content to
   the top while the ring cell pushes the row taller). */
.result-hero .countdown-cell {
  text-align: center;
  justify-content: center;
}
.result-hero .countdown-cell .countdown-num {
  color: #fff;
  width: 100%;
}
/* Labels: drop the uppercase transform (lowercase ascenders/descenders
   are easier to read at small sizes than ALL CAPS), let them wrap, and
   use white so they're legible on the dark green hero. LT/PL/DE labels
   ("Valandos", "Minutės", "Sekundės") are wider than EN equivalents. */
.result-hero .countdown-cell .countdown-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: #fff;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.2;
  width: 100%;
  text-align: center;
}

/* "RODYTI KAIP" heading + the chip row beneath it sit on the dark green
   hero, so the default light-theme dim-gray heading and white-pill chips
   need a hero-friendly palette. Heading: bright enough to read; chips:
   transparent with a white outline so they tint over the gradient, and
   the active chip flips to a solid white pill with green text. */
.result-hero .cd-express__label {
  color: rgba(255, 255, 255, 0.75);
}
.result-hero .cd-express .chip {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
}
.result-hero .cd-express .chip:hover {
  border-color: #fff;
  color: #fff;
}
.result-hero .cd-express .chip.active {
  background: #fff;
  border-color: #fff;
  color: #1e3a32;
}

/* Single-unit big number + unit label ("249" + "D.") share the same
   dark-on-dark issue as the countdown cells. */
.result-hero .cd-single__num,
.result-hero .cd-single__unit {
  color: #fff;
}

/* Wide select reused for the timezone picker. */
.select-wide {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
}
.select-wide:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

/* Chip with stacked label + sublabel (used by holiday presets). */
#cd-presets .chip,
#cd-custom-presets .chip {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 14px;
  text-align: left;
  line-height: 1.15;
}
#cd-presets .chip-label,
#cd-custom-presets .chip-label { font-weight: 600; }
#cd-presets .chip-sublabel,
#cd-custom-presets .chip-sublabel {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-3);
  letter-spacing: 0.02em;
}
#cd-presets .chip.active .chip-sublabel,
#cd-custom-presets .chip.active .chip-sublabel { color: rgba(255,255,255,0.85); }
#cd-preset-save {
  align-self: stretch;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  border-style: dashed;
  font-style: italic;
  color: var(--ink-3);
}
.chip--custom { position: relative; padding-right: 28px !important; }
.chip-x {
  position: absolute;
  right: 8px;
  top: 8px;
  width: 16px; height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  color: var(--ink-3);
  background: transparent;
}
.chip-x:hover { color: var(--ink); background: rgba(255,255,255,0.06); }

/* Past-target tint on the result hero. */
.result-hero--past .pulse-dot { background: var(--ink-3) !important; }
.result-hero--past .result-eyebrow { color: var(--ink-3); }

/* Express-as row sits above the digit grid. */
.cd-express {
  margin-top: 18px;
  margin-bottom: 4px;
}
.cd-express__label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
}
.cd-express .chip {
  padding: 6px 12px;
  font-size: 12px;
}

/* Single-unit big number (Express as days/hours/etc.). */
.cd-single {
  margin-top: 16px;
  padding: 20px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
}
.cd-single__num {
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.cd-single__unit {
  margin-top: 8px;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Compact-layout & 3-cell variants of the existing countdown-grid. */
.countdown-grid--3 { grid-template-columns: repeat(3, 1fr); }
.countdown-grid--compact .countdown-cell { padding: 8px 4px; }
.countdown-grid--compact .countdown-num { font-size: 22px; }

/* Circular progress ring around the Days cell. */
.countdown-cell--ring { position: relative; }
.cd-ring {
  position: relative;
  width: 84px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
.cd-ring__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.cd-ring__track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 4;
}
.cd-ring__bar {
  fill: none;
  stroke: var(--accent, #6366f1);
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.countdown-cell--ring .countdown-num {
  position: relative;
  z-index: 1;
}
@media (max-width: 520px) {
  .cd-ring { width: 70px; height: 70px; }
}

/* Animated digit flip — restarts on text change. */
@keyframes cdFlip {
  0%   { transform: translateY(-6px); opacity: 0.4; }
  100% { transform: translateY(0);    opacity: 1; }
}
.cd-flip { display: inline-block; }
.cd-flip-anim { animation: cdFlip 200ms cubic-bezier(0.22, 1, 0.36, 1); }

/* Milestones list. */
.cd-milestones {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cd-milestone {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}
.cd-milestone__icon {
  font-size: 14px;
  color: var(--accent, #6366f1);
  text-align: center;
}
.cd-milestone__label {
  font-size: 13px;
  color: var(--ink-2);
}
.cd-milestone__value {
  font-size: 12px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.cd-milestone-empty {
  font-size: 13px;
  color: var(--ink-3);
  font-style: italic;
  padding: 4px 2px;
}

/* Reduced-motion guards. */
@media (prefers-reduced-motion: reduce) {
  .cd-flip-anim { animation: none; }
  .cd-ring__bar { transition: none; }
}

/* ─────────────────────────────────────────────────────────────────
   Calorie Burn calculator — scoped styles
   ───────────────────────────────────────────────────────────────── */

/* Food equivalent tiles */
.cb-food-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}
.cb-food-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-3) var(--space-2);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  gap: 4px;
}
.cb-food-tile__icon {
  width: 28px;
  height: 28px;
  color: var(--accent);
  margin-bottom: 2px;
}
.cb-food-tile__count {
  font-family: var(--font-mono);
  font-weight: var(--font-semibold);
  font-size: var(--text-base);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.cb-food-tile__name {
  font-size: var(--text-xs);
  color: var(--ink-2);
  line-height: 1.25;
}
.cb-food-tile__cal {
  font-size: 10.5px;
  color: var(--ink-3);
  font-family: var(--font-mono);
}
.cb-food-empty {
  padding: var(--space-3);
  color: var(--ink-3);
  font-size: var(--text-sm);
  text-align: center;
}
@media (max-width: 640px) {
  .cb-food-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Activity comparison table — highlight selected row */
.ci-schedule tr.is-selected td {
  background: var(--accent-soft);
}
.ci-schedule tr.is-selected td:first-child strong { color: var(--accent); }
.cb-use-activity { white-space: nowrap; }

/* Cumulative burn chart — x labels positioned absolutely (not flex flow) */
.ci-area-chart .area-chart__xlabels span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
}

/* ═══════════════════════════════════════════════════════════════════
   Pregnancy due date — rose-tinted hero, segmented trimester progress,
   milestone + upcoming cards. Reuses .result-hero, .card, .breakdown-*,
   .info-tip, .ci-actions, .ci-warning, .hero-action, .card-link.
   ═══════════════════════════════════════════════════════════════════ */

.pd-hero .pulse-dot { background: var(--rose); }
.pd-hero .result-eyebrow { color: var(--rose); }

.pd-trim-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: var(--rose-soft);
  color: var(--rose);
  margin-left: 6px;
}
.pd-trim-badge--t1 { background: var(--accent-soft); color: var(--accent); }
.pd-trim-badge--t2 { background: var(--teal-soft);   color: var(--teal); }
.pd-trim-badge--t3 { background: var(--rose-soft);   color: var(--rose); }

.pd-disclaimer {
  margin: var(--space-4) 0 0;
  font-size: 11px;
  color: var(--ink-3);
  text-align: center;
  line-height: 1.4;
}

/* Trimester progress bar — three fixed-width segments with a live marker. */
.pd-stack-bar {
  position: relative;
  display: flex;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-2);
}
.pd-stack-seg { display: block; height: 100%; }
.pd-stack-seg--t1 { background: var(--accent); }
.pd-stack-seg--t2 { background: var(--teal); }
.pd-stack-seg--t3 { background: var(--rose); }

.pd-stack-marker {
  position: absolute;
  top: -3px;
  width: 4px;
  height: 16px;
  background: var(--ink);
  border-radius: 2px;
  box-shadow: 0 0 0 2px var(--surface-1, #fff);
  transform: translateX(-50%);
  transition: left .3s ease;
  pointer-events: none;
}

.pd-stack-legend {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 12px;
  color: var(--ink-3);
}
.pd-stack-legend span { display: inline-flex; align-items: center; gap: 6px; }
.pd-stack-legend .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot--t1 { background: var(--accent); }
.dot--t2 { background: var(--teal); }
.dot--t3 { background: var(--rose); }

/* Milestone card — fruit emoji + size + blurb. */
.pd-milestone {
  display: flex;
  gap: 16px;
  align-items: center;
}
.pd-milestone-emoji {
  font-size: 48px;
  line-height: 1;
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rose-soft);
  border-radius: 16px;
}
.pd-milestone-text { min-width: 0; flex: 1; }
.pd-milestone-size {
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 4px;
}
.pd-milestone-blurb {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
}

/* Upcoming weeks list. */
.pd-upcoming-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pd-upcoming-item {
  display: grid;
  grid-template-columns: 28px 64px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--surface-2);
  font-size: 13px;
}
.pd-upcoming-item:last-child { border-bottom: none; }
.pd-upcoming-emoji { font-size: 20px; line-height: 1; text-align: center; }
.pd-upcoming-week { color: var(--ink-3); font-size: 12px; }
.pd-upcoming-size { color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-upcoming-date { color: var(--ink-2); font-size: 12px; }

/* Mobile-only summary — above the form on narrow screens only. */
.pd-mobile-summary { display: none; }
@media (max-width: 900px) {
  .pd-mobile-summary {
    display: block;
    position: sticky;
    top: 0;
    z-index: 5;
    padding: 10px 14px;
    margin: 0 0 12px;
    border-radius: 12px;
    background: var(--rose-soft);
    border: 1px solid var(--rose);
    text-align: center;
  }
  .pd-mobile-summary__label {
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rose);
  }
  .pd-mobile-summary__value {
    font-size: 18px;
    font-weight: 600;
    color: var(--ink);
    margin-top: 2px;
  }
  .pd-mobile-summary__sub {
    font-size: 12px;
    color: var(--ink-2);
    margin-top: 2px;
  }
}

/* The pregnancy card-level tweaks. */
.pd-card .card-hint { color: var(--rose); }

/* ═══════════════════════════════════════════════════════════════════
   BMR calculator — inline formula-comparison bars, gender glyphs,
   inline chart chip-row, and paired slider/number focus sync.
   Pure additions; reuses .card, .breakdown-*, .chip-row, .dot--*.
   ═══════════════════════════════════════════════════════════════════ */

/* Inline horizontal bar that sits inside each formula-comparison row. */
.bmr-formula-row { position: relative; display: grid; grid-template-columns: 1fr auto; gap: var(--space-2) var(--space-4); align-items: baseline; }
.bmr-formula-bar {
  grid-column: 1 / -1;
  height: 6px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
  margin-top: 4px;
}
.bmr-formula-bar__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  transition: width .28s ease;
}
.bmr-formula-bar__fill--accent { background: var(--accent); }
.bmr-formula-bar__fill--teal   { background: var(--teal, #0ea5a4); }
.bmr-formula-bar__fill--amber  { background: var(--amber); }
.bmr-formula-grid .is-active { background: color-mix(in srgb, var(--accent) 6%, transparent); border-radius: var(--radius-sm); }

/* Gender toggle — emoji/glyph lives inline with the label. */
.toggle-group--icon .toggle-btn { display: inline-flex; align-items: center; gap: 6px; }
.bmr-gender-ic { font-size: 1.05em; line-height: 1; opacity: .8; }
.toggle-btn.active .bmr-gender-ic { opacity: 1; }

/* Compact inline chip-row used in card-header toolbars (e.g. chart axis toggle). */
.chip-row--inline { display: inline-flex; gap: 4px; }
.chip-row--inline .chip { padding: 4px 10px; font-size: var(--text-xs); }

/* Subtle focus flash on number inputs while the paired slider is being dragged. */
.is-slider-driving { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); transition: box-shadow .15s ease; }

/* ═══════════════════════════════════════════
   Time Zone Converter
   ═══════════════════════════════════════════ */

/* Date + time side-by-side in input form. */
.tz-datetime-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 420px) {
  .tz-datetime-row { grid-template-columns: 1fr; }
}

/* Hour-of-day slider sits below the date+time row. */
.tz-hour-slider { margin-top: 10px; }

/* "Detected" badge shown in the hero eyebrow when using auto-detected source. */
.tz-detected-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}

/* Flag emoji sizing (consistent line-height, no jump). */
.tz-flag {
  display: inline-block;
  font-size: 18px;
  line-height: 1;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

/* ─── Target-zone input rows (left form) ──────────────── */

/* Align drag handle, swap, and remove buttons with the select input rather
   than the full row (the row's "N. zone" label is above the select, so the
   default center alignment lifted the buttons above the input baseline). */
.tz-tier-row .tier-row__inputs { align-items: flex-end; gap: 6px; }
.tz-tier-row.is-dragging { opacity: .45; }
.tz-tier-row.is-drag-over {
  outline: 2px dashed color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 2px;
  border-radius: 8px;
}

.tz-drag-handle {
  flex: 0 0 14px;
  color: var(--ink-3, var(--muted));
  font-size: 14px;
  line-height: 1;
  cursor: grab;
  user-select: none;
  padding: 4px 2px;
  letter-spacing: -2px;
}
.tz-drag-handle:active { cursor: grabbing; }

.tz-swap-btn {
  flex: 0 0 32px;
  height: 36px;
  width: 32px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2, var(--muted));
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.tz-swap-btn:hover { color: var(--accent); border-color: var(--accent); }

/* ─── Rich target rows (right breakdown grid) ─────────── */

.tz-row { align-items: flex-start; gap: 12px; padding: 10px 0; }
.tz-row + .tz-row { border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.tz-row-label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}
.tz-row-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.tz-row-body strong { font-size: 14px; font-weight: 600; color: var(--ink); }
.tz-row-meta {
  font-size: 11px;
  color: var(--ink-3, var(--muted));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tz-row .breakdown-value {
  font-size: 13px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: normal;
  overflow-wrap: anywhere;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}

.tz-work-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 15%, transparent);
}
.tz-work-dot--work   { background: #22c55e; color: #22c55e; }
.tz-work-dot--fringe { background: #f59e0b; color: #f59e0b; }
.tz-work-dot--night  { background: #6366f1; color: #6366f1; }

/* Date delta pill ("+1d", "−1d") */
.tz-delta-pill {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
  vertical-align: 1px;
}
.tz-delta-pill--next {
  background: color-mix(in srgb, #22c55e 18%, transparent);
  color: #15803d;
  border: 1px solid color-mix(in srgb, #22c55e 30%, transparent);
}
.tz-delta-pill--prev {
  background: color-mix(in srgb, #f97316 18%, transparent);
  color: #c2410c;
  border: 1px solid color-mix(in srgb, #f97316 30%, transparent);
}

.tz-dst-mark {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  background: color-mix(in srgb, #6366f1 15%, transparent);
  color: #4f46e5;
  border: 1px solid color-mix(in srgb, #6366f1 25%, transparent);
  vertical-align: 1px;
}

/* Legacy source-zone block already mono; ensure tabular. */
#r-source, .tz-row .breakdown-value, .tz-timeline-time { font-variant-numeric: tabular-nums; }

/* Time-zone hero date is verbose ("2026 m. balandžio 26 d., sekmadienis 04:16"
   in LT) and overflows the default 56px hero size. Shrink + allow wrapping. */
.result-hero .result-value#r-source {
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  white-space: normal;
  overflow-wrap: anywhere;
}
@media (max-width: 560px) {
  .result-hero .result-value#r-source { font-size: 20px; }
}

.tz-utc-row { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.08); }

/* Flash animation on source-time change */
@keyframes tz-flash {
  0%   { background-color: color-mix(in srgb, var(--accent) 22%, transparent); }
  100% { background-color: transparent; }
}
.tz-flash {
  animation: tz-flash .45s ease-out;
  border-radius: 6px;
}

/* ─── 24-hour timeline card ───────────────────────────── */

.tz-timeline-card .card-header { align-items: flex-start; }
.tz-timeline-legend {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: var(--ink-3, var(--muted));
}
.tz-legend {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-right: 2px;
  margin-left: 6px;
  vertical-align: -1px;
}
.tz-legend--work   { background: #22c55e; }
.tz-legend--fringe { background: #f59e0b; }
.tz-legend--night  { background: #6366f1; }

.tz-timeline {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tz-timeline-row {
  display: grid;
  grid-template-columns: 130px 1fr 96px;
  gap: 10px;
  align-items: center;
}
.tz-timeline-row.is-source .tz-timeline-city { font-weight: 700; }
.tz-timeline-row.is-source .tz-timeline-bar::before {
  content: 'Source';
  position: absolute;
  top: -14px;
  left: 0;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-3, var(--muted));
}
.tz-timeline-label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 12px;
}
.tz-timeline-city {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tz-timeline-bar {
  position: relative;
  height: 22px;
  border-radius: 6px;
  background: linear-gradient(to right,
    color-mix(in srgb, #6366f1 38%, transparent) 0%,
    color-mix(in srgb, #6366f1 38%, transparent) 29.17%,
    color-mix(in srgb, #f59e0b 42%, transparent) 29.17%,
    color-mix(in srgb, #f59e0b 42%, transparent) 37.5%,
    color-mix(in srgb, #22c55e 48%, transparent) 37.5%,
    color-mix(in srgb, #22c55e 48%, transparent) 70.83%,
    color-mix(in srgb, #f59e0b 42%, transparent) 70.83%,
    color-mix(in srgb, #f59e0b 42%, transparent) 83.33%,
    color-mix(in srgb, #6366f1 38%, transparent) 83.33%,
    color-mix(in srgb, #6366f1 38%, transparent) 100%
  );
  border: 1px solid color-mix(in srgb, var(--line) 100%, transparent);
  overflow: visible;
}
.tz-timeline-marker {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 3px;
  border-radius: 2px;
  background: var(--ink);
  transform: translateX(-1.5px);
  box-shadow: 0 0 0 2px var(--surface), 0 2px 6px rgba(0,0,0,.35);
  transition: left .28s cubic-bezier(.4,0,.2,1);
}
.tz-marker--work   { background: #15803d; }
.tz-marker--fringe { background: #b45309; }
.tz-marker--night  { background: #3730a3; }

.tz-timeline-time {
  font-size: 12px;
  text-align: right;
  color: var(--ink);
  white-space: nowrap;
}
.tz-timeline-axis {
  display: grid;
  grid-template-columns: 130px 1fr 96px;
  gap: 10px;
  margin-top: 8px;
  font-size: 10px;
  color: var(--ink-3, var(--muted));
}
.tz-timeline-axis-inner {
  grid-column: 2;
  display: flex;
  justify-content: space-between;
}

/* Mobile: compress label column, hide axis */
@media (max-width: 540px) {
  .tz-timeline-row { grid-template-columns: 90px 1fr 72px; }
  .tz-timeline-axis { display: none; }
  .tz-row { gap: 8px; }
  .tz-row-meta { font-size: 10px; }
}

/* Copy-all / share success state */
.hero-action.is-copied,
.calc-btn.is-copied {
  color: #15803d;
  border-color: #22c55e;
  background: color-mix(in srgb, #22c55e 10%, transparent);
}


/* ════════════════════════════════════════════════════════════════
   TDEE Calculator — UX additions
   Reuses .info-tip, .chip-row, .ci-actions, .ci-warning, .hero-action,
   .compare-card, .ci-stack-bar / .ci-stack-seg, .delta--good/bad, and
   amort-progress from the compound-interest patterns. Only the TDEE-
   specific surfaces are defined below.
   ════════════════════════════════════════════════════════════════ */

/* ── Stacked toggle group: TDEE activity (5-up) and macro split ── */
#activity.toggle-group--stacked {
  grid-template-columns: 1fr;
  gap: 4px;
}
.toggle-group--stacked .toggle-btn .toggle-btn-title {
  font-weight: 600;
  font-size: 13px;
  color: inherit;
  display: block;
}
.toggle-group--stacked .toggle-btn .toggle-btn-sub {
  font-size: 11px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  display: block;
}
.toggle-group--stacked .toggle-btn.active .toggle-btn-sub { color: var(--accent); }

/* Activity rows: icon | title-stack — left-aligned strip layout. */
#activity.toggle-group--stacked .toggle-btn {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 10px 14px;
  text-align: left;
  min-height: 52px;
}
#activity.toggle-group--stacked .toggle-btn .tdee-act-icon {
  font-size: 22px;
  line-height: 1;
  flex: 0 0 28px;
  text-align: center;
  filter: grayscale(0.15);
}
#activity.toggle-group--stacked .toggle-btn.active .tdee-act-icon {
  filter: none;
}
#activity.toggle-group--stacked .toggle-btn .toggle-btn-title { flex: 1 1 auto; }

/* Macro split + meal toggle groups inherit stacked styling but want
   the column layout (no icon, title above ratio sub-label). */
#macro-split.toggle-group--stacked,
#tdee-meals.toggle-group--stacked { display: none; } /* not used; defensive */

#macro-split, #tdee-meals { width: 100%; }
#macro-split .toggle-btn, #tdee-meals .toggle-btn {
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  flex: 1 1 0; min-width: 0;
}

/* ── Hero: BMR vs activity stacked bar + scale ── */
.tdee-hero-stack {
  display: flex;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,0.08);
  margin-top: 14px;
}
.tdee-hero-stack__seg { display: block; height: 100%; transition: width .3s ease; }
.tdee-hero-stack__seg--bmr      { background: var(--accent); }
.tdee-hero-stack__seg--activity { background: var(--teal, #14b8a6); }

.tdee-hero-stack__legend {
  display: flex; gap: 16px; flex-wrap: wrap;
  margin-top: 6px;
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.02em;
}
.tdee-hero-stack__legend > span { display: inline-flex; align-items: center; gap: 6px; }
.tdee-hero-stack__legend .dot {
  width: 8px; height: 8px; border-radius: 50%; display: inline-block;
}
.tdee-hero-stack__legend .dot--accent { background: var(--accent); }
.tdee-hero-stack__legend .dot--teal   { background: var(--teal, #14b8a6); }
.tdee-hero-stack__legend .mono { color: var(--ink); margin-left: 2px; }

.result-hero .tdee-hero-stack__legend > span { color: rgba(255,255,255,0.75); }
.result-hero .tdee-hero-stack__legend .mono  { color: #fff; }

.tdee-scale {
  margin-top: 16px;
  padding: 8px 0 4px;
}
.tdee-scale__track {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(to right,
    rgba(20,184,166,0.35),
    rgba(245,158,11,0.45),
    rgba(239,68,68,0.45));
}
.tdee-scale__marker {
  position: absolute;
  top: -3px;
  width: 1px;
  height: 12px;
  background: rgba(255,255,255,0.45);
}
.tdee-scale__marker--low  { left: 33.3%; }
.tdee-scale__marker--mid  { left: 50%; }
.tdee-scale__marker--high { left: 66.6%; }
.tdee-scale__dot {
  position: absolute;
  top: 50%;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.18), 0 1px 4px rgba(0,0,0,0.25);
  transition: left .3s ease;
}
.tdee-scale__labels {
  display: flex; justify-content: space-between;
  margin-top: 6px;
  font-size: 10.5px;
  color: rgba(255,255,255,0.65);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

/* ── Calorie target rows: color-coded by deficit/surplus ── */
.tdee-goal-row {
  position: relative;
  border-left: 3px solid transparent;
  padding-left: 10px;
  transition: background-color .15s ease, border-color .15s ease;
}
.tdee-goal-row--deficit-strong { border-left-color: rgba(239,68,68,0.65); }
.tdee-goal-row--deficit        { border-left-color: rgba(239,68,68,0.45); }
.tdee-goal-row--deficit-mild   { border-left-color: rgba(239,68,68,0.25); }
.tdee-goal-row--maintain       { border-left-color: rgba(120,120,120,0.45); }
.tdee-goal-row--surplus-mild   { border-left-color: rgba(34,197,94,0.30); }
.tdee-goal-row--surplus        { border-left-color: rgba(34,197,94,0.55); }
.tdee-goal-row.is-active-intent {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-left-width: 4px;
}

/* ── Field aux next to age + body fat (right-side hint) ── */
.field-label .aux {
  margin-left: auto;
  font-size: 11px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* ── Timeline pace-bar colors ── */
.amort-progress-bar.tdee-pace--strong { background: rgba(239,68,68,0.85) !important; }
.amort-progress-bar.tdee-pace--mid    { background: rgba(245,158,11,0.85) !important; }

/* ── Meal table: tighten total row ── */
.amort-table tr.total td { font-weight: 600; border-top: 1px solid var(--line); }

/* ── Share button label spacing inside ci-actions ── */
.tdee-share-label { display: inline-block; }

/* ── Macro context label inside breakdown header ── */
#tdee-macro-context { color: var(--ink); font-weight: 600; }

/* ── Mobile: collapse activity row to icon + title only ── */
@media (max-width: 480px) {
  #activity.toggle-group--stacked .toggle-btn { padding: 8px 10px; gap: 10px; min-height: 46px; }
  #activity.toggle-group--stacked .toggle-btn .toggle-btn-sub { font-size: 10.5px; }
  .tdee-scale__labels { font-size: 9.5px; }
}

/* =====================================================================
   Long Division Calculator
   ===================================================================== */

/* Inputs: dividend ÷ divisor laid out horizontally on wide screens. */
.ldiv-expr-inputs {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 12px;
}
.ldiv-expr-inputs .ldiv-expr-field { margin-bottom: 0; }
.ldiv-expr-op {
  font-size: 28px;
  font-weight: 600;
  color: var(--ink-3);
  padding-bottom: 14px;
  user-select: none;
}
@media (max-width: 560px) {
  .ldiv-expr-inputs { grid-template-columns: 1fr; gap: 14px; }
  .ldiv-expr-op { display: none; }
}

/* Action row mirrors .ci-actions; reuse it for ldiv. */
.ldiv-share-label,
.ldiv-copy-label,
.ldiv-play-label { display: inline-block; }

/* All-forms breakdown grid: pad mono values so super/sub fractions sit nicely. */
.ldiv-forms-grid .breakdown-value { line-height: 1.6; }
.ldiv-forms-grid .breakdown-value sup,
.ldiv-forms-grid .breakdown-value sub { font-size: 0.75em; line-height: 1; }
.ldiv-form-note {
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--ink-3);
}

/* ── Steps card (below-fold) ── */
.ldiv-steps-card .card-link {
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.ldiv-steps-card .card-link:hover { background: var(--surface-2); border-color: var(--accent); color: var(--ink); }

.ldiv-busstop-wrap-outer {
  text-align: center;
  padding: 18px 8px 22px;
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, var(--surface-2), transparent 70%);
  margin-bottom: 18px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.ldiv-busstop {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 1.55rem;
  font-variant-numeric: tabular-nums;
  text-align: left;
}
.ldiv-busstop .ldiv-empty {
  color: var(--ink-3);
  font-family: var(--font-sans);
  font-size: 14px;
  font-style: italic;
}
.ldiv-busstop-wrap {
  display: inline-flex;
  align-items: flex-start;
  gap: 0;
}
.ldiv-divisor {
  padding: 0 .55rem 0 0;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: flex-start;
  padding-top: 1.95rem;
  position: relative;
}
.ldiv-divisor .ldiv-sign { margin-right: 2px; color: var(--ink-3); }

.ldiv-bracket {
  border-left: 2.5px solid var(--ink);
  border-top: 2.5px solid var(--ink);
  border-top-left-radius: 4px;
  padding-top: 0;
  min-width: 0;
  position: relative;
}
.ldiv-quotient-row {
  padding: 0 .55rem .25rem .55rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .12em;
  white-space: nowrap;
  text-align: right;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent);
  border-bottom: 2px solid var(--ink);
}
.ldiv-overline {
  text-decoration: overline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.ldiv-dividend-row {
  padding: .35rem .55rem 0;
  font-weight: 600;
  letter-spacing: .15em;
  white-space: nowrap;
  display: flex;
  gap: 2px;
}
.ldiv-digit {
  display: inline-block;
  padding: 0 2px;
  border-radius: 3px;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.ldiv-digit.is-active {
  background: color-mix(in srgb, var(--accent) 25%, transparent);
  color: var(--ink);
}
.ldiv-work {
  padding: .25rem .55rem .35rem;
  white-space: nowrap;
}
.ldiv-work-row {
  text-align: right;
  line-height: 1.55;
  border-radius: 3px;
  padding: 0 4px;
  transition: background var(--transition-fast);
}
.ldiv-work-row.is-active {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}
.ldiv-work-sub {
  border-bottom: 1.5px solid var(--ink-2);
  display: inline-block;
  padding-bottom: 1px;
}
.ldiv-work-rem { color: var(--accent); font-weight: 600; }

/* ── Step list ── */
.ldiv-steps-section { margin-top: 6px; }
.ldiv-steps-heading {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-3);
  margin: 14px 0 10px;
}
.ldiv-steps-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.ldiv-step {
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  font-size: 14px;
  line-height: 1.55;
  cursor: default;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.ldiv-step--note { background: var(--surface-2); color: var(--ink-2); border-style: dashed; }
.ldiv-step--work { font-variant-numeric: tabular-nums; }
.ldiv-step--work:hover { border-color: var(--accent); transform: translateX(2px); }
.ldiv-step--work.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
}
.ldiv-step--dec {
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
}
.ldiv-step--work strong,
.ldiv-step--dec strong { color: var(--accent); margin-right: 4px; }
.ldiv-step-empty {
  padding: 16px;
  text-align: center;
  color: var(--ink-3);
  font-style: italic;
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}
.ldiv-steps-hint { font-size: 12.5px; color: var(--ink-3); margin-top: 10px; }

/* ── Anatomy diagram ── */
.ldiv-anatomy { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.ldiv-anatomy-diagram {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  padding: 12px 16px;
  background: var(--surface-2);
  border-radius: var(--radius-md);
}
.ldiv-anat-divisor { color: var(--accent); font-weight: 600; }
.ldiv-anat-bracket { color: var(--ink-3); font-size: 22px; line-height: 1; }
.ldiv-anat-stack { display: inline-flex; flex-direction: column; gap: 2px; }
.ldiv-anat-quotient { color: var(--accent); font-weight: 600; border-bottom: 1.5px solid var(--ink-3); padding: 0 4px; }
.ldiv-anat-dividend { color: var(--ink); padding: 0 4px; }
.ldiv-anatomy-note { margin-top: 10px; font-size: 12.5px; color: var(--ink-3); }

/* Eq formula card variant for long division. */
.formula-eq--ldiv .formula-token { padding: 0 4px; }

/* Reuse delta-badge tinting for the "repeating" pill. */
.ci-delta-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  text-transform: lowercase;
  letter-spacing: .03em;
}

/* Dark theme niceties. */
[data-theme='dark'] .ldiv-busstop-wrap-outer {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, var(--surface-2)), transparent 70%);
}
[data-theme='dark'] .ldiv-step { background: var(--surface); }
[data-theme='dark'] .ldiv-anatomy-diagram { background: var(--surface); }

@media (max-width: 560px) {
  .ldiv-busstop { font-size: 1.2rem; }
  .ldiv-divisor { padding-top: 1.7rem; }
}

/* Brief visual feedback when a preset/example populates the inputs. */
@keyframes ldiv-flash {
  0%   { background-color: color-mix(in srgb, var(--accent) 28%, transparent); }
  100% { background-color: transparent; }
}
.input-wrap input.is-flash,
input.is-flash {
  animation: ldiv-flash 600ms ease-out;
}
.chip.is-flash {
  animation: ldiv-flash 320ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .input-wrap input.is-flash, input.is-flash, .chip.is-flash { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   Blood Alcohol Calculator — enhanced UI
   =================================================================== */

/* Drink row — card-style with typed tint. */
.bac-drink-row {
  background: var(--card-2, rgba(255,255,255,0.02));
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 12px;
  padding: 12px 12px 10px;
  margin-top: 10px;
  transition: border-color 160ms ease, background 160ms ease;
}
.bac-drink-row + .bac-drink-row { margin-top: 10px; }

.bac-drink-row[data-drink-type="beer"]     { border-left: 3px solid #f59e0b; }
.bac-drink-row[data-drink-type="wine"]     { border-left: 3px solid #be185d; }
.bac-drink-row[data-drink-type="spirits"]  { border-left: 3px solid #b45309; }
.bac-drink-row[data-drink-type="cocktail"] { border-left: 3px solid #d946ef; }

.bac-drink-row__top {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.bac-drink-types { gap: 4px; flex: 1 1 auto; flex-wrap: wrap; }
.bac-drink-types .chip--drink { padding: 4px 9px; font-size: 12px; display: inline-flex; align-items: center; gap: 4px; }
.bac-drink-types .chip-icon { font-size: 14px; }

.bac-drink-row__actions {
  display: inline-flex;
  gap: 4px;
}
.tier-icon-btn {
  background: transparent;
  border: 1px solid var(--border, rgba(255,255,255,0.12));
  color: var(--muted, #94a3b8);
  border-radius: 8px;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 15px;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.tier-icon-btn:hover { color: var(--fg, #fff); border-color: var(--border-strong, rgba(255,255,255,0.24)); background: rgba(255,255,255,0.04); }
.bac-drink-remove:hover { color: #ef4444; border-color: #ef4444; }

.bac-drink-row__inputs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  align-items: end;
}
.bac-drink-grams { display: flex; flex-direction: column; gap: 4px; }
.bac-drink-grams .tier-field__value {
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(249,115,22,0.10);
  color: #fdba74;
  font-size: 13px;
  text-align: right;
}
@media (max-width: 560px) {
  .bac-drink-row__inputs { grid-template-columns: 1fr 1fr; }
  .bac-drink-grams { grid-column: 1 / -1; }
}

/* Quick-add preset row. */
#bac-presets.chip-row--presets { margin-top: 6px; }

/* Jurisdiction chip-row wraps on mobile. */
#bac-jurisdiction .chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; }

/* Legal-limit line overlay on gauge. */
.gauge-track { position: relative; }
.gauge-limit-line {
  position: absolute;
  top: -4px; bottom: -4px;
  width: 2px;
  background: #ef4444;
  border-radius: 2px;
  pointer-events: none;
  z-index: 2;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15);
}

/* Gauge-card scale toggle row sits inline with the header. */
.gauge-card .chip-row--tight .chip { padding: 3px 8px; font-size: 11px; }

/* Disclaimer + factors expander. */
.card--disclaimer {
  margin-top: 16px;
  border-style: dashed;
  background: rgba(239, 68, 68, 0.05);
}
.bac-disclaimer {
  color: var(--muted, #94a3b8);
  font-size: 13px;
  line-height: 1.5;
}
.bac-disclaimer strong { color: #fca5a5; }
.bac-factors {
  margin-top: 10px;
  font-size: 13px;
}
.bac-factors > summary {
  cursor: pointer;
  color: var(--fg, #e2e8f0);
  list-style: none;
  padding: 6px 0;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.bac-factors > summary::-webkit-details-marker { display: none; }
.bac-factors > summary::before {
  content: '▸';
  color: var(--muted, #94a3b8);
  transition: transform 160ms ease;
  display: inline-block;
}
.bac-factors[open] > summary::before { transform: rotate(90deg); }
.bac-factors ul {
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--muted, #94a3b8);
  line-height: 1.55;
}
.bac-factors li + li { margin-top: 4px; }

/* BAC-over-time chart. */
.bac-chart-card .card-body { padding-top: 14px; }
.bac-chart-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 420 / 220;
  background: rgba(255,255,255,0.02);
  border-radius: 12px;
  overflow: hidden;
}
.bac-chart-svg {
  display: block;
  width: 100%;
  height: 100%;
}
.bac-chart-xlabels {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 11px;
  color: var(--muted, #94a3b8);
}
.bac-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted, #94a3b8);
}
.bac-chart-legend .legend-swatch {
  display: inline-block;
  width: 12px;
  height: 3px;
  vertical-align: middle;
  margin-right: 5px;
  border-radius: 2px;
}
.bac-chart-legend .legend-swatch--dashed {
  background: repeating-linear-gradient(90deg, #ef4444 0 4px, transparent 4px 8px) !important;
}

/* SVG zone bands — very faint. */
.bac-zone { opacity: 0.10; }
.bac-zone--safe     { fill: #22c55e; }
.bac-zone--caution  { fill: #f59e0b; }
.bac-zone--impaired { fill: #f97316; }
.bac-zone--illegal  { fill: #ef4444; }

/* Compare delta colour cues. */
.compare-delta.is-up   { color: #f87171; } /* more alcohol / higher BAC = worse → red */
.compare-delta.is-down { color: #4ade80; }

/* Zone tinting of the result hero — driven by data-zone. */
.result-hero[data-zone="safe"]     { --hero-tint: rgba(34, 197, 94, 0.22); }
.result-hero[data-zone="caution"]  { --hero-tint: rgba(245, 158, 11, 0.24); }
.result-hero[data-zone="impaired"] { --hero-tint: rgba(249, 115, 22, 0.28); }
.result-hero[data-zone="illegal"]  { --hero-tint: rgba(239, 68, 68, 0.30); }
.result-hero[data-zone]::after {
  background: radial-gradient(120% 140% at 100% 0%, var(--hero-tint, transparent) 0%, transparent 60%) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   Prime Factorization Calculator
   ═══════════════════════════════════════════════════════════════════ */

/* Prime / composite badge in the eyebrow row */
.pf-badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  background: var(--surface-2); color: var(--ink-2);
  border: 1px solid var(--line);
}
.pf-badge--prime {
  background: var(--accent-soft); color: var(--accent); border-color: var(--accent-soft);
}
.pf-badge--composite {
  background: var(--amber-soft); color: var(--amber); border-color: var(--amber-soft);
}

/* Sub-metrics in 2x2 grid on narrow, 4-col on wide */
.result-sub.pf-result-sub {
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 1400px) {
  .result-sub.pf-result-sub { grid-template-columns: repeat(4, 1fr); }
}

/* Copy row under the hero */
.pf-copy-row {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 14px;
}
.pf-copy-row .hero-action {
  flex: 1 1 0; min-width: 88px;
  font-size: 12px;
}

/* Nearest primes card */
.pf-nearest-card { margin-top: 16px; }
.pf-nearest {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
  align-items: stretch;
}
.pf-nearest-item {
  text-align: center; padding: 10px 8px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface);
}
.pf-nearest-item--current {
  background: var(--accent-soft); border-color: transparent;
}
.pf-nearest-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--ink-3); margin-bottom: 4px;
}
.pf-nearest-value { font-size: 16px; font-weight: 700; color: var(--ink); }
.pf-nearest-item--current .pf-nearest-value { color: var(--accent); }
.pf-nearest-delta {
  font-size: 11px; color: var(--ink-3); margin-top: 2px;
}

/* Prime-weight card */
.pf-weight-card { margin-top: 16px; }
.pf-weight-rows { display: grid; gap: 6px; margin-bottom: 10px; }
.pf-weight-row {
  display: grid; grid-template-columns: 14px 1fr auto;
  align-items: center; gap: 8px;
  font-size: 13px;
}
.pf-weight-dot {
  width: 10px; height: 10px; border-radius: 999px;
}
.pf-weight-label { color: var(--ink); font-weight: 600; }
.pf-weight-label sup { font-size: 0.7em; color: var(--ink-2); }
.pf-weight-pct { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pf-stack-bar {
  display: flex; height: 10px; border-radius: 999px;
  overflow: hidden; background: var(--surface-2);
}
.pf-stack-bar .pf-stack-seg {
  display: block; height: 100%;
  transition: width 0.35s ease;
}

/* Below-fold detail cards */
.pf-detail-card { margin-top: 16px; }

.pf-table-wrap { overflow-x: auto; }
.pf-factor-table {
  width: 100%; border-collapse: collapse;
  font-size: 14px;
}
.pf-factor-table th,
.pf-factor-table td {
  padding: 10px 12px; text-align: left;
  border-bottom: 1px solid var(--line);
}
.pf-factor-table th {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--ink-3);
  border-bottom: 1px solid var(--line-strong);
}
.pf-factor-table tr:last-child td { border-bottom: none; }
.pf-table-empty {
  color: var(--ink-3); font-style: italic; text-align: center;
}

/* Divisor chip grid */
.pf-divisor-grid {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.pf-divisor {
  display: inline-flex; align-items: center;
  padding: 4px 10px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 12px;
  background: var(--surface-2); color: var(--ink-2);
  border: 1px solid var(--line);
}
.pf-divisor--prime {
  background: var(--accent-soft); color: var(--accent);
  border-color: var(--accent-soft); font-weight: 700;
}
.pf-divisor--one,
.pf-divisor--self {
  background: var(--surface); color: var(--ink); font-weight: 700;
  border-color: var(--line-strong);
}
.pf-divisor--more {
  background: transparent; color: var(--ink-3); font-style: italic;
  border-style: dashed;
}

/* SVG factor tree */
.pf-tree-wrap {
  width: 100%; overflow-x: auto;
  padding: 8px 0;
}
.pf-tree-svg {
  display: block; width: 100%; height: auto;
  max-height: 420px;
  font-family: var(--font-mono);
}
.pf-tree-line {
  stroke: var(--line-strong);
  stroke-width: 1.5;
  fill: none;
  opacity: 0;
  animation: pf-tree-line-in 260ms ease forwards;
  animation-delay: var(--pf-delay, 0s);
}
.pf-tree-node {
  opacity: 0;
  transform-origin: center;
  animation: pf-tree-node-in 280ms cubic-bezier(0.22, 1.0, 0.36, 1.0) forwards;
  animation-delay: var(--pf-delay, 0s);
}
.pf-tree-pill {
  fill: var(--surface-2);
  stroke: var(--line-strong);
  stroke-width: 1;
}
.pf-tree-label {
  fill: var(--ink);
  font-size: 15px;
  font-weight: 700;
  font-family: var(--font-mono);
}
.pf-tree-node--root .pf-tree-pill {
  fill: var(--accent);
  stroke: var(--accent);
}
.pf-tree-node--root .pf-tree-label { fill: #ffffff; }
.pf-tree-node--prime .pf-tree-pill {
  fill: var(--accent-soft);
  stroke: var(--accent-2);
}
.pf-tree-node--prime .pf-tree-label { fill: var(--accent); }
.pf-tree-empty { fill: var(--ink-3); font-size: 14px; font-style: italic; }

@keyframes pf-tree-line-in {
  from { opacity: 0; stroke-dashoffset: 100; }
  to   { opacity: 1; stroke-dashoffset: 0; }
}
@keyframes pf-tree-node-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.85); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .pf-tree-line, .pf-tree-node { animation: none; opacity: 1; }
}

/* GCD / LCM card */
.pf-gcd-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
@media (max-width: 640px) {
  .pf-gcd-grid { grid-template-columns: 1fr; }
}
.pf-gcd-cell {
  padding: 14px; border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.pf-gcd-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--ink-3); margin-bottom: 4px; font-weight: 600;
}
.pf-gcd-value {
  font-size: 22px; font-weight: 700; color: var(--ink);
  margin-bottom: 4px;
}
.pf-gcd-expr {
  font-size: 12px; color: var(--ink-2);
}
.pf-gcd-expr sup { font-size: 0.75em; }

/* Hero-action copied state */
.hero-action.is-copied {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Body-fat calculator overrides
   Reuses .info-tip, .chip-row, .slider-wrap, .result-hero, .breakdown-card,
   .compare-card, .ci-stack-bar / .ci-stack-seg, .gauge-*, .amort-table.
   Only adds what the shared systems do not already cover.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Composition stacked bar — fat / lean variants. Matches ci-stack-seg shape. */
.ci-stack-seg--fat  { background: var(--amber, #f59e0b); }
.ci-stack-seg--lean { background: var(--teal, #14b8a6); }

/* Gauge: active segment glow + softened non-active segments. */
.gauge-seg.is-active {
  box-shadow: 0 0 0 2px var(--surface, #fff), 0 0 0 4px rgba(59,130,246,0.25);
  filter: saturate(1.15) brightness(1.05);
  z-index: 2;
}
.gauge-track:hover .gauge-seg:not(.is-active) { filter: saturate(0.7); }
.gauge-legend { display: flex; flex-wrap: wrap; gap: 10px 14px; }
.gauge-legend .legend-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--ink-3);
  padding: 3px 8px; border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease;
}
.gauge-legend .legend-item.is-active {
  background: var(--surface-2, #f5f5f5);
  color: var(--ink, #111);
  font-weight: 600;
}

/* Gauge goal marker — shares geometry with .gauge-marker but uses a dashed
   pin so it reads as a target, not a current value. */
.gauge-goal {
  position: absolute; top: 0; bottom: 0;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  pointer-events: none; z-index: 3;
}
.gauge-goal-pin {
  width: 2px; flex: 1;
  background: repeating-linear-gradient(
    to bottom,
    var(--ink-2, #525252) 0 4px,
    transparent 4px 7px
  );
}
.gauge-goal-label {
  position: absolute;
  bottom: -22px;
  font-size: 10px;
  color: var(--ink-3, #737373);
  white-space: nowrap;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Category dots in the below-fold table. Same palette as gauge segments. */
.breakdown-label .dot--under,
.bf-categories .dot--under   { background: #3B82F6; }
.breakdown-label .dot--normal,
.bf-categories .dot--normal  { background: var(--accent, #22C55E); }
.breakdown-label .dot--fitness,
.bf-categories .dot--fitness { background: #14B8A6; }
.breakdown-label .dot--over,
.bf-categories .dot--over    { background: var(--amber, #F59E0B); }
.breakdown-label .dot--obese,
.bf-categories .dot--obese   { background: var(--rose, #EF4444); }
.bf-categories .dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 2px;
  margin-right: 8px; vertical-align: middle;
}

/* Progress-bar column in the category table. */
.amort-progress-bar.bf-bar-under   { background: #3B82F6; }
.amort-progress-bar.bf-bar-normal  { background: var(--accent, #22C55E); }
.amort-progress-bar.bf-bar-fitness { background: #14B8A6; }
.amort-progress-bar.bf-bar-over    { background: var(--amber, #F59E0B); }
.amort-progress-bar.bf-bar-obese   { background: var(--rose, #EF4444); }

/* Highlighted active row in the categories table — the cat matching the
   users current reading. */
.bf-categories tr.is-active {
  background: var(--surface-2, #fafafa);
  box-shadow: inset 3px 0 0 var(--accent, #22C55E);
}
.bf-categories tr.is-active td:first-child { font-weight: 600; }

/* Breakdown card shows a locked/empty look when the user has not entered
   weight — clearly communicates why the breakdown is blank. */
.breakdown-card.is-locked .breakdown-value { color: var(--ink-3, #737373); }
.breakdown-card.is-locked .ci-stack-bar {
  background: repeating-linear-gradient(
    45deg,
    var(--surface-2, #f5f5f5) 0 8px,
    var(--surface, #fff) 8px 16px
  );
  opacity: 0.6;
}

/* How-to-measure card — 4-up grid of small diagrams with captions. */
.bf-howto-card { margin-top: var(--space-4, 16px); }
.bf-howto-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}
@media (max-width: 900px) {
  .bf-howto-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .bf-howto-grid { grid-template-columns: 1fr; }
}
.bf-howto-step {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 16px 12px; border: 1px solid var(--line, #e5e5e5);
  border-radius: 10px; background: var(--surface, #fff);
}
.bf-howto-diagram {
  width: 80px; height: 80px;
  color: var(--ink-2, #525252);
  margin-bottom: 10px;
}
.bf-howto-diagram svg { width: 100%; height: 100%; }
.bf-howto-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink, #111);
  margin-bottom: 4px;
}
.bf-howto-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--rose-soft, rgba(239,68,68,0.12));
  color: var(--rose, #ef4444);
  padding: 2px 6px;
  border-radius: 999px;
  margin-left: 4px;
  vertical-align: middle;
}
.bf-howto-text p {
  font-size: 12px;
  color: var(--ink-2, #525252);
  margin: 0;
  line-height: 1.45;
}

.bf-howto-examples-title {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-3, #737373);
  margin: 20px 0 12px;
}
.bf-examples-grid { margin: 0; }

/* Tighten the delta "neutral" badge so it does not blow out the eyebrow row. */
#bf-delta-badge {
  font-size: 11px;
  padding: 2px 8px;
}

/* ─────────────────────────────────────────────────────────────────
   Factor calculator — scoped styles
   ───────────────────────────────────────────────────────────────── */

.fact-breakdown-meta { margin-top: var(--space-4); }
.fact-mult {
  color: var(--ink-3);
  font-weight: var(--font-regular);
  font-size: .9em;
}
#fact-delta-badge {
  font-size: 11px;
  padding: 2px 8px;
}

/* All-factors list: monospace, wrapping, tabular numerals. */
.fact-factor-list {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Factor-pair ladder: two columns meeting at ×. */
.fact-ladder {
  display: grid;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}
.fact-ladder-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.fact-ladder-row--meet {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.fact-ladder-a { text-align: right; font-weight: 600; color: var(--ink); }
.fact-ladder-x { padding: 0 14px; color: var(--ink-3); font-size: .9em; }
.fact-ladder-b { text-align: left; font-weight: 600; color: var(--ink); }

.fact-table-wrap { overflow-x: auto; }
.fact-pairs-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.fact-pairs-table th,
.fact-pairs-table td {
  padding: 8px 10px;
  text-align: center;
  border-bottom: 1px solid var(--line);
  font-size: var(--text-sm);
}
.fact-pairs-table th {
  font-weight: var(--font-semibold);
  font-size: var(--text-xs);
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* Step-by-step trace. */
.fact-steps {
  list-style: decimal inside;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
  font-size: var(--text-sm);
  color: var(--ink-2);
}
.fact-steps .mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.fact-steps li:last-child .mono {
  font-weight: var(--font-semibold);
  color: var(--ink);
}

/* GCD / LCM card grid. */
.fact-gcd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3);
}
.fact-gcd-cell {
  padding: var(--space-3);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.fact-gcd-label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: 4px;
}
.fact-gcd-value {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--ink);
  margin-bottom: 2px;
}
.fact-gcd-expr {
  font-size: var(--text-xs);
  color: var(--ink-3);
}

/* Mobile: stack pair ladder's inner columns tightly. */
@media (max-width: 480px) {
  .fact-ladder-row { padding: 6px 10px; }
  .fact-ladder-x { padding: 0 10px; }
}

/* =====================================================================
   Macro Calculator
   Reuses .info-tip, .field-aux, .aux, .slider-wrap, .chip-row, .toggle-group,
   .result-hero, .breakdown-card, .compare-card, .ci-actions, .ci-warning,
   .hero-action, .chart-wrap / .donut / .donut-legend, .delta--good/bad,
   and the .macro-split / .macro-seg shared system.
   Only adds macro-specific touches: goal-colored toggle, chip sub-labels,
   food-equivalent chips, advanced <details>, and pill toggle variant.
   ===================================================================== */

/* Goal toggle — color-coded intent. Cool = cut, neutral = maintain, warm = bulk. */
.toggle-group--goal {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  width: 100%;
}
.toggle-group--goal .toggle-btn {
  justify-content: center;
  font-weight: 600;
  position: relative;
}
.toggle-group--goal .toggle-btn--cool.active {
  background: color-mix(in oklab, #38bdf8 18%, var(--surface));
  border-color: color-mix(in oklab, #38bdf8 55%, var(--line));
  color: #0369a1;
}
[data-theme='dark'] .toggle-group--goal .toggle-btn--cool.active {
  color: #7dd3fc;
  background: color-mix(in oklab, #38bdf8 22%, var(--surface));
}
.toggle-group--goal .toggle-btn--warm.active {
  background: color-mix(in oklab, #f97316 18%, var(--surface));
  border-color: color-mix(in oklab, #f97316 55%, var(--line));
  color: #c2410c;
}
[data-theme='dark'] .toggle-group--goal .toggle-btn--warm.active {
  color: #fdba74;
  background: color-mix(in oklab, #f97316 22%, var(--surface));
}

/* Pill toggle variant — slimmer for binary choices like gender. */
.toggle-group--pill {
  display: inline-flex;
  padding: 3px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  gap: 2px;
}
.toggle-group--pill .toggle-btn {
  border: none;
  background: transparent;
  border-radius: 999px;
  padding: 6px 14px;
  font-weight: 600;
  font-size: 13px;
  color: var(--ink-2);
  min-height: unset;
}
.toggle-group--pill .toggle-btn.active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}

/* Labeled chip — main title + subtle ratio sub-label. */
.chip-row--labeled { gap: 8px; flex-wrap: wrap; }
.chip-row--labeled .chip {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
  padding: 8px 12px;
  gap: 3px;
}
.chip-row--labeled .chip .chip-main {
  font-weight: 600;
  font-size: 13px;
}
.chip-row--labeled .chip .chip-sub {
  font-size: 10.5px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.chip-row--labeled .chip.active .chip-sub { color: inherit; opacity: 0.8; }

/* Advanced <details> form section. */
.form-section--advanced {
  border-top: 1px dashed var(--line);
  padding-top: 12px;
  margin-top: 6px;
}
.form-section--advanced[open] { padding-bottom: 4px; }
.form-section-title--summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}
.form-section-title--summary::-webkit-details-marker { display: none; }
.form-section-title--summary::before {
  content: '›';
  font-size: 16px;
  color: var(--ink-3);
  transition: transform .15s ease;
  display: inline-block;
}
.form-section--advanced[open] .form-section-title--summary::before { transform: rotate(90deg); }

/* Food-equivalent chips inside per-meal card. */
.macro-food-eq {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}
.macro-food-eq__title {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.macro-food-eq__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.food-chip {
  display: inline-block;
  padding: 4px 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

/* Squeeze the donut legend for macro so three rows don't wrap awkwardly. */
.breakdown-card .chart-wrap { margin-bottom: 14px; }
.breakdown-card .chart-wrap .donut-legend .legend-item .aux {
  font-size: 11px;
  color: var(--ink-3);
  margin-left: 4px;
}

/* Slider-only row (no visible ticks) used for secondary fields. */
.field .slider-wrap + .field-aux { margin-top: 6px; }

/* Mobile: stack chip labels, keep food chips readable. */
@media (max-width: 480px) {
  .chip-row--labeled .chip { flex: 1 1 calc(50% - 4px); }
  .toggle-group--goal { gap: 4px; }
  .macro-food-eq__chips { gap: 5px; }
  .food-chip { font-size: 11.5px; padding: 3px 8px; }
}

/* ─────────────────────────────────────────────────────────────────
   Right Triangle calculator — scoped styles (2026-04 redesign)
   ───────────────────────────────────────────────────────────────── */

.rt-modes {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: start;
}
.rt-modes .field { margin-bottom: 0; }
@media (max-width: 520px) {
  .rt-modes { grid-template-columns: 1fr; }
}

.rt-solve-state {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  margin: 4px 0 14px;
  font-size: 13px;
}
.rt-solve-state__label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
}
.rt-solve-state__chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.rt-chip {
  display: inline-block;
  padding: 3px 10px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.rt-clear-btn {
  padding: 6px 12px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.rt-clear-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.rt-validation {
  padding: 10px 14px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #b91c1c;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 14px;
}
[data-theme='dark'] .rt-validation {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
}

.rt-role-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--surface-2);
  color: var(--ink-3);
  margin-left: 8px;
}
.is-given .rt-role-pill {
  background: var(--accent-soft);
  color: var(--accent);
}

/* Computed field — subdued fill + italic value until the user focuses. */
.is-computed .input-wrap { background: var(--surface-2); }
.is-computed .input-wrap input {
  background: transparent;
  color: var(--ink-2);
  font-style: italic;
}
.is-computed .input-wrap input:focus { font-style: normal; }

/* Result hero — diagram-centric layout. */
.rt-hero .result-hero__inner { position: relative; z-index: 1; }

.rt-hero-diagram {
  margin: 12px -8px 14px;
  padding: 4px 0;
}
.rt-diagram-svg {
  width: 100%;
  height: auto;
  max-height: 220px;
  display: block;
}
.rt-diagram-svg text {
  font-variant-numeric: tabular-nums;
  paint-order: stroke;
  stroke: rgba(30, 45, 40, 0.55);
  stroke-width: 2.6;
  stroke-linejoin: round;
}

.rt-hero-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 18px;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.rt-hero-stat { min-width: 0; }
.rt-hero-stat__label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  margin-bottom: 4px;
}
.rt-hero-stat__value {
  font-size: 17px;
  color: #fff;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 420px) {
  .rt-hero-stat__value { font-size: 15px; }
}

/* Formula section — Pythagorean showcase + SOH-CAH-TOA reference. */
.rt-formula-section .formula-eq--pythagorean {
  font-size: 38px;
  font-weight: 600;
  letter-spacing: 0.02em;
  gap: 2px;
}
.rt-formula-section .formula-eq--pythagorean sup {
  font-size: 0.55em;
  font-weight: 600;
  top: -0.7em;
  margin: 0 6px 0 1px;
}

.rt-soh-cah-toa {
  margin-top: 24px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}
.rt-soh-cah-toa__heading {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--ink-3);
  margin-bottom: 14px;
}
.rt-soh-cah-toa__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 640px) {
  .rt-soh-cah-toa__grid { grid-template-columns: 1fr; gap: 10px; }
}
.rt-trig-ref {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  padding: 12px 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  text-align: center;
}
.rt-trig-ref__name {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.rt-trig-ref__formula {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  color: var(--ink-2);
}
.rt-trig-ref__bar {
  width: 70%;
  height: 1px;
  background: var(--line-strong);
  margin: 2px 0;
}
.rt-trig-ref__symbols {
  font-size: 12px;
  color: var(--ink-3);
}

#rt-worked-steps { list-style: none; padding: 0; margin: 14px 0 0; counter-reset: rt-step; }
#rt-worked-steps li {
  counter-increment: rt-step;
  padding: 10px 14px 10px 44px;
  margin-bottom: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  position: relative;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
#rt-worked-steps li:last-child { margin-bottom: 0; }
#rt-worked-steps li::before {
  content: counter(rt-step);
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.rt-share-label { display: inline; }

/* ── LCM Calculator ──────────────────────────────────────────────── */

/* Number rows */
.lcm-rows { display: flex; flex-direction: column; gap: 8px; }
.lcm-row {
  display: flex; align-items: center; gap: 10px;
}
.lcm-row-num {
  width: 22px; font-size: 12px; color: var(--ink-3);
  font-weight: 600; text-align: center; flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.lcm-input-wrap { flex: 1; min-width: 0; }
.lcm-input-wrap .lcm-number {
  width: 100%; border: none; background: transparent;
  font: inherit; padding: 10px 12px; outline: none;
  font-variant-numeric: tabular-nums;
}
.lcm-input-wrap .lcm-number::-webkit-outer-spin-button,
.lcm-input-wrap .lcm-number::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.lcm-input-wrap .lcm-number[type="number"] { -moz-appearance: textfield; }
.lcm-aux {
  font-variant-numeric: tabular-nums;
  color: var(--ink-3); font-size: 12px; font-family: var(--font-mono);
  padding-right: 10px; opacity: .9; max-width: 55%; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis;
}
.lcm-aux:empty { display: none; }
.lcm-remove {
  width: 30px; height: 30px; border: 1px solid transparent; border-radius: var(--radius-md);
  background: transparent; color: var(--ink-3); cursor: pointer; font-size: 18px;
  line-height: 1; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  opacity: 0; transition: opacity var(--transition-fast), color var(--transition-fast),
              border-color var(--transition-fast), background var(--transition-fast);
}
.lcm-row:hover .lcm-remove,
.lcm-row:focus-within .lcm-remove { opacity: 1; }
.lcm-remove:hover { border-color: #EF4444; color: #EF4444; background: #FEF2F2; }
.lcm-remove:disabled,
.lcm-row.is-locked .lcm-remove { opacity: 0 !important; pointer-events: none; }

.lcm-row-actions { display: flex; gap: 8px; margin-top: 12px; }
.lcm-add-btn,
.lcm-paste-btn {
  flex: 1; padding: 8px 12px; border: 1px dashed var(--line); border-radius: var(--radius-md);
  background: transparent; cursor: pointer; font-size: 13px; color: var(--ink-3);
  transition: border-color var(--transition-fast), color var(--transition-fast),
              background var(--transition-fast);
}
.lcm-add-btn:hover,
.lcm-paste-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.lcm-add-btn:disabled { opacity: .45; cursor: not-allowed; }

.lcm-warning {
  margin-top: 12px; padding: 10px 12px; border-radius: var(--radius-md);
  background: #FEF2F2; border: 1px solid #FECACA; color: #B91C1C; font-size: 13px;
}

/* Result-panel hero — slightly smaller font so the full expression fits. */
.lcm-result-expr {
  display: block; font-size: 14px; color: var(--ink-3); font-weight: 500;
  letter-spacing: .01em; word-break: break-word;
}
#lcm-result-value { font-variant-numeric: tabular-nums; }
.lcm-result-hint { color: var(--ink-3); font-size: 12px; margin: 12px 0 0; }

/* Color-coded prime chips (right-rail composition + factor table). */
.lcm-prime-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lcm-prime-chip {
  display: inline-flex; align-items: baseline; gap: 2px;
  padding: 4px 10px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 13px; font-weight: 600;
  background: var(--prime-bg, var(--accent-soft));
  color: var(--prime-fg, var(--accent));
  border: 1px solid var(--prime-bd, transparent);
}
.lcm-prime-chip sup { font-size: 10px; line-height: 1; }
.lcm-prime-chip__op { color: var(--ink-3); font-weight: 500; padding: 0 2px; }
.lcm-prime-chip--p2 { --prime-bg: #DBEAFE; --prime-fg: #1D4ED8; --prime-bd: #BFDBFE; }
.lcm-prime-chip--p3 { --prime-bg: #DCFCE7; --prime-fg: #15803D; --prime-bd: #BBF7D0; }
.lcm-prime-chip--p5 { --prime-bg: #FEF3C7; --prime-fg: #B45309; --prime-bd: #FDE68A; }
.lcm-prime-chip--p7 { --prime-bg: #FCE7F3; --prime-fg: #BE185D; --prime-bd: #FBCFE8; }
.lcm-prime-chip--p11 { --prime-bg: #EDE9FE; --prime-fg: #6D28D9; --prime-bd: #DDD6FE; }
.lcm-prime-chip--p13 { --prime-bg: #FFE4E6; --prime-fg: #BE123C; --prime-bd: #FECDD3; }
.lcm-prime-chip--other { --prime-bg: #E5E7EB; --prime-fg: #374151; --prime-bd: #D1D5DB; }

/* Factor table */
.lcm-factor-table-scroll { overflow-x: auto; }
.lcm-factor-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.lcm-factor-table th,
.lcm-factor-table td {
  padding: 10px 12px; text-align: center; border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.lcm-factor-table thead th {
  font-weight: 600; color: var(--ink-2); background: var(--surface-2);
  border-bottom: 2px solid var(--line-strong);
  font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
}
.lcm-factor-table thead th.is-prime-col { padding: 6px; }
.lcm-factor-table thead th .lcm-prime-chip { font-size: 13px; }
.lcm-factor-table tbody td:first-child { text-align: left; font-weight: 600; color: var(--ink); }
.lcm-factor-table tbody tr:nth-child(even) td { background: var(--accent-soft); }
.lcm-factor-table .is-zero { color: var(--ink-3); opacity: .5; }
.lcm-factor-table .is-max { font-weight: 700; color: var(--accent); position: relative; }
.lcm-factor-table .is-max::after {
  content: ''; position: absolute; left: 25%; right: 25%; bottom: 4px;
  height: 2px; background: var(--accent); border-radius: 2px;
}
.lcm-factor-table tfoot td {
  background: var(--surface-2); font-weight: 700; color: var(--accent);
  border-top: 2px solid var(--line-strong); border-bottom: none;
}
.lcm-factor-table tfoot td:first-child { color: var(--ink); }
.lcm-method-hint { color: var(--ink-3); font-size: 12px; margin: 14px 0 0; }

/* GCF method steps */
.lcm-gcf-steps {
  list-style: decimal; padding-left: 22px; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.lcm-gcf-steps li {
  font-family: var(--font-mono); font-size: 13px; color: var(--ink-2);
  line-height: 1.7;
}
.lcm-gcf-steps li strong { color: var(--accent); }

/* Paste-list modal */
.lcm-paste-modal {
  position: fixed; inset: 0; z-index: 999;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.lcm-paste-modal[hidden] { display: none; }
.lcm-paste-modal__backdrop {
  position: absolute; inset: 0; background: rgba(15, 23, 42, .42);
}
.lcm-paste-modal__panel {
  position: relative; background: var(--surface); border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-lg, 0 20px 50px rgba(0,0,0,.25));
  width: min(480px, 100%); max-height: 90vh; overflow: hidden;
  display: flex; flex-direction: column;
}
.lcm-paste-modal__header {
  padding: 16px 20px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
}
.lcm-paste-close {
  width: 28px; height: 28px; border: none; background: transparent; cursor: pointer;
  font-size: 22px; color: var(--ink-3); border-radius: 6px;
}
.lcm-paste-close:hover { background: var(--surface-2); color: var(--ink); }
.lcm-paste-modal__body { padding: 18px 20px; }
.lcm-paste-help { color: var(--ink-3); font-size: 13px; margin: 0 0 10px; }
#lcm-paste-textarea {
  width: 100%; min-height: 120px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-md);
  font-family: var(--font-mono); font-size: 13px; resize: vertical;
}
#lcm-paste-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.lcm-paste-modal__footer {
  padding: 14px 20px; border-top: 1px solid var(--line);
  display: flex; justify-content: flex-end; gap: 8px;
}


/* ───────────────────────────────────────────────────────────────────
   Quadratic Equation Solver (quadratic-equation)
   Reuses compound-interest layout vocabulary:
     .card / .card-header / .card-title / .card-hint / .card-body
     .form-section / .field / .input-wrap / .chip-row / .chip
     .result-hero / .result-eyebrow / .result-sub / .breakdown-card
     .hero-action / .compare-card / .compare-grid / .ci-actions / .ci-warning
   plus quadratic-specific styles below.
   ─────────────────────────────────────────────────────────────────── */

/* Live equation preview */
.quad-eq-preview {
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  padding: 14px 16px;
  background: var(--accent-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  text-align: center;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

/* Coefficient stepper: [−] [input] [+] inside .input-wrap */
.quad-stepper { padding: 0; gap: 0; }
.quad-stepper .stepper-btn {
  flex: 0 0 auto;
  width: 36px; height: 40px;
  border: none;
  background: var(--surface-2);
  color: var(--ink);
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition-fast);
  line-height: 1;
}
.quad-stepper .stepper-btn:first-child {
  border-right: 1px solid var(--line);
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}
.quad-stepper .stepper-btn:last-child {
  border-left: 1px solid var(--line);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.quad-stepper .stepper-btn:hover { background: var(--accent-soft); color: var(--accent); }
.quad-stepper input[type="number"] {
  flex: 1 1 auto; text-align: center;
  font-family: var(--font-mono); font-size: 15px; font-weight: 500;
  padding: 10px 12px;
}

/* Example chip tags (small annotation inside the chip) */
.chip--example { position: relative; }
.chip--example .chip-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 3px;
}

/* Hero: root-type accent (coloured top border) */
.quad-hero.quad-hero--two::before    { background: linear-gradient(90deg, #22c55e, #14b8a6); }
.quad-hero.quad-hero--one::before    { background: linear-gradient(90deg, #f59e0b, #f97316); }
.quad-hero.quad-hero--complex::before { background: linear-gradient(90deg, #8b5cf6, #ec4899); }

.quad-root-badge {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 2px 8px;
}
.quad-hero--two    .quad-root-badge { background: rgba(34, 197, 94, 0.18); color: #22c55e; }
.quad-hero--one    .quad-root-badge { background: rgba(245, 158, 11, 0.18); color: var(--amber); }
.quad-hero--complex .quad-root-badge { background: rgba(139, 92, 246, 0.22); color: #a78bfa; }

/* Compare equation (shown above the delta grid) */
.quad-compare-eq {
  padding: 10px 12px;
  background: var(--surface-2);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  font-size: 14px;
  color: var(--ink-2);
  text-align: center;
}

/* Chart */
.quad-chart-wrap {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 12px;
  overflow: hidden;
}
.quad-chart {
  width: 100%;
  height: auto;
  display: block;
  max-height: 520px;
}
.quad-chart text { font-family: var(--font-mono); }
.quad-grid-line { stroke: var(--line); stroke-width: 1; opacity: 0.45; }
.quad-tick { fill: var(--ink-3); font-size: 10px; }
.quad-axis-line { stroke: var(--ink-3); stroke-width: 1.25; }
.quad-axis-symm { stroke: var(--amber); stroke-width: 1.25; stroke-dasharray: 4 4; opacity: 0.8; }
.quad-parabola { fill: none; stroke: var(--accent); stroke-width: 2.75; stroke-linejoin: round; }
.quad-parabola-pinned { fill: none; stroke: var(--ink-3); stroke-width: 1.75; stroke-dasharray: 6 4; opacity: 0.7; }
.quad-derivative { stroke: #6366f1; stroke-width: 1.75; stroke-dasharray: 5 4; opacity: 0.9; }
.quad-pt-vertex { fill: var(--amber); stroke: var(--surface); stroke-width: 2; }
.quad-pt-root { fill: #14b8a6; stroke: var(--surface); stroke-width: 2; }
.quad-pt-root--double { fill: var(--amber); }
.quad-pt-yint { fill: #14b8a6; stroke: var(--surface); stroke-width: 2; opacity: 0.85; }
.quad-hover-dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.quad-label { fill: var(--ink); font-size: 11px; font-weight: 500; pointer-events: none; }
.quad-label-dim { fill: var(--ink-3); font-size: 10px; pointer-events: none; }

/* Chart tooltip */
.quad-chart-tooltip {
  position: absolute;
  transform: translate(-50%, calc(-100% - 10px));
  padding: 6px 10px;
  background: var(--ink);
  color: #fff;
  border-radius: 6px;
  font-size: 12px;
  display: flex;
  gap: 10px;
  pointer-events: none;
  white-space: nowrap;
  z-index: 2;
}
.quad-chart-tooltip[hidden] { display: none; }
.quad-chart-tooltip::after {
  content: '';
  position: absolute;
  left: 50%; top: 100%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--ink);
}

/* Chart actions row */
.quad-chart-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.quad-chart-actions .card-link { padding: 4px 10px; }

.quad-chart-legend {
  margin-top: 10px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--ink-2);
}
.quad-chart-legend .legend-item { display: inline-flex; align-items: center; gap: 6px; }
.quad-chart-legend .sw {
  display: inline-block; width: 12px; height: 12px; border-radius: 3px;
}
.quad-chart-legend .sw.sw--accent { background: var(--accent); }
.quad-chart-legend .sw.sw--amber  { background: var(--amber); }
.quad-chart-legend .sw.sw--teal   { background: #14b8a6; }
.quad-chart-legend .sw.sw--indigo { background: #6366f1; }

/* Formula tabs */
.quad-formula-tabs { margin-bottom: 14px; }

/* Shareable-link + LaTeX action spacing */
.ci-actions .calc-btn .quad-share-label,
.ci-actions .calc-btn .quad-latex-label { pointer-events: none; }

/* Mobile */
@media (max-width: 768px) {
  .quad-eq-preview { font-size: 18px; padding: 10px 12px; }
  .quad-stepper .stepper-btn { width: 32px; height: 38px; font-size: 16px; }
  .quad-chart-actions { justify-content: flex-start; }
  .quad-chart-actions .card-link { font-size: 12px; padding: 3px 8px; }
}

/* ════════════════════════════════════════════════════════════════════
   Linear Equation Solver
   ════════════════════════════════════════════════════════════════════ */

/* Live equation preview shown above the coefficient inputs. */
.le-preview {
  display: flex;
  justify-content: center;
  padding: 22px 16px;
  background: var(--surface-2, var(--surface));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: 4px 0 4px;
}
.formula-eq--inline {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 28px;
  font-weight: 500;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  margin: 0;
  color: var(--ink);
}
.formula-eq--inline .formula-token { padding: 0 2px; }
.formula-eq--inline .formula-op { padding: 0 6px; color: var(--ink-2); }
.formula-eq--inline .formula-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: 1.25rem;
}
.formula-eq--inline .formula-group:last-child { margin-right: 0; }

/* +/- sign toggle sitting inline with an input. */
.input-wrap--signed { padding-left: 0; }
.input-wrap--signed .sign-toggle {
  flex: 0 0 auto;
  width: 44px;
  align-self: stretch;
  border: 0;
  border-right: 1px solid var(--line);
  background: var(--surface-2, var(--surface));
  color: var(--ink);
  font-family: 'JetBrains Mono', monospace;
  font-size: 20px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.input-wrap--signed .sign-toggle:hover { background: var(--accent-soft); color: var(--accent); }
.input-wrap--signed .sign-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.input-wrap--signed[data-sign="-"] .sign-toggle,
.input-wrap--signed .sign-toggle[data-sign="-"] { color: var(--danger, #c0392b); }

/* Form section sub-label (e.g. "Left side" / "Right side" inside General). */
.form-section-title--sub {
  margin-top: 8px;
  font-size: 12px;
  color: var(--ink-3);
}

/* Fraction rendering in the hero. */
.le-frac {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
}
.le-frac-dec {
  font-size: 0.6em;
  color: var(--ink-3);
  margin-left: 6px;
  font-weight: 500;
}

/* Distinct hero state colors. */
.result-hero[data-state="no-solution"] .pulse-dot { background: var(--danger, #c0392b); }
.result-hero[data-state="no-solution"] #le-result-value { color: var(--danger, #c0392b); }
.result-hero[data-state="infinite"] .pulse-dot { background: var(--warn, #b7791f); }
.result-hero[data-state="infinite"] #le-result-value { color: var(--warn, #b7791f); }

/* Feedback line under the "From text" input. */
.le-text-feedback {
  margin-top: 8px;
  min-height: 18px;
  font-size: 13px;
  color: var(--ink-3);
}
.le-text-feedback--error { color: var(--danger, #c0392b); }
.le-text-feedback--ok { color: var(--ink-2); }

/* Number line visualisation. */
.le-numberline {
  position: relative;
  padding: 4px 0 2px;
}
.le-numberline svg { display: block; }
.le-numberline .nl-axis {
  stroke: var(--ink-2);
  stroke-width: 1.5;
}
.le-numberline .nl-tick {
  stroke: var(--line);
  stroke-width: 1;
}
.le-numberline .nl-tick-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  fill: var(--ink-3);
}
.le-numberline .nl-dot {
  fill: var(--accent);
  stroke: var(--surface);
  stroke-width: 2;
}
.le-numberline .nl-dot-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  fill: var(--accent);
}
.le-numberline .nl-shade {
  fill: var(--accent);
  opacity: 0.18;
  rx: 6;
}
.le-numberline__legend {
  display: flex;
  justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--ink-3);
  padding: 0 4px;
}

/* Structured derivation steps. */
.le-steps {
  list-style: none;
  counter-reset: le-step;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.le-step {
  counter-increment: le-step;
  display: grid;
  grid-template-columns: 28px 1fr;
  grid-template-areas: "num eq" "num op";
  column-gap: 12px;
  row-gap: 2px;
  padding: 10px 12px;
  background: var(--surface-2, var(--surface));
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.le-step::before {
  content: counter(le-step);
  grid-area: num;
  align-self: start;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--accent-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.le-step-eq { grid-area: eq; font-size: 15px; color: var(--ink); }
.le-step-op { grid-area: op; font-size: 12px; color: var(--ink-3); }

/* Formula partial — paired simple/general layout. */
.formula-pair {
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}
.formula-pair__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.formula-arrow {
  padding: 0 10px;
  color: var(--ink-3);
  font-weight: 600;
}

/* Chip-row wrap variant fallback (in case the existing rule doesn't cover gap). */
.chip-row--wrap { flex-wrap: wrap; gap: 8px; }

/* Mobile */
@media (max-width: 768px) {
  .formula-eq--inline { font-size: 22px; }
  .le-preview { padding: 16px 12px; }
  .formula-pair { grid-template-columns: 1fr; gap: 8px; }
  .formula-pair .formula-eq { font-size: 16px; padding: 12px 14px; }
  .le-step { grid-template-columns: 22px 1fr; column-gap: 10px; }
  .le-step::before { width: 20px; height: 20px; font-size: 11px; }
  .input-wrap--signed .sign-toggle { width: 38px; font-size: 18px; }
}

/* ═══════════════════════════════════════════════════════════════════
   Rectangle Calculator — dedicated styles
   Promotes Area/Perimeter/Diagonal to co-equal hero tiles, adds a
   mixed-unit layout, compact unit toggles inside input-wrap, and a
   reference comparison table below the fold.
   ═══════════════════════════════════════════════════════════════════ */

.rect-tile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 6px;
}
.rect-tile {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 10px;
  padding: 12px 10px 10px;
  min-width: 0;
  text-align: left;
  position: relative;
}
.rect-tile__label {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.62);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  margin-bottom: 6px;
}
.rect-tile__value {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rect-tile__unit {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 500;
  margin-top: 2px;
}
.rect-tile[data-metric="area"] {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.16);
}

@media (max-width: 480px) {
  .rect-tile-grid { grid-template-columns: 1fr; }
  .rect-tile__value { font-size: 20px; }
}

/* Toggle-group that sits inline inside an input-wrap on the right.
   Keeps the whole field on one row so length/width each get their
   own unit selector without bloating vertical rhythm. */
.input-wrap .toggle-group--compact {
  gap: 2px;
  padding: 2px;
  border-radius: 6px;
  margin-left: 6px;
  flex-shrink: 0;
}
.input-wrap .toggle-group--compact .toggle-btn {
  padding: 4px 8px;
  font-size: 11px;
  min-height: 26px;
  min-width: 0;
}

/* Smaller chip row — aspect-ratio snap chips */
.chip-row--sm .chip {
  padding: 4px 10px;
  font-size: 11px;
}

/* Comparison table below the fold */
.rect-compare-section { margin-top: 16px; }
.rect-compare-tablewrap {
  overflow-x: auto;
  margin: 0 calc(var(--space-5, 20px) * -1);
  padding: 0 var(--space-5, 20px);
}
.rect-compare-table {
  width: 100%;
  min-width: 580px;
  border-collapse: collapse;
  font-size: 13px;
}
.rect-compare-table thead th {
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--ink-3, #666);
  padding: 8px 10px;
  border-bottom: 1px solid var(--line, rgba(0,0,0,0.08));
}
.rect-compare-table thead th.num,
.rect-compare-table tbody td.num {
  text-align: right;
}
.rect-compare-table tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line-subtle, rgba(0,0,0,0.04));
  color: var(--ink, #222);
}
.rect-compare-table tbody tr:last-child td { border-bottom: none; }
.rect-compare-table tbody tr:hover td { background: var(--surface-2, rgba(0,0,0,0.02)); }
.rect-compare-table .compare-delta {
  font-weight: 600;
}
.rect-compare-table .compare-delta.is-up   { color: var(--green, #2a7a2a); }
.rect-compare-table .compare-delta.is-down { color: var(--rose, #b83232); }
.rect-compare-footnote {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--ink-3, #666);
  line-height: 1.5;
}

@media (max-width: 768px) {
  .rect-tile-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .rect-tile { padding: 10px 8px 8px; }
  .rect-tile__value { font-size: 18px; }
  .input-wrap .toggle-group--compact .toggle-btn { padding: 4px 6px; font-size: 10px; }
}

/* ─────────────────────────────────────────────────────────────────
   System of Equations Solver
   Dedicated layout classes — do NOT reuse .quadratic-equation-display
   (semantic mismatch: these are linear-system rows, not polynomial terms).
   ───────────────────────────────────────────────────────────────── */

.system-equation-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 12px 10px 44px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  color: var(--ink-2);
  position: relative;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.system-equation-row + .system-equation-row { margin-top: 8px; }
.system-equation-row:focus-within { border-color: var(--accent); box-shadow: 0 2px 8px rgba(46, 93, 78, .08); }
.sys-eq-num {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sys-coef {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.sys-input {
  width: 68px;
  text-align: center;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
}
.sys-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.sys-input.is-invalid { border-color: var(--rose, #b83232); }
.sys-var {
  font-style: italic;
  color: var(--ink);
  padding-left: 2px;
}
.sys-op {
  padding: 0 4px;
  color: var(--ink-2);
  font-weight: 500;
}

@media (max-width: 640px) {
  .system-equation-row { font-size: var(--text-base); padding: 10px 10px 10px 40px; gap: 4px; }
  .sys-input { width: 56px; padding: 5px 6px; }
  .sys-op { padding: 0 2px; }
}

/* Paste field + feedback ----------------------------------------- */
.sys-paste-feedback {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.5;
}
.sys-paste-feedback.is-ok    { color: var(--accent); }
.sys-paste-feedback.is-error { color: var(--rose, #b83232); }

/* Method card + tabs ---------------------------------------------- */
.sys-method-card { margin-top: 20px; }
.sys-method-card .tab-list { margin-bottom: 16px; flex-wrap: wrap; }
.sys-method-card .tab-item { flex: 0 1 auto; padding: 6px 14px; font-size: 13px; }
.tab-panel[hidden] { display: none; }
.sys-panel-note {
  margin: 12px 0 0;
  padding: 10px 12px;
  background: var(--surface-2);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--ink-2);
}

/* Augmented matrix view ------------------------------------------- */
.sys-matrix-caption {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
}
.sys-matrix-scroll {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sys-matrix-step {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.sys-matrix-step__label {
  font-size: 12px;
  color: var(--ink-2);
  margin-bottom: 8px;
  font-family: var(--font-body);
}
.sys-matrix {
  display: inline-grid;
  gap: 2px 14px;
  padding: 10px 18px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  color: var(--ink);
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  position: relative;
}
.sys-matrix::before,
.sys-matrix::after {
  content: '';
  position: absolute;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--ink-3);
}
.sys-matrix::before { left: 4px; border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
.sys-matrix::after  { right: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
.sys-matrix__cell {
  text-align: right;
  padding: 2px 4px;
  min-width: 32px;
}
.sys-matrix__cell--pivot { background: var(--accent-soft); color: var(--accent); font-weight: 600; border-radius: 3px; }
.sys-matrix__cell--bar { border-left: 1px dashed var(--ink-3); padding-left: 12px; }

/* 2×2 intersection plot ------------------------------------------- */
.sys-plot-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.sys-plot {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1 / 1;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.sys-plot .axis { stroke: var(--ink-3); stroke-width: 0.04; }
.sys-plot .grid { stroke: var(--line); stroke-width: 0.02; }
.sys-plot .line-1 { stroke: var(--accent); stroke-width: 0.12; fill: none; }
.sys-plot .line-2 { stroke: #c97a2c; stroke-width: 0.12; fill: none; }
.sys-plot .line-3 { stroke: #4a6aa8; stroke-width: 0.12; fill: none; }
.sys-plot .intersect { fill: var(--accent); stroke: var(--surface); stroke-width: 0.04; }
.sys-plot .tick-label { fill: var(--ink-3); font-size: 0.8px; font-family: var(--font-mono); }
.sys-plot-caption {
  margin: 0;
  font-size: 12px;
  color: var(--ink-2);
  text-align: center;
  max-width: 420px;
}

/* Right-rail hero state colors ------------------------------------ */
.sys-hero[data-state="unique"] .ci-delta-badge { background: var(--accent); color: #fff; }
.sys-hero[data-state="no-solution"] .ci-delta-badge { background: var(--rose, #b83232); color: #fff; }
.sys-hero[data-state="dependent"] .ci-delta-badge { background: #4a6aa8; color: #fff; }
.sys-hero[data-state="invalid"] .ci-delta-badge { background: var(--ink-3); color: #fff; }
.sys-solution-value { font-size: 30px; line-height: 1.2; word-break: break-word; }
@media (max-width: 420px) { .sys-solution-value { font-size: 24px; } }

/* Verification list ----------------------------------------------- */
.sys-verify-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sys-verify-row {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}
.sys-verify-row.is-ok       { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.sys-verify-row.is-failed   { border-color: color-mix(in srgb, var(--rose, #b83232) 35%, var(--line)); }
.sys-verify-row.is-pending  { color: var(--ink-3); }
.sys-verify-mark {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700;
}
.sys-verify-row.is-ok .sys-verify-mark     { background: var(--accent-soft); color: var(--accent); }
.sys-verify-row.is-failed .sys-verify-mark { background: color-mix(in srgb, var(--rose, #b83232) 15%, transparent); color: var(--rose, #b83232); }
.sys-verify-row.is-pending .sys-verify-mark{ background: var(--surface-2); color: var(--ink-3); }
.sys-verify-text { min-width: 0; word-break: break-word; }

/* ═══════════════════════════════════════════════════════════════
   Rhombus calculator — live diagram, draggable handles,
   pretty step rows, copy buttons.
   ═══════════════════════════════════════════════════════════════ */

/* Two-up grid: inputs on the left, diagram on the right of the inputs panel.
   Stacks below 760px. */
.rho-input-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(220px, 0.9fr);
  gap: 16px;
  align-items: start;
}
@media (max-width: 760px) {
  .rho-input-grid { grid-template-columns: 1fr; }
}

/* Diagram card overrides — taller SVG, centered, with a hint underneath. */
.rho-diagram-card .card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 14px 18px;
}
.rho-svg {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 320 / 280;
  height: auto;
  color: var(--ink-2);
  touch-action: none;
}
.rho-diagram-hint {
  margin: 0;
  font-size: 11px;
  color: var(--ink-3);
  text-align: center;
}

/* Vertex handles — visible target with hover / active states. */
.rho-handle {
  fill: #fff;
  stroke: var(--accent, #2e5d4e);
  stroke-width: 2;
  cursor: grab;
  transition: r 0.15s ease, fill 0.15s ease;
}
.rho-handle:hover {
  fill: var(--accent, #2e5d4e);
}
.rho-handle:active {
  cursor: grabbing;
}

/* Pretty step-by-step rows — replace raw monospace blocks. */
.rho-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rho-step {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: baseline;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-size: 13px;
}
.rho-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-soft, color-mix(in srgb, var(--accent, #2e5d4e) 12%, transparent));
  color: var(--accent, #2e5d4e);
  font-weight: 600;
  font-size: 11px;
  line-height: 1;
}
.rho-step-body {
  color: var(--ink);
  line-height: 1.5;
}
.rho-step-eq {
  color: var(--ink-3);
  margin: 0 4px;
}
.rho-step .mono {
  color: var(--ink);
  font-weight: 500;
}

/* Copy-to-clipboard button next to each result-sub-value. */
.rho-copy-btn {
  margin-left: 6px;
  padding: 0 4px;
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  vertical-align: baseline;
  transition: color 0.15s ease;
}
.rho-copy-btn:hover { color: rgba(255, 255, 255, 0.95); }
.rho-copy-btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Formula equation separator — comma between A=…, s=…, P=4s. */
.formula-eq--rhombus { flex-wrap: wrap; gap: 6px 8px; }
.formula-eq--rhombus .formula-sep {
  color: var(--ink-3);
  margin: 0 4px 0 0;
  font-weight: 500;
}

/* ═════════════════════════════════════════════════════════════
   Length converter — swap, grouped chips, presets, copy, math
   ═════════════════════════════════════════════════════════════ */

/* Grouped chip rows: a small left-side label + a chip row on the right. */
.unit-group { display: flex; flex-direction: column; gap: 6px; }
.unit-group__row {
  display: grid;
  grid-template-columns: 68px 1fr;
  align-items: center;
  gap: 10px;
}
.unit-group__label {
  font-size: var(--text-xs);
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
}
@media (max-width: 520px) {
  .unit-group__row { grid-template-columns: 1fr; gap: 4px; }
}
.unit-extras-toggle {
  align-self: flex-start;
  background: none;
  border: none;
  color: var(--ink-3);
  font-size: var(--text-xs);
  padding: 4px 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.unit-extras-toggle:hover { color: var(--accent); }
.unit-extras-toggle .chev { font-size: 10px; }

/* Swap button between From and To sections. */
.unit-swap-wrap {
  display: flex;
  justify-content: center;
  margin: -6px 0 -2px;
  position: relative;
  z-index: 1;
}
.unit-swap-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--ink-2);
  transition: transform 180ms ease, background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.unit-swap-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  transform: rotate(180deg);
}
.unit-swap-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Read-only input with inline copy button. */
.input-wrap--readonly { position: relative; }
.input-copy-btn {
  background: none;
  border: none;
  padding: 4px 6px;
  margin-right: 6px;
  color: var(--ink-3);
  cursor: pointer;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  transition: color 120ms ease, background 120ms ease;
}
.input-copy-btn:hover { color: var(--accent); background: var(--accent-soft); }
.input-copy-btn.is-copied { color: var(--success, #16a34a); }

/* Preset & quick-reference chip rows use a lighter "preset" look. */
.chip--preset, .chip--quickref {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}
.preset-row, .quickref-row { gap: 6px; }

/* Precision toggle sits alongside the CI-style toggle-group, but compact. */
#length-precision .toggle-btn { min-width: 44px; }

/* Share button flash state. */
#length-share.is-flashed { border-color: var(--accent); color: var(--accent); }

/* ── Result panel ── */
.length-summary .conv-summary__big {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--accent);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.breakdown-grouped { display: flex; flex-direction: column; gap: 14px; }
.breakdown-group__label {
  font-size: var(--text-xs);
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
  margin-bottom: 4px;
}
.breakdown-grouped .breakdown-row {
  cursor: pointer;
  transition: background 120ms ease;
}
.breakdown-grouped .breakdown-row:hover { background: var(--accent-soft); }
.breakdown-grouped .breakdown-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.breakdown-grouped .breakdown-row.is-copied {
  background: var(--accent-soft);
}
.breakdown-grouped .breakdown-row.is-copied .breakdown-value::after {
  content: " ✓";
  color: var(--success, #16a34a);
  font-weight: 600;
}
.breakdown-grouped .breakdown-value {
  font-variant-numeric: tabular-nums;
}

/* "Show math" collapsible. */
.length-math-toggle {
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--ink-2);
}
.length-math-toggle:hover { color: var(--accent); }
.length-math-toggle .chev {
  transition: transform 180ms ease;
  font-size: 12px;
  color: var(--ink-3);
}
.length-math-toggle.is-open .chev { transform: rotate(180deg); }
.length-math-body { padding-top: 12px; }
.length-math-body .formula-steps {
  margin: 0;
  padding-left: 20px;
  font-size: var(--text-sm);
  color: var(--ink-2);
}
.length-math-body .formula-steps li { margin-bottom: 6px; }

/* Hide empty breakdown groups (nautical with extras hidden). */
.breakdown-group:has(.breakdown-grid:empty) { display: none; }

/* ─────────────────────────────────────────────────────────────────
   Area converter — scoped styles
   Grouped unit chips, swap divider, copy button, reference hint.
   ───────────────────────────────────────────────────────────────── */

.area-card .unit-group + .unit-group { margin-top: 10px; }
.unit-group-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  margin-bottom: 6px;
}

.swap-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: var(--space-4) 0;
  position: relative;
}
.swap-divider::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--line);
  z-index: 0;
}
.swap-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-full, 999px);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.swap-btn:hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}
.swap-btn:active { transform: scale(0.96); }
.swap-btn span[aria-hidden] { font-size: 16px; line-height: 1; }

/* Big result row with inline copy button. */
.conv-summary__big-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.conv-summary__big-row .conv-summary__big { flex: 1; min-width: 0; }
.copy-btn {
  padding: 4px 10px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 6px);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.copy-btn:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }

/* Real-world reference hint under the big conversion number. */
.conv-reference {
  font-size: 13px;
  color: var(--ink-3);
  font-style: italic;
  margin-top: 2px;
  min-height: 1em;
}

/* Subheads separating metric / imperial grids. */
.breakdown-subhead {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  margin: 12px 0 6px;
}
.breakdown-subhead:first-child { margin-top: 0; }

.breakdown-abbr { color: var(--ink-3); font-weight: 500; }

/* Distinct tint for the selected From vs To row so users can tell them apart. */
.breakdown-row--from { border-left: 3px solid var(--ink-2); }
.breakdown-row--to   { border-left: 3px solid var(--accent); }

/* ═══════════════════════════════════════════════════════════════
   Pentagon calculator — large labeled diagram + bidirectional
   result ↔ diagram hover highlight + legend. Shares .ci-stack /
   .compare / .breakdown / .formula / .ci-worked patterns with
   compound-interest; only the diagram-specific bits live here.
   ═══════════════════════════════════════════════════════════════ */

.breakdown-label .dot--violet { background: #8b5cf6; }

.pent-diagram-section .card-body { padding: var(--space-6, 20px); }

.pent-diagram-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(220px, 1fr);
  gap: var(--space-6, 24px);
  align-items: center;
}
@media (max-width: 720px) {
  .pent-diagram-wrap { grid-template-columns: 1fr; }
}

.pent-diagram {
  width: 100%;
  height: auto;
  max-height: 420px;
  display: block;
  color: var(--ink-2);
}

/* Base strokes — picked up per metric group below. */
.pent-shape        { stroke: var(--ink); }
.pent-circle-R     { stroke: var(--amber, #f59e0b); }
.pent-circle-a     { stroke: #14b8a6; }
.pent-apothem      { stroke: #14b8a6; }
.pent-R            { stroke: var(--amber, #f59e0b); }
.pent-diagonal     { stroke: #8b5cf6; }
.pent-side-highlight { stroke: var(--accent); stroke-linecap: round; opacity: 0; transition: opacity 120ms ease; }
.pent-arc          { stroke: var(--ink-2); }
.pent-vertex       { fill: var(--ink-2); }
.pent-center-dot   { fill: var(--ink); }
.pent-label        { fill: var(--ink); font: 600 14px/1 var(--font-sans, system-ui, sans-serif); transition: font-size 120ms ease, fill 120ms ease; }

/* Hover group gets a lifted stroke + matching label emphasis. */
.pent-g { transition: opacity 120ms ease; cursor: help; }
.pent-g.is-highlight .pent-shape,
.pent-g.is-highlight .pent-diagonal,
.pent-g.is-highlight .pent-apothem,
.pent-g.is-highlight .pent-R,
.pent-g.is-highlight .pent-circle-a,
.pent-g.is-highlight .pent-circle-R,
.pent-g.is-highlight .pent-arc {
  stroke-width: 3.5;
  opacity: 1;
}
.pent-g.is-highlight .pent-side-highlight { opacity: 1; }

.pent-label.is-highlight,
[data-metric].is-highlight .pent-label { font-size: 17px; fill: var(--accent); }

/* When a group is highlighted, dim everything else for clarity. */
.pent-diagram-svg:hover .pent-g:not(.is-highlight) { opacity: 0.55; }
#pent-diagram-svg .pent-g.is-highlight { opacity: 1; }

/* Legend — chips under/beside the diagram, each clickable to copy. */
.pent-legend {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  align-content: center;
}
.pent-legend-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 10px;
  color: var(--ink);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  transition: background 120ms ease, border-color 120ms ease, transform 80ms ease;
}
.pent-legend-item:hover,
.pent-legend-item:focus-visible,
.pent-legend-item.is-highlight {
  background: var(--surface-2, #f8fafc);
  border-color: var(--accent);
  outline: none;
}
.pent-legend-item.is-copied { transform: scale(0.98); border-color: var(--accent); }
.pent-legend-item strong { margin-left: auto; font-variant-numeric: tabular-nums; }

.pent-legend-item .sw {
  width: 12px; height: 12px; border-radius: 3px; flex: none;
}
.pent-legend-item .sw--accent  { background: var(--accent); }
.pent-legend-item .sw--teal    { background: #14b8a6; }
.pent-legend-item .sw--amber   { background: var(--amber, #f59e0b); }
.pent-legend-item .sw--violet  { background: #8b5cf6; }
.pent-legend-item .sw--neutral { background: var(--ink-3, #9ca3af); }

.pent-diagram-note {
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.55;
  margin: var(--space-4, 14px) 0 0;
}

/* Bidirectional highlight on the right rail: when hovering a dimension in
   the SVG, the matching row lifts — and vice versa. */
.pent-row {
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
  border-left: 3px solid transparent;
  padding-left: 10px;
}
.pent-row:hover,
.pent-row:focus-visible,
.pent-row.is-highlight {
  background: var(--surface-2, #f8fafc);
  border-left-color: var(--accent);
  outline: none;
}
.pent-row.is-copied { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.result-sub-item[data-metric] { cursor: pointer; transition: background 120ms ease; }
.result-sub-item[data-metric]:hover,
.result-sub-item[data-metric].is-highlight,
.result-sub-item[data-metric]:focus-visible {
  background: var(--surface-2, #f8fafc);
  outline: none;
}
.result-sub-item[data-metric].is-copied {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

/* Dark mode tuning — keep the stroke colors readable. */
[data-theme='dark'] .pent-shape { stroke: #e5e7eb; }
[data-theme='dark'] .pent-label { fill: #f1f5f9; }
[data-theme='dark'] .pent-legend-item { background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.08); }
[data-theme='dark'] .pent-row:hover,
[data-theme='dark'] .pent-row.is-highlight,
[data-theme='dark'] .result-sub-item[data-metric]:hover,
[data-theme='dark'] .result-sub-item[data-metric].is-highlight { background: rgba(255,255,255,0.04); }

/* ═══════════════════════════════════════════
   Volume converter — two-column From/To + swap,
   chip groups, chip search, recent chips,
   precision toggle, per-row copy button.
   ═══════════════════════════════════════════ */

.conv-grid-2col {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: stretch;
}
.conv-side { margin-top: 0; }
.conv-swap-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 38px;
}
.conv-swap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  white-space: nowrap;
}
.conv-swap:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: rotate(180deg);
}
.conv-swap:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.conv-swap svg { flex: 0 0 auto; }
.conv-swap-label { font-weight: 600; }
@media (max-width: 980px) {
  .conv-grid-2col { grid-template-columns: 1fr; }
  .conv-swap-wrap { padding-top: 0; padding-bottom: 4px; }
  .conv-swap { transform: rotate(90deg); }
  .conv-swap:hover { transform: rotate(270deg); }
  .conv-swap-label { display: none; }
}

/* Chip groups inside a "unit" field. */
.chip-groups {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chip-group { display: flex; flex-direction: column; gap: 6px; }
.chip-group-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
}
.chip-group[hidden] { display: none; }

/* Per-column chip search. */
.chip-search {
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 12px;
  font-family: inherit;
  color: var(--ink);
  width: 140px;
  max-width: 55%;
  outline: none;
  transition: border-color 0.15s;
}
.chip-search:focus { border-color: var(--accent); }
.chip-search::-webkit-search-cancel-button { cursor: pointer; }

/* Aux text centered beneath the readonly "to" value. */
.aux.aux--center {
  display: block;
  text-align: center;
  margin-top: 6px;
  font-size: 12px;
  color: var(--ink-3);
  font-family: var(--font-mono);
}

/* "Copy" mini-button in field-label (e.g., next to Result). */
.copy-mini {
  padding: 2px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.copy-mini:hover { border-color: var(--accent); color: var(--accent); }
.copy-mini.is-copied { border-color: #16a34a; color: #16a34a; }

/* Quick-convert presets row — tighter pill chips. */
.chip-row--presets .chip {
  padding: 5px 12px;
  font-size: 12px;
}

/* Recent conversions section. */
.conv-recent-section .card-link {
  float: right;
  font-size: 11px;
  padding: 2px 8px;
}
.conv-recent-section[hidden] { display: none; }
#vc-recent .chip {
  padding: 5px 12px;
  font-size: 12px;
  font-family: var(--font-mono);
}

/* Precision toggle in hero actions area. */
.vc-precision {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
}
.vc-precision-label {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  padding: 0 8px 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.vc-precision-btn {
  padding: 4px 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  font-family: inherit;
  min-width: 26px;
}
.vc-precision-btn:hover:not(.active) {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.vc-precision-btn.active {
  background: #fff;
  color: var(--ink);
}

/* Grid rows with a trailing copy button. */
.breakdown-grid--copyable .breakdown-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
}
/* Accent rows inside the copyable grid must keep the grid layout and the
   normal row padding — the default .breakdown-row--accent rule shrinks
   padding and uses negative margins which collapses the grid columns. */
.breakdown-grid--copyable .breakdown-row--accent {
  display: grid;
  grid-template-columns: 1fr auto auto;
  padding: 14px 18px;
  margin: 0;
  border-radius: 0;
}
.breakdown-grid--copyable .breakdown-row > .breakdown-label {
  grid-column: 1;
  min-width: 0;
}
.breakdown-grid--copyable .breakdown-row > .breakdown-value {
  grid-column: 2;
  text-align: right;
  white-space: nowrap;
}
.breakdown-copy {
  grid-column: 3;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-3);
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, border-color 0.15s, color 0.15s;
  font-family: inherit;
}
.breakdown-grid--copyable .breakdown-row:hover .breakdown-copy,
.breakdown-copy:focus,
.breakdown-copy.is-copied { opacity: 1; }
.breakdown-copy:hover { border-color: var(--accent); color: var(--accent); }
.breakdown-copy.is-copied { border-color: #16a34a; color: #16a34a; }
@media (max-width: 520px) {
  /* On narrow phones show copy buttons at all times — no hover state. */
  .breakdown-copy { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════
   Mass converter — bespoke controls
   ═══════════════════════════════════════════════════════════════ */

/* Swap button inline with the "From" section title. */
.mc-swap-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.mc-swap-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--surface-2);
}
.mc-swap-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.mc-swap-btn__label { font-size: 12px; }
/* Make the section title able to host the button on the right. */
.form-section-title { display: flex; align-items: center; gap: 8px; }

/* Stepper buttons under the value input. */
.mc-stepper {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.mc-stepper__btn {
  flex: 1 1 auto;
  min-width: 44px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.mc-stepper__btn:hover { border-color: var(--accent); color: var(--accent); }
.mc-stepper__btn:active { background: var(--surface-2); }
.mc-stepper__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Grouped unit chips (Metric / Imperial / Other subheads). */
.mc-unit-group { margin-bottom: 10px; }
.mc-unit-group:last-child { margin-bottom: 0; }
.mc-unit-group__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Preset chips — visually distinct from regular unit chips. */
.chip--preset {
  background: var(--surface-2);
  font-weight: 500;
}
.chip--preset:hover { border-color: var(--accent); }

/* Copy button inside the To-field input-wrap. */
.mc-copy-btn {
  margin-left: 6px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink-3);
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.mc-copy-btn:hover { border-color: var(--accent); color: var(--accent); }
.mc-copy-btn.is-copied { border-color: #16a34a; color: #16a34a; }
.mc-copy-btn__icon { font-size: 14px; line-height: 1; }

/* Keyboard hint line. */
.mc-kbhint {
  margin-top: 10px;
  font-size: 11px;
  color: var(--ink-3);
  text-align: center;
}
.mc-kbhint kbd {
  display: inline-block;
  padding: 1px 5px;
  margin: 0 1px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--surface);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  color: var(--ink-2);
}

/* Grouped breakdown grid — sub-label rows between groups. Horizontal padding
   matches `.breakdown-row` so the group title aligns with the row labels
   below it instead of sitting flush against the card edge. */
.breakdown-grid--grouped .breakdown-group-label {
  grid-column: 1 / -1;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 10px 18px 8px;
  border-bottom: 1px solid var(--border);
  margin-top: 4px;
}
.breakdown-grid--grouped .breakdown-group-label:first-child { margin-top: 0; }

/* Rows become clickable (copy on click). */
.breakdown-grid--grouped .breakdown-row {
  cursor: pointer;
  transition: background 0.12s;
}
.breakdown-grid--grouped .breakdown-row:hover { background: var(--surface-2); }
.breakdown-grid--grouped .breakdown-row.is-copied {
  background: rgba(22, 163, 74, 0.10);
}

/* Inverse conversion line + scientific notation row. */
.conv-summary__inverse {
  margin-top: 6px;
  font-size: 14px;
  color: var(--ink-2);
}
.conv-summary__sci {
  margin-top: 4px;
  font-size: 12px;
  color: var(--ink-3);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.conv-summary__sci[hidden] { display: none; }


/* ═══════════════════════════════════════════════════════════════
   Hexagon calculator — reactive diagram, unit strip, proportion bars
   Reuses .info-tip, .chip-row, .slider-wrap, .result-hero,
   .breakdown-card, .ci-actions, .hero-action, .card-link.
   ═══════════════════════════════════════════════════════════════ */

/* Humanize tag under the measurement input ("≈ a dinner plate"). */
.hex-humanize-wrap {
  margin-top: 6px;
  font-size: 12px;
  color: var(--ink-3);
  font-style: italic;
  min-height: 1em;
}

/* Reactive SVG diagram — pointy/flat orientation, highlight-on-hover. */
.hex-svg { max-width: 280px; overflow: visible; }
.hex-svg .hex-longd,
.hex-svg .hex-shortd,
.hex-svg .hex-apothem,
.hex-svg .hex-circum,
.hex-svg .hex-side {
  transition: opacity 0.18s ease, stroke-width 0.18s ease;
}
.hex-svg[data-highlight="side"]    .hex-side    { opacity: 1; stroke: var(--accent); stroke-width: 4; }
.hex-svg[data-highlight="apothem"] .hex-apothem { opacity: 1; stroke: var(--amber, #f59e0b); stroke-width: 2.5; }
.hex-svg[data-highlight="longd"]   .hex-longd   { opacity: 1; stroke: var(--teal, #0d9488); stroke-width: 2.5; stroke-dasharray: 0; }
.hex-svg[data-highlight="shortd"]  .hex-shortd  { opacity: 1; stroke: var(--rose, #e11d48); stroke-width: 2.5; stroke-dasharray: 0; }
.hex-svg[data-highlight="circum"]  .hex-circum  { opacity: 1; stroke: var(--accent-2, var(--accent)); stroke-width: 2.5; }
.hex-svg[data-highlight="perimeter"] polygon    { stroke: var(--accent); stroke-width: 3; }

/* Legend below the diagram. */
.hex-legend {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 14px;
  font-size: 11px;
  color: var(--ink-3);
}
.hex-legend span { display: inline-flex; align-items: center; gap: 5px; }
.hex-legend-dot {
  display: inline-block;
  width: 10px;
  height: 2px;
  border-radius: 1px;
  background: var(--ink-3);
}
.hex-legend-dot--side     { background: var(--accent); height: 3px; }
.hex-legend-dot--apothem  { background: var(--amber, #f59e0b); }
.hex-legend-dot--longd    { background: var(--teal, #0d9488); }
.hex-legend-dot--shortd   { background: var(--rose, #e11d48); }

/* Unit-conversion strip card. */
.hex-units-card { margin-top: 16px; }
.hex-units-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.hex-unit-cell {
  padding: 10px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 6px);
  background: var(--surface);
  text-align: center;
  min-width: 0;
}
.hex-unit-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  margin-bottom: 4px;
}
.hex-unit-val {
  font-size: 13px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 520px) {
  .hex-units-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Proportion bars — each length relative to long diagonal. */
.hex-bars { display: flex; flex-direction: column; gap: 10px; }
.hex-bar-row {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  transition: background 0.15s ease;
  border-radius: 4px;
}
.hex-bar-row:hover { background: var(--surface-2); }
.hex-bar-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-2);
}
.hex-bar-dot {
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block;
}
.hex-bar-dot--side    { background: var(--accent); }
.hex-bar-dot--apothem { background: var(--amber, #f59e0b); }
.hex-bar-dot--longd   { background: var(--teal, #0d9488); }
.hex-bar-dot--shortd  { background: var(--rose, #e11d48); }
.hex-bar-track {
  height: 8px;
  background: var(--surface-2);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.hex-bar-fill {
  display: block;
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}
.hex-bar-fill--side    { background: var(--accent); }
.hex-bar-fill--apothem { background: var(--amber, #f59e0b); }
.hex-bar-fill--longd   { background: var(--teal, #0d9488); }
.hex-bar-fill--shortd  { background: var(--rose, #e11d48); }
.hex-bar-val {
  font-size: 12px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@media (max-width: 520px) {
  .hex-bar-row { grid-template-columns: 1fr; gap: 4px; }
  .hex-bar-val { justify-self: end; }
}

/* Details disclosure — "Geometry details" collapsed. */
.hex-details {
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 8px);
  background: var(--surface);
}
.hex-details__summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  user-select: none;
  list-style: none;
}
.hex-details__summary::-webkit-details-marker { display: none; }
.hex-details__summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 6px;
  transition: transform 0.15s ease;
  color: var(--ink-3);
}
.hex-details[open] .hex-details__summary::before { transform: rotate(90deg); }
.hex-details__grid { margin-top: 10px; }
.hex-details .result-sub-label { color: var(--ink-3); }
.hex-details .result-sub-value { color: var(--ink); }

/* Share-button label spacing. */
.hex-share-label { display: inline-block; }

/* ═════════════════════════════════════════════════════════════
   Speed converter — grouped chips, hero, equation, recent,
   reference cards, keyboard hint. Reuses .unit-group(__label),
   .unit-swap-wrap/.unit-swap-btn, .input-copy-btn, .compare-grid,
   .breakdown-row--accent, .info-tip, .ci-actions, .hero-action.
   ═════════════════════════════════════════════════════════════ */

.unit-groups { display: flex; flex-direction: column; gap: 10px; }
.unit-groups .unit-group { gap: 4px; }
.unit-groups .unit-group__label { padding-left: 2px; }

/* Stronger emphasis on the active unit chip so it's findable in a group of 8. */
#from-unit .chip.active,
#to-unit   .chip.active {
  box-shadow: 0 0 0 1px var(--accent), inset 0 0 0 1px var(--accent);
}

/* Preset chip row tightens the chip look. */
.chip-row--presets .chip {
  font-size: var(--text-xs);
  padding: 6px 10px;
}

/* Equation under the hero result. */
.sc-equation {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm, 6px);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
  font-size: 13px;
  letter-spacing: 0.01em;
  word-break: break-word;
  line-height: 1.45;
}
[data-theme='light'] .sc-equation {
  background: var(--surface-2, #f4f5f8);
  color: var(--ink-2);
}

/* Hero copy + pin actions side-by-side. */
#sc-hero .result-hero__actions { gap: 8px; flex-wrap: wrap; }
#sc-hero .hero-action.is-copied { color: #9cf0b8; border-color: #9cf0b8; }

/* Share button label flash. */
.sc-share-label { display: inline-block; }

/* Keyboard hint under the action buttons. */
.sc-kbd-hint {
  margin: 10px 0 0;
  font-size: var(--text-xs);
  color: var(--ink-3);
  text-align: center;
}
.sc-kbd-hint kbd {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink-2);
  margin: 0 1px;
}

/* All-units grid: rows are buttons (clickable to copy). Inherit the parent
   .breakdown-row padding (14px 18px) so rows align with the area-converter
   pattern; only neutralise the native button defaults. */
.breakdown-row--btn {
  width: 100%;
  border: none;
  background: var(--surface);
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
  transition: background 120ms ease;
}
.breakdown-row--btn:hover { background: var(--accent-soft); }
/* The generic .breakdown-row--from / --to declare a left border, but
   .breakdown-row--btn { border: none } above wins on source order. Re-apply
   when both classes are present so the accent stripe still shows on buttons. */
.breakdown-row--btn.breakdown-row--from { border-left: 3px solid var(--ink-2); }
.breakdown-row--btn.breakdown-row--to   { border-left: 3px solid var(--accent); }
.breakdown-row--btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.breakdown-row--btn.is-copied {
  background: var(--accent-soft);
}
.breakdown-row--btn.is-copied .breakdown-value::after {
  content: " ✓";
  color: var(--success, #16a34a);
  font-weight: 600;
}

/* Recent conversions card. */
.sc-recent-list { display: flex; flex-direction: column; gap: 4px; }
.sc-recent-item {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 6px);
  background: var(--surface);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--ink-2);
  text-align: left;
  transition: background 120ms ease, border-color 120ms ease;
}
.sc-recent-item:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.sc-recent-from { color: var(--ink-2); }
.sc-recent-to { color: var(--accent); text-align: right; font-weight: 600; }
.sc-recent-arrow { color: var(--ink-3); font-size: 12px; }

/* Reference speed cards (right column). */
.sc-reference-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
@media (max-width: 720px) {
  .sc-reference-grid { grid-template-columns: 1fr; }
}
.sc-reference {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 6px);
  background: var(--surface);
  cursor: pointer;
  text-align: left;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.sc-reference:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  transform: translateY(-1px);
}
.sc-reference:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.sc-reference__name {
  font-size: var(--text-xs);
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
}
.sc-reference__value {
  font-size: var(--text-sm);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* Compare row deltas: keep label tight, value + delta on one line. */
#sc-compare-card .compare-row {
  grid-template-columns: minmax(80px, auto) 1fr auto;
  gap: 10px;
}
#sc-compare-card .compare-delta {
  font-size: var(--text-xs);
  color: var(--ink-3);
}

/* ═══════════════════════════════════════════════════════════════
   Temperature Converter
   Hero theme shifts, vertical thermometer, reference band, grouped
   unit chips, swap button, preset chip tags.
   ═══════════════════════════════════════════════════════════════ */

/* Hero — color-temp theming via data-theme attribute. Gradient behind
   the headline changes tone based on the input's Celsius value. */
.temp-hero { transition: background 480ms ease, box-shadow 480ms ease; }
.temp-hero[data-theme="arctic"]   { background: linear-gradient(160deg, #0f2537 0%, #1e3a5f 55%, #2a4d78 100%); }
.temp-hero[data-theme="freezing"] { background: linear-gradient(160deg, #1e3a8a 0%, #2563eb 55%, #3b82f6 100%); }
.temp-hero[data-theme="cold"]     { background: linear-gradient(160deg, #1e40af 0%, #3b82f6 55%, #60a5fa 100%); }
.temp-hero[data-theme="cool"]     { background: linear-gradient(160deg, #0e7490 0%, #06b6d4 55%, #67e8f9 100%); }
.temp-hero[data-theme="room"]     { background: linear-gradient(160deg, #065f46 0%, #10b981 55%, #6ee7b7 100%); }
.temp-hero[data-theme="warm"]     { background: linear-gradient(160deg, #b45309 0%, #f59e0b 55%, #fcd34d 100%); }
.temp-hero[data-theme="hot"]      { background: linear-gradient(160deg, #9a3412 0%, #ea580c 55%, #fdba74 100%); }
.temp-hero[data-theme="veryhot"]  { background: linear-gradient(160deg, #7f1d1d 0%, #dc2626 55%, #f87171 100%); }
.temp-hero[data-theme="extreme"]  { background: linear-gradient(160deg, #450a0a 0%, #991b1b 50%, #ef4444 100%); }
.temp-hero .result-value,
.temp-hero .result-eyebrow,
.temp-hero .result-tagline,
.temp-hero .result-sub-label,
.temp-hero .result-sub-value { color: #fff; -webkit-text-fill-color: #fff; }
.temp-hero .result-sub-item { background: rgba(255,255,255,0.12); border-radius: 10px; padding: 10px 12px; }
.temp-hero__value { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; }
.temp-hero__arrow {
  font-size: 28px;
  font-weight: 300;
  opacity: 0.85;
  transform: translateY(-1px);
}
.temp-feel-badge { background: rgba(255,255,255,0.22); color: #fff; border: 0; }

/* Copy result button inside hero */
.temp-hero .hero-action {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.35);
  color: #fff;
}
.temp-hero .hero-action:hover { background: rgba(255,255,255,0.26); }

/* ── Thermometer ─────────────────────────────────────────────── */
.thermo-card .card-body { display: flex; justify-content: center; padding-top: 12px; padding-bottom: 14px; }
.thermo {
  display: flex;
  align-items: stretch;
  gap: 14px;
  padding: 0 8px;
}
.thermo__svg {
  width: 64px;
  height: 220px;
  display: block;
}
.thermo__scale {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  padding: 6px 0 30px;
  min-width: 40px;
}

/* ── Reference band ──────────────────────────────────────────── */
.refband-card .card-body { padding-top: 16px; padding-bottom: 22px; }
.refband {
  position: relative;
  height: 96px;
  padding: 0 6px;
}
.refband__track {
  position: absolute;
  left: 0; right: 0;
  top: 28px;
  height: 6px;
  border-radius: 6px;
  background: linear-gradient(90deg,
    #3b82f6 0%,
    #06b6d4 20%,
    #10b981 40%,
    #fde68a 60%,
    #f59e0b 78%,
    #ef4444 100%);
}
.refband__pointer {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  z-index: 2;
  transition: left 260ms cubic-bezier(0.25, 0.9, 0.3, 1.2);
}
.refband__pointer::after {
  content: '';
  display: block;
  width: 2px;
  height: 42px;
  margin: 0 auto;
  background: var(--ink);
}
.refband__pointer-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  background: var(--ink);
  color: var(--surface, #fff);
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
}
.refband__marks {
  position: absolute;
  left: 0; right: 0;
  top: 44px;
  height: 40px;
}
.refband__mark {
  position: absolute;
  transform: translateX(-50%);
  text-align: center;
}
.refband__mark-dot {
  display: block;
  width: 9px;
  height: 9px;
  margin: -4px auto 6px;
  border-radius: 50%;
  background: var(--surface, #fff);
  border: 2px solid var(--ink);
  position: relative;
  z-index: 1;
}
.refband__mark-label {
  display: block;
  font-size: 10px;
  line-height: 1.25;
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.refband__mark-label .mono {
  display: inline-block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
}

/* ── Grouped unit chips (common / scientific) ───────────────── */
.unit-group { display: flex; flex-direction: column; gap: 6px; }
.unit-group__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 2px;
}
.unit-group__label--muted { opacity: 0.75; }
.unit-group .chip .chip-sub {
  display: block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ink-3);
  margin-top: 2px;
}
.unit-group .chip.active .chip-sub { color: rgba(255,255,255,0.85); }

/* ── Swap button ─────────────────────────────────────────────── */
.temp-swap-row {
  display: flex;
  justify-content: center;
  margin: 14px 0 6px;
}
.temp-swap-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--surface-2, #eef2f7);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 180ms ease, transform 180ms ease, border-color 180ms ease;
}
.temp-swap-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.temp-swap-btn__icon {
  font-size: 16px;
  display: inline-block;
  transition: transform 420ms cubic-bezier(0.68, -0.2, 0.27, 1.4);
}
.temp-swap-btn.is-spun .temp-swap-btn__icon { transform: rotate(180deg); }

/* ── Preset chip flash feedback ─────────────────────────────── */
.chip--flash {
  animation: temp-chip-flash 420ms ease-out;
}
@keyframes temp-chip-flash {
  0%   { box-shadow: 0 0 0 0 var(--accent); }
  70%  { box-shadow: 0 0 0 8px rgba(0,0,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
}

/* ── Responsive tweaks ──────────────────────────────────────── */
@media (max-width: 640px) {
  .temp-hero__value { gap: 8px; }
  .temp-hero__arrow { font-size: 22px; }
  .thermo__svg { width: 52px; height: 180px; }
  .thermo__scale { padding-bottom: 22px; font-size: 10px; }
  .refband { height: 110px; }
  .refband__mark-label { font-size: 9px; }
}

/* ═══════════════════════════════════════════════════════════════════
   Square Root calculator — custom primitives
   Proper radical glyph (√) with overline, factor-tree pill strip, and a
   number-line between adjacent perfect squares. Reuses shared
   .result-hero / .breakdown-card / .card / .chip-row.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Radical glyph ── */
.sr-radical {
  display: inline-flex;
  align-items: flex-start;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.sr-radical__sign {
  font-size: 1.15em;
  line-height: 1;
  margin-right: -0.05em;
  transform: translateY(-0.04em);
}
.sr-radical__bar {
  border-top: 2px solid currentColor;
  padding: 0.12em 0.12em 0 0.14em;
  display: inline-block;
}
.sr-radical__deg {
  font-size: 0.55em;
  vertical-align: super;
  margin-right: -0.15em;
  opacity: 0.85;
}
.sr-radical--lg { font-size: 1.8em; }

/* Hero: radical + "= exact" appear on the same line, wrap gracefully. */
.result-hero .sr-radical-host {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.result-hero .sr-radical {
  color: inherit;
  -webkit-text-fill-color: currentColor;
  background: none;
}
.result-hero .sr-radical-host .per {
  font-size: 0.55em;
  font-weight: 600;
  opacity: 0.9;
}

/* ── Factor-tree strip (pill chips) ── */
.sr-factor-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 6px 0 14px;
  min-height: 40px;
}
.sr-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: var(--text-sm);
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--line);
}
.sr-chip--x      { background: var(--surface-2); color: var(--ink-2); }
.sr-chip--square { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.sr-chip--rest   { background: var(--amber-soft); color: var(--amber); border-color: transparent; }
.sr-chip--result { background: var(--accent); color: #fff; border-color: transparent; }
.sr-chip--muted  { background: var(--surface-2); color: var(--ink-3); }
.sr-arrow { color: var(--ink-3); font-weight: 500; font-size: var(--text-sm); }
.sr-op    { color: var(--ink-3); font-weight: 700; padding: 0 2px; }

/* ── Number line between adjacent perfect squares ── */
.sr-numberline {
  position: relative;
  height: 46px;
  margin: 8px 4px 6px;
}
.sr-numberline__track {
  position: absolute;
  top: 22px;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-soft), var(--amber-soft));
  border-radius: 3px;
}
.sr-numberline__end {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sr-numberline__end--lo { left: 0; align-items: flex-start; }
.sr-numberline__end--hi { right: 0; align-items: flex-end; }
.sr-numberline__end .sr-numberline__tick {
  width: 2px;
  height: 16px;
  background: var(--ink-3);
  margin-top: 15px;
}
.sr-numberline__endlabel {
  font-size: var(--text-xs);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  margin-top: 3px;
  font-weight: 600;
}
.sr-numberline__marker {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: left 300ms cubic-bezier(.2,.8,.2,1);
}
.sr-numberline__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--accent-soft);
  margin-top: 14px;
}
.sr-numberline__label {
  font-size: var(--text-xs);
  color: var(--accent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
  background: var(--surface);
  padding: 0 4px;
  border-radius: 3px;
}

/* Highlight the nearby-squares row that matches |x| */
.sr-row-current td {
  font-weight: 700;
  background: var(--accent-soft);
  color: var(--accent);
}

/* Imaginary-result badge tint (base = .ci-delta-badge) */
.ci-delta-badge.sr-badge--imaginary {
  background: var(--rose);
  color: #fff;
}

/* Dark theme tweaks */
[data-theme='dark'] .sr-chip { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.08); color: var(--ink); }
[data-theme='dark'] .sr-chip--x { background: rgba(255,255,255,0.05); }
[data-theme='dark'] .sr-chip--square { background: rgba(46, 93, 78, 0.25); color: #a0d9c4; }
[data-theme='dark'] .sr-chip--rest { background: rgba(212, 136, 58, 0.18); color: #f3c58a; }
[data-theme='dark'] .sr-chip--result { background: var(--accent); color: #fff; }
[data-theme='dark'] .sr-numberline__dot { box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px rgba(46, 93, 78, 0.45); }
[data-theme='dark'] .sr-numberline__label { background: var(--surface); color: var(--accent-2); }
[data-theme='dark'] .sr-row-current td { background: rgba(46, 93, 78, 0.25); color: #a0d9c4; }

/* Small screens */
@media (max-width: 480px) {
  .sr-factor-strip { gap: 6px; }
  .sr-chip { padding: 3px 9px; font-size: var(--text-xs); }
  .result-hero .sr-radical-host { gap: 8px; }
  .sr-numberline__endlabel { font-size: 10px; }
}


/* ═══════════════════════════════════════════════════════════════
   Regular Polygon Calculator — presets, annotated diagram,
   hero-metric chips, efficiency visual, comparison table
   ═══════════════════════════════════════════════════════════════ */

/* Preset shape chips — tight row under "Preset" section. */
.poly-preset-row { flex-wrap: wrap; gap: 6px; }
.poly-preset-row .chip { padding: 6px 12px; font-size: 13px; }

/* Hero metric chips — sit under the big number; compact, full-width. */
.poly-hero-chips {
  margin: 12px 0 16px;
  flex-wrap: wrap;
  gap: 6px;
}
.poly-hero-chips .chip {
  padding: 5px 10px;
  font-size: 12px;
  border-radius: 999px;
}

/* Polygon diagram — a bit taller than the default shape-diagram max-width
   to leave room for the dimension labels on the outside. */
.shape-diagram.poly-svg { max-width: 300px; }

/* Dimension labels — keep legible against the faint fill. */
.poly-svg .poly-label-s,
.poly-svg .poly-label-a,
.poly-svg .poly-label-r {
  font: 700 13px/1 var(--font-sans, system-ui, sans-serif);
  fill: var(--accent, #2563eb);
  paint-order: stroke fill;
  stroke: var(--surface, #fff);
  stroke-width: 3px;
  stroke-linejoin: round;
}
.poly-svg .poly-side  { stroke: var(--accent, #2563eb); }
.poly-svg .poly-apothem { stroke: var(--accent, #2563eb); }
.poly-svg .poly-circum  { stroke: var(--ink-2); }

/* Annotations toggle — hide all labels + dimension lines when "off". */
.poly-svg[data-annotations="off"] #poly-diagram-incircle,
.poly-svg[data-annotations="off"] #poly-diagram-circumcircle,
.poly-svg[data-annotations="off"] #poly-diagram-circumradius,
.poly-svg[data-annotations="off"] #poly-diagram-apothem,
.poly-svg[data-annotations="off"] #poly-diagram-side,
.poly-svg[data-annotations="off"] .poly-label-s,
.poly-svg[data-annotations="off"] .poly-label-a,
.poly-svg[data-annotations="off"] .poly-label-r {
  display: none;
}

/* Diagram legend — small colored dots below the SVG. */
.poly-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 10px;
  font-size: var(--text-xs);
  color: var(--ink-2);
}
.poly-legend-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
}
.poly-legend-dot--side    { background: var(--accent, #2563eb); }
.poly-legend-dot--apothem { background: var(--accent, #2563eb); opacity: .7; }
.poly-legend-dot--circum  { background: var(--ink-2); opacity: .7; }

/* Humanize aux row — sits under the main input. */
.poly-humanize-wrap {
  margin-top: 8px;
  font-size: var(--text-xs);
  color: var(--ink-3);
}

/* Comparison table row highlight — current n stands out. */
.poly-compare-table .poly-compare-row--current {
  background: color-mix(in srgb, var(--accent, #2563eb) 8%, transparent);
  font-weight: 600;
}
.poly-compare-table .poly-compare-row--current td:first-child {
  border-left: 3px solid var(--accent, #2563eb);
}

/* Comparison-card delta row colors reuse the global .delta--good / --bad. */
#poly-compare-card .compare-row {
  grid-template-columns: minmax(80px, auto) 1fr auto;
  gap: 10px;
}
#poly-compare-card .compare-delta { font-size: var(--text-xs); }

/* Efficiency note — small supporting sentence under the stack bar. */
.poly-eff-note { color: var(--ink-3); font-size: var(--text-xs); }

/* ═══════════════════════════════════════════════════════════════
   Cube Calculator — presets, isometric diagram with annotations,
   hero metric chips, alt-unit row, volume-intuition card,
   scale comparison table (square-cube law)
   ═══════════════════════════════════════════════════════════════ */

/* Preset size-intuition chips. */
.cube-preset-row { flex-wrap: wrap; gap: 6px; }
.cube-preset-row .chip { padding: 6px 12px; font-size: 13px; }

/* Hero metric chips — compact, full-width row below the big number. */
.cube-hero-chips { margin: 12px 0 14px; flex-wrap: wrap; gap: 6px; }
.cube-hero-chips .chip { padding: 5px 10px; font-size: 12px; border-radius: 999px; }

/* Alt-unit row — 4 side-by-side tiles so users can scan across units. */
.cube-alt-units {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 4px 0 14px;
}
.cube-alt-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 6px 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  min-width: 0;
}
.cube-alt-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  font-weight: 600;
}
.cube-alt-value {
  font-size: 13px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

/* Cube diagram — a touch wider than the default shape card. */
.shape-diagram.cube-svg { max-width: 320px; }

/* Dimension labels — bold with a halo so they stay readable over the faint face fill. */
.cube-svg .cube-label-a,
.cube-svg .cube-label-d,
.cube-svg .cube-label-f {
  font: 700 12px/1 var(--font-sans, system-ui, sans-serif);
  fill: var(--accent, #2563eb);
  paint-order: stroke fill;
  stroke: var(--surface, #fff);
  stroke-width: 3px;
  stroke-linejoin: round;
}

/* Annotations toggle — hide diagonals + labels when off. */
.cube-svg[data-annotations="off"] #cube-space-diag,
.cube-svg[data-annotations="off"] #cube-face-diag,
.cube-svg[data-annotations="off"] .cube-label-a,
.cube-svg[data-annotations="off"] .cube-label-d,
.cube-svg[data-annotations="off"] .cube-label-f {
  display: none;
}

/* Diagram legend — small colored dots below the SVG. */
.cube-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 10px;
  font-size: var(--text-xs);
  color: var(--ink-2);
}
.cube-legend-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
}
.cube-legend-dot--edge  { background: currentColor; opacity: .65; }
.cube-legend-dot--face  { background: var(--accent, #2563eb); opacity: .55; }
.cube-legend-dot--space { background: var(--accent, #2563eb); }

/* Humanize aux under the main input. */
.cube-humanize-wrap {
  margin-top: 8px;
  font-size: var(--text-xs);
  color: var(--ink-3);
}

/* Volume-intuition stack bar sits below the grid with a left→right fill. */
.cube-holds-bar { margin-top: 10px; }
.cube-holds-note { color: var(--ink-3); font-size: var(--text-xs); }

/* Scale-comparison table — compact font so the 6 columns fit comfortably. */
.cube-compare-table { font-size: 0.82rem; }
.cube-compare-table th,
.cube-compare-table td { padding: 6px 10px; }
.cube-compare-table th { font-size: 0.78rem; line-height: 1.25; }
/* Scale-comparison highlight — current row sits out with an accent edge. */
.cube-compare-table .cube-compare-row--current {
  background: color-mix(in srgb, var(--accent, #2563eb) 8%, transparent);
  font-weight: 600;
}
.cube-compare-table .cube-compare-row--current td:first-child {
  border-left: 3px solid var(--accent, #2563eb);
}
.cube-compare-table th.amort-progress-col,
.cube-compare-table td.amort-progress-col { min-width: 160px; }
.cube-compare-table .amort-progress-col .amort-progress {
  min-width: 0;
}
.cube-compare-note {
  color: var(--ink-3);
  font-size: var(--text-xs);
  margin-top: 10px;
}

/* Compare-card delta row layout (reuses delta--good / --bad globals). */
#cube-compare-card .compare-row {
  grid-template-columns: minmax(80px, auto) 1fr auto;
  gap: 10px;
}
#cube-compare-card .compare-delta { font-size: var(--text-xs); }

/* Responsive: collapse alt-unit row to 2 columns on narrow screens. */
@media (max-width: 520px) {
  .cube-alt-units { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════
   Angle Converter
   Hero with arrow, protractor dial, DMS composition, trig card.
   Reuses the temp swap-btn / unit-group / chip--flash styles.
   ═══════════════════════════════════════════════════════════════ */

.angle-hero {
  background: linear-gradient(160deg, #4c1d95 0%, #7c3aed 55%, #ec4899 100%);
  transition: background 480ms ease, box-shadow 480ms ease;
}
.angle-hero .result-value,
.angle-hero .result-eyebrow,
.angle-hero .result-tagline,
.angle-hero .result-sub-label,
.angle-hero .result-sub-value { color: #fff; -webkit-text-fill-color: #fff; }
.angle-hero .result-sub-item { background: rgba(255,255,255,0.12); border-radius: 10px; padding: 10px 12px; }
.angle-hero__value { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; }
.angle-hero__arrow {
  font-size: 28px;
  font-weight: 300;
  opacity: 0.85;
  transform: translateY(-1px);
}
/* Re-assert with !important AND a 2-class selector so the global
   `.result-hero .ci-delta-badge` rule (which forces a solid white pill with
   --accent text) doesn't win on specificity. Over a purple/pink gradient that
   rule ends up rendering as invisible white text (via inherited
   -webkit-text-fill-color) on a white pill. */
.angle-hero .angle-quadrant-badge {
  background: rgba(255,255,255,0.22) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border: 0;
}
.angle-hero .hero-action {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.35);
  color: #fff;
}
.angle-hero .hero-action:hover { background: rgba(255,255,255,0.26); }

/* ── Protractor dial ─────────────────────────────────────────── */
.dial-card .card-body { display: flex; justify-content: center; padding: 16px 12px 20px; }
.dial {
  width: 100%;
  max-width: 280px;
  aspect-ratio: 1;
  outline: none;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.dial:focus-visible { box-shadow: 0 0 0 3px var(--accent-soft, rgba(124,58,237,0.25)); border-radius: 50%; }
.dial.is-dragging { cursor: grabbing; }
.dial__svg { display: block; width: 100%; height: 100%; }
#dial-handle {
  transition: r 120ms ease;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.18));
}

/* ── DMS composition ─────────────────────────────────────────── */
.dms-card .card-body { padding: 18px 16px 22px; }
.dms-split {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.dms-part {
  background: var(--surface-2, #eef2f7);
  border-radius: 10px;
  padding: 12px 8px 8px;
}
.dms-part__num {
  font-size: 24px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.dms-part__unit {
  margin-top: 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  font-weight: 600;
}
.dms-sep {
  font-size: 18px;
  color: var(--ink-3);
  line-height: 1;
}

/* ── Trig reference ──────────────────────────────────────────── */
.trig-card .card-body { padding: 16px; }
.trig-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.trig-cell {
  background: var(--surface-2, #eef2f7);
  border-radius: 10px;
  padding: 10px 12px;
  text-align: center;
}
.trig-cell__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 4px;
}
.trig-cell__value {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.trig-coterm {
  margin-top: 12px;
  font-size: 12px;
  color: var(--ink-3);
  text-align: center;
}
.trig-coterm .mono { color: var(--ink); }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 640px) {
  .angle-hero__arrow { font-size: 22px; }
  .angle-hero__value { gap: 8px; }
  .dial { max-width: 220px; }
  .dms-part__num { font-size: 20px; }
  .trig-grid { gap: 6px; }
  .trig-cell { padding: 8px 6px; }
  .trig-cell__value { font-size: 13px; }
}

/* ═══════════════════════════════════════════════════════════════════
   Nth Root calculator — parity pill + parity strip
   Small additions on top of the shared .sr-radical / .sr-chip /
   .sr-factor-strip primitives. The parity strip is a clickable grid
   showing ⁿ√x for n = 2..6 so users can see the pattern at a glance.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Parity pill beside the n input ── */
.nr-parity-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  margin-left: 8px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: var(--surface-2);
  color: var(--ink-3);
  border: 1px solid var(--line);
}
.nr-parity-pill[data-parity="even"] {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: transparent;
}
.nr-parity-pill[data-parity="odd"] {
  background: var(--amber-soft);
  color: var(--amber);
  border-color: transparent;
}
.nr-parity-pill[data-parity="warn"] {
  background: var(--rose-soft);
  color: var(--rose);
  border-color: transparent;
}

/* ── Parity strip: grid of clickable n-cells ── */
.nr-parity-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.nr-parity-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 10px);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
  font: inherit;
  color: inherit;
}
.nr-parity-cell:hover {
  background: var(--surface-2);
  border-color: var(--line-strong);
  transform: translateY(-1px);
}
.nr-parity-cell:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.nr-parity-cell.is-current {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.nr-parity-cell.is-current .nr-parity-cell__value { color: var(--accent); }
.nr-parity-cell.is-imaginary {
  background: var(--rose-soft);
  border-color: transparent;
}
.nr-parity-cell.is-imaginary .nr-parity-cell__value { color: var(--rose); }
.nr-parity-cell.is-perfect .nr-parity-cell__value { color: var(--accent); font-weight: 700; }
.nr-parity-cell__radical {
  font-size: 16px;
  line-height: 1;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.nr-parity-cell__value {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.nr-parity-cell__parity {
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.02em;
}

/* Dark-theme tweaks */
[data-theme='dark'] .nr-parity-cell { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.08); }
[data-theme='dark'] .nr-parity-cell:hover { background: rgba(255,255,255,0.06); }
[data-theme='dark'] .nr-parity-cell.is-current { background: rgba(46, 93, 78, 0.25); border-color: var(--accent); }
[data-theme='dark'] .nr-parity-cell.is-imaginary { background: rgba(177, 74, 94, 0.18); }
[data-theme='dark'] .nr-parity-pill[data-parity="even"] { background: rgba(46, 93, 78, 0.25); color: #a0d9c4; }
[data-theme='dark'] .nr-parity-pill[data-parity="odd"] { background: rgba(212, 136, 58, 0.18); color: #f3c58a; }
[data-theme='dark'] .nr-parity-pill[data-parity="warn"] { background: rgba(177, 74, 94, 0.25); color: #f3a9b6; }

/* Small screens: collapse parity strip to 2 columns so labels stay readable. */
@media (max-width: 480px) {
  .nr-parity-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .nr-parity-cell { padding: 8px 4px; }
  .nr-parity-cell__radical { font-size: 14px; }
}

/* ════════════════════════════════════════════════════════════════
   Sine / Cosine / Tangent / Cotangent — trig calculator UI
   ════════════════════════════════════════════════════════════════ */

/* Peer tabs above the inputs card */
.trig-peer-tabs {
  display: flex;
  gap: 4px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 4px;
  margin-bottom: var(--space-4);
  width: fit-content;
}
.trig-peer-tab {
  padding: 6px 16px;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--ink-2);
  text-decoration: none;
  border-radius: 10px;
  font-family: var(--font-mono);
  letter-spacing: .02em;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.trig-peer-tab:hover { background: var(--surface); color: var(--ink); }
.trig-peer-tab.is-active {
  background: var(--accent);
  color: #fff;
  cursor: default;
}

/* Reference table — clickable rows */
.sin-ref-table tbody tr[data-deg] {
  cursor: pointer;
  transition: background var(--transition-fast);
}
.sin-ref-table tbody tr[data-deg]:hover {
  background: var(--accent-soft);
}
.sin-ref-table tbody tr[data-deg]:focus {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.sin-ref-table tbody tr[data-deg] td:first-child {
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
  font-weight: var(--font-medium);
}

/* Exact-value badge in the hero */
.sin-exact-badge {
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid rgba(46, 93, 78, 0.18);
  font-family: var(--font-mono);
}

/* Unit circle visualization */
.trig-viz {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.trig-unit-circle {
  width: 100%;
  max-width: 320px;
  height: auto;
  display: block;
}
.trig-quad {
  fill: var(--surface-2);
  opacity: 0;
}
.trig-quad--I   { fill: rgba(46, 93, 78, 0.05); opacity: 1; }
.trig-quad--II  { fill: rgba(212, 136, 58, 0.05); opacity: 1; }
.trig-quad--III { fill: rgba(177, 74, 94, 0.05); opacity: 1; }
.trig-quad--IV  { fill: rgba(42, 133, 133, 0.05); opacity: 1; }

.trig-axis {
  stroke: var(--line-strong);
  stroke-width: 1;
}
.trig-circle {
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 1.5;
}
.trig-tick {
  stroke: var(--ink-3);
  stroke-width: 1;
}
.trig-arc {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  opacity: 0.6;
}
.trig-radius {
  stroke: var(--accent);
  stroke-width: 2.5;
  transition: x2 .12s ease, y2 .12s ease;
}
.trig-drop {
  stroke-width: 2;
  stroke-dasharray: 4 3;
  fill: none;
}
.trig-drop--sin { stroke: var(--rose); }
.trig-drop--cos { stroke: var(--teal); }
.trig-point {
  fill: var(--accent);
  stroke: #fff;
  stroke-width: 2;
  transition: cx .12s ease, cy .12s ease;
}
.trig-point-label {
  font-family: var(--font-mono);
  font-size: 10px;
  fill: var(--ink-2);
}
.trig-axis-label {
  font-family: var(--font-mono);
  font-size: 11px;
  fill: var(--ink-3);
}
.trig-viz-legend {
  display: flex;
  gap: 16px;
  font-size: var(--text-xs);
  color: var(--ink-2);
  font-family: var(--font-mono);
}
.trig-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.trig-legend-dot {
  display: inline-block;
  width: 10px;
  height: 2px;
  border-radius: 2px;
}
.trig-legend-dot--sin { background: var(--rose); }
.trig-legend-dot--cos { background: var(--teal); }

/* Sine-wave plot */
.trig-wave-wrap {
  width: 100%;
}
.trig-wave {
  width: 100%;
  height: 120px;
  display: block;
}
.trig-wave-grid {
  stroke: var(--line);
  stroke-width: 1;
}
.trig-wave-grid--faint {
  stroke: var(--line);
  stroke-width: 0.5;
  stroke-dasharray: 2 3;
}
.trig-wave-path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
}
.trig-wave-marker {
  stroke: var(--rose);
  stroke-width: 1.5;
  stroke-dasharray: 3 2;
  opacity: 0.7;
}
.trig-wave-dot {
  fill: var(--rose);
  stroke: #fff;
  stroke-width: 1.5;
  transition: cx .12s ease, cy .12s ease;
}
.trig-wave-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-3);
}

/* Dark theme tweaks */
[data-theme='dark'] .trig-peer-tabs { background: rgba(255,255,255,0.04); }
[data-theme='dark'] .trig-quad--I   { fill: rgba(74, 134, 114, 0.10); }
[data-theme='dark'] .trig-quad--II  { fill: rgba(212, 136, 58, 0.10); }
[data-theme='dark'] .trig-quad--III { fill: rgba(243, 169, 182, 0.08); }
[data-theme='dark'] .trig-quad--IV  { fill: rgba(108, 191, 191, 0.10); }
[data-theme='dark'] .sin-ref-table tbody tr[data-deg]:hover { background: rgba(74, 134, 114, 0.12); }

/* Mobile: tighter spacing */
@media (max-width: 640px) {
  .trig-unit-circle { max-width: 260px; }
  .trig-peer-tab { padding: 6px 12px; }
}

/* ═══════════════════════════════════════════════════════════════
   Pressure Converter
   Hero with arrow, analog gauge dial, reference band, equivalents,
   gauge/absolute toggle. Reuses temp swap-btn / unit-group /
   chip--flash / refband__* styles.
   ═══════════════════════════════════════════════════════════════ */

.pressure-hero { transition: background 480ms ease, box-shadow 480ms ease; }
.pressure-hero[data-theme="vacuum"]     { background: linear-gradient(160deg, #0b1220 0%, #1e293b 55%, #334155 100%); }
.pressure-hero[data-theme="low"]        { background: linear-gradient(160deg, #0e7490 0%, #0891b2 55%, #22d3ee 100%); }
.pressure-hero[data-theme="atm"]        { background: linear-gradient(160deg, #065f46 0%, #10b981 55%, #6ee7b7 100%); }
.pressure-hero[data-theme="tire"]       { background: linear-gradient(160deg, #1e40af 0%, #3b82f6 55%, #60a5fa 100%); }
.pressure-hero[data-theme="industrial"] { background: linear-gradient(160deg, #b45309 0%, #f59e0b 55%, #fcd34d 100%); }
.pressure-hero[data-theme="high"]       { background: linear-gradient(160deg, #9a3412 0%, #ea580c 55%, #fb923c 100%); }
.pressure-hero[data-theme="extreme"]    { background: linear-gradient(160deg, #450a0a 0%, #991b1b 50%, #ef4444 100%); }

.pressure-hero .result-value,
.pressure-hero .result-eyebrow,
.pressure-hero .result-tagline,
.pressure-hero .result-sub-label,
.pressure-hero .result-sub-value { color: #fff; -webkit-text-fill-color: #fff; }
.pressure-hero .result-sub-item { background: rgba(255,255,255,0.12); border-radius: 10px; padding: 10px 12px; }
.pressure-hero__value { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; }
.pressure-hero__arrow {
  font-size: 28px;
  font-weight: 300;
  opacity: 0.85;
  transform: translateY(-1px);
}
/* Re-assert with !important so the global .ci-delta-badge override (which
   forces a solid-white pill with --accent text) doesn't apply on the
   coloured pressure hero — over a blue/red gradient that ends up rendering
   as invisible white text on a white pill. */
.pressure-hero .pressure-context-badge {
  background: rgba(255,255,255,0.22) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border: 0;
}
.pressure-hero .hero-action {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.35);
  color: #fff;
}
.pressure-hero .hero-action:hover { background: rgba(255,255,255,0.26); }

/* ── Analog gauge ────────────────────────────────────────────── */
.pressure-gauge-card .card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 12px 18px;
}
.pressure-gauge {
  width: 100%;
  max-width: 320px;
  outline: none;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.pressure-gauge:focus-visible {
  box-shadow: 0 0 0 3px var(--accent-soft, rgba(124,58,237,0.25));
  border-radius: 12px;
}
.pressure-gauge.is-dragging { cursor: grabbing; }
.pressure-gauge__svg {
  display: block;
  width: 100%;
  height: auto;
}
#pressure-needle {
  transition: none; /* update is already on RAF; transitions look sluggish */
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
}
.pressure-gauge__readout {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  background: var(--surface-2, #eef2f7);
  padding: 4px 12px;
  border-radius: 999px;
}

/* ── Reference band specific to pressure (marks are denser) ── */
.refband--pressure .refband__mark-label { font-size: 9px; }
.refband--pressure .refband__mark-label .mono { font-size: 10px; }
.refband__track--pressure {
  background: linear-gradient(90deg,
    #1e293b 0%,
    #10b981 8%,
    #3b82f6 22%,
    #f59e0b 50%,
    #ef4444 100%);
}

/* ── Equivalents card ────────────────────────────────────────── */
.equiv-card .card-body { padding: 14px 16px 18px; }
.equiv-grid { display: flex; flex-direction: column; gap: 10px; }
.equiv-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface-2, #eef2f7);
  border-radius: 10px;
}
.equiv-label {
  font-size: 13px;
  color: var(--ink);
  font-weight: 600;
}
.equiv-label .aux {
  display: inline-block;
  margin-left: 4px;
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-3);
}
.equiv-value {
  font-size: 14px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 640px) {
  .pressure-hero__arrow { font-size: 22px; }
  .pressure-hero__value { gap: 8px; }
  .pressure-gauge { max-width: 260px; }
  .equiv-row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .equiv-value { text-align: left; }
}

/* ═══════════════════════════════════════════════════════════════
   Cuboid Calculator — 3-axis inputs, ratio lock, swap buttons,
   proportional isometric diagram, alt-unit row, aspect-ratio bar,
   SA composition, fit-check table
   ═══════════════════════════════════════════════════════════════ */

/* Preset chips — wider per chip because labels include dimensions. */
.cuboid-preset-row { flex-wrap: wrap; gap: 6px; }
.cuboid-preset-row .chip { padding: 6px 12px; font-size: 13px; }

/* Hero metric chips — compact, full-width row below the big number. */
.cuboid-hero-chips { margin: 12px 0 14px; flex-wrap: wrap; gap: 6px; }
.cuboid-hero-chips .chip { padding: 5px 10px; font-size: 12px; border-radius: 999px; }

/* Face-diagonal chips inside the diagram card header. */
.cuboid-face-chips { gap: 4px; }
.cuboid-face-chips .chip { padding: 4px 8px; font-size: 11px; border-radius: 999px; }

/* Ratio-lock button sits in the measurements section heading. */
.cuboid-lock-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  margin-left: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 160ms, background 160ms, color 160ms;
}
.cuboid-lock-btn:hover {
  border-color: var(--accent, #2563eb);
  color: var(--accent, #2563eb);
}
.cuboid-lock-btn.is-on {
  background: color-mix(in srgb, var(--accent, #2563eb) 12%, transparent);
  border-color: var(--accent, #2563eb);
  color: var(--accent, #2563eb);
}
.cuboid-lock-icon { font-size: 14px; }

/* Swap buttons — small pill, inline with the unit toggle row. */
.cuboid-swap-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.cuboid-swap-btn {
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color 160ms, color 160ms;
}
.cuboid-swap-btn:hover {
  border-color: var(--accent, #2563eb);
  color: var(--accent, #2563eb);
}

/* Alt-unit row — 4-tile volume grid matching the cube's. */
.cuboid-alt-units {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 4px 0 14px;
}
.cuboid-alt-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 6px 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  min-width: 0;
}
.cuboid-alt-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  font-weight: 600;
}
.cuboid-alt-value {
  font-size: 13px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

/* Cuboid diagram — a little wider than cube since it's non-square. */
.shape-diagram.cuboid-svg { max-width: 360px; }

.cuboid-svg .cuboid-label,
.cuboid-svg .cuboid-label-diag {
  font: 700 12px/1 var(--font-sans, system-ui, sans-serif);
  fill: var(--accent, #2563eb);
  paint-order: stroke fill;
  stroke: var(--surface, #fff);
  stroke-width: 3px;
  stroke-linejoin: round;
}
.cuboid-svg .cuboid-label-diag { fill: var(--accent, #2563eb); font-size: 11px; }

.cuboid-svg[data-annotations="off"] #cuboid-space-diag,
.cuboid-svg[data-annotations="off"] #cuboid-face-diag,
.cuboid-svg[data-annotations="off"] #cuboid-hidden-1,
.cuboid-svg[data-annotations="off"] #cuboid-hidden-2,
.cuboid-svg[data-annotations="off"] #cuboid-hidden-3,
.cuboid-svg[data-annotations="off"] .cuboid-label,
.cuboid-svg[data-annotations="off"] .cuboid-label-diag {
  display: none;
}

.cuboid-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 10px;
  font-size: var(--text-xs);
  color: var(--ink-2);
}
.cuboid-legend-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
}
.cuboid-legend-dot--edge  { background: currentColor; opacity: .65; }
.cuboid-legend-dot--face  { background: var(--accent, #2563eb); opacity: .55; }
.cuboid-legend-dot--space { background: var(--accent, #2563eb); }

/* Aspect-ratio bar — 3 colored segments that sum to 100%. */
.cuboid-aspect-bar { margin: 2px 0 10px; }
.cuboid-aspect-seg--l { background: var(--accent, #2563eb); }
.cuboid-aspect-seg--w { background: #14b8a6; }
.cuboid-aspect-seg--h { background: var(--amber, #f59e0b); }
.cuboid-aspect-legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: var(--text-xs);
  color: var(--ink-2);
}
.cuboid-aspect-legend .dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
}
.cuboid-aspect-dot--l { background: var(--accent, #2563eb); }
.cuboid-aspect-dot--w { background: #14b8a6; }
.cuboid-aspect-dot--h { background: var(--amber, #f59e0b); }
.cuboid-aspect-note { color: var(--ink-3); font-size: var(--text-xs); }

/* SA composition bar — reuses ci-stack-seg colors. */
.cuboid-sa-bar { margin-top: 10px; }
.cuboid-sa-note { color: var(--ink-3); font-size: var(--text-xs); }
.cuboid-holds-bar { margin-top: 10px; }

/* Fit-check table — item dims beneath label in a small aux style. */
.cuboid-fit-dims {
  font-size: var(--text-xs);
  color: var(--ink-3);
  font-weight: 400;
  margin-top: 2px;
}
.cuboid-fit-note {
  color: var(--ink-3);
  font-size: var(--text-xs);
  margin-top: 10px;
}

/* Compare-card delta row layout — reuses delta--good / delta--bad globals. */
#cuboid-compare-card .compare-row {
  grid-template-columns: minmax(80px, auto) 1fr auto;
  gap: 10px;
}
#cuboid-compare-card .compare-delta { font-size: var(--text-xs); }

/* Card-header __actions wrapper — groups chips + toggle in the shape card header. */
.card-header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Responsive — collapse alt-unit + preset row on narrow screens. */
@media (max-width: 520px) {
  .cuboid-alt-units { grid-template-columns: repeat(2, 1fr); }
  .cuboid-preset-row .chip { font-size: 12px; padding: 5px 10px; }
}

/* ═══════════════════════════════════════════
   Power Converter (en/unit-converters/power-converter)
   ─────────────────────────────────────────────
   Polished UX components layered on top of the shared
   .card / .chip-row / .breakdown-grid / .result-hero system.
   ═══════════════════════════════════════════ */

/* Subheader above each grouped chip-row (Metric / Imperial). */
.pc-unit-group-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 10px 0 6px;
}
.pc-unit-group-label:first-child { margin-top: 0; }

/* Swap row sits between From and To, centered. */
.pc-swap-row {
  display: flex;
  justify-content: center;
  margin: -2px 0 14px;
  position: relative;
}
.pc-swap-row::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: var(--line);
  z-index: 0;
}
.pc-swap {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink-2);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s, transform 0.32s;
  font-family: inherit;
}
.pc-swap:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.pc-swap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pc-swap.is-flipping { transform: rotate(180deg); }
.pc-swap svg { transition: transform 0.32s; }

/* Quick-pick presets — chips with a small value pill. */
.pc-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pc-preset {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  font-family: inherit;
  line-height: 1.2;
}
.pc-preset:hover { border-color: var(--accent); color: var(--ink); background: var(--accent-soft); }
.pc-preset:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pc-preset span {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-3);
  background: var(--surface-2);
  padding: 1px 6px;
  border-radius: 4px;
}

/* Same shape as .ci-actions, just namespaced for tweakability. */
.pc-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }

/* Validation / advisory zone — same shape as .ci-warning. */
.pc-warning {
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.25);
  color: #92400e;
  font-size: 12.5px;
  border-radius: var(--radius-md);
  line-height: 1.4;
}
[data-theme='dark'] .pc-warning { color: #fcd34d; }

/* Recent conversions list. */
.pc-recent { margin-top: 16px; }
.pc-recent__heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.pc-recent__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pc-recent-item {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
  font-size: 12.5px;
  text-align: left;
  font-family: inherit;
  color: var(--ink-2);
  transition: border-color 0.15s, background 0.15s;
}
.pc-recent-item:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.pc-recent-arrow { color: var(--ink-3); font-size: 11px; text-align: center; }

/* All-units breakdown — extends .breakdown-row with a magnitude bar
   and a copy affordance. The base row uses a 1fr/auto grid; we move
   to a 1fr/auto/120px/24px grid so the bar and copy button slot in.
   `container-type` lets the narrow-container rule below kick in based on
   the actual grid width — the result panel is sidebar-narrow even at
   desktop viewport widths, so a viewport @media query alone leaves the
   label column squeezed to a few pixels with text overflowing the cell. */
.pc-grid {
  container-type: inline-size;
  container-name: pc-grid;
}
.pc-grid .breakdown-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(60px, 120px) 24px;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: background 0.12s;
}
.pc-grid .breakdown-row:hover { background: var(--surface-2); }
.pc-grid .breakdown-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: 4px;
}
.pc-row__abbr {
  color: var(--ink-3);
  font-size: 11.5px;
  font-weight: 500;
  margin-left: 4px;
}
.pc-mag {
  height: 4px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.pc-mag span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2, var(--accent)));
  border-radius: 999px;
  transition: width 0.25s ease;
}
.pc-grid .breakdown-row--accent .pc-mag span {
  background: linear-gradient(90deg, #f59e0b, #f97316);
}
.pc-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-3);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pc-grid .breakdown-row:hover .pc-copy { color: var(--accent); }
.pc-copy:hover { background: var(--surface); border-color: var(--line-strong); color: var(--accent); }

/* Reference-table closest-match highlight. */
#pc-ref-body tr.pc-ref--match {
  background: var(--accent-soft);
}
#pc-ref-body tr.pc-ref--match td { color: var(--ink); font-weight: 600; }

/* Make the hero result number a touch larger here — converter values
   are short, so we can afford a bigger focal point than the financial
   calculators that often render multi-line currency strings. */
.result-hero #pc-result-value { font-size: 56px; line-height: 1.05; }
@media (max-width: 720px) {
  .result-hero #pc-result-value { font-size: 44px; }
}

/* Narrow-container tightening — applies whenever the grid itself is
   narrow, regardless of viewport (the result panel is sidebar-narrow at
   most desktop widths). */
@container pc-grid (max-width: 420px) {
  .pc-grid .breakdown-row {
    grid-template-columns: minmax(0, 1fr) auto 24px;
    grid-template-areas:
      "label value copy"
      "bar bar bar";
    row-gap: 4px;
  }
  .pc-grid .breakdown-label { grid-area: label; }
  .pc-grid .breakdown-value { grid-area: value; }
  .pc-mag { grid-area: bar; }
  .pc-copy { grid-area: copy; justify-self: end; }
}

/* ==============================================================
   Cosine calculator — unit-circle SVG, wave SVG, reference highlight.
   Reuses .card, .result-hero, .breakdown-*, .chip-row, .ci-*.
   ============================================================== */

.unit-circle-card .card-body,
.cos-wave-card .card-body { padding-top: 18px; }

.unit-circle-svg {
  display: block;
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  font: 500 10px var(--font-sans, system-ui, sans-serif);
}
.unit-circle-svg .uc-axis { stroke: var(--line-strong); stroke-width: 1; }
.unit-circle-svg .uc-circle { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }
.unit-circle-svg .uc-qlabel { fill: var(--ink-3, var(--ink-2)); font-size: 11px; text-anchor: middle; opacity: .55; }
.unit-circle-svg .uc-proj { stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
.unit-circle-svg .uc-drop { stroke: var(--ink-3, var(--ink-2)); stroke-width: 1; stroke-dasharray: 2 3; opacity: .55; }
.unit-circle-svg .uc-radius { stroke: var(--ink-2); stroke-width: 1.5; }
.unit-circle-svg .uc-arc { fill: none; stroke: var(--amber, #f59e0b); stroke-width: 1.5; }
.unit-circle-svg .uc-point { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.unit-circle-svg .uc-point-label { fill: var(--ink); font-size: 10px; font-family: var(--font-mono); }

.unit-circle-legend {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--ink-2);
}
.uc-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.uc-dot { width: 10px; height: 3px; border-radius: 2px; }
.uc-dot--cos { background: var(--accent); }
.uc-dot--sin { background: var(--amber, #f59e0b); }

.cos-wave-svg {
  display: block;
  width: 100%;
  height: 140px;
  font: 500 10px var(--font-sans, system-ui, sans-serif);
}
.cos-wave-svg .cw-axis { stroke: var(--line-strong); stroke-width: 1; }
.cos-wave-svg .cw-grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 3; }
.cos-wave-svg .cw-ticks line { stroke: var(--line-strong); stroke-width: 1; }
.cos-wave-svg .cw-ticks text { fill: var(--ink-3, var(--ink-2)); text-anchor: middle; opacity: .7; }
.cos-wave-svg .cw-wave { fill: none; stroke: var(--accent); stroke-width: 2; }
.cos-wave-svg .cw-marker { stroke: var(--amber, #f59e0b); stroke-width: 1.5; stroke-dasharray: 3 3; opacity: .7; }
.cos-wave-svg .cw-dot { fill: var(--amber, #f59e0b); stroke: var(--surface); stroke-width: 2; }

/* Reference-table active row — emphasizes the current angle. */
#cos-ref-body tr.is-active td {
  background: var(--accent-soft) !important;
  color: var(--ink);
  box-shadow: inset 3px 0 0 var(--accent);
}
#cos-ref-body tr[data-deg] { cursor: pointer; transition: background var(--transition-fast); }
#cos-ref-body tr[data-deg]:hover td { background: var(--surface-2); }

/* kbd chips for keyboard hint paragraph */
.cos-wave-card kbd,
.card kbd {
  display: inline-block;
  padding: 1px 6px;
  font: 500 11px var(--font-mono);
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  box-shadow: 0 1px 0 var(--line);
}

/* Delta badge in hero eyebrow (reuse styling, ensure visible in hero). */
.result-hero #cos-quad-badge,
.result-hero #tan-quad-badge {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: none;
}

@media (max-width: 640px) {
  .unit-circle-svg { max-width: 240px; }
  .cos-wave-svg { height: 120px; }
}

/* ──────────────────────────────────────────────────────────────────
   Tangent calculator — extends the cosine card visuals.
   • sin/cos/tan segments inside the unit circle
   • vertical asymptote guides + clipped y-axis on the curve graph
   • warning-tinted formula box for the "undefined" note
   • clickable+highlighted reference table rows
   ────────────────────────────────────────────────────────────────── */

/* Unit-circle segments for tangent: sin (vertical), cos (horizontal),
   tangent line (from point to x-axis intercept = sec(θ)). */
.unit-circle-svg .uc-sin     { stroke: var(--amber, #f59e0b); stroke-width: 3; stroke-linecap: round; }
.unit-circle-svg .uc-cos     { stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
.unit-circle-svg .uc-tangent { stroke: var(--teal, #14b8a6); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 4 3; }
.uc-dot--tan { background: var(--teal, #14b8a6); }

/* Tangent-curve overrides on top of the shared .cos-wave-svg styling. */
#tan-wave-svg .tw-wave { stroke: var(--teal, #14b8a6); stroke-width: 2; fill: none; }
#tan-wave-svg .tw-asymptotes line {
  stroke: var(--ink-3, var(--ink-2));
  stroke-width: 1;
  stroke-dasharray: 4 4;
  opacity: .35;
}

/* Warning-tinted formula box for "undefined" note. Falls back gracefully when
   --warn / --warn-soft aren't set in the theme. */
.formula-box--warn {
  background: var(--warn-soft, rgba(245, 158, 11, 0.08));
  border-left: 3px solid var(--warn, var(--amber, #f59e0b));
}

/* Reference-table active row — same treatment as cosine. */
#tan-ref-body tr.is-active td {
  background: var(--accent-soft) !important;
  color: var(--ink);
  box-shadow: inset 3px 0 0 var(--accent);
}
#tan-ref-body tr[data-deg] { cursor: pointer; transition: background var(--transition-fast); }
#tan-ref-body tr[data-deg]:hover td { background: var(--surface-2); }

/* ═══════════════════════════════════════════════════════════════════
   Energy converter — scoped styles
   Hero tint, real-world tagline marker, and the log-scale card that
   places every unit along a log10(joule) axis with a live position
   marker. Reuses .mc-* primitives for swap/stepper/unit-group/copy. */

/* Slightly warmer hero to contrast with the green-ish default. */
.ec-hero {
  background: linear-gradient(135deg, #2a2032 0%, #5a3f7a 55%, #9570c2 100%);
}
.ec-hero .result-eyebrow { color: rgba(255, 255, 255, 0.78); }
.ec-hero .pulse-dot { background: #f8c77a; box-shadow: 0 0 0 3px rgba(248, 199, 122, .3); }
.ec-hero .result-value { font-size: 48px; }
.ec-hero .result-value .per {
  font-size: 18px;
  font-weight: 500;
  opacity: 0.78;
  margin-left: 6px;
  letter-spacing: 0;
}

/* Log-scale comparison card. */
.ec-scale-card .card-body { padding-top: 10px; padding-bottom: 14px; }

.ec-scale {
  position: relative;
  height: 68px;
  margin: 14px 4px 8px;
}
.ec-scale__track {
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 4px;
  margin-top: -2px;
  border-radius: 2px;
  background: linear-gradient(
    to right,
    var(--accent-soft) 0%,
    var(--surface-2) 25%,
    var(--surface-2) 75%,
    var(--amber-soft, var(--surface-2)) 100%
  );
}
.ec-scale__ticks { position: absolute; inset: 0; }
.ec-scale__tick {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  user-select: none;
}
.ec-scale__tick > i {
  display: block;
  width: 2px;
  height: 14px;
  background: var(--line-strong);
  border-radius: 1px;
  margin-top: 15px;
  transition: background-color var(--transition-fast);
}
.ec-scale__tick > em {
  font-style: normal;
  font: 500 10px var(--font-mono);
  color: var(--ink-3);
  margin-top: 3px;
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.ec-scale__tick:hover > i   { background: var(--accent); }
.ec-scale__tick:hover > em  { color: var(--ink); }
.ec-scale__tick--si        > i { background: var(--accent); }
.ec-scale__tick--thermal   > i { background: var(--amber, #f59e0b); }
.ec-scale__tick--electrical > i { background: var(--teal, #14b8a6); }
.ec-scale__tick--other     > i { background: var(--ink-3); }

.ec-scale__marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  z-index: 2;
}
.ec-scale__marker-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--surface);
  box-shadow: 0 2px 6px rgba(0,0,0,.18), 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.ec-scale__marker-label {
  position: absolute;
  top: 100%;
  margin-top: 6px;
  font: 500 11px var(--font-mono);
  color: var(--ink);
  background: var(--surface);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
  transform: translateX(-50%);
  left: 50%;
}
.ec-scale__marker--thermal    .ec-scale__marker-dot { background: var(--amber, #f59e0b); }
.ec-scale__marker--electrical .ec-scale__marker-dot { background: var(--teal, #14b8a6); }
.ec-scale__marker--other      .ec-scale__marker-dot { background: var(--ink-2); }

.ec-scale__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  justify-content: center;
  margin-top: 22px;
  font-size: 11px;
  color: var(--ink-2);
}
.ec-scale__legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ec-dot {
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block;
}
.ec-dot--si         { background: var(--accent); }
.ec-dot--thermal    { background: var(--amber, #f59e0b); }
.ec-dot--electrical { background: var(--teal, #14b8a6); }
.ec-dot--other      { background: var(--ink-3); }

@media (max-width: 560px) {
  .ec-scale { height: 74px; }
  .ec-scale__tick > em { font-size: 9px; }
  .ec-hero .result-value { font-size: 38px; }
}


/* ═══════════════════════════════════════════════════════════════
   Cylinder Calculator — presets, reactive 3D diagram + unrolled
   lateral visual, shape-aspect indicator, optimal-can insight,
   scale-comparison table
   ═══════════════════════════════════════════════════════════════ */

/* Preset chips. */
.cyl-preset-row { flex-wrap: wrap; gap: 6px; }
.cyl-preset-row .chip { padding: 6px 12px; font-size: 13px; }

/* Hero metric chips — compact under the big number. */
.cyl-hero-chips { margin: 12px 0 14px; flex-wrap: wrap; gap: 6px; }
.cyl-hero-chips .chip { padding: 5px 10px; font-size: 12px; border-radius: 999px; }

/* Alt-unit volume grid. */
.cyl-alt-units {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 4px 0 14px;
}
.cyl-alt-cell {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 6px 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  min-width: 0;
}
.cyl-alt-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-3); font-weight: 600;
}
.cyl-alt-value {
  font-size: 13px; color: var(--ink);
  font-variant-numeric: tabular-nums;
  margin-top: 2px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; width: 100%;
}

/* Diagram row — 3D cylinder beside the unrolled rectangle. */
.cyl-diagram-row {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 16px;
  align-items: center;
}
@media (max-width: 640px) {
  .cyl-diagram-row { grid-template-columns: 1fr; }
}

/* Shape diagrams. */
.shape-diagram.cyl-svg           { max-width: 220px; }
.shape-diagram.cyl-unrolled-svg  { max-width: 280px; width: 100%; }

/* Label styling — halo so they stay readable over the translucent fill. */
.cyl-svg .cyl-label,
.cyl-svg .cyl-label-h,
.cyl-svg .cyl-label-d,
.cyl-unrolled-svg .cyl-unrolled-label {
  font: 700 12px/1 var(--font-sans, system-ui, sans-serif);
  fill: var(--accent, #2563eb);
  paint-order: stroke fill;
  stroke: var(--surface, #fff);
  stroke-width: 3px;
  stroke-linejoin: round;
}
.cyl-svg .cyl-label-h { fill: var(--amber, #f59e0b); }
.cyl-unrolled-svg .cyl-unrolled-label-area {
  font: 600 11px/1 var(--font-sans, system-ui, sans-serif);
  fill: var(--ink-2);
}

/* Annotations toggle — hide lines + labels when off. */
.cyl-svg[data-annotations="off"] #cyl-radius-line,
.cyl-svg[data-annotations="off"] #cyl-diameter-line,
.cyl-svg[data-annotations="off"] #cyl-height-line,
.cyl-svg[data-annotations="off"] .cyl-label,
.cyl-svg[data-annotations="off"] .cyl-label-h,
.cyl-svg[data-annotations="off"] .cyl-label-d,
.cyl-unrolled-svg[data-annotations="off"] .cyl-unrolled-label,
.cyl-unrolled-svg[data-annotations="off"] .cyl-unrolled-label-area {
  display: none;
}

/* Diagram legend. */
.cyl-legend {
  display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: center;
  margin-top: 10px;
  font-size: var(--text-xs); color: var(--ink-2);
}
.cyl-legend-dot {
  display: inline-block; width: 9px; height: 9px;
  border-radius: 50%; margin-right: 5px;
  vertical-align: middle;
}
.cyl-legend-dot--r { background: var(--accent, #2563eb); }
.cyl-legend-dot--h { background: var(--amber, #f59e0b); }

.cyl-unrolled-note {
  color: var(--ink-3); font-size: var(--text-xs); margin-top: 10px;
}

/* Shape-character indicator — 0–100% scale from flat disc to tall pillar. */
.cyl-aspect-track {
  position: relative;
  padding: 10px 0 24px;
}
.cyl-aspect-label {
  position: absolute;
  top: 0;
  font-size: 10px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  white-space: nowrap;
}
.cyl-aspect-label--left  { left: 0; }
.cyl-aspect-label--mid   { left: 50%; transform: translateX(-50%); color: var(--accent, #2563eb); }
.cyl-aspect-label--right { right: 0; }
.cyl-aspect-bar {
  position: relative;
  height: 6px;
  margin-top: 18px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--amber, #f59e0b) 35%, transparent),
    color-mix(in srgb, var(--accent, #2563eb) 35%, transparent),
    color-mix(in srgb, var(--amber, #f59e0b) 35%, transparent)
  );
}
.cyl-aspect-marker {
  position: absolute;
  top: 50%;
  width: 2px;
  height: 16px;
  transform: translate(-50%, -50%);
}
.cyl-aspect-marker--optimal {
  background: var(--accent, #2563eb);
  opacity: 0.55;
}
.cyl-aspect-marker--current {
  width: 12px; height: 12px;
  background: var(--ink);
  border: 2px solid var(--surface, #fff);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--ink);
  transition: left 160ms ease-out;
}

.cyl-optimal-note { color: var(--ink-3); font-size: var(--text-xs); }
.cyl-holds-bar { margin-top: 10px; }

/* Scale-comparison highlight. */
.cyl-compare-table .cyl-compare-row--current {
  background: color-mix(in srgb, var(--accent, #2563eb) 8%, transparent);
  font-weight: 600;
}
.cyl-compare-table .cyl-compare-row--current td:first-child {
  border-left: 3px solid var(--accent, #2563eb);
}
.cyl-compare-note {
  color: var(--ink-3);
  font-size: var(--text-xs);
  margin-top: 10px;
}

/* Compare-card delta row layout. */
#cyl-compare-card .compare-row {
  grid-template-columns: minmax(80px, auto) 1fr auto;
  gap: 10px;
}
#cyl-compare-card .compare-delta { font-size: var(--text-xs); }

/* Responsive: alt-units to 2 columns on narrow screens. */
@media (max-width: 520px) {
  .cyl-alt-units { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════
   Time converter — hero, composite breakdown, log-scale ruler.
   Reuses .result-hero, .breakdown-card, .unit-swap-btn, .chip--preset,
   .chip--quickref, .input-copy-btn, .breakdown-grouped from elsewhere.
   ═══════════════════════════════════════════════════════════════ */

.tc-hero .result-value { letter-spacing: -0.01em; }
.tc-hero .result-value .per {
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--ink-2);
  margin-left: 6px;
}

.tc-composite {
  margin-top: 10px;
  padding: 8px 12px;
  font-size: var(--text-sm);
  color: var(--ink-2);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm, 6px);
  min-height: 1em;
  font-variant-numeric: tabular-nums;
}
.tc-composite:empty { display: none; }
[data-theme='light'] .tc-composite,
:root:not([data-theme='dark']) .tc-composite {
  background: var(--surface-2, #f8fafc);
  border-color: var(--line, #e5e7eb);
  color: var(--ink-2);
}

/* ── Log-scale ruler ── */
.tc-ruler-card .card-body { padding-top: 18px; padding-bottom: 14px; }
.tc-ruler { position: relative; padding: 4px 0 0; }
.tc-ruler__track {
  position: relative;
  height: 8px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 12%, transparent) 0%,
    color-mix(in srgb, var(--accent) 24%, transparent) 50%,
    color-mix(in srgb, var(--accent) 12%, transparent) 100%);
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: visible;
}
.tc-ruler__marker {
  position: absolute;
  top: 50%;
  width: 14px; height: 14px;
  background: var(--accent);
  border: 2px solid var(--surface, #fff);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: left 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tc-ruler__labels {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  margin-top: 10px;
  font-size: 10px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  text-align: center;
  letter-spacing: 0.02em;
}
.tc-ruler__labels span {
  position: relative;
}
.tc-ruler__labels span::before {
  content: "";
  position: absolute;
  top: -8px; left: 50%;
  width: 1px; height: 4px;
  background: var(--line-strong, var(--line));
  transform: translateX(-50%);
}
.tc-ruler__note {
  margin-top: 10px;
  font-size: var(--text-xs);
  color: var(--ink-3);
  font-style: italic;
  min-height: 1em;
}

/* ── Factor card ── */
.tc-factor {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.tc-factor-note {
  margin: 6px 0 10px;
  font-size: var(--text-xs);
  color: var(--ink-3);
  line-height: 1.55;
}
.tc-factor-card .formula-steps {
  margin: 0;
  padding-left: 18px;
  color: var(--ink-2);
  font-size: var(--text-xs);
  line-height: 1.6;
}
.tc-factor-card .formula-steps li + li { margin-top: 2px; }

/* ── Mobile: chip rows scroll-snap, ruler labels compact ── */
@media (max-width: 520px) {
  .tc-ruler__labels {
    font-size: 9px;
    grid-template-columns: repeat(10, 1fr);
  }
  .tc-ruler__labels span:nth-child(7),
  .tc-ruler__labels span:nth-child(9) { visibility: hidden; }
  .tc-hero .result-value { font-size: var(--text-3xl); }
}

/* Preset/quickref row on mobile: horizontal scroll-snap for tidiness. */
@media (max-width: 640px) {
  #time-presets, #time-quickref {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  #time-presets .chip, #time-quickref .chip { scroll-snap-align: start; flex: 0 0 auto; }
}

/* Time-share flash state (parity with length-share). */
#time-share.is-flashed { border-color: var(--accent); color: var(--accent); }

/* ─────────────────────────────────────────────────────────────────
   Data Storage Converter — scoped styles
   Reuses .card, .form-section, .chip-row, .chip, .info-tip, .ci-actions.
   ───────────────────────────────────────────────────────────────── */

.ds-chip-group + .ds-chip-group { margin-top: 10px; }
.ds-chip-group-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

.ds-family-toggle {
  appearance: none;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  margin-left: auto;
}
.ds-family-toggle:hover { border-color: var(--accent); color: var(--accent); }
.ds-family-toggle[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.ds-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.ds-swap-row {
  display: flex;
  justify-content: center;
  margin: 6px 0 -6px;
}
.ds-swap-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, transform 0.15s, box-shadow 0.15s;
  box-shadow: var(--shadow-sm);
}
.ds-swap-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}
.ds-swap-btn:active { transform: scale(0.97); }
.ds-swap-btn__icon { font-size: 15px; line-height: 1; transform: rotate(90deg); display: inline-block; }

/* Hero From → To block in the result card. */
.ds-summary-card .ds-hero {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  padding: 14px 12px;
  background: var(--surface-2, var(--accent-soft));
  border-radius: var(--radius-md);
}
.ds-hero__side { min-width: 0; }
.ds-hero__side--to { text-align: right; }
.ds-hero__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 4px;
}
.ds-hero__value {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.ds-hero__value--accent { color: var(--accent); }
.ds-hero__arrow {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink-3);
  user-select: none;
}
@media (max-width: 520px) {
  .ds-summary-card .ds-hero {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .ds-hero__side--to { text-align: left; }
  .ds-hero__arrow { transform: rotate(90deg); justify-self: start; }
}

.ds-hero-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.ds-hero-ratio {
  font-size: 12px;
  color: var(--ink-3);
  font-family: var(--font-mono);
}
.ds-summary-card .calc-btn.is-success {
  border-color: var(--accent);
  color: var(--accent);
}

.ds-aux-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 14px;
}
@media (max-width: 520px) {
  .ds-aux-grid { grid-template-columns: 1fr; }
}
.ds-aux-item {
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  min-width: 0;
}
.ds-aux-item__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 4px;
}
.ds-aux-item__value {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* Real-world scale card grid. */
.ds-scale-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 720px) { .ds-scale-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .ds-scale-grid { grid-template-columns: 1fr; } }
.ds-scale-item {
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  text-align: center;
}
.ds-scale-item__icon {
  font-size: 22px;
  line-height: 1;
  margin-bottom: 6px;
}
.ds-scale-item__value {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px;
}
.ds-scale-item__label {
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.35;
}
.ds-scale-item__note {
  display: block;
  font-size: 10.5px;
  color: var(--ink-3);
  margin-top: 2px;
}

/* SI vs IEC reference card. */
.ds-reference-wrap { overflow-x: auto; }
.ds-reference-table th, .ds-reference-table td { white-space: nowrap; }
.ds-reference-note {
  margin: 14px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-2);
}

/* Explainer card. */
.ds-explainer-lede {
  margin: 0 0 12px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink);
}
.ds-explainer-math {
  padding: 12px 14px;
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.ds-explainer-note {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-2);
}

/* A11y helper — preserved legacy #conv-big stays in DOM for any deep-link
   snippets but is visually hidden (the hero block supersedes it). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Arcsin calculator ───────────────────────────────────────── */
.asin-ref-table .asin-ref-row {
  cursor: pointer;
  transition: background-color 120ms ease;
}
.asin-ref-table .asin-ref-row:hover,
.asin-ref-table .asin-ref-row:focus-visible {
  background: var(--surface-hover, rgba(20, 184, 166, 0.08));
  outline: none;
}
.asin-ref-table .asin-ref-row td:first-child {
  font-family: var(--mono-font, ui-monospace, monospace);
}
.asin-circle-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.25rem 0 0.5rem;
}
.asin-circle-wrap svg {
  width: 100%;
  max-width: 260px;
  height: auto;
}

/* ── Arctan calculator ──────────────────────────────────────────
   Reuses .card / .field / .chip-row / .slider-wrap / .input-wrap /
   .result-hero / .breakdown-card / .ci-actions / .ci-warning / .hero-action
   from the shared systems. Scoped additions only. */
.atan-ref-table .atan-ref-row {
  cursor: pointer;
  transition: background-color 120ms ease;
}
.atan-ref-table .atan-ref-row:hover,
.atan-ref-table .atan-ref-row:focus-visible {
  background: var(--surface-hover, rgba(20, 184, 166, 0.08));
  outline: none;
}
.atan-ref-table .atan-ref-row td:first-child {
  font-family: var(--mono-font, ui-monospace, monospace);
}
.atan-circle-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.25rem 0 0.5rem;
}
.atan-circle-wrap svg {
  width: 100%;
  max-width: 280px;
  height: auto;
}
.atan-sides-note {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--ink-2);
}
.atan-sides-note .mono {
  font-weight: 600;
  color: var(--ink);
}
.atan-quadrant-badge {
  background: rgba(20, 184, 166, 0.12);
  color: var(--accent, #14b8a6);
  border-color: rgba(20, 184, 166, 0.3);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Electricity Bill Estimator overrides
   Reuses .info-tip, .chip, .chip-row, .slider-wrap, .result-hero, .breakdown-card,
   .breakdown-grid--spread, .ci-stack-bar / .ci-stack-seg, .compare-card,
   .delta--good/bad, .ci-actions, .ci-warning. Only adds what the shared
   systems do not already cover: native <select> styling, the per-appliance
   row, the 12-month bar chart, and the savings callout.
   ═══════════════════════════════════════════════════════════════════════════ */

.elec-select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border, #e5e5e5);
  border-radius: 8px;
  background: var(--surface, #fff);
  color: var(--ink, #111);
  font: inherit;
  line-height: 1.3;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.elec-select:focus {
  outline: none;
  border-color: var(--accent, #22c55e);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}

/* Appliance stack */
.elec-appliances { display: flex; flex-direction: column; gap: 14px; }

.elec-appliance {
  border: 1px solid var(--border, #e5e5e5);
  border-radius: 12px;
  padding: 14px;
  background: var(--surface-2, #fafafa);
}
.elec-appliance__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.elec-appliance__head .elec-select { flex: 1; }
.elec-appliance__remove {
  width: 32px; height: 32px;
  border: 1px solid var(--border, #e5e5e5);
  background: var(--surface, #fff);
  border-radius: 8px;
  color: var(--ink-3, #737373);
  cursor: pointer;
  font-size: 18px; line-height: 1;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.elec-appliance__remove:hover {
  color: var(--rose, #ef4444);
  border-color: var(--rose, #ef4444);
  background: rgba(239, 68, 68, 0.06);
}
.elec-appliance__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}
.elec-appliance__grid .field { margin: 0; }
.elec-appliance__grid .slider-wrap { margin-top: 6px; }
.elec-appliance__foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border, #e5e5e5);
  font-size: 12px;
  color: var(--ink-3, #737373);
}

.elec-add-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.elec-add-row .calc-btn { flex: 1; min-width: 140px; }

.elec-inline-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}

.elec-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 3px;
  margin-right: 8px;
  vertical-align: middle;
}

/* 12-month bar chart */
.elec-monthly-chart {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 4px;
  height: 140px;
  align-items: end;
  padding: 0 2px;
}
.elec-monthly-bar {
  position: relative;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.elec-monthly-bar__fill {
  width: 100%;
  background: linear-gradient(180deg, var(--accent, #22c55e), color-mix(in srgb, var(--accent, #22c55e) 70%, #000 30%));
  border-radius: 4px 4px 0 0;
  min-height: 2px;
  transition: height 0.3s ease;
}
.elec-monthly-bar__tip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, -6px);
  background: var(--ink, #111);
  color: #fff;
  font-size: 11px;
  padding: 3px 7px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.elec-monthly-bar:hover .elec-monthly-bar__tip { opacity: 1; }
.elec-monthly-xlabels {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 4px;
  margin-top: 6px;
  font-size: 11px;
  color: var(--ink-3, #737373);
  text-align: center;
}

/* Savings callout */
.elec-savings {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px 2px;
}
.elec-savings__ico {
  font-size: 26px;
  flex: 0 0 auto;
}
.elec-savings__headline {
  font-weight: 600;
  color: var(--ink, #111);
  line-height: 1.3;
}
.elec-savings__sub {
  font-size: 12px;
  color: var(--ink-3, #737373);
  margin-top: 2px;
}

/* Dense appliance grid collapses to single column on narrow rails */
@media (max-width: 520px) {
  .elec-appliance__grid,
  .elec-inline-fields { grid-template-columns: 1fr; }
}

/* ── Arccos calculator ───────────────────────────────────────── */
.acos-ref-table .acos-ref-row {
  cursor: pointer;
  transition: background-color 120ms ease;
}
.acos-ref-table .acos-ref-row:hover,
.acos-ref-table .acos-ref-row:focus-visible {
  background: var(--surface-hover, rgba(20, 184, 166, 0.08));
  outline: none;
}
.acos-ref-table .acos-ref-row td:first-child {
  font-family: var(--mono-font, ui-monospace, monospace);
}
.acos-circle-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.25rem 0 0.5rem;
}
.acos-circle-wrap svg {
  width: 100%;
  max-width: 260px;
  height: auto;
}
.acos-strip-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.25rem 0 0.25rem;
}
.acos-strip-wrap svg {
  width: 100%;
  max-width: 260px;
  height: auto;
}

/* ── Concrete calculator — chip icons + cost-row aux ──────────── */
#conc-shape-chips .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#conc-shape-chips .chip .chip-icon {
  width: 22px;
  height: 14px;
  color: currentColor;
  flex-shrink: 0;
}
#r-conc-cost-bags80-count,
#r-conc-cost-bags60-count {
  margin-left: 6px;
  color: var(--ink-3);
  font-weight: 400;
  font-size: 12px;
}


/* ── Gas consumption: seasonal bar chart ──
   Compact 12-month cost projection next to the hero. Bars scale to the
   peak month; Jan/Dec use the heating-heavy slice of annual usage. */
.gc-season {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 96px;
  padding: 4px 0 2px;
  margin-bottom: 4px;
}
.gc-season-bar {
  flex: 1 1 0;
  min-width: 6px;
  background: var(--accent, #6366f1);
  border-radius: 3px 3px 0 0;
  opacity: 0.7;
  transition: height .3s ease, opacity .2s ease, background .2s ease;
}
.gc-season-bar:hover { opacity: 1; }
.gc-season-bar.is-peak { background: var(--amber, #f59e0b); opacity: 1; }
.gc-season-bar.is-low  { background: var(--teal, #14b8a6); opacity: 0.85; }
.gc-season-axis {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 4px;
  font-size: 10px;
  color: var(--ink-3, #6b7280);
  text-align: center;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  margin-bottom: 8px;
}
.gc-season-axis span { line-height: 1.2; }

/* "is-solved" field: value was computed by the solver rather than typed. */
#gc-usage-field.is-solved .input-wrap,
#gc-price-field.is-solved .input-wrap {
  background: var(--bg-soft, #f9fafb);
  border-style: dashed;
}

/* ═══════════════════════════════════════════════════════════════
   Natural logarithm calculator
   Plot, tabs, and quick-pick chip row.
   ═══════════════════════════════════════════════════════════════ */

.ln-quick-row { margin-top: 10px; flex-wrap: wrap; gap: 6px; }
.ln-quick-row .chip { min-width: 44px; }

.ln-plot {
  position: relative;
  width: 100%;
  height: 260px;
  padding: 8px 0 24px;
}
.ln-plot svg {
  width: 100%;
  height: 240px;
  display: block;
}
.ln-plot__grid line {
  stroke: var(--border, #e5e7eb);
  stroke-width: 1;
  stroke-dasharray: 2 4;
  opacity: .6;
}
.ln-plot__axis {
  stroke: var(--ink-3, #6b7280);
  stroke-width: 1;
  opacity: .4;
}
.ln-plot__curve {
  fill: none;
  stroke: var(--accent, #6366f1);
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ln-plot__guide {
  stroke: var(--teal, #14b8a6);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: .7;
}
.ln-plot__point {
  fill: var(--teal, #14b8a6);
  stroke: #fff;
  stroke-width: 2;
}
.ln-plot__tooltip {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 12px;
  color: var(--ink-2, #4b5563);
  padding-top: 4px;
}

/* Tabs for properties */
.ln-tabs {
  display: flex;
  gap: 4px;
  margin: 1.25rem 0 0.75rem;
  border-bottom: 1px solid var(--border, #e5e7eb);
}
.ln-tab {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 10px 16px;
  font: inherit;
  font-weight: 500;
  font-size: 14px;
  color: var(--ink-3, #6b7280);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s ease, border-color .15s ease;
}
.ln-tab:hover { color: var(--ink, #111827); }
.ln-tab.active {
  color: var(--accent, #6366f1);
  border-bottom-color: var(--accent, #6366f1);
}
.ln-tab-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ln-tab-panel[hidden] { display: none; }

/* Exponential form card */
.ln-exp-form {
  font-size: 18px;
  text-align: center;
  padding: 14px;
  background: var(--bg-soft, #f9fafb);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  color: var(--ink, #111827);
}

/* Clickable reference rows */
.ln-ref-row {
  cursor: pointer;
  transition: background .12s ease;
}
.ln-ref-row:hover {
  background: var(--bg-soft, #f9fafb);
}

/* Formula equation spacing for ln */
.formula-eq--ln {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  font-size: 22px;
  justify-content: center;
}
.formula-eq--ln .formula-op { opacity: .65; }

/* ═══════════════════════════════════════════════════════════════
   Common logarithm calculator — scoped extras.
   Identity playground 2-col grid + use-case quick-fill cards.
   Plot/tabs/quick-row/exp-form reuse the .ln-* rules above.
   ═══════════════════════════════════════════════════════════════ */
.grid-2-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 540px) {
  .grid-2-col { grid-template-columns: 1fr; }
}

.usecase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.usecase-card {
  appearance: none;
  text-align: left;
  background: var(--bg-soft, #f9fafb);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  padding: 14px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.usecase-card:hover {
  border-color: var(--accent, #6366f1);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.10);
}
.usecase-card:focus-visible {
  outline: 2px solid var(--accent, #6366f1);
  outline-offset: 2px;
}
.usecase-card__title {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink, #111827);
}
.usecase-card__formula {
  font-size: 13px;
  color: var(--accent, #6366f1);
}
.usecase-card__hint {
  font-size: 12px;
  color: var(--ink-3, #6b7280);
}
[data-theme='dark'] .usecase-card { background: var(--surface-2); }

/* ═══════════════════════════════════════════════════════════════════
   Electricity Consumption calculator — scoped styles (.ecc-* prefix).
   Kept separate from energy-converter's .ec-* rules above to avoid
   class-name collision. Reuses .result-hero, .breakdown-card,
   .compare-card, .ci-stack-bar, .info-tip, .chip-row, .slider-wrap,
   .toggle-group, .ci-actions, .hero-action, .card-link. */

.ecc-hero {
  background: linear-gradient(135deg, #102a43 0%, #1f4060 55%, #3d6fa5 100%);
}
.ecc-hero .result-eyebrow { color: rgba(255, 255, 255, 0.78); }
.ecc-hero .pulse-dot { background: #facc15; box-shadow: 0 0 0 3px rgba(250, 204, 21, .3); }
.ecc-hero .result-value { font-size: 42px; }
.ecc-hero .result-value .per { font-size: 16px; opacity: 0.72; margin-left: 4px; }

/* Field-sub: a tighter secondary control block inside a field. */
.field-sub {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border, #e5e7eb);
}
.field-sublabel {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3, #6b7280);
  margin-bottom: 6px;
}

/* Preset picker: search + group tabs + wrapping chip row with W pill. */
.ecc-picker { display: flex; flex-direction: column; gap: 8px; }
.ecc-search {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  font: inherit;
  background: var(--bg, #fff);
  color: var(--ink, #111);
}
.ecc-search:focus {
  outline: none;
  border-color: var(--accent, #3b82f6);
  box-shadow: 0 0 0 3px var(--accent-soft, rgba(59, 130, 246, 0.15));
}
.ecc-group-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  padding-bottom: 6px;
}
.ecc-group-tab {
  background: transparent;
  border: none;
  padding: 4px 10px;
  font: inherit;
  font-size: 12px;
  color: var(--ink-2, #374151);
  cursor: pointer;
  border-radius: 999px;
  transition: background-color 120ms ease, color 120ms ease;
}
.ecc-group-tab:hover { background: var(--surface-2, #f3f4f6); }
.ecc-group-tab.is-active {
  background: var(--accent-soft, rgba(59, 130, 246, 0.15));
  color: var(--accent, #3b82f6);
  font-weight: 600;
}
.ecc-preset-chips { max-height: 180px; overflow-y: auto; padding-right: 4px; }
.ecc-chip-w {
  font-size: 11px;
  opacity: 0.6;
  margin-left: 4px;
  font-weight: 400;
}
.chip.active .ecc-chip-w { opacity: 0.85; }

/* Region autofill chips: more compact, secondary tone. */
.ecc-region-chips .chip {
  font-size: 11px;
  padding: 4px 8px;
}

/* Time-of-use & tiered grids. */
.ecc-tou-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 520px) {
  .ecc-tou-grid { grid-template-columns: 1fr; }
}
.ecc-tou-range {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.ecc-tou-range label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-2, #374151);
}
.ecc-tou-range select {
  padding: 4px 8px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  font: inherit;
  background: var(--bg, #fff);
  color: var(--ink, #111);
}

/* 24-hour strip. */
.ecc-strip {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: 2px;
  margin-top: 4px;
  user-select: none;
  touch-action: none;
}
.ecc-strip-seg {
  appearance: none;
  background: var(--surface-2, #f3f4f6);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 4px;
  aspect-ratio: 1 / 1.8;
  min-height: 40px;
  padding: 0;
  font-size: 10px;
  color: var(--ink-3, #6b7280);
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, transform 100ms ease;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 3px;
}
.ecc-strip-seg:hover { border-color: var(--accent, #3b82f6); }
.ecc-strip-seg.is-on {
  background: var(--teal, #14b8a6);
  border-color: var(--teal, #14b8a6);
  color: #fff;
}
.ecc-strip-seg.is-peak {
  background: var(--amber, #f59e0b);
  border-color: var(--amber, #f59e0b);
}
.ecc-strip-seg.is-custom-editable { cursor: crosshair; }
.ecc-strip-seg__hour { font-weight: 600; }
.ecc-strip-axis {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  justify-items: center;
  font-size: 10px;
  color: var(--ink-3, #6b7280);
  margin-top: 6px;
  padding: 0 8px;
}
.ecc-strip-axis span:nth-child(1) { justify-self: start; }
.ecc-strip-axis span:nth-child(5) { justify-self: end; }
.ecc-strip-legend {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 10px;
  font-size: 12px;
  color: var(--ink-2, #374151);
}
.ecc-strip-total { margin-left: auto; }
.ecc-strip-total strong { color: var(--ink, #111); margin-left: 4px; }
.sw.sw--muted { background: var(--surface-2, #f3f4f6); border: 1px solid var(--border, #e5e7eb); }

/* 12-month bar chart. */
.ecc-months-chart {
  position: relative;
  padding-bottom: 24px;
}
.ecc-months-chart .ecc-months-bar {
  fill: var(--teal, #14b8a6);
  transition: fill 160ms ease, opacity 160ms ease;
}
.ecc-months-chart .ecc-months-bar:hover { opacity: 0.82; }
.ecc-months-chart .ecc-months-bar--peak { fill: var(--amber, #f59e0b); }
.ecc-months-tooltip {
  position: absolute;
  top: 10px;
  transform: translateX(-50%);
  background: var(--ink, #111);
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  pointer-events: none;
  z-index: 2;
  white-space: nowrap;
}
.ecc-months-tt-month {
  font-weight: 600;
  margin-bottom: 2px;
}
.ecc-months-tt-row { opacity: 0.9; }
.ecc-months-tt-row strong { margin-left: 6px; }

/* Basket. */
.ecc-basket-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.ecc-basket-empty {
  padding: 12px;
  background: var(--surface-2, #f3f4f6);
  border: 1px dashed var(--border, #e5e7eb);
  border-radius: 6px;
  color: var(--ink-3, #6b7280);
  text-align: center;
  font-size: 13px;
}
.ecc-basket-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: var(--surface-2, #f3f4f6);
  border-radius: 6px;
  font-size: 13px;
}
.ecc-basket-name { flex: 1; font-weight: 500; color: var(--ink, #111); }
.ecc-basket-spec { color: var(--ink-3, #6b7280); font-size: 12px; }
.ecc-basket-remove {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--ink-3, #6b7280);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  border-radius: 4px;
}
.ecc-basket-remove:hover { background: var(--border, #e5e7eb); color: var(--ink, #111); }
.ecc-basket-actions { display: flex; gap: 8px; }
.ecc-basket-remove-sm {
  appearance: none;
  background: transparent;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 11px;
  cursor: pointer;
  color: var(--ink-3, #6b7280);
}
.ecc-basket-remove-sm:hover { background: var(--surface-2, #f3f4f6); color: var(--ink, #111); }
.ecc-basket-total td { font-weight: 600; border-top: 2px solid var(--border, #e5e7eb); }

/* CO₂ card. */
.ecc-co2-card .card-body { padding-top: 10px; }
.ecc-co2-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.ecc-co2-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ecc-co2-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-3, #6b7280);
}
.ecc-co2-value {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink, #111);
}

/* Upgrade suggestion card. */
.ecc-upgrade-card {
  border-left: 3px solid var(--teal, #14b8a6);
}
.ecc-upgrade-body {
  font-size: 13px;
  color: var(--ink-2, #374151);
  margin: 0 0 12px;
  line-height: 1.5;
}
.ecc-upgrade-savings {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  background: var(--accent-soft, rgba(20, 184, 166, 0.12));
  border-radius: 6px;
  margin-bottom: 10px;
}
.ecc-upgrade-label { font-size: 12px; color: var(--ink-3, #6b7280); }
.ecc-upgrade-amount { font-size: 18px; font-weight: 600; color: var(--teal, #14b8a6); }

/* Stacked composition bar legend for TOU / tiered. */
.ecc-stack-wrap {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--border, #e5e7eb);
}
.ecc-stack-legend {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--ink-2, #374151);
  margin-bottom: 6px;
}

/* Form section title note (small, muted). */
.form-section-title-note {
  font-weight: 400;
  color: var(--ink-3, #6b7280);
  font-size: 12px;
  margin-left: 4px;
}

/* is-solved treatment on watts/hours fields in budget mode. */
#ec-watts-field.is-solved .input-wrap,
#ec-hours-field.is-solved .input-wrap {
  background: var(--bg-soft, #f9fafb);
  border-style: dashed;
}

/* ─────────────────────────────────────────────────────────────────
   Tile calculator — scoped additions.
   Reuses .card, .form-section, .chip-row, .ci-actions, .ci-warning,
   .compare-card, .ci-stack-bar/seg, .delta--good/bad.
   ───────────────────────────────────────────────────────────────── */

/* Two-line chips: size on first line, use-case on second. */
.chip-row--multiline { gap: 8px; }
.chip-row--multiline .chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 14px;
  border-radius: 12px;
  line-height: 1.15;
}
.chip-row--multiline .chip strong { font-size: 13px; font-weight: 700; }
.chip-row--multiline .chip .chip-sub {
  font-size: 11px;
  font-weight: 500;
  opacity: .75;
  letter-spacing: .01em;
}
.chip-row--multiline .chip.active .chip-sub { opacity: .9; }

/* Tile preview swatch in the hero. */
.tc-preview {
  margin: var(--space-3) 0 var(--space-4);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.tc-preview svg {
  display: block;
  width: 100%;
  height: 100px;
}

/* Share button label (mirrors .ci-share-label usage in ci-actions). */
.ci-share-label { pointer-events: none; }


/* ═══════════════════════════════════════════════════════════════════
   Solar Panel calculator additions
   ═══════════════════════════════════════════════════════════════════ */

/* Share-button label shim (same pattern as ci-share-label). */
.sp-share-label { pointer-events: none; }

/* Dual-polarity cash-flow chart fills: green above zero, muted below. */
.sp-area__above { fill: var(--teal, #14b8a6); fill-opacity: .45; stroke: none; }
.sp-area__below { fill: var(--amber, #f59e0b); fill-opacity: .35; stroke: none; }
.sp-area__zeroline {
  stroke: var(--ink-2, #475569);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  stroke-opacity: .35;
}
.sp-area__breakeven {
  stroke: var(--accent, #0ea5e9);
  stroke-width: 1.25;
  stroke-dasharray: 4 3;
  stroke-opacity: .7;
}

/* Muted roof card when auto-sizing — signals it's informational only. */
#sp-roof-field.is-muted {
  opacity: .55;
  transition: opacity 160ms ease;
}
#sp-roof-field.is-muted:hover,
#sp-roof-field.is-muted:focus-within { opacity: 1; }

/* Field-hint row beneath roof for fit estimate. */
.field-hint {
  margin-top: .35rem;
  font-size: .8125rem;
  color: var(--ink-2, #475569);
}

/* Collapsible advanced-assumptions section. */
.form-section--advanced > summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
  display: flex;
  align-items: baseline;
  gap: .5rem;
}
.form-section--advanced > summary::-webkit-details-marker { display: none; }
.form-section--advanced > summary::before {
  content: "▸";
  font-size: .75rem;
  color: var(--ink-2, #475569);
  transition: transform 180ms ease;
  display: inline-block;
}
.form-section--advanced[open] > summary::before { transform: rotate(90deg); }
.form-section-title--summary { margin-bottom: 0; }

/* Warning list spacing. */
.sp-warning-item { display: block; }
.sp-warning-item + .sp-warning-item { margin-top: .25rem; }

/* 4-column sub-stats grid for the hero. */
.result-sub--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 640px) {
  .result-sub--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Native select input styling (matches .input-wrap visuals). The chevron is
   inlined as a background SVG so we don't need an extra element wrapping the
   <select>; right padding reserves space for it. */
.input-wrap .select-input {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background-color: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1.5l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding: 12px 36px 12px 12px;
  font-size: 16px;
  font-family: inherit;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  text-overflow: ellipsis;
}
.input-wrap .select-input:hover { background-color: var(--surface-2); }
.input-wrap .select-input::-ms-expand { display: none; }
.input-wrap .select-input option { color: var(--ink); background: var(--surface); }

/* Bar shade used in the year-by-year schedule. */
.amort-progress-bar.ci-bar-contrib  { background: var(--teal, #14b8a6); }
.amort-progress-bar.ci-bar-interest { background: var(--amber, #f59e0b); }

/* ═══════════════════════════════════════════
   Paint Calculator (en/construction/paint-calculator)
   ─────────────────────────────────────────────
   Layered on top of the shared .card / .chip / .input-wrap
   / .ci-stack-bar / .compare-grid system. Namespaced with
   `paint-` / `pc-` so nothing leaks into other pages.
   ═══════════════════════════════════════════ */

.paint-preset-row { flex-wrap: wrap; gap: 6px; }
.paint-preset-row .chip { font-size: 12.5px; padding: 5px 11px; }

.paint-surface-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.paint-surface {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink-2);
  border-radius: var(--radius-full, 999px);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .15s, background .15s, color .15s;
}
.paint-surface:hover { border-color: var(--accent); color: var(--ink); background: var(--accent-soft); }
.paint-surface:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.paint-surface__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  background: transparent;
  transition: background .15s, border-color .15s;
}
.paint-surface.is-on {
  color: var(--ink);
  border-color: var(--accent);
  background: var(--accent-soft);
}
.paint-surface.is-on .paint-surface__dot {
  background: var(--accent);
  border-color: var(--accent);
}
.paint-surface-hint {
  margin-top: 8px;
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.4;
}

/* Advanced settings collapsible. */
.paint-advanced-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  padding: 6px 10px;
  background: none;
  border: 0;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.paint-advanced-toggle:hover { color: var(--accent); }
.paint-advanced-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.paint-advanced-chevron { transition: transform .2s; }
.paint-advanced-toggle.is-open .paint-advanced-chevron { transform: rotate(90deg); }
.paint-advanced-panel {
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.paint-advanced-panel .field:last-child { margin-bottom: 0; }

/* Action row + warning zone — match the compound-interest shape. */
.pc-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.pc-warning {
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(245, 158, 11, .1);
  border: 1px solid rgba(245, 158, 11, .25);
  color: #92400e;
  font-size: 12.5px;
  border-radius: var(--radius-md);
  line-height: 1.4;
}
[data-theme='dark'] .pc-warning { color: #fcd34d; }

/* Room preview SVG. */
.paint-room-card .card-body { padding-top: 10px; }
.paint-room-svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 180px;
}
.paint-room-wall {
  fill: var(--surface-2);
  stroke: var(--line-strong);
  stroke-width: 1.5;
}
.paint-room-wall.is-on {
  fill: var(--accent-soft);
  stroke: var(--accent);
}
.paint-room-ceiling { fill: var(--teal, #14b8a6); }
.paint-room-trim    { fill: var(--amber, #f59e0b); }
.paint-room-divider {
  stroke: var(--line);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}
.paint-room-door   { fill: #a16207; stroke: none; }
.paint-room-window { fill: #0ea5e9; stroke: none; opacity: .8; }
.paint-room-label {
  font-family: var(--font-mono);
  font-size: 9px;
  fill: var(--ink-3);
  text-anchor: middle;
}
.paint-room-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 10px;
  font-size: 12px;
  color: var(--ink-2);
}
.paint-room-legend .sw {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 2px;
  margin-right: 6px;
  vertical-align: middle;
}
.paint-sw--wall   { background: var(--accent-soft); border: 1px solid var(--accent); }
.paint-sw--door   { background: #a16207; }
.paint-sw--window { background: #0ea5e9; }

/* Shopping list. */
.paint-shopping-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.paint-shopping-table th,
.paint-shopping-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.paint-shopping-table thead th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-3);
  font-weight: 600;
}
.paint-shopping-table .paint-shopping-cost { text-align: right; white-space: nowrap; }
.paint-shopping-detail { color: var(--ink-3); font-size: 12px; }
.paint-shopping-total td {
  font-weight: 600;
  color: var(--ink);
  border-top: 2px solid var(--line-strong);
  border-bottom: 0;
}
.paint-shopping-empty {
  text-align: center;
  padding: 20px 10px;
  color: var(--ink-3);
  font-size: 12.5px;
  font-style: italic;
}

/* Solved-for field dimming when in budget/cans mode would go here
   (kept minimal — those fields just hide via the template). */

/* ═══════════════════════════════════════════
   Standard Deviation Calculator
   ─────────────────────────────────────────────
   Layered on top of the shared .card / .chip / .input-wrap
   system. All IDs prefixed `sd-`. Visuals: histogram (bars, ±σ
   bands, mean line), boxplot, deviation table with z-score
   coloring, five-number summary grid.
   ═══════════════════════════════════════════ */

.sd-textarea {
  width: 100%;
  min-height: 80px;
  resize: vertical;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 14px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
}
.sd-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

.sd-input-actions {
  display: flex;
  gap: 14px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.sd-invalid-notice {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, #f59e0b 12%, transparent);
  color: var(--ink-2);
  font-size: 12.5px;
  border-left: 3px solid #f59e0b;
}

.sd-table-wrap {
  overflow-x: auto;
  margin-top: 6px;
}

.sd-io-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.sd-io-table thead th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-3);
  font-weight: 600;
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
}
.sd-io-table tbody td {
  padding: 4px 6px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.sd-io-table input.input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
}
.sd-io-table input.input:focus {
  outline: none;
  border-color: var(--accent);
}
.sd-row-remove {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-3);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.sd-row-remove:hover {
  background: color-mix(in srgb, #ef4444 14%, transparent);
  color: #ef4444;
}

/* Five-number summary grid (result panel) */
.sd-fivenum-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.sd-fivenum {
  text-align: center;
  padding: 10px 6px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.sd-fivenum-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-3);
  font-weight: 600;
  margin-bottom: 4px;
}
.sd-fivenum-value {
  font-size: 13.5px;
  color: var(--ink);
}
.sd-fivenum-extra {
  display: flex;
  gap: 18px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--ink-3);
}
.sd-fivenum-extra span strong,
.sd-fivenum-extra .mono { color: var(--ink-2); font-weight: 500; }

@media (max-width: 640px) {
  .sd-fivenum-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .sd-fivenum { padding: 8px 2px; }
  .sd-fivenum-value { font-size: 12px; }
}

.sd-interp {
  margin: 0 0 14px;
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.55;
}

/* Histogram */
.sd-hist-chart { position: relative; }
.sd-hist__bar {
  fill: var(--accent);
  opacity: .85;
  transition: opacity var(--transition-fast);
}
.sd-hist__bar:hover { opacity: 1; }
.sd-hist__band {
  fill: var(--accent);
}
.sd-hist__band--1 { opacity: .12; }
.sd-hist__band--2 { opacity: .06; }
.sd-hist__mean-line {
  stroke: var(--amber, #f59e0b);
  stroke-width: 2;
  stroke-dasharray: 4 3;
}

.sd-legend-line::before,
.sd-legend-band::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 10px;
  margin-right: 6px;
  vertical-align: middle;
  border-radius: 2px;
}
.sd-legend-line--mean::before {
  height: 0;
  border-top: 2px dashed var(--amber, #f59e0b);
  background: transparent;
}
.sd-legend-band--1::before {
  background: color-mix(in srgb, var(--accent) 25%, transparent);
}
.sd-legend-band--2::before {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

/* Boxplot */
.sd-box-chart {
  position: relative;
  padding: 14px 0 48px;
}
.sd-box__whisker {
  stroke: var(--ink-2);
  stroke-width: 1.5;
}
.sd-box__cap {
  stroke: var(--ink-2);
  stroke-width: 1.5;
}
.sd-box__box {
  fill: color-mix(in srgb, var(--accent) 22%, transparent);
  stroke: var(--accent);
  stroke-width: 1.5;
}
.sd-box__median {
  stroke: var(--amber, #f59e0b);
  stroke-width: 2.5;
}
.sd-box__outlier {
  fill: #ef4444;
  opacity: .8;
}
.sd-box-labels {
  position: relative;
  height: 36px;
  margin-top: 6px;
}
.sd-box-labels span {
  position: absolute;
  transform: translateX(-50%);
  font-size: 10.5px;
  line-height: 1.3;
  text-align: center;
  color: var(--ink-3);
  white-space: nowrap;
}

/* Deviation table z-score + deviation row coloring */
.sd-dev-table td.sd-dev-zcol { text-align: right; }
.sd-dev-table.sd-hide-z .sd-dev-zcol { display: none; }
.sd-dev-row--pos td:nth-child(2) { color: #059669; }
.sd-dev-row--neg td:nth-child(2) { color: #dc2626; }
.sd-dev-z--mid { color: var(--amber, #f59e0b); font-weight: 600; }
.sd-dev-z--hi  { color: #dc2626; font-weight: 700; }

.sd-dev-toggle { margin-top: 12px; }

/* Formula radical symbol for the sd equation */
.sd-formula-radical {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.sd-formula-radical__sym {
  font-size: 1.8em;
  line-height: 1;
  font-weight: 300;
  color: var(--accent);
  margin-right: 2px;
}

[data-theme='dark'] .sd-fivenum {
  background: var(--surface-2);
  border-color: var(--line-strong);
}
[data-theme='dark'] .sd-invalid-notice {
  background: color-mix(in srgb, #f59e0b 18%, transparent);
}

/* ─── Mean / Median / Mode calculator ──────────────────────────────
   Reuses .card, .form-section, .chip-row, .toggle-group, .result-hero,
   .breakdown-card, .compare-card, .sd-fivenum-grid, .sd-textarea,
   .sd-input-actions, .sd-invalid-notice, .sd-hist__bar, and the shared
   .amort-progress/.ci-bar-contrib progress row. These rules add only
   the median-line colour, the sorted-chip pills, the frequency-table
   mode highlight, and a small tweak to the variance-mode label. */

.mmm-hist__median-line {
  stroke: #14b8a6;
  stroke-width: 2;
  stroke-dasharray: 4 3;
}
.mmm-legend-line--median::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 0;
  margin-right: 6px;
  vertical-align: middle;
  border-top: 2px dashed #14b8a6;
}

.mmm-sorted-chips {
  gap: 6px;
  flex-wrap: wrap;
}
.mmm-sorted-chip {
  font-family: var(--font-mono);
  font-size: 12.5px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.mmm-sorted-chip:hover { border-color: var(--accent); }
.mmm-sorted-chip--median {
  border-color: #14b8a6;
  color: #14b8a6;
}
.mmm-sorted-chip--mode {
  background: color-mix(in srgb, var(--amber, #f59e0b) 18%, transparent);
  border-color: var(--amber, #f59e0b);
  color: var(--ink);
  font-weight: 600;
}
.mmm-sorted-chip--copied {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.mmm-mode-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--amber, #f59e0b);
  color: #fff;
  margin-left: 6px;
  vertical-align: middle;
}
.mmm-freq-row--mode td {
  background: color-mix(in srgb, var(--amber, #f59e0b) 9%, transparent);
}
[data-theme='dark'] .mmm-freq-row--mode td {
  background: color-mix(in srgb, var(--amber, #f59e0b) 18%, transparent);
}

.mmm-var-mode {
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 400;
  margin-left: 4px;
}

.mmm-steps-details {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 4px 12px;
  background: var(--surface);
}
.mmm-steps-details[open] { padding-bottom: 12px; }
.mmm-steps-summary {
  cursor: pointer;
  padding: 8px 0;
  font-weight: 600;
  color: var(--ink-2);
  user-select: none;
}
.mmm-steps-summary:hover { color: var(--accent); }

/* ─── Flooring calculator ──────────────────────────────────────────
   Reuses shared .result-hero, .compare-card, .ci-stack-bar, and
   .breakdown-card systems; only adds the multi-room repeater and the
   scaled room-preview SVG. */

.toggle-group--sm { margin-left: auto; }

.fl-rooms { display: flex; flex-direction: column; gap: 8px; }

.fl-room {
  display: grid;
  grid-template-columns: 60px 1fr;
  align-items: center;
  gap: 10px;
}

.fl-room-label {
  font-size: var(--text-xs);
  color: var(--ink-3);
  font-weight: var(--font-medium);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.fl-room-inputs {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto;
  align-items: center;
  gap: 6px;
}

.fl-room-input { min-width: 0; }
.fl-room-x { color: var(--ink-3); font-weight: var(--font-semibold); text-align: center; }

.fl-room-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-3);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.fl-room-remove:hover {
  color: var(--rose, #dc2626);
  border-color: var(--rose, #dc2626);
  background: var(--surface-2);
}
.fl-room-remove--hidden { visibility: hidden; border: 0; background: transparent; }

.fl-add-room {
  margin-top: 10px;
  width: 100%;
}

/* Shape preview */
.fl-preview-card { margin-top: 16px; }

.fl-preview-wrap {
  background: var(--surface-2);
  border-radius: 10px;
  padding: 10px;
}

.fl-preview-svg {
  width: 100%;
  height: auto;
  display: block;
  color: var(--ink);
}

.fl-prev-floor  { fill: var(--surface); }
.fl-prev-plank  {
  fill: transparent;
  stroke: color-mix(in srgb, var(--accent) 45%, transparent);
  stroke-width: 0.6;
}
.fl-prev-border {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
}
.fl-prev-label  {
  fill: var(--ink-2);
  font-size: 11px;
  font-weight: var(--font-medium);
  font-variant-numeric: tabular-nums;
  paint-order: stroke;
  stroke: var(--surface);
  stroke-width: 3;
}

[data-theme='dark'] .fl-prev-floor { fill: color-mix(in srgb, var(--surface) 70%, black); }
[data-theme='dark'] .fl-prev-plank { stroke: color-mix(in srgb, var(--accent) 55%, transparent); }
[data-theme='dark'] .fl-prev-label { stroke: var(--surface-2); }

@media (max-width: 540px) {
  .fl-room { grid-template-columns: 1fr; gap: 6px; }
  .fl-room-label { margin-bottom: 2px; }
  .toggle-group--sm { margin-left: 0; }
}

/* ═════════════════════════════════════════════════════════════════
   Renovation Budget Calculator
   Reuses .info-tip, .chip, .chip--stacked, .ci-actions, .ci-warning,
   .ci-stack-bar, .ci-stack-seg, .ci-delta-badge, .pulse-dot,
   .result-hero, .result-tagline, .compare-card, .hero-action, .dot,
   .delta--good, .delta--bad, .card-link.
   Everything below is rb-specific layout.
   ═════════════════════════════════════════════════════════════════ */

/* Rooms list — one card per room, stacked */
.rb-rooms { display: flex; flex-direction: column; gap: 16px; margin-bottom: 12px; }
.rb-room {
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 10px;
  padding: 14px 16px;
  background: var(--surface-2, #fafafa);
}
.rb-room__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.rb-room__label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3, #6b7280);
}
.rb-room__num { font-family: var(--font-mono); }
.rb-room__remove {
  background: transparent;
  border: 1px solid var(--line, #e5e7eb);
  color: var(--ink-3, #6b7280);
  width: 24px; height: 24px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 120ms, color 120ms, background 120ms;
}
.rb-room__remove:hover {
  border-color: var(--red, #ef4444);
  color: var(--red, #ef4444);
  background: rgba(239, 68, 68, 0.08);
}
.rb-room__project-groups { display: flex; flex-direction: column; gap: 6px; }
.chip-group-label {
  width: 100%;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3, #6b7280);
  font-weight: 600;
  padding: 2px 2px 0;
}
.rb-add-room {
  width: 100%;
  border-style: dashed !important;
  font-weight: 500;
}
.rb-add-room:hover {
  border-style: solid !important;
}

/* Low→mid→high range bar in the hero */
.rb-range { margin: 14px 0 12px; }
.rb-range-bar {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
  margin-bottom: 8px;
}
.rb-range-fill {
  position: absolute;
  top: 0; bottom: 0;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.55),
    rgba(255, 255, 255, 0.95),
    rgba(255, 255, 255, 0.55));
  border-radius: 999px;
  transition: left 200ms ease, right 200ms ease;
}
.rb-range-mid {
  position: absolute;
  top: -3px;
  width: 4px;
  height: 16px;
  margin-left: -2px;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25);
  transition: left 200ms ease;
}
.rb-range-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  gap: 8px;
  color: rgba(255, 255, 255, 0.85);
}
.rb-range-labels > div {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.rb-range-tag {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.75;
}

/* Emphasize the per-sqft stat in the hero */
.result-sub-item--primary {
  position: relative;
}
.result-sub-item--primary::before {
  content: '';
  position: absolute;
  left: -8px; top: 4px; bottom: 4px;
  width: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.55);
}

/* Drivers card */
.rb-drivers-card .card-body { padding-top: 8px; }
.rb-drivers {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rb-drivers li {
  position: relative;
  padding: 8px 10px 8px 28px;
  border-radius: 8px;
  background: var(--surface-2, #fafafa);
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ink-2, #374151);
}
.rb-drivers li::before {
  content: '•';
  position: absolute;
  left: 12px; top: 8px;
  color: var(--accent, #3b82f6);
  font-size: 14px;
  line-height: 1.4;
}
.rb-drivers__empty { color: var(--ink-3, #6b7280); font-style: italic; }
.rb-drivers__empty::before { content: '' !important; }

/* Tighter layout on narrow screens */
@media (max-width: 540px) {
  .rb-room { padding: 12px; }
  .rb-range-labels { font-size: 10px; }
  .chip-group-label { font-size: 10px; }
}

/* ════════════════════════════════════════════════════════════
   JSON Formatter (v2) — editor, tree view, status, actions.
   Overrides older .json-* rules earlier in this file.
   ════════════════════════════════════════════════════════════ */

.json-card-header { flex-direction: column; align-items: stretch; gap: 10px; }
.json-card-title-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.json-header-line {
  font-size: 13px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.json-size-diff {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 12px;
  padding: 4px 10px;
  background: var(--accent-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  width: fit-content;
}
.json-size-diff[hidden] { display: none; }
.json-size-diff .json-size-from { color: var(--ink-3); text-decoration: line-through; }
.json-size-diff .json-size-arrow { color: var(--ink-3); }
.json-size-diff .json-size-to { color: var(--ink); font-weight: 600; }
.json-size-diff .json-size-save {
  padding: 1px 8px;
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  font-weight: 700;
  font-size: 11px;
}

/* Status badges */
.json-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-3);
}
.json-badge.is-ok { background: rgba(16, 185, 129, 0.14); border-color: rgba(16, 185, 129, 0.4); color: #059669; }
.json-badge.is-error { background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.45); color: #dc2626; }
.json-badge.is-warn { background: rgba(245, 158, 11, 0.14); border-color: rgba(245, 158, 11, 0.4); color: #d97706; }
.json-badge.is-muted { background: var(--surface-2); color: var(--ink-3); }

/* Action toolbar */
.json-toolbar-row {
  display: flex; flex-wrap: wrap; gap: 10px 16px;
  align-items: center;
  padding: 10px 0 4px;
  border-top: 1px solid var(--line);
  margin-top: 4px;
}
.json-actions {
  display: flex; flex-wrap: wrap; gap: 4px;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}
.json-actions .chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: background-color .12s, border-color .12s, transform .08s;
  white-space: nowrap;
}
.json-actions .chip:hover { background: var(--surface-2); }
.json-actions .chip:active { transform: translateY(1px); }
.json-actions .chip svg { opacity: 0.85; }
.json-actions .chip.is-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.json-actions .chip.is-primary:hover { filter: brightness(1.05); }
.json-actions .chip.is-secondary {
  background: var(--surface);
  border-color: var(--accent);
  color: var(--accent);
}
.json-actions .chip.is-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ink-2);
}
.json-actions .chip.is-ghost:hover { background: var(--surface-2); border-color: var(--line); color: var(--ink); }
.json-actions .chip.is-danger-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ink-3);
}
.json-actions .chip.is-danger-ghost:hover { background: rgba(239, 68, 68, 0.08); color: #dc2626; border-color: rgba(239, 68, 68, 0.3); }
.json-actions-sep {
  width: 1px; height: 18px;
  background: var(--line);
  margin: 0 6px;
  align-self: center;
}

/* Export dropdown */
.json-export-wrap { position: relative; }
.json-export-menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 240px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0,0,0,.1);
  z-index: 20;
  display: none;
}
.json-export-menu.is-open { display: block; }
.json-export-menu button {
  display: block; width: 100%;
  padding: 8px 10px;
  text-align: left;
  font-size: 13px;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
.json-export-menu button em { color: var(--ink-3); font-style: normal; font-size: 11px; }
.json-export-menu button:hover { background: var(--surface-2); }

/* Controls (indent + sort) */
.json-controls {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  flex: 0 0 auto;
  margin-left: auto;
}
.json-control {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px;
  font-size: 12px;
  color: var(--ink-2);
}
.json-control-label {
  text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 700; font-size: 10px; color: var(--ink-3);
}
.json-select {
  height: 28px;
  padding: 0 8px;
  font-size: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  border-radius: 6px;
}
.json-control--check {
  cursor: pointer;
  user-select: none;
}
.json-control--check input { accent-color: var(--accent); }

/* Mobile pane tabs */
.json-pane-tabs {
  display: none;
  gap: 4px;
  margin: 8px 0 2px;
  padding: 2px;
  background: var(--surface-2);
  border-radius: 8px;
}
.json-pane-tab {
  flex: 1;
  padding: 6px 10px;
  border: 0;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3);
  background: transparent;
  cursor: pointer;
}
.json-pane-tab.is-active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.05); }
@media (max-width: 720px) {
  .json-pane-tabs { display: flex; }
  .json-grid[data-active-pane="input"]  .json-pane--output { display: none; }
  .json-grid[data-active-pane="output"] .json-pane--input  { display: none; }
}

/* Grid — same as before but header styling moved */
.json-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 10px;
}
@media (max-width: 720px) {
  .json-grid { grid-template-columns: 1fr; }
}

/* Panes */
.json-pane { display: flex; flex-direction: column; min-width: 0; }
.json-pane-head {
  display: flex; align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--ink-3);
  margin-bottom: 8px;
  height: 32px;
  flex-wrap: nowrap;
  overflow: hidden;
}
.json-pane-head-left { display: flex; align-items: center; gap: 10px; flex: 0 1 auto; min-width: 0; }
.json-pane-head-right { display: flex; align-items: center; gap: 10px; flex: 0 1 auto; min-width: 0; margin-left: auto; }
.json-pane-title {
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-size: 11px;
  white-space: nowrap;
}
.json-pane-meta {
  font-size: 11px; color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.json-hint { display: none; }

/* View tabs (Text / Tree) */
.json-view-tabs {
  display: inline-flex;
  height: 26px;
  padding: 2px;
  background: var(--surface-2);
  border-radius: 6px;
}
.json-view-tab {
  display: inline-flex; align-items: center;
  padding: 0 10px;
  border: 0; border-radius: 4px;
  font-size: 11px; font-weight: 600;
  color: var(--ink-3);
  background: transparent;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.json-view-tab.is-active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.06); }

/* Search within output */
.json-search {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px;
  padding: 0 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  flex: 0 1 auto;
  min-width: 0;
}
.json-search svg { color: var(--ink-3); flex: 0 0 auto; }
.json-search input {
  border: 0; outline: none;
  background: transparent;
  font-size: 12px;
  color: var(--ink);
  width: 110px;
  min-width: 0;
}
.json-search-count { font-size: 10px; color: var(--ink-3); min-width: 50px; }
.json-search-hit { background: rgba(245, 158, 11, 0.35); color: inherit; border-radius: 2px; padding: 0 1px; }

/* ── Input editor with gutter ── */
.json-editor {
  position: relative;
  display: flex;
  height: 480px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.json-editor:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.json-editor.is-drop {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.json-gutter {
  flex: 0 0 auto;
  width: 48px;
  margin: 0;
  padding: 12px 8px 12px 10px;
  background: var(--surface);
  border-right: 1px solid var(--line);
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.55;
  text-align: right;
  user-select: none;
  overflow: hidden;
  white-space: pre;
}
.json-editor .json-textarea {
  flex: 1 1 auto;
  width: auto;
  min-height: 0;
  max-height: none;
  height: auto;
  padding: 12px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.55;
  resize: none;
  outline: none;
  box-sizing: border-box;
  white-space: pre;
  tab-size: 2;
}

/* ── Output ── */
.json-output-wrap {
  position: relative;
  height: 480px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  overflow: auto;
}
.json-output {
  width: auto;
  min-height: 0;
  max-height: none;
  margin: 0;
  padding: 12px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.55;
  white-space: pre;
  tab-size: 2;
  color: var(--ink);
}
.json-tree-wrap {
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.55;
}
.json-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%;
  padding: 40px 20px;
  text-align: center;
  color: var(--ink-3);
}
.json-empty[hidden] { display: none; }
.json-empty svg { margin-bottom: 10px; color: var(--ink-3); }
.json-empty-title { font-weight: 600; color: var(--ink-2); margin-bottom: 4px; }
.json-empty-body { font-size: 12px; }

/* ── Tree view ── */
.json-tree, .json-tree-children { list-style: none; padding: 0; margin: 0; }
.json-tree-children {
  padding-left: 18px;
  border-left: 1px dashed var(--line);
  margin-left: 8px;
}
.json-tree-node.is-collapsed > .json-tree-children { display: none; }
.json-tree-row {
  display: flex; align-items: baseline; gap: 4px;
  padding: 1px 4px;
  border-radius: 4px;
}
.json-tree-row:hover { background: var(--surface); }
.json-tree-row:hover .json-tree-path-btn { opacity: 1; }
.json-tree-toggle {
  flex: 0 0 auto;
  width: 14px; height: 14px;
  margin-right: 2px;
  border: 0;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  padding: 0;
  font-size: 10px;
  line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .12s;
}
.json-tree-toggle::before {
  content: '▾';
}
.json-tree-node.is-collapsed > .json-tree-row > .json-tree-toggle::before {
  content: '▸';
}
.json-tree-toggle.is-leaf { visibility: hidden; cursor: default; }
.json-tree-key { color: var(--accent); font-weight: 600; }
.json-tree-sep { color: var(--ink-3); }
.json-tree-val { flex: 1 1 auto; overflow-wrap: anywhere; }
.json-tree-preview { color: var(--ink-3); font-style: italic; font-size: 12px; }
.json-tree-path-btn {
  flex: 0 0 auto;
  padding: 0 6px;
  border: 0;
  background: transparent;
  color: var(--ink-3);
  font-size: 12px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s, color .15s;
  border-radius: 4px;
}
.json-tree-path-btn:hover { color: var(--accent); background: var(--accent-soft); }

/* ── Error / warning blocks ── */
.json-error {
  margin-top: 14px;
  padding: 12px 14px;
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-left: 3px solid #dc2626;
  border-radius: var(--radius-md);
}
.json-error-head { display: flex; align-items: center; gap: 8px; }
.json-error-head svg { color: #dc2626; flex: 0 0 auto; }
.json-error-title { font-size: 13px; font-weight: 700; color: #dc2626; flex: 1 1 auto; }
.json-error-goto {
  padding: 3px 10px;
  font-size: 11px; font-weight: 600;
  background: #dc2626; color: #fff;
  border: 0; border-radius: 6px;
  cursor: pointer;
}
.json-error-goto:hover { filter: brightness(1.05); }
.json-error-msg {
  margin-top: 6px;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--ink-2);
}
.json-error-msg strong { color: var(--ink); }
.json-warn {
  margin-top: 10px;
  padding: 10px 14px;
  display: flex; align-items: center; gap: 8px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-left: 3px solid #d97706;
  border-radius: var(--radius-md);
  color: var(--ink-2);
  font-size: 12px;
}
.json-warn[hidden] { display: none; }
.json-warn svg { color: #d97706; flex: 0 0 auto; }

/* ── Type distribution bar (right column) ── */
.json-typedist { margin: 4px 0; }
.json-typedist:empty + .json-typedist-empty { display: block; }
.json-typedist-empty { display: none; font-size: 12px; color: var(--ink-3); }
.json-typedist:not(:empty) + .json-typedist-empty { display: none; }
.typedist-bar {
  display: flex; width: 100%; height: 10px;
  border-radius: 6px; overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--line);
  margin-bottom: 10px;
}
.typedist-seg { height: 100%; }
.typedist-seg.is-string  { background: #16A34A; }
.typedist-seg.is-number  { background: #7C3AED; }
.typedist-seg.is-boolean { background: #EA580C; }
.typedist-seg.is-null    { background: #9CA3AF; }
.typedist-seg.is-object  { background: var(--accent); }
.typedist-seg.is-array   { background: #14b8a6; }
.typedist-legend {
  display: flex; flex-wrap: wrap; gap: 6px;
  font-size: 11px; color: var(--ink-2);
}
.typedist-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
}
.typedist-chip .dot { width: 8px; height: 8px; border-radius: 50%; }
.typedist-chip .dot.is-string  { background: #16A34A; }
.typedist-chip .dot.is-number  { background: #7C3AED; }
.typedist-chip .dot.is-boolean { background: #EA580C; }
.typedist-chip .dot.is-null    { background: #9CA3AF; }
.typedist-chip .dot.is-object  { background: var(--accent); }
.typedist-chip .dot.is-array   { background: #14b8a6; }
.typedist-chip b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Tips list */
.json-tip-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--ink-2); }
.json-tip-list li { padding-left: 14px; position: relative; line-height: 1.5; }
.json-tip-list li::before { content: '→'; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 700; }

/* Examples gallery */
.json-examples-section .calc-section-sub { margin: 0 0 14px; color: var(--ink-3); font-size: 13px; }
.json-examples-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.json-example-card {
  text-align: left;
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color .15s, transform .1s, box-shadow .15s;
  font: inherit;
  color: inherit;
}
.json-example-card:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,.05); }
.json-example-tag {
  align-self: flex-start;
  padding: 2px 8px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
}
.json-example-title { font-weight: 600; font-size: 14px; color: var(--ink); }
.json-example-body { font-size: 12px; color: var(--ink-2); line-height: 1.5; }

/* How-it-works */
.json-howitworks .prose p { margin-bottom: 10px; }
.json-howitworks code, .json-errors-section code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}

/* Common errors */
.json-errors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin-top: 8px;
}
.json-error-card {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  display: flex; flex-direction: column; gap: 6px;
}
.json-error-card-title { font-weight: 600; color: var(--ink); font-size: 13px; }
.json-error-card-body { font-size: 12px; color: var(--ink-2); line-height: 1.5; }
.json-error-card .mono {
  margin: 4px 0 0;
  padding: 8px 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  border-radius: 6px;
  white-space: pre-wrap;
  word-break: break-word;
}
.json-error-card .json-error-before {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #991b1b;
  text-decoration: line-through;
  text-decoration-color: rgba(239, 68, 68, 0.4);
}
.json-error-card .json-error-after {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #065f46;
}
.json-spec-links {
  margin-top: 14px;
  font-size: 12px;
  color: var(--ink-3);
}
.json-spec-links a { color: var(--accent); text-decoration: none; }
.json-spec-links a:hover { text-decoration: underline; }
.json-spec-links .sep { margin: 0 8px; }

/* Syntax tokens (re-declared for priority over earlier block) */
.json-output .json-key,  .json-tree .json-tree-key     { color: var(--accent); font-weight: 600; }
.json-output .json-string                             { color: #16A34A; }
.json-tree-val.json-string                             { color: #16A34A; }
.json-output .json-number                              { color: #7C3AED; }
.json-tree-val.json-number                             { color: #7C3AED; font-variant-numeric: tabular-nums; }
.json-output .json-boolean                             { color: #EA580C; font-weight: 600; }
.json-tree-val.json-boolean                            { color: #EA580C; font-weight: 600; }
.json-output .json-null                                { color: #9CA3AF; font-style: italic; }
.json-tree-val.json-null                               { color: #9CA3AF; font-style: italic; }

/* ── Dark mode ── */
[data-theme='dark'] .json-editor,
[data-theme='dark'] .json-output-wrap,
[data-theme='dark'] .json-gutter { background: #0f172a; border-color: #1f2a44; }
[data-theme='dark'] .json-gutter { background: #0b1324; color: #64748b; border-right-color: #1f2a44; }
[data-theme='dark'] .json-textarea, [data-theme='dark'] .json-output, [data-theme='dark'] .json-tree-wrap { color: #e2e8f0; }
[data-theme='dark'] .json-output .json-key,
[data-theme='dark'] .json-tree .json-tree-key        { color: #5EEAD4; }
[data-theme='dark'] .json-output .json-string,
[data-theme='dark'] .json-tree-val.json-string       { color: #4ADE80; }
[data-theme='dark'] .json-output .json-number,
[data-theme='dark'] .json-tree-val.json-number       { color: #A78BFA; }
[data-theme='dark'] .json-output .json-boolean,
[data-theme='dark'] .json-tree-val.json-boolean      { color: #FB923C; }
[data-theme='dark'] .json-output .json-null,
[data-theme='dark'] .json-tree-val.json-null         { color: #94a3b8; }
[data-theme='dark'] .json-error-card .json-error-before { background: rgba(239, 68, 68, 0.14); color: #fecaca; }
[data-theme='dark'] .json-error-card .json-error-after  { background: rgba(16, 185, 129, 0.14); color: #a7f3d0; }

/* ═══════════════════════════════════════════
   Unix timestamp converter — scoped polish
   ═══════════════════════════════════════════ */
.ts-card .card-title { display: inline-flex; align-items: baseline; gap: 8px; }
.ts-dir-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: var(--radius-full, 999px);
  background: var(--accent-soft, rgba(99,102,241,0.1)); color: var(--accent);
  font-size: 13px; font-weight: 700;
  transform: translateY(1px);
}
.ts-card--encode .ts-dir-icon { background: rgba(127, 224, 168, 0.18); color: #2e8a5c; }
.ts-card--decode .ts-dir-icon { background: rgba(245, 179, 82, 0.18); color: #a66a14; }
[data-theme='dark'] .ts-card--encode .ts-dir-icon { color: #9cf0b8; }
[data-theme='dark'] .ts-card--decode .ts-dir-icon { color: #ffcc8a; }

.ts-result-hero .result-value { font-size: 36px; word-break: break-word; }
@media (max-width: 560px) {
  .ts-result-hero .result-value { font-size: 28px; }
}
.ts-result-hero .result-eyebrow { justify-content: flex-start; }
.ts-epoch-live {
  margin-left: auto; font-variant-numeric: tabular-nums;
  font-size: 11px; letter-spacing: 0.04em;
  color: rgba(255,255,255,0.75);
  padding: 2px 8px; border-radius: var(--radius-full, 999px);
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
}
.ts-result-hero .result-tagline {
  font-size: 13px; color: rgba(255,255,255,0.65);
  margin: 6px 0 14px; min-height: 1em;
}

.ts-format-chips { margin: 4px 0 14px; flex-wrap: wrap; gap: 6px; }
.ts-format-chips .chip {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.85);
  font-size: 11px; padding: 4px 10px;
}
.ts-format-chips .chip:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.3);
  color: #fff;
}
.ts-format-chips .chip.active {
  background: rgba(255,255,255,0.95); color: #1a1a1a;
  border-color: rgba(255,255,255,0.95);
}

.ts-result-hero .result-sub {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px; margin-top: 8px;
}
.ts-result-hero .result-sub-item { min-width: 0; }
.ts-result-hero .result-sub-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  color: rgba(255,255,255,0.55); margin-bottom: 2px;
}
.ts-result-hero .result-sub-value {
  font-size: 12px; color: rgba(255,255,255,0.92);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Per-row copy button alignment inside breakdown rows */
.breakdown-row .ts-copy-btn { margin-left: auto; }

/* Chip modifiers used on the timestamp page */
.chip--sm { font-size: 11px; padding: 3px 9px; }
.chip-row--tight { gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.chip--alt {
  background: transparent; border-style: dashed; color: var(--ink-2);
}
.chip--alt:hover { color: var(--accent); border-color: var(--accent); }

/* "Detected: X" aux hint next to timezone label */
.aux { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
[id="dt-tz-detected"] { font-weight: 500; }

/* Edit-parts disclosure */
.ts-parts-disclosure { margin-top: 10px; }
.ts-parts-disclosure > summary {
  cursor: pointer; font-size: 12px; color: var(--ink-3);
  padding: 6px 0; user-select: none; list-style: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.ts-parts-disclosure > summary::-webkit-details-marker { display: none; }
.ts-parts-disclosure > summary::before {
  content: '▸'; font-size: 10px; transition: transform 150ms ease;
}
.ts-parts-disclosure[open] > summary::before { transform: rotate(90deg); }
.ts-parts-disclosure > summary:hover { color: var(--accent); }
.ts-parts-disclosure > .form-row { margin-top: 8px; }

/* Intervals reference under the quick-add chips */
.ts-intervals-ref { margin-top: 14px; opacity: 0.85; }

/* ─── Z-Score calculator ──────────────────────────────────────────
   Reuses .card, .form-section, .chip-row, .result-hero, .breakdown-card,
   .compare-card, .area-chart, .amort-table, and the shared input-wrap /
   slider-wrap widgets. These rules add only the bell-curve styling, the
   below/above distribution bar in the result panel, and the lookup-table
   column + highlight tweaks. */

/* Bell curve */
.zs-curve-chart { position: relative; }
.zs-curve__line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
}
.zs-curve__shade {
  fill: color-mix(in srgb, var(--accent) 28%, transparent);
  stroke: none;
  transition: d 120ms linear;
}
.zs-curve__mean {
  stroke: var(--ink-3, #6b7280);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: 0.7;
}
.zs-curve__marker {
  stroke: var(--amber, #f59e0b);
  stroke-width: 2;
}
.zs-curve__marker--b { stroke: #14b8a6; }
.zs-curve__marker-label {
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  fill: var(--ink-2);
}

.zs-sw-shade {
  display: inline-block;
  width: 14px; height: 10px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--accent) 28%, transparent);
  margin-right: 6px;
  vertical-align: middle;
}
.zs-legend-marker::before {
  content: '';
  display: inline-block;
  width: 14px; height: 0;
  margin-right: 6px;
  vertical-align: middle;
  border-top: 2px solid var(--amber, #f59e0b);
}

.zs-xlabel-sub {
  display: block;
  font-size: 10px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* Below/Above distribution bar in the result panel */
.zs-dist-bar {
  position: relative;
  display: flex;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-2, #f3f4f6);
  margin: 6px 0 12px;
}
.zs-dist-seg { display: block; height: 100%; transition: width 180ms ease; }
.zs-dist-seg--below { background: color-mix(in srgb, var(--accent) 65%, transparent); }
.zs-dist-seg--above { background: color-mix(in srgb, #14b8a6 55%, transparent); }
.zs-dist-marker {
  position: absolute;
  top: -3px; bottom: -3px;
  width: 2px;
  background: var(--amber, #f59e0b);
  transform: translateX(-50%);
  transition: left 180ms ease;
}

/* Lookup table: disclosure + highlight */
.zs-table-disclosure > summary {
  cursor: pointer;
  padding: 8px 0;
  color: var(--ink-2);
  font-weight: 500;
  list-style: none;
  user-select: none;
}
.zs-table-disclosure > summary::-webkit-details-marker { display: none; }
.zs-table-disclosure > summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 6px;
  font-size: 11px;
  transition: transform 150ms ease;
}
.zs-table-disclosure[open] > summary::before { transform: rotate(90deg); }

.zs-table-scroll { max-height: 360px; overflow-y: auto; }
.zs-table { width: 100%; }
.zs-table tr.zs-row--hl td {
  background: color-mix(in srgb, var(--amber, #f59e0b) 18%, transparent);
  font-weight: 600;
}

.card-subtext {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--ink-3);
}

@media (max-width: 640px) {
  .zs-col-above, .zs-col-extreme { display: none; }
}

[data-theme='dark'] .zs-dist-bar { background: var(--surface-2); }
[data-theme='dark'] .zs-curve__mean { stroke: var(--ink-3); }


/* ═══ Base64 encoder / decoder ════════════════════════════════════════
   Rides on the JSON-formatter card/pane classes; these rules add the
   segmented mode control, drop-zone overlay, file chip, preview pane,
   keyboard-shortcut footer, and the char counter in the pane heads. */
.b64-card { /* marker class for keyboard shortcut scoping */ }

/* Segmented Encode / Swap / Decode control. */
.b64-mode-seg {
  display: inline-flex;
  align-items: stretch;
  padding: 2px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  gap: 2px;
  flex: 0 0 auto;
}
.b64-mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s, color .12s, box-shadow .12s;
}
.b64-mode-btn:hover { color: var(--ink); }
.b64-mode-btn.is-active {
  background: var(--ink);
  color: var(--paper, #fff);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}
.b64-mode-btn.is-active svg { opacity: 1; }
.b64-mode-btn svg { opacity: .75; }
.b64-mode-swap {
  width: 28px;
  border: 0;
  background: transparent;
  color: var(--ink-3);
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s, transform .12s;
}
.b64-mode-swap:hover { background: var(--surface); color: var(--accent); }
.b64-mode-swap:active { transform: rotate(180deg); }

/* Decode-charset control line aligns with the toggle checkboxes. */
.b64-control--decode { flex-direction: row; gap: 8px; align-items: center; }
.b64-control--decode .json-control-label { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .02em; }
.b64-control--decode .json-select { min-width: 140px; }

/* Char counter in each pane head. */
.b64-char-count {
  font-size: 11px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Drop-zone hint overlay — shown when a file is being dragged over the
   input editor. Uses the existing .json-editor.is-drop class for the
   outer highlight. */
.b64-editor { position: relative; }
.b64-drop-hint {
  position: absolute; inset: 0;
  display: none;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 8px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
  font-size: 14px;
  pointer-events: none;
  border-radius: calc(var(--radius-md) - 1px);
  z-index: 2;
}
.b64-editor.is-drop .b64-drop-hint { display: flex; }
.b64-editor.is-drop .json-textarea { opacity: .2; }

/* HTML `hidden` must win over display:flex/inline-flex set by our own rules. */
.b64-file-chip[hidden],
.b64-preview[hidden],
.b64-card .json-empty[hidden] { display: none !important; }

/* File chip — appears below the editor when a file is loaded. */
.b64-file-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 6px 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  color: var(--ink-2);
}
.b64-file-chip svg { color: var(--ink-3); flex: 0 0 auto; }
.b64-file-name { font-weight: 600; color: var(--ink); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b64-file-size { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.b64-file-remove {
  border: 0;
  background: transparent;
  color: var(--ink-3);
  font-size: 16px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
  border-radius: 4px;
}
.b64-file-remove:hover { background: rgba(239, 68, 68, .12); color: #dc2626; }

/* Preview pane (image / PDF / JSON). */
.b64-output-wrap { display: flex; flex-direction: column; }
.b64-preview {
  border-top: 1px solid var(--line);
  padding: 12px 14px;
  background: var(--surface);
}
.b64-preview-head { display: flex; align-items: center; margin-bottom: 8px; }
.b64-preview-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); font-weight: 600; }
.b64-preview-img {
  max-width: 100%;
  max-height: 240px;
  border-radius: 6px;
  border: 1px solid var(--line);
  display: block;
  background: repeating-conic-gradient(var(--surface-2) 0% 25%, transparent 0% 50%) 0 0 / 16px 16px;
}
.b64-preview-pdf {
  width: 100%;
  height: 280px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-2);
}
.b64-preview-json {
  margin: 0;
  padding: 8px 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 12px;
  max-height: 200px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.b64-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--accent);
  color: var(--paper, #fff);
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
}
.b64-download-btn:hover { filter: brightness(1.05); }

/* Inline MIME pill in the header-line. */
.b64-mime-inline {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-2);
}

/* SHA value — monospaced, truncated, tooltip-ready. */
.b64-sha-value { cursor: help; }

/* Keyboard shortcut hint — runs across the bottom of the card. */
.b64-kbd-hint {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  font-size: 11px;
  color: var(--ink-3);
}
.b64-kbd-hint kbd {
  display: inline-block;
  padding: 1px 5px;
  margin-right: 2px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-2);
}

/* Options row — tighten up the spacing since we have four controls. */
.b64-controls { gap: 14px 18px; flex-wrap: wrap; }

/* Mobile polish — stack everything vertically, loosen the toolbar. */
@media (max-width: 640px) {
  .b64-mode-seg { flex: 1 1 100%; justify-content: center; }
  .b64-mode-btn { flex: 1 1 0; justify-content: center; }
  .b64-kbd-hint { display: none; }
  .b64-preview-img { max-height: 180px; }
  .b64-preview-pdf { height: 200px; }
  .b64-control--decode .json-select { min-width: 0; width: 100%; }
}

/* Dark-mode tweaks (fallback only — the variables already adapt). */
[data-theme='dark'] .b64-mode-btn.is-active {
  background: var(--ink);
  color: var(--paper);
}
[data-theme='dark'] .b64-preview-img {
  background: repeating-conic-gradient(#1f2937 0% 25%, #111827 0% 50%) 0 0 / 16px 16px;
}

/* ═════════════════════════════════════════════════════════════════════
 * Confidence Interval calculator
 * ═════════════════════════════════════════════════════════════════════ */

/* Range line under the hero value, e.g. "[46.42, 53.58]" */
.cint-range {
  font-size: 1rem;
  color: var(--text-secondary, var(--ink-2));
  margin-top: .25rem;
  letter-spacing: .01em;
}

/* Number-line strip — the shaded band represents the CI, the dot the mean. */
.cint-strip {
  width: 100%;
  margin: 1rem 0 .5rem;
}
.cint-strip svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}
.cint-strip__axis {
  stroke: var(--ink-3, #9ca3af);
  stroke-width: 1;
  stroke-opacity: .6;
}
.cint-strip__band {
  fill: var(--teal, #14b8a6);
  fill-opacity: .28;
  stroke: var(--teal, #14b8a6);
  stroke-opacity: .7;
  stroke-width: 1;
  transition: x .25s ease, width .25s ease;
}
.cint-strip__tick {
  stroke: var(--teal, #14b8a6);
  stroke-width: 2;
  transition: x1 .25s ease, x2 .25s ease;
}
.cint-strip__mean {
  fill: var(--ink, #111827);
  stroke: #fff;
  stroke-width: 2;
  transition: cx .25s ease;
}
.cint-strip__label {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  fill: var(--ink-2, #4b5563);
}
.cint-strip__mean-label {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 600;
  fill: var(--ink, #111827);
}

/* Critical-value reference table in the formula partial. */
.cint-table-heading {
  margin-top: 1.25rem;
  margin-bottom: .4rem;
  font-size: .95rem;
  font-weight: 600;
  color: var(--ink-2, #374151);
}
.cint-z-table {
  width: 100%;
  max-width: 360px;
  border-collapse: collapse;
  margin-bottom: 1rem;
}
.cint-z-table th,
.cint-z-table td {
  padding: .4rem .75rem;
  text-align: left;
  border-bottom: 1px solid var(--border, rgba(0,0,0,.08));
}
.cint-z-table th {
  font-weight: 600;
  color: var(--ink-2, #374151);
}

[data-theme='dark'] .cint-strip__mean {
  fill: var(--ink, #e5e7eb);
  stroke: var(--paper, #111827);
}

/* The result-hero gradient is dark (white text on green) — the default
   ink-coloured strip labels and bracket range vanish into the background.
   Force light fills on top of the hero. */
.result-hero .cint-range { color: rgba(255, 255, 255, 0.7); }
.result-hero .cint-strip__label { fill: rgba(255, 255, 255, 0.7); }
.result-hero .cint-strip__mean-label { fill: #fff; }
.result-hero .cint-strip__axis { stroke: rgba(255, 255, 255, 0.35); }
.result-hero .cint-strip__mean { fill: #fff; stroke: rgba(255, 255, 255, 0.35); }

/* ═══════════════════════════════════════════════════════════════════
   Stair Calculator — scoped styles for the redesigned page.
   All rules are namespaced under `.st-`, `#st-`, or `.st-code-`,
   and reuse shared tokens so they inherit the dark-theme overrides.
   ═══════════════════════════════════════════════════════════════════ */

/* Inline SVG stair diagram inside the result hero. */
.st-diagram {
  margin: 14px 0 8px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg, 14px);
}
.st-diagram svg { display: block; width: 100%; height: auto; max-height: 220px; }
.st-diag__grid line { stroke: rgba(255, 255, 255, 0.2); stroke-width: 1; }
.st-diag__stringer {
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
  fill: none;
}
.st-diag__steps {
  stroke: #ffffff;
  stroke-width: 2.5;
  fill: rgba(255, 255, 255, 0.18);
  stroke-linejoin: round;
}
.st-diag__arc {
  stroke: var(--amber, #f59e0b);
  stroke-width: 2;
  fill: none;
}
.st-diag__label {
  fill: #ffffff;
  font: 600 11px var(--font-mono, monospace);
  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.35);
  stroke-width: 2.5;
}
.st-diag__label--side { text-anchor: start; }

/* Hero tint for pass/fail status. Hero already has a gradient;
   these rules only shift the accent on ::before. */
.result-hero.st-hero--fail::before {
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.22), rgba(244, 63, 94, 0.05) 60%);
}
.result-hero.st-hero--pass::before {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.18), rgba(34, 197, 94, 0.04) 60%);
}

/* Compliance chips card */
.st-code-card { margin-top: 14px; }
.st-code-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (min-width: 1100px) {
  .st-code-chips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.st-code-chip {
  padding: 10px 12px;
  border-radius: var(--radius-md, 10px);
  border: 1px solid var(--line);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.st-code-chip__head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  font-weight: var(--font-semibold);
}
.st-code-chip__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  background: var(--surface-2);
  color: var(--ink-2);
}
.st-code-chip__name { font-size: var(--text-xs); }
.st-code-chip__value {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.st-code-chip__range {
  font-size: var(--text-xs);
  color: var(--ink-3);
}
.st-code-chip--pass {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.35);
}
.st-code-chip--pass .st-code-chip__icon {
  background: #16a34a;
  color: #ffffff;
}
.st-code-chip--fail {
  background: rgba(244, 63, 94, 0.08);
  border-color: rgba(244, 63, 94, 0.38);
}
.st-code-chip--fail .st-code-chip__icon {
  background: #dc2626;
  color: #ffffff;
}

[data-theme='dark'] .st-code-chip--pass { background: rgba(34, 197, 94, 0.12); }
[data-theme='dark'] .st-code-chip--fail { background: rgba(244, 63, 94, 0.14); }

/* Comfort band overlay on range sliders */
.slider-wrap { position: relative; }
.slider-wrap .comfort-band {
  position: absolute;
  top: 50%;
  height: 4px;
  border-radius: 2px;
  pointer-events: none;
  background: rgba(34, 197, 94, 0.25);
  border-top: 1px dashed rgba(34, 197, 94, 0.55);
  border-bottom: 1px dashed rgba(34, 197, 94, 0.55);
  transform: translateY(-50%);
}
/* Position comfort bands: values are percentages across the slider track.
   Rise slider is 20–200 in; comfortable 7–7.75 in per step × ~14 steps
   ≈ 98–108 in band. Normalized to slider range: (98-20)/(200-20)=43%,
   (108-20)/180=49%. We render a small visual hint. */
.slider-wrap .comfort-band[data-band="rise"] {
  left: 43%;
  right: 51%;
}
/* Run slider is 8–14 in; comfortable 10–11 in: (10-8)/6=33%, (11-8)/6=50%. */
.slider-wrap .comfort-band[data-band="run"] {
  left: 33%;
  right: 50%;
}

/* Solved-field visual hint — mirrors compound-interest .is-solved */
.field.is-solved input[type="number"] {
  background: var(--accent-soft);
  color: var(--accent);
  cursor: default;
}

/* Share button label dynamic text */
.st-share-label { pointer-events: none; }

/* Per-step table — reuses ci-schedule / amort-table. No extra rules needed. */


/* ─────────────────────────────────────────────────────────────────
   URL encoder / decoder — tool-specific styles.
   Rides on the .json-card + .b64-card archetype (segmented control,
   pane heads, kbd hints). These rules add: dual-axis scope toggle
   spacing, sample dropdown menu, per-pane mini copy button, output
   state tint, soft warning slot, URL breakdown table, %XX highlight.
   ───────────────────────────────────────────────────────────────── */

.u-card { /* marker class for keyboard-shortcut scoping */ }

/* Second segmented control (scope) sits inline next to direction. */
.u-card .u-scope-seg .b64-mode-btn { padding: 6px 10px; font-size: 12px; }

/* Sample dropdown. */
.u-sample-wrap { position: relative; display: inline-flex; }
.u-sample-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  min-width: 220px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.u-sample-menu[hidden] { display: none; }
.u-sample-menu button {
  all: unset;
  padding: 7px 10px;
  font-size: 13px;
  color: var(--ink-2);
  border-radius: 6px;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.u-sample-menu button:hover { background: var(--accent-soft); color: var(--accent); }

/* Tiny per-pane copy button next to the char counter. */
.u-pane-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-3);
  border-radius: 5px;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.u-pane-btn:hover { color: var(--accent); border-color: var(--accent); }
.u-pane-btn.is-copied { background: var(--accent); color: var(--paper, #fff); border-color: var(--accent); }

/* Output wrap state tint — subtle left border reflects validity. */
.u-output-wrap { position: relative; }
.u-output-wrap[data-state="ok"] .json-output { border-left: 3px solid var(--accent); }
.u-output-wrap[data-state="error"] .json-output { border-left: 3px solid var(--rose); }
.u-output-wrap[data-state="empty"] .json-output { border-left: 3px solid transparent; }

/* %XX highlight inside the output pre. */
.url-hl {
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 3px;
  padding: 0 2px;
}

/* Soft warning slot (reuses ci-warning visuals; add spacing above output). */
.u-warning { margin-top: 14px; }
.u-warning code {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 1px 5px;
  background: rgba(0,0,0,.04);
  border-radius: 3px;
}

/* URL breakdown table. */
.u-breakdown-card {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.u-breakdown-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.u-breakdown-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.u-breakdown-row {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 6px;
  transition: background .12s;
}
.u-breakdown-row:hover { background: var(--surface-2); }
.u-breakdown-row.is-param .u-breakdown-key { color: var(--accent); }
.u-breakdown-key {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-3);
}
.u-breakdown-val {
  font-size: 13px;
  color: var(--ink);
  word-break: break-all;
  min-width: 0;
}
.u-breakdown-copy {
  opacity: 0;
  border: 0;
  background: transparent;
  color: var(--ink-3);
  padding: 4px;
  border-radius: 4px;
  cursor: pointer;
  transition: opacity .12s, background .12s, color .12s;
}
.u-breakdown-row:hover .u-breakdown-copy,
.u-breakdown-copy:focus-visible { opacity: 1; }
.u-breakdown-copy:hover { background: var(--accent-soft); color: var(--accent); }
.u-breakdown-copy.is-copied { opacity: 1; color: var(--accent); }

@media (max-width: 640px) {
  .u-breakdown-row { grid-template-columns: 1fr auto; }
  .u-breakdown-row .u-breakdown-key { grid-column: 1 / -1; }
  .u-sample-menu { left: auto; right: 0; }
}


/* ═══════════════════════════════════════════════════════════════
   HTML entity encoder / decoder — bespoke additions
   Rides on .json-card + .b64-card + .u-* archetype; this section
   only adds the entity-specific bits (diff highlight, toast,
   option-row disabled state, reference list, cheatsheet, drop
   overlay).
   ═══════════════════════════════════════════════════════════════ */

/* Option strip — disabled state when encode-only opts aren't applicable. */
.he-options .json-control.is-disabled {
  opacity: .45;
  pointer-events: none;
}
.he-type-seg.is-disabled {
  opacity: .45;
  pointer-events: none;
}

/* Diff highlight inside the output pane. */
.json-output .he-diff {
  background: var(--accent-soft, rgba(59,130,246,.10));
  color: var(--accent, #2563eb);
  border-radius: 3px;
  padding: 0 1px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
[data-theme='dark'] .json-output .he-diff {
  background: rgba(96,165,250,.18);
  color: #93c5fd;
}

/* Drag-drop overlay inside the editor. */
.he-editor { position: relative; }
.he-drop-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2, rgba(0,0,0,.04));
  border: 2px dashed var(--accent, #2563eb);
  border-radius: inherit;
  color: var(--accent, #2563eb);
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity .14s ease;
  z-index: 2;
}
.he-editor.is-drop .he-drop-overlay {
  opacity: 1;
}
.he-drop-overlay__inner {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center;
  font-size: 13px;
}

/* Distinct-entity chip list in the stats card. */
.he-entity-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.he-entity-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--ink-2);
}
.he-entity-chip.is-more {
  background: transparent;
  border-style: dashed;
  color: var(--ink-3);
}
.he-entity-chip__n {
  color: var(--ink-3);
  font-size: 10.5px;
}

/* Entity reference card — search + scrolling click-to-insert list. */
.he-ref-card .card-body { padding-top: 10px; }
.he-ref-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink-3);
  margin-bottom: 10px;
}
.he-ref-search input {
  flex: 1;
  border: 0;
  background: transparent;
  outline: none;
  font-size: 12.5px;
  color: var(--ink);
}
.he-ref-search:focus-within {
  border-color: var(--accent, #2563eb);
  box-shadow: 0 0 0 3px var(--accent-soft, rgba(59,130,246,.15));
  color: var(--ink-2);
}
.he-ref-list {
  max-height: 260px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: 2px;
}
.he-ref-row {
  display: grid;
  grid-template-columns: 26px auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: var(--ink-2);
  transition: background .1s, border-color .1s, color .1s;
}
.he-ref-row:hover,
.he-ref-row:focus-visible {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--ink);
  outline: none;
}
.he-ref-char {
  font-size: 15px;
  color: var(--ink);
  text-align: center;
  line-height: 1;
}
.he-ref-name {
  font-size: 11.5px;
  color: var(--accent, #2563eb);
  white-space: nowrap;
}
.he-ref-label {
  font-size: 11.5px;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.he-ref-empty {
  padding: 18px 8px;
  text-align: center;
  font-size: 12px;
  color: var(--ink-3);
}

/* Copy toast. */
.he-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 8px);
  padding: 8px 14px;
  background: var(--ink, #0f172a);
  color: #fff;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .1px;
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
  opacity: 0;
  pointer-events: none;
  z-index: 1000;
  transition: opacity .18s ease, transform .18s ease;
}
.he-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
[data-theme='dark'] .he-toast {
  background: #e5e7eb;
  color: #0f172a;
}

/* Cheatsheet table inside the formula/how-it-works partial. */
.he-formula-card { padding-top: 18px; }
.he-cheatsheet {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  margin: 14px 0 16px;
  font-size: 12.5px;
}
.he-cheatsheet__head,
.he-cheatsheet__row {
  display: grid;
  grid-template-columns: 0.9fr 1.3fr 1.1fr 1.1fr 2fr;
  gap: 12px;
  padding: 9px 14px;
  align-items: center;
}
.he-cheatsheet__head {
  background: var(--surface-2);
  color: var(--ink-3);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
}
.he-cheatsheet__row + .he-cheatsheet__row,
.he-cheatsheet__head + .he-cheatsheet__row {
  border-top: 1px solid var(--line);
}
.he-cheatsheet__row:nth-of-type(even) {
  background: color-mix(in srgb, var(--surface-2) 50%, transparent);
}
.he-cheatsheet__row .mono {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink);
}
.he-cheatsheet__row > span:first-child {
  font-weight: 600;
  font-size: 14px;
}
.he-cheatsheet__row > span:last-child {
  color: var(--ink-2);
  font-size: 12px;
}
@media (max-width: 720px) {
  .he-cheatsheet__head { display: none; }
  .he-cheatsheet__row {
    grid-template-columns: auto 1fr;
    grid-auto-flow: row;
    row-gap: 3px;
  }
  .he-cheatsheet__row > span:last-child { grid-column: 1 / -1; }
}

/* Status badge tints (reuse json-badge where defined, add ours). */
.json-badge.is-ok   { background: var(--accent-soft); color: var(--accent); }
.json-badge.is-error{ background: rgba(239,68,68,.12); color: #dc2626; }
.json-badge.is-muted{ background: var(--surface-2); color: var(--ink-3); }

/* Size-diff pill flair. */
.json-size-diff.is-grow   { color: #b45309; }
.json-size-diff.is-shrink { color: #15803d; }
[data-theme='dark'] .json-size-diff.is-grow   { color: #fbbf24; }
[data-theme='dark'] .json-size-diff.is-shrink { color: #4ade80; }

/* ═══════════════════════════════════════════════════════════════
   Fence Calculator
   Reuses .info-tip, .slider-wrap, .chip-row, .result-hero,
   .breakdown-card, .compare-card, .ci-stack-bar / .ci-stack-seg,
   .amort-progress, and .ci-schedule from the compound-interest
   patterns. Only adds fence-specific swatches + live SVG diagram.
   ═══════════════════════════════════════════════════════════════ */

/* Material chip swatches. */
.fe-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: -2px;
  border: 1px solid rgba(0, 0, 0, 0.12);
}
.fe-swatch--wood        { background: repeating-linear-gradient(90deg, #c48a4a, #c48a4a 3px, #b07b3d 3px, #b07b3d 4px); }
.fe-swatch--wood-dark   { background: repeating-linear-gradient(90deg, #7a4f24, #7a4f24 3px, #6b4420 3px, #6b4420 4px); }
.fe-swatch--vinyl       { background: #f4f4f2; border-color: #c7c7c0; }
.fe-swatch--chain       { background-image:
                             linear-gradient(45deg, #a6adb5 25%, transparent 25%),
                             linear-gradient(-45deg, #a6adb5 25%, transparent 25%);
                          background-size: 6px 6px;
                          background-color: #e4e7ea; }
.fe-swatch--aluminum    { background: linear-gradient(180deg, #b8bcc0, #8a8f95); }
.fe-swatch--composite   { background: #4a5158; }

/* Extra stack bar segments beyond the default 3 (posts/rails/pickets). */
.fe-stack-seg--concrete { background: #6366f1; }   /* indigo */
.fe-stack-seg--gates    { background: #f43f5e; }   /* rose */

/* Schedule bar tints (reuses .amort-progress-bar frame). */
.amort-progress-bar.fe-bar-section { background: var(--teal); }
.amort-progress-bar.fe-bar-gate    { background: #f43f5e; }

/* ── Live SVG diagram ─────────────────────────────────────── */

.fe-diagram-wrap { position: relative; }
.fe-diagram {
  width: 100%;
  height: 240px;
  display: block;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 12px);
  padding: 8px;
  box-sizing: border-box;
}
.fe-dg-caption {
  margin-top: 10px;
  font-size: var(--text-sm);
  color: var(--ink-2);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.fe-dg-key {
  margin-top: 12px;
  justify-content: center;
}
.fe-dg-sw--post    { background: #1f2937; }
.fe-dg-sw--section { background: var(--teal); }
.fe-dg-sw--gate    { background: #f43f5e; }

.fe-dg-ground {
  stroke: var(--ink-3);
  stroke-width: 2;
  stroke-linecap: round;
}
.fe-dg-post {
  fill: #1f2937;
  stroke: none;
}
.fe-dg-post--gate { fill: #f43f5e; }
.fe-dg-picket {
  fill: #c48a4a;
  stroke: none;
}
.fe-dg-panel {
  fill: rgba(20, 184, 166, 0.15);
  stroke: var(--teal);
  stroke-width: 1;
}
.fe-dg-panel--chain {
  fill: url(#fe-dg-chain-fill);
  fill: rgba(166, 173, 181, 0.35);
  stroke-dasharray: 2 2;
}
.fe-dg-rail {
  stroke: #7a4f24;
  stroke-width: 1.25;
}
.fe-dg-gate {
  fill: rgba(244, 63, 94, 0.15);
  stroke: #f43f5e;
  stroke-width: 1;
  stroke-dasharray: 4 3;
}
.fe-dg-gate-label {
  font-size: 10px;
  font-weight: 600;
  fill: #f43f5e;
  letter-spacing: 0.1em;
}
.fe-dg-height-guide {
  stroke: var(--ink-3);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}
.fe-dg-height-label {
  font-size: 11px;
  fill: var(--ink-2);
  font-family: var(--font-mono);
}

/* Dark-theme tweaks — diagram chrome only. Material colors stay vivid. */
[data-theme='dark'] .fe-diagram {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--line-strong);
}
[data-theme='dark'] .fe-dg-post { fill: #e5e7eb; }
[data-theme='dark'] .fe-dg-picket { fill: #c48a4a; }
[data-theme='dark'] .fe-dg-rail { stroke: #b07b3d; }

/* Material chip styles — richer visual density, wrap at small widths. */
.chip-row#fe-material .chip {
  display: inline-flex;
  align-items: center;
}

/* ── Formula block ────────────────────────────────────────── */

.formula-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background: var(--surface-2);
  border-radius: var(--radius-md, 10px);
  border: 1px solid var(--line);
}
.formula-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.formula-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  min-width: 80px;
}
.formula-code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--ink);
  background: transparent;
}
.formula-example {
  margin-top: 16px;
}
.formula-example-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.formula-example-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.formula-example-list li {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--ink);
  padding: 6px 12px;
  background: var(--surface);
  border-left: 3px solid var(--accent);
  border-radius: 0 4px 4px 0;
}

/* ── Tagline (under hero). Inherits white from .result-hero — don't override
   color here (the global `.result-tagline` rule already sets a translucent
   white that reads on the dark gradient). */
.result-hero .result-tagline {
  font-size: var(--text-sm);
  margin: 6px 0 12px;
  line-height: 1.4;
}

/* Responsive: stack the formula rows vertically on small screens. */
@media (max-width: 520px) {
  .formula-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .fe-diagram { height: 200px; }
}

/* ─────────────────────────────────────────────────────────────────
   Word Counter (Stage 5) — input affordances, grade band pill,
   composition stack bar, top-keywords table, compact toggles.
   ───────────────────────────────────────────────────────────────── */

.wc-textarea {
  min-height: 320px;
  resize: vertical;
  font-family: var(--font-sans, var(--font, system-ui));
  font-size: var(--text-md, 15px);
  line-height: 1.6;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.wc-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .12);
}
.wc-input-hint {
  margin-top: 8px;
  font-size: var(--text-xs);
  color: var(--ink-3);
}
.wc-input-hint code {
  padding: 1px 5px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 11px;
}
.wc-kbd {
  display: inline-block;
  padding: 1px 6px;
  margin-left: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 4px;
}
.wc-sample-label {
  font-size: var(--text-xs);
  color: var(--ink-3);
  margin-right: 4px;
  align-self: center;
}

/* Exclude toggles — compact inline checkbox row */
.wc-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
}
.wc-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  color: var(--ink-2);
  cursor: pointer;
  user-select: none;
}
.wc-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

/* Grade-band pill in the hero sub-row */
.wc-band {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  border-radius: 999px;
  vertical-align: middle;
  white-space: nowrap;
}
.wc-band--good    { background: rgba(20, 184, 166, .15); color: #0d9488; }
.wc-band--neutral { background: var(--surface-2); color: var(--ink-3); }
.wc-band--warn    { background: rgba(245, 158, 11, .18); color: #b45309; }
.wc-band--bad     { background: rgba(244, 63, 94, .18); color: #be123c; }
[data-theme='dark'] .wc-band--good    { background: rgba(20, 184, 166, .22); color: #5eead4; }
[data-theme='dark'] .wc-band--warn    { background: rgba(245, 158, 11, .25); color: #fbbf24; }
[data-theme='dark'] .wc-band--bad     { background: rgba(244, 63, 94, .25); color: #fb7185; }

/* Composition stack bar — extra colors not covered by ci-stack-seg */
.wc-stack-bar { margin-top: 12px; }
.wc-stack-seg--letters { background: var(--accent); }
.wc-stack-seg--digits  { background: #14b8a6; }
.wc-stack-seg--spaces  { background: var(--amber, #f59e0b); }
.wc-stack-seg--punct   { background: #6366f1; }
.wc-stack-seg--other   { background: #94a3b8; }

/* Delta badge tones — extends ci-delta-badge */
.ci-delta-badge--warn { background: var(--amber, #f59e0b); color: #fff; }
.ci-delta-badge--bad  { background: var(--rose, #f43f5e); color: #fff; }

/* Top keywords table */
.wc-keywords-table .wc-empty {
  text-align: center;
  color: var(--ink-3);
  font-style: italic;
  padding: 24px;
}
.wc-keywords-table .wc-kw-word {
  font-weight: 600;
  color: var(--ink);
  text-transform: lowercase;
}
.wc-keywords-table .wc-kw-count {
  text-align: right;
  white-space: nowrap;
}
.wc-keywords-table .wc-kw-bar-cell {
  width: 50%;
  display: flex;
  align-items: center;
  gap: 10px;
}
.wc-kw-bar {
  flex: 1;
  height: 8px;
  background: var(--surface-2);
  border-radius: 4px;
  overflow: hidden;
}
.wc-kw-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #6366f1);
  border-radius: 4px;
  transition: width .25s ease;
}
.wc-kw-share {
  font-size: var(--text-xs);
  color: var(--ink-3);
  min-width: 48px;
  text-align: right;
}

/* "How it's calculated" partial */
.wc-formula-card {
  padding: 24px;
}
.wc-formula-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px 28px;
}
.wc-formula-h {
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-2);
  margin: 0 0 6px;
}
.wc-formula-grid p {
  margin: 0 0 6px;
  font-size: var(--text-sm);
  color: var(--ink-2);
  line-height: 1.55;
}
.wc-formula-grid code {
  padding: 1px 5px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 12px;
}
.wc-formula-numbers {
  margin-top: 10px !important;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
  font-size: var(--text-xs) !important;
  color: var(--ink-3) !important;
}

@media (max-width: 720px) {
  .wc-toggles { gap: 10px; }
  .wc-textarea { min-height: 240px; }
  .wc-keywords-table .wc-kw-bar-cell { width: 40%; gap: 6px; }
  .wc-kw-share { min-width: 38px; }
}

/* ═══════════════════════════════════════════════════════════════════
   HTTP Status Codes tool — reference page with expandable rows,
   category chips, detail pane, and recently-viewed list. All classes
   are prefixed `.hstat-` to avoid clashing with other calculators.
   ═══════════════════════════════════════════════════════════════════ */

.hstat-card .card-body { padding: 16px 22px 22px; }
.hstat-card .card-header { padding: 18px 22px 6px; }

/* ── Keyboard-key glyph (reused across tips list) ── */
.hstat-kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; padding: 1px 6px;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11px; line-height: 1.4; font-weight: 600;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
}
.hstat-kbd-sep { color: var(--ink-3); font-size: 12px; margin: 0 2px; }

/* ── Search input ── */
.hstat-search-wrap {
  position: relative;
  display: flex; align-items: center;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.hstat-search-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.hstat-search-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; padding-left: 10px;
  color: var(--ink-3); font-size: 16px;
  pointer-events: none;
}
#hstat-search {
  flex: 1; min-width: 0;
  padding: 11px 8px 11px 4px;
  border: 0; background: transparent;
  font-size: 14px; color: var(--ink);
  outline: none;
  font-family: inherit;
}
#hstat-search::placeholder { color: var(--ink-3); }
#hstat-search::-webkit-search-decoration,
#hstat-search::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.hstat-search-clear {
  margin-right: 6px; padding: 2px 8px;
  background: transparent; border: 0;
  color: var(--ink-3);
  font-size: 18px; line-height: 1; cursor: pointer;
  border-radius: 6px;
}
.hstat-search-clear:hover { color: var(--ink); background: var(--surface-2); }

/* ── Category chips (class filter) ── */
.hstat-chip-row { gap: 6px; }
.hstat-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
}
.hstat-chip-glyph {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  font-size: 11px; font-weight: 700;
  border-radius: 50%;
  background: var(--hstat-chip-color, var(--ink-3));
  color: #fff;
  font-style: normal;
}
.hstat-chip-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; padding: 0 6px; height: 18px;
  font-size: 11px; font-weight: 700;
  color: var(--ink-3);
  background: var(--surface-2);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.hstat-chip.active .hstat-chip-count {
  background: rgba(255, 255, 255, 0.25); color: #fff;
}
.hstat-chip--1xx { --hstat-chip-color: #2563eb; }
.hstat-chip--2xx { --hstat-chip-color: #16a34a; }
.hstat-chip--3xx { --hstat-chip-color: #d97706; }
.hstat-chip--4xx { --hstat-chip-color: #dc2626; }
.hstat-chip--5xx { --hstat-chip-color: #7c3aed; }

.hstat-chip--1xx.active { background: #2563eb; border-color: #2563eb; }
.hstat-chip--2xx.active { background: #16a34a; border-color: #16a34a; }
.hstat-chip--3xx.active { background: #d97706; border-color: #d97706; }
.hstat-chip--4xx.active { background: #dc2626; border-color: #dc2626; }
.hstat-chip--5xx.active { background: #7c3aed; border-color: #7c3aed; }
.hstat-chip.active .hstat-chip-glyph { background: #fff; color: var(--hstat-chip-color); }

.hstat-view-field { margin-top: 4px; }
.hstat-view-chips .chip { padding: 6px 12px; font-size: 12px; }

/* ── List + groups ── */
.hstat-list { display: flex; flex-direction: column; gap: 18px; }
.hstat-group { display: flex; flex-direction: column; gap: 6px; }
.hstat-group--flat { gap: 6px; }
.hstat-group-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 8px 12px 8px 14px;
  border-left: 4px solid var(--hstat-cat-color, var(--accent));
  background: color-mix(in srgb, var(--hstat-cat-color, var(--accent)) 7%, transparent);
  border-radius: 0 8px 8px 0;
}
.hstat-group-title {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--ink);
}
.hstat-group-count {
  font-size: 11px; font-weight: 700; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* ── Row ── */
.hstat-row {
  position: relative;
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s, transform 0.08s;
}
.hstat-row:hover { border-color: var(--hstat-cat-color, var(--line-strong)); box-shadow: var(--shadow-sm); }
.hstat-row:focus-visible {
  outline: 0;
  border-color: var(--hstat-cat-color, var(--accent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hstat-cat-color, var(--accent)) 20%, transparent);
}
.hstat-row--active {
  border-color: var(--hstat-cat-color);
  box-shadow: 0 0 0 1px var(--hstat-cat-color), var(--shadow-sm);
}
.hstat-row__head {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 12px; align-items: center;
  padding: 10px 12px;
}
.hstat-code {
  display: inline-flex; align-items: center; justify-content: center;
  height: 28px; padding: 0 8px; min-width: 48px;
  color: #fff; font-weight: 700; font-size: 14px;
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
}
.hstat-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hstat-name { font-size: 14px; font-weight: 600; color: var(--ink); }
.hstat-desc {
  font-size: 12.5px; color: var(--ink-3);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.hstat-row-chevron {
  color: var(--ink-3); font-size: 14px;
  transition: transform 0.18s ease;
}
.hstat-row--expanded .hstat-row-chevron { transform: rotate(180deg); color: var(--hstat-cat-color); }
.hstat-row--expanded .hstat-desc { display: block; }

/* ── Match highlight ── */
.hstat-hl {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: inherit;
  padding: 0 2px; border-radius: 3px;
  font-weight: 600;
}

/* ── Expanded row body ── */
.hstat-row__body {
  padding: 4px 14px 14px 14px;
  display: flex; flex-direction: column; gap: 12px;
  border-top: 1px dashed var(--line);
  margin-top: 2px;
}
.hstat-row-detail {
  font-size: 13px; line-height: 1.55; color: var(--ink-2);
}
.hstat-example__label,
.hstat-row-section__label {
  font-size: 11px; font-weight: 600;
  color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.hstat-example__block {
  margin: 0; padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 12.5px; line-height: 1.6;
  color: var(--ink-2);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.hstat-example__comment { color: var(--ink-3); }
.hstat-example__status { color: var(--hstat-cat-color, var(--ink)); font-weight: 700; }

.hstat-row-section__body { display: block; }

/* ── Related code chips (inline & in detail pane) ── */
.hstat-related-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hstat-related-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 10px 4px 4px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.08s, background 0.15s;
  font-family: inherit;
}
.hstat-related-chip:hover {
  border-color: var(--hstat-cat-color, var(--accent));
  color: var(--ink);
}
.hstat-related-chip:active { transform: translateY(1px); }
.hstat-related-chip__code {
  display: inline-flex; align-items: center; justify-content: center;
  height: 20px; min-width: 34px; padding: 0 6px;
  background: var(--hstat-cat-color, var(--accent));
  color: #fff; font-weight: 700; font-size: 11px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.hstat-related-chip__name { padding-right: 2px; }

/* ── Row action row ── */
.hstat-row-actions {
  display: flex; flex-wrap: wrap; gap: 8px;
  align-items: center;
}
.hstat-row-action {
  padding: 6px 10px;
  font-size: 12px; font-weight: 600;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.hstat-row-action:hover { border-color: var(--accent); color: var(--accent); }
.hstat-row-action--link { display: inline-flex; align-items: center; gap: 4px; }

/* ── Empty state ── */
.hstat-empty {
  padding: 28px 20px;
  text-align: center;
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--ink-2);
}
.hstat-empty__icon { font-size: 24px; color: var(--ink-3); margin-bottom: 8px; }
.hstat-empty__title { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.hstat-empty__hint { font-size: 13px; color: var(--ink-3); }
.hstat-empty__suggest {
  padding: 2px 8px; margin: 0 2px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  border-radius: 6px;
  font: 600 12px/1.4 var(--font-mono, ui-monospace, monospace);
  color: var(--accent);
  cursor: pointer;
}
.hstat-empty__suggest:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }

/* ═══════════════════════════════════════════════════════════════════
   Right-rail: detail pane, quick reference, recently viewed, tips.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Detail pane ── */
.hstat-detail-card { overflow: hidden; }
.hstat-detail-hero {
  position: relative;
  padding: 22px 26px 22px;
}
.hstat-detail-hero__bar {
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--hstat-cat-color, var(--line-strong));
  transition: background 0.2s;
}
.hstat-detail-card[data-state="empty"] .hstat-detail-hero__bar { background: var(--line-strong); }

.hstat-detail-empty { text-align: center; padding: 16px 8px 4px; }
.hstat-detail-empty__icon {
  font-size: 28px; color: var(--ink-3);
  margin-bottom: 10px;
}
.hstat-detail-empty__title {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 700; color: var(--ink);
  margin-bottom: 6px;
}
.hstat-detail-empty__text {
  font-size: 13px; color: var(--ink-3); line-height: 1.55;
  max-width: 320px; margin: 0 auto;
}

.hstat-detail-body { display: flex; flex-direction: column; gap: 14px; }
.hstat-detail-body[hidden] { display: none; }
.hstat-detail-section[hidden] { display: none; }
.hstat-detail-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700;
  color: var(--hstat-cat-color, var(--ink-3));
  text-transform: uppercase; letter-spacing: 0.1em;
}
.hstat-detail-eyebrow .pulse-dot {
  background: var(--hstat-cat-color, var(--accent));
}
.hstat-detail-headline {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
}
.hstat-detail-code {
  font-size: 44px; font-weight: 800;
  color: var(--hstat-cat-color, var(--ink));
  letter-spacing: -0.03em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.hstat-detail-name {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em; line-height: 1.15;
}
.hstat-detail-meaning {
  margin: 0; font-size: 12.5px; color: var(--ink-3);
  line-height: 1.5;
  padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.hstat-detail-desc {
  margin: 0; font-size: 13.5px; color: var(--ink-2);
  line-height: 1.6;
}
.hstat-detail-section { display: flex; flex-direction: column; gap: 6px; }
.hstat-detail-section__label {
  font-size: 11px; font-weight: 600; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.hstat-rfc-link {
  display: inline-block;
  font-size: 13px; font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  padding: 2px 0;
  border-bottom: 1px dashed color-mix(in srgb, var(--accent) 40%, transparent);
}
.hstat-rfc-link:hover { border-bottom-style: solid; }

.hstat-detail-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding-top: 4px;
}
.hstat-detail-btn {
  padding: 8px 14px;
  font-size: 12px; font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s, color 0.15s, filter 0.15s;
}
.hstat-detail-btn--primary {
  background: var(--hstat-cat-color, var(--accent));
  border: 1px solid var(--hstat-cat-color, var(--accent));
  color: #fff;
}
.hstat-detail-btn--primary:hover { filter: brightness(1.08); }
.hstat-detail-btn--ghost {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink-2);
}
.hstat-detail-btn--ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ── Quick reference card ── */
.hstat-ref-card .card-body { padding: 18px 22px 22px; }
.hstat-ref-section + .hstat-ref-section {
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--line);
}
.hstat-ref-section__label {
  font-size: 11px; font-weight: 600; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.hstat-status-line {
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 15px; font-weight: 600;
  display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline;
}
.hstat-status-line__proto { color: #2563eb; }
.hstat-status-line__code { color: #dc2626; font-variant-numeric: tabular-nums; }
.hstat-status-line__reason { color: var(--ink); }
.hstat-status-line-legend {
  margin-top: 10px;
  display: flex; flex-wrap: wrap; gap: 14px;
  font-size: 11.5px; color: var(--ink-3);
}
.hstat-status-line-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.hstat-legend-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.hstat-legend-dot--proto { background: #2563eb; }
.hstat-legend-dot--code { background: #dc2626; }
.hstat-legend-dot--reason { background: var(--ink); }

.hstat-ref-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.hstat-ref-list li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 10px; align-items: center;
  font-size: 13px; color: var(--ink-2); line-height: 1.5;
}
.hstat-ref-badge {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 3px 0; color: #fff;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px; font-weight: 700;
  border-radius: 6px;
}
.hstat-ref-badge--1xx { background: #2563eb; }
.hstat-ref-badge--2xx { background: #16a34a; }
.hstat-ref-badge--3xx { background: #d97706; }
.hstat-ref-badge--4xx { background: #dc2626; }
.hstat-ref-badge--5xx { background: #7c3aed; }

/* ── Recently viewed card ── */
.hstat-recent-card .card-body { padding: 14px 22px 18px; }
.hstat-recent-list { display: flex; flex-wrap: wrap; gap: 6px; }
.hstat-recent-item {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 4px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px; font-weight: 600;
  color: var(--ink-2);
  transition: border-color 0.15s, color 0.15s;
}
.hstat-recent-item:hover { border-color: var(--accent); color: var(--ink); }
.hstat-recent-item__code {
  display: inline-flex; align-items: center; justify-content: center;
  height: 20px; min-width: 34px; padding: 0 6px;
  color: #fff; font-weight: 700; font-size: 11px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

/* ── Keyboard tip list ── */
.hstat-kbd-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 14px;
  margin: 14px 0 0; padding: 14px 0 0;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
}
.hstat-kbd-list dt {
  display: inline-flex; gap: 4px; align-items: center;
  justify-self: start;
}
.hstat-kbd-list dd { margin: 0; color: var(--ink-3); align-self: center; }

/* ═══ Responsive ═══ */
@media (max-width: 640px) {
  .hstat-chip-label { display: none; }
  .hstat-chip { padding: 7px 10px; }
  .hstat-detail-code { font-size: 36px; }
  .hstat-detail-name { font-size: 18px; }
  .hstat-row__head { grid-template-columns: 52px 1fr auto; }
}

/* ════════════════════════════════════════════════════════════════
   Shoe Size Converter — flag chips, foot ruler, brand fit, copy
   ════════════════════════════════════════════════════════════════ */

/* Flag glyph inside chips, toggle buttons and breakdown labels */
.chip-flag {
  display: inline-block;
  font-size: 1.05em;
  line-height: 1;
  margin-right: 6px;
  vertical-align: -1px;
}
.breakdown-label .chip-flag { margin-right: 8px; }

/* "Kids 1y–12y" sub-hint inside toggle button */
.toggle-btn__hint {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  font-weight: var(--font-normal);
  color: var(--ink-3);
  opacity: .85;
}
.toggle-btn.active .toggle-btn__hint { color: rgba(255,255,255,.85); opacity: 1; }

/* ── Foot-length measurement guide (collapsible) ──────────────── */
.measure-guide {
  margin-top: 12px;
  padding: 10px 14px;
  background: var(--accent-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-size: 13px;
}
.measure-guide > summary {
  cursor: pointer;
  font-weight: var(--font-semibold);
  color: var(--ink-1);
  list-style: none;
  padding: 4px 0;
}
.measure-guide > summary::-webkit-details-marker { display: none; }
.measure-guide > summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 8px;
  transition: transform .18s ease;
  color: var(--accent);
}
.measure-guide[open] > summary::before { transform: rotate(90deg); }
.measure-steps {
  margin: 10px 0 4px;
  padding-left: 22px;
  color: var(--ink-2);
  line-height: 1.55;
}
.measure-steps li { margin-bottom: 4px; }
.measure-note {
  margin: 10px 0 2px;
  padding: 8px 10px;
  background: var(--surface);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  color: var(--ink-2);
  font-size: 12.5px;
}

/* ── Closest-size warning inside hero ─────────────────────────── */
.result-hero .result-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 14px;
  padding: 8px 12px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--radius-md);
  font-size: 12.5px;
  color: rgba(255,255,255,.95);
  backdrop-filter: blur(2px);
}

/* ── Visual foot ruler in hero ────────────────────────────────── */
.ss-ruler {
  margin: 18px 0 8px;
}
.ss-ruler__track {
  position: relative;
  height: 10px;
  background: linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,.38));
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}
.ss-ruler__track::before,
.ss-ruler__track::after {
  content: "";
  position: absolute;
  top: -4px; bottom: -4px;
  width: 1px;
  background: rgba(255,255,255,.35);
}
.ss-ruler__track::before { left: 25%; }
.ss-ruler__track::after  { left: 75%; }
.ss-ruler__marker {
  position: absolute;
  top: 50%;
  width: 16px; height: 16px;
  margin-left: -8px;
  transform: translateY(-50%);
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 0 0 3px rgba(255,255,255,.35);
  transition: left .2s ease;
}
.ss-ruler__ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 10.5px;
  color: rgba(255,255,255,.72);
  letter-spacing: .02em;
}
.ss-ruler__readout {
  margin-top: 8px;
  font-size: 13px;
  color: rgba(255,255,255,.85);
  text-align: center;
  letter-spacing: .02em;
}
.ss-ruler__sep { margin: 0 8px; opacity: .5; }

/* ── Breakdown value as a copy button ─────────────────────────── */
.ss-breakdown .breakdown-value {
  background: transparent;
  border: 1px solid transparent;
  padding: 2px 8px;
  border-radius: 6px;
  cursor: pointer;
  color: inherit;
  font: inherit;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.ss-breakdown .breakdown-value:hover {
  background: var(--accent-soft);
  border-color: var(--line);
}
.ss-breakdown .breakdown-value.is-copied {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* ── Brand fit guide card ─────────────────────────────────────── */
.ss-brands-card { margin-top: var(--space-4); }
.ss-brand-list {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
.ss-brand-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-size: 13px;
}
.ss-brand-name { font-weight: var(--font-semibold); color: var(--ink-1); }
.ss-brand-fit {
  font-size: 12px;
  padding: 3px 9px;
  border-radius: 999px;
  font-weight: var(--font-medium);
  letter-spacing: .01em;
}
.ss-brand-fit--true  { background: rgba(16,185,129,.12); color: #059669; }
.ss-brand-fit--small { background: rgba(245,158,11,.14); color: #b45309; }
.ss-brand-fit--large { background: rgba(99,102,241,.12); color: #4f46e5; }
.ss-brands-note {
  margin: 12px 0 0;
  font-size: 11.5px;
  color: var(--ink-3);
  line-height: 1.45;
}

[data-theme='dark'] .ss-brand-list li { background: var(--surface-2); border-color: var(--line); }
[data-theme='dark'] .ss-brand-fit--true  { background: rgba(16,185,129,.18); color: #34d399; }
[data-theme='dark'] .ss-brand-fit--small { background: rgba(245,158,11,.20); color: #fbbf24; }
[data-theme='dark'] .ss-brand-fit--large { background: rgba(99,102,241,.22); color: #a5b4fc; }

/* ── Full reference chart card ────────────────────────────────── */
.ss-reference-card { margin-top: var(--space-4); }
.ss-ref-table { font-variant-numeric: tabular-nums; }
.ss-ref-table th .chip-flag { margin-right: 4px; }

/* ── FAQ list (reused pattern) ────────────────────────────────── */
.faq-list { display: grid; gap: 10px; }
.faq-item {
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.faq-item > summary {
  cursor: pointer;
  font-weight: var(--font-semibold);
  color: var(--ink-1);
  list-style: none;
  padding: 2px 0;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::before {
  content: "+";
  display: inline-block;
  width: 18px;
  color: var(--accent);
  font-weight: var(--font-bold);
}
.faq-item[open] > summary::before { content: "−"; }
.faq-item p {
  margin: 8px 0 2px;
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.6;
}

/* ── Responsive tightening ────────────────────────────────────── */
@media (max-width: 640px) {
  .ss-ruler__ticks { font-size: 10px; }
  .ss-ruler__ticks > span:nth-child(2),
  .ss-ruler__ticks > span:nth-child(4) { display: none; }
  .ss-brand-list li { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ════════════════════════════════════════════════════════════════
   Ring Size Converter — hero region picker, to-scale ring SVG,
   calibration bar, per-row copy buttons, active-row highlight.
   ════════════════════════════════════════════════════════════════ */

/* Hero primary-region picker (chip row inside result-hero). */
.rs-hero-regions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 16px 0 12px;
}
.rs-hero-region {
  appearance: none;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.75);
  border-radius: 999px;
  padding: 6px 4px;
  font: inherit;
  font-size: 12px;
  font-weight: var(--font-medium);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  letter-spacing: .02em;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.rs-hero-region:hover { background: rgba(255,255,255,0.14); color: #fff; }
.rs-hero-region.active {
  background: rgba(255,255,255,0.95);
  color: var(--accent);
  border-color: rgba(255,255,255,0.95);
  font-weight: var(--font-semibold);
}
.rs-hero-region__flag { font-size: 14px; line-height: 1; }

/* To-scale ring card. */
.rs-scale-card { margin-top: var(--space-4); }
.rs-scale-stage {
  margin: 0 auto;
  width: 240px;
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}
.rs-scale-stage svg { width: 100%; height: 100%; display: block; }
.rs-scale-text {
  font-size: 14px;
  font-weight: var(--font-semibold);
  fill: var(--ink-1);
  letter-spacing: .02em;
}

.rs-scale-calibration { margin-top: 14px; }
.rs-scale-calibration__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  color: var(--ink-2);
  margin-bottom: 4px;
}
.rs-scale-calibration__row label { font-weight: var(--font-medium); }
.rs-scale-dpi-range { width: 100%; }
.rs-scale-hint {
  margin: 8px 0 10px;
  font-size: 11.5px;
  color: var(--ink-3);
  line-height: 1.5;
}
.rs-scale-card-ref {
  display: flex;
  align-items: center;
  height: 28px;
  border: 1px dashed var(--line-strong);
  border-radius: 4px;
  padding: 0 10px;
  background: var(--surface-2);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: .04em;
  position: relative;
  margin: 0 auto;
}
.rs-scale-card-ref__edge {
  width: 2px;
  height: 18px;
  background: var(--accent);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.rs-scale-card-ref__edge--l { left: 0; }
.rs-scale-card-ref__edge--r { right: 0; }
.rs-scale-card-ref__label { margin: 0 auto; }

/* Breakdown value-as-copy-button — mirror shoe-size pattern. */
.rs-breakdown .breakdown-value {
  background: transparent;
  border: 1px solid transparent;
  padding: 2px 8px;
  border-radius: 6px;
  cursor: pointer;
  color: inherit;
  font: inherit;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.rs-breakdown .breakdown-value:hover {
  background: var(--accent-soft);
  border-color: var(--line);
}
.rs-breakdown .breakdown-value:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Full reference chart card + active-row highlight. */
.rs-reference-card { margin-top: var(--space-4); }
.rs-ref-table { font-variant-numeric: tabular-nums; }
.rs-ref-table th .chip-flag { margin-right: 4px; }
.rs-ref-table tr.is-active td {
  background: color-mix(in srgb, var(--accent) 14%, transparent) !important;
  font-weight: var(--font-semibold);
  color: var(--ink-1);
}
.rs-ref-table tr.is-active td:first-child {
  box-shadow: inset 3px 0 0 var(--accent);
}

/* Tighten on narrow screens. */
@media (max-width: 640px) {
  .rs-hero-regions { grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .rs-hero-region { padding: 6px 2px; font-size: 11px; }
  .rs-scale-stage { width: 200px; height: 200px; }
}

/* ════════════════════════════════════════════════════════════════
   Clothing Size Converter — universal ruler, copy-grid, explainer
   ════════════════════════════════════════════════════════════════ */

/* Field hint line directly under the measurement input. */
.cs-field-hint {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.45;
}
.cs-field-hint:empty { display: none; }

/* ── Visual XS → 3XL ruler inside the hero ─────────────────────── */
.cs-ruler {
  margin: 18px 0 8px;
}
.cs-ruler__track {
  position: relative;
  height: 10px;
  background: linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,.42));
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}
.cs-ruler__marker {
  position: absolute;
  top: 50%;
  width: 16px; height: 16px;
  margin-left: -8px;
  transform: translateY(-50%);
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 0 0 3px rgba(255,255,255,.35);
  transition: left .25s ease;
}
.cs-ruler__ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 10.5px;
  color: rgba(255,255,255,.72);
  letter-spacing: .04em;
}
.cs-ruler__ticks span {
  transition: color .15s ease, transform .15s ease;
  min-width: 24px;
  text-align: center;
}
.cs-ruler__ticks span.is-active {
  color: #fff;
  font-weight: 700;
  transform: scale(1.08);
}
.cs-ruler__readout {
  margin-top: 10px;
  font-size: 13px;
  color: rgba(255,255,255,.88);
  text-align: center;
  letter-spacing: .02em;
}
.cs-ruler__readout strong { color: #fff; font-weight: 700; }

/* ── Breakdown values as copy buttons ──────────────────────────── */
.cs-breakdown .breakdown-value {
  background: transparent;
  border: 1px solid transparent;
  padding: 2px 8px;
  border-radius: 6px;
  cursor: pointer;
  color: inherit;
  font: inherit;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.cs-breakdown .breakdown-value:hover {
  background: var(--accent-soft);
  border-color: var(--line);
}
.cs-breakdown .breakdown-value.is-copied {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
/* Summary rows (measurements / category) are read-only — don't render as buttons. */
.cs-breakdown__summary .breakdown-value {
  cursor: default;
  background: transparent !important;
  border-color: transparent !important;
  color: inherit !important;
}
.cs-breakdown__summary .breakdown-label {
  color: var(--ink-3);
}

/* ── Brand-variance disclaimer ─────────────────────────────────── */
.cs-brands-note {
  margin: 14px 0 2px;
  padding: 10px 12px;
  background: var(--surface-2, var(--surface));
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  color: var(--ink-2);
  font-size: 12.5px;
  line-height: 1.5;
}
.cs-brands-note--tight { margin-top: 12px; }

/* ── Full size-chart card (below inputs) ───────────────────────── */
.cs-chart-card .card-body { padding-bottom: 18px; }
.cs-ref-table-wrap {
  overflow-x: auto;
  margin: 0 -2px;
  -webkit-overflow-scrolling: touch;
}
.cs-ref-table {
  min-width: 640px;
}
.cs-ref-table th,
.cs-ref-table td {
  white-space: nowrap;
}

/* ── Explainer partial (formula slot, full width) ──────────────── */
.cs-explainer-lead {
  margin: 0 0 14px;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.6;
}
.cs-systems-dl {
  display: grid;
  grid-template-columns: 160px 1fr;
  column-gap: 18px;
  row-gap: 10px;
  margin: 14px 0;
  padding: 14px 16px;
  background: var(--accent-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-size: 14px;
}
.cs-systems-dl dt {
  font-weight: 700;
  color: var(--ink);
}
.cs-systems-dl dd {
  margin: 0;
  color: var(--ink-2);
  line-height: 1.55;
}
@media (max-width: 640px) {
  .cs-systems-dl { grid-template-columns: 1fr; row-gap: 4px; }
  .cs-systems-dl dt { margin-top: 8px; }
}

/* ── Related converters strip ──────────────────────────────────── */
.cs-related-strip {
  margin: 22px 0 4px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.cs-related-strip__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 10px;
}
.cs-related-strip__items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.cs-related-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 10px;
  background: var(--accent-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease, background .15s ease;
}
.cs-related-item:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.cs-related-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  font-size: 16px;
  line-height: 1;
}

/* ════════════════════════════════════════════════════════════════════
   Password Generator — v2 UI (hero + strength meter + stats)
   ════════════════════════════════════════════════════════════════════ */

/* Hero container (password mode has tight lists of generated passwords) */
.pw-hero .result-hero__inner { gap: var(--space-4); display: flex; flex-direction: column; }
.pw-hero-list { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-1) 0 0; }
.pw-hero-empty {
  padding: var(--space-4);
  border: 1px dashed rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-md);
  text-align: center;
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--text-sm);
}
.pw-hero-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-md);
  transition: background 150ms ease, border-color 150ms ease;
}
.pw-hero-item:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.22); }
.pw-hero-value {
  flex: 1;
  font-size: clamp(15px, 2.4vw, 20px);
  font-weight: 600;
  letter-spacing: 0.02em;
  word-break: break-all;
  line-height: 1.35;
  color: #fff;
}
.pw-hero-item-actions { display: flex; gap: 4px; flex-shrink: 0; }

/* Per-character coloring — visible on the dark hero */
.pw-ch { display: inline; }
.pw-ch--upper { color: #a5d8ff; }     /* pale blue */
.pw-ch--lower { color: #ffffff; }
.pw-ch--num   { color: #95f0b0; }     /* pale green */
.pw-ch--sym   { color: #ffd27a; font-weight: 700; } /* amber */

/* Inline icon buttons inside the hero */
.pw-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.85);
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease;
}
.pw-iconbtn:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.4); color: #fff; }
.pw-iconbtn:active { transform: scale(0.96); }
.pw-iconbtn svg { display: block; }
.pw-iconbtn-label { line-height: 1; }
.pw-iconbtn.is-copied {
  background: rgba(149, 240, 176, 0.18);
  border-color: rgba(149, 240, 176, 0.55);
  color: #bff5cf;
}

/* Segmented strength meter */
.pw-meter { margin-top: var(--space-1); }
.pw-meter-segments {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  margin-bottom: var(--space-2);
}
.pw-meter-seg {
  display: block;
  height: 6px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 3px;
  transition: background 240ms ease;
}
.pw-meter-seg--filled { background: #888; }
.pw-meter-seg--very-weak   { background: #f87171; }
.pw-meter-seg--weak        { background: #fb923c; }
.pw-meter-seg--fair        { background: #fbbf24; }
.pw-meter-seg--strong      { background: #4ade80; }
.pw-meter-seg--very-strong { background: #22c55e; }

.pw-meter-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--text-sm);
}
.pw-meter-label > span:first-child { font-weight: 600; color: #fff; }
.pw-meter-sub { color: rgba(255, 255, 255, 0.65); font-size: 12px; font-variant-numeric: tabular-nums; }

.pw-unit { color: rgba(255, 255, 255, 0.55); font-size: 11px; font-weight: 500; letter-spacing: 0.02em; margin-left: 2px; }

/* Strength badge (reuses .ci-delta-badge base) */
.pw-strength-badge--very-weak   { background: rgba(248, 113, 113, 0.2); color: #fecaca; }
.pw-strength-badge--weak        { background: rgba(251, 146, 60, 0.2);  color: #fed7aa; }
.pw-strength-badge--fair        { background: rgba(251, 191, 36, 0.2);  color: #fde68a; }
.pw-strength-badge--strong      { background: rgba(74, 222, 128, 0.2);  color: #bbf7d0; }
.pw-strength-badge--very-strong { background: var(--accent); color: #fff; }

/* Advanced <details> block */
.pw-advanced {
  padding: var(--space-3) var(--space-4);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  margin-top: var(--space-4);
}
.pw-advanced[open] { padding-bottom: var(--space-4); }
.pw-advanced > summary {
  list-style: none;
  cursor: pointer;
  padding: 0;
  border: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink);
  user-select: none;
}
.pw-advanced > summary::-webkit-details-marker { display: none; }
.pw-advanced > summary::before {
  content: '';
  width: 0;
  height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 160ms ease;
  opacity: 0.55;
}
.pw-advanced[open] > summary::before { transform: rotate(90deg); }
.pw-advanced-body { padding-top: var(--space-3); }

/* Checkbox option rows inside advanced */
.pw-opt-row {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  cursor: pointer;
}
.pw-opt-row input[type="checkbox"] {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  flex-shrink: 0;
  cursor: pointer;
}
.pw-opt-text { display: flex; flex-direction: column; gap: 2px; }
.pw-opt-title { font-weight: 500; color: var(--ink); font-size: var(--text-sm); }
.pw-opt-desc  { color: var(--ink-2); font-size: 12px; line-height: 1.45; }
.pw-opt-desc code {
  background: var(--surface);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 11px;
  color: var(--ink);
}

/* Actions row */
.pw-actions { display: flex; gap: var(--space-2); margin-top: var(--space-4); flex-wrap: wrap; }
.pw-actions .calc-btn { flex: 1; min-width: 140px; }

/* Warning banner — inherits .ci-warning rose styling */
.pw-warning { margin-top: var(--space-3); }

/* Guidance copy under breakdown */
.pw-guidance {
  margin: var(--space-3) 0 0;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-2);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--ink-2);
  line-height: 1.55;
}

/* Labeled slider ticks (existing .slider-ticks small styling) */
.slider-ticks span small {
  display: block;
  font-size: 10px;
  color: var(--ink-3);
  font-weight: 400;
  margin-top: 1px;
  text-transform: lowercase;
}

/* Aux warning state */
.aux--warn { color: #dc2626; font-weight: 500; }
[data-theme='dark'] .aux--warn { color: #fca5a5; }

/* Mobile adjustments */
@media (max-width: 640px) {
  .pw-hero-item { flex-direction: column; align-items: stretch; }
  .pw-hero-item-actions { justify-content: flex-end; }
  .pw-hero-value { font-size: 15px; }
}


/* ───────────────────────────────────────────────────────────────
   Text-to-slug generator — richer UI.
   Hero output, SEO badge, diff preview, SERP/social card,
   batch table, history strip, composition stack colors.
   Scoped to .slug-* classes; safe to append below other calc CSS.
   ─────────────────────────────────────────────────────────────── */

/* Hero output — the slug itself is the star. */
.slug-hero .slug-hero-output {
  font-family: var(--font-mono);
  font-size: 28px;
  line-height: 1.25;
  font-weight: 500;
  color: var(--ink);
  word-break: break-all;
  padding: 14px 16px;
  margin: 10px 0 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
  user-select: all;
  min-height: 48px;
}
.slug-hero .slug-hero-output:hover { border-color: var(--accent); }
.slug-hero .slug-hero-output:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.slug-hero .slug-hero-output.is-copied {
  background: var(--accent-soft);
  border-color: var(--accent);
  transform: scale(1.01);
}
@media (max-width: 768px) {
  .slug-hero .slug-hero-output { font-size: 20px; padding: 10px 12px; }
}

/* SEO length badge — reuses .ci-delta-badge base. */
.slug-seo-badge[data-state="ok"]   { background: rgba(16, 185, 129, .15); color: #059669; border-color: rgba(16, 185, 129, .35); }
.slug-seo-badge[data-state="warn"] { background: rgba(245, 158, 11, .18); color: #b45309; border-color: rgba(245, 158, 11, .35); }
.slug-seo-badge[data-state="bad"]  { background: rgba(239, 68, 68, .18);  color: #b91c1c; border-color: rgba(239, 68, 68, .4); }
[data-theme='dark'] .slug-seo-badge[data-state="ok"]   { color: #34d399; }
[data-theme='dark'] .slug-seo-badge[data-state="warn"] { color: #fbbf24; }
[data-theme='dark'] .slug-seo-badge[data-state="bad"]  { color: #f87171; }

/* Before/after diff */
.slug-diff-card { margin-top: 16px; }
.slug-diff {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.8;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
  word-break: break-word;
  white-space: pre-wrap;
}
.slug-diff-empty { color: var(--ink-3); }
.slug-diff-kept     { color: var(--ink); background: rgba(16, 185, 129, .08); padding: 1px 0; }
.slug-diff-replaced { color: #b45309; background: rgba(245, 158, 11, .2); padding: 1px 2px; border-radius: 2px; font-weight: 600; }
.slug-diff-removed  { color: #b91c1c; background: rgba(239, 68, 68, .18); padding: 1px 2px; border-radius: 2px; text-decoration: line-through; text-decoration-thickness: 1.5px; }

/* ═════════════════════════════════════════════════════════════════════
 * Hash generator (dev-tool archetype)
 * Reuses .json-card, .json-textarea, .b64-editor (drop-hint), .chip-row,
 * .info-tip, .form-section, .card, .mono.
 * ═════════════════════════════════════════════════════════════════════ */

.hash-card .card-body > .field + .field,
.hash-card .card-body > .field + details,
.hash-card .card-body > details + details,
.hash-card .card-body > details + .field {
  margin-top: 14px;
}

/* Sample dropdown */
.hash-sample-wrap { position: relative; }
.hash-sample-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  min-width: 220px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hash-sample-menu[hidden] { display: none; }
.hash-sample-menu button {
  text-align: left;
  padding: 8px 10px;
  border-radius: 6px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  cursor: pointer;
}
.hash-sample-menu button:hover { background: var(--surface-2); color: var(--accent); }

/* Meta strip under the textarea */
.hash-meta-strip {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 8px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
  letter-spacing: .02em;
  text-transform: uppercase;
}
.hash-meta-strip .hash-meta-sep { opacity: .5; }
.hash-meta-err {
  color: var(--rose);
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-mono);
  font-size: 11px;
}

/* Collapsible sections (normalization, HMAC) */
.hash-details {
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  background: var(--surface);
}
.hash-details[open] { border-style: solid; border-color: var(--line-strong); }
.hash-details > summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hash-details > summary::-webkit-details-marker { display: none; }
.hash-details > summary::before {
  content: "▸";
  font-size: 10px;
  color: var(--ink-3);
  transition: transform .15s;
}
.hash-details[open] > summary::before { transform: rotate(90deg); }
.hash-details-hint { color: var(--ink-3); font-weight: 400; font-size: 12px; }
.hash-check-grid { display: grid; gap: 8px; margin-top: 10px; }
.hash-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
}
.hash-check input[type="checkbox"] { flex: 0 0 auto; accent-color: var(--accent); }
.hash-hmac-body { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.hash-keyenc-chips { margin-top: 8px; }
.hash-keyenc-chips .chip { padding: 4px 10px; font-size: 11px; }

/* Algorithm visibility chips */
.hash-algo-chips .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  opacity: .55;
  filter: grayscale(.4);
}
.hash-algo-chips .chip.active { opacity: 1; filter: none; }

/* Deprecation pill (used in chips + row head + reference table) */
.hash-algo-pill {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1.4;
}
.hash-algo-pill.danger {
  background: rgba(239, 68, 68, .14);
  color: #b91c1c;
  border: 1px solid rgba(239, 68, 68, .3);
}
.chip.active .hash-algo-pill.danger {
  background: #dc2626;
  color: #fff;
  border-color: #dc2626;
}

/* Compare-mode expected hash aux */
#hash-compare-field .aux { font-family: var(--font-mono); font-size: 11px; }

/* Warning banner */
.hash-warning {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(245, 158, 11, .4);
  background: rgba(245, 158, 11, .1);
  color: #92400e;
  border-radius: var(--radius-md);
  font-size: 12px;
  line-height: 1.45;
}

/* ── Output rows ── */

.hash-rows { display: flex; flex-direction: column; gap: 10px; }
.hash-row {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  background: var(--surface);
  transition: border-color .15s, background .15s;
}
.hash-row.is-match { border-color: rgba(16, 185, 129, .55); background: rgba(16, 185, 129, .06); }
.hash-row.is-mismatch { border-color: rgba(239, 68, 68, .55); background: rgba(239, 68, 68, .06); }

.hash-row-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.hash-row-label {
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
  letter-spacing: .01em;
}
.hash-row-len {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-left: 2px;
}
.hash-row-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Segmented encoding control */
.hash-enc-seg {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px;
  background: var(--surface-2);
}
.hash-enc-btn {
  border: 0;
  background: transparent;
  color: var(--ink-3);
  padding: 3px 9px;
  font-size: 11px;
  font-family: var(--font-mono);
  border-radius: 999px;
  cursor: pointer;
  transition: color .15s, background .15s;
}
.hash-enc-btn:hover { color: var(--ink); }
.hash-enc-btn.is-active { background: var(--ink); color: var(--paper, #fff); }

/* Per-row copy button */
.hash-copy-btn {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: color .15s, border-color .15s, background .15s;
}
.hash-copy-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft, rgba(59, 130, 246, .08)); }
.hash-copy-btn.is-ok { color: #047857; border-color: rgba(16, 185, 129, .5); background: rgba(16, 185, 129, .1); }
.hash-copy-flash {
  font-family: var(--font-sans, system-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 0 4px;
}

/* Digest value */
.hash-row-value {
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink);
  word-break: break-all;
  white-space: pre-wrap;
  user-select: all;
}

.hash-row-match {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
}
.hash-row-match.is-ok  { color: #047857; }
.hash-row-match.is-bad { color: #b91c1c; }

/* ── Right rail (reference + shortcuts) ── */

.hash-ref-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.hash-ref-table th,
.hash-ref-table td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
}
.hash-ref-table th {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-3);
  font-weight: 600;
}
.hash-ref-table tbody tr:last-child td { border-bottom: 0; }
.hash-ref-status {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.hash-ref-status.danger { background: rgba(239, 68, 68, .14); color: #b91c1c; border: 1px solid rgba(239, 68, 68, .3); }
.hash-ref-status.ok     { background: rgba(16, 185, 129, .12); color: #047857; border: 1px solid rgba(16, 185, 129, .3); }
.hash-ref-note { margin: 10px 0 0; font-size: 12px; color: var(--ink-2); line-height: 1.5; }

.hash-shortcut-list {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 8px;
  font-size: 12px; color: var(--ink-2);
}
.hash-shortcut-list li { display: flex; align-items: baseline; gap: 10px; line-height: 1.45; }
.hash-shortcut-list li > span:first-child { flex: 0 0 auto; }
.hash-shortcut-list kbd {
  display: inline-block;
  padding: 1px 5px;
  margin-right: 2px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-2);
}

/* Mobile polish */
@media (max-width: 640px) {
  .hash-row-head { gap: 6px; }
  .hash-row-actions { margin-left: 0; width: 100%; justify-content: space-between; }
  .hash-enc-seg { flex: 1 1 auto; justify-content: space-between; }
  .hash-enc-btn { flex: 1 1 0; text-align: center; }
  .hash-shortcut-list { font-size: 11px; }
}
.slug-diff-sep      { color: var(--ink-3); }
[data-theme='dark'] .slug-diff-replaced { color: #fbbf24; }
[data-theme='dark'] .slug-diff-removed  { color: #f87171; }

.slug-diff-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--ink-2);
}
.slug-diff-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.slug-diff-legend__item .dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }

/* Stack bar override — use semantic colors for slug. */
.slug-stack-bar { margin-top: 12px; border-radius: 999px; overflow: hidden; display: flex; height: 8px; background: var(--surface-2); }
.slug-stack-seg--kept     { background: var(--accent); }
.slug-stack-seg--replaced { background: var(--amber); }
.slug-stack-seg--removed  { background: var(--rose, #ef4444); }

/* SERP preview */
.slug-preview-card { margin-top: 16px; }
.slug-serp {
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.slug-serp__top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.slug-serp__favicon {
  width: 24px; height: 24px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--teal, #14b8a6));
  flex-shrink: 0;
}
.slug-serp__site-name { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.2; }
.slug-serp__crumbs { font-size: 11px; color: var(--ink-2); line-height: 1.3; word-break: break-all; }
.slug-serp__title {
  margin: 4px 0 6px;
  font-size: 18px;
  line-height: 1.3;
  color: #1a0dab;
  font-weight: 500;
}
[data-theme='dark'] .slug-serp__title { color: #8ab4f8; }
.slug-serp__desc { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); }

/* Social card */
.slug-social {
  margin-top: 12px;
  display: flex;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface);
}
.slug-social__thumb {
  width: 96px;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), var(--teal, #14b8a6));
}
.slug-social__body { padding: 10px 12px; min-width: 0; flex: 1; }
.slug-social__domain { font-size: 10px; color: var(--ink-3); letter-spacing: .06em; text-transform: uppercase; }
.slug-social__title { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.3; margin: 2px 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.slug-social__url { font-size: 11px; color: var(--ink-3); word-break: break-all; }

.slug-full-url {
  display: block;
  margin-top: 12px;
  padding: 8px 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--ink-2);
}

/* Batch mode */
.slug-batch-card { margin-top: 16px; }
.slug-batch-actions { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.slug-batch-table-wrap { overflow-x: auto; max-height: 420px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-md); }
.slug-batch-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.slug-batch-table th {
  position: sticky; top: 0;
  background: var(--surface-2);
  text-align: left;
  padding: 8px 10px;
  font-weight: 600;
  color: var(--ink-2);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom: 1px solid var(--line);
}
.slug-batch-table td { padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.slug-batch-table tr:last-child td { border-bottom: 0; }
.slug-batch-table tr:nth-child(even) td { background: var(--surface-2); }
.slug-batch-n { color: var(--ink-3); width: 36px; }
.slug-batch-raw { color: var(--ink-2); word-break: break-word; }
.slug-batch-slug { color: var(--ink); word-break: break-all; font-weight: 500; }

/* History strip */
.slug-history-card { margin-top: 16px; }
.slug-history-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.slug-history-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.slug-history-item:hover { border-color: var(--accent); background: var(--accent-soft); }
.slug-history-item code {
  font-size: 12px;
  color: var(--ink);
  word-break: break-all;
  flex: 1;
  min-width: 0;
}
.slug-history-src { font-size: 11px; color: var(--ink-3); max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Tips list */
.slug-tips-card .slug-tip-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.slug-tips-card .slug-tip-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.slug-tips-card .slug-tip-list .dot { flex-shrink: 0; width: 10px; height: 10px; border-radius: 2px; margin-top: 5px; }

/* Preset aux wider so longer preset labels fit */
#slug-preset-aux { color: var(--ink-3); font-weight: 500; font-size: 12px; }

/* Action row — wrap on narrow columns */
.slug-card .ci-actions { flex-wrap: wrap; gap: 8px; }
.slug-card .ci-actions .calc-btn { flex: 1 1 auto; min-width: 120px; }

/* Hide diff/stack if empty */
.slug-card[data-mode="batch"] ~ * .slug-diff-card,
.slug-card[data-mode="batch"] ~ * .slug-history-card { }

/* ──────────────────────────────────────────────────────────────
   Accent Remover
   Reuses .json-card / .json-grid / .json-pane / .json-textarea /
   .ci-warning / .ci-stack-bar / .ci-stack-seg / .info-tip /
   .hero-action / .breakdown-card / .tip-card. Adds .ar-* tokens
   for the diff-highlight output, drag-and-drop hint, sample menu,
   keyboard-shortcut row, mapping table, and mode guide.
   ────────────────────────────────────────────────────────────── */

/* Diff-highlighted output container — same visual as .json-output
   but element is a <div> so we can render <mark> spans inside. */
.ar-output {
  white-space: pre-wrap;
  word-break: break-word;
  cursor: text;
}
.ar-output:empty::before {
  content: 'Output will appear here…';
  color: var(--ink-3);
  font-style: italic;
}
.ar-diff {
  background: var(--amber-soft);
  color: #7a4a10;
  padding: 1px 2px;
  margin: 0 1px;
  border-radius: 3px;
  font-weight: 600;
  cursor: help;
}
[data-theme='dark'] .ar-diff { color: var(--amber); background: rgba(245, 158, 11, .15); }

/* Drop zone — covers the input pane. The hint is hidden until is-dragover. */
.ar-input-pane { position: relative; }
.ar-drop-hint {
  position: absolute;
  inset: 24px 0 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: var(--accent-soft);
  border: 2px dashed var(--accent);
  border-radius: var(--radius-md);
  color: var(--accent);
  font-weight: 600;
  letter-spacing: .02em;
  opacity: 0;
  transition: opacity .15s;
}
.ar-input-pane.is-dragover .ar-drop-hint { opacity: 1; }
.ar-input-pane.is-dragover .json-textarea { border-color: var(--accent); }

/* Detected-script aux line in the input pane head */
#ar-detected { font-weight: 500; }

/* Warning row reuses .ci-warning visuals — same orange treatment. */
.ar-warning { margin-top: var(--space-3); }

/* Keyboard-shortcut hint row */
.ar-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: var(--space-3);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: .02em;
}
.ar-shortcuts kbd {
  display: inline-block;
  min-width: 18px;
  padding: 1px 5px;
  margin: 0 1px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 1px 0 var(--line);
}

/* Sample dropdown — sits inside .json-actions, anchored to its toggle. */
.ar-sample-wrap { position: relative; display: inline-block; }
.ar-sample-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 20;
  min-width: 160px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ar-sample-menu[hidden] { display: none; }
.ar-sample-menu button {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 6px 10px;
  font: inherit;
  font-size: 12px;
  color: var(--ink);
  text-align: left;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .12s;
}
.ar-sample-menu button:hover,
.ar-sample-menu button:focus-visible {
  background: var(--accent-soft);
  color: var(--accent);
  outline: none;
}

/* Result hero — composition stack-bar variant for accent remover */
.ar-stack-seg--unchanged { background: var(--teal, #14b8a6); }
.ar-stack-seg--modified  { background: var(--amber, #f59e0b); }

/* ── Below-fold: mapping table card ── */
.ar-mapping-card .card-lead {
  margin: 0 0 var(--space-4);
  color: var(--ink-2);
  font-size: var(--text-sm);
  line-height: 1.55;
}
.ar-mapping-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px 14px;
}
.ar-map {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 13px;
}
.ar-map--extra {
  background: var(--amber-soft);
  border-color: color-mix(in srgb, var(--amber) 30%, transparent);
}
[data-theme='dark'] .ar-map--extra { background: rgba(245, 158, 11, .08); }
.ar-map-from { color: var(--ink); }
.ar-map-arrow { color: var(--ink-3); }
.ar-map-to { color: var(--accent); font-weight: 600; }
.ar-map--extra .ar-map-to { color: var(--amber); }
.ar-map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: var(--space-4);
  font-size: 12px;
  color: var(--ink-3);
}
.ar-map-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ar-map-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.ar-map-dot--strip { background: var(--surface-2); border: 1px solid var(--line); }
.ar-map-dot--extra { background: var(--amber-soft); border: 1px solid var(--amber); }

/* ── Below-fold: which-mode-to-pick guide (3 columns) ── */
.ar-mode-guide {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
@media (max-width: 900px) {
  .ar-mode-guide { grid-template-columns: 1fr; }
}
.ar-mode-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.ar-mode-head { display: flex; align-items: center; gap: 8px; }
.ar-mode-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
}
.ar-mode-tag.tag-green  { background: var(--accent-soft); color: var(--accent); }
.ar-mode-tag.tag-amber  { background: var(--amber-soft);  color: var(--amber); }
.ar-mode-tag.tag-violet { background: var(--violet-soft); color: var(--violet); }
.ar-mode-body {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--text-sm);
  line-height: 1.55;
}
.ar-mode-eg {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-2);
}
.ar-mode-eg code {
  background: transparent;
  color: var(--ink);
  padding: 0;
}
.ar-mode-eg span { color: var(--ink-3); }

/* ═══════════════════════════════════════════════════════════════════
   Bra Size Converter — guide, cup-volume scale, systems grid, sisters.
   Reuses the shared .info-tip / .ci-warning / .ci-actions / .compare-card
   / .hero-action / .slider-wrap systems; only adds bra-specific flourishes.
   ═══════════════════════════════════════════════════════════════════ */
.bs-guide > summary {
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--ink-2);
  padding: 8px 0;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.bs-guide > summary::-webkit-details-marker { display: none; }
.bs-guide > summary::before {
  content: '▸';
  font-size: 10px;
  color: var(--ink-3);
  transition: transform .15s ease;
}
.bs-guide[open] > summary::before { transform: rotate(90deg); }
.bs-guide[open] > summary { color: var(--ink); }
.bs-guide-steps {
  margin: 10px 0 14px;
  padding-left: 18px;
  font-size: var(--text-sm);
  color: var(--ink-2);
  line-height: 1.55;
}
.bs-guide-steps li { margin-bottom: 6px; }
.bs-guide-steps strong { color: var(--ink); }
.bs-guide-svg {
  display: block;
  width: 100%;
  max-width: 280px;
  height: auto;
  margin: 8px auto 4px;
  color: var(--ink-3);
}

/* Cup-volume scale — horizontal gradient track with a dot marker
   showing where the user's cup lands on the AA..K spectrum. */
.bs-scale { padding: 6px 0 2px; }
.bs-scale-track {
  position: relative;
  height: 8px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: visible;
}
.bs-scale-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--teal) 0%, var(--accent) 50%, var(--amber) 100%);
  transition: width .35s ease;
}
.bs-scale-marker {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid var(--surface);
  box-shadow: var(--shadow-sm);
  transform: translate(-50%, -50%);
  transition: left .35s ease;
}
.bs-scale-ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: .04em;
}

/* All-systems grid: interactive rows (click to copy). Highlights the
   currently-selected region. */
.bs-systems-grid .bs-system-row {
  width: 100%;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  padding: 10px 12px;
  margin: 0;
  border-radius: var(--radius-sm);
  transition: background .12s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bs-systems-grid .bs-system-row:hover {
  background: var(--surface-2);
}
.bs-systems-grid .bs-system-row.is-active {
  background: var(--accent-soft);
}
.bs-systems-grid .bs-system-row.is-active .breakdown-label {
  color: var(--accent);
  font-weight: 600;
}
.bs-systems-grid .bs-system-row.is-copied .breakdown-value::after {
  content: ' ✓';
  color: var(--accent);
}

/* Sister-size picker — three chips in a row. Middle chip is primary. */
.bs-sister-row {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: 8px;
}
.bs-sister-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: center;
  transition: border-color .12s ease, transform .12s ease, background .12s ease;
}
.bs-sister-chip:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.bs-sister-chip:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
}
.bs-sister-chip--primary {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.bs-sister-kind {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-3);
}
.bs-sister-chip--primary .bs-sister-kind { color: var(--accent); }
.bs-sister-size {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--ink);
}
.bs-sister-hint {
  font-size: 10px;
  color: var(--ink-3);
  line-height: 1.2;
}
.bs-sister-chip.is-copied .bs-sister-size::after {
  content: ' ✓';
  color: var(--accent);
}

@media (max-width: 520px) {
  .bs-sister-row { grid-template-columns: 1fr; }
  .bs-sister-chip { flex-direction: row; justify-content: space-between; padding: 10px 12px; }
  .bs-sister-hint { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   Palindrome checker — hero tint, verdict icon, mirror viz, steps,
   sample library, bonus card. Scoped under `.pal-*` to avoid bleed.
   ══════════════════════════════════════════════════════════════════ */

/* Verdict text color — driven by the JS-applied .verdict-yes/.verdict-no. */
.verdict-yes { color: #16a34a; }
.verdict-no  { color: #dc2626; }
[data-theme='dark'] .verdict-yes { color: #4ade80; }
[data-theme='dark'] .verdict-no  { color: #f87171; }

/* Hero tint — keeps the default dark-gradient .result-hero but layers a
   verdict-colored wash on top so white text stays legible. */
.pal-hero { transition: background 0.25s ease; }
.pal-hero--yes {
  background:
    linear-gradient(180deg, rgba(34, 197, 94, 0.18), rgba(34, 197, 94, 0.04)),
    linear-gradient(135deg, #1e2d28 0%, #2e5d4e 55%, #4a8672 100%);
}
.pal-hero--no {
  background:
    linear-gradient(180deg, rgba(239, 68, 68, 0.18), rgba(239, 68, 68, 0.04)),
    linear-gradient(135deg, #2d1e1e 0%, #5d2e2e 55%, #864a4a 100%);
}
[data-theme='dark'] .pal-hero--yes {
  background:
    linear-gradient(180deg, rgba(34, 197, 94, 0.22), rgba(34, 197, 94, 0.06)),
    linear-gradient(135deg, #1e2d28 0%, #2e5d4e 55%, #4a8672 100%);
}
[data-theme='dark'] .pal-hero--no {
  background:
    linear-gradient(180deg, rgba(239, 68, 68, 0.22), rgba(239, 68, 68, 0.06)),
    linear-gradient(135deg, #2d1e1e 0%, #5d2e2e 55%, #864a4a 100%);
}

/* Big icon next to the YES / NO verdict. */
.pal-verdict-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 4px;
}
.pal-verdict-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  font-size: 24px;
  font-weight: 800;
  background: var(--surface-2);
  color: var(--ink-3);
  border: 2px solid var(--line);
  flex: 0 0 auto;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.pal-verdict-icon--yes {
  background: rgba(34, 197, 94, 0.14);
  color: #16a34a;
  border-color: rgba(34, 197, 94, 0.45);
}
.pal-verdict-icon--no {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
  border-color: rgba(239, 68, 68, 0.45);
}
[data-theme='dark'] .pal-verdict-icon--yes { color: #4ade80; }
[data-theme='dark'] .pal-verdict-icon--no  { color: #f87171; }

/* Mirror-line visualization — one monospace cell per character, paired
   around the center. Matching pairs get a teal underline, mismatches
   red; the first mismatch pulses. */
.pal-mirror {
  margin-top: 14px;
  padding: 10px 12px;
  background: var(--surface-2);
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  overflow-x: auto;
}
.pal-mirror:empty { display: none; }
.pal-mirror-row {
  display: inline-flex;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;
}
.pal-mirror-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 6px 4px 8px;
  border-bottom: 3px solid var(--line);
  color: var(--ink);
  font-weight: 600;
  border-radius: 4px 4px 0 0;
}
.pal-mirror-cell--match {
  border-bottom-color: #14b8a6;
  background: rgba(20, 184, 166, 0.06);
}
.pal-mirror-cell--miss {
  border-bottom-color: #dc2626;
  background: rgba(220, 38, 38, 0.08);
  color: #dc2626;
}
.pal-mirror-cell--pivot {
  border-bottom-color: var(--accent);
  color: var(--accent);
  background: rgba(99, 102, 241, 0.06);
}
.pal-mirror-cell--first-miss {
  animation: pal-pulse 1.4s ease-in-out infinite;
}
[data-theme='dark'] .pal-mirror-cell--miss { color: #f87171; }
@keyframes pal-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.35); }
  50%      { box-shadow: 0 0 0 4px rgba(220, 38, 38, 0); }
}

/* Word mode — each word is its own pill. */
.pal-mirror-row--word { gap: 6px; flex-wrap: wrap; white-space: normal; }
.pal-word-cell {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
}
.pal-word-cell--match { border-color: #14b8a6; background: rgba(20, 184, 166, 0.08); color: #0f766e; }
.pal-word-cell--miss  { border-color: #dc2626; background: rgba(220, 38, 38, 0.08); color: #dc2626; }
.pal-word-cell--pivot { border-color: var(--accent); color: var(--accent); background: rgba(99, 102, 241, 0.06); }
[data-theme='dark'] .pal-word-cell--match { color: #5eead4; }
[data-theme='dark'] .pal-word-cell--miss  { color: #f87171; }

/* Sample chip library — smaller, quieter chips. */
.pal-samples .chip {
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 500;
  font-family: var(--font-mono);
}

/* Options section disabled (strict mode). */
#pal-options-section.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* How-it-works steps card. */
.pal-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pal-step {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  align-items: start;
  padding: 10px 12px;
  background: var(--surface-2);
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
}
.pal-step-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
}
.pal-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  flex: 0 0 auto;
}
.pal-step-value {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.5;
  word-break: break-word;
  overflow-wrap: anywhere;
}
@media (max-width: 520px) {
  .pal-step { grid-template-columns: 1fr; }
}

/* Bonus card — longest palindromic substring. */
.pal-bonus-card .pal-bonus-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--accent);
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
  word-break: break-word;
  overflow-wrap: anywhere;
  text-align: center;
  letter-spacing: 0.02em;
}
.pal-bonus-explain {
  margin-top: 10px;
  color: var(--ink-3);
  font-size: 12.5px;
}

/* ═══════════════════════════════════════════════════════════════════
   UUID Generator
   Reuses .card, .form-section, .chip-row, .info-tip, .input-wrap,
   .slider-wrap, .result-hero, .breakdown-grid, .ci-actions,
   .calc-btn, .hero-action, .tip-card. Adds:
   format preview chips, row-based output, copy toast, kbd hints,
   empty state, dim braces.
   ══════════════════════════════════════════════════════════════════ */

/* Chip preview (format) — two-line chip with label + preview. */
.chip-row #uuid-format .chip,
.chip-row #uuid-version .chip {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 12px;
  line-height: 1.3;
}
.chip-row #uuid-version .chip { align-items: center; }
.chip-label {
  font-weight: 600;
  font-size: 13px;
}
.chip-sub {
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 500;
  text-transform: lowercase;
  letter-spacing: 0.02em;
}
.chip-preview {
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: -0.01em;
}
.chip.active .chip-sub,
.chip.active .chip-preview { color: inherit; opacity: 0.85; }

/* Dim braces in {braces} format. */
.uuid-brace { color: var(--ink-3); opacity: 0.75; }

/* Output container. */
.uuid-output-wrap {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  overflow: hidden;
}
.uuid-output-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.uuid-tool-spacer { flex: 1; }
.uuid-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.uuid-tool-btn:hover {
  background: var(--surface-2);
  color: var(--ink);
  border-color: var(--line-strong);
}
.uuid-tool-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Output row list. */
.uuid-output {
  margin: 0;
  padding: 0;
  max-height: 420px;
  overflow: auto;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
}
.uuid-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--line);
}
.uuid-row:last-child { border-bottom: 0; }
.uuid-row:nth-child(even) { background: var(--surface); }
.uuid-row:hover { background: var(--accent-soft); }
.uuid-row-num {
  text-align: right;
  font-size: 11px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.uuid-row-val {
  word-break: break-all;
  white-space: pre-wrap;
}
.uuid-row-copy {
  padding: 4px 8px;
  font-size: 13px;
  line-height: 1;
  color: var(--ink-3);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s, background 0.15s, border-color 0.15s;
}
.uuid-row:hover .uuid-row-copy,
.uuid-row:focus-within .uuid-row-copy {
  opacity: 1;
}
.uuid-row-copy:hover {
  color: var(--accent);
  background: var(--surface);
  border-color: var(--line);
}
.uuid-row-copy:focus-visible {
  opacity: 1;
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Empty state. */
.uuid-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 140px;
  padding: 24px 16px;
  color: var(--ink-3);
  text-align: center;
}
.uuid-empty-sample {
  font-size: 14px;
  color: var(--ink-3);
  opacity: 0.55;
  letter-spacing: 0.02em;
}
.uuid-empty-hint {
  font-size: 13px;
  color: var(--ink-2);
}

/* Keyboard hint row under primary actions. */
.uuid-kbd-hints {
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--ink-3);
  letter-spacing: 0.02em;
  text-align: center;
}
.uuid-kbd-hints .kbd,
.kbd-hint.kbd,
.kbd {
  display: inline-block;
  padding: 1px 6px;
  margin: 0 2px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 1px 0 var(--line);
}
.kbd-hint {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
}
.calc-btn--secondary .kbd-hint {
  color: var(--ink-3);
  background: var(--surface-2);
  border-color: var(--line);
}

/* Toast. */
.uuid-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 20px);
  padding: 10px 16px;
  background: var(--ink);
  color: var(--surface);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 9999;
}
.uuid-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Hero action row spacing when there are two buttons. */
.result-hero__actions { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 520px) {
  .uuid-row { grid-template-columns: 28px 1fr auto; gap: 6px; padding: 6px 8px; }
  .uuid-output-toolbar { flex-wrap: wrap; }
  .chip-row #uuid-format .chip { padding: 6px 10px; }
  .chip-preview { display: none; }
}

/* ─────────────────────────────────────────────────────────────────
   Lorem ipsum generator — preview body + per-paragraph controls.
   The preview renders real prose so it uses the body font, not
   mono. Stats and inline numeric labels keep `.mono` separately.
   ───────────────────────────────────────────────────────────── */
.li-output-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 160px;
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-family: var(--font-body, inherit);
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink);
  transition: background 0.3s ease;
}
.li-output-body.li-flash { background: var(--accent-soft); }

.li-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--line);
}
.li-block:last-child { border-bottom: 0; padding-bottom: 0; }

.li-block__body { margin: 0; }

.li-block__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.li-block:hover .li-block__meta,
.li-block:focus-within .li-block__meta { opacity: 1; }
.li-block__stats {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  text-transform: uppercase;
}
.li-block__copy {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  background: transparent;
  color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.li-block__copy:hover { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.li-block__copy.is-copied { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Pulse the "Fresh" badge for ~1s after each regenerate so users
   can tell live-updates are landing. */
@keyframes li-fresh-pulse {
  0%   { opacity: 0; transform: translateY(-2px); }
  20%  { opacity: 1; transform: translateY(0); }
  80%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(0); }
}
.li-fresh-pulse { animation: li-fresh-pulse 0.9s ease forwards; }

/* About accordion under the input card. */
.li-about { margin-top: 16px; }
.li-about__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.li-about__summary::-webkit-details-marker { display: none; }
.li-about__summary::marker { content: ''; }
.li-about__summary .chev {
  display: inline-block;
  transition: transform 0.15s ease;
  color: var(--ink-3);
  font-size: 16px;
}
.li-about[open] .li-about__summary .chev { transform: rotate(90deg); }

/* Delta pills in the pinned-compare card. */
.compare-delta--up   { color: #1f9d55; }
.compare-delta--down { color: #c03a3a; }

[data-theme='dark'] .li-output-body { background: var(--surface); border-color: var(--line); }
[data-theme='dark'] .li-output-body.li-flash { background: var(--accent-soft); }


/* ══════════════════════════════════════════════════════════════════
   String Length Calculator
   ══════════════════════════════════════════════════════════════════
   Reuses shared primitives: .card, .chip-row, .breakdown-grid,
   .result-hero, .result-sub, .compare-card, .ci-stack-bar/.ci-stack-seg,
   .info-tip, .ci-delta-badge. Only sl-* rules add the
   preset-limit-aware hero state, overlay preview, SMS segment visual,
   drop-zone state, and warnings list. */

.sl-input-wrap { position: relative; }
.sl-textarea { min-height: 200px; transition: border-color 0.15s ease; }
.sl-input-wrap.is-drop-over .sl-textarea {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Overlay preview sits below the textarea when any highlight toggle is
   active. Mirrors the textarea's font/size so spacing looks identical. */
.sl-overlay {
  margin-top: 8px;
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--ink);
  background: var(--accent-soft);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
  max-height: 40vh;
}
.sl-ov-ws       { background: rgba(20, 184, 166, 0.22); color: #0d9488; border-radius: 2px; padding: 0 1px; }
.sl-ov-nonascii { background: rgba(245, 158, 11, 0.22); color: #b45309; border-radius: 2px; padding: 0 1px; }
.sl-ov-invis    { background: rgba(239, 68, 68, 0.22);  color: #b91c1c; border-radius: 2px; padding: 0 1px; }
.sl-ov-over     { background: rgba(239, 68, 68, 0.18); border-bottom: 2px solid #dc2626; }

/* Hero state tints — mirrors .result-hero--up/down conventions. */
.sl-hero--ok    .result-value { color: inherit; }
.sl-hero--warn  .result-value { color: #f59e0b; }
.sl-hero--over  .result-value { color: #ef4444; }
.sl-hero--short .result-value { color: #f59e0b; }

/* Progress bar under the hero number. */
.sl-progress {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sl-progress-track {
  position: relative;
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  overflow: hidden;
}
.sl-progress-fill {
  display: block;
  height: 100%;
  background: #fff;
  border-radius: 999px;
  transition: width 0.2s ease, background 0.2s ease;
}
.sl-hero--warn .sl-progress-fill  { background: #fbbf24; }
.sl-hero--over .sl-progress-fill  { background: #fca5a5; }
.sl-hero--short .sl-progress-fill { background: #fbbf24; }
.sl-progress-countdown {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.82);
  letter-spacing: 0.02em;
}

/* Character-class stack-bar segments — reuses .ci-stack-bar shell,
   just adds the five string-length categories. */
.ci-stack-seg.sl-stack-seg--letters  { background: var(--accent); }
.ci-stack-seg.sl-stack-seg--digits   { background: var(--amber, #f59e0b); }
.ci-stack-seg.sl-stack-seg--spaces   { background: #cbd5e1; }
.ci-stack-seg.sl-stack-seg--special  { background: #6366f1; }
.ci-stack-seg.sl-stack-seg--nonascii { background: #14b8a6; }

.breakdown-label .dot.sl-dot--letters  { background: var(--accent); }
.breakdown-label .dot.sl-dot--digits   { background: var(--amber, #f59e0b); }
.breakdown-label .dot.sl-dot--spaces   { background: #cbd5e1; }
.breakdown-label .dot.sl-dot--special  { background: #6366f1; }
.breakdown-label .dot.sl-dot--nonascii { background: #14b8a6; }

/* Clickable breakdown / result-sub rows (per-row copy). */
#sl-breakdown-root .result-sub-item,
#sl-breakdown-grid .breakdown-row {
  cursor: pointer;
  transition: background 0.15s ease;
  border-radius: var(--radius-sm);
}
#sl-breakdown-root .result-sub-item:hover { background: rgba(255, 255, 255, 0.08); }
#sl-breakdown-grid .breakdown-row:hover   { background: var(--accent-soft); }
#sl-breakdown-root .result-sub-item.is-copied,
#sl-breakdown-grid .breakdown-row.is-copied {
  background: var(--accent-soft);
  outline: 1px solid var(--accent);
}

/* Content-metrics card — dense grid. */
.sl-metrics-card { margin-top: var(--space-4); }
.sl-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}
.sl-metric {
  background: var(--surface-2, rgba(0, 0, 0, 0.02));
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  min-width: 0;
}
.sl-metric-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-3);
  font-weight: 600;
  margin-bottom: 4px;
}
.sl-metric-value {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.sl-metric-value--ellipsis {
  font-size: var(--text-base);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* SMS card. */
.sl-sms-card { margin-top: var(--space-4); }
.sl-sms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.sl-sms-stat {
  background: var(--surface-2, rgba(0, 0, 0, 0.02));
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 10px 12px;
}
.sl-sms-stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-3);
  font-weight: 600;
  margin-bottom: 4px;
}
.sl-sms-stat-value {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.sl-sms-dots {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.sl-sms-dot {
  display: inline-block;
  width: 28px;
  height: 14px;
  border-radius: 3px;
  background: var(--line);
  border: 1px solid var(--line-strong);
}
.sl-sms-dot.is-used { background: var(--accent); border-color: var(--accent); }
.sl-sms-dot-more {
  font-size: 12px;
  color: var(--ink-3);
  font-weight: 600;
}
.sl-sms-hint {
  margin: 0;
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.5;
}

/* Warnings card. */
.sl-warnings-card { margin-top: var(--space-4); border-left: 3px solid #f59e0b; }
.sl-warnings {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sl-warn {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-sm);
  color: var(--ink);
}
.sl-warn-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
}

/* Top words list. */
.sl-top-card { margin-top: var(--space-4); }
.sl-top {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: sl-top;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sl-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  background: var(--surface-2, rgba(0, 0, 0, 0.02));
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  counter-increment: sl-top;
}
.sl-top-row::before {
  content: counter(sl-top);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 8px;
  min-width: 22px;
  text-align: center;
}
.sl-top-word {
  flex: 1 1 auto;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sl-top-count {
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--accent);
}
.sl-top-empty {
  list-style: none;
  color: var(--ink-3);
  font-size: var(--text-sm);
  padding: 8px 0;
  text-align: center;
}

/* Ensure the delta badge reuses the CI good/bad color convention:
   for string length, a *shorter* string is "good" (same as saving money). */
.sl-hero .ci-delta-badge {
  background: #ef4444;
  color: #fff;
}
.sl-hero .ci-delta-badge.ci-delta-badge--good {
  background: var(--accent);
}

/* Dark-mode parity — pick up on the existing data-theme='dark' hook. */
[data-theme='dark'] .sl-metric,
[data-theme='dark'] .sl-sms-stat,
[data-theme='dark'] .sl-top-row {
  background: rgba(96, 165, 250, 0.06);
  border-color: var(--line-strong);
}
[data-theme='dark'] .sl-overlay {
  background: rgba(96, 165, 250, 0.08);
}

@media (max-width: 640px) {
  .sl-metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .sl-sms-grid     { grid-template-columns: repeat(2, 1fr); }
}

/* ─────────────────────────────────────────────────────────────────
   Roman numeral converter — scoped styles
   ───────────────────────────────────────────────────────────────── */

/* Display typography — serif, generously tracked Roman lettering. */
.rn-display {
  font-family: 'Cinzel', 'Trajan Pro', 'EB Garamond', Georgia, 'Times New Roman', serif;
  letter-spacing: 0.1em;
  font-weight: 600;
  word-break: break-word;
  line-height: 1.05;
}
.rn-display--sm { font-size: 26px; letter-spacing: 0.08em; }
.result-hero .rn-display { font-size: 64px; }
@media (max-width: 720px) {
  .result-hero .rn-display { font-size: 44px; }
}

/* Subtractive pair highlight inside the hero number (IV, IX, XL, XC, CD, CM). */
.rn-pair {
  color: #ffd56a;
  background: rgba(255, 213, 106, 0.08);
  padding: 0 2px;
  border-radius: 4px;
  text-shadow: 0 0 14px rgba(255, 213, 106, 0.45);
}

.rn-display__error {
  font-family: var(--font-body);
  font-size: 26px;
  letter-spacing: 0;
  color: #ffb4b4;
  font-weight: 600;
}

.rn-tagline { color: rgba(255, 255, 255, 0.78); font-size: 14px; }
.rn-words { font-style: italic; font-size: 13px; text-transform: capitalize; }

/* Soft chip variant for the quick-pick rows. */
.chip.chip--soft {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--ink-2);
  font-weight: 500;
}
.chip.chip--soft:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-soft); }
.chip.chip--soft.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Live invalid state on the Roman input. */
.rn-card .input-wrap.is-invalid {
  border-color: var(--rose, #e0625b);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rose, #e0625b) 18%, transparent);
}

.rn-actions { margin-top: 8px; }

/* Tiny keyboard hint below the action row. */
.rn-keys-hint {
  margin: 14px 0 0;
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.5;
}
.rn-keys-hint kbd {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 11px;
  margin: 0 1px;
}

/* ── Composition card: stack bar + legend ── */
.rn-stack-card { margin-top: 16px; }

.rn-stack-bar {
  display: flex;
  width: 100%;
  height: 14px;
  border-radius: var(--radius-full);
  overflow: hidden;
  background: var(--surface-2);
  margin-bottom: 14px;
}
.rn-stack-seg { display: block; height: 100%; transition: width .35s ease; }
.rn-stack-seg--m { background: #4f46e5; }
.rn-stack-seg--d { background: #7c3aed; }
.rn-stack-seg--c { background: #0ea5e9; }
.rn-stack-seg--l { background: #14b8a6; }
.rn-stack-seg--x { background: #f59e0b; }
.rn-stack-seg--v { background: #ef4444; }
.rn-stack-seg--i { background: #94a3b8; }

.rn-stack-legend {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 6px 14px;
}
.rn-stack-legend__row {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-2);
}
.rn-stack-legend__sym { font-weight: 700; color: var(--ink); min-width: 14px; }
.rn-stack-legend__count { color: var(--ink-3); font-size: 12px; }
.rn-stack-legend__val { color: var(--ink-2); margin-left: auto; font-size: 12px; }

/* ── Symbol legend card (always-on reference) ── */
.rn-legend-card { margin-top: 16px; }
.rn-legend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.rn-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.rn-legend-sym { font-weight: 700; color: var(--ink); font-size: 14px; }
.rn-legend-val { color: var(--ink-2); margin-left: auto; }
.rn-legend-note { font-size: 12px; color: var(--ink-3); line-height: 1.6; margin: 0; }

/* Per-symbol dot palette — matches the stack bar. */
.rn-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.rn-dot--m { background: #4f46e5; }
.rn-dot--d { background: #7c3aed; }
.rn-dot--c { background: #0ea5e9; }
.rn-dot--l { background: #14b8a6; }
.rn-dot--x { background: #f59e0b; }
.rn-dot--v { background: #ef4444; }
.rn-dot--i { background: #94a3b8; }

/* ── Today-in-Roman strip ── */
.rn-today-card { margin-top: 16px; }
.rn-today-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  text-align: center;
}
.rn-today-item {
  padding: 12px 8px;
  background: var(--surface-2);
  border-radius: var(--radius-md);
}
.rn-today-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.rn-today-value { color: var(--ink); }

/* ── Stagger animation on breakdown rows ── */
@keyframes rn-bd-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rn-bd-row { animation: rn-bd-fade-in 0.32s ease-out both; }
@media (prefers-reduced-motion: reduce) {
  .rn-bd-row { animation: none; }
  .rn-stack-seg { transition: none; }
}

/* ── Hero "Copied ✓" state for the copy button ── */
.hero-action.is-copied {
  background: rgba(127, 224, 168, 0.22);
  border-color: rgba(127, 224, 168, 0.45);
}

/* ── Formula-slot extras: how-it-works, common uses, range note ── */
.rn-howto__steps {
  margin: 0 0 var(--space-5);
  padding-left: 22px;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.6;
}
.rn-howto__steps li { margin-bottom: 6px; }

.rn-uses { margin-top: var(--space-6); }
.rn-uses__title {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  margin: 0 0 12px;
  font-weight: 600;
}
.rn-uses__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.rn-uses__item {
  padding: 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.rn-uses__label {
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
  margin-bottom: 4px;
}
.rn-uses__body {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.55;
}

.rn-range-note { margin-top: var(--space-6); }

/* Dark-theme softening of the gold subtractive-pair glow. */
[data-theme='dark'] .rn-pair {
  color: #ffe28a;
  background: rgba(255, 226, 138, 0.1);
  text-shadow: 0 0 18px rgba(255, 226, 138, 0.5);
}

/* ══════════════════════════════════════════════════════════════════
   Cron Expression Generator — builder, heatmap, decoded fields,
   copy-as panel, next-runs timeline. Layered on the shared
   card / chip-row / toggle-group / breakdown-grid system.
   ══════════════════════════════════════════════════════════════════ */

/* Builder: each row = label on left, mode chips + inputs stacked on right. */
.cron-builder { display: flex; flex-direction: column; gap: var(--space-3); }
.cron-builder-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-2) 0;
  border-top: 1px solid var(--line);
}
.cron-builder-row:first-child { border-top: none; padding-top: 0; }
.cron-builder-row__label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: .04em;
  padding-top: 6px;
}
.cron-builder-row__body { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.cron-mode-row { flex-wrap: wrap; gap: 6px; }
.cron-mode-row .chip { padding: 4px 10px; font-size: 12px; }
.cron-mode-input { min-height: 28px; display: flex; align-items: center; }
.cron-mode-hint {
  font-size: var(--text-sm);
  color: var(--ink-3);
  font-style: italic;
}
.cron-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  color: var(--ink-2);
  flex-wrap: wrap;
}
.cron-input {
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--text-sm);
  transition: border-color var(--transition-fast);
}
.cron-input:focus { outline: none; border-color: var(--accent); }
.cron-input--num { width: 70px; text-align: center; font-variant-numeric: tabular-nums; }

@media (max-width: 560px) {
  .cron-builder-row { grid-template-columns: 1fr; gap: var(--space-1); }
  .cron-builder-row__label { padding-top: 0; }
}

/* Decoded chip rows under field breakdown */
.breakdown-grid--cron .breakdown-value { flex-direction: column; align-items: flex-end; gap: 4px; min-width: 0; }
.cron-decoded { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; max-width: 100%; }
.cron-decoded__chip {
  font-size: 11px;
  padding: 2px 7px;
  background: var(--surface-2);
  color: var(--ink-2);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 7×24 heatmap */
.cron-heatmap { overflow-x: auto; padding: 2px 0; }
.cron-heatmap__grid {
  display: grid;
  grid-template-columns: 36px repeat(24, 1fr);
  gap: 3px;
  min-width: 480px;
}
.cron-heatmap__corner { /* top-left empty */ }
.cron-heatmap__col-label {
  font-size: 10px;
  color: var(--ink-3);
  text-align: center;
  font-variant-numeric: tabular-nums;
  padding-bottom: 2px;
  min-height: 14px;
}
.cron-heatmap__row-label {
  font-size: 11px;
  color: var(--ink-2);
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 6px;
}
.cron-heatmap__cell {
  aspect-ratio: 1 / 1;
  min-height: 14px;
  border-radius: 3px;
  background: var(--surface-2);
  border: 1px solid transparent;
  cursor: help;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.cron-heatmap__cell:hover { transform: scale(1.15); box-shadow: var(--shadow-sm); }
.cron-heatmap__cell[data-level="0"] { background: var(--surface-2); }
.cron-heatmap__cell[data-level="1"] { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.cron-heatmap__cell[data-level="2"] { background: color-mix(in srgb, var(--accent) 45%, transparent); }
.cron-heatmap__cell[data-level="3"] { background: color-mix(in srgb, var(--accent) 70%, transparent); }
.cron-heatmap__cell[data-level="4"] { background: var(--accent); }
.cron-heatmap__empty { color: var(--ink-3); text-align: center; padding: var(--space-4); font-style: italic; }

.cron-heatmap-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-2);
  font-size: 11px;
  color: var(--ink-3);
  justify-content: flex-end;
}
.cron-heatmap-legend__swatch {
  width: 12px; height: 12px; border-radius: 2px;
}
.cron-heatmap-legend__swatch[data-level="0"] { background: var(--surface-2); }
.cron-heatmap-legend__swatch[data-level="1"] { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.cron-heatmap-legend__swatch[data-level="2"] { background: color-mix(in srgb, var(--accent) 45%, transparent); }
.cron-heatmap-legend__swatch[data-level="3"] { background: color-mix(in srgb, var(--accent) 70%, transparent); }
.cron-heatmap-legend__swatch[data-level="4"] { background: var(--accent); }

/* Next runs timeline */
.cron-runs { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.cron-run {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  padding: 8px 10px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent);
}
.cron-run--empty { border-left-color: var(--line); color: var(--ink-3); font-style: italic; justify-content: center; }
.cron-run__rel { font-size: var(--text-sm); font-weight: 600; color: var(--ink); flex-shrink: 0; }
.cron-run__abs { font-size: 12px; color: var(--ink-2); text-align: right; }

/* Copy-as snippet */
.cron-copy-wrap {
  position: relative;
  margin-top: var(--space-2);
}
.cron-copy-snippet {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 220px;
  overflow: auto;
  margin: 0;
  color: var(--ink);
}
#cron-copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 4px 10px;
  font-size: 11px;
}

/* Valid badge in hero */
#cron-valid-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: 999px;
  background: rgba(34, 197, 94, .15);
  color: #22c55e;
  margin-left: 8px;
}

/* Dark-theme adjustments */
[data-theme='dark'] .cron-heatmap__cell[data-level="0"] { background: var(--surface-2); }
[data-theme='dark'] .cron-run { background: var(--surface-2); }
[data-theme='dark'] .cron-decoded__chip { background: var(--surface-2); color: var(--ink-2); }

/* ══════════════════════════════════════════════════════════════
   Number Base Converter — UI surfaces
   Reuses .card / .result-hero / .breakdown-grid / .chip / .toggle-*
   ══════════════════════════════════════════════════════════════ */

/* Base-label prefix badge inside the input (DEC / HEX / BIN …) */
.nb-base-prefix {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--ink-3, var(--ink-2));
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 4px);
  padding: 2px 6px;
  margin-right: 6px;
  line-height: 1;
  align-self: center;
}

/* Clear (×) button inside the input */
.nb-clear-btn {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--ink-3);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 6px;
  margin-left: 4px;
  border-radius: var(--radius-sm, 4px);
}
.nb-clear-btn:hover { color: var(--accent); background: var(--accent-soft, var(--surface-2)); }

/* Valid-digit hint shown in the aux slot */
.nb-valid-digits { font-family: var(--font-mono, monospace); }

/* Digit-ruler placeholder (reserved for future per-char marker) */
.nb-digit-ruler { min-height: 0; }

/* Input invalid state */
#nb-value.is-invalid { border-color: var(--rose, #ef4444); }

/* Preset chip row — compact chips */
.nb-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.chip.chip--sm { padding: 2px 10px; font-size: 12px; font-family: var(--font-mono, monospace); }

/* Hero big number — tighter letter spacing for long binary */
.nb-hero-value { letter-spacing: -.01em; }

/* All-bases rows — give room for copy button and sub-label */
.nb-bases-grid .breakdown-row { align-items: baseline; gap: var(--space-2); }
.nb-base-num {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--surface-2);
  border-radius: 999px;
}
.nb-copy-btn { font-size: 14px; }

/* Bit grid — interactive toggle cells */
.nb-bits-card .card-body { overflow-x: auto; }
.nb-bit-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  justify-content: flex-start;
  padding: 4px 0;
}
.nb-bit {
  appearance: none;
  position: relative;
  min-width: 28px;
  height: 36px;
  padding: 0 2px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-3);
  border-radius: var(--radius-sm, 4px);
  font-family: var(--font-mono, monospace);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nb-bit:hover { border-color: var(--accent); color: var(--ink); }
.nb-bit.nb-bit--on {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.nb-bit.nb-bit--msb { box-shadow: 0 0 0 2px rgba(239, 68, 68, .35) inset; }
.nb-bit__idx {
  position: absolute;
  bottom: -14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  font-weight: 500;
  color: var(--ink-3);
  font-family: var(--font-mono, monospace);
}
.nb-bit-sep { display: inline-block; width: 8px; }
.nb-bit-legend { margin-top: 22px; display: flex; gap: 16px; font-size: 12px; color: var(--ink-3); align-items: center; }
.nb-bit-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.nb-bit--legend { min-width: 16px; height: 16px; font-size: 10px; cursor: default; padding: 0; }
.nb-bit-legend__msb { margin-left: auto; font-size: 11px; color: var(--rose, #ef4444); }

/* ── Line counter & sorter ─────────────────────────────────────── */
.lc-card .lc-card-header {
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
}
.lc-header-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lc-header-aux  { margin-left: auto; }
.lc-kbd-hint {
  font-size: 11px;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.lc-kbd-hint kbd {
  display: inline-block;
  padding: 1px 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: inset 0 -1px 0 var(--line);
}

.lc-toolbar {
  position: sticky;
  top: 8px;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding: 12px 14px;
  margin-bottom: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  backdrop-filter: saturate(140%);
}
.lc-toolbar-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lc-toolbar-group--end { margin-left: auto; }
.lc-toolbar-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.lc-toolbar .chip { padding: 6px 12px; font-size: 12px; position: relative; }
.lc-toolbar .chip[disabled] { opacity: 0.45; cursor: not-allowed; }
.lc-toolbar .chip.is-applied {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.lc-toolbar .chip.is-success {
  background: #DCFCE7;
  border-color: #16A34A;
  color: #15803D;
}
.lc-toolbar .chip--primary {
  border-color: var(--accent);
  color: var(--accent);
}
.lc-toolbar .chip--primary:hover { background: var(--accent); color: #fff; }
.lc-toolbar .chip--danger:hover {
  border-color: var(--rose, #ef4444);
  color: var(--rose, #ef4444);
  background: color-mix(in srgb, var(--rose, #ef4444) 8%, transparent);
}

/* Chip tooltips — reuse info-tip pattern on data-tip. */
.lc-toolbar .chip[data-tip] { overflow: visible; }
.lc-toolbar .chip[data-tip]:hover::after,
.lc-toolbar .chip[data-tip]:focus-visible::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 10px;
  background: var(--ink);
  color: var(--surface);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  border-radius: 6px;
  pointer-events: none;
  z-index: 10;
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.15));
}

/* Options row — case, separator, load sample. */
.lc-options-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  padding: 10px 2px;
  margin-bottom: 10px;
  font-size: 13px;
}
.lc-option { display: inline-flex; align-items: center; gap: 8px; }
.lc-option--push { margin-left: auto; gap: 14px; }
.lc-option-label { color: var(--ink-2); font-weight: 500; display: inline-flex; align-items: center; gap: 4px; }
.lc-select {
  padding: 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}
.lc-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.lc-separator-custom {
  padding: 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12px;
  width: 120px;
}
.lc-separator-custom:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.lc-text-btn {
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lc-text-btn:hover { color: var(--accent-2, var(--accent)); }
.lc-privacy {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  padding: 3px 8px;
  background: var(--accent-soft);
  border-radius: 999px;
}

/* Editor — textarea + line-number gutter. */
.lc-grid { gap: 14px; }
.lc-pane { position: relative; }
.lc-editor {
  position: relative;
  display: flex;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.lc-editor:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.lc-editor.is-dragover .lc-dropzone { opacity: 1; pointer-events: auto; }
.lc-gutter {
  flex: 0 0 auto;
  width: 42px;
  padding: 12px 6px 12px 10px;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-3);
  background: var(--surface);
  border-right: 1px solid var(--line);
  overflow: hidden;
  user-select: none;
  white-space: pre;
}
.lc-textarea,
.lc-output {
  flex: 1;
  min-width: 0;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
.lc-textarea:focus { box-shadow: none !important; }

/* Drop zone overlay. */
.lc-dropzone {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--accent) 15%, var(--surface));
  border: 2px dashed var(--accent);
  border-radius: var(--radius-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 3;
}
.lc-dropzone-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  font-weight: 600;
  font-size: 14px;
}

/* Live counter bar — below the grid, above action row. */
.lc-counter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 14px 0 4px;
  padding: 10px 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--ink-2);
}
.lc-counter-pill strong {
  font-family: var(--font-mono);
  color: var(--ink);
  font-weight: 700;
  font-size: 14px;
  margin-right: 2px;
}
.lc-counter-sep { color: var(--ink-3); }

.lc-actions { margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; }

/* Examples card. */
.lc-examples { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.lc-example-btn {
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: border-color 0.15s, background 0.15s, transform 0.05s;
}
.lc-example-btn:hover { border-color: var(--accent); background: var(--accent-soft); }
.lc-example-btn:active { transform: translateY(1px); }
.lc-example-title { font-weight: 600; font-size: 13px; color: var(--ink); }
.lc-example-sub { font-size: 11px; color: var(--ink-3); }

/* Mobile — stack panes, drop sticky toolbar, reorder. */
@media (max-width: 720px) {
  .lc-toolbar {
    position: static;
    flex-direction: column;
    gap: 12px;
  }
  .lc-toolbar-group--end { margin-left: 0; }
  .lc-header-aux { display: none; }
  .lc-options-row { gap: 12px; }
  .lc-option--push { margin-left: 0; width: 100%; justify-content: space-between; }
  .lc-gutter { width: 34px; padding-left: 6px; font-size: 11px; }
  .lc-card .card-body { display: flex; flex-direction: column; }
  .lc-toolbar { order: 1; }
  .lc-options-row { order: 2; }
  .lc-grid { order: 3; }
  .lc-counter-bar { order: 4; }
  .lc-actions { order: 5; }
}

/* Dark theme. */
[data-theme='dark'] .lc-toolbar { background: var(--surface); border-color: var(--line); }
[data-theme='dark'] .lc-gutter { background: var(--surface-2); color: var(--ink-3); border-color: var(--line); }
[data-theme='dark'] .lc-toolbar .chip.is-success { background: rgba(34, 197, 94, 0.15); color: #86efac; border-color: #22c55e; }
[data-theme='dark'] .lc-kbd-hint kbd { background: var(--surface-2); border-color: var(--line); color: var(--ink-2); }

/* Byte breakdown */
.nb-byte-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.nb-byte-cell {
  flex: 0 0 auto;
  min-width: 64px;
  padding: 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  text-align: center;
}
.nb-byte-hex { font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: .04em; }
.nb-byte-dec { font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.nb-byte-idx { font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }

/* Reference / "about this value" list */
.nb-reference-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--ink-2); }
.nb-reference-list li { display: flex; align-items: center; gap: 8px; }
.nb-color-swatch {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1px solid var(--line);
  vertical-align: middle;
}

/* Formula partial — method blocks */
.nb-method { margin-top: 12px; }
.nb-method:first-child { margin-top: 0; }
.nb-method__heading { font-weight: 600; color: var(--ink); margin-bottom: 6px; font-size: 14px; }
.nb-method__algo { margin: 6px 0 0 20px; padding: 0; color: var(--ink-2); font-size: 13px; line-height: 1.6; }
.nb-worked-line { font-size: 13px; color: var(--ink-2); margin: 8px 0; }
.nb-worked-section { margin-top: 12px; }
.nb-worked-section__title { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; color: var(--ink-3); margin-bottom: 4px; }
.nb-worked-expand { font-size: 13px; word-break: break-word; }
.nb-worked-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 4px; }
.nb-worked-table th { text-align: left; padding: 4px 6px; font-weight: 600; color: var(--ink-3); border-bottom: 1px solid var(--line); }
.nb-worked-table td { padding: 4px 6px; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.nb-ref-tables { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px; }
.nb-ref-table { flex: 1 1 220px; }
.nb-ref-table__title { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; color: var(--ink-3); margin-bottom: 4px; }
.nb-ref-mini { width: 100%; border-collapse: collapse; font-size: 12px; }
.nb-ref-mini td { padding: 3px 8px; border-bottom: 1px solid var(--line); color: var(--ink-2); }

/* Dark theme tweaks */
[data-theme='dark'] .nb-byte-cell { background: var(--surface); }
[data-theme='dark'] .nb-base-prefix { background: var(--surface); }
[data-theme='dark'] .nb-bit { background: var(--surface); }
[data-theme='dark'] .nb-bit:hover { background: var(--surface-2); }

/* ────────────────────────────────────────────────────────────────
   Image Compressor (image-compressor)
   Reuses .card, .form-section, .input-wrap, .chip-row, .ci-actions,
   .ci-warning, .info-tip, .breakdown-grid, plus ic-* classes defined
   above for batch list rows.
   ──────────────────────────────────────────────────────────────── */

.ic-dropzone {
  display: block;
  position: relative;
  border: 2px dashed var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: var(--space-6) var(--space-4);
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s;
  outline: none;
}
.ic-dropzone:hover,
.ic-dropzone:focus-visible { border-color: var(--accent); background: var(--accent-soft, var(--surface-2)); }
.ic-dropzone.is-dragover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  transform: scale(1.005);
}
.ic-dropzone-inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); color: var(--ink-2); }
.ic-dropzone-icon { color: var(--accent); opacity: .9; }
.ic-dropzone-title { font-weight: var(--font-semibold); font-size: var(--text-base); color: var(--ink); }
.ic-dropzone-cta { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.ic-dropzone-hint { font-size: var(--text-xs); color: var(--ink-3); }
.ic-dropzone-filled { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.ic-dropzone-filled[hidden], .ic-dropzone-inner[hidden] { display: none !important; }
.ic-dropzone-count { font-weight: var(--font-semibold); color: var(--ink); }
.ic-dropzone-change {
  background: transparent; border: 1px solid var(--line); color: var(--ink-2);
  padding: 6px 12px; border-radius: var(--radius-sm); cursor: pointer; font-size: var(--text-sm);
  transition: border-color .15s, color .15s;
}
.ic-dropzone-change:hover { border-color: var(--accent); color: var(--accent); }

.ic-privacy {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--ink-3);
  display: flex; align-items: center; gap: 6px;
  justify-content: center;
}
.ic-privacy::before {
  content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--accent);
}

.ic-format-hint {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--ink-3);
  line-height: 1.5;
}

.ic-dim-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.ic-dim { min-width: 0; }
.ic-aspect-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: var(--space-3);
  font-size: var(--text-sm); color: var(--ink-2); cursor: pointer;
  user-select: none;
}
.ic-aspect-toggle input { accent-color: var(--accent); }

/* Result panel */
.ic-result-card { /* hook for theming if needed */ }
.ic-empty {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: var(--space-6) var(--space-3);
  color: var(--ink-3);
  text-align: center;
}
.ic-empty-icon { color: var(--ink-3); opacity: .6; }
.ic-empty-title { font-weight: var(--font-semibold); color: var(--ink-2); }
.ic-empty-hint { font-size: var(--text-sm); }

.ic-badge-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.ic-savings-badge {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  background: var(--accent-soft, var(--surface-2));
  color: var(--accent);
  font-weight: var(--font-semibold);
}
.ic-savings-badge--good { background: var(--accent); color: #fff; }
.ic-savings-badge--ok   { background: var(--accent-soft, var(--surface-2)); color: var(--accent); }
.ic-savings-badge--low  { background: var(--amber-soft, var(--surface-2)); color: #7a4a10; }
.ic-savings-badge--bad  { background: color-mix(in srgb, var(--amber) 18%, var(--surface)); color: #7a4a10; }
.ic-savings-pct { font-size: var(--text-xl, 1.25rem); font-weight: 700; letter-spacing: .01em; }
.ic-savings-label { font-size: var(--text-sm); opacity: .85; }
.ic-savings-bytes { font-size: var(--text-sm); color: var(--ink-2); }

.ic-bar { margin-bottom: var(--space-4); }
.ic-bar-track {
  position: relative; height: 10px; border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}
.ic-bar-fill {
  height: 100%; border-radius: 999px; background: var(--accent);
  transition: width .25s ease-out, background .15s;
}
.ic-bar-fill--good { background: var(--accent); }
.ic-bar-fill--ok   { background: color-mix(in srgb, var(--accent) 75%, var(--surface-2)); }
.ic-bar-fill--low  { background: var(--amber); }
.ic-bar-fill--bad  { background: color-mix(in srgb, var(--amber) 75%, #c03); }
.ic-bar-legend {
  display: flex; justify-content: space-between;
  margin-top: 6px; font-size: var(--text-xs); color: var(--ink-3);
}
.ic-bar-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.ic-dot { width: 8px; height: 8px; border-radius: 999px; display: inline-block; }
.ic-dot--orig { background: var(--ink-3); }
.ic-dot--new  { background: var(--accent); }

.ic-compare {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.ic-compare-pane { min-width: 0; }
.ic-compare-label {
  font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-3); margin-bottom: 4px;
}
.ic-compare-img-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  background: repeating-conic-gradient(var(--surface-2) 0% 25%, var(--surface) 0% 50%) 0 0 / 16px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.ic-compare-img-wrap img {
  max-width: 100%; max-height: 100%;
  object-fit: contain; display: block;
}
.ic-compare-meta {
  margin-top: 4px; font-size: var(--text-xs); color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.ic-batch { margin-top: var(--space-4); }
.ic-batch .calc-btn { margin-top: var(--space-3); width: 100%; }
.ic-batch-total {
  margin-top: var(--space-2);
  font-size: var(--text-xs); color: var(--ink-3); text-align: right;
}

/* Responsive */
@media (max-width: 640px) {
  .ic-compare { grid-template-columns: 1fr; }
  .ic-dim-row { grid-template-columns: 1fr; }
  .ic-badge-row { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ═══ Duplicate Line Remover — extended UI ═══ */

.dlr-card .json-pane-head { gap: 12px; }

.dlr-pane-meta {
  display: inline-block;
  margin-left: 8px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-3);
  font-size: 11px;
}

.dlr-field-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  margin-top: 8px;
}
.dlr-field-row .dlr-sort,
.dlr-field-row .dlr-transform {
  display: flex;
  align-items: center;
  gap: 8px;
}
.field-label-inline {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: 0.02em;
}

.dlr-actions-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.dlr-actions-bar .calc-btn {
  width: auto;
  min-height: 32px;
  margin-top: 0;
  padding: 6px 14px;
  font-size: 12px;
  border-radius: var(--radius-md);
  box-shadow: none;
}
.dlr-actions-bar .calc-btn:hover { transform: none; box-shadow: var(--shadow-sm); }
.dlr-kbd-hint {
  margin-left: auto;
  font-size: 11px;
  color: var(--ink-3);
}
.dlr-kbd-hint kbd {
  display: inline-block;
  padding: 1px 5px;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-2);
}
@media (max-width: 640px) {
  .dlr-kbd-hint { display: none; }
}

.dlr-output-actions {
  display: inline-flex;
  gap: 6px;
}
.chip--sm {
  padding: 3px 10px !important;
  font-size: 11px !important;
}

.dlr-input-shell { position: relative; }
.dlr-drop-overlay {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
  background: var(--accent-soft, rgba(99, 102, 241, 0.08));
  border: 2px dashed var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
}
.dlr-input-shell.is-dragover .dlr-drop-overlay { opacity: 1; }
.dlr-drop-overlay__inner {
  padding: 12px 20px;
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--accent);
  font-weight: 600;
  font-size: 14px;
  box-shadow: var(--shadow-sm);
}

.dlr-empty-hint {
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--ink-3);
  font-size: 13px;
  text-align: center;
}
.dlr-empty-hint p { margin: 0; }
.dlr-empty-hint strong { color: var(--ink-2); font-weight: 600; }

.dlr-dup-item {
  gap: 12px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, transform 0.1s;
}
.dlr-dup-item:hover {
  border-color: var(--accent);
  background: var(--accent-soft, rgba(99, 102, 241, 0.06));
}
.dlr-dup-item:active { transform: translateY(1px); }
.dlr-dup-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.dlr-dup-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--ink-2);
}

@media (max-width: 720px) {
  .dlr-actions-bar .calc-btn { flex: 1; min-width: 0; }
  .dlr-field-row { gap: 12px; }
}


/* ════════════════════════════════════════════════════════════════
   Image Format Converter
   Reuses the shared `.ir-*` image-tool vocabulary from image-resizer
   (drop zone, source summary, batch list, compare slider, privacy
   chip). Only tool-specific pieces are defined here.
   ════════════════════════════════════════════════════════════════ */

/* Inline "Recommended: WebP" card-link that sits in the field label row. */
.ifc-recommend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
}
.ifc-recommend-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  display: inline-block;
}

/* Demote BMP visually — it's almost never the right answer. */
#ifc-target .chip[data-value="image/bmp"] { opacity: 0.7; }
#ifc-target .chip[data-value="image/bmp"].active { opacity: 1; }

/* Alpha-loss warning strip when target is JPEG/BMP and source has transparency. */
.ifc-alpha-warning {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-3);
  padding: 8px 12px;
  background: color-mix(in srgb, var(--amber) 14%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--amber) 40%, var(--line));
  color: var(--ink);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
}
.ifc-alpha-warning svg { color: var(--amber); flex-shrink: 0; }

/* Size-comparison stacked bar (original vs converted). */
.ifc-size-bar {
  position: relative;
  height: 12px;
  margin-top: var(--space-4);
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ifc-size-seg {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width .25s ease-out;
  min-width: 0;
}
.ifc-size-seg--orig { background: color-mix(in srgb, var(--accent) 35%, var(--surface-2)); }
.ifc-size-seg--new  { background: var(--accent); }
.ifc-size-bar-legend {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: var(--text-xs);
  color: var(--ink-3);
}
.ifc-size-bar-legend > span { display: inline-flex; align-items: center; gap: 6px; }

/* Pin list — the stack of saved format/quality scenarios. */
.ifc-pin-list {
  list-style: none;
  margin: 0 0 var(--space-2) 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ifc-pin-item { margin: 0; }
.ifc-pin-apply {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  text-align: left;
  transition: border-color var(--transition-base), background var(--transition-base);
}
.ifc-pin-apply:hover { border-color: var(--accent); background: var(--accent-soft); }
.ifc-pin-label { font-size: var(--text-sm); font-weight: var(--font-semibold); }
.ifc-pin-size { font-size: var(--text-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ifc-pin-delta { font-size: var(--text-xs); font-weight: var(--font-semibold); }
.ifc-pin-delta--smaller { color: var(--accent); }
.ifc-pin-delta--larger  { color: var(--rose); }
.ifc-pin-delta--same    { color: var(--ink-3); }

/* Batch totals row — dividing line + strong weight so it stands out. */
.ir-batch-result--total {
  background: var(--surface-2);
  border-style: solid;
  font-weight: var(--font-semibold);
  margin-top: 4px;
}

/* Hero recolour when converted file is larger than source (rare: PNG target on photo). */
.result-hero--down .result-value { color: #ffb3b3; }
.result-hero--up   .result-value { color: #9cf0b8; }
.result-hero--flat .result-value { color: #fff; }

/* Tighten drop zone padding a little — image-resizer's default is generous. */
#ifc-drop-zone { padding: var(--space-8) var(--space-5); }


/* Image Format Converter — decision tree + comparison table
   (rendered as a formula_map partial, shown full-width below the fold). */
.ifc-decision {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-6) 0;
  display: grid;
  gap: var(--space-3);
}
.ifc-decision__step {
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  counter-increment: ifc-step;
  position: relative;
}
.ifc-decision { counter-reset: ifc-step; }
.ifc-decision__q {
  font-weight: var(--font-semibold);
  color: var(--ink);
  margin-bottom: 4px;
}
.ifc-decision__q::before {
  content: counter(ifc-step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: var(--font-semibold);
  vertical-align: middle;
}
.ifc-decision__a { color: var(--ink-2); font-size: var(--text-sm); }
.ifc-decision__pick {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--radius-sm);
  font-weight: var(--font-semibold);
  font-size: var(--text-xs);
}
.ifc-decision__pick--webp { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); color: var(--accent); }
.ifc-decision__pick--png  { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); }
.ifc-decision__pick--jpeg { background: color-mix(in srgb, var(--amber) 18%, var(--surface)); color: color-mix(in srgb, var(--amber) 80%, var(--ink)); }

.ifc-compare-title {
  font-size: var(--text-lg);
  margin: var(--space-4) 0 var(--space-3);
  font-weight: var(--font-semibold);
}
.ifc-formats-table-wrap { overflow-x: auto; }
.ifc-formats-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.ifc-formats-table th,
.ifc-formats-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.ifc-formats-table th {
  font-weight: var(--font-semibold);
  color: var(--ink);
  background: var(--surface-2);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ifc-formats-table tr.ifc-row--recommended td {
  background: var(--accent-soft);
}
.ifc-formats-table tr.ifc-row--recommended td:first-child {
  position: relative;
}
.ifc-formats-table tr.ifc-row--recommended td:first-child::after {
  content: 'Recommended';
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: var(--radius-sm);
  vertical-align: middle;
}
.ifc-formats-table .aux { color: var(--ink-3); font-size: var(--text-xs); font-weight: 400; }

/* ────────────────────────────────────────────────────────────────────
 * Text Diff Comparison — polished UI
 * (twig: calculators/text_diff.html.twig, js: calculators/text-diff.js)
 * ──────────────────────────────────────────────────────────────────── */

/* Input panes */
.td-pane-head { padding-right: 2px; }
.td-pane-aux {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
.td-pane-tools {
  display: flex; gap: 4px; justify-content: flex-end;
  margin-bottom: 6px;
}
.td-tiny {
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.td-tiny:hover { border-color: var(--accent); color: var(--ink); }
.td-tiny:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Drop-zone wrap around each textarea */
.td-drop { position: relative; }
.td-drop-hint {
  position: absolute; inset: 0;
  display: none;
  align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 2px dashed var(--accent);
  border-radius: var(--radius-md);
  color: var(--accent);
  font-size: 13px; font-weight: 600;
  pointer-events: none;
}
.td-drop--active .td-drop-hint { display: flex; }

/* Warning banner */
.td-warning {
  margin-top: 12px;
  padding: 8px 12px;
  background: var(--amber-soft, rgba(245, 158, 11, 0.12));
  border: 1px solid var(--amber, #f59e0b);
  border-radius: var(--radius-md);
  color: var(--amber, #b77200);
  font-size: 13px;
}

/* Output card header */
.td-output-head {
  flex-wrap: wrap;
  gap: 12px;
}
.td-output-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-left: auto;
}
.td-legend {
  display: flex; gap: 12px;
  font-size: 11px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.td-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; background: var(--ink-3); }
.td-legend .dot--accent { background: var(--accent); }
.td-legend .dot--rose   { background: var(--rose); }
.td-legend .dot--muted  { background: var(--ink-3); opacity: 0.4; }
.breakdown-label .dot--muted { background: var(--ink-3); opacity: 0.4; }

/* Prev/next change nav */
.td-nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.td-nav-btn {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; color: var(--ink-2);
  font-size: 13px; cursor: pointer;
  border-radius: var(--radius-sm, 6px);
}
.td-nav-btn:hover { background: var(--surface-2); color: var(--accent); }
.td-nav-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.td-nav-counter {
  padding: 0 8px;
  font-size: 11px;
  color: var(--ink-3);
  min-width: 60px; text-align: center;
}

/* Output viewport + minimap */
.td-output-body { padding: 0; }
.td-output-wrap {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 14px;
}
.td-output-viewport {
  min-height: 260px;
  max-height: 620px;
  overflow: auto;
  padding: 8px 0;
  background: var(--surface-2);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.55;
}
.td-output-viewport:focus { outline: none; }
.td-minimap {
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
}
.td-mini {
  display: block;
  height: 2px;
  margin: 1px 2px;
  border-radius: 1px;
  cursor: pointer;
  min-height: 2px;
  flex: 1 1 auto;
  background: transparent;
}
.td-mini--add { background: var(--accent); }
.td-mini--del { background: var(--rose); }
.td-mini--chg { background: var(--amber); }
.td-mini--eq  { background: transparent; }
.td-mini:hover { opacity: 0.7; }

/* Empty state */
.td-empty {
  padding: 36px 24px;
  text-align: center;
  color: var(--ink-2);
}
.td-empty-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 4px;
}
.td-empty-sub {
  font-size: 13px;
  color: var(--ink-3);
  margin-bottom: 14px;
}
.td-empty-examples {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
}

/* Unified-view rows. Scoped to the modifier classes so this `.td-row` rule
   doesn't collide with the form's input rows (which also use `.td-row` as
   an alias for `.tier-row` — those need the flex layout from
   `.tier-row__inputs`, not this 4-column grid). */
.td-row.td-row--eq,
.td-row.td-row--add,
.td-row.td-row--del,
.td-row.td-row--blank {
  display: grid;
  grid-template-columns: 44px 44px 18px 1fr;
  align-items: baseline;
  padding: 0 12px;
  white-space: pre-wrap;
  word-break: break-word;
  border-left: 3px solid transparent;
  transition: background 0.12s;
}
.td-row--eq  { color: var(--ink-2); }
.td-row--add { background: color-mix(in srgb, var(--accent) 10%, transparent); border-left-color: var(--accent); }
.td-row--del { background: color-mix(in srgb, var(--rose)   10%, transparent); border-left-color: var(--rose); }
.td-row--blank { background: repeating-linear-gradient(45deg, transparent 0 6px, color-mix(in srgb, var(--ink-3) 6%, transparent) 6px 7px); }
.td-gutter {
  display: inline-block;
  text-align: right;
  padding-right: 8px;
  color: var(--ink-3);
  font-size: 11px;
  user-select: none;
}
.td-sign {
  display: inline-block;
  width: 16px;
  text-align: center;
  color: var(--ink-3);
  user-select: none;
}
.td-row--add .td-sign { color: var(--accent); }
.td-row--del .td-sign { color: var(--rose); }
.td-line { min-width: 0; }

/* Active / jumped-to change */
.td-change--active {
  box-shadow: inset 3px 0 0 var(--amber, #f59e0b), 0 0 0 1px color-mix(in srgb, var(--amber, #f59e0b) 30%, transparent);
}

/* Word-level highlights */
.td-word { border-radius: 2px; padding: 0 2px; text-decoration: none; }
.td-word--add { background: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--ink); }
.td-word--del { background: color-mix(in srgb, var(--rose)   30%, transparent); color: var(--ink); text-decoration: line-through; }

/* Collapsed unchanged runs */
.td-fold {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  margin: 2px 0;
  background: var(--surface);
  border-top: 1px dashed var(--line);
  border-bottom: 1px dashed var(--line);
  color: var(--ink-3);
  font-size: 11px;
  cursor: pointer;
  user-select: none;
}
.td-fold:hover { color: var(--accent); }
.td-fold-expand {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10px;
}
.td-fold--open { background: transparent; border-style: solid; }
.td-fold--open .td-fold-expand { color: var(--ink-3); }

/* Side-by-side view */
.td-split { display: flex; flex-direction: column; }
.td-split-head {
  display: grid; grid-template-columns: 1fr 1fr;
  padding: 8px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  position: sticky; top: 0; z-index: 1;
}
.td-split-body { display: flex; flex-direction: column; }
.td-split-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 50%, transparent);
}
.td-split-row:last-child { border-bottom: 0; }
.td-split-cell {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: baseline;
  padding: 0 10px;
  min-width: 0;
  white-space: pre-wrap;
  word-break: break-word;
  border-left: 3px solid transparent;
}
.td-split-cell + .td-split-cell { border-left: 1px solid var(--line); }
.td-split-cell.td-row--add { background: color-mix(in srgb, var(--accent) 10%, transparent); border-left-color: var(--accent); }
.td-split-cell.td-row--del { background: color-mix(in srgb, var(--rose)   10%, transparent); border-left-color: var(--rose); }
.td-split-cell.td-row--eq  { color: var(--ink-2); }
.td-split-cell.td-row--blank { background: repeating-linear-gradient(45deg, transparent 0 6px, color-mix(in srgb, var(--ink-3) 6%, transparent) 6px 7px); }

/* Inline view */
.td-inline {
  padding: 14px 18px;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--ink-2);
}
.td-inline-eq { color: var(--ink-2); }
.td-inline-add { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--ink); text-decoration: none; padding: 0 2px; border-radius: 2px; }
.td-inline-del { background: color-mix(in srgb, var(--rose)   18%, transparent); color: var(--ink); text-decoration: line-through; padding: 0 2px; border-radius: 2px; }
.td-inline-changed { background: color-mix(in srgb, var(--amber) 10%, transparent); padding: 0 2px; border-radius: 2px; }

/* Stacked composition bar in the right-column breakdown card */
.td-stack-bar {
  display: flex;
  height: 10px;
  width: 100%;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-2);
  margin-top: 10px;
}
.td-stack-seg { display: block; height: 100%; transition: width 0.3s cubic-bezier(0.2, 0.8, 0.3, 1); }
.td-stack-seg--add { background: var(--accent); }
.td-stack-seg--del { background: var(--rose); }
.td-stack-seg--eq  { background: color-mix(in srgb, var(--ink-3) 25%, transparent); }

/* Hero tweaks specific to text-diff — keep hero inner tight */
.td-result-hero .result-value { font-variant-numeric: tabular-nums; }

/* <kbd> helper used in the Tips card */
.tip-body kbd {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 1px 6px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 4px;
  color: var(--ink);
}

/* Preset chips in empty state match compound-interest look */
.td-empty-examples .chip--preset { font-size: 12px; }

/* Responsive */
@media (max-width: 780px) {
  .td-row { grid-template-columns: 34px 34px 14px 1fr; padding: 0 8px; }
  .td-output-meta { gap: 10px; }
  .td-legend { display: none; }
  .td-minimap { display: none; }
  .td-output-wrap { grid-template-columns: 1fr; }
  .td-split-cell { grid-template-columns: 28px 1fr; padding: 0 8px; }
}
@media (max-width: 560px) {
  .td-pane-tools { flex-wrap: wrap; }
  .td-nav-counter { min-width: 48px; }
}

/* Dark theme refinements — diff backgrounds slightly stronger so rows read */
[data-theme='dark'] .td-row--add,
[data-theme='dark'] .td-split-cell.td-row--add { background: color-mix(in srgb, var(--accent) 18%, transparent); }
[data-theme='dark'] .td-row--del,
[data-theme='dark'] .td-split-cell.td-row--del { background: color-mix(in srgb, var(--rose)   18%, transparent); }
[data-theme='dark'] .td-output-viewport { background: var(--surface); }

/* ────────────────────────────────────────────────────────────────
   QR Code Generator (qr-code-generator)
   Reuses .card, .form-section, .chip-row, .ci-actions, .ci-warning,
   .info-tip, .breakdown-grid, .result-hero, .ic-dropzone.
   qr-* classes cover content-type panels, colors, capacity meter,
   and the preview hero.
   ──────────────────────────────────────────────────────────────── */

.qr-type-panel + .qr-type-panel { margin-top: 0; }
.qr-type-panel[hidden],
.qr-capacity[hidden],
.qr-empty[hidden],
#qr-logo-drop .ic-dropzone-inner[hidden],
#qr-logo-drop .ic-dropzone-filled[hidden],
.qr-hero .ci-delta-badge[hidden] { display: none !important; }

.qr-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
@media (max-width: 560px) {
  .qr-grid-2 { grid-template-columns: 1fr; }
}

.qr-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  user-select: none;
  color: var(--ink);
  font-size: var(--text-sm);
}
.qr-checkbox input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--accent);
}

/* Capacity meter */
.qr-capacity { margin-top: var(--space-3); }
.qr-capacity-bar {
  height: 6px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.qr-capacity-fill {
  display: block;
  height: 100%;
  background: var(--accent);
  width: 0%;
  transition: width .18s ease, background .18s ease;
}
.qr-capacity-fill.is-warn { background: #f5a524; }
.qr-capacity-fill.is-over { background: var(--rose, #e5484d); }
.qr-capacity-label {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: 6px;
  font-size: var(--text-xs);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

/* Color swatches */
.qr-color-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
@media (max-width: 560px) {
  .qr-color-row { grid-template-columns: 1fr; }
}
.qr-color-swatch {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  cursor: pointer;
  transition: border-color .15s;
}
.qr-color-swatch:hover { border-color: var(--accent); }
.qr-color-label {
  font-size: var(--text-xs);
  color: var(--ink-2);
}
.qr-color-swatch input[type="color"] {
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  padding: 0;
  order: -1;
}
.qr-color-swatch input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.qr-color-swatch input[type="color"]::-webkit-color-swatch { border: none; border-radius: calc(var(--radius-sm) - 1px); }
.qr-color-value {
  font-size: var(--text-xs);
  color: var(--ink-2);
  text-transform: uppercase;
}
.qr-contrast-reset {
  margin-top: var(--space-2);
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-2);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--text-xs);
  transition: border-color .15s, color .15s;
}
.qr-contrast-reset:hover { border-color: var(--accent); color: var(--accent); }

/* Logo dropzone — reuses .ic-dropzone but a bit more compact for this panel */
#qr-logo-drop { padding: var(--space-4) var(--space-3); }
#qr-logo-drop .ic-dropzone-filled { align-items: center; }
#qr-logo-thumb {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

/* Preview hero */
.qr-hero { padding: 20px 18px; }
.qr-preview {
  margin-top: var(--space-3);
  position: relative;
  background: var(--surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  padding: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
}
.qr-preview #qr-canvas {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}
.qr-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink-3);
  text-align: center;
  padding: var(--space-4);
}
.qr-empty svg { color: var(--ink-3); opacity: .5; }
.qr-empty-title {
  font-weight: var(--font-semibold);
  color: var(--ink-2);
  font-size: var(--text-base);
}
.qr-empty-hint {
  font-size: var(--text-xs);
  color: var(--ink-3);
}

/* Stack preview above form on narrow viewports so the code is the first thing seen.
   Only for the QR page — targets the shared grid on body level via a wrapper class
   we can't inject here, so we rely on canvas presence via :has(). Falls back to
   normal stacking on browsers without :has(). */
@media (max-width: 900px) {
  .main-grid:has(#qr-canvas) { display: flex; flex-direction: column; }
  .main-grid:has(#qr-canvas) .main-grid__right { order: -1; }
}

/* Size preset chip row spacing already handled by .chip-row--presets */

/* ═══════════════════════════════════════════════════════════════════
   Find & replace — v2 layout (hero, overlay, presets, diff, history)
   =================================================================== */

.fr-card .fr-flags { gap: 6px; flex-wrap: wrap; }
.fr-card .fr-flags .chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
}
.fr-card .fr-flags .chip .chip-label {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--ink-3);
  font-size: 12px;
}
.fr-card .fr-flags .chip.active .chip-label { color: inherit; }
.fr-card .fr-flags .chip .chip-sub { font-size: 12px; }

.fr-flag-hints {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px;
  font-size: 12px; color: var(--ink-3);
}
.fr-flag-hints .fr-hint-note { color: var(--ink-3); }

.fr-regex-err {
  margin-top: 6px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--rose);
  background: var(--rose-soft, rgba(239, 68, 68, 0.08));
  border: 1px solid var(--rose);
  border-radius: var(--radius-sm);
}

.fr-caps {
  margin-top: 6px;
  font-size: 12px;
  color: var(--ink-2);
  padding: 6px 10px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  overflow-x: auto;
}
.fr-caps code {
  background: var(--surface);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 11px;
  margin-right: 4px;
}

.fr-cheatsheet {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-size: 12px;
}
.fr-cheatsheet summary {
  cursor: pointer; font-weight: 600; color: var(--ink-2);
  list-style: none;
}
.fr-cheatsheet summary::-webkit-details-marker { display: none; }
.fr-cheatsheet summary::before {
  content: '▸ '; color: var(--ink-3); font-size: 10px;
}
.fr-cheatsheet[open] summary::before { content: '▾ '; }
.fr-cheat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 6px 12px;
  margin-top: 8px;
  color: var(--ink-2);
}
.fr-cheat-grid code {
  background: var(--surface);
  padding: 1px 6px;
  border-radius: 3px;
  font-family: var(--font-mono);
  margin-right: 6px;
  color: var(--accent);
}

/* Presets row */
.fr-presets { gap: 6px; flex-wrap: wrap; }

/* Editor overlay — highlight layer mirrored behind the textarea */
.fr-editor { position: relative; }
.fr-editor--drag .fr-editor-input {
  border-color: var(--accent);
  background: var(--accent-soft, var(--surface-2));
}
.fr-editor-overlay {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.55;
  color: transparent;
  background: transparent;
  white-space: pre-wrap;
  word-break: break-word;
  overflow: auto;
  pointer-events: none;
  box-sizing: border-box;
  z-index: 0;
}
.fr-editor-overlay .fr-highlight {
  color: transparent;
  background: rgba(250, 204, 21, 0.4);
  border-radius: 2px;
}
.fr-editor-input {
  position: relative;
  z-index: 1;
  background: transparent !important;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Output — diff view */
.fr-output .fr-del {
  background: rgba(239, 68, 68, 0.2);
  color: var(--rose);
  text-decoration: line-through;
  border-radius: 2px;
  padding: 0 1px;
}
.fr-output .fr-ins {
  background: rgba(34, 197, 94, 0.2);
  color: var(--accent, #16a34a);
  border-radius: 2px;
  padding: 0 1px;
}
[data-theme='dark'] .fr-output .fr-del { background: rgba(239, 68, 68, 0.18); color: #f87171; }
[data-theme='dark'] .fr-output .fr-ins { background: rgba(34, 197, 94, 0.18); color: #4ade80; }

.fr-view-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
}
.fr-view-btn {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  cursor: pointer;
  border-radius: 4px;
}
.fr-view-btn.active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

/* Pane counter + tools */
.fr-counter {
  margin-left: 8px;
  font-weight: 400;
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0;
  text-transform: none;
}
.fr-pane-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  font-size: 12px;
}
.fr-pane-tools .card-link {
  font-size: 12px;
}
.fr-pane-sep {
  color: var(--line-strong);
}

.fr-actions-bar {
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

/* History card */
.fr-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fr-history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 12px;
}
.fr-history-pair {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
}
.fr-history-find,
.fr-history-replace {
  font-family: var(--font-mono);
  background: var(--surface);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 11px;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fr-history-arrow { color: var(--ink-3); font-size: 11px; }
.fr-history-apply {
  font-size: 11px;
  white-space: nowrap;
}

/* Hero card — reuse .result-hero styling; just pulse-dot colour */
.fr-hero .pulse-dot { background: var(--accent); }

@media (max-width: 720px) {
  .fr-panes { grid-template-columns: 1fr !important; }
  .fr-actions-bar { flex-direction: column; align-items: stretch; }
  .fr-history-find, .fr-history-replace { max-width: 70px; }
}


/* ==========================================================================
 * Markdown to HTML Converter — editor, toolbar, panes, stats, outline.
 * The `.md-*` namespace overlays on top of shared `.json-*` classes so the
 * converter can keep the two-pane grid aesthetic while adding a proper
 * toolbar, line gutter, tabs, resize handle and scroll-sync affordances.
 * ========================================================================== */

.md-status {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 4px 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
}

/* Toolbar */
.md-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
}
.md-toolbar-group {
  display: flex;
  gap: 4px;
  padding-right: 10px;
  border-right: 1px solid var(--line);
}
.md-toolbar-group:last-of-type,
.md-toolbar-group--end { border-right: none; padding-right: 0; }
.md-toolbar-group--end { margin-left: auto; }

.md-tb-btn {
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 9px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--font-sans);
  line-height: 1;
  min-width: 28px;
  transition: background .12s, color .12s, border-color .12s;
}
.md-tb-btn:hover { background: var(--surface); color: var(--ink); border-color: var(--line); }
.md-tb-btn.active, .md-tb-btn[aria-pressed="true"] {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent-soft);
}

/* Grid overrides: allow resizable columns via CSS var, and view-mode hides. */
.md-grid {
  grid-template-columns: var(--md-left, 1fr) auto var(--md-right, 1fr);
  gap: 0;
}
@media (max-width: 720px) {
  .md-grid { grid-template-columns: 1fr; }
  .md-resize-handle { display: none; }
}
.md-grid[data-view="edit"] .md-pane--output,
.md-grid[data-view="edit"] .md-resize-handle { display: none; }
.md-grid[data-view="edit"] { grid-template-columns: 1fr; }
.md-grid[data-view="preview"] .md-pane--input,
.md-grid[data-view="preview"] .md-resize-handle { display: none; }
.md-grid[data-view="preview"] { grid-template-columns: 1fr; }

.md-pane--input { padding-right: 6px; }
.md-pane--output { padding-left: 6px; }

.md-resize-handle {
  width: 6px;
  cursor: col-resize;
  background: transparent;
  border-radius: 2px;
  position: relative;
  align-self: stretch;
  margin: 28px 0 0;
}
.md-resize-handle::before {
  content: "";
  position: absolute;
  inset: 0 2px;
  background: var(--line);
  border-radius: 2px;
}
.md-resize-handle:hover::before,
.md-resize-handle:focus::before { background: var(--accent); }
.md-resize-handle:focus { outline: 2px solid var(--accent-soft); outline-offset: 2px; }

/* Editor with line-number gutter */
.md-editor-wrap {
  position: relative;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.md-editor-wrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.md-editor-wrap.is-drop-target { border-color: var(--accent); background: var(--accent-soft); }
.md-editor-wrap .md-textarea {
  border: none !important;
  background: transparent !important;
  padding: 12px 14px 12px 52px !important;
  box-shadow: none !important;
  min-height: 420px;
  max-height: 640px;
}
.md-editor-wrap .md-textarea:focus { box-shadow: none !important; }
.md-gutter {
  position: absolute;
  top: 12px;
  left: 0;
  width: 42px;
  padding: 0 8px 0 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-3);
  text-align: right;
  white-space: pre;
  pointer-events: none;
  user-select: none;
  will-change: transform;
  border-right: 1px solid var(--line);
  opacity: .7;
}
.md-drop-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent-soft) 70%, transparent);
  pointer-events: none;
  border-radius: var(--radius-md);
}

/* Output tabs */
.md-out-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 6px;
  padding: 3px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  align-self: flex-start;
}
.md-tab {
  border: none;
  background: transparent;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  letter-spacing: .02em;
}
.md-tab:hover { color: var(--ink); }
.md-tab.is-active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.md-tabpanel { display: flex; flex-direction: column; min-height: 420px; }

.md-preview-frame {
  min-height: 420px;
  max-height: 640px;
  padding: 16px 18px;
}
.md-preview-frame[data-theme="github"] {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #1f2328;
  background: #ffffff;
  border-color: #d0d7de;
}
.md-preview-frame[data-theme="github"] h1,
.md-preview-frame[data-theme="github"] h2 {
  border-bottom: 1px solid #d0d7de;
  padding-bottom: .3em;
}
.md-preview-frame[data-theme="docs"] {
  font-family: var(--font-serif, Georgia, "Times New Roman", serif);
  font-size: 15px;
  line-height: 1.7;
  background: #fdfcf8;
  color: #2b2a26;
  border-color: #e8e4d8;
}
.md-preview-frame[data-theme="dark"] {
  background: #0f1115;
  color: #e4e6eb;
  border-color: #222630;
}
.md-preview-frame[data-theme="dark"] code:not(pre code) { background: #1a1d24; }
.md-preview-frame[data-theme="dark"] pre { background: #1a1d24; }
.md-preview-frame[data-theme="dark"] blockquote { background: #151821; color: #cfd2d7; }

.md-raw {
  min-height: 420px;
  max-height: 640px;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 12.5px;
  line-height: 1.55;
}

.md-empty {
  color: var(--ink-3);
  font-size: 13px;
  text-align: center;
  padding: 60px 20px;
}
.md-empty kbd, .md-empty code { font-family: var(--font-mono); }

/* Options group */
.md-opts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px 16px;
}
.md-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-2);
  cursor: pointer;
  padding: 4px 0;
}
.md-opt input[type="checkbox"] { accent-color: var(--accent); width: 15px; height: 15px; }

.md-actions-row { margin-top: 14px; }
.md-doc-warning { margin-top: 10px; }

/* kbd hints in headers */
.json-pane-head kbd,
.tip-body kbd,
.md-empty kbd {
  display: inline-block;
  padding: 1px 5px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 3px;
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-2);
  margin: 0 1px;
}

/* Right rail — outline tree */
.md-outline {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 320px;
  overflow-y: auto;
}
.md-outline-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--ink-2);
  cursor: pointer;
  line-height: 1.3;
}
.md-outline-item:hover { background: var(--surface-2); color: var(--ink); }
.md-outline-l2 { padding-left: 18px; }
.md-outline-l3 { padding-left: 30px; }
.md-outline-l4 { padding-left: 42px; }
.md-outline-l5 { padding-left: 54px; }
.md-outline-l6 { padding-left: 66px; }
.md-outline-dot {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 1px 5px;
  border-radius: 3px;
  flex-shrink: 0;
}
.md-outline-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-outline-empty {
  color: var(--ink-3);
  font-size: 12px;
  font-style: italic;
  padding: 4px 2px;
  list-style: none;
}

/* Right rail — warnings */
.md-warnings { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.md-warning-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--amber, #f59e0b) 10%, var(--surface-2));
  border-left: 3px solid var(--amber, #f59e0b);
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink-2);
}
.md-warning-dot {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--amber, #f59e0b);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.md-warning-msg code {
  background: var(--surface);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 11.5px;
}

#md-warnings-card { border-left: 3px solid var(--amber, #f59e0b); }

/* Dark theme parity */
[data-theme='dark'] .md-toolbar { background: var(--surface-2); }
[data-theme='dark'] .md-editor-wrap { background: var(--surface-2); }
[data-theme='dark'] .md-out-tabs { background: var(--surface-2); }
[data-theme='dark'] .md-tab.is-active { background: var(--surface); }
[data-theme='dark'] .md-status { background: var(--surface); }