/* request-lifecycle-tracker — dark dashboard, phone-width-first. */
body { font-family: system-ui, -apple-system, sans-serif; margin: 0;
       background: #0f1420; color: #e6e9f0; }
main { max-width: 1060px; margin: 0 auto; padding: 2rem 1rem; }
h1 { font-size: 1.6rem; margin: 0 0 .25rem; }
.sub { color: #9aa3b5; margin: 0 0 1.5rem; }
table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
/* Phone-width first: on a 360px phone the wide lifecycle table scrolls inside
   its own box (.table-scroll, overflow-x:auto) instead of pushing the page
   sideways into horizontal overflow. */
.table-scroll { max-width: 100%; overflow-x: auto; }
th, td { text-align: left; padding: .55rem .6rem;
         border-bottom: 1px solid #232c42; }
th { color: #9aa3b5; font-weight: 600; }
thead th { position: sticky; top: 0; background: #0f1420; }
.phase { white-space: nowrap; }
.phase-done { color: #7ee787; }
.phase-live { font-weight: 700; }
.phase-bad { color: #ff7b72; font-weight: 700; }
.phase-pending { color: #7a8294; }
a { color: #79c0ff; }
code { background: #1a2132; padding: .1rem .3rem; border-radius: 4px; }
.empty { color: #7a8294; text-align: center; padding: 1.5rem; }
.skip-link { position: absolute; left: -999px; }
.skip-link:focus { left: 8px; top: 8px; background: #1a2132;
                   padding: .5rem; color: #fff; }
.skip-link:focus-visible { outline: 2px solid #79c0ff; outline-offset: 2px; }
a:focus-visible { outline: 2px solid #79c0ff; outline-offset: 2px; }
@media (max-width: 720px) {
  .phase { font-size: .8rem; }
  table { font-size: .85rem; }
}