/* Shared look for the database's pages (Lesion index, case files, figures,
   shared collections, sign-in). The slide viewer and multi-view keep their
   own toolbars but use the same colours and "on" look.

   One quiet button style; a blue primary button at most once per area;
   status colours only where they mean something (red abnormal, green
   normal, amber warning). */
:root{
--ui-bg:#f5f5f5;
--ui-card:#fff;
--ui-line:#e2e2e2;
--ui-border:#d0d5dd;
--ui-ink:#222;
--ui-muted:#666;
--ui-link:#1a5fb4;
--ui-on-bg:#e3eefc;
--ui-on-ink:#0b3d7a;
}

/* Page header: "← Slides" and the title on the left, actions on the right. */
.uiPageHead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 16px;background:var(--ui-bg);border-bottom:1px solid var(--ui-line);}
.uiPageHead h1{font-size:18px;margin:0;font-weight:700;color:var(--ui-ink);}
.uiPageHead .uiPush{margin-left:auto;}
.uiBack{font-size:13px;color:var(--ui-link);text-decoration:none;white-space:nowrap;}
.uiBack:hover{text-decoration:underline;}
.uiUser{font-size:12px;color:#8a1f1f;background:#fff2f2;border:1px solid #e1a5a5;border-radius:6px;padding:3px 8px;white-space:nowrap;}

/* Buttons. */
.uiBtn{font:inherit;font-size:12px;padding:4px 10px;border:1px solid var(--ui-border);border-radius:6px;background:#fff;color:var(--ui-ink);cursor:pointer;white-space:nowrap;line-height:1.5;}
.uiBtn:hover{background:#f2f2f2;}
.uiBtn.uiPrimary{background:var(--ui-link);border-color:var(--ui-link);color:#fff;}
.uiBtn.uiPrimary:hover{background:#164d94;}
.uiBtn[aria-pressed="true"],.uiBtn.on{background:var(--ui-on-bg);border-color:var(--ui-link);color:var(--ui-on-ink);}
.uiLink{font:inherit;font-size:12px;border:none;background:none;padding:0;color:var(--ui-link);cursor:pointer;}
.uiLink:hover{text-decoration:underline;}

/* On/off settings: one iPhone-style switch on every page, in two forms.
   <input type="checkbox" class="uiSwitch"> sits beside its own label;
   <button class="uiSwitch" aria-pressed> carries its label with the track
   on the right, for toolbars. "#_" never matches: it only lifts these rules
   above page-local control styles such as "#bar button" or ".fr input". */
:root{--ui-switch-off:#d1d1d6;}
:is(html,#_) input.uiSwitch{
-webkit-appearance:none;appearance:none;position:relative;flex:none;display:inline-block;vertical-align:middle;
width:28px;height:16px;margin:0;padding:0;border:none;border-radius:999px;
background:var(--ui-switch-off);box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
cursor:pointer;transition:background .16s ease;
}
:is(html,#_) input.uiSwitch::after{
content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;
background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.22);transition:transform .16s ease;
}
:is(html,#_) input.uiSwitch:checked{background:var(--ui-link);}
:is(html,#_) input.uiSwitch:checked::after{transform:translateX(12px);}
:is(html,#_) input.uiSwitch:disabled{opacity:.45;cursor:default;}
:is(html,#_) button.uiSwitch{
position:relative;display:inline-flex;align-items:center;gap:2px;
padding-left:5px;padding-right:36px;box-sizing:border-box;white-space:nowrap;
background:#fff;border-color:var(--ui-border);color:var(--ui-ink);
}
/* The switch track, not the button, shows the state. */
:is(html,#_) button.uiSwitch:is(:hover,.active,[aria-pressed="true"]){background:#fff;border-color:var(--ui-border);color:var(--ui-ink);}
:is(html,#_) button.uiSwitch:hover{background:#f5f5f5;}
:is(html,#_) button.uiSwitch::before{
content:"";position:absolute;right:4px;top:50%;transform:translateY(-50%);
width:28px;height:16px;border-radius:16px;background:var(--ui-switch-off);
box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);transition:background .16s ease;
}
:is(html,#_) button.uiSwitch::after{
content:"";position:absolute;right:18px;top:50%;transform:translateY(-50%);
width:12px;height:12px;border-radius:50%;background:#fff;
box-shadow:0 1px 3px rgba(0,0,0,.22);transition:right .16s ease;
}
:is(html,#_) button.uiSwitch[aria-pressed="true"]::before{background:var(--ui-link);}
:is(html,#_) button.uiSwitch[aria-pressed="true"]::after{right:6px;}
:is(html,#_) .uiSwitch[hidden]{display:none;}
:is(html,#_) button.uiSwitch .keyHint{margin-left:0;color:#666;background:#f0f0f0;}
:is(html,#_) .uiSwitch:focus-visible{outline:2px solid var(--ui-link);outline-offset:2px;}
@media (prefers-reduced-motion:reduce){
:is(html,#_) :is(input.uiSwitch,button.uiSwitch,input.uiSwitch::after,button.uiSwitch::before,button.uiSwitch::after){transition:none;}
}

/* Text tabs, as in the Notes panel. */
.uiTabs{display:inline-flex;gap:16px;border-bottom:1px solid var(--ui-line);}
.uiTabs button{border:none;background:none;padding:6px 0;margin-bottom:-1px;border-bottom:2px solid transparent;font:inherit;font-size:13px;color:var(--ui-muted);cursor:pointer;border-radius:0;}
.uiTabs button[aria-selected="true"]{color:var(--ui-ink);border-bottom-color:var(--ui-ink);font-weight:600;}

/* Small chips: jump links and filters in force. */
.uiChips{display:flex;gap:6px;flex-wrap:wrap;align-items:center;}
.uiChip{display:inline-flex;align-items:center;gap:4px;font-size:12px;padding:2px 9px;border:1px solid var(--ui-border);border-radius:12px;background:#fff;color:#333;text-decoration:none;white-space:nowrap;cursor:pointer;}
.uiChip:hover{background:#f2f6fb;border-color:#9bb8d8;}
.uiChip .uiCount{color:var(--ui-muted);}

/* Touch screens: larger targets. */
@media (hover:none){ .uiBtn,.uiChip{min-height:34px;} }


/* Application-wide interface contract. Loaded after page-local styles.
   Density changes only controls; scientific content and export typography
   keep their explicit fonts. Semantic status/danger colours stay local. */
:root{
--ui-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
--ui-text-size:13px;
--ui-compact-size:11px;
--ui-control-size:var(--ui-text-size);
--ui-control-height:28px;
--ui-control-line:18px;
--ui-control-pad:4px;
--ui-control-radius:6px;
--ui-panel-radius:8px;
--ui-panel-shadow:0 10px 28px rgba(0,0,0,.18);
--ui-menu-shadow:0 6px 18px rgba(0,0,0,.12);
--ui-focus:0 0 0 3px rgba(26,95,180,.18);
}
html[data-ui] body{
font-family:var(--ui-font);
font-size:var(--ui-text-size);
line-height:1.45;
}
html[data-ui] :is(button,input,select,textarea){font-family:var(--ui-font);}
/* Close buttons, swatches and clickable content rows retain their geometry. */
html[data-ui] :is(button,select,input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]),textarea){
font-family:var(--ui-font) !important;
}
html[data-ui] :is(button,select,.uiBtn,.btn):not(:where(
[class*="Swatch"],.swatch,.color-btn,.close,.adjustClose,.icon-btn,
[id$="Close"],[id^="close"],[aria-label^="Close"],
.vNav,.vClose,.vPreviewCtrl,.caseToggle,.caseLink,.caseNavSlide,.videoRow,.chapterRow,.folderHeading,
.folder,.metric,.notesListTitle,.npFilter button,.uiTabs button,
.categoryHead button,.rotationDial button,.dialStep,
#title,#kbChatSend,#notesSaveState)){
font-size:var(--ui-control-size) !important;
line-height:var(--ui-control-line) !important;
min-height:var(--ui-control-height);
padding-top:var(--ui-control-pad) !important;
padding-bottom:var(--ui-control-pad) !important;
border-radius:var(--ui-control-radius) !important;
box-sizing:border-box;
}
html[data-ui] :is(select,input[type="text"],input[type="search"],input[type="password"],input[type="email"],input[type="number"],textarea){
font-size:var(--ui-control-size);
line-height:1.4;
border-radius:var(--ui-control-radius);
border-color:var(--ui-border);
box-sizing:border-box;
}
html[data-ui] :is(input[type="checkbox"],input[type="radio"],input[type="range"]){accent-color:var(--ui-link);}
html[data-ui] :is(button,select,input,textarea,summary):focus-visible{
outline:2px solid var(--ui-link);
outline-offset:2px;
}
/* The viewer keeps a compact menu, including buttons moved to More. */
html[data-ui="viewer"] :is(#bar,.toolbarMoreMenu,.toolbarContextMenu,.cellHead,.orientBody){
--ui-control-size:var(--ui-compact-size);
--ui-control-height:24px;
--ui-control-line:14px;
}
html[data-ui] :is(.uiBtn,.filter,.tbMenu>summary,.rowBtn){border-color:var(--ui-border);}
html[data-ui] :is(.uiBtn.uiPrimary,button.primary){background:var(--ui-link);border-color:var(--ui-link);color:#fff;}
html[data-ui] :is(.uiBtn.uiPrimary,button.primary):hover{background:#164d94;}
html[data-ui] :is(.tbMenu>summary,.uiBack,.tbNavLink,.tbToggle,.selectVisibleRow label){font-family:var(--ui-font);font-size:var(--ui-text-size);line-height:18px;}
html[data-ui] :is(.tbMenu>summary,.selectVisibleRow .filter){padding-block:4px;min-height:28px;box-sizing:border-box;}
/* Match the three controls in the reported sorting/grouping/sharing row. */
html[data-ui] .selectVisibleRow{font-size:var(--ui-text-size);gap:8px;}
html[data-ui] .selectVisibleRow :is(.listControls,label){gap:8px;}
html[data-ui] .selectVisibleRow :is(button,select){height:28px;}
html[data-ui] :is(.tbMenuBody,.rowMenu,.clMenu,.toolbarMoreMenu,.toolbarContextMenu){
border-color:var(--ui-border);border-radius:var(--ui-panel-radius);box-shadow:var(--ui-menu-shadow);
}
html[data-ui] :is(#annoPanel,#notesPanel,#refPanel,#kbChatPanel,#adjustPanel,
#storageOfflinePanel,#slideLabelPanel,.mitosisReviewPanel,.manualMitosisPanel,
.ki67Panel,#nucleiPanel,.adminModalBox,.shortcutBox,#authBox,#editBox,
#shareDialog,.uiDialog,dialog){
font-family:var(--ui-font);font-size:var(--ui-text-size);
border-color:var(--ui-border);border-radius:var(--ui-panel-radius);box-shadow:var(--ui-panel-shadow);
}
html[data-ui] :is(.annoPanelHeader,.notesPanelHeader,#refHeader,#kbChatHeader,
.mitosisReviewHead,.manualMitosisHead,.ki67Head,#nucleiPanel header,.adjustHead){
font-family:var(--ui-font);font-size:var(--ui-text-size);gap:8px;border-bottom-color:var(--ui-line);
}
html[data-ui] :is(.annoPanelHeader,.notesPanelHeader,#refHeader,#kbChatHeader,
.mitosisReviewHead,.manualMitosisHead,.ki67Head,#nucleiPanel header,.adjustHead) :is(strong,h2,h3){
font-size:var(--ui-text-size);font-weight:600;
}
html[data-ui] :is(.panelLabel,.panelRow,.notesChoiceRow,.notesPanelActions,.inlineActions,.row){gap:8px;}
html[data-ui] :is(.panelLabel,.notesChoiceGroup legend,.adjustTitle){font-size:var(--ui-text-size);}
html[data-ui] :is(.card,.group,.listEmpty,#passwordCard,form.loginForm){border-radius:var(--ui-panel-radius);border-color:var(--ui-border);}
/* Adjustment tools use the same light surface and blue accent as Notes. */
html[data-ui] #adjustPanel{
--adj-bg:#fff;--adj-line:var(--ui-border);--adj-soft:#f2f4f7;
--adj-text:var(--ui-ink);--adj-muted:var(--ui-muted);
--adj-accent:var(--ui-link);--adj-accent-hi:#8ab4e8;
background:var(--adj-bg);backdrop-filter:none;-webkit-backdrop-filter:none;
}
html[data-ui] #adjustPanel :is(.adjustIconBtn,.adjustClose):hover{background:var(--adj-soft);color:var(--adj-text);}
html[data-ui] #adjustPanel .adjustTabs{background:#f2f4f7;}
html[data-ui] #adjustPanel .adjustTab[aria-selected="true"]{background:var(--ui-on-bg);color:var(--ui-on-ink);box-shadow:none;}
html[data-ui] #adjustPanel :is(select,.adjNum:focus){background:#fff;color:var(--adj-text);}
html[data-ui] #adjustPanel .polNote{background:#fffbeb;color:#854d0e;}
html[data-ui] #adjustPanel input[type="range"]::-webkit-slider-runnable-track{
background:linear-gradient(to right,#d0d5dd var(--lo),var(--ui-link) var(--lo),var(--ui-link) var(--hi),#d0d5dd var(--hi));
}
html[data-ui] #adjustPanel input[type="range"]::-moz-range-track{background:#d0d5dd;}
html[data-ui] #adjustPanel input[type="range"]::-webkit-slider-thumb{box-shadow:0 0 0 2px rgba(26,95,180,.3),0 1px 3px rgba(0,0,0,.2);}
html[data-ui] #adjustPanel input[type="range"]::-moz-range-thumb{box-shadow:0 0 0 2px rgba(26,95,180,.3),0 1px 3px rgba(0,0,0,.2);}
/* Sign-in has the same surface, while retaining a generous form layout. */
html[data-ui="login"] form{border-radius:var(--ui-panel-radius);border-color:var(--ui-border);box-shadow:var(--ui-panel-shadow);}
@media(hover:none){
html[data-ui] :is(button:not(:where([class*="Swatch"],.swatch,.color-btn)),select,.tbMenu>summary,.uiBtn){min-height:36px !important;}
html[data-ui] .selectVisibleRow :is(button,select){height:auto;}
}
/* Prevent focus zoom on phones without shrinking touch targets. */
@media(max-width:600px){
html[data-ui] :is(input[type="text"],input[type="search"],input[type="password"],input[type="email"],select,textarea){font-size:16px !important;}
}

/* Structural text tabs share the interface font without becoming boxed buttons. */
html[data-ui] :is(.npFilter button,.uiTabs button,.notesTabs button){font-size:var(--ui-text-size);}
html[data-ui] #adjustPanel .curveTabs{background:#f2f4f7;}
html[data-ui] #adjustPanel .curveTab.active{background:var(--ui-on-bg);color:var(--ui-on-ink);}
html[data-ui] #adjustPanel .curveTab[data-ch="r"].active{color:#a61b1b;}
html[data-ui] #adjustPanel .curveTab[data-ch="g"].active{color:#166534;}
html[data-ui] #adjustPanel .curveTab[data-ch="b"].active{color:#1a5fb4;}
/* The scientific curve plot retains a dark field for its coloured traces. */
html[data-ui] #adjustPanel .curveGraph{background:#17212f;}

html[data-ui] #adjustPanel :is(.adjustTitle,.adjustRow>label,.adjustField>label,.adjSwitchRow>label){font-size:var(--ui-text-size);}
/* Files actions follow the same quiet/primary/danger hierarchy as Slides. */
html[data-ui="files"] :is(main,.adminModalBox) button:not(:where(.danger,.uiPrimary,#passwordSubmit,#adminSubmitBtn)){
background:#fff;color:var(--ui-ink);border-color:var(--ui-border);
}
html[data-ui="files"] :is(main,.adminModalBox) button:not(:where(.danger,.uiPrimary,#passwordSubmit,#adminSubmitBtn)):hover{background:#f2f4f7;}
html[data-ui="files"] :is(#passwordSubmit,#adminSubmitBtn){background:var(--ui-link);border-color:var(--ui-link);color:#fff;}
/* Video players keep a dark viewing field; navigation shares website blue. */
html[data-ui="video"] body{background:var(--ui-bg);color:var(--ui-ink);}
html[data-ui="video"] header{background:#173b6a;}
html[data-ui="video"] :is(.filter,.folder,.metric).active{background:var(--ui-on-bg) !important;color:var(--ui-on-ink) !important;}
html[data-ui="video"] :is(.sectionJumps button,.categoryHead button){background:var(--ui-on-bg);color:var(--ui-link);}
html[data-ui] #nucleiPanel header{background:#fff;}
html[data-ui] #nucleiPanel header strong{font-size:var(--ui-text-size);font-weight:600;}
html[data-ui] #nucleiPanel :is([data-el="confirm"],[data-el="box"],[data-el="annotations"]){background:var(--ui-link);border-color:var(--ui-link);color:#fff;}
html[data-ui] #nucleiPanel :is([data-el="confirm"],[data-el="box"],[data-el="annotations"]):hover:not(:disabled){background:#164d94;}
html[data-ui] :is(label,legend){font-size:var(--ui-control-size);}
html[data-ui="login"]{--ui-control-height:40px;--ui-control-pad:10px;}
/* Composer's segmented settings and menu links are interface controls too. */
html[data-ui="composer"] :is(.sb,.btn){font-family:var(--ui-font);font-size:var(--ui-text-size);line-height:18px;min-height:28px;border-radius:var(--ui-control-radius);box-sizing:border-box;}
html[data-ui="composer"] .sb{padding:4px 2px;}
html[data-ui="composer"] .fr>label{font-size:var(--ui-text-size);}

html[data-ui] .actions a{font-family:var(--ui-font);font-size:var(--ui-control-size);line-height:18px;min-height:28px;border-radius:var(--ui-control-radius);box-sizing:border-box;}
@media(hover:none){html[data-ui="composer"] .sb{min-height:36px;}}

/* Viewer toolbars float over the slide as frosted glass, as in Preview and
   Photos, so more of the section shows through. Solid where blur is
   unavailable or the system asks for reduced transparency. */
html[data-ui="viewer"] :is(#bar,#uiRestoreToggle,.toolbarMoreMenu,.toolbarContextMenu){
background:rgba(255,255,255,.92);
-webkit-backdrop-filter:saturate(160%) blur(24px);backdrop-filter:saturate(160%) blur(24px);
border-color:rgba(0,0,0,.06);
border-radius:10px;
box-shadow:0 4px 16px rgba(0,0,0,.10);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
html[data-ui="viewer"] :is(#bar,#uiRestoreToggle,.toolbarMoreMenu,.toolbarContextMenu){background:rgba(255,255,255,.96);}
}
@media (prefers-reduced-transparency:reduce){
html[data-ui="viewer"] :is(#bar,#uiRestoreToggle,.toolbarMoreMenu,.toolbarContextMenu){background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;}
}

/* Viewer panels (Annotate, Notes, Adjust, Case slides, Files, Ask Docs ...)
   share the toolbar's type and density, so the whole viewer reads as one
   interface: 11px controls 24px high, 12px titles and text. */
html[data-ui="viewer"]{
--ui-text-size:12px;
--ui-control-size:var(--ui-compact-size);
--ui-control-height:24px;
--ui-control-line:14px;
--ui-panel-radius:10px;
}
html[data-ui="viewer"] .panelLabel{font-size:var(--ui-compact-size);font-weight:600;color:var(--ui-muted);letter-spacing:.02em;margin:12px 0 6px;}
html[data-ui="viewer"] .styleField input[type=color]{height:24px;width:32px;}
html[data-ui="viewer"] #comment{font-size:var(--ui-text-size);}

/* Tabs and filters in panels are one segmented control: a grey track with
   the chosen segment tinted blue, as in Adjust image. */
html[data-ui="viewer"] :is(#_,#annoPanel,#notesPanel,#adjustPanel) :is(.annotationPanelTabs,.npTabs,.npFilter,.adjustTabs,.annoToolSet){
display:flex;gap:2px;padding:2px;border:none;border-radius:8px;background:#f0f1f4;
}
html[data-ui="viewer"] :is(#_,#annoPanel,#notesPanel) :is(.annotationPanelTabs,.npTabs){margin:0 0 10px;}
html[data-ui="viewer"] :is(#_,#annoPanel,#notesPanel,#adjustPanel) :is(.annotationPanelTabs,.npTabs,.npFilter,.adjustTabs,.annoToolSet) button{
flex:1;min-height:22px;height:auto;margin:0;padding:3px 8px !important;border:none;border-radius:6px !important;
background:transparent;color:#555;font-size:var(--ui-compact-size) !important;font-weight:500;box-shadow:none;
}
html[data-ui="viewer"] :is(#_,#annoPanel,#notesPanel,#adjustPanel) :is(.annotationPanelTabs,.npTabs,.npFilter,.adjustTabs,.annoToolSet) button:hover{background:rgba(0,0,0,.04);color:var(--ui-ink);}
html[data-ui="viewer"] :is(#_,#annoPanel,#notesPanel,#adjustPanel) :is(.annotationPanelTabs,.npTabs,.npFilter,.adjustTabs,.annoToolSet) button:is(.active,[aria-selected="true"],[aria-pressed="true"]){
background:var(--ui-on-bg);color:var(--ui-on-ink);font-weight:600;
}
/* Annotate's six drawing tools sit in a 3 x 2 segmented block. */
html[data-ui="viewer"] #annoPanel .annoToolSet{display:grid;grid-template-columns:repeat(3,1fr);margin-bottom:10px;}

/* Panel title bars: icon buttons without boxes; the drag grip appears on hover. */
html[data-ui="viewer"] :is(#annoPanel #annoPanelClose,#notesSplitBtn,#notesCloseBtn,#kbChatClose,#refClose,#slideLabelClose,#caseSlideRailClose,#adjustPanel .adjustClose,.rsWinCtrl,.cfWinCtrl){
width:24px;height:24px;min-height:24px;padding:0 !important;display:inline-flex;align-items:center;justify-content:center;
border:none;border-radius:6px !important;background:transparent;color:#666;font-size:15px !important;line-height:1 !important;
}
html[data-ui="viewer"] :is(#annoPanel #annoPanelClose,#notesSplitBtn,#notesCloseBtn,#kbChatClose,#refClose,#slideLabelClose,#caseSlideRailClose,#adjustPanel .adjustClose,.rsWinCtrl,.cfWinCtrl):hover{background:#eef0f3;color:var(--ui-ink);}
html[data-ui="viewer"] .annoPanelGrip{opacity:0;transition:opacity .15s;}
html[data-ui="viewer"] .annoPanelHeader:hover .annoPanelGrip{opacity:1;}
html[data-ui="viewer"] .notesResizeHandle::after{opacity:0;transition:opacity .15s;}
html[data-ui="viewer"] #notesPanel:hover .notesResizeHandle::after{opacity:1;}

/* Delete and other destructive buttons: red text, tinted only on hover. */
html[data-ui="viewer"] :is(#_,#bar,#annoPanel,#notesPanel) button:is(.danger,.npDanger){background:#fff;border-color:var(--ui-border);color:#b42318;}
html[data-ui="viewer"] :is(#_,#bar,#annoPanel,#notesPanel) button:is(.danger,.npDanger):hover{background:#fef3f2;border-color:#fda29b;color:#b42318;}

/* Mask opacity and colour read as plain labelled controls, not boxes. */
html[data-ui="viewer"] #annoPanel .maskColorControl{border:none;background:none;padding:0 4px 0 0;font-size:var(--ui-compact-size);}

/* "+ New note" is the one primary action of the Notes panel. */
html[data-ui="viewer"] #notesPanel .npBtn.npStrong{background:var(--ui-link);border-color:var(--ui-link);color:#fff;}
html[data-ui="viewer"] #notesPanel .npBtn.npStrong:hover{background:#164d94;}
/* Panels stay solid white so text reads clearly over any stain. */
html[data-ui="viewer"] :is(#annoPanel,#notesPanel){background:#fff;}
html[data-ui="viewer"] #adjustPanel .polHead{font-size:var(--ui-text-size);}