/* App usage view. Composes kit.css; everything here is layout the kit does not
 * have, scoped under .usage so nothing leaks into the other views. Every value
 * is a token - no literal colour, no spacing outside the --s scale.
 */

/* Page rhythm: sections sit one --s5 apart, the kit's .stack default (--s4)
 * is for things inside a section. */
.usage.stack { gap: var(--s5); }

.usage-head { display: flex; flex-direction: column; gap: var(--s1); }
.usage-head .note { margin: 0; }

/* Filters in one row above what they filter; the sentence that explains the
 * arithmetic sits directly under them, so the two read as a unit. */
.usage-controls { display: flex; flex-direction: column; gap: var(--s2); }
.usage-filters { gap: var(--s3); }
.usage-custom { gap: var(--s2); }
.usage-custom input[type="date"] { width: 148px; }
.usage-window { margin: 0; }
.usage-window.warn { color: var(--warning); }

/* Tiles: the kit tile carries label, value and delta. The peak line is ours. */
.usage-tile-foot { margin-top: 2px; }

/* Chart card: title with the metric name in a lighter weight, the selector on
 * the right, caption, plot, legend. */
.usage-chart-head { gap: var(--s3); }
.usage-chart-head .thin { color: var(--ink-3); font-weight: 400; }
.usage-chart-head select { max-width: 260px; }
.usage-chart > .note { margin-top: var(--s1); }
.usage-chart figure { margin-top: var(--s3); }

/* Lists. Screens and actions are complete, so they scroll inside the card
 * rather than pushing the page; the kit's sticky header handles the top. */
.usage-list .table-wrap.scroll { max-height: 440px; }
.usage-list .card-head { flex-wrap: wrap; row-gap: var(--s2); }
.usage-list .card-head input[type="search"] { width: 190px; flex: 0 0 auto; }
/* Denser than the kit's default row so 28 actions fit in one screen height. */
.usage-list tbody td { padding-block: var(--s2); }
/* max-width: 0 is what lets a table cell truncate instead of widening. */
.usage-list td.usage-name { max-width: 0; }
.usage-list .usage-key { margin-left: var(--s2); color: var(--ink-3); font-size: 11.5px; }
.usage-list td.usage-value { width: 96px; font-weight: 600; }
.usage-list td.usage-share { width: 72px; color: var(--ink-3); }
.usage-list td.usage-bar { width: 24%; min-width: 96px; }
/* width: 1% + nowrap shrinks a column to its content so the name gets the rest. */
.usage-list td.usage-status, .usage-list td.usage-since { width: 1%; white-space: nowrap; }
.usage-list td.usage-since { min-width: 120px; }

/* Chart beside the two short mixes: two thirds to one, stacking on narrow. */
.usage-main { display: grid; gap: var(--s3); grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); align-items: start; }
.usage-main > .stack { gap: var(--s3); }
.usage-list td.empty { text-align: left; padding: var(--s4) var(--s3); }
.usage-list tbody tr[aria-selected="true"] td.usage-value { color: var(--accent); }

/* Legacy section: heading and lead, then the two tables. Four columns each
 * need about 480px before the name column starves, so they stack earlier than
 * the kit's .cols-2 would. */
.usage-section { display: flex; flex-direction: column; gap: var(--s4); }
.usage-legacy { grid-template-columns: repeat(auto-fit, minmax(480px, 1fr)); }
.usage-section-head { display: flex; flex-direction: column; gap: var(--s2); }
.usage-section-head .note { margin: 0; max-width: 80ch; }

/* Caveats: a quiet list, not a card, at the foot of the page. */
.usage-caveats { padding-top: var(--s4); border-top: 1px solid var(--line); }
.usage-caveats ul {
  margin: var(--s3) 0 0; padding-left: 1.2em; display: grid; gap: var(--s2);
  color: var(--ink-2); font-size: 12.5px; max-width: 90ch;
}
.usage-caveats b { color: var(--ink-1); font-weight: 600; }

@media (max-width: 1100px) {
  .usage-main { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .usage-list td.usage-bar, .usage-list th.usage-bar { display: none; }
  .usage-chart-head select { max-width: 100%; flex: 1 1 100%; }
}