/* Klivet tools — shared shell.
   SOURCE: palette + tokens copied verbatim from index.html:19-46 (2026-08-17).
   Keep in sync by hand; there is no build step here on purpose. */

@font-face {
  font-family: "Anton";
  src: url("/tools/anton.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

:root {
  --pink: #F0257C;   --pink-deep: #B81B5F;
  --teal: #14BDAB;   --teal-deep: #0E8A7D;
  --purple: #8B5CF6; --purple-deep: #6D3FD4;
  --sun: #FFD84D;    --sun-deep: #B07A14;
  --wash-pink: #FCE0ED;
  --wash-teal: #DBF4F0;
  --wash-purple: #ECE4FC;
  --wash-sun: #FFF4D2;
  --paper: #FFFBF4;
  --board: #F3ECDE;
  --ink: #1F2D5B;
  --ink-2: #46538A;
  --ink-3: #7C86A8;
  --hard-sm: 3px 3px 0 var(--ink);
  --hard-md: 4px 4px 0 var(--ink);
  --hard-lg: 6px 6px 0 var(--ink);
  --border-hard: 2.5px solid var(--ink);
  --font-display: "Anton", "Impact", "Arial Narrow Bold", sans-serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --maxw: 720px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.55;
  /* Riso paper tooth — the same idea as the landing page, cheaper. */
  background-image:
    radial-gradient(var(--board) 1px, transparent 1px),
    radial-gradient(var(--board) 1px, transparent 1px);
  background-size: 28px 28px, 28px 28px;
  background-position: 0 0, 14px 14px;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

/* Same nav as the landing page — sticky, logo left, links right. Copied from
   index.html:96-117 (2026-08-19), minus the wider max-width the landing page uses. */
nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,251,244,0.92);
  backdrop-filter: blur(6px);
  border-bottom: var(--border-hard);
}
.nav-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 13px 20px;
  display: flex; align-items: center; gap: 28px;
}
.logo { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.logo img { height: 30px; width: auto; display: block; }
.nav-links { display: flex; gap: 24px; margin-left: auto; align-items: center; }
.nav-links a:not(.btn) {
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink); text-decoration: none;
  border-bottom: 2px solid transparent;
}
.nav-links a:not(.btn):hover { border-bottom-color: var(--pink); }
.nav-cta { padding: 10px 18px; font-size: 13px; box-shadow: var(--hard-sm); }
/* Phones get the links on their own scrolling row, same as the landing page. */
@media (max-width: 720px) {
  .nav-inner { flex-wrap: wrap; gap: 10px 16px; padding: 10px 16px; }
  .logo { margin-right: auto; }
  .nav-links {
    order: 3; width: 100%; margin-left: 0; gap: 18px;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a:not(.btn) { font-size: 11.5px; white-space: nowrap; }
  .nav-cta { padding: 9px 14px; font-size: 12px; }
}

.hero { padding: 44px 0 8px; }
h1 {
  font-family: var(--font-display);
  font-size: clamp(38px, 8vw, 64px);
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.lede { font-size: 19px; color: var(--ink-2); margin: 0 0 8px; max-width: 34em; }
.kicker {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--pink-deep); display: block; margin-bottom: 10px;
}

.card {
  background: #fff; border: var(--border-hard); box-shadow: var(--hard-md);
  padding: 22px; margin: 22px 0;
}
.card h2 {
  font-size: 13px; font-family: var(--font-mono); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 16px;
}

.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 700; margin-bottom: 5px; font-size: 15px; }
.field .hint { display: block; font-size: 13px; color: var(--ink-3); margin-bottom: 6px; }
.field input, .field select {
  width: 100%; padding: 11px 12px; font: inherit; font-size: 17px;
  border: var(--border-hard); background: var(--paper); color: var(--ink);
}
.field input:focus, .field select:focus { outline: 3px solid var(--purple); outline-offset: 2px; }
/* Sliders: the two ends of the scale have to be readable, or a 1–7 number means nothing. */
.range-labels {
  display: flex; justify-content: space-between; gap: 12px; margin-bottom: 4px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase;
}
.range-labels .low { color: var(--teal-deep); }
.range-labels .high { color: var(--pink-deep); }
.field input[type="range"] { border: 0; padding: 0; background: none; }
.range-value {
  display: inline-block; margin-top: 4px;
  font-family: var(--font-mono); font-weight: 700; font-size: 15px; color: var(--ink-2);
}

.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row .field { flex: 1 1 130px; }

button, .btn {
  font: inherit; font-weight: 800; cursor: pointer; text-decoration: none;
  display: inline-block; padding: 12px 20px;
  border: var(--border-hard); box-shadow: var(--hard-sm);
  background: var(--sun); color: var(--ink);
  transition: transform 0.08s, box-shadow 0.08s;
}
button:hover, .btn:hover { transform: translate(-1px, -1px); box-shadow: var(--hard-md); }
button:active, .btn:active { transform: translate(2px, 2px); box-shadow: none; }
.btn-pink { background: var(--pink); color: #fff; }

/* The verdict card. State is carried by the WORD as well as the colour — never colour
   alone (accessibility, and half of readers are on a phone in sunlight). */
.verdict { border: var(--border-hard); box-shadow: var(--hard-lg); padding: 26px 22px; margin: 22px 0; }
/* The hidden attribute has to win over any display rule, or a `hidden` share bar
   still renders as an empty box with a Copy button next to it. */
[hidden] { display: none !important; }
.verdict .state {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; margin: 0 0 8px;
}
.verdict .headline {
  font-family: var(--font-display); font-size: clamp(26px, 5.5vw, 40px);
  line-height: 1.02; text-transform: uppercase; margin: 0 0 10px;
}
.verdict .sub { font-size: 18px; margin: 0; }
.verdict.good  { background: var(--wash-teal);   border-color: var(--teal-deep); }
.verdict.watch { background: var(--wash-sun);    border-color: var(--sun-deep); }
.verdict.alert { background: var(--wash-pink);   border-color: var(--pink-deep); }
.verdict.neutral { background: var(--board); }

table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--board); }
th { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase;
     letter-spacing: 0.1em; color: var(--ink-3); }
td.num, th.num { text-align: right; font-family: var(--font-mono); }

.assume { font-size: 14px; color: var(--ink-3); }
.assume li { margin-bottom: 5px; }
.privacy { font-size: 14px; color: var(--teal-deep); font-weight: 600; margin-top: 8px; }
.share { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.share .line {
  flex: 1 1 260px; font-style: italic; background: var(--wash-purple);
  border: var(--border-hard); padding: 10px 12px;
}
/* The hub's photo band — same lightning-struck edges and the same drift as the landing
   page's. SOURCE: index.html .slash (2026-08-19); keep the polygon in sync by hand. */
.slash {
  position: relative; overflow: hidden; background: var(--ink);
  display: grid; place-items: center;
  height: clamp(220px, 30vw, 360px); margin: 40px 0 36px;
  /* full-bleed: the band breaks out of the 720px column it lives in */
  width: 100vw; margin-left: calc(50% - 50vw);
  clip-path: polygon(0 6%, 27% 1%, 53% 8%, 79% 1%, 100% 5%, 100% 94%, 76% 99%, 47% 92%, 23% 99%, 0 95%);
}
.slash img {
  position: absolute; left: 0; top: -14%; width: 100%; height: 128%;
  object-fit: cover; display: block; z-index: 0; will-change: transform;
}
.slash::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(31,45,91,0.38), rgba(31,45,91,0.6)); z-index: 1; }
.slash p {
  position: relative; z-index: 2; margin: 0;
  font-family: var(--font-display); text-transform: uppercase; text-align: center;
  font-size: clamp(24px, 5vw, 44px); line-height: 0.98; color: var(--paper);
  text-shadow: 3px 3px 0 rgba(31,45,91,0.9);
}
.slash em { font-style: normal; color: var(--sun); }

/* The hub page: a section heading over a stack of link cards. These classes exist
   nowhere else — the tool pages use .card as a plain white block. */
.grid { margin: 40px 0; }
.grid > h2 {
  font-family: var(--font-display); font-size: clamp(22px, 4vw, 30px);
  text-transform: uppercase; letter-spacing: 0.02em; margin: 0 0 4px;
}
a.card {
  display: block; text-decoration: none; color: var(--ink);
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
a.card:hover, a.card:focus-visible {
  transform: translate(-3px, -3px); box-shadow: var(--hard-lg); border-color: var(--pink);
}
a.card h3 { margin: 0 0 6px; font-size: 20px; line-height: 1.2; }
a.card p { margin: 0; color: var(--ink-2); font-size: 15px; }

.funnel {
  margin: 44px 0; padding: 2px 0 2px 20px;
  border-left: 5px solid var(--pink); color: var(--ink-2);
}
.funnel p { margin: 0; }

.cta { background: var(--ink); color: var(--paper); padding: 26px 22px; margin: 34px 0;
       border: var(--border-hard); box-shadow: var(--hard-lg); }
.cta h2 { color: var(--paper); }
.cta p { margin: 0 0 14px; }
footer { padding: 30px 0 60px; font-size: 14px; color: var(--ink-3); }
footer a { color: var(--ink-2); }
.error { color: var(--pink-deep); font-weight: 700; }