/* AME public audit pages.
 *
 * Loaded AFTER case-study.css, which supplies the palette tokens, typography,
 * .band/.in/.shead/.kick/.lede/.card/.list/.disc/.btn and the site footer. This
 * file only adds the components an audit needs and that the case studies have
 * no equivalent for: the audit header, the sticky niche control, the scorecard,
 * severity-rated findings, the prioritised task list and the 30/60/90 plan.
 *
 * Severity colours reuse the amber/red already declared in case-study.css so no
 * new palette is introduced.                                                  */

/* ---- Audit header -------------------------------------------------------- */
.a-head{padding:56px 0 40px}
.a-head .kick{margin-bottom:16px}
.a-head h1{font-size:clamp(30px,4.4vw,46px);letter-spacing:-.03em;line-height:1.1;max-width:19em}
.a-head .verdict{margin-top:20px;font-size:18px;line-height:1.6;color:var(--mid);max-width:44em}
.a-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.a-meta span{display:inline-flex;align-items:center;background:var(--card);border:1px solid var(--line);
  border-radius:999px;padding:7px 14px;font-size:13.5px;color:var(--mid)}
.a-meta span b{color:var(--ink);font-weight:700;margin-right:6px}

/* ---- Sticky niche control ------------------------------------------------
 * In normal flow and sticky, so it can never cover the audit text. It parks
 * under the 71px fixed site header. */
.a-sticky{position:sticky;top:71px;z-index:20;background:rgba(251,250,248,.94);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.a-sticky .in{display:flex;align-items:center;gap:14px;padding-top:10px;padding-bottom:10px}
.a-sticky-ic{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:var(--teal-lt);color:var(--teal)}
.a-sticky-t{flex:1;min-width:0;font-family:"Plus Jakarta Sans","Inter",sans-serif;font-weight:800;
  font-size:15px;letter-spacing:-.01em;line-height:1.25;color:var(--ink)}
.a-sticky-t small{display:block;font-family:"Inter",sans-serif;font-weight:500;font-size:12.5px;
  color:var(--soft);letter-spacing:0}
.a-sticky-cta{flex:none;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  font-size:14px;font-weight:700;color:#007A5C;text-decoration:none;
  border:1px solid #BEE6D8;background:var(--teal-lt);border-radius:999px;padding:8px 15px;
  transition:background .15s,color .15s}
.a-sticky-cta:hover{background:var(--teal);color:#fff;border-color:var(--teal)}
.a-sticky-cta:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
@media (max-width:640px){
  .a-sticky .in{gap:10px}
  .a-sticky-t{font-size:14px}
  .a-sticky-t small{display:none}
  .a-sticky-cta{padding:8px 12px;font-size:0;gap:0}
  .a-sticky-cta svg{width:18px;height:18px}
}
@media (prefers-reduced-motion:reduce){.a-sticky-cta{transition:none}}

/* ---- Scorecard ----------------------------------------------------------- */
.sc-wrap{display:grid;grid-template-columns:1.35fr 1fr;gap:22px;align-items:start}
@media (max-width:900px){.sc-wrap{grid-template-columns:1fr}}
.sc{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.sc h3{font-size:15px;padding:16px 20px;border-bottom:1px solid var(--line);margin:0}
.sc table{width:100%;border-collapse:collapse}
.sc td{padding:11px 20px;border-top:1px solid var(--line);font-size:14.5px;color:var(--mid);vertical-align:top}
.sc tr:first-child td{border-top:0}
.sc td.m{color:var(--ink);font-weight:600;width:46%}
.sc td.v{font-family:"Plus Jakarta Sans","Inter",sans-serif;font-weight:800;color:var(--ink);
  font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.rate{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;white-space:nowrap}
.rate.crit{background:var(--red-lt);color:#8F3524}
.rate.weak{background:var(--amber-lt);color:#8A570F}
.rate.ok{background:var(--teal-lt);color:#007A5C}
/* The metric table needs more width than a phone gives it. .sc carries
   overflow:hidden for its rounded corners, which silently clipped the rating
   column below ~600px, so let the card scroll instead of cutting content off. */
@media (max-width:600px){
  .sc{overflow-x:auto}
}

/* ---- Findings ------------------------------------------------------------ */
.fnd{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px 26px;
  margin-top:16px;position:relative;overflow:hidden}
.fnd::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--line)}
.fnd.sev-crit::before{background:var(--red)}
.fnd.sev-high::before{background:var(--amber)}
.fnd.sev-med::before{background:var(--teal)}
.fnd-hd{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.fnd-n{font-family:"Plus Jakarta Sans","Inter",sans-serif;font-weight:800;font-size:13px;color:var(--soft);
  font-variant-numeric:tabular-nums}
.fnd-hd h3{flex:1;min-width:220px;font-size:19px;letter-spacing:-.02em;line-height:1.3;margin:0}
.fnd dl{margin:0}
.fnd dt{font-family:"Plus Jakarta Sans","Inter",sans-serif;font-size:11px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--soft);margin-top:16px}
.fnd dd{margin:5px 0 0;font-size:15.5px;line-height:1.6;color:var(--mid)}
.fnd dd b{color:var(--ink)}

/* ---- Prioritised task list ----------------------------------------------- */
.tasks{margin-top:22px;border:1px solid var(--line);border-radius:16px;background:var(--card);overflow:hidden}
.tasks li{display:grid;grid-template-columns:96px 1fr;gap:16px;padding:14px 20px;
  border-top:1px solid var(--line);font-size:15.5px;line-height:1.55;color:var(--mid);align-items:baseline}
.tasks li:first-child{border-top:0}
.tasks{list-style:none;padding:0}
.pri{font-family:"Plus Jakarta Sans","Inter",sans-serif;font-size:11px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;padding:4px 10px;border-radius:999px;text-align:center;white-space:nowrap}
.pri.crit{background:var(--red-lt);color:#8F3524}
.pri.high{background:var(--amber-lt);color:#8A570F}
.pri.med{background:var(--paper-2);color:var(--mid);border:1px solid var(--line)}
@media (max-width:600px){
  .tasks li{grid-template-columns:1fr;gap:8px}
  .pri{justify-self:start}
}

/* ---- 30/60/90 ------------------------------------------------------------ */
.plan{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:22px}
@media (max-width:900px){.plan{grid-template-columns:1fr}}
.plan .card{margin:0}
.plan .card h4{font-size:17px;margin-bottom:4px}
.plan .card .win{font-family:"Plus Jakarta Sans","Inter",sans-serif;font-size:11.5px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:var(--teal);margin-bottom:12px}

/* ---- Audit selector on /audits ------------------------------------------ */
.a-sel{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;list-style:none;margin:0;padding:0}
@media (max-width:1000px){.a-sel{grid-template-columns:repeat(2,1fr);gap:18px}}
@media (max-width:640px){.a-sel{grid-template-columns:1fr;gap:14px}}
.a-sel a{display:flex;align-items:center;gap:16px;height:100%;background:var(--card);
  border:1px solid var(--line);border-radius:16px;padding:22px 22px;text-decoration:none;color:var(--ink);
  box-shadow:0 1px 2px rgba(11,22,40,.04);transition:border-color .15s,box-shadow .15s,transform .15s}
.a-sel a:hover{border-color:#BEE6D8;box-shadow:0 1px 2px rgba(11,22,40,.04),0 10px 26px rgba(11,22,40,.08);
  transform:translateY(-2px)}
.a-sel a:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.a-sel-ic{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:var(--teal-lt);color:var(--teal);transition:background .15s,color .15s}
.a-sel a:hover .a-sel-ic{background:var(--teal);color:#fff}
.a-sel-t{flex:1;min-width:0}
.a-sel-t strong{display:block;font-family:"Plus Jakarta Sans","Inter",sans-serif;font-size:17px;
  font-weight:800;letter-spacing:-.015em;line-height:1.3}
.a-sel-t span{display:block;margin-top:3px;font-size:13.5px;color:var(--soft)}
.a-sel-chev{flex:none;color:#B4BDC7;transition:color .15s,transform .18s ease}
.a-sel a:hover .a-sel-chev{color:var(--teal);transform:translateX(3px)}
@media (max-width:640px){
  .a-sel a{padding:18px}
  .a-sel-ic{width:40px;height:40px;border-radius:11px}
  .a-sel-t strong{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  .a-sel a,.a-sel-chev{transition:border-color .15s,color .15s}
  .a-sel a:hover{transform:none}
  .a-sel a:hover .a-sel-chev{transform:none}
}