/* storage-s2 (owner 21-10, docs/PLAN-2026-10-21-storage-s2.md): Settings > Storage (admin-storage.js), read-only.
   It reuses the Admin page's classes (.admin-head-row, .admin-kpi-row / -card / -value / -label, .admin-bar-track / -fill,
   .api-usage-table, .ut-card, .au-chip, .au-sk, .au-vh, .btn); only the layout is here. Theme tokens only, so light and
   dark follow. Below 720px the KPI cards sit two to a row and each table row becomes a small card (no horizontal scroll). */
.as-root { display: grid; gap: 14px; max-width: 1180px; min-width: 0; }
.as-root [hidden] { display: none !important; }
.as-head { align-items: center; flex-wrap: wrap; }
.as-head h3 { margin: 0; }
.as-tools { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.as-root .btn:focus-visible, .as-user:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.as-sk { background: linear-gradient(90deg, var(--bg-hover) 25%, var(--bg-elevated) 50%, var(--bg-hover) 75%); background-size: 200% 100%;
  animation: as-sh 1.4s linear infinite; }
@keyframes as-sh { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .as-sk { animation: none; } }

.as-kpis { margin-top: 0; }
.as-kpis .admin-kpi-card { flex: 1 1 200px; min-width: 0; }
.as-kpis .admin-kpi-value { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.as-kpis .admin-kpi-label { overflow-wrap: anywhere; }
.as-sub { margin-top: 6px; color: var(--text-muted); font-size: .76rem; overflow-wrap: anywhere; }
.as-kpi.is-warn { border-color: var(--danger-text); }
.as-kpi.is-warn .admin-kpi-value { color: var(--danger-text); }
.as-track { position: relative; height: 8px; margin-top: 10px; border-radius: 5px; background: var(--bg-hover); overflow: visible; }
.as-track .admin-bar-fill { display: block; height: 100%; border-radius: 5px; background: var(--link); max-width: 100%; }
.as-kpi.is-warn .as-track .admin-bar-fill { background: var(--danger-text); }
.as-guard { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--danger-text); }

.as-sec { min-width: 0; }
.as-sec h3 { margin: 0 0 8px; }
.as-card { overflow-x: auto; }
.as-table th.as-num, .as-table td.as-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.as-table tbody th.as-name { background: none; color: var(--text); font-size: inherit; font-weight: 600; letter-spacing: normal; text-transform: none;
  overflow-wrap: anywhere; }
.as-table tbody td, .as-table tbody th { vertical-align: middle; }
.as-table .as-share { min-width: 150px; white-space: nowrap; }
.as-bar { display: inline-block; width: 96px; vertical-align: middle; }
.as-bar .admin-bar-track { display: block; height: 6px; border-radius: 999px; background: var(--bg-hover); overflow: hidden; }
.as-bar .admin-bar-fill { display: block; height: 100%; border-radius: inherit; background: var(--link); }
.as-pct { display: inline-block; min-width: 3.2em; margin-left: 8px; color: var(--text-muted); font-size: .76rem; font-variant-numeric: tabular-nums; }
.as-table tr.is-current th, .as-table tr.is-current td { background: var(--accent-blue-soft); }
.as-cur { margin-left: 6px; }
.as-note { margin: 8px 0 0; color: var(--text-muted); font-size: .78rem; }
.as-h4 { margin: 14px 0 6px; font-size: .85rem; color: var(--text); }

.as-users { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.as-user { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto; grid-template-areas: "rank who size" "rank bar meta"; align-items: center;
  gap: 4px 12px; width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg);
  color: var(--text); font: inherit; font-size: .86rem; text-align: left; cursor: pointer; }
.as-user:hover { background: var(--bg-hover); }
.as-rank { grid-area: rank; color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; }
.as-who { grid-area: who; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.as-size { grid-area: size; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.as-user .as-bar { grid-area: bar; width: 100%; }
.as-meta { grid-area: meta; color: var(--text-muted); font-size: .76rem; white-space: nowrap; }

.as-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin: 0; }
.as-kv > div { padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-elevated); min-width: 0; }
.as-kv dt { color: var(--text-muted); font-size: .76rem; }
.as-kv dd { margin: 3px 0 0; font-weight: 600; overflow-wrap: anywhere; }

@media (max-width: 720px) {
  .as-kpis .admin-kpi-card { flex: 1 1 calc(50% - .4rem); }
  .as-kpis .admin-kpi-value { font-size: 1.2rem; }
  .as-card { overflow-x: visible; }
  .as-table, .as-table tbody { display: block; }
  .as-table thead { display: none; }
  .as-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
  .as-table tbody tr:last-child { border-bottom: 0; }
  .as-table tbody th, .as-table tbody td { padding: 0; border: 0; }
  .as-table tbody th.as-name { grid-column: 1; }
  .as-table td[data-label="Size"] { grid-column: 2; grid-row: 1; }
  .as-table td.as-share { grid-column: 1 / -1; min-width: 0; }
  .as-table td.as-share .as-bar { width: calc(100% - 3.6em); }
  .as-table td[data-label="Can be freed"], .as-table td[data-label="Would expire"] { grid-column: 1 / -1; color: var(--text-muted); font-size: .78rem; text-align: left; }
  .as-table td[data-label="Can be freed"]::before { content: "Can be freed: "; }
  .as-prev tbody tr { grid-template-columns: minmax(0, 1fr) auto auto; }
  .as-prev td[data-label="Would expire"] { grid-column: 2; grid-row: 1; color: var(--text); font-size: inherit; }
  .as-prev td[data-label="Size"] { grid-column: 3; grid-row: 1; }
  .as-prev td[data-label="Would expire"]::before { content: none; }
  .as-head { align-items: flex-start; }
}

/* storage-s3: the collapsed Actions section (server admin only). A row per action; its panel opens inline under the row. */
.as-actions { padding-top: 4px; }
.as-act-h { margin: 0; }
.as-act-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0; border: 0; background: none; color: var(--text);
  font: inherit; font-size: 1rem; font-weight: 600; cursor: pointer; }
.as-act-toggle:focus-visible, .as-act-in:focus-visible, .as-act-open:focus-visible, .as-act-panel .btn:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.as-chev { width: 8px; height: 8px; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); transform: rotate(-45deg); transition: transform .15s; }
.as-act-toggle[aria-expanded="true"] .as-chev { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .as-chev { transition: none; } }
.as-act-body { display: grid; gap: 8px; margin-top: 8px; }
.as-act-body[hidden] { display: none; }
.as-act-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg-elevated); }
.as-act-row.is-open { border-color: var(--link); }
.as-act-t { font-weight: 600; overflow-wrap: anywhere; }
.as-act-d { margin-top: 2px; color: var(--text-muted); font-size: .8rem; }
.as-act-open { min-height: 36px; white-space: nowrap; }
.as-act-panel { grid-column: 1 / -1; display: grid; gap: 10px; min-width: 0; padding-top: 10px; border-top: 1px solid var(--border); }
.as-act-params, .as-act-out { display: grid; gap: 6px; min-width: 0; }
.as-act-l { color: var(--text-muted); font-size: .8rem; }
.as-act-in { box-sizing: border-box; width: 100%; max-width: 420px; min-height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text); font: inherit; font-size: .9rem; }
.as-act-num { max-width: 160px; }
.as-act-code { padding: 1px 6px; border-radius: 6px; background: var(--bg-hover); color: var(--text); font-size: .85em; overflow-wrap: anywhere; user-select: all; }
.as-act-kv { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.as-act-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.as-act-btns .btn { min-height: 36px; }
.as-danger { background: var(--danger-text); border-color: var(--danger-text); color: var(--bg); }
.as-danger:disabled { opacity: .5; cursor: not-allowed; }
.as-act-err { margin: 0; padding: 8px 10px; border: 1px solid var(--danger-border); border-radius: 8px; background: var(--danger-bg); color: var(--danger-text); font-size: .85rem; }
.as-act-done { margin: 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--accent-blue-soft); color: var(--text); font-size: .85rem; }
.as-bad { color: var(--danger-text); font-weight: 600; }
@media (max-width: 720px) {
  .as-act-row { grid-template-columns: minmax(0, 1fr); }
  .as-act-open { justify-self: start; }
  .as-act-in, .as-act-num { max-width: none; }
  .as-act-btns .btn { flex: 1 1 auto; }
}