/* ==========================================================================
   IRIS LEARN · Corporate HRD Solution — sign-in page and signed-in portal
   Loaded after styles.css. Same tokens and the same five type sizes.
   ========================================================================== */

/* ---------- sign-in: the same tone as the Learn Suite sign-in page ---------- */
.login{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);min-height:100vh;background:#fff}
.login-art{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:18px;padding:34px clamp(26px,4.5vw,64px) 30px;background:var(--tint-cream);color:var(--ink);border-right:1px solid var(--ink)}
.login-mast{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:14px;border-bottom:1px solid var(--ink);box-shadow:0 3px 0 var(--tint-cream),0 4px 0 var(--ink)}
.login-mast .brand b{font-size:var(--fs-2)}
.login-issue{font-size:var(--fs-5);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);text-align:right}
.login-art h2{font-size:var(--fs-1);line-height:1.06;font-weight:500;margin:6px 0 0}
.login-art h2 em{font-style:italic;color:var(--red)}
.login-illus{flex:1;min-height:200px;max-height:40vh}
.login-illus img{width:100%;height:100%;object-fit:contain;object-position:center bottom}
.login-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;padding:14px 0 0;border-top:1px solid var(--ink);color:var(--ink-2)}
.login-points b{display:block;font-family:var(--font-display);font-size:var(--fs-3);font-weight:600;color:var(--ink);margin-bottom:2px;line-height:var(--lh-head)}
.login-panel{display:flex;flex-direction:column;padding:28px clamp(20px,5vw,64px) 30px;gap:18px}
.login-top{display:flex;justify-content:space-between;align-items:center;gap:14px}
.login-client{height:46px;width:auto}
.login-card{width:min(460px,100%);margin:auto}
.login-card h1{font-size:var(--fs-2);margin-bottom:6px}
.login-card .sub{color:var(--ink-2)}
.lg-portal{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:18px 0 14px}
.lg-portal button{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--r);background:#fff;text-align:left}
.lg-portal button:hover{border-color:var(--ink)}
.lg-portal button.on{border-color:var(--ink);background:var(--tint-paper);box-shadow:inset 0 -2px 0 var(--red)}
.lg-portal b{display:block} .lg-portal em{display:block;font-style:normal;font-size:var(--fs-5);color:var(--muted)}
.lg-h{font-size:var(--fs-5);font-weight:700;letter-spacing:.12em;line-height:var(--lh-ui);text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.lg-seats{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.lg-seat{display:flex;align-items:center;gap:10px;padding:7px 10px;border:1px solid var(--line);border-radius:var(--r);background:#fff;text-align:left;width:100%}
.lg-seat:hover{border-color:var(--ink)}
.lg-seat.on{border-color:var(--ink);box-shadow:inset 3px 0 0 var(--red)}
.lg-seat b{display:block} .lg-seat em{display:block;font-style:normal;font-size:var(--fs-5);color:var(--muted)}
.avatar{display:inline-grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;font-weight:700;font-size:var(--fs-5);letter-spacing:.04em}
#lg-form{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.field{display:flex;flex-direction:column;gap:5px}
.field label{font-size:var(--fs-5);font-weight:700;color:var(--ink-2)}
.field input,.field select,.field textarea{font:inherit;color:inherit;width:100%;padding:9px 12px;border:1px solid var(--line-2);border-radius:var(--r);background:#fff;outline:none}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink);box-shadow:0 0 0 3px var(--red-soft)}
.lg-go{grid-column:1 / -1;justify-content:center}
.login-demo{margin-top:14px;font-size:var(--fs-5);color:var(--muted);display:flex;gap:6px;align-items:flex-start}
.login-help{font-size:var(--fs-5);color:var(--muted)}
.login-help a{text-decoration:underline}

/* ---------- portal shell ---------- */
#app{display:grid;grid-template-columns:272px minmax(0,1fr);min-height:100vh}
#rail{position:sticky;top:0;height:100vh;overflow:auto;scrollbar-width:none;border-right:1px solid var(--line);padding:16px 12px;display:flex;flex-direction:column;gap:14px;background:#fff}
#rail::-webkit-scrollbar{display:none}
#rail .brand{padding:0 6px}
.tenant{display:flex;align-items:center;gap:10px;padding:10px 10px;border:1px solid var(--line);border-radius:var(--r2);background:var(--tint-paper)}
.tenant img{height:30px;width:auto}
.tenant small{display:block;font-size:var(--fs-5);color:var(--muted);line-height:var(--lh-ui)}
.rail-h{font-size:var(--fs-5);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding:0 8px;margin-bottom:4px}
.rail-sec{display:flex;flex-direction:column;gap:2px}
.rail-a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r);color:var(--ink-2);font-weight:500}
.rail-a:hover{background:var(--bg-2)}
.rail-a.active{background:var(--bg-2);color:var(--ink);font-weight:700;box-shadow:inset 2px 0 0 var(--red)}
.rail-a .ic{width:18px;height:18px}
.rail-a small{display:block;font-size:var(--fs-5);color:var(--muted);font-weight:400;line-height:var(--lh-ui);margin-top:2px}
.rail-a span{min-width:0}
.rail-foot{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding:0 4px}
.me{display:flex;align-items:center;gap:10px}
.me b{display:block;line-height:var(--lh-ui)} .me small{display:block;font-size:var(--fs-5);color:var(--muted);line-height:var(--lh-ui)}
.rail-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.powered{display:flex;align-items:center;gap:8px}
.powered small{font-size:var(--fs-5);font-weight:700;letter-spacing:.14em;color:var(--muted);line-height:var(--lh-ui)}
.powered img{height:12px;opacity:.85}
#main{min-width:0;padding:26px 32px 80px;max-width:1240px}
.page-h{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid var(--ink);margin-bottom:20px}
.page-h h1{font-size:var(--fs-2)}
.page-h p{color:var(--ink-2);margin-top:6px}
.page-h .acts{display:flex;gap:8px;flex-wrap:wrap}
.crumb{font-size:var(--fs-5);color:var(--muted);margin-bottom:8px;display:flex;gap:8px}
.crumb a:hover{color:var(--ink)}

/* ---------- common pieces ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r2);padding:18px 20px}
.card.soft{background:var(--tint-paper);border-color:transparent}
.card.cream{background:var(--tint-cream);border-color:transparent}
.card h3{margin-bottom:6px}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(3,minmax(0,1fr))} .g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.sp{justify-content:space-between}
.mt{margin-top:20px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;font-size:var(--fs-5);font-weight:700;background:var(--bg-3);color:var(--ink-2);border:1px solid transparent}
.chip.red{background:var(--red-soft);color:var(--red-dark)}
.chip.green{background:var(--green-soft);color:var(--green)}
.chip.line{background:#fff;border-color:var(--line-2);color:var(--ink)}
.chip.btn-chip{cursor:pointer}
.chip.btn-chip:hover{border-color:var(--ink)}
.chip.btn-chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.tile{border:1px solid var(--line);border-radius:var(--r2);padding:14px 16px;background:#fff}
.tile .v{font-family:var(--font-display);font-size:var(--fs-2);font-weight:600;line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.tile .l{font-size:var(--fs-5);color:var(--muted);margin-top:6px}
.bar{height:8px;background:var(--bg-3);border-radius:4px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--red);border-radius:4px}
.bar.ink i{background:var(--ink)}
.barrow{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 44px;gap:12px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line)}
.barrow:last-child{border-bottom:0}
.barrow .n{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.note{font-size:var(--fs-5);color:var(--ink-2);background:var(--tint-paper);padding:8px 12px;border-radius:var(--r)}
.fine{font-size:var(--fs-5);color:var(--muted)}
.btn.ghost.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.search{display:flex;align-items:center;gap:8px;padding:0 12px;height:40px;border:1px solid var(--line-2);border-radius:var(--r);background:#fff;width:min(380px,100%)}
.search input{flex:1;min-width:0;border:0;outline:none;font:inherit;color:inherit;background:none}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.list{list-style:none;display:flex;flex-direction:column;gap:8px}
.check{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r);cursor:pointer;background:#fff}
.check:hover{border-color:var(--ink)}
.check.on{border-color:var(--ink);background:var(--tint-paper)}
.check input{margin-top:4px}
.empty{padding:28px;text-align:center;color:var(--muted);border:1px dashed var(--line-2);border-radius:var(--r2)}

/* home */
.hello{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:20px;align-items:center;background:var(--tint-cream);border-radius:var(--r2);padding:24px 26px;margin-bottom:20px}
.hello h2{font-weight:500;margin-bottom:8px}
.hello p{color:var(--ink-2)}
.hello img{max-height:180px;width:100%;object-fit:contain;object-position:center bottom}
.mods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.mod{display:flex;flex-direction:column;gap:8px;padding:18px;border:1px solid var(--line);border-radius:var(--r2);background:#fff;color:inherit;transition:border-color .15s}
.mod:hover{border-color:var(--ink)}
.mod .ic{width:28px;height:28px;color:var(--red)}
.mod b{font-family:var(--font-display);font-size:var(--fs-3);font-weight:600;line-height:var(--lh-head)}
.mod p{color:var(--ink-2);flex:1}
.mod .stat{font-size:var(--fs-5);color:var(--muted);border-top:1px solid var(--line);padding-top:10px}
.todo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.todo li{display:flex;flex-direction:column;gap:8px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r2);background:#fff}
.todo .n{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1px solid var(--ink);font-size:var(--fs-5);font-weight:700}
.todo li.done .n{background:var(--green);border-color:var(--green);color:#fff}
.todo b{font-weight:600} .todo p{color:var(--ink-2);flex:1}

/* catalogue */
.cat-tools{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.ccards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ccard{display:flex;flex-direction:column;gap:6px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r2);background:#fff;color:inherit}
.ccard:hover{border-color:var(--ink)}
.ccard .code{font-size:var(--fs-5);font-weight:700;letter-spacing:.1em;color:var(--red)}
.ccard b{font-family:var(--font-display);font-size:var(--fs-3);font-weight:600;line-height:var(--lh-head)}
.ccard small{font-size:var(--fs-5);color:var(--muted)}
.ccard ol{display:flex;flex-direction:column;gap:2px;margin-top:6px;color:var(--ink-2);border-top:1px solid var(--line);padding-top:8px}
.ccard ol li span{display:inline-block;min-width:22px;color:var(--muted);font-size:var(--fs-5);font-weight:700}
.levels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.level{border:1px solid var(--line);border-radius:var(--r2);padding:18px;background:#fff}
.level .lvl{display:block;font-size:var(--fs-5);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700}
.level h3{margin:6px 0 10px}
.level ul{display:flex;flex-direction:column;gap:4px;color:var(--ink-2)}
.level li span{display:inline-block;min-width:58px;color:var(--muted);font-size:var(--fs-5);font-weight:700;letter-spacing:.06em}
.shortlist{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px 16px;border:1px solid var(--ink);border-radius:var(--r2);background:var(--tint-paper);margin-bottom:14px}
.shortlist .chip button{border:0;background:none;padding:0;cursor:pointer;color:var(--muted);font:inherit}

/* labs */
.lab{display:grid;grid-template-columns:76px minmax(0,1fr) auto;gap:16px;align-items:center;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r2);background:#fff}
.lab .d{text-align:center;border-right:1px solid var(--line);padding-right:12px}
.lab .d b{display:block;font-family:var(--font-display);font-size:var(--fs-2);font-weight:600;line-height:1}
.lab .d small{display:block;font-size:var(--fs-5);color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin-top:4px}
.lab h3{margin-bottom:4px}
.lab p{color:var(--ink-2)}
.lab .seats{font-size:var(--fs-5);color:var(--muted);margin-top:6px}

/* survey */
.q{display:flex;flex-direction:column;gap:10px;padding:18px 20px;border:1px solid var(--line);border-radius:var(--r2);background:#fff}
.q h3{margin:0}
.q .opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}

/* experts */
.xcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.xcard{display:flex;flex-direction:column;gap:8px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r2);background:#fff}
.xcard .who{display:flex;gap:10px;align-items:center}
.xcard b{font-family:var(--font-display);font-size:var(--fs-3);font-weight:600;line-height:var(--lh-head)}
.xcard .who small{display:block;color:var(--ink-2);line-height:1.4}
.xcard .meta{font-size:var(--fs-5);color:var(--muted)}
.xcard .foot{margin-top:auto;padding-top:10px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}

/* toast */
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 16px;border-radius:var(--r);opacity:0;pointer-events:none;transition:opacity .2s;z-index:50;max-width:min(560px,90vw)}
#toast.on{opacity:1}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .login{grid-template-columns:1fr}
  .login-art{border-right:0;border-bottom:1px solid var(--ink)}
  .login-illus{max-height:200px}
  .login-points{grid-template-columns:1fr}
  #app{grid-template-columns:1fr}
  #rail{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line)}
  #rail .rail-sec{flex-direction:row;flex-wrap:wrap}
  #rail .rail-a small{display:none}
  .rail-foot{margin-top:0}
  #main{padding:20px 16px 60px}
  .mods,.todo,.ccards,.xcards,.levels,.g3,.g4{grid-template-columns:1fr 1fr}
  .hello{grid-template-columns:1fr}
  .hello img{max-height:120px}
}
@media (max-width:620px){
  .mods,.todo,.ccards,.xcards,.levels,.g2,.g3,.g4,.q .opts{grid-template-columns:1fr}
  .lab{grid-template-columns:60px minmax(0,1fr)}
  .lab > .btn, .lab > .row{grid-column:1 / -1}
  #lg-form{grid-template-columns:1fr}
}

/* ---------- catalogue: filters, cards, competency detail ---------- */
.filters{margin-bottom:16px}
.frow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr) minmax(0,1.5fr);gap:14px;margin-top:12px;align-items:start}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;background:#fff}
.seg button{padding:6px 12px;font-weight:600;color:var(--muted);border-right:1px solid var(--line)}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--ink);color:#fff}
.seg button span{opacity:.6;font-size:var(--fs-5);margin-left:2px}
.ccard p{color:var(--ink-2);font-size:var(--fs-5)}
.ccard ol li.prog{font-weight:600;color:var(--ink)}
.ccard ol li em{font-style:normal;color:var(--muted)}
.ccard.ws .chip{vertical-align:middle;letter-spacing:0;margin-left:2px}
.page-h h1 .alt{display:block;font-family:var(--font);font-size:var(--fs-4);font-weight:500;color:var(--ink-2);margin-top:4px;letter-spacing:0}
table.prog{width:100%;min-width:620px;border-collapse:collapse;table-layout:fixed}
table.prog th,table.prog td{text-align:left;vertical-align:top;padding:10px 12px 10px 0;border-bottom:1px solid var(--line)}
table.prog thead th{font-weight:700;border-bottom:1px solid var(--ink);padding-top:0}
table.prog thead th small{display:block;font-weight:400;color:var(--muted);font-size:var(--fs-5)}
table.prog tbody th{width:28px;font-family:var(--font-display);font-size:var(--fs-3);font-weight:600;color:var(--red)}
table.prog td span{display:block;font-size:var(--fs-5);font-weight:700;color:var(--muted);letter-spacing:.06em}
table.prog .cur{background:var(--tint-cream)}
table.prog tr:last-child td,table.prog tr:last-child th{border-bottom:0}
.why{padding:10px 0;border-bottom:1px solid var(--line)}
.why:last-child{border-bottom:0}
.why b{display:block;font-size:var(--fs-5);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.why p{color:var(--ink-2)}
.tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:18px}
.tabs a{display:flex;flex-direction:column;gap:2px;padding:12px 16px;border:1px solid var(--line);border-radius:var(--r2);background:#fff;color:inherit}
.tabs a:hover{border-color:var(--ink)}
.tabs a.on{border-color:var(--ink);background:var(--tint-cream);box-shadow:inset 0 -3px 0 var(--red)}
.tabs small{font-size:var(--fs-5);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700}
.tabs b{font-family:var(--font-display);font-size:var(--fs-3);font-weight:600;line-height:var(--lh-head)}
.ws-detail{padding:22px 22px 24px;border:1px solid var(--ink);border-radius:var(--r2);background:#fff}
.nums{list-style:decimal;padding-left:20px;color:var(--ink-2);display:flex;flex-direction:column;gap:6px}
.skl{display:flex;flex-direction:column;gap:6px;color:var(--ink-2);margin-bottom:10px}
.skl li span{display:inline-block;min-width:58px;color:var(--muted);font-size:var(--fs-5);font-weight:700;letter-spacing:.06em}
.mod4{display:flex;flex-direction:column;gap:6px}
.mod4 .time{font-size:var(--fs-5);font-weight:700;letter-spacing:.08em;color:var(--red);font-variant-numeric:tabular-nums}
.mod4 b{font-family:var(--font-display);font-size:var(--fs-3);font-weight:600;line-height:var(--lh-head)}
.mod4 p{color:var(--ink-2)}
@media (max-width:980px){.frow{grid-template-columns:1fr 1fr}.tabs{grid-template-columns:1fr}}
@media (max-width:620px){.frow{grid-template-columns:1fr}}
.g-prog{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}
table.prog{min-width:0}
table.prog td{word-break:normal;overflow-wrap:anywhere}
@media (max-width:980px){.g-prog{grid-template-columns:1fr}}

/* ---------- Virtual Lab: the real calendar ---------- */
.lab-month{margin:14px 0 4px;padding-bottom:6px;border-bottom:1px solid var(--ink)}
.lab-month:first-child{margin-top:0}
.lab{grid-template-columns:76px minmax(0,1fr) 190px;align-items:start}
.lab .who{color:var(--ink-2);margin-top:6px}
.lab .th{color:var(--ink-2)}
.lab.past{background:var(--tint-paper)}
.lab.past .d b{color:var(--muted)}
.lab .row:first-child{align-items:center} .lab .row > .fine{margin:0} /* the time sits level with the topic chip; .fine brings a footnote margin */
.lab-acts{flex-direction:column;align-items:stretch;gap:8px}
.lab-acts .btn{justify-content:center}
.check.sm{gap:8px;align-items:center}
.check.sm input{margin:0}
@media (max-width:620px){.lab{grid-template-columns:60px minmax(0,1fr)}.lab-acts{grid-column:1 / -1;flex-direction:row}}

/* ---------- Virtual Lab: expert photos ---------- */
.lab{grid-template-columns:76px 96px minmax(0,1fr) 190px}
.lab .pic{width:96px;height:96px;object-fit:cover;object-position:center;border-radius:var(--r2);background:#fff;border:1px solid var(--line);display:block}
.lab .pic.ini{display:grid;place-items:center;font-family:var(--font-display);font-size:var(--fs-3);font-weight:600;color:var(--muted);border:1px solid var(--line)}
.co{margin:0 0 12px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r2);background:var(--tint-cream)}
.co .row{gap:18px}
.co-p{display:inline-flex;align-items:center;gap:10px}
.co-p img{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:top center}
.co-p b{display:block} .co-p small{display:block;font-size:var(--fs-5);color:var(--ink-2);max-width:34ch;line-height:1.4}
.co .fine{margin-top:8px}
@media (max-width:620px){.lab{grid-template-columns:60px 64px minmax(0,1fr)}.lab .pic{width:64px;height:64px}}

/* ---------- Learning Needs Survey: funnel form, validation, dashboard ---------- */
.sv-dom{margin-top:6px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r2);background:var(--tint-paper)}
.sv-dom > b{display:block;font-family:var(--font-display);font-size:var(--fs-3);font-weight:600;margin-bottom:6px}
.sv-sub{margin-top:8px}
.sv-sub small{display:block;font-size:var(--fs-5);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:6px}
.sv-sub .chip{font-weight:500;font-size:var(--fs-4)}
.sv-rates{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.rate{padding:12px 14px;border:1px solid var(--ink);border-radius:var(--r2);background:#fff;display:flex;flex-direction:column;gap:8px}
.rate-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rate-h b{font-family:var(--font-display);font-size:var(--fs-3);font-weight:600}
.rate-h .btn{margin-left:auto}
.rate-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.rate-row > span:first-child{min-width:170px;color:var(--ink-2)}
.q .field{margin-top:4px}
.tm{display:flex;flex-direction:column;gap:8px}
.tm-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tm-h > span:nth-child(2){flex:1;min-width:200px}
.tm-h b{display:block} .tm-h small{display:block;font-size:var(--fs-5);color:var(--muted)}
.tm-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:8px 0;border-top:1px solid var(--line)}
table.heat{width:100%;min-width:640px;border-collapse:collapse;table-layout:fixed}
table.heat th,table.heat td{text-align:center;padding:6px 4px;border-bottom:1px solid var(--line);font-size:var(--fs-5)}
table.heat thead th{font-weight:700;letter-spacing:0;text-transform:none;color:var(--ink);border-bottom:1px solid var(--ink)}
table.heat tbody th{text-align:left;font-weight:600;color:var(--ink);width:24%;font-size:var(--fs-4)}
table.heat td span{display:block;padding:7px 0;border-radius:var(--r);background:rgba(184,40,29,var(--a));color:#fff;font-weight:700;font-variant-numeric:tabular-nums;min-height:30px}
table.heat td span[style="--a:0.00"],table.heat td span[style="--a:0"]{background:var(--bg-3);color:var(--muted)}
table.heat td.tot{font-weight:700;color:var(--ink)}
.ft.res thead th{font-size:var(--fs-5);letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-top:0}
.ft.res tbody th small{display:block;font-weight:400;color:var(--muted);font-size:var(--fs-5)}
.ft.res th,.ft.res td{padding:10px 12px 10px 0;vertical-align:top}
.ft.res{min-width:640px}
.skc{margin-top:10px;padding-top:8px;border-top:1px solid var(--line)}
.seg button span{opacity:.6;font-size:var(--fs-5);margin-left:2px}
@media (max-width:620px){.rate-row > span:first-child{min-width:0}}
.sv-group{margin-top:10px}
.sv-group small{display:block;font-size:var(--fs-5);letter-spacing:.1em;text-transform:uppercase;color:var(--red);font-weight:700;margin-bottom:6px}
.q textarea{width:100%;font:inherit;color:inherit;padding:9px 12px;border:1px solid var(--line-2);border-radius:var(--r);background:#fff;outline:none;resize:vertical;line-height:var(--lh-text)}
.q textarea:focus{border-color:var(--ink);box-shadow:0 0 0 3px var(--red-soft)}
.mix{margin-top:6px}

/* ---------- one line height for interface text ---------- */
.rail-a,.rail-a span,.rail-a b,.rail-h,.tenant b,.tenant small,.me b,.me small,.lang button,.btn,.chip,.tile .l,.seg button,.crumb,.page-h .acts,.check,.check span,.field label,.lg-portal b,.lg-portal em,.lg-seat b,.lg-seat em,.login-issue,.login-points b,.login-points span,.mod .stat,.ccard .code,.ccard small,.ccard ol,.ccard ol li,.level .lvl,.level li,.xcard .meta,.xcard .who small,.lab .d small,.lab .seats,.lab .who,.lab .th,.heat th,.heat td,table.prog td,table.prog td span,table.prog thead th small,.ft.res th,.ft.res td,.ft.res tbody th small,.tm-h small,.tm-row,.rate-row,.rate-h .fine,.sv-sub small,.sv-group small,.barrow,.barrow span,.why b,.mod4 .time,.co-p small,.co-p b,.filters .fine,.shortlist .chip,.note,.fine{line-height:var(--lh-ui)}
.page-h h1,.page-h h2,h3,.tile .v,.lab .d b,.mod b,.ccard b,.level h3,.xcard b,.rate-h b,.tabs b,.mod4 b,.sv-dom > b,.hello h2,.login-art h2,.login-card h1{line-height:var(--lh-head)}
p,.page-h p,.hello p,.mod p,.ccard p,.empty,.q .fine,.callout p,.card p,.lab p,.sub,.login-points,.login-demo,.login-help,.fine.mt,.note{line-height:var(--lh-text)}
.lab .who,.lab .th,.rate-row > span:first-child,.tm-row > div,.why p{line-height:var(--lh-text)}

/* ---------- Expert Marketplace on the real profiles ---------- */
.xtools .frow{grid-template-columns:minmax(0,1.5fr) minmax(0,1.3fr) minmax(0,1.1fr) minmax(0,1.7fr)}
.xcard{gap:10px}
.xcard .who{align-items:flex-start;gap:14px}
.xcard .who b a:hover{text-decoration:underline}
.xcard .who small{display:block;color:var(--ink-2);line-height:var(--lh-ui);margin-top:3px}
.xcard .who small.fine{color:var(--muted)}
.xcard .pic,.xprof .pic{flex:none;width:80px;height:80px;border-radius:var(--r);object-fit:cover;object-position:center;background:#fff;border:1px solid var(--line)}
.xcard .pic.ini,.xprof .pic.ini{display:grid;place-items:center;font-weight:700;color:var(--muted);border:1px solid var(--line);letter-spacing:.04em}
.xcard > p.fine{margin-top:-2px}
.chip.main{border-color:var(--red);color:var(--red);font-weight:600}
.subs{color:var(--ink-2);font-size:var(--fs-5);line-height:var(--lh-ui)}
.xcard .meta{display:flex;flex-direction:column;gap:3px;color:var(--muted);line-height:var(--lh-ui)}
.xcard .meta span{display:flex;align-items:center;gap:6px}
.xcard .meta svg{width:14px;height:14px;flex:none}
.xmore{display:flex;justify-content:center;margin-top:18px}
.xprof{display:grid;grid-template-columns:200px minmax(0,1fr);gap:28px;align-items:start;margin-top:12px}
.xprof .pic{width:200px;height:200px;border-radius:var(--r2)}
.xprof .pic.ini{font-family:var(--font-display);font-size:var(--fs-1);font-weight:600}
.xprof h1{font-size:var(--fs-2)}
.xsec{margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}
.xsec h3{margin-bottom:10px}
.xsec.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.xdom{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:10px 0;border-bottom:1px solid var(--line)}
.xdom:last-child{border-bottom:0}
.xdom .subs{flex-basis:100%}
.sol{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line)}
.sol:last-child{border-bottom:0}
.sol .chip{flex:none}
@media (max-width:980px){.xtools .frow{grid-template-columns:1fr 1fr}.xprof{grid-template-columns:1fr}.xsec.g3{grid-template-columns:1fr}}

/* ---------- expert ↔ competency map ---------- */
.xmini{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
.xm{display:flex;gap:12px;align-items:flex-start;padding:12px;border:1px solid var(--line);border-radius:var(--r2);background:#fff;color:inherit}
.xm:hover{border-color:var(--ink)}
.xm .pic{flex:none;width:56px;height:56px;border-radius:var(--r);object-fit:cover;object-position:center top;background:var(--tint-paper)}
.xm .pic.ini{display:grid;place-items:center;font-weight:700;color:var(--muted);border:1px solid var(--line)}
.xm b{display:block;line-height:var(--lh-ui)}
.xm small{display:block;color:var(--ink-2);line-height:var(--lh-ui);margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.xm em{display:inline-block;font-style:normal;font-size:var(--fs-5);color:var(--red);font-weight:600;margin-top:4px;line-height:var(--lh-ui)}
.xcomp{padding:10px 0;border-bottom:1px solid var(--line)}
.xcomp:last-child{border-bottom:0}
.xcomp small{display:block;font-size:var(--fs-5);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:8px;line-height:var(--lh-ui)}
.xcomp .chip{color:var(--ink)} .xcomp .chip.main{color:var(--red)} .xcomp a.chip:hover{border-color:var(--ink)}
.xcard .meta i{font-style:normal;color:var(--ink-2)}
.chip button{border:0;background:none;font:inherit;cursor:pointer;color:inherit;padding:0 0 0 4px;line-height:1}
@media (max-width:980px){.xmini{grid-template-columns:1fr}}

/* ---------- picture slots for the graphic team: hidden unless <html class="slots"> (open any page with ?slots=1) ---------- */
.art-slot{display:none}
html.slots .art-slot{display:flex;flex-direction:column;justify-content:flex-end;position:relative;margin:0 0 20px;padding:12px 14px;border:2px dashed var(--red);border-radius:var(--r2);background:rgba(184,40,29,.05);color:var(--ink);aspect-ratio:var(--ar,3/2);min-height:120px;max-width:100%;box-sizing:border-box;overflow:hidden}
html.slots .art-slot::before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom right,transparent calc(50% - 1px),rgba(184,40,29,.25),transparent calc(50% + 1px)),linear-gradient(to bottom left,transparent calc(50% - 1px),rgba(184,40,29,.25),transparent calc(50% + 1px))}
html.slots .art-slot figcaption{position:relative;font-size:var(--fs-5);line-height:var(--lh-ui);background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:8px 10px;max-width:560px}
html.slots .art-slot figcaption b{color:var(--red)}
html.slots .art-slot figcaption span{display:block;color:var(--ink-2);margin-top:3px}
html.slots .art-slot.wide{aspect-ratio:var(--ar,16/5);width:100%}
html.slots .art-slot.half{width:min(100%,460px);margin-bottom:20px}
html.slots .art-slot.side{position:absolute;right:0;top:0;width:280px;aspect-ratio:3/2;margin:0}
html.slots .page-h.with-slot{position:relative;padding-right:300px;min-height:200px}
html.slots .art-slot.sq{width:160px;aspect-ratio:1;margin:0 auto 14px}
html.slots .art-slot.portrait{width:min(100%,260px);aspect-ratio:4/5;margin:0 0 16px}
html.slots .art-slot.icons{aspect-ratio:auto;min-height:0;padding:10px 14px;margin:0;border-radius:0;border-left:0;border-right:0}
html.slots .art-slot.row{aspect-ratio:auto;min-height:0;justify-content:flex-start;gap:10px}
html.slots .art-slot.row::before{display:none}
html.slots .sq-row{display:flex;flex-wrap:wrap;gap:10px}
html.slots .sq-row i{display:block;width:64px;height:64px;border:1px dashed var(--red);border-radius:var(--r);background:#fff}
html.slots .empty{display:flex;flex-direction:column;align-items:center}

.xcard .chips a.chip{color:var(--ink)} .xcard .chips a.chip.main{color:var(--red)} .xcard .chips a.chip:hover{border-color:var(--ink)}
.xcomp .subs a:hover{text-decoration:underline}

/* ---------- value chain strip on the Skill Database ---------- */
.chain{display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px 10px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r2);background:var(--tint-paper);margin-bottom:16px}
.chain-g small{display:block;font-size:var(--fs-5);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:6px;line-height:var(--lh-ui)}
.chain .chip{color:var(--ink);background:#fff} .chain .chip span{color:var(--muted);margin-left:4px} .chain .chip.on{background:var(--ink);color:#fff;border-color:var(--ink)} .chain .chip.on span{color:rgba(255,255,255,.7)} .chain a.chip:hover{border-color:var(--ink)}
.chain-arrow{display:flex;align-items:center;align-self:center;color:var(--muted);padding-top:18px} .chain-arrow .ic{width:16px;height:16px}
/* ---------- the link card ---------- */
.lk{display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px;align-items:start;margin-top:4px}
.lk-qr{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px;border:1px solid var(--line);border-radius:var(--r2);background:#fff}
.lk-qr svg{display:block} .lk-qr small{font-size:var(--fs-5);color:var(--muted);letter-spacing:.08em;font-weight:700}
.lk-url{display:flex;gap:8px;margin:12px 0 10px;max-width:640px} .lk-url input{flex:1;min-width:0;height:40px;padding:0 12px;border:1px solid var(--line-2);border-radius:var(--r);font:inherit;color:var(--ink-2);background:var(--bg-2)}
@media (max-width:760px){.lk{grid-template-columns:1fr}.lk-qr{width:max-content}}
/* ---------- the public form page ---------- */
body.public{background:var(--tint-paper)} body.public #main{max-width:860px;margin:0 auto;padding:28px 20px 60px}
.pub-head{position:relative;padding:22px 24px;border:1px solid var(--line);border-radius:var(--r2);background:#fff;margin-bottom:14px}
.pub-head h1{font-size:var(--fs-2);margin:6px 0 8px} .pub-head p{color:var(--ink-2);max-width:66ch}
.pub-lang{position:absolute;right:16px;top:16px} .pub-brand{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:860px;margin:0 auto;padding:18px 20px 0}
.pub-brand b{font-family:var(--font-display);font-size:var(--fs-3);font-weight:600} .pub-brand img{height:22px}
/* ---------- Stage 2 ---------- */
.p2-tabs{margin-top:4px;flex-wrap:wrap} .p2-tabs a{padding:8px 14px;font-weight:600;color:var(--muted);border-right:1px solid var(--line)} .p2-tabs a:last-child{border-right:0} .p2-tabs a.on{background:var(--ink);color:#fff}
.weeks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:12px}
.week{border:1px solid var(--line);border-radius:var(--r2);padding:14px;background:#fff;display:flex;flex-direction:column;gap:6px;min-width:0}
.week.last{background:var(--tint-paper)} .week small{font-size:var(--fs-5);letter-spacing:.08em;text-transform:uppercase;color:var(--red);font-weight:700;line-height:var(--lh-ui)}
.week b{font-family:var(--font-display);font-size:var(--fs-3);font-weight:600;line-height:var(--lh-head)} .week b a:hover{text-decoration:underline}
.week ol{list-style:none;margin:4px 0;padding:0;display:flex;flex-direction:column;gap:4px;color:var(--ink-2)} .week ol li{display:flex;gap:8px;align-items:baseline} .week ol span{flex:none;font-size:var(--fs-5);font-weight:700;color:var(--muted);min-width:46px}
.passport{border:1px solid var(--ink);border-radius:var(--r2);background:#fff;padding:18px 20px;box-shadow:inset 0 0 0 4px var(--tint-paper)}
.pp-h{display:flex;flex-direction:column;gap:2px;padding-bottom:12px;border-bottom:1px solid var(--ink);margin-bottom:10px} .pp-h b{font-family:var(--font-display);font-size:var(--fs-2);font-weight:600;line-height:var(--lh-head)} .pp-h small{color:var(--ink-2);line-height:var(--lh-ui)}
table.pp{width:100%;border-collapse:collapse} table.pp th,table.pp td{text-align:left;padding:10px 10px 10px 0;border-bottom:1px solid var(--line);vertical-align:top} table.pp thead th{font-size:var(--fs-5);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700;border-bottom:1px solid var(--ink)} table.pp tbody th{font-weight:600} table.pp tbody th small{display:block;color:var(--muted);font-size:var(--fs-5);font-weight:400;line-height:var(--lh-ui)}
.stamp{display:inline-block;padding:3px 10px;border:1px solid var(--line-2);border-radius:999px;font-size:var(--fs-5);font-weight:700;color:var(--muted);letter-spacing:.04em;line-height:var(--lh-ui)} .stamp.ok{border-color:var(--red);color:var(--red)}
@media (max-width:980px){.weeks{grid-template-columns:1fr 1fr}} @media (max-width:620px){.weeks{grid-template-columns:1fr}}

html.slots .pub-head.with-slot{padding-right:320px;min-height:236px} html.slots .pub-head .art-slot.side{right:16px;top:16px}
@media (max-width:760px){html.slots .pub-head.with-slot{padding-right:24px}html.slots .pub-head .art-slot.side{position:static;width:100%;margin-top:12px}}

.login-ask{margin-top:12px;text-align:center} .login-ask a{font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* option A on the signed-in pages: the logo and pill buttons */
.brand-logo{display:block;height:34px;width:auto} .brand.has-logo > svg,.brand.has-logo > span{display:none}
.pub-brand .brand-logo{height:30px}
html[data-art="a"] .btn{border-radius:999px;padding-left:20px;padding-right:20px} html[data-art="a"] .btn.sm{padding-left:16px;padding-right:16px}
html[data-art="a"] .lang,html[data-art="a"] .lang button,html[data-art="a"] .seg,html[data-art="a"] .seg button,html[data-art="a"] .seg a{border-radius:999px}
html[data-art="a"] .seg{padding:3px;gap:2px;border-color:var(--line)} html[data-art="a"] .seg button,html[data-art="a"] .seg a{border-right:0}

/* Option A: a placeholder filled with a picture from the illustration set (js/slots.js, ART) */
.art-fill{display:flex;justify-content:center;align-items:flex-end;gap:32px;margin:0 0 28px}
.art-fill img{display:block;max-width:100%;height:auto;width:auto;object-fit:contain}
.art-fill.wide img{max-height:300px}
.art-fill.half img{max-height:280px}
.art-fill.pair img{flex:1 1 0;min-width:0;max-height:250px}
@media (max-width:640px){.art-fill{gap:12px}.art-fill.wide img,.art-fill.half img{max-height:200px}.art-fill.pair img{max-height:150px}}

/* expert photos are round everywhere (Virtual Lab, marketplace cards, profile, matches); faces sit high in the frame */
/* the outline is a soft ring drawn outside the photo, not a border: a 1px border on a round crop stair-steps and shows a white gap where the photo edge meets it */
.lab .pic,.xcard .pic,.xprof .pic,.xm .pic{border-radius:50%;object-position:center 22%;border:0;box-shadow:0 0 0 1px rgba(18,18,18,.10)}

/* ---------- side menu, option B: more air, one left edge, one icon style, red when chosen ---------- */
#app{grid-template-columns:300px minmax(0,1fr)}
#rail{padding:28px 24px 24px;gap:30px}
#rail .brand{padding:0}
.tenant{gap:12px;padding:14px 16px}
.rail-sec{gap:4px}
.rail-h{padding:0;margin-bottom:8px;font-size:var(--fs-5);letter-spacing:.14em}
/* the item reaches 12px past the column on both sides, so its icon lines up with the section labels while the hover fill has room */
.rail-a{align-items:flex-start;gap:14px;margin:0 -12px;padding:10px 12px;border-radius:12px;color:var(--ink);font-weight:600;line-height:1.3;transition:background .15s}
.rail-a > span:last-child{display:flex;flex-direction:column;gap:3px;padding-top:2px}
.rail-a small{margin-top:0;line-height:1.35}
.rail-ic{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--bg-2);color:var(--ink-2);transition:background .2s,color .2s,box-shadow .2s,transform .15s}
.rail-ic .ic{width:18px;height:18px;stroke-width:1.6}
.rail-a:hover{background:var(--bg-2)}
.rail-a:hover .rail-ic{background:#fff;color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
.rail-a:active .rail-ic{transform:scale(.92)}
.rail-a.active{background:var(--red-soft);box-shadow:none;font-weight:700}
.rail-a.active .rail-ic{background:var(--red);color:#fff;box-shadow:none}
.rail-a.active small{color:var(--red-dark)}
.rail-foot{padding:0;gap:14px}
@media (max-width:980px){
  #app{grid-template-columns:1fr}
  #rail{padding:20px 16px;gap:18px}
  .rail-h{flex-basis:100%}  /* the items wrap side by side here; each label keeps its own line */
}

/* ---------- two portals: learner views and HR status views ---------- */
.next{display:block;padding:12px 0;border-bottom:1px solid var(--line)} .next:last-child{border-bottom:0} .next b{display:block} .next p{color:var(--ink-2)} .next:hover b{color:var(--red)}
.lessons{display:flex;flex-direction:column;gap:6px;margin:6px 0}
.lesson{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r);background:#fff;cursor:pointer;line-height:var(--lh-ui)}
.lesson input{margin-top:4px;accent-color:var(--red)} .lesson.on{border-color:var(--ink);background:var(--tint-paper)} .lesson.on span{text-decoration:line-through;text-decoration-color:var(--red);color:var(--muted)} .lesson span b{color:var(--muted);font-size:var(--fs-5);margin-right:4px}
.jsteps{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--r2);background:#fff}
.jstep{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border-bottom:1px solid var(--line)} .jstep:last-child{border-bottom:0}
.jstep .n{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--ink);background:#fff;font-weight:700;font-size:var(--fs-5)} .jstep .n .ic{width:16px;height:16px}
.jstep.done .n{background:var(--ink);color:#fff} .jstep.cur .n{background:var(--red);border-color:var(--red);color:#fff} .jstep.cur b{color:var(--red)} .jstep.todo{opacity:.6}
.jstep b{display:block;line-height:var(--lh-ui)} .jstep p{margin-top:2px}
.glance{display:block;color:inherit} .glance:hover{border-color:var(--ink)} .glance .tile{padding:10px 12px} .glance .tile .v{font-size:var(--fs-3)}
.prow{padding:10px 0;border-bottom:1px solid var(--line)} .prow:last-of-type{border-bottom:0} .prow b{display:block} .prow .fine{display:block;margin:2px 0 6px}
.stepbar{display:grid;grid-template-columns:repeat(8,1fr);gap:3px} .stepbar i{display:block;height:8px;border-radius:2px;background:var(--bg-3)} .stepbar i.done{background:var(--ink)} .stepbar i.cur{background:var(--red)}
.jrow{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}
.jcell{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border:1px solid var(--line);border-radius:var(--r2);text-align:center;min-width:0}
.jcell .n{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--ink);font-size:var(--fs-5);font-weight:700;background:#fff} .jcell .n .ic{width:14px;height:14px}
.jcell b{font-size:var(--fs-5);line-height:var(--lh-ui)} .jcell small{font-size:var(--fs-5);color:var(--muted);line-height:var(--lh-ui)}
.jcell.done .n{background:var(--ink);color:#fff} .jcell.cur{border-color:var(--red);background:var(--red-soft)} .jcell.cur .n{background:var(--red);border-color:var(--red);color:#fff} .jcell.todo{opacity:.6}
@media (max-width:980px){.jrow{grid-template-columns:repeat(4,minmax(0,1fr))}}

.lg-portal{grid-template-columns:repeat(3,1fr)} @media (max-width:560px){.lg-portal{grid-template-columns:1fr}}
.sub{padding:12px 0;border-bottom:1px solid var(--line)} .sub:last-of-type{border-bottom:0} .sub b{display:block} .sub p{margin:4px 0 8px}
table.team th a:hover{text-decoration:underline}

/* ---------- round 4: banner, legends, info buttons, priority matrix, e-mail text ---------- */
.pbanner{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:24px;align-items:center;padding:28px 32px;margin-bottom:18px;background:var(--tint-cream);border:1px solid var(--line);border-radius:var(--r2)}
.pbanner h1{font-size:var(--fs-1);margin:4px 0 8px} .pbanner p{color:var(--ink-2);max-width:62ch} .pbanner img{max-height:220px;width:100%;object-fit:contain;justify-self:end}
@media (max-width:860px){.pbanner{grid-template-columns:1fr}.pbanner img{max-height:160px;order:-1;justify-self:center}}
.legend-card{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;padding:12px 16px;margin:0 0 14px;border:1px dashed var(--line-2);border-radius:var(--r2);color:var(--ink-2);background:#fff} .legend-card b{white-space:nowrap} .legend-card span{flex:1;min-width:260px;line-height:var(--lh-text)}
.ccard .cc-h{display:block;font-size:var(--fs-5);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:10px 0 4px;line-height:var(--lh-ui)} .ccard .lvn{font-style:normal;color:var(--muted);margin-right:6px} .ccard .lvn::after{content:" ·"}
.lb{display:inline-block;font-style:normal;font-size:var(--fs-5);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-right:8px;line-height:var(--lh-ui)} .xcard .chips .lb{flex-basis:100%;margin:0}
.info-w{position:relative;display:inline-block;margin-left:8px;vertical-align:middle}
.info{width:24px;height:24px;border-radius:50%;border:1px solid var(--ink);background:#fff;color:var(--ink);font:italic 700 14px/1 var(--font-display);cursor:pointer} .info:hover,.info.on{background:var(--ink);color:#fff}
.info-pop{display:none;position:absolute;z-index:30;left:0;top:30px;width:min(380px,80vw);padding:12px 14px;background:#fff;border:1px solid var(--ink);border-radius:var(--r2);box-shadow:0 18px 30px -22px rgba(0,0,0,.5);color:var(--ink-2);font-size:var(--fs-5);line-height:var(--lh-text);font-weight:400;text-transform:none;letter-spacing:0;font-family:var(--font)} .info.on + .info-pop{display:block}
.card-h .info-w{margin-left:auto}
.tk{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px} .tk li{padding-left:0;color:var(--ink-2)} .tk b{color:var(--ink)}
.pm{--mx:50%;--my:50%;position:relative;height:260px;margin-top:8px;border:1px solid var(--line-2);border-radius:var(--r);background:linear-gradient(to right,transparent calc(var(--mx) - .5px),var(--line-2) calc(var(--mx) - .5px),var(--line-2) calc(var(--mx) + .5px),transparent calc(var(--mx) + .5px)),linear-gradient(to bottom,transparent calc(var(--my) - .5px),var(--line-2) calc(var(--my) - .5px),var(--line-2) calc(var(--my) + .5px),transparent calc(var(--my) + .5px)),#fff;overflow:hidden}
.pm .ax{position:absolute;font-size:var(--fs-5);color:var(--muted);letter-spacing:.06em;text-transform:uppercase;font-weight:700} .pm .ax.x{right:8px;bottom:4px} .pm .ax.y{left:6px;top:4px}
.pm .q{position:absolute;font-size:var(--fs-5);color:var(--line-2);font-weight:700} .pm .q1{right:8px;top:26px} .pm .q2{right:8px;bottom:24px} .pm .q3{left:8px;top:26px} .pm .q4{left:8px;bottom:24px}
.pm i{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--red);border:2px solid #fff;box-shadow:0 0 0 1px var(--red)} .pm i span{display:none;position:absolute;left:14px;top:-4px;white-space:nowrap;font-size:var(--fs-5);font-style:normal;color:var(--ink-2);line-height:1.2;background:rgba(255,255,255,.85);padding:0 4px;border-radius:4px} .pm i.lbl span,.pm i:hover span{display:block} .pm i:hover{z-index:2}
.tblwrap thead th{font-size:var(--fs-5);line-height:var(--lh-ui);vertical-align:bottom;padding:6px 4px;max-width:88px;white-space:normal;hyphens:auto}
.lk-mail textarea{width:100%;font:inherit;font-size:var(--fs-5);line-height:1.5;padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--bg-2);color:var(--ink);resize:vertical}
.lk-note{margin-top:-6px}
.pm i.r span{left:auto;right:14px}
.tblwrap table{min-width:1120px}
.pm i.d span{top:10px}
.card-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}

/* ---------- Stage 2: the assessment, the path, lessons, digital learning ---------- */
.asm-c h3 .chip{vertical-align:middle;margin-left:8px;font-family:var(--font)}
.pl-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:14px} @media (max-width:1100px){.pl-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pl-tile{display:block;position:relative;padding:12px 14px 12px 36px;border:1px solid var(--line-2);border-radius:var(--r2);background:#fff;cursor:pointer;line-height:var(--lh-text)} .pl-tile input{position:absolute;left:12px;top:16px} .pl-tile b{display:block} .pl-tile em{display:inline-block;font-style:normal;font-size:var(--fs-5);color:var(--red);font-weight:700;letter-spacing:.06em;text-transform:uppercase} .pl-tile p{margin:6px 0 0;font-size:var(--fs-5);color:var(--ink-2)}
.pl-tile.exp{border-style:dashed} .pl-tile.on{border-color:var(--ink);background:var(--tint-cream);box-shadow:inset 0 0 0 1px var(--ink)}
.anchors{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.anchor{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line-2);border-radius:var(--r2);background:#fff;cursor:pointer} .anchor input{margin-top:6px} .anchor .n{flex:0 0 32px;height:32px;border-radius:50%;border:1px solid var(--ink);display:grid;place-items:center;font-family:var(--font-display);font-weight:600} .anchor b em{font-style:normal;color:var(--red);font-size:var(--fs-5);letter-spacing:.06em;text-transform:uppercase} .anchor p{margin:4px 0 0;color:var(--ink-2)}
.anchor.exp{border-style:dashed} .anchor.on{border-color:var(--ink);background:var(--tint-cream);box-shadow:inset 0 0 0 1px var(--ink)} .anchor.on .n{background:var(--ink);color:#fff}
.sk{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)} .sk h4{margin:0 0 8px;font-size:var(--fs-4)} .sk-row{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1.3fr);gap:12px;align-items:start;padding:10px 0;border-top:1px dashed var(--line)} .sk-row:first-of-type{border-top:0} .sk-row .chips{justify-content:flex-start} @media (max-width:900px){.sk-row{grid-template-columns:1fr}}
.pathx{display:flex;flex-direction:column;gap:16px}
.pstep{padding:20px 22px;border:1px solid var(--line);border-radius:var(--r2);background:#fff} .pstep.last{background:var(--tint-cream)} .pstep-h{display:flex;gap:14px;align-items:flex-start;margin-bottom:12px} .pstep-h .n{flex:0 0 36px;height:36px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-family:var(--font-display);font-weight:600} .pstep-h h3{margin:2px 0 4px}
.pathx .lessons{display:flex;flex-direction:column;gap:8px} .pathx a.lesson{display:flex;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--r2);text-decoration:none;color:inherit;background:#fff} .pathx a.lesson:hover{border-color:var(--ink)} .pathx a.lesson.on{background:var(--tint-cream)} .pathx a.lesson .tick{flex:0 0 40px;height:28px;border-radius:14px;border:1px solid var(--line-2);display:grid;place-items:center;font-size:var(--fs-5);font-weight:700} .pathx a.lesson.on .tick{background:var(--ink);color:#fff;border-color:var(--ink)} .pathx a.lesson small{display:block;color:var(--muted)}
.dl-list{display:flex;flex-direction:column;gap:8px} .dl-row{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--r2);background:#fff} .dl-row small{display:block;color:var(--muted)}
.dl-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px} .dl-card{display:flex;flex-direction:column;gap:6px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r2);background:#fff} .dl-card .code{font-size:var(--fs-5);color:var(--muted);letter-spacing:.04em;text-transform:uppercase;font-weight:700} .dl-card b{font-family:var(--font-display);font-size:var(--fs-3);font-weight:600;line-height:var(--lh-head)} .dl-card small{color:var(--muted)} .dl-card p{color:var(--ink-2);font-size:var(--fs-5);line-height:var(--lh-text);margin:4px 0 0;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden} .dl-card .chips{margin-top:auto}
.video-ph{aspect-ratio:16/9;border-radius:var(--r2);overflow:hidden;background:var(--ink);color:#fff;display:grid;place-items:center} .video-ph video{width:100%;height:100%} .vph{text-align:center;padding:24px} .vph .play{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;border:2px solid #fff;margin:0 auto 12px} .vph .play svg{width:28px;height:28px;stroke:#fff} .vph b{display:block;font-family:var(--font-display);font-size:var(--fs-3);font-weight:600} .vph small{display:block;color:rgba(255,255,255,.7);margin-top:4px}
.scenes{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px} .scenes li{display:flex;gap:12px;align-items:flex-start;padding:8px 0;border-top:1px dashed var(--line)} .scenes .tc{flex:0 0 44px;font-family:var(--font-display);color:var(--red);font-weight:600} .scenes p{margin:2px 0 0;color:var(--ink-2);font-size:var(--fs-5)}
.lg-seat em.stage{display:block;color:var(--red);font-style:normal;font-weight:700;font-size:var(--fs-5)}
/* ---------- the team's review-site look (27 Oct): cartoon rail icons in a white tile with a red ring, the Cartoon2 tints and rounded corners ---------- */
.rail-ic{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .2s,transform .2s}
.rail-ic img{width:30px;height:30px;object-fit:contain;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.rail-a:hover .rail-ic{box-shadow:inset 0 0 0 1.5px var(--red)}
.rail-a:hover .rail-ic img{transform:scale(1.12) rotate(-4deg)}
.rail-a.active .rail-ic{box-shadow:inset 0 0 0 2px var(--red),0 6px 14px -8px rgba(184,40,29,.6)}
html[data-art="b"]{--tint-cream:#F2CFC9;--tint-sky:#CDDBEE;--tint-sage:#D2DEC5;--r:12px;--r2:18px}

/* ---------- round 6: less on screen, more behind (i); cards; skills grid; collapsible rail; sticky header; back to top ---------- */
.info-w{position:relative;display:inline-block;vertical-align:middle;margin-left:6px}
.info{width:22px;height:22px;border-radius:50%;border:1px solid var(--ink);background:#fff;color:var(--ink);font:italic 700 13px/1 var(--font-display);cursor:pointer;padding:0}
.info:hover,.info.on{background:var(--ink);color:#fff}
.info-pop{display:none;position:absolute;z-index:40;left:0;top:28px;width:min(420px,80vw);padding:12px 14px;background:#fff;border:1px solid var(--ink);border-radius:var(--r2);box-shadow:0 18px 30px -22px rgba(0,0,0,.5);color:var(--ink-2);font:400 var(--fs-5)/var(--lh-text) var(--font);text-transform:none;letter-spacing:0;text-align:left;white-space:normal}
.info.on + .info-pop{display:block}
.field label .info-w{margin-left:4px} .field label .info{width:18px;height:18px;font-size:11px}
.hello p .info-w,.page-h p .info-w,.pbanner p .info-w{vertical-align:baseline}
.stack{display:flex;flex-direction:column;gap:14px}
.mini{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:8px 0 12px} .mini span{display:block;font-size:var(--fs-5);color:var(--muted);line-height:var(--lh-ui)} .mini b{display:block;font-family:var(--font-display);font-size:var(--fs-3);font-weight:600;color:var(--ink);line-height:1.1}
/* competency cards */
.ccard p.def{color:var(--teal,#1F5F5B);font-size:var(--fs-5);line-height:var(--lh-text)}
.page-h p .def{color:var(--teal,#1F5F5B)} .page-h p .src{display:block;color:var(--muted);font-size:var(--fs-5);margin-top:4px}
.ccard .cc-h{font-size:var(--fs-5);font-weight:600;letter-spacing:0;text-transform:none;color:var(--muted);margin:8px 0 2px}
.ws-list{list-style:none;margin:0;padding:8px 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.ws-list li{display:flex;gap:10px;align-items:flex-start;color:var(--ink)} .ws-list li b{font-family:var(--font);font-size:var(--fs-4);font-weight:600;line-height:var(--lh-ui)} .ws-list li small{display:block;color:var(--muted)}
.num{flex:none;display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;font-style:normal;font-size:13px;font-weight:700;line-height:1;margin-top:2px}
.sk-mini{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:2px;color:var(--ink-2);font-size:var(--fs-5)} .sk-mini span{display:inline-block;min-width:30px;color:var(--muted);font-weight:700}
/* the skills grid on the competency page */
.sgrid{display:grid;grid-template-columns:150px repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
.sg-head{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1px solid var(--line-2);border-radius:var(--r2);background:#fff;color:inherit;text-decoration:none} .sg-head b{font-family:var(--font-display);font-size:var(--fs-4);font-weight:600} .sg-head small{color:var(--muted)} .sg-head .num{margin-bottom:4px}
.sg-head.cur{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.sg-path{display:flex;flex-direction:column;justify-content:center;padding:10px 12px;border-radius:var(--r2);background:var(--tint-cream)} .sg-path b{font-family:var(--font-display);font-size:var(--fs-3);font-weight:600;line-height:1} .sg-path small{color:var(--ink-2);line-height:var(--lh-ui)}
.sg-cell{padding:10px 12px;border:1px solid var(--line);border-radius:var(--r2);background:#fff;color:var(--ink);line-height:var(--lh-ui)} .sg-cell span{display:block;font-size:var(--fs-5);color:var(--red);font-weight:700;letter-spacing:.06em;margin-bottom:2px}
.sg-cell.cur{background:var(--tint-paper);border-color:var(--ink)}
@media (max-width:860px){.sgrid{grid-template-columns:1fr}.sg-corner{display:none}}
details.more summary{cursor:pointer;font-weight:600;color:var(--ink);padding:8px 0} details.more summary::marker{color:var(--red)} details.more .grid{margin-top:10px}
/* collapsible rail */
.rail-toggle{position:absolute;right:-14px;top:18px;width:28px;height:28px;border-radius:50%;border:1px solid var(--line-2);background:#fff;display:grid;place-items:center;cursor:pointer;z-index:6;box-shadow:0 4px 10px -6px rgba(0,0,0,.4)} .rail-toggle svg{width:14px;height:14px;transform:rotate(180deg);transition:transform .2s}
#rail{position:sticky;overflow:visible} #rail > *:not(.rail-toggle){min-width:0}
body.rail-min #app{grid-template-columns:74px minmax(0,1fr)} body.rail-min .rail-toggle svg{transform:none}
body.rail-min .tenant span,body.rail-min .rail-h,body.rail-min .rail-a > span:last-child,body.rail-min .me span:last-child,body.rail-min .rail-row .lang,body.rail-min #signout span,body.rail-min .powered small{display:none}
body.rail-min .rail-a{justify-content:center;padding:8px 0} body.rail-min .tenant{justify-content:center;padding:8px} body.rail-min #rail .brand img{max-width:44px} body.rail-min .rail-row{justify-content:center} body.rail-min .me{justify-content:center}
body.rail-min #main{max-width:1320px}
@media (max-width:980px){.rail-toggle{display:none}}
/* sticky page header, compact when it sticks */
#main .page-h{position:sticky;top:0;z-index:5;background:var(--bg);transition:padding .15s}
#main .page-h.stuck{padding:8px 0 8px;margin-bottom:14px} #main .page-h.stuck p,#main .page-h.stuck .kicker{display:none} #main .page-h.stuck h1{font-size:var(--fs-3)} #main .page-h.stuck h1 .alt{display:none}
.totop{position:fixed;right:22px;bottom:22px;width:42px;height:42px;border-radius:50%;background:var(--ink);color:#fff;border:0;display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .2s;z-index:30;cursor:pointer;box-shadow:0 10px 20px -12px rgba(0,0,0,.6)} .totop svg{width:18px;height:18px;transform:rotate(-90deg);stroke:#fff} .totop.on{opacity:1;pointer-events:auto}

/* ---------- round 7: user block on top of the rail, banners with actions, calls to action, Virtual Lab cards, label fix ---------- */
.rail-user{display:flex;flex-direction:column;gap:8px;padding:10px;border:1px solid var(--line);border-radius:var(--r2);background:#fff}
.rail-user .me b{font-size:var(--fs-4)} .rail-user .rail-row{justify-content:space-between}
body.rail-min .rail-user{padding:6px;align-items:center} body.rail-min .rail-user .rail-row{flex-direction:column;gap:6px} body.rail-min #signout{padding:6px;width:34px;justify-content:center} body.rail-min #signout span{display:none}
.rail-foot{margin-top:auto;gap:8px}
.sec-n{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:var(--fs-3);margin:28px 0 12px} .sec-n .n{display:inline-grid;place-items:center;min-width:34px;height:34px;padding:0 8px;border-radius:999px;border:1px solid var(--ink);font-family:var(--font-display);font-weight:600;font-size:var(--fs-4)} .sec-n .fine{font-weight:400;font-family:var(--font)}
.pbanner .acts{display:flex;gap:8px;flex-wrap:wrap} .pbanner .acts.mt{margin-top:14px}
.cta-card{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:22px 26px;border-radius:var(--r2);background:var(--ink);color:#fff} .cta-card .kicker,.cta-card .fine{color:rgba(255,255,255,.72)} .cta-card h3{color:#fff;margin:4px 0} .cta-card .btn{background:#fff;color:var(--ink);border-color:#fff}
.co-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px} .co-card .who .pic{width:72px;height:72px;border-radius:50%;object-fit:cover;object-position:top center} .co-card p{margin:6px 0 0} @media (max-width:900px){.co-cards{grid-template-columns:1fr}}
.xcard .meta span{align-items:flex-start} .xcard .meta .lb,.xcard .chips .lb{flex:none;white-space:nowrap;min-width:72px}
body.public .lab-month{margin:14px 0 6px;font-size:var(--fs-4)} body.public .check small{display:block;color:var(--muted);font-weight:400}
body.public .labs{display:flex;flex-direction:column;gap:10px} body.public .lab{grid-template-columns:56px minmax(0,1fr) auto;align-items:center} body.public .lab h3{font-size:var(--fs-4)}
/* ---------- format sweep (28 Oct): nothing wider than its column at tablet widths ---------- */
.tblwrap{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
.xcards{grid-template-columns:repeat(auto-fill,minmax(270px,1fr))} .xcard,.xcard .who,.xcard .who span{min-width:0} .xcard .who b,.xcard b{overflow-wrap:anywhere} .xcard .chips,.xcard .foot{flex-wrap:wrap;min-width:0}
.mods{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))} .mod b,.sg-head b,.sg-cell,.glance b,.prow b{overflow-wrap:anywhere;min-width:0}
.lab{min-width:0} .lab > div{min-width:0} .lab .row{flex-wrap:wrap}
@media (max-width:1180px){.lab{grid-template-columns:76px 96px minmax(0,1fr)} .lab .lab-acts{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap;justify-content:flex-start} .lab-acts .btn{justify-content:flex-start}}
.xm{min-width:0;overflow-wrap:anywhere}
.ccards{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))} .ccard{min-width:0} .ws-list li div{min-width:0}
table.heat th,table.heat td{white-space:normal;overflow-wrap:anywhere} .jcell{overflow-wrap:anywhere;min-width:0} .tile .l{overflow-wrap:anywhere}
@media (max-width:1100px){.g3{grid-template-columns:1fr 1fr}} @media (max-width:760px){.g3{grid-template-columns:1fr}}
@media (min-width:1181px){.lab{grid-template-columns:76px 96px minmax(0,1fr) max-content} .lab-acts{min-width:190px}} .tblwrap th{overflow-wrap:anywhere}

/* ---------- round 8: the 180-degree assessment table; one spacing scale ---------- */
.asm-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
table.asm-t{width:100%;border-collapse:collapse} table.asm-t th,table.asm-t td{text-align:left;vertical-align:top;padding:12px 10px;border-bottom:1px solid var(--line)} table.asm-t thead th{font-size:var(--fs-5);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--ink);padding-top:0}
table.asm-t th[scope=row]{width:34%;font-weight:400} table.asm-t th[scope=row] b{display:block;font-family:var(--font-display);font-size:var(--fs-4);font-weight:600;line-height:var(--lh-head)} table.asm-t th[scope=row] small{display:block;color:var(--muted);font-size:var(--fs-5);margin:2px 0 4px}
.linkish{background:none;border:0;padding:0;color:var(--red);font-size:var(--fs-5);font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
table.asm-t .selfv{color:var(--ink-2);white-space:nowrap}
.chips.lvl .chip.exp{box-shadow:inset 0 0 0 1px var(--red)} .chips.lvl .chip.on.exp{box-shadow:none} .chips.lvl .chip small{font-weight:400;opacity:.8;margin-left:4px}
tr.asm-more td{background:var(--tint-paper);padding:14px 16px} tr.asm-more p.def{color:var(--teal,#1F5F5B);margin:0 0 10px;line-height:var(--lh-text)}
.pls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px;margin:0} .pls div{padding:8px 10px;border:1px solid var(--line);border-radius:var(--r);background:#fff} .pls div.exp{border-color:var(--red)} .pls dt{font-weight:700;font-size:var(--fs-5)} .pls dt em{font-style:normal;color:var(--red);font-size:var(--fs-5);margin-left:6px} .pls dd{margin:4px 0 0;color:var(--ink-2);font-size:var(--fs-5);line-height:var(--lh-text)} @media (max-width:900px){.pls{grid-template-columns:1fr}}
tr.asm-skills td{padding:10px 10px 14px 24px;background:#fff} .sk-h{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:var(--fs-5);color:var(--ink-2)} .sk-h b{color:var(--ink)}
table.sk-t{width:100%;border-collapse:collapse} table.sk-t th,table.sk-t td{padding:8px 8px 8px 0;border-bottom:1px dashed var(--line);vertical-align:middle;font-weight:400} table.sk-t thead th{font-size:var(--fs-5);color:var(--muted);text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--line-2)} table.sk-t tbody th{width:40%;color:var(--ink)} table.sk-t .chips{flex-wrap:wrap}
table.r180 td small{display:block;color:var(--muted);font-size:var(--fs-5)}
/* one spacing scale: 16px between boxes in a grid or a stack, 24px between sections, text line height on every running line */
.grid{gap:16px} .stack{gap:16px} .mt{margin-top:24px} #main > .card + .card,#main > .card + .grid,#main > .grid + .card{margin-top:16px}
.card p,.tile .l,.fine,.hello p,.pbanner p,.next p,.mod p,.why p,.dl-card p,.lab p,.xcard p{line-height:var(--lh-text)} .card p + p{margin-top:6px} .card-h{margin-bottom:12px}
.hello,.pbanner{margin-bottom:24px} .filters{margin-bottom:16px} .ccards,.dl-cards,.xcards,.co-cards{gap:16px}
/* the manager's 180° form needs the full width: the verify card goes under it */
.asm-grid{grid-template-columns:1fr} table.asm-t{min-width:720px} table.asm-t th[scope=row] b{overflow-wrap:normal;word-break:normal}
/* ---------- the collapsed rail: the square IRIS LEARN mark instead of the squeezed wordmark, centered icons, section separators ---------- */
.brand-mark{display:none} body.rail-min .brand-logo{display:none} body.rail-min .brand-mark{display:block;width:38px;height:38px;margin:0 auto;border-radius:10px}
body.rail-min #rail{padding:16px 8px} body.rail-min #rail .brand{display:flex;justify-content:center;padding:0}
body.rail-min .tenant{padding:6px;border-radius:12px} body.rail-min .tenant img{height:26px}
body.rail-min .rail-user{gap:6px} body.rail-min .rail-user .me .avatar{width:34px;height:34px}
body.rail-min .rail-sec + .rail-sec{border-top:1px solid var(--line);padding-top:8px;margin-top:4px}
body.rail-min .rail-a{padding:6px 0} body.rail-min .rail-ic{width:40px;height:40px}
body.rail-min .rail-foot .powered{justify-content:center} body.rail-min .powered img{height:14px}

/* ---------- round 9: the rail scrolls on its own; the toggle sits beside it; banner pages keep a slim bar frozen ---------- */
#rail{position:sticky;top:0;height:100vh;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
#rail::-webkit-scrollbar{display:block;width:6px} #rail::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:3px}
.rail-toggle{position:fixed;left:258px;top:18px;right:auto;z-index:40} body.rail-min .rail-toggle{left:60px}
@media (max-width:980px){.rail-toggle{display:none}}
.stick-bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 0;margin:-12px 0 16px;background:var(--bg);border-bottom:1px solid var(--ink)}
.stick-bar[hidden]{display:none} .stick-bar b{font-family:var(--font-display);font-size:var(--fs-3);font-weight:600;line-height:var(--lh-head)} .stick-bar .acts{display:flex;gap:8px;flex-wrap:wrap;margin:0}
/* ---------- review site (28 Oct): pill buttons everywhere, rail labels tighter ---------- */
html[data-art="b"] .btn,.btn{border-radius:999px;padding-left:20px;padding-right:20px} .btn.sm{padding-left:16px;padding-right:16px}
.rail-a > span:last-child{display:flex;flex-direction:column;gap:0;padding-top:2px} .rail-a small{margin-top:-2px;line-height:1.3}

/* ---------- round 10: gap chart, LMS course cards, the watch page, a compact rail ---------- */
.gp-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:12px}
.gp-legend{display:flex;gap:18px;flex-wrap:wrap;font-size:var(--fs-5);color:var(--ink-2);margin:4px 0 10px} .gp-legend i{display:inline-block;vertical-align:middle;margin-right:6px} .k-self{width:8px;height:18px;background:var(--ink);border-radius:2px} .k-mgr{width:16px;height:16px;border-radius:50%;background:var(--red)} .k-exp{width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:14px solid var(--teal,#1F5F5B)}
.gp-list{list-style:none;margin:0 0 6px;padding:0} .gp-row{display:grid;grid-template-columns:minmax(0,1.1fr) 320px 150px;gap:16px;align-items:center;padding:8px 0;border-top:1px solid var(--line)} .gp-row:first-child{border-top:0}
.gp-lab b{display:block;font-family:var(--font-display);font-size:var(--fs-4);font-weight:600;line-height:var(--lh-head)} .gp-lab small{display:block;color:var(--muted);font-size:var(--fs-5)}
.gp{width:320px;height:58px;display:block} .gp-band{fill:var(--bg-2)} .gp-band.odd{fill:var(--tint-paper)} .gp-line{stroke:var(--line-2);stroke-width:1} .gp-t{font-size:11px;fill:var(--muted);font-family:var(--font)} .gp-self{fill:var(--ink)} .gp-mgr{fill:var(--red);stroke:#fff;stroke-width:2} .gp-exp{fill:var(--teal,#1F5F5B)}
.gp-gap small{display:block;color:var(--muted);font-size:var(--fs-5);margin-top:2px} .gp-row.below .gp-lab b{color:var(--red-dark,#931D14)}
@media (max-width:980px){.gp-row{grid-template-columns:1fr} .gp{width:100%;height:auto} .gp-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.lms-strip{display:grid;grid-template-columns:repeat(3,auto) minmax(160px,1fr);gap:24px;align-items:center;padding:14px 20px;border:1px solid var(--line);border-radius:var(--r2);background:#fff;margin-bottom:8px} .lms-strip b{display:block;font-family:var(--font-display);font-size:var(--fs-3);font-weight:600;line-height:1} .lms-strip small{display:block;color:var(--muted);font-size:var(--fs-5);margin-top:4px}
.lms-sec{margin-top:8px} .course-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.course-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r2);background:#fff;overflow:hidden} .course-card:hover{border-color:var(--ink)}
.cc-cover{position:relative;height:120px;display:grid;place-items:center;background:var(--tint-sky)} .cc-cover.micro{background:var(--tint-cream)} .cc-cover.ws{background:var(--tint-sage)} .cc-cover.el{background:linear-gradient(135deg,#1F5F5B,#0f3b38)} .cc-cover img{height:72px;width:72px;object-fit:contain} .cc-ini{font-family:var(--font-display);font-size:40px;font-weight:600;color:#fff;letter-spacing:.04em}
.cc-kind{position:absolute;left:12px;top:12px;padding:3px 10px;border-radius:999px;background:#fff;font-size:var(--fs-5);font-weight:700;color:var(--ink)}
.cc-body{display:flex;flex-direction:column;gap:6px;padding:14px 16px 16px;flex:1} .cc-body > b{font-family:var(--font-display);font-size:var(--fs-3);font-weight:600;line-height:var(--lh-head)} .cc-body > small{color:var(--muted);font-size:var(--fs-5)} .cc-body .bar{margin-top:auto} .cc-body .row.sp{margin-top:6px}
.cc-list{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:4px} .cc-list li a{display:flex;gap:6px;align-items:center;color:var(--ink-2);font-size:var(--fs-5)} .cc-list li.done a{color:var(--green)} .cc-list svg{width:14px;height:14px}
.wt-crumb{display:flex;align-items:center;gap:8px;font-size:var(--fs-5);color:var(--muted);margin-bottom:12px;flex-wrap:wrap} .wt-crumb b{color:var(--ink)}
.wt-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.8fr);gap:20px;align-items:start} @media (max-width:980px){.wt-grid{grid-template-columns:1fr}}
.wt-main{border:1px solid var(--line);border-radius:var(--r2);background:#fff;overflow:hidden}
.wt-stage{background:#111;aspect-ratio:16/9;display:grid;place-items:center} .wt-video{width:100%;height:100%;display:block;background:#000} .wt-stage.ph{background:radial-gradient(90% 80% at 60% 25%,#2a0a10,#111 70%);color:#fff;text-align:center;padding:24px} .wt-stage.ph .play{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--red);margin:0 auto 12px} .wt-stage.ph .play svg{width:28px;height:28px;stroke:#fff} .wt-stage.ph b{display:block;font-family:var(--font-display);font-size:var(--fs-3);font-weight:600} .wt-stage.ph small{display:block;color:rgba(255,255,255,.7);margin-top:4px}
.wt-bar{height:5px;background:var(--bg-3)} .wt-bar i{display:block;height:100%;background:var(--red);transition:width .2s}
.wt-ctl{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap} .wt-ctl > b{font-family:var(--font-display);font-size:var(--fs-4);font-weight:600} .wt-sp{flex:1}
.wt-tabs{display:flex;gap:2px;padding:0 16px;border-bottom:1px solid var(--line);overflow-x:auto} .wt-tab{padding:11px 14px;font-size:var(--fs-5);font-weight:700;color:var(--ink-2);border:0;background:none;border-bottom:3px solid transparent;white-space:nowrap;cursor:pointer} .wt-tab.on{color:var(--ink);border-bottom-color:var(--red)}
.wt-panel{padding:16px} .wt-ov{display:grid;grid-template-columns:1.4fr 1fr;gap:18px} @media (max-width:760px){.wt-ov{grid-template-columns:1fr}}
.mini-h{margin:0 0 6px;font-size:var(--fs-5);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} .wt-ov p + .mini-h{margin-top:14px}
.wt-meta{display:flex;flex-direction:column;gap:9px;border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;background:var(--bg-2);align-self:start} .wt-meta i{display:block;font-style:normal;font-size:var(--fs-5);color:var(--muted)} .wt-meta b{display:block;font-weight:600;line-height:var(--lh-ui)}
.wt-points{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;color:var(--ink)}
.wt-list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:4px} .wt-list a{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:var(--r);color:var(--ink-2)} .wt-list li.cur a{background:var(--tint-cream);color:var(--ink)} .wt-list a:hover{background:var(--bg-2)} .wt-list b{display:block;font-weight:600;line-height:var(--lh-ui)} .wt-list small{display:block;color:var(--muted);font-size:var(--fs-5)}
.wt-n{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1px solid var(--line-2);color:var(--muted);font-weight:600;font-size:var(--fs-5)} .wt-list li.cur .wt-n{border-color:var(--red);color:var(--red)} .wt-list li.done .wt-n{background:var(--green);border-color:var(--green);color:#fff} .wt-n svg{width:14px;height:14px;stroke:#fff}
/* the rail fits a 768px-high window without scrolling; it still scrolls when it must */
#rail{padding:16px 14px 14px;gap:12px} .rail-user{padding:8px 10px;gap:6px} .rail-user .me b{font-size:var(--fs-5)} .tenant{padding:8px 10px} .tenant img{height:26px} .rail-h{margin-bottom:2px} .rail-a{padding:5px 8px;gap:8px} .rail-ic{width:34px;height:34px;border-radius:10px} .rail-ic img{width:26px;height:26px} .rail-a small{font-size:13px;line-height:1.25} .rail-sec{gap:1px} .rail-foot{gap:6px}

/* ---------- round 11: LMS status, flagship programs, course page ---------- */
.cc-st{position:absolute;right:12px;top:12px;padding:3px 10px;border-radius:999px;background:var(--ink);color:#fff;font-size:var(--fs-5);font-weight:700;display:inline-flex;align-items:center;gap:4px} .cc-st.done{background:var(--green)} .cc-st svg{width:12px;height:12px;stroke:#fff}
.lms-strip .seg{justify-self:end}
.prog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-top:12px}
.prog-card{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r2);background:#fff} .prog-card .num{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;font-family:var(--font-display);font-weight:600} .prog-card .kicker{margin-bottom:2px} .prog-card b{display:block;font-family:var(--font-display);font-size:var(--fs-3);font-weight:600;line-height:var(--lh-head)} .prog-card p{margin:6px 0 4px;color:var(--ink-2)} .prog-card small{color:var(--muted);font-size:var(--fs-5)}
table.fam th[scope=row]{white-space:nowrap} table.fam td{font-size:var(--fs-5)}
.wt-stage.ph.el{background:linear-gradient(135deg,#1F5F5B,#0f3b38)} .wt-stage.ph.el .cc-ini{font-size:56px;margin-bottom:8px}
.chip.red{background:var(--red-soft);color:var(--red-dark,#931D14)}

/* ---------- round 12: the top banner, the journey home, rail steps, the profile page ---------- */
#topbar{position:sticky;top:0;z-index:60;height:64px;display:flex;align-items:center;gap:16px;padding:0 20px;background:#fff;border-bottom:1px solid var(--line)}
#topbar .brand-logo{height:36px} .tb-portal{font-size:var(--fs-5);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-left:16px;border-left:1px solid var(--line)}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:14px} .tb-right .me b{font-size:var(--fs-4)} .tb-right .me small{font-size:var(--fs-5)}
#rail{top:64px;height:calc(100vh - 64px)} #main .page-h{top:64px} .stick-bar{top:64px} .rail-toggle{top:82px}
@media (max-width:980px){#topbar{height:auto;flex-wrap:wrap;padding:10px 16px} .tb-right{margin-left:0;width:100%;justify-content:space-between} #rail{top:auto;height:auto}}
.rail-ic.num{font-family:var(--font-display);font-weight:600;font-size:var(--fs-4);color:var(--ink)} .rail-ic.num.now{box-shadow:inset 0 0 0 2px var(--red);color:var(--red)} .rail-ic.num.done{background:var(--green);color:#fff;box-shadow:none} .rail-ic.num.done svg{width:16px;height:16px;stroke:#fff}
.page-h.jh{align-items:center} .home-prog{display:flex;align-items:center;gap:12px} .home-prog b,.home-prog small{display:block} .home-prog small{color:var(--muted);font-size:var(--fs-5)}
.ring{width:64px;height:64px;transform:rotate(-90deg)} .ring-bg{fill:none;stroke:var(--bg-3);stroke-width:6} .ring-fg{fill:none;stroke:var(--red);stroke-width:6;stroke-linecap:round;transition:stroke-dashoffset .4s} .ring text{transform:rotate(90deg);transform-origin:32px 32px;font-size:14px;font-weight:700;fill:var(--ink);font-family:var(--font)}
.nexthero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:center;gap:16px;border-radius:var(--r2);overflow:hidden;min-height:220px;margin-bottom:20px;background:var(--tint-cream);border:1px solid var(--line)} .nexthero-main{padding:28px 12px 28px 32px} .nexthero h2{font-size:clamp(26px,2.6vw,36px);line-height:1.08;margin:4px 0 8px} .nexthero p{color:var(--ink-2);margin-bottom:16px;max-width:520px} .nexthero-art{height:220px;display:grid;place-items:center;padding:12px 20px} .nexthero-art img{max-height:200px;width:100%;object-fit:contain}
@media (max-width:860px){.nexthero{grid-template-columns:1fr} .nexthero-art{height:160px;order:-1} .nexthero-main{padding:8px 22px 24px}}
.hm-journey{margin-bottom:20px} .journey{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;list-style:none;margin:12px 0 0;padding:0} .journey.n7{grid-template-columns:repeat(7,minmax(0,1fr))} @media (max-width:1240px){.journey.n7{grid-template-columns:repeat(4,minmax(0,1fr))}} @media (max-width:760px){.journey,.journey.n7{grid-template-columns:repeat(2,minmax(0,1fr))}}
.jr a{display:flex;flex-direction:column;height:100%;border-radius:var(--r2);overflow:hidden;border:1px solid var(--line);background:#fff;color:inherit;text-decoration:none;transition:border-color .15s} .jr a:hover{border-color:var(--ink)} .jr.is-now a{border-color:var(--red)} .jr.is-locked a{opacity:.7}
.jr-art{position:relative;aspect-ratio:16/10;display:grid;place-items:center;background:var(--tint-paper)} .jr-art img{width:56px;height:56px;object-fit:contain} .jr-n{position:absolute;left:8px;top:8px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#fff;color:var(--ink);font-weight:700;font-size:13px;box-shadow:inset 0 0 0 1.5px var(--ink)} .jr.is-now .jr-n{background:var(--red);color:#fff;box-shadow:none} .jr.is-done .jr-n{background:var(--green);color:#fff;box-shadow:none} .jr-n svg{width:14px;height:14px;stroke:#fff}
.jr-txt{padding:12px 12px 14px;display:flex;flex-direction:column;gap:5px;flex:1;border-top:1px solid var(--line)} .jr-txt h3{font-family:var(--font-display);font-size:var(--fs-4);font-weight:600;line-height:var(--lh-head)} .jr-txt em{font-style:italic;font-family:var(--font-display);font-size:var(--fs-5);color:var(--ink-2)} .jr-txt p{font-size:var(--fs-5);color:var(--ink-2);line-height:var(--lh-text);margin:0;flex:1} .jr-txt .st{align-self:flex-start}
.kv{margin:0;display:flex;flex-direction:column;gap:8px} .kv div{display:grid;grid-template-columns:130px minmax(0,1fr);gap:10px;padding:6px 0;border-bottom:1px dashed var(--line)} .kv dt{color:var(--muted);font-size:var(--fs-5)} .kv dd{margin:0} .kv dd small{display:block;color:var(--muted);font-size:var(--fs-5)}

/* ---------- round 13: the side banner like the Learn Suite; no top banner ---------- */
#topbar{display:none} #rail{top:0;height:100vh} #main .page-h{top:0} .stick-bar{top:0} .rail-toggle{top:18px}
#rail .brand{display:flex;align-items:center;padding:0 2px 10px;border-bottom:1px solid var(--line)}
.portal-chip{display:inline-block;align-self:flex-start;padding:4px 10px;border-radius:999px;background:var(--tint-cream);color:var(--red-dark,#931D14);font-size:var(--fs-5);font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.user-dd{position:relative} .user-dd summary{list-style:none;display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line-2);border-radius:var(--r2);background:#fff;cursor:pointer} .user-dd summary::-webkit-details-marker{display:none} .user-dd .who{flex:1;min-width:0} .user-dd .who b{display:block;font-size:var(--fs-4);line-height:var(--lh-ui)} .user-dd .who small{display:block;color:var(--muted);font-size:var(--fs-5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .user-dd summary > svg{width:14px;height:14px;transform:rotate(90deg);flex:none;color:var(--muted)} .user-dd[open] summary > svg{transform:rotate(-90deg)}
.user-dd .dd{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:20;padding:12px;border:1px solid var(--line-2);border-radius:var(--r2);background:#fff;box-shadow:0 18px 30px -22px rgba(0,0,0,.5)} .user-dd .dd p{margin:0 0 10px}
.rail-lang{align-self:flex-start}
.rail-ic.num{width:30px;height:30px;border-radius:50%;background:transparent;box-shadow:inset 0 0 0 1.5px var(--line-2);color:var(--muted);font-size:var(--fs-5)} .rail-ic.num.now{box-shadow:inset 0 0 0 2px var(--red);color:var(--red)} .rail-ic.num.done{background:var(--ink);box-shadow:none;color:#fff}
body.rail-min .portal-chip{padding:4px 6px;font-size:10px;letter-spacing:.04em} body.rail-min .user-dd summary{padding:6px;justify-content:center} body.rail-min .user-dd .who,body.rail-min .user-dd summary > svg{display:none} body.rail-min .rail-lang{align-self:center} body.rail-min .rail-lang button{padding:4px 6px}

/* round 13b: the collapsed side banner */
body.rail-min .portal-chip{display:none} body.rail-min .user-dd .dd{left:0;right:auto;width:220px} body.rail-min .user-dd .dd p{display:none}
body.rail-min #rail .brand{justify-content:center;padding:0 0 10px}

/* ---------- round 14: frozen header without jumps; HR home sections 02 and 03 ---------- */
.stick-wrap{position:sticky;top:0;height:0;z-index:6;margin:0;overflow:visible} .stick-wrap .stick-bar{position:absolute;left:0;right:0;top:0;margin:0}
#main .page-h{transition:none}
.stages-next .sec-n{margin-top:0} .stage-next .tag{font-family:var(--font-display);font-style:italic;font-size:var(--fs-3);line-height:var(--lh-head);margin:0 0 6px} .stage-next > p{margin:0 0 10px} .st-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .stage-next .prow{padding:8px 0} .stage-next .grid.g3{margin-bottom:4px}
@media (max-width:1100px){.stages-next{grid-template-columns:1fr}}

/* round 15: the passport's three records */
table.pp thead th small{display:block;margin-top:2px;text-transform:none;letter-spacing:0;font-weight:400;color:var(--muted)} .pp-sub{display:block;margin-top:4px;font-size:var(--fs-5);color:var(--muted);line-height:var(--lh-ui)}

/* ---------- round 17: competency cards share row lines; heatmaps read like a dashboard ---------- */
/* the six parts of a card (code, name, crumb, definition, workshops line, list) sit on shared rows across the grid, so the lists start level */
@supports (grid-template-rows: subgrid) {
  .ccards{row-gap:12px}
  .ccards > .ccard{display:grid;grid-template-rows:subgrid;grid-row:span 6;row-gap:6px;align-content:start}
  .ccards > .ccard > *{min-width:0}
  .ccards > .ccard ol{align-self:start}
}
@supports not (grid-template-rows: subgrid) {
  .ccard b{min-height:calc(2 * var(--fs-3) * var(--lh-head))} .ccard p.def{min-height:calc(4 * var(--fs-5) * var(--lh-text))}
}
/* heatmap: words never break mid-word, the label column is wide and stays put when the table scrolls, cells are compact */
table.heat{table-layout:auto;min-width:0;width:100%}
table.heat th,table.heat td{white-space:normal;overflow-wrap:normal;word-break:keep-all;hyphens:none}
table.heat thead th{vertical-align:bottom;min-width:72px;padding:6px 6px 8px;line-height:var(--lh-ui)}
table.heat thead th:first-child,table.heat tbody th{text-align:left;width:auto;min-width:170px;position:sticky;left:0;z-index:1;background:#fff;padding-right:14px}
table.heat tbody th{font-size:var(--fs-4);line-height:var(--lh-ui)}
table.heat td{min-width:56px;padding:6px 3px}
table.heat td span{min-height:32px;padding:7px 0}
table.heat thead th:last-child,table.heat td.tot{padding-left:10px}
.tblwrap table.heat th{overflow-wrap:normal}
table.heat thead th:first-child,table.heat tbody th{width:210px;max-width:230px}
.tblwrap th,table.ft thead th{overflow-wrap:normal;word-break:keep-all;hyphens:none}
table.ft.res td small{display:block;margin-top:2px;font-size:var(--fs-5);color:var(--muted);line-height:var(--lh-ui)} table.ft.res td .chip + small{margin-top:4px}
table.ft.res thead th{letter-spacing:.04em;padding-right:10px}

/* round 19: meets / exceeds / below on passport rows */
.pp-st{display:block;margin-top:4px;font-size:var(--fs-5);font-weight:600;line-height:var(--lh-ui)} .pp-st.ok,.pp-st.up{color:#1E7B4F} .pp-st.dn{color:var(--red-dark,#931D14)}
.passport{min-width:0;overflow-x:auto} .passport table.pp{min-width:420px}

/* round 21: three expert cards per row */
.xcards{grid-template-columns:repeat(3,minmax(0,1fr))} @media (max-width:1100px){.xcards{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:720px){.xcards{grid-template-columns:1fr}}
.xcard .chips .chip{white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}

/* round 22: passport = definitions on top, interventions list, manager score; IRIS mark when the rail is collapsed */
.pp-defs ul.list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 18px;margin-top:8px} .pp-defs ul.list li{margin:0} @media (max-width:900px){.pp-defs ul.list{grid-template-columns:1fr}}
.pp-done{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px} .pp-done li{line-height:var(--lh-ui)} .pp-done li small{display:inline-block;margin-right:6px;padding:1px 7px;border-radius:999px;background:var(--bg-3);color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.passport .pp-h{margin-bottom:6px} table.pp td{vertical-align:top}
body.rail-min .brand-mark{width:46px;height:auto;border-radius:0;margin:4px auto}

/* ---------- round 23: workshop days, applied entries, KPI table, the demo panel ---------- */
.ws-days{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:12px 0} @media (max-width:900px){.ws-days{grid-template-columns:1fr}}
.ws-day{padding:14px 16px;border:1px solid var(--line);border-radius:var(--r2);background:var(--tint-paper)} .ws-day.done{border-color:var(--ink)} .ws-day .lb{display:block;margin-bottom:4px} .ws-day b{display:block;font-family:var(--font-display);font-size:var(--fs-4);line-height:var(--lh-head)} .ws-day p{margin:6px 0 10px;color:var(--ink-2)} .ws-day .ws-st{margin:10px 0 0;display:flex;align-items:center;gap:6px} .ws-day .ws-st svg{width:14px;height:14px}
.ap-list{display:flex;flex-direction:column;gap:10px;margin-top:10px} .ap-item{padding:12px 14px;border:1px solid var(--line);border-radius:var(--r2);background:#fff} .ap-item small{display:block;color:var(--muted);font-size:var(--fs-5);margin-bottom:4px} .ap-item b{display:block;line-height:var(--lh-ui)} .ap-item p{margin:4px 0 0;color:var(--ink-2)}
table.kpi th[scope=row]{white-space:nowrap}
#demo-open{position:fixed;left:14px;bottom:16px;z-index:60;display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:999px;background:var(--ink);color:#fff;border:1px solid var(--ink);font-weight:700;font-size:var(--fs-5);cursor:pointer} #demo-open i{width:8px;height:8px;border-radius:50%;background:var(--red);flex:none} #demo-open.on{background:#fff;color:var(--ink)}
#demo-panel{display:none} #demo-panel.on{display:flex;flex-direction:column;position:fixed;left:14px;bottom:60px;z-index:60;width:360px;max-width:calc(100vw - 28px);max-height:calc(100vh - 90px);overflow:auto;background:#fff;border:1px solid var(--ink);border-radius:var(--r2);box-shadow:0 20px 40px -24px rgba(0,0,0,.5)}
#demo-panel .dp-h{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)} #demo-panel .dp-h b{font-family:var(--font-display);font-size:var(--fs-4)} #demo-panel .dp-h span{flex:1;font-size:var(--fs-5);color:var(--muted)} #demo-panel .dp-x{border:0;background:none;font-size:22px;line-height:1;cursor:pointer;color:var(--ink-2)}
#demo-panel .dp-b{display:flex;flex-direction:column;gap:8px;padding:12px 14px} #demo-panel .dp-b .btn{justify-content:flex-start;text-align:left;white-space:normal}
body.rail-min #demo-open{left:14px}

/* ---------- round 24: pictures on the learner home and the course cards ---------- */
.nexthero-art.grow{display:grid;place-items:center;padding:14px 18px;height:100%} .nexthero-art.grow img{max-height:200px;width:auto;max-width:100%;object-fit:contain}
.jr-art.grow{background:var(--tint-cream);padding:10px} .jr-art.grow img{width:100%;height:100%;object-fit:contain}
.cc-cover.pic{height:150px;padding:0;overflow:hidden} .cc-cover.pic .cc-pic{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .cc-cover.pic .cc-kind,.cc-cover.pic .cc-st{position:relative;z-index:1}
.wt-stage.ph.el.pic{background-size:cover;background-position:center}
#demo-open{left:auto;right:72px} #demo-panel.on{left:auto;right:18px} body.rail-min #demo-open{left:auto}
.jr-art.grow{aspect-ratio:3/2;padding:8px} .jr-art.grow img{width:100%;height:100%;object-fit:contain}

/* ---------- round 25: one picture frame for every banner and home hero; firmer boxes ---------- */
.pbanner{grid-template-columns:minmax(0,1fr) 340px} .pbanner img{height:200px;width:100%;max-height:none;object-fit:contain;object-position:center}
.hello{grid-template-columns:minmax(0,1fr) 340px} .hello img{height:200px;max-height:none;object-fit:contain;object-position:center}
.nexthero{grid-template-columns:minmax(0,1fr) 340px} .nexthero-art.grow{height:220px;padding:10px 14px} .nexthero-art.grow img{max-height:200px}
@media (max-width:1100px){.pbanner,.hello,.nexthero{grid-template-columns:minmax(0,1fr) 260px} .pbanner img,.hello img{height:160px} .nexthero-art.grow{height:180px} .nexthero-art.grow img{max-height:160px}}
@media (max-width:860px){.pbanner,.hello,.nexthero{grid-template-columns:1fr} .pbanner img,.hello img{height:150px}}
.card,.course-card,.xcard,.ccard,.tile,.ws-day,.ap-item,.pp-defs,.passport,.jr a,.prog-card,.mod,.lab,.tenant,.user-dd summary{border-color:var(--line-2)}
.pbanner,.hello,.nexthero{border:1px solid var(--line-2)}

/* ---------- round 28: journey cards like the Grow Suite: the drawing fills the frame, tints alternate ---------- */
:root{--tint-sun:#F5E2BE}
.jr-art.grow{aspect-ratio:16/10;padding:0;overflow:hidden;background:var(--tint-sun)} .jr-art.grow img{width:100%;height:100%;object-fit:cover;object-position:center 35%}
.journey .jr:nth-child(5n+2) .jr-art.grow{background:var(--tint-sky)} .journey .jr:nth-child(5n+4) .jr-art.grow{background:var(--tint-sage)} .journey .jr:nth-child(5n+3) .jr-art.grow{background:var(--tint-paper)}
.jr-art.grow{display:block;position:relative} .jr-art.grow img{display:block}

/* ---------- round 30: the AI Coach ---------- */
#coach-toggle{position:fixed;right:22px;bottom:76px;z-index:40;display:flex;flex-direction:column;align-items:center;gap:4px;border:0;background:none;cursor:pointer;padding:0} #coach-toggle .fab-i{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--red);color:#fff;box-shadow:0 0 0 4px #fff,0 14px 28px -14px rgba(0,0,0,.5);transition:transform .15s cubic-bezier(.4,0,.2,1)} #coach-toggle:hover .fab-i{transform:scale(1.05)} #coach-toggle .fab-l{font-size:11px;font-weight:600;color:var(--ink);background:rgba(255,255,255,.85);padding:2px 8px;border-radius:999px}
body.coach-open #coach-toggle{display:none} body.coach-open #demo-open,body.coach-open #totop{display:none}
#coach{display:none} body.coach-open #coach{display:flex;flex-direction:column;position:fixed;right:0;top:0;width:384px;max-width:100vw;height:100vh;z-index:45;background:#fff;border-left:1px solid var(--line-2);box-shadow:-20px 0 40px -28px rgba(0,0,0,.45);animation:sheet-in .2s ease-out}
@keyframes sheet-in{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
#coach .c-h{display:flex;align-items:center;gap:8px;padding:14px 16px;border-bottom:1px solid var(--line)} #coach .c-h > div{flex:1} #coach .c-h b{display:block;font-family:var(--font-display);font-size:var(--fs-4)} #coach .c-h small{display:block;color:var(--muted);font-size:var(--fs-5)}
#coach .c-modes{display:flex;gap:6px;padding:10px 16px 0} #coach .c-modes button{padding:4px 12px;border-radius:999px;border:1px solid var(--line-2);background:#fff;font-size:var(--fs-5);font-weight:600;cursor:pointer} #coach .c-modes button.on{background:var(--red);border-color:var(--red);color:#fff}
#coach .c-connect{margin:10px 16px 0;border:1px solid var(--line);border-radius:var(--r);padding:8px 12px;font-size:var(--fs-5)} #coach .c-connect summary{cursor:pointer;display:flex;align-items:center;gap:8px;font-weight:600} #coach .dot{width:8px;height:8px;border-radius:50%;background:var(--muted);display:inline-block} #coach .dot.on{background:#1E7B4F} #coach .c-cbody{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px} #coach .c-cbody input,#coach .c-cbody select{flex:1 1 120px;padding:6px 8px;border:1px solid var(--line-2);border-radius:var(--r);font:inherit;font-size:var(--fs-5)} #coach .c-cbody .fine{flex-basis:100%;margin:0}
#coach .c-nudge{margin:10px 16px 0;padding:10px 12px;border-radius:var(--r);background:var(--tint-paper)} #coach .c-nudge small{display:block;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:11px;color:var(--muted);margin-bottom:4px} #coach .c-nudge p{margin:0;font-size:var(--fs-5);line-height:var(--lh-text)}
#coach .c-msgs{flex:1;overflow:auto;padding:12px 16px;display:flex;flex-direction:column;gap:8px} #coach .msg{max-width:92%;padding:9px 12px;border-radius:6px;font-size:13.5px;line-height:1.5;white-space:pre-wrap} #coach .msg.ai{border:1px solid var(--line);background:#fff;align-self:flex-start} #coach .msg.me{background:var(--ink);color:#fff;align-self:flex-end} #coach .msg.sys{align-self:center;text-align:center;color:var(--muted);font-size:11.5px;max-width:100%} #coach .msg i{display:block;margin-top:4px;font-size:11px;color:var(--muted);font-style:normal}
#coach .msg.typing{display:flex;gap:4px;padding:12px} #coach .msg.typing span{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:c-b .9s infinite} #coach .msg.typing span:nth-child(2){animation-delay:.15s} #coach .msg.typing span:nth-child(3){animation-delay:.3s} @keyframes c-b{0%,80%,100%{transform:translateY(0)}40%{transform:translateY(-5px)}}
#coach .c-sugs{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 8px} #coach .c-sug{padding:5px 10px;border-radius:999px;border:1px solid var(--line-2);background:#fff;font-size:12.5px;cursor:pointer;text-align:left} #coach .c-sug:hover{border-color:var(--red)}
#coach .c-in{display:flex;gap:8px;padding:10px 16px 14px;border-top:1px solid var(--line)} #coach .c-in input{flex:1;padding:8px 10px;border:1px solid var(--line-2);border-radius:var(--r);font:inherit;font-size:var(--fs-5)}
@media (max-width:720px){#coach-toggle{right:16px;bottom:70px} body.coach-open #coach{width:100vw}} @media (prefers-reduced-motion:reduce){body.coach-open #coach{animation:none}}

/* round 32: flagship program cards open their journey */
.prog-card{color:inherit;cursor:pointer;transition:border-color .15s} .prog-card:hover{border-color:var(--ink)} .pc-more{display:inline-flex;align-items:center;gap:4px;margin-top:8px;font-size:var(--fs-5);font-weight:700;color:var(--red)} .pc-more svg{width:12px;height:12px}
table.pd td p{margin:4px 0 0;color:var(--ink-2);font-size:var(--fs-5)} table.pd td b{display:block} table.pd th[scope=row] small{display:block;font-weight:400;color:var(--muted);font-size:var(--fs-5)} table.cur th[scope=row]{white-space:nowrap;width:110px} ol.objs{list-style:decimal;padding-left:20px;margin:6px 0 0;display:block} ol.objs li{margin:4px 0;line-height:var(--lh-text)}

/* round 33: every data table reads left to right, left-aligned */
table.ft.res th,table.ft.res td,table.ft.res thead th{text-align:left} table.ft.res th[scope=row]{text-align:left}