/* rabotili: white, one system font, black text, underlined blue links,
   yellow focus. Colour only for status. */
:root {
  --text: #0b0c0c; --muted: #505a5f; --line: #b1b4b6; --soft: #f3f2f1; --bg: #fff;
  --link: #1d70b8; --focus: #fd0;
  --ok: #00703c; --warn: #c75a00; --warn-fill: #f47738; --bad: #d4351c; --none: #b1b4b6;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 1.0625rem/1.5 var(--font); }
/* the footer sits at the bottom of the window even on short pages */
body:not(.embed) { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body:not(.embed) > main { flex: 1 0 auto; width: 100%; }
a { color: var(--link); text-underline-offset: .15em; }
a:focus, button:focus, input:focus, select:focus { outline: 3px solid var(--focus); outline-offset: 0; background: var(--focus); color: var(--text); }
.wrap { max-width: 52rem; margin: 0 auto; padding: 0 16px; }

header { border-bottom: 1px solid var(--line); }
.nav { display: flex; justify-content: space-between; align-items: center; min-height: 4rem; }
.logo { color: var(--text); text-decoration: none; font-weight: 800; font-size: 1.2rem; letter-spacing: -.02em; }
.mark { width: .75em; height: 1em; vertical-align: -.1em; margin-left: .1em; }
.mark path { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.mark circle { fill: var(--ok); }

main.wrap { padding-top: 2rem; padding-bottom: 3rem; }
h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); line-height: 1.15; margin: 0 0 .4rem; }
h2 { font-size: 1.4rem; margin: 2.5rem 0 .6rem; }
h3 { font-size: 1.1rem; margin: 1.5rem 0 .4rem; }
.answer { font-size: clamp(1.35rem, 3vw, 1.7rem); font-weight: 700; margin: 0 0 .3rem; }
.answer.up { color: var(--ok); } .answer.degraded, .answer.unconfirmed { color: var(--warn); }
.answer.down { color: var(--bad); } .answer.unknown { color: var(--muted); }
.meta, .hint, small { color: var(--muted); }
.meta { margin: 0 0 2rem; }

.sites { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--text); }
.site { padding: 1.1rem 0 1rem; border-bottom: 1px solid var(--line); }
.name { font-weight: 700; font-size: 1.1rem; }
.state { font-weight: 600; }
.state.up { color: var(--ok); } .state.degraded, .state.unconfirmed { color: var(--warn); }
.state.down { color: var(--bad); } .state.unknown { color: var(--muted); }
.dot { display: inline-block; width: 12px; height: 12px; margin-right: .4rem; vertical-align: -1px; background: var(--none); }
.dot.up { background: var(--ok); } .dot.degraded, .dot.unconfirmed { background: var(--warn-fill); } .dot.down { background: var(--bad); }
.dot.unknown { background: repeating-linear-gradient(45deg, var(--none) 0 2px, #e8e9ea 2px 4px); }

.hist { display: block; margin-top: .7rem; }
.bars { display: flex; gap: 2px; height: 28px; }
.day { display: block; flex: 1; min-width: 2px; background: var(--ok); }
.day.warn { background: var(--warn-fill); } .day.bad { background: var(--bad); }
.day.none { background: repeating-linear-gradient(45deg, var(--none) 0 2px, #e8e9ea 2px 4px); }
.day.before { background: var(--soft); }
.under { display: flex; justify-content: space-between; gap: 1rem; color: var(--muted); font-size: .85rem; margin-top: .25rem; }
.under strong { color: var(--text); }
.locs { margin: .35rem 0 0; color: var(--muted); font-size: .9rem; }

/* admin */
.notice { padding: .8rem 1rem; margin: 1rem 0; border-left: 5px solid; background: var(--soft); }
.notice.ok { border-color: var(--ok); } .notice.bad { border-color: var(--bad); }
.notice ul { margin: .3rem 0 0; padding-left: 1.2rem; }
.settings { display: grid; gap: .9rem; max-width: 34rem; }
label { display: grid; gap: .25rem; font-weight: 600; font-size: .95rem; }
label small { font-weight: 400; }
input, select { font: inherit; padding: .45rem .55rem; border: 2px solid var(--text); border-radius: 0; background: #fff; width: 100%; min-width: 0; }
.buttons { display: flex; gap: .4rem; flex-wrap: wrap; }
button { font: inherit; font-weight: 600; padding: .5rem .9rem; border: 0; border-radius: 0; background: var(--ok); color: #fff; box-shadow: 0 2px 0 #002d18; cursor: pointer; }
button.secondary { background: var(--soft); color: var(--text); box-shadow: 0 2px 0 #929191; }
.loclist { list-style: none; padding: 0; margin: 0; }
.loclist form { display: flex; justify-content: space-between; align-items: center; padding: .6rem 0; border-bottom: 1px solid var(--line); }
code { font-size: .9em; background: var(--soft); padding: .05rem .3rem; }

footer { border-top: 1px solid var(--line); background: var(--soft); padding: 1.2rem 0; color: var(--muted); font-size: .9rem; }

@media (max-width: 640px) {
  .bars { height: 22px; gap: 1px; }
}

/* summary counts */
.counts { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin: 0 0 1.75rem; padding: 0; }
.counts li { display: flex; align-items: baseline; gap: .45rem; color: var(--muted); }
.counts b { font-size: 2rem; line-height: 1; font-variant-numeric: tabular-nums; color: var(--text); }
.counts .up b { color: var(--ok); } .counts .degraded b { color: var(--warn); } .counts .down b { color: var(--bad); }
.counts .zero b { color: var(--line); }

/* site rows */
.row { display: flex; justify-content: space-between; gap: .3rem 1.5rem; align-items: baseline; flex-wrap: wrap; }
.who small { display: block; color: var(--muted); font-size: .85rem; }
.state { text-align: right; min-width: 7rem; }

/* site page */
.crumbs { margin: 0 0 .5rem; }
.dot.big { width: 18px; height: 18px; vertical-align: -2px; margin-right: .5rem; }
.avail { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 2.5rem; margin: 1.25rem 0 0; padding: 1rem 0; border-top: 2px solid var(--text); border-bottom: 1px solid var(--line); }
.avail li { display: grid; color: var(--muted); }
.avail b { font-size: 1.8rem; line-height: 1.15; color: var(--text); font-variant-numeric: tabular-nums; }
.chart { width: 100%; height: auto; display: block; }
.chart .grid { stroke: #dee0e2; stroke-width: 1; }
.chart .axis { font: 12px var(--font); fill: var(--muted); }
.chart .downzone { fill: var(--bad); opacity: .14; }
/* one colour per location: black, blue, grey (never a status colour) */
.chart { --c0: #0b0c0c; --c1: #1d70b8; --c2: #6f777b; }
.chart .line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart .line.l0 { stroke: var(--c0); } .chart .line.l1 { stroke: var(--c1); } .chart .line.l2 { stroke: var(--c2); }
.chart .band { stroke: none; opacity: .13; }
.chart .band.l0 { fill: var(--c0); } .chart .band.l1 { fill: var(--c1); } .chart .band.l2 { fill: var(--c2); }
.chart .pt { stroke: #fff; stroke-width: 1.5; }
.chart .pt.l0 { fill: var(--c0); } .chart .pt.l1 { fill: var(--c1); } .chart .pt.l2 { fill: var(--c2); }
.chart .endlabel { font: 600 13px var(--font); }
.chart .endlabel.l0 { fill: var(--c0); } .chart .endlabel.l1 { fill: var(--c1); } .chart .endlabel.l2 { fill: var(--c2); }
.chart .hit { fill: transparent; }
.chart .hit:hover { fill: rgba(11, 12, 12, .12); }
.chart .fail { fill: var(--bad); }
.chart .stripbg { fill: #e8e9ea; }
.chart .st.up { fill: var(--ok); } .chart .st.degraded, .chart .st.unconfirmed { fill: var(--warn-fill); } .chart .st.down { fill: var(--bad); }
.legend { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem 1.25rem; margin: .6rem 0 .3rem; padding: 0; color: var(--muted); font-size: .9rem; }
.key { display: inline-block; width: 18px; height: 10px; margin-right: .4rem; vertical-align: 0; }
.key.line-key { height: 0; border-top: 3px solid #0b0c0c; vertical-align: 3px; }
.key.line-key.l1 { border-top-color: #1d70b8; } .key.line-key.l2 { border-top-color: #6f777b; }
.key.st.up { background: var(--ok); } .key.st.degraded { background: var(--warn-fill); } .key.st.down { background: var(--bad); }
.loctable { width: 100%; border-collapse: collapse; }
.loctable th, .loctable td { text-align: left; padding: .55rem .75rem .55rem 0; border-bottom: 1px solid var(--line); }
.loctable thead th { border-bottom: 2px solid var(--text); font-size: .95rem; }
.loctable td.state { text-align: left; }

@media (max-width: 640px) {
}

footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1.5rem; }

/* share page */
.lede { font-size: 1.15rem; max-width: 40rem; }
.preview { margin: .6rem 0; }
.preview iframe { border: 1px solid var(--line); display: block; background: #fff; }
.code textarea { font: .85rem/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; width: 100%; padding: .5rem; border: 2px solid var(--text); border-radius: 0; resize: vertical; background: var(--soft); }
.share-site { padding: 1rem 0 1.25rem; border-bottom: 1px solid var(--line); display: grid; gap: .6rem; }
.share-site h3 { margin: 0; }
.share-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center; }

/* the widget inside other sites' iframes */
body.embed { margin: 0; padding: 10px 12px; font-size: 15px; background: #fff; }
body.embed a { text-decoration: none; color: var(--text); }
body.embed .dot { flex: none; }
.emb-head { display: block; margin-bottom: 4px; }
.emb-title { font-weight: 700; }
body.embed .answer { font-size: 1rem; margin: 0; }
.emb-list { list-style: none; margin: 4px 0 0; padding: 0; border-top: 2px solid var(--text); }
.emb-list a, .emb-one { display: flex; align-items: center; gap: .5rem; padding: 7px 0; border-bottom: 1px solid var(--line); }
.emb-one { border-bottom: 0; flex-wrap: wrap; }
.emb-name { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.embed .state { min-width: 0; font-size: .9rem; }
.emb-up { color: var(--muted); font-size: .85rem; }
.emb-credit { display: inline-block; margin-top: 4px; font-size: .78rem; font-weight: 800; color: var(--muted) !important; }
body.embed a:hover .emb-name, body.embed a:hover .emb-title { text-decoration: underline; color: var(--link); }

/* the whole site row is one link */
.site { padding: 0; }
.site-link { display: block; padding: 1.1rem 0 1rem; color: var(--text); text-decoration: none; }
.site-link .name { color: var(--link); text-decoration: underline; text-underline-offset: .15em; font-weight: 700; font-size: 1.1rem; }
.site-link:hover .name { text-decoration-thickness: 3px; }
.site-link:focus { outline: 3px solid var(--focus); background: var(--focus); }
.site-link:focus .name { color: var(--text); }
.under span:last-child { text-align: right; }
.empty { padding: 1rem 0 2rem; }
.summary { font-size: 1.15rem; margin: .2rem 0 0; max-width: 40rem; }

/* admin panel */
.adminsites { list-style: none; margin: 0 0 1rem; padding: 0; border-top: 2px solid var(--text); }
.adminsites li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.adminsites .who { display: flex; align-items: baseline; gap: .1rem .6rem; flex-wrap: wrap; }
.adminsites small { color: var(--muted); }
.addsite, .addloc { display: grid; gap: .8rem; max-width: 34rem; background: var(--soft); padding: 1rem 1.1rem 1.1rem; margin-top: 1rem; }
.addsite h3 { margin: 0; }
.addsite.first { border-left: 5px solid var(--link); }
.addsite.single { background: none; padding: 0; }
.addloc { grid-template-columns: 1fr 1fr 1fr auto; align-items: end; max-width: 48rem; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
details summary { cursor: pointer; color: var(--link); text-decoration: underline; width: fit-content; }
details[open] summary { margin-bottom: .6rem; }
button.danger { color: var(--bad); }
.loclist li { border-bottom: 1px solid var(--line); padding-bottom: .6rem; }
.loclist li form { border-bottom: 0; }
.loclist .code { font-weight: 400; color: var(--muted); }
@media (max-width: 640px) { .addloc, .pair { grid-template-columns: 1fr; } }
.navlinks { display: flex; gap: 1.25rem; align-items: center; }
.lang { font-weight: 600; }

/* site icons */
.ico { flex: none; width: 20px; height: 20px; object-fit: contain; border-radius: 3px; vertical-align: -4px; margin-right: .5rem; }
.ico.big { width: 36px; height: 36px; vertical-align: -5px; margin-right: .6rem; border-radius: 5px; }
.who { display: flex; align-items: center; flex-wrap: wrap; column-gap: 0; }
.who small { flex-basis: 100%; padding-left: calc(20px + .5rem); }
.with-ico { display: flex; align-items: center; }