/* ================= THE STORAGE EXPLORER — RETENTION VIEW =================
   Dresses the scope selector, cutoff simulator, Retention Opportunity panel, the retention-scope
   choices and the policy-age shortcuts (JS/features/storage-retention-view.js; the policy form
   and purge row belong to admin-storage.js, laid out here only). Scoped under `.alt-app` as an
   EXTENSION of the shell's chrome, never a redefinition — admin.html loads four storage
   stylesheets and css-class-collision-check.py fails on two bare-class redefinitions of one
   name. `sx-` names are the markup's; `sxr-` is this file's own. Colour is `--a-*` roles only.
   Red means only "this can take live work"; personal scope is purple, never red. */

/* ---------- the scope row ---------- */

.alt-app .sx-ret-scope{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--a-2) var(--a-3);
  margin:0 0 var(--a-4);
}

.alt-app .sx-ret-scope-note{
  flex:1 1 320px;
  min-width:0;
  color:var(--a-dim);
  font-size:12.5px;
  line-height:1.45;
}

/* ---------- the personal scope, marked rather than flagged ---------- */

.alt-app .sxr-personal-note{
  margin:0 0 var(--a-4);
  padding:var(--a-3) var(--a-4);
  border:1px solid var(--a-purple);
  border-left-width:3px;
  border-radius:var(--a-r);
  background:var(--a-purple-soft);
  color:var(--a-text);
  font-size:12.5px;
  line-height:1.5;
}

/* The panels themselves pick up the same edge, so the treatment reads even once the note above
   has scrolled past. */
.alt-app .sxr-personal .sx-sim,
.alt-app .sxr-personal .sx-opp,
.alt-app .sxr-personal .sx-policy{
  border-left:3px solid var(--a-purple);
}

/* ---------- the simulator ---------- */

.alt-app .sx-sim-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--a-2) var(--a-3);
}

.alt-app .sx-sim-lbl,
.alt-app .sx-sim-unit{
  color:var(--a-dim);
  font-size:13px;
  white-space:nowrap;
}

.alt-app .sx-sim-range{
  margin:var(--a-2) 0 0;
  color:var(--a-faint);
  font-size:12px;
  line-height:1.45;
}

.alt-app .sx-sim-out{
  margin-top:var(--a-4);
  padding-top:var(--a-3);
  border-top:1px solid var(--a-line-soft);
}

/* A number with a control either side of it, reading as ONE control rather than three. The
   inner radii are squared off so the group has a single outline. */
.alt-app .sx-step{
  display:inline-flex;
  align-items:stretch;
  border:1px solid var(--a-line);
  border-radius:var(--a-r-sm);
  background:var(--a-panel);
  overflow:hidden;
}

.alt-app .sx-step-btn{
  min-width:var(--a-ctl);
  padding:0 var(--a-2);
  border:0;
  background:transparent;
  color:var(--a-text);
  font:inherit;
  font-size:15px;
  line-height:1;
  cursor:pointer;
  transition:background var(--a-quick) var(--a-ease);
}

.alt-app .sx-step-btn:hover{ background:var(--a-raised); }
.alt-app .sx-step-btn:focus-visible{
  outline:2px solid var(--a-ring);
  outline-offset:-2px;
}

.alt-app .sx-step-input{
  width:76px;
  height:var(--a-ctl);
  padding:0 var(--a-2);
  border:0;
  border-left:1px solid var(--a-line-soft);
  border-right:1px solid var(--a-line-soft);
  border-radius:0;
  background:var(--a-bg);
  color:var(--a-text);
  font-family:var(--a-mono);
  font-size:14px;
  text-align:center;
}

/* The policy field arrives with `style="width:90px"` written on it by admin-storage.js's own
   markup, so this has to win on specificity rather than order. Sized to match the simulator's —
   the same question asked twice. */
.alt-app .sxr-policy-step .sx-step-input{
  width:76px;
  box-sizing:border-box;
}

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

/* ---------- the shortcuts ---------- */

.alt-app .sx-presets{
  display:inline-flex;
  align-items:center;
  gap:var(--a-1);
  flex-wrap:wrap;
}

.alt-app .sx-preset{
  min-width:38px;
  height:var(--a-ctl);
  padding:0 var(--a-2);
  border:1px solid var(--a-line);
  border-radius:var(--a-r-pill);
  background:var(--a-panel);
  color:var(--a-dim);
  font:inherit;
  font-size:12.5px;
  font-variant-numeric:tabular-nums;
  cursor:pointer;
  transition:background var(--a-quick) var(--a-ease),
             color var(--a-quick) var(--a-ease),
             border-color var(--a-quick) var(--a-ease);
}

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

/* "Lit" means the field says this — removed the moment the number goes custom, since a preset
   glowing beside a different figure would be a false claim. */
.alt-app .sx-preset.is-on{
  border-color:var(--a-blue);
  background:var(--a-blue-soft);
  color:var(--a-blue-text);
  font-weight:600;
}

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

/* ---------- figures ---------- */

.alt-app .sxr-headline{
  margin:0 0 var(--a-3);
  color:var(--a-text);
  font-family:var(--a-display);
  font-size:15px;
  line-height:1.4;
}

.alt-app .sxr-figs{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  gap:var(--a-2);
}

.alt-app .sxr-fig{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
  padding:var(--a-3);
  border:1px solid var(--a-line-soft);
  border-radius:var(--a-r);
  background:var(--a-raised);
}

.alt-app .sxr-fig > b{
  color:var(--a-text);
  font-family:var(--a-display);
  font-size:19px;
  font-variant-numeric:tabular-nums;
  line-height:1.15;
  overflow-wrap:anywhere;
}

.alt-app .sxr-fig > span{
  color:var(--a-dim);
  font-size:12px;
  line-height:1.35;
}

/* The exactness tag — the whole reason two figures sit side by side without being added, so it
   is legible rather than a whisper. */
.alt-app .sxr-fig > .sxr-tag{
  margin-top:var(--a-1);
  color:var(--a-faint);
  font-size:11px;
  font-style:normal;
  line-height:1.35;
}

.alt-app .sxr-note{
  margin:var(--a-3) 0 0;
  color:var(--a-dim);
  font-size:12px;
  line-height:1.5;
}

.alt-app .sxr-note.is-warn{
  padding:var(--a-2) var(--a-3);
  border-left:3px solid var(--a-amber);
  border-radius:0 var(--a-r-sm) var(--a-r-sm) 0;
  background:var(--a-amber-soft);
  color:var(--a-text);
}

.alt-app .sxr-note.is-bad{
  padding:var(--a-2) var(--a-3);
  border-left:3px solid var(--a-red);
  border-radius:0 var(--a-r-sm) var(--a-r-sm) 0;
  background:var(--a-red-soft);
  color:var(--a-text);
}

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

.alt-app .sx-opp-grid{
  display:flex;
  flex-direction:column;
  gap:0;
}

/* ---------- what this applies to ---------- */

.alt-app .sx-choices{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  gap:var(--a-2);
  margin:var(--a-2) 0 0;
}

.alt-app .sx-choice{
  display:flex;
  align-items:flex-start;
  gap:var(--a-2);
  padding:var(--a-3);
  border:1px solid var(--a-line);
  border-radius:var(--a-r);
  background:var(--a-panel);
  cursor:pointer;
  transition:border-color var(--a-quick) var(--a-ease),
             background var(--a-quick) var(--a-ease);
}

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

.alt-app .sx-choice > input[type="radio"]{
  flex:0 0 auto;
  margin:2px 0 0;
  accent-color:var(--a-blue);
}

/* The whole card shows the focus ring, not just the 13px dot inside it — a keyboard reader
   moving through three choices must be able to see which one it's on. */
.alt-app .sx-choice:focus-within{
  border-color:var(--a-blue);
  outline:2px solid var(--a-ring);
  outline-offset:2px;
}

.alt-app .sx-choice-body{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}

.alt-app .sx-choice-t{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--a-2);
  color:var(--a-text);
  font-size:13px;
  font-weight:600;
}

.alt-app .sx-choice-d{
  color:var(--a-dim);
  font-size:12px;
  line-height:1.45;
}

/* Gold is emphasis, never status — this is the one choice worth looking at first, exactly what
   alt-tokens.css reserves gold for. */
.alt-app .sx-rec{
  padding:1px var(--a-2);
  border-radius:var(--a-r-pill);
  background:var(--a-gold-soft);
  color:var(--a-gold);
  font-size:10.5px;
  font-style:normal;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}

/* The chosen card is obvious without reading the dot. `:has()` is progressive: where it's
   unsupported the radio still shows the state, so nothing is lost but the extra emphasis. */
.alt-app .sx-choice:has(input:checked){
  border-color:var(--a-blue);
  background:var(--a-blue-soft);
}

/* A choice that includes live work is dressed as one the moment it's taken, so the warning
   below is a second telling, not the first. */
.alt-app .sx-choice:has(#storageScopeAll:checked),
.alt-app .sx-choice:has(#storageScopeOpen:checked){
  border-color:var(--a-red);
  background:var(--a-red-soft);
}

/* ---------- the open-work alert ---------- */

.alt-app .sx-openwarn{
  margin:var(--a-3) 0 0;
  padding:var(--a-3) var(--a-4);
  border:1px solid var(--a-red);
  border-left-width:4px;
  border-radius:var(--a-r);
  background:var(--a-red-soft);
  color:var(--a-text);
  font-size:12.5px;
  font-weight:500;
  line-height:1.55;
}

/* ---------- the policy form and the purge row ---------- */

/* Only `column-gap` — `.control-row` (CSS/components.css) already supplies flex/wrap/an 8px
   gap; restating it would be the duplication css-class-collision-check.py exists to catch.
   Eight controls at 8px read as one line, so only the column gap widens. */
.alt-app .sx-policy-row{ column-gap:var(--a-4); }

.alt-app .sxr-policy-presets{ margin-left:calc(var(--a-2) * -1); }

/* ---------- the save confirmation ----------
   One confirmation for every save on this pane (policy save, purge outcome, file-queue drain)
   — one element, `.sxr-saved`, the only prefix this sheet may invent, so there is one answer to
   what "saved" looks like (admin-storage.js's shared helper). Built by JS, not in the markup, so
   `hidden` carries the resting state. A tinted, bordered chip beside its button that STAYS until
   the form changes again — wide enough to wrap a whole sentence rather than truncate. Colour is
   never the only signal: a tick or exclamation precedes the text (aria-hidden, generated
   content), while the real announcement comes from `role="status"`. While working it carries
   `.proc` (CSS/processing.css) and none of the three state classes below. */

.alt-app .sxr-saved{
  display:inline-flex;
  align-items:baseline;
  gap:var(--a-2);
  flex:0 1 auto;
  max-width:100%;
  min-width:0;
  padding:var(--a-1) var(--a-3);
  border:1px solid var(--a-line);
  border-radius:var(--a-r);
  background:var(--a-panel);
  color:var(--a-dim);
  font:500 12.5px/1.45 var(--a-body);
  /* Wraps inside the chip instead of forcing the row wider than the panel. */
  overflow-wrap:anywhere;
}

.alt-app .sxr-saved[hidden]{ display:none; }

.alt-app .sxr-saved.ok{
  border-color:var(--a-green);
  background:var(--a-green-soft);
  color:var(--a-text);
}

.alt-app .sxr-saved.warn{
  border-color:var(--a-amber);
  background:var(--a-amber-soft);
  color:var(--a-text);
}

.alt-app .sxr-saved.err{
  border-color:var(--a-red);
  background:var(--a-red-soft);
  color:var(--a-text);
}

/* The glyph is sized and coloured with the text so it's never the loudest thing in the row;
   generated content isn't in the accessibility tree — the words are what gets announced. */
.alt-app .sxr-saved.ok::before{ content:'\2713'; color:var(--a-green); font-weight:700; }
.alt-app .sxr-saved.warn::before,
.alt-app .sxr-saved.err::before{ content:'\0021'; font-weight:700; }
.alt-app .sxr-saved.warn::before{ color:var(--a-amber); }
.alt-app .sxr-saved.err::before{ color:var(--a-red); }

/* ---------- the figures could not be read ----------
   Above all three views and every figure, built by renderStorageUnreadable()
   (JS/features/admin-storage.js) — `sxr-` again, one class in one sheet. The only red that
   outranks `.sx-openwarn`: that one means a selection can take live work; this one means the
   pane has no data at all, so it's wider, sits above everything, and is `role="alert"`. */

.alt-app .sxr-unreadable{
  margin:0 0 var(--a-4);
  padding:var(--a-3) var(--a-4);
  border:1px solid var(--a-red);
  border-left-width:4px;
  border-radius:var(--a-r);
  background:var(--a-red-soft);
  color:var(--a-text);
  font:500 13px/1.55 var(--a-body);
}

.alt-app .sxr-unreadable[hidden]{ display:none; }

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

/* Nothing here may push the page sideways. The simulator row is the widest thing in the view,
   so below the shell's own breakpoint the label takes its own line and the shortcuts wrap under
   the number rather than beside it. */
@media (max-width:719px){
  .alt-app .sx-sim-row{ gap:var(--a-2); }
  .alt-app .sx-sim-lbl{ flex:1 0 100%; }
  .alt-app .sx-presets{ flex:1 1 100%; }
  .alt-app .sx-preset{ flex:1 1 0; min-width:44px; }
  .alt-app .sxr-figs{ grid-template-columns:1fr 1fr; }
  .alt-app .sx-choices{ grid-template-columns:1fr; }
}

@media (max-width:479px){
  .alt-app .sxr-figs{ grid-template-columns:1fr; }
  .alt-app .sx-ret-scope{ align-items:stretch; flex-direction:column; }
  /* Its own line at phone width — beside a full-width button it would be a two-character
     column, and the sentence it carries is the point of it. */
  .alt-app .sxr-saved{ flex:1 1 100%; }
}

/* Belt on top of alt-tokens.css's own brace — that file already zeroes `--a-quick` for every
   transition above, so this covers the next rule added here whether or not it used the token. */
@media (prefers-reduced-motion: reduce){
  .alt-app .sx-step-btn,
  .alt-app .sx-preset,
  .alt-app .sx-choice{ transition:none; }
}