/* Free Tools hub + checker pages — built on top of the existing
   00-05 design tokens/components (var(--panel), .service-card, .btn, etc.),
   nothing here redefines the base theme. */

/* Match the homepage's own container width (var(--container), 1400px) —
   these pages were shipped at a much narrower 960px cap, leaving a large
   dead-space gutter on wider screens that Chris flagged from a screenshot. */
.tools-main{ max-width:var(--container); text-align:left; padding-top:44px; }

.tools-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px;
  margin-top:40px;
}
@media (max-width:860px){ .tools-grid{ grid-template-columns:1fr; } }

.tool-card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px 24px; display:flex; flex-direction:column; gap:12px; text-decoration:none;
  transition:border-color .2s ease, transform .2s ease;
}
.tool-card:hover{ transform:translateY(-3px); border-color:rgba(45,212,191,.45); text-decoration:none; }
.tool-card .tool-icon{
  width:48px; height:48px; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(145deg,var(--primary-600),var(--primary-900));
  color:#fff;
}
.tool-card .tool-icon svg{ width:24px; height:24px; }
.tool-card h3{ color:var(--heading); font-size:1.08rem; }
.tool-card p{ color:var(--text-soft); font-size:.92rem; margin:0; }
.tool-card .tool-cta{ margin-top:auto; color:var(--accent-mint); font-weight:600; font-size:.88rem; }

/* Checker input form (shared shape across all three tool pages) */
.tool-form{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px; margin:28px auto 0; max-width:640px;
}
.tool-form label{ display:block; margin-bottom:14px; }
.tool-form label span{ display:inline-block; margin-bottom:6px; color:#b6c2d1; font-weight:500; font-size:.92rem; }
.tool-form input{
  width:100%; padding:12px 14px; font-size:1rem; border:1px solid rgba(255,255,255,.13);
  border-radius:var(--radius-sm); background:#0D1219; color:var(--text); font-family:inherit;
}
.tool-form input:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(20,184,166,.18); }
.tool-form .tool-note{ color:var(--text-soft); font-size:.82rem; margin-top:-6px; margin-bottom:14px; }
.tool-form .tool-error{ color:#f97066; font-size:.88rem; margin-bottom:14px; }

/* Score gauge */
.score-wrap{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; margin:28px 0; }
.score-ring{ width:120px; height:120px; flex:0 0 auto; }
.score-ring .score-num{ font-size:1.9rem; font-weight:700; fill:var(--heading); }
.score-ring .score-max{ font-size:.75rem; fill:var(--text-soft); }
.score-label{ font-size:1.1rem; font-weight:600; color:var(--heading); }
.score-sub{ color:var(--text-soft); font-size:.92rem; margin-top:4px; max-width:420px; }

/* Result rows (pass / warn / fail) — each is a native <details> so "view
   more details" needs no JS: collapsed shows the icon/label/summary pills,
   expanded reveals the plain-English explanation, raw record, and (where
   parseable) a per-tag breakdown table, similar to how commercial domain
   checkers let you drill into one record at a time. */
.result-list{ display:grid; gap:12px; margin-top:20px; }
.result-row{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden;
}
.result-summary{
  display:flex; gap:14px; align-items:center; padding:16px 18px; cursor:pointer; list-style:none;
}
.result-summary::-webkit-details-marker{ display:none; }
.result-summary::marker{ content:""; }
.result-row .result-icon{
  flex:0 0 auto; width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
}
.result-row .result-icon svg{ width:15px; height:15px; }
.result-row.status-pass .result-icon{ background:rgba(45,212,191,.16); color:var(--accent-mint); }
.result-row.status-warn .result-icon{ background:rgba(245,158,11,.16); color:#f59e0b; }
.result-row.status-fail .result-icon{ background:rgba(239,68,68,.16); color:#f87171; }
.result-summary-main{ flex:1 1 auto; display:flex; align-items:center; gap:12px; flex-wrap:wrap; min-width:0; }
.result-summary-label{ color:var(--heading); font-weight:700; font-size:.95rem; }
.result-pills{ display:flex; gap:6px; flex-wrap:wrap; }
.result-pill{ font-size:.72rem; font-weight:600; padding:3px 9px; border-radius:999px; border:1px solid transparent; }
.result-pill.is-ok{ background:rgba(45,212,191,.12); color:var(--accent-mint); border-color:rgba(45,212,191,.28); }
.result-pill.is-bad{ background:rgba(248,113,113,.12); color:#f87171; border-color:rgba(248,113,113,.28); }
.result-chev{ flex:0 0 auto; color:var(--text-soft); transition:transform .18s ease; }
.result-chev svg{ width:16px; height:16px; display:block; }
.result-row[open] .result-chev{ transform:rotate(180deg); }
.result-body{ padding:0 18px 18px 58px; border-top:1px dashed var(--line); margin-top:0; padding-top:14px; }
.result-body h4{ color:var(--heading); font-size:.9rem; font-weight:600; margin-bottom:4px; }
.result-body p{ color:var(--text-soft); font-size:.88rem; margin:0; }
.result-record{ margin-top:10px; }
.result-record code{ display:block; background:#0D1219; padding:10px 12px; border-radius:6px; font-size:.82rem; word-break:break-all; border:1px solid var(--line); }
.result-table{ width:100%; border-collapse:collapse; margin-top:14px; font-size:.84rem; }
.result-table th{ text-align:left; color:var(--text-soft); font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; font-weight:700; padding:0 8px 8px; }
.result-table td{ padding:7px 8px; border-top:1px solid var(--line); color:var(--text); vertical-align:middle; }
.result-table td:last-child{ width:28px; text-align:center; }
.result-table code{ background:#0D1219; padding:2px 6px; border-radius:4px; font-size:.86em; word-break:break-all; }
.result-table-check{ font-weight:700; }
.result-table-check.is-ok{ color:var(--accent-mint); }
.result-table-check.is-bad{ color:#f87171; }
@media (max-width:600px){ .result-body{ padding-left:18px; } }

.tool-report-meta{ color:var(--text-soft); font-size:.88rem; margin-top:-10px; margin-bottom:10px; }

.tool-cta-card{
  margin-top:32px; background:linear-gradient(145deg,var(--primary-900),var(--ink));
  border:1px solid rgba(45,212,191,.3); border-radius:var(--radius); padding:26px 24px; text-align:center;
}
.tool-cta-card h3{ color:var(--heading); margin-bottom:8px; }
.tool-cta-card p{ color:var(--text-soft); margin-bottom:16px; }

/* The widget itself is a cross-origin iframe (openspeedtest.com), so its
   internal colors/fonts can't be restyled from here — no theming params
   exist yet (confirmed against their own GitHub issue tracker). This just
   gives it a frame that belongs on a dark, teal-accented page instead of a
   flat black rectangle dropped straight onto the background. */
/* Email Security Checker — categorized scorecard (Impersonation/Privacy/
   Branding), styled after commercial domain-health checkers like
   Sendmarc's, using this site's own teal/amber/red palette rather than
   copying anyone's brand colors. */
.escore-domainrow{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
  color:var(--text-soft); font-size:.92rem; margin-top:26px;
}
.escore-badges{ display:flex; gap:8px; }
.escore-chip{
  font-size:.74rem; font-weight:700; letter-spacing:.03em; padding:3px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.15); color:var(--text-soft);
}
.escore-chip.is-ok{ color:var(--accent-mint); border-color:rgba(45,212,191,.4); background:rgba(45,212,191,.08); }
.escore-chip.is-missing{ color:#f87171; border-color:rgba(248,113,113,.35); background:rgba(248,113,113,.08); }

.escore-summary{
  display:flex; align-items:center; gap:24px; flex-wrap:wrap; margin:16px 0 28px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:24px 26px;
}
.escore-tier-label{ font-size:1.5rem; font-weight:700; margin-bottom:6px; }
.escore-tier-good{ color:var(--accent-mint); }
.escore-tier-mid{ color:#f59e0b; }
.escore-tier-bad{ color:#f87171; }
.escore-summary.escore-tier-good .score-ring{ color:var(--accent-mint); }
.escore-summary.escore-tier-mid .score-ring{ color:#f59e0b; }
.escore-summary.escore-tier-bad .score-ring{ color:#f87171; }

.escore-cats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-bottom:8px; }
@media (max-width:760px){ .escore-cats{ grid-template-columns:1fr; } }
.escore-cat{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-sm); padding:18px 18px 20px;
  border-top:3px solid rgba(255,255,255,.15);
}
.escore-cat.escore-tier-good{ border-top-color:var(--accent-mint); }
.escore-cat.escore-tier-mid{ border-top-color:#f59e0b; }
.escore-cat.escore-tier-bad{ border-top-color:#f87171; }
.escore-cat-hd{ display:flex; align-items:center; justify-content:space-between; margin-bottom:2px; }
.escore-cat-name{ color:var(--heading); font-weight:600; font-size:.98rem; }
.escore-cat-score{ font-weight:700; color:var(--heading); font-size:1.05rem; }
.escore-cat-tier{ font-size:.8rem; font-weight:700; letter-spacing:.02em; margin-bottom:14px; }
.escore-cat.escore-tier-good .escore-cat-tier{ color:var(--accent-mint); }
.escore-cat.escore-tier-mid .escore-cat-tier{ color:#f59e0b; }
.escore-cat.escore-tier-bad .escore-cat-tier{ color:#f87171; }
.escore-cat-pills{ display:flex; flex-wrap:wrap; gap:6px; }
.escore-pill{ font-size:.76rem; font-weight:600; padding:4px 10px; border-radius:999px; border:1px solid transparent; }
.escore-pill.status-pass{ background:rgba(45,212,191,.14); color:var(--accent-mint); border-color:rgba(45,212,191,.3); }
.escore-pill.status-warn{ background:rgba(245,158,11,.14); color:#f59e0b; border-color:rgba(245,158,11,.3); }
.escore-pill.status-fail{ background:rgba(248,113,113,.14); color:#f87171; border-color:rgba(248,113,113,.3); }

/* Custom speed test — replaces the old third-party iframe embed. Measures
   against Cloudflare's public speed-test edge endpoints (same
   infrastructure behind speed.cloudflare.com — confirmed live, reachable
   cross-origin from this domain with full byte-accurate readable
   responses, despite a documented-but-apparently-inconsistent CORS
   complaint in their own GitHub issue tracker) via our own multi-connection
   duration-based test in speed-test.php's inline script, rendered in a
   fully custom gauge — no foreign branding/colors, matches this theme. */
.speedtest-card{
  margin-top:28px; background:radial-gradient(120% 100% at 50% 0%, rgba(45,212,191,.09), transparent 60%), var(--panel);
  border:1px solid var(--line); border-radius:var(--radius); padding:40px 24px; text-align:center;
}
.speedtest-gauge-wrap{ position:relative; width:230px; height:230px; margin:0 auto; }
.speedtest-gauge{ width:100%; height:100%; }
.speedtest-gauge-ring-bg{ stroke:rgba(255,255,255,.08); }
.speedtest-gauge-ring{ stroke:var(--accent-mint); transition:stroke-dasharray .25s linear; }
.speedtest-gauge-wrap.is-pulsing .speedtest-gauge-ring{ animation:speedtest-pulse 1.4s ease-in-out infinite; }
@keyframes speedtest-pulse{ 0%,100%{ opacity:.35; } 50%{ opacity:.9; } }
.speedtest-gauge-value{ font-size:2.5rem; font-weight:700; fill:var(--heading); }
.speedtest-gauge-unit{ font-size:.82rem; fill:var(--text-soft); }
.speedtest-gauge-dir{ color:var(--accent-mint); }
.speedtest-phase{ margin-top:16px; color:var(--text-soft); font-size:.95rem; min-height:1.3em; }
.speedtest-go{
  margin-top:22px; padding:14px 42px; border-radius:999px; font-weight:700; font-size:1rem;
  background:var(--primary-600); color:#fff; border:1px solid var(--primary-600); cursor:pointer;
  transition:background .15s ease, transform .1s ease;
}
.speedtest-go:hover{ background:var(--primary); }
.speedtest-go:disabled{ opacity:.5; cursor:default; }
.speedtest-tiles{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:34px; }
@media (max-width:640px){ .speedtest-tiles{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.speedtest-tile{ background:#0D1219; border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px 10px; }
.speedtest-tile-icon{
  width:30px; height:30px; border-radius:50%; display:grid; place-items:center; margin:0 auto 10px;
  background:rgba(45,212,191,.1); color:var(--accent-mint);
}
.speedtest-tile-icon svg{ width:16px; height:16px; }
.speedtest-tile .lbl{ color:var(--text-soft); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px; }
.speedtest-tile .val{ color:var(--heading); font-size:1.45rem; font-weight:700; }
.speedtest-tile .val span{ font-size:.68rem; color:var(--text-soft); font-weight:600; margin-left:2px; }
.speedtest-error{ color:#f87171; font-size:.9rem; margin-top:16px; }

.speedtest-info{
  display:flex; justify-content:center; gap:36px; flex-wrap:wrap;
  margin-top:30px; padding-top:26px; border-top:1px dashed var(--line);
}
.speedtest-info-item{ display:flex; align-items:center; gap:10px; text-align:left; }
.speedtest-info-icon{
  flex:0 0 auto; width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:rgba(45,212,191,.1); color:var(--accent-mint);
}
.speedtest-info-icon svg{ width:18px; height:18px; }
.speedtest-info-text{ display:flex; flex-direction:column; }
.speedtest-info-lbl{ font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-soft); }
.speedtest-info-val{ font-size:.92rem; font-weight:600; color:var(--heading); }
.speedtest-credit{ margin-top:22px; color:var(--text-soft); font-size:.8rem; }
.speedtest-credit a{ color:var(--accent-mint); }