@font-face {
  font-family: "Medeo Sans";
  src: url("fonts/MedeoSansVariable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Medeo Sans";
  src: url("fonts/MedeoSansVariable-Italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Medeo Mono";
  src: url("fonts/MedeoMonoVariable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --font-sans: "Medeo Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Medeo Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --type-title: 1.875rem;
  --type-step: 1.5rem;
  --type-action: 1.125rem;
  --type-body: 1rem;
  --type-ui: .875rem;
  --type-meta: .875rem;
  --type-code: .9375rem;
  --weight-body: 400;
  --weight-label: 500;
  --weight-control: 600;
  --weight-nav: 600;
  --weight-action: 600;
  --weight-heading: 700;
  --leading-body: 1.7;
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem;
  font: 100%/1.5 var(--font-sans);
  font-optical-sizing: auto; font-synthesis: none; color-scheme: light;
  --bg: #f2f4f8; --card: #ffffff; --text: #1c1c1e; --muted: #5b626e;
  --blue: #0064d8; --blue-hover: #0056bf; --soft: #f2f4f7; --tint: #e9f1ff;
  --line: #dfe3eb; --green: #217447; --red: #b42332;
  --radius: 1rem; --radius-inset: .75rem; --radius-control: .5rem;
  --glass: rgba(255,255,255,.86); --glass-solid: #ffffff; --glass-border: rgba(255,255,255,.95);
  --shadow: 0 4px 24px #1b304508, 0 1px 3px #1b304504;
  --shadow-glass: 0 8px 28px #1b304510, 0 2px 6px #1b304508, inset 0 1px 0 #ffffff;
  --shadow-control: 0 2px 5px #1b30450d, inset 0 1px 0 #ffffff80;
  --ease-ui: cubic-bezier(.2,.8,.2,1); --header-offset: 6rem;
  background: var(--bg); color: var(--text);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-padding-top: var(--header-offset); }
body { margin: 0; -webkit-font-smoothing: antialiased; }
body:has(dialog[open]) { overflow: hidden; }
.guide-image-caption { margin: .75rem 0 0; color: var(--muted); font-size: var(--type-meta); line-height: var(--leading-body); overflow-wrap: anywhere; }
.guide-image-dialog>.guide-image-caption { margin: 0; padding: .75rem 1rem; }
button, input, select, textarea { font: inherit; }
a { color: var(--blue); text-underline-offset: .2em; }
button, a, summary { touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
#app:focus, #group-dialog-title:focus { outline: none; }
h1,h2,h3,p { margin: 0 0 .75rem; }
h1,h2,h3 { text-wrap: balance; }
h1 { font-size: var(--type-title); line-height: 1.2; letter-spacing: -.025em; font-weight: var(--weight-heading); }
h2 { font-size: var(--type-step); line-height: 1.25; letter-spacing: -.02em; font-weight: var(--weight-heading); }
h3 { font-size: var(--type-action); font-weight: var(--weight-action); line-height: 1.4; letter-spacing: -.01em; }
p { line-height: 1.65; }
.eyebrow,.course-label { font-size: var(--type-meta); color: var(--muted); font-weight: var(--weight-label); margin-bottom: .75rem; }
.lead { max-width: 65ch; font-size: var(--type-body); line-height: var(--leading-body); color: var(--text); }
.muted { color: var(--muted); }
.tiny { font-size: var(--type-meta); }
code,pre,.mono { font-family: var(--font-mono); }
strong code,code strong { font-weight: var(--weight-label); }
code { padding: .15rem .3rem; border-radius: .3rem; background: #ededf1; font-size: .875em; overflow-wrap: anywhere; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; top: -5rem; left: 1rem; z-index: 99; padding: .75rem; background: white; }
.skip:focus { top: .5rem; }
.topbar { position: sticky; top: 0; z-index: 40; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2rem; min-height: 6rem; padding: 1.5rem max(2rem,calc((100vw - 88rem)/2)); border-bottom: 1px solid var(--line); background: var(--bg); }
.brand { display: flex; align-items: center; gap: .75rem; min-height: 2.75rem; color: var(--text); text-decoration: none; flex-shrink: 0; }
.brand>span:last-child { display: grid; gap: .35rem; }
.brand b { font-size: .95rem; font-weight: 650; }
.brand small { color: var(--muted); font-size: var(--type-meta); }
.tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; order: 3; flex: 0 1 auto; min-width: 0; padding: .5rem; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--glass-solid); box-shadow: var(--shadow-glass); }
.tabs a { display: flex; flex-shrink: 0; align-items: center; justify-content: center; gap: .5rem; padding: .625rem .875rem; min-height: 3rem; min-width: 2.75rem; border-radius: var(--radius-control); color: var(--muted); font-size: var(--type-meta); font-weight: var(--weight-control); text-decoration: none; white-space: normal; transition: background-color 200ms var(--ease-ui), color 200ms var(--ease-ui), box-shadow 200ms var(--ease-ui); }
.tabs a>svg { width: 20px; height: 20px; flex-shrink: 0; }
.tabs a>span { min-width: 0; overflow-wrap: normal; }
.tabs a.active { background: var(--tint); color: var(--blue); box-shadow: inset 0 0 0 1px #0064d80d; font-weight: var(--weight-nav); }
.top-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .75rem 1.5rem; flex-shrink: 0; }
#change-group { font-size: var(--type-meta); min-height: 2.75rem; max-width: 100%; gap: .4rem; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--glass-solid); padding: .5rem .875rem; box-shadow: var(--shadow-control); }
#selected-group { min-width: 0; overflow-wrap: anywhere; }
.topbar-progress { display: grid; gap: .5rem; width: 12rem; max-width: 100%; padding-inline: .5rem; }
.progress-pill { color: var(--muted); font-size: var(--type-meta); text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
progress { display: block; width: 100%; height: .65rem; overflow: hidden; border: 0; border-radius: var(--radius-control); background: var(--line); accent-color: var(--blue); }
progress::-webkit-progress-bar { background: var(--line); border-radius: var(--radius-control); }
progress::-webkit-progress-value { background: var(--blue); border-radius: var(--radius-control); }
progress::-moz-progress-bar { background: var(--blue); border-radius: var(--radius-control); }
.topbar-progress progress { height: .35rem; }
main { max-width: 77rem; margin: auto; min-height: 76vh; padding: 2rem 1.5rem 3rem; overflow-wrap: anywhere; }
.page-head { padding-bottom: 1.5rem; }
.page-head h1 { margin-bottom: var(--space-3); }
.page-head .actions { margin-top: 1rem; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); }
.button,button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.75rem; min-width: 2.75rem; max-width: 100%; padding: var(--space-2) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--card); color: var(--blue); box-shadow: var(--shadow-control); font-size: var(--type-ui); font-weight: var(--weight-control); text-align: center; white-space: normal; overflow-wrap: anywhere; text-decoration: none; line-height: 1.4; cursor: pointer; transition: background-color 200ms var(--ease-ui), color 200ms var(--ease-ui), border-color 200ms var(--ease-ui), box-shadow 200ms var(--ease-ui); }
.button.primary,button.primary { background: var(--blue); color: white; border-color: var(--blue); box-shadow: 0 3px 8px #0064d81f, inset 0 1px 0 #ffffff26; }
.button.text,button.text { color: var(--blue); background: transparent; border-color: transparent; box-shadow: none; }
.button.large { min-height: 2.75rem; padding-inline: 1.125rem; }
button:not(:disabled):not([aria-disabled="true"]):active,.button:not(:disabled):not([aria-disabled="true"]):active { background: var(--tint); box-shadow: inset 0 1px 3px #1b30451a; transition-duration: 0s; }
.button.primary:not(:disabled):not([aria-disabled="true"]):active,button.primary:not(:disabled):not([aria-disabled="true"]):active { background: var(--blue-hover); box-shadow: inset 0 2px 4px #002e6e33; }
.button:disabled,button:disabled,.button[aria-disabled="true"],button[aria-disabled="true"] { color: var(--muted); background: var(--soft); border-color: var(--line); box-shadow: none; cursor: not-allowed; }
.group-dialog { width: min(36rem,calc(100% - 2rem)); max-height: calc(100dvh - 2rem); padding: 1.5rem; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); color: var(--text); box-shadow: 0 24px 80px #1b30452e, var(--shadow); }
.group-dialog::backdrop { background: #24334a52; }
.group-dialog-head { display: flex; justify-content: flex-end; align-items: center; }
#close-group { width: 2.75rem; padding: 0; font-size: 1.5rem; border: 0; border-radius: 50%; background: var(--soft); }
.entry-course { font-size: var(--type-meta); color: var(--muted); margin: 1rem 0 .5rem; }
.group-dialog h1 { font-size: var(--type-title); line-height: 1.2; margin-bottom: .75rem; }
#group-dialog-description { color: var(--muted); font-size: .95rem; max-width: 30rem; }
.group-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .625rem; margin-top: 1.5rem; }
.group-option { position: relative; display: grid; justify-content: stretch; gap: .5rem; padding: .875rem 2.5rem .875rem 1rem; text-align: left; background: var(--soft); color: var(--text); border-color: transparent; border-radius: var(--radius-inset); box-shadow: none; }
.group-option-title { display: grid; gap: .1rem; }
.group-option-name { font-size: var(--type-meta); color: var(--muted); font-weight: 450; }
.group-option strong { font-size: 1rem; font-weight: 600; }
.group-option-time { font-size: var(--type-meta); color: var(--muted); }
.choice-indicator { position: absolute; right: 1rem; top: 1.125rem; color: var(--blue); }
.choice-indicator svg { width: 1rem; height: 1rem; }
.group-option.remembered { background: var(--tint); border-color: var(--blue); }
.group-footnote { margin: 1rem 0 0; font-size: var(--type-meta); color: var(--muted); }
.loading { max-width: 40rem; margin: 15vh auto; padding: 2rem; text-align: center; }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 1.5rem 0 1.5rem; }
.section-head h2 { margin: 0; }
.section-head p { margin: .5rem 0 0; color: var(--muted); font-size: .95rem; }
.section-head>a { font-size: .85rem; flex-shrink: 0; }
.provider-role { display: inline-flex; padding: .3rem .75rem; border-radius: var(--radius-control); font-size: var(--type-meta); color: var(--muted); background: var(--soft); }
.task-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.task-card { display: flex; flex-direction: column; min-width: 0; padding: 1.5rem; }
.task-card-top { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.task-number { color: var(--muted); font-size: var(--type-meta); font-weight: 550; }
.status { display: inline-flex; border-radius: var(--radius-control); padding: .35rem .75rem; color: var(--muted); background: var(--soft); font-size: var(--type-meta); line-height: 1.4; }
.status.done { color: var(--green); background: #edf6ef; }
.task-card h3 { font-size: 1.3rem; line-height: 1.35; margin: 1.5rem 0 .75rem; }
.task-card p { color: var(--muted); font-size: .9rem; }
.task-card p.tiny { font-size: var(--type-meta); }
.task-card .actions { margin-top: auto; padding-top: .5rem; }
.task-card.locked { background: #f0f1f5; box-shadow: none; }
.task-card.done { border-color: #a7c9b2; }
.task-artifact { margin-top: auto; color: var(--muted); font-size: var(--type-meta); }
.pipeline-summary { display: flex; flex-wrap: wrap; gap: .5rem; padding: 1rem 1.5rem; border-radius: var(--radius-inset); background: var(--soft); margin-bottom: 2rem; }
.pipeline-summary span { font-size: var(--type-meta); font-weight: 550; color: var(--muted); }
.pipeline-summary span+span:before { content: '→'; padding-right: .5rem; color: #7b95b7; }
.pipeline-list { max-width: 58rem; }
.pipeline-step { display: grid; grid-template-columns: 3rem 1fr; gap: 1.5rem; position: relative; }
.pipeline-step:not(:last-child):before { content: ''; position: absolute; left: 1.5rem; top: 3rem; bottom: 0; width: 1px; background: #d5dce7; }
.pipeline-number { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; color: var(--blue); background: var(--tint); font-size: .9rem; font-weight: 600; }
.pipeline-content { padding: .15rem 0 2.5rem; min-width: 0; }
.pipeline-content h2 { margin: .4rem 0 .75rem; }
.pipeline-content>p { color: var(--text); font-size: var(--type-body); max-width: 65ch; }
.pipeline-content>.course-prose { margin-bottom: .75rem; font-size: var(--type-body); }
.step-result { display: flex; align-items: flex-start; gap: .75rem; margin-top: 1rem; }
.step-result>span { color: var(--green); }
.step-result p { margin: 0; font-size: .85rem; color: #3a6651; }
.stack-symbol { display: grid; place-items: center; background: #eff3fb; color: #35699f; width: 2.5rem; height: 2.5rem; border-radius: .75rem; margin-bottom: 1rem; font-size: 1.1rem; }
.connection-layout { display: grid; grid-template-columns: 1fr 19rem; gap: 4rem; align-items: start; }
.connection-steps { list-style: none; padding: 0; margin: 0; counter-reset: connection; }
.connection-steps>li { position: relative; counter-increment: connection; padding: 0 0 2rem 2.75rem; }
.connection-steps>li:before { content: counter(connection); position: absolute; left: 0; top: -.15rem; display: grid; place-items: center; width: 1.8rem; height: 1.8rem; background: #e9effa; border-radius: 50%; color: #315a91; font-size: .8rem; }
.connection-steps h3 { font-size: var(--type-action); }
.connection-steps p { font-size: var(--type-body); color: var(--text); }
.connection-steps .button { margin: 0 0 1rem; }
.connection-steps a { font-size: .85rem; }
.stack-aside { position: sticky; top: var(--header-offset); padding-top: 1.5rem; }
.stack-aside h2 { font-size: 1rem; }
.plain-checklist { list-style: none; padding: 0; margin: 1rem 0 2rem; }
.plain-checklist li { position: relative; padding: 0 0 1rem 1.5rem; color: var(--muted); font-size: .85rem; }
.plain-checklist li:before { content: '✓'; position: absolute; left: 0; color: var(--green); }
.quota-note { padding: 1.5rem; background: #eaf0f9; border-radius: 1rem; }
.quota-note h3 { font-size: .95rem; }
.quota-note p,.quota-note a { font-size: .8rem; }
.quota-note p { color: #53657f; }
.reserve-section { margin-top: 2rem; }
.reserve-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
.reserve-card { padding: 1.5rem; }
.reserve-card h3 { font-size: 1.2rem; margin: 1rem 0 .75rem; }
.reserve-card p { font-size: .9rem; color: var(--muted); }
.reserve-card a { font-size: .85rem; }
.troubleshooting { margin-top: 1.5rem; }
.copy-command { min-height: 2.75rem; margin-top: .4rem; font-size: var(--type-meta); padding: .5rem .875rem; }
.beginner-context { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.5rem; margin-bottom: 1.5rem; padding: 1.5rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.beginner-context h2 { font-size: var(--type-action); }
.beginner-context p { color: var(--text); font-size: var(--type-body); margin-bottom: 0; }
.instruction-link { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: .9rem; }
.lesson-overview { margin-top: 0; margin-bottom: 2rem; }
.program-list { margin: 0 0 3rem; border-top: 1px solid var(--line); }
.program-list article { display: grid; grid-template-columns: 2.5rem minmax(0,1fr) 9rem; align-items: start; gap: 1.5rem; padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.program-list h2 { font-size: var(--type-action); }
.program-list p { color: var(--text); font-size: var(--type-body); margin-bottom: 0; max-width: 65ch; }
.program-list a { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: .85rem; }
@media (max-width: 42rem) {
  :root { --type-title: 1.625rem; --type-step: 1.5rem; }
  .beginner-context { grid-template-columns: 1fr; }
  .program-list article { grid-template-columns: 2.5rem minmax(0,1fr); gap: 1rem; }
  .program-list article>a { grid-column: 2; }
  .tabs a { white-space: normal; text-align: center; }
}
.handbook-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; }
.handbook-heading h1 { font-size: var(--type-title); margin-bottom: .5rem; }
.handbook-heading p { margin: 0; font-size: var(--type-body); color: var(--muted); }
.course-progress-summary { padding: 1.5rem; margin-bottom: 1rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.course-progress-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; font-weight: 600; }
.course-progress-heading strong { font-size: 1.25rem; color: var(--blue); font-variant-numeric: tabular-nums; }
.course-progress-summary p { margin: .75rem 0 0; color: var(--muted); font-size: var(--type-meta); }
.course-progress-summary .course-progress-count { color: var(--text); font-weight: var(--weight-control); font-size: var(--type-body); }
.handbook-current { display: grid; grid-template-columns: minmax(0,1fr) 19rem; gap: 1.5rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
.handbook-current>*,.handbook-work-row>*,.handbook-heading>* { min-width: 0; }
.handbook-current h2 { font-size: var(--type-step); line-height: 1.35; margin-bottom: .75rem; }
.handbook-current .course-label { margin-bottom: .5rem; }
.handbook-current .actions { margin-top: 1rem; }
.handbook-resume { font-size: .95rem; color: var(--muted); margin: 0; }
.handbook-class { min-width: 0; border-left: 1px solid var(--line); padding-left: 1.5rem; font-size: var(--type-meta); overflow-wrap: anywhere; }
.handbook-class>h2 { color: var(--muted); font-size: var(--type-meta); font-weight: var(--weight-label); letter-spacing: 0; margin: 0 0 1rem; }
.handbook-class>p { margin: 0; line-height: 1.5; }
.handbook-class .handbook-class-plan { color: var(--muted); font-size: var(--type-meta); margin-bottom: .35rem; }
.handbook-class-topic { font-size: var(--type-action); line-height: 1.4; font-weight: var(--weight-action); margin-bottom: 1rem; }
.handbook-class-date { display: block; font-size: 1rem; font-weight: 600; color: var(--blue); font-variant-numeric: tabular-nums; margin-bottom: .75rem; }
.handbook-class-details { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem; margin: 0; padding-top: .75rem; border-top: 1px solid var(--line); }
.handbook-class-details dt { color: var(--muted); font-size: var(--type-meta); margin-bottom: .2rem; }
.handbook-class-details dd { margin: 0; font-size: .9rem; font-weight: 550; font-variant-numeric: tabular-nums; }
.handbook-section-head { margin-top: 2rem; }
.handbook-section-head h2 { font-size: 1.15rem; }
.handbook-work-list { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
.handbook-work-row { display: grid; grid-template-columns: 2.5rem minmax(0,1fr) 12rem; align-items: center; gap: 1rem; padding: 1.125rem 1.5rem; }
.handbook-work-row+.handbook-work-row { border-top: 1px solid var(--line); }
.handbook-work-row:first-child { border-start-start-radius: inherit; border-start-end-radius: inherit; }
.handbook-work-row:last-child { border-end-start-radius: inherit; border-end-end-radius: inherit; }
.handbook-work-number { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: .75rem; color: var(--blue); background: var(--tint); font-size: var(--type-meta); font-weight: 600; font-variant-numeric: tabular-nums; }
.handbook-work-description h2 { font-size: var(--type-action); line-height: 1.4; letter-spacing: -.01em; margin: 0 0 .4rem; }
.handbook-work-description p { margin: 0 0 .5rem; color: var(--text); font-size: var(--type-body); line-height: var(--leading-body); max-width: 65ch; }
.handbook-work-date { color: var(--muted); font-size: var(--type-meta); }
.handbook-work-actions { display: grid; justify-items: stretch; align-content: start; gap: var(--space-3); width: 100%; min-width: 0; }
.handbook-work-actions .button { width: 100%; }
.handbook-work-status { font-size: var(--type-meta); color: var(--muted); }
.handbook-work-optional { display: inline-block; margin-bottom: .5rem; padding: .2rem .625rem; border-radius: var(--radius-control); background: var(--soft); color: var(--muted); font-size: var(--type-meta); }
.handbook-work-row.is-complete .handbook-work-status { color: var(--green); font-weight: 600; }
.handbook-work-row.is-complete .handbook-work-status::before { content: '✓'; margin-right: .5rem; }
.handbook-lock-note { color: var(--muted); font-size: var(--type-meta); }
.handbook-work-row.is-locked { background: var(--soft); }
.handbook-work-row.is-locked .handbook-work-number { background: var(--line); color: var(--muted); }
.handbook-help { margin-top: 2rem; padding: 1.5rem 0; border-top: 1px solid var(--line); }
.handbook-help h2 { font-size: 1.1rem; margin-bottom: 1rem; }
.handbook-help p { color: var(--muted); font-size: var(--type-meta); margin-top: 1rem; }
@media (max-width: 48rem) {
  .handbook-current { grid-template-columns: minmax(0,1fr); gap: 1.5rem; }
  .handbook-class { border-left: 0; border-top: 1px solid var(--line); padding: 1rem 0 0; }
  .handbook-work-row { grid-template-columns: minmax(0,1fr); gap: .75rem; padding: 1rem; }
  .handbook-work-actions { grid-column: auto; }
  .handbook-work-actions .button { width: 100%; padding-inline: .5rem; }
}
/* Lesson reading area keeps its body size; only chrome becomes denser. */
.task-layout { display: grid; grid-template-columns: 11.5rem minmax(0, 1fr); align-items: start; gap: 1.5rem; margin-top: .25rem; }
.task-main { min-width: 0; }
.task-nav { position: sticky; top: var(--header-offset); max-height: calc(100dvh - var(--header-offset) - 1rem); padding: .5rem; overflow: auto; overscroll-behavior: contain; border-radius: .75rem; box-shadow: none; scrollbar-width: thin; }
.task-nav a { display: flex; align-items: center; min-height: 2.75rem; padding: .5625rem .625rem; border-radius: .375rem; color: var(--muted); font-size: var(--type-meta); line-height: 1.45; text-decoration: none; }
.task-nav a.active { background: rgba(0, 110, 219, .09); color: var(--blue); font-weight: 650; }
.toc-title { display: block; padding: .5rem .625rem; color: var(--muted); font-size: .6875rem; font-weight: 600; }
.lesson-instructions .section-head { margin: 0 0 .875rem; align-items: center; }
.lesson-instructions .section-head p { font-size: .8125rem; }
.phase-heading { margin: 1.5rem 0 .5rem; font-size: .8125rem; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.lesson-part { margin: .5rem 0; border-radius: .75rem; box-shadow: none; overflow: hidden; }
.lesson-part>summary { display: flex; align-items: center; gap: .625rem; min-height: 3.375rem; padding: .75rem 1rem; cursor: pointer; list-style: none; }
.lesson-part>summary::-webkit-details-marker { display: none; }
.part-number { display: inline-grid; place-items: center; width: 1.625rem; height: 1.625rem; flex-shrink: 0; background: var(--soft); border-radius: .4375rem; color: var(--muted); font-size: .6875rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.part-title { font-size: .9375rem; line-height: 1.4; font-weight: 600; }
.part-state { margin-left: auto; color: var(--muted); font-size: .6875rem; flex-shrink: 0; }
.lesson-part[open]>summary { border-bottom: 1px solid var(--line); }
.lesson-part:not(.step-complete)[open] .part-state { font-size: 0; }
.lesson-part:not(.step-complete)[open] .part-state:after { content: "Свернуть"; font-size: .6875rem; }
.step-complete .part-number { color: var(--green); background: #edf6ef; }
.step-complete .part-state { color: var(--green); }
.part-body { padding: 1.5rem; font-size: 1rem; line-height: 1.65; overflow-wrap: anywhere; }
.part-body p { max-width: 72ch; }
.part-body ul, .part-body ol { padding-left: 1.5rem; margin: .75rem 0 1rem; }
.part-body li { margin: .5rem 0; padding-left: .125rem; }
.code-block { margin: 1rem 0; min-width: 0; }
pre.command { margin: 0; padding: .875rem 1rem; background: #202126; color: #f6f6f8; border-radius: .625rem; font-size: .8125rem; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: auto; }
pre.command code { padding: 0; color: inherit; background: none; font-size: inherit; }
.step-check { display: flex; align-items: center; gap: .625rem; min-height: 2.75rem; margin-top: 1.125rem; padding-top: .875rem; border-top: 1px solid var(--line); font-size: .875rem; font-weight: 550; cursor: pointer; }
.step-check input, .steps input { width: 1.125rem; height: 1.125rem; flex-shrink: 0; margin: 0; accent-color: var(--blue); }
.next-step { display: inline-flex; align-items: center; min-height: 2.75rem; margin-top: .5rem; font-size: .875rem; }
.archive-fallback { padding: 1rem; margin-top: 1rem; background: #f4f8fe; border: 1px solid #dce8f8; border-radius: .625rem; font-size: .875rem; }
.archive-fallback p { margin: .5rem 0 .75rem; }
.table-scroll { overflow-x: auto; margin: 1rem 0; }
.table-scroll table { border-collapse: collapse; min-width: 100%; font-size: .8125rem; }
.table-scroll th, .table-scroll td { padding: .5rem .625rem; border: 1px solid var(--line); text-align: left; }
.table-scroll th { background: var(--soft); }
.task-section { margin-top: 1rem; padding: 1.5rem; line-height: 1.65; box-shadow: none; }
.task-section h2 { font-size: 1.125rem; }
.task-section p, .submission-list { font-size: .9375rem; }
.success-panel { background: #f5faf6; }
.result-list { display: grid; gap: .5rem; padding: 0; margin: .875rem 0; list-style: none; }
.result-list li { display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: .5rem; padding: .5rem .625rem; border-radius: .5rem; background: rgba(255, 255, 255, .82); font-size: .875rem; }
.result-list b { color: var(--green); }
.failure-list b { color: var(--red); }
.inline-help { margin-top: 1rem; padding-top: .625rem; border-top: 1px solid var(--line); }
.inline-help>summary, .lesson-files>summary { min-height: 2.75rem; align-content: center; padding-block: .5rem; font-size: .875rem; font-weight: 600; cursor: pointer; }
.inline-help>p { margin-top: .75rem; }
.lesson-files .actions { margin-top: .875rem; }
.lesson-files p { margin: .875rem 0 0; font-size: .875rem; color: var(--muted); }
.submission-list { padding-left: 1.5rem; }
.submission-list li { margin: .5rem 0; }
.progress-action { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1rem; padding: 1rem 1.5rem; background: #eeeeF3; box-shadow: none; font-size: .875rem; }
.progress-action p { margin: .25rem 0 0; font-size: .8125rem; color: var(--muted); }
.progress-action button { flex-shrink: 0; }
.task-controls { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .75rem; margin-top: .875rem; font-size: .8125rem; }
.task-controls a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.steps { display: grid; gap: .5rem; padding-left: 1.375rem; margin: 1rem 0 0; }
.steps li { font-size: .9375rem; padding: .625rem; }
.steps label { display: flex; align-items: flex-start; gap: .75rem; cursor: pointer; }
.steps li.checked { color: var(--muted); }
.context-card { padding: 1rem; margin-block: .75rem; border-radius: .75rem; background: var(--soft); overflow-wrap: anywhere; }

/* Schedule, setup and personal checklists. */
.notice { padding: .875rem 1rem; margin-bottom: 1rem; font-size: .875rem; line-height: 1.6; box-shadow: none; }
.notice summary { min-height: 2.75rem; align-content: center; cursor: pointer; }
.notice p { margin: .5rem 0 0; }
.schedule-list, .work-list, .setup-list { display: grid; gap: .625rem; }
.schedule-list,.work-list { gap: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
.schedule-list>.panel,.work-list>.panel { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.schedule-list>.panel+.panel,.work-list>.panel+.panel { border-top: 1px solid var(--line); }
.schedule-list>.panel:first-child,.work-list>.panel:first-child { border-start-start-radius: inherit; border-start-end-radius: inherit; }
.schedule-list>.panel:last-child,.work-list>.panel:last-child { border-end-start-radius: inherit; border-end-end-radius: inherit; }
.schedule-item { display: grid; grid-template-columns: 4.5rem 9rem minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 1.125rem 1.5rem; }
.schedule-item .number { color: var(--muted); font-size: var(--type-meta); }
.schedule-item .date { font-size: var(--type-meta); font-weight: var(--weight-label); font-variant-numeric: tabular-nums; }
.schedule-item h2, .work-row h2 { font-size: .9375rem; line-height: 1.4; margin: 0 0 .25rem; letter-spacing: -.006em; }
.schedule-item p, .work-row p { margin: 0; color: var(--muted); font-size: var(--type-meta); }
.schedule-meeting { grid-template-columns: 4.5rem 9rem minmax(0, 1fr); align-items: start; }
.meeting-content { min-width: 0; }
.schedule-meeting .meeting-budget, .schedule-meeting .meeting-provided { margin-top: .625rem; }
.meeting-budget { font-variant-numeric: tabular-nums; }
.meeting-modules { margin-top: .75rem; }
.meeting-provided, .schedule-history p { overflow-wrap: anywhere; }
.schedule-history { margin-top: 1rem; }
.schedule-list>.nearest-meeting { box-shadow: inset 3px 0 0 var(--blue); }
.nearest-meeting .date { color: var(--blue); }
.schedule-note { margin-top: 1rem; font-size: var(--type-meta); }
.work-row { display: grid; grid-template-columns: 2rem minmax(0, 1fr) 22rem; align-items: center; gap: var(--space-4); padding: var(--space-6); box-shadow: none; }
.work-row .actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: 100%; min-width: 0; }
.work-row .actions>.button,.work-row .actions>button { width: 100%; }
.work-row .number { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .65rem; background: var(--soft); color: var(--muted); font-size: var(--type-meta); font-weight: 600; font-variant-numeric: tabular-nums; }
.work-row button[aria-pressed="true"] { color: var(--green); }
.work-row button[aria-pressed="true"]::before { content: '✓'; }
.setup-list { counter-reset: setup; }
.setup-step { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .875rem; padding: 1.125rem; }
.setup-step:before { display: grid; place-items: center; width: 1.875rem; height: 1.875rem; background: var(--soft); border-radius: .5rem; content: counter(setup, decimal-leading-zero); counter-increment: setup; font-size: .75rem; font-weight: 600; }
.setup-step h2 { font-size: 1rem; }
.setup-step p { font-size: .875rem; color: var(--muted); }
.setup-step a { font-size: .8125rem; }
.setup-stop { margin-top: 1rem; }
.loading, .empty { max-width: 40rem; margin: 4rem auto; padding: 2rem; text-align: center; color: var(--muted); }
footer { display: flex; justify-content: space-between; gap: 1rem; max-width: 77rem; margin: 0 auto; padding: 1.5rem 1.5rem 2rem; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--type-meta); }

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar { background: rgba(242,244,248,.86); -webkit-backdrop-filter: saturate(140%) blur(20px); backdrop-filter: saturate(140%) blur(20px); }
  .tabs,#change-group { background: var(--glass); border-color: var(--glass-border); -webkit-backdrop-filter: saturate(150%) blur(20px); backdrop-filter: saturate(150%) blur(20px); }
}
@media (hover: hover) {
  .button:not(:disabled):not([aria-disabled="true"]):hover,button:not(:disabled):not([aria-disabled="true"]):hover { background: var(--tint); border-color: #c6d8ef; }
  .button.primary:not(:disabled):not([aria-disabled="true"]):hover,button.primary:not(:disabled):not([aria-disabled="true"]):hover { background: var(--blue-hover); border-color: var(--blue-hover); }
  .button.text:not(:disabled):not([aria-disabled="true"]):hover,button.text:not(:disabled):not([aria-disabled="true"]):hover { background: var(--tint); border-color: transparent; }
  .group-option:not(:disabled):not([aria-disabled="true"]):hover { background: var(--tint); border-color: #c6d8ef; }
  #change-group:not(:disabled):not([aria-disabled="true"]):hover { background: var(--tint); border-color: #c6d8ef; }
  .task-nav a:not([aria-disabled="true"]):hover,.tabs a:not([aria-disabled="true"]):hover { background: var(--tint); color: var(--blue); }
  .lesson-part>summary:not([aria-disabled="true"]):hover { background: var(--soft); }
}
.tabs a:not([aria-disabled="true"]):active { background: var(--tint); color: var(--blue-hover); box-shadow: inset 0 1px 3px #1b30451a; }
#change-group:not(:disabled):not([aria-disabled="true"]):active { background: var(--tint); box-shadow: inset 0 1px 3px #1b30451a; }
@media (max-width: 100rem) {
  .topbar { flex-wrap: wrap; gap: 1.5rem 2rem; padding-block: 1.5rem; }
  .brand { margin-right: auto; }
  .tabs { flex-basis: 100%; justify-content: center; }
  .tabs a { flex: 1 1 auto; }
}
@media (max-width: 58rem) {
  .tabs a { flex: 1 0 auto; flex-direction: column; gap: .125rem; padding: .25rem .5rem; white-space: normal; text-align: center; }
  .task-layout { grid-template-columns: 1fr; gap: 1rem; }
  .task-nav { position: static; display: flex; max-height: none; gap: .15rem; overflow-x: auto; }
  .task-nav a { flex-shrink: 0; white-space: nowrap; min-height: 2.75rem; display: flex; align-items: center; }
  .toc-title { display: none; }
  .connection-layout { grid-template-columns: 1fr; gap: 1rem; }
  .stack-aside { position: static; padding: 0 0 1rem; }
  .reserve-grid { grid-template-columns: 1fr; }
  .schedule-item { grid-template-columns: 4rem 8rem minmax(0,1fr); }
  .schedule-item>.button,.schedule-item>.status { grid-column: 3; justify-self: start; }
  .work-row { grid-template-columns: 2rem minmax(0,1fr); }
  .work-row .actions { grid-column: 2; }
}
@media (max-width: 42rem) {
  main { padding: 1.5rem 1rem 2rem; padding-inline: min(1rem,16px); }
  .topbar { position: static; padding-block: 1rem; padding-inline: 1rem; gap: 1rem; }
  .brand small { display: none; }
  .brand b { font-size: var(--type-meta); }
  .top-actions { display: grid; grid-template-columns: minmax(0,1fr); gap: .5rem; justify-items: end; min-width: min(100%,8rem); max-width: 100%; flex: 1 1 8rem; }
  #change-group { justify-self: end; }
  .topbar-progress { width: 10.5rem; }
  .course-progress-summary { padding: 1rem; }
  .tabs { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,6.5rem),1fr)); gap: .5rem; border-radius: var(--radius); }
  .tabs a { flex-direction: column; gap: .125rem; min-width: 44px; min-height: 2.75rem; font-size: var(--type-meta); padding: .25rem .125rem; border-radius: var(--radius-inset); }
  .tabs a>span { max-width: 100%; overflow-wrap: normal; }
  .button.large { font-size: var(--type-ui); }
  .page-head { padding-bottom: 1.5rem; }
  .page-head h1 { font-size: var(--type-title); }
  .lead { font-size: 1rem; }
  .group-dialog { width: calc(100% - 1.5rem); padding: 1.5rem; }
  .group-options { grid-template-columns: 1fr; gap: .75rem; margin-top: 1.5rem; }
  .group-option { padding: .75rem 2.5rem .75rem 1rem; gap: .15rem; }
  .group-option-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .75rem; }
  .group-option strong { font-size: .95rem; }
  .choice-indicator { top: 1.1rem; }
  .group-footnote { margin-top: 1rem; }
  .pipeline-step { grid-template-columns: 2rem 1fr; gap: 1rem; }
  .pipeline-number { width: 2rem; height: 2rem; font-size: .75rem; }
  .pipeline-step:not(:last-child):before { left: 1rem; top: 2rem; }
  .pipeline-content h2 { font-size: 1.3rem; }
  .connection-steps>li { padding-left: 2.3rem; }
  .connection-steps h3 { font-size: var(--type-action); }
  .lesson-part>summary { padding: .75rem; }
  .part-state { display: none; }
  .part-body,.task-section { padding: 1rem; }
  .progress-action { flex-direction: column; align-items: flex-start; padding: 1rem; }
  .lesson-instructions .section-head { flex-wrap: wrap; }
  .schedule-item { grid-template-columns: 3.25rem minmax(0,1fr); padding: 1rem; gap: .4rem .75rem; }
  .schedule-item .number { grid-column: 1 / -1; }
  .schedule-item .date,.schedule-item>div,.schedule-item>.button,.schedule-item>.status { grid-column: 2; }
  .handbook-current { padding: 1rem; }
  .handbook-work-row { padding: min(1rem,16px); }
  .course-progress-heading { flex-wrap: wrap; gap: .5rem; }
  .work-row { padding: 1rem; }
  footer { flex-direction: column; gap: .5rem; padding-inline: 1rem; }
}
@media (max-height: 28rem) {
  html { scroll-padding-top: 1rem; }
  .topbar,.task-nav,.stack-aside { position: static; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .topbar,.tabs,#change-group { background: var(--glass-solid); border-color: var(--line); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .group-dialog::backdrop { background: #e3e7ef; }
}
@media (prefers-contrast: more) {
  :root { --muted: #3c424d; --line: #747e8d; --shadow: none; --shadow-glass: none; --shadow-control: none; }
  .topbar,.tabs,#change-group { background: var(--glass-solid); border-color: var(--line); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .group-dialog::backdrop { background: #e3e7ef; }
  .tabs a.active { box-shadow: inset 0 0 0 2px var(--blue); }
}

.portal-shell { display: grid; grid-template-columns: 16rem minmax(0, 1fr); grid-template-rows:auto 1fr auto; min-height: 100dvh; }
.portal-shell .topbar { grid-column: 1; grid-row: 1 / -1; position: sticky; top: 0; height: 100dvh; min-height: 0; overflow: hidden; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; flex-wrap: nowrap; gap: var(--space-6); padding: var(--space-4); border: 0; border-right: 1px solid var(--line); background: var(--card); }
.portal-shell .brand { padding-inline: .75rem; }
.portal-shell .brand b { font-size: 1.125rem; }
.portal-shell .brand small { font-size: .8125rem; }
.desktop-navigation { flex:1; min-height:0; overflow-y:auto; scrollbar-width:thin; }
.portal-shell .tabs { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; flex-wrap: nowrap; flex: none; order: 0; gap: var(--space-6); padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.portal-shell .tabs a { flex-direction: row; justify-content: flex-start; min-height: 2.75rem; padding: var(--space-3); border-radius: .5rem; font-size: .875rem; line-height:1.25rem; box-shadow: none; }
.portal-shell .tabs a:focus-visible { outline-offset:-3px; }
.portal-shell .tabs a:hover { background: var(--soft); }
.portal-shell .tabs a.active { background: var(--tint); color: var(--blue); }
.portal-shell .top-actions { display: grid; justify-content: stretch; flex:none; gap: var(--space-2); margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--line); }
.shell-account { display:flex; align-items:center; gap:var(--space-3); min-height:2.75rem; padding:var(--space-2); color:var(--text); font-size:.875rem; line-height:1.25rem; font-weight:var(--weight-nav); text-decoration:none; border-radius:.5rem; overflow-wrap:anywhere; }
.shell-account:hover { color: var(--blue); }
.account-initial { display:grid; place-items:center; flex:none; width:2rem; height:2rem; border-radius:50%; background:var(--tint); color:var(--blue); font-size:.875rem; line-height:1.25rem; font-weight:600; }
.shell-account-copy { display:grid; gap:var(--space-1); min-width:0; }
#account-role { color:var(--muted); font-size:.75rem; line-height:1rem; font-weight:400; }
.menu-toggle { display:none; }
.portal-shell #change-group { justify-content: space-between; border-radius: .625rem; box-shadow: none; }
.portal-shell .topbar-progress { width: auto; padding: 0; }
.portal-shell .progress-pill { text-align: left; font-size:.75rem; line-height:1rem; }
.portal-shell main { grid-column:2; grid-row:2; width:100%; max-width:81rem; min-width:0; min-height:0; margin:0 auto; padding:var(--space-8); }
.portal-shell footer { grid-column:2; grid-row:3; padding:var(--space-6) var(--space-8); font-size:.75rem; line-height:1rem; }
.portal-shell .handbook-heading { align-items: flex-start; margin-bottom: var(--space-8); }
.portal-shell .handbook-heading h1 { max-width: 28ch; font-size: clamp(1.75rem, 2.4vw, 2.25rem); }
.portal-shell .handbook-current { grid-template-columns: minmax(0, 1.3fr) minmax(14rem, .7fr); gap: 2rem; padding: clamp(1.5rem, 2.5vw, 2rem); border-top: 3px solid var(--blue); box-shadow: none; }
.portal-shell .course-progress-summary { margin-top: 1.5rem; box-shadow: none; }
.portal-shell .course-progress-description { max-width: 75ch; }
.helper-settings { margin-top: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius-inset); background: var(--card); }
.helper-settings>summary { padding: 1rem 1.5rem; cursor: pointer; font-weight: var(--weight-control); }
.helper-settings .agent-choice { margin: 0; border: 0; box-shadow: none; }
.portal-shell .handbook-work-list { box-shadow: none; }
.portal-shell .handbook-work-row { grid-template-columns: 2.25rem minmax(0, 1fr) 11rem; padding: 1.5rem; }
.portal-shell .handbook-work-row h2 { font-size: var(--type-action); }
.portal-shell .handbook-help { padding: 1.5rem 0; background: transparent; border: 0; }

@media (max-width: 80rem) and (min-width: 64.001rem) {
  .portal-shell .handbook-current { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .portal-shell .handbook-class { border-left: 0; border-top: 1px solid var(--line); padding: 1.5rem 0 0; }
}
@media (max-width: 64rem) {
  .portal-shell { display: block; }
  .portal-shell .topbar { position: sticky; top: 0; height: auto; overflow: visible; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items:center; gap:var(--space-2); padding:var(--space-3) var(--space-4); border-right:0; border-bottom:1px solid var(--line); }
  .portal-shell .brand { padding: 0; min-height: 2.75rem; }
  .portal-shell .brand small { display: none; }
  .desktop-navigation { display:none; }
  .portal-shell .top-actions { display:flex; flex-wrap:nowrap; grid-column:2; grid-row:1; gap:var(--space-2); margin:0; padding:0; border:0; }
  .portal-shell .shell-account { display:flex; width:2.75rem; padding:var(--space-1); justify-content:center; }
  .portal-shell .shell-account-copy,.portal-shell .topbar-progress,.portal-shell #selected-group { display:none; }
  .menu-toggle { display:inline-flex; width:2.75rem; padding:var(--space-2); color:var(--text); box-shadow:none; }
  .portal-shell #change-group { padding: .5rem .75rem; }
  .portal-shell main { padding:var(--space-6) var(--space-4) var(--space-8); }
  .portal-shell .handbook-current { gap: 1.5rem; }
}
@media (max-width: 48rem) {
  .portal-shell .handbook-current { grid-template-columns: minmax(0, 1fr); }
  .portal-shell .handbook-class { border-left: 0; border-top: 1px solid var(--line); padding: 1.5rem 0 0; }
  .portal-shell .handbook-work-row { grid-template-columns: 2rem minmax(0, 1fr); gap: .5rem .75rem; padding: 1.5rem; }
  .portal-shell .handbook-work-actions { grid-column: 2; }
  .portal-shell main { padding-inline: 1rem; }
  .portal-shell .handbook-heading { gap: 1rem; }
  .portal-shell footer { padding-inline: 1rem; }
}
@media (max-height: 28rem) {
  .portal-shell .topbar { position: static; }
}
.assigned-group { display:inline-flex; align-items:center; justify-content:center; min-height:2.75rem; padding:.5rem .75rem; border:1px solid var(--line); border-radius:var(--radius-inset); color:var(--muted); font-size:var(--type-meta); font-weight:550; }
.sync-notice { grid-column:2; grid-row:1; margin:var(--space-4) var(--space-8) 0; padding:var(--space-4); border:1px solid #f2cb85; border-radius:var(--radius-inset); background:#fff7e8; color:#714b14; font-size:var(--type-meta); }
@media(max-width:64rem){.assigned-group{border:0;padding:0;font-size:.8125rem}.sync-notice{margin:1rem}}
.brand:has(.brand-image) { flex-direction:row; align-items:center; justify-content:flex-start; gap:.75rem; white-space:nowrap; font-family:var(--font-sans); }
.brand-image { display:block; width:9.5rem; height:2.5rem; overflow:hidden; flex:none; }
.brand-image img { display:block; width:100%; height:auto; transform:translateY(-.4rem); }
.brand-separator { color:var(--line); font-size:1.25rem; font-weight:400; }
.brand .brand-caption { display:block; padding:0; color:var(--text); font-size:1rem; font-weight:550; }
.portal-shell .brand { padding:0; }
.portal-shell .brand-image { width:6.25rem; height:1.75rem; }
.portal-shell .brand-image img { transform:translateY(-.2rem); }
.portal-shell .brand .brand-caption { display:block; font-size:.875rem; line-height:1.25rem; }
.portal-shell .brand:has(.brand-image) { gap:var(--space-2); }
.portal-shell .brand-separator { font-size:1rem; }
.portal-shell .brand { min-width:0; width:100%; max-width:100%; }
.nav-group { display:grid; gap:var(--space-1); min-width:0; }
.nav-group-title { padding:0 var(--space-3) var(--space-2); color:var(--muted); font-size:.75rem; line-height:1rem; font-weight:600; }
.portal-shell .tabs .nav-resume { min-height:4rem; justify-content:space-between; gap:var(--space-2); padding:var(--space-3) var(--space-4); background:var(--blue); color:white; }
.nav-resume>span:first-child { display:grid; gap:var(--space-1); }
.nav-resume strong { font-size:.875rem; line-height:1.25rem; font-weight:600; }
.nav-resume small { color:#ffffffd9; font-size:.75rem; line-height:1rem; font-weight:400; }
.portal-shell .tabs .nav-resume:hover { background:#0051c8; }
.portal-shell .tabs a[data-route="tasks"] { font-weight:700; }
.submission-evidence { margin:1.5rem 0; padding:1.5rem; }
.submission-evidence h2 { font-size:1.25rem; }
.submission-evidence p,.submission-evidence li { max-width:75ch; font-size:.9375rem; }
.submission-evidence li+li { margin-top:.5rem; }
.submission-evidence.compact { flex:none; margin:0 0 .75rem; padding:0; }
.submission-evidence.compact summary { cursor:pointer; color:var(--blue); font-size:.8125rem; font-weight:600; }
.submission-evidence.compact[open] { padding:1rem; border:1px solid var(--line); border-radius:.75rem; background:var(--card); }
.submission-next { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; margin:1.5rem 0; padding:1.5rem; }
.submission-next p { margin:.4rem 0 0; color:var(--muted); font-size:.875rem; }
.submission-next .actions { margin:0; }
.mobile-navigation:not([open]) { display:none; }
.mobile-navigation[open] { display:flex; flex-direction:column; gap:var(--space-6); inset:0; width:100%; height:100dvh; max-width:none; max-height:none; margin:0; padding:var(--space-4); border:0; border-radius:0; background:var(--card); color:var(--text); }
.mobile-navigation-heading { display:flex; align-items:center; justify-content:space-between; flex:none; gap:var(--space-4); }
.mobile-navigation-heading h2 { margin:0; font-size:1.25rem; line-height:1.75rem; }
.mobile-navigation-heading button { width:2.75rem; height:2.75rem; padding:var(--space-2); font-size:1.5rem; line-height:1.5rem; }
#mobile-navigation-content { flex:1; min-height:0; overflow-y:auto; padding:var(--space-1); }
.mobile-navigation .tabs { width:100%; margin:0; padding:0; overflow:visible; }
.portal-shell .assigned-group { min-height:1.5rem; justify-content:flex-start; padding:var(--space-1) var(--space-2); border:0; border-radius:.5rem; background:var(--soft); font-size:.75rem; line-height:1rem; }
@media(max-width:64rem){
 .portal-shell .brand-image { width:5.5rem; height:1.5rem; }
 .portal-shell .brand:has(.brand-image) { gap:var(--space-1); }
 .portal-shell .brand .brand-caption { font-size:.75rem; line-height:1rem; }
}
@media(max-height:48rem) and (min-width:64.001rem){
 .portal-shell .topbar { gap:var(--space-4); padding-block:var(--space-3); }
 .portal-shell .tabs { gap:var(--space-4); }
 .portal-shell .tabs a { min-height:2.75rem; padding-block:var(--space-2); }
 .portal-shell .tabs .nav-resume { min-height:3.5rem; }
 .portal-shell .top-actions { gap:var(--space-2); padding-top:var(--space-3); }
}
html[data-account-staff="true"] .portal-shell .topbar-progress { display:none; }
html[data-account-staff="true"] .portal-shell #selected-group { display:none; }
html[data-account-staff="true"] .tabs a[data-route="work"] { display:none; }