/* ==========================================================================
   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:.06em;text-transform:uppercase;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:13px;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}