/* Control borders at 3:1 or better against the surface, Light and Dark (QA 2026-10-27). */
html[data-theme]{--cm-control:color-mix(in srgb,var(--ac-text-muted) 65%,var(--ac-bg-surface))}
/* Pages every role shares, new look only (fid-common; classes/commonui.php). Loaded with tokens.css while the newui switch is
 * on, and every rule is under html[data-theme] (set only then), so the old look never sees it. Figma uPehQXzXwP8EjInzP3mt2H:
 * G2.1-G2.4 / IPS-37..40 sign-in chain, G9.1-G9.5 forgot password + two-step code, X-1..X-4, IPS-29/32-35, G6.1, MSG-3/5,
 * TUT-26, G8.2, PUB-1/2. */

/* ---------- Pieces ---------- */
html[data-theme] .cm-icon{flex:none;display:block}
html[data-theme] .cm-mark{display:inline-flex;align-items:center;justify-content:center;flex:none;width:48px;height:48px;border-radius:var(--ac-radius-control);background:var(--ac-accent-solid);color:var(--ac-text-on-accent);font:600 20px/1 var(--ac-font-heading);object-fit:cover}
html[data-theme] .cm-theme{display:inline-flex;gap:2px;padding:3px;margin:0;border-radius:var(--ac-radius-pill);background:var(--ac-bg-raised)}
html[data-theme] .cm-theme button{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:6px 12px;border:0;border-radius:var(--ac-radius-pill);background:transparent;color:var(--ac-text-muted);font:600 13px/1 var(--ac-font-ui);cursor:pointer}
html[data-theme] .cm-theme button[aria-pressed="true"]{background:var(--ac-bg-surface);color:var(--ac-text-default);font-weight:700;box-shadow:0 1px 2px rgb(0 0 0/.08)}
html[data-theme] .cm-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border:1px solid var(--cm-control);border-radius:var(--ac-radius-control);background:var(--ac-bg-surface);color:var(--ac-text-default);font:600 15px/1.2 var(--ac-font-ui);text-decoration:none;cursor:pointer}
html[data-theme] .cm-btn:hover{background:var(--ac-bg-raised);text-decoration:none;color:var(--ac-text-default)}
html[data-theme] .cm-btn.primary{border-color:var(--ac-accent-solid);background:var(--ac-accent-solid);color:var(--ac-text-on-accent)}
html[data-theme] .cm-btn.primary:hover{background:var(--ac-accent-hover)}
html[data-theme] .cm-btn.wide{width:100%;min-height:48px;font-size:17px}
html[data-theme] .cm-btn.link{border-color:transparent;background:transparent;color:var(--ac-accent-text);padding:0 4px}
html[data-theme] .cm-btn.danger{color:var(--ac-status-danger)}
html[data-theme] .cm-pill{display:inline-flex;align-items:center;min-height:24px;padding:2px 10px;border-radius:var(--ac-radius-pill);background:var(--ac-bg-raised);color:var(--ac-text-muted);font:600 12px/1.3 var(--ac-font-ui);white-space:nowrap}
html[data-theme] .cm-pill[data-tone="ok"]{background:var(--ac-status-ok-bg);color:var(--ac-status-ok)}
html[data-theme] .cm-pill[data-tone="info"]{background:var(--ac-status-info-bg);color:var(--ac-status-info)}
html[data-theme] .cm-pill[data-tone="warn"]{background:var(--ac-status-warn-bg);color:var(--ac-status-warn)}
html[data-theme] .cm-note{display:flex;gap:10px;align-items:flex-start;margin:0;padding:12px 16px;border-radius:var(--ac-radius-control);background:var(--ac-bg-raised);color:var(--ac-text-muted);font:400 14px/1.45 var(--ac-font-ui)}
html[data-theme] .cm-note p{margin:0}
html[data-theme] .cm-note .cm-icon{margin-top:1px}
html[data-theme] .cm-note[data-tone="danger"]{background:var(--ac-status-danger-bg);color:var(--ac-status-danger);font-weight:600}
html[data-theme] .cm-note[data-tone="ok"]{background:var(--ac-status-ok-bg);color:var(--ac-status-ok);font-weight:600}
html[data-theme] .cm-note[data-tone="info"]{background:var(--ac-status-info-bg);color:var(--ac-status-info)}
html[data-theme] .cm-note[data-tone="warn"]{background:var(--ac-status-warn-bg);color:var(--ac-status-warn)}
html[data-theme] .cm-steps p{margin:0 0 8px;color:var(--ac-text-muted);font:600 13px/1 var(--ac-font-ui)}
html[data-theme] .cm-steps-bar{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
html[data-theme] .cm-steps-bar span{height:4px;border-radius:2px;background:var(--ac-bg-raised)}
html[data-theme] .cm-steps-bar span.on{background:var(--ac-accent-solid)}

/* ---------- Sign-in-style pages (Moodle layout "login", and the forced password change): chrome + one card ---------- */
html[data-theme] body:has(.cm-top){min-height:100vh;background:var(--ac-bg-canvas);color:var(--ac-text-default);font-family:var(--ac-font-ui)}
html[data-theme] body:has(.cm-top) #page-wrapper{position:relative;min-height:100vh;background:transparent}
html[data-theme] .cm-top{position:absolute;z-index:2;top:28px;left:40px;right:40px;display:flex;align-items:center;justify-content:space-between;gap:16px;height:52px}
html[data-theme] .cm-brand{display:flex;align-items:center;gap:12px;min-width:0}
html[data-theme] .cm-brand-text{display:flex;flex-direction:column;min-width:0}
html[data-theme] .cm-brand-name{font:600 20px/1.2 var(--ac-font-heading);color:var(--ac-text-default)}
html[data-theme] .cm-brand-sub{font:400 13px/1.3 var(--ac-font-ui);color:var(--ac-text-muted)}
html[data-theme] .cm-powered{position:absolute;left:40px;bottom:24px;margin:0;font:400 13px/1 var(--ac-font-ui);color:var(--ac-text-muted)}
html[data-theme] body:has(.cm-top) #page-wrapper{height:auto;min-height:100%}  /* long chrome pages (enrol, policy): the wrapper grows, so "powered by" stays under the form, never over it (iPad) */
/* Moodle's own parts the design does not have: the left text panel, the site logo, the footer button, the phone copy of the panel. */
html[data-theme] body:has(.cm-top) :is(.login-layout-left,#loginlogo,#page-footer,.loginform>.d-lg-none,.footer-popover,.btn-footer-popover){display:none!important}
html[data-theme] body.pagelayout-login:has(.cm-top) #page{margin:0!important;padding:0;background:transparent!important}
html[data-theme] body.pagelayout-login:has(.cm-top) #page-content{box-sizing:border-box;display:flex;margin:0;min-height:100vh;padding:120px 16px 80px;align-items:center;justify-content:center;background:transparent}
html[data-theme] body.pagelayout-login:has(.cm-top) #region-main{min-height:0!important;height:auto;flex:0 1 auto;width:100%;max-width:100%;display:flex;justify-content:center;padding:0;background:transparent;border:0}
html[data-theme] body.pagelayout-login:has(.cm-top) #region-main-box{width:100%;display:flex;justify-content:center;padding:0}
html[data-theme] body:has(.cm-top) .login-container{width:min(460px,100%);max-width:none;margin:0;padding:36px;border:1px solid var(--ac-border-default);border-radius:var(--ac-radius-panel);background:var(--ac-bg-surface);color:var(--ac-text-default);box-shadow:none}
html[data-theme] body:has(.cm-top) .login-container:has(.cm-terms){width:min(560px,100%)}
html[data-theme] body:has(.cm-top) .login-container>[role=main]>.card,html[data-theme] body:has(.cm-top) .login-container .card-body{border:0;padding:0;background:transparent;box-shadow:none}
html[data-theme] body:has(.cm-top) :is(.login-container,.cm-auth) :is(h1,.h2,.h3){margin:0 0 12px;font:600 34px/1.15 var(--ac-font-heading);color:var(--ac-text-default)}
html[data-theme] body:has(.cm-top) .loginform>p.text-muted,html[data-theme] .cm-auth .cm-lead{margin:0 0 20px;font:400 16px/1.45 var(--ac-font-ui);color:var(--ac-text-muted)!important}
html[data-theme] body:has(.cm-top) :is(.login-container,.cm-auth) :is(.form-label,label.cm-label,.col-form-label){display:block;margin:0 0 6px;font:600 15px/1.3 var(--ac-font-ui);color:var(--ac-text-default)}
html[data-theme] body:has(.cm-top) :is(.login-container,.cm-auth) :is(.form-control,.form-select,input.cm-input){width:100%;min-height:52px;padding:0 16px;border:1px solid var(--cm-control);border-radius:var(--ac-radius-control);background-color:var(--ac-bg-surface)!important;color:var(--ac-text-default);font:400 17px/1.3 var(--ac-font-ui);box-shadow:none}
html[data-theme] body:has(.cm-top) :is(.login-container,.cm-auth) textarea.form-control{min-height:96px;padding:12px 16px}
html[data-theme] body:has(.cm-top) :is(.login-container,.cm-auth) :is(.form-control,.form-select,input.cm-input):focus{border-color:var(--ac-accent-solid);outline:0;box-shadow:0 0 0 1px var(--ac-accent-solid)}
html[data-theme] body:has(.cm-top) :is(.login-container,.cm-auth) .form-control.is-invalid{border-color:var(--ac-status-danger);box-shadow:0 0 0 1px var(--ac-status-danger)}
html[data-theme] body:has(.cm-top) :is(.login-container,.cm-auth) .invalid-feedback,html[data-theme] body:has(.cm-top) .form-control-feedback{color:var(--ac-status-danger);font:400 14px/1.4 var(--ac-font-ui)}
html[data-theme] body:has(.cm-top) :is(.login-container,.cm-auth) :is(.btn-primary,button.primary,input[type=submit].btn-primary){width:100%;min-height:48px;border:0;border-radius:var(--ac-radius-control);background:var(--ac-accent-solid);color:var(--ac-text-on-accent);font:600 17px/1 var(--ac-font-ui)}
html[data-theme] body:has(.cm-top) :is(.login-container,.cm-auth) :is(.btn-primary,button.primary):hover{background:var(--ac-accent-hover)}
html[data-theme] body:has(.cm-top) :is(.login-container,.cm-auth) .btn-secondary{min-height:48px;border:1px solid var(--cm-control);border-radius:var(--ac-radius-control);background:var(--ac-bg-surface);color:var(--ac-text-default);font:600 16px/1 var(--ac-font-ui)}
html[data-theme] body:has(.cm-top) :is(.login-container,.cm-auth) a,html[data-theme] body:has(.cm-top) :is(.login-container,.cm-auth) .btn-link{color:var(--ac-accent-text);font-weight:600;text-decoration:none}
html[data-theme] body:has(.cm-top) :is(.login-container,.cm-auth) a:hover{text-decoration:underline}
html[data-theme] body:has(.cm-top) :is(.login-container,.cm-auth) .alert{display:flex;gap:10px;align-items:flex-start;padding:12px 16px;border:0;border-radius:var(--ac-radius-control);font:600 15px/1.4 var(--ac-font-ui)}
html[data-theme] body:has(.cm-top) :is(.login-container,.cm-auth) .alert-danger{background:var(--ac-status-danger-bg);color:var(--ac-status-danger)}
html[data-theme] body:has(.cm-top) :is(.login-container,.cm-auth) .alert-success{background:var(--ac-status-ok-bg);color:var(--ac-status-ok)}
html[data-theme] body:has(.cm-top) :is(.login-container,.cm-auth) .alert-info{background:var(--ac-status-info-bg);color:var(--ac-status-info)}
html[data-theme] body:has(.cm-top) :is(.login-container,.cm-auth) :is(.form-check-input,input[type=checkbox],input[type=radio]){width:22px;height:22px;margin-top:1px;accent-color:var(--ac-accent-solid);border-color:var(--cm-control)}
html[data-theme] body:has(.cm-top) :is(.login-container,.cm-auth) .form-check{display:flex;gap:12px;align-items:flex-start;padding-left:0;font:400 15px/1.45 var(--ac-font-ui)}
html[data-theme] body:has(.cm-top) :is(.login-container,.cm-auth) .form-check .form-check-input{float:none;margin-left:0;flex:none}
html[data-theme] body:has(.cm-top) :is(.login-container,.cm-auth) .small,html[data-theme] body:has(.cm-top) .text-muted{color:var(--ac-text-muted)!important}
/* Moodle's notices above the card (password changed, email saved). */
html[data-theme] body:has(.cm-top) #user-notifications .alert{width:min(460px,100%);margin:0 auto 16px;border:0;border-radius:var(--ac-radius-control)}
html[data-theme] body:has(.cm-top) #user-notifications .alert-success{background:var(--ac-status-ok-bg);color:var(--ac-status-ok)}

/* Sign in (G2.1, G2.1b, IPS-37): Moodle's form, laid out as the design: fields, then the button, then "Forgot password?". */
html[data-theme] #page-login-index .login-form{display:flex;flex-direction:column;gap:20px}
html[data-theme] #page-login-index .login-form>*{margin:0!important}
html[data-theme] #page-login-index .login-form>.text-end{order:2;text-align:left!important;font-size:16px}
html[data-theme] #page-login-index .login-form>.login-form-submit{order:1}
html[data-theme] #page-login-index .loginform>h1{margin-bottom:12px}
html[data-theme] #page-login-index #loginerrormessage{margin:0 0 20px}
html[data-theme] #page-login-index .login-cookiesnotice{margin-top:20px;text-align:left!important}
html[data-theme] #page-login-index .login-cookiesnotice .btn-link{padding:0;font:400 13px/1 var(--ac-font-ui);color:var(--ac-text-muted)}
html[data-theme] #page-login-index :is(.login-identityproviders,.login-signup){margin-top:20px}
html[data-theme] :is(.login-container,.cm-auth) .toggle-sensitive-btn{border:0!important;background:transparent!important;color:var(--ac-text-muted)}

/* The forced password change (G2.2, IPS-38): Moodle's "admin" page without its header, menu and drawers, as one card. */
html[data-theme] body:not(.pagelayout-login):has(.cm-top) :is(nav.navbar,#page-header,.drawer,.drawer-toggles,.secondary-navigation,#page-footer,.activity-header,.breadcrumb,#topofscroll>.drawer-toggles){display:none!important}
html[data-theme] body:not(.pagelayout-login):has(.cm-top) #page{margin:0!important;padding:120px 16px 80px;min-height:100vh;display:flex;justify-content:center;background:transparent}
html[data-theme] body:not(.pagelayout-login):has(.cm-top) #topofscroll{width:min(640px,100%);max-width:none;margin:0;padding:36px;border:1px solid var(--ac-border-default);border-radius:var(--ac-radius-panel);background:var(--ac-bg-surface)!important}
html[data-theme] body:not(.pagelayout-login):has(.cm-top) :is(h1,h2){font:600 30px/1.15 var(--ac-font-heading);color:var(--ac-text-default);margin:0 0 12px}
html[data-theme] body:not(.pagelayout-login):has(.cm-top) .mform :is(.fitem,.row){display:block;margin:0 0 16px}
html[data-theme] body:not(.pagelayout-login):has(.cm-top) .mform :is(.col-md-3,.col-md-9){width:100%;max-width:100%;padding:0}
html[data-theme] body:not(.pagelayout-login):has(.cm-top) .mform label{font:600 15px/1.3 var(--ac-font-ui);color:var(--ac-text-default)}
html[data-theme] body:not(.pagelayout-login):has(.cm-top) .mform .form-control{width:100%;min-height:52px;padding:0 16px;border:1px solid var(--cm-control);border-radius:var(--ac-radius-control);background:var(--ac-bg-surface);color:var(--ac-text-default);font:400 17px/1.3 var(--ac-font-ui)}
html[data-theme] body:not(.pagelayout-login):has(.cm-top) .mform .form-control:focus{border-color:var(--ac-accent-solid);box-shadow:0 0 0 1px var(--ac-accent-solid)}
html[data-theme] body:not(.pagelayout-login):has(.cm-top) .mform .btn-primary{width:100%;min-height:48px;border:0;border-radius:var(--ac-radius-control);background:var(--ac-accent-solid);color:var(--ac-text-on-accent);font:600 17px/1 var(--ac-font-ui)}
html[data-theme] body:not(.pagelayout-login):has(.cm-top) .mform .btn-secondary{width:100%;min-height:44px;margin-top:8px;border:0;background:transparent;color:var(--ac-accent-text);font-weight:600}
html[data-theme] body:not(.pagelayout-login):has(.cm-top) :is(.fdescription.required,.form-control-static,.text-danger .icon){font-size:13px}
html[data-theme] body:not(.pagelayout-login):has(.cm-top) .alert{border:0;border-radius:var(--ac-radius-control)}

/* Two-step code (G9.5, IPT-14; tool_mfa's own page): one card, the code in boxes, "Back to sign in" as a link. */
html[data-theme] #page-admin-tool-mfa-auth .tool-mfa-verify-container .mfa-verify-form .mform :is(.fitem,.row){display:block;margin:0 0 16px}
html[data-theme] #page-admin-tool-mfa-auth .mform :is(.col-md-3,.col-md-9){width:100%;max-width:100%;padding:0}
html[data-theme] #page-admin-tool-mfa-auth :is(.tool-mfa-verify-container,.mfa-verify-form){padding-left:0!important;padding-right:0!important;margin-left:0!important;margin-right:0!important}
html[data-theme] #page-admin-tool-mfa-auth h1.h2{font-size:28px}
html[data-theme] #page-admin-tool-mfa-auth #cancelmfa_button{width:auto;min-height:44px;padding:0;border:0;background:transparent;color:var(--ac-accent-text);font:600 15px/1 var(--ac-font-ui)}
html[data-theme] #page-admin-tool-mfa-auth .form-container.text-center{text-align:left!important}
html[data-theme] #page-admin-tool-mfa-auth .form-container .d-flex{justify-content:flex-start!important}
html[data-theme] #page-admin-tool-mfa-auth .tool-mfa-site-support{padding:12px 16px;border-radius:var(--ac-radius-control);background:var(--ac-bg-raised);color:var(--ac-text-muted);font-size:14px}
html[data-theme] #page-admin-tool-mfa-auth form.cm-mfa-back{margin:0 0 8px}
html[data-theme] #page-admin-tool-mfa-auth form.cm-mfa-back #cancelmfa_button{font-weight:400;font-size:17px}
html[data-theme] #page-admin-tool-mfa-action #manualattributes tr:last-child{display:none}  /* "Mode: Time based": not for tutors (SET-8 shows key and account only) */
html[data-theme] .cm-chip{display:inline-block;margin:0 0 12px;padding:4px 10px;border-radius:999px;background:var(--ac-bg-raised);color:var(--ac-text-muted);font:600 13px/1.3 var(--ac-font-ui)}
/* Show / Hide in the password field (IPD-T42) */
html[data-theme] .cm-pw{position:relative;display:block}
html[data-theme] .cm-pw .form-control{padding-right:76px!important;background-image:none!important}  /* !important: the sign-in input rule (padding 0 16px) out-ranks this, and long text ran under Show; no Bootstrap invalid icon under Show */
html[data-theme] .cm-pw-show{position:absolute;top:50%;right:6px;transform:translateY(-50%);min-height:44px;min-width:44px;padding:0 10px;border:0;background:transparent;color:var(--ac-accent-text);font:600 15px/1 var(--ac-font-ui);cursor:pointer}
/* Moodle's own toggle (loginpasswordtoggle) wraps the field in .toggle-sensitive-wrapper with an eye, before or after common.mjs ran: the field stays one box, Show is the only toggle (Telegram 201). */
html[data-theme] #page-login-index:has(.cm-pw-show) .toggle-sensitive-wrapper{display:block}
html[data-theme] #page-login-index:has(.cm-pw-show) .toggle-sensitive-wrapper>.form-control{border-radius:var(--ac-radius-control)}  /* input-group squares the side next to the (hidden) eye */
html[data-theme] #page-login-index:has(.cm-pw-show) .toggle-sensitive-btn{display:none!important}
html[data-theme] .cm-pw-show{z-index:6}  /* above Bootstrap's .input-group>.form-control:focus (z-index 5) */
html[data-theme] .cm-pw-show:focus-visible{outline:2px solid var(--ac-accent-solid);outline-offset:-2px;border-radius:var(--ac-radius-control)}
/* iPad sign-in and code (IPD-T42/T43): the centre's mark and name centred inside the card, no top bar. Phone and laptop keep IPS-37 / G2.1. */
html[data-theme] .cm-cardbrand{display:none}
@media (min-width:700px) and (max-width:1279px){
  html[data-theme] :is(#page-login-index,#page-admin-tool-mfa-auth) :is(.cm-top,.cm-powered){display:none}
  html[data-theme] :is(#page-login-index,#page-admin-tool-mfa-auth) .cm-cardbrand{display:flex;flex-direction:column;align-items:center;gap:12px;margin:0 0 8px;color:var(--ac-text-muted);font:400 15px/1.3 var(--ac-font-ui)}
  html[data-theme] :is(#page-login-index,#page-admin-tool-mfa-auth) .login-container :is(h1,.h2,p.text-muted){text-align:center}
  html[data-theme] #page-admin-tool-mfa-auth .tool-mfa-verify-container{text-align:center}
  html[data-theme] #page-admin-tool-mfa-auth .tool-mfa-site-support{background:transparent;padding:0;text-align:center}
  html[data-theme] #page-admin-tool-mfa-auth label[for=id_verificationcode]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}  /* still the input's label */
  html[data-theme] #page-admin-tool-mfa-auth .cm-code-wrap{margin:0 auto}
  html[data-theme] #page-admin-tool-mfa-auth .invalid-feedback{text-align:center}
  html[data-theme] #page-login-index .login-container :is(form .text-end,.login-cookiesnotice){display:flex;justify-content:center;text-align:center!important}
  html[data-theme] #page-admin-tool-mfa-auth .form-container .d-flex{justify-content:center!important}
}

/* The 6-digit code (email, forgot password, two-step): one real input, drawn as six boxes by common.mjs. */
html[data-theme] .cm-code-wrap{position:relative;display:inline-grid;grid-template-columns:repeat(6,52px);gap:10px;max-width:100%}
html[data-theme] .cm-code-box{display:flex;align-items:center;justify-content:center;height:56px;border:1px solid var(--cm-control);border-radius:var(--ac-radius-control);background:var(--ac-bg-surface);font:500 24px/1 var(--ac-font-num);color:var(--ac-text-default)}
html[data-theme] .cm-code-box.on{border-color:var(--ac-accent-solid);box-shadow:0 0 0 1px var(--ac-accent-solid)}
html[data-theme] .cm-code-wrap.bad .cm-code-box{border-color:var(--ac-status-danger)}
html[data-theme] .cm-code-wrap>input{position:absolute;inset:0;width:100%!important;height:100%!important;min-height:0!important;padding:0!important;border:0!important;background:transparent!important;color:transparent!important;caret-color:transparent;font-size:16px!important;letter-spacing:0;opacity:.01}

/* My own sign-in-style pages (app/email.php, app/forgot.php, agree.php): the card's inside. */
html[data-theme] .cm-auth{display:flex;flex-direction:column;gap:20px}
html[data-theme] .cm-auth>*,html[data-theme] body:has(.cm-top) .cm-auth :is(h1,.cm-lead){margin:0}
html[data-theme] .cm-auth form{display:flex;flex-direction:column;gap:20px;margin:0}
html[data-theme] .cm-auth [data-cm-panel]:not([hidden]){display:flex;flex-direction:column;gap:20px}
html[data-theme] .cm-auth .cm-field{display:flex;flex-direction:column;gap:6px}
html[data-theme] .cm-auth .cm-hint{margin:0;color:var(--ac-text-muted);font:400 14px/1.45 var(--ac-font-ui)}
html[data-theme] .cm-auth .cm-backlink{display:inline-flex;align-items:center;gap:8px;font:600 15px/1 var(--ac-font-ui)}
html[data-theme] .cm-auth .cm-done{color:var(--ac-status-ok)}
html[data-theme] .cm-auth .cm-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
html[data-theme] .cm-auth .cm-actions .cm-btn.primary{min-height:48px;font-size:17px}
html[data-theme] .cm-auth .cm-sep{height:1px;background:var(--ac-border-default)}
html[data-theme] .cm-auth .cm-sentline{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;color:var(--ac-text-muted);font:400 13px/1.3 var(--ac-font-ui)}
html[data-theme] body:has(.cm-top) .cm-auth input.cm-input[readonly]{background-color:var(--ac-bg-raised)!important}
html[data-theme] .cm-auth .cm-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:center}
html[data-theme] .cm-auth .cm-pair>*{width:100%;min-height:48px;justify-content:center}
html[data-theme] .cm-auth .cm-sent{display:flex;align-items:center;gap:8px;color:var(--ac-accent-text);font:600 15px/1 var(--ac-font-ui)}
html[data-theme] .cm-terms-text{max-height:min(52vh,420px);overflow:auto;padding:18px;border-radius:var(--ac-radius-control);background:var(--ac-bg-raised);font:400 15px/1.55 var(--ac-font-ui);color:var(--ac-text-default)}
html[data-theme] .cm-terms-text :is(h1,h2,h3,h4){font:600 18px/1.3 var(--ac-font-heading)!important;margin:16px 0 8px!important}
html[data-theme] .cm-terms-text hr{border:0;border-top:1px solid var(--cm-control);margin:16px 0}
html[data-theme] .cm-terms-end{font-weight:600}
html[data-theme] .cm-read{display:flex;align-items:center;gap:8px;color:var(--ac-text-muted);font:600 14px/1 var(--ac-font-ui)}
html[data-theme] .cm-read.done{color:var(--ac-status-ok)}
html[data-theme] .cm-choice{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border:1px solid var(--ac-border-default);border-radius:var(--ac-radius-control);font:600 15px/1.4 var(--ac-font-ui)}
html[data-theme] .cm-choice small{display:block;margin-top:2px;color:var(--ac-text-muted);font-weight:400;font-size:14px}
html[data-theme] .cm-choice input{flex:none;width:24px;height:24px;margin:0;accent-color:var(--ac-accent-solid)}
html[data-theme] .cm-auth button.primary:disabled{opacity:.45;cursor:not-allowed}
/* Agree for <child> (X-4 268:463): one card of plain ticks, Save full width, the note under it. */
html[data-theme] body:has(.cm-top) .login-container:has(.cm-agreechild){width:min(560px,100%)}
html[data-theme] .cm-agreechild .cm-card{display:flex;flex-direction:column;gap:14px}
html[data-theme] .ws .cm-agreechild .cm-card h2,html[data-theme] .cm-agreechild .cm-card h2{margin:0;font:600 15px/1.3 var(--ac-font-ui)}
html[data-theme] .cm-agreechild .cm-choice{padding:0;border:0;font-weight:400}
html[data-theme] .cm-agreechild button.primary{width:100%;min-height:52px;font-size:17px}
html[data-theme] .cm-stickybar{display:flex;flex-direction:column;gap:12px}
html[data-theme] .cm-agreechild .cm-card>.cm-small{margin:0}

/* Phones: no card, the page is the card (IPS-37..40, G9.x); the brand sits above the title, "powered by" under the form. */
@media (max-width:699px){
  html[data-theme] .cm-top{position:static;padding:max(16px,env(safe-area-inset-top)) 16px 0;height:auto}
  html[data-theme] .cm-top .cm-mark{width:34px;height:34px;font-size:15px;border-radius:9px}
  html[data-theme] .cm-top .cm-brand-name{font:600 16px/1.2 var(--ac-font-ui)}
  html[data-theme] .cm-top .cm-theme button{min-height:44px;padding:4px 10px}
  html[data-theme] .cm-top .cm-theme button .cm-icon{display:none}
  html[data-theme] .cm-powered{position:static;padding:8px 16px 24px;text-align:center}
  html[data-theme] body:has(.cm-top) #page-wrapper{display:flex;flex-direction:column}
  html[data-theme] body:has(.cm-top) #page-wrapper>#page{order:1;flex:1 0 auto;min-height:0!important}
  html[data-theme] #page-login-index .login-cookiesnotice{text-align:center!important}
  html[data-theme] body:has(.cm-top) #page-wrapper>.cm-powered{order:2}
  html[data-theme] body.pagelayout-login:has(.cm-top) #page-content{min-height:0!important;padding:12px 16px 8px;align-items:flex-start}
  html[data-theme] body:has(.cm-top) .login-container,html[data-theme] body:not(.pagelayout-login):has(.cm-top) #topofscroll{padding:0;border:0;background:transparent!important}
  html[data-theme] body:not(.pagelayout-login):has(.cm-top) #page{padding:12px 16px 24px}
  html[data-theme] body:has(.cm-top) :is(.login-container,.cm-auth) :is(h1,.h2,.h3){font-size:32px}
  html[data-theme] #page-login-index .login-form>.text-end{text-align:center!important}
  html[data-theme] .cm-code-wrap{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;width:100%}
}

/* ---------- Pages inside the app shell ---------- */
html[data-theme] .cm-page{display:flex;flex-direction:column;gap:16px;font-family:var(--ac-font-ui);color:var(--ac-text-default)}
html[data-theme] .cm-page>*{margin:0}
html[data-theme] .cm-back{display:inline-flex;align-items:center;gap:2px;align-self:flex-start;min-height:44px;color:var(--ac-accent-text);font:400 17px/1 var(--ac-font-ui);text-decoration:none}
html[data-theme] .cm-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
html[data-theme] .ws .cm-head h1{margin:0;font:600 32px/1.2 var(--ac-font-heading);color:var(--ac-text-default)}
html[data-theme] .cm-head p{margin:4px 0 0;color:var(--ac-text-muted);font-size:15px}
html[data-theme] .cm-head-end{display:flex;gap:8px;align-items:center}
html[data-theme] .cm-card{margin:0;padding:20px;border:1px solid var(--ac-border-default);border-radius:var(--ac-radius-panel);background:var(--ac-bg-surface)}
html[data-theme] .ws .cm-card :is(h2,h3){margin:0 0 12px;font:600 20px/1.25 var(--ac-font-heading);color:var(--ac-text-default)}
html[data-theme] .cm-section{margin:4px 0 -8px;color:var(--ac-text-muted);font:600 13px/1 var(--ac-font-ui);letter-spacing:.02em;text-transform:uppercase}
html[data-theme] .cm-list{display:flex;flex-direction:column;margin:0;padding:0;list-style:none;border:1px solid var(--ac-border-default);border-radius:var(--ac-radius-panel);background:var(--ac-bg-surface);overflow:hidden}
html[data-theme] .cm-list>*+*{border-top:1px solid var(--ac-border-default)}
html[data-theme] .cm-row{display:flex;align-items:center;gap:12px;min-height:52px;padding:12px 16px;color:var(--ac-text-default);text-decoration:none}
html[data-theme] a.cm-row:hover{background:var(--ac-bg-raised);color:var(--ac-text-default);text-decoration:none}
html[data-theme] .cm-row>.cm-icon{color:var(--ac-text-muted)}
html[data-theme] .cm-row-icon{display:flex;color:var(--ac-accent-text)}
html[data-theme] .cm-row-text{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
html[data-theme] .cm-row-title{font:400 16px/1.3 var(--ac-font-ui)}
html[data-theme] .cm-row-title[data-tone="danger"]{color:var(--ac-status-danger)}
html[data-theme] .cm-row-sub{font:400 13px/1.35 var(--ac-font-ui);color:var(--ac-text-muted)}
html[data-theme] .cm-row-value{color:var(--ac-text-muted);font:400 15px/1.3 var(--ac-font-ui);text-align:right;overflow-wrap:anywhere;max-width:55%}  /* a long value (an email) wraps, the label beside it keeps its width (IPS-33) */
html[data-theme] .cm-list form{margin:0}
html[data-theme] .cm-list button.cm-row{width:100%;border:0;background:transparent;text-align:left;font:inherit;cursor:pointer}
html[data-theme] .cm-list button.cm-row:hover{background:var(--ac-bg-raised)}

/* Notifications (IPS-29 phone, G6.1 iPad, MSG-3/TUT-27 laptop) */
html[data-theme] .cm-notes{padding:0;overflow:hidden}
html[data-theme] .cm-notes-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px;padding:8px 20px;color:var(--ac-text-muted);font-size:15px}
html[data-theme] .cm-notes-top form{margin:0}
html[data-theme] .ws .cm-card .cm-notes-group,html[data-theme] .cm-notes-group{margin:0;padding:8px 20px;background:var(--ac-bg-raised);color:var(--ac-text-muted);font:600 13px/1.3 var(--ac-font-ui);border-top:1px solid var(--ac-border-default)}
html[data-theme] .cm-notes ul{margin:0;padding:0;list-style:none}
html[data-theme] .cm-note-item{display:flex;align-items:center;gap:12px;padding:14px 20px;border-top:1px solid var(--ac-border-default)}
html[data-theme] .cm-note-item.unread{background:color-mix(in srgb,var(--ac-accent-subtle) 55%,transparent)}
html[data-theme] .cm-dot{flex:none;width:8px;height:8px;border-radius:50%;background:transparent}
html[data-theme] .unread>.cm-dot{background:var(--ac-accent-solid)}
html[data-theme] .cm-kind{display:flex;align-items:center;justify-content:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--ac-bg-raised);color:var(--ac-text-default)}
html[data-theme] .cm-note-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
html[data-theme] .cm-note-main>a{color:var(--ac-text-default);font:400 16px/1.35 var(--ac-font-ui);text-decoration:none}
html[data-theme] .cm-note-main>a::after{content:"";position:absolute;inset:0}
html[data-theme] .cm-note-item{position:relative}
html[data-theme] .unread .cm-note-main>a{font-weight:700}
html[data-theme] .cm-note-main>a:focus-visible{outline:0}
html[data-theme] .cm-note-item:has(>.cm-note-main>a:focus-visible){outline:2px solid var(--ac-accent-solid);outline-offset:-2px}
html[data-theme] .cm-note-body{color:var(--ac-text-muted);font-size:14px;line-height:1.4}
html[data-theme] .cm-note-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;color:var(--ac-text-muted);font-size:13px}
html[data-theme] .cm-note-end{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none}
html[data-theme] .cm-note-time{color:var(--ac-text-muted);font-size:14px;white-space:nowrap}
html[data-theme] .cm-note-end form{margin:0}
/* Staff list (MSG-3, IPD-T36): titles in semibold, the time under the text, the alert pill beside Mark read. */
html[data-theme] .cm-notes-staff .unread .cm-note-main>a{font-weight:600}
html[data-theme] .cm-notes-staff .cm-note-meta{font-size:12px}
html[data-theme] .cm-notes-staff .cm-note-end{flex-direction:row;align-items:center;gap:16px}
html[data-theme] .cm-notes-staff ul>.cm-note-item:first-child{border-top:0}
html[data-theme] .cm-notes-foot{margin:0;padding:14px 20px;border-top:1px solid var(--ac-border-default);color:var(--ac-text-muted);font-size:14px}
html[data-theme] .cm-notes-foot a{color:var(--ac-accent-text);font-weight:600}
html[data-theme] .cm-empty{padding:32px 20px;text-align:center;color:var(--ac-text-muted)}
html[data-theme] .cm-empty .cm-icon{margin:0 auto 8px;color:var(--ac-text-muted)}
html[data-theme] .cm-empty strong{display:block;color:var(--ac-text-default);font:600 18px/1.3 var(--ac-font-heading);margin-bottom:4px}

/* A centre message (IPS-32, MSG-5): centred at 680 wide on iPad and laptop. */
html[data-theme] .cm-message{max-width:680px;width:100%;margin:0 auto;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
html[data-theme] .cm-message>.cm-message-body{align-self:stretch}
html[data-theme] .ws .cm-message h1{margin:0;font:600 30px/1.2 var(--ac-font-heading)}
html[data-theme] .cm-message-meta{margin:0;color:var(--ac-text-muted);font-size:14px}
html[data-theme] .cm-message-body{margin:0;white-space:pre-wrap;font:400 17px/1.55 var(--ac-font-ui);overflow-wrap:anywhere}
html[data-theme] .cm-message-card .cm-message-body{padding:20px;border:1px solid var(--ac-border-default);border-radius:var(--ac-radius-panel);background:var(--ac-bg-surface)}  /* parents (MSG-5) */
html[data-theme] .cm-small{margin:0;color:var(--ac-text-muted);font-size:13px}

/* Access and error states (X-2) */
html[data-theme] .cm-state{display:flex;flex-direction:column;align-items:flex-start;gap:8px;max-width:560px}
html[data-theme] .cm-state>.cm-icon{color:var(--ac-text-muted);margin-bottom:4px}
html[data-theme] .ws .cm-state h2{margin:0;font:600 22px/1.25 var(--ac-font-heading)}
html[data-theme] .cm-state p{margin:0 0 8px;color:var(--ac-text-muted)}
html[data-theme] .cm-state .cm-ref{font:600 13px/1 var(--ac-font-num);color:var(--ac-text-default);letter-spacing:.04em}

/* Account (IPS-33 phone, TUT-26 laptop, G8.2 parent) */
html[data-theme] .cm-account{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
html[data-theme] .cm-account>div{display:flex;flex-direction:column;gap:16px;min-width:0}
html[data-theme] .cm-profile{display:grid;grid-template-columns:max-content minmax(0,1fr) max-content;align-items:center;gap:14px 24px;margin:0}
html[data-theme] .cm-profile dt{color:var(--ac-text-muted);font:400 14px/1.3 var(--ac-font-ui)}
html[data-theme] .cm-profile dd{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font:600 15px/1.3 var(--ac-font-ui);overflow-wrap:anywhere}
html[data-theme] .cm-profile .cm-act{justify-self:end}
html[data-theme] .cm-profile .cm-act a:not(.cm-btn){color:var(--ac-accent-text);font-weight:600;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
html[data-theme] .cm-card>.cm-small{margin-top:14px}
html[data-theme] .cm-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
html[data-theme] .ws .cm-card-head h2{margin:0}
html[data-theme] .cm-card .cm-list{margin:4px -20px -20px;border:0;border-top:1px solid var(--ac-border-default);border-radius:0;background:transparent}
html[data-theme] .cm-card>p{margin:0 0 12px}
html[data-theme] .cm-card .cm-theme{margin-bottom:8px}
html[data-theme] .cm-signout{display:flex;align-items:center;justify-content:center;min-height:48px;border:1px solid var(--cm-control);border-radius:var(--ac-radius-control);background:var(--ac-bg-surface);color:var(--ac-text-default);font:600 16px/1 var(--ac-font-ui);text-decoration:none}
html[data-theme] .cm-signout:hover{background:var(--ac-bg-raised);color:var(--ac-text-default);text-decoration:none}
/* The push card (push.mjs) in the account page: its checkboxes as switches (STU-14). */
html[data-theme] .cm-account #push-card{margin:0;padding:20px;border:1px solid var(--ac-border-default);border-radius:var(--ac-radius-panel);background:var(--ac-bg-surface);box-shadow:none}
html[data-theme] .cm-account #push-card h2{margin:0 0 6px;font:600 20px/1.25 var(--ac-font-heading)}
html[data-theme] .cm-account #push-card .actions{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 0}
html[data-theme] .cm-account #push-card .actions button{min-height:44px;padding:0 16px;border:1px solid var(--cm-control);border-radius:var(--ac-radius-control);background:var(--ac-bg-surface);color:var(--ac-text-default);font:600 15px/1 var(--ac-font-ui)}
html[data-theme] .cm-account #push-card .actions button.primary{border-color:var(--ac-accent-solid);background:var(--ac-accent-solid);color:var(--ac-text-on-accent)}
html[data-theme] .cm-account #push-kinds{margin:16px 0 0;padding:0;border:0;display:flex;flex-direction:column}
html[data-theme] .cm-account #push-kinds legend{margin:0 0 4px;font:600 16px/1.3 var(--ac-font-ui)}
html[data-theme] .cm-account #push-kinds label{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:6px 0;border-bottom:1px solid var(--ac-border-default);font:400 16px/1.3 var(--ac-font-ui);cursor:pointer}
html[data-theme] .cm-account #push-kinds label:last-child{border-bottom:0}
html[data-theme] .cm-account #push-kinds input{order:2;appearance:none;flex:none;position:relative;width:42px;height:26px;margin:0;border-radius:13px;background:var(--cm-control);cursor:pointer;transition:background var(--ac-motion)}
html[data-theme] .cm-account #push-kinds input::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform var(--ac-motion)}
html[data-theme] .cm-account #push-kinds input:checked{background:var(--ac-accent-solid)}
html[data-theme] .cm-account #push-kinds input:checked::after{transform:translateX(16px)}
html[data-theme] .cm-account #push-kinds input:focus-visible{outline:2px solid var(--ac-accent-solid);outline-offset:2px}
html[data-theme] .cm-account #push-status,html[data-theme] .cm-account #push-saved{margin:0;color:var(--ac-text-muted);font-size:14px}
html[data-theme] .cm-consent{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--ac-border-default)}
html[data-theme] .cm-consent:first-of-type{border-top:0}
html[data-theme] .cm-consent strong{display:block;font:600 16px/1.3 var(--ac-font-ui)}
html[data-theme] .cm-consent span{color:var(--ac-text-muted);font-size:14px}

/* Help (IPS-35) */
html[data-theme] .cm-help details{border-top:1px solid var(--ac-border-default)}
html[data-theme] .cm-help details:first-child{border-top:0}
html[data-theme] .cm-help summary{list-style:none;cursor:pointer}
html[data-theme] .cm-help summary::-webkit-details-marker{display:none}
html[data-theme] .cm-help details[open] summary>.cm-icon{transform:rotate(90deg)}
html[data-theme] .cm-help details>div{padding:0 16px 16px 48px;color:var(--ac-text-default);font-size:15px;line-height:1.55}
html[data-theme] .cm-help details>div p{margin:0 0 8px}
html[data-theme] .cm-help details>div ol{margin:0;padding-left:20px}

@media (min-width:1100px){
  html[data-theme] .cm-account{grid-template-columns:minmax(0,1fr) 320px}
}
/* Account on iPad (IPD-T41): small-caps labels over the cards instead of card titles, Profile as divided rows. Laptop keeps TUT-26. */
html[data-theme] .cm-section.cm-ipad,html[data-theme] .cm-ipad-only{display:none}
html[data-theme] :is(.cm-ipad-only,.cm-not-ipad){flex-direction:column;gap:16px}
html[data-theme] .cm-not-ipad{display:flex}
html[data-theme] .cm-actions-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px}
html[data-theme] .cm-link{display:inline-flex;align-items:center;min-height:44px;color:var(--ac-accent-text);font-weight:600;text-decoration:none}
html[data-theme] .cm-leave-now{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:var(--ac-radius-control);background:var(--ac-bg-raised);color:var(--ac-text-default);text-decoration:none}
html[data-theme] .cm-leave-now:hover{color:var(--ac-text-default);text-decoration:none;background:color-mix(in srgb,var(--ac-bg-raised) 80%,var(--ac-text-default))}
@media (min-width:700px) and (max-width:1279px){
  html[data-theme] .cm-section.cm-ipad{display:block}
  html[data-theme] .cm-ipad-only{display:flex}
  html[data-theme] .cm-not-ipad{display:none}
  html[data-theme] .ws :is(#account-profile>h2,#account-twostep h2,.cm-theme-card>h2){position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0)}  /* still the heading for screen readers */
  html[data-theme] #account-twostep .cm-card-head{position:absolute;right:20px;margin:0}
  html[data-theme] #account-twostep{position:relative}
  html[data-theme] #account-twostep>p{margin-right:56px}
  html[data-theme] .cm-profile{gap:0}
  html[data-theme] .cm-profile>dd{padding-left:16px}
  html[data-theme] .cm-profile>.cm-act{justify-self:stretch;justify-content:flex-end}
  html[data-theme] .cm-profile>*{align-self:stretch;min-height:48px;border-top:1px solid var(--ac-border-default)}
  html[data-theme] .cm-profile>:nth-child(-n+3){border-top:0}
  html[data-theme] .cm-profile>dt{display:flex;align-items:center}
  /* IPD-T41: the rows run edge to edge, values on the right; the reset hint is on Help. */
  html[data-theme] #account-profile{padding:0 16px}
  html[data-theme] .cm-profile>dd:not(.cm-act){justify-content:flex-end;font-weight:400;color:var(--ac-text-muted)}
  html[data-theme] #account-profile>.cm-small{display:none}
  html[data-theme] #account-profile .cm-act .cm-btn{min-height:44px;padding:0;border:0;background:none;color:var(--ac-accent-text)}
  html[data-theme] .cm-ipad-only>.cm-signout{align-self:flex-start;padding:0 20px;font-size:15px}
}
@media (max-width:699px){
  html[data-theme] .ws .cm-head h1{font-size:32px}
  html[data-theme] .cm-profile{grid-template-columns:minmax(0,1fr) max-content}
  html[data-theme] .cm-profile dt{grid-column:1/-1;margin-bottom:-12px}
  html[data-theme] .cm-profile dd:empty{display:none}
  html[data-theme] .cm-profile dd:not(.cm-act):has(+dd:empty){grid-column:1/-1}
  html[data-theme] .cm-card .cm-theme{display:flex;width:100%}
  html[data-theme] .cm-card .cm-theme button{flex:1;justify-content:center;min-height:44px}
  html[data-theme] .cm-notes-top,html[data-theme] .cm-notes-group,html[data-theme] .cm-note-item,html[data-theme] .cm-notes-foot{padding-left:16px;padding-right:16px}
  html[data-theme] .cm-kind{display:none}
  html[data-theme] .cm-note-item{align-items:flex-start}
  html[data-theme] .cm-dot{margin-top:7px}
}
/* A centre message (MSG-5 197:809 / 197:845): the body stays a card on phones; "not here" is one card with its own title, the page h1 hidden. */
html[data-theme] .cm-gone{max-width:680px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:8px}
html[data-theme] .ws .cm-gone h2{margin:0;font:600 19px/1.3 var(--ac-font-ui)}
html[data-theme] .cm-gone p{margin:0 0 8px;color:var(--ac-text-muted)}
html[data-theme] .sh:has(.cm-gone) .sh-title{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media print{html[data-theme] :is(.cm-top,.cm-powered,.cm-theme){display:none}}
html[data-theme] .cm-terms-text>article:first-child>:first-child{margin-top:0!important}
@media (min-width:700px){html[data-theme] .cm-back.cm-phone{display:none}}
html[data-theme] :is(.cm-chev,.cm-backbar){display:none}
/* Students and parents (G6.1 desktop, IPS-29 phone): no tinted rows; on a phone Today / Earlier are labels over their own cards. */
html[data-theme] .cm-notes:not(.cm-notes-staff) .cm-note-item.unread{background:transparent}
@media (max-width:699px){
  html[data-theme] .cm-notes:not(.cm-notes-staff){padding:0;border:0;background:transparent;overflow:visible}
  html[data-theme] .cm-notes:not(.cm-notes-staff) .cm-notes-top{display:none}
  html[data-theme] .ws .cm-card.cm-notes:not(.cm-notes-staff) .cm-notes-group{padding:4px 0 8px;border:0;background:transparent;font:600 13px/1 var(--ac-font-ui);letter-spacing:.02em;text-transform:uppercase}
  html[data-theme] .cm-notes:not(.cm-notes-staff) ul{margin:0 0 16px;border:1px solid var(--ac-border-default);border-radius:var(--ac-radius-panel);background:var(--ac-bg-surface);overflow:hidden}
  html[data-theme] .cm-notes:not(.cm-notes-staff) ul>.cm-note-item:first-child{border-top:0}
  html[data-theme] .cm-notes:not(.cm-notes-staff) .cm-notes-foot{padding:0;border:0}
  html[data-theme] .cm-notes:not(.cm-notes-staff) .cm-empty{border:1px solid var(--ac-border-default);border-radius:var(--ac-radius-panel);background:var(--ac-bg-surface)}
}
@media (max-width:699px){  /* IPT-12: dot | text | chevron, the pill under the text; opening a row marks it read, so no Mark read button */
  html[data-theme] .cm-backbar{display:flex;align-items:center;justify-content:space-between;margin:-8px 0 4px}
  html[data-theme] .cm-backbar .cm-btn.link{padding:0;font:400 17px/1 var(--ac-font-ui);color:var(--ac-accent-text)}
  html[data-theme] .cm-notes-staff .cm-note-item{display:grid;grid-template-columns:8px minmax(0,1fr) 18px;column-gap:12px;row-gap:6px}
  html[data-theme] .cm-notes-staff .cm-note-end{display:contents}
  html[data-theme] .cm-notes-staff .cm-note-end form{display:none}
  html[data-theme] .cm-notes-staff .cm-note-end .cm-pill{grid-column:2;justify-self:start}
  html[data-theme] .cm-notes-staff .cm-chev{display:flex;grid-column:3;grid-row:1;color:var(--ac-text-muted)}
  html[data-theme] .cm-notes-staff .cm-dot{grid-row:1}
}
html[data-theme] .cm-profile :is(dt,dd)::before,html[data-theme] .cm-profile :is(dt,dd)::after{content:none}
/* The forced password change, Boost "drawers" parts reset (Moodle positions #page under a fixed navbar). */
html[data-theme] body:not(.pagelayout-login):has(.cm-top) #page.drawers{position:static!important;inset:auto!important;height:auto!important;overflow:visible!important;margin:0!important}
html[data-theme] body:not(.pagelayout-login):has(.cm-top) #topofscroll{margin:0 auto!important;max-width:none!important;align-self:center}
html[data-theme] body:not(.pagelayout-login):has(.cm-top) :is(#page-content,#region-main-box,#region-main){margin:0;padding:0!important;border:0;background:transparent!important;box-shadow:none}
html[data-theme] body:not(.pagelayout-login):has(.cm-top) .offset-md-3{margin-left:0}
html[data-theme] body:not(.pagelayout-login):has(.cm-top) .mform .small{color:var(--ac-text-muted);font-size:14px}
html[data-theme] body:not(.pagelayout-login):has(.cm-top) .mform fieldset .d-flex.flex-wrap{flex-direction:column;align-items:stretch;width:100%}
html[data-theme] body:not(.pagelayout-login):has(.cm-top) .mform .felement{display:block!important}
html[data-theme] body:not(.pagelayout-login):has(.cm-top) .mform :is(.fitem .fitem,.btn-cancel){margin:0!important}
html[data-theme] body:not(.pagelayout-login):has(.cm-top) .fdescription.required{display:none}
html[data-theme] body:not(.pagelayout-login):has(.cm-top) #user-notifications .alert{margin:0 0 16px;background:var(--ac-status-info-bg);color:var(--ac-status-info);font-size:14px}
html[data-theme] body:not(.pagelayout-login):has(.cm-top) .form-control-static{font:600 16px/1.3 var(--ac-font-ui)}
@media (max-width:699px){
  html[data-theme] body:has(.cm-top) #page-wrapper{display:flex;flex-direction:column}
  html[data-theme] body:has(.cm-top) .cm-powered{order:9}
  html[data-theme] body:not(.pagelayout-login):has(.cm-top) #page.drawers{padding:12px 16px 24px}
}
html[data-theme] body:not(.pagelayout-login):has(.cm-top) #page-wrapper{height:auto!important;min-height:100vh}
html[data-theme] body:not(.pagelayout-login):has(.cm-top) #page.drawers{height:auto!important;min-height:100vh;align-items:flex-start;box-sizing:border-box}
html[data-theme] body:not(.pagelayout-login):has(.cm-top) #region-main [role=main]{padding:0}
html[data-theme] body:not(.pagelayout-login):has(.cm-top) .mform #id_submitbutton{width:100%}
html[data-theme] body:not(.pagelayout-login):has(.cm-top){height:auto!important;overflow:visible!important}
html[data-theme] body:not(.pagelayout-login):has(.cm-top) .mform :is(.fitem:has(>span>#id_submitbutton),.fitem:has(>span>#id_submitbutton)>span){display:block;width:100%}
html[data-theme] body:not(.pagelayout-login):has(.cm-top) form.mform{padding:0!important}
html[data-theme] body#page-login-change_password:has(.cm-top) #topofscroll{width:min(460px,100%)}
/* G2.2 as drawn: the step bar says why you are here (no Moodle notice), no username line, no required marks (every field is). */
html[data-theme] body#page-login-change_password:has(.cm-top[data-first-run]) :is(#region-main .alert-info,#fitem_id_username){display:none}
html[data-theme] body#page-login-change_password .form-label-addon{display:none!important}
html[data-theme] body#page-login-change_password .cm-steps{margin-bottom:20px}
html[data-theme] .cm-hide{display:none!important}
/* Terms changed (X-4): what the policies cover, the full text behind one link, one tick. */
html[data-theme] .cm-auth .cm-changed{margin:0 0 16px;padding:16px}
html[data-theme] .cm-auth .cm-changed h2{margin:0 0 8px;font:600 16px/1.3 var(--ac-font-ui)}
html[data-theme] .cm-changed ul{margin:0 0 4px;padding-left:18px;font:400 15px/1.45 var(--ac-font-ui)}
html[data-theme] .cm-changed li+li{margin-top:6px}
html[data-theme] .cm-fullterms>summary{display:flex;align-items:center;min-height:44px;color:var(--ac-accent-text);font:600 15px/1 var(--ac-font-ui);cursor:pointer;list-style:none}
html[data-theme] .cm-fullterms>summary::-webkit-details-marker{display:none}
html[data-theme] .cm-fullterms .cm-terms-text{max-height:50vh}
html[data-theme] body#page-login-change_password:has(.cm-top[data-first-run]) #id_cancel{display:none}
html[data-theme] .cm-rules{display:flex;flex-direction:column;gap:8px;margin:0 0 20px;padding:0;list-style:none;color:var(--ac-text-muted);font:400 15px/1.35 var(--ac-font-ui)}
html[data-theme] .cm-rules li{display:flex;align-items:center;gap:10px}
html[data-theme] .cm-rules li::before{content:"";flex:none;width:18px;height:18px;border:1.5px solid var(--cm-control);border-radius:50%;box-sizing:border-box}
html[data-theme] .cm-rules li.ok{color:var(--ac-text-default)}
html[data-theme] .cm-rules li.ok::before{border:0;background:var(--ac-status-ok);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 12l3 3l5-6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 12l3 3l5-6'/%3E%3C/svg%3E") center/contain no-repeat}
html[data-theme] .cm-code-wrap.bad~.invalid-feedback{display:block}
html[data-theme] a.cm-brand{color:inherit;text-decoration:none}
html[data-theme] body:has(.cm-top) .login-container :is([role=main],form.mform){padding:0!important}
html[data-theme] body:has(.cm-top) .login-container .mform :is(.fitem,.row){margin-left:0;margin-right:0}
@media (max-width:699px){html[data-theme] #page-admin-tool-mfa-auth h1.h2{font-size:26px}}
/* Opening the app (X-1; app/start.php): the centre's mark and name while the next page loads. */
html[data-theme] body.cm-splash{margin:0;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--ac-bg-canvas);color:var(--ac-text-default);font-family:var(--ac-font-ui)}
html[data-theme] .cm-splash-mark{display:flex;flex-direction:column;align-items:center;gap:14px;padding:16px;text-align:center}
html[data-theme] .cm-splash-mark .cm-mark{width:76px;height:76px;border-radius:18px;font-size:32px}
html[data-theme] .cm-splash-name{margin:0;font:600 26px/1.2 var(--ac-font-heading)}
html[data-theme] .cm-splash-resume{display:flex;align-items:center;gap:10px;margin:40px 0 0;padding:10px 18px;border:1px solid var(--ac-border-default);border-radius:var(--ac-radius-pill);background:var(--ac-bg-surface);font-size:15px}
html[data-theme] .cm-splash-resume[hidden],html[data-theme] .cm-splash-home[hidden]{display:none}
html[data-theme] .cm-splash-resume .cm-icon{color:var(--ac-accent-text)}
html[data-theme] .cm-splash-home{display:inline-flex;align-items:center;min-height:44px;color:var(--ac-accent-text);font-size:14px;text-decoration:none}
html[data-theme] .cm-splash-with{position:fixed;bottom:max(32px,env(safe-area-inset-bottom));left:0;right:0;margin:0;text-align:center;color:var(--ac-text-muted);font-size:13px}
@media (prefers-reduced-motion:no-preference){html[data-theme] .cm-splash-mark{animation:cm-in .35s ease-out both}@keyframes cm-in{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}}
/* Moodle's own error page (X-2 "Something went wrong"): Moodle's message and its Continue button as one card on the canvas. */
html[data-theme] body:has([data-rel=fatalerror]){background:var(--ac-bg-canvas)}
html[data-theme] body:has([data-rel=fatalerror]) :is(nav.navbar,#page-header,.drawer,.drawer-toggles,.secondary-navigation,#page-footer,.footer-popover,.breadcrumb){display:none!important}
html[data-theme] body:has([data-rel=fatalerror]) #page{margin:0!important;padding:96px 16px;background:transparent}
html[data-theme] body:has([data-rel=fatalerror]) :is(#page-content,#region-main-box,#region-main,#topofscroll){background:transparent!important;border:0;box-shadow:none}
html[data-theme] body:has([data-rel=fatalerror]) [role=main]{max-width:560px;margin:0 auto;padding:24px;border:1px solid var(--ac-border-default);border-radius:var(--ac-radius-panel);background:var(--ac-bg-surface);font-family:var(--ac-font-ui)}
html[data-theme] [data-rel=fatalerror]{margin:0 0 16px;padding:0!important;border:0;background:transparent;color:var(--ac-text-default)}
html[data-theme] [data-rel=fatalerror]::before{content:"";display:block;width:24px;height:24px;margin-bottom:10px;background:var(--ac-text-muted);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v4M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636-2.87l-8.106-13.536a1.914 1.914 0 0 0-3.274 0zM12 16h.01'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v4M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636-2.87l-8.106-13.536a1.914 1.914 0 0 0-3.274 0zM12 16h.01'/%3E%3C/svg%3E") center/contain no-repeat}
/* X-2: serif title, then Moodle's message as the muted line under it (CSS only: Moodle's error page has no chrome or script of ours). */
html[data-theme] [data-rel=fatalerror] .errormessage{margin:0;color:var(--ac-text-muted);font:400 15px/1.5 var(--ac-font-ui)}
html[data-theme] [data-rel=fatalerror] .errormessage::before{content:"Something went wrong";display:block;margin-bottom:8px;color:var(--ac-text-default);font:600 22px/1.25 var(--ac-font-heading)}
html[data-theme] [data-rel=fatalerror] .errorcode{display:none}
html[data-theme] body:has([data-rel=fatalerror]) [role=main] :is(.continuebutton,.singlebutton) .btn{min-height:44px;padding:0 18px;border:1px solid var(--cm-control);border-radius:var(--ac-radius-control);background:var(--ac-bg-surface);color:var(--ac-text-default);font:600 15px/1 var(--ac-font-ui)}
html[data-theme] body:has([data-rel=fatalerror]) [role=main] .continuebutton{text-align:left!important}
html[data-theme] body:has(.cm-top) .form-select{padding-right:40px}
/* The public enrolment form (PUB-1): the centre's name is already the brand on top. */
html[data-theme] #page-local-centre-enrol #enrol-form>h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
html[data-theme] #page-local-centre-enrol .login-container{width:min(560px,100%)}
html[data-theme] #page-local-centre-enrol fieldset legend{font:600 15px/1.3 var(--ac-font-ui)!important;margin-bottom:8px}
html[data-theme] #page-local-centre-enrol .form-check{margin-bottom:10px}
html[data-theme] #page-local-centre-enrol #enrol-form>h1+p{color:var(--ac-text-muted);font-size:15px}
@media (max-width:699px){html[data-theme] #page-local-centre-enrol .cm-top .cm-brand-name{font:600 24px/1.2 var(--ac-font-heading)}}  /* PUB-1: the brand is the page title */
html[data-theme] body:has(.cm-top) .form-check-input:checked{background-color:var(--ac-accent-solid);border-color:var(--ac-accent-solid)}
/* The centre policy (PUB-2; local_centre/policy.php, public and signed in): one card, plain headings. */
html[data-theme] #centre-policy{display:flex;flex-direction:column;gap:0;padding:0;border:0;background:transparent;font-family:var(--ac-font-ui);color:var(--ac-text-default)}
html[data-theme] #centre-policy>h1{margin:0;font:600 32px/1.2 var(--ac-font-heading)!important}
html[data-theme] #centre-policy>p.muted{margin:4px 0 16px;color:var(--ac-text-muted);font-size:14px}
html[data-theme] #centre-policy>section{padding:16px 20px;border:1px solid var(--ac-border-default);border-top:0;background:var(--ac-bg-surface)}
html[data-theme] #centre-policy>p+section{border-top:1px solid var(--ac-border-default);border-radius:var(--ac-radius-panel) var(--ac-radius-panel) 0 0}
html[data-theme] #centre-policy>section:last-child{border-radius:0 0 var(--ac-radius-panel) var(--ac-radius-panel)}
html[data-theme] #centre-policy>section h2{margin:0 0 6px!important;font:700 16px/1.3 var(--ac-font-ui)!important;color:var(--ac-text-default)}
html[data-theme] #centre-policy>section p{margin:0;color:var(--ac-text-default);font-size:15px;line-height:1.55}
html[data-theme] #page-local-centre-policy .login-container{width:min(680px,100%);padding:0;border:0;background:transparent}
/* Moodle's own account pages in the chrome (tool_policy "Policies and agreements" = My agreements IPS-34, tool_mfa set-up SET-8). */
html[data-theme] body:not(.pagelayout-login):has(.cm-top) .generaltable{width:100%;margin:0 0 16px;border-collapse:collapse;font-size:15px;color:var(--ac-text-default);--bs-table-bg:transparent}
html[data-theme] body:not(.pagelayout-login):has(.cm-top) .generaltable :is(th,td){padding:12px 8px;border:0;border-bottom:1px solid var(--ac-border-default);background:transparent;vertical-align:middle}
html[data-theme] body:not(.pagelayout-login):has(.cm-top) .generaltable th{color:var(--ac-text-muted);font:600 13px/1.3 var(--ac-font-ui)}
html[data-theme] body:not(.pagelayout-login):has(.cm-top) :is(.btn-primary,.btn-secondary,.btn-outline-secondary){min-height:44px;border-radius:var(--ac-radius-control);font:600 15px/1 var(--ac-font-ui)}
html[data-theme] body:not(.pagelayout-login):has(.cm-top) .btn-primary{border-color:var(--ac-accent-solid);background:var(--ac-accent-solid);color:var(--ac-text-on-accent)}
html[data-theme] body:not(.pagelayout-login):has(.cm-top) .card{border:1px solid var(--ac-border-default);border-radius:var(--ac-radius-control);background:var(--ac-bg-raised)}
html[data-theme] body:not(.pagelayout-login):has(.cm-top) #region-main a:not(.btn){color:var(--ac-accent-text);font-weight:600}
html[data-theme] body:not(.pagelayout-login):has(.cm-top) #region-main :is(p,li,label,td){color:var(--ac-text-default)}
html[data-theme] .cm-sr{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
/* QA: 44px touch rows for the small links and the theme switch. */
html[data-theme] .cm-theme button{min-height:44px}
html[data-theme] :is(.cm-auth .cm-actions a,.cm-auth .cm-backlink,.cm-auth .cm-hint a,#page-login-index .login-form>.text-end a,.cm-notes-foot a,.cm-profile .cm-act a){display:inline-flex;align-items:center;min-height:44px}
html[data-theme] #page-login-index .login-cookiesnotice .btn-link{min-height:44px;font-size:14px}
html[data-theme] .cm-auth .cm-actions form{margin:0}
/* Two-step set-up (SET-8; tool_mfa action.php?action=setup&factor=totp): Moodle's form as numbered steps on one card. */
html[data-theme] #page-admin-tool-mfa-action .mform h2{font:600 28px/1.2 var(--ac-font-heading)!important;margin:0 0 8px!important}
html[data-theme] #page-admin-tool-mfa-action #fitem_id_scan img{width:176px;height:176px;padding:8px;border-radius:var(--ac-radius-control);background:#fff;image-rendering:pixelated}
html[data-theme] #page-admin-tool-mfa-action #manualattributes code{font:600 18px/1.3 var(--ac-font-num);letter-spacing:.06em;color:var(--ac-text-default)}
html[data-theme] #page-admin-tool-mfa-action :is(#fitem_id_enter a,#fitem_id_devicenameinfo p){font-size:14px}
html[data-theme] #page-admin-tool-mfa-action .mform .felement[data-fieldtype=group] .d-flex{flex-direction:row!important;align-items:center!important;gap:16px}
html[data-theme] #page-admin-tool-mfa-action .mform .felement[data-fieldtype=group] .btn-primary{width:auto!important;padding:0 22px}
html[data-theme] body:not(.pagelayout-login):has(.cm-top) #user-notifications .alert{display:block;width:100%}
html[data-theme] .cm-auth form.cm-actions{flex-direction:row}
/* Feedback (IPS-36) */
html[data-theme] .cm-feedback{display:flex;flex-direction:column;gap:12px;max-width:640px}
html[data-theme] .cm-flabel{font:600 15px/1.3 var(--ac-font-ui);color:var(--ac-text-default)}
html[data-theme] .ws .cm-feedback textarea{width:100%;min-height:160px;padding:14px 16px;border:1px solid var(--cm-control);border-radius:var(--ac-radius-control);background:var(--ac-bg-canvas);color:var(--ac-text-default);font:400 17px/1.5 var(--ac-font-ui)}
html[data-theme] .ws .cm-feedback textarea:focus{border-color:var(--ac-accent-solid);box-shadow:0 0 0 1px var(--ac-accent-solid);outline:0}
html[data-theme] .cm-feedback-meta{display:flex;justify-content:space-between;gap:12px}
/* Feedback as drawn (IPS-36 / IPP-3): Cancel | Feedback | Send, topic chips, the tick; a sheet over Help, or a card on its own page. */
html[data-theme] .cm-sheet-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}
html[data-theme] .ws .cm-sheet-head h2{margin:0;font:600 17px/1.2 var(--ac-font-ui);text-align:center}
html[data-theme] .cm-sheet-head .cm-btn.link{padding:0;font-size:17px}
html[data-theme] .cm-sheet-head>:first-child{justify-self:start;font-weight:400}
html[data-theme] .cm-sheet-head>.cm-send{justify-self:end;font-weight:600}
html[data-theme] .cm-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;border:0}
html[data-theme] .cm-chips legend{margin:0 0 8px;padding:0;float:none;width:auto}
html[data-theme] .cm-chipopt{position:relative;display:inline-flex}
html[data-theme] .cm-chipopt input{position:absolute;opacity:0;width:1px;height:1px}
html[data-theme] .cm-chipopt span{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:999px;background:var(--ac-bg-raised);color:var(--ac-text-muted);font:600 14px/1 var(--ac-font-ui);cursor:pointer}
html[data-theme] .cm-chipopt input:checked+span{background:var(--ac-accent-subtle);color:var(--ac-accent-text)}
html[data-theme] .cm-chipopt input:focus-visible+span{outline:2px solid var(--ac-accent-solid);outline-offset:2px}
html[data-theme] .cm-tick{display:flex;gap:12px;align-items:flex-start;cursor:pointer;font:400 15px/1.4 var(--ac-font-ui)}
html[data-theme] .cm-tick input{flex:none;width:22px;height:22px;margin:1px 0 0;accent-color:var(--ac-accent-solid)}
html[data-theme] .cm-tick>span{display:flex;flex-direction:column;gap:2px}
html[data-theme] .cm-warntext{margin:0;color:var(--ac-status-warn)}
html[data-theme] dialog.cm-sheet{position:fixed;inset:auto 0 0 0;width:100%;max-width:560px;max-height:92vh;margin:0 auto;padding:24px 16px calc(24px + env(safe-area-inset-bottom));border:0;border-radius:16px 16px 0 0;background:var(--ac-bg-surface);color:var(--ac-text-default);overflow:auto}
html[data-theme] dialog.cm-sheet::before{content:"";position:absolute;top:8px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:var(--cm-control)}
html[data-theme] dialog.cm-sheet::backdrop{background:rgb(0 0 0 / .4)}
@media (min-width:700px){html[data-theme] dialog.cm-sheet{inset:0;margin:auto;height:fit-content;border-radius:var(--ac-radius-panel)}html[data-theme] dialog.cm-sheet::before{content:none}}
/* SET-8 as drawn: steps 1 (install) 2 (scan: QR | key) 3 (device name | code), placed by grid over Moodle's own field order. */
html[data-theme] #page-admin-tool-mfa-action .mform{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:24px;align-items:start}
html[data-theme] #page-admin-tool-mfa-action .mform>*{grid-column:1/-1;order:9}
html[data-theme] #page-admin-tool-mfa-action .mform>h2{order:1}
html[data-theme] #page-admin-tool-mfa-action .mform>p:nth-of-type(1){order:2;margin:0 0 12px}
html[data-theme] #page-admin-tool-mfa-action .mform>p:nth-of-type(3){order:3}
html[data-theme] #page-admin-tool-mfa-action .mform>#fitem_id_scan{order:4;grid-column:1}
html[data-theme] #page-admin-tool-mfa-action .mform>#fitem_id_enter{order:4;grid-column:2;align-self:center}
html[data-theme] #page-admin-tool-mfa-action .mform>p:nth-of-type(4){order:5}
html[data-theme] #page-admin-tool-mfa-action .mform>#fitem_id_devicename{order:6;grid-column:1}
html[data-theme] #page-admin-tool-mfa-action .mform>#fitem_id_verificationcode{order:6;grid-column:2}
html[data-theme] #page-admin-tool-mfa-action .mform>#fitem_id_devicenameinfo{order:7}
html[data-theme] #page-admin-tool-mfa-action .mform>p:nth-of-type(2){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}  /* "Give your device a name": the field's label says it */
html[data-theme] #page-admin-tool-mfa-action .mform>p:is(:nth-of-type(1),:nth-of-type(3),:nth-of-type(4))::before{font-weight:600}
html[data-theme] #page-admin-tool-mfa-action .mform>p:nth-of-type(1)::before{content:"1. "}
html[data-theme] #page-admin-tool-mfa-action .mform>p:nth-of-type(3)::before{content:"2. "}
html[data-theme] #page-admin-tool-mfa-action .mform>p:nth-of-type(4)::before{content:"3. "}
html[data-theme] #page-admin-tool-mfa-action .mform>p.bold{margin:16px 0 8px;font:600 16px/1.4 var(--ac-font-ui)}
html[data-theme] #page-admin-tool-mfa-action #collapseManualAttributes{display:block!important;height:auto!important;margin-top:8px}  /* the key shows beside the QR, as drawn (Moodle reveals the same table on a click) */
html[data-theme] #page-admin-tool-mfa-action #fitem_id_enter>.col-md-3,html[data-theme] #page-admin-tool-mfa-action #fitem_id_scan>.col-md-3{display:none}
html[data-theme] #page-admin-tool-mfa-action #manualattributes :is(td,th){padding:4px 12px 4px 0;border:0}
html[data-theme] #page-admin-tool-mfa-action .cm-code-wrap{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;width:100%}
html[data-theme] #page-admin-tool-mfa-action .cm-code-box{height:52px}
@media (max-width:699px){
  html[data-theme] #page-admin-tool-mfa-action .mform>*{grid-column:1/-1!important}
}
html[data-theme] #page-admin-tool-mfa-action #fitem_id_enter .form-control-static>a:first-child{display:none}
html[data-theme] #page-admin-tool-mfa-action #fitem_id_enter .form-control-static::before{content:"Cannot scan? Type this key:";display:block;color:var(--ac-text-muted);font-size:14px}
html[data-theme] #page-admin-tool-mfa-action #manualattributes code{white-space:nowrap;font-size:16px;letter-spacing:.04em}
html[data-theme] #page-admin-tool-mfa-action #manualattributes{width:auto;max-width:100%}
html[data-theme] #page-admin-tool-mfa-action #manualattributes :is(td,th){padding-right:8px}
html[data-theme] #page-admin-tool-mfa-action .mform>#fitem_id_devicenameinfo{display:none}  /* not drawn: the "e.g. My phone" placeholder says it */
html[data-theme] body:not(.pagelayout-login):has(.cm-top)#page-admin-tool-mfa-action .mform :is(.fitem:has(>span>#id_submitbutton),.fitem:has(>span>#id_submitbutton)>span){width:auto}
html[data-theme] #page-admin-tool-mfa-action .mform .felement[data-fieldtype=group] .d-flex{flex-direction:row!important;align-items:center!important;gap:16px}

/* Parent account (G8.2 62:286): one centred column on every width. */
html[data-theme] .cm-pacct{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
html[data-theme] .cm-pacct .cm-card{display:flex;flex-direction:column;gap:16px}
html[data-theme] .ws .cm-pacct .cm-card h2{margin:0}
html[data-theme] .cm-pacct-row,html[data-theme] .cm-consent-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0}
html[data-theme] .cm-pacct-row>div,html[data-theme] .cm-pacct-look,html[data-theme] .cm-consent-row>div{display:flex;flex-direction:column;gap:4px;min-width:0}
html[data-theme] .cm-pacct-row span,html[data-theme] .cm-pacct-look>span{color:var(--ac-text-muted);font:400 14px/1.3 var(--ac-font-ui)}
html[data-theme] .cm-pacct-row strong{font:400 17px/1.3 var(--ac-font-ui);overflow-wrap:anywhere}
html[data-theme] .cm-pacct-look .cm-theme,html[data-theme] .cm-card .cm-pacct-look .cm-theme{align-self:flex-start;display:inline-flex;width:auto;margin:0}
html[data-theme] .cm-pacct-act{display:inline-flex;align-items:center;min-height:44px;color:var(--ac-accent-text);font-weight:600;text-decoration:none}
html[data-theme] .cm-consent-row strong{font:600 16px/1.3 var(--ac-font-ui)}
html[data-theme] .cm-consent-row span{color:var(--ac-text-muted);font-size:14px}
html[data-theme] .cm-consent-row .cm-btn{flex:none;min-height:44px}
html[data-theme] .cm-pacct-powered{text-align:center}
/* Help (IPS-35, IPP-2): a readable column on wide screens. */
html[data-theme] .cm-page:has(.cm-help){max-width:720px;margin-inline:auto}
/* Forgot password G9.3 (fe-parent3, P-23): the eye in each password box and the mismatch line under the second */
html[data-theme] body:has(.cm-top) .cm-auth .cm-pw .cm-input{width:100%;padding-right:56px}
html[data-theme] .cm-pw-eye{display:inline-flex;align-items:center;justify-content:center;color:var(--ac-text-muted)}
html[data-theme] body:has(.cm-top) .cm-auth .cm-input.is-invalid{border-color:var(--ac-status-danger);box-shadow:0 0 0 1px var(--ac-status-danger)}
html[data-theme] .cm-fielderr{display:flex;align-items:center;gap:6px;margin:6px 0 0;font:600 14px/1.3 var(--ac-font-ui);color:var(--ac-status-danger)}
html[data-theme] .cm-fielderr[hidden]{display:none}
/* Student/parent notifications (IPS-29): Today and Earlier each a card under its label; unread = dot + bold, no tint. */
html[data-theme] .cm-notes-split{display:flex;flex-direction:column;gap:16px;overflow:visible}
html[data-theme] .cm-notes-split>.cm-card{padding:0;overflow:hidden}
html[data-theme] .ws .cm-notes-split>h2.cm-section{margin:0 0 -8px;color:var(--ac-text-muted);font:600 13px/1 var(--ac-font-ui);letter-spacing:.02em;text-transform:uppercase}
html[data-theme] .cm-notes-split ul>.cm-note-item:first-child{border-top:0}
html[data-theme] .cm-notes-split .cm-note-item.unread{background:transparent}
html[data-theme] .cm-notes-split .cm-notes-foot{padding:0;border:0}
html[data-theme] .cm-notes-split ul{margin:0!important;border:0!important;border-radius:0!important}
@media (max-width:699px){html[data-theme] .cm-notes-split .cm-kind{display:none}}
/* Student "Password and email" (IPS-33): grouped rows, the theme switch full width, a red Sign out row. */
html[data-theme] .cm-sacct{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
html[data-theme] .cm-sacct>.cm-section{margin:8px 0 -4px}
html[data-theme] .cm-sacct>.cm-theme{display:flex;width:100%}
html[data-theme] .cm-sacct>.cm-theme button{flex:1;justify-content:center;min-height:44px}
html[data-theme] .cm-row-title[data-tone=danger]{color:var(--ac-status-danger)}
/* Phones (IPS-37..40, X-4): no theme switch on the sign-in pages; "Step n of 3" sits top right where it was; Save sticks to the bottom. */
@media (max-width:699px){
  html[data-theme] .cm-top .cm-theme{display:none}
  html[data-theme] body:has(.cm-top) #page-wrapper{position:relative}
  html[data-theme] body:has(.cm-top) .cm-steps-bar{display:none}
  html[data-theme] body:has(.cm-top) .cm-steps p{position:absolute;top:calc(max(16px,env(safe-area-inset-top)) + 8px);right:16px;margin:0;font-weight:400}
  html[data-theme] .cm-stickybar{position:sticky;bottom:0;margin:0 -16px;padding:12px 16px max(12px,env(safe-area-inset-bottom));background:var(--ac-bg-canvas)}
}
/* G9.4 Password changed: a round check, then the title; Sign in full width. */
html[data-theme] .cm-done-mark{display:inline-flex;color:var(--ac-accent-solid)}
html[data-theme] .cm-done-mark .cm-icon{width:36px;height:36px}
html[data-theme] body:has(.cm-top) .cm-auth a.cm-btn.primary.cm-wide{color:var(--ac-text-on-accent)!important;text-decoration:none}
html[data-theme] .cm-auth .cm-btn.cm-wide{display:flex;justify-content:center;align-items:center;width:100%;min-height:48px}
/* Parent notices (PAR-ATT 152:569): each notice its own card, the time under the text, no day labels. */
html[data-theme] .cm-notes-parent>h2.cm-section{display:none}
html[data-theme] .cm-notes-parent>.cm-card{padding:0;border:0;background:transparent;overflow:visible}
html[data-theme] .cm-notes-parent ul{display:flex;flex-direction:column;gap:12px;background:transparent!important;overflow:visible!important}
html[data-theme] .cm-notes-parent .cm-note-item{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;row-gap:4px;padding:14px 16px;border:1px solid var(--ac-border-default)!important;border-radius:var(--ac-radius-panel);background:var(--ac-bg-surface)}
html[data-theme] .cm-notes-parent .cm-note-end{grid-column:2;display:block}
html[data-theme] .cm-notes-parent .cm-note-time{font-size:12px;color:var(--ac-text-muted)}
/* Check-in code (T-40: IPT-15 310:824, IPD-T10 321:1555, TUT-3 147:3164). The code is always black on white so phones can read it. */
html[data-theme] .cm-qr{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
html[data-theme] .cm-qr-box{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
html[data-theme] .cm-qr-code{width:min(100%,320px);aspect-ratio:1;padding:12px;border-radius:var(--ac-radius-control);background:#fff;color:#000}
html[data-theme] .cm-qr-code svg{display:block;width:100%;height:auto}
html[data-theme] .cm-qr-scan{margin:0;font:600 18px/1.3 var(--ac-font-ui)}
html[data-theme] .cm-qr-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
html[data-theme] .cm-qr-row .cm-qr-count{margin:0;padding:4px 12px;border-radius:999px;background:var(--ac-status-ok-subtle,var(--ac-accent-subtle));color:var(--ac-accent-text);font:600 14px/1.4 var(--ac-font-ui)}
html[data-theme] .cm-qr-fullbtn{width:100%;min-height:48px}
html[data-theme] .cm-qr-full{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:48px}
html[data-theme] .cm-qr-full .cm-qr-box{padding:24px;border-radius:var(--ac-radius-panel);background:#fff}
html[data-theme] .cm-qr-full .cm-qr-code{width:min(100%,600px);padding:0}
html[data-theme] .cm-qr-side{display:flex;flex-direction:column;gap:16px}
html[data-theme] .cm-qr-kicker{margin:0;color:var(--ac-accent-text);font:600 20px/1 var(--ac-font-ui)}
html[data-theme] .ws .cm-qr-side h2{margin:0;font:600 clamp(36px,5vw,72px)/1.05 var(--ac-font-heading)}
html[data-theme] .cm-qr-when{margin:0;color:var(--ac-text-muted);font-size:clamp(16px,1.6vw,24px)}
html[data-theme] .cm-qr-steps{margin:0;padding:20px 20px 20px 44px;font-size:clamp(16px,1.5vw,22px);line-height:1.9}
html[data-theme] .cm-qr-full .cm-qr-count{margin:0;padding:20px 24px;border-radius:var(--ac-radius-panel);background:var(--ac-accent-subtle);font-size:20px}
html[data-theme] .cm-qr-full .cm-qr-count strong{font:600 48px/1 var(--ac-font-ui);color:var(--ac-accent-text);margin-right:12px}
html[data-theme] .cm-qr-foot{grid-column:1/-1}
@media (max-width:899px){html[data-theme] .cm-qr-full{grid-template-columns:minmax(0,1fr);gap:20px}}
/* X-2: the reference on its own line (shell's errors.php words end "...this reference:\nREF ..."). */
html[data-theme] [data-rel=fatalerror] .errormessage{white-space:pre-line}
/* S-51 My agreements (tool_policy user.php) on phones: each policy row becomes a small card, no sideways scroll. */
@media (max-width:699px){
  html[data-theme] #page-admin-tool-policy-user :is(.table-responsive,.no-overflow){overflow:visible}
  html[data-theme] #page-admin-tool-policy-user table{display:block;width:100%!important;min-width:0!important}
  html[data-theme] #page-admin-tool-policy-user table thead{display:none}
  html[data-theme] #page-admin-tool-policy-user table :is(tbody,tr){display:block;width:100%}
  html[data-theme] #page-admin-tool-policy-user table tr{display:flex;flex-wrap:wrap;gap:4px 12px;padding:12px 0;border-bottom:1px solid var(--ac-border-default)}
  html[data-theme] #page-admin-tool-policy-user table td{display:block;padding:0!important;border:0!important;min-width:0;overflow-wrap:anywhere}
  html[data-theme] #page-admin-tool-policy-user table td:first-child{flex:1 0 100%;font-weight:600}
  html[data-theme] #page-admin-tool-policy-user table td:empty{display:none}
}
/* Polish (QA-live Polish list, fe-common) */
/* S-53/P-25: round ticks as drawn; the four topic chips fit one row at 393. */
html[data-theme] .cm-tick input{appearance:none;-webkit-appearance:none;box-sizing:border-box;width:22px!important;height:22px!important;min-width:0;min-height:0!important;padding:0;display:grid;place-content:center;border:2px solid var(--cm-control);border-radius:50%;background:var(--ac-bg-surface)}
html[data-theme] .cm-tick input:checked{border-color:var(--ac-accent-solid);background:var(--ac-accent-solid)}
html[data-theme] .cm-tick input:checked::after{content:"";width:10px;height:6px;margin-top:-2px;border:2px solid var(--ac-text-on-accent);border-top:0;border-right:0;transform:rotate(-45deg)}
html[data-theme] .cm-tick input:focus-visible{outline:2px solid var(--ac-accent-solid);outline-offset:2px}
@media (max-width:420px){html[data-theme] .cm-chips{gap:6px}html[data-theme] .cm-chipopt span{padding:0 10px;font-size:13px}}
/* S-50: iPad and laptop already have the theme switch in the header; the page's own is for phones. */
@media (min-width:700px){html[data-theme] .cm-sacct>.cm-theme,html[data-theme] .cm-sacct>.cm-theme+.cm-small,html[data-theme] .cm-sacct>.cm-section:has(+.cm-theme){display:none}}
/* T-48: the code boxes need no "Code" label (G9.5, IPT-14); the iPad card draws no "‹ Sign in" (IPD-T43). */
html[data-theme] #page-admin-tool-mfa-auth .tool-mfa-verify-container :is(label[for=id_verificationcode],.col-form-label:has(label)){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (min-width:700px) and (max-width:1279px){html[data-theme] #page-admin-tool-mfa-auth .cm-mfa-back{display:none}}
html[data-theme] #notif-right>#notifications{display:flex;flex-direction:column;gap:12px}  /* T-47 iPad: label above the moved card */
html[data-theme] .cm-qr-full .cm-qr-count small{display:block;margin-top:4px;color:var(--ac-text-muted);font-size:14px}  /* TUT-3 */
/* A11Y (A11Y.md): the theme buttons' group div lays out like the form did; a notification row is tappable as a whole (link stretched). */
html[data-theme] .cm-theme-group{display:contents}
html[data-theme] .cm-note-item{position:relative;min-height:44px}
html[data-theme] .cm-note-main>a::after{content:"";position:absolute;inset:0}
html[data-theme] .cm-note-end :is(form,button,a){position:relative;z-index:1}
/* S-61: the warning icon in the warning colour (X-2 268:263). */
html[data-theme] [data-rel=fatalerror]::before{background:var(--ac-status-warn)}
/* My agreements (IPS-34, S-51): optional consents as a card with a switch (a one-tap POST through tool_policy). */
html[data-theme] .cm-optin form{display:flex;flex-direction:column;gap:8px;margin:0}
html[data-theme] .cm-optin-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;font:600 16px/1.35 var(--ac-font-ui)}
html[data-theme] .cm-optin .cm-small{margin:0}
html[data-theme] .cm-switch{flex:none;position:relative;width:50px!important;height:30px!important;min-height:0!important;margin:0;padding:0;border:0;border-radius:999px;background:var(--ac-bg-raised);box-shadow:inset 0 0 0 1px var(--cm-control);cursor:pointer}
html[data-theme] .cm-switch::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:var(--ac-bg-surface);box-shadow:0 1px 2px rgb(0 0 0/.2);transition:left .15s}
html[data-theme] .cm-switch[aria-checked=true]{background:var(--ac-accent-solid);box-shadow:none}
html[data-theme] .cm-switch[aria-checked=true]::after{left:23px}
html[data-theme] .cm-switch:focus-visible{outline:2px solid var(--ac-accent-solid);outline-offset:2px}
@media (prefers-reduced-motion:reduce){html[data-theme] .cm-switch::after{transition:none}}