/* ============================================================================
   Chief Of free tools — shared styles (hub + Leverage Score, Manual Meter,
   Prompt Library)
   ----------------------------------------------------------------------------
   These pages link css/base.css first, so they inherit its tokens, reset,
   type scale and .card/.btn-primary/.btn-ghost/.eyebrow. This file only
   supplies the tool-specific components (pills, fields, gate, progress bar,
   results) that don't exist in base.css, using base.css's tokens directly
   rather than the old navy/gold ones.
   ========================================================================== */

/* base.css doesn't define a "positive/success" token — these tools use one
   for recovered-value figures and a scheduling-category tag. */
:root { --green: #2E7D52; }

.container { max-width: var(--measure-narrow); margin: 0 auto; padding: 0 var(--gutter, 24px); }
.narrow { max-width: 720px; }

/* Tool header — plain white like every other page's hero, not a dark band. */
.tool-hero { background: var(--ground); color: var(--ink); padding: calc(var(--section-y) * 0.7) 0 calc(var(--section-y) * 0.5); text-align: center; }
.tool-hero .eyebrow { margin-bottom: 14px; }
.tool-hero h1 { max-width: 760px; margin: 0 auto 14px; }
.tool-hero p { font-size: var(--step-body-lg); color: var(--ink-soft); max-width: 600px; margin: 0 auto; line-height: 1.6; }
/* The .aw artifact inside a centered hero stays left-aligned internally —
   only the surrounding copy is centered. */
.tool-hero .art-stage { margin-top: var(--space-8); text-align: left; }

/* Main work area */
main { padding: 48px 0 90px; background: var(--ground); min-height: 50vh; }
.card + .card { margin-top: 24px; }

/* Archetype / platform pill selectors */
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.pill-label { font-size: var(--step-micro); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.pill { border: 1.5px solid var(--line); background: var(--ground); color: var(--ink-soft); border-radius: 999px; padding: 8px 16px; font-size: var(--step-micro); font-family: inherit; cursor: pointer; transition: background 0.18s, color 0.18s, border-color 0.18s; white-space: nowrap; }
.pill:hover { border-color: var(--ink); }
.pill.active { background: var(--ink); border-color: var(--ink); color: var(--ground); }

/* Form fields */
.field { margin-bottom: 22px; }
.field label { display: block; font-size: var(--step-small); font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.field .hint { font-size: var(--step-micro); color: var(--muted); font-weight: 400; }
.field input[type="number"], .field input[type="text"], .field input[type="email"] {
  width: 100%; border: 1.5px solid var(--line); border-radius: 10px; padding: 14px 16px;
  font-size: var(--step-body); font-family: inherit; color: var(--ink); transition: border-color 0.2s, box-shadow 0.2s; background: var(--ground);
}
.field input:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(15,15,15,0.08); }

/* Buttons. Same contract as base.css's .btn-primary (ink fill, accent on
   hover with an ink label) and .btn-ghost (outline) — kept as their own
   classes here because the tool JS references `.btn`/`.outline` directly. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--ink); color: var(--ground); font-size: var(--step-small); font-weight: 700; padding: 15px 32px; border-radius: var(--radius-pill, 999px); border: none; cursor: pointer; font-family: inherit; transition: background 0.18s, color 0.18s; text-decoration: none; }
.btn:hover { background: var(--accent); color: var(--ink); }
.btn-block { width: 100%; }

/* Results */
.result-big { font-family: var(--sans); font-weight: 700; font-size: 3.2rem; color: var(--ink); line-height: 1.05; }
.result-big.green { color: var(--green); }
.result-label { font-size: var(--step-micro); color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.hidden { display: none !important; }

/* Email gate — a tinted panel, not a dark navy box (rule 6: no black panels). */
.gate { background: var(--tint); color: var(--ink); border-radius: var(--radius-flat); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 28px 26px; margin-top: 24px; }
.gate h3 { font-weight: 600; font-size: 1.3rem; margin-bottom: 6px; }
.gate p { color: var(--ink-soft); font-size: var(--step-small); margin-bottom: 16px; }
.gate .gate-row { display: flex; gap: 10px; flex-wrap: wrap; }
.gate input { flex: 1; min-width: 200px; border: 1.5px solid var(--line); background: var(--ground); color: var(--ink); border-radius: 10px; padding: 14px 16px; font-size: var(--step-body); font-family: inherit; }
.gate input::placeholder { color: var(--muted); }
.gate input:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(15,15,15,0.08); }
.gate .gate-note { font-size: var(--step-micro); color: var(--muted); margin-top: 12px; margin-bottom: 0; }

/* CTA block — same generic panel treatment as every other page's closing CTA. */
.cta-block { background: var(--tint); color: var(--ink); border-radius: var(--radius-flat); padding: 36px 32px; text-align: center; margin-top: 24px; }
.cta-block h3 { font-weight: 600; font-size: 1.6rem; margin-bottom: 10px; }
.cta-block p { color: var(--ink-soft); max-width: 480px; margin: 0 auto 22px; }
.cta-block .btn-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cta-block .btn-row a.outline { color: var(--ink); border: 1.5px solid var(--line); background: transparent; }
.cta-block .btn-row a.outline:hover { border-color: var(--ink); }

/* Footer: these pages now use the full shared footer (base.css /
   components.css), not a page-local minimal one, so there is no footer
   override here. */

@media (max-width: 768px) {
  /* `.nav-links a.nav-link { display: none }` used to sit here, a copy of the
     rule base.css carried before the nav became a real panel. Because this file
     loads after base.css it kept winning, so on the three tool pages the panel
     opened onto six invisible links. The shared mobile nav owns this now. */
  .tool-hero h1 { font-size: 2rem; }
  .card { padding: 26px 22px; }
  .result-big { font-size: 2.4rem; }

  /* The segment pills are the primary control on these pages and were 35px
     tall — under the 44px comfortable touch target, and packed 8px apart in a
     wrapping row, which is where mistaps come from. */
  .pill { padding: 12px 18px; }
  .pill-row { gap: 10px; }
}

/* Tool result containers. These were .card — a pastel fill — and are a bordered
   region now, so the numbers sit on the page ground rather than in a box. */
.tool-panel { border: 1px solid var(--line); border-radius: var(--radius-flat); padding: 28px 26px; }