/* care.css -- session 415 (briefs/session-415-brief.md; mh-care-mockups-v1: care-by-client.dc.html, care-one-service.dc.html, settings-care.dc.html, Daniel's
   approved drawings). Properties > Care and Settings > Care. The drawings' own stylesheets, ported value for value as tokens (tokens.css --ca-*, and the
   Appointments list's --apl-*) and ca- (Care) and cs- (Settings > Care) classes. The title row and the band are the Properties list's (prl- classes,
   properties-list.css: the same sizes, paddings, radii and shadow, as the brief asks). Every value is the drawing's unless a comment says otherwise. */

/* ---------- the switch beside the title, the tabs (.tabbtn) ---------- */
.ca-seg{display:flex;gap:4px;background:var(--apl-s2);padding:4px;border-radius:999px;flex-wrap:wrap}
.ca-seg.ca-segt{margin-left:18px}
.ca-tab{border:0;background:transparent;font-size:13.5px;font-weight:600;color:var(--apl-text);padding:6px 14px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;text-decoration:none;line-height:normal}
a.ca-tab{color:var(--apl-text)}
.ca-tab span{font-size:12px;font-weight:700;color:var(--apl-muted)}
.ca-tab:hover{background:var(--ca-mini-hover);text-decoration:none}
.ca-tab.on,a.ca-tab.on{background:var(--apl-teal);color:#ffffff}
.ca-tab.on span{color:var(--ca-on-teal-count)}
.ca-tab.ca-tabw{color:#ffffff}
.ca-tab.ca-tabw:hover{background:rgba(255,255,255,.12)}
.ca-tab.ca-tabw.on{background:#ffffff;color:var(--apl-teal)}

/* ---------- buttons ---------- */
.ca-btn2{border:1.5px solid var(--apl-line2);background:#ffffff;color:var(--apl-ink);font-size:13px;font-weight:600;border-radius:10px;padding:8px 12px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;text-decoration:none;line-height:normal}
a.ca-btn2{color:var(--apl-ink)}
.ca-btn2:hover{background:var(--ca-hover);text-decoration:none}
.ca-btn2[disabled]{opacity:.5;cursor:default}
.ca-btnt{border:0;background:var(--apl-teal);color:#ffffff;font-size:13px;font-weight:700;border-radius:10px;padding:9px 14px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap}
.ca-btnt:hover{background:var(--ca-teal-dark)}
.ca-btnt[disabled]{opacity:.5;cursor:default}
.ca-btng{border:0;background:var(--apl-green);color:#ffffff;font-size:13px;font-weight:700;border-radius:10px;padding:8px 12px;cursor:pointer;white-space:nowrap}
.ca-btng:hover{background:var(--ca-good-hover)}
.ca-btny{border:0;background:linear-gradient(var(--apl-yellow),var(--apl-yellow-2));color:var(--apl-ink);font-size:14px;font-weight:800;border-radius:10px;padding:11px 16px;cursor:pointer;box-shadow:var(--ca-btny-shadow);display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}
.ca-btny:hover{filter:brightness(.97)}
.ca-btny[disabled]{opacity:.45;cursor:default;box-shadow:none}
.ca-mini{border:0;background:var(--apl-s2);color:var(--apl-ink);font-size:11.5px;font-weight:700;border-radius:7px;padding:4px 8px;cursor:pointer}
.ca-mini:hover{background:var(--ca-mini-hover)}
.ca-sel{border:1.5px solid var(--apl-line2);background-color:#ffffff;color:var(--apl-ink);font-size:13.5px;font-weight:500;border-radius:10px;padding:8px 34px 8px 12px;cursor:pointer;min-width:150px;font-family:inherit;width:auto;height:auto}   /* width and height: tokens.css's page-wide select rule is 100% wide */
.ca-sel.ca-selt{border-color:var(--apl-teal-mid);background:var(--apl-teal-tint);color:var(--apl-teal);font-weight:700}
.ca-chk{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--apl-ink);font-weight:500;cursor:pointer}
.ca-chk input{width:16px;height:16px;accent-color:var(--apl-teal);margin:0}
.ca-search{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--apl-line2);border-radius:999px;padding:8px 14px;min-width:300px;background:#ffffff;max-width:100%}
.ca-search input{border:0;outline:0;font:inherit;font-size:13.5px;flex:1 1 0%;background:transparent;color:var(--apl-ink);min-width:0;padding:0;margin:0;height:auto;box-shadow:none;width:auto}   /* the List's own reset of the page-wide input rule */

/* ---------- the band (inside .prl-band): the stats and the chips ---------- */
.ca-stat{border:0;background:transparent;color:#ffffff;text-align:left;padding:6px 10px;border-radius:10px;cursor:pointer;display:flex;flex-direction:column;gap:2px;font-family:inherit}
.ca-stat:hover{background:rgba(255,255,255,.10)}
.ca-stat.on{background:rgba(255,255,255,.18);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)}
.ca-stat b{font-size:22px;font-weight:800;letter-spacing:-0.03em;line-height:1;color:#ffffff}
.ca-stat b.y{color:var(--apl-yellow)}
.ca-stat > span{font-size:12px;font-weight:600;color:rgba(255,255,255,.82);display:flex;align-items:center;gap:6px;white-space:nowrap}
.ca-stat.ca-big{flex-direction:row;align-items:baseline;gap:10px;padding:4px 8px}
.ca-stat.ca-big b{font-size:40px;letter-spacing:-0.04em}
.ca-stat.ca-big > span{flex-direction:column;gap:1px;color:#ffffff;align-items:flex-start}
.ca-bw{font-size:14px;font-weight:700;color:#ffffff}
.ca-bd{font-size:12px;color:rgba(255,255,255,.78);font-weight:400}
.ca-vdiv{width:1px;align-self:stretch;background:rgba(255,255,255,.22)}
.ca-stats{display:flex;gap:4px;flex-wrap:wrap}
.ca-month{display:flex;gap:18px;align-items:center;background:rgba(255,255,255,.08);border-radius:12px;padding:8px 14px;margin-left:auto}   /* margin: on a narrower screen it wraps to the right, as drawn */
.ca-mk{display:flex;flex-direction:column;gap:2px}
.ca-mk small{font-size:11.5px;color:rgba(255,255,255,.78);font-weight:600}
.ca-mk em{font-style:normal;font-size:11.5px;color:rgba(255,255,255,.78)}
.ca-mk b{font-size:20px;font-weight:800;color:#ffffff;letter-spacing:-0.02em}
.ca-mk b.y{color:var(--apl-yellow)}
.ca-mdiv{width:1px;align-self:stretch;background:rgba(255,255,255,.18)}
.ca-l2{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.16);padding-top:10px}
.ca-l2h{display:inline-flex;align-items:center;gap:8px;color:#ffffff;font-size:13px;font-weight:700;margin-right:6px}
.ca-l2i{width:24px;height:24px;border-radius:7px;background:rgba(255,255,255,.14);display:inline-flex;align-items:center;justify-content:center}
.ca-achip{border:0;display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:999px;font-size:12.5px;font-weight:600;cursor:help;background:rgba(255,255,255,.10);color:#ffffff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);font-family:inherit}
.ca-achip b{font-weight:800;color:var(--apl-yellow)}
.ca-sdot{width:8px;height:8px;border-radius:3px;display:inline-block;flex:none}

/* ---------- the filter card and the two columns ---------- */
.ca-card{background:#ffffff;border-radius:14px;box-shadow:var(--apl-card-shadow)}
.ca-fcard{padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.ca-frow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ca-frow2{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.ca-fdiv{width:1px;height:26px;background:var(--apl-line);margin:0 4px}
.ca-grow{flex:1 1 auto}
.ca-note{font-size:13px;color:var(--apl-muted)}
.ca-strong{font-size:13px;font-weight:700;color:var(--apl-ink)}
.ca-cols{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.ca-main{flex:999 1 640px;min-width:0;display:flex;flex-direction:column;gap:12px}   /* 640, not the drawing's 720: the drawing is 1760 wide; at 1440 (a 1148 frame) the panel stays beside the list */
.ca-side{flex:1 1 420px;max-width:500px;min-width:0;position:sticky;top:16px}
.ca-side.ca-sidew{flex:1 1 400px;max-width:520px}
.ca-empty{padding:28px 18px;text-align:center;color:var(--apl-muted);font-size:13.5px}
.ca-empty b{display:block;color:var(--apl-ink);font-size:15px;margin-bottom:4px}

/* ---------- By client: one card per client ---------- */
.ca-ccard{background:#ffffff;border-radius:14px;box-shadow:var(--apl-card-shadow);display:flex;flex-direction:column;overflow:hidden}
.ca-ccard.pick{box-shadow:var(--ca-pick-ring)}
.ca-chead{display:flex;gap:14px;align-items:flex-start;padding:14px 16px 12px 18px;flex-wrap:wrap}
.ca-cl{flex:1 1 320px;min-width:0}
a.ca-cname{font-size:16px;font-weight:800;letter-spacing:-0.015em;color:var(--apl-ink);line-height:1.25;text-decoration:none}
a.ca-cname:hover{text-decoration:underline;text-underline-offset:3px}
.ca-cmeta{font-size:12.5px;color:var(--apl-muted);line-height:1.4;margin-top:3px}
.ca-ctype{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;font-size:11px;font-weight:700;background:var(--apl-s2);color:var(--apl-text);margin-left:8px;vertical-align:2px}
.ca-phone{display:inline-flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap}
.ca-phone b{font-size:14px;color:var(--apl-ink);font-weight:700;font-variant-numeric:tabular-nums;user-select:all}
.ca-phone small{font-size:12px;color:var(--apl-muted)}
.ca-cm{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none}
.ca-money{font-size:22px;font-weight:800;letter-spacing:-0.03em;color:var(--apl-ink);font-variant-numeric:tabular-nums;line-height:1}
.ca-cr{display:flex;flex-direction:column;gap:6px;flex:none;min-width:150px}
.ca-cr2{display:flex;gap:6px}
.ca-cr2 .ca-btn2{flex:1;justify-content:center;padding:7px 10px}
.ca-irow{display:grid;grid-template-columns:minmax(220px,1.4fr) 170px 150px 80px minmax(160px,1fr);gap:12px;align-items:center;padding:9px 16px 9px 18px;border-top:1px solid var(--ca-row-line);font-size:13.5px}
a.ca-hname{color:var(--apl-teal);font-weight:700;line-height:1.3;text-decoration:none}
a.ca-hname:hover{text-decoration:underline;text-underline-offset:3px}
.ca-schip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}
.ca-due{font-size:12.5px;font-weight:700;white-space:nowrap;color:var(--ca-red)}
.ca-due.never{color:var(--apl-on-orange)}
.ca-due.soon{color:var(--ca-amber-ink)}
.ca-num{text-align:right;font-variant-numeric:tabular-nums;color:var(--apl-ink);font-weight:600}
.ca-num.miss{color:var(--apl-on-orange);font-weight:700;font-size:12.5px;white-space:nowrap}
.ca-when{font-size:12.5px;color:var(--apl-muted);line-height:1.35}
.ca-oc{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}
.ca-oc.g{background:var(--apl-green-tint);color:var(--apl-on-green)}
.ca-oc.t{background:var(--apl-teal-tint);color:var(--apl-teal)}
.ca-oc.y{background:var(--apl-yellow-tint);color:var(--apl-on-yellow)}
.ca-oc.o{background:var(--apl-orange-tint);color:var(--apl-on-orange)}
.ca-oc.n{background:var(--apl-s2);color:var(--apl-text)}
.ca-oc.w{background:#ffffff;color:var(--apl-muted);box-shadow:inset 0 0 0 1.5px var(--apl-line2)}
.ca-oc.gg{background:var(--apl-green);color:#ffffff}
/* the job colours, by the job's place */
.ca-j1{background:var(--ca-j1-tint);color:var(--ca-j1-ink)} .ca-d1{background:var(--ca-j1-dot)}
.ca-j2{background:var(--ca-j2-tint);color:var(--ca-j2-ink)} .ca-d2{background:var(--ca-j2-dot)}
.ca-j3{background:var(--ca-j3-tint);color:var(--ca-j3-ink)} .ca-d3{background:var(--ca-j3-dot)}
.ca-j4{background:var(--ca-j4-tint);color:var(--ca-j4-ink)} .ca-d4{background:var(--ca-j4-dot)}
.ca-j5{background:var(--ca-j5-tint);color:var(--ca-j5-ink)} .ca-d5{background:var(--ca-j5-dot)}
.ca-j6{background:var(--ca-j6-tint);color:var(--ca-j6-ink)} .ca-d6{background:var(--ca-j6-dot)}
.ca-j7{background:var(--ca-j7-tint);color:var(--ca-j7-ink)} .ca-d7{background:var(--ca-j7-dot)}
.ca-j8{background:var(--ca-j8-tint);color:var(--ca-j8-ink)} .ca-d8{background:var(--ca-j8-dot)}

/* ---------- the panel beside the list ---------- */
.ca-panel{background:#ffffff;border-radius:14px;box-shadow:var(--ca-panel-shadow);display:flex;flex-direction:column;overflow:hidden}
.ca-phead{background:var(--mh-teal-band);color:#ffffff;padding:14px 18px;display:flex;flex-direction:column;gap:4px}
.ca-pk{font-size:12px;font-weight:700;color:var(--apl-sky)}
.ca-pn{font-size:19px;font-weight:800;letter-spacing:-0.02em}
.ca-pn.y{font-size:26px;letter-spacing:-0.03em;color:var(--apl-yellow)}
.ca-ps{font-size:13px;color:rgba(255,255,255,.82)}
.ca-pseg{display:flex;gap:4px;background:rgba(255,255,255,.12);padding:3px;border-radius:999px;align-self:flex-start;margin-top:6px;flex-wrap:wrap}
.ca-step{display:grid;grid-template-columns:26px 1fr;gap:10px;padding:12px 18px;border-top:1px solid var(--ca-row-line)}
.ca-sn{width:26px;height:26px;border-radius:999px;background:var(--apl-teal-tint);color:var(--apl-teal);font-size:12px;font-weight:800;display:inline-flex;align-items:center;justify-content:center}
.ca-sl{font-size:12px;font-weight:700;color:var(--apl-muted);margin-bottom:4px}
.ca-sl.ca-sl0{margin:0}
.ca-say{font-size:14px;line-height:1.55;color:var(--apl-ink)}
.ca-say mark{background:var(--apl-yellow-tint);color:var(--apl-ink);border-radius:4px;padding:0 3px}
.ca-ifq{border-top:1px solid var(--ca-row-line);padding:12px 18px;display:flex;flex-direction:column;gap:8px}
.ca-ifr{display:grid;grid-template-columns:120px 1fr;gap:10px;font-size:13px;line-height:1.45}
.ca-ifr b{color:var(--apl-ink);font-weight:700}
.ca-outs{border-top:1px solid var(--ca-row-line);padding:14px 18px 16px;display:flex;flex-direction:column;gap:10px;background:var(--ca-out-bg)}
.ca-ogrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ca-obtn{border:1.5px solid var(--apl-line2);background:#ffffff;color:var(--apl-ink);font-size:13px;font-weight:700;border-radius:10px;padding:9px 12px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-align:center;font-family:inherit}
.ca-obtn:hover{background:var(--apl-bg)}
.ca-obtn.good{background:var(--apl-green);border-color:var(--apl-green);color:#ffffff}
.ca-obtn.good:hover{background:var(--ca-good-hover)}
.ca-obtn[disabled]{opacity:.5;cursor:default}
.ca-txt{border:1.5px solid var(--apl-line2);border-radius:10px;padding:10px 12px;font-size:13.5px;line-height:1.5;color:var(--apl-ink);background:#ffffff;white-space:pre-line}
.ca-pbody{padding:14px 18px;display:flex;flex-direction:column;gap:10px}
.ca-pnote{font-size:12px;color:var(--apl-muted);line-height:1.45}
.ca-said{font-size:12.5px;line-height:1.45;border-radius:8px;padding:8px 10px;background:var(--apl-teal-tint);color:var(--apl-teal)}
.ca-said.warn{background:var(--apl-orange-tint);color:var(--apl-on-orange);font-weight:600}
.ca-inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
input.ca-date,.ca-date{border:1.5px solid var(--apl-line2);border-radius:10px;padding:7px 10px;font:inherit;font-size:13px;color:var(--apl-ink);width:auto;height:auto}
.ca-bsum{display:grid;grid-template-columns:1fr 70px 80px;gap:10px;align-items:center;padding:10px 18px;border-top:1px solid var(--ca-row-line);font-size:13.5px}
.ca-prop{border-collapse:collapse;width:100%;font-size:13px}
.ca-prop td{padding:6px 0;border-top:1px solid var(--ca-row-line);vertical-align:top}
.ca-prop td.r{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;color:var(--apl-ink);white-space:nowrap}

/* ---------- Add to next clean and Worked this month ---------- */
.ca-thead{padding:14px 18px;display:flex;flex-direction:column;gap:4px}
.ca-tt{font-size:16px;font-weight:800;color:var(--apl-ink)}
.ca-td{font-size:13px;color:var(--apl-muted);line-height:1.45}
.ca-scroll{overflow-x:auto}
.ca-arow{display:grid;grid-template-columns:minmax(220px,1.3fr) minmax(150px,1fr) 150px 150px 70px 230px;gap:12px;align-items:center;padding:11px 16px 11px 18px;border-top:1px solid var(--ca-row-line);font-size:13.5px;min-width:1000px}
.ca-arow.ca-ah{background:var(--apl-s2);border-top:0;font-size:12.5px;font-weight:600;color:var(--apl-text);padding-top:10px;padding-bottom:10px}
.ca-acts{display:flex;gap:6px;justify-content:flex-end;align-items:center}
.ca-drow{display:grid;grid-template-columns:minmax(200px,1.2fr) minmax(220px,1.6fr) 170px 110px 90px;gap:12px;align-items:center;padding:11px 18px;border-top:1px solid var(--ca-row-line);font-size:13.5px;min-width:860px}
.ca-drow b{color:var(--apl-ink);font-weight:700}
.ca-drow.undone{opacity:.55}

/* ---------- One service ---------- */
.ca-stepc{background:#ffffff;border-radius:14px;box-shadow:var(--apl-card-shadow);padding:12px 16px;display:flex;gap:12px;align-items:center;flex:1 1 260px;min-width:0}
.ca-stepn{width:34px;height:34px;border-radius:999px;background:var(--apl-teal);color:#ffffff;font-size:15px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;flex:none}
.ca-stepn.o{background:var(--ca-j2-dot)}
.ca-stepn.g{background:var(--apl-green)}
.ca-stepc b{font-size:24px;font-weight:800;color:var(--apl-ink);letter-spacing:-0.03em;line-height:1}
.ca-stept{font-size:13.5px;font-weight:700;color:var(--apl-ink)}
.ca-stepd{font-size:12px;color:var(--apl-muted);line-height:1.35}
.ca-arrow{color:var(--ca-tip-ink);font-size:20px;font-weight:700;flex:none}
.ca-gr{display:grid;grid-template-columns:40px minmax(130px,1fr) minmax(150px,1.5fr) 80px minmax(130px,170px) minmax(112px,130px);gap:10px;align-items:start;padding:12px 16px 12px 14px;border-top:1px solid var(--ca-row-line);font-size:13.5px}
.ca-gr.th{background:var(--apl-s2);border-top:0;font-size:12.5px;font-weight:600;color:var(--apl-text);align-items:center;padding-top:10px;padding-bottom:10px}
.ca-gr.pick{background:var(--ca-pick-row)}
.ca-gr input{width:17px;height:17px;accent-color:var(--apl-teal);margin:2px 0 0 4px}
.ca-gin{min-width:700px}   /* the drawing's 960 at 1760; the narrower columns fit beside the panel at 1440 */
.ca-cn{font-weight:800;color:var(--apl-ink);font-size:14.5px;line-height:1.3;border:0;background:transparent;padding:0;text-align:left;cursor:pointer;font-family:inherit}
.ca-cn:hover{text-decoration:underline;text-underline-offset:3px}
.ca-cmm{font-size:12px;color:var(--apl-muted);margin-top:2px;line-height:1.35}
.ca-hl{display:flex;flex-direction:column;gap:4px}
.ca-hrow{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.ca-sub{font-size:11.5px;color:var(--apl-muted);margin-top:3px;line-height:1.35}
.ca-ta{width:100%;box-sizing:border-box;min-height:150px;border:1.5px solid var(--apl-line2);border-radius:10px;padding:10px 12px;font:inherit;font-size:13.5px;line-height:1.55;color:var(--apl-ink);resize:vertical;background:#ffffff}
.ca-ta:focus{outline:0;border-color:var(--apl-yellow);box-shadow:0 0 0 3px rgba(255,209,58,.28)}
.ca-vars{display:flex;gap:6px;flex-wrap:wrap}
.ca-var{border:0;background:var(--apl-teal-tint);color:var(--apl-teal);font-size:12px;font-weight:700;border-radius:999px;padding:5px 10px;cursor:pointer;white-space:nowrap;font-family:inherit}
.ca-var:hover{background:var(--ca-var-hover)}
.ca-pv{border-top:1px solid var(--ca-row-line);padding:14px 18px;display:flex;flex-direction:column;gap:10px;background:var(--ca-out-bg)}
.ca-pvh{display:flex;align-items:center;gap:8px}
.ca-pvh .ca-sl{flex:1;margin:0}
.ca-bubble{background:var(--ca-bubble);border-radius:16px 16px 16px 4px;padding:11px 13px;font-size:13.5px;line-height:1.55;color:var(--apl-ink);white-space:pre-line}
.ca-navb{border:0;background:var(--apl-s2);width:30px;height:30px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--apl-ink);font-weight:800;font-size:16px}
.ca-navb:hover{background:var(--ca-mini-hover)}
.ca-warn{font-size:12.5px;font-weight:600;color:var(--apl-on-orange);background:var(--apl-orange-tint);border-radius:8px;padding:7px 10px}
.ca-sendb{border-top:1px solid var(--ca-row-line);padding:14px 18px 16px;display:flex;flex-direction:column;gap:10px}

/* ---------- a phone: one column, the panel under the list ---------- */
@media (max-width: 760px){
  .ca-side,.ca-side.ca-sidew{position:static;max-width:none;flex-basis:100%}
  .ca-irow{grid-template-columns:1fr auto;row-gap:4px}
  .ca-irow > :nth-child(1){grid-column:1 / -1}
  .ca-irow > :nth-child(5){grid-column:1 / -1}
  .ca-search{min-width:0;flex:1 1 100%}
  .ca-seg.ca-segt{margin-left:0}
  .ca-cr{min-width:0;flex:1 1 100%}
  .ca-cm{align-items:flex-start}
  .ca-ifr{grid-template-columns:1fr}
  .ca-ogrid{grid-template-columns:1fr}
  .ca-month{flex-wrap:wrap}
  /* the List band's phone values (properties-list.css): the big number, the stats three to a row */
  .ca-stat.ca-big b{font-size:34px}
  .ca-stats{display:grid;grid-template-columns:1fr 1fr 1fr;width:100%}
  .ca-stat{padding:6px 6px}
  .ca-month{width:100%}
  .ca-vdiv{display:none}
}

/* ================================================================================================ Settings > Care (settings-care.dc.html) */
.cs-page{font-family:'Inter','Segoe UI',system-ui,sans-serif;color:var(--apl-text);display:flex;flex-direction:column;gap:16px;max-width:1200px;-webkit-font-smoothing:antialiased}
.cs-page *{box-sizing:border-box}
.cs-intro{font-size:14px;color:var(--apl-muted);line-height:1.45}
.cs-card{background:#ffffff;border-radius:14px;box-shadow:var(--apl-card-shadow);overflow:hidden}
.cs-ch{display:flex;align-items:center;gap:12px;padding:14px 18px;flex-wrap:wrap}
.cs-ico{width:36px;height:36px;border-radius:10px;background:var(--apl-teal);display:inline-flex;align-items:center;justify-content:center;flex:none}
.cs-chw{flex:1;min-width:240px}
.cs-ct{font-size:17px;font-weight:800;color:var(--apl-ink);letter-spacing:-0.015em}
.cs-cd{font-size:13px;color:var(--apl-muted);line-height:1.45}
.cs-scroll{overflow-x:auto}
.cs-gr{display:grid;grid-template-columns:minmax(150px,1.2fr) 90px minmax(130px,1fr) 80px minmax(130px,1.1fr) 120px 64px;gap:10px;align-items:center;padding:11px 18px;border-top:1px solid var(--ca-row-line);font-size:13.5px;min-width:824px}   /* the drawing's 1200 page; Settings' frame is narrower, so the columns are too */
.cs-gr.th{background:var(--apl-s2);border-top:0;font-size:12.5px;font-weight:600;padding-top:9px;padding-bottom:9px}
.cs-job{display:flex;align-items:center;gap:8px;color:var(--apl-ink);font-weight:700}
.cs-dot{width:9px;height:9px;border-radius:3px;display:inline-block;flex:none}
.cs-sw{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;border:0;background:transparent;padding:0;cursor:pointer;font-family:inherit;color:var(--apl-ink)}
.cs-sw[disabled]{cursor:default}
.cs-swt{width:34px;height:20px;border-radius:999px;position:relative;display:inline-block;flex:none;background:var(--apl-line2)}
.cs-swt i{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:999px;background:#ffffff;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.cs-sw.on .cs-swt{background:var(--apl-green)}
.cs-sw.on .cs-swt i{left:16px}
.cs-pill{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;font-size:11.5px;font-weight:700;white-space:nowrap;background:var(--apl-s2);color:var(--apl-text)}
.cs-miss{color:var(--apl-on-orange);font-weight:700}
.cs-edit{padding:12px 18px 16px;border-top:1px solid var(--ca-row-line);background:var(--ca-out-bg);display:flex;flex-wrap:wrap;gap:12px 18px;align-items:flex-end;min-width:824px}
.cs-f{display:flex;flex-direction:column;gap:4px;font-size:12.5px;font-weight:700;color:var(--apl-text)}
input.cs-in,select.cs-in,.cs-in{border:1.5px solid var(--apl-line2);border-radius:10px;padding:8px 10px;font:inherit;font-size:13.5px;color:var(--apl-ink);background-color:#ffffff;min-width:90px;width:auto;height:auto}
.cs-in:focus{outline:0;border-color:var(--apl-yellow);box-shadow:0 0 0 3px rgba(255,209,58,.28)}
.cs-field{border:1.5px solid var(--apl-line2);border-radius:10px;padding:10px 12px;font-size:14px;line-height:1.6;color:var(--apl-ink);background:#ffffff;white-space:pre-line}
.cs-tok{display:inline-flex;align-items:center;background:var(--apl-teal-tint);color:var(--apl-teal);font-size:12.5px;font-weight:700;border-radius:999px;padding:1px 8px;margin:0 1px;white-space:nowrap}
.cs-tok.bad{background:var(--apl-orange-tint);color:var(--apl-on-orange)}
.cs-lab{font-size:12.5px;font-weight:700;color:var(--apl-text);margin-bottom:6px}
.cs-lab.cs-lab0{margin:0}
.cs-blk{padding:12px 18px;border-top:1px solid var(--ca-row-line);display:flex;flex-direction:column;gap:14px}
.cs-row2{display:grid;grid-template-columns:28px 1fr;gap:12px;padding:12px 18px;border-top:1px solid var(--ca-row-line);align-items:start}
.cs-ifs{display:grid;grid-template-columns:170px 1fr;gap:10px;align-items:start}
.cs-ifs .cs-field.b{font-weight:700}
.cs-foot{border-top:1px solid var(--ca-row-line);padding:12px 18px;display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.cs-vgr{display:grid;grid-template-columns:170px minmax(240px,1.4fr) minmax(200px,1fr);gap:12px;padding:10px 18px;border-top:1px solid var(--ca-row-line);font-size:13.5px;align-items:center}
.cs-vgr.th{background:var(--apl-s2);border-top:0;font-size:12.5px;font-weight:600}
.cs-tgr{display:grid;grid-template-columns:minmax(260px,1.5fr) 160px minmax(200px,1fr);gap:12px;padding:12px 18px;border-top:1px solid var(--ca-row-line);font-size:13.5px;align-items:center}
.cs-tgr > :first-child{color:var(--apl-ink);font-weight:600}
.cs-val{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--apl-line2);border-radius:10px;padding:7px 10px;font-weight:700;color:var(--apl-ink);background:#ffffff;width:max-content}
input.cs-vin,.cs-vin{width:64px;border:0;outline:0;font:inherit;font-weight:700;color:var(--apl-ink);background:transparent;padding:0;height:auto;box-shadow:none}
.cs-hist{padding:10px 18px;border-top:1px solid var(--ca-row-line);font-size:12.5px;color:var(--apl-muted);line-height:1.45}
.cs-hist b{color:var(--apl-ink)}
.cs-sample{padding:12px 18px;border-top:1px solid var(--ca-row-line);background:var(--ca-out-bg);display:flex;flex-direction:column;gap:8px}
.cs-tabs{padding:0 18px 12px;display:flex;gap:4px;flex-wrap:wrap}
@media (max-width: 760px){
  .cs-vgr,.cs-tgr{grid-template-columns:1fr}
  .cs-ifs{grid-template-columns:1fr}
}
select.cs-in{padding-right:34px}