/* KIPS program-wide accessibility & readability layer (TEST)
   Loads after page styles. Improves typography, contrast, focus, touch targets,
   forms, zoom, and optional user display preferences without flattening branding. */
:root{
  --kips-text-xs:clamp(.8125rem,.8rem + .1vw,.875rem);
  --kips-text-sm:clamp(.9375rem,.9rem + .15vw,1rem);
  --kips-text-base:clamp(1.0625rem,1rem + .2vw,1.125rem);
  --kips-text-lg:clamp(1.125rem,1.05rem + .25vw,1.25rem);
  --kips-text-xl:clamp(1.25rem,1.15rem + .35vw,1.5rem);
  --kips-text-2xl:clamp(1.5rem,1.3rem + .6vw,2rem);
  --kips-question-text:clamp(1.125rem,1.05rem + .35vw,1.35rem);
  --kips-heading:clamp(1.35rem,1.15rem + .7vw,1.85rem);
  --kips-line-height:1.55;
  --kips-line-height-tight:1.35;
  --kips-font-medium:500;
  --kips-font-semibold:600;
  --kips-font-bold:700;
  --kips-font-extrabold:800;
  --kips-ink-strong:#0b1f3a;
  --kips-ink-body:#142c44;
  --kips-ink-muted:#3d556c;
  --kips-surface-readable:rgba(255,255,255,.94);
  --kips-focus:#0c7ea8;
  --kips-focus-ring:0 0 0 3px #fff,0 0 0 6px rgba(12,126,168,.55);
  --kips-touch-min:44px;
  --kips-text-scale:1;
  --kips-max-prose:62ch;
  /* Adaptive layout tokens */
  --kips-space-xs:.35rem;
  --kips-space-sm:.65rem;
  --kips-space-md:1rem;
  --kips-space-lg:1.35rem;
  --kips-space-xl:clamp(1.25rem,1rem + 1vw,2rem);
  --kips-content-max:min(1280px,100%);
  --kips-shell-pad:clamp(.75rem,2vw,1.5rem);
  /* Icon-input geometry: leading | text | trailing */
  --kips-input-pad-y:.65rem;
  --kips-input-pad-x:.9rem;
  --kips-input-pad-lead:3.25rem;
  --kips-input-pad-trail:3.25rem;
}
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  font-size:calc(100% * var(--kips-text-scale));
}
html[data-kips-text="sm"]{
  --kips-text-scale:.92;
  --kips-input-pad-lead:2.85rem;
  --kips-input-pad-trail:3rem;
}
html[data-kips-text="md"]{--kips-text-scale:1}
html[data-kips-text="lg"]{
  --kips-text-scale:1.12;
  --kips-input-pad-lead:3.25rem;
  --kips-input-pad-trail:3.4rem;
}
html[data-kips-text="xl"]{
  --kips-text-scale:1.24;
  --kips-input-pad-lead:3.45rem;
  --kips-input-pad-trail:3.65rem;
}
@media (pointer:coarse){
  :root{--kips-touch-min:44px}
}
@media (min-width:1280px){
  :root{
    --kips-shell-pad:clamp(1rem,2.2vw,2rem);
    --kips-space-lg:1.5rem;
  }
}
html[data-kips-contrast="high"]{
  --kips-ink-strong:#000;
  --kips-ink-body:#0a0a0a;
  --kips-ink-muted:#1a1a1a;
  --muted:#1a1a1a;
  --kips-muted:#1a1a1a;
  --text:#0a0a0a;
  --kips-ink:#0a0a0a;
}
html[data-kips-motion="reduce"] *,
html[data-kips-motion="reduce"] *::before,
html[data-kips-motion="reduce"] *::after{
  animation-duration:.01ms!important;
  animation-iteration-count:1!important;
  transition-duration:.01ms!important;
  scroll-behavior:auto!important;
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}

/* —— Baseline body copy —— */
body{
  color:var(--kips-ink-body,var(--text,#142c44));
  font-size:var(--kips-text-base);
  font-weight:var(--kips-font-medium);
  line-height:var(--kips-line-height);
}
p,.screen-copy,.section-head p,.sub,.note,.muted,
.page-intro p,
.quick p,.grade-card small,.stat span,.footer-note,
.command p,.action-card p,.feat-card p,.aud-card p,.faq .ans{
  color:var(--kips-ink-muted,var(--muted,#3d556c));
  font-size:var(--kips-text-base);
  font-weight:var(--kips-font-medium);
  line-height:var(--kips-line-height);
  max-width:var(--kips-max-prose);
}
.muted,.sub,.note{color:var(--kips-ink-muted)!important}

/* Dark marketing surfaces — learner banners (div.intro), not login p.intro on white cards */
div.intro,.welcome-band,.cta-block,.path-context{color:#fff}
div.intro h1,.welcome-band h1,.cta-block h2{
  color:#fff!important;
  font-weight:var(--kips-font-extrabold);
  line-height:var(--kips-line-height-tight);
}
/* Login/landing copy classes live only on dark photography/gradients */
.hero-copy,.hero-lead,.hero-accent{
  color:rgba(255,255,255,.94)!important;
  font-size:var(--kips-text-base);
  font-weight:var(--kips-font-medium);
  line-height:var(--kips-line-height);
  max-width:46ch;
}
.hero-accent{color:#ffd95f!important}
div.intro .muted,div.intro p,.welcome-band .muted,.welcome-band p,
.cta-block p,.path-context-sub{
  color:rgba(255,255,255,.94)!important;
  font-size:var(--kips-text-base);
  font-weight:var(--kips-font-medium);
  line-height:var(--kips-line-height);
  max-width:var(--kips-max-prose);
}
/* Login card subtitle on white paper */
p.intro,.card .intro,#intro{
  color:var(--kips-ink-muted,#3d556c)!important;
  font-size:var(--kips-text-base)!important;
  font-weight:var(--kips-font-medium)!important;
}
.hero-lead,.hero-copy{max-width:46ch}
.screen-title,.section h2,
.page-intro h1{
  font-weight:var(--kips-font-extrabold);
  line-height:var(--kips-line-height-tight);
}
.section h2,.screen-title{font-size:var(--kips-heading);color:var(--kips-ink-strong,#0b2f5e)}
.eyebrow,.grade-kicker,.path-context-label,.field-label,.support-kicker,
.locale-field label,.motto,.canonical-card .label{
  font-size:var(--kips-text-xs);
  font-weight:var(--kips-font-bold);
  letter-spacing:.06em;
  color:var(--kips-ink-muted,#3d556c);
}
/* Avoid ultra-faint chrome labels */
.eyebrow{color:#4a6178}
.welcome-band .eyebrow,.intro .eyebrow,.path-context-label{color:#d7e9f8}

/* —— Educational content priority —— */
.question,#questionText,.question-shell .question{
  font-size:var(--kips-question-text)!important;
  font-weight:var(--kips-font-semibold)!important;
  line-height:1.65!important;
  color:var(--kips-ink-strong,#111)!important;
  max-width:var(--kips-max-prose);
}
.answer-label,label.answer-label{
  font-size:var(--kips-text-sm)!important;
  font-weight:var(--kips-font-bold)!important;
  color:var(--kips-ink-strong,#24435f)!important;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.answer-row input,#answer,textarea.answer,
input[type="text"],input[type="password"],input[type="email"],input[type="search"],
input[type="number"],textarea,select,.translation-input,.path-search{
  font-size:var(--kips-text-base)!important;
  font-weight:var(--kips-font-medium);
  line-height:1.45;
  min-height:var(--kips-touch-min);
  color:var(--kips-ink-strong)!important;
  /* Do NOT force padding/border/background with !important — that broke icon inputs
     and flattened established KIPS field chrome. Readability via type/color/min-height. */
}
/* Plain fields without page padding still get comfortable insets (no !important) */
input[type="text"],input[type="password"],input[type="email"],input[type="search"],
input[type="number"],textarea,select,.translation-input,.path-search{
  padding-block:var(--kips-input-pad-y);
  padding-inline:var(--kips-input-pad-x);
}
input::placeholder,textarea::placeholder{
  color:#4a6178!important;
  opacity:1;
}
input:focus-visible,textarea:focus-visible,select:focus-visible,
.translation-input:focus,.path-search:focus,
input:focus,textarea:focus,select:focus{
  outline:none;
  border-color:#0c7ea8!important;
  box-shadow:var(--kips-focus-ring)!important;
}

/* —— Icon-input geometry (authoritative) ——
   Leading icon | text | trailing icon must never collide, including A+/zoom. */
.input-wrap,
.input-with-icon,
.has-leading-icon,
.has-trailing-icon{
  position:relative;
}
.input-wrap input,
.input-with-icon input,
.has-leading-icon input{
  padding-top:var(--kips-input-pad-y)!important;
  padding-bottom:var(--kips-input-pad-y)!important;
  padding-left:var(--kips-input-pad-lead)!important;
  padding-right:var(--kips-input-pad-x)!important;
}
.input-wrap:has(.toggle-pass) input,
.input-wrap:has([data-trailing-icon]) input,
.has-trailing-icon input,
.input-wrap.password input{
  padding-right:var(--kips-input-pad-trail)!important;
}
.input-wrap:has(.ico):has(.toggle-pass) input{
  padding-left:var(--kips-input-pad-lead)!important;
  padding-right:var(--kips-input-pad-trail)!important;
}
.input-wrap input:-webkit-autofill,
.input-wrap input:-webkit-autofill:hover,
.input-wrap input:-webkit-autofill:focus{
  padding-left:var(--kips-input-pad-lead)!important;
  -webkit-text-fill-color:var(--kips-ink-strong)!important;
  transition:background-color 99999s ease-out;
}
.input-wrap:has(.toggle-pass) input:-webkit-autofill,
.input-wrap:has(.toggle-pass) input:-webkit-autofill:hover,
.input-wrap:has(.toggle-pass) input:-webkit-autofill:focus{
  padding-right:var(--kips-input-pad-trail)!important;
}
.input-wrap .ico,
.input-with-icon .ico,
.has-leading-icon .ico{
  position:absolute;
  left:.75rem;
  top:50%;
  transform:translateY(-50%);
  width:1.1rem;
  height:1.1rem;
  pointer-events:none;
  z-index:1;
  display:grid;
  place-items:center;
}
.input-wrap .toggle-pass,
.input-wrap [data-trailing-icon],
.has-trailing-icon .toggle-pass{
  position:absolute;
  right:.2rem;
  top:50%;
  transform:translateY(-50%);
  z-index:1;
  min-width:var(--kips-touch-min);
  min-height:var(--kips-touch-min);
}
/* Persistent labels preferred over placeholder-only */
.field-label,label:not([hidden]){
  font-size:var(--kips-text-sm);
  font-weight:var(--kips-font-bold);
  color:#24435f;
}

/* —— Buttons & tools —— */
button,.button,.btn,a.button,.nav button,.tool-btn,.exercise-card button,
.exercise-submit-btn,.hero-action,.path-back,.nav-actions a,.nav-actions button,
.language-select,.back{
  min-height:var(--kips-touch-min);
  font-size:var(--kips-text-sm)!important;
  font-weight:var(--kips-font-semibold)!important;
  line-height:1.3;
}
.tool-btn,.learner-tools .tool-btn{
  min-height:var(--kips-touch-min)!important;
  padding:.65rem 1rem!important;
  border:2px solid #9db8ce!important;
  color:#1a3a58!important;
  background:#fff!important;
  font-weight:var(--kips-font-semibold)!important;
}
.tool-btn:hover,.tool-btn:focus-visible{background:#eef7ff!important}
.tool-btn.help{border-color:#c9a012!important;background:#fff8d9!important;color:#3a2e00!important}
.nav button,.button,button.action,.exercise-submit-btn,button.primary,.btn-primary{
  font-weight:var(--kips-font-bold)!important;
  padding:.7rem 1.15rem!important;
}
button:focus-visible,a:focus-visible,select:focus-visible,
.tool-btn:focus-visible,.nav-item:focus-visible,.choice-card:focus-visible,
.grade-card:focus-visible,.quick:focus-visible,.path-back:focus-visible,
.chip:focus-visible,.btn:focus-visible{
  outline:3px solid var(--kips-focus)!important;
  outline-offset:3px!important;
}
/* Restore focus where pages zeroed outline */
.nav-item:focus-visible,.path-back:focus-visible,.forgot:focus-visible,
.toggle-pass:focus-visible,.support-actions a:focus-visible,
.locale-field select:focus{outline:3px solid var(--kips-focus)!important;outline-offset:2px!important}

/* —— Links —— */
main a:not(.button):not(.btn):not(.nav-item):not(.choice-card):not(.grade-card):not(.command):not(.action-card),
.links a,.explore-cta,.view-cta,.forgot{
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1.5px;
  font-weight:var(--kips-font-semibold);
}
main a:not(.button):not(.btn):hover,
.links a:hover,.explore-cta:hover,.view-cta:hover,.forgot:hover{
  text-decoration-thickness:2.5px;
}

/* —— Correct / incorrect: not colour alone —— */
.result.correct,.correct{
  color:#0f5c2e!important;
  font-weight:var(--kips-font-bold)!important;
}
.result.wrong,.wrong,.error,.msg-error{
  color:#8f1d14!important;
  font-weight:var(--kips-font-bold)!important;
}
.result.correct::before{content:"✓ ";font-weight:800}
.result.wrong::before{content:"✗ ";font-weight:800}

/* —— Cards: readable surfaces for content panels (leave colorful grade/subject cards alone) —— */
.question-shell,.panel,.tool-panel,.translation-result-card,.login-card,.auth-card,
.help-panel,.answer-config{
  background-color:var(--kips-surface-readable);
}
/* Do not restyle login/marketing .card chrome — preserve established shadows/borders */

/* —— Choice / MCQ options —— */
.question-shell .options label,
.question-shell label.choice,
#exerciseList .exercise-card label,
label.choice,.mcq label,.mcq .options label,.question-shell .options label{
  font-size:var(--kips-text-lg)!important;
  font-weight:var(--kips-font-semibold)!important;
  line-height:1.5!important;
  min-height:var(--kips-touch-min);
  display:flex;
  align-items:flex-start;
  gap:.55rem;
  padding:.75rem 1rem!important;
  border:2px solid #c5d9e8;
  border-radius:12px;
  background:#fff;
  color:var(--kips-ink-strong);
}
/* Login Remember-me must not inherit MCQ choice chrome */
.card .options label.remember,
#loginForm .remember{
  display:inline-flex!important;
  align-items:center;
  gap:8px;
  padding:4px 0!important;
  border:0!important;
  background:transparent!important;
  border-radius:0;
  font-size:inherit!important;
  font-weight:600!important;
  color:#374f69!important;
  max-width:100%;
}
input[type="radio"],input[type="checkbox"]{
  width:1.25rem!important;
  height:1.25rem!important;
  min-width:1.25rem;
  min-height:1.25rem;
  accent-color:#0c4f9d;
  flex:none;
  margin-top:.15rem;
}

/* —— Admin readability bumps (light paper intros only; never learner marketing heroes) —— */
body .page-intro p,body .sub{
  font-size:var(--kips-text-base)!important;
  color:var(--kips-ink-muted)!important;
}
/* Learner dark marketing copy must stay light (beats any muted body rules) */
body .hero-copy,body .hero-lead,body .hero-accent,body .hero-eyebrow,
body .shell .hero p,body .shell .hero h1,
body section.hero .hero-panel p,body section.hero .hero-panel h1,
body div.intro p,body div.intro .muted,body div.intro h1,
body .welcome-band p,body .welcome-band .muted,body .welcome-band h1,
body .cta-block p,body .path-context-sub{
  color:rgba(255,255,255,.94)!important;
}
body .hero-accent,body .shell .hero h1 em,body section.hero h1 em{color:#ffd95f!important}
body .shell .hero h1,body section.hero .hero-panel h1,body div.intro h1,body .welcome-band h1,
body section.hero h1{color:#fff!important}
body p.intro,body .card .intro,body #intro{
  color:var(--kips-ink-muted,#3d556c)!important;
}
body label{font-size:var(--kips-text-sm)!important;color:#24435f!important}
body table{font-size:var(--kips-text-sm)!important}
body th{font-size:var(--kips-text-xs)!important;color:#3d556c!important}
body .admin-sidebar a{font-size:var(--kips-text-sm)!important;min-height:var(--kips-touch-min)}
body .nav-actions a,body .nav-actions button{min-height:var(--kips-touch-min);font-size:var(--kips-text-sm)!important}
body .metric small,body .metric-label{font-size:var(--kips-text-sm)!important;color:var(--kips-ink-muted)!important}

/* —— Navy topbar brand hierarchy (must not inherit muted/small UA sizing) ——
   Primary: KIPS Learners — Secondary: Knowledge Inspires… (readable, not fine print) */
:root{
  --kips-brand-name:clamp(1.2rem,1.05rem + .7vw,1.65rem);
  --kips-brand-tag:clamp(.875rem,.8rem + .5vw,1.125rem);
  --kips-brand-logo:clamp(2.65rem,2.3rem + 1vw,3.5rem);
}
.topbar .brand strong,
.topbar .top-brand strong,
.topbar .brand strong span{
  color:#fff;
  font-size:var(--kips-brand-name);
  font-weight:var(--kips-font-extrabold);
  line-height:1.2;
  letter-spacing:-.02em;
  opacity:1;
}
.topbar .brand small,
.topbar .top-brand small{
  color:#eef6fc;
  font-size:var(--kips-brand-tag);
  font-weight:var(--kips-font-semibold);
  line-height:1.4;
  letter-spacing:.015em;
  margin-top:.25em;
  opacity:1;
  max-width:min(44ch,100%);
}
.topbar .brand .logo,
.topbar .top-brand .logo{
  width:var(--kips-brand-logo);
  height:var(--kips-brand-logo);
  font-size:clamp(1.2rem,1.05rem + .6vw,1.55rem);
  color:#071a3c;
  flex:none;
}
.topbar-inner{
  min-height:clamp(4.85rem,4.2rem + 1.5vw,6rem);
  padding-block:clamp(.6rem,.45rem + .5vw,1rem);
}
/* A+/A− text scale must enlarge brand, never shrink it below the clamp floor */
html[data-kips-text] .topbar .brand strong,
html[data-kips-text] .topbar .top-brand strong,
html[data-kips-text] .topbar .brand strong span{
  font-size:calc(var(--kips-brand-name) * var(--kips-text-scale));
}
html[data-kips-text] .topbar .brand small,
html[data-kips-text] .topbar .top-brand small{
  font-size:calc(var(--kips-brand-tag) * var(--kips-text-scale));
}

/* —— High contrast mode —— */
html[data-kips-contrast="high"] body{
  background:#fff!important;
  color:#000!important;
}
html[data-kips-contrast="high"] .panel,
html[data-kips-contrast="high"] .section,
html[data-kips-contrast="high"] .card,
html[data-kips-contrast="high"] .question-shell,
html[data-kips-contrast="high"] .choice-card,
html[data-kips-contrast="high"] .exercise-card,
html[data-kips-contrast="high"] .tool-panel,
html[data-kips-contrast="high"] input,
html[data-kips-contrast="high"] textarea,
html[data-kips-contrast="high"] select{
  background:#fff!important;
  border-color:#000!important;
  color:#000!important;
  box-shadow:none!important;
}
html[data-kips-contrast="high"] .topbar,
html[data-kips-contrast="high"] .admin-sidebar,
html[data-kips-contrast="high"] .welcome-band,
html[data-kips-contrast="high"] .cta-block{
  background:#000!important;
  color:#fff!important;
}
/* When HC forces topbar/sidebar black, brand text must stay light (do not keep navy brand rules) */
html[data-kips-contrast="high"] .topbar .brand strong,
html[data-kips-contrast="high"] .topbar .brand small,
html[data-kips-contrast="high"] .topbar .top-brand strong,
html[data-kips-contrast="high"] .topbar .top-brand small,
html[data-kips-contrast="high"] .sidebar-brand strong,
html[data-kips-contrast="high"] .sidebar-brand small,
html[data-kips-contrast="high"] .admin-sidebar .brand strong,
html[data-kips-contrast="high"] .admin-sidebar .brand small{
  color:#fff!important;
}
html[data-kips-contrast="high"] button,
html[data-kips-contrast="high"] .button,
html[data-kips-contrast="high"] .tool-btn,
html[data-kips-contrast="high"] .btn{
  border:2px solid #000!important;
  background:#fff!important;
  color:#000!important;
}
html[data-kips-contrast="high"] button.primary,
html[data-kips-contrast="high"] .nav button,
html[data-kips-contrast="high"] .exercise-submit-btn{
  background:#000!important;
  color:#fff!important;
  border-color:#000!important;
}
html[data-kips-contrast="high"] .muted,
html[data-kips-contrast="high"] .sub,
html[data-kips-contrast="high"] p{
  color:#1a1a1a!important;
}
/* Keep marketing banners readable in high contrast */
html[data-kips-contrast="high"] div.intro,
html[data-kips-contrast="high"] .welcome-band,
html[data-kips-contrast="high"] .cta-block,
html[data-kips-contrast="high"] .path-context,
html[data-kips-contrast="high"] .hero-copy,
html[data-kips-contrast="high"] .hero-lead,
html[data-kips-contrast="high"] .hero-accent,
html[data-kips-contrast="high"] div.intro h1,
html[data-kips-contrast="high"] div.intro p,
html[data-kips-contrast="high"] div.intro .muted,
html[data-kips-contrast="high"] .welcome-band .muted,
html[data-kips-contrast="high"] .welcome-band p,
html[data-kips-contrast="high"] .cta-block p,
html[data-kips-contrast="high"] .path-context-sub,
html[data-kips-contrast="high"] .shell > .hero,
html[data-kips-contrast="high"] .shell > .hero h1,
html[data-kips-contrast="high"] .shell > .hero p,
html[data-kips-contrast="high"] section.hero > .hero-panel,
html[data-kips-contrast="high"] section.hero > .hero-panel h1,
html[data-kips-contrast="high"] section.hero > .hero-panel p{
  color:#fff!important;
}
html[data-kips-contrast="high"] .hero-accent,
html[data-kips-contrast="high"] .shell > .hero h1 em,
html[data-kips-contrast="high"] section.hero h1 em{
  color:#ffd95f!important;
}
/* Admin light paper intros stay dark-on-light in high contrast */
html[data-kips-contrast="high"] .page-intro,
html[data-kips-contrast="high"] .page-intro h1,
html[data-kips-contrast="high"] .page-intro p{
  color:#000!important;
  background:#fff!important;
}
html[data-kips-contrast="high"] .page-intro h1{
  color:#000!important;
}

/* —— Accessibility control panel —— */
#kips-a11y-panel{
  --kips-a11y-inset-x:max(12px,env(safe-area-inset-right,0px));
  --kips-a11y-inset-y:max(12px,env(safe-area-inset-bottom,0px));
  position:fixed;
  z-index:2500;
  right:var(--kips-a11y-inset-x);
  bottom:var(--kips-a11y-inset-y);
  left:auto;
  top:auto;
  max-width:min(320px,calc(100vw - (2 * var(--kips-a11y-inset-x))));
  max-height:min(70dvh,calc(100svh - (2 * var(--kips-a11y-inset-y))));
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
  font-family:'Source Sans 3',Nunito,system-ui,sans-serif;
  pointer-events:none;
}
#kips-a11y-panel *{pointer-events:auto;box-sizing:border-box}
#kips-a11y-toggle{
  min-width:var(--kips-touch-min);
  min-height:var(--kips-touch-min);
  border-radius:14px;
  border:2px solid #0a3c7b;
  background:linear-gradient(145deg,#fff,#eef7ff);
  color:#0a3c7b;
  font-weight:800;
  font-size:14px;
  cursor:pointer;
  box-shadow:0 8px 22px rgba(7,26,60,.2);
  padding:0 12px;
  flex:none;
}
#kips-a11y-toggle:focus-visible{outline:3px solid #0c7ea8;outline-offset:3px}
#kips-a11y-menu[hidden]{display:none!important}
#kips-a11y-menu{
  width:min(280px,calc(100vw - (2 * var(--kips-a11y-inset-x))));
  max-height:min(58dvh,calc(100svh - 96px));
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding:12px;
  border-radius:16px;
  border:1px solid #c5daf0;
  background:rgba(255,255,255,.97);
  box-shadow:0 16px 40px rgba(7,26,60,.22);
  color:#0b1f3a;
}
#kips-a11y-menu strong{
  display:block;
  font-size:14px;
  font-weight:800;
  margin-bottom:8px;
}
#kips-a11y-menu .a11y-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:10px;
}
#kips-a11y-menu button{
  width:auto;
  min-height:var(--kips-touch-min);
  margin:0;
  padding:8px 12px;
  border-radius:10px;
  border:1.5px solid #9db8ce;
  background:#fff;
  color:#0b1f3a;
  font-weight:700;
  font-size:13px;
  cursor:pointer;
}
#kips-a11y-menu button[aria-pressed="true"]{
  background:#0a3c7b;
  color:#fff;
  border-color:#0a3c7b;
}
#kips-a11y-menu button:focus-visible{
  outline:3px solid #0c7ea8;
  outline-offset:2px;
}
#kips-a11y-menu .a11y-hint{
  margin:0;
  font-size:12px;
  font-weight:600;
  color:#3d556c;
  line-height:1.4;
  max-width:none;
  overflow-wrap:anywhere;
}

/* Login: keep Display clear of the sign-in card / Start Learning */
body:has(#loginForm) #kips-a11y-panel,
body:has(.shell > .side .start) #kips-a11y-panel{
  left:max(12px,env(safe-area-inset-left,0px));
  right:auto;
  align-items:flex-start;
}
@media (max-width:960px){
  /* Mobile login stacks card first — keep Display bottom-right away from left chrome,
     but lifted via existing bottom padding on .side */
  body:has(#loginForm) #kips-a11y-panel,
  body:has(.shell > .side .start) #kips-a11y-panel{
    left:auto;
    right:var(--kips-a11y-inset-x);
    align-items:flex-end;
  }
}
@media (max-width:960px){
  body{
    padding-bottom:max(72px,calc(64px + env(safe-area-inset-bottom,0px)));
    scroll-padding-bottom:calc(88px + env(safe-area-inset-bottom,0px));
  }
}
.mobile-enroll{
  bottom:max(68px,calc(56px + env(safe-area-inset-bottom,0px)))!important;
  left:max(12px,env(safe-area-inset-left,0px))!important;
  right:max(12px,env(safe-area-inset-right,0px))!important;
}
.toast-host{
  right:max(18px,env(safe-area-inset-right,0px))!important;
  bottom:max(76px,calc(64px + env(safe-area-inset-bottom,0px)))!important;
  left:auto!important;
  max-width:min(360px,calc(100vw - 24px));
}
.exercise-submit-bar{
  bottom:max(12px,env(safe-area-inset-bottom,0px));
  margin-right:0;
  max-width:100%;
}

/* —— Responsive / zoom safety —— */
html,body{max-width:100%}
main,.shell,.shell-main,.content,.topbar-inner,.card,.panel,.section,.question-shell{
  min-width:0;
  max-width:100%;
}
img,svg,video,canvas{max-width:100%;height:auto}
/* Prefer wrapping over clipping at high zoom — but NEVER letter-break toolbar/labels */
.panel,.section,.card,.topbar-inner,.path-context,
.nav-actions,.learner-tools,.options,.locale-row,.brand,.motto{
  overflow-wrap:break-word;
  word-break:normal;
}
.question-shell{
  /* Keep educational copy wrapping at word boundaries only (fixes Fro/m label breaks). */
  overflow-wrap:break-word;
  word-break:normal;
}
.learner-tools .tool-btn,
.help-actions .tool-btn,
.translation-go,
.translation-lang-label,
.translation-controls label{
  overflow-wrap:normal;
  word-break:keep-all;
  white-space:nowrap;
}
.help-heading{
  overflow-wrap:break-word;
  word-break:normal;
  white-space:normal;
}
.learner-tools,.nav,.top-actions,.nav-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
/* tool-panel must remain a block stack so Help/Translate content does not float side-by-side */
.tool-panel{
  display:block;
  max-width:100%;
}

/* —— Translate workspace: From → To row without letter-wrap —— */
.translation-workspace{
  display:grid;
  gap:10px;
  max-width:min(52rem,100%);
}
.translation-input{
  min-height:5.5rem;
  max-height:12rem;
}
.translation-controls{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:10px 12px;
}
.translation-lang{
  display:flex;
  flex-direction:column;
  gap:4px;
  flex:1 1 9rem;
  min-width:min(9rem,100%);
}
.translation-lang-label,
.translation-controls > label > .translation-lang-label,
.translation-controls label{
  display:block;
  white-space:nowrap;
  overflow-wrap:normal;
  word-break:keep-all;
  font-size:var(--kips-text-sm)!important;
  font-weight:var(--kips-font-bold)!important;
  color:#3d556c!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  min-height:0!important;
  line-height:1.3!important;
}
.translation-controls select,
.translation-lang select{
  width:100%;
  min-width:8rem;
  margin-top:0;
  min-height:var(--kips-touch-min);
}
.translation-arrow{
  flex:0 0 auto;
  align-self:flex-end;
  padding-bottom:10px;
  white-space:nowrap;
}
.translation-go{
  flex:0 0 auto;
  white-space:nowrap;
  min-height:var(--kips-touch-min);
}

/* —— Help educational type scale + toolbar placement —— */
.help-panel-layout,
.tool-panel .help-panel-layout{
  display:grid;
  gap:12px;
  max-width:min(62ch,100%);
}
.help-toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px 12px;
}
.help-heading{
  margin:0;
  font-size:var(--kips-text-lg)!important;
  font-weight:var(--kips-font-bold)!important;
  color:var(--kips-ink-strong,#0b2f5e)!important;
  line-height:1.35!important;
  white-space:normal;
}
.help-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.help-actions .tool-btn{
  margin:0!important;
}
.universal-help-text{
  font-size:var(--kips-text-base)!important;
  font-weight:var(--kips-font-medium)!important;
  line-height:1.6!important;
  color:var(--kips-ink-body,#142c44)!important;
  max-width:min(62ch,100%);
}
.universal-help-text p,
.universal-help-text div,
.universal-help-text span,
.universal-help-text li{
  font-size:inherit!important;
  font-weight:inherit!important;
  line-height:inherit!important;
}
.universal-help-text b,
.universal-help-text strong{
  font-weight:var(--kips-font-bold)!important;
}
.universal-help-text em,
.universal-help-text i{
  font-style:italic;
  font-weight:inherit!important;
}
.modal-backdrop,.dialog-backdrop,[role="dialog"],.modal{
  max-width:100vw;
}
.modal-backdrop .modal,.modal-sheet,[role="dialog"]{
  width:min(100%,560px);
  max-width:calc(100vw - 24px);
  max-height:min(90dvh,calc(100svh - 24px));
  overflow:auto;
  overscroll-behavior:contain;
}
.table-wrap,.live-table-wrap,.sr-table-wrap,[data-table-scroll]{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  max-width:100%;
}
@media (max-width:900px){
  #kips-a11y-panel{
    --kips-a11y-inset-x:max(8px,env(safe-area-inset-right,0px));
    --kips-a11y-inset-y:max(8px,env(safe-area-inset-bottom,0px));
  }
  .answer-row{grid-template-columns:1fr!important}
  .answer-row #checkBtn,.nav{width:100%}
  .nav{display:flex;flex-wrap:wrap;gap:8px}
  .nav button{flex:1 1 120px}
  .learner-tools{gap:8px;width:100%}
  .tool-btn{flex:1 1 auto}
  .form-grid,.grid-layout,.audit-filters,.questions-layout{grid-template-columns:1fr!important}
  .exercise-submit-bar{
    flex-wrap:wrap;
    align-items:stretch;
  }
  .exercise-submit-btn{width:100%;flex:1 1 100%}
}
@media (max-width:700px){
  .answer-row{grid-template-columns:1fr!important}
  .answer-row #checkBtn,.nav{width:100%}
  .top-actions,.nav-actions{width:100%}
  .language-select,.back,.country-select{min-height:var(--kips-touch-min);max-width:100%}
}
@media (max-width:480px){
  #kips-a11y-menu{width:min(100vw - 16px,280px)}
  .top-actions,.nav-actions{width:100%}
  .language-select,.back{min-height:var(--kips-touch-min)}
}
/* Narrow / short / high-zoom: dock Display to top so it never covers Start Learning */
@media (max-width:420px),(max-height:520px){
  body{
    padding-top:max(56px,calc(48px + env(safe-area-inset-top,0px)));
    scroll-padding-top:calc(64px + env(safe-area-inset-top,0px));
  }
  #kips-a11y-panel{
    top:max(10px,env(safe-area-inset-top,0px));
    bottom:auto;
    right:max(8px,env(safe-area-inset-right,0px));
    align-items:flex-end;
    max-height:min(72dvh,calc(100svh - 20px));
  }
  #kips-a11y-menu{
    max-height:min(55dvh,calc(100svh - 88px));
    order:-1;
  }
}
@media (max-width:360px){
  #kips-a11y-toggle{padding:0 10px;font-size:13px}
}
/* High browser zoom: keep fixed chrome reachable without covering submit */
@media (max-width:420px),(min-resolution:1.5dppx){
  .start,.exercise-submit-btn,.nav button{position:relative;z-index:2}
}

/* Skip link if present */
.skip,.skip-link{
  position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip:focus,.skip-link:focus,.skip:focus-visible,.skip-link:focus-visible{
  position:fixed;left:max(12px,env(safe-area-inset-left,0px));top:max(12px,env(safe-area-inset-top,0px));z-index:3000;width:auto;height:auto;
  padding:12px 16px;background:#ffca18;color:#071c4a;font-weight:800;
  border-radius:10px;outline:3px solid #0c7ea8;outline-offset:2px;
}