/* =========================================================================
   Ego Eimi — tools.css
   Styles for interactive tool pages ONLY (loaded after inner.css, and only by
   /tools/* pages). Additive and scoped to .calc so it cannot affect any other
   page (none load this file). Reuses inner.css tokens (--hairline, --flame,
   --muted, --ink, --ink-soft, --faint, --font-mono, --nav-h) with fallbacks.

   Design: minimal, calm, left-aligned. Inputs on the left, one focal result
   on the right. No cards, no chrome — typography, whitespace, one flame.
   ========================================================================= */

.calc {
  --c-track: rgba(22, 20, 15, 0.10);
  display: block;
  max-width: 1000px;
  margin-top: clamp(26px, 4vh, 40px);
}

.calc__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 420px);
  gap: clamp(32px, 4.5vw, 68px);
  align-items: start;
}

/* ---------------------------------------------------------------------------
   INPUTS
   --------------------------------------------------------------------------- */
.calc__inputs { display: grid; gap: clamp(26px, 4vh, 38px); min-width: 0; }

.calc__row { display: grid; gap: 14px; }
.calc__rowhead { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; }
.calc__label { font-size: 16px; font-weight: 400; color: var(--ink, #16140F); line-height: 1.3; }

.calc__value {
  display: inline-flex; align-items: baseline; gap: 3px; flex: none;
  font-family: var(--font-mono, monospace); color: var(--flame-deep, #E85B1C);
}
.calc__cur { font-size: 18px; opacity: 0.8; }
.calc__unit { font-size: 13px; color: var(--faint, #726D61); }
.calc__num {
  -moz-appearance: textfield; appearance: textfield;
  width: 3ch; min-width: 2ch; max-width: 11ch; /* width is kept in sync by roi-calc.js */
  border: 0; background: transparent; padding: 0; margin: 0;
  font-family: inherit; font-size: 27px; font-weight: 400; letter-spacing: -0.01em;
  color: inherit; text-align: right;
}
.calc__num::-webkit-outer-spin-button,
.calc__num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc__num:focus-visible { outline: none; box-shadow: 0 2px 0 var(--flame, #FF7436); }

/* Custom range: flame fill behind the thumb via --p set by JS */
.calc__range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 5px; margin: 0; padding: 0;
  border-radius: 999px; cursor: pointer;
  background:
    linear-gradient(var(--flame, #FF7436), var(--flame, #FF7436)) 0 / var(--p, 12%) 100% no-repeat,
    var(--c-track);
}
.calc__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 2px solid var(--flame, #FF7436);
  box-shadow: 0 1px 3px rgba(22,20,15,0.2), 0 4px 12px -3px rgba(232,91,28,0.5);
  transition: transform 0.12s var(--ease-out, ease), box-shadow 0.2s ease;
}
.calc__range::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 2px solid var(--flame, #FF7436);
  box-shadow: 0 1px 3px rgba(22,20,15,0.2), 0 4px 12px -3px rgba(232,91,28,0.5);
}
.calc__range:hover::-webkit-slider-thumb { box-shadow: 0 0 0 6px rgba(255,116,54,0.14), 0 1px 3px rgba(22,20,15,0.2); }
.calc__range:active::-webkit-slider-thumb { transform: scale(1.12); }
html.rm .calc__range::-webkit-slider-thumb { transition: none; }

/* Confidence: revealed only when revenue > 0 */
.calc__conf { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; }
.calc__conf[hidden] { display: none; }
.calc__conflabel { font-family: var(--font-mono, monospace); font-size: 12px; letter-spacing: 0.02em; color: var(--muted, #545047); }
.calc__seg { display: inline-flex; gap: 6px; }
.calc__chip {
  font-family: var(--font-mono, monospace); font-size: 11.5px; letter-spacing: 0.02em;
  padding: 7px 13px; border: 1px solid var(--hairline, rgba(22,20,15,0.13)); border-radius: 999px;
  cursor: pointer; color: var(--muted, #545047); user-select: none;
  transition: border-color 0.18s, color 0.18s, background 0.18s;
}
.calc__chip:hover { border-color: rgba(22,20,15,0.3); }
.calc__chip input { position: absolute; opacity: 0; pointer-events: none; }
.calc__chip:has(input:checked) { border-color: var(--flame, #FF7436); color: var(--ink, #16140F); background: rgba(255,116,54,0.07); }
.calc__chip:focus-within { box-shadow: 0 0 0 3px rgba(255,116,54,0.25); }

/* ---------------------------------------------------------------------------
   RESULT — one focal estimate, on open paper
   --------------------------------------------------------------------------- */
.calc__out { position: sticky; top: calc(var(--nav-h, 68px) + 22px); align-self: start; min-width: 0; }
.calc__eyebrow {
  font-family: var(--font-mono, monospace); font-size: 11.5px; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--muted, #545047);
}
.calc__ex { color: var(--faint, #726D61); text-transform: none; letter-spacing: 0.03em; }
.calc__ex[hidden] { display: none; }

.calc__big {
  margin: 14px 0 0;
  font-size: clamp(38px, 4vw, 54px); font-weight: 300; letter-spacing: -0.035em; line-height: 1.02;
  color: var(--flame-deep, #E85B1C);
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.calc__meta {
  margin: 14px 0 0;
  font-family: var(--font-mono, monospace); font-size: 12.5px; letter-spacing: 0.01em; line-height: 1.55;
  color: var(--muted, #545047);
}

.calc__cta {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  margin-top: clamp(22px, 3vh, 30px);
  padding: 14px 22px; border: 1px solid var(--ink, #16140F); border-radius: 999px;
  background: var(--ink, #16140F); color: var(--paper, #FAF8F3);
  font-size: 15px; line-height: 1; letter-spacing: -0.01em;
  transition: background 0.2s ease, transform 0.2s var(--ease-out, ease);
}
/* In an actions row the row owns the spacing; drop the standalone top margin
   so the primary CTA lines up with the ghost button beside it. */
.qz__actions .calc__cta, .tk__actions .calc__cta { margin-top: 0; }
.calc__cta span { transition: transform 0.2s var(--ease-out, ease); }
.calc__cta:hover { background: #2B2721; }
.calc__cta:hover span { transform: translateX(3px); }
html.rm .calc__cta, html.rm .calc__cta span { transition: none; }

.calc__note {
  margin: 16px 0 0; max-width: 40ch;
  font-size: 13px; font-weight: 300; line-height: 1.55; color: var(--muted, #545047);
}
.calc__how { margin-top: 16px; }
.calc__how summary {
  font-family: var(--font-mono, monospace); font-size: 11.5px; letter-spacing: 0.03em;
  color: var(--flame-deep, #E85B1C); cursor: pointer; list-style: none;
}
.calc__how summary::-webkit-details-marker { display: none; }
.calc__how summary::before { content: "+ "; }
.calc__how[open] summary::before { content: "– "; }
.calc__how p { margin: 10px 0 0; max-width: 44ch; font-size: 12.5px; font-weight: 300; line-height: 1.6; color: var(--muted, #545047); }

/* Settle feel while recomputing */
.calc.is-updating .calc__big { opacity: 0.55; transition: opacity 0.18s ease; }
html.rm .calc.is-updating .calc__big { transition: none; }

/* ---------------------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------------------- */
@media (min-width: 901px) {
  .calc__out { border-left: 1px solid var(--hairline, rgba(22,20,15,0.13)); padding-left: clamp(36px, 4vw, 64px); }
}
@media (max-width: 900px) {
  .calc__grid { grid-template-columns: 1fr; gap: clamp(34px, 6vh, 44px); }
  .calc__out { position: static; }
  .calc__big { font-size: clamp(40px, 12vw, 54px); }
}

/* =========================================================================
   Shared tool kit — quizzes, estimators, checklists, scope builder.
   Scoped to .tk* so it touches no other page. Reuses inner.css tokens and the
   .calc visual language (flame, hairlines, mono labels, one focal result).
   Left-aligned, minimal, calm — same standard as the ROI calculator.
   ========================================================================= */
.tk { --c-track: rgba(22, 20, 15, 0.10); max-width: 760px; margin-top: clamp(26px, 4vh, 40px); }
.tk--wide { max-width: 1000px; }
.tk__intro { max-width: 60ch; margin: 0 0 clamp(22px, 3.5vh, 36px); font-weight: 300; font-size: clamp(15.5px, 1.2vw, 17px); line-height: 1.65; color: var(--muted, #545047); }

/* Question / step blocks */
.tk__q { padding: clamp(18px, 2.8vh, 26px) 0; border-top: 1px solid var(--hairline, rgba(22,20,15,0.13)); }
.tk__q:first-of-type { border-top: 0; padding-top: 0; }
.tk__qtop { display: flex; gap: 12px; align-items: baseline; margin-bottom: 13px; }
.tk__qn { font-family: var(--font-mono, monospace); font-size: 12px; color: var(--flame-deep, #E85B1C); flex: none; }
.tk__qt { font-size: clamp(16.5px, 1.5vw, 19px); font-weight: 400; color: var(--ink, #16140F); line-height: 1.35; }
.tk__qhint { display: block; margin-top: 7px; font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: 0.02em; color: var(--faint, #726D61); }

/* Options as pills (radio or checkbox) */
.tk__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.tk__opts--col { flex-direction: column; align-items: stretch; }
.tk__opt {
  position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 11px 16px; border: 1px solid var(--hairline, rgba(22,20,15,0.13)); border-radius: 12px;
  color: var(--ink-soft, #322E28); font-size: 15px; line-height: 1.35; user-select: none;
  transition: border-color 0.18s, background 0.18s, color 0.18s;
}
.tk__opt:hover { border-color: rgba(22,20,15,0.3); }
.tk__opt input { position: absolute; opacity: 0; pointer-events: none; }
.tk__opt:has(input:checked) { border-color: var(--flame, #FF7436); background: rgba(255,116,54,0.07); color: var(--ink, #16140F); }
.tk__opt:focus-within { box-shadow: 0 0 0 3px rgba(255,116,54,0.25); }
.tk__dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--ghost, #C9C4B8); flex: none; transition: 0.18s; }
.tk__opt:has(input:checked) .tk__dot { background: var(--flame, #FF7436); border-color: var(--flame, #FF7436); box-shadow: inset 0 0 0 2px #fff; }

/* Text fields (scope builder) */
.tk__field { display: grid; gap: 8px; padding: clamp(16px, 2.4vh, 22px) 0; border-top: 1px solid var(--hairline-soft, rgba(22,20,15,0.07)); }
.tk__field:first-of-type { border-top: 0; padding-top: 0; }
.tk__field label { font-size: 15.5px; font-weight: 400; color: var(--ink, #16140F); }
.tk__field .tk__qhint { margin-top: 0; }
.tk__input, .tk__textarea {
  width: 100%; font: inherit; font-size: 15px; color: var(--ink, #16140F);
  background: #fff; border: 1px solid var(--hairline, rgba(22,20,15,0.13)); border-radius: 10px; padding: 11px 13px;
}
.tk__textarea { min-height: 76px; resize: vertical; line-height: 1.55; }
.tk__input:focus-visible, .tk__textarea:focus-visible { outline: none; border-color: var(--flame, #FF7436); box-shadow: 0 0 0 3px rgba(255,116,54,0.2); }

/* Checklist (vetting) */
.tk__group { margin-top: clamp(22px, 3.2vh, 32px); }
.tk__group:first-of-type { margin-top: 0; }
.tk__grouph { font-family: var(--font-mono, monospace); font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--flame-deep, #E85B1C); margin-bottom: 4px; }
.tk__check { display: flex; gap: 13px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--hairline-soft, rgba(22,20,15,0.07)); cursor: pointer; }
.tk__check input { margin: 2px 0 0; accent-color: var(--flame, #FF7436); width: 17px; height: 17px; flex: none; }
.tk__check span { font-size: 15.5px; font-weight: 300; color: var(--ink-soft, #322E28); line-height: 1.5; }
.tk__check:has(input:checked) span { color: var(--faint, #726D61); }

/* Result panel — one focal verdict (reuses .calc aesthetics) */
.tk__result { margin-top: clamp(28px, 4vh, 46px); padding-top: clamp(24px, 3.5vh, 38px); border-top: 2px solid var(--ink, #16140F); }
.tk__rlabel { font-family: var(--font-mono, monospace); font-size: 11.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted, #545047); }
.tk__verdict { margin: 13px 0 0; font-size: clamp(28px, 3.8vw, 46px); font-weight: 300; letter-spacing: -0.03em; line-height: 1.05; color: var(--flame-deep, #E85B1C); }
.tk__verdict--ink { color: var(--ink, #16140F); }
.tk__lead { margin: 14px 0 0; font-weight: 300; font-size: clamp(16px, 1.3vw, 18px); color: var(--ink-soft, #322E28); line-height: 1.6; max-width: 60ch; }
.tk__points { margin: 18px 0 0; display: grid; gap: 10px; max-width: 62ch; }
.tk__points li { position: relative; padding-left: 20px; font-weight: 300; font-size: 15.5px; color: var(--muted, #545047); line-height: 1.55; }
.tk__points li::before { content: ""; position: absolute; left: 0; top: 0.58em; width: 6px; height: 6px; border-radius: 50%; background: var(--flame, #FF7436); }
.tk__meter { margin: 18px 0 6px; height: 8px; border-radius: 999px; background: var(--c-track); overflow: hidden; max-width: 360px; }
.tk__meter > span { display: block; height: 100%; width: 0; background: var(--flame, #FF7436); border-radius: 999px; transition: width 0.6s var(--ease-out, ease); }
html.rm .tk__meter > span { transition: none; }
.tk__metercap { font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: 0.03em; color: var(--faint, #726D61); }

/* Action row (download / print / book) */
.tk__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(22px, 3vh, 30px); }
.tk__btn {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; padding: 14px 22px; border-radius: 999px;
  font: inherit; font-size: 15px; line-height: 1; letter-spacing: -0.01em; cursor: pointer;
  background: var(--ink, #16140F); color: var(--paper, #FAF8F3); border: 1px solid var(--ink, #16140F);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.tk__btn:hover { background: #2B2721; border-color: #2B2721; }
.tk__btn--ghost { background: transparent; color: var(--ink, #16140F); border-color: var(--hairline, rgba(22,20,15,0.13)); }
.tk__btn--ghost:hover { background: rgba(22,20,15,0.03); border-color: rgba(22,20,15,0.34); }
.tk__note { margin: 16px 0 0; max-width: 52ch; font-size: 13px; font-weight: 300; line-height: 1.55; color: var(--muted, #545047); }
.tk__note a { color: var(--flame-deep, #E85B1C); }

/* Reset / progress helpers */
.tk__bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: clamp(20px,3vh,28px); }
.tk__reset { background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--font-mono, monospace); font-size: 11.5px; letter-spacing: 0.03em; color: var(--faint, #726D61); }
.tk__reset:hover { color: var(--flame-deep, #E85B1C); }
.tk[hidden], .tk__result[hidden], [hidden] { display: none; }

/* Two-column tools (scope builder): fields + live preview, stacks on mobile */
.tk--split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (min-width: 901px) { .tk--split > :last-child { position: sticky; top: calc(var(--nav-h, 68px) + 22px); } }
@media (max-width: 820px) { .tk--split { grid-template-columns: 1fr; gap: clamp(24px, 4vh, 34px); } }

/* Checklist + focal sticky score (vetting checklist) */
.tk--score { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(32px, 4.5vw, 68px); align-items: start; }
.tk--score .tk__result { margin-top: 0; border-top: 0; padding-top: 0; }
.tk--score .tk__verdict, .tk--score .tk__rlabel { /* inherit qz/tk styles */ }
@media (min-width: 901px) { .tk--score > :last-child { position: sticky; top: calc(var(--nav-h, 68px) + 22px); } }
@media (max-width: 820px) { .tk--score { grid-template-columns: 1fr; gap: clamp(26px, 4vh, 38px); } }

@media (max-width: 640px) {
  .tk__opts:not(.tk__opts--row) { flex-direction: column; align-items: stretch; }
}

/* =========================================================================
   Stepper quiz (.qz) — one question at a time, progress, GSAP transitions,
   one focal result. Shared engine in quiz.js. Minimal and calm.
   ========================================================================= */
.qz { --c-track: rgba(22, 20, 15, 0.10); max-width: 640px; margin-top: clamp(26px, 4vh, 40px); }
.qz__head { display: flex; align-items: center; gap: 18px; margin-bottom: clamp(30px, 5vh, 52px); }
.qz__head[hidden], .qz__stage[hidden] { display: none; }
.qz__track { flex: 1; height: 3px; border-radius: 999px; background: var(--c-track); overflow: hidden; }
.qz__fill { display: block; height: 100%; width: 0; background: var(--flame, #FF7436); border-radius: 999px; transition: width 0.5s var(--ease-out, ease); }
html.rm .qz__fill { transition: none; }
.qz__count { display: flex; align-items: center; gap: 13px; flex: none; font-family: var(--font-mono, monospace); font-size: 12px; letter-spacing: 0.04em; color: var(--muted, #545047); }
.qz__count b { color: var(--ink, #16140F); font-weight: 500; }
.qz__back { background: none; border: 0; padding: 0; cursor: pointer; color: var(--faint, #726D61); font-size: 16px; line-height: 1; transition: color 0.18s; }
.qz__back:hover { color: var(--flame-deep, #E85B1C); }
.qz__back[hidden] { display: none; }

.qz__stage { position: relative; }
.qz__step[hidden] { display: none; }
.qz__q { font-size: clamp(23px, 2.7vw, 33px); font-weight: 400; letter-spacing: -0.022em; line-height: 1.18; color: var(--ink, #16140F); max-width: 19ch; outline: none; }
.qz__qhint { margin-top: 13px; font-family: var(--font-mono, monospace); font-size: 11.5px; letter-spacing: 0.02em; color: var(--faint, #726D61); max-width: 46ch; line-height: 1.5; }
.qz__opts { margin-top: clamp(22px, 3.6vh, 34px); display: grid; gap: 10px; }
.qz__opt {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; cursor: pointer;
  padding: 16px 18px; border: 1px solid var(--hairline, rgba(22,20,15,0.13)); border-radius: 14px; background: #fff;
  font: inherit; font-size: 16px; color: var(--ink-soft, #322E28); line-height: 1.4;
  transition: border-color 0.18s, background 0.18s, transform 0.14s var(--ease-out, ease), color 0.18s;
}
.qz__opt::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--ghost, #C9C4B8); flex: none; transition: 0.18s; }
.qz__opt:hover { border-color: var(--flame, #FF7436); transform: translateX(3px); }
.qz__opt:hover::before { border-color: var(--flame, #FF7436); }
.qz__opt.is-sel { border-color: var(--flame, #FF7436); background: rgba(255,116,54,0.07); color: var(--ink, #16140F); }
.qz__opt.is-sel::before { background: var(--flame, #FF7436); border-color: var(--flame, #FF7436); box-shadow: inset 0 0 0 2px #fff; }
.qz__opt:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255,116,54,0.25); }
html.rm .qz__opt { transition: border-color 0.18s, background 0.18s, color 0.18s; }

/* Result */
.qz__result[hidden] { display: none; }
.qz__result:focus { outline: none; }
.qz__rlabel { font-family: var(--font-mono, monospace); font-size: 11.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted, #545047); }
.qz__verdict { margin: 13px 0 0; font-size: clamp(32px, 4.4vw, 52px); font-weight: 300; letter-spacing: -0.035em; line-height: 1.02; color: var(--flame-deep, #E85B1C); }
.qz__verdict--ink { color: var(--ink, #16140F); }
.qz__meter { margin: 18px 0 4px; height: 8px; border-radius: 999px; background: var(--c-track); overflow: hidden; max-width: 340px; }
.qz__meter[hidden] { display: none; }
.qz__meter > span { display: block; height: 100%; width: 0; background: var(--flame, #FF7436); border-radius: 999px; transition: width 0.6s var(--ease-out, ease); }
html.rm .qz__meter > span { transition: none; }
.qz__lead { margin: 16px 0 0; font-weight: 300; font-size: clamp(16px, 1.3vw, 18px); color: var(--ink-soft, #322E28); line-height: 1.6; max-width: 56ch; }
.qz__points { margin: 18px 0 0; display: grid; gap: 10px; max-width: 56ch; }
.qz__points li { position: relative; padding-left: 20px; font-weight: 300; font-size: 15.5px; color: var(--muted, #545047); line-height: 1.5; }
.qz__points li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; background: var(--flame, #FF7436); }
.qz__note { margin: 18px 0 0; max-width: 54ch; font-size: 13px; font-weight: 300; line-height: 1.55; color: var(--muted, #545047); }
.qz__note a { color: var(--flame-deep, #E85B1C); }
.qz__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(22px, 3vh, 28px); }
.qz__restart { margin-top: 18px; background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--font-mono, monospace); font-size: 11.5px; letter-spacing: 0.03em; color: var(--faint, #726D61); }
.qz__restart:hover { color: var(--flame-deep, #E85B1C); }
[data-qz-outcomes] { display: none; }