@charset "UTF-8";
/* ==========================================================================
   EasyCalculatorSmart — Calculator post skin (2026-09-23)

   Requested ONLY on calculator routes (header.php, beside calc-system.css)
   and every selector is scoped to body.is-calc — tool pages (is-tool) never
   download or match a byte of it, and they keep main.css §37 exactly.

   What it does:
   1. Orange calculator identity (--co-* scale) replacing the teal scale.
   2. A REAL light theme and a warm dark theme for calculators, instead of
      §37's navy-in-both-themes. The token block between the GENERATED
      markers comes from tools/gen-calc-skin-tokens.php — re-run it after
      changing main.css §1 or §37; do not hand-edit it.
   3. The logo pinned to its approved teal.
   4. The shell from the calculator-post reference: hero (big icon, title,
      intro) with the benefit strip beside it, the calculator beside a
      right panel (picture + Quick links), then article, FAQ, related
      calculators and the Explore banner — laid out by a grid on the page
      container, so no calculator's markup or engine moved.
   ========================================================================== */

/* ---- 1. Orange scale -------------------------------------------------- */
body.is-calc {
  --co-50:  #fff6ea;
  --co-100: #ffe9cc;
  --co-200: #fdd09a;
  --co-300: #fcb866;
  --co-400: #f9a23a;
  --co-500: #f28c1c;
  --co-600: #d97410;
  --co-700: #b3590b;
  --co-800: #8a440c;
  --co-900: #6b350b;
}

/* ---- GENERATED by tools/gen-calc-skin-tokens.php — do not hand-edit ---- */
:root body.is-post.is-calc {
  color-scheme: light;
  --bg: var(--ink-50);
  --surface-sunk: var(--ink-100);
  --surface: #ffffff;
  --surface-alt: #fbfcfd;
  --line: var(--ink-200);
  --line-strong: var(--ink-300);
  --text: var(--ink-900);
  --text-soft: var(--ink-700);
  --text-faint: #685d53;
  --accent: var(--co-600);
  --accent-hover: var(--co-700);
  --accent-strong: var(--co-700);
  --accent-soft: var(--co-50);
  --accent-line: var(--co-200);
  --on-accent: #ffffff;
  --focus: var(--co-500);
  --meter-from: var(--co-400);
  --meter-to: var(--co-600);
  --calc-accent: var(--co-600);
  --calc-strong: var(--co-700);
  --calc-soft: var(--co-50);
  --calc-line: var(--co-200);
  --on-calc: #ffffff;
  --tool-accent: var(--violet-600);
  --tool-accent-hover: var(--violet-700);
  --tool-strong: var(--violet-700);
  --tool-soft: var(--violet-50);
  --tool-soft-2: var(--violet-100);
  --tool-line: var(--violet-200);
  --tool-wash: var(--violet-50);
  --on-tool: #ffffff;
  --ok-bg: #e8f7ee;
  --warn-bg: #fdf4e3;
  --bad-bg: #fdecec;
  --info-bg: #eaf3fb;
  --hero-wash: var(--co-50);
  --toast-bg: var(--ink-900);
  --toast-fg: #ffffff;
  --brand-mark-bg: var(--brand-600);
  --brand-mark-fg: #ffffff;
  --tile-calc: linear-gradient(145deg, var(--co-500) 0%, var(--co-700) 100%);
  --tile-tool: linear-gradient(145deg, var(--violet-500) 0%, var(--violet-700) 100%);
  --glow-calc-soft: rgba(242, 140, 28, .10);
  --glow-tool-soft: rgba(116, 85, 231, .09);
  --glow-calc: 0 14px 34px -14px rgba(221, 116, 16, .50);
  --glow-tool: 0 14px 34px -14px rgba(95, 61, 204, .48);
  --grad-btn: linear-gradient(135deg, var(--co-600) 0%, var(--co-700) 100%);
  --grad-btn-calc: linear-gradient(135deg, var(--co-600) 0%, var(--co-700) 100%);
  --grad-btn-tool: linear-gradient(135deg, var(--violet-600) 0%, var(--violet-700) 100%);
  --grad-calc: linear-gradient(135deg, var(--co-500) 0%, var(--co-700) 100%);
  --grad-calc-soft: linear-gradient(135deg, var(--co-50) 0%, var(--co-100) 100%);
  --grad-tool: linear-gradient(135deg, var(--violet-500) 0%, var(--violet-700) 100%);
  --grad-tool-soft: linear-gradient(135deg, var(--violet-50) 0%, var(--violet-100) 100%);
  --mesh-1: rgba(242, 140, 28, .16);
  --mesh-2: rgba(116, 85, 231, .14);
  --mesh-3: rgba(249, 162, 58, .12);
  --shadow-sm: 0 1px 2px rgba(13, 17, 22, 0.06);
  --shadow-md: 0 2px 4px rgba(13, 17, 22, 0.05), 0 4px 12px rgba(13, 17, 22, 0.05);
  --shadow-lg: 0 8px 28px rgba(13, 17, 22, 0.10);
  --world-calc-bg: linear-gradient(140deg, #ffecd6 0%, #fffaf3 100%);
  --world-tool-bg: linear-gradient(140deg, #ebe6fd 0%, #f8f6fe 100%);
}

:root[data-theme="dark"] body.is-post.is-calc {
  color-scheme: dark;
  --bg: var(--ink-950);
  --surface-sunk: #1c1814;
  --surface: var(--ink-900);
  --surface-alt: #29231e;
  --line: #362f29;
  --line-strong: var(--ink-700);
  --text: var(--ink-100);
  --text-soft: var(--ink-300);
  --text-faint: var(--ink-400);
  --accent: var(--co-400);
  --accent-hover: var(--co-300);
  --accent-strong: var(--co-300);
  --accent-soft: #2e1f10;
  --accent-line: var(--co-800);
  --on-accent: #1b1006;
  --focus: var(--co-300);
  --meter-from: var(--co-500);
  --meter-to: var(--co-300);
  --calc-accent: var(--co-400);
  --calc-strong: var(--co-300);
  --calc-soft: #2e1f10;
  --calc-line: var(--co-800);
  --on-calc: #1b1006;
  --tool-accent: var(--violet-400);
  --tool-accent-hover: var(--violet-300);
  --tool-strong: var(--violet-300);
  --tool-soft: #1e1840;
  --tool-soft-2: #262052;
  --tool-line: var(--violet-800);
  --tool-wash: #1b1638;
  --on-tool: #120b2c;
  --ok-bg: #10281c;
  --warn-bg: #2a2110;
  --bad-bg: #2b1516;
  --info-bg: #10202e;
  --hero-wash: #2e1f10;
  --toast-bg: var(--ink-100);
  --toast-fg: var(--ink-950);
  --brand-mark-bg: var(--brand-400);
  --brand-mark-fg: #06201f;
  --tile-calc: linear-gradient(145deg, var(--co-500) 0%, var(--co-800) 100%);
  --tile-tool: linear-gradient(145deg, var(--violet-500) 0%, var(--violet-800) 100%);
  --glow-calc-soft: rgba(249, 162, 58, .11);
  --glow-tool-soft: rgba(143, 120, 240, .11);
  --glow-calc: 0 16px 40px -14px rgba(249, 162, 58, .40);
  --glow-tool: 0 16px 40px -14px rgba(143, 120, 240, .38);
  --grad-btn: linear-gradient(135deg, var(--co-300) 0%, var(--co-500) 100%);
  --grad-btn-calc: linear-gradient(135deg, var(--co-300) 0%, var(--co-500) 100%);
  --grad-btn-tool: linear-gradient(135deg, var(--violet-300) 0%, var(--violet-400) 100%);
  --grad-calc: linear-gradient(135deg, var(--co-400) 0%, var(--co-600) 100%);
  --grad-calc-soft: linear-gradient(135deg, #2e1f10 0%, #251909 100%);
  --grad-tool: linear-gradient(135deg, var(--violet-400) 0%, var(--violet-600) 100%);
  --grad-tool-soft: linear-gradient(135deg, #221b47 0%, #1a1536 100%);
  --mesh-1: rgba(249, 162, 58, .20);
  --mesh-2: rgba(143, 120, 240, .18);
  --mesh-3: rgba(242, 140, 28, .16);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, .38), 0 4px 14px rgba(0, 0, 0, .34);
  --shadow-lg: 0 10px 34px rgba(0, 0, 0, .50);
  --world-calc-bg: linear-gradient(140deg, #3a2611 0%, #1d2320 100%);
  --world-tool-bg: linear-gradient(140deg, #2b2253 0%, #221d27 100%);
}
/* ---- END GENERATED ---- */

/* Tokens §37 sets that §1 has no equivalent for. */
:root body.is-post.is-calc {
  --post-hover-bg:   var(--co-50);
  --post-hover-fg:   var(--co-800);
  --post-hover-line: var(--co-200);
  --on-accent: #1b1006;
  --on-calc:   #1b1006;
}
:root[data-theme="dark"] body.is-post.is-calc {
  --post-hover-bg:   #2e1f10;
  --post-hover-fg:   #fcc56b;
  --post-hover-line: #5a3a14;
  --bg:            #0e0a07;
  --surface-sunk:  #130e0a;
  --surface:       #18120d;
  --surface-alt:   #211912;
  --line:          #34281d;
  --line-strong:   #4a3a2b;
}

/* The calculator-family second hue was tuned for a dark card only; in the
   light theme it follows the page's orange so nothing reads as a dark chip
   on white. */
:root:not([data-theme="dark"]) body.is-post.is-calc {
  --cs-accent-2:      var(--co-600);
  --cs-accent-2-soft: var(--co-50);
  --cs-accent-2-line: var(--co-200);
}

/* ---- 3. The logo stays exactly the approved teal ---------------------- */
body.is-calc .brand-mark {
  background-color: var(--brand-600);
  background-image: linear-gradient(145deg, var(--brand-500) 0%, var(--brand-700) 100%);
}
:root[data-theme="dark"] body.is-calc .brand-mark {
  background-image: linear-gradient(145deg, var(--brand-500) 0%, var(--brand-800) 100%);
}
body.is-calc .brand-name em { color: var(--brand-600); }
:root[data-theme="dark"] body.is-calc .brand-name em { color: var(--brand-400); }

/* ---- 4. Shell -------------------------------------------------------- */

/* The page container becomes a grid. DOM order is head, strip, aside,
   calculator section, article, related, explore; `order` puts the aside
   after the calculator in the single-column (phone) layout. */
body.is-calc main > .container:has(> .calc-head) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--s5);
  align-items: start;
}
body.is-calc main > .container:has(> .calc-head) > * { order: 5; min-inline-size: 0; }
body.is-calc main > .container > .calc-head { order: 1; }
body.is-calc main > .container > .cs-strip { order: 2; }
body.is-calc main > .container > .calc-head ~ section:first-of-type { order: 3; }
body.is-calc main > .container > .cs-aside { order: 4; }

@media (min-width: 1180px) {
  body.is-calc:not(.calc-height-comparison):not(.calc-blox-fruits-calculator):not(.calc-grow-a-garden-calculator):not(.calc-grow-garden-calculator):not(.calc-zeros-calculator) main > .container:has(> .calc-head) {
    grid-template-columns: minmax(0, 1fr) 21rem;
  }
  body.is-calc:not(.calc-height-comparison):not(.calc-blox-fruits-calculator):not(.calc-grow-a-garden-calculator):not(.calc-grow-garden-calculator):not(.calc-zeros-calculator) main > .container:has(> .calc-head) > * {
    grid-column: 1 / -1;
  }
  body.is-calc:not(.calc-height-comparison):not(.calc-blox-fruits-calculator):not(.calc-grow-a-garden-calculator):not(.calc-grow-garden-calculator):not(.calc-zeros-calculator) main > .container > .calc-head { grid-column: 1; grid-row: 1; }
  body.is-calc:not(.calc-height-comparison):not(.calc-blox-fruits-calculator):not(.calc-grow-a-garden-calculator):not(.calc-grow-garden-calculator):not(.calc-zeros-calculator) main > .container > .cs-strip { grid-column: 2; grid-row: 1; align-self: center; }
  body.is-calc:not(.calc-height-comparison):not(.calc-blox-fruits-calculator):not(.calc-grow-a-garden-calculator):not(.calc-grow-garden-calculator):not(.calc-zeros-calculator) main > .container > .calc-head ~ section:first-of-type { grid-column: 1; grid-row: 2; }
  body.is-calc:not(.calc-height-comparison):not(.calc-blox-fruits-calculator):not(.calc-grow-a-garden-calculator):not(.calc-grow-garden-calculator):not(.calc-zeros-calculator) main > .container > .cs-aside { grid-column: 2; grid-row: 2; position: sticky; inset-block-start: calc(var(--header-h) + 1rem); }
}

/* Hero */
body.is-calc .calc-head {
  display: flex;
  align-items: center;
  gap: var(--s5);
  margin-block: var(--s4) var(--s5);
}
body.is-calc .calc-head-icon {
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: 5.25rem;
  block-size: 5.25rem;
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(145deg, var(--co-400) 0%, var(--co-600) 100%);
  box-shadow: 0 16px 34px -16px var(--co-600), inset 0 1px 0 rgba(255, 255, 255, .35);
}
body.is-calc .calc-head-icon svg { inline-size: 2.6rem; block-size: 2.6rem; }
body.is-calc .calc-head h1 {
  margin: 0;
  font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.85rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
body.is-calc .calc-head .lede { margin: .45rem 0 0; max-inline-size: 62ch; color: var(--text-soft); }

/* Benefit strip */
body.is-calc .cs-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin: 0 0 var(--s5);
  padding: var(--s3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}
body.is-calc .cs-strip li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  padding: .35rem .25rem;
  text-align: center;
  min-inline-size: 0;
}
body.is-calc .cs-strip li + li { border-inline-start: 1px solid var(--line); }
body.is-calc .cs-strip-icon { display: inline-flex; color: var(--co-500); }
body.is-calc .cs-strip-icon svg { inline-size: 1.6rem; block-size: 1.6rem; }
body.is-calc .cs-strip strong { display: block; font-size: .78rem; line-height: 1.2; color: var(--text); }
body.is-calc .cs-strip small { display: block; font-size: .68rem; line-height: 1.25; color: var(--text-faint); }

/* The calculator: the page's focus, as one card. */
body.is-calc main > .container > .calc-head ~ section:first-of-type {
  padding: var(--s5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-md);
  margin-block-end: var(--s5);
}

/* Primary action: solid orange, dark text, as in the reference. */
body.is-calc .btn-primary,
body.is-calc button[type="submit"].btn {
  color: #1b1006;
  background: linear-gradient(135deg, var(--co-300) 0%, var(--co-500) 100%);
  border-color: transparent;
  font-weight: 700;
}
body.is-calc .btn-primary:hover,
body.is-calc button[type="submit"].btn:hover { color: #1b1006; filter: brightness(1.05); }

/* Result: the strongest block after the inputs. */
body.is-calc .result-primary .result-value {
  font-size: clamp(1.9rem, 1.3rem + 2vw, 2.7rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--co-600);
}
:root[data-theme="dark"] body.is-calc .result-primary .result-value { color: var(--co-300); }

/* Right panel */
body.is-calc .cs-aside { display: grid; gap: var(--s4); margin-block-end: var(--s5); }
body.is-calc .cs-art {
  position: relative;
  display: grid;
  place-items: center;
  min-block-size: 12.5rem;
  border-radius: 20px;
  border: 1px solid var(--line);
  overflow: hidden;
  background:
    radial-gradient(14rem 10rem at 70% 45%, color-mix(in srgb, var(--co-500) 30%, transparent), transparent 70%),
    var(--surface);
}
body.is-calc .cs-art-main {
  display: inline-grid;
  place-items: center;
  inline-size: 6.5rem;
  block-size: 6.5rem;
  border-radius: 26px;
  color: #fff;
  background: linear-gradient(145deg, var(--co-300), var(--co-600));
  transform: rotate(-8deg);
  box-shadow: 0 22px 40px -18px var(--co-700), inset 0 1px 0 rgba(255, 255, 255, .4);
}
body.is-calc .cs-art-main svg { inline-size: 3.2rem; block-size: 3.2rem; }
body.is-calc .cs-art-chip {
  position: absolute;
  display: inline-grid;
  place-items: center;
  inline-size: 2.6rem;
  block-size: 2.6rem;
  border-radius: 12px;
  color: var(--co-600);
  background: var(--surface-alt);
  border: 1px solid var(--line);
}
body.is-calc .cs-art-chip svg { inline-size: 1.2rem; block-size: 1.2rem; }
body.is-calc .cs-art-chip-a { inset-block-start: 1rem; inset-inline-start: 1.2rem; transform: rotate(-10deg); }
body.is-calc .cs-art-chip-b { inset-block-start: 1.4rem; inset-inline-end: 1.3rem; transform: rotate(8deg); }
body.is-calc .cs-art-chip-c { inset-block-end: 1.1rem; inset-inline-end: 2.4rem; }

body.is-calc .cs-quick {
  padding: var(--s4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
}
body.is-calc .cs-quick[hidden] { display: none; }
body.is-calc .cs-quick-title { display: flex; align-items: center; gap: .5rem; margin: 0 0 .5rem; font-size: 1.05rem; font-weight: 800; }
body.is-calc .cs-quick-title svg { inline-size: 1.2rem; block-size: 1.2rem; color: var(--co-500); }
/* The moved contents card sheds its own card chrome and its heading. */
body.is-calc .cs-quick .toc-card { margin: 0; padding: 0; background: none; border: 0; box-shadow: none; position: static; }
body.is-calc .cs-quick .toc-card > summary { display: none; }
body.is-calc .cs-quick .toc-nav { max-block-size: 22rem; overflow-y: auto; }
body.is-calc .cs-quick .toc-nav a { display: block; padding: .4rem .45rem; border-radius: 8px; font-size: .88rem; color: var(--text-soft); text-decoration: none; }
body.is-calc .cs-quick .toc-nav a:hover,
body.is-calc .cs-quick .toc-nav a[aria-current="true"],
body.is-calc .cs-quick .toc-nav a[aria-current="location"] { color: var(--text); background: color-mix(in srgb, var(--co-500) 12%, transparent); }

/* With its rail moved out, the article is one comfortable column. */
body.is-calc article.cs-rail-moved.has-rail { display: block; }
body.is-calc article.cs-rail-moved .prose { max-inline-size: 78ch; margin-inline: auto; }

/* Article headings get the calculator accent. */
body.is-calc article .prose > h2 {
  padding-inline-start: .85rem;
  border-inline-start: 4px solid var(--co-500);
}

/* Related calculators: reference-style cards. */
body.is-calc .section-tight .tool-card {
  border-radius: 16px;
}
body.is-calc .section-tight .tool-card-icon {
  background-image: linear-gradient(145deg, var(--co-400), var(--co-600));
  color: #fff;
}
body.is-calc .section-tight .grid-3 > :nth-child(5n+2) .tool-card-icon { background-image: linear-gradient(145deg, #60a5fa, #2563eb); }
body.is-calc .section-tight .grid-3 > :nth-child(5n+3) .tool-card-icon { background-image: linear-gradient(145deg, #34d399, #059669); }
body.is-calc .section-tight .grid-3 > :nth-child(5n+4) .tool-card-icon { background-image: linear-gradient(145deg, #c084fc, #9333ea); }
body.is-calc .section-tight .grid-3 > :nth-child(5n+5) .tool-card-icon { background-image: linear-gradient(145deg, #fbbf24, #d97706); }

/* Explore more calculators */
body.is-calc .cs-explore {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s5);
  margin-block: var(--s6) var(--s7);
  padding: var(--s5) var(--s6);
  border: 1px solid color-mix(in srgb, var(--co-500) 35%, var(--line));
  border-radius: 20px;
  background:
    radial-gradient(30rem 12rem at 0% 0%, color-mix(in srgb, var(--co-500) 22%, transparent), transparent 70%),
    var(--surface);
}
body.is-calc .cs-explore-icon { display: inline-flex; color: var(--co-500); }
body.is-calc .cs-explore-icon svg { inline-size: 3rem; block-size: 3rem; }
body.is-calc .cs-explore h2 { margin: 0; font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem); font-weight: 800; }
body.is-calc .cs-explore p { margin: .3rem 0 0; color: var(--text-soft); }
body.is-calc .cs-explore-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-block-size: 48px;
  padding: .6rem 1.4rem;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  color: #1b1006;
  background: linear-gradient(135deg, var(--co-300), var(--co-500));
  border-radius: 12px;
}
body.is-calc .cs-explore-btn svg { inline-size: 1rem; block-size: 1rem; }
body.is-calc .cs-explore-btn:hover { color: #1b1006; filter: brightness(1.05); }
body.is-calc .cs-explore-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
[dir="rtl"] body.is-calc .cs-explore-btn svg { scale: -1 1; }

/* ---- Phones ---------------------------------------------------------- */
@media (max-width: 1179px) {
  body.is-calc .cs-art { display: none; }
}
@media (max-width: 640px) {
  body.is-calc .calc-head { gap: var(--s3); align-items: flex-start; }
  body.is-calc .calc-head-icon { inline-size: 4rem; block-size: 4rem; border-radius: 18px; }
  body.is-calc .calc-head-icon svg { inline-size: 2rem; block-size: 2rem; }
  body.is-calc .calc-head h1 { font-size: 1.75rem; }
  body.is-calc .calc-head .lede { font-size: .92rem; }
  body.is-calc .cs-strip { padding: .5rem .25rem; }
  body.is-calc .cs-strip strong { font-size: .72rem; }
  body.is-calc .cs-strip small { font-size: .64rem; }
  body.is-calc main > .container > .calc-head ~ section:first-of-type { padding: var(--s4) var(--s3); border-radius: 16px; }
  body.is-calc .cs-explore { grid-template-columns: minmax(0, 1fr); padding: var(--s4); text-align: start; gap: var(--s3); }
  body.is-calc .cs-explore-btn { justify-content: center; }
}
@media (max-width: 359px) {
  body.is-calc .cs-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.is-calc .cs-strip li:nth-child(3) { border-inline-start: 0; }
}

@media print {
  body.is-calc .cs-strip, body.is-calc .cs-aside, body.is-calc .cs-explore { display: none !important; }
}

/* The calculator card fills its column (calc-system/§35 cap it for the old
   single-column page). */
body.is-calc main > .container > .calc-head ~ section:first-of-type {
  max-inline-size: none;
  margin-inline: 0;
  inline-size: auto;
}

/* Every shell child stays inside its grid column (the old rail layout
   gave the article an explicit width). */
body.is-calc main > .container:has(> .calc-head) > * { max-inline-size: 100%; }
body.is-calc article.cs-rail-moved { inline-size: auto; width: auto; margin-inline: 0; }

/* An article table not wrapped in .table-wrap scrolls inside its own box
   on a phone instead of widening the page. */
body.is-calc article .prose table:not(.table-wrap table) {
  display: block;
  max-inline-size: 100%;
  overflow-x: auto;
}