/* ===================================================================
 * MTI Accessible MDE Compliance Checker
 * Every rule is scoped under .mti-mde so it cannot affect the host theme.
 * Theme: transparent page background, navy header band, light-grey body.
 * =================================================================== */

.mti-mde{
  --navy:#003A5D;        /* MTI primary — header band */
  --blue:#0079C2;        /* MTI accent / interactive */
  --blue-soft:#E6F1F9;
  --risk:#E0A800;        /* at-risk / deadline only */
  --risk-bg:#FBF3D6;
  --good:#1A7F5A;        /* cleared outcome */
  --good-bg:#E6F4EE;
  --ink:#16242F;         /* primary text on the light body */
  --muted:#5B6B78;       /* secondary text on the light body */
  --line:#D7DDE3;        /* hairlines on the light body */
  --bg:transparent;      /* outer container */
  --card:#EEF1F4;        /* light-grey body surface */
  --radius:14px;
  --shadow:0 1px 2px rgba(16,36,47,.06),0 18px 40px -20px rgba(16,36,47,.35);

  background:var(--bg);
  color:var(--ink);
  font-family:"Wix Madefor Text",system-ui,-apple-system,"Segoe UI",sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  padding:24px 16px 40px;
}
.mti-mde *{box-sizing:border-box;}

.mti-mde .mti-wrap{max-width:660px;margin:0 auto;}
.mti-mde .mono{font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;}

.mti-mde .card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}

/* Header band (stays navy) */
.mti-mde .card-head{
  background:var(--navy);
  color:#fff;
  padding:22px 26px 20px;
}
.mti-mde .card-head .eyebrow{
  font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
  color:#9FC4DC;margin:0 0 8px;
}
.mti-mde .card-head h1{font-size:21px;line-height:1.25;margin:0;font-weight:600;color:#fff;}
.mti-mde .card-head p{margin:8px 0 0;font-size:13.5px;color:#CFE0EC;max-width:48ch;}

/* Progress (on the light body) */
.mti-mde .progress{padding:16px 26px 0;}
.mti-mde .progress .bar{height:5px;background:var(--line);border-radius:999px;overflow:hidden;}
.mti-mde .progress .fill{height:100%;width:0;background:var(--blue);border-radius:999px;transition:width .35s ease;}
.mti-mde .progress .label{
  font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;font-size:11px;letter-spacing:.5px;
  color:var(--muted);margin-top:8px;
}

.mti-mde .body{padding:22px 26px 26px;}
@media(max-width:480px){
  .mti-mde .card-head{padding:18px 18px 16px;}
  .mti-mde .progress{padding:14px 18px 0;}
  .mti-mde .body{padding:18px;}
}

.mti-mde .step{animation:mti-mde-fade .32s ease;}
@keyframes mti-mde-fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

.mti-mde .qnum{font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;font-size:12px;color:var(--blue);font-weight:600;letter-spacing:.5px;}
.mti-mde h2.q{font-size:20px;line-height:1.3;margin:6px 0 6px;font-weight:600;color:var(--ink);}
.mti-mde .help{font-size:13.5px;color:var(--muted);margin:0 0 18px;}
.mti-mde .help b{color:var(--ink);font-weight:600;}

/* Option buttons — white cards on the grey body */
.mti-mde .opts{display:flex;flex-direction:column;gap:10px;}
.mti-mde .opt{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:#fff;border:1.5px solid var(--line);border-radius:11px;
  padding:15px 16px;font-size:15px;font-family:inherit;color:var(--ink);
  cursor:pointer;transition:border-color .15s,background .15s,transform .05s;
}
.mti-mde .opt:hover{border-color:var(--blue);background:var(--blue-soft);}
.mti-mde .opt:active{transform:translateY(1px);}
.mti-mde .opt:focus-visible{outline:3px solid var(--blue);outline-offset:2px;}
.mti-mde .opt .tick{
  flex:0 0 20px;height:20px;border:1.5px solid var(--line);border-radius:6px;
  display:grid;place-items:center;color:#fff;font-size:13px;transition:.15s;
}
.mti-mde .opt.sel{border-color:var(--blue);background:var(--blue-soft);}
.mti-mde .opt.sel .tick{background:var(--blue);border-color:var(--blue);}
.mti-mde .opt small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px;}
.mti-mde .opt .txt{flex:1;}

.mti-mde details.defn{margin:-6px 0 18px;}
.mti-mde details.defn summary{
  font-size:13px;color:var(--blue);cursor:pointer;font-weight:500;list-style:none;
}
.mti-mde details.defn summary::-webkit-details-marker{display:none;}
.mti-mde details.defn summary::before{content:"＋ ";font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;}
.mti-mde details.defn[open] summary::before{content:"－ ";}
.mti-mde details.defn p{font-size:13px;color:var(--muted);margin:8px 0 0;}

.mti-mde .nav{display:flex;justify-content:space-between;align-items:center;margin-top:20px;gap:12px;}
.mti-mde .btn{
  font-family:inherit;font-size:14px;font-weight:600;border-radius:10px;
  padding:12px 20px;cursor:pointer;border:1.5px solid transparent;transition:.15s;
}
.mti-mde .btn:focus-visible{outline:3px solid var(--blue);outline-offset:2px;}
.mti-mde .btn-primary{background:var(--blue);color:#fff;}
.mti-mde .btn-primary:hover{background:#0367a6;}
.mti-mde .btn-primary:disabled{background:#B9CCDA;cursor:not-allowed;}
.mti-mde .btn-ghost{background:transparent;color:var(--muted);border-color:var(--line);}
.mti-mde .btn-ghost:hover{color:var(--ink);border-color:var(--muted);}
.mti-mde .back{background:none;border:none;color:var(--muted);font-family:inherit;font-size:13.5px;cursor:pointer;padding:6px 2px;}
.mti-mde .back:hover{color:var(--ink);}
.mti-mde .back::before{content:"← ";}

/* Result */
.mti-mde .verdict{display:flex;gap:14px;align-items:flex-start;padding-bottom:6px;}
.mti-mde .badge{
  flex:0 0 auto;font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;font-size:11px;font-weight:600;
  letter-spacing:.5px;text-transform:uppercase;padding:6px 11px;border-radius:999px;margin-top:2px;
}
.mti-mde .badge.req{background:var(--blue-soft);color:var(--navy);}
.mti-mde .badge.clear{background:var(--good-bg);color:var(--good);}
.mti-mde h2.vtitle{font-size:21px;line-height:1.25;margin:0 0 4px;font-weight:600;color:var(--ink);}
.mti-mde .vsub{font-size:14px;color:var(--muted);margin:0;}

.mti-mde .obl{margin:22px 0 0;border-top:1px solid var(--line);}
.mti-mde .obl .row{padding:16px 0;border-bottom:1px solid var(--line);}
.mti-mde .obl .row h3{
  font-size:12px;font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;letter-spacing:.8px;text-transform:uppercase;
  color:var(--blue);margin:0 0 6px;font-weight:600;
}
.mti-mde .obl .row p{margin:0;font-size:14.5px;color:var(--ink);}
.mti-mde .obl .row p+p{margin-top:6px;}
.mti-mde .cite{font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;font-size:12.5px;color:var(--muted);}

.mti-mde .deadline{
  background:var(--risk-bg);border:1px solid var(--risk);border-left:5px solid var(--risk);
  border-radius:10px;padding:14px 16px;margin:20px 0 0;
}
.mti-mde .deadline .dh{font-weight:700;font-size:13px;color:#8A6700;text-transform:uppercase;letter-spacing:.6px;font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;margin:0 0 8px;}
.mti-mde .deadline .dl{display:flex;justify-content:space-between;align-items:baseline;font-size:14.5px;padding:3px 0;}
.mti-mde .deadline .dl span:last-child{font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;font-weight:600;color:#6E5200;}
.mti-mde .deadline .soon{color:#9A1B1B;}

.mti-mde .note{background:var(--good-bg);border:1px solid #BFE3D2;border-radius:10px;padding:14px 16px;margin:18px 0 0;font-size:13.5px;color:#1E5C44;}

.mti-mde .cta{margin-top:22px;display:flex;gap:10px;flex-wrap:wrap;}

/* Result action bar */
.mti-mde .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;padding-top:18px;border-top:1px solid var(--line);}
.mti-mde .actions .btn{flex:1 1 auto;min-width:180px;display:inline-flex;align-items:center;justify-content:center;gap:8px;}
.mti-mde .btn-outline{background:#fff;color:var(--navy);border-color:var(--navy);}
.mti-mde .btn-outline:hover{background:var(--navy);color:#fff;}
.mti-mde .btn svg{width:16px;height:16px;flex:0 0 16px;}

/* Disclaimer — sits OUTSIDE the card on the host page background. */
.mti-mde .disclaimer{
  margin:20px 4px 0;font-size:11.5px;line-height:1.55;color:#7C8A95;
  border-top:1px solid rgba(120,138,149,.3);padding-top:14px;
}
.mti-mde .disclaimer b{color:#5B6B78;}