/* Associated Consulting design system — shared across the platform.
   Lifted from Shaun's assessment-panel styles so the whole product reads as one app.
   Style Guide v2.0: navy leads, yellow is the single active accent, green for growth only,
   grey canvas, white as a first-class colour on navy. No gradients, drop-shadows or gloss. */

/* Self-hosted Montserrat (SIL OFL) — 400/500/600/700, so the brand never falls back.
   WOFF2 first (~97KB, near-instant on mobile) with a TTF fallback for old browsers. */
@font-face{font-family:"Montserrat";font-style:normal;font-weight:400;font-display:swap;
  src:url("/assets/fonts/Montserrat-Regular.woff2") format("woff2"),
      url("/assets/fonts/Montserrat-Regular.ttf") format("truetype")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:500;font-display:swap;
  src:url("/assets/fonts/Montserrat-Medium.woff2") format("woff2"),
      url("/assets/fonts/Montserrat-Medium.ttf") format("truetype")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:600;font-display:swap;
  src:url("/assets/fonts/Montserrat-SemiBold.woff2") format("woff2"),
      url("/assets/fonts/Montserrat-SemiBold.ttf") format("truetype")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:700;font-display:swap;
  src:url("/assets/fonts/Montserrat-Bold.woff2") format("woff2"),
      url("/assets/fonts/Montserrat-Bold.ttf") format("truetype")}

:root{
  /* Authoritative Associated Consulting tokens (Style Guide v2.0, June 2026). */
  --navy:#0b2a4a; --navy-2:#061d33; --yellow:#f4b400; --green:#4e731c;
  --grey:#eeeeee; --ink:#1f1f1f; --muted:#60738a; --line:#c9d2de; --white:#fff;
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;font-family:"Montserrat",Arial,"Helvetica Neue",sans-serif;
  font-weight:400;color:var(--ink);background:var(--grey)}

/* shell: navy sidebar + content panel */
.app{display:grid;grid-template-columns:minmax(260px,300px) minmax(0,1fr);min-height:100vh}
.sidebar{background:var(--navy);color:var(--white);padding:30px 24px;display:flex;flex-direction:column;
  justify-content:space-between;gap:28px;position:sticky;top:0;height:100vh;overflow-y:auto}
.sidebar-content{display:grid;gap:28px}
/* the white wordmark sits directly on the navy rail (no white card) */
.brand-card{background:transparent;padding:0;width:min(100%,224px)}
.brand-logo{display:block;height:auto;width:100%}
.program-meta{display:grid;gap:18px}
.meta-group{display:grid;gap:4px}
.meta-label{color:var(--yellow);font-size:13px;font-weight:700;letter-spacing:.06em;margin:0;text-transform:uppercase}
.meta-value{color:var(--white);font-size:17px;font-weight:600;line-height:1.35;margin:0}
.sidebar-title .eyebrow{color:var(--yellow);font-size:13px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;margin:0 0 10px}
.sidebar-title h1{font-size:26px;line-height:1.1;margin:0;color:var(--white);font-weight:700}
.phase-list{display:grid;gap:6px;align-content:end}
.phase{border-left:4px solid rgba(255,255,255,.22);padding:7px 12px;color:#9fb1c6;font-weight:600;font-size:13px;letter-spacing:.01em}
.phase.active{border-color:var(--yellow);color:var(--yellow);font-size:20px;font-weight:800}
/* sidebar nav links: block items with hover + active, not underlined text */
.side-link{display:flex;align-items:center;gap:9px;color:#cfe0ee;font-size:14px;font-weight:600;
  text-decoration:none;cursor:pointer;background:none;border:0;padding:9px 12px;border-radius:8px;
  text-align:left;width:100%;transition:background .12s,color .12s}
.side-link:hover{background:rgba(255,255,255,.08);color:#fff;text-decoration:none}
.side-link.active{background:rgba(244,180,0,.14);color:#fff}
.side-link.primary{background:rgba(244,180,0,.16);color:#fff;font-weight:700}
.side-link.primary:hover{background:rgba(244,180,0,.26)}
.side-sep{height:1px;background:rgba(255,255,255,.12);margin:10px 2px}
.side-foot{display:grid;gap:2px}
.side-foot .who{color:#9fb1c6;font-size:12px;padding:0 12px}

/* content */
.panel{padding:36px 40px;max-width:1000px;width:100%;justify-self:start}
.page-head{margin:2px 0 22px}
.page-head h2{margin:0 0 8px}
.page-head .lead{margin:0}
.eyebrow{color:var(--green);font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin:0 0 10px}
.card{background:var(--white);border:1px solid var(--line);border-radius:8px;padding:28px;margin-bottom:18px}
/* the signature AC yellow heading rule — a short bar under every section head */
h2{font-size:28px;line-height:1.15;color:var(--navy);margin:0 0 12px;font-weight:700}
h2::after{content:"";display:block;width:46px;height:3px;background:var(--yellow);border-radius:2px;margin-top:10px}
h2.no-rule::after{display:none}
.lead,.intro-copy{font-size:16px;line-height:1.6;color:#405160;margin:0 0 16px;max-width:760px}
label{display:block;font-weight:600;color:var(--navy);font-size:14px;margin:14px 0 6px}
input,select,textarea{width:100%;border:1px solid #cbd3dd;border-radius:8px;padding:12px 14px;font:inherit;color:var(--ink);background:var(--white);transition:border-color .12s,box-shadow .12s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(11,42,74,.13)}
input::placeholder{color:#9aa7b4}
.bar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:18px}
button{border:0;border-radius:8px;padding:12px 20px;font:inherit;font-weight:700;cursor:pointer;background:var(--yellow);color:var(--navy);transition:filter .12s,box-shadow .12s,transform .04s}
button:hover{filter:brightness(.96)}
button:active{transform:translateY(1px)}
button:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(11,42,74,.25)}
button.secondary{background:#e1e7ee;color:var(--navy)}
button.ghost{background:#fff;color:var(--navy);border:1px solid #c2ccd8}
button.ghost:hover{border-color:var(--navy);filter:none}
/* A disabled control must LOOK disabled.
   There was no :disabled rule anywhere, while buttons are disabled on at least six
   pages -- including "My answer" for as long as the depth gate holds it. A gated button
   was pixel-identical to a live one, so the only feedback a delegate got from pressing
   it was nothing happening: the mechanism behind every "the buttons do nothing" report.
   The hover/active affordances are switched off deliberately -- without that, a dead
   button still brightens and depresses under the pointer as though it had worked.
   #525c66 on #e3e8ee measures 5.53:1, clearing WCAG AA for normal text (the first
   attempt, #5f6b76, came to 4.43 and missed it). NOTE the honest limit: the disabled
   grey and the live yellow are close in LUMINANCE (1.5:1), so the strongest cues for a
   colour-blind user are the text weight/darkness and the cursor, not the fill. */
button:disabled,button[disabled]{background:#e3e8ee;color:#525c66;cursor:not-allowed;
  filter:none;box-shadow:none}
button:disabled:hover,button[disabled]:hover{filter:none;border-color:#c2ccd8}
button:disabled:active,button[disabled]:active{transform:none}
button.ghost:disabled,button.ghost[disabled]{background:#f4f6f8;color:#525c66;
  border-color:#dfe5ec}
input:disabled,select:disabled,textarea:disabled{background:#f4f6f8;color:#525c66;
  cursor:not-allowed}
.link{color:var(--navy);font-weight:700;font-size:13px;cursor:pointer;text-decoration:underline;background:none;border:0;padding:0}
.err{color:#9a2b1e;font-size:13px;font-weight:700}
.muted{color:var(--muted);font-size:13px}
.badge{display:inline-block;background:#edf6ea;color:var(--green);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:4px 12px;border-radius:6px;margin-bottom:10px}
.two{display:flex;gap:14px}.two>div{flex:1}
.note{background:#f8fafc;border:1px solid var(--line);border-radius:8px;padding:14px 16px;font-size:13px;color:#405160;margin-top:14px;line-height:1.5;word-break:break-word}

/* arrow bullets — yellow chevron markers for sequential / key-point lists */
ul.arrow-list{list-style:none;padding-left:0;margin:8px 0}
ul.arrow-list li{position:relative;padding-left:24px;margin:7px 0;line-height:1.5}
ul.arrow-list li::before{content:"\203A";position:absolute;left:6px;top:-1px;color:var(--yellow);font-weight:700;font-size:17px;line-height:1.4}

/* tiles (dashboard) */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:8px}
.tile{background:var(--white);border:1px solid var(--line);border-radius:8px;padding:22px;cursor:pointer;transition:border-color .12s,transform .12s}
.tile:hover{border-color:var(--navy);transform:translateY(-1px)}
.tile h3{margin:0 0 6px;font-size:18px;color:var(--navy);font-weight:600}
.tile .desc{color:#5b6b79;font-size:13px;line-height:1.5}
.tile .go{color:var(--green);font-size:13px;font-weight:700;margin-top:14px;display:inline-flex;align-items:center;gap:6px;transition:gap .12s}
.tile:hover .go{gap:10px}
.tile.jam{grid-column:1/-1;background:var(--navy)}
.tile.jam h3{color:#fff;font-size:21px}.tile.jam .desc{color:#d7e2ee}.tile.jam .go{color:var(--yellow)}
/* The mentor entry point carries NO styling of its own -- it is a plain .tile, and the
   `mentor` class is only a hook. It was briefly a full-width gold billboard; at that weight
   it fought Just Ask Me for the page instead of sitting beside the programmes. It is still
   the first tile in the grid and the whole tile is the link, which is prominence enough. */
/* coming-soon: intentionally inactive (desaturated divider/muted), not flat opacity */
.tile.lock{cursor:not-allowed;background:#f3f5f8;border-color:var(--line)}
.tile.lock h3{color:var(--muted)}.tile.lock .desc{color:#8c98a6}
/* locked tiles show the same "Enter" affordance, but greyed to read as no-access */
.tile.lock .go{color:var(--muted)}
.tile.lock:hover{transform:none;border-color:var(--line)}
.crow{display:flex;justify-content:space-between;padding:12px 0;border-top:1px solid var(--line)}
.crow:first-child{border-top:0}
.pill{background:#edf6ea;color:var(--green);border-radius:12px;padding:3px 10px;font-size:12px;font-weight:700}
.tag{font-size:11px;background:#fef3da;color:#854f0b;border-radius:6px;padding:2px 8px;font-weight:700}
.hide{display:none}

/* Phone / small screens: collapse the navy rail into a slim, sticky top bar so the
   page content is reachable straight away and Just Ask Me stays one tap from the top
   (no scrolling past a full-height sidebar). Same markup as desktop — purely responsive. */
@media (max-width:820px){
  /* minmax(0,1fr) — not bare 1fr — so the single column can shrink below its
     widest child's max-content; otherwise the track (and the whole page) expands
     past a narrow phone's viewport and content spills off both edges. */
  .app{grid-template-columns:minmax(0,1fr)}
  .sidebar,.panel{min-width:0}
  .sidebar{position:sticky;top:0;z-index:20;height:auto;min-height:0;overflow:visible;
    flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;
    gap:10px 12px;padding:10px 14px}
  .sidebar-content{display:flex;flex-direction:row;align-items:center;gap:12px;
    flex:1 1 auto;min-width:0;margin:0}
  .brand-card{width:148px;flex:0 0 auto}
  /* hide the verbose context chrome on a phone — keep brand + the actions */
  .program-meta,.sidebar-title,.side-sep,.side-foot,.phase{display:none}
  /* flex:1 1 auto + min-width:0 so the action row can shrink below its links'
     single-line width and wrap them onto a second line, instead of sizing to
     max-content and pushing "Log out" off the edge of a narrow phone. */
  .phase-list{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;
    gap:6px 8px;align-content:center;flex:1 1 auto;min-width:0}
  .side-link{width:auto;padding:8px 12px;font-size:13px}
  .side-link.primary{order:-1}            /* Just Ask Me first in the bar */
  .panel{padding:18px 16px}
  .grid,.two{grid-template-columns:1fr;display:grid}
  .tile.jam{grid-column:auto}
  h2{font-size:22px}
}