/* cg-misc: caregiver phone screens (approved Oct 23, 2026; design/caregiver-phone-screens-brief.md) */
/* shared: plain hairline rows, section headings with a count, the grey hint line */
body.skin .cgm-ph { margin: 0 0 14px; }
body.skin .cgm-ph h1 { margin: 0; }
body.skin .cgm-ph p { font-size: 14px; color: var(--ink-3); margin: 4px 0 0; }
body.skin .cgm-sec { margin-top: 28px; }
body.skin .cgm-sh { display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px; }
body.skin .cgm-sh h2 { font-family: var(--f-ui); font-weight: 700; font-size: 18px; line-height: 1.3; margin: 0; }
body.skin .cgm-sh .c { color: var(--ink-3); font-size: 14px; }
body.skin .cgm-hint { font-size: 13.5px; color: var(--ink-3); margin: 8px 0 0; }
body.skin .cgm-hint .link { font-size: inherit; min-height: 0; }
body.skin .cgm-rows { border-top: 1px solid var(--line); }
body.skin .cgm-rows.cgm-gap { margin-top: 16px; }
body.skin .cgm-row, body.skin .cgm-rb { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 10px 0; border: 0; background: none; text-align: left; font: inherit; color: inherit; border-radius: 0; box-shadow: none; }
body.skin .cgm-row { border-bottom: 1px solid var(--line); }
body.skin .cgm-rb { min-height: 0; padding: 0; flex: 1; min-width: 0; }
body.skin button.cgm-row, body.skin .cgm-rb { cursor: pointer; }
body.skin button.cgm-row:hover, body.skin .cgm-rb:hover { background: var(--faint); }
body.skin .cgm-row .t { flex: 1; min-width: 0; }
body.skin .cgm-row .t b { display: block; font-weight: 600; font-size: 16px; line-height: 1.3; color: var(--ink); }
body.skin .cgm-row .t small { display: block; font-size: 13.5px; line-height: 1.35; color: var(--ink-3); margin-top: 2px; }
body.skin .cgm-row .t small.one { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.skin .cgm-row.soon .t b { color: var(--ink-2); }
body.skin .cgm-row .e { flex: none; display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-3); }
body.skin .cgm-row .chev { width: 14px; height: 14px; color: var(--line-2); }
body.skin .cgm-row .btn.sm { min-height: 32px; height: 32px; padding: 0 12px; border-radius: 8px; font-size: 13px; white-space: nowrap; }
body.skin .cgm-go { color: var(--teal); font-weight: 600; font-size: 14px; }
body.skin .cgm-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); flex: none; display: inline-block; }
body.skin .cgm-dot.warn { background: var(--gold); }
body.skin .cgm-dot.bad { background: var(--coral); }
body.skin #paper-first.cgm-rows { margin: 0 0 4px; }

/* Training: numbered circles (teal = next, dashed = coming soon) */
body.skin .cgm-num { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--line-2); display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--ink-2); flex: none; }
body.skin .cgm-num.cur { border-color: var(--teal); color: var(--teal); }
body.skin .cgm-num.done { border-color: var(--teal); background: var(--teal); color: #fff; }
body.skin .cgm-num.done .i { width: 12px; height: 12px; }
body.skin .cgm-num.soon { border-style: dashed; color: var(--ink-3); }

/* Profile: header, progress line, key/value, sheets */
body.skin .cgm-mehead { display: flex; gap: 14px; align-items: center; margin: 0 0 16px; }
body.skin .cgm-mehead .av { width: 56px; height: 56px; font-size: 18px; flex: none; }
body.skin .cgm-mehead .t { min-width: 0; }
body.skin .cgm-mehead h1 { margin: 0; overflow-wrap: anywhere; }
body.skin .cgm-mehead p { font-size: 14px; color: var(--ink-3); margin: 2px 0 0; }
body.skin .cgm-pro { max-width: 640px; }
body.skin .cgm-bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
body.skin .cgm-bar i { display: block; height: 100%; background: var(--teal); }
body.skin .cgm-kv { margin: 0; border-top: 1px solid var(--line); }
body.skin .cgm-kv > div { display: flex; gap: 14px; min-height: 48px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
body.skin .cgm-kv dt { width: 110px; flex: none; color: var(--ink-3); }
body.skin .cgm-kv dd { margin: 0; flex: 1; min-width: 0; overflow-wrap: anywhere; }
body.skin .cgm-sheet h2 { font-family: var(--f-ui); font-weight: 700; font-size: 18px; margin: 0 40px 12px 0; }
body.skin .cgm-sheet .fld { margin-top: 14px; }
body.skin .cgm-sheet .form-act { margin-top: 18px; }
body.skin .cgm-photo { display: flex; gap: 14px; align-items: center; }
body.skin .cgm-photo .av { width: 72px; height: 72px; flex: none; font-size: 22px; }
body.skin .cgm-photo .cgm-hint { margin: 0; }

/* Messages: the emergency line is plain grey text with a dot, not a pink box (Part A 9) */
body.skin .mp-em.cgm-em { background: none; padding: 2px 2px; border-radius: 0; font-size: 13px; color: var(--ink-3); gap: 8px; }
body.skin .mp-em.cgm-em .link { font-size: 13px; }

/* Announcements: one coral dot before the date instead of New and Unread pills (Part A 10) */
body.skin .np-top .cgm-dot { margin-left: auto; }
body.skin .np-top .cgm-dot + time { margin-left: 0; }

/* the family's note to the caregiver: Done or Not today (family clearing brief, Oct 25, 2026) */
.fn-cg { margin: 12px 0; padding: 14px; border-radius: 14px; background: var(--gold-wash); }
.fn-cg.ok { background: var(--ok-wash); }
.fn-k { display: flex; align-items: center; gap: 8px; margin: 0; font: 700 .76rem var(--f-ui); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.fn-k .i { width: 15px; height: 15px; }
.fn-t { margin: 6px 0 10px; font-size: 1rem; color: var(--ink); overflow-wrap: anywhere; }
.fn-r { margin: -4px 0 8px; font-size: .9rem; color: var(--ink-2); overflow-wrap: anywhere; }
.fn-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.fn-acts .btn { flex: 1 1 8rem; }
.fn-fine { margin: 8px 0 0; font-size: .82rem; color: var(--ink-3); }
.fn-cg .done-line { margin: 0; }
/* the office's visit record */
.fn-rec-q { display: block; font-style: italic; overflow-wrap: anywhere; }
.fn-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 8px 0 4px; }
.fn-st { font-size: .78rem; color: var(--ink-3); }
.fn-st::before { content: ''; display: block; height: 4px; border-radius: 4px; background: var(--line); margin-bottom: 5px; }
.fn-st b { display: block; font-weight: 700; }
.fn-st.on { color: var(--ink); } .fn-st.on::before { background: var(--teal); }
.fn-st.on.ok::before { background: var(--ok); } .fn-st.on.nt::before { background: var(--gold, #D9A23A); }
.fn-rec-r { display: block; font-size: .88rem; color: var(--ink-2); overflow-wrap: anywhere; }