/* Seller calculator shared responsive contract.
   Gate-approved mobile overflow fix fan-out: CSS-only, scoped by body.seller-canon-page. */

body.seller-canon-page,
body.seller-canon-page * {
  box-sizing: border-box;
}

body.seller-canon-page {
  overflow-x: hidden;
}

body.seller-canon-page img,
body.seller-canon-page svg,
body.seller-canon-page canvas,
body.seller-canon-page iframe,
body.seller-canon-page table {
  max-width: 100%;
}

body.seller-canon-page .wrap,
body.seller-canon-page .calculator-layout,
body.seller-canon-page .calculator-card,
body.seller-canon-page .results-card,
body.seller-canon-page .hybrid-wrap,
body.seller-canon-page .hybrid-panel,
body.seller-canon-page .hybrid-result,
body.seller-canon-page .input-grid,
body.seller-canon-page .hybrid-input-grid,
body.seller-canon-page .metric-grid,
body.seller-canon-page .result-metric-grid,
body.seller-canon-page .more-options {
  min-width: 0;
  max-width: 100%;
}

body.seller-canon-page input,
body.seller-canon-page select,
body.seller-canon-page textarea,
body.seller-canon-page button {
  max-width: 100%;
}

body.seller-canon-page .result-primary,
body.seller-canon-page .result-label,
body.seller-canon-page .result-kpi-margin > strong,
body.seller-canon-page .metric strong,
body.seller-canon-page .metric span {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere;
}

@media (max-width: 600px) {
  body.seller-canon-page .wrap {
    width: 100%;
    max-width: 100%;
  }

  body.seller-canon-page .hero,
  body.seller-canon-page .hero-copy,
  body.seller-canon-page h1,
  body.seller-canon-page .lede {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  body.seller-canon-page .calculator-layout,
  body.seller-canon-page .hybrid-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100%;
    max-width: 100%;
    gap: 18px;
  }

  body.seller-canon-page .calculator-card,
  body.seller-canon-page .results-card,
  body.seller-canon-page .hybrid-panel,
  body.seller-canon-page .hybrid-result {
    position: static !important;
    width: 100%;
    max-width: 100%;
    padding-inline: min(18px, 5vw);
  }

  body.seller-canon-page .input-grid,
  body.seller-canon-page .hybrid-input-grid,
  body.seller-canon-page .metric-grid,
  body.seller-canon-page .result-metric-grid,
  body.seller-canon-page .more-options-grid,
  body.seller-canon-page .example-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100%;
    max-width: 100%;
  }

  body.seller-canon-page .field,
  body.seller-canon-page .toggle-field,
  body.seller-canon-page .metric,
  body.seller-canon-page .result-math-card,
  body.seller-canon-page .summary-row {
    min-width: 0;
    max-width: 100%;
  }

  body.seller-canon-page .result-primary {
    font-size: clamp(32px, 12vw, 44px);
    line-height: 1.05;
  }

  body.seller-canon-page .more-options {
    overflow-x: hidden;
  }
}

/* ── Gamer mode canon — shared by every page that links this file
   (Etsy, PayPal, Combined Seller, Shopify, Poshmark). Matches the
   --dts-* token values and violet glow treatment defined in
   DESIGN-SYSTEM.md / first established on the Mercari calculator. ── */
:root[data-theme="gamer"] {
  --dts-primary: #8B5CF6;
  --dts-primary-soft: rgba(139,92,246,0.15);
  --dts-bg: #09090F;
  --dts-surface: #0F0F1C;
  --dts-surface-tint: #14142A;
  --dts-border: #28284A;
  --dts-text: #F1F5F9;
  --dts-text-body: #CBD5E1;
  --dts-text-muted: #94A3B8;
  --dts-success: #4ADE80;
  --dts-success-soft: rgba(74,222,128,0.12);
  --dts-info-soft: rgba(139,92,246,0.15);
  --dts-info-text: #C4B5FD;
}

:root[data-theme="gamer"] body.seller-canon-page .results-card,
:root[data-theme="gamer"] body.seller-canon-page .hybrid-result {
  border-color: rgba(139,92,246,0.5);
  box-shadow:
    0 0 0 1px rgba(139,92,246,0.4),
    0 0 20px rgba(139,92,246,0.3),
    0 0 60px rgba(139,92,246,0.15),
    0 0 120px rgba(139,92,246,0.07);
}

:root[data-theme="gamer"] body.seller-canon-page .calculator-card,
:root[data-theme="gamer"] body.seller-canon-page .hybrid-panel {
  border-color: rgba(139,92,246,0.2);
}

:root[data-theme="gamer"] body.seller-canon-page .faq details[open] {
  border-color: rgba(139,92,246,0.5);
  box-shadow: 0 0 0 1px rgba(139,92,246,0.4), 0 0 20px rgba(139,92,246,0.3), 0 0 60px rgba(139,92,246,0.15), 0 0 120px rgba(139,92,246,0.07);
}

:root[data-theme="gamer"] body.seller-canon-page .field input:focus,
:root[data-theme="gamer"] body.seller-canon-page .field select:focus,
:root[data-theme="gamer"] body.seller-canon-page .calculator-field:focus {
  border-color: rgba(139,92,246,0.5) !important;
  box-shadow: 0 0 0 1px rgba(139,92,246,0.4), 0 0 20px rgba(139,92,246,0.3), 0 0 60px rgba(139,92,246,0.15) !important;
  outline-color: rgba(139,92,246,0.5) !important;
}

:root[data-theme="gamer"] body.seller-canon-page .related-grid a:hover {
  border-color: rgba(139,92,246,0.5);
  box-shadow: 0 0 0 1px rgba(139,92,246,0.4), 0 0 20px rgba(139,92,246,0.3), 0 0 60px rgba(139,92,246,0.15), 0 0 120px rgba(139,92,246,0.07);
}

:root[data-theme="gamer"] body.seller-canon-page .formula-line {
  background: rgba(74,222,128,0.1);
  color: #86EFAC;
  border-color: rgba(74,222,128,0.3);
}

:root[data-theme="gamer"] body.seller-canon-page .form-note {
  background: var(--dts-surface-tint);
  color: var(--dts-text-body);
}