/* The carer page: same design language as ha/www/neare-nights-card.js.
 * Porcelain page, petrol and copper marks, a serif sentence first and the
 * evidence underneath. No red anywhere: nothing here is an alarm. */
:root {
  --ink: #1B2A2E; --deep: #17323A; --petrol: #20404A; --mist: #DCE6E7;
  --copper: #B4652F; --porcelain: #FAFAF7; --white: #FFFFFF;
  --ink-2: #4A575A;   /* secondary text: 7:1 on porcelain */
  --ink-3: #5A6669;   /* small notes: 5.6:1 on porcelain */
  --line: rgba(27, 42, 46, .14);
  --hatch: repeating-linear-gradient(45deg, rgba(32, 64, 74, .45) 0 1.5px, transparent 1.5px 4px);
  /* lights out: a dashed copper line */
  --dash: repeating-linear-gradient(180deg, var(--copper) 0 3px, transparent 3px 5px);
  /* bedroom movement shading: four steps of one light neutral (the ink, very
     faint), level 0 = no tint. Background only, never a highlight. */
  --mv1: rgba(27, 42, 46, .05); --mv2: rgba(27, 42, 46, .09); --mv3: rgba(27, 42, 46, .14);
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--porcelain); }
body {
  font-family: 'IBM Plex Sans', system-ui, sans-serif; color: var(--ink);
  -webkit-font-smoothing: antialiased; text-size-adjust: 100%;
}
.wrap { max-width: 720px; margin: 0 auto; padding: 28px 16px 40px; }
.demo {
  max-width: 720px; margin: 0 auto; padding: 10px 16px; font-size: 12px; color: var(--deep);
  background: var(--mist); line-height: 1.6;
}
.demo a { color: var(--petrol); }
.demo strong { font-weight: 500; }   /* the made-up home being shown (fonts/fonts.css has 500) */
.eyebrow {
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2);
}
h1 {
  font-family: 'IBM Plex Serif', Georgia, serif; font-weight: 300; font-size: 26px; line-height: 1.22;
  margin: 12px 0 0; letter-spacing: -.01em; max-width: 30ch; text-wrap: pretty;
}
.asof { font-weight: 300; font-size: 14px; margin: 10px 0 0; color: var(--ink-2); }
/* Option A header (21 Oct): up to three facts about last night. One column
   on a phone (a thin line between them); a row with thin dividers from 560px. */
.facts { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 20px; }
.fact { padding: 10px 0; min-width: 0; }
.fact + .fact { border-top: 1px solid var(--line); }
.fl {
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2);
}
.fv { font-family: 'IBM Plex Serif', Georgia, serif; font-weight: 300; font-size: 30px; line-height: 1.15; margin-top: 4px; }
.fn { font-size: 13px; font-weight: 300; color: var(--ink-3); margin-top: 2px; }
/* Read by screen readers, not shown: the night's full sentence list. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 24px; }
.tile { background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; min-width: 0; }
.tl { font-size: 12px; font-weight: 400; color: var(--ink-2); }
.tv { font-size: 22px; font-weight: 400; margin-top: 4px; }
.tn { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; color: var(--ink-3); margin-top: 4px; }
h2 {
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 400; font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin: 32px 0 0;
}
/* Night rows: day | bar 18:00-12:00 (6pm to 12pm) | bathroom visits at night */
.axis, .night { display: grid; grid-template-columns: 48px 1fr 32px; gap: 0 10px; align-items: center; }
.axis { margin-top: 12px; height: 16px; }
.ticks { position: relative; height: 16px; }
.ticks b {
  position: absolute; top: 0; transform: translateX(-50%); font-weight: 400;
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10px; color: var(--ink-3);
}
.ticks b:first-child { transform: none; }
.ticks b:last-child { transform: translateX(-100%); }
.nights { list-style: none; margin: 4px 0 0; padding: 0; }
.night { height: 30px; border-top: 1px solid var(--line); }
.night:first-child { border-top: 0; }
.day { font-size: 13px; font-weight: 400; white-space: nowrap; }
/* Hour lines every 3 hours: 9pm, 12am, 3am, 6am, 9am (sixths of the bar). */
.bar {
  position: relative; height: 18px; border-radius: 3px; background:
    linear-gradient(90deg, transparent calc(16.667% - .5px), var(--line) calc(16.667% - .5px), var(--line) calc(16.667% + .5px), transparent calc(16.667% + .5px)),
    linear-gradient(90deg, transparent calc(33.333% - .5px), var(--line) calc(33.333% - .5px), var(--line) calc(33.333% + .5px), transparent calc(33.333% + .5px)),
    linear-gradient(90deg, transparent calc(50% - .5px), var(--line) calc(50% - .5px), var(--line) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(90deg, transparent calc(66.667% - .5px), var(--line) calc(66.667% - .5px), var(--line) calc(66.667% + .5px), transparent calc(66.667% + .5px)),
    linear-gradient(90deg, transparent calc(83.333% - .5px), var(--line) calc(83.333% - .5px), var(--line) calc(83.333% + .5px), transparent calc(83.333% + .5px)),
    rgba(220, 230, 231, .45);
}
.bar i { position: absolute; display: block; }
.bar .gap { top: 0; bottom: 0; background: var(--hatch); }
.bar .lo { top: -2px; bottom: -2px; width: 2px; margin-left: -1px; background: var(--dash); }
/* light on in the morning: a small open copper ring (quieter than the lines) */
.bar .ml {
  top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%;
  border: 1.5px solid var(--copper); background: var(--porcelain);
}
/* busiest morning hour: a dashed outline round that hour, no fill */
.bar .bh { top: -1px; bottom: -1px; border: 1px dashed var(--petrol); border-radius: 2px; }
/* bedroom movement shading, one cell per hour, behind every mark */
.bar .mv { top: 0; bottom: 0; }
.bar .mv0 { background: transparent; }
.bar .mv1 { background: var(--mv1); }
.bar .mv2 { background: var(--mv2); }
.bar .mv3 { background: var(--mv3); }
.bar .kitchen {
  top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
  background: var(--petrol); box-shadow: 0 0 0 1.5px var(--porcelain);
}
.count { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 13px; text-align: right; }
.legend {
  display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px;
  font-size: 12px; font-weight: 400; color: var(--ink-2);
}
.legend span { white-space: nowrap; }
.sw { display: inline-block; vertical-align: middle; margin-right: 6px; font-style: normal; }
.sw.lo { width: 2px; height: 14px; background: var(--dash); }
.sw.kitchen { width: 8px; height: 8px; border-radius: 50%; background: var(--petrol); }
.sw.bh { width: 14px; height: 10px; border: 1px dashed var(--petrol); border-radius: 2px; }
.sw.ml { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--copper); background: var(--porcelain); }
.sw.mv {
  width: 18px; height: 10px; border-radius: 2px; border: 1px solid var(--line);
  background: linear-gradient(90deg, var(--mv1) 0 33.3%, var(--mv2) 33.3% 66.6%, var(--mv3) 66.6%);
}
.sw.gap { width: 14px; height: 10px; border-radius: 2px; background: var(--hatch); }
.sw.count { font-size: 12px; color: var(--ink); }
.footer {
  margin-top: 32px; padding: 14px 16px; border-radius: 8px; background: var(--mist); color: var(--deep);
  font-size: 14px; font-weight: 400; line-height: 1.5;
}
/* Sign out: quiet, under the footer; a real button (keyboard and screen readers). */
.signout { margin: 16px 0 0; text-align: center; }
.signout button {
  font: inherit; font-size: 14px; font-weight: 400; color: var(--ink-2); background: none; border: 0;
  padding: 12px 16px; min-height: 44px; cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px; border-radius: 6px;
}
.signout button:hover { color: var(--ink); }
.signout button:focus-visible { outline: 2px solid var(--petrol); outline-offset: 2px; }
.signout button:disabled { cursor: default; opacity: .6; }
/* A home without night-trip counts gives the bar the count column's room. */
.no-count .axis, .no-count .night { grid-template-columns: 48px 1fr 0; column-gap: 10px; }
.no-count .count { display: none; }
@media (min-width: 560px) {
  .wrap { padding: 40px 32px 48px; }
  h1 { font-size: 32px; line-height: 1.18; }
  .facts { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .fact { padding: 4px 16px; }
  .fact:first-child { padding-left: 0; }
  .fact + .fact { border-top: 0; border-left: 1px solid var(--line); }
  .tiles { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
  .axis, .night { grid-template-columns: 64px 1fr 40px; }
  .no-count .axis, .no-count .night { grid-template-columns: 64px 1fr 0; }
}