/* RAVAD app screens — presentation shots of the real Home Care and Adult Day Care applications
   (inc/app-mockups.php) with fictional sample data. Same components and colors as the apps, but
   curated: collapsed sidebar, fewer columns, larger type. Everything is sized in em from the frame
   width (container query units), so a screen scales like a screenshot and stays sharp. */

.rapp-frame { position: relative; width: 100%; }
.rapp-frame--bare { border: 0; border-radius: 0; box-shadow: none; }
.rapp { container-type: inline-size; display: block; width: 100%; }
.rapp__win {
  --a-teal: #0f766e; --a-teal-dk: #0b4f49; --a-teal-bg: #ecfdf5; --a-teal-ln: #b7e4d9;
  --a-ink: #1e2637; --a-ink2: #334155; --a-mut: #64748b; --a-ln: #d9e2ea; --a-ln2: #e9eef3;
  --a-bg: #e3eaf1; --a-side: #e9f0f4; --a-top: #f8fafc; --a-head: #f3f6f9;
  --a-red: #c0343b; --a-red-bg: #fdeeee; --a-blue: #1d5bd8; --a-blue-bg: #eaf0fd;
  --a-amb: #b45309; --a-amb-bg: #fff6e6; --a-grn: #12804a; --a-grn-bg: #e3f7ec;
  position: relative; display: grid; grid-template-columns: 4.4em minmax(0, 1fr);
  height: calc(var(--h, 32) * 1em); overflow: hidden;
  font-size: 13px; font-size: calc(100cqw / 50);
  font-family: Roboto, "Segoe UI", system-ui, -apple-system, sans-serif; font-weight: 400; line-height: 1.35;
  color: var(--a-ink); background: var(--a-bg); text-align: left; letter-spacing: 0;
  -webkit-font-smoothing: antialiased; -webkit-user-select: none; user-select: none; cursor: default;
}
.rapp__win *, .rapp__win *::before, .rapp__win *::after { box-sizing: border-box; }
.rapp__win .icon { width: 1.15em; height: 1.15em; flex: none; stroke-width: 2; }
.rapp__win b, .rapp__win strong { font-weight: 700; }
.rapp__win i, .rapp__win em { font-style: normal; }
.rapp--adc .rapp__win { --a-side: #fff; }

/* ---------- Collapsed sidebar (icon rail) ---------- */
.rapp__rail { display: flex; flex-direction: column; align-items: center; gap: .35em; padding: .75em 0 .9em; background: var(--a-side); border-right: 1px solid #d0dae3; }
.rapp__logo { display: grid; place-items: center; width: 2.6em; height: 2.6em; margin-bottom: .55em; border-radius: 50%; background: #fff; box-shadow: 0 .3em .8em -.4em rgba(6, 58, 99, .45); }
.rapp__logo img { display: block; width: 88%; height: auto; }
.rapp__rail > i { display: grid; place-items: center; width: 2.5em; height: 2.5em; border-radius: .7em; background: rgba(15, 118, 110, .08); color: var(--a-teal); }
.rapp__rail > i .icon { width: 1.2em; height: 1.2em; }
.rapp__rail > i b { font-size: .95em; }
.rapp__rail > i.is-on { background: var(--a-teal); color: #fff; box-shadow: 0 .5em 1em -.45em rgba(15, 118, 110, .7); }
.rapp--adc .rapp__rail > i.is-on { background: #effaf7; color: var(--a-teal); box-shadow: inset 0 0 0 1px var(--a-teal); }
.rapp__me { display: grid; place-items: center; width: 2.6em; height: 2.6em; margin-top: auto; border-radius: .7em; border: 1px solid var(--a-teal-ln); background: #fff; color: var(--a-teal); }

/* ---------- Top bar ---------- */
.rapp__main { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.rapp__top { display: flex; align-items: center; gap: .85em; height: 4em; padding: 0 1.25em; flex: none; background: var(--a-top); border-bottom: 1px solid #d5dee7; }
.rapp__tile { position: relative; display: grid; place-items: center; width: 2.6em; height: 2.6em; flex: none; border-radius: .6em; border: 1px solid var(--a-teal-ln); background: var(--a-teal-bg); color: var(--a-teal); }
.rapp__tile .icon { width: 1.3em; height: 1.3em; }
.rapp__title b { display: block; font-size: 1.12em; }
.rapp__title small { display: block; color: var(--a-mut); font-size: .76em; }
.rapp__pill { padding: .26em .66em; border-radius: .45em; border: 1px solid var(--a-teal-ln); background: var(--a-teal-bg); color: var(--a-teal); font-size: .74em; font-weight: 700; }
.rapp__chips { display: flex; gap: .55em; margin-left: auto; }
.rapp__chip { display: inline-flex; align-items: center; gap: .45em; padding: .45em .75em; border-radius: .55em; border: 1px solid var(--a-teal-ln); background: #fff; color: var(--a-teal); font-size: .78em; font-weight: 600; white-space: nowrap; }
.rapp__chip em { min-width: 1.6em; padding: .08em .42em; border-radius: .38em; background: var(--a-teal); color: #fff; font-size: .92em; text-align: center; }
.rapp__chip--red { border-color: #f1c6c9; color: var(--a-red); }
.rapp__chip--red em { background: var(--a-red); }
.rapp__chip--blue em { background: var(--a-blue); }
.rapp__chip--amber { border-color: #f5d49a; color: var(--a-amb); }
.rapp__chip--amber em { background: #d97706; }
.rapp__body { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .8em; padding: 1em 1.2em 1.1em; }

/* ---------- Toolbars, fields, buttons ---------- */
.rapp__tools { display: flex; flex-wrap: wrap; align-items: center; gap: .6em; flex: none; }
.rapp__tools-end { display: flex; gap: .5em; margin-left: auto; }
.rapp__btn { display: inline-flex; align-items: center; gap: .45em; padding: .55em .85em; border-radius: .55em; border: 1px solid #cbd5e1; background: #fff; color: var(--a-ink2); font-size: .8em; font-weight: 600; white-space: nowrap; }
.rapp__btn .icon { width: 1.1em; height: 1.1em; }
.rapp__btn--teal { background: var(--a-teal); border-color: var(--a-teal); color: #fff; }
.rapp__btn--dark { background: var(--a-teal-dk); border-color: var(--a-teal-dk); color: #fff; }
.rapp__btn--soft { background: #f6f9fb; }
.rapp__btn--wide { justify-content: center; width: 100%; padding-block: .75em; }
.rapp__box { display: inline-flex; align-items: center; gap: .55em; min-height: 2.5em; padding: 0 .85em; border-radius: .55em; border: 1px solid #cdd7e1; background: #fff; color: var(--a-ink); font-size: .84em; white-space: nowrap; }
.rapp__box .icon { width: 1em; height: 1em; color: var(--a-mut); }
.rapp__box--sel { justify-content: space-between; }
.rapp__month { display: inline-flex; align-items: center; gap: .85em; min-height: 2.5em; padding: 0 .3em; border-radius: .55em; border: 1px solid #cdd7e1; background: #f6f9fb; font-size: .84em; font-weight: 600; white-space: nowrap; }
.rapp__month i { display: grid; place-items: center; width: 1.95em; height: 1.95em; border-radius: .45em; background: #e5ecf2; color: var(--a-ink2); }
.rapp__month i .icon { width: 1em; height: 1em; }
.rapp__seg { display: inline-flex; padding: .2em; border-radius: .55em; border: 1px solid #cdd7e1; background: #eef3f7; font-size: .82em; }
.rapp__seg span { padding: .4em .75em; border-radius: .4em; color: var(--a-mut); font-weight: 600; white-space: nowrap; }
.rapp__seg span.is-on { background: #fff; color: var(--a-teal); box-shadow: 0 1px 2px rgba(15, 23, 42, .14); }
.rapp__seg em { margin-left: .4em; opacity: .7; }
.rapp__toggle { display: inline-flex; align-items: center; gap: .5em; padding: .45em .7em; border-radius: .55em; border: 1px solid #cdd7e1; background: #fff; color: var(--a-ink2); font-size: .78em; font-weight: 600; white-space: nowrap; }
.rapp__toggle i { position: relative; width: 2.2em; height: 1.2em; border-radius: 1em; background: #cbd5e1; }
.rapp__toggle i::after { content: ""; position: absolute; left: .17em; top: .17em; width: .86em; height: .86em; border-radius: 50%; background: #fff; }
.rapp__toggle.is-on i { background: var(--a-teal); }
.rapp__toggle.is-on i::after { left: auto; right: .17em; }
.rapp__check { display: inline-flex; align-items: center; gap: .45em; font-size: .8em; color: var(--a-ink2); white-space: nowrap; }
.rapp__check i { display: grid; place-items: center; width: 1.15em; height: 1.15em; border-radius: .25em; border: 1px solid #b6c2cf; background: #fff; }
.rapp__check.is-on i { background: var(--a-teal); border-color: var(--a-teal); }
.rapp__check.is-on i::after { content: ""; width: .55em; height: .3em; margin-top: -.15em; border: solid #fff; border-width: 0 0 .14em .14em; transform: rotate(-45deg); }
.rapp__search { display: inline-flex; align-items: center; gap: .55em; min-height: 2.35em; padding: 0 .85em; border-radius: .55em; border: 1px solid #cdd7e1; background: #fff; color: #94a3b8; font-size: .78em; white-space: nowrap; }
.rapp__search .icon { width: 1em; height: 1em; }
.rapp__tag { display: inline-flex; align-items: center; gap: .3em; padding: .22em .6em; border-radius: .45em; border: 1px solid var(--a-ln); background: #fff; color: var(--a-ink2); font-size: .76em; font-weight: 700; white-space: nowrap; }
.rapp__tag--blue { border-color: #cddaf6; background: var(--a-blue-bg); color: var(--a-blue); }
.rapp__tag--teal { border-color: var(--a-teal-ln); background: var(--a-teal-bg); color: var(--a-teal); }

/* ---------- Cards ---------- */
.rapp__card { flex: none; overflow: hidden; background: #fff; border: 1px solid var(--a-ln); border-radius: .85em; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.rapp__card--grow { flex: 1 1 auto; min-height: 0; }
.rapp__card--top { border-top: .2em solid var(--a-teal); }
.rapp__row { display: flex; gap: .8em; min-height: 0; }
.rapp__ch { display: flex; align-items: center; gap: .75em; padding: .8em 1em; border-bottom: 1px solid var(--a-ln2); }
.rapp__ch b { display: block; font-size: .98em; }
.rapp__ch small { display: block; color: var(--a-mut); font-size: .74em; }
.rapp__ch-ic { display: grid; place-items: center; width: 2.4em; height: 2.4em; flex: none; border-radius: .6em; border: 1px solid var(--a-teal-ln); background: var(--a-teal-bg); color: var(--a-teal); }
.rapp__ch-end { display: flex; align-items: center; gap: .5em; margin-left: auto; }
.rapp__ch--tint { background: #f0faf8; border-bottom: 0; }

/* ---------- Tables ---------- */
.rapp__table { width: 100%; border-collapse: collapse; font-size: .86em; }
.rapp__table th { padding: .72em .95em; background: var(--a-head); border-bottom: 1px solid var(--a-ln2); color: var(--a-ink2); font-size: .92em; font-weight: 700; text-align: left; white-space: nowrap; }
.rapp__table td { padding: .62em .95em; border-top: 1px solid var(--a-ln2); color: var(--a-ink); white-space: nowrap; }
.rapp__table tbody tr:first-child td { border-top: 0; }
.rapp__table .num { text-align: right; font-variant-numeric: tabular-nums; }
.rapp__table .c { text-align: center; }
.rapp__table .mut { color: var(--a-mut); }
.rapp__table .b { font-weight: 700; }
.rapp__table tr.is-hl td { background: #f1fbf8; }
.rapp__table tr.is-hl td:first-child { box-shadow: inset .22em 0 0 var(--a-teal); }
.rapp__table tfoot td { background: var(--a-head); border-top: 1px solid var(--a-ln); font-weight: 700; }
.rapp__table--caps th { background: #fff; color: var(--a-mut); font-size: .76em; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.rapp__table--tight td { padding-block: .5em; }
.rapp__acts { display: inline-flex; gap: .35em; }
.rapp__act { display: grid; place-items: center; width: 2em; height: 2em; border-radius: .45em; border: 1px solid #b9e3d9; background: #f0faf7; color: var(--a-teal); }
.rapp__act .icon { width: 1.05em; height: 1.05em; }
.rapp__act--solid { background: var(--a-teal); border-color: var(--a-teal); color: #fff; }
.rapp__act--blue { border-color: #c9dbf5; background: #eef4fd; color: #2563eb; }
.rapp__foot { display: flex; align-items: center; justify-content: space-between; padding: .65em 1em; border-top: 1px solid var(--a-ln2); color: var(--a-mut); font-size: .76em; font-weight: 600; }
.rapp__pager { display: flex; gap: .3em; }
.rapp__pager span { display: grid; place-items: center; min-width: 2.1em; height: 2.1em; border-radius: .4em; border: 1px solid var(--a-ln); color: var(--a-ink2); }
.rapp__pager span.is-on { background: var(--a-teal-dk); border-color: var(--a-teal-dk); color: #fff; }

/* ---------- Status badges ---------- */
.rapp__st { display: inline-flex; align-items: center; gap: .4em; padding: .26em .66em; border-radius: .45em; font-size: .92em; font-weight: 700; white-space: nowrap; }
.rapp__st::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: currentColor; }
.rapp__st--ok { background: var(--a-grn-bg); color: var(--a-grn); }
.rapp__st--part { background: var(--a-amb-bg); color: var(--a-amb); }
.rapp__st--bad { background: var(--a-red-bg); color: var(--a-red); }
.rapp__st--sent { background: var(--a-blue-bg); color: var(--a-blue); }

/* ---------- KPI tiles ---------- */
.rapp__band { display: flex; gap: .6em; align-items: baseline; margin-bottom: -.4em; font-size: .68em; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--a-ink2); }
.rapp__band span { font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--a-mut); }
.rapp__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7em; flex: none; }
.rapp__kpi { padding: .7em 1em .75em; border-radius: .7em; border: 1px solid var(--a-ln); border-left: .25em solid var(--a-teal); background: #fff; }
.rapp__kpi small { display: block; font-size: .74em; font-weight: 700; color: var(--a-ink2); }
.rapp__kpi b { display: block; margin: .08em 0 .05em; font-size: 1.55em; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.rapp__kpi em { display: block; font-size: .72em; color: var(--a-mut); }
.rapp__kpi--teal b { color: var(--a-teal); }
.rapp__kpi--red { border-left-color: var(--a-red); }
.rapp__kpi--red b { color: var(--a-red); }
.rapp__kpi--warm { border-left-color: #c2410c; background: #fffbeb; }
.rapp__kpi--warm small { color: #9a3412; }

/* ---------- Bar chart ---------- */
.rapp__chart { display: flex; align-items: flex-end; gap: 1.4em; height: 6.6em; padding: 1.4em 1.4em 0; background: linear-gradient(#edf2f6 1px, transparent 1px) 0 1.4em / 100% 1.5em; }
.rapp__chart > div { display: flex; flex: 1; align-items: flex-end; justify-content: center; height: 100%; }
.rapp__chart i { position: relative; width: 2.2em; height: var(--v); border-radius: .3em .3em 0 0; background: linear-gradient(180deg, #14968b, var(--a-teal)); }
.rapp__chart i.is-last { background: linear-gradient(180deg, #1aa898, #0b5f58); box-shadow: 0 .4em 1em -.4em rgba(15, 118, 110, .8); }
.rapp__chart i b { position: absolute; left: 50%; bottom: 100%; margin-bottom: .3em; transform: translateX(-50%); font-size: .72em; color: var(--a-ink2); white-space: nowrap; }
.rapp__chart-x { display: flex; gap: 1.4em; padding: .45em 1.4em .7em; border-top: 1px solid var(--a-ln); font-size: .72em; font-weight: 600; color: var(--a-ink2); }
.rapp__chart-x span { flex: 1; text-align: center; }
.rapp__legend { display: flex; gap: 1em; font-size: .72em; font-weight: 700; color: var(--a-ink2); }
.rapp__legend span { display: inline-flex; align-items: center; gap: .4em; }
.rapp__legend span::before { content: ""; width: .75em; height: .75em; border-radius: .15em; background: var(--c, var(--a-teal)); }

/* ---------- Dialog over a dimmed screen ---------- */
.rapp__dim { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; background: rgba(30, 41, 59, .4); }
.rapp__dialog { width: 30em; overflow: hidden; border-radius: .9em; background: #fff; box-shadow: 0 2.5em 5em -1.5em rgba(15, 23, 42, .55); }
.rapp__dialog-h { display: flex; align-items: center; gap: .75em; padding: .9em 1.1em; border-bottom: 1px solid var(--a-ln2); }
.rapp__dialog-h b { display: block; font-size: 1em; }
.rapp__dialog-h small { display: block; color: var(--a-mut); font-size: .76em; }
.rapp__dialog-h > .icon { margin-left: auto; color: var(--a-mut); }
.rapp__dialog-b { display: grid; gap: .7em; padding: 1em 1.1em; }
.rapp__kvs { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: .45em .8em; font-size: .82em; }
.rapp__kvs span { color: var(--a-mut); font-weight: 600; }
.rapp__msg { padding: .75em .85em; border-radius: .55em; border: 1px solid #cdd7e1; color: var(--a-ink2); font-size: .82em; line-height: 1.5; }
.rapp__attach { display: flex; align-items: center; gap: .6em; padding: .55em .7em; border-radius: .55em; background: #f4f7fa; color: var(--a-ink2); font-size: .8em; font-weight: 600; }
.rapp__attach i { display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: .4em; background: #fdecec; color: var(--a-red); font-size: .7em; font-weight: 800; }
.rapp__attach small { margin-left: auto; color: var(--a-mut); font-weight: 500; }
.rapp__dialog-f { display: flex; justify-content: flex-end; gap: .5em; padding: .85em 1.1em; border-top: 1px solid var(--a-ln2); background: #fafcfd; }

/* ---------- Care plan editor ---------- */
.rapp__cphead { display: flex; align-items: center; gap: .9em; padding: .85em 1em; }
.rapp__cphead b { display: inline; font-size: 1.04em; }
.rapp__cphead small { display: block; margin-top: .15em; color: var(--a-mut); font-size: .76em; }
.rapp__cpstats { display: flex; gap: .5em; margin-left: auto; }
.rapp__cpstats span { display: grid; gap: .1em; min-width: 5.6em; padding: .45em .75em; border-radius: .6em; border: 1px solid var(--a-ln); background: #f8fafc; color: var(--a-mut); font-size: .72em; font-weight: 700; }
.rapp__cpstats strong { color: var(--a-ink); font-size: 1.4em; }
.rapp__cpstats .is-total { border-color: var(--a-teal-ln); background: var(--a-teal-bg); }
.rapp__cpstats .is-total strong { color: var(--a-teal); }
.rapp__mins td { padding-block: .48em; }
.rapp__in { display: inline-grid; place-items: center; min-width: 3.3em; height: 2.15em; padding: 0 .4em; border-radius: .45em; border: 1px solid #cfd8e2; background: #fff; font-variant-numeric: tabular-nums; }
.rapp__in.is-empty { background: #f8fafc; color: #b3bfcc; }

/* ---------- Adult Day Care: participant month ---------- */
.rapp__act-head { display: flex; align-items: center; gap: 1.4em; padding: .8em 1em; border-bottom: 1px solid var(--a-ln2); }
.rapp__who { display: flex; align-items: center; gap: .65em; }
.rapp__ava { display: grid; place-items: center; width: 2.5em; height: 2.5em; flex: none; border-radius: 50%; background: #dff3ef; color: var(--a-teal); font-size: .82em; font-weight: 800; }
.rapp__who b { display: block; font-size: .95em; }
.rapp__who small { display: block; color: var(--a-mut); font-size: .74em; }
.rapp__metric small { display: block; color: var(--a-mut); font-size: .64em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.rapp__metric b { display: block; font-size: 1.2em; font-variant-numeric: tabular-nums; }
.rapp__metric--code b { padding-top: .2em; font-size: .9em; }
.rapp__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .45em; padding: .8em 1em 1em; }
.rapp__day { display: grid; gap: .28em; padding: .45em .5em .5em; border-radius: .55em; border: 1px solid var(--a-ln); background: #fff; }
.rapp__day.is-weekend { background: #f3f6f9; }
.rapp__day-h { display: flex; align-items: baseline; justify-content: space-between; }
.rapp__day-h strong { font-size: .9em; }
.rapp__day-h span { color: var(--a-mut); font-size: .62em; font-weight: 700; text-transform: uppercase; }
.rapp__val { display: flex; align-items: center; justify-content: space-between; gap: .3em; padding: .2em .4em; border-radius: .35em; background: #f1f5f9; color: var(--a-mut); font-size: .68em; }
.rapp__val b { color: var(--a-ink); font-size: 1.15em; }
.rapp__val.is-dc { background: #e9f7f3; }
.rapp__val.is-dc b { color: var(--a-teal); }
.rapp__val.is-tr { background: #edf3fd; }
.rapp__val.is-tr b { color: var(--a-blue); }
.rapp__val.is-hold { background: var(--a-amb-bg); }
.rapp__val.is-hold b { color: var(--a-amb); }
.rapp__val.is-off b { color: #a7b4c2; }

/* Attendance table: participants × days */
.rapp__att .d { display: inline-grid; place-items: center; width: 2.1em; height: 2.1em; border-radius: .45em; background: #e9f7f3; color: var(--a-teal); font-weight: 700; }
.rapp__att .d--h { background: var(--a-amb-bg); color: var(--a-amb); }
.rapp__att .d--off { background: transparent; color: #b6c1cd; font-weight: 500; }

/* ---------- Routes ---------- */
.rapp__stop { display: grid; grid-template-columns: 2.1em minmax(0, 1fr) auto auto; align-items: center; gap: .75em; padding: .55em 1em; border-top: 1px solid var(--a-ln2); font-size: .84em; }
.rapp__stop:first-child { border-top: 0; }
.rapp__stop > i { display: grid; place-items: center; width: 2.1em; height: 2.1em; border-radius: 50%; background: var(--a-teal); color: #fff; font-size: .9em; font-weight: 700; }
.rapp__stop b { display: block; }
.rapp__stop small { display: block; color: var(--a-mut); font-size: .86em; }
.rapp__time { color: var(--a-ink2); font-weight: 700; font-variant-numeric: tabular-nums; }
.rapp__kv { display: flex; align-items: center; justify-content: space-between; margin: .55em .85em 0; padding: .65em .8em; border-radius: .55em; border: 1px solid var(--a-ln); color: var(--a-ink2); font-size: .82em; font-weight: 700; }
.rapp__kv span { color: var(--a-ink); }
.rapp__kv .ok { color: var(--a-grn); }
.rapp__van { display: flex; align-items: center; gap: .6em; margin: .55em .85em 0; padding: .6em .8em; border-radius: .55em; background: #f4f7fa; color: var(--a-ink2); font-size: .8em; font-weight: 600; }
.rapp__van .icon { color: var(--a-teal); }
.rapp__van span { margin-left: auto; color: var(--a-mut); font-weight: 500; }

/* ---------- Owner analytics (Adult Day Care) ---------- */
.rapp__wk { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rapp__wk > div { position: relative; padding: .75em 1em .8em; border-left: 1px solid var(--a-ln2); }
.rapp__wk > div:first-child { border-left: 0; }
.rapp__wk small { display: block; color: var(--a-mut); font-size: .64em; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.rapp__wk b { display: block; font-size: 1.75em; font-weight: 700; line-height: 1.25; }
.rapp__wk em { display: block; color: var(--a-mut); font-size: .68em; }
.rapp__wk em.up { color: var(--a-grn); font-weight: 600; }
.rapp__wk svg { position: absolute; right: .9em; top: 2.1em; width: 4.6em; height: 1.6em; }
.rapp__big { display: flex; align-items: flex-start; justify-content: space-between; gap: 1em; padding: .8em 1em .7em; border-bottom: 1px solid var(--a-ln2); }
.rapp__big b { display: block; font-size: .98em; }
.rapp__big small { display: block; max-width: 30em; color: var(--a-mut); font-size: .72em; }
.rapp__big strong { display: block; color: var(--a-teal); font-size: 1.75em; font-weight: 800; line-height: 1; text-align: right; }
.rapp__big strong em { display: block; margin-bottom: .45em; color: var(--a-mut); font-size: .36em; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }

/* ---------- Phones and small frames: drop the rail, enlarge the type, let height follow content ---------- */
@container (max-width: 480px) {
  .rapp__win { grid-template-columns: minmax(0, 1fr); font-size: max(7.5px, calc(100cqw / 34)); height: auto; max-height: calc(var(--hs, 40) * 1em); }
  .rapp__rail, .rapp-hide-sm, .rapp__chips .rapp__chip + .rapp__chip, .rapp__table .rapp-col-sm { display: none !important; }
  .rapp__row { flex-direction: column; }
  .rapp__days { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rapp__wk { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rapp__wk > div:nth-child(3) { border-left: 0; border-top: 1px solid var(--a-ln2); }
  .rapp__wk > div:nth-child(4) { border-top: 1px solid var(--a-ln2); }
  .rapp__dialog { width: 92%; }
  .rapp__cphead { flex-wrap: wrap; }
  .rapp__cpstats { margin-left: 0; }
  .rapp__table th, .rapp__table td { padding-inline: .55em; }
  .rapp__in { min-width: 2.3em; }
}

/* =========================================================================
   RAVAD Docs: the signer phone (inc/app-mockups-docs.php). Same palette as the
   real signer app (teal #0f766e on #f1f5f9, 16px cards). Sized in em from the phone width.
   ========================================================================= */
.rphone { container-type: inline-size; display: block; width: 100%; }
.rphone__frame { position: relative; padding: 3.2%; border-radius: 13% / 6.2%; background: linear-gradient(160deg, #1e293b, #0b1220); box-shadow: 0 40px 80px -36px rgba(6, 58, 99, .55), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.rphone__screen {
  --p-teal: #0f766e; --p-teal-dk: #115e59; --p-soft: #f0fdfa; --p-ink: #0f172a; --p-text: #1e293b; --p-mut: #475569; --p-faint: #64748b; --p-ln: #dbe3ea; --p-bg: #f1f5f9; --p-ok: #067647; --p-ok-bg: #ecfdf3;
  position: relative; display: flex; flex-direction: column; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 10.5% / 5.9%;
  font-size: 12px; font-size: calc(100cqw / 22.5); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.4;
  color: var(--p-text); background: var(--p-bg); text-align: left; -webkit-user-select: none; user-select: none; cursor: default;
}
.rphone__screen *, .rphone__screen *::before, .rphone__screen *::after { box-sizing: border-box; }
.rphone__screen .icon { width: 1.1em; height: 1.1em; flex: none; stroke-width: 2; }
.rphone__screen b, .rphone__screen strong { font-weight: 700; }
.rphone__screen i, .rphone__screen em { font-style: normal; }
.rphone__screen p { margin: 0; }
.rphone__status { display: flex; align-items: center; justify-content: space-between; height: 2.6em; padding: 0 1.6em; flex: none; background: #fff; font-size: .78em; font-weight: 700; color: var(--p-ink); }
.rphone__status i { display: inline-flex; gap: .3em; align-items: center; }
.rphone__status i span { display: block; width: .95em; height: .6em; border-radius: .15em; background: var(--p-ink); }
.rphone__status i span + span { width: 1.6em; border-radius: .2em; }
.rphone__notch { position: absolute; left: 50%; top: .55em; width: 30%; height: 1.45em; border-radius: 1em; background: #0b1220; transform: translateX(-50%); }

/* Signer app shell: agency, step progress, footer */
.rphone__head { padding: .7em 1.1em .85em; flex: none; background: #fff; border-bottom: 1px solid var(--p-ln); }
.rphone__brand { display: flex; align-items: center; gap: .6em; }
.rphone__logo { display: grid; place-items: center; width: 2.3em; height: 2.3em; flex: none; border-radius: .6em; background: var(--p-soft); color: var(--p-teal); }
.rphone__brand b { display: block; font-size: .9em; color: var(--p-ink); }
.rphone__brand small { display: flex; align-items: center; gap: .3em; color: var(--p-faint); font-size: .7em; }
.rphone__brand small .icon { width: 1em; height: 1em; }
.rphone__prog { display: flex; align-items: baseline; justify-content: space-between; margin-top: .7em; font-size: .72em; color: var(--p-faint); }
.rphone__prog b { color: var(--p-ink); }
.rphone__track { display: flex; gap: .3em; margin-top: .4em; }
.rphone__track span { flex: 1; height: .32em; border-radius: 1em; background: #e2e8f0; }
.rphone__track span.done { background: var(--p-teal); }
.rphone__track span.cur { background: #5eb5ab; }
.rphone__main { flex: 1; min-height: 0; padding: 1em 1em .8em; overflow: hidden; }
.rphone__foot { display: flex; align-items: center; justify-content: center; gap: .35em; padding: .6em; flex: none; color: var(--p-faint); font-size: .66em; }
.rphone__foot .icon { width: 1.1em; height: 1.1em; color: var(--p-teal); }

/* Cards and controls */
.rphone__card { padding: 1.1em 1em; border-radius: 1em; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 .8em 2em -1.4em rgba(15, 23, 42, .4); }
.rphone__card h4 { margin: 0 0 .35em; color: var(--p-ink); font: 700 1.12em/1.25 system-ui, -apple-system, "Segoe UI", sans-serif; }
.rphone__card p { color: var(--p-mut); font-size: .8em; }
.rphone__label { display: block; margin: .9em 0 .35em; color: var(--p-ink); font-size: .78em; font-weight: 700; }
.rphone__input { display: flex; align-items: center; min-height: 2.7em; padding: 0 .8em; border-radius: .6em; border: 1px solid #b8c6d5; background: #fff; color: var(--p-ink); font-size: .9em; }
.rphone__input.is-focus { border-color: var(--p-teal); box-shadow: 0 0 0 .2em rgba(15, 118, 110, .2); }
.rphone__hint { display: block; margin-top: .35em; color: var(--p-faint); font-size: .7em; }
.rphone__btn { display: flex; align-items: center; justify-content: center; gap: .4em; min-height: 2.8em; margin-top: 1em; border-radius: .65em; background: var(--p-teal); color: #fff; font-size: .9em; font-weight: 700; }
.rphone__btn--ghost { background: #fff; border: 1px solid #b8c6d5; color: var(--p-text); }
.rphone__btns { display: grid; grid-template-columns: 1fr 1.6fr; gap: .5em; }
.rphone__btns .rphone__btn { margin-top: .9em; }
.rphone__code { display: grid; grid-template-columns: repeat(6, 1fr); gap: .35em; margin-top: .9em; }
.rphone__code span { display: grid; place-items: center; height: 2.7em; border-radius: .55em; border: 1px solid #b8c6d5; background: #fff; color: var(--p-ink); font-size: 1.1em; font-weight: 700; }
.rphone__code span.is-cur { border-color: var(--p-teal); box-shadow: 0 0 0 .18em rgba(15, 118, 110, .2); }
.rphone__choice { display: flex; align-items: center; gap: .55em; margin-top: .4em; padding: .65em .75em; border-radius: .6em; border: 1px solid var(--p-ln); background: #fff; font-size: .82em; }
.rphone__choice i { display: grid; place-items: center; width: 1.25em; height: 1.25em; flex: none; border-radius: 50%; border: 1.5px solid #b8c6d5; }
.rphone__choice.is-on { border-color: var(--p-teal); background: var(--p-soft); }
.rphone__choice.is-on i { border-color: var(--p-teal); background: var(--p-teal); box-shadow: inset 0 0 0 .22em #fff; }
.rphone__choice--box i { border-radius: .3em; }
.rphone__choice--box.is-on i { box-shadow: none; }
.rphone__choice--box.is-on i::after { content: ""; width: .55em; height: .3em; margin-top: -.15em; border: solid #fff; border-width: 0 0 .14em .14em; transform: rotate(-45deg); }
.rphone__row2 { display: grid; grid-template-columns: 1fr 1fr; gap: .4em; }
.rphone__sigpad { position: relative; height: 7em; margin-top: .4em; border-radius: .6em; border: 1px dashed #94a3b8; background: #f8fafc; }
.rphone__sigpad svg { position: absolute; left: 1em; top: .6em; width: calc(100% - 2em); height: calc(100% - 2.2em); }
.rphone__sigpad svg path { fill: none; stroke: #0f2a4a; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.rphone__sigpad small { position: absolute; left: 1em; right: 1em; bottom: .5em; padding-top: .3em; border-top: 1px solid #cbd5e1; color: var(--p-faint); font-size: .62em; }
.rphone__link { margin: 1em .4em 0 !important; color: var(--p-teal); font-size: .78em; font-weight: 600; text-align: center; }
.rphone__link span { color: var(--p-faint); font-weight: 400; }
.rphone__legal { display: block; margin-top: .7em; color: var(--p-faint); font-size: .66em; line-height: 1.45; }

/* Text message thread */
.rphone__sms-head { display: grid; justify-items: center; gap: .3em; padding: .4em 0 .8em; flex: none; background: #f8fafc; border-bottom: 1px solid var(--p-ln); }
.rphone__avatar { display: grid; place-items: center; width: 2.8em; height: 2.8em; border-radius: 50%; background: linear-gradient(140deg, #5eb5ab, var(--p-teal)); color: #fff; font-size: .9em; font-weight: 800; }
.rphone__sms-head b { font-size: .8em; color: var(--p-ink); }
.rphone__sms { display: grid; gap: .5em; padding: 1em .9em; }
.rphone__sms time { justify-self: center; color: var(--p-faint); font-size: .66em; }
.rphone__bubble { max-width: 86%; padding: .65em .8em; border-radius: 1.1em 1.1em 1.1em .3em; background: #e5e7eb; color: var(--p-ink); font-size: .8em; line-height: 1.4; }
.rphone__bubble u { color: #1d5bd8; word-break: break-all; }
.rphone__bubble--me { justify-self: end; border-radius: 1.1em 1.1em .3em 1.1em; background: #1d7cf2; color: #fff; }
.rphone__linkcard { max-width: 86%; overflow: hidden; border-radius: 1em; background: #fff; border: 1px solid var(--p-ln); }
.rphone__linkcard div { display: grid; place-items: center; height: 5.5em; background: linear-gradient(140deg, var(--p-soft), #dff3ef); color: var(--p-teal); }
.rphone__linkcard div .icon { width: 2.6em; height: 2.6em; stroke-width: 1.6; }
.rphone__linkcard p { padding: .55em .75em .65em; font-size: .72em; }
.rphone__linkcard p b { display: block; color: var(--p-ink); font-size: 1.1em; }

/* Document preview */
.rphone__doc { padding: 1.1em 1em; border-radius: .5em; background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }
.rphone__doc h5 { margin: 0 0 .2em; color: var(--p-ink); font-size: .86em; text-align: center; }
.rphone__doc small { display: block; margin-bottom: .8em; color: var(--p-faint); font-size: .62em; text-align: center; }
.rphone__doc i { display: block; height: .38em; margin: .45em 0; border-radius: 1em; background: #e2e8f0; }
.rphone__doc i.w9 { width: 92%; }
.rphone__doc i.w8 { width: 80%; }
.rphone__doc i.w6 { width: 62%; }
.rphone__doc i.w4 { width: 40%; }
.rphone__doc .ans { display: flex; justify-content: space-between; margin: .45em 0; padding: .35em .5em; border-radius: .35em; background: var(--p-soft); color: var(--p-teal-dk); font-size: .66em; font-weight: 700; }
.rphone__doc .ans span { color: var(--p-faint); font-weight: 600; }
.rphone__doc .sig { margin-top: .9em; padding-top: .3em; border-top: 1px solid #cbd5e1; color: var(--p-faint); font-size: .6em; }
.rphone__dl { display: flex; align-items: center; justify-content: space-between; margin-top: .7em; color: var(--p-teal); font-size: .76em; font-weight: 700; }

/* Done */
.rphone__done { display: grid; justify-items: center; gap: .5em; padding: 1.6em 1em 1.2em; text-align: center; }
.rphone__done > i { display: grid; place-items: center; width: 3.6em; height: 3.6em; border-radius: 50%; background: var(--p-ok-bg); color: var(--p-ok); }
.rphone__done > i .icon { width: 1.8em; height: 1.8em; stroke-width: 2.4; }
.rphone__done h4 { margin: .2em 0 0; }
.rphone__next { display: grid; gap: .55em; margin-top: .9em; }
.rphone__next div { display: flex; gap: .6em; align-items: flex-start; font-size: .76em; color: var(--p-mut); text-align: left; }
.rphone__next div b { display: grid; place-items: center; width: 1.7em; height: 1.7em; flex: none; border-radius: 50%; background: var(--p-soft); color: var(--p-teal); font-size: .9em; }

/* Evidence record (a page, not a phone) */
.rpaper { container-type: inline-size; display: block; width: 100%; }
.rpaper__sheet { position: relative; aspect-ratio: 8.5 / 9.4; padding: 7% 7.5%; border-radius: 6px; background: #fff; box-shadow: 0 40px 80px -36px rgba(6, 58, 99, .45), 0 0 0 1px #dbe3ea; font-size: 12px; font-size: calc(100cqw / 32); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #1e293b; text-align: left; -webkit-user-select: none; user-select: none; }
.rpaper__sheet *, .rpaper__sheet *::before, .rpaper__sheet *::after { box-sizing: border-box; }
.rpaper__top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 1em; border-bottom: 2px solid #0f766e; }
.rpaper__top b { display: block; color: #0f172a; font-size: 1.35em; }
.rpaper__top small { color: #64748b; font-size: .8em; }
.rpaper__seal { display: grid; place-items: center; width: 3.4em; height: 3.4em; border-radius: 50%; background: #ecfdf3; color: #067647; }
.rpaper__seal .icon { width: 1.8em; height: 1.8em; stroke-width: 2.2; }
.rpaper__kv { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: .45em 1em; margin: 1.2em 0; font-size: .88em; }
.rpaper__kv span { color: #64748b; }
.rpaper__kv b { color: #0f172a; font-weight: 600; }
.rpaper h6 { margin: 1.3em 0 .6em; color: #0f172a; font-size: .8em; letter-spacing: .08em; text-transform: uppercase; }
.rpaper__log { display: grid; border: 1px solid #e2e8f0; border-radius: .6em; overflow: hidden; }
.rpaper__log div { display: grid; grid-template-columns: 5.6em 1.6em minmax(0, 1fr); align-items: center; gap: .6em; padding: .62em .9em; border-top: 1px solid #e2e8f0; font-size: .84em; }
.rpaper__log div:first-child { border-top: 0; }
.rpaper__log time { color: #64748b; font-variant-numeric: tabular-nums; }
.rpaper__log i { display: grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: #ecfdf5; color: #0f766e; }
.rpaper__log i .icon { width: .95em; height: .95em; stroke-width: 2.6; }
.rpaper__log div:last-child { background: #f0fdfa; color: #115e59; font-weight: 700; }

/* Phone groups in heroes and feature rows */
.phones { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: 5%; padding: 0 4%; }
.phones > * { flex: 0 0 43%; }
.phones > *:nth-child(2) { transform: translateY(-7%); }
.phones--paper > * { flex-basis: 66%; }
.phones--hero { gap: 0; padding: 0; }
.phones--hero > * { flex: 0 0 37%; }
.phones--hero > *:nth-child(1) { z-index: 1; transform: translate(14%, 6%) rotate(-4deg); }
.phones--hero > *:nth-child(2) { z-index: 3; transform: translateY(-4%); }
.phones--hero > *:nth-child(3) { z-index: 2; transform: translate(-14%, 6%) rotate(4deg); }
@media (max-width: 560px) {
  .phones { gap: 3%; padding: 0; }
  .phones > * { flex-basis: 48%; }
  .phones--hero > * { flex-basis: 46%; }
  .phones--hero > *:nth-child(3) { display: none; }
}

/* =========================================================================
   M-edi cards (inc/app-mockups-medi.php): single panels of the M-edi app, shown
   large like the Docs phones. Dark bar = the app's sidebar; teal accent, pill badges.
   ========================================================================= */
.rcard { container-type: inline-size; display: block; width: 100%; }
.rcard__win {
  --m-teal: #0f766e; --m-teal-soft: #f0fdfa; --m-ink: #0f172a; --m-mut: #64748b; --m-ln: #e2e8f0; --m-bg: #f8fafc;
  --m-ok: #16a34a; --m-ok-bg: #f0fdf4; --m-warn: #b45309; --m-warn-bg: #fffbeb; --m-bad: #dc2626; --m-bad-bg: #fef2f2; --m-info: #1d5bd8; --m-info-bg: #eff6ff;
  position: relative; display: flex; flex-direction: column; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 6.5% / 4.9%;
  font-size: 12px; font-size: calc(100cqw / 22.5); font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.4;
  color: var(--m-ink); background: #fff; text-align: left; -webkit-user-select: none; user-select: none; cursor: default;
  box-shadow: 0 40px 80px -36px rgba(6, 58, 99, .5), 0 0 0 1px rgba(15, 23, 42, .06);
}
.rcard__win *, .rcard__win *::before, .rcard__win *::after { box-sizing: border-box; }
.rcard__win .icon { width: 1.1em; height: 1.1em; flex: none; stroke-width: 2; }
.rcard__win b, .rcard__win strong { font-weight: 700; }
.rcard__win i, .rcard__win em { font-style: normal; }
.rcard__win p { margin: 0; }

/* Dark bar: the app sidebar in one line */
.rcard__bar { display: flex; align-items: center; gap: .5em; height: 2.9em; padding: 0 1.1em; flex: none; background: #0f172a; color: #e2e8f0; font-size: .82em; }
.rcard__logo { display: grid; place-items: center; width: 1.8em; height: 1.8em; border-radius: .5em; background: #14b8a6; color: #0f172a; font-weight: 800; }
.rcard__bar b { color: #fff; }
.rcard__bar span:not(.rcard__logo) { color: #94a3b8; }
.rcard__bar span:not(.rcard__logo)::before { content: "·"; margin-right: .5em; }
.rcard__bar i { width: .42em; height: .42em; border-radius: 50%; background: #334155; }
.rcard__bar i:first-of-type { margin-left: auto; }

/* Header, list, footer */
.rcard__head { display: flex; align-items: center; gap: .7em; padding: 1em 1.1em .85em; flex: none; border-bottom: 1px solid var(--m-ln); }
.rcard__head > div { flex: 1; min-width: 0; }
.rcard__head b { display: block; font-size: 1.12em; line-height: 1.25; }
.rcard__head small { display: block; margin-top: .1em; color: var(--m-mut); font-size: .74em; }
.rcard__pill { display: inline-flex; align-items: center; gap: .35em; flex: none; padding: .26em .7em; border-radius: 100px; font-size: .7em; font-weight: 700; white-space: nowrap; }
.rcard__pill::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: currentColor; }
.rcard__pill--ok { background: var(--m-ok-bg); color: var(--m-ok); }
.rcard__pill--warn { background: var(--m-warn-bg); color: var(--m-warn); }
.rcard__pill--bad { background: var(--m-bad-bg); color: var(--m-bad); }
.rcard__pill--info { background: var(--m-info-bg); color: var(--m-info); }
.rcard__list { flex: 1; min-height: 0; }
.rcard__item { display: flex; align-items: center; gap: .65em; padding: .62em 1.1em; border-top: 1px solid var(--m-ln); }
.rcard__item:first-child { border-top: 0; }
.rcard__item > div { flex: 1; min-width: 0; }
.rcard__item b { display: block; font-size: .86em; }
.rcard__item small { display: block; overflow: hidden; color: var(--m-mut); font-size: .72em; white-space: nowrap; text-overflow: ellipsis; }
.rcard__ava { display: grid; place-items: center; width: 2.3em; height: 2.3em; flex: none; border-radius: 50%; background: var(--m-teal-soft); color: var(--m-teal); font-size: .74em; font-weight: 800; }
.rcard__item.is-err { background: #fff7f7; }
.rcard__item.is-err small { color: var(--m-bad); font-weight: 600; }
.rcard__item.is-err .rcard__ava { background: var(--m-bad-bg); color: var(--m-bad); }
.rcard__item.is-hl { background: #f3fbf9; box-shadow: inset .22em 0 0 var(--m-teal); }
.rcard__foot { display: grid; padding: .85em 1.1em 1em; flex: none; margin-top: auto; border-top: 1px solid var(--m-ln); background: var(--m-bg); }
.rcard__foot--2 { grid-template-columns: 1fr 1.5fr; gap: .5em; }
.rcard__btn { display: flex; align-items: center; justify-content: center; min-height: 2.6em; border-radius: .55em; background: var(--m-teal); color: #fff; font-size: .84em; font-weight: 700; }
.rcard__btn--ghost { background: #fff; border: 1px solid #cbd5e1; color: var(--m-ink); }

/* Submit batch */
.rcard__center { display: grid; justify-items: center; gap: .45em; padding: 1.6em 1.3em 1em; text-align: center; }
.rcard__badge { display: grid; place-items: center; width: 3.2em; height: 3.2em; border-radius: 50%; background: var(--m-teal-soft); color: var(--m-teal); }
.rcard__badge .icon { width: 1.5em; height: 1.5em; }
.rcard__center b { font-size: 1.2em; }
.rcard__center p { color: var(--m-mut); font-size: .8em; }
.rcard__sum { display: grid; grid-template-columns: 1fr 1fr; gap: .5em; padding: .4em 1.1em 1em; }
.rcard__sum--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: .9em; padding-bottom: .2em; }
.rcard__sum span { padding: .65em .75em; border-radius: .7em; border: 1px solid #ccebe5; background: var(--m-teal-soft); }
.rcard__sum span.is-warn { border-color: #fde3b5; background: var(--m-warn-bg); }
.rcard__sum small { display: block; color: var(--m-mut); font-size: .66em; font-weight: 700; }
.rcard__sum b { display: block; font-size: 1.2em; }
.rcard__sum b.ok { color: var(--m-ok); }
.rcard__sum em { display: block; color: var(--m-mut); font-size: .7em; }

/* Client form */
.rcard__search { display: flex; align-items: center; gap: .5em; margin: .8em 1.1em .3em; padding: .55em .75em; border-radius: .55em; border: 1px solid #cbd5e1; color: #94a3b8; font-size: .76em; }
.rcard__tabs { display: flex; gap: 1.2em; padding: 0 1.1em; border-bottom: 1px solid var(--m-ln); font-size: .8em; font-weight: 600; color: var(--m-mut); }
.rcard__tabs span { padding: .6em 0; }
.rcard__tabs .is-on { color: var(--m-teal); box-shadow: inset 0 -2px 0 var(--m-teal); }
.rcard__form { display: grid; gap: .45em; padding: .9em 1.1em; }
.rcard__row2 { display: grid; grid-template-columns: 1.3fr 1fr; gap: .45em; }
.rcard__fld { display: block; padding: .45em .75em; border-radius: .55em; border: 1px solid #cbd5e1; background: #fff; }
.rcard__fld small { display: block; color: var(--m-mut); font-size: .64em; font-weight: 700; }
.rcard__fld b { font-size: .88em; font-weight: 600; }
.rcard__fld.is-err { border-color: #f5a3a3; background: #fff7f7; }
.rcard__fld.is-warn { border-color: #f5c77e; background: #fffbf0; }
.rcard__msg { margin: -.15em 0 .15em !important; font-size: .72em; font-weight: 600; }
.rcard__msg--err { color: var(--m-bad); }
.rcard__msg--warn { color: var(--m-warn); }
.rcard__chips { display: flex; flex-wrap: wrap; align-items: center; gap: .35em; font-size: .74em; }
.rcard__chips small { margin-right: .2em; color: var(--m-mut); font-weight: 700; }
.rcard__chips span { padding: .22em .65em; border-radius: 100px; background: #f1f5f9; font-weight: 600; }
.rcard__chips .is-primary { background: #ccfbf1; color: #115e59; }

/* Eligibility */
.rcard__seg { display: flex; margin: .9em 1.1em .1em; padding: .2em; border-radius: .6em; background: #f1f5f9; font-size: .76em; font-weight: 600; color: var(--m-mut); }
.rcard__seg span { flex: 1; padding: .45em; border-radius: .45em; text-align: center; }
.rcard__seg .is-on { background: #fff; color: var(--m-teal); box-shadow: 0 1px 2px rgba(15, 23, 42, .12); }
.rcard__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: .7em 1.1em; border-radius: .7em; border: 1px solid var(--m-ln); }
.rcard__stats span { padding: .5em .7em; border-left: 1px solid var(--m-ln); }
.rcard__stats span:first-child { border-left: 0; }
.rcard__stats small { display: block; color: var(--m-mut); font-size: .64em; font-weight: 700; }
.rcard__stats b { font-size: 1.25em; }
.rcard__stats b.ok { color: var(--m-ok); }

/* Timeline */
.rcard__tl { position: relative; display: grid; padding: .7em 1.1em 1em 2.6em; }
.rcard__tl::before { content: ""; position: absolute; left: 1.55em; top: 1.35em; bottom: 1.9em; width: 2px; background: #bbf7d0; }
.rcard__tl div { position: relative; padding: .42em 0; }
.rcard__tl i { position: absolute; left: -1.38em; top: .7em; width: .8em; height: .8em; border-radius: 50%; background: var(--m-ok); box-shadow: 0 0 0 .22em #fff; }
.rcard__tl b { display: block; font-size: .84em; }
.rcard__tl small { display: block; color: var(--m-mut); font-size: .72em; }
.rcard__tl .is-final i { left: -1.5em; top: .58em; width: 1.05em; height: 1.05em; box-shadow: 0 0 0 .22em #fff, 0 0 0 .48em rgba(22, 163, 74, .22); }
.rcard__tl .is-final b { color: #15803d; }

/* Payments */
.rcard__dots { display: flex; align-items: center; gap: .35em; margin: .9em 1.1em 0; padding: .55em .75em; border-radius: .6em; background: var(--m-info-bg); color: var(--m-info); font-size: .74em; font-weight: 600; }
.rcard__dots i { width: .75em; height: .75em; border-radius: 50%; border: 2px solid currentColor; }
.rcard__dots i.is-on { background: currentColor; }
.rcard__dots span { margin-left: .4em; }
.rcard__money { display: grid; gap: .5em; padding: 1em 1.1em .6em; }
.rcard__money span { display: flex; align-items: baseline; justify-content: space-between; padding: .7em .85em; border-radius: .7em; background: var(--m-bg); border: 1px solid var(--m-ln); color: var(--m-mut); font-size: .8em; font-weight: 600; }
.rcard__money b { color: var(--m-ink); font-size: 1.45em; }
.rcard__money b.ok { color: var(--m-ok); }
.rcard__money b.bad { color: var(--m-bad); }
.rcard__meter { height: .6em; margin: .3em 1.1em 0; border-radius: 1em; background: var(--m-bad-bg); overflow: hidden; }
.rcard__meter i { display: block; width: var(--w); height: 100%; border-radius: 1em; background: var(--m-ok); }
.rcard__note { padding: .45em 1.1em 0; color: var(--m-mut); font-size: .72em; font-weight: 600; }
.rcard__note--pad { padding: .7em 1.1em 1em; }

/* Home Care and Adult Day Care bars: the apps' dark teal */
.rcard--hc .rcard__bar, .rcard--adc .rcard__bar { background: #0b4f49; }
.rcard--hc .rcard__logo, .rcard--adc .rcard__logo { background: rgba(255, 255, 255, .16); color: #fff; }
.rcard__logo .icon { width: 1.05em; height: 1.05em; }
.rcard--hc .rcard__bar span:not(.rcard__logo), .rcard--adc .rcard__bar span:not(.rcard__logo) { color: #9fd3ca; }
.rcard--hc .rcard__bar i, .rcard--adc .rcard__bar i { background: rgba(255, 255, 255, .2); }
.rcard__stats b.warn { color: var(--m-warn); }
.rcard__num { flex: none; color: var(--m-ink); font-size: .86em; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Care plan minutes grid */
.rcard__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(5, minmax(0, 1fr)); gap: .35em .3em; align-items: center; padding: .6em 1.1em .9em; }
.rcard__grid > span { color: var(--m-mut); font-size: .66em; font-weight: 700; text-align: center; }
.rcard__grid > b { font-size: .78em; }
.rcard__grid > i { display: grid; place-items: center; height: 2.1em; border-radius: .45em; border: 1px solid #cbd5e1; background: #fff; font-size: .8em; font-weight: 600; font-variant-numeric: tabular-nums; }
.rcard__grid > i.is-empty { border-style: dashed; background: var(--m-bg); color: #b6c2cf; }

/* Timesheet: file and message */
.rcard__file { display: flex; align-items: center; gap: .6em; padding: .55em .7em; border-radius: .6em; background: var(--m-bg); border: 1px solid var(--m-ln); }
.rcard__file > i { display: grid; place-items: center; width: 2.4em; height: 2.4em; flex: none; border-radius: .45em; background: var(--m-bad-bg); color: var(--m-bad); font-size: .66em; font-weight: 800; }
.rcard__file b { display: block; font-size: .8em; }
.rcard__file small { display: block; color: var(--m-mut); font-size: .7em; }
.rcard__quote { padding: .65em .75em; border-radius: .6em; border-left: .22em solid var(--m-teal); background: var(--m-teal-soft); color: #134e4a; font-size: .74em; line-height: 1.5; }

/* Payroll: overtime by week */
.rcard__weeks { display: grid; gap: .55em; padding: .9em 1.1em .3em; }
.rcard__weeks > div { position: relative; display: flex; align-items: center; gap: .6em; padding: .6em .75em .95em; border-radius: .7em; border: 1px solid var(--m-ln); }
.rcard__weeks span { flex: 1; }
.rcard__weeks b { display: block; font-size: .84em; }
.rcard__weeks small { display: block; color: var(--m-mut); font-size: .7em; }
.rcard__weeks em { padding: .2em .6em; border-radius: 100px; background: var(--m-ok-bg); color: var(--m-ok); font-size: .72em; font-weight: 700; }
.rcard__weeks i { position: absolute; left: .75em; right: .75em; bottom: .45em; height: .3em; border-radius: 1em; background: linear-gradient(90deg, #99d5cd var(--r), var(--m-ok) var(--r)); }
.rcard__form .rcard__rule { margin: .2em 0 0; }
.rcard__rule { display: flex; align-items: center; gap: .5em; margin: .5em 1.1em .1em; padding: .55em .7em; border-radius: .6em; background: var(--m-info-bg); color: var(--m-info); font-size: .72em; }

/* Owner: billing by month */
.rcard__chart { display: flex; align-items: flex-end; gap: .7em; flex: 1; min-height: 0; padding: 1.8em 1.1em 1em; background: linear-gradient(#eef2f6 1px, transparent 1px) 0 1.8em / 100% 2.6em; }
.rcard__chart > div { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: flex-end; gap: .4em; height: 100%; }
.rcard__chart i { position: relative; width: 100%; max-width: 2.4em; height: var(--v); border-radius: .35em .35em 0 0; background: linear-gradient(180deg, #2bb3a3, var(--m-teal)); }
.rcard__chart i.is-last { background: linear-gradient(180deg, #1fc7b2, #0b4f49); box-shadow: 0 .4em 1em -.4em rgba(15, 118, 110, .8); }
.rcard__chart i b { position: absolute; left: 50%; bottom: 100%; margin-bottom: .3em; transform: translateX(-50%); color: var(--m-ink); font-size: .64em; white-space: nowrap; }
.rcard__chart span { color: var(--m-mut); font-size: .68em; font-weight: 700; }

/* Adult Day Care: month calendar and week table */
.rcard__cal { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .3em; padding: .7em 1.1em .3em; }
.rcard__cal > span { color: var(--m-mut); font-size: .62em; font-weight: 700; text-align: center; text-transform: uppercase; }
.rcard__cal > i { position: relative; display: grid; place-items: center; height: 2.05em; border-radius: .45em; background: var(--m-teal-soft); color: var(--m-teal); font-size: .8em; font-weight: 800; }
.rcard__cal > i b { position: absolute; left: .35em; top: .15em; color: var(--m-mut); font-size: .56em; font-weight: 600; }
.rcard__cal > i.is-h { background: var(--m-warn-bg); color: var(--m-warn); }
.rcard__cal > i.is-off { background: #f1f5f9; color: #b6c2cf; }
.rcard__cal > i.is-pad { visibility: hidden; }
.rcard__legend { display: flex; gap: 1em; padding: .3em 1.1em 0; color: var(--m-teal); font-size: .64em; font-weight: 700; }
.rcard__legend .h { color: var(--m-warn); }
.rcard__att { display: grid; grid-template-columns: minmax(0, 2.4fr) repeat(5, minmax(0, 1fr)); gap: .35em .3em; align-items: center; padding: .8em 1.1em; }
.rcard__att > span { color: var(--m-mut); font-size: .64em; font-weight: 700; text-align: center; }
.rcard__att > b { overflow: hidden; font-size: .78em; white-space: nowrap; text-overflow: ellipsis; }
.rcard__att > i { display: grid; place-items: center; height: 2em; border-radius: .45em; background: var(--m-teal-soft); color: var(--m-teal); font-size: .78em; font-weight: 800; }
.rcard__att > i.is-h { background: var(--m-warn-bg); color: var(--m-warn); }
.rcard__att > i.is-off { background: transparent; color: #c3ccd6; font-weight: 500; }
.rcard__list--route .rcard__ava { background: var(--m-teal); color: #fff; }
.rcard__days { display: flex; gap: .18em; flex: none; }
.rcard__days i { display: grid; place-items: center; width: 1.45em; height: 1.45em; border-radius: .3em; background: #f1f5f9; color: #b6c2cf; font-size: .62em; font-weight: 800; }
.rcard__days i.is-on { background: var(--m-teal); color: #fff; }
.rcard__dl { display: grid; place-items: center; width: 2.1em; height: 2.1em; flex: none; border-radius: .5em; border: 1px solid #b9e3d9; background: var(--m-teal-soft); color: var(--m-teal); }
.rcard__dl .icon { width: 1em; height: 1em; }

/* Adult Day Care owner: tiles and attendance bars */
.rcard__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .55em; flex: 1; padding: 1em 1.1em 1.1em; }
.rcard__tiles span { display: flex; flex-direction: column; justify-content: center; padding: .7em .85em; border-radius: .8em; border: 1px solid var(--m-ln); background: var(--m-bg); }
.rcard__tiles small { color: var(--m-mut); font-size: .64em; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.rcard__tiles b { font-size: 1.9em; line-height: 1.2; }
.rcard__tiles em { color: var(--m-ok); font-size: .68em; font-weight: 600; }
.rcard__bars { display: grid; gap: .65em; padding: 1em 1.1em .6em; }
.rcard__bars > div { display: grid; grid-template-columns: 2.4em minmax(0, 1fr) 4.4em; align-items: center; gap: .6em; }
.rcard__bars b { font-size: .78em; }
.rcard__bars i { height: .7em; border-radius: 1em; background: linear-gradient(90deg, var(--m-teal) var(--w), #e2e8f0 var(--w)); }
.rcard__bars span { color: var(--m-mut); font-size: .7em; font-weight: 600; text-align: right; }