/* Compact phone chrome plus a hybrid top/right physical binder index. */
.compact-label {display:none}
.binder-top-tabs,.binder-side-tabs {display:flex;flex:none;flex-direction:column;gap:5px}

@media (max-width:700px) {
  body.nb-modern .topbar {
    display:grid;grid-template-columns:minmax(0,1fr);gap:6px;
    min-height:0;padding:8px 10px 7px;background:#f4f6f5;
  }
  body.nb-modern .topbar .brand {width:max-content;max-width:100%;min-height:30px;padding:0}
  body.nb-modern .topbar .brand strong {font-size:17px;line-height:1.2}
  body.nb-modern .topbar .brand small,body.nb-modern .connection-state {display:none}
  body.nb-modern .top-actions {
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;
    width:100%;margin:0;overflow:visible;
  }
  body.nb-modern .top-actions .wide-label {display:none}
  body.nb-modern .top-actions .compact-label {display:inline}
  body.nb-modern .top-actions .find-button,
  body.nb-modern .top-actions .nb-request-top,
  body.nb-modern .top-actions .nb-edition-link {
    display:flex;align-items:center;justify-content:center;min-width:0;min-height:36px;
    margin:0;padding:6px 4px;border:1px solid #c9d2d6;border-radius:5px;
    background:#fff;color:#415460;box-shadow:0 1px 3px #17212b12;
    font-size:11.5px;font-weight:600;line-height:1.1;text-align:center;text-decoration:none;
  }
  body.nb-modern .workspace {padding:7px 0 30px}
  body.nb-modern .nb-footer {margin-inline:12px}
  body.nb-modern.event-mode .topbar {grid-template-columns:minmax(0,1fr) auto;align-items:center}
  body.nb-modern.event-mode .top-actions {display:grid;grid-template-columns:auto;width:auto}
  body.nb-modern.event-mode .top-actions #eventsButton {min-width:70px}
}

@media (max-width:1100px) {
  body.nb-modern.binder-open:not(.event-mode) #binderShell {
    width:100%;height:max(600px,calc(100svh - 92px));aspect-ratio:auto;
    margin:0;background-size:250% 100%;background-position:85% top;
  }
  body.nb-modern.binder-open:not(.event-mode) #binderTabs.binder-tabs {
    position:absolute;z-index:9;inset:0;display:block;width:auto;height:auto;
    padding:0;overflow:visible;pointer-events:none;
  }
  body.nb-modern.binder-open:not(.event-mode) #binderTabs .binder-index-heading,
  body.nb-modern.binder-open:not(.event-mode) #binderTabs .nav-divider {display:none}
  body.nb-modern.binder-open:not(.event-mode) #binderTabs .binder-top-tabs {
    position:absolute;z-index:2;top:3.4%;right:58px;left:6%;height:54px;
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;
    padding:0;overflow:visible;pointer-events:auto;
  }
  body.nb-modern.binder-open:not(.event-mode) #binderTabs .binder-side-tabs {
    position:absolute;z-index:1;top:8.2%;right:0;bottom:2.5%;width:59px;
    display:flex;flex-direction:column;gap:3px;padding:3px 0 3px 6px;
    overflow-x:visible;overflow-y:auto;pointer-events:auto;scrollbar-width:none;
    scroll-padding-block:4px;overscroll-behavior:contain;
  }
  body.nb-modern.binder-open:not(.event-mode) #binderTabs .binder-side-tabs::-webkit-scrollbar {display:none}
  body.nb-modern.binder-open:not(.event-mode) #binderTabs .binder-side-tabs .binder-tab {
    position:relative;display:flex;align-items:center;justify-content:center;
    flex:1 0 54px;width:52px;min-width:0;min-height:54px;margin:0;padding:7px 5px;
    border:0;border-right:5px solid var(--tab-color);border-radius:0;
    clip-path:polygon(8px 0,100% 0,100% calc(100% - 7px),8px 100%,0 calc(100% - 8px),0 8px);
    background:color-mix(in srgb,var(--tab-color) 16%,#fff);color:#263843;
    box-shadow:inset 1px 0 #ffffffbb,inset 0 -1px #182a3420;
    transform:none;filter:none;white-space:nowrap;
    writing-mode:vertical-rl;text-orientation:mixed;
    font-size:11px;font-weight:750;letter-spacing:.015em;line-height:1;
  }
  body.nb-modern.binder-open:not(.event-mode) #binderTabs .binder-tab::after {content:attr(data-tab-short)}
  body.nb-modern.binder-open:not(.event-mode) #binderTabs .binder-tab .tab-label,
  body.nb-modern.binder-open:not(.event-mode) #binderTabs .binder-tab .tab-count {display:none}
  body.nb-modern.binder-open:not(.event-mode) #binderTabs .binder-top-tabs .binder-tab {
    position:relative;display:flex;align-items:center;justify-content:center;
    width:auto;min-width:0;min-height:50px;margin:0;padding:8px 5px;
    border:0;border-top:6px solid var(--tab-color);border-radius:5px 5px 1px 1px;
    clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 9px,100% 100%,0 100%,0 9px);
    background:color-mix(in srgb,var(--tab-color) 18%,#fff);color:#263843;
    box-shadow:inset 0 1px #ffffffcc,0 -2px 7px #14283a20;
    transform:none;filter:none;white-space:nowrap;font-size:13px;font-weight:800;
    writing-mode:horizontal-tb;line-height:1.1;text-align:center;
  }
  body.nb-modern.binder-open:not(.event-mode) #binderTabs .binder-top-tabs .binder-tab.emerg {
    border-top-color:#86131a;background:#d8232a;color:#fff;
    box-shadow:inset 0 1px #ff9da255,0 -2px 7px #58101555;
  }
  body.nb-modern.binder-open:not(.event-mode) #binderTabs .binder-side-tabs .binder-tab:hover:not(:disabled),
  body.nb-modern.binder-open:not(.event-mode) #binderTabs .binder-side-tabs .binder-tab.active,
  body.nb-modern.binder-open:not(.event-mode) #binderTabs .binder-side-tabs .binder-tab[aria-current="page"] {
    width:59px;transform:translateX(-7px);filter:saturate(1.08);
    background:color-mix(in srgb,var(--tab-color) 30%,#fff);
  }
  body.nb-modern.binder-open:not(.event-mode) #binderTabs .binder-top-tabs .binder-tab:hover:not(:disabled),
  body.nb-modern.binder-open:not(.event-mode) #binderTabs .binder-top-tabs .binder-tab.active,
  body.nb-modern.binder-open:not(.event-mode) #binderTabs .binder-top-tabs .binder-tab[aria-current="page"] {
    transform:translateY(-5px);filter:saturate(1.08);background:color-mix(in srgb,var(--tab-color) 31%,#fff);
    box-shadow:inset 0 1px #ffffffdd,0 -4px 10px #14283a2d;
  }
  body.nb-modern.binder-open:not(.event-mode) #binderTabs .binder-top-tabs .binder-tab.emerg:hover,
  body.nb-modern.binder-open:not(.event-mode) #binderTabs .binder-top-tabs .binder-tab.emerg.active {background:#b91d25;color:#fff}
  body.nb-modern.binder-open:not(.event-mode) #binderTabs .binder-tab:focus-visible {outline-offset:-1px}
  body.nb-modern.binder-open:not(.event-mode) #paperContent {
    position:absolute;top:13.5%;right:60px;bottom:9%;left:6%;width:auto;height:auto;
    padding:0 8px 12px 0;overflow:auto;container-name:paper;container-type:inline-size;
  }
}

@media (max-width:410px) {
  body.nb-modern.binder-open:not(.event-mode) #binderShell {height:max(590px,calc(100svh - 86px))}
  body.nb-modern.binder-open:not(.event-mode) #binderTabs .binder-top-tabs {top:3.1%;right:54px;left:5%;height:51px;gap:3px}
  body.nb-modern.binder-open:not(.event-mode) #binderTabs .binder-top-tabs .binder-tab {min-height:47px;font-size:11.5px;padding-inline:3px}
  body.nb-modern.binder-open:not(.event-mode) #binderTabs .binder-side-tabs {top:8%;bottom:2%;width:55px;padding-left:5px}
  body.nb-modern.binder-open:not(.event-mode) #binderTabs .binder-side-tabs .binder-tab {width:49px;flex-basis:50px;min-height:50px;font-size:10.5px}
  body.nb-modern.binder-open:not(.event-mode) #binderTabs .binder-side-tabs .binder-tab:hover:not(:disabled),
  body.nb-modern.binder-open:not(.event-mode) #binderTabs .binder-side-tabs .binder-tab.active,
  body.nb-modern.binder-open:not(.event-mode) #binderTabs .binder-side-tabs .binder-tab[aria-current="page"] {width:55px}
  body.nb-modern.binder-open:not(.event-mode) #paperContent {top:13.3%;right:56px;left:5%}
}

@media print {
  .compact-label {display:none!important}
}