/* One banner and one set of phone tabs on every member page (owner decision, 3 November 2026). Geometry and
   behaviour match the main app (styles.css, quiet-clinical.css, dashboard.css), whose stylesheets are too broad
   to load on other pages. Everything is scoped, with ID weight, so public pages are untouched and each page's
   own rules for header, nav, a and button cannot reach in. The banner is light on every page. */




html[data-member-chrome]{--zc-full:60px;--zc-safe:env(safe-area-inset-top,0px);--zc-player:0px;--zc-tabs:calc(63px + env(safe-area-inset-bottom));scroll-padding-top:64px}
@media(min-width:901px){html[data-member-chrome]{--zc-full:72px}}
html[data-member-chrome] body>header{display:none!important}
/* Space held from the first paint until the banner arrives in the same place, so nothing moves. */
html[data-member-chrome="pending"] body::before{content:"";display:block;height:calc(var(--zc-full) + var(--zc-safe));background:#fffdf8;border-bottom:1px solid #e7e1d4;box-sizing:border-box}
#app-shell.zys-chrome,#app-tabs.zys-chrome-tabs{color-scheme:light;--qc-card:#fffdf8;--qc-ink:#1f3540;--qc-navy:#102d50;--qc-muted:#5b6b66;--qc-line:#e7e1d4;--qc-line-strong:#d5ccb9;--qc-emerald:#102d50;--surface:#fffdf8;--ink:#1f3540;--muted:#5b6b66;--line:#e7e1d4;--line-strong:#d5ccb9;--teal:#102d50;--tint:#f5f0e6;--danger:#b0263d;font-family:var(--zys-font);font-size:15px;line-height:1.55;color:var(--ink);text-align:left}
#app-shell.zys-chrome,#app-shell.zys-chrome *,#app-tabs.zys-chrome-tabs,#app-tabs.zys-chrome-tabs *{box-sizing:border-box}
#app-shell.zys-chrome{--header-h:var(--zc-full);display:block;padding:calc(var(--zc-full) + var(--zc-safe)) 0 0;margin:0;background:transparent}
#app-shell.zys-chrome[data-merged]{--header-h:52px}
#app-shell.zys-chrome>.top{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:10px;width:auto;max-width:none;margin:0;height:calc(var(--header-h) + var(--zc-safe));padding:var(--zc-safe) 12px 0 16px;background:var(--surface)!important;color:var(--ink);border:0;border-bottom:1px solid #d9e9e2;border-bottom-color:var(--line)!important;box-shadow:0 3px 15px rgba(18,72,62,.035)}
@media(min-width:901px){#app-shell.zys-chrome>.top{padding-left:32px;padding-right:32px}}
#app-shell.zys-chrome .brand{flex:none;color:inherit;font-size:16px;font-weight:inherit;margin-left:8px;text-decoration:none}
#app-shell.zys-chrome[data-merged] .brand .zys-tagline{display:none}
#app-shell.zys-chrome .zys-logo{font-size:16px}
/* Podcasts and ECG Library style every span in a header link: the logo keeps its own type. */
#app-shell.zys-chrome .brand .zys-logo{display:inline-flex;letter-spacing:normal;font-weight:400}
#app-shell.zys-chrome .brand .zys-wordmark{letter-spacing:-.065em;font-weight:800}
#app-shell.zys-chrome .brand .zys-wordmark>span{display:inline-block;font-size:inherit;font-weight:inherit;letter-spacing:inherit}
#app-shell.zys-chrome .brand .zys-tagline{display:block;font-weight:700;letter-spacing:.14em}
@media(max-width:380px){#app-shell.zys-chrome .brand .zys-tagline{letter-spacing:.08em}}
@media(min-width:901px){#app-shell.zys-chrome .zys-logo{font-size:21px}}
#app-shell.zys-chrome[data-merged] .brand .zys-wordmark{font-size:.82em}
#app-shell.zys-chrome[data-merged] .crumbs,#app-shell.zys-chrome[data-merged] .account-upgrade{display:none}
#app-shell.zys-chrome .crumbs{display:flex;align-items:center;flex:1;min-width:0;gap:0;font-size:inherit}
#app-shell.zys-chrome .crumb-trail{display:flex;align-items:center;min-width:0;white-space:nowrap;overflow:hidden}
#app-shell.zys-chrome .crumb{font-size:15px;padding:10px 1px;color:var(--ink);font-weight:650}
#app-shell.zys-chrome .top-actions{display:flex;align-items:center;gap:14px;flex-shrink:0}
#app-shell.zys-chrome #account-trigger{min-height:44px;font:inherit;background:var(--surface);border-color:var(--line-strong);color:var(--teal)}
#app-shell.zys-chrome #account-trigger[aria-expanded="true"]{background:var(--tint);border-color:var(--teal)}
#app-shell.zys-chrome #account-menu-close{min-height:0;padding:0;background:transparent;font-size:25px}
#app-shell.zys-chrome #account-popover{font-size:14px}
#app-shell.zys-chrome #account-options [data-menu-exams]{margin-bottom:6px;padding-bottom:6px;border-bottom:1px solid var(--line)}
#app-shell.zys-chrome #account-options .menu-exams-title{display:block;padding:8px 12px 4px;font-size:12px;font-weight:700;color:var(--muted)}
#app-shell.zys-chrome #account-options [aria-current="true"]{font-weight:700;color:var(--qc-emerald);justify-content:space-between}
/* Exam tab. */
#app-shell.zys-chrome .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#app-shell.zys-chrome #header-exams>a{color:var(--teal)}
#app-shell.zys-chrome .membership-exam-menu{position:relative}
#app-shell.zys-chrome .membership-exam-menu>summary{cursor:pointer}
#app-shell.zys-chrome .membership-exam-menu>nav{display:block;position:absolute;top:calc(100% + 8px);left:0;z-index:100;width:min(280px,calc(100vw - 40px));max-height:60vh;overflow:auto;padding:8px;margin:0;border:1px solid #d7ddcf;border-radius:14px;background:#fffdf9;box-shadow:0 12px 28px #123b3226}
#app-shell.zys-chrome .membership-exam-menu>nav a{display:block;padding:12px;color:#102d50;text-decoration:none;white-space:normal;overflow-wrap:anywhere;font-size:inherit}
#app-shell.zys-chrome .membership-exam-menu>nav a[aria-current="true"]{font-weight:700;color:var(--qc-emerald)}
#app-shell.zys-chrome .membership-exam-menu>nav .exam-switch-add{border-top:1px solid var(--line);margin-top:4px;padding-top:10px;color:var(--qc-emerald);font-weight:600}
@media(max-width:800px){
 #app-shell.zys-chrome .top-signed-in .top-lead{flex:1 1 auto;min-width:0}
 #app-shell.zys-chrome .top-signed-in #header-exams{min-width:0}
 #app-shell.zys-chrome .top-signed-in .exam-switcher{min-width:0;max-width:100%}
 #app-shell.zys-chrome .top-signed-in .exam-switch-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 #app-shell.zys-chrome .crumbs{display:none}
}
@media(max-width:680px){#app-shell.zys-chrome .membership-exam-menu>nav{position:fixed;top:78px;left:16px;right:16px;width:auto;max-height:65vh}}
/* Tabs: phone layout only. */
#app-tabs.zys-chrome-tabs{display:none}
@media(max-width:800px){
 #app-tabs.zys-chrome-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;position:fixed;left:0;right:0;bottom:0;z-index:40;width:auto;max-width:none;margin:0;padding:4px 4px calc(6px + env(safe-area-inset-bottom));background:var(--surface);border:0;border-top:1px solid var(--line);transition:transform .2s ease-out}
 body[data-tabs-hidden] #app-tabs.zys-chrome-tabs{transform:translateY(calc(100% + 1px))}
 #app-tabs.zys-chrome-tabs .app-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;min-height:52px;margin:0;padding:0;border:0;background:transparent;color:var(--muted);font-size:12px;font-weight:400;letter-spacing:normal;text-decoration:none;text-align:center;cursor:pointer}
 #app-tabs.zys-chrome-tabs .app-tab.active{color:var(--qc-emerald);font-weight:700}
 #app-tabs.zys-chrome-tabs .ecg-library-tab span{font-size:10px;line-height:1.15}
 /* The end of each page clears the tabs. */
 html[data-member-chrome="on"] body::after{content:"";display:block;height:calc(96px + env(safe-area-inset-bottom))}
 /* The podcast player sits above the tabs and moves down with them. */
 html[data-member-chrome="on"] #player.player{bottom:var(--zc-tabs);transition:transform .2s ease-out}
 html[data-member-chrome="on"] body[data-tabs-hidden] #player.player{transform:translateY(var(--zc-tabs))}
}
html[data-member-chrome="on"] .zys-help-button{border-radius:50%}
/* The help button: the same position and slide as the main app, and always clear of the podcast player. */
html[data-member-chrome="on"] body:has(#app-shell.zys-chrome) .zys-help:not(:has(.zys-help-panel:not([hidden]))){bottom:calc(16px + env(safe-area-inset-bottom) + var(--zc-player))!important}
@media(max-width:800px){
 html[data-member-chrome="on"] body:has(#app-shell.zys-chrome) .zys-help:not(:has(.zys-help-panel:not([hidden]))){bottom:calc(76px + env(safe-area-inset-bottom) + var(--zc-player))!important;transition:transform .2s ease-out}
 html[data-member-chrome="on"] body[data-tabs-hidden]:has(#app-shell.zys-chrome) .zys-help:not(:has(.zys-help-panel:not([hidden]))){transform:translateY(60px)}
}
@media(max-width:800px) and (prefers-reduced-motion:reduce){
 #app-tabs.zys-chrome-tabs,html[data-member-chrome="on"] #player.player,html[data-member-chrome="on"] .zys-help{transition:none!important}
}