/* ─────────────────────────────────────────────────────────────────────────
   Shared tool-page theme.

   The CV builder (css/cv.css) had the strongest visual language on the site —
   a proper token set, Fraunces/Inter typography, soft-bordered surfaces — while
   every other tool carried its own ad-hoc palette and system-font stack. This
   lifts that language out so all the tools share it, with one change: the
   background is WHITE rather than the CV page's cream.

   How it is applied: each tool page keeps its own prefixed class names (.gp-*,
   .qr-*, .ic-*, .pm-*, .jb-*) and its own markup — the JS hooks onto those, and
   rewriting them all would risk breaking working tools for no visual gain.
   Instead this sheet is loaded AFTER a page's own styles and re-points the
   handful of properties that carry the look: surface, border, radius, shadow,
   typography, accent.

   Load order matters: page styles first, this second.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* White, per the brief — cv.css keeps its own cream for the CV canvas. */
  --tool-bg: #FFFFFF;
  --tool-surface: #FFFFFF;
  --tool-surface-alt: #F7F8FA;
  --tool-border: #E4E7EC;
  --tool-border-strong: #D3D8E0;

  --tool-ink: #1A1A1A;
  --tool-ink-muted: #5C6470;
  --tool-ink-faint: #97A0AD;

  /* Black/white for consistency with the rest of the site's buttons — this
     used to be a blue-purple gradient (#0074FA -> #3D1FEB). -deep is kept
     (equal to -accent) only so nothing referencing it directly breaks. */
  --tool-accent: #000000;
  --tool-accent-hover: #171717;
  --tool-accent-deep: #000000;
  --tool-accent-tint: #EDEDED;

  --tool-success: #2F6B4F;
  --tool-danger: #9B3A2E;

  --tool-radius-sm: 10px;
  --tool-radius-md: 16px;
  --tool-radius-lg: 20px;
  --tool-radius-pill: 999px;

  --tool-shadow-sm: 0 1px 2px rgba(26, 26, 26, .05);
  --tool-shadow-md: 0 8px 24px -8px rgba(26, 26, 26, .12);
  --tool-shadow-lg: 0 24px 48px -16px rgba(26, 26, 26, .18);

  --tool-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --tool-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ── Page ground ────────────────────────────────────────────────────────── */

body.tool-page {
  background: var(--tool-bg);
  color: var(--tool-ink);
  font-family: var(--tool-font-body);
}

/* Clears the fixed navbar, which is out of normal flow. */
body.tool-page .tool-topgap { height: 74px; }
@media (max-width: 1024px) { body.tool-page .tool-topgap { height: 64px; } }

/* css/style.css sets `html, body { height: 100% }`; with overflow-x:hidden on
   body that turns the body into the scroll container, and a position:fixed
   navbar can then never tell it has been scrolled past. */
body.tool-page, html:has(body.tool-page) { height: auto; }

/* ── Page intro ─────────────────────────────────────────────────────────── */

.tool-intro {
  max-width: 720px;
  margin: 0 auto clamp(26px, 4vw, 40px);
  text-align: center;
  padding: 0 16px;
}

.tool-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tool-accent);
}
.tool-eyebrow svg { width: 14px; height: 14px; fill: currentColor; }

.tool-intro h1 {
  margin: 0 0 12px;
  font-family: var(--tool-font-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 4.4vw, 2.8rem);
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--tool-ink);
}

.tool-intro p {
  margin: 0 auto;
  max-width: 620px;
  font-size: clamp(.95rem, 1.6vw, 1.05rem);
  line-height: 1.65;
  color: var(--tool-ink-muted);
}

/* ── Re-skin: existing tool components ──────────────────────────────────────
   Each page keeps its own class names; only the properties that carry the
   look are re-pointed here. Grouped by property so the intent stays readable
   rather than repeating a block per prefix. */

/* Page ground for every tool. */
body.tool-page .gp-page,
body.tool-page .qr-shell,
body.tool-page .ic-shell,
body.tool-page .pm-shell,
body.tool-page .jb-page { background: transparent; }

/* Surfaces. */
body.tool-page .gp-card,
body.tool-page .qr-card,
body.tool-page .ic-card,
body.tool-page .pm-card,
body.tool-page .jb-card,
body.tool-page .jb-job {
  background: var(--tool-surface);
  border: 1.5px solid var(--tool-border);
  border-radius: var(--tool-radius-md);
  box-shadow: var(--tool-shadow-sm);
}
body.tool-page .jb-job:hover {
  border-color: var(--tool-border-strong);
  box-shadow: var(--tool-shadow-md);
}

/* Headings inside tools pick up the display face. */
body.tool-page .gp-section-title,
body.tool-page .qr-section-title,
body.tool-page .jb-card-header h2,
body.tool-page .gp-card-header h2 {
  font-family: var(--tool-font-display);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--tool-ink);
}

/* Inputs. */
body.tool-page .gp-input,
body.tool-page .gp-select,
body.tool-page .jb-input,
body.tool-page .jb-select,
body.tool-page .qr-input,
body.tool-page .ic-input {
  border: 1.5px solid var(--tool-border);
  border-radius: var(--tool-radius-sm);
  font-family: var(--tool-font-body);
  color: var(--tool-ink);
  background: var(--tool-surface);
}
body.tool-page .gp-input:focus,
body.tool-page .gp-select:focus,
body.tool-page .jb-input:focus,
body.tool-page .jb-select:focus,
body.tool-page .qr-input:focus,
body.tool-page .ic-input:focus {
  outline: 3px solid var(--tool-accent-tint);
  outline-offset: 0;
  border-color: var(--tool-accent);
}

/* Primary actions: solid black pill (previously the CV builder's blue-purple
   gradient — flat rather than a near-invisible black-on-black gradient). */
body.tool-page .gp-btn-primary,
body.tool-page .jb-btn-primary,
body.tool-page .qr-btn-primary,
body.tool-page .ic-btn-primary,
body.tool-page .pm-btn-primary {
  background: var(--tool-accent);
  color: #fff;
  border: 0;
  border-radius: var(--tool-radius-pill);
  box-shadow: 0 4px 14px rgba(17, 17, 17, .28);
  transition: background .2s ease, transform .2s ease;
}
body.tool-page .gp-btn-primary:hover:not(:disabled),
body.tool-page .jb-btn-primary:hover:not(:disabled),
body.tool-page .qr-btn-primary:hover:not(:disabled),
body.tool-page .ic-btn-primary:hover:not(:disabled),
body.tool-page .pm-btn-primary:hover:not(:disabled) {
  background: var(--tool-accent-hover);
  transform: translateY(-1px);
}

/* Secondary actions. */
body.tool-page .gp-btn-ghost,
body.tool-page .jb-btn-ghost,
body.tool-page .qr-btn-secondary,
body.tool-page .ic-btn-secondary {
  background: var(--tool-surface);
  border: 1.5px solid var(--tool-border);
  border-radius: var(--tool-radius-sm);
  color: var(--tool-ink);
}
body.tool-page .gp-btn-ghost:hover:not(:disabled),
body.tool-page .jb-btn-ghost:hover:not(:disabled),
body.tool-page .qr-btn-secondary:hover:not(:disabled),
body.tool-page .ic-btn-secondary:hover:not(:disabled) {
  background: var(--tool-surface-alt);
  border-color: var(--tool-border-strong);
}

/* ── Heroes ─────────────────────────────────────────────────────────────────
   Every tool opened on its own dark gradient band. The CV builder's light,
   centred intro is the house style now, so the bands are re-skinned rather
   than rewritten — the markup is the same shape on all of them (badge,
   heading, lead, sometimes a stats row), only the class prefix differs. */

body.tool-page .gp-hero,
body.tool-page .qr-hero,
body.tool-page .ic-hero,
body.tool-page .pm-hero,
body.tool-page .jb-hero {
  background: none;
  color: var(--tool-ink);
  padding: clamp(26px, 5vw, 46px) 20px clamp(22px, 4vw, 34px);
  text-align: center;
}

/* Badge → eyebrow. */
body.tool-page .gp-hero-badge,
body.tool-page .qr-badge,
body.tool-page .ic-badge,
body.tool-page .pm-badge,
body.tool-page .jb-hero-badge {
  background: none;
  border: 0;
  padding: 0;
  margin-bottom: 14px;
  color: var(--tool-accent);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
body.tool-page .gp-hero-badge svg,
body.tool-page .jb-hero-badge svg { fill: currentColor; }
body.tool-page .qr-badge-dot,
body.tool-page .ic-dot,
body.tool-page .pm-dot { background: var(--tool-accent); }

/* Heading. */
body.tool-page .gp-hero h1,
body.tool-page .qr-title,
body.tool-page .ic-title,
body.tool-page .pm-title,
body.tool-page .jb-hero h1 {
  font-family: var(--tool-font-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 4.4vw, 2.8rem);
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--tool-ink);
  margin-bottom: 12px;
}
/* The highlighted half of each heading was mint on black; on white it needs
   the accent instead, or it disappears. */
body.tool-page .gp-hero h1 span,
body.tool-page .qr-title span,
body.tool-page .ic-title span,
body.tool-page .pm-title span,
body.tool-page .jb-hero h1 span { color: var(--tool-accent); }

/* Lead paragraph. */
body.tool-page .gp-hero p,
body.tool-page .qr-sub,
body.tool-page .ic-sub,
body.tool-page .pm-sub,
body.tool-page .jb-hero p {
  color: var(--tool-ink-muted);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.65;
}

/* Stats row. */
body.tool-page .gp-hero-stat strong,
body.tool-page .jb-hero-stat strong { color: var(--tool-accent); }
body.tool-page .gp-hero-stat span,
body.tool-page .jb-hero-stat span { color: var(--tool-ink-faint); }

/* ── Footer ─────────────────────────────────────────────────────────────── */

.tool-footer {
  margin-top: clamp(48px, 8vw, 80px);
  padding: 28px 20px;
  border-top: 1px solid var(--tool-border);
  text-align: center;
  font-size: 13px;
  color: var(--tool-ink-muted);
}
.tool-footer a { color: var(--tool-ink); font-weight: 600; text-decoration: none; }
.tool-footer a:hover { text-decoration: underline; }

/* Tool pages sit on white, so the navbar is solid from the top. */
body.tool-page .sn-nav { background: #fff; box-shadow: 0 1px 0 rgba(17, 17, 17, .07); }

/* Grocery Planner uses a softer market-app ground while the other tools keep
  the shared white canvas. */
body.tool-page:has(.gp-hero) { background: #f4faef; }
body.tool-page:has(.gp-hero) .gp-hero { background: linear-gradient(135deg, #eaf8e5 0%, #f7fbf4 100%); }