/* Layout: left nav + role workspace (focus panel + side pane). Clinical, calm, high legibility. */
:root {
  --bg: #f4f6f8; --panel: #ffffff; --panel2: #eef1f4; --line: #d8dee5; --fg: #1b2430; --muted: #5b6878;
  --accent: #0e7c86; --accent-fg: #ffffff; --accent-soft: #d9eff1;
  --ok: #2e8b57; --ok-soft: #dcf3e4; --warn: #b7791f; --warn-soft: #fbefd6; --bad: #c0392b; --bad-soft: #fadbd8;
  --purple: #e4d9f7; --purple-t: #5a3fa0; --pink: #fbdce6; --pink-t: #a8325a; --blue: #d6e6fa; --blue-t: #2d5fa8; --sky: #d7f0f7; --sky-t: #1a6b80; --green: #dcf3e4; --green-t: #2e7d4f; --amber: #fbe9c7; --amber-t: #9a6b12; --teal: #d3f1ec; --teal-t: #1b6f62; --red: #fbdad6; --red-t: #a8322a; --grey: #e8e9ed; --grey-t: #4b5160;
  --v1: #2d7dd2; --v2: #e27d2b; --v3: #7b53c1; --v4: #2e9c6e; --v5: #c2417d;
  --o: #0e7c86; --i: #7fb3b8; --n: #c9a227;
  --shadow: 0 1px 2px rgba(20,30,40,.06), 0 4px 14px rgba(20,30,40,.06);
  --r: 10px;
  --font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: var(--font); /* no monospace font anywhere (Chris, 2026-10-06: "never use it"); numbers stay aligned with tabular figures */
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #121820; --panel: #1a222c; --panel2: #222c38; --line: #2e3a48; --fg: #e6ebf1; --muted: #98a6b6;
  --accent: #3fb3bd; --accent-fg: #0b1a1c; --accent-soft: #163a3e;
  --ok: #5fc98a; --ok-soft: #1c3a2a; --warn: #e0a84a; --warn-soft: #3d2f12; --bad: #e8705f; --bad-soft: #43201c;
  --purple: #3a2f5e; --purple-t: #cdbdf5; --pink: #5a2a3c; --pink-t: #f5b6cb; --blue: #263c5e; --blue-t: #a9c8f5; --sky: #1d3e48; --sky-t: #9ad8e8; --green: #1f3d2b; --green-t: #9fdcb5; --amber: #46361a; --amber-t: #f0cc80; --teal: #1c3f3a; --teal-t: #8fdccf; --red: #4a2522; --red-t: #f3a79f; --grey: #343846; --grey-t: #c6cad6;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.35);
  color-scheme: dark;
} }
:root[data-theme="dark"] {
  --bg: #121820; --panel: #1a222c; --panel2: #222c38; --line: #2e3a48; --fg: #e6ebf1; --muted: #98a6b6;
  --accent: #3fb3bd; --accent-fg: #0b1a1c; --accent-soft: #163a3e;
  --ok: #5fc98a; --ok-soft: #1c3a2a; --warn: #e0a84a; --warn-soft: #3d2f12; --bad: #e8705f; --bad-soft: #43201c;
  --purple: #3a2f5e; --purple-t: #cdbdf5; --pink: #5a2a3c; --pink-t: #f5b6cb; --blue: #263c5e; --blue-t: #a9c8f5; --sky: #1d3e48; --sky-t: #9ad8e8; --green: #1f3d2b; --green-t: #9fdcb5; --amber: #46361a; --amber-t: #f0cc80; --teal: #1c3f3a; --teal-t: #8fdccf; --red: #4a2522; --red-t: #f3a79f; --grey: #343846; --grey-t: #c6cad6;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.35);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 14px/1.45 var(--font); }
h1, h2, h3 { margin: 0; text-wrap: balance; font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: 22px; } h2 { font-size: 18px; } h3 { font-size: 14px; margin-bottom: 8px; }
p { margin: 0 0 8px; }
small, .sm { font-size: 12px; }
.muted { color: var(--muted); } .warn { color: var(--warn); } .ok { color: var(--ok); }
.mono { font-family: inherit; font-size: 13px; font-variant-numeric: tabular-nums; }
code, kbd, pre, samp { font-family: inherit; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.mt { margin-top: 14px; }
a { color: var(--accent); cursor: pointer; }
button { font: inherit; color: inherit; cursor: pointer; border: 1px solid var(--line); background: var(--panel); border-radius: 8px; padding: 7px 12px; transition: background .12s, border-color .12s; }
button:hover { background: var(--panel2); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button.primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); font-weight: 600; }
button.primary:hover { filter: brightness(1.06); }
button.ghost { background: transparent; }
button.danger { background: var(--bad); color: #fff; border-color: var(--bad); }
button.sm { padding: 4px 9px; font-size: 12.5px; border-radius: 7px; }
button.link { border: 0; background: none; padding: 0; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
button.x { border: 0; background: none; font-size: 20px; line-height: 1; padding: 2px 6px; color: var(--muted); }
button:disabled { opacity: .45; cursor: default; }
input, select, textarea { font: inherit; color: inherit; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; }
textarea { width: 100%; resize: vertical; line-height: 1.5; }
label.field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
label.field.inline { flex-direction: row; align-items: center; gap: 8px; }
kbd { font-family: var(--mono); font-size: 11px; background: var(--panel2); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; margin-right: 6px; }
.row { display: flex; align-items: center; } .row.gap { gap: 8px; } .row.between { justify-content: space-between; } .row.end { justify-content: flex-end; } .row.wrap { flex-wrap: wrap; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.scroll-x { overflow-x: auto; }
ul.plain { list-style: none; margin: 0; padding: 0; } ul.plain li { display: flex; gap: 8px; justify-content: space-between; padding: 4px 0; border-bottom: 1px dashed var(--line); } ul.plain li:last-child { border: 0; }

/* top bar + shell */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; display: flex; align-items: center; gap: 16px; padding: 8px 16px; background: var(--panel); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; } .brand .mark { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--accent); color: var(--accent-fg); font-weight: 700; }
.brand small { display: block; color: var(--muted); font-size: 11px; }
.role-switch { display: flex; gap: 2px; background: var(--panel2); padding: 3px; border-radius: 10px; margin-left: auto; }
.role-switch button { border: 0; background: transparent; padding: 5px 12px; border-radius: 8px; font-weight: 500; }
.role-switch button.on { background: var(--panel); box-shadow: var(--shadow); color: var(--accent); }
.top-right { display: flex; align-items: center; gap: 12px; margin-left: auto; } .who { font-weight: 600; }
.shell { display: grid; grid-template-columns: 168px minmax(0, 1fr); min-height: calc(100% - 50px); }
.side { position: sticky; top: 50px; align-self: start; height: calc(100vh - 50px); overflow-y: auto; padding: 10px 8px; display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--line); background: var(--panel); }
.side button { display: flex; align-items: center; gap: 9px; border: 0; background: transparent; padding: 8px 10px; border-radius: 8px; text-align: left; position: relative; }
.side button.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.badge { margin-left: auto; font-style: normal; background: var(--bad); color: #fff; font-size: 11px; border-radius: 10px; padding: 0 6px; } .badge.soft { background: var(--panel2); color: var(--fg); }
main { padding: 16px 18px 40px; min-width: 0; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.search { width: 260px; }

/* workspace */
.ws { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.ws-dent { grid-template-columns: minmax(0, 1fr) 360px; }
.focus { min-width: 0; }
.sidepane { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; position: sticky; top: 60px; max-height: calc(100vh - 72px); overflow-y: auto; }
.pane-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; } .pane-h small { color: var(--muted); }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: 12px 0 14px; overflow: visible; } /* tabs wrap instead of scrolling: the old overflow showed a stray scroll bar on Windows (Chris 2026-10-14: "is this necessary?") */
.tabs button { border: 0; background: none; border-radius: 0; padding: 8px 12px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs button.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

/* chart header */
.chart-head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.ch-main { flex: 1; min-width: 200px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 13px; flex: none; }
.avatar.lg { width: 48px; height: 48px; font-size: 16px; }
.chip-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.chip { font-size: 12px; line-height: 18px; padding: 2px 9px; border-radius: 999px; background: var(--panel2); border: 1px solid var(--line); display: inline-flex; align-items: center; white-space: nowrap; }
.chip.ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; } .chip.bad { background: var(--bad-soft); color: var(--bad); border-color: transparent; }
.chip.alert, .alert { background: var(--bad-soft); color: var(--bad); border-color: transparent; font-weight: 600; }
.alert:not(.chip) { padding: 6px 10px; border-radius: 8px; margin: 6px 0; }
.tag { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; background: var(--accent); color: var(--accent-fg); padding: 1px 5px; border-radius: 4px; }
.banner { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: var(--amber); color: var(--amber-t); padding: 8px 12px; border-radius: 8px; margin-top: 10px; }
.banner .link { color: inherit; font-weight: 600; }

/* cards */
.cardgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.ccard { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; text-align: left; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--shadow); min-height: 120px; }
button.ccard:hover { border-color: var(--accent); }
.ccard.wide2 { grid-column: span 2; }
.ccard.accent { background: var(--accent-soft); border-color: transparent; color: var(--accent); } .ccard.accent .ccard-h { color: var(--accent); }
.ccard-h { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; }
.big { font-size: 28px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; } .big small { font-size: 13px; color: var(--muted); font-weight: 500; }
.dcard { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: 13px; } .kv dt { color: var(--muted); } .kv dd { margin: 0; font-variant-numeric: tabular-nums; }
.interval { display: flex; align-items: baseline; gap: 6px; } .interval b { font-size: 44px; line-height: 1; font-weight: 700; color: var(--accent); } .interval span { color: var(--muted); }
.cleanings { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 6px 0; }
.cdate { background: var(--panel2); border-radius: 8px; padding: 6px 10px; text-align: center; min-width: 64px; } .cdate b { display: block; } .cdate small { color: var(--muted); }
.cgap { flex: 1; min-width: 48px; position: relative; text-align: center; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; } .cgap::before { content: ""; position: absolute; left: 4px; right: 4px; top: 50%; border-top: 2px dotted var(--line); z-index: 0; } .cgap span { position: relative; background: var(--panel); padding: 0 4px; z-index: 1; } .cgap.late span { color: var(--warn); font-weight: 600; }
.workdone .wd-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .workdone .wd-row > span { color: var(--muted); min-width: 92px; font-size: 13px; }
.workdone.isdone { background: var(--ok-soft); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; } .seg button { border: 0; border-radius: 0; padding: 5px 11px; border-right: 1px solid var(--line); } .seg button:last-child { border-right: 0; } .seg button.on { background: var(--accent); color: var(--accent-fg); font-weight: 600; }
.tog { width: 38px; height: 22px; border-radius: 11px; padding: 2px; background: var(--line); border: 0; position: relative; } .tog i { display: block; width: 18px; height: 18px; border-radius: 50%; background: var(--panel); transition: transform .15s; } .tog.on { background: var(--accent); } .tog.on i { transform: translateX(16px); }

/* schedule */
.sched { --row: 13px; min-width: 100%; }
.sched-head { display: grid; grid-template-columns: 56px repeat(auto-fit, minmax(0, 1fr)); gap: 0 4px; }
.sched-head, .sched-body { display: grid; grid-template-columns: 56px; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0 4px; }
.colh { font-weight: 600; font-size: 12.5px; padding: 4px 6px; background: var(--panel2); border-radius: 6px 6px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .colh small { display: block; color: var(--muted); font-weight: 400; } .colh.due { background: var(--accent-soft); color: var(--accent); }
.sched-body { position: relative; background-image: repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px calc(var(--row) * 6)); }
.tcol { position: relative; } .tlabel { position: absolute; right: 6px; transform: translateY(-50%); font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.col { position: relative; background: var(--panel); border-left: 1px solid var(--line); border-right: 1px solid var(--line); } .col.over { background: var(--accent-soft); } .col.due { background: color-mix(in srgb, var(--accent-soft) 40%, var(--panel)); }
.lunch { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(135deg, var(--panel2) 0 6px, transparent 6px 12px); color: var(--muted); font-size: 11px; text-align: center; padding-top: 4px; }
.appt { position: absolute; left: 2px; right: 2px; border-radius: 6px; padding: 3px 6px; overflow: hidden; cursor: pointer; border: 2px solid; font-size: 12px; line-height: 1.3; box-shadow: 0 1px 0 rgba(0,0,0,.05); }
.appt:hover, .appt.sel { outline: 2px solid var(--accent); outline-offset: -1px; }
.appt-top { display: flex; gap: 6px; align-items: center; } .appt-top b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .appt .st { margin-left: auto; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; opacity: .8; }
.appt-sub { opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .appt-prod { position: absolute; right: 6px; bottom: 3px; font-size: 11px; font-variant-numeric: tabular-nums; opacity: .8; }
.appt.st-complete { opacity: .55; } .appt.st-inchair { box-shadow: inset 0 0 0 1px var(--ok); }
.c-purple { background: var(--purple); color: var(--purple-t); border-color: var(--purple-t); } .c-pink { background: var(--pink); color: var(--pink-t); border-color: var(--pink-t); } .c-blue { background: var(--blue); color: var(--blue-t); border-color: var(--blue-t); } .c-sky { background: var(--sky); color: var(--sky-t); border-color: var(--sky-t); } .c-green { background: var(--green); color: var(--green-t); border-color: var(--green-t); } .c-amber { background: var(--amber); color: var(--amber-t); border-color: var(--amber-t); } .c-teal { background: var(--teal); color: var(--teal-t); border-color: var(--teal-t); } .c-red { background: var(--red); color: var(--red-t); border-color: var(--red-t); } .c-grey { background: var(--grey); color: var(--grey-t); border-color: var(--grey-t); }
.c-purple-t { color: var(--purple-t); } .c-pink-t { color: var(--pink-t); } .c-blue-t { color: var(--blue-t); } .c-sky-t { color: var(--sky-t); } .c-green-t { color: var(--green-t); } .c-amber-t { color: var(--amber-t); } .c-teal-t { color: var(--teal-t); } .c-red-t { color: var(--red-t); } .c-grey-t { color: var(--grey-t); }
.c-purple-b { border: 2px solid var(--purple-t); } .c-pink-b { border: 2px solid var(--pink-t); } .c-blue-b { border: 2px solid var(--blue-t); } .c-sky-b { border: 2px solid var(--sky-t); } .c-green-b { border: 2px solid var(--green-t); } .c-amber-b { border: 2px solid var(--amber-t); } .c-teal-b { border: 2px solid var(--teal-t); } .c-red-b { border: 2px solid var(--red-t); } .c-grey-b { border: 2px solid var(--grey-t); }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin: 8px 0; } .legend span { display: flex; align-items: center; gap: 5px; }
.sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 1px solid transparent; } .sw.c-purple { border-color: var(--purple-t); } .sw.c-pink { border-color: var(--pink-t); } .sw.c-teal { border-color: var(--teal-t); } .sw.c-red { border-color: var(--red-t); } .sw.c-grey { border-color: var(--grey-t); }
.sw.v1 { background: var(--v1); } .sw.v2 { background: var(--v2); } .sw.v3 { background: var(--v3); } .sw.v4 { background: var(--v4); } .sw.v5 { background: var(--v5); } .sw.dashed { border: 2px dashed var(--muted); } .sw.o { background: var(--o); } .sw.i { background: var(--i); } .sw.n { background: var(--n); }
.prodbars { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-bottom: 12px; }
.prod { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; } .prod-l { display: flex; justify-content: space-between; font-size: 12px; gap: 8px; } .prod-l span { color: var(--muted); font-variant-numeric: tabular-nums; }
.bar { height: 8px; background: var(--panel2); border-radius: 4px; margin: 6px 0 4px; overflow: hidden; } .bar i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.prod .open { font-size: 11px; color: var(--muted); }
.dragnames, .dragrow, .visitrow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.dragname { display: inline-flex; flex-direction: column; padding: 5px 10px; border: 1px dashed var(--accent); border-radius: 8px; background: var(--panel); cursor: grab; font-size: 12.5px; line-height: 1.2; } .dragname small { color: var(--muted); font-size: 10px; } .dragname.big { flex-direction: row; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; padding: 8px 12px; }
.dragname:active { cursor: grabbing; }
.visitcard { background: var(--panel); border: 1px solid var(--line); border: 2px solid var(--v1); border-radius: 8px; padding: 8px 10px; min-width: 220px; cursor: grab; display: flex; flex-direction: column; gap: 3px; }
.booknext { display: flex; flex-direction: column; gap: 12px; }

/* dentist */
.apptcards { display: flex; flex-direction: column; gap: 6px; }
.apptcard { text-align: left; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; } .apptcard.sel { outline: 2px solid var(--accent); } .apptcard.st-complete { opacity: .6; }
.dent-map { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(220px, 1fr); gap: 14px; align-items: start; }
.dent-side { display: flex; flex-direction: column; gap: 10px; }
.qmap { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; }
.qgrid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.quad { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); padding: 10px 6px; min-height: 92px; }
.quad.up { border-bottom: 2px solid var(--fg); } .qgrid .quad:nth-child(odd) { border-right: 2px solid var(--fg); }
.qcol { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; min-width: 0; } .quad.down .qcol { justify-content: flex-start; }
.qt { font-family: var(--mono); font-size: 12px; color: var(--muted); } .qcol.has .qt { color: var(--fg); font-weight: 600; }
.qitems { display: flex; flex-direction: column; gap: 3px; align-items: center; }
.qchip { font-family: var(--mono); font-size: 11px; color: #fff; padding: 1px 5px; border-radius: 4px; white-space: nowrap; } .qchip.proposed { outline: 0; opacity: 1; } .qchip.completed { text-decoration: line-through; opacity: .5; }
.qchip.v1, .pitem .v1 { background: var(--v1); } .qchip.v2 { background: var(--v2); } .qchip.v3 { background: var(--v3); } .qchip.v4 { background: var(--v4); } .qchip.v5 { background: var(--v5); }
.qlab { position: absolute; font-size: 10px; letter-spacing: .1em; color: var(--muted); } .ur { left: 4px; top: 2px; } .ul { right: 4px; top: 2px; } .lr { left: 4px; bottom: 2px; } .ll { right: 4px; bottom: 2px; }
.qlegend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; } .qlegend span { display: flex; align-items: center; gap: 5px; }

/* planner */
.planner { display: flex; flex-direction: column; gap: 12px; }
.teeth { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 10px; overflow-x: auto; }
.arch { display: grid; grid-template-columns: repeat(16, minmax(34px, 1fr)); gap: 3px; } .arch + .arch { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line); }
.tooth { padding: 4px 2px; border-radius: 6px; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 52px; background: var(--panel2); border-color: transparent; } .tooth.ant { background: color-mix(in srgb, var(--panel2) 60%, var(--panel)); } .tooth.sel { outline: 2px solid var(--accent); background: var(--accent-soft); }
.tnum { font-family: var(--mono); font-size: 11px; color: var(--muted); } .marks { display: flex; flex-direction: column; gap: 2px; } .marks i { font-style: normal; font-family: var(--mono); font-size: 10px; color: #fff; padding: 0 4px; border-radius: 3px; } .marks i.v1 { background: var(--v1); } .marks i.v2 { background: var(--v2); } .marks i.v3 { background: var(--v3); } .marks i.v4 { background: var(--v4); } .marks i.v5 { background: var(--v5); } .marks i.proposed { outline: 1px dashed #fff; outline-offset: -1px; } .marks i.completed { opacity: .45; }
.entry { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 1fr); gap: 12px; }
.entry-l { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.favs { display: flex; flex-wrap: wrap; gap: 6px; } .favs button { display: inline-flex; align-items: center; }
.visits { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.visit { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 10px; display: flex; flex-direction: column; gap: 6px; text-align: left; cursor: pointer; } .visit.target { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .visit.add { align-items: center; justify-content: center; color: var(--muted); border-style: dashed; min-height: 80px; }
.visit-h { display: flex; align-items: center; gap: 6px; } .visit-f { display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 6px; }
.pitem { display: grid; grid-template-columns: 56px 1fr auto auto; gap: 6px; align-items: center; font-size: 12.5px; padding: 4px 6px; border-radius: 6px; background: var(--panel2); cursor: grab; } .pitem.proposed { outline: 0; } .pitem.completed { opacity: .5; text-decoration: line-through; }

/* voice */
.voicebar { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; margin-bottom: 12px; }
.voicebar.on { border-color: var(--ok); } .voicebar.paused { border-color: var(--warn); }
.mic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; padding: 0; } .voicebar.on .mic { background: var(--ok); color: #fff; border-color: var(--ok); animation: pulse 1.6s infinite; } .voicebar.paused .mic { background: var(--warn); color: #fff; border-color: var(--warn); animation: none; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(46,139,87,.4); } 50% { box-shadow: 0 0 0 8px rgba(46,139,87,0); } }
@media (prefers-reduced-motion: reduce) { .mic, .pulse { animation: none !important; } }
.vstate b { display: block; } .vstate small { color: var(--muted); }
.say { grid-column: 1 / -1; display: flex; gap: 6px; } .say input { flex: 1; min-width: 0; }
.quick { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; }
.vlog { display: flex; flex-direction: column; gap: 2px; font-family: var(--mono); font-size: 12px; color: var(--muted); margin-top: 8px; } .entry-r .vlog { grid-column: 1 / -1; margin: 0; }
.perio { border-collapse: collapse; width: 100%; margin-bottom: 8px; font-variant-numeric: tabular-nums; } .perio th { font-family: var(--mono); font-size: 11px; color: var(--muted); font-weight: 500; } .perio td { text-align: center; padding: 2px 1px; border: 1px solid var(--line); font-size: 12px; position: relative; } .perio td span { display: inline-block; width: 14px; } .perio td .mid { color: var(--warn); font-weight: 600; } .perio td .deep { color: var(--bad); font-weight: 700; } .perio td.cur { background: var(--accent-soft); outline: 2px solid var(--accent); } .perio td.missing { color: var(--muted); background: var(--panel2); } .perio .lbl { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); border: 0; padding-top: 4px; } .bop { position: absolute; right: 2px; top: 2px; width: 6px; height: 6px; border-radius: 50%; background: var(--bad); }

/* xray */
.xthumbs { display: flex; gap: 6px; } .xthumb { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10px; color: var(--muted); } .xthumb i, .film i { display: block; background: radial-gradient(ellipse at 50% 40%, #6b7784 0, #2a323c 60%, #141a22 100%); border-radius: 4px; width: 46px; height: 34px; }
.xgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 12px; } .xbig { margin: 0; } .film i { width: 100%; height: 150px; border-radius: 8px; } .xbig figcaption { display: flex; justify-content: space-between; font-size: 12px; margin-top: 4px; color: var(--muted); } .xbig b { color: var(--fg); }
.steps { padding-left: 18px; } .steps li { padding: 4px 0; color: var(--muted); } .steps li.now { color: var(--accent); font-weight: 600; } .steps li.done { color: var(--ok); }

/* notes */
.note-edit, .note.old { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 8px; }

/* front desk */
.taskcards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tcard { text-align: left; display: flex; flex-direction: column; gap: 2px; padding: 10px; min-height: 92px; } .tcard b { font-size: 24px; line-height: 1; font-variant-numeric: tabular-nums; } .tcard span { font-weight: 600; font-size: 12.5px; } .tcard small { color: var(--muted); font-size: 11px; }
.tcard.live { border-color: var(--ok); background: var(--ok-soft); } .tcard.live b { color: var(--ok); } .tcard.warn { border-color: var(--warn); } .tcard.warn b { color: var(--warn); }
.calllog { list-style: none; margin: 0; padding: 0; } .calllog li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; } .calllog li div { flex: 1; min-width: 0; } .calllog small { display: block; color: var(--muted); } .dir { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; } .dir.in { background: var(--blue); color: var(--blue-t); } .dir.out { background: var(--accent-soft); color: var(--accent); }
.tbl { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; } .tbl th, .tbl td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; } .tbl th { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); background: var(--panel2); } .tbl tr:last-child td { border-bottom: 0; } .tbl.hover tbody tr { cursor: pointer; } .tbl.hover tbody tr:hover { background: var(--panel2); } .tbl .tot td { font-weight: 600; border-top: 2px solid var(--line); } .tbl.sm td, .tbl.sm th { padding: 5px 8px; font-size: 12.5px; }
.score { display: inline-block; min-width: 30px; text-align: center; font-weight: 700; font-size: 12px; border-radius: 6px; padding: 1px 6px; } .s3 { background: var(--ok-soft); color: var(--ok); } .s2 { background: var(--warn-soft); color: var(--warn); } .s1 { background: var(--bad-soft); color: var(--bad); }
.msgs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .msgs li { display: grid; grid-template-columns: 80px 1fr auto; gap: 12px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; } .msgs li.unread { border: 2px solid var(--accent); } .msgs .kind { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } .msgs p { margin: 2px 0 0; }
.tasks { list-style: none; margin: 0; padding: 0; } .tasks li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); } .tasks li.tdone label { text-decoration: line-through; color: var(--muted); }
.stickies { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; } .sticky { position: relative; padding: 12px; border-radius: 4px; min-height: 90px; box-shadow: var(--shadow); color: #2a2a2a; } .sticky.y { background: #fff3a0; } .sticky.b { background: #bfe3ff; } .sticky.g { background: #c9f2cf; } .sticky .x { position: absolute; top: 2px; right: 4px; color: #555; } .sticky .link { color: #1b4f7a; } .sticky.new { background: var(--panel); border: 1px dashed var(--line); display: flex; flex-direction: column; gap: 6px; box-shadow: none; color: var(--fg); }
.bars { display: flex; gap: 10px; align-items: flex-end; height: 170px; padding-top: 10px; } .bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; } .stack { width: 100%; max-width: 48px; display: flex; flex-direction: column-reverse; border-radius: 4px; overflow: hidden; } .stack i { display: block; } .stack .o { background: var(--o); } .stack .i { background: var(--i); } .stack .n { background: var(--n); } .bar-col small { color: var(--muted); font-size: 11px; }
.placeholder { align-items: flex-start; } .ghostcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; width: 100%; } .ghostcards div { border: 2px dashed var(--line); border-radius: 8px; padding: 14px; color: var(--muted); display: flex; flex-direction: column; }
.drop { border: 2px dashed var(--accent); border-radius: 8px; padding: 22px; text-align: center; color: var(--accent); cursor: pointer; }

/* overlays */
.scrim { position: fixed; inset: 0; background: rgba(10,16,24,.45); display: grid; place-items: center; z-index: 50; padding: 16px; }
.modal { background: var(--panel); border-radius: 14px; padding: 18px; width: min(560px, 100%); max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,.3); display: flex; flex-direction: column; gap: 12px; } .modal.wide { width: min(820px, 100%); }
.mhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } .eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.mini { background: var(--panel2); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; } .mini-top { display: flex; gap: 10px; align-items: center; } .mini-top span:not(.avatar) { display: block; color: var(--muted); font-size: 12px; } .mini.unknown { align-items: flex-start; }
.callpop { position: fixed; right: 16px; bottom: 16px; width: min(380px, calc(100vw - 32px)); background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.3); z-index: 60; display: flex; flex-direction: column; gap: 10px; }
.call-head { font-weight: 600; display: flex; align-items: center; gap: 8px; } .call-head.ring { color: var(--accent); } .call-head.live { color: var(--ok); } .timer { margin-left: auto; font-family: var(--mono); font-weight: 500; color: var(--muted); }
.pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); animation: pulse 1.2s infinite; } .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); }
.reason-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .reason-grid button { padding: 9px 8px; font-size: 12.5px; text-align: left; }
.sim-note { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); text-align: right; }
.terminal { position: fixed; left: 16px; bottom: 16px; z-index: 60; display: flex; gap: 12px; align-items: flex-end; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.tdevice { width: 150px; background: #2b2f36; border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 8px; } .tscreen { background: #c9d6c2; color: #1f2a1f; border-radius: 6px; padding: 8px; min-height: 70px; display: flex; flex-direction: column; font-family: var(--mono); } .tscreen small { font-size: 9px; letter-spacing: .1em; } .tscreen b { font-size: 18px; } .tscreen span { font-size: 11px; margin-top: auto; } .tscreen.ok { background: #a7e3b1; } .tkeys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; } .tkeys i { background: #44495280; color: #ddd; border-radius: 4px; text-align: center; font-size: 11px; font-style: normal; padding: 3px 0; }
.tside { display: flex; flex-direction: column; gap: 6px; } .tside small { color: var(--muted); }
.phonesim, .phone { width: 250px; background: #111; border-radius: 26px; padding: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.35); } .phonesim { position: fixed; right: 16px; top: 70px; z-index: 55; } .ph-notch { width: 80px; height: 8px; background: #000; border-radius: 4px; margin: 0 auto 8px; }
.ph-head { color: #fff; font-weight: 600; display: flex; justify-content: space-between; align-items: center; padding: 0 4px 8px; } .ph-head .x { color: #aaa; } .ph-body { background: #f2f2f6; border-radius: 16px; padding: 10px; min-height: 120px; max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; } .bubble { background: #e5e5ea; color: #111; border-radius: 14px 14px 14px 4px; padding: 8px 10px; font-size: 12.5px; max-width: 95%; } .phonesim .sim-note { color: #777; margin-top: 6px; }
.portal-wrap { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start; } .portal-wrap .phone { width: 300px; } .phone.inline { width: 100%; max-width: 300px; margin: 0 auto; }
.pscreen { background: #fff; color: #1b2430; border-radius: 18px; padding: 16px; min-height: 420px; display: flex; flex-direction: column; gap: 10px; } .pscreen h2 { font-size: 20px; } .pbrand { color: #0e7c86; font-weight: 700; font-size: 13px; }
.pbtn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 12px 14px; border-radius: 12px; background: #f1f4f6; border-color: #dde3e8; color: #1b2430; text-align: left; } .pbtn.primary { background: #0e7c86; color: #fff; border-color: #0e7c86; } .pbtn small { opacity: .8; }
.pform { display: flex; flex-direction: column; gap: 8px; } .pform label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: #5b6878; flex: 1; } .pform input { background: #fff; color: #1b2430; border-color: #d8dee5; } .pform .code { font-size: 24px; letter-spacing: .2em; text-align: center; font-family: var(--mono); } .pform button.primary { background: #0e7c86; color: #fff; border-color: #0e7c86; }
.pscreen .muted { color: #5b6878; } .pscreen .link { color: #0e7c86; }
.slots { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .slot { display: flex; flex-direction: column; align-items: flex-start; padding: 8px 10px; background: #f1f4f6; border-color: #dde3e8; color: #1b2430; } .slot span { color: #5b6878; font-size: 12px; }
:not(li).done { width: 56px; height: 56px; border-radius: 50%; background: #2e8b57; color: #fff; display: grid; place-items: center; font-size: 28px; margin: 20px auto 0; }
.formcard { background: #f1f4f6; border-radius: 10px; padding: 8px 10px; } .formcard ul { margin: 4px 0 0; padding-left: 16px; font-size: 12.5px; color: #5b6878; }
.rules ul { margin: 0; padding-left: 18px; } .rules li { padding: 2px 0; }
.toasts { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; z-index: 70; pointer-events: none; width: min(460px, calc(100vw - 32px)); }
.toast { background: var(--fg); color: var(--bg); padding: 10px 14px; border-radius: 10px; font-size: 13px; box-shadow: var(--shadow); opacity: 1; transition: opacity .4s, transform .4s; } .toast.out { opacity: 0; transform: translateY(6px); }

@media (max-width: 1100px) { .ws, .ws-dent { grid-template-columns: 1fr; } .sidepane { position: static; max-height: none; } .dent-map, .entry { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .shell { grid-template-columns: 1fr; } .side { position: static; height: auto; flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 6px; } .side button span { display: none; } .side button { padding: 8px; }
  main { padding: 12px 16px 100px; } .role-switch { order: 3; width: 100%; margin: 0; } .role-switch button { flex: 1; padding: 5px 4px; font-size: 12px; } .top-right .ghost { display: none; }
  .ccard.wide2 { grid-column: span 1; } .cardgrid { grid-template-columns: 1fr 1fr; } .taskcards { grid-template-columns: 1fr 1fr; }
  .portal-wrap { grid-template-columns: 1fr; } .portal-wrap .phone { margin: 0 auto; } .phonesim { top: auto; bottom: 90px; right: 8px; width: 220px; } .terminal { left: 8px; bottom: 8px; } .callpop { right: 8px; bottom: 8px; }
  .msgs li { grid-template-columns: 1fr; } .sched { min-width: 560px; }
}


/* hygiene day-sheet layout (no side menu) */
.shell.noside { grid-template-columns: 1fr; }
.hyg { --dsw: clamp(250px, 24vw, 420px); display: grid; grid-template-columns: var(--dsw) minmax(0, 1fr); gap: 20px; align-items: start; } /* side schedule takes the room it can get (Chris, 2026-10-05) */
.daysheet { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); position: sticky; top: 60px; max-height: calc(100vh - 72px); overflow-y: auto; display: flex; flex-direction: column; }
.ds-head { padding: 12px 14px 10px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; } .ds-head > span { color: var(--muted); font-size: 13.5px; } .ds-head > b { font-size: 17px; }
.ds-prod { margin-top: 6px; } .ds-prod .bar { margin: 0 0 3px; } .ds-prod small { color: var(--muted); font-size: 11px; }
.ds-list { display: flex; flex-direction: column; gap: 4px; padding: 8px; }
.dblock { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "time status" "name name" "type type"; text-align: left; padding: 8px 10px; border-radius: 8px; border: 1px solid transparent; border-left-width: 5px; gap: 0 6px; line-height: 1.3; }
.dblock .dtime { grid-area: time; font-size: 13px; font-variant-numeric: tabular-nums; opacity: .8; } .dblock .dname { grid-area: name; font-weight: 600; font-size: 16.5px; } .dblock .dtype { grid-area: type; font-size: 13.5px; opacity: .85; } .dblock .dstatus { grid-area: status; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.dblock.sel { outline: 2px solid var(--accent); outline-offset: 1px; } .dblock.st-complete { opacity: .5; } .dblock.st-inchair .dstatus { color: var(--ok); }
.ds-gap { text-align: center; font-size: 12.5px; color: var(--muted); padding: 4px; } .ds-gap.open { border: 1px dashed var(--line); border-radius: 6px; }
.ds-foot { padding: 10px 12px 12px; border-top: 1px solid var(--line); margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.ds-links { display: flex; gap: 12px; font-size: 12px; margin-top: 4px; }
.hyg-main { min-width: 0; }
.hyg-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .hyg-top h1 { font-size: 28px; }
.hcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } /* two cards per row in every role's home view (Chris, 2026-10-05) */
.hcard { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px; text-align: left; display: flex; flex-direction: column; gap: 8px; min-height: 150px; font-size: 14px; box-shadow: var(--shadow); }
button.hcard:hover { border-color: var(--accent); } button.hcard > span:last-child { color: var(--muted); }
.hcard.wide { grid-column: span 2; } .hcard.accent { background: var(--accent-soft); border-color: transparent; color: var(--accent); } .hcard.accent .ccard-h, .hcard.accent > span:last-child { color: var(--accent); opacity: .85; }
.hcard .lead { font-size: 24px; font-weight: 600; line-height: 1.1; } .hcard .lead small { font-size: 13px; color: var(--muted); font-weight: 500; }
.hcard .interval b { font-size: 54px; }
.hcard .cleanings { padding: 10px 0 4px; }
.hcard.workdone .wd-row > span { min-width: 0; font-size: 14px; }
.seg.big button { padding: 9px 16px; font-size: 15px; }
button.lg { padding: 11px 20px; font-size: 15px; }
.sub-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; } .sub-head h1 { font-size: 22px; }
.back { border: 0; background: var(--panel2); font-weight: 600; }
@media (max-width: 1100px) { .hcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .hyg { grid-template-columns: 1fr; } .daysheet { position: static; max-height: none; } .ds-list { flex-direction: row; overflow-x: auto; } .dblock { min-width: 150px; } .ds-gap { display: none; } .hcards { grid-template-columns: 1fr; } .hcard.wide { grid-column: span 1; } }
.hcard .cleanings { flex-wrap: nowrap; overflow-x: auto; } .hcard .cgap { min-width: 40px; } .hcard .cdate { min-width: 58px; padding: 6px 8px; }

.backbar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.codes { width: 100%; border-collapse: collapse; font-size: 13px; } .codes td { padding: 4px 6px; border-bottom: 1px dashed var(--line); } .codes .tot td { font-weight: 600; border-bottom: 0; border-top: 2px solid var(--line); }
.col[data-clickable] { cursor: copy; } .col[data-clickable]:hover { background: color-mix(in srgb, var(--accent-soft) 50%, var(--panel)); }
.col.over { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.appt { pointer-events: auto; } .col.over .appt { pointer-events: none; }

.dcard .qmap { padding: 8px; overflow-x: auto; } .dcard .qgrid { min-width: 380px; } .qcol { gap: 2px; } .quad { padding: 8px 2px; }

/* ---- round 3: ledger, insurance, notes, booked card, work-done extras ---- */
button.on, button.ghost.on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
button.okbtn { background: var(--ok-soft); color: var(--ok); border-color: transparent; font-weight: 600; }
.hcard.booked { background: var(--ok-soft); border-color: transparent; } .hcard.booked .ccard-h, .hcard.booked > span:last-child { color: var(--ok); opacity: .9; } .hcard.booked .lead { color: var(--ok); } .hcard.booked .check { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ok); color: #fff; font-size: 18px; margin-right: 4px; vertical-align: middle; }
.bookedbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--ok-soft); color: var(--ok); border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; }
.hcard .cdate.c-purple, .hcard .cdate.c-pink { border: 1px solid; } .hcard .cdate small { color: inherit; opacity: .8; }
.legend { display: flex; gap: 12px; color: var(--muted); } .legend span { display: inline-flex; align-items: center; gap: 5px; }
.wd-more { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px; border: 1px dashed var(--line); border-radius: 10px; background: var(--panel2); }
.wd-more { flex-direction: column; align-items: stretch; gap: 10px; background: var(--panel); border: 1px solid var(--line); }
.xcodes { display: flex; flex-wrap: wrap; gap: 8px; }
.xcode { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; background: var(--panel2); overflow: hidden; } .xcode.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.xcode .xmain { border: 0; background: none; border-radius: 0; padding: 8px 14px; font-size: 14px; font-weight: 500; color: inherit; display: inline-flex; align-items: center; gap: 6px; } .xcode.on .xmain { font-weight: 600; } .xcheck { font-style: normal; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: var(--accent-fg); font-size: 11px; }
.xqty { display: inline-flex; align-items: center; gap: 2px; padding-right: 6px; border-left: 1px solid var(--accent); } .xqty button { border: 0; background: none; border-radius: 50%; width: 26px; height: 26px; padding: 0; font-size: 16px; line-height: 1; color: inherit; } .xqty button:hover { background: var(--accent); color: var(--accent-fg); } .xqty b { min-width: 14px; text-align: center; font-variant-numeric: tabular-nums; }
.ledger-sum { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .ledger-sum > div { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; min-width: 150px; display: flex; flex-direction: column; gap: 2px; } .ledger-sum b { font-size: 20px; } .ledger-sum small { color: var(--muted); font-size: 12px; } .ledger-sum .owe { border-color: var(--warn); } .ledger-sum .owe b { color: var(--warn); } .ledger-sum button { margin-top: 6px; align-self: flex-start; }
.tbl.ledger tr.vstart td { border-top: 2px solid var(--line); } .tbl.ledger tr:first-child td { border-top: 0; } .tbl.ledger td { font-size: 13px; }
.instiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; margin: 10px 0 20px; }
.instile { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 10px; } .instile h3 { font-size: 17px; margin: 0; } .instile.old { opacity: .72; background: var(--panel2); } .instile.fam { border: 1px dashed var(--accent); } .instile .kv { font-size: 12.5px; } .instile .maxbar { height: 6px; background: var(--panel2); border-radius: 3px; overflow: hidden; margin-top: 4px; } .instile .maxbar i { display: block; height: 100%; background: var(--accent); }
.eoblist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .eoblist li { display: grid; grid-template-columns: 30px 1fr auto auto; gap: 14px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; } .eoblist li.open { border-color: var(--accent); } .eoblist li.muted { display: block; }
.pdficon { width: 28px; height: 34px; border-radius: 3px; background: #c0392b; color: #fff; font-size: 9px; font-weight: 700; display: grid; place-items: center; letter-spacing: .04em; }
.pdfview { margin-top: 12px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #525659; }
.pdfbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; background: #323639; color: #eee; font-size: 13px; } .pdfbar button { background: transparent; color: #eee; border-color: #777; }
.pdfpage { background: #fff; color: #111; width: min(760px, calc(100% - 24px)); margin: 18px auto; padding: 36px 40px; box-shadow: 0 4px 18px rgba(0,0,0,.45); font-size: 13px; } .pdfpage h2 { margin: 0; font-size: 20px; } .pdfpage hr { border: 0; border-top: 2px solid #222; margin: 12px 0; } .pdfpage table { width: 100%; border-collapse: collapse; margin: 16px 0 10px; } .pdfpage th, .pdfpage td { padding: 6px; border-bottom: 1px solid #ddd; text-align: left; vertical-align: top; } .pdfpage th { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #444; } .pdfpage .posted { margin-top: 18px; padding: 10px 12px; background: #e7f5ec; color: #1f6b3a; border-radius: 6px; font-weight: 600; } .pdfpage .posted button { color: #1f6b3a; }
.notes-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } .notes-bar .seg small { opacity: .75; margin-left: 3px; }
.note.old .nh { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .note.old p { margin: 0; } .note.hygn { border: 2px solid var(--purple-t); } .note.drn { border: 2px solid var(--accent); }
@media (max-width: 760px) { .eoblist li { grid-template-columns: 30px 1fr; } .eoblist li > button { grid-column: 2; justify-self: start; } .pdfpage { padding: 20px 16px; } }
.hcard .cleanings { gap: 2px; } .hcard .cdate { min-width: 50px; padding: 5px 5px; } .hcard .cdate b { font-size: 13px; line-height: 1.15; } .hcard .cdate small { font-size: 10.5px; } .hcard .cgap { min-width: 30px; font-size: 11px; }

.hcard.treat { padding: 0; overflow: hidden; } .hcard.treat .cardlink { flex: 1; border: 0; background: none; border-radius: 0; text-align: left; padding: 18px 18px 10px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; } .hcard.treat .cardlink:hover { background: var(--panel2); } .hcard.treat > :not(.cardlink) { margin: 0 18px 16px; }
.hcard .notify { background: var(--accent-soft); color: var(--accent); border-color: transparent; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; justify-content: center; padding: 10px 12px; } .hcard .notify svg { width: 18px; height: 18px; }
.chip.warn-chip { background: var(--warn-soft); color: var(--warn); border-color: transparent; font-weight: 600; }
.banner.ready { animation: bannerpulse 1.6s ease-in-out infinite; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; } .readyitem { display: inline-flex; align-items: center; gap: 8px; } @keyframes bannerpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(183, 121, 31, .35); } 50% { box-shadow: 0 0 0 8px rgba(183, 121, 31, 0); } }

/* ---- round 4: planner, odontogram, perio, notes, health history, x-ray mounts, invoices ---- */
.seg.sm button { padding: 3px 9px; font-size: 12px; }
.arch { grid-template-columns: repeat(16, minmax(44px, 1fr)); gap: 4px; }
.tooth { min-height: 68px; padding: 6px 2px; border: 2px solid transparent; border-radius: 10px; } .tooth .tnum { font-size: 13px; font-weight: 600; color: var(--fg); } .tooth .marks i { font-size: 11px; padding: 1px 5px; }
.tooth.armed:not(:disabled):hover { border-color: var(--accent); background: var(--accent-soft); cursor: copy; } .tooth.missing { opacity: .35; background: transparent; border-style: dashed; border-color: var(--line); text-decoration: line-through; }
.tooth.ring.v1 { border-color: var(--v1); } .tooth.ring.v2 { border-color: var(--v2); } .tooth.ring.v3 { border-color: var(--v3); } .tooth.ring.v4 { border-color: var(--v4); } .tooth.ring.v5 { border-color: var(--v5); } .tooth.ring.v0 { border-color: var(--muted); border-style: dashed; }
.tooth.ring.v1 .tnum { color: var(--v1); } .tooth.ring.v2 .tnum { color: var(--v2); } .tooth.ring.v3 .tnum { color: var(--v3); } .tooth.ring.v4 .tnum { color: var(--v4); } .tooth.ring.v5 .tnum { color: var(--v5); }
.marks i.v0, .qchip.v0, .bubble.v0, .sw.v0 { background: var(--muted); }
.seg.surf.big button { min-width: 48px; font-weight: 700; font-size: 16px; } .seg.material button { font-size: 13px; }
.favs { gap: 8px; } .favbtn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px 8px 8px; border-radius: 12px; background: var(--panel2); border: 1px solid var(--line); font-weight: 500; } .favbtn b { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--accent); color: var(--accent-fg); font-size: 12px; letter-spacing: .02em; } .favbtn kbd { margin: 0; } .favbtn.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); } .favbtn.add { border-style: dashed; background: transparent; color: var(--muted); }
.visits { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.visit { cursor: default; border: 2px solid var(--line); } .visit.v1-b { border-color: var(--v1); } .visit.v2-b { border-color: var(--v2); } .visit.v3-b { border-color: var(--v3); } .visit.v4-b { border-color: var(--v4); } .visit.v5-b { border-color: var(--v5); } .visit.pool { border-color: var(--muted); border-style: dashed; } .visit.over, .visit.add.over { background: var(--accent-soft); border-color: var(--accent); }
.visit-h .x { margin-left: auto; } .visit.add { cursor: copy; flex-direction: column; gap: 2px; }
.bubbles { display: flex; flex-wrap: wrap; gap: 6px; min-height: 36px; }
.bubble { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 10px; border-radius: 999px; color: #fff; cursor: grab; font-size: 13px; line-height: 1; } .bubble b { font-family: var(--mono); font-size: 13px; } .bubble small { opacity: .85; font-size: 11px; } .bubble .x { color: #fff; opacity: .8; font-size: 16px; padding: 0 4px; } .bubble .x:hover { opacity: 1; }
.bubble.v1 { background: var(--v1); } .bubble.v2 { background: var(--v2); } .bubble.v3 { background: var(--v3); } .bubble.v4 { background: var(--v4); } .bubble.v5 { background: var(--v5); } .bubble.proposed { outline: 0; } .bubble.completed { opacity: .5; text-decoration: line-through; }
.favlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .favlist li { display: grid; grid-template-columns: 120px 1fr auto; gap: 10px; align-items: center; padding: 6px 10px; background: var(--panel2); border-radius: 8px; }
.favform { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; padding-top: 8px; border-top: 1px solid var(--line); } .favform button { grid-column: 1 / -1; justify-self: end; }
/* odontogram */
.odonto { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 14px; margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.od-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.od-body { display: flex; flex-direction: column; gap: 4px; }
.od-arch { display: grid; grid-template-columns: repeat(16, minmax(28px, 1fr)); gap: 3px; } .od-arch.prim { grid-template-columns: repeat(10, minmax(28px, 1fr)); width: 62.5%; margin: 0 auto; }
.od-arch .od:nth-child(8) { margin-right: 8px; } .od-arch.prim .od:nth-child(5) { margin-right: 8px; }
.od { padding: 5px 0; font-family: var(--mono); font-size: 12px; border-radius: 6px; background: var(--panel2); border: 1px solid transparent; } .od:hover { border-color: var(--accent); } .od.miss { background: transparent; color: var(--muted); border: 1px dashed var(--line); text-decoration: line-through; } .od.prim { background: color-mix(in srgb, var(--pink) 70%, var(--panel)); } .od.on { background: var(--accent); color: var(--accent-fg); font-weight: 700; }
.qcol.miss .qt { text-decoration: line-through; opacity: .45; }
/* perio */
.perio td { cursor: pointer; } .perio td:hover { background: var(--panel2); } .perio th { cursor: pointer; padding: 3px 0; } .perio th:hover { color: var(--accent); } .perio td.cur { background: var(--accent-soft); outline: 2px solid var(--accent); outline-offset: -1px; } .perio td.cur span { font-size: 12px; font-weight: 400; } .perio td span.now { font-size: 19px; width: 22px; font-weight: 800; color: var(--accent); line-height: 1; vertical-align: middle; } .perio.ro td { cursor: default; } .perio.ro td:hover { background: transparent; } .perio.ro th { cursor: default; }
/* notes code chips */
.codechips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .codechip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--panel2); border: 1px solid var(--line); } .codechip b { font-family: var(--mono); color: var(--accent); } .codechip small { font-family: var(--mono); color: var(--muted); }
/* health history */
.hxgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 10px; }
.hxcard { text-align: left; display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 12px; } .hxcard.latest { border-color: var(--ok); box-shadow: 0 0 0 1px var(--ok); } .hxcard:hover { border-color: var(--accent); }
/* x-ray mounts */
.xsets { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.xset { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; } .xset.open { border-color: var(--accent); }
.xset-h { display: flex; align-items: center; gap: 16px; width: 100%; border: 0; border-radius: 0; background: none; padding: 10px 12px; text-align: left; } .xset-h:hover { background: var(--panel2); }
.xset-meta { display: flex; flex-direction: column; gap: 2px; } .xset-meta b { font-size: 15px; }
.mount { display: grid; gap: 3px; padding: 6px; background: #1c222a; border-radius: 8px; width: max-content; } .mount.cols1 { grid-template-columns: 1fr; } .mount.cols2 { grid-template-columns: repeat(2, 1fr); } .mount.cols4 { grid-template-columns: repeat(4, 1fr); } .mount.cols8 { grid-template-columns: repeat(8, 1fr); }
.film { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; } .film i { display: block; background: radial-gradient(ellipse at 50% 40%, #6b7784 0, #2a323c 60%, #141a22 100%); border-radius: 3px; } .film figcaption { font-size: 10px; color: #9aa6b4; }
.film.mini i { width: 44px; height: 32px; } .mount.wide .film.mini i { width: 160px; height: 60px; } .film.mini figcaption { display: none; }
.xset-body { padding: 12px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.xviewer { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; } .film.big i { width: 100%; max-width: 560px; height: 300px; margin: 0 auto; border-radius: 8px; } .film.big figcaption { font-size: 12px; color: var(--muted); }
.mount.strip { width: max-content; margin: 0 auto; } .filmbtn { padding: 2px; border: 2px solid transparent; background: none; border-radius: 6px; } .filmbtn.on { border-color: var(--accent); }
/* ledger: aging + invoices */
.ledger-sum.aging > div { min-width: 160px; flex: 1; } .agerow { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; } .agerow b { font-size: 14px; } .agerow.warn b { color: var(--warn); }
.ledger-sum .owe.a2, .ledger-sum .owe.a3 { border-color: var(--bad); } .ledger-sum .owe.a2 .agerow b, .ledger-sum .owe.a3 .agerow b { color: var(--bad); } .ledger-sum .totals { border-color: var(--accent); flex: 1.4; }
.invoices { display: flex; flex-direction: column; gap: 14px; }
.invoice { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; } .invoice.owing { border: 2px solid var(--warn); }
.inv-h { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .inv-tot { display: flex; flex-direction: column; } .inv-tot small { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; } .inv-tot b { font-size: 22px; }
.inv-status { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.eobbtn { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 10px; background: var(--bad-soft); border-color: transparent; color: var(--bad); font-weight: 500; } .eobbtn:hover { background: var(--bad); color: #fff; } .pdficon.sm { width: 22px; height: 26px; font-size: 8px; }
.inv-lines input.insin { width: 92px; text-align: right; padding: 3px 6px; font-size: 12.5px; font-variant-numeric: tabular-nums; } .inv-lines input.insin.est { color: var(--muted); border-style: dashed; }
.inv-f { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.eoblist li.clickable { cursor: pointer; } .eoblist li.clickable:hover { border-color: var(--accent); background: var(--panel2); } .eoblist .chev { font-size: 22px; color: var(--muted); }
.modal.pdfm { padding: 0; background: transparent; box-shadow: none; width: min(900px, 100%); overflow: visible; } .modal.pdfm .pdfview { margin: 0; max-height: 90vh; overflow-y: auto; }
@media (max-width: 760px) { .favform { grid-template-columns: 1fr; } .inv-status { margin-left: 0; } .od-arch.prim { width: 100%; } }

/* restorative history odontogram */
.restodo { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 8px; }
.rh-arch { display: grid; grid-template-columns: repeat(16, minmax(58px, 1fr)); gap: 3px; min-width: 980px; } .rh-arch.up { border-bottom: 2px solid var(--fg); padding-bottom: 4px; } .rh-arch.down { padding-top: 4px; }
.rh-cell { display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 60px; } .rh-arch.up .rh-cell { justify-content: flex-end; } .rh-cell.miss { opacity: .45; }
.rh-cell:nth-child(8) { border-right: 2px solid var(--fg); padding-right: 2px; }
.rh-num { font-family: var(--mono); font-size: 13px; font-weight: 600; padding: 3px 0; width: 100%; text-align: center; border-radius: 6px; background: var(--panel2); } .rh-num.has { background: var(--accent-soft); color: var(--accent); } .rh-num.miss { text-decoration: line-through; background: transparent; border: 1px dashed var(--line); }
.rh-pic { display: flex; flex-direction: column; align-items: center; gap: 1px; } .rh-pic svg { width: 26px; height: 36px; fill: var(--panel2); stroke: var(--muted); stroke-width: 1.2; } .rh-pic svg.flip { transform: scaleY(-1); } .rh-pic.has svg { fill: var(--accent-soft); stroke: var(--accent); } .rh-pic.crowned svg { fill: #e9c46a; stroke: #b8860b; } .rh-pic.miss svg { fill: none; stroke-dasharray: 3 2; } .rh-pic small { font-family: var(--mono); font-size: 11px; color: var(--muted); } .rh-pic.has small { color: var(--fg); font-weight: 600; }
.rh-list { display: flex; flex-direction: column; gap: 2px; align-items: stretch; width: 100%; } .rh-arch.up .rh-list { justify-content: flex-end; }
.rh { font-family: var(--mono); font-size: 10.5px; line-height: 1.25; padding: 1px 4px; border-radius: 4px; background: var(--v1); color: #fff; white-space: nowrap; display: flex; justify-content: space-between; gap: 3px; } .rh small { opacity: .85; font-size: 9.5px; } .rh.am { background: #6b7280; } .rh.crn { background: #b8860b; } .rh.rct { background: var(--v3); } .rh.ext { background: var(--bad); }
.rh-sw { background: var(--v1); border: 0; } .rh-sw.am { background: #6b7280; } .rh-sw.crn { background: #b8860b; } .rh-sw.rct { background: var(--v3); } .rh-sw.ext { background: var(--bad); }
.visit-h b { white-space: nowrap; }
.hcard.facts { background: #fff8e6; } :root:not([data-theme="light"]) .hcard.facts { background: #3a2f12; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .hcard.facts { background: #fff8e6; } }
.factlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; flex: 1; } .factlist li { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; font-size: 14px; padding: 4px 0; border-bottom: 1px dashed var(--line); } .factlist li:last-child { border: 0; } .hcard.facts form input { flex: 1; min-width: 0; }
.statuschip { font-weight: 600; cursor: pointer; } .statuschip.on { background: var(--ok-soft); color: var(--ok); border-color: transparent; } .statuschip.off { background: var(--bad-soft); color: var(--bad); border-color: transparent; } .statuschip.sm { font-size: 11px; font-weight: 500; }
.statusopts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .statusopts button { text-align: left; padding: 10px 12px; } .statusopts button.on { background: var(--bad-soft); color: var(--bad); border-color: var(--bad); }

/* round 4b: radiographs pop-up from the treatment plan */
.xraybtn { display: inline-flex; align-items: center; gap: 6px; background: #1c222a; color: #e6ebf1; border-color: #1c222a; } .xraybtn svg { width: 16px; height: 16px; }
.xpop { display: grid; grid-template-columns: 200px 1fr; gap: 14px; } .xpop-list { display: flex; flex-direction: column; gap: 6px; }
.xpop-set { text-align: left; display: flex; flex-direction: column; gap: 2px; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; } .xpop-set.on { border-color: var(--accent); } .xpop-set small { color: var(--muted); }
.xpop-main { display: flex; flex-direction: column; gap: 10px; align-items: center; } .xpop-main .xviewer { width: 100%; }
@media (max-width: 700px) { .xpop { grid-template-columns: 1fr; } .xpop-list { flex-direction: row; flex-wrap: wrap; } }

/* round 5: providers, commissions, exam waiting ring */
.provsel { font-size: 12px; padding: 2px 4px; border: 1px solid transparent; background: transparent; border-radius: 6px; color: var(--fg); max-width: 120px; } .provsel:hover, .provsel:focus { border-color: var(--line); background: var(--panel2); }
.inv-prov { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 8px 14px 10px; border-top: 1px dashed var(--line); font-size: 12px; color: var(--muted); } .inv-prov b { color: var(--fg); }
.examdoc-chip { margin-top: 6px; align-self: flex-start; font-size: 12px; padding: 3px 10px; border-radius: 999px; background: var(--panel2); border: 1px solid var(--line); color: var(--muted); } .examdoc-chip b { color: var(--fg); }
.examdocs { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.examdoc { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 12px; border: 2px solid var(--line); border-radius: 14px; background: var(--panel2); font-size: 15px; } .examdoc:hover { border-color: var(--accent); } .examdoc.on { border-color: var(--accent); background: var(--accent-soft, var(--panel2)); }
.examdoc .av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-weight: 700; font-size: 18px; margin-bottom: 4px; } .examdoc small { color: var(--muted); }
.chip.stage-g { background: var(--ok-soft); color: var(--ok); border-color: transparent; font-weight: 600; } .chip.stage-y { background: var(--warn-soft); color: var(--warn); border-color: transparent; font-weight: 600; } .chip.stage-r { background: var(--bad-soft); color: var(--bad); border-color: transparent; font-weight: 600; }
.stage-t.g { color: var(--ok); } .stage-t.y { color: var(--warn); } .stage-t.r { color: var(--bad); }
.examring { position: fixed; inset: 0; pointer-events: none; z-index: 45; box-shadow: inset 0 0 0 8px var(--ok); transition: box-shadow .8s; }
.examring.y { box-shadow: inset 0 0 0 8px var(--warn); } .examring.r { box-shadow: inset 0 0 0 10px var(--bad); animation: ringpulse 1.2s ease-in-out infinite; }
@keyframes ringpulse { 0%, 100% { box-shadow: inset 0 0 0 10px var(--bad); } 50% { box-shadow: inset 0 0 0 16px var(--bad); } }
.examring-tag { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); padding: 5px 16px 4px; border-radius: 10px 10px 0 0; font-size: 12px; font-weight: 600; color: #fff; background: var(--ok); white-space: nowrap; max-width: 90vw; overflow: hidden; text-overflow: ellipsis; }
.examring.y .examring-tag { background: var(--warn); } .examring.r .examring-tag { background: var(--bad); }
.field.inline input[type=number] { width: 64px; }

/* round 5b: perio staging and grading */
.pstatus { display: inline-flex; flex-direction: column; gap: 1px; padding: 4px 10px; border-radius: 8px; background: var(--panel2); border: 1px solid var(--line); line-height: 1.15; width: max-content; } .pstatus b { font-size: 15px; } .pstatus small { color: inherit; opacity: .8; font-size: 11px; }
.pstatus.lead { padding: 8px 14px; } .pstatus.lead b { font-size: 22px; } .pstatus.sm { padding: 2px 8px; } .pstatus.sm b { font-size: 12px; }
.pstatus.sH { background: var(--ok-soft); color: var(--ok); border-color: transparent; } .pstatus.sG { background: #e9f1fb; color: #2b5b9c; border-color: transparent; }
.pstatus.sI { background: #fff3d6; color: #8a5a00; border-color: transparent; } .pstatus.sII { background: #ffe6c2; color: #8a4b00; border-color: transparent; } .pstatus.sIII { background: var(--bad-soft); color: var(--bad); border-color: transparent; } .pstatus.sIV { background: var(--bad); color: #fff; border-color: transparent; }
.pstatus.none { color: var(--muted); border-style: dashed; }
.hcard.periocard { gap: 6px; }
.pstage { border: 1px solid var(--warn); background: var(--warn-soft); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; } .pstage.staged { border-color: var(--line); background: var(--panel2); }
.pstage-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .pstage-row > span { width: 52px; font-size: 12px; color: var(--muted); } .pstage-row .seg button { padding: 6px 12px; }
.pstage.shake { animation: shake .4s; } @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.pstrip { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
/* round 5c: next-visit estimate, predetermination batch, shields */
.units { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; } .units button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px; border: 2px solid var(--line); border-radius: 12px; background: var(--panel2); } .units button b { font-size: 26px; line-height: 1; } .units button small { color: var(--muted); font-size: 11px; } .units button.on { border-color: var(--accent); background: var(--accent); color: var(--accent-fg); } .units button.on small { color: inherit; opacity: .85; }
.estcard { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; background: var(--panel2); } .estcard > div > b { font-size: 20px; }
.estcodes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; } .estcodes li { display: grid; grid-template-columns: 56px 1fr auto; gap: 8px; font-size: 13px; } .estcodes .mono { color: var(--muted); }
.chip.est { background: var(--accent-soft, var(--panel2)); color: var(--accent); border-color: transparent; font-weight: 600; }
.shield { width: 15px; height: 15px; flex: none; } .shield path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; } .shield text { font-size: 11px; font-weight: 700; fill: currentColor; }
.shield.ok { color: #1d6fd1; } .shield.ok path:first-child { fill: #1d6fd1; } .shield.ok .tick { stroke: #fff; } .shield.bad { color: var(--bad); } .shield.wait { color: var(--muted); opacity: .7; } .shield.self { color: var(--warn); }
.predet-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: flex-start; padding: 12px 14px; background: var(--panel2); border-radius: 10px; }
.predets tr.rejected td:first-child { box-shadow: inset 3px 0 0 var(--bad); } .predets tr.selfpay td:first-child { box-shadow: inset 3px 0 0 var(--warn); } .predets tr.noreply td:first-child { box-shadow: inset 3px 0 0 var(--muted); }
input.mins { width: 64px; padding: 4px 6px; }

/* round 5d: odontogram lives on Notes / History, locked by default */
.notes .odonto { margin-top: 0; margin-bottom: 12px; } .od.locked { cursor: default; opacity: .85; } .od.locked:hover { border-color: transparent; } 
.odlock { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; } .odlock svg { width: 14px; height: 14px; }

/* tooth states on the teeth-present odontogram: present (normal), erupting (grey dotted), extracted (invisible), implant (blue outline + icon) */
.od { position: relative; }
.od.erupt { background: transparent; color: var(--muted); border: 1px dotted var(--muted); }
.od.miss { background: transparent; color: transparent; border: 1px solid transparent; text-decoration: none; } .od.miss:not(.locked):hover { border: 1px solid var(--line); }
.od.imp { background: var(--panel); color: #1d6fd1; border: 1.5px solid #1d6fd1; font-weight: 700; padding-right: 10px; }
.impicon { position: absolute; right: 2px; top: 1px; width: 8px; height: 12px; fill: #1d6fd1; }
.odlegend { display: flex; justify-content: flex-end; align-items: center; gap: 4px 6px; font-size: 11px; color: var(--muted); } .odlegend .od-k { display: inline-block; width: 12px; height: 10px; border-radius: 3px; background: var(--panel2); border: 1px solid transparent; margin-left: 6px; } .odlegend .od-k.erupt { background: transparent; border: 1px dotted var(--muted); } .odlegend .od-k.miss { background: transparent; border: 1px dashed var(--line); } .odlegend .od-k.imp { background: var(--panel); border: 1.5px solid #1d6fd1; position: relative; } .odlegend .od-k.imp .impicon { right: 1px; top: 0; width: 6px; height: 9px; }
.odlock { margin-left: auto; }

/* round 5g: restorative history jumps to notes; tooth filter */
.rh { border: 0; font: inherit; cursor: pointer; text-align: left; } .rh:hover { filter: brightness(.92); outline: 1px solid var(--accent); }
.rh-num, .rh-pic { border: 0; font: inherit; cursor: pointer; } .rh-num.sel, .rh-pic.sel { outline: 2px solid var(--accent); outline-offset: 1px; }
.tpick { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; margin: -4px 0 12px; } .tpick-row { display: flex; gap: 3px; flex-wrap: wrap; } .tpick-row button { min-width: 32px; padding: 3px 0; font-family: var(--mono); font-size: 12px; border-radius: 6px; background: var(--panel2); border: 1px solid transparent; } .tpick-row button:nth-child(8) { margin-right: 10px; } .tpick-row button.on { background: var(--accent); color: var(--accent-fg); } .tpick-row button.miss { color: var(--muted); text-decoration: line-through; opacity: .6; }
.note.focus { outline: 2px solid var(--accent); outline-offset: 2px; animation: notefocus 1.6s ease-out; } @keyframes notefocus { 0% { background: var(--accent-soft, var(--panel2)); } 100% { background: transparent; } }
.note.imported { border-color: var(--muted); background: var(--panel2); } .note.imported p { color: var(--muted); }

/* round 5h: odontogram and restorative history share one tooth state */
.rh.impl { background: #1d6fd1; } .rh-sw.impl { background: #1d6fd1; } .rh.ex { background: transparent; color: var(--fg); border: 1.5px dashed var(--muted); } .rh.ex.am { border-color: #6b7280; } .rh.ex.crn { border-color: #b8860b; color: #8a6508; } .rh.ex.rct { border-color: var(--v3); color: var(--v3); } .rh.ex.ext { border-color: var(--bad); color: var(--bad); } .rh.ex.impl { border-color: #1d6fd1; color: #1d6fd1; } .rh-sw.ex { background: transparent; border: 1.5px dashed var(--muted); }
.rh-num { position: relative; } .rh-num.imp { background: var(--panel); color: #1d6fd1; border: 1.5px solid #1d6fd1; padding-right: 10px; } .rh-num.imp .impicon { right: 2px; top: 3px; } .rh-num.erupt { background: transparent; color: var(--muted); border: 1px dotted var(--muted); }
.rh-num.miss { text-decoration: none; color: transparent; border: 0; background: transparent; } .rh-num.miss:hover { color: var(--muted); border: 1px dashed var(--line); }
.rh-pic.miss svg { opacity: 0; } .rh-pic.miss:hover svg { opacity: 1; } .rh-pic.miss small { color: transparent; } .rh-pic.miss:hover small { color: var(--muted); }
.rh-pic.erupt svg { fill: none; stroke: var(--muted); stroke-dasharray: 2 2; }
.rh-pic svg.implant { width: 16px; height: 34px; fill: #1d6fd1; stroke: none; } .rh-pic.imp small { color: #1d6fd1; font-weight: 700; }
.conflicts { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: var(--bad-soft); color: var(--bad); font-size: 12.5px; } .conflicts svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }

/* round 5i: printable invoice */
.inv-sum { display: flex; justify-content: flex-end; gap: 28px; margin: 12px 0 6px; } .inv-sum div { display: flex; flex-direction: column; align-items: flex-end; } .inv-sum span { font-size: 11px; color: #555; text-transform: uppercase; letter-spacing: .05em; } .inv-sum b { font-size: 18px; } .inv-sum .due b { color: #b3261e; }
.pdfpage .fine { font-size: 11px; color: #555; margin: 6px 0 0; }
@media print { body.printing-pdf > *:not(#overlay) { display: none !important; } body.printing-pdf .scrim { position: static; background: none; padding: 0; display: block; } body.printing-pdf .modal.pdfm { box-shadow: none; width: auto; max-height: none; overflow: visible; } body.printing-pdf .pdfbar, body.printing-pdf .posted, body.printing-pdf .toast { display: none !important; } body.printing-pdf .pdfview { background: none; max-height: none; overflow: visible; } body.printing-pdf .pdfpage { box-shadow: none; width: 100%; margin: 0; padding: 0; } }
.invoice-doc td:first-child, .invoice-doc td:nth-child(5) { white-space: nowrap; }
.toothchip { display: inline-flex; align-items: center; gap: 6px; background: var(--accent); color: var(--accent-fg); border-color: transparent; font-weight: 600; } .toothchip .x { background: none; border: 0; color: inherit; font-size: 15px; line-height: 1; padding: 0 2px; }

/* ---- tooth record pop-up (odontogram, unlocked): the record behind a tooth and the only ways to add to it ---- */
.trec { list-style: none; padding: 0; margin: 10px 0 14px; display: grid; gap: 8px; } .trec li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel2); } .trec li > div { flex: 1; display: grid; gap: 1px; } .trec li .rh { font-size: 11px; padding: 2px 6px; }
.trec-add { border-top: 1px solid var(--line); padding-top: 12px; display: grid; gap: 10px; } .trec-add .fld { display: grid; gap: 4px; font-size: 12px; font-weight: 600; } .trec-add .fld input { font-weight: 400; } .trec-add .grow { flex: 1; min-width: 220px; } .trec-add .grow input { width: 100%; }

/* ---- existing restorations pop-up (other offices, no codes) ---- */
.ex-arch { display: grid; gap: 4px; margin: 10px 0 12px; } .ex-arch .od.has { box-shadow: inset 0 -3px 0 var(--accent); } .ex-arch .od.on { background: var(--accent); color: #fff; } .ex-arch .od.miss { color: var(--muted); }
.ex-ctl { display: grid; gap: 10px; } .ex-ctl .seg.wrap { flex-wrap: wrap; } .ex-ctl .fld { display: grid; gap: 3px; font-size: 12px; font-weight: 600; } .ex-ctl .fld input { width: 90px; font-weight: 400; }
.ex-items { display: flex; flex-wrap: wrap; gap: 6px; min-height: 36px; margin: 12px 0; padding: 8px; border: 1px dashed var(--line); border-radius: 8px; }
.exbtn { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; } .exbtn svg { width: 14px; height: 14px; }
.codechip.ex { border-style: dashed; } .note.existing { border-style: dashed; }
/* ---- transfer of records ---- */
.transfer-foot { margin-top: 18px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel2); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .transfer-foot button { display: inline-flex; align-items: center; gap: 6px; } .transfer-foot svg { width: 16px; height: 16px; }
.transfer-doc h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; margin: 18px 0 6px; color: #333; border-bottom: 1px solid #ddd; padding-bottom: 3px; }
.tnote { padding: 8px 0; border-bottom: 1px solid #eee; break-inside: avoid; } .tnote-h { font-size: 12px; color: #444; } .tnote p { margin: 3px 0 4px; } .tcodes { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11px; color: #333; } .tcode b { font-family: var(--mono); } .tcode i { font-style: normal; color: #666; }
.txrays { display: grid; gap: 10px; } .txray { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; font-size: 12px; break-inside: avoid; } .txray .mount { padding: 4px; gap: 2px; } .txray .mount .film i { width: 28px; height: 21px; } .txray .mount.wide .film i { width: 120px; height: 44px; } .txray small { color: #555; }
/* ---- secure link ---- */
.sl-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; margin-top: 8px; } .sl-grid > div { display: grid; gap: 8px; align-content: start; }
.sl-files { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; } .sl-files li { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.sl-to { display: grid; gap: 6px; } .fld { display: grid; gap: 3px; font-size: 12px; font-weight: 600; } .fld input, .fld select, .fld textarea { font-weight: 400; width: 100%; }
.sl-key { background: var(--panel2); border-radius: 12px; padding: 14px; } .sl-url, .sl-pass { display: grid; gap: 2px; } .sl-url b { font-family: var(--mono); font-size: 15px; word-break: break-all; } .sl-pass b { font-family: var(--mono); font-size: 28px; letter-spacing: .08em; } .sl-url small, .sl-pass small { color: var(--muted); font-size: 11px; }
.portalview { background: #e9ecef; border-radius: 12px; overflow: hidden; } .pv-browser { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; background: #d8dde3; font-family: var(--mono); font-size: 12px; color: #333; }
.pv-page { background: #fff; color: #111; margin: 16px auto; width: min(520px, calc(100% - 32px)); border-radius: 10px; padding: 24px; box-shadow: 0 4px 18px rgba(0,0,0,.12); display: grid; gap: 10px; } .pv-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid #1c222a; padding-bottom: 8px; } .pv-head b { font-size: 18px; } .pv-page h3 { margin: 6px 0 0; } .pv-page p { margin: 0; }
.pv-form { display: flex; gap: 8px; } .pv-form input { flex: 1; font-family: var(--mono); font-size: 22px; letter-spacing: .12em; text-align: center; padding: 8px; }
.pv-files { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .pv-files li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid #e3e6ea; border-radius: 8px; font-size: 13px; }
.pv-foot { font-size: 11px; color: #666; border-top: 1px solid #eee; padding-top: 8px; } .pv-page .warn { color: var(--bad); }
.sl-log { margin-bottom: 14px; }
.rf-form { display: grid; grid-template-columns: 1fr 1fr 120px; gap: 10px; margin: 10px 0; } .rf-form .wide, .rf-form .chk { grid-column: 1 / -1; }
.letter p { line-height: 1.5; }
@media (max-width: 760px) { .sl-grid, .rf-form { grid-template-columns: 1fr; } }

/* ---- dentist home: planned-treatment card, work done, hygiene list ---- */
.hcard.wide3 { grid-column: 1 / -1; min-height: 0; }
.po-body { display: grid; gap: 6px; padding: 6px 0 2px; } .po-arch { display: grid; grid-template-columns: repeat(16, minmax(30px, 1fr)); gap: 3px; } .po-arch .pt:nth-child(8) { margin-right: 10px; }
.pt { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; padding: 4px 2px; min-height: 58px; border-radius: 8px; background: var(--panel2); border: 2px solid transparent; } .po-arch.down .pt { justify-content: flex-start; } .pt:hover { border-color: var(--accent); } .pt.has-today { border-color: var(--accent); background: var(--accent-soft); } .pt.miss { background: transparent; border: 1px dashed var(--line); } .pt.imp .ptn { color: #1d6fd1; }
.ptn { font-family: var(--mono); font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 2px; } .ptn .impicon { width: 8px; height: 11px; fill: #1d6fd1; }
.pmarks { display: flex; flex-direction: column; gap: 2px; align-items: stretch; width: 100%; }
.pm { display: block; font-style: normal; font-family: var(--mono); font-size: 10px; line-height: 1.3; padding: 1px 3px; border-radius: 4px; text-align: center; border: 1.5px solid transparent; background: var(--panel); color: var(--muted); }
.pm.today { background: var(--accent); color: #fff; font-weight: 700; } .pm.future { background: var(--panel); } .pm.future.v1 { border-color: var(--v1); color: var(--v1); } .pm.future.v2 { border-color: var(--v2); color: var(--v2); } .pm.future.v3 { border-color: var(--v3); color: var(--v3); } .pm.future.v4 { border-color: var(--v4); color: var(--v4); } .pm.future.v5 { border-color: var(--v5); color: var(--v5); }
.pm.unbooked { background: var(--panel2); border-color: var(--line); color: var(--fg); } .pm.pending { border-style: dashed; border-color: var(--muted); background: transparent; }
.polegend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--muted); align-items: center; } .polegend span { display: inline-flex; align-items: center; gap: 5px; } .polegend .pm { min-width: 26px; }
.po-sum { display: grid; gap: 6px; border-top: 1px solid var(--line); padding-top: 10px; font-size: 13px; } .po-sum > div { display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; } .po-sum b { display: inline-flex; align-items: center; gap: 6px; } .po-today b { color: var(--accent); }
.wlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .wlist li { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; background: var(--panel2); } .wlist li.off > span { color: var(--muted); text-decoration: line-through; } .wlist .num { font-variant-numeric: tabular-nums; }
.freqs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .freq { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); text-align: left; } .freq:hover { border-color: var(--accent); background: var(--accent-soft); } .freq b { font-size: 14px; } .freq small { color: var(--muted); font-size: 11px; }
.hyglist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .hyglist li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; background: var(--panel2); font-size: 12px; } .hyglist li > div { display: grid; } .hyglist small { color: var(--muted); } .hyglist li.ready.g { box-shadow: inset 3px 0 0 var(--ok); } .hyglist li.ready.y { box-shadow: inset 3px 0 0 var(--warn); } .hyglist li.ready.r { box-shadow: inset 3px 0 0 var(--bad); }
.ex-arch .od.has { box-shadow: inset 0 -3px 0 var(--accent); } .ex-arch .od small { font-size: 9px; margin-left: 2px; }
@media (max-width: 760px) { .freqs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .po-arch { grid-template-columns: repeat(16, 30px); } .po-body { overflow-x: auto; } }
/* ---- message thread pop-up ---- */
.thr { max-height: 46vh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 10px; background: var(--panel2); border-radius: 12px; margin: 8px 0; } .thr-day { align-self: center; font-size: 11px; color: var(--muted); margin: 6px 0 2px; }
.msg { max-width: 78%; padding: 8px 12px; border-radius: 14px; font-size: 13.5px; display: grid; gap: 4px; } .msg p { margin: 0; } .msg small { font-size: 10.5px; opacity: .7; } .msg.in { align-self: flex-start; background: var(--panel); border-bottom-left-radius: 4px; } .msg.out { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.msg .att { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.4); color: inherit; border-radius: 8px; padding: 6px 8px; text-align: left; } .msg.in .att { background: var(--panel2); border-color: var(--line); } .msg .att span { display: grid; } .msg .att small { opacity: .8; }
.thr-att { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px dashed var(--line); border-radius: 8px; font-size: 13px; margin-bottom: 8px; }
.thr-send { display: grid; gap: 8px; } .thr-send .quick { display: inline-flex; gap: 6px; flex-wrap: wrap; } .thr-send input { flex: 1; }
.attlist { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; } .attlist li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; } .attlist li.dim { opacity: .6; }

/* ---- dentist day sheet: same width as hygiene's, two chairs side by side on a time grid ---- */
.ds-cols { display: grid; grid-template-columns: 38px 1fr 1fr; gap: 4px; padding: 8px 8px 8px 4px; } .ds-col.gutter .ds-grid { border-top-color: transparent; } .ds-hl { position: absolute; right: 2px; top: 0; transform: translateY(-50%); font-size: 12px; color: var(--muted); } .ds-colh { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; padding: 0 0 4px 2px; }
.ds-grid { position: relative; border-top: 1px solid var(--line); } .ds-hr { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--line); } .ds-hr span { position: absolute; top: -7px; left: 0; font-size: 10px; color: var(--muted); background: var(--panel); padding-right: 3px; line-height: 1.3; }
.dblock.two { position: absolute; left: 0; right: 0; padding: 3px 5px 3px 6px; overflow: hidden; border-left-width: 4px; gap: 0 4px; } .dblock.two .dtime { font-size: 12px; } .dblock.two .dname { font-size: 14.5px; line-height: 1.2; } .dblock.two .dtype { font-size: 12px; line-height: 1.2; } .dblock.two .dstatus { font-size: 10px; }

/* ---- round 6.1: slim planner, fee-guide search, plan cards + archive ---- */
.plan-head { align-items: center; } .plan-head .h-sm { margin: 0; font-size: 18px; }
.mic.sm { width: 38px; height: 38px; border-radius: 50%; } .mic.sm.on { background: var(--ok); color: #fff; border-color: var(--ok); animation: pulse 1.6s infinite; } .mic.sm.paused { background: var(--warn); color: #fff; border-color: var(--warn); }
.dictbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--panel); border: 1px solid var(--ok); border-radius: var(--r); padding: 8px 12px; } .dictbar.paused { border-color: var(--warn); } .dictbar > b { font-size: 13px; } .dictbar .say { flex: 1 1 260px; display: flex; gap: 6px; } .dictbar .say input { flex: 1; min-width: 0; } .dictbar .quick { display: flex; gap: 6px; flex-wrap: wrap; } .dictbar .vlog { font-family: var(--mono); font-size: 12px; color: var(--muted); flex: 1 1 100%; } .dictbar .x { margin-left: auto; }
.entry.one { grid-template-columns: 1fr; }
.feesearch { display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); } .feesearch .field { max-width: 460px; }
.feehit { display: grid; grid-template-columns: 56px 1fr auto auto auto; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 8px; background: var(--panel2); font-size: 13px; } .feehit + .feehit { margin-top: 4px; } .feehit code { font-family: var(--mono); font-size: 12px; }
.plancards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .pcard { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; text-align: left; display: flex; flex-direction: column; gap: 4px; min-height: 96px; cursor: pointer; } .pcard .lead { font-size: 22px; font-weight: 600; line-height: 1.1; } .pcard.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .pcard.add { background: var(--accent-soft, var(--panel2)); border-color: transparent; } .pcard.add .lead { color: var(--accent); font-size: 28px; }
.lead-q { font-size: 16px; font-weight: 500; margin: 0 0 12px; }
.archgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; } .archcard { display: flex; flex-direction: column; gap: 8px; } .archvisit small { display: block; margin-bottom: 2px; } .architems { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; } .architems li { display: grid; grid-template-columns: 64px 1fr auto auto; gap: 8px; font-size: 12.5px; padding: 3px 6px; border-radius: 6px; background: var(--panel2); } .architems li.completed { opacity: .75; } .architems code { font-family: var(--mono); }
@media (max-width: 760px) { .plancards { grid-template-columns: 1fr; } .feehit { grid-template-columns: 56px 1fr auto; } .feehit .muted { display: none; } }

/* ---- round 6.2: family tree, recare chips, appointments tab ---- */
.grid2 .span2 { grid-column: 1 / -1; }
.rchip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 2px 9px 2px 7px; border-radius: 999px; line-height: 18px; white-space: nowrap; } .rchip i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; } .rchip.sm { font-size: 11px; padding: 1px 7px 1px 6px; }
.rchip.booked { background: var(--ok-soft); color: var(--ok); } .rchip.due { background: var(--warn-soft); color: var(--warn); } .rchip.overdue { background: var(--bad-soft); color: var(--bad); } .rchip.ok, .rchip.off { background: var(--panel2); color: var(--muted); }
.famtree { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 6px 0 0; } .famtree.none { align-items: flex-start; gap: 6px; }
.fam-parents { display: flex; align-items: stretch; justify-content: center; gap: 0; width: 100%; }
.fam-person { position: relative; background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; min-width: 200px; max-width: 280px; flex: 1; text-align: left; cursor: pointer; } .fam-person.me { cursor: default; background: var(--panel); border: 2px solid var(--accent); box-shadow: 0 6px 18px rgba(0,0,0,.08); transform: scale(1.04); z-index: 1; } .fam-person.off { opacity: .6; }
.fam-person:not(.me):hover { border-color: var(--accent); }
.fam-me { position: absolute; top: -9px; left: 12px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 1px 7px; border-radius: 999px; }
.fam-name { display: flex; align-items: center; gap: 8px; } .fam-name b { display: block; font-size: 14px; } .fam-person.me .fam-name b { font-size: 17px; } .fam-name small { color: var(--muted); font-size: 12px; }
.fam-phone { display: flex; align-items: center; gap: 6px; font-size: 13px; font-variant-numeric: tabular-nums; } .fam-phone svg { width: 14px; height: 14px; color: var(--muted); } .fam-phone .link { margin-left: auto; }
.fam-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.fam-link { display: flex; align-items: center; flex: 0 0 120px; align-self: center; gap: 4px; } .fam-link i { flex: 1; height: 0; border-top: 3px solid var(--ok); } .fam-link span { font-size: 11px; font-weight: 600; color: var(--ok); white-space: nowrap; }
.fam-link.sep i { border-top: 3px dashed var(--bad); } .fam-link.sep span { color: var(--bad); } .fam-link.sep i:first-child { margin-right: 6px; } .fam-link.sep i:last-child { margin-left: 6px; }
.fam-bus { width: 100%; height: 26px; position: relative; } .fam-bus::before { content: ''; position: absolute; left: 50%; top: 0; height: 100%; border-left: 2px solid var(--line); } .fam-bus i { position: absolute; left: 15%; right: 15%; bottom: 0; border-top: 2px solid var(--line); }
.famtree.separated .fam-bus::before { border-left-style: dashed; }
.fam-children { display: flex; justify-content: center; gap: 14px; width: 100%; flex-wrap: wrap; } .fam-children .fam-person { min-width: 170px; max-width: 240px; flex: 0 1 220px; } .fam-children .fam-person::before { content: ''; position: absolute; left: 50%; top: -14px; height: 14px; border-left: 2px solid var(--line); }
.fam-note { width: 100%; text-align: left; margin: 10px 0 0; }
.famtree.compact .fam-person { min-width: 0; padding: 6px 8px; gap: 3px; border-radius: 9px; } .famtree.compact .fam-person.me { transform: none; } .famtree.compact .fam-name b { font-size: 12.5px; } .famtree.compact .fam-person.me .fam-name b { font-size: 13.5px; } .famtree.compact .fam-name small { font-size: 11px; } .famtree.compact .fam-phone { font-size: 12px; } .famtree.compact .fam-link { flex-basis: 70px; } .famtree.compact .fam-link span { font-size: 10px; } .famtree.compact .fam-bus { height: 14px; } .famtree.compact .fam-children { gap: 8px; } .famtree.compact .fam-children .fam-person { flex: 1 1 110px; min-width: 110px; max-width: none; } .famtree.compact .fam-children .fam-person::before { top: -8px; height: 8px; } .famtree.compact .fam-me { font-size: 9px; top: -8px; }
.mini-fam { border-top: 1px solid var(--line); padding-top: 6px; } .mini-fam > small { display: block; margin-bottom: 2px; }
.callpop:has(.famtree) { width: min(470px, calc(100vw - 32px)); }
.appts { display: flex; flex-direction: column; gap: 12px; } .appt-day { font-size: 13px; color: var(--muted); font-weight: 600; margin: 12px 0 4px; } .appt-tbl td { vertical-align: middle; } .appt-tbl tr.me td { background: var(--accent-soft, var(--panel2)); } .appt-tbl tr.me td:first-child { border-left: 3px solid var(--accent); } .appt-tbl tr.canc td { color: var(--muted); } .appt-tbl td.end { text-align: right; }
.dcard.expand { width: 100%; text-align: left; cursor: pointer; } .dcard.expand:hover { border-color: var(--accent); } .dcard.expand .caret { font-size: 18px; color: var(--muted); }
@media (max-width: 760px) { .fam-parents { flex-direction: column; align-items: stretch; } .fam-link { flex-direction: column; height: 40px; flex-basis: auto; } .fam-link i { width: 0; height: 100%; border-top: 0; border-left: 3px solid var(--ok); } .fam-link.sep i { border-left-style: dashed; border-color: var(--bad); } .fam-person { max-width: none; } .fam-person.me { transform: none; } }

/* ---- round 6.2: side menu only for Owner / manager; front desk gets a slim top strip ---- */
.topnav { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; margin: -4px 0 12px; padding: 0 0 8px; border-bottom: 1px solid var(--line); } .topnav button { background: transparent; border: 0; border-radius: 8px; padding: 5px 10px; font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; } .topnav button:hover { background: var(--panel2); color: var(--fg); } .topnav button.on { background: var(--panel2); color: var(--fg); font-weight: 600; }

/* ---- round 6.3: dentist work bubbles, change-surfaces and Add work pop-ups ---- */
.wbubbles { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wbub { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 12px; border: 2px solid var(--line); background: var(--panel2); font-size: 15px; line-height: 1; cursor: pointer; } .wbub b { font-family: var(--mono); font-weight: 600; } .wbub small { font-size: 11px; color: var(--muted); }
.wbub.plan { border-color: var(--accent); background: var(--accent-soft, var(--panel2)); color: var(--accent); } .wbub.added { border-color: var(--ok); background: var(--ok-soft); color: var(--ok); } .wbub.off { border-style: dashed; color: var(--muted); background: transparent; } .wbub.off b { text-decoration: line-through; }
.wbub.add { border-style: dashed; color: var(--fg); background: transparent; font-weight: 600; font-size: 14px; } .wbub.add:hover { border-color: var(--accent); color: var(--accent); }
.wbub .x { color: inherit; opacity: .7; padding: 0 2px; }
.codeline { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 8px 10px; border-radius: 8px; background: var(--panel2); } .codeline code { font-family: var(--mono); } .codeline b { margin-left: auto; }
.modal.addwork { width: min(1000px, 100%); } .modal.addwork .teeth { margin-top: 4px; } .modal.addwork .arch { grid-template-columns: repeat(16, minmax(40px, 1fr)); } .modal.addwork .tooth { min-height: 56px; }

/* ---- round 6.3: wider call window, minimized call strip ---- */
.callpop { width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; }
.callpop:has(.famtree) { width: min(720px, calc(100vw - 32px)); }
.mini-body { display: grid; gap: 6px 16px; } .mini-body.two { grid-template-columns: minmax(170px, 210px) minmax(0, 1fr); align-items: start; } .mini-body .mini-fam { border-top: 0; padding-top: 0; border-left: 1px solid var(--line); padding-left: 14px; }
.callpop .reason-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.callbar { position: fixed; top: 0; left: 0; right: 0; height: 42px; z-index: 70; display: flex; align-items: center; gap: 14px; padding: 0 16px; background: var(--fg); color: #fff; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,.25); } .callbar.live { background: var(--ok); } .callbar.ringing { background: var(--accent); } .callbar.outcome, .callbar.reason { background: var(--fg); }
.cb-state { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; } .cb-state .timer { color: rgba(255,255,255,.85); margin: 0; } .cb-state .chip { background: rgba(255,255,255,.18); color: #fff; border-color: transparent; } .cb-state .dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: pulse 1.6s infinite; } .cb-state .pulse { background: #fff; }
.cb-hint { color: rgba(255,255,255,.7); font-size: 12px; } .cb-btns { margin-left: auto; display: flex; gap: 6px; } .cb-btns .ghost { color: #fff; border-color: rgba(255,255,255,.5); background: transparent; } .cb-btns .ghost:hover { background: rgba(255,255,255,.15); } .cb-btns .danger { background: var(--bad); color: #fff; border-color: transparent; } .cb-btns .primary { background: #fff; color: var(--fg); border-color: transparent; }
body.callbar-on { padding-top: 42px; } body.callbar-on .top { top: 42px; }
@media (max-width: 760px) { .mini-body.two { grid-template-columns: 1fr; } .mini-body .mini-fam { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 6px; } .callpop .reason-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cb-hint { display: none; } }

/* ---- round 6.4: drop ghost, queued confirmation texts, edit codes ---- */
.dropghost { position: absolute; left: 3px; right: 3px; z-index: 6; pointer-events: none; border: 2px dashed var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); border-radius: 8px; padding: 4px 8px; color: var(--ok); font-size: 12px; line-height: 1.2; display: flex; flex-direction: column; gap: 2px; overflow: hidden; } .dropghost b { font-family: var(--mono); font-size: 12.5px; } .dropghost small { opacity: .9; }
.dropghost.bad { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, transparent); color: var(--bad); } .dropghost.snapped { border-style: solid; }
.col.nofit { background: repeating-linear-gradient(135deg, transparent 0 8px, color-mix(in srgb, var(--bad) 7%, transparent) 8px 10px); } .col.nofit .appt { opacity: .6; }
.col.over .dropghost { pointer-events: none; }
.qtext { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; color: var(--fg); } .qtext b { font-family: var(--mono); } .qtext-row { margin: 6px 0; }
.bookedbar > span:first-child { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.estcodes li .x { justify-self: end; } .estcodes li:has(.x) { grid-template-columns: 56px 1fr auto auto; }

/* ---- round 6.4.2: pull planned work into today ---- */
.tooth.pull { cursor: copy; } .tooth.pull:hover { box-shadow: 0 0 0 3px var(--accent-soft, rgba(0,0,0,.08)); border-style: solid; }

/* ---- round 6.5: day sheet expands to all chairs at the bottom of the cards ---- */
.hyg.dent.wide { grid-template-columns: var(--dsw) minmax(0, 1fr); } /* cards keep their size; the sheet overlays to the right */
.daysheet.wide { position: sticky; top: 60px; max-height: calc(100vh - 72px); overflow-y: auto; width: min(760px, calc(100vw - 48px)); z-index: 40; box-shadow: 0 18px 48px rgba(20, 30, 50, .22); animation: dsgrow .22s ease-out; }
@keyframes dsgrow { from { width: var(--dsw); opacity: .6; } to { opacity: 1; } }
.ds-expand { white-space: nowrap; }
.ds-head.wide { padding: 12px 12px 8px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; } .ds-head.wide > .row > div > b { display: block; font-size: 16px; } .ds-head.wide > .row > div > span { color: var(--muted); font-size: 12px; }
.ds-head.wide .prodbars, .ds-head.wide .production { gap: 6px; } .legend.sm { font-size: 11px; gap: 8px 12px; } .legend .sw.ready { background: var(--warn); }
.ds-cols.n4 { grid-template-columns: 38px repeat(4, minmax(0, 1fr)); } .ds-colh small { display: block; font-weight: 400; color: var(--muted); font-size: 10px; line-height: 1.1; }
.ds-lunch { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--line) 60%, transparent) 6px 8px); pointer-events: none; border-radius: 4px; }
.dblock.two.ready { outline: 2px solid var(--warn); outline-offset: -1px; } .dblock.two.ready.r { outline-color: var(--bad); } .dblock.two.ready.g { outline-color: var(--ok); }
.ds-hint { text-align: center; margin: 24px 0 8px; }
@media (max-width: 1100px) { .hyg.dent.wide { grid-template-columns: 1fr; } .daysheet.wide { position: static; max-height: none; width: auto; animation: none; } }

/* ---- round 6.6: next-visit overview card and visits pop-up ---- */
.nv-list { list-style: none; margin: 4px 0 2px; padding: 0; display: flex; flex-direction: column; gap: 4px; width: 100%; }
.nv-list li { display: grid; grid-template-columns: 10px auto minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; font-size: 12.5px; padding: 5px 8px; border-radius: 8px; background: rgba(255,255,255,.55); color: var(--fg); } .nv-list li b { font-size: 12.5px; } .nv-list li .mono { font-family: var(--mono); font-size: 12.5px; font-weight: 500; line-height: 1.3; } .nv-list li small { grid-column: 3; color: var(--muted); white-space: nowrap; font-size: 11px; } .nv-list li em { grid-column: 4; grid-row: 1 / span 2; font-style: normal; font-size: 11px; font-weight: 600; color: var(--accent); white-space: nowrap; } .nv-list li.booked em { color: var(--ok); } .nv-list li.booked { opacity: .8; }
.hcard.nv { gap: 4px; } .hcard.nv .lead { font-size: 20px; }
.modal.visits { width: min(960px, 100%); } .modal.visits .visits { margin-top: 4px; } .modal.visits .visit .primary { margin-top: 4px; }
.bookedbar.arm { background: var(--accent-soft, var(--panel2)); color: var(--accent); margin-bottom: 10px; }
@media (max-width: 760px) { .nv-list li { grid-template-columns: 10px auto minmax(0, 1fr); } .nv-list li em { display: none; } }

/* round 6.7: perio page — blank today sheet, one large entry site, previous probings as cards, mic icon only */
.perio-root .pstrip .grow { flex: 1; } .perio-root .dictbar { margin-bottom: 12px; }
.today-probe .ccard-h { display: block; margin-bottom: 2px; } .today-probe kbd { font-family: var(--mono); font-size: 11px; border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; background: var(--panel2); }
.today-probe .vlog { margin-top: 4px; }
.perio-root .pane-h { display: flex; align-items: baseline; gap: 10px; } .perio-root .pane-h small { color: var(--muted); }
.probecards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 8px; }
.pcard.probe { gap: 6px; } .pcard.probe .lead { font-size: 18px; } .pcard.probe.on { grid-column: 1 / -1; cursor: default; border-color: var(--accent); }
.pcard.probe .caret { color: var(--muted); font-size: 14px; }
.probe-sum { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); } .probe-sum b { color: var(--fg); font-size: 14px; } .probe-sum .warn b { color: var(--bad); }
.probe-quads { display: flex; gap: 8px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); } .probe-quads span { padding: 2px 8px; border-radius: 999px; background: var(--panel2); } .probe-quads b { color: var(--fg); } .probe-quads .warn b { color: var(--bad); }
.probe-full { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 10px; cursor: default; }
@media (max-width: 1100px) { .probecards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .probecards { grid-template-columns: 1fr; } }

/* round 6.9: dentist Planned treatment card mirrors the Treatment plan tab */
.planodo .teeth.ro .tooth { cursor: pointer; } .planodo .teeth.ro .tooth:hover { border-color: var(--accent); }
.planodo .visits { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin-top: 2px; } .planodo .visit.clickable { cursor: pointer; } .planodo .visit.clickable:hover { box-shadow: 0 0 0 3px var(--accent-soft); }
.planodo .visit .bubble { cursor: default; } .planodo .visit .visit-f { margin-top: auto; }

/* round 7.0: name menu + Administration, visit length pop-up, favourite categories, blocked time, week day sheet */
.whowrap { position: relative; } .who { font-weight: 600; background: transparent; border: 1px solid transparent; padding: 6px 10px; border-radius: 10px; display: inline-flex; align-items: center; gap: 6px; } .who:hover, .who[aria-expanded="true"] { background: var(--panel2); border-color: var(--line); } .who small { color: var(--muted); }
.usermenu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 230px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 40px rgba(20,30,50,.18); padding: 6px; z-index: 60; display: flex; flex-direction: column; }
.um-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; display: flex; flex-direction: column; } .um-head small { color: var(--muted); }
.usermenu button[role="menuitem"] { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 10px; border: 0; background: transparent; border-radius: 8px; font-size: 14px; } .usermenu button[role="menuitem"]:hover:not(:disabled) { background: var(--panel2); } .usermenu button[role="menuitem"]:disabled { color: var(--muted); } .usermenu button[role="menuitem"] small { margin-left: auto; color: var(--muted); font-size: 11px; } .usermenu button.danger { color: var(--bad); } .usermenu svg { width: 16px; height: 16px; }
.modal.vmin { width: min(460px, 100%); } .vmin-row { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 6px 0 10px; } .vmin-big { font-size: 44px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; } .vmin-big small { font-size: 14px; font-weight: 500; color: var(--muted); margin-left: 6px; } .vmin-presets { flex-wrap: wrap; } .vmin-presets button { min-width: 48px; }
.visit-f .vmin { font: inherit; padding: 0 4px; border-radius: 6px; } .visit-f .vmin:hover { background: var(--accent-soft); text-decoration: none; } .visit-f .vmin.custom { color: var(--accent); font-weight: 600; }
:root { --cat-resto: #2a7de1; --cat-crown: #c9821a; --cat-endo: #7a4ad8; --cat-surg: #d0433a; --cat-prev: #2e9e6b; --cat-perio: #a0527b; --cat-diag: #5b6b7f; --cat-prosth: #8a6d3b; --cat-other: #6b7280; }
.favbtn { padding: 8px 14px; border-width: 2px; font-weight: 600; } .favbtn.cat-resto { border-color: var(--cat-resto); } .favbtn.cat-crown { border-color: var(--cat-crown); } .favbtn.cat-endo { border-color: var(--cat-endo); } .favbtn.cat-surg { border-color: var(--cat-surg); } .favbtn.cat-prev { border-color: var(--cat-prev); } .favbtn.cat-perio { border-color: var(--cat-perio); } .favbtn.cat-diag { border-color: var(--cat-diag); } .favbtn.cat-prosth { border-color: var(--cat-prosth); } .favbtn.cat-other { border-color: var(--cat-other); }
.favbtn.on { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); } .favbtn.add { border-width: 1px; font-weight: 500; border-style: dashed; }
.favlegend { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; } .sw.cat-resto { background: var(--cat-resto); } .sw.cat-crown { background: var(--cat-crown); } .sw.cat-endo { background: var(--cat-endo); } .sw.cat-surg { background: var(--cat-surg); } .sw.cat-prev { background: var(--cat-prev); }
.favtag { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; color: #fff; font-weight: 600; font-size: 12.5px; font-style: normal; } .favtag.sm { font-size: 10.5px; padding: 1px 7px; } .favtag.cat-resto { background: var(--cat-resto); } .favtag.cat-crown { background: var(--cat-crown); } .favtag.cat-endo { background: var(--cat-endo); } .favtag.cat-surg { background: var(--cat-surg); } .favtag.cat-prev { background: var(--cat-prev); } .favtag.cat-perio { background: var(--cat-perio); } .favtag.cat-diag { background: var(--cat-diag); } .favtag.cat-prosth { background: var(--cat-prosth); } .favtag.cat-other { background: var(--cat-other); }
.favlist li { grid-template-columns: auto 1fr auto; } .favlist code { font-family: var(--mono); color: var(--accent); margin-right: 6px; }
.favadd { border-top: 1px solid var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 8px; } .favadd > input { width: 100%; }
.favhits { display: flex; flex-direction: column; gap: 4px; max-height: 240px; overflow-y: auto; } .feehit.pick { width: 100%; text-align: left; grid-template-columns: 64px 1fr auto auto; background: var(--panel2); border: 1px solid transparent; } .feehit.pick:hover { border-color: var(--accent); } .feehit.pick.on { border-color: var(--accent); background: var(--accent-soft); }
.favform { grid-template-columns: 1fr 1fr; } .favform code { font-family: var(--mono); }
.feesearch .field.grow { flex: 1; } .seg.sm button { padding: 4px 10px; font-size: 12px; }
.feefilter { min-width: 260px; } .fee-in { width: 90px; text-align: right; }
.hours tr.closed td { color: var(--muted); } .inline-in { width: 110px; }
.blockform { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; } .blockform button { grid-column: 1 / -1; justify-self: end; }
.col .blocked, .ds-lunch.blocked { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(135deg, var(--panel2) 0 6px, transparent 6px 12px), var(--panel); border: 1px dashed var(--line); border-radius: 6px; font-size: 10.5px; color: var(--muted); display: flex; align-items: flex-start; justify-content: center; padding-top: 3px; overflow: hidden; pointer-events: none; box-sizing: border-box; z-index: 1; } .sw.blocked { background: repeating-linear-gradient(135deg, var(--muted) 0 3px, transparent 3px 6px); }
.ds-lunch.blocked small { font-size: 10px; }
.daysheet.wide.week { width: min(1340px, calc(100vw - 48px)); }
.ds-week { padding: 8px; } .wk-days { display: grid; grid-template-columns: repeat(5, 1fr); margin-left: 60px; gap: 0 4px; margin-bottom: 4px; } .wk-days b { font-size: 12.5px; text-align: center; padding: 4px; background: var(--panel2); border-radius: 6px; } .wk-days b.today { background: var(--accent-soft); color: var(--accent); }
.sched.compact .colh { font-size: 11px; padding: 2px 4px; } .sched.compact .appt { font-size: 10px; padding: 1px 4px; line-height: 1.15; } .sched.compact .appt .appt-top b { font-size: 10px; } .sched.compact .appt .st, .sched.compact .appt .tag, .sched.compact .appt .items { display: none; } .sched.compact .tlabel { font-size: 10px; } .col.today { background: color-mix(in srgb, var(--accent-soft) 45%, var(--panel)); }
.seg.wrap { flex-wrap: wrap; }

/* round 7.1: draggable pop-ups, recare status colour */
.mhead.draggable, .call-head.draggable { cursor: grab; user-select: none; touch-action: none; } .modal.dragging, .callpop.dragging { cursor: grabbing; box-shadow: 0 28px 70px rgba(0,0,0,.4); } .modal.moved { max-height: calc(100vh - 16px); }
.interval b.overdue { color: var(--bad); } .interval b.due { color: var(--warn); } .interval b.booked { color: var(--ok); } .hcard.recare .rchip { margin-left: auto; }
.hcard.recare.clickable { cursor: pointer; } .hcard.recare.clickable:hover { border-color: var(--accent); }

/* Draft 7.2: History card, Notes needed card + workflow page, big note buttons (Chris, 2026-10-05) */
.hcard.history { text-align: left; } .histlist { list-style: none; margin: 4px 0 6px; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.histlist li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; } .histlist li b { min-width: 96px; font-weight: 600; } .histlist .hcat { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); } .histlist .chip.warn { margin-left: auto; }
.hcard.notesdue { text-align: left; } .hcard.notesdue.late { border-color: var(--danger, #d64545); box-shadow: 0 0 0 1px var(--danger, #d64545) inset; } .hcard.notesdue.late .lead { color: var(--danger, #d64545); } .hcard.notesdue.due .lead { color: var(--warn, #c98a00); } .hcard.notesdue.ok .lead { color: var(--ok, #2f9e5b); }
.notebtn { width: 100%; margin-top: 10px; font-size: 16px; padding: 14px 20px; }
.notes-top { margin-bottom: 12px; } .notes-top .addnote { font-size: 16px; padding: 13px 22px; }
.ndcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-top: 12px; }
.ndcard { position: relative; text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 10px; cursor: pointer; }
.ndcard:hover { border-color: var(--accent); } .ndcard.late { border-color: var(--danger, #d64545); }
.nd-badge { position: absolute; top: 12px; right: 12px; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--panel2); color: var(--muted); }
.ndcard.late .nd-badge { background: var(--danger, #d64545); color: #fff; } .ndcard.today .nd-badge { background: var(--accent-soft); color: var(--accent); }
.nd-visit { display: flex; align-items: center; gap: 8px; font-size: 14px; } .nd-visit .sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
@media (max-width: 760px) { .ndcards { grid-template-columns: 1fr; } }
/* Draft 7.2: family tree above the summary cards, right-click menu, Together/Separated toggle, new partners */
.famcard { margin-bottom: 14px; }
.fam-link.clickable { cursor: pointer; background: none; border: 0; padding: 6px 0; border-radius: 8px; } .fam-link.clickable:hover { background: var(--panel2); } .fam-link.clickable span { text-decoration: underline dotted; }
.fam-link.small { flex: 0 0 56px; } .fam-link.small i { border-top-width: 2px; } .fam-link.small span { font-size: 10px; }
.fam-add { flex: 0 0 120px; align-self: center; border: 2px dashed var(--line); background: none; border-radius: 12px; padding: 14px 10px; color: var(--muted); display: flex; flex-direction: column; gap: 2px; font-weight: 600; cursor: pointer; } .fam-add small { font-weight: 400; font-size: 11px; } .fam-add:hover { border-color: var(--accent); color: var(--accent); }
.fam-person.partner { background: var(--panel); border-style: dashed; min-width: 170px; max-width: 220px; }
.fam-more { position: absolute; top: 6px; right: 8px; border: 0; background: none; color: var(--muted); font-size: 16px; line-height: 1; padding: 2px 6px; border-radius: 6px; cursor: pointer; opacity: 0; } .fam-person:hover .fam-more, .fam-more:focus { opacity: 1; } .fam-more:hover { background: var(--panel); color: var(--text); }
.ctxmenu { position: fixed; z-index: 60; min-width: 250px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.18); padding: 6px; display: flex; flex-direction: column; }
.ctxmenu .um-head { padding: 8px 10px 6px; display: flex; flex-direction: column; } .ctxmenu .um-head small { color: var(--muted); }
.ctxmenu button { text-align: left; border: 0; background: none; padding: 9px 10px; border-radius: 8px; font-size: 14px; cursor: pointer; display: flex; justify-content: space-between; gap: 8px; } .ctxmenu button:hover:not([disabled]) { background: var(--panel2); } .ctxmenu button[disabled] { color: var(--muted); cursor: not-allowed; } .ctxmenu button small { color: var(--muted); } .ctxmenu button.danger { color: var(--bad); }
.hitlist { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 10px; } .hit { display: flex; align-items: center; gap: 10px; text-align: left; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; cursor: pointer; } .hit:hover { border-color: var(--accent); }
.or { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; margin: 8px 0; }
/* Draft 7.3: contact pop-up, booking-contact star, texting campaigns */
.dcard.clickable { cursor: pointer; } .dcard.clickable:hover { border-color: var(--accent); }
.contactform h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 12px 0 6px; } .contactform .grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .contactform input { width: 100%; }
.segopt { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; font-size: 13px; cursor: pointer; } .segopt input { margin: 0; }
.fam-star { position: absolute; top: 4px; right: 30px; border: 0; background: none; font-size: 18px; line-height: 1; color: var(--line); cursor: pointer; padding: 2px 4px; border-radius: 6px; } .fam-star:hover { color: var(--warn); background: var(--panel); } .fam-star.on { color: var(--warn); }
.fam-star.static { position: static; font-size: 13px; cursor: default; padding: 0; } .fam-star.static.sm { font-size: 12px; }
.famtree.compact .fam-name b .fam-star { margin-left: 4px; }
.camplist { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 10px; } .camplist button { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel2); cursor: pointer; } .camplist button.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
@media (max-width: 760px) { .contactform .grid3 { grid-template-columns: 1fr; } }
/* Draft 7.4: invoice layout editor + accent-aware invoice */
.invlayout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 46%); gap: 16px; align-items: start; } .invctl { display: flex; flex-direction: column; gap: 12px; } .invctl .grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .invctl .inline-in { width: 100%; }
.invctl .chk { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; margin-right: 8px; } .invctl textarea { width: 100%; }
.invprev { position: sticky; top: 12px; } .invframe { margin-top: 8px; background: #555; border-radius: 10px; padding: 12px; overflow: auto; max-height: calc(100vh - 120px); } .invframe .pdfpage { width: 100%; margin: 0; padding: 26px 28px; font-size: 11.5px; box-shadow: none; } .invframe .pdfpage h2 { font-size: 16px; }
.invoice-doc h2 { color: var(--inv, #111); } .invoice-doc hr { border-color: var(--inv, #ddd); } .invoice-doc thead th { border-bottom: 2px solid var(--inv, #333); } .inv-head { display: flex; gap: 12px; align-items: flex-start; } .inv-logo { width: 42px; height: 42px; border-radius: 8px; background: var(--inv, #0f766e); color: #fff; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; letter-spacing: .02em; flex: none; }
@media (max-width: 1000px) { .invlayout { grid-template-columns: 1fr; } .invprev { position: static; } .invctl .grid3 { grid-template-columns: 1fr; } }
.tabs { flex-wrap: wrap; } /* Administration has more tabs than fit on one row */
/* Draft 7.5: real bitewing films, four-quadrant card, Radiographs page by date, per-slot capture */
.film i.bw, .capslot i.bw, .xthumb i.bw { background-image: url('img/bw4.png'); background-size: 200% 200%; background-repeat: no-repeat; background-color: #141a22; } .bw.q0 { background-position: 0 0; } .bw.q1 { background-position: 100% 0; } .bw.q2 { background-position: 0 100%; } .bw.q3 { background-position: 100% 100%; }
.bwgrid { display: grid; gap: 6px; padding: 8px; background: #1c222a; border-radius: 10px; margin-top: 8px; width: 100%; } .bwgrid.cols2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bwgrid .film i { width: 100%; aspect-ratio: 4 / 3; height: auto; border-radius: 6px; } .bwgrid .film figcaption { font-size: 11px; color: #cfd7e0; } .bwgrid .film.empty i { background: repeating-linear-gradient(45deg, #1c222a 0 6px, #242c36 6px 12px); } .bwgrid.big { padding: 12px; gap: 10px; max-width: 760px; } .bwgrid.big .film figcaption { font-size: 13px; }
.hcard.xraycard { text-align: left; } .hcard.xraycard .xdate { font-size: 20px; font-weight: 700; line-height: 1.1; }
.xago { font-size: 12px; font-weight: 600; color: var(--ok); background: var(--ok-soft); padding: 2px 9px; border-radius: 999px; white-space: nowrap; } .xago.due { color: var(--warn); background: var(--warn-soft); }
.xlatest { margin-top: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; } .xlatest-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-start; } .xlatest-head > div:first-child { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; } .xlatest .xdate { font-size: 22px; font-weight: 700; }
.xdates { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; } .xdatecard .xsets { margin-top: 6px; }
.capgrid { display: grid; gap: 12px; margin-top: 6px; } .capgrid.cols2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .capgrid.cols1 { grid-template-columns: minmax(0, 360px); }
.capslot { position: relative; background: var(--panel2); border: 2px solid var(--line); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; } .capslot.cur { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .capslot.got { border-color: var(--ok); }
.capslot i { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: 8px; background: repeating-linear-gradient(45deg, #1c222a 0 6px, #242c36 6px 12px); } .capslot.busy i { animation: expose 1.3s linear infinite; background: #141a22; } .capname { font-weight: 600; font-size: 14px; }
@keyframes expose { 0% { box-shadow: inset 0 0 0 0 rgba(90,169,255,.0); } 50% { box-shadow: inset 0 0 0 200px rgba(90,169,255,.25); } 100% { box-shadow: inset 0 0 0 0 rgba(90,169,255,0); } }
.modal.wide .capgrid.cols2 { max-width: 760px; margin: 0 auto; }
.note-foot { margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--line); } .note.editing { border-color: var(--accent); } .note-edit-text { width: 100%; margin: 6px 0; }
.film.mini.empty i { background: repeating-linear-gradient(45deg, #1c222a 0 5px, #242c36 5px 10px); }
.capgrid { width: 100%; } .modal.wide .capgrid.cols2 { max-width: 640px; }
/* Draft 7.6: colourful Full record button in the same spot on the overview and every sub-page */
.fullrec { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 0; border-radius: 999px; font-weight: 600; font-size: 13px; color: #fff; background: linear-gradient(135deg, #0f766e, #2563eb 60%, #7c3aed); box-shadow: 0 3px 10px rgba(37,99,235,.28); cursor: pointer; white-space: nowrap; } .fullrec:hover { filter: brightness(1.08); transform: translateY(-1px); } .fullrec svg { width: 15px; height: 15px; stroke: #fff; } .fullrec small { font-weight: 500; opacity: .9; }
.sub-head .grow { flex: 1; }
/* Draft 7.7: card stack beside the tall X-rays card, plan summary, visits-to-book bar on the schedule */
.hstack { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .hstack > .hcard { width: auto; }
.plansum { list-style: none; margin: 8px 0 6px; padding: 0; display: flex; flex-direction: column; gap: 5px; } .plansum li { display: grid; grid-template-columns: 10px auto 1fr auto; gap: 8px; align-items: center; font-size: 13px; } .plansum .sw { width: 10px; height: 10px; border-radius: 3px; } .plansum small { color: var(--muted); white-space: nowrap; }
.visitbar { background: var(--accent-soft); border: 1px solid transparent; border-radius: 12px; padding: 10px 14px; margin: 10px 0; } .visitrow { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; } .visitrow .visitcard { min-width: 220px; max-width: 320px; background: var(--panel); cursor: grab; }
@media (max-width: 760px) { .hstack { gap: 12px; } }
/* Draft 7.8: New Bitewings box beside the latest set, green perimeter for today's images, latest pan beneath */
.xtop { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 12px; align-items: stretch; } .xtop .xlatest { margin-top: 0; display: flex; flex-direction: column; } .xtop .bwgrid.big { max-width: none; }
.xlatest.today, .xset.today { border: 3px solid var(--ok); box-shadow: 0 0 0 4px var(--ok-soft); } .xset.today { border-radius: 12px; }
.xago.today { color: var(--ok); background: var(--ok-soft); }
.xlatest.xnew { border: 2px dashed var(--line); background: var(--panel2); } .xnew-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px 12px; min-height: 260px; } .xnew-body .primary.lg { display: inline-flex; align-items: center; gap: 8px; font-size: 17px; padding: 14px 26px; } .xnew-body .primary.lg svg { width: 18px; height: 18px; stroke: #fff; }
.xlatest.empty { display: flex; flex-direction: column; justify-content: center; }
.xpan { margin-top: 14px; } .film.panbig i { width: 100%; max-width: 900px; aspect-ratio: 2.6 / 1; height: auto; margin: 10px auto 0; border-radius: 10px; background: radial-gradient(ellipse at 50% 45%, #8a95a3 0, #4a5564 35%, #2a323c 65%, #141a22 100%); } .film.panbig figcaption { font-size: 12px; color: var(--muted); }
@media (max-width: 900px) { .xtop { grid-template-columns: 1fr; } }
/* Draft 7.9: armed visit bubble on the schedule with its length adjustable in place */
.armvisit { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .armvisit .sw { width: 12px; height: 12px; border-radius: 3px; } .vminctl { display: inline-flex; align-items: center; gap: 4px; } .vminbtn { font-weight: 700; min-width: 70px; } .vminbtn.custom { border-color: var(--accent); color: var(--accent); }
/* Draft 8.0: booking for production in plain words; dollars for admin only */
.prod.full { border-color: var(--ok); } .prod .open.ok { color: var(--ok); font-weight: 600; }
.chairfill { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: center; margin-top: 4px; font-size: 13.5px; } .chairfill .bar { margin: 0; } .chairfill small { grid-column: 2; color: var(--muted); font-size: 11px; } .chairfill.full small { color: var(--ok); }
.colh.full { background: var(--ok-soft); } .colh small { display: block; font-weight: 400; } .ds-colh .fill { display: block; font-weight: 400; font-size: 10px; color: var(--muted); white-space: normal; line-height: 1.15; } .ds-colh.full .fill { color: var(--ok); }

/* Draft 8.1 — tooth pop-up from the Planned treatment card */
.modal.toothadd { width: min(640px, 100%); }
.ta-sec { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel2); }
.ta-h { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.ta-sec .bubbles { display: flex; flex-wrap: wrap; gap: 6px; }

/* Draft 8.1 — "what's needed" bubble in chair titles (production bars removed); booking bubble */
.need { display: inline-flex; align-items: center; gap: 5px; margin-top: 3px; padding: 2px 8px 2px 4px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); color: var(--text); font-weight: 500; font-size: 11px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.need i { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); color: var(--accent-fg); font-style: normal; font-size: 10px; font-weight: 700; flex: none; }
.need.full { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); } .need.full i { background: var(--ok); }
.need.sm { font-size: 10px; padding: 1px 6px 1px 3px; letter-spacing: 0; text-transform: none; } .need.sm i { width: 12px; height: 12px; font-size: 9px; }
.colh { overflow: visible; } .colh .need { display: inline-flex; }
.needrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; } .needitem { display: flex; flex-direction: column; gap: 4px; font-size: 12px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.chairfill { grid-template-columns: auto 1fr; } .chairfill > span { white-space: nowrap; } .chairfill .need { justify-self: start; margin-top: 0; }
.armbubble { position: relative; display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; max-width: 100%; padding: 10px 40px 10px 14px; margin-bottom: 10px; border: 2px dashed var(--accent); border-radius: 16px; background: color-mix(in srgb, var(--accent-soft) 60%, var(--panel)); color: var(--accent); }
.armbubble .x.corner { position: absolute; top: 6px; right: 8px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; line-height: 1; padding: 0; }

/* Draft 8.1 — expanded dentist schedule is a plain full-width sheet (no overlay, no animation: it was laggy); clear Expand / Collapse buttons */
.hyg.dent.wide { grid-template-columns: 1fr; } .hyg.dent.wide > .hyg-main { display: none; }
.daysheet.wide, .daysheet.wide.week { position: static; top: auto; max-height: none; overflow: visible; width: auto; z-index: auto; box-shadow: none; animation: none; }
.ds-expand, .ds-collapse { white-space: nowrap; font-weight: 600; }
.ds-head.wide .row.gap.wrap { align-items: center; }
.need.mini { padding: 1px 5px 1px 2px; gap: 3px; } .sched.compact .colh { overflow: visible; white-space: normal; line-height: 1.2; }

/* Draft 8.2 — quadrant summary on the home cards */
.qcol.tap { background: none; border: 0; border-radius: 8px; padding: 2px 0; cursor: pointer; font: inherit; color: inherit; } .qcol.tap:hover { background: var(--accent-soft); } .qcol.tap:hover .qt { color: var(--accent); }
.qleg { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; display: flex; align-items: center; gap: 5px; border-radius: 6px; } .qleg:hover { color: var(--accent); }
.planodo .qmap { margin: 4px 0 6px; } .planodo .quad { min-height: 84px; }
.hcard.treat .qmap { margin-top: 8px; text-align: left; } .hcard.treat .quad { min-height: 64px; padding: 6px 2px; } .hcard.treat .qt { font-size: 11px; } .hcard.treat .qchip { font-size: 10px; padding: 1px 4px; } .hcard.treat .qlegend { margin-top: 6px; font-size: 11px; gap: 6px 10px; }

/* Draft 8.2 — staff colour picker under the side schedule */
.ds-links .link.on { font-weight: 700; }
.colourpick { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; font-size: 12px; } .colourpick small { width: 76px; color: var(--muted); }
.swatch { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); background: var(--sw); padding: 0; cursor: pointer; } .swatch.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }

/* Draft 8.2.2 — visit bubbles to the right of the quadrant chart (Chris, 2026-10-05) */
.plansplit { display: grid; grid-template-columns: minmax(0, 3fr) minmax(240px, 2fr); gap: 12px; align-items: start; }
.plansplit-l .qmap { margin: 0; } .plansplit-r .visits { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.plansplit-r .visit { padding: 8px 10px; } .plansplit-r .visit .visit-f { margin-top: 2px; }
@media (max-width: 1100px) { .plansplit { grid-template-columns: 1fr; } }
/* Draft 8.2.3 — larger type on the dentist's Planned treatment chart (Chris, 2026-10-05) */
.planodo .qt { font-size: 17px; } .planodo .qcol.has .qt { font-size: 18px; } .planodo .qchip { font-size: 14px; padding: 3px 8px; border-radius: 6px; } .planodo .quad { min-height: 110px; padding: 12px 4px; } .planodo .qitems { gap: 5px; } .planodo .qcol { gap: 6px; }

/* Draft 8.3 — crown = prep + cement visits; lab invoice chip */
.labchip { display: inline-flex; align-items: center; font: inherit; font-size: 10.5px; font-weight: 600; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); cursor: pointer; margin-left: 4px; }
.labchip.pending { border-color: var(--warn); color: var(--warn); background: var(--warn-soft); } .labchip.ok { border-color: var(--ok); color: var(--ok); background: var(--ok-soft); }
.bubble .labchip { margin-left: 6px; } .labform { display: flex; flex-direction: column; gap: 8px; }

/* Draft 8.4 — working card + working view; X-ray labels: age large, date small */
.xago.lead { display: inline-block; width: fit-content; font-size: 22px; font-weight: 700; line-height: 1.15; padding: 4px 14px; border-radius: 12px; }
.xdate.small { display: block; font-size: 13px; font-weight: 500; color: var(--muted); margin-top: 4px; }
.hcard.xraycard .xdate.small { font-size: 13px; font-weight: 500; }
.xlatest-head .xago.lead { margin-top: 2px; }
.hcard.workcard { text-align: left; }
.worksplit { display: grid; grid-template-columns: minmax(0, 3fr) minmax(96px, 1fr); gap: 10px; align-items: center; width: 100%; }
.workcard .quad { min-height: 46px; padding: 4px 1px; } .workcard .qt { font-size: 10px; } .workcard .qcol.has .qt { font-size: 11px; } .workcard .qchip { font-size: 9px; padding: 0 4px; } .workcard .qgrid .quad.up { border-bottom-width: 1.5px; } .workcard .qgrid .quad:nth-child(odd) { border-right-width: 1.5px; }
.workfilms { display: flex; flex-direction: column; gap: 6px; } .film.mini2 i { width: 100%; aspect-ratio: 4 / 3; height: auto; border-radius: 6px; } .film.mini2 figcaption { font-size: 9.5px; color: var(--muted); text-align: center; }
.workpage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.workq-page, .workx-page { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.workslots { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .workslot { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 12px; border: 2px solid transparent; } .workslot.picking { border-color: var(--accent); background: var(--accent-soft); }
.workslot .film.big i { max-width: none; height: auto; aspect-ratio: 4 / 3; } .film.big.empty i { background: repeating-linear-gradient(45deg, #1c222a 0 8px, #242c36 8px 16px); }
.worksug { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.workchooser { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px dashed var(--line); border-radius: 12px; background: var(--panel2); } .wc-films { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.wc-film { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); font-size: 10px; color: var(--muted); } .wc-film:hover { border-color: var(--accent); }
@media (max-width: 1100px) { .workpage { grid-template-columns: 1fr; } }

/* Draft 8.4.1 — drag bubbles between visits on the overview card */
.bubble.grab { cursor: grab; } .bubble.grab:active { cursor: grabbing; } .planodo .visit .bubble.grab { cursor: grab; }
.plansplit-r .visit.add { min-height: 56px; display: flex; align-items: center; justify-content: center; flex-direction: row; gap: 8px; border-style: dashed; cursor: default; } .plansplit-r .visit.add.over, .planodo .visit.over { border-color: var(--accent); background: var(--accent-soft); }

/* Draft 8.5 — simple working view with movable, resizable radiograph cards; Prescriptions tab */
.worktools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.workcanvas { position: relative; }
/* Draft 8.6: the treatment card floats over the big radiograph, bottom-left by default; drag its header anywhere */
.wquad { position: absolute; left: 14px; top: 14px; width: 330px; background: color-mix(in srgb, var(--panel) 88%, transparent); backdrop-filter: blur(6px); border: 1px solid var(--line); border-radius: 14px; padding: 8px 12px 10px; display: flex; flex-direction: column; gap: 4px; z-index: 6; box-shadow: 0 10px 30px rgba(20, 30, 50, .22); }
.wquad { transform-origin: top left; } .wquad-rs { position: absolute; right: 0; bottom: 0; width: 20px; height: 20px; cursor: nwse-resize; background: linear-gradient(135deg, transparent 50%, var(--accent) 50%); border-bottom-right-radius: 14px; opacity: .7; } .wquad-rs:hover { opacity: 1; } .wquad.dragging { box-shadow: 0 18px 48px rgba(20, 30, 50, .32); user-select: none; }
.wquad-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; cursor: grab; padding: 2px 0 4px; } .wquad.dragging .wquad-h { cursor: grabbing; }
.wquad .quad { min-height: 54px; padding: 4px 2px; } .wquad .qt { font-size: 11.5px; } .wquad .qcol.has .qt { font-size: 12.5px; } .wquad .qchip { font-size: 10px; padding: 1px 5px; }
.wcard { position: absolute; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 10px 30px rgba(20, 30, 50, .14); overflow: hidden; z-index: 2; }
/* the opening film is as wide as the screen allows without scrolling: height-limited by the viewport, 4:3 kept */
.wcard.fullw { position: relative; width: min(100%, calc((100vh - var(--work-top, 290px)) * 4 / 3 + 18px)); left: 0; top: 0; z-index: 1; }
.wcard.dragging, .wcard.resizing { box-shadow: 0 18px 48px rgba(20, 30, 50, .28); z-index: 5; user-select: none; }
.wcard-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 8px 7px 12px; border-bottom: 1px solid var(--line); cursor: grab; background: var(--panel2); } .wcard.dragging .wcard-h { cursor: grabbing; } .wcard-t { font-size: 14px; font-weight: 700; white-space: nowrap; }
.wcard-body { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; background: #141a22; padding: 8px; container-type: size; }
/* films keep 4:3 whatever the card size: a full-width card grows downward, a free card's height is locked to its width */
.wcard-body .film.fill { width: 100%; height: 100%; justify-content: center; } .wcard.fullw .wcard-body { container-type: normal; } .wcard-body .film.fill figcaption { display: none; }
.wcard.fullw .wcard-body .film.fill { height: auto; } .wcard.fullw .wcard-body .film.fill i { width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 8px; }
.wcard:not(.fullw) .wcard-body .film.fill i { width: min(100%, calc(100cqh * 4 / 3)); height: auto; aspect-ratio: 4 / 3; border-radius: 8px; } /* contained: never wider than the card, never taller than its body */
.wcard-rs { position: absolute; right: 0; bottom: 0; width: 22px; height: 22px; cursor: nwse-resize; background: linear-gradient(135deg, transparent 50%, var(--accent) 50%); border-bottom-right-radius: 14px; opacity: .7; z-index: 3; } .wcard-rs:hover { opacity: 1; }
/* working-view controls use the theme green chip look (Chris, 2026-10-05: gradients are for the Full record button only) */
.wbtn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent); border-radius: 999px; background: var(--ok-soft); color: var(--ok); font-weight: 700; font-size: 13px; white-space: nowrap; } .wbtn:hover { background: color-mix(in srgb, var(--ok) 18%, var(--ok-soft)); } .wbtn svg { width: 14px; height: 14px; stroke: var(--ok); }
.wbtn.sm { padding: 4px 10px; font-size: 12px; } .wbtn.lg { padding: 8px 16px; font-size: 14px; }
.wdate { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.05; padding: 3px 11px; border-radius: 10px; color: var(--ok); background: var(--ok-soft); } .wdate b { font-size: 14px; } .wdate small { font-size: 10.5px; opacity: .9; }
.wc-film.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.rxpage { display: flex; flex-direction: column; gap: 12px; } .rxlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
.rxcard { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; } .rxcard.stopped { opacity: .7; } .rxsig { font-size: 13.5px; }
.rxform { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; } .rxform textarea { width: 100%; font: inherit; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--fg); }
.banner.bad { background: var(--bad-soft); color: var(--bad); border-radius: 10px; padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; } .chip.bad { background: var(--bad-soft); color: var(--bad); }
.rxdoc { font-size: 14px; color: #1b2430; background: #fff; padding: 36px 44px; min-height: 520px; } .rxdoc hr { border: 0; border-top: 1px solid #ccc; margin: 12px 0; } .rxbig { font-size: 20px; margin: 18px 0 8px; } .rxsym { font-size: 28px; margin-right: 6px; }
.hpair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .hpair .hcard { min-height: 0; }

/* Draft 8.8 (Chris, 2026-10-05): predetermination form, half-unit scaling, exam-ready card, selected tooth on the quadrant card */
.pddoc .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 8px 0; } .pdtbl { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 13px; } .pdtbl th, .pdtbl td { padding: 5px 6px; border-bottom: 1px solid #ddd; text-align: left; } .pdtbl .num { text-align: right; } .pdtbl .tot td { font-weight: 700; border-top: 2px solid #333; }
.pdstatus { padding: 10px 12px; border-radius: 8px; background: #f1f4f6; border: 2px solid #8a94a0; margin-top: 8px; } .pdstatus.approved { border-color: #2e8b57; background: #e8f6ee; } .pdstatus.rejected { border-color: #c0392b; background: #fbe9e7; } .pdstatus.selfpay, .pdstatus.reviewed { border-color: #b7791f; background: #fbf3e2; }
.halfunit { padding: 4px 10px; border-radius: 999px; font-weight: 700; font-size: 13px; } .halfunit.on { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.hcard.examcard { display: flex; flex-direction: column; gap: 8px; } .hcard.examcard .notify { width: 100%; }
.qcol.sel { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 8px; background: var(--accent-soft); }
.planner .qmap { margin: 8px 0 12px; }
/* Working card (Chris, 2026-10-05): quadrant and radiograph the same size, staggered; card back to its earlier height */
.workmini { position: relative; height: 196px; } .workmini .wm-quad, .workmini .wm-film { position: absolute; height: 164px; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; }
.workmini .wm-quad { left: 0; top: 0; background: var(--panel); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; padding: 6px 8px; z-index: 1; box-shadow: 0 6px 18px rgba(20, 30, 50, .10); } .workmini .wm-quad .qmap { width: 100%; zoom: .72; }
.workmini .wm-film { right: 0; bottom: 0; background: #141a22; z-index: 2; box-shadow: 0 8px 22px rgba(20, 30, 50, .18); } .workmini .wm-film .film.fill { width: 100%; height: 100%; } .workmini .wm-film .film.fill i { width: 100%; height: 100%; border-radius: 0; } .workmini .film.fill figcaption { display: none; } .workmini .film.empty i { background: repeating-linear-gradient(45deg, #1c222a 0 8px, #242c36 8px 16px); }
/* Prescriptions and Perio cards (Chris, 2026-10-05): one big number with its meaning beside it */
.hcard.rxcard-h { padding: 0; overflow: hidden; display: flex; flex-direction: column; gap: 0; } .rxcard-h .cardlink { flex: 1; border: 0; background: none; border-radius: 0; text-align: left; padding: 16px 16px 10px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; font-size: 14px; } .rxcard-h .cardlink:hover { background: var(--panel2); } .rxcard-h > .wbtn { margin: 0 16px 14px; align-self: flex-start; }
.biglead { display: flex; align-items: center; gap: 12px; } .biglead .lead { font-size: 40px; line-height: 1; font-weight: 800; letter-spacing: -.02em; } .biglead .lead small { font-size: 16px; font-weight: 600; margin-left: 3px; color: var(--muted); } .biglead-t { display: flex; flex-direction: column; gap: 2px; font-size: 14px; font-weight: 600; line-height: 1.2; } .biglead-t small { font-weight: 400; color: var(--muted); font-size: 12.5px; }
.hcard.periocard { gap: 10px; align-items: stretch; } .hcard.periocard .biglead { text-align: left; } .hcard.periocard .pstatus { font-size: 12px; }
.soaplist { display: flex; flex-direction: column; gap: 12px; max-height: 60vh; overflow-y: auto; padding-right: 4px; } .soap-sec { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--panel2); display: flex; flex-direction: column; gap: 8px; } .soap-code { font-family: inherit; font-size: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; } .soap-sec textarea { width: 100%; font: inherit; font-size: 13.5px; line-height: 1.45; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--panel); color: inherit; resize: vertical; }
/* Openings strip (Chris, 2026-10-05): the one fill indicator for every operator */
.dstrip { display: inline-flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 6px 10px; border-radius: 10px; background: var(--panel2); border: 1px solid var(--line); text-align: left; max-width: 100%; min-width: 200px; cursor: pointer; } .dstrip:hover { border-color: var(--accent); }
.dstrip-l { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; } .dstrip-bar { display: flex; height: 9px; border-radius: 5px; overflow: hidden; background: var(--line); } .dstrip-bar i { display: block; height: 100%; } .dstrip-bar i.b { background: var(--accent); opacity: .5; } .dstrip-bar i.o { background: var(--warn); } .dstrip-bar i.l { background: transparent; }
.dstrip-t { font-size: 12.5px; font-weight: 600; white-space: normal; line-height: 1.25; } .dstrip.full .dstrip-t { color: var(--ok); } .dstrip.full .dstrip-bar i.b { background: var(--ok); opacity: .55; }
.dstrip.compact { min-width: 0; width: 100%; padding: 2px 4px; gap: 2px; border-radius: 6px; } .dstrip.compact .dstrip-bar { height: 6px; } .dstrip.compact .dstrip-t { font-size: 10px; font-weight: 600; }
.dovetail { display: inline-block; margin-top: 3px; font-size: 10px; color: var(--muted); font-style: italic; }
.offhours { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(90, 100, 120, .08) 6px 12px); pointer-events: none; z-index: 0; }
.ds-colh .dstrip { margin-top: 3px; } .colh .dstrip { margin-top: 2px; } .ds-prod .dstrip { width: 100%; margin-top: 6px; }
.lead-line { font-size: 15px; font-weight: 600; margin: 10px 0 6px; } .modal .dstrip { width: 100%; cursor: default; }
/* Reminders sticky note (Chris, 2026-10-05) */
.hcard.sticky { position: relative; background: #fff4a3; border: 0; box-shadow: 0 10px 24px rgba(120, 90, 0, .18), 0 1px 0 rgba(0,0,0,.05); transform: rotate(-.4deg); padding-top: 22px; background-image: linear-gradient(135deg, transparent calc(100% - 26px), rgba(0,0,0,.06) calc(100% - 26px), rgba(0,0,0,.10)); color: #3b3200; }
:root:not([data-theme="light"]) .hcard.sticky { background-color: #5a4b0d; color: #fff6c9; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .hcard.sticky { background-color: #fff4a3; color: #3b3200; } }
.hcard.sticky .ccard-h, .hcard.sticky .muted { color: inherit; opacity: .8; } .hcard.sticky .tape { position: absolute; top: -10px; left: 50%; width: 110px; height: 22px; transform: translateX(-50%) rotate(1.5deg); background: rgba(255,255,255,.55); border: 1px solid rgba(0,0,0,.06); box-shadow: 0 2px 4px rgba(0,0,0,.08); }
.remlist { list-style: none; margin: 4px 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; } .remlist li { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 8px; background: rgba(255,255,255,.35); font-size: 14.5px; } .remlist li.over { background: rgba(192,57,43,.12); } .remlist li.done span { text-decoration: line-through; opacity: .6; } .remlist .chk { display: flex; gap: 8px; align-items: center; } .remlist .chk input { width: 17px; height: 17px; }
.duechip { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.6); white-space: nowrap; } .duechip.over { background: var(--bad); color: #fff; } .duechip.today { background: var(--warn); color: #fff; } .duechip.done { opacity: .6; }
.rbadge { font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: rgba(255,255,255,.6); } .rbadge.over { background: var(--bad); color: #fff; } .rbadge.open { background: var(--warn); color: #fff; } .rbadge.clear { background: var(--ok); color: #fff; }
.remform input[name="t"] { flex: 1; min-width: 180px; background: rgba(255,255,255,.7); } .remform .field.inline.sm { font-size: 12px; } .remform input[type="date"] { background: rgba(255,255,255,.7); }
.badge.over { background: var(--bad); } .badge.warn { background: var(--warn); color: #fff; }
.who .badge { margin-left: 4px; margin-right: 4px; vertical-align: middle; }
.remlist li .x { position: static; width: 22px; height: 22px; line-height: 20px; padding: 0; border-radius: 50%; background: rgba(255,255,255,.6); border: 0; font-size: 14px; }
/* Draft 9.2 — side schedules (Chris, 2026-10-05): same date font on hygiene and dentist, Hide-names toggle, hygiene week expand, last names on the dentist sheet */
.ds-head .dsdate { font-size: 17px; font-weight: 700; line-height: 1.25; white-space: nowrap; } .ds-head > .row.between { align-items: center; flex-wrap: wrap; row-gap: 6px; } .ds-head > .row.between > .row { margin-left: auto; }
.dshide { font-size: 12px; padding: 4px 9px; white-space: nowrap; } .dshide.on { background: var(--accent-soft); border-color: transparent; color: var(--accent); font-weight: 600; }
.dblock.two .dname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hyg.wide { grid-template-columns: 1fr; } .hyg.wide > .hyg-main { display: none; }
.daysheet.wide.week .sched.compact .appt { font-size: 11.5px; padding: 2px 5px; } .daysheet.wide.week .sched.compact .appt .appt-top b { font-size: 11.5px; } .daysheet.wide.week .sched.compact .colh { font-size: 12.5px; padding: 4px 6px; }
/* Draft 9.4 — hygiene My week page (Chris, 2026-10-06) */
.myweek .ds-week { padding: 0; } .myweek .sched.compact .appt { font-size: 12.5px; padding: 3px 6px; } .myweek .sched.compact .appt .appt-top b { font-size: 13px; } .myweek .sched.compact .colh { font-size: 13.5px; padding: 6px 8px; } .myweek .sched.compact .tlabel { font-size: 11px; white-space: nowrap; }
/* Perio title sits on the same top line as every other card title; the stage chip hangs from the top right (Chris, 2026-10-06) */
.hcard.periocard > .row.between { align-items: flex-start; } .hcard.periocard > .row.between > .ccard-h { line-height: 1.4; }
/* Summary odontogram is a card two summary tiles wide, not the full page (Chris, 2026-10-06) */
.grid2 > .odonto { grid-column: 1 / span 2; margin-top: 0; min-width: 0; } .grid2 > .odonto .od-arch { grid-template-columns: repeat(16, minmax(0, 1fr)); } .grid2 > .odonto .od-arch.prim { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.grid2 > .odonto .od-head small { flex-basis: 100%; order: 9; }
@media (max-width: 700px) { .grid2 > .odonto { grid-column: 1 / -1; } }
/* Instrument sharpening card, half size beside Notes needed (Chris, 2026-10-06): green < 2 kits, yellow 2, red 3 or more */
.hcard.sharpcard { gap: 8px; } .hcard.sharpcard.g { border: 2px solid var(--ok); } .hcard.sharpcard.y { border: 2px solid #e3b505; } .hcard.sharpcard.r { border: 2px solid var(--bad); }
.hcard.sharpcard.y .lead { color: #b38b00; } .hcard.sharpcard.r .lead { color: var(--bad); } .hcard.sharpcard.g .lead { color: var(--ok); }
.sharpdots { display: flex; align-items: center; gap: 4px; } .sharpdots i { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--line); background: transparent; } .sharpdots i.on { background: var(--accent); border-color: var(--accent); } .sharpdots small { margin-left: 6px; color: var(--muted); font-size: 12px; }
.hcard.sharpcard .wbtn { font-size: 13px; }
/* Medical alerts card (Chris, 2026-10-06): first card on the full record Summary; every alert chip in the app comes from it */
.sumgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .sumgrid > .odonto { grid-column: span 2; order: 1; } .sumgrid > .acctcard { order: 2; }
@media (max-width: 1250px) { .sumgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .sumgrid { grid-template-columns: 1fr; } .sumgrid > .odonto { grid-column: 1 / -1; } }
.dcard.alertcard.has { border: 2px solid var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); }
.alertlist { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.alertlist li { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 1px 8px; padding: 7px 28px 7px 10px; border-radius: 8px; background: var(--bad-soft); }
.alertlist li.condition, .alertlist li.med { background: var(--warn-soft); } .alertlist li.other { background: var(--panel2); }
.alertlist .al-t { font-weight: 700; color: var(--bad); } .alertlist li.condition .al-t, .alertlist li.med .al-t { color: var(--warn); } .alertlist li.other .al-t { color: var(--text, inherit); }
.alertlist .al-k { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; opacity: .7; align-self: center; } .alertlist .al-s { grid-column: 1 / -1; color: var(--muted); font-size: 11.5px; }
.alertlist li .x { position: absolute; top: 6px; right: 6px; }
.alertlist li.new { outline: 2px solid var(--bad); } .newtag { font-style: normal; font-size: 10px; text-transform: uppercase; background: var(--bad); color: #fff; padding: 1px 5px; border-radius: 4px; margin-left: 4px; vertical-align: 2px; }
.alertreview { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: 8px; background: var(--warn-soft); font-size: 13px; }
.al-foot { margin-top: 4px; } button.chip.alert { border: 0; cursor: pointer; font-family: inherit; } button.chip.alert:hover { filter: brightness(.95); } .chip.alert.new { outline: 2px solid var(--bad); }
/* quadrant map inside the tooth pop-up (Chris, 2026-10-06) */
.ta-quad { margin-bottom: 10px; display: flex; flex-direction: column; gap: 4px; } .ta-quad .qmap { margin: 0; } .ta-quad .quad { min-height: 60px; } .ta-quad small { text-align: right; }
/* two-tap adding in the tooth pop-up (Chris, 2026-10-06) */
.favbtn.armed { outline: 3px solid var(--accent); outline-offset: 1px; background: var(--accent-soft); } .ta-quad.armed .qmap { box-shadow: 0 0 0 2px var(--accent); border-radius: 10px; } .ta-quad .hint-armed { color: var(--accent); font-weight: 600; text-align: right; }
/* History card visit timeline (Chris, 2026-10-06, revised): cleanings pink / purple as Last cleanings, dentist visits blue */
.vtl { padding: 6px 0 8px; flex-wrap: wrap; row-gap: 8px; overflow: visible; }
.vtl .vnode { cursor: pointer; font: inherit; min-width: 44px; padding: 4px 6px; border: 1px solid; } .vtl .vnode:hover { filter: brightness(.95); box-shadow: 0 0 0 2px var(--accent-soft); } .vtl .vnode b { font-size: 13px; line-height: 1.15; } .vtl .vnode.multi b { font-size: 12px; } .vtl .vnode small { font-size: 10.5px; color: inherit; opacity: .8; }
.vtl .vnode.k-blue { background: var(--blue); color: var(--blue-t); border-color: var(--blue-t); } .vtl .vnode.k-pink { background: var(--pink); color: var(--pink-t); border-color: var(--pink-t); } .vtl .vnode.k-purple { background: var(--purple); color: var(--purple-t); border-color: var(--purple-t); }
.vtl .vgap { min-width: 30px; flex: 1 1 30px; font-size: 11px; } .vtl .vgap span { white-space: nowrap; } .vtl .vgap::before { border-top-color: #b9d3f2; }
.vtl .ybreak { position: relative; width: 22px; min-width: 22px; align-self: stretch; display: flex; align-items: center; justify-content: center; } .vtl .ybreak::before { content: ""; position: absolute; top: 2px; bottom: 2px; left: 50%; border-left: 2px solid var(--line); } .vtl .ybreak span { position: relative; background: var(--panel); font-size: 10px; color: var(--muted); writing-mode: vertical-rl; transform: rotate(180deg); padding: 2px 0; font-weight: 600; letter-spacing: .04em; }
.vtl .vtl-edge { font-size: 10px; color: var(--muted); white-space: nowrap; padding-right: 2px; }
/* Ledger (Chris, 2026-10-06): identical fixed columns on every invoice, and each invoice tinted by visit type */
.inv-scroll { overflow-x: auto; border-radius: var(--r); }
.tbl.inv-lines { table-layout: fixed; min-width: 900px; }
.inv-lines col.c-code { width: 76px; } .inv-lines col.c-tooth { width: 92px; } .inv-lines col.c-prov { width: 140px; } .inv-lines col.c-num { width: 96px; } .inv-lines col.c-ins { width: 130px; }
.inv-lines td { overflow: hidden; text-overflow: ellipsis; } .inv-lines td:nth-child(2) { white-space: normal; } .inv-lines .provsel { max-width: 100%; }
.invoice { border: 2px solid var(--line); }
.invoice.tint-purple { border-color: var(--purple-t); background: linear-gradient(90deg, color-mix(in srgb, var(--purple) 55%, var(--panel)) 0, var(--panel) 260px); }
.invoice.tint-pink { border-color: var(--pink-t); background: linear-gradient(90deg, color-mix(in srgb, var(--pink) 55%, var(--panel)) 0, var(--panel) 260px); }
.invoice.tint-blue { border-color: var(--blue-t); background: linear-gradient(90deg, color-mix(in srgb, var(--blue) 55%, var(--panel)) 0, var(--panel) 260px); }
.invoice.tint-sky { border-color: var(--sky-t); background: linear-gradient(90deg, color-mix(in srgb, var(--sky) 55%, var(--panel)) 0, var(--panel) 260px); }
.invoice.tint-green { border-color: var(--green-t); background: linear-gradient(90deg, color-mix(in srgb, var(--green) 55%, var(--panel)) 0, var(--panel) 260px); }
.invoice.tint-amber { border-color: var(--amber-t); background: linear-gradient(90deg, color-mix(in srgb, var(--amber) 55%, var(--panel)) 0, var(--panel) 260px); }
.invoice.tint-purple .inv-lines thead th { background: var(--purple); color: var(--purple-t); } .invoice.tint-pink .inv-lines thead th { background: var(--pink); color: var(--pink-t); } .invoice.tint-blue .inv-lines thead th { background: var(--blue); color: var(--blue-t); } .invoice.tint-sky .inv-lines thead th { background: var(--sky); color: var(--sky-t); } .invoice.tint-green .inv-lines thead th { background: var(--green); color: var(--green-t); } .invoice.tint-amber .inv-lines thead th { background: var(--amber); color: var(--amber-t); }
.invoice.owing { border-width: 2px; } .invkind { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px solid; margin-left: 4px; vertical-align: 1px; }
.inv-tot b { font-size: 22px; } .invoice .inv-lines tr.tot td { background: color-mix(in srgb, var(--panel2) 70%, transparent); }
.rangebar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: 10px; background: var(--accent-soft); margin-bottom: 10px; font-size: 13.5px; }
.hcard.history { gap: 6px; }
.vtl .vnode.vtoday { font-weight: 700; box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px currentColor; } .vtl .vnode.k-none { background: var(--panel2); color: var(--muted); border-color: var(--line); box-shadow: none; }
/* timeline must wrap inside the card (beats the older .hcard .cleanings nowrap rule) */
.hcard .cleanings.vtl { flex-wrap: wrap; overflow: visible; row-gap: 10px; gap: 10px 2px; }
.hcard .vtl .vnode { min-width: 52px; width: auto; white-space: nowrap; flex: 0 0 auto; } .hcard .vtl .vnode.multi { padding: 4px 8px; }
.hcard .vtl .vgap { min-width: 46px; flex: 1 1 46px; } .hcard .vtl .vgap::before { left: 2px; right: 2px; }
.hcard .vtl .ybreak, .hcard .vtl .vtl-edge { flex: 0 0 auto; }
/* Add work pop-up quadrant (Chris, 2026-10-06) */
.workquad { display: flex; flex-direction: column; gap: 4px; } .workquad small { text-align: right; } .workquad.armed .qmap { box-shadow: 0 0 0 2px var(--accent); border-radius: 10px; }
.workquad .qcol.pull { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 8px; } .workquad .qcol.intoday { background: color-mix(in srgb, var(--accent-soft) 70%, transparent); border-radius: 8px; }
.workquad .qchip.added { box-shadow: 0 0 0 1.5px #fff inset; }
/* Solid "Open planner" buttons (Chris, 2026-10-06) */
button.solid { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); font-weight: 600; } button.solid:hover { filter: brightness(1.06); }
/* Floating treatment planner over the radiographs: no backdrop, the page stays usable; starts top-right, drag by the top bar */
.scrim.floating { background: transparent; pointer-events: none; place-items: start end; padding: 76px 20px 16px; }
.scrim.floating .modal { pointer-events: auto; box-shadow: 0 16px 48px rgba(10, 16, 24, .28), 0 0 0 1px var(--line); max-height: calc(100vh - 96px); }
.xpick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .xpick button { padding: 16px; font-size: 16px; font-weight: 600; }
/* Grip bar for pop-ups without their own header: every pop-up moves */
.mgrip { flex: none; height: 14px; margin: -10px -6px 4px; cursor: grab; display: flex; justify-content: center; align-items: center; touch-action: none; }
.mgrip::before { content: ''; width: 44px; height: 4px; border-radius: 4px; background: var(--line); }
.mgrip:hover::before { background: var(--muted); } .dragging .mgrip { cursor: grabbing; }
.terminal > .mgrip { margin: -4px 0 6px; } .phonesim .ph-head.draggable { cursor: grab; }
.modal.pdfm > .mgrip { margin: 0 0 6px; height: 18px; background: var(--panel); border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
@media print { .mgrip { display: none !important; } }
/* Take a radiograph: option cards, then the capture screen with Back and the sequence (Chris, 2026-10-06) */
.xopts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.xopt { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px 14px; border-radius: 14px; border: 2px solid var(--line); background: var(--panel2); text-align: center; }
.xopt:hover { border-color: var(--accent); background: var(--accent-soft, var(--panel2)); } .xopt b { font-size: 18px; }
.xopt-ic { display: grid; gap: 4px; height: 54px; align-content: center; justify-content: center; }
.xopt-ic i { display: block; background: repeating-linear-gradient(45deg, #1c222a 0 5px, #2a333e 5px 10px); border-radius: 4px; }
.xopt-ic.k-bw4 { grid-template-columns: repeat(2, 40px); } .xopt-ic.k-bw4 i { height: 24px; }
.xopt-ic.k-bw2 { grid-template-columns: repeat(2, 44px); } .xopt-ic.k-bw2 i { height: 34px; }
.xopt-ic.k-pan i { width: 120px; height: 46px; border-radius: 24px 24px 10px 10px; }
.xopt-ic.k-pa i { width: 30px; height: 44px; }
.capseq { margin: 2px 0 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel2); }
.capnum { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 6px; border-radius: 50%; background: var(--accent); color: var(--accent-fg); font-size: 12px; }
.capslot.got .capnum { background: var(--muted); }
.daynotes-link { white-space: nowrap; font-weight: 600; }
.daynotes { display: flex; flex-direction: column; gap: 10px; }
/* Very large capture pop-up so the images are easy to see (Chris, 2026-10-06); films stay 4:3 and the whole set fits on screen */
.modal.capm { width: min(1500px, 96vw); max-height: 96vh; }
.modal.capm .capgrid.cols2 { max-width: none; margin: 0 auto; }
.modal.capm.rows2 .capgrid.cols2 { width: min(100%, calc((96vh - 470px) * 4 / 3 + 70px)); }
.modal.capm.rows1 .capgrid.cols2 { width: min(100%, calc((96vh - 360px) * 8 / 3 + 70px)); }
.modal.capm .capgrid.cols1 { grid-template-columns: minmax(0, 1fr); width: min(100%, calc((96vh - 360px) * 4 / 3 + 24px)); margin: 6px auto 0; }
.modal.capm.mt-pan .capgrid.cols1 { width: 100%; } .modal.capm.mt-pan .capslot i { aspect-ratio: 2.4 / 1; }
.modal.capm .capname { font-size: 16px; }
.capimg { position: relative; display: block; width: 100%; }
.capimg.piled::before, .capimg.piled::after { content: ''; position: absolute; inset: 0; border-radius: 8px; background: #2a333e; border: 1px solid rgba(255,255,255,.18); }
.capimg.piled::before { transform: translate(10px, -10px); } .capimg.piled::after { transform: translate(5px, -5px); background: #232b35; }
.capimg.piled i { position: relative; z-index: 1; }
.capcount { position: absolute; z-index: 2; top: -16px; right: -16px; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 999px; background: var(--bad); color: #fff; font-size: 16px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.3); border: 2px solid var(--panel); }
/* Retake badge on saved films; tap shuffles through the retakes (Chris, 2026-10-06) */
.film.retakes { position: relative; cursor: pointer; } .film.retakes .capcount { top: -10px; right: -10px; }
.film.retakes > i { box-shadow: 5px -5px 0 0 #3a4552, 10px -10px 0 0 #2a333e; }
.capcount.sm { min-width: 20px; height: 20px; font-size: 11px; padding: 0 5px; top: -8px; right: -8px; }
/* Right-hand deck: card behind for other radiographs taken today (Chris, 2026-10-06) */
.xdeck { position: relative; display: flex; flex-direction: column; }
.xdeck > .xlatest { flex: 1; position: relative; z-index: 1; }
.xdeck::before { content: ''; position: absolute; inset: 0; transform: translate(8px, 8px); border-radius: 14px; background: var(--panel2); border: 1px solid var(--line); z-index: 0; }
.deckarrow { position: absolute; z-index: 3; top: 50%; transform: translateY(-50%); width: 64px; height: 64px; border-radius: 50%; border: none; background: var(--ok); color: #fff; font-size: 44px; line-height: 1; font-weight: 700; display: grid; place-items: center; padding: 0 0 6px; box-shadow: 0 8px 22px rgba(0,0,0,.28); cursor: pointer; }
.deckarrow.next { right: 10px; } .deckarrow.prev { left: 10px; } .deckarrow:hover { filter: brightness(1.08); }
.deckarrow .capcount { top: -4px; right: -4px; }
.xother-list { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; }
.xother-item { display: flex; flex-direction: column; gap: 8px; }
.xother-films { background: #1b222b; border-radius: 10px; padding: 10px; } .xother-films .film i { height: 260px; } .xother-films .film figcaption { color: #dfe6ee; font-weight: 600; font-size: 13px; }
.xother-films { display: flex; justify-content: center; } .xother-films .film { width: auto; }
.xother-films.cols1:not(.wide) .film i { width: 240px; height: 320px; } .xother-films.wide .film { width: 100%; } .xother-films.wide .film i { width: 100%; height: 260px; }
/* One film on its own page (Chris, 2026-10-06): proportions never change */
.filmpage { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.filmtitle { font-size: 20px; }
.filmstage { position: relative; background: #11161c; border-radius: 14px; padding: 18px 90px; display: flex; justify-content: center; align-items: center; min-height: 320px; }
.filmstage .deckarrow.prev { left: 14px; } .filmstage .deckarrow.next { right: 14px; }
.film.filmbig { position: relative; margin: 0; width: 100%; align-items: center; }
.film.filmbig i { height: auto !important; border-radius: 10px; }
.film.filmbig.s-bw i { width: min(100%, calc((100vh - 330px) * 4 / 3)); aspect-ratio: 4 / 3; }
.film.filmbig.s-pa i, .film.filmbig.s-fmx i { width: min(100%, calc((100vh - 330px) * 3 / 4)); aspect-ratio: 3 / 4; }
.film.filmbig.s-pan i { width: min(100%, calc((100vh - 330px) * 2.2)); aspect-ratio: 2.2 / 1; }
.film.filmbig figcaption { color: #dfe6ee; font-size: 14px; font-weight: 600; margin-top: 6px; }
.film.filmbig .capcount { top: -10px; right: calc(50% - min(50%, calc((100vh - 330px) * 2 / 3)) - 10px); }
.filmstrip { display: flex; gap: 8px; flex-wrap: wrap; } .filmstrip .filmbtn { padding: 4px; border-radius: 10px; } .filmstrip .filmbtn.on { outline: 3px solid var(--accent); }
.filmstrip .film.mini i { width: 96px; height: 72px; }
[data-film] { cursor: zoom-in; } .film.retakes[data-film] { cursor: pointer; }
.deckarrow, .deckarrow:hover { background: var(--ok); color: #fff; border: none; }

/* Expanded dated card: large bitewings with PAs beside them; green arrow when there are more (Chris, 2026-10-06) */
.xdatecard { cursor: pointer; } .xdatecard.open { cursor: default; border-color: var(--accent); }
.xspread { position: relative; display: grid; gap: 12px; margin-top: 10px; background: #1b222b; border-radius: 12px; padding: 12px; }
.xspread.withbw { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } .xspread.withbw.nosides { grid-template-columns: minmax(0, 1fr); }
.xspread.onlyside { grid-template-columns: minmax(0, 1fr); }
.xspread-bw .bwgrid { margin: 0; }
.xspread-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-content: start; }
.xspread.onlyside .xspread-side { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.film.xside { margin: 0; } .film.xside i { width: 100%; height: auto !important; border-radius: 8px; } .film.xside figcaption { color: #dfe6ee; font-size: 12px; font-weight: 600; }
.film.xside.s-pa i { aspect-ratio: 3 / 4; } .film.xside.s-bw i { aspect-ratio: 4 / 3; } .film.xside.s-pan { grid-column: span 2; } .film.xside.s-pan i { aspect-ratio: 2.2 / 1; }
.xspread .deckarrow.next { right: 8px; } .xspread .deckarrow.prev { left: 8px; }
/* Overview cards: film tap enlarges inside the card, border tap opens the page (Chris, 2026-10-06) */
.tapcard { cursor: pointer; } .tapcard:hover { border-color: var(--accent); }
[data-zoom], [data-zoom] .film { cursor: zoom-in; }
.cardzoom { display: flex; flex-direction: column; gap: 8px; cursor: default; background: #1b222b; border-radius: 12px; padding: 10px; }
.cardzoom .muted { color: #c9d3de; }
.film.czfilm { margin: 0; width: 100%; position: relative; } .film.czfilm i { width: 100%; height: auto !important; border-radius: 8px; }
.film.czfilm.s-bw i { aspect-ratio: 4 / 3; } .film.czfilm.s-pa i { aspect-ratio: 3 / 4; max-height: 520px; width: auto; margin: 0 auto; } .film.czfilm.s-pan i { aspect-ratio: 2.2 / 1; }
.film.czfilm .capcount { top: -8px; right: -8px; }
.cardzoom { cursor: zoom-out; } .cardzoom .film.czfilm, .cardzoom [data-film] { cursor: zoom-out; }
.planxrays { margin-top: 14px; } .xraybtn.on { outline: 2px solid var(--accent); }
.planxrays .xdate-lab { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; } .xspread.nosides .xspread-bw .bwgrid { margin: 0 auto; }

/* Draft 9.29: new-patient welcome (Chris, 2026-10-06) */
.welcome { color: var(--ok); font-weight: 700; font-size: 1.2em; letter-spacing: -0.01em; }

/* Draft 9.29: front desk home (Chris, 2026-10-06): all four chairs on the side, cards on the right */
.hyg.fd { --dsw: clamp(360px, 32vw, 560px); }
.hyg.fd .ds-cols { padding-right: 6px; }
.fdback { margin-bottom: 14px; } .fdback .back { font-weight: 600; }
.fdlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fdrow { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--panel2); flex-wrap: wrap; }
.fdrow > div:first-child { min-width: 0; flex: 1 1 180px; } .fdrow b { display: block; } .fdrow small { display: block; }
.fdrow .amt { text-align: right; } .fdrow .amt b { font-size: 16px; } .fdrow .amt small { display: block; color: var(--muted); font-size: 11px; }
.fdlist.lg .fdrow { padding: 12px 14px; }
.welcome.sm { font-size: 1em; }
/* online bookings flash until confirmed */
@keyframes fdflash { 0%, 100% { box-shadow: 0 0 0 0 rgba(217,119,6,.0); border-color: var(--line); } 50% { box-shadow: 0 0 0 6px rgba(217,119,6,.25); border-color: var(--warn); } }
.hcard.flash { animation: fdflash 1.6s ease-in-out infinite; }
.hcard.live { border-color: var(--ok); }
/* messages */
.msgrow .kind { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); min-width: 64px; }
.msgrow.unread .kind { color: var(--accent); } .msgrow p { margin: 2px 0 0; font-size: 13.5px; } .msgrow > div { flex: 1 1 200px; min-width: 0; }
.msgreply { margin-top: 6px; } .msgreply input { flex: 1; }
.modal.msgpop { width: min(560px, 96vw); border: 2px solid #1a73e8; } .msgpopcard { display: flex; flex-direction: column; gap: 10px; } .msgpopcard .mc-list { max-height: 70vh; overflow-y: auto; } .msgpopcard .mhead { margin: 0; }
/* campaign rows */
.camprow .preview { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); }
.camprow.st-approved { border: 2px solid var(--ok); } .camprow.st-declined { opacity: .6; }
/* A/R */
.arnums { display: flex; gap: 22px; flex-wrap: wrap; margin: 4px 0; } .arnums div { display: flex; flex-direction: column; } .arnums b { font-size: 30px; line-height: 1.05; font-variant-numeric: tabular-nums; } .arnums span { color: var(--muted); font-size: 12.5px; }
.aging { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 8px 0; } .aging div { background: var(--panel2); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; } .aging div.empty { opacity: .5; } .aging b { font-size: 16px; font-variant-numeric: tabular-nums; } .aging small { color: var(--muted); }
/* recare window */
.modal.recarepop { width: min(1100px, 96vw); }
.rp-cards { margin-top: 10px; } .rp-cards .hcard { min-height: 0; }
.reasons { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: 13.5px; } .reasons li { padding-left: 14px; position: relative; } .reasons li::before { content: '•'; position: absolute; left: 2px; color: var(--ok); }
.slotgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; } .slotbtn { display: flex; flex-direction: column; align-items: flex-start; padding: 8px 10px; gap: 1px; } .slotbtn span { font-size: 12px; color: var(--muted); }
.fdcards .hcard { min-height: 170px; }

/* Draft 9.30: email looks like Gmail (Chris, 2026-10-06) */
.gmail { --gm-blue: #0b57d0; --gm-hover: #f2f6fc; --gm-read: #f2f6fc; --gm-line: #eceff1; --gm-sel: #c2dbff; --gm-ink: #1f1f1f; --gm-mut: #5f6368; font-family: Roboto, Arial, sans-serif; }
.gm-page { background: #f8fafd; border-radius: 16px; padding: 10px 12px 12px; color: var(--gm-ink); }
.gm-top { display: flex; align-items: center; gap: 16px; padding: 4px 4px 10px 220px; }
.gm-search { flex: 1; max-width: 720px; display: flex; align-items: center; gap: 10px; background: #e9eef6; border-radius: 24px; padding: 0 14px; height: 46px; color: var(--gm-mut); }
.gm-search:focus-within { background: #fff; box-shadow: 0 1px 3px rgba(60,64,67,.3); }
.gm-search input { flex: 1; border: none; background: transparent; font: inherit; font-size: 16px; outline: none; padding: 0; color: var(--gm-ink); }
.gm-conn { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--gm-mut); white-space: nowrap; } .gm-conn i { width: 8px; height: 8px; border-radius: 50%; background: #1e8e3e; }
.gm-body { display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: 8px; align-items: start; }
.gm-rail { display: flex; flex-direction: column; gap: 1px; }
.gm-compose { display: inline-flex; align-items: center; gap: 12px; align-self: flex-start; background: #c2e7ff; color: #001d35; border: none; border-radius: 16px; padding: 0 22px 0 18px; height: 56px; font: inherit; font-size: 14.5px; font-weight: 500; margin: 0 0 14px; box-shadow: none; }
.gm-compose:hover { box-shadow: 0 1px 3px rgba(60,64,67,.3); background: #c2e7ff; } .gm-compose .ic { width: 22px; height: 22px; }
.gm-nav { display: flex; align-items: center; gap: 16px; height: 32px; padding: 0 12px 0 22px; border: none; border-radius: 0 16px 16px 0; background: transparent; font: inherit; font-size: 14px; color: var(--gm-ink); text-align: left; margin-left: -12px; }
.gm-nav span { flex: 1; } .gm-nav b { font-size: 12.5px; font-weight: 700; } .gm-nav:hover { background: #e9eef6; } .gm-nav.on { background: #d3e3fd; font-weight: 700; color: #001d35; } .gm-nav .ic { width: 18px; height: 18px; }
.gm-railh { font-size: 15px; font-weight: 500; padding: 16px 0 6px 10px; color: var(--gm-ink); }
.gm-main { background: #fff; border-radius: 16px; min-height: 560px; overflow: hidden; }
.gm-tools { display: flex; align-items: center; gap: 4px; padding: 8px 12px 6px 14px; min-height: 48px; }
.gm-ic { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 38px; height: 38px; border-radius: 50%; border: none; background: transparent; color: var(--gm-mut); padding: 0; font: inherit; font-size: 14px; }
.gm-ic:hover { background: rgba(60,64,67,.09); color: var(--gm-ink); } .gm-ic.wide { width: auto; border-radius: 18px; padding: 0 12px; }
.gm-range { margin-left: auto; font-size: 12.5px; color: var(--gm-mut); }
.gm-chk { width: 18px; height: 18px; border: 2px solid #747775; border-radius: 3px; flex: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; margin: 0 10px 0 4px; }
.gm-chk.on { background: var(--gm-blue); border-color: var(--gm-blue); } .gm-chk.on::after { content: '✓'; color: #fff; font-size: 12px; font-weight: 700; line-height: 1; }
.gm-chk.part::after { content: ''; width: 9px; height: 2px; background: #747775; }
.gm-tabs { display: flex; border-bottom: 1px solid var(--gm-line); padding: 0 8px; } .gm-tabs span { display: inline-flex; align-items: center; gap: 12px; padding: 14px 16px 12px; font-size: 14px; font-weight: 500; color: var(--gm-blue); border-bottom: 3px solid var(--gm-blue); min-width: 200px; }
.gm-list { display: flex; flex-direction: column; }
.gm-row { display: flex; align-items: center; gap: 4px; height: 40px; padding: 0 16px 0 12px; border-bottom: 1px solid var(--gm-line); background: var(--gm-read); cursor: pointer; font-size: 14px; color: #444746; position: relative; }
.gm-row.unread { background: #fff; color: var(--gm-ink); } .gm-row.unread .gm-from, .gm-row.unread .gm-subj b, .gm-row.unread .gm-time { font-weight: 700; }
.gm-row:hover { box-shadow: inset 1px 0 0 #dadce0, inset -1px 0 0 #dadce0, 0 1px 2px 0 rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15); z-index: 1; }
.gm-row.sel { background: var(--gm-sel); }
.gm-star { width: 30px; height: 30px; border: none; background: transparent; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: #bdc1c6; border-radius: 50%; flex: none; }
.gm-star:hover { background: rgba(60,64,67,.09); color: var(--gm-mut); } .gm-star.on, .gm-star.on:hover { color: #f4b400; } .gm-star.on .ic { fill: #f4b400; }
.gm-from { width: 168px; flex: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-left: 6px; font-weight: 400; }
.gm-subj { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .gm-subj b { font-weight: 400; } .gm-snip { color: var(--gm-mut); font-weight: 400; }
.gm-tag { display: inline-block; font-style: normal; font-size: 11.5px; font-weight: 500; padding: 0 6px; border-radius: 4px; margin-right: 6px; background: color-mix(in srgb, var(--lc) 28%, #fff); color: color-mix(in srgb, var(--lc) 60%, #000); line-height: 18px; vertical-align: 1px; }
.gm-tag.plain { background: #e8eaed; color: #444746; }
.gm-time { flex: none; font-size: 12.5px; color: inherit; min-width: 64px; text-align: right; }
.gm-hover { display: none; gap: 2px; } .gm-hover button { width: 34px; height: 34px; border: none; background: transparent; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--gm-mut); padding: 0; }
.gm-hover button:hover { background: rgba(60,64,67,.09); }
.gm-row:hover .gm-hover { display: inline-flex; } .gm-row:hover .gm-time { display: none; }
.gm-empty { padding: 40px; text-align: center; color: var(--gm-mut); }
.gm-read { padding: 4px 24px 28px 70px; }
.gm-subjline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 18px -54px; padding-left: 0; } .gm-subjline h2 { font-family: Roboto, Arial, sans-serif; font-size: 22px; font-weight: 400; margin: 0 6px 0 0; color: var(--gm-ink); } .gm-subjline .gm-star { margin-left: auto; }
.gm-msg { display: flex; align-items: flex-start; gap: 12px; margin-left: -54px; } .gm-meta { flex: 1; font-size: 14px; } .gm-meta b { font-weight: 700; } .gm-meta small { font-size: 12.5px; }
.gm-av { width: 40px; height: 40px; border-radius: 50%; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 500; flex: none; }
.gm-text { white-space: pre-wrap; font-size: 14px; line-height: 1.6; margin: 16px 0 24px; color: #222; font-family: Arial, sans-serif; }
.gm-actions { display: flex; gap: 12px; } .gm-pill { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 20px 0 16px; border-radius: 20px; border: 1px solid #747775; background: #fff; color: #444746; font: inherit; font-size: 14px; font-weight: 500; }
.gm-pill:hover { background: #f1f3f4; border-color: #747775; }
.gm-replybox { border-radius: 8px; box-shadow: 0 1px 3px rgba(60,64,67,.3), 0 4px 8px 3px rgba(60,64,67,.15); padding: 10px 14px 12px; background: #fff; }
.gm-replyto { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--gm-mut); padding: 2px 0 8px; } .gm-replyto input { flex: 1; border: none; border-bottom: 1px solid var(--gm-line); outline: none; font: inherit; padding: 4px 0; }
.gm-replybox textarea, .gc-form textarea { width: 100%; border: none; outline: none; resize: vertical; font: 14px Arial, sans-serif; padding: 4px 0; background: transparent; box-shadow: none; }
.gm-send { background: var(--gm-blue); color: #fff; border: none; border-radius: 18px; height: 36px; padding: 0 24px; font: inherit; font-size: 14px; font-weight: 500; }
.gm-send:hover { background: #0842a0; color: #fff; box-shadow: 0 1px 3px rgba(60,64,67,.3); }
.gm-indent { margin: -12px 0 18px; }
/* Gmail-style compose window */
.modal.gcompose { width: min(540px, 94vw); padding: 0; overflow: hidden; border-radius: 12px 12px 8px 8px; font-family: Roboto, Arial, sans-serif; }
.modal.gcompose .gc-head { background: #f2f6fc; padding: 10px 12px 10px 16px; margin: 0; font-size: 14px; display: flex; justify-content: space-between; align-items: center; }
.gc-form { display: flex; flex-direction: column; padding: 0 16px 14px; } .gc-form input { border: none; border-bottom: 1px solid var(--gm-line, #eceff1); border-radius: 0; outline: none; font: inherit; font-size: 14px; padding: 9px 0; background: transparent; box-shadow: none; }
.gc-form textarea { margin: 8px 0; min-height: 200px; } .modal.gcompose { --gm-blue: #0b57d0; --gm-mut: #5f6368; --gm-line: #eceff1; }
/* email card: same rows, compact */
.emailcard .gm-list.gm-mini { border-radius: 10px; overflow: hidden; border: 1px solid var(--gm-line); }
.emailcard .gm-row { height: 38px; padding: 0 10px 0 4px; } .emailcard .gm-from { width: 130px; } .emailcard .gm-time { min-width: 56px; }
@media (max-width: 1000px) { .gm-body { grid-template-columns: 1fr; } .gm-rail { flex-direction: row; flex-wrap: wrap; } .gm-top { padding-left: 4px; } .gm-railh { display: none; } .gm-read { padding-left: 24px; } .gm-subjline, .gm-msg { margin-left: 0; } .gm-from { width: 110px; } }

/* Draft 9.31: Front desk page, laid out like the full record (Chris, 2026-10-06) */
.deskbtn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 0; border-radius: 999px; font-weight: 600; font-size: 13px; color: #fff; background: var(--accent); }
.deskbtn:hover { background: var(--accent); filter: brightness(1.08); color: #fff; } .deskbtn .ic { width: 16px; height: 16px; } .deskbtn .badge { background: #fff; color: var(--accent); }
.desk-av { background: var(--accent); color: #fff; } .desk-av .ic { width: 22px; height: 22px; }
.desktabs .badge { margin-left: 4px; }
.deskbody.t-patients > .page-head h1, .deskbody.t-messages > .page-head h1, .deskbody.t-recare > .page-head h1, .deskbody.t-billing > .page-head h1, .deskbody.t-tasks > .page-head h1, .deskbody.t-inventory > .page-head h1 { display: none; }

/* Draft 9.32: confirmations + insurance posting (Chris, 2026-10-06) */
.ctxmenu.apptctx { min-width: 220px; } .ctxmenu button.on { background: var(--ok-soft); color: var(--ok); font-weight: 600; } .ctxmenu button small { color: var(--muted); font-weight: 400; }
.dblock.two .dstatus.conf-confirmed { color: var(--ok); font-weight: 700; } .dblock.two .dstatus.conf-none { color: var(--bad); font-weight: 700; } .dblock.two .dstatus.conf-awaiting { color: var(--warn); font-weight: 700; }
.confdays { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .confdays > div { display: flex; flex-direction: column; gap: 4px; } .confdays small { color: var(--muted); font-size: 12px; } .confdays b { font-size: 15px; }
.confbar { height: 8px; border-radius: 999px; background: var(--panel2); overflow: hidden; } .confbar i { display: block; height: 100%; background: var(--ok); border-radius: 999px; transition: width .3s; }
.confcols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; margin-top: 10px; } .confcol .confbar { margin: 8px 0 10px; } .confnum { font-size: 26px; line-height: 1; } .confnum small { font-size: 13px; color: var(--muted); font-weight: 500; }
.confrow.st-confirmed { opacity: .75; } .confrow.st-none { border: 2px solid var(--bad); }
@media (max-width: 1100px) { .confcols { grid-template-columns: 1fr; } }
.inscard .interval b { font-size: 54px; } .inscard .interval b.ok { color: var(--ok); } .inscard .interval b.warn { color: var(--warn); } .inscard .interval b.bad { color: var(--bad); }
.inscard.tone-bad { border-color: var(--bad); } .inscard.tone-warn { border-color: var(--warn); }
.portals { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-top: 12px; }
.portal { display: flex; flex-direction: column; align-items: stretch; gap: 6px; text-align: left; padding: 14px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); font: inherit; min-height: 130px; }
.portal:hover { border-color: var(--accent); background: var(--panel); } .portal.has { border-color: var(--warn); } .portal b { font-size: 15px; } .portal small { font-size: 12px; }
.plogo { width: 36px; height: 36px; border-radius: 10px; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 17px; flex: none; } .plogo.sm { width: 26px; height: 26px; font-size: 13px; border-radius: 7px; }
/* in-app browser */
.browser { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--panel); margin-top: 10px; }
.bchrome { display: flex; align-items: center; gap: 4px; padding: 8px 10px; background: #e9eef6; border-bottom: 1px solid #d5dbe5; flex-wrap: wrap; }
.baddr { flex: 1 1 320px; display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 999px; padding: 0 14px; height: 36px; font-size: 13.5px; color: #333; font-family: inherit; overflow: hidden; white-space: nowrap; } .baddr .ic { width: 14px; height: 14px; color: var(--ok); }
.btabs { display: flex; gap: 4px; flex-wrap: wrap; } .btabs button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 8px 8px 0 0; border: none; background: transparent; font: inherit; font-size: 12.5px; color: #444; } .btabs button i { width: 10px; height: 10px; border-radius: 50%; } .btabs button.on { background: #fff; font-weight: 600; }
.bmain { display: grid; grid-template-columns: minmax(0, 1fr) 280px; min-height: 520px; }
.bpage { padding: 18px 22px 26px; background: #fff; border-right: 1px solid var(--line); font-family: Arial, Helvetica, sans-serif; color: #222; }
.pbar { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 3px solid var(--pc); margin-bottom: 18px; } .bpage h3 { margin: 0 0 4px; font-size: 18px; color: var(--pc); } .ptable { font-size: 13px; }
.plogin { max-width: 320px; margin: 40px auto; display: flex; flex-direction: column; gap: 10px; padding: 22px; border: 1px solid #ddd; border-radius: 8px; } .plogin button.solid { background: var(--pc); border-color: var(--pc); }
.btools { padding: 14px; display: flex; flex-direction: column; gap: 8px; background: var(--panel2); } .btools button { justify-content: flex-start; display: inline-flex; align-items: center; gap: 8px; } .btools .lg { margin-top: auto; justify-content: center; }
.captray { display: flex; flex-direction: column; gap: 8px; min-height: 60px; }
.capthumb { display: grid; grid-template-columns: 56px 1fr auto; gap: 8px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 6px; font-size: 12px; } .capthumb small { line-height: 1.3; }
.capfake { width: 56px; height: 42px; border-radius: 6px; background: #fff; border: 1px solid var(--line); position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 4px; padding: 6px 5px 0; } .capfake i { display: block; height: 4px; background: var(--pc); border-radius: 2px; } .capfake b { display: block; height: 3px; background: #ddd; border-radius: 2px; } .capfake .csv { font-size: 10px; font-weight: 700; color: var(--pc); text-align: center; margin-top: 2px; }
.uploadbar { height: 8px; border-radius: 999px; background: var(--panel); overflow: hidden; border: 1px solid var(--line); } .uploadbar i { display: block; height: 100%; width: 0; background: var(--accent); animation: upfill 1.4s ease-in-out forwards; } @keyframes upfill { to { width: 100%; } }
.postrev tr.first td { border-top: 2px solid var(--line); } .postrev tr.diff td { background: var(--warn-soft, #fff7e6); } .postrev tr.match td { background: transparent; }
@media (max-width: 1000px) { .bmain { grid-template-columns: 1fr; } .bpage { border-right: none; border-bottom: 1px solid var(--line); } }

/* Draft 9.32: staff messages (Chris, 2026-10-06) */
.modal.staffmsg { width: min(560px, 94vw); } .smsec { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; } .smsec textarea { width: 100%; margin-top: 6px; } .smsec select { max-width: 100%; }
.chip.pick { cursor: pointer; border: 1px solid var(--line); background: var(--panel); } .chip.pick small { color: var(--muted); margin-left: 4px; font-weight: 400; } .chip.pick.on { background: var(--accent); color: #fff; border-color: var(--accent); } .chip.pick.on small { color: rgba(255,255,255,.8); }
.staffpop { position: fixed; z-index: 70; width: min(380px, calc(100vw - 32px)); background: var(--panel); border: 1px solid var(--accent); border-radius: 14px; padding: 12px 14px 12px; box-shadow: 0 20px 60px rgba(0,0,0,.28), 0 0 0 4px var(--accent-soft, rgba(46,139,87,.15)); display: flex; flex-direction: column; gap: 8px; }
@keyframes sppop { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }
.sp-head { display: flex; align-items: center; gap: 8px; cursor: grab; margin: -4px -6px 0; padding: 4px 6px; border-radius: 8px; } .sp-head:active { cursor: grabbing; } .sp-head .ic { color: var(--accent); } .sp-head b { flex: 1; font-size: 14px; } .sp-head small { color: var(--muted); }
.sp-pat { align-self: flex-start; cursor: pointer; } .sp-text { margin: 0; font-size: 16px; line-height: 1.4; }
.sp-reply { margin: 0; font-size: 13.5px; padding: 6px 10px; border-radius: 10px; background: var(--panel2); } .sp-reply.me { background: var(--accent-soft, var(--panel2)); } .sp-reply small { color: var(--muted); margin-left: 4px; }
.staffpop form input { flex: 1; }

/* Draft 9.33: Collect payment mini invoices + checkout page (Chris, 2026-10-06) */
.minis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.miniinv { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); font: inherit; min-width: 0; }
.miniinv:hover { border-color: var(--accent); background: var(--panel); } .miniinv.on { outline: 2px solid var(--accent); }
.miniinv .codes { width: 100%; font-size: 12.5px; } .miniinv .codes td { padding: 2px 4px; } .miniinv .codes tr.tot td { font-weight: 700; border-top: 1px solid var(--line); }
.miniinv .owe { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; } .miniinv .owe small { color: var(--muted); font-size: 11px; } .miniinv .owe b { font-size: 17px; }
.checkout { display: flex; flex-direction: column; gap: 14px; } .costrip .chip { cursor: pointer; } .costrip .chip.on { background: var(--accent); color: #fff; border-color: var(--accent); } .costrip .chip.paidchip { opacity: .7; }
.cohead h2 { margin: 0 0 2px; font-size: 24px; }
.costeps { list-style: none; margin: 14px 0 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; } .costeps li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--panel2); font-size: 13.5px; color: var(--muted); }
.costeps li i { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-weight: 700; font-size: 12px; background: var(--panel); border: 1px solid var(--line); }
.costeps li.is-now { background: var(--accent-soft, var(--panel2)); color: var(--accent); font-weight: 700; } .costeps li.is-now i { background: var(--accent); color: #fff; border-color: var(--accent); }
.costeps li.is-done { color: var(--ok); } .costeps li.is-done i { background: var(--ok); color: #fff; border-color: var(--ok); }
.cotable { margin-top: 10px; } .cotable .x.sm { width: 26px; height: 26px; }
.coadd { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px dashed var(--line); } .coadd .search { width: 100%; max-width: 520px; }
.cohits { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; max-width: 520px; } .cohits button { width: 100%; text-align: left; display: flex; gap: 10px; align-items: center; padding: 7px 10px; } .cohits button b { margin-left: auto; }
.cototals { display: flex; gap: 26px; flex-wrap: wrap; margin-bottom: 12px; } .cototals div { display: flex; flex-direction: column; } .cototals small { color: var(--muted); font-size: 12px; } .cototals b { font-size: 20px; font-variant-numeric: tabular-nums; }
.cototals .big b { font-size: 34px; } .cototals .big.warn b { color: var(--warn); } .cototals .big.ok b { color: var(--ok); }
.coactions .chip.lg { font-size: 14px; padding: 8px 14px; } .coactions button.lg { font-size: 16px; padding: 12px 22px; }
@media (max-width: 760px) { .minis { grid-template-columns: 1fr; } }
.costeps { justify-content: flex-start; } .costeps li { flex: 0 0 auto; white-space: nowrap; }

/* Draft 9.34: front desk patient search (Chris, 2026-10-06) */
.fdsearch { position: relative; margin-bottom: 14px; z-index: 5; }
.fdsearch-row { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 6px 8px 6px 16px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.fdsearch-row:focus-within, .fdsearch.open .fdsearch-row { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft, rgba(46,139,87,.15)); }
.fdsearch-row .ic { color: var(--muted); } .fdq { flex: 1; border: none; background: transparent; font: inherit; font-size: 17px; padding: 6px 0; outline: none; box-shadow: none; } .fdsearch-row .x.sm { width: 28px; height: 28px; }
.fdhits { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 16px 48px rgba(10,16,24,.18); padding: 6px; display: flex; flex-direction: column; gap: 2px; max-height: 60vh; overflow-y: auto; }
.fdhits li { display: flex; align-items: center; gap: 8px; } .fdhits li > button:first-child { flex: 1; min-width: 0; }
.fdhits li button { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; padding: 8px 10px; border-radius: 10px; border: none; background: transparent; font: inherit; } .fdhits li button:hover { background: var(--panel2); }
.fdh-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .fdh-main b { font-size: 15px; } .fdh-main small { font-size: 12.5px; } .fdh-next { white-space: nowrap; }
.fdh-new button { color: var(--accent); font-weight: 600; border-top: 1px solid var(--line) !important; border-radius: 0 0 10px 10px !important; margin-top: 2px; } .fdh-new .ic { color: var(--accent); }
.newptform .grid2 { gap: 10px 14px; }

/* Draft 9.35: pretend-phone texts read like real text bubbles (Chris, 2026-10-06: the old pill style squashed them) */
.phonesim, .phone { width: 300px; }
.ph-body { display: flex; flex-direction: column; gap: 8px; }
.ph-body .sms { display: block; max-width: 92%; align-self: flex-start; background: #e9e9eb; color: #111; border-radius: 18px 18px 18px 6px; padding: 9px 12px; font-size: 14px; line-height: 1.4; white-space: normal; word-break: normal; overflow-wrap: anywhere; }
.ph-body .sms u { color: #0b57d0; text-decoration: underline; }
/* Draft 9.36: the pretend phone message window is blue, not black (Chris, 2026-10-06) */
.phonesim { background: #1a73e8; } .phonesim .ph-notch { background: #0d47a1; } .phonesim .ph-head .x { color: #e3f0ff; } .phonesim .sim-note { color: #d6e6ff; }

/* Draft 9.37: patient quick look from the search bar (Chris, 2026-10-06) */
.modal.ptquick { width: min(980px, 96vw); } .modal.ptquick h2 { margin: 0; font-size: 22px; }
.pq-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 10px 0; } .pq-grid .dcard { margin: 0; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.pq-grid .kv { margin: 0; } .pq-appts { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; font-size: 13.5px; } .pq-appts li.new { background: var(--ok-soft); border-radius: 8px; padding: 4px 6px; }
.pq-fam ul { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; } .pq-fam li { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13.5px; } .pq-fam li .rchip { margin-left: auto; }
.pq-book { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; } .pq-book .slotgrid { grid-template-columns: repeat(3, 1fr); } .slotbtn.tx { border-color: var(--accent); }
.pq-foot { border-top: 1px solid var(--line); padding-top: 12px; }
@media (max-width: 900px) { .pq-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 620px) { .pq-grid, .pq-book .slotgrid { grid-template-columns: 1fr; } }

/* Online booking pop-up: stays on the front desk screen until each booking is confirmed or declined (Chris, 2026-10-06) */
.onlinepop { position: relative; z-index: 54; width: 100%; pointer-events: auto; max-height: none; overflow-y: auto; background: var(--panel); border: 2px solid var(--warn); border-radius: 16px; padding: 14px 16px 16px; box-shadow: 0 24px 70px rgba(0,0,0,.35); display: flex; flex-direction: column; gap: 10px; animation: oppulse 1.6s ease-in-out infinite; }
@keyframes oppulse { 0%, 100% { box-shadow: 0 24px 70px rgba(0,0,0,.35), 0 0 0 0 color-mix(in srgb, var(--warn) 45%, transparent); } 50% { box-shadow: 0 24px 70px rgba(0,0,0,.35), 0 0 0 10px color-mix(in srgb, var(--warn) 0%, transparent); } }
.op-head { display: flex; align-items: center; gap: 10px; cursor: move; user-select: none; } .op-head b { font-size: 18px; } .op-head small { margin-left: auto; color: var(--warn); font-weight: 600; } .op-head svg { width: 22px; height: 22px; color: var(--warn); }
.op-list { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.op-list li { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel2); }
.op-list li > div:first-child { display: flex; flex-direction: column; gap: 2px; } .op-list li b { font-size: 16px; } .op-when { font-weight: 600; } .op-list li .row { justify-content: flex-end; }
.op-schedwrap { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; border-top: 1px dashed var(--line); }
.op-sched { max-height: 340px; overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.op-sched .ds-cols.n1 { grid-template-columns: 38px minmax(0, 1fr); }
.op-sched .dblock[data-op] { outline: 3px solid var(--warn); outline-offset: 1px; z-index: 3; }
.op-list li .op-schedwrap .row { justify-content: space-between; }

/* Automatic texts in Administration → Texting campaigns (Chris, 2026-10-06) */
.autogrp { display: block; margin: 8px 0 2px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.camplist.auto { margin: 2px 0 4px; } .camplist.auto button.off { opacity: .6; } .camplist .chip.sm { font-size: 11px; padding: 1px 8px; }
.autodetail { display: flex; flex-direction: column; gap: 10px; align-self: start; }
.autodl { display: grid; grid-template-columns: 120px 1fr; gap: 4px 12px; margin: 0; } .autodl dt { color: var(--muted); font-size: 13px; } .autodl dd { margin: 0; }
.autodetail textarea { width: 100%; font: inherit; }
.autoprev { display: flex; flex-direction: column; gap: 4px; max-width: 340px; } .autoprev .sms { background: #e9e9eb; color: #111; border-radius: 16px 16px 16px 4px; padding: 8px 12px; font-size: 14px; line-height: 1.35; }
.autodetail { position: sticky; top: 70px; }

/* Incoming patient text pop-up (Chris, 2026-10-06): never takes focus, pulses until someone takes it */
.textpop { position: relative; z-index: 69; width: 100%; pointer-events: auto; background: var(--panel); border: 2px solid var(--warn); border-radius: 14px; padding: 12px 14px; box-shadow: 0 20px 60px rgba(0,0,0,.28); display: flex; flex-direction: column; gap: 8px; animation: tppulse 1.8s ease-in-out infinite; }
@keyframes tppulse { 0%, 100% { box-shadow: 0 20px 60px rgba(0,0,0,.28), 0 0 0 0 color-mix(in srgb, var(--warn) 50%, transparent); } 50% { box-shadow: 0 20px 60px rgba(0,0,0,.28), 0 0 0 9px color-mix(in srgb, var(--warn) 0%, transparent); } }
.textpop.mine { border-color: var(--ok); animation: none; } .textpop .sp-head svg { color: var(--warn); } .textpop.mine .sp-head svg { color: var(--ok); }
.textpop form input { flex: 1; }

/* Text pop-up thread: recent back-and-forth with this patient, newest at the bottom (Chris, 2026-10-06) */
.tp-thread { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; padding: 8px; background: var(--panel2); border-radius: 10px; }
.tp-msg { display: flex; flex-direction: column; max-width: 85%; gap: 2px; } .tp-msg.in { align-self: flex-start; } .tp-msg.out { align-self: flex-end; align-items: flex-end; }
.tp-bub { padding: 7px 11px; border-radius: 16px; font-size: 14px; line-height: 1.35; } .tp-msg.in .tp-bub { background: #e9e9eb; color: #111; border-bottom-left-radius: 5px; } .tp-msg.out .tp-bub { background: #1a73e8; color: #fff; border-bottom-right-radius: 5px; }
.tp-msg.new .tp-bub { font-weight: 600; box-shadow: 0 0 0 2px var(--warn); } .tp-msg small { font-size: 11px; color: var(--muted); padding: 0 6px; }

/* Front desk pop-ups (online bookings, incoming texts) stack down the right edge below the search bar and never cover
   the search, the schedule or the Front desk button; the page behind stays fully usable (Chris, 2026-10-06) */
.popstack { position: fixed; right: 16px; top: 132px; z-index: 56; width: min(470px, calc(100vw - 32px)); max-height: calc(100vh - 150px); overflow-y: auto; display: flex; flex-direction: column; gap: 10px; pointer-events: none; padding: 6px; }
.popstack:empty { display: none; }
.popstack .op-head b { font-size: 17px; white-space: nowrap; } .popstack .op-head small { text-align: right; font-size: 12px; }
.popstack > * { flex-shrink: 0; }

/* Voicemail pop-up player (Chris, 2026-10-06) */
.textpop.vm { border-color: #7c3aed; animation: tpvm 1.8s ease-in-out infinite; } .textpop.vm .sp-head svg { color: #7c3aed; } .textpop.vm.mine { border-color: var(--ok); animation: none; }
@keyframes tpvm { 0%, 100% { box-shadow: 0 20px 60px rgba(0,0,0,.28), 0 0 0 0 rgba(124,58,237,.45); } 50% { box-shadow: 0 20px 60px rgba(0,0,0,.28), 0 0 0 9px rgba(124,58,237,0); } }
.chip.night { background: #1e293b; color: #e2e8f0; margin-left: 4px; }
.vm-player { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--panel2); border-radius: 12px; }
.vm-btn { width: 36px; height: 36px; border-radius: 50%; border: 0; background: #7c3aed; color: #fff; font-size: 15px; cursor: pointer; display: grid; place-items: center; flex-shrink: 0; } .vm-player.on .vm-btn { background: var(--fg); }
.vm-track { flex: 1; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; } .vm-track i { display: block; height: 100%; width: 0; background: #7c3aed; }
.vm-player.on .vm-track i { animation-name: vmprog; animation-timing-function: linear; animation-fill-mode: forwards; } .vm-player.played:not(.on) .vm-track i { width: 100%; opacity: .5; }
@keyframes vmprog { from { width: 0; } to { width: 100%; } }
.vm-transcript { margin: 0; font-size: 14px; line-height: 1.4; font-style: italic; color: var(--fg); display: flex; flex-direction: column; gap: 2px; } .vm-transcript small { font-style: normal; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.tp-outcome { align-items: center; } .tp-outcome select { font: inherit; font-size: 13px; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--line); } .tp-outcome form { flex: 1; } .tp-outcome form input { flex: 1; }
.tp-acted { margin: 0; font-size: 13px; color: var(--ok); font-weight: 600; } .okbtn:disabled { opacity: .45; cursor: not-allowed; }

/* Messages card: blue outline, conversation cards, thread view inside the card (Chris, 2026-10-06) */
.hcard.msgcard { border: 2px solid #1a73e8; }
.mc-list { display: flex; flex-direction: column; gap: 8px; }
.mc-thread-card { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel2); cursor: pointer; font: inherit; color: inherit; }
.mc-thread-card:hover { border-color: #1a73e8; box-shadow: 0 0 0 1px #1a73e8; } .mc-thread-card.unread { background: color-mix(in srgb, #1a73e8 7%, var(--panel)); } .mc-thread-card.unread b { color: #1a73e8; }
.mc-ic svg { width: 18px; height: 18px; color: #1a73e8; margin-top: 2px; } .mc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mc-prev { font-size: 13.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mc-thread-card.unread .mc-prev { color: var(--fg); }
.msgcard.open, .msgpopcard { display: flex; flex-direction: column; gap: 10px; } .mc-head { display: flex; flex-direction: column; gap: 2px; } .mc-head b { font-size: 18px; }
.mc-thread { max-height: 460px; min-height: 260px; } .msgcard.open form input { flex: 1; }
.tp-sys { align-self: center; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); background: var(--panel); border: 1px dashed var(--line); border-radius: 999px; padding: 3px 10px; max-width: 95%; } .tp-sys svg { width: 13px; height: 13px; flex-shrink: 0; } .tp-sys small { opacity: .8; }
.tp-bub.vmbub { display: flex; flex-direction: column; gap: 6px; min-width: 240px; } .tp-bub.vmbub .vm-player { background: transparent; padding: 0; }
.chatpop .sp-head .x { margin-left: 6px; }
.vm-nores { align-self: flex-start; }
.hcard.msgcard:not(.open) .mc-list { max-height: 400px; overflow-y: auto; padding-right: 4px; scrollbar-gutter: stable; }

/* Phone card (Chris, 2026-10-06): green outline (was brown; Chris 2026-10-12: phone colour is green), same layout as the Messages card; missed calls read as unread */
.hcard.phonecard { border: 2px solid var(--call); }
.hcard.phonecard:not(.open) .mc-list { max-height: 400px; overflow-y: auto; padding-right: 4px; scrollbar-gutter: stable; }
.phonecard.open { display: flex; flex-direction: column; gap: 10px; } .phonecard.open form input { flex: 1; }
.pc-card:hover { border-color: var(--call); box-shadow: 0 0 0 1px var(--call); } .pc-card.unread { background: color-mix(in srgb, #c0392b 7%, var(--panel)); } .pc-card.unread b { color: #b3261e; }
.pc-ic svg { width: 18px; height: 18px; color: var(--call); margin-top: 2px; } .pc-ic.missed svg { color: #c0392b; }
.phonecard .badge { background: #c0392b; }
.pc-hist { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; padding: 8px; background: var(--panel2); border-radius: 10px; margin: 0; }
.pc-hist li { display: flex; align-items: flex-start; gap: 10px; padding: 6px 4px; border-bottom: 1px solid var(--line); } .pc-hist li:last-child { border-bottom: 0; }
.pc-hist li > div { flex: 1; display: flex; flex-direction: column; gap: 1px; } .pc-hist li small { font-size: 12.5px; color: var(--muted); } .pc-hist li.unread b { color: #b3261e; }
/* Missed-call pop-up: brown like the Phone card, pulses until someone calls back */
.textpop.misspop { border-color: var(--call); animation: tpbrown 1.8s ease-in-out infinite; } .textpop.misspop .sp-head svg { color: #c0392b; } .textpop.misspop.mine { border-color: var(--ok); animation: none; } .textpop.misspop.mine .sp-head svg { color: var(--ok); }
@keyframes tpbrown { 0%, 100% { box-shadow: 0 20px 60px rgba(0,0,0,.28), 0 0 0 0 rgba(42,168,74,.45); } 50% { box-shadow: 0 20px 60px rgba(0,0,0,.28), 0 0 0 9px rgba(42,168,74,0); } }
.mp-unknown { display: flex; flex-direction: column; gap: 2px; } .mp-unknown b { font-size: 18px; font-family: inherit; }
/* Dial keypad */
.modal.dialpad { width: min(320px, 94vw); border: 2px solid var(--call); border-radius: 26px; padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 8px; background: linear-gradient(180deg, var(--panel) 0%, color-mix(in srgb, var(--call) 5%, var(--panel)) 100%); box-shadow: 0 18px 40px rgba(0,0,0,.28); }
.dp-head h2 { display: flex; align-items: center; gap: 8px; font-size: 17px; color: var(--call); } .dp-ic { width: 18px; height: 18px; fill: currentColor; } .dialbtn .dp-ic { width: 14px; height: 14px; margin-right: 3px; vertical-align: -2px; }
.dp-form { margin: 0; } .dp-num { width: 100%; font-size: 30px; font-weight: 500; text-align: center; font-family: inherit; letter-spacing: .06em; padding: 6px 4px 8px; border: 0; border-bottom: 2px solid color-mix(in srgb, var(--call) 35%, transparent); border-radius: 0; background: transparent; color: var(--fg); outline: none; font-variant-numeric: tabular-nums; } .dp-num:focus { border-bottom-color: var(--call); } .dp-num::placeholder { font-size: 18px; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.dp-match { min-height: 46px; display: flex; flex-direction: column; justify-content: center; text-align: center; font-size: 13px; }
.dp-pat { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 10px; border-radius: 12px; background: color-mix(in srgb, var(--call) 10%, var(--panel)); } .dp-pat.none { background: var(--panel2); } .dp-miss { color: #b3261e; }
.dp-sug { display: flex; flex-direction: column; gap: 4px; }
.dp-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 14px; justify-items: center; padding: 2px 6px; }
.dp-keys button { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 70px; height: 70px; padding: 0; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--call) 18%, var(--line)); background: var(--panel); box-shadow: 0 2px 6px rgba(0,0,0,.08); line-height: 1; transition: transform .08s, background .12s; } .dp-keys button:hover { background: color-mix(in srgb, var(--call) 10%, var(--panel)); } .dp-keys button:active { transform: scale(.94); background: color-mix(in srgb, var(--call) 18%, var(--panel)); }
.dp-keys button b { font-size: 26px; font-weight: 400; } .dp-keys button small { font-size: 9.5px; letter-spacing: .16em; color: var(--muted); margin-top: 2px; min-height: 10px; }
.dp-foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; justify-items: center; margin-top: 4px; }
.dp-call { width: 70px; height: 70px; border-radius: 50%; border: 0; background: var(--call, #2aa84a); color: #fff; display: grid; place-items: center; padding: 0; box-shadow: 0 6px 16px rgba(42,168,74,.35); transition: transform .08s; } .dp-call svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .dp-call:hover:not(:disabled) { transform: scale(1.04); } .dp-call:disabled { background: #b9c2bb; box-shadow: none; opacity: .8; }
.dp-back { width: 46px; height: 46px; border-radius: 50%; border: 0; background: transparent; color: var(--muted); display: grid; place-items: center; padding: 0; } .dp-back svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; } .dp-back:hover { background: var(--panel2); color: var(--fg); }
.dialbtn { border: 1px solid var(--call); color: var(--call); background: color-mix(in srgb, var(--call) 7%, var(--panel)); border-radius: 999px; font-weight: 600; display: inline-flex; align-items: center; } .dialbtn:hover { background: color-mix(in srgb, var(--call) 16%, var(--panel)); }

/* Insurance posting as its own page (Chris, 2026-10-06): the insurer browser stretches to the bottom of the window */
.inspage { margin: -4px -8px 0; } .inspage .insbar { margin-bottom: 8px; padding: 6px 12px; } .inspage .fdback b { flex: 1; }
.inspage .browser { display: flex; flex-direction: column; min-height: calc(100vh - 140px); } .inspage .bmain { flex: 1; min-height: 0; }
.inspage .bmain { grid-template-columns: minmax(0, 1fr) 300px; }
.inspage .portals { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* Openings card (Chris, 2026-10-06): next three openings, dentist Chair 1 or hygiene */
.opencard { display: flex; flex-direction: column; gap: 10px; }
.slotgrid.open3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 700px) { .slotgrid.open3 { grid-template-columns: 1fr; } }
/* Checkout page booking section */
.cobook { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.cobook-cards { grid-template-columns: repeat(auto-fill, minmax(260px, 320px)); align-items: start; } .cobook-cards .bubbles { align-items: center; } .cobook-cards .bubble { cursor: default; } .cobook-cards .visit .primary { margin-top: 2px; } .cobook-cards .visit-f { margin-top: auto; }
.visit.hyg-b { border-color: var(--pink-t); } .sw.hygsw { background: var(--pink-t); } .cobook-cards .rchip { margin: 2px 0; }
.cobook-open { display: flex; flex-direction: column; gap: 6px; } .cobook-open .slotgrid { grid-template-columns: 1fr; } .cobook-open .slotbtn { flex-direction: row; justify-content: space-between; align-items: center; } .cobook-open .link { align-self: flex-start; }
/* Checkout invoice wears the ledger's invoice look (Chris, 2026-10-06) */
.co-invoice { gap: 12px; } .co-invoice .co-name { font-size: 22px; } .co-invoice .costeps { margin: 0; }
.co-invoice .inv-lines col.c-x { width: 56px; } .co-invoice .inv-lines td.end { overflow: visible; } .co-invoice .coadd { padding-top: 4px; }
.co-f .chip.lg { font-size: 14px; padding: 7px 14px; } .co-f button.lg { font-size: 15px; padding: 9px 20px; }
/* Health history badge until the new form is viewed (Chris, 2026-10-06) */
.hxbtn .badge, .al-foot .badge { background: var(--bad, #c0392b); color: #fff; margin-left: 4px; } .hxbtn.new { border-color: var(--bad, #c0392b); color: var(--bad, #c0392b); font-weight: 600; }
.cobook-cards .vminctl { display: inline-flex; align-items: center; gap: 4px; } .cobook-cards .vminctl b { min-width: 52px; text-align: center; color: var(--fg); } .cobook-cards .vminctl .sm { padding: 1px 7px; }
.cobook-btns { margin-top: 2px; } .cobook-btns .primary { flex: 1; }
.visitcard.hygcard { border-color: var(--pink-t); }
/* Open calendar: its own colour, blue like the calendar it opens (Chris, 2026-10-06) */
.calbtn { background: #1a73e8; border-color: #1a73e8; color: #fff; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; } .calbtn:hover { background: #1557b0; border-color: #1557b0; color: #fff; } .calbtn svg { width: 14px; height: 14px; }
/* Calendar page (Chris, 2026-10-06) */
.calhead .seg button { font-size: 13px; }
.calgrid.wk .col.daystart { box-shadow: -3px 0 0 var(--line); } .calgrid.wk.n20 .sched { min-width: 1700px; } .calgrid.wk.n10 .sched { min-width: 980px; }
.calgrid.wk .col.istoday { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.calgrid.wk .appt-top b { font-size: 11.5px; } .calgrid.wk .colh small { font-size: 11px; }

/* Draft 9.66 (Chris, 2026-10-06): compact ledger aging strip, own class so the A/R .aging grid no longer stretches it */
.ledger-sum.ledage { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.5fr); gap: 8px; align-items: start; }
.ledger-sum.ledage > div { min-width: 0; padding: 7px 10px; gap: 1px; border-radius: 8px; }
.ledger-sum.ledage small { font-size: 11px; margin-bottom: 2px; }
.ledger-sum.ledage .agerow { font-size: 12px; line-height: 1.5; }
.ledger-sum.ledage .agerow b { font-size: 13px; }
.ledger-sum.ledage .totals { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
.ledger-sum.ledage .totals small, .ledger-sum.ledage .totals button { grid-column: 1 / -1; }
@media (max-width: 900px) { .ledger-sum.ledage { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ledger-sum.ledage .totals { grid-column: 1 / -1; } }

/* Draft 9.68 (Chris, 2026-10-06): compressed vertical one-chair day beside the patient's bookings, initials only, their visit bold */
.vsnip { all: unset; box-sizing: border-box; cursor: pointer; width: 150px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.vsnip:hover { border-color: var(--accent); } .vsnip:focus-visible { outline: 2px solid var(--accent); }
.vsnip-h { display: flex; flex-direction: column; line-height: 1.25; } .vsnip-h b { font-size: 13px; } .vsnip-h small { color: var(--muted); font-size: 11px; }
.vsnip-body { position: relative; }
.vs-hl { position: absolute; left: 0; width: 20px; font-size: 10px; color: var(--muted); transform: translateY(-1px); }
.vs-hr { position: absolute; left: 22px; right: 0; border-top: 1px solid var(--line); }
.vs-col { position: absolute; left: 24px; right: 0; top: 0; bottom: 0; }
.vs-col > * { position: absolute; left: 0; right: 0; }
.vs-off { background: var(--panel2); }
.vs-lunch { background: repeating-linear-gradient(45deg, var(--panel2) 0 4px, transparent 4px 8px); }
.vs-o { left: 2px; right: 2px; border-radius: 3px; border: 0; border: 2px solid; font-size: 10px; line-height: 1; padding: 1px 4px; overflow: hidden; opacity: .9; font-weight: 600; display: flex; align-items: flex-start; }
.vs-me { z-index: 2; left: -2px; right: -2px; border-radius: 5px; border: 0; font-size: 12px; font-weight: 700; line-height: 1.1; padding: 2px 6px; display: flex; align-items: center; color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.25); white-space: nowrap; overflow: hidden; }
.vs-me.c-purple { background: var(--purple-t); } .vs-me.c-pink { background: var(--pink-t); } .vs-me.c-blue { background: var(--blue-t); } .vs-me.c-sky { background: var(--sky-t); } .vs-me.c-green { background: var(--green-t); } .vs-me.c-amber { background: var(--amber-t); } .vs-me.c-teal { background: var(--teal-t); } .vs-me.c-red { background: var(--red-t); } .vs-me.c-grey { background: var(--grey-t); } 

/* Draft 9.69 (Chris, 2026-10-06): each booking on the Appointments tab is a card (max 2 per row) with its chair's compressed day inside */
.apcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.apcard { display: flex; gap: 14px; justify-content: space-between; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 14px 14px 16px; }
.apcard.me { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.apcard-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; align-items: flex-start; }
.aprel { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
.apdate { font-size: 17px; } .aptime { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; } .apwho { font-size: 14px; }
.apopen { margin-top: auto; }
.apcard .vsnip { border: 0; padding: 0; width: 140px; flex-shrink: 0; }
@media (max-width: 1000px) { .apcards { grid-template-columns: 1fr; } }

/* Draft 9.70 (Chris, 2026-10-06): narrower appointment cards in the family tree theme: "This patient" tab on theirs, family members grey */
.apcards { display: flex; flex-wrap: wrap; gap: 16px 12px; padding-top: 6px; max-width: 772px; } /* two per row at most */
.apcard { position: relative; width: 380px; max-width: 100%; background: var(--panel2); cursor: pointer; }
.apcard:not(.me):hover { border-color: var(--accent); }
.apcard.me { cursor: default; background: var(--panel); border: 2px solid var(--accent); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.apcard:not(.me) .aprel { color: var(--muted); }
.apcard .vsnip { width: 120px; }

/* Draft 9.71 (Chris, 2026-10-06): + Child in the tree, and other contacts (grandparent, guardian) under it */
.fam-children .fam-add { align-self: stretch; justify-content: center; }
.fam-others { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; justify-content: center; width: 100%; margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--line); }
.fam-others-h { flex-basis: 100%; text-align: center; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.fam-other { background: var(--panel2); border: 1px dashed var(--line); border-radius: 12px; padding: 8px 12px; display: flex; flex-direction: column; gap: 4px; min-width: 200px; max-width: 260px; cursor: pointer; }
.fam-other:hover { border-color: var(--accent); }
.fam-add.sm { flex: 0 0 auto; padding: 8px 14px; }
.fam-others.compact { margin-top: 6px; padding-top: 6px; gap: 6px; } .fam-other.sm { min-width: 0; padding: 3px 8px; display: inline-block; font-size: 12px; cursor: default; }
.ctxmenu .um-sub { padding: 6px 12px 2px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.famform { display: flex; flex-direction: column; gap: 10px; } .fcheck { display: flex; align-items: center; gap: 8px; font-size: 14px; } .famform .row.end { justify-content: flex-end; }

/* Draft 9.72 (Chris, 2026-10-06): simplified Contact card */
.contactcard .cc-rows { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; }
.cc-row { display: flex; gap: 12px; align-items: flex-start; }
.cc-ic { flex: 0 0 34px; height: 34px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; } .cc-ic svg { width: 17px; height: 17px; }
.cc-row > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cc-row small { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.cc-row b { font-size: 15.5px; font-weight: 500; line-height: 1.4; overflow-wrap: anywhere; } .cc-row b.cc-big { font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cc-rel { font-size: 12px; font-weight: 500; color: var(--muted); background: var(--panel2); border-radius: 999px; padding: 1px 8px; margin-left: 4px; vertical-align: middle; }
.cc-acts { display: flex; gap: 6px; margin-top: 4px; }

/* Draft 9.73 (Chris, 2026-10-06): "Visits to book" card on the Summary holds the compact visit cards */
.bookcard .cobook { margin-top: 0; } .bookcard .cobook-cards { grid-template-columns: 1fr; }

/* Draft 9.74 (Chris, 2026-10-06): compact family tree in pop-ups: smaller initials, names on one line */
.famtree.compact .avatar { width: 22px; height: 22px; font-size: 9.5px; }
.famtree.compact .fam-name { gap: 6px; } .famtree.compact .fam-name b { white-space: nowrap; }
.famtree.compact .fam-parents .fam-person { min-width: 165px; } .famtree.compact .fam-phone span { white-space: nowrap; }
.famtree.compact .fam-name small { white-space: nowrap; }
.mini-body.two { grid-template-columns: minmax(200px, 230px) minmax(0, 1fr); }

/* Draft 9.75 (Chris, 2026-10-06): a Visits to book card per family member; this patient outlined, family grey */
.bookcard { position: relative; } .bookcard.me { border: 2px solid var(--accent); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.bookcard.fam { background: var(--panel2); } .bookcard.fam .visit { background: var(--panel); }
.bookcard .ccard-h small { text-transform: none; letter-spacing: 0; font-weight: 500; }

/* Draft 9.78 (Chris, 2026-10-06): appointment pop-up: red Cancel on the left, green Here, blue phone beside the name */
.ap-name { display: flex; align-items: center; gap: 8px; } .ap-name .phonebtn:first-of-type { margin-left: 4px; }
.phonebtn { width: 32px; height: 32px; border-radius: 50%; border: 0; padding: 0; background: #1a73e8; color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; } .phonebtn:hover { background: #1558b0; } .phonebtn svg { width: 16px; height: 16px; }
.btn-red { background: var(--bad); border-color: var(--bad); color: #fff; font-weight: 600; } .btn-red:hover { filter: brightness(.92); }
.btn-green { background: var(--ok); border-color: var(--ok); color: #fff; font-weight: 600; } .btn-green:hover { filter: brightness(.92); }

/* Draft 9.82 (Chris, 2026-10-06): patient text pop-up in the blue Messages style */
.msgpopcard .tp-day { text-align: center; font-size: 11px; color: var(--muted); margin: 6px 0 2px; }
.msgpopcard .mc-head > div { display: flex; flex-direction: column; } .msgpopcard .tp-bub .att { margin-top: 6px; display: flex; gap: 6px; align-items: center; background: rgba(255,255,255,.9); color: var(--fg); border-radius: 8px; padding: 4px 8px; text-align: left; }
.msgpopcard .tp-msg.out small, .msgpopcard .tp-msg.in small { display: block; }
.msgpopcard .th-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; text-align: left; } .msgpopcard .th-head > div { display: flex; flex-direction: column; } .msgpopcard .th-head b { font-size: 18px; }

/* Draft 9.83: Undo on the checkout page after a front desk Complete visit */
.undobar { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--warn-soft); border: 1px solid var(--warn); border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; }

/* Draft 9.83 (Chris, 2026-10-06): one Send button everywhere: blue circle, up arrow */
.sendbtn { width: 38px; height: 38px; min-width: 38px; border-radius: 50%; border: 0; padding: 0; background: #1a73e8; color: #fff; display: inline-grid; place-items: center; cursor: pointer; flex: none; align-self: center; box-shadow: 0 2px 6px rgba(26,115,232,.35); }
.sendbtn:hover { background: #1558b0; } .sendbtn:focus-visible { outline: 2px solid #1a73e8; outline-offset: 2px; }

/* Every front desk card has a coloured perimeter (Chris, 2026-10-06) */
.fdcards > .hcard { border-width: 2px; border-style: solid; }
.fdcards > .opencard { border-color: #00897b; }
.fdcards > .confcard { border-color: #00acc1; }
.fdcards > .formscard { border-color: #7b1fa2; }
.fdcards > .recarefd { border-color: #e67e22; }
.fdcards > .campcard { border-color: #c2185b; }
.fdcards > .emailcard { border-color: #d93025; }
.fdcards > .predetfd { border-color: #3949ab; }
.fdcards > .arcard { border-color: #6d8b2a; }
.fdcards > .collectcard { border-color: #2e8b57; }
.fdcards > .hcard.sticky { border-width: 0; }
.emailcard .gm-list.gm-mini { max-height: 400px; overflow-y: auto; scrollbar-gutter: stable; }

/* Posting review cards (Chris, 2026-10-06) */
.postcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .postcards { grid-template-columns: 1fr; } }
.postcard { background: #fff; border: 2px solid var(--ok, #2e8b57); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.postcard.diff { border-color: var(--warn, #b7791f); }
.postcard .pc-name { font-size: 17px; display: block; }
.pc-src { background: color-mix(in srgb, var(--pc) 12%, #fff); color: var(--pc); border: 1px solid color-mix(in srgb, var(--pc) 40%, #fff); }
.pc-tbl td, .pc-tbl th { padding: 6px 8px; } .pc-tbl tr.diff td { background: var(--warn-soft, #fff7e6); }
.pc-why { display: block; color: var(--warn, #b7791f); }
.pc-bal { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; background: var(--soft, #f4f6f8); border-radius: 10px; padding: 10px 12px; }
.pc-bal > div { display: flex; flex-direction: column; gap: 2px; } .pc-bal b { font-size: 20px; }
.pc-post { min-width: 110px; }

/* Small front desk cards in one row (Chris, 2026-10-06) */
.fdminis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin: 14px 0; }
@media (max-width: 900px) { .fdminis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fdmini { background: var(--panel); border: 2px solid var(--line); border-radius: 14px; padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; cursor: pointer; min-width: 0; }
.fdmini:hover { box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.fdmini .fm-big { font-size: 28px; line-height: 1.1; } .fdmini .fm-big.ok { color: var(--ok); } .fdmini .fm-big.warn { color: var(--warn); } .fdmini .fm-big.bad { color: var(--bad); }
.fdmini small { line-height: 1.3; }
.fdmini.insmini.tone-ok { border-color: var(--ok); } .fdmini.insmini.tone-warn { border-color: var(--warn); } .fdmini.insmini.tone-bad { border-color: var(--bad); }
.fdmini.recaremini { border-color: #e67e22; } .fdmini.armini { border-color: #6d8b2a; } .fdmini.predetmini { border-color: #3949ab; }
.fdmini.insarmini { border-color: #0f6e8c; }
.ask-body p { margin: 6px 0; } .askcheck { margin-top: 10px; font-weight: 600; align-items: flex-start; } .askcheck input { margin-top: 3px; }
.pc-tbl th:last-child, .pc-tbl td:last-child { background: color-mix(in srgb, var(--ok, #2e8b57) 9%, transparent); } .pc-tbl tr.diff td:last-child { background: color-mix(in srgb, var(--warn, #b7791f) 16%, transparent); }
.postempty p { margin: 0; }
.namerow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ctbtns { display: inline-flex; gap: 6px; margin-left: 4px; vertical-align: middle; } .mini .ctbtns .phonebtn, .pc-name .ctbtns .phonebtn, .co-name .ctbtns .phonebtn { width: 28px; height: 28px; } .ctbtns .phonebtn .ic { width: 16px; height: 16px; }
.ds-nav { margin: 6px 0 4px; } .ds-nav .on { background: var(--accent-soft, #e6f4f4); font-weight: 600; }

/* Month calendar under the side schedules (Chris, 2026-10-07) */
.dsmonth { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 8px 8px 6px; }
.dm-head { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; } .dm-head b { flex: 1; font-size: 13.5px; } .dm-head .ghost.sm { padding: 2px 8px; min-height: 0; } .dm-head .on { background: var(--accent-soft, #e6f4f4); font-weight: 600; }
.dm-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.dm-wd { text-align: center; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; color: var(--muted); padding-bottom: 2px; }
.dm-day { position: relative; height: 30px; border: 1px solid transparent; border-radius: 8px; background: var(--panel2, #f4f6f8); font-size: 12.5px; font-weight: 600; color: var(--fg); padding: 0; cursor: pointer; }
.dm-day:hover { border-color: var(--accent, #0f7f7f); }
.dm-day.out { color: var(--muted); opacity: .55; }
.dm-day.closed { background: repeating-linear-gradient(135deg, var(--panel2, #eef1f4) 0 5px, transparent 5px 10px); color: var(--muted); font-weight: 500; }
.dm-day.today { border-color: var(--accent, #0f7f7f); color: var(--accent, #0f7f7f); }
.dm-day.on { background: var(--accent); color: var(--accent-fg); border-color: var(--accent, #0f7f7f); }
.dm-dot { position: absolute; left: 50%; bottom: 3px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--accent, #0f7f7f); opacity: .55; } .dm-dot.full { opacity: 1; }
.dm-day.on .dm-dot { background: var(--accent-fg); }
.chairtog { display: inline-flex; align-items: center; gap: 4px; } .chairtog small { margin-right: 2px; } .chairtog button { width: 30px; height: 30px; padding: 0; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); font-weight: 700; font-size: 13px; color: var(--muted); cursor: pointer; } .chairtog button.on { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }

/* Open slots, next 10 working days (Chris, 2026-10-07) */
.openslot { position: absolute; left: 3px; right: 3px; border: 1.5px dashed color-mix(in srgb, var(--muted) 70%, transparent); border-radius: 6px; display: flex; flex-direction: column; pointer-events: none; overflow: hidden; }
.openslot span { display: flex; align-items: center; justify-content: center; min-height: 0; overflow: hidden; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; color: var(--muted); white-space: nowrap; }
.openslot span + span { border-top: 1.5px dashed color-mix(in srgb, var(--muted) 70%, transparent); }
.openslot:not(.slothyg) span { font-weight: 500; letter-spacing: 0; }

/* Hygiene length suggestion (Chris, 2026-10-07) */
.suggest { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 0 0 12px; } .suggest > div { display: flex; flex-direction: column; gap: 3px; } .suggest b { font-size: 20px; color: var(--accent); line-height: 1.2; } .suggest b small { font-size: 13px; color: var(--muted); font-weight: 500; }
.sugline { display: block; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hygrules .hr-tables { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 8px 0 12px; } .hygrules .hr-table b { display: block; margin-bottom: 4px; font-size: 13px; } .hygrules .mins { width: 64px; } .hygrules .mins.xs { width: 54px; }
.hygrules .hr-rules { margin: 6px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; line-height: 1.5; } .hygrules .hr-rules .chk { display: inline-flex; vertical-align: middle; margin-right: 4px; }

/* Holidays on the month calendar and closed days (Chris, 2026-10-07) */
:root { --hol: #c98a1b; --hol-soft: #fbefd6; }
.dm-day.hol { background: var(--hol-soft); color: #7a5410; border-color: color-mix(in srgb, var(--hol) 55%, transparent); }
.dm-day.hol.closed { background: repeating-linear-gradient(135deg, var(--hol-soft) 0 5px, #fff7e8 5px 10px); color: #7a5410; font-weight: 600; }
.dm-day.hol.on { background: var(--hol); color: #fff; border-color: var(--hol); }
.dm-hols { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; font-size: 11.5px; color: var(--muted); } .dm-hols span { display: flex; align-items: center; gap: 6px; } .dm-hols small { color: var(--muted); font-size: 10.5px; }
.dm-sw { width: 9px; height: 9px; border-radius: 50%; background: var(--hol); flex: none; display: inline-block; } .dm-hols span:not(.closed) .dm-sw, .hollist li:not(.closed) .dm-sw { background: transparent; box-shadow: inset 0 0 0 2px var(--hol); }
.closedday { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, var(--panel2, #eef1f4) 0 6px, transparent 6px 12px); z-index: 2; display: flex; align-items: flex-start; justify-content: center; padding-top: 10px; pointer-events: none; }
.closedday span { font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; background: var(--panel); padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); writing-mode: vertical-rl; transform: rotate(180deg); }
.hollist { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow: auto; } .hollist li { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 8px; background: var(--panel2); font-size: 13px; } .hollist li span { flex: 1; } .hollist li small { display: block; }
.holform .chk { font-size: 13px; }
.col:has(.closedday) .lunch, .col:has(.closedday) .blocked, .ds-grid:has(.closedday) .ds-lunch, .ds-grid:has(.closedday) .ds-hr { display: none; }

/* Owner / manager home + Administration back end (Chris, 2026-10-07) */
.fdmini.prodmini { border-color: #00796b; } .fdmini.collmini { border-color: #2e8b57; }
.mgrcards > .prodcard { border-color: #00796b; } .mgrcards > .healthcard { border-color: #00897b; } .mgrcards > .moneycard { border-color: #0f6e8c; } .mgrcards > .teamcard { border-color: #5c6bc0; } .mgrcards > .boardcard { border-color: #8d6e63; }
.prodrow { display: flex; flex-direction: column; gap: 4px; padding: 8px 0; border-top: 1px solid var(--line); } .prodrow:first-of-type { border-top: 0; }
.prodrow .bar { height: 8px; border-radius: 999px; background: var(--panel2); overflow: hidden; } .prodrow .bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; } .prodrow .bar i.ok { background: var(--ok); } .prodrow .bar i.low { background: var(--warn); }
.deskbtn.adminbtn { background: #5c6bc0; } .deskbtn.adminbtn:hover { background: #5c6bc0; }
.adminhead .desk-av { background: #5c6bc0; }
.kv dd.ok { color: var(--ok); } .kv dd.warn { color: var(--warn); } .kv dd.bad { color: var(--bad); }

/* Time off (Chris, 2026-10-07) */
:root { --off: var(--bad); --off-soft: var(--bad-soft); } /* time off is red on every calendar (Chris, 2026-10-08) */
.dm-day.off { background: var(--off-soft); color: var(--bad); border-color: color-mix(in srgb, var(--off) 50%, transparent); }
.dm-day.offpend { border: 1.5px dashed var(--off); }
.dm-day.off.on, .dm-day.offpend.on { background: var(--off); color: #fff; }
.dm-hols .staffoff .dm-sw { background: var(--off); box-shadow: none; } .dm-hols .staffoff.pending .dm-sw { background: transparent; box-shadow: inset 0 0 0 2px var(--off); }
.timeoffcard { border: 2px solid var(--off); } .mgrcards > .teamcard { border-color: var(--off); }
.tofform { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 10px; } .tofform .row .field { flex: 1; min-width: 130px; } .tofform button { align-self: flex-start; }
.toflist { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; } .toflist li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--panel2); } .toflist li > div:first-child { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .toflist small { font-size: 12px; } .toflist small.bad { color: var(--bad); }
.toflist li.tof-pending { box-shadow: inset 3px 0 0 var(--warn); } .toflist li.tof-approved { box-shadow: inset 3px 0 0 var(--ok); } .toflist li.tof-declined { box-shadow: inset 3px 0 0 var(--bad); opacity: .8; }
.ccard-h.sub { display: block; margin-top: 10px; }
.dm-hols span.staffoff .dm-sw { background: var(--off); box-shadow: none; } .dm-hols span.staffoff.pending .dm-sw { background: transparent; box-shadow: inset 0 0 0 2px var(--off); }
.toflist li { padding-left: 13px; }
/* ul.plain li resets padding with higher specificity; the time-off rows need room beside their colour stripe (Chris, 2026-10-07) */
ul.plain.toflist li { padding: 8px 10px 8px 14px; border-bottom: 0; }

/* Time off calendar (Chris, 2026-10-07): tap a day or drag a range */
.tofcal { margin-top: 8px; user-select: none; } .tofcal .dm-day { height: 32px; }
.tofcal .dm-day.past { opacity: .4; cursor: default; } .tofcal .dm-day.past:hover { border-color: transparent; }
.tofcal .dm-day.mine-approved { background: var(--off-soft); color: #4a2b85; } .tofcal .dm-day.mine-pending { border: 1.5px dashed var(--off); }
.tofcal .dm-day.sel { background: var(--off); color: #fff; border-color: var(--off); }
.tofpick { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--off-soft); } .tofpick.none { background: var(--panel2); } .tofpick b { color: #4a2b85; } .tofpick .x { margin-left: auto; }

/* Team time off requests (Chris, 2026-10-07): flashing border while one waits; each request a card with its calendar */
@keyframes tofflash { 0%, 100% { border-color: var(--off); box-shadow: 0 0 0 0 transparent; } 50% { border-color: var(--bad); box-shadow: 0 0 0 4px color-mix(in srgb, var(--bad) 22%, transparent); } }
.mgrcards > .teamcard.flash { animation: tofflash 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .mgrcards > .teamcard.flash { animation: none; border-color: var(--bad); } }
.rqcard { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 12px; margin-top: 10px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 1px 4px rgba(0,0,0,.05); }
.rqcard.discuss { border-style: dashed; }
.rq-info { display: flex; flex-direction: column; gap: 2px; } .rq-info b { font-size: 15px; } .rq-when { color: var(--bad); font-weight: 700; font-size: 13.5px; } .rq-info small { font-size: 12.5px; } .rq-info small.bad { color: var(--bad); }
.rq-cals { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.rqcal .dm-day { height: 24px; font-size: 11.5px; display: flex; align-items: center; justify-content: center; cursor: default; } .rqcal .dm-day:hover { border-color: transparent; }
.rqcal .dm-day.req { background: var(--bad); color: #fff; border-color: var(--bad); font-weight: 700; } .rqcal .dm-day.today { border-color: var(--accent); }
.rq-btns { justify-content: flex-end; }
.tofcal .dm-day.mine-discuss { border: 1.5px dashed var(--warn); }
/* Time off on the manager's side calendar in the same red as the request cards (Chris, 2026-10-07): solid when approved, dashed while waiting */
.dsmonth:not(.tofcal):not(.rqcal) .dm-day.off { background: var(--bad); color: #fff; border-color: var(--bad); }
.dsmonth:not(.tofcal):not(.rqcal) .dm-day.offpend { border: 1.5px dashed var(--bad); color: var(--bad); }
.dm-hols span.staffoff .dm-sw { background: var(--bad); } .dm-hols span.staffoff.pending .dm-sw { background: transparent; box-shadow: inset 0 0 0 2px var(--bad); }
.openslot.slothyg span { font-size: 10px; } .openslot.slothyg span small { font-weight: 500; }
.openslot.slothyg span { flex-direction: column; gap: 1px; line-height: 1.15; } .openslot.slothyg span small { font-size: 9.5px; font-weight: 500; letter-spacing: 0; }
.openslot.dropen span { flex-direction: column; gap: 1px; line-height: 1.2; font-weight: 600; letter-spacing: 0; font-size: 11.5px; } .openslot.dropen span small { font-size: 11px; font-weight: 500; }
/* Fee guide upload + review (2026-10-07) */
.drop { display: block; } .drop.over { background: var(--accent-soft, rgba(46,125,50,.08)); border-style: solid; }
.feebar { height: 8px; background: var(--panel2); border-radius: 4px; overflow: hidden; } .feebar i { display: block; height: 100%; background: var(--accent); transition: width .2s; }
.feemeta { display: grid; grid-template-columns: 2fr 2fr 1fr 1fr; gap: 8px; } @media (max-width: 760px) { .feemeta { grid-template-columns: 1fr 1fr; } }
.feestats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 10px 0; } .feestats > div { background: var(--panel2); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; } .feestats b { font-size: 20px; } .feestats small { color: var(--muted); font-size: 11.5px; line-height: 1.3; }
@media (max-width: 760px) { .feestats { grid-template-columns: 1fr 1fr; } }
.feescroll { max-height: 46vh; overflow: auto; border: 1px solid var(--line); border-radius: 8px; margin: 8px 0; } .feescroll thead th { position: sticky; top: 0; background: var(--panel); z-index: 1; }
.feescroll td.up, .feestats b.up { color: var(--ok); } .feescroll td.down, .feestats b.down { color: var(--bad); } .feescroll tr.fnew td:first-child { box-shadow: inset 3px 0 var(--ok); } .feescroll tr.fgone { opacity: .7; }
.feeused { color: var(--accent); font-size: 9px; vertical-align: middle; } small.block { display: block; }
.filebtn { cursor: pointer; display: inline-flex; align-items: center; }
.feeedit .row .field { flex: 1; }
/* Visits to book card: stays inside its frame, no empty space below (Chris, 2026-10-07) */
.bookcard { align-self: start; min-width: 0; } .bookcard .cobook-cards { grid-template-columns: minmax(0, 1fr); } .bookcard .visit { min-width: 0; }
.cobook-cards .sugline { white-space: normal; } .cobook-btns { flex-wrap: wrap; } .cobook-btns > * { white-space: nowrap; }
/* Phone pop-up in colour, matching the message pop-ups: brown phone border, tinted header, colour-coded reasons (Chris, 2026-10-07) */
.callpop { --ph: var(--call); border: 2px solid var(--ph); padding: 0 14px 12px; gap: 10px; }
.callpop .call-head { margin: 0 -14px; padding: 10px 14px; background: color-mix(in srgb, var(--ph) 14%, var(--panel)); border-bottom: 1px solid color-mix(in srgb, var(--ph) 30%, var(--panel)); color: var(--fg); border-radius: 12px 12px 0 0; font-weight: 600; }
.callpop .call-head b { color: var(--ph); }
.ch-ic { width: 30px; height: 30px; border-radius: 50%; background: var(--ph); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; } .ch-ic svg { width: 16px; height: 16px; }
.callpop.cp-ringing { animation: tpbrown 1.8s ease-in-out infinite; }
.callpop.cp-live { --ph: var(--ok); } .callpop.cp-live .call-head { color: var(--ok); }
.callpop.cp-outcome { --ph: #5c6bc0; }
.callpop .mini { background: color-mix(in srgb, var(--ph) 7%, var(--panel)); border: 1px solid color-mix(in srgb, var(--ph) 22%, var(--panel)); }
.callpop .sim-note { margin-top: -2px; }
.rz-grid .rz { --c: #0e7c86; position: relative; display: flex; align-items: center; gap: 8px; background: color-mix(in srgb, var(--c) 11%, var(--panel)); border: 1px solid color-mix(in srgb, var(--c) 35%, var(--panel)); color: var(--fg); font-weight: 600; border-radius: 10px; padding: 10px 10px; }
.rz-grid .rz i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; }
.rz-grid .rz:hover { background: var(--c); border-color: var(--c); color: #fff; } .rz-grid .rz:hover i { background: #fff; }
.rz1 { --c: #1a73e8 !important; } .rz2 { --c: #7c3aed !important; } .rz3 { --c: #c2185b !important; } .rz4 { --c: #2e8b57 !important; } .rz5 { --c: #5c6bc0 !important; } .rz6 { --c: #b7791f !important; } .rz7 { --c: #0288d1 !important; }
.chip.rzchip { background: color-mix(in srgb, var(--ph) 14%, var(--panel)); color: var(--ph); font-weight: 600; }
/* Message pop-up: Open chart in the pop-up's own blue (Chris, 2026-10-07) */
.mp-chart { background: #e8f0fe; border: 1px solid #aecbfa; color: #1a73e8; font-weight: 600; } .mp-chart:hover { background: #1a73e8; border-color: #1a73e8; color: #fff; }
/* Fee review: one list, sorted by rank (how often we bill it) or code (Chris, 2026-10-07) */
.feescroll th .thsort, .thsort { background: none; border: 0; padding: 0; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; } .thsort.on { color: var(--accent); }
td.rk { white-space: nowrap; } td.rk b { display: inline-block; min-width: 22px; } td.rk small { color: var(--muted); font-size: 11px; margin-left: 4px; }
/* Fee guide ending soon (Chris, 2026-10-07) */
.kv dd .badge { margin-left: 8px; } .adminbtn .badge { margin-left: 6px; background: var(--warn); color: #fff; } .adminbtn .badge.over { background: var(--bad); }
.dcard.feedue { border: 2px solid var(--warn); } .dcard.feedue p b { color: var(--warn); }
/* Administration → Recare (Chris, 2026-10-07) */
.rc-tbl { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; } .rc-tbl span { white-space: nowrap; }
ul.plain.rc-top li { display: grid; grid-template-columns: auto auto 1fr; gap: 2px 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); } ul.plain.rc-top li small { grid-column: 1 / -1; } ul.plain.rc-top li:last-child { border-bottom: 0; } ul.plain.rc-top .link { padding: 0; font-weight: 600; }
tr.wait td { opacity: .6; } tr.wait td.warn { opacity: 1; color: var(--warn); } .camprow.st-waiting { opacity: .75; }
.rc-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
/* Recare process steps table (Chris, 2026-10-07) */
ol.rcsteps { list-style: none; margin: 6px 0 12px; padding: 0; } ol.rcsteps li { padding: 8px 0; border-bottom: 1px solid var(--line); } ol.rcsteps li:last-child { border-bottom: 0; } .rcsteps .rc-line { align-items: center; } .rcsteps .rc-n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft, #e6f2ee); color: var(--accent, #1f7a63); font-size: 12px; } .rcsteps select.xs { font: inherit; font-size: 12.5px; padding: 3px 4px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--fg); } .rcsteps .rc-when { white-space: nowrap; } .rcsteps .rc-noterow { margin-top: 6px; align-items: center; } .rcsteps .rc-note { display: block; flex: 1; min-width: 0; box-sizing: border-box; font: inherit; font-size: 12.5px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--fg); } .rcsteps .x { flex: none; }

/* recare groups A–E */
.rc-groups { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
@media (max-width: 900px) { .rc-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rc-group { text-align: left; cursor: pointer; border-top: 4px solid var(--g); gap: 4px; font: inherit; color: var(--fg); } .rc-group:hover { background: var(--panel-2, var(--panel)); box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.rc-group .gletter, .gchip { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--g); color: #fff; font-weight: 700; font-size: 15px; } .gchip { width: 24px; height: 24px; font-size: 13px; padding: 0; border: 0; }
.rc-group .gcount { font-size: 28px; font-weight: 700; line-height: 1; } .rc-group .gplan { color: var(--g); font-weight: 600; } .rc-group small, .rc-group b { display: block; }
.gA { --g: #1f8a5b; } .gB { --g: #0e7c86; } .gC { --g: #b7791f; } .gD { --g: #c2501f; } .gE { --g: #a3222b; }
.rc-seg { margin: 0 0 10px; } .rc-seg button small { font-weight: 500; opacity: .85; } .rc-seg button.on { background: var(--g, var(--accent)); }

/* recare success */
.rc-col2 { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.seg.xs button { padding: 3px 9px; font-size: 12px; }
.rcs-big { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 4px 0 6px; } .rcs-big > div { background: var(--panel-2, #f6f8f8); border-radius: 10px; padding: 10px 12px; } .rcs-big b { display: block; font-size: 26px; line-height: 1.1; } .rcs-big small { color: var(--muted); display: block; margin-top: 2px; }
.rcs-h { font-size: 13px; margin-top: 4px; }
.rcs-row { display: grid; grid-template-columns: 110px 1fr 130px; gap: 10px; align-items: center; font-size: 13px; } .rcs-l small { display: block; font-size: 11px; } .rcs-bar { height: 12px; background: var(--line); border-radius: 6px; overflow: hidden; } .rcs-bar i { display: block; height: 100%; border-radius: 6px; background: var(--accent); } .rcs-bar i.text { background: #2563eb; } .rcs-bar i.call { background: var(--call); } .rcs-bar i.voicemail { background: #7c3aed; } .rcs-bar i.letter { background: #5a7d2a; } .rcs-n { text-align: right; white-space: nowrap; }
.rcs-via { margin: 2px 0 4px; } .rcsuccess .mins.xs { width: 44px; }

.rc-booked li { display: grid; grid-template-columns: auto auto 1fr; gap: 4px 10px; align-items: center; } .rc-booked li small { grid-column: 1 / -1; } .rc-booked .rcb-when { font-size: 13px; text-align: right; white-space: nowrap; }

/* recare rule cards: text / call / mail per group */
.rc-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 14px; } @media (max-width: 900px) { .rc-rules { grid-template-columns: 1fr; } }
.rr { border-top: 4px solid var(--rr); gap: 6px; } .rr-text { --rr: #2563eb; } .rr-call { --rr: var(--call); } .rr-mail { --rr: #4b7d5b; } .rr .ccard-h { color: var(--rr); }
.rr-sent { margin: 0; line-height: 2; font-size: 14px; } .rr-sent select.xs, .rr-sent .mins.xs { font: inherit; font-size: 13px; padding: 2px 5px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--fg); } .rr-sent .mins.xs { width: 48px; } .rr-off { margin: 4px 0; } .rr-why { border-top: 1px dashed var(--line); padding-top: 6px; }
ul.plain.rr-list li { display: grid; grid-template-columns: 24px 34px 1fr; gap: 8px; align-items: center; font-size: 13px; padding: 5px 0; border-bottom: 1px solid var(--line); } ul.plain.rr-list li:last-child { border-bottom: 0; } ul.plain.rr-list li.off span { color: var(--muted); } .rr-list .gchip { cursor: pointer; border: 0; padding: 0; }
.tgl { position: relative; display: inline-block; width: 34px; height: 20px; flex: none; } .tgl input { position: absolute; opacity: 0; width: 0; height: 0; } .tgl i { position: absolute; inset: 0; background: var(--line); border-radius: 10px; transition: background .15s; } .tgl i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left .15s; } .tgl.on i { background: var(--ok, #1f8a5b); } .tgl.on i::after { left: 16px; } .tgl input:disabled + i { opacity: .6; }

/* recare group tabs */
.rc-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.rc-tab { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px; border-radius: 999px; border: 1.5px solid var(--g, var(--line)); background: var(--panel); color: var(--fg); font: inherit; font-weight: 600; cursor: pointer; transition: background .12s, color .12s; }
.rc-tab i { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--g); color: #fff; font-style: normal; font-weight: 700; font-size: 14px; }
.rc-tab span { font-weight: 600; } .rc-tab b { font-size: 15px; opacity: .85; } .rc-tab.all { padding-left: 12px; --g: var(--accent); } .rc-tab.all b { margin-left: 2px; }
.rc-tab:hover { background: color-mix(in srgb, var(--g) 12%, var(--panel)); }
.rc-tab.on { background: var(--g); color: #fff; } .rc-tab.on i { background: #fff; color: var(--g); }

/* recare patient-base strip: ring + counts, scale-proof */
.rc-base { margin-bottom: 12px; padding: 10px 14px; } .rc-stats { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 0; align-items: center; }
.rc-stat { display: flex; align-items: center; gap: 12px; padding: 6px 16px; border: 0; border-left: 1px solid var(--line); background: transparent; color: var(--fg); font: inherit; text-align: left; font-size: 14px; border-radius: 0; } .rc-stat:first-child { border-left: 0; padding-left: 0; } .rc-stats button.rc-stat { cursor: pointer; } .rc-stats button.rc-stat:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); border-radius: 8px; }
.rc-stat b { font-size: 22px; margin-right: 4px; } .rc-stat small { display: block; color: var(--muted); font-size: 12px; margin-top: 1px; }
.rc-ring { width: 56px; height: 56px; flex: none; transform: rotate(-90deg); } .rc-ring .track { fill: none; stroke: var(--line); stroke-width: 6; } .rc-ring .fill { fill: none; stroke: #2f6f8f; stroke-width: 6; stroke-linecap: round; } .rc-ring text { transform: rotate(90deg); transform-origin: 28px 28px; text-anchor: middle; font-size: 13px; font-weight: 700; fill: var(--fg); }
@media (max-width: 1100px) { .rc-stats { grid-template-columns: 1fr 1fr; } .rc-stat { border-left: 0; padding-left: 0; } }

/* recare settings card (gear) holding the algorithm and the process */
.rcset-h { display: inline-flex; align-items: center; gap: 6px; } .rcset-h svg { width: 18px; height: 18px; }
.rcset-part > .dcard { border: 0; padding: 0; box-shadow: none; background: transparent; } .rcset-part > .dcard > .ccard-h { display: none; } .rcset-part > .dcard > .row.between > .ccard-h { display: none; } .rcset-part > .dcard > .row.between { justify-content: flex-end; margin-top: -32px; }

.rcset { padding: 0; margin-bottom: 14px; gap: 0; } .rcset-head { display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px 14px; border: 0; background: transparent; color: var(--fg); font: inherit; text-align: left; cursor: pointer; border-radius: var(--r); } .rcset-head:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); } .rcset-head .chev { margin-left: auto; color: var(--muted); } .rcset-head .chev svg { width: 18px; height: 18px; }
.rcset.open .rcset-head { border-bottom: 1px solid var(--line); border-radius: var(--r) var(--r) 0 0; } .rcset-body { padding: 14px; } .rcset-part { min-width: 0; } .rcset-part > .ccard-h { display: block; margin-bottom: 6px; }

/* recare work: four lead categories on the front desk home + duty pages */
.rcwork { min-height: 0; } .rcw-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.rcw-tile { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "ic n" "ic l" "ic s"; column-gap: 12px; align-items: center; text-align: left; padding: 12px 14px; border: 1.5px solid var(--w); border-radius: 12px; background: color-mix(in srgb, var(--w) 7%, var(--panel)); color: var(--fg); font: inherit; cursor: pointer; } .rcw-tile:hover { background: color-mix(in srgb, var(--w) 14%, var(--panel)); }
.rcw-ic { grid-area: ic; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--w); color: #fff; } .rcw-ic svg { width: 20px; height: 20px; } .rcw-n { grid-area: n; font-size: 24px; line-height: 1.1; } .rcw-l { grid-area: l; font-weight: 700; } .rcw-tile small { grid-area: s; color: var(--muted); } .rcw-tile small b { color: var(--w); }
.rcw-call { --w: var(--call); } .rcw-text { --w: #2563eb; } .rcw-mail { --w: #4b7d5b; } .rcw-ask { --w: #b7791f; }
.rcw-tile.flash { animation: rcwflash 1.4s ease-in-out infinite; } @keyframes rcwflash { 0%, 100% { box-shadow: 0 0 0 0 rgba(183, 121, 31, .45); background: color-mix(in srgb, var(--w) 10%, var(--panel)); } 50% { box-shadow: 0 0 0 8px rgba(183, 121, 31, 0); background: color-mix(in srgb, var(--w) 26%, var(--panel)); } } @media (prefers-reduced-motion: reduce) { .rcw-tile.flash { animation: none; } }
.rcw-tabs .rc-tab { --g: var(--w); } .rcw-tabs .rc-tab i svg { width: 15px; height: 15px; }
.labels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 12px 0 6px; } .label { position: relative; border: 1px dashed var(--line); border-radius: 6px; padding: 12px 14px; min-height: 72px; display: flex; flex-direction: column; gap: 2px; font-size: 14px; background: var(--panel); } .label span { color: var(--fg); } .label .gchip { position: absolute; top: 10px; right: 10px; } .label .label-btns { position: absolute; bottom: 8px; right: 10px; display: flex; gap: 6px; } .label .label-btns .sm { position: static; }
tr.asknow td { background: color-mix(in srgb, #b7791f 10%, transparent); }

/* group drawer + readable score table */
.rc-group { position: relative; } .rc-group .rc-more { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--g); font-weight: 600; margin-top: 2px; } .rc-group .rc-more svg { width: 14px; height: 14px; } .rc-group.open { box-shadow: 0 0 0 2px var(--g); }
.rc-drawer { border: 2px solid var(--g); margin: 0 0 14px; gap: 10px; } .rc-drawer .gletter { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--g); color: #fff; font-weight: 700; font-size: 16px; } .rc-drawer .rc-rules { margin-bottom: 4px; } .rc-drawer .rr-sent { font-size: 14px; }
.score-tbl td.pts { white-space: nowrap; font-weight: 600; } .score-tbl td .mins.xs { width: 46px; font: inherit; font-size: 13px; padding: 2px 4px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--fg); } .score-tbl td { vertical-align: top; line-height: 1.9; } .score-ex { background: color-mix(in srgb, var(--accent) 8%, var(--panel)); border-radius: 8px; padding: 8px 12px; margin: 4px 0; }

.rc-who { flex-direction: row; align-items: center; gap: 12px; padding: 10px 14px; margin: 0 0 12px; border: 2px solid var(--g); } .rc-who .gletter { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--g); color: #fff; font-weight: 700; flex: none; } .rc-who .rr-sent { margin: 0; }
/* The formula (Chris, 2026-10-08): gear card in Administration → Recare, three pages, optimize report, adjustments upload */
.fxcard { align-items: center; justify-content: center; gap: 10px; min-height: 150px; cursor: pointer; font: inherit; color: var(--fg); text-align: center; transition: border-color .15s, box-shadow .15s; } .fxcard:hover { border-color: var(--accent); box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.fx-gear svg { width: 64px; height: 64px; color: var(--accent); stroke-width: 1.6; } .fxcard:hover .fx-gear svg { transform: rotate(30deg); transition: transform .4s; }
.page-head h1 svg { width: 24px; height: 24px; vertical-align: -4px; margin-right: 4px; color: var(--accent); }
.fx-up { display: inline-block; margin-bottom: 4px; padding: 0; }
.fx-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } @media (max-width: 900px) { .fx-three { grid-template-columns: 1fr; } }
.fx-page { text-align: left; cursor: pointer; font: inherit; color: var(--fg); min-height: 180px; transition: border-color .15s, box-shadow .15s; } .fx-page:hover { border-color: var(--accent); box-shadow: 0 4px 16px rgba(0,0,0,.08); } .fx-page b { font-size: 17px; } .fx-page .rc-more { margin-top: auto; }
.fx-ico svg { width: 34px; height: 34px; color: var(--accent); stroke-width: 1.6; }
.fx-foot { margin-top: 10px; }
.fx-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 14px 0; } @media (max-width: 900px) { .fx-two { grid-template-columns: 1fr; } }
main > .dcard + .dcard, main > .fx-two + .dcard { margin-top: 14px; }
.fx-stats { display: flex; gap: 10px; flex-wrap: wrap; } .fx-stats > div { flex: 1 1 140px; background: color-mix(in srgb, var(--accent) 8%, var(--panel)); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; } .fx-stats b { font-size: 24px; } .fx-stats small { color: var(--muted); }
.fx-tbl td { vertical-align: top; } .fx-tbl td:first-child { white-space: nowrap; }
.fx-have.ok { background: #e3f3ea; color: #1f6b3a; } .fx-have.warn { background: #fdf0d8; color: #8a5a00; } .fx-have.new { background: #e6effa; color: #1f4f8a; }
.fx-sec { border: 1px solid var(--line); border-radius: 10px; margin-top: 8px; overflow: hidden; } .fx-sec-h { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; background: transparent; color: var(--fg); font: inherit; text-align: left; cursor: pointer; } .fx-sec-h:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); } .fx-sec-h .chev { margin-left: auto; color: var(--muted); } .fx-sec-h .chev svg { width: 16px; height: 16px; } .fx-sec.open .fx-sec-h { border-bottom: 1px solid var(--line); } .fx-sec .tbl { margin: 0; }
.fx-gaps ol { margin: 0; padding-left: 20px; } .fx-gaps li { margin: 4px 0; }
.fx-factor p { margin: 0; } .fx-why { color: var(--accent); }
ul.plain.fx-list li { display: block; padding: 6px 0; border-bottom: 1px solid var(--line); } ul.plain.fx-list li:last-child { border-bottom: 0; }
.fx-eq { font-size: 18px; line-height: 2.1; padding: 12px 14px; background: color-mix(in srgb, var(--accent) 6%, var(--panel)); border-radius: 10px; } .fx-eq sub { font-size: 11px; }
.fx-term { display: inline-block; padding: 0 8px; border-radius: 8px; font-weight: 600; line-height: 1.6; } .fx-term.p { background: #e3f3ea; color: #1f6b3a; } .fx-term.n { background: #fbe4e4; color: #a3222b; }
.score-tbl td .mins.xs.dirty { border-color: #c98a00; background: #fff6df; font-weight: 700; }
.warn-t { color: #a3222b; }
ul.plain.fx-ver li { padding: 8px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; } ul.plain.fx-ver li:last-child { border-bottom: 0; } .fx-ver .link.sm { align-self: flex-start; padding: 0; }
.fx-act .row { margin-top: 4px; }
.pdfpage h3 { margin: 18px 0 4px; font-size: 14px; } .pdfpage ol.fine { padding-left: 18px; } .pdfpage ol.fine li { margin: 3px 0; }
.fx-json { white-space: pre-wrap; word-break: break-word; font-size: 10px; line-height: 1.35; color: #444; background: #f6f6f6; border-radius: 6px; padding: 8px; max-height: 260px; overflow: auto; } body.printing-pdf .fx-json { max-height: none; overflow: visible; }
.fx-paste { width: 100%; font: inherit; font-size: 13px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--fg); resize: vertical; }
.filebtn { display: inline-block; padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; background: var(--panel); } .filebtn:hover { border-color: var(--accent); }

/* Recare letter with personal booking code + QR; code field on the booking page (Chris, 2026-10-08) */
.letter { background: #fff; color: #111; border: 1px solid var(--line); border-radius: 10px; padding: 26px 30px; font-size: 14px; line-height: 1.5; } .letter p { margin: 0 0 12px; } .letter-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 2px solid #222; padding-bottom: 8px; margin-bottom: 14px; flex-wrap: wrap; } .letter-head span { font-size: 12px; color: #555; }
.letter-book { display: flex; gap: 18px; align-items: center; background: #f1f6f2; border-radius: 10px; padding: 14px 16px; margin: 14px 0; } .letter-book p { margin: 4px 0 8px; } .letter-book small { color: #555; display: block; }
.letter-code { display: inline-block; font-size: 26px; font-weight: 700; letter-spacing: .18em; padding: 4px 14px; border: 2px dashed #1f6b3a; border-radius: 8px; color: #1f6b3a; background: #fff; margin-bottom: 6px; }
.qr { width: 110px; height: 110px; flex: 0 0 110px; fill: #111; background: #fff; padding: 6px; border-radius: 6px; }
.pcode { display: flex; gap: 8px; align-items: flex-end; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); } .pcode label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; flex: 1; } .pcode input { font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; text-transform: uppercase; letter-spacing: .12em; } .pcode-ok { color: #1f6b3a; font-weight: 600; margin: 8px 0 0; }

/* Moving appointments (Chris, 2026-10-08): draggable blocks, the Moving bar on full grids, the small drop box on the desk side schedule */
.appt.movable { cursor: grab; } .appt.movable:active { cursor: grabbing; } .dblock[draggable="true"] { cursor: grab; }
.movebar { border: 2px dashed color-mix(in srgb, var(--accent) 55%, var(--line)); border-radius: 12px; padding: 8px 14px; margin: 10px 0; background: color-mix(in srgb, var(--accent) 4%, var(--panel)); transition: background .12s, border-color .12s; }
.movebar.over { background: color-mix(in srgb, var(--accent) 14%, var(--panel)); border-color: var(--accent); border-style: solid; }
.movebar-h { display: inline-flex; align-items: center; gap: 6px; } .movebar-h svg { width: 16px; height: 16px; color: var(--accent); }
.moverow { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.movecard { background: var(--panel); border: 1px solid var(--line); border: 2px solid var(--accent); border-radius: 8px; padding: 6px 10px; min-width: 200px; max-width: 300px; cursor: grab; display: flex; flex-direction: column; gap: 2px; font-size: 13px; } .movecard:active { cursor: grabbing; } .movecard small { color: var(--muted); } .movecard .link.sm { align-self: flex-start; padding: 0; }
.movecard.c-purple { border-color: var(--purple-t); } .movecard.c-pink { border-color: var(--pink-t); } .movecard.c-blue { border-color: var(--blue-t); } .movecard.c-sky { border-color: var(--sky-t); } .movecard.c-green { border-color: var(--green-t); } .movecard.c-amber { border-color: var(--amber-t); } .movecard.c-teal { border-color: var(--teal-t); } .movecard.c-red { border-color: var(--red-t); } .movecard.c-grey { border-color: var(--grey-t); }
.movebar.compact { margin: 6px 8px 0; padding: 6px 10px; font-size: 12.5px; } .movebar.compact .movecard { min-width: 0; width: 100%; max-width: none; padding: 4px 8px; font-size: 12px; } .movebar.compact .moverow { gap: 6px; margin-top: 6px; }
.ds-grid.over { background: color-mix(in srgb, var(--accent) 8%, transparent); }
/* Undo inside a moved block (Chris, 2026-10-08): sits where the status word goes, fades out and is gone at 60 s */
.undo-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px 1px 5px; border-radius: 999px; background: #fff; color: var(--accent); border: 1px solid var(--accent); font-size: 10.5px; font-weight: 700; text-transform: none; letter-spacing: 0; line-height: 1.4; cursor: pointer; white-space: nowrap; animation: undofade linear forwards; animation-duration: 60s; }
.undo-btn .ic { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.undo-btn:hover { background: var(--accent); color: #fff; }
.dblock .dstatus .undo-btn { font-size: 11px; }
@keyframes undofade { 0%, 84% { opacity: 1; } 100% { opacity: 0; } }
/* The call window (Chris, 2026-10-08): one patient at a time, the intent on the left, booking and history on the right */
.modal.callwork { width: min(1180px, 96vw); }
.cw-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 12px; margin-top: 10px; align-items: start; } .cw-main, .cw-side { display: grid; gap: 12px; } .cw-grid .hcard { min-height: 0; }
.cw-why { border-color: var(--accent); } .cw-lines { display: grid; gap: 8px; margin-top: 6px; } ul.plain.cw-lines li { display: block; font-size: 15px; line-height: 1.45; padding: 0; }
.cw-outcomes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 6px; }
.cw-o { padding: 12px 10px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--card); font-weight: 600; font-size: 14px; cursor: pointer; }
.cw-o:hover { border-color: var(--accent); } .cw-o.ok { border-color: var(--ok); color: var(--ok); } .cw-o.warn { border-color: #b8860b; color: #8a6400; } .cw-o.bad { border-color: var(--bad); color: var(--bad); }
.cw-done { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0; } .cw-stat { border: 1.5px solid var(--line); border-radius: 10px; padding: 14px; display: grid; gap: 2px; text-align: center; } .cw-stat b { font-size: 30px; } .cw-stat.ok { border-color: var(--ok); } .cw-stat.ok b { color: var(--ok); }
.callload .cl-big { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 8px; } .callload .cl-big b { font-size: 34px; color: var(--accent); } .cl-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; } .cl-tbl td { padding: 4px 0; border-bottom: 1px solid var(--line); } .cl-tbl td:last-child { text-align: right; font-variant-numeric: tabular-nums; width: 90px; } .cl-tbl tr.tot td { font-weight: 700; border-bottom: 0; } .cl-tbl .num { width: 64px; text-align: right; }
@media (max-width: 900px) { .cw-grid, .cw-outcomes, .cw-done { grid-template-columns: 1fr; } }
/* Treatment protocol (Chris, 2026-10-08): groups N R O L W, the holes page, the waiting pop-up */
.trgN { --g: #1f8a5b; } .trgR { --g: #0e7c86; } .trgO { --g: #b7791f; } .trgL { --g: #a3222b; } .trgW { --g: #6d4fc2; } /* not "tg…": in quirks mode .tgl (the toggle) would match .tgL */
.rcw-wait { --w: #6d4fc2; } .trwork { border-color: #6d4fc2; }
.rc-stat.warn b { color: var(--bad); }
.holes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .hole { border: 2px solid #6d4fc2; gap: 4px; } .hole.due { border-color: #b7791f; } .hole.stuck { border-color: var(--bad); animation: fdflash 1.6s ease-in-out infinite; }
.cw-o.wait { border-color: #6d4fc2; color: #6d4fc2; }
.modal.waitpop { width: min(560px, 96vw); }
@media (max-width: 900px) { .holes { grid-template-columns: 1fr; } }
.hole ul.plain.reasons li, .cw-side ul.plain.reasons li, .callload ~ .dcard ul.plain.reasons li, .trholes li { display: block; }
/* Outreach dial (Chris, 2026-10-08): one card, spin, the next person pops up */
.outreach { border-color: #0e7c86; } .ow-grid { display: grid; grid-template-columns: 300px 1fr; gap: 18px; align-items: center; margin-top: 8px; }
.ow-wheel { position: relative; background: none; border: 0; padding: 10px; cursor: pointer; width: 300px; height: 300px; } .ow-wheel:disabled { cursor: default; opacity: .6; }
.ow-wheel .wheel { width: 100%; height: 100%; transition: transform 2.6s cubic-bezier(.15,.75,.1,1); filter: drop-shadow(0 3px 8px rgba(0,0,0,.18)); }
.ow-wheel:hover .wheel { filter: drop-shadow(0 5px 14px rgba(0,0,0,.25)); }
.wheel .wl.sm { font-size: 9px; } .wheel .wl.sm .wn { font-size: 10px; } .wheel .wl { fill: #fff; font-size: 10.5px; font-weight: 700; text-anchor: middle; paint-order: stroke; stroke: rgba(0,0,0,.25); stroke-width: 2px; } .wheel .wn { font-size: 13px; }
.wheel .hub { fill: #fff; stroke: #0e7c86; stroke-width: 3; } .wheel .hubt { fill: #0e7c86; font-size: 12px; font-weight: 800; text-anchor: middle; letter-spacing: .08em; } .wheel .hubt.num { font-size: 22px; letter-spacing: 0; } .wheel .hubs { fill: #0e7c86; font-size: 8.5px; font-weight: 700; text-anchor: middle; letter-spacing: .06em; text-transform: uppercase; } .ow-hint { margin: 0; }
.ow-pointer { position: absolute; top: 2px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 22px solid #0e7c86; z-index: 2; filter: drop-shadow(0 2px 2px rgba(0,0,0,.3)); }
.outreach.spinning .ow-pointer { animation: owwobble .25s ease-in-out infinite alternate; } @keyframes owwobble { from { transform: translateX(-50%) rotate(-8deg); } to { transform: translateX(-50%) rotate(8deg); } }
.ow-side { display: grid; gap: 12px; } .ow-tally { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .ow-tally > div { border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 12px; display: grid; } .ow-tally b { font-size: 26px; line-height: 1.1; } .ow-tally span { font-size: 12.5px; color: var(--muted); } .ow-tally .ok { border-color: var(--ok); } .ow-tally .ok b { color: var(--ok); }
.ow-left { display: grid; justify-items: center; gap: 4px; } .ow-legend { display: flex; align-items: center; gap: 6px; margin: 0; } .ow-legend i { width: 10px; height: 10px; border-radius: 50%; background: var(--w); display: inline-block; margin-left: 8px; } .ow-legend i:first-child { margin-left: 0; }
.ow-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0; } .ow-who { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "i n" "i s"; column-gap: 8px; align-items: center; padding: 6px 10px; border: 1.5px solid var(--line); border: 2px solid var(--w); border-radius: 10px; background: var(--card); font: inherit; color: var(--fg); cursor: pointer; text-align: left; width: 100%; } .ow-who i { grid-area: i; width: 10px; height: 10px; border-radius: 50%; background: var(--w); } .ow-who b { grid-area: n; font-size: 14.5px; } .ow-who span { grid-area: s; font-size: 12px; color: var(--muted); } .ow-who:hover { background: var(--panel2, var(--panel)); }
.ow-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.modal.owpop { width: min(760px, 96vw); } .ow-text { font-size: 16px; line-height: 1.5; background: var(--panel2, var(--panel)); border-radius: 10px; padding: 10px 12px; } .ow-done { text-align: center; font-size: 22px; padding: 24px 0 6px; color: var(--ok); } .holes.one { grid-template-columns: 1fr; margin-top: 8px; }
@media (max-width: 1100px) { .ow-grid { grid-template-columns: 1fr; justify-items: center; } .ow-list { grid-template-columns: 1fr; } }
/* the Here ask (Chris, 2026-10-08) */
.textpop.askpop { border-color: #0e7c86; animation: none; } .textpop.askpop .sp-head svg { color: #0e7c86; } .askwhy li { display: block; font-size: 13.5px; padding: 3px 0; }

/* Confirmation decks (Chris, 2026-10-08) */
.decks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 8px 0 10px; } .deckcol { display: grid; justify-items: center; gap: 8px; }
.deck { position: relative; width: 118px; height: 150px; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: var(--fg); } .deck:disabled { cursor: default; }
.deck-card { position: absolute; inset: 0; background: #fff; border: 1.5px solid #c9ced6; border-radius: 12px; box-shadow: 0 2px 6px rgba(0,0,0,.12); } .deck-card.c2 { transform: translate(4px, -4px) rotate(2deg); } .deck-card.c3 { transform: translate(8px, -8px) rotate(4deg); }
.deck-card.c1 { display: grid; grid-template-rows: auto 1fr auto; padding: 8px 10px; text-align: left; border-color: #00acc1; } .deck-day { font-size: 11.5px; line-height: 1.25; color: var(--muted); } .deck-n { font-size: 44px; line-height: 1; align-self: center; justify-self: center; color: #00838f; } .deck-foot { font-size: 11.5px; color: var(--muted); text-align: right; }
.deck.alldone .deck-card.c1 { border-color: var(--ok); } .deck.alldone .deck-n { color: var(--ok); font-size: 30px; }
.deck-card.faced .deck-n { font-size: 30px; align-self: start; } .deck-card.faced .deck-foot { visibility: hidden; } .deck-face { position: absolute; left: 6px; right: 6px; bottom: 8px; background: #e0f7fa; border: 1px solid #00acc1; border-radius: 8px; padding: 4px 6px; font-size: 12.5px; font-weight: 600; line-height: 1.2; text-align: center; display: grid; } .deck-face small { font-weight: 500; color: var(--muted); }
.deck:hover:not(:disabled) .deck-card.c1 { transform: translateY(-3px); box-shadow: 0 6px 14px rgba(0,0,0,.18); }
.deck.shuffling .deck-card.c1 { animation: deckflip .22s ease-in-out 5 alternate; } .deck.shuffling .deck-card.c2 { animation: deckslide .3s ease-in-out 4 alternate; } .deck.shuffling .deck-card.c3 { animation: deckslide .36s ease-in-out 3 alternate-reverse; } .deck.shuffling .deck-face { display: none; }
@keyframes deckflip { from { transform: translateX(-10px) rotate(-6deg); } to { transform: translateX(10px) rotate(6deg); } } @keyframes deckslide { from { transform: translate(-18px, 2px) rotate(-8deg); } to { transform: translate(18px, -10px) rotate(8deg); } }
.deck-under { display: grid; gap: 4px; width: 118px; text-align: center; } .deck-under .confbar { width: 100%; }
.modal.deckpop { width: min(900px, 96vw); } .deck-left { display: grid; gap: 10px; } .deck-grid { display: grid; grid-template-columns: 1fr 300px; gap: 14px; align-items: start; margin-top: 8px; } .deckpop .op-sched { max-height: none; } .deckpop .op-schedwrap { border-top: 0; padding-top: 0; } .deck-when { font-size: 16px; line-height: 1.45; margin: 4px 0 10px; }
.mini-cal { border: 1.5px solid #00acc1; border-radius: 12px; padding: 8px 10px; background: var(--card); width: 230px; } .mini-cal > b { display: block; text-align: center; margin-bottom: 4px; font-size: 13px; } .mc-head, .mc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; } .mc-head i { font-style: normal; font-size: 11px; color: var(--muted); } .mc-grid i { font-style: normal; font-size: 11.5px; line-height: 21px; border-radius: 6px; } .mc-grid i.closed { color: #b0b7c0; } .mc-grid i.today { box-shadow: inset 0 0 0 1.5px var(--line); } .mc-grid i.pick { background: #00838f; color: #fff; font-weight: 700; }
@media (max-width: 760px) { .deck-grid { grid-template-columns: 1fr; } }
.fdh-queue { width: auto !important; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; border: 2px dashed color-mix(in srgb, var(--accent) 55%, var(--line)) !important; border-radius: 10px; padding: 6px 12px !important; background: color-mix(in srgb, var(--accent) 4%, var(--panel)) !important; } .fdh-queue svg { width: 16px; height: 16px; color: var(--accent); } .fdh-queue span { display: grid; line-height: 1.2; } .fdh-queue small { color: var(--muted); font-size: 11.5px; } .fdh-queue:hover { border-style: solid !important; background: color-mix(in srgb, var(--accent) 12%, var(--panel)) !important; } .fdh-queue.in { opacity: .6; cursor: default; }
.movecard.queued { border-color: var(--accent); border-style: dashed; cursor: grab; } .movecard.queued.armed { border-style: solid; background: color-mix(in srgb, var(--accent) 12%, var(--panel)); }
/* The work task card is the phone (Chris, 2026-10-08) */
.cw-reach.live { background: color-mix(in srgb, var(--ok) 10%, var(--panel)); border-color: var(--ok); } .cw-call-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--ok); font-size: 16px; } .cw-call-head .timer { font-variant-numeric: tabular-nums; font-weight: 700; } .cw-reach.live .sim-note { text-align: right; }
.cw-reach.cw-endedbox { border-color: var(--accent); } .cw-reach.cw-loggedbox { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, var(--panel)); } .cw-logged { margin: 4px 0 0; font-size: 17px; }
.cw-next { display: inline-flex; align-items: center; gap: 12px; padding: 14px 22px; border-radius: 14px; border: 0; background: var(--accent); color: #fff; font: inherit; font-weight: 700; font-size: 17px; cursor: pointer; } .cw-next .arrow { font-size: 32px; line-height: 1; } .cw-next:hover { filter: brightness(1.08); }
.cw-hist { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); } .cw-why ul.plain.reasons li { display: block; font-size: 13.5px; padding-left: 14px; }
.callwork .hcard.history .cleanings.vtl { margin-top: 6px; }
/* Outreach card layout (Chris, 2026-10-08): wheel, today's results in a column, big Mail and Waiting on cards on the right */
.ow-grid.v2 { grid-template-columns: 300px minmax(0, .7fr) minmax(0, 1.3fr); gap: 20px; align-items: stretch; }
.ow-results { display: grid; align-content: center; gap: 10px; } .ow-results .ccard-h { margin-bottom: 2px; } .ow-res { display: flex; align-items: baseline; gap: 10px; border-bottom: 1px dashed var(--line); padding-bottom: 8px; } .ow-res:last-child { border-bottom: 0; } .ow-res b { font-size: 34px; line-height: 1; min-width: 46px; } .ow-res span { color: var(--muted); font-size: 14px; } .ow-res.ok b { color: var(--ok); }
.ow-big { display: grid; grid-template-rows: 1fr 1fr; gap: 12px; } .ow-big .rcw-tile { padding: 18px 22px; column-gap: 18px; min-height: 120px; } .ow-big .rcw-ic { width: 60px; height: 60px; } .ow-big .rcw-ic svg { width: 28px; height: 28px; } .ow-big .rcw-n { font-size: 38px; } .ow-big .rcw-l { font-size: 18px; } .ow-big .rcw-tile small { font-size: 14px; }
@media (max-width: 1100px) { .ow-grid.v2 { grid-template-columns: 1fr; justify-items: stretch; } .ow-grid.v2 .ow-left { justify-self: center; } }
/* Recare puzzle beside the treatment wheel (Chris, 2026-10-08) */
.ow-grid.v3 { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) 118px; gap: 20px; align-items: start; margin-top: 8px; }
.ow-gh { display: block; text-align: center; margin-bottom: 2px; } .ow-left { justify-items: center; } .ow-left .ow-wheel { width: min(100%, 420px); height: auto; aspect-ratio: 1; }
.ow-right { display: grid; gap: 12px; } .ow-results.row3 { grid-template-columns: repeat(3, 1fr); display: grid; gap: 8px; } .ow-results.row3 .ow-res { flex-direction: column; align-items: flex-start; gap: 2px; border: 1.5px solid var(--line); border-radius: 10px; padding: 8px 10px; } .ow-results.row3 .ow-res b { font-size: 26px; min-width: 0; } .ow-results.row3 .ow-res span { font-size: 12.5px; } .ow-results.row3 .ow-res.ok { border-color: var(--ok); }
.ow-right { align-content: center; align-self: center; } .ow-right .ow-big { grid-template-rows: none; gap: 10px; } .ow-right .ow-big .rcw-tile { min-height: 0; padding: 10px 12px; column-gap: 10px; } .ow-right .ow-big .rcw-ic { width: 36px; height: 36px; } .ow-right .ow-big .rcw-ic svg { width: 18px; height: 18px; } .ow-right .ow-big .rcw-n { font-size: 22px; } .ow-right .ow-big .rcw-l { font-size: 14.5px; } .ow-right .ow-big .rcw-tile small { font-size: 12.5px; }
.pz-wrap { display: grid; gap: 6px; } .pz-wrap > .row .ow-gh { text-align: left; }
.pz-board { position: relative; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; box-shadow: inset 0 0 0 2px rgba(0,0,0,.08), 0 3px 10px rgba(0,0,0,.12); background: #222; }
.pz-svg { display: block; width: 100%; height: 100%; }
.pz-piece { cursor: pointer; transition: transform .18s; } .pz-piece path { stroke: #f3e6d0; stroke-width: 1.6; filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); } .pz-piece:hover path { fill: #b47a45; } .pz-piece:hover { transform: translateY(-2px); }
.pz-piece text { fill: #fff8ec; font-weight: 700; text-anchor: middle; pointer-events: none; paint-order: stroke; stroke: rgba(0,0,0,.25); stroke-width: 2px; } .pz-piece text.pz-sub { font-weight: 600; opacity: .85; }
.pz-piece.loose { cursor: default; opacity: .75; } .pz-piece.loose path { fill: #6b4a2b; stroke-dasharray: 4 3; }
.pz-piece.flyoff { pointer-events: none; animation: pzfly 1.1s cubic-bezier(.5,-0.3,.7,1) forwards; } @keyframes pzfly { 0% { transform: translate(0,0) rotate(0); opacity: 1; } 25% { transform: translate(0,-14px) rotate(calc(var(--rot) * .3)); opacity: 1; } 100% { transform: translate(var(--dx), 340px) rotate(var(--rot)); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pz-piece.flyoff { animation: none; opacity: 0; } }
.pz-done { position: absolute; left: 12px; right: 12px; bottom: 12px; background: rgba(15,20,30,.62); color: #fff; border-radius: 12px; padding: 10px 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; backdrop-filter: blur(3px); } .pz-done b { font-size: 16px; } .pz-done span { opacity: .85; font-size: 13px; } .pz-done button { margin-left: auto; background: #fff; color: #1d2a3a; border: 0; font-weight: 600; }
@media (max-width: 1000px) { .ow-grid.v3 { grid-template-columns: 1fr; } .ow-side2 { grid-auto-flow: column; } }
@media (max-width: 760px) { .ow-grid.v3 { grid-template-columns: 1fr; } .ow-grid.v3 .ow-left { justify-self: center; } }
.pz-board { min-height: 0; } .pz-wrap .pz-board { max-height: 640px; }
.ow-chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; } .ow-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1.5px solid var(--w); border-radius: 999px; background: color-mix(in srgb, var(--w) 8%, var(--panel)); color: var(--fg); font: inherit; font-size: 13px; cursor: pointer; } .ow-chip svg { width: 14px; height: 14px; color: var(--w); } .ow-chip b { font-size: 14px; } .ow-chip i { font-style: normal; font-size: 11px; font-weight: 700; color: #fff; background: var(--w); border-radius: 999px; padding: 0 6px; } .ow-chip:hover { background: color-mix(in srgb, var(--w) 16%, var(--panel)); } .ow-chip.flash { animation: rcwflash 1.4s ease-in-out infinite; }
/* Narrow Mail / Waiting on cards and the finished wheel (Chris, 2026-10-08) */
.ow-side2 { display: grid; gap: 12px; align-self: center; }
.ow-narrow { display: grid; justify-items: center; gap: 4px; padding: 14px 8px; border: 1.5px solid var(--w); border-radius: 12px; background: color-mix(in srgb, var(--w) 7%, var(--panel)); color: var(--fg); font: inherit; cursor: pointer; text-align: center; } .ow-narrow:hover { background: color-mix(in srgb, var(--w) 14%, var(--panel)); } .ow-narrow .rcw-ic { width: 34px; height: 34px; } .ow-narrow .rcw-ic svg { width: 17px; height: 17px; } .ow-narrow b { font-size: 24px; line-height: 1; } .ow-narrow span:not(.rcw-ic) { font-weight: 700; font-size: 13.5px; } .ow-narrow small { color: var(--muted); font-size: 11.5px; } .ow-narrow.flash { animation: rcwflash 1.4s ease-in-out infinite; } .ow-narrow > * { grid-area: auto; }
.ow-pet { position: absolute; inset: 10px; border-radius: 50%; overflow: hidden; box-shadow: 0 3px 10px rgba(0,0,0,.18); } .ow-pet svg { width: 100%; height: 100%; display: block; }
.ow-wheel.finishing .wheel { animation: wheelfade 1.8s ease-in forwards; } .ow-wheel.finishing .ow-pointer { animation: wheelfade 1.8s ease-in forwards; } .ow-wheel.finished .wheel, .ow-wheel.finished .ow-pointer { opacity: 0; }
.ow-wheel.finishing .ow-pet { animation: petin 1.8s ease-out; } @keyframes wheelfade { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.06); } } @keyframes petin { from { transform: scale(.9); filter: blur(6px); } to { transform: scale(1); filter: none; } }
.ow-wheel.finished, .ow-wheel.finishing { cursor: default; opacity: 1 !important; }
@media (prefers-reduced-motion: reduce) { .ow-wheel.finishing .wheel, .ow-wheel.finishing .ow-pointer { animation: none; opacity: 0; } .ow-wheel.finishing .ow-pet { animation: none; } }
/* Outreach v4 (Chris, 2026-10-08): puzzle and wheel share the whole width, each in a frame; Mail and Waiting on moved to the top row */
.ow-grid.v4 { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr); gap: 28px; align-items: start; margin-top: 8px; --frame: #4f2f9e; --frame-w: #2a6fd6; }
.ow-grid.v4 .pz-wrap .pz-board { max-height: none; padding: 10px; border-radius: 20px; background: var(--frame); box-shadow: 0 6px 16px rgba(0,0,0,.18); } .ow-grid.v4 .pz-board .pz-svg { display: block; width: 100%; height: 100%; border-radius: 11px; background: #222; }
.ow-grid.v4 .ow-left { width: 100%; } .ow-grid.v4 .ow-left .ow-wheel { width: 100%; max-width: none; padding: 10px; margin-top: 16px; border: 0; border-radius: 50%; background: var(--frame-w); box-shadow: 0 6px 16px rgba(0,0,0,.18); opacity: 1; }
.ow-grid.v4 .ow-wheel .wheel { filter: none; } .ow-grid.v4 .ow-wheel:disabled:not(.finished):not(.finishing) .wheel { opacity: .6; }
.ow-grid.v4 .ow-pointer { top: -12px; border-left-width: 14px; border-right-width: 14px; border-top-width: 26px; border-top-color: #1f2a44; }
.ow-grid.v4 .ow-pet { inset: 10px; box-shadow: none; }
.ow-grid.v4 .wheel .hub { stroke: #1f2a44; } .ow-grid.v4 .wheel .hubt, .ow-grid.v4 .wheel .hubs { fill: #1f2a44; }
.ow-grid.v4 .pz-piece path { stroke: #fff; stroke-width: 2; } .ow-grid.v4 .pz-piece:hover path { filter: brightness(1.15) drop-shadow(0 1px 1px rgba(0,0,0,.35)); } .ow-grid.v4 .pz-piece.loose path { fill: #9aa3ab; }
.ow-grid.v4 .pz-piece text { stroke: rgba(0,0,0,.35); }
@media (max-width: 900px) { .ow-grid.v4 { grid-template-columns: 1fr; } .ow-grid.v4 .ow-left .ow-wheel { width: min(100%, 460px); } }
.fdminis { grid-template-columns: repeat(6, minmax(0, 1fr)); } @media (max-width: 900px) { .fdminis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fdmini.mailmini { border-color: #4b7d5b; } .fdmini.waitmini { border-color: #6d4fc2; } .fdmini.waitmini.flash { animation: rcwflash 1.4s ease-in-out infinite; --w: #6d4fc2; }
/* Play again rounds (Chris, 2026-10-08) */
.pz-round { position: absolute; top: 10px; right: 12px; z-index: 3; pointer-events: none; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: #1f2a44; color: #ffd23f; font-size: 58px; font-weight: 800; line-height: 1; border: 4px solid #ffd36b; box-shadow: 0 4px 12px rgba(0,0,0,.35); }
.pz-again { justify-self: center; font-size: 16px; padding: 10px 26px; border-radius: 999px; }
/* Puzzle purple frame, wheel blue rim, colour legends, wheel round badge (Chris, 2026-10-08) */
.ow-grid.v4 .ow-left { position: relative; } .wh-round { top: 34px; right: 0; }
.ow-hint .ow-legend { display: flex; justify-content: center; flex-wrap: wrap; margin-top: 4px; } .pz-wrap .ow-hint .ow-legend { justify-content: flex-start; }
.ow-hint .ow-legend i { width: 11px; height: 11px; border-radius: 3px; }
.pz-again:disabled { opacity: .45; cursor: default; }
/* Confirmation card is the phone (Chris, 2026-10-08): the whole card turns green on the call */
.deck-appt.oncall { background: color-mix(in srgb, var(--ok) 10%, var(--panel)); border-color: var(--ok); } .deck-appt .cw-reach.deck-call { background: none; border: 0; padding: 0; }
.deck-appt .cw-reach.cw-loggedbox, .deck-appt .cw-reach.cw-endedbox { margin-top: 4px; }
/* Waiting on: a notification badge instead of pulsing (Chris, 2026-10-08) */
.fdmini .ccard-h { position: relative; display: flex; align-items: center; gap: 6px; } .fm-badge { font-style: normal; background: var(--bad); color: #fff; font-size: 12px; font-weight: 700; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: inline-grid; place-items: center; letter-spacing: 0; margin-left: auto; }
/* Call window: treatment quadrant and family needs (Chris, 2026-10-08) */
.cw-plan .cw-quad { margin: 6px 0 8px; } .cw-plan .cw-quad > * { max-width: 100%; }
.cw-fam .famtree.compact { margin-top: 6px; } .rchip.trneed { background: var(--blue); color: var(--blue-t); } .rchip.trneed i { background: var(--cat-resto); }
.cw-plan .quad { min-height: 64px; padding: 6px 2px; }
.cw-applist { display: grid; gap: 6px; margin-top: 6px; } .cw-applist li { display: grid; grid-template-columns: 120px 1fr auto; gap: 10px; align-items: baseline; padding: 6px 10px; border: 1px solid var(--line); border: 2px solid var(--line); border-radius: 8px; } .cw-applist li.me { border-color: var(--accent); } .cw-applist small { color: var(--muted); }
/* Call window rebuilt (Chris, 2026-10-08): facts strip instead of "Why we're calling", the phone is a bar along the bottom, Call bottom right in phone green */
.cw-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; margin-top: 8px; } .cw-fact { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--line); border: 2px solid var(--line); border-radius: 10px; background: var(--panel); min-width: 0; } .cw-fact small { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; } .cw-fact b { font-size: 14px; line-height: 1.25; overflow-wrap: anywhere; }
.cw-fact.ok { border-color: var(--ok); } .cw-fact.warn { border-color: var(--warn); } .cw-fact.warn b { color: var(--warn); } .cw-fact.bad { border-color: var(--bad); } .cw-fact.bad b { color: var(--bad); }
.cw-foot { position: sticky; bottom: -18px; z-index: 3; margin: 0 -18px -18px; padding: 12px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--panel); border-top: 2px solid var(--line); box-shadow: 0 -6px 16px rgba(0,0,0,.08); }
.cw-foot > .row:last-child, .cw-foot > .cw-next { margin-left: auto; }
.cw-call { background: #34c759; border-color: #34c759; color: #fff; font-size: 18px; font-weight: 700; padding: 14px 26px; border-radius: 999px; box-shadow: 0 4px 12px rgba(42,168,74,.35); } .cw-call:hover { background: #2fb350; border-color: #2fb350; }
.cw-foot.live { background: color-mix(in srgb, var(--call) 12%, var(--panel)); border-top-color: var(--call); } .cw-foot.live .cw-call-head { font-size: 18px; color: #1f8f3c; } .cw-foot .sim-note { position: static; margin-left: 6px; font-size: 10.5px; }
.cw-foot .cw-end { border-radius: 999px; padding: 12px 22px; font-weight: 700; }
.cw-foot.cw-endedbox { display: grid; gap: 8px; border-top-color: var(--accent); } .cw-foot.cw-endedbox .cw-outcomes { margin-top: 0; }
.cw-foot.cw-loggedbox { border-top-color: var(--accent); }
.cw-pick { background: var(--blue-t); border-color: var(--blue-t); color: #fff; width: 100%; font-weight: 700; } .cw-pick:hover { filter: brightness(1.08); }
.callwork .cw-outcomes { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.callwork .cw-hist ul.plain.reasons { margin-top: 6px; } .callwork .cw-hist ul.plain.reasons li { display: block; font-size: 14px; padding: 4px 0 4px 14px; }
/* Quieter games, in the calendar's manner (Chris, 2026-10-08): thin lines, soft tints, no thick frames */
.ow-grid.v4 .pz-wrap .pz-board { padding: 6px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 2px 8px rgba(0,0,0,.06); } .ow-grid.v4 .pz-board .pz-svg { border-radius: 10px; }
.ow-grid.v4 .ow-left .ow-wheel { padding: 6px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 2px 8px rgba(0,0,0,.06); } .ow-grid.v4 .ow-pet { inset: 6px; }
.ow-grid.v4 .ow-pointer { top: -6px; border-left-width: 9px; border-right-width: 9px; border-top-width: 16px; border-top-color: var(--fg); filter: none; }
.ow-grid.v4 .wheel .wedge path { fill: color-mix(in srgb, var(--c) 16%, var(--panel)); stroke: var(--panel); stroke-width: 1.4; } .ow-grid.v4 .wheel .wedge text { fill: var(--c); font-weight: 600; paint-order: normal; stroke: none; } .ow-grid.v4 .wheel .wedge .wn { font-weight: 500; }
.ow-grid.v4 .wheel .hub { fill: var(--panel); stroke: var(--line); stroke-width: 1.5; } .ow-grid.v4 .wheel .hubt { fill: var(--fg); font-weight: 700; } .ow-grid.v4 .wheel .hubs { fill: var(--muted); }
.ow-grid.v4 .pz-piece path { stroke: var(--panel); stroke-width: 1.4; filter: none; } .ow-grid.v4 .pz-piece:hover path { filter: brightness(.96); }
.ow-grid.v4 .pz-piece.k-pink path { fill: var(--pink); } .ow-grid.v4 .pz-piece.k-pink.alt path { fill: color-mix(in srgb, var(--pink) 88%, var(--pink-t)); } .ow-grid.v4 .pz-piece.k-pink text { fill: var(--pink-t); }
.ow-grid.v4 .pz-piece.k-purple path { fill: var(--purple); } .ow-grid.v4 .pz-piece.k-purple.alt path { fill: color-mix(in srgb, var(--purple) 88%, var(--purple-t)); } .ow-grid.v4 .pz-piece.k-purple text { fill: var(--purple-t); }
.ow-grid.v4 .pz-piece text { font-weight: 600; paint-order: normal; stroke: none; } .ow-grid.v4 .pz-piece text.pz-sub { font-weight: 500; opacity: .8; }
.ow-grid.v4 .pz-piece.loose path { fill: var(--panel2, #f4f6f8); stroke: var(--muted); stroke-dasharray: 4 3; } .ow-grid.v4 .pz-piece.loose text { fill: var(--muted); }
.ow-grid.v4 .pz-round { width: 46px; height: 46px; font-size: 24px; font-weight: 700; background: var(--panel); color: var(--fg); border: 1px solid var(--line); box-shadow: 0 2px 6px rgba(0,0,0,.12); } .ow-grid.v4 .wh-round { top: 30px; right: -4px; }
.ow-grid.v4 .pz-again { background: var(--panel); color: var(--fg); border: 1px solid var(--line); font-size: 14px; font-weight: 600; padding: 8px 18px; box-shadow: none; } .ow-grid.v4 .pz-again:hover { background: var(--panel2, #f4f6f8); }
.ow-hint .ow-legend i { width: 9px; height: 9px; border-radius: 50%; }
/* Every call button and phone icon is phone green at rest (Chris, 2026-10-08): anything that places a call, wherever it sits */
:root { --call: #2aa84a; --call-dark: #23913f; } /* the darker green at rest (Chris, 2026-10-08) */
button[onclick*="startCall"]:not(.link) { background: var(--call); border-color: var(--call); color: #fff; } button[onclick*="startCall"]:not(.link):hover { background: var(--call-dark); border-color: var(--call-dark); filter: none; }
button.link[onclick*="startCall"] { color: var(--call-dark); font-weight: 600; }
button.cw-call, button.cw-call:hover { color: #fff; } button.cw-call { background: var(--call); border-color: var(--call); } button.cw-call:hover { background: var(--call-dark); border-color: var(--call-dark); }
.phonebtn[onclick*="startCall"] { background: var(--call); } .phonebtn[onclick*="startCall"]:hover { background: var(--call-dark); }
/* Flip to schedule inside the call window (Chris, 2026-10-08) */
.cw-flipbar { margin-top: 6px; } .callwork .movebar { margin: 8px 0; } .cw-flipgrid { max-height: 62vh; overflow: auto; border: 1px solid var(--line); border-radius: 12px; }
/* Flipped call window: narrow queue box with the chair and week controls beside it (Chris, 2026-10-08) */
.cw-fliprow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 8px; } .cw-fliprow .movebar { flex: 0 1 auto; width: auto; min-width: 220px; max-width: 340px; margin: 0; } .cw-fliprow .cw-flipbar { margin: 0; flex: 1 1 auto; justify-content: flex-end; } /* controls on the right, as on every other schedule (Chris, 2026-10-08) */

/* A call that ended without an outcome stays on the board, outlined, until the outcome is picked (Chris, 2026-10-08) */
.ow-grid.v4 .pz-piece.pend path { stroke: var(--accent); stroke-width: 2.6; stroke-dasharray: 6 3; }
.ow-grid.v4 .wheel .wedge.pend path { stroke: var(--accent); stroke-width: 2.4; stroke-dasharray: 5 3; }
.pend-note { color: var(--accent); font-weight: 600; }
.namerow .chip.warn-chip { font-size: 12px; vertical-align: middle; }

/* Treatment cards page (Chris, 2026-10-08): a playing card per treatment patient, newest plan first; double-click the wheel to get here */
.tcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; margin-top: 14px; }
.tcard { position: relative; display: grid; align-content: start; gap: 6px; aspect-ratio: 5 / 7; min-height: 300px; padding: 34px 16px 14px; background: #fff; border: 1.5px solid #c9ced6; border-radius: 14px; box-shadow: 0 2px 6px rgba(0,0,0,.12); text-align: left; font: inherit; color: var(--fg); cursor: pointer; transition: transform .15s, box-shadow .15s; border-top: 5px solid var(--g); }
.tcard:hover { transform: translateY(-4px); box-shadow: 0 10px 22px rgba(0,0,0,.16); }
.tcard .tc-corner { position: absolute; display: grid; justify-items: center; line-height: 1; color: var(--g); } .tcard .tc-corner b { font-size: 20px; font-weight: 800; } .tcard .tc-corner small { font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; white-space: nowrap; }
.tcard .tc-corner.tl { top: 10px; left: 12px; justify-items: start; } .tcard .tc-corner.br { right: 12px; bottom: 10px; transform: rotate(180deg); }
.tcard .tc-date { display: grid; font-size: 13px; font-weight: 600; color: var(--g); text-align: right; } .tcard .tc-date small { font-weight: 500; color: var(--muted); font-size: 11.5px; }
.tcard .tc-name { font-size: 19px; font-weight: 700; line-height: 1.15; margin-top: 4px; } .tcard .tc-sub { font-size: 12.5px; color: var(--muted); }
.tcard .tc-work { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .tcard .tc-work i { font-style: normal; font-size: 12px; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--g) 12%, #fff); color: var(--g); font-weight: 600; } .tcard .tc-work i.more { background: var(--panel2, #f4f6f8); color: var(--muted); }
.tcard .tc-money { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 2px; } .tcard .tc-money b { font-size: 18px; }
.tcard .tc-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-right: 28px; } .tcard .tc-last { font-size: 12px; padding-right: 28px; }
.tcard.pend { border-color: var(--accent); outline: 2px dashed var(--accent); outline-offset: 3px; }
.tcard.booked { opacity: .78; }

/* Treatment cards carry the quadrant (Chris, 2026-10-08) */
.tcards { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.tcard { aspect-ratio: auto; min-height: 420px; }
.tcard .tc-quad { display: block; margin: 6px -6px 2px; } .tcard .tc-quad .qmap { padding: 4px 2px; border-radius: 10px; background: color-mix(in srgb, var(--g) 4%, #fff); border-color: color-mix(in srgb, var(--g) 25%, var(--line)); }
.tcard .tc-quad .quad { min-height: 54px; padding: 4px 3px; column-gap: 3px; } .tcard .tc-quad .qcol { gap: 1px; } .tcard .tc-quad .tnum { font-size: 10px; } .tcard .tc-quad .qchip { font-size: 9.5px; padding: 0 3px; }
.tcard .tc-quad .qleg, .tcard .tc-quad .qlegend { display: none; }

/* Treatment card date: how long ago is the big line, the date small beneath (Chris, 2026-10-08) */
.tcard .tc-date { font-size: 14px; } .tcard .tc-date small { font-size: 11.5px; }

/* Front desk: Confirmations and Collect payment share the top row at one height (Chris, 2026-10-08) */
.fdcards > .collectcard { display: flex; flex-direction: column; }
.collect-strip { display: flex; align-items: stretch; gap: 10px; margin: 8px 0 6px; flex: 1 1 auto; min-height: 0; } .collect-strip .minis { flex: 1 1 auto; min-width: 0; align-content: start; }
.collect-arrow { flex: 0 0 auto; display: grid; place-items: center; align-content: center; width: 54px; border: 0; border-radius: 12px; background: var(--ok); color: #fff; font: inherit; font-size: 44px; line-height: 1; cursor: pointer; padding: 0; transition: transform .15s, filter .15s; }
.collect-arrow small { font-size: 11px; font-weight: 600; margin-top: 2px; } .collect-arrow:hover { filter: brightness(.94); transform: translateX(2px); }
.collect-arrow.back { width: 30px; background: var(--panel2, #f4f6f8); color: var(--muted); font-size: 30px; } .collect-arrow.back:hover { transform: translateX(-2px); }
.collectcard .miniinv .codes { font-size: 12px; }
.miniinv.compact { padding: 8px 10px; gap: 4px; overflow: hidden; } .miniinv.compact .codes td { padding: 1px 3px; } .miniinv.compact .codes td:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 110px; }
.miniinv.compact > .row:first-child b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .miniinv.compact .invkind { flex: 0 0 auto; }
.miniinv.compact > .row:last-child { margin-top: auto; } .miniinv.compact .owe { margin-left: auto; white-space: nowrap; }
.miniinv.compact .codes { table-layout: fixed; } .miniinv.compact .codes td:first-child { width: 44px; } .miniinv.compact .codes td.num { width: 62px; white-space: nowrap; } .miniinv.compact .codes td:nth-child(2) { max-width: none; }
.miniinv.compact > .row:first-child { flex-wrap: wrap; row-gap: 2px; } .miniinv.compact > .row:first-child b { white-space: normal; }

/* Call window: the plan's visits under the quadrant (Chris, 2026-10-08) */
.cw-plan .cw-visits { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; margin-top: 4px; } .cw-plan .visit { padding: 8px; gap: 5px; } .cw-plan .visit-f { gap: 6px; align-items: center; flex-wrap: wrap; } .cw-plan .visit-f .chip { margin: 0 auto; }
/* Room between the Outreach card and the row of cards beneath it (Chris, 2026-10-08) */
.hcards.fdcards { margin-top: 16px; }

/* Administration → Treatment: how visits are put together (Chris, 2026-10-08) */
.vrules { margin-top: 14px; } ul.plain.vrule-list { display: grid; gap: 8px; margin: 10px 0 8px; } ul.plain.vrule-list li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; font-size: 14px; padding: 8px 0; border-bottom: 1px solid var(--line); } ul.plain.vrule-list li:last-child { border-bottom: 0; }
.vrule-list .vr-n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 13px; } .vrule-list input.mins.xs { margin: 0 2px; } .vrule-list .seg.sm button { padding: 3px 10px; }
.cw-plan .visit.over { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .cw-plan .visit.add.cw-newvisit { min-height: 54px; justify-content: center; align-items: center; }
.callwork .mhead .fullrec, .deckpop .mhead .fullrec, .recarepop .mhead .fullrec { padding: 6px 12px; }

/* Flipped call window: the patient's visit cards, Book this visit, and the armed bubble (Chris, 2026-10-08) */
.callwork .visitbar { margin: 8px 0 6px; } .callwork .armbubble { margin: 0 0 8px; } .visitcard .vc-book { margin-top: 6px; width: 100%; } .visitcard.armed { outline: 2px dashed var(--accent); outline-offset: 2px; }
.cw-plan .cw-bookvisit { margin-top: 2px; }
.visitrow .visit.visitcard { cursor: grab; min-width: 230px; max-width: 320px; } .visitrow .visit.visitcard:active { cursor: grabbing; }

/* The call window as a small bar along the bottom of the full record (Chris, 2026-10-08) */
.cw-strip { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 70; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; max-width: calc(100vw - 32px); padding: 8px 10px 8px 8px; background: var(--panel); border: 2px solid var(--call); border-radius: 999px; box-shadow: 0 10px 28px rgba(0,0,0,.18); font-size: 14px; }
.cw-strip.live { background: color-mix(in srgb, var(--ok) 10%, var(--panel)); border-color: var(--ok); } .cw-strip .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 25%, transparent); } .cw-strip .timer { font-variant-numeric: tabular-nums; font-weight: 700; }
.cw-strip .back { border-radius: 999px; } .cw-strip .x { margin-left: 2px; }

/* Forms card: a clipboard per person we are waiting on; green check for three minutes when the forms land (Chris, 2026-10-08) */
.clipboards { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; }
.clipboard { position: relative; width: 158px; padding: 14px 8px 8px; border-radius: 10px; background: #8b5a2b; background-image: linear-gradient(135deg, #9c6a38, #7a4c22); box-shadow: 0 3px 8px rgba(0,0,0,.18); }
.clipboard .clip { position: absolute; top: -8px; left: 50%; width: 54px; height: 18px; transform: translateX(-50%); background: #475569; border-radius: 6px 6px 3px 3px; box-shadow: inset 0 -3px 0 rgba(0,0,0,.25); }
.clipboard .clip::after { content: ""; position: absolute; left: 50%; top: 4px; width: 22px; height: 7px; transform: translateX(-50%); border-radius: 4px; background: #cbd5e1; }
.clipboard .paper { position: relative; display: flex; flex-direction: column; gap: 3px; min-height: 96px; padding: 10px 9px 8px; background: #fff; border-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,.12); font-size: 13px; }
.clipboard .paper b { font-size: 13.5px; line-height: 1.2; } .clipboard .paper small { font-size: 11.5px; } .clipboard .paper .link.sm { padding: 0; font-size: 12px; }
.clipboard .cb-sub { display: flex; align-items: center; gap: 6px; color: var(--muted); } .clipboard .cb-sub.ok { color: var(--ok); font-weight: 600; }
.cb-dots { display: inline-flex; gap: 3px; } .cb-dots i { width: 5px; height: 5px; border-radius: 50%; background: #c9a227; animation: cbdot 1.2s infinite; } .cb-dots i:nth-child(2) { animation-delay: .2s; } .cb-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes cbdot { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.clipboard.done .paper { background: #f0fbf4; }
.clipboard .cb-check { position: absolute; right: 8px; top: 8px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--ok); color: #fff; font-size: 20px; font-weight: 800; box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 22%, transparent); animation: cbpop .45s cubic-bezier(.2,1.4,.4,1); }
@keyframes cbpop { 0% { transform: scale(0); opacity: 0; } 70% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }
.clipboard.done { animation: cbfade var(--left, 180s) linear forwards; } @keyframes cbfade { 0%, 85% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .clipboard.done, .clipboard .cb-check, .cb-dots i { animation: none; } }
.clipboard .cb-check { top: auto; bottom: 8px; } .clipboard.done .paper { padding-bottom: 12px; }
/* Both Collect payment arrows: the narrow size, green (Chris, 2026-10-08) */
.collect-arrow, .collect-arrow.back { width: 30px; background: var(--ok); color: #fff; font-size: 30px; } .collect-arrow.back:hover { transform: translateX(-2px); }
/* Draft 10.74 (Chris, 2026-10-08): Administration → Forms template with live preview, like the invoice layout */
.formlayout .fsec.off { opacity: .55; } .fsec-title { font-weight: 700; font-size: 15px; width: 260px; max-width: 100%; } .fq-list { margin: 8px 0; } .fq-list li { display: flex; align-items: center; gap: 6px; padding: 3px 0; } .fq-list li .inline-in { flex: 1; } .fq-list li .chk { margin: 0; } .fq-list .x.sm { font-size: 16px; line-height: 1; padding: 0 6px; }
.form-doc h2 { color: var(--inv, #111); } .form-doc hr { border-color: var(--inv, #ddd); } .fd-head small { display: block; color: #555; margin-top: 2px; } .fd-intro { margin: 6px 0 12px; color: #333; }
.fd-sec { margin: 0 0 14px; break-inside: avoid; } .fd-sec h3 { margin: 0 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--inv, #111); border-bottom: 1px solid var(--inv, #ccc); padding-bottom: 2px; }
.fd-box { display: inline-block; width: 11px; height: 11px; border: 1.4px solid #333; border-radius: 2px; vertical-align: -1px; margin: 0 2px 0 0; }
.fd-lines { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 18px; } .fd-line { display: flex; gap: 6px; align-items: flex-end; } .fd-line span { white-space: nowrap; } .fd-line i { flex: 1; border-bottom: 1px solid #333; min-width: 60px; height: 14px; }
.fd-yn .fd-q { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; border-bottom: 1px dotted #ccc; } .fd-opts { white-space: nowrap; }
.fd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px 10px; } .fd-write { margin: 4px 0 8px; } .fd-area { height: 44px; border: 1px solid #333; border-radius: 3px; margin-top: 3px; }
.fd-stmt { margin: 4px 0; } .fd-signrow { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; margin-top: 14px; } .fd-signrow .fd-line i, .fd-signrow ~ .fd-line i { height: 22px; } .form-doc .fd-line:last-child { margin-top: 8px; }
.waithits li button { width: 100%; text-align: left; display: flex; gap: 10px; align-items: center; }
/* Waiting on board: a sticky note per wait (Chris, 2026-10-08) */
.stickies { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 22px 20px; padding: 10px 6px 6px; }
.sticky { position: relative; background: var(--sn, #fff3a3); color: #222; padding: 22px 16px 14px; border-radius: 2px; box-shadow: 2px 5px 12px rgba(0, 0, 0, .22); transform: rotate(-.7deg); display: flex; flex-direction: column; gap: 4px; min-height: 210px; font-size: 14px; }
.sticky:nth-child(even) { transform: rotate(.8deg); } .sticky:nth-child(3n) { transform: rotate(-.3deg); } .sticky:hover { transform: rotate(0) scale(1.01); z-index: 1; }
.sticky .tape { position: absolute; top: -9px; left: 50%; width: 92px; height: 22px; margin-left: -46px; background: rgba(255, 255, 255, .5); border: 1px solid rgba(0, 0, 0, .08); transform: rotate(-2deg); backdrop-filter: blur(1px); }
.sticky h3 { margin: 0; font-size: 19px; line-height: 1.15; } .sticky .muted { color: #555; } .sticky .sn-kind { margin: 6px 0 0; font-weight: 700; font-size: 16px; } .sticky p { margin: 0; } .sticky p.sm { color: #333; }
.sticky ul.plain.reasons { margin: 4px 0 0; } .sticky ul.plain.reasons li { display: block; color: #333; border-top: 1px dashed rgba(0, 0, 0, .18); padding: 3px 0; }
.sticky .row.mt { margin-top: auto; padding-top: 8px; } .sticky button { font-size: 12.5px; } .sticky .chip { background: rgba(255, 255, 255, .6); color: #222; }
.sticky.due { outline: 2px dashed #b7791f; outline-offset: -4px; } .sticky.stuck { outline: 3px solid var(--bad); outline-offset: -4px; animation: fdflash 1.6s ease-in-out infinite; }
/* Predetermination shield in the bottom-right corner of a schedule block (Chris, 2026-10-08) */
.dblock.two .shield { position: absolute; right: 3px; bottom: 3px; width: 13px; height: 13px; } .dblock.two .shield.ok { color: #1d6fd1; } .dblock.two .shield.ok path:first-child { fill: #1d6fd1; } .dblock.two .shield.ok .tick { stroke: #fff; }
.clipboard .cb-x { position: absolute; top: 4px; right: 5px; z-index: 2; width: 20px; height: 20px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .28); color: #fff; font-size: 15px; line-height: 20px; padding: 0; cursor: pointer; opacity: .75; } .clipboard .cb-x:hover { opacity: 1; background: var(--bad); }
.appt { position: absolute; } .appt .shield { position: absolute; right: 3px; bottom: 3px; width: 13px; height: 13px; }
.sticky ul.plain.reasons li { padding-left: 14px; }
/* Front desk Messages tab = the overview Messages card, full width (Chris, 2026-10-08) */
.msgpage { border: 2px solid #1a73e8; border-radius: 16px; padding: 14px 16px; background: var(--panel); display: flex; flex-direction: column; gap: 10px; } .msgpage .mc-list { max-height: none; } .msgpage .mc-thread { max-height: calc(100vh - 320px); } .msgpage.open form input { flex: 1; }
/* Crowns on the Predeterminations page: deck cards, Waiting card (Chris, 2026-10-08) */
.pdtop { align-items: start; margin-bottom: 14px; } .pdbig { border-width: 2px; } .pdcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin-top: 8px; }
.pdcards .tcard.pdcard { aspect-ratio: auto; min-height: 250px; padding: 30px 12px 12px; gap: 4px; --g: #6b7280; } .pdcard.pd-waiting { --g: #b7791f; } .pdcard.pd-approved { --g: #1d6fd1; } .pdcard.pd-rejected { --g: var(--bad); } .pdcard.pd-selfpay, .pdcard.pd-proposed { --g: var(--warn); }
.pdcard .tc-name { font-size: 17px; } .pdcard .tc-money b { font-size: 16px; } .pdcard .pd-needs { margin: 2px 0 0; font-size: 12px; color: var(--muted); } .pdcard .pd-needs li { display: block; padding: 1px 0; }
.pdcard .pd-chip { background: color-mix(in srgb, var(--g) 14%, #fff); color: var(--g); font-weight: 600; border: 1px solid color-mix(in srgb, var(--g) 35%, #fff); } .pdcard .tc-foot { padding-right: 0; }
.pdcard .pd-btns { margin-top: 6px; } .pdcard .pd-btns select.sm { font-size: 12px; padding: 3px 6px; border-radius: 8px; }
.pdcard.pd-waiting { background: #fffbec; } .pdcard.pd-approved { background: #f1f6ff; } .pdcard.pd-rejected { background: #fff3f3; }
@media (max-width: 1100px) { .pdtop { grid-template-columns: 1fr; } }
.pdcard .tc-corner.br { display: none; }
/* Paper copy attached to a crown predetermination (Chris, 2026-10-08) */
.pd-files { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .pdf-chip { display: inline-flex; align-items: center; gap: 4px; border: 1px solid #d33; color: #b11; background: #fff2f2; font-weight: 600; cursor: pointer; }
.pd-ic { width: 14px; height: 14px; flex: none; } .pd-ic path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; } .pd-ic text { font-size: 7px; font-weight: 800; fill: currentColor; } .pd-ic.img { color: #1d6fd1; }
.pd-filelist { margin: 10px 0 0; display: flex; flex-direction: column; gap: 6px; } .pd-filelist li { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; } .pd-filelist li button.link { display: inline-flex; align-items: center; gap: 6px; padding: 0; } .pd-filelist li small { flex: 1; }
.modal.pdattach .drop { margin-top: 6px; } .pd-fileview { background: #525659; padding: 12px; min-height: 60vh; display: grid; place-items: start center; } .pd-fileview img { max-width: 100%; max-height: 78vh; border-radius: 4px; box-shadow: 0 4px 18px rgba(0,0,0,.45); } .pd-fileview iframe { width: 100%; height: 78vh; border: 0; background: #fff; border-radius: 4px; }
.pd-attached { margin: 10px 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .pdfbar a.btn { color: #eee; text-decoration: none; border: 1px solid #777; border-radius: 8px; padding: 3px 9px; font-size: 12.5px; }
.pdcard .attach { margin-left: auto; }
.pd-hint { color: #ddd; font-size: 12px; margin-top: 6px; }
/* Crown predetermination card, expanded, on the Insurance tab of the full record (Chris, 2026-10-08) */
.pdcards.wide { grid-template-columns: 1fr; margin: 8px 0 16px; } .pdcards .tcard.pdcard.pd-wide { min-height: 0; padding: 46px 18px 14px; }
.pd-wide .tc-name { font-size: 19px; } .pd-detail { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 20px; margin-top: 8px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 13px; cursor: default; } .pd-detail b { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.pd-wide .tc-date { position: absolute; right: 18px; top: 12px; } .pd-wide .pd-btns { margin-top: 10px; }
/* Approved section + blue shields on covered crown visits (Chris, 2026-10-09) */
.pdtop.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .pdbig.approved { border-color: #1d6fd1; } @media (max-width: 1250px) { .pdtop.three { grid-template-columns: 1fr; } }
.visit-h .vshield { width: 16px; height: 16px; margin-left: 4px; flex: none; } .bubble .ishield { position: absolute; right: -4px; top: -5px; width: 14px; height: 14px; background: #fff; border-radius: 50%; } .bubble { position: relative; }
.cw-facts .fshield { width: 14px; height: 14px; vertical-align: -2px; margin-right: 2px; } li .vshield { width: 14px; height: 14px; margin: 0 2px; vertical-align: -2px; }
.modal.dialpad input.dp-num, .modal.dialpad input.dp-num:focus { border: 0; border-bottom: 2px solid color-mix(in srgb, var(--call) 35%, transparent); border-radius: 0; box-shadow: none; outline: none; background: transparent; } .modal.dialpad input.dp-num:focus { border-bottom-color: var(--call); }
/* Confirmation deck finished (Chris, 2026-10-09): the last card done shows a Finished button that ends the work flow */
.deck-finished { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 28px 12px 8px; text-align: center; } .deck-finished p { max-width: 420px; margin: 0; } .deck-finished .cw-next { padding: 16px 34px; font-size: 19px; } .deck-finished .cw-next .arrow { font-size: 26px; }
/* Backtest page (Chris, 2026-10-09): formulas side by side against what patients actually did */
.fx-three.four { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 1100px) { .fx-three.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 700px) { .fx-three.four { grid-template-columns: 1fr; } }
.bt-steps { margin: 6px 0 12px; padding-left: 22px; } .bt-steps li { margin: 4px 0; }
.chip-btn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--fg); font: inherit; font-size: 13px; cursor: pointer; } .chip-btn:hover { border-color: var(--accent); } .chip-btn.on { background: var(--accent); border-color: var(--accent); color: #fff; } .chip-btn.on .bt-dot { outline: 2px solid #fff; }
.bt-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.bt-tbl th { vertical-align: bottom; } .bt-tbl td.num { font-size: 16px; } .bt-tbl td.bt-best { font-weight: 700; color: var(--accent); } .bt-tbl td.bt-best::after { content: ' ✓'; } .bt-blurb td { padding-top: 0; font-weight: 400; line-height: 1.3; }
.bt-chart { width: 100%; height: auto; display: block; margin: 8px 0 4px; } .bt-grid { stroke: var(--line); stroke-width: 1; } .bt-avg { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 5 4; } .bt-ax { font-size: 11px; fill: var(--muted); } .bt-val { font-size: 12px; font-weight: 600; fill: var(--fg); }
.bt-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--muted); margin-top: 4px; } .bt-legend i { display: inline-block; width: 18px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; } .bt-legend i.dash { background: repeating-linear-gradient(90deg, var(--muted) 0 4px, transparent 4px 7px); }
.bt-rank { margin: 0 0 12px; padding: 8px 12px; border: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--panel)); border-radius: 0 8px 8px 0; }
.bt-gap { margin-left: 14px; }
/* Practice health tab (Chris, 2026-10-09): yearly trends per sector, declines flagged */
:root { --hl-ok: var(--accent); --hl-up: var(--ok); --hl-warn: var(--warn); --hl-bad: var(--bad); }
.hl-top { display: grid; grid-template-columns: minmax(260px, 1fr) 2fr; gap: 14px; margin-bottom: 14px; } @media (max-width: 900px) { .hl-top { grid-template-columns: 1fr; } }
.hl-score { align-items: center; text-align: center; } .hl-ring { width: 150px; height: 150px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 6px 0; background: conic-gradient(var(--ring) calc(var(--pct) * 1%), var(--panel2) 0); position: relative; } .hl-ring::before { content: ''; position: absolute; inset: 12px; border-radius: 50%; background: var(--panel); } .hl-ring b, .hl-ring small { position: relative; } .hl-ring b { font-size: 44px; line-height: 1; } .hl-ring small { color: var(--muted); } .hl-ring.ok { --ring: var(--ok); } .hl-ring.warn { --ring: var(--warn); } .hl-ring.bad { --ring: var(--bad); }
.hl-chain p { margin: 4px 0; }
.hl-card { border: 2px solid var(--hl-ok); } .hl-card.up { border-color: var(--hl-up); } .hl-card.warn { border-color: var(--hl-warn); } .hl-card.bad { border-color: var(--hl-bad); }
.hl-chip svg { width: 14px; height: 14px; margin-right: 4px; } .hl-chip.ok { background: var(--accent-soft); color: var(--accent); border-color: transparent; } .hl-chip.up { background: var(--ok-soft); color: var(--ok); border-color: transparent; } .hl-chip.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; } .hl-chip.bad { background: var(--bad-soft); color: var(--bad); border-color: transparent; }
.hl-nums { display: flex; align-items: baseline; gap: 12px; } .hl-nums b { font-size: 30px; } .hl-nums span { font-size: 13px; color: var(--muted); } .hl-nums span.down { color: var(--bad); } .hl-nums span.up { color: var(--ok); }
.hl-spark { width: 100%; height: auto; display: block; } .hl-ax { font-size: 11px; fill: var(--muted); } .hl-last { font-size: 13px; font-weight: 700; fill: var(--fg); } .hl-mark { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.hl-why { margin: 0; } .hl-tblwrap { overflow-x: auto; } .hl-tbl td.last { font-weight: 700; } .bad-t { color: var(--bad); }
.hl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 800px) { .hl-grid { grid-template-columns: 1fr; } }
.hl-head { display: flex; flex-direction: column; gap: 2px; } .hl-head small { line-height: 1.2; }
/* ---------- Clinic website and public booking page (Chris, 2026-10-09) ---------- */
body.site-on { background: #e9eef1; }
.site-demo { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 14px; padding: 8px 16px; background: #1b2430; color: #e6ebf1; flex-wrap: wrap; }
.sd-back { background: transparent; border: 1px solid #44515f; color: #fff; border-radius: 8px; padding: 6px 12px; font: inherit; font-weight: 600; cursor: pointer; } .sd-back:hover { background: #26313d; }
.sd-addr { flex: 1 1 260px; display: flex; align-items: center; gap: 8px; background: #26313d; border-radius: 999px; padding: 6px 14px; color: #c9d3dd; font-size: 13px; min-width: 0; } .sd-addr svg { width: 14px; height: 14px; flex: none; color: #7fd1a0; } .sd-addr span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-dev { display: inline-flex; background: #26313d; border-radius: 999px; padding: 3px; } .sd-dev button { border: 0; background: transparent; color: #c9d3dd; font: inherit; font-size: 13px; padding: 4px 12px; border-radius: 999px; cursor: pointer; } .sd-dev button.on { background: #fff; color: #1b2430; font-weight: 600; }
.sd-note { color: #98a6b6; }
.site-stage.sf-phone { padding: 18px 16px 30px; }
.site-frame.sf-phone { width: 390px; max-width: 100%; height: calc(100vh - 110px); min-height: 560px; margin: 0 auto; overflow-y: auto; border: 12px solid #111820; border-radius: 42px; background: #fff; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.site { --wk: #13303a; --wm: #586b74; --wt: #0e7c86; --wtd: #0a5d65; --ws: #e8f4f4; --wsand: #faf6ee; --wl: #dce6e8; container-type: inline-size; background: #fff; color: var(--wk); font: 16px/1.55 var(--font); min-height: 100%; }
.site h1, .site h2, .site h3 { color: var(--wk); line-height: 1.2; margin: 0; letter-spacing: -0.01em; }
.site h1 { font-size: 44px; font-weight: 700; } .site h2 { font-size: 32px; font-weight: 700; } .site h3 { font-size: 18px; font-weight: 600; }
.site p { margin: 0; } .site .ic { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ws-btn { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; background: var(--wt); color: #fff; font: inherit; font-weight: 600; font-size: 15px; padding: 10px 20px; cursor: pointer; transition: background .15s, transform .15s; } .ws-btn:hover { background: var(--wtd); }
.ws-btn.lg { font-size: 17px; padding: 14px 26px; } .ws-btn.ghost { background: #fff; color: var(--wt); box-shadow: inset 0 0 0 2px var(--wt); } .ws-btn.ghost:hover { background: var(--ws); } .ws-btn.light { background: #fff; color: var(--wtd); } .ws-btn.light:hover { background: var(--ws); }
.ws-link { border: 0; background: none; color: var(--wt); font: inherit; font-weight: 600; padding: 0; cursor: pointer; } .ws-link:hover { text-decoration: underline; }
.ws-muted { color: var(--wm); }
/* header */
.ws-head { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 24px; padding: 14px 40px; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--wl); backdrop-filter: blur(6px); }
.site-frame.sf-desktop .ws-head { top: 48px; }
.ws-logo { display: flex; align-items: center; gap: 10px; border: 0; background: none; font: inherit; color: var(--wk); cursor: pointer; padding: 0; } .ws-logo b { font-size: 20px; letter-spacing: -0.01em; }
.ws-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--wt); color: #fff; font-size: 20px; }
.ws-nav { display: flex; gap: 4px; margin-left: 12px; } .ws-nav button { border: 0; background: none; font: inherit; font-size: 15px; color: var(--wm); padding: 8px 12px; border-radius: 8px; cursor: pointer; } .ws-nav button:hover { color: var(--wk); background: var(--ws); }
.ws-head-r { margin-left: auto; display: flex; align-items: center; gap: 16px; } .ws-tel { display: inline-flex; align-items: center; gap: 6px; color: var(--wk); text-decoration: none; font-weight: 600; } .ws-tel .ic { color: var(--wt); }
/* hero */
.ws-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; padding: 56px 40px 48px; background: linear-gradient(180deg, var(--ws) 0%, #fff 100%); }
.ws-kicker { display: inline-block; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--wt); margin-bottom: 14px; }
.ws-hero-txt p { font-size: 18px; color: var(--wm); margin: 16px 0 24px; max-width: 560px; }
.ws-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.ws-next { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 22px; padding: 12px 16px; border: 1px solid var(--wl); border-radius: 14px; background: #fff; font: inherit; color: var(--wk); cursor: pointer; text-align: left; box-shadow: 0 4px 14px rgba(19,48,58,.06); } .ws-next:hover { border-color: var(--wt); }
.ws-next span { color: var(--wm); font-size: 14px; } .ws-next b { font-size: 15px; } .ws-next .ws-next-go { margin-left: auto; color: var(--wt); font-weight: 600; }
.ws-dot { width: 10px; height: 10px; border-radius: 50%; background: #2aa84a; box-shadow: 0 0 0 4px rgba(42,168,74,.18); }
.ws-trust { list-style: none; padding: 0; margin: 22px 0 0; display: flex; gap: 18px; flex-wrap: wrap; color: var(--wm); font-size: 14px; } .ws-trust li { display: flex; align-items: center; gap: 6px; } .ws-trust .ic { color: var(--wt); width: 18px; height: 18px; }
.ws-hero-pic { border-radius: 28px; overflow: hidden; box-shadow: 0 18px 40px rgba(14,124,134,.18); background: #fdf6e4; } .ws-hero-art { display: block; width: 100%; height: auto; }
/* sections */
.ws-sec { padding: 64px 40px; } .ws-sec.alt { background: var(--wsand); }
.ws-lead { color: var(--wm); font-size: 17px; margin: 10px 0 28px !important; max-width: 640px; }
.ws-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ws-card { border: 1px solid var(--wl); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 8px; background: #fff; } .ws-card p { color: var(--wm); font-size: 15px; flex: 1; } .ws-card .ws-link { align-self: flex-start; margin-top: 6px; }
.ws-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--ws); color: var(--wt); margin-bottom: 4px; } .ws-ic .ic { width: 24px; height: 24px; }
.ws-team { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 18px; }
.ws-person { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 22px 12px; background: #fff; border-radius: 18px; border: 1px solid var(--wl); } .ws-person small { color: var(--wm); font-size: 13px; }
.ws-av { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; font-size: 24px; font-weight: 700; color: #fff; background: var(--wt); margin-bottom: 8px; } .ws-av.r-hygienist { background: #7b53c1; } .ws-av.r-assistant { background: #2d7dd2; } .ws-av.r-frontdesk { background: #c2651a; }
.ws-steps { list-style: none; padding: 0; margin: 0 0 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .ws-steps li { display: flex; gap: 14px; align-items: flex-start; } .ws-steps li > span { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--wt); color: #fff; font-weight: 700; font-size: 18px; } .ws-steps b { font-size: 17px; } .ws-steps p { color: var(--wm); font-size: 15px; margin-top: 4px; }
.ws-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.ws-note { display: flex; gap: 14px; padding: 20px; border-radius: 18px; background: var(--ws); } .ws-note > .ic { color: var(--wt); width: 26px; height: 26px; } .ws-note p { color: var(--wm); font-size: 15px; margin-top: 4px; }
.ws-visit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 24px; } .ws-visit > div { background: #fff; border: 1px solid var(--wl); border-radius: 18px; padding: 24px; display: flex; flex-direction: column; gap: 10px; } .ws-visit h3 { display: flex; align-items: center; gap: 8px; } .ws-visit h3 .ic { color: var(--wt); }
.ws-hours table { border-collapse: collapse; width: 100%; } .ws-hours td { padding: 7px 0; border-bottom: 1px solid var(--wl); } .ws-hours td:last-child { text-align: right; } .ws-hours tr.off td { color: var(--wm); } .ws-hours tr.today td { font-weight: 700; color: var(--wt); }
.ws-closed { font-size: 14px; color: var(--wm); } .ws-closed b { color: #b03a2e; margin-right: 4px; }
.ws-where p { color: var(--wm); } .ws-where p .ic { width: 16px; height: 16px; vertical-align: -3px; color: var(--wt); } .ws-map { width: 100%; height: auto; display: block; border-radius: 12px; }
.ws-band { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin: 0 40px 56px; padding: 36px 40px; border-radius: 28px; background: linear-gradient(120deg, var(--wt), #0a5d65); color: #fff; } .ws-band h2 { color: #fff; } .ws-band p { color: #d6eef0; margin-top: 6px; }
.ws-foot { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 32px 40px; background: #13303a; color: #cfe0e3; font-size: 14px; } .ws-foot > div { display: flex; flex-direction: column; gap: 4px; } .ws-foot b { color: #fff; font-size: 16px; } .ws-foot-r { align-items: flex-end; } .ws-foot-r button { border: 0; background: none; color: #cfe0e3; font: inherit; cursor: pointer; padding: 0; } .ws-foot-r button:hover { color: #fff; text-decoration: underline; } .ws-foot-r small { color: #8fa9ae; margin-top: 6px; }
/* booking page */
.bk { padding: 40px 40px 64px; background: linear-gradient(180deg, var(--ws) 0, #fff 260px); min-height: 60vh; }
.bk-prog { list-style: none; display: flex; gap: 8px; padding: 0; margin: 0 0 28px; flex-wrap: wrap; } .bk-prog li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--wm); padding: 6px 14px 6px 6px; border-radius: 999px; background: #fff; border: 1px solid var(--wl); } .bk-prog li > span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ws); color: var(--wt); font-weight: 700; font-size: 13px; } .bk-prog li > span .ic { width: 14px; height: 14px; } .bk-prog li.on { color: var(--wk); font-weight: 600; border-color: var(--wt); } .bk-prog li.on > span { background: var(--wt); color: #fff; } .bk-prog li.past > span { background: #2aa84a; color: #fff; }
.bk-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; max-width: 1040px; }
.bk-main { display: flex; flex-direction: column; gap: 14px; } .bk-main h1 { font-size: 36px; } .bk-main .ws-lead { margin: 0 0 8px !important; } .bk-main > .ws-link { align-self: flex-start; margin-top: 6px; }
.bk-big { display: flex; align-items: center; gap: 16px; width: 100%; text-align: left; padding: 20px 22px; border-radius: 18px; border: 1.5px solid var(--wl); background: #fff; font: inherit; color: var(--wk); cursor: pointer; transition: border-color .15s, box-shadow .15s; } .bk-big:hover { border-color: var(--wt); box-shadow: 0 6px 18px rgba(14,124,134,.12); }
.bk-big > span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--ws); color: var(--wt); flex: none; } .bk-big > span .ic { width: 24px; height: 24px; } .bk-big div { display: flex; flex-direction: column; gap: 2px; flex: 1; } .bk-big b { font-size: 18px; } .bk-big small { color: var(--wm); font-size: 15px; } .bk-big em { font-style: normal; font-size: 24px; color: var(--wt); }
.bk-big.primary { background: var(--wt); border-color: var(--wt); color: #fff; } .bk-big.primary > span { background: rgba(255,255,255,.18); color: #fff; } .bk-big.primary small { color: #d6eef0; } .bk-big.primary em { color: #fff; } .bk-big.primary:hover { background: var(--wtd); }
.bk-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.bk-code { display: flex; align-items: flex-end; gap: 10px; padding: 16px 18px; border-radius: 16px; background: var(--wsand); margin-top: 8px; } .bk-code label { flex: 1; display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; } .bk-code input { font: inherit; font-size: 16px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--wl); text-transform: uppercase; letter-spacing: .06em; }
.bk-ok { display: flex; align-items: center; gap: 8px; color: #1f7a3a; font-weight: 600; } .bk-other { color: var(--wm); font-size: 15px; margin-top: 8px !important; }
.bk-cal { border: 1px solid var(--wl); border-radius: 18px; padding: 14px; background: #fff; } .bk-cal-wd, .bk-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; } .bk-cal-wd i { font-style: normal; text-align: center; font-size: 12px; font-weight: 600; color: var(--wm); padding-bottom: 6px; }
.bk-day { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px; border-radius: 12px; border: 1px solid var(--wl); background: #fff; font: inherit; color: var(--wk); cursor: pointer; } .bk-day b { font-size: 16px; } .bk-day small { font-size: 11px; color: var(--wt); font-weight: 600; } .bk-day:hover { border-color: var(--wt); } .bk-day.on { background: var(--wt); border-color: var(--wt); color: #fff; } .bk-day.on small { color: #d6eef0; } .bk-day.none { background: #f4f6f7; color: #a5b2b8; cursor: default; border-color: transparent; } .bk-day.none small { color: #a5b2b8; font-weight: 400; }
.bk-dayh { margin-top: 10px !important; } .bk-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; } .bk-times button { padding: 12px; border-radius: 12px; border: 1.5px solid var(--wt); background: #fff; color: var(--wt); font: inherit; font-weight: 700; font-size: 16px; cursor: pointer; } .bk-times button:hover { background: var(--wt); color: #fff; }
.bk-form { display: flex; flex-direction: column; gap: 14px; } .bk-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.bk-form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; } .bk-form label small { color: var(--wm); font-weight: 400; }
.bk-form input, .bk-form select, .bk-form textarea { font: inherit; font-size: 16px; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--wl); background: #fff; color: var(--wk); } .bk-form input:focus, .bk-form select:focus, .bk-form textarea:focus { outline: none; border-color: var(--wt); box-shadow: 0 0 0 3px rgba(14,124,134,.15); }
.bk-otp { font-size: 30px !important; letter-spacing: .3em; text-align: center; max-width: 280px; font-weight: 700; }
.bk-fine { font-size: 14px; color: var(--wm); } .bk-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 6px; } .bk-actions.center { justify-content: center; }
.bk-alert { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px; background: #fdecea; color: #8f2a1f; font-size: 15px; } .bk-alert .ic { color: #b03a2e; }
.bk-side { position: sticky; top: 140px; display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 18px; background: #fff; border: 1px solid var(--wl); box-shadow: 0 6px 20px rgba(19,48,58,.06); } .bk-side-h { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--wt); } .bk-side b { font-size: 20px; } .bk-side-t { color: var(--wm); } .bk-side p { display: flex; gap: 8px; color: var(--wm); font-size: 15px; } .bk-side p .ic { color: var(--wt); width: 18px; height: 18px; margin-top: 2px; } .bk-side .ws-link { align-self: flex-start; }
.bk.finished { display: flex; justify-content: center; } .bk-done { max-width: 560px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 20px; } .bk-done > span { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: #2aa84a; color: #fff; } .bk-done > span .ic { width: 40px; height: 40px; stroke-width: 2.4; } .bk-done p { color: var(--wm); } .bk-when { font-size: 22px; font-weight: 700; color: var(--wk) !important; }
.bk-next { list-style: none; padding: 18px; margin: 8px 0; display: flex; flex-direction: column; gap: 10px; text-align: left; background: var(--ws); border-radius: 16px; } .bk-next li { display: flex; gap: 10px; color: var(--wk); font-size: 15px; } .bk-next .ic { color: var(--wt); margin-top: 2px; }
/* the same site on a phone (or a narrow window): container queries, so the Phone preview and a real phone look the same */
@container (max-width: 900px) {
  .ws-nav { display: none; } .ws-hero { grid-template-columns: 1fr; } .ws-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ws-steps { grid-template-columns: 1fr; } .bk-grid { grid-template-columns: 1fr; } .bk-side { position: static; }
}
@container (max-width: 560px) {
  .site { font-size: 15px; } .site h1 { font-size: 30px; } .site h2 { font-size: 25px; } .bk-main h1 { font-size: 27px; }
  .ws-head { padding: 10px 16px; gap: 10px; } .ws-logo b { font-size: 16px; } .ws-mark { width: 32px; height: 32px; font-size: 17px; } .ws-tel span { display: none; } .ws-head-r { gap: 10px; } .ws-head .ws-btn { padding: 8px 14px; font-size: 14px; }
  .ws-hero { padding: 28px 16px 32px; gap: 24px; } .ws-hero-txt p { font-size: 16px; } .ws-cta .ws-btn { width: 100%; justify-content: center; }
  .ws-sec { padding: 40px 16px; } .ws-cards, .ws-two, .ws-visit, .bk-two, .bk-row { grid-template-columns: 1fr; } .ws-team { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .ws-band { margin: 0 16px 32px; padding: 24px; } .ws-band .ws-btn { width: 100%; justify-content: center; } .ws-foot { padding: 24px 16px; } .ws-foot-r { align-items: flex-start; }
  .bk { padding: 22px 16px 40px; } .bk-prog li { font-size: 0; padding: 4px; gap: 0; } .bk-prog li.on { font-size: 13px; padding-right: 12px; gap: 6px; } .bk-big { padding: 16px; } .bk-big b { font-size: 16px; } .bk-code { flex-direction: column; align-items: stretch; } .bk-day small { display: none; } .bk-day { padding: 10px 2px; } .bk-actions .ws-btn { width: 100%; justify-content: center; }
}
.site .nowrap { white-space: nowrap; }
.ws-head .ws-btn, .ws-logo b { white-space: nowrap; }
@container (max-width: 400px) { .ws-logo b { font-size: 15px; } .ws-head .ws-btn { padding: 7px 12px; font-size: 13px; } .ws-head .ws-tel { display: none; } }
/* 10.87 crown card text stays inside the card */
.pdcards .tcard.pdcard { grid-template-columns: minmax(0, 1fr); }
.pdcard > * { min-width: 0; } .pdcard .pd-chip { white-space: normal; max-width: 100%; line-height: 1.3; }
.pdcard .pd-btns { flex-wrap: wrap; gap: 6px; } .pdcard .tc-name, .pdcard .pd-needs li { overflow-wrap: anywhere; }

/* 10.88 colour accents are a solid 2px border all the way round, never a side strip (Chris, 2026-10-11). The rules above were converted in place; the side-schedule blocks keep their invisible left padding border. */
/* 10.89 call window: booking stays on the schedule until Back to the call; hygiene visit card matches the others; search opens the same window (Chris, 2026-10-11) */
.cw-bookedbar { display: flex; align-items: center; gap: 12px; margin: 6px 0 8px; padding: 10px 14px; border: 2px solid var(--ok); border-radius: 12px; background: #f0faf3; } .cw-bookedbar > div { flex: 1; display: grid; gap: 2px; } .cw-bookedbar b { font-size: 15px; }
.cw-bk-tick { width: 30px; height: 30px; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; font-weight: 700; flex: none; }
.cw-bk-note { margin: 0 0 6px; color: var(--ok); font-weight: 600; } .cw-o.suggest { outline: 2px solid var(--ok); outline-offset: 1px; font-weight: 700; }
.slotgrid.locked .slotbtn { opacity: .55; cursor: not-allowed; } .slotgrid.locked .slotbtn:hover { border-color: var(--line); background: var(--panel); }
.bubble.hygb { background: var(--pink-t); } .hyg-late { color: var(--bad); font-weight: 700; } .cw-nextclean { margin: 6px 0 0; display: flex; align-items: center; gap: 8px; }
.callwork .appt.sel { outline: 3px solid var(--ok); outline-offset: 1px; box-shadow: 0 0 0 6px rgba(46,156,110,.18); }
.cw-look .cw-grid { margin-top: 4px; }
/* 10.90 call window = mini full record: cleaning / exam as dates, record tabs inside the window (Chris, 2026-10-11) */
.cw-due { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; } .cw-duebox { display: grid; gap: 2px; padding: 10px 14px; border: 2px solid var(--line); border-radius: 12px; background: var(--panel); min-width: 0; }
.cw-duebox > small:first-child { text-transform: uppercase; letter-spacing: .04em; font-size: 11px; color: var(--muted); font-weight: 600; } .cw-duedate { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .cw-duedate b { font-size: 21px; } .cw-duedate span { font-weight: 600; }
.cw-duebox.overdue, .cw-duebox.bad { border-color: var(--bad); } .cw-duebox.overdue .cw-duedate, .cw-duebox.bad .cw-duedate { color: var(--bad); } .cw-duebox.due { border-color: var(--warn); } .cw-duebox.due .cw-duedate span { color: var(--warn); } .cw-duebox.booked, .cw-duebox.ok { border-color: var(--ok); } .cw-duebox.booked .cw-duedate, .cw-duebox.ok .cw-duedate span { color: var(--ok); }
.cw-tabs { margin: 12px 0 6px; } .cw-tabs button { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 6px 12px 7px; line-height: 1.2; } .cw-tabs button > span { font-size: 14px; } .cw-tabs .cw-tabsub { font-size: 11.5px; color: var(--muted); font-weight: 500; white-space: nowrap; } .cw-tabs .cw-tabsub.bad { color: var(--bad); font-weight: 600; } .cw-tabs button.on .cw-tabsub { color: var(--accent); }
.cw-tabbody { margin-top: 6px; } .cw-tabbody .tabs { display: none; }
@media (max-width: 700px) { .cw-due { grid-template-columns: 1fr; } }
.modal .cw-tabs, .modal .cw-due { flex: none; } .cw-tabs { overflow: visible; flex-wrap: wrap; } /* flex children with overflow:auto shrink to nothing inside the window */
.visits .visit.hygcard { cursor: default; } .visits .visit.hygcard.clickable { cursor: pointer; } .visit.hygcard .visit-f { margin-top: auto; }
/* 10.91 call window: tabs at the top, names only; one fixed size, the page scrolls inside; cleaning + exam in one small card on Overview (Chris, 2026-10-11) */
.modal.callwork:has(> .cw-scroll) { height: min(900px, 92vh); max-height: 92vh; overflow: hidden; }
.modal.callwork > .mhead, .modal.callwork > .cw-tabs, .modal.callwork > .cw-foot { flex: none; }
.modal.callwork > .cw-tabs { margin: 0 0 2px; }
.cw-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0 -18px; padding: 2px 18px 14px; display: flex; flex-direction: column; gap: 10px; }
.cw-scroll > .cw-grid, .cw-scroll > .cw-tabbody { margin-top: 0; }
.modal.callwork:has(> .cw-scroll) > .cw-foot { position: static; margin: 0 -18px -18px; }
.cw-tabs button { display: inline-block; padding: 9px 14px; font-size: 14.5px; }
.cw-duecard ul { display: grid; gap: 6px; margin-top: 6px; } .cw-duerow { display: grid; grid-template-columns: 70px auto 1fr; column-gap: 10px; align-items: baseline; }
.cw-duerow small { grid-column: 2 / -1; font-size: 11.5px; } .cw-dl { color: var(--muted); font-size: 12.5px; } .cw-duerow b { font-size: 15px; } .cw-dlate { font-weight: 600; font-size: 13px; }
.cw-duerow.overdue b, .cw-duerow.overdue .cw-dlate, .cw-duerow.bad b, .cw-duerow.bad .cw-dlate { color: var(--bad); } .cw-duerow.due .cw-dlate { color: var(--warn); } .cw-duerow.booked b, .cw-duerow.ok .cw-dlate { color: var(--ok); }
/* Draft 10.92: tab badges and the Schedule tab in the call window (Chris, 2026-10-11) */
.cw-tabs button .badge { margin-left: 6px; vertical-align: 1px; }
.callwork .mhead .namerow .chip.alert { font-size: 12px; }
.cw-schedhint { margin: 0; }
/* Draft 10.93: predetermination cards get a 2px colour border all the way round, no top strip (Chris, 2026-10-11) */
.tcard.pdcard, .pdcards .tcard.pdcard { border: 2px solid var(--g); }
.pdcards .tcard.pdcard.pd-waiting { --g: #b7791f; } .pdcards .tcard.pdcard.pd-approved { --g: #1d6fd1; } .pdcards .tcard.pdcard.pd-rejected { --g: var(--bad); } .pdcards .tcard.pdcard.pd-selfpay, .pdcards .tcard.pdcard.pd-proposed { --g: var(--warn); } /* the status colours were being overridden by the grey default */
/* Draft 10.94: the cards in a row are all the same height, footer and button along the bottom (Chris, 2026-10-11) */
.visitrow { align-items: stretch; } .visitrow .visitcard .visit-f { margin-top: auto; }
.cw-flipdate { font-size: 14px; }
/* Draft 10.95: patient look-up on the hygiene, dentist and assistant homes (Chris, 2026-10-11) */
.hyg-main > .fdsearch { margin-bottom: 12px; } .hyg-main > .fdsearch .fdq { font-size: 15px; padding: 3px 0; } .fdhits .fdh-none { padding: 10px 14px; }
.cw-tabbody .xrays { min-width: 0; }
/* Draft 10.97: the text window opens over the mini record, which stays open (Chris, 2026-10-11) */
.modal.popchild { position: fixed; right: 28px; bottom: 28px; width: min(440px, calc(100vw - 32px)); max-height: 82vh; overflow: auto; z-index: 3; box-shadow: 0 18px 50px rgba(0,0,0,.28); }
.popchild .th-who { display: flex; flex-direction: column; } .popchild .th-who b { font-size: 17px; }
.pdficon.lnk { display: inline-grid; place-items: center; background: var(--accent); color: #fff; } .pdficon.lnk .ic { width: 14px; height: 14px; }
.msgpopcard > .row.gap { flex-wrap: wrap; } .msgpopcard > .row.gap > button { white-space: nowrap; }
/* Draft 10.98: the mini record's bottom bar is the phone: reason, live call, outcome (Chris, 2026-10-11) */
.cw-foot.cw-reasonbox { display: grid; gap: 8px; } .cw-foot .cw-rz { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } .cw-foot .cw-rz .rz { padding: 7px 10px; font-size: 13px; }
.cw-foot.cw-endedbox .cw-rz { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cw-foot.cw-reasonbox, .cw-foot.cw-endedbox { grid-template-columns: minmax(0, 1fr); justify-content: stretch; }
/* Draft 11.00: book with nothing planned; the Queue sits beside the visits on the mini record's Schedule tab (Chris, 2026-10-11) */
.visit.add.freebook { font: inherit; cursor: pointer; text-align: center; color: var(--accent); } .visit.add.freebook:hover { border-color: var(--accent); background: var(--accent-soft); }
.modal.freebookm, .popchild:has(.fb-types) { width: min(460px, calc(100vw - 32px)); }
.fb-types { display: grid; gap: 8px; margin: 4px 0 10px; } .fb-type { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; text-align: left; padding: 10px 12px; border-radius: 10px; background: var(--panel); font: inherit; cursor: pointer; }
.fb-type.on { box-shadow: 0 0 0 3px var(--accent-soft); background: var(--accent-soft); } .fb-len { align-items: center; margin-bottom: 12px; }
.cw-barrow { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 10px; align-items: stretch; margin: 8px 0 6px; } .cw-barrow > .visitbar { margin: 0; } .cw-barrow > .movebar { margin: 0; width: auto; max-width: none; display: flex; flex-direction: column; gap: 6px; } .cw-barrow > .movebar .moverow { flex-direction: column; flex-wrap: nowrap; overflow-y: auto; max-height: 260px; }
.cw-foot.live:has(.cw-inreason) { display: grid; grid-template-columns: minmax(0, 1fr) auto; } .cw-inreason { grid-column: 1 / -1; display: grid; gap: 6px; }
.visitcard.freearm { border: 2px dashed var(--accent); background: color-mix(in srgb, var(--accent-soft) 60%, var(--panel)); cursor: default; } .freearm .fa-bub { background: var(--accent-soft); color: var(--accent); } .freearm .vminctl { display: inline-flex; align-items: center; gap: 6px; }
/* Ledger invoices: colour on the label tag only; old completed invoices collapse to one row (Chris, 2026-10-11, Draft 11.03) */
.invoice .inv-lines thead th { background: var(--panel2); color: var(--muted); }
.invoice.shut { padding: 10px 16px; gap: 0; }
.invoice.shut .inv-tot b { font-size: 17px; }
.inv-tog { min-width: 84px; }
/* Book with nothing planned in the Visits to book bar, the size of a visit card (Chris, 2026-10-11, Draft 11.04) */
.visitrow .visit.add.freebook { min-width: 230px; max-width: 320px; flex: 0 0 auto; justify-content: center; align-items: center; border: 2px dashed var(--line); background: var(--panel); }
.visitrow .visit.add.freebook:hover { border-color: var(--accent); background: var(--accent-soft); }
/* Outreach banner along the bottom of the mini record when no call is in place (Chris, 2026-10-11, Draft 11.06) */
.cw-foot.cw-needs { display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; border: 2px solid var(--call, #2aa84a); }
.cw-needs .cw-needs-t { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.cw-needs .cw-needs-t b { font-size: 16px; }
.cw-needs .cw-arrow { font-size: 22px; line-height: 1; width: 40px; height: 40px; padding: 0; border-radius: 999px; flex: 0 0 auto; }
/* Outreach banner arrows in the banner's green; no Text booking link there (Chris, 2026-10-11, Draft 11.07) */
.cw-needs .cw-arrow { background: var(--call, #2aa84a); color: #fff; border: 2px solid var(--call, #2aa84a); font-weight: 700; font-size: 28px; padding-bottom: 3px; }
.cw-needs .cw-arrow:hover:not(:disabled) { background: color-mix(in srgb, var(--call, #2aa84a) 85%, #000); }
.cw-needs .cw-arrow:disabled { background: var(--panel); color: var(--muted); border-color: var(--line); opacity: .7; }
/* Compact booking boxes over the schedule in the mini record, so the schedule gets the room (Chris, 2026-10-11, Draft 11.08) */
.cw-barrow { grid-template-columns: minmax(0, 1fr) 170px; gap: 8px; margin: 6px 0 4px; }
.cw-barrow > .visitbar { padding: 6px 10px; }
.cw-barrow > .visitbar > .row:first-child .muted.sm { display: none; }
.cw-barrow > .visitbar > .row:first-child b { font-size: 13px; }
.cw-barrow .visitrow { flex-wrap: nowrap; overflow-x: auto; gap: 8px; margin-top: 4px; padding-bottom: 2px; }
.cw-barrow .visitrow .visit.visitcard { min-width: 168px; max-width: 220px; flex: 0 0 auto; padding: 6px 8px; gap: 3px; font-size: 12px; }
.cw-barrow .visitrow .visit-h { font-size: 12px; gap: 4px; } .cw-barrow .visitrow .visit-h .muted, .cw-barrow .visitrow .visit-h small { font-size: 11px; }
.cw-barrow .visitrow .bubbles { gap: 4px; } .cw-barrow .visitrow .bubble { padding: 2px 8px; font-size: 11px; min-height: 0; }
.cw-barrow .visitrow .visit-f { font-size: 11px; padding-top: 3px; }
.cw-barrow .visitrow .vc-book { margin-top: 3px; padding: 3px 8px; font-size: 12px; min-height: 0; }
.cw-barrow .visitrow .visit.add.freebook { min-width: 120px; max-width: 140px; padding: 6px; font-size: 12px; }
.cw-barrow > .movebar { padding: 6px 8px; font-size: 12px; } .cw-barrow > .movebar p, .cw-barrow > .movebar .muted { font-size: 11px; }
.callwork .cw-barrow .visitrow .visit .bubble { padding: 3px 9px; min-height: 0; gap: 4px; } .callwork .cw-barrow .visitrow .visit .bubble b { font-size: 12px; } .callwork .cw-barrow .visitrow .visit .bubble small { font-size: 10px; }
.callwork .cw-barrow .visitrow .visit-h { flex-wrap: nowrap; white-space: nowrap; min-width: 0; } .callwork .cw-barrow .visitrow .visit-h > .muted { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.callwork .cw-barrow > .visitbar > .row:first-child { display: none; } .callwork .cw-barrow .visitrow { margin-top: 0; } /* the name is already in the window header */
/* Booking in the mini record: a taller window and the schedule fills it, so the whole day shows (Chris, 2026-10-11, Draft 11.09) */
.modal.callwork:has(.cw-flipgrid) { height: min(1060px, calc(100vh - 24px)); max-height: calc(100vh - 24px); }
.modal.callwork:has(.cw-flipgrid) > .cw-scroll { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.modal.callwork .cw-flipgrid { flex: 1 1 auto; max-height: none; min-height: 0; }
.modal.callwork:has(.cw-flipgrid) { padding-top: 12px; gap: 8px; } .modal.callwork:has(.cw-flipgrid) .cw-barrow { margin: 4px 0; }
/* Nothing planned: its own solid slate perimeter and a tag inside (Chris, 2026-10-11, Draft 11.10) */
:root { --np: #56697a; }
.visitcard.freearm, .visitrow .visit.visitcard.freearm { border: 2px solid var(--np); background: var(--panel); cursor: grab; }
.visitcard.freearm:active { cursor: grabbing; }
.freearm .fa-bub { background: color-mix(in srgb, var(--np) 14%, var(--panel)); color: var(--np); }
.np-tag { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--np); color: var(--np); background: color-mix(in srgb, var(--np) 10%, var(--panel)); white-space: nowrap; margin-left: auto; }
.visit-h .sw { flex: 0 0 auto; } .freearm .visit-h b { white-space: nowrap; }
.callwork .cw-barrow .freearm .visit-f { flex-wrap: nowrap; white-space: nowrap; gap: 6px; } .callwork .cw-barrow .freearm .vminctl button { padding: 2px 6px; min-height: 0; font-size: 11px; }
/* Outreach done: the finished person stays on screen in grey, with Undo and Next in the banner (Chris, 2026-10-11, Draft 11.10) */
.modal.callwork:has(.cw-donebar) > :not(.cw-foot) { filter: grayscale(1); opacity: .55; transition: filter .2s, opacity .2s; }
.modal.callwork:has(.cw-donebar) { background: color-mix(in srgb, var(--panel2, #eef1f4) 70%, var(--panel)); }
.cw-foot.cw-donebar { border-color: var(--line); background: var(--panel); }
.cw-donebar .cw-donecheck { width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; background: var(--panel2, #eef1f4); color: var(--muted); font-weight: 700; font-size: 20px; flex: 0 0 auto; }
.cw-donebar .cw-undo { font-weight: 600; }
.cw-donebar .cw-arrow { background: var(--call, #2aa84a); color: #fff; border: 2px solid var(--call, #2aa84a); font-weight: 700; font-size: 28px; padding-bottom: 3px; }
/* Cleaning and exam rows share one set of columns so the dates line up (Chris, 2026-10-11, Draft 11.12) */
.cw-duecard ul { grid-template-columns: 70px max-content max-content 1fr; column-gap: 14px; }
.cw-duecard ul.plain li.cw-duerow { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; column-gap: 14px; align-items: baseline; }
.cw-duecard .cw-duerow small { grid-column: 4; text-align: right; }
/* Alligator tooth game on the clinic website (Chris, 2026-10-11, Draft 11.14) */
.ws-gatorsec { text-align: center; } .ws-gatorsec .ws-lead { margin-left: auto; margin-right: auto; }
.ws-gator { max-width: 560px; margin: 8px auto 0; }
.gator { width: 100%; height: auto; display: block; overflow: visible; }
.gator .g-shadow { fill: rgba(0, 0, 0, .08); }
.gator .g-skin { fill: #4a9d5b; stroke: #2f6e3c; stroke-width: 3; stroke-linejoin: round; }
.gator .g-belly { fill: #cfe6a8; } .gator .g-tongue { fill: #e58b9a; } .gator .g-mouth { fill: #b9475b; }
.gator .g-bumps { fill: none; stroke: #2f6e3c; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.gator .g-eyeball { fill: #fffbe6; stroke: #2f6e3c; stroke-width: 3; } .gator .g-pupil { fill: #1d2a1f; } .gator .g-lid { fill: #4a9d5b; stroke: #2f6e3c; stroke-width: 3; transform-box: fill-box; transform-origin: center bottom; transform: scaleY(.35); transition: transform .15s; }
.gator .g-nostril { fill: #2f6e3c; }
.gator .gtu { fill: #fff; stroke: #c9c9c9; stroke-width: 1.5; }
.gator .gt { cursor: pointer; transition: transform .12s; } .gator .gt path { fill: #fff; stroke: #bdbdbd; stroke-width: 2; stroke-linejoin: round; }
.gator .gt:hover path, .gator .gt:focus-visible path { fill: #fff6d6; stroke: #e2b33c; } .gator .gt:focus-visible { outline: none; }
.gator .gt.down { transform: translateY(14px); pointer-events: none; } .gator .gt.down path { fill: #ecebe4; }
.gator .g-jaw { transform-box: view-box; transform-origin: 112px 154px; transform: rotate(-30deg); transition: transform .14s cubic-bezier(.7, -0.4, .8, 1.3); }
.gator.snap .g-jaw { transform: rotate(0deg); } .gator.snap .g-lid { transform: scaleY(1); }
.gator.shake { animation: gatorShake .4s ease-in-out 2; }
@keyframes gatorShake { 0%, 100% { transform: translateX(0) } 25% { transform: translateX(-6px) rotate(-1deg) } 75% { transform: translateX(6px) rotate(1deg) } }
.ws-gatormsg { margin-top: 10px; font-size: 18px; min-height: 1.5em; } .ws-gatormsg b { color: #c0392b; font-size: 22px; letter-spacing: .04em; }
@media (prefers-reduced-motion: reduce) { .gator .g-jaw, .gator .gt { transition: none; } .gator.shake { animation: none; } }
.site .ws-gatorsec .ws-lead, .ws-gatorsec p.ws-lead { margin-left: auto; margin-right: auto; text-align: center; } .gator .gt:focus { outline: none; } .gator .gt:focus-visible path { stroke-width: 3; }
.ws-gatorsec .ws-lead { margin: 10px auto 16px !important; }
/* Office photo at the top of the website (Chris, 2026-10-11, Draft 11.15) */
.ws-office { padding: 24px 40px 0; } .ws-office figure { position: relative; margin: 0 auto; max-width: 960px; border-radius: 24px; overflow: hidden; box-shadow: 0 12px 32px rgba(10, 40, 45, .16); }
.ws-office img { display: block; width: 100%; aspect-ratio: 16 / 7; object-fit: cover; object-position: center 45%; }
.ws-office figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; padding: 28px 24px 16px; color: #fff; background: linear-gradient(to top, rgba(8, 30, 34, .78), rgba(8, 30, 34, 0)); }
.ws-office figcaption b { font-size: 22px; } .ws-office figcaption span { font-size: 15px; opacity: .92; }
.ws-office + .ws-gatorsec { padding-top: 40px; }
@container (max-width: 560px) { .ws-office { padding: 12px 12px 0; } .ws-office figure { border-radius: 16px; } .ws-office img { aspect-ratio: 4 / 3; } .ws-office figcaption b { font-size: 17px; } .ws-office figcaption { padding: 20px 14px 10px; } }
/* The office photo replaces the drawn hero picture (Chris, 2026-10-11, Draft 11.16) */
.ws-hero-photo img { display: block; width: 100%; aspect-ratio: 5 / 3.6; object-fit: cover; object-position: center 45%; }
/* Website redesign: full-width office photo hero, trust bar, alligator game card (Chris, 2026-10-12, Draft 11.17) */
.ws-hero2 { position: relative; display: flex; align-items: center; min-height: 620px; padding: 64px 40px 104px; overflow: hidden; background: #0d3a40; }
.ws-hero2-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; }
.ws-hero2::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(7, 34, 40, .9) 0%, rgba(7, 34, 40, .78) 34%, rgba(7, 34, 40, .2) 62%, rgba(7, 34, 40, 0) 78%); }
.ws-hero2-in { position: relative; z-index: 2; max-width: 560px; color: #fff; }
.ws-hero2 .ws-kicker { color: #9fe3e6; }
.ws-hero2 h1 { color: #fff; font-size: 48px; line-height: 1.08; letter-spacing: -0.02em; }
.ws-hero2-in > p { font-size: 18px; color: #dcecee; margin: 18px 0 26px; }
.ws-btn.glass { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .7); backdrop-filter: blur(4px); } .ws-btn.glass:hover { background: rgba(255, 255, 255, .26); }
.ws-hero2 .ws-next { background: rgba(255, 255, 255, .96); border-color: transparent; box-shadow: 0 10px 28px rgba(0, 0, 0, .25); }
.ws-trustbar { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: -44px 40px 0; background: #fff; border-radius: 20px; box-shadow: 0 14px 36px rgba(19, 48, 58, .14); overflow: hidden; }
.ws-trustbar > div { display: flex; align-items: center; gap: 14px; padding: 20px 22px; } .ws-trustbar > div + div { border-left: 1px solid var(--wl); }
.ws-trustbar .ic { flex: none; width: 26px; height: 26px; color: var(--wt); } .ws-trustbar span { display: flex; flex-direction: column; } .ws-trustbar small { color: var(--wm); font-size: 14px; }
.ws-gatorsec { text-align: left; padding-top: 56px; padding-bottom: 16px; }
.ws-gatorcard { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 28px; align-items: center; padding: 32px 36px; border-radius: 28px; background: linear-gradient(135deg, #eef8ee 0%, #e8f4f4 100%); border: 2px solid #cfe6c9; }
.ws-gatorsec .ws-gatortxt .ws-lead, .site .ws-gatorsec .ws-gatortxt p.ws-lead { margin: 10px 0 14px !important; text-align: left; }
.ws-gatortxt .ws-kicker { color: #2f6e3c; } .ws-gatortxt h2 { font-size: 32px; line-height: 1.15; }
.ws-gatortxt .ws-gatormsg { margin: 0 0 14px; }
.ws-gatorpic .ws-gator { max-width: none; margin: 0; }
.ws-sec#ws-new h2, .ws-sec#ws-visit h2 { font-size: 32px; }
@container (max-width: 900px) { .ws-hero2 h1 { font-size: 40px; } .ws-gatorcard { grid-template-columns: 1fr; text-align: center; } .ws-gatorsec .ws-gatortxt .ws-lead, .site .ws-gatorsec .ws-gatortxt p.ws-lead { margin: 10px auto 14px !important; text-align: center; } .ws-gatorcard { display: flex; flex-direction: column; align-items: center; gap: 0; } .ws-gatortxt { display: contents; } .ws-gatortxt .ws-kicker { order: 1; margin-bottom: 8px; } .ws-gatortxt h2 { order: 2; } .ws-gatortxt .ws-lead { order: 3; } .ws-gatorpic { order: 4; width: 100%; } .ws-gatortxt .ws-gatormsg { order: 5; margin: 12px 0 10px; } .ws-gatortxt .ws-link { order: 6; } }
@container (max-width: 560px) {
  .ws-hero2 { flex-direction: column; align-items: stretch; min-height: 0; padding: 0; background: #0d3a40; }
  .ws-hero2-img { position: static; height: 230px; object-position: 62% 40%; }
  .ws-hero2::before { display: none; }
  .ws-hero2-in { padding: 24px 16px 64px; max-width: none; }
  .ws-hero2 h1 { font-size: 30px; } .ws-hero2-in > p { font-size: 16px; }
  .ws-trustbar { grid-template-columns: 1fr; margin: -40px 16px 0; } .ws-trustbar > div { padding: 14px 16px; } .ws-trustbar > div + div { border-left: 0; border-top: 1px solid var(--wl); }
  .ws-gatorsec { padding-top: 32px; } .ws-gatorcard { padding: 22px 16px; border-radius: 20px; } .ws-gatortxt h2 { font-size: 26px; }
  .ws-sec#ws-new h2, .ws-sec#ws-visit h2 { font-size: 26px; }
}
/* Sleek website (Chris, 2026-10-12, Draft 11.18): one Book button, Dr. Holladay's story, quieter sections */
.ws-hero2 { min-height: 640px; padding: 64px 56px; }
.ws-hero2 h1 { font-size: 52px; max-width: 520px; }
.ws-hero2-in > p { font-size: 19px; margin: 16px 0 28px; }
.ws-cta { align-items: center; gap: 20px; }
.ws-herotel { color: #fff; text-decoration: none; font-weight: 600; opacity: .9; } .ws-herotel:hover { opacity: 1; text-decoration: underline; }
.ws-head { padding: 16px 56px; }
.ws-sec { padding: 88px 56px; }
.ws-bio { display: flex; flex-direction: column; gap: 72px; }
.ws-bio-row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 56px; align-items: center; max-width: 1180px; margin: 0 auto; width: 100%; }
.ws-bio-row.flip .ws-bio-pic { order: 2; }
.ws-bio-pic { margin: 0; border-radius: 22px; overflow: hidden; box-shadow: 0 20px 44px rgba(19, 48, 58, .16); }
.ws-bio-pic img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.ws-bio-row.flip .ws-bio-pic img { aspect-ratio: 4 / 3; object-position: 35% 60%; }
.ws-bio-txt h2 { font-size: 38px; letter-spacing: -0.015em; margin: 4px 0 18px; } .ws-bio-txt h3 { font-size: 28px; margin: 4px 0 14px; }
.ws-bio-txt p { color: var(--wm); font-size: 18px; line-height: 1.7; margin: 0 0 14px; max-width: 520px; }
.ws-gatorsec { padding: 0 56px 88px; }
.ws-gatorcard { max-width: 1180px; margin: 0 auto; border: 0; background: #f2f8f3; }
.ws-visit2 { background: var(--wsand); } .ws-visit2 h2 { font-size: 32px; max-width: 1180px; margin: 0 auto; }
.ws-visit2 .ws-visit { max-width: 1180px; margin: 28px auto 0; } .ws-visit2 .ws-visit > div { border: 0; box-shadow: 0 6px 20px rgba(19, 48, 58, .06); }
.ws-addr { color: var(--wk) !important; line-height: 1.6; }
.ws-foot-links a { color: #cfe0e3; text-decoration: none; } .ws-foot-links a:hover { color: #fff; text-decoration: underline; }
@container (max-width: 900px) { .ws-bio-row, .ws-bio-row.flip { grid-template-columns: 1fr; gap: 28px; } .ws-bio-row.flip .ws-bio-pic { order: 0; } .ws-bio { gap: 56px; } }
@container (max-width: 560px) {
  .ws-head { padding: 10px 16px; } .ws-sec { padding: 48px 16px; } .ws-gatorsec { padding: 0 16px 48px; } .ws-bio { gap: 44px; }
  .ws-hero2 { padding: 0; } .ws-hero2 h1 { font-size: 30px; } .ws-hero2-in { padding: 24px 16px 32px; }
  .ws-cta { flex-direction: column; align-items: stretch; gap: 12px; } .ws-herotel { text-align: center; }
  .ws-bio-txt h2 { font-size: 28px; } .ws-bio-txt h3 { font-size: 22px; } .ws-bio-txt p { font-size: 16px; }
  .ws-visit2 h2 { font-size: 26px; }
}
.ws-bio-row.flip .ws-bio-pic img { aspect-ratio: 1 / 1; object-position: 18% 50%; }
.ws-visit2 .ws-visit { align-items: start; }
.ws-foot { padding: 32px 56px; }
@container (max-width: 560px) { .ws-foot { padding: 24px 16px; } .ws-bio-row.flip .ws-bio-pic img { aspect-ratio: 4 / 3; object-position: 12% 60%; } }
@container (max-width: 400px) { .ws-head { gap: 8px; } .ws-logo { gap: 6px; } }
/* Tooth logo replaces the cross (Chris, 2026-10-12, Draft 11.19) */
.ws-head .ws-mark { width: 34px; height: 34px; border-radius: 0; background: none; color: var(--wt); }
.ws-head .ws-mark svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linejoin: round; }
.bk-main .bk-code { margin-top: 8px; }
@container (max-width: 560px) { .ws-head .ws-mark, .ws-head .ws-mark svg { width: 28px; height: 28px; } }
/* Online booking pop-up: the whole day shows, no scroll bar (Chris, 2026-10-12, Draft 11.21) */
.op-sched.fitday { max-height: none; overflow: visible; }
.op-sched.tight .dblock { padding-top: 1px; padding-bottom: 1px; font-size: 12px; line-height: 1.2; overflow: hidden; } .op-sched.tight .dblock .dtype { display: none; }
.op-sched.tight .ds-colh { padding: 2px 0; }
/* App logo: the same outlined tooth as the website (Chris, 2026-10-12) */
.brand .mark { background: none; color: var(--accent); border-radius: 0; }
.brand .mark svg, .pbrand .pmark svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linejoin: round; display: block; }
.pbrand .pmark { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; color: inherit; }
/* Prescription favourites + My preferences (Chris, 2026-10-12, Draft 11.22) */
.modal .rx-foot { margin-top: 10px; display: flex; justify-content: flex-end; }
.linkish { border: 0; background: none; color: var(--accent); font: inherit; font-weight: 600; padding: 0; cursor: pointer; } .linkish:hover { text-decoration: underline; }
.rxform label.check { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.pf-sec { display: flex; flex-direction: column; gap: 10px; min-width: min(560px, 90vw); }
ul.plain.pf-list { display: flex; flex-direction: column; gap: 8px; margin: 0; }
ul.plain.pf-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel2); }
ul.plain.pf-list li > div:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; } ul.plain.pf-list li.pf-edit { display: block; }
.pf-form { padding: 12px; border: 2px solid var(--accent); border-radius: 12px; background: var(--panel); }
/* Today bubble at the end of the Last cleanings line (Chris, 2026-10-12, Draft 11.24) */
.hcard .cdate.ctoday { font-weight: 700; box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px currentColor; margin: 0 4px; }
.hcard .cdate.ctoday.c-none { background: var(--panel2); color: var(--muted); border: 1px solid var(--line); box-shadow: none; }
.hcard .cdate.ctoday.c-blue { border: 1px solid; }
/* Call bar on the full record: bigger and louder while a call is live (Chris, 2026-10-12, Draft 11.25) */
.cw-strip { font-size: 15px; padding: 10px 12px 10px 10px; gap: 12px; }
.cw-strip.live { background: var(--ok); border-color: var(--ok); color: #fff; padding: 12px 16px 12px 12px; font-size: 17px; box-shadow: 0 12px 34px rgba(0,0,0,.28); animation: cwStripPulse 1.8s ease-in-out infinite; }
.cw-strip.live b, .cw-strip.live .timer { color: #fff; } .cw-strip.live .timer { font-size: 18px; }
.cw-strip.live .dot { background: #fff; box-shadow: 0 0 0 5px rgba(255,255,255,.3); animation: cwDot 1.2s ease-in-out infinite; }
.cw-strip.live .back, .cw-strip.live .ghost { background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.6); }
.cw-strip.live .danger { background: #fff; color: var(--bad); border-color: #fff; font-weight: 700; padding-left: 16px; padding-right: 16px; }
.cw-strip.live .x { color: #fff; }
@keyframes cwStripPulse { 0%, 100% { box-shadow: 0 12px 34px rgba(0,0,0,.28), 0 0 0 0 color-mix(in srgb, var(--ok) 45%, transparent); } 50% { box-shadow: 0 12px 34px rgba(0,0,0,.28), 0 0 0 10px color-mix(in srgb, var(--ok) 0%, transparent); } }
@keyframes cwDot { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .cw-strip.live, .cw-strip.live .dot { animation: none; } }
.cw-strip.live { flex-wrap: nowrap; white-space: nowrap; }

/* Draft 11.26 (Chris, 2026-10-12): legacy account on the Ledger tab, view only, never part of the balance */
.legacy { margin-top: 14px; border: 2px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--panel); }
.legacy.shut { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; }
.legacy-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.legacy-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.legacy-sum > div { border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; display: flex; flex-direction: column; gap: 1px; } .legacy-sum small { color: var(--muted); font-size: 11px; } .legacy-sum b { font-size: 15px; } .legacy-sum .owe { border-color: var(--warn); } .legacy-sum .owe b { color: var(--warn); }
.legacy-scroll { max-height: 360px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.legacy-scroll table { width: 100%; } .legacy-scroll th { position: sticky; top: 0; background: var(--panel); }
.legacy tr.lg-payment td, .legacy tr.lg-adjustment td { color: var(--muted); }

/* Draft 11.28 (Chris, 2026-10-12): every treatment plan drawn like the Planned work card, big planned date, older plans greyed until Make active */
.plancard { background: var(--panel); border: 2px solid var(--line); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.plancard.current { border-color: var(--accent); } .plancard.over { background: var(--accent-soft); }
.plancard.old { opacity: .5; filter: grayscale(.7); } .plancard.old.active { opacity: 1; filter: none; border-style: dashed; border-color: var(--muted); } .plancard.old.finished { opacity: .6; }
.plancard.old.active .visit-h .mv { margin-left: auto; padding: 2px 8px; white-space: nowrap; } .plancard.old.active .bubble.grab:hover { outline: 2px solid var(--accent); outline-offset: 1px; }
.plangrid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 1140px; align-items: start; }
.plangrid2 .visits { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.pc-h { display: flex; flex-direction: column-reverse; align-items: stretch; gap: 6px; } .pc-h > .row { justify-content: flex-end; } .pc-h > .row:empty { display: none; } .pc-date { min-width: 0; }
.pc-date { display: flex; flex-direction: column; gap: 2px; } .plan-date { font-size: 26px; font-weight: 700; line-height: 1.1; white-space: nowrap; }
.planner .plancard .qmap { margin: 0; } .plancard .visits { margin-top: 2px; }
.plancard.old .visit[draggable] { cursor: grab; } .plancard.old .visit .bubble:not(.grab) { cursor: default; }
@media (max-width: 760px) { .plangrid2 { grid-template-columns: 1fr; } }

/* Appointment types editor (Draft 11.31, Chris 2026-10-12): the office's categories, editable with colours */
.attbl td { vertical-align: middle; } .attbl .mt-1 { margin-top: 4px; } .attbl .chk { display: inline-flex; align-items: center; gap: 6px; } .attbl input.atname { width: 100%; min-width: 160px; } .attbl input.atcodes { width: 100%; min-width: 150px; }
.atpal { display: flex; gap: 4px; flex-wrap: wrap; } .atpal .sw { width: 18px; height: 18px; cursor: pointer; border-width: 2px; } .atpal .sw.on { outline: 2px solid var(--fg); outline-offset: 2px; transform: scale(1.15); } .atpal .sw[disabled] { cursor: default; }
.attbl .atchip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-weight: 600; border: 2px solid; white-space: nowrap; }

/* Inactive recare status (Draft 11.32) */
.statuschip.rcoff { border-color: var(--amber-t); color: var(--amber-t); background: var(--amber); } .rcoffcard { margin-top: 12px; } .rcoffcard .linkbtn { background: none; border: 0; padding: 0; color: inherit; cursor: pointer; text-align: left; }

/* Recare code lists (Draft 11.33) */
.rccodes-wrap { margin-bottom: 12px; } .rccodes-wrap .grid2 { margin-top: 8px; } .rccode-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.rccode { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border-radius: 999px; border: 2px solid var(--accent); font-size: 13px; } .rccode b { font-weight: 700; } .rccode small { color: var(--muted); max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rccode.unk { border-style: dashed; border-color: var(--muted); } .rccode .x { font-size: 15px; padding: 0 2px; }
.rccode-in { width: 190px; }

/* Draft 11.34 (2026-10-12): one message window header everywhere; teeth not yet erupted; phone extension chip */
.msgpopcard .th-who { display: flex; flex-direction: column; text-align: left; } .msgpopcard .th-who b { font-size: 18px; } .msgpopcard .th-who small { color: var(--muted); }
.od.uner { background: transparent; color: var(--muted); border: 1.5px dashed var(--muted); opacity: .7; }
.extchip { display: inline-block; font-size: 11.5px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); margin-left: 4px; }
.exts input.w4 { width: 58px; } .exts input.sm, .exts select.sm { font-size: 13px; padding: 3px 6px; }
.cw-foot .cw-collapse { border-radius: 999px; }
.dcard.exts { grid-column: span 2; } .exttbl { width: 100%; border-collapse: collapse; font-size: 13px; } .exttbl th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; padding: 4px 4px; } .exttbl td { padding: 3px 4px; vertical-align: middle; } .exttbl input.sm, .exttbl select.sm { width: 100%; font-size: 13px; padding: 3px 6px; } .exttbl input.w4 { width: 56px; }
@media (max-width: 900px) { .dcard.exts { grid-column: auto; } }

/* Draft 11.35 (2026-10-12): History tab (existing-work map, restorative history) and Documents tab */
.exquick { align-items: center; } .histgap { height: 12px; }
/* Draft 11.44 (2026-10-13): the History badge was .wk, which also matched the week schedule wrapper (.calgrid.wk) and shrank the expanded week to a 500px inline block (Chris). Renamed .wsrc */
.wsrc { display: inline-block; font-size: 9.5px; line-height: 13px; padding: 0 4px; border-radius: 4px; font-weight: 600; letter-spacing: .01em; }
.wsrc.ex { background: #e3f0ff; color: #1a56c4; border: 1px dashed #1a56c4; } .wsrc.us { background: #e6f4ea; color: #1e7b34; border: 1px solid #1e7b34; } .wsrc.more { background: var(--panel); color: var(--muted); border: 1px solid var(--line); }
.histcard { margin-top: 12px; } .histlist { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.histlist li { display: flex; align-items: center; gap: 10px; padding: 4px 6px; border-radius: 6px; font-size: 13.5px; } .histlist li:hover { background: var(--panel2); }
.histlist li.yr { font-weight: 700; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; margin-top: 6px; } .histlist li.yr:hover { background: transparent; }
.histlist li > b { min-width: 24px; } .histlist li > span:not(.wsrc) { flex: 1; } .histlist .wsrc { min-width: 34px; text-align: center; }
.doctbl td { vertical-align: middle; } .doctbl tr.void { opacity: .55; } .doctbl tr.void .link { text-decoration: line-through; } .doctbl .link svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 2px; }
.doctbl .x.sm { margin-left: 6px; } .docform { display: flex; flex-direction: column; gap: 10px; }

/* Draft 11.35: every call is the strip; mini-record tray; keypad chip */
.cw-strip.callstrip { max-width: calc(100vw - 32px); } .cw-strip.callstrip .cs-rz { display: inline-flex; gap: 6px; flex-wrap: wrap; } .cw-strip.callstrip .sim-note { position: static; font-size: 10px; margin-left: 4px; opacity: .7; }
.cw-strip.callstrip.ringing { border-color: var(--accent); } .cw-strip.callstrip .pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); animation: cwDot 1.2s ease-in-out infinite; }
.cw-strip.callstrip.outcome, .cw-strip.callstrip.reason { border-color: var(--fg); }
.cw-strip.live .cs-rz .ghost { background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.6); } .cw-strip.live .chip.sm { background: rgba(255,255,255,.2); color: #fff; border-color: transparent; }
.minitray { position: fixed; left: 16px; bottom: 16px; z-index: 69; display: flex; flex-direction: column; gap: 6px; max-width: 320px; }
.minicard { display: flex; align-items: center; gap: 2px; background: var(--panel); border: 2px solid var(--call); border-radius: 999px; padding: 3px 6px 3px 3px; box-shadow: 0 10px 28px rgba(0,0,0,.18); font-size: 13px; }
.minicard.oncall { border-color: var(--ok); } .minicard .mc-open { display: flex; align-items: center; gap: 8px; background: none; border: 0; padding: 2px 4px 2px 2px; cursor: pointer; color: var(--fg); text-align: left; }
.minicard .mc-open > span:last-child { display: flex; flex-direction: column; line-height: 1.15; } .minicard .mc-open small { color: var(--muted); } .minicard .avatar.sm { width: 28px; height: 28px; font-size: 11px; }
.cw-min { border-radius: 999px; } .dialchip { cursor: pointer; display: inline-flex; align-items: center; gap: 4px; } .dialchip .dp-ic { width: 14px; height: 14px; }
@media (max-width: 900px) { .minitray { max-width: 200px; } .minicard .mc-open small { display: none; } }

/* Draft 11.36 (2026-10-12): the mature ledger: payment methods, adjustments, voids, audit trail */
.paygrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 6px 0 12px; } .paybtn { padding: 14px 10px; font-size: 15px; border-radius: 10px; }
.adjform, .docform { display: flex; flex-direction: column; gap: 10px; }
.txns { margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 8px; } .txns ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.txns li { display: flex; align-items: center; gap: 10px; font-size: 13px; flex-wrap: wrap; } .txns li > span:not(.tk) { flex: 1; color: var(--muted); } .txns li.voided > b, .txns li.voided > span:not(.tk) { text-decoration: line-through; opacity: .6; }
.tk { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel2); }
.tk-payment .tk, .tk.tk-payment { background: #e6f4ea; color: #1e7b34; border-color: #1e7b34; } .tk-writeoff .tk, .tk.tk-writeoff, .tk-courtesy .tk, .tk.tk-courtesy, .tk-correction .tk, .tk.tk-correction { background: #fff4e5; color: #9a5b00; border-color: #d99a3a; }
.tk-refund .tk, .tk.tk-refund, .tk.tk-void { background: #fde8e8; color: #a12a2a; border-color: #c94444; }
.tiles4 { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 12px; } .tiles4 .tile b { display: block; font-size: 26px; margin: 2px 0; } .tiles4 .tile small { text-transform: uppercase; letter-spacing: .05em; font-size: 11px; color: var(--muted); font-weight: 600; } .tile.warn { border-color: var(--warn); }
.audtbl td { vertical-align: top; } .audtbl tr.voided td { opacity: .6; } .audtbl tr.voided td:nth-child(5) { text-decoration: line-through; } .audtbl tr.big td { background: #fff8ee; }
@media (max-width: 1100px) { .tiles4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Draft 11.36: treatment cards in groups; a wait covers particular work */
.tsec { margin-top: 18px; } .tsec-h { display: flex; align-items: center; gap: 10px; font-size: 17px; margin: 0 0 2px; } .tsec-h .gchip { font-weight: 800; font-size: 14px; width: 26px; height: 26px; display: inline-grid; place-items: center; border-radius: 8px; border: 2px solid currentColor; } .tsec-h small { font-weight: 400; font-size: 12.5px; }
.tsec.trgN .tsec-h .gchip { color: #1e7b34; } .tsec.trgR .tsec-h .gchip { color: #0e7c86; } .tsec.trgO .tsec-h .gchip { color: #9a5b00; } .tsec.trgL .tsec-h .gchip { color: #a12a2a; } .tsec.trgW .tsec-h .gchip { color: #6b3fa0; }
.tc-work i.waiting { border-style: dashed; opacity: .75; } .waititems { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; } .waititems .chk { display: flex; gap: 6px; align-items: center; font-size: 13.5px; }

/* Draft 11.37 (2026-10-12): rules for the year, retail at checkout, users & roles with former staff, Watch card */
.rulelist li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--line); } .rulelist li > div { display: flex; flex-direction: column; } .ruleform { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.coretail { margin-top: 8px; } .coretail .ghost b { font-weight: 600; margin-left: 4px; }
.users .uname { width: 120px; } .former { margin-top: 14px; } .users td { vertical-align: top; }
.watchcard { margin-top: 12px; } .watchlist li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--line); flex-wrap: wrap; } .watchlist li:last-child { border-bottom: 0; }
.wtooth { font-weight: 800; font-size: 20px; min-width: 52px; } .wtooth small { font-size: 12px; margin-left: 2px; color: var(--muted); } .wbody { flex: 1; display: flex; flex-direction: column; min-width: 180px; } .watchform { display: flex; flex-direction: column; gap: 10px; }
.watchform .w4, .retail .w4 { width: 70px; }

/* Incoming calls steal focus (Chris, 2026-10-12): thick pulsing green perimeter on the window that rings, a big ringing bar otherwise */
@keyframes ringwin { 0%, 100% { box-shadow: 0 0 0 7px var(--ok), 0 0 0 16px color-mix(in srgb, var(--ok) 35%, transparent), 0 24px 70px rgba(0,0,0,.35); } 50% { box-shadow: 0 0 0 9px var(--ok), 0 0 0 26px color-mix(in srgb, var(--ok) 0%, transparent), 0 24px 70px rgba(0,0,0,.35); } }
.modal.ringing { animation: ringwin 1.1s ease-in-out infinite; border-color: var(--ok); }
.cw-foot.ringfoot { border-top: 3px solid var(--ok); background: color-mix(in srgb, var(--ok) 14%, var(--panel)); } .cw-foot.ringfoot .cw-call-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 20px; color: #1f8f3c; } .cw-foot.ringfoot .cw-call-head small { font-size: 13px; }
.cw-foot.ringfoot .pulse, .cw-strip.callstrip.ringing.big .pulse { width: 14px; height: 14px; border-radius: 50%; background: var(--ok); animation: pulse 1.1s ease-in-out infinite; }
.cw-foot .cw-answer { border-radius: 999px; padding: 12px 28px; font-weight: 700; font-size: 16px; background: var(--ok); border-color: var(--ok); }
.ring-others { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.cw-strip.callstrip, .cw-strip.ringnote { width: max-content; } /* a fixed bar centred with left:50% otherwise only gets half the screen to lay out in and wraps */
.cw-strip.callstrip.ringing.big { padding: 14px 18px; font-size: 17px; border: 4px solid var(--ok); background: color-mix(in srgb, var(--ok) 12%, var(--panel)); animation: ringwin 1.1s ease-in-out infinite; } .cw-strip.callstrip.ringing.big .primary { padding: 10px 24px; font-size: 16px; border-radius: 999px; }
.cw-strip.ringnote { bottom: 76px; border-color: var(--line); font-size: 13px; padding: 6px 12px; color: var(--muted); box-shadow: 0 6px 18px rgba(0,0,0,.12); } .cw-strip.ringnote b { color: var(--fg); } .cw-strip.ringnote svg { width: 16px; height: 16px; }
.phonechip { cursor: pointer; }
.um-ringto { display: grid; gap: 4px; padding: 6px 10px 8px; font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 4px 0; } .um-ringto select { width: 100%; }
.usermenu button[role="menuitem"].on { background: color-mix(in srgb, var(--warn) 14%, transparent); }
.nc-head .nc-av { background: var(--panel2); color: var(--muted); font-size: 22px; }
.nc-blank { border-style: dashed; opacity: .65; } .nc-blank p { margin: 6px 0 0; }
.nc-search .nc-row { margin-top: 8px; } .nc-search .ncq { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 15px; padding: 8px 6px; } .nc-hits { margin-top: 6px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.ringtbl td:first-child { font-weight: 600; } .ringtbl small.warn { color: var(--warn); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .modal.ringing, .cw-strip.callstrip.ringing.big { animation: none; } }

/* Mini records as windows (Chris, 2026-10-12): side by side, binder tabs on the right edge, pop out to another monitor */
.scrim.floating.centre { place-items: center; padding: 16px; }
.scrim.floating.centre .modal.callwork { box-shadow: 0 24px 70px rgba(10,16,24,.35), 0 0 0 1px var(--line); }
.modal.floatmini { z-index: 48; box-shadow: 0 16px 48px rgba(10,16,24,.22), 0 0 0 1px var(--line); filter: saturate(.92); }
.modal.floatmini::after { content: 'Behind · tap to bring to the front'; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); font-size: 11px; color: var(--muted); background: var(--panel2); border-radius: 999px; padding: 1px 10px; pointer-events: none; }
.modal.floatmini > .mhead { cursor: grab; }
.modal.floatmini.fm-out { outline: 2px dashed var(--warn); outline-offset: -2px; }
.binder { position: fixed; right: 0; top: 270px; z-index: 69; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; max-height: calc(100vh - 140px); overflow: visible; }
.btab { display: flex; flex-direction: column; align-items: center; gap: 4px; background: var(--panel); border: 2px solid var(--accent); border-right: 0; border-radius: 12px 0 0 12px; box-shadow: -6px 6px 18px rgba(0,0,0,.14); padding: 8px 4px 4px; width: 46px; transition: width .15s, transform .15s; }
.btab:hover { transform: translateX(-4px); }
.btab .bt-open { display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; padding: 0; cursor: pointer; color: var(--fg); }
.btab .bt-av { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; font-size: 11px; display: grid; place-items: center; }
.btab .bt-name { writing-mode: vertical-rl; font-weight: 600; font-size: 13px; max-height: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btab .bt-kind { writing-mode: vertical-rl; font-size: 11px; color: var(--warn); font-weight: 700; letter-spacing: .02em; }
.btab .bt-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent); }
.btab .x.sm { font-size: 14px; padding: 0 6px; }
.btab.recare, .btab.treatment { border-color: var(--warn); border-style: dashed; background: color-mix(in srgb, var(--warn) 9%, var(--panel)); } .btab.recare .bt-av, .btab.treatment .bt-av { background: var(--warn); }
.btab.treatment { border-color: var(--accent); } .btab.treatment .bt-av { background: var(--accent); } .btab.treatment .bt-kind { color: var(--accent); }
.btab.oncall { border-color: var(--ok); }
body.popout #app { display: none; } body.popout .scrim.floating.centre { padding: 0; background: var(--bg); pointer-events: auto; } body.popout .modal.callwork, body.popout .modal.callwork:has(> .cw-scroll) { width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; box-shadow: none; }
body.popout .cw-min, body.popout .cw-pop, body.popout .binder, body.popout .floatmini, body.popout .toasts { display: none !important; }
/* Proportions hold on wide or short screens (Chris, 2026-10-12): the page stops growing past 1800px, and the puzzle and wheel follow the screen height instead of the width */
.shell.noside > main { max-width: 1800px; width: 100%; margin: 0 auto; box-sizing: border-box; }
.ow-grid.v4 .pz-wrap .pz-board { width: min(100%, calc(58vh * 4 / 3)); margin: 0 auto; }
.ow-grid.v4 .ow-left .ow-wheel { width: min(100%, 58vh); margin-left: auto; margin-right: auto; display: block; }

/* Office routines (Chris, 2026-10-13): time clock, sterilization sheet, end of day, lab tracker */
.hcard.clockcard { grid-column: 1 / -1; } .clockrow { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 6px; } .clockstate { display: grid; gap: 2px; } .clockstate b { font-size: 20px; } .clockbtn { border-radius: 999px; padding: 12px 28px; font-size: 16px; font-weight: 700; } .hcard.clockcard.in { border-color: var(--ok); }
.tcstats { margin-bottom: 14px; } .tctbl tr.off td { color: var(--muted); background: var(--panel2); } .tctbl tr.missing td:first-child { color: var(--warn); } .tctbl tr.today td { background: color-mix(in srgb, var(--ok) 8%, transparent); } .tctbl input[type=time] { width: 110px; } .tctbl tfoot td { border-top: 2px solid var(--line); }
.sterile-sheet { background: #fff; color: #111; border: 1px solid var(--line); border-radius: 12px; padding: 18px 22px; margin-top: 10px; } .st-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-bottom: 2px solid #111; padding-bottom: 8px; margin-bottom: 12px; } .st-head b { font-size: 18px; }
.st-grid { display: grid; gap: 18px; grid-template-columns: 1fr; } .st-grid.n2 { grid-template-columns: 1fr 1fr; } .st-grid.n3, .st-grid.n4 { grid-template-columns: repeat(2, 1fr); }
.st-chair h2 { font-size: 16px; margin: 0 0 8px; } .st-chair h2 small { font-weight: 400; color: #555; margin-left: 6px; }
.st-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: stretch; border: 1.5px solid #333; border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; break-inside: avoid; }
.st-appt { display: grid; gap: 2px; align-content: start; } .st-appt b { font-size: 15px; } .st-name { font-weight: 600; font-size: 15px; } .st-appt small { color: #444; font-size: 12px; }
.st-stickers { display: grid; grid-template-columns: repeat(3, 34mm); grid-auto-rows: 16mm; gap: 3px; position: relative; padding-bottom: 12px; } .st-stickers i { display: block; border: 1px dashed #888; border-radius: 3px; background: #fafafa; } .st-stickers small { position: absolute; bottom: -2px; right: 2px; font-size: 9px; color: #777; text-transform: uppercase; letter-spacing: .06em; }
.st-foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 14px; padding-top: 8px; border-top: 1px solid #999; font-size: 12px; color: #333; }
@media print { body.printing-sheet > *:not(#app) { display: none !important; } body.printing-sheet .noprint, body.printing-sheet .top, body.printing-sheet .daysheet, body.printing-sheet .backbar, body.printing-sheet .toasts { display: none !important; } body.printing-sheet main { padding: 0; max-width: none; } body.printing-sheet .sterile-sheet { border: 0; border-radius: 0; padding: 0; margin: 0; } body.printing-sheet .st-grid.n2, body.printing-sheet .st-grid.n3, body.printing-sheet .st-grid.n4 { grid-template-columns: 1fr 1fr; } }
.hcard.dayend { grid-column: 1 / -1; border-color: var(--fg); } .de-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px; margin-top: 8px; } @media (max-width: 1000px) { .de-grid { grid-template-columns: 1fr; } }
ul.plain.de-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 0; font-size: 14px; } .de-list li.ok { color: var(--muted); } .de-list li.ok .de-mark { color: var(--ok); font-weight: 700; } .de-list li.todo .de-mark { color: var(--warn); font-size: 16px; } .de-list li.todo span:nth-child(2) { font-weight: 600; }
.de-reports { display: grid; gap: 8px; align-content: start; border-left: 1px solid var(--line); padding-left: 18px; } .de-btns { display: flex; flex-wrap: wrap; gap: 6px; } .de-close { justify-self: start; border-radius: 999px; padding: 10px 22px; font-weight: 700; }
@media (max-width: 1000px) { .de-reports { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 10px; } }
.cashgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .cashgrid div { border: 1.5px solid var(--line); border-radius: 10px; padding: 10px; display: grid; gap: 2px; } .cashgrid small { color: var(--muted); } .cashgrid b { font-size: 20px; } .de-diff { font-weight: 600; } .de-diff.ok { color: var(--ok); } .de-diff.bad { color: var(--bad); }
.modal.dayrep .pdfm { min-height: 200px; } .depslip { display: grid; gap: 10px; }
.labtrack { border-color: #b8860b; margin-bottom: 14px; } .labtbl tr.overdue td { background: color-mix(in srgb, var(--bad) 8%, transparent); } .labtbl tr.arrived td { background: color-mix(in srgb, var(--ok) 8%, transparent); } .labtbl tr.duetoday td { background: color-mix(in srgb, var(--warn) 10%, transparent); }
.labfields { grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; } .lab-line { margin: 2px 0 0; }

/* Sterilization sheet = one letter-size portrait page, made as a PDF then printed (Chris, 2026-10-13) */
.pdfstage { background: #525659; border-radius: 12px; padding: 18px; display: grid; place-items: start center; overflow: auto; }
.pdfstage.onpage { margin-top: 10px; max-height: 78vh; }
.stpaper { width: 8.5in; height: 11in; box-sizing: border-box; padding: 0.4in; background: #fff; color: #111; box-shadow: 0 6px 24px rgba(0,0,0,.35); font: 10pt/1.25 var(--font); overflow: hidden; flex: none; }
.pdfstage .stpaper { zoom: .8; } @media (min-height: 1100px) { .pdfstage .stpaper { zoom: 1; } }
.pp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; border-bottom: 1.5pt solid #111; padding-bottom: 4pt; margin-bottom: 4pt; height: 0.4in; box-sizing: border-box; } .pp-head b { font-size: 14pt; } .pp-head span { font-size: 9pt; color: #333; text-align: right; }
.pp-chair { font-weight: 700; font-size: 11pt; height: 0.3in; display: flex; align-items: flex-end; gap: 6px; padding-bottom: 2pt; box-sizing: border-box; } .pp-chair small { font-weight: 400; color: #555; font-size: 9pt; }
.pp-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8pt; align-items: center; height: var(--rowh); border-bottom: 0.75pt solid #999; box-sizing: border-box; } .pp-row.empty { color: #777; }
.pp-appt { display: grid; grid-template-columns: 0.62in minmax(0, 1fr); column-gap: 6pt; align-items: baseline; min-width: 0; overflow: hidden; } .pp-appt b { grid-row: span 2; font-size: 10pt; } .pp-name { font-weight: 700; font-size: 10pt; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pp-appt small { font-size: 8pt; color: #444; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-slots { display: grid; grid-template-columns: repeat(6, var(--slotw)); gap: 3pt; } .pp-slots i { display: block; height: var(--sloth); border: 0.75pt dashed #777; border-radius: 2pt; }
.pdfchip { border-color: var(--bad); color: var(--bad); font-weight: 600; }
.modal.sheetpdf { width: min(980px, 96vw); max-height: 94vh; } .modal.sheetpdf .pdfstage { max-height: calc(94vh - 110px); }
@media print { @page { size: letter portrait; margin: 0; }
  body.printing-paper #app, body.printing-paper .toasts, body.printing-paper .popstack, body.printing-paper .cw-strip, body.printing-paper .minitray, body.printing-paper .binder { display: none !important; }
  body.printing-paper .scrim { position: static; background: none; padding: 0; display: block; } body.printing-paper .modal.sheetpdf { box-shadow: none; width: auto; max-height: none; overflow: visible; padding: 0; border-radius: 0; } body.printing-paper .modal.sheetpdf > :not(.pdfstage) { display: none !important; }
  body.printing-paper .pdfstage { background: none; padding: 0; border-radius: 0; display: block; overflow: visible; } body.printing-paper .stpaper { zoom: 1; box-shadow: none; } }

.stpaper.tight .pp-appt { grid-template-columns: 0.7in auto minmax(0, 1fr); } .stpaper.tight .pp-appt b { grid-row: auto; } .stpaper.tight .pp-name, .stpaper.tight .pp-appt b { font-size: 8.5pt; } .stpaper.tight .pp-appt small { font-size: 7.5pt; }
@media print { html, body { height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; } body.printing-paper .stpaper { height: 10.95in; page-break-after: avoid; break-after: avoid; } body.printing-paper #overlay > :not(.scrim) { display: none !important; } }

.pp-appt { grid-template-columns: 0.8in minmax(0, 1fr); } .pp-appt b { white-space: nowrap; }
@media print { html:has(body.printing-paper), body.printing-paper { background: #fff !important; height: 11in !important; overflow: hidden !important; }
  body.printing-paper * { visibility: hidden !important; } body.printing-paper #overlay .stpaper, body.printing-paper #overlay .stpaper * { visibility: visible !important; }
  body.printing-paper #overlay .stpaper { position: fixed !important; left: 0; top: 0; margin: 0; zoom: 1; box-shadow: none; } }

/* Draft 11.46 (2026-10-14): What counts as an exam / a cleaning, redrawn (Chris: "make this look nicer") */
.rcc-lead { margin: 6px 0 10px; font-size: 13.5px; }
.rcc-hows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.rcc-how { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 2px; align-items: start; align-content: start; padding: 10px 12px; border-radius: var(--r); background: var(--panel2); }
.rcc-howk { grid-row: span 2; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--accent); color: var(--accent-fg); }
.rcc-how b { font-size: 13.5px; } .rcc-how small { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.rcc-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); gap: 14px; align-items: stretch; } /* the cleaning list is four times longer, so it gets more width */
.rcc-col { --tone: var(--accent); --tone-soft: var(--accent-soft); border: 2px solid var(--tone); border-radius: var(--r); padding: 14px 16px; background: var(--panel); min-width: 0; display: flex; flex-direction: column; }
.rcc-col.exam { --tone: var(--purple-t); --tone-soft: var(--purple); } .rcc-col.clean { --tone: var(--pink-t); --tone-soft: var(--pink); }
.rcc-colhead { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; margin-bottom: 6px; }
.rcc-colhead h3 { margin: 0 0 2px; font-size: 15.5px; color: var(--tone); } .rcc-colhead p { margin: 0; }
.rcc-num { flex: none; text-align: center; background: var(--tone-soft); color: var(--tone); border-radius: var(--r); padding: 6px 12px; line-height: 1.1; }
.rcc-num b { display: block; font-size: 22px; font-variant-numeric: tabular-nums; } .rcc-num small { font-size: 11px; }
.rcc-grp { margin-top: 12px; } .rcc-col > .rcc-grp:nth-last-child(2) { margin-bottom: 14px; } .rcc-grph { display: flex; align-items: center; gap: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.rcc-grph small { font-size: 11px; font-weight: 600; background: var(--panel2); border-radius: 999px; padding: 0 7px; letter-spacing: 0; }
.rcc-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; }
.rcc-row { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 10px; border-radius: 8px; background: var(--tone-soft); min-width: 0; }
.rcc-row b { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--tone); flex: none; } .rcc-row span { flex: 1; min-width: 0; font-size: 13px; line-height: 1.3; }
.rcc-row .x { flex: none; width: 22px; height: 22px; border-radius: 50%; font-size: 15px; line-height: 1; padding: 0; opacity: .35; } .rcc-row:hover .x, .rcc-row .x:focus-visible { opacity: 1; } .rcc-row .x:hover { background: var(--panel); color: var(--bad); }
.rcc-row.unk { background: transparent; border: 1px dashed var(--muted); } .rcc-row.unk b { color: var(--muted); } .rcc-row.unk span { color: var(--muted); font-style: italic; }
.rcc-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; margin-bottom: 0; padding-bottom: 0; padding-top: 12px; border-top: 1px dashed var(--line); } .rcc-add input { width: 200px; }
.rcc-prev { font-size: 12.5px; color: var(--tone); } .rcc-prev.unk { color: var(--muted); font-style: italic; }
@media (max-width: 1100px) { .rcc-hows, .rcc-cols { grid-template-columns: 1fr; } }

/* Draft 11.47 (2026-10-14): Visits between exams rule card (Administration → Appointment types & rules) */
.socard.sooff .so-visits { opacity: .55; }
.so-visits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 10px 0; }
.so-visit { border-radius: var(--r); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.so-visit.exam { border: 2px solid var(--purple-t); background: var(--purple); } .so-visit.btw { border: 2px solid var(--pink-t); background: var(--pink); }
.so-visit > b { font-size: 13.5px; } .so-visit.exam > b { color: var(--purple-t); } .so-visit.btw > b { color: var(--pink-t); }
.so-codes { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; } .so-codes b { font-variant-numeric: tabular-nums; margin-right: 4px; }
.so-codes .off { text-decoration: line-through; opacity: .5; }
.so-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }

/* Draft 11.48 (2026-10-14): New patient exams card (Administration → Appointment types & rules) */
.npe-bands { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 10px 0; }
.npe-band { border: 2px solid var(--green-t); background: var(--green); border-radius: var(--r); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.npe-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; } .npe-top > b { color: var(--green-t); font-size: 13.5px; }
.npe-ages { font-size: 13px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .npe-ages input { width: 56px; }
.npe-code { display: flex; flex-direction: column; font-size: 12.5px; line-height: 1.3; } .npe-code b { font-size: 15px; font-variant-numeric: tabular-nums; }

/* Draft 11.48 (2026-10-14): Hygiene appointment length card redrawn (Chris: "make this look nicer too") */
.hrx-ladders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 10px 0 16px; align-items: start; }
.hrx-ladder { --tone: var(--purple-t); --tone-soft: var(--purple); border: 2px solid var(--tone); border-radius: var(--r); padding: 10px 12px 6px; min-width: 0; }
.hrx-ladder.new { --tone: var(--green-t); --tone-soft: var(--green); }
.hrx-lh { display: block; color: var(--tone); font-size: 13.5px; margin-bottom: 6px; }
.hrx-step { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 0; border-top: 1px solid var(--line); }
.hrx-step:first-of-type { border-top: 0; }
.hrx-age { font-size: 13px; } .hrx-min { display: inline-flex; align-items: center; gap: 5px; } .hrx-min small { color: var(--muted); font-size: 12px; }
.hrx-in { width: 58px; text-align: center; font-variant-numeric: tabular-nums; padding: 4px 6px; }
.hrx-ladder .hrx-in { background: var(--tone-soft); border-color: transparent; color: var(--tone); font-weight: 700; }
.hrx-sub { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
.hrx-rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hrx-rule { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; padding: 9px 12px; border-radius: var(--r); background: var(--panel2); }
.hrx-rule.off { opacity: .55; }
.hrx-n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--accent); color: var(--accent-fg); }
.hrx-rt { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .hrx-rt b { font-size: 13.5px; }
.hrx-rule p { margin: 2px 0 0; font-size: 13px; line-height: 1.7; color: var(--fg); } .hrx-rule p .hrx-in { margin: 0 2px; }
.hrx-sw { position: relative; display: inline-block; width: 34px; height: 20px; flex: none; cursor: pointer; } .hrx-sw input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.hrx-sw i { position: absolute; inset: 0; border-radius: 999px; background: var(--line); transition: background .15s; pointer-events: none; }
.hrx-sw i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
.hrx-sw input:checked + i { background: var(--accent); } .hrx-sw input:checked + i::after { transform: translateX(14px); }
.hrx-sw input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; } .hrx-sw input:disabled { cursor: default; }
.rulesgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; } .rulesgrid .rcol { display: flex; flex-direction: column; gap: 14px; min-width: 0; } @media (max-width: 900px) { .rulesgrid { grid-template-columns: 1fr; } } /* two columns of stacked cards, so a tall card leaves no gap beside it (max 2 per row) */
.npe-title { color: var(--green-t); font-size: 13.5px; } .npe-ages { min-height: 30px; }
/* Draft 11.49 (2026-10-14): units-to-minutes and add-ons inside the Hygiene appointment length card */
.hrx-ladder.hrx-uu { --tone: var(--blue-t); --tone-soft: var(--blue); } .hrx-ladder.hrx-aa { --tone: var(--amber-t); --tone-soft: var(--amber); }
.hrx-note { margin: -4px 0 8px; } .hrx-foot { margin: 6px 0 4px; }

/* Draft 11.50 (2026-10-14): one Clinical rules card (Chris: "consolidate everything above appointment types into one neatly laid out card") */
.rxc { padding: 18px 22px 6px; margin-bottom: 18px; }
.rxc-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-bottom: 6px; }
.rxc-sec { display: grid; grid-template-columns: minmax(200px, 270px) minmax(0, 1fr); gap: 28px; padding: 18px 0; border-top: 1px solid var(--line); }
.rxc-head .rxc-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .rxc-head b { font-size: 15px; }
.rxc-head p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.rxc-body { min-width: 0; }
.rxc-kvs { display: flex; flex-direction: column; gap: 6px; }
.rxc-kv { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 8px 12px; border-radius: var(--r); background: var(--panel2); }
.rxc-kv > span { font-weight: 600; font-size: 13px; } .rxc-kv > div { font-size: 13px; line-height: 1.9; }
.rxc .npe-bands { margin: 0; } .rxc-note { margin: 8px 0 0; }
.rxc-ladders { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: start; }
.rxc-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rxc-between.sooff .so-visits { opacity: .55; } .rxc .so-visits { margin: 0 0 10px; max-width: 760px; }
@media (max-width: 1400px) { .rxc-ladders { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .rxc-sec { grid-template-columns: 1fr; gap: 10px; } .rxc-rules { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .rxc-ladders, .rxc .npe-bands, .rxc .so-visits { grid-template-columns: 1fr; } .rxc-kv { grid-template-columns: 1fr; gap: 2px; } }

/* Draft 11.51 (2026-10-14): Calling rules card under What counts as an exam (Administration → Recare) */
.rcr { margin-bottom: 12px; }
.rcr-all { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 10px 0 14px; }
.rcr-all > div { padding: 10px 12px; border-radius: var(--r); background: var(--panel2); } .rcr-all b { font-size: 13.5px; } .rcr-all p { margin: 4px 0 0; font-size: 13px; line-height: 1.8; }
.rcr-table { display: flex; flex-direction: column; gap: 8px; }
.rcr-row { display: grid; grid-template-columns: minmax(200px, 1.1fr) repeat(3, minmax(0, 1.3fr)); gap: 10px; align-items: stretch; padding: 10px; border: 2px solid var(--g, var(--line)); border-radius: var(--r); }
.rcr-row.rcr-headrow { border: 0; padding: 0 12px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; color: var(--muted); }
.rcr-who { display: flex; gap: 10px; align-items: flex-start; } .rcr-who .gletter { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--g); color: #fff; font-weight: 700; }
.rcr-who b { font-size: 14px; } .rcr-who p { margin: 2px 0 0; font-size: 13px; line-height: 1.8; color: var(--muted); }
.rcr-cell { padding: 8px 10px; border-radius: 8px; background: var(--panel2); min-width: 0; } .rcr-cell.off { opacity: .6; }
.rcr-ch { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; color: var(--muted); }
.rcr-cell p { margin: 4px 0 0; font-size: 13px; line-height: 1.9; } .rcr-sel { font-size: 12.5px; padding: 3px 6px; max-width: 100%; }
@media (max-width: 1200px) { .rcr-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rcr-who { grid-column: 1 / -1; } .rcr-row.rcr-headrow { display: none; } }
@media (max-width: 800px) { .rcr-all, .rcr-row { grid-template-columns: 1fr; } }
/* Make a recommendation (Chris, 2026-10-14) */
.modal.rcmwin { width: 520px; max-width: calc(100vw - 32px); }
.rcmwin textarea { width: 100%; }
.rcm-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.rcm-card { border: 2px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--panel); display: flex; flex-direction: column; gap: 8px; }
.rcm-text { margin: 0; font-size: 15px; line-height: 1.45; }
.rcm-ans { margin: 0; } .rcm-ans input { width: 100%; }
.modal .rcm-list { max-height: 60vh; overflow: auto; }
.rcm-shots { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rcm-thumb { position: relative; display: inline-block; }
.rcm-thumb img { height: 72px; max-width: 140px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); display: block; }
.rcm-thumb .x { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%; background: var(--panel); border: 1px solid var(--line); font-size: 14px; line-height: 1; padding: 0; }
.rcm-shot { height: 90px; max-width: 200px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); cursor: zoom-in; }
.rcm-shot.big { height: auto; max-width: 100%; width: 100%; object-fit: contain; cursor: zoom-out; }
.rcr-plan { grid-column: 1 / -1; font-size: 13px; line-height: 1.6; padding: 6px 10px; border-radius: 8px; background: color-mix(in srgb, var(--g, var(--accent)) 8%, transparent); }
/* Recare timelines (Chris, 2026-10-14) */
.rcr-all.rcr-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rcr-all .hrx-sw { vertical-align: middle; margin-right: 4px; }
.rtl { border: 2px solid var(--g, var(--line)); border-radius: var(--r); padding: 12px 14px; margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.rtl-head { display: flex; gap: 10px; align-items: flex-start; } .rtl-head .gletter { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--g); color: #fff; font-weight: 700; }
.rtl-head b { font-size: 14.5px; } .rtl-head p { margin: 2px 0 0; font-size: 13px; line-height: 1.8; color: var(--muted); }
.rtl-track { position: relative; height: 22px; margin: 4px 10px 0; }
.rtl-track::before { content: ''; position: absolute; left: 0; right: 0; top: 10px; height: 2px; background: var(--line); border-radius: 2px; }
.rtl-dot { position: absolute; top: 4px; width: 14px; height: 14px; border-radius: 50%; transform: translateX(-50%); border: 2px solid var(--panel); box-sizing: border-box; }
.rtl-text { background: var(--blue-t); } .rtl-call { background: var(--call); } .rtl-letter { background: var(--amber-t); }
.rtl-dot.rtl-fade { width: 10px; height: 10px; top: 6px; opacity: .55; }
.rtl-scale { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); margin: 0 4px; }
.rtl-steps { display: flex; flex-wrap: wrap; gap: 6px; align-items: stretch; }
.rtl-step { width: 190px; padding: 8px 10px; border-radius: 8px; background: var(--panel2); border: 2px solid var(--line); display: flex; flex-direction: column; gap: 5px; }
.rtl-step.rtl-k-text { border-color: var(--blue-t); } .rtl-step.rtl-k-call { border-color: var(--call); } .rtl-step.rtl-k-letter { border-color: var(--amber-t); } .rtl-step.rtl-then { border-style: dashed; }
.rtl-step p { margin: 0; font-size: 13px; line-height: 1.9; } .rtl-step small { font-size: 12px; } .rtl-step .rcr-sel { width: 100%; }
.rtl-sh { display: flex; justify-content: space-between; align-items: center; gap: 6px; } .rtl-sh b { font-size: 13px; } .rtl-sh .x { width: 22px; height: 22px; padding: 0; font-size: 15px; line-height: 1; }
.rtl-gap { align-self: center; font-size: 12px; color: var(--muted); white-space: nowrap; padding: 0 2px; }
.rtl-add { align-self: center; }
.rtl .rcr-plan { margin-top: 2px; }
@media (max-width: 800px) { .rcr-all.rcr-four { grid-template-columns: 1fr; } .rtl-step { width: 100%; } .rtl-gap { width: 100%; text-align: center; } }
.rtl-bubble { align-self: flex-end; max-width: 100%; background: #2f7bf6; color: #fff; border-radius: 14px 14px 4px 14px; padding: 7px 10px; font-size: 12.5px; line-height: 1.4; margin-top: 2px; }
.rtl-bfoot { align-items: center; } .rtl-bfoot .link { padding: 0; font-size: 12px; }
.rtl-edit { display: flex; flex-direction: column; gap: 6px; } .rtl-edit textarea { width: 100%; font-size: 13px; line-height: 1.4; } .rtl-edit small { font-size: 11.5px; line-height: 1.5; }
.rtl-step:has(.rtl-edit) { width: 300px; }
/* Texting campaigns, simpler layout (Chris, 2026-10-14) */
.txc-seg { flex: none; } .txc-intro { flex: 1 1 320px; margin: 0; }
.txc-h { margin: 18px 0 8px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.txc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.txc-card { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 2px solid var(--line); border-radius: var(--r); background: var(--panel); }
.txc-card.off { opacity: .6; } .txc-card b { font-size: 14.5px; }
.txc-when { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.txc-rc { align-self: flex-start; } .txc-card .rtl-bubble { max-width: 85%; font-size: 13.5px; }
.txc-card textarea { width: 100%; font: inherit; }
.txc-camps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.txc-camp { text-align: left; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 2px solid var(--line); border-radius: var(--r); background: var(--panel); }
.txc-camp.on { border-color: var(--accent); background: var(--accent-soft); } .txc-camp small { color: var(--muted); }
.rtl-bubble.sm { font-size: 12px; padding: 5px 9px; align-self: auto; display: inline-block; }
@media (max-width: 800px) { .txc-grid, .txc-camps { grid-template-columns: 1fr; } }
/* each group of automatic texts is its own coloured panel (Chris, 2026-10-14) */
.txc-sec { --gc: var(--accent); border: 2px solid var(--gc); border-radius: 14px; padding: 12px; margin-top: 16px; background: color-mix(in srgb, var(--gc) 7%, var(--bg, transparent)); }
.txc-booking { --gc: #0e7c86; } .txc-online { --gc: #2f7bf6; } .txc-remind { --gc: #b7791f; } .txc-forms { --gc: #6d4fc2; } .txc-billing { --gc: #2e8b57; } .txc-records { --gc: #6b7280; }
.txc-sh { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 2px 10px; }
.txc-tag { background: var(--gc); color: #fff; font-weight: 700; font-size: 14px; letter-spacing: .02em; padding: 4px 12px; border-radius: 999px; }
.txc-sec .txc-card { border-color: color-mix(in srgb, var(--gc) 35%, var(--line)); }
/* Confirmations timeline (Chris, 2026-10-14) */
.txc-confirm { --gc: #a8325a; } .txc-recare { --gc: #1f8a5b; } .txc-treat { --gc: #c2501f; }
.cfr { gap: 8px; } .cfr .rtl-step { flex: 1 1 0; min-width: 160px; width: auto; } .cfr .rtl-step.cf-off { opacity: .55; }
@media (max-width: 800px) { .cfr .rtl-step { width: 100%; } }
/* One patient's three years (Chris, 2026-10-14): channel lanes over the group bands, then the summary */
.rjo { border: 2px solid var(--line); border-radius: 12px; padding: 14px 16px; margin: 14px 0; background: var(--panel); }
.rjo-h { font-size: 15px; } .rjo p { margin: 2px 0 0; }
.rjo-chart { margin-top: 12px; }
.rjo-lane, .rjo-axis { display: grid; grid-template-columns: 92px 1fr; align-items: center; }
.rjo-lab { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--w); } .rjo-lab .ic { width: 16px; height: 16px; }
.rjo-text { --w: #2563eb; } .rjo-call { --w: var(--call); } .rjo-letter { --w: #4b7d5b; }
.rjo-tr { position: relative; height: 34px; margin: 0 14px; }
.rjo-lane + .rjo-lane .rjo-tr { border-top: 1px dashed var(--line); }
.rjo-band { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--g) 9%, transparent); border-left: 1px solid color-mix(in srgb, var(--g) 45%, transparent); }
.rjo-band b { display: none; }
.rjo-text .rjo-band b { display: block; position: absolute; top: -16px; left: 3px; font-size: 11px; color: var(--g); }
.rjo-text .rjo-tr { margin-top: 16px; }
.rjo-ic { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 22px; height: 22px; border-radius: 50%; background: var(--w); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--panel); z-index: 1; }
.rjo-ic .ic { width: 13px; height: 13px; stroke: #fff; fill: none; }
.rjo-axis .rjo-tr { height: 30px; border-top: 1px solid var(--muted); }
.rjo-tick { position: absolute; top: 0; transform: translateX(-50%); font-size: 11.5px; color: var(--muted); white-space: nowrap; padding-top: 8px; }
.rjo-tick i { position: absolute; top: -4px; left: 50%; width: 1px; height: 8px; background: var(--muted); }
.rjo-tick:first-child { transform: none; } .rjo-tick:first-child i { left: 0; } .rjo-tick:nth-child(2) { transform: translateX(-30%); } .rjo-tick:last-child { transform: translateX(-100%); } .rjo-tick:last-child i { left: auto; right: 0; }
.rjo-sum { margin-top: 10px; }
.rjo-tot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 14px; }
.rjo-n { display: inline-flex; align-items: center; gap: 4px; color: var(--w); font-weight: 600; font-size: 13px; } .rjo-n .ic { width: 15px; height: 15px; }
.rjo-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 10px; }
ul.plain.rjo-years li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; } .rjo-years li span { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
ul.plain.rjo-groups li { display: flex; justify-content: flex-start; gap: 10px; align-items: flex-start; padding: 6px 0; font-size: 13.5px; } .rjo-tal { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.rjo-groups .gchip, .rjo-all .gchip { flex: none; }
.rjo-all { margin-top: 10px; } .rjo-all summary { cursor: pointer; font-weight: 600; font-size: 13.5px; }
.rjo-all ol.plain li { display: grid; grid-template-columns: 26px 200px 30px 1fr; gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.rjo-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--w); display: grid; place-items: center; } .rjo-dot .ic { width: 13px; height: 13px; stroke: #fff; fill: none; }
@media (max-width: 800px) { .rjo-cols { grid-template-columns: 1fr; } .rjo-lane, .rjo-axis { grid-template-columns: 70px 1fr; } .rjo-all ol li { grid-template-columns: 26px 1fr 30px; } .rjo-all ol li > span:last-child { grid-column: 2 / -1; } }
.rjo-all ol.plain { list-style: none; margin: 6px 0 0; padding: 0; }
/* Drag, add and move on the three-year timeline (Chris, 2026-10-14) */
.rjo-live { margin: 8px 0 0; color: var(--muted); } .rjo-live.on { color: var(--text, inherit); font-weight: 600; }
.rjo-edit .rjo-lane .rjo-tr { cursor: copy; } .rjo-edit .rjo-ic { cursor: grab; touch-action: none; } .rjo-edit .rjo-ic:hover { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--w); }
.rjo-ic.drag { cursor: grabbing; z-index: 5; box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--w), 0 4px 10px rgba(0,0,0,.25); }
.rjo-ic.rjo-rm { background: #c0392b; opacity: .8; }
.rjo-ic.rjo-then { opacity: .75; }
.rjo-fib { margin-top: 10px; align-items: center; }
/* Tailored to each patient (Chris, 2026-10-14) */
.rcr-tailor { border: 2px solid #6d4fc2; border-radius: 12px; padding: 12px 14px; margin: 14px 0; background: var(--panel); }
.rcr-tailor > p { margin: 2px 0 8px; }
.rct-row { display: grid; grid-template-columns: 52px 1fr; gap: 10px; align-items: start; padding: 8px 0; border-top: 1px solid var(--line); }
.rct-row b { font-size: 14px; } .rct-row p { margin: 2px 0 0; font-size: 13px; line-height: 1.8; }
.rjo-who { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.rc-tail { display: block; margin-top: 3px; color: #6d4fc2; font-size: 12px; }
.rcr-intro { margin: 2px 0 4px; padding-left: 18px; font-size: 13.5px; color: var(--muted); line-height: 1.6; }
/* Calling rules lock (Chris, 2026-10-14) */
.rcr-unlocked { border: 2px solid #b7791f; color: #b7791f; background: color-mix(in srgb, #b7791f 10%, transparent); font-weight: 600; }
.rcr .rjo { margin-top: 6px; }
.rcr-fold { margin: 2px 0 4px; }
/* Recare groups A to E as one strip (Chris, 2026-10-14): solid 2px border all round in the group colour, arrows between */
.rcf { margin-bottom: 14px; }
.rcf-row { display: flex; align-items: stretch; gap: 4px; margin-top: 10px; }
.rcf-seg { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; text-align: left; font: inherit; color: var(--fg); background: var(--panel); border: 2px solid var(--g); border-radius: 12px; padding: 10px 12px; cursor: pointer; }
.rcf-seg:hover { box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.rcf-top { display: flex; align-items: center; gap: 8px; } .rcf-top b { font-size: 15px; }
.rcf-seg .gletter { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--g); color: #fff; font-weight: 700; font-size: 14px; flex: none; }
.rcf-n { font-size: 13px; color: var(--muted); } .rcf-n b { font-size: 26px; color: var(--fg); margin-right: 4px; line-height: 1.1; }
.rcf-ics { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; margin-top: 2px; }
.rcf-ic { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: #fff; }
.rcf-ic svg { width: 12px; height: 12px; } .rcf-ic { background: var(--w); }
.rcf-more { font-style: normal; color: var(--muted); font-weight: 700; }
.rcf-arrow { display: grid; place-items: center; color: var(--muted); flex: none; } .rcf-arrow svg { width: 16px; height: 16px; }
@media (max-width: 900px) { .rcf-row { flex-direction: column; } .rcf-arrow svg { transform: rotate(90deg); } }
.rcf-n em { display: block; font-style: normal; font-size: 13px; font-weight: 600; color: var(--g); }
.rcf-open { display: inline-flex; align-items: center; gap: 4px; margin-top: auto; padding-top: 4px; font-size: 12px; font-weight: 600; color: var(--g); } .rcf-open svg { width: 14px; height: 14px; }
/* How we're doing (Chris, 2026-10-14): today's standing, then what our outreach did */
.rcstatus { margin-bottom: 14px; } .rcstatus .mins.xs { width: 44px; }
.rst-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 6px 0 10px; }
.rst-t { display: flex; flex-direction: column; gap: 1px; text-align: left; font: inherit; color: var(--fg); background: var(--panel2); border: 0; border-radius: 10px; padding: 10px 12px; }
button.rst-t { cursor: pointer; } button.rst-t:hover { box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.rst-t b { font-size: 26px; line-height: 1.1; } .rst-t span { font-size: 13px; font-weight: 600; } .rst-t small { color: var(--muted); font-size: 12px; }
.rst-ring { flex-direction: row; align-items: center; gap: 10px; } .rst-ring > div { display: flex; flex-direction: column; gap: 1px; }
.rst-sub { margin-top: 2px; }
.rst-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; margin-bottom: 6px; }
.rst-two .rcs-row { margin-top: 6px; }
@media (max-width: 900px) { .rst-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rst-two { grid-template-columns: 1fr; } }
/* A to E as circles (Chris, 2026-10-14) */
.rcf-row:has(.rcf-c) { justify-content: space-between; align-items: center; }
.rcf-c { position: relative; flex: 0 1 150px; display: flex; flex-direction: column; align-items: center; gap: 8px; background: none; border: 0; padding: 4px; font: inherit; color: var(--fg); cursor: pointer; }
.rcf-c svg { width: 100%; max-width: 132px; aspect-ratio: 1; transform: rotate(-90deg); transition: transform .15s; }
.rcf-c:hover svg { transform: rotate(-90deg) scale(1.04); }
.rcf-track { fill: color-mix(in srgb, var(--g) 7%, transparent); stroke: color-mix(in srgb, var(--g) 18%, var(--line)); stroke-width: 9; }
.rcf-fill { fill: none; stroke: var(--g); stroke-width: 9; stroke-linecap: round; }
.rcf-mid { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); width: min(132px, calc(100% - 8px)); aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.rcf-mid b { font-size: 34px; line-height: 1; } .rcf-mid em { font-style: normal; font-weight: 700; font-size: 15px; color: var(--g); margin-top: 4px; }
.rcf-name { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; }
.rcf-c .gletter { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--g); color: #fff; font-weight: 700; font-size: 12px; }
@media (max-width: 900px) { .rcf-row:has(.rcf-c) { flex-direction: row; flex-wrap: wrap; justify-content: center; } .rcf-row:has(.rcf-c) .rcf-arrow { display: none; } .rcf-c { flex: 0 1 120px; } }
/* How we're doing as percent circles (Chris, 2026-10-14) */
.rst-circles { display: flex; justify-content: center; gap: 56px; flex-wrap: wrap; margin: 8px 0 14px; }
.rst-c { cursor: default; flex: 0 1 170px; text-align: center; } .rst-c:hover svg { transform: rotate(-90deg); }
.rst-c .rcf-mid b { font-size: 30px; color: var(--g); }
.rst-lab { font-weight: 600; font-size: 14px; line-height: 1.25; } .rst-c small { font-size: 12px; }
/* Texts, calls and mail as large icons (Chris, 2026-10-14) */
.rst-icons { display: flex; justify-content: space-around; gap: 16px; flex-wrap: wrap; margin-top: 10px; }
.rst-ico { flex: 0 1 150px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.rst-ico svg { width: 100%; max-width: 130px; height: auto; fill: var(--w); }
.rst-ico svg text { fill: #fff; font-size: 34px; font-weight: 700; text-anchor: middle; dominant-baseline: middle; }
.rst-ico .rst-cut { fill: rgba(255,255,255,.55); } .rst-ico .rst-flap { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 4; stroke-linejoin: round; }
.rst-ico small { font-size: 12px; }
/* Top of the Recare tab, not in a card (Chris, 2026-10-14) */
.rtop { margin: 0 0 18px; }
.rtop-five { display: flex; justify-content: space-around; align-items: flex-start; gap: 18px; flex-wrap: wrap; margin: 6px 0 18px; }
.rtop-five > * { flex: 0 1 160px; }
.rgb { display: flex; flex-direction: column; gap: 6px; max-width: 1100px; margin: 0 auto; }
.rgb-row { display: grid; grid-template-columns: 170px minmax(0, 1fr) 150px; gap: 12px; align-items: center; background: none; border: 0; padding: 5px 6px; border-radius: 8px; font: inherit; color: var(--fg); cursor: pointer; text-align: left; }
.rgb-row:hover { background: var(--panel2); }
.rgb-l { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.rgb-l .gletter { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--g); color: #fff; font-weight: 700; font-size: 12px; flex: none; }
.rgb-tr { height: 18px; background: color-mix(in srgb, var(--g) 12%, var(--line)); border-radius: 9px; overflow: hidden; } .rgb-tr i { display: block; height: 100%; background: var(--g); border-radius: 9px; }
.rgb-n { font-size: 13px; color: var(--muted); white-space: nowrap; } .rgb-n b { font-size: 16px; color: var(--g); margin-right: 4px; }
@media (max-width: 700px) { .rgb-row { grid-template-columns: 120px minmax(0, 1fr) auto; gap: 8px; } .rgb-n small { display: none; } .rtop-five > * { flex-basis: 140px; } }
.rgb-n small { font-size: 13px; }
/* How the bookings came in as split bars (Chris, 2026-10-14) */
.rvb { margin-top: 18px; --us: #1f8a5b; --bl: #8a94a3; }
.rvb-us { color: var(--us); } .rvb-blue { color: var(--bl); } .rgb-n b.rvb-us { color: var(--us); }
.rvb-row { cursor: default; } .rvb-row:hover { background: none; }
.rvb-tr { display: flex; height: 22px; border-radius: 11px; overflow: hidden; min-width: 40px; }
.rvb-tr i { display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 700; color: #fff; min-width: 22px; }
.rvb-tr i.us { background: var(--us); } .rvb-tr i.blue { background: var(--bl); }
.rvb-note { margin: 4px 6px 0; } .rvb .mins.xs { width: 44px; }
.fx-three + .callload { margin-top: 16px; } /* Daily call load inside The formula (Chris, 2026-10-14) */
/* Top of the Recare tab, visual pass (Chris, 2026-10-14: "can you make this better visually?") */
.rtop { max-width: 1320px; margin: 0 auto 22px; }
.rtop-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.rtop-head h2 { margin: 0 0 2px; font-size: 20px; } .rtop-head .muted { font-size: 13px; }
.rtop .rtop-five { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0 0 18px; background: var(--panel); border-radius: 16px; padding: 16px 8px 18px; }
.rtop .rtop-five > * { flex: none; }
.rtop-grp { display: flex; flex-direction: column; align-items: stretch; padding: 0 12px; } .rtop-ch { border-left: 1px solid var(--line); }
.rtop-cap { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-align: center; margin-bottom: 10px; }
.rtop-items { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; }
.rtop-item { display: grid; grid-template-rows: 124px auto auto; justify-items: center; align-content: start; text-align: center; gap: 3px; flex: none; }
.rtop-vis { position: relative; display: grid; place-items: center; width: 124px; height: 124px; }
.rtop-vis svg { width: 118px; height: 118px; max-width: none; }
.rst-c .rtop-vis svg { transform: rotate(-90deg); }
.rtop-pc { position: absolute; inset: 0; display: grid; place-items: center; font-size: 30px; color: var(--g); }
.rtop .rst-lab { font-size: 14px; font-weight: 700; margin-top: 6px; } .rtop-item small { font-size: 12px; line-height: 1.35; max-width: 170px; }
.rst-ico.rst-none svg { opacity: .35; }
.rtop-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.rtop-two .rgb { max-width: none; margin: 0; background: var(--panel); border-radius: 16px; padding: 14px 14px 12px; gap: 4px; }
.rtop-two .rvb { margin-top: 0; }
.rtop-two .rcs-h { font-size: 15px; }
.rtop-two .rgb > .row { margin-bottom: 6px; padding: 0 6px; }
.rtop-two .rgb-row { grid-template-columns: 150px minmax(0, 1fr) 46px 78px; gap: 10px; }
.rtop-two .rgb-n { display: contents; } .rtop-two .rgb-n b { text-align: right; margin: 0; font-size: 15px; } .rtop-two .rgb-n small { color: var(--muted); font-size: 12px; }
.rtop-two .rgb-tr { height: 14px; border-radius: 7px; } .rtop-two .rgb-tr i { border-radius: 7px; }
.rtop-two .rvb-tr { height: 20px; }
@media (max-width: 1100px) { .rtop .rtop-five { grid-template-columns: 1fr; } .rtop-ch { border-left: 0; border-top: 1px solid var(--line); padding-top: 14px; margin-top: 14px; } .rtop-two { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .rtop-items { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); } .rtop-two .rgb-row { grid-template-columns: 110px minmax(0, 1fr) 42px; } .rtop-two .rgb-n small { display: none; } }
/* The formula opens from a large gear at the top right of the Recare tab (Chris, 2026-10-14) */
.rtop-right { align-items: center; gap: 12px; }
.rtop-gear { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 0; background: none; color: var(--fg); cursor: pointer; padding: 0; }
.rtop-gear svg { width: 40px; height: 40px; transition: transform .3s; } .rtop-gear:hover { background: var(--panel); color: var(--accent); } .rtop-gear:hover svg { transform: rotate(45deg); }
/* A to E bars in one colour (Chris, 2026-10-14: "theres too much colour here") */
.rtop-two .rgb:not(.rvb) .rgb-row { --g: #0e7c86; }
.rtop-two .rgb:not(.rvb) .rgb-l .gletter { background: none; color: var(--fg); border: 1.5px solid var(--line); font-weight: 700; }
.rtop-two .rgb:not(.rvb) .rgb-tr { background: var(--panel2); }
.rtop-two .rgb:not(.rvb) .rgb-n b { color: var(--fg); }
.rtop-two .rvb { --us: #0e7c86; } .rtop-two .rvb .rgb-n b.rvb-us { color: var(--fg); } /* same single teal as A to E */
/* Administration → Patients graphs (Chris, 2026-10-14) */
.pg-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--panel); border-radius: 16px; padding: 16px 6px 14px; }
.pg-col { padding: 0 16px; display: flex; flex-direction: column; gap: 6px; } .pg-col + .pg-col { border-left: 1px solid var(--line); }
.pg-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 40px 22px; gap: 8px; align-items: center; font-size: 13px; --g: #0e7c86; }
.pg-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pg-row .rgb-tr { height: 10px; border-radius: 5px; background: var(--panel2); } .pg-row .rgb-tr i { border-radius: 5px; }
.pg-row b { text-align: right; font-size: 13px; } .pg-row small { color: var(--muted); text-align: right; }
.pg-split { display: flex; height: 26px; border-radius: 13px; overflow: hidden; font-size: 12px; font-weight: 700; color: #fff; margin-top: 2px; }
.pg-split span { display: grid; place-items: center; min-width: 34px; } .pg-a { background: #0e7c86; } .pg-b { background: #8a94a3; }
.pg-key { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-bottom: 8px; } .pg-key b { color: var(--fg); font-weight: 600; }
.pt-listhead { margin: 4px 0 8px; }
@media (max-width: 1000px) { .pg-three { grid-template-columns: 1fr; } .pg-col + .pg-col { border-left: 0; border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; } }
.rtop.pg { max-width: none; margin-bottom: 16px; }
/* Patient pickers inside a pop-up list their matches in the pop-up itself; a floating list was clipped by the pop-up edge (Chris 2026-10-14: "the search inside that button doesn't work") */
.modal .fdhits.waithits { position: static; box-shadow: none; max-height: 50vh; margin-top: 6px; }
/* Call flow / switchboard (Draft 11.89): steps on a dotted board, wires drawn in an SVG under them */
.sw-card { margin-bottom: 14px; }
.sw-board { overflow: auto; border-radius: 12px; border: 1px solid var(--line); background-color: var(--panel2); background-image: radial-gradient(circle, color-mix(in srgb, var(--muted) 45%, transparent) 1px, transparent 1.4px); background-size: 22px 22px; max-height: 760px; }
.sw-canvas { position: relative; min-width: 100%; }
.sw-wires { position: absolute; inset: 0 auto auto 0; pointer-events: none; overflow: visible; }
.sw-wire { fill: none; stroke: #6aa5ec; stroke-width: 2; } .sw-wire.hot { stroke: var(--accent); stroke-width: 3.5; }
.sw-node { position: absolute; width: 228px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 2px 8px rgba(20, 30, 45, .08); font-size: 13px; }
.sw-node.hot { border: 2px solid var(--accent); } .sw-node.moving { box-shadow: 0 8px 22px rgba(20, 30, 45, .2); z-index: 3; }
.sw-start, .sw-hangup { width: 130px; }
.sw-h { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 10px 12px 6px; cursor: grab; user-select: none; touch-action: none; }
.sw-h b { font-size: 12px; letter-spacing: .03em; white-space: nowrap; text-transform: uppercase; }
.sw-start .sw-h, .sw-hangup .sw-h { padding: 14px 12px; justify-content: center; }
.sw-del { border: 0; background: none; color: var(--muted); font-size: 16px; line-height: 1; padding: 0 2px; cursor: pointer; }
.sw-body { display: flex; flex-direction: column; gap: 6px; padding: 0 12px 8px; }
.sw-f { display: flex; flex-direction: column; gap: 2px; } .sw-f > span { font-size: 11px; color: var(--muted); } .sw-f select, .sw-f input { width: 100%; }
.sw-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sw-chk { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.sw-opt { display: grid; grid-template-columns: 18px auto 1fr; align-items: center; gap: 6px; } .sw-opt input { width: 100%; } .sw-opt > span { font-size: 12px; color: var(--muted); }
.sw-optx { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0; font-size: 15px; }
.sw-addopt { width: 100%; background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.sw-outs { border-top: 1px solid var(--line); padding: 6px 0 6px 12px; display: flex; flex-direction: column; gap: 4px; }
.sw-out-row { display: flex; align-items: center; justify-content: flex-end; gap: 6px; font-size: 12px; color: var(--muted); margin-right: -8px; }
.sw-start .sw-outs, .sw-hangup .sw-outs { border-top: 0; padding-top: 0; }
.sw-port { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #6aa5ec; background: var(--panel); padding: 0; cursor: pointer; flex: none; }
.sw-port.on { background: #6aa5ec; } .sw-port.pick { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.sw-in { position: absolute; left: -9px; top: 12px; } .sw-in.ready { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.sw-linking { background: var(--accent-soft); border-radius: 8px; padding: 6px 10px; font-size: 13px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sw-test { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.sw-steps { margin: 0; padding-left: 22px; display: flex; flex-wrap: wrap; gap: 4px 26px; font-size: 13px; } .sw-steps li { padding-left: 2px; }
/* Front desk page: back, title and tabs on ONE row (Drafts 11.91, 11.93) */
.deskbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin: 0 0 14px; }
.deskbar .back { margin-right: 4px; } .deskbar .avatar { width: 32px; height: 32px; flex: none; } .deskbar .desk-av .ic { width: 18px; height: 18px; }
.deskbar h1 { font-size: 20px; margin: 0 8px 0 0; line-height: 1.2; white-space: nowrap; }
.deskbar .tabs { flex: 1 1 520px; min-width: 0; margin: 0; border-bottom: 0; align-self: stretch; align-items: stretch; }
.deskbar .tabs button { padding: 13px 8px 11px; } .deskbar .tabs { column-gap: 0; }
/* The one keypad button: a green phone beside Phones on, on every page (Chris 2026-10-14, Draft 11.95) */
.tb-dial { width: 34px; height: 34px; border-radius: 50%; border: 0; padding: 0; display: inline-grid; place-items: center; background: var(--call-dark); cursor: pointer; flex: none; margin-left: -6px; }
.tb-dial:hover { background: var(--call); } .tb-dial svg { width: 18px; height: 18px; fill: #fff; }
/* New message button (blue, beside the green phone) and its empty pop-up (Draft 11.97) */
.tb-msg { width: 34px; height: 34px; border-radius: 50%; border: 0; padding: 0; display: inline-grid; place-items: center; background: #1a73e8; color: #fff; cursor: pointer; flex: none; margin-left: -6px; }
.tb-msg:hover { background: #1765cc; } .tb-msg .ic, .tb-msg svg { width: 18px; height: 18px; stroke: #fff; }
.nt-title { display: inline-flex; align-items: center; gap: 8px; color: #1a73e8; font-size: 16px; } .nt-title .ic, .nt-title svg { width: 18px; height: 18px; }
.newtext .nt-q { width: 100%; font-size: 15px; padding: 10px 12px; }
.nt-res { min-height: 40px; display: flex; flex-direction: column; gap: 8px; }
ul.plain.nt-hits { display: flex; flex-direction: column; gap: 2px; } .nt-hits button { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; padding: 8px 10px; border: 0; border-radius: 10px; background: transparent; font: inherit; cursor: pointer; } .nt-hits button:hover { background: color-mix(in srgb, #1a73e8 8%, var(--panel)); }
.nt-main { display: flex; flex-direction: column; } .nt-none { display: flex; flex-direction: column; gap: 2px; }
/* Text pop-ups: the × sits up in the top corner beside the drag bar (Chris 2026-10-14: "can we move the 'x' up further?") */
.modal.msgpop:not([style*="fixed"]) { position: relative; }
.modal.msgpop .msgpopcard > .mhead > .x { position: absolute; top: 6px; right: 8px; z-index: 2; }
.modal.msgpop .msgpopcard > .mhead { padding-right: 28px; }
/* Calls/Messages tab: messages left, full call log right (Draft 11.100) */
.cm-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 1000px) { .cm-two { grid-template-columns: minmax(0, 1fr); } } .cm-two > * { min-width: 0; }
.calllog { border: 2px solid var(--call); border-radius: 16px; padding: 14px 16px; background: var(--panel); display: flex; flex-direction: column; gap: 10px; }
ul.plain.cl-list { display: flex; flex-direction: column; gap: 0; }
.cl-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 9px 4px; border-bottom: 1px solid var(--line); }
.cl-row:last-child { border-bottom: 0; } .cl-row.unread { background: color-mix(in srgb, var(--call) 6%, var(--panel)); }
.cl-main { display: flex; flex-direction: column; min-width: 0; } .cl-main .linkbtn { background: none; border: 0; padding: 0; text-align: left; cursor: pointer; color: inherit; font: inherit; }
.cl-row.missed .cl-main b { color: var(--bad); } .cl-time { white-space: nowrap; }
.cl-call { width: 30px; height: 30px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; background: var(--call-dark); cursor: pointer; } .cl-call:hover { background: var(--call); } .cl-call svg { width: 15px; height: 15px; fill: #fff; }
/* Front desk Recare: Not seen in over 3 years (Draft 11.101) */
.lapsedcard { margin-top: 12px; }
.lp-year { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); align-items: start; }
.lp-y { font-weight: 700; font-size: 18px; padding-top: 6px; }
ul.plain.lp-list { display: flex; flex-direction: column; gap: 0; }
.lp-list li { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 6px 0; } .lp-list li .lp-main { flex: 1 1 260px; }
.lp-list li + li { border-top: 1px dashed var(--line); }
.lp-main { display: flex; flex-direction: column; min-width: 0; }
@media (max-width: 700px) { .lp-year { grid-template-columns: 1fr; gap: 4px; } }
.lp-st { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* Clean-up review bar in the mini record: Keep / Inactivate / Unsure (Draft 11.103) */
.lp-review { display: flex; flex-direction: column; gap: 10px; }
.lp-picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.lp-pick { --c: #2e8b57; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 10px 12px; border: 2px solid var(--c); border-radius: 16px; background: color-mix(in srgb, var(--c) 8%, var(--panel)); color: var(--fg); cursor: pointer; font: inherit; transition: transform .12s, background .12s; }
.lp-pick:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--c) 16%, var(--panel)); }
.lp-pick svg { width: 54px; height: 54px; } .lp-pick b { font-size: 18px; color: var(--c); } .lp-pick small { font-size: 12px; color: var(--muted); text-align: center; }
.lp-pick .lp-fill { fill: color-mix(in srgb, var(--c) 22%, var(--panel)); stroke: var(--c); stroke-width: 2.5; } .lp-pick .lp-fill2 { fill: color-mix(in srgb, var(--c) 12%, var(--panel)); stroke: var(--c); stroke-width: 2.5; }
.lp-pick .lp-line { fill: none; stroke: var(--c); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; } .lp-pick .lp-dot { fill: var(--c); }
.lp-pick.off { --c: #b03a2e; } .lp-pick.pass { --c: #5f6b7a; }
@media (max-width: 700px) { .lp-picks { grid-template-columns: 1fr; } .lp-pick { flex-direction: row; justify-content: flex-start; } .lp-pick svg { width: 36px; height: 36px; } }
/* Review pop-up taller and its three buttons flatter (Chris 2026-10-14: "make the pop up a little taller or the icons smaller") */
.scrim.floating .modal.callwork:has(.lp-review), .modal.callwork:has(.lp-review) { height: min(1020px, calc(100vh - 24px)); max-height: calc(100vh - 24px); }
.lp-review { gap: 6px; padding-top: 10px !important; padding-bottom: 10px !important; }
.lp-pick { flex-direction: row; justify-content: center; gap: 10px; padding: 8px 12px; border-radius: 14px; text-align: left; }
.lp-pick svg { width: 34px; height: 34px; flex: none; } .lp-pick b { font-size: 16px; } .lp-pick small { text-align: left; }
.lp-pick > b + small { display: block; } .lp-pick { display: grid; grid-template-columns: 34px auto; grid-template-rows: auto auto; column-gap: 10px; row-gap: 0; justify-content: center; align-items: center; }
.lp-pick svg { grid-row: 1 / 3; } .lp-pick b { align-self: end; } .lp-pick small { align-self: start; }

/* Clean-up review pieces on the recare puzzle, for the user with the Clean-up review privilege (Draft 11.106) */
.ow-grid.v4 .pz-piece.k-cleanup path { fill: var(--grey); } .ow-grid.v4 .pz-piece.k-cleanup.alt path { fill: color-mix(in srgb, var(--grey) 85%, var(--grey-t)); } .ow-grid.v4 .pz-piece.k-cleanup text { fill: var(--grey-t); }
.inline-in.cu-n { width: 52px; text-align: center; }
/* Voicemails in the call log with a Listen button (Draft 11.106) */
.pc-ic.vm svg { color: var(--call-dark); }
.vm-listen { align-self: flex-start; margin-top: 5px; padding: 3px 10px; border-radius: 999px; border: 1.5px solid var(--call-dark); background: color-mix(in srgb, var(--call) 8%, var(--panel)); color: var(--call-dark); font-weight: 600; cursor: pointer; }
.vm-listen:hover, .vm-listen.on { background: color-mix(in srgb, var(--call) 18%, var(--panel)); }
.cl-vm { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; font-size: 13px; }
/* Administration: the same slim row as the Front desk (Draft 11.106); 24 tabs wrap into tight rows beside the title */
.deskbar.adminbar { align-items: flex-start; }
.deskbar.adminbar > .back, .deskbar.adminbar > .avatar { margin-top: 5px; } .deskbar.adminbar > h1 { margin-top: 9px; }
.deskbar.adminbar .tabs { row-gap: 0; }
.deskbar.adminbar .tabs button { padding: 9px 7px 8px; font-size: 13.5px; }

/* Clinical | Front day-view switch in the top bar for the dentist, hygienist and assistant (Draft 11.107) */
.seg.dayview { margin-right: 6px; flex: none; } .seg.dayview button { padding: 6px 12px; font-weight: 600; }
.seg.dayview button.on { background: var(--accent); color: #fff; }
/* Older invoices greyed so they don't stand out (Chris 2026-10-14, Draft 11.109): a settled, past invoice (the collapsed .shut card)
   sits on a grey panel with its words, tags and EOB chip in grey; Expand stays normal, and hover brings the colour back */
.invoice.shut { background: color-mix(in srgb, var(--grey) 45%, var(--panel)); border-color: var(--line); transition: background .15s; }
.invoice.shut .inv-h > div:not(.inv-status), .invoice.shut .inv-status > :not(.inv-tog) { filter: grayscale(1); opacity: .55; transition: opacity .15s, filter .15s; }
.invoice.shut:hover .inv-h > div:not(.inv-status), .invoice.shut:hover .inv-status > :not(.inv-tog) { filter: none; opacity: 1; }
/* Full record opened from the mini record: the strip is only ← Back to mini record and × (Draft 11.110) */
.cw-strip.slim { gap: 6px; padding: 6px 8px 6px 6px; }
/* Government No Co-Pay in the Adjust pop-up and on the invoice (Draft 11.111) */
.nocopay { margin: 4px 0 12px; }
.nocopay-btn { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 2px solid #3949ab; border-radius: 14px; background: color-mix(in srgb, #3949ab 8%, var(--panel)); color: var(--fg); cursor: pointer; font: inherit; text-align: left; }
.nocopay-btn:hover:not(:disabled) { background: color-mix(in srgb, #3949ab 16%, var(--panel)); }
.nocopay-btn svg { width: 28px; height: 28px; color: #3949ab; flex: none; } .nocopay-btn span { display: flex; flex-direction: column; gap: 2px; }
.nocopay-btn b { font-size: 16px; color: #3949ab; } .nocopay-btn small { color: var(--muted); font-size: 12.5px; }
.nocopay-btn:disabled { cursor: default; opacity: .7; } .nocopay.on .nocopay-btn { border-style: dashed; }
.chip.nocopay-chip { border: 1px solid #3949ab; color: #3949ab; background: color-mix(in srgb, #3949ab 8%, var(--panel)); }

/* Who we invoice / who we text under Family; invoice "to" line; responsible-party pop-up and bar; no cell phone (Draft 11.113) */
.fam-who { display: flex; flex-direction: column; gap: 5px; margin: 6px 0 10px; font-size: 13.5px; color: var(--muted); } /* two rows (Chris 2026-10-14: "list in two rows not one row") */
.fam-who span { display: inline-flex; align-items: center; gap: 6px; } .fam-who svg { width: 16px; height: 16px; color: var(--accent); } .fam-who b { color: var(--fg); }
.chip.nocell-chip { border: 1px solid #b7791f; color: #8a5a10; background: color-mix(in srgb, #b7791f 10%, var(--panel)); font-size: 11px; padding: 1px 7px; }
.inv-to { display: inline-block; margin-top: 2px; color: var(--muted); } .inv-to b { color: var(--fg); }
.rp-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 6px; }
.rp-pick { display: flex; align-items: center; gap: 12px; padding: 14px; border: 2px solid var(--line); border-radius: 14px; background: var(--panel); cursor: pointer; font: inherit; color: var(--fg); text-align: left; }
.rp-pick svg { width: 30px; height: 30px; flex: none; } .rp-pick span { display: flex; flex-direction: column; gap: 2px; } .rp-pick b { font-size: 16px; } .rp-pick small { color: var(--muted); }
.rp-pick.go { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--panel)); } .rp-pick.go svg, .rp-pick.go b { color: var(--accent); }
.rp-pick:hover { transform: translateY(-1px); }
.rp-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; margin: 0 0 12px; border: 2px solid var(--accent); border-radius: 12px; background: color-mix(in srgb, var(--accent) 7%, var(--panel)); }
.rp-bar > span { display: inline-flex; align-items: center; gap: 8px; } .rp-bar svg { width: 18px; height: 18px; color: var(--accent); }
.invoices.focus { animation: invfocus 1.8s ease-out; border-radius: 16px; } @keyframes invfocus { 0% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 55%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }
.nocell-tgl { margin-left: 12px; } .nocell-tgl small { font-weight: 400; }
@media (max-width: 700px) { .rp-picks { grid-template-columns: 1fr; } }
/* Collect payment: every completed visit stacked on one page (Draft 11.114) */
.co-one { display: flex; flex-direction: column; gap: 14px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px dashed var(--line); } .co-one:last-child { border-bottom: 0; margin-bottom: 0; }
.co-one.paid .co-invoice { opacity: .72; }
/* Checkout "Add a code" is one link that opens Add work done today (Draft 11.115) */
.co-invoice .coadd { display: flex; justify-content: flex-start; align-items: center; gap: 10px; flex-wrap: wrap; text-align: left; }
.coadd-link { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 2px 0; color: var(--accent); font: inherit; font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
.coadd-link svg { width: 16px; height: 16px; } .coadd-link:hover { text-decoration: underline; }

/* THE ROAD (Chris, 2026-10-14): between the Outreach card and the front desk cards, not a card itself. One signpost per family with
   automatic texts today; the car drives from signpost to signpost as each family's texting is checked, and parks at the end. */
.fam-road { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 18px; align-items: center; padding: 6px 4px 2px; margin: 2px 0 6px; }
.road-txt { display: flex; flex-direction: column; gap: 2px; } .road-txt b { font-size: 15px; } .road-txt small { font-size: 12px; }
.road { position: relative; height: 46px; margin: 22px 10px 8px; border-radius: 999px; background: #4b5058; box-shadow: inset 0 2px 6px rgba(0,0,0,.35), 0 2px 0 #3a3e45; }
.road-line { position: absolute; left: 14px; right: 14px; top: 50%; height: 3px; margin-top: -1.5px; background: repeating-linear-gradient(90deg, #f3c53d 0 22px, transparent 22px 40px); border-radius: 2px; animation: roadline 1.6s linear infinite; }
@keyframes roadline { from { background-position: 0 0; } to { background-position: -40px 0; } }
.fam-road.alldone .road-line, .fam-road.empty .road-line { animation: none; opacity: .55; }
.road-stop { position: absolute; bottom: calc(100% - 2px); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0; pointer-events: none; }
.road-stop small { font-size: 11px; font-weight: 600; color: var(--muted); background: var(--panel); border: 1.5px solid var(--line); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.road-stop i { display: block; width: 2px; height: 10px; background: var(--line); }
.road-stop.checked small { color: #1f8f3c; border-color: #1f8f3c; } .road-stop.checked i { background: #1f8f3c; }
.road-car { position: absolute; top: 50%; width: 64px; height: 32px; margin: -16px 0 0 -32px; padding: 0; border: 0; background: none; cursor: pointer; transition: left 1.4s cubic-bezier(.4, .05, .3, 1); filter: drop-shadow(0 3px 3px rgba(0,0,0,.35)); animation: carbob 1.1s ease-in-out infinite; }
.road-car svg { width: 64px; height: 32px; display: block; }
.road-car .car-body { fill: #d33a2c; } .road-car .car-win { fill: #cfe7ff; } .road-car .car-wheel { fill: #222; } .road-car .car-hub { fill: #ddd; } .road-car .car-lamp { fill: #ffe27a; }
.road-car.parked { animation: none; } .road-car.parked .car-body { fill: #1f8f3c; } .fam-road.empty .road-car { animation: none; opacity: .55; cursor: default; }
.road-car:hover { transform: scale(1.08); } .road-car:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 10px; }
.road-car.driving .car-wheel { animation: wheelspin .5s linear infinite; transform-origin: center; transform-box: fill-box; }
@keyframes wheelspin { to { transform: rotate(360deg); } } @keyframes carbob { 50% { margin-top: -17px; } }
.road-flag { position: absolute; top: -20px; right: -8px; width: 22px; height: 22px; border-radius: 50%; background: #1f8f3c; color: #fff; font-size: 13px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
@media (max-width: 900px) { .fam-road { grid-template-columns: 1fr; gap: 6px; } }
/* The text check inside the mini record: everything but the family card drops out of focus until "Let me change that" */
.modal.cw-textgrey .cw-main > :not(.tc-fam), .modal.cw-textgrey .cw-side, .modal.cw-textgrey .cw-tabs, .modal.cw-textgrey .mhead > .row:last-child > :not(.x), .modal.cw-textgrey .mhead p { opacity: .22; filter: grayscale(1); pointer-events: none; }
.tc-fam { border: 2px solid var(--accent); } .tc-fam .famtree { margin-top: 8px; } .tc-fam .fam-person { min-width: 150px; } .tc-fam .fam-who { margin-top: 6px; }
.tc-box { display: flex; flex-direction: column; gap: 6px; padding-top: 10px !important; padding-bottom: 10px !important; }
.tc-box.edit { background: color-mix(in srgb, var(--accent) 8%, var(--panel)); }
.tc-list { display: flex; flex-direction: column; gap: 2px; } .tc-list li { font-size: 13.5px; }
.tc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .tc-q { margin: 0; font-weight: 600; }
.tc-picks { display: flex; gap: 10px; margin-left: auto; }
.tc-pick { --c: #1f8f3c; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 2px solid var(--c); border-radius: 14px; background: color-mix(in srgb, var(--c) 10%, var(--panel)); color: var(--c); font-size: 15px; font-weight: 700; cursor: pointer; }
.tc-pick svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tc-pick:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--c) 18%, var(--panel)); } .tc-pick.change { --c: #c27c0e; }
.scrim.floating .modal.callwork:has(.tc-box), .modal.callwork:has(.tc-box) { height: min(1020px, calc(100vh - 24px)); max-height: calc(100vh - 24px); }
/* The family star: larger and in the top right corner wherever it is (Chris, 2026-10-14) */
.fam-star, .fam-star.static { position: absolute; top: 1px; right: 5px; font-size: 27px; line-height: 1; padding: 1px 4px; margin: 0; }
.fam-star.static.sm, .famtree.compact .fam-star { font-size: 22px; top: 0; right: 4px; }
.fam-more { right: 38px; }
.fam-person.parent, .famtree.compact .fam-person.parent { padding-right: 38px; }
button.fam-star.on, button.fam-star { background: none; border: 0; } button.fam-star:hover { background: var(--panel); }

/* TREATMENT CARDS PAGE (Chris, 2026-10-14): filter menu, the groups as decks in one row, a line beneath, cards unfold below */
.tfilter { display: flex; align-items: flex-end; gap: 10px 14px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 14px; background: var(--panel); border: 1.5px solid var(--line); border-radius: 14px; }
.tfilter label { display: grid; gap: 3px; font-size: 11.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } .tfilter select { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--fg); min-width: 150px; }
.tfilter .tf-q { position: relative; display: block; } .tfilter .tf-q input { width: 220px; padding-left: 32px; } .tfilter .tf-q svg { position: absolute; left: 10px; top: 50%; width: 16px; height: 16px; margin-top: -8px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.tfilter .tf-n { margin-left: auto; align-self: center; } .tfilter > button { align-self: center; }
.tdecks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; padding: 10px 6px 0; } .tdecks.n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tdeck { position: relative; height: 158px; padding: 0; border: 0; background: none; font: inherit; color: var(--fg); cursor: pointer; text-align: left; }
.tdeck-card { position: absolute; inset: 0; background: #fff; border: 1.5px solid #c9ced6; border-radius: 14px; box-shadow: 0 2px 6px rgba(0,0,0,.12); transition: transform .2s, box-shadow .2s; }
.tdeck-card.c2 { transform: translate(5px, -5px) rotate(1.4deg); } .tdeck-card.c3 { transform: translate(10px, -10px) rotate(2.8deg); opacity: .9; }
.tdeck-card.c1 { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-color: var(--g); }
.tdeck-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .tdeck-top .gchip { width: 30px; height: 30px; font-size: 16px; font-weight: 800; }
.tdeck-n { font-size: 36px; line-height: 1; font-weight: 800; color: var(--g); } .tdeck-n small { font-size: 12px; font-weight: 600; color: var(--muted); margin-left: 4px; }
.tdeck-name { font-size: 17px; font-weight: 700; margin-top: 4px; } .tdeck-desc { font-size: 12px; color: var(--muted); line-height: 1.3; } .tdeck .chip { margin-top: auto; align-self: flex-start; }
.tdeck:hover .tdeck-card.c1 { transform: translateY(-4px); box-shadow: 0 8px 18px rgba(0,0,0,.16); }
.tdeck.empty { opacity: .55; } .tdeck.empty .tdeck-card.c2, .tdeck.empty .tdeck-card.c3 { display: none; }
.tdeck.open .tdeck-card.c1 { transform: translateY(-8px); box-shadow: 0 12px 24px rgba(0,0,0,.18); background: color-mix(in srgb, var(--g) 6%, #fff); border-width: 2px; }
.tdeck.open .tdeck-card.c2 { transform: translate(5px, -13px) rotate(1.4deg); } .tdeck.open .tdeck-card.c3 { transform: translate(10px, -18px) rotate(2.8deg); }
.tdeck-pin { position: absolute; left: 50%; bottom: -22px; width: 0; height: 0; margin-left: -10px; border: 10px solid transparent; border-bottom-color: var(--g); display: none; } .tdeck.open .tdeck-pin { display: block; }
.tdeck-line { height: 0; border-top: 3px solid var(--line); margin: 20px 0 8px; border-radius: 2px; }
.tsec-open { margin-top: 6px; } .tsec-open .tsec-h { font-size: 19px; } .tsec-open .tsec-h .link { margin-left: auto; } .tsec-hint { text-align: center; padding: 30px 0; }
.tcards.unfold .tcard { animation: tunfold .45s cubic-bezier(.2, .7, .3, 1) both; animation-delay: calc(var(--i, 0) * 40ms); transform-origin: top center; }
@keyframes tunfold { from { opacity: 0; transform: translateY(-26px) scaleY(.6); } to { opacity: 1; transform: none; } }
.tcards.unfold .tcard:hover { animation: none; }
/* the card itself: no colour strip and no group letter any more; the group lives on the deck */
.tcard { border-top: 1.5px solid #c9ced6; padding-top: 14px; } .tcard.pend { border-color: var(--accent); }
.tcard .tc-foot, .tcard .tc-last { padding-right: 0; }
@media (max-width: 1100px) { .tdecks, .tdecks.n5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tdeck-pin { display: none !important; } }
/* Three buttons spread far apart so nothing is tapped by mistake (Chris, 2026-10-15) */
.tc-picks.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; width: 100%; margin: 4px 0 0; }
.tc-picks.three .tc-pick { justify-content: center; padding: 12px 10px; } .tc-pick.nocell { --c: #c27c0e; } .tc-pick.notext { --c: #b03a2e; }
@media (max-width: 760px) { .tc-picks.three { grid-template-columns: 1fr; gap: 14px; } }
/* Assign to the other receptionist (Chris, 2026-10-15): a fourth button on the bar, spaced like the others */
.tc-picks.three { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .tc-pick.assign { --c: #1d6fd1; }
.tc-pick.assign.many { gap: 6px; } .tc-pick.assign.many button { font: inherit; font-weight: 700; color: var(--c); background: #fff; border: 1.5px solid var(--c); border-radius: 999px; padding: 2px 10px; cursor: pointer; } .tc-pick.assign.many button:hover { background: color-mix(in srgb, var(--c) 14%, #fff); }
.road-stop .road-from { font-style: normal; font-weight: 500; color: #1d6fd1; }
@media (max-width: 1000px) { .tc-picks.three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rcr-all.rcr-four .rcr-hours { grid-column: 1 / -1; } .rcr-time { width: auto; padding: 2px 6px; } .tc-pick.assign small { font-size: 11px; font-weight: 600; color: var(--muted); margin-left: 2px; }
/* Family texts (Chris, 2026-10-15): the queued text previewed word for word in the text check, a chip on merged rows, the family wording under each reminder */
.tc-list li { display: grid; gap: 3px; } .tc-bubble { align-self: flex-start; max-width: 720px; font-size: 12.5px; }
.chip.famtext-chip { background: #e3edfb; color: #1d4f9e; border: 1px solid #b7cdf2; } .rtl-famnote { display: block; margin-top: 6px; }
/* Family texts (Chris, 2026-10-15): the queued text previewed word for word in the text check, a chip on merged rows, the family wording under each reminder */
.tc-list li { display: grid; gap: 3px; } .tc-bubble { align-self: flex-start; max-width: 720px; font-size: 12.5px; }
.chip.famtext-chip { background: #e3edfb; color: #1d4f9e; border: 1px solid #b7cdf2; } .rtl-famnote { display: block; margin-top: 6px; }
/* Website mission statement (Chris, 2026-10-15): one quiet band between the hero photo and Meet your dentist */
.ws-mission { text-align: center; padding: 72px 40px 64px; }
.ws-mission-in { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.ws-mission h2 { font-size: 40px; line-height: 1.1; margin: 0 0 22px; letter-spacing: -.01em; color: var(--wk); } .ws-mission h2 em { font-style: normal; color: var(--wt); }
.ws-mission p { font-size: 17.5px; line-height: 1.65; color: var(--wm); margin: 0 0 14px; } .ws-mission .ws-mission-lead { font-size: 19px; color: var(--wk); }
.ws-mission .ws-mission-close { font-size: 19px; font-weight: 600; color: var(--wk); margin-top: 6px; }
.ws-mission-rule { display: block; width: 56px; height: 3px; border-radius: 2px; background: var(--wt); margin-top: 22px; }
@container (max-width: 560px) { .ws-mission { padding: 44px 16px 40px; } .ws-mission h2 { font-size: 30px; } .ws-mission p { font-size: 16px; } .ws-mission .ws-mission-lead, .ws-mission .ws-mission-close { font-size: 17px; } }
a.ws-btn { text-decoration: none; } a.ws-btn:hover { color: #fff; }
.ws-mission h2 { font-size: 34px; margin-bottom: 10px; } .ws-mission .ws-mission-motto { font-size: 40px; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; color: var(--wk); margin: 0 0 22px; } .ws-mission .ws-mission-motto em { font-style: normal; color: var(--wt); }
@container (max-width: 560px) { .ws-mission h2 { font-size: 26px; } .ws-mission .ws-mission-motto { font-size: 30px; } }

/* Website map links out to Google Maps (11.124, Chris 2026-10-15) */
.ws-maplink { display: block; position: relative; text-decoration: none; border-radius: 12px; overflow: hidden; }
.ws-maplink .ws-mapcap { position: absolute; right: 10px; bottom: 10px; background: #fff; color: var(--wt); font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.ws-maplink:hover .ws-mapcap { background: var(--wt); color: #fff; }

/* Mission band picture (Chris 2026-10-15): the watercolour of patients at every age sits under the statement; multiply blend hides its white paper */
.ws-mission-pic { margin: 30px 0 0; width: 100%; } .ws-mission-pic img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; border-radius: 10px; }

/* Inventory page (Draft 11.125, refined 11.128, Chris 2026-10-15 "improve the esthetics"): quiet white tiles with a coloured number,
   a rounded scan box, chips for categories, the order list grouped by distributor. Accents are 2px perimeters; no monospace. */
.inv-head { margin-bottom: 14px; } .inv-head h1 { margin-bottom: 2px; }
.inv-od { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); font-size: 12.5px; color: var(--muted); } .inv-od .ic { width: 15px; height: 15px; color: var(--accent); } .inv-od b { color: var(--fg); }
.inv-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.inv-stat { all: unset; box-sizing: border-box; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 3px; min-width: 0; font: inherit; color: var(--fg); text-align: left; }
button.inv-stat { cursor: pointer; } button.inv-stat:hover { border-color: var(--accent); } button.inv-stat:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.inv-stat small { text-transform: uppercase; letter-spacing: .06em; font-size: 10.5px; color: var(--muted); font-weight: 600; } .inv-stat b { font-size: 30px; line-height: 1.1; color: var(--accent); font-weight: 700; letter-spacing: -.01em; } .inv-stat span { font-size: 12px; color: var(--muted); }
.inv-stat.warn { border: 2px solid var(--warn); } .inv-stat.warn b { color: var(--warn); } .inv-stat.bad { border: 2px solid var(--bad); } .inv-stat.bad b { color: var(--bad); }
.inv-scan { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; margin-bottom: 16px; }
.inv-scanbox { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 4px 8px 4px 16px; min-width: 0; } .inv-scanbox .ic { width: 20px; height: 20px; color: var(--accent); flex: none; }
.inv-scanbox input { border: 0; background: none; padding: 9px 4px; font-size: 16px; flex: 1; min-width: 0; outline: none; } .inv-scanbox:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.inv-scan > button { border-radius: 999px; padding: 10px 18px; } .inv-scan p { grid-column: 1 / -1; margin: -2px 0 0 16px; }
.inv-tabs { margin-bottom: 14px; }
.inv-panel { padding: 18px 20px; gap: 12px; } .inv-panel .ccard-h { font-size: 12px; }
.inv-search { max-width: 420px; flex: 1; } .inv-search input { font-size: 14px; padding: 7px 4px; } .inv-search .ic { width: 16px; height: 16px; color: var(--muted); } .inv-count { white-space: nowrap; }
.inv-chips { display: flex; flex-wrap: wrap; gap: 6px; } .inv-chips .chip { cursor: pointer; padding: 4px 11px; border-radius: 999px; background: var(--panel2); border-color: transparent; } .inv-chips .chip.on { background: var(--accent); color: #fff; font-weight: 600; } .inv-chips .chip:hover:not(.on) { background: var(--accent-soft); color: var(--accent); }
.inv-tbl { border: 0; background: none; border-radius: 0; } .inv-tbl th { background: none; border-bottom: 1px solid var(--line); padding: 6px 10px; } .inv-tbl td { padding: 11px 10px; border-bottom: 1px solid var(--line); } .inv-tbl tbody tr:last-child td { border-bottom: 0; } .inv-tbl.hover tbody tr:hover td { background: var(--panel2); }
.inv-tbl td b { font-size: 14px; } .inv-tbl .d-block { margin-top: 1px; } .inv-cat { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; letter-spacing: .02em; }
.inv-grp-h td { background: var(--panel2) !important; padding: 7px 10px; border-top: 1px solid var(--line); } .inv-grp-h:hover td { background: var(--panel2) !important; } .inv-grp-h td .inv-vendor { font-weight: 700; color: var(--accent); margin-right: 8px; } .inv-grp + .inv-grp .inv-grp-h td { border-top: 2px solid var(--line); }
.inv-total { font-size: 13px; color: var(--muted); } .inv-total b { font-size: 18px; color: var(--fg); margin-left: 4px; }
.inv-best { color: var(--ok); font-weight: 700; } .chip.inv-info { background: var(--accent-soft); color: var(--accent); border-color: transparent; font-weight: 600; }
.d-block { display: block; }
.inv-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; } /* like the original: as many across as fit (printed 4 across) */
.inv-card { border: 1.5px solid #16262a; border-radius: 8px; padding: 10px 12px; background: #fff; color: #16262a; display: flex; flex-direction: column; gap: 4px; cursor: pointer; min-width: 0; }
.inv-card b { font-size: 20px; line-height: 1.2; font-weight: 700; } .inv-card .inv-mid { flex: 1; display: flex; align-items: center; justify-content: center; padding: 10px 0 8px; } .inv-card .inv-bars { width: 78%; height: 60px; display: block; } .inv-card .inv-bars rect { fill: #16262a; } .inv-card .inv-bars text { fill: #16262a; font-family: inherit; }
.inv-card { min-height: 170px; }
.inv-card small { font-size: 12px; color: #5b6e71; line-height: 1.35; }
.inv-card:hover { border-color: var(--accent); }
.inv-reqs { border: 2px solid var(--warn); background: var(--warn-soft); border-radius: var(--r); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.inv-reqs ul.plain li button { all: unset; cursor: pointer; display: block; padding: 6px 8px; border-radius: 6px; background: var(--panel); width: 100%; box-sizing: border-box; } .inv-reqs ul.plain li button:disabled { cursor: default; } .inv-reqs ul.plain li + li { margin-top: 4px; }
.inv-log li { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; } .inv-log li:last-child { border-bottom: 0; } .inv-log li > span:first-of-type { flex: 1; } .inv-log li > .sm { white-space: nowrap; }
.inv-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); margin-top: 6px; flex: none; } .inv-dot.ok { background: var(--ok); } .inv-dot.warn { background: var(--warn); } .inv-dot.bad { background: var(--bad); } .inv-dot.info { background: var(--accent); }
.inv-rules { min-height: 200px; } .inv-rulelist { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.inv-kv { font-size: 13px; }
.inv-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; } .inv-form .wide { grid-column: 1 / -1; } .inv-form .chk-field { justify-content: flex-end; } .inv-form .chk-field input { width: auto; margin-right: 6px; }
.inv-mgr { border-top: 1px solid var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 10px; } .inv-mgr summary { cursor: pointer; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; }
@media (max-width: 900px) { .inv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .inv-scan { grid-template-columns: 1fr; } }

/* Not seen in over 3 years: five rows, then a scroll bar (Chris 2026-10-15) */
.lp-scroll { position: relative; overflow-y: auto; scrollbar-gutter: stable; } .lp-scroll.more { padding-right: 6px; box-shadow: inset 0 -14px 12px -14px rgba(0, 0, 0, .25); }

/* Stage 2 app preview (Chris 2026-10-15): the real app shell with only Inventory on, shown in the same demo frame as the website */
.site-frame.sf-app { background: var(--bg); color: var(--fg); font: 14px/1.45 var(--font); min-height: calc(100vh - 48px); }
.site-frame.sf-phone.sf-app { min-height: 560px; }
.stage2 { display: flex; flex-direction: column; min-height: 100%; }
.s2-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px; background: var(--panel); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.s2-top .brand { display: flex; align-items: center; gap: 10px; } .s2-top .brand .mark { width: 30px; height: 30px; display: inline-flex; color: var(--accent); } .s2-top .brand .mark svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; } .s2-top .brand b { display: block; font-size: 15px; } .s2-top .brand small { color: var(--muted); }
.s2-user { display: flex; align-items: center; gap: 8px; }
.s2-note { margin: 14px 20px 0; padding: 10px 14px; border: 2px solid var(--accent); background: var(--accent-soft); border-radius: var(--r); font-size: 13px; color: var(--accent); }
.s2-main { padding: 14px 20px 40px; max-width: 1280px; margin: 0 auto; box-sizing: border-box; }
.sf-phone .s2-top, .sf-phone .s2-main { padding-left: 12px; padding-right: 12px; } .sf-phone .s2-note { margin-left: 12px; margin-right: 12px; }
.sf-phone .inv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sf-phone .inv-scan { grid-template-columns: 1fr; } .sf-phone .inv-cards { grid-template-columns: 1fr; } .sf-phone .inv-q { min-width: 0; width: 100%; }
.inv-rulelist { gap: 8px; font-size: 14px; line-height: 1.5; padding-left: 24px; } .inv-rulelist li::marker { color: var(--accent); font-weight: 700; }

/* Order day (Chris 2026-10-15): Claude's proposed order on the left, the same Claude session as a chat on the right */
.od-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: 14px; align-items: start; }
.od-sup { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; } .od-sup-h { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--panel2); border-bottom: 1px solid var(--line); } .od-sup-h b { color: var(--accent); font-size: 14px; } .od-sup-sum { margin-left: auto; font-weight: 700; } .od-sup-h button { margin-left: 8px; }
.od-sup .inv-tbl td { padding: 9px 12px; } .od-sup .inv-tbl th { padding: 6px 12px; }
.od-aside { border: 2px solid var(--warn); } .od-aside .od-sup-h { background: var(--warn-soft); border-bottom-color: transparent; } .od-aside .od-sup-h b { color: var(--warn); }
.od-asidelist li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; border-top: 1px solid var(--line); font-size: 13.5px; }
.od-foot { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 2px; } .od-foot p { max-width: 60ch; }
.od-chat { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; max-height: calc(100vh - 100px); }
.od-chat-h { display: flex; align-items: center; gap: 10px; } .od-ai { width: 34px; height: 34px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex: none; } .od-ai svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.od-chatlog { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 4px 2px; min-height: 240px; }
.od-msg { max-width: 92%; padding: 9px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; } .od-msg.ai { background: var(--panel2); border-bottom-left-radius: 4px; align-self: flex-start; } .od-msg.me { background: var(--accent); color: #fff; border-bottom-right-radius: 4px; align-self: flex-end; }
.od-input { display: flex; gap: 8px; } .od-input input { flex: 1; border-radius: 999px; padding: 9px 14px; } .od-input button { border-radius: 999px; }
@media (max-width: 1000px) { .od-grid { grid-template-columns: 1fr; } .od-chat { position: static; max-height: none; } }
.sf-phone .od-grid { grid-template-columns: 1fr; } .sf-phone .od-chat { position: static; max-height: none; }

/* Reorder card sheet (Chris 2026-10-15): letter portrait, 4 x 6 = 24 cards a page, previewed and printed like the sterilization sheet */
.stpaper.cardsheet { padding: 4mm; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(6, 1fr); gap: 8mm; } /* the page edge is HALF the gap between cards (Chris 2026-10-15: "half width border on the sides and top/bottom so that when we cut them all sides will be equal"): cut down the middle of every gap and each card keeps 4 mm all round, edge cards included; rows fill the page so top and bottom match the sides. 4 mm rather than 3 keeps the outer card lines inside what office printers can print */
.pdfstage .cardsheet + .cardsheet { margin-top: 18px; }
.pcard { border: 0.4mm solid #111; border-radius: 3mm; padding: 2.5mm 3mm; display: flex; flex-direction: column; gap: 1mm; overflow: hidden; background: #fff; color: #111; min-width: 0; }
.pcard b { font-size: 11pt; line-height: 1.1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard .inv-mid { flex: 1; display: flex; align-items: center; justify-content: center; } .pcard .inv-bars { width: 80%; height: 12mm; display: block; } .pcard .inv-bars rect { fill: #000; } .pcard .inv-bars text { fill: #000; font-family: inherit; }
.pcard small { font-size: 6.4pt; line-height: 1.2; color: #333; }
/* Multi-page paper print (card sheets): pages flow one under the other, one per sheet; the single-page sterilization print keeps its own rules above */
@media print {
  html:has(body.printing-pages), body.printing-pages { background: #fff !important; height: auto !important; min-height: 0 !important; overflow: visible !important; margin: 0 !important; padding: 0 !important; }
  body.printing-pages #app, body.printing-pages .toasts, body.printing-pages .popstack, body.printing-pages .cw-strip, body.printing-pages .minitray, body.printing-pages .binder, body.printing-pages #overlay > :not(.scrim) { display: none !important; }
  body.printing-pages .scrim { position: static !important; inset: auto; background: none; padding: 0; display: block; }
  body.printing-pages .modal.sheetpdf { position: static !important; transform: none; box-shadow: none; width: auto; max-width: none; max-height: none; overflow: visible; padding: 0; border-radius: 0; }
  body.printing-pages .modal.sheetpdf > :not(.pdfstage) { display: none !important; }
  body.printing-pages .pdfstage { background: none; padding: 0; border-radius: 0; display: block; overflow: visible; max-height: none; }
  body.printing-pages .stpaper.cardsheet { zoom: 1; box-shadow: none; height: 10.95in; margin: 0; page-break-after: always; break-after: page; }
  body.printing-pages .stpaper.cardsheet:last-child { page-break-after: auto; break-after: auto; }
}
.od-banner { border: 2px solid var(--line); border-radius: 10px; padding: 9px 12px; font-size: 13px; color: var(--muted); } .od-banner b { color: var(--fg); } .od-banner.ok { border-color: var(--ok); background: var(--ok-soft); color: var(--ok); } .od-banner.ok b { color: var(--ok); }

/* Inventory, the staff side (Draft 11.132, Chris 2026-10-15): one big scan code, the order list card, an arrow that slides it into Order day */
.inv-staff { max-width: 1100px; margin: 0 auto; }
.inv-bigscan { text-align: center; margin: 6px auto 24px; }
.inv-bigbox { display: flex; align-items: center; gap: 18px; max-width: 760px; margin: 0 auto; background: var(--panel); border: 3px solid var(--accent); border-radius: 24px; padding: 10px 26px; box-shadow: 0 12px 32px rgba(0, 0, 0, .08); cursor: text; }
.inv-bigbox .ic { width: 52px; height: 52px; color: var(--accent); flex: none; }
.inv-bigbox input { border: 0; background: none; font: inherit; font-size: 36px; font-weight: 600; padding: 12px 0; flex: 1; min-width: 0; outline: none; color: var(--fg); }
.inv-bigbox input::placeholder { color: var(--muted); font-weight: 500; }
.inv-bigbox:focus-within { box-shadow: 0 0 0 6px var(--accent-soft), 0 12px 32px rgba(0, 0, 0, .08); }
.inv-bigscan p { margin: 12px 0 0; } .inv-bigscan .link { all: unset; cursor: pointer; font: inherit; color: var(--accent); text-decoration: underline; }
.inv-slider { overflow: hidden; margin: 0 -4px; }
.inv-track { display: flex; align-items: flex-start; width: 200%; transition: transform .4s ease; }
.inv-slider.slid .inv-track { transform: translateX(-50%); }
.inv-pane { width: 50%; flex: none; box-sizing: border-box; padding: 4px; }
.inv-pane.off { height: 0; overflow: hidden; visibility: hidden; }
.inv-orderrow { display: flex; align-items: center; gap: 20px; }
.inv-ordercard { flex: 1; min-width: 0; } .inv-ordercard h2 { font-size: 34px; margin: 2px 0 4px; line-height: 1.1; } .inv-ordercard .inv-tbl { margin-top: 10px; }
.inv-arrow { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; font: inherit; font-weight: 700; font-size: 15px; color: #fff; background: var(--accent); border-radius: 26px; padding: 24px 20px; flex: none; min-width: 124px; box-shadow: 0 10px 24px rgba(0, 0, 0, .12); transition: transform .15s ease; }
.inv-arrow .ic { width: 72px; height: 72px; } .inv-arrow:hover { transform: translateX(4px); } .inv-arrow:focus-visible { outline: 3px solid var(--accent-soft); }
.inv-back { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font: inherit; font-weight: 600; font-size: 15px; color: var(--accent); margin: 2px 0 12px; } .inv-back .ic { width: 26px; height: 26px; }
.inv-more { display: flex; gap: 8px; justify-content: center; margin: -8px 0 18px; }
.inv-more button { all: unset; box-sizing: border-box; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); }
.inv-more button.on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); } .inv-more button:hover { color: var(--accent); }
.sf-phone .inv-orderrow, .sf-phone .inv-arrow { flex-direction: column; } .sf-phone .inv-arrow { flex-direction: row; width: 100%; justify-content: center; padding: 14px; } .sf-phone .inv-arrow .ic { width: 40px; height: 40px; } .sf-phone .inv-bigbox input { font-size: 24px; } .sf-phone .inv-bigbox .ic { width: 36px; height: 36px; }
@media (max-width: 760px) { .inv-orderrow { flex-direction: column; } .inv-arrow { flex-direction: row; width: 100%; justify-content: center; padding: 14px; } .inv-arrow .ic { width: 40px; height: 40px; } .inv-bigbox input { font-size: 24px; } }
.inv-owner { max-width: 1280px; margin: 0 auto; } /* the inventory page never stretches across a wide monitor (Chris 2026-10-15) */
.inv-staff button, .inv-staff input { -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .od-input input, .inv-search input, .inv-form input, .inv-form textarea { font-size: 16px; } /* iPad Safari zooms into inputs under 16px */
/* Stage 2 preview as a portrait iPad (810 points wide, the 2021 iPad with a Bluetooth scanner; Chris 2026-10-15) */
.site-stage.sf-tablet { padding: 18px 16px 30px; }
.site-frame.sf-tablet { width: 810px; max-width: 100%; height: calc(100vh - 110px); min-height: 720px; margin: 0 auto; overflow-y: auto; border: 18px solid #111820; border-radius: 30px; background: #fff; box-shadow: 0 20px 50px rgba(0, 0, 0, .25); box-sizing: content-box; }
.sf-tablet .od-grid { grid-template-columns: 1fr; } .sf-tablet .od-chat { position: static; max-height: none; }
.sf-tablet .inv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sf-tablet .inv-scan { grid-template-columns: 1fr; }
.sf-tablet .s2-main { padding-left: 16px; padding-right: 16px; }
.inv-ordercard td.num, .od-grid td.num { white-space: nowrap; }
/* The staff order list as a cart (Draft 11.135, Chris 2026-10-15) */
.inv-qty { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.inv-qty button { all: unset; box-sizing: border-box; cursor: pointer; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--accent); color: var(--accent); font-size: 24px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; line-height: 1; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.inv-qty button:hover { background: var(--accent-soft); } .inv-qty button:active { background: var(--accent); color: #fff; }
.inv-cartadd { margin-top: 14px; } .inv-cartadd input { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 999px; padding: 11px 18px; font: inherit; font-size: 16px; background: var(--panel); color: var(--fg); } .inv-cartadd input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.inv-cartsug { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; } .inv-cartsug:empty { display: none; }
.inv-cartsug button { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 8px 14px; border-radius: 12px; border: 1px solid var(--line); font: inherit; } .inv-cartsug button:hover { border-color: var(--accent); background: var(--accent-soft); }
/* The staff cart in colour (Draft 11.136, Chris 2026-10-15: "more vibrant and colourful, use the logos") */
.cart-list { display: grid; gap: 10px; margin-top: 14px; }
.cart-row { --sp: var(--accent); --sp-soft: var(--accent-soft); display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 2px solid var(--sp); background: var(--sp-soft); border-radius: 16px; }
.cart-row.sp-p { --sp: #0b2a5b; --sp-soft: rgba(11, 42, 91, .09); } .cart-row.sp-s { --sp: #c8102e; --sp-soft: rgba(200, 16, 46, .08); }
.cart-row .cart-name { flex: 1; min-width: 0; } .cart-row .cart-name b { font-size: 16px; display: block; line-height: 1.2; } .cart-row .cart-name small { color: var(--muted); display: block; margin-top: 1px; }
.inv-sup { display: inline-flex; align-items: center; gap: 7px; background: #fff; border-radius: 999px; padding: 3px 10px 3px 3px; margin-top: 7px; border: 1px solid rgba(0, 0, 0, .08); } .inv-sup img { height: 30px; width: auto; border-radius: 6px; display: block; } .inv-sup.sp-s img { height: 26px; } .inv-sup small { font-size: 11px; color: #555; font-weight: 600; }
.inv-submit { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; font: inherit; font-weight: 700; font-size: 17px; color: #fff; background: var(--accent); border-radius: 26px; padding: 26px 22px; flex: none; min-width: 132px; box-shadow: 0 10px 24px rgba(0, 0, 0, .14); transition: transform .15s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.inv-submit .ic { width: 60px; height: 60px; } button.inv-submit:hover { transform: translateY(-2px); } .inv-submit:focus-visible { outline: 3px solid var(--accent-soft); } button.inv-submit:disabled { opacity: .45; cursor: default; transform: none; }
.inv-submit.sent { background: var(--ok, #1a7f4b); cursor: default; }
.sf-phone .inv-submit { flex-direction: row; width: 100%; justify-content: center; padding: 14px; } .sf-phone .inv-submit .ic { width: 32px; height: 32px; }
@media (max-width: 760px) { .inv-submit { flex-direction: row; width: 100%; justify-content: center; padding: 14px; } .inv-submit .ic { width: 32px; height: 32px; } }
/* Staff inventory restyle (Draft 11.137, Chris 2026-10-15, after a mock-up he liked): dark scan header, pill tabs, batch strip, white rows, Submit at the bottom */
.inv-hero { background: #10303d; color: #fff; border-radius: 20px; padding: 22px 24px 24px; margin: 4px 0 16px; box-shadow: 0 14px 34px rgba(16, 48, 61, .25); }
.inv-hero h1 { color: #fff; margin: 0 0 4px; font-size: 26px; } .inv-hero p { margin: 0 0 14px; color: rgba(255, 255, 255, .78); font-size: 14px; }
.inv-hero .inv-bigscan { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px; background: rgba(0, 0, 0, .32); border-radius: 16px; text-align: left; }
.inv-hero .inv-bigbox { flex: 1; min-width: 0; margin: 0; max-width: none; background: #fff; border: 2px solid transparent; border-radius: 12px; padding: 6px 14px; box-shadow: none; }
.inv-hero .inv-bigbox .ic { width: 28px; height: 28px; } .inv-hero .inv-bigbox input { font-size: 22px; font-weight: 500; padding: 8px 0; }
.inv-hero .inv-bigbox:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(16, 122, 120, .35); }
.inv-add { all: unset; box-sizing: border-box; cursor: pointer; font: inherit; font-weight: 700; font-size: 16px; color: #fff; background: var(--accent); border-radius: 12px; padding: 0 22px; height: 52px; display: inline-flex; align-items: center; } .inv-add:hover { filter: brightness(1.08); }
.inv-cam { all: unset; box-sizing: border-box; cursor: pointer; width: 52px; height: 52px; border-radius: 12px; background: rgba(255, 255, 255, .14); color: #fff; display: inline-flex; align-items: center; justify-content: center; } .inv-cam .ic { width: 22px; height: 22px; } .inv-cam:hover { background: rgba(255, 255, 255, .24); }
.inv-pills { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.inv-pills button { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font: inherit; font-weight: 600; font-size: 14px; color: var(--fg); background: var(--panel); border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 16px; }
.inv-pills button .ic { width: 18px; height: 18px; } .inv-pills button em { font-style: normal; background: rgba(255, 255, 255, .25); border-radius: 999px; padding: 1px 8px; font-size: 12px; margin-left: 4px; }
.inv-pills button.on { background: var(--accent); border-color: var(--accent); color: #fff; } .inv-pills button:not(.on) em { background: var(--accent-soft); color: var(--accent); } .inv-pills button:not(.on):hover { border-color: var(--accent); color: var(--accent); }
.cart-batch { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 16px 20px; margin-bottom: 12px; }
.cart-batch h2 { margin: 0; font-size: 20px; } .cart-batch p { margin: 4px 0 0; } .cart-count { font-size: 26px; font-weight: 700; color: var(--muted); opacity: .6; white-space: nowrap; }
.cart-list { display: grid; gap: 10px; margin-top: 0; }
.cart-row { --sp: var(--accent); --sp-soft: var(--accent-soft); display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 2px solid var(--sp); background: var(--panel); border-radius: 16px; }
.cart-ico { width: 46px; height: 46px; border-radius: 12px; background: var(--sp-soft); color: var(--sp); font-weight: 700; font-size: 18px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.cart-badge { font-size: 11.5px; font-weight: 600; border-radius: 999px; padding: 2px 9px; } .cart-badge.warn { background: #fff4d6; color: #8a5a00; border: 1px solid #f3dc9a; } .cart-badge.bad { background: #fde8e8; color: #a11a1a; border: 1px solid #f3b4b4; }
.cart-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; font-size: 12px; color: var(--muted); } .cart-row .cart-meta b { display: inline; color: var(--fg); font-weight: 600; font-size: 12.5px; }
.cart-meta .inv-sup { margin-top: 0; }
.cart-row .inv-qty { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 4px; gap: 2px; }
.cart-row .inv-qty button { width: 36px; height: 36px; border-radius: 9px; border: 0; font-size: 20px; background: transparent; color: var(--muted); } .cart-row .inv-qty button:last-of-type { background: var(--sp); color: #fff; } .cart-row .inv-qty button:first-of-type:hover { background: var(--panel); color: var(--sp); }
.inv-qn { display: inline-flex; flex-direction: column; align-items: center; min-width: 40px; line-height: 1; } .inv-qn b { font-size: 17px; color: var(--fg); } .inv-qn small { font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.cart-del { all: unset; box-sizing: border-box; cursor: pointer; width: 36px; height: 36px; border-radius: 10px; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; flex: none; } .cart-del .ic { width: 18px; height: 18px; } .cart-del:hover { background: #fde8e8; color: #a11a1a; }
.cart-submitbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 16px; padding: 14px 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; }
.cart-submit { display: inline-flex; align-items: center; gap: 8px; border-radius: 12px; padding: 10px 18px; font-weight: 700; } .cart-submit .ic { width: 18px; height: 18px; } .cart-submitbar > span .ic { vertical-align: -3px; width: 16px; height: 16px; color: var(--ok, #2e8b57); } .cart-submit .ic { color: #fff; }
.inv-cartadd { margin-top: 12px; }
@media (max-width: 640px) { .cart-row { flex-wrap: wrap; } .cart-row .cart-name { flex-basis: calc(100% - 60px); } }
/* Staff cart rows as one list with light dividers, no box per item (Draft 11.139, Chris 2026-10-15) */
.inv-staff .cart-list { gap: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 0 18px; }
.inv-staff .cart-row { border: 0; border-radius: 0; background: none; padding: 14px 0; }
.inv-staff .cart-row + .cart-row { border-top: 1px solid var(--line); }
/* Shelf levels at order and on arrival, On its way, reorder suggestions (Draft 11.140, Chris 2026-10-15) */
.lvl-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; } .lvl-row > small { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.lvl-row .link { all: unset; cursor: pointer; font-size: 12.5px; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; margin-left: 4px; }
.lvl-pick { display: inline-flex; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 3px; }
.lvl-pick button { all: unset; box-sizing: border-box; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); padding: 6px 12px; border-radius: 7px; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.lvl-pick button:hover { background: var(--panel); color: var(--fg); }
.lvl-pick button.lvl-perfect.on { background: #1f8a4c; color: #fff; } .lvl-pick button.lvl-low.on { background: #e0a100; color: #2b1d00; } .lvl-pick button.lvl-out.on { background: #c62828; color: #fff; }
.way-row .lvl-pick button.lvl-perfect:hover { background: #e3f4ea; color: #1f6b3d; } .way-row .lvl-pick button.lvl-low:hover { background: #fff4d6; color: #8a5a00; } .way-row .lvl-pick button.lvl-out:hover { background: #fde8e8; color: #a11a1a; }
.cart-badge.lvb-perfect { background: #e3f4ea; color: #1f6b3d; border: 1px solid #b9e2c8; } .cart-badge.lvb-low { background: #fff4d6; color: #8a5a00; border: 1px solid #f3dc9a; } .cart-badge.lvb-out { background: #fde8e8; color: #a11a1a; border: 1px solid #f3b4b4; }
.way-batch { border: 2px solid var(--accent); } .way-gap { height: 18px; }
.arrive-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 4px 0 14px; }
.arrive-pick button { all: unset; box-sizing: border-box; cursor: pointer; text-align: center; font: inherit; font-weight: 700; font-size: 16px; padding: 16px 10px; border-radius: 14px; border: 2px solid; }
.arrive-pick .lvl-perfect { border-color: #1f8a4c; color: #1f6b3d; background: #e3f4ea; } .arrive-pick .lvl-low { border-color: #e0a100; color: #8a5a00; background: #fff4d6; } .arrive-pick .lvl-out { border-color: #c62828; color: #a11a1a; background: #fde8e8; }
.arrive-pick button:hover { filter: brightness(.96); }
.inv-sug { border: 2px solid var(--accent); margin-bottom: 14px; }
ul.plain.inv-suglist li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.inv-sugchg { font-size: 13px; color: var(--muted); white-space: nowrap; } .inv-sugchg b { color: var(--fg); }
@media (max-width: 760px) { ul.plain.inv-suglist li { grid-template-columns: 1fr; } }
/* The road's words in a bubble, no card around the road (Draft 11.141, Chris 2026-10-15) */
.road-bubble { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 10px 14px; gap: 3px; box-shadow: 0 2px 8px rgba(0, 0, 0, .05); }
.road-bubble::after { content: ''; position: absolute; right: -7px; top: 50%; width: 12px; height: 12px; background: var(--panel); border-right: 1px solid var(--line); border-top: 1px solid var(--line); transform: translateY(-50%) rotate(45deg); }
.road-bubble b { font-size: 15px; line-height: 1.25; } .road-bubble small { font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.fam-road.alldone .road-bubble b { color: #1f7a3a; }
@media (max-width: 900px) { .road-bubble::after { right: auto; left: 28px; top: auto; bottom: -7px; transform: rotate(135deg); } }
/* On its way: Arrived button; the order PDF for Claude on the desktop (Draft 11.141, Chris 2026-10-15) */
.way-act { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; } .way-act .link { all: unset; cursor: pointer; font-size: 12.5px; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.way-arrived { display: inline-flex; align-items: center; gap: 6px; border-radius: 12px; padding: 10px 16px; font-weight: 700; } .way-arrived .ic { width: 18px; height: 18px; color: #fff; }
.arrive-pick button.on { box-shadow: 0 0 0 3px var(--panel), 0 0 0 5px currentColor; }
.stpaper.odpaper { height: auto; min-height: 11in; overflow: visible; font-size: 9.5pt; }
.odpaper header { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; border-bottom: 2px solid #111; padding-bottom: 6px; margin-bottom: 8px; }
.odpaper header h1 { font-size: 17pt; margin: 2px 0 0; color: #111; } .odpaper header small { color: #555; }
.odp-note { background: #f1f5f5; border: 1px solid #cfdcdc; border-radius: 6px; padding: 6px 9px; margin: 0 0 10px; }
.odp-tbl { width: 100%; border-collapse: collapse; } .odp-tbl th { text-align: left; font-size: 8pt; text-transform: uppercase; letter-spacing: .04em; color: #555; border-bottom: 1px solid #111; padding: 4px 5px; }
.odp-tbl td { border-bottom: 1px solid #ddd; padding: 5px; vertical-align: top; } .odp-tbl td small { display: block; color: #555; font-size: 8pt; } .odp-tbl .num { text-align: right; white-space: nowrap; }
.odp-tot { text-align: right; font-weight: 700; margin: 6px 0 10px; }
.odpaper h2 { font-size: 11pt; margin: 12px 0 4px; color: #111; } .odpaper ul, .odp-rules { margin: 0; padding-left: 18px; } .odp-rules li { margin-bottom: 3px; }
@media print { body.printing-pages .stpaper.odpaper { height: auto; min-height: 0; } }
.way-row .lvl-pick button.lvl-perfect.on { background: #1f8a4c; color: #fff; } .way-row .lvl-pick button.lvl-low.on { background: #e0a100; color: #2b1d00; } .way-row .lvl-pick button.lvl-out.on { background: #c62828; color: #fff; }
/* The road's bubble in Messages blue, like a text (Draft 11.142, Chris 2026-10-15: "make it not white") */
.road-bubble, .road-bubble::after { background: #1a73e8; border-color: #1a73e8; }
.road-bubble { box-shadow: 0 4px 12px rgba(26, 115, 232, .25); } .road-bubble b, .fam-road.alldone .road-bubble b { color: #fff; } .road-bubble small { color: rgba(255, 255, 255, .88); }
.fam-road.alldone .road-bubble, .fam-road.alldone .road-bubble::after { background: #1f8f3c; border-color: #1f8f3c; } .fam-road.empty .road-bubble, .fam-road.empty .road-bubble::after { background: #8a96a3; border-color: #8a96a3; }
/* Email Dr. Holladay + Print PDF, and the Waiting for items page (Draft 11.144, Chris 2026-10-15) */
.cart-print { display: inline-flex; align-items: center; gap: 8px; border-radius: 12px; padding: 10px 16px; font-weight: 600; } .cart-print .ic { width: 18px; height: 18px; }
.way-next { display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px dashed var(--line); border-radius: 16px; padding: 12px 16px; margin-bottom: 0; }
.way-next > span { width: 38px; height: 38px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; flex: none; } .way-next > span .ic { width: 20px; height: 20px; }
.way-next p { margin: 0; }
/* Recommended order quantity beside the SKU (Chris, 2026-10-15, Draft 11.144) */
.cart-row .cart-meta .cart-rec { background: #e8f5ee; color: #1f6b3f; border-radius: 999px; padding: 2px 10px; }
.cart-row .cart-meta .cart-rec b { color: #14532d; }
/* A note on one order line (Draft 11.148, Chris 2026-10-15: "order pink bibs this time") */
.cart-note { display: inline-flex; align-items: center; gap: 6px; background: #fff4d6; color: #6b4600; border-radius: 999px; padding: 2px 10px 2px 8px; max-width: 100%; } .cart-note .ic { width: 14px; height: 14px; flex: none; } .cart-note > span { white-space: normal; }
.cart-notebtn { all: unset; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; color: var(--accent); padding: 2px 4px; border-radius: 6px; } .cart-notebtn:hover { background: var(--accent-soft); } .cart-note .cart-notebtn { color: #6b4600; }
.cart-noteform { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; } .cart-noteform input { flex: 1; min-width: 200px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font: inherit; font-size: 16px; }
.od-note { color: #6b4600; }
/* Undo the emailed order (Draft 11.150, Chris 2026-10-15) */
.way-undo { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 14px; font-weight: 600; color: var(--accent); border: 1.5px solid var(--line); background: var(--panel); border-radius: 10px; padding: 7px 12px; } .way-undo .ic { width: 16px; height: 16px; } .way-undo:hover { border-color: var(--accent); }