/* status.containertradehq.com (TRA-1240). Trade HQ's app tokens (apps/web/app/theme/design-tokens.css): teal is the
   interactive colour, orange stays in the logo, the ground is always white, and every status reads in a static
   screenshot as a filled colour, never as a shade. Mobile first; the one breakpoint widens the page. No web font
   is fetched: the page must render when nothing else does, so Inter is used where it is installed. */
:root {
  --color-teal: #306b60;
  --color-link: #31735c;
  --color-body: #000000;
  --color-muted: #52525b;
  --color-bg: #ffffff;
  --color-surface: #f9f9f9;
  --color-border: #dedede;
  --color-border-card: #d4d4d8;
  --color-ok: #48bb78;
  --color-ok-text: #276749;
  --color-warn: #ed8936;
  --color-warn-text: #c05621;
  --color-partial: #dd6b20;
  --color-partial-text: #9c4221;
  --color-error: #e53e3e;
  --color-error-text: #c53030;
  --color-none: #d4d4d8;
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-full: 9999px;
}
* { box-sizing: border-box; }
html { background: var(--color-bg); }
body { margin: 0; background: var(--color-bg); color: var(--color-body); font-family: var(--font-body); font-size: 16px; line-height: 26px; }
a { color: var(--color-link); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }
.wrap { max-width: 880px; margin: 0 auto; padding: 0 var(--space-4); }
.top { border-bottom: 1px solid var(--color-border); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 64px; }
.logo img { display: block; width: 210px; height: auto; }
.top-label { color: var(--color-muted); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
h1, h2, h3 { margin: 0; }
h2 { font-size: 21px; font-weight: 600; margin: var(--space-8) 0 var(--space-4); }
h3 { font-size: 16px; font-weight: 600; line-height: 22px; }
.banner { margin-top: var(--space-6); padding: var(--space-4); border-radius: var(--radius-lg); color: #ffffff; }
.banner h1 { font-size: 21px; line-height: 28px; font-weight: 700; }
.banner p { margin: var(--space-1) 0 0; font-size: 14px; opacity: 0.95; }
.banner.status-operational { background: var(--color-teal); }
.banner.status-degraded { background: var(--color-warn-text); }
.banner.status-partial-outage { background: var(--color-partial-text); }
.banner.status-major-outage { background: var(--color-error-text); }
.components ul { list-style: none; margin: 0; padding: 0; border: 1px solid var(--color-border-card); border-radius: var(--radius-lg); }
.component { padding: var(--space-4); border-top: 1px solid var(--color-border); }
.component:first-child { border-top: 0; }
.component-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.description { margin: var(--space-1) 0 0; color: var(--color-muted); font-size: 14px; line-height: 20px; }
.pill { flex: none; padding: 2px var(--space-3); border-radius: var(--radius-full); color: #ffffff; font-size: 14px; font-weight: 500; white-space: nowrap; }
.pill.status-operational { background: var(--color-ok-text); }
.pill.status-degraded { background: var(--color-warn-text); }
.pill.status-partial-outage { background: var(--color-partial-text); }
.pill.status-major-outage { background: var(--color-error-text); }
.bars { display: flex; gap: 1px; margin-top: var(--space-3); height: 32px; }
.day { flex: 1 1 0; min-width: 0; border-radius: var(--radius-sm); background: var(--color-none); }
.day.status-operational { background: var(--color-ok); }
.day.status-degraded { background: var(--color-warn); }
.day.status-partial-outage { background: var(--color-partial); }
.day.status-major-outage { background: var(--color-error); }
.bars-legend { display: flex; justify-content: space-between; margin-top: var(--space-1); color: var(--color-muted); font-size: 12px; line-height: 16px; }
.incident { margin-bottom: var(--space-4); padding: var(--space-4); border: 1px solid var(--color-border-card); border-left-width: 6px; border-radius: var(--radius-md); background: var(--color-surface); }
.incident.status-operational { border-left-color: var(--color-ok); }
.incident.status-degraded { border-left-color: var(--color-warn); }
.incident.status-partial-outage { border-left-color: var(--color-partial); }
.incident.status-major-outage { border-left-color: var(--color-error); }
.affected { margin: var(--space-1) 0 0; color: var(--color-muted); font-size: 14px; }
.updates { list-style: none; margin: var(--space-3) 0 0; padding: 0; }
.update { padding-top: var(--space-2); }
.update-head { margin: 0; font-size: 14px; line-height: 20px; }
.update-head time { color: var(--color-muted); }
.update-body { margin: var(--space-1) 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.empty { color: var(--color-muted); }
.foot { margin: var(--space-8) auto; color: var(--color-muted); font-size: 14px; line-height: 20px; }
.foot p { margin: var(--space-2) 0 0; }
@media (min-width: 768px) {
  .wrap { padding: 0 var(--space-6); }
  .logo img { width: 280px; }
  .banner { padding: var(--space-6); }
  .banner h1 { font-size: 28px; line-height: 36px; }
  h2 { font-size: 24px; }
  .bars { gap: 2px; }
}