/* ================= Storage Explorer — the scope drawer =================
   Owns the scope drawer panel, its class-mix bar, fact lists, file table and run rows — cards
   and filters are alt-storage.css's, charts are alt-storage-charts.css's, retention is
   alt-storage-retention.css's; every class here begins `sxp-`. */

/* No z-index is authored beyond `--z-panel` — JS/core/layers.js raises it inline when needed, so
   an authored number here would start the 99999 problem z-scale-check.py exists to catch.
   Backdrop and panel share it; DOM order (backdrop first, admin.html) settles who's on top.
   Scoped under `.alt-app`, `--a-*` roles only — theme comes free (alt-tokens.css's own header). */

/* ---------- the backdrop ---------- */

.alt-app .sx-drawer-backdrop{
  position:fixed;
  inset:0;
  z-index:var(--z-panel);
  background:rgba(0,0,0,.46);
  animation:sxp-fade var(--a-quick) var(--a-ease);
}

/* ---------- the panel ---------- */

.alt-app .sx-drawer{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  z-index:var(--z-panel);
  width:min(560px, 100vw);
  display:flex;
  flex-direction:column;
  background:var(--a-panel);
  border-left:1px solid var(--a-line);
  box-shadow:var(--a-shadow-lg);
  animation:sxp-slide var(--a-quick) var(--a-ease);
}

.alt-app .sx-drawer-head{
  display:flex;
  align-items:flex-start;
  gap:var(--a-3);
  padding:var(--a-4) var(--a-5);
  /* One step above the panel, so the identity of what is being inspected stays legible when
     the body underneath it scrolls. */
  background:var(--a-float);
  border-bottom:1px solid var(--a-line);
}

.alt-app .sx-drawer-id{ min-width:0; flex:1; }

.alt-app .sx-drawer-title{
  margin:0;
  font-family:var(--a-display);
  font-size:16px;
  font-weight:600;
  color:var(--a-text);
  /* A team name is user-supplied and can be long. It wraps rather than pushing the close
     button off the panel — a control you cannot reach is the same as one that is not there. */
  overflow-wrap:anywhere;
}

.alt-app .sx-drawer-sub{
  margin:var(--a-1) 0 0;
  font-size:12px;
  color:var(--a-dim);
  overflow-wrap:anywhere;
}

.alt-app .sx-drawer-x{
  flex:0 0 auto;
  width:var(--a-ctl);
  height:var(--a-ctl);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--a-line);
  border-radius:var(--a-r-sm);
  background:transparent;
  color:var(--a-dim);
  cursor:pointer;
}

.alt-app .sx-drawer-x svg{ width:16px; height:16px; }

.alt-app .sx-drawer-x:hover{ color:var(--a-text); border-color:var(--a-line-strong); }

.alt-app .sx-drawer-x:focus-visible{ outline:2px solid var(--a-ring); outline-offset:2px; }

/* ---------- the tabs ---------- */

.alt-app .sx-drawer-tabs{
  display:flex;
  gap:var(--a-1);
  padding:0 var(--a-5);
  background:var(--a-float);
  border-bottom:1px solid var(--a-line);
  /* Four short labels fit at every width this panel is drawn at, but a longer set later must
     scroll inside the strip rather than widening the page. */
  overflow-x:auto;
}

.alt-app .sx-drawer-tab{
  flex:0 0 auto;
  padding:var(--a-2) var(--a-3);
  border:0;
  border-bottom:2px solid transparent;
  background:transparent;
  color:var(--a-dim);
  font:inherit;
  font-size:13px;
  cursor:pointer;
}

.alt-app .sx-drawer-tab:hover{ color:var(--a-text); }

/* The selected tab carries a color AND a rule under it: the state is never in hue alone. */
.alt-app .sx-drawer-tab.on{
  color:var(--a-text);
  border-bottom-color:var(--a-blue);
}

.alt-app .sx-drawer-tab:focus-visible{ outline:2px solid var(--a-ring); outline-offset:-2px; }

/* ---------- the body ---------- */

.alt-app .sx-drawer-body{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  padding:var(--a-5);
}

.alt-app .sx-drawer-panel{
  display:flex;
  flex-direction:column;
  gap:var(--a-4);
}

/* ---------- the class mix ---------- */

.alt-app .sx-drawer-mix{
  display:flex;
  flex-direction:column;
  gap:var(--a-3);
}

.alt-app .sxp-mix-bar{
  display:flex;
  height:10px;
  border-radius:var(--a-r-pill);
  overflow:hidden;
  background:var(--a-raised);
}

.alt-app .sxp-mix-seg{ display:block; height:100%; }

.alt-app .sxp-mix-key{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:var(--a-1);
}

.alt-app .sxp-mix-item{
  display:flex;
  align-items:baseline;
  gap:var(--a-2);
  font-size:12px;
  color:var(--a-text);
}

.alt-app .sxp-mix-dot{
  flex:0 0 auto;
  width:8px;
  height:8px;
  border-radius:var(--a-r-pill);
  /* The swatch is a repeat of the bar, never the only way to tell one class from another —
     the name is beside it and the size after that. */
}

.alt-app .sxp-mix-name{ flex:1 1 auto; min-width:0; overflow-wrap:anywhere; }

.alt-app .sxp-mix-size{ flex:0 0 auto; font-family:var(--a-mono); color:var(--a-dim); }

/* WHICH OF THE TWO KINDS OF NUMBER THIS IS, on every row. Attachment bytes are measured;
   everything else is an estimate of row content, and a panel that prints them in one list
   without saying so is the failure sys_data-lifecycle.md names. */
.alt-app .sxp-mix-kind{
  flex:0 0 auto;
  font-size:10px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--a-faint);
}

/* SIX ROLES, AND THEY MEAN NOTHING. Gold is emphasis and never status in this palette, and no
   class here is good or bad — these separate adjacent segments and nothing more. */
.alt-app .sxp-mix-seg.k1, .alt-app .sxp-mix-dot.k1{ background:var(--a-blue); }
.alt-app .sxp-mix-seg.k2, .alt-app .sxp-mix-dot.k2{ background:var(--a-purple); }
.alt-app .sxp-mix-seg.k3, .alt-app .sxp-mix-dot.k3{ background:var(--a-green); }
.alt-app .sxp-mix-seg.k4, .alt-app .sxp-mix-dot.k4{ background:var(--a-amber); }
.alt-app .sxp-mix-seg.k5, .alt-app .sxp-mix-dot.k5{ background:var(--a-gold); }
.alt-app .sxp-mix-seg.k6, .alt-app .sxp-mix-dot.k6{ background:var(--a-dim); }

/* ---------- the fact lists ---------- */

.alt-app .sx-drawer-facts{ display:block; }

.alt-app .sxp-facts{
  margin:0;
  display:flex;
  flex-direction:column;
  gap:var(--a-2);
}

.alt-app .sxp-fact{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--a-3);
  padding-bottom:var(--a-2);
  border-bottom:1px solid var(--a-line-soft);
}

.alt-app .sxp-fact:last-child{ border-bottom:0; padding-bottom:0; }

.alt-app .sxp-fact-k{
  flex:0 0 auto;
  font-size:12px;
  color:var(--a-dim);
}

.alt-app .sxp-fact-v{
  margin:0;
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:2px;
  text-align:right;
}

.alt-app .sxp-fact-n{
  font-family:var(--a-mono);
  font-size:13px;
  color:var(--a-text);
  overflow-wrap:anywhere;
}

/* The qualifier belongs to the figure and sits under it: "exact", "estimated", "not measured
   yet". Small, and never dropped — it is the half of the number that says what it promises. */
.alt-app .sxp-fact-note{
  font-size:11px;
  color:var(--a-faint);
}

/* ---------- the file table and the run rows ---------- */

.alt-app .sxp-table{
  width:100%;
  border-collapse:collapse;
  font-size:12px;
}

.alt-app .sxp-table th{
  text-align:left;
  padding:var(--a-1) var(--a-2);
  font-size:10px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--a-faint);
  border-bottom:1px solid var(--a-line);
}

.alt-app .sxp-table td{
  padding:var(--a-2);
  color:var(--a-text);
  border-bottom:1px solid var(--a-line-soft);
  vertical-align:top;
}

.alt-app .sxp-file-name{ overflow-wrap:anywhere; }

/* A file on finished work is the highest-confidence reclaim there is, and the marker is a
   rule down the edge rather than a background tint alone. */
.alt-app .sxp-table tr.is-pick td:first-child{
  box-shadow:inset 2px 0 0 var(--a-green);
}

.alt-app .sxp-run{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:var(--a-2);
  padding:var(--a-2) 0;
  border-bottom:1px solid var(--a-line-soft);
  font-size:12px;
  color:var(--a-dim);
}

.alt-app .sxp-run-status{
  flex:0 0 auto;
  padding:1px var(--a-2);
  border-radius:var(--a-r-pill);
  font-size:10px;
  letter-spacing:.04em;
  text-transform:uppercase;
  border:1px solid var(--a-line);
  color:var(--a-dim);
}

/* The word is the status. The color agrees with it; it never carries it alone. */
.alt-app .sxp-run-status.ok{ color:var(--a-green); border-color:var(--a-green); background:var(--a-green-soft); }
.alt-app .sxp-run-status.warn{ color:var(--a-amber); border-color:var(--a-amber); background:var(--a-amber-soft); }
.alt-app .sxp-run-status.bad{ color:var(--a-red); border-color:var(--a-red); background:var(--a-red-soft); }

.alt-app .sxp-run-when{ flex:1 1 auto; min-width:0; color:var(--a-text); overflow-wrap:anywhere; }

.alt-app .sxp-run-counts,
.alt-app .sxp-run-bytes{ flex:1 1 100%; overflow-wrap:anywhere; }

.alt-app .sxp-run-bytes{ font-family:var(--a-mono); }

/* ---------- notes and empties ---------- */

.alt-app .sxp-note{
  margin:0;
  font-size:11px;
  line-height:1.5;
  color:var(--a-faint);
}

.alt-app .sxp-empty{
  margin:0;
  padding:var(--a-4);
  border:1px dashed var(--a-line);
  border-radius:var(--a-r);
  font-size:12px;
  color:var(--a-dim);
  text-align:center;
}

/* ---------- the foot ---------- */

.alt-app .sx-drawer-foot{
  flex:0 0 auto;
  display:flex;
  flex-wrap:wrap;
  gap:var(--a-2);
  padding:var(--a-3) var(--a-5);
  background:var(--a-float);
  border-top:1px solid var(--a-line);
}

/* ---------- narrow ---------- */

/* THE PANEL BECOMES THE SCREEN. A 560px drawer on a 420px phone is a panel with its own
   horizontal scrollbar; below the suite's tablet breakpoint it takes the full width and all
   but the top of the height, so the page underneath is still visibly there. */
@media (max-width:639px){
  .alt-app .sx-drawer{
    top:auto;
    left:0;
    width:100%;
    max-height:94vh;
    border-left:0;
    border-top:1px solid var(--a-line);
    border-radius:var(--a-r-lg) var(--a-r-lg) 0 0;
    animation-name:sxp-rise;
  }
  .alt-app .sx-drawer-head,
  .alt-app .sx-drawer-tabs,
  .alt-app .sx-drawer-body,
  .alt-app .sx-drawer-foot{ padding-left:var(--a-4); padding-right:var(--a-4); }
  .alt-app .sx-drawer-foot .btn{ flex:1 1 auto; }
}

/* ---------- motion ---------- */

@keyframes sxp-fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes sxp-slide{ from{ transform:translateX(16px); opacity:0; } to{ transform:none; opacity:1; } }
@keyframes sxp-rise{ from{ transform:translateY(16px); opacity:0; } to{ transform:none; opacity:1; } }

/* The travel goes; the panel still arrives. A reader who has asked the system for less motion
   is asking for the transition, not for the surface. */
@media (prefers-reduced-motion: reduce){
  .alt-app .sx-drawer,
  .alt-app .sx-drawer-backdrop{ animation:none; }
}