/* Category dividers emerge from beneath the photographed page edges. */
body.nb-modern.binder-open:not(.event-mode) #binderShell {isolation:isolate;container-type:inline-size;container-name:binder-spread}
body.nb-modern.binder-open:not(.event-mode) #binderShell::after {
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:inherit;clip-path:polygon(15.2% 10.3%,87.3% 10.3%,90.3% 88%,12% 88%);
}
body.nb-modern.binder-open:not(.event-mode) #binderTabs.binder-tabs {
  position:absolute;inset:0;z-index:auto;display:block;width:auto;height:auto;max-height:none;
  padding:0;overflow:visible;pointer-events:none;scrollbar-gutter:auto;
}
body.nb-modern.binder-open:not(.event-mode) #binderTabs .binder-index-heading {
  display:block;position:absolute;z-index:3;left:17%;width:28%;top:15%;bottom:15%;
  margin:0;padding:0 12px 8px 0;border:0;overflow:auto;pointer-events:auto;
  scrollbar-width:auto;scrollbar-color:#496b80 #dce5e9;color:#193748;
}
body.nb-modern.binder-open:not(.event-mode) #binderTabs .nav-label {font-size:28px;margin-bottom:14px}
body.nb-modern.binder-open:not(.event-mode) #binderTabs .binder-directory-intro {
  font-size:15px;line-height:1.5;letter-spacing:0;margin:0 0 18px;color:#4a606b;
}
.binder-directory-links {display:grid;border-top:1px solid #b9c4ca}
.binder-directory-links button {
  display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px;
  padding:10px 0;border:0;border-bottom:1px solid #bdc8cf;background:transparent;
  color:#234f70;text-align:left;font-size:15px;line-height:1.3;cursor:pointer;
}
.binder-directory-links button:hover,.binder-section-overview:hover {color:#142c40;text-decoration:underline}
.binder-directory-links button span {flex:none}
.binder-section-overview {min-height:44px;padding:10px 0;border:0;background:none;color:#234f70;text-align:left;font-size:14px;font-weight:600;cursor:pointer}
body.nb-modern.binder-open:not(.event-mode) #binderTabs .binder-divider-help {margin:18px 0 8px;font-size:13px;line-height:1.5;letter-spacing:0;color:#536977}
body.nb-modern.binder-open:not(.event-mode) #binderTabs .binder-contents-link {border-top:1px solid #b9c4ca;width:100%;padding-top:10px;min-height:44px}
body.nb-modern.binder-open:not(.event-mode) #binderTabs .binder-edge-tabs {
  position:absolute;z-index:1;top:16%;bottom:17%;display:flex;flex-direction:column;
  gap:14px;pointer-events:auto;filter:drop-shadow(0 3px 3px #081b2b60);
}
body.nb-modern.binder-open:not(.event-mode) #binderTabs .binder-left-tabs {left:3%;width:14%}
body.nb-modern.binder-open:not(.event-mode) #binderTabs .binder-right-tabs {right:-1%;width:16%}
body.nb-modern.binder-open:not(.event-mode) #binderTabs .binder-tab {
  position:relative;flex:1 1 0;display:flex;align-items:center;justify-content:center;
  width:100%;min-width:0;min-height:44px;max-height:64px;margin:0;padding:10px;
  border:0;border-radius:0;background:linear-gradient(#ffffff38,transparent 45%,#0000000a),color-mix(in srgb,var(--tab-color) 35%,#fff);
  color:#19313f;text-align:center;font-size:clamp(13px,1.12cqw,16px);font-weight:700;line-height:1.25;
  box-shadow:inset 0 1px #ffffffb0,inset 0 -2px #142c4026;white-space:normal;
  transform:none;filter:none;transition:background .15s;writing-mode:horizontal-tb;
}
body.nb-modern.binder-open:not(.event-mode) #binderTabs .binder-left-tabs .binder-tab {
  padding-right:23%;clip-path:polygon(8px 0,100% 0,100% 100%,8px 100%,0 calc(100% - 8px),0 8px);
}
body.nb-modern.binder-open:not(.event-mode) #binderTabs .binder-right-tabs .binder-tab {
  padding-left:32%;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%);
}
body.nb-modern.binder-open:not(.event-mode) #binderTabs .binder-tab .tab-label {display:block;min-width:0}
body.nb-modern.binder-open:not(.event-mode) #binderTabs .binder-tab .tab-count,
body.nb-modern.binder-open:not(.event-mode) #binderTabs .binder-tab::after {display:none}
body.nb-modern.binder-open:not(.event-mode) #binderTabs .binder-tab:hover:not(:disabled) {background:color-mix(in srgb,var(--tab-color) 50%,#fff);transform:none;filter:none}
body.nb-modern.binder-open:not(.event-mode) #binderTabs .binder-tab[aria-current="page"],
body.nb-modern.binder-open:not(.event-mode) #binderTabs .binder-tab[aria-current="page"]:hover {
  background:color-mix(in srgb,var(--tab-color) 78%,#102b3c);color:#fff;
  box-shadow:inset 0 0 0 2px #ffffffb0,inset 0 -4px #102b3c40;transform:none;font-weight:750;
}
body.nb-modern.binder-open:not(.event-mode) #binderTabs .binder-tab:focus-visible,
body.nb-modern.binder-open:not(.event-mode) #binderTabs .binder-tab[aria-current="page"]:focus-visible {outline:0;background:#ffe29c;color:#142c40;box-shadow:inset 0 0 0 4px #193748}
body.nb-modern.binder-open:not(.event-mode) #paperContent {z-index:3}
body.nb-modern.binder-open:not(.event-mode) .binder-reading-controls {z-index:4}
@media(min-width:1101px){
  body.nb-modern.binder-open:not(.event-mode) #binderShell {width:min(calc(100% - 48px),max(1000px,calc((100svh - var(--binder-chrome-height,126px) - 32px)*1.7768)))}
}
/* A readable single-page binder keeps the same left/right dividers on phones. */
@media(max-width:1100px){
  body.nb-modern.binder-open:not(.event-mode) #binderShell {
    width:100%;max-width:900px;height:max(640px,calc(100svh - var(--binder-chrome-height,132px) - 24px));
    margin:0 auto;background:linear-gradient(115deg,#25465c,#132c40 45%,#1e3b50);border-radius:8px;
  }
  body.nb-modern.binder-open:not(.event-mode) #binderShell::after {
    inset:7% 47px 7%;clip-path:none;border:1px solid #d0d5d7;
    background:linear-gradient(90deg,#e7e9e8,#f9f9f5 10%,#fffef9 90%,#e6e8e6);
    box-shadow:-3px 2px #c9cece,-6px 4px #e1e4e1,3px 3px #c6cdcc,6px 5px #e6e8e4,0 7px 10px #09192370;
  }
  body.nb-modern.binder-open:not(.event-mode) #binderTabs .binder-index-heading {display:none}
  body.nb-modern.binder-open:not(.event-mode) #binderTabs .binder-edge-tabs {top:10%;bottom:11%;gap:7px;width:56px}
  body.nb-modern.binder-open:not(.event-mode) #binderTabs .binder-left-tabs {left:0}
  body.nb-modern.binder-open:not(.event-mode) #binderTabs .binder-right-tabs {right:0}
  body.nb-modern.binder-open:not(.event-mode) #binderTabs .binder-tab {max-height:none;min-height:84px;font-size:12px;white-space:nowrap}
  body.nb-modern.binder-open:not(.event-mode) #binderTabs .binder-left-tabs .binder-tab {padding:8px 14px 8px 5px}
  body.nb-modern.binder-open:not(.event-mode) #binderTabs .binder-right-tabs .binder-tab {padding:8px 5px 8px 14px}
  body.nb-modern.binder-open:not(.event-mode) #binderTabs .binder-tab .tab-label {writing-mode:vertical-rl;white-space:nowrap}
  body.nb-modern.binder-open:not(.event-mode) #binderTabs .binder-left-tabs .tab-label {transform:rotate(180deg)}
  body.nb-modern.binder-open:not(.event-mode) #paperContent {left:63px;right:60px;top:10%;bottom:calc(7% + 100px);width:auto;padding-right:8px}
  body.nb-modern.binder-open:not(.event-mode) .binder-reading-controls {left:58px;right:58px;width:auto;bottom:8%;padding:6px;gap:4px}
  .binder-reading-controls button {font-size:13px}
}
@media(prefers-reduced-motion:reduce){body.nb-modern.binder-open:not(.event-mode) #binderTabs .binder-tab {transition:none}}
@media print {body.nb-modern #binderShell::after {display:none!important}body.nb-modern #binderShell {container-type:normal}}

/* The paper can be narrow even on a large monitor. Adapt content to its width. */
body.nb-modern.binder-open:not(.event-mode) #paperContent .section-page {animation:binderPageFade .16s ease-out}
@keyframes binderPageFade {from{opacity:.65}to{opacity:1}}
body.nb-modern.binder-open:not(.event-mode) #paperContent .simulation-banner {
  flex-direction:column;align-items:stretch;justify-content:flex-start;gap:7px;
  padding:14px;text-align:left;box-shadow:none;
}
body.nb-modern.binder-open:not(.event-mode) #paperContent .simulation-banner strong {white-space:normal;font-size:14px;line-height:1.4}
body.nb-modern.binder-open:not(.event-mode) #paperContent .simulation-banner span {font-size:14px;line-height:1.5;min-width:0}
body.nb-modern.binder-open:not(.event-mode) #paperContent .education-track-tabs,
body.nb-modern.binder-open:not(.event-mode) #paperContent .education-subtabs {flex-wrap:wrap;overflow:visible;gap:7px}
body.nb-modern.binder-open:not(.event-mode) #paperContent .education-track-tabs button,
body.nb-modern.binder-open:not(.event-mode) #paperContent .education-subtabs button {min-height:44px;max-width:100%;white-space:normal;text-align:left}
@container paper (max-width:600px){
  body.nb-modern .med-view-tabs,body.nb-modern .med-card-grid {grid-template-columns:minmax(0,1fr)}
  body.nb-modern .med-view-tabs button {min-height:64px;padding:12px}
  body.nb-modern .med-card-copy {min-width:0;overflow-wrap:anywhere}
  body.nb-modern .trauma-sim-card {padding:16px;gap:12px}
  body.nb-modern .trauma-sim-copy {min-width:0}
  body.nb-modern .education-track>header {gap:10px;padding:12px}
  body.nb-modern .education-track>header>div {min-width:0}
  body.nb-modern .procedure-alert p {overflow-wrap:anywhere}
}
@container paper (max-width:340px){
  body.nb-modern.binder-open #binderArea .emergency-grid,
  body.nb-modern.binder-open #binderArea .practice-event-row,
  body.nb-modern.binder-open #binderArea .resource-row {grid-template-columns:minmax(0,1fr)}
  body.nb-modern.binder-open #binderArea .index-card {display:grid;grid-template-columns:minmax(0,1fr);gap:9px}
  body.nb-modern.binder-open #binderArea .index-mark {width:44px;height:44px}
  body.nb-modern.binder-open #binderArea .equipment-photo {width:100%;height:130px}
  body.nb-modern.binder-open #binderArea .index-copy,
  body.nb-modern.binder-open #binderArea .row-copy {min-width:0;overflow-wrap:anywhere}
  body.nb-modern.binder-open #binderArea .flag-row {flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){body.nb-modern.binder-open:not(.event-mode) #paperContent .section-page {animation:none}}
