/* QA pass after the next batch (2026-09-24). Split out of app.css to keep
   app.css under its line budget (test_theme); loaded on every page like
   app.css since these fixes touch tiles, tabs and forms across the site. */
/* Any table that may be wider than a phone scrolls inside its own box. */
.table-scroll { overflow-x: auto; max-width: 100%; }
/* Eleven bot tabs: tighter on a phone, so the bar takes two or three rows, not four. */
@media (max-width: 640px) {
  .tabs { gap: 2px; padding: 4px; }
  .tabs a { height: 34px; padding: 0 11px; font-size: 0.88rem; }
}
/* Key-value rows (account "Who you are" and friends): a long email or a
   button moves under its label on a narrow phone instead of running off. */
.kv div { min-width: 0; }
.kv span:first-child { flex-shrink: 0; }
@media (max-width: 420px) {
  .kv div { flex-wrap: wrap; }
  .kv span:last-child { margin-left: auto; text-align: right; }
}
/* A card heading's badge wraps under the title instead of pushing out. */
.card-head { flex-wrap: wrap; row-gap: 6px; }
.card-head .badge { white-space: normal; }
/* The support amounts open as a full-width sheet on a small phone. */
@media (max-width: 420px) {
  .support-form { position: fixed; left: 16px; right: 16px; top: 120px; width: auto; max-width: none; }
}
/* A <canvas> is 300 px wide until a chart sizes it, which forced the account
   column (and the admin node page) wider than a 320 px phone. */
canvas { max-width: 100%; }
.account { grid-template-columns: minmax(0, 1fr); }
/* Form columns (account Security card and every .stack form) shrink to the
   card: a text input's default size otherwise set their minimum width. */
.stack, .account .card-body { grid-template-columns: minmax(0, 1fr); }
.input { max-width: 100%; min-width: 0; }
/* All four tile actions (Stop, Restart, Console, Clone) fit one row of a
   phone tile and of the two-column desktop grid. */
.tile-actions { gap: 4px; }
.tile-actions .btn { padding-inline: 12px; font-size: 0.88rem; }
.tile-actions .btn.ghost { padding-inline: 6px; }