/* The styles of the storage views of PQAX. Every color is a custom property on .pqax-view, with a light and a dark
   value. A page overrides a property on .pqax-view or on an ancestor. The dark values apply under
   prefers-color-scheme: dark, under an ancestor with data-theme="dark", or with the theme option "dark"; the light
   values under data-theme="light" or the option "light". The palette is the reference palette of the dataviz method:
   the first five categorical hues in their validated order for the stack, one blue ramp for the null share. */

.pqax-view {
  --pqax-font: inherit;
  --pqax-ink: #0b0b0b;
  --pqax-ink-2: #52514e;
  --pqax-muted: #6b6a65;
  --pqax-grid: #e1e0d9;
  --pqax-axis: #c3c2b7;
  --pqax-surface: #fcfcfb;
  --pqax-border: rgba(11, 11, 11, 0.12);
  --pqax-focus: #0a5aa6;
  --pqax-gap: #fcfcfb;
  --pqax-live: #c3c2b7;
  --pqax-non-live: #2a78d6;
  --pqax-unreferenced: #eb6834;
  --pqax-deleted: #1baf7a;
  --pqax-overhead: #e87ba4;
  --pqax-stale: #eda100;
  --pqax-no-totals: #e1e0d9;
  --pqax-absent: #898781;
  --pqax-seq-0: #cde2fb;
  --pqax-seq-1: #9ec5f4;
  --pqax-seq-2: #6da7ec;
  --pqax-seq-3: #3987e5;
  --pqax-seq-4: #256abf;
  --pqax-seq-5: #104281;
  --pqax-seq-ink-0: #0b0b0b;
  --pqax-seq-ink-1: #0b0b0b;
  --pqax-seq-ink-2: #0b0b0b;
  --pqax-seq-ink-3: #ffffff;
  --pqax-seq-ink-4: #ffffff;
  --pqax-seq-ink-5: #ffffff;
  --pqax-no-totals-ink: #52514e;
  --pqax-strip-range: #898781;
  --pqax-strip-box: #9ec5f4;
  --pqax-strip-median: #0d366b;
  --pqax-strip-dot: #2a78d6;
  --pqax-vorder: #1baf7a;
  --pqax-vorder-track: #e1e0d9;
}

@media (prefers-color-scheme: dark) {
  .pqax-view {
    --pqax-ink: #f0efec;
    --pqax-ink-2: #c3c2b7;
    --pqax-muted: #9a9890;
    --pqax-grid: #2c2c2a;
    --pqax-axis: #4a4a46;
    --pqax-surface: #1a1a19;
    --pqax-border: rgba(255, 255, 255, 0.14);
    --pqax-focus: #79b8ff;
    --pqax-gap: #1a1a19;
    --pqax-live: #5f5e59;
    --pqax-non-live: #3987e5;
    --pqax-unreferenced: #d95926;
    --pqax-deleted: #199e70;
    --pqax-overhead: #d55181;
    --pqax-stale: #c98500;
    --pqax-no-totals: #2c2c2a;
    --pqax-absent: #898781;
    --pqax-seq-0: #0d366b;
    --pqax-seq-1: #184f95;
    --pqax-seq-2: #256abf;
    --pqax-seq-3: #3987e5;
    --pqax-seq-4: #86b6ef;
    --pqax-seq-5: #cde2fb;
    --pqax-seq-ink-0: #f0efec;
    --pqax-seq-ink-1: #f0efec;
    --pqax-seq-ink-2: #f0efec;
    --pqax-seq-ink-3: #0b0b0b;
    --pqax-seq-ink-4: #0b0b0b;
    --pqax-seq-ink-5: #0b0b0b;
    --pqax-no-totals-ink: #c3c2b7;
    --pqax-strip-range: #898781;
    --pqax-strip-box: #184f95;
    --pqax-strip-median: #cde2fb;
    --pqax-strip-dot: #6da7ec;
    --pqax-vorder: #199e70;
    --pqax-vorder-track: #2c2c2a;
  }
}

[data-theme="light"] .pqax-view,
.pqax-view.pqax-view[data-theme="light"] {
  --pqax-ink: #0b0b0b;
  --pqax-ink-2: #52514e;
  --pqax-muted: #6b6a65;
  --pqax-grid: #e1e0d9;
  --pqax-axis: #c3c2b7;
  --pqax-surface: #fcfcfb;
  --pqax-border: rgba(11, 11, 11, 0.12);
  --pqax-focus: #0a5aa6;
  --pqax-gap: #fcfcfb;
  --pqax-live: #c3c2b7;
  --pqax-non-live: #2a78d6;
  --pqax-unreferenced: #eb6834;
  --pqax-deleted: #1baf7a;
  --pqax-overhead: #e87ba4;
  --pqax-stale: #eda100;
  --pqax-no-totals: #e1e0d9;
  --pqax-absent: #898781;
  --pqax-seq-0: #cde2fb;
  --pqax-seq-1: #9ec5f4;
  --pqax-seq-2: #6da7ec;
  --pqax-seq-3: #3987e5;
  --pqax-seq-4: #256abf;
  --pqax-seq-5: #104281;
  --pqax-seq-ink-0: #0b0b0b;
  --pqax-seq-ink-1: #0b0b0b;
  --pqax-seq-ink-2: #0b0b0b;
  --pqax-seq-ink-3: #ffffff;
  --pqax-seq-ink-4: #ffffff;
  --pqax-seq-ink-5: #ffffff;
  --pqax-no-totals-ink: #52514e;
  --pqax-strip-range: #898781;
  --pqax-strip-box: #9ec5f4;
  --pqax-strip-median: #0d366b;
  --pqax-strip-dot: #2a78d6;
  --pqax-vorder: #1baf7a;
  --pqax-vorder-track: #e1e0d9;
}

[data-theme="dark"] .pqax-view,
.pqax-view.pqax-view[data-theme="dark"] {
  --pqax-ink: #f0efec;
  --pqax-ink-2: #c3c2b7;
  --pqax-muted: #9a9890;
  --pqax-grid: #2c2c2a;
  --pqax-axis: #4a4a46;
  --pqax-surface: #1a1a19;
  --pqax-border: rgba(255, 255, 255, 0.14);
  --pqax-focus: #79b8ff;
  --pqax-gap: #1a1a19;
  --pqax-live: #5f5e59;
  --pqax-non-live: #3987e5;
  --pqax-unreferenced: #d95926;
  --pqax-deleted: #199e70;
  --pqax-overhead: #d55181;
  --pqax-stale: #c98500;
  --pqax-no-totals: #2c2c2a;
  --pqax-absent: #898781;
  --pqax-seq-0: #0d366b;
  --pqax-seq-1: #184f95;
  --pqax-seq-2: #256abf;
  --pqax-seq-3: #3987e5;
  --pqax-seq-4: #86b6ef;
  --pqax-seq-5: #cde2fb;
  --pqax-seq-ink-0: #f0efec;
  --pqax-seq-ink-1: #f0efec;
  --pqax-seq-ink-2: #f0efec;
  --pqax-seq-ink-3: #0b0b0b;
  --pqax-seq-ink-4: #0b0b0b;
  --pqax-seq-ink-5: #0b0b0b;
  --pqax-no-totals-ink: #c3c2b7;
  --pqax-strip-range: #898781;
  --pqax-strip-box: #184f95;
  --pqax-strip-median: #cde2fb;
  --pqax-strip-dot: #6da7ec;
  --pqax-vorder: #199e70;
  --pqax-vorder-track: #2c2c2a;
}

/* ---- shared ---- */

.pqax-view {
  position: relative;
  color: var(--pqax-ink);
  font-family: var(--pqax-font);
  font-size: 0.875rem;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

.pqax-view svg { display: block; overflow: visible; }
.pqax-view svg text { fill: var(--pqax-ink-2); font-size: 12px; }

.pqax-view .pqax-item { outline: none; cursor: default; }
.pqax-view .pqax-item:focus-visible { outline: 2px solid var(--pqax-focus); outline-offset: 2px; }
.pqax-view svg .pqax-item:focus-visible { outline: none; }
.pqax-view svg .pqax-item:focus-visible > .pqax-hit,
.pqax-view svg .pqax-item:focus-visible > rect:first-child { stroke: var(--pqax-focus); stroke-width: 2px; }

.pqax-view .pqax-tooltip {
  position: absolute;
  z-index: 10;
  max-width: 22rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--pqax-border);
  border-radius: 6px;
  background: var(--pqax-surface);
  color: var(--pqax-ink);
  box-shadow: 0 2px 8px var(--pqax-border);
  pointer-events: none;
  font-size: 0.8125rem;
}
.pqax-view .pqax-tooltip[hidden] { display: none; }
.pqax-view .pqax-tooltip strong { display: block; margin-bottom: 0.15rem; overflow-wrap: anywhere; }
.pqax-view .pqax-tooltip span { display: block; color: var(--pqax-ink-2); }

.pqax-view .pqax-toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; margin-bottom: 0.6rem; }

.pqax-view .pqax-toggle { display: inline-flex; border: 1px solid var(--pqax-border); border-radius: 6px; overflow: hidden; }
.pqax-view .pqax-toggle button {
  font: inherit;
  padding: 0.2rem 0.65rem;
  border: 0;
  background: transparent;
  color: var(--pqax-ink-2);
  cursor: pointer;
}
.pqax-view .pqax-toggle button + button { border-left: 1px solid var(--pqax-border); }
.pqax-view .pqax-toggle button[aria-pressed="true"] { background: var(--pqax-grid); color: var(--pqax-ink); font-weight: 600; }
.pqax-view .pqax-toggle button:focus-visible { outline: 2px solid var(--pqax-focus); outline-offset: -2px; }

.pqax-view .pqax-legend { display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; color: var(--pqax-ink-2); font-size: 0.8125rem; }
.pqax-view .pqax-legend-item { display: inline-flex; align-items: center; gap: 0.35rem; }
.pqax-view .pqax-swatch { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 2px; }

.pqax-view .pqax-empty { color: var(--pqax-muted); margin: 0.5rem 0; }

/* The fills by role, shared by the HTML and the SVG of the views. */
.pqax-view [data-component="live"] { --pqax-fill: var(--pqax-live); }
.pqax-view [data-component="nonLive"] { --pqax-fill: var(--pqax-non-live); }
.pqax-view [data-component="unreferenced"] { --pqax-fill: var(--pqax-unreferenced); }
.pqax-view [data-component="deleted"] { --pqax-fill: var(--pqax-deleted); }
.pqax-view [data-component="overhead"] { --pqax-fill: var(--pqax-overhead); }
.pqax-view [data-component="stale"] { --pqax-fill: var(--pqax-stale); }
.pqax-view [data-bin="0"] { --pqax-fill: var(--pqax-seq-0); --pqax-fill-ink: var(--pqax-seq-ink-0); }
.pqax-view [data-bin="1"] { --pqax-fill: var(--pqax-seq-1); --pqax-fill-ink: var(--pqax-seq-ink-1); }
.pqax-view [data-bin="2"] { --pqax-fill: var(--pqax-seq-2); --pqax-fill-ink: var(--pqax-seq-ink-2); }
.pqax-view [data-bin="3"] { --pqax-fill: var(--pqax-seq-3); --pqax-fill-ink: var(--pqax-seq-ink-3); }
.pqax-view [data-bin="4"] { --pqax-fill: var(--pqax-seq-4); --pqax-fill-ink: var(--pqax-seq-ink-4); }
.pqax-view [data-bin="5"] { --pqax-fill: var(--pqax-seq-5); --pqax-fill-ink: var(--pqax-seq-ink-5); }
.pqax-view [data-bin="none"] { --pqax-fill: var(--pqax-no-totals); --pqax-fill-ink: var(--pqax-no-totals-ink); }
.pqax-view .pqax-swatch { background: var(--pqax-fill); }

/* An absent mark: a dashed outline, so that it does not read as a value. */
.pqax-view .pqax-absent-mark {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  border: 1px dashed var(--pqax-absent);
  border-radius: 2px;
}

/* ---- stack ---- */

/* The storage stack per table: a head with the toggle and the legend, then one grid row per table with the label, the
   bar, the marks of the missing components, and the value. Below 480 pixels the view sets data-narrow and the label
   goes above the bar. The colors are the custom properties of styles.css; --pqax-stack-marks and --pqax-stack-value
   are widths, set here and on the rows by the view. */

.pqax-stack {
  --pqax-stack-value: 5.5em;
  --pqax-stack-marks: 0rem;
}
.pqax-stack[data-mode="shares"] { --pqax-stack-value: 7.5em; }

.pqax-stack .pqax-stack-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  margin-bottom: 0.6rem;
}
.pqax-stack .pqax-stack-head .pqax-toolbar { margin-bottom: 0; }

.pqax-stack .pqax-legend .pqax-absent-mark { width: 0.75rem; height: 0.75rem; box-sizing: border-box; }

.pqax-stack .pqax-rows { display: flex; flex-direction: column; gap: 2px; }

.pqax-stack .pqax-row {
  display: grid;
  grid-template-columns: minmax(7rem, 30%) minmax(0, 1fr) var(--pqax-stack-marks) var(--pqax-stack-value);
  grid-template-areas: "label bar marks value";
  align-items: center;
  column-gap: 0.6rem;
  padding: 0.3rem 0.35rem;
  border-radius: 4px;
}
.pqax-stack .pqax-rows[data-marks="0"] .pqax-row {
  grid-template-columns: minmax(7rem, 30%) minmax(0, 1fr) var(--pqax-stack-value);
  grid-template-areas: "label bar value";
}
.pqax-stack .pqax-rows[data-marks="0"] .pqax-marks { display: none; }
.pqax-stack .pqax-row:hover { background: var(--pqax-grid); }

.pqax-stack .pqax-label {
  grid-area: label;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.pqax-stack .pqax-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--pqax-ink); }
.pqax-stack .pqax-source {
  flex: 0 100 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--pqax-muted);
  font-size: 0.75rem;
}

.pqax-stack .pqax-bar { grid-area: bar; display: flex; height: 0.875rem; min-width: 0; }
.pqax-stack .pqax-segment {
  flex: 0 1 auto;
  min-width: 1px;
  height: 100%;
  background: var(--pqax-fill);
}
.pqax-stack .pqax-segment + .pqax-segment { margin-left: 2px; }
.pqax-stack .pqax-segment[data-thin] { min-width: 0; margin-left: 0; }
.pqax-stack .pqax-segment:first-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
.pqax-stack .pqax-segment:last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
/* The overhead is outside the data: a wider gap sets it apart, thin or not. */
.pqax-stack .pqax-segment.pqax-overhead { margin-left: 6px; border-radius: 4px; }

.pqax-stack .pqax-marks { grid-area: marks; display: flex; gap: 0.25rem; align-items: center; }
.pqax-stack .pqax-absent {
  flex: none;
  box-sizing: border-box;
  border-color: var(--pqax-fill, var(--pqax-absent));
}

.pqax-stack .pqax-value { grid-area: value; text-align: right; white-space: nowrap; color: var(--pqax-ink-2); }

.pqax-stack[data-narrow] .pqax-row {
  grid-template-columns: minmax(0, 1fr) var(--pqax-stack-marks) var(--pqax-stack-value);
  grid-template-areas: "label label label" "bar marks value";
  row-gap: 0.2rem;
}
.pqax-stack[data-narrow] .pqax-rows[data-marks="0"] .pqax-row {
  grid-template-columns: minmax(0, 1fr) var(--pqax-stack-value);
  grid-template-areas: "label label" "bar value";
}

/* ---- treemap ---- */

/* The column treemap of the storage views. Every rule is scoped under .pqax-treemap and takes its colors from the
   custom properties of styles.css: the fill of a tile from data-bin, through --pqax-fill and --pqax-fill-ink. */

.pqax-treemap .pqax-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.1rem 0.15rem;
  margin-bottom: 0.5rem;
}
.pqax-treemap .pqax-breadcrumb[hidden],
.pqax-treemap .pqax-legend[hidden] { display: none; }
.pqax-treemap .pqax-breadcrumb button {
  font: inherit;
  padding: 0.1rem 0.35rem;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--pqax-ink-2);
  cursor: pointer;
}
.pqax-treemap .pqax-breadcrumb button:hover { color: var(--pqax-ink); background: var(--pqax-grid); }
.pqax-treemap .pqax-breadcrumb button[aria-current="page"] {
  color: var(--pqax-ink);
  font-weight: 600;
  cursor: default;
}
.pqax-treemap .pqax-breadcrumb button[aria-current="page"]:hover { background: transparent; }
.pqax-treemap .pqax-breadcrumb button:focus-visible { outline: 2px solid var(--pqax-focus); outline-offset: 0; }
.pqax-treemap .pqax-breadcrumb-sep { color: var(--pqax-muted); }

.pqax-treemap .pqax-treemap-plot svg { overflow: hidden; background: var(--pqax-gap); }

.pqax-treemap .pqax-tile.pqax-item { cursor: pointer; }
.pqax-treemap .pqax-tile > rect:first-child,
.pqax-treemap .pqax-subtile > rect:first-child { fill: var(--pqax-fill); }
.pqax-treemap .pqax-subtile > rect:first-child { stroke: var(--pqax-gap); stroke-width: 1px; }
.pqax-treemap .pqax-tile:hover > rect:first-child { stroke: var(--pqax-ink-2); stroke-width: 1.5px; }
.pqax-treemap .pqax-tile.pqax-absent > rect:first-child { stroke: var(--pqax-absent); stroke-width: 1px; stroke-dasharray: 3 2; }
.pqax-treemap .pqax-tile.pqax-absent:hover > rect:first-child { stroke: var(--pqax-ink-2); stroke-dasharray: none; }

.pqax-treemap .pqax-hatch { pointer-events: none; }
.pqax-treemap .pqax-hatch-line { stroke: var(--pqax-absent); stroke-width: 1.5px; }

.pqax-treemap .pqax-tile text { fill: var(--pqax-fill-ink); font-size: 12px; pointer-events: none; }
.pqax-treemap .pqax-tile.pqax-nested > text { font-weight: 600; }
.pqax-treemap .pqax-tile text.pqax-tile-value { font-size: 11px; opacity: 0.85; }
.pqax-treemap .pqax-subtile text { font-size: 11px; }

.pqax-treemap .pqax-legend { margin-top: 0.6rem; }
.pqax-treemap .pqax-legend-title { font-weight: 600; color: var(--pqax-ink-2); }

/* ---- strip ---- */

/* The file sizes per table: one SVG with an axis of bytes on a log scale, one row per table with the range, the box of
   the quartiles, the median, and the dots of the files, and a V-Order column on the right. The colors are the custom
   properties of styles.css. */

.pqax-strip .pqax-strip-chart { max-width: 100%; height: auto; }

.pqax-strip .pqax-grid { stroke: var(--pqax-grid); stroke-width: 1px; }
.pqax-strip .pqax-axis-line { stroke: var(--pqax-axis); stroke-width: 1px; }
.pqax-strip text.pqax-tick { fill: var(--pqax-muted); font-size: 11px; }
.pqax-strip text.pqax-vorder-head { fill: var(--pqax-ink-2); font-size: 11px; font-weight: 600; }

.pqax-strip .pqax-threshold { stroke: var(--pqax-muted); stroke-width: 1px; stroke-dasharray: 4 3; }
.pqax-strip text.pqax-threshold-label { fill: var(--pqax-muted); font-size: 11px; }

.pqax-strip .pqax-hit { fill: transparent; pointer-events: all; }
.pqax-strip .pqax-strip-row:hover > .pqax-hit { fill: var(--pqax-grid); fill-opacity: 0.6; }
.pqax-strip .pqax-strip-row { cursor: default; }

.pqax-strip text.pqax-label { fill: var(--pqax-ink); }

.pqax-strip .pqax-range { stroke: var(--pqax-strip-range); stroke-width: 1.5px; stroke-linecap: round; }
.pqax-strip .pqax-box { fill: var(--pqax-strip-box); }
.pqax-strip .pqax-median { stroke: var(--pqax-strip-median); stroke-width: 2.5px; stroke-linecap: round; }
.pqax-strip .pqax-dot { fill: var(--pqax-strip-dot); fill-opacity: 0.55; pointer-events: none; }

.pqax-strip .pqax-vorder-track { fill: var(--pqax-vorder-track); }
.pqax-strip .pqax-vorder-fill { fill: var(--pqax-vorder); }
.pqax-strip text.pqax-vorder-value { fill: var(--pqax-ink-2); }

.pqax-strip text.pqax-absent { fill: var(--pqax-absent); font-style: italic; }