/* MAS Academy · Courses prototype — Progress (admin analytics, #/progress · #/progress/:id) and the level check of
   learning paths (user request 2026-10-15). Charts read as one system: magnitude is one hue light → dark
   (Kashmir to Daintree; Bay in the dark view), thin marks, hairline grid, values in text tokens. No extra hues:
   status keeps the pill, ✓ and –. */
:root{
  --pg-1:color-mix(in oklab,#516F8D 14%,#FBFCFD);--pg-2:color-mix(in oklab,#516F8D 34%,#FBFCFD);--pg-3:color-mix(in oklab,#516F8D 60%,#FBFCFD);
  --pg-4:color-mix(in oklab,#0F2533 45%,#516F8D);--pg-5:#0F2533;--pg-on-hi:#FBFCFD;--pg-on-lo:var(--mas-ink)
}
:root[data-theme=dark]{
  --pg-1:color-mix(in oklab,#B6E3E8 12%,var(--mas-surface));--pg-2:color-mix(in oklab,#B6E3E8 28%,var(--mas-surface));--pg-3:color-mix(in oklab,#B6E3E8 48%,var(--mas-surface));
  --pg-4:color-mix(in oklab,#B6E3E8 72%,var(--mas-surface));--pg-5:#B6E3E8;--pg-on-hi:#0F2533;--pg-on-lo:var(--mas-ink)
}
.nav-tag{margin-inline-start:auto;padding:0 6px;border-radius:var(--mas-radius-pill);background:rgba(182,227,232,.14);color:var(--mas-brand-bay);font-size:var(--mas-text-micro);font-weight:600}
body[data-rail=collapsed] .nav-tag{display:none}
.pg-view{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--mas-space-5)} /* tighter between sections (user request, 2026-10-15) */
.pg-view .page-head{margin-bottom:0}
.pg-view .mas-tabs{margin:0;flex-wrap:wrap;overflow:visible} /* three tabs: no scroller */
.pg-view>.crumb{margin-bottom:calc(-1 * var(--mas-space-4));justify-self:start}
.pg-admin{vertical-align:middle;margin-inline-start:var(--mas-space-2);background:var(--mas-fill);font-family:var(--mas-font-ui);letter-spacing:0}
.pg-admin .mas-ic{inline-size:.875rem;block-size:.875rem}
.pg-panel{display:grid;gap:var(--mas-space-4)}
.pg-filter,.pg-sort{display:flex;flex-wrap:wrap;align-items:center;gap:var(--mas-space-2) var(--mas-space-3)}
.pg-filter-l{color:var(--mas-ink-2);font-size:var(--mas-text-2);font-weight:600}
.pg-sort .seg b{margin-inline-start:2px;font-variant-numeric:tabular-nums}

/* Stat tiles: proportional figures, the label above */
.pg-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(9.5rem,100%),1fr));gap:var(--mas-space-3)}
.pg-kpi{display:grid;align-content:start;gap:2px;padding:var(--mas-space-4);border-radius:var(--mas-radius-object);background:var(--mas-fill)}
.pg-kpi small{color:var(--mas-ink-2);font-size:var(--mas-text-meta);font-weight:600}
.pg-kpi b{font-size:1.75rem;font-weight:650;line-height:1.2;letter-spacing:-.02em}
.pg-kpi span{color:var(--mas-ink-2);font-size:var(--mas-text-meta)}
.pg-kpi[data-go]{cursor:pointer;transition:background-color var(--mas-micro) var(--mas-ease)}
.pg-kpi[data-go]:hover{background:var(--mas-fill-strong)}
.pg-card{min-width:0;padding:var(--mas-space-5);border:1px solid var(--mas-line-soft);border-radius:var(--mas-radius-object);background:var(--mas-surface)}
.pg-card h2{margin:0;font-size:1.125rem;letter-spacing:-.01em}
.pg-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--mas-space-5)}
.pg-two.in{gap:var(--mas-space-8)}
.pg-h3{margin:0 0 var(--mas-space-3);font-size:var(--mas-text-2);font-weight:600;color:var(--mas-ink-2)}
@media (max-width:64rem){ .pg-two{grid-template-columns:minmax(0,1fr)} }

/* What to act on */
.pg-insights{background:var(--mas-selection);border-color:transparent}
.pg-insights ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:var(--mas-space-4);margin:0;padding:0;list-style:none}
.pg-insights li{display:grid;grid-template-columns:auto minmax(0,1fr);align-content:start;gap:var(--mas-space-1) var(--mas-space-3)}
.pg-insights p{margin:0;line-height:1.5}
.pg-insights b{font-weight:650}
.pg-insights .mas-link{grid-column:2;justify-self:start;color:var(--mas-ink)}
.pg-ins-ic{display:grid;place-items:center;inline-size:2rem;block-size:2rem;border-radius:50%;background:var(--mas-surface)}

/* Heatmap: course × module, fail rate on the first try */
.hm-wrap{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(16rem,1fr);gap:var(--mas-space-6);align-items:start}
@media (max-width:80rem){ .hm-wrap{grid-template-columns:minmax(0,1fr)} }
.hm{display:grid;gap:2px;overflow-x:auto}
.hm-r{display:grid;grid-template-columns:minmax(9rem,1.6fr) repeat(var(--cols),minmax(3.25rem,1fr));gap:2px;align-items:stretch}
.hm-h span{padding:0 var(--mas-space-2) var(--mas-space-1);color:var(--mas-ink-2);font-size:var(--mas-text-meta);font-weight:600;text-align:center}
.hm-h span:first-child{text-align:start;padding-inline-start:0}
.hm-c{display:grid;align-content:center;padding:var(--mas-space-1) var(--mas-space-2) var(--mas-space-1) 0;min-width:0}
.hm-c b{font-size:var(--mas-text-2);font-weight:600;line-height:1.3}
.hm-c small{color:var(--mas-ink-2);font-size:var(--mas-text-micro)}
.hm-r>span[role=cell]{display:grid}
.hm-cell{display:grid;place-items:center;min-height:2.5rem;padding:0;border:0;border-radius:4px;background:var(--mas-fill);color:var(--pg-on-lo);font:600 var(--mas-text-2)/1 var(--mas-font-ui);font-variant-numeric:tabular-nums;cursor:pointer;transition:transform var(--mas-micro) var(--mas-ease),box-shadow var(--mas-micro) var(--mas-ease)}
span.hm-cell{cursor:default;color:var(--mas-ink-2)}
.hm-cell[data-step="1"]{background:var(--pg-1)}.hm-cell[data-step="2"]{background:var(--pg-2)}.hm-cell[data-step="3"]{background:var(--pg-3)}
.hm-cell[data-step="4"]{background:var(--pg-4);color:var(--pg-on-hi)}.hm-cell[data-step="5"]{background:var(--pg-5);color:var(--pg-on-hi)}
button.hm-cell:hover{transform:scale(1.04)}
.hm-cell[aria-pressed=true]{box-shadow:0 0 0 2px var(--mas-surface),0 0 0 4px var(--mas-ink)}
.hm-legend,.fn-legend,.dp-legend{display:flex;flex-wrap:wrap;align-items:center;gap:var(--mas-space-1) var(--mas-space-4);margin-top:var(--mas-space-3);color:var(--mas-ink-2);font-size:var(--mas-text-meta)}
.hm-legend>span:first-child{font-weight:600}
.hm-key{display:inline-flex;align-items:center;gap:6px}
.hm-key i{inline-size:.875rem;block-size:.875rem;border-radius:3px}
.hm-key i[data-step="1"]{background:var(--pg-1);box-shadow:inset 0 0 0 1px var(--mas-line)}.hm-key i[data-step="2"]{background:var(--pg-2)}.hm-key i[data-step="3"]{background:var(--pg-3)}.hm-key i[data-step="4"]{background:var(--pg-4)}.hm-key i[data-step="5"]{background:var(--pg-5)}
.hm-key i:not([data-step]):not([class]){background:var(--mas-fill)}
.hm-detail{display:grid;gap:var(--mas-space-3);padding:var(--mas-space-4);border-radius:var(--mas-radius-object);background:var(--mas-fill)}
.hm-dh{display:grid;gap:2px}
.hm-dh small{color:var(--mas-ink-2);font-size:var(--mas-text-meta);font-weight:600}
.hm-dh h3{margin:0;font:700 1rem/1.3 var(--mas-font-brand)}
.hm-ls{display:grid;gap:var(--mas-space-3);margin:0;padding:0;list-style:none}
.hm-ls li{display:grid;grid-template-columns:minmax(0,1fr) 4.5rem 2.75rem;align-items:center;gap:var(--mas-space-3)}
.hm-lt{display:grid;min-width:0}
.hm-lt b{font-weight:600;font-size:var(--mas-text-2)}
.hm-lt small,.hb-k,.st-k{color:var(--mas-ink-2);font-size:var(--mas-text-meta);line-height:1.4}
.hm-ls li>b{text-align:end;font-size:var(--mas-text-2)}
.hm-detail .mas-link{justify-self:start}

/* Hardest lessons: horizontal bars, one series, value at the tip */
.hb-h{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(6rem,1fr) 4rem;gap:var(--mas-space-3);padding-bottom:var(--mas-space-2);border-bottom:1px solid var(--mas-line-soft);color:var(--mas-ink-2);font-size:var(--mas-text-meta);font-weight:600}
.hb-h span:last-child{text-align:end}
.hb{display:grid;margin:0;padding:0;list-style:none}
.hb-r{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(6rem,1fr) 4rem;grid-template-areas:"l bar t" "k k k";align-items:center;gap:4px var(--mas-space-3);padding:var(--mas-space-3) 0;border-bottom:1px solid var(--mas-line-soft)}
.hb-r:last-child{border-bottom:0}
.hb-l{grid-area:l;display:grid;min-width:0}
.hb-l a{color:inherit;text-decoration:none}.hb-l a:hover{text-decoration:underline}
.hb-l b{font-weight:600;font-size:var(--mas-text-2)}
.hb-l small{color:var(--mas-ink-2);font-size:var(--mas-text-meta)}
.hb-r .hb-bar{grid-area:bar;display:flex;align-items:center;gap:var(--mas-space-2)}
.hb-r .hb-v{grid-area:bar;justify-self:end;font-size:var(--mas-text-meta);font-variant-numeric:tabular-nums}
.hb-bar{display:block;block-size:.625rem;overflow:hidden}
.hb-r .hb-bar{block-size:auto;margin-inline-end:2.75rem}
.hb-bar i{display:block;block-size:.625rem;border-radius:0 4px 4px 0;background:var(--pg-5)}
.hm-ls .hb-bar{border-radius:4px;background:var(--mas-fill-strong)}
.hm-ls .hb-bar i{border-radius:inherit}
.hb-t{grid-area:t;text-align:end;font-size:var(--mas-text-2);font-weight:600}
.hb-k{grid-area:k}

/* Completion by course: 100% stacked, ordinal ramp, 2px surface gaps */
.fn{display:grid;gap:var(--mas-space-3);margin:var(--mas-space-3) 0 0;padding:0;list-style:none}
.fn-r{display:grid;grid-template-columns:minmax(8rem,.9fr) minmax(0,1.6fr) 1.5rem;grid-template-areas:"l bar n";align-items:center;gap:var(--mas-space-1) var(--mas-space-3)}
.fn-l{grid-area:l}.fn-bar{grid-area:bar}.fn-n{grid-area:n}
.fn-l b{font-size:var(--mas-text-2);font-weight:600}
.fn-bar{display:flex;gap:2px;block-size:1.25rem}
.fn-bar i{display:grid;place-items:center;flex-basis:0;min-width:3px;font:600 var(--mas-text-micro)/1 var(--mas-font-ui);font-style:normal}
.fn-bar i:first-child{border-start-start-radius:4px;border-end-start-radius:4px}.fn-bar i:last-child{border-start-end-radius:4px;border-end-end-radius:4px}
.fn-bar i[data-k=done],.fn-sw[data-k=done]{background:var(--pg-5);color:var(--pg-on-hi)}
.fn-bar i[data-k=active],.fn-sw[data-k=active]{background:var(--pg-3);color:var(--pg-on-lo)}
.fn-bar i[data-k=new],.fn-sw[data-k=new]{background:var(--pg-1);color:var(--pg-on-lo)}
.fn-sw[data-k=new]{box-shadow:inset 0 0 0 1px var(--mas-line)}
.fn-n{color:var(--mas-ink-2);font-size:var(--mas-text-meta);font-weight:600;text-align:end}
.pg-axis-note{margin:var(--mas-space-3) 0 0;color:var(--mas-ink-2);font-size:var(--mas-text-meta)}

/* Weekly hours: 2px line, 10% wash, crosshair on hover and focus */
.ac{display:grid;gap:var(--mas-space-2);padding-inline:2.5rem 3rem}
.ac-plot{position:relative;block-size:11rem;margin-top:var(--mas-space-2)}
.ac-plot svg{position:absolute;inset:0;inline-size:100%;block-size:100%;overflow:visible}
.ac-grid{fill:none;stroke:var(--mas-line);stroke-width:1}
.ac-area{fill:var(--mas-ink);opacity:.1}
.ac-line{fill:none;stroke:var(--mas-ink);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.ac-y{position:absolute;inset-inline-end:calc(100% + var(--mas-space-2));transform:translateY(-50%);color:var(--mas-ink-2);font-size:var(--mas-text-micro);font-variant-numeric:tabular-nums;white-space:nowrap}
.ac-dot,.ac-hit i{position:absolute;inline-size:.625rem;block-size:.625rem;border-radius:50%;background:var(--mas-ink);box-shadow:0 0 0 2px var(--mas-surface);transform:translate(-50%,-50%)}
.ac-end{position:absolute;inset-inline-start:calc(100% + var(--mas-space-2));transform:translateY(-50%);font-size:var(--mas-text-meta);font-weight:600;white-space:nowrap}
.ac-hit{position:absolute;inset-block:0;transform:translateX(-50%);padding:0;border:0;background:none;cursor:crosshair}
.ac-hit::before{content:"";position:absolute;inset-block:0;inset-inline-start:50%;inline-size:1px;background:var(--mas-ink-2);opacity:0}
.ac-hit i{inset-inline-start:50%;top:var(--y);opacity:0}
.ac-hit:hover::before,.ac-hit:focus-visible::before,.ac-hit:hover i,.ac-hit:focus-visible i{opacity:1}
.ac-hit:focus-visible{outline:none}
.ac-x{position:relative;block-size:1.25rem}
.ac-x span{position:absolute;transform:translateX(-50%);color:var(--mas-ink-2);font-size:var(--mas-text-micro);white-space:nowrap}
.pg-table-view summary{color:var(--mas-ink-2);font-size:var(--mas-text-meta);font-weight:600;cursor:pointer}
.pg-mini-table{margin-top:var(--mas-space-2);border-collapse:collapse;font-size:var(--mas-text-2)}
.pg-mini-table th,.pg-mini-table td{padding:4px 12px;border-bottom:1px solid var(--mas-line-soft);text-align:start}
.pg-mini-table th{color:var(--mas-ink-2);font-size:var(--mas-text-meta)}

/* Tables: a data table may scroll sideways on a phone */
.pg-tablewrap{overflow-x:auto;border:1px solid var(--mas-line-soft);border-radius:var(--mas-radius-object)}
.pg-table{inline-size:100%;min-inline-size:52rem;border-collapse:collapse}
.pg-courses{min-inline-size:40rem}
.pg-table th{padding:var(--mas-space-3);border-bottom:1px solid var(--mas-line);background:var(--mas-fill);color:var(--mas-ink-2);font-size:var(--mas-text-meta);font-weight:600;text-align:start;white-space:nowrap}
.pg-table td{padding:var(--mas-space-3);border-bottom:1px solid var(--mas-line-soft);vertical-align:middle;font-size:var(--mas-text-2)}
.pg-table tbody tr:last-child td{border-bottom:0}
.pg-table tr[data-href]{cursor:pointer;transition:background-color var(--mas-micro) var(--mas-ease)}
.pg-table tr[data-href]:hover{background:var(--mas-fill)}
.pg-table .prog{min-inline-size:8rem}
.pg-who{display:flex;align-items:center;gap:var(--mas-space-3);color:inherit;text-decoration:none}
.pg-who>span{display:grid;min-width:0}
.pg-who a,.pg-stack a{color:inherit;text-decoration:none}.pg-who a:hover,.pg-stack a:hover,a.pg-who:hover b{text-decoration:underline}
.pg-who small,.pg-stack small{color:var(--mas-ink-2);font-size:var(--mas-text-meta)}
.pg-stack{display:grid}
.pg-you{margin-inline-start:4px;padding:0 8px;background:var(--mas-selection);font-family:var(--mas-font-ui);font-size:var(--mas-text-micro);letter-spacing:0;vertical-align:middle}
.pg-crit{color:var(--mas-critical-text)}

/* Level checks (admin cards) */
.pl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(24rem,100%),1fr));gap:var(--mas-space-4)}
.pl-card{display:grid;align-content:start;gap:var(--mas-space-3);padding:var(--mas-space-5);border:1px solid var(--mas-line-soft);border-radius:var(--mas-radius-object);background:var(--mas-surface)}
.pl-card[data-status=review]{border-color:var(--mas-control-border)}
#lhLevel .pl-card{padding:0;border:0}
.pl-card-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--mas-space-2)}
.pl-change{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px var(--mas-space-2);margin:0;font-size:var(--mas-text-2)}
.pl-change small{margin-inline-start:auto;color:var(--mas-ink-2);font-size:var(--mas-text-meta)}
.pl-why small{color:var(--mas-ink-2);font-size:var(--mas-text-meta);font-weight:600}
.pl-why p{display:grid;gap:2px;margin:2px 0 0;font-size:var(--mas-text-2)}
.pl-why p b{font-weight:600}
.pl-why p span{color:var(--mas-ink-2)}
.pl-res{display:grid;gap:var(--mas-space-3);padding:var(--mas-space-3);border-radius:var(--mas-radius-control);background:var(--mas-fill)}
.pl-score{display:grid;gap:2px}
.pl-score b{font-size:1.75rem;font-weight:650;line-height:1.1;letter-spacing:-.02em}
.pl-score.sm b{font-size:1.25rem}
.pl-score span{color:var(--mas-ink-2);font-size:var(--mas-text-meta)}
.pl-by{display:grid;gap:var(--mas-space-2);margin:0;padding:0;list-style:none}
.pl-by li{display:grid;grid-template-columns:minmax(0,1fr) 4rem 2rem;align-items:center;gap:var(--mas-space-2);font-size:var(--mas-text-meta)}
.pl-by li b{text-align:end}
.pl-mini{block-size:.375rem;border-radius:var(--mas-radius-pill);background:var(--mas-fill-strong);overflow:hidden}
.pl-mini i{display:block;block-size:100%;background:var(--mas-ink);border-radius:inherit}
.pl-adv{display:flex;align-items:center;gap:var(--mas-space-2);margin:0;font-size:var(--mas-text-2);font-weight:600}
.pl-adv[data-adv=low]{color:var(--mas-critical-text)}
.pl-field{display:grid;gap:4px}
.pl-field>span{color:var(--mas-ink-2);font-size:var(--mas-text-meta);font-weight:600}
.pl-field small{font-weight:500}
.pl-field textarea{resize:vertical;min-height:3.5rem;font:inherit}
.pl-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--mas-space-2)}
.pg-confirm{background:var(--mas-ink);color:var(--mas-surface)}
.pg-confirm:hover{background:color-mix(in oklab,var(--mas-ink) 85%,var(--mas-surface))}

/* One learner */
.lh{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--mas-space-5)}
.lh-av{inline-size:4rem;block-size:4rem;font-size:1.125rem;background:var(--mas-selection)}
.lh-b{display:grid;gap:var(--mas-space-1)}
.lh-b p{margin:0;color:var(--mas-ink-2)}
.lh .chips-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--mas-space-2);margin-top:var(--mas-space-1)}
.lh .chip{background:var(--mas-fill)}
@media (max-width:47.5rem){ .lh{grid-template-columns:auto minmax(0,1fr)} .lh-cta{grid-column:1/-1} .lh-cta .mas-btn{inline-size:100%} }
.dp{display:grid;gap:var(--mas-space-3);margin:var(--mas-space-3) 0 0;padding:0;list-style:none}
.dp-r{display:grid;grid-template-columns:9rem minmax(0,1fr) 4rem;grid-template-areas:"l t v";align-items:center;gap:var(--mas-space-1) var(--mas-space-3)}
.dp-l{grid-area:l;display:grid;min-width:0}.dp-l b{font-size:var(--mas-text-2);font-weight:600;line-height:1.3}.dp-l small{color:var(--mas-ink-2);font-size:var(--mas-text-micro)}
.dp-track{grid-area:t;position:relative;block-size:1.5rem;background:linear-gradient(var(--mas-line),var(--mas-line)) 0 50%/100% 1px no-repeat,linear-gradient(var(--mas-line),var(--mas-line)) 50% 25%/1px 50% no-repeat}
.dp-me,.dp-team{position:absolute;top:50%;transform:translate(-50%,-50%)}
.dp-me{inline-size:.75rem;block-size:.75rem;border-radius:50%;background:var(--mas-ink);box-shadow:0 0 0 2px var(--mas-surface)}
.dp-team{inline-size:3px;block-size:1.125rem;border-radius:2px;background:var(--pg-3)}
.dp-me-k{inline-size:.75rem;block-size:.75rem;border-radius:50%;background:var(--mas-ink)}
.dp-team-k{inline-size:3px;block-size:.875rem;border-radius:2px;background:var(--pg-3)}
.dp-v{grid-area:v;display:grid;text-align:end}.dp-v b{font-size:var(--mas-text-2)}.dp-v small{color:var(--mas-ink-2);font-size:var(--mas-text-micro)}
.dp-axis{display:flex;justify-content:space-between;margin:var(--mas-space-1) calc(4rem + var(--mas-space-3)) 0 calc(9rem + var(--mas-space-3));color:var(--mas-ink-2);font-size:var(--mas-text-micro)}
.st{display:grid;gap:var(--mas-space-3);margin:0;padding:0;list-style:none}
.st li{display:grid;grid-template-columns:2rem minmax(0,1fr);gap:var(--mas-space-3);align-items:start}
.st-n{display:grid;place-items:center;inline-size:2rem;block-size:2rem;border-radius:50%;background:var(--mas-fill-strong);font-weight:700;font-size:var(--mas-text-2)}
.st-b{display:grid;gap:2px;min-width:0}
.st-b a{color:inherit;text-decoration:none}.st-b a:hover{text-decoration:underline}
.st-b b{font-weight:600;font-size:var(--mas-text-2)}
.st-b small{color:var(--mas-ink-2);font-size:var(--mas-text-meta)}
.cal-wrap{display:grid;gap:var(--mas-space-2);overflow-x:auto;padding-bottom:2px}
.cal{display:grid;grid-template-rows:repeat(7,.875rem);grid-auto-flow:column;grid-auto-columns:.875rem;gap:3px}
.cal i,.cal-legend i{border-radius:3px;background:var(--mas-fill-strong)}
.cal i[data-step="-1"]{background:none}
.cal i[data-step="1"],.cal-legend i[data-step="1"]{background:var(--pg-2)}
.cal i[data-step="2"],.cal-legend i[data-step="2"]{background:var(--pg-3)}
.cal i[data-step="4"],.cal-legend i[data-step="4"]{background:var(--pg-4)}
.cal i[data-step="5"],.cal-legend i[data-step="5"]{background:var(--pg-5)}
.cal-legend{display:flex;align-items:center;gap:3px;color:var(--mas-ink-2);font-size:var(--mas-text-micro)}
.cal-legend i{inline-size:.875rem;block-size:.875rem}
.cal-legend span:first-child{margin-inline-end:4px}.cal-legend span:last-child{margin-inline-start:4px}
.now-path{display:flex;gap:var(--mas-space-4);align-items:flex-start;margin-bottom:var(--mas-space-4);padding:var(--mas-space-4);border-radius:var(--mas-radius-object);background:var(--mas-fill)}
.now-path .pcard-ic{background:var(--mas-surface);color:var(--mas-ink)}
.now-pb{display:grid;gap:var(--mas-space-2);flex:1;min-width:0}
.now-pb small{color:var(--mas-ink-2);font-size:var(--mas-text-meta);font-weight:600}
.now-pb h3{margin:0;font:700 1.125rem/1.3 var(--mas-font-brand)}
.now-pb h3 a{color:inherit;text-decoration:none}.now-pb h3 a:hover{text-decoration:underline}
.now-pb .pflip-track{max-inline-size:24rem}
.now-pb .pflip-track li{background:var(--mas-fill-strong)}
.now-pb .pflip-track li[data-state=done]{background:var(--mas-ink)}
.now-pb .pflip-track li[data-state=active]{background:linear-gradient(90deg,var(--mas-ink) 50%,var(--mas-fill-strong) 50%)}
.now-pb .prog{max-inline-size:28rem}

/* ---------- Starting level and level check of a learning path ---------- */
.seg-level button{display:grid;justify-items:start;gap:0;min-height:2.75rem;padding:4px var(--mas-space-3);text-align:start;line-height:1.25}
.seg-level button b{font-weight:600}
.seg-level button small{color:var(--mas-ink-2);font-size:var(--mas-text-micro);font-weight:500}
.pl-status{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--mas-space-2) var(--mas-space-3);margin:calc(-1 * var(--mas-space-4)) 0 var(--mas-space-5)}
.pl-status:empty{display:none}
.pl-note{display:inline-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-ask);font-size:var(--mas-text-2)}
.pl-dlg{inline-size:min(36rem,calc(100% - 2rem));max-block-size:calc(100dvh - 2rem);overflow:auto;padding:var(--mas-space-6);border:0;border-radius:var(--mas-radius-overlay);background:var(--mas-surface);color:var(--mas-ink);box-shadow:0 30px 80px -30px rgba(15,37,51,.7)}
.pl-dlg::backdrop{background:rgba(15,37,51,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.pl-dlg[open]{display:grid;gap:var(--mas-space-4);animation:rise .32s var(--mas-damped) both}
.pl-dlg h2{margin:0;font-size:1.375rem;letter-spacing:-.02em;line-height:1.25}
.pl-kicker{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:0;color:var(--mas-ink-2);font-size:var(--mas-text-meta);font-weight:600}
.pl-kicker .mas-ic{inline-size:1rem;block-size:1rem;margin-inline-end:2px}
.pl-lead{margin:0;color:var(--mas-ink-2);line-height:1.55}
.pl-reasons{display:grid;gap:var(--mas-space-2);margin:0;padding:0;border:0}
.pl-reasons legend{margin-bottom:var(--mas-space-2);padding:0;font-weight:600}
.pl-reason{display:flex;align-items:center;gap:var(--mas-space-3);min-height:var(--mas-touch);padding:0 var(--mas-space-3);border:1px solid var(--mas-line);border-radius:var(--mas-radius-control);cursor:pointer;transition:background-color var(--mas-micro) var(--mas-ease),border-color var(--mas-micro) var(--mas-ease)}
.pl-reason:hover{background:var(--mas-fill)}
.pl-reason:has(input:checked){border-color:var(--mas-ink);background:var(--mas-selection)}
.pl-reason input{accent-color:var(--mas-brand-daintree);inline-size:1rem;block-size:1rem;margin:0}
[data-theme=dark] .pl-reason input{accent-color:var(--mas-brand-bay)}
.pl-bar{display:flex;gap:4px}
.pl-bar i{flex:1;block-size:4px;border-radius:2px;background:var(--mas-fill-strong)}
.pl-bar i[data-on=true]{background:var(--mas-ink)}
.pl-from{display:flex;align-items:center;gap:var(--mas-space-2);margin:0;color:var(--mas-ink-2);font-size:var(--mas-text-meta)}
.pl-from .mas-ic{inline-size:1rem;block-size:1rem}
.pl-opts{display:grid;gap:var(--mas-space-2)}
.pl-opt{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--mas-space-3);min-height:var(--mas-touch);padding:var(--mas-space-2) var(--mas-space-3);border:1.5px solid var(--mas-line);border-radius:var(--mas-radius-control);background:none;text-align:start;cursor:pointer;transition:background-color var(--mas-micro) var(--mas-ease),border-color var(--mas-micro) var(--mas-ease)}
.pl-opt:hover{background:var(--mas-fill)}
.pl-opt b{display:grid;place-items:center;inline-size:1.5rem;block-size:1.5rem;border-radius:50%;background:var(--mas-fill-strong);font-size:var(--mas-text-meta)}
.pl-opt[aria-checked=true]{border-color:var(--mas-ink);background:var(--mas-selection)}
.pl-opt[aria-checked=true] b{background:var(--mas-ink);color:var(--mas-surface)}
.pl-dlg .pl-by{padding:var(--mas-space-3);border-radius:var(--mas-radius-control);background:var(--mas-fill)}
.pl-dlg .pl-by li{font-size:var(--mas-text-2)}
.pl-dlg .proto{margin:0}
.pl-dlg .mas-btn[disabled],.pg-view .mas-btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}

@media (max-width:47.5rem){
  .pl-dlg{padding:var(--mas-space-5)}
  .pl-actions .mas-btn{flex:1 1 auto}
  .pl-status{justify-content:flex-start;margin-top:calc(-1 * var(--mas-space-3))}
  .ac{padding-inline:2.25rem 2.5rem}
  .fn-r{grid-template-columns:minmax(0,1fr) 1.5rem;grid-template-areas:"l n" "bar bar"}
  .dp-r{grid-template-columns:minmax(0,1fr) 3.5rem;grid-template-areas:"l v" "t t"}
  .dp-axis{margin-inline:0}
  .pg-card{padding:var(--mas-space-4)}
  .hb-h,.hb-r{grid-template-columns:minmax(0,1fr) 3rem}
  .hb-h span:nth-child(2){display:none}
  .hb-r{grid-template-areas:"l t" "bar bar" "k k"}
}
@media (prefers-reduced-motion:reduce){ .pl-dlg[open]{animation:none} button.hm-cell:hover{transform:none} }

/* ---------- View as (prototype), review assigned, every answer of a level check ---------- */
.pg-role{display:flex;flex-wrap:wrap;align-items:center;gap:var(--mas-space-2)}
.pg-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--mas-space-3)}
.pg-top .crumb{margin:0}
.lh-name{margin:0;font:700 var(--mas-name)/1.2 var(--mas-font-brand);letter-spacing:-.02em}
.rv-card{border-color:var(--mas-control-border)}
.rv-why{margin:0 0 var(--mas-space-3)}
.rv-list{display:grid;gap:var(--mas-space-2);margin:0;padding:0;list-style:none}
.rv-list li{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:var(--mas-space-3);padding:var(--mas-space-2) var(--mas-space-3);border-radius:var(--mas-radius-control);background:var(--mas-fill)}
.rv-list .les-ic{display:grid;place-items:center;inline-size:2rem;block-size:2rem;border-radius:50%;background:var(--mas-surface)}
.pl-all{justify-self:start;min-height:2.25rem;background:var(--mas-surface)}
.pl-all .mas-ic{inline-size:1rem;block-size:1rem}
.pl-reason .pg-stack small{font-size:var(--mas-text-meta)}
.pl-reason input[type=checkbox]{flex:none}
.ans{display:grid;gap:var(--mas-space-3);margin:0;padding:0;list-style:none}
.ans 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)}
.ans-n{display:grid;place-items:center;inline-size:1.75rem;block-size:1.75rem;border-radius:50%;background:var(--mas-ink);color:var(--mas-surface)}
.ans li[data-ok=false] .ans-n{background:none;color:var(--mas-critical-text);box-shadow:inset 0 0 0 1.5px currentColor}
.ans-n .mas-ic{inline-size:1rem;block-size:1rem}
.ans-b{display:grid;gap:4px;min-width:0}
.ans-b small{color:var(--mas-ink-2);font-size:var(--mas-text-meta)}
.ans-b b{font-weight:600}
.ans-b p{margin:0;font-size:var(--mas-text-2)}
.ans-k{display:inline-block;min-inline-size:6.5rem;color:var(--mas-ink-2);font-size:var(--mas-text-meta);font-weight:600}
.rv-note{display:flex;align-items:center;gap:var(--mas-space-2);margin:0 0 var(--mas-space-2);padding:var(--mas-space-2) var(--mas-space-3);border-radius:var(--mas-radius-control);background:var(--mas-ask);font-size:var(--mas-text-2);font-weight:600}
@media (max-width:47.5rem){ .rv-list li{grid-template-columns:auto minmax(0,1fr) auto} .rv-list .mas-link{grid-column:2} }

/* ---------- One learner: key numbers as a carousel (user request, 2026-10-15) ----------
   Brand tones for the important icons: daintree, bay, red, kashmir. On hover or focus a gradient of the card's
   tone rises from the bottom and the card lifts; the text switches to the colour that reads on it. */
.kc{display:grid;grid-template-columns:minmax(0,1fr);min-width:0}
.kc-track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(14.5rem,calc((100% - 4 * var(--mas-space-3)) / 4.4));gap:var(--mas-space-3);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:2px;padding:6px 2px 10px;scrollbar-width:none;outline-offset:4px}
.kc-track::-webkit-scrollbar{display:none}
.kc-card{--t1:#0F2533;--t2:#516F8D;--on:#FBFCFD;--ic-bg:#0F2533;--ic-fg:#B6E3E8;
  position:relative;isolation:isolate;display:grid;align-content:start;gap:.375rem;min-block-size:11.5rem;padding:var(--mas-space-4);overflow:hidden;scroll-snap-align:start;
  border-radius:var(--mas-radius-overlay);background:var(--mas-fill);color:var(--mas-ink);text-decoration:none;box-shadow:inset 0 0 0 1px var(--mas-line-soft);
  transition:transform .28s var(--mas-damped),box-shadow .28s var(--mas-ease),color .2s var(--mas-ease)}
.kc-card[data-tone=bay]{--t1:#B6E3E8;--t2:#FBFCFD;--on:#0F2533;--ic-bg:#B6E3E8;--ic-fg:#0F2533}
.kc-card[data-tone=red]{--t1:#DF1833;--t2:#A71B31;--on:#FBFCFD;--ic-bg:color-mix(in oklab,#DF1833 14%,#FBFCFD);--ic-fg:#DF1833}
.kc-card[data-tone=kashmir]{--t1:#516F8D;--t2:#0F2533;--on:#FBFCFD;--ic-bg:#516F8D;--ic-fg:#FBFCFD}
.kc-card::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(160deg,var(--t1) 0%,var(--t2) 100%);opacity:0;transform:translateY(30%);transition:opacity .3s var(--mas-ease),transform .4s var(--mas-damped)}
.kc-card:hover,.kc-card:focus-visible{transform:translateY(-4px);color:var(--on);box-shadow:0 18px 36px -18px rgba(15,37,51,.55)}
.kc-card:hover::before,.kc-card:focus-visible::before{opacity:1;transform:none}
.kc-top{display:flex;align-items:center;gap:var(--mas-space-2)}
.kc-top small{color:inherit;opacity:.8;font-size:var(--mas-text-meta);font-weight:600}
.kc-ic{display:grid;place-items:center;flex:none;inline-size:2.25rem;block-size:2.25rem;border-radius:.75rem;background:var(--ic-bg);color:var(--ic-fg);transition:background-color .2s var(--mas-ease),color .2s var(--mas-ease)}
.kc-card:hover .kc-ic,.kc-card:focus-visible .kc-ic{background:rgba(251,252,253,.92);color:#0F2533}
.kc-card b{font-size:1.875rem;font-weight:700;line-height:1.1;letter-spacing:-.02em}
.kc-sub{font-size:var(--mas-text-meta);opacity:.8}
.kc-go{display:inline-flex;align-items:center;gap:2px;margin-top:auto;font-size:var(--mas-text-meta);font-weight:600;opacity:0;transform:translateX(-4px);transition:opacity .2s var(--mas-ease),transform .2s var(--mas-ease)}
.kc-go .mas-ic{inline-size:.875rem;block-size:.875rem}
.kc-card:hover .kc-go,.kc-card:focus-visible .kc-go{opacity:1;transform:none}
/* Small pictures of each number: they take currentColor, so they read on the fill and on the gradient */
.kc-bar{position:relative;display:block;block-size:.375rem;margin-top:.25rem;border-radius:var(--mas-radius-pill);background:color-mix(in oklab,currentColor 16%,transparent)}
.kc-bar i{display:block;block-size:100%;border-radius:inherit;background:currentColor}
.kc-bar em{position:absolute;top:-4px;inline-size:2px;block-size:calc(100% + 8px);border-radius:1px;background:var(--mas-brand-red)}
.kc-spark{display:flex;align-items:flex-end;gap:3px;block-size:1.75rem;margin-top:.25rem}
.kc-spark i{flex:1;min-block-size:3px;border-radius:2px 2px 0 0;background:currentColor;opacity:.55}
.kc-days{display:flex;gap:3px;margin-top:.375rem}
.kc-days i{flex:1;block-size:.625rem;border-radius:2px;background:color-mix(in oklab,currentColor 16%,transparent)}
.kc-days i[data-on=true]{background:currentColor;opacity:.7}
.kc-ladder{display:flex;align-items:flex-end;gap:4px;block-size:1.5rem;margin-top:.25rem}
.kc-ladder i{inline-size:1.25rem;border-radius:3px;background:color-mix(in oklab,currentColor 18%,transparent)}
.kc-ladder i:nth-child(1){block-size:40%}.kc-ladder i:nth-child(2){block-size:70%}.kc-ladder i:nth-child(3){block-size:100%}
.kc-ladder i[data-on=true]{background:currentColor}
.kc-card[data-tone=red] .kc-spark i{background:#DF1833;opacity:.75}
.kc-card[data-tone=red]:hover .kc-spark i,.kc-card[data-tone=red]:focus-visible .kc-spark i{background:currentColor}
@media (prefers-reduced-motion:reduce){ .kc-card,.kc-card::before,.kc-go{transition:none} .kc-card:hover{transform:none} }

/* ---------- Level check, visible: Daintree panel with the gauge, the level ladder and the status ---------- */
.lv-hero{display:grid;grid-template-columns:auto minmax(0,1.4fr) minmax(15rem,1fr);gap:var(--mas-space-6);align-items:center;padding:var(--mas-space-6);border-radius:var(--mas-radius-overlay);
  background:radial-gradient(120% 140% at 0% 0%,color-mix(in oklab,#516F8D 55%,#0F2533) 0%,#0F2533 62%);color:#FBFCFD;box-shadow:0 24px 48px -28px rgba(15,37,51,.7)}
.lv-hero[data-state=none]{grid-template-columns:minmax(0,1fr)}
.lv-hero h2{margin:0;font-size:1.375rem;letter-spacing:-.02em;color:#FBFCFD}
.lv-kicker{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:0;color:#B6E3E8;font-size:var(--mas-text-meta);font-weight:600}
.lv-kicker .mas-ic{inline-size:1rem;block-size:1rem;margin-inline-end:2px}
.lv-main{display:grid;gap:var(--mas-space-3);min-width:0}
.lv-title{display:flex;flex-wrap:wrap;align-items:center;gap:var(--mas-space-2) var(--mas-space-3)}
.lv-lead{margin:0;max-inline-size:44rem;color:rgba(251,252,253,.82);line-height:1.55}
.lv-badge{display:inline-flex;align-items:center;gap:6px;padding:.25rem .75rem;border-radius:var(--mas-radius-pill);font-size:var(--mas-text-meta);font-weight:700}
.lv-badge .mas-ic{inline-size:1rem;block-size:1rem}
.lv-badge[data-k=ok]{background:#B6E3E8;color:#0F2533}
.lv-badge[data-k=wait]{background:rgba(251,252,253,.14);color:#FBFCFD;box-shadow:inset 0 0 0 1px rgba(182,227,232,.5)}
.lv-badge[data-k=low]{background:#DF1833;color:#FBFCFD}
.lv-score{display:grid;justify-items:center;gap:var(--mas-space-2)}
.lv-gauge{inline-size:8.5rem;block-size:8.5rem;overflow:visible}
.lv-g-track{fill:none;stroke:rgba(251,252,253,.14);stroke-width:9}
.lv-g-val{fill:none;stroke:#DF1833;stroke-width:9;stroke-linecap:round;transition:stroke-dasharray .8s var(--mas-damped)}
.lv-g-val[data-pass=true]{stroke:#B6E3E8}
.lv-g-mark{fill:#FBFCFD;stroke:#0F2533;stroke-width:2}
.lv-g-big{fill:#FBFCFD;font:700 19px var(--mas-font-brand);text-anchor:middle}
.lv-g-small{fill:#B6E3E8;font:600 10px var(--mas-font-ui);text-anchor:middle}
.lv-need{display:inline-flex;align-items:center;gap:6px;color:rgba(251,252,253,.8);font-size:var(--mas-text-meta);font-weight:600}
.lv-need i{inline-size:.5rem;block-size:.5rem;border-radius:50%;background:#FBFCFD;box-shadow:0 0 0 2px #0F2533,0 0 0 3px rgba(251,252,253,.5)}
.lv-ladder{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--mas-space-2);margin:0;padding:0;list-style:none;counter-reset:lv}
.lv-ladder li{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--mas-space-2);padding:var(--mas-space-3);border-radius:var(--mas-radius-object);background:rgba(251,252,253,.06);box-shadow:inset 0 0 0 1px rgba(182,227,232,.14)}
.lv-ladder li:not(:last-child)::after{content:"";position:absolute;inset-inline-end:calc(-1 * var(--mas-space-2));top:50%;inline-size:var(--mas-space-2);block-size:2px;background:rgba(182,227,232,.3)}
.lv-ladder .lv-step{display:grid;place-items:center;inline-size:2rem;block-size:2rem;border-radius:.625rem;background:rgba(251,252,253,.1)}
.lv-ladder .lv-step .bars i{background:rgba(251,252,253,.35)}.lv-ladder .lv-step .bars i.on{background:#FBFCFD}
.lv-l{display:grid;min-width:0}
.lv-l b{font-weight:700;font-size:var(--mas-text-2)}
.lv-l small{color:rgba(251,252,253,.66);font-size:var(--mas-text-micro);line-height:1.3}
.lv-ladder em{position:absolute;top:-.625rem;inset-inline-end:.5rem;padding:1px 8px;border-radius:var(--mas-radius-pill);font:700 var(--mas-text-micro)/1.5 var(--mas-font-ui);font-style:normal}
.lv-ladder li[data-state=now]{background:#B6E3E8;color:#0F2533;box-shadow:0 10px 24px -14px rgba(182,227,232,.9)}
.lv-ladder li[data-state=now] .lv-l small{color:#516F8D}
.lv-ladder li[data-state=now] .lv-step{background:#0F2533}
.lv-ladder li[data-state=now] em{background:#0F2533;color:#B6E3E8}
.lv-ladder li[data-state=asked]{box-shadow:inset 0 0 0 1.5px #DF1833}
.lv-ladder li[data-state=asked] em{background:#DF1833;color:#FBFCFD}
.lv-why{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px var(--mas-space-2);margin:0;font-size:var(--mas-text-2)}
.lv-why span{color:#B6E3E8;font-size:var(--mas-text-meta);font-weight:600}
.lv-why q{color:rgba(251,252,253,.75)}
.lv-side{display:grid;gap:var(--mas-space-3);align-content:center}
.lv-by{display:grid;gap:var(--mas-space-2);margin:0;padding:var(--mas-space-3);list-style:none;border-radius:var(--mas-radius-object);background:rgba(251,252,253,.06)}
.lv-by li{display:grid;grid-template-columns:minmax(0,1fr) 4rem 2rem;align-items:center;gap:var(--mas-space-2);font-size:var(--mas-text-meta)}
.lv-by li b{text-align:end}
.lv-mini{block-size:.375rem;border-radius:var(--mas-radius-pill);background:rgba(251,252,253,.16);overflow:hidden}
.lv-mini i{display:block;block-size:100%;border-radius:inherit;background:#B6E3E8}
.lv-btn{justify-self:start;background:rgba(251,252,253,.12);color:#FBFCFD;box-shadow:inset 0 0 0 1px rgba(182,227,232,.35)}
.lv-btn:hover{background:rgba(251,252,253,.22)}
.lv-btn-strong{background:#B6E3E8;color:#0F2533;box-shadow:none}
.lv-btn-strong:hover{background:#FBFCFD}
.lv-acts{display:flex;flex-wrap:wrap;gap:var(--mas-space-2)}
.lv-link{color:#B6E3E8}
.lv-note>span{color:#B6E3E8}
.lv-note .mas-input{background:rgba(251,252,253,.08);border-color:rgba(182,227,232,.4);color:#FBFCFD}
.lv-note .mas-input::placeholder{color:rgba(251,252,253,.55)}
.lv-hero :focus-visible{outline-color:#B6E3E8}
@media (max-width:80rem){ .lv-hero{grid-template-columns:auto minmax(0,1fr)} .lv-side{grid-column:1/-1} }
@media (max-width:47.5rem){
  .lv-hero{grid-template-columns:minmax(0,1fr);padding:var(--mas-space-5)}
  .lv-ladder{grid-template-columns:minmax(0,1fr)}
  .lv-ladder li:not(:last-child)::after{inset-inline-end:auto;inset-inline-start:2rem;top:100%;inline-size:2px;block-size:var(--mas-space-2)}
  .kc-track{grid-auto-columns:78%}
}

/* ---------- Footer of every view: MAS Global on YouTube, LinkedIn and the website (router.js) ---------- */
.site-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--mas-space-2) var(--mas-space-6);margin-top:var(--mas-space-8);padding:var(--mas-space-3) 4.5rem 0 0;border-top:1px solid var(--mas-line)} /* compact (2026-10-19); the right end leaves room for the voice button */
.sf-brand{display:flex;align-items:center;gap:var(--mas-space-3);color:var(--mas-ink-2);font-size:var(--mas-text-2)}
.sf-brand img{block-size:1.375rem;inline-size:auto}
.sf-brand .on-dark,[data-theme=dark] .sf-brand .on-light{display:none}
[data-theme=dark] .sf-brand .on-dark{display:block}
.sf-links{display:flex;gap:var(--mas-space-2);margin:0;padding:0;list-style:none}
.sf-links a{display:grid;place-items:center;inline-size:2.25rem;block-size:2.25rem;border-radius:50%;background:#0F2533;color:#B6E3E8;transition:background-color var(--mas-micro) var(--mas-ease),color var(--mas-micro) var(--mas-ease),transform .2s var(--mas-damped)}
.sf-links a:hover,.sf-links a:focus-visible{transform:translateY(-2px)}
.sf-links a[data-net=youtube]:hover,.sf-links a[data-net=youtube]:focus-visible{background:#DF1833;color:#FBFCFD}
.sf-links a[data-net=linkedin]:hover,.sf-links a[data-net=linkedin]:focus-visible{background:#516F8D;color:#FBFCFD}
.sf-links a[data-net=web]:hover,.sf-links a[data-net=web]:focus-visible{background:#B6E3E8;color:#0F2533}
[data-theme=dark] .sf-links a{background:#B6E3E8;color:#0F2533}
.sf-links .mas-ic{inline-size:1.25rem;block-size:1.25rem}
.sf-copy{color:var(--mas-ink-2);font-size:var(--mas-text-meta)}
.home-view~.site-foot,body[data-view=home] .site-foot{margin-top:var(--mas-space-6)}
@media (prefers-reduced-motion:reduce){ .sf-links a:hover{transform:none} }
/* Level check beside Learning activity (user request, 2026-10-16): the panel in half the width */
.lv-row{align-items:stretch}
.lv-row .lv-hero{grid-template-columns:auto minmax(0,1fr);align-content:start;gap:var(--mas-space-4) var(--mas-space-5);padding:var(--mas-space-5)}
.lv-row .lv-hero[data-state=none]{grid-template-columns:minmax(0,1fr)}
.lv-row .lv-side{grid-column:1/-1;grid-template-columns:minmax(0,1fr) auto;align-items:center}
.lv-row .lv-side .lv-acts,.lv-row .lv-side .lv-note{grid-column:1/-1}
.lv-row .lv-gauge{inline-size:7rem;block-size:7rem}
.lv-row .lv-ladder li{grid-template-columns:minmax(0,1fr);justify-items:start;padding:var(--mas-space-2) var(--mas-space-3)}
.lv-row .lv-ladder .lv-step{inline-size:1.75rem;block-size:1.75rem}
@media (max-width:30rem){ .lv-row .lv-side{grid-template-columns:minmax(0,1fr)} }
.lv-row .cal{grid-template-rows:repeat(7,1.125rem);grid-auto-columns:1.125rem;gap:4px}
.lv-row .pg-card{display:flex;flex-direction:column}

/* ---------- «What has been hardest» in the Level check style (user request, 2026-10-16): a Daintree panel ---------- */
.pg-card.pg-dark{border-color:transparent;background:radial-gradient(120% 140% at 100% 0%,color-mix(in oklab,#516F8D 55%,#0F2533) 0%,#0F2533 62%);color:#FBFCFD;box-shadow:0 24px 48px -28px rgba(15,37,51,.7)}
.pg-dark h2{color:#FBFCFD}
.pg-dark :is(.sec-head small,.pg-h3,.dp-l small,.dp-v small,.st-b small,.st-k,.dp-axis,.dp-legend,.empty){color:rgba(251,252,253,.72)}
.pg-dark .empty b{color:#FBFCFD}
.pg-dark .pg-h3{color:#B6E3E8}
.pg-dark a{color:#FBFCFD}
.pg-dark .dp-track{background:linear-gradient(rgba(251,252,253,.22),rgba(251,252,253,.22)) 0 50%/100% 1px no-repeat,linear-gradient(rgba(251,252,253,.22),rgba(251,252,253,.22)) 50% 25%/1px 50% no-repeat}
.pg-dark .dp-me,.pg-dark .dp-me-k{background:#B6E3E8}
.pg-dark .dp-me{box-shadow:0 0 0 2px #0F2533}
.pg-dark .dp-team,.pg-dark .dp-team-k{background:rgba(251,252,253,.55)}
.pg-dark .st li{padding:var(--mas-space-2);border-radius:var(--mas-radius-control);background:rgba(251,252,253,.06)}
.pg-dark .st-n{background:#B6E3E8;color:#0F2533}
.pg-dark :focus-visible{outline-color:#B6E3E8}

/* ---------- My progress (learner): MAS red where it guides the eye (user request, 2026-10-16) ---------- */
.pg-self h1 span{color:#DF1833}
.pg-self .lh-av{background:#0F2533;color:#FBFCFD;box-shadow:0 0 0 3px var(--mas-surface),0 0 0 5px #DF1833}
.pg-self .pg-card h2::before,.pg-self .lv-hero h2::before{content:"";display:inline-block;inline-size:.5rem;block-size:.5rem;margin-inline-end:.5rem;vertical-align:.18em;background:#DF1833}
.pg-self .dp-me,.pg-self .dp-me-k{background:#DF1833}
.pg-self .pg-dark .dp-me{box-shadow:0 0 0 2px #0F2533}
.pg-self .st-n{background:#DF1833;color:#FBFCFD}
.pg-self .now-pb .prog-bar i,.pg-self .pg-courses .prog-bar i{background:#DF1833}
.pg-self .now-pb .pflip-track li[data-state=done]{background:#DF1833}
.pg-self .now-pb .pflip-track li[data-state=active]{background:linear-gradient(90deg,#DF1833 50%,var(--mas-fill-strong) 50%)}
.pg-self .now-path .pcard-ic{background:#DF1833;color:#FBFCFD}
.pg-self .kc-card[data-tone=daintree] .kc-bar i{background:#DF1833}
.pg-self .kc-card:hover .kc-bar i,.pg-self .kc-card:focus-visible .kc-bar i{background:currentColor}
.pg-self .rv-card{border-color:color-mix(in oklab,#DF1833 45%,transparent)}
.pg-self .rv-list .mas-pill-wait{background:color-mix(in oklab,#DF1833 12%,var(--mas-surface))}
.pg-self .rv-list .mas-pill-wait::before{background:#DF1833}
.pg-self .rv-list .mas-link{color:#DF1833;text-decoration-color:currentColor;font-weight:600}
.pg-self .lv-ladder li[data-state=now] em{background:#DF1833;color:#FBFCFD}
.pg-self .lv-hero .lv-btn:not(.lv-btn-strong){background:#DF1833;box-shadow:none}
.pg-self .lv-hero .lv-btn:not(.lv-btn-strong):hover{background:#BD142B}
.pg-self .cal i[data-step="5"],.pg-self .cal-legend i[data-step="5"]{background:#DF1833}
[data-theme=dark] .pg-self .lh-av{background:#B6E3E8;color:#0F2533}

/* Side arrows of the carousel: 40% at rest (20% is lost on the grey cards), full on hover; red on hover like the
   other MAS actions. A fade covers the cut card on the side that has more cards. */
.kc{position:relative;--fl:0px;--fr:0px}
.kc-track{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl),#000 calc(100% - var(--fr)),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl),#000 calc(100% - var(--fr)),transparent 100%)}
.kc-edge{position:absolute;top:50%;z-index:2;display:grid;place-items:center;inline-size:2.75rem;block-size:2.75rem;padding:0;border:0;border-radius:50%;background:#0F2533;color:#B6E3E8;
  box-shadow:0 8px 20px -8px rgba(15,37,51,.6);opacity:.4;transform:translateY(-50%);cursor:pointer;transition:opacity .2s var(--mas-ease),background-color .2s var(--mas-ease),transform .2s var(--mas-damped)}
.kc-edge[data-edge="-1"]{inset-inline-start:.25rem}
.kc-edge[data-edge="1"]{inset-inline-end:.25rem}
.kc:hover .kc-edge{opacity:.75}
.kc-edge:hover{opacity:1;background:#DF1833;color:#FBFCFD;transform:translateY(-50%) scale(1.06)}
.kc-edge[data-off=true]{opacity:0;pointer-events:none}
.kc-edge .mas-ic{inline-size:1.25rem;block-size:1.25rem}
[data-theme=dark] .kc-edge{background:#B6E3E8;color:#0F2533}
@media (prefers-reduced-motion:reduce){ .kc-edge{transition:none} .kc-edge:hover{transform:translateY(-50%)} }

/* Evidence of module activities (Progress · Evidence, admin) */
.ev-card h3{margin:0;font-size:var(--mas-text-3,1.05rem)}
.ev-card h3 a{color:inherit}
.ev-file{display:flex;align-items:center;gap:var(--mas-space-2);margin:0;font-size:var(--mas-text-2)}
.ev-file small{color:var(--mas-ink-2)}
.ev-text{margin:0;padding:var(--mas-space-3);border-radius:var(--mas-radius-control);background:var(--mas-fill);font-size:var(--mas-text-2);white-space:pre-wrap;overflow-wrap:anywhere;max-block-size:12rem;overflow:auto}
.ev-crit{display:grid;gap:4px;margin:0;padding:0;list-style:none;font-size:var(--mas-text-meta)}
.ev-crit li{display:flex;align-items:center;gap:var(--mas-space-2)}
.ev-crit li[data-on=false]{color:var(--mas-ink-2)}
.ev-crit .mas-ic{inline-size:1rem;block-size:1rem;flex:none}
.pl-acts{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--mas-space-2)}

/* Progress · Interest (admin) */
.int-list{display:grid;gap:0;margin:0;padding:0;list-style:none}
.int-list li{display:grid;grid-template-columns:minmax(12rem,2fr) minmax(6rem,2fr) auto minmax(8rem,1.5fr);align-items:center;gap:var(--mas-space-3);padding:var(--mas-space-3) 0;border-block-end:1px solid var(--mas-line-soft)}
.int-list li:last-child{border-block-end:0}
.int-b{display:grid;gap:2px}.int-b small{color:var(--mas-ink-2);font-size:var(--mas-text-meta)}
.int-bar{display:block;block-size:.5rem;border-radius:999px;background:var(--mas-fill);overflow:hidden}
.int-bar i{display:block;block-size:100%;border-radius:inherit;background:var(--mas-brand-bay)}
.int-n{font-size:var(--mas-text-meta);color:var(--mas-ink-2);white-space:nowrap}.int-n b{color:var(--mas-ink);font-size:var(--mas-text-2)}
.int-who{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.int-who .mas-av{inline-size:1.75rem;block-size:1.75rem;font-size:.65rem}
.int-who .int-new{outline:2px solid var(--mas-brand-red,#E31B23);outline-offset:1px}
.int-chip{background:var(--mas-brand-red,#E31B23);color:#fff}
@media (max-width:720px){.int-list li{grid-template-columns:1fr auto}.int-bar{grid-column:1/-1}.int-who{grid-column:1/-1}}