/* ---------- People & Pets ----------------------------------------------------
   A card wall rather than a table. Everywhere else in the app a row of text is
   the right answer, because a jar of passata is a jar of passata; here the
   photo *is* the label, so the cards are big enough for one and degrade to a
   tinted initial (or a paw) when there isn't one — which is most of the time.

   Every class here is `.ppl-*`. One global namespace, so the prefix is the only
   thing keeping this off the pantry's toes. */

.ppl-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }

/* ---------- the photo, and its stand-in ------------------------------------- */
.ppl-photo {
  flex: none;
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.ppl-photo.person { background: color-mix(in srgb, var(--accent) 14%, var(--surface-2)); color: var(--accent); }
.ppl-photo.pet { background: color-mix(in srgb, var(--amber) 16%, var(--surface-2)); color: var(--amber); }
.ppl-photo.has { background: var(--surface-2); }
.ppl-photo b { font-size: 20px; font-weight: 750; letter-spacing: -0.02em; }
.ppl-photo .ic { width: 24px; height: 24px; }
.ppl-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ppl-photo.big { width: 96px; height: 96px; }
.ppl-photo.big b { font-size: 36px; }
.ppl-photo.big .ic { width: 42px; height: 42px; }

.ppl-photo-wrap { position: relative; cursor: pointer; flex: none; }
.ppl-photo-btn {
  position: absolute; right: -2px; bottom: -2px;
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-contrast);
  border: 2px solid var(--surface);
  box-shadow: var(--shadow-card);
}
.ppl-photo-btn .ic { width: 14px; height: 14px; }
.ppl-photo-wrap:hover .ppl-photo { border-color: var(--accent); }

/* ---------- coming up --------------------------------------------------------
   The only part of the page that's a list, because it's the only part that has
   an order: soonest first, regardless of whose it is. */
.ppl-soon {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 12px 14px;
  margin-bottom: 20px;
}
.ppl-soon h3 {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 750; color: var(--text);
  margin-bottom: 8px;
}
.ppl-soon h3 .ic { width: 15px; height: 15px; color: var(--accent); }
.ppl-soon-rows { display: flex; flex-direction: column; gap: 2px; }
.ppl-soon-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 7px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.ppl-soon-row:hover { background: var(--surface-2); }
.ppl-soon-row > .ic { width: 15px; height: 15px; color: var(--text-muted); }
.ppl-soon-row.birthday > .ic { color: var(--accent); }
.ppl-soon-row.overdue > .ic, .ppl-soon-row.today > .ic { color: var(--red); }
.ppl-soon-row.soon > .ic { color: var(--amber); }
.ppl-soon-row .n { font-size: 13px; font-weight: 650; color: var(--text); min-width: 0; }
.ppl-soon-row .w { font-size: 11.5px; font-weight: 700; color: var(--text-soft); white-space: nowrap; }
.ppl-soon-row.overdue .w, .ppl-soon-row.today .w { color: var(--red); }
.ppl-soon-row .d { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; }

/* ---------- the two sections and their cards -------------------------------- */
.ppl-sec { margin-bottom: 24px; }
.ppl-sec-head {
  display: flex; align-items: baseline; gap: 10px;
  padding-bottom: 8px; margin-bottom: 12px;
  border-bottom: 2px solid var(--border);
}
.ppl-sec-head b {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 15px; font-weight: 750; color: var(--text);
}
.ppl-sec-head b .ic { width: 16px; height: 16px; color: var(--accent); }
.ppl-sec-head span { font-size: 11.5px; color: var(--text-muted); }

.ppl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.ppl-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 12px 12px 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.ppl-card.pet { border-left-color: var(--amber); }
.ppl-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); }
.ppl-card > .ic:last-child { width: 15px; height: 15px; color: var(--text-muted); }
.ppl-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ppl-card-body b { font-size: 14.5px; font-weight: 750; color: var(--text); letter-spacing: -0.01em; }
.ppl-card-body i { font-style: normal; font-size: 11.5px; color: var(--text-muted); }
.ppl-card-line, .ppl-card-diet, .ppl-card-care, .ppl-card-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; color: var(--text-soft);
}
.ppl-card-line .ic, .ppl-card-diet .ic, .ppl-card-care .ic, .ppl-card-chip .ic { width: 12px; height: 12px; }
.ppl-card-line em, .ppl-card-care.none { color: var(--text-muted); font-style: normal; }
.ppl-card-diet { color: var(--blue); font-weight: 600; }
.ppl-card-care { margin-top: 2px; font-weight: 650; }
.ppl-card-care.overdue, .ppl-card-care.today { color: var(--red); }
.ppl-card-care.soon { color: var(--amber); }
.ppl-card-chip { color: var(--text-muted); }

.ppl-empty {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 20px;
  background: var(--surface-2);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  font-size: 13px; color: var(--text-muted);
}
.ppl-empty > .ic { width: 22px; height: 22px; flex: none; color: var(--text-muted); }
.ppl-empty span { flex: 1; min-width: 200px; line-height: 1.55; }
.ppl-empty.small { padding: 14px 16px; font-size: 12.5px; }

/* ---------- one record -------------------------------------------------------
   The name is a live input rather than a heading — this whole page saves as you
   leave a box, and a heading you can't type into next to boxes you can would be
   a lie about which parts are editable. */
.ppl-back {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; margin-bottom: 14px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  font-size: 12.5px; font-weight: 600; color: var(--text-soft);
  cursor: pointer;
}
.ppl-back:hover { background: var(--surface-3); }
.ppl-back .ic { width: 14px; height: 14px; }

.ppl-head {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding-bottom: 18px; margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.ppl-head-text { display: flex; flex-direction: column; gap: 4px; min-width: 220px; flex: 1; }
.ppl-name {
  font-size: 22px; font-weight: 750; letter-spacing: -0.02em; color: var(--text);
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: 2px 6px; margin-left: -6px; width: 100%;
}
.ppl-name:hover { border-color: var(--border); }
.ppl-name:focus { background: var(--surface); border-color: var(--accent); }
.ppl-sub { font-size: 12.5px; color: var(--text-muted); }
.ppl-age {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--text-soft);
}
.ppl-age .ic { width: 14px; height: 14px; color: var(--accent); }
.ppl-age em { color: var(--text-muted); font-style: normal; }
.ppl-head-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }

.ppl-block { margin-bottom: 22px; }
.ppl-block h3 {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 750; color: var(--text);
  text-transform: uppercase; letter-spacing: .05em;
  margin-bottom: 10px;
}
.ppl-block h3 .ic { width: 15px; height: 15px; color: var(--accent); }
.ppl-block h3 .tool { margin-left: auto; text-transform: none; letter-spacing: 0; }

.ppl-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.ppl-form.wide { grid-template-columns: 1fr; }
.ppl-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ppl-field > label {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.ppl-field > label .ic { width: 13px; height: 13px; }
.ppl-field input[type="text"], .ppl-field input[type="tel"], .ppl-field input[type="date"],
.ppl-field input[type="number"], .ppl-field select, .ppl-field textarea {
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--bg-soft);
  color: var(--text);
  font: inherit; font-size: 13px;
}
.ppl-field textarea { resize: vertical; line-height: 1.55; }
.ppl-help { font-size: 11px; color: var(--text-muted); line-height: 1.5; }
.ppl-tick { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); padding: 7px 0; }
.ppl-tick input { width: 16px; height: 16px; accent-color: var(--accent); }
.ppl-rep { display: flex; align-items: center; gap: 8px; }
.ppl-rep input { max-width: 88px; }
.ppl-unit { font-size: 12px; color: var(--text-muted); white-space: nowrap; }

.ppl-spend {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 12.5px; color: var(--text-soft);
}
.ppl-spend .ic { width: 16px; height: 16px; color: var(--accent); flex: none; }

/* ---------- check-ups & care -------------------------------------------------
   Same folding-card habit as the Categories tab: the row says what it is and
   when, and opens into everything you'd only change once a year. */
.ppl-cares { display: flex; flex-direction: column; gap: 8px; }
.ppl-care {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.ppl-care.overdue, .ppl-care.today { border-left-color: var(--red); }
.ppl-care.soon { border-left-color: var(--amber); }
.ppl-care.later { border-left-color: var(--accent); }
.ppl-care.open { box-shadow: var(--shadow-pop); }
.ppl-care-head {
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-areas: "name rep caret" "when tag caret";
  align-items: center;
  gap: 2px 10px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  cursor: pointer;
}
.ppl-care-head:hover { background: var(--surface-2); }
.ppl-care-name { grid-area: name; font-size: 13.5px; font-weight: 700; color: var(--text); }
.ppl-care-rep { grid-area: rep; font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.ppl-care-when { grid-area: when; font-size: 11.5px; color: var(--text-soft); }
.ppl-care-tag {
  grid-area: tag; justify-self: end;
  font-size: 10.5px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.ppl-care.overdue .ppl-care-tag, .ppl-care.today .ppl-care-tag { color: var(--red); }
.ppl-care.soon .ppl-care-tag { color: var(--amber); }
.ppl-care-head > .ic { grid-area: caret; width: 15px; height: 15px; color: var(--text-muted); transition: transform var(--dur-2) var(--ease-out); }
.ppl-care.open .ppl-care-head > .ic { transform: rotate(180deg); }

.ppl-care-quick {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 0 12px 11px;
}
.ppl-care-body { padding: 12px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 12px; }
.ppl-care-body .ppl-form { box-shadow: none; background: var(--surface-2); }
/* direct child only — a <b> inside the "nothing logged yet" line is part of a
   sentence, not another heading */
.ppl-care-log > b {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 750; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .04em;
  margin-bottom: 6px;
}
.ppl-care-log > b .ic { width: 13px; height: 13px; }
.ppl-care-log > b em { text-transform: none; letter-spacing: 0; font-style: normal; font-weight: 600; }
.ppl-care-log ul { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.ppl-care-log li {
  display: grid;
  grid-template-columns: 150px 70px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
}
.ppl-care-log li:nth-child(odd) { background: var(--surface-2); }
.ppl-care-log li .d { color: var(--text); font-weight: 600; }
.ppl-care-log li .c { color: var(--text-soft); }
.ppl-care-log li .n { color: var(--text-muted); min-width: 0; }
.ppl-x {
  display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 6px;
  color: var(--text-muted); cursor: pointer;
}
.ppl-x:hover { background: var(--surface-3); color: var(--red); }
.ppl-x .ic { width: 13px; height: 13px; }
.ppl-care-foot { display: flex; justify-content: flex-end; }

.ppl-care-add {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px;
  margin-bottom: 10px;
  background: var(--surface-2);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
}
.ppl-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.ppl-presets .chip { display: inline-flex; align-items: baseline; gap: 6px; }
.ppl-presets .chip i { font-style: normal; font-size: 10.5px; color: var(--text-muted); }
.ppl-care-own { display: flex; gap: 8px; flex-wrap: wrap; }
.ppl-care-own input {
  flex: 1; min-width: 180px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--bg-soft);
  color: var(--text);
  font: inherit; font-size: 13px;
}

/* ---------- on the House Calendar --------------------------------------------
   css/house.css owns .cal-chip.hc-chip and its status colours; these two only
   say what a birthday and a pet's care look like inside that. Loaded after it,
   so the green wins over the default grey. */
.cal-chip.hc-chip.ppl-bday {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
}
.cal-chip.hc-chip.ppl-bday.today {
  background: color-mix(in srgb, var(--accent) 28%, transparent);
  font-weight: 700;
}
.cal-chip.hc-chip.ppl-care-chip.later {
  background: color-mix(in srgb, var(--amber) 12%, transparent);
  color: var(--amber);
}

@media (max-width: 640px) {
  .ppl-grid { grid-template-columns: 1fr; }
  .ppl-tools, .ppl-head-tools { margin-left: 0; width: 100%; }
  .ppl-care-log li { grid-template-columns: 1fr auto auto; }
  .ppl-care-log li .n { grid-column: 1 / -1; }
}

/* ---------- who can sign in ------------------------------------------------
   The access list, under People & Pets. Separate from the people above on
   purpose: a person is someone who lives here, a member is someone with a
   login, and the two lists overlap without being the same. Built by
   js/house-invites.js, and only when there's a House — none of this matches in
   browser-only mode. */
.hf-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 14px; }
.hf-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface);
}
.hf-row.pending { border-style: dashed; }
.hf-who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.hf-who b { font-size: 13.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hf-who span { font-size: 11.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hf-role {
  font-size: 10.5px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 99px; flex: none;
  background: var(--surface-3); color: var(--text-muted);
}
.hf-role.owner { background: var(--accent-soft); color: var(--green-dark); }
:root[data-theme="dark"] .hf-role.owner { color: var(--accent); }
.hf-x {
  width: 28px; height: 28px; flex: none; border-radius: 8px;
  display: grid; place-items: center; color: var(--text-muted);
}
.hf-x:hover { background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); }
.hf-x-none { width: 28px; flex: none; font-size: 11px; color: var(--text-muted); text-align: center; }

.hf-invite { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hf-invite input {
  flex: 1; min-width: 220px; padding: 9px 12px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font-size: 13.5px;
}
.hf-invite input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.hf-invite input:disabled { opacity: .6; }
.hf-note { font-size: 11.5px; color: var(--text-muted); margin-top: 8px; }