/* crm.css — the practice workspace.

   The CRM used to live in modal dialogs. A modal is right for one decision and
   wrong for a place someone works all day: it cannot hold a list beside a
   record, it forgets where you were, and it puts everything behind an overlay
   that begs to be dismissed. This is a full surface with its own navigation,
   built like the reading desk rather than like a prompt. */

.crm-screen { position:fixed; inset:0; z-index:190; background:var(--paper);
  display:none; flex-direction:column; }
.crm-screen.open { display:flex; }
body.crm-on { overflow:hidden; }

/* ---- top bar ---- */
.cw-top { display:flex; align-items:center; gap:14px; padding:12px 20px;
  border-bottom:1px solid var(--line); background:var(--surface); flex:0 0 auto; }
.cw-brand { font-family:var(--head); font-size:16px; color:var(--accent);
  font-weight:700; letter-spacing:.02em; white-space:nowrap; }
.cw-who { color:var(--muted); font-size:12.5px; margin-left:auto;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cw-top .sc-btn { flex:0 0 auto; }
/* Where you are, next to the brand — so the bar answers the question before
   the eye has to hunt for the highlighted nav item. */
.cw-here { font-family:var(--head); font-size:13.5px; color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.cw-here:before { content:"›"; margin-right:9px; color:var(--line); }
.cw-shut { flex:0 0 auto; border:0; background:transparent; color:var(--muted);
  font-size:17px; line-height:1; padding:6px 8px; border-radius:7px; cursor:pointer; }
.cw-shut:hover { background:var(--panel); color:var(--accent-2); }

/* A section that draws its own screen inside the workspace pane — the remedy
   book and the importer, which used to replace the workspace with a dialog. */
.cw-embed .fb-lead { color:var(--muted); font-size:12.5px; margin:0 0 14px; }
.cw-embed .cf-head { font-family:var(--head); font-size:12px; text-transform:uppercase;
  letter-spacing:.07em; color:var(--gold); margin:20px 0 8px; font-weight:700; }

/* ---- nav + body ---- */
.cw-body { flex:1 1 auto; display:flex; min-height:0; }
.cw-nav { flex:0 0 190px; border-right:1px solid var(--line); padding:12px 10px;
  overflow-y:auto; background:var(--surface); }
.cw-nav button { display:flex; align-items:center; gap:9px; width:100%;
  text-align:left; padding:9px 12px; margin-bottom:2px; border:0; border-radius:8px;
  background:transparent; color:var(--muted); font-family:var(--head);
  font-size:13.5px; cursor:pointer; }
.cw-nav button:hover { background:var(--panel); color:var(--ink); }
.cw-nav button.active { background:color-mix(in srgb,var(--gold) 18%,var(--surface));
  color:var(--accent-2); font-weight:600; }
.cw-nav .cw-count { margin-left:auto; font-family:var(--mono); font-size:11px;
  color:var(--muted); }
.cw-main { flex:1 1 auto; overflow-y:auto; padding:20px 24px 60px; min-width:0; }

.cw-h { font-family:var(--head); font-size:20px; color:var(--accent); margin:0 0 3px; }
.cw-sub { color:var(--muted); font-size:12.5px; margin:0 0 16px; }
.cw-sec { margin:0 0 22px; }
.cw-sec > h3 { font-family:var(--head); font-size:12px; text-transform:uppercase;
  letter-spacing:.07em; color:var(--gold); margin:0 0 8px; font-weight:700; }

/* ---- list ---- */
.cw-bar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
.cw-bar input, .cw-bar select { background:var(--panel); color:var(--ink);
  border:1px solid var(--line); border-radius:8px; padding:8px 11px;
  font-family:var(--body); font-size:13px; min-width:0; }
.cw-bar .grow { flex:1 1 14em; }

.cw-list { width:100%; border-collapse:collapse; font-size:13.5px; }
.cw-list th { text-align:left; font-size:11px; text-transform:uppercase;
  letter-spacing:.05em; color:var(--gold); font-weight:700; padding:6px 10px;
  border-bottom:1px solid var(--line); cursor:pointer; white-space:nowrap; }
.cw-list td { padding:9px 10px; border-bottom:1px solid var(--line-soft); }
.cw-list tr:hover td { background:var(--panel); }
.cw-list .nm { font-weight:600; cursor:pointer; color:var(--ink); }
.cw-list .nm:hover { color:var(--accent); }
.cw-list .sub { color:var(--muted); font-size:11.5px; }
.cw-empty { color:var(--muted); font-size:13px; padding:18px 0; }

/* ---- record ---- */
.cw-rec-top { display:flex; align-items:flex-start; gap:14px; margin-bottom:4px; }
.cw-rec-top h2 { margin:0; font-family:var(--head); font-size:22px; color:var(--accent); }
.cw-acts { margin-left:auto; display:flex; gap:7px; flex-wrap:wrap; flex:0 0 auto; }
.cw-tabs { display:flex; gap:4px; flex-wrap:wrap; border-bottom:1px solid var(--line);
  margin:14px 0 16px; }
.cw-tabs button { border:0; background:transparent; color:var(--muted);
  font-family:var(--head); font-size:13px; padding:8px 13px; cursor:pointer;
  border-bottom:2px solid transparent; }
.cw-tabs button.active { color:var(--accent-2); border-bottom-color:var(--gold);
  font-weight:600; }

.cw-form { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:12px; }
.cw-f { display:flex; flex-direction:column; gap:3px; min-width:0; }
.cw-f label { font-size:11px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--gold); font-weight:700; }
.cw-f input, .cw-f select, .cw-f textarea { background:var(--panel); color:var(--ink);
  border:1px solid var(--line); border-radius:8px; padding:8px 11px;
  font-family:var(--body); font-size:13.5px; width:100%; min-width:0; }
.cw-f textarea { resize:vertical; line-height:1.6; }
.cw-f.wide { grid-column:1 / -1; }
.cw-save { display:flex; align-items:center; gap:10px; margin-top:14px; }

.cw-row { display:flex; gap:10px; align-items:baseline; padding:7px 0;
  border-bottom:1px dotted var(--line-soft); font-size:13px; }
.cw-row:last-child { border-bottom:0; }
.cw-when { font-family:var(--mono); font-size:11.5px; color:var(--accent-2);
  flex:0 0 6.5em; font-variant-numeric:tabular-nums; }
.cw-what { flex:1 1 auto; min-width:0; }
/* What kind of thing a feed row is. Two families, deliberately: what the engine
   worked out, and what the practitioner wrote down. The second is the one that
   cannot be recomputed if it is missed, so it is the one that carries colour. */
.cw-kind { flex:0 0 auto; font-family:var(--mono); font-size:10px;
  letter-spacing:.04em; text-transform:lowercase; padding:1px 6px;
  border-radius:9px; border:1px solid var(--line-soft); color:var(--muted); }
.cw-k-kept { color:var(--accent-2); border-color:var(--accent-2); }
.cw-k-note { color:var(--accent-2); border-color:var(--line-soft); }
.cw-detail { color:var(--muted); font-size:11.5px; }
.cw-tail { color:var(--muted); font-size:11.5px; flex:0 0 auto; }

/* Who is around a person. Scrolls inside itself on a narrow screen rather than
   pushing the page sideways. */
.rd-wrap { margin:2px 0 14px; overflow-x:auto; }
.rd { display:block; width:100%; min-width:420px; height:auto; }
.rd-e { stroke:var(--line-soft); stroke-width:1.2; }
.rd-e-u { stroke-dasharray:3 3; }
.rd-n rect { fill:var(--panel, transparent); stroke:var(--line-soft); stroke-width:1; }
.rd-n text { fill:var(--fg); font-size:12px; text-anchor:middle;
  font-family:inherit; dominant-baseline:middle; }
.rd-n .rd-sub { fill:var(--muted); font-size:9.5px; }
.rd-n[data-peer] { cursor:pointer; }
.rd-n[data-peer]:hover rect { stroke:var(--accent-2); }
.rd-ego rect { stroke:var(--accent-2); stroke-width:1.6; }
.rd-ego text { font-weight:600; }
.rd-note { color:var(--muted); font-size:11.5px; margin:4px 0 0; }
.cw-x { cursor:pointer; color:var(--muted); font-size:12px; padding:0 4px; }
.cw-x:hover { color:var(--accent-2); }
.cw-add { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:10px; }
.cw-add input, .cw-add select { background:var(--panel); color:var(--ink);
  border:1px solid var(--line); border-radius:7px; padding:7px 9px;
  font-family:var(--body); font-size:12.5px; min-width:0; }

@media (max-width: 820px) {
  .cw-body { flex-direction:column; }
  .cw-nav { flex:0 0 auto; display:flex; gap:4px; overflow-x:auto; padding:8px;
    border-right:0; border-bottom:1px solid var(--line); }
  .cw-nav button { width:auto; white-space:nowrap; margin-bottom:0; }
  .cw-nav .cw-count { display:none; }
  .cw-main { padding:14px 13px 50px; }
  .cw-rec-top { flex-wrap:wrap; }
  .cw-acts { margin-left:0; width:100%; }
}

/* ===== The front door ===== */
.home-screen { position:fixed; inset:0; z-index:210; background:var(--paper);
  display:none; overflow-y:auto; }
.home-screen.open { display:block; }
body.home-on { overflow:hidden; }
.hm-wrap { max-width:620px; margin:0 auto; padding:11vh 22px 60px; text-align:center; }
.hm-brand { display:flex; align-items:center; justify-content:center; gap:10px; }
.hm-mark { color:var(--gold); font-size:26px; }
.hm-word { font-family:var(--head); font-size:26px; color:var(--accent);
  font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.hm-lede { color:var(--muted); font-size:14.5px; line-height:1.7; margin:14px auto 30px;
  max-width:44ch; }
.hm-cards { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.hm-card { display:flex; flex-direction:column; gap:5px; align-items:flex-start;
  text-align:left; padding:20px 22px; border-radius:12px; cursor:pointer;
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  transition:border-color .14s, transform .14s; }
.hm-card:hover { border-color:var(--gold); transform:translateY(-1px); }
.hm-ct { font-family:var(--head); font-size:17px; color:var(--accent); font-weight:700; }
.hm-cd { font-size:12.5px; color:var(--muted); line-height:1.5; }
.hm-who { color:var(--muted); font-size:12.5px; margin-top:22px; }
.hm-who a, .hm-foot a { color:var(--accent); }
.hm-foot { margin-top:34px; padding-top:16px; border-top:1px solid var(--line);
  display:flex; gap:16px; justify-content:center; flex-wrap:wrap;
  font-size:12.5px; color:var(--muted); }
@media (max-width:560px) {
  .hm-cards { grid-template-columns:1fr; }
  .hm-wrap { padding-top:7vh; }
}
/* ===== Booking page =====
   The one screen in the workspace that describes something the practitioner
   does not own: a page other people look at. So it reads top-down — what is
   waiting on you, the link itself, then everything the link shows. */

.bk-req { display:flex; gap:12px; align-items:flex-start; padding:11px 12px;
  border:1px solid var(--line); border-left:3px solid var(--gold); border-radius:9px;
  background:var(--surface); margin-bottom:8px; }
.bk-when { flex:0 0 5.6em; font-family:var(--mono); font-size:11.5px; line-height:1.5;
  color:var(--accent-2); font-variant-numeric:tabular-nums; }
.bk-who { flex:1 1 auto; min-width:0; font-size:13.5px; }
.bk-who .sub { color:var(--muted); font-size:11.5px; margin-top:2px; }
.bk-note { margin-top:6px; padding:7px 10px; border-radius:7px; background:var(--panel);
  color:var(--muted); font-size:12.5px; line-height:1.6; white-space:pre-wrap; }
.bk-acts { display:flex; gap:6px; flex-wrap:wrap; flex:0 0 auto; align-items:flex-start; }

.bk-link { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.bk-pre { font-family:var(--mono); font-size:12.5px; color:var(--muted); }
.bk-link input { background:var(--panel); color:var(--ink); border:1px solid var(--line);
  border-radius:8px; padding:8px 11px; font-family:var(--mono); font-size:13px;
  width:14em; min-width:0; }

.bk-switch { display:flex; gap:9px; align-items:flex-start; margin-top:12px;
  font-size:12.5px; color:var(--muted); line-height:1.6; cursor:pointer; }
.bk-switch input { margin-top:3px; flex:0 0 auto; }
.bk-switch b { color:var(--ink); }
.bk-chips { display:flex; gap:14px; flex-wrap:wrap; font-size:13px; }
.bk-chips label { display:flex; align-items:center; gap:6px; cursor:pointer; }

.bk-hours { display:grid; gap:5px; }
.bk-day { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:6px 0; border-bottom:1px dotted var(--line-soft); }
.bk-dn { flex:0 0 6.5em; font-size:12.5px; color:var(--ink); }
.bk-spans { display:flex; gap:8px; flex-wrap:wrap; align-items:center; flex:1 1 auto; }
.bk-span { display:inline-flex; align-items:center; gap:5px; }
.bk-span input { background:var(--panel); color:var(--ink); border:1px solid var(--line);
  border-radius:7px; padding:5px 8px; font-family:var(--mono); font-size:12.5px; }
.bk-span em { font-style:normal; color:var(--muted); font-size:11.5px; }
.bk-span .cw-x { font-weight:400; }
.bk-off { color:var(--muted); font-size:12px; font-style:italic; }
.bk-add { padding:4px 10px !important; }

.bk-qr { display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; margin-top:12px; }
.bk-qr img { width:150px; height:150px; object-fit:contain; background:#fff;
  border:1px solid var(--line); border-radius:9px; padding:6px; }
.bk-noqr { width:150px; height:150px; display:flex; align-items:center; justify-content:center;
  border:1px dashed var(--line); border-radius:9px; color:var(--muted); font-size:12px; }
.bk-qr input[type=file] { font-size:12px; color:var(--muted); max-width:100%; }

@media (max-width: 820px) {
  .bk-req { flex-wrap:wrap; }
  .bk-acts { width:100%; }
  .bk-dn { flex:0 0 100%; }
}

/* City picker on the client record */
.cw-cities { display:none; position:absolute; top:100%; left:0; right:0; z-index:20;
  max-height:260px; overflow-y:auto; background:var(--surface);
  border:1px solid var(--line); border-radius:8px; margin-top:3px;
  box-shadow:0 8px 24px rgba(0,0,0,.12); }
.cw-cities.open { display:block; }
.cw-cities div { padding:8px 11px; cursor:pointer; font-size:13px; }
.cw-cities div:hover { background:var(--panel); }
.cw-cities .ct { color:var(--muted); font-size:11.5px; }