/* ============================================
   CalcTools — Component Library v2
   "Warm Precision Workshop"
   ============================================ */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-display: optional;
  src: url('/assets/fonts/bricolage-grotesque-cyrillic.woff2') format('woff2');
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: optional;
  src: url('/assets/fonts/dm-sans-cyrillic.woff2') format('woff2');
}

/* ════════════════════════════════════════════
   RESET + BASE
   ════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  line-height: var(--leading-normal);
  color: var(--stone-700);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Subtle dot-grid background — like graph paper */
  background-image:
    radial-gradient(circle, rgba(0,0,0,0.04) 1px, transparent 1px);
  background-size: 24px 24px;
}

::selection {
  background: var(--green-200);
  color: var(--green-900);
}

a {
  color: var(--green-700);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--green-600); }

img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; }

/* ════════════════════════════════════════════
   TYPOGRAPHY
   ════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--stone-900);
  letter-spacing: var(--tracking-tight);
}

.t-display { font-family: var(--font-display); }
.t-body    { font-family: var(--font-body); }
.t-mono    { font-family: var(--font-mono); }
.t-xs      { font-size: var(--text-xs); }
.t-sm      { font-size: var(--text-sm); }
.t-base    { font-size: var(--text-base); }
.t-md      { font-size: var(--text-md); }
.t-lg      { font-size: var(--text-lg); }
.t-xl      { font-size: var(--text-xl); }
.t-2xl     { font-size: var(--text-2xl); }
.t-3xl     { font-size: var(--text-3xl); }
.t-4xl     { font-size: var(--text-4xl); }
.t-muted   { color: var(--stone-500); }
.t-success { color: var(--success); }
.t-error   { color: var(--error); }
.w-medium  { font-weight: var(--weight-medium); }
.w-semi    { font-weight: var(--weight-semibold); }
.w-bold    { font-weight: var(--weight-bold); }
.w-black   { font-weight: var(--weight-black); }
.caps {
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--stone-400);
}

/* ════════════════════════════════════════════
   LAYOUT
   ════════════════════════════════════════════ */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--sp-5);
}
.container--narrow { max-width: var(--max-w-narrow); }

.tool-panel {
  width: 100%;
  max-width: var(--tool-max, 100%);
  margin: 0 auto;
}

.ct-tool-custom-root {
  min-height: clamp(420px, 52vw, 620px);
}

@media (max-width: 767px) {
  .ct-tool-custom-root {
    min-height: min(660px, 72vh);
  }
}

.grid { display: grid; gap: var(--sp-4); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1023px) { .grid-4 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px)  { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════
   HEADER
   ════════════════════════════════════════════ */
.header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  height: var(--header-h);
  background: rgba(255, 254, 247, 0.85);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  border-bottom: var(--border-hair);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: var(--sp-4);
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  text-decoration: none;
  white-space: nowrap;
}
.logo__mark {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, var(--green-600), var(--green-400));
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: var(--shadow-btn);
  transition: transform var(--dur-base) var(--ease-spring);
}
.logo:hover .logo__mark { transform: rotate(-6deg) scale(1.05); }
.logo__text {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
  color: var(--stone-900);
  letter-spacing: var(--tracking-tight);
}
.logo__dot {
  color: var(--green-500);
}

/* ════════════════════════════════════════════
   HYBRID NAVIGATION A+B (Mega-menu + Command Palette)
   ════════════════════════════════════════════ */

/* Search Trigger (Input visually, Button structurally) */
.search-trigger {
  flex: 1; max-width: 440px; height: 40px;
  padding: 0 var(--sp-4) 0 var(--sp-3);
  display: flex; align-items: center; gap: var(--sp-2);
  background: var(--stone-100); border: var(--border-light); border-radius: var(--r-full);
  color: var(--stone-500); font-size: var(--text-base); cursor: text;
  transition: all var(--dur-fast);
}
.search-trigger:hover { background: var(--stone-200); border-color: var(--stone-300); }
.search-trigger__text { flex: 1; text-align: left; }
.search-trigger__shortcut {
  padding: 2px 7px; background: var(--paper); border: var(--border-light); border-radius: var(--r-sm);
  font-size: 11px; font-family: var(--font-body); line-height: 1.4; color: var(--stone-400); display: none;
}
@media (min-width: 768px) { .search-trigger__shortcut { display: block; } }

/* Nav Links */
.nav { display: flex; align-items: center; gap: 2px; }
.nav__link {
  padding: var(--sp-2) var(--sp-3); font-size: var(--text-base); font-weight: var(--weight-medium);
  color: var(--stone-500); border-radius: var(--r-md); transition: all var(--dur-fast);
  cursor: pointer; display: flex; align-items: center; gap: 4px; border: none; background: none;
  font-family: inherit;
}
.nav__link:hover { background: var(--stone-100); color: var(--stone-800); }
.nav__link--active { background: var(--green-50); color: var(--green-700); }

/* Burger */
.burger { display: none; width: 38px; height: 38px; align-items: center; justify-content: center; background: none; border: var(--border-light); border-radius: var(--r-md); color: var(--stone-600); cursor: pointer; transition: background var(--dur-fast); }
.burger:hover { background: var(--stone-100); }

/* Mega Menu (Desktop) */
.mega-menu {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--paper); border-bottom: var(--border-light);
  box-shadow: var(--shadow-lg); padding: var(--sp-8) 0;
  display: none; opacity: 0; transform: translateY(-10px);
  transition: all var(--dur-fast) var(--ease-out);
}
.mega-menu.is-open { display: block; opacity: 1; transform: translateY(0); }
.mega-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); }
.mega-col__title { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--stone-400); font-weight: var(--weight-semibold); margin-bottom: var(--sp-3); padding-left: var(--sp-2); }
.mega-item {
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2);
  border-radius: var(--r-md); transition: background var(--dur-fast); text-decoration: none;
  color: var(--stone-700); font-weight: var(--weight-medium);
}
.mega-item:hover { background: var(--stone-100); }
.mega-item__icon { width: 32px; height: 32px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; color: white; flex-shrink: 0; }
.mega-item__count { font-size: var(--text-xs); color: var(--stone-400); margin-left: auto; background: var(--stone-100); padding: 2px 6px; border-radius: var(--r-full); }

/* Command Palette (Modal) */
.cmd-overlay {
  position: fixed; inset: 0; background: rgba(26, 25, 23, 0.4); backdrop-filter: blur(4px);
  z-index: var(--z-modal); display: none; align-items: flex-start; justify-content: center; padding-top: 10vh;
  opacity: 0; transition: opacity var(--dur-fast);
}
.cmd-overlay.is-open { display: flex; opacity: 1; }
.cmd-palette {
  width: 100%; max-width: 640px; background: var(--paper); border: var(--border-light);
  border-radius: var(--r-2xl); box-shadow: var(--shadow-xl); overflow: hidden;
  transform: scale(0.95); transition: transform var(--dur-fast) var(--ease-spring);
}
.cmd-overlay.is-open .cmd-palette { transform: scale(1); }
.cmd-header { padding: var(--sp-4); border-bottom: var(--border-light); display: flex; align-items: center; gap: var(--sp-3); }
.cmd-input { flex: 1; border: none; background: transparent; font-size: var(--text-xl); font-family: var(--font-body); color: var(--stone-900); outline: none; }
.cmd-input::placeholder { color: var(--stone-300); }
.cmd-tags { padding: var(--sp-3) var(--sp-4); border-bottom: var(--border-hair); background: var(--paper-warm); display: flex; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none; }
.cmd-tags::-webkit-scrollbar { display: none; }
.cmd-tag { padding: 6px 12px; background: var(--stone-0); border: var(--border-light); border-radius: var(--r-full); font-family: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--stone-600); cursor: pointer; white-space: nowrap; transition: all var(--dur-fast); appearance: none; }
.cmd-tag:hover { background: var(--stone-100); }
.cmd-tag.is-active { background: var(--green-600); color: white; border-color: var(--green-600); }
.cmd-body { max-height: 400px; overflow-y: auto; padding: var(--sp-2); }
.cmd-group { padding: var(--sp-2) var(--sp-3); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--stone-400); font-weight: var(--weight-semibold); }
.cmd-result { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); margin: 2px 0; border-radius: var(--r-lg); text-decoration: none; color: var(--stone-700); cursor: pointer; }
.cmd-result:hover, .cmd-result.is-selected { background: var(--stone-100); }
.cmd-result__icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--paper-tint); color: var(--stone-500); }
.cmd-result__info { flex: 1; min-width: 0; }
.cmd-result__title { font-weight: var(--weight-medium); font-size: var(--text-base); margin-bottom: 2px; }
.cmd-result__title mark { background: var(--green-100); color: var(--green-800); }
.cmd-result__desc { font-size: var(--text-sm); color: var(--stone-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmd-result__action { opacity: 0; color: var(--green-600); transition: opacity var(--dur-fast); }
.cmd-result:hover .cmd-result__action, .cmd-result.is-selected .cmd-result__action { opacity: 1; }
.cmd-empty { padding: var(--sp-6) var(--sp-4); color: var(--stone-500); text-align: center; }
.cmd-footer { padding: var(--sp-3) var(--sp-4); border-top: var(--border-hair); display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--stone-400); background: var(--paper-warm); }
.cmd-keys { display: flex; gap: var(--sp-3); }
.cmd-key { display: inline-flex; align-items: center; gap: 4px; }
.cmd-kbd { padding: 2px 6px; background: var(--stone-0); border: var(--border-light); border-radius: var(--r-sm); font-family: var(--font-body); color: var(--stone-500); box-shadow: 0 1px 1px rgba(0,0,0,0.05); }

/* Mobile Drawer */
.mobile-drawer {
  position: fixed; inset: 0; left: -100%; right: auto; width: 100%; background: var(--paper); z-index: var(--z-modal);
  transition: transform var(--dur-base) var(--ease-out); overflow-y: auto;
}
.mobile-drawer.is-open { transform: translateX(100%); }
.drawer-header { padding: var(--sp-4); border-bottom: var(--border-light); display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; background: var(--paper); z-index: 2; }
.drawer-content { padding: var(--sp-4); }
.drawer-close { background: var(--stone-100); border: none; width: 36px; height: 36px; border-radius: var(--r-full); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--stone-600); transition: background var(--dur-fast); }
.drawer-close:hover { background: var(--stone-200); }
.acc-item { border-bottom: var(--border-hair); }
.acc-head { padding: var(--sp-4) 0; display: flex; align-items: center; justify-content: space-between; font-weight: var(--weight-medium); font-size: var(--text-lg); color: var(--stone-800); cursor: pointer; }
.acc-body { display: none; padding-bottom: var(--sp-4); }
.acc-item.is-open .acc-body { display: block; }
.acc-item.is-open .acc-chevron { transform: rotate(180deg); }
.acc-link { display: block; padding: var(--sp-2) 0; color: var(--stone-600); text-decoration: none; font-size: var(--text-base); }

/* Responsive Overrides */
@media (max-width: 900px) {
  .mega-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .nav, .mega-menu { display: none !important; }
  .burger { display: flex; }
  .cmd-overlay { padding-top: 0; }
  .cmd-palette { height: 100%; max-height: none; border-radius: 0; transform: translateY(20px); }
  .cmd-overlay.is-open .cmd-palette { transform: translateY(0); }
  .cmd-footer { display: none; }
}

/* ════════════════════════════════════════════
   BREADCRUMBS
   ════════════════════════════════════════════ */
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) 0 var(--sp-2);
  font-size: var(--text-sm);
  flex-wrap: wrap;
}
.breadcrumbs__list {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.breadcrumbs a {
  color: var(--stone-400);
  transition: color var(--dur-fast);
}
.breadcrumbs a:hover { color: var(--green-600); }
.breadcrumbs__sep {
  color: var(--stone-300);
  font-size: 10px;
  user-select: none;
}
.breadcrumbs__current {
  color: var(--stone-700);
  font-weight: var(--weight-medium);
}

/* ════════════════════════════════════════════
   CARDS — Surface System
   ════════════════════════════════════════════ */
.surface {
  background: var(--stone-0);
  border: var(--border-light);
  border-radius: var(--r-xl);
  transition: all var(--dur-base) var(--ease-out);
}
.surface:hover {
  border-color: rgba(0,0,0,0.14);
  box-shadow: var(--shadow-sm);
}
.surface--raised {
  box-shadow: var(--shadow-xs);
}
.surface--raised:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Category Card */
.cat-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: var(--stone-0);
  border: var(--border-light);
  border-radius: var(--r-xl);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: all var(--dur-base) var(--ease-out);
  position: relative;
  overflow: hidden;
}
.cat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  border-radius: 0 3px 3px 0;
  opacity: 0;
  transition: opacity var(--dur-base);
}
.cat-card:hover {
  border-color: rgba(0,0,0,0.12);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.cat-card:hover::before { opacity: 1; }
.cat-card__icon {
  width: 42px;
  height: 42px;
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: white;
  font-size: var(--text-lg);
  box-shadow: var(--shadow-btn);
}
.cat-card__body { min-width: 0; }
.cat-card__name {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--stone-800);
  margin-bottom: 2px;
}
.cat-card__count {
  font-size: var(--text-xs);
  color: var(--stone-400);
}

/* Tool Card (list item) */
.calc-card,
.tool-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--stone-0);
  border: var(--border-light);
  border-radius: var(--r-lg);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: all var(--dur-fast) var(--ease-out);
}
.calc-card:hover,
.tool-card:hover {
  border-color: var(--green-300);
  background: var(--green-50);
}
.calc-card__dot,
.tool-card__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-full);
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.04);
}
.calc-card__name,
.tool-card__name {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--stone-700);
  flex: 1;
}
.calc-card__arrow,
.tool-card__arrow {
  color: var(--stone-300);
  transition: all var(--dur-fast) var(--ease-out);
  flex-shrink: 0;
}
.calc-card:hover .calc-card__arrow,
.tool-card:hover .tool-card__arrow {
  color: var(--green-500);
  transform: translateX(3px);
}

/* ════════════════════════════════════════════
   TOOL PANEL — Main Component
   ════════════════════════════════════════════ */
.calc,
.tool-panel {
  background: var(--stone-0);
  border: var(--border-default);
  border-radius: var(--r-xl);
  padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
/* Top accent bar — full width, green-500 */
.calc::before,
.tool-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--green-600), var(--green-400), var(--green-200));
  border-radius: var(--r-xl) var(--r-xl) 0 0;
}
.calc__header,
.tool-panel__header { margin-bottom: var(--sp-4); }
.calc__title,
.tool-panel__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-black);
  color: var(--stone-900);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--sp-1);
}
.calc__subtitle,
.tool-panel__subtitle {
  font-size: var(--text-sm);
  color: var(--stone-500);
  line-height: var(--leading-normal);
  width: 100%;
  max-width: none;
}

/* ── Tool-section internal layout ──
   .tool-panel is ONLY a container card.
   Internal layout (columns, stacking, etc.) is NOT enforced here.
   Each tool's HTML defines its own composition freely.
   Use standard CSS (grid/flexbox) inline or in page-specific <style>. */

/* ════════════════════════════════════════════
   FORM FIELDS
   ════════════════════════════════════════════ */
.field { margin-bottom: var(--sp-3); }
.field__label {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--stone-700);
  margin-bottom: var(--sp-1);
}
.field__hint {
  font-size: var(--text-xs);
  color: var(--stone-400);
  font-weight: var(--weight-normal);
}
.field__wrap { position: relative; display: flex; align-items: center; }

/* Input */
.input {
  width: 100%;
  height: 42px;
  padding: 0 var(--sp-3);
  background: var(--stone-0);
  border: 1px solid rgba(122, 117, 107, 0.26);
  border-radius: var(--r-md);
  font-size: var(--text-base);
  font-family: var(--font-body);
  color: var(--stone-900);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 1px 2px rgba(26, 25, 23, 0.04);
  transition: all var(--dur-base) var(--ease-out);
  outline: none;
}
.input::placeholder { color: var(--stone-400); }
.input:hover {
  border-color: rgba(92, 88, 80, 0.38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 4px rgba(26, 25, 23, 0.05);
}
.input:focus {
  background: var(--stone-0);
  border-color: var(--green-500);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 0 0 3px rgba(82, 183, 136, 0.12);
}
.input--with-unit { padding-right: 44px; }
.input--error {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(193,18,31,0.1);
}
.input--error:hover,
.input--error:focus,
.input--error:focus-visible {
  border-color: var(--error);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 0 0 3px rgba(193,18,31,0.14);
}

.field__unit {
  position: absolute;
  right: var(--sp-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--stone-500);
  pointer-events: none;
  font-family: var(--font-body);
}

.field__error-tooltip {
  position: absolute;
  top: calc(100% + var(--sp-2));
  left: 0;
  background: var(--error);
  color: var(--stone-0);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-sm);
  z-index: var(--z-dropdown);
  box-shadow: var(--shadow-sm);
  pointer-events: none;
  animation: fadeIn var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.field__error-tooltip::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 12px;
  border: 4px solid transparent;
  border-bottom-color: var(--error);
}

/* Select */
.select {
  width: 100%;
  height: 42px;
  padding: 0 38px 0 var(--sp-3);
  background: var(--stone-0);
  border: 1px solid rgba(122, 117, 107, 0.26);
  border-radius: var(--r-md);
  font-size: var(--text-base);
  font-family: var(--font-body);
  color: var(--stone-900);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%237A756B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 1px 2px rgba(26, 25, 23, 0.04);
  outline: none;
  transition: all var(--dur-base) var(--ease-out);
}
.select:hover {
  border-color: rgba(92, 88, 80, 0.38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 4px rgba(26, 25, 23, 0.05);
}
.select:focus {
  background-color: var(--stone-0);
  border-color: var(--green-500);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 0 0 3px rgba(82, 183, 136, 0.12);
}

/* Radio Toggle — Segmented Control */
.toggle-group {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  background: var(--stone-100);
  border-radius: var(--r-lg);
  padding: 3px;
  border: var(--border-hair);
  max-width: 100%;
  min-width: 0;
}
.toggle-group__item {
  flex: 1 1 8rem;
  min-width: 0;
  padding: var(--sp-1) var(--sp-3);
  text-align: center;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--stone-500);
  border-radius: calc(var(--r-lg) - 3px);
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
  user-select: none;
  position: relative;
  overflow-wrap: anywhere;
}
button.toggle-group__item {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  line-height: inherit;
}
.toggle-group__item:hover { color: var(--stone-700); }
.toggle-group__item--active {
  background: var(--stone-0);
  color: var(--green-700);
  font-weight: var(--weight-semibold);
  box-shadow: var(--shadow-sm);
}
.toggle-group__input { display: none; }

@media (max-width: 767px) {
  .toggle-group__item {
    flex-basis: min(100%, 9rem);
  }

  [data-role="chart-fallback"] > [class*="__fallback-row"],
  [data-role="chart-fallback"] > [class*="__bar"] {
    grid-template-columns: minmax(4.75rem, 6.5rem) minmax(0, 1fr) !important;
    align-items: center;
  }

  [data-role="chart-fallback"] > [class*="__fallback-row"] > strong,
  [data-role="chart-fallback"] > [class*="__bar"] > strong {
    grid-column: 1 / -1;
  }
}

/* Slider */
.slider {
  width: 100%;
  height: 5px;
  appearance: none;
  background: var(--stone-200);
  border-radius: var(--r-full);
  outline: none;
  cursor: pointer;
}
.slider::-webkit-slider-thumb {
  appearance: none;
  width: 22px;
  height: 22px;
  background: var(--stone-0);
  border: 3px solid var(--green-500);
  border-radius: var(--r-full);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-spring);
}
.slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: var(--shadow-md), var(--shadow-glow);
}
.slider__range {
  display: flex;
  justify-content: space-between;
  margin-top: var(--sp-1);
  font-size: var(--text-xs);
  color: var(--stone-400);
}

/* Textarea */
.textarea {
  display: block;
  width: 100%;
  min-height: 80px;
  padding: var(--sp-2) var(--sp-3);
  background: var(--stone-0);
  border: 1px solid var(--stone-200);
  border-radius: var(--r-md);
  color: var(--stone-900);
  font-family: var(--font-body);
  font-size: var(--text-base);
  resize: vertical;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.textarea:focus {
  outline: none;
  border-color: var(--green-400);
  box-shadow: 0 0 0 3px rgba(82, 183, 136, 0.15);
}
.textarea.input--error,
.textarea.input--error:hover,
.textarea.input--error:focus,
.textarea.input--error:focus-visible {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(193,18,31,0.14);
}
.textarea--mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

/* Checkbox & Radio Controls */
.control {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  cursor: pointer;
  margin-bottom: var(--sp-2);
}
.control:last-child {
  margin-bottom: 0;
}
.control__input {
  /* Using standard appearance with size tweaks */
  width: 18px;
  height: 18px;
  margin-top: 2px;
  cursor: pointer;
  accent-color: var(--green-500);
  flex-shrink: 0;
}
.control__label {
  font-size: var(--text-base);
  color: var(--stone-800);
  line-height: var(--leading-tight);
}
.control__desc {
  display: block;
  font-size: var(--text-sm);
  color: var(--stone-500);
  margin-top: 2px;
}

/* Matrix / Grid Input */
.matrix-grid {
  display: grid;
  gap: var(--sp-2);
  width: max-content;
  padding: var(--sp-2);
  border-left: 2px solid var(--stone-800);
  border-right: 2px solid var(--stone-800);
  border-radius: 4px;
}
.matrix-grid--2x2 { grid-template-columns: repeat(2, 70px); }
.matrix-grid--3x3 { grid-template-columns: repeat(3, 70px); }
.matrix-grid .input {
  text-align: center;
  padding-left: var(--sp-1);
  padding-right: var(--sp-1);
}
.fraction-field {
  display: grid;
  gap: var(--sp-3);
}
.fraction-field__group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border: var(--border-default);
  border-radius: var(--r-lg);
  background: var(--paper-warm);
}
.fraction-field__group--error {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(193,18,31,0.08);
}
.fraction-field__whole,
.fraction-field__stack-shell {
  flex: 0 0 auto;
}
.fraction-field__whole {
  display: grid;
  align-items: center;
  min-width: 128px;
}
.fraction-field__stack-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 152px;
}
.fraction-field__stack {
  display: grid;
  justify-items: center;
  align-items: center;
  gap: 10px;
  min-width: 152px;
}
.fraction-field__part-label {
  font-size: var(--text-xs);
  line-height: 1.2;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--stone-500);
}
.fraction-field__input {
  width: 100%;
  text-align: center;
  font-weight: var(--weight-semibold);
}
.fraction-field__input--stack {
  max-width: 168px;
}
.fraction-field__divider {
  width: min(170px, 100%);
  height: 3px;
  border-radius: var(--r-full);
  background: var(--stone-700);
  opacity: 0.88;
}
.math-fraction-tool {
  display: grid;
  gap: var(--sp-5);
}
.math-fraction-tool__form,
.math-fraction-tool__fieldset {
  display: grid;
  gap: var(--sp-5);
  border: 0;
  padding: 0;
  margin: 0;
}
.math-fraction-tool__surface {
  display: grid;
  gap: var(--sp-4);
  border: 0;
}
.math-fraction-tool__lead {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--text-muted);
}
.math-fraction-tool__fields {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.math-fraction-tool__field {
  display: grid;
  gap: var(--sp-2);
}
.math-fraction-tool__field--fraction {
  gap: var(--sp-3);
}
.math-fraction-tool__fraction-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border: var(--border-default);
  border-radius: var(--r-lg);
  background: var(--paper-warm);
}
.math-fraction-tool__fraction-group--error {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(193,18,31,0.08);
}
.math-fraction-tool__whole-wrap {
  display: grid;
  gap: 0;
  justify-items: center;
  align-self: center;
  flex: 0 0 auto;
  min-width: 128px;
}
.math-fraction-tool__fraction-stack-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 152px;
}
.math-fraction-tool__stack-wrap {
  display: grid;
  justify-items: center;
  align-items: center;
  gap: 10px;
  min-width: 152px;
}
.math-fraction-tool__part-label {
  font-size: var(--text-xs);
  line-height: 1.2;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--stone-500);
}
.math-fraction-tool__part-input {
  width: 100%;
  text-align: center;
  font-weight: var(--weight-semibold);
}
.math-fraction-tool__part-input--stack {
  min-width: 0;
  max-width: 168px;
}
.math-fraction-tool__divider {
  width: min(170px, 100%);
  height: 3px;
  border-radius: var(--r-full);
  background: var(--stone-700);
  opacity: 0.88;
}
.math-fraction-tool__actions {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  align-items: center;
}
.math-fraction-tool__meta {
  margin-top: var(--sp-2);
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.math-fraction-tool__value {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.3;
  font-family: var(--font-mono);
}
.math-fraction-tool__detail-grid {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.math-fraction-tool__detail-card {
  padding: 16px;
  border: var(--border-default);
  border-radius: var(--r-md);
  background: var(--stone-0);
}
.math-fraction-tool__detail-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.math-fraction-tool__detail-value {
  margin-top: 8px;
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
  color: var(--text-strong);
  word-break: break-word;
}
.math-fraction-tool__detail-value--rich {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
}
.math-fraction-tool__panels {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.math-fraction-tool__panel {
  padding: 16px;
  border: var(--border-default);
  border-radius: var(--r-md);
  background: var(--stone-0);
}
.math-fraction-tool__panel-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
}
.math-fraction-tool__panel-value {
  margin: 12px 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text-strong);
}
.math-fraction-tool__formula {
  margin-top: var(--sp-4);
}
.math-fraction-tool__note {
  margin-top: 0;
}
.math-fraction-tool__note--warning {
  background: var(--amber-100);
  border: 1px solid var(--amber-300);
  color: var(--amber-700);
}

/* ════════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: 42px;
  padding: 0 var(--sp-5);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  border: none;
  border-radius: var(--r-md);
  cursor: pointer;
  outline: none;
  user-select: none;
  white-space: nowrap;
  transition: all var(--dur-fast) var(--ease-out);
  position: relative;
  overflow: hidden;
}

/* Primary — flat green */
.btn--primary {
  background: var(--green-600);
  color: white;
}
.btn--primary:hover {
  background: var(--green-700);
  color: white;
  box-shadow: 0 12px 24px rgba(33, 115, 74, 0.24);
}
.btn--primary:active {
  background: var(--green-800);
}

/* Secondary */
.btn--secondary {
  background: var(--stone-0);
  color: var(--stone-700);
  border: var(--border-default);
}
.btn--secondary:hover {
  background: var(--green-50);
  border-color: var(--green-300);
  color: var(--green-800);
  box-shadow: 0 10px 22px rgba(20, 31, 18, 0.08);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.48;
  box-shadow: none;
}

.btn--secondary:disabled:hover,
.btn--secondary[aria-disabled="true"]:hover,
.btn--ghost:disabled:hover,
.btn--ghost[aria-disabled="true"]:hover,
.btn--primary:disabled:hover,
.btn--primary[aria-disabled="true"]:hover {
  background: inherit;
  border-color: inherit;
  color: inherit;
}

/* Ghost */
.btn--ghost {
  background: transparent;
  color: var(--stone-600);
  height: 40px;
  padding: 0 var(--sp-3);
}
.btn--ghost:hover {
  background: var(--green-50);
  color: var(--green-800);
  box-shadow: 0 8px 18px rgba(20, 31, 18, 0.06);
}

/* Sizes */
.btn--sm  { height: 32px; padding: 0 var(--sp-3); font-size: var(--text-xs); border-radius: var(--r-md); }
.btn--lg  { height: 46px; padding: 0 var(--sp-6); font-size: var(--text-md); border-radius: var(--r-lg); }
.btn--block { width: 100%; }

/* Standardized compact action buttons across tools */
.ct-compact-action-button,
.ct-copy-button,
.ct-reset-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--sp-2) !important;
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 var(--sp-3) !important;
  border: var(--border-default) !important;
  border-radius: var(--r-md) !important;
  background: var(--stone-0) !important;
  color: var(--stone-700) !important;
  font-family: var(--font-display) !important;
  font-size: var(--text-xs) !important;
  font-weight: var(--weight-semibold) !important;
  letter-spacing: var(--tracking-tight) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: all var(--dur-fast) var(--ease-out) !important;
}

.ct-compact-action-button:hover,
.ct-copy-button:hover,
.ct-reset-button:hover {
  background: var(--green-50) !important;
  border-color: var(--green-300) !important;
  color: var(--green-800) !important;
  box-shadow: 0 10px 22px rgba(20, 31, 18, 0.08) !important;
}

.ct-compact-action-button:disabled,
.ct-copy-button:disabled,
.ct-copy-button[aria-disabled="true"],
.ct-reset-button:disabled,
.ct-reset-button[aria-disabled="true"] {
  cursor: not-allowed !important;
  opacity: 0.48 !important;
}

.ct-compact-action-button:disabled:hover,
.ct-compact-action-button[aria-disabled="true"]:hover,
.ct-copy-button:disabled:hover,
.ct-copy-button[aria-disabled="true"]:hover,
.ct-reset-button:disabled:hover,
.ct-reset-button[aria-disabled="true"]:hover {
  background: var(--stone-0) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  color: var(--stone-700) !important;
}

.ct-copy-button__icon,
.ct-reset-button__icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  pointer-events: none;
}

/* Hover bridge for older custom action buttons that still do not use shared .btn */
.credit-tool__submit,
.percent-tool__submit,
.credit-tool__ghost,
.percent-tool__ghost {
  transition:
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.credit-tool__submit:hover,
.percent-tool__submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(20, 31, 18, 0.12);
}

.credit-tool__ghost:hover,
.credit-tool__ghost:focus-visible,
.percent-tool__ghost:hover,
.percent-tool__ghost:focus-visible {
  background: var(--green-50);
  border-color: var(--green-300);
  color: var(--green-800);
  box-shadow: 0 10px 22px rgba(20, 31, 18, 0.08);
  outline: none;
}

/* Universal hover baseline for all buttons rendered inside tool runtime roots */
#tool-custom-root button,
[data-tool-root] button {
  transition:
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

#tool-custom-root button:not(:disabled):not([aria-disabled="true"]):hover,
[data-tool-root] button:not(:disabled):not([aria-disabled="true"]):hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(20, 31, 18, 0.1);
}

#tool-custom-root button:not(:disabled):not([aria-disabled="true"]):active,
[data-tool-root] button:not(:disabled):not([aria-disabled="true"]):active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(20, 31, 18, 0.05);
}

/* Button loading state */
.btn--loading { pointer-events: none; opacity: 0.75; }
.btn--loading::after {
  content: '';
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 600ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ════════════════════════════════════════════
   RESULT BLOCK — "Receipt" Style
   ════════════════════════════════════════════ */
.result {
  position: relative;
  background: var(--green-50);
  border: 1px solid var(--green-200);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  margin-top: var(--sp-3);
  overflow: hidden;
}
/* Decorative receipt perforation */
.result::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: repeating-linear-gradient(90deg,
    var(--green-50) 0, var(--green-50) 6px,
    transparent 6px, transparent 12px
  );
}

.result__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--green-600);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  margin-bottom: var(--sp-1);
}
.result__value {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-black);
  color: var(--green-800);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
}
.result__unit {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--green-500);
}

.result__details {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--green-200);
}
.result__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-1) 0;
  font-size: var(--text-sm);
}
.result__row-label { color: var(--green-600); }
.result__row-value {
  font-weight: var(--weight-semibold);
  color: var(--green-800);
  font-variant-numeric: tabular-nums;
  font-family: var(--font-body);
}

.result__actions {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding-top: var(--sp-2);
  border-top: 1px dashed var(--green-200);
}

/* Neutral result variant */
.result--neutral {
  background: var(--paper-warm);
  border-color: var(--stone-200);
}
.result--neutral::after {
  background: repeating-linear-gradient(90deg,
    var(--paper-warm) 0, var(--paper-warm) 6px,
    transparent 6px, transparent 12px
  );
}
.result--neutral .result__label { color: var(--stone-500); }
.result--neutral .result__value { color: var(--stone-900); }
.result--neutral .result__unit { color: var(--stone-400); }
.result--neutral .result__details { border-color: var(--stone-200); }
.result--neutral .result__row-label { color: var(--stone-500); }
.result--neutral .result__row-value { color: var(--stone-800); }
.result--neutral .result__actions { border-color: var(--stone-200); }

/* Empty Result State */
.result--empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sp-8) var(--sp-4);
  background: var(--stone-0);
  border: 1px dashed var(--stone-300);
  color: var(--stone-500);
  border-radius: var(--r-lg);
  margin-top: var(--sp-3);
}
.result--empty::after { display: none; }
.result--empty svg {
  width: 48px;
  height: 48px;
  opacity: 0.2;
  margin-bottom: var(--sp-3);
  color: currentColor;
}
.result--empty-title {
  font-weight: var(--weight-semibold);
  color: var(--stone-700);
  margin-bottom: var(--sp-1);
}
.fraction-result-visual,
.fraction-result-visual--comparison,
.fraction-result-visual--pair {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  font-family: var(--font-mono);
}
.fraction-result-visual {
  min-height: 84px;
}
.fraction-result-visual__fraction {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.fraction-result-visual__integer,
.fraction-result-visual__whole {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: var(--weight-black);
  line-height: 1;
  color: var(--green-800);
}
.fraction-result-visual__sign,
.fraction-result-visual__comparison-sign,
.fraction-result-visual__pair-separator {
  font-size: clamp(1.4rem, 3.4vw, 2rem);
  font-weight: var(--weight-black);
  line-height: 1;
  color: var(--green-800);
}
.fraction-result-visual__stack {
  display: inline-grid;
  justify-items: center;
  align-items: center;
  min-width: 76px;
  padding: 10px 14px;
  border-radius: var(--r-lg);
  background: var(--green-100);
  border: 1px solid var(--green-200);
}
.fraction-result-visual__stack-top,
.fraction-result-visual__stack-bottom {
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  font-weight: var(--weight-black);
  line-height: 1.05;
  color: var(--green-800);
}
.fraction-result-visual__stack-line {
  display: block;
  width: 100%;
  height: 2px;
  margin: 8px 0;
  border-radius: var(--r-full);
  background: currentColor;
  color: var(--green-800);
  opacity: 0.82;
}
.fraction-inline-formula {
  display: grid;
  gap: var(--sp-2);
}
.fraction-inline-expression {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  color: var(--text-strong);
}
.fraction-inline-expression__text,
.fraction-inline-expression__number,
.fraction-inline-expression__operator {
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
}
.fraction-inline-expression__text,
.fraction-inline-expression__number {
  font-size: var(--text-base);
}
.fraction-inline-expression__operator {
  font-size: 1.15em;
  font-weight: var(--weight-bold);
}
.fraction-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
  color: var(--text-strong);
}
.fraction-inline--integer {
  gap: 0;
}
.fraction-inline__sign,
.fraction-inline__whole {
  display: inline-flex;
  align-items: center;
  font-size: clamp(1rem, 2vw, 1.15rem);
  font-weight: var(--weight-bold);
  line-height: 1;
}
.fraction-inline__stack {
  display: inline-grid;
  justify-items: center;
  align-items: center;
  min-width: 28px;
}
.fraction-inline__stack-top,
.fraction-inline__stack-bottom {
  display: block;
  line-height: 1.05;
  text-align: center;
  white-space: nowrap;
}
.fraction-inline__stack-line {
  display: block;
  width: 100%;
  min-width: 28px;
  height: 2px;
  margin: 4px 0;
  border-radius: var(--r-full);
  background: currentColor;
  opacity: 0.88;
}
.math-fraction-tool__visual-wrap,
.math-fraction-tool__visual-comparison,
.math-fraction-tool__visual-pair {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  font-family: var(--font-mono);
}
.math-fraction-tool__visual-wrap {
  min-height: 84px;
}
.math-fraction-tool__visual-fraction {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.math-fraction-tool__visual-integer,
.math-fraction-tool__visual-whole {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: var(--weight-black);
  line-height: 1;
  color: var(--green-800);
}
.math-fraction-tool__visual-sign,
.math-fraction-tool__comparison-sign,
.math-fraction-tool__pair-separator {
  font-size: clamp(1.4rem, 3.4vw, 2rem);
  font-weight: var(--weight-black);
  line-height: 1;
  color: var(--green-800);
}
.math-fraction-tool__stacked-result {
  display: inline-grid;
  justify-items: center;
  align-items: center;
  min-width: 76px;
  padding: 10px 14px;
  border-radius: var(--r-lg);
  background: var(--green-100);
  border: 1px solid var(--green-200);
}
.math-fraction-tool__stacked-result-top,
.math-fraction-tool__stacked-result-bottom {
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  font-weight: var(--weight-black);
  line-height: 1.05;
  color: var(--green-800);
}
.math-fraction-tool__stacked-result-line {
  display: block;
  width: 100%;
  height: 2px;
  margin: 8px 0;
  border-radius: var(--r-full);
  background: currentColor;
  color: var(--green-800);
  opacity: 0.82;
}
@media (max-width: 640px) {
  .fraction-field__group,
  .math-fraction-tool__fraction-group {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  .fraction-field__whole,
  .math-fraction-tool__whole-wrap {
    min-width: 0;
    width: min(180px, 100%);
  }
  .fraction-field__stack-shell,
  .fraction-field__stack,
  .math-fraction-tool__fraction-stack-shell,
  .math-fraction-tool__stack-wrap {
    min-width: 0;
    width: min(180px, 100%);
  }
  .fraction-field__input--stack,
  .fraction-field__divider,
  .math-fraction-tool__part-input--stack,
  .math-fraction-tool__divider {
    max-width: none;
    width: 100%;
  }
  .fraction-result-visual,
  .fraction-result-visual--comparison,
  .fraction-result-visual--pair,
  .fraction-inline-expression,
  .math-fraction-tool__visual-wrap,
  .math-fraction-tool__visual-comparison,
  .math-fraction-tool__visual-pair {
    gap: 12px;
  }
  .fraction-result-visual__stack,
  .math-fraction-tool__stacked-result {
    min-width: 68px;
    padding: 8px 12px;
  }
  .fraction-inline-expression {
    gap: 8px;
  }
}

/* ════════════════════════════════════════════
   DATA DISPLAY & STATES
   ════════════════════════════════════════════ */

/* Progress / Gauges */
.progress {
  width: 100%;
  height: 8px;
  background: var(--stone-200);
  border-radius: var(--r-full);
  overflow: hidden;
  margin-bottom: var(--sp-2);
}
.progress__fill {
  height: 100%;
  background: var(--green-500);
  border-radius: inherit;
  transition: width var(--dur-base) var(--ease-out);
}
.progress--warning .progress__fill { background: var(--amber-500); }
.progress--danger .progress__fill { background: var(--error); }
.progress-label {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--stone-500);
}

/* Charts handled dynamically via Chart.js */

/* Data Tables (Amortization, Schedules) */
.data-table-wrap {
  width: 100%;
  overflow-x: auto;
  max-width: 100%;
  min-width: 0;
  contain: paint;
  border: 1px solid var(--stone-200);
  border-radius: var(--r-md);
  background: var(--stone-0);
  margin: var(--sp-4) 0;
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.data-table th,
.data-table td {
  padding: var(--sp-2) var(--sp-3);
  text-align: left;
  border-bottom: 1px solid var(--stone-100);
}
.data-table th {
  background: var(--stone-50);
  font-weight: var(--weight-semibold);
  color: var(--stone-600);
  white-space: nowrap;
}
.data-table td.num,
.data-table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.data-table tr:last-child td {
  border-bottom: none;
}
.data-table tr.total-row td {
  font-weight: var(--weight-bold);
  background: var(--green-50);
  border-top: 2px solid var(--green-200);
  color: var(--green-800);
}

.status-message {
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-lg);
  border: 1px solid transparent;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

.status-message--muted {
  background: var(--paper-warm);
  border-color: var(--stone-200);
  color: var(--stone-600);
}

.status-message--error {
  background: color-mix(in srgb, var(--error) 10%, white);
  border-color: color-mix(in srgb, var(--error) 28%, white);
  color: var(--error);
}

/* Count-up animation */
.result__value--animate { animation: resultPop 500ms var(--ease-spring); }
@keyframes resultPop {
  0%   { opacity: 0; transform: translateY(12px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ════════════════════════════════════════════
   FORMULA BLOCK
   ════════════════════════════════════════════ */
.formula {
  background: var(--paper-tint);
  border: var(--border-hair);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  margin: var(--sp-3) 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--stone-600);
  overflow-x: auto;
  line-height: var(--leading-normal);
}
.formula__label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--stone-400);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  margin-bottom: var(--sp-2);
}

/* ════════════════════════════════════════════
   FAQ ACCORDION
   ════════════════════════════════════════════ */
.faq { margin: var(--sp-6) 0; }
.faq__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  margin-bottom: var(--sp-3);
}
.faq__item {
  border: var(--border-light);
  border-radius: var(--r-lg);
  margin-bottom: var(--sp-2);
  background: var(--stone-0);
  overflow: hidden;
  transition: box-shadow var(--dur-base);
}
.faq__item--open { box-shadow: var(--shadow-xs); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  background: none;
  border: none;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--stone-800);
  cursor: pointer;
  text-align: left;
  transition: background var(--dur-fast);
  font-family: var(--font-body);
  line-height: var(--leading-snug);
}
.faq__q:hover { background: var(--stone-50); }
.faq__chevron {
  width: 16px;
  height: 16px;
  color: var(--stone-400);
  transition: transform var(--dur-slow) var(--ease-spring);
  flex-shrink: 0;
  margin-left: var(--sp-3);
}
.faq__item--open .faq__chevron { transform: rotate(180deg); }
.faq__a {
  padding: 0 var(--sp-4) var(--sp-3);
  font-size: var(--text-base);
  color: var(--stone-500);
  line-height: var(--leading-relaxed);
  display: none;
}
.faq__item--open .faq__a {
  display: block;
  animation: fadeSlideIn 300ms var(--ease-out);
}
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════════════════
   PROSE — Content Typography
   Used for articles, descriptions, and SEO-content
   below calculators. Wrap in .prose container.
   ════════════════════════════════════════════ */
.prose {
  background: var(--stone-0);
  border: var(--border-light);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  margin-bottom: var(--sp-4);
  font-size: var(--text-base);
  color: var(--stone-700);
  line-height: var(--leading-relaxed);
}
@media (max-width: 767px) {
  .prose { padding: var(--sp-4); }
}

/* Headings */
.prose h1 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-black);
  color: var(--stone-900);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--sp-5);
  line-height: var(--leading-tight);
}
.prose h2 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--stone-900);
  letter-spacing: var(--tracking-tight);
  margin: var(--sp-5) 0 var(--sp-2);
  line-height: var(--leading-tight);
  padding-bottom: var(--sp-2);
  border-bottom: var(--border-hair);
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--stone-800);
  margin: var(--sp-4) 0 var(--sp-2);
  line-height: var(--leading-snug);
}
.prose h4 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--stone-700);
  margin: var(--sp-3) 0 var(--sp-1);
  line-height: var(--leading-snug);
}

/* Paragraphs */
.prose p {
  margin-bottom: var(--sp-3);
}
.prose p:last-child { margin-bottom: 0; }

/* Lead paragraph (first paragraph after h1) */
.prose .lead,
.prose h1 + p {
  font-size: var(--text-base);
  color: var(--stone-500);
  line-height: var(--leading-relaxed);
}

/* Strong / Em / Mark */
.prose strong { font-weight: var(--weight-semibold); color: var(--stone-800); }
.prose em { font-style: italic; }
.prose mark {
  background: var(--green-100);
  color: var(--green-800);
  padding: 1px 4px;
  border-radius: 3px;
}

/* Links */
.prose a {
  color: var(--green-700);
  text-decoration: underline;
  text-decoration-color: var(--green-300);
  text-underline-offset: 2px;
  transition: text-decoration-color var(--dur-fast);
}
.prose a:hover {
  text-decoration-color: var(--green-600);
}

/* Lists */
.prose ul,
.prose ol {
  margin-bottom: var(--sp-4);
  padding-left: var(--sp-6);
}
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li {
  margin-bottom: var(--sp-2);
  line-height: var(--leading-relaxed);
  color: var(--stone-700);
}
.prose li::marker {
  color: var(--green-400);
}
/* Nested lists */
.prose ul ul,
.prose ol ul { list-style: circle; margin-top: var(--sp-2); margin-bottom: var(--sp-2); }
.prose ul ol,
.prose ol ol { list-style: lower-alpha; margin-top: var(--sp-2); margin-bottom: var(--sp-2); }

/* Blockquote */
.prose blockquote {
  margin: var(--sp-6) 0;
  padding: var(--sp-4) var(--sp-5);
  border-left: 3px solid var(--green-400);
  background: var(--paper-warm);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  color: var(--stone-600);
  font-style: italic;
}
.prose blockquote p { margin-bottom: var(--sp-2); }
.prose blockquote p:last-child { margin-bottom: 0; }
.prose blockquote cite {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--text-sm);
  font-style: normal;
  color: var(--stone-400);
}

/* Code — Inline */
.prose code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--paper-tint);
  color: var(--stone-700);
  padding: 2px 6px;
  border-radius: var(--r-sm);
  border: var(--border-hair);
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Code — Block */
.prose pre {
  margin: var(--sp-5) 0;
  padding: var(--sp-5);
  background: var(--stone-800);
  color: var(--green-300);
  border-radius: var(--r-lg);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}
.prose pre code {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

/* Tables */
.prose table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  margin: var(--sp-6) 0;
  font-size: var(--text-base);
}
.prose thead th {
  text-align: left;
  font-weight: var(--weight-semibold);
  color: var(--stone-700);
  padding: var(--sp-3) var(--sp-4);
  background: var(--paper-warm);
  border-bottom: 2px solid var(--stone-200);
  font-size: var(--text-sm);
  white-space: nowrap;
}
.prose tbody td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: var(--border-hair);
  color: var(--stone-600);
  vertical-align: top;
}
.prose tbody tr:last-child td { border-bottom: none; }
.prose tbody tr:hover { background: var(--paper); }

@media (max-width: 767px) {
  .prose table {
    display: block;
    overflow-x: auto;
    contain: paint;
    font-size: var(--text-sm);
  }

  .prose thead,
  .prose tbody,
  .prose tr {
    max-width: 100%;
  }

  .prose thead th,
  .prose tbody td {
    white-space: normal;
    padding: var(--sp-2) var(--sp-3);
  }
}

/* Images / Figures */
.prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  margin: var(--sp-6) 0;
}
.prose figure {
  margin: var(--sp-6) 0;
}
.prose figcaption {
  margin-top: var(--sp-2);
  font-size: var(--text-sm);
  color: var(--stone-400);
  text-align: center;
}

/* Horizontal rule */
.prose hr {
  border: none;
  height: 1px;
  background: var(--stone-200);
  margin: var(--sp-8) 0;
}

/* Details / Summary (collapsible sections) */
.prose details {
  margin: var(--sp-4) 0;
  border: var(--border-light);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.prose summary {
  padding: var(--sp-3) var(--sp-4);
  font-weight: var(--weight-medium);
  color: var(--stone-800);
  cursor: pointer;
  background: var(--paper-warm);
  transition: background var(--dur-fast);
  list-style: none;
}
.prose summary::-webkit-details-marker { display: none; }
.prose summary::before {
  content: '▸';
  display: inline-block;
  margin-right: var(--sp-2);
  transition: transform var(--dur-base);
  color: var(--stone-400);
}
.prose details[open] summary::before { transform: rotate(90deg); }
.prose summary:hover { background: var(--stone-100); }
.prose details > :not(summary) {
  padding: var(--sp-4);
}

/* Definition list */
.prose dl {
  margin: var(--sp-5) 0;
}
.prose dt {
  font-weight: var(--weight-semibold);
  color: var(--stone-800);
  margin-top: var(--sp-3);
}
.prose dd {
  margin-left: var(--sp-5);
  color: var(--stone-600);
  margin-bottom: var(--sp-2);
}

/* Note / Info box */
.prose .note {
  margin: var(--sp-5) 0;
  padding: var(--sp-4) var(--sp-5);
  background: var(--green-50);
  border: 1px solid var(--green-200);
  border-radius: var(--r-lg);
  font-size: var(--text-base);
  color: var(--green-800);
}
.prose .note--warning {
  background: var(--amber-100);
  border-color: var(--amber-300);
  color: var(--amber-700);
}

/* Spacing between heading + paragraph */
.prose h2 + p,
.prose h3 + p,
.prose h4 + p { margin-top: 0; }

/* Adjacent heading spacing */
.prose h2 + h3 { margin-top: var(--sp-4); }
.prose h3 + h4 { margin-top: var(--sp-3); }

/* ════════════════════════════════════════════
   BADGES
   ════════════════════════════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 4px 12px;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  border-radius: var(--r-full);
  white-space: nowrap;
}
.badge--green  { background: var(--green-100); color: var(--green-700); }
.badge--stone  { background: var(--stone-100); color: var(--stone-600); }
.badge--amber  { background: var(--amber-100); color: var(--amber-700); }
.badge--info   { background: #D6EAFF; color: #1A5596; }

/* ════════════════════════════════════════════
   HOME — Search Hero
   ════════════════════════════════════════════ */
.home-hero {
  padding: var(--sp-12) 0 var(--sp-8);
  text-align: center;
}
.home-hero__title {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-black);
  color: var(--stone-900);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--sp-6);
  line-height: var(--leading-tight);
}
.home-hero__title em {
  font-style: normal;
  color: var(--green-600);
  position: relative;
}
.home-hero__title em::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 0;
  right: 0;
  height: 6px;
  background: var(--green-200);
  border-radius: 3px;
  z-index: -1;
}
.home-hero__search {
  position: relative;
  max-width: 560px;
  margin: 0 auto var(--sp-5);
}
.home-hero__input {
  width: 100%;
  height: 60px;
  padding: 0 var(--sp-6) 0 52px;
  font-size: var(--text-xl);
  font-family: var(--font-body);
  background: var(--stone-0);
  border: var(--border-default);
  border-radius: var(--r-2xl);
  outline: none;
  box-shadow: var(--shadow-md);
  transition: all var(--dur-base) var(--ease-out);
}
.home-hero__input::placeholder { color: var(--stone-400); }
.home-hero__input:focus {
  border-color: var(--green-400);
  box-shadow: var(--shadow-lg), var(--shadow-glow);
}
.home-hero__icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--stone-400);
  pointer-events: none;
}
.home-stats {
  display: flex;
  justify-content: center;
  gap: var(--sp-8);
  font-size: var(--text-base);
  color: var(--stone-400);
}
.home-stats__num {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  color: var(--stone-700);
}

/* Section headings */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
}
.section-head__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.section-head__link {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--green-600);
}

/* ════════════════════════════════════════════
   SOURCES — Official references & data sources
   ════════════════════════════════════════════ */
.sources {
  background: var(--stone-0);
  border: var(--border-light);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.sources__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--stone-800);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.sources__title svg {
  color: var(--stone-400);
}
.sources__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sources__item {
  margin-bottom: var(--sp-2);
}
.sources__item:last-child {
  margin-bottom: 0;
}
.sources__link {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--paper-warm);
  border: var(--border-hair);
  border-radius: var(--r-lg);
  text-decoration: none;
  transition: all var(--dur-fast) var(--ease-out);
}
.sources__link:hover {
  background: var(--green-50);
  border-color: var(--green-200);
}
.sources__name {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--green-700);
  flex: 1;
}
.sources__url {
  font-size: var(--text-xs);
  color: var(--stone-400);
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.sources__disclaimer {
  margin-top: var(--sp-3);
  font-size: var(--text-xs);
  color: var(--stone-400);
  line-height: var(--leading-relaxed);
}

/* ════════════════════════════════════════════
   RELATED CALCULATORS
   ════════════════════════════════════════════ */
.related { margin: var(--sp-6) 0; }
.related__title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  margin-bottom: var(--sp-3);
}
.related__scroll {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 767px) { .related__scroll { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .related__scroll { grid-template-columns: 1fr; } }
.related__item { list-style: none; }

/* ════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════ */
.footer {
  background: var(--stone-0);
  border-top: var(--border-light);
  padding: var(--sp-12) 0 var(--sp-6);
  margin-top: var(--sp-16);
  /* Remove dot grid on footer */
  background-image: none;
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr));
  gap: var(--sp-8);
  margin-bottom: var(--sp-8);
}
.footer__desc {
  font-size: var(--text-sm);
  color: var(--stone-400);
  margin-top: var(--sp-3);
  max-width: 280px;
  line-height: var(--leading-relaxed);
}
.footer__heading {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--stone-800);
  margin-bottom: var(--sp-3);
}
.footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer__link {
  display: block;
  font-size: var(--text-base);
  color: var(--stone-400);
  padding: 4px 0;
  transition: color var(--dur-fast);
}
.footer__link:hover { color: var(--green-600); }
.footer__text {
  display: block;
  font-size: var(--text-base);
  color: var(--stone-400);
  padding: 4px 0;
}
.footer__bottom {
  padding-top: var(--sp-6);
  border-top: var(--border-hair);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-xs);
  color: var(--stone-400);
  flex-wrap: wrap;
  gap: var(--sp-2);
}
@media (max-width: 767px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
}

.ct-static-page {
  margin: var(--sp-10) auto;
}

/* ════════════════════════════════════════════
   TOAST
   ════════════════════════════════════════════ */
.toast {
  position: fixed;
  bottom: var(--sp-6);
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  background: var(--stone-900);
  color: var(--stone-0);
  border-radius: var(--r-full);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  box-shadow: var(--shadow-xl);
  transition: transform var(--dur-slow) var(--ease-spring);
}
.toast--show { transform: translateX(-50%) translateY(0); }
.toast__icon { color: var(--green-400); flex-shrink: 0; }

/* ════════════════════════════════════════════
   TOOLTIP
   ════════════════════════════════════════════ */
.tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Trigger — small "?" circle */
.tooltip__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: var(--r-full);
  background: var(--stone-200);
  color: var(--stone-500);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--weight-bold);
  line-height: 1;
  cursor: help;
  user-select: none;
  transition: all var(--dur-fast) var(--ease-out);
  border: none;
  padding: 0;
  flex-shrink: 0;
}
.tooltip__trigger:hover,
.tooltip__trigger:focus-visible {
  background: var(--green-500);
  color: white;
  outline: none;
  box-shadow: 0 0 0 3px rgba(82, 183, 136, 0.18);
}

/* Bubble — hidden by default */
.tooltip__bubble {
  position: absolute;
  z-index: var(--z-dropdown);
  display: none;
  width: max-content;
  max-width: min(260px, calc(100vw - 32px));
  padding: var(--sp-2) var(--sp-3);
  background: var(--stone-800);
  color: var(--stone-100);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-normal);
  line-height: var(--leading-normal);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  pointer-events: none;
  opacity: 0;
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

/* Arrow (shared base) */
.tooltip__bubble::before {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--stone-800);
  transform: rotate(45deg);
}

/* Show on hover / focus */
.tooltip:hover .tooltip__bubble,
.tooltip__trigger:focus-visible + .tooltip__bubble {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

/* ── TOP (default) ── */
.tooltip__bubble,
.tooltip__bubble--top {
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
}
.tooltip:hover .tooltip__bubble,
.tooltip:hover .tooltip__bubble--top,
.tooltip__trigger:focus-visible + .tooltip__bubble,
.tooltip__trigger:focus-visible + .tooltip__bubble--top {
  transform: translateX(-50%) translateY(0);
}
.tooltip__bubble::before,
.tooltip__bubble--top::before {
  bottom: -4px;
  left: 50%;
  margin-left: -4px;
}

/* ── BOTTOM ── */
.tooltip__bubble--bottom {
  bottom: auto;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
}
.tooltip:hover .tooltip__bubble--bottom,
.tooltip__trigger:focus-visible + .tooltip__bubble--bottom {
  transform: translateX(-50%) translateY(0);
}
.tooltip__bubble--bottom::before {
  bottom: auto;
  top: -4px;
  left: 50%;
  margin-left: -4px;
}

/* ── LEFT ── */
.tooltip__bubble--left {
  bottom: auto;
  top: 50%;
  left: auto;
  right: calc(100% + 8px);
  transform: translateY(-50%) translateX(4px);
}
.tooltip:hover .tooltip__bubble--left,
.tooltip__trigger:focus-visible + .tooltip__bubble--left {
  transform: translateY(-50%) translateX(0);
}
.tooltip__bubble--left::before {
  top: 50%;
  left: auto;
  right: -4px;
  bottom: auto;
  margin-top: -4px;
  margin-left: 0;
}

/* ── RIGHT ── */
.tooltip__bubble--right {
  bottom: auto;
  top: 50%;
  left: calc(100% + 8px);
  transform: translateY(-50%) translateX(-4px);
}
.tooltip:hover .tooltip__bubble--right,
.tooltip__trigger:focus-visible + .tooltip__bubble--right {
  transform: translateY(-50%) translateX(0);
}
.tooltip__bubble--right::before {
  top: 50%;
  left: -4px;
  right: auto;
  bottom: auto;
  margin-top: -4px;
  margin-left: 0;
}

/* Variant: info-toned (green) */
.tooltip--info .tooltip__bubble {
  background: var(--green-800);
}
.tooltip--info .tooltip__bubble::before {
  background: var(--green-800);
}

/* Variant: warning-toned (amber) */
.tooltip--warning .tooltip__bubble {
  background: var(--amber-700);
}
.tooltip--warning .tooltip__bubble::before {
  background: var(--amber-700);
}

@media (max-width: 767px) {
  .tooltip__bubble,
  .tooltip__bubble--top,
  .tooltip__bubble--bottom,
  .tooltip__bubble--left,
  .tooltip__bubble--right {
    left: 50%;
    right: auto;
    top: auto;
    bottom: calc(100% + 8px);
    transform: translateX(-50%) translateY(4px);
  }

  .tooltip:hover .tooltip__bubble,
  .tooltip:hover .tooltip__bubble--top,
  .tooltip:hover .tooltip__bubble--bottom,
  .tooltip:hover .tooltip__bubble--left,
  .tooltip:hover .tooltip__bubble--right,
  .tooltip__trigger:focus-visible + .tooltip__bubble,
  .tooltip__trigger:focus-visible + .tooltip__bubble--top,
  .tooltip__trigger:focus-visible + .tooltip__bubble--bottom,
  .tooltip__trigger:focus-visible + .tooltip__bubble--left,
  .tooltip__trigger:focus-visible + .tooltip__bubble--right {
    transform: translateX(-50%) translateY(0);
  }
}

/* ════════════════════════════════════════════
   UTILITIES
   ════════════════════════════════════════════ */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.mt-2 { margin-top: var(--sp-2); }
.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-6 { margin-bottom: var(--sp-6); }
.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}