/* Status-page specifics only; header, buttons, cards, tables and colours come from dl.css. */
/* Amber for "degraded": the shared palette has green (--dl-ok) and red (--dl-danger) but no amber. */
:root { --status-warn: #bf8700; }

.overall {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  margin: 0 0 24px;
  padding: 16px 20px;
  border: 1px solid var(--dl-line);
  border-left: 6px solid var(--dl-line-strong);
  border-radius: var(--dl-radius);
  background: var(--dl-panel);
}
.overall p { margin: 0; }
.overall-text { font-size: 1.25rem; font-weight: 650; }
.overall-up { border-left-color: var(--dl-ok); }
.overall-degraded { border-left-color: var(--status-warn); }
.overall-down { border-left-color: var(--dl-danger); }

.apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 560px), 1fr)); gap: 16px; }
.app h2 { margin: 0; font-size: 1.1rem; }
.app-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.app-uptime { margin-left: auto; font-size: 0.875rem; }
.app-detail { margin: 6px 0 10px; font-size: 0.875rem; }

.dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--dl-line-strong); }
.dot-up { background: var(--dl-ok); }
.dot-degraded { background: var(--status-warn); }
.dot-down { background: var(--dl-danger); }

.pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 650; border: 1px solid currentColor; }
.pill-up { color: var(--dl-ok); }
.pill-degraded { color: var(--status-warn); }
.pill-down { color: var(--dl-danger); }

.bars { display: flex; gap: 2px; height: 28px; min-width: 0; }
.bar { flex: 1 1 0; min-width: 0; border-radius: 2px; background: var(--dl-line); }
@media (max-width: 600px) { .bars { gap: 1px; } .bar { border-radius: 1px; } }
.bar-up { background: var(--dl-ok); }
.bar-degraded { background: var(--status-warn); }
.bar-down { background: var(--dl-danger); }
.bars-scale { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; font-size: 0.75rem; }

.locations { display: flex; flex-wrap: wrap; gap: 4px 12px; flex-basis: 100%; padding-left: 16px; color: var(--dl-muted); }
.location { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.dot-none { background: var(--dl-line); }

.incidents { margin-top: 32px; }

/* Docs diagram icon colours (the dg-icon colour is set with --dg), matching the other sites' Architecture diagrams:
   AWS service colours, which the shared palette doesn't cover. */
.dg-icon.svc-people { --dg: #805719; }
.dg-icon.svc-status { --dg: var(--dl-accent); }
.dg-icon.svc-cloudfront { --dg: #8c4fff; }
.dg-icon.svc-lambda { --dg: #ed7100; }
.dg-icon.svc-s3 { --dg: #7aa116; }
.dg-icon.svc-china { --dg: var(--dl-danger); }
.dg-icon.icon-status { --dg: var(--dl-accent); }
.dg-icon.icon-site { --dg: var(--dl-muted); }
.dg-icon.icon-health { --dg: var(--dl-accent-hover); }
.dg-icon.icon-data { --dg: var(--dl-ok); }
.dg-icon.icon-result { --dg: var(--status-warn); }
.dg .results { margin-top: 12px; gap: 8px; }

/* Each card on the board is one link to the site's page. */
a.app { display: block; color: var(--dl-text); text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s; }
a.app:hover, a.app:focus-visible { border-color: var(--dl-accent); box-shadow: 0 2px 10px color-mix(in srgb, var(--dl-accent) 15%, transparent); }
.app-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; font-size: 0.875rem; }
.app-more { color: var(--dl-accent); }

/* The site page. */
.site-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.site-head h1 { margin: 0; }
.site-links { display: flex; flex-wrap: wrap; gap: 8px; }
.uptime-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.uptime-card { display: flex; flex-direction: column; gap: 2px; }
.uptime-card strong { font-size: 1.25rem; }
@media (max-width: 600px) { .uptime-grid { grid-template-columns: repeat(2, 1fr); } }
.bars-large { height: 40px; }
.site-functions { display: grid; gap: 12px; }
.fn-card h3 { margin: 0; font-size: 1rem; }
.fn-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.fn-optional { font-size: 0.75rem; }
.fn-detail { margin: 4px 0 8px; font-size: 0.875rem; }
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 0.8125rem; }
.check-list li { padding-top: 8px; border-top: 1px solid var(--dl-line); }
.check-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.check-line code { font-family: var(--dl-mono); }
.check-list .locations { padding-left: 16px; margin-top: 4px; }
.meta { margin-top: 24px; font-size: 0.875rem; }