/* ─────────────────────────────────────────────────────────────
   Reachable — styles.css
   All styling for the Reachable UI.
   Variables (colors, radii, shadows) defined in :root.
   Linked from index.html via <link rel="stylesheet">.
   ─────────────────────────────────────────────────────────────*/

*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#f9f9fb;--bg2:#f2f2f5;--bg3:#eaeaf0;
  --surface:#ffffff;--border:#e4e4e9;--border-focus:#4F46E5;
  --text:#18181b;--text-2:#52525b;--text-3:#a1a1aa;
  --accent:#4F46E5;--accent-h:#4338CA;--accent-soft:#eef2ff;--accent-border:#c7d2fe;
  --red:#dc2626;--red-bg:#fef2f2;--red-border:#fecaca;
  --amber:#b45309;--amber-bg:#fffbeb;--amber-border:#fde68a;
  --green:#166534;--green-bg:#f0fdf4;--green-border:#bbf7d0;
  --blue:#1e40af;--blue-bg:#eff6ff;--blue-border:#bfdbfe;
  --gray:#52525b;--gray-bg:#fafafa;--gray-border:#e4e4e7;
  --radius:14px;--radius-sm:8px;--radius-xs:5px;
  --shadow-sm:0 1px 3px rgba(0,0,0,0.06),0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:0 4px 24px rgba(0,0,0,0.07),0 1px 4px rgba(0,0,0,0.04);
  --transition:0.22s cubic-bezier(0.4,0,0.2,1);
}
html,body{height:100%;overflow-x:hidden}
body{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--text);font-size:15px;line-height:1.6;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased}

/* ── Nav ── */
.nav{height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 2rem;background:rgba(249,249,251,0.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:0.5px solid var(--border);position:sticky;top:0;z-index:200}
.nav-brand{display:flex;align-items:center;gap:8px;text-decoration:none;cursor:pointer;background:none;border:none;font-family:inherit}
.nav-logo{width:28px;height:28px;background:var(--accent);border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.nav-logo svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nav-wordmark{font-size:16px;font-weight:600;color:var(--text);letter-spacing:-0.3px}
.nav-center{display:flex;gap:2px;align-items:center}
.nav-tab{padding:6px 14px;font-size:13px;font-weight:500;color:var(--text-3);cursor:pointer;border:none;background:none;border-radius:100px;transition:all var(--transition);letter-spacing:-0.1px;font-family:inherit}
.nav-tab:hover{color:var(--text-2);background:var(--bg2)}
.nav-tab.active{color:var(--accent);background:var(--accent-soft)}
.nav-right{display:flex;align-items:center;gap:0.5rem}
.report-btn{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:100px;border:0.5px solid var(--border);background:transparent;color:var(--text-2);font-size:12px;font-weight:500;cursor:pointer;transition:all var(--transition);font-family:inherit;letter-spacing:-0.1px}
.report-btn:hover{background:var(--bg2);border-color:#c4c4d0;color:var(--text)}
.report-btn svg{width:13px;height:13px;flex-shrink:0}

/* ── Modal ── */
.modal-overlay{display:none;position:fixed;inset:0;z-index:500;background:rgba(0,0,0,0.3);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);align-items:center;justify-content:center;padding:1rem}
.modal-overlay.open{display:flex}
.modal-box{background:var(--surface);border:0.5px solid var(--border);border-radius:var(--radius);padding:1.75rem;max-width:400px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,0.12);animation:cardIn 0.2s ease}
.modal-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:1.25rem}
.modal-title{font-size:15px;font-weight:600;letter-spacing:-0.2px}
.modal-sub{font-size:12px;color:var(--text-3);margin-top:2px;line-height:1.5}
.modal-close{background:none;border:none;cursor:pointer;color:var(--text-3);font-size:16px;padding:2px;line-height:1;transition:color var(--transition)}
.modal-close:hover{color:var(--text)}
.modal-options{display:flex;flex-direction:column;gap:7px}
.modal-option{display:flex;align-items:center;gap:12px;padding:0.875rem 1rem;border-radius:var(--radius-sm);border:0.5px solid var(--border);text-decoration:none;color:var(--text);transition:all var(--transition)}
.modal-option:hover{background:var(--bg);border-color:#c4c4d0}
.modal-option-icon{width:34px;height:34px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.modal-option-title{font-size:13px;font-weight:500}
.modal-option-sub{font-size:11px;color:var(--text-3);margin-top:1px}

/* ── Panels ── */
.panel{display:none;flex-direction:column;flex:1;min-height:0;overflow-y:auto}
.panel.active{display:flex}

/* ── Tool wrap ── */
.tool-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem 1.5rem 2rem;flex:1;transition:padding var(--transition)}
.tool-wrap.at-top{flex:none;justify-content:flex-start;padding:1.75rem 1.5rem 0}
.tool-inner{width:100%;max-width:580px}

/* ── Hero ── */
.tool-hero{text-align:center;margin-bottom:2rem;animation:heroIn 0.5s ease both}
@keyframes heroIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.tool-wrap.at-top .tool-hero{text-align:left;margin-bottom:1rem}
.hero-wordmark{font-size:52px;font-weight:700;letter-spacing:-3px;line-height:1;color:var(--text);transition:all 0.4s ease}
.hero-wordmark .accent{color:var(--accent)}
.tool-wrap.at-top .hero-wordmark{font-size:20px;font-weight:600;letter-spacing:-0.5px}
.hero-cap{display:block;font-size:12px;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-3);margin-top:0.5rem;transition:all 0.4s}
.tool-wrap.at-top .hero-cap{font-size:10px;margin-top:2px}

/* ── Card ── */
.tool-card{background:var(--surface);border:0.5px solid var(--border);border-radius:var(--radius);padding:1.75rem;box-shadow:var(--shadow-md);transition:padding var(--transition),box-shadow var(--transition);animation:cardIn 0.4s 0.1s ease both}
@keyframes cardIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.tool-wrap.at-top .tool-card{padding:1.1rem 1.25rem;box-shadow:var(--shadow-sm)}
.tool-wrap.at-top .form-grid{gap:0.6rem}
.tool-wrap.at-top .tool-footer{margin-top:0.875rem;padding-top:0.875rem}
.tool-wrap.at-top .field-hint{display:none}
.tool-wrap.at-top .field label{font-size:10px}

/* ── Fields ── */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
@media(max-width:540px){.form-grid{grid-template-columns:1fr}}
.field-full{grid-column:1/-1}
.field{display:flex;flex-direction:column}
.field label{font-size:10.5px;font-weight:600;color:var(--text-3);letter-spacing:0.08em;text-transform:uppercase;margin-bottom:5px;transition:color var(--transition)}
.field:focus-within label{color:var(--accent)}
.field input,.field select{width:100%;padding:9px 12px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg);color:var(--text);font-size:14px;font-family:inherit;outline:none;transition:border-color var(--transition),background var(--transition),box-shadow var(--transition)}
.field input::placeholder{color:var(--text-3);font-style:normal;font-size:13.5px;font-weight:400;opacity:0.7}
.field input:hover,.field select:hover{border-color:#c4c4d0;background:var(--surface)}
.field input:focus,.field select:focus{border-color:var(--border-focus);background:var(--surface);box-shadow:0 0 0 3px rgba(79,70,229,0.1)}
.field-hint{font-size:11px;color:var(--text-3);margin-top:5px;line-height:1.4}
.optional{font-weight:400;color:var(--text-3);font-size:9.5px;letter-spacing:0;text-transform:none;margin-left:3px}

/* ── Footer ── */
.tool-footer{margin-top:1.25rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0.75rem;padding-top:1.25rem;border-top:0.5px solid var(--border)}
.tool-note{font-size:11.5px;color:var(--text-3)}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:var(--radius-sm);font-size:13.5px;font-weight:500;cursor:pointer;font-family:inherit;transition:all var(--transition);letter-spacing:-0.1px;border:none}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-h);box-shadow:0 4px 12px rgba(79,70,229,0.3)}
.btn-primary:active{transform:scale(0.98)}
.btn-primary:disabled{background:#a5b4fc;cursor:not-allowed;box-shadow:none;transform:none}
.btn-ghost{background:transparent;color:var(--text-2);border:0.5px solid var(--border)}
.btn-ghost:hover{background:var(--bg2);border-color:#c4c4d0}
.spinner{width:13px;height:13px;border:2px solid rgba(255,255,255,0.3);border-top-color:#fff;border-radius:50%;animation:spin 0.7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Upload zone ── */
.upload-zone{border:1.5px dashed var(--border);border-radius:var(--radius-sm);padding:1.5rem;text-align:center;cursor:pointer;transition:all var(--transition);background:var(--bg)}
.upload-zone:hover,.upload-zone.dragover{border-color:var(--accent);background:var(--accent-soft)}
.upload-icon{font-size:1.5rem;margin-bottom:0.4rem;display:block}
.upload-text{font-size:13px;color:var(--text-2)}
.upload-link{color:var(--accent);font-weight:500}
.upload-filename{font-size:12px;color:var(--accent);margin-top:6px;font-weight:500;min-height:16px}
.or-divider{display:flex;align-items:center;gap:0.75rem;margin:1rem 0;color:var(--text-3);font-size:12px}
.or-divider::before,.or-divider::after{content:'';flex:1;height:0.5px;background:var(--border)}

/* ── Stream ── */
.stream-wrap{max-width:580px;margin:1rem auto 0;width:100%;padding:0 1.5rem;display:none}
.stream-log{background:var(--surface);border:0.5px solid var(--border);border-radius:var(--radius-sm);padding:0.875rem 1rem;display:flex;flex-direction:column;gap:6px;max-height:140px;overflow-y:auto;box-shadow:var(--shadow-sm)}
.stream-entry{font-size:12.5px;color:var(--text-2);display:flex;align-items:center;gap:9px;animation:fadeIn 0.2s ease both}
@keyframes fadeIn{from{opacity:0;transform:translateX(-3px)}to{opacity:1;transform:none}}
.stream-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.dot-running{background:var(--accent);animation:pulse 1.2s ease-in-out infinite}
.dot-done{background:var(--green)}.dot-fail{background:var(--red)}.dot-warn{background:var(--amber)}.dot-info{background:var(--text-3)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.4}}

/* ── Results ── */
#audit-results-outer{padding:1.75rem 1.5rem 4rem;display:none}
.results-inner{max-width:580px;margin:0 auto}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ── Score ── */
.score-hero{background:var(--surface);border:0.5px solid var(--border);border-radius:var(--radius);padding:1.5rem;margin-bottom:1rem;box-shadow:var(--shadow-sm);animation:fadeUp 0.4s ease both}
.score-top{display:flex;align-items:center;gap:1.25rem;margin-bottom:1.25rem}
.score-ring-wrap{position:relative;width:72px;height:72px;flex-shrink:0}
.score-ring-wrap svg{transform:rotate(-90deg)}
.score-ring-bg{stroke:var(--bg3)}
.score-ring-fill{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:188;stroke-dashoffset:188;transition:stroke-dashoffset 1.2s cubic-bezier(0.4,0,0.2,1)}
.score-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:600;letter-spacing:-0.5px}
.score-text h2{font-size:18px;font-weight:600;letter-spacing:-0.3px;margin-bottom:3px}
.score-text p{font-size:13px;color:var(--text-2);line-height:1.5}
.tally-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:1.25rem}
.tally-cell{text-align:center;padding:0.65rem 0.5rem;border-radius:var(--radius-sm);border:0.5px solid;cursor:pointer;transition:transform var(--transition),box-shadow var(--transition);text-decoration:none;display:block;animation:fadeUp 0.4s ease both}
.tally-cell:nth-child(1){animation-delay:0.05s}.tally-cell:nth-child(2){animation-delay:0.1s}.tally-cell:nth-child(3){animation-delay:0.15s}.tally-cell:nth-child(4){animation-delay:0.2s}
.tally-cell:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.tally-num{font-size:20px;font-weight:600;letter-spacing:-0.5px}
.tally-lbl{font-size:9px;font-weight:600;letter-spacing:0.07em;text-transform:uppercase;margin-top:2px;display:block}
.tally-arrow{font-size:9px;opacity:0.45;display:block;margin-top:1px}
.tc-critical{background:var(--red-bg);border-color:var(--red-border);color:var(--red)}
.tc-important{background:var(--amber-bg);border-color:var(--amber-border);color:var(--amber)}
.tc-pass{background:var(--green-bg);border-color:var(--green-border);color:var(--green)}
.tc-info{background:var(--blue-bg);border-color:var(--blue-border);color:var(--blue)}
.tally-cell.dimmed{opacity:0.3}.tally-cell.highlighted{box-shadow:0 0 0 2px currentColor}

/* ── Readiness ── */
.readiness{border-top:0.5px solid var(--border);padding-top:1rem}
.readiness-title{font-size:10.5px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:0.7rem}
.readiness-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
@media(max-width:480px){.readiness-grid{grid-template-columns:repeat(2,1fr)}}
.ri{display:flex;align-items:center;gap:7px;font-size:12px;padding:6px 9px;border-radius:var(--radius-xs);background:var(--bg);color:var(--text-2)}
.ri-dot{width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;flex-shrink:0;font-weight:700}
.ri-dot.pass{background:var(--green-bg);color:var(--green)}.ri-dot.fail{background:var(--red-bg);color:var(--red)}.ri-dot.warn{background:var(--amber-bg);color:var(--amber)}.ri-dot.info{background:var(--blue-bg);color:var(--blue)}

/* ── Critical banner ── */
.critical-banner{background:var(--red-bg);border:0.5px solid var(--red-border);border-radius:var(--radius-sm);padding:1rem 1.25rem;margin-bottom:1rem;animation:fadeUp 0.4s 0.1s ease both}
.critical-banner h3{font-size:13px;font-weight:500;color:var(--red);margin-bottom:0.5rem}
.critical-list{list-style:none;display:flex;flex-direction:column;gap:4px}
.critical-list li{font-size:12.5px;color:var(--red);padding-left:1rem;position:relative}
.critical-list li::before{content:'→';position:absolute;left:0;opacity:0.6}

/* ── Sections ── */
.result-section{margin-bottom:0.875rem;scroll-margin-top:16px}
.section-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.5rem;padding:0 0.25rem}
.section-lbl{font-size:10.5px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-3)}
.section-sum{font-size:11px;color:var(--text-3)}

/* ── Cards ── */
.cards-list{display:flex;flex-direction:column;gap:6px}
.check-card{background:var(--surface);border-radius:var(--radius-sm);border:0.5px solid var(--border);border-left:3px solid transparent;overflow:hidden;transition:box-shadow var(--transition),transform var(--transition);animation:fadeUp 0.3s ease both}
.check-card:hover{box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.check-card.card-critical{border-left-color:var(--red)}.check-card.card-important{border-left-color:var(--amber)}.check-card.card-pass{border-left-color:var(--green)}.check-card.card-info{border-left-color:#3b82f6}.check-card.card-timeout{border-left-color:var(--text-3)}
.check-card.jumped{animation:flash 1.2s ease forwards}
@keyframes flash{0%{box-shadow:0 0 0 3px rgba(79,70,229,0.35)}100%{box-shadow:none}}
.card-main{padding:0.85rem 1rem;display:flex;align-items:flex-start;gap:0.75rem;cursor:pointer}
.card-icon{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0;margin-top:1px;font-weight:700}
.ci-critical{background:var(--red-bg);color:var(--red)}.ci-important{background:var(--amber-bg);color:var(--amber)}.ci-pass{background:var(--green-bg);color:var(--green)}.ci-info{background:var(--blue-bg);color:var(--blue)}.ci-timeout{background:var(--gray-bg);color:var(--gray)}
.card-body{flex:1;min-width:0}
.card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:0.5rem;margin-bottom:3px}
.card-name{font-size:13.5px;font-weight:500;letter-spacing:-0.2px}
.card-badge{font-size:9px;font-weight:700;letter-spacing:0.07em;text-transform:uppercase;padding:2px 8px;border-radius:100px;flex-shrink:0}
.cb-critical{background:var(--red-bg);color:var(--red)}.cb-important{background:var(--amber-bg);color:var(--amber)}.cb-pass{background:var(--green-bg);color:var(--green)}.cb-info{background:var(--blue-bg);color:var(--blue)}.cb-timeout{background:var(--gray-bg);color:var(--gray)}
.card-desc{font-size:12.5px;color:var(--text-2);line-height:1.55}
.card-value{font-family:'SF Mono',SFMono-Regular,Consolas,monospace;font-size:10.5px;color:var(--text-3);word-break:break-all;margin-top:5px;line-height:1.5;background:var(--bg2);padding:4px 8px;border-radius:var(--radius-xs)}
.card-actions{display:flex;gap:6px;margin-top:8px}
.card-btn{font-size:11px;font-weight:500;padding:4px 11px;border-radius:100px;border:0.5px solid var(--border);background:transparent;color:var(--text-2);cursor:pointer;transition:all var(--transition);font-family:inherit}
.card-btn:hover{border-color:#c4c4d0;color:var(--text);background:var(--bg2)}
.card-expand{display:none;padding:0 1rem 1rem;overflow:hidden}
.card-expand.open{display:block;animation:expandIn 0.2s ease}
@keyframes expandIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.expand-tabs{display:flex;gap:4px;margin-bottom:0.75rem}
.expand-tab{font-size:11px;font-weight:500;padding:4px 11px;border-radius:100px;border:0.5px solid var(--border);background:transparent;color:var(--text-2);cursor:pointer;transition:all var(--transition);font-family:inherit}
.expand-tab.active{background:var(--text);color:#fff;border-color:var(--text)}
.expand-pane{display:none}.expand-pane.active{display:block}
.knowhow-box{background:var(--bg);border-radius:var(--radius-xs);padding:0.75rem 0.875rem;font-size:12.5px;color:var(--text-2);line-height:1.65;border-left:2px solid var(--border)}
.knowhow-lbl{font-size:9.5px;font-weight:700;color:var(--text-3);margin-bottom:5px;letter-spacing:0.07em;text-transform:uppercase}
.fix-box{background:var(--bg);border-radius:var(--radius-xs);padding:0.875rem}
.fix-step{font-size:12.5px;color:var(--text-2);margin-bottom:0.6rem;line-height:1.55}
.fix-record{position:relative;margin-top:6px}
.fix-record pre{font-family:'SF Mono',SFMono-Regular,Consolas,monospace;font-size:11px;background:var(--surface);border:0.5px solid var(--border);border-radius:var(--radius-xs);padding:8px 40px 8px 10px;word-break:break-all;white-space:pre-wrap;color:var(--text);line-height:1.6}
.copy-btn{position:absolute;top:6px;right:6px;font-size:10px;padding:3px 9px;border-radius:var(--radius-xs);border:0.5px solid var(--border);background:var(--bg2);color:var(--text-2);cursor:pointer;font-family:inherit;transition:all var(--transition)}
.copy-btn:hover{background:var(--surface)}
.provider-pills{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.provider-pill{font-size:11px;padding:4px 11px;border-radius:100px;border:0.5px solid var(--border);cursor:pointer;background:transparent;color:var(--text-2);transition:all var(--transition);font-family:inherit}
.provider-pill.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.provider-content{display:none;margin-top:8px}.provider-content.active{display:block}

/* ── Header/Sim results ── */
.hdr-results-wrap,.sim-results-wrap{max-width:580px;margin:0 auto;padding:1.5rem 1.5rem 4rem;display:none}
.result-card{background:var(--surface);border:0.5px solid var(--border);border-radius:var(--radius-sm);padding:1.1rem 1.25rem;margin-bottom:0.75rem;box-shadow:var(--shadow-sm);animation:fadeUp 0.3s ease both}
.result-card-title{font-size:10.5px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:0.75rem;display:flex;align-items:center;gap:7px}
.hdr-row{display:flex;justify-content:space-between;align-items:baseline;padding:5px 0;border-bottom:0.5px solid var(--border);font-size:12.5px;gap:1rem}
.hdr-row:last-child{border-bottom:none}
.hdr-key{color:var(--text-2);flex-shrink:0;font-weight:500}
.hdr-val{color:var(--text);text-align:right;word-break:break-all;font-family:'SF Mono',SFMono-Regular,Consolas,monospace;font-size:11px}
.auth-row{display:flex;align-items:center;justify-content:space-between;padding:7px 0;border-bottom:0.5px solid var(--border);font-size:13px}
.auth-row:last-child{border-bottom:none}
.auth-name{font-weight:500}
.auth-badge{font-size:10px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;padding:3px 9px;border-radius:100px}
.ab-pass{background:var(--green-bg);color:var(--green)}.ab-fail{background:var(--red-bg);color:var(--red)}.ab-neutral{background:var(--gray-bg);color:var(--gray)}
.route-step{font-size:12px;color:var(--text-2);padding:5px 0;display:flex;align-items:flex-start;gap:8px;border-bottom:0.5px solid var(--border)}
.route-step:last-child{border-bottom:none}
.route-num{width:20px;height:20px;border-radius:50%;background:var(--bg2);display:flex;align-items:center;justify-content:center;font-size:9px;flex-shrink:0;font-weight:700;color:var(--text-2);margin-top:1px}
.signal-row{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:12.5px;border-bottom:0.5px solid var(--border)}
.signal-row:last-child{border-bottom:none}
.signal-icon{width:22px;text-align:center;font-size:13px;flex-shrink:0}
.sim-row{display:flex;align-items:center;justify-content:space-between;padding:7px 0;border-bottom:0.5px solid var(--border);font-size:13px}
.sim-row:last-child{border-bottom:none}
.sim-key{color:var(--text-2)}
.sim-val{font-weight:500}
.sim-val.good{color:var(--green)}.sim-val.warn{color:var(--amber)}.sim-val.bad{color:var(--red)}
.sim-findings{display:flex;flex-direction:column;gap:6px;margin-top:0.875rem}
.sim-finding{font-size:12.5px;padding:9px 12px;border-radius:var(--radius-xs);display:flex;gap:8px;align-items:flex-start;line-height:1.55}
.sf-icon{flex-shrink:0;font-weight:700;margin-top:1px}
.sim-finding.critical{background:var(--red-bg);color:var(--red)}.sim-finding.warn{background:var(--amber-bg);color:var(--amber)}.sim-finding.ok{background:var(--green-bg);color:var(--green)}

/* ── Docs ── */
.docs-wrap{max-width:640px;margin:0 auto;padding:2rem 1.5rem 4rem}
.docs-card{background:var(--surface);border:0.5px solid var(--border);border-radius:var(--radius);padding:2rem;box-shadow:var(--shadow-sm)}
.docs-intro{font-size:13.5px;color:var(--text-2);line-height:1.7;margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:0.5px solid var(--border)}
.docs-section{margin-bottom:1.75rem;padding-bottom:1.75rem;border-bottom:0.5px solid var(--border)}
.docs-section:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}
.docs-section-title{font-size:11px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:0.875rem}
.docs-items{display:flex;flex-direction:column;gap:8px}
.docs-item{display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.6}
.docs-tag{flex-shrink:0;font-size:10px;font-weight:600;padding:3px 9px;border-radius:100px;background:var(--bg2);color:var(--text-2);letter-spacing:0.04em;margin-top:2px;white-space:nowrap}
.docs-tag.red{background:var(--red-bg);color:var(--red)}
.docs-tag.amber{background:var(--amber-bg);color:var(--amber)}
.docs-tag.green{background:var(--green-bg);color:var(--green)}
.docs-tag.blue{background:var(--blue-bg);color:var(--blue)}
.docs-desc{color:var(--text-2)}
.docs-note{font-size:12px;color:var(--text-3);line-height:1.65;padding:0.875rem 1rem;background:var(--bg2);border-radius:var(--radius-xs);margin-top:1.75rem}

/* ── Error ── */
.err-box{background:var(--red-bg);border:0.5px solid var(--red-border);border-radius:var(--radius-xs);padding:0.75rem 1rem;font-size:13px;color:var(--red);margin:0.75rem auto;max-width:580px;width:calc(100% - 3rem);display:none}
.results-note{font-size:11.5px;color:var(--text-3);line-height:1.6;padding:0.875rem 1rem;background:var(--bg2);border-radius:var(--radius-xs);margin-top:0.75rem}