/* Shared refinements: all roles use the same readable forms, controls and surfaces. */
body{font-size:var(--text-base);line-height:var(--line-body)}
a{color:var(--link)}
button,.button{min-height:var(--touch-target);font-size:var(--text-sm);background:var(--green);color:var(--on-primary);border-color:var(--green)}
button:hover,.button:hover{background:var(--primary-hover);color:var(--on-primary)}
.button.cream{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.button.secondary{color:var(--link)}
button.compact,.button.compact,.admin-item button,.editor-toolbar button{min-height:var(--touch-target);font-size:var(--text-sm)}
button:disabled{opacity:.75}
input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea{min-height:var(--touch-target);font-size:var(--text-base)}
input[type=checkbox],input[type=radio]{width:20px;height:20px;flex-shrink:0}
input[type=hidden]{display:none}
label,.helptext{line-height:var(--line-body)}
label:has(input[type=checkbox]),label:has(input[type=radio]){min-height:var(--touch-target);align-items:center}
p,small,.eyebrow,.nav-label,.stats small,.course-card p,.course-meta,.meta-row,.section-heading p{color:var(--muted)}
h1,h2,h3,strong,a,p,small,code{overflow-wrap:anywhere}
.panel,.course-card,.table-wrap{border-radius:var(--radius)}
.panel{padding:var(--space-5)}
.page-heading{align-items:flex-start}
.page-heading>div{min-width:0}
.page-heading>.button{flex-shrink:0}
.page-heading p{font-size:var(--text-base)}
.eyebrow{letter-spacing:.08em;font-size:var(--text-xs);line-height:1.6}
.stats article{gap:var(--space-3)}
.stats article>div{min-width:0}
.stats article div>span{font-size:var(--text-sm);color:var(--muted)}
.stats small{font-size:var(--text-xs)}
.stats article a{display:inline-flex;align-items:center;min-height:var(--touch-target);font-size:var(--text-sm)}
.continue-body{min-width:0}
.continue-body p{font-size:var(--text-sm)}
.continue-body .eyebrow,.course-card .eyebrow{font-size:var(--text-xs)}
.course-card h3{font-size:var(--text-lg);min-height:0}
.course-card p{font-size:var(--text-sm)}
.course-meta{font-size:var(--text-xs);align-items:center;flex-wrap:wrap}
.course-meta a{min-height:var(--touch-target);display:inline-flex;align-items:center}
.course-cover{height:165px}
.cover-label{font-size:var(--text-xs);color:#fff}
.cover-badge{font-size:var(--text-xs)}
.section-heading{flex-wrap:wrap}
.section-heading>a,.clean-list a,.back-link{min-height:var(--touch-target);display:inline-flex;align-items:center;font-size:var(--text-sm)}
.section-heading h2{font-size:var(--text-lg)}
.section-heading p{font-size:var(--text-sm)}
.hero{background:var(--dark);color:var(--on-primary)}
.hero h2,.hero p{color:var(--on-primary)}
.hero .badge.light{background:transparent;border:1px solid currentColor;color:inherit;font-size:var(--text-xs)}
.hero .hero-art{color:#fff}
.hero .book.front{background:var(--accent);color:var(--on-accent)}
.hero p{font-size:var(--text-sm)}
.hero>div:first-child{max-width:70%}
.avatar{min-width:var(--touch-target);min-height:var(--touch-target);font-size:var(--text-sm)}
.brand small{font-size:var(--text-xs);letter-spacing:.12em}
.workspace{margin:var(--space-5) 0;padding:var(--space-3);background:var(--mint);gap:var(--space-3)}
.workspace>div{min-width:0}
.workspace strong{font-size:var(--text-sm);display:block}
.workspace small{font-size:var(--text-xs)}
.company-logo{width:44px;height:44px;object-fit:contain;flex-shrink:0;border-radius:var(--radius-sm);background:white}
.sidebar .primary-navigation>a,.primary-navigation>a{display:flex;align-items:center;gap:var(--space-3);min-height:var(--touch-target);font-size:var(--text-sm);padding:var(--space-2) var(--space-3);margin-bottom:var(--space-1);border-radius:var(--radius-sm);color:var(--ink)}
.primary-navigation>a[aria-current]{background:var(--mint);color:var(--link);font-weight:650}
.nav-label{font-size:var(--text-xs);padding:var(--space-4) var(--space-3) var(--space-2);letter-spacing:.07em}
.sidebar .brand{font-size:27px}
.sidebar .brand-icon{font-size:49px}
.profile-link{font-size:var(--text-sm)}
.profile-link small{font-size:var(--text-xs)}
.text-button{color:var(--link);background:transparent;border:0;font-size:var(--text-sm);padding:var(--space-2);min-height:var(--touch-target)}
.topbar-brand{min-width:0}
.topbar-brand strong{font-size:var(--text-sm);display:block}
.topbar-brand small{font-size:var(--text-xs)}
.topbar-right{margin-left:auto}
.company-switch-bar{padding:var(--space-3) var(--space-6);background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:var(--space-3)}
.company-switch-bar label{margin:0}
.company-switch-bar select{width:auto;max-width:300px}
.company-banner{display:flex;align-items:center;gap:var(--space-5);flex-wrap:wrap;background:var(--mint);padding:var(--space-5);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:var(--space-5)}
.company-banner .workspace{margin:0;flex:1;min-width:180px;border:0;padding:0}
.company-banner>p{flex:1;min-width:180px;margin:0}
.company-banner h2{font-size:var(--text-lg)}
.company-banner p{color:var(--ink)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5)}
.form-field{margin-bottom:var(--space-5);min-width:0}
.form-grid .form-field{margin-bottom:0}
.form-field .helptext{margin-top:var(--space-2)}
.form-actions{display:flex;gap:var(--space-3);margin:var(--space-5) 0;flex-wrap:wrap}
.personalization-form{max-width:1000px}
.variable-list{display:grid;gap:var(--space-3)}
.variable-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);border-top:1px solid var(--line);padding-top:var(--space-3)}
.variable-row>div{min-width:0}
.variable-row code{font-size:var(--text-sm);color:var(--link)}
.variable-row small{font-size:var(--text-xs)}
.variable-row button{flex-shrink:0}
.variable-picker{border:1px solid var(--line);border-radius:var(--radius-sm);padding:var(--space-3);margin-bottom:var(--space-5);background:var(--bg)}
summary{cursor:pointer;min-height:var(--touch-target);font-size:var(--text-sm);padding:var(--space-2) 0}
summary:focus-visible{outline:3px solid #aa8135;outline-offset:3px}
.variable-picker summary{font-weight:650}
.preview-selector label{flex:1;max-width:600px}
.preview-selector select{max-width:none;width:100%}
.preview-banner{display:flex;gap:var(--space-3);flex-wrap:wrap}
.preview-banner span{font-size:var(--text-sm)}
.editor-form{max-width:1100px}
.editor-toolbar{gap:var(--space-2)}
.editor-form textarea{min-height:360px;font-family:ui-monospace,Consolas,monospace;line-height:1.7}
.form-panel .helptext{font-size:var(--text-xs)}
.table-wrap td{font-size:var(--text-sm)}
.table-wrap td small{font-size:var(--text-xs)}
.table-wrap td a{min-height:var(--touch-target);display:inline-flex;align-items:center}
.table-wrap th{font-size:var(--text-xs)}
.admin-item{gap:var(--space-4);font-size:var(--text-sm)}
.admin-item small{font-size:var(--text-xs)}
.admin-item>a{min-height:var(--touch-target);display:inline-flex;align-items:center}
.admin-item>div{min-width:0}
.admin-item form{max-width:100%}
.admin-item details{max-width:100%}
.admin-item .action-row{flex-basis:100%}
.inline-form{flex-wrap:wrap}
.filter-bar{padding:var(--space-4);gap:var(--space-3)}
.filter-bar>a{min-height:var(--touch-target);display:inline-flex;align-items:center}
.course-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:var(--space-5);align-items:start}
.course-progress{grid-column:2;grid-row:1;position:sticky;top:var(--space-4)}
.course-outline{grid-column:1;grid-row:1;min-width:0}
.progress-heading{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap}
.progress-heading strong{font-size:32px;line-height:1.2}
.progress-heading span{font-size:var(--text-sm)}
progress{height:8px;margin:var(--space-3) 0 var(--space-4)}
progress::-webkit-progress-value{background:var(--green)}
progress::-moz-progress-bar{background:var(--green)}
.module-list>a{gap:var(--space-3);min-height:80px}
.module-list>a>div{min-width:0}
.module-list a.completed{background:var(--mint)}
.module-list strong{font-size:var(--text-base)}
.module-list small{font-size:var(--text-xs)}
.module-number{flex-shrink:0}
.study-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-4)}
.study-header>div{min-width:0}
.study-header p{font-size:var(--text-sm);margin:0}
.study-header .badge{flex-shrink:0}
.study-progress{background:white;border:1px solid var(--line);padding:var(--space-4) var(--space-5);border-radius:var(--radius);margin-bottom:var(--space-5)}
.study-progress label{display:flex;justify-content:space-between;font-size:var(--text-sm)}
.study-progress small{font-size:var(--text-xs)}
.study-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--space-5);align-items:start}
.study-layout .reading{padding:var(--space-6);margin:0}
.reading h1{line-height:1.3;font-size:30px;max-width:var(--reading-width)}
.rich-content{font-size:var(--reading-size);line-height:var(--line-reading);max-width:var(--reading-width);margin:var(--space-6) auto}
.rich-content p,.rich-content li{font-size:inherit;color:var(--ink)}
.rich-content h1{font-size:28px}
.rich-content h2{font-size:24px;margin-top:var(--space-7)}
.rich-content h3{font-size:20px}
.rich-content a{text-decoration:underline;text-underline-offset:3px}
.rich-content blockquote{background:var(--mint);border-color:var(--green)}
.rich-content table{font-size:var(--text-sm)}
.rich-content th,.rich-content td{font-size:var(--text-sm);min-width:120px;overflow-wrap:normal}
.rich-content pre{font-size:var(--text-sm)}
.study-outline{position:sticky;top:var(--space-4)}
.study-outline summary{display:flex;align-items:center;justify-content:space-between;font-weight:650;font-size:var(--text-base)}
.lesson-nav a{display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-3);font-size:var(--text-sm);min-height:var(--touch-target)}
.lesson-nav a[aria-current]{background:var(--mint);color:var(--link);font-weight:650;border-left:3px solid var(--green)}
.lesson-index{flex-shrink:0;width:24px}
.lesson-nav small{font-size:var(--text-xs);font-weight:400;margin-top:var(--space-1)}
.study-paging{display:flex;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap}
.reading-end{flex-direction:column;align-items:stretch;margin-top:var(--space-6);gap:var(--space-4);padding-top:var(--space-5)}
.reading-end strong{font-size:var(--text-base)}
.reading-end small{font-size:var(--text-sm)}
.reading-end .button{width:100%;min-height:52px;font-size:var(--text-base)}
.answer{font-size:var(--text-base);min-height:56px;line-height:1.65;padding:var(--space-4)}
.answer:has(input:checked){background:var(--mint);border-color:var(--green)}
.answer input{margin-top:3px}
.assessment-form legend{font-size:var(--text-sm)}
.assessment-form h3{font-size:var(--text-lg)}
.assessment-form fieldset{margin:var(--space-5) 0}
.assessment-form>button{min-height:52px}
.login-panel>p{font-size:var(--text-base)}
.login-note,.login-panel>a{font-size:var(--text-sm)}
.login-note small{font-size:var(--text-xs)}
.login-panel>a{display:flex;min-height:var(--touch-target);align-items:center}
.login-panel input[name=code]{font-size:28px;letter-spacing:.22em;text-align:center;font-variant-numeric:tabular-nums}
.login-panel h2{line-height:1.3}
.result p{font-size:var(--text-base)}
.result .button{min-height:48px}
.certificate-card>a:last-child{font-size:var(--text-sm);min-height:var(--touch-target);display:flex;justify-content:center;align-items:center}
.certificate-card small{font-size:var(--text-sm)}
footer{font-size:var(--text-xs)}
/* Native disclosure remains usable without JavaScript; JS adds modal focus management. */
.drawer-backdrop,.drawer-panel{display:none}
.mobile-nav[open]>.drawer-backdrop{display:block;position:fixed;inset:0;z-index:100;background:#11241dcc;border:0;border-radius:0;width:100vw;height:100dvh;cursor:default}
.mobile-nav[open]>.drawer-panel{display:block;position:fixed;inset:0 auto 0 0;width:min(360px,100vw);height:100dvh;overflow-y:auto;overscroll-behavior:contain;background:white;z-index:101;padding:var(--space-5);box-shadow:var(--shadow-panel)}
.drawer-heading{display:flex;align-items:center;gap:var(--space-3);justify-content:space-between}
.drawer-heading strong{font-size:var(--text-base)}
.icon-button{width:var(--touch-target);height:var(--touch-target);padding:0;flex-shrink:0;background:transparent;color:var(--ink);border:1px solid var(--line)}
.drawer-panel .primary-navigation{position:static;box-shadow:none;border:0;padding:0;width:auto}
.drawer-panel .workspace{margin:var(--space-4) 0}
body:has(.mobile-nav[open]){overflow:hidden}
.mobile-nav summary{min-width:var(--touch-target);min-height:var(--touch-target);display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm)}
.mobile-nav:not([open])>.drawer-panel,.mobile-nav:not([open])>.drawer-backdrop{display:none}
@media(max-width:1200px){
 .sidebar{width:240px}.app-shell{margin-left:240px}
 .stats article{flex-direction:column}
 .learning-layout{grid-template-columns:minmax(0,1fr) minmax(290px,.8fr)}
 .study-layout{grid-template-columns:minmax(0,1fr) 260px}
 .course-layout{grid-template-columns:minmax(0,1fr) 300px}
}
@media(max-width:1023px){
 .app-shell{margin-left:0}
 .topbar{gap:var(--space-3);height:auto;min-height:76px;padding:var(--space-3) var(--space-5)}
 .topbar-brand{flex:1}.topbar-brand small{font-size:var(--text-xs)}
 .course-layout{grid-template-columns:minmax(0,1fr) 290px}
 .study-layout{grid-template-columns:1fr}.study-outline{position:static}
 .learning-layout{grid-template-columns:1fr}
 .stats article{flex-direction:row}
}
@media(max-width:767px){
 main{padding:var(--space-5) var(--space-4) var(--space-6)}
 .topbar{padding:var(--space-3) var(--space-4)}
 .topbar-brand strong{font-size:var(--text-xs)}
 .topbar-brand small{font-size:var(--text-xs)}
 .topbar-right{margin-left:0}
 .page-heading{flex-direction:column;gap:var(--space-4)}
 .page-heading h1{font-size:28px}
 .page-heading>.button{font-size:var(--text-sm);max-width:none;width:100%;min-height:48px}
 .section-heading{gap:var(--space-2)}
 .section-heading h2{font-size:var(--text-lg)}
 .hero{padding:var(--space-5);min-height:0}
 .hero>div:first-child{max-width:100%}
 .hero .hero-art{display:none}
 .hero h2{font-size:29px}
 .hero p{font-size:var(--text-base);max-width:none}
 .hero .button{width:100%;padding:var(--space-3);font-size:var(--text-sm)}
 .hero .badge.light{font-size:var(--text-xs);letter-spacing:.04em;text-align:left}
 .stats,.stats.three{gap:var(--space-3)}
 .stats article{padding:var(--space-4);flex-direction:column}
 .stats article div>span{font-size:var(--text-xs)}
 .stats strong{font-size:30px}
 .stats small{font-size:var(--text-xs)}
 .stats em{font-size:var(--text-sm)}
 .continue-card{padding:var(--space-4);gap:var(--space-4)}
 .continue-body h3{font-size:var(--text-lg)}
 .continue-body p{font-size:var(--text-sm)}
 .continue-body .eyebrow{font-size:var(--text-xs)}
 .continue-body .button{font-size:var(--text-sm);min-height:48px;width:100%;padding:var(--space-3)}
 .course-symbol{width:54px;min-height:100px;font-size:36px}
 .course-grid{grid-template-columns:1fr}
 .course-card-body{padding:var(--space-5)}
 .course-card h3{font-size:var(--text-lg)}
 .course-card p{font-size:var(--text-base)}
 .course-meta{font-size:var(--text-sm)}
 .course-meta a{font-size:var(--text-sm)}
 .course-cover{height:148px}
 .cover-label{font-size:var(--text-xs);letter-spacing:.08em}
 .course-layout{grid-template-columns:1fr}
 .course-progress,.course-outline{grid-column:auto;grid-row:auto;position:static}
 .course-progress{order:0}.course-outline{order:1}
 .course-progress .button{min-height:48px}
 .module-list>a{padding:var(--space-4);gap:var(--space-3)}
 .module-list strong{font-size:var(--text-base)}
 .module-list small{font-size:var(--text-xs);line-height:1.8}
 .study-header{gap:var(--space-3)}
 .study-progress{padding:var(--space-4)}
 .study-layout .reading{padding:var(--space-5) var(--space-4)}
 .reading h1{font-size:26px;letter-spacing:-.5px}
 .rich-content{font-size:var(--text-base);line-height:var(--line-reading);margin:var(--space-5) auto}
 .rich-content h2{font-size:22px}.rich-content h3{font-size:19px}
 .rich-content blockquote{padding:var(--space-4);margin:var(--space-5) 0}
 .study-paging{flex-direction:column}
 .study-paging .button{width:100%;min-height:48px}
 .study-outline{padding:var(--space-4)}
 .reading-end .button{min-height:56px;padding:var(--space-4);font-size:var(--text-base);white-space:normal}
 .reading-end p,.reading-end small{font-size:var(--text-sm)}
 .panel{padding:var(--space-5) var(--space-4)}
 .form-grid{grid-template-columns:1fr}
 .form-actions{flex-direction:column}.form-actions .button{width:100%}
 .variable-row{flex-wrap:wrap}.variable-row>div{flex-basis:100%}
 .variable-row button{width:100%}
 .filter-bar{align-items:stretch}
 .filter-bar input,.filter-bar select,.filter-bar>label,.filter-bar>input,.filter-bar>select{flex-basis:100%;width:100%;max-width:none}
 .filter-bar>button{width:100%}.filter-bar>a{justify-content:center}
 .checkbox{white-space:normal}
 .table-wrap td:before{font-size:var(--text-xs);margin-bottom:var(--space-1)}
 .table-wrap td{font-size:var(--text-sm)}
 .table-wrap td small{font-size:var(--text-xs)}
 .admin-item{gap:var(--space-3)}
 .admin-item>div:first-child{flex-basis:100%;min-width:0}
 .admin-item .button,.admin-item button{min-height:var(--touch-target);font-size:var(--text-sm)}
 .admin-item>details{flex-basis:100%}
 .admin-item progress{flex:1;min-width:0}
 .admin-item .action-row{gap:var(--space-2)}
 .editor-toolbar button{font-size:var(--text-sm);min-height:var(--touch-target)}
 .editor-form textarea{min-height:300px}
 .steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
 .steps span{font-size:var(--text-xs)}
 .company-switch-bar{padding:var(--space-3) var(--space-4);gap:var(--space-2);flex-wrap:wrap}
 .company-switch-bar label{flex-basis:100%;font-size:var(--text-xs)}
 .company-switch-bar select{flex:1;max-width:none;min-width:0}
 .company-switch-bar button{flex-shrink:0}
 .company-banner{padding:var(--space-4);gap:var(--space-4)}
 .company-banner .workspace,.company-banner>p{min-width:0;flex-basis:100%}
 .company-banner .button{width:100%}
 .assessment-form>button{width:100%;min-height:52px}
 .assessment-form h3{font-size:var(--text-base)}
 .answer{font-size:var(--text-base);line-height:1.75;gap:var(--space-3)}
 .login-layout{display:flex;flex-direction:column;gap:var(--space-5)}
 .login-story{padding:0;width:100%}
 .login-story h1{font-size:30px}
 .login-story>p{font-size:var(--text-sm);margin-bottom:0}
 .login-panel{width:100%;padding:var(--space-5) var(--space-4)}
 .login-panel>p{font-size:var(--text-base)}
 .login-note small{font-size:var(--text-xs)}
 .public-shell main{padding:var(--space-5) var(--space-4)}
 .public-header{height:80px;padding:var(--space-4)}
 .public-header .brand small{font-size:var(--text-xs)}
 .result{padding:var(--space-5) var(--space-4)}
 .result h1{font-size:27px}.result-score{font-size:54px}
 footer{margin:0 var(--space-4);font-size:var(--text-xs);padding:var(--space-5) 0;flex-wrap:wrap;gap:var(--space-2)}
 footer>span:first-child{display:block}footer>span:last-child{display:none}
}
@media(max-width:359px){
 .topbar{gap:var(--space-2)}.topbar-brand strong{max-width:135px}
 .continue-card{display:block}.course-symbol{display:none}
 .stats article{padding:var(--space-3)}
 .page-heading h1{font-size:26px}
 .form-actions .button{font-size:var(--text-sm)}
}

/* Native summary remains above the drawer when scripts are unavailable. */
html:not(.js-enabled) .mobile-nav[open]>summary{position:fixed;right:16px;top:16px;z-index:102;background:white;border:1px solid var(--line);border-radius:8px;padding:8px}
html:not(.js-enabled) .drawer-heading{padding-right:90px}
html:not(.js-enabled) .drawer-heading [data-drawer-close]{display:none}
.filter-bar>label{min-width:0}
.filter-bar input[type=checkbox]{width:20px;flex-basis:20px}