/* Phase 14 — critical shell sizing to reduce layout shift before site-navigation.js normalizes the UI. */
:root{--mdl-header-h:64px;--mdl-sidebar-w:264px}
html{scrollbar-gutter:stable}
body{margin-top:0}
body>.app-header,body>.mdl-app-header,body>.site-header,body>.topbar,
body>header.r10-header,body>header.p8-header,body>header.p9-header,body>header.p11-header,body>header.p12-header,
body>header:first-child{box-sizing:border-box;min-height:var(--mdl-header-h);height:var(--mdl-header-h);max-height:var(--mdl-header-h)}
.mdl-sidebar,.sidebar,.p8-side,.p9-side,.p11-side,.p12-side,.r10-side{
  box-sizing:border-box;min-width:var(--mdl-sidebar-w);width:var(--mdl-sidebar-w);max-width:var(--mdl-sidebar-w)
}
.mdl-unified-side{box-sizing:border-box;width:var(--mdl-sidebar-w);min-width:var(--mdl-sidebar-w);max-width:var(--mdl-sidebar-w)}
@media(max-width:900px){
 .mdl-sidebar,.sidebar,.p8-side,.p9-side,.p11-side,.p12-side,.r10-side,.mdl-unified-side{width:100%;min-width:0;max-width:none}
}


/* NO-JUMP PRE-PAINT FIX - 2026-09-17
   site-navigation.js is loaded near the end of the document and replaces
   legacy headers/sidebars with the canonical shell. Hide the first paint
   until that normalization is complete so users do not see a layout jump.
   A short failsafe reveals the page even if the navigation script fails.
*/
html:not(.mdl-shell-ready) body {
    visibility: hidden;
    animation: mdl-shell-failsafe-reveal 0s 1.5s forwards;
}

html.mdl-shell-ready body {
    visibility: visible;
    animation: none;
}

html:not(.mdl-shell-ready) {
    background: #F4F7F8;
}

html[data-theme="dark"]:not(.mdl-shell-ready) {
    background: #0B1626;
}

html:not(.mdl-shell-ready) *,
html:not(.mdl-shell-ready) *::before,
html:not(.mdl-shell-ready) *::after {
    transition: none !important;
    animation-duration: 0s !important;
}

@keyframes mdl-shell-failsafe-reveal {
    to { visibility: visible; }
}

/* MDL_SHARED_BUTTON_PALETTE_V1_START */
/* Shared visual palette only. No behavior, layout, or scientific logic. */
:root {
  --mdl-action-bg: #0B7480;
  --mdl-action-hover: #095F68;
  --mdl-action-text: #FFFFFF;
  --mdl-action-secondary-bg: #FFFFFF;
  --mdl-action-secondary-text: #0B7480;
  --mdl-action-border: #0B7480;
  --mdl-action-focus: #20B8C5;
}
:root[data-theme="dark"] {
  --mdl-action-bg: #20B8C5;
  --mdl-action-hover: #58CDD5;
  --mdl-action-text: #0B1626;
  --mdl-action-secondary-bg: #122236;
  --mdl-action-secondary-text: #7DE0E6;
  --mdl-action-border: #20B8C5;
  --mdl-action-focus: #7DE0E6;
}

/* Primary actions: page families already present in MDL. */
a.mdl-btn-primary,
button.mdl-btn-primary,
a.mdl-button-primary,
button.mdl-button-primary,
a.da-primary,
button.da-primary,
a.btn.primary,
button.btn.primary,
button#mhcPredictBtn,
button#peptideAnalyzeBtn,
button#peptideDesignBtn,
button#designBtn {
  background-color: var(--mdl-action-bg) !important;
  border-color: var(--mdl-action-bg) !important;
  color: var(--mdl-action-text) !important;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease;
}
a.mdl-btn-primary:hover,
button.mdl-btn-primary:hover,
a.mdl-button-primary:hover,
button.mdl-button-primary:hover,
a.da-primary:hover,
button.da-primary:hover,
a.btn.primary:hover,
button.btn.primary:hover,
button#mhcPredictBtn:hover,
button#peptideAnalyzeBtn:hover,
button#peptideDesignBtn:hover,
button#designBtn:hover {
  background-color: var(--mdl-action-hover) !important;
  border-color: var(--mdl-action-hover) !important;
  color: var(--mdl-action-text) !important;
}

/* Secondary actions: clear outline; intentionally not filled. */
a.mdl-btn-secondary,
button.mdl-btn-secondary,
a.mdl-button-secondary,
button.mdl-button-secondary,
a.da-secondary,
button.da-secondary,
a.btn.secondary,
button.btn.secondary {
  background-color: var(--mdl-action-secondary-bg) !important;
  border-color: var(--mdl-action-border) !important;
  color: var(--mdl-action-secondary-text) !important;
  text-decoration: none;
}
a.mdl-btn-secondary:hover,
button.mdl-btn-secondary:hover,
a.mdl-button-secondary:hover,
button.mdl-button-secondary:hover,
a.da-secondary:hover,
button.da-secondary:hover,
a.btn.secondary:hover,
button.btn.secondary:hover {
  border-color: var(--mdl-action-hover) !important;
  color: var(--mdl-action-secondary-text) !important;
}

/* An explicitly active secondary action looks like a primary action. */
button.da-secondary.is-active,
button.mdl-btn-secondary.is-active,
button.btn.secondary.is-active,
button.btn.secondary[aria-pressed="true"] {
  background-color: var(--mdl-action-bg) !important;
  border-color: var(--mdl-action-bg) !important;
  color: var(--mdl-action-text) !important;
}

/* Disabled controls must never look enabled. */
a.mdl-btn-primary[aria-disabled="true"],
button.mdl-btn-primary:disabled,
button.mdl-button-primary:disabled,
button.da-primary:disabled,
button.btn.primary:disabled,
button#mhcPredictBtn:disabled,
button#peptideAnalyzeBtn:disabled,
button#peptideDesignBtn:disabled,
button#designBtn:disabled {
  opacity: .5 !important;
  cursor: not-allowed !important;
}

/* Visible keyboard focus on styled actions. */
a.mdl-btn-primary:focus-visible,
button.mdl-btn-primary:focus-visible,
a.mdl-button-primary:focus-visible,
button.mdl-button-primary:focus-visible,
a.da-primary:focus-visible,
button.da-primary:focus-visible,
a.btn.primary:focus-visible,
button.btn.primary:focus-visible,
a.mdl-btn-secondary:focus-visible,
button.mdl-btn-secondary:focus-visible,
a.da-secondary:focus-visible,
button.da-secondary:focus-visible,
a.btn.secondary:focus-visible,
button.btn.secondary:focus-visible {
  outline: 3px solid var(--mdl-action-focus) !important;
  outline-offset: 2px;
}
/* MDL_SHARED_BUTTON_PALETTE_V1_END */

/* MDL_SECONDARY_GHOST_BUTTONS_V2_START */
/* Visual-only harmonization. Scoped to main content, not header/sidebar/Guide.
   Previous primary, danger, active-tab and scientific behavior stay unchanged. */
:root {
  --mdl-secondary-hover-bg: #E9F5F7;
  --mdl-secondary-hover-border: #095F68;
}
html[data-theme="dark"] {
  --mdl-secondary-hover-bg: #173348;
  --mdl-secondary-hover-border: #58CDD5;
}

/* Ghost = secondary visual language, including Load research example. */
body main .btn.ghost,
body main .btn.secondary,
body main .da-secondary,
body main .mdl-btn-secondary,
body main .mdl-button-secondary {
  background-color: var(--mdl-action-secondary-bg, #FFFFFF) !important;
  color: var(--mdl-action-secondary-text, #0B7480) !important;
  border: 1px solid var(--mdl-action-border, #0B7480) !important;
  border-radius: 7px !important;
  box-shadow: none !important;
  text-decoration: none !important;
  font-weight: 650 !important;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* Standard-size controls; leave explicit small / mini variants compact. */
body main button.btn.ghost:not(.sm):not(.mini),
body main a.btn.ghost:not(.sm):not(.mini),
body main button.btn.secondary:not(.sm):not(.mini),
body main a.btn.secondary:not(.sm):not(.mini) {
  min-height: 38px !important;
  padding: 8px 14px !important;
}

body main .btn.ghost:not(:disabled):not([aria-disabled="true"]):hover,
body main .btn.secondary:not(:disabled):not([aria-disabled="true"]):hover,
body main .da-secondary:not(:disabled):not([aria-disabled="true"]):hover,
body main .mdl-btn-secondary:not(:disabled):not([aria-disabled="true"]):hover,
body main .mdl-button-secondary:not(:disabled):not([aria-disabled="true"]):hover {
  background-color: var(--mdl-secondary-hover-bg) !important;
  border-color: var(--mdl-secondary-hover-border) !important;
  color: var(--mdl-action-secondary-text, #0B7480) !important;
}

body main .btn.ghost:focus-visible,
body main .btn.secondary:focus-visible,
body main .da-secondary:focus-visible,
body main .mdl-btn-secondary:focus-visible,
body main .mdl-button-secondary:focus-visible {
  outline: 3px solid var(--mdl-action-focus, #20B8C5) !important;
  outline-offset: 2px !important;
}

body main .btn.ghost:disabled,
body main .btn.secondary:disabled,
body main .da-secondary:disabled,
body main .mdl-btn-secondary:disabled,
body main .mdl-button-secondary:disabled,
body main .btn.ghost[aria-disabled="true"],
body main .btn.secondary[aria-disabled="true"] {
  opacity: .52 !important;
  cursor: not-allowed !important;
}

/* Explicitly selected secondary actions continue using the primary palette. */
body main .btn.secondary.is-active,
body main .btn.ghost.is-active,
body main .btn.secondary[aria-pressed="true"],
body main .da-secondary.is-active {
  background-color: var(--mdl-action-bg, #0B7480) !important;
  border-color: var(--mdl-action-bg, #0B7480) !important;
  color: var(--mdl-action-text, #FFFFFF) !important;
}
/* MDL_SECONDARY_GHOST_BUTTONS_V2_END */


/* =========================================================
   MDL_PRIMARY_BUTTON_COMPAT_V1
   Normalize legacy primary buttons across workspace/tool pages.
   ========================================================= */

.primary,
.btn.primary,
button.primary,
a.primary,
input.primary,
.mdl-button-primary,
.da-primary {
  background:#20B8C5 !important;
  background-color:#20B8C5 !important;
  color:#0B1626 !important;
  border:1px solid #20B8C5 !important;
  box-shadow:none !important;
  font-weight:700 !important;
}

.primary:hover,
.btn.primary:hover,
button.primary:hover,
a.primary:hover,
input.primary:hover,
.mdl-button-primary:hover,
.da-primary:hover {
  background:#1AA9B5 !important;
  background-color:#1AA9B5 !important;
  border-color:#1AA9B5 !important;
  color:#0B1626 !important;
}

.primary:focus-visible,
.btn.primary:focus-visible,
button.primary:focus-visible,
a.primary:focus-visible,
input.primary:focus-visible,
.mdl-button-primary:focus-visible,
.da-primary:focus-visible {
  outline:2px solid rgba(32,184,197,.38) !important;
  outline-offset:2px !important;
}

.primary:disabled,
.btn.primary:disabled,
button.primary:disabled,
input.primary:disabled,
.mdl-button-primary:disabled,
.da-primary:disabled {
  opacity:.5 !important;
  cursor:not-allowed !important;
}

.secondary,
.btn.secondary,
button.secondary,
a.secondary,
.ghost,
.btn.ghost,
button.ghost {
  background:#FFFFFF !important;
  background-color:#FFFFFF !important;
  color:#0B7480 !important;
  border:1px solid #B8C8D3 !important;
  box-shadow:none !important;
}

.secondary:hover,
.btn.secondary:hover,
button.secondary:hover,
a.secondary:hover,
.ghost:hover,
.btn.ghost:hover,
button.ghost:hover {
  background:#F4F7F8 !important;
  border-color:#20B8C5 !important;
  color:#0B7480 !important;
}

html[data-theme="dark"] .secondary,
html[data-theme="dark"] .btn.secondary,
html[data-theme="dark"] button.secondary,
html[data-theme="dark"] a.secondary,
html[data-theme="dark"] .ghost,
html[data-theme="dark"] .btn.ghost,
html[data-theme="dark"] button.ghost {
  background:#122236 !important;
  color:#8FE4EA !important;
  border-color:#657C93 !important;
}