/* Shared header bell + search in sidebar (Discover keeps a compact header field). */
.chrome-search{position:relative;margin:0 0 12px;width:100%}
.sidebar .chrome-search{padding:0 2px 4px}
.chrome-search-ico{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;display:flex}
.chrome-search-input{padding-left:34px;padding-right:58px;min-height:36px;background:var(--bg);width:100%}
.chrome-kbd{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:10px;border:1px solid var(--line);border-radius:4px;padding:1px 5px;color:var(--muted);background:var(--surface);pointer-events:none}
.chrome-results{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--line);border-radius:9px;box-shadow:0 12px 36px #101f3526;z-index:90;max-height:min(420px,60vh);overflow:auto;padding:6px}
.public-top .chrome-search{flex:0 1 220px;width:220px;max-width:220px;margin:0 8px 0 auto}
.chrome-results a{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:6px;color:var(--ink)}
.chrome-results a:hover,.chrome-results a.is-active{background:var(--soft);color:var(--ink)}
.chrome-results a small{color:var(--muted);font-size:11px}
.chrome-results .chrome-empty{padding:12px 10px;color:var(--muted);font-size:12px}
.chrome-bell{position:relative;flex:none}
.chrome-bell .btn{position:relative}
.chrome-badge{position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 4px;border-radius:99px;background:var(--red);color:#fff;font-size:10px;font-weight:800;display:grid;place-items:center;line-height:1}
.chrome-bell-menu{min-width:280px;max-width:340px}
.chrome-note{flex-direction:column!important;align-items:flex-start!important;gap:2px!important}
.chrome-note{padding:0!important;margin:0!important;width:100%}
.chrome-note button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;padding:9px 12px;border:0;background:transparent;color:var(--ink);text-align:left;cursor:pointer;font:inherit}
.chrome-note button:hover,.chrome-note button:focus-visible{background:var(--soft)}
.chrome-note b{font-size:12px}
.chrome-note small{color:var(--muted);font-size:11px;white-space:normal}
.chrome-note.is-unread b{color:var(--red)}
.chrome-empty{padding:10px}
.sidebar{flex-shrink:0;min-width:var(--sidebar);display:block}
.shell{min-width:0}
@media(max-width:1100px){
  .public-nav{display:none}
  .public-top .chrome-search{flex-basis:160px;width:160px;max-width:160px}
}
@media(max-width:860px){
  .chrome-kbd{display:none}
  .public-top .chrome-search{display:none}
}

.brand-logo{height:28px;width:auto;max-width:160px;display:block;object-fit:contain}
.brand-stack{display:flex;flex-direction:column;align-items:flex-start;gap:2px;line-height:1.15}
.brand-stack .brand-logo{height:26px}
.brand-stack .brand-name{font-size:12px}
body.dark .brand-logo[src*="logo-light"]{/* dark logo preferred via Brand::mark */}

.brand-logo-dark{display:none}
body.dark .brand-logo-light{display:none}
body.dark .brand-logo-dark{display:block}

/* Standalone PWA / iOS notch & Dynamic Island */
:root{
  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px);
  --sar:env(safe-area-inset-right,0px);
}
.topbar:not(.public-top),.public-top{
  padding-top:var(--sat);
  padding-left:max(12px,var(--sal));
  padding-right:max(12px,var(--sar));
  height:calc(var(--header,62px) + var(--sat));
  box-sizing:border-box;
}
.public-top-inner{height:var(--header,62px)!important}
.sidebar{
  top:calc(var(--header,62px) + var(--sat));
  height:calc(100vh - var(--header,62px) - var(--sat) - var(--sab));
  padding-bottom:max(16px,var(--sab));
}
.mobile-shade{top:calc(var(--header,62px) + var(--sat))!important}
/* Rich main lesson content retains its own headings and multiple paragraphs. */
.reading .lesson-content{min-width:0;line-height:1.7;overflow-wrap:anywhere}
.reading .lesson-content h3{font-size:1.2em;line-height:1.35;margin:1.15em 0 .45em;color:var(--ink)}
.reading .lesson-content h4{font-size:1.06em;margin:1em 0 .35em;color:var(--ink)}
.reading .lesson-content table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse}
.reading .lesson-content th,.reading .lesson-content td{padding:7px 10px;border:1px solid var(--line)}
.editor-canvas .lesson-content[contenteditable]{min-height:100px;outline:none;line-height:1.7}
.editor-canvas .lesson-content[contenteditable]:focus{outline:2px solid var(--navy);outline-offset:4px;border-radius:3px}
/* Header artwork follows the active theme without moving either button or icon. */
[data-theme-toggle] .theme-sun{display:none}
body.dark [data-theme-toggle] .theme-moon{display:none}
body.dark [data-theme-toggle] .theme-sun{display:inline-flex}
/* Increase separation only where it fits; the existing narrow-phone geometry remains intact. */
@media(min-width:380px) and (max-width:640px){
  .topbar:not(.public-top)>.top-actions{gap:4px}
  .topbar:not(.public-top) .top-actions .btn.ico{min-width:38px;min-height:38px}
}
@media(min-width:380px) and (max-width:700px){
  .public-top .top-actions{gap:4px}
  .public-top .top-actions .btn.ico{min-width:38px;min-height:38px}
}
/* Operate, Author and Learn share this header. Keep their actions inside narrow viewports. */
@media(max-width:640px){
  .topbar:not(.public-top){gap:4px;padding-left:max(8px,var(--sal));padding-right:max(8px,var(--sar))}
  .topbar:not(.public-top)>.spacer{display:none}
  .topbar:not(.public-top)>.mobile-menu-button{flex:none;min-width:34px;padding:7px}
  .topbar:not(.public-top)>.brand{flex:1 1 auto;min-width:0;overflow:hidden;gap:5px}
  .topbar:not(.public-top) .brand-logo{height:26px;max-width:min(112px,100%)}
  .topbar:not(.public-top) .brand-name{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .topbar:not(.public-top)>.top-actions{flex:0 0 auto;margin-left:0;gap:0}
  .topbar:not(.public-top) .top-actions .btn.ico{min-width:34px;padding:7px}
  .topbar:not(.public-top) .top-actions [data-menu-toggle="ws"]{min-width:34px;padding:7px}
  .topbar:not(.public-top) .top-actions [data-menu-toggle="ws"] .ic:last-child{display:none}
}
@media all and (display-mode: standalone),(display-mode: fullscreen){
  body{min-height:100dvh}
}
/* Shared, nonblocking activity indicator. It never captures clicks or keyboard input. */
.site-activity{position:fixed;left:50%;bottom:max(18px,calc(12px + var(--sab,0px)));transform:translateX(-50%);z-index:120;display:flex;align-items:center;gap:10px;max-width:calc(100vw - 28px);padding:10px 15px;border:1px solid var(--line,#e2e8ef);border-radius:999px;background:var(--surface,#fff);color:var(--ink,#1b2b40);box-shadow:0 8px 28px #10203933;font:600 12px/1.4 system-ui,sans-serif;pointer-events:none}
.site-activity[hidden]{display:none!important}
.site-activity:before{content:'';width:15px;height:15px;flex:none;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:site-activity-spin .8s linear infinite}
@keyframes site-activity-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.site-activity:before{animation:none;border-right-color:currentColor}}

/* Workspace-aware account pages: shared across Learn, Author, Support and Admin. */
.account-tabs{gap:7px;margin-bottom:18px;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.account-tabs .tab{display:inline-flex;align-items:center;gap:7px;min-height:42px;padding:10px 15px;font-size:12.5px;flex:0 0 auto}
.account-tabs .tab .ic{width:16px;height:16px}
.recovery-panel{border-left:3px solid var(--amber)}
.recovery-heading{display:flex;gap:12px;align-items:flex-start}.recovery-heading h2{margin:0}.recovery-icon{width:36px;height:36px;border-radius:9px;background:var(--soft);display:grid;place-items:center;flex:none}
.recovery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;max-width:560px;margin:18px 0 16px;padding:0;list-style:none;counter-reset:recovery}
.recovery-grid li{counter-increment:recovery;display:flex;align-items:center;gap:12px;min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--soft)}
.recovery-grid li::before{content:counter(recovery,decimal-leading-zero);font-size:11px;font-weight:700;color:var(--muted)}
.recovery-grid code{font:700 14px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.08em;white-space:nowrap}.recovery-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mfa-setup{display:grid;grid-template-columns:200px minmax(0,1fr);gap:28px;align-items:start}.mfa-qr-col{display:flex;flex-direction:column;align-items:center}
.mfa-qr-frame{width:184px;height:184px;padding:12px;background:#fff;border:1px solid var(--line);border-radius:12px;display:grid;place-items:center}.mfa-qr{width:160px;height:160px;display:grid;place-items:center}
.mfa-qr img,.mfa-qr canvas,.mfa-qr table{width:160px!important;height:160px!important;margin:0 auto;display:block}.mfa-qr table{border-collapse:collapse}.mfa-key-row{display:flex;gap:8px;align-items:center}.mfa-key-row .input{min-width:0}.mfa-steps{padding-left:20px}.mfa-steps li+li{margin-top:8px}
body.dark .mfa-qr-frame{background:#fff}
@media(max-width:700px){.mfa-setup{grid-template-columns:1fr}.mfa-qr-col{order:-1}}
@media(max-width:640px){.account-tabs{gap:3px;margin-left:-2px;margin-right:-2px;padding:0 2px}.account-tabs .tab{min-height:44px;padding:10px 13px}.account-tabs::-webkit-scrollbar{height:3px}}
@media(max-width:560px){.recovery-grid{grid-template-columns:1fr}.recovery-actions .btn{flex:1 1 150px}.mfa-key-row{align-items:stretch;flex-direction:column}}

/* Pass 4A.3.2 — connection state and install recommendation. */
.network-status{position:fixed;left:50%;bottom:max(18px,calc(12px + var(--sab,0px)));transform:translateX(-50%);z-index:138;display:flex;align-items:center;gap:8px;max-width:min(560px,calc(100vw - 24px));padding:9px 13px;border:1px solid #dfb1b7;border-radius:10px;background:#fff3f4;color:#7d2430;box-shadow:0 10px 30px #1020392b;font:650 12px/1.4 system-ui,sans-serif}
.network-status[hidden]{display:none!important}.network-status.is-online{border-color:#acd3bd;background:#f1faf5;color:#256343}.network-dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.pwa-install-card{position:fixed;right:max(16px,var(--sar,0px));bottom:max(16px,calc(12px + var(--sab,0px)));z-index:132;width:min(390px,calc(100vw - 24px));border:1px solid var(--line,#e2e8ef);border-radius:14px;background:var(--surface,#fff);color:var(--ink,#1b2b40);box-shadow:0 18px 48px #0d203a38;padding:15px}
.pwa-install-row{display:flex;gap:12px;align-items:flex-start}.pwa-install-icon{width:42px;height:42px;border-radius:11px;background:var(--navy,#162c4b);color:#fff;display:grid;place-items:center;font:800 16px/1 system-ui,sans-serif;flex:none}.pwa-install-copy{min-width:0;flex:1}.pwa-install-copy b{display:block;color:var(--navy,#162c4b);font-size:14px}.pwa-install-copy p{margin:3px 0 0;color:var(--muted,#66758a);font-size:12px;line-height:1.45}.pwa-install-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}.pwa-install-help{margin-top:10px;padding:9px 10px;border-radius:9px;background:var(--soft,#f4f6f9);color:var(--muted,#66758a);font-size:11px;line-height:1.5}
@media(max-width:700px){.pwa-install-card{left:12px;right:12px;bottom:max(12px,calc(8px + var(--sab,0px)));width:auto}.network-status{bottom:max(12px,calc(8px + var(--sab,0px)))}}

/* 4B.3: dynamic mobile viewport + public announcement strip. */
.public-announcement{display:block;max-width:clamp(150px,24vw,300px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-left:8px;padding:6px 9px;border:1px solid var(--line);border-radius:999px;background:var(--soft);color:var(--ink);font-size:11px;font-weight:700;text-decoration:none;}
.public-announcement:hover{color:var(--navy);}
.public-social{display:flex;gap:12px;flex-wrap:wrap;}
.public-social a{font-size:12px;color:inherit;}
@supports (height:100dvh){
  .mobile-menu,.sidebar{height:calc(100dvh - var(--header,62px) - var(--sat,0px) - var(--sab,0px));}
}
@media(max-width:700px){
  .public-announcement{max-width:42vw;margin-left:4px;font-size:10px;}
  .main,.public-main{padding-left:max(12px,var(--sal,0px));padding-right:max(12px,var(--sar,0px));}
}
/* Mobile viewport and touch-target hardening */
@supports (height: 100dvh){
  .sidebar,.mobile-menu{height:calc(100dvh - var(--header,62px) - var(--sat,0px) - var(--sab,0px));}
}
@media (max-width:700px){
  input,select,textarea,.input,.select,.textarea{font-size:16px!important;}
  .sidebar,.mobile-menu{padding-bottom:max(24px,var(--sab,0px));}
}