/* Housewatch pages: the public calling card (/) and the family status (/status).
   Colours, spacing, radius, motion and the glass all come from the reneOS kit
   (/kit/reneos-kit.css, a byte copy of the generated kit). This file only lays
   the two pages out; any colour written here is a kit colour at an alpha. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--space-8) var(--space-4) calc(var(--space-6) + env(safe-area-inset-bottom));
  font-weight: 400;
  text-align: center;
  -moz-osx-font-smoothing: grayscale;
}

.shell {
  width: min(100%, 440px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}

.mark { display: block; width: 88px; height: 88px; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .35)); }

.panel { width: 100%; padding: var(--space-6) 28px; border-radius: var(--radius-lg); }

/* The kit's eyebrow is 0.65rem; the family floor is 12px. */
.eyebrow {
  margin: 0;
  padding-left: .28em;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--rene-muted);
}

.title {
  margin: var(--space-3) 0 0;
  font-size: clamp(2.25rem, 8vw, 3.25rem);
  font-weight: 300;
  letter-spacing: -.035em;
  line-height: 1.05;
}
.title:focus { outline: none; }

.lede {
  margin: var(--space-5) auto 0;
  max-width: 32ch;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--rene-white-soft);
  text-wrap: balance;
}

.rule { height: 1px; margin: var(--space-6) 0 var(--space-5); border: 0; background: var(--rene-line-soft); }

.note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--rene-muted); text-wrap: balance; }

/* A real 44px target through padding, never an invisible hit area. */
.action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: var(--space-4);
  font-size: 14px;
  text-decoration: none;
  touch-action: manipulation;
}
.wide { display: flex; width: 100%; min-height: 48px; justify-content: center; align-items: center; font-size: 15px; }
.rene-button-primary, .rene-button-secondary { touch-action: manipulation; }
/* The kit gives the primary button press and disabled states; this is its
   hover: slightly brighter, never a jump. The same gradient drawn solid from
   the kit's own whites, --rene-white to --rene-white-soft. Pointer devices
   only, so a tap on a phone never leaves it lit. */
@media (hover: hover) {
  .rene-button-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--rene-white), var(--rene-white-soft));
    border-color: var(--rene-white);
  }
}

/* Quiet text actions (About, Sign out, Refresh): plain words, a 44px target
   through padding, brighter on hover, ringed on focus by the kit. */
.text-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 6px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--rene-muted);
  background: none;
  border: 0;
  border-radius: 10px;
  text-decoration: underline;
  text-decoration-color: rgba(147, 160, 173, .45);
  text-underline-offset: 3px;
  cursor: pointer;
  touch-action: manipulation;
  transition: color var(--rene-transition), text-decoration-color var(--rene-transition);
}
.text-link:hover { color: var(--rene-white-soft); text-decoration-color: rgba(217, 224, 231, .7); }
.text-link:active { color: var(--rene-white); }
.text-link:disabled { opacity: .45; cursor: default; }

.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: var(--space-1);
  margin-top: var(--space-4);
  padding-top: var(--space-2);
  border-top: 1px solid var(--rene-line-soft);
}

/* The maker's mark: the family's one .byline rule, set exactly as on the
   Calista page and Marquee. 14px, one baseline, the wordmark at .85em (about
   12px) so it stays legible on a phone, in --rene-white at .55 (the rgba is
   the same colour for browsers without color-mix). */
.byline { display: inline-flex; align-items: baseline; gap: .45em; font-family: var(--rene-font);
  font-style: normal; font-weight: 400; font-size: 14px; line-height: 1; letter-spacing: .06em;
  color: rgba(245, 247, 250, .55); text-transform: none; white-space: nowrap; text-indent: 0; }
.byline { color: color-mix(in srgb, var(--rene-white, #F5F7FA) 55%, transparent); }
.byline img { height: .85em; width: auto; display: inline-block; align-self: baseline; opacity: .9; }

/* The kit rings links, buttons and inputs; this covers anything else
   focusable, in the Housewatch accent (accent-housewatch on the body). */
:focus-visible { outline: 1px solid rgba(143, 212, 255, .70); outline-offset: 3px; }
:focus-visible { outline-color: color-mix(in srgb, var(--accent-primary, #8FD4FF) 70%, transparent); }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- the code */

/* Everything in the code view shares the panel's centre line. */
.field { margin-top: var(--space-5); text-align: center; }
.field label { display: block; margin: 0 0 var(--space-2); font-size: 13px; font-weight: 500; color: var(--rene-muted); }
.code {
  display: block;
  width: 100%;
  min-height: 56px;
  padding: 12px 14px;
  font: inherit;
  font-size: 24px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .32em;
  text-indent: .32em;
  text-align: center;
  color: var(--rene-white);
  background: var(--rene-glass);
  border: 1px solid var(--rene-line);
  border-radius: 14px;
  outline: none;
  transition: border-color var(--rene-transition), background var(--rene-transition);
}
.code:hover { background: var(--rene-glass-hover); border-color: rgba(255, 255, 255, .2); }
.code:focus { border-color: rgba(143, 212, 255, .55); border-color: color-mix(in srgb, var(--accent-primary, #8FD4FF) 55%, transparent); }
.code[aria-invalid="true"] { border-color: rgba(231, 124, 124, .6); }
/* Masked as it is typed: a style, not type=password, so phones keep the
   number pad and no password manager offers to save the code. */
.code.masked { -webkit-text-security: disc; }
/* Show or hide the code: a quiet text action right under the field. */
.reveal { margin: var(--space-1) auto 0; }
.reveal + .err { margin-top: 2px; }
.err { min-height: 21px; margin: 10px 0 var(--space-2); font-size: 14px; line-height: 1.5; color: var(--rene-error); text-align: center; text-wrap: balance; }
/* No error, no gap: the line takes no room until it has something to say. It
   stays rendered (only empty), so its alert role still speaks when it fills. */
.err:empty, .reveal + .err:empty { min-height: 0; margin: 0 0 var(--space-2); }
.reveal[hidden] + .err:empty { margin-top: var(--space-2); }
.hint { margin: var(--space-4) 0 0; font-size: 13px; line-height: 1.5; color: var(--rene-muted); }

/* ---------------------------------------------------------------- the pulse */

.state { display: flex; align-items: center; justify-content: center; gap: 14px; }
.state .title { margin-top: var(--space-3); }

.dot {
  --dot: var(--rene-dim);
  flex: none;
  width: 12px;
  height: 12px;
  margin-top: var(--space-3);
  border-radius: 50%;
  background: var(--dot);
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .06);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--dot) 18%, transparent);
  transition: background var(--rene-transition), box-shadow var(--rene-transition);
}
.dot.is-up { --dot: var(--rene-success); }
.dot.is-quiet { --dot: var(--rene-error); }
/* is-waiting and is-unknown stay the neutral grey: no claim about the house. */
/* One beat when a new heartbeat arrives, then still. Never a loop. */
.dot.beat { animation: hw-beat 900ms var(--rene-ease) 1; }
@keyframes hw-beat { 0% { transform: scale(1); } 28% { transform: scale(1.4); } 100% { transform: scale(1); } }

.quiet-note { margin: var(--space-3) auto 0; max-width: 36ch; color: var(--rene-white-soft); text-wrap: pretty; }

/* The strip is 44px tall so a tap lands on it; the marks sit on its centre line.
   Segments may shrink to nothing and the strip clips from the old end, so a
   flapping heartbeat never spills out of the panel or hides "now". */
.strip-wrap { margin: var(--space-4) 0 0; }
/* The 3px side padding is room for the chosen stretch's edge, so the first
   and last stretches show theirs whole; the axis keeps the same inset. */
.strip {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  height: 44px;
  padding: 0 3px;
  overflow: hidden;
  touch-action: manipulation;
}
.strip.dense { gap: 0; }
/* The strip takes focus for its arrow keys. The hour labels sit in its lower
   padding, so the ring goes round the whole figure instead of through them. */
.strip-wrap { border-radius: 10px; }
@supports selector(:has(a)) {
  .strip:focus-visible { outline: none; }
  .strip-wrap:has(.strip:focus-visible) { outline: 1px solid rgba(143, 212, 255, .70); outline-offset: 6px; }
  .strip-wrap:has(.strip:focus-visible) { outline-color: color-mix(in srgb, var(--accent-primary, #8FD4FF) 70%, transparent); }
}
.seg { flex: 1 1 0; min-width: 0; border-radius: 2px; transition: opacity var(--rene-transition), box-shadow var(--rene-transition); }
.seg.up { height: 4px; background: var(--rene-success); opacity: .7; }
.seg.quiet { height: 12px; background: var(--rene-error); opacity: .9; }
.seg.none { height: 2px; background: var(--rene-line); }
/* The chosen stretch: the design system's selected state, an edge in the
   Housewatch accent, set off from the mark by a thin gap of the page colour. */
.seg.on { opacity: 1; box-shadow: 0 0 0 2px var(--rene-black-soft), 0 0 0 3px var(--accent-primary, #8FD4FF); }

/* Hour marks under the strip. pointer-events: none keeps the strip's full
   44px for taps where the labels sit in its lower padding. */
.axis {
  position: relative;
  height: 18px;
  margin: -10px 3px 0;
  font-size: 12px;
  line-height: 18px;
  color: var(--rene-muted);
  pointer-events: none;
}
.axis-now { position: absolute; right: 0; top: 0; }
.tick { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.tick::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -5px;
  width: 1px;
  height: 4px;
  background: var(--rene-line);
}

.summary { margin: var(--space-3) 0 0; min-height: 1.5em; }

.outages { margin-top: var(--space-5); }
.sub { margin: 0 0 var(--space-2); font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--rene-white-soft); }
.list { margin: 0; padding: 0; list-style: none; }
.list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  padding: 9px 0;
  border-top: 1px solid var(--rene-line-soft);
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
  color: var(--rene-white-soft);
}
.list li:last-child { border-bottom: 1px solid var(--rene-line-soft); }
.list .len { flex: none; color: var(--rene-muted); font-variant-numeric: tabular-nums; text-align: right; }
.list li.none { justify-content: center; text-align: center; color: var(--rene-muted); }

.fresh { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: var(--space-1); margin-top: var(--space-4); }

@media (max-width: 420px) {
  .mark { width: 72px; height: 72px; }
  .panel { padding: 28px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .rene-rise, .dot.beat { animation: none; }
  .rene-button-primary:active, .rene-button-secondary:active { transform: none; }
  .dot, .seg, .text-link { transition: none; }
}