/* Unified AIML header and Lab-only bottom controls. */
:root {
  --common-height: 122px;
  --header-height: 122px;
}
.aiml-common-header {
  position: fixed;
  inset: 0 0 auto;
  width: 100%;
  height: var(--common-height);
  border: 0;
  z-index: 150;
  background: #faf9f5;
}
.aiml-common-header.menu-open {
  height: 100vh;
}
#lab-controls {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 42;
  background: var(--aiml-paper, #faf9f5);
  border-top: 1px solid var(--aiml-border, #aaa);
}
html[data-theme="dark"] #lab-controls {
  background: #000;
}
#lab-controls > header {
  position: static !important;
  display: flex !important;
  flex-wrap: wrap;
  height: auto !important;
  min-height: 38px;
  padding: 4px 16px !important;
  gap: 6px !important;
  background: transparent !important;
  border: 0;
}
#lab-controls .header-first-row {
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: visible !important;
  order: 2;
}
#lab-controls .wordmark {
  display: none !important;
}
#lab-controls .viewer-toolbar {
  height: auto;
  min-height: 34px;
  flex: 1;
  flex-wrap: wrap;
  padding: 0;
  gap: 8px;
  overflow: visible;
}
#lab-controls #views {
  flex-wrap: wrap;
  gap: 3px;
}
#lab-controls .header-right {
  flex-wrap: wrap;
}
#lab-controls .search-field {
  min-width: 180px;
  max-width: 360px;
  flex: 1;
  margin: 0;
  height: 30px;
}
#lab-controls #filter-panel {
  position: static !important;
  padding: 0 16px 4px !important;
  background: transparent !important;
}
#lab-controls #filter-strips {
  height: auto;
  min-height: 72px;
  padding: 2px 10px 8px;
  overflow-x: auto;
  overflow-y: hidden;
  align-items: flex-start;
}
#lab-controls #cluster-scroll {
  overflow: visible;
  min-width: 600px;
}
#lab-controls #general-filters {
  flex-shrink: 0;
}
#gesture-hint {
  bottom: auto !important;
  top: calc(var(--lab-controls-top) - 4px) !important;
  transform: translateY(-100%);
  max-height: none;
  overflow: visible;
}
#settings-panel {
  top: calc(var(--common-height) + 8px) !important;
  max-height: calc(100vh - var(--common-height) - 24px) !important;
}
#full-view {
  padding-top: var(--common-height) !important;
}
#full-view .full-toolbar {
  order: 10;
  position: relative;
  flex: none;
  min-height: 46px;
  height: auto;
  padding: 6px 12px;
  flex-wrap: wrap;
  border-top: 1px solid var(--aiml-border);
}
#full-view .full-toolbar .wordmark {
  display: none !important;
}
#full-view .full-actions {
  flex-wrap: wrap;
  overflow: visible;
  gap: 4px;
  justify-content: flex-start;
}
#full-view .full-description {
  order: 8;
  flex: none;
}
#full-view .full-body {
  order: 1;
  min-height: 0;
}
#full-related {
  order: 7;
}
#cube-panel {
  padding-top: var(--common-height) !important;
}
#cube-panel > header {
  order: 3 !important;
  position: static !important;
  flex: none !important;
}
#cube-panel .cube-masthead {
  display: none !important;
}
#cube-stage {
  order: 1;
  min-height: 0;
}
#cube-caption {
  order: 4;
}
html.immersive .aiml-common-header,
html.immersive #lab-controls {
  display: none !important;
}
@media (max-width: 767px) {
  :root {
    --common-height: 106px;
    --header-height: 106px;
  }
  #lab-controls > header {
    padding: 4px 10px !important;
  }
  #lab-controls .viewer-toolbar {
    gap: 4px;
  }
  #lab-controls .search-field {
    max-width: none;
  }
  #lab-controls #filter-panel {
    padding-inline: 8px !important;
  }
  #lab-controls #filter-strips {
    min-height: 68px;
  }
  #full-view .full-actions button {
    padding: 5px 7px;
  }
}

#lab-controls .viewer-toolbar {
  min-width: 0;
}
#lab-controls .search-field {
  min-width: 150px;
  max-width: 240px;
}
#lab-controls .header-first-row {
  flex: none;
}
#lab-controls .viewer-toolbar #views button {
  padding: 5px 7px;
  font-size: 12px;
}

/* Final requested hierarchy: canvas, guide, tags, one scrolling utility row. */
#navigation-controls > header {
  position: static !important;
  display: contents !important;
  height: auto !important;
  padding: 0 !important;
}
#navigation-controls > header .wordmark {
  display: none !important;
}
#navigation-controls > header :is(.header-first-row, .viewer-toolbar, .header-right, #views) {
  display: contents !important;
}
#navigation-controls > header .search-field {
  flex: 0 0 190px;
  min-width: 150px;
  max-width: 210px;
  height: 30px;
  margin: 0 4px;
}
body > footer #navigation-controls {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 5px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 2px 8px;
  scrollbar-width: thin;
}
body > footer #navigation-controls > * {
  flex-shrink: 0;
}
body > footer #navigation-controls button {
  white-space: nowrap;
  min-height: 30px;
  padding: 5px 8px;
  font-size: 12px;
}
body > footer #navigation-controls :is(#camera-controls, .random-pool) {
  flex-shrink: 0;
}
#lab-controls {
  border-top: 0;
}
#lab-controls #filter-strips {
  padding-top: 8px;
  min-height: 78px;
}

/* Two visible rows: browsing, then search and utilities. No horizontal footer scrolling. */
body > footer #navigation-controls {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: visible;
  gap: 6px;
  padding: 4px 0;
  min-width: 0;
}
#navigation-controls > header {
  display: none !important;
}
.lab-footer-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}
.lab-footer-row :is(#views, .header-right, .view-actions, .random-control, #camera-controls, .zoom-controls) {
  display: flex !important;
  flex: none;
  align-items: center;
  gap: 4px;
  margin: 0;
  flex-wrap: wrap;
}
body > footer #navigation-controls button {
  height: 30px;
  min-height: 30px;
  min-width: 32px;
  padding: 5px 7px;
  line-height: 18px;
  font-size: 12px;
}
.lab-utility-row .search-field {
  flex: 1 1 150px;
  min-width: 120px;
  max-width: 200px;
  height: 30px;
  margin: 0;
  padding: 0 5px;
}
.lab-utility-row .search-field input {
  min-width: 0;
  font-size: 12px;
}
.lab-utility-row #clear-filters {
  transform: none;
  position: static;
  width: auto;
  border-radius: 2px;
}
.lab-utility-row #drag-state {
  font-size: 10px;
  white-space: nowrap;
}
#lab-controls #general-filters {
  flex-basis: 190px;
  min-width: 190px;
}
#lab-controls #cluster-buttons {
  width: calc(16 * var(--tag-step) + 90px);
}
#lab-controls #cluster-buttons [data-cluster] {
  left: calc((var(--tag-index) + 1) * var(--tag-step));
  min-width: 48px !important;
}
#lab-controls #all-clusters {
  left: 0;
  min-width: 74px !important;
  width: auto;
}
@media (max-width: 900px) {
  #lab-controls #filter-strips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    height: auto;
    min-height: 0;
    padding: 8px 0;
    overflow: visible;
  }
  #lab-controls #general-filters {
    flex-basis: auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    height: auto;
    gap: 4px;
    padding: 0;
  }
  #lab-controls #general-filters::after {
    display: none;
  }
  #lab-controls :is(#aspect-buttons, #media-buttons) {
    display: flex;
    gap: 4px;
    height: auto;
    width: auto;
    position: static;
  }
  #lab-controls #cluster-scroll {
    flex: 1 1 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
  }
  #lab-controls #cluster-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    width: auto;
    min-width: 0;
    height: auto;
    padding: 0;
  }
  html #lab-controls #filter-panel .diagonal,
  html #lab-controls #cluster-buttons button {
    position: static;
    transform: none !important;
    min-width: 48px !important;
    height: 26px;
    min-height: 26px;
    padding: 3px 7px !important;
    line-height: 18px;
  }
}

/* Keep browsing modes first when their row wraps. */
.lab-browse-row > #views {
  order: 0 !important;
}
.lab-browse-row > .view-actions {
  order: 1 !important;
}
.lab-browse-row > .random-control {
  order: 2 !important;
}

/* Review refinement: equal tag lengths and action row above modes. */
.lab-utility-row {
  order: 0;
}
.lab-browse-row {
  order: 1;
}
.lab-browse-row > #map-full-view {
  order: -1 !important;
}
.lab-utility-row > .header-right {
  margin-left: auto;
}
#lab-controls #filter-strips {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  height: auto;
  min-height: 0;
  gap: 16px;
  overflow: visible;
  padding: 10px 48px 10px 4px;
}
#lab-controls #general-filters {
  flex: 0 0 200px;
  min-width: 0;
  height: 82px;
  padding: 0;
  display: flex;
  gap: 0;
}
#lab-controls #general-filters::after {
  right: -9px;
  top: 10px;
  height: 58px;
}
#lab-controls :is(#aspect-buttons, #media-buttons) {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 38px;
  position: static;
  height: 82px;
  width: auto;
  padding: 0;
  gap: 0;
}
#lab-controls #cluster-scroll {
  flex: 1 1 600px;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
}
#lab-controls #cluster-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fill, 38px);
  grid-auto-rows: 82px;
  gap: 0;
  width: 100%;
  min-width: 0;
  height: auto;
  padding: 0;
}
html #lab-controls #filter-panel .diagonal,
html #lab-controls #cluster-buttons button {
  box-sizing: border-box;
  position: relative;
  left: auto;
  top: auto;
  flex: none !important;
  width: var(--equal-tag-width, 82px) !important;
  min-width: var(--equal-tag-width, 82px) !important;
  max-width: var(--equal-tag-width, 82px) !important;
  height: 26px !important;
  min-height: 26px !important;
  padding: 4px 8px !important;
  font:
    500 13px/16px "IBM Plex Sans",
    "Helvetica Neue",
    Arial,
    sans-serif !important;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  transform: rotate(45deg) !important;
  transform-origin: 13px 13px;
}
@media (max-width: 900px) {
  #lab-controls #filter-strips {
    padding: 8px 0;
    gap: 8px;
  }
  #lab-controls #general-filters {
    flex: 1 1 100%;
    height: auto;
    flex-wrap: wrap;
    gap: 4px;
  }
  #lab-controls #general-filters::after {
    display: none;
  }
  #lab-controls :is(#aspect-buttons, #media-buttons) {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    height: auto;
  }
  #lab-controls #cluster-scroll {
    flex-basis: 100%;
  }
  #lab-controls #cluster-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    height: auto;
  }
  html #lab-controls #filter-panel .diagonal,
  html #lab-controls #cluster-buttons button {
    transform: none !important;
  }
}

#lab-controls #cluster-buttons {
  align-items: start;
}
@media (min-width: 901px) {
  #lab-controls #general-filters {
    flex-basis: 250px;
  }
}

#lab-controls #filter-panel {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Slim flags, separated control categories, support actions last. */
html #lab-controls #filter-panel .diagonal,
html #lab-controls #cluster-buttons button {
  height: 18px !important;
  min-height: 18px !important;
  padding: 0 8px !important;
  line-height: 16px !important;
  transform-origin: 9px 9px;
}
@media (min-width: 901px) {
  #lab-controls #general-filters::after {
    right: 7px;
    top: 0;
    height: 66px;
  }
}
.lab-utility-row .lab-action-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--aiml-border, #aaa);
  border-radius: 3px;
}
.lab-utility-row #camera-controls {
  gap: 3px;
}
.lab-utility-row .header-right {
  order: 10;
  margin-left: auto;
}
body > footer .lab-utility-row button {
  height: 28px;
  min-height: 28px;
  padding: 4px 5px;
  font-size: 11px;
  line-height: 18px;
}
.lab-utility-row .search-field {
  flex: 1 1 120px;
  min-width: 110px;
  max-width: 150px;
}
.lab-action-group .random-control {
  padding-left: 4px;
  border-left: 1px solid var(--aiml-border, #aaa);
}
.lab-action-group .random-pool label {
  font-size: 10px;
}
#settings-panel #clear-filters {
  position: static;
  transform: none;
  width: auto;
  margin: 8px 0 12px;
  display: block;
}
.lab-browse-row #drag-state {
  margin-left: auto;
  font-size: 10px;
}

body > footer #navigation-controls .lab-utility-row button {
  height: 28px;
  min-height: 28px;
  min-width: 26px;
  padding: 4px;
  font-size: 11px;
  line-height: 18px;
}
body > footer #navigation-controls .lab-utility-row .search-field {
  flex: 1 1 110px;
  min-width: 100px;
  max-width: 130px;
}
body > footer #navigation-controls .lab-utility-row .header-right {
  margin-left: auto;
  gap: 3px;
}
body > footer #navigation-controls .lab-action-group :is(.view-actions, .random-control) {
  gap: 3px;
}

/* Group toggles and compact footer refinement; count/revision corner unchanged. */
.lab-browse-row > .search-field {
  order: 20 !important;
  margin-left: auto;
  flex: 0 1 190px;
  min-width: 120px;
  max-width: 190px;
  height: 30px;
}
.lab-browse-row > .search-field input {
  min-width: 0;
  width: 100%;
  font-size: 12px;
}
.lab-utility-row > #drag-state {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 11px;
  margin: 0 5px 0 0;
}
body > footer #navigation-controls .lab-utility-row :is(#camera-controls, .zoom-controls) button {
  height: 32px;
  min-height: 32px;
  min-width: 40px;
  padding: 5px 8px;
  font-size: 12px;
}
@media (min-width: 901px) {
  #lab-controls #general-filters {
    flex-basis: 288px;
  }
}
html[data-theme] body #lab-controls #filter-panel :is(#all-formats, #all-clusters)[aria-pressed="false"] {
  background: #fff;
  color: #333;
  border-color: #888;
  box-shadow: none;
}
html[data-theme] body #lab-controls #filter-panel #all-formats[aria-pressed="true"] {
  background: #9cbfc9;
  color: #193943;
  border-color: #739eaa;
  box-shadow: none;
}
html[data-theme] body #lab-controls #filter-panel #all-clusters[aria-pressed="true"] {
  background: #c6d7b5;
  color: #283521;
  border-color: #8eaa76;
  box-shadow: none;
}

/* Final review arrangement: Random/feedback beside tools; modes beneath Pan. */
body > footer #navigation-controls {
  --random-column: 145px;
}
.lab-utility-row {
  display: grid;
  grid-template-columns: var(--random-column) minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 8px;
}
.lab-random-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}
.lab-random-box {
  border: 1px solid var(--aiml-border, #aaa);
  border-radius: 3px;
  padding: 3px;
  max-width: 100%;
  box-sizing: border-box;
}
.lab-random-box .random-control {
  border: 0 !important;
  padding: 0 !important;
  gap: 4px !important;
}
.lab-random-box .random-pool label {
  font-size: 10px;
}
.lab-random-column #drag-state {
  font-size: 11px;
  line-height: 16px;
  white-space: nowrap;
  margin: 0;
}
.lab-tool-group,
.lab-mode-group,
.lab-display-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.lab-tool-group {
  border: 1px solid var(--aiml-border, #aaa);
  border-radius: 3px;
  padding: 3px;
}
.lab-utility-row > .header-right {
  align-self: start;
  margin: 3px 0 0 !important;
  order: initial;
}
.lab-browse-row {
  padding-left: calc(var(--random-column) + 12px);
  align-items: flex-start;
}
.lab-mode-group #map-full-view {
  order: -1;
}
.lab-browse-row .lab-display-group {
  order: 10;
}
.lab-browse-row > .search-field {
  order: 20 !important;
  margin-left: auto;
  max-width: 170px;
  flex: 0 1 150px;
}
@media (max-width: 700px) {
  body > footer #navigation-controls {
    --random-column: 120px;
  }
  .lab-utility-row {
    grid-template-columns: var(--random-column) minmax(0, 1fr);
  }
  .lab-utility-row > .header-right {
    grid-column: 2;
  }
  .lab-browse-row {
    padding-left: 0;
  }
  .lab-tool-group {
    grid-column: 2;
  }
  .lab-browse-row > .search-field {
    flex: 1 1 140px;
  }
}
@media (max-width: 460px) {
  .lab-utility-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .lab-tool-group,
  .lab-utility-row > .header-right {
    grid-column: 1;
  }
}

#navigation-controls .lab-random-column #drag-state {
  flex: none;
  width: auto;
  min-width: 0;
  max-width: none;
  height: 16px;
  margin: 0;
  text-align: left;
}
body > footer #navigation-controls .lab-mode-group button {
  height: 30px;
  min-height: 30px;
  padding: 5px;
  font-size: 12px;
}
.lab-browse-row > .search-field {
  flex-basis: 130px;
  max-width: 150px;
}

body > footer #navigation-controls {
  --random-column: 125px;
}
body > footer #navigation-controls .lab-display-group button {
  height: 30px;
  min-height: 30px;
  padding: 5px;
  font-size: 12px;
}

/* Stacked Random, adjacent Active Tool, prominent navigation, separate framing. */
body > footer #navigation-controls {
  --random-column: 180px;
}
.lab-utility-row {
  grid-template-columns: var(--random-column) minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
}
.lab-random-column {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.lab-random-box .random-control {
  flex-direction: column;
  align-items: stretch !important;
  gap: 3px !important;
}
.lab-random-box .random-pool {
  display: flex;
  gap: 5px;
}
.lab-random-box .random-pool label {
  white-space: nowrap;
}
#navigation-controls .lab-random-column #drag-state {
  font-size: 11px;
  white-space: nowrap;
  flex: none;
}
.lab-tool-group {
  width: max-content;
  max-width: 100%;
  justify-self: start;
  padding: 3px;
  gap: 4px;
}
body > footer #navigation-controls .lab-tool-group :is(#camera-controls, .zoom-controls) button {
  min-width: 54px;
  padding: 5px 10px;
  height: 34px;
  min-height: 34px;
  font-size: 12px;
}
.lab-framing-group {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-end;
  align-items: center;
}
.lab-utility-row > .header-right {
  margin: 0 !important;
}
.lab-browse-row {
  padding-left: calc(var(--random-column) + 12px);
}
@media (max-width: 1100px) {
  .lab-utility-row {
    grid-template-columns: var(--random-column) minmax(0, 1fr) auto;
  }
  .lab-utility-row > .header-right {
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
  }
  .lab-framing-group {
    grid-column: 3;
    grid-row: 1;
  }
}
@media (max-width: 800px) {
  .lab-utility-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .lab-random-column {
    grid-column: 1/-1;
  }
  .lab-tool-group {
    grid-column: 1;
    grid-row: 2;
  }
  .lab-framing-group {
    grid-column: 2;
    grid-row: 2;
  }
  .lab-utility-row > .header-right {
    grid-column: 2;
    grid-row: 3;
  }
  .lab-browse-row {
    padding-left: 4px;
  }
}
@media (max-width: 560px) {
  .lab-utility-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .lab-tool-group {
    grid-column: 1;
    grid-row: auto;
    width: auto;
  }
  .lab-framing-group,
  .lab-utility-row > .header-right {
    grid-column: 1;
    grid-row: auto;
    justify-self: end;
  }
  .lab-tool-group #camera-controls {
    flex-wrap: wrap !important;
  }
}

/* Final optical alignment with the bottom display controls. */
.lab-random-box .random-pool {
  flex-direction: row !important;
  align-items: center !important;
}
.lab-framing-group {
  margin-right: var(--framing-right, 0px);
}

/* One continuous bottom panel: guide, tags, and existing footer controls. */
#lab-controls {
  background: var(--aiml-paper, #faf9f5);
  border-top: 1px solid var(--aiml-border, #aaa);
}
html[data-theme="dark"] #lab-controls {
  background: #000;
}
#lab-controls #gesture-hint {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  margin: 0;
  padding: 5px 16px 2px;
  max-width: none;
  background: transparent !important;
}
#lab-controls #filter-panel {
  padding-bottom: 0 !important;
}
#lab-controls #filter-strips {
  padding-top: 5px;
  padding-bottom: 2px;
}
body > footer::before {
  border-top: 0 !important;
}
.lab-feedback {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  max-width: 85px;
}
#navigation-controls .lab-feedback #group-label-status {
  position: static;
  margin: 0;
  font-size: 10px;
  line-height: 12px;
  white-space: normal;
  overflow: visible;
  min-height: 24px;
  color: var(--aiml-muted, #777);
}
#navigation-controls .lab-feedback #drag-state {
  height: auto;
  line-height: 14px;
}

html[data-theme="light"] #lab-controls,
html[data-theme="light"] body > footer::before {
  background: #f7f5f0 !important;
}
html[data-theme="dark"] #lab-controls,
html[data-theme="dark"] body > footer::before {
  background: #000 !important;
}
.lab-feedback {
  width: 64px;
  flex: none;
}
#navigation-controls .lab-feedback #group-label-status {
  min-height: 36px;
}

/* Narrow Random stack; filter announcements stay accessible without a visual row. */
.lab-random-box {
  width: max-content;
  flex: none;
}
.lab-random-box .random-pool {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px;
}
body > footer #navigation-controls .lab-random-box #random {
  width: 100%;
  min-width: 0;
  padding-inline: 4px;
}
.lab-feedback {
  width: auto;
  max-width: 85px;
}
#navigation-controls .lab-feedback #group-label-status {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip-path: inset(50%);
  white-space: nowrap !important;
  border: 0;
}

/* Active Tool anchors the left edge; Random sits directly beside navigation. */
.lab-random-column {
  width: 100%;
  justify-content: space-between;
  gap: 8px;
}
.lab-random-column .lab-feedback {
  order: -1;
  flex: 1;
  max-width: none;
  min-width: 0;
}
.lab-random-column .lab-random-box {
  order: 1;
}
#navigation-controls .lab-random-column #drag-state {
  font-size: 15px;
  font-weight: 600;
  line-height: 19px;
  height: auto;
  white-space: normal;
  color: var(--ink, #333);
}
html[data-theme="dark"] #navigation-controls .lab-random-column #drag-state {
  color: #eee;
}
@media (max-width: 800px) {
  .lab-random-column {
    max-width: 180px;
  }
}

/* Full Screen defines the shared width of the stacked Random box. */
.lab-random-box {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}
body > footer #navigation-controls .lab-random-box :is(#random, #map-fullscreen) {
  width: 100%;
  min-width: max-content;
  height: 30px;
  min-height: 30px;
  padding: 5px 8px;
  font-size: 12px;
  line-height: 18px;
}
.lab-random-box .random-control {
  width: 100%;
}
.lab-display-group:empty {
  display: none;
}
.lab-utility-row > .header-right {
  align-items: center;
}

.lab-utility-row > .header-right #theme-toggle {
  order: -1 !important;
}

/* Desktop review: one complete tool row with aligned modes below. */
.lab-utility-row {
  display: grid !important;
  grid-template-columns: 70px minmax(0, 1fr) !important;
  gap: 8px !important;
  align-items: center;
}
.lab-linear-actions {
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
  flex-wrap: nowrap;
}
body > footer #navigation-controls .lab-linear-actions button {
  flex: 1 1 60px;
  min-width: 0;
  width: auto;
  height: 32px;
  min-height: 32px;
  padding: 4px;
  font-size: 11px;
  line-height: 18px;
  white-space: nowrap;
  border-radius: 2px;
}
body > footer #navigation-controls .lab-linear-actions #zoom-to-image {
  flex: 1.5 0 86px;
}
body > footer #navigation-controls .lab-linear-actions #map-fullscreen {
  flex: 1.2 0 70px;
}
body > footer #navigation-controls .lab-linear-actions #fit-view {
  flex: 0.7 0 28px;
}
body > footer #navigation-controls .lab-linear-actions #fit-set {
  flex: 0.8 0 42px;
}
body > footer #navigation-controls .lab-linear-actions #theme-toggle {
  flex: 0.7 0 32px;
  order: initial !important;
}
.lab-linear-actions .random-pool {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: none;
  align-items: flex-start;
}
.lab-linear-actions .random-pool label {
  font-size: 10px;
  white-space: nowrap;
}
.lab-utility-row > .lab-feedback {
  width: 70px;
  max-width: 70px;
  min-width: 0;
}
#navigation-controls .lab-feedback #drag-state {
  font-size: 15px;
  font-weight: 600;
  white-space: normal;
  height: auto;
  line-height: 19px;
}
.lab-browse-row {
  padding-left: 78px;
  gap: 4px;
}
.lab-browse-row > .header-right {
  margin-left: auto;
  order: 10;
  display: flex !important;
  gap: 3px;
}
.lab-browse-row > .search-field {
  order: 20 !important;
}
.lab-mode-group #views {
  display: flex !important;
}
@media (max-width: 900px) {
  .lab-linear-actions {
    flex-wrap: wrap;
  }
  .lab-browse-row {
    padding-left: 78px;
  }
}
@media (max-width: 560px) {
  .lab-utility-row {
    grid-template-columns: 1fr !important;
  }
  .lab-browse-row {
    padding-left: 0;
  }
  .lab-utility-row > .lab-feedback {
    width: auto;
    max-width: none;
  }
}

#navigation-controls .lab-feedback #drag-state {
  flex: none;
  width: auto;
  min-width: 0;
  max-width: none;
}
.lab-utility-row > #camera-controls,
.lab-utility-row > .zoom-controls {
  display: none !important;
}

/* Final desktop ordering and aligned utility group. Tag geometry unchanged. */
.lab-utility-row {
  grid-template-columns: 100px minmax(0, 1fr) !important;
}
.lab-utility-row > .lab-feedback {
  width: 100px;
  max-width: 100px;
}
#navigation-controls .lab-feedback #drag-state {
  white-space: nowrap;
}
.lab-browse-row {
  padding-left: 108px;
  display: grid;
  grid-template-columns: max-content minmax(80px, 1fr) max-content;
  align-items: center;
  padding-right: var(--utility-end, 0px);
  gap: 4px;
}
.lab-browse-row > .search-field {
  order: 1 !important;
  min-width: 80px;
  max-width: none;
  width: 100%;
  margin: 0;
  height: 32px;
}
.lab-browse-row > .header-right {
  order: 2;
  margin: 0 !important;
  flex-wrap: nowrap;
}
body > footer #navigation-controls .lab-browse-row button {
  height: 32px;
  min-height: 32px;
  padding: 4px;
  font-size: 11px;
  line-height: 18px;
}
@media (max-width: 900px) {
  .lab-browse-row {
    display: flex;
    flex-wrap: wrap;
    padding-right: 0;
  }
  .lab-browse-row > .search-field {
    flex: 1 1 100px;
  }
}
@media (max-width: 560px) {
  .lab-utility-row {
    grid-template-columns: 1fr !important;
  }
  .lab-browse-row {
    padding-left: 0;
  }
}

.lab-browse-row > .view-actions:empty {
  display: none !important;
}

.lab-browse-row > .view-actions {
  display: none !important;
}

body > footer #navigation-controls .lab-browse-row > .view-actions {
  display: none !important;
}

/* Single anchored, draggable Info handle. Only its content scrolls. */
html[data-theme] body #inspector {
  left: calc(var(--info-x) - var(--info-width) + 72px) !important;
  right: auto !important;
  top: var(--info-y) !important;
  bottom: auto !important;
  width: var(--info-width) !important;
  height: auto !important;
  max-height: var(--info-height) !important;
  padding: 0 !important;
  overflow: hidden !important;
  transition: none !important;
  scrollbar-gutter: auto;
  border-radius: 3px;
}
html[data-theme] body #inspector.folded {
  left: var(--info-panel-x) !important;
  width: 200px !important;
  height: 32px !important;
  min-height: 32px;
  padding: 0 !important;
  background: var(--aiml-paper, #faf9f5);
}
html[data-theme] body #inspector .inspector-top {
  position: relative !important;
  top: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 32px !important;
  min-height: 32px !important;
  border: 0 !important;
  background: transparent !important;
  display: block !important;
}
html[data-theme] body #inspector .info-heading {
  display: none !important;
}
html[data-theme] body #inspector #fold-inspector:not(.panel-window-action) {
  position: absolute;
  right: 0;
  top: 0;
  width: 72px;
  height: 32px;
  min-height: 32px;
  padding: 4px 9px !important;
  font:
    500 13px/22px "IBM Plex Sans",
    Arial,
    sans-serif !important;
  cursor: grab;
  touch-action: none;
  user-select: none;
  border-radius: 2px;
}
html[data-theme] body #inspector #fold-inspector:not(.panel-window-action):active {
  cursor: grabbing;
}
html[data-theme] body #inspector #inspector-content {
  max-height: calc(var(--info-height) - 32px);
  overflow: auto;
  padding: 10px 12px;
  overscroll-behavior: contain;
}
html[data-theme] body #inspector #detail-preview {
  height: auto;
  object-fit: contain;
}
html[data-theme] body #inspector .prompt-block {
  padding: 9px;
  margin: 10px 0;
}
body > footer #navigation-controls #map-info {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
.lab-browse-row {
  padding-right: 0 !important;
}

html[data-theme] body #inspector #fold-inspector:not(.panel-window-action) {
  position: fixed;
  left: var(--info-x);
  top: var(--info-y);
  right: auto;
  z-index: 2;
}

/* Five matching desktop columns, with Image Viewer under Active Tool. */
#navigation-controls {
  --tool-column: 80px;
}
.lab-five-tools {
  display: grid;
  grid-template-columns: repeat(5, var(--tool-column));
  gap: 3px;
  flex: none;
}
body > footer #navigation-controls .lab-five-tools button {
  width: var(--tool-column);
  min-width: 0;
  height: 32px;
  min-height: 32px;
  padding: 4px 2px;
  font-size: 11px;
  line-height: 18px;
}
body > footer #navigation-controls .lab-linear-actions > #random {
  flex: 0.8 0 45px;
}
.lab-browse-row {
  padding-left: 0;
  grid-template-columns: 100px 412px minmax(80px, 1fr) max-content;
  gap: 8px;
}
.lab-browse-row > .lab-mode-group {
  display: contents;
}
body > footer #navigation-controls .lab-mode-group #map-full-view {
  grid-column: 1;
  order: 0;
  width: 100px;
  height: 32px;
}
body > footer #navigation-controls .lab-mode-group #views {
  grid-column: 2;
  display: grid !important;
  grid-template-columns: repeat(5, var(--tool-column));
  gap: 3px;
}
body > footer #navigation-controls .lab-mode-group #views button {
  width: var(--tool-column);
  min-width: 0;
  height: 32px;
  padding: 4px 2px;
  font-size: 11px;
  line-height: 18px;
}
.lab-browse-row > .search-field {
  grid-column: 3;
}
.lab-browse-row > .header-right {
  grid-column: 4;
}
@media (max-width: 900px) {
  .lab-browse-row {
    display: flex;
  }
  .lab-browse-row > .lab-mode-group {
    display: flex;
    flex-wrap: wrap;
  }
  .lab-five-tools {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    max-width: 100%;
    width: 412px;
  }
  .lab-linear-actions {
    flex-wrap: wrap;
  }
}

/* Freeze the accepted 1049px desktop control brick; spare width stays outside. */
@media (min-width: 1048px) {
  body > footer #navigation-controls {
    flex: 0 0 897.8px;
    width: 897.8px;
    max-width: 897.8px;
    margin-right: auto;
  }
}

/* Center the fixed desktop brick and flags; statistics no longer consume its width. */
@media (min-width: 1048px) {
  body > footer #navigation-controls {
    margin-left: auto;
    margin-right: auto;
  }
  body > footer .collection-status {
    position: fixed;
    left: 16px;
    top: calc(var(--common-height) + 10px);
    bottom: auto;
    width: 110px;
    min-width: 110px;
    max-width: 110px;
    flex: none;
  }
  #lab-controls #filter-strips {
    width: 100%;
    max-width: 1016.8px;
    margin-inline: auto;
    padding-left: 20.066px;
    padding-right: 31.934px;
  }
}
@media (max-width: 1048px) {
  #lab-controls #filter-strips {
    justify-content: center;
  }
  #lab-controls #cluster-buttons {
    justify-content: center;
  }
}

@media (min-width: 1048px) {
  body > footer .collection-status #match-count {
    font-size: 18px;
  }
  body > footer .collection-status #status-caption {
    font-size: 10px;
  }
}

/* Stable centered Active Tool column and a slightly tighter flags-to-tools gap. */
.lab-utility-row > .lab-feedback {
  width: 100px;
  max-width: 100px;
  text-align: center;
}
#navigation-controls .lab-feedback #drag-state {
  width: 100px;
  max-width: 100px;
  min-width: 100px;
  margin: 0;
  padding: 0;
  text-align: center;
  white-space: nowrap;
}
@media (min-width: 1048px) {
  body > footer {
    padding-top: 6px;
  }
}

/* Portable matching panels: fixed header, scroll body, independent height grip. */
html[data-theme] body #settings-panel {
  position: fixed !important;
  left: var(--info-x) !important;
  right: auto !important;
  top: var(--info-y) !important;
  bottom: auto !important;
  width: var(--info-width) !important;
  min-width: 0 !important;
  height: var(--info-height) !important;
  max-height: var(--info-height) !important;
  padding: 0 !important;
  overflow: hidden !important;
  scrollbar-gutter: auto;
}
html[data-theme] body #settings-panel .settings-title {
  position: relative !important;
  top: 0 !important;
  margin: 0 !important;
  padding: 4px 10px !important;
  height: 32px;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
html[data-theme] body #settings-panel h2 {
  font:
    500 13px/22px "IBM Plex Sans",
    Arial,
    sans-serif;
}
html[data-theme] body #settings-panel #close-settings:not(.panel-window-action) {
  height: 28px;
  min-height: 28px;
  width: 28px;
}
html[data-theme] body #inspector:not(.folded) {
  height: var(--info-height) !important;
}
html[data-theme] body #inspector #inspector-content,
html[data-theme] body #settings-panel .panel-scroll {
  height: calc(var(--info-height) - 42px);
  max-height: calc(var(--info-height) - 42px);
  overflow: auto;
  padding: 10px 12px;
  box-sizing: border-box;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #a4a49d #faf9f5;
}
html[data-theme="dark"] body #inspector #inspector-content,
html[data-theme="dark"] body #settings-panel .panel-scroll {
  scrollbar-color: #898d83 #252721;
}
:is(#inspector-content, .panel-scroll)::-webkit-scrollbar {
  width: 9px;
}
:is(#inspector-content, .panel-scroll)::-webkit-scrollbar-track {
  background: #faf9f5;
  border: 1px solid #deddd6;
}
:is(#inspector-content, .panel-scroll)::-webkit-scrollbar-thumb {
  background: #a4a49d;
  border: 2px solid #faf9f5;
  border-radius: 5px;
}
html[data-theme="dark"] :is(#inspector-content, .panel-scroll)::-webkit-scrollbar-track {
  background: #252721;
  border-color: #45483f;
}
html[data-theme="dark"] :is(#inspector-content, .panel-scroll)::-webkit-scrollbar-thumb {
  background: #898d83;
  border-color: #252721;
}
.panel-height-grip {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 10px;
  border-top: 1px solid var(--panel-rule, #d2d0c7);
  cursor: ns-resize;
  touch-action: none;
  background: var(--panel-paper, #faf9f5);
}
.panel-height-grip::after {
  content: "";
  position: absolute;
  left: calc(50% - 14px);
  top: 3px;
  width: 28px;
  border-top: 2px solid #999b91;
}
#inspector.folded .panel-height-grip {
  display: none;
}
.panel-height-grip:focus-visible {
  outline: 2px solid #739eaa;
  outline-offset: -2px;
}

/* Named portable panel headers; collapsed panels remain movable. */
html[data-theme] body #inspector .inspector-top {
  cursor: grab;
  touch-action: none;
  user-select: none;
}
html[data-theme] body #inspector:not(.folded) .info-heading {
  display: block !important;
  padding: 5px 10px;
  font:
    500 13px/22px "IBM Plex Sans",
    Arial,
    sans-serif;
}
html[data-theme] body #inspector .info-heading strong {
  font: inherit;
}
html[data-theme] body #inspector #selected-type {
  display: none;
}
html[data-theme] body #settings-panel #close-settings:not(.panel-window-action) {
  width: 72px;
  min-width: 72px;
  height: 32px;
  min-height: 32px;
  font:
    500 12px/30px "IBM Plex Sans",
    Arial,
    sans-serif;
  padding: 0;
}
html[data-theme] body #settings-panel .settings-title {
  padding: 0 0 0 10px !important;
}
html[data-theme] body #settings-panel.folded {
  width: 200px !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
}
html[data-theme] body #settings-panel.folded .settings-title {
  padding: 0 0 0 17px !important;
}
html[data-theme] body #settings-panel.folded h2 {
  display: block !important;
  margin-left: 17px !important;
  max-width: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-theme] body #settings-panel.folded .panel-scroll,
html[data-theme] body #settings-panel.folded .panel-height-grip {
  display: none !important;
}
html[data-theme] body #settings-panel.folded #close-settings:not(.panel-window-action) {
  width: 88px;
  min-width: 88px;
  cursor: grab;
  touch-action: none;
}

html[data-theme] body #settings-panel #close-settings:not(.panel-window-action) {
  font:
    500 12px/30px "IBM Plex Sans",
    Arial,
    sans-serif !important;
}
html[data-theme] body #inspector .info-heading strong {
  font:
    500 13px/22px "IBM Plex Sans",
    Arial,
    sans-serif !important;
}

/* Shared 88x32 collapsed handles and full-width header hit area. */
html[data-theme] body #inspector {
  left: calc(var(--info-x) - var(--info-width) + 88px) !important;
}
html[data-theme] body #inspector.folded {
  left: var(--info-panel-x) !important;
  width: 200px !important;
}
html[data-theme] body #inspector.folded .info-heading {
  display: block !important;
  padding: 5px 10px 5px 17px !important;
  font:
    500 13px/22px "IBM Plex Sans",
    Arial,
    sans-serif;
  max-width: 136px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-theme] body #inspector #fold-inspector:not(.panel-window-action) {
  width: 88px !important;
}
html[data-theme] body #inspector .inspector-top,
html[data-theme] body #settings-panel .settings-title {
  width: 100% !important;
  box-sizing: border-box;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
html[data-theme] body #inspector .info-heading,
html[data-theme] body #settings-panel h2 {
  pointer-events: none;
}

/* Slim visible grip with a 12px hit strip, separate from Close and height resize. */
html[data-theme] body :is(#inspector, #settings-panel) .panel-drag-grip {
  position: absolute;
  z-index: 4;
  left: 0;
  top: 0;
  width: 12px;
  height: 32px;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
html[data-theme] body :is(#inspector, #settings-panel) .panel-drag-grip::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 9px;
  width: 3px;
  height: 14px;
  border-left: 1px solid #92958a;
  border-right: 1px solid #92958a;
  opacity: 0.65;
}
html[data-theme] body #inspector:not(.folded) .info-heading {
  padding-left: 17px !important;
}
html[data-theme] body #settings-panel:not(.folded) .settings-title {
  padding-left: 17px !important;
}

/* Image prompt, file details and controls form one bottom footer. */
#full-view #image-viewer-footer {
  order: 10;
  flex: 0 0 auto;
  min-height: 0;
  background: var(--panel-paper, #faf9f5);
  border-top: 1px solid var(--aiml-border, #aaa);
}
html[data-theme="dark"] #full-view #image-viewer-footer {
  background: #111510;
}
html[data-theme] #full-view #image-viewer-footer #full-prompt-overlay {
  position: relative;
  inset: auto;
  width: auto;
  margin: 0;
  padding: 8px 18px;
  max-height: 132px;
  overflow: auto;
  pointer-events: auto;
  user-select: text;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent !important;
  text-shadow: none;
}
#full-view #image-viewer-footer .full-description {
  margin: 0;
  border-top: 1px solid var(--aiml-border, #aaa);
}
#full-view #image-viewer-footer .full-toolbar {
  margin: 0;
}
html.immersive #full-view {
  inset: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
}
html.immersive #full-view #image-viewer-footer {
  display: none !important;
}
html.immersive #full-view .full-body,
html.immersive #full-view #full-content {
  inset: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  border: 0 !important;
}

/* Image Viewer Info floats independently, including in native fullscreen. */
html[data-theme] #full-view #full-info {
  position: fixed !important;
  left: calc(var(--info-x) - var(--info-width) + 88px) !important;
  right: auto !important;
  top: var(--info-y) !important;
  bottom: auto !important;
  width: var(--info-width) !important;
  max-width: none !important;
  height: var(--info-height) !important;
  max-height: var(--info-height) !important;
  padding: 0 !important;
  overflow: hidden !important;
  z-index: 2147483646;
  border: 1px solid var(--aiml-border, #aaa);
  background: var(--panel-paper, #faf9f5);
  scrollbar-gutter: auto;
}
html[data-theme="dark"] #full-view #full-info {
  background: #111510;
}
html.immersive #full-view #full-info:not([hidden]) {
  display: block !important;
}
html[data-theme] #full-view #full-info[hidden] {
  display: none !important;
}
html[data-theme] #full-view #full-info .inspector-top {
  position: relative;
  display: flex;
  align-items: center;
  height: 32px;
  min-height: 32px;
  padding: 0 0 0 17px;
  margin: 0;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
html[data-theme] #full-view #full-info .full-info-heading {
  font:
    500 13px/22px "IBM Plex Sans",
    Arial,
    sans-serif;
  pointer-events: none;
}
html[data-theme] #full-view #full-info-close:not(.panel-window-action) {
  position: absolute;
  right: 0;
  top: 0;
  width: 88px;
  height: 32px;
  padding: 0;
  font:
    500 12px/30px "IBM Plex Sans",
    Arial,
    sans-serif;
  cursor: grab;
  touch-action: none;
}
html[data-theme] #full-view #full-info .panel-scroll {
  height: calc(var(--info-height) - 42px);
  max-height: calc(var(--info-height) - 42px);
  overflow: auto;
  padding: 10px 12px;
  box-sizing: border-box;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #a4a49d #faf9f5;
}
html[data-theme="dark"] #full-view #full-info .panel-scroll {
  scrollbar-color: #898d83 #252721;
}
html[data-theme] #full-view #full-info.folded {
  left: var(--info-panel-x) !important;
  width: 200px !important;
  height: 32px !important;
  min-height: 32px !important;
}
#full-view #full-info.folded :is(.panel-scroll, .panel-height-grip) {
  display: none !important;
}
html[data-theme] #full-view #full-info.folded .full-info-heading {
  display: block !important;
  max-width: 136px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#full-view #full-info .panel-drag-grip {
  position: absolute;
  left: 0;
  top: 0;
  width: 12px;
  height: 32px;
  z-index: 4;
  cursor: grab;
  touch-action: none;
}
#full-view #full-info .panel-drag-grip::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 9px;
  width: 3px;
  height: 14px;
  border-left: 1px solid #92958a;
  border-right: 1px solid #92958a;
  opacity: 0.65;
}

html[data-theme] #full-view #full-info:not([hidden]) {
  display: block !important;
}

/* Resizable, virtualized Related strip. */
#full-view #full-related {
  position: relative;
  height: var(--related-height, 148px);
  padding: 12px 12px 0;
  margin: 0;
  box-sizing: border-box;
  border-top: 1px solid var(--aiml-border, #aaa);
  border-bottom: 0;
}
#full-related .related-heading {
  display: none !important;
}
#full-view #full-related-items {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  height: calc(var(--related-height, 148px) - 12px);
  max-height: none;
  margin: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  overflow-anchor: none;
}
#full-view #full-related .related-thumb {
  min-width: 0;
  padding: 2px;
  box-sizing: border-box;
}
#full-related .related-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#related-height-grip {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 12px;
  cursor: ns-resize;
  touch-action: none;
}
#related-height-grip::after {
  content: "";
  position: absolute;
  top: 4px;
  left: calc(50% - 20px);
  width: 40px;
  border-top: 2px solid #92958a;
}
#related-height-grip:focus-visible {
  outline: 2px solid #739eaa;
  outline-offset: -2px;
}
html[data-theme] #full-view #full-related-toggle[aria-pressed="true"] {
  background: #000 !important;
  color: #fff !important;
  border-color: #000 !important;
}

/* Small provenance cues distinguish actual job matches from sequence context. */
#full-related .related-thumb {
  position: relative;
}
#full-related .related-kind {
  position: absolute;
  left: 3px;
  bottom: 3px;
  padding: 2px 4px;
  font:
    500 10px/13px "IBM Plex Sans",
    sans-serif;
  background: var(--aiml-paper, #faf9f5);
  color: var(--aiml-ink, #283024);
  border: 1px solid #a4a49d;
  pointer-events: none;
}
#full-related .sequence-start {
  border-left: 3px solid #92958a !important;
}

/* Equal image heights, intrinsic widths; no CSS letterbox or image padding. */
#full-view #full-related .related-thumb {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  overflow: hidden;
  outline: 1px solid #aaa;
  outline-offset: -1px;
}
#full-view #full-related .related-thumb[aria-pressed="true"] {
  outline: 4px solid var(--aiml-ink, #283024);
  outline-offset: -4px;
}
#full-view #full-related .related-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#full-view #full-related .sequence-start {
  box-shadow: -3px 0 #92958a;
}
#full-view #full-related-items {
  scrollbar-width: auto;
  scrollbar-color: auto;
  padding-bottom: 2px;
  box-sizing: border-box;
}
#full-related-items::-webkit-scrollbar {
  height: 16px;
}
#full-related-items::-webkit-scrollbar-track {
  background: #fff;
  border: 1px solid #d0d0cc;
}
#full-related-items::-webkit-scrollbar-thumb {
  background: #999;
  border: 3px solid #fff;
  border-radius: 8px;
  min-width: 48px;
}
html[data-theme="dark"] #full-view #full-related-items {
  scrollbar-color: auto;
}
html[data-theme="dark"] #full-related-items::-webkit-scrollbar-track {
  background: #282828;
  border-color: #555;
}
html[data-theme="dark"] #full-related-items::-webkit-scrollbar-thumb {
  background: #aaa;
  border-color: #282828;
}

/* Matched Image Viewer Previous/Next geometry; other controls unchanged. */
html #full-view :is(#full-prev, #full-next) {
  box-sizing: border-box;
  flex: 0 0 84px;
  width: 84px;
  min-width: 84px;
  max-width: 84px;
  height: 36px;
  min-height: 36px;
  max-height: 36px;
  padding: 5px 7px;
  font: 500 12px/18px var(--aiml-sans);
  white-space: nowrap;
  text-align: center;
}

/* Image Viewer follows the canonical map Info header, without altering the map. */
html[data-theme] #full-view #full-info .inspector-top {
  box-sizing: border-box;
  width: 100%;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  display: block;
  border: 0;
  background: transparent;
}
html[data-theme] #full-view #full-info .full-info-heading {
  display: block;
  padding: 5px 10px 5px 17px;
  font:
    500 13px/22px "IBM Plex Sans",
    Arial,
    sans-serif !important;
  letter-spacing: 0;
}
html[data-theme] #full-view #full-info #full-info-close:not(.panel-window-action) {
  box-sizing: border-box;
  width: 88px;
  height: 32px;
  min-height: 32px;
  padding: 4px 9px !important;
  font:
    500 13px/22px "IBM Plex Sans",
    Arial,
    sans-serif !important;
  border-radius: 2px;
}

/* Final panel-header parity: shared type and understated Close, body styles untouched. */
html[data-theme] body :is(#inspector .inspector-top, #settings-panel .settings-title, #full-info .inspector-top) {
  box-sizing: border-box;
  height: 32px !important;
  min-height: 32px !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
html[data-theme] body #settings-panel .settings-title {
  padding: 0 0 0 17px !important;
}
html[data-theme] body #inspector:not(.folded) .info-heading,
html[data-theme] body #full-view #full-info .full-info-heading {
  box-sizing: border-box;
  padding: 5px 10px 5px 17px !important;
}
html[data-theme] body :is(#inspector .info-heading strong, #settings-panel h2, #full-info .full-info-heading) {
  margin: 0;
  font:
    500 13px/22px "IBM Plex Sans",
    Arial,
    sans-serif !important;
  letter-spacing: 0 !important;
}
html[data-theme]
  body
  :is(
    #inspector #fold-inspector:not(.panel-window-action),
    #settings-panel #close-settings:not(.panel-window-action),
    #full-view #full-info #full-info-close:not(.panel-window-action)
  ) {
  box-sizing: border-box;
  flex: none;
  width: 88px !important;
  min-width: 88px !important;
  max-width: 88px !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  padding: 4px 9px !important;
  font:
    500 13px/22px "IBM Plex Sans",
    Arial,
    sans-serif !important;
  letter-spacing: 0 !important;
  text-align: center;
  border: 1px solid #d4d0c7 !important;
  border-radius: 2px;
  background: #f3f1eb !important;
  color: #514e47 !important;
  box-shadow: none !important;
}
html[data-theme]
  body
  :is(
    #inspector #fold-inspector:not(.panel-window-action),
    #settings-panel #close-settings:not(.panel-window-action),
    #full-view #full-info #full-info-close:not(.panel-window-action)
  ):hover {
  background: #e8e5dd !important;
  border-color: #b1aba0 !important;
  color: #302e29 !important;
}
html[data-theme]
  body
  :is(
    #inspector #fold-inspector:not(.panel-window-action),
    #settings-panel #close-settings:not(.panel-window-action),
    #full-view #full-info #full-info-close:not(.panel-window-action)
  ):focus-visible {
  outline: 2px solid #68685e;
  outline-offset: -3px;
}
html[data-theme="dark"]
  body
  :is(
    #inspector #fold-inspector:not(.panel-window-action),
    #settings-panel #close-settings:not(.panel-window-action),
    #full-view #full-info #full-info-close:not(.panel-window-action)
  ) {
  background: #30322d !important;
  color: #e1ded5 !important;
  border-color: #57594f !important;
}
html[data-theme="dark"]
  body
  :is(
    #inspector #fold-inspector:not(.panel-window-action),
    #settings-panel #close-settings:not(.panel-window-action),
    #full-view #full-info #full-info-close:not(.panel-window-action)
  ):hover {
  background: #41433c !important;
  color: #fffdf6 !important;
}
html[data-theme] body #settings-panel.folded .settings-title {
  padding: 0 !important;
}
html[data-theme] body :is(#inspector, #settings-panel, #full-info) input[type="range"] {
  accent-color: #85867b;
}
html[data-theme="dark"] body :is(#inspector, #settings-panel, #full-info) input[type="range"] {
  accent-color: #b4b5a8;
}

/* Subtle matching panel corners, retaining existing overflow and resize hit areas. */
html[data-theme] body :is(#inspector, #settings-panel, #full-view #full-info) {
  border-radius: 5px !important;
}
html[data-theme]
  body
  :is(
    #inspector #fold-inspector:not(.panel-window-action),
    #settings-panel #close-settings:not(.panel-window-action),
    #full-view #full-info #full-info-close:not(.panel-window-action)
  ) {
  border-radius: 5px !important;
}

/* Settings uses the same fixed Close/handle screen anchor as Info. */
html[data-theme] body #settings-panel {
  left: calc(var(--info-x) - var(--info-width) + 88px) !important;
}
html[data-theme] body #settings-panel.folded {
  left: var(--info-x) !important;
}
html[data-theme] body #settings-panel #close-settings:not(.panel-window-action) {
  position: fixed;
  left: var(--info-x);
  top: var(--info-y);
  right: auto;
  z-index: 2;
}

/* IV header is inside a fixed, clipped panel, not the legacy padded scroller. */
html[data-theme] body #full-view #full-info .inspector-top {
  position: relative !important;
  top: 0 !important;
}

/* Portable panels open away from the boundary while their named handle stays anchored. */
html[data-theme] body :is(#inspector, #settings-panel, #full-view #full-info) {
  left: var(--info-panel-x) !important;
  top: var(--info-panel-y) !important;
  height: var(--info-height) !important;
  max-height: var(--info-height) !important;
}
html[data-theme]
  body
  :is(#inspector .inspector-top, #settings-panel .settings-title, #full-view #full-info .inspector-top) {
  position: fixed !important;
  left: var(--info-panel-x) !important;
  top: var(--info-y) !important;
  width: var(--info-width) !important;
  height: 32px !important;
  z-index: 4;
}
html[data-theme]
  body
  :is(#inspector, #settings-panel, #full-view #full-info).folded
  :is(.inspector-top, .settings-title) {
  width: 136px !important;
}
html[data-theme]
  body
  :is(
    #fold-inspector:not(.panel-window-action),
    #close-settings:not(.panel-window-action),
    #full-view #full-info-close:not(.panel-window-action)
  ) {
  position: fixed !important;
  left: var(--info-x) !important;
  top: var(--info-y) !important;
  right: auto !important;
}
html[data-theme]
  body
  :is(#inspector #inspector-content, #settings-panel .panel-scroll, #full-view #full-info .panel-scroll) {
  position: absolute;
  left: 0;
  right: 0;
  top: 32px;
  height: calc(var(--info-height) - 42px);
  max-height: calc(var(--info-height) - 42px);
}
html[data-theme]
  body
  :is(#inspector, #settings-panel, #full-view #full-info)[data-open-direction="up"]
  :is(#inspector-content, .panel-scroll) {
  top: 10px;
}
html[data-theme]
  body
  :is(#inspector, #settings-panel, #full-view #full-info)[data-open-direction="up"]
  > .panel-height-grip {
  top: 0;
  bottom: auto;
  border-top: 0;
  border-bottom: 1px solid var(--panel-rule, #d2d0c7);
  border-radius: 4px 4px 0 0;
}
html[data-theme]
  body
  :is(#inspector, #settings-panel, #full-view #full-info)[data-open-direction="down"]
  > .panel-height-grip {
  top: auto;
  bottom: 0;
  border-radius: 0 0 4px 4px;
}

/* IV selection emphasis: external ring occupies existing strip gap, no image crop. */
#full-view #full-related .related-thumb[aria-pressed="true"] {
  outline: 3px solid #000;
  outline-offset: 0;
  box-shadow: inset 0 0 0 2px #000;
  background: #000 !important;
}

/* Selection stays inside the thumbnail box, never overlaps adjacent artwork. */
#full-view #full-related .related-thumb[aria-pressed="true"] {
  outline: 4px solid #000;
  outline-offset: -4px;
  box-shadow: inset 0 0 0 5px #fff;
  background: #000 !important;
}

/* Compact collection controls: allow all 18 flags without an orphan row. */
@media (min-width: 1033px) {
  #lab-controls #general-filters {
    flex-basis: 244px;
  }
  #lab-controls #general-filters::after {
    display: none;
  }
}
/* Below the diagonal strip's natural width, wrap readable horizontal flags. */
@media (max-width: 1032px) {
  #lab-controls #filter-strips {
    padding: 6px 0;
    gap: 6px;
    justify-content: center;
  }
  #lab-controls #general-filters {
    flex: 1 1 100%;
    height: auto;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
  }
  #lab-controls #general-filters::after {
    display: none;
  }
  #lab-controls :is(#aspect-buttons, #media-buttons) {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    height: auto;
    justify-content: center;
  }
  #lab-controls #cluster-scroll {
    flex: 1 1 100%;
  }
  #lab-controls #cluster-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    height: auto;
  }
  html #lab-controls #filter-panel .diagonal,
  html #lab-controls #cluster-buttons button {
    transform: none !important;
    height: 26px !important;
    min-height: 26px !important;
    padding: 4px 8px !important;
  }
}
/* Hidden 3D tools must not reserve three empty columns in 2D modes. */
.lab-five-tools {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: var(--tool-column);
  width: max-content;
  max-width: 100%;
}
#lab-controls #map-favorites {
  padding: 0 0 2px;
  gap: 8px;
}
#lab-controls #map-favorites button {
  min-height: 28px;
  height: 28px;
  font-size: 12px;
  padding: 4px 9px;
}

/* Favorites belongs to the existing browse row, not a separate curation row. */
body > footer #navigation-controls #map-favorites {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 3px;
  padding: 0;
  margin: 0;
  flex: none;
}
body > footer #navigation-controls #map-favorites button {
  height: 32px;
  min-height: 32px;
  padding: 4px 7px;
  font-size: 12px;
  white-space: nowrap;
}
.favorite-access .favorite-toggle {
  font-size: 22px;
  line-height: 24px;
  width: 32px;
  min-width: 32px;
  padding: 0;
}
body > footer #navigation-controls #map-favorites .favorite-toggle {
  font-size: 22px;
  width: 32px;
  min-width: 32px;
  padding: 0;
}
/* Keep accessible button text and state; use familiar, consistently sized icons. */
html body :is(#map-info, #full-info-toggle, #map-fullscreen, #full-fullscreen) {
  font-size: 0 !important;
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  flex: 0 0 32px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
:is(#map-info, #full-info-toggle)::before {
  content: "ⓘ";
  font:
    500 22px/1 Arial,
    sans-serif;
}
:is(#map-fullscreen, #full-fullscreen)::before {
  content: "";
  width: 20px;
  height: 20px;
  background: currentColor;
  mask: center/contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='square' d='M9 3H3v6M15 3h6v6M3 15v6h6M21 15v6h-6'/%3E%3C/svg%3E");
}

/* Active tool is identified on its pressed button; reclaim the separate column. */
.lab-utility-row {
  grid-template-columns: minmax(0, 1fr) !important;
}
.lab-utility-row > .lab-feedback {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 0 !important;
  max-width: 1px !important;
  overflow: hidden !important;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Content-sized framing actions; Random leads the navigation tools. */
body
  > footer
  #navigation-controls
  .lab-linear-actions
  > :is(#random, #zoom-to-image, #fit-view, #fit-set, #theme-toggle) {
  flex: 0 0 auto;
  width: auto;
  min-width: 32px;
  padding-inline: 8px;
}
.lab-linear-actions {
  gap: 3px;
}
.lab-browse-row > .header-right {
  gap: 3px;
}

/* Keep framing and display actions right-aligned after a flexible gap. */
body > footer #navigation-controls .lab-linear-actions > #fit-view {
  margin-left: auto;
}

/* Per-mode controls occupy the existing navigation row. */
#mode-sizing-controls {
  display: flex;
  gap: 6px;
  flex: 0 0 248px;
  width: 248px;
  height: 32px;
  margin-left: auto;
}
#mode-sizing-controls label {
  display: grid;
  grid-template-columns: auto 1fr;
  width: 80px;
  font-size: 11px;
  line-height: 12px;
  gap: 0;
}
#mode-sizing-controls output {
  text-align: right;
  font-size: 10px;
}
#mode-sizing-controls input {
  grid-column: 1/-1;
  width: 80px;
  min-width: 0;
  height: 20px;
  margin: 0;
  padding: 0;
  accent-color: var(--fg, #333);
}
.lab-five-tools {
  grid-auto-columns: max-content;
}
body > footer #navigation-controls .lab-five-tools button {
  width: auto;
  min-width: 40px;
  padding-inline: 6px;
}
body > footer #navigation-controls .lab-linear-actions > #fit-view {
  margin-left: 0;
}

/* Inline terrain elevation shares the existing mapped setting, without a duplicate. */
#mode-sizing-controls label[hidden] {
  display: none !important;
}
#mode-sizing-controls.has-elevation {
  width: 330px;
  flex-basis: 330px;
  gap: 4px;
}
#mode-sizing-controls.has-elevation label {
  width: 80px;
}
#mode-sizing-controls.has-elevation input {
  width: 80px;
}
#mode-sizing-controls #mode-elevation output {
  display: block;
}
#mode-sizing-controls input[type="range"] {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  accent-color: #999;
  cursor: pointer;
}
#mode-sizing-controls input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 3px;
  background: #c5c5c5;
}
#mode-sizing-controls input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #929292;
  border: 1px solid #858585;
  margin-top: -4px;
}
#mode-sizing-controls input[type="range"]::-moz-range-track {
  height: 3px;
  border-radius: 3px;
  background: #c5c5c5;
}
#mode-sizing-controls input[type="range"]::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #929292;
  border: 1px solid #858585;
}
#mode-sizing-controls input[type="range"]:focus-visible {
  outline: 2px solid #7b8c99;
  outline-offset: 1px;
  border-radius: 3px;
}

/* Fullscreen viewer only: compact groups, neutral contrast, wrap instead of clipping. */
html.immersive.fullscreen-reveal #full-view .immersive-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: calc(100vw - 24px);
  box-sizing: border-box;
  bottom: max(12px, env(safe-area-inset-bottom));
  padding: 8px;
  background: #292929ed !important;
  color: #fff;
  border: 1px solid #fff8;
  border-radius: 10px;
  overflow: visible;
  box-shadow: 0 2px 14px #0006;
}
html.immersive #full-view .immersive-controls :is(.fullscreen-group, .favorite-access) {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  max-width: 100%;
}
html.immersive #full-view .immersive-controls button {
  box-sizing: border-box;
  min-width: 44px;
  min-height: 44px;
  height: 44px;
  padding: 6px 10px;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 500;
  border: 1px solid #fff;
  border-radius: 5px;
  color: #fff !important;
  background: #454545 !important;
  box-shadow: none;
  white-space: nowrap;
}
html.immersive #full-view .immersive-controls button:not(:disabled):hover {
  background: #585858 !important;
  border-color: #fff;
  color: #fff;
}
html.immersive #full-view .immersive-controls button:not(:disabled):is([aria-pressed="true"], :active) {
  background: #000 !important;
  box-shadow: inset 0 -3px 0 #fff;
}
html.immersive #full-view .immersive-controls button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}
html.immersive #full-view .immersive-controls button:disabled {
  opacity: 0.55;
  border-style: dashed;
}
@media (max-width: 600px) {
  html.immersive.fullscreen-reveal #full-view .immersive-controls {
    gap: 8px;
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    padding: 6px;
  }
  html.immersive #full-view .immersive-controls button {
    padding: 6px 8px;
    font-size: 12px;
  }
  html.immersive #full-view .immersive-controls .fullscreen-utility {
    order: 0;
  }
  html.immersive #full-view .immersive-controls .fullscreen-zoom {
    order: 1;
  }
  html.immersive #full-view .immersive-controls .fullscreen-navigation {
    order: 2;
    flex-basis: 100%;
    justify-content: center;
  }
  html.immersive #full-view .immersive-controls .fullscreen-playback {
    order: 3;
  }
  html.immersive #full-view .immersive-controls .favorite-access {
    order: 4;
  }
}

/* CVB identity belongs to its own controls, not the shared site masthead. */
.cvb-owned-title {
  font:
    500 11px/16px "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: inherit;
  margin-right: 16px;
}
#lab-controls #gesture-hint {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 6px;
}
#gesture-hint .gesture-copy {
  font-size: 10px;
}
.full-description > .cvb-owned-title {
  flex: none;
  margin-right: 8px;
}
html.phone-layout #lab-controls #gesture-hint {
  display: block !important;
  position: fixed !important;
  top: calc(var(--common-height) + 5px) !important;
  left: 8px !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  padding: 1px 5px !important;
  background: var(--aiml-paper, #faf9f5) !important;
  z-index: 20;
  pointer-events: none;
}
html.phone-layout #gesture-hint .gesture-copy {
  display: none;
}
html.phone-layout #gesture-hint .cvb-owned-title {
  margin: 0;
  font-size: 10px;
}
html.phone-layout .full-description > .cvb-owned-title {
  font-size: 10px;
  line-height: 14px;
}
html[data-theme="dark"].phone-layout #lab-controls #gesture-hint {
  background: #151515 !important;
  color: #ccc;
}

#phone-cvb-title {
  display: none;
}
html.phone-layout #phone-cvb-title {
  display: block;
  position: fixed;
  top: calc(var(--common-height) + 5px);
  left: 8px;
  margin: 0;
  padding: 1px 5px;
  font-size: 10px;
  z-index: 20;
  background: var(--aiml-paper, #faf9f5);
  pointer-events: none;
}
html.phone-layout:has(#full-view[open]) #phone-cvb-title {
  display: none;
}
html[data-theme="dark"].phone-layout #phone-cvb-title {
  background: #151515;
  color: #ccc;
}

html:not(.phone-layout) .lab-browse-row {
  grid-template-columns: 100px 412px max-content minmax(80px, 1fr) max-content;
  gap: 4px;
}
html:not(.phone-layout) .lab-browse-row > #map-favorites {
  grid-column: 3;
  order: 1;
  padding: 0;
}
html:not(.phone-layout) .lab-browse-row > .search-field {
  grid-column: 4;
}
html:not(.phone-layout) .lab-browse-row > .header-right {
  grid-column: 5;
}

/* CVB identity belongs to its statistics block, not the common header or artwork. */
.collection-status > .cvb-owned-title {
  display: block;
  white-space: normal;
  margin: 0 0 4px;
  flex: 0 0 100%;
  line-height: 14px;
}
html.phone-layout body > footer .collection-status > .cvb-owned-title {
  flex: 0 0 70px;
  width: 70px;
  margin: 0 3px 0 0;
  font-size: 10px;
  line-height: 12px;
  white-space: normal;
}

/* Info previews fill the padded panel width at their natural aspect ratio. */
html body #inspector #preview-open {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  padding: 0;
  margin-inline: 0;
  border: 0;
  box-sizing: border-box;
}
html body #inspector #detail-preview,
html body #full-view #full-info-preview {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  max-height: none;
  object-fit: contain;
  margin-inline: 0;
  padding: 0;
  box-sizing: border-box;
}

@media (max-width: 360px) {
  html.phone-layout body > footer .collection-status > .cvb-owned-title {
    width: 62px;
    flex-basis: 62px;
    margin-right: 1px;
  }
  html.phone-layout .collection-status #status-caption .media-count-line {
    font-size: 0;
  }
  html.phone-layout .collection-status #status-caption .media-count-line::after {
    content: attr(data-compact);
    font-size: 10px;
  }
  html.phone-layout body > footer .collection-status {
    gap: 1px;
  }
}

/* Shared portable-panel scroll affordance, without scrolling headers. */
:is(#inspector-content, #settings-panel .panel-scroll, #full-info .panel-scroll) {
  overflow-y: scroll !important;
  scrollbar-gutter: stable;
  scrollbar-color: #888 #8882;
  overscroll-behavior: contain;
}
:is(#inspector-content, #settings-panel .panel-scroll, #full-info .panel-scroll)::-webkit-scrollbar {
  width: 12px;
}
:is(#inspector-content, #settings-panel .panel-scroll, #full-info .panel-scroll)::-webkit-scrollbar-thumb {
  background: #888;
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: 8px;
}
:is(#inspector-content, #settings-panel .panel-scroll, #full-info .panel-scroll)::-webkit-scrollbar-track {
  background: #8882;
}

/* A neutral edge marks a magnetic connection; no new toolbar controls. */
:is(#inspector, #settings-panel, #full-info, #exhibitions-panel)[data-docked="true"] {
  box-shadow: 0 0 0 1px #888 !important;
}
:is(.inspector-top, .settings-title, .ex-top):focus-visible {
  outline: 2px solid #888;
  outline-offset: -2px;
}

/* Canonical floating-window typography and rule tokens. */
html[data-theme] :is(#inspector, #settings-panel, #full-info, #exhibitions-panel) {
  --floating-title-inset: 18px;
  --floating-rule: var(--aiml-border, #aaa);
  font:
    12px/1.4 "IBM Plex Sans",
    Arial,
    sans-serif !important;
  border: 1px solid var(--floating-rule) !important;
  border-radius: 4px !important;
  background: var(--panel-paper, #faf9f5) !important;
}
html[data-theme]
  :is(
    #inspector .inspector-top,
    #settings-panel .settings-title,
    #full-info .inspector-top,
    #exhibitions-panel .ex-top
  ) {
  border-bottom: 1px solid var(--floating-rule) !important;
  font:
    500 13px/22px "IBM Plex Sans",
    Arial,
    sans-serif !important;
}
html[data-theme] :is(#inspector .info-heading, #full-info .info-heading) {
  padding-left: var(--floating-title-inset) !important;
}
html[data-theme] :is(#settings-panel:not(.folded) .settings-title, #exhibitions-panel:not(.folded) .ex-top) {
  padding-left: var(--floating-title-inset) !important;
}
html[data-theme]
  :is(#settings-panel h2, #exhibitions-panel h2, #inspector .info-heading strong, #full-info .info-heading strong) {
  font:
    500 13px/22px "IBM Plex Sans",
    Arial,
    sans-serif !important;
  margin: 0 !important;
}
html[data-theme]
  :is(
    #fold-inspector:not(.panel-window-action),
    #close-settings:not(.panel-window-action),
    #full-info-close:not(.panel-window-action),
    #exhibitions-panel .ex-top > button:last-child:not(.panel-window-action)
  ) {
  font:
    500 12px/30px "IBM Plex Sans",
    Arial,
    sans-serif !important;
  border: 1px solid var(--floating-rule) !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: inherit !important;
}
html[data-theme] #exhibitions-panel :is(button, select, input) {
  font:
    12px/1.4 "IBM Plex Sans",
    Arial,
    sans-serif;
  border-color: var(--floating-rule);
  border-radius: 4px;
}
html[data-theme] #exhibitions-panel .ex-folder {
  border-color: var(--floating-rule);
}

/* Keep the CVB title on its requested two lines within the existing status row. */
.cvb-owned-title .cvb-title-line {
  white-space: nowrap;
}
html.phone-layout body > footer .collection-status > .cvb-owned-title {
  width: 70px;
  flex-basis: 70px;
  letter-spacing: 0;
}

/* Info, Settings and Exhibitions share one floating-header visual treatment.
   Positions, folding, docking, and drawer behavior are deliberately unchanged. */
html[data-theme]
  body
  :is(
    #inspector .inspector-top,
    #settings-panel .settings-title,
    #full-view #full-info .inspector-top,
    #exhibitions-panel .ex-top
  ) {
  border: 0 !important;
  background: transparent !important;
  letter-spacing: 0 !important;
}
html[data-theme] body #inspector:not(.folded) .info-heading,
html[data-theme] body #full-view #full-info .full-info-heading {
  padding-left: 18px !important;
}
html[data-theme] body :is(#settings-panel:not(.folded) .settings-title, #exhibitions-panel:not(.folded) .ex-top) {
  padding-left: 18px !important;
}
html[data-theme]
  body
  :is(
    #inspector #fold-inspector:not(.panel-window-action),
    #settings-panel #close-settings:not(.panel-window-action),
    #full-view #full-info #full-info-close:not(.panel-window-action),
    #exhibitions-panel .ex-top > button:last-child:not(.panel-window-action)
  ) {
  box-sizing: border-box;
  width: 88px !important;
  min-width: 88px !important;
  max-width: 88px !important;
  padding: 4px 9px !important;
  font:
    500 13px/22px "IBM Plex Sans",
    Arial,
    sans-serif !important;
  letter-spacing: 0 !important;
  text-align: center;
  border: 1px solid #d4d0c7 !important;
  border-radius: 5px !important;
  background: #f3f1eb !important;
  color: #514e47 !important;
  box-shadow: none !important;
}
html[data-theme]
  body
  :is(
    #inspector #fold-inspector:not(.panel-window-action),
    #settings-panel #close-settings:not(.panel-window-action),
    #full-view #full-info #full-info-close:not(.panel-window-action),
    #exhibitions-panel .ex-top > button:last-child:not(.panel-window-action)
  ):hover {
  background: #e8e5dd !important;
  border-color: #b1aba0 !important;
  color: #302e29 !important;
}
html[data-theme="dark"]
  body
  :is(
    #inspector #fold-inspector:not(.panel-window-action),
    #settings-panel #close-settings:not(.panel-window-action),
    #full-view #full-info #full-info-close:not(.panel-window-action),
    #exhibitions-panel .ex-top > button:last-child:not(.panel-window-action)
  ) {
  background: #30322d !important;
  color: #e1ded5 !important;
  border-color: #57594f !important;
}
html[data-theme="dark"]
  body
  :is(
    #inspector #fold-inspector:not(.panel-window-action),
    #settings-panel #close-settings:not(.panel-window-action),
    #full-view #full-info #full-info-close:not(.panel-window-action),
    #exhibitions-panel .ex-top > button:last-child:not(.panel-window-action)
  ):hover {
  background: #41433c !important;
  color: #fffdf6 !important;
}
html[data-theme] body #exhibitions-panel .ex-grip {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: transparent !important;
  font-size: 0 !important;
  height: 32px;
  min-height: 32px;
  top: 0;
  opacity: 0.65;
}
html[data-theme] body #exhibitions-panel .ex-grip::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 9px;
  width: 3px;
  height: 14px;
  border-left: 1px solid #92958a;
  border-right: 1px solid #92958a;
}

html:not(.phone-layout)[data-theme] body #exhibitions-panel.folded .ex-grip {
  display: block !important;
  z-index: 4;
}

/* Shared drawer target, with reserved content space and no outer scrollbar gutter. */
html[data-theme] body :is(#inspector, #settings-panel, #full-info, #exhibitions-panel) {
  scrollbar-gutter: auto !important;
}
html:not(.phone-layout) .panel-height-grip {
  height: 16px;
}
html:not(.phone-layout) .panel-height-grip::after {
  top: 6px;
}
html:not(.phone-layout)[data-theme]
  body
  :is(#inspector #inspector-content, #settings-panel .panel-scroll, #full-view #full-info .panel-scroll) {
  height: calc(var(--info-height) - 48px);
  max-height: calc(var(--info-height) - 48px);
}
html:not(.phone-layout)[data-theme]
  body
  :is(#inspector, #settings-panel, #full-view #full-info)[data-open-direction="up"]
  :is(#inspector-content, .panel-scroll) {
  top: 16px;
}
html[data-theme]
  body
  :is(#inspector-content, #settings-panel .panel-scroll, #full-info .panel-scroll, .ex-tree):focus-visible {
  outline: 2px solid #888;
  outline-offset: -2px;
}
/* An upward-opening Info header must stay clickable above the footer. */
html:not(.phone-layout) body #inspector {
  z-index: 86;
}

/* Restrained map-footer translucency. The existing full-window canvas already
   renders below these surfaces; preserve all layout/framing and opaque controls. */
html[data-theme="light"] {
  --cvb-footer-surface: rgba(247, 245, 240, 0.76);
}
html[data-theme="dark"] {
  --cvb-footer-surface: rgba(0, 0, 0, 0.74);
}
html[data-theme] #lab-controls,
html[data-theme] body > footer::before {
  background: var(--cvb-footer-surface) !important;
}
html.phone-layout[data-theme] body > footer {
  background: var(--cvb-footer-surface) !important;
}
html.phone-layout[data-theme] body > footer::before {
  background: transparent !important;
}

/* A light backing for the existing counters; pseudo-element adds no layout inset. */
body > footer .collection-status {
  isolation: isolate;
}
body > footer .collection-status::before {
  content: "";
  position: absolute;
  inset: -6px -8px;
  z-index: -1;
  border: 1px solid rgba(110, 110, 110, 0.24);
  border-radius: 6px;
  background: rgba(247, 245, 240, 0.78);
  pointer-events: none;
}
html[data-theme="dark"] body > footer .collection-status::before {
  background: rgba(28, 28, 28, 0.8);
  border-color: rgba(190, 190, 190, 0.3);
}
body > footer .collection-status.counter-movable {
  cursor: grab;
  user-select: none;
  touch-action: none;
}
body > footer .collection-status.counter-dragging {
  cursor: grabbing;
}
body > footer .collection-status.counter-movable .cvb-owned-title:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}
html.phone-layout body > footer .collection-status {
  position: relative !important;
}
html.phone-layout body > footer .collection-status::before {
  inset: 0;
  border-radius: 5px;
}

html:not(.phone-layout) body > footer .collection-status:not(.counter-movable) {
  position: relative;
}

/* One header owner for separate Minimize/Expand and deliberate Close. */
html[data-theme] body .panel-window-actions {
  position: fixed;
  left: var(--info-x);
  top: var(--info-y);
  width: 88px;
  height: 32px;
  display: flex;
  z-index: 5;
  background: var(--panel-paper);
  color: inherit;
}
html[data-theme] body .panel-window-actions > .panel-window-action {
  position: static;
  box-sizing: border-box;
  flex: 1;
  min-width: 0;
  width: auto;
  max-width: none;
  height: 32px;
  min-height: 32px;
  padding: 0 2px;
  font:
    500 12px/30px "IBM Plex Sans",
    Arial,
    sans-serif;
  border: 1px solid var(--floating-rule, var(--aiml-border));
  border-radius: 4px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  touch-action: manipulation;
}
html[data-theme] body .panel-window-actions > .panel-window-close {
  flex: 0 0 32px;
  font-size: 14px;
}
html[data-theme] body .panel-window-actions > .panel-window-action:focus-visible {
  outline: 2px solid var(--floating-rule, var(--aiml-border));
  outline-offset: -3px;
}
html.phone-layout[data-theme] body .panel-window-actions {
  position: absolute;
  inset: 0 0 auto auto;
  height: 44px;
}
html.phone-layout[data-theme] body .panel-window-actions > .panel-window-action {
  height: 44px;
  min-height: 44px;
}
html.phone-layout[data-theme] body #exhibitions-panel.folded {
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
}

/* Portable Help panel: same PanelDock owner and geometry as Info and Settings. One owner on every device. */
html[data-theme] body #help-panel[data-portable] {
  position: fixed !important;
  left: calc(var(--info-x) - var(--info-width) + 88px) !important;
  right: auto !important;
  top: var(--info-y) !important;
  bottom: auto !important;
  width: var(--info-width) !important;
  max-width: none !important;
  height: var(--info-height) !important;
  max-height: var(--info-height) !important;
  padding: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
}
html[data-theme] body #help-panel[data-portable] .help-title {
  position: relative !important;
  margin: 0 !important;
  padding: 0 0 0 17px !important;
  height: 32px;
  min-height: 32px;
  display: flex;
  align-items: center;
  cursor: grab;
  touch-action: none;
  user-select: none;
  width: 100% !important;
  box-sizing: border-box;
  border-bottom: 1px solid var(--floating-rule, var(--aiml-border)) !important;
}
html[data-theme] body #help-panel[data-portable] .help-title h2 {
  font:
    500 13px/22px "IBM Plex Sans",
    Arial,
    sans-serif !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none;
  max-width: calc(100% - 96px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-theme] body #help-panel[data-portable] .panel-scroll {
  height: calc(var(--info-height) - 42px);
  max-height: calc(var(--info-height) - 42px);
  overflow: auto;
  padding: 10px 12px;
  box-sizing: border-box;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #a4a49d #faf9f5;
}
html[data-theme="dark"] body #help-panel[data-portable] .panel-scroll {
  scrollbar-color: #898d83 #252721;
}
html[data-theme] body #help-panel[data-portable].folded {
  left: var(--info-panel-x) !important;
  width: 200px !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
}
html[data-theme] body #help-panel[data-portable].folded .panel-scroll,
html[data-theme] body #help-panel[data-portable].folded .panel-height-grip {
  display: none !important;
}
html[data-theme] body #help-panel[data-portable] .panel-drag-grip {
  position: absolute;
  z-index: 4;
  left: 0;
  top: 0;
  width: 12px;
  height: 32px;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
html[data-theme] body #help-panel[data-portable] .panel-drag-grip::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 9px;
  width: 3px;
  height: 14px;
  border-left: 1px solid #92958a;
  border-right: 1px solid #92958a;
  opacity: 0.65;
}

/* Phone Help: same owner, 44px touch header with reachable name, Minimize and Close. */
html.phone-layout[data-theme] body #help-panel[data-portable] .help-title {
  height: 44px;
  min-height: 44px;
}
html.phone-layout[data-theme] body #help-panel[data-portable] .panel-scroll {
  height: calc(var(--info-height) - 54px);
  max-height: calc(var(--info-height) - 54px);
}
html.phone-layout[data-theme] body #help-panel[data-portable].folded {
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
}
html.phone-layout[data-theme] body #help-panel[data-portable] .panel-drag-grip {
  height: 44px;
}
html.phone-layout[data-theme] body #help-panel[data-portable] .panel-drag-grip::after {
  top: 15px;
}
html.phone-layout[data-theme] body #help-panel[data-portable]:not(.folded) .panel-height-grip {
  display: block !important;
  height: 16px;
}
html.phone-layout[data-theme] body #help-panel[data-portable] .panel-drag-grip {
  display: block !important;
}

/* R130f popups: one header-action owner. The 88px action box keeps its existing position; empty space passes
   pointer input to the title/drag area, Minimize/Expand is a disclosure arrow from aria-expanded, Close stays a small X. */
html[data-theme] body .panel-window-actions {
  justify-content: flex-end;
  pointer-events: none;
  background: transparent;
}
html[data-theme] body .panel-window-actions > .panel-window-action {
  pointer-events: auto;
  flex: 0 0 32px;
  width: 32px;
  min-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 30px;
  text-align: center;
  border-radius: 0;
}
html[data-theme] body .panel-window-actions > .panel-window-action::before {
  font:
    400 12px/30px "IBM Plex Sans",
    Arial,
    sans-serif;
  display: block;
}
html[data-theme] body .panel-window-actions > .panel-window-action:not(.panel-window-close)::before {
  content: "\25BE";
}
html[data-theme]
  body
  .panel-window-actions
  > .panel-window-action:not(.panel-window-close)[aria-expanded="false"]::before {
  content: "\25B8";
}
html[data-theme] body .panel-window-actions > .panel-window-close::before {
  content: "\00D7";
  font-size: 15px;
}
html.phone-layout[data-theme] body .panel-window-actions > .panel-window-action {
  flex-basis: 44px;
  width: 44px;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
}
html.phone-layout[data-theme] body .panel-window-actions > .panel-window-action::before {
  line-height: 42px;
}
html[data-theme] body :is(#inspector, #settings-panel, #help-panel, #exhibitions-panel, #full-view #full-info) {
  border-radius: 2px !important;
}

/* R130h compact popup geometry: one header, title budget and paired action anchor. */
html[data-theme]
  body
  :is(#inspector, #settings-panel, #full-view #full-info, #help-panel[data-portable], #exhibitions-panel) {
  width: var(--info-width) !important;
  max-width: calc(100vw - 16px) !important;
  left: var(--info-panel-x) !important;
  top: var(--info-panel-y) !important;
  height: var(--info-height) !important;
  max-height: var(--info-height) !important;
}
html[data-theme]
  body
  :is(#inspector, #settings-panel, #full-view #full-info, #help-panel[data-portable], #exhibitions-panel).folded {
  width: var(--info-width) !important;
  height: var(--info-header) !important;
  min-height: var(--info-header) !important;
  max-height: var(--info-header) !important;
}
html[data-theme]
  body
  :is(
    #inspector .inspector-top,
    #settings-panel .settings-title,
    #full-view #full-info .inspector-top,
    #help-panel[data-portable] .help-title,
    #exhibitions-panel .ex-top
  ) {
  position: fixed !important;
  left: var(--info-panel-x) !important;
  top: var(--info-y) !important;
  right: auto !important;
  width: var(--info-width) !important;
  height: var(--info-header) !important;
  min-height: var(--info-header) !important;
  padding: 0 !important;
  box-sizing: border-box;
}
html[data-theme]
  body
  :is(#inspector, #settings-panel, #full-view #full-info, #help-panel[data-portable], #exhibitions-panel).folded
  :is(.inspector-top, .settings-title, .help-title, .ex-top) {
  width: var(--info-width) !important;
}
html[data-theme]
  body
  :is(
    #inspector .info-heading,
    #settings-panel h2,
    #full-info .full-info-heading,
    #help-panel[data-portable] .help-title h2,
    #exhibitions-panel h2
  ) {
  position: absolute;
  left: 18px;
  top: 0;
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  width: calc(var(--info-width) - var(--info-actions) - 22px) !important;
  max-width: none !important;
  height: var(--info-header);
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap;
  overflow: hidden;
  font:
    500 13px/22px "IBM Plex Sans",
    Arial,
    sans-serif !important;
}
html[data-theme]
  body
  :is(#inspector, #settings-panel, #full-info, #help-panel, #exhibitions-panel)
  .panel-window-actions {
  position: absolute !important;
  left: auto !important;
  right: 0 !important;
  top: 0 !important;
  width: var(--info-actions) !important;
  height: var(--info-header) !important;
}
html[data-theme]
  body
  :is(#inspector, #settings-panel, #full-info, #help-panel, #exhibitions-panel)
  .panel-window-actions
  > .panel-window-action {
  flex-basis: var(--info-header) !important;
  width: var(--info-header) !important;
  min-width: var(--info-header) !important;
  height: var(--info-header) !important;
  min-height: var(--info-header) !important;
}
html[data-theme]
  body
  :is(#inspector, #settings-panel, #full-info, #help-panel, #exhibitions-panel)
  .panel-window-actions
  > .panel-window-action::before {
  line-height: calc(var(--info-header) - 2px);
}
html[data-theme] body #help-panel[data-portable] .panel-scroll {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--info-header);
  height: calc(var(--info-height) - var(--info-header) - 16px);
  max-height: calc(var(--info-height) - var(--info-header) - 16px);
}
html[data-theme] body #help-panel[data-portable][data-open-direction="up"] .panel-scroll {
  top: 16px;
}
html[data-theme] body #exhibitions-panel {
  padding-top: calc(var(--info-header) + 8px) !important;
  padding-bottom: 18px !important;
}
html[data-theme] body #exhibitions-panel[data-open-direction="up"] {
  padding-top: 18px !important;
  padding-bottom: calc(var(--info-header) + 8px) !important;
}
html.phone-layout[data-theme] body #exhibitions-panel#exhibitions-panel {
  left: var(--info-panel-x) !important;
  top: var(--info-panel-y) !important;
  width: var(--info-width) !important;
  max-width: calc(100vw - 16px) !important;
  height: var(--info-height) !important;
  padding-top: calc(var(--info-header) + 8px) !important;
}
html.phone-layout[data-theme] body #exhibitions-panel#exhibitions-panel > .ex-top {
  position: fixed !important;
  top: var(--info-y) !important;
  margin: 0 !important;
}
html.phone-layout[data-theme] body #exhibitions-panel#exhibitions-panel.folded {
  padding: 0 !important;
}

html[data-theme] body #exhibitions-panel#exhibitions-panel.folded {
  padding: 0 !important;
}

html[data-theme] body #exhibitions-panel#exhibitions-panel .ex-top {
  left: var(--info-panel-x) !important;
  width: var(--info-width) !important;
  top: var(--info-y) !important;
}
html[data-theme] body #exhibitions-panel#exhibitions-panel .panel-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}
html[data-theme] body #exhibitions-panel#exhibitions-panel .ex-tree {
  max-height: none;
  overflow: visible;
  scrollbar-gutter: auto;
}
/* Native fullscreen only: center the existing star glyph inside its unchanged hit box. */
html.immersive .immersive-controls .favorite-toggle {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
html.immersive .immersive-controls .favorite-toggle::after {
  flex: 0 0 22px !important;
}

/* R130i common field accessibility and canonical Transparency face. */
#full-view :is(#full-prompt-overlay, #full-video-prompt) > strong {
  display: none !important;
}
#full-view .cvb-grip-label {
  color: var(--footer-glass-ink);
  font-weight: 600;
}
#viewer-transparency {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  gap: 0 4px;
  min-width: 100px;
  max-width: 180px;
  flex: 1 1 110px;
  height: 32px;
  box-sizing: border-box;
  padding: 2px 6px;
  border: 1px solid var(--footer-glass-line);
  background: var(--footer-button-glass);
  color: var(--footer-glass-ink);
  font: 500 10px/12px var(--aiml-sans);
}
#viewer-transparency input {
  grid-column: 1/3;
  align-self: center;
  width: 100%;
  min-width: 0;
  height: 14px;
  margin: 0;
  accent-color: var(--footer-glass-ink);
}
html.phone-layout #viewer-transparency {
  height: 44px;
  min-height: 44px;
  max-width: none;
  flex: 1 1 120px;
}
html.phone-layout #viewer-transparency input {
  height: 24px;
}

html:not(.desktop-viewer-command-rows):not(.phone-layout) #full-view #viewer-transparency {
  grid-column: 1/-1 !important;
  width: 100%;
  max-width: none;
  min-width: 0;
  height: 44px;
}

/* Help-only two-axis resize. No Info/Settings/Exhibitions layout changes. */
html[data-theme] body #help-panel[data-portable] > .help-corner-grip {
  display: block !important;
  position: absolute !important;
  inset: auto 0 0 auto !important;
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--panel-paper, #faf9f5) !important;
  color: var(--aiml-muted, #62665d) !important;
  cursor: nwse-resize;
  touch-action: none;
  z-index: 5;
}
html[data-theme] body #help-panel[data-portable] > .help-corner-grip::after {
  content: "↘";
  display: block;
  font:
    20px/28px Arial,
    sans-serif;
  pointer-events: none;
}
html[data-theme] body #help-panel[data-portable] > .help-corner-grip:focus-visible {
  outline: 2px solid #739eaa;
  outline-offset: -3px;
}
html[data-theme] body #help-panel[data-portable].folded > .help-corner-grip {
  display: none !important;
}
html[data-theme] body #help-panel[data-portable] .panel-scroll {
  height: calc(var(--info-height) - var(--info-header) - 28px);
  max-height: calc(var(--info-height) - var(--info-header) - 28px);
}
html.phone-layout[data-theme] body #help-panel[data-portable] > .help-corner-grip {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
}
html.phone-layout[data-theme] body #help-panel[data-portable] > .help-corner-grip::after {
  line-height: 44px;
}
html.phone-layout[data-theme] body #help-panel[data-portable] .panel-scroll {
  height: calc(var(--info-height) - var(--info-header) - 44px);
  max-height: calc(var(--info-height) - var(--info-header) - 44px);
}