/* MAS Academy · R11 (2026-10-23) — the 27 adjustments of the 22-Oct meeting (MAS-Academy-ajustes-prototipo.md).
   Loaded after app.css: new views (Explore, Improve capabilities, the final project, the closing screen), the badge
   moment, reading fragments, voice controls, and the few overrides of existing views (Log-in band, Home order).
   Same tokens and primitives as the rest: brand colours only, one red action per view, Montserrat for titles. */

/* ---------- Log-in: the phrase on a band at the left (C01) ---------- */
.login{grid-template-columns:minmax(17rem,34%) minmax(0,1fr);place-items:stretch;padding:0}
.login-band{position:relative;z-index:2;display:grid;align-content:center;gap:var(--mas-space-5);padding:clamp(2rem,5vw,4.5rem);background:#0F2533;box-shadow:inset -1px 0 0 rgba(182,227,232,.14)}
.login-band::after{content:"";position:absolute;inset-block-end:clamp(1.5rem,4vw,3rem);inset-inline-start:clamp(2rem,5vw,4.5rem);inline-size:3.5rem;block-size:4px;border-radius:var(--mas-radius-pill);background:var(--mas-brand-red)}
.login-band .login-logo{justify-self:start;inline-size:6.5rem}
.login-eyebrow{justify-self:start;padding:.25rem .625rem;border-radius:var(--mas-radius-pill);background:rgba(182,227,232,.14);color:#B6E3E8;font:600 var(--mas-text-meta)/1.2 var(--mas-font-ui);letter-spacing:.06em;text-transform:uppercase}
.mas-ui .login-mission{margin:0;font:700 clamp(1.75rem,2.9vw,2.75rem)/1.15 var(--mas-font-brand);letter-spacing:-.02em;color:#FBFCFD;text-wrap:balance}
.login-mission em{font-style:normal;color:#B6E3E8}
.mas-ui .login-band .login-title{margin:var(--mas-space-2) 0 0;padding:var(--mas-space-4) 0 0;border-top:1px solid rgba(182,227,232,.18);font-size:clamp(1.25rem,1.7vw,1.625rem);text-align:start;text-shadow:none;color:rgba(251,252,253,.9)}
.login-stage{position:relative;isolation:isolate;display:grid;place-items:center;min-block-size:100dvh;overflow:hidden;padding:var(--mas-space-12) var(--mas-space-4)}
.login-stage .login-center{gap:var(--mas-space-3)}
@media (max-width:47.5rem){
  .login{grid-template-columns:minmax(0,1fr);padding:0}
  .login-band{padding:var(--mas-space-8) var(--mas-space-5) 2.75rem}
  .login-band::after{inset-block-end:var(--mas-space-4);inset-inline-start:var(--mas-space-5)}
  .login-stage{min-block-size:auto;padding-block:9.5rem 8.5rem}
}

/* ---------- Home: four banners in the same band (C03); the row keeps to its column ---------- */
.why-copy{min-inline-size:0}
.why-cards{inline-size:100%;min-inline-size:0}
.why-card:not([data-on=true]) .why-tag{white-space:normal}

/* ---------- Voice: Dictate under every text field, the «Answer by voice» switch (C06, C16) ---------- */
.dictate-btn{display:inline-flex;align-items:center;gap:6px;margin-top:var(--mas-space-2);min-height:2rem;padding:0 var(--mas-space-3);border:1px solid var(--mas-control-border);border-radius:var(--mas-radius-pill);background:var(--mas-surface);color:var(--mas-ink);font:600 var(--mas-text-meta)/1 var(--mas-font-ui);cursor:pointer;justify-self:start;transition:background-color var(--mas-micro) var(--mas-ease),border-color var(--mas-micro) var(--mas-ease)}
.dictate-btn .mas-ic{inline-size:1rem;block-size:1rem}
.dictate-btn:hover{border-color:var(--mas-ink)}
.dictate-btn[aria-pressed=true]{border-color:transparent;background:var(--mas-brand-red);color:#FBFCFD;animation:r11-pulse 1.4s var(--mas-ease) infinite}
@keyframes r11-pulse{0%,100%{box-shadow:0 0 0 0 rgba(223,24,51,.35)}50%{box-shadow:0 0 0 6px rgba(223,24,51,0)}}
.voice-switch{display:inline-flex;align-items:center;gap:var(--mas-space-2);min-height:2rem;padding:0 var(--mas-space-2) 0 var(--mas-space-3);border:1px solid var(--mas-line);border-radius:var(--mas-radius-pill);background:var(--mas-fill);color:var(--mas-ink);font:600 var(--mas-text-meta)/1 var(--mas-font-ui);cursor:pointer;white-space:nowrap}
.voice-switch .mas-ic{inline-size:1rem;block-size:1rem}
.voice-switch i{position:relative;inline-size:2rem;block-size:1.125rem;border-radius:var(--mas-radius-pill);background:var(--mas-fill-strong);transition:background-color var(--mas-micro) var(--mas-ease)}
.voice-switch i::after{content:"";position:absolute;inset-block-start:2px;inset-inline-start:2px;inline-size:.875rem;block-size:.875rem;border-radius:50%;background:var(--mas-surface);box-shadow:0 1px 2px rgba(15,37,51,.3);transition:transform var(--mas-micro) var(--mas-ease)}
.voice-switch[aria-checked=true]{border-color:transparent;background:var(--mas-ink);color:var(--mas-surface)}
.voice-switch[aria-checked=true] i{background:var(--mas-brand-red)}
.voice-switch[aria-checked=true] i::after{transform:translateX(.875rem)}
@media (prefers-reduced-motion:reduce){ .dictate-btn[aria-pressed=true]{animation:none} }

/* ---------- Tour: the phrase that opens each stop by voice (C02) ---------- */
.ob-say{display:flex;align-items:center;gap:6px;margin:var(--mas-space-2) 0 0;padding:6px 10px;border-radius:var(--mas-radius-control);background:var(--mas-ask);color:var(--mas-ink);font-size:var(--mas-text-2)}
.ob-say .mas-ic{inline-size:1rem;block-size:1rem;color:var(--mas-brand-red)}

/* ---------- 5-minute check: voice, the open question, the profile (C06, C07) ---------- */
.dg-title-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--mas-space-2) var(--mas-space-4);padding-inline-end:2.75rem}
.dg-title-row h2{margin:0}
.dg-tools{display:flex;flex-wrap:wrap;align-items:center;gap:var(--mas-space-2)}
.dg-heard{min-block-size:1.5rem;margin:0;padding:6px 10px;border-radius:var(--mas-radius-control);background:var(--mas-fill);color:var(--mas-ink-2);font-size:var(--mas-text-2);font-style:italic}
.dg-heard:empty::before{content:"…"}
.dg-heard[hidden]{display:none}
.dg-open{inline-size:100%;min-block-size:9rem;resize:vertical;font:inherit;line-height:1.5}
.dg-wait{display:flex;align-items:center;gap:var(--mas-space-2)}
.dg-wait .mas-ic{animation:r11-spin 1.6s linear infinite}
@keyframes r11-spin{to{transform:rotate(360deg)}}
.dg-profile{display:grid;gap:var(--mas-space-2);padding:var(--mas-space-4);border-radius:var(--mas-radius-control);border:1px solid var(--mas-line-soft);background:var(--mas-surface)}
.mas-ui .dg-profile h3{display:flex;align-items:center;gap:var(--mas-space-2);margin:0;font:650 var(--mas-text)/1.3 var(--mas-font-ui)}
.dg-profile>p{margin:0;line-height:1.55}
.dg-profile .mas-link{justify-self:start}
.dg-pline{display:grid;gap:2px;font-size:var(--mas-text-2)}
.dg-pline b{font-weight:650}
.dg-pline span{color:var(--mas-ink-2)}
.dg-pbars{margin:var(--mas-space-1) 0}

/* ---------- Home after the check: Your week, Improve capabilities, Why (C09, C10, C12, C14) ---------- */
.home-view[data-state=week]{display:grid;gap:var(--mas-space-8);padding-top:var(--mas-space-6)}
.home-view[data-state=week] .home-path{padding-top:0}
.mas-ui .home-view[data-state=week] .dg-head h1{margin:0;font:700 clamp(2rem,3.6vw,3.25rem)/1.08 var(--mas-font-brand);letter-spacing:-.03em;color:var(--why-ink);text-wrap:balance}
.home-view[data-state=week] .dg-head h1 span{color:var(--why-accent)}
.dg-week{grid-template-columns:auto minmax(0,1fr) minmax(0,20rem)}
.dg-pct{position:relative;display:grid;justify-items:center;align-content:center;gap:2px;inline-size:7.5rem;block-size:7.5rem;border-radius:50%;background:conic-gradient(var(--mas-ink) calc(var(--p,0) * 1%),var(--mas-fill-strong) 0);text-align:center}
.dg-pct::before{content:"";position:absolute;inset:10px;border-radius:50%;background:var(--mas-fill)}
.dg-pct>*{position:relative}
.dg-pct b{font:700 1.75rem/1 var(--mas-font-brand);color:var(--mas-ink)}
.dg-pct b small{font-size:.875rem}
.dg-pct span{max-inline-size:5.5rem;color:var(--mas-ink-2);font-size:var(--mas-text-micro);line-height:1.2}
.dg-track small{color:var(--mas-ink-2);font-size:var(--mas-text-micro)}
button.dg-badge{border:0;padding:0;font:inherit;cursor:default}
button.dg-badge[data-badge]{cursor:pointer;transition:transform var(--mas-micro) var(--mas-ease)}
button.dg-badge[data-badge]:hover{transform:scale(1.06)}
button.dg-badge:disabled{opacity:1}
.home-cap{margin:0 var(--main-px)}
.hc{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--mas-space-5);padding:var(--mas-space-5) var(--mas-space-6);border-radius:var(--mas-radius-overlay);background:linear-gradient(120deg,color-mix(in oklab,#B6E3E8 38%,var(--mas-surface)) 0%,var(--mas-fill) 70%);border:1px solid var(--mas-line-soft)}
.hc-ic{display:grid;place-items:center;inline-size:3.25rem;block-size:3.25rem;border-radius:var(--mas-radius-object);background:var(--mas-ink);color:#B6E3E8}
.hc-ic .mas-ic{inline-size:1.5rem;block-size:1.5rem}
.hc-b{display:grid;gap:var(--mas-space-2);min-inline-size:0}
.hc-b .why-eyebrow{justify-self:start}
.mas-ui .hc h2{margin:0;font:700 clamp(1.25rem,2vw,1.625rem)/1.2 var(--mas-font-brand);letter-spacing:-.015em}
.hc-b p{margin:0;color:var(--mas-ink-2);font-size:var(--mas-text-2)}
.hc-b p b{color:var(--mas-ink)}
.hc-cats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--mas-space-2) var(--mas-space-4);margin:var(--mas-space-1) 0 0;padding:0;list-style:none}
.hc-cats li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 6px;font-size:var(--mas-text-meta)}
.hc-cats li span:first-child{display:inline-flex;align-items:center;gap:4px;font-weight:600}
.hc-cats li .mas-ic{inline-size:.95rem;block-size:.95rem}
.hc-cats li .pl-mini{grid-column:1/-1;grid-row:2}
.hc-cats li[data-on=true] span:first-child{color:var(--mas-brand-red)}
.hc-go{white-space:nowrap}
@media (max-width:47.5rem){
  .dg-week{grid-template-columns:minmax(0,1fr)}
  .dg-pct{justify-self:start}
  .hc{grid-template-columns:minmax(0,1fr);padding:var(--mas-space-5)}
  .hc-cats{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- Badges with context (C11) ---------- */
.bd-dlg{inline-size:min(32rem,calc(100% - 2rem))}
.bd-top{display:flex;align-items:center;gap:var(--mas-space-4);padding-inline-end:2.75rem}
.bd-top h2{margin:0}
.bd-medal{display:grid;flex:none;place-items:center;inline-size:3.75rem;block-size:3.75rem;border-radius:50%;background:var(--mas-ink);color:#B6E3E8;box-shadow:inset 0 0 0 4px color-mix(in oklab,#B6E3E8 45%,#0F2533)}
.bd-medal .mas-ic{inline-size:1.5rem;block-size:1.5rem}
.bd-medal[data-kind=final]{background:var(--mas-brand-red);color:#FBFCFD;box-shadow:inset 0 0 0 4px rgba(251,252,253,.35)}
.bd-medal[data-kind=cap]{background:var(--mas-brand-kashmir);color:#FBFCFD}
.bd-context{margin:0;font-size:1rem;line-height:1.55}
.bd-date,.bd-left{margin:0;font-size:var(--mas-text-2)}
.bd-left{color:var(--mas-ink-2)}
.bd-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));gap:var(--mas-space-3);margin:0;padding:0;list-style:none}
.bd-tile{display:grid;justify-items:start;align-content:start;gap:6px;inline-size:100%;block-size:100%;padding:var(--mas-space-4);border:1px solid var(--mas-line-soft);border-radius:var(--mas-radius-object);background:var(--mas-surface);color:var(--mas-ink);font:inherit;text-align:start}
button.bd-tile{cursor:pointer;transition:border-color var(--mas-micro) var(--mas-ease),box-shadow var(--mas-micro) var(--mas-ease)}
button.bd-tile:hover{border-color:var(--mas-ink);box-shadow:var(--mas-shadow-soft)}
.bd-tile .bd-medal{inline-size:2.75rem;block-size:2.75rem}
.bd-tile .bd-medal .mas-ic{inline-size:1.125rem;block-size:1.125rem}
.bd-tile b{font-size:var(--mas-text);font-weight:650}
.bd-tile small{color:var(--mas-ink-2);font-size:var(--mas-text-meta);line-height:1.4}
.bd-gallery li[data-on=false] .bd-medal{background:var(--mas-fill-strong);color:var(--mas-ink-2);box-shadow:none}
.bd-gallery li[data-on=false] .bd-tile{background:var(--mas-fill)}

/* ---------- Reading in three fragments (C15) ---------- */
.lesson[data-frag] .lesson-head .lesson-actions{display:none} /* the fragments, then the check, carry the red action */
.frag{display:grid;gap:var(--mas-space-4);margin-bottom:var(--mas-space-6)}
.frag-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--mas-space-3)}
.frag-steps{display:flex;flex-wrap:wrap;gap:var(--mas-space-2);margin:0;padding:0;list-style:none}
.frag-steps button{display:inline-flex;align-items:center;gap:6px;min-height:2.25rem;padding:0 var(--mas-space-3) 0 4px;border:1px solid var(--mas-line);border-radius:var(--mas-radius-pill);background:var(--mas-surface);color:var(--mas-ink-2);font:600 var(--mas-text-2)/1 var(--mas-font-ui);cursor:pointer}
.frag-steps b{display:grid;place-items:center;inline-size:1.75rem;block-size:1.75rem;border-radius:50%;background:var(--mas-fill-strong);color:var(--mas-ink)}
.frag-steps button[data-seen=true] b{background:var(--mas-brand-bay);color:#0F2533}
.frag-steps button[aria-current=step]{border-color:var(--mas-ink);background:var(--mas-ink);color:var(--mas-surface)}
.frag-steps button[aria-current=step] b{background:var(--mas-brand-red);color:#FBFCFD}
.frag-tools{display:flex;align-items:center;gap:var(--mas-space-2)}
.frag-tools .seg button{display:inline-flex;align-items:center;gap:6px}
.frag-tools .seg .mas-ic{inline-size:1rem;block-size:1rem}
.frag-rate[hidden]{display:none}
.frag-rate select{min-height:2rem;padding:0 var(--mas-space-2)}
.frag-card{display:grid;align-content:center;gap:var(--mas-space-4);min-block-size:clamp(16rem,42vh,24rem);padding:clamp(var(--mas-space-6),4vw,var(--mas-space-12));border-radius:var(--mas-radius-overlay);background:var(--mas-fill);border:1px solid var(--mas-line-soft);animation:r11-in .35s var(--mas-damped)}
.frag-card[hidden]{display:none}
.frag-card[data-k=why]{background:color-mix(in oklab,#B6E3E8 30%,var(--mas-surface))}
.frag-card[data-k=for]{background:var(--mas-fill-strong)}
.frag-kicker{display:flex;align-items:center;gap:var(--mas-space-2);margin:0;color:var(--mas-ink-2);font:600 var(--mas-text-2)/1.2 var(--mas-font-ui);text-transform:uppercase;letter-spacing:.06em}
.frag-n{display:grid;place-items:center;inline-size:1.75rem;block-size:1.75rem;border-radius:50%;background:var(--mas-brand-red);color:#FBFCFD;letter-spacing:0}
.mas-ui .frag-card h2{margin:0;max-inline-size:28ch;font:700 clamp(1.5rem,2.6vw,2.125rem)/1.18 var(--mas-font-brand);letter-spacing:-.02em;text-wrap:balance}
.frag-card h2:focus{outline:none}
.frag-points{display:grid;gap:var(--mas-space-3);max-inline-size:60ch;margin:0;padding:0;list-style:none}
.frag-points li{position:relative;padding-inline-start:1.5rem;font-size:clamp(1.0625rem,1.3vw,1.1875rem);line-height:1.6}
.frag-points li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:.65em;inline-size:.5rem;block-size:.5rem;border-radius:2px;background:var(--mas-brand-red)}
.frag-nav{display:flex;align-items:center;justify-content:space-between;gap:var(--mas-space-3)}
.frag-nav [hidden]{display:none}
.frag-count{color:var(--mas-ink-2);font-size:var(--mas-text-2)}
.rd-check[hidden]{display:none}
@keyframes r11-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .frag-card,.dg-wait .mas-ic{animation:none} }

/* ---------- Activity: MASha helps to draft (C16) ---------- */
.act-guide-row{margin-top:var(--mas-space-2)}
.act-guide-btn{display:inline-flex;align-items:center;gap:6px}
.act-guide-btn .mas-ic{inline-size:1.125rem;block-size:1.125rem}
.act-guide{display:grid;gap:var(--mas-space-3);margin-top:var(--mas-space-3);padding:var(--mas-space-4);border-radius:var(--mas-radius-object);background:var(--mas-ask)}
.act-guide[hidden]{display:none}
.act-guide-note{display:flex;align-items:flex-start;gap:var(--mas-space-2);margin:0;font-size:var(--mas-text-2)}
.act-guide-note .mas-ic{flex:none;inline-size:1.125rem;block-size:1.125rem}
.act-guide .mas-btn{justify-self:start}

/* ---------- Improve capabilities: a lab look (C13, after imagen.png) ---------- */
.cap-eyebrow{display:flex;align-items:center;gap:6px;margin:0 0 var(--mas-space-1);color:var(--mas-ink-2);font-size:var(--mas-text-2);font-weight:600}
.cap-eyebrow .mas-ic{inline-size:1rem;block-size:1rem;color:var(--mas-brand-red)}
.cap-note{display:flex;align-items:flex-start;gap:var(--mas-space-2);margin:0 0 var(--mas-space-4);padding:var(--mas-space-3) var(--mas-space-4);border-radius:var(--mas-radius-control);background:var(--mas-fill);color:var(--mas-ink-2);font-size:var(--mas-text-2)}
.cap-note .mas-ic{flex:none;inline-size:1rem;block-size:1rem;margin-top:2px}
.cap-cats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));inline-size:100%;margin:var(--mas-space-4) 0}
.cap-cats button{display:flex;align-items:center;justify-content:center;gap:6px;min-height:2.75rem}
.cap-cats button .mas-ic{inline-size:1rem;block-size:1rem}
.cap-cats button b{color:var(--mas-ink);font-weight:650}
.cap-cats button small{color:var(--mas-ink-2);font-weight:500}
.cap-card{display:grid;gap:var(--mas-space-3);padding:clamp(var(--mas-space-5),3vw,var(--mas-space-8));border:1px solid var(--mas-line-soft);border-radius:var(--mas-radius-overlay);background:var(--mas-surface);box-shadow:var(--mas-shadow-soft)}
.cap-card-head{display:flex;align-items:center;justify-content:space-between;gap:var(--mas-space-3)}
.cap-kicker{margin:0;color:var(--mas-ink-2);font-size:var(--mas-text-meta);font-weight:600}
.cap-clock{font:700 clamp(1.75rem,3vw,2.25rem)/1 var(--mas-font-brand);color:var(--mas-ink)}
.cap-clock[data-over=true]{color:var(--mas-ink-2)}
.mas-ui .cap-card h2{margin:0;font:700 clamp(1.375rem,2.4vw,1.875rem)/1.2 var(--mas-font-brand);letter-spacing:-.015em}
.cap-prompt{margin:0;color:var(--mas-ink-2);line-height:1.55}
.cap-text{inline-size:100%;min-block-size:11rem;resize:vertical;padding:var(--mas-space-4);border-radius:var(--mas-radius-object);background:var(--mas-fill);font:inherit;line-height:1.6}
.cap-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--mas-space-2)}
.cap-hint{margin:0;font-size:var(--mas-text-2)}
.cap-fb{display:grid;gap:var(--mas-space-4);margin-top:var(--mas-space-5);padding:clamp(var(--mas-space-5),3vw,var(--mas-space-6));border-radius:var(--mas-radius-overlay);background:var(--mas-fill);scroll-margin-top:calc(var(--topbar-h,0px) + var(--dock-h,0px) + var(--head-h,0px) + 1rem)}
.cap-fb-head{display:flex;align-items:center;justify-content:space-between;gap:var(--mas-space-3)}
.mas-ui .cap-fb h2{display:flex;align-items:center;gap:var(--mas-space-2);margin:0;font:700 1.25rem/1.2 var(--mas-font-brand)}
.cap-total{display:inline-flex;align-items:baseline;gap:4px}
.cap-total b{font:700 2.25rem/1 var(--mas-font-brand)}
.cap-total small{color:var(--mas-ink-2)}
.cap-flag{display:flex;gap:var(--mas-space-2);margin:0;padding:var(--mas-space-3);border-radius:var(--mas-radius-control);background:var(--mas-ask);font-size:var(--mas-text-2)}
.cap-crit{display:grid;gap:var(--mas-space-3);margin:0;padding:0;list-style:none}
.cap-crit li{display:grid;grid-template-columns:minmax(0,1fr) auto 1.5rem;align-items:center;gap:var(--mas-space-3);padding:var(--mas-space-3) var(--mas-space-4);border-radius:var(--mas-radius-control);background:var(--mas-surface)}
.cap-crit li[data-low=true]{box-shadow:inset 3px 0 0 var(--mas-brand-red)}
.cap-crit li span:first-child{display:grid;gap:2px}
.cap-crit small{color:var(--mas-ink-2);font-size:var(--mas-text-meta)}
.cap-dots{display:inline-flex;gap:4px}
.cap-dots i{inline-size:.75rem;block-size:.75rem;border-radius:3px;background:var(--mas-fill-strong)}
.cap-dots i[data-on=true]{background:var(--mas-ink)}
.cap-crit li>b{text-align:end;font-size:1.125rem}
.cap-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--mas-space-5)}
.mas-ui .cap-two h3{display:flex;align-items:center;gap:var(--mas-space-2);margin:0 0 var(--mas-space-2);font:650 var(--mas-text)/1.3 var(--mas-font-ui)}
.cap-tips{display:grid;gap:var(--mas-space-2);margin:0;padding-inline-start:1.125rem;line-height:1.5}
.cap-why summary{cursor:pointer;font-weight:600}
.cap-why p{margin:var(--mas-space-2) 0 0;color:var(--mas-ink-2);line-height:1.55}
.cap-lab{display:grid;gap:var(--mas-space-5)}
.cap-goal{display:grid;gap:var(--mas-space-2)}
.mas-ui .cap-goal h2{margin:0;font:700 1.125rem/1.2 var(--mas-font-brand)}
.cap-goal p{margin:0;color:var(--mas-ink-2)}
.cap-goal-bar,.cap-lv-bar{display:block;block-size:.5rem;border-radius:var(--mas-radius-pill);background:var(--mas-fill-strong);overflow:hidden}
.cap-goal-bar i,.cap-lv-bar i{display:block;block-size:100%;border-radius:inherit;background:var(--mas-brand-red)}
.cap-levels{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:var(--mas-space-3);margin:0;padding:0;list-style:none}
.cap-levels li{display:grid;gap:var(--mas-space-2);align-content:start}
.cap-levels li p{margin:0;font-size:var(--mas-text-2)}
.cap-lv-top{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--mas-space-2) var(--mas-space-3)}
.cap-lv-top>span:nth-child(2){display:grid}
.cap-lv-top small{color:var(--mas-ink-2);font-size:var(--mas-text-meta)}
.cap-lv-top .chip{grid-column:1/-1;justify-self:start;background:var(--mas-fill)}
.cap-lv-ic{display:grid;flex:none;place-items:center;inline-size:2.25rem;block-size:2.25rem;border-radius:var(--mas-radius-control);background:var(--mas-ink);color:#B6E3E8}
.cap-lv-ic .mas-ic{inline-size:1.125rem;block-size:1.125rem}
.cap-spark{inline-size:7.5rem;block-size:2rem;stroke:var(--mas-brand-red);fill:var(--mas-ink)}
.cap-spark circle{fill:var(--mas-ink);stroke:none}
.cap-hist{display:grid;gap:var(--mas-space-2);margin:0;padding:0;list-style:none}
.cap-hist li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--mas-space-3);padding:var(--mas-space-2) 0;border-bottom:1px solid var(--mas-line-soft)}
.cap-hist li>span:nth-child(2){display:grid}
.cap-hist small{color:var(--mas-ink-2);font-size:var(--mas-text-meta)}
.cap-levels .mas-link{display:inline-flex;align-items:center;gap:4px;justify-self:start}
@media (max-width:47.5rem){
  .cap-cats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cap-two{grid-template-columns:minmax(0,1fr)}
}

/* ---------- Final project with the agent (C18) ---------- */
.fp{display:grid;gap:var(--mas-space-4)}
.fp-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--mas-space-2);margin:0;padding:0;list-style:none}
.fp-steps li{display:flex;align-items:center;gap:var(--mas-space-2);padding:var(--mas-space-2) var(--mas-space-3);border-radius:var(--mas-radius-control);background:var(--mas-fill);color:var(--mas-ink-2);font-size:var(--mas-text-2);font-weight:600}
.fp-steps li[data-state=now]{background:var(--mas-ink);color:var(--mas-surface)}
.fp-steps li[data-state=done]{background:var(--mas-selection);color:var(--mas-ink)}
.fp-n{display:grid;flex:none;place-items:center;inline-size:1.5rem;block-size:1.5rem;border-radius:50%;background:var(--mas-surface);color:var(--mas-ink);font-size:var(--mas-text-meta)}
.fp-n .mas-ic{inline-size:.875rem;block-size:.875rem}
.fp-steps li[data-state=now] .fp-n{background:var(--mas-brand-red);color:#FBFCFD}
.fp-body{display:grid;gap:var(--mas-space-4);padding:var(--mas-space-5);border:1px solid var(--mas-line-soft);border-radius:var(--mas-radius-object);background:var(--mas-surface)}
.mas-ui .fp-h{display:flex;align-items:center;gap:var(--mas-space-2);margin:0;font:700 1.125rem/1.25 var(--mas-font-brand)}
.fp-deliv{display:grid;gap:var(--mas-space-2);margin:0;padding:0;list-style:none}
.fp-deliv li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--mas-space-3);padding:var(--mas-space-3);border-radius:var(--mas-radius-control);background:var(--mas-fill)}
.fp-deliv li>span:nth-child(2){display:grid;gap:2px}
.fp-deliv small{color:var(--mas-ink-2);font-size:var(--mas-text-meta)}
.fp-deliv q{color:var(--mas-ink-2);font-size:var(--mas-text-2)}
.fp-ic{display:grid;place-items:center;inline-size:1.75rem;block-size:1.75rem;border-radius:50%;background:var(--mas-ink);color:#B6E3E8}
.fp-ic .mas-ic{inline-size:1rem;block-size:1rem}
.fp-deliv li[data-done=false] .fp-ic{background:var(--mas-fill-strong);color:var(--mas-ink-2)}
.fp-why{margin:0;padding:var(--mas-space-3) var(--mas-space-4);border-radius:var(--mas-radius-control);background:var(--mas-ask);font-size:var(--mas-text-2)}
.fp-qs{display:grid;gap:var(--mas-space-3)}
.fp-draftbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--mas-space-3)}
.fp-draft[hidden]{display:none}
.fp-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--mas-space-2)}
.fp-report{display:grid;gap:var(--mas-space-3)}
.mas-ui .fp-report h3{margin:0;font:700 1.375rem/1.2 var(--mas-font-brand)}
.fp-report section{display:grid;gap:var(--mas-space-1);padding:var(--mas-space-3) 0;border-top:1px solid var(--mas-line-soft)}
.mas-ui .fp-report h4{display:flex;align-items:center;gap:var(--mas-space-2);margin:0;font:650 var(--mas-text)/1.3 var(--mas-font-ui)}
.fp-report .fp-n{background:var(--mas-ink);color:var(--mas-surface)}
.fp-text{margin:0;white-space:pre-line;line-height:1.55}
.fp-report .mas-link{justify-self:start}
@media (max-width:47.5rem){ .fp-steps{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ---------- Closing: survey and the four destinations (C19–C22) ---------- */
.cl-dlg{inline-size:min(44rem,calc(100% - 2rem));overflow-x:hidden}
.cl-certq .muted{margin:0 0 var(--mas-space-2);font-size:var(--mas-text-2)}
.cl-certs .check span{overflow-wrap:anywhere}
.cl-qs{display:grid;gap:var(--mas-space-4)}
.cl-q{display:grid;gap:var(--mas-space-2);margin:0;padding:0;border:0}
.cl-q legend{padding:0;margin-bottom:var(--mas-space-2);font-weight:650}
.cl-scale{inline-size:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.cl-certs{display:grid;gap:var(--mas-space-2)}
.cl-certs small{color:var(--mas-ink-2)}
.cl-view{display:grid;gap:var(--mas-space-6)}
.cl-view h1 span{color:var(--mas-brand-red)}
.cl-cert{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--mas-space-4) var(--mas-space-5);padding:var(--mas-space-5) var(--mas-space-6);border-radius:var(--mas-radius-overlay);background:linear-gradient(135deg,#0F2533 0%,color-mix(in oklab,#0F2533 62%,#516F8D) 100%);color:#FBFCFD}
.cl-cert-b small{color:#B6E3E8;font-size:var(--mas-text-meta);font-weight:600}
.mas-ui .cl-cert h2{margin:2px 0;color:#FBFCFD;font:700 clamp(1.375rem,2.4vw,1.875rem)/1.2 var(--mas-font-brand)}
.cl-cert .muted{color:rgba(251,252,253,.75)}
.cl-cert-acts{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:var(--mas-space-2)}
.cl-cert-acts .mas-btn{background:rgba(251,252,253,.1);border-color:rgba(182,227,232,.35);color:#FBFCFD}
.cl-cert-acts .mas-btn:hover{background:rgba(251,252,253,.18)}
.cl-dest{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--mas-space-3);margin:0;padding:0;list-style:none}
.cl-card{position:relative;display:grid;align-content:start;gap:var(--mas-space-2);block-size:100%;padding:var(--mas-space-5);border:1px solid var(--mas-line-soft);border-radius:var(--mas-radius-object);background:var(--mas-surface);color:var(--mas-ink);text-decoration:none;transition:border-color var(--mas-micro) var(--mas-ease),box-shadow var(--mas-micro) var(--mas-ease)}
.cl-card:hover{border-color:var(--mas-ink);box-shadow:var(--mas-shadow-soft)}
.cl-dest li[data-main=true] .cl-card{background:var(--mas-fill);border-color:var(--mas-ink)}
.cl-k{position:absolute;inset-block-start:var(--mas-space-3);inset-inline-end:var(--mas-space-3);color:var(--mas-ink-2);font-weight:700}
.cl-ic{display:grid;place-items:center;inline-size:2.5rem;block-size:2.5rem;border-radius:var(--mas-radius-control);background:var(--mas-ink);color:#B6E3E8}
.cl-ic .mas-ic{inline-size:1.25rem;block-size:1.25rem}
.cl-card b{font:700 1.0625rem/1.25 var(--mas-font-brand)}
.cl-card small{color:var(--mas-ink-2);line-height:1.45}
.cl-card .mas-btn-primary{justify-self:start;margin-top:var(--mas-space-2)}
.cl-go{color:var(--mas-ink-2)}
.cl-survey{display:flex;flex-wrap:wrap;align-items:center;gap:var(--mas-space-3);margin:0;padding:var(--mas-space-3) var(--mas-space-4);border-radius:var(--mas-radius-control);background:var(--mas-ask)}
@media (max-width:60rem){ .cl-dest{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:47.5rem){ .cl-dest,.cl-scale{grid-template-columns:minmax(0,1fr)} .cl-cert{padding:var(--mas-space-5)} }

/* ---------- Explore: drop-down categories, filters, certifications (C23, C25) ---------- */
.ex-view{display:grid;gap:0}
.ex-panel{display:grid;gap:var(--mas-space-4);margin-top:var(--mas-space-4)}
.ex-mine{display:grid;gap:var(--mas-space-4)}
.ex-mine-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--mas-space-4)}
.mas-ui .ex-mine h2{margin:2px 0 var(--mas-space-2);font:700 1.5rem/1.2 var(--mas-font-brand)}
.ex-reqs{display:flex;flex-wrap:wrap;gap:var(--mas-space-2) var(--mas-space-5);margin:0;padding:0;list-style:none;font-size:var(--mas-text-2)}
.ex-reqs li{display:inline-flex;align-items:center;gap:6px;color:var(--mas-ink-2)}
.ex-reqs li[data-on=true]{color:var(--mas-ink);font-weight:600}
.ex-reqs .mas-ic{inline-size:1rem;block-size:1rem}
.ex-certs{display:grid;gap:var(--mas-space-2);margin:0;padding:0;list-style:none}
.ex-cert{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--mas-space-3);padding:var(--mas-space-3);border-radius:var(--mas-radius-control);background:var(--mas-fill)}
.ex-cert .cert-badge{inline-size:3rem;block-size:3rem}
.ex-cert-b{display:grid;gap:2px;min-inline-size:0}
.ex-cert-b small{color:var(--mas-ink-2);font-size:var(--mas-text-meta)}
.ex-cert-a{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--mas-space-2)}
.ex-cert-a .prog{min-inline-size:8rem}
.ex-now h2,.ex-cat-plain h2{margin:0 0 var(--mas-space-3)}
.ex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:var(--mas-space-3)}
.ex-offer{display:grid;align-content:start;gap:var(--mas-space-2);padding:var(--mas-space-4);border:1px solid var(--mas-line-soft);border-radius:var(--mas-radius-object);background:var(--mas-surface)}
.ex-offer[data-open=true]{border-color:var(--mas-ink);background:var(--mas-selection)}
.ex-offer-top{display:flex;flex-wrap:wrap;gap:var(--mas-space-2);align-items:center}
.ex-offer-top .chip{background:var(--mas-fill)}
.mas-ui .ex-offer h3{margin:0;font:650 1rem/1.3 var(--mas-font-ui)}
.ex-offer p{margin:0;font-size:var(--mas-text-meta)}
.ex-offer-foot{margin-top:auto;padding-top:var(--mas-space-2)}
.ex-offer-foot .mas-link{display:inline-flex;align-items:center;gap:4px}
.ex-cat{border:1px solid var(--mas-line-soft);border-radius:var(--mas-radius-object);background:var(--mas-surface);overflow:hidden}
.ex-cat>summary{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:var(--mas-space-3);padding:var(--mas-space-4) var(--mas-space-5);cursor:pointer;list-style:none}
.ex-cat>summary::-webkit-details-marker{display:none}
.ex-cat>summary:hover{background:var(--mas-fill)}
.ex-cat>summary b{font:700 1.125rem/1.2 var(--mas-font-brand)}
.ex-cat>summary small{color:var(--mas-ink-2);font-size:var(--mas-text-2)}
.ex-cat>summary .chev{transition:transform var(--mas-micro) var(--mas-ease)}
.ex-cat[open]>summary .chev{transform:rotate(180deg)}
.ex-cat[open]>summary{box-shadow:inset 0 -1px 0 var(--mas-line-soft)}
.ex-cat-ic{display:grid;place-items:center;inline-size:2.25rem;block-size:2.25rem;border-radius:var(--mas-radius-control);background:var(--mas-ink);color:#B6E3E8}
.ex-cat-ic .mas-ic{inline-size:1.125rem;block-size:1.125rem}
.ex-cat-body{display:grid;gap:var(--mas-space-4);padding:var(--mas-space-4) var(--mas-space-5) var(--mas-space-5)}
.ex-filters{display:flex;flex-wrap:wrap;gap:var(--mas-space-3) var(--mas-space-6)}
.ex-f{display:grid;gap:4px}
.ex-f-l{color:var(--mas-ink-2);font-size:var(--mas-text-meta);font-weight:600}
.mas-ui .ex-prov{display:flex;align-items:center;gap:var(--mas-space-2);margin:var(--mas-space-2) 0 0;font:650 var(--mas-text)/1.3 var(--mas-font-ui)}
.ex-prov .cert-badge{inline-size:2rem;block-size:2rem}
.more-offer{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--mas-space-4);margin-top:var(--mas-space-5);padding:var(--mas-space-4) var(--mas-space-5);border:1px dashed var(--mas-control-border);border-radius:var(--mas-radius-object);color:var(--mas-ink);text-decoration:none;transition:border-color var(--mas-micro) var(--mas-ease),background-color var(--mas-micro) var(--mas-ease)}
.more-offer:hover{border-color:var(--mas-ink);background:var(--mas-fill)}
.more-offer>span:nth-child(2){display:grid;gap:2px}
.more-offer small{color:var(--mas-ink-2)}
.more-offer-ic{display:grid;place-items:center;inline-size:2.5rem;block-size:2.5rem;border-radius:50%;background:var(--mas-ink);color:#B6E3E8}
@media (max-width:47.5rem){
  .ex-mine-top{grid-template-columns:auto minmax(0,1fr)}
  .ex-mine-top .mas-btn-primary{grid-column:1/-1}
  .ex-cert{grid-template-columns:auto minmax(0,1fr)}
  .ex-cert-a{grid-column:1/-1;justify-content:flex-start}
}

/* ---------- Learning paths: the role's path first (C24) ---------- */
.paths-role{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--mas-space-4);margin-bottom:var(--mas-space-5);padding:var(--mas-space-4) var(--mas-space-5);border-radius:var(--mas-radius-object);background:var(--mas-ask)}
.mas-ui .paths-role h2{margin:0;font:700 1.125rem/1.25 var(--mas-font-brand)}
.paths-role p{margin:2px 0 0}
.pflip[data-mine]{position:relative;box-shadow:0 0 0 2px var(--mas-ink);border-radius:var(--mas-radius-object)}
.pflip-mine{z-index:3;display:inline-flex;align-items:center;gap:4px;text-transform:none;letter-spacing:0}
.pflip-mine .mas-ic{inline-size:.875rem;block-size:.875rem}
.node[data-state=soon]{opacity:.85}
.node[data-state=soon] .node-acts{align-self:center}
.page-head .mas-link{display:inline-flex;align-items:center;gap:6px}
@media (max-width:47.5rem){ .paths-role{grid-template-columns:minmax(0,1fr)} }

/* ---------- Progress: the agent's proposal, interest share, capabilities (C26, C27) ---------- */
.ev-agent{display:grid;gap:var(--mas-space-2);padding:var(--mas-space-3) var(--mas-space-4);border-radius:var(--mas-radius-control);background:var(--mas-fill);font-size:var(--mas-text-2)}
.ev-agent[data-verdict=approve]{box-shadow:inset 3px 0 0 var(--mas-ink)}
.ev-agent[data-verdict=return]{box-shadow:inset 3px 0 0 var(--mas-brand-red)}
.ev-agent-h{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0}
.ev-agent-h .mas-ic{inline-size:1rem;block-size:1rem}
.ev-agent ul{margin:0;padding-inline-start:1.125rem}
.ev-agent .mas-link{justify-self:start}
.int-cats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--mas-space-3);margin:0;padding:0;list-style:none}
.int-cats li{display:flex;align-items:center;justify-content:space-between;gap:var(--mas-space-2);padding:var(--mas-space-3);border-radius:var(--mas-radius-control);background:var(--mas-fill)}
.int-cats li span{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.int-cats .mas-ic{inline-size:1rem;block-size:1rem}
.int-cats b{font:700 1.25rem/1 var(--mas-font-brand)}
.int-n small{display:block;color:var(--mas-ink-2);font-size:var(--mas-text-micro);font-weight:500}
.pg-cap{display:grid;gap:var(--mas-space-2);margin:0;padding:0;list-style:none}
.pg-cap li{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(4rem,8rem) 2.5rem auto;align-items:center;gap:var(--mas-space-3);padding:var(--mas-space-2) 0;border-bottom:1px solid var(--mas-line-soft)}
.pg-cap li>span:nth-child(2){display:grid}
.pg-cap small{color:var(--mas-ink-2);font-size:var(--mas-text-meta)}
.pg-cap .cap-spark{inline-size:6rem;block-size:1.625rem}
.fp-admin .fp-report{padding:var(--mas-space-4);border-radius:var(--mas-radius-control);background:var(--mas-fill)}
@media (max-width:47.5rem){
  .int-cats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg-cap li{grid-template-columns:auto minmax(0,1fr) 2.5rem}
  .pg-cap .pl-mini,.pg-cap .cap-spark{display:none}
}

/* ---------- Download PDF: print only the certificate (C21) ---------- */
@media print{
  body[data-print=cert] *{visibility:hidden}
  body[data-print=cert] .cert-dlg,body[data-print=cert] .cert-dlg .cert-sheet,body[data-print=cert] .cert-dlg .cert-sheet *{visibility:visible}
  body[data-print=cert] .cert-dlg{position:fixed;inset:0;margin:0;inline-size:100%;max-inline-size:none;border:0;box-shadow:none;background:#FBFCFD}
  body[data-print=cert] .cert-dlg::backdrop{background:#FBFCFD}
  body[data-print=cert] .cert-dlg-actions,body[data-print=cert] .dlg-x{display:none}
}