/* ===== ADAPTIVE NOTCH =====
   An alternative chrome for the gallery, switched on from shared/notch-config.js.
   Instead of the full-width header row the shell hangs a single island off one
   edge of the window. The island is painted in --shell-bg — the same ground the
   gutter around the window is painted in — so the tab and the frame read as one
   continuous surface, and two small concave wings smooth the join where the
   island meets the window's edge.

   Everything here is scoped to :root.notch-on, set by shared/notch-nav.js only
   when the switch is on. With the switch off not one selector below matches and
   the section is byte-for-byte the gallery it was. */

/* The header row is what the island replaces — it goes away whole. Its markup
   stays in the DOM: the island mirrors its labels and drives its buttons, so
   removing the elements would take the notch's data source with them. */
:root.notch-on .app-header { display: none; }

/* Without the header row the window's top inset is just the gutter, so the frame
   around it is even on all four sides and the island has a band of shell to hang
   from. Hiding the whole interface still wins: it zeroes both. */
:root.notch-on:not(.ui-hidden) { --header-h: var(--shell-gap); }

/* The handle centres itself in the header row, which is now gutter-thin — that
   would leave it half off the top edge. */
:root.notch-on:not(.ui-hidden) .sidebar-handle { top: 22px; }

/* ===== THE ISLAND =====
   One radius for the whole tab: the wings' fillet and the two free corners are
   the same curve, so the shape reads as one piece cut out of the ground rather
   than a box with a decoration stuck on. */
:root { --notch-radius: 18px; }

.lab-notch {
  position: fixed;
  /* Centred on the window, not the viewport: pinning the sidebar narrows the
     window from the right and the island follows it. */
  left: calc(50% + var(--stage-left, 0px) / 2 - var(--stage-right, 0px) / 2);
  transform: translateX(-50%);
  z-index: 24;
  display: flex;
  flex-direction: column;
  width: max-content;
  min-width: min(430px, calc(100vw - 96px));
  max-width: min(760px, calc(100vw - 96px));
  background: var(--shell-bg);
  color: var(--fg);
  font-family: var(--text);
  opacity: 1;
  /* The island is the same colour as the ground it hangs from, which is the
     whole idea — but a scene whose own background sits close to that ground
     would swallow the shape. The shadow follows the painted union, wings
     included, so the tab keeps an edge without taking a border that the wings
     could not continue. Offset and blur are matched so it never reaches above
     the tab's own top line: up there the ground and the island are the same
     colour on purpose, and a halo would draw the seam we are hiding. */
  filter: drop-shadow(0 6px 7px rgba(0, 0, 0, .17));
  transition:
    top var(--transition-med), bottom var(--transition-med),
    left var(--transition-med), background .45s,
    opacity var(--transition-fast), visibility 0s;
}
.lab-notch[data-position="top"] {
  top: var(--header-h);
  border-radius: 0 0 var(--notch-radius) var(--notch-radius);
}
.lab-notch[data-position="bottom"] {
  bottom: calc(var(--stage-bottom, 0px) + var(--shell-gap));
  border-radius: var(--notch-radius) var(--notch-radius) 0 0;
}
/* Open, the rounding moves to the panel — the island is one shape, and the
   corner belongs to whichever end of it is now the free one. */
.lab-notch.open { border-radius: 0; }

/* The switch that clears the chrome clears the island with it; the corner
   restore button is the way back, exactly as with the header row. */
:root.ui-hidden .lab-notch,
:root.ui-hidden .lab-notch-scrim {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-fast), visibility 0s var(--transition-fast);
}

/* ===== WINGS =====
   Concave fillets that carry the island's side into the flat edge it hangs
   from. They are the reason the tab does not read as a floating box: the curve
   is the same one the window's own corner would have made. */
.lab-notch-wing {
  position: absolute;
  width: 18px; height: 18px;
  overflow: visible;
  pointer-events: none;
  color: var(--shell-bg);
  transition: color .45s;
}
.lab-notch[data-position="top"] .lab-notch-wing { top: 0; }
.lab-notch[data-position="bottom"] .lab-notch-wing { bottom: 0; }
.lab-notch-wing-l { right: 100%; }
.lab-notch-wing-r { left: 100%; }

/* ===== THE BAR ===== */
.lab-notch-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 58px;
  padding: 0 10px;
  flex: 0 0 auto;
  min-width: 0;
}

/* Identity — the current scene's own thumbnail, name and meta line. Hovering it
   is what opens the actions menu, so the whole cluster is one button. */
.lab-notch-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 10px 0 6px;
  border-radius: 14px;
  min-width: 0;
  color: var(--fg);
  transition: background var(--transition-fast);
}
.lab-notch-identity:hover,
.lab-notch.open-menu .lab-notch-identity { background: var(--fg-a08); }

.lab-notch-logo {
  width: 34px; height: 34px;
  flex: 0 0 auto;
  border-radius: 10px;
  overflow: hidden;
  background: var(--menu-orb);
  color: var(--menu-orb-fg);
  display: grid; place-items: center;
  font-size: 17px;
  outline: 1px solid var(--fg-a08);
}
.lab-notch-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.lab-notch-titles {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* The two lines belong together — they are one label broken in two, not two
     stacked rows, so the leading is pulled in tight. */
  gap: 1px;
  min-width: 0;
  text-align: left;
}
.lab-notch-title {
  font-family: var(--display);
  font-weight: var(--display-weight);
  font-size: 14px;
  line-height: 1.15;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 26ch;
}
.lab-notch-sub {
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.15;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fg-a40);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 30ch;
}
.lab-notch-chevron {
  flex: 0 0 auto;
  margin-left: 2px;
  color: var(--fg-a40);
  transition: transform var(--transition-fast), color var(--transition-fast);
}
.lab-notch.open-menu .lab-notch-chevron { transform: rotate(180deg); color: var(--fg); }
.lab-notch[data-position="bottom"] .lab-notch-chevron { transform: rotate(180deg); }
.lab-notch[data-position="bottom"].open-menu .lab-notch-chevron { transform: rotate(0deg); }

.lab-notch-tools {
  display: flex;
  align-items: center;
  gap: 4px;
  /* Pushed to the far end: the island has a floor width, and on a scene with
     nothing but a name the two groups should still sit at opposite edges. */
  margin-left: auto;
  padding-left: 6px;
  flex: 0 0 auto;
}
/* A hairline between identity and tools, so the row reads as two groups. */
.lab-notch-tools::before {
  content: '';
  width: 1px; height: 22px;
  margin-right: 4px;
  background: var(--fg-a12);
}

.lab-notch-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  padding: 0 10px;
  border-radius: 11px;
  color: var(--fg-a75);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.lab-notch-btn.icon-only { width: 34px; padding: 0; }
/* The language code is the button's whole point — it survives the narrow-screen
   pass that drops the other labels. */
.lab-notch-lang-code { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; }
.lab-notch-btn:hover { background: var(--fg-a08); color: var(--fg); }
.lab-notch-btn[aria-expanded="true"] {
  background: color-mix(in srgb, var(--menu-orb) 24%, var(--fg-a08));
  color: var(--fg);
}
.lab-notch-btn[hidden] { display: none; }

/* ===== THE DROP =====
   One panel serves all three menus. It grows out of the island itself rather
   than floating below it, which is what keeps the whole thing one shape. */
.lab-notch-drop {
  position: absolute;
  left: 0; right: 0;
  display: grid;
  grid-template-rows: 0fr;
  background: var(--shell-bg);
  opacity: 0;
  transition: grid-template-rows var(--transition-med), opacity var(--transition-fast),
              background .45s;
}
/* Absolute, so the bar alone decides how wide the island is. A tip long enough
   to widen it would otherwise slide the buttons out from under the pointer that
   just opened the panel. */
.lab-notch[data-position="top"] .lab-notch-drop {
  top: 100%;
  border-radius: 0 0 var(--notch-radius) var(--notch-radius);
}
.lab-notch[data-position="bottom"] .lab-notch-drop {
  bottom: 100%;
  border-radius: var(--notch-radius) var(--notch-radius) 0 0;
}
.lab-notch.open .lab-notch-drop { grid-template-rows: 1fr; opacity: 1; }
.lab-notch-drop-clip { overflow: hidden; min-height: 0; }
.lab-notch-drop-body {
  /* A fixed ceiling, then scroll — twelve languages would otherwise push the
     island most of the way down the window. */
  max-height: 296px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  scrollbar-width: thin;
  scrollbar-color: var(--fg-a25) transparent;
}
.lab-notch[data-position="bottom"] .lab-notch-drop-body { padding: 10px 8px 2px; }

.lab-notch-drop-body::-webkit-scrollbar { width: 10px; }
.lab-notch-drop-body::-webkit-scrollbar-track { background: transparent; }
.lab-notch-drop-body::-webkit-scrollbar-thumb {
  background: var(--fg-a25);
  border-radius: 99px;
  border: 3px solid transparent;
  background-clip: content-box;
}
.lab-notch-drop-body::-webkit-scrollbar-thumb:hover {
  background: var(--fg-a40);
  background-clip: content-box;
}

/* Menu rows */
.lab-notch-row {
  display: flex;
  cursor: pointer;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 12px;
  border-radius: 12px;
  color: var(--fg-a75);
  font-size: 13.5px;
  line-height: 1.25;
  text-align: left;
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.lab-notch-row:hover { background: var(--fg-a08); color: var(--fg); }
.lab-notch-row.active {
  background: color-mix(in srgb, var(--menu-orb) 18%, var(--fg-a08));
  color: var(--fg);
  font-weight: 600;
}
.lab-notch-row svg { flex: 0 0 auto; color: var(--fg-a40); }
.lab-notch-row:hover svg,
.lab-notch-row.active svg { color: var(--fg); }
.lab-notch-row-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lab-notch-row .flag-icon { width: 18px; height: 14px; object-fit: cover; border-radius: 2px; flex: 0 0 auto; }
.lab-notch-row-check { flex: 0 0 auto; color: var(--fg); }

/* Tips — the same list the header's tips panel shows, laid out as cards so a
   two-line hint still reads as one item. */
.lab-notch-tips-title {
  padding: 4px 12px 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fg-a40);
}
.lab-notch-tips { display: flex; flex-direction: column; gap: 6px; list-style: none; }
.lab-notch-tips li {
  position: relative;
  padding: 10px 12px 10px 34px;
  border-radius: 12px;
  background: var(--fg-a05);
  color: var(--fg-a75);
  font-size: 13px;
  line-height: 1.45;
}
.lab-notch-tips li::before {
  content: '💡';
  position: absolute;
  left: 11px; top: 9px;
  font-size: 13px;
}
.lab-notch-tips li.scene-help-credit {
  padding-left: 12px;
  background: none;
  font-size: 11.5px;
  color: var(--fg-a40);
}
.lab-notch-tips li.scene-help-credit::before { content: none; }

/* ===== SCRIM =====
   A menu opened over an iframe cannot be dismissed by a click the page never
   sees, so the open state lays a catcher over the lab. It takes the window's
   exact box rather than the viewport: dimming the gutter too would darken the
   very ground the island is painted in, and the tab would stop matching the
   frame it hangs from — which is the whole illusion. Clicks landing outside
   the window are closed by the script instead. */
.lab-notch-scrim {
  position: fixed;
  top:    var(--header-h);
  left:   calc(var(--stage-left,   0px) + var(--shell-gap));
  right:  calc(var(--stage-right,  0px) + var(--shell-gap));
  bottom: calc(var(--stage-bottom, 0px) + var(--shell-gap));
  border-radius: var(--window-radius);
  z-index: 23;
  background: rgba(0, 0, 0, .16);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-fast), visibility 0s var(--transition-fast),
              top var(--transition-med), left var(--transition-med),
              right var(--transition-med), bottom var(--transition-med),
              border-radius var(--transition-med);
}
.lab-notch-scrim.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--transition-fast), visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
  .lab-notch-drop { transition: opacity var(--transition-fast); }
}

/* ===== NARROW SCREENS =====
   The island keeps its shape and drops what it can spare: the meta line first,
   then the tools' text labels. */
@media (max-width: 760px) {
  .lab-notch { max-width: calc(100vw - 40px); }
  .lab-notch-bar { height: 52px; padding: 0 8px; gap: 4px; }
  .lab-notch-identity { height: 40px; gap: 8px; padding: 0 8px 0 5px; }
  .lab-notch-logo { width: 30px; height: 30px; border-radius: 9px; }
  .lab-notch-title { font-size: 13px; max-width: 15ch; }
  .lab-notch-sub { display: none; }
  .lab-notch-btn { height: 32px; padding: 0 8px; }
  .lab-notch-btn .lab-notch-btn-label { display: none; }
  .lab-notch-btn.icon-only { width: 32px; }
  .lab-notch-tools::before { height: 18px; }
}
@media (max-width: 460px) {
  .lab-notch-title { max-width: 10ch; }
}