body {
    overflow-y: scroll;
}

/* --------------------------------------------------------------------------
   Flex shrink utilities.

   `min-w-0` and `min-h-0` are used ~60 times across these templates and modules,
   and Bootstrap 5.3 does not ship either — so until now every one of them was an
   inert class name. A flex item defaults to `min-width: auto`, meaning it cannot be
   sized below its own content, which is the exact thing all sixty call sites were
   written to prevent.

   The visible cost was in Structure mode. Opening the Mol* column has to take width
   away from the plot column, but the column could not shrink below the figure already
   inside it — so it overflowed, the renderer relayouted the figure to `parent - 12px`,
   that let the column give up 12px, which let the figure shrink 12px more, and so on:
   a ratchet, one step per 120ms debounce and one full Plotly redraw per step. It took
   the better part of two minutes to converge, and read as the canvas slowly creeping
   inward. With a real `min-width: 0` the column shrinks to its flex basis at once and
   the figure is relayouted once.
   -------------------------------------------------------------------------- */
.min-w-0 {
    min-width: 0 !important;
}
.min-h-0 {
    min-height: 0 !important;
}

/* Feature table (Summary visual) */
.summary-ft-pill {
    font-size: 0.72rem !important;
    vertical-align: middle;
}
.summary-ft-site-pill {
    font-size: 0.7rem;
    font-weight: 600;
}
table.summary-feature-dt td {
    vertical-align: middle;
}

.summary-focus-tb-mini .summary-tb-letter {
    font-size: 0.68rem;
    min-width: 1.05rem;
    line-height: 1.15;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/*Table */
.scrollable{
    max-height: 200px;
    overflow-y: scroll;
}

/* slider */

.slidecontainer {
    width: 100%; /* Width of the outside container */
    height: 100%;
}


.sticky {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 100;
  border-top: 0;
}


/* brusharea */
.brusharea {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


/*padding*/
.padding{
    padding-bottom: 2rem;
}
/*--- Bootstrap Padding Fix --*/
[class*="col-"] {
    padding: 1rem;
}
/*Footer*/
footer {
    background-color:#41464b;
    color: #b6d4fe;
    padding-top: 2rem;
}
hr.light{
    border-top: 1px solid #b6d4fe;
    width: 100%;
    margin-top: .8rem;
    margin-bottom: 1rem;
}

/*Sequence*/
#sequence {
  width: 1600px;
  height: 50px;
  overflow-x: auto;
  overflow: hidden;
  position: center;
}
#sequencenumber {
  width: 1600px;
  height: 50px;
  overflow-x: auto;
  overflow: hidden;
  position: center;
}


/*Datatable*/
.featureContainer {
    display: flex;
    justify-content: space-between;
    width: 100%;
    float: left;
    overflow: hidden;
    padding: 10px 0px 0px 0px;
    margin: 5px 0px 0px 0px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.labelContainer {
    width: 200px;
    float: left;
    left: 0px;
    overflow: hidden;
    padding: 0px;
    margin: 0px;
    background: var(--bs-body-bg);
    z-index: 10;
    display: inline;
}

.labelContainer, .structureContainer {
    flex-shrink: 0;
    /* other styles... */
}

#resizer {
    cursor: col-resize; /* display a resize cursor when over the draggable area */
    width: 5px;
    margin-bottom: 20px;
    margin-top: 20px;
    background: #ccc; /* color of draggable area */
}

.dataContainer {
    flex-grow: 1;
    overflow: auto;
}

.structureContainer {
    width: 30%; /* Adjust as needed */
    overflow: auto;
    flex-grow: 1; /* allow this div to grow */
}

.viewerSection {
    margin: 120px 0 0 0;
}

.summary-viewer-section {
    min-height: 280px;
}

#pdb_structure {
    position: relative;
    min-height: 280px;
    min-width: 200px;
}

.onerowdiv {
    height: 23px;
}
/*.helpContainer {*/
/*    float: left;*/
/*    left: 0px;*/
/*    overflow: hidden;*/
/*    padding-top: 10px;*/
/*    margin-top: 5px;*/
/*    background: white;*/
/*    z-index: 10;*/
/*    display: inline;*/
/*}*/
.dataContainer {
    padding: 0px;
    margin: 0px;
    overflow: auto;
    overflow: hidden;
    background: var(--bs-tertiary-bg);
    touch-action: none;
}
/*innerclasses*/
.featureType{
    padding: 1px;
    margin: 2px;
    background: var(--bs-tertiary-bg);
    border-radius: 5px;
}
.featureHelp{
    padding: 1px;
    margin: 2px;
    background: var(--bs-tertiary-bg);
    border-radius: 5px;
}
p {
    margin: 0;
}
/*Dataclasses*/

.empty{
    padding: 1px;
    margin: 2px;
}

.tablecontainer{
    padding-top: 1px;
    padding-bottom: 1px;
}

.wrapper{
    width: 600px;
    height: 30px;
    white-space: nowrap;
    font-size:0;
}

.single-block{
   width:20px;
   height:100%;
   display:inline-block;
   vertical-align:bottom;
   font-size:16px;
}
.red{
    background-color:red;
    position:relative;
}
.green {
    background-color:green;
}

/* Loader */

.no-scroll {
   overflow: hidden;
}

/*.loader {*/

/*}*/

.loader {
    width: 100%;
    min-height: 95%;
    position: absolute;
    top: 65px ;
    left: 0;
    background-color: white;
    z-index: 100;
    display: flex;
}

.spinner {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    position: relative;
    animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  align-self: center;
}

.disorderedblocks {
    height: 15px;
    width: 6px;
    font-family: 'Courier New', Courier, monospace;
}


/* Off Canvas */


/* off canvas */
.offcanvas-btn {
  left: 420px;
  visibility: visible;
}

/* optional junk to toggle the button text */
.offcanvas-btn span:last-child,
.offcanvas.show .offcanvas-btn span:first-child {
  display: none;
}

.offcanvas.show .offcanvas-btn span:last-child {
  display: inline;
}


@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}


.shadow_card{
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    padding: 0.75rem 1rem;
    border-radius: 0.65rem;
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.06);
}
[data-bs-theme="dark"] .shadow_card {
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.35);
}

/* Add to your stylesheet so that the index is rendered above the residues on the right */
.line {
  margin-bottom: 4px;
    margin-right: 10px ;
}



.idx-row {
  text-align: right;
  font-weight: bold;
    /*user-select: none;*/
  font-size: 0.9em;
  color: var(--bs-secondary-color);
}

.residue-row .residue {
  /*display: inline-block;*/
  /*width: 1em;*/
  font-size: 1em;
  text-align: center;
  font-family: monospace;
  color: var(--bs-body-color);
}


/* When a residue has been “drag‐selected”, we give it a yellow background: */
.residue::selection {
  background-color: rgba(255, 255, 0, 0.6);
}

.idx::selection {
  background-color: transparent;
  color: inherit;
}

/* —— Summary visual refresh (toolbar, layout, loader) —— */
.summary-focus-toolbar {
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
}

/* Single-row toolbar: Focus annotation + track controls share one panel */
.summary-visual-toolbar-unified {
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
}

.summary-visual-toolbar-unified .summary-focus-toolbar-inner {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
}

/* Summary page hero: one compact card for protein + links */
.summary-page-hero-card .card-body {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.summary-page-hero-card #visuallink .btn {
    white-space: nowrap;
}

/* Focus strip: keep select + badges on one line; allow horizontal scroll if needed */
#color_selector_container .summary-focus-toolbar-inner {
    flex-wrap: nowrap;
}

/* Track column key (G/D/O/M/C/P) in Tracks card header */
.summary-tracks-header-legend {
    font-size: 0.78rem;
    line-height: 1.4;
    max-width: 100%;
}

@media (min-width: 1200px) {
    .summary-tracks-header-legend {
        font-size: 0.8rem;
        max-width: min(52rem, 100%);
    }
}

.summary-sequence-card {
    min-height: 0;
}

.summary-sequence-panel {
    max-height: 100px;
    overflow-y: auto;
    overflow-x: auto;
    padding: 0.35rem 0.5rem;
    position: relative;
}

#sequence_viewer {
    flex-wrap: nowrap;
    min-width: min-content;
}

/* DataTables: column filters = second thead row (scrollX must stay off) */
table.dataTable thead tr.dt-col-filters th {
    border-top: 0;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    vertical-align: middle;
    font-weight: normal;
}

.summary-visual-toolbar-row #color_selector_container > .summary-focus-toolbar-inner,
.summary-visual-toolbar-row #external-annotation-labels > .summary-focus-toolbar-inner {
    min-width: 0;
}

/* Visual settings: top row = view mode, second row = controls */
.summary-visual-external-controls {
    flex-wrap: nowrap;
}
.summary-visual-toolbar-row--view {
    scrollbar-width: thin;
}
.summary-visual-toolbar-row--controls {
    scrollbar-width: thin;
    border-top: 1px solid var(--bs-border-color-translucent, var(--bs-border-color));
    margin-top: 0.45rem;
    justify-content: flex-start;
}
.summary-visual-toolbar-row--view,
.summary-visual-toolbar-row--controls {
    width: calc(100% + 0.5rem) !important;
    margin-left: -0.25rem;
    margin-right: -0.25rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}
@media (min-width: 768px) {
    .summary-visual-toolbar-row--view,
    .summary-visual-toolbar-row--controls {
        width: calc(100% + 0.7rem) !important;
        margin-left: -0.35rem;
        margin-right: -0.35rem;
        padding-left: 0.35rem;
        padding-right: 0.35rem;
    }
}
.summary-visual-toolbar-row--controls #external-annotation-labels {
    justify-content: flex-start;
    width: max-content;
    min-width: max-content;
    flex-shrink: 0;
}
.summary-visual-external-controls .summary-visual-control-chip {
    flex-shrink: 0;
    border: 1px solid var(--bs-border-color-translucent, var(--bs-border-color));
    border-radius: 0.65rem;
    padding: 0.34rem 0.5rem 0.36rem;
    background: linear-gradient(
        180deg,
        rgba(var(--bs-body-bg-rgb), 0.98),
        rgba(var(--bs-body-bg-rgb), 0.88)
    );
    box-shadow: 0 0.08rem 0.28rem rgba(0, 0, 0, 0.06);
    min-width: 0;
    max-width: min(100%, 17rem);
}
.summary-visual-external-controls .summary-visual-control-chip label.small.text-secondary {
    margin-bottom: 0;
}
.summary-visual-control-title-badge {
    font-size: 0.67rem !important;
    letter-spacing: 0.02em;
    font-weight: 700 !important;
    padding: 0.18rem 0.48rem !important;
    line-height: 1.15 !important;
    border-width: 1px;
}
.summary-visual-external-controls .summary-visual-control-chip--cancer {
    max-width: min(100%, 42rem);
}
.summary-cancer-inline-form {
    overflow-x: auto;
    padding-bottom: 0.05rem;
    min-height: 2rem;
}
.summary-cancer-inline-form .summary-cancer-inline-field {
    flex: 0 0 auto;
    min-width: 9.1rem;
}
.summary-cancer-inline-form .summary-cancer-inline-field--wide {
    min-width: 11.6rem;
}
[data-bs-theme="dark"] .summary-visual-external-controls .summary-visual-control-chip {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    box-shadow: 0 0.12rem 0.45rem rgba(0, 0, 0, 0.28);
}
.summary-visual-external-controls .summary-visual-control-select {
    border-radius: 0.42rem;
    min-height: 1.95rem;
    font-size: 0.84rem;
}
.summary-visual-external-controls .summary-visual-control-badges .summary-focus-tb-mini {
    line-height: 1;
}
.summary-visual-external-controls .summary-visual-control-badges .summary-tb-letter {
    font-size: 0.62rem;
    padding: 0.04rem 0.18rem;
}

/* --- Visual settings: control-row grouping ------------------------------- *
 * The controls row is a single horizontal scroller of chips. Without dividers
 * it reads as one undifferentiated strip, so related chips get a labelled
 * group and a hairline separator.
 * ------------------------------------------------------------------------ */
.summary-visual-external-controls .summary-control-group {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
    flex-shrink: 0;
    padding-left: 0.6rem;
    position: relative;
}
.summary-visual-external-controls .summary-control-group + .summary-control-group::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.35rem;
    bottom: 0.35rem;
    border-left: 1px solid var(--bs-border-color-translucent, var(--bs-border-color));
}
.summary-visual-external-controls .summary-control-group-label {
    align-self: center;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bs-secondary-color, #6c757d);
    white-space: nowrap;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    opacity: 0.75;
}

/* MAVE chip: dropdown trigger has to line up with the <select> chips beside it. */
.summary-visual-external-controls .summary-visual-control-chip .dropdown-toggle {
    border-radius: 0.42rem;
    min-height: 1.95rem;
    font-size: 0.84rem;
    background: var(--bs-body-bg);
}
/* Body-level fixed panel (see maveSetToggles.js). The controls row is
   `overflow-x: auto`, and per spec that forces overflow-y to `auto` as well, so any
   menu rendered inside the row is clipped vertically regardless of z-index. The menu
   is therefore appended to <body> and positioned against the trigger. */
.summary-mave-menu {
    font-size: 0.85rem;
    z-index: 1080;
}
.summary-mave-menu li .form-check-label {
    cursor: pointer;
    max-width: 15rem;
}
.summary-mave-menu li:hover:not(.border-bottom) {
    background: var(--bs-tertiary-bg, rgba(0, 0, 0, 0.04));
}
.summary-mave-menu .btn-link {
    text-decoration: none;
}

/* Settings card: make the two rows read as distinct bands. */
.summary-visual-toolbar-card .card-header {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}
.summary-visual-toolbar-row--controls::-webkit-scrollbar,
.summary-visual-toolbar-row--view::-webkit-scrollbar {
    height: 6px;
}
.summary-visual-toolbar-row--controls::-webkit-scrollbar-thumb,
.summary-visual-toolbar-row--view::-webkit-scrollbar-thumb {
    background: var(--bs-border-color);
    border-radius: 3px;
}

.summary-stats-sidebar {
    top: 74px;
    max-height: calc(100vh - 92px);
    overflow: auto;
    padding: 0.35rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.55rem;
    background: var(--bs-body-bg);
}
.summary-page header.discanvis-site-header.sticky-top {
    position: static;
    top: auto;
}
.summary-page .summary-stats-sidebar {
    top: 12px;
    max-height: calc(100vh - 24px);
}
.summary-stats-sidebar .summary-stats-nav .list-group-item {
    border-radius: 0.4rem;
    margin-bottom: 0.2rem;
    border-color: var(--bs-border-color);
}
.summary-stats-sidebar .summary-stats-nav .list-group-item:focus,
.summary-stats-sidebar .summary-stats-nav .list-group-item:hover {
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}
.summary-stats-sidebar .summary-stats-nav .list-group-item.active {
    background: color-mix(in srgb, var(--bs-primary) 14%, var(--bs-body-bg));
    color: var(--bs-body-color);
    border-color: color-mix(in srgb, var(--bs-primary) 45%, var(--bs-border-color));
    box-shadow: inset 3px 0 0 var(--bs-primary);
    font-weight: 600;
}
.summary-stats-root section[id^="stats-section-"] {
    scroll-margin-top: 92px;
}

.clinical-view-sidebar {
    top: 12px;
    max-height: calc(100vh - 24px);
    overflow: auto;
    padding: 0.35rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.55rem;
    background: var(--bs-body-bg);
}
.clinical-view-sidebar .clinical-view-nav .list-group-item {
    border-radius: 0.4rem;
    margin-bottom: 0.2rem;
    border-color: var(--bs-border-color);
}
.clinical-view-sidebar .clinical-view-nav .list-group-item:focus,
.clinical-view-sidebar .clinical-view-nav .list-group-item:hover {
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}
.clinical-view-sidebar .clinical-view-nav .list-group-item.active {
    background: color-mix(in srgb, var(--bs-primary) 14%, var(--bs-body-bg));
    color: var(--bs-body-color);
    border-color: color-mix(in srgb, var(--bs-primary) 45%, var(--bs-border-color));
    box-shadow: inset 3px 0 0 var(--bs-primary);
    font-weight: 600;
}
.clinical-view-root section[id^="clinical-section-"] {
    scroll-margin-top: 92px;
}
.clinical-plot-settings-card .clinical-settings-advanced.collapse:not(.show) {
    display: none;
}

.summary-viewer-section .molstar-structure-status {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    box-sizing: border-box;
}

.summary-structure-card .viewerSection {
    margin-top: 0;
}

.summary-viewer-section {
    overflow: hidden;
    position: relative;
    isolation: isolate;
}

.summary-viewer-section #pdb_structure {
    min-height: 420px;
    height: min(520px, 65vh);
    overflow: hidden;
}

/* Mol* expanded: `.msp-layout-expanded` on plugin content (PDBe 3.1.x). Legacy CSS also mentions
   `.msp-viewport-expanded`; match both. Ancestor overflow:hidden clips fixed layout → overlap bugs. */
.summary-visual-root.summary-molstar-viewport-expanded .summary-viewer-section,
.summary-visual-root.summary-molstar-viewport-expanded .summary-structure-card .card-body,
.summary-visual-root.summary-molstar-viewport-expanded .summary-viewer-section #pdb_structure {
    overflow: visible;
}

.summary-visual-root.summary-molstar-viewport-expanded .summary-viewer-section,
body.summary-molstar-viewport-expanded .summary-viewer-section {
    /* Let fixed Mol* layout compete at page stacking level, not inside an isolated subtree. */
    isolation: auto;
}

/* Hide exact offenders while Mol* viewport is expanded (Header.html loads after this file → !important). */
.summary-ui-hidden-for-molstar-expanded,
body:has(#pdb_structure :is(.msp-layout-expanded, .msp-viewport-expanded)) header.discanvis-site-header.sticky-top,
body.summary-molstar-viewport-expanded header.discanvis-site-header.sticky-top,
body:has(#pdb_structure :is(.msp-layout-expanded, .msp-viewport-expanded)) #summary-visual-mode-structure,
body.summary-molstar-viewport-expanded #summary-visual-mode-structure {
    visibility: hidden !important;
    pointer-events: none !important;
}

body:has(#pdb_structure :is(.msp-layout-expanded, .msp-viewport-expanded)) #main-header-navbar,
body.summary-molstar-viewport-expanded #main-header-navbar {
    z-index: 0 !important;
}

body:has(#pdb_structure :is(.msp-layout-expanded, .msp-viewport-expanded)) .summary-visual-toolbar-card,
body.summary-molstar-viewport-expanded .summary-visual-toolbar-card {
    visibility: hidden !important;
    pointer-events: none !important;
}

body:has(#pdb_structure :is(.msp-layout-expanded, .msp-viewport-expanded)) .summary-visual-mode-group > .btn,
body.summary-molstar-viewport-expanded .summary-visual-mode-group > .btn {
    z-index: 0 !important;
    transform: none !important;
    isolation: auto !important;
}

/* Expanded plugin shell is position:fixed but stacks below site header unless z-index + inset are forced. */
body:has(#pdb_structure :is(.msp-layout-expanded, .msp-viewport-expanded))
    #pdb_structure
    :is(.msp-layout-expanded, .msp-viewport-expanded),
body.summary-molstar-viewport-expanded
    #pdb_structure
    :is(.msp-layout-expanded, .msp-viewport-expanded) {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    z-index: 2100 !important;
}

.summary-visual-main-row .min-h-plot {
    min-height: 0;
}

.summary-page-loader {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--bs-body-bg-rgb, 255, 255, 255), 0.92);
    backdrop-filter: blur(6px);
    transition: opacity 0.25s ease;
}

[data-bs-theme="dark"] .summary-page-loader {
    background: rgba(var(--bs-body-bg-rgb, 33, 37, 41), 0.94);
}

.summary-page-loader.d-none {
    pointer-events: none;
    opacity: 0;
}

.summary-page-loader-inner {
    text-align: center;
    padding: 2rem;
    border-radius: 1rem;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.12);
}

.summary-page-loader-inner.text-start {
    text-align: start;
}

.summary-loader-steps-scroll {
    scrollbar-width: thin;
}

[data-bs-theme="dark"] .summary-page-loader-inner {
    box-shadow: 0 0.5rem 1.75rem rgba(0, 0, 0, 0.45);
}

#summary-badge-rows .badge {
    max-width: 100%;
    white-space: normal;
    text-align: start;
    line-height: 1.25;
}

.summary-badge-section {
    background: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color) !important;
}

/* Clinical “In silico & annotation context”: avoid washed-out badges on tinted cards */
.mutation-context-badges .mutation-context-badge {
    opacity: 1 !important;
    filter: none !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

/* First-open lazy Summary tabs: show that work is in progress */
.summary-tab-lazy-loading {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background-color: rgba(var(--bs-body-bg-rgb, 255, 255, 255), 0.93);
    pointer-events: none;
}

[data-bs-theme="dark"] .summary-tab-lazy-loading {
    background-color: rgba(var(--bs-body-bg-rgb, 33, 37, 41), 0.94);
}

.summary-tab-lazy-loading-card {
    pointer-events: auto;
    max-width: 22rem;
}

.summary-track-visibility-toggle .summary-track-visibility-chevron {
    transition: transform 0.2s ease;
}

.summary-track-visibility-toggle[aria-expanded="true"] .summary-track-visibility-chevron {
    transform: rotate(180deg);
}

.summary-track-header-control {
    height: 2rem;
    display: inline-flex;
    align-items: center;
    padding: 0 0.15rem;
}

/* Header controls in Tracks card: unify sizes with btn-sm */
#summary-main-plot-header-controls .form-check-input {
    width: 2.25em;
    height: 1.25em;
    margin-top: 0 !important;
}
#summary-main-plot-header-controls .form-check-label {
    margin-bottom: 0 !important;
    line-height: 1.1;
}
#summary-track-visibility-toggle.btn.btn-sm {
    height: 2rem;
}

/* Track visibility (grouped, compact chips) */
.summary-track-visibility-group-box {
    padding: 0.55rem 0.55rem;
    border: 1px solid var(--bs-border-color-translucent, var(--bs-border-color));
    border-radius: 0.6rem;
    background: rgba(var(--bs-body-bg-rgb, 255, 255, 255), 0.55);
}
[data-bs-theme="dark"] .summary-track-visibility-group-box {
    background: rgba(var(--bs-body-bg-rgb, 33, 37, 41), 0.32);
}
.summary-track-visibility-group-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bs-secondary-color, #6c757d);
    margin-bottom: 0.15rem;
}
.summary-track-visibility-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border-radius: 0.55rem;
    padding: 0.25rem 0.35rem;
    background: rgba(var(--bs-tertiary-bg-rgb, 248, 249, 250), 0.55);
    cursor: pointer;
    user-select: none;
}
.summary-track-visibility-chip .form-check-input {
    margin-top: 0 !important;
}
.summary-track-visibility-chip .summary-tb-track-pill {
    font-size: 0.78rem !important;
    line-height: 1.1;
    padding: 0.18rem 0.45rem !important;
    max-width: 12.5rem;
}

/* Keep Plotly under the absolute loading layer (sibling painted later). */
.summary-main-plot-surface {
    position: relative;
    z-index: 0;
}

/* While tracks render: dim the Plotly surface so loading reads clearly under the overlay. */
.summary-plot-area-busy #main_plot_div {
    opacity: 0.58;
    filter: grayscale(0.12);
    transition: opacity 0.18s ease, filter 0.18s ease;
}

.summary-tracks-loading {
    position: absolute;
    inset: 0;
    /* Above Plotly, below everything outside this card. It used to sit at 1060, over the
       sticky settings panel (1030) — so re-rendering with Settings open dimmed the very
       controls you were using. It only ever needs to cover the plot beneath it. */
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    background: rgba(var(--bs-body-bg-rgb, 255, 255, 255), 0.55);
    backdrop-filter: blur(2px);
}
[data-bs-theme="dark"] .summary-tracks-loading {
    background: rgba(var(--bs-body-bg-rgb, 33, 37, 41), 0.55);
}
[data-bs-theme="dark"] .summary-plot-area-busy #main_plot_div {
    opacity: 0.52;
}
.summary-tracks-loading-inner {
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--bs-border-color);
    background: rgba(var(--bs-body-bg-rgb, 255, 255, 255), 0.85);
    box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.08);
}
[data-bs-theme="dark"] .summary-tracks-loading-inner {
    background: rgba(var(--bs-body-bg-rgb, 33, 37, 41), 0.85);
    box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.35);
}

/* Unified Visual mode toggles: inactive outline must never read as “blank white” during heavy Plotly work. */
.summary-visual-mode-group > .btn.btn-outline-primary:not(.active) {
    background-color: rgba(var(--bs-primary-rgb), 0.07);
    border-color: rgba(var(--bs-primary-rgb), 0.42);
    /* Darker than --bs-primary so label + icons stay readable after losing .active (was filled / white text). */
    --bs-btn-color: var(--bs-primary-text-emphasis, #084298);
    color: var(--bs-btn-color);
    opacity: 1;
}
.summary-visual-mode-group > .btn.btn-outline-primary:not(.active) .material-symbols-outlined {
    color: inherit;
    opacity: 1;
}
.summary-visual-mode-group > .btn.btn-outline-primary:not(.active):hover {
    background-color: rgba(var(--bs-primary-rgb), 0.12);
    border-color: rgba(var(--bs-primary-rgb), 0.55);
    --bs-btn-color: var(--bs-primary-text-emphasis, #084298);
    color: var(--bs-btn-color);
}
.summary-visual-mode-group--plot-busy > .btn.btn-outline-primary:not(.active) {
    background-color: rgba(var(--bs-primary-rgb), 0.1);
    border-color: rgba(var(--bs-primary-rgb), 0.5);
    --bs-btn-color: var(--bs-primary-text-emphasis, #084298);
    color: var(--bs-btn-color);
    /* Own compositing layer so the control repaints even when the main thread is busy with Plotly */
    isolation: isolate;
    transform: translateZ(0);
    backface-visibility: hidden;
}
[data-bs-theme="dark"] .summary-visual-mode-group > .btn.btn-outline-primary:not(.active) {
    background-color: rgba(var(--bs-primary-rgb), 0.14);
    border-color: rgba(var(--bs-primary-rgb), 0.45);
    /* Keep body-like contrast on dark (primary alone can read as washed on tinted bg). */
    --bs-btn-color: var(--bs-body-color);
    color: var(--bs-btn-color);
}
[data-bs-theme="dark"] .summary-visual-mode-group > .btn.btn-outline-primary:not(.active):hover {
    --bs-btn-color: var(--bs-body-color);
    color: var(--bs-btn-color);
}
[data-bs-theme="dark"] .summary-visual-mode-group--plot-busy > .btn.btn-outline-primary:not(.active) {
    background-color: rgba(var(--bs-primary-rgb), 0.18);
    --bs-btn-color: var(--bs-body-color);
    color: var(--bs-btn-color);
}

.summary-visual-toolbar-card .card-body,
.summary-sequence-card .card-header,
.summary-plot-main-card .card-header,
.summary-structure-card .card-header,
.summary-feature-table-card .card-header {
    border-color: var(--bs-border-color-translucent, var(--bs-border-color));
}

.summary-visual-main-row .summary-plot-main-card,
.summary-visual-main-row .summary-structure-card {
    min-height: 0;
}

/* Structure focus: two-column layout — keep Plotly + badge strip inside the card (avoid ~tens of px horizontal bleed) */
@media (min-width: 1200px) {
    .summary-visual-main-row .summary-visual-plot-col.col-xl-8 {
        max-width: 100%;
        overflow-x: clip;
    }
    .summary-visual-main-row .summary-visual-plot-col.col-xl-8 .summary-plot-with-badges {
        max-width: 100%;
        min-width: 0;
    }
    .summary-visual-main-row .summary-visual-plot-col.col-xl-8 #main_plot_div {
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
    /* Extra gutter so Plotly’s right modebar (reset axes) stays inside the card */
    .summary-visual-main-row .summary-visual-plot-col.col-xl-8 .flex-grow-1.min-w-0.position-relative {
        padding-right: 0.35rem;
    }
}

@media (min-width: 1200px) {
    .summary-visual-main-row .summary-plot-main-card {
        min-height: 0;
    }
}

.summary-plot-with-badges {
    min-height: 0;
}

.summary-tb-track-pill {
    display: inline-block;
    text-align: left;
    width: 100%;
}

/* Letter pills: explicit colors (Bootstrap / theme must not flatten these) */
.summary-tb-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.2rem;
    font-size: 0.68rem;
    line-height: 1;
    border: 1px solid rgba(0, 0, 0, 0.14);
    box-sizing: border-box;
}

.summary-tb-lvl-G {
    background: #6c757d !important;
    color: #fff !important;
}
.summary-tb-lvl-D {
    background: #dc3545 !important;
    color: #fff !important;
}
.summary-tb-lvl-O {
    background: #0d6efd !important;
    color: #fff !important;
}
/* Mixed protein context: ordered (blue) vs disorder (red) split */
.summary-tb-lvl-M {
    background: linear-gradient(135deg, #0d6efd 48%, #dc3545 48%) !important;
    color: #fff !important;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.45);
}

.summary-tb-typ-C {
    background: #198754 !important;
    color: #fff !important;
}
.summary-tb-typ-P {
    background: #ffc107 !important;
    color: #212529 !important;
}

/*
 * "?" help chip — shares geometry + border with the badge letters so the column reads as
 * a coherent strip of square chips (G/D/O/M + C/P + ?) instead of a stray text glyph.
 */
.summary-tb-help {
    background: var(--bs-body-bg) !important;
    color: var(--bs-secondary-color) !important;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.summary-tb-help:hover,
.summary-tb-help:focus-visible {
    background: var(--bs-secondary-bg) !important;
    color: var(--bs-body-color) !important;
    border-color: rgba(0, 0, 0, 0.28) !important;
    outline: none;
}
[data-bs-theme="dark"] .summary-tb-help {
    color: rgba(255, 255, 255, 0.65) !important;
}
[data-bs-theme="dark"] .summary-tb-help:hover,
[data-bs-theme="dark"] .summary-tb-help:focus-visible {
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.38) !important;
}

[data-bs-theme="dark"] .summary-tb-letter {
    border-color: rgba(255, 255, 255, 0.22);
}

.summary-tb-title {
    font-weight: 500;
    font-size: 0.72rem;
    line-height: 1.2;
    color: var(--bs-body-color);
}

.summary-tb-aa-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.04rem 0.12rem;
    font-size: 0.55rem;
    line-height: 1.1;
    margin-top: 0.12rem;
    color: var(--bs-secondary-color);
    max-height: 2.6em;
    overflow: hidden;
}

.summary-tb-aa-ch {
    flex: 0 0 auto;
}

.summary-tb-subtracks {
    margin-top: 0.1rem;
    max-height: 4.5rem;
    overflow-y: auto;
    font-size: 0.58rem;
    line-height: 1.15;
    color: var(--bs-secondary-color);
}

.summary-tb-subtrack-name {
    max-width: 100%;
}

.summary-track-help-btn:hover,
.summary-track-help-btn:focus-visible {
    color: var(--bs-primary) !important;
}

.summary-track-help-head {
    font-weight: 700;
    opacity: 0.55;
}

.summary-tb-row-section {
    background: rgba(var(--bs-secondary-rgb, 108, 117, 125), 0.08);
}

.summary-tb-row-subtrack {
    border-left: 2px solid rgba(var(--bs-primary-rgb, 13, 110, 253), 0.35);
    padding-left: 2px;
}

/*
 * Compact sub-row variant — used for Cancer / Disease sub-tracks where the rows are only
 * 12-15 px tall. Strips the badge column down to: subtle left accent, color dot (Disease
 * only), short title text, "?" chip. No pill outline that would get clipped at this height.
 */
.summary-tb-row-subtrack-compact {
    border-left-width: 3px;
    padding-left: 4px;
    gap: 0.25rem !important;
    align-items: center;
}
.summary-tb-row-subtrack-compact .summary-tb-track-pill {
    background: transparent !important;
    color: var(--bs-body-color) !important;
    border: 0 !important;
    padding: 0 !important;
    font-size: 0.68rem;
    line-height: 1.05;
    font-weight: 500;
    box-shadow: none !important;
}
.summary-tb-row-subtrack-compact .summary-tb-title-wrap {
    gap: 0 !important;
}
.summary-tb-row-subtrack-compact .summary-track-help-btn {
    min-width: 1.15rem;
    height: 1.15rem;
    font-size: 0.72rem;
}

/*
 * Swatch markers in the "type" badge slot for Cancer + Disease sub-rows.
 * Shape mimics the actual Plotly marker:
 *   .summary-tb-swatch-dot     → circle  (ClinVar markers, Missense lollipop tip)
 *   .summary-tb-swatch-square  → square  (Indel/Frameshift blocks, Significant yellow block)
 */
.summary-tb-swatch-cell {
    height: 100%;
}
.summary-tb-swatch-dot,
.summary-tb-swatch-square {
    width: 0.65rem;
    height: 0.65rem;
    display: inline-block;
    border: 1px solid rgba(0, 0, 0, 0.18);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
}
.summary-tb-swatch-square {
    border-radius: 2px;
}
[data-bs-theme="dark"] .summary-tb-swatch-dot,
[data-bs-theme="dark"] .summary-tb-swatch-square {
    border-color: rgba(255, 255, 255, 0.32);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45) inset;
}

.summary-tb-row-aa {
    border-left: 2px solid rgba(var(--bs-secondary-rgb, 108, 117, 125), 0.45);
}

.summary-tb-pill-section .summary-badge-custom,
.summary-tb-pill-section.summary-tb-track-pill {
    font-weight: 600;
    font-size: 0.7rem;
}

#pdb_structure_tab {
    min-height: 420px;
    width: 100%;
}

/* PDB inspect modal: highlight the row matching the segment the user actually clicked in the plot. */
.summary-pdb-row-selected {
    outline: 2px solid rgba(var(--bs-primary-rgb, 13, 110, 253), 0.75);
    outline-offset: -2px;
    animation: summaryPdbRowPulse 1.6s ease-out 1;
}

@keyframes summaryPdbRowPulse {
    0% {
        background-color: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.35);
    }
    100% {
        background-color: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.08);
    }
}

/* ==========================================================================
   Figure controls — command bar + collapsible panel
   --------------------------------------------------------------------------
   The settings used to occupy ~180 px permanently: a header band, a view-mode
   row and a horizontally scrolling chip row, with more controls stranded in
   the plot card's header. Now it is one 40 px bar, and everything else is in a
   single grouped panel that is closed by default.
   ========================================================================== */

.summary-visual-toolbar-card {
    position: sticky;
    top: 0;
    z-index: 1030;
    border: 1px solid var(--bs-border-color-translucent, var(--bs-border-color)) !important;
    border-radius: 0.6rem;
    overflow: visible;                /* body-level dropdowns must escape */
}

.summary-cmdbar {
    min-height: 2.5rem;
    background: var(--bs-body-bg);
    border-radius: inherit;
}
.summary-cmdbar-sep {
    width: 1px;
    align-self: stretch;
    margin: 0.25rem 0.15rem;
    background: var(--bs-border-color-translucent, var(--bs-border-color));
}

/* Mode buttons: icon always, label only where there is room. Keeps the bar to
   one line down to tablet widths without hiding what the icons mean. */
.summary-visual-mode-group .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 0.4rem;
    padding: 0.2rem 0.55rem;
    font-size: 0.82rem;
    font-weight: 500;
    border-color: transparent;
}
.summary-visual-mode-group .btn .material-symbols-outlined {
    font-size: 1.05rem;
    line-height: 1;
}
.summary-visual-mode-group .btn:not(.active) {
    color: var(--bs-secondary-color);
}
.summary-visual-mode-group .btn.active {
    box-shadow: none;
}
@media (max-width: 1199.98px) {
    .summary-cmdbar-label {
        display: none;
    }
}

.summary-settings-toggle .summary-settings-chevron {
    transition: transform 0.15s ease;
}
.summary-settings-toggle:not(.collapsed) .summary-settings-chevron {
    transform: rotate(180deg);
}

/* Mode editors: a header that stays, a body that folds away.
   ---------------------------------------------------------------------------
   These sit outside the Settings collapse because a view mode shows them, not
   the Settings button — which meant Custom view opened with two full-height
   panels stacked over the figure, and the tracks you had just imported a region
   onto were below the fold. The header keeps the name and the count; the rows
   themselves have a table of their own in the plot panel now. */
.summary-extra-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    border: 0;
    background: transparent;
    padding: 0.5rem 0.75rem;
    color: var(--bs-body-color);
    text-align: left;
}
.summary-extra-head:hover {
    background: rgba(var(--bs-secondary-rgb), 0.08);
}
.summary-extra-chevron {
    transition: transform 0.15s ease;
    color: var(--bs-secondary-color);
}
.summary-extra-head:not(.collapsed) .summary-extra-chevron {
    transform: rotate(180deg);
}

/* Panel: two columns on wide screens, one on narrow. No horizontal scroller —
   chips wrap, so nothing slides out of reach. */
.summary-settings-body {
    background: var(--bs-body-bg);
}
/* Equal-width cells that auto-fill the row and wrap. Nothing can overflow the
   card, and the controls line up in columns instead of drifting. */
/* renderDynamicControls wraps the chips in its own `.summary-visual-external-controls`
   toolbar, so the grid must live on THAT element. The outer wrapper stays a plain
   block: nesting a grid inside a grid made the toolbar a single column and pushed its
   children out of the card. */
.summary-control-grid {
    display: block;
    min-width: 0;
}
.summary-control-grid > .summary-visual-external-controls,
.summary-control-grid:not(:has(> .summary-visual-external-controls)) {
    /* renderDynamicControls stamps Bootstrap's `d-flex flex-nowrap` on the toolbar, and
       those utilities carry !important — the grid has to shout back. */
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 0.5rem;
    align-items: start;
    flex-wrap: wrap !important;
    width: auto;
    min-width: 0;
}
.summary-control-grid:empty {
    display: none;
}
/* A labelled group (e.g. Functional scores) holds two controls, so give it two cells. */
/* A labelled group holds a title plus two controls (e.g. Functional scores:
   VEP/MAVE + the score-set picker). Two cells is not enough once the set names get
   long, so it takes three and wraps internally rather than pushing past the card. */
.summary-control-grid .summary-control-group {
    grid-column: span 3;
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-width: 0;
}
.summary-control-grid .summary-control-group > .summary-visual-control-chip {
    flex: 1 1 11rem;
    min-width: 0;
}
/* The Cancer chip carries three selects (source / class / type); one cell clips the
   last one, so it gets the width of two. */
.summary-control-grid .summary-visual-control-chip--cancer {
    grid-column: span 2;
}
.summary-settings-body .summary-visual-control-chip--cancer .summary-cancer-inline-form {
    overflow: visible;
}
.summary-settings-body .summary-visual-control-chip--cancer .summary-cancer-inline-field {
    flex: 1 1 8rem;
    min-width: 0;
}
@media (max-width: 991.98px) {
    .summary-control-grid .summary-control-group {
        grid-column: 1 / -1;
    }
}
.summary-settings-section-title {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    margin-bottom: 0.5rem;
}

/* Chips inside the panel: flat, compact, no card-in-card shadows. */
/* Controls use the SAME visual language as the Visible-tracks boxes below: one
   bordered group box, and inside it compact single-line rows (title pill + control).
   The old chips stacked the pill above a full-width select, which made every control
   ~58 px tall and as wide as its longest option — the two halves of the panel read as
   two unrelated widgets. */
.summary-settings-body .summary-control-grid > .summary-visual-external-controls,
.summary-settings-body .summary-control-grid:not(:has(> .summary-visual-external-controls)) {
    padding: 0.55rem;
    border: 1px solid var(--bs-border-color-translucent, var(--bs-border-color));
    border-radius: 0.6rem;
    background: rgba(var(--bs-body-bg-rgb, 255, 255, 255), 0.55);
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.35rem 0.75rem;
}
[data-bs-theme="dark"] .summary-settings-body .summary-control-grid > .summary-visual-external-controls {
    background: rgba(var(--bs-body-bg-rgb, 33, 37, 41), 0.32);
}

.summary-settings-body .summary-visual-control-chip {
    flex-direction: row !important;
    align-items: center;
    gap: 0.45rem;
    border: 0;
    border-radius: 0.55rem;
    padding: 0.15rem 0.25rem;
    background: transparent;
    box-shadow: none;
    max-width: 100%;
    min-width: 0;
}
/* Title pill: fixed column so every control lines up on the same left edge. */
.summary-settings-body .summary-visual-control-chip > div:first-child {
    margin-bottom: 0 !important;
    /* Shrink-to-fit, not a fixed column: a fixed width wrapped the longer titles
       ("Disorder Binding") onto a second line and pushed their badges below. */
    flex: 0 0 auto;
    flex-wrap: nowrap !important;
    min-width: 0;
    max-width: 9.5rem;
    justify-content: flex-start;
}
.summary-settings-body .summary-visual-control-chip .summary-visual-control-title-badge {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.summary-settings-body .summary-visual-control-chip .form-select,
.summary-settings-body .summary-visual-control-chip .dropdown-toggle,
.summary-settings-body .summary-visual-control-chip .btn-group {
    min-width: 0 !important;
    flex: 1 1 auto;
    width: auto;
    max-width: 100%;
    font-size: 0.8rem;
}
.summary-settings-body .summary-visual-control-chip .dropdown-toggle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Cancer carries three selects; give it the full row and let them share the width. */
.summary-settings-body .summary-visual-control-chip--cancer {
    grid-column: 1 / -1;
}
.summary-settings-body .summary-visual-control-chip--cancer .summary-cancer-inline-form {
    overflow: visible;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    gap: 0.35rem;
}
.summary-settings-body .summary-visual-control-chip--cancer .summary-cancer-inline-field {
    flex: 1 1 0;
    min-width: 0;
}

/* Labelled groups (Functional scores) sit on their own row with the same rhythm. */
.summary-settings-body .summary-control-group {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    padding-left: 0;
    min-width: 0;
}
.summary-settings-body .summary-control-group::before {
    display: none;
}
.summary-settings-body .summary-control-group-label {
    writing-mode: horizontal-tb;
    transform: none;
    flex: 0 0 auto;
    align-self: center;
    font-size: 0.62rem;
    white-space: nowrap;
}
.summary-settings-body .summary-control-group > .summary-visual-control-chip {
    flex: 1 1 12rem;
    min-width: 0;
}

.summary-mave-menu {
    font-size: 0.85rem;
    z-index: 1080;
}
.summary-mave-menu li .form-check-label {
    cursor: pointer;
    max-width: 15rem;
}
.summary-mave-menu li:hover:not(.border-bottom) {
    background: var(--bs-tertiary-bg, rgba(0, 0, 0, 0.04));
}
.summary-mave-menu .btn-link {
    text-decoration: none;
}

/* Settings card: make the two rows read as distinct bands. */
.summary-visual-toolbar-card .card-header {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}
.summary-visual-toolbar-row--controls::-webkit-scrollbar,
.summary-visual-toolbar-row--view::-webkit-scrollbar {
    height: 6px;
}
.summary-visual-toolbar-row--controls::-webkit-scrollbar-thumb,
.summary-visual-toolbar-row--view::-webkit-scrollbar-thumb {
    background: var(--bs-border-color);
    border-radius: 3px;
}

.summary-stats-sidebar {
    top: 74px;
    max-height: calc(100vh - 92px);
    overflow: auto;
    padding: 0.35rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.55rem;
    background: var(--bs-body-bg);
}
.summary-page header.discanvis-site-header.sticky-top {
    position: static;
    top: auto;
}
.summary-page .summary-stats-sidebar {
    top: 12px;
    max-height: calc(100vh - 24px);
}
.summary-stats-sidebar .summary-stats-nav .list-group-item {
    border-radius: 0.4rem;
    margin-bottom: 0.2rem;
    border-color: var(--bs-border-color);
}
.summary-stats-sidebar .summary-stats-nav .list-group-item:focus,
.summary-stats-sidebar .summary-stats-nav .list-group-item:hover {
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}
.summary-stats-sidebar .summary-stats-nav .list-group-item.active {
    background: color-mix(in srgb, var(--bs-primary) 14%, var(--bs-body-bg));
    color: var(--bs-body-color);
    border-color: color-mix(in srgb, var(--bs-primary) 45%, var(--bs-border-color));
    box-shadow: inset 3px 0 0 var(--bs-primary);
    font-weight: 600;
}
.summary-stats-root section[id^="stats-section-"] {
    scroll-margin-top: 92px;
}

.clinical-view-sidebar {
    top: 12px;
    max-height: calc(100vh - 24px);
    overflow: auto;
    padding: 0.35rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.55rem;
    background: var(--bs-body-bg);
}
.clinical-view-sidebar .clinical-view-nav .list-group-item {
    border-radius: 0.4rem;
    margin-bottom: 0.2rem;
    border-color: var(--bs-border-color);
}
.clinical-view-sidebar .clinical-view-nav .list-group-item:focus,
.clinical-view-sidebar .clinical-view-nav .list-group-item:hover {
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}
.clinical-view-sidebar .clinical-view-nav .list-group-item.active {
    background: color-mix(in srgb, var(--bs-primary) 14%, var(--bs-body-bg));
    color: var(--bs-body-color);
    border-color: color-mix(in srgb, var(--bs-primary) 45%, var(--bs-border-color));
    box-shadow: inset 3px 0 0 var(--bs-primary);
    font-weight: 600;
}
.clinical-view-root section[id^="clinical-section-"] {
    scroll-margin-top: 92px;
}
.clinical-plot-settings-card .clinical-settings-advanced.collapse:not(.show) {
    display: none;
}

.summary-viewer-section .molstar-structure-status {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    box-sizing: border-box;
}

.summary-structure-card .viewerSection {
    margin-top: 0;
}

.summary-viewer-section {
    overflow: hidden;
    position: relative;
    isolation: isolate;
}

.summary-viewer-section #pdb_structure {
    min-height: 420px;
    height: min(520px, 65vh);
    overflow: hidden;
}

/* Mol* expanded: `.msp-layout-expanded` on plugin content (PDBe 3.1.x). Legacy CSS also mentions
   `.msp-viewport-expanded`; match both. Ancestor overflow:hidden clips fixed layout → overlap bugs. */
.summary-visual-root.summary-molstar-viewport-expanded .summary-viewer-section,
.summary-visual-root.summary-molstar-viewport-expanded .summary-structure-card .card-body,
.summary-visual-root.summary-molstar-viewport-expanded .summary-viewer-section #pdb_structure {
    overflow: visible;
}

.summary-visual-root.summary-molstar-viewport-expanded .summary-viewer-section,
body.summary-molstar-viewport-expanded .summary-viewer-section {
    /* Let fixed Mol* layout compete at page stacking level, not inside an isolated subtree. */
    isolation: auto;
}

/* Hide exact offenders while Mol* viewport is expanded (Header.html loads after this file → !important). */
.summary-ui-hidden-for-molstar-expanded,
body:has(#pdb_structure :is(.msp-layout-expanded, .msp-viewport-expanded)) header.discanvis-site-header.sticky-top,
body.summary-molstar-viewport-expanded header.discanvis-site-header.sticky-top,
body:has(#pdb_structure :is(.msp-layout-expanded, .msp-viewport-expanded)) #summary-visual-mode-structure,
body.summary-molstar-viewport-expanded #summary-visual-mode-structure {
    visibility: hidden !important;
    pointer-events: none !important;
}

body:has(#pdb_structure :is(.msp-layout-expanded, .msp-viewport-expanded)) #main-header-navbar,
body.summary-molstar-viewport-expanded #main-header-navbar {
    z-index: 0 !important;
}

body:has(#pdb_structure :is(.msp-layout-expanded, .msp-viewport-expanded)) .summary-visual-toolbar-card,
body.summary-molstar-viewport-expanded .summary-visual-toolbar-card {
    visibility: hidden !important;
    pointer-events: none !important;
}

body:has(#pdb_structure :is(.msp-layout-expanded, .msp-viewport-expanded)) .summary-visual-mode-group > .btn,
body.summary-molstar-viewport-expanded .summary-visual-mode-group > .btn {
    z-index: 0 !important;
    transform: none !important;
    isolation: auto !important;
}

/* Expanded plugin shell is position:fixed but stacks below site header unless z-index + inset are forced. */
body:has(#pdb_structure :is(.msp-layout-expanded, .msp-viewport-expanded))
    #pdb_structure
    :is(.msp-layout-expanded, .msp-viewport-expanded),
body.summary-molstar-viewport-expanded
    #pdb_structure
    :is(.msp-layout-expanded, .msp-viewport-expanded) {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    z-index: 2100 !important;
}

.summary-visual-main-row .min-h-plot {
    min-height: 0;
}

.summary-page-loader {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--bs-body-bg-rgb, 255, 255, 255), 0.92);
    backdrop-filter: blur(6px);
    transition: opacity 0.25s ease;
}

[data-bs-theme="dark"] .summary-page-loader {
    background: rgba(var(--bs-body-bg-rgb, 33, 37, 41), 0.94);
}

.summary-page-loader.d-none {
    pointer-events: none;
    opacity: 0;
}

.summary-page-loader-inner {
    text-align: center;
    padding: 2rem;
    border-radius: 1rem;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.12);
}

.summary-page-loader-inner.text-start {
    text-align: start;
}

.summary-loader-steps-scroll {
    scrollbar-width: thin;
}

[data-bs-theme="dark"] .summary-page-loader-inner {
    box-shadow: 0 0.5rem 1.75rem rgba(0, 0, 0, 0.45);
}

#summary-badge-rows .badge {
    max-width: 100%;
    white-space: normal;
    text-align: start;
    line-height: 1.25;
}

.summary-badge-section {
    background: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color) !important;
}

/* Clinical “In silico & annotation context”: avoid washed-out badges on tinted cards */
.mutation-context-badges .mutation-context-badge {
    opacity: 1 !important;
    filter: none !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

/* First-open lazy Summary tabs: show that work is in progress */
.summary-tab-lazy-loading {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background-color: rgba(var(--bs-body-bg-rgb, 255, 255, 255), 0.93);
    pointer-events: none;
}

[data-bs-theme="dark"] .summary-tab-lazy-loading {
    background-color: rgba(var(--bs-body-bg-rgb, 33, 37, 41), 0.94);
}

.summary-tab-lazy-loading-card {
    pointer-events: auto;
    max-width: 22rem;
}

.summary-track-visibility-toggle .summary-track-visibility-chevron {
    transition: transform 0.2s ease;
}

.summary-track-visibility-toggle[aria-expanded="true"] .summary-track-visibility-chevron {
    transform: rotate(180deg);
}

.summary-track-header-control {
    height: 2rem;
    display: inline-flex;
    align-items: center;
    padding: 0 0.15rem;
}

/* Header controls in Tracks card: unify sizes with btn-sm */
#summary-main-plot-header-controls .form-check-input {
    width: 2.25em;
    height: 1.25em;
    margin-top: 0 !important;
}
#summary-main-plot-header-controls .form-check-label {
    margin-bottom: 0 !important;
    line-height: 1.1;
}
#summary-track-visibility-toggle.btn.btn-sm {
    height: 2rem;
}

/* Track visibility (grouped, compact chips) */
.summary-track-visibility-group-box {
    padding: 0.55rem 0.55rem;
    border: 1px solid var(--bs-border-color-translucent, var(--bs-border-color));
    border-radius: 0.6rem;
    background: rgba(var(--bs-body-bg-rgb, 255, 255, 255), 0.55);
}
[data-bs-theme="dark"] .summary-track-visibility-group-box {
    background: rgba(var(--bs-body-bg-rgb, 33, 37, 41), 0.32);
}
.summary-track-visibility-group-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bs-secondary-color, #6c757d);
    margin-bottom: 0.15rem;
}
.summary-track-visibility-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border-radius: 0.55rem;
    padding: 0.25rem 0.35rem;
    background: rgba(var(--bs-tertiary-bg-rgb, 248, 249, 250), 0.55);
    cursor: pointer;
    user-select: none;
}
.summary-track-visibility-chip .form-check-input {
    margin-top: 0 !important;
}
.summary-track-visibility-chip .summary-tb-track-pill {
    font-size: 0.78rem !important;
    line-height: 1.1;
    padding: 0.18rem 0.45rem !important;
    max-width: 12.5rem;
}

/* Keep Plotly under the absolute loading layer (sibling painted later). */
.summary-main-plot-surface {
    position: relative;
    z-index: 0;
}

/* While tracks render: dim the Plotly surface so loading reads clearly under the overlay. */
.summary-plot-area-busy #main_plot_div {
    opacity: 0.58;
    filter: grayscale(0.12);
    transition: opacity 0.18s ease, filter 0.18s ease;
}

.summary-tracks-loading {
    position: absolute;
    inset: 0;
    /* Above Plotly, below everything outside this card. It used to sit at 1060, over the
       sticky settings panel (1030) — so re-rendering with Settings open dimmed the very
       controls you were using. It only ever needs to cover the plot beneath it. */
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    background: rgba(var(--bs-body-bg-rgb, 255, 255, 255), 0.55);
    backdrop-filter: blur(2px);
}
[data-bs-theme="dark"] .summary-tracks-loading {
    background: rgba(var(--bs-body-bg-rgb, 33, 37, 41), 0.55);
}
[data-bs-theme="dark"] .summary-plot-area-busy #main_plot_div {
    opacity: 0.52;
}
.summary-tracks-loading-inner {
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--bs-border-color);
    background: rgba(var(--bs-body-bg-rgb, 255, 255, 255), 0.85);
    box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.08);
}
[data-bs-theme="dark"] .summary-tracks-loading-inner {
    background: rgba(var(--bs-body-bg-rgb, 33, 37, 41), 0.85);
    box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.35);
}

/* Unified Visual mode toggles: inactive outline must never read as “blank white” during heavy Plotly work. */
.summary-visual-mode-group > .btn.btn-outline-primary:not(.active) {
    background-color: rgba(var(--bs-primary-rgb), 0.07);
    border-color: rgba(var(--bs-primary-rgb), 0.42);
    /* Darker than --bs-primary so label + icons stay readable after losing .active (was filled / white text). */
    --bs-btn-color: var(--bs-primary-text-emphasis, #084298);
    color: var(--bs-btn-color);
    opacity: 1;
}
.summary-visual-mode-group > .btn.btn-outline-primary:not(.active) .material-symbols-outlined {
    color: inherit;
    opacity: 1;
}
.summary-visual-mode-group > .btn.btn-outline-primary:not(.active):hover {
    background-color: rgba(var(--bs-primary-rgb), 0.12);
    border-color: rgba(var(--bs-primary-rgb), 0.55);
    --bs-btn-color: var(--bs-primary-text-emphasis, #084298);
    color: var(--bs-btn-color);
}
.summary-visual-mode-group--plot-busy > .btn.btn-outline-primary:not(.active) {
    background-color: rgba(var(--bs-primary-rgb), 0.1);
    border-color: rgba(var(--bs-primary-rgb), 0.5);
    --bs-btn-color: var(--bs-primary-text-emphasis, #084298);
    color: var(--bs-btn-color);
    /* Own compositing layer so the control repaints even when the main thread is busy with Plotly */
    isolation: isolate;
    transform: translateZ(0);
    backface-visibility: hidden;
}
[data-bs-theme="dark"] .summary-visual-mode-group > .btn.btn-outline-primary:not(.active) {
    background-color: rgba(var(--bs-primary-rgb), 0.14);
    border-color: rgba(var(--bs-primary-rgb), 0.45);
    /* Keep body-like contrast on dark (primary alone can read as washed on tinted bg). */
    --bs-btn-color: var(--bs-body-color);
    color: var(--bs-btn-color);
}
[data-bs-theme="dark"] .summary-visual-mode-group > .btn.btn-outline-primary:not(.active):hover {
    --bs-btn-color: var(--bs-body-color);
    color: var(--bs-btn-color);
}
[data-bs-theme="dark"] .summary-visual-mode-group--plot-busy > .btn.btn-outline-primary:not(.active) {
    background-color: rgba(var(--bs-primary-rgb), 0.18);
    --bs-btn-color: var(--bs-body-color);
    color: var(--bs-btn-color);
}

.summary-visual-toolbar-card .card-body,
.summary-sequence-card .card-header,
.summary-plot-main-card .card-header,
.summary-structure-card .card-header,
.summary-feature-table-card .card-header {
    border-color: var(--bs-border-color-translucent, var(--bs-border-color));
}

.summary-visual-main-row .summary-plot-main-card,
.summary-visual-main-row .summary-structure-card {
    min-height: 0;
}

/* Structure focus: two-column layout — keep Plotly + badge strip inside the card (avoid ~tens of px horizontal bleed) */
@media (min-width: 1200px) {
    .summary-visual-main-row .summary-visual-plot-col.col-xl-8 {
        max-width: 100%;
        overflow-x: clip;
    }
    .summary-visual-main-row .summary-visual-plot-col.col-xl-8 .summary-plot-with-badges {
        max-width: 100%;
        min-width: 0;
    }
    .summary-visual-main-row .summary-visual-plot-col.col-xl-8 #main_plot_div {
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
    /* Extra gutter so Plotly’s right modebar (reset axes) stays inside the card */
    .summary-visual-main-row .summary-visual-plot-col.col-xl-8 .flex-grow-1.min-w-0.position-relative {
        padding-right: 0.35rem;
    }
}

@media (min-width: 1200px) {
    .summary-visual-main-row .summary-plot-main-card {
        min-height: 0;
    }
}

.summary-plot-with-badges {
    min-height: 0;
}

.summary-tb-track-pill {
    display: inline-block;
    text-align: left;
    width: 100%;
}

/* Letter pills: explicit colors (Bootstrap / theme must not flatten these) */
.summary-tb-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.2rem;
    font-size: 0.68rem;
    line-height: 1;
    border: 1px solid rgba(0, 0, 0, 0.14);
    box-sizing: border-box;
}

.summary-tb-lvl-G {
    background: #6c757d !important;
    color: #fff !important;
}
.summary-tb-lvl-D {
    background: #dc3545 !important;
    color: #fff !important;
}
.summary-tb-lvl-O {
    background: #0d6efd !important;
    color: #fff !important;
}
/* Mixed protein context: ordered (blue) vs disorder (red) split */
.summary-tb-lvl-M {
    background: linear-gradient(135deg, #0d6efd 48%, #dc3545 48%) !important;
    color: #fff !important;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.45);
}

.summary-tb-typ-C {
    background: #198754 !important;
    color: #fff !important;
}
.summary-tb-typ-P {
    background: #ffc107 !important;
    color: #212529 !important;
}

/*
 * "?" help chip — shares geometry + border with the badge letters so the column reads as
 * a coherent strip of square chips (G/D/O/M + C/P + ?) instead of a stray text glyph.
 */
.summary-tb-help {
    background: var(--bs-body-bg) !important;
    color: var(--bs-secondary-color) !important;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.summary-tb-help:hover,
.summary-tb-help:focus-visible {
    background: var(--bs-secondary-bg) !important;
    color: var(--bs-body-color) !important;
    border-color: rgba(0, 0, 0, 0.28) !important;
    outline: none;
}
[data-bs-theme="dark"] .summary-tb-help {
    color: rgba(255, 255, 255, 0.65) !important;
}
[data-bs-theme="dark"] .summary-tb-help:hover,
[data-bs-theme="dark"] .summary-tb-help:focus-visible {
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.38) !important;
}

[data-bs-theme="dark"] .summary-tb-letter {
    border-color: rgba(255, 255, 255, 0.22);
}

.summary-tb-title {
    font-weight: 500;
    font-size: 0.72rem;
    line-height: 1.2;
    color: var(--bs-body-color);
}

.summary-tb-aa-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.04rem 0.12rem;
    font-size: 0.55rem;
    line-height: 1.1;
    margin-top: 0.12rem;
    color: var(--bs-secondary-color);
    max-height: 2.6em;
    overflow: hidden;
}

.summary-tb-aa-ch {
    flex: 0 0 auto;
}

.summary-tb-subtracks {
    margin-top: 0.1rem;
    max-height: 4.5rem;
    overflow-y: auto;
    font-size: 0.58rem;
    line-height: 1.15;
    color: var(--bs-secondary-color);
}

.summary-tb-subtrack-name {
    max-width: 100%;
}

.summary-track-help-btn:hover,
.summary-track-help-btn:focus-visible {
    color: var(--bs-primary) !important;
}

.summary-track-help-head {
    font-weight: 700;
    opacity: 0.55;
}

.summary-tb-row-section {
    background: rgba(var(--bs-secondary-rgb, 108, 117, 125), 0.08);
}

.summary-tb-row-subtrack {
    border-left: 2px solid rgba(var(--bs-primary-rgb, 13, 110, 253), 0.35);
    padding-left: 2px;
}

/*
 * Compact sub-row variant — used for Cancer / Disease sub-tracks where the rows are only
 * 12-15 px tall. Strips the badge column down to: subtle left accent, color dot (Disease
 * only), short title text, "?" chip. No pill outline that would get clipped at this height.
 */
.summary-tb-row-subtrack-compact {
    border-left-width: 3px;
    padding-left: 4px;
    gap: 0.25rem !important;
    align-items: center;
}
.summary-tb-row-subtrack-compact .summary-tb-track-pill {
    background: transparent !important;
    color: var(--bs-body-color) !important;
    border: 0 !important;
    padding: 0 !important;
    font-size: 0.68rem;
    line-height: 1.05;
    font-weight: 500;
    box-shadow: none !important;
}
.summary-tb-row-subtrack-compact .summary-tb-title-wrap {
    gap: 0 !important;
}
.summary-tb-row-subtrack-compact .summary-track-help-btn {
    min-width: 1.15rem;
    height: 1.15rem;
    font-size: 0.72rem;
}

/*
 * Swatch markers in the "type" badge slot for Cancer + Disease sub-rows.
 * Shape mimics the actual Plotly marker:
 *   .summary-tb-swatch-dot     → circle  (ClinVar markers, Missense lollipop tip)
 *   .summary-tb-swatch-square  → square  (Indel/Frameshift blocks, Significant yellow block)
 */
.summary-tb-swatch-cell {
    height: 100%;
}
.summary-tb-swatch-dot,
.summary-tb-swatch-square {
    width: 0.65rem;
    height: 0.65rem;
    display: inline-block;
    border: 1px solid rgba(0, 0, 0, 0.18);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
}
.summary-tb-swatch-square {
    border-radius: 2px;
}
[data-bs-theme="dark"] .summary-tb-swatch-dot,
[data-bs-theme="dark"] .summary-tb-swatch-square {
    border-color: rgba(255, 255, 255, 0.32);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45) inset;
}

.summary-tb-row-aa {
    border-left: 2px solid rgba(var(--bs-secondary-rgb, 108, 117, 125), 0.45);
}

.summary-tb-pill-section .summary-badge-custom,
.summary-tb-pill-section.summary-tb-track-pill {
    font-weight: 600;
    font-size: 0.7rem;
}

#pdb_structure_tab {
    min-height: 420px;
    width: 100%;
}

/* PDB inspect modal: highlight the row matching the segment the user actually clicked in the plot. */
.summary-pdb-row-selected {
    outline: 2px solid rgba(var(--bs-primary-rgb, 13, 110, 253), 0.75);
    outline-offset: -2px;
    animation: summaryPdbRowPulse 1.6s ease-out 1;
}

@keyframes summaryPdbRowPulse {
    0% {
        background-color: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.35);
    }
    100% {
        background-color: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.08);
    }
}

/* ==========================================================================
   Figure controls — command bar + collapsible panel
   --------------------------------------------------------------------------
   The settings used to occupy ~180 px permanently: a header band, a view-mode
   row and a horizontally scrolling chip row, with more controls stranded in
   the plot card's header. Now it is one 40 px bar, and everything else is in a
   single grouped panel that is closed by default.
   ========================================================================== */

.summary-visual-toolbar-card {
    position: sticky;
    top: 0;
    z-index: 1030;
    border: 1px solid var(--bs-border-color-translucent, var(--bs-border-color)) !important;
    border-radius: 0.6rem;
    overflow: visible;                /* body-level dropdowns must escape */
}

.summary-cmdbar {
    min-height: 2.5rem;
    background: var(--bs-body-bg);
    border-radius: inherit;
}
.summary-cmdbar-sep {
    width: 1px;
    align-self: stretch;
    margin: 0.25rem 0.15rem;
    background: var(--bs-border-color-translucent, var(--bs-border-color));
}

/* Mode buttons: icon always, label only where there is room. Keeps the bar to
   one line down to tablet widths without hiding what the icons mean. */
.summary-visual-mode-group .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 0.4rem;
    padding: 0.2rem 0.55rem;
    font-size: 0.82rem;
    font-weight: 500;
    border-color: transparent;
}
.summary-visual-mode-group .btn .material-symbols-outlined {
    font-size: 1.05rem;
    line-height: 1;
}
.summary-visual-mode-group .btn:not(.active) {
    color: var(--bs-secondary-color);
}
.summary-visual-mode-group .btn.active {
    box-shadow: none;
}
@media (max-width: 1199.98px) {
    .summary-cmdbar-label {
        display: none;
    }
}

.summary-settings-toggle .summary-settings-chevron {
    transition: transform 0.15s ease;
}
.summary-settings-toggle:not(.collapsed) .summary-settings-chevron {
    transform: rotate(180deg);
}

/* Panel: two columns on wide screens, one on narrow. No horizontal scroller —
   chips wrap, so nothing slides out of reach. */
.summary-settings-body {
    background: var(--bs-body-bg);
}
/* Equal-width cells that auto-fill the row and wrap. Nothing can overflow the
   card, and the controls line up in columns instead of drifting. */
/* renderDynamicControls wraps the chips in its own `.summary-visual-external-controls`
   toolbar, so the grid must live on THAT element. The outer wrapper stays a plain
   block: nesting a grid inside a grid made the toolbar a single column and pushed its
   children out of the card. */
.summary-control-grid {
    display: block;
    min-width: 0;
}
.summary-control-grid > .summary-visual-external-controls,
.summary-control-grid:not(:has(> .summary-visual-external-controls)) {
    /* renderDynamicControls stamps Bootstrap's `d-flex flex-nowrap` on the toolbar, and
       those utilities carry !important — the grid has to shout back. */
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 0.5rem;
    align-items: start;
    flex-wrap: wrap !important;
    width: auto;
    min-width: 0;
}
.summary-control-grid:empty {
    display: none;
}
/* A labelled group (e.g. Functional scores) holds two controls, so give it two cells. */
/* A labelled group holds a title plus two controls (e.g. Functional scores:
   VEP/MAVE + the score-set picker). Two cells is not enough once the set names get
   long, so it takes three and wraps internally rather than pushing past the card. */
.summary-control-grid .summary-control-group {
    grid-column: span 3;
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-width: 0;
}
.summary-control-grid .summary-control-group > .summary-visual-control-chip {
    flex: 1 1 11rem;
    min-width: 0;
}
/* The Cancer chip carries three selects (source / class / type); one cell clips the
   last one, so it gets the width of two. */
.summary-control-grid .summary-visual-control-chip--cancer {
    grid-column: span 2;
}
.summary-settings-body .summary-visual-control-chip--cancer .summary-cancer-inline-form {
    overflow: visible;
}
.summary-settings-body .summary-visual-control-chip--cancer .summary-cancer-inline-field {
    flex: 1 1 8rem;
    min-width: 0;
}
@media (max-width: 991.98px) {
    .summary-control-grid .summary-control-group {
        grid-column: 1 / -1;
    }
}
.summary-settings-section-title {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    margin-bottom: 0.5rem;
}

/* Chips inside the panel: flat, compact, no card-in-card shadows. */
.summary-settings-body .summary-visual-control-chip {
    border: 1px solid var(--bs-border-color-translucent, var(--bs-border-color));
    border-radius: 0.5rem;
    padding: 0.3rem 0.45rem 0.35rem;
    background: var(--bs-body-bg);
    box-shadow: none;
    max-width: 100%;
    min-width: 0;
}
/* Selects and the MAVE dropdown trigger must shrink with their cell, not force it
   wider — a fixed min-width here is what pushed MAVE outside the panel. */
.summary-settings-body .summary-visual-control-chip .form-select,
.summary-settings-body .summary-visual-control-chip .dropdown-toggle,
.summary-settings-body .summary-visual-control-chip .btn-group {
    min-width: 0 !important;
    width: 100%;
    max-width: 100%;
}
.summary-settings-body .summary-visual-control-chip .dropdown-toggle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.summary-settings-body .summary-control-group {
    padding-left: 0;
    gap: 0.5rem;
}
.summary-settings-body .summary-control-group + .summary-control-group::before {
    display: none;
}
.summary-settings-body .summary-control-group-label {
    writing-mode: horizontal-tb;
    transform: none;
    align-self: center;
    font-size: 0.62rem;
}

.summary-mave-menu {
    font-size: 0.85rem;
    z-index: 1080;
}
.summary-mave-menu li .form-check-label {
    cursor: pointer;
    max-width: 15rem;
}
.summary-mave-menu li:hover:not(.border-bottom) {
    background: var(--bs-tertiary-bg, rgba(0, 0, 0, 0.04));
}
.summary-mave-menu .btn-link {
    text-decoration: none;
}

/* Plot card sits directly under the bar; keep its header quiet. */
.summary-plot-head {
    background: var(--bs-body-bg);
}

@media (max-width: 991.98px) {
    .summary-visual-toolbar-card {
        position: static;
    }
}


/* Focus annotation now lives on the command bar. It is a single select, so keep it
   narrow and let it truncate rather than wrap the bar. */
.summary-cmdbar #color_selector_container {
    max-width: 22rem;
    overflow: hidden;
}
.summary-cmdbar #color_selector_container select,
.summary-cmdbar #color_selector_container .form-select {
    min-width: 0;
    max-width: 11rem;
    font-size: 0.8rem;
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
}
.summary-cmdbar #color_selector_container label {
    font-size: 0.72rem;
    margin-bottom: 0 !important;
    white-space: nowrap;
}
@media (max-width: 767.98px) {
    .summary-cmdbar #color_selector_container {
        display: none !important;
    }
}


/* Hide control containers that rendered nothing in this mode — an empty bordered box
   reads as a broken control. `:empty` is not enough: the toolbar div is still there. */
.summary-settings-body .summary-control-grid:not(:has(.summary-visual-control-chip)):not(:has(.form-check)) {
    display: none !important;
}
.summary-settings-body .summary-control-grid > .summary-visual-external-controls:not(:has(.summary-visual-control-chip)):not(:has(.form-check)) {
    display: none !important;
}


/* The VEP/MAVE segmented control is a .btn-group, whose buttons size to their own
   content and were spilling over the neighbouring select. Constrain the group and let
   the two buttons share it evenly. */
.summary-settings-body .summary-visual-control-chip .btn-group {
    display: flex;
    width: 100%;
    max-width: 12rem;
    overflow: hidden;
    border-radius: 0.42rem;
}
.summary-settings-body .summary-visual-control-chip .btn-group > .btn {
    flex: 1 1 0;
    min-width: 0;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
    font-size: 0.78rem;
}


/* --- Plot panel tabs: Tracks / Feature table / PDB alignments -------------- *
   The figure and its tables are alternative readings of the same protein, so they
   take turns in one panel instead of stacking into a page you have to scroll.
   -------------------------------------------------------------------------- */
.summary-plot-tabs {
    gap: 0;
}
.summary-plot-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    background: transparent;
    border: 0;
    /* Reserve the indicator on every tab so selecting one does not shift the row. */
    border-bottom: 2px solid transparent;
    color: var(--bs-secondary-color);
    font-size: 0.88rem;
    font-weight: 600;
    white-space: nowrap;
}
.summary-plot-tab .material-symbols-outlined {
    font-size: 1.05rem;
}
.summary-plot-tab:hover {
    background: var(--bs-tertiary-bg, rgba(0, 0, 0, 0.03));
    color: var(--bs-body-color);
}
.summary-plot-tab.is-active {
    color: var(--bs-primary);
    border-bottom-color: var(--bs-primary);
    background: transparent;
}
.summary-plot-tab:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: -2px;
}

/* Only the active tab's hint is shown, and only on a wide header — on a narrow one the
   tab labels have to win the space. */
.summary-plot-tab-hint {
    display: none;
}
@media (min-width: 1200px) {
    .summary-plot-tab-hint.is-current {
        display: inline;
    }
}

/* Caption above the table: what it is currently showing. Centred, so it reads as a
   caption spanning the toolbar below it (exports on the left, search on the right)
   rather than as another left-aligned control. */
.summary-table-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.6rem 0.75rem 0.1rem;
    min-width: 0;
}
.summary-table-title:empty {
    display: none;
}

/* --------------------------------------------------------------------------
   Variant effect table
   The panel borrows the Custom regions shape on purpose — a source picker on the
   left, filters on the right — so the two searches on this page read as the same
   kind of control rather than as two designs.
   -------------------------------------------------------------------------- */
/* One variant, stated once. Sits above the table because it is the answer to both what
   you filtered for and what you clicked. */
.summary-ve-selected {
    margin-top: 0.6rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid rgba(var(--bs-primary-rgb), 0.35);
    border-radius: 0.5rem;
    background: rgba(var(--bs-primary-rgb), 0.05);
}
.summary-ve-selected-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.summary-ve-variant-name {
    font-family: var(--bs-font-monospace);
    font-weight: 700;
    font-size: 1.05rem;
}
.summary-ve-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
    margin-top: 0.5rem;
}
.summary-ve-stat {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}
.summary-ve-stat-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--bs-secondary-color);
}
.summary-ve-stat-value {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

/* Conservation as a bar: the column is scanned, not read. */
.summary-ve-bar {
    display: inline-block;
    width: 3rem;
    height: 0.45rem;
    border-radius: 0.25rem;
    background: rgba(var(--bs-secondary-rgb), 0.25);
    overflow: hidden;
    vertical-align: middle;
}
.summary-ve-bar > span {
    display: block;
    height: 100%;
    background: var(--bs-primary);
}

.summary-ve-dt td,
.summary-ve-dt th {
    vertical-align: middle;
}
.summary-ve-variant {
    font-family: var(--bs-font-monospace);
    font-weight: 600;
    text-decoration: none;
}
.summary-ve-variant:hover {
    text-decoration: underline;
}

/* --- Variant-map row labels: residue + side-chain class -------------------- */
.summary-tb-aa-title {
    overflow: hidden;
}
.summary-tb-aa-residue {
    flex: 0 0 auto;
    width: 1.5rem;
    text-align: center;
    padding-left: 0 !important;
    padding-right: 0 !important;
    font-weight: 700;
}
.summary-tb-aa-class {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.66rem !important;
    letter-spacing: 0.01em;
}

/* --- Custom regions: one input row per mode -------------------------------- */
/* Divider + label separating "annotate a region" from "search for a motif". */
.cr-mode-sep {
    width: 1px;
    height: 1.2rem;
    background: var(--bs-border-color);
    margin: 0 0.15rem;
}
.cr-mode-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}
.cr-mode-group .btn .material-symbols-outlined {
    font-size: 1em;
    vertical-align: -0.15em;
}

.cr-mode-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}
.cr-mode-panel .cr-regex-input {
    flex: 1 1 20rem;
    min-width: 0;
    max-width: 34rem;
}
.cr-mode-panel .cr-pssm-json {
    flex: 1 1 100%;
    font-size: 0.78rem;
}
.cr-mode-panel .cr-pssm-min {
    flex: 0 0 8rem;
}
#summary_custom_regions_panel .cr-table {
    font-size: 0.82rem;
}
#summary_custom_regions_panel .cr-table th {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--bs-secondary-color);
}
/* Storage key is a diagnostic, not a heading — keep it out of the reading path. */
#summary_custom_regions_panel .cr-acc-hint {
    font-size: 0.72rem;
    opacity: 0.75;
}

/* --- Table pane: same visual language as the rest of the panel ------------- *
   DataTables ships its own chrome — heavy dark export buttons, a full-width
   search box on its own line, generous row padding. Left alone it reads as a
   third-party widget dropped into the page. These rules bring it down to the
   weight of the tab strip and the settings panel it now sits with.
   -------------------------------------------------------------------------- */
#feature_table {
    font-size: 0.85rem;
}
/* Toolbar and footer each get one line: exports left, search right; count left,
   pager right. DataTables emits these as flat siblings of the table, so a small grid
   over the wrapper is enough — no markup surgery. */
#feature_table .dataTables_wrapper {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.5rem 0.75rem;
}
#feature_table .dt-buttons {
    grid-column: 1;
    grid-row: 1;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0;
}
#feature_table .dataTables_filter {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
}
#feature_table table.dataTable {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0 !important;
}
#feature_table .dataTables_info {
    grid-column: 1;
    grid-row: 3;
}
#feature_table .dataTables_paginate {
    grid-column: 2;
    grid-row: 3;
    justify-self: end;
}

/* Exports: DataTables' bootstrap5 renderer stamps them `btn btn-secondary`, a solid
   dark slab that outweighs everything else on the page. Quiet outline instead. */
#feature_table .dt-buttons .btn {
    background: transparent !important;
    background-image: none !important;
    border: 1px solid var(--bs-border-color) !important;
    border-radius: 0.4rem !important;
    color: var(--bs-secondary-color) !important;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem !important;
    box-shadow: none !important;
}
#feature_table .dt-buttons .btn:hover,
#feature_table .dt-buttons .btn:focus-visible {
    border-color: var(--bs-primary) !important;
    color: var(--bs-primary) !important;
}
/* Header: sticky, so column names survive scrolling a long table inside the pane. */
#feature_table table.dataTable thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bs-tertiary-bg, #f8f9fa);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    border-bottom: 1px solid var(--bs-border-color) !important;
    white-space: nowrap;
}
/* The per-column filter row scrolls with the header as a second sticky band. */
#feature_table table.dataTable thead tr:nth-child(2) th {
    top: 2rem;
    padding-top: 0.2rem;
    padding-bottom: 0.35rem;
    text-transform: none;
}
#feature_table table.dataTable thead input {
    width: 100%;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.35rem;
    font-size: 0.76rem;
    font-weight: 400;
    padding: 0.15rem 0.4rem;
    background: var(--bs-body-bg);
}
#feature_table table.dataTable tbody td {
    padding: 0.4rem 0.55rem;
    vertical-align: middle;
    border-color: var(--bs-border-color-translucent, var(--bs-border-color));
}
#feature_table table.dataTable tbody tr:hover > td {
    background: var(--bs-tertiary-bg, rgba(0, 0, 0, 0.03));
}
#feature_table .dataTables_info,
#feature_table .dataTables_paginate {
    font-size: 0.78rem;
}
#feature_table .page-link {
    padding: 0.2rem 0.5rem;
    font-size: 0.78rem;
}

/* As a card the sequence was capped at 100 px and scrolled in a slot barely three lines
   tall. On its own tab it has the whole panel, so the cap comes off and the pane's own
   height budget takes over. */
.summary-plot-pane[data-plot-pane="sequence"] .summary-sequence-panel {
    max-height: none;
}

/* Panes fill the card body; the tracks pane keeps the plot's own sizing. */
.summary-plot-pane {
    min-width: 0;
}
.summary-plot-pane[data-plot-pane="table"],
.summary-plot-pane[data-plot-pane="pdb"],
.summary-plot-pane[data-plot-pane="sequence"] {
    /* Long content scrolls inside the panel rather than growing the page — the whole
       point of the tabs is that the panel stays one screen tall. The sequence gets the
       same budget, which is why it can now run much longer than the old card allowed. */
    max-height: min(72vh, 900px);
    overflow-y: auto;
}

/* --- Settings panel: slightly see-through -------------------------------- *
   The panel overlaps the figure while open, so a hint of the plot shows through
   and you can see what a control is doing. Kept subtle and backed by a blur —
   any more transparency and the text starts competing with the tracks behind it.
   ------------------------------------------------------------------------- */
.summary-visual-toolbar-card {
    background-color: rgba(var(--bs-body-bg-rgb, 255, 255, 255), 0.92) !important;
    backdrop-filter: blur(9px) saturate(1.1);
    -webkit-backdrop-filter: blur(9px) saturate(1.1);
}
.summary-cmdbar,
.summary-settings-body {
    background: transparent !important;
}
.summary-settings-body .summary-control-grid > .summary-visual-external-controls,
.summary-settings-body .summary-track-visibility-group-box {
    background: rgba(var(--bs-body-bg-rgb, 255, 255, 255), 0.55);
}
[data-bs-theme="dark"] .summary-visual-toolbar-card {
    background-color: rgba(var(--bs-body-bg-rgb, 33, 37, 41), 0.92) !important;
}

/* --- Settings: one column per track group -------------------------------- *
   Each column card is a whole group (Genome, Functional scores, …): its settings
   on top, a rule, then the visibility checkboxes for the very tracks those
   settings drive. Previously the two lived in separate sections with different
   groupings, so you had to map "Cancer:" onto the Genome box yourself.
   ------------------------------------------------------------------------- */

/* Where controls.js renders before the panel files each chip into its group column.
   Deliberately NOT hidden. Empty, it collapses to nothing, so it costs no space in the
   normal case — and if a control is ever left behind (a stale cached bundle that does
   not relocate, a render the panel did not follow), it stays visible and usable here
   instead of silently disappearing from the settings. */
.summary-settings-staging {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-width: 0;
    /* Collapsed, not hidden. Chips render here a frame before the panel files them into
       their columns; left visible they flashed in the old full-width layout on every
       re-render. `visibility` still lets them be measured, and the panel adds
       `is-exposed` if anything is actually left behind — so a control that fails to
       relocate is still reachable rather than lost. */
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
}
.summary-settings-staging.is-exposed {
    max-height: none;
    overflow: visible;
    visibility: visible;
    margin-bottom: 0.6rem;
}

.summary-track-visibility-group-controls {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
    min-width: 0;
}

/* A track and the selector that configures it are one block: the checkbox row on top,
   its control indented underneath. */
.summary-track-visibility-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
}
.summary-track-visibility-item:has(.summary-track-visibility-item-control) {
    margin-bottom: 0.3rem;
}
.summary-settings-body .summary-track-visibility-item-control {
    /* Indented to clear the checkbox, so the control reads as belonging to the row
       above it rather than as another entry in the list. */
    margin: 0.1rem 0 0 1.55rem;
    padding: 0;
    flex-direction: column !important;
    align-items: stretch;
    gap: 0.2rem;
}
/* The checkbox pill above already names the track — the chip's own title would be the
   same word twice. Hidden rather than removed so the chip keeps owning its inputs. */
.summary-settings-body .summary-track-visibility-item-control > div:first-child {
    display: none !important;
}
.summary-settings-body .summary-track-visibility-item-control .form-select,
.summary-settings-body .summary-track-visibility-item-control .dropdown-toggle,
.summary-settings-body .summary-track-visibility-item-control .btn-group {
    flex: 0 0 auto;
    width: 100%;
}
.summary-settings-body .summary-track-visibility-item-control .summary-cancer-inline-form {
    flex-wrap: wrap !important;
    width: 100%;
    gap: 0.25rem;
}
.summary-settings-body .summary-track-visibility-item-control .summary-cancer-inline-field {
    flex: 1 1 6.5rem;
    min-width: 0;
}
/* The rule that separates a group's settings from its track list. */
.summary-track-visibility-group-tracks.is-divided {
    margin-top: 0.35rem;
    padding-top: 0.35rem;
    border-top: 1px solid var(--bs-border-color-translucent, var(--bs-border-color));
}

/* A column is far narrower than the old full-width grid row, so a chip's title and
   its input wrap onto separate lines instead of squeezing the select to nothing. */
.summary-settings-body .summary-track-visibility-group-controls .summary-visual-control-chip {
    flex-wrap: wrap;
    row-gap: 0.15rem;
    padding: 0.1rem 0.15rem;
}
.summary-settings-body .summary-track-visibility-group-controls .summary-visual-control-chip > div:first-child {
    max-width: 100%;
}
.summary-settings-body .summary-track-visibility-group-controls .summary-visual-control-chip .form-select,
.summary-settings-body .summary-track-visibility-group-controls .summary-visual-control-chip .dropdown-toggle,
.summary-settings-body .summary-track-visibility-group-controls .summary-visual-control-chip .btn-group {
    flex: 1 1 7rem;
}
/* Cancer's three selects are laid out `flex-nowrap`; in a column they have to stack. */
.summary-settings-body .summary-track-visibility-group-controls .summary-cancer-inline-form {
    flex-wrap: wrap !important;
    width: 100%;
}
.summary-settings-body .summary-track-visibility-group-controls .summary-cancer-inline-field {
    flex: 1 1 7rem;
    min-width: 0;
}
/* Comparison Mode arrives from the header host with its own sizing. */
.summary-track-visibility-group-controls .summary-track-header-control,
.summary-track-visibility-group-controls > .d-flex {
    min-width: 0;
}
.summary-track-visibility-group-controls .form-check-label {
    font-size: 0.78rem;
}

/* --- Mol* recovery nudge (see nudgeMolstarExpandedViewport) ---------------- *
   The recovery toggles Mol*'s expanded viewport, whose layout is `position:
   fixed` over the whole window. For the two frames it is on, pin it inside its
   own panel so the user never sees the viewer flash fullscreen and back.
   -------------------------------------------------------------------------- */
#pdb_structure.molstar-nudging .msp-layout-expanded {
    position: absolute !important;
    inset: 0 !important;
    z-index: auto !important;
}
#pdb_structure.molstar-nudging .msp-layout-expanded .msp-layout-main,
#pdb_structure.molstar-nudging .msp-layout-expanded .msp-layout-top,
#pdb_structure.molstar-nudging .msp-layout-expanded .msp-layout-bottom {
    inset: 0 !important;
    height: auto !important;
    border: 0 !important;
}

/* --- View transitions ------------------------------------------------------ *
   Switching view used to snap: the structure panel appeared or vanished and the
   plot jumped sideways to fill the gap, with nothing connecting the two states.
   These are the smallest movements that make the change readable — a column
   that closes, a pane that fades in, a button that says it is working.
   Everything here respects prefers-reduced-motion at the bottom of the block.
   -------------------------------------------------------------------------- */
.summary-visual-plot-col,
.summary-visual-structure-col {
    transition: width 0.28s cubic-bezier(0.2, 0, 0.2, 1),
                flex-basis 0.28s cubic-bezier(0.2, 0, 0.2, 1),
                opacity 0.18s ease,
                padding 0.28s cubic-bezier(0.2, 0, 0.2, 1);
}
/* Collapsed, not `display: none`: zero width is animatable, and the Mol* recovery
   still sees the 0 -> non-zero transition it keys off. */
.summary-visual-structure-col.is-collapsed {
    width: 0 !important;
    flex-basis: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Panes arrive rather than blink into place. */
.summary-plot-pane:not(.d-none) {
    animation: summary-pane-in 0.18s cubic-bezier(0.2, 0, 0.2, 1) both;
}

/* Held on the way IN only.
   The old view stays whole while the new one is built — the loading overlay already
   says work is happening, and blanking the panels on top of it made the structure
   vanish the moment you clicked, leaving an empty column standing for as long as the
   render took. What is held is the panel that is about to open: a structure card
   fading up inside a column that still has zero width is a flash, not an entrance.
   Everything else leaves the way it arrived, by the column closing at commit. */
.summary-visual-root.is-switching .summary-visual-structure-col.is-collapsed .summary-structure-card {
    opacity: 0;
    transform: scale(0.995);
    transition: none;
}
.summary-structure-card {
    transition: opacity 0.24s cubic-bezier(0.2, 0, 0.2, 1),
                transform 0.24s cubic-bezier(0.2, 0, 0.2, 1);
}
@keyframes summary-pane-in {
    from {
        opacity: 0;
        transform: translateY(3px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* The pressed view button, while its plot is still being built. */
.summary-visual-mode-group .btn.is-busy {
    position: relative;
    color: transparent !important;
}
.summary-visual-mode-group .btn.is-busy > * {
    visibility: hidden;
}
.summary-visual-mode-group .btn.is-busy::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.85rem;
    height: 0.85rem;
    margin: -0.425rem 0 0 -0.425rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    color: var(--bs-primary);
    animation: summary-btn-spin 0.6s linear infinite;
}
.summary-visual-mode-group .btn.is-busy.active::after {
    color: #fff;
}
@keyframes summary-btn-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .summary-visual-plot-col,
    .summary-visual-structure-col {
        transition: none;
    }
    .summary-plot-pane:not(.d-none) {
        animation: none;
    }
    .summary-visual-root.is-switching .summary-visual-structure-col.is-collapsed .summary-structure-card,
    .summary-structure-card {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .summary-visual-mode-group .btn.is-busy::after {
        animation: none;
    }
}

/* Rule between the entry's identifiers and this transcript's tags — they are
   different kinds of statement and ran together as one long line. */
.summary-header-sep {
    width: 1px;
    align-self: stretch;
    min-height: 1.1em;
    background: rgba(var(--bs-secondary-rgb), 0.35);
    margin: 0 0.15rem;
}

/* ClinVar encoding key. The track carries two facts on one mark — the fill is
   the clinical significance, the ring is the mutation type — and neither is
   guessable, so the control that filters them also explains them. */
.summary-visual-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.3rem;
    font-size: 0.68rem;
    line-height: 1;
    color: var(--bs-secondary-color);
}
.summary-visual-legend-source {
    font-weight: 600;
    color: var(--bs-body-color);
}
.summary-visual-legend-group {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}
.summary-visual-legend-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 1px;
    vertical-align: middle;
}

/* --------------------------------------------------------------------------
   The selection line inside the Cancer / Disease track labels: which database,
   which cancer type or disease, which significances.

   It sits under the section pill in the label column, so it must never widen the
   column — a disease name can be 60 characters. The line scrolls sideways inside
   its own width instead, with the scrollbar hidden so it does not eat a row that
   is only ~18 px tall. Dragging or shift-wheeling still works.
   -------------------------------------------------------------------------- */
.summary-tb-row-selection .summary-tb-title-wrap {
    gap: 0.15rem !important;
    justify-content: center;
    /* Explicit, because `.min-w-0` in the markup is not a class Bootstrap 5 ships —
       without this the flex item refuses to shrink below its content and a long
       disease name pushes the row past the column, where `overflow: hidden` eats it. */
    min-width: 0;
}

/* One-line method rows (AlphaMissense, ANCHOR, global conservation, …). */
.summary-tb-row-method .summary-tb-title-wrap {
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.25rem !important;
}
.summary-tb-row-method .summary-tb-title-extras {
    flex: 0 0 auto;
    overflow: visible;
}
.summary-tb-method-settings {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    padding: 0;
    border: 0;
    border-radius: 0.25rem;
    color: var(--bs-secondary-color, #6c757d);
    background: transparent;
}
.summary-tb-method-settings:hover,
.summary-tb-method-settings:focus-visible {
    color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.1);
}
.summary-tb-method-settings .material-symbols-outlined {
    font-size: 0.95rem;
    line-height: 1;
}
.summary-tb-title-extras {
    min-width: 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.2rem;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-x: contain;
}
.summary-tb-title-extras::-webkit-scrollbar {
    height: 0;
    display: none;
}
.summary-tb-title-extras > * {
    flex: 0 0 auto;
}
.summary-tb-sel-pill {
    font-size: 0.62rem !important;
    padding: 0.05em 0.4em !important;
    line-height: 1.25 !important;
    white-space: nowrap;
    max-width: none;
}
/* The one open-ended value on the line. It ellipses so the short codes beside it
   never do — the full text is on the tooltip, and the line still scrolls if even
   this is not enough. */
.summary-tb-sel-pill--name {
    flex: 0 1 auto;
    min-width: 2.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* -------------------------------------------------------------------------- */
/* Overview — the answer before the tracks                                      */
/* -------------------------------------------------------------------------- */
/* One question, one claim, three bands. The colour means exactly one thing on
   this tab — which side of the chain a residue is on — so pink and cornflower
   are the only two hues it is allowed to use. */

.summary-ov-claim {
    font-size: 1.15rem;
    line-height: 1.45;
    margin-bottom: 0.9rem;
}
.summary-ov-gene {
    font-weight: 700;
    letter-spacing: -0.01em;
}
.summary-ov-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
}
@media (max-width: 767.98px) {
    .summary-ov-grid { grid-template-columns: minmax(0, 1fr); }
}

/* The finding, as the largest thing on the page. It is a ratio of densities, not
   a share — a protein that is 80% disordered carries most of its variants there
   whatever is going on, and the share alone would call that a finding. */
.summary-ov-ratio {
    border: 1px solid var(--bs-border-color);
    border-left-width: 4px;
    border-radius: 0.5rem;
    padding: 0.7rem 0.9rem;
    background: var(--bs-body-bg);
}
.summary-ov-ratio-value {
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.summary-ov-ratio-label {
    font-size: 0.8rem;
    font-weight: 600;
    margin-top: 0.25rem;
}
.summary-ov-ratio-sub {
    font-size: 0.72rem;
    color: var(--bs-secondary-color);
    margin-top: 0.2rem;
    font-variant-numeric: tabular-nums;
}

.summary-ov-bar {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    padding: 0.7rem 0.9rem;
    background: var(--bs-body-bg);
}
.summary-ov-bar-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.8rem;
}
.summary-ov-bar-head b {
    font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
}
.summary-ov-bar-track {
    height: 0.55rem;
    border-radius: 0.3rem;
    background: rgba(var(--bs-secondary-rgb), 0.15);
    overflow: hidden;
    margin: 0.4rem 0 0.3rem;
}
.summary-ov-bar-track > span {
    display: block;
    height: 100%;
    border-radius: 0.3rem;
}
.summary-ov-bar-sub {
    font-size: 0.72rem;
    color: var(--bs-secondary-color);
}

.summary-ov-fig-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.summary-ov-fig-sub {
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--bs-secondary-color);
    max-width: 76ch;
}
.summary-ov-legend {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.1rem 0.7rem;
}
.summary-ov-key {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    color: var(--bs-secondary-color);
}
.summary-ov-key > i {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 0.15rem;
}

/* Per-source and per-annotation rows: a label, a divided bar, a number. Same
   grammar in both lists so the two cards read as one idea. */
.summary-ov-src,
.summary-ov-kind {
    display: grid;
    align-items: center;
    gap: 0.5rem;
    padding: 0.22rem 0;
}
.summary-ov-src {
    grid-template-columns: minmax(6rem, 9rem) 1fr 2.6rem 4rem;
}
.summary-ov-kind {
    grid-template-columns: 0.7rem minmax(6rem, 12rem) 1fr 3.5rem;
}
.summary-ov-src-label,
.summary-ov-kind-label {
    font-size: 0.78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.summary-ov-src-track,
.summary-ov-kind-track {
    display: flex;
    height: 0.7rem;
    border-radius: 0.35rem;
    overflow: hidden;
    background: rgba(var(--bs-secondary-rgb), 0.12);
}
.summary-ov-src-track > span,
.summary-ov-kind-track > span {
    display: block;
    height: 100%;
}
.summary-ov-src-num,
.summary-ov-src-total,
.summary-ov-kind-n {
    font-size: 0.74rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--bs-secondary-color);
}
.summary-ov-kind-dot {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 0.15rem;
}
.summary-ov-skeleton {
    color: var(--bs-secondary-color);
    font-size: 0.85rem;
    padding: 1rem 0;
}

/* Reserve the band figure's height in the flow.
   Plotly sizes its own container, but the card around it collapsed to the header
   whenever the plot was measured while the pane was not laid out — and a
   collapsed card lets the 210 px figure paint straight through the two cards
   below it. Stating the height means the layout is right before Plotly has an
   opinion about it. */
#summary-overview-bands {
    min-height: 420px;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}
#summary-overview-bands .js-plotly-plot,
#summary-overview-bands .plot-container,
#summary-overview-bands .svg-container {
    max-width: 100% !important;
}

.summary-ov-view .btn {
    font-size: 0.72rem;
    padding: 0.1rem 0.5rem;
}

/* --- the cell diagram ------------------------------------------------------ */
/* Compartments the protein is annotated in are filled; the rest stay outlines,
   so absence reads as absence rather than as an empty drawing. The fill is a
   third colour on purpose — pink and cornflower mean disordered and folded
   everywhere else on this tab, and a compartment in either would read as a claim
   about structure. */
.summary-ov-cell {
    width: 100%;
    height: auto;
    max-height: 220px;
    display: block;
}
.summary-ov-cell .ov-cell-shape {
    fill: none;
    stroke: var(--bs-border-color);
    stroke-width: 1.4;
}
.summary-ov-cell g:not([data-compartment="extracellular"]) > rect.ov-cell-shape:not(.ov-cell-outline),
.summary-ov-cell ellipse.ov-cell-shape,
.summary-ov-cell circle.ov-cell-shape {
    fill: rgba(var(--bs-secondary-rgb), 0.06);
}
.summary-ov-cell .ov-cell-tag {
    font-size: 8.5px;
    fill: var(--bs-secondary-color);
    letter-spacing: 0.02em;
}
.summary-ov-cell [data-compartment="membrane"] .ov-cell-shape {
    stroke-width: 3;
}
/* Annotated: the compartment takes the accent, its outline firms up, and its
   label stops being a caption and becomes a statement. */
.summary-ov-cell .is-on .ov-cell-shape {
    stroke: #0d9488;
    stroke-width: 2;
}
.summary-ov-cell .is-on rect.ov-cell-shape:not(.ov-cell-outline),
.summary-ov-cell .is-on ellipse.ov-cell-shape,
.summary-ov-cell .is-on circle.ov-cell-shape {
    fill: rgba(13, 148, 136, 0.16);
}
.summary-ov-cell .is-on[data-compartment="extracellular"] rect.ov-cell-shape {
    fill: rgba(13, 148, 136, 0.08);
}
.summary-ov-cell .is-on .ov-cell-tag {
    fill: #0d9488;
    font-weight: 700;
}

.summary-ov-loc {
    display: grid;
    grid-template-columns: 0.6rem minmax(5rem, auto) 1fr;
    align-items: baseline;
    gap: 0.45rem;
    padding: 0.12rem 0;
}
.summary-ov-loc-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 0.15rem;
    background: #0d9488;
}
.summary-ov-loc-label {
    font-size: 0.78rem;
    font-weight: 600;
}
.summary-ov-loc-terms {
    font-size: 0.7rem;
    color: var(--bs-secondary-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.summary-ov-credit {
    font-size: 0.66rem;
    color: var(--bs-secondary-color);
    margin-top: 0.4rem;
}
#summary-overview-cell sib-swissbiopics-sl {
    display: block;
    max-width: 100%;
}

/* --- the body diagram ------------------------------------------------------ */
/* Organs are shaded by how much variation they carry, not switched on and off:
   557 lung variants and 3 thyroid ones are both "present", and a flat highlight
   would call them the same finding. */
/* The compartment under the pointer, named. The picture highlights what you are
   over but only labels it inside the SVG, where the text is small and easy to
   miss — so it said "this one" without saying which. */
.summary-ov-cell-caption {
    font-size: 0.74rem;
    color: var(--bs-secondary-color);
    margin: 0.35rem 0 0;
    min-height: 1.2em;
}
.summary-ov-cell-caption.is-on {
    color: #0d9488;
    font-weight: 600;
}

/* Two readings of the same sources, stacked in one card: where the variants
   land, then what they are. A sub-heading each, so the second block is not read
   as more rows of the first. */
.summary-ov-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.3rem 0.6rem;
    margin: 0.1rem 0 0.3rem;
}
.summary-ov-sub:not(:first-child) {
    margin-top: 0.9rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--bs-border-color);
}
.summary-ov-sub-title {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bs-secondary-color);
}

/* ---------------------------------------------------------------------------
   One card, three tabs.

   Overview and Explore drew a card as a borderless panel with a soft shadow and
   a small uppercase title; Tables drew it as a bordered box with a bold grey
   header bar. Same page, two visual languages, and the reader met both within
   one click of each other. The Overview treatment wins because it is the
   quieter of the two and the figures are the content.

   Scoped to the tables root rather than applied by editing every card in the
   markup: the statistics figures that moved here bring their own headers, and a
   rule catches those too.
--------------------------------------------------------------------------- */
.summary-tables-root .card {
    border: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 4px 14px -10px rgba(0, 0, 0, .18);
}

.summary-tables-root .card-header {
    background: transparent;
    border-bottom: 1px solid rgba(var(--bs-secondary-rgb), 0.18);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bs-body-color);
    padding: 0.65rem 0.85rem 0.5rem;
}

/* The section headings the moved statistics blocks carry, brought down to the
   same weight as the card titles they sit above. They were h5 on a tab of their
   own, where nothing competed with them. */
.summary-tables-root section > .d-flex > h5,
.summary-tables-root section > h5 {
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: -0.008em;
}

.summary-tables-root .shadow_card {
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 4px 14px -10px rgba(0, 0, 0, .18);
    border: 0;
    border-radius: 0.375rem;
}

/** Disease group, in the Analysis page's colours. */
.summary-dgroup-badge {
    display: inline-block;
    padding: 0.12rem 0.42rem;
    border-radius: 0.25rem;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Variant effect: the bar that says what the figures below are showing.
--------------------------------------------------------------------------- */
.ve-toolbar {
    padding: 0.55rem 0.75rem;
    border: 1px solid rgba(var(--bs-secondary-rgb), 0.18);
    border-radius: 0.4rem;
    background: rgba(var(--bs-secondary-rgb), 0.05);
}

/* The cutoff-mode switch, once it has been moved up out of the settings card. */
#ve-toolbar-calibration .form-check {
    margin-bottom: 0;
}
#ve-toolbar-calibration #clinical_cutoff_mode_info:empty {
    display: none;
}

/* Single-method view: four figures about one method, laid out as a set rather
   than a scroll. Each pane becomes a panel of its own, the way the Overview's
   cards sit beside each other. */
.ve-single-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr));
    gap: 1rem;
    align-items: start;
}

.ve-single-grid > .ve-stacked {
    min-width: 0; /* a grid item defaults to its content's width; charts overflow */
    padding: 0.9rem 1rem 1rem;
    border: 1px solid rgba(var(--bs-secondary-rgb), 0.18);
    border-radius: 0.4rem;
    background: var(--bs-body-bg);
}

/* Inside one panel there is a single card, so the responsive column classes the
   grids carry would leave it a third of the width. */
.ve-single-grid .row-cols-md-2 > .col,
.ve-single-grid .row-cols-lg-3 > .col,
.ve-single-grid .row-cols-xl-4 > .col,
.ve-single-grid .row-cols-xl-5 > .col,
.ve-single-grid .row-cols-lg-2 > .col,
.ve-single-grid .row-cols-xxl-3 > .col {
    flex: 0 0 100%;
    max-width: 100%;
}

/* A view the chosen method has nothing in. Not `d-none`, because Bootstrap's tab
   machinery owns the show/active classes on these panes and a second display rule
   fighting it is how a pane ends up permanently blank. */
.ve-single-grid > .tab-pane.ve-empty {
    display: none;
}

/* The panel heading the tab bar used to supply, for the single-method layout. */
.ve-pane-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bs-secondary-color);
    margin-bottom: 0.6rem;
}

/* Only in the grid; in compare mode the tab bar says the same thing. */
#stats-predictors-pane .tab-content:not(.ve-single-grid) .ve-pane-title {
    display: none;
}

/* The two halves of the Tables & statistics bar, said rather than implied. Four
   pills open rows you can download and four open pages of figures; a bare rule
   between them was carrying that distinction and telling nobody. */
.summary-tabs-legend {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    padding: 0 0.5rem 0 0.2rem;
    align-self: center;
    user-select: none;
}

/* ==========================================================================
   Protein track view — the label column's row hierarchy.

   Three kinds of row, and they must not look alike:

     heading   names a block and folds it away  (Disorder specific, SLiMs)
     track     one lane of data                 (Combined disorder, ELM)
     band      a sub-lane of a track            (Missense, Indel)

   Until now a heading and a track were the same coloured pill at the same size
   and the same indent, so nothing on screen said which rows a heading covered —
   which is half of what a heading is for.
   ========================================================================== */

/* Nesting, on the title only: indenting the whole row would step the level and
   type badges out of the columns that make the strip scannable. */
.summary-track-badge-row .summary-tb-title-wrap {
    padding-left: var(--ptv-indent, 0);
}

/* A depth guide, so a row three levels in still reads as belonging to something. */
.summary-track-badge-row[data-ptv-depth="1"] .summary-tb-title-wrap,
.summary-track-badge-row[data-ptv-depth="2"] .summary-tb-title-wrap,
.summary-track-badge-row[data-ptv-depth="3"] .summary-tb-title-wrap {
    border-left: 1px solid rgba(var(--bs-secondary-rgb, 108, 117, 125), 0.22);
    margin-left: calc(var(--ptv-indent, 0) * 0.5);
    padding-left: calc(var(--ptv-indent, 0) * 0.5 + 0.3rem);
}

/* A heading opens a block, so it gets the rule above it rather than a box. */
.summary-track-badge-row.summary-tb-row-section {
    background: rgba(var(--bs-secondary-rgb, 108, 117, 125), 0.11);
    border-top: 1px solid rgba(var(--bs-secondary-rgb, 108, 117, 125), 0.28);
}

.summary-tb-row-section .summary-tb-track-pill {
    text-transform: uppercase;
    letter-spacing: 0.045em;
    font-size: 0.62rem;
    font-weight: 700;
}

/* The two folds. The chevron leads the row; the row-split control trails the
   title it acts on. Same chip shape as the badge letters so the column reads as
   one strip of chips rather than a mix of icons and text. */
.summary-track-group-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    background: transparent;
    color: var(--bs-secondary-color, #6c757d);
    opacity: 0.75;
}
.summary-track-group-toggle:hover,
.summary-track-group-toggle:focus-visible {
    opacity: 1;
    color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.1);
}
.summary-track-group-toggle .material-symbols-outlined {
    font-size: 1rem;
    line-height: 1;
}
/* A section chevron is the row's own affordance, so it is as prominent as the
   heading it sits on — the old one was a 10 px spinner nobody found. */
.summary-tb-section-fold {
    opacity: 0.9;
}

/* A region fold aggregates database/source lanes; the neighbouring unfold icon
   splits overlaps inside one lane.  Keep their glyphs visibly distinct. */
.summary-tb-section-fold .material-symbols-outlined {
    font-variation-settings: "wght" 550;
}

/* The heading pills that are also controls, and the menu they open. */
.summary-tb-sel-pill--action {
    border: 0;
    cursor: pointer;
    transition: filter .12s ease, opacity .12s ease;
}
.summary-tb-sel-pill--action:hover,
.summary-tb-sel-pill--action:focus-visible {
    filter: brightness(1.08);
    outline: 1px solid rgba(var(--bs-primary-rgb, 13, 110, 253), 0.55);
    outline-offset: 1px;
}
/* An option that is off. Still legible, so the reader can see what is available
   to turn on — the point of showing all three significances rather than only the
   selected ones. */
.summary-tb-sel-pill--off {
    opacity: 0.42;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}
.summary-tb-sel-pill--off:hover {
    opacity: 0.85;
    text-decoration: none;
}

.ptv-row-menu {
    position: absolute;
    z-index: 1080;
    max-height: 17rem;
    overflow-y: auto;
    padding: 0.25rem;
    font-size: 0.78rem;
}
.ptv-row-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    color: inherit;
    padding: 0.22rem 0.5rem;
    border-radius: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ptv-row-menu-item:hover,
.ptv-row-menu-item:focus-visible {
    background: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.12);
}
.ptv-row-menu-item.is-selected {
    font-weight: 600;
    background: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.18);
}