/* ==========================================================================
   Uscreen Status Page — custom CSS
   Paste into: Customize HTML & CSS → Custom CSS
   Brand: Uscreen Brand Book v01 (Feb 2026). See ../README.md
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap");

:root {
  /* Brand */
  --us-purple-dark: #18052B;
  --us-purple-accent: #B2A1F2;
  --us-purple-mid: #D3C7FE;
  --us-purple-light: #F2EFFF;
  --us-page: #F9F8FE;
  --us-white: #FFFFFF;
  --us-text-secondary: #6E6B79;
  --us-border: #E4DFF5;
  --us-radius: 10px;

  /* Status text that must pass 4.5:1 on white */
  --us-green-text: #15803D;
  --us-yellow-text: #A16207;

  /* Matches "Greens" in the Colors tab */
  --us-green: #22C55E;

  /* Statuspage reads this variable for its font stack */
  --font-stack-a: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ---------- Page ---------- */

body,
body.status {
  background-color: var(--us-page);
  color: var(--us-purple-dark);
  font-family: var(--font-stack-a);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4,
.font-largest,
.layout-content.status .incidents-list > h2,
.layout-content.status .page-status .status {
  font-family: var(--font-stack-a);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ---------- Spacing: Statuspage puts 70px between every section ---------- */

body.status .layout-content.status .masthead {
  padding-top: 40px;
  margin-bottom: 40px;
}

body.status .layout-content.status.status-index .page-status,
body.status .layout-content.status.status-index .unresolved-incidents,
body.status .layout-content.status.status-index .text-section,
body.status .layout-content.status.status-index .components-section {
  margin-bottom: 40px;
}

body.status .layout-content.status.status-index .incidents-list {
  margin-top: 40px;
}

body.status .layout-content.status.status-index .text-section h2 {
  margin-bottom: 8px;
}

/* ---------- Header (logo + subscribe) ---------- */

body.status .layout-content.status .masthead-container .masthead .logo-container img {
  max-height: 48px;
  width: auto;
}

body.status .layout-content.status .masthead .updates-dropdown-container .show-updates-dropdown,
body.status .flat-button {
  background-color: var(--us-purple-dark);
  color: var(--us-purple-light);
  border-radius: var(--us-radius);
  font-family: var(--font-stack-a);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none;
  transition: background-color 150ms ease-out, color 150ms ease-out;
}

body.status .layout-content.status .masthead .updates-dropdown-container .show-updates-dropdown:hover,
body.status .flat-button:hover {
  background-color: var(--us-purple-accent);
  color: var(--us-purple-dark);
}

/* ---------- Big status banner ---------- */

.layout-content.status.status-index .page-status,
.layout-content.status.status-index .unresolved-incident {
  border-radius: var(--us-radius);
  overflow: hidden;
  box-shadow: none;
}

/* All good: Purple Dark banner with a green dot, so the page is not all green */
body.status .layout-content.status.status-index .page-status.status-none {
  background-color: var(--us-purple-dark);
}

body.status .layout-content.status.status-index .page-status.status-none .status {
  color: var(--us-purple-light);
}

body.status .layout-content.status.status-index .page-status.status-none .status::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 12px;
  border-radius: 50%;
  background-color: var(--us-green);
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.25);
  vertical-align: middle;
}

/* Yellow needs dark text. White on yellow is only 1.9:1 */
.layout-content.status.status-index .page-status.status-minor,
.layout-content.status.status-index .page-status.status-minor *,
.layout-content.status.status-index .unresolved-incident.impact-minor .incident-title,
.layout-content.status.status-index .unresolved-incident.impact-minor .incident-title *,
.layout-content.status.status-index .status-day .update-title.impact-minor a {
  color: var(--us-purple-dark);
}

/* ---------- Component list ---------- */

.layout-content.status .components-section .components-container {
  background-color: var(--us-white);
  border: 1px solid var(--us-border);
  border-radius: var(--us-radius);
  overflow: hidden;
}

.layout-content.status .components-section .component-container {
  border-color: var(--us-border);
}

.layout-content.status.status-index .components-statuses .component-container .name {
  color: var(--us-purple-dark);
  font-weight: 500;
}

/* Green status text, darker than the bars so it passes contrast */
.components-container .component-inner-container.status-green .component-status,
.components-container .component-inner-container.status-green .icon-indicator,
.status-green .icon-indicator {
  color: var(--us-green-text);
}

/* Yellow status text, darkened to pass contrast on white */
.components-container .component-inner-container.status-yellow .component-status,
.components-container .component-inner-container.status-yellow .icon-indicator,
.status-yellow .icon-indicator,
.layout-content.status.status-index .incidents-list .incident-title.impact-minor a,
.layout-content.status-incident .incident-name.impact-minor,
.layout-content.status-full-history .month .incident-container .impact-minor,
.incident-history .impact-minor {
  color: var(--us-yellow-text);
}

/* Softer, rounded uptime bars */
.layout-content.status .shared-partial.uptime-90-days-wrapper svg rect {
  rx: 1.5px;
  ry: 1.5px;
}

/* Tooltip on the uptime bars */
#uptime-tooltip .tooltip-box {
  border-radius: var(--us-radius);
  border-color: var(--us-border);
  box-shadow: 0 8px 24px rgba(24, 5, 43, 0.12);
}

/* ---------- Links ---------- */

/* Link color is Purple Dark, same as text, so links get an underline */
.markdown-display a,
.update-body a,
.page-footer a,
.components-uptime-link a,
.history-footer-link a {
  color: var(--us-purple-dark);
  text-decoration: underline;
  text-decoration-color: var(--us-purple-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.markdown-display a:hover,
.update-body a:hover,
.page-footer a:hover,
.components-uptime-link a:hover,
.history-footer-link a:hover {
  text-decoration-color: var(--us-purple-dark);
}

/* ---------- Keyboard focus ---------- */

a:focus-visible,
button:focus-visible,
.show-updates-dropdown:focus-visible,
.flat-button:focus-visible {
  outline: 2px solid var(--us-purple-dark);
  outline-offset: 2px;
}

/* ---------- Text selection ---------- */

::selection {
  background-color: var(--us-purple-mid);
  color: var(--us-purple-dark);
}

/* ---------- Custom header bar (header.html) ---------- */

.us-topbar {
  background-color: var(--us-purple-dark);
  color: var(--us-purple-light);
  font-family: var(--font-stack-a);
  font-size: 14px;
  font-weight: 500;
}

.us-topbar__inner {
  max-width: 850px;
  margin: 0 auto;
  padding: 0;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.us-topbar a {
  color: var(--us-purple-light);
  text-decoration: none;
}

.us-topbar a:hover {
  color: var(--us-purple-accent);
}

.us-topbar__links {
  display: flex;
  gap: 24px;
}

/* ---------- Custom footer (footer.html) ---------- */

.us-footer {
  border-top: 1px solid var(--us-border);
  margin-top: 48px;
  font-family: var(--font-stack-a);
  font-size: 14px;
  color: var(--us-text-secondary);
}

.us-footer__inner {
  max-width: 850px;
  margin: 0 auto;
  padding: 24px 0 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.us-footer a {
  color: var(--us-purple-dark);
  text-decoration: none;
  font-weight: 500;
}

.us-footer a:hover {
  text-decoration: underline;
  text-decoration-color: var(--us-purple-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.us-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

/* ---------- Small screens ---------- */

@media (max-width: 900px) {
  .us-topbar__inner,
  .us-footer__inner {
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (max-width: 600px) {
  body.status .layout-content.status .masthead-container .masthead .logo-container img {
    max-height: 36px;
  }

  .us-topbar__links,
  .us-footer__links {
    gap: 16px;
  }
}

/* ---------- Respect reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}