/* ================= STORAGE EXPLORER — the shell, the cards and the filter bar =============
   One of four sheets, prefix is the ownership boundary: `sx-` here (shell, view switch, summary
   cards, filter bar, chips, panel chrome), `sxc-` charts, `sxr-` retention, `sxp-` the drawer —
   css-class-collision-check.py fails the build on a shared bare class. */

/* `.sx-panel`/`.sx-panel-head`/`.sx-panel-title`/`.sx-panel-note`/`.sx-f-lbl`/`.sx-f-sel` are
   declared here and reused by Retention and Maintenance markup — extend them from another sheet
   with a descendant, modifier or state; a second bare rule for the same name is not allowed. */

/* Pure `--a-*` tokens, no overrides of its own — light/dark/custom-palette and reduced-motion
   are all answered by alt-tokens.css, which is why there's no `@media (prefers-*)` here. `.sx`
   is an inline-size container; every breakpoint below is a container query, not a media query,
   because a 240px section list takes width off the PANE, not the window. */

/* No sideways scroll: every grid track is `minmax(0,…)` and every item `min-width:0`, since a
   grid item's default min-width is its CONTENT width. Selection is never colour alone
   (sys_design-system.md §20) — the chosen view/segment/chip carries a weight and edge too. */

/* ---------- the pane ---------- */

.alt-app .sx{
  container-type:inline-size;
  container-name:sxpane;
  display:flex; flex-direction:column; gap:var(--a-4);
  min-width:0;
}

/* ---------- the header strip ---------- */

.alt-app .sx-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--a-3) var(--a-4); flex-wrap:wrap; min-width:0;
}
.alt-app .sx-head-main{ min-width:0; flex:1 1 260px; }
.alt-app .sx-head-side{
  display:flex; align-items:center; gap:var(--a-2); flex-wrap:wrap;
  min-width:0; flex:0 1 auto;
}
.alt-app .sx-title{
  margin:0; font-family:var(--a-display); font-size:18px; font-weight:700;
  color:var(--a-text); line-height:1.25;
}
.alt-app .sx-sub{
  margin:2px 0 0; font-size:12px; line-height:1.5; color:var(--a-dim); max-width:78ch;
}
/* WHEN IT WAS MEASURED, at the type floor and never as a badge. Tabular so the stamp does not
   jitter between one reading and the next, and it disappears entirely when nothing has been
   read — an absent stamp says "not yet", which is true, where "never" would be a claim. */
.alt-app .sx-stamp{
  font-size:11px; color:var(--a-faint); font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* ---------- the three views ---------- */

.alt-app .sx-views{
  display:flex; align-items:center; gap:var(--a-1); flex-wrap:wrap;
  border-bottom:1px solid var(--a-line-soft); padding-bottom:var(--a-2); min-width:0;
}
.alt-app .sx-view-tab{
  height:var(--a-ctl); padding:0 var(--a-4);
  border:1px solid transparent; border-radius:var(--a-r-sm);
  background:transparent; color:var(--a-dim);
  font-family:var(--a-body); font-size:13px; font-weight:600;
  cursor:pointer; white-space:nowrap;
  transition:background var(--a-quick) var(--a-ease), color var(--a-quick) var(--a-ease);
}
.alt-app .sx-view-tab:hover{ background:var(--a-raised); color:var(--a-text); }
.alt-app .sx-view-tab:focus-visible{ outline:2px solid var(--a-ring); outline-offset:2px; }
/* Keyed on the attribute, not only the class, so appearance and what a screen reader reads
   cannot drift apart (`.a-admin-nav button[aria-current="page"]` already follows this). Three
   signals: a wash, a full border, a heavier weight. */
.alt-app .sx-view-tab[aria-selected="true"]{
  background:var(--a-blue-soft); border-color:var(--a-blue); color:var(--a-blue-text);
  font-weight:700;
}

/* Shown/hidden via the `hidden` property with an explicit `[hidden]` rule — any display value
   of its own would beat the user-agent default and leave it visible while reading as gone. */
.alt-app .sx-view{
  display:flex; flex-direction:column; gap:var(--a-4); min-width:0;
}
.alt-app .sx-view[hidden]{ display:none; }
/* A panel focused because a card sent the reader to it is a destination, not a control: it
   gets the ring, and nothing else about it changes. */
.alt-app .sx-view:focus-visible{ outline:2px solid var(--a-ring); outline-offset:4px; }

/* ---------- the four summary cards ----------
   auto-fit with a `min()` floor — `minmax(min(100%,220px),1fr)` is the form that doesn't
   overflow at 320px; a bare `minmax(220px,1fr)` pushes the fourth card off the right edge. */
.alt-app .sx-cards{
  display:grid; gap:var(--a-3);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  min-width:0;
}
/* Grid, not flex, so the text gets the card's real width — a flex row would force the scope
   badge to share horizontal space with the body text, squeezing prose into a narrow column.
   Badge and body get separate grid rows; the icon spans both and keeps its fixed box. */
.alt-app .sx-card{
  display:grid;
  grid-template-columns:34px minmax(0, 1fr);
  grid-template-areas:"ico scope"
                      "ico body";
  align-items:start; gap:2px var(--a-3);
  padding:var(--a-3) var(--a-4);
  border:1px solid var(--a-line-soft); border-radius:var(--a-r-lg);
  background:var(--a-panel); color:var(--a-text);
  font-family:var(--a-body); text-align:left; cursor:pointer; min-width:0;
  transition:border-color var(--a-quick) var(--a-ease), background var(--a-quick) var(--a-ease);
}
.alt-app .sx-card:hover{ border-color:var(--a-line-strong); background:var(--a-raised); }
.alt-app .sx-card:focus-visible{ outline:2px solid var(--a-ring); outline-offset:2px; }
/* THE ICON CARRIES THE CARD'S SUBJECT, which is what keeps the four apart for a reader who
   sees no difference between the tints. Fixed box so four cards of different value lengths
   line their text up. */
.alt-app .sx-card-ico{
  grid-area:ico; align-self:start;
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; flex:0 0 34px; border-radius:var(--a-r);
  background:var(--a-raised); color:var(--a-dim);
}
.alt-app .sx-card-ico svg{ width:19px; height:19px; }
.alt-app .sx-card.is-total .sx-card-ico{ background:var(--a-blue-soft); color:var(--a-blue-text); }
.alt-app .sx-card.is-purge .sx-card-ico{ background:var(--a-gold-soft); color:var(--a-gold); }
.alt-app .sx-card.is-orphan .sx-card-ico{ background:var(--a-amber-soft); color:var(--a-amber); }
.alt-app .sx-card.is-db .sx-card-ico{ background:var(--a-green-soft); color:var(--a-green); }
/* Purple was the one hue the other three cards hadn't taken, and alt-storage-retention.css
   already uses it for Retention's own chrome — so colour hints at where the Quick Action lands. */
.alt-app .sx-card.is-attach .sx-card-ico{ background:var(--a-purple-soft); color:var(--a-purple); }

.alt-app .sx-card-body{
  grid-area:body;
  display:flex; flex-direction:column; gap:1px; min-width:0;
}
.alt-app .sx-card-lbl{
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--a-faint);
}
/* THE FIGURE, IN THE DISPLAY FACE. `overflow-wrap:anywhere` because "Not measured yet" is a
   real value of this element and must wrap rather than widen the card. */
.alt-app .sx-card-val{
  font-family:var(--a-display); font-size:20px; font-weight:700; line-height:1.2;
  color:var(--a-text); font-variant-numeric:tabular-nums; overflow-wrap:anywhere;
}
/* THE TWO KINDS OF NUMBER LIVE HERE and the line is often long, so it wraps rather than
   truncating: an ellipsis on "…(estimated)" would hide the half of the sentence that stops
   the reader believing a purge shrinks the database file. */
.alt-app .sx-card-sub{
  font-size:11px; line-height:1.5; color:var(--a-dim); overflow-wrap:anywhere;
}
/* NO `max-width:40%` AND NO `overflow-wrap:anywhere` ANY MORE: it owns a row rather than
   competing with the body for one, so it neither needs a cap nor has any reason to break a word
   mid-syllable. It still truncates rather than widening the card if the scope text ever grows. */
.alt-app .sx-card-scope{
  grid-area:scope; justify-self:end;
  font-size:10px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--a-faint); text-align:right;
  max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ---------- the filter bar ---------- */

.alt-app .sx-filters{
  display:flex; align-items:center; gap:var(--a-2); flex-wrap:wrap;
  padding:var(--a-3); min-width:0;
  border:1px solid var(--a-line-soft); border-radius:var(--a-r);
  background:var(--a-raised);
}
.alt-app .sx-f-lbl{
  font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--a-faint); white-space:nowrap;
}
/* WIDTH FROM THE CONTENT, capped. A team name can be long and a select that sizes to its
   longest option pushes the rest of the bar off the row. */
.alt-app .sx-f-sel{ width:auto; min-width:0; max-width:200px; }
.alt-app .sx-f-search{ flex:1 1 200px; min-width:0; max-width:320px; }
/* `.control-spacer` is CSS/components.css's, and it only claims its space inside a
   `.control-row`. This bar is not one, so the behaviour is restated for this bar alone
   rather than the shared class being redefined. */
.alt-app .sx-filters .control-spacer{ flex:1 1 auto; min-width:0; }
/* Below the tablet step the bar is a stack of full-width controls: four selects, a button and
   a search field on one wrapped row at 480px is six half-rows nobody can aim at. */
@container sxpane (max-width: 559px){
  .alt-app .sx-filters{ gap:var(--a-1) var(--a-2); }
  .alt-app .sx-f-sel{ max-width:none; flex:1 1 140px; }
  .alt-app .sx-f-search{ flex:1 1 100%; max-width:none; }
}

/* ---------- the chips and the scope line ---------- */

.alt-app .sx-chips{
  display:flex; align-items:center; gap:var(--a-2); flex-wrap:wrap; min-width:0;
}
.alt-app .sx-chips[hidden]{ display:none; }
/* AN ACTIVE FILTER, NAMED. The accent edge and the accent text are two signals and the kind
   word in front of the value is a third — "Team Engineering" reads the same in greyscale. */
.alt-app .sx-chip{
  display:inline-flex; align-items:center; gap:6px;
  height:26px; padding:0 4px 0 10px; min-width:0; max-width:100%;
  border:1px solid var(--a-blue); border-radius:var(--a-r-pill);
  background:var(--a-blue-soft); color:var(--a-blue-text);
  font-size:12px; font-weight:600;
}
.alt-app .sx-chip-k{
  font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--a-dim); flex:0 0 auto;
}
.alt-app .sx-chip-t{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.alt-app .sx-chip-x{
  display:flex; align-items:center; justify-content:center;
  width:20px; height:20px; flex:0 0 20px; padding:0;
  border:none; border-radius:var(--a-r-pill);
  background:transparent; color:var(--a-blue-text);
  font-size:15px; line-height:1; cursor:pointer;
}
.alt-app .sx-chip-x:hover{ background:var(--a-panel); }
.alt-app .sx-chip-x:focus-visible{ outline:2px solid var(--a-ring); outline-offset:1px; }

/* THE ONE ANNOUNCEMENT ON THIS PANE. Empty when nothing is filtered, and an empty
   `role="status"` announces nothing — which is the point, because four live regions saying
   four halves of one change is noise a screen-reader user cannot read past. */
.alt-app .sx-scope-line{
  margin:0; font-size:12px; line-height:1.5; color:var(--a-dim);
  min-width:0; overflow-wrap:anywhere;
}
.alt-app .sx-scope-line:empty{ display:none; }

/* ---------- the panels and the two grids ---------- */

.alt-app .sx-panel{
  padding:var(--a-4); min-width:0;
  border:1px solid var(--a-line-soft); border-radius:var(--a-r-lg);
  background:var(--a-panel);
}
.alt-app .sx-panel-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--a-2) var(--a-3); flex-wrap:wrap; min-width:0;
  margin-bottom:var(--a-3);
}
.alt-app .sx-panel-head > div{ min-width:0; }
.alt-app .sx-panel-title{
  margin:0; font-family:var(--a-display); font-size:14px; font-weight:700;
  color:var(--a-text); line-height:1.3; min-width:0;
}
.alt-app .sx-panel-note{
  margin:2px 0 0; font-size:11px; line-height:1.5; color:var(--a-faint);
  max-width:78ch; min-width:0;
}
/* WHICH FIGURES ARE EXACT AND WHICH ARE ESTIMATES, under the primary chart rather than in a
   tooltip: it is the sentence that stops a reader believing a purge shrinks the database
   file, and a sentence like that is not a hover state. */
.alt-app .sx-exactness{
  margin:var(--a-3) 0 0; padding-top:var(--a-2);
  border-top:1px solid var(--a-line-soft);
  font-size:11px; line-height:1.6; color:var(--a-dim); max-width:78ch;
}
.alt-app .sx-exactness strong{ color:var(--a-text); font-weight:700; }

/* THE PRIMARY ROW — the treemap, the age chart and the type breakdown.

   One column, then two, then the treemap taking two thirds beside a stacked age and type
   column, then all three across. The steps are the pane's width, not the window's. */
.alt-app .sx-grid{
  display:grid; gap:var(--a-4); align-items:start;
  grid-template-columns:minmax(0, 1fr); min-width:0;
}
.alt-app .sx-grid > *{ min-width:0; }
@container sxpane (min-width: 720px){
  .alt-app .sx-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .alt-app .sx-grid > .sx-panel-tree{ grid-column:1 / -1; }
}
@container sxpane (min-width: 1080px){
  .alt-app .sx-grid{ grid-template-columns:minmax(0, 2fr) minmax(0, 1fr); }
  .alt-app .sx-grid > .sx-panel-tree{ grid-column:1; grid-row:1 / span 2; }
  .alt-app .sx-grid > .sx-panel-age{ grid-column:2; grid-row:1; }
  .alt-app .sx-grid > .sx-panel-type{ grid-column:2; grid-row:2; }
}
@container sxpane (min-width: 1480px){
  .alt-app .sx-grid{ grid-template-columns:minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
  .alt-app .sx-grid > .sx-panel-tree{ grid-column:1; grid-row:1; }
  .alt-app .sx-grid > .sx-panel-age{ grid-column:2; grid-row:1; }
  .alt-app .sx-grid > .sx-panel-type{ grid-column:3; grid-row:1; }
}

/* THE SUPPORTING ROW — largest attachments, storage by team, and the doors. Capped at three,
   for the reason `.a-admin-blocks-in` is: past three the layout is using the width instead of
   the reader. The actions column is the narrow one because it holds five short labels. */
.alt-app .sx-grid2{
  display:grid; gap:var(--a-4); align-items:start;
  grid-template-columns:minmax(0, 1fr); min-width:0;
}
.alt-app .sx-grid2 > *{ min-width:0; }
@container sxpane (min-width: 860px){
  .alt-app .sx-grid2{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@container sxpane (min-width: 1360px){
  .alt-app .sx-grid2{
    grid-template-columns:minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, .8fr);
  }
}

/* ---------- the segmented control ---------- */

.alt-app .sx-seg{
  display:inline-flex; align-items:center; gap:2px; flex:0 0 auto;
  padding:2px; border:1px solid var(--a-line-soft); border-radius:var(--a-r-sm);
  background:var(--a-raised);
}
.alt-app .sx-seg-btn{
  height:24px; padding:0 10px;
  border:1px solid transparent; border-radius:4px;
  background:transparent; color:var(--a-dim);
  font-family:var(--a-body); font-size:11px; font-weight:600;
  cursor:pointer; white-space:nowrap;
}
.alt-app .sx-seg-btn:hover{ color:var(--a-text); }
.alt-app .sx-seg-btn:focus-visible{ outline:2px solid var(--a-ring); outline-offset:1px; }
/* Keyed on `aria-pressed`, and marked by weight and an edge as well as the surface, so the
   chosen mode is not a shade of grey away from the other two. */
.alt-app .sx-seg-btn[aria-pressed="true"]{
  background:var(--a-panel); border-color:var(--a-line-strong);
  color:var(--a-text); font-weight:700;
}

/* ---------- the disclosures ---------- */

/* THE EXHAUSTIVE ANSWER, ONE PRESS AWAY RATHER THAN GONE. A `<details>` is used because it
   works with no script at all — a capability that vanished to make a dashboard tidier is the
   failure this redesign was written against. */
.alt-app .sx-more{
  border:1px solid var(--a-line-soft); border-radius:var(--a-r);
  background:var(--a-panel); min-width:0;
}
.alt-app .sx-more > summary{
  padding:var(--a-3) var(--a-4); cursor:pointer;
  font-size:12px; font-weight:600; color:var(--a-dim);
}
.alt-app .sx-more > summary:hover{ color:var(--a-text); }
.alt-app .sx-more > summary:focus-visible{ outline:2px solid var(--a-ring); outline-offset:-2px; }
.alt-app .sx-more[open] > summary{
  color:var(--a-text); border-bottom:1px solid var(--a-line-soft);
}
.alt-app .sx-more > *:not(summary){ margin-left:var(--a-4); margin-right:var(--a-4); }
.alt-app .sx-more > *:last-child{ margin-bottom:var(--a-4); }

/* ---------- quick actions ---------- */

/* The doors panel sits beside two tall tables; it holds five short rows and must not stretch
   to their height with a screen of nothing under the buttons. */
.alt-app .sx-panel-actions{ align-self:start; }

/* ONE PER ROW, FULL WIDTH, LEFT-ALIGNED. Five doors read as a list of destinations rather
   than as a toolbar, which is what they are — and a left edge they share is what makes them
   scannable. */
.alt-app .sx-actions{
  display:flex; flex-direction:column; gap:var(--a-2); min-width:0;
}
.alt-app .sx-action{
  width:100%; justify-content:flex-start; text-align:left; min-width:0;
}

/* ---------- the content-kind row in Retention ---------- */

.alt-app .sx-types-row{
  display:flex; align-items:center; gap:var(--a-2) var(--a-3); flex-wrap:wrap;
  margin-top:var(--a-3); min-width:0;
}