/* Free browser tools (assets/tools.js). Same tokens and shapes as the question picker in content.css.
   Mobile first: one column, 48px+ tap targets, no layout shift (the tool ships hidden and appears once wired).
   Colors: use the tokens (--surface, --ink, --accent, --link, --bg), never a literal #fff, so dark mode works. */

:root { --surface: #fff; --surface-2: #F6EEFD; --link: #8A2BDB; --shadow: 0 8px 32px rgb(121 35 192 / .12); }

.tool {
  margin: 0 0 40px; padding: 24px; border-radius: 32px; background: rgb(var(--accent) / .075);
  display: flex; flex-direction: column; gap: 16px;
}
.tool[hidden], .age-gate[hidden], [data-gated][hidden] { display: none; }
/* Tool pages reserve the tool's height until it mounts (seo/build.mjs data-reserve), so nothing below it jumps. */
.tools-js .tool[hidden][data-reserve]:not([data-failed]) { display: flex; visibility: hidden; min-height: var(--reserve-m, 520px); }
@media (min-width: 600px) { .tools-js .tool[hidden][data-reserve]:not([data-failed]) { min-height: var(--reserve-d, 460px); } }
[data-gated][hidden] .tool[data-reserve] { display: none !important; }
/* Tools mount inside .prose: reset its paragraph, list and link styles so each tool controls its own. */
.tool p, .tool li { font-size: 16px; line-height: 24px; font-weight: 600; color: rgb(var(--ink) / .85); margin: 0; }
.tool ul, .tool ol { padding: 0; margin: 0; list-style: none; }
.tool li + li { margin-top: 0; }
.tool a { color: var(--link); font-weight: 750; }
.tool a.btn { color: #fff; text-decoration: none; }
.tool a.btn-secondary { color: rgb(var(--ink)); }
.tool h2, .tool h3 { margin: 0; }
.tool .tool-title { font-size: 20px; line-height: 28px; font-weight: 900; letter-spacing: -.01em; margin: 0; }
.tool .tool-sub { font-size: 15px; line-height: 22px; font-weight: 600; color: rgb(var(--ink) / .6); margin: -8px 0 0; }

/* Big result card (a question, a countdown, a pick) */
.tool .tool-card {
  min-height: 120px; display: grid; place-items: center; text-align: center; padding: 24px; border-radius: 24px;
  background: var(--surface); box-shadow: var(--shadow);
  font-size: 24px; line-height: 32px; font-weight: 850; letter-spacing: -.01em; color: rgb(var(--ink)); text-wrap: balance;
}
.tool .tool-card.is-new { animation: card-in .45s var(--ease-out) both; }
.tool .tool-card small { display: block; font-size: 14px; line-height: 20px; font-weight: 700; color: rgb(var(--ink) / .5); margin-top: 8px; }
.tool .tool-big { font-size: 48px; line-height: 56px; font-weight: 950; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }

.tool .tool-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.tool .tool-actions .btn-secondary { flex: 0 0 auto; }

/* Chips (single or multi select) */
.tool .tool-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tool .tool-chips button {
  min-height: 40px; padding: 0 16px; border-radius: 20px; font-size: 14px; font-weight: 750;
  background: var(--surface); color: rgb(var(--ink) / .7); box-shadow: inset 0 0 0 1px rgb(var(--ink) / .08);
  transition: background-color .2s ease, color .2s ease, transform .3s var(--ease-out);
}
/* Selected chips use the brand purple (#8A2BDB light, #B86EFF with dark text in dark mode), like the main buttons. */
.tool .tool-chips button[aria-pressed="true"] { background: var(--link); color: #fff; box-shadow: none; }
.tool .tool-chips button:active { transform: scale(.96); }

/* Form fields */
.tool .tool-field { display: flex; flex-direction: column; gap: 6px; }
.tool .tool-label { font-size: 14px; line-height: 20px; font-weight: 800; color: rgb(var(--ink) / .75); }
.tool .tool-hint { font-size: 13px; line-height: 18px; font-weight: 600; color: rgb(var(--ink) / .5); }
.tool input[type="text"], .tool input[type="date"], .tool input[type="time"], .tool input[type="datetime-local"],
.tool input[type="number"], .tool input[type="search"], .tool select, .tool textarea {
  width: 100%; min-height: 48px; padding: 10px 16px; border-radius: 16px; border: 0;
  background: var(--surface); color: rgb(var(--ink)); box-shadow: inset 0 0 0 1px rgb(var(--ink) / .12);
  font: inherit; font-size: 16px; font-weight: 650; /* 16px stops iOS zoom on focus */
}
.tool textarea { min-height: 96px; resize: vertical; }
.tool input:focus-visible, .tool select:focus-visible, .tool textarea:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px rgb(var(--accent)); }
.tool .tool-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Lists and grids inside a tool */
.tool .tool-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tool .tool-list li { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px; background: var(--surface); font-size: 16px; line-height: 24px; font-weight: 600; }
.tool .tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.tool .tool-stat { padding: 16px; border-radius: 20px; background: var(--surface); text-align: center; }
.tool .tool-stat b { display: block; font-size: 28px; line-height: 36px; font-weight: 950; font-variant-numeric: tabular-nums; }
.tool .tool-stat span { font-size: 13px; line-height: 18px; font-weight: 700; color: rgb(var(--ink) / .55); }
.tool .tool-meter { height: 12px; border-radius: 6px; background: rgb(var(--ink) / .08); overflow: hidden; }
.tool .tool-meter > span { display: block; height: 100%; background: var(--ramp); border-radius: 6px; transition: width .4s var(--ease-out); }

.tool .tool-note { font-size: 14px; line-height: 20px; font-weight: 650; color: rgb(var(--ink) / .55); margin: 0; }
.tool .tool-streak { font-size: 14px; line-height: 20px; font-weight: 800; color: var(--link); margin: 0; }
.tool .tool-cta { font-size: 15px; line-height: 22px; font-weight: 650; color: rgb(var(--ink) / .65); text-align: center; margin: 0; }
.tool .tool-cta a { color: var(--link); font-weight: 800; text-decoration: underline; text-decoration-color: rgb(var(--accent) / .35); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.tool .tool-fav[aria-pressed="true"] { color: #C0237A; }
.tool-offscreen { position: fixed; left: -9999px; opacity: 0; }

/* /tools hub */
.tools-hub .related-desc { display: block; }

/* 18+ age gate */
.age-gate { margin: 0 0 40px; padding: 32px 24px; border-radius: 32px; background: var(--surface); box-shadow: var(--shadow); text-align: center; display: flex; flex-direction: column; gap: 16px; align-items: center; }
.age-gate h2 { font-size: 28px; line-height: 36px; font-weight: 950; margin: 0; }
.age-gate p { font-size: 17px; line-height: 26px; font-weight: 600; color: rgb(var(--ink) / .7); margin: 0; max-width: 480px; }
.age-gate .tool-actions { justify-content: center; width: 100%; max-width: 420px; }

@media (max-width: 599px) {
  .tool { padding: 16px; border-radius: 24px; margin-left: -8px; margin-right: -8px; }
  .tool .tool-card { font-size: 20px; line-height: 28px; min-height: 140px; padding: 20px; }
  .tool .tool-big { font-size: 40px; line-height: 48px; }
  .tool .tool-actions { flex-direction: column; }
  .tool .tool-actions .btn { width: 100%; }
  .tool .tool-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .tool-card.is-new { animation: none; } }

/* Stacks: a tool's screens (setup, live view, result). [hidden] always wins inside a tool. */
.tool .tool-stack, .tool .tool-setup, .tool .tool-live { display: flex; flex-direction: column; gap: 16px; }
.tool [hidden] { display: none !important; }
.tool .tool-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }

/* Dark mode for pages that load the tools (tool pages, /tools, /18-plus). Guides stay light for now.
   It swaps the shared tokens and the few content.css / site.css surfaces that use a literal white. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12061F; --ink: 244 236 255; --card: #24113A; --accent: 184 110 255;
    --surface: #3A2260; --surface-2: #44296E; --link: #D3A6FF; --shadow: 0 8px 32px rgb(0 0 0 / .35);
    color-scheme: dark;
  }
  .nav.is-scrolled { background: rgb(18 6 31 / .8); }
  .btn-secondary, .tldr, .prose ol.q-list li, .picker-cats button, .picker-card, .quiz-options button,
  .faq details, .related-card, .stat, .age-gate { background: var(--surface); }
  .picker-cats button[aria-pressed="true"] { background: rgb(var(--ink)); color: #12061F; }
  .tool .tool-chips button[aria-pressed="true"] { background: rgb(var(--accent)); color: #12061F; }
  .prose a, .tool .tool-cta a { color: var(--link); }
  .tool { background: rgb(var(--accent) / .1); }
  .author-photo { box-shadow: 0 0 0 4px var(--bg); }
  /* Contrast: the eyebrow pill ("Free tool", "18+") and the glow, which read as a light smudge behind the header. */
  .eyebrow { color: var(--link); background: rgb(var(--accent) / .18); }
  .page-glow { height: 44svh; background: linear-gradient(180deg, rgb(184 110 255 / .14), rgb(184 110 255 / 0)); }
}
/* Light mode on desktop: a flatter glow, so no bright blob sits under the header. */
@media (min-width: 900px) and (prefers-color-scheme: light) {
  .tool-page .page-glow, .tools-hub-page .page-glow { background: linear-gradient(180deg, rgb(203 140 255 / .26), rgb(203 140 255 / 0)); }
}
/* "Take me back" on the age gate: a visible outlined button on the gate card in both modes. */
.age-gate .btn-secondary { background: transparent; color: rgb(var(--ink)); box-shadow: inset 0 0 0 2px rgb(var(--ink) / .22); }
.age-gate .btn-secondary:hover { background: rgb(var(--ink) / .06); }

/* Tool pages (body.tool-page): the tool is the product, so the hero stays short and the tool's main action
   lands on the first screen of a 390x844 phone. Sizes are fixed (no fluid type), so nothing shifts after load. */
.tool-page .article h1 { font-size: 40px; line-height: 48px; margin-bottom: 12px; }
.tool-page .article .tool-lede { font-size: 18px; line-height: 26px; margin-bottom: 24px; }
@media (max-width: 599px) {
  .tool-page .article { padding-top: calc(var(--nav-h) + 4px); }
  .tool-page .crumbs { font-size: 13px; line-height: 18px; margin-bottom: 8px; }
  .tool-page .article > .eyebrow { display: none; }
  .tool-page .article h1 { font-size: 26px; line-height: 32px; letter-spacing: -.02em; margin-bottom: 6px; }
  .tool-page .article .tool-lede { font-size: 15px; line-height: 22px; margin-bottom: 10px; }
  .tool-page .article > [data-gated] > .tool:first-of-type, .tool-page .article > .tool:first-of-type { padding-top: 12px; }
  .tool-page .article .age-gate { margin-top: 8px; }
}

/* /tools hub: search, group jump chips, one line per group under its heading */
.hub-find { display: flex; flex-direction: column; gap: 12px; margin: 0 0 8px; }
.hub-search input {
  width: 100%; min-height: 52px; padding: 12px 20px; border-radius: 26px; border: 0; font: inherit; font-size: 16px; font-weight: 650;
  background: var(--surface); color: rgb(var(--ink)); box-shadow: var(--shadow), inset 0 0 0 1px rgb(var(--ink) / .1);
}
.hub-search input:focus-visible { outline: 0; box-shadow: var(--shadow), inset 0 0 0 2px rgb(var(--accent)); }
.hub-jump { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -24px; padding: 0 24px 2px; }
.hub-jump::-webkit-scrollbar { display: none; }
.hub-jump a { flex: 0 0 auto; min-height: 36px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 18px; font-size: 14px; font-weight: 750; color: rgb(var(--ink) / .75); background: var(--surface); box-shadow: inset 0 0 0 1px rgb(var(--ink) / .08); }
.hub-jump a:hover { color: rgb(var(--ink)); }
.hub-jump[hidden], .hub-empty[hidden], .hub-group[hidden], .related-card[hidden], .related-card.has-icon[hidden] { display: none; }
.hub-empty { font-size: 16px; font-weight: 650; color: rgb(var(--ink) / .6); }
.hub-sub { margin: -8px 0 16px; font-size: 16px; line-height: 24px; font-weight: 600; color: rgb(var(--ink) / .55); }
.tools-hub .hub-group { scroll-margin-top: calc(var(--nav-h) + 16px); }
.tools-hub .related-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

@media (min-width: 600px) { .hub-jump { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; } }
@media (max-width: 599px) {
  .tools-hub-page .article { padding-top: calc(var(--nav-h) + 4px); }
  .tools-hub-page .article h1 { font-size: 30px; line-height: 36px; margin-bottom: 8px; }
  .tools-hub-page .article .lede { font-size: 16px; line-height: 24px; margin-bottom: 20px; }
}
@media (prefers-color-scheme: dark) { .related-eyebrow { color: var(--link); } }

/* Tool pages: the header slides up while scrolling down (assets/tools.js tuckNav) and back on scroll up. */
.tool-page .nav { transition: transform .3s var(--ease-out), background-color .35s ease, box-shadow .35s ease; }
.tool-page .nav.is-tucked { transform: translateY(-100%); box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .tool-page .nav { transition: none; } }

/* k.actions(): a row of 2 to 3 short buttons that does not stack on phones. */
.tool .tool-actions.tool-actions-row { flex-direction: row; flex-wrap: nowrap; }
.tool .tool-actions.tool-actions-row > .btn { flex: 1 1 0; width: auto; min-width: 0; padding-left: 12px; padding-right: 12px; }
.tool .tool-actions.tool-actions-row.is-end { justify-content: flex-end; }
.tool .tool-actions.tool-actions-row.is-end > .btn { flex: 0 0 auto; }

/* k.chromeless(): a partner opened a gift link; the gift fills the first screen. */
.tool-chromeless .nav, .tool-chromeless .crumbs, .tool-chromeless .article > .eyebrow, .tool-chromeless .article > h1, .tool-chromeless .tool-lede, .tool-chromeless .page-glow { display: none; }
.tool-chromeless .article { padding-top: 16px; }

/* Dark mode contrast for literal purples in content.css (byline, provenance, quick answer label). */
@media (prefers-color-scheme: dark) {
  .meta-line a, .provenance a, .tldr-label, .tool-page .prose a { color: var(--link); }
}
/* Age gate buttons: always a gap; full width on phones. */
.age-gate .tool-actions { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 599px) { .age-gate .tool-actions { flex-direction: column; } .age-gate .tool-actions .btn { width: 100%; } }
/* Keyboard hints mean nothing on touch screens. */
@media (hover: none) { .tool .tool-kbd, .tool [data-kbd-hint], .tool .u14-keys, .tool .nw-keys { display: none; } }
/* /tools hub: wider on desktop, 3 columns. */
@media (min-width: 1000px) {
  .tools-hub { max-width: 1100px; }
  .tools-hub .related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tools-hub .lede { max-width: 760px; }
}

/* Hub cards: a group icon tile; on phones the card is a compact row (icon left, title and one line below). */
.hub-icon { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: rgb(var(--accent) / .1); color: var(--link); }
.hub-icon svg { width: 22px; height: 22px; }
.related-card.has-icon { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-items: start; align-content: start; }
.related-card.has-icon .related-eyebrow { display: none; }
.related-card.has-icon .hub-icon { grid-row: span 3; }
.related-card.has-icon > :not(.hub-icon) { grid-column: 2; }
.hub-jump a .hub-icon { width: 20px; height: 20px; margin: 0 6px 0 -4px; border-radius: 0; background: none; }
.hub-jump a .hub-icon svg { width: 16px; height: 16px; }
.hub-jump a { min-height: 44px; }
.hub-popular .related-card { background: linear-gradient(135deg, rgb(var(--accent) / .08), transparent 60%), var(--surface); }
.hub-popular .hub-icon { background: var(--link); color: var(--surface); }
@media (max-width: 599px) {
  .tools-hub .related-grid { grid-template-columns: 1fr; gap: 8px; }
  .tools-hub .related-card.has-icon { padding: 14px 16px; border-radius: 20px; align-items: center; }
  .tools-hub .related-card.has-icon .related-title { font-size: 17px; line-height: 22px; }
  .tools-hub .related-card.has-icon .related-desc { font-size: 14px; line-height: 20px; -webkit-line-clamp: 1; }
}
@media (min-width: 600px) {
  .related-card.has-icon { grid-template-columns: minmax(0, 1fr); }
  .related-card.has-icon .hub-icon { grid-row: auto; margin-bottom: 8px; }
  .related-card.has-icon > :not(.hub-icon) { grid-column: 1; }
}

/* Icon-only buttons are at least 44px on every side (Apple HIG tap target); seo/tools-smoke.mjs fails on smaller ones. */
.tool :is(.u28-icon, .gt-copy, .u23-icon-btn, .u13-more-chips, .sb-link-mini, .bg-swatch, .u12-row-more, .u12-icon, .tg-fav, .lv-ib, .tz-quick-go, .zc-swap, .agy-step, .u2-step-b, .deck-icon, .tz-icon, .fdg-more, .tg-icon) { min-width: 44px !important; min-height: 44px !important; flex-shrink: 0; }