/* ──────────────────────────────────────────────────────────────────────────
   Free tools (content/tools/*). Loaded only on /tools/ routes, after
   content-pages.css; reuses the theme tokens so dark/light come for free.
   ────────────────────────────────────────────────────────────────────────── */

/* The free-plan offer under the form: one quiet row, a ghost button. */
.section-promo { padding: 0 0 clamp(28px, 4vw, 44px); }
.promo-divider { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; color: var(--muted-2); font-family: var(--mono); font-size: 12px; letter-spacing: .5px; text-transform: uppercase; }
.promo-divider::before, .promo-divider::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--border-solid); }
.promo-strip { display: flex; align-items: center; justify-content: space-between; gap: clamp(14px, 2.5vw, 28px); padding: 16px clamp(18px, 2.5vw, 24px); border-radius: var(--radius); border: 1px solid var(--border-2, var(--border)); background: var(--panel); }
.promo-copy { min-width: 0; }
.promo-heading { font: 700 16px/1.35 var(--sans); margin: 0 0 4px; color: var(--text); }
.promo-text { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 0; }
.promo-btn { flex: none; white-space: nowrap; }
@media (max-width: 640px) { .promo-strip { flex-direction: column; align-items: stretch; } .promo-btn { justify-content: center; } }

/* The tool page hero: the standard content-page hero (section label, title, sub),
   a little shorter at the bottom so the form follows without a gap. */
.content-page[data-collection="tools"] .page-hero { padding: clamp(48px, 7vw, 92px) 0 clamp(14px, 2.5vw, 26px); }
.content-page[data-collection="tools"] .page-hero .section-label { display: block; margin-bottom: 14px; }
.content-page[data-collection="tools"] .page-hero-title { margin: 0 0 14px; }
.content-page[data-collection="tools"] .page-hero-sub { margin-bottom: 0; }

.section-tool { padding: clamp(6px, 1.5vw, 16px) 0 clamp(18px, 2.5vw, 28px); }
.tool-title { text-align: center; }
.tool-sub { max-width: 640px; margin: 0 auto 26px; text-align: center; color: var(--muted); line-height: 1.6; }

/* The panels are switched with the hidden attribute; the buttons, badges and the
   watch row set their own display, which would otherwise win over it. */
.tool-card [hidden] { display: none !important; }
.tool-card { background: var(--panel); border: 1px solid var(--border-2, var(--border)); border-radius: 16px; padding: clamp(20px, 3vw, 30px); box-shadow: var(--shadow-md); max-width: 760px; margin: 0 auto; }

.tool-label { display: block; font: 600 14px/1.4 var(--sans); color: var(--text); margin-bottom: 10px; }
.tool-row { display: flex; gap: 10px; align-items: stretch; }
.tool-input { flex: 1 1 auto; min-width: 0; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border-2, var(--border)); background: var(--bg-2); color: var(--text); font: 500 15px/1.4 var(--sans); outline: none; transition: border-color .15s ease, box-shadow .15s ease; }
.tool-input::placeholder { color: var(--muted-2); }
.tool-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.tool-input[aria-invalid="true"] { border-color: var(--danger); }
.tool-btn { flex: 0 0 auto; white-space: nowrap; }
.tool-btn[disabled] { opacity: .6; cursor: progress; }
@media (max-width: 560px) { .tool-row { flex-direction: column; } .tool-btn { width: 100%; justify-content: center; } }

/* Reserve the widget's height so the card does not jump when Turnstile paints. */
.turnstile-row { margin: 12px 0 4px; min-height: 65px; }
.turnstile-row:empty { min-height: 0; margin: 0; }

.tool-fine { color: var(--muted-2); font-size: 13px; line-height: 1.55; margin: 10px 0 0; }
.tool-error { color: var(--danger); font-size: 14px; line-height: 1.5; margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; background: color-mix(in srgb, var(--danger) 10%, transparent); }
.tool-eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .5px; text-transform: uppercase; color: var(--accent); font-weight: 700; margin: 0 0 8px; }
.tool-h3 { font: 800 clamp(20px, 2.6vw, 26px)/1.2 var(--sans); letter-spacing: -.01em; margin: 0 0 16px; color: var(--text); }

.tool-canary { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--accent); background: var(--accent-glow-2); color: inherit; }
.tool-avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--bg-3) center/cover no-repeat; border: 1px solid var(--border-2, var(--border)); display: grid; place-items: center; font: 700 15px/1 var(--sans); color: var(--muted); letter-spacing: .02em; }
.tool-avatar--sm { width: 40px; height: 40px; font-size: 14px; }
.tool-avatar.is-initials { background-image: none; background-color: var(--accent-glow); color: var(--accent); }

/* Whose sending is under test: shown the moment the profile resolves. */
.tool-subject { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; padding: 0 0 16px; border-bottom: 1px solid var(--border); }
.tool-subject-text { display: grid; gap: 1px; min-width: 0; }
.tool-subject-kicker { font-family: var(--mono); font-size: 11px; letter-spacing: .5px; text-transform: uppercase; color: var(--muted-2); }
.tool-subject-text strong { color: var(--text); font-size: 15px; }
.tool-subject-line { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Block 1, the receiving profile. The frame never changes; the URL is one click
   to copy (for an account logged in elsewhere), the slot on the right is the
   Open profile button while the check runs and the verdict badge after it. */
.tool-canary-text { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; min-width: 0; flex: 1 1 auto; }
.tool-canary-text strong { color: var(--text); font-size: 16px; }
.tool-canary-url { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; margin: 0; padding: 4px 8px 4px 0; border: 0; background: transparent; color: var(--muted); font-family: var(--mono); font-size: 12.5px; text-align: left; cursor: pointer; border-radius: 6px; transition: color .15s ease; }
.tool-canary-url:hover { color: var(--text-2); }
.tool-canary-url .url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tool-canary-url svg { flex: none; width: 14px; height: 14px; display: block; }
.tool-canary-url .ico-done { display: none; }
.tool-canary-url.is-copied { color: var(--accent); }
.tool-canary-url.is-copied .ico-copy { display: none; }
.tool-canary-url.is-copied .ico-done { display: block; }
.tool-canary-slot { flex: none; }
.btn-open { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: transparent; }
.btn-open:hover { border-color: var(--accent); background: var(--accent-glow-2); }

.tool-badge { display: inline-flex; align-items: center; gap: 7px; flex: none; font-family: var(--mono); font-size: 12px; letter-spacing: .8px; text-transform: uppercase; font-weight: 700; padding: 8px 12px; border-radius: 999px; white-space: nowrap; }
.tool-badge svg { width: 14px; height: 14px; display: block; }
.tool-badge.is-mint { color: var(--mint); background: color-mix(in srgb, var(--mint) 14%, transparent); }
.tool-badge.is-warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.tool-badge.is-muted { color: var(--muted); background: var(--bg-3); border: 1px solid var(--border-2, var(--border)); }

/* Block 2, the description: the steps and the button, the watch to its right
   once pressed, the verdict badge and text at the end. */
.tool-desc { margin-top: 20px; }
.tool-steps { margin: 0 0 16px; padding-left: 22px; color: var(--text-2); line-height: 1.6; }
.tool-steps li + li { margin-top: 8px; }
.tool-steps strong { color: var(--text); }
.tool-steps.is-muted { color: var(--muted); }
.tool-steps.is-muted strong { color: var(--text-2); }
.tool-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tool-row-fine { flex: 1 1 220px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.tool-row .btn-primary .ico-done { display: none; width: 16px; height: 16px; }
.tool-row .btn-primary[disabled] { cursor: progress; opacity: .7; }
.tool-row .btn-primary.is-done { background: transparent; color: var(--text-2); border-color: var(--border-2, var(--border)); box-shadow: none; opacity: 1; cursor: default; }
.tool-row .btn-primary.is-done .ico-done { display: block; color: var(--mint); }
.tool-watch { flex: 1 1 260px; display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-2); min-width: 0; }
.tool-watch .tool-countdown { margin-left: auto; font-family: var(--mono); font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tool-pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--accent-glow); animation: tool-pulse 1.6s ease-out infinite; flex: none; }
@keyframes tool-pulse { 0% { box-shadow: 0 0 0 0 var(--accent-glow); } 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .tool-pulse { animation: none; } }
.tool-verdict { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.tool-verdict .tool-badge { margin-top: 2px; }
.tool-verdict-body { flex: 1 1 320px; min-width: 0; }
.tool-verdict-text { color: var(--text-2); line-height: 1.65; margin: 0; }
.tool-verdict-text strong { color: var(--text); }
.tool-verdict-list { margin: 12px 0 0; padding-left: 20px; color: var(--text-2); line-height: 1.6; }
.tool-verdict-list li + li { margin-top: 6px; }

/* Block 3, the next step: the verdict's own offer, then the button(s). */
.tool-next { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); }
.tool-offer { margin: 0 0 14px; padding: 14px 16px; border-radius: 10px; background: var(--accent-glow-2); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.tool-offer-title { display: block; color: var(--text); font-size: 15px; margin: 0 0 6px; }
.tool-offer-text { color: var(--text-2); font-size: 14px; line-height: 1.55; margin: 0; }
.tool-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

@media (max-width: 560px) {
  .tool-canary { flex-wrap: wrap; }
  .tool-canary-text { flex: 1 1 0; }
  .tool-canary-slot { width: 100%; padding-left: 58px; }
}