/* IA Microsoft 365 Self-Assessment — layer over /css/calculator.css
   Uses the calculator's tokens (--c-line, --c-glass, --c-text, --c-muted,
   --c-blue-lite, --c-cyan ...), which are defined on .iacalc. Nothing here
   redefines them. Everything is scoped to .m365 / m365-* so it cannot leak
   onto other pages. The tool root is <div class="iacalc m365">.

   Contrast note: calculator.css --c-muted (#8aaccc) is ~7.5:1 on the dark
   card, so it is safe for small text. The older site-v4.css --muted (#5f7fa0)
   would be only ~4:1 and must NOT be used here. */

/* Status colours. *-t variants are lighter and used for TEXT (>= 4.5:1 on the
   dark card); the plain variants are for fills and borders. */
.m365{
  --m365-yes:#10b981;     --m365-yes-t:#34d399;
  --m365-partial:#d97706; --m365-partial-t:#fbbf24;
  --m365-no:#ef4444;      --m365-no-t:#f87171;
}

/* The `hidden` attribute must beat the display set by calculator.css. */
.m365-flash[hidden],.m365 .iacalc-warn[hidden]{display:none!important}
.m365-printonly{display:none}
.m365-book{margin:20px 0 8px}

/* calculator.css gives .iacalc overflow:hidden plus a decorative ::before glow
   at right:-176px. hidden still lets script scroll the box, so scrollIntoView
   or focus on a child could shift the whole tool sideways. clip cannot be
   scrolled at all; the hidden from calculator.css stays as the fallback. */
.iacalc.m365{overflow:clip}

/* ── Resume banner + inline link-buttons ─────────────────────────────────── */
.m365-resume{margin:0 0 18px;padding:12px 14px;border:1px solid rgba(0,212,255,.4);
  border-radius:12px;background:rgba(0,212,255,.07);font-size:.88rem;line-height:1.6;color:var(--c-text)}
.m365-link{background:none;border:0;padding:2px 0;color:var(--c-blue-lite);font:inherit;
  font-weight:700;cursor:pointer;text-decoration:underline}
.m365-link:hover{color:var(--c-cyan)}
.m365-link:focus-visible{outline:2px solid var(--c-cyan);outline-offset:2px;border-radius:3px}

/* Marker appended to required field labels */
.iacalc-req{color:var(--c-muted);font-weight:400;font-size:.76rem}

/* Invalid field (set by the JS on the first offending input) */
.m365 [aria-invalid="true"]{border-color:var(--m365-no)!important}

/* ── Question sections and rows ──────────────────────────────────────────── */
.m365-sec{margin:28px 0 12px;font-size:1.02rem;letter-spacing:.01em;color:var(--c-text-hi)}
.m365-rows{display:flex;flex-direction:column;gap:12px}

.m365-row{border:1px solid var(--c-line);border-radius:14px;padding:14px 16px 12px;
  background:var(--c-glass);transition:border-color .2s ease,background .2s ease}
.m365-row.answered{border-color:rgba(0,112,243,.45);background:rgba(0,112,243,.06)}
/* Not counted for the chosen plan: dashed and muted instead of faded, so the
   text keeps its contrast. */
.m365-row-na{border-style:dashed}
.m365-row-na .m365-q{color:var(--c-muted)}
.m365-row-head{display:flex;gap:12px;align-items:flex-start}
.m365-num{flex:0 0 auto;min-width:48px;font-weight:800;font-size:.78rem;letter-spacing:.06em;
  color:var(--c-cyan);padding-top:2px}
.m365-row-q{flex:1;min-width:0}
.m365-q{margin:0 0 4px;font-weight:600;line-height:1.45;color:var(--c-text-hi);overflow-wrap:anywhere}
.m365-where{display:block;font-size:.78rem;color:var(--c-muted);line-height:1.4;overflow-wrap:anywhere}
.m365-na{margin:10px 0 0;font-size:.82rem;color:var(--c-muted)}

/* ── Answer pills ────────────────────────────────────────────────────────── */
.m365-choices{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 4px}
.m365-choice{position:relative;display:inline-flex;align-items:center;min-height:40px;
  padding:8px 14px;border:1px solid var(--c-line-hi);border-radius:999px;font-size:.84rem;
  line-height:1.2;cursor:pointer;color:var(--c-text);user-select:none;
  transition:border-color .18s ease,background .18s ease}
.m365-choice:hover{border-color:var(--c-muted)}
/* Visually hidden but still focusable and operable (not display:none). */
.m365-choice input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;opacity:0;pointer-events:none}
/* Focus ring: :focus-within everywhere; where :has() exists, only for keyboard
   focus so a mouse click does not leave a ring behind. */
.m365-choice:focus-within{outline:3px solid var(--c-cyan);outline-offset:2px}
@supports selector(:has(*)){
  .m365-choice:focus-within{outline:0}
  .m365-choice:has(input:focus-visible){outline:3px solid var(--c-cyan);outline-offset:2px}
}
/* Selected is shown by a checkmark and bold weight as well as colour. */
.m365-choice.on{font-weight:700;color:var(--c-text-hi)}
.m365-choice.on::before{content:"\2713";margin-right:6px;font-weight:800}
.m365-choice-yes.on{border-color:var(--m365-yes);background:rgba(16,185,129,.18)}
.m365-choice-partial.on{border-color:var(--m365-partial);background:rgba(217,119,6,.18)}
.m365-choice-no.on{border-color:var(--m365-no);background:rgba(239,68,68,.18)}
.m365-choice-unknown.on,.m365-choice-na.on{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.1)}

/* ── "Why it matters" disclosure ─────────────────────────────────────────── */
.m365-detail{margin-top:8px;border-top:1px solid var(--c-line);padding-top:4px;
  font-size:.86rem;color:var(--c-muted)}
.m365-detail summary{cursor:pointer;color:var(--c-blue-lite);font-weight:600;
  display:flex;align-items:center;min-height:40px}
.m365-detail summary:hover{color:var(--c-cyan)}
.m365-detail summary:focus-visible{outline:2px solid var(--c-cyan);outline-offset:2px;border-radius:4px}
.m365-detail p{margin:8px 0 0;line-height:1.55;overflow-wrap:anywhere}
.m365-detail p strong{color:var(--c-text)}
.m365-detail a,.m365-gap a{color:var(--c-blue-lite);text-decoration:underline}
.m365-detail a:hover,.m365-gap a:hover{color:var(--c-cyan)}

/* ── Meter ───────────────────────────────────────────────────────────────── */
.m365-meter{margin:18px 0 22px}
.m365-meter-static{margin:6px 0 20px}
.m365-meter-status{margin:4px 0 0}
.m365-meter-bar{display:flex;height:10px;border-radius:999px;overflow:hidden;
  background:rgba(255,255,255,.08);border:1px solid var(--c-line)}
.m365-seg{display:block;height:100%;transition:width .35s ease}
.m365-seg-yes{background:var(--m365-yes)}
.m365-seg-partial{background:var(--m365-partial)}
.m365-seg-no{background:var(--m365-no)}
.m365-meter-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font-size:.78rem;
  color:var(--c-muted);align-items:center}
.m365-key{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:6px;vertical-align:middle}
.m365-key-yes{background:var(--m365-yes)}
.m365-key-partial{background:var(--m365-partial)}
.m365-key-no{background:var(--m365-no)}
.m365-key-unknown{background:rgba(255,255,255,.35)}
.m365-meter-count{margin-left:auto;font-weight:700;color:var(--c-text)}

/* ── Results: score tile, lanes, gaps ────────────────────────────────────── */
.m365-band-A strong,.m365-band-B strong{color:var(--m365-yes-t)}
.m365-band-C strong{color:var(--m365-partial-t)}
.m365-band-D strong,.m365-band-F strong{color:var(--m365-no-t)}
.m365-band-none strong{color:var(--c-muted)}

.m365-lane{margin-top:14px}
.m365-lane summary{display:flex;align-items:center;min-height:40px}
.m365-gap{padding:12px 0;overflow-wrap:anywhere}
.m365-tag{display:inline-block;font-size:.72rem;font-weight:700;padding:3px 9px;border-radius:999px;
  border:1px solid var(--c-line-hi);white-space:nowrap}
.m365-tag-no{border-color:var(--m365-no);color:#fca5a5;background:rgba(239,68,68,.12)}
.m365-tag-partial{border-color:var(--m365-partial);color:#fcd34d;background:rgba(217,119,6,.14)}

/* ── Notices ─────────────────────────────────────────────────────────────── */
.m365-unlocked,.m365-notice{margin:0 0 16px;padding:12px 14px;border-radius:12px;font-size:.88rem;line-height:1.5}
.m365-unlocked{border:1px solid rgba(16,185,129,.5);background:rgba(16,185,129,.1);color:var(--c-text)}
/* .iacalc-warn supplies the red palette for the soft-fail notice. */
.m365-flash{line-height:1.5}
.m365-flash .m365-link{color:#fff;display:inline-flex;align-items:center;min-height:40px;padding:0 8px}

/* ── Small screens (375px and up) ────────────────────────────────────────── */
@media (max-width:480px){
  .m365-row{padding:12px 12px 10px}
  .m365-row-head{gap:8px}
  .m365-num{min-width:40px}
  .m365-choices{gap:8px}
  .m365-meter-count{margin-left:0;flex-basis:100%}
}

/* ── Motion ──────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .m365-seg,.m365-row,.m365-choice{transition:none}
}

/* ── Print: only the results, no site chrome, no controls, all lanes open ── */
@media print{
  .utility,.site-header,.site-footer,.iacalc-nav,.iacalc-progress,.m365-noprint,
  .m365-unlocked,.m365-notice,.m365-flash,.m365-flash-live,.iacalc-turnstile-wrap,.page-hero,
  #aria-widget,#aria-widget-root,#argos-trust-seal,#ia-cc-banner,#ia-cc-spacer,#ia-cc-modal-bg,
  .section-space:not(.m365-print-keep){display:none!important}

  .iacalc.m365 .m365-printonly{display:block;margin:0 0 16px;padding:0 0 10px;border-bottom:1px solid #999;font-size:.95rem;line-height:1.5}
  body{background:#fff!important;color:#111!important}
  .iacalc.m365{background:#fff;border:0;box-shadow:none;color:#111;max-width:100%;padding:0;overflow:visible}
  .iacalc.m365::before{display:none}
  .iacalc.m365 *{color:#111;box-shadow:none;text-shadow:none}
  .iacalc.m365 .iacalc-fine,.iacalc.m365 .iacalc-sub,.iacalc.m365 .m365-where{color:#444}

  /* Cards print as plain bordered boxes; meter fills keep their colours. */
  .m365 .iacalc-total-single,.m365 .iacalc-breakdown,.m365 .iacalc-disclaimer,.m365 .iacalc-line{
    background:#fff;border-color:#bbb}
  .m365 .m365-meter-bar{background:#eee;border-color:#bbb}
  .m365 .m365-seg,.m365 .m365-key{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .m365 .m365-tag{background:#fff;border-color:#666}

  /* Every lane is expanded. The JS opens them; this is the fallback. */
  details.m365-lane>*{display:block}
  details.m365-lane::details-content{content-visibility:visible;display:block}
  .m365 .m365-lane summary{break-after:avoid;color:#111}
  .m365 .m365-lane>summary+.iacalc-fine{break-after:avoid;break-before:avoid}

  .m365-gap{break-inside:avoid}
  .m365 a{color:#111;text-decoration:none}
  .m365 a[href]:after{content:""}
}

/* ── Quick check, carry-over suggestions and contact request ─────────────── */
.m365-suggest{margin:8px 0 0;padding:8px 12px;border-left:3px solid #A9C200;
  background:rgba(169,194,0,.09);border-radius:0 8px 8px 0;font-size:.88rem;line-height:1.55;color:var(--c-text)}
.m365-carry{margin:4px 0 14px}
.m365-contact{margin:18px 0 8px;padding:16px 18px;border:1px solid rgba(0,145,124,.5);
  border-radius:12px;background:rgba(0,145,124,.08)}
.m365-contact .m365-choices{margin-top:10px}
.m365-contact-form{margin-top:16px}
.m365-contact-form[hidden]{display:none!important}
.m365-contact-sent{border-color:#00917C;line-height:1.6;color:var(--c-text)}
.m365-textarea{min-height:5rem;resize:vertical;font:inherit}
@media print{.m365-contact,.m365-suggest,.m365-carry{display:none!important}}