/* dialup.0150n.net
   Olson brand tokens (olsontech/branding tokens/olson-brand.css) are written
   out as literal values on purpose: custom properties do not exist in the
   browsers this page is for. Everything below degrades to readable black on
   white; the page is complete with no stylesheet at all. */

@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal;
  src: url("/brand/fonts/IBMPlexSans-Regular.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal;
  src: url("/brand/fonts/IBMPlexSans-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Serif"; font-weight: 600; font-style: normal;
  src: url("/brand/fonts/IBMPlexSerif-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal;
  src: url("/brand/fonts/IBMPlexMono-Regular.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal;
  src: url("/brand/fonts/IBMPlexMono-Medium.woff2") format("woff2"); }

body {
  margin: 0;
  padding: 0;
  background: #f3f1ea;           /* paper */
  color: #16273a;                /* ink */
  font-family: "IBM Plex Sans", Helvetica, Arial, sans-serif;
  font-size: 100%;
  line-height: 1.5;
}

#page {
  max-width: 50em;
  margin: 0 auto;
  padding: 1em 16px 2em 16px;
}

a:link { color: #2f6fb0; }       /* blue */
a:visited { color: #21405f; }    /* navy */
a:hover { color: #4d97d6; }      /* azure */

h1, h2, h3 {
  font-family: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.2;
}
h1 { font-size: 1.9em; margin: 0.3em 0 0.1em 0; }
h2 { font-size: 1.35em; margin: 1.6em 0 0.5em 0; border-bottom: 1px solid #c9c4b4; padding-bottom: 0.2em; }
h3 { font-size: 1.1em; margin: 1.2em 0 0.4em 0; }

/* ── masthead ─────────────────────────────────────────────── */
#masthead { padding: 0.5em 0 0.2em 0; }
#masthead .brand { display: block; width: 220px; height: 61px; }
#masthead .brand img { border: 0; display: block; }
#masthead .brand img.logo-dark { display: none; }
.eyebrow, .label {
  font-family: "IBM Plex Mono", "Courier New", Courier, monospace;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-size: 0.72em;
  color: #5d6b78;                /* slate */
}
.tagline { margin: 0; color: #5d6b78; }

#nav { margin: 1em 0 0 0; padding: 0.4em 0; border-top: 1px solid #c9c4b4; border-bottom: 1px solid #c9c4b4; }
#nav li { display: inline; list-style: none; margin: 0 1.2em 0 0; }
#nav .here { font-weight: 600; }
hr.nocss { display: none; }

/* ── status banner ────────────────────────────────────────── */
.status { padding: 0.6em 0.9em; margin: 1.2em 0; border: 1px solid #c9c4b4; border-left-width: 6px; background: #ffffff; }
.status strong { font-family: "IBM Plex Serif", Georgia, serif; font-size: 1.15em; }
.st-operational { border-left-color: #2e8b6a; }
.st-degraded    { border-left-color: #c98a1b; }
.st-outage      { border-left-color: #c4453a; }
.st-unknown     { border-left-color: #5d6b78; }
td.st-operational, td.st-degraded, td.st-outage, td.st-unknown { border-left-width: 1px; font-weight: 600; }
td.st-operational { color: #2e7a5d; }
td.st-degraded { color: #9a6a12; }
td.st-outage { color: #b23a30; }
td.st-unknown { color: #5d6b78; }

/* ── credentials ──────────────────────────────────────────── */
.login { background: #16273a; color: #eaf7f3; padding: 0.8em 1em; margin: 1em 0; }
.login dt { float: left; clear: left; width: 7em; color: #8cc4e8; }
.login dd { margin: 0 0 0.2em 7em; font-family: "IBM Plex Mono", "Courier New", monospace; font-size: 1.15em; color: #46e6c2; }
.login p { margin: 0.6em 0 0 0; clear: left; font-size: 0.9em; }
.login a:link, .login a:visited { color: #8df7e0; }

/* ── data ─────────────────────────────────────────────────── */
table { border-collapse: collapse; width: 100%; margin: 0.4em 0 1em 0; background: #ffffff; }
caption { text-align: left; font-weight: 600; padding: 0 0 0.3em 0; }
th, td { border: 1px solid #d8d3c4; padding: 0.3em 0.5em; text-align: left; vertical-align: top; }
th { background: #e9e5d9; font-weight: 600; }
td.num, th.num { text-align: right; }
dl.facts { margin: 0.4em 0 1em 0; }
dl.facts dt { float: left; clear: left; width: 11em; color: #5d6b78; }
dl.facts dd { margin: 0 0 0.25em 11em; }
.bar, code, pre, kbd, .mono {
  font-family: "IBM Plex Mono", "Courier New", Courier, monospace;
}
.bar { color: #2f6fb0; white-space: pre; }
pre { background: #ffffff; border: 1px solid #d8d3c4; padding: 0.6em 0.8em; overflow: auto; font-size: 0.9em; }
.note, .quiet { color: #5d6b78; font-size: 0.92em; }
.wide { overflow-x: auto; }

#footer { margin-top: 2.5em; padding-top: 0.6em; border-top: 1px solid #c9c4b4; font-size: 0.85em; color: #5d6b78; }
#footer table { font-size: 1em; }

/* ── dark ground: terminal / phosphor ─────────────────────── */
@media (prefers-color-scheme: dark) {
  body { background: #05080a; color: #eaf7f3; }
  a:link { color: #46e6c2; }
  a:visited { color: #8cc4e8; }
  a:hover { color: #8df7e0; }
  h2 { border-bottom-color: #1d2a2f; }
  #masthead .brand img.logo-light { display: none; }
  #masthead .brand img.logo-dark { display: block; }
  .eyebrow, .label, .tagline, .note, .quiet, dl.facts dt { color: #8a9aa6; }
  #nav { border-color: #1d2a2f; }
  .status { background: #0b1114; border-color: #1d2a2f; }
  .st-operational { border-left-color: #46e6c2; }
  .st-degraded    { border-left-color: #ffc06a; }
  .st-outage      { border-left-color: #ff7a6b; }
  td.st-operational { color: #46e6c2; }
  td.st-degraded { color: #ffc06a; }
  td.st-outage { color: #ff7a6b; }
  .login { background: #0b1114; border: 1px solid #1d2a2f; }
  table, pre { background: #0b1114; }
  th, td, pre { border-color: #1d2a2f; }
  th { background: #11191d; }
  .bar { color: #46e6c2; }
  #footer { border-top-color: #1d2a2f; color: #8a9aa6; }
}

@media screen and (max-width: 36em) {
  dl.facts dt, .login dt { float: none; width: auto; }
  dl.facts dd, .login dd { margin-left: 0; }
  #masthead .brand { width: 180px; height: 50px; }
  #masthead .brand img { width: 180px; height: 50px; }
  h1 { font-size: 1.5em; }
  .barcol { display: none; }
  th, td { padding: 0.25em 0.35em; }
}

@media print {
  body { background: #ffffff; color: #000000; }
  #nav { display: none; }
}