/* Carewatch — carer dashboard styles.
   Consumes tokens from tokens.css (design-system/colors_and_type.css).
   Carer surface: amber/red accents are appropriate here (not Jan-facing). */

:root { color-scheme: dark; }
* { box-sizing: border-box; margin: 0; }

body {
  font-family: var(--font);
  background: var(--bg-0);
  color: var(--fg-1);
  line-height: var(--lh-body);
}

/* ---- page shell ---- */
.wrap {
  max-width: 28rem;
  margin: 0 auto;
  padding: var(--s-4) var(--s-3);
}

/* ---- topbar ---- */
.topbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--s-4);
}

/* ---- type ---- */
.title {
  font-size: 20px;
  font-weight: var(--w-bold);
  color: var(--fg-1);
  margin-bottom: var(--s-4);
}

/* ---- cards ---- */
.card {
  background: var(--bg-1);
  border-radius: var(--r-card);
  box-shadow: inset 0 0 0 1px var(--hairline);
  padding: var(--s-4);
  margin-top: var(--s-3);
}

.card.stale {
  background: var(--caution-soft);
  box-shadow: inset 0 0 0 1px rgba(243,185,72,.25);
}

.card.muted {
  opacity: 0.85;
}

.muted-note {
  color: var(--fg-2);
  font-size: 14px;
  margin-top: var(--s-2);
}

/* ---- stat labels ---- */
.label {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12px;
  font-weight: var(--w-bold);
  color: var(--fg-2);
  margin: var(--s-3) 0 4px;
}
.label:first-child { margin-top: 0; }

/* ---- big stat value (battery %) ---- */
.big {
  font-size: 42px;
  font-weight: var(--w-bold);
  letter-spacing: -0.5px;
  color: var(--fg-1);
}
.big.good { color: var(--affirm); }
.big.low  { color: var(--caution); }

/* ---- last check-in line ---- */
.checkin {
  font-size: 17px;
  color: var(--fg-1);
}
.ago {
  font-size: 14px;
  color: var(--fg-2);
}

/* ---- stale warning ---- */
.warn {
  font-size: 14px;
  color: var(--caution);
  margin-top: var(--s-3);
  font-weight: var(--w-bold);
}

/* ---- login error ---- */
.error {
  font-size: 14px;
  color: var(--emergency);
  margin-bottom: var(--s-3);
}

/* ---- login form inputs ---- */
form.card label {
  display: block;
  font-size: 13px;
  font-weight: var(--w-bold);
  color: var(--fg-2);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: var(--s-1);
}
form.card input {
  width: 100%;
  padding: var(--s-2) var(--s-3);
  font: 16px/1.4 var(--font);
  border-radius: 12px;
  border: none;
  box-shadow: inset 0 0 0 1px var(--hairline);
  background: var(--bg-0);
  color: var(--fg-1);
  margin-bottom: var(--s-3);
}
form.card input:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--calm);
}

/* ---- buttons ---- */
button {
  font: var(--w-bold) 15px/1 var(--font);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-button);
  border: none;
  background: var(--calm-fill);
  color: #fff;
  cursor: pointer;
  transition: filter var(--dur-fast) var(--ease);
  width: 100%;
}
button:hover { filter: brightness(1.15); }

button.link {
  background: none;
  color: var(--calm);
  padding: 0;
  font-weight: var(--w-regular);
  width: auto;
  font-size: 14px;
}
button.link:hover { filter: none; text-decoration: underline; }

/* --- v0.2 silent-control surfaces --- */
.badge-card { display: flex; gap: 1rem; align-items: center; justify-content: space-between; }
.badge {
  font-weight: 600; padding: 0.25rem 0.6rem; border-radius: 0.5rem;
  background: var(--bg-1); color: var(--calm);
}
.badge.pending { color: var(--caution, #E8A33D); }
.ringer { font-variant: small-caps; opacity: 0.9; }
.charging { font-size: 0.7em; }

.sound h2, .sound h3 { margin: 0.4rem 0; }
.override-controls, .schedule-add { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.override-state { font-weight: 600; }
.sound button {
  font: inherit; padding: 0.5rem 0.9rem; border-radius: 0.5rem;
  border: 1px solid var(--calm); background: transparent; color: var(--calm); cursor: pointer;
}
.sound button:active { background: var(--calm); color: var(--bg-0); }
.schedule-list { list-style: none; padding: 0; }
.schedule-list li { display: flex; justify-content: space-between; padding: 0.3rem 0; }
.days label { margin-right: 0.4rem; font-size: 0.9em; }