/* clock.linivi.se – minimalistisk klockvy enligt avsnitt 8 i beställningen */
:root {
  --bg: #000000;
  --label: #8a8a8a;
  --muted: #5a5a5a;
  --stale: #3a3a3a;
  --ok: #2fd25a;
  --warn: #f5a623;
  --bad: #ff3b30;
  --c-tod: #c6d9f8;
  --c-ltc1: #c00000;
  --c-ltc2: #00e84f;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Tunna siffror: systemets tunna snitt (SF, Roboto, Segoe UI Light) */
  --digits: "Helvetica Neue", Roboto, "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: var(--bg); color: var(--label); }

/* ── Klockvy ─────────────────────────────────────────────────────── */
body.clock {
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 2.5vh;
  padding: max(2vh, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
           max(2vh, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  font-family: var(--sans);
  user-select: none; -webkit-user-select: none;
}

.row { display: flex; flex-direction: column; align-items: center; width: 100%; }

.label {
  display: flex; align-items: center; gap: .6em;
  font-size: clamp(12px, 2.2vw, 28px);
  letter-spacing: .25em; color: var(--label); font-weight: 500;
}
.dot {
  width: .65em; height: .65em; border-radius: 50%;
  background: var(--ok); box-shadow: 0 0 .45em var(--ok);
}
.row.unlocked .dot { background: var(--warn); box-shadow: none; }
.row.stale .dot { background: var(--bad); box-shadow: none; }

.value {
  font-family: var(--digits);
  font-weight: 500;
  line-height: 1; white-space: nowrap;
  /* --vfs sätts av fit() i clock.js; detta är reserv före första mätningen */
  font-size: var(--vfs, min(14vw, 20vh));
  font-variant-numeric: tabular-nums;
}
#tod  .value { color: var(--c-tod); }
#ltc1 .value { color: var(--c-ltc1); }
#ltc2 .value { color: var(--c-ltc2); }
.row.unlocked .value { opacity: .55; }
.row.stale .value { color: var(--stale); }

.value .d { display: inline-block; width: .58em; text-align: center; }
.value .s { display: inline-block; width: .28em; text-align: center; }
.value .f { font-size: .62em; }

footer {
  position: fixed; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 8px max(16px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  font-size: 13px; color: var(--muted);
}
body.all-stale #status { color: var(--bad); }
footer button {
  background: none; border: 0; color: var(--muted); font: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; padding: 4px 0;
}
footer button:hover, footer button:focus-visible { color: var(--label); }

/* ── Inloggning ──────────────────────────────────────────────────── */
body.login {
  display: flex; align-items: center; justify-content: center;
  padding: 16px; font-family: var(--sans);
}
body.login form { display: flex; flex-direction: column; gap: 14px; width: min(280px, 100%); }
body.login label { font-size: 13px; letter-spacing: .25em; text-align: center; }
body.login input {
  background: #111; color: #e6e6e6; border: 1px solid #333; border-radius: 6px;
  font: 200 28px var(--digits); letter-spacing: .3em; text-align: center; padding: 10px;
}
body.login input:focus { outline: none; border-color: var(--c-tod); }
body.login button {
  background: #1a1a1a; color: #e6e6e6; border: 1px solid #333; border-radius: 6px;
  font: 500 15px var(--sans); padding: 12px; cursor: pointer;
}
body.login button:hover, body.login button:focus-visible { border-color: var(--c-tod); }
body.login .msg { min-height: 1.4em; color: var(--bad); font-size: 14px; text-align: center; }