/* Category 11: responsive phone/tablet shell, one-handed controls, accessibility and connection status.
   Desktop keeps the full-width workspace; nothing here frames the app inside a device shape. */
.sr-only{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}
:focus-visible{outline:3px solid var(--red-dark,#B93F38);outline-offset:3px}

/* Connection / sync status: small, and only shown when something is affected. */
.nerdit-net{position:fixed;right:16px;bottom:16px;z-index:85;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;max-width:min(440px,calc(100vw - 32px));padding:9px 14px;border:1px solid var(--line,rgba(29,26,24,.16));border-radius:999px;background:var(--paper,#FFFDFC);color:var(--ink,#1D1A18);font:500 13px/1.35 var(--f-body,system-ui);box-shadow:0 8px 24px -14px rgba(29,26,24,.45)}
.nerdit-net[hidden]{display:none}
.nerdit-net.is-inline{position:static;transform:none;box-shadow:none;max-width:none;padding:5px 12px;font-size:12.5px}
.ws-net-slot{display:flex;min-width:0}
.nerdit-net strong{font:700 11px/1.3 var(--f-mono,ui-monospace);letter-spacing:.06em;text-transform:uppercase}
.nerdit-net-detail{color:var(--ink-2,#625B55)}
.nerdit-net a{color:var(--red-dark,#B93F38);font-weight:700}
.nerdit-net-dot{width:9px;height:9px;border-radius:50%;background:var(--good,#24765D);flex:none}
.nerdit-net[data-kind=offline] .nerdit-net-dot,.nerdit-net[data-kind=conflict] .nerdit-net-dot{background:var(--red-dark,#B93F38)}
.nerdit-net[data-kind=reconnecting] .nerdit-net-dot,.nerdit-net[data-kind=syncing] .nerdit-net-dot{background:var(--warn,#A86F20)}

/* New version prompt: never forces a reload. */
.nerdit-update{position:fixed;right:16px;bottom:72px;z-index:86;width:min(400px,calc(100vw - 32px));display:grid;gap:10px;padding:16px;border:1px solid var(--line,rgba(29,26,24,.16));border-radius:10px;background:var(--paper,#FFFDFC);color:var(--ink,#1D1A18);box-shadow:0 18px 40px -20px rgba(29,26,24,.55);font:15px/1.45 var(--f-body,system-ui)}
.nerdit-update p{margin:0}
.nerdit-update-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}

/* WCAG 2.2 focus not obscured: scrolling to a focused or linked element clears the sticky header and bottom bar. */
html:has(body.workspace-active){scroll-padding-top:84px}
@media (max-width:768px){html:has(body.workspace-active){scroll-padding-top:76px;scroll-padding-bottom:calc(92px + env(safe-area-inset-bottom))}html:has(.ws-shell[data-immersive]){scroll-padding-bottom:calc(96px + env(safe-area-inset-bottom))}}

/* Bottom navigation exists in the DOM at every width but is shown only on narrow viewports. */
.ws-bottom-nav{display:none}
.ws-mobile-back{display:none!important}

@media (max-width:768px){
  .ws-top{padding-top:max(11px,env(safe-area-inset-top));padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
  .ws-top .ws-mobile-menu{display:none!important}
  .ws-shell[data-immersive] .ws-mobile-back{display:inline-flex!important;align-items:center;gap:4px;min-height:44px;padding:8px 12px!important}
  .ws-search-link{min-width:44px;min-height:44px;justify-content:center}
  .ws-content,.ws-legacy>.scroll,.ws-legacy>div>.scroll{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
  .ws-shell:not([data-immersive]):not([data-focus]) .ws-content{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  .ws-shell[data-immersive] .ws-content{padding-bottom:calc(24px + env(safe-area-inset-bottom))}

  .ws-bottom-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:55;padding:6px max(6px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));background:var(--cream,var(--paper));border-top:1px solid var(--line);box-shadow:0 -10px 24px -22px rgba(29,26,24,.5)}
  .ws-bottom-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;padding:4px 2px;border:0;border-radius:10px;background:none;color:var(--ink-2);font:600 11.5px/1.15 var(--f-body);text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .ws-bottom-item svg{width:23px;height:23px}
  .ws-bottom-item[aria-current=page]{color:var(--red-dark,var(--violet));background:var(--red-soft,var(--violet-soft))}
  .ws-bottom-item span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ws-shell[data-immersive] .ws-bottom-nav,.ws-shell[data-focus] .ws-bottom-nav,html[data-keyboard] .ws-bottom-nav{display:none}
  html[data-keyboard] .nerdit-net:not(.is-inline){display:none}
  .nerdit-net.is-inline{padding:4px 10px;gap:6px;flex-wrap:nowrap}
  .nerdit-net.is-inline .nerdit-net-detail{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .ws-top-start{min-width:0;flex:1}

  /* "More" opens the full navigation as a bottom sheet within thumb reach. */
  .ws-side{top:auto;left:0;right:0;bottom:0;width:100%;height:auto;max-height:min(82dvh,680px);border-right:0;border-top:1px solid var(--line);border-radius:18px 18px 0 0;padding:14px max(18px,env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));transform:translateY(105%);gap:16px;z-index:70;overflow-y:auto;overscroll-behavior:contain}
  /* Visible immediately on open so focus can move into the sheet; hidden only after the closing slide. */
  .ws-menu-open .ws-side{transform:translateY(0);visibility:visible;transition:transform .2s}
  .ws-side .ws-brand-row{position:sticky;top:-14px;padding-top:4px;background:var(--cream,var(--paper));z-index:1}
  .ws-side .ws-brand-row::before{content:"";position:absolute;left:50%;top:-6px;width:42px;height:4px;border-radius:2px;background:var(--line);transform:translateX(-50%)}
  .ws-side .ws-side-close{min-width:44px;min-height:44px!important}
  .ws-side [data-mobile-primary]{display:none}
  .ws-side nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .ws-side .ws-nav{min-height:52px;border:1px solid var(--line);background:var(--paper)}
  .ws-side .ws-foot{gap:10px}

  /* One-handed study: reveal and rating controls stay at the bottom edge, above the safe area. */
  .ws-shell[data-immersive] .ws-reveal,.ws-shell[data-immersive] .ws-study-grades,.eg-thumb-bar{position:sticky;bottom:max(8px,env(safe-area-inset-bottom));z-index:5}
  .ws-shell[data-immersive] .ws-reveal{width:100%;min-height:56px;font-size:17px}
  .ws-shell[data-immersive] .ws-study-grades{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:10px;margin:14px -10px -10px;background:var(--paper);border-top:1px solid var(--line);border-radius:0 0 10px 10px}
  .ws-shell[data-immersive] .ws-grade{min-height:56px;padding:6px 4px;flex-direction:column;gap:2px;font-size:15px}
  .ws-shell[data-immersive] .ws-grade kbd{display:none}
  .ws-shell[data-immersive] .ws-keyboard-help{display:none}
  .ws-study-question,.ws-answer,.fc-render{overflow-wrap:anywhere}
  .fc-render .katex-display,.ws-answer .katex-display{overflow-x:auto;overflow-y:hidden;padding-bottom:4px}
  .fc-image{touch-action:pinch-zoom}

  .nerdit-net{left:50%;right:auto;transform:translateX(-50%);bottom:calc(76px + env(safe-area-inset-bottom));justify-content:center}
  .ws-shell[data-immersive]~.nerdit-net,body:has(.ws-shell[data-immersive]) .nerdit-net{bottom:calc(84px + env(safe-area-inset-bottom))}
  .nerdit-update{left:12px;right:12px;width:auto;bottom:calc(128px + env(safe-area-inset-bottom))}
}

/* Comfortable touch targets wherever the primary pointer is coarse (phones and tablets). */
@media (pointer:coarse){
  .ws-shell .btn,.ws-shell button,.ws-shell select,.ws-shell .field,.ws-nav,.ws-shell .ws-tabs a{min-height:44px}
  .ws-shell input[type=checkbox],.ws-shell input[type=radio]{width:22px;height:22px}
  .ws-shell .ws-option{min-height:48px}
}

/* Wide data regions scroll inside themselves instead of widening the page. */
.ws-shell table{max-width:100%}
.eg-scroll-x{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}

/* Focus mode: fewer distractions; important state (status, dialogs, update prompts) remains reachable. */
.ws-shell[data-focus]{grid-template-columns:minmax(0,1fr)}
.ws-shell[data-focus] .ws-side,.ws-shell[data-focus] .ws-search-link,.ws-shell[data-focus] .ws-collapse,.ws-shell[data-focus] .ws-credit-indicator,.ws-shell[data-focus] .eg-today-reminders,.ws-shell[data-focus] .eg-install,.ws-shell[data-focus] .eg-today-links,.ws-shell[data-focus] .upsell,body:has(.ws-shell[data-focus]) .eg-celebrate{display:none!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}
}
html[data-reduce-motion] *,html[data-reduce-motion] *::before,html[data-reduce-motion] *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}

/* Contrast (WCAG 2.2 AA): light coral stays a background; text on it uses a deeper brand red. */
body.workspace-active{--red-on-soft:#96332D;--ink-muted-strong:#5E5750}
html[data-theme=dark] body.workspace-active{--red-on-soft:#F19A91;--ink-muted-strong:#BAB0A4}
@media (prefers-color-scheme:dark){html:not([data-theme=light]) body.workspace-active{--red-on-soft:#F19A91;--ink-muted-strong:#BAB0A4}}
.workspace-active .ws-nav[aria-current=page],.workspace-active .ws-bottom-item[aria-current=page],.workspace-active .ws-tabs a[aria-current=page],.workspace-active .ws-legacy .chip[aria-pressed=true],.workspace-active .ws-legacy .chip[aria-pressed=true] .num,.workspace-active .eg-chip:has(input:checked),.workspace-active .ws-option[aria-pressed=true]{color:var(--red-on-soft)}
.workspace-active .ws-chip{color:var(--ink-muted-strong)}
html[data-theme=light] body.workspace-active .nt-primary{background:var(--red-dark,#B93F38)!important;border-color:var(--red-dark,#B93F38)!important;color:#fff!important}
@media (prefers-color-scheme:light){html:not([data-theme=dark]) body.workspace-active .nt-primary{background:var(--red-dark,#B93F38)!important;border-color:var(--red-dark,#B93F38)!important;color:#fff!important}}
body.workspace-active{--muted:var(--ink-2)}
html[data-theme=dark] body.workspace-active .co-primary{color:#231F1C!important}
@media (prefers-color-scheme:dark){html:not([data-theme=light]) body.workspace-active .co-primary{color:#231F1C!important}}
html[data-theme=dark] body.workspace-active .nt-root{--nt-deep:#F19A91}
@media (prefers-color-scheme:dark){html:not([data-theme=light]) body.workspace-active .nt-root{--nt-deep:#F19A91}}
/* Materials labels and errors use the readable light red on dark paper (the default #A33C2B is 2.3:1 there). */
html[data-theme=dark] body.workspace-active :is(.mat-root,.mat-dialog){--accent:#F19A91}
html[data-theme=dark] body.workspace-active .mat-error{color:#F19A91}
@media (prefers-color-scheme:dark){html:not([data-theme=light]) body.workspace-active :is(.mat-root,.mat-dialog){--accent:#F19A91}html:not([data-theme=light]) body.workspace-active .mat-error{color:#F19A91}}
/* Block metadata was dimmed with opacity, which pushed its small tags below 4.5:1; the muted ink already sets it apart. */
.workspace-active .mat-block-meta{opacity:1}
/* Keyboard hints keep full contrast; a faded hint inside the red primary button fell below 4.5:1. */
.workspace-active .ws-shell kbd{opacity:1}