/* /tools section skin, from design_handoff (template/): catalog hub +
   reusable tool-page pattern. Loads after styles.css on tools pages only.
   Theme-aware: colors ride the site tokens; the dark values below reproduce
   the approved handoff exactly, light derives from the site palette.
   Default rules are the tool-page variant; .pg-hub scopes hub overrides. */

.pg-hub, .pg-tool {
  --t-card: var(--bg-2);
  --t-sub: var(--ink-mute);
  --t-mute: var(--ink-mute);
  --t-ghost: var(--ink-faint);
  --t-line: var(--line);
  --t-line-strong: var(--line-strong);
  --t-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none' stroke='%236b6b6b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
}
html[data-theme="dark"] .pg-hub, html[data-theme="dark"] .pg-tool {
  --t-card: #141414;
  --t-sub: #a8a396;
  --t-mute: #8a8678;
  --t-ghost: #55524a;
  --t-line: #eceae314;
  --t-line-strong: #eceae326;
  --t-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none' stroke='%238a8678' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
}

.pg-hub a, .pg-tool a { color: inherit; text-decoration: none; }
.pg-hub a:hover, .pg-tool a:hover { color: var(--accent); }

/* hero */
.hero { position: relative; overflow: hidden; border-top: 1px solid var(--t-line); border-bottom: 1px solid var(--t-line); }
.hero .hpos { position: relative; }
.globe-wrap { position: absolute; top: 50%; right: -40px; transform: translateY(-50%); opacity: .6; pointer-events: none; -webkit-mask-image: radial-gradient(closest-side, #000 45%, transparent 96%); mask-image: radial-gradient(closest-side, #000 45%, transparent 96%); }
.globe-wrap .land { opacity: .5; }
/* Hub: the globe is the relocatable #globe-stage (page-router morphs it between
   SPA routes via view-transition-name: mb-globe). Mask + opacity sit on the
   stage itself so they ride inside the view-transition snapshot; the decorative
   whirl rings travel along in markup but stay hidden in the tools skin. */
section[data-route="tools"] .globe-wrap { opacity: 1; -webkit-mask-image: none; mask-image: none; }
section[data-route="tools"] .globe-stage {
  width: 620px; height: 620px; aspect-ratio: auto;
  pointer-events: none; cursor: default; transition: none;
  opacity: .6;
  -webkit-mask-image: radial-gradient(closest-side, #000 45%, transparent 96%);
  mask-image: radial-gradient(closest-side, #000 45%, transparent 96%);
}
section[data-route="tools"] .globe-stage .whirl,
section[data-route="tools"] .globe-stage .orbit { display: none; }

/* Embedded flagship flows (simulator + checker): the tools hero owns the
   globe, so the flow's in-content stage hides, the full-viewport hero sizing
   of the old standalone pages collapses, and the flow centers in the same
   820px column as every other tool panel. The grid-column resets undo the
   two-column desktop placement from styles.css. */
section[data-route="simulator"], section[data-route="checker"] {
  padding: 0;
  border-top: 0;
  /* the flow's dropdowns must paint over the sections below */
  position: relative;
  z-index: 5;
}
section[data-route="simulator"] .page-hero, section[data-route="checker"] .page-hero { min-height: 0; }
section[data-route="simulator"] .page-hero-inner, section[data-route="checker"] .page-hero-inner {
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  align-items: start;
  /* pack rows at the top: the reserve space stays BELOW the content */
  align-content: start;
  /* the two-column layout's 56px gap otherwise pads the empty first row */
  gap: 0;
  /* kill the standalone page's full-viewport sizing; the open race menu is
     opaque and paints over the sections below, so no reserve is needed */
  min-height: 0;
  padding: 64px 0;
}
section[data-route="simulator"] .page-hero-inner > .globe-stage,
section[data-route="checker"] .page-hero-inner > .globe-stage { display: none; }
section[data-route="simulator"] .page-hero-inner > .race-overlay {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  max-width: 820px;
  margin-inline: auto;
}
section[data-route="simulator"] .page-hero-inner > .page-content,
section[data-route="checker"] .page-hero-inner > .page-content {
  grid-column: 1;
  grid-row: 2;
  width: 100%;
  max-width: 820px;
  margin-inline: auto;
}
section[data-route="checker"] .page-hero-inner > .page-content { grid-row: 1; }
section[data-route="simulator"] .page-hero-inner > .page-content[data-route="simulator"],
section[data-route="checker"] .page-content[data-route="checker"] {
  padding-top: 0;
  padding-left: 0;
  border-left: 0;
}
.hero .hin { position: relative; padding: 34px 0 56px; max-width: 620px; }
.pg-hub .hero .hin { padding: 76px 0 68px; }
.crumb { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--t-ghost); margin-bottom: 34px; display: flex; gap: 10px; align-items: center; }
.crumb a { color: var(--t-mute); }
.crumb a:hover { color: var(--accent); }
.crumb .sep { color: var(--t-ghost); }
.crumb .here { color: var(--ink-soft); }
.eb { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin-bottom: 20px; }
.pg-tool .eb { display: flex; align-items: center; gap: 10px; font-size: 10px; letter-spacing: .14em; color: var(--t-ghost); }
.tools-h1 { font-size: clamp(36px, 4.2vw, 56px); font-weight: 700; letter-spacing: -.035em; line-height: .98; margin: 0 0 16px; text-wrap: balance; }
.pg-hub .tools-h1 { font-size: clamp(40px, 4.6vw, 64px); margin-bottom: 18px; }
.tools-h1 em { font-style: normal; color: var(--accent); }
.sub { font-size: 17px; line-height: 1.55; color: var(--t-sub); margin: 0; max-width: 52ch; text-wrap: pretty; }
.bdg { display: inline-block; white-space: nowrap; font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; padding: 5px 9px; border-radius: 2px; background: var(--accent); color: var(--accent-ink); line-height: 1; font-weight: 600; }

/* hub: stage cards */
.stage-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 44px; }
.scard { display: flex; gap: 20px; align-items: center; border: 1px solid var(--t-line-strong); border-radius: 3px; background: var(--t-card); padding: 14px; transition: border-color 200ms, transform 200ms; }
.scard:hover { border-color: var(--accent); transform: translateY(-2px); color: inherit; }
.scard.active { border-color: var(--accent); }
.scard.soon { opacity: .45; cursor: default; }
.scard.soon:hover { border-color: var(--t-line-strong); transform: none; }
.tool-cat[hidden] { display: none; }
/* Icon tile per design_handoff_category_icons: 88px square, hairline
   border, no radius, no fill, 44px stroke icon in ink via currentColor. */
.sthumb { width: 88px; height: 88px; flex: none; border: 1px solid var(--t-line); display: grid; place-items: center; color: var(--ink); }
.sthumb svg { width: 44px; height: 44px; }
.sbody { min-width: 0; }
.snm { font-size: 18px; font-weight: 700; letter-spacing: -.01em; display: block; }
.sct { margin: 6px 0 8px; display: block; }
.sbl { font-size: 12.5px; color: var(--t-mute); line-height: 1.45; display: block; }

/* hub: tool sections + rows */
.tools-hub { padding-bottom: 24px; }
.tch { display: flex; align-items: center; gap: 14px; }
.tool-cat h2 { font-size: 26px; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.tool-cat-count { flex: none; display: flex; }
.tool-cat-blurb { font-size: 14px; color: var(--t-mute); margin: 8px 0 20px; line-height: 1.5; max-width: 70ch; }
.tool-cards { display: block; }
.tool-cat { padding: 40px 0 10px; border-top: 0; border-bottom: 1px solid var(--t-line); }
.tool-cat:last-of-type { border-bottom: 0; }
.tool-card { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: baseline; padding: 19px 16px; margin: 0 -16px; border-bottom: 1px solid var(--t-line); transition: background 110ms; }
.tool-cards .tool-card:last-child { border-bottom: 0; }
.tool-card:hover { background: var(--accent); border-color: transparent; color: var(--accent-ink); }
.tool-card:hover .trt, .tool-card:hover .trt small, .tool-card:hover .trm { color: var(--accent-ink); }
.tool-card:hover .trm .bdg { background: var(--accent-ink); color: var(--accent); }
.trt { font-size: 20px; font-weight: 600; letter-spacing: -.01em; transition: color 160ms; }
.trt small { display: block; font-size: 13.5px; font-weight: 400; color: var(--t-mute); margin-top: 5px; line-height: 1.45; }
.trm { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--t-ghost); text-align: right; display: flex; justify-content: flex-end; align-items: center; gap: 10px; }

/* tool page: panel. padding-block only: these elements also carry .wrap,
   a padding shorthand would wipe its responsive side gutters */
.tool-page { padding-block: 64px; }
#tool-root { border: 1px solid var(--t-line-strong); border-radius: 3px; background: var(--t-card); max-width: 820px; margin: 0 auto; }
.tp-form { padding: 28px 28px 30px; }
.tp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
/* Fields follow the simulator's form language (owner call, Jul 20):
   text inputs are hairline-underline rows, selects are the boxed
   label-inside trigger, the CTA is the full-width orange bar. */
.fld label { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 6px; }
.fld { border-bottom: 1px solid var(--t-line); padding: 6px 0 14px; transition: border-color 160ms ease; }
.fld:focus-within { border-bottom-color: var(--accent); }
.fld input { width: 100%; box-sizing: border-box; background: transparent; border: 0; color: var(--ink); font: inherit; font-size: 18px; font-weight: 500; letter-spacing: -.005em; padding: 2px 0; font-variant-numeric: tabular-nums; }
.fld input:focus { outline: none; }
.fld input::placeholder { color: var(--ink-faint); }
/* select: the simulator's boxed trigger, label inside the box */
.fld:has(select) { border: 1px solid var(--t-line-strong); border-radius: var(--radius); padding: 16px 20px 14px; transition: border-color 160ms ease; }
.fld:has(select):hover, .fld:has(select):focus-within { border-color: var(--ink); }
.fld:has(select) label { margin-bottom: 4px; }
.fld select { width: 100%; box-sizing: border-box; background: transparent; border: 0; color: var(--ink); font: inherit; font-size: 18px; font-weight: 600; letter-spacing: -.01em; padding: 0; appearance: none; -webkit-appearance: none; background-image: var(--t-chevron); background-repeat: no-repeat; background-position: right 2px center; padding-right: 30px; cursor: pointer; }
.fld select:focus { outline: none; }
/* selection buttons (the checker's boxed option rows): the default for
   2 to 6 exclusive choices; the boxed select stays for long lists only */
.fld:has(.opts) { border: 0; padding: 6px 0 0; }
.opts { display: grid; gap: 10px; }
.opts[data-cols="2"] { grid-template-columns: 1fr 1fr; }
.opts[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
.opt { text-align: left; background: transparent; border: 1px solid var(--t-line-strong); border-radius: var(--radius); color: var(--ink); font: inherit; font-size: 16px; font-weight: 600; letter-spacing: -.005em; padding: 15px 18px; cursor: pointer; transition: border-color 160ms ease; }
.opt:hover { border-color: var(--ink); }
.opt.on { border-color: var(--ink); }
.presets { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.pre { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; border: 1px solid var(--t-line-strong); background: none; color: var(--t-sub); border-radius: 2px; padding: 7px 12px; cursor: pointer; transition: border-color 130ms, color 130ms; }
.pre:hover { border-color: var(--accent); color: var(--ink); }
.pre.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.units { display: inline-flex; border: 1px solid var(--t-line-strong); border-radius: 2px; overflow: hidden; }
.units button { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; background: none; border: 0; color: var(--t-mute); padding: 8px 14px; cursor: pointer; transition: background 130ms, color 130ms; }
.units .on { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.tp-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
/* orange eyebrow, same voice as the checker's screen label */
.tp-top .tl { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.tp-go { margin-top: 26px; display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
/* Orange Lead primary from the simulator: accent bg, ink text, hover fills cream */
.btn-solve { display: inline-flex; align-items: center; justify-content: center; width: 100%; background: var(--accent); color: #1a0f06; border: none; border-radius: 2px; font: inherit; font-size: 16px; letter-spacing: -.005em; font-weight: 600; padding: 15px 22px; cursor: pointer; transition: background 180ms ease, color 180ms ease; }
.btn-solve:hover { background: #f6efe6; color: #1a0f06; }
/* the result pages' "start over" link: bold, underlined, plain case */
.btn-clear { align-self: center; background: none; border: 0; font: inherit; font-size: 14.5px; font-weight: 600; letter-spacing: -.005em; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 8px 12px; }
.btn-clear:hover { color: var(--accent); }
/* functional additions (not in the handoff): inline validation + disabled CTA */
.tp-err { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 14px 0 0; display: none; }
.tp-err.show { display: block; }
.btn-solve:disabled { opacity: .35; cursor: default; }

/* tool page: inline results */
.tp-res { border-top: 1px solid var(--t-line); padding: 26px 28px 28px; display: none; }
.tp-res.show { display: block; }
.verdict { font-size: 15px; color: var(--t-sub); line-height: 1.5; margin: 0 0 4px; }
.verdict b { display: block; font-family: var(--mono); font-size: 34px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; font-variant-numeric: tabular-nums; margin-top: 6px; }
.verdict b em { font-style: normal; color: var(--accent); }
.res-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px; background: var(--t-line); border: 1px solid var(--t-line); border-radius: 2px; overflow: hidden; margin: 20px 0 0; }
.res-cell { background: var(--t-card); padding: 14px 16px; }
.res-cell .k { font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--t-mute); }
.res-cell .v { font-family: var(--mono); font-size: 19px; color: var(--ink); margin-top: 6px; font-variant-numeric: tabular-nums; }
.splits { margin-top: 22px; }
.splits .sh { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--t-ghost); margin-bottom: 8px; }
.splits table { width: 100%; border-collapse: collapse; }
.splits td { padding: 9px 4px; border-bottom: 1px solid var(--t-line); font-family: var(--mono); font-size: 13px; color: var(--t-sub); font-variant-numeric: tabular-nums; }
.splits tr:last-child td { border-bottom: 0; color: var(--ink); font-weight: 600; }
.splits td:last-child { text-align: right; color: var(--ink); }
.splits tr:hover td { color: var(--ink); }
.res-cta { margin-top: 24px; border-top: 1px dashed var(--t-line-strong); padding-top: 18px; font-size: 14px; color: var(--t-mute); }
.res-cta a { color: var(--accent); font-weight: 600; }
.res-cta a:hover { color: var(--ink); }

/* tool page: faq + related */
.tool-faq, .tool-related { border-top: 0; }
.tool-faq { padding-block: 56px 8px; max-width: 820px; }
.sec-h { font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 10px; }
.tool-faq .faq { border-color: var(--t-line); }
.tool-faq .faq summary { color: var(--ink); font-size: 16.5px; }
.tool-faq .faq summary:hover { color: var(--accent); }
.tool-faq .faq-icon { color: var(--t-ghost); }
.tool-faq .faq[open] .faq-icon { color: var(--ink); }
.tool-faq .faq-a p { color: var(--t-sub); font-size: 14.5px; }
.tool-related { padding-block: 48px 10px; max-width: 820px; }

/* Closing band: More tools rides the accent orange, ink-dark text;
   --accent flips to the ink so the row hover flood and the category
   badges invert against the orange. Tokens re-declared locally so the
   descendant rules flip with them. */
.tool-accent {
  --ink: #1a0f06; --ink-soft: #1a0f06;
  --t-sub: #1a0f06b8; --t-mute: #1a0f0699; --t-ghost: #1a0f0680;
  --t-line: #1a0f0633; --t-line-strong: #1a0f0645;
  --accent: #1a0f06; --accent-ink: #f2efe9;
  background: oklch(68% 0.19 45);
  color: #1a0f06;
  padding-bottom: 46px;
}
html[data-theme="dark"] .tool-accent { background: oklch(72% 0.19 45); }
.rel-rows { margin-top: 4px; }
.rel { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: baseline; padding: 15px 14px; margin: 0 -14px; border-bottom: 1px solid var(--t-line); transition: background 110ms; }
.rel:last-child { border-bottom: 0; }
.rel:hover { background: var(--accent); color: var(--accent-ink); }
.rel:hover .rt, .rel:hover .rt small, .rel:hover .rm { color: var(--accent-ink); }
.rel:hover .bdg { background: var(--accent-ink); color: var(--accent); }
.rt { font-size: 16.5px; font-weight: 600; letter-spacing: -.005em; }
.rt small { display: block; font-size: 12.5px; font-weight: 400; color: var(--t-mute); margin-top: 3px; }
.rm { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--t-ghost); }

/* bottom breathing room before the site footer */
.pg-hub { padding-bottom: 56px; }
.pg-tool { padding-bottom: 52px; }

/* mobile */
/* Globe tucks right across the whole hamburger range (nav collapses at 900),
   not just phone widths: shrunk, faded, center pushed past the right edge. */
@media (max-width: 900px) {
  /* explicit wrap width: it otherwise sizes to the svg's intrinsic 620,
     leaving the shrunk globe left-aligned inside it (drifts to center) */
  .globe-wrap { right: -160px; opacity: .35; width: 400px; }
  .globe-wrap .globe svg { width: 400px; height: 400px; }
  .pg-hub .globe-wrap { right: -140px; width: 440px; }
  section[data-route="tools"] .globe-stage { opacity: .4; width: 440px; height: 440px; }
  .pg-hub .globe-wrap .globe svg { width: 440px; height: 440px; }
}

@media (max-width: 720px) {
  .opts[data-cols="4"] { grid-template-columns: 1fr 1fr; }
  .hero .hin { padding: 24px 0 44px; }
  .pg-hub .hero .hin { padding: 52px 0 56px; }
  .crumb { margin-bottom: 26px; }
  .tools-h1 { font-size: 32px; }
  .pg-hub .tools-h1 { font-size: 36px; }
  .sub { font-size: 14.5px; }
  .stage-cards { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 30px; }
  .scard { padding: 12px 14px; gap: 11px; }
  .sthumb { width: 38px; height: 38px; }
  .sthumb svg { width: 22px; height: 22px; }
  .snm { font-size: 13.5px; line-height: 1.2; }
  .sct { margin: 3px 0 0; }
  .sbl { display: none; }
  .tool-cat { padding: 30px 0 6px; }
  .tool-cat h2 { font-size: 21px; }
  .tool-card { grid-template-columns: 1fr; gap: 8px; padding: 16px 14px; margin: 0 -14px; }
  .trt { font-size: 17px; }
  .trm { text-align: left; justify-content: flex-start; }
  .tool-page { padding-block: 40px; }
  .tool-faq { padding-block: 40px 8px; }
  .tool-related { padding-block: 36px 10px; }
  .tp-form { padding: 20px 18px 22px; }
  .tp-row { grid-template-columns: 1fr; gap: 18px; }
  .tp-res { padding: 20px 18px 22px; }
  .verdict b { font-size: 27px; }
  .res-grid { grid-template-columns: 1fr; }
  .tp-go { flex-wrap: wrap; }
  .btn-solve { flex: 1; text-align: center; }
  .rel { grid-template-columns: 1fr; gap: 6px; padding: 13px 12px; margin: 0 -12px; }
}