/* shared/portal-plan.css
 *
 * How Rosa likes things done. The screen Anna writes.
 * Design system tokens only, nothing below --fs-min.
 *
 * TWO THINGS DRIVE EVERY SIZE HERE.
 *
 * 1. THE PART HEADING IS A CONTROL, so it is --tap-primary and full width. It
 *    is the thing she taps most on this screen and it is tapped one handed on
 *    a bus. A small chevron beside a heading is not a target.
 *
 * 2. TASKS ARE ROWS, NOT THE DEMO'S CHIPS. The demo draws each thing to do as
 *    a small chip. The reasoned target for this audience is 48 points minimum,
 *    and a chip carrying its own remove control puts two targets inside the
 *    space of one, which is the exact failure mode for a hand with tremor. The
 *    demo is the reference for look and flow, and the accessibility ruling of
 *    14 Aug 2026 is later and binds, so these are rows with the remove control
 *    at its own full size at the end.
 */

.pl { padding: var(--sp-5) var(--sp-4) var(--sp-7); max-width: var(--portal-measure); margin: 0 auto; }
/* TWO CLASSES, AND THAT IS NOT DECORATION. The design system styles bare
   headings inside .hds, and `.hds h3` at (0,1,1) beats a single class at
   (0,1,0). Written as `.pl-h` this rule did nothing at all: "Things to do"
   rendered at 24px in the display face, LARGER than the "Morning" heading it
   sits under, so the subsection outranked its own section. Measured in a
   browser, not guessed. This is the third cascade collision of this exact
   shape on this project. */
.pl .pl-h {
  font-size: var(--fs-min); font-weight: 700; color: var(--t2);
  font-family: var(--font-body); letter-spacing: 0.02em;
  margin: var(--sp-5) 0 var(--sp-2);
}

/* ── The head, and the line about who can read this ───────────────────────── */

.pl-head { margin-bottom: var(--sp-4); }
/* Qualified so it actually applies. As a bare class this was (0,1,0) and lost
   to `.hds h1-h4` at (0,1,1), so the size written here never took effect.
   Found 24 Aug 2026 by the first guard to compare a module's headings with
   the system's. */
.pl .pl-head__t { font-size: var(--fs-h2); line-height: var(--lh-head); }
.pl-head__s { font-size: var(--fs-min); color: var(--t2); margin-top: var(--sp-2); }

/* The sharing line is a bordered callout in both states, never a bare tint:
   rule 2 of the design system, and it is also the answer to the first question
   a person has before typing anything about her mother's health. */
.pl-share {
  margin-bottom: var(--sp-5); padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--bd-strong); border-left-width: 4px;
  border-radius: var(--r-md); background: var(--surface);
  font-size: var(--fs-min); color: var(--t1);
}
.pl-share--open { background: var(--info-bg); border-color: var(--info); }

/* ── First run: one question ──────────────────────────────────────────────── */

.pl .pl-first__q { font-size: var(--fs-lead); line-height: var(--lh-head); }
.pl-first__sub { font-size: var(--fs-min); color: var(--t2); margin: var(--sp-2) 0 var(--sp-4); }
.pl-first__foot { margin-top: var(--sp-4); }
.pl-skip { margin-top: var(--sp-3); }

/* ── A part of the day ────────────────────────────────────────────────────── */

.pl-part {
  border: 1px solid var(--bd-strong); border-radius: var(--r-md);
  background: var(--card); margin-bottom: var(--sp-3); overflow: hidden;
}
.pl-part.is-open { border-width: 2px; }

.hds .pl-part__head:not(.ds-btn) {
  width: 100%; min-height: var(--tap-primary);
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); text-align: left;
  background: none; border: none; cursor: pointer;
  font-family: var(--font-body); color: var(--t1);
}
.pl-part__head:hover { background: var(--surface); }
.pl-part__body { flex: 1 1 auto; min-width: 0; }
.pl-part__name { display: block; font-size: var(--fs-lead); font-weight: 700; line-height: var(--lh-head); }
.pl-part__when { display: block; font-size: var(--fs-min); color: var(--t3); margin-top: 2px; }

/* The open and closed marks are a plus and a minus, which differ in SHAPE.
   aria-expanded carries it for a screen reader; nothing depends on colour. */
.pl-part__mark {
  flex: none; width: var(--tap-min); height: var(--tap-min);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-lead); font-weight: 700; color: var(--brand);
}
.pl-part__inner { padding: 0 var(--sp-4) var(--sp-4); border-top: 1px solid var(--bd); }

/* ── What the part is for ─────────────────────────────────────────────────── */

.pl-aim { margin-top: var(--sp-4); }
/* TALL ENOUGH FOR THE SENTENCE SHE ACTUALLY WRITES. At 4.5rem the worked
   example, "Staying steady on her feet, and getting to the kitchen on her
   own", clipped mid word behind a scrollbar on a 375 point phone, which reads
   as the box having eaten what she typed. Three lines at the body size, and it
   scrolls only past that. */
.pl-aim__in { min-height: 7rem; line-height: var(--lh-body); }
.pl-saved, .pl-task__saved { font-size: var(--fs-min); font-weight: 700; color: var(--ok); }
.pl-saved { margin-top: var(--sp-2); }

/* ── Things to do ─────────────────────────────────────────────────────────── */

.pl-none { font-size: var(--fs-min); color: var(--t2); }

.pl-tasks { list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); }
.pl-task {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: var(--tap-min); padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--bd-strong); border-radius: var(--r-sm); background: var(--surface);
}
.pl-task__label { flex: 1 1 auto; min-width: 0; font-size: var(--fs-min); color: var(--t1); }
.hds .pl-task__rm:not(.ds-btn) {
  flex: none; min-height: var(--tap-min); padding: 0 var(--sp-3);
  background: none; border: none; cursor: pointer;
  font-family: var(--font-body); font-size: var(--fs-min); font-weight: 700;
  color: var(--brand); text-decoration: underline;
}
.pl-task__rm:hover { color: var(--brand-hover); }

/* ── Adding something ─────────────────────────────────────────────────────── */

.pl-add { margin-top: var(--sp-3); }
.pl-addbox {
  margin-top: var(--sp-3); padding: var(--sp-4);
  border: 1px solid var(--bd-strong); border-radius: var(--r-md); background: var(--surface);
}
.pl-starters { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }

/* A starter is a real button at the minimum target, not a tag. */
.hds .pl-starter:not(.ds-btn) {
  min-height: var(--tap-min); padding: var(--sp-2) var(--sp-4);
  border: 2px solid var(--bd-strong); border-radius: var(--r-pill);
  background: var(--card); cursor: pointer;
  font-family: var(--font-body); font-size: var(--fs-min); font-weight: 600; color: var(--t1);
}
.pl-starter:hover { background: var(--brand-tint); border-color: var(--brand); }

/* ── Medicines, read only ─────────────────────────────────────────────────── */

.pl-meds { list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); }
.pl-med {
  padding: var(--sp-3); border: 1px solid var(--bd); border-left: 4px solid var(--bd-strong);
  border-radius: var(--r-sm); background: var(--surface);
}
.pl-med__name { display: block; font-weight: 700; color: var(--t1); }
.pl-med__why { display: block; font-size: var(--fs-min); color: var(--t2); margin-top: 2px; }

/* ── Night, and the closing sentence ──────────────────────────────────────── */

.pl-night {
  margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--bd-strong); border-radius: var(--r-md);
  background: var(--surface); font-size: var(--fs-min); color: var(--t1);
}
.pl-foot-actions { margin-top: var(--sp-6); flex-direction: column; }
.pl-foot {
  margin-top: var(--sp-5); font-size: var(--fs-min); color: var(--t2); line-height: var(--lh-body);
}

/* A way back. Added 29 Aug: he walked the portal and the first thing he said
 * was that the care plan has no back button. --tap-min on the control. */
.hds .pl-back:not(.ds-btn) {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: var(--tap-min); padding: 0 var(--sp-3) 0 var(--sp-2);
  margin-bottom: var(--sp-3);
  background: none; border: 1px solid transparent; border-radius: var(--r-md);
  font-family: var(--font-body); font-size: var(--fs-body); font-weight: 600;
  color: var(--brand); cursor: pointer;
}
.hds .pl-back:not(.ds-btn):hover { background: var(--brand-tint); }
.hds .pl-back:not(.ds-btn):focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }