/* What runs today (/product/status/, /ja/product/status/), from scripts/site/status-page.ts.
   Tokens only. From 720 px the rows are a table; below it each row stacks: name, state, sentence. */
.status-table th[scope="row"] { font: var(--type-small-strong); }
@media (min-width: 720px) { .status-table th[scope="row"] { width: 30%; } }
.status-table .status-state { white-space: nowrap; color: var(--ink-2); }
.status-table td:last-child { max-width: var(--w-text); }

@media (max-width: 719px) {
  .status-wrap { overflow-x: visible; }
  .status-table, .status-table tbody, .status-table tr, .status-table th, .status-table td { display: block; width: auto; }
  .status-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .status-table tr { padding: var(--space-6) 0; border-top: var(--rule-hair) solid var(--line); }
  .status-table tbody tr:first-child { border-top: var(--rule) solid var(--ink); }
  .status-table th[scope="row"], .status-table td { padding: 0; border: 0; }
  .status-table th[scope="row"] { font: var(--type-h3); letter-spacing: var(--ls-h3); }
  .status-table .status-state { font: var(--type-small-strong); margin-top: var(--space-3); white-space: normal; }
  .status-table td:last-child { margin-top: var(--space-3); }
}