/*
 * Website Phase 13 — Certifiedge Design System & Accessibility.
 * Calm density, task-first learning, semantic focus and responsive re-composition.
 */
:root{
  --ce13-space-1:.25rem;--ce13-space-2:.5rem;--ce13-space-3:.75rem;--ce13-space-4:1rem;--ce13-space-5:1.25rem;--ce13-space-6:1.5rem;--ce13-space-8:2rem;
  --ce13-radius-sm:.625rem;--ce13-radius-md:.875rem;--ce13-radius-lg:1.125rem;
  --ce13-text-xs:.75rem;--ce13-text-sm:.875rem;--ce13-text-body:1rem;--ce13-text-lg:1.0625rem;--ce13-title-sm:1.125rem;--ce13-title-md:1.25rem;--ce13-title-page:1.5rem;
  --ce13-line-body:1.65;--ce13-line-tight:1.25;--ce13-focus:#1d63d4;--ce13-border:#d9e2ec;--ce13-surface:#fff;--ce13-subtle:#f6f8fb;--ce13-text:#132238;--ce13-muted:#5a6b80;
  --ce13-control:44px;--ce13-reading:76ch;
}

/* Accessibility primitives: visible focus, reflow-safe text and semantic media. */
.ce-design-system-v1 :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid var(--ce13-focus);outline-offset:3px}
.ce-design-system-v1 :where(img,svg,video,canvas){max-width:100%}
.ce-design-system-v1 :where(input,select,textarea,button){font:inherit}
.ce-design-system-v1 :where(p,li,dd,dt,label,legend){overflow-wrap:anywhere}
.ce-design-system-v1 :where(button,.ce-button,[role="button"]){touch-action:manipulation}
.ce-design-system-v1 [hidden]{display:none!important}
.ce-design-system-v1 .screen-reader-text:focus{clip:auto!important;clip-path:none!important;width:auto!important;height:auto!important;margin:0!important;padding:.75rem 1rem!important;overflow:visible!important;position:fixed!important;inset-block-start:.5rem;inset-inline-start:.5rem;z-index:100000;background:#fff;color:#0b1b30;border:2px solid currentColor;border-radius:.5rem}

/* Focus-learning shell: no marketing chrome, no ornamental hero spacing. */
body.ce-focus-learning{margin:0;background:#f4f6f9;color:var(--ce13-text)}
body.ce-focus-learning .ce-main{min-height:100dvh}
body.ce-focus-learning .ce-learner-workspace-page .ce-section--study{padding-block:.625rem 1.5rem}
body.ce-focus-learning .ce-container--study{width:min(100% - 1.25rem,1920px);max-width:none;margin-inline:auto}
body.ce-focus-learning .ce-study-room--class{gap:.75rem}

/* Compact learning identity bar. It replaces the full public navigation. */
body.ce-focus-learning .ce-study-room__classbar{position:sticky;inset-block-start:0;z-index:46;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1rem;padding:.75rem .875rem;border:1px solid var(--ce13-border);border-radius:var(--ce13-radius-md);background:rgba(255,255,255,.97);box-shadow:0 8px 26px rgba(20,42,70,.07);backdrop-filter:blur(12px)}
.ce-study-room__identity{min-width:0}.ce-study-room__identity .ce-eyebrow{margin:0 0 .125rem;font-size:.6875rem;letter-spacing:.08em}.ce-study-room__identity h1{margin:0;font-size:clamp(1.125rem,1.4vw,1.4rem)!important;line-height:1.2;overflow-wrap:anywhere}.ce-study-room__identity>p:last-child{margin:.2rem 0 0;font-size:.8125rem!important;font-weight:650!important;color:var(--ce13-muted)!important}
.ce-study-room__class-actions{display:flex;align-items:center;gap:.625rem}.ce-study-room__status{display:grid;min-width:66px;text-align:end}.ce-study-room__status strong{font-size:1rem}.ce-study-room__status span{font-size:.6875rem;color:var(--ce13-muted)}.ce-focus-exit{display:inline-flex;align-items:center;justify-content:center;min-height:var(--ce13-control);padding:.5rem .75rem;border:1px solid #cbd6e3;border-radius:.7rem;background:#fff;color:#233a56;font-size:.8125rem;font-weight:800;text-decoration:none;white-space:nowrap}.ce-focus-exit:hover{background:#f3f6fa}

/* One compact tool strip replaces separate floating buttons and permanent audio controls. */
.ce-learning-toolbar{position:sticky;inset-block-start:4.65rem;z-index:44;display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-width:0;padding:.5rem .625rem;border:1px solid var(--ce13-border);border-radius:var(--ce13-radius-md);background:rgba(255,255,255,.96);box-shadow:0 7px 22px rgba(20,42,70,.055);backdrop-filter:blur(10px)}
.ce-learning-toolbar__section{display:grid;min-width:10rem;max-width:20rem;line-height:1.15}.ce-learning-toolbar__section>span{font-size:.6875rem;font-weight:800;color:var(--ce13-muted);text-transform:uppercase;letter-spacing:.06em}.ce-learning-toolbar__section strong{margin-block:.12rem;font-size:.875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ce-learning-toolbar__section small{font-size:.6875rem;color:var(--ce13-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ce-learning-toolbar__actions{display:flex;align-items:center;justify-content:flex-end;gap:.35rem;min-width:0}.ce-learning-tool,.ce-learning-toolbar__settings>summary{display:inline-flex;align-items:center;justify-content:center;min-height:var(--ce13-control);padding:.42rem .68rem;border:1px solid #cbd6e3;border-radius:.65rem;background:#fff;color:#1e3858;font-size:.8125rem;font-weight:800;line-height:1;cursor:pointer;white-space:nowrap}.ce-learning-tool:hover,.ce-learning-toolbar__settings>summary:hover{background:#f3f7fc}.ce-learning-tool--ai{border-color:#a8c1e5;background:#edf4ff;color:#0e4f9a}.ce-learning-tool--contents{display:none}.ce-learning-toolbar__settings{position:relative}.ce-learning-toolbar__settings>summary{list-style:none}.ce-learning-toolbar__settings>summary::-webkit-details-marker{display:none}.ce-learning-toolbar__settings[open]>div{position:absolute;z-index:50;inset-block-start:calc(100% + .4rem);inset-inline-end:0;display:grid;gap:.7rem;width:min(18rem,82vw);padding:.8rem;border:1px solid var(--ce13-border);border-radius:.75rem;background:#fff;box-shadow:0 16px 42px rgba(14,35,63,.16)}.ce-learning-toolbar__settings label{display:flex;align-items:center;justify-content:space-between;gap:.75rem;font-size:.8125rem}.ce-learning-toolbar__settings select{min-height:40px}

/* Learner workspace typography: deliberately restrained; hierarchy comes from structure, not giant type. */
body.ce-focus-learning .ce-learner-panel{font-size:var(--ce13-text-body)}
body.ce-focus-learning .ce-learner-panel__head h3{font-size:clamp(1.125rem,1.2vw,1.35rem)!important;line-height:1.25}
body.ce-focus-learning .ce-learner-panel__head p{font-size:.875rem;line-height:1.5}
body.ce-focus-learning .ce-learner-panel h4{font-size:clamp(1.0625rem,1vw,1.2rem)!important;line-height:1.3}
body.ce-focus-learning .ce-study-reading h3,body.ce-focus-learning .ce-study-section h3{font-size:1.25rem!important}
body.ce-focus-learning .ce-study-section h4{font-size:1.0625rem!important}
body.ce-focus-learning .ce-study-section__reading,body.ce-focus-learning .ce-learner-reading{font-size:1rem!important;line-height:var(--ce13-line-body)!important;max-width:var(--ce13-reading);margin-inline:auto}
body.ce-focus-learning .ce-study-reading__intro{font-size:1rem!important;line-height:1.6}
body.ce-focus-learning .ce-eyebrow{font-size:.6875rem}

/* Responsive workspace: content-first at standard width, contextual third rail only when it adds value. */
.ce-learner-frame{grid-template-columns:minmax(220px,260px) minmax(0,1fr);gap:.875rem}
.ce-learner-contents{top:8.5rem;border-radius:var(--ce13-radius-md);box-shadow:0 8px 28px rgba(20,42,70,.055)}
.ce-learner-panel{padding:clamp(.875rem,1.5vw,1.25rem);border-radius:var(--ce13-radius-lg);box-shadow:0 8px 30px rgba(20,42,70,.045)}
.ce-learner-panel__head{padding-bottom:.75rem}.ce-learner-panel__body{padding-top:.875rem}
.ce-learner-context-rail{display:none}
.ce-learner-context-card{display:grid;gap:.15rem;padding:.75rem;border:1px solid var(--ce13-border);border-radius:.75rem;background:#fff}.ce-learner-context-card>span{font-size:.6875rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--ce13-muted)}.ce-learner-context-card strong{font-size:.9375rem;line-height:1.25}.ce-learner-context-card small{font-size:.75rem;color:var(--ce13-muted)}.ce-learner-context-actions{display:grid;gap:.4rem}.ce-learner-context-actions button{min-height:var(--ce13-control);border:1px solid #cbd6e3;border-radius:.65rem;background:#fff;color:#193a61;font-weight:800}

/* Notes/AI are contextual tools, not permanent floating obstruction. */
body.ce-focus-learning .ce-study-notes{inset-inline-end:1rem;inset-block-end:1rem;width:min(400px,calc(100vw - 2rem));max-height:calc(100dvh - 2rem);border-radius:var(--ce13-radius-lg)}
body.ce-focus-learning .ce-study-notes textarea{min-height:12rem}
body.ce-focus-learning .ce-study-notes-tab,body.ce-focus-learning .ce-study-ai-launcher{display:none!important}
body.ce-focus-learning .ce-study-ai-drawer{inset-inline-start:auto;inset-inline-end:0;width:min(440px,100vw);padding:1rem}
body.ce-focus-learning .ce-study-ai-drawer h3{font-size:1.125rem}

/* Form and interactive clarity. Prefer 44px controls while WCAG 2.2 AA remains the floor. */
body.ce-focus-learning :where(.ce-button,button:not(.ce-icon-button),select,input[type="text"],input[type="email"],input[type="search"]){min-height:var(--ce13-control)}
body.ce-focus-learning textarea{font-size:1rem;line-height:1.55}
body.ce-focus-learning fieldset{min-width:0}

/* Data visualisation contract: visual output may never be the only representation. */
.ce-data-viz{max-width:100%;overflow-x:auto}.ce-data-viz__table{margin-block-start:.75rem}.ce-data-viz [role="img"]:focus-visible{outline:3px solid var(--ce13-focus);outline-offset:3px}

/* Wide screens earn a third rail; reading measure stays humane while activity surfaces use available width. */
@media (min-width:1600px){
  body.ce-focus-learning .ce-container--study{width:min(100% - 2rem,2100px)}
  .ce-learner-frame{grid-template-columns:minmax(230px,270px) minmax(680px,1fr) minmax(190px,230px);gap:1rem}
  .ce-learner-context-rail{position:sticky;inset-block-start:8.5rem;display:grid;align-self:start;gap:.55rem;max-height:calc(100dvh - 9.5rem);overflow:auto}
  .ce-learner-panel-deck{min-width:0}
}

/* Medium/tablet: lesson contents becomes an accessible drawer; learning remains single-canvas. */
@media (max-width:1180px){
  body.ce-focus-learning .ce-study-room__classbar{position:static}
  .ce-learning-toolbar{inset-block-start:0}
  .ce-learning-tool--contents{display:inline-flex}
  .ce-learner-contents-toggle{display:none!important}
  .ce-learner-frame{grid-template-columns:minmax(0,1fr)}
}

/* Mobile re-composes rather than shrinking desktop columns. */
@media (max-width:720px){
  :root{--ce13-control:46px}
  body.ce-focus-learning .ce-learner-workspace-page .ce-section--study{padding-block:.35rem 1rem}
  body.ce-focus-learning .ce-container--study{width:min(100% - .65rem,100%)}
  body.ce-focus-learning .ce-study-room--class{gap:.5rem}
  body.ce-focus-learning .ce-study-room__classbar{grid-template-columns:minmax(0,1fr);gap:.55rem;padding:.65rem;border-radius:.75rem}
  .ce-study-room__class-actions{justify-content:space-between}.ce-study-room__status{text-align:start;grid-template-columns:auto auto;gap:.25rem;align-items:baseline}.ce-focus-exit{min-height:42px}
  .ce-learning-toolbar{display:block;padding:.35rem;border-radius:.75rem;overflow:visible}
  .ce-learning-toolbar__section{display:none}
  .ce-learning-toolbar__actions{justify-content:flex-start;gap:.3rem;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:none;padding:.05rem}.ce-learning-toolbar__actions::-webkit-scrollbar{display:none}
  .ce-learning-tool,.ce-learning-toolbar__settings>summary{min-height:46px;padding-inline:.72rem;flex:0 0 auto}
  .ce-learning-toolbar__settings[open]>div{position:fixed;inset-inline:.5rem;inset-block:auto .5rem;width:auto}
  .ce-learner-panel{padding:.75rem;border-radius:.75rem}
  .ce-learner-panel__head{grid-template-columns:30px minmax(0,1fr);gap:.55rem}.ce-learner-panel__step{width:30px;height:30px;border-radius:.5rem;font-size:.6875rem}
  body.ce-focus-learning .ce-learner-panel__head h3{font-size:1.125rem!important}
  .ce-learner-panel-nav{gap:.4rem}.ce-learner-panel-nav button{flex:1 1 8rem;min-width:0;padding:.55rem;font-size:.8125rem}
  body.ce-focus-learning .ce-study-notes{inset:.5rem;width:auto;max-height:calc(100dvh - 1rem);border-radius:.85rem}
  body.ce-focus-learning .ce-study-ai-drawer{width:100%;height:100dvh;padding:.8rem}
}

/* RTL: use logical flow and reverse only where ordering conveys progression. */
:dir(rtl) .ce-learner-tab{text-align:right}
:dir(rtl) .ce-study-room__status{text-align:left}
:dir(rtl) .ce-learner-contents{inset-inline-start:0;inset-inline-end:auto}
@media(max-width:1180px){:dir(rtl) .ce-learner-contents{transform:translateX(105%);border-radius:18px 0 0 18px}:dir(rtl) .ce-learner-frame.is-contents-open .ce-learner-contents{transform:translateX(0)}}

/* User/OS accessibility preferences. */
@media(prefers-reduced-motion:reduce){.ce-design-system-v1 *, .ce-design-system-v1 *::before,.ce-design-system-v1 *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}}
@media(prefers-contrast:more){:root{--ce13-border:#8798aa;--ce13-muted:#394b60}.ce-design-system-v1 :where(.ce-card,.ce-learner-panel,.ce-learner-contents,.ce-learning-toolbar){border-width:2px}.ce-design-system-v1 :where(a){text-decoration-thickness:.12em;text-underline-offset:.16em}}
@media(forced-colors:active){.ce-design-system-v1 :where(.ce-learner-panel,.ce-learner-contents,.ce-learning-toolbar,.ce-study-room__classbar,.ce-learner-context-card){border:2px solid CanvasText;box-shadow:none}.ce-design-system-v1 :where(.ce-learning-tool,.ce-focus-exit,.ce-learner-tab,.ce-button){forced-color-adjust:auto;border:1px solid ButtonText}.ce-design-system-v1 :where([aria-selected="true"],[aria-current="page"]){outline:2px solid Highlight}}

/* Text zoom/reflow: avoid fixed vertical clipping at large zoom. */
@media (max-width:400px){body.ce-focus-learning .ce-study-room__class-actions{flex-wrap:wrap}.ce-study-room__status{min-width:0}.ce-focus-exit{width:100%}.ce-learner-panel-nav{display:grid;grid-template-columns:1fr}.ce-learner-panel-nav button{width:100%}}