/* status.ddownload.com
   Helle, ruhige Statusseite. Bewusst ohne Webfonts und ohne fremde Hosts:
   eine Statusseite darf nicht von Netzen abhaengen, ueber die sie berichtet. */

:root {
  color-scheme: light;

  --bg:        #faf9f5;
  --card:      #ffffff;
  --border:    #e7e4da;
  --hair:      #f1efe7;
  --ink:       #2b2b28;
  --ink-soft:  #4a4a44;
  --muted:     #6f6f68;

  --ok:        #7ab648;
  --ok-ink:    #4f9427;
  --degraded:  #efa500;
  --degraded-ink: #b57c00;
  --partial:   #e8804a;
  --partial-ink:  #c25f27;
  --major:     #dc4a35;
  --major-ink: #c33b27;
  --maint:     #5585d6;
  --maint-ink: #3d68b0;
  --nodata:    #dedbd2;
  --nodata-ink:#8b8b83;

  --radius:    5px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: #2f6db5; }
a:hover { color: #1f4e85; }

h1, h2, h3, h4 { margin: 0; font-weight: 600; }
p { margin: 0; }
ul { margin: 8px 0 0; padding-inline-start: 18px; }

/* Sprungmarke fuer die Tastatur. NICHT ueber "left: -9999px" verstecken:
   bei dir="rtl" ist der Zeilenanfang rechts, ein negativer left-Wert
   erzeugt dann scrollbaren Ueberlauf statt abgeschnitten zu werden. Die
   arabische Seite war dadurch 12544 px breit und wirkte leer. Diese
   Fassung kommt ohne Richtungsangabe aus. */
.skip {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip:focus {
  position: fixed;
  inset-inline-start: 8px;
  top: 8px;
  width: auto; height: auto;
  margin: 0; padding: 10px 16px;
  overflow: visible;
  clip: auto;
  clip-path: none;
  background: var(--ink); color: #fff;
  z-index: 10;
}

.wrap {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 20px 72px;
}

/* ---------------------------------------------------------------- Kopf */

.head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 46px 0 38px;
}

.brand {
  display: inline-flex;
  align-items: center;
  /* Klein, weil das Zeichen selbst einen transparenten Rand mitbringt.
     Der sichtbare Abstand ist dadurch rund das Dreifache. */
  gap: 4px;
  color: var(--ink);
  text-decoration: none;
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.brand:hover { color: var(--ink); }
/* Das Zeichen ist derselbe Punkt wie im Browserreiter, eingefaerbt nach
   dem Gesamtstatus. Der Kreis fuellt die halbe Flaeche, deshalb ist die
   Box groesser als der sichtbare Punkt. */
.brand .mark { width: 34px; height: 34px; flex: none; }

/* Farbe je Status. Einzige Quelle fuer beide Kreise, status.js tauscht
   beim Auffrischen nur die Klasse. */
.mark-ok       { --dot: var(--ok); }
.mark-degraded { --dot: var(--degraded); }
.mark-partial  { --dot: var(--partial); }
.mark-major    { --dot: var(--major); }
.mark-maint    { --dot: var(--maint); }
.mark-nodata   { --dot: var(--nodata); }

.mark-dot  { fill: var(--dot); }
.mark-ping { fill: var(--dot); }

/* Der Ring laeuft vom Rand des Punktes nach aussen und verblasst. Er sagt
   zweierlei: welcher Zustand herrscht, und dass gerade wirklich gemessen
   wird statt eine alte Fassung aus dem Zwischenspeicher zu stehen.
   Bei gruen bewusst langsam und blass. Dauerbewegung, die staendig den
   Blick zieht, waere auf einer Seite, die meistens gruen ist, eine Zumutung.
   Je schlimmer der Zustand, desto schneller und kraeftiger. */
@keyframes mark-ping {
  0%   { transform: scale(1);    opacity: 0.5; }
  70%  { transform: scale(1.85); opacity: 0; }
  100% { transform: scale(1.85); opacity: 0; }
}

.mark-ping {
  transform-box: fill-box;
  transform-origin: center;
  animation: mark-ping 3.2s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.mark-degraded .mark-ping,
.mark-partial  .mark-ping { animation-duration: 2s; }
.mark-major    .mark-ping { animation-duration: 1.2s; }

/* Ohne Messwerte waere ein Pulsieren eine Behauptung. */
.mark-nodata .mark-ping { animation: none; opacity: 0; }

/* Wer im Betriebssystem "Bewegung reduzieren" gesetzt hat, bekommt keine.
   Bei einer Animation, die dauerhaft laeuft, ist das kein Feinschliff. */
@media (prefers-reduced-motion: reduce) {
  .mark-ping { animation: none; opacity: 0; }
}

/* Abo-Feld: <details>, damit es auch ohne JavaScript aufklappt. */
.subscribe { position: relative; flex: none; }

.subscribe > summary {
  list-style: none;
  cursor: pointer;
  display: inline-block;
  background: #1d1d1a;
  color: #faf9f5;
  border-radius: 3px;
  padding: 12px 18px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.subscribe > summary::-webkit-details-marker { display: none; }
.subscribe > summary::marker { content: ""; }
.subscribe > summary:hover { background: #34342f; }
.subscribe > summary:focus-visible { outline: 2px solid var(--ok-ink); outline-offset: 2px; }

.subscribe-panel {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 8px);
  width: 300px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(40, 38, 30, 0.12);
  padding: 16px 18px;
  font-size: 13.5px;
  color: var(--ink-soft);
  z-index: 5;
}
.subscribe-panel li { margin-bottom: 5px; }

/* ---------------------------------------------------------------- Banner */

.banner {
  border-radius: var(--radius);
  padding: 22px 24px;
  color: #fff;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.banner-ok       { background: var(--ok); }
.banner-degraded { background: var(--degraded); }
.banner-partial  { background: var(--partial); }
.banner-major    { background: var(--major); }
.banner-maint    { background: var(--maint); }
.banner-nodata   { background: #8b8b83; }

.uptime-line {
  text-align: end;
  font-size: 12.5px;
  color: var(--muted);
  margin: 40px 0 10px;
}

/* ---------------------------------------------------------------- Karten */

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 20px;
}

.card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--border);
}
.card-head h2 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.card-count { font-size: 12px; color: var(--muted); white-space: nowrap; }

.comp { padding: 17px 18px 15px; }
.comp + .comp { border-top: 1px solid var(--hair); }

.comp-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.comp-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14.5px;
  color: var(--ink);
}
.comp-desc { font-size: 12px; color: var(--muted); font-weight: 400; }
.comp-state { font-size: 13px; white-space: nowrap; padding-top: 1px; }

.state-ok       { color: var(--ok-ink); }
.state-degraded { color: var(--degraded-ink); }
.state-partial  { color: var(--partial-ink); }
.state-major    { color: var(--major-ink); }
.state-maint    { color: var(--maint-ink); }
.state-nodata   { color: var(--nodata-ink); }

/* ---------------------------------------------------------------- Balken */

.bars {
  display: flex;
  gap: 2px;
  height: 34px;
  align-items: stretch;
}
.bar {
  flex: 1 1 0;
  min-width: 1px;
  border-radius: 1px;
  background: var(--nodata);
}
.bar-ok       { background: var(--ok); }
.bar-degraded { background: var(--degraded); }
.bar-partial  { background: var(--partial); }
.bar-major    { background: var(--major); }
.bar-maint    { background: var(--maint); }
.bar-nodata   { background: var(--nodata); }
.bar:hover    { filter: brightness(0.86); }

.bars-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 9px;
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
}
.rule { flex: 1 1 auto; height: 1px; background: var(--border); min-width: 8px; }

/* Kurzinfo an den Balken, von status.js gefuellt. */
.tip {
  position: fixed;
  z-index: 20;
  background: #1d1d1a;
  color: #faf9f5;
  font-size: 12px;
  line-height: 1.4;
  padding: 7px 10px;
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s;
  max-width: 250px;
}
.tip.on { opacity: 1; }
.tip b { display: block; font-weight: 600; margin-bottom: 2px; }

/* ---------------------------------------------------------------- Verlauf */

.history-title {
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 54px 0 4px;
}

.day { padding-top: 26px; }
.day h3 {
  font-size: 19px;
  font-weight: 500;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--border);
  letter-spacing: -0.01em;
}
.none { color: var(--muted); font-size: 14px; margin-top: 14px; }

.inc { margin-top: 20px; }
.inc-title { font-size: 15px; font-weight: 500; margin-bottom: 10px; }
.inc-critical .inc-title { color: var(--major-ink); }
.inc-major    .inc-title { color: var(--partial-ink); }
.inc-minor    .inc-title { color: var(--degraded-ink); }
.inc-maint    .inc-title { color: var(--maint-ink); }

.inc-update p { font-size: 14px; line-height: 1.6; color: var(--ink); }
.inc-update b { font-weight: 600; }
.inc-stamp { font-size: 12px; color: var(--muted); margin: 4px 0 14px; }

/* ---------------------------------------------------------------- Fuss */

.foot {
  margin-top: 56px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--muted);
}
.foot p { margin-bottom: 5px; }
.foot-links span { margin: 0 6px; color: var(--border); }

.foot-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* Sprachwahl. Wie das Abo-Feld ein <details>, damit sie ohne JavaScript
   aufgeht. Bewusst ohne Flaggen: Flaggen stehen fuer Laender, nicht fuer
   Sprachen. */
.langpick { position: relative; }

.langpick > summary {
  list-style: none;
  cursor: pointer;
  display: inline-block;
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 3px;
  padding: 6px 12px;
  font-size: 12.5px;
  color: var(--ink-soft);
  white-space: nowrap;
}
.langpick > summary::-webkit-details-marker { display: none; }
.langpick > summary::marker { content: ""; }
.langpick > summary:hover { border-color: #d6d2c6; }
.langpick > summary:focus-visible { outline: 2px solid var(--ok-ink); outline-offset: 2px; }

.langpick-panel {
  position: absolute;
  inset-inline-end: 0;
  /* Nach oben, die Wahl steht ganz unten auf der Seite. */
  bottom: calc(100% + 8px);
  width: min(420px, calc(100vw - 40px));
  max-height: 60vh;
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(40, 38, 30, 0.12);
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
  gap: 2px;
  z-index: 5;
}
.langpick-panel a {
  display: block;
  padding: 6px 9px;
  border-radius: 3px;
  font-size: 13px;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.langpick-panel a:hover { background: var(--bg); color: var(--ink); }
.langpick-panel a.on { background: var(--bg); color: var(--ink); font-weight: 600; }

.stale { color: var(--partial-ink); }

/* ---------------------------------------------------------------- Schmal */

/* Der Ring laeuft nach aussen und wuerde in einem schmalen Fussbereich
   an den Rand stossen. Nur die Kopfzeile traegt ihn ohnehin. */

@media (max-width: 640px) {
  .foot-bottom { flex-direction: column; align-items: stretch; }
  .langpick > summary { display: block; text-align: center; }
  .langpick-panel { width: 100%; }

  .wrap { padding: 0 14px 56px; }
  .head { padding: 30px 0 26px; flex-wrap: wrap; gap: 14px; }
  .brand { font-size: 21px; }
  .subscribe { width: 100%; }
  .subscribe > summary { display: block; text-align: center; }
  .subscribe-panel { width: 100%; }
  .banner { font-size: 17px; padding: 18px 18px; }
  .uptime-line { text-align: left; }
  .comp-head { flex-direction: column; gap: 4px; }
  .comp-state { padding-top: 0; }
  .bars { height: 28px; gap: 1px; }
  .bars-foot .rule { display: none; }
  .bars-foot { justify-content: space-between; gap: 6px; font-size: 11px; }
  .history-title { font-size: 23px; }
}