/* air.ten7.com — TEN7 Brand Guidelines 2021, matching care.ten7.com.
   Same palette, same three-font stack, same card-on-khaki layout. */

:root{
  /* Brand palette */
  --t7-dark-purple:#1D0446;
  --t7-electric:#5F2FE1;
  --t7-electric-2:#6330F4;
  --t7-medium:#270066;
  --t7-coral:#FB9D61;
  --t7-paper:#FBF7F3;
  --t7-lavender:#7F6B97;
  --t7-muted:#635579;          /* darkened dusty-lavender; AA on white, paper, lilac, khaki */
  --t7-lilac:#ECE6FF;
  --t7-mimosa:#FFE2CF;
  --t7-khaki:#F4EEE9;
  --t7-warm-gray:#CEC8C3;

  /* Brand fonts first, then the Google alternates this site loads, then system. */
  --t7-sans:"Founders Grotesk","Work Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --t7-serif:"Tiempos Text","Source Serif Pro",Georgia,"Times New Roman",serif;
  --t7-mono:"Replica Mono","Roboto Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --t7-radius:14px;
  --t7-shadow:0 18px 50px -24px rgba(29,4,70,.55);

  /* The traffic light. The brand has no green, so one is introduced that sits with
     dark purple; amber borrows coral and mimosa; red uses the brand's error berry. */
  --air-good:#1B6F52;      --air-good-bg:#E7F3ED;  --air-good-line:#B6DCC9;
  --air-warn:#A2560F;      --air-warn-bg:var(--t7-mimosa); --air-warn-line:var(--t7-coral);
  --air-bad:#B00050;       --air-bad-bg:#FCE7EF;   --air-bad-line:#F0A9C6;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--t7-khaki);color:var(--t7-dark-purple);
  font-family:var(--t7-sans);font-size:17px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--t7-electric)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible{
  outline:3px solid var(--t7-electric-2);outline-offset:2px;border-radius:4px}
.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}

h1,h2,h3{font-family:var(--t7-serif);font-weight:700;letter-spacing:-.01em}

/* The card, exactly as care.ten7.com sets it. */
.card{
  position:relative;max-width:760px;margin:4vh auto;padding:26px 22px 46px;
  background:var(--t7-paper);border-radius:var(--t7-radius);box-shadow:var(--t7-shadow);
  overflow:clip;
}
.card--wide{max-width:1080px}

/* Below this, the viewport is too narrow to show the shadow's spread on both
   sides — cropped rather than gone. Drop it outright and match the body to the
   card, so the edge disappears instead of looking clipped. */
@media (max-width:820px){
  body{background:var(--t7-paper)}
  .card{box-shadow:none}
}
@media (max-width:1140px){
  body:has(.card--wide){background:var(--t7-paper)}
  .card--wide{box-shadow:none}
}

/* ------------------------------------------------------------------- topbar */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:26px}
.logo-link{display:inline-flex;align-items:center;color:var(--t7-dark-purple)}
.air-logo{height:30px;width:auto;display:block}
.topbar nav{display:flex;align-items:center;gap:1.1rem;
  font-family:var(--t7-mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.12em}
.topbar nav a{color:var(--t7-muted);text-decoration:none}
.topbar nav a:hover{color:var(--t7-electric);text-decoration:underline}

.sitenav{display:flex;align-items:center;gap:1.3rem;font-family:var(--t7-mono);
  font-size:11px;text-transform:uppercase;letter-spacing:.12em}
.sitenav a{display:inline-flex;align-items:center;gap:.45rem;color:var(--t7-muted);
  text-decoration:none;opacity:.55;transition:opacity .15s,color .15s}
.sitenav a:hover{opacity:.9;color:var(--t7-electric);text-decoration:none}
.sitenav a.is-current{color:var(--t7-dark-purple);opacity:1;font-weight:600}
.sitenav .sep{color:var(--t7-warm-gray);opacity:.8}

.eyebrow{font-family:var(--t7-mono);text-transform:uppercase;letter-spacing:.14em;
  font-size:12px;color:var(--t7-muted);margin:0 0 14px;font-weight:500}

/* ------------------------------------------------------------------ landing */
.hero{text-align:center;padding:2.5rem 0 .5rem}
.hero h1{font-size:clamp(30px,6.5vw,52px);line-height:1.08;margin:0 0 2.6rem}
.tagline{font-family:var(--t7-serif);font-style:italic;font-size:1.2rem;
  color:var(--t7-muted);margin:0 0 2.2rem}
/* Stacked, not side by side: the box is the whole width of the thought, and the
   button sits under it where the eye already is after typing. */
.air-form{display:flex;flex-direction:column;align-items:center;gap:1.6rem;
  max-width:36rem;margin:0 auto}
.air-form input[type=text]{
  width:100%;min-width:0;font:inherit;font-size:1.3rem;line-height:1.2;
  padding:10px 2px;border:none;border-bottom:2px solid var(--t7-warm-gray);
  background:transparent;color:var(--t7-dark-purple);text-align:center}
.air-form input::placeholder{color:var(--t7-warm-gray)}
.air-form input:focus{outline:none;border-bottom-color:var(--t7-electric)}
.air-form input[aria-invalid=true]{border-bottom-color:var(--air-bad)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font:inherit;font-weight:600;line-height:1;border-radius:99px;text-decoration:none;
  padding:15px 26px 11px;   /* top-heavy: optically centers against the descender space */
  cursor:pointer;border:2px solid transparent;
  transition:transform .08s,background .15s,border-color .15s}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--t7-coral);color:var(--t7-dark-purple)}
.btn-primary:hover{background:#ffae78}
.btn-outline{background:transparent;color:var(--t7-electric);border-color:var(--t7-electric)}
.btn-outline:hover{background:var(--t7-lilac)}
.btn-ghost{background:transparent;color:var(--t7-electric);padding-left:6px;padding-right:6px}
.btn-ghost:hover{text-decoration:underline}
.air-form .btn{flex:0 0 auto;align-self:center}

/* --- what the scan actually is, under the box --- */
/* No rule above this. The gap does the separating, and one less line on the page
   is one less thing between the box and the explanation. Tighter now that the
   "Free · No signup" line is gone — the heading was reading as its own screen. */
.explainer{margin-top:1.8rem}
.explainer h2{font-size:clamp(22px,3.4vw,30px);line-height:1.15;font-weight:700;
  color:var(--t7-dark-purple);margin:0 0 1rem}
.explainer p{font-size:15.5px;color:var(--t7-muted);max-width:62ch;margin:0 0 1rem}
.explainer table.prospects{margin:1.4rem 0 1rem}
.explainer-foot{font-size:14px}
.error{color:var(--air-bad);margin:1rem 0 0;font-weight:500;font-size:15px}

/* ------------------------------------------------------------------ site foot */
/* Every page, the dashboard included — the license line is the point of it, so
   it stays legible rather than shrinking to a copyright afterthought. */
.site-foot{max-width:760px;margin:2.4rem auto 4vh;padding:0 22px;text-align:center;
  color:var(--t7-muted);font-size:13px}
.site-foot-license{margin:0 auto;font-size:12px;line-height:1.35;max-width:56ch}
.site-foot-license a{color:var(--t7-electric);text-decoration:none}
.site-foot-license a:hover{text-decoration:underline}

/* ------------------------------------------------------------------- thanks */
.thanks{padding:1rem 0 1rem}
.confetti{font-size:.85em;margin-left:.15em}
.thanks h1{font-size:clamp(28px,5.5vw,44px);line-height:1.1;margin:0 0 1rem}
.thanks .lede{font-size:18px;color:var(--t7-dark-purple);max-width:56ch;margin:0 0 2.4rem}
.thanks h2{font-family:var(--t7-mono);text-transform:uppercase;letter-spacing:.14em;
  font-size:12px;color:var(--t7-muted);font-weight:500;margin:0 0 .8rem}
.thanks p{max-width:60ch}
.promise{background:var(--air-good-bg);border:1px solid var(--air-good-line);
  border-radius:var(--t7-radius);padding:20px 22px;margin-bottom:2.4rem}
.promise p{margin:0 0 .7rem;font-size:15.5px;color:var(--t7-dark-purple)}
.promise p:last-child{margin-bottom:0}
.who{border-top:1px solid var(--t7-warm-gray);padding-top:1.8rem}
.who p{margin:0 0 1rem;font-size:15.5px;color:var(--t7-muted)}
.who-cta{margin:1.4rem 0 0}
.back-to-result{margin:2.4rem 0 0;padding-top:1.4rem;
  border-top:1px solid var(--t7-warm-gray);font-size:13.5px;color:var(--t7-muted)}
.back-to-result a{font-family:var(--t7-mono);font-size:12.5px;word-break:break-all}

/* ------------------------------------------------------------------- result */
.result-head h1{font-size:clamp(24px,4.4vw,34px);margin:.2rem 0 .4rem;
  word-break:break-word}

.waiting{text-align:center;padding:3rem 0}
.waiting h2{margin:1.4rem 0 .5rem;font-size:1.5rem}
.waiting p{color:var(--t7-muted);margin:0 auto .6rem;max-width:28rem;font-size:15px}
.spinner{width:44px;height:44px;margin:0 auto;border:4px solid var(--t7-lilac);
  border-top-color:var(--t7-electric);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation-duration:3s}}
.small{font-size:13px}

.verdict{display:flex;gap:1.1rem;align-items:flex-start;padding:22px 24px;
  border-radius:var(--t7-radius);border:2px solid;margin-bottom:2.2rem;
  animation:airIn .42s cubic-bezier(.2,.8,.2,1) both}
@keyframes airIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.verdict{animation:none}}
.verdict h2{font-size:clamp(20px,3.6vw,27px);line-height:1.15;margin:0 0 .5rem}
.verdict p{margin:0 0 .4rem;color:var(--t7-muted);font-size:15px}
.verdict .count{color:var(--t7-dark-purple);font-family:var(--t7-mono);font-size:14px;
  letter-spacing:.02em}
/* An actual traffic light: three lamps, one lit. Green is the only one that means
   ready, which the word beside it says out loud so nobody has to infer it. */
.semaphore{flex:0 0 auto;display:grid;gap:8px;padding:9px 8px;border-radius:99px;
  background:var(--t7-dark-purple);margin-top:.25rem}
.lamp{width:17px;height:17px;border-radius:50%;opacity:.16;transition:opacity .2s}
.lamp-red{background:#ff5c7a}
.lamp-amber{background:var(--t7-coral)}
.lamp-green{background:#3ddc97}
.verdict-red .lamp-red{opacity:1;box-shadow:0 0 0 4px rgba(255,92,122,.22)}
.verdict-amber .lamp-amber{opacity:1;box-shadow:0 0 0 4px rgba(251,157,97,.22)}
.verdict-green .lamp-green{opacity:1;box-shadow:0 0 0 4px rgba(61,220,151,.22)}
.verdict .ready{font-family:var(--t7-mono);text-transform:uppercase;
  letter-spacing:.14em;font-size:11px;font-weight:600;margin:0 0 .5rem}
.verdict-green .ready{color:var(--air-good)}
.verdict-amber .ready{color:var(--air-warn)}
.verdict-red .ready{color:var(--air-bad)}
.verdict-green{background:var(--air-good-bg);border-color:var(--air-good-line)}
.verdict-amber{background:var(--air-warn-bg);border-color:var(--air-warn-line)}
.verdict-red{background:var(--air-bad-bg);border-color:var(--air-bad-line)}

.findings h2,.capture h2,.captured h2{font-family:var(--t7-mono);text-transform:uppercase;
  letter-spacing:.14em;font-size:12px;color:var(--t7-muted);font-weight:500;
  margin:0 0 14px}
.detail-panel .found{background:#fff;border:1px solid var(--t7-warm-gray);
  border-radius:8px;padding:10px 12px;color:var(--t7-dark-purple)}
.detail-panel .evidence{font-family:var(--t7-mono);font-size:13px;
  color:var(--t7-muted);word-break:break-word}
/* --- the evidence under a finding --- */
/* Monospaced on purpose: these are measurements, and they should not read as
   more prose. The heading of each item is the thing measured, the facts are
   what was true of it. */
.evidence-block{margin-top:.7rem}
.evidence-head{font-family:var(--t7-mono);text-transform:uppercase;
  letter-spacing:.12em;font-size:10.5px;color:var(--t7-muted);font-weight:500;
  margin:0 0 .35rem}
.evidence-common{font-family:var(--t7-mono);font-size:12.5px;color:var(--t7-muted);
  margin:0 0 .4rem}
.evidence-list{margin:0;font-family:var(--t7-mono);font-size:12.5px;line-height:1.5}
.evidence-list dt{color:var(--t7-dark-purple);word-break:break-all;margin-top:.45rem}
.evidence-list dt:first-child{margin-top:0}
.evidence-list dt a{color:var(--t7-electric)}
.evidence-list dd{margin:.1rem 0 0;padding:0 0 0 .9rem;color:var(--t7-muted);
  border-left:2px solid var(--t7-warm-gray)}
.evidence-list .fact,.evidence-common .fact{display:block;word-break:break-word}
.evidence-list .fact .k,.evidence-common .fact .k{color:var(--t7-dark-purple);opacity:.62}
.evidence-list .fact .k::after,.evidence-common .fact .k::after{content:":\0020"}
.evidence-more{font-family:var(--t7-mono);font-size:11.5px;color:var(--t7-muted);
  margin:.5rem 0 0}
/* The weighted score, under the count it qualifies. Big enough to be the number
   somebody quotes back, with the caveat attached rather than in a footnote. */
.score-line{margin:.5rem 0 .9rem;line-height:1.25}
.score{font-family:var(--t7-serif);font-weight:700;font-size:clamp(28px,5vw,40px);
  color:var(--t7-dark-purple)}
.outof{font-family:var(--t7-mono);font-size:15px;color:var(--t7-muted);
  margin-left:.1rem}
.score-note{display:block;font-family:var(--t7-mono);font-size:11.5px;
  color:var(--t7-muted);line-height:1.5;margin-top:.25rem;max-width:46ch}
/* When the scan ran, and how long ago. Both, because a date alone makes the reader
   do the arithmetic that decides whether to trust the page. */
.scanned{font-family:var(--t7-mono);font-size:12px;color:var(--t7-muted);
  margin:0 0 1.6rem;letter-spacing:.03em}
.scanned .is-stale{color:var(--air-bad);font-weight:600}
.stale-note{background:var(--air-warn-bg);border:1.5px solid var(--air-warn-line);
  border-radius:var(--t7-radius);padding:14px 18px;margin:1.4rem 0 0;
  font-size:15px;color:var(--t7-dark-purple)}
.stale-note strong{color:var(--air-warn)}

/* The gap between what a quick scan can award and 100. This is the argument for
   the full scan, so it sits with the score rather than in the call to action. */
.headroom{margin:.9rem 0 0;font-size:15px}
.scope{color:var(--t7-muted);font-size:14px;margin:1.4rem 0 2.4rem;max-width:52ch}

/* --------------------------------------------------------------- methodology */
/* The Index document itself. Long, dense, and meant to be read end to end or
   jumped into from an anchor, so it gets a measure and a table of contents rather
   than the full width of the card. */
.doc-layout{display:grid;grid-template-columns:15rem minmax(0,1fr);gap:2.6rem;
  align-items:start}
@media (max-width:900px){
  .doc-layout{grid-template-columns:1fr;gap:1.4rem}
  .doc-toc{position:static !important;max-height:none !important;border-bottom:1px solid var(--t7-warm-gray);padding-bottom:1rem}
}
.doc-toc{position:sticky;top:1.5rem;max-height:calc(100vh - 3rem);overflow:auto;
  font-size:13.5px;line-height:1.35}
.doc-toc .toc-head,.doc-toc .toc-foot{font-family:var(--t7-mono);font-size:10.5px;
  text-transform:uppercase;letter-spacing:.12em;color:var(--t7-muted);margin:0 0 .7rem}
.doc-toc .toc-foot{margin:1rem 0 0}
.doc-toc ol{list-style:none;margin:0;padding:0}
.doc-toc li{margin:0 0 .45rem}
.doc-toc li.lvl-1{margin-top:1rem;font-weight:600}
.doc-toc li.lvl-1:first-child{margin-top:0}
.doc-toc a{color:var(--t7-muted);text-decoration:none}
.doc-toc a:hover{color:var(--t7-electric);text-decoration:underline}

.doc{max-width:74ch;font-size:16px;line-height:1.62;color:var(--t7-dark-purple)}
.doc h1{font-size:clamp(26px,4.2vw,38px);line-height:1.12;margin:2.6rem 0 1rem}
.doc h1:first-child{margin-top:0}
.doc h2{font-size:clamp(21px,3vw,27px);line-height:1.2;margin:2.4rem 0 .9rem;
  padding-top:1.4rem;border-top:1px solid var(--t7-warm-gray)}
.doc h3{font-family:var(--t7-sans);font-size:17.5px;font-weight:700;
  margin:2rem 0 .6rem;letter-spacing:0}
.doc h4{font-family:var(--t7-mono);font-size:12px;text-transform:uppercase;
  letter-spacing:.1em;color:var(--t7-muted);font-weight:500;margin:1.6rem 0 .5rem}
.doc p,.doc ul,.doc ol{margin:0 0 1rem}
.doc li{margin:0 0 .4rem}
.doc a{color:var(--t7-electric)}
.doc strong{font-weight:600}
.doc code{font-family:var(--t7-mono);font-size:.86em;background:var(--t7-khaki);
  border-radius:4px;padding:1px 5px;word-break:break-word}
.doc pre{background:var(--t7-dark-purple);color:var(--t7-paper);border-radius:10px;
  padding:16px 18px;overflow-x:auto;font-size:12.5px;line-height:1.55;margin:0 0 1.2rem}
.doc pre code{background:none;color:inherit;padding:0;font-size:inherit}
.doc blockquote{margin:0 0 1rem;padding-left:1rem;
  border-left:3px solid var(--t7-coral);color:var(--t7-muted)}
.doc hr{border:0;border-top:1px solid var(--t7-warm-gray);margin:2rem 0}
/* Wide tables scroll inside themselves rather than pushing the page sideways. */
.doc table{width:100%;border-collapse:collapse;font-size:14px;margin:0 0 1.2rem;
  display:block;overflow-x:auto;white-space:nowrap}
.doc th,.doc td{text-align:left;padding:7px 12px 7px 0;
  border-bottom:1px solid var(--t7-warm-gray)}
.doc th{font-family:var(--t7-mono);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.1em;color:var(--t7-muted);font-weight:500}

/* ---------------------------------------------------------------- licensing */
.license-block{max-width:62ch;padding:1.6rem 0;border-top:1px solid var(--t7-warm-gray)}
.license-block:first-of-type{border-top:0;padding-top:0}
.license-kind{font-family:var(--t7-mono);text-transform:uppercase;letter-spacing:.1em;
  font-size:11px;font-weight:600;margin:0 0 .5rem}
.license-open{color:var(--air-good)}
.license-closed{color:var(--t7-muted)}
.license-block h2{font-size:20px;margin:0 0 .8rem}
.license-block p{font-size:15px;color:var(--t7-muted);margin:0 0 .8rem;line-height:1.55}
.license-block strong{color:var(--t7-dark-purple)}
.license-links{font-size:13.5px}

/* ------------------------------------------------------------- all 68 checks */
.check-group{margin-bottom:2.2rem}
.check-id{font-family:var(--t7-mono);font-size:12px;color:var(--t7-muted);
  white-space:nowrap}
.q-cell{white-space:normal !important}
.detail-panel .cite{font-size:13px;color:var(--t7-muted);margin:.5rem 0 0}
.badge-quick{display:inline-block;font-family:var(--t7-mono);font-size:10px;
  font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--air-warn);
  background:var(--t7-mimosa);border-radius:99px;padding:2px 9px 1px;white-space:nowrap}

/* The dark block is for the form: it is the one thing on the page we want somebody
   to fill in, and the contrast earns it. Once they have, the block holds their
   report instead — links and prose, which read better on paper than in reverse.
   Electric purple on dark purple was the specific failure. */
.capture{background:var(--t7-dark-purple);color:var(--t7-paper);
  border-radius:var(--t7-radius);padding:32px 28px}
.capture h2{color:var(--t7-coral)}
.capture>p{color:#e7ddff;font-size:15.5px;margin:0 0 1.4rem;max-width:52ch}

.captured{background:var(--t7-paper);color:var(--t7-dark-purple);
  border:1.5px solid var(--t7-warm-gray);border-radius:var(--t7-radius);
  padding:26px 24px}
.captured h2{color:var(--t7-muted)}
.captured p{color:var(--t7-muted);font-size:15.5px;margin:0;max-width:52ch}
.captured strong{color:var(--t7-dark-purple)}
.report-list{list-style:none;margin:0 0 1rem;padding:0}
.report-list li{margin:0 0 .5rem;display:flex;flex-wrap:wrap;gap:.6rem;
  align-items:baseline}
.report-list a{color:var(--t7-electric);font-weight:600}
.report-list .rscore{font-family:var(--t7-mono);font-size:13px;
  color:var(--t7-dark-purple);font-weight:600}
.lead .row{margin-bottom:1.1rem}
.lead label{display:block;font-family:var(--t7-mono);text-transform:uppercase;
  letter-spacing:.08em;font-size:11px;color:#c9bce4;margin-bottom:6px}
.lead .opt{color:#9c8bc4}
.lead input{width:100%;font:inherit;font-size:17px;padding:10px 12px;
  border:2px solid #3d2170;border-radius:8px;background:#160336;color:#fff}
.lead input::placeholder{color:#7a6aa0}
.lead input:focus{outline:none;border-color:var(--t7-coral)}
.lead .hint{color:#b3a4d4;font-size:13px;margin:.4rem 0 0;max-width:52ch}
.lead .error{color:var(--t7-coral)}
.lead .hint a{color:var(--t7-coral);font-weight:600}
.failed h2{margin-top:0;font-size:1.4rem}

/* ---------------------------------------------------------------- embed doc */
.doc h2{font-size:1.35rem;margin:2.2rem 0 .6rem}
.doc p{max-width:56ch;font-size:16px}
.doc pre{background:var(--t7-dark-purple);color:#e7ddff;padding:16px 18px;
  border-radius:10px;overflow-x:auto;font-family:var(--t7-mono);font-size:13.5px;
  line-height:1.6}
.doc code{font-family:var(--t7-mono);font-size:.92em}
.doc p code{background:var(--t7-lilac);padding:.1em .4em;border-radius:4px;
  color:var(--t7-medium)}
.doc .hint{color:var(--t7-muted);font-size:14px}
.preview{border:2px solid var(--t7-warm-gray);border-radius:var(--t7-radius);
  padding:26px;background:#fff}

/* ---------------------------------------------------------------- dashboard */
.dash-wrap{max-width:1080px;margin:0 auto;padding:0}

/* --- the signed-in dropdown --- */
.menu{position:relative}
.menu>summary{cursor:pointer;list-style:none;font-family:var(--t7-mono);font-size:11px;
  text-transform:uppercase;letter-spacing:.1em;color:var(--t7-muted);
  padding:.45rem .8rem;border:1.5px solid var(--t7-warm-gray);border-radius:99px;
  display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap}
.menu>summary::-webkit-details-marker{display:none}
.menu>summary::after{content:"\25be";font-size:.8em;color:var(--t7-electric)}
.menu>summary:hover{border-color:var(--t7-electric);color:var(--t7-dark-purple)}
.menu[open]>summary{border-color:var(--t7-electric);background:var(--t7-lilac)}
.menu-panel{position:absolute;right:0;top:calc(100% + .4rem);z-index:20;min-width:14rem;
  background:#fff;border:2px solid var(--t7-warm-gray);border-radius:10px;
  box-shadow:0 14px 34px -18px rgba(29,4,70,.5);padding:.35rem;
  display:flex;flex-direction:column}
.menu-panel a,.menu-panel button{display:block;width:100%;text-align:left;
  font:inherit;font-size:14.5px;padding:.55rem .7rem;border:0;border-radius:7px;
  background:none;color:var(--t7-dark-purple);text-decoration:none;cursor:pointer;
  text-transform:none;letter-spacing:normal}
.menu-panel a:hover,.menu-panel button:hover{background:var(--t7-lilac)}
.menu-panel form{margin:0;border-top:1px solid var(--t7-khaki);margin-top:.3rem;
  padding-top:.3rem}
.menu-panel form button{color:var(--air-bad)}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));
  gap:12px;margin-bottom:2.2rem}
.tile{background:#fff;border:2px solid var(--t7-warm-gray);
  border-radius:var(--t7-radius);padding:16px}
.tile:first-child{background:var(--t7-dark-purple);border-color:var(--t7-dark-purple);
  color:#fff}
.tile .n{font-weight:700;font-size:clamp(22px,4vw,30px);line-height:1}
.tile .l{font-family:var(--t7-mono);text-transform:uppercase;letter-spacing:.1em;
  font-size:11px;color:var(--t7-muted);margin-top:6px}
.tile:first-child .l{color:var(--t7-coral)}
.metrics.tiles{margin-bottom:2.2rem;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px}
.metrics .tile{padding:10px 12px}
.metrics .tile:first-child{background:#fff;border-color:var(--t7-warm-gray);color:inherit}
.metrics .tile:first-child .l{color:var(--t7-muted)}
.metrics .tile .n{font-size:clamp(15px,2vw,20px)}
.metrics .tile .l{font-size:9.5px;letter-spacing:.06em}

.group{margin-bottom:2.2rem}
.group-head{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;
  margin-bottom:.5rem}
.group-head h2{font-family:var(--t7-mono);text-transform:uppercase;
  letter-spacing:.12em;font-size:12px;color:var(--t7-muted);font-weight:500;margin:0}
.group-count{font-family:var(--t7-mono);font-size:11px;color:var(--t7-warm-gray)}
.group-head .blurb{flex:1 1 100%;color:var(--t7-muted);font-size:13px;margin:0}

/* --- the prospects table: dense, one row per domain --- */
table.prospects{width:100%;border-collapse:collapse;font-size:14px;background:#fff;
  border:2px solid var(--t7-warm-gray);border-radius:10px;overflow:hidden}
table.prospects > thead th{font-family:var(--t7-mono);text-transform:uppercase;
  letter-spacing:.07em;font-size:10px;color:var(--t7-muted);font-weight:500;
  text-align:left;padding:.5rem .6rem;background:var(--t7-khaki);
  border-bottom:1px solid var(--t7-warm-gray);white-space:nowrap}
table.prospects > thead th.num,table.prospects > tbody > tr.p-row > td.num{
  text-align:right;font-variant-numeric:tabular-nums}
table.prospects > tbody > tr.p-row > td{padding:.4rem .6rem;
  border-bottom:1px solid var(--t7-khaki);vertical-align:baseline;white-space:nowrap}
/* Plain rows — the key/value and timeline tables that carry no expander — get the
   same cells, so every row on every page reads as one thing. */
table.prospects > tbody > tr:not(.p-row):not(.p-detail) > td,
table.prospects > tbody > tr:not(.p-row):not(.p-detail) > th{padding:.4rem .6rem;
  border-bottom:1px solid var(--t7-khaki);vertical-align:baseline;text-align:left}
table.prospects > tbody > tr > th{font-family:var(--t7-mono);text-transform:uppercase;
  letter-spacing:.07em;font-size:10px;color:var(--t7-muted);font-weight:500;
  white-space:nowrap;width:9rem}
table.prospects > tbody > tr:last-child > td,
table.prospects > tbody > tr:last-child > th{border-bottom:0}
tr.p-row:hover td{background:var(--t7-paper)}
.c-expand{width:1.6rem;padding-right:0 !important}
.row-toggle{display:inline-block}
.row-toggle>summary{cursor:pointer;list-style:none;width:1.1rem;height:1.1rem;
  display:grid;place-items:center;color:var(--t7-electric);font-size:.72rem;
  border-radius:4px}
.row-toggle>summary::-webkit-details-marker{display:none}
.row-toggle>summary::before{content:"\25b8"}
.row-toggle[open]>summary::before{content:"\25be"}
.row-toggle>summary:hover{background:var(--t7-lilac)}
.c-client{font-weight:600}
.c-domain{font-weight:500}
.c-sub{display:block;font-family:var(--t7-mono);font-size:10.5px;
  color:var(--t7-muted);font-weight:400;letter-spacing:.02em;margin-top:1px}
.c-sub.inline{display:inline;margin:0 0 0 .3rem}
.c-none{color:var(--t7-warm-gray)}
.c-when{font-family:var(--t7-mono);font-size:12px;color:var(--t7-muted)}

/* The delete control stays out of the way until you are on the row, and comes
   back for keyboard focus — otherwise it is unreachable without a mouse. */
.c-kill{width:1.8rem;padding-left:0 !important;text-align:right}
.c-kill form{margin:0;line-height:0}
.kill{display:inline-grid;place-items:center;width:1.5rem;height:1.5rem;padding:0;
  border:0;border-radius:6px;background:none;color:var(--t7-warm-gray);cursor:pointer;
  opacity:0;transition:opacity .12s,color .12s,background .12s}
tr.p-row:hover .kill{opacity:1}
.kill:focus-visible{opacity:1}
.kill:hover{color:var(--air-bad);background:var(--air-bad-bg)}

/* The detail row stays hidden until its toggle is opened. :has keeps this in CSS;
   where it is unsupported the panel is simply always visible, which is not a
   failure — just less tidy. */
tr.p-detail{display:none}
tr.p-row:has(.row-toggle[open])+tr.p-detail{display:table-row}
tr.p-detail>td{padding:0 !important;background:var(--t7-paper)}
.detail-panel{padding:.6rem .6rem .8rem 2.2rem}
table.scans{width:100%;border-collapse:collapse;font-size:13px;margin:0}
table.scans th,table.scans td{text-align:left;padding:.35rem .5rem;
  border-bottom:1px solid var(--t7-khaki);white-space:nowrap}
table.scans th{font-family:var(--t7-mono);text-transform:uppercase;
  letter-spacing:.07em;font-size:10px;color:var(--t7-muted);font-weight:500}
table.scans td.num,table.scans th.num{text-align:right;
  font-variant-numeric:tabular-nums}
table.scans tr:last-child td{border-bottom:0}

.pager{display:flex;align-items:center;gap:1rem;margin-top:.6rem;
  font-family:var(--t7-mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.08em}
.pager a{color:var(--t7-electric);text-decoration:none}
.pager a:hover{text-decoration:underline}
.pager .off{color:var(--t7-warm-gray)}
.pager .of{color:var(--t7-muted);margin-left:auto}

.pill{display:inline-block;padding:2px 9px 1px;border-radius:99px;
  font-family:var(--t7-mono);font-size:10.5px;font-weight:500;
  text-transform:uppercase;letter-spacing:.06em}
.pill.green{background:var(--air-good-bg);color:var(--air-good)}
.pill.amber{background:var(--t7-mimosa);color:var(--air-warn)}
.pill.red,.pill.gated{background:var(--air-bad-bg);color:var(--air-bad)}
.pill.pending,.pill.running{background:var(--t7-lilac);color:var(--t7-medium)}
.pill.anonymous{background:var(--t7-khaki);color:var(--t7-muted)}
.pill.known{background:var(--t7-lilac);color:var(--t7-medium)}
.pill.warm{background:var(--t7-mimosa);color:var(--air-warn)}
.empty{color:var(--t7-muted);font-size:14px;padding:.4rem 0}
/* Movement since the previous scan of the same kind. Reads next to the number it
   qualifies, so it never needs a column of its own. */
.delta{font-family:var(--t7-mono);font-size:11px;font-weight:600;white-space:nowrap}
.delta.up{color:var(--air-good)}
.delta.down{color:var(--air-bad)}
form.rescan{display:inline}
.c-actions{white-space:nowrap}
.scan-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.5rem}
.linkbtn{background:none;border:0;color:var(--t7-electric);font:inherit;
  cursor:pointer;padding:0}
.linkbtn:hover{text-decoration:underline}
.form-card{background:#fff;border:2px solid var(--t7-warm-gray);
  border-radius:var(--t7-radius);padding:24px;max-width:38rem}
.form-card--wide{max-width:none}
.form-card .row{margin-bottom:1.1rem}
.form-card label{display:block;font-family:var(--t7-mono);text-transform:uppercase;
  letter-spacing:.08em;font-size:11px;color:var(--t7-muted);margin-bottom:5px}
.form-card .opt{text-transform:none;letter-spacing:0}
.form-card input,.form-card select,.form-card textarea{width:100%;font:inherit;
  font-size:16px;padding:9px 11px;border:1.5px solid var(--t7-warm-gray);
  border-radius:8px;background:var(--t7-paper);color:var(--t7-dark-purple);
  font-family:inherit}
.form-card input:focus,.form-card select:focus,.form-card textarea:focus{
  outline:none;border-color:var(--t7-electric)}
.form-card .check{display:flex;gap:.6rem;align-items:flex-start}
.form-card .check input{width:auto;margin-top:.3rem}
.form-card .check label{text-transform:none;letter-spacing:0;font-size:14.5px;
  color:var(--t7-dark-purple);font-family:var(--t7-sans)}
.form-card .hint{color:var(--t7-muted);font-size:13px;margin:.35rem 0 0;max-width:52ch}
.login{max-width:24rem;margin:8vh auto}

/* ------------------------------------------------------------ email editor */
.banner{border-radius:10px;padding:.8rem 1rem;margin:0 0 1rem;font-size:15px;
  border:2px solid}
.banner.ok{background:var(--air-good-bg);border-color:var(--air-good-line);
  color:var(--air-good)}
.banner.bad{background:var(--air-bad-bg);border-color:var(--air-bad-line);
  color:var(--air-bad)}
.email-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:1.6rem;align-items:start}
@media (max-width:900px){.email-grid{grid-template-columns:1fr}}
.preview-mail{background:#fff;border:2px solid var(--t7-warm-gray);
  border-radius:var(--t7-radius);overflow:hidden}
.mail-head{padding:14px 16px;border-bottom:1px solid var(--t7-khaki);
  background:var(--t7-khaki);font-size:14px}
.mail-head div{margin-bottom:.2rem}
.mail-head .l{display:inline-block;width:4.2rem;font-family:var(--t7-mono);
  font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--t7-muted)}
.mail-body{padding:16px;font-size:15px;line-height:1.6}
.mail-body p{margin:0 0 .9rem;max-width:52ch}
.mail-body p:last-child{margin-bottom:0}

.cta-report{text-align:center;margin:0 0 2.2rem}
.cta-save{text-align:center;margin:0 0 2.2rem}
.cta-save form{display:inline}
.cta-save.saved{font-family:var(--t7-mono);font-size:13px;color:var(--t7-muted)}

/* ------------------------------------------------------------ sending status */
.sending{border:2px solid var(--t7-warm-gray);border-radius:var(--t7-radius);
  padding:18px 20px;margin:0 0 1.8rem;background:#fff}
.sending.is-on{border-color:var(--air-good-line);background:var(--air-good-bg)}
.sending.is-off{border-color:var(--t7-coral);background:var(--t7-mimosa)}
.sending-head{display:flex;align-items:flex-start;gap:.9rem;flex-wrap:wrap}
.sending-head>div{flex:1 1 18rem;min-width:0}
.sending-head strong{display:block;font-size:16px;margin-bottom:.2rem}
.sending-head p{margin:0;font-size:14px;color:var(--t7-muted);max-width:52ch}
.sending .dot{flex:0 0 auto;width:11px;height:11px;border-radius:50%;margin-top:.42rem}
.sending.is-on .dot{background:var(--air-good)}
.sending.is-off .dot{background:var(--t7-coral)}
code.copyable{display:inline-block;font-family:var(--t7-mono);font-size:12.5px;
  background:#fff;border:1px solid var(--t7-warm-gray);border-radius:6px;
  padding:.15rem .45rem;word-break:break-all;user-select:all}