/* GB-TOX MODULE SHELL */
.module-gbtox {
  --gbtox-accent: #7467c7;
  --gbtox-accent-strong: #584aa8;
  --gbtox-accent-soft: #eeebff;
  --gbtox-accent-border: #afa6e5;
  --gbtox-ink: #17243b;
  --gbtox-line: rgba(73, 101, 145, 0.2);

  --gbtox-zar-mint: #63cdb0;
  --gbtox-dark-surface: #101d31;
  --gbtox-dark-surface-deep: #091422;

  color: var(--gbtox-ink);
}

.gbtox-shell {
  margin: 12px;
  padding: 18px;
  border: 1px solid var(--gbtox-line);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(245, 255, 251, 0.94), rgba(241, 246, 255, 0.92));
  box-shadow: 0 12px 38px rgba(33, 57, 92, 0.1);
}

/* MODULE HEADER */
.gbtox-header,
.gbtox-title-row,
.gbtox-monitor__summary,
.gbtox-section-heading,
.gbtox-explorer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.gbtox-eyebrow,
.gbtox-section-heading > div > span,
.gbtox-explorer-header > div > span {
  color: #567199;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.gbtox-title-row {
  justify-content: flex-start;
}

.gbtox-title-row h2 {
  margin: 3px 0;
  font-size: 1.35rem;
}

.gbtox-title-row span,
.gbtox-header p {
  color: #6d7d96;
  font-size: 0.84rem;
}

.gbtox-header p {
  margin: 0;
}

/* =========================================================
   PATCH 2026-08-27 22:34 | GB-TOX VERIFIED STATUS IDENTITY

   Links the verified GB-Tox state visually to ZAR guidance
   using the existing violet module identity and a restrained
   mint provider-status indicator.
========================================================= */

.gbtox-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  padding: 7px 12px;

  border: 1px solid var(--gbtox-line);
  border-radius: 999px;

  background: #eef2f8;

  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.gbtox-status.is-ready {
  align-self: flex-end;
  color: var(--gbtox-accent-strong);
  border-color: var(--gbtox-accent-border);

  background: linear-gradient(
    135deg,
    var(--gbtox-accent-soft),
    rgba(235, 250, 246, 0.94)
  );
}

.gbtox-status.is-ready::before {
  content: "";

  width: 8px;
  height: 8px;
  flex: 0 0 8px;

  border-radius: 50%;

  background: var(--gbtox-zar-mint);
  box-shadow: 0 0 0 3px rgba(99, 205, 176, 0.12);
}

/* PROCESS MONITOR */
.gbtox-monitor {
  margin: 14px 0;
  overflow: hidden;
  color: #edf5ff;
  background: #101d31;
  border-radius: 14px;
}

.gbtox-monitor__summary {
  min-height: 52px;
  padding: 10px 14px;
}

.gbtox-monitor__summary > div {
  display: grid;
  margin-right: auto;
}

.gbtox-monitor__summary strong {
  font-size: 0.86rem;
}

.gbtox-monitor__summary small {
  color: #9db1cd;
  font-size: 0.75rem;
}

.gbtox-monitor__signal {
  width: 12px;
  height: 12px;
  border: 3px solid var(--gbtox-accent);
  border-radius: 50%;
}

.gbtox-monitor.is-failed .gbtox-monitor__signal { border-color: #ef8791; }
.gbtox-monitor.is-complete .gbtox-monitor__signal { background: var(--gbtox-accent); }

.gbtox-monitor button,
.gbtox-heading-actions button,
.gbtox-explorer-toolbar button {
  padding: 7px 10px;
  border: 1px solid rgba(154, 182, 217, 0.4);
  border-radius: 9px;
  color: inherit;
  background: transparent;
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease, background-color 140ms ease;
}

.gbtox-monitor button:hover:not(:disabled),
.gbtox-heading-actions button:hover:not(:disabled),
.gbtox-explorer-toolbar button:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--gbtox-accent-border); background: rgba(116, 103, 199, 0.14); }
.module-gbtox button:focus-visible { outline: 3px solid rgba(116, 103, 199, 0.35); outline-offset: 2px; }
.module-gbtox button:disabled { cursor: not-allowed; }

.gbtox-progress {
  height: 4px;
  background: #263852;
}

.gbtox-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--gbtox-accent);
}

.gbtox-monitor__progress-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px 0;
  color: #9db1cd;
  font-size: 0.7rem;
}

.gbtox-console {
  margin: 10px 14px 14px;
  border: 1px solid #293b57;
  border-radius: 10px;
  background: #091422;
}
.gbtox-activity-lanes { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; padding:10px 14px 14px; }
.gbtox-activity-lanes .gbtox-console { margin:0; min-width:0; }
.gbtox-console--zar { border-color:#4b4179; }
.gbtox-console--zar header { border-color:#4b4179; color:#c9bcff; }
@media (max-width:900px) { .gbtox-activity-lanes { grid-template-columns:1fr; } }

.gbtox-console header {
  padding: 8px 12px;
  border-bottom: 1px solid #293b57;
}

.gbtox-console ol {
  margin: 0;
  padding: 10px 30px;
  max-height: 224px;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: #aabbd2;
  font-size: 0.78rem;
  /* Firefox: thin bar, thumb hidden until scrolling/hover */
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color 220ms ease;
}

.gbtox-console ol:hover,
.gbtox-console ol:focus-within,
.gbtox-console ol.is-scrolling {
  scrollbar-color: #3c5178 transparent;
}

/* WebKit/Blink: thin bar, thumb fades in only while scrolling or hovering */
.gbtox-console ol::-webkit-scrollbar { width: 6px; height: 6px; }
.gbtox-console ol::-webkit-scrollbar-track { background: transparent; }
.gbtox-console ol::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: transparent;
  transition: background-color 220ms ease;
}
.gbtox-console ol:hover::-webkit-scrollbar-thumb,
.gbtox-console ol:focus-within::-webkit-scrollbar-thumb,
.gbtox-console ol.is-scrolling::-webkit-scrollbar-thumb { background: #3c5178; }
.gbtox-console ol.is-scrolling::-webkit-scrollbar-thumb:hover { background: #4d669a; }

@media (prefers-reduced-motion: reduce) {
  .gbtox-console ol,
  .gbtox-console ol::-webkit-scrollbar-thumb { transition: none; }
}

.gbtox-console ol:empty::after { content: "No operation entries yet."; }
.gbtox-console li { display: grid; grid-template-columns: auto 1fr; gap: 8px; }
.gbtox-console li time { color: #79a6dd; font-variant-numeric: tabular-nums; }
.gbtox-console li[data-level="success"] span { color: var(--gbtox-accent); }
.gbtox-console li[data-level="error"] span { color: #ff9da6; }

.gbtox-console li span {
  color: var(--gbtox-accent);
}

/* PERSISTENT RUN SUMMARY */
.gbtox-run-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  margin-bottom: 14px;
  border-radius: 13px;
  background: #111e32;
  color: #eef4fc;
}

.gbtox-run-summary div {
  min-width: 0;
  padding: 9px 12px;
  border-right: 1px solid #73839a;
  border-bottom: 1px solid #73839a;
}

.gbtox-run-summary div:nth-child(4n) { border-right: 0; }
.gbtox-run-summary div:nth-child(n + 5) { border-bottom: 0; }

.gbtox-run-summary span,
.gbtox-run-summary strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gbtox-run-summary span {
  color: #8fa0b8;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gbtox-run-summary strong {
  margin-top: 3px;
  font-size: 0.76rem;
}


/* =========================================================================
   MARSS SHELL STANDARD - ported from Normalization & QC (the canonical MARSS
   module shell), matching the EMC / Row Namer / File Reader ports.
   Presentation/layout only. Every rule is scoped to GB-Tox as the ACTIVE dock
   tool; NQC / EMC / Row Namer / File Reader are untouched, and the shared dock
   markup is not edited.

   One coherent header, the shared chrome strip collapsed, the header lifted out
   of the scroll region, scroll ownership moved to an inner .gbtox-scroll wrapper
   (added in gb_tox_v1.php), and the disappearing scrollbar. All GB-Tox hooks /
   IDs / stages / telemetry / version / status hooks are preserved - .gbtox-scroll
   is transparent to the descendant selectors the JS uses.

   NB: the dock tool key is `gb_tox_v1`; the release collection is `gb_tox`.
========================================================================= */

/* 1) Collapse the redundant shared "MARSS MODULE / GB-Tox v1 / x" strip. */
[data-gb-marss-dock-wrapper][data-active-tool="gb_tox_v1"] .gb-marss-tool-slide__header {
  position: absolute;
  inset: 0 0 auto auto;
  padding: 0;
  border-bottom: none;
  background: none;
  pointer-events: none;
}
[data-gb-marss-dock-wrapper][data-active-tool="gb_tox_v1"] .gb-marss-tool-slide__header > div {
  display: none;
}

/* 2) Flex + min-height:0 chain - carries the dock's authoritative available
   height (.gb-marss-tool-slide { max-height: calc(100dvh - 130px) }) down to
   .gbtox-scroll so it overflows instead of expands. */
[data-gb-marss-dock-wrapper][data-active-tool="gb_tox_v1"] .gb-marss-tool-slide__body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}
[data-gb-marss-dock-wrapper][data-active-tool="gb_tox_v1"] .gb-marss-tool-view[data-gb-marss-tool-view="gb_tox_v1"],
[data-gb-marss-dock-wrapper][data-active-tool="gb_tox_v1"] .module-gbtox,
[data-gb-marss-dock-wrapper][data-active-tool="gb_tox_v1"] .gbtox-shell {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
/* file_reader_main.css forces `.gb-marss-tool-slide .zom-widget { display: block
   !important }` on EVERY widget in the slide, GB-Tox's included - which severs
   the height chain. `display` is the only property that needs !important here. */
[data-gb-marss-dock-wrapper][data-active-tool="gb_tox_v1"] .zom-widget--genebean-gbtox {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* 3) Header - flex:none sibling ABOVE .gbtox-scroll, outside the scroll track.
   Fixed at the top of the GB-Tox card, subtle bottom border + restrained
   downward shadow, z-index above the scrolled content. .gbtox-shell keeps its
   own card padding; `display: flex` from the grouped .gbtox-header rule stays. 
   remove the background to allow the underlying card color to show through.
   */
[data-gb-marss-dock-wrapper][data-active-tool="gb_tox_v1"] .module-gbtox .gbtox-header {
    flex: 0 0 auto;
    position: relative;
    z-index: 30;
    margin: 0;
    padding: 0 0 9px;
    /* background: #eef3fc; */
    border-bottom: 1px solid var(--gbtox-line);
    box-shadow: 0 4px 10px -8px rgba(24, 43, 82, 0.22);
}
/* 4) .gbtox-scroll - the scroll owner. */
[data-gb-marss-dock-wrapper][data-active-tool="gb_tox_v1"] .gbtox-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 10px 0 4px;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
[data-gb-marss-dock-wrapper][data-active-tool="gb_tox_v1"] .gbtox-scroll:hover,
[data-gb-marss-dock-wrapper][data-active-tool="gb_tox_v1"] .gbtox-scroll:focus-within,
[data-gb-marss-dock-wrapper][data-active-tool="gb_tox_v1"] .gbtox-scroll.is-scrolling {
  scrollbar-color: rgba(91, 112, 179, 0.42) transparent;
}
[data-gb-marss-dock-wrapper][data-active-tool="gb_tox_v1"] .gbtox-scroll::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
[data-gb-marss-dock-wrapper][data-active-tool="gb_tox_v1"] .gbtox-scroll::-webkit-scrollbar-track {
  background: transparent;
}
[data-gb-marss-dock-wrapper][data-active-tool="gb_tox_v1"] .gbtox-scroll::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
  background-color: transparent;
  transition: background-color 0.2s ease;
}
[data-gb-marss-dock-wrapper][data-active-tool="gb_tox_v1"] .gbtox-scroll:hover::-webkit-scrollbar-thumb,
[data-gb-marss-dock-wrapper][data-active-tool="gb_tox_v1"] .gbtox-scroll:focus-within::-webkit-scrollbar-thumb,
[data-gb-marss-dock-wrapper][data-active-tool="gb_tox_v1"] .gbtox-scroll.is-scrolling::-webkit-scrollbar-thumb {
  background-color: rgba(91, 112, 179, 0.4);
}
[data-gb-marss-dock-wrapper][data-active-tool="gb_tox_v1"] .gbtox-scroll::-webkit-scrollbar-thumb:hover {
  background-color: rgba(91, 112, 179, 0.6);
}

/* 5) The re-homed close control as a minimal "-" window control (JS sets the
   actual text). Flat, no box, hover changes only the glyph colour. Same button
   element, [data-gb-marss-tool-slide-close] hook, handler and aria-label. */
[data-gb-marss-dock-wrapper][data-active-tool="gb_tox_v1"] .gbtox-header > .gb-marss-tool-slide__close {
  position: absolute;
  top: 0px;
  right: 0px;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #6d7d96;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  transition: color 120ms ease;
}
[data-gb-marss-dock-wrapper][data-active-tool="gb_tox_v1"] .gbtox-header > .gb-marss-tool-slide__close:hover {
  background: none;
  color: var(--gbtox-ink);
}
[data-gb-marss-dock-wrapper][data-active-tool="gb_tox_v1"] .gbtox-header > .gb-marss-tool-slide__close:focus-visible {
  outline: 2px solid rgba(116, 103, 199, 0.45);
  outline-offset: 2px;
}

/* 6) Mobile - the dynamic status pill collapses to a bare dot, taken out of flow
   so it can never squeeze the "GB-Tox v1" title; the live label moves to the
   tooltip overlay via data-tooltip (kept in sync in gb_tox_v1.init.js).
   GB-Tox's own header goes column at <=800px; this tightens it further at the
   phone range, aligned with the EMC port. */
@media (max-width: 560px) {
  [data-gb-marss-dock-wrapper][data-active-tool="gb_tox_v1"] .module-gbtox .gbtox-header .gbtox-status {
    position: absolute;
    top: 12px;
    right: 26px;
    z-index: 1;
    width: 12px;
    height: 12px;
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: 0;
    gap: 0;
    border: 2px solid var(--gbtox-accent-border);
    border-radius: 50%;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
  }
  [data-gb-marss-dock-wrapper][data-active-tool="gb_tox_v1"] .module-gbtox .gbtox-header .gbtox-status::before {
    display: none;
  }
}