/* Ported verbatim from the approved MVP prototype under docs/.
   Visual design is client-approved — change it only with a design decision
   behind it, not incidentally. Brand strings never appear here; the display
   name is injected at runtime from the single config source. */
:root{
  --paper:#F6F3EC; --paper-2:#FBF9F4; --card:#FFFFFF;
  --ink:#241B2E; --ink-2:#5A5266; --ink-3:#8A8398;
  --plum:#5B3FA6; --plum-deep:#3B2A6E; --plum-soft:#ECE6F7; --plum-mid:#CFC3EC;
  --gold:#AD7F27; --gold-soft:#F0E4C8;
  --sage:#5E7A6B;
  --line:#E7E1F0; --line-2:#EEE9E0;
  --ok:#2C7A52; --warn:#9A6B00;
  --r:14px; --r-sm:9px;
  --shadow:0 1px 2px rgba(36,27,46,.05), 0 8px 24px rgba(36,27,46,.06);
  --shadow-sm:0 1px 2px rgba(36,27,46,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper); color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
.display{font-family:"Fraunces","Georgia",serif;}
.mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;}
.eyebrow{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);}
a{color:var(--plum)}
button{font-family:inherit}
:focus-visible{outline:2.5px solid var(--plum); outline-offset:2px; border-radius:6px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- Top bar ---------- */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:14px 26px;background:rgba(246,243,236,.86);backdrop-filter:blur(8px);border-bottom:1px solid var(--line-2)}
.brand{display:flex;align-items:baseline;gap:10px}
.brand .word{font-family:"Fraunces",serif;font-weight:600;font-size:22px;color:var(--plum-deep);letter-spacing:.01em}
.brand .tag{font-size:12px;font-style:italic;color:var(--ink-3)}
.nav-right{display:flex;align-items:center;gap:14px}
.whoami{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2}
.whoami .nm{font-weight:600;font-size:13px}
.whoami .rl{font-size:11px;color:var(--ink-3);font-family:"IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.08em}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--plum-soft);color:var(--plum-deep);display:grid;place-items:center;font-weight:600;font-size:13px}

/* ---------- Layout ---------- */
.wrap{max-width:980px;margin:0 auto;padding:30px 26px 80px}
.wrap.narrow{max-width:720px}
.pagehead{margin:6px 0 22px}
.pagehead h1{font-family:"Fraunces",serif;font-weight:600;font-size:30px;margin:6px 0 4px;letter-spacing:-.01em}
.pagehead p{margin:0;color:var(--ink-2)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:var(--r-sm);
  padding:11px 18px;font-size:14px;font-weight:600;cursor:pointer;transition:transform .08s ease, background .15s ease, box-shadow .15s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--plum);color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--plum-deep)}
.btn-ghost{background:transparent;color:var(--plum);border:1.5px solid var(--plum-mid)}
.btn-ghost:hover{background:var(--plum-soft)}
.btn-quiet{background:var(--plum-soft);color:var(--plum-deep)}
.btn-quiet:hover{background:var(--plum-mid)}
.btn-sm{padding:7px 12px;font-size:12.5px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn-block{width:100%}

/* ---------- Cards ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--shadow-sm)}
.card + .card{margin-top:16px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:1fr 1fr 1fr}
@media(max-width:720px){.g2,.g3{grid-template-columns:1fr}}

/* ---------- Pills ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 11px;border-radius:99px;font-size:12px;font-weight:600}
.pill-mand{background:var(--plum);color:#fff}
.pill-opt{background:transparent;color:var(--ink-2);border:1px solid var(--line)}
.pill-done{background:#E3F0E8;color:var(--ok)}
.pill-todo{background:var(--gold-soft);color:var(--warn)}
.badge{display:inline-flex;align-items:center;gap:7px;padding:5px 13px;border-radius:99px;font-weight:600;font-size:13px}
.badge-primary{background:var(--plum);color:#fff}
.badge-secondary{background:#fff;color:var(--plum-deep);border:1.5px solid var(--plum-mid)}

/* ---------- Forms ---------- */
label.field{display:block;margin-bottom:14px}
label.field .lab{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.input,select.input{width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:var(--r-sm);
  background:var(--paper-2);font-size:14px;color:var(--ink);font-family:inherit}
.input:focus{border-color:var(--plum-mid);background:#fff}
.hint{font-size:12px;color:var(--ink-3);margin-top:6px}
.checks{display:flex;flex-wrap:wrap;gap:8px}
.checks label{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border:1.5px solid var(--line);border-radius:99px;font-size:13px;cursor:pointer;background:var(--paper-2)}
.checks label:has(input:checked){border-color:var(--plum);background:var(--plum-soft);color:var(--plum-deep);font-weight:600}

/* ---------- Auth ---------- */
.auth-wrap{min-height:calc(100vh - 62px);display:grid;place-items:center;padding:30px}
.auth-card{width:100%;max-width:430px}
.auth-card .lede{color:var(--ink-2);margin:2px 0 20px}
.auth-tabs{display:flex;gap:6px;margin-bottom:18px;background:var(--plum-soft);padding:4px;border-radius:10px}
.auth-tabs button{flex:1;border:none;background:transparent;padding:8px;border-radius:7px;font-weight:600;font-size:13px;color:var(--plum-deep);cursor:pointer}
.auth-tabs button.on{background:#fff;box-shadow:var(--shadow-sm)}
.demo-row{display:flex;gap:8px;margin-top:14px}
.demo-row .btn{flex:1}
.divider{display:flex;align-items:center;gap:12px;color:var(--ink-3);font-size:12px;margin:18px 0}
.divider::before,.divider::after{content:"";height:1px;background:var(--line);flex:1}

/* ---------- Assessment ---------- */
.assess-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.progress{height:6px;background:var(--plum-soft);border-radius:99px;overflow:hidden;margin:10px 0 26px}
.progress > i{display:block;height:100%;background:linear-gradient(90deg,var(--plum),var(--gold));border-radius:99px;transition:width .3s ease}
.qcat{font-family:"Fraunces",serif;font-size:24px;font-weight:600;margin:0 0 2px}
.statement{padding:20px 0;border-top:1px solid var(--line-2)}
.statement:first-of-type{border-top:none}
.statement .txt{font-size:16px;margin-bottom:12px}
.likert{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.likert button{border:1.5px solid var(--line);background:var(--paper-2);border-radius:9px;padding:12px 4px;cursor:pointer;
  font-weight:600;color:var(--ink-2);transition:all .12s}
.likert button:hover{border-color:var(--plum-mid)}
.likert button.sel{background:var(--plum);border-color:var(--plum);color:#fff;transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.likert-ends{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-3);margin-top:6px}
.assess-nav{display:flex;justify-content:space-between;margin-top:28px}

/* ---------- Profile ---------- */
.profile-hero{background:linear-gradient(160deg,#2C2140,#3B2A6E);color:#F5F1FB;border-radius:20px;padding:30px 28px;position:relative;overflow:hidden}
.profile-hero .eyebrow{color:#C9BEE6}
.profile-hero h1{font-family:"Fraunces",serif;font-weight:600;font-size:26px;margin:8px 0 14px;color:#fff}
.hero-badges{display:flex;gap:10px;flex-wrap:wrap}
.hero-badges .badge-primary{background:var(--gold);color:#2A2005}
.hero-badges .badge-secondary{background:transparent;color:#EFE9FB;border-color:#6B5AA0}
.compass-card{display:grid;grid-template-columns:320px 1fr;gap:24px;align-items:center}
@media(max-width:720px){.compass-card{grid-template-columns:1fr}}
.fitrow{display:flex;align-items:center;gap:10px;margin:7px 0}
.fitrow .nm{width:150px;font-size:13px;font-weight:600;display:flex;align-items:center;gap:7px}
.fittrack{flex:1;height:8px;background:var(--plum-soft);border-radius:99px;overflow:hidden}
.fittrack > i{display:block;height:100%;background:var(--plum);border-radius:99px}
.fitrow.pri .fittrack > i{background:var(--gold)}
.fitrow .pct{width:38px;text-align:right;font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink-2)}
.section-h{font-family:"Fraunces",serif;font-size:20px;font-weight:600;margin:30px 0 12px;display:flex;align-items:center;gap:10px}
.section-h::before{content:"";width:22px;height:2px;background:var(--gold)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:600px){.two{grid-template-columns:1fr}}
.mini{border:1px solid var(--line);border-radius:12px;padding:15px}
.mini .k{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-family:"IBM Plex Mono",monospace;margin-bottom:5px}
.mini .v{font-size:15px;font-weight:600;color:var(--plum-deep)}
.mini .d{font-size:13px;color:var(--ink-2);margin-top:3px}
.leadbox{background:var(--plum-soft);border:1px solid var(--plum-mid);border-radius:12px;padding:16px 18px}
.tag-list{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
.tag-list span{background:#fff;border:1px solid var(--line);border-radius:99px;padding:4px 11px;font-size:12.5px}
.band{display:inline-block;padding:2px 10px;border-radius:99px;font-size:12px;font-weight:700;font-family:"IBM Plex Mono",monospace}
.band.Strong{background:#E3F0E8;color:var(--ok)} .band.Developing{background:var(--gold-soft);color:var(--warn)} .band.Emerging{background:var(--plum-soft);color:var(--plum-deep)}
.notebox{border-left:3px solid var(--gold);background:var(--paper-2);padding:12px 16px;border-radius:0 10px 10px 0;font-size:14px;color:var(--ink-2)}

/* ---------- Tables / roster ---------- */
table.tbl{width:100%;border-collapse:collapse}
table.tbl th{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);font-family:"IBM Plex Mono",monospace;font-weight:600}
table.tbl td{padding:12px;border-bottom:1px solid var(--line-2);font-size:14px;vertical-align:middle}
table.tbl tr:hover td{background:var(--paper-2)}
.person{display:flex;align-items:center;gap:10px}
.person .avatar{width:30px;height:30px;font-size:12px}

/* course list */
.course{display:flex;align-items:center;gap:14px;padding:14px 0;border-top:1px solid var(--line-2)}
.course:first-child{border-top:none}
.course .ic{width:38px;height:38px;border-radius:10px;background:var(--plum-soft);color:var(--plum-deep);display:grid;place-items:center;flex:none}
.course .meta{flex:1}
.course .meta .t{font-weight:600}
.course .meta .s{font-size:12.5px;color:var(--ink-3)}
.seg{display:inline-flex;border:1.5px solid var(--line);border-radius:8px;overflow:hidden}
.seg button{border:none;background:#fff;padding:6px 12px;font-size:12.5px;font-weight:600;color:var(--ink-3);cursor:pointer}
.seg button.on{background:var(--plum);color:#fff}

/* empty + toast + modal */
.empty{text-align:center;padding:46px 20px;color:var(--ink-3)}
.empty .big{font-family:"Fraunces",serif;font-size:20px;color:var(--ink-2);margin-bottom:6px}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;
  padding:11px 18px;border-radius:10px;font-size:13.5px;opacity:0;pointer-events:none;transition:all .25s;z-index:60}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.modal-bg{position:fixed;inset:0;background:rgba(36,27,46,.5);display:grid;place-items:center;z-index:50;padding:20px}
.modal{background:#fff;border-radius:16px;max-width:520px;width:100%;padding:26px;box-shadow:var(--shadow)}
.modal h3{font-family:"Fraunces",serif;font-size:20px;margin:0 0 6px}
.modal .body{color:var(--ink-2);font-size:14px}
.back-link{background:none;border:none;color:var(--plum);font-weight:600;cursor:pointer;padding:0;font-size:13px;margin-bottom:14px;display:inline-flex;gap:6px;align-items:center}
.note-scope{font-size:12px;color:var(--ink-3);font-style:italic;margin-top:8px}

/* ---------------------------------------------------------------------------
   Additions beyond the prototype.
   The prototype surfaced all errors through a transient toast, but US-1.1
   requires field-level errors on registration, and FR-24's course toggle needs
   a saving state. Everything below uses the existing design tokens so it stays
   in the approved visual language.
   --------------------------------------------------------------------------- */
.field-error{display:block;font-size:12px;color:#A3352B;margin-top:5px;font-weight:600}
.field:has(.field-error) .input{border-color:#D9A29C;background:#FDF6F5}
.notebox.error{border-left-color:#A3352B;background:#FDF6F5;color:#7A2A22}
.form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.seg button[disabled]{opacity:.55;cursor:progress}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.band-note{font-weight:400;color:var(--ink-3);font-size:12px;margin-left:6px}
.muted{color:var(--ink-3);font-size:13px}
.pathgroup{margin-top:12px}
.pathgroup .k{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:4px}
.pathgroup .pathvals{font-size:13.5px;color:var(--ink-2)}
.two.spaced{margin-top:14px}
.course .seg{flex:none}

/* Auth screen details carried over from the prototype, where they were inline
   styles on the elements themselves. */
.auth-title{font-size:28px;margin:6px 0 2px}
.auth-note{margin-top:12px}
.name-row{gap:0 12px}
.demo-row .btn[disabled]{opacity:.5}
.spacer{height:16px}
.table-card{padding:6px 10px}
.cell-quiet{font-size:13px;color:var(--ink-2)}
.cell-right{text-align:right}
.badge-row{display:flex;align-items:center;gap:12px;margin:10px 0 4px;flex-wrap:wrap}
.card-lede{color:var(--ink-2);margin:12px 0 16px}
.card-note{color:var(--ink-3);font-size:13px;margin:6px 0 8px}
.invite-card{text-align:center;padding:34px}
.invite-title{font-size:22px;margin-bottom:6px}
.invite-body{color:var(--ink-2);max-width:440px;margin:0 auto 18px}
.program-pill{margin:2px 3px 2px 0}
.program-checks{margin:6px 0 16px}
.centered{text-align:center}
.spaced-top{margin-top:16px}
.spaced-top-sm{margin-top:14px}
.spaced-top-xs{margin-top:12px}
.spaced-top-lg{margin-top:22px}
.spaced-eyebrow{margin-bottom:8px}
.spaced-note{margin-top:14px}
.compass-svg{justify-self:center;max-width:100%}
/* The compass now carries a 40px gutter each side so its axis labels are not
   clipped (see compass.js), which makes the drawing 400px wide rather than 320.
   Widening the column here keeps the ring itself exactly the size the mockup
   drew it; the rule above at line 129 is prototype CSS and stays verbatim. */
.compass-card{grid-template-columns:400px 1fr}
/* Scale down instead of spilling out of the card on narrow screens. */
.compass-svg svg{display:block;width:100%;max-width:400px;height:auto}
.prose-d{font-size:14px}
.path-k{font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.1em}
.path-v{font-size:13.5px;color:var(--ink-2)}

/* ---------------------------------------------------------------------------
   The approved SAMPLE REPORT's layout (the sample report under docs/), which
   the client confirmed on 2026-07-29 governs the profile screen. Class names,
   structure and spacing relationships are its own.

   ONE DELIBERATE DEPARTURE, AND IT NEEDS A CLIENT ANSWER: the report is
   dark-themed (deep indigo page, dark cards, light text). Every other screen in
   this app is the prototype's light paper. Rendering one screen dark and the
   rest light is a design decision, not a porting detail, so the report's
   STRUCTURE is reproduced here against the app's existing light palette. Its
   colour roles are preserved — gold for the primary and for "watch" markers,
   sage for the secondary and for "good" markers — so switching to the report's
   own palette later is a variable change, not a rewrite.
   --------------------------------------------------------------------------- */
.report-masthead{text-align:center;margin-bottom:8px}
.report-masthead .eyebrow{margin-bottom:14px;color:var(--gold)}
h1.report-title{font-weight:600;font-size:44px;line-height:1.08;margin:0 0 10px;letter-spacing:-.01em}
.report-subtitle{color:var(--ink-2);font-size:16px;margin:0 0 6px}
.meta-row{display:flex;justify-content:center;gap:28px;flex-wrap:wrap;
  font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink-3);
  margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.meta-row span b{color:var(--ink-2);font-weight:400}

.compass-section{margin:56px 0 8px;display:grid;grid-template-columns:1fr;gap:32px;align-items:center}
@media(min-width:760px){.compass-section{grid-template-columns:400px 1fr}}
.compass-fig{display:flex;justify-content:center}
.compass-fig svg{width:100%;max-width:420px;height:auto}
.axis-label{font-family:"IBM Plex Mono",monospace;font-size:11px;fill:var(--ink-3)}
.axis-label.hi{fill:var(--plum-deep);font-weight:700}
.grid-ring{fill:none;stroke:var(--line);stroke-width:1}
.axis-line{stroke:var(--line-2);stroke-width:1}
.fit-poly{fill:rgba(173,127,39,.16);stroke:var(--gold);stroke-width:2;stroke-linejoin:round}
.node{stroke:var(--card);stroke-width:2}
.node.primary{fill:var(--gold)}
.node.secondary{fill:var(--sage)}
.node.other{fill:var(--plum-mid)}
.compass-side h2{font-family:"Fraunces","Georgia",serif;font-size:20px;margin:0 0 12px}
.fit-bars{margin-top:14px}
.fit-row{display:grid;grid-template-columns:92px 1fr 44px;align-items:center;gap:10px;margin-bottom:8px}
.fit-row .name{font-size:12.5px;color:var(--ink-2)}
.fit-row .name.hi{color:var(--ink);font-weight:600}
.fit-track{height:6px;border-radius:4px;background:var(--plum-soft);overflow:hidden}
.fit-fill{height:100%;border-radius:4px;background:var(--plum-mid)}
.fit-fill.is-primary{background:var(--gold)}
.fit-fill.is-secondary{background:var(--sage)}
.fit-row .pct{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--ink-3);text-align:right}
.tie-note{margin-top:18px;padding:12px 14px;border-left:3px solid var(--gold);
  background:rgba(173,127,39,.08);font-size:13.5px;color:var(--ink-2);border-radius:0 6px 6px 0}
.tie-note b{color:var(--ink)}

section.card{margin-top:22px}
section.card .eyebrow{margin-bottom:10px}
section.card h2{font-family:"Fraunces","Georgia",serif;font-size:24px;font-weight:600;margin:0 0 14px}
section.card p{color:var(--ink);margin:0 0 12px}
section.card p.lede{font-family:"Fraunces","Georgia",serif;font-size:17.5px;font-style:italic;color:var(--ink-2)}
.two-col{display:grid;grid-template-columns:1fr;gap:22px}
@media(min-width:600px){.two-col{grid-template-columns:1fr 1fr}}
.col h3,section.card h3{font-family:"IBM Plex Mono",monospace;font-size:11.5px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--ink-3);margin:0 0 10px}
ul.plain{list-style:none;margin:0;padding:0}
ul.plain li{position:relative;padding-left:20px;margin-bottom:9px;font-size:14.5px;color:var(--ink)}
ul.plain.good li::before{content:"✓";position:absolute;left:0;color:var(--sage);font-weight:700}
ul.plain.watch li::before{content:"!";position:absolute;left:2px;color:var(--gold);font-weight:700}
ul.plain.plain-dot li::before{content:"—";position:absolute;left:0;color:var(--ink-3)}
.pill-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.pill{font-size:13px;padding:6px 12px;border-radius:8px;background:var(--paper-2);
  border:1px solid var(--line);color:var(--ink-2)}
.strength-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:6px}
@media(max-width:520px){.strength-grid{grid-template-columns:1fr}}
.sbox{padding:16px;border-radius:10px}
.sbox.strength{background:rgba(94,122,107,.12);border:1px solid rgba(94,122,107,.35)}
.sbox.edge{background:var(--gold-soft);border:1px solid rgba(173,127,39,.35)}
.sbox .label{font-family:"IBM Plex Mono",monospace;font-size:11px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ink-3);margin-bottom:6px}
.sbox .val{font-family:"Fraunces","Georgia",serif;font-size:19px;font-weight:600}
.card.experiment{background:linear-gradient(135deg,rgba(173,127,39,.14),rgba(94,122,107,.10));
  border:1px solid rgba(173,127,39,.3)}
.card.experiment .lede{font-size:18px}
.report-footer{margin-top:40px;text-align:center;font-family:"IBM Plex Mono",monospace;
  font-size:11px;color:var(--ink-3);line-height:1.8}
.report-footer .reminder{font-family:"Fraunces","Georgia",serif;font-style:italic;font-size:15px;
  color:var(--ink-2);margin-bottom:18px}

@media (max-width:720px){
  .compass-card{grid-template-columns:1fr}
  .two,.g2,.g3{grid-template-columns:1fr}
  .likert{gap:4px}
  .course{flex-wrap:wrap}
  h1.report-title{font-size:32px}
  .meta-row{gap:14px}
  /* The roster (534px) and advisor list (694px) are wider than a phone, so
     without this the whole page scrolls sideways. Scroll the table inside its
     own card instead, and keep a floor under the columns so they don't crush
     into unreadable slivers. */
  .table-card{overflow-x:auto}
  .table-card table.tbl{min-width:520px}
}