/* AskRoxy feature-card stylesheet.
 *
 * Split from app.css when it crossed the 800-line backstop. The seam is the
 * one the doctrine already draws: app.css owns the SHELL — the app bar, the
 * page/section machinery, the dashboard grid, the one-tap buttons, the generic
 * .card/.pill primitives every card leans on. This file owns the styling of
 * INDIVIDUAL feature cards, in the same order they appear in app.css's history.
 *
 * Behaviour-preserving move: the rules below are byte-identical to the ones
 * that were at the end of app.css, and the two files are linked in the same
 * order they were concatenated in, so cascade and specificity are unchanged.
 *
 * A new feature card's styles belong HERE. The shell should not grow again.
 */

/* --- caregiver wellbeing (spec §22.1) -------------------------------------- */
/* The privacy line is styled to be read, not skimmed past: somebody deciding
   whether to write "I'm overwhelmed" needs to know who sees it before they
   type, not after. */
.wellbeing-privacy {
  background: #f3ece2;
  border-left: 3px solid var(--brown);
  border-radius: 0.6rem;
  padding: 0.6rem 0.75rem;
  font-size: 0.85rem;
  line-height: 1.4;
  margin-bottom: 0.6rem;
}
.mood-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin: 0.7rem 0;
}
button.mood-btn {
  appearance: none;
  border: 1px solid #e0cdb4;
  background: #fff;
  border-radius: 0.9rem;
  padding: 0.7rem 0.3rem;
  font-family: inherit;
  color: var(--dark);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  text-align: center;
}
button.mood-btn.selected {
  border-color: var(--brown);
  background: #f7efe4;
  box-shadow: inset 0 0 0 1px var(--brown);
}
.mood-emoji { font-size: 1.5rem; line-height: 1; }
.mood-label { font-size: 0.7rem; font-weight: 600; line-height: 1.2; }
.wellbeing-entry {
  border-top: 1px solid #f0e2cf;
  padding: 0.6rem 0 0.5rem;
}
.wellbeing-head { font-weight: 600; font-size: 0.95rem; }
.wellbeing-meta { font-size: 0.75rem; color: #a08464; margin-top: 0.15rem; }
.wellbeing-note { font-size: 0.9rem; margin-top: 0.35rem; white-space: pre-wrap; }
.wellbeing-help-line {
  background: #fbe3c0;
  border-radius: 0.6rem;
  padding: 0.5rem 0.7rem;
  font-size: 0.85rem;
  margin-bottom: 0.4rem;
}

/* Timeline (spec §23): year → month → entries, read-only. */
/* Family journal (spec §22) */
.journal-entry {
  border-top: 1px solid #f0e2cf; padding: 0.7rem 0 0.6rem;
}
.journal-entry:first-child { border-top: none; }
.journal-text { white-space: pre-wrap; margin: 0.3rem 0; line-height: 1.4; }
.journal-entry .thumb { max-width: 96px; border-radius: 0.5rem; margin: 0.3rem 0.3rem 0 0; }
.journal-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.5rem 0; }
.journal-tags .pill { font-size: 0.75rem; padding: 0.3rem 0.7rem; }
.journal-people { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.5rem 0; font-size: 0.85rem; }
.journal-person { display: inline-flex; align-items: center; gap: 0.25rem; }
#journal-text {
  width: 100%; font-family: inherit; font-size: 1rem; color: var(--dark);
  border: 1px solid #e0cdb4; border-radius: 0.6rem; padding: 0.6rem;
  background: var(--cream); resize: vertical;
}

.timeline-year { margin-top: 0.8rem; }
.timeline-month { margin: 0.4rem 0 0.6rem 0.2rem; }
.timeline-entry {
  border-left: 2px solid #f0e2cf;
  padding: 0.35rem 0 0.35rem 0.7rem;
  margin-left: 0.3rem;
  font-size: 0.9rem;
}
.timeline-entry .pending-meta { margin-top: 0.1rem; }

/* Outings (spec §14). The route is drawn inline — no map tiles, no external
   requests (CSP), so it still renders on a walk with no signal. */
.outing-route { margin: 0.6rem 0; background: #f7ede0; border-radius: 0.8rem; min-height: 0; }
.outing-route:empty { display: none; }
.rating-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem 0.6rem; margin: 0.6rem 0;
}
.rating-grid label, .outing-outcome {
  display: flex; align-items: center; justify-content: space-between; gap: 0.4rem;
  font-size: 0.82rem; color: #7a6248;
}
.rating-grid select, .outing-outcome select {
  font-family: inherit; font-size: 0.9rem; color: var(--dark);
  border: 1px solid #e0cdb4; border-radius: 0.5rem; padding: 0.3rem 0.4rem;
  background: var(--cream);
}
.outing-outcome { margin: 0.4rem 0 0.6rem; }
.place-row { font-size: 0.9rem; padding: 0.3rem 0; border-top: 1px solid #f0e2cf; }
.place-row:first-child { border-top: none; }

/* Food card (spec §10). The uncounted list is deliberately plain text rather
   than a badge: "not counted" is information a person needs to read, not a
   status to glance past. */
#food-uncounted .card-note { color: #8a6d4f; }
#food-calorie-sources { margin-top: 0.2rem; }
#food-product-list, #food-recipe-list { margin-top: 0.4rem; }

/* --- Copy for AI (D-020) --------------------------------------------------- */
.ai-sections {
  display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem;
  margin: 0.6rem 0; font-size: 0.85rem;
}
.ai-sections label { display: inline-flex; align-items: center; gap: 0.3rem; }
.ai-inline { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.9rem; }
.ai-preview {
  width: 100%; margin-top: 0.6rem; font-family: ui-monospace, Menlo, monospace;
  font-size: 0.72rem; line-height: 1.35; color: var(--dark);
  border: 1px solid #e0cdb4; border-radius: 0.6rem; padding: 0.5rem;
  background: var(--cream); resize: vertical;
}
#ai-paste-text {
  width: 100%; margin-top: 0.4rem; font-family: inherit; font-size: 0.9rem;
  border: 1px solid #e0cdb4; border-radius: 0.6rem; padding: 0.5rem;
  background: var(--cream); color: var(--dark); resize: vertical;
}
.ai-rule { border: none; border-top: 1px solid #f0e2cf; margin: 0.9rem 0 0.6rem; }

/* --- Health Watch (spec §30, §30.1) ---------------------------------------
   Severity is carried by the WORDS first: the level's name is printed in the
   heading, and colour only reinforces it. A red border says nothing when the
   card is read aloud to a vet tech, or to a reader who does not separate red
   from green. */
.hw-alert {
  border-left: 4px solid var(--caramel);
  background: #fffdf9;
  border-radius: 0.7rem;
  padding: 0.7rem 0.85rem;
  margin: 0.6rem 0;
}
.hw-alert h4 { font-size: 0.98rem; margin-bottom: 0.25rem; }
.hw-monitor { border-left-color: var(--blue); }
.hw-contact { border-left-color: var(--caramel); }
.hw-prompt  { border-left-color: #e8a33d; }
.hw-emergency { border-left-color: #d9534f; background: #fff5f5; }
.hw-why { font-size: 0.92rem; line-height: 1.4; }
.hw-meta { font-size: 0.78rem; color: #a08464; margin-top: 0.2rem; }
.hw-pending-note { font-size: 0.78rem; color: #8a6d3b; margin-top: 0.25rem; }
.hw-evidence {
  margin: 0.45rem 0 0.2rem 1.1rem;
  font-size: 0.82rem;
  color: #7a6248;
  line-height: 1.45;
}
.hw-empty { font-size: 0.9rem; color: #a08464; padding: 0.3rem 0; }
.hw-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.55rem; }
.hw-actions .pill { font-size: 0.78rem; padding: 0.35rem 0.7rem; }
/* The answer to "Look now": prose, set apart from the page it sits on so it
   reads as a reply to something you asked rather than more furniture. */
.hw-report {
  margin: 0.6rem 0;
  padding: 0.6rem 0.7rem;
  background: #fdf7ee;
  border-left: 3px solid var(--caramel);
  border-radius: 0 8px 8px 0;
}
.hw-report .card-note { margin: 0 0 0.4rem; }
.hw-report .card-note:last-child { margin-bottom: 0; }
.hw-deep-body {
  white-space: pre-wrap;
  font-size: 0.9rem;
  line-height: 1.5;
  margin-top: 0.4rem;
}
.hw-rules-wrap { margin-top: 0.8rem; }
.hw-rules-wrap summary { font-size: 0.85rem; font-weight: 600; cursor: pointer; color: var(--brown); }
.hw-rule { border-top: 1px solid #f0e2cf; padding: 0.6rem 0 0.5rem; }
.hw-rule:first-of-type { border-top: none; }
.hw-rule-title { font-weight: 600; font-size: 0.92rem; }

/* Insights card (spec §31, §32): the record read back to the household. */
.insights-periods { display: flex; gap: 0.4rem; margin: 0.6rem 0; flex-wrap: wrap; }
.insight-line {
  border-top: 1px solid #f0e2cf; padding: 0.55rem 0 0.4rem;
}
.insight-line:first-child { border-top: none; }
.insight-text { font-size: 0.95rem; line-height: 1.35; }
/* A suspicion is visually softer than a fact — it is an offer, not a verdict. */
.insight-line.insight-offer .insight-text { color: #7a6248; font-style: italic; }
.insight-evidence { margin-top: 0.25rem; }
.insight-evidence summary { font-size: 0.75rem; color: #a08464; cursor: pointer; }
.insight-evidence ul { margin: 0.3rem 0 0 1rem; padding: 0; }
.insight-evidence li { font-size: 0.7rem; color: #a08464; list-style: disc; }
.insight-evidence code { font-size: 0.68rem; }
.insight-absences { margin-top: 0.7rem; }
.insight-absences summary { font-size: 0.8rem; color: #a08464; cursor: pointer; }
.insight-absences ul { margin: 0.4rem 0 0 1rem; padding: 0; }
.insight-absences li { font-size: 0.82rem; color: #7a6248; list-style: disc; line-height: 1.35; }
.insight-empty { font-size: 0.9rem; color: #7a6248; line-height: 1.4; padding: 0.4rem 0; }
.insights-expenses-wrap { margin-top: 0.8rem; }
.insights-expenses-wrap summary { font-size: 0.85rem; color: var(--brown); font-weight: 600; cursor: pointer; }

/* Build stamp on the login screen — diagnostic, deliberately quiet. */
.login-build {
  margin-top: 0.9rem; font-size: 0.68rem; color: #b9a68c;
  letter-spacing: 0.04em;
}

/* Ask Codex (D-022): the answer is read, not executed — plain text, room to
   breathe, and visibly a quotation rather than part of the record. */
.agent-answer {
  margin-top: 0.7rem; padding: 0.7rem 0.8rem;
  background: #fff8ec; border-left: 3px solid var(--caramel);
  border-radius: 0 0.6rem 0.6rem 0;
  font-size: 0.9rem; line-height: 1.45; white-space: pre-wrap;
}
.agent-answer[hidden] { display: none; }

/* Ask Roxy (spec §29.1). The citation chips matter more than they look: an
   answer whose sources cannot be opened is a claim, so they are styled as
   controls rather than as decoration. */
.ask-answer {
  white-space: pre-wrap;
  margin-top: 0.7rem;
  padding: 0.7rem 0.8rem;
  background: #fff;
  border-radius: 0.9rem;
  box-shadow: 0 2px 6px rgba(74, 52, 35, 0.08);
  font-size: 0.95rem;
  line-height: 1.4;
}
.ask-citations {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.6rem;
}
.ask-citations .card-note { margin: 0; }
.ask-citations .citation { font-size: 0.75rem; padding: 0.3rem 0.7rem; }
.ask-record {
  margin-top: 0.5rem;
  padding: 0.55rem 0.7rem;
  border-left: 3px solid var(--caramel);
  background: #fffdf8;
  font-size: 0.85rem;
  color: #5c4632;
}

/* --- Activity log + notification area (D-032) ------------------------------
   The pending block and the log below it are one surface. Rows are a grid so
   the time column lines up down the page — a flex row that re-wraps per entry
   is unreadable at a glance, which defeats the point of a log. */
.activity-pending-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem; flex-wrap: wrap;
  padding: 0.5rem 0; border-bottom: 1px solid rgba(0,0,0,0.08);
}
.activity-pending-main { min-width: 0; flex: 1 1 12rem; }
.activity-filters { display: flex; gap: 0.35rem; flex-wrap: wrap; margin: 0.6rem 0; }
.activity-filters .pill.is-on { background: var(--brown, #8b5e3c); color: #fff; }
.activity-row {
  display: grid; grid-template-columns: 4.5rem 1fr;
  gap: 0.5rem; align-items: start;
  padding: 0.4rem 0; border-bottom: 1px solid rgba(0,0,0,0.06);
}
.activity-when { font-variant-numeric: tabular-nums; opacity: 0.7; font-size: 0.85rem; }
/* Long labels wrap inside their cell rather than pushing the row sideways —
   a phone that scrolls horizontally to read a log is worse than no log. */
.activity-what { min-width: 0; overflow-wrap: anywhere; }

/* --- Recent entries as rows and columns ------------------------------------
   Same information as the stack it replaced, laid out so the eye can run down
   a column. Three columns, not four: the When and Status columns are narrow
   and fixed, which is what makes them scannable, and everything variable —
   summary, note, the row's own controls — lives in the middle cell. Actions in
   a fourth column would push the row past a 390px phone, and a list you scroll
   sideways to read is worse than the stack. */
.entry-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.entry-table th {
  text-align: left; font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: #a08464; font-weight: 600;
  padding: 0 0.3rem 0.3rem 0; border-bottom: 1px solid #f0e2cf;
}
.entry-table td {
  vertical-align: top; padding: 0.5rem 0.3rem;
  border-bottom: 1px solid rgba(139,94,60,0.10);
}
/* One entry, one line. Every column but What is fixed and narrow, so What
   takes whatever is left and truncates — a row that grows to fit its note is
   the stack this replaced. Cells sit middle-aligned now that none of them is
   taller than a line. */
.entry-table th.entry-when, .entry-table td.entry-when { width: 4.6rem; }
.entry-table th.entry-tools, .entry-table td.entry-tools { width: 4.2rem; }
.entry-table th.entry-status, .entry-table td.entry-status { width: 2rem; }
.entry-table td { vertical-align: middle; }
.entry-when { font-size: 0.8rem; color: #a08464; font-variant-numeric: tabular-nums; }
.entry-status { font-size: 0.95rem; text-align: center; }
.entry-what { min-width: 0; }
/* The truncation itself. Without min-width:0 above, a long note would still
   force the cell wider than its share in some engines. */
.entry-what .search-head {
  font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.entry-what .search-note { font-size: 0.82rem; color: #6b533c; }
/* Glyph-only controls: square, thumb-sized, and side by side. The label lives
   in aria-label — see iconButton — so nothing here may add text back. */
.entry-tools { white-space: nowrap; text-align: right; }
.entry-tools .pill.icon-only {
  font-size: 0.95rem; line-height: 1; padding: 0.34rem; margin-left: 0.15rem;
  min-width: 1.9rem;
}

/* For table captions and other labels that exist for screen readers only. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- the edit dialog -------------------------------------------------------
   Editing used to be a hidden panel after #recent-list, so tapping Edit on the
   first of ten rows revealed the form below the tenth — off screen, reading as
   a dead button. A modal dialog overlays wherever the reader already is.

   It scrolls INTERNALLY rather than clipping: these forms carry several fields
   plus the backdating row, and a short screen must not cut the Save button off
   the bottom of the panel. */
.edit-dialog {
  /* margin:auto is what centres a modal dialog — the browser's own stylesheet
     says `dialog:modal { margin: auto }`, and our `* { margin: 0 }` reset in
     app.css beats it (author styles outrank UA styles regardless of
     specificity). Without this line the panel pins to the top-left corner.
     Restated here rather than exempting <dialog> from the reset, so the two
     rules cannot drift apart in separate files. */
  margin: auto;
  width: min(28rem, calc(100vw - 2rem));
  max-height: min(85vh, 40rem);
  overflow-y: auto;
  border: none; border-radius: 1rem; padding: 1rem;
  background: var(--cream); color: var(--dark);
  box-shadow: 0 10px 30px rgba(74,52,35,0.35);
}
.edit-dialog::backdrop { background: rgba(74,52,35,0.45); }
.edit-dialog-title { font-size: 1.02rem; color: var(--brown); margin: 0 0 0.4rem; }
.edit-dialog .card-actions { margin-top: 0.8rem; }
.edit-when-note { margin-top: 0.6rem; font-size: 0.78rem; }