/* tuyau-web. One stylesheet, no framework: an instrument panel for the
   house's power. Dark by default because that is where it is read from a
   phone at night; the light scheme is the same layout with the ink
   inverted. */

:root {
  --bg: #14161a;
  --panel: #1b1e24;
  --panel-2: #212530;
  --line: #2c313c;
  --ink: #e7e9ee;
  --ink-dim: #9aa2b1;
  --accent: #f0b429;
  --accent-ink: #1b1400;
  --on: #4ec97f;
  --off: #7a8292;
  --bad: #ef6461;
  --radius: 10px;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f4f5f7;
    --panel: #ffffff;
    --panel-2: #eef0f4;
    --line: #d9dce3;
    --ink: #1b1e24;
    --ink-dim: #5c6472;
    --accent: #a76a00;
    --accent-ink: #fff8e8;
    --on: #1b8a4b;
    --off: #78808e;
    --bad: #c0362f;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

main { max-width: 980px; margin: 0 auto; padding: 18px 16px 60px; }

/* ---------------------------------------------------------------- header */

.bar {
  display: flex; align-items: center; gap: 18px; flex-wrap: nowrap;
  padding: 10px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.brand {
  font-weight: 650; letter-spacing: .02em; text-decoration: none; color: var(--ink);
}
.brand span {
  color: var(--accent); font-weight: 450;
}
.brand span::before { content: "·"; margin: 0 .35em; color: var(--ink-dim); }
.bar { position: relative; }           /* the open menu hangs off the bar */
.bar nav { display: flex; gap: 14px; flex-wrap: nowrap; }
.bar nav a {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  color: var(--ink-dim); text-decoration: none; padding: 2px 0;
  border-bottom: 2px solid transparent;
}
.bar nav a:hover { color: var(--ink); border-bottom-color: var(--accent); }
.bar .out { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none; }
.bar .out button { display: inline-flex; align-items: center; gap: 6px; }
.brand { flex: none; }
.who { color: var(--ink-dim); white-space: nowrap; }

.icon { width: 16px; height: 16px; flex: none; }
/* A locked device says so in its heading. The lock replaces the sentence
   that used to name hosts.json there. */
.icon.lock { width: 15px; height: 15px; color: var(--ink-dim); vertical-align: -2px; }

/* Wide: the four sections are worth a click each, so they stay inline and
   the hamburger is not drawn at all. */
.burger { display: none; }

/* Narrow: the sections fold behind the hamburger rather than wrapping the
   header onto three lines, and the account name and the word "Log out"
   give way to it. The icon alone still logs out. */
@media (max-width: 700px) {
  .bar { gap: 12px; padding: 8px 12px; }
  .who { display: none; }
  .bar .out button .label { display: none; }
  .brand span { display: none; }

  .burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 30px; padding: 0; border-radius: 7px;
    background: var(--panel-2); color: var(--ink); border: 1px solid var(--line);
  }
  .burger[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
  .burger .icon { width: 19px; height: 19px; }

  .bar nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%; z-index: 30;
    flex-direction: column; gap: 0; padding: 2px 12px 8px;
    background: var(--panel); border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .35);
  }
  .bar nav.open { display: flex; }
  .bar nav a {
    padding: 12px 2px; gap: 10px;
    border-bottom: 1px solid var(--line); border-top: 0;
  }
  .bar nav a:last-child { border-bottom: 0; }
  .bar nav a:hover { border-bottom-color: var(--line); }
}

/* ----------------------------------------------------------------- cards */

.cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }

.card, .panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.panel { margin-top: 18px; }
.panel h2, .card h2 { margin: 0 0 8px; font-size: 1rem; font-weight: 600; letter-spacing: .01em; }
.panel h3 { margin: 14px 0 6px; font-size: .9rem; color: var(--ink-dim); font-weight: 600; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* The icon inherits the heading's colour, so it needs no theme rule of its
   own. 18px matches the cap height of the 1rem heading next to it. */
.card h2 .icon {
  width: 18px; height: 18px; margin-right: 7px;
  vertical-align: -3px; color: var(--ink-dim);
}

.card h2 .kind {
  float: right; font-weight: 400; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-dim);
}
.device.off-net { opacity: .72; }

/* A card's remaining controls. <details> gives the open/closed behaviour
   without a line of JavaScript; the sheet is positioned, so the card must
   not clip it. */
.card { position: relative; }
.menu { position: relative; margin-left: auto; }
.menu > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 28px; border-radius: 7px;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--ink);
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary:hover { border-color: var(--accent); }
.menu[open] > summary { border-color: var(--accent); color: var(--accent); }
.menu .sheet {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20;
  min-width: 232px; padding: 10px 12px 12px;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
}
.menu .sheet-h {
  margin: 10px 0 6px; font-size: .74rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-dim);
}

/* A folded panel. The summary carries the heading, so .panel h2 spacing
   does not apply and is restated here. */
.fold > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 8px;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before {
  content: ""; width: 7px; height: 7px; flex: none;
  border-right: 1.6px solid var(--ink-dim); border-bottom: 1.6px solid var(--ink-dim);
  transform: rotate(-45deg); transition: transform .12s ease;
}
.fold[open] > summary::before { transform: rotate(45deg); }
.fold > summary .sum-h { font-size: 1rem; font-weight: 600; letter-spacing: .01em; }
.fold > summary .sum-n {
  font-size: .72rem; color: var(--ink-dim);
  border: 1px solid var(--line); border-radius: 999px; padding: 0 7px;
}
.fold > summary:hover .sum-h { color: var(--accent); }
.fold > *:not(summary) { margin-top: 10px; }

.state {
  margin: 2px 0 4px;
  font-size: 1.7rem; font-weight: 600; letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}
.state.is-on { color: var(--on); }
.state.is-off { color: var(--off); }
.state.is-bad { color: var(--bad); }

.readings {
  margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9rem; color: var(--ink);
}
.meta, .note, .empty { color: var(--ink-dim); font-size: .82rem; }
.meta { margin: 4px 0 10px; }
.empty { margin: 6px 0; }
.locked {
  margin: 8px 0 0; padding: 6px 8px; font-size: .8rem;
  border-left: 3px solid var(--accent); background: var(--panel-2); color: var(--ink-dim);
}
.warn { color: var(--bad); font-size: .85rem; }

/* --------------------------------------------------------------- controls */

.row { display: flex; align-items: center; gap: 8px; }
.row.wrap { flex-wrap: wrap; }
.row.center { justify-content: center; margin-top: 12px; }
.row.small { margin-top: 8px; font-size: .8rem; color: var(--ink-dim); }
.stack { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.grow { flex: 1; }
.right { text-align: right; }

button {
  font: inherit; font-size: .88rem; font-weight: 550;
  padding: 7px 13px; border-radius: 7px; border: 1px solid transparent;
  background: var(--accent); color: var(--accent-ink); cursor: pointer;
}
button:hover { filter: brightness(1.08); }
button:disabled { opacity: .5; cursor: default; filter: none; }
button.plain { background: var(--panel-2); color: var(--ink); border-color: var(--line); }
button.danger:hover { color: var(--bad); border-color: var(--bad); }

label { display: inline-flex; flex-direction: column; gap: 3px; font-size: .8rem; color: var(--ink-dim); }
input, select {
  font: inherit; font-size: .9rem; color: var(--ink); background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 7px; padding: 7px 9px; min-width: 7rem;
}
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

fieldset.days {
  border: 1px solid var(--line); border-radius: 7px; padding: 8px 10px;
  display: flex; gap: 12px; flex-wrap: wrap;
}
fieldset.days legend { color: var(--ink-dim); font-size: .78rem; padding: 0 4px; }
fieldset.days label { flex-direction: row; align-items: center; gap: 4px; color: var(--ink); }

/* ------------------------------------------------------------- lists etc */

.list { list-style: none; margin: 6px 0 0; padding: 0; }
.list li {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 7px 0; border-top: 1px solid var(--line);
}
.list li:first-child { border-top: 0; }
.list.files li { border: 0; padding: 3px 0; }
.list a { color: var(--accent); }

.tag {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  padding: 2px 6px; border-radius: 4px; background: var(--panel-2); color: var(--ink-dim);
}

.log { list-style: none; margin: 0; padding: 0; font-size: .82rem; color: var(--ink-dim); }
.log li { padding: 3px 0; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.log time { font-family: ui-monospace, Menlo, monospace; color: var(--off); }

.grid { width: 100%; border-collapse: collapse; font-size: .88rem; }
.grid th {
  text-align: left; font-weight: 600; font-size: .74rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-dim); padding: 6px 8px 6px 0; border-bottom: 1px solid var(--line);
}
.grid td { padding: 7px 8px 7px 0; border-bottom: 1px solid var(--line); }
.grid tr.dim { opacity: .55; }
.num { font-family: ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums; }

.codes {
  margin-top: 12px; padding: 12px; border: 1px dashed var(--accent); border-radius: var(--radius);
  background: var(--panel-2);
}
.codes ul { list-style: none; margin: 8px 0; padding: 0;
  display: grid; gap: 4px 18px; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.codes li, .codes code { font-family: ui-monospace, Menlo, monospace; font-size: .95rem; }

/* ----------------------------------------------------------------- chart */

.chart { width: 100%; height: auto; margin-top: 8px; }
.chart .series { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .tick { fill: var(--ink-dim); font-size: 11px; text-anchor: end; }
.chart .tick.mid { text-anchor: middle; }

/* ----------------------------------------------------------------- login */

.login { max-width: 380px; margin: 8vh auto 0; text-align: center; }
.login h1 { margin: 0; font-size: 2rem; letter-spacing: -.01em; }
.login .sub { color: var(--ink-dim); font-size: .88rem; margin: 4px 0 18px; }
.login .stack { text-align: left; }
.login label { width: 100%; }
.login input { width: 100%; }
.login button[type=submit] { margin-top: 6px; }
.phone-number {
  font-size: 3rem; font-weight: 650; letter-spacing: .1em; margin: 10px 0 0; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.says { margin: 16px auto 0; max-width: 380px; text-align: center; color: var(--bad); font-size: .88rem; }

/* ----------------------------------------------------------------- flash */

.flash {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  margin: 0; padding: 9px 16px; border-radius: 8px; max-width: 90vw;
  background: var(--panel); border: 1px solid var(--line); color: var(--ink);
  font-size: .88rem; box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}
.flash.bad { border-color: var(--bad); color: var(--bad); }