/* ============================================================================
   POISE.SE — tools stylesheet (redesign 2026, Phase 2 batch A)
   Loaded only on tool pages (slug table: 'css' => 'tools'). Builds on the
   tokens in site.css; the JS files keep their pre-2026 class names, so the
   selectors below are the contract with tools.js, utilities.js,
   security-check.js and email-spoofing.js.
   Rules: classes only (no inline styles), flat-dash names, radius 2px,
   1px borders, mono kickers, serif only for the h1 and the grade letter.
   ========================================================================== */

:root {
    --ok: var(--success);
    --ok-bg: #e8f1eb;
    --warn: #8a5a12;
    --warn-bg: #faf1e2;
    --err: var(--error);
    --err-bg: #f8e9ec;
    --info: #3a4a6b;
    --info-bg: #eceff4;
    --accent-bg: #f6e9ee;
}

/* ── Page frame ── */
.tool-page { padding-top: 0; padding-bottom: 88px; display: flex; flex-direction: column; gap: 24px; }
.tool-page-hub { gap: 48px; }
.tool-hero { padding-bottom: 48px; gap: 18px; }
.tool-hero .mono { display: flex; gap: 6px 18px; flex-wrap: wrap; }
.tool-context { max-width: 760px; display: flex; flex-direction: column; gap: 12px; font-size: 15px; line-height: 1.65; color: var(--muted); padding-top: 24px; border-top: 1px solid var(--border); }
.tool-context h2 { font-size: 17px; font-weight: 600; color: var(--ink); }
.tool-context strong { color: var(--ink); font-weight: 600; }
.tool-context-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }

/* results scroll under the sticky header otherwise */
#audit-overall, #audit-sections, #spoof-verdict, #spoof-records, .tool-results, .tool-panel { scroll-margin-top: calc(var(--header-h) + 16px); }

/* ── Hub (tiles) ── */
.hub-section { display: flex; flex-direction: column; gap: 16px; }
.hub-section-title { font-family: var(--font-mono); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 500; padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.tile-badge { font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-2); }
.tile-badge-live::before, .tile-badge-browser::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; }
.tile-badge-live::before { background: var(--info); }
.tile-badge-browser::before { background: var(--ok); }
.tile-more { margin-top: auto; padding-top: 10px; font-family: var(--font-mono); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }

/* ── Tab navigation (tools.js / utilities.js toggle .active) ── */
.tool-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.tool-btn { font: inherit; font-size: 15px; padding: 10px 16px; min-height: 44px; border-radius: var(--radius); cursor: pointer; border: 1px solid var(--border-input); background: var(--surface); color: var(--ink); }
.tool-btn:hover { border-color: var(--ink); }
.tool-btn.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.tool-panel { display: none; }
.tool-panel.active { display: block; }

/* ── Tool card (one per panel) ── */
.tool-card { background: var(--surface); border: 1px solid var(--border); padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.tool-card-title { font-size: 20px; font-weight: 600; line-height: 1.3; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tool-card-desc { font-size: 16px; line-height: 1.6; color: var(--muted); max-width: 680px; margin-top: -8px; }

/* ── Form controls ── */
.tool-input-row { display: flex; gap: 16px; flex-wrap: wrap; }
.tool-input-group { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 8px; }
.tool-input-group label, .tool-section-label { font-size: 14px; font-weight: 500; color: var(--ink); }
.tool-section-label { display: block; margin-bottom: -8px; }
.tool-input-group input[type="text"], .tool-input-group select {
    font: inherit; font-size: 16px; padding: 13px 14px; border: 1px solid var(--border-input); border-radius: var(--radius);
    background: var(--surface); color: var(--ink); width: 100%; min-width: 0;
}
.tool-input-group select { appearance: none; -webkit-appearance: none; padding-right: 36px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231c1a19' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; cursor: pointer; }
.tool-input-group input::placeholder, .audit-input::placeholder { color: var(--muted-2); }
.tool-input-group-narrow { flex: 0 1 160px; min-width: 140px; }
.tool-input-group-medium { flex: 0 1 260px; min-width: 200px; }
.tool-input-group-port { flex: 0 1 140px; min-width: 120px; }
#dns-custom-row { display: none; }
#dns-custom-row.tool-visible { display: flex; }

/* buttons (JS reads .tool-action-btn; .copied set after clipboard writes) */
.tool-btn-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.tool-action-btn { font: inherit; font-size: 16px; font-weight: 500; line-height: 1.2; padding: 15px 24px; border-radius: var(--radius); cursor: pointer; border: 1px solid var(--accent); background: var(--accent); color: #fff; white-space: nowrap; }
.tool-action-btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.tool-action-btn:disabled { background: var(--border-input); border-color: var(--border-input); color: #fff; cursor: not-allowed; }
.tool-action-btn-outline { background: transparent; border-color: var(--ink); color: var(--ink); }
.tool-action-btn-outline:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.tool-action-btn-sm { padding: 11px 16px; font-size: 15px; }
.tool-action-btn.copied, .tool-action-btn-outline.copied { background: var(--ok); border-color: var(--ok); color: #fff; }


/* small toggles (DNS record types, presets, service checks) */
.dns-types-grid, .dns-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.dns-type-toggle, .dns-preset-btn { font: inherit; font-size: 14px; padding: 8px 14px; min-height: 40px; border-radius: var(--radius); cursor: pointer; border: 1px solid var(--border-input); background: var(--surface); color: var(--ink); user-select: none; }
.dns-type-toggle:hover, .dns-preset-btn:hover { border-color: var(--ink); }
.dns-type-toggle.selected { background: var(--ink); border-color: var(--ink); color: #fff; }
.dns-preset-btn { font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.dns-preset-btn-info { color: var(--info); }
.dns-preset-btn-success { color: var(--ok); }
.dns-preset-btn-warn { color: var(--warn); }
.dns-preset-btn-info:hover { border-color: var(--info); }
.dns-preset-btn-success:hover { border-color: var(--ok); }
.dns-preset-btn-warn:hover { border-color: var(--warn); }

/* ── Results (tools.js markup) ── */
.tool-results:empty { display: none; }
.tool-results { display: flex; flex-direction: column; gap: 12px; }
.tool-result-section, .dns-domain-group { border: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; }
.tool-result-title, .dns-domain-header { font-family: var(--font-mono); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 12px 18px; background: var(--group-row); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dns-domain-header { font-family: var(--font-sans); font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); }
.tool-result-row { display: flex; justify-content: space-between; gap: 8px 24px; padding: 11px 18px; border-bottom: 1px solid var(--border); font-size: 14px; line-height: 1.5; }
.tool-result-row:last-child { border-bottom: 0; }
.tool-result-key { color: var(--muted); flex: 0 0 auto; min-width: 120px; max-width: 40%; }
.tool-result-key small { font-size: 12px; }
.tool-result-key-flex { display: flex; align-items: center; gap: 6px; }
.tool-result-value { font-family: var(--font-mono); font-size: 13px; word-break: break-all; text-align: right; flex: 1; color: var(--ink); }
.tool-result-value-error { color: var(--err); text-align: left; }
.tool-text-dim { color: var(--muted-2); }
.tool-text-sm { font-size: 13px; }
.tool-text-success { color: var(--ok); }
.tool-text-warn { color: var(--warn); }
.tool-text-error { color: var(--err); }
.tool-summary-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px 16px; flex-wrap: wrap; }

/* loading */
.tool-loading { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 32px; color: var(--muted); font-size: 15px; }
.tool-loading { flex-direction: column; }
.tool-loading-msg { margin: 0; }
@keyframes tool-spin { to { transform: rotate(360deg); } }
.tool-spinner { display: inline-block; width: 22px; height: 22px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: tool-spin .7s linear infinite; flex-shrink: 0; }

/* badges (status words in mono) */
.tool-badge, .audit-card-badge, .audit-rec-sev, .util-badge-browser { display: inline-block; font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; line-height: 1.4; padding: 3px 8px; border-radius: var(--radius); background: var(--group-row); color: var(--muted); white-space: nowrap; }
.tool-badge-pass { background: var(--ok-bg); color: var(--ok); }
.tool-badge-fail { background: var(--err-bg); color: var(--err); }
.tool-badge-warn { background: var(--warn-bg); color: var(--warn); }
.tool-badge-info { background: var(--info-bg); color: var(--info); }

/* raw JSON toggle */
.tool-json-toggle { font: inherit; font-size: 13px; background: none; border: 0; padding: 4px 0; color: var(--muted); text-decoration: underline; cursor: pointer; align-self: flex-start; }
.tool-json-toggle:hover { color: var(--accent); }
.tool-json-raw { display: none; margin: 0; background: var(--group-row); border: 1px solid var(--border); padding: 14px 18px; font-family: var(--font-mono); font-size: 12px; line-height: 1.5; color: var(--muted); max-height: 400px; overflow: auto; white-space: pre-wrap; word-break: break-all; }

/* DNS propagation grid */
.tool-prop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 8px; }
.tool-prop-item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; background: var(--surface); border: 1px solid var(--border); font-size: 14px; }
.tool-prop-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--border-input); }
.tool-prop-dot.resolved { background: var(--ok); }
.tool-prop-dot.failed { background: var(--err); }
.tool-prop-dot.pending { background: var(--warn); }
.tool-prop-name { flex: 1; line-height: 1.35; }
.tool-prop-name small { color: var(--muted-2); font-size: 12px; }
.tool-prop-value { font-family: var(--font-mono); font-size: 12px; color: var(--muted); text-align: right; word-break: break-all; }

/* SSL expiry */
.tool-ssl-expiry { display: flex; align-items: baseline; gap: 12px; padding: 16px 20px; border: 1px solid var(--border); border-left: 3px solid var(--border-input); background: var(--surface); }
.tool-ssl-expiry-days { font-family: var(--font-serif); font-size: 36px; line-height: 1; }
.tool-ssl-expiry-label { font-size: 15px; color: var(--muted); }
.tool-ssl-ok { border-left-color: var(--ok); }
.tool-ssl-ok .tool-ssl-expiry-days { color: var(--ok); }
.tool-ssl-warn { border-left-color: var(--warn); }
.tool-ssl-warn .tool-ssl-expiry-days { color: var(--warn); }
.tool-ssl-error { border-left-color: var(--err); }
.tool-ssl-error .tool-ssl-expiry-days { color: var(--err); }
.tool-sans-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 18px; }


/* ── Utilities (subnet + password; utilities.js markup) ── */
.util-privacy-note { font-size: 15px; color: var(--ok); display: inline-flex; align-items: center; gap: 10px; }
.util-privacy-note::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex-shrink: 0; }
.util-badge-browser { background: var(--ok-bg); color: var(--ok); }
.util-slider-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.util-slider-label { font-size: 14px; font-weight: 500; }
.util-slider-value { font-family: var(--font-mono); font-size: 15px; min-width: 4ch; text-align: right; }
.util-slider-row input[type="range"] { appearance: none; -webkit-appearance: none; flex: 1; min-width: 160px; height: 4px; border-radius: 2px; background: var(--border); outline-offset: 6px; cursor: pointer; margin: 0; }
.util-slider-row input[type="range"]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); border: 0; cursor: pointer; }
.util-slider-row input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--accent); border: 0; cursor: pointer; }
.util-stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 8px; }
.util-stat-grid:empty { display: none; }
.util-stat { background: var(--surface); border: 1px solid var(--border); padding: 12px 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.util-stat-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.util-stat-value { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 16px; word-break: break-all; }
.util-mono { font-family: var(--font-mono); font-size: 15px; }
.util-copy { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: none; border: 1px solid transparent; border-radius: var(--radius); color: var(--muted-2); cursor: pointer; padding: 0; }
.util-copy:hover { color: var(--ink); border-color: var(--border-input); }
.util-copy.copied { color: var(--ok); }
.util-error { color: var(--err); font-size: 15px; }
.util-details summary { cursor: pointer; font-size: 15px; color: var(--muted); user-select: none; padding: 4px 0; }
.util-details summary:hover { color: var(--ink); }
.util-details[open] summary { margin-bottom: 10px; }
.util-binary-legend { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.util-binary { font-family: var(--font-mono); font-size: 14px; letter-spacing: .08em; background: var(--group-row); border: 1px solid var(--border); padding: 12px 16px; overflow-x: auto; white-space: nowrap; }
.util-bin-net { color: var(--info); font-weight: 600; }
.util-bin-host { color: var(--muted-2); }
.util-bin-dot { color: var(--muted-2); padding: 0 2px; }

/* chip rows (settings) */
.util-chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.util-chip-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); min-width: 120px; }
.util-chip-btn { font: inherit; font-size: 14px; padding: 8px 14px; min-height: 40px; border-radius: var(--radius); cursor: pointer; border: 1px solid var(--border-input); background: var(--surface); color: var(--ink); }
.util-chip-btn:hover { border-color: var(--ink); }
.util-chip-btn.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.util-chip-preset { border-style: dashed; }
.util-chip-preset:hover { border-style: solid; }
.util-hint { font-size: 14px; color: var(--muted); }
.util-hint-warn { color: var(--warn); }
.util-footnote { font-size: 13px; color: var(--muted-2); line-height: 1.5; padding-top: 16px; border-top: 1px solid var(--border); }

/* generated passwords */
.util-pw-list { display: flex; flex-direction: column; gap: 8px; }
.util-pw-row { font: inherit; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; font-family: var(--font-mono); font-size: 17px; color: var(--ink); background: var(--surface); border: 1px solid var(--border-input); border-radius: var(--radius); padding: 13px 16px; cursor: pointer; word-break: break-all; }
.util-pw-row:hover { border-color: var(--ink); }
.util-pw-row.selected { border-color: var(--accent); background: var(--accent-bg); box-shadow: inset 3px 0 0 var(--accent); }
.util-pw-flash { display: none; flex-shrink: 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--ok); }
.util-pw-row.copied .util-pw-flash { display: inline; }
.util-output-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.util-nato { background: var(--group-row); border: 1px solid var(--border); padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.util-nato-text { font-family: var(--font-mono); font-size: 14px; line-height: 1.9; color: var(--ink); word-break: break-word; }
.util-qr { background: #fff; border: 1px solid var(--border); padding: 10px; width: 180px; height: 180px; }
.util-qr svg { display: block; width: 100%; height: 100%; }
.util-entropy-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.util-entropy-track { flex: 1 1 160px; height: 4px; background: var(--border); overflow: hidden; }
.util-entropy-fill { height: 100%; width: 0; background: var(--border-input); transition: width .25s ease, background-color .25s ease; }
.entropy-weak { background: var(--err); }
.entropy-good { background: var(--warn); }
.entropy-excellent { background: var(--ok); }
.util-entropy-label { font-size: 14px; color: var(--muted); }
.util-count { font-family: var(--font-mono); font-size: 13px; color: var(--accent); background: var(--accent-bg); padding: 3px 10px; border-radius: var(--radius); white-space: nowrap; }

/* ── Security check + spoofing check (shared audit-* classes) ── */
.audit-form { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.audit-input-wrap { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border-input); border-radius: var(--radius); padding: 6px 6px 6px 14px; }
.audit-input-wrap:focus-within { border-color: var(--accent); outline: 3px solid var(--accent); outline-offset: 2px; }
.audit-input-icon { flex-shrink: 0; color: var(--muted-2); }
.audit-input { flex: 1; min-width: 0; font: inherit; font-size: 17px; padding: 10px 8px; border: 0; background: transparent; color: var(--ink); }
.audit-input:focus { outline: none; }
.audit-submit { flex-shrink: 0; padding: 13px 22px; font-size: 15px; }
.audit-form-note { font-size: 14px; color: var(--muted); }
.audit-error { max-width: 760px; padding: 14px 18px; border: 1px solid var(--err); border-left-width: 3px; background: var(--err-bg); color: var(--ink); font-size: 15px; }

.audit-overall { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: center; background: var(--surface); border: 1px solid var(--border); padding: 28px 32px; }
.audit-grade-circle { width: 96px; height: 96px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 3px solid var(--border-input); background: var(--bg); flex-shrink: 0; }
.audit-grade-circle.grade-a, .audit-grade-circle.grade-b { border-color: var(--ok); background: var(--ok-bg); }
.audit-grade-circle.grade-c, .audit-grade-circle.grade-d { border-color: var(--warn); background: var(--warn-bg); }
.audit-grade-circle.grade-f { border-color: var(--err); background: var(--err-bg); }
.audit-grade-letter { font-family: var(--font-serif); font-weight: 500; font-size: 52px; line-height: 1; color: var(--ink); }
.audit-grade-score { font-size: 17px; font-weight: 700; color: var(--ink); }   /* bold, under the summary (owner 2026-10-29) */
.audit-overall-prev { font-size: 14px; color: var(--muted); }
.audit-overall-prev:empty { display: none; }
.audit-grade-legend { font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-2); display: flex; flex-wrap: wrap; gap: 4px 14px; padding-top: 4px; }
.audit-grade-legend-label { color: var(--muted); }
.audit-grade-legend .is-current { color: var(--ink); font-weight: 600; border-bottom: 2px solid var(--accent); }
.audit-overall-actions { padding-top: 8px; }
.audit-copy { padding: 9px 14px; font-size: 14px; }
.audit-grade-score:empty { display: none; }
.audit-overall-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.audit-overall-domain { font-family: var(--font-mono); font-size: 18px; word-break: break-all; }
.audit-overall-summary { font-size: 20px; font-weight: 600; line-height: 1.3; }
.audit-overall-meta { font-size: 13px; color: var(--muted); }

.audit-sections { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }   /* 3 + 2 wider: no hole, equal heights per row (owner 2026-10-29) */
.audit-card { grid-column: span 2; }
.audit-card:nth-child(4), .audit-card:nth-child(5) { grid-column: span 3; }
@media (max-width: 900px) { .audit-card, .audit-card:nth-child(4) { grid-column: span 3; } .audit-card:nth-child(5) { grid-column: span 6; } }
@media (max-width: 600px) { .audit-card, .audit-card:nth-child(4), .audit-card:nth-child(5) { grid-column: span 6; } }
.audit-card { min-width: 0; background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--border-input); padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; }
.audit-card.status-pass { border-top-color: var(--ok); }
.audit-card.status-warn { border-top-color: var(--warn); }
.audit-card.status-fail { border-top-color: var(--err); }
.audit-card.status-checking { border-top-color: var(--info); }
.audit-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px 12px; flex-wrap: wrap; }
.audit-card-title { font-size: 17px; font-weight: 600; line-height: 1.3; }
.audit-card.status-pass .audit-card-badge { background: var(--ok-bg); color: var(--ok); }
.audit-card.status-warn .audit-card-badge { background: var(--warn-bg); color: var(--warn); }
.audit-card.status-fail .audit-card-badge { background: var(--err-bg); color: var(--err); }
.audit-card.status-checking .audit-card-badge { background: var(--info-bg); color: var(--info); }
.audit-card-summary { font-size: 15px; line-height: 1.55; color: var(--muted); }
.audit-card-details { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.audit-card-details:empty { display: none; }
.audit-card-details li { font-size: 14px; line-height: 1.5; color: var(--ink); display: flex; gap: 10px; align-items: flex-start; }
.audit-ic { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: var(--border-input); margin-top: 2px; }   /* shape + colour (2026-10-29) */
.audit-ic svg { display: block; }
.audit-card-details li.ok .audit-ic { background: var(--ok); }
.audit-card-details li.fail .audit-ic { background: var(--err); }

.audit-recs { background: var(--surface); border: 1px solid var(--border); padding: 28px 32px; display: flex; flex-direction: column; gap: 14px; }
.audit-records { background: var(--surface); border: 1px solid var(--border); padding: 28px 32px; display: flex; flex-direction: column; gap: 18px; }   /* SPF/DKIM/DMARC rows out of the email card (owner 2026-10-29) */
.audit-records-head { display: flex; flex-direction: column; gap: 6px; }
.audit-records-help { font-size: 15px; color: var(--muted); }
.audit-recs-title { font-size: 20px; font-weight: 600; line-height: 1.3; }
.audit-recs-list { list-style: none; display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.audit-recs-list li { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 15px; line-height: 1.55; }
.audit-rec-sev { flex-shrink: 0; margin-top: 2px; }
.audit-rec-sev.high { background: var(--err-bg); color: var(--err); }
.audit-rec-sev.medium { background: var(--warn-bg); color: var(--warn); }
.audit-rec-sev.low { background: var(--info-bg); color: var(--info); }

.audit-cta { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); padding: 28px 32px; display: flex; flex-direction: column; gap: 12px; }
.audit-cta-title { font-family: var(--font-serif); font-weight: 500; font-size: 28px; line-height: 1.2; }
.audit-cta-desc { font-size: 16px; line-height: 1.6; color: var(--muted); max-width: 640px; }
.audit-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; padding-top: 6px; }

/* email record rows (email-records.js; spoofing check, security check, network tools) */
.erec { display: flex; flex-direction: column; border-top: 1px solid var(--ink); }
.erec:empty { display: none; }
.erec-row { display: flex; align-items: flex-start; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--border); }
.erec-mark { flex: 0 0 auto; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; margin-top: 0; background: var(--border-input); }
.erec-mark svg { display: block; }
.erec-row.is-ok .erec-mark { background: var(--ok); }
.erec-row.is-warn .erec-mark { background: var(--warn); }
.erec-row.is-bad .erec-mark { background: var(--err); }
.erec-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.erec-name { font-weight: 600; font-size: 16px; }
.erec-line { color: var(--muted); font-size: 15px; line-height: 1.55; }
.erec-lead { color: var(--ink); }
.erec-mono { font-family: var(--font-mono); font-size: 12px; color: var(--muted); word-break: break-all; background: var(--group-row); padding: 6px 10px; margin: 2px 0; }
.erec-warn { color: var(--warn); }
.erec-dim { font-size: 13px; color: var(--muted-2); }
.tool-result-section > .erec { border-top: 0; padding: 0 18px; }

/* hub start block (security check straight from the hub) */
.hub-start { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 28px 48px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); padding: 32px; }
.hub-start-copy { display: flex; flex-direction: column; gap: 10px; }
.hub-start .audit-form { max-width: none; }

/* spoofing verdict */
.spoof-verdict { display: flex; gap: 20px; align-items: center; padding: 24px 28px; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--border-input); }
.spoof-verdict-icon { flex: 0 0 auto; line-height: 0; }
.spoof-verdict-body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.spoof-verdict-title { font-family: var(--font-serif); font-weight: 500; font-size: 28px; line-height: 1.2; }
.spoof-verdict-text { color: var(--muted); font-size: 16px; line-height: 1.6; }
.spoof-verdict-spoofable { border-left-color: var(--err); }
.spoof-verdict-spoofable .spoof-verdict-icon, .spoof-verdict-spoofable .spoof-verdict-title { color: var(--err); }
.spoof-verdict-partial { border-left-color: var(--warn); }
.spoof-verdict-partial .spoof-verdict-icon, .spoof-verdict-partial .spoof-verdict-title { color: var(--warn); }
.spoof-verdict-protected { border-left-color: var(--ok); }
.spoof-verdict-protected .spoof-verdict-icon, .spoof-verdict-protected .spoof-verdict-title { color: var(--ok); }

/* ── Related tools strip (partials/related-tools.php) ── */
.related-tools { display: flex; flex-direction: column; gap: 16px; padding-top: 32px; border-top: 1px solid var(--ink); }
.related-tools-title { font-family: var(--font-mono); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.related-tools-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.related-tools-list a { display: inline-block; padding: 10px 16px; border: 1px solid var(--border-btn); border-radius: var(--radius); font-size: 15px; color: var(--ink); text-decoration: none; }
.related-tools-list a:hover { border-color: var(--accent); color: var(--accent); }
.related-tools-list a.related-tools-hub { border-style: dashed; }
.related-tools-service { font-size: 15px; color: var(--muted); display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: baseline; }
.related-tools-service .link-ul { padding: 2px 2px; font-size: 15px; }

/* ── Small screens ── */
@media (max-width: 600px) {
    .tool-card, .audit-overall, .audit-recs, .audit-cta { padding: 20px; }
    .tool-input-group, .tool-input-group-narrow, .tool-input-group-medium, .tool-input-group-port { flex: 1 1 100%; min-width: 100%; }
    .tool-btn-row .tool-action-btn { width: 100%; }
    .tool-result-row { flex-direction: column; gap: 2px; }
    .tool-result-key { max-width: none; }
    .tool-result-value { text-align: left; }
    .audit-input-wrap { flex-wrap: wrap; padding: 6px; }
    .audit-input-icon { display: none; }
    .audit-submit { width: 100%; }
    .audit-overall { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .audit-overall-text { align-items: center; }
    .spoof-verdict { flex-direction: column; align-items: flex-start; }
    .util-chip-label { min-width: 100%; }
}

/* ── AI security quiz (Phase 2 batch C, 2026-10-29) ── */
.quiz { background: var(--surface); border: 1px solid var(--border); padding: 40px; display: flex; flex-direction: column; gap: 28px; max-width: 820px; }
.quiz-progress { display: flex; gap: 8px; }
.quiz-progress-dot { width: 28px; height: 3px; background: var(--border); }
.quiz-progress-dot.current { background: var(--accent); }
.quiz-progress-dot.done { background: var(--ink); }
.quiz-question { display: none; flex-direction: column; gap: 18px; }
.quiz-question.active { display: flex; }
.quiz-question-text { font-family: var(--font-serif); font-weight: 500; font-size: clamp(24px, 3vw, 34px); line-height: 1.2; }
.quiz-options { display: flex; gap: 12px; flex-wrap: wrap; }
.quiz-options .chip { min-width: 120px; }
.quiz-result { display: none; flex-direction: column; gap: 28px; }
.quiz-result.active { display: flex; }
.quiz-result-head { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 28px; align-items: center; }
.quiz-score-ring { position: relative; width: 120px; height: 120px; }
.quiz-score-ring svg { width: 120px; height: 120px; transform: rotate(-90deg); }
.quiz-score-bg { fill: none; stroke: var(--border); stroke-width: 8; }
.quiz-score-fill { fill: none; stroke: var(--ink); stroke-width: 8; transition: stroke-dashoffset 1s ease; }
.quiz-ring-high { stroke: var(--err); }
.quiz-ring-medium { stroke: var(--warn); }
.quiz-ring-low { stroke: var(--ok); }
.quiz-score-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-size: 30px; }
.quiz-result-copy { display: flex; flex-direction: column; gap: 10px; }
.quiz-risk-high { color: var(--err); }
.quiz-risk-medium { color: var(--warn); }
.quiz-risk-low { color: var(--ok); }
.quiz-fixes { display: flex; flex-direction: column; gap: 12px; padding-top: 20px; border-top: 1px solid var(--border); }
.quiz-link-btn { background: none; border-top: 0; border-left: 0; border-right: 0; font: inherit; cursor: pointer; }
@media (max-width: 600px) { .quiz { padding: 24px; } .quiz-result-head { grid-template-columns: 1fr; } }

/* ── Spot the Phish (Phase 2 batch C, 2026-10-29) ── */
.stp { background: var(--surface); border: 1px solid var(--border); padding: 40px; max-width: 820px; }
.stp-screen { display: none; flex-direction: column; gap: 24px; }
.stp-screen.active { display: flex; }
.stp-hud { display: flex; gap: 32px; flex-wrap: wrap; }
.stp-hud-item { display: flex; flex-direction: column; gap: 4px; }
.stp-hud-val { font-family: var(--font-serif); font-size: 28px; line-height: 1; }
.stp-timer { height: 3px; background: var(--border); }
.stp-timer-bar { height: 100%; width: 100%; background: var(--accent); }
.stp-card { border: 1px solid var(--border-input); background: var(--bg); padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.stp-card-correct { border-color: var(--ok); }
.stp-card-wrong { border-color: var(--err); }
.stp-card-head { display: flex; gap: 14px; align-items: center; }
.stp-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); flex-shrink: 0; }
.stp-from { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stp-from-addr { font-family: var(--font-mono); font-size: 14px; overflow-wrap: anywhere; }
.stp-subject { font-weight: 600; font-size: 17px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.stp-body { font-size: 16px; line-height: 1.6; color: var(--muted); }
.stp-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.stp-feedback { min-height: 26px; font-size: 15px; line-height: 1.6; color: var(--muted); }
.stp-feedback-ok { color: var(--ok); }
.stp-feedback-bad { color: var(--err); }
.stp-feedback-ok::before { content: '✓ '; font-family: var(--font-mono); }
.stp-feedback-bad::before { content: '× '; font-family: var(--font-mono); }
.stp-result-score { display: flex; flex-direction: column; gap: 6px; }
.stp-result-num { font-family: var(--font-serif); font-size: 64px; line-height: 1; }
.stp-result-facts { padding-top: 16px; }
.stp-risk-pro { color: var(--ok); }
.stp-risk-ok { color: var(--warn); }
.stp-risk-low { color: var(--err); }
@media (max-width: 600px) { .stp { padding: 24px; } }