/* cg-finish: caregiver phone screens (approved Oct 23, 2026; design/caregiver-phone-screens-brief.md) */

/* ---------- 1. Finish the visit (#visit.<key>.out) ---------- */
body.skin .vl-finish { padding-bottom: 40px; }
body.skin .vl-finish .vl-back { margin: 2px 0 10px; }
body.skin .vl-finish .vl-title { font-size: 26px; line-height: 1.15; margin: 0; }
body.skin .vl-fsub { font-size: 14px; color: var(--ink-3); margin: 4px 0 0; }
body.skin .vl-finish .vl-outform { margin-top: 8px; }
body.skin .cgf.ms-out { margin: 0; padding: 0; border: 0; }
body.skin .cgf-sec { margin-top: 24px; }
body.skin .cgf-sh { display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px; }
body.skin .cgf-sh h2 { font: 700 18px/1.3 var(--f-ui); margin: 0; }
body.skin .cgf-c { color: var(--ink-3); font-size: 14px; }
body.skin .cgf-rt { margin-left: auto; font-size: 14px; font-weight: 600; color: var(--teal); }
body.skin .cgf-hint { font-size: 13.5px; color: var(--ink-3); margin: 6px 0 0; }
/* How they did */
body.skin .cgf-kv { margin: 0; border-top: 1px solid var(--line); }
body.skin .cgf-kv > div { display: flex; gap: 14px; min-height: 44px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
body.skin .cgf-kv dt { width: 110px; flex: none; color: var(--ink-3); }
body.skin .cgf-kv dd { margin: 0; flex: 1; min-width: 0; }
body.skin .cgf-feel { margin-top: 10px; }
body.skin .cgf-fl { font-size: 14px; font-weight: 600; color: var(--ink-2); margin: 0 0 6px; }
/* outlined chips, 36px, wrapping */
body.skin .cgf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
body.skin .cgf .cgf-chips .pq-b { height: 36px; min-height: 36px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 8px; background: #fff; color: var(--ink-2); font-size: 14px; font-weight: 600; box-shadow: none; }
body.skin .cgf .cgf-chips .pq-b[aria-pressed="true"], body.skin .cgf .cgf-chips .pq-b[aria-checked="true"] { border-color: var(--teal); background: var(--teal-soft); color: var(--teal); }
/* notes */
body.skin .cgf-lab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 6px; min-height: 32px; }
body.skin .cgf-lab label { font-size: 15px; font-weight: 600; color: var(--ink); }
body.skin .cgf-opt { font-weight: 500; color: var(--ink-3); font-size: 13px; margin-left: 4px; }
body.skin .cgf .btn.cgf-tidy { border-color: transparent; background: none; color: var(--teal); padding: 0 4px; height: 32px; box-shadow: none; }
body.skin .cgf textarea.pf-ta { width: 100%; border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 12px; font: 500 15px/1.4 var(--f-ui); color: var(--ink); background: #fff; }
body.skin .cgf #ms-note { min-height: 96px; }
body.skin .cgf textarea.cgf-grow { min-height: 44px; height: 44px; resize: none; overflow: hidden; }
body.skin .cgf .draft-st:empty { display: none; }
/* the nine taps */
body.skin .cgf-rows { border-top: 1px solid var(--line); }
body.skin .cgf-q { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 6px 0; border-bottom: 1px solid var(--line); }
body.skin .cgf-qt { flex: 1; min-width: 0; font-size: 15px; color: var(--ink); }
body.skin .cgf-qt small { display: block; font-size: 12.5px; color: var(--ink-3); }
body.skin .cgf-seg { display: inline-flex; flex: none; gap: 4px; }
body.skin .cgf .cgf-seg .pq-b { height: 36px; min-height: 36px; min-width: 44px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 8px; background: #fff; color: var(--ink-2); font-size: 13.5px; font-weight: 600; box-shadow: none; }
body.skin .cgf .cgf-seg .pq-b[aria-checked="true"] { border-color: var(--teal); background: var(--teal-soft); color: var(--teal); }
/* the three plain rows */
body.skin .cgf-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 10px 0; border: 0; border-bottom: 1px solid var(--line); background: none; font: inherit; text-align: left; color: var(--ink); cursor: pointer; }
body.skin .cgf-rt2 { flex: 1; min-width: 0; }
body.skin .cgf-rt2 b { display: block; font-weight: 600; font-size: 16px; }
body.skin .cgf-rt2 small { display: block; font-size: 13.5px; color: var(--ink-3); overflow-wrap: anywhere; }
body.skin .cgf-bad .cgf-rt2 b { color: var(--coral); }
body.skin .cgf-chev { width: 14px; height: 14px; color: var(--line-2); flex: none; }
body.skin .cgf-sheet .ms-charges { margin: 10px 0 0; padding: 0; border: 0; background: none; }
body.skin .cgf-sheet .ms-charges .pm-sh { display: none; }
/* Clock out, pinned at the bottom with a white fade (above the tab bar on the phone) */
body.skin .cgf-go { position: fixed; left: 0; right: 0; bottom: calc(82px + env(safe-area-inset-bottom, 0px)); z-index: 20; padding: 22px 16px 10px; background: linear-gradient(rgba(255, 255, 255, 0), #fff 26%); }
body.skin .cgf-go .err { margin: 0 0 6px; text-align: center; }
body.skin .cgf-go .err:empty { display: none; }
body.skin .cgf-out { width: 100%; height: 50px; border-radius: 12px; font-size: 16px; font-weight: 700; justify-content: center; }
body.skin .cgf-fine { font-size: 12.5px; color: var(--ink-3); text-align: center; margin: 8px 0 0; }
body.has-layer.skin .cgf-go { z-index: 1; }
/* the same form on a Today visit card (not the Finish page): Clock out sits in the card */
body.skin .ms-visit:not(.vl-outform) .cgf-go { position: static; padding: 16px 0 0; background: none; }
@media (min-width: 900px) {
  body.skin .vl-finish { max-width: 640px; padding-bottom: 24px; }
  body.skin .cgf-go { position: sticky; bottom: 0; left: auto; right: auto; margin: 0 -16px; }
}
body.skin .cgf-sheet .pq-q { margin: 14px 0 6px; font-weight: 600; } body.skin .cgf-sheet .ms-obs .muted { margin-top: 10px; }