/* ============================================================
   HeyVini — targeted UI fixes (2026-08-29)
   Loaded LAST, after ui-2026.css, so these win on equal specificity.
   Every block records the rule it corrects and why, so none of this
   looks arbitrary to the next person reading it.
   ============================================================ */

/* ------------------------------------------------------------
   1. Consent tick box in the signup wizard.
   ui-2026.css has `#view-onboard input,#view-onboard select{width:100%;
   padding:14px;border:1.5px solid ...}` — written for text fields, but it
   catches the checkbox too. That ID selector outranks `.check-row input`
   in styles.css, so the tick box stretched to full width with 14px of
   padding (the tall empty box) and squeezed its label into a narrow
   column beside it. Re-scope the field styling away from checkboxes.
   ------------------------------------------------------------ */
#view-onboard .check-row{ align-items:center; gap:12px; }
#view-onboard .check-row input[type="checkbox"]{
  width:24px; height:24px; flex:0 0 auto;
  padding:0; margin:0;
  border-radius:6px; border:1.5px solid var(--u-line);
  accent-color:var(--u-teal);
}
#view-onboard .check-row label{
  display:block; margin:0; font-weight:500; line-height:1.4;
}

/* ------------------------------------------------------------
   2. Chat quick-reply chips.
   The row already scrolls sideways, but the floating accessibility
   button is fixed above its right edge and covered the last chip.
   Give the row room on the right so every chip can be scrolled clear
   of the button instead of sitting under it.
   ------------------------------------------------------------ */
#view-app .chatview .quick{ padding-right:64px; }

/* ------------------------------------------------------------
   3. Add a family member — collapsed until asked for.
   The form used to sit open at the bottom of the care circle, so the
   page ended in a wall of empty fields. It now lives inside
   <details id="add-member-details"> in app.html; this styles the
   <summary> as a proper button and strips the surrounding card while
   the form is closed, so what you see is just the button.
   ------------------------------------------------------------ */
#add-member-box details > summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:10px;
  font:700 1rem/1.2 var(--sans);
  color:var(--teal-deep);
  background:#fff;
  border:1.5px solid var(--teal);
  border-radius:14px;
  padding:15px 18px;
  transition:background .15s ease;
}
#add-member-box details > summary::-webkit-details-marker{ display:none; }
#add-member-box details > summary::before{
  content:"+"; font-size:1.2rem; font-weight:700; line-height:1;
}
#add-member-box details[open] > summary::before{ content:"\2013"; }
#add-member-box details > summary:hover{ background:var(--teal-wash); }
#add-member-box details > summary:focus-visible{
  outline:2px solid var(--teal); outline-offset:2px;
}
#add-member-box details[open] > summary{ margin-bottom:18px; }

/* While the form is closed there is nothing to frame, so drop the card
   and let the button stand on its own. */
#add-member-box:has(details:not([open])){
  padding:0; border:0; background:none; box-shadow:none;
}

/* ------------------------------------------------------------
   4. Chat column was wider than the phone screen.
   .main is a flex container, so each .sub-view is a flex item, and a
   flex item will not shrink below its content's min-content width
   (min-width defaults to auto). The chat quick-reply row is set to
   flex-wrap:nowrap, so its min-content width is all four chips in a
   line (~736px). That forced the whole chat column to ~758px inside a
   390px screen, slicing off the right edge of the header, messages,
   composer and nav. min-width:0 lets the column shrink to the screen
   again; the quick row still scrolls sideways as intended.
   ------------------------------------------------------------ */
#view-app .main > .sub-view{ min-width:0; width:100%; }
#view-app .chatview .quick{ min-width:0; }

/* ------------------------------------------------------------
   5. Which account am I setting up?
   Setup asks for names, numbers and check-in times, and a browser can
   hold a signed-in session the person has forgotten about. Showing the
   account under the progress bar, with a way out, stops someone filling
   in a whole family under the wrong login.
   ------------------------------------------------------------ */
#view-onboard .ob-who{
  margin:10px 0 0; text-align:center;
  font:500 .82rem/1.4 var(--sans);
  color:var(--ink-soft, #6b7280);
}
#view-onboard .ob-who b{ font-weight:700; color:inherit; }
#view-onboard .ob-who .linkish{
  background:none; border:0; padding:0;
  font:inherit; color:var(--teal-deep); text-decoration:underline;
  cursor:pointer;
}
#view-onboard .ob-who .linkish:hover{ opacity:.8; }