/* Tiger's Window. Layout: one calm column on a phone; on wider screens two columns, with Tiger's
   controls (pause, notes) across the bottom. Green for Tiger, a little tiger orange, stripes only
   in the header. */
@font-face { font-family: "Baloo 2"; src: url("fonts/baloo2.woff2") format("woff2"); font-weight: 500 700; font-display: swap }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("fonts/atkinson-400.woff2") format("woff2"); font-weight: 400; font-display: swap }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("fonts/atkinson-700.woff2") format("woff2"); font-weight: 700; font-display: swap }

:root {
  --bg: #eef4ec;          /* fern paper */
  --surface: #f8fbf6;
  --ink: #17301f;          /* forest */
  --ink-soft: #4f6b57;
  --line: #d3e2d2;
  --accent: #2f8a52;       /* jungle green */
  --accent-soft: #d6eedb;
  --stripe: #cfe6d3;
  --tiger: #c56f1c;        /* a little tiger orange, used sparingly */
  --good: #2f8a52;
  --warn: #9a6512;
  --rest: #6b7fb8;         /* sleep */
  --rest-soft: rgba(107,127,184,.16);
  --off: #b9c7b8;
  --display: "Baloo 2", "Nunito", "Trebuchet MS", system-ui, sans-serif;
  --body: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0f1a14; --surface: #16241b; --ink: #e3f0e4; --ink-soft: #9db8a3; --line: #27392d;
  --accent: #6fcf8f; --accent-soft: #1f3a29; --stripe: #1a2c20; --tiger: #f0a35a;
  --good: #6fcf8f; --warn: #e3b55c; --rest: #9fb0e8; --rest-soft: rgba(159,176,232,.15); --off: #3a4d40; color-scheme: dark } }
:root[data-theme="dark"] {
  --bg: #0f1a14; --surface: #16241b; --ink: #e3f0e4; --ink-soft: #9db8a3; --line: #27392d;
  --accent: #6fcf8f; --accent-soft: #1f3a29; --stripe: #1a2c20; --tiger: #f0a35a;
  --good: #6fcf8f; --warn: #e3b55c; --rest: #9fb0e8; --rest-soft: rgba(159,176,232,.15); --off: #3a4d40; color-scheme: dark }

* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 var(--body) }
[hidden] { display: none !important }
.wrap { max-width: 1120px; margin: 0 auto; padding-inline: 16px; padding-block: 0 48px }
h1, h2, h3 { font-family: var(--display); line-height: 1.15; text-wrap: balance; margin: 0 }
h2 { font-size: 1.35rem; font-weight: 600 }
h3 { font-size: 1.05rem; font-weight: 600 }
p { margin: 0 }
.muted { color: var(--ink-soft) }
.num { font-variant-numeric: tabular-nums }

/* Header: the one bold place. Soft green tiger stripes. */
header.top {
  padding: calc(28px + env(safe-area-inset-top, 0px)) 16px 22px;
  background:
    repeating-linear-gradient(112deg, transparent 0 34px, var(--stripe) 34px 52px, transparent 52px 70px, var(--stripe) 70px 78px, transparent 78px 120px),
    var(--bg);
  border-bottom: 1px solid var(--line);
}
header.top .inner { max-width: 1088px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: end; justify-content: space-between }
header.top h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); font-weight: 700 }
header.top h1 span { color: var(--tiger) }
.status { display: flex; flex-wrap: wrap; gap: 8px }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: .9rem; white-space: nowrap }
.chip.live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--good); animation: pulse 2.4s infinite }
.chip.stale::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--warn) }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 60%, transparent) } 70% { box-shadow: 0 0 0 8px transparent } 100% { box-shadow: 0 0 0 0 transparent } }
.sample { margin-top: 14px; font-size: .85rem; color: var(--ink-soft) }
.sample b { color: var(--tiger) }

main { display: grid; gap: 28px; margin-top: 26px; grid-template-columns: 1fr }
@media (min-width: 900px) { main { grid-template-columns: 1fr 1fr } .span { grid-column: 1 / -1 } }
section { display: grid; gap: 14px; align-content: start; min-width: 0 }
.head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap }

/* Sign-in */
.gate { margin: 40px auto 0; max-width: 460px }
.gate form, .gate .card { gap: 10px }
.gate label { font-size: .9rem; color: var(--ink-soft) }
input[type="password"] { font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; width: 100% }

/* "Right now" tiles */
.tiles { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: grid; gap: 2px; align-content: start; min-width: 0 }
.tile .label { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft) }
.tile .big { font-family: var(--display); font-size: 1.7rem; font-weight: 600; line-height: 1.2 }
.tile .big small { font-size: .95rem; font-weight: 500; color: var(--ink-soft) }
.tile .sub { font-size: .88rem; color: var(--ink-soft) }
.meter { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; margin-top: 6px }
.meter i { display: block; height: 100%; background: var(--accent); border-radius: 3px }
.meter.low i { background: var(--tiger) }

/* Explanations */
details.explain { font-size: .9rem }
details.explain summary { cursor: pointer; color: var(--accent); list-style: none; display: inline-flex; gap: 6px; align-items: center }
details.explain summary::-webkit-details-marker { display: none }
details.explain summary::before { content: "?"; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid currentColor; font-size: .72rem; font-weight: 700 }
details.explain[open] summary { margin-bottom: 4px }
details.explain p { color: var(--ink-soft); max-width: 62ch }
summary:focus-visible, button:focus-visible, textarea:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }

/* Cards and the timeline */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; display: grid; gap: 12px; min-width: 0 }
.timeline { list-style: none; margin: 0; padding: 0; display: grid }
.timeline li { display: grid; grid-template-columns: 52px 26px 1fr; gap: 8px; align-items: start; padding: 7px 0; border-top: 1px dashed var(--line) }
.timeline li:first-child { border-top: 0 }
.timeline li.empty { display: block; color: var(--ink-soft) }
.timeline time { font-variant-numeric: tabular-nums; color: var(--ink-soft); font-size: .92rem; padding-top: 1px }
.timeline .ic { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; background: var(--accent-soft) }
.timeline .what { min-width: 0; overflow-wrap: anywhere }
.timeline .what small { display: block; color: var(--ink-soft); font-size: .85rem }
.timeline li.new { animation: arrive 1.6s ease-out }
@keyframes arrive { from { background: var(--accent-soft) } to { background: transparent } }
.counts { display: flex; gap: 8px; flex-wrap: wrap }
.pill { padding: 3px 10px; border-radius: 999px; background: var(--accent-soft); font-size: .88rem; white-space: nowrap }

/* Night */
.sleepbar, .wearbar { position: relative; height: 34px; border-radius: 10px; background: var(--line); overflow: hidden }
.sleepbar .asleep { position: absolute; top: 0; bottom: 0; background: var(--rest); opacity: .85 }
.sleepbar .mark { position: absolute; top: 5px; bottom: 5px; width: 2px; background: var(--surface); opacity: .9 }
.wearbar { display: flex }
.wearbar i { display: block; height: 100% }
.wearbar .on { background: var(--accent) }
.wearbar .charging { background: var(--tiger) }
.wearbar .off { background: var(--off) }
.axis { display: flex; justify-content: space-between; font-size: .8rem; color: var(--ink-soft); font-variant-numeric: tabular-nums }
.readings { width: 100%; border-collapse: collapse; font-size: .92rem; font-variant-numeric: tabular-nums }
.readings th { text-align: left; font-weight: 400; color: var(--ink-soft); font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; padding: 4px 6px; border-bottom: 1px solid var(--line) }
.readings td { padding: 6px; border-bottom: 1px dashed var(--line); white-space: nowrap }
.tablewrap { overflow-x: auto }
.learning { display: flex; gap: 10px; align-items: center; font-size: .9rem; flex-wrap: wrap }
.dots { display: flex; gap: 4px }
.dots i { width: 10px; height: 10px; border-radius: 50% ; background: var(--line) }
.dots i.on { background: var(--accent) }

/* Charts */
.chart svg { width: 100%; height: auto; display: block }
.chart text { fill: var(--ink-soft); font: 11px var(--body) }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: .85rem; color: var(--ink-soft) }
.key::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: var(--c) }
.k-accent { --c: var(--accent) }
.k-band { --c: color-mix(in srgb, var(--accent) 25%, transparent) }
.k-rest { --c: var(--rest-soft) }
.k-on { --c: var(--accent) }
.k-charging { --c: var(--tiger) }
.k-off { --c: var(--off) }

/* Keeper */
.keeper { grid-template-columns: auto 1fr; align-items: start }
.keeper-text { display: grid; gap: 6px; min-width: 0 }
.paw { font-size: 2rem; line-height: 1 }

/* Tiger's controls */
.controls { background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 20px; padding: 20px; display: grid; gap: 22px; grid-template-columns: 1fr }
@media (min-width: 900px) { .controls { grid-template-columns: 1fr 1fr } }
.control { display: grid; gap: 10px; align-content: start; min-width: 0 }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center }
select, textarea { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px }
textarea { width: 100%; resize: vertical; min-height: 64px }
button { font: 600 1rem var(--display); border: 0; border-radius: 12px; padding: 10px 18px; cursor: pointer; color: var(--surface); background: var(--accent); justify-self: start }
button:disabled { opacity: .6; cursor: default }
button.link { background: none; color: var(--accent); padding: 0; font: inherit; text-decoration: underline }
.hold { position: relative; overflow: hidden; background: var(--ink); color: var(--bg); min-width: 220px; touch-action: none; user-select: none; -webkit-user-select: none }
.hold .fill { position: absolute; inset: 0; background: var(--tiger); transform-origin: left; transform: scaleX(0); opacity: .9 }
.hold span { position: relative }
.toast { font-size: .92rem; color: var(--accent); min-height: 1.4em }
.toast.err { color: var(--tiger) }
.paused-banner { background: color-mix(in srgb, var(--tiger) 16%, var(--surface)); border: 1px solid var(--tiger); border-radius: 14px; padding: 12px 14px }
.notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .9rem }
.notes li { display: flex; gap: 8px; justify-content: space-between; border-top: 1px dashed color-mix(in srgb, var(--accent) 30%, transparent); padding-top: 6px; overflow-wrap: anywhere }
.notes li span:last-child { color: var(--ink-soft); white-space: nowrap }
footer { margin-top: 30px; font-size: .85rem; color: var(--ink-soft); display: grid; gap: 6px; max-width: 70ch }

@media (prefers-reduced-motion: reduce) { .chip.live::before, .timeline li.new { animation: none } }