/* Partnership App — mobile-first, CalmCare design language */
:root{
  --paper:#F6F8F6; --card:#FFFFFF; --ink:#22302B; --muted:#5C6B64;
  --accent:#47695C; --accent-dark:#345145; --soft:#DFECE6; --line:#DCE5E0;
  --amber:#B07A2E; --amber-soft:#F6ECDC; --clay:#A64B3F; --clay-soft:#F4E3DF;
}
*{box-sizing:border-box; margin:0}
body{background:var(--paper); color:var(--ink); font-family:Inter,-apple-system,system-ui,sans-serif;
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
.wrap{max-width:480px; margin:0 auto; padding:18px 16px 40px}
/* the top bar: CalmCare green ground, sand type — reversed for contrast */
:root{ --sand:#F2ECDD; --sand-dim:#D8DECD }
.bar{display:flex; justify-content:space-between; align-items:center;
  background:linear-gradient(135deg, #47695C, #3B5A4D);
  margin:calc(-18px - env(safe-area-inset-top)) -16px 16px; padding:calc(12px + env(safe-area-inset-top)) 16px 12px}
.brandrow{display:flex; align-items:center; gap:9px; min-width:0}
.brand{display:block; font:800 15.5px Inter,system-ui,sans-serif; color:var(--sand);
  letter-spacing:-.01em; line-height:1.15}
.orgline{display:block; font:600 11px Inter,system-ui,sans-serif; color:var(--sand-dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:200px}
.who{display:flex; align-items:center; gap:8px; font-size:12.5px}
.whobubble{width:34px; height:34px; border-radius:50%; background:var(--sand); color:var(--accent-dark);
  display:grid; place-items:center; font:700 14px Inter,system-ui,sans-serif; text-decoration:none;
  box-shadow:0 2px 8px rgba(20,35,28,.3); flex:0 0 auto}
.viewtag{background:var(--amber-soft); color:#5F4517; border-radius:999px; padding:2px 8px;
  font-size:10.5px; font-weight:700}
.brandhero{text-align:center; padding:26px 0 6px}
.brandhero svg, .brandhero img{display:block; margin:0 auto 10px}
.brandhero h1{font-size:23px; margin:0; color:var(--accent-dark); letter-spacing:-.01em}
.brandhero p{font-size:13.5px; color:var(--muted); margin:5px 0 14px}
h1{font-size:24px; letter-spacing:-.01em; color:var(--accent-dark); margin:8px 0 4px}
.lead{color:var(--muted); font-size:14px; margin-bottom:18px}
.card{background:var(--card); border-radius:18px; padding:18px 16px; box-shadow:0 2px 10px rgba(40,60,52,.07);
  margin-bottom:14px}
label{display:block; font-size:12px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted); margin:12px 0 6px}
label:first-child{margin-top:0}
input[type=text],input[type=email],input[type=password]{
  width:100%; border:1.5px solid var(--line); border-radius:13px; padding:12px 13px;
  font:500 15px Inter,system-ui,sans-serif; color:var(--ink); background:#FBFCFB}
input:focus{outline:none; border-color:var(--accent)}
.btn{display:block; width:100%; border:0; border-radius:15px; padding:14px; margin-top:16px;
  background:var(--accent); color:#fff; font:600 15px Inter,system-ui,sans-serif; cursor:pointer}
.btn:active{background:var(--accent-dark)}
.error{background:var(--clay-soft); color:#5C2B23; border-radius:12px; padding:11px 13px;
  font-size:13.5px; margin-bottom:14px}
.notice{background:var(--soft); color:var(--accent-dark); border-radius:12px; padding:11px 13px;
  font-size:13.5px; margin-bottom:14px}
.alt{text-align:center; font-size:13.5px; color:var(--muted); margin-top:14px}
.alt a{color:var(--accent); font-weight:600}
.quiet{font-size:12.5px; color:var(--muted); margin-top:10px}
.steps{list-style:none; counter-reset:s}
.steps li{counter-increment:s; display:flex; gap:12px; padding:10px 0; border-top:1px solid #EEF3F0;
  font-size:14px}
.steps li:first-child{border-top:0}
.steps li::before{content:counter(s); flex:0 0 26px; height:26px; border-radius:50%;
  background:var(--soft); color:var(--accent-dark); font-weight:700; font-size:13px;
  display:grid; place-items:center}
.pill{display:inline-block; background:var(--soft); color:var(--accent-dark); border-radius:999px;
  padding:5px 12px; font-size:12.5px; font-weight:600; margin:2px 3px 2px 0}

/* ===== app navigation (milestone 2) ===== */
body.hasnav .wrap{padding-bottom:86px}
.tabs{position:fixed; left:0; right:0; bottom:0; background:#fff; border-top:1px solid #E4EBE6;
  display:flex; max-width:480px; margin:0 auto; padding-bottom:env(safe-area-inset-bottom)}
.tab{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  padding:9px 0 10px; font:600 10px Inter,system-ui,sans-serif; color:#7B8983; text-decoration:none}
.tab .ic{font-size:17px; line-height:1}
.tab .ic svg{width:21px; height:21px; display:block}
.tab.on{color:var(--accent-dark)}
.tab.plus{flex:0 0 68px}
.plusdot{width:44px; height:44px; border-radius:50%; background:var(--accent); color:#fff;
  display:grid; place-items:center; font-size:24px; margin-top:-16px; box-shadow:0 4px 12px rgba(40,60,52,.3)}
.homedot svg{width:22px; height:22px; stroke-width:2}
.tab.plus.on .plusdot{background:var(--accent-dark); box-shadow:0 0 0 3px var(--soft), 0 4px 12px rgba(40,60,52,.3)}
.tab{font-size:9.5px; letter-spacing:.01em}
/* home overview tiles */
.tiles{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.tile{background:var(--card); border-radius:16px; padding:13px 13px 12px; text-decoration:none; color:var(--ink);
  box-shadow:0 1px 4px rgba(40,60,52,.08); display:flex; flex-direction:column; gap:6px; min-height:92px}
.tile .ic{color:var(--accent); display:flex; align-items:center; justify-content:space-between}
.tile .ic svg{width:22px; height:22px}
.tile b{font-size:14.5px; display:block}
.tile small{font-size:12px; color:var(--muted); line-height:1.35}
.tile .flag{background:var(--amber-soft); color:#5F4517; border-radius:999px; padding:2px 8px; font-size:11px; font-weight:700}
.remindcard{background:var(--card); border:1.5px solid var(--soft); border-radius:16px; padding:14px 15px; margin-bottom:12px}
.remindcard label{color:var(--accent-dark)}
.remindcard .why{font-size:13.5px; margin-top:6px}
.remindcard .row{display:flex; gap:8px; align-items:center; margin-top:10px; flex-wrap:wrap}

/* chips / kids / reminders (ported from prototype) */
.kids{display:flex; flex-wrap:wrap; gap:8px}
.kid{display:flex; align-items:center; gap:7px; background:#EDF3EF; border-radius:999px;
  padding:6px 12px 6px 6px; font:600 12.5px Inter,system-ui,sans-serif; color:#2E4238;
  text-decoration:none; border:0; cursor:pointer}
.kid .av{width:26px; height:26px; border-radius:50%; background:var(--accent); color:#fff;
  display:grid; place-items:center; font-size:11px; font-weight:700}
.av{overflow:hidden; flex:0 0 auto; width:30px; height:30px; border-radius:50%; background:var(--accent);
  color:#fff; display:grid; place-items:center; font:700 12px Inter,system-ui,sans-serif}
.av img{width:100%; height:100%; object-fit:cover; border-radius:50%; display:block}
.avbig{width:56px; height:56px; border-radius:50%; background:var(--accent); color:#fff;
  display:grid; place-items:center; font-size:22px; font-weight:700}
.kid.absent{background:#F1EDEA; color:#8A817B}
.kid.absent .av{background:#B9AFA7}
.kid small{font-weight:500; font-size:10.5px; display:block; line-height:1.1; text-align:left}
.rem{background:var(--amber-soft); border-radius:14px; padding:11px 13px; font-size:13.5px; color:#5F4517;
  display:flex; gap:10px; align-items:flex-start; margin-bottom:10px}
.rem b{color:#4C370F}
/* the same strip in the calm colour: a note from home is news, not a warning */
.rem.note{background:var(--soft); color:#2E4238}
.rem.note b{color:var(--accent-dark)}
/* a health note folded to its headline: the whole note is one tap away, and the offline
   card always carries it in full. A wall of red every morning stops being read. */
details.alertcard{padding:11px 13px}
details.alertcard summary{font-size:13.5px}
details.alertcard p{font-size:13.5px; line-height:1.5}
/* a written topic waiting to be read & confirmed: the amber of .rem, laid out as a block.
   .rem itself is a flex row and squeezes a paragraph into a column on a phone. */
.needsread{background:var(--amber-soft); border-radius:14px; padding:12px 13px; color:#5F4517}
.needsread > label{color:#5F4517}
.needsread b{color:#4C370F}
/* a card that folds itself away: the record you open, not the thing you do */
.fold summary{list-style:none; cursor:pointer}
.fold summary::-webkit-details-marker{display:none}
.fold summary::after{content:' ▾'; color:var(--muted); font-size:11px}
.fold[open] summary::after{content:' ▴'}
/* a heading for a run of strips that are not inside a card */
.striplabel{display:block; font-size:12px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted); margin:14px 0 6px}
.alertcard{background:var(--clay-soft); border-radius:14px; padding:11px 13px; font-size:13.5px;
  color:#5C2B23; margin-bottom:10px}
.crow{display:flex; align-items:center; gap:10px; background:var(--card); border-radius:15px;
  padding:11px 12px; box-shadow:0 2px 10px rgba(40,60,52,.07); margin-bottom:9px; color:var(--ink);
  text-decoration:none}
.crow .av{width:34px; height:34px; border-radius:50%; background:var(--accent); color:#fff;
  display:grid; place-items:center; font-weight:700; font-size:13px; flex:0 0 auto}
.crow b{font-size:14px; display:block}
.crow small{font-size:11.5px; color:var(--muted); display:block; line-height:1.3}
.chiprow{display:flex; flex-wrap:wrap; gap:7px}
.chiprow a,.chiprow button{border:1.5px solid var(--line); background:var(--card); color:#4A5A52;
  border-radius:999px; padding:8px 13px; font:600 12.5px Inter,system-ui,sans-serif; cursor:pointer;
  text-decoration:none}
.seg{display:flex; background:#EDF3EF; border-radius:12px; padding:4px; gap:4px; margin-top:6px}
.seg label{flex:1; margin:0}
.seg input{display:none}
.seg span{display:block; text-align:center; border-radius:9px; padding:9px 4px;
  font:600 12px Inter,system-ui,sans-serif; color:var(--muted); cursor:pointer; text-transform:none;
  letter-spacing:0}
.seg input:checked + span{background:#fff; color:var(--ink); box-shadow:0 1px 4px rgba(40,60,52,.12)}
textarea{width:100%; border:1.5px solid var(--line); border-radius:13px; padding:12px 13px;
  font:500 15px Inter,system-ui,sans-serif; color:var(--ink); background:#FBFCFB; resize:vertical}
textarea:focus{outline:none; border-color:var(--accent)}
.moment{background:#EFF5F1; border-radius:13px; padding:10px 12px; font-size:13px; color:#2E4238;
  margin-bottom:8px}
.moment small{color:var(--muted); display:block; margin-top:3px; font-size:11.5px}
.ok{background:var(--soft); color:var(--accent-dark); border-radius:12px; padding:11px 13px;
  font-size:13.5px; margin-bottom:14px}

/* button rows: side-by-side buttons that never overflow */
.btnrow{display:flex; gap:10px}
.btnrow .btn{width:auto; flex:1; min-width:0}
.btnrow .btn.sec{flex:0 1 auto; background:#EDE8E3; color:#5C534C; padding-left:18px; padding-right:18px}

/* day chips + time inputs (group schedules) */
.dayrow{display:flex; gap:4px; flex-wrap:nowrap}
.daychip{flex:1 1 0; min-width:0; margin:0}
.daychip input{display:none}
.daychip span{display:block; text-align:center; border:1.5px solid var(--line); background:var(--card);
  color:#4A5A52; border-radius:10px; padding:9px 0; font:700 11px Inter,system-ui,sans-serif; cursor:pointer}
.daychip input:checked + span{background:var(--accent); border-color:var(--accent); color:#fff}
.timerow{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px}
.timerow span{min-width:0}
input[type=time]{width:100%; min-width:0; max-width:100%; border:1.5px solid var(--line); border-radius:13px;
  padding:10px 8px; font:500 14px Inter,system-ui,sans-serif; color:var(--ink); background:#FBFCFB;
  -webkit-appearance:none; appearance:none}
input[type=time]:focus{outline:none; border-color:var(--accent)}
/* explicit state picker: tap a chip, choose Here / Sick / Vacation */
.kidpick{min-width:0}
.kidpick summary{list-style:none; cursor:pointer}
.kidpick summary::-webkit-details-marker{display:none}
.kidpick[open]{flex-basis:100%}
.kidpick[open] summary.kid{outline:2px solid var(--accent); outline-offset:1px}
.staterow{display:flex; gap:6px; margin-top:7px; flex-wrap:wrap}
.staterow button{border:1.5px solid var(--line); background:#FBFCFB; border-radius:999px; padding:7px 12px;
  font:600 12px Inter,system-ui,sans-serif; color:var(--ink); cursor:pointer}
.staterow button.on{background:var(--accent); border-color:var(--accent); color:#fff}