/* One screen, no framework (section 11).
   Sized for a phone held one-handed in a cold hallway: large tap targets, one
   number that can be read at a glance, and nothing that needs precision. */

:root {
  color-scheme: light dark;

  --bg: #f6f6f4;
  --surface: #ffffff;
  --text: #17181a;
  --muted: #6a6f76;
  --line: #e2e3e0;
  --accent: #b4472a;
  --accent-text: #ffffff;
  --warn: #8a5a00;
  --danger: #a8291c;
  --radius: 14px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1d21;
    --surface: #24272c;
    --text: #f0f1f2;
    --muted: #9aa0a8;
    --line: #33373d;
    --accent: #d4613f;
    --accent-text: #17181a;
    --warn: #e0b060;
    --danger: #e07a6a;
  }
}

* {
  box-sizing: border-box;
}

/*
  The UA rule for [hidden] is display:none, but any class that sets display wins
  over it on specificity. Every screen and prompt below sets display, so without
  this the whole app renders at once: sign-in, forbidden and the app itself,
  stacked. Found by looking at the page rather than by a test.
*/
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.screen {
  max-width: 30rem;
  margin: 0 auto;
  padding: 2rem 1.25rem calc(2rem + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.brand {
  font-size: 1.5rem;
  margin: 0;
}

.muted {
  color: var(--muted);
  margin: 0;
}

/* ---------------------------------------------------------------- reading */

.reading {
  text-align: center;
  padding: 1.5rem 0 0.5rem;
}

.temp {
  font-size: clamp(4rem, 22vw, 6rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

/* Invariant 4.7: every temperature carries its age. This is not decoration. */
.age {
  color: var(--muted);
  font-size: 0.95rem;
  margin-top: 0.5rem;
}

.explain {
  color: var(--warn);
  font-size: 0.95rem;
  margin-top: 0.5rem;
}

.temp.nodata {
  color: var(--muted);
  font-size: clamp(2rem, 10vw, 2.75rem);
}

/* ---------------------------------------------------------------- modes */

.modes {
  display: grid;
  gap: 0.75rem;
}

.mode {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  /* Comfortably above the 44px minimum, because this gets pressed with gloves. */
  min-height: 4rem;
  position: relative;
  font: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.mode:hover {
  border-color: var(--muted);
}

/*
  Selection and heat are two different facts, and they were sharing one colour.
  A warm fill on the chosen mode reads as "the heat is on", which was wrong
  whenever frost was selected and the cabin was already warm enough.

  So: selection is a neutral outline plus a tick, and the warm fill appears only
  when the relay is actually closed.
*/
.mode[aria-pressed='true'] {
  border-color: var(--text);
  border-width: 2px;
  padding: calc(1rem - 1px) calc(1.25rem - 1px);
}

.mode-mark {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  font-size: 1.1rem;
  line-height: 1;
  opacity: 0;
}

.mode[aria-pressed='true'] .mode-mark {
  opacity: 1;
}

/* The relay is closed, so the selected mode is the one producing heat. */
.modes[data-heating='true'] .mode[aria-pressed='true'] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
}

.modes[data-heating='true'] .mode[aria-pressed='true'] .mode-hint {
  color: var(--accent-text);
  opacity: 0.85;
}

.mode-name {
  font-weight: 600;
  font-size: 1.05rem;
}

.mode-hint {
  color: var(--muted);
  font-size: 0.9rem;
}

.mode:disabled {
  opacity: 0.6;
  cursor: default;
}

.pending {
  margin: 0;
  color: var(--muted);
  text-align: center;
  font-size: 0.95rem;
}

/* ---------------------------------------------------------------- prompts */

.prompt {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.prompt h2 {
  margin: 0;
  font-size: 1.1rem;
}

.prompt.danger {
  border-color: var(--danger);
}

.presets {
  display: grid;
  gap: 0.5rem;
}

.button {
  appearance: none;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-text);
  border-radius: var(--radius);
  padding: 0.9rem 1.25rem;
  font: inherit;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  display: block;
  min-height: 3rem;
}

.button.secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--line);
}

.button.danger-button {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}

.signin-buttons {
  display: grid;
  gap: 0.75rem;
}

/* ---------------------------------------------------------------- secondary */

.secondary-readings {
  display: flex;
  gap: 0.75rem;
}

.pill {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
}

.pill-label {
  color: var(--muted);
  font-size: 0.9rem;
}

.pill-value {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.pill-value.nodata {
  font-weight: 400;
  color: var(--muted);
  font-size: 0.9rem;
}

.warn {
  margin: 0;
  color: var(--warn);
  font-size: 0.9rem;
  text-align: center;
}

.audit {
  color: var(--muted);
  font-size: 0.9rem;
  text-align: center;
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}

.fineprint {
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0;
}

.fineprint a {
  color: inherit;
}

/* A page of prose, for the two links Google requires on the consent screen. */
.prose {
  max-width: 34rem;
  margin: 0 auto;
  padding: 2rem 1.25rem;
  line-height: 1.65;
}

.prose h1 {
  font-size: 1.4rem;
}

.prose a {
  color: inherit;
}

/* ---------------------------------------------------------------- custom time */

.custom-time {
  border-top: 1px solid var(--line);
  padding-top: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.custom-time label {
  color: var(--muted);
  font-size: 0.9rem;
}

.custom-time-row {
  display: flex;
  gap: 0.5rem;
}

.custom-time-row input {
  flex: 1;
  min-width: 0;
  font: inherit;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  /* iOS shrinks a datetime input below the tap target otherwise. */
  min-height: 3rem;
}

.custom-time-row .button {
  flex: 0 0 auto;
  padding-inline: 1.25rem;
}

.custom-time-error {
  margin: 0;
  color: var(--danger);
  font-size: 0.9rem;
}