/* ============================================================
   calc-v2.css — Sizely v2 design override for the imported native
   calculator engine (public/calc/calc.css).

   Loaded AFTER calc.css in CalculatorApp.tsx. Every selector is scoped
   under .sizely-calc (doubled — `.sizely-calc.sizely-calc` — so these
   rules win on specificity regardless of stylesheet load order, without
   !important) so nothing here can leak into the rest of the site.

   Remaps the engine's two off-system tells to the v2 language:
     • typeface  "Inter"            → var(--font-sans)  (Hanken Grotesk)
     • engine blue #336BFF/#4f7dfd/#2e65fc → var(--color-brand)/-brand-press

   Deliberately NOT changed (documented, not a silent cap):
     • the engine's neutral gray text scale (#374151/#6b7280/#111827…) —
       a neutral scale reads fine alongside v2 and remapping every gray
       across the generated file is high-risk for contrast.
     • the dense-keypad 6px radii — adjacent inputs/buttons seam their
       corners at 6px; re-radiusing to --radius-md breaks the joined grid.
     • dark-mode (.sizely-calc.dark) variants — the embed ships light.
     • the soft active-toggle backdrop (.button-switcher--active::after #EEF2FF)
       and the single-embed `--separator-sky` accent (#4f7dfd) — negligible.
   ============================================================ */

/* --- Typeface: Hanken Grotesk, not Inter --- */
.sizely-calc.sizely-calc * {
  font-family: var(--font-sans);
}

/* --- Brand blue: primary + copy action buttons --- */
.sizely-calc.sizely-calc .button--primary,
.sizely-calc.sizely-calc .button--copy {
  background-color: var(--color-brand);
  border-color: var(--color-brand);
}
.sizely-calc.sizely-calc .button--primary:hover:not(:disabled):not(:active),
.sizely-calc.sizely-calc .button--copy:hover:not(:disabled):not(:active) {
  background-color: var(--color-brand-press);
}
.sizely-calc.sizely-calc .button--primary:active,
.sizely-calc.sizely-calc .button--copy:active {
  background-color: var(--color-brand-press);
  border-color: var(--color-brand-press);
}

/* --- Keypad "indigo" accent buttons (basic + scientific calculators) --- */
.sizely-calc.sizely-calc .calculator-content--basic button:not(.button-switcher).indigo,
.sizely-calc.sizely-calc .calculator-content--scientific button:not(.button-switcher).indigo {
  background-color: var(--color-brand);
}
.sizely-calc.sizely-calc .calculator-content--basic button:not(.button-switcher).indigo:hover,
.sizely-calc.sizely-calc .calculator-content--scientific button:not(.button-switcher).indigo:hover {
  background-color: var(--color-brand-press);
}

/* --- Selected / active control borders --- */
.sizely-calc.sizely-calc .calculator-content--basic button:not(.button-switcher).basic-button--active,
.sizely-calc.sizely-calc .calculator-content--scientific button:not(.button-switcher).basic-button--active {
  border-color: var(--color-brand);
}

/* --- Toggle switch (checked state) --- */
.sizely-calc.sizely-calc .checkbox__input:checked + .checkbox__box {
  background-color: var(--color-brand);
}

/* --- Blue accent titles / labels --- */
.sizely-calc.sizely-calc .input__title--work-hours-calculator {
  color: var(--color-brand);
}

/* --- Unit toggle (button-switcher) active state: icon stroke + fill + label.
   Always on-screen on converter calculators, so this is the prominent one. --- */
.sizely-calc.sizely-calc .button-switcher--active path[stroke] {
  stroke: var(--color-brand);
}
.sizely-calc.sizely-calc .button-switcher--active path[fill] {
  fill: var(--color-brand);
}
.sizely-calc.sizely-calc .button-switcher--active .button-switcher__text {
  color: var(--color-brand);
}

/* --- Share-modal active tab (interaction-gated; opens on Share) --- */
.sizely-calc.sizely-calc .modal-share__button--active {
  background-color: var(--color-brand-soft);
  color: var(--color-brand);
}

/* ============================================================
   v2 SOFT-CARD PASS (2026-06-16)
   Brings the widget in line with the approved design-review mockup
   (public/design-review.html → "Tip calculator" card): soft rounded
   cards, rounded input rows, one consistent Sizely blue. This reverses
   the conservative "keep 6px radii" stance noted at the top of this
   file — that call predates the mockup; the mockup now asks for soft
   cards. The joined-input seams and the dense keypad (basic / scientific)
   are still preserved (only outer ends round).

   Radius bumps are gated behind min-width:641px so the engine's mobile
   full-bleed (it resets border-radius:0 at <=640px) survives — without
   the gate, these doubled-class selectors out-specify the engine's
   in-media reset and would re-round the mobile layout.
   ============================================================ */

@media (min-width: 641px) {
  /* Panel cards: left input panel (.calculator-setting) + right result
     card (.calculator-result). .calculator-setting has no overflow clip,
     so its visible rounding is the inner .calculator-content corners —
     bump both to keep them concentric. */
  .sizely-calc.sizely-calc .calculator-setting,
  .sizely-calc.sizely-calc .calculator-result {
    border-radius: 16px;
  }
  .sizely-calc.sizely-calc .calculator-content:first-child {
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
  }
  .sizely-calc.sizely-calc .calculator-content:last-child,
  .sizely-calc.sizely-calc .calculator-content--scientific,
  .sizely-calc.sizely-calc .calculator-content--basic,
  .sizely-calc.sizely-calc .calculator-content--footer {
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
  }
  /* Result table is clipped by .calculator-result overflow:hidden, but
     round its leading corners too so it holds if that ever changes. */
  .sizely-calc.sizely-calc .result-table__wrapper:first-child table {
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
  }

  /* Input rows: round only the OUTER ends of each input group; the
     internal seams between joined fields stay square (the engine's
     joined grid). The ::after border overlay must match the field. */
  .sizely-calc.sizely-calc .input:first-child .input-field,
  .sizely-calc.sizely-calc .input:first-child .input-field::after,
  .sizely-calc.sizely-calc .input:first-child .button-switcher,
  .sizely-calc.sizely-calc .input:first-child .button-switcher::after {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
  }
  .sizely-calc.sizely-calc .input:last-child .input-field,
  .sizely-calc.sizely-calc .input:last-child .input-field::after,
  .sizely-calc.sizely-calc .input:last-child .button-switcher,
  .sizely-calc.sizely-calc .input:last-child .button-switcher::after {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
  }

  /* Standalone action buttons only. The dense keypad is styled via
     .calculator-content--basic/--scientific button and intentionally
     stays at 6px so adjacent keys keep seaming. */
  .sizely-calc.sizely-calc .button--primary,
  .sizely-calc.sizely-calc .button--copy,
  .sizely-calc.sizely-calc .button--secondary,
  .sizely-calc.sizely-calc .button--white,
  .sizely-calc.sizely-calc .button--about {
    border-radius: 10px;
  }
}

/* --- Finish the brand-blue remap: engine #336BFF text accents the first
   pass skipped, now unified to Sizely blue (--color-brand #265ff7). --- */
.sizely-calc.sizely-calc .calculator-content-head__title,
.sizely-calc.sizely-calc .result-table th.indigo,
.sizely-calc.sizely-calc .table-cell--only-title {
  color: var(--color-brand);
}

/* Input focus ring: engine used an off-brand indigo (#A5B4FC); use
   Sizely blue so a focused field reads on-brand. */
.sizely-calc.sizely-calc .input-field:focus-within::after {
  border-color: var(--color-brand);
}

/* --- Single-card elevation. The widget already sits in the page card
   (CalculatorDetailPage: rounded-card border bg-paper shadow-card), so the
   engine's own nested inner-card shadows had no room to dissipate inside
   that ~24px-padded, bordered box and read as a clipped/cramped shadow.
   Drop them: the white page card is the only elevation; the inner panels
   are defined by their tint + radius alone (the design-review single-card
   look). Applies on every breakpoint — the engine already kills the
   .calculator-setting shadow at <=640px, this just extends it to the
   result card and to desktop. --- */
.sizely-calc.sizely-calc .calculator-setting,
.sizely-calc.sizely-calc .calculator-result {
  box-shadow: none;
}

/* --- Symmetric top/bottom breathing room. The engine's result column
   (.calculator-main) adds a bottom-only pad (40px, 56px >=768px) with no
   top match, so the gap UNDER the widget was ~3x the gap above it inside
   the page card. Zero it so the card's own padding (p-5 / sm:p-6) sets
   both gaps equally. --- */
.sizely-calc.sizely-calc .calculator-main {
  padding-bottom: 0;
}

/* --- Chart legend swatches: keep them in lockstep with the vivid on-brand
   chart palette set in the per-calculator chart.js `colors` objects.
   The series colours: purple=brand blue, sky=dark navy (--color-ink, the
   near-black brand blue), yellow=vivid amber, teal=vivid teal. (The chart
   slices/lines themselves are recoloured in chart.js; these rules only
   repaint the matching <span> swatches in the legend.) --- */
.sizely-calc.sizely-calc .result-chart--purple {
  background-color: var(--color-brand);
}
.sizely-calc.sizely-calc .result-chart--sky {
  background-color: var(--color-ink);
}
.sizely-calc.sizely-calc .result-chart--yellow {
  background-color: #f59e0b;
}
.sizely-calc.sizely-calc .result-chart--teal {
  background-color: #14b8a6;
}

/* === INK CTA — functional in-widget action button (DECIDED, founder-approved) ===
   The calculator's action button (Calculate / Copy) is the ink/navy CTA, NOT
   brand blue, so the primary action is a distinct focal point amid the blue
   accents (links, toggles, chart, focus). This is the locked button system:
     • ink  = in-widget functional actions (Calculate, Copy) + selected toggle
              states in the size/shoe widgets (SizeFinder, ShoeSizeConverter)
     • blue = conversion / brand CTAs (Get started, Sign up), accents, AND the
              computed answer / result value (so the result still pops).
   Do NOT revert these to blue — see the design-system doc + project memory.
   Intentionally overrides the brand-blue button remap higher in this file
   (later rule, same specificity). */
.sizely-calc.sizely-calc .button--primary,
.sizely-calc.sizely-calc .button--copy {
  background-color: var(--color-ink);
  border-color: var(--color-ink);
}
.sizely-calc.sizely-calc .button--primary:hover:not(:disabled):not(:active),
.sizely-calc.sizely-calc .button--copy:hover:not(:disabled):not(:active) {
  background-color: #0d1422;
  border-color: #0d1422;
}
.sizely-calc.sizely-calc .button--primary:active,
.sizely-calc.sizely-calc .button--copy:active {
  background-color: #0d1422;
  border-color: #0d1422;
}

/* === A11Y: secondary-gray text contrast (Lighthouse color-contrast) ===
   The engine paints its secondary text with #6B7280 — the quick-set hint chips
   (.input-hints__hint, e.g. the "10 / 15 / 20" loan-term shortcuts) AND the
   small result labels (.result-text--small / --small-loan, e.g. "Total of N
   payments" + the #totalPayments / #totalInterest figures). On the engine's
   light panels (#f3f7fe / white) that gray lands at 4.44–4.49:1 — a hundredth
   under the 4.5:1 WCAG AA floor. Nudge to #666d7a (~4.8:1), the smallest darken
   that clears the floor with margin: visually indistinguishable from the
   original gray, but the audit passes. Targeted to the two failing tokens, so
   it does NOT reopen the "don't remap the whole neutral gray scale" decision
   noted at the top of this file. */
.sizely-calc.sizely-calc .input-hints__hint,
.sizely-calc.sizely-calc .result-text--small,
.sizely-calc.sizely-calc .result-text--small-loan {
  color: #666d7a;
}