/* ═══════════════════════════════════════════════════════════
   THE FILTER AI · onboarding, Pro and daily prompt components.
   Shared by every page. Uses the tokens each page already defines
   (--surface, --line, --brand, --read, --muted ...). Mobile first,
   checked at 375px. No dividers: space and surface only.
   ═══════════════════════════════════════════════════════════ */

.mono { font-family: var(--mono, "IBM Plex Mono", ui-monospace, monospace); }

/* ── Where do you want to start? ─────────────────────── */
.chooser { display: grid; gap: .75rem; grid-template-columns: 1fr; margin-top: 1.4rem; }
@media (min-width: 760px) { .chooser { grid-template-columns: repeat(3, 1fr); } }
.choice {
  display: flex; flex-direction: column; gap: .35rem; text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.05rem;
  color: var(--read); font: inherit; text-decoration: none; min-height: 44px;
  transition: border-color .2s ease, transform .2s ease;
}
.choice b { color: var(--text); font-size: 1.04rem; }
.choice span { font-size: .93rem; line-height: 1.5; }
.choice .go { margin-top: .25rem; color: var(--brand); font-family: var(--mono, "IBM Plex Mono", monospace); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.choice:hover, .choice:focus-visible { border-color: color-mix(in srgb, var(--brand) 55%, var(--line)); transform: translateY(-1px); }
.choice.on { border-color: var(--brand); }

/* ── Continue where you left off ─────────────────────── */
.continue {
  display: none; align-items: center; gap: .9rem; flex-wrap: wrap; justify-content: space-between;
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--brand) 40%, var(--line));
  border-radius: 14px; padding: .85rem 1rem; margin: 1.2rem 0 0;
}
.continue.show { display: flex; }
.continue .where { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.continue .lbl { font-family: var(--mono, "IBM Plex Mono", monospace); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); }
.continue b { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.continue .btn { flex: none; }

/* ── Progress ring on step cards ─────────────────────── */
.pring { width: 40px; height: 40px; flex: none; position: relative; display: inline-grid; place-items: center; }
.pring svg { width: 40px; height: 40px; transform: rotate(-90deg); }
.pring circle { fill: none; stroke-width: 4; }
.pring .trk { stroke: var(--line); }
.pring .val { stroke: var(--brand); stroke-linecap: round; transition: stroke-dashoffset .6s ease; }
.pring .pct { position: absolute; font: 600 .62rem/1 var(--mono, "IBM Plex Mono", monospace); color: var(--read); }
.hubcard .pring { position: absolute; top: 14px; right: 14px; }
.hubcard { position: relative; }
.hubcard.done .kicker::after { content: " · finished"; color: var(--safe); }

/* ── Save points inside step 1 ───────────────────────── */
.savepoint {
  margin: 2.4rem 0 1rem; background: var(--surface); border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--line));
  border-radius: 16px; padding: 1.15rem 1.15rem 1.25rem;
}
.savepoint .lbl { font-family: var(--mono, "IBM Plex Mono", monospace); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); margin: 0 0 .4rem; }
.savepoint h3 { margin: 0 0 .4rem; color: var(--text); font-size: 1.15rem; }
.savepoint .q { color: var(--text); margin: .8rem 0 .55rem; font-weight: 600; }
.savepoint .opts { display: grid; gap: .5rem; }
.savepoint .opt {
  text-align: left; background: var(--surface-2); border: 1px solid var(--line); color: var(--read);
  border-radius: 11px; padding: .7rem .85rem; font: inherit; cursor: pointer; min-height: 44px;
}
.savepoint .opt.right { border-color: var(--safe); color: var(--text); }
.savepoint .opt.wrong { border-color: var(--threat); }
.savepoint .fb { margin: .7rem 0 0; color: var(--read); min-height: 1.2em; }
.savepoint .saved { margin-top: .9rem; display: none; gap: .7rem; flex-wrap: wrap; align-items: center; }
.savepoint.done .saved { display: flex; }
.savepoint .saved p { margin: 0; color: var(--safe); font-family: var(--mono, "IBM Plex Mono", monospace); font-size: .8rem; }
.part-tag { display: inline-block; font-family: var(--mono, "IBM Plex Mono", monospace); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); margin: 1.4rem 0 .2rem; }
.toc .part-head { display: block; font-family: var(--mono, "IBM Plex Mono", monospace); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: .9rem 0 .25rem; }

/* ── Tap to define ───────────────────────────────────── */
.term {
  background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: help;
  text-decoration: underline dotted color-mix(in srgb, var(--brand) 70%, transparent); text-underline-offset: 3px;
}
.term-pop {
  position: absolute; z-index: 60; max-width: min(320px, calc(100vw - 32px));
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: .75rem .85rem;
  color: var(--read); font-size: .92rem; line-height: 1.5; box-shadow: var(--shadow, 0 16px 40px -30px rgba(0,0,0,.8));
}
.term-pop b { color: var(--text); display: block; margin-bottom: .2rem; }
.term-pop a { color: var(--brand); }

/* ── Pricing: three plans, the founding banner, modes ── */
.compare.three { grid-template-columns: 1fr; }
@media (min-width: 900px) { .compare.three { grid-template-columns: 1fr 1fr 1fr; } }
.plan .best { display: inline-block; align-self: flex-start; font-family: var(--mono, "IBM Plex Mono", monospace); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--on-accent); background: var(--brand); border-radius: 999px; padding: 3px 9px; margin-bottom: .4rem; }
.plan .alt { display: block; margin-top: .55rem; text-align: center; color: var(--muted); font-size: .9rem; }
.plan .alt a { color: var(--read); }
.founder {
  display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; justify-content: space-between;
  margin-top: 1.6rem; padding: .9rem 1.05rem; border-radius: 14px;
  background: color-mix(in srgb, var(--brand) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--brand) 45%, var(--line));
}
.founder b { color: var(--text); }
.founder .left { font-family: var(--mono, "IBM Plex Mono", monospace); font-size: .82rem; color: var(--brand); }
.trainer-line { margin-top: 1rem; color: var(--read); }
.trainer-line a { color: var(--brand); }
.pastbuyer { margin-top: .8rem; color: var(--muted); font-size: .95rem; }
/* What is on sale depends on data/site.json "mode". Only the parts that do
   not match are hidden, so every element keeps its own layout. */
html:not([data-mode]) [data-show]:not([data-show~="core"]),
html[data-mode="core"] [data-show]:not([data-show~="core"]),
html[data-mode="presale"] [data-show]:not([data-show~="presale"]),
html[data-mode="pro"] [data-show]:not([data-show~="pro"]) { display: none !important; }

/* ── Optional email sign-up (never a gate) ───────────── */
.optin { margin-top: 1.4rem; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 1rem; }
.optin p { margin: 0 0 .6rem; color: var(--read); }
.optin form { display: flex; gap: .5rem; flex-wrap: wrap; }
.optin input[type="email"] {
  flex: 1 1 200px; min-height: 44px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px;
  color: var(--text); padding: 0 .8rem; font: inherit;
}
.optin small { display: block; margin-top: .5rem; color: var(--muted); }

/* ── Footer privacy line ─────────────────────────────── */
.foot-privacy { color: var(--muted); font-size: .88rem; margin: .9rem 0 0; }
.foot-privacy a { color: var(--read); }

/* ── Screenshots ─────────────────────────────────────── */
.shot img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); }

/* ── Roadmap ─────────────────────────────────────────── */
.road { display: grid; gap: .8rem; margin-top: 1rem; }
.road-item { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.05rem; }
.road-item .meta { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; font-family: var(--mono, "IBM Plex Mono", monospace); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.road-item .status { color: var(--on-accent); background: var(--brand); border-radius: 999px; padding: 2px 8px; }
.road-item .status.next { background: var(--surface-2); color: var(--read); border: 1px solid var(--line); }
.road-item .status.idea { background: transparent; color: var(--violet); border: 1px solid color-mix(in srgb, var(--violet) 45%, var(--line)); }
.road-item .status.shipped { background: color-mix(in srgb, var(--safe) 85%, black); }
.road-item h3 { margin: .45rem 0 .3rem; color: var(--text); }
.road-item p { margin: 0; color: var(--read); }
.road-item .acts { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .75rem; }
.road-item .tag { font-family: var(--mono, "IBM Plex Mono", monospace); font-size: .7rem; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }
.vote.voted { border-color: var(--brand); color: var(--brand); }
@media (min-width: 900px) {
  html[data-mode="presale"] .compare.three,
  html[data-mode="pro"] .compare.three { grid-template-columns: 1fr 1.15fr; }
}

/* ── /today: the daily prompt ────────────────────────── */
.today-wrap, .road-wrap { padding: 2.2rem 0 3rem; }
.today-h { font-size: clamp(1.9rem, 7vw, 2.8rem); line-height: 1.08; letter-spacing: -.02em; color: var(--text); margin: .3rem 0 .6rem; }
.today-sub { color: var(--read); margin: 0 0 1.3rem; }
.road-wrap h2 { color: var(--text); font-size: 1.15rem; margin: 1.8rem 0 .4rem; }
.road-wrap p { color: var(--read); }
.today-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 1rem 1.05rem 1.1rem; }
.tc-bar { display: flex; align-items: center; gap: .55rem; font-family: var(--mono, "IBM Plex Mono", monospace); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .7rem; }
.tc-msg { color: var(--text); font-size: 1.08rem; line-height: 1.55; margin: 0 0 1rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.tc-acts { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.tc-acts .btn { min-height: 52px; justify-content: center; font-weight: 600; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); }
.tc-acts .tc-allow:not([disabled]):hover { border-color: var(--safe); }
.tc-acts .tc-block:not([disabled]):hover { border-color: var(--threat); }
.tc-acts .btn.picked.tc-allow { border-color: var(--safe); color: var(--safe); }
.tc-acts .btn.picked.tc-block { border-color: var(--threat); color: var(--threat); }
.today-result { margin-top: 1rem; }
.tr-verdict { font-size: 1.25rem; font-weight: 700; margin: .2rem 0 .8rem; }
.tr-verdict.good { color: var(--safe); }
.tr-verdict.bad { color: var(--threat); }
.tr-box { background: var(--surface-2); border-radius: 12px; padding: .8rem .9rem; margin-bottom: .6rem; }
.tr-box p { margin: 0; color: var(--read); }
.tr-box .tr-k { font-family: var(--mono, "IBM Plex Mono", monospace); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: .3rem; }
.tr-streak { display: flex; gap: .6rem; flex-wrap: wrap; margin: .9rem 0; font-family: var(--mono, "IBM Plex Mono", monospace); font-size: .85rem; color: var(--amber); }
.tr-streak span { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: .3rem .7rem; }
.tr-acts { display: flex; gap: .6rem; flex-wrap: wrap; }
.tr-acts .btn { flex: 1 1 160px; justify-content: center; }
.tr-shared { color: var(--safe); min-height: 1.2em; font-size: .92rem; margin: .5rem 0 0; }
.tr-next, .tr-pro { color: var(--read); margin: .7rem 0 0; }
.tr-next a, .tr-pro a, .today-foot a { color: var(--brand); }
.today-foot { color: var(--muted); font-size: .92rem; margin-top: 1.6rem; }
.install { margin-top: 1.2rem; background: var(--surface); border: 1px dashed color-mix(in srgb, var(--brand) 50%, var(--line)); border-radius: 14px; padding: .85rem 1rem; color: var(--read); }
.install b { color: var(--text); }
.install .btn { margin-top: .6rem; }
.install .x { float: right; background: none; border: 0; color: var(--muted); font: inherit; cursor: pointer; min-width: 44px; min-height: 44px; margin: -.6rem -.6rem 0 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pro-note { color: var(--muted); }

/* Five nav items fit a 375px phone without scrolling. */
@media (max-width: 440px) {
  .nav-links { gap: .35rem; }
  .nav-links a { letter-spacing: .04em; padding: .45rem .22rem; font-size: .68rem; }
}

/* Incident lab cards and CVE badges, shared by /incidents/ and home. */
.lab-grid { display: grid; gap: 14px; grid-template-columns: 1fr; margin-top: 14px; }
@media (min-width: 680px) { .lab-grid { grid-template-columns: 1fr 1fr; } }
.lab-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px 17px; display: flex; flex-direction: column; gap: .5rem; }
.lab-card.glow { border-color: color-mix(in srgb, var(--brand) 42%, var(--line)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 16%, transparent), 0 16px 44px -30px color-mix(in srgb, var(--brand) 75%, black); }
.lab-card.glow:hover { border-color: var(--brand); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 38%, transparent), 0 0 30px -8px color-mix(in srgb, var(--brand) 55%, transparent); }
.lab-card h3 { margin: .15rem 0; color: var(--text); font-size: 1.12rem; line-height: 1.22; }
.lab-card p { margin: 0; color: var(--read); font-size: .95rem; }
.lab-card .btn { margin-top: auto; }
.lab-top { display: flex; gap: .45rem; flex-wrap: wrap; align-items: center; }
.inc-cve { font-family: var(--mono, monospace); font-size: .76rem; letter-spacing: .04em; color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--brand) 45%, var(--line)); border-radius: 999px; padding: 3px 9px; }
.inc-sev { font-family: var(--mono, monospace); font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; border-radius: 999px; padding: 3px 8px; border: 1px solid var(--line); color: var(--muted); }
.inc-sev.inc-critical { color: var(--threat); border-color: color-mix(in srgb, var(--threat) 55%, var(--line)); background: color-mix(in srgb, var(--threat) 12%, transparent); }
.inc-sev.inc-high { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 55%, var(--line)); background: color-mix(in srgb, var(--amber) 10%, transparent); }
.inc-sev.inc-kev { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 55%, var(--line)); }
a.lab-card { text-decoration: none; }
a.lab-card:hover h3 { color: var(--brand-hi, var(--brand)); }

/* Optional reader counter (off by default), a quiet retro touch. */
#visitors { margin-top: 1.2rem; }
.vc-count { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.vc-label { font-family: var(--mono, monospace); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.vc-n { display: inline-flex; gap: 3px; }
.vc-n i { font-family: var(--mono, monospace); font-style: normal; font-weight: 700; color: var(--brand); background: var(--surface); border: 1px solid color-mix(in srgb, var(--brand) 40%, var(--line)); border-radius: 5px; padding: 2px 6px; font-size: .95rem; }
.vc-flags { display: flex; flex-wrap: wrap; gap: .4rem .8rem; margin-top: .7rem; }
.vc-c { font-family: var(--mono, monospace); font-size: .82rem; color: var(--read); }
.vc-c b { color: var(--text); }
.vc-note { color: var(--muted); font-size: .82rem; margin: .6rem 0 0; }

/* Product screenshots on pages that do not carry the home page's own styles. */
.shot { margin: 0; }
.shot figcaption { margin-top: .6rem; font-size: .86rem; color: var(--muted); line-height: 1.5; }

/* Touch targets. On a finger-driven screen every control is at least 44px
   tall, the smallest a thumb can hit reliably. Mouse and trackpad keep the
   tighter look, so nothing changes on a laptop. */
@media (pointer: coarse) {
  .chip,
  .calc-presets button,
  .filters button,
  .seg button { min-height: 44px; display: inline-flex; align-items: center; }
  .calc-row input[type="range"] { height: 44px; }
}