/* Page layout and the status visuals, on Kumo's tokens. Components come from
   kumo.css through the class strings in kumo.go. This file is unlayered, so it
   wins over Kumo's layered utilities where the two meet. */

/* November's type and palette, from novmbr.org. */
@font-face { font-family: Geist; src: url(fonts/geist.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: GeistPixelSquare; src: url(fonts/geist-pixel-square.woff2) format("woff2"); font-weight: 500; font-display: swap; }

/* Kumo's tokens, recoloured. Kumo sets light on :root and dark on
   :root[data-mode=dark]; the same selectors here come later and win. */
:root {
  --font-sans: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mark: #311c0f;
  --leaf: #fff;
  --color-kumo-canvas: #faf8f5;
  --color-kumo-elevated: #f5f1ec;
  --color-kumo-recessed: #efeae4;
  --color-kumo-base: #fdfcfa;
  --color-kumo-control: #fdfcfa;
  --color-kumo-tint: #efeae4;
  --color-kumo-fill: #e9e4dd;
  --color-kumo-fill-hover: #efeae4;
  --color-kumo-line: #dfd5ce;
  --color-kumo-hairline: #e9e4dd;
  --color-kumo-brand: #311c0f;
  --color-kumo-focus: #311c0f;
  --text-color-kumo-default: #311c0f;
  --text-color-kumo-strong: #1f120a;
  --text-color-kumo-subtle: #6e605a;
  --text-color-kumo-placeholder: #a3958d;
}
:root[data-mode=dark] {
  --mark: #6b3424;
  --color-kumo-canvas: #17110e;
  --color-kumo-elevated: #1d1612;
  --color-kumo-recessed: #130e0b;
  --color-kumo-base: #231b17;
  --color-kumo-control: #231b17;
  --color-kumo-tint: #2d241f;
  --color-kumo-fill: #2d241f;
  --color-kumo-fill-hover: #352b25;
  --color-kumo-line: #3b302a;
  --color-kumo-hairline: #2f2620;
  --color-kumo-brand: #6b3424;
  --color-kumo-focus: #eae3de;
  --text-color-kumo-default: #eae3de;
  --text-color-kumo-strong: #f5efea;
  --text-color-kumo-subtle: #9a8b84;
  --text-color-kumo-placeholder: #6a5d57;
}

body {
  min-height: 100vh;
  background: var(--color-kumo-canvas);
  color: var(--text-color-kumo-default);
  font-family: var(--font-sans);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 720px; margin: 0 auto; padding: 0 24px; }
main.wrap { display: grid; gap: 24px; padding-bottom: 64px; }

/* Masthead, as on novmbr.org: the mark beside a pixel wordmark. */
.top { display: flex; align-items: center; gap: 24px; padding-top: 64px; padding-bottom: 48px; }
.mark-link { flex: none; }
.mark { display: block; width: 96px; height: 96px; border-radius: 4px; image-rendering: pixelated; }
.masthead { flex: 1; min-width: 0; display: grid; gap: 16px; }
.wordmark {
  font-family: GeistPixelSquare, ui-monospace, monospace; font-weight: 500;
  font-size: 60px; line-height: 1; color: var(--text-color-kumo-default); text-decoration: none;
}
.wordmark { white-space: nowrap; }
.wordmark span { font-size: .6em; color: var(--text-color-kumo-subtle); }
.tagline { font-size: 14px; }
.nav { display: flex; gap: 4px; align-items: center; margin-left: auto; }
.icon-link { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; color: var(--text-color-kumo-subtle); }
.icon-link:hover { color: var(--text-color-kumo-default); background: var(--color-kumo-tint); }
.icon-link svg { width: 16px; height: 16px; }
button.icon-link { border: 0; background: none; cursor: pointer; }
.icon-sun, [data-mode=dark] .icon-moon { display: none; }
[data-mode=dark] .icon-sun { display: block; }

/* A service's state: a square dot and a word, coloured only when something's wrong. */
.state { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; white-space: nowrap; color: var(--text-color-kumo-subtle); }
.state-dot { width: 8px; height: 8px; border-radius: 2px; flex: none; background: var(--color-kumo-fill); }
.state.up .state-dot { background: var(--color-kumo-success); }
.state.degraded .state-dot { background: var(--color-kumo-badge-orange); }
.state.down .state-dot { background: var(--color-kumo-badge-red); }
.state.degraded { color: var(--text-color-kumo-warning); }
.state.down { color: var(--text-color-kumo-danger); }

/* Groups: an optional icon and the name, above a card of services. */
.group { display: grid; gap: 10px; }
.group-head { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 15px; font-weight: 600; color: var(--text-color-kumo-strong); }
.group-icon { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; flex: none; }
.icon-form { display: flex; gap: 6px; align-items: center; }
.icon-form input { width: 220px; }
/* On a phone the header stacks: mark and links, then the wordmark, then the tagline. */
@media (max-width: 520px) {
  .top {
    display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 20px 12px;
    grid-template-areas: "mark nav" "word word" "tag tag";
    padding-top: 24px; padding-bottom: 32px;
  }
  .masthead, .masthead .row-between { display: contents; }
  .mark-link { grid-area: mark; }
  .mark { width: 48px; height: 48px; border-radius: 3px; }
  .wordmark { grid-area: word; font-size: 40px; }
  .tagline { grid-area: tag; margin-top: -8px; }
  .nav { grid-area: nav; justify-self: end; flex-wrap: wrap; justify-content: flex-end; }
  .icon-form input { width: 140px; }
}

.stack { display: grid; gap: 16px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.push { margin-left: auto; }
.prewrap { white-space: pre-line; }

/* Primary buttons: Kumo sets these four inline from --color-kumo-brand. */
.kumo-emphasis {
  --kumo-button-emphasis-ring: color-mix(in oklch, var(--color-kumo-brand), black 10%);
  --kumo-button-emphasis-bg: color-mix(in oklch, var(--color-kumo-brand), white 30%);
  --kumo-button-emphasis-gradient-start: color-mix(in oklch, var(--color-kumo-brand), white 15%);
  --kumo-button-emphasis-gradient-end: var(--color-kumo-brand);
}

/* A list inside a LayerCard's primary layer: rows split by hairlines. */
.list { padding: 0 !important; gap: 0 !important; }
.list > * { padding: 16px; }
.list > * + * { border-top: 1px solid var(--color-kumo-hairline); }
.name { font-weight: 500; color: var(--text-color-kumo-strong); }
.name a { color: inherit; text-decoration: none; }
.name a:hover { text-decoration: underline; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* Response time. */
.latency { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 12px; color: var(--text-color-kumo-subtle); }
.latency svg { flex: 1; height: 24px; min-width: 0; overflow: visible; }
.latency polyline { fill: none; stroke: var(--text-color-kumo-subtle); stroke-width: 1.25; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.latency .now { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--text-color-kumo-default); }

/* 90 day uptime. */
.bars { display: flex; gap: 2px; height: 28px; margin-top: 12px; }
.bars span { flex: 1; border-radius: 2px; background: var(--color-kumo-fill); }
.bars .up { background: var(--color-kumo-success); }
.bars .degraded { background: var(--color-kumo-badge-orange); }
.bars .down { background: var(--color-kumo-badge-red); }
.bars span:hover { opacity: .7; }
.legend { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12px; color: var(--text-color-kumo-subtle); }
.legend .narrow { display: none; }
@media (max-width: 520px) {
  .bars span:nth-child(-n+60) { display: none; }
  .legend .wide { display: none; }
  .legend .narrow { display: inline; }
}

/* Forms. */
.field { display: grid; gap: 6px; }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.layer-body { display: grid; gap: 16px; padding: 16px !important; }
textarea { resize: vertical; font-family: var(--font-mono); font-size: 13px !important; }
select {
  appearance: none;
  padding-right: 32px !important;
  background: var(--color-kumo-control) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 256 256'%3E%3Cpath fill='%23888' d='M213.7 101.7l-80 80a8 8 0 0 1-11.4 0l-80-80a8 8 0 0 1 11.4-11.4L128 164.7l74.3-74.4a8 8 0 0 1 11.4 11.4z'/%3E%3C/svg%3E") no-repeat right 12px center;
}
.errors { padding-left: 20px; list-style: disc; }
/* The HTTP options only matter for HTTP checks. */
.service-form:has(select[name=kind] option[value=tcp]:checked) .http-only { display: none; }
.narrow-card { max-width: 380px; width: 100%; margin: 48px auto 0; padding: 24px; display: grid; gap: 16px; }

/* Kumo's Switch, drawn on a native checkbox so it posts with the form. */
input[role=switch] {
  appearance: none; flex: none; position: relative; margin: 0; cursor: pointer;
  width: 34px; height: 22px; border-radius: 6px;
  background: var(--color-kumo-fill);
  box-shadow: inset 0 0 0 1px var(--color-kumo-line);
  transition: background-color .15s ease-out;
}
input[role=switch]::before {
  content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 5px;
  background: light-dark(var(--color-kumo-base), var(--text-color-kumo-subtle));
  box-shadow: 0 0 1px .5px var(--color-kumo-shadow-edge), 0 1px 2px var(--color-kumo-shadow-drop);
  transition: transform .15s ease-out;
}
input[role=switch]:checked { background: var(--color-kumo-brand); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--color-kumo-brand), black 10%); }
input[role=switch]:checked::before { transform: translateX(12px); background: light-dark(var(--color-kumo-base), var(--text-color-kumo-default)); }
input[role=switch]:focus-visible { outline: 2px solid var(--color-kumo-brand); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { input[role=switch], input[role=switch]::before { transition: none; } }
.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.switches { display: flex; gap: 16px; flex-wrap: wrap; }
.narrow-card button { width: 100%; }
.grow { flex: 1; min-width: 160px; width: auto; }

/* Playground. */
.controls { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px 12px; }
.controls .actions { gap: 4px; }
button[aria-pressed=true] { background: var(--color-kumo-tint) !important; box-shadow: inset 0 0 0 1px var(--text-color-kumo-default); }
@media (max-width: 520px) { .controls { grid-template-columns: 1fr; gap: 4px; } }

/* Tooltips, placed by tooltip.js. */
#tip { position: fixed; top: 0; left: 0; z-index: 50; pointer-events: none; gap: 4px; max-width: 240px; }
.tip-head { font-weight: 600; color: var(--text-color-kumo-strong); }
.tip-meta { font-size: 12px; color: var(--text-color-kumo-subtle); }