/* Dad Care — calm, high-contrast, big-target, no color-only cues.
   Visual polish (final palette/type) is Isabel's lane; this is a clean neutral baseline. */
:root{
  --bg:#f4f5f3; --card:#ffffff; --ink:#1c1e1c; --muted:#5a625a;
  --line:#d6dad4; --accent:#2e5d43; --accent-ink:#ffffff;
  --warn-bg:#fff6e6; --warn-line:#c98a12; --touch:64px;
  /* Sleep-strip colours (tasks.id=1687, round-3 design handoff README, "Design
     tokens" section): named tokens so the Overview strip and any future wall-panel
     strip read the same pair. --sleep-asleep L* 30.9 (9.15:1 on white),
     --sleep-awake L* 46.6 (5.05:1 on white) — the spec's own contrast figures. */
  --sleep-asleep:#2f4a6b; --sleep-awake:#8a6a1f;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--bg);color:var(--ink);font-size:18px;line-height:1.4}
a{color:var(--accent)}
.wrap{max-width:760px;margin:0 auto;padding:16px}
header.top{display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
header.top .who{font-size:15px;color:var(--muted)}
h1{font-size:24px;margin:.2em 0}
h2{font-size:20px;margin:1em 0 .3em}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;margin:12px 0}
/* Cards go edge to edge below 480px (tasks.id=1687, round-3 handoff README): the
   side borders and radius buy nothing on a phone and cost 34px of content width.
   In a STYLESHEET, not inline, or this media query could not reach it. */
@media(max-width:480px){
  .card{margin-left:-16px;margin-right:-16px;border-left:0;border-right:0;border-radius:0}
}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){.grid2{grid-template-columns:1fr}}
.tile,.btn{display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:var(--touch);padding:14px 18px;border-radius:12px;border:2px solid var(--line);
  background:var(--card);color:var(--ink);font-size:19px;font-weight:600;text-decoration:none;
  cursor:pointer;width:100%;text-align:center}
.tile .ico,.btn .ico{font-size:24px}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.danger{border-color:#a23b2e;color:#a23b2e}
.btn.fall{background:#7a1d12;color:#fff;border-color:#7a1d12}
.tilegrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.optionrow{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0}
.optionrow label{flex:1 1 40%}
.pick{display:block}
.pick input{position:absolute;opacity:0}
.pick span{display:flex;align-items:center;justify-content:center;min-height:var(--touch);
  border:2px solid var(--line);border-radius:12px;padding:10px;font-weight:600}
.pick input:checked + span{border-color:var(--accent);background:#e8f0ea;box-shadow:inset 0 0 0 2px var(--accent)}
.flag{display:flex;gap:10px;align-items:center;background:var(--warn-bg);
  border:2px solid var(--warn-line);border-radius:12px;padding:12px 14px;margin:8px 0;font-weight:600}
.flash{background:#e8f0ea;border:1px solid var(--accent);border-radius:10px;padding:10px 14px;margin:10px 0}
/* Test data (task 1073). A rehearsal row that reads as real is a hazard — somebody rings
   a person who does not exist. So the marker is deliberately LOUD: filled, not outlined,
   and a colour used nowhere else on a hiring screen. It must survive a 420px phone, where
   a subtle grey chip next to a name is simply not seen. Purely additive: nothing on a care
   surface uses either class, so no existing screen moves. */
.testmark{display:inline-block;background:#7a1d12;color:#fff;border-radius:6px;
  padding:1px 8px;font-size:12px;font-weight:700;letter-spacing:.08em;vertical-align:middle}
.testbanner{background:#fdecea;border:2px solid #7a1d12;border-radius:12px;
  padding:12px 14px;margin:10px 0}
.testbanner .stat-h{color:#7a1d12}
.muted{color:var(--muted)}
.statgrid{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.statgrid > div{padding:14px;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.statgrid > div:nth-child(-n+2){border-top:0}
.statgrid > div:nth-child(odd){border-left:0}
.stat-h{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.stat-v{font-size:19px;font-weight:600;margin-top:2px}
/* tel/email/datetime-local/file added for the D3 recruiting forms — without them these
   inputs fell back to narrow browser defaults next to full-width text inputs. */
input[type=text],input[type=password],input[type=number],input[type=date],
input[type=tel],input[type=email],input[type=datetime-local],input[type=file],
select,textarea{
  width:100%;min-height:52px;font-size:18px;padding:10px 12px;border:2px solid var(--line);border-radius:10px;background:#fff}
textarea{min-height:90px}
input[type=file]{padding:12px}
/* stack the repeated inputs inside a card (reference slots) with breathing room */
.card input + input,.card input + select{margin-top:8px}
label.field{display:block;margin:12px 0 4px;font-weight:600}
.rosterface{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px;border:2px solid var(--line);
  border-radius:14px;background:#fff;min-height:120px;justify-content:center;font-weight:600;cursor:pointer;width:100%}
.rosterface .avatar{width:64px;height:64px;border-radius:50%;background:#dfe6e0;display:flex;align-items:center;justify-content:center;font-size:26px;overflow:hidden}
.rosterface .avatar img{width:100%;height:100%;object-fit:cover}
.footer-nav{display:flex;gap:8px;margin-top:20px;flex-wrap:wrap}
.footer-nav a{flex:1;text-align:center;padding:12px;border:1px solid var(--line);border-radius:10px;background:#fff;text-decoration:none;color:var(--ink);font-weight:600}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:8px;border-bottom:1px solid var(--line);font-size:15px}
.prov{font-size:12px;color:var(--muted)}