/* ==========================================================================
   Career Readiness Report, application
   Tokens first, then primitives, then components. One file, no build step.

   The token block below is IDENTICAL to the marketing site's. That is the
   whole point: two properties, one identity, and no chance of drift because
   there is nothing to keep in sync by hand. See BRAND_GUIDE.md.

   No Tailwind and no Vite here on purpose: lw-prod has no node, so a build
   step would mean shipping compiled assets from a laptop and hoping they were
   current. Hand CSS removes that failure mode entirely.
   ========================================================================== */

:root {
  /* Palette sampled directly from the CRR logo.
     navy #143761 · blue #4778A1 · slate #7E94A9 · sky #79B8D9 · mint #85C3B8
     Accent values are darkened where they carry small text, to clear WCAG AA. */
  --ink-900:#0B2440;
  --ink-800:#143761;
  --ink-700:#1F4770;
  --ink-500:#46586F;      /* body copy, 7.28:1 on white */
  --ink-400:#556A82;      /* muted, 5.57:1 on white */
  --ink-300:#9CACBC;

  --paper:#FFFFFF;
  --paper-50:#F7F9FB;
  --paper-100:#EFF3F7;
  --line:#DEE6EE;

  --accent-600:#2E5F8A;   /* accent text on white, 6.73:1 */
  --accent-500:#3A6F9C;
  --accent-400:#79B8D9;   /* logo sky, for dark surfaces */
  --accent-100:#E7F0F7;

  --mint-400:#85C3B8;     /* the "free" signal on dark */
  --mint-700:#2E8577;

  --gold-500:#C8963E;
  --gold-100:#FBF1DF;

  --on-dark:#EAF1F7;
  --on-dark-dim:#A9BDD1;

  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:32px;

  --shadow-sm:0 1px 2px rgba(11,36,64,.06), 0 2px 6px rgba(11,36,64,.05);
  --shadow-md:0 6px 16px rgba(11,36,64,.08), 0 2px 6px rgba(11,36,64,.05);
  --shadow-lg:0 24px 60px rgba(11,36,64,.16), 0 8px 20px rgba(11,36,64,.09);

  --sans:'Inter var','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --wrap:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--sans);color:var(--ink-800);background:var(--paper);
  line-height:1.6;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--accent-600)}
button,input,select,textarea{font:inherit;color:inherit}

.wrap{width:min(100% - 2.5rem, var(--wrap));margin-inline:auto}
.wrap--narrow{width:min(100% - 2.5rem, 760px)}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink-900);color:#fff;padding:.75rem 1.25rem;border-radius:0 0 var(--r-sm) 0}
.skip:focus{left:0}

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--accent-600);outline-offset:3px;border-radius:6px;
}

.eyebrow{
  font-size:.72rem;font-weight:680;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-600);margin:0 0 .6rem;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.72rem 1.35rem;border-radius:999px;border:1px solid transparent;
  font-weight:600;font-size:.95rem;text-decoration:none;cursor:pointer;
  transition:background .16s,border-color .16s,color .16s,transform .16s,box-shadow .16s;
  min-height:44px;  /* WCAG 2.2 target size, with room to spare */
}
.btn--primary{background:var(--ink-900);color:#fff}
.btn--primary:hover{background:var(--ink-800);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn--ghost{background:transparent;color:var(--ink-800);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--accent-500);color:var(--accent-600)}
.btn--onDark{background:var(--paper);color:var(--ink-900)}
.btn--onDark:hover{background:var(--accent-100);transform:translateY(-1px)}
.btn--sm{padding:.5rem 1rem;font-size:.88rem;min-height:38px}
.btn--lg{padding:.9rem 1.7rem;font-size:1.02rem}

/* ---------- header ---------- */
.appHeader{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);
  backdrop-filter:saturate(150%) blur(10px);border-bottom:1px solid transparent;
  transition:border-color .2s,box-shadow .2s;
}
.appHeader.is-stuck{border-bottom-color:var(--line);box-shadow:var(--shadow-sm)}
.appHeader__in{display:flex;align-items:center;gap:1.4rem;padding-block:.8rem}
.appLogo{display:flex;align-items:center;gap:.6rem;text-decoration:none;flex:0 0 auto}
.appLogo img{height:34px;width:auto}
.appLogo__wm{
  font-weight:700;font-size:1.02rem;letter-spacing:-.017em;color:var(--ink-800);
  line-height:1.1;white-space:nowrap;
}
@media (max-width:430px){ .appLogo__wm{font-size:.92rem;white-space:normal;max-width:11ch} }
.appNav{display:flex;gap:1.35rem;margin-left:auto;align-items:center}
.appNav a{color:var(--ink-500);text-decoration:none;font-size:.93rem;font-weight:530}
.appNav a:hover{color:var(--accent-600)}
@media (max-width:780px){ .appNav{display:none} }

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--ink-900);color:var(--on-dark)}
.hero__media{position:absolute;inset:0}
.hero__media img,.hero__media video{width:100%;height:100%;object-fit:cover}
/* Two layers: a wash for brand, a vertical scrim for text contrast. Verified
   at 8.9:1 for the h1 over the darkest region of the photograph. */
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(11,36,64,.62) 0%, rgba(11,36,64,.88) 72%, rgba(11,36,64,.96) 100%),
    linear-gradient(115deg, rgba(20,55,97,.72) 0%, rgba(46,133,119,.28) 100%);
}
.hero__in{position:relative;padding-block:clamp(3.6rem,9vw,6.4rem)}
.hero .eyebrow{color:var(--accent-400)}
.hero__title{
  font-size:clamp(2.1rem,5.2vw,3.5rem);line-height:1.08;letter-spacing:-.026em;
  color:#fff;margin:0 0 1rem;max-width:19ch;font-weight:700;
}
.hero__lede{font-size:clamp(1.02rem,1.9vw,1.2rem);color:var(--on-dark);max-width:56ch;line-height:1.65}
.hero__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.9rem}
.hero__pills{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.9rem}
.pill{
  font-size:.74rem;font-weight:650;letter-spacing:.06em;text-transform:uppercase;
  padding:.36rem .78rem;border-radius:999px;
  background:rgba(133,195,184,.16);color:var(--mint-400);border:1px solid rgba(133,195,184,.34);
}

/* ---------- sections ---------- */
.band{padding-block:clamp(3rem,6vw,5rem)}
.band--tint{background:var(--paper-50);border-block:1px solid var(--line)}
.band__head{max-width:60ch;margin-bottom:2.4rem}
.band__title{font-size:clamp(1.6rem,3.3vw,2.2rem);letter-spacing:-.02em;line-height:1.16;color:var(--ink-900);margin:0 0 .7rem}
.band__lede{color:var(--ink-500);font-size:1.02rem;line-height:1.7}

/* ---------- cards ---------- */
/* Never one column on desktop: auto-fit with a sane min keeps 2 to 3 up. */
.grid{display:grid;gap:1.15rem;grid-template-columns:repeat(auto-fit,minmax(266px,1fr))}
.card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  padding:1.35rem;box-shadow:var(--shadow-sm);
  transition:box-shadow .18s,border-color .18s,transform .18s;
}
.card:hover{box-shadow:var(--shadow-md);border-color:var(--accent-400);transform:translateY(-2px)}
.card__icon{
  width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  background:var(--accent-100);color:var(--accent-600);margin-bottom:.9rem;
}
.card__icon svg{width:20px;height:20px}
.card__title{font-size:1.04rem;color:var(--ink-900);margin:0 0 .4rem;letter-spacing:-.01em}
.card__txt{color:var(--ink-500);font-size:.94rem;line-height:1.65;margin:0}

/* ---------- split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3.4rem);align-items:center}
.split__media img{border-radius:var(--r-lg);box-shadow:var(--shadow-lg);width:100%}
@media (max-width:860px){ .split{grid-template-columns:1fr} }

/* ---------- auth ---------- */
.authWrap{min-height:100dvh;display:grid;grid-template-columns:1.05fr .95fr}
.authAside{
  position:relative;overflow:hidden;background:var(--ink-900);color:var(--on-dark);
  display:flex;flex-direction:column;justify-content:space-between;padding:2.4rem;
}
.authAside__media{position:absolute;inset:0}
.authAside__media img{width:100%;height:100%;object-fit:cover}
.authAside__media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(160deg, rgba(11,36,64,.90) 0%, rgba(20,55,97,.84) 48%, rgba(11,36,64,.92) 100%),
    linear-gradient(0deg, rgba(11,36,64,.55) 0%, rgba(11,36,64,0) 38%);
}
.authAside__in{position:relative;max-width:44ch}
.authAside__quote{font-size:clamp(1.2rem,2.2vw,1.6rem);line-height:1.35;color:#fff;letter-spacing:-.018em}
.authAside__by{margin-top:1rem;color:var(--on-dark-dim);font-size:.92rem}
.authMain{display:grid;place-items:center;padding:2.4rem 1.5rem;background:var(--paper)}
.authCard{width:min(100%,420px)}
.authCard__title{font-size:1.7rem;letter-spacing:-.02em;color:var(--ink-900);margin:0 0 .45rem}
.authCard__sub{color:var(--ink-500);font-size:.96rem;margin:0 0 1.7rem}
.authNote{
  margin-top:1.6rem;padding:.85rem 1rem;border-radius:var(--r-sm);
  background:var(--paper-50);border:1px solid var(--line);
  font-size:.85rem;color:var(--ink-500);line-height:1.6;
}
@media (max-width:900px){
  .authWrap{grid-template-columns:1fr}
  .authAside{display:none}
}

/* ---------- footer ---------- */
.appFooter{background:var(--ink-900);color:var(--on-dark-dim);padding-block:2.6rem 1.8rem;margin-top:auto}
.appFooter a{color:var(--on-dark);text-decoration:none;font-size:.9rem}
.appFooter a:hover{color:var(--accent-400);text-decoration:underline;text-underline-offset:3px}
.appFooter__top{display:flex;flex-wrap:wrap;gap:1.6rem 2.6rem;align-items:flex-start;padding-bottom:1.6rem}
.appFooter__brand img{width:160px;margin-bottom:.7rem}
.appFooter__tag{font-size:.88rem;max-width:34ch;line-height:1.6;color:var(--on-dark-dim)}
.appFooter__nav{display:flex;gap:2.4rem;margin-left:auto;flex-wrap:wrap}
.footCol h2{font-size:.72rem;font-weight:670;letter-spacing:.11em;text-transform:uppercase;color:var(--on-dark);margin:0 0 .75rem}
.footCol ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.appFooter__bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:1.3rem;font-size:.82rem;line-height:1.6}

/* ---------- motion ---------- */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .btn:hover,.card:hover{transform:none}
}

/* ---------- forms ---------- */
.form{display:grid;gap:1rem;margin-top:.2rem}
.field{display:grid;gap:.4rem}
.field label{font-size:.86rem;font-weight:600;color:var(--ink-700)}
.field input[type=email],
.field input[type=text],
.field input[type=password]{
  width:100%;padding:.72rem .85rem;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--paper);color:var(--ink-800);
  font-size:.98rem;min-height:46px;transition:border-color .15s,box-shadow .15s;
}
.field input:focus{outline:none;border-color:var(--accent-500);box-shadow:0 0 0 3px var(--accent-100)}
.field input:focus-visible{outline:2px solid var(--accent-600);outline-offset:2px}
.field__hint{font-size:.8rem;color:var(--ink-400);line-height:1.5;margin:0}
.field--row{grid-auto-flow:column;justify-content:space-between;align-items:center;gap:.8rem}
.field--row a{font-size:.86rem}
.check{display:inline-flex;align-items:center;gap:.45rem;font-size:.88rem;font-weight:450;color:var(--ink-500);cursor:pointer}
.check input{width:16px;height:16px;accent-color:var(--accent-600)}
.btn--block{width:100%}

/* "or" rule between the social buttons and the password form */
.authSplit{display:flex;align-items:center;gap:.8rem;margin:1.5rem 0 1.15rem;color:var(--ink-400);font-size:.8rem}
.authSplit::before,.authSplit::after{content:"";flex:1;height:1px;background:var(--line)}

.authAlt{margin-top:1.1rem;font-size:.9rem;color:var(--ink-500);text-align:center}
.authNote--ok{border-color:#A9D5C9;background:#EEF7F4;color:#215F53}
.authNote--err{border-color:#E8C79A;background:#FDF1E3;color:#8A5A16;display:grid;gap:.3rem}
.field__hint code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;background:var(--paper-100);padding:.08em .32em;border-radius:5px;color:var(--ink-700)}

/* ---------- tenant branding ----------
   Defaults to our navy; a tenant overrides --brand-primary in one inline style. */
:root{--brand-primary:#0B2440;--brand-on-primary:#FFFFFF}
.btn--primary{background:var(--brand-primary);color:var(--brand-on-primary)}
.btn--primary:hover{background:var(--brand-primary);filter:brightness(1.14)}
.hero{background:var(--brand-primary)}
.appLogo img{max-width:190px;object-fit:contain}
.brandPreview{
  display:flex;align-items:center;gap:1rem;padding:1rem;border:1px solid var(--line);
  border-radius:var(--r-md);background:var(--paper-50);margin-bottom:1.4rem;
}
.brandPreview__swatch{width:52px;height:52px;border-radius:12px;border:1px solid rgba(0,0,0,.12);flex:0 0 auto}
.brandPreview__logo{max-height:44px;width:auto}
.brandBadge{
  font-size:.7rem;font-weight:660;letter-spacing:.06em;text-transform:uppercase;
  padding:.24rem .6rem;border-radius:999px;background:var(--accent-100);color:var(--accent-600);
}

/* ---------- audit log ---------- */
.auditBar{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;margin:1.6rem 0 1rem}
.auditBar__groups{display:flex;flex-wrap:wrap;gap:.4rem}
.auditBar__search{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.auditBar__search input{padding:.5rem .7rem;border-radius:var(--r-sm);border:1px solid var(--line);min-height:38px;min-width:210px}
.rmPill{font-size:.86rem;font-weight:560;padding:.4rem .82rem;border-radius:999px;border:1px solid var(--line);
  background:var(--paper);color:var(--ink-500);text-decoration:none;display:inline-flex;align-items:center}
.rmPill:hover{border-color:var(--accent-500);color:var(--accent-600)}
.rmPill.is-on{background:var(--ink-900);border-color:var(--ink-900);color:#fff}
.auditTable{border-collapse:collapse;width:100%;font-size:.88rem}
.auditTable th{text-align:left;font-weight:660;color:var(--ink-900);padding:.65rem .8rem;
  border-bottom:1px solid var(--line);background:var(--paper-100);white-space:nowrap}
.auditTable td{padding:.6rem .8rem;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink-700)}
.auditTable__when,.auditTable__ip{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ink-500)}
.auditTable__meta{color:var(--ink-400);font-size:.82rem;max-width:36ch;overflow-wrap:anywhere}
.auditEvent{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem;
  padding:.14rem .45rem;border-radius:6px;white-space:nowrap}
.auditEvent--ok{background:var(--accent-100);color:var(--accent-600)}
/* A failed sign-in must not look like a routine row. */
.auditEvent--warn{background:#FDF1E3;color:#8A5A16}

/* ---------- button colour must win over ancestor link rules ----------
   `.appNav a` and `.appFooter a` are (0,1,1); `.btn--primary` is only (0,1,0),
   so a button placed inside a nav or footer inherited the LINK colour and
   rendered dark text on a dark fill. Doubling the class to (0,2,0) beats any
   `<container> a` rule without resorting to !important. */
.btn.btn--primary{color:var(--brand-on-primary,#fff)}
.btn.btn--onDark{color:var(--ink-900)}
.btn.btn--ghost{color:var(--ink-800)}
.btn.btn--ghost:hover{color:var(--accent-600)}

/* ============================================================================
   APP SHELL: sidebar + top bar
   Deliberately quiet. The product's job is to show an institution its data, so
   the chrome should recede rather than compete with it.
   ========================================================================= */
.hasShell{background:var(--paper-50)}
.shell{display:grid;grid-template-columns:248px 1fr;min-height:100dvh}

.shellNav{
  background:var(--ink-900);color:var(--on-dark-dim);
  display:flex;flex-direction:column;padding:1.1rem .85rem;gap:1.4rem;
  position:sticky;top:0;height:100dvh;
}
.shellNav__brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;padding:.3rem .35rem}
.shellNav__logo{height:30px;width:auto;max-width:112px;object-fit:contain;flex:0 0 auto}
.shellNav__name{
  color:#fff;font-weight:660;font-size:.9rem;line-height:1.25;letter-spacing:-.012em;
  /* Long institution names are the norm, not the exception. Two lines, then
     ellipsis, so the sidebar header stays a fixed height. */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.shellNav__links{display:grid;gap:.15rem}
.shellNav__link{
  display:flex;align-items:center;gap:.65rem;padding:.6rem .7rem;border-radius:9px;
  color:var(--on-dark-dim);text-decoration:none;font-size:.92rem;font-weight:520;
  transition:background .14s,color .14s;
}
.shellNav__link:hover{background:rgba(255,255,255,.07);color:#fff}
.shellNav__link.is-active{background:rgba(255,255,255,.13);color:#fff;font-weight:600}
.shellNav__ico{display:inline-flex;flex:0 0 auto}
.shellNav__ico svg{width:17px;height:17px}
.shellNav__foot{margin-top:auto;display:grid;gap:.45rem;padding:.35rem;border-top:1px solid rgba(255,255,255,.12);padding-top:.9rem}
.shellNav__foot a{color:var(--on-dark-dim);font-size:.82rem;text-decoration:none}
.shellNav__foot a:hover{color:var(--accent-400);text-decoration:underline;text-underline-offset:3px}

.shellMain{display:flex;flex-direction:column;min-width:0}
.shellBar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem clamp(1rem,3vw,2rem);background:var(--paper);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;
}
.shellBar__title{font-size:1.12rem;letter-spacing:-.015em;color:var(--ink-900);margin:0}
.shellBody{padding:clamp(1.2rem,3vw,2rem);flex:1}
.shellBody > .authNote{margin-bottom:1.2rem}

/* ---------- account menu ---------- */
.userMenu{position:relative}
.userMenu__trigger{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:.55rem;
  padding:.35rem .6rem .35rem .35rem;border-radius:999px;border:1px solid var(--line);
  background:var(--paper);transition:border-color .15s,background .15s;
}
.userMenu__trigger::-webkit-details-marker{display:none}
.userMenu__trigger:hover{border-color:var(--accent-400);background:var(--paper-50)}
.userMenu__trigger:focus-visible{outline:2px solid var(--accent-600);outline-offset:2px}
.avatar{
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  background:var(--brand-primary,var(--ink-900));color:var(--brand-on-primary,#fff);
  font-size:.74rem;font-weight:700;letter-spacing:.02em;
}
.userMenu__name{font-size:.88rem;font-weight:560;color:var(--ink-700);max-width:16ch;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.userMenu__chev{color:var(--ink-400);transition:transform .18s}
.userMenu[open] .userMenu__chev{transform:rotate(180deg)}
.userMenu__panel{
  position:absolute;right:0;top:calc(100% + .5rem);min-width:236px;z-index:40;
  background:var(--paper);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow-lg);padding:.45rem;display:grid;gap:.1rem;
}
.userMenu__who{display:grid;gap:.2rem;padding:.6rem .65rem .7rem;border-bottom:1px solid var(--line);margin:0 0 .3rem}
.userMenu__who strong{color:var(--ink-900);font-size:.92rem}
.userMenu__who span{color:var(--ink-400);font-size:.82rem;overflow-wrap:anywhere}
.userMenu__who .brandBadge{justify-self:start;margin-top:.25rem}
.userMenu__panel a,.userMenu__signout{
  display:block;width:100%;text-align:left;padding:.55rem .65rem;border-radius:8px;
  font-size:.9rem;color:var(--ink-700);text-decoration:none;background:none;border:0;cursor:pointer;
}
.userMenu__panel a:hover,.userMenu__signout:hover{background:var(--paper-100);color:var(--ink-900)}
.userMenu__signout{color:#8A2B2B}

@media (max-width:860px){
  .shell{grid-template-columns:1fr}
  .shellNav{position:static;height:auto;flex-direction:row;align-items:center;flex-wrap:wrap;gap:.7rem}
  .shellNav__links{grid-auto-flow:column;gap:.2rem;overflow-x:auto;margin-left:auto}
  .shellNav__link{padding:.5rem .6rem;font-size:.86rem}
  .shellNav__foot{display:none}
  .userMenu__name{display:none}
}

/* ---------- student assessment ----------
   Bigger targets and more space than the admin UI: this is answered once, often
   on a phone, sometimes by someone in a hurry between classes. */
.assessBar{background:var(--paper);border-bottom:1px solid var(--line);padding-block:.9rem}
.assessBar__in{display:flex;align-items:center;gap:.7rem}
.assessBar__logo{height:30px;width:auto;max-width:120px;object-fit:contain}
.assessBar__name{font-weight:660;color:var(--ink-800);font-size:.98rem}

.progress{height:6px;border-radius:999px;background:var(--paper-100);overflow:hidden;margin:1.4rem 0 1.8rem}
.progress__bar{display:block;height:100%;background:var(--brand-primary);border-radius:999px;transition:width .3s}

.assessForm{display:grid;gap:1.5rem}
.qItem{border:0;padding:0;margin:0}
.qItem__q{font-size:1.05rem;font-weight:600;color:var(--ink-900);line-height:1.45;padding:0;margin-bottom:.75rem}
.scale{display:grid;grid-template-columns:repeat(6,1fr);gap:.4rem}
.scale__opt{
  display:flex;flex-direction:column;align-items:center;gap:.25rem;cursor:pointer;
  padding:.7rem .35rem;border:1px solid var(--line);border-radius:11px;background:var(--paper);
  text-align:center;transition:border-color .14s,background .14s,box-shadow .14s;min-height:74px;
  justify-content:center;
}
.scale__opt:hover{border-color:var(--accent-400);background:var(--paper-50)}
.scale__opt input{position:absolute;opacity:0;width:1px;height:1px}
.scale__opt:has(input:checked){
  border-color:var(--brand-primary);background:var(--brand-primary);box-shadow:var(--shadow-md);
}
.scale__opt:has(input:checked) .scale__n,
.scale__opt:has(input:checked) .scale__lbl{color:var(--brand-on-primary)}
/* Keyboard users must see focus even though the radio itself is visually hidden. */
.scale__opt:has(input:focus-visible){outline:2px solid var(--accent-600);outline-offset:2px}
.scale__n{font-size:1.02rem;font-weight:700;color:var(--ink-900);line-height:1}
.scale__lbl{font-size:.7rem;color:var(--ink-400);line-height:1.2}
.scale__opt--na{border-style:dashed}

.assessNav{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;margin-top:.6rem}

@media (max-width:620px){
  .scale{grid-template-columns:repeat(3,1fr)}
  .qItem__q{font-size:1rem}
}

/* ---------- student report ---------- */
.rpTop{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:1.6rem}
.rpScore{
  display:grid;gap:.15rem;padding:1.2rem 1.3rem;border-radius:var(--r-md);
  border:1px solid var(--line);background:var(--paper);box-shadow:var(--shadow-sm);
}
.rpScore--rater{background:var(--paper-50)}
.rpScore__lbl{font-size:.78rem;font-weight:660;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-400)}
.rpScore__n{font-size:2.6rem;font-weight:700;line-height:1.05;color:var(--brand-primary);letter-spacing:-.03em}
.rpScore__of{font-size:.84rem;color:var(--ink-400)}

.rpBars{display:grid;gap:1.15rem}
.rpBar{padding:.9rem 1rem;border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper)}
.rpBar__head{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;margin-bottom:.6rem}
.rpBar__name{font-weight:640;color:var(--ink-900);font-size:.98rem}
.rpBar__gap{font-size:.8rem;font-weight:700;padding:.15rem .45rem;border-radius:999px}
/* A gap is information, not a verdict, so neither direction is coloured as failure. */
.rpBar__gap--up{background:#EAF4EF;color:#215F53}
.rpBar__gap--down{background:#FDF1E3;color:#8A5A16}
.rpBar__gap--even{background:var(--paper-100);color:var(--ink-400)}
.rpBar__row{display:grid;grid-template-columns:3.6rem 1fr 2.2rem;align-items:center;gap:.6rem;margin-top:.35rem}
.rpBar__key{font-size:.78rem;color:var(--ink-400)}
.rpBar__track{height:9px;border-radius:999px;background:var(--paper-100);overflow:hidden}
.rpBar__fill{display:block;height:100%;border-radius:999px;background:var(--brand-primary)}
.rpBar__fill--rater{background:var(--accent-400)}
.rpBar__val{font-size:.86rem;font-weight:660;color:var(--ink-800);text-align:right;font-variant-numeric:tabular-nums}

@media print{
  .assessBar,.assessNav,.btn{display:none !important}
  body{background:#fff}
  .rpBar,.card,.rpScore{break-inside:avoid;box-shadow:none;border:1px solid #bbb}
  .rpScore__n{color:#0B2440}
  .rpBar__fill{background:#0B2440 !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .rpBar__fill--rater{background:#79B8D9 !important}
  .rpBar__track{background:#eee !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ---------- AI narrative ---------- */
.rpNarrative{border-left:3px solid var(--accent-400)}
.rpNarrative__head{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-bottom:.6rem}
.rpNarrative__body p{color:var(--ink-700);line-height:1.72;margin:0 0 .85rem;font-size:.98rem}
.rpNarrative__body p:last-child{margin-bottom:0}

/* ---------- SSO settings ---------- */
.ssoFacts{display:grid;grid-template-columns:minmax(180px,auto) 1fr;gap:.55rem 1.2rem;margin:0;font-size:.9rem}
.ssoFacts dt{font-weight:600;color:var(--ink-900)}
.ssoFacts dd{margin:0;color:var(--ink-500);min-width:0}
.ssoFacts code{font-size:.82rem;word-break:break-all;background:var(--paper-100);padding:.15rem .35rem;border-radius:4px}
.ssoGroup{border:1px solid var(--line);border-radius:12px;padding:1.1rem 1.2rem 1.3rem;margin:.4rem 0 0}
.ssoGroup legend{font-family:var(--font-mono,monospace);font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-400);padding:0 .45rem}
@media (max-width:620px){.ssoFacts{grid-template-columns:1fr;gap:.2rem .6rem}.ssoFacts dt{margin-top:.6rem}}
.ssoBtn{text-align:center;text-decoration:none}

/* ---------- Beta ---------- */
.betaTag{
  display:inline-block;margin-left:.4rem;padding:.08rem .38rem;
  font-family:var(--font-mono,ui-monospace,monospace);font-size:.58rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;vertical-align:middle;white-space:nowrap;
  color:var(--accent-600);background:var(--accent-100);
  border:1px solid rgba(46,95,138,.25);border-radius:999px;
}

/* ---------- In-product guidance ---------- */
.help{
  border:1px solid var(--line);border-radius:12px;background:var(--paper-50);
  margin:1.1rem 0 1.4rem;overflow:hidden;
}
.help__summary{
  cursor:pointer;list-style:none;padding:.72rem .9rem;font-size:.88rem;font-weight:600;
  color:var(--ink-700);display:flex;align-items:center;gap:.55rem;
}
.help__summary::-webkit-details-marker{display:none}
.help__summary:hover{background:var(--paper-100)}
.help__summary:focus-visible{outline:2px solid var(--accent-600);outline-offset:-2px}
.help__icon{
  flex:none;width:18px;height:18px;border-radius:50%;background:var(--accent-100);
  color:var(--accent-600);font-size:.72rem;font-weight:700;display:grid;place-items:center;
}
.help__summary::after{
  content:"";margin-left:auto;width:8px;height:8px;flex:none;
  border-right:2px solid var(--ink-400);border-bottom:2px solid var(--ink-400);
  transform:rotate(45deg) translateY(-2px);transition:transform .15s;
}
.help[open] .help__summary::after{transform:rotate(-135deg) translateY(-2px)}
.help__body{padding:0 .9rem .95rem;font-size:.88rem;line-height:1.68;color:var(--ink-500)}
.help__body > p:first-child{margin-top:0}
.help__steps{margin:.5rem 0 .2rem;padding-left:1.15rem}
.help__steps li{margin-bottom:.45rem}
.help__note{margin:.7rem 0 0}
.help__note strong{color:var(--ink-900)}
.help code{background:var(--paper-100);padding:.1rem .3rem;border-radius:4px;font-size:.82rem}

/* ---------- Destructive actions ----------
   #C86A5A read as the obvious "danger" red but gives white text only 3.71:1,
   below the 4.5:1 minimum, and axe caught it on the delete-institution button.
   #A33B2A is 6.53:1 with white and still unmistakably a warning colour.
   A token rather than another inline hex, so the next destructive button
   inherits a compliant colour instead of repeating the mistake. */
:root{ --danger-600:#A33B2A; --danger-200:#E8C0B6; }
.btn.btn--danger{background:var(--danger-600);border-color:var(--danger-600);color:#fff}
.btn.btn--danger:hover{background:#8C3123;border-color:#8C3123}
.card--danger{border-color:var(--danger-200)}

/* Shown only when somebody is genuinely stuck, so it earns the emphasis. */
.nextStep{border-left:3px solid var(--accent-400);background:var(--accent-100);margin-bottom:1.4rem}
.nextStep .card__title{margin-top:0}

/* ---------- Social sign-in buttons ----------
   The package defaults to a 2-column grid, which leaves the third provider
   orphaned on its own row. One column, mark on the left, label beside it: the
   conventional shape, and it scans as a list of choices rather than a grid with
   a gap in it. Buttons are also tightened, since three full-height blocks of
   centred text dominated the form they belong to. */
.ce-oauth .ce-oauth__grid{grid-template-columns:1fr !important;gap:.5rem}
.ce-oauth .ce-oauth__btn{
  justify-content:flex-start !important;gap:.7rem;padding:.62rem .9rem;min-height:44px;
  font-size:.92rem;font-weight:550;
}
.ce-oauth .ce-oauth__btn svg{width:19px;height:19px;flex:none}

/* ---------- Setup checklist ----------
   The sequence stated on the first screen, with the institution's real position
   in it. Added after somebody added a student and waited for an email that was
   never coming: nothing was broken, but the next three steps were invisible
   unless you already knew the model. */
.setup{border-left:3px solid var(--accent-400);margin-bottom:1.5rem}
.setup--done{border-left-color:var(--ok-500,#3E8E5A)}
.setup__list{list-style:none;margin:1rem 0 0;padding:0;counter-reset:setup}
.setup__item{
  display:flex;align-items:flex-start;gap:.75rem;padding:.7rem 0;
  border-top:1px solid var(--line);counter-increment:setup;
}
.setup__item:first-child{border-top:0}
.setup__mark{
  flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font-size:.72rem;font-weight:700;margin-top:.1rem;
  border:1px solid var(--line);background:var(--paper);color:var(--ink-400);
}
.setup__mark::before{content:counter(setup)}
.is-done .setup__mark{background:var(--accent-600);border-color:var(--accent-600);color:#fff}
.is-done .setup__mark::before{content:none}
.setup__body{display:flex;flex-direction:column;gap:.15rem;min-width:0;flex:1}
.setup__label{font-weight:600;color:var(--ink-900);font-size:.93rem}
.is-done .setup__label{color:var(--ink-500)}
.setup__detail{font-size:.84rem;color:var(--ink-400);line-height:1.55}
.setup__cta{flex:none;align-self:center}
@media (max-width:620px){
  .setup__item{flex-wrap:wrap}
  .setup__cta{margin-left:calc(22px + .75rem)}
}

/* ---------- Demo banner ----------
   Non-dismissible: somebody arriving from a link needs to know this is not
   their institution's data before they read a number off it. */
.demoBar{background:var(--ink-900);color:#fff;position:relative;z-index:60}
.demoBar__in{
  max-width:1180px;margin:0 auto;padding:.6rem 1.1rem;
  display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;
}
.demoBar__tag{
  flex:none;font-family:var(--font-mono,ui-monospace,monospace);font-size:.62rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;padding:.18rem .45rem;border-radius:999px;
  background:var(--brass-lit,#E4C27C);color:var(--ink-900);
}
.demoBar__txt{margin:0;font-size:.84rem;line-height:1.5;color:rgba(255,255,255,.88);flex:1;min-width:220px}
.demoBar__txt strong{color:#fff}
.demoBar__acts{display:flex;gap:.5rem;align-items:center;flex:none}

/* The tour: move between staff, student, report and 360 without going back to
   a marketing page to find the links. */
.demoBar__tour{display:flex;gap:.15rem;flex:none;flex-wrap:wrap}
.demoBar__tour a{
  color:rgba(255,255,255,.72);text-decoration:none;font-size:.78rem;font-weight:500;
  padding:.28rem .55rem;border-radius:999px;white-space:nowrap;
}
.demoBar__tour a:hover{color:#fff;background:rgba(255,255,255,.10)}
.demoBar__tour a:focus-visible{outline:2px solid var(--brass-lit,#E4C27C);outline-offset:1px}
.demoBar__tour a.is-here{color:var(--ink-900);background:var(--brass-lit,#E4C27C);font-weight:650}

@media (max-width:900px){
  .demoBar__txt{min-width:100%}
  .demoBar__tour{order:3}
}
@media (max-width:700px){.demoBar__acts{width:100%;justify-content:flex-start}}

/* ---------- Setup wizard ---------- */
.wiz__rail{
  list-style:none;display:flex;gap:.4rem;margin:0 0 1.3rem;padding:0;flex-wrap:wrap;
  counter-reset:wiz;
}
.wiz__railItem{
  display:flex;align-items:center;gap:.45rem;padding:.4rem .8rem .4rem .5rem;
  border:1px solid var(--line);border-radius:999px;background:var(--paper);
  font-size:.84rem;color:var(--ink-400);
}
.wiz__railNum{
  width:20px;height:20px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-size:.7rem;font-weight:700;background:var(--paper-100);color:var(--ink-400);
}
.wiz__railItem.is-here{border-color:var(--accent-400);background:var(--accent-100);color:var(--ink-900);font-weight:600}
.wiz__railItem.is-here .wiz__railNum{background:var(--accent-600);color:#fff}
.wiz__railItem.is-done{color:var(--ink-500)}
.wiz__railItem.is-done .wiz__railNum{background:var(--accent-600);color:#fff}
.wiz__acts{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-top:.4rem}

/* ---------- Platform attribution on student-facing pages ----------
   A subdomain nobody has seen before, branded entirely as a college, asking a
   stranger to answer questions, is indistinguishable from an imitation of that
   college. Naming the platform is honest and it is what a person (or a
   classifier) needs to tell the difference. */
.assessBar__by{font-size:.78rem;color:var(--ink-400);margin-left:.15rem;white-space:nowrap}
.assessFoot{
  border-top:1px solid var(--line);margin-top:3rem;padding:1.5rem 0 2.5rem;
  font-size:.82rem;line-height:1.65;color:var(--ink-400);
}
.assessFoot p{margin:0 0 .5rem;max-width:66ch}
.assessFoot a{color:var(--accent-600)}
@media (max-width:560px){.assessBar__by{display:none}}