/* ═══════════════════════════════════════════════════════════════
   Blueprint.gg — Tools Pages
   Shared styles for tools hub + individual tool pages
   ═══════════════════════════════════════════════════════════════ */

/* ── Hero ── */
.tool-hero {
  text-align: center;
}

.tool-hero__subtitle {
  max-width: 40rem;
  margin-inline: auto;
}

/* ── Tools Hub Grid ── */
/* Grid columns → shared.css .grid--3col */
.tools-grid__cards {
  gap: var(--space-6);
}

.tools-card {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-slate-200);
  background: var(--color-white);
  transition: border-color var(--duration-base) var(--ease-default),
              box-shadow var(--duration-base) var(--ease-default);
  text-decoration: none;
  color: inherit;
}

a.tools-card:hover {
  border-color: var(--color-teal);
  box-shadow: var(--shadow-teal);
}

.tools-card--coming-soon {
  opacity: var(--opacity-muted);
  cursor: default;
}

.tools-card__icon {
  flex-shrink: 0;
  width: var(--size-icon-box);
  height: var(--size-icon-box);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tools-card__icon svg {
  width: var(--icon-md);
  height: var(--icon-md);
}

/* Icon color variants → components.css (.icon-box--{color}) */

.tools-card__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-1);
}

.tools-card__desc {
  font-size: var(--text-sm);
  color: var(--color-slate-600);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-3);
}

.tools-card__cta {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-teal);
}

.tools-card__cta--muted {
  color: var(--color-slate-400);
  font-weight: var(--weight-medium);
}

/* ── UTM Builder Layout ── */
.utm-builder__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);
  align-items: start;
}

@media (max-width: 1023px) {
  .utm-builder__layout {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

/* ── Form Panel ── */
.utm-builder__form-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.utm-builder__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.utm-builder__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-slate-800);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
}

.utm-builder__hint {
  font-weight: var(--weight-regular);
  font-size: var(--text-xs);
  color: var(--color-slate-500);
  display: block;
  width: 100%;
  margin-top: var(--space-1);
}

.utm-builder__recommended {
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  color: var(--color-teal);
  background: var(--color-teal-light);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
}

.utm-builder__optional {
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  color: var(--color-slate-500);
  background: var(--color-slate-100);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
}

.utm-builder__input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  font-family: inherit;
  border: 1px solid var(--color-slate-300);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-slate-800);
  transition: border-color var(--duration-base) var(--ease-default),
              box-shadow var(--duration-base) var(--ease-default);
}

.utm-builder__input::placeholder {
  color: var(--color-slate-400);
}

.utm-builder__input:focus {
  outline: none;
  border-color: var(--color-teal);
  box-shadow: var(--shadow-focus);
}

.utm-builder__reset {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  margin-top: var(--space-2);
}

/* ── Preview Panel ── */
.utm-builder__preview-panel {
  position: sticky;
  top: 6rem;
}

@media (max-width: 1023px) {
  .utm-builder__preview-panel {
    position: static;
  }
}

.utm-builder__preview-card {
  border: 1px solid var(--color-slate-200);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  overflow: hidden;
}

.utm-builder__preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-slate-200);
  background: var(--color-slate-50);
}

.utm-builder__preview-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-slate-700);
}

.utm-builder__preview-actions {
  display: flex;
  gap: var(--space-2);
}

.utm-builder__copy-btn--success {
  background: var(--color-success-text) !important;
  border-color: var(--color-success-text) !important;
}

/* ── Empty state ── */
.utm-builder__preview-empty {
  padding: var(--space-12) var(--space-6);
  text-align: center;
  color: var(--color-slate-400);
}

.utm-builder__preview-empty svg {
  margin-bottom: var(--space-4);
  opacity: var(--opacity-dim);
}

.utm-builder__preview-empty p {
  font-size: var(--text-sm);
  max-width: 20rem;
  margin-inline: auto;
}

/* ── URL Preview (color-coded) ── */
.utm-builder__preview-url {
  padding: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.8;
  word-break: break-all;
  overflow-wrap: break-word;
}

.utm-preview__base {
  color: var(--color-slate-700);
}

.utm-preview__amp {
  color: var(--color-slate-400);
}

.utm-preview__param {
  border-radius: var(--radius-sm);
  padding: 1px 3px;
  margin: 1px 0;
  display: inline;
}

/* Color coding per parameter */
.utm-preview__param--source {
  background: var(--color-teal-12);
  color: var(--color-utm-source);
}

.utm-preview__param--medium {
  background: var(--color-indigo-12);
  color: var(--color-indigo-hover);
}

.utm-preview__param--campaign {
  background: var(--color-warning-15);
  color: var(--color-utm-campaign);
}

.utm-preview__param--term {
  background: var(--color-danger-12);
  color: var(--color-utm-term);
}

.utm-preview__param--content {
  background: var(--color-success-15);
  color: var(--color-utm-content);
}

.utm-preview__param--id {
  background: var(--color-info-15);
  color: var(--color-utm-id);
}

/* ── Legend ── */
.utm-builder__legend {
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-slate-200);
  border-radius: var(--radius-lg);
  background: var(--color-white);
}

.utm-builder__legend-title {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-slate-500);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  margin-bottom: var(--space-3);
}

.utm-builder__legend-items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
}

.utm-builder__legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-slate-600);
}

.utm-builder__legend-swatch {
  width: var(--space-3);
  height: var(--space-3);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.utm-builder__legend-swatch--base     { background: var(--color-slate-700); }
.utm-builder__legend-swatch--source   { background: var(--color-teal-50); }
.utm-builder__legend-swatch--medium   { background: var(--color-indigo-50); }
.utm-builder__legend-swatch--campaign { background: var(--color-warning-60); }
.utm-builder__legend-swatch--term     { background: var(--color-danger-50); }
.utm-builder__legend-swatch--content  { background: var(--color-success-50); }
.utm-builder__legend-swatch--id       { background: var(--color-info-50); }

/* ── Sticky copy bar (mobile) ── */
.utm-builder__sticky-copy {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--color-overlay-white);
  border-top: 1px solid var(--color-slate-200);
  z-index: var(--z-sticky);
  display: none;
}

.utm-builder__sticky-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

@media (min-width: 64rem) {
  .utm-builder__sticky-copy {
    display: none !important;
  }
}

/* ── How UTMs Work cards ── */
.utm-info__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

@media (max-width: 1023px) {
  .utm-info__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .utm-info__grid {
    grid-template-columns: 1fr;
  }
}

.utm-info__card {
  padding: var(--space-6);
  border: 1px solid var(--color-slate-200);
  border-radius: var(--radius-lg);
  background: var(--color-white);
}

.utm-info__card h3 {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-2);
  color: var(--color-slate-800);
}

.utm-info__card p {
  font-size: var(--text-sm);
  color: var(--color-slate-600);
  line-height: var(--leading-relaxed);
}

.utm-info__card code {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  background: var(--color-slate-100);
  padding: var(--space-1) var(--space-1);
  border-radius: var(--radius-sm);
  color: var(--color-slate-700);
}

.utm-info__card-icon {
  width: var(--size-input);
  height: var(--size-input);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-3);
}

.utm-info__card-icon svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.utm-info__card-icon--source   { background: var(--color-teal-12); color: var(--color-teal); }
.utm-info__card-icon--medium   { background: var(--color-indigo-12); color: var(--color-indigo); }
.utm-info__card-icon--campaign { background: var(--color-warning-12); color: var(--color-warning-text); }
.utm-info__card-icon--term     { background: var(--color-danger-12); color: var(--color-danger-text); }
.utm-info__card-icon--content  { background: var(--color-success-12); color: var(--color-success-text); }
.utm-info__card-icon--id       { background: var(--color-info-12); color: var(--color-info-text); }

/* ── Best Practices ── */
.utm-practices__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

@media (max-width: 1023px) {
  .utm-practices__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .utm-practices__grid {
    grid-template-columns: 1fr;
  }
}

.utm-practices__item {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  border: 1px solid var(--color-slate-200);
}

.utm-practices__item h3 {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-2);
  color: var(--color-slate-800);
}

.utm-practices__item p {
  font-size: var(--text-sm);
  color: var(--color-slate-600);
  line-height: var(--leading-relaxed);
}

.utm-practices__item code {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  background: var(--color-slate-100);
  padding: var(--space-1) var(--space-1);
  border-radius: var(--radius-sm);
  color: var(--color-slate-700);
}

/* ═══════════════════════════════════════════════════════════════
   Shared Calculator Tool Styles
   Reusable layout, form, results, info cards, and practices
   for all tool calculator pages (A/B test, ROAS, etc.)
   ═══════════════════════════════════════════════════════════════ */

/* ── Calculator Layout ── */
.calc-tool__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);
  align-items: start;
}

@media (max-width: 1023px) {
  .calc-tool__layout {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

/* ── Form Panel ── */
.calc-tool__form-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.calc-tool__fieldset {
  border: 1px solid var(--color-slate-200);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  background: var(--color-white);
}

.calc-tool__legend {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-slate-800);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.calc-tool__legend--teal  { color: var(--color-teal); }
.calc-tool__legend--indigo { color: var(--color-indigo); }

.calc-tool__tag {
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-slate-100);
  color: var(--color-slate-500);
}

.calc-tool__tag--optional {
  background: var(--color-slate-100);
  color: var(--color-slate-500);
}

.calc-tool__field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

@media (max-width: 479px) {
  .calc-tool__field-row {
    grid-template-columns: 1fr;
  }
}

.calc-tool__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.calc-tool__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-slate-800);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
}

.calc-tool__hint {
  font-weight: var(--weight-regular);
  font-size: var(--text-xs);
  color: var(--color-slate-500);
  display: block;
  width: 100%;
  margin-top: var(--space-1);
}

.calc-tool__input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  font-family: inherit;
  border: 1px solid var(--color-slate-300);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-slate-800);
  transition: border-color var(--duration-base) var(--ease-default),
              box-shadow var(--duration-base) var(--ease-default);
}

.calc-tool__input::placeholder {
  color: var(--color-slate-400);
}

.calc-tool__input:focus {
  outline: none;
  border-color: var(--color-teal);
  box-shadow: var(--shadow-focus);
}

/* Remove number input spinners */
.calc-tool__input::-webkit-outer-spin-button,
.calc-tool__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.calc-tool__input[type="number"] {
  -moz-appearance: textfield;
}

/* Currency input with prefix symbol */
.calc-tool__input-group {
  position: relative;
  display: flex;
  align-items: center;
}

.calc-tool__input-prefix {
  position: absolute;
  left: var(--space-4);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-slate-400);
  pointer-events: none;
  z-index: var(--z-base);
}

.calc-tool__input-group .calc-tool__input {
  padding-left: var(--space-8);
}

.calc-tool__input-group--computed {
  background: var(--color-slate-50);
  border-radius: var(--radius-md);
}

.calc-tool__input-group--computed .calc-tool__input {
  background: transparent;
  color: var(--color-teal);
  font-weight: var(--weight-semibold);
  cursor: default;
}

.calc-tool__actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.calc-tool__reset {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

/* ── Results Panel ── */
.calc-tool__results-panel {
  position: sticky;
  top: 6rem;
}

@media (max-width: 1023px) {
  .calc-tool__results-panel {
    position: static;
  }
}

.calc-tool__results-card {
  border: 1px solid var(--color-slate-200);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  overflow: hidden;
}

.calc-tool__results-header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-slate-200);
  background: var(--color-slate-50);
}

.calc-tool__results-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-slate-700);
}

/* ── Empty state ── */
.calc-tool__results-empty {
  padding: var(--space-12) var(--space-6);
  text-align: center;
  color: var(--color-slate-400);
}

.calc-tool__results-empty svg {
  margin-bottom: var(--space-4);
  opacity: var(--opacity-dim);
}

.calc-tool__results-empty p {
  font-size: var(--text-sm);
  max-width: 20rem;
  margin-inline: auto;
}

/* ── Results body ── */
.calc-tool__results-body {
  padding: var(--space-5);
}

/* ── Verdict ── */
.calc-tool__verdict {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  margin-top: var(--space-5);
  margin-bottom: var(--space-5);
  min-height: calc(var(--space-32) + var(--space-4)); /* 9rem — prevents layout shift when verdict text varies in length */
  border: 1px solid var(--color-slate-200);
  background: var(--color-slate-50);
}

.calc-tool__verdict--positive {
  border-color: var(--color-success-bg);
  background: var(--color-success-bg);
}

.calc-tool__verdict--positive .calc-tool__verdict-icon {
  color: var(--color-success-text);
}

.calc-tool__verdict--warning {
  border-color: var(--color-warning-bg);
  background: var(--color-warning-bg);
}

.calc-tool__verdict--warning .calc-tool__verdict-icon {
  color: var(--color-warning-text);
}

.calc-tool__verdict--negative {
  border-color: var(--color-danger-bg, var(--color-slate-200));
  background: var(--color-danger-8);
}

.calc-tool__verdict--negative .calc-tool__verdict-icon {
  color: var(--color-danger-text);
}

.calc-tool__verdict--neutral {
  border-color: var(--color-slate-200);
  background: var(--color-slate-50);
}

.calc-tool__verdict--neutral .calc-tool__verdict-icon {
  color: var(--color-slate-400);
}

.calc-tool__verdict-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.calc-tool__verdict-text {
  font-size: var(--text-sm);
  color: var(--color-slate-700);
  line-height: var(--leading-relaxed);
}

.calc-tool__verdict-text strong {
  display: block;
  font-size: var(--text-base);
  margin-bottom: var(--space-1);
  color: var(--color-slate-900);
}

/* ── Metrics grid ── */
.calc-tool__metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.calc-tool__metric {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-slate-50);
}

.calc-tool__metric-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-slate-500);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}

.calc-tool__metric-value {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-slate-800);
}

.calc-tool__metric-value--positive {
  color: var(--color-success-text);
}

.calc-tool__metric-value--negative {
  color: var(--color-danger-text);
}

/* ── Guidance / hint bar ── */
.calc-tool__guidance {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-slate-50);
  border: 1px solid var(--color-slate-200);
}

.calc-tool__guidance svg {
  flex-shrink: 0;
  color: var(--color-slate-500);
  margin-top: 1px;
}

.calc-tool__guidance p {
  font-size: var(--text-sm);
  color: var(--color-slate-600);
  line-height: var(--leading-relaxed);
}

/* ── Related link ── */
.calc-tool__related {
  margin-top: var(--space-4);
}

.calc-tool__related-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-slate-200);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-teal);
  text-decoration: none;
  transition: border-color var(--duration-base) var(--ease-default),
              box-shadow var(--duration-base) var(--ease-default);
}

.calc-tool__related-link:hover {
  border-color: var(--color-teal);
  box-shadow: var(--shadow-teal);
}

.calc-tool__related-link svg {
  flex-shrink: 0;
}

/* ── Info cards grid (How it works) ── */
.calc-tool-info__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

@media (max-width: 1023px) {
  .calc-tool-info__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .calc-tool-info__grid {
    grid-template-columns: 1fr;
  }
}

.calc-tool-info__card {
  padding: var(--space-6);
  border: 1px solid var(--color-slate-200);
  border-radius: var(--radius-lg);
  background: var(--color-white);
}

.calc-tool-info__card h3 {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-2);
  color: var(--color-slate-800);
}

.calc-tool-info__card p {
  font-size: var(--text-sm);
  color: var(--color-slate-600);
  line-height: var(--leading-relaxed);
}

.calc-tool-info__card-icon {
  width: var(--size-input);
  height: var(--size-input);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-3);
}

.calc-tool-info__card-icon svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.calc-tool-info__card-icon--teal   { background: var(--color-teal-12); color: var(--color-teal); }
.calc-tool-info__card-icon--indigo { background: var(--color-indigo-12); color: var(--color-indigo); }
.calc-tool-info__card-icon--amber  { background: var(--color-warning-12); color: var(--color-warning-text); }

/* ── Best Practices grid ── */
.calc-tool-practices__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

@media (max-width: 1023px) {
  .calc-tool-practices__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .calc-tool-practices__grid {
    grid-template-columns: 1fr;
  }
}

.calc-tool-practices__item {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  border: 1px solid var(--color-slate-200);
}

.calc-tool-practices__item h3 {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-2);
  color: var(--color-slate-800);
}

.calc-tool-practices__item p {
  font-size: var(--text-sm);
  color: var(--color-slate-600);
  line-height: var(--leading-relaxed);
}

/* ── CTA Section ── */
/* Uses shared [class$="-cta__box"] styles from shared.css */

/* ═══════════════════════════════════════════════════════════════
   Hub Category Navigation Strip
   ═══════════════════════════════════════════════════════════════ */

.tools-grid__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}

.tools-grid__nav-link {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-slate-600);
  border: 1px solid var(--color-slate-200);
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: border-color var(--duration-base) var(--ease-default),
              color var(--duration-base) var(--ease-default),
              background var(--duration-base) var(--ease-default);
}

.tools-grid__nav-link:hover {
  border-color: var(--color-teal);
  color: var(--color-teal);
  background: var(--color-teal-light);
}

/* Hub category headings */
.tools-grid__category {
  margin-top: var(--space-8);
  margin-bottom: var(--space-5);
  scroll-margin-top: 5rem;
}

.tools-grid__category:first-of-type {
  margin-top: 0;
}

.tools-grid__category-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-slate-800);
}

.tools-grid__category-count {
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  color: var(--color-slate-500);
  margin-left: var(--space-2);
}

/* ═══════════════════════════════════════════════════════════════
   Shared New Calculator Components
   Mode toggle, benchmarks, sliders, tables, gauges, etc.
   ═══════════════════════════════════════════════════════════════ */

/* ── Mode Toggle (CPC/CPM/CPA, Forward/Reverse) ── */
.calc-tool__mode-toggle {
  display: inline-flex;
  align-self: flex-start;
  border: 1px solid var(--color-slate-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-5);
}

.calc-tool__mode-btn {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-slate-600);
  background: var(--color-white);
  border: none;
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-default),
              color var(--duration-base) var(--ease-default);
}

.calc-tool__mode-btn:not(:last-child) {
  border-right: 1px solid var(--color-slate-200);
}

.calc-tool__mode-btn:hover {
  background: var(--color-slate-50);
}

.calc-tool__mode-btn--active {
  background: var(--color-teal);
  color: var(--color-white);
}

.calc-tool__mode-btn--active:hover {
  background: var(--color-teal);
}

/* ── Benchmark Comparison Bar ── */
.calc-tool__benchmark {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-slate-50);
  border: 1px solid var(--color-slate-200);
}

.calc-tool__benchmark-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-slate-500);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  margin-bottom: var(--space-2);
}

.calc-tool__benchmark-bar {
  position: relative;
  height: 8px;
  background: var(--color-slate-200);
  border-radius: var(--radius-full);
  overflow: visible;
}

.calc-tool__benchmark-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--color-teal);
  transition: width 0.3s var(--ease-default);
}

.calc-tool__benchmark-marker {
  position: absolute;
  top: -4px;
  width: 2px;
  height: 16px;
  background: var(--color-slate-500);
  border-radius: 1px;
  transform: translateX(-50%);
}

.calc-tool__benchmark-marker::after {
  content: attr(data-label);
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--text-2xs);
  color: var(--color-slate-500);
  white-space: nowrap;
}

.calc-tool__benchmark-values {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-slate-600);
}

.calc-tool__benchmark-verdict {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.calc-tool__benchmark-verdict--above { color: var(--color-success-text); }
.calc-tool__benchmark-verdict--below { color: var(--color-danger-text); }
.calc-tool__benchmark-verdict--average { color: var(--color-warning-text); }

/* ── Range Slider ── */
.calc-tool__slider-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.calc-tool__slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: var(--color-slate-200);
  border-radius: var(--radius-full);
  outline: none;
  transition: background var(--duration-base) var(--ease-default);
}

.calc-tool__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-teal);
  border: 2px solid var(--color-white);
  box-shadow: 0 1px 3px var(--color-overlay-black-20);
  cursor: pointer;
}

.calc-tool__slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-teal);
  border: 2px solid var(--color-white);
  box-shadow: 0 1px 3px var(--color-overlay-black-20);
  cursor: pointer;
}

.calc-tool__slider-value {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-slate-800);
  text-align: center;
}

.calc-tool__slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--color-slate-400);
}

/* ── Data Table ── */
.calc-tool__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.calc-tool__table th {
  padding: var(--space-2) var(--space-3);
  font-weight: var(--weight-semibold);
  color: var(--color-slate-500);
  text-align: left;
  border-bottom: 2px solid var(--color-slate-200);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}

.calc-tool__table td {
  padding: var(--space-2) var(--space-3);
  color: var(--color-slate-700);
  border-bottom: 1px solid var(--color-slate-100);
}

.calc-tool__table tr:hover td {
  background: var(--color-slate-50);
}

.calc-tool__table-row--current td {
  background: var(--color-teal-light);
  font-weight: var(--weight-semibold);
}

.calc-tool__table-cell--positive { color: var(--color-success-text); }
.calc-tool__table-cell--negative { color: var(--color-danger-text); }

/* ── Gauge / Pacing Bar ── */
.calc-tool__gauge {
  position: relative;
  height: 12px;
  background: var(--color-slate-200);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin: var(--space-3) 0;
}

.calc-tool__gauge-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.4s var(--ease-default), background 0.3s var(--ease-default);
}

.calc-tool__gauge-fill--on-track { background: var(--color-success-text); }
.calc-tool__gauge-fill--slight { background: var(--color-warning-text); }
.calc-tool__gauge-fill--off-track { background: var(--color-danger-text); }

.calc-tool__gauge-target {
  position: absolute;
  top: -3px;
  width: 2px;
  height: 18px;
  background: var(--color-slate-700);
  border-radius: 1px;
  z-index: 1;
}

.calc-tool__gauge-labels {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--color-slate-500);
  margin-top: var(--space-1);
}

/* ── Large Ratio Display ── */
.calc-tool__ratio-display {
  text-align: center;
  padding: var(--space-6) var(--space-4);
}

.calc-tool__ratio-value {
  font-size: 3rem;
  font-weight: var(--weight-bold);
  color: var(--color-slate-800);
  line-height: 1;
  margin-bottom: var(--space-2);
}

.calc-tool__ratio-label {
  font-size: var(--text-sm);
  color: var(--color-slate-500);
  font-weight: var(--weight-medium);
}

.calc-tool__ratio-verdict {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.calc-tool__ratio-verdict--healthy {
  background: var(--color-success-bg);
  color: var(--color-success-text);
}

.calc-tool__ratio-verdict--warning {
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}

.calc-tool__ratio-verdict--danger {
  background: var(--color-danger-8);
  color: var(--color-danger-text);
}

.calc-tool__ratio-verdict--over {
  background: var(--color-info-10);
  color: var(--color-info-text);
}

/* ── Dynamic Rows (add/remove pattern) ── */
.calc-tool__dynamic-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.calc-tool__dynamic-row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-slate-200);
  border-radius: var(--radius-md);
  background: var(--color-white);
}

.calc-tool__dynamic-row .calc-tool__field {
  flex: 1;
  min-width: 0;
}

.calc-tool__dynamic-row .calc-tool__field:has(.calc-tool__channel-select-container) {
  flex: 1.5;
}

.calc-tool__row-remove {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-slate-200);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-slate-400);
  cursor: pointer;
  transition: color var(--duration-base) var(--ease-default),
              border-color var(--duration-base) var(--ease-default);
}

.calc-tool__row-remove:hover {
  color: var(--color-danger-text);
  border-color: var(--color-danger-text);
}

.calc-tool__add-row {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-teal);
  background: none;
  border: 1px dashed var(--color-slate-300);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--duration-base) var(--ease-default),
              background var(--duration-base) var(--ease-default);
}

.calc-tool__add-row:hover {
  border-color: var(--color-teal);
  background: var(--color-teal-light);
}

@media (max-width: 479px) {
  .calc-tool__dynamic-row {
    flex-direction: column;
    align-items: stretch;
  }
  .calc-tool__row-remove {
    align-self: flex-end;
  }
}

/* ── Horizontal Bar Chart ── */
.calc-tool__bar-chart {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.calc-tool__bar-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.calc-tool__bar-row-header {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

.calc-tool__bar-row-label { color: var(--color-slate-700); }
.calc-tool__bar-row-value { color: var(--color-slate-500); }

.calc-tool__delta-badge {
  font-size: var(--text-xs);
  margin-left: var(--space-1);
}

.calc-tool__bar-track {
  height: 8px;
  background: var(--color-slate-100);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.calc-tool__bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.4s var(--ease-default);
}

/* Stacked bar (horizontal, for Budget Allocator) */
.calc-tool__stacked-bar {
  display: flex;
  height: 24px;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: var(--space-3) 0;
}

.calc-tool__stacked-segment {
  height: 100%;
  transition: width 0.4s var(--ease-default);
  min-width: 2px;
}

/* Predefined channel colors — external brand colors, intentionally not tokenized */
.calc-tool__bar-fill--google-search { background: #4285F4; }
.calc-tool__bar-fill--google-shopping { background: #34A853; }
.calc-tool__bar-fill--youtube { background: #FF0000; }
.calc-tool__bar-fill--meta { background: #1877F2; }
.calc-tool__bar-fill--linkedin { background: #0A66C2; }
.calc-tool__bar-fill--tiktok { background: #010101; }
.calc-tool__bar-fill--microsoft { background: #00A4EF; }
.calc-tool__bar-fill--other { background: var(--color-slate-400); }

/* ── Color Swatch (inline legend dot) ── */
.calc-tool__color-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  vertical-align: middle;
}

/* ── Efficiency Ranking ── */
.calc-tool__ranking {
  margin-top: var(--space-5);
}

.calc-tool__ranking-title {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-slate-700);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  margin-bottom: var(--space-3);
}

.calc-tool__ranking-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.calc-tool__ranking-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  background: var(--color-slate-50);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}

.calc-tool__ranking-name {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--weight-medium);
  color: var(--color-slate-700);
}

.calc-tool__ranking-roas {
  font-weight: var(--weight-semibold);
  color: var(--color-slate-900);
}

/* ── Related Tools Section (multi-link) ── */
.calc-tool__related-tools {
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.calc-tool__related-tools-title {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-slate-500);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  margin-bottom: var(--space-1);
}

/* ── Custom Select ──
   Base styles are in components.css.
   No overrides needed here — all tools use the shared custom-select. */

/* ═══════════════════════════════════════════════════════════════
   Google Ads Preview Tool — ad-preview__ prefix
   ═══════════════════════════════════════════════════════════════ */

.ad-preview__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);
  align-items: start;
}

@media (max-width: 1023px) {
  .ad-preview__layout {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

.ad-preview__form-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.ad-preview__char-bar {
  height: 4px;
  background: var(--color-slate-200);
  border-radius: var(--radius-full);
  margin-top: var(--space-1);
  overflow: hidden;
}

.ad-preview__char-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.2s var(--ease-default), background 0.2s var(--ease-default);
}

.ad-preview__char-fill--green { background: var(--color-success-text); }
.ad-preview__char-fill--yellow { background: var(--color-warning-text); }
.ad-preview__char-fill--red { background: var(--color-danger-text); }

.ad-preview__char-count {
  font-size: var(--text-2xs);
  color: var(--color-slate-400);
  text-align: right;
  margin-top: 2px;
  font-family: var(--font-mono);
}

.ad-preview__char-count--warning { color: var(--color-warning-text); }
.ad-preview__char-count--over { color: var(--color-danger-text); }

/* SERP Preview */
.ad-preview__serp {
  position: sticky;
  top: 6rem;
}

@media (max-width: 1023px) {
  .ad-preview__serp {
    position: static;
  }
}

.ad-preview__serp-card {
  border: 1px solid var(--color-slate-200);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  padding: var(--space-5);
  overflow: hidden;
}

.ad-preview__serp-header {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-slate-500);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-slate-200);
}

.ad-preview__serp-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: var(--weight-bold);
  color: var(--color-slate-800);
  background: var(--color-slate-100);
  padding: 1px 5px;
  border-radius: 3px;
  margin-bottom: var(--space-2);
  letter-spacing: 0;
  text-transform: none;
  font-family: Arial, sans-serif;
}

/* Google SERP simulation — external Google UI colors, intentionally not tokenized */
.ad-preview__serp-url {
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: #202124;
  margin-bottom: 2px;
  word-break: break-all;
}

.ad-preview__serp-url-domain {
  color: #202124;
}

.ad-preview__serp-url-path {
  color: #5f6368;
}

.ad-preview__serp-headline {
  font-family: Arial, sans-serif;
  font-size: 20px;
  line-height: 1.3;
  color: #1a0dab;
  margin-bottom: 4px;
  cursor: pointer;
  word-break: break-word;
}

.ad-preview__serp-headline:hover {
  text-decoration: underline;
}

.ad-preview__serp-description {
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 1.58;
  color: #4d5156;
  word-break: break-word;
}

.ad-preview__serp-empty {
  padding: var(--space-8) var(--space-4);
  text-align: center;
  color: var(--color-slate-400);
  font-size: var(--text-sm);
}

.ad-preview__field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

@media (max-width: 479px) {
  .ad-preview__field-row {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Keyword Match Type Visualizer — match-viz__ prefix
   ═══════════════════════════════════════════════════════════════ */

.match-viz__input-section {
  max-width: 36rem;
  margin-inline: auto;
  margin-bottom: var(--space-8);
}

.match-viz__columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

@media (max-width: 767px) {
  .match-viz__columns {
    grid-template-columns: 1fr;
  }
}

.match-viz__column {
  border: 1px solid var(--color-slate-200);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  overflow: hidden;
}

.match-viz__column-header {
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-slate-200);
  text-align: center;
}

.match-viz__column-title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-slate-800);
  margin-bottom: var(--space-1);
}

.match-viz__column-syntax {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-teal);
  background: var(--color-teal-light);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  display: inline-block;
}

.match-viz__column-reach {
  font-size: var(--text-xs);
  color: var(--color-slate-500);
  margin-top: var(--space-2);
}

.match-viz__column-body {
  padding: var(--space-4);
}

.match-viz__query-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.match-viz__query {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-slate-700);
  background: var(--color-slate-50);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
}

.match-viz__query--highlight {
  background: var(--color-teal-light);
  color: var(--color-teal);
  font-weight: var(--weight-medium);
}

.match-viz__empty {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  color: var(--color-slate-400);
  font-size: var(--text-sm);
}

/* ═══════════════════════════════════════════════════════════════
   Negative Keyword Builder — neg-builder__ prefix
   ═══════════════════════════════════════════════════════════════ */

.neg-builder__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: start;
}

@media (max-width: 1023px) {
  .neg-builder__layout {
    grid-template-columns: 1fr;
  }
}

.neg-builder__input-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.neg-builder__textarea {
  width: 100%;
  min-height: 300px;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  font-family: var(--font-mono);
  line-height: var(--leading-relaxed);
  border: 1px solid var(--color-slate-300);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-slate-800);
  resize: vertical;
  transition: border-color var(--duration-base) var(--ease-default),
              box-shadow var(--duration-base) var(--ease-default);
}

.neg-builder__textarea::placeholder {
  color: var(--color-slate-400);
}

.neg-builder__textarea:focus {
  outline: none;
  border-color: var(--color-teal);
  box-shadow: var(--shadow-focus);
}

.neg-builder__term-count {
  font-size: var(--text-xs);
  color: var(--color-slate-500);
}

.neg-builder__output-panel {
  position: sticky;
  top: 6rem;
}

@media (max-width: 1023px) {
  .neg-builder__output-panel {
    position: static;
  }
}

.neg-builder__categories {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.neg-builder__category {
  border: 1px solid var(--color-slate-200);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  overflow: hidden;
}

.neg-builder__category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-slate-100);
  background: var(--color-slate-50);
}

.neg-builder__category-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-slate-700);
}

.neg-builder__category-count {
  font-size: var(--text-xs);
  color: var(--color-slate-500);
}

.neg-builder__chips {
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.neg-builder__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-slate-700);
  background: var(--color-slate-100);
  border-radius: var(--radius-full);
  border: none;
  cursor: default;
}

.neg-builder__chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--color-slate-400);
  cursor: pointer;
  padding: 0;
  font-size: 14px;
  line-height: 1;
}

.neg-builder__chip-remove:hover {
  background: var(--color-slate-200);
  color: var(--color-slate-600);
}

.neg-builder__empty {
  padding: var(--space-4);
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-slate-400);
}

.neg-builder__actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* ═══════════════════════════════════════════════════════════════
   PPC Audit Scorecard — audit__ prefix
   ═══════════════════════════════════════════════════════════════ */

.audit__score-header {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  margin-bottom: var(--space-6);
}

.audit__donut {
  position: relative;
  width: 140px;
  height: 140px;
  margin: 0 auto var(--space-4);
}

.audit__donut svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.audit__donut-bg {
  fill: none;
  stroke: var(--color-slate-200);
  stroke-width: 8;
}

.audit__donut-fill {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dasharray 0.6s var(--ease-default);
}

.audit__donut-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.audit__donut-score {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-slate-800);
  line-height: 1;
}

.audit__donut-label {
  font-size: var(--text-xs);
  color: var(--color-slate-500);
}

.audit__grade {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
}

.audit__grade--a { color: var(--color-success-text); }
.audit__grade--b { color: var(--color-teal); }
.audit__grade--c { color: var(--color-warning-text); }
.audit__grade--d { color: var(--color-warning-deep); }
.audit__grade--f { color: var(--color-danger-text); }

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

.audit__category {
  border: 1px solid var(--color-slate-200);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  overflow: hidden;
}

.audit__category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-4);
  background: none;
  border: none;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
  user-select: none;
  transition: background var(--duration-base) var(--ease-default);
}

.audit__category-header:hover {
  background: var(--color-slate-50);
}

.audit__category-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.audit__category-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-slate-800);
}

.audit__category-progress {
  width: 60px;
  height: 6px;
  background: var(--color-slate-200);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.audit__category-progress-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--color-teal);
  transition: width 0.3s var(--ease-default);
}

.audit__category-score {
  font-size: var(--text-xs);
  color: var(--color-slate-500);
}

.audit__category-chevron {
  transition: transform var(--duration-base) var(--ease-default);
  color: var(--color-slate-400);
}

.audit__category--open .audit__category-chevron {
  transform: rotate(180deg);
}

.audit__checklist {
  padding: 0 var(--space-4) var(--space-4);
  display: none;
}

.audit__category--open .audit__checklist {
  display: block;
}

.audit__check-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-slate-100);
}

.audit__check-item:last-child {
  border-bottom: none;
}

.audit__checkbox {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--color-teal);
  cursor: pointer;
}

.audit__check-label {
  font-size: var(--text-sm);
  color: var(--color-slate-700);
  line-height: var(--leading-relaxed);
  cursor: pointer;
}

.audit__export-btn {
  margin-top: var(--space-4);
}

/* ═══════════════════════════════════════════════════════════════
   Diminishing Returns Calculator — dr-calc__ prefix
   ═══════════════════════════════════════════════════════════════ */

.dr-calc__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: start;
}

@media (max-width: 1023px) {
  .dr-calc__layout {
    grid-template-columns: 1fr;
  }
}

.dr-calc__canvas-wrapper {
  position: sticky;
  top: 6rem;
  border: 1px solid var(--color-slate-200);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  padding: var(--space-4);
  overflow: visible;
}

@media (max-width: 1023px) {
  .dr-calc__canvas-wrapper {
    position: static;
  }
}

.dr-calc__canvas {
  width: 100%;
  height: 320px;
  display: block;
}

.dr-calc__legend {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-slate-600);
}

.dr-calc__legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.dr-calc__legend-swatch {
  width: 12px;
  height: 3px;
  border-radius: 1px;
}

.dr-calc__legend-swatch--data { background: var(--color-teal); }
.dr-calc__legend-swatch--curve { background: var(--color-indigo); }
.dr-calc__legend-swatch--marginal { background: var(--color-danger-text); }

.dr-calc__insight {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-slate-50);
  border: 1px solid var(--color-slate-200);
  font-size: var(--text-sm);
  color: var(--color-slate-700);
}

/* ── Print ── */
@media print {
  .utm-builder__sticky-copy,
  .utm-builder__reset,
  .utm-builder__copy-btn,
  .utm-builder__share-btn,
  .calc-tool__reset,
  .calc-tool__mode-toggle,
  .calc-tool__add-row,
  .calc-tool__row-remove,
  .neg-builder__chip-remove,
  .audit__export-btn,
  .tool-cta { display: none; }
}