/* ================= STORAGE EXPLORER — THE THREE CHARTS =================
   One prefix per sheet, not negotiable — `sx-` the shell, `sxc-` this file, `sxr-` retention,
   `sxp-` the drawer; two sheets declaring one bare class name is the collision
   css-class-collision-check.py exists to report. Every class here starts `sxc-`. */

/* Does not style its hosts — `.sx-tree`/`.sx-agechart`/`.sx-donutwrap` belong to alt-storage.css;
   everything here is a child of one of them. Tokens only, no second palette — every colour is
   an `--a-*` role, so both themes stay correct with no separate contrast figures. */

/* Colour is never the only signal (sys_design-system.md §18) — legend text and a border + ✓
   carry identity too. The treemap has no per-scope hue on purpose: six roles can't cover a
   dozen data classes without one hue meaning two things — area is the message, text is identity. */

/* ---------- screen-reader-only, this file's own ----------
   The same rule as alt-components.css's canonical `.a-sr`, under this sheet's own prefix — the
   collision check forbids extending a shared name from here. */
.alt-app .sxc-sr{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- the shared readout ----------
   FIXED, so it is positioned against the viewport the same way whichever scroll container the
   mark it describes happens to sit in. That makes it a layer in the application's stack, so
   its z-index is a token and never a number (sys_design-system.md §11b). */
.alt-app .sxc-tip{
  position:fixed; z-index:var(--z-float);
  max-width:min(320px, calc(100vw - 16px));
  padding:var(--a-2) var(--a-3);
  background:var(--a-float); color:var(--a-text);
  border:1px solid var(--a-line-strong); border-radius:var(--a-r);
  box-shadow:var(--a-shadow-sm);
  font-size:12px; line-height:1.45;
  pointer-events:none;
}
.alt-app .sxc-tip-t{ font-weight:650; margin-bottom:var(--a-1); }
.alt-app .sxc-tip-r{ display:flex; gap:var(--a-3); justify-content:space-between; }
.alt-app .sxc-tip-k{ color:var(--a-dim); }
.alt-app .sxc-tip-v{ font-variant-numeric:tabular-nums; text-align:right; }

/* ---------- empty and degraded ---------- */
.alt-app .sxc-empty{
  display:flex; flex-direction:column; gap:var(--a-1);
  padding:var(--a-5); border:1px dashed var(--a-line); border-radius:var(--a-r);
  background:var(--a-bg);
}
.alt-app .sxc-empty-t{ margin:0; font-weight:600; color:var(--a-text); }
.alt-app .sxc-empty-d{ margin:0; font-size:12px; color:var(--a-dim); max-width:62ch; }

/* A caveat is not a warning band: it is the sentence that keeps a figure honest, and it sits
   under the figure in the dim role every other note on this console uses. */
.alt-app .sxc-note{
  display:flex; align-items:center; flex-wrap:wrap; gap:var(--a-1) var(--a-2);
  margin:var(--a-2) 0 0; font-size:11.5px; line-height:1.5; color:var(--a-dim);
  max-width:78ch;
}
.alt-app .sxc-note.is-warn{ color:var(--a-amber); }
.alt-app .sxc-key{
  width:10px; height:10px; border-radius:3px; flex:0 0 auto;
  border:1px solid var(--a-line-strong);
}
.alt-app .sxc-key.is-exact{ background:var(--a-blue); }
.alt-app .sxc-key.is-est{ background:var(--a-blue-soft); }
.alt-app .sxc-key-l{ margin-inline-end:var(--a-3); }

/* THE SELECTED MARK. A glyph rather than an icon: it survives a stylesheet that failed to
   load, and it is the half of "selected" that is not colour. */
.alt-app .sxc-tick{
  flex:0 0 auto; font-size:11px; line-height:1; color:var(--a-blue-text);
  margin-inline-end:var(--a-1);
}

/* ============ 1 · THE TREEMAP ============ */

/* THE CANVAS HAS ITS OWN HEIGHT, and the JS measures THIS element rather than the host. The
   host belongs to another sheet and may legitimately be `height:auto`; squarify needs a real
   aspect ratio, and a box that reports zero produces a column of slivers. */
.alt-app .sxc-canvas{
  position:relative; width:100%;
  height:clamp(280px, 40vh, 440px);
  border-radius:var(--a-r); overflow:hidden;
  background:var(--a-bg);
}
.alt-app .sxc-tile{
  position:absolute; display:flex; flex-direction:column;
  padding:2px; min-width:0; min-height:0;
}
.alt-app .sxc-tile-head{
  flex:1 1 auto; min-width:0; min-height:0;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start;
  gap:1px; padding:var(--a-2);
  text-align:left; font:inherit; cursor:pointer;
  color:var(--a-text); background:var(--a-blue-soft);
  border:1px solid var(--a-line); border-radius:var(--a-r-sm);
  overflow:hidden;
}
.alt-app .sxc-tile-head:hover{ background:var(--a-blue-fill); }
/* SELECTED IS A BORDER WEIGHT FIRST. The inset ring is the same one the rest of the suite
   uses for a chosen thing (sys_design-system.md §7), and the ✓ inside carries it without any
   colour at all. */
.alt-app .sxc-tile.is-on > .sxc-tile-head{
  border-color:var(--a-blue); border-width:2px;
  box-shadow:0 0 0 1px var(--a-blue) inset;
}
.alt-app .sxc-tile-l{
  display:flex; align-items:center; min-width:0; max-width:100%;
  font-weight:650; font-size:12px; line-height:1.25;
}
.alt-app .sxc-tile-n{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.alt-app .sxc-tile-v{
  font-size:12px; font-variant-numeric:tabular-nums; color:var(--a-text);
}
.alt-app .sxc-tile-s{ font-size:10.5px; color:var(--a-dim); }
.alt-app .sxc-tile-rows{
  flex:0 0 auto; display:flex; flex-direction:column; gap:1px;
  padding:2px 0 0; min-width:0; overflow:hidden;
}
.alt-app .sxc-cls{
  display:flex; align-items:center; justify-content:space-between; gap:var(--a-2);
  width:100%; min-width:0; height:19px; padding:0 var(--a-2);
  font:inherit; font-size:11px; text-align:left; cursor:pointer;
  color:var(--a-text); background:var(--a-panel);
  border:1px solid transparent; border-radius:var(--a-r-sm);
}
.alt-app .sxc-cls:hover{ background:var(--a-raised); }
.alt-app .sxc-cls.is-on{
  border-color:var(--a-blue); border-width:2px; background:var(--a-blue-soft); font-weight:650;
}
.alt-app .sxc-cls-l{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.alt-app .sxc-cls-v{ flex:0 0 auto; font-variant-numeric:tabular-nums; color:var(--a-dim); }
.alt-app .sxc-more{ font-size:10.5px; color:var(--a-faint); padding:0 var(--a-2); }

/* ---------- bar mode ---------- */
.alt-app .sxc-bars{ display:flex; flex-direction:column; gap:var(--a-2); }
.alt-app .sxc-bar{
  display:flex; flex-direction:column; gap:var(--a-1);
  width:100%; padding:var(--a-2) var(--a-3);
  font:inherit; text-align:left; cursor:pointer;
  color:var(--a-text); background:var(--a-panel);
  border:1px solid var(--a-line); border-radius:var(--a-r);
}
.alt-app .sxc-bar:hover{ background:var(--a-raised); }
.alt-app .sxc-bar.is-on{
  border-color:var(--a-blue); border-width:2px;
  box-shadow:0 0 0 1px var(--a-blue) inset;
}
.alt-app .sxc-bar-top{ display:flex; align-items:baseline; gap:var(--a-2); min-width:0; }
.alt-app .sxc-bar-l{
  flex:1 1 auto; min-width:0; font-weight:600; font-size:13px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.alt-app .sxc-bar-v{ flex:0 0 auto; font-variant-numeric:tabular-nums; font-size:13px; }
/* THE TRACK IS A GRID ROW OF ITS OWN HEIGHT, so a fill can never be drawn over the label
   beneath it — the failure sys_design-system.md §10 records for the week columns. */
.alt-app .sxc-bar-track{
  display:flex; width:100%; height:10px; border-radius:var(--a-r-pill);
  background:var(--a-bg); border:1px solid var(--a-line-soft); overflow:hidden;
}
.alt-app .sxc-bar-fill{ width:var(--sxc-v, 0%); height:100%; }
.alt-app .sxc-bar-fill.is-exact{ background:var(--a-blue); }
.alt-app .sxc-bar-fill.is-est{ background:var(--a-blue-soft); }
.alt-app .sxc-bar-sub{ font-size:11px; color:var(--a-dim); }

/* ---------- table mode ---------- */
/* ITS OWN SCROLLER. Six columns of figures do not fit a phone, and a table that widens the
   PAGE is a horizontal scrollbar on everything else as well. */
.alt-app .sxc-tablewrap{ width:100%; overflow-x:auto; }
.alt-app .sxc-table{
  width:100%; border-collapse:collapse; font-size:12.5px; min-width:560px;
}
.alt-app .sxc-table th,
.alt-app .sxc-table td{
  padding:var(--a-2) var(--a-3); text-align:left;
  border-bottom:1px solid var(--a-line-soft); white-space:nowrap;
}
.alt-app .sxc-table thead th{
  font-size:11px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--a-dim); border-bottom:1px solid var(--a-line);
}
.alt-app .sxc-num{ text-align:right; font-variant-numeric:tabular-nums; }
.alt-app .sxc-table tr.is-on{ background:var(--a-blue-soft); }
.alt-app .sxc-tcell{
  display:inline-flex; align-items:center; max-width:32ch;
  padding:2px var(--a-1); margin-inline-start:calc(var(--a-1) * -1);
  font:inherit; font-weight:600; text-align:left; cursor:pointer;
  color:var(--a-text); background:none; border:1px solid transparent; border-radius:var(--a-r-sm);
}
.alt-app .sxc-tcell:hover{ background:var(--a-raised); }
.alt-app .sxc-tcell.is-on{ border-color:var(--a-blue); border-width:2px; }

/* ============ 2 · AGE DISTRIBUTION ============ */

/* AN EXPLICIT GRID, not flex: five equal tracks that a tall bar cannot overrun, and
   minmax(0,1fr) so a long band label cannot push the row wider than its container. */
.alt-app .sxc-age{
  display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:var(--a-2);
  align-items:end;
}
.alt-app .sxc-age-col{ min-width:0; display:flex; }
.alt-app .sxc-age-btn{
  flex:1 1 auto; min-width:0;
  display:flex; flex-direction:column; gap:var(--a-1);
  padding:var(--a-1); font:inherit; cursor:pointer;
  color:var(--a-text); background:none;
  border:1px solid transparent; border-radius:var(--a-r-sm);
}
.alt-app .sxc-age-btn:hover{ background:var(--a-raised); }
.alt-app .sxc-age-btn.is-on{
  border-color:var(--a-blue); border-width:2px; background:var(--a-blue-soft);
}
.alt-app .sxc-age-track{
  display:flex; flex-direction:column; justify-content:flex-end; align-items:center;
  gap:var(--a-1); height:150px; min-width:0;
}
.alt-app .sxc-age-val{
  font-size:11px; font-variant-numeric:tabular-nums; color:var(--a-dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
.alt-app .sxc-age-fill{
  width:100%; height:var(--sxc-v, 2%); min-height:2px;
  background:var(--a-blue); border-radius:var(--a-r-sm) var(--a-r-sm) 0 0;
}
/* A BAND WITH NOTHING IN IT IS STILL A MEASUREMENT. It keeps its hairline and its "0" rather
   than disappearing, because an absent bar reads as a band nobody counted. */
.alt-app .sxc-age-btn.is-zero > .sxc-age-track > .sxc-age-fill{ background:var(--a-line-strong); }
.alt-app .sxc-age-btn.is-on > .sxc-age-track > .sxc-age-fill{ background:var(--a-blue-text); }
.alt-app .sxc-age-lab{
  display:flex; align-items:center; justify-content:center; gap:1px;
  font-size:11px; line-height:1.3; text-align:center; color:var(--a-dim);
  overflow-wrap:anywhere;
}
.alt-app .sxc-age-btn.is-on > .sxc-age-lab{ color:var(--a-text); font-weight:650; }

/* ============ 3 · DATA TYPE BREAKDOWN ============ */

.alt-app .sxc-donut{
  display:grid; grid-template-columns:minmax(0, 168px) minmax(0, 1fr);
  gap:var(--a-4); align-items:center;
}
.alt-app .sxc-donut-svg{ width:100%; height:auto; max-width:168px; display:block; }
.alt-app .sxc-slice{
  fill:none; stroke-width:14; stroke:var(--a-line-strong);
}
.alt-app .sxc-slice.is-live{ cursor:pointer; }
/* The selected slice thickens AND lightens: two signals, and the legend row beside it carries
   the word as well. Unselected slices dim rather than vanish, so the distribution stays whole
   (sys_design-system.md §7). */
.alt-app .sxc-slice.is-on{ stroke-width:19; }
.alt-app .sxc-s0{ stroke:var(--a-faint); }
.alt-app .sxc-s1{ stroke:var(--a-blue); }
.alt-app .sxc-s2{ stroke:var(--a-purple); }
.alt-app .sxc-s3{ stroke:var(--a-gold); }
.alt-app .sxc-s4{ stroke:var(--a-green); }
.alt-app .sxc-s5{ stroke:var(--a-amber); }
.alt-app .sxc-donut-val{
  fill:var(--a-text); font-size:9px; font-weight:700;
  font-family:var(--a-display, inherit);
}
.alt-app .sxc-donut-cap{ fill:var(--a-dim); font-size:4.6px; letter-spacing:.06em; }

.alt-app .sxc-legend{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.alt-app .sxc-lg{
  display:flex; align-items:flex-start; gap:var(--a-2);
  width:100%; padding:var(--a-1) var(--a-2);
  font:inherit; font-size:12px; text-align:left;
  color:var(--a-text); background:none;
  border:1px solid transparent; border-radius:var(--a-r-sm);
}
.alt-app button.sxc-lg{ cursor:pointer; }
.alt-app button.sxc-lg:hover{ background:var(--a-raised); }
.alt-app .sxc-lg.is-on{ border-color:var(--a-blue); border-width:2px; background:var(--a-blue-soft); }
/* "Other" is not a control: there is no filter value meaning "every class outside the top
   five", so it is drawn as text and reads as text. */
.alt-app .sxc-lg.is-inert{ color:var(--a-dim); }
.alt-app .sxc-sw{
  flex:0 0 auto; width:11px; height:11px; margin-top:3px; border-radius:3px;
  border:1px solid var(--a-line-strong);
}
/* The swatch takes the series colour from the same class the slice does — one declaration,
   so a legend can never disagree with the ring it labels. */
.alt-app .sxc-sw.sxc-s0{ background:var(--a-faint); }
.alt-app .sxc-sw.sxc-s1{ background:var(--a-blue); }
.alt-app .sxc-sw.sxc-s2{ background:var(--a-purple); }
.alt-app .sxc-sw.sxc-s3{ background:var(--a-gold); }
.alt-app .sxc-sw.sxc-s4{ background:var(--a-green); }
.alt-app .sxc-sw.sxc-s5{ background:var(--a-amber); }
.alt-app .sxc-lg-b{ display:flex; flex-direction:column; min-width:0; flex:1 1 auto; }
.alt-app .sxc-lg-l{ display:flex; align-items:center; gap:var(--a-1); min-width:0; }
.alt-app .sxc-lg-v{ font-size:11px; color:var(--a-dim); font-variant-numeric:tabular-nums; }
.alt-app .sxc-tag{
  flex:0 0 auto; font-size:9.5px; letter-spacing:.03em; text-transform:uppercase;
  padding:0 4px; border-radius:var(--a-r-pill);
  color:var(--a-dim); border:1px solid var(--a-line);
}

/* ---------- motion ----------
   Only colour and shadow transition, dropped under prefers-reduced-motion — nothing animates
   size or position, since a treemap tile easing into place is a wrong area mid-animation. */
.alt-app .sxc-tile-head,
.alt-app .sxc-cls,
.alt-app .sxc-bar,
.alt-app .sxc-age-btn,
.alt-app .sxc-lg,
.alt-app .sxc-tcell{ transition:background-color var(--a-quick) var(--a-ease), border-color var(--a-quick) var(--a-ease); }
@media (prefers-reduced-motion: reduce){
  .alt-app .sxc-tile-head,
  .alt-app .sxc-cls,
  .alt-app .sxc-bar,
  .alt-app .sxc-age-btn,
  .alt-app .sxc-lg,
  .alt-app .sxc-tcell{ transition:none; }
}

/* ---------- narrow ----------
   The age chart turns on its side rather than shrinking — five vertical tracks at 340px leave
   each band ~55px, too narrow for "181–365 days" without wrapping to four lines. Horizontal
   rows keep every figure and band; the fill is a custom property so one number is a height
   here and a width there. */
@media (max-width: 560px){
  .alt-app .sxc-age{ grid-template-columns:minmax(0, 1fr); gap:var(--a-1); }
  .alt-app .sxc-age-btn{ flex-direction:row; align-items:center; gap:var(--a-2); }
  .alt-app .sxc-age-lab{
    order:1; flex:0 0 9.5em; justify-content:flex-start; text-align:left;
  }
  .alt-app .sxc-age-track{
    order:2; flex:1 1 auto; flex-direction:row; align-items:center; justify-content:flex-start;
    height:auto; width:100%;
  }
  .alt-app .sxc-age-fill{
    order:1; height:12px; min-height:0; width:var(--sxc-v, 2%); min-width:2px;
    border-radius:0 var(--a-r-sm) var(--a-r-sm) 0;
  }
  .alt-app .sxc-age-val{ order:2; flex:0 0 auto; }

  .alt-app .sxc-donut{ grid-template-columns:minmax(0, 1fr); justify-items:center; }
  .alt-app .sxc-donut-svg{ max-width:200px; }
  .alt-app .sxc-legend{ width:100%; }
  /* Tall and narrow: at this width the horizontal split squarify prefers is exactly the wrong
     way round, and a taller canvas gives every scope a readable block. */
  .alt-app .sxc-canvas{ height:clamp(320px, 68vh, 520px); }
}