/* ===== Devices (#273) ===== */
.device-list { display: flex; flex-direction: column; gap: var(--toddyi-size-0-75rem); list-style: none; padding: 0; margin: 0; }
.device-list--muted { opacity: 0.6; }

.device-card {
  display: flex; align-items: center; gap: var(--toddyi-size-1rem); flex-wrap: wrap;
  padding: var(--toddyi-size-1rem); border-radius: var(--toddyi-size-0-5rem);
  background: var(--pico-card-background-color);
  border: var(--toddyi-size-1px) solid var(--pico-muted-border-color);
}
.device-card__main { flex: 1 1 var(--toddyi-size-160px); display: flex; flex-direction: column; gap: var(--toddyi-size-0-25rem); text-decoration: none; }
.device-card__name { font-weight: 700; color: var(--pico-color); }
.device-card__meta, .device-card__seen { font-size: var(--toddyi-size-0-8rem); color: var(--pico-muted-color); }

/* Four states, and the difference between them is the point. "offline" is not
   an accusation — it is the app saying nobody can speak for this machine. */
.device-status {
  font-size: var(--toddyi-size-0-75rem); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--toddyi-size-0-08em);
  padding: var(--toddyi-size-0-25rem) var(--toddyi-size-0-6rem);
  border-radius: var(--toddyi-size-999px); border: var(--toddyi-size-1px) solid transparent;
}
.device-status--ok { color: var(--toddyi-success); border-color: var(--toddyi-success); }
.device-status--paused { color: var(--toddyi-warning); border-color: var(--toddyi-warning); }
.device-status--unverified { color: var(--toddyi-warning); border-color: var(--toddyi-warning); }
.device-status--offline { color: var(--toddyi-error); border-color: var(--toddyi-error); }

.product-note {
  max-inline-size: var(--toddyi-size-42rem);
  font-size: var(--toddyi-size-0-9rem);
  margin-block: 0 var(--toddyi-size-1rem);
}
.product-note a { color: var(--pico-primary); }

.device-section-title { margin-top: var(--toddyi-size-2rem); font-size: var(--toddyi-size-1-1rem); }

.device-panel {
  margin-top: var(--toddyi-size-1-5rem); padding: var(--toddyi-size-1rem);
  border-radius: var(--toddyi-size-0-5rem); background: var(--pico-card-background-color);
  border: var(--toddyi-size-1px) solid var(--pico-muted-border-color);
}
.device-panel h2 { font-size: var(--toddyi-size-1-1rem); margin-block-end: var(--toddyi-size-0-75rem); }

.device-banner {
  margin-block: var(--toddyi-size-1rem); padding: var(--toddyi-size-1rem);
  border-radius: var(--toddyi-size-0-5rem);
  border-inline-start: var(--toddyi-size-4px) solid var(--pico-primary);
  background: var(--pico-card-background-color);
}
.device-banner--warning { border-inline-start-color: var(--toddyi-warning); }
.device-banner--info { border-inline-start-color: var(--toddyi-info); }
.device-banner p { margin-block: var(--toddyi-size-0-25rem); }

/* One cell per day. Colour carries the meaning; aria-label carries the same
   meaning for anyone the colour does not reach. The cells hold no text — an
   earlier version used a .visually-hidden span, which this project does not
   define, so every label rendered as visible text and the strip came out as a
   column of the word "Unknown". */
.usage-strip { display: flex; flex-wrap: wrap; gap: var(--toddyi-size-0-25rem); list-style: none; padding: 0; margin: 0; }
/* Pico gives every list item a bottom margin, which staggered the row. */
.usage-strip > li { margin: 0; }
.day-cell {
  /* Never shrink: fourteen cells in a narrow card would otherwise squash into
     slivers instead of wrapping onto a second line. */
  flex: 0 0 auto; display: inline-block;
  inline-size: var(--toddyi-size-16px); block-size: var(--toddyi-size-16px);
  border-radius: var(--toddyi-size-0-25rem); border: var(--toddyi-size-1px) solid var(--pico-muted-border-color);
}
.day-cell--kept { background: var(--toddyi-success); }
.day-cell--broken { background: var(--toddyi-error); }
.day-cell--unknown { background: var(--pico-secondary-background); }

.usage-table { inline-size: var(--toddyi-size-100pct); font-size: var(--toddyi-size-0-9rem); }
.usage-table th { text-align: start; }
.outcome { font-weight: 700; }
.outcome--kept { color: var(--toddyi-success); }
.outcome--broken { color: var(--toddyi-error); }
.outcome--unknown { color: var(--pico-muted-color); }

.event-log { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--toddyi-size-0-35rem); }
.event-log__item { display: flex; gap: var(--toddyi-size-0-75rem); font-size: var(--toddyi-size-0-88rem); }
.event-log__item time { color: var(--pico-muted-color); flex: 0 0 var(--toddyi-size-150px); }
.event-log__item--notable span { font-weight: 700; }
.event-log__item--quiet { color: var(--pico-muted-color); }

.device-form { display: flex; flex-direction: column; gap: var(--toddyi-size-0-75rem); max-inline-size: var(--toddyi-size-32rem); }
.device-form__check { display: flex; align-items: center; gap: var(--toddyi-size-0-5rem); }

.device-link { max-inline-size: var(--toddyi-size-32rem); }
.device-link__form { display: flex; flex-direction: column; gap: var(--toddyi-size-0-75rem); }
.device-link__code { font-family: var(--toddyi-font-mono); font-size: var(--toddyi-size-1-3rem); letter-spacing: var(--toddyi-size-0-08em); text-align: center; text-transform: uppercase; }

.policy-form__profile { border: var(--toddyi-size-1px) solid var(--pico-muted-border-color); border-radius: var(--toddyi-size-0-5rem); padding: var(--toddyi-size-0-75rem); }
.policy-form__password { display: flex; flex-direction: column; gap: var(--toddyi-size-0-25rem); }
.policy-form__note, .policy-form__error { font-size: var(--toddyi-size-0-8rem); }
.policy-form__note { color: var(--pico-muted-color); }
.policy-form__error { color: var(--toddyi-error); font-weight: 700; }