/* ===========================================================================
   NETGEAR status page — public stylesheet
   ---------------------------------------------------------------------------
   The page is static HTML plus a single fetch of the status documents, so the
   stylesheet is hand-authored and has no build step. Colour values are the
   published NETGEAR status palette; the layout column is 930px to match the
   existing status pages.
   =========================================================================== */

:root {
  /* published status palette */
  --ink:          #333333;
  --page:         #ffffff;
  --bar:          #333333;
  --bar-ink:      #f2f2f2;
  --panel-head:   #ededed;
  --line:         #e5e5e5;

  --ok:           #7ed321;   /* operational */
  --warn:         #f7ca18;   /* degraded */
  --warn-edge:    #deb515;
  --down:         #ff6f6f;   /* major outage */
  --down-edge:    #e56363;
  --info:         #db4939;   /* informational */
  --info-edge:    #c54133;
  --orange:       #ff8800;   /* partial outage */

  /* The all-clear banner is black rather than green, which is the
     established treatment on the status pages. */
  --banner-ok-bg: #000000;

  --col: 930px;              /* content column */
}

/* The existing status pages set Open Sans on the body, so matching them means
   serving it rather than naming it and falling through to Arial.

   A variable face covering 400 to 700 in one file, latin subset, which is the
   subset the existing pages request. swap so text is readable in the fallback
   immediately and reflows once the face arrives, rather than the page starting
   blank — this is a page people open when something else is already wrong. */
@font-face {
  font-family: "Open Sans";
  src: url("/assets/open-sans-latin.d8e4fe0452.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--page);
  color: var(--ink);
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); }

/* --- top bar ----------------------------------------------------------- */
/* Flex rather than floats: the same result on a desktop, but it can wrap on a
   narrow screen instead of overflowing the viewport. */
.master {
  background: var(--bar);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.master a {
  color: var(--bar-ink);
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  font-family: Arial, Helvetica, sans-serif;
  white-space: nowrap;
}
.topnav { display: flex; flex-wrap: wrap; }
.master a:hover { background: #dddddd; color: #000000; }

/* --- column ------------------------------------------------------------ */
.container {
  max-width: var(--col);
  margin: 0 auto;
  padding: 0 15px;
}
@media (max-width: 960px) {
  .container { padding: 0 12px; }
}

/* --- product banner ---------------------------------------------------- */
.banner { display: block; width: 100%; height: auto; }

/* --- overall status bar ------------------------------------------------ */
.alert {
  color: #ffffff;
  font-weight: 700;
  font-size: 15px;
  padding: 18px;
  margin: 0 0 12px 0;
  border: 1px solid transparent;
}
.alert--ok     { background: var(--banner-ok-bg); border-color: var(--banner-ok-bg); }
.alert--warn   { background: var(--warn);  border-color: var(--warn-edge); }
.alert--down   { background: var(--down);  border-color: var(--down-edge); }
.alert--info   { background: var(--info);  border-color: var(--info-edge); }

/* --- maintenance notice ------------------------------------------------ */
/* Sits above the overall status bar. A window opening shortly is the thing a
   visitor most needs to know, so it is announced rather than listed. The two
   states are distinguished by weight and a left edge rather than by colour
   alone, so the difference survives a greyscale display. */
.notice {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 13px 16px;
  margin: 0 0 8px;
  font-size: 14px;
  background: #fdefec;
  border: 1px solid var(--info-edge);
  border-left-width: 4px;
}
.notice--active { background: #fbe4df; }
.notice__tag {
  font-weight: 700;
  color: #8f2f20;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 12px;
  white-space: nowrap;
}
.notice__text { color: var(--ink); }
.notice__note {
  margin: -4px 0 12px;
  padding: 0 16px;
  font-size: 14px;
  color: #6b6b6b;
}

@media (max-width: 720px) {
  .notice { padding: 11px 13px; }
  .notice__tag { flex: 1 0 100%; }
  .notice__note { padding: 0 13px; }
}

/* --- headings ---------------------------------------------------------- */
h1, h2 {
  font-weight: 400;
  color: var(--ink);
  margin: 28px 0 14px;
  font-size: 32px;
  line-height: 1.2;
}
.lede { margin: 0 0 30px; font-size: 16px; }

/* --- component panel --------------------------------------------------- */
.panel {
  border: 1px solid var(--line);
  background: #ffffff;
  margin: 0 0 26px;
}
.panel__head {
  background: var(--panel-head);
  border-bottom: 1px solid var(--line);
  padding: 13px 18px;
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.panel__head .glyph { color: #777777; font-weight: 400; margin-right: 6px; }

.dot {
  width: 11px; height: 11px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--ok);
  box-shadow: 0 0 0 2px rgba(126, 211, 33, .35);
}
.dot--warn { background: var(--warn); box-shadow: 0 0 0 2px rgba(247, 202, 24, .35); }
.dot--down { background: var(--down); box-shadow: 0 0 0 2px rgba(255, 111, 111, .35); }

.component {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}
.component:last-child { border-bottom: 0; }
.component__name { display: flex; align-items: center; gap: 7px; }

/* each component carries a tooltip glyph */
.info-glyph {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 14px; height: 14px;
  border: 1px solid #b9b9b9;
  border-radius: 50%;
  color: #8a8a8a;
  font-size: 10px;
  line-height: 1;
  cursor: help;
}

.state { font-size: 13px; white-space: nowrap; }
.state--ok      { color: var(--ok); }
.state--warn    { color: var(--warn-edge); }
.state--down    { color: var(--down); }
.state--partial { color: var(--orange); }
.state--maint   { color: var(--info); }

/* --- past incidents ---------------------------------------------------- */
.day { margin: 26px 0 0; }
.day__date { font-size: 16px; margin: 0 0 14px; }
.day__empty,
.incident {
  border: 1px solid var(--line);
  background: #ffffff;
  padding: 18px;
  font-size: 15px;
}
.day__empty { color: var(--ink); }

.incident__title { font-weight: 700; margin: 0 0 6px; }
.incident__meta  { color: #777777; font-size: 13px; margin: 0 0 12px; }
.incident__step  { border-top: 1px solid var(--line); padding: 12px 0 0; margin: 12px 0 0; }
.incident__step:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.incident__stamp { color: #777777; font-size: 13px; }

/* --- scheduled maintenance -------------------------------------------- */
.maint {
  border: 1px solid var(--info-edge);
  background: #fdefec;
  padding: 18px;
  margin: 0 0 26px;
  font-size: 15px;
}
.maint__title { font-weight: 700; margin: 0 0 6px; }
.maint__meta  { color: #7a4038; font-size: 13px; }

/* --- footer ------------------------------------------------------------ */
.footer {
  border-top: 1px solid var(--line);
  margin: 44px 0 0;
  padding: 22px 0 40px;
  font-size: 13px;
  color: #777777;
}
.footer a { color: var(--ink); text-decoration: none; }
.footer a:hover { text-decoration: underline; }

/* --- loading / error --------------------------------------------------- */
.skeleton { color: #999999; font-size: 15px; padding: 18px 0; }
.error {
  border: 1px solid var(--down-edge);
  background: #fff2f2;
  color: #8c2f2f;
  padding: 18px;
  font-size: 15px;
}

/* --- history pager ----------------------------------------------------- */
.pager {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 30px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
  font-size: 15px;
}
.pager__link { color: var(--ink); text-decoration: none; }
.pager__link:hover { text-decoration: underline; }
/* keeps "next" right-aligned when "previous" is absent on the first page */
.pager__link--next { margin-left: auto; }


/* ===========================================================================
   Narrow screens
   ---------------------------------------------------------------------------
   Phones and small tablets. The status page is read on a phone more often
   than anywhere else — it is what someone reaches for when a service looks
   broken — so this is a first-class case rather than an afterthought.
   =========================================================================== */

@media (max-width: 720px) {
  /* the four product links plus the brand do not fit on one line at this
     width, so the nav drops below and centres */
  .master { justify-content: center; }
  .master > a:first-child {
    flex: 1 0 100%;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
  }
  .topnav { justify-content: center; width: 100%; }
  .master a { font-size: 15px; padding: 11px 13px; }

  h1, h2 { font-size: 24px; margin: 22px 0 12px; }
  .lede { margin-bottom: 22px; }

  .alert { padding: 14px; }
  .panel__head, .component, .day__empty, .incident, .maint { padding: 13px 14px; }

  /* a long component name should wrap rather than crush the status word */
  .component { align-items: flex-start; flex-wrap: wrap; row-gap: 4px; }
  .component__name { flex: 1 1 100%; }
  .state { margin-left: auto; }

  .pager { flex-wrap: wrap; row-gap: 10px; }
}

@media (max-width: 420px) {
  body { font-size: 15px; }
  .master a { font-size: 14px; padding: 10px 10px; }
  h1, h2 { font-size: 21px; }
  .container { padding: 0 11px; }
}

/* Respect a reduced-motion preference and dark-mode readability of the
   banner strip; the page itself stays light, matching the brand. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* --- roll-up service rows ---------------------------------------------- */
/* These link through to each product page, opened in a new tab. The underline
   is what marks them as clickable; the row is short enough that an outbound
   marker beside it crowded the name, so there is none. */
.component__link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: #b9b9b9;
  text-underline-offset: 3px;
}
.component__link:hover { text-decoration-color: var(--ink); }