/* DVBP team area. Hub look (docs/spec/design-brief.md → Hub): calm, exact, a little warm. Fonts are self-hosted
   (static/fonts, SIL Open Font License), never loaded from a CDN. */
@font-face { font-family: "Instrument Sans"; font-weight: 400; font-display: swap; src: url(fonts/instrument-sans-400.woff2) format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-weight: 500; font-display: swap; src: url(fonts/instrument-sans-500.woff2) format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-weight: 600 900; font-display: swap; src: url(fonts/instrument-sans-600.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap; src: url(fonts/jetbrains-mono-400.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 500 900; font-display: swap; src: url(fonts/jetbrains-mono-500.woff2) format("woff2"); }
:root {
  /* "plum mist" neutral ramp (light): Daniel's pick of five, 30 Oct 2026 */
  --bg: #f8f5f8; --card: #fff; --raised: #f0e9ef;
  --hair: rgba(40, 24, 38, .08); --hair-2: rgba(40, 24, 38, .13);
  --text: #221a21; --text-2: #5a4f59; --text-3: #776b75;
  /* sidebar: dark warm graphite (shell.css) */
  --s-bg: #161513; --s-raised: #24221f; --s-input: #1d1c19; --s-line: rgba(239, 233, 222, .08);
  --s-text: #efe9de; --s-text-2: #aaa398; --s-muted: #8a847a; --s-accent: #e7a6d6;
  /* one accent, used rarely: DVBP plum */
  --accent: #b41d8d; --accent-ink: #74205d; --accent-soft: #f7ecf4;
  --font: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);
  /* older names, mapped onto the ramp so every page picks up the look */
  --purple: var(--accent);
  --purple-dark: var(--accent-ink);
  --lilac: var(--accent-soft);
  --lilac-2: #f1e2ec;
  --ink: var(--text);
  --muted: var(--text-2);
  --faint: var(--text-3);
  --line: var(--hair);
  --line-strong: var(--hair-2);
  --paper: var(--card);
  --amber: #9a5b13;
  --amber-bg: #fff6e8;
  --amber-line: #f0d3a6;
  --red: #a3264b;
  --red-bg: #fdf0f3;
  --green: #2f6b55;
  --green-bg: #eef7f2;
  --shadow: 0 1px 2px rgba(31, 27, 22, .04);
  --radius: 12px;
  font-family: var(--font);
  font-synthesis: style;   /* no faux bold: heavier weights than 600 draw the 600 face */
  color: var(--ink);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); min-height: 100vh; line-height: 1.45; }
a { color: var(--purple-dark); }
a:hover { color: var(--purple); }
h1, h2, h3 { color: var(--ink); font-weight: 500; letter-spacing: 0; line-height: 1.2; }
h1 { letter-spacing: -.01em; }
h1 { font-size: 26px; margin: 0; }
h2 { font-size: 19px; margin: 0 0 12px; }
h3 { font-size: 16px; margin: 0 0 8px; }
p { margin: 0 0 10px; color: var(--muted); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid rgba(180, 29, 141, .35); outline-offset: 2px; }
[hidden] { display: none !important; }
.show-sm { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- top bar: replaced by the workspace shell (shell.css); .brand stays for the log-in card ---------- */
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--purple-dark); flex: none; }
.brand img { width: 36px; height: 36px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.brand strong { display: block; font-size: 15px; letter-spacing: -.01em; }
.brand small { display: block; font-size: 11px; color: var(--purple); text-transform: uppercase; letter-spacing: .12em; font-weight: 750; }
.linkbtn { background: none; border: 0; padding: 6px 8px; color: var(--purple-dark); font-weight: 650; cursor: pointer; border-radius: 8px; }
.linkbtn:hover { background: var(--lilac); }

main.page { max-width: none; margin: 0 auto; padding: 22px 22px 60px; }
main.narrow { max-width: 1120px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.page-head p { margin: 4px 0 0; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- common bits ---------- */
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); }
.card + .card { margin-top: 16px; }
.grid2 { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.stack > * + * { margin-top: 16px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 0 15px; border-radius: 999px; border: 1px solid rgba(180, 29, 141, .24); background: var(--lilac-2); color: var(--purple-dark); font-weight: 700; font-size: 14px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { background: #f0d6ea; color: var(--purple-dark); }
.btn.primary { background: var(--purple); border-color: var(--purple); color: #fff; }
.btn.primary:hover { background: #9d1a7b; color: #fff; }
.btn.ghost { background: #fff; color: #5f5360; border-color: var(--line-strong); }
.btn.ghost:hover { background: var(--lilac); }
.btn.danger { background: #fff; color: var(--red); border-color: rgba(163, 38, 75, .3); }
.btn.danger:hover { background: var(--red-bg); }
.btn.warn { background: var(--amber); border-color: var(--amber); color: #fff; }
.btn.small { min-height: 30px; padding: 0 11px; font-size: 13px; }
.btn:disabled { opacity: .55; cursor: default; }
.iconbtn { width: 38px; padding: 0; font-size: 18px; line-height: 1; }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--lilac); color: var(--purple-dark); border: 1px solid rgba(180, 29, 141, .14); white-space: nowrap; }
.pill.confirmed { background: var(--green-bg); color: var(--green); border-color: #cfe5da; }
.pill.reserved { background: var(--amber-bg); color: var(--amber); border-color: var(--amber-line); border-style: dashed; }
.pill.cancelled, .pill.expired, .pill.released, .pill.off { background: #f4f2f5; color: var(--faint); border-color: var(--line); }
.pill.held { background: var(--lilac); }
.pill.sent { background: var(--green-bg); color: var(--green); border-color: #cfe5da; }
.pill.failed { background: var(--red-bg); color: var(--red); border-color: #f0c9d4; }
.pill.override { background: var(--amber-bg); color: var(--amber); border-color: var(--amber-line); }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: 13px; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.empty { text-align: center; padding: 38px 16px; color: var(--muted); }

/* forms */
.field { display: grid; gap: 5px; margin-bottom: 12px; min-width: 0; }
.field > span, .field > label { font-weight: 650; font-size: 13px; color: #4d3f4b; }
.input, .field input, .field select, .field textarea { width: 100%; border: 1px solid var(--line-strong); border-radius: 12px; padding: 9px 11px; background: #fff; min-height: 40px; min-width: 0; }
.field textarea { min-height: 84px; resize: vertical; }
.input:focus, .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--purple); box-shadow: 0 0 0 3px rgba(180, 29, 141, .14); }
.row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.row3 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.check { display: flex; gap: 8px; align-items: center; font-size: 14px; cursor: pointer; }
.check input { width: 17px; height: 17px; accent-color: var(--purple); }
.form-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.msg { border-radius: 12px; padding: 10px 12px; font-size: 14px; margin: 10px 0; }
.msg.error { background: var(--red-bg); color: var(--red); border: 1px solid #f0c9d4; }
.msg.ok { background: var(--green-bg); color: var(--green); border: 1px solid #cfe5da; }
.clash { background: var(--amber-bg); border: 1px solid var(--amber-line); border-radius: 14px; padding: 12px 14px; margin: 12px 0; color: #6b3f0c; }
.clash strong { display: block; margin-bottom: 4px; }
.clash ul { margin: 6px 0 10px; padding-left: 18px; font-size: 14px; }
.clash p { color: #6b3f0c; font-size: 14px; }

/* tables */
.table-wrap { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
table.list { width: 100%; border-collapse: collapse; font-size: 14px; }
table.list th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--purple-dark); background: var(--lilac); padding: 10px 14px; font-weight: 750; border-bottom: 1px solid var(--line); }
table.list td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.list tr:last-child td { border-bottom: 0; }
table.list tbody tr.link { cursor: pointer; }
table.list tbody tr.link:hover td { background: #fdf8fc; }
table.list td .sub { display: block; color: var(--faint); font-size: 12.5px; margin-top: 2px; }
.ref { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; letter-spacing: .02em; }
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.tabs { display: inline-flex; gap: 3px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.tabs button, .tabs a { border: 0; background: none; padding: 6px 12px; border-radius: 999px; cursor: pointer; font-weight: 650; font-size: 13px; color: #5f5360; text-decoration: none; }
.tabs .on { background: var(--lilac-2); color: var(--purple-dark); }
.search { min-width: 240px; flex: 1; max-width: 360px; border: 1px solid var(--line-strong); border-radius: 999px; padding: 8px 14px; background: #fff; }

dl.facts { display: grid; grid-template-columns: 130px 1fr; gap: 8px 14px; margin: 0; font-size: 14px; }
dl.facts dt { color: var(--faint); }
dl.facts dd { margin: 0; overflow-wrap: anywhere; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline > li { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.timeline > li:last-child { border-bottom: 0; }
.appts { list-style: none; margin: 0; padding: 0; }
.appts li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.appts li:last-child { border-bottom: 0; }
.appts li.cancelled strong { color: var(--faint); text-decoration: line-through; }
.appts .sub { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.timeline .when { color: var(--faint); font-size: 12.5px; }
.timeline .lines { margin: 4px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: 13px; }

/* toast */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: #3d2c3b; color: #fff; padding: 10px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; opacity: 0; pointer-events: none; transition: .2s ease; z-index: 100; box-shadow: var(--shadow); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- login ---------- */
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 20% 10%, #fbeef8 0, transparent 45%), linear-gradient(180deg, #fff, var(--lilac)); }
.login-card { width: min(420px, 100%); background: #fff; border: 1px solid var(--line); border-radius: 26px; box-shadow: 0 24px 70px rgba(89, 68, 88, .10); padding: 32px 30px 26px; }
.login-card .brand { margin-bottom: 22px; }
.login-card .brand img { width: 46px; height: 46px; }
.login-card h1 { font-size: 24px; margin-bottom: 6px; }
.login-card .btn { width: 100%; min-height: 44px; margin-top: 4px; }
.code-input { font-size: 26px !important; letter-spacing: .4em; text-align: center; font-variant-numeric: tabular-nums; }
.login-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; font-size: 13px; }
/* the Hub host's own log-in page (hub_login.html): plum mist page, white card, the Microsoft button */
body.hub-login .login-page { background: var(--pg-bg); }
.hub-login-card { border-radius: var(--radius); box-shadow: var(--pg-card-shadow); border-color: var(--pg-line); }
.hub-login-card h1 { font-weight: 500; letter-spacing: -.01em; color: var(--pg-text); }
.hub-login-card .muted { color: var(--pg-muted); margin: 0 0 20px; }
.hub-login-card .ms-btn { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; border: 1px solid var(--pg-line-2); border-radius: 8px; background: #fff; color: var(--pg-text); font-weight: 500; text-decoration: none; }
.hub-login-card .ms-btn:hover { background: var(--pg-raised); }
.hub-login-card .ms-btn svg { width: 18px; height: 18px; flex: none; }
.hub-login-error { background: var(--red-bg); color: var(--red); border-radius: 8px; padding: 10px 12px; font-size: 14px; margin: 0 0 14px; }
.hub-login-alt { margin: 16px 0 0; font-size: 13px; text-align: center; }
.hub-login-alt a { color: var(--pg-accent-ink); }

/* ---------- diary ---------- */
.diary-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.diary-head h1 { font-size: 22px; min-width: 210px; }
.diary-nav { display: inline-flex; gap: 6px; align-items: center; }
.diary-head .spacer { flex: 1; }
.people { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.person-toggle { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 9px; border-radius: 999px; border: 1px solid var(--line-strong); background: #fff; cursor: pointer; font-weight: 650; font-size: 14px; color: #5f5360; user-select: none; }
.person-toggle .dot { width: 12px; height: 12px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6); }
.person-toggle[aria-pressed="true"] { background: color-mix(in srgb, var(--c) 12%, #fff); border-color: color-mix(in srgb, var(--c) 45%, #fff); color: #3d2c3b; }
.person-toggle[aria-pressed="false"] .dot { background: #fff !important; box-shadow: inset 0 0 0 2px var(--c); }
.person-toggle[aria-pressed="false"] { color: var(--faint); }
.people .linkbtn { font-size: 13px; white-space: nowrap; flex: none; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); margin-left: auto; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { display: inline-block; width: 22px; height: 12px; border-radius: 4px; }
.legend .lg-booked { background: #f3e1ee; border-left: 3px solid var(--purple); }
.legend .lg-reserved { background: repeating-linear-gradient(135deg, #fff 0 4px, #f6e5f1 4px 8px); border: 1px dashed var(--purple); }
.legend .lg-off { background: repeating-linear-gradient(135deg, #f1edf1 0 4px, #e7e1e7 4px 8px); border: 1px solid #d8d0d7; }
.legend .lg-buffer { background: repeating-linear-gradient(135deg, #f7f2f6 0 4px, #ece4eb 4px 8px); border: 1px solid #ddd2dc; }
.legend .lg-free { background: rgba(120, 190, 160, .16); border: 1px dashed rgba(79, 117, 105, .6); }
.legend .lg-offday { background: repeating-linear-gradient(135deg, #f1edf1 0 4px, #e6e0e6 4px 8px); border: 1px solid #ddd5dc; }
.legend .lg-busy { background: #e9e5ea; border: 1px solid #d8d0d7; }
.legend .lg-closed { background: #f5f2f5; border: 1px solid var(--line); }

.diary { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: auto; max-height: calc(100vh - 210px); min-height: 420px; position: relative; }
.diary-grid { display: grid; min-width: 100%; position: relative; }
.dh-corner, .dh-day { position: sticky; top: 0; z-index: 6; background: #fff; border-bottom: 1px solid var(--line); }
.dh-corner { left: 0; z-index: 8; }
.dh-day { border-left: 1px solid var(--line); padding: 8px 6px 6px; text-align: center; min-width: 0; }
.dh-day .dname { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); font-weight: 700; }
.dh-day .dnum { font-size: 18px; font-weight: 750; color: #4d3f4b; line-height: 1.2; }
.dh-day.today .dnum { color: #fff; background: var(--purple); border-radius: 999px; display: inline-block; min-width: 30px; padding: 0 6px; }
.dh-day.today .dname { color: var(--purple); }
.dh-day button.daylink { all: unset; cursor: pointer; display: block; border-radius: 10px; padding: 0 2px; }
.dh-day button.daylink:hover .dnum { color: var(--purple); }
.lane-heads { display: flex; gap: 0; margin-top: 4px; }
.lane-heads span { flex: 1; min-width: 0; font-size: 11px; font-weight: 700; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-top: 3px solid var(--c); padding-top: 2px; }
.diary-grid.dayview .lane-heads span { font-size: 13px; padding-top: 4px; }
.gutter { position: sticky; left: 0; z-index: 5; background: #fff; border-right: 1px solid var(--line); }
.gutter .hr { position: absolute; right: 6px; font-size: 11px; color: var(--faint); transform: translateY(-7px); font-variant-numeric: tabular-nums; }
.day-col { position: relative; border-left: 1px solid var(--line); display: flex; min-width: 0; }
.day-col.today { background: #fffbfe; }
.lines-bg { position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--hour) - 1px), rgba(89, 68, 88, .09) calc(var(--hour) - 1px), rgba(89, 68, 88, .09) var(--hour)), repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--hour) / 2 - 1px), rgba(89, 68, 88, .04) calc(var(--hour) / 2 - 1px), rgba(89, 68, 88, .04) calc(var(--hour) / 2)); z-index: 1; }
.lane { position: relative; flex: 1; min-width: 0; background: #f3f0f3; }
.lane + .lane { border-left: 1px dashed rgba(89, 68, 88, .10); }
.lane.can-add { cursor: copy; }
.work { position: absolute; left: 0; right: 0; background: color-mix(in srgb, var(--c) 4%, #fff); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--c) 25%, #fff), inset 0 -1px 0 color-mix(in srgb, var(--c) 25%, #fff); }
.now-line { position: absolute; left: 0; right: 0; height: 2px; background: var(--purple); z-index: 4; pointer-events: none; }
.now-line::before { content: ""; position: absolute; left: -4px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--purple); }

.offday { position: absolute; left: 3px; right: 3px; z-index: 1; pointer-events: none; border-radius: 8px; border: 1px solid #ddd5dc; background: repeating-linear-gradient(135deg, #f1edf1 0 6px, #e9e4e9 6px 12px); display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 18px; color: #6a6170; font-size: 12px; font-weight: 700; text-align: center; overflow: hidden; }
.offday span { background: rgba(255, 255, 255, .85); border-radius: 999px; padding: 3px 8px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.offday .offday-link { pointer-events: auto; font-weight: 600; font-size: 11.5px; color: var(--purple-dark, #74205d); text-decoration: underline; text-underline-offset: 2px; background: rgba(255, 255, 255, .85); border-radius: 6px; padding: 2px 6px; }
.big-figure { display: block; font-size: 26px; color: var(--purple-dark); margin: 6px 0 8px; font-variant-numeric: tabular-nums; }
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.stat-grid .card + .card { margin-top: 0; }
.stat h2 { margin: 0 0 4px; font-size: 13px; color: var(--muted); font-weight: 650; }
.stat strong { display: block; font-size: 24px; color: var(--purple-dark); font-variant-numeric: tabular-nums; }
table.mini { width: 100%; border-collapse: collapse; font-size: 14px; }
table.mini th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 650; padding: 4px 6px; }
table.mini td { padding: 6px; border-top: 1px solid var(--line); }
table.mini .num { text-align: right; font-variant-numeric: tabular-nums; }
table.mini tr.on td { background: var(--lilac); }
@media (max-width: 760px) { .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.free { position: absolute; left: 3px; right: 3px; z-index: 1; pointer-events: none; border: 1px dashed rgba(79, 117, 105, .6); border-radius: 7px; background: rgba(120, 190, 160, .16); color: #3f6357; font-size: 11px; font-weight: 650; padding: 3px 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.buf { position: absolute; left: 2px; right: 2px; z-index: 2; pointer-events: none; border-radius: 5px; background: repeating-linear-gradient(135deg, #f7f2f6 0 4px, #ece4eb 4px 8px); border: 1px solid #ddd2dc; color: #6a5a68; font-size: 9.5px; font-weight: 700; line-height: 1; padding: 1px 5px; overflow: hidden; white-space: nowrap; display: flex; align-items: center; }
.buf.reserved { border-style: dashed; }
.ev { position: absolute; z-index: 3; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; font: inherit; border-radius: 7px; padding: 3px 5px; font-size: 11.5px; line-height: 1.25; overflow: hidden; cursor: pointer; text-align: left; border: 1px solid color-mix(in srgb, var(--c) 30%, #fff); border-left: 3px solid var(--c); background: color-mix(in srgb, var(--c) 14%, #fff); color: #3d2c3b; box-shadow: 0 1px 2px rgba(89, 68, 88, .08); min-height: 14px; }
.ev:hover, .ev:focus-visible { z-index: 5; box-shadow: 0 6px 18px rgba(89, 68, 88, .18); }
.ev .t { font-weight: 700; font-size: 10.5px; color: color-mix(in srgb, var(--c) 70%, #2f2530); font-variant-numeric: tabular-nums; }
.ev .n { font-weight: 650; display: block; overflow: hidden; text-overflow: ellipsis; }
.ev .s { display: block; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev.short { flex-direction: row; gap: 4px; align-items: baseline; white-space: nowrap; }
.ev.short .n { min-width: 0; }
.ev .t { flex: none; }
.ev .n { white-space: nowrap; }
.ev.compact { padding: 2px 4px; }
.ev.compact .n { text-overflow: ellipsis; }
.ev.reserved { background: repeating-linear-gradient(135deg, #fff 0 5px, color-mix(in srgb, var(--c) 11%, #fff) 5px 10px); border: 1.5px dashed var(--c); border-left-width: 3px; }
.ev.reserved .s.exp { color: var(--amber); font-weight: 700; }
.ev.block { background: repeating-linear-gradient(135deg, #f3eff3 0 5px, #e9e3e9 5px 10px); border-color: #d6ccd5; border-left-color: color-mix(in srgb, var(--c) 60%, #9b8f99); color: #4d3f4b; }
.ev.busy { background: #ebe7ec; border: 1px solid #d9d2d9; border-left: 3px solid #b9aeb8; color: #6a6170; cursor: help; }
.ev.clashing { box-shadow: 0 0 0 2px #e7a43a; }
.ev.locked { cursor: pointer; }
.ev.flash { animation: flash 1.4s ease 2; }
@keyframes flash { 50% { box-shadow: 0 0 0 4px rgba(180, 29, 141, .45); } }
.diary-loading { position: absolute; top: 10px; right: 14px; z-index: 9; font-size: 12px; color: var(--faint); }

/* drawer */
.scrim { position: fixed; inset: 0; background: rgba(61, 44, 59, .18); z-index: 60; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.scrim.open { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100%); background: #fff; z-index: 61; box-shadow: -20px 0 60px rgba(89, 68, 88, .16); transform: translateX(104%); transition: transform .25s ease; display: flex; flex-direction: column; border-left: 1px solid var(--line); }
.drawer.open { transform: none; }
.drawer-head { padding: 18px 20px 12px; border-bottom: 1px solid var(--line); display: flex; gap: 12px; align-items: flex-start; background: linear-gradient(180deg, var(--lilac), #fff); }
.drawer-head .who { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.drawer-head h2 { margin: 0 0 6px; font-size: 19px; }
.drawer-head .pills { display: flex; gap: 6px; flex-wrap: wrap; }
.drawer-head .close { margin-left: auto; flex: none; }
.drawer-body { padding: 16px 20px 28px; overflow-y: auto; overflow-x: hidden; flex: 1; }
.drawer-body section { margin-bottom: 18px; }
.drawer-body h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--purple-dark); margin-bottom: 8px; }
.provisional { background: var(--amber-bg); border: 1px dashed var(--amber-line); color: #6b3f0c; border-radius: 12px; padding: 9px 12px; font-size: 13.5px; margin-bottom: 14px; }
.readonly-note { background: var(--lilac); border-radius: 12px; padding: 9px 12px; font-size: 13.5px; color: var(--purple-dark); margin-bottom: 14px; }
.drawer-foot { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.drawer-foot .grow { flex: 1; }

/* ---------- team / packages ---------- */
.people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; align-items: start; }
.people-grid > .card, .grid2 > .card { margin-top: 0; }
.person-card h2 { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.hours-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 10px; }
.hours-table td { padding: 5px 4px; vertical-align: middle; }
.hours-table { table-layout: fixed; }
.hours-table td:first-child { width: 72px; font-weight: 650; }
.hours-table td:last-child { width: 26px; text-align: center; padding: 0; }
.hours-table .linkbtn { padding: 4px 6px; font-size: 16px; line-height: 1; }
.hours-table select { border: 1px solid var(--line-strong); border-radius: 10px; padding: 5px 7px; background: #fff; width: 100%; min-height: 34px; font-variant-numeric: tabular-nums; }
.hours-table select:disabled { background: #f6f3f6; color: var(--faint); }
.hours-table tr.off td:not(:first-child) { opacity: .6; }
.hours-read { list-style: none; margin: 8px 0 0; padding: 0; font-size: 14px; }
.hours-read li { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px dashed var(--line); }
.hours-read li span:last-child { color: var(--muted); }
.pkg { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 18px; }
.pkg ol { margin: 6px 0 0; padding-left: 20px; font-size: 14px; color: var(--muted); }
.pkg ol li { padding: 2px 0; }
.prices { display: grid; gap: 6px; }
.prices div { display: flex; justify-content: space-between; padding: 8px 12px; border-radius: 12px; background: var(--lilac); font-size: 14px; }
.prices strong { color: var(--purple-dark); }
details.mail { border-bottom: 1px solid var(--line); }
details.mail:last-child { border-bottom: 0; }
details.mail summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 14px; padding: 12px 16px; align-items: center; font-size: 14px; }
details.mail summary::-webkit-details-marker { display: none; }
details.mail summary:hover { background: #fdf8fc; }
details.mail[open] summary { background: var(--lilac); }
details.mail .mail-preview { display: block; width: 100%; height: 640px; border: 0; border-top: 1px solid var(--line); background: #f4eff4; }
details.mail pre { margin: 0; padding: 14px 18px 18px; white-space: pre-wrap; font-family: inherit; font-size: 14px; color: #4d3f4b; background: #fff; border-top: 1px solid var(--line); }
.subj { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- small screens ---------- */
@media (max-width: 900px) {
  .grid2, .pkg { grid-template-columns: 1fr; }
  .legend { margin-left: 0; }
}
@media (max-width: 760px) {
  :root { font-size: 14.5px; }
  main.page { padding: 14px 12px 50px; }
  h1 { font-size: 22px; }
  .hide-sm { display: none; }
  .show-sm { display: inline; }
  .diary-head { gap: 6px; }
  .diary-head h1 { font-size: 18px; min-width: 0; flex-basis: 100%; order: -1; }
  .diary-head .btn { min-height: 34px; }
  .diary-head .iconbtn { width: 34px; }
  .diary-head .spacer { display: none; }
  #add-off { margin-left: auto; padding: 0 12px; }
  .tabs button { padding: 5px 10px; }
  .diary { max-height: calc(100vh - 230px); }
  .people { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
  .person-toggle { flex: none; }
  .legend { display: none; }
  .drawer { top: auto; height: 88vh; width: 100%; border-radius: 22px 22px 0 0; transform: translateY(104%); border-left: 0; }
  .drawer.open { transform: none; }
  .row3 { grid-template-columns: 1fr 1fr; }
  .row3 > :first-child { grid-column: 1 / -1; }
  dl.facts { grid-template-columns: 105px 1fr; }
  .search { max-width: none; min-width: 0; flex-basis: 100%; }
  table.list.stack-sm thead { display: none; }
  table.list.stack-sm, table.list.stack-sm tbody, table.list.stack-sm tr, table.list.stack-sm td { display: block; width: 100%; }
  table.list.stack-sm tr { padding: 10px 14px; border-bottom: 1px solid var(--line); }
  table.list.stack-sm td { border: 0; padding: 2px 0; }
  table.list.stack-sm td[data-label]::before { content: attr(data-label) ": "; color: var(--faint); font-size: 12.5px; }
  table.list.stack-sm td.first { font-weight: 700; display: flex; justify-content: space-between; gap: 8px; }
  table.list.stack-sm td .sub { display: inline; margin-left: 4px; font-weight: 400; }
  table.list.stack-sm td.first .sub { display: block; margin-left: 0; }
  table.list.stack-sm td:not(.first):not([data-label]) { margin-top: 4px; }
  .tabs { overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .tabs button, .tabs a { white-space: nowrap; }
  details.mail summary { grid-template-columns: 1fr auto; }
  details.mail summary .when { grid-column: 1 / -1; font-size: 12.5px; color: var(--faint); }
  .people-grid { grid-template-columns: 1fr; }
  .appts li { grid-template-columns: minmax(0, 1fr) auto; }
  .appts li .btn { grid-column: 1 / -1; justify-self: start; }
}

/* Client videos and photos (booking detail) */
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.file-group { padding: 12px 0; border-bottom: 1px solid var(--line); }
.file-group:last-of-type { border-bottom: 0; }
.file-group h3 { font-size: 15px; margin: 0 0 8px; }
.client-file { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 14px; align-items: start; padding: 8px 0; }
.client-file-media video, .client-file-media img { width: 100%; max-height: 360px; border-radius: 12px; background: #1f1720; display: block; object-fit: contain; }
.client-file-wait { display: grid; place-items: center; min-height: 120px; border-radius: 12px; background: var(--lilac); color: var(--muted); font-size: 13px; }
.client-file-info { font-size: 14px; display: grid; gap: 4px; justify-items: start; }
.client-file-info strong { overflow-wrap: anywhere; }
.client-file-info .sub { color: var(--muted); font-size: 13px; }
.client-file-note { margin: 4px 0; white-space: pre-line; }
@media (max-width: 700px) { .client-file { grid-template-columns: 1fr; } }

/* Clients and video reviews */
.pager { display: flex; justify-content: center; gap: 10px; margin-top: 16px; }
table.list tr.has-new td.first a { font-weight: 800; }
.pill.new-count { background: var(--amber-bg); color: var(--amber); border-color: var(--amber-line); }
.animal-card h2 .small { font-weight: 500; }
.animal-bookings { list-style: none; margin: 8px 0 4px; padding: 0; font-size: 14px; display: grid; gap: 4px; }
.review-status { display: flex; gap: 6px; flex-wrap: wrap; }
.add-animal { display: grid; gap: 10px; }
.add-animal .field span { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.notify-settings, .notify-log { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.notify-settings li, .notify-log li { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; }
.notifications-box h3 { margin: 12px 0 0; }

/* Subtitles and chapters on a video review (captions.js; review tool and client page). */
.review-captions { margin-top: 12px; width: 100%; }
.cap-box { border-top: 1px solid var(--line); padding-top: 12px; display: grid; gap: 8px; justify-items: stretch; }
.cap-box h3.cap-title { margin: 0; font-size: 15px; }
.cap-box h4 { margin: 6px 0 0; font-size: 14px; }
.cap-status { margin: 0; color: var(--muted); font-size: 14px; }
.cap-hint { margin: 0; color: var(--muted); }
.cap-chapters, .cap-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cap-chapters li { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.cap-chapters input { width: 100%; min-height: 34px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: 14px; }
.cap-chapters .cap-time { font-variant-numeric: tabular-nums; text-align: center; }
.cap-chapters input:disabled, .cap-lines textarea:disabled { background: #f6f3f6; color: var(--ink); border-color: transparent; }
.cap-transcript summary { cursor: pointer; font-weight: 700; font-size: 14px; color: var(--purple-dark); }
.cap-transcript[open] summary { margin-bottom: 8px; }
.cap-lines { max-height: 420px; overflow: auto; padding-right: 4px; }
.cap-lines li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 8px; align-items: start; }
.cap-lines textarea { width: 100%; resize: vertical; min-height: 34px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: 14px; line-height: 1.4; }
.cap-seek { border: 0; background: var(--lilac); color: var(--purple-dark); border-radius: 8px; padding: 6px 4px; font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; cursor: pointer; }
.cap-msg { color: #b91c1c; }
.cap-msg.is-ok { color: var(--muted); }
/* ---------- client finder: one search for clients, animals and vet practices ---------- */
.finder { position: sticky; top: 57px; z-index: 20; background: linear-gradient(var(--bg) 82%, rgba(252, 250, 252, 0)); padding: 4px 0 14px; margin-bottom: 6px; }
.finder-box { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line-strong); border-radius: 16px; padding: 0 14px; box-shadow: var(--shadow); transition: border-color .15s, box-shadow .15s; }
.finder-box:focus-within { border-color: rgba(180, 29, 141, .45); box-shadow: 0 0 0 4px rgba(180, 29, 141, .1), var(--shadow); }
.finder-box svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--purple-dark); stroke-width: 2; stroke-linecap: round; }
.finder-box input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 17px; padding: 14px 0; }
.finder-box input::-webkit-search-cancel-button { cursor: pointer; }
.finder-box kbd { font: 600 12px/1 inherit; color: var(--faint); border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 6px; padding: 3px 7px; }
.finder-filters { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.finder-filters .tabs .count { color: var(--faint); font-weight: 600; font-variant-numeric: tabular-nums; }
.finder-filters .tabs .on .count { color: var(--purple); }
.species-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { border: 1px solid var(--line); background: #fff; color: #5f5360; padding: 5px 11px; border-radius: 999px; font-size: 13px; font-weight: 650; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.chip:hover { background: var(--lilac); }
.chip.on { background: var(--lilac-2); color: var(--purple-dark); border-color: rgba(180, 29, 141, .25); }
.finder-results { transition: opacity .15s; }
.finder-results[aria-busy="true"] { opacity: .55; }
.finder-section + .finder-section { margin-top: 26px; }
.finder-section .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.finder-section .section-head h2 { margin: 0; font-size: 17px; }
.results-list { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.result mark { background: #fbe6a6; color: inherit; border-radius: 3px; padding: 0 1px; }
.client-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 16px; padding: 14px 18px; align-items: start; }
.client-row + .client-row { border-top: 1px solid var(--line); }
.client-row.has-new { box-shadow: inset 3px 0 0 var(--purple); }
.row-title { font-weight: 750; font-size: 16px; color: #3d2c3b; text-decoration: none; }
a.row-title:hover { color: var(--purple); text-decoration: underline; }
.row-sub { color: var(--muted); font-size: 13px; margin-top: 2px; overflow-wrap: anywhere; }
.row-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.row-vets { margin-top: 8px; font-size: 13px; color: var(--muted); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.animal-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 11px; border-radius: 999px; background: var(--lilac); border: 1px solid rgba(180, 29, 141, .12); text-decoration: none; color: var(--purple-dark); font-size: 13px; transition: background .15s; }
.animal-chip:hover { background: var(--lilac-2); color: var(--purple-dark); }
.animal-chip span { color: var(--faint); font-size: 12px; }
.vet-link { border: 0; background: none; padding: 0; color: var(--purple-dark); font-weight: 650; cursor: pointer; text-align: left; text-decoration: underline; text-decoration-color: rgba(116, 32, 93, .3); text-underline-offset: 3px; }
.vet-link:hover { color: var(--purple); text-decoration-color: currentColor; }
.vet-card .row-title .vet-link { font-size: 16px; font-weight: 750; text-decoration: none; color: #3d2c3b; }
.vet-card .row-title .vet-link:hover { color: var(--purple); text-decoration: underline; }
.animal-card-mini, .vet-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; }
.vet-card .chips { margin-top: 10px; }
.chip.more { padding: 4px 10px; font-size: 12px; }
.mini-facts { display: grid; gap: 4px; margin: 10px 0 0; font-size: 13px; }
.mini-facts div { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 8px; }
.mini-facts dt { color: var(--faint); }
.mini-facts dd { margin: 0; overflow-wrap: anywhere; }
.more-note { margin-top: 10px; font-size: 13px; }
@media (max-width: 760px) {
  .finder { top: 53px; }
  .finder-box input { font-size: 16px; padding: 12px 0; }
  .finder-filters { flex-direction: column; align-items: stretch; }
  .finder-filters .tabs { display: flex; width: 100%; }
  .finder-filters .tabs button { flex: 1; white-space: nowrap; padding: 7px 6px; }
  .species-chips { min-width: 0; }
  .species-chips .chip { white-space: nowrap; }
  .client-row { grid-template-columns: 1fr; gap: 10px; padding: 13px 14px; }
}

/* Sorting a client's video or photo into a category */
.sort-file { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin: 4px 0; font-size: 13px; }
.sort-file label { color: var(--muted); font-weight: 600; }
.sort-file select { font: inherit; font-size: 14px; min-height: 34px; max-width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 4px 8px; background: #fff; }

/* Environment banner (dev/staging only; set by env-banner.js from the hostname) */
.environment-banner{display:none;padding:10px 18px;text-align:center;color:#fff;font:900 14px/1.3 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:.03em}
.environment-banner.dev{display:block;background:#b91c1c}
.environment-banner.staging{display:block;background:#15803d}.environment-banner.preprod{display:block;background:#b45309}
.environment-banner span{display:block;opacity:.92;font-weight:700;font-size:12px;letter-spacing:0;margin-top:2px}

/* Long email addresses wrap instead of pushing table buttons out of the card */
table.list td .sub { overflow-wrap: anywhere; }
table.list .access-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
table.list.stack-sm .access-stack { flex-direction: row; flex-wrap: wrap; align-items: center; }
/* ---------- entity pages (client, animal, practice, professional): one section at a time ---------- */
.entity-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.entity-head h1 { margin: 0; }
.entity-head .sub { color: var(--muted); margin-top: 4px; }
.entity-links { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.entity-tabs { margin: 4px 0 18px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.entity-tabs a { white-space: nowrap; }
.entity-tabs .count { color: var(--faint); font-weight: 600; font-variant-numeric: tabular-nums; }
.entity-tabs .on .count { color: var(--purple); }
.facts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 20px; margin: 0; }
.facts-grid dt { color: var(--faint); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.facts-grid dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.timeline li:first-child { border-top: 0; }
.timeline .when { color: var(--faint); font-size: 13px; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .timeline li { grid-template-columns: 1fr; gap: 2px; } }

/* ---------- client page ---------- */
.client-contact { margin: 4px 0 0; overflow-wrap: anywhere; }
.client-head .entity-links { align-items: center; }
.client-head .entity-links .pill { text-decoration: none; }
.client-counts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.client-counts a { display: block; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--muted); font-size: 13px; }
.client-counts a:hover { background: var(--lilac); }
.client-counts b { display: block; font-size: 20px; color: var(--purple-dark); font-variant-numeric: tabular-nums; }
.next-appt { margin: 0; line-height: 1.6; }
.client-animals { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; align-items: start; }
.client-animals > .card + .card { margin-top: 0; }
.client-animals .animal-card h2 { margin: 0; }
.client-animals .animal-card h2 a { text-decoration: none; }
.client-animals .animal-card > p { margin: 2px 0 10px; }
.client-animals dl.facts { grid-template-columns: 105px minmax(0, 1fr); }
.client-bookings { list-style: none; margin: 0; padding: 0; }
.client-bookings li { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 4px 14px; padding: 10px 0; border-top: 1px solid var(--line); align-items: baseline; }
.client-bookings li:first-child { border-top: 0; padding-top: 0; }
.row-foot { margin-top: 8px; font-size: 13px; display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.vet-card a.row-title { display: inline-block; }
.pro-card .row-sub .pill { margin-left: 4px; }
.client-videos .file-group .empty.small { padding: 4px 0 2px; text-align: left; }
@media (max-width: 760px) {
  .client-bookings li { grid-template-columns: 1fr; }
  /* Five directory views: wrap onto a second line rather than hide some off-screen. */
  .finder-filters .tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); overflow: visible; border-radius: 18px; width: 100%; }
  .finder-filters .tabs button { grid-column: span 2; text-align: center; padding: 7px 4px; }
  /* Record sections (client, animal, practice, professional, team): one line of underlined tabs, edge to edge,
     that swipes sideways on its own (the page never does). The current tab is kept in view and a soft fade shows
     there are more (shell.js recordTabs sets .more-l / .more-r). */
  main.page .entity-tabs { display: flex; flex-wrap: nowrap; gap: 2px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; background: none; border: 0; border-bottom: 1px solid var(--line);
    border-radius: 0; padding: 0 12px; margin: 2px -12px 16px; max-width: none; width: auto; }
  main.page .entity-tabs::-webkit-scrollbar { display: none; }
  main.page .entity-tabs a { flex: none; border-radius: 0; background: none; padding: 11px 10px 10px; font-size: 14px;
    border-bottom: 2px solid transparent; margin-bottom: -1px; text-align: left; }
  main.page .entity-tabs a.on { background: none; color: var(--purple-dark); border-bottom-color: var(--purple); }
  main.page .entity-tabs.more-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
  main.page .entity-tabs.more-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px); mask-image: linear-gradient(90deg, transparent, #000 36px); }
  main.page .entity-tabs.more-l.more-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
  .finder-filters .tabs button:nth-child(n+4) { grid-column: span 3; }
}

/* ---------- practices and professionals ---------- */
.ent-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ent-card-head h2 { margin: 0; }
.ent-wide { grid-column: 1 / -1; }
.ent-notes { white-space: pre-line; }
.ent-form { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.ent-form h3 { margin: 0 0 12px; }
#practice-new.ent-form { margin-top: 0; padding-top: 0; border-top: 0; }
.ent-kind { border: 0; padding: 0; margin: 0 0 14px; display: flex; gap: 18px; flex-wrap: wrap; }
.ent-kind legend { font-weight: 650; font-size: 13px; color: #4d3f4b; margin-bottom: 6px; padding: 0; }
.ent-narrow { max-width: 760px; }
.ent-sub { margin: 18px 0 6px; font-size: 14px; color: var(--muted); }
.ent-list { list-style: none; margin: 0; padding: 0; }
.ent-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 16px; flex-wrap: wrap; padding: 11px 0; border-top: 1px solid var(--line); min-width: 0; }
.ent-list li:first-child { border-top: 0; }
.ent-main { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; min-width: 0; }
.ent-main a { text-decoration: none; }
.ent-side { display: flex; gap: 2px 14px; flex-wrap: wrap; justify-content: flex-end; color: var(--muted); min-width: 0; overflow-wrap: anywhere; }
.ent-former li, .ent-list li.ent-ended { opacity: .72; }
.ent-similar { list-style: none; margin: 0 0 12px; padding: 0; }
.ent-similar li { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; padding: 6px 0; min-width: 0; }
.ent-similar li .btn { margin-left: auto; }
.ent-left { margin-top: 14px; }
@media (max-width: 760px) {
  .ent-side { flex-direction: column; gap: 2px; }
}

/* ---------- animal page ---------- */
.animal-head .sub { margin: 4px 0 0; overflow-wrap: anywhere; }
.animal-head .entity-links { align-self: center; }
.animal-ref { white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
dialog.history-request { width: min(620px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: 16px; background: var(--bg, #fff); color: inherit; box-shadow: 0 18px 60px rgba(20, 15, 22, .35); }
dialog.history-request::backdrop { background: rgba(20, 15, 22, .55); }
.history-request .hr-inner { padding: 20px 22px; }
.history-request h2 { margin: 0 0 4px; }
.history-request .hr-intro { margin: 0 0 14px; }
.history-request .hr-fields { margin: 0 0 12px; display: grid; gap: 6px; }
.history-request .hr-fields > div { display: grid; grid-template-columns: 70px 1fr; gap: 8px; min-width: 0; }
.history-request .hr-fields dt { font-weight: 700; color: var(--muted, #6b6070); }
.history-request .hr-fields dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.history-request .hr-body { margin: 0 0 12px; padding: 12px 14px; border-radius: 10px; background: var(--lilac, #f6eef8); white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: 14px; line-height: 1.5; max-height: 40dvh; overflow-y: auto; }
.history-request .hr-soon { margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; border: 1px dashed var(--amber-line, #e6c98a); background: var(--amber-bg, #fff8e8); font-size: 14px; }
.history-request .hr-problem { margin: 0 0 12px; }
.history-request .form-actions { justify-content: flex-end; }
.animal-page .pill { text-decoration: none; }
.animal-page .facts-grid > div { min-width: 0; }
.animal-page .facts-grid .contact-line { display: block; }
.overview-pair { margin-top: 16px; }
.overview-pair .card-head { margin-bottom: 8px; }
.overview-pair .card-head h2 { margin: 0; }
.plain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.note-body { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); margin: 6px 0 0; }
.note-body.clamp { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.notes, .meds, .consult-list, .item-list { list-style: none; margin: 0; padding: 0; }
.note, .med { padding: 14px 0; border-top: 1px solid var(--line); min-width: 0; }
.note:first-child, .med:first-child { border-top: 0; padding-top: 4px; }
.note-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.note-actions, .med-actions { margin-top: 8px; }
.note-edit, .med-edit { margin-top: 8px; }
.note-add .field, .med-add .field { margin-bottom: 8px; }
.consult-list { display: grid; gap: 14px; }
.consult-list .card + .card { margin-top: 0; }
.consult-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.consult-head h2 { margin: 0; font-size: 17px; }
.consult-head .sub { margin: 4px 0 0; color: var(--muted); }
.consult .notes { margin-top: 10px; border-top: 1px solid var(--line); }
.consult .note:first-child { padding-top: 14px; }
.add-toggle { margin-top: 12px; }
.add-toggle > summary { cursor: pointer; display: inline-flex; font-weight: 700; font-size: 14px; color: var(--purple-dark); padding: 4px 0; list-style: none; }
.add-toggle > summary::-webkit-details-marker { display: none; }
.add-toggle > summary::before { content: '+'; margin-right: 6px; }
.add-toggle[open] > summary::before { content: '–'; }
.add-toggle[open] > summary { margin-bottom: 8px; }
.med-main { display: grid; gap: 2px; min-width: 0; }
.med-name { font-size: 16px; color: #3d2c3b; }
.med-dose { color: var(--ink); }
.med-notes { white-space: pre-wrap; overflow-wrap: anywhere; margin: 4px 0 2px; font-size: 14px; }
.item-list > li { display: flex; justify-content: space-between; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--line); }
.item-list > li:first-child { border-top: 0; padding-top: 2px; }
.item-list > li > div:first-child { display: grid; gap: 2px; min-width: 0; flex: 1 1 220px; }
.item-side { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.file-line { display: flex !important; gap: 12px; align-items: center; }
.file-line > div { display: grid; gap: 2px; min-width: 0; }
.file-note { color: var(--muted); overflow-wrap: anywhere; }
.thumb { width: 72px; height: 54px; flex: none; border-radius: 10px; object-fit: cover; background: var(--lilac); border: 1px solid var(--line); }
.history-title { font-weight: 650; color: #3d2c3b; text-decoration: none; }
a.history-title:hover { color: var(--purple); text-decoration: underline; }
.history-detail { overflow-wrap: anywhere; margin-top: 2px; }
.animal-page .ref { white-space: nowrap; }
.is-target { box-shadow: 0 0 0 3px rgba(180, 29, 141, .18), var(--shadow); }
@media (max-width: 760px) {
  .animal-page .entity-head { align-items: flex-start; }
  .animal-page .row2 { grid-template-columns: 1fr; gap: 0; }
  .animal-page .facts-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .animal-page .facts-grid > .wide { grid-column: 1 / -1; }
  .item-side .btn { flex: 0 0 auto; }
  .thumb { width: 56px; height: 42px; }
}


/* ---------- record tabs without reloads (tabs.js) ---------- */
.tab-pane.is-entering { animation: tab-in .18s ease-out; }
@keyframes tab-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
[data-tab-panes][aria-busy="true"] { cursor: progress; }
@media (prefers-reduced-motion: reduce) { .tab-pane.is-entering { animation: none; } }

/* ---------- client page: possibly the same person (client-merge.js) ---------- */
.client-possible .ent-similar li > .faint { flex: 1 1 14em; min-width: 0; overflow-wrap: anywhere; }

/* ---------- sort, filter and search on team lists (table-tools.js, booking/TABLES.md) ---------- */
[data-tt-row][hidden] { display: none !important; }
.tt-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.tt-filter { position: relative; }
.tt-filter-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-strong); background: #fff; color: #5f5360; padding: 7px 12px; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; transition: background .15s, border-color .15s; }
.tt-filter-btn:hover { background: var(--lilac); }
.tt-filter-btn.on { background: var(--lilac-2); color: var(--purple-dark); border-color: rgba(180, 29, 141, .25); }
.tt-filter-btn svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tt-filter-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.tt-n { background: var(--purple); color: #fff; border-radius: 999px; min-width: 18px; padding: 1px 6px; font-size: 11.5px; line-height: 16px; text-align: center; }
.tt-pop { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; min-width: 220px; max-width: min(320px, 86vw); max-height: 340px; overflow: auto; background: #fff; border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: 0 18px 40px rgba(89, 68, 88, .16); padding: 6px; }
.tt-opt { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 9px; font-size: 14px; cursor: pointer; }
.tt-opt:hover { background: var(--lilac); }
.tt-opt input { width: 16px; height: 16px; accent-color: var(--purple); flex: none; margin: 0; }
.tt-opt span:first-of-type { flex: 1; min-width: 0; }
.tt-opt.none { color: var(--faint); }
.tt-count { color: var(--faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.tt-pop .tt-clear-one { display: block; width: 100%; text-align: left; margin-top: 2px; font-size: 13px; }
.tt-sort-select { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); font-weight: 650; }
.tt-sort-select select { font: inherit; font-weight: 600; color: var(--ink); border: 1px solid var(--line-strong); border-radius: 999px; padding: 6px 10px; background: #fff; max-width: 100%; }
.tt-sort-select.has-head { display: none; }
.tt-summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -4px 0 12px; min-height: 28px; font-size: 13px; color: var(--muted); }
.tt-chips { display: contents; }
.tt-chip { font-size: 12.5px; padding: 3px 10px; }
.tt-reset { font-size: 13px; padding: 3px 6px; }
table.list th[data-tt-sort] { padding: 0; }
.tt-sort { display: flex; align-items: center; gap: 6px; width: 100%; border: 0; background: none; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; text-align: left; padding: 10px 14px; cursor: pointer; }
.tt-sort:hover { background: var(--lilac-2); }
.tt-sort svg { width: 11px; height: 11px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .3; }
th[aria-sort] .tt-sort svg { opacity: 1; }
th[aria-sort="ascending"] .tt-sort .down, th[aria-sort="descending"] .tt-sort .up { opacity: .15; }
.empty .linkbtn { margin-left: 4px; }
.tt-pop-title { display: none; }
@media (max-width: 760px) {
  .tt-sort-select.has-head { display: inline-flex; }
  .tt-sort-select { width: 100%; }
  .tt-sort-select select { flex: 1; }
  .tt-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; margin: 0 -2px; padding: 0 2px; }
  .tt-filter-btn { white-space: nowrap; }
  /* Phones: a sheet over everything on the page, including the bottom bar (45) and the Mabel button (38), under the
     menu drawer (65/70). */
  .tt-pop { position: fixed; z-index: 60; left: 12px; right: 12px; top: auto; bottom: calc(12px + env(safe-area-inset-bottom)); max-width: none; max-height: 60vh; box-shadow: 0 0 0 100vmax rgba(47, 37, 48, .28), 0 18px 40px rgba(89, 68, 88, .16); }
  .tt-pop-title { display: block; font-weight: 750; font-size: 15px; padding: 8px 8px 6px; color: var(--purple-dark); }
}

/* ---------- Insurance quotes tab (INSURANCE.md) ---------- */
.insurance-quotes { list-style: none; margin: 0; padding: 0; }
.insurance-quotes li { display: flex; gap: 10px 16px; align-items: flex-start; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--line); }
.insurance-quotes li:first-child { border-top: 0; padding-top: 0; }
.insurance-quotes .iq-main { min-width: 0; display: grid; gap: 3px; overflow-wrap: anywhere; }
.insurance-quotes .btn { flex: none; }
@media (max-width: 760px) { .insurance-quotes li { flex-direction: column; } }

/* ---------- review pop-up (static/review-popup.js) ---------- */
html.review-popup-open { overflow: hidden; }
dialog.review-popup { position: fixed; inset: 0; width: calc(100vw - 24px); height: calc(100dvh - 24px); max-width: none; max-height: none; margin: auto; padding: 0; border: 0; border-radius: 16px; overflow: hidden; display: none; flex-direction: column; background: var(--bg); color: inherit; box-shadow: 0 18px 60px rgba(20, 15, 22, .35); }
dialog.review-popup[open] { display: flex; }
dialog.review-popup::backdrop { background: rgba(20, 15, 22, .55); }
.review-popup-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 18px; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 1px 6px rgba(20, 15, 22, .06); }
.review-popup-head h2 { margin: 0; font-size: 1.05rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review-popup-head .btn { flex: none; }
.review-popup-body { flex: 1 1 auto; min-height: 0; }
.review-popup-frame { display: block; width: 100%; height: 100%; border: 0; background: transparent; }
/* Inline players on the animal page's Videos tab. */
.item-list > li > .inline-media { flex: 1 1 100%; }
.inline-player { display: block; width: 100%; max-width: 560px; max-height: 360px; border-radius: 12px; background: #140f16; }

/* ---------- workspace shell ---------- */
/* Sticky bits of pages sit under the shell's top bar on phones and at the very top on wide screens (no bar there). */
.shell .finder { top: var(--shell-top); }
body .shell .comms-side { top: calc(var(--shell-top) + 16px); max-height: calc(100vh - var(--shell-top) - 32px); }
@media (max-width: 760px) {
  .shell .finder { top: var(--shell-top); }
}

/* ---- team roles (several per person) and a person's roles on record pages ---- */
.role-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.role-other a { color: inherit; }
.role-edit { margin-top: 6px; }
.role-edit summary { cursor: pointer; font-size: 13px; }
.role-edit form { margin-top: 6px; display: grid; gap: 8px; }
.role-ticks { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.role-ticks legend { padding: 0; margin-bottom: 4px; }
.person-roles { margin: 6px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.person-roles a.pill { text-decoration: none; }

/* ---------- team page and team profiles (ACCESS.md → Team profiles) ---------- */
.team-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.team-list > .team-row { display: grid; grid-template-columns: auto minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: center; gap: 6px 16px; margin: 0; padding: 14px 16px; }
.team-row.is-off { opacity: .72; }
.team-dot { width: 12px; height: 12px; }
.team-who { display: grid; gap: 2px; min-width: 0; }
.team-name-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.team-name { font-weight: 700; font-size: 16px; text-decoration: none; color: var(--ink); }
.team-name:hover { color: var(--purple-dark); text-decoration: underline; }
.team-title { color: var(--muted); font-size: 14px; }
.team-email { overflow-wrap: anywhere; }
.team-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; }
.team-tags .role-chips { display: contents; }
.team-tags .role-other { flex-basis: 100%; color: var(--muted); }
.team-profile-btn { justify-self: end; }
.team-sub { margin-top: 28px; }
.person-card h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 2px; }
.add-member { margin-top: 28px; scroll-margin-top: 80px; }
.team-head h1 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; overflow-wrap: anywhere; }
.team-head h1 .dot { width: 14px; height: 14px; }
.team-head .team-tags { margin-top: 8px; }
.team-profile .card + .card { margin-top: 14px; }
.profile-gaps { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 14px; padding: 10px 14px;
  border-radius: 10px; background: var(--accent-soft); color: var(--accent-ink); }
.team-profile .card h2 { margin-top: 0; }
.team-profile .access-stack { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0; }
.team-profile .role-ticks { margin-bottom: 10px; }
.role-ticks > .field, .role-ticks > p { flex-basis: 100%; margin-bottom: 0; }
.team-profile .facts-grid dd a { overflow-wrap: anywhere; }
.access-matrix { padding: 0; overflow: hidden; }
.access-matrix .am-head { padding: 18px 20px 12px; border-bottom: 1px solid var(--line); }
.access-matrix .am-head h2 { margin: 0 0 2px; }
.access-matrix .am-head p { margin: 0; }
.am-rows { display: grid; }
.am-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(150px, auto); grid-template-areas: "what state control";
  align-items: center; gap: 8px 18px; padding: 14px 20px; border-top: 1px solid var(--line); min-width: 0; }
.am-row:first-child { border-top: 0; }
.am-row:nth-child(even) { background: rgba(118, 98, 116, .035); }
.am-what { grid-area: what; display: grid; gap: 2px; min-width: 0; }
.am-label { font-weight: 700; color: var(--ink); }
.am-help { font-size: 13px; color: var(--muted); line-height: 1.4; }
.am-state { grid-area: state; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; margin: 0; }
.am-control { grid-area: control; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 6px; min-width: 0; }
.am-note { font-size: 13px; color: var(--faint); flex-basis: 100%; }
/* Hub roles: the toggles show the current roles and change them; they span the state and control columns. */
.am-row.am-roles { grid-template-areas: "what state state"; align-items: start; }
.am-roles .am-state { display: grid; gap: 8px; justify-items: start; }
.am-roles .msg { margin: 0; }
.am-save { display: flex; gap: 6px; flex-wrap: wrap; }
.am-save[hidden] { display: none; }
.role-toggles { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.role-toggle { position: relative; display: inline-flex; cursor: pointer; }
.role-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.role-toggle span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--line-strong); background: #fff; color: var(--muted); transition: background .15s, color .15s, border-color .15s; white-space: nowrap; }
.role-toggle span::before { content: ''; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid currentColor; box-sizing: border-box; }
.role-toggle input:checked + span { background: var(--lilac); color: var(--purple-dark); border-color: rgba(180, 29, 141, .35); }
.role-toggle input:checked + span::before { background: var(--purple); border-color: var(--purple); }
.role-toggle input:focus-visible + span { outline: 2px solid var(--purple); outline-offset: 2px; }
.role-toggle:hover input:not(:disabled) + span { border-color: rgba(180, 29, 141, .45); }
.role-toggle.is-locked { cursor: not-allowed; }
.role-toggle input:disabled + span { opacity: .55; }
@media (max-width: 640px) {
  .am-row, .am-row.am-roles { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "what what" "state control"; padding: 12px 14px; }
  .am-row.am-roles { grid-template-areas: "what what" "state state"; }
  .access-matrix .am-head { padding: 14px 14px 10px; }
  .am-control { justify-content: flex-end; }
}
.hours-note { margin: 8px 0 12px; white-space: pre-line; }
.team-profile .hours-form, .team-profile .hours-read { max-width: 460px; }
@media (max-width: 720px) {
  .team-list > .team-row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "dot who btn" ". tags tags"; align-items: start; }
  .team-dot { grid-area: dot; margin-top: 6px; }
  .team-who { grid-area: who; }
  .team-tags { grid-area: tags; }
  .team-profile-btn { grid-area: btn; }
  .add-member .row2 { grid-template-columns: 1fr; gap: 0; }
}

/* ---------- Directory filters, refined (Daniel: one line each, totals, shaded; the rest fade back when one is chosen) ---------- */
.finder, .finder-filters { min-width: 0; max-width: 100%; }
.finder-filters { flex-direction: column; align-items: stretch; gap: 12px; }
.finder-filters > * { min-width: 0; max-width: 100%; }
.finder-filters .tabs { display: grid; grid-auto-flow: column; grid-auto-columns: auto; width: 100%; max-width: 640px; gap: 2px; padding: 4px; border: 0; border-radius: 999px;
  background: linear-gradient(180deg, rgba(118, 98, 116, .16), rgba(118, 98, 116, .08));
  box-shadow: inset 0 1px 2px rgba(60, 30, 55, .14), inset 0 -1px 0 rgba(255, 255, 255, .7); overflow: visible; }
.finder-filters .tabs button { padding: 8px 6px; white-space: nowrap; text-align: center; color: #4a3d49; transition: background .15s, box-shadow .15s, opacity .15s; }
.finder-filters .tabs button:not(.on) { opacity: .75; }
.finder-filters .tabs .on { background: linear-gradient(180deg, #fff, #f8eef6); color: var(--purple-dark); opacity: 1;
  box-shadow: 0 1px 0 #fff inset, 0 4px 12px rgba(116, 32, 93, .18), 0 1px 2px rgba(116, 32, 93, .18), 0 0 0 .5px rgba(116, 32, 93, .12); }
.finder-filters .tabs .count { margin-left: 4px; font-size: 12px; }
.finder-filters .tabs .count:empty { display: none; }
.species-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 8px; padding: 3px 2px 10px; margin: -3px -2px -10px; }
.species-chips::-webkit-scrollbar { display: none; }
.species-chips .chip { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 8px 0 13px; white-space: nowrap;
  font-size: 14px; font-weight: 600; color: #4a3d49; border: .5px solid rgba(255, 255, 255, .9);
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(255, 255, 255, .72));
  box-shadow: 0 1px 0 #fff inset, 0 4px 12px rgba(89, 68, 88, .09), 0 0 0 .5px rgba(89, 68, 88, .14);
  transition: opacity .15s, background .15s, box-shadow .15s; }
.species-chips .chip .n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: inline-grid; place-items: center;
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; background: rgba(116, 32, 93, .09); color: var(--purple-dark); }
.species-chips .chip .n:empty { display: none; }
.species-chips .chip:hover { background: linear-gradient(180deg, #fff, #fbf3fa); }
.species-chips.has-on .chip:not(.on) { opacity: .62; }
.species-chips.has-on .chip:not(.on):hover { opacity: 1; }
.species-chips .chip.on { color: #fff; border-color: transparent; background: linear-gradient(180deg, #b8288f 0%, #9c1d7a 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .28) inset, 0 4px 12px rgba(156, 29, 122, .28), 0 0 0 .5px rgba(116, 32, 93, .4); }
.species-chips .chip.on .n { background: rgba(255, 255, 255, .2); color: #fff; }
/* Touch screens keep :hover on the last thing tapped, which made a second button look chosen. */
@media (hover: none) { .species-chips .chip:hover { background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(255, 255, 255, .72)); }
  .species-chips .chip.on:hover { background: linear-gradient(180deg, #b8288f 0%, #9c1d7a 100%); }
  .species-chips.has-on .chip:not(.on):hover { opacity: .62; } }
@media (max-width: 760px) {
  .finder-filters .tabs { display: grid; grid-template-columns: .75fr 1.2fr 1.3fr 1fr 1fr; grid-auto-flow: row; border-radius: 999px; max-width: none; }
  .finder-filters .tabs button, .finder-filters .tabs button:nth-child(n+4) { grid-column: auto; padding: 8px 2px; font-size: 13px; }
  .finder-filters .tabs .count { margin-left: 3px; font-size: 11.5px; }
  .species-chips { mask-image: linear-gradient(90deg, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); }
}

/* ---------- Directory rows (Daniel: less is more): name and one quiet line, what belongs to it on the right ---------- */
.results-list .dr-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: center; padding: 13px 18px; }
.results-list .dr-row + .dr-row { border-top: 1px solid var(--line); }
.dr-row.has-new { box-shadow: inset 3px 0 0 var(--purple); }
/* Name | what belongs to it, on one line; the quiet line (and any matched contact detail) uses the full width below. */
.dr-row > .row-title { min-width: 0; align-self: center; overflow-wrap: anywhere; }   /* names wrap, never cut off */
.dr-row > .dr-sub, .dr-row > .dr-match { grid-column: 1 / -1; }
.results-list .dr-row { row-gap: 0; }
.dr-sub { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 2px; font-size: 13px; color: var(--muted); }
.dr-sub:empty { display: none; }
.dr-next { color: var(--green); font-weight: 650; }
.dr-new { color: var(--purple); font-weight: 650; }
.dr-match { margin-top: 3px; font-size: 12.5px; color: var(--faint); overflow-wrap: anywhere; }
.dr-side { justify-self: end; align-self: center; min-width: 0; max-width: 100%; text-align: right; margin: -4px 0; }   /* the chip does not push the quiet line down */
.dr-side .chips { justify-content: flex-end; }
.dr-owner { font-size: 13.5px; font-weight: 600; color: var(--purple-dark); text-decoration: none; white-space: nowrap; }
.dr-owner:hover { text-decoration: underline; }
.dr-num, .dr-count { font-size: 13px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.dr-count { border: 0; background: var(--lilac); color: var(--purple-dark); padding: 4px 10px; border-radius: 999px; cursor: pointer; }
.dr-count:hover { background: var(--lilac-2); }
@media (max-width: 760px) {
  .results-list .dr-row { padding: 12px 14px; gap: 6px 12px; }
  .dr-side { max-width: 52vw; }
  .dr-side .chips { gap: 5px; }
  .dr-side .animal-chip { padding: 4px 9px; }
}

.results-list .dr-row[data-row-href] { cursor: pointer; transition: background .12s; }
@media (hover: hover) { .results-list .dr-row[data-row-href]:hover { background: var(--lilac); } }
.results-list .dr-row[data-row-href]:active { background: var(--lilac-2); }

/* ---------- practice page: picture and website up top, recent animals first, contact details folded ---------- */
.practice-head { align-items: center; justify-content: flex-start; }
.practice-photo { width: 132px; height: 88px; object-fit: cover; border-radius: 16px; background: var(--lilac); flex: none;
  box-shadow: 0 6px 18px rgba(89, 68, 88, .14), 0 0 0 .5px rgba(89, 68, 88, .12); }
.practice-title { min-width: 0; }
.practice-site { display: inline-block; margin-top: 3px; color: var(--purple-dark); font-weight: 650; text-decoration: none; overflow-wrap: anywhere; }
.practice-site:hover { text-decoration: underline; }
.practice-recent .results-list { box-shadow: none; }
.practice-recent .more-note { margin: 10px 0 0; }
.practice-contact > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.practice-contact > summary::-webkit-details-marker { display: none; }
.practice-contact > summary h2 { margin: 0; }
.practice-contact > summary::after { content: ''; margin-left: auto; width: 9px; height: 9px; border-right: 2px solid var(--purple-dark);
  border-bottom: 2px solid var(--purple-dark); transform: rotate(45deg); transition: transform .15s; align-self: center; }
.practice-contact[open] > summary::after { transform: rotate(225deg); }
.practice-contact[open] > summary { margin-bottom: 12px; }
.practice-contact-actions { margin: 0 0 10px; }
.practice-pic-actions { margin-left: 6px; }
@media (max-width: 760px) {
  .practice-photo { width: 96px; height: 64px; border-radius: 12px; }
  .practice-head { flex-wrap: nowrap; gap: 12px; }
}
/* Directory: a practice's most recent animals, like a client's */
.dr-more { font-size: 12.5px; font-weight: 650; color: var(--purple-dark); text-decoration: none; white-space: nowrap; padding: 5px 4px; }
.dr-more:hover { text-decoration: underline; }
@media (max-width: 760px) {
  .results-list .dr-row.stack-sm { grid-template-columns: minmax(0, 1fr); }
  .dr-row.stack-sm > .dr-side { order: 3; justify-self: start; text-align: left; margin: 6px 0 0; max-width: 100%; }
  .dr-row.stack-sm > .dr-side .chips { justify-content: flex-start; }
}

/* ---- Data retention (RETENTION.md) ---- */
.retention-mode { border-left: 4px solid var(--amber); }
.retention-mode.enforce { border-left-color: var(--green); }
.retention-mode.off { border-left-color: var(--line); }
.danger-zone { border-color: rgba(163, 38, 75, .25); }

/* Agents (AGENT_API.md → Agents and their keys): Mabel on the Team page and her profile. */
.agent-avatar { width: 64px; height: 64px; border-radius: 50%; flex: none; background: #f6d55c; object-fit: cover; }
.agent-avatar.small { width: 28px; height: 28px; }
.entity-head.agent-head { display: flex; align-items: center; justify-content: flex-start; gap: 16px; }
.pill.agent { background: #e6f2f1; color: #1f6b66; border-color: #c7e2df; }
.agent-key { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 14px; display: grid; gap: 8px; min-width: 0; }
.agent-key-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.agent-key-label { margin: 4px 0 0; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
.agent-key-line { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.agent-key-line code { flex: 1; min-width: 0; overflow-wrap: anywhere; word-break: break-all; font-size: 12px; background: #f7f4f8; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.agent-scopes { margin: 0; padding-left: 18px; }
.agent-key > .btn.danger { justify-self: start; }
.agent-old { padding-left: 18px; }
.agent-recent { list-style: none; margin: 0 0 10px; padding: 0; }
.agent-recent li { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 4px 14px; padding: 8px 0; border-top: 1px solid var(--line); }
.agent-recent li:first-child { border-top: 0; }
.agent-recent-line { display: block; color: var(--muted); }
@media (max-width: 760px) { .agent-recent li { grid-template-columns: 1fr; } }
.who-link { color: inherit; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; }
.who-link:hover { color: var(--purple-dark); text-decoration-style: solid; }
.who-link.agent::after { content: "Agent"; margin-left: 5px; padding: 0 6px; border-radius: 999px; font-size: 10px; font-weight: 700; vertical-align: 1px; background: #e6f2f1; color: #1f6b66; border: 1px solid #c7e2df; text-decoration: none; display: inline-block; }
/* "Updated 26 Oct 2026, 14:05 by Kate Ellam" on record pages (_updated.html): quiet, no badge. */
.record-updated { margin: 6px 0 0; font-size: 12px; }
.record-updated a { color: inherit; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; }
.record-updated a:hover { color: var(--purple-dark); }
.record-updated .who-link.agent::after { content: none; }

/* Client shares (ACCOUNT.md): the Shared tab on client and animal pages, "What the owner sees" on the Timeline tab
   and sharing a case report from the report editor. */
.shares { display: grid; gap: 16px; min-width: 0; }
.share-list { list-style: none; margin: 0; padding: 0; }
.share-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.share-row:first-child { border-top: 0; }
.share-main { display: grid; gap: 3px; min-width: 0; overflow-wrap: anywhere; }
.share-note { color: var(--muted); }
.share-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
.share-form { display: grid; gap: 4px; max-width: 560px; }
.share-choice { border: 0; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; min-width: 0; }
.share-choice legend { font-weight: 650; font-size: 13px; color: #4d3f4b; margin-bottom: 6px; padding: 0; }
.share-form .btn.primary { justify-self: start; }
.owner-view { margin-bottom: 16px; }
.owner-switch { font-weight: 650; }
.owner-list { list-style: none; margin: 8px 0 0; padding: 0; max-height: 420px; overflow-y: auto; }
.owner-entry { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; gap: 4px 12px; align-items: start; padding: 8px 0; border-top: 1px solid var(--line); }
.owner-entry:first-child { border-top: 0; }
.owner-entry.is-hidden { opacity: .55; }
.owner-when { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.owner-what { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.rp-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; width: 100%; margin-top: 8px; font-size: 13px; }
.rp-share-state { color: var(--muted); }
.rp-share-error { margin: 0; padding: 6px 10px; }
@media (max-width: 760px) {
  .share-row { flex-direction: column; }
  .owner-entry { grid-template-columns: minmax(0, 1fr) auto; }
  .owner-when { grid-column: 1 / -1; }
}

/* avatars */
/* Pictures and avatars (AVATARS.md). .av is the small round avatar (xs 20, sm 28, md 36, lg 48); with no picture it
   is the initial on the species colour (the client area's .animal-badge.sp-* colours) or, for a person, their colour.
   .entity-photo is the record picture beside the name (animal page, team profile), changed with photo-upload.js. */
.av-tone-dog { --av-bg: linear-gradient(135deg, #f7e3f1, #efd2e7); --av-fg: #74205d; }
.av-tone-cat { --av-bg: linear-gradient(135deg, #fbeee2, #f5dfcd); --av-fg: #7f4a22; }
.av-tone-horse { --av-bg: linear-gradient(135deg, #e8f2ee, #d6e8e0); --av-fg: #3f6358; }
.av-tone-rabbit { --av-bg: linear-gradient(135deg, #eef0fb, #dfe3f5); --av-fg: #46508a; }
.av-tone-other { --av-bg: linear-gradient(135deg, #f3eff4, #e7e0e8); --av-fg: #5f5360; }
.av-tone-person { --av-bg: var(--av-colour, #b41d8d); --av-fg: #fff; }
.av { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; overflow: hidden; vertical-align: middle; background: var(--av-bg, var(--lilac-2)); color: var(--av-fg, var(--purple-dark)); font: 850 12px/1 Georgia, Cambria, serif; letter-spacing: -.01em; box-shadow: inset 0 0 0 1px rgba(48, 40, 48, .06); user-select: none; }
.av.av-tone-person { font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-weight: 700; letter-spacing: 0; }
.av img { display: block; width: 100%; height: 100%; object-fit: cover; }
.av-quiet::before { content: attr(data-initials); }
.av-xs { width: 20px; height: 20px; font-size: 10px; }
.av-xs.av-tone-person { font-size: 8.5px; }
.av-sm { width: 28px; height: 28px; font-size: 13px; }
.av-sm.av-tone-person { font-size: 11px; }
.av-md { width: 36px; height: 36px; font-size: 16px; }
.av-md.av-tone-person { font-size: 13px; }
.av-lg { width: 48px; height: 48px; font-size: 21px; }
.av-lg.av-tone-person { font-size: 16px; }
.av-row { display: inline-flex; align-items: center; gap: 9px; min-width: 0; vertical-align: middle; }
.av-row > span { min-width: 0; }
h2.av-row { display: flex; }
.av-link { display: inline-flex; border-radius: 50%; text-decoration: none; }
/* The client page header: their animals, overlapping. */
.client-title { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; }
.av-stack { display: inline-flex; align-items: center; padding-left: 8px; }
.av-stack a { display: inline-flex; margin-left: -8px; border-radius: 50%; box-shadow: 0 0 0 2px #fff; text-decoration: none; transition: transform .15s; }
.av-stack a:hover, .av-stack a:focus-visible { transform: translateY(-2px); position: relative; z-index: 1; }
/* The list beside records and the Home cards. */
.lp-av[class*="av-tone-"] { background: var(--av-bg); color: var(--av-fg); font-family: Georgia, Cambria, serif; font-weight: 850; font-size: 13px; overflow: hidden; }
.lp-av img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hc-av-pic { display: inline-flex; flex: none; }
.hc-av-pic .av { width: 32px; height: 32px; font-size: 14px; }
/* Directory rows, diary, Messages, Team. */
.dr-row.has-av > .row-title > .av { margin: -4px 10px -4px 0; vertical-align: middle; }   /* not flex: search marks split the name */
.ev .n.has-av { display: flex; align-items: center; gap: 5px; }
.ev .n.has-av .av { flex: none; }
.person-toggle.has-av { padding-left: 5px; }
.person-toggle .av { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--c); margin-right: 1px; }
.person-toggle[aria-pressed="false"] .av { filter: grayscale(1); opacity: .5; }
#drawer-who .av { margin-right: 2px; }
.comms-who.has-av { display: inline-flex; align-items: center; gap: 6px; }
.comms-thread.has-av { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; }
.comms-thread.has-av > .comms-thread-av { grid-row: span 2; padding-top: 1px; }
.comms-thread.has-av > :not(.comms-thread-av) { grid-column: 2; }
.side-me-av { display: inline-flex; flex: none; border-radius: 50%; text-decoration: none; }
.side-me-av .av { width: 30px; height: 30px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .14); }
.side-me-av:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* The record picture. */
.entity-id { display: flex; align-items: center; gap: 18px; min-width: 0; }
.entity-id-text { min-width: 0; }
.entity-photo { position: relative; flex: none; width: 112px; }
.ep-tile { position: relative; display: grid; place-items: center; width: 112px; height: 112px; padding: 0; margin: 0; border: 1px solid var(--line); border-radius: 24px; overflow: hidden; background: var(--av-bg, var(--lilac)); color: var(--av-fg, var(--purple-dark)); box-shadow: 0 10px 28px rgba(89, 68, 88, .1); font: inherit; }
button.ep-tile { cursor: pointer; }
button.ep-tile:focus-visible { outline: 3px solid rgba(180, 29, 141, .45); outline-offset: 3px; }
.ep-tile img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity .2s; }
.ep-initial { font: 850 46px/1 Georgia, Cambria, serif; letter-spacing: -.02em; }
.av-tone-person .ep-initial { font: 700 36px/1 Inter, ui-sans-serif, system-ui, sans-serif; }
.ep-label { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 6px 8px; font: 700 12px/1.2 Inter, ui-sans-serif, system-ui, sans-serif; color: #fff; text-align: center; background: linear-gradient(to bottom, rgba(47, 37, 48, 0), rgba(47, 37, 48, .66)); opacity: 0; transition: opacity .15s; pointer-events: none; }
button.ep-tile:hover .ep-label, button.ep-tile:focus-visible .ep-label, .entity-photo.is-busy .ep-label { opacity: 1; }
.entity-photo:not(.is-empty) .ep-tile { background: var(--lilac); }
.entity-photo.is-empty .ep-tile { border: 1.5px dashed rgba(180, 29, 141, .38); box-shadow: none; }
.entity-photo.is-empty .ep-initial { margin-bottom: 20px; font-size: 40px; }
.entity-photo.is-empty .ep-label { opacity: 1; padding: 0 6px 13px; background: none; color: var(--av-fg, var(--purple-dark)); }
.entity-photo.is-empty button.ep-tile:hover { border-color: var(--purple); }
.entity-photo.is-busy .ep-tile img { opacity: .55; }
.ep-progress { position: absolute; left: 12px; right: 12px; bottom: 30px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .55); overflow: hidden; display: none; }
.ep-progress::after { content: ""; display: block; height: 100%; width: calc(var(--p, 0) * 1%); background: var(--purple); transition: width .2s; }
.entity-photo.is-busy .ep-progress { display: block; }
.ep-more { position: absolute; top: 6px; right: 6px; z-index: 2; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--purple-dark); box-shadow: 0 2px 8px rgba(47, 37, 48, .18); cursor: pointer; }
.ep-more[hidden] { display: none; }
.ep-more:hover, .ep-more[aria-expanded="true"] { background: #fff; color: var(--purple); }
.shell .ep-more svg, .ep-more svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.ep-menu { position: absolute; top: 38px; left: 6px; z-index: 30; display: grid; min-width: 160px; padding: 5px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 16px 40px rgba(89, 68, 88, .18); }
.ep-menu[hidden] { display: none; }
.ep-menu button { padding: 9px 11px; border: 0; border-radius: 9px; background: none; font: 600 14px/1.2 Inter, ui-sans-serif, system-ui, sans-serif; color: var(--ink); text-align: left; cursor: pointer; }
.ep-menu button:hover, .ep-menu button:focus-visible { background: var(--lilac); color: var(--purple-dark); outline: none; }
.ep-menu [data-ep-remove] { color: var(--red); }
.ep-msg { position: absolute; top: calc(100% + 6px); left: 0; z-index: 25; width: max-content; max-width: 260px; margin: 0; padding: 7px 10px; border-radius: 10px; background: var(--red-bg); border: 1px solid rgba(163, 38, 75, .2); color: var(--red); font-size: 13px; line-height: 1.35; }
.ep-msg:empty { display: none; }
.team-head .entity-id { align-items: center; }
.team-list > .team-row > .av { align-self: center; }
@media (max-width: 760px) {
  .entity-id { gap: 14px; align-items: flex-start; }
  .entity-photo, .ep-tile { width: 84px; }
  .ep-tile { height: 84px; border-radius: 20px; }
  .ep-initial { font-size: 34px; }
  .entity-photo.is-empty .ep-initial { font-size: 30px; margin-bottom: 16px; }
  .entity-photo.is-empty .ep-label { padding-bottom: 9px; font-size: 11px; }
  .ep-label { font-size: 11px; padding-bottom: 6px; }
  .ep-progress { bottom: 24px; left: 9px; right: 9px; }
  .ep-more { top: 4px; right: 4px; width: 26px; height: 26px; }
  .ep-msg { max-width: calc(100vw - 40px); }
  .team-list > .team-row > .av { grid-area: dot; align-self: start; width: 40px; height: 40px; }
  .comms-thread.has-av { column-gap: 10px; }
}
@media print {
  .av, .av-stack, .hc-av-pic { display: none !important; }
  .ep-tile { width: 56px; height: 56px; border-radius: 12px; box-shadow: none; }
  .entity-photo { width: 56px; }
  .ep-label, .ep-more, .ep-menu, .ep-msg, .ep-progress { display: none !important; }
}

/* ---- Airtable import: enquiries, subscribers, archive, feedback, practices (hub-a) ---- */
.pill.enq-new { background: var(--amber-bg); color: var(--amber); border-color: var(--amber-line); }
.pill.enq-responded { background: var(--lilac); }
.pill.enq-invited { background: #e6f2f1; color: #1f6b66; border-color: #c7e2df; }
.pill.enq-booked { background: var(--green-bg); color: var(--green); border-color: #cfe5da; }
.pill.enq-closed { background: #f4f2f5; color: var(--faint); border-color: var(--line); }
.pill.enq-hot { background: var(--red-bg); color: var(--red); border-color: #f0c9d4; }
.enq-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.enq-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.enq-close { margin-bottom: 16px; }
.enq-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
.enq-grid > .card + .card { margin-top: 0; }
.enq-grid + .card, .enq-grid ~ .card { margin-top: 16px; }
.enq-client { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.enq-client-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.enq-link { margin-top: 10px; }
.enq-log { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 420px; overflow-y: auto; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fcfafc; font-size: 14px; line-height: 1.5; }
.enq-add-note { margin-top: 14px; }
.enq-edit { margin-top: 12px; }
.enq-edit > summary { list-style: none; display: inline-flex; cursor: pointer; }
.enq-edit > summary::-webkit-details-marker { display: none; }
.enq-edit[open] > summary { margin-bottom: 12px; }
.enq-fieldset { border: 0; padding: 0; margin: 0 0 12px; min-width: 0; }
.enq-fieldset > legend { font-weight: 650; font-size: 13px; color: #4d3f4b; padding: 0; margin-bottom: 6px; }
.enq-checks { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.enq-flags { align-content: start; }
.enq-form h2 { margin-top: 6px; }
.enq-form h2:not(:first-child) { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.sub-head-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.fb-card dl.facts { grid-template-columns: minmax(120px, 34%) 1fr; }
.arc-pv { display: block; overflow-wrap: anywhere; }
.arc-fields dd { overflow-wrap: anywhere; }
.arc-doc { white-space: nowrap; }
.practice-rel .card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.practice-rel form { margin-top: 14px; }
.practice-rel .facts-grid + p { margin-top: 12px; }
.pcl-list .pcl-row { display: block; }
.pcl-summary { margin: 6px 0 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .enq-grid { grid-template-columns: minmax(0, 1fr); }
  .enq-grid > .card + .card { margin-top: 0; }
  .enq-checks { gap: 4px 12px; }
  .fb-card dl.facts, .enq-grid dl.facts, #enq-what dl.facts { grid-template-columns: 1fr; gap: 2px 0; }
  .fb-card dl.facts dd, .enq-grid dl.facts dd, #enq-what dl.facts dd { margin-bottom: 8px; }
}

/* ---- Airtable import: plans, sessions, reports, payments, claims (hub-b) ---- */
.plan-head-pills { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; align-items: flex-start; }
.plan-tabs { margin: 4px 0 14px; }
.pill.plan-in_process { background: var(--green-bg); color: var(--green); border-color: #cfe5da; }
.pill.plan-on_hold, .pill.claim-action_required, .pill.pay-due, .pill.pay-invoiced, .pill.outcome-scheduled { background: var(--amber-bg); color: var(--amber); border-color: var(--amber-line); }
.pill.plan-complete, .pill.claim-authorised, .pill.pay-paid, .pill.outcome-complete, .pill.consent-yes { background: var(--green-bg); color: var(--green); border-color: #cfe5da; }
.pill.plan-cancelled, .pill.outcome-cancelled, .pill.outcome-not_taken_up, .pill.outcome-none, .pill.claim-unknown,
.pill.pay-waived, .pill.consent-not_asked, .pill.consent-none, .pill.animal-status-inactive { background: #f4f2f5; color: var(--faint); border-color: var(--line); }
.pill.claim-declined, .pill.pay-overdue, .pill.outcome-no_show, .pill.consent-no, .pill.pay-refunded { background: var(--red-bg); color: var(--red); border-color: #f0c9d4; }
.pill.claim-submitted, .pill.consent-limited { background: var(--lilac); color: var(--purple-dark); }
.pill.animal-status-deceased, .pill.animal-status-rehomed { background: #f1eef3; color: var(--ink); border-color: var(--line-strong); }
.plan-card .facts { margin-bottom: 8px; }
.plan-notes h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); margin: 14px 0 4px; }
.plan-notes-text, dd.pre { white-space: pre-line; overflow-wrap: anywhere; margin: 0; }
.plan-edit, .client-about form, .client-consents form, .animal-profile form { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.plan-checks, .plan-reports, .plan-claims, .consent-list { list-style: none; margin: 8px 0 0; padding: 0; }
.plan-check, .plan-reports li, .plan-claims li, .consent-list li { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--line); }
.plan-check:first-child, .plan-reports li:first-child, .plan-claims li:first-child, .consent-list li:first-child { border-top: 0; }
.plan-check-text, .plan-reports li > div:first-child { flex: 1 1 220px; min-width: 0; }
.plan-check-text strong, .plan-check-text .sub { display: block; }
.plan-check.is-requested .plan-check-text strong::after { content: ''; display: inline-block; width: 7px; height: 7px; margin-left: 7px; border-radius: 50%; background: var(--amber); vertical-align: middle; }
.plan-check.is-unset .plan-check-text strong::after { background: var(--line-strong); }
.plan-auto { color: var(--green); font-weight: 650; }
.plan-check select, .plan-sessions select, .plan-reports select, .reportsq select, .plan-tabs + .msg + .card select {
  font: inherit; font-size: 14px; min-height: 36px; max-width: 100%; border: 1px solid var(--line-strong); border-radius: 10px; padding: 4px 8px; background: #fff; }
.plan-sessions tr.is-cancelled td { color: var(--faint); }
.plan-reports li.is-late strong, table.reportsq tr.is-late td.first { color: var(--red); }
.plan-reports .sub, .plan-claims .sub { display: block; }
.plan-claims li > a { flex: 1 1 200px; }
.plan-claims .sub { flex-basis: 100%; }
.plan-pay-form .msg { margin: 8px 0; }
tr.is-refund td.num { color: var(--red); }
td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Costs (COSTS.md) */
.costs-table tr.costs-new td { background: #e3f2e9; }
.costs-table tr.costs-cut td { background: #fbe3e9; }
.costs-table th.num { text-align: right; }
/* Wide tables scroll sideways inside their box on phones (the page itself never scrolls sideways). */
.table-wrap.costs-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; max-width: 100%; }
.costs-scroll .costs-table { min-width: 760px; }
.costs-scroll .costs-table td.num, .costs-scroll .costs-table th { white-space: nowrap; }
.costs-table tfoot th { border-top: 2px solid var(--line); }
.costs-legend { font-family: inherit; font-weight: 400; }
.costs-key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin: 0 2px 0 8px; }
.costs-key.costs-new { background: #e3f2e9; border: 1px solid #b9dcc7; }
.costs-key.costs-cut { background: #fbe3e9; border: 1px solid #efbccb; }
.costs-filter-row { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: end; }
.costs-filter-row label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.costs-assume { border: 0; padding: 0; margin: 14px 0 6px; display: grid; gap: 4px; font-size: 14px; }
.costs-assume legend { font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.payments-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 560px; margin-bottom: 14px; }
.client-about-pair { margin-top: 16px; }
.consent-kind { flex: 1 1 160px; font-weight: 650; }
.consent-list .sub { flex-basis: 100%; }
.claim-items { border: 0; padding: 0; margin: 0 0 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 12px; }
.claim-items legend { font-size: 13px; font-weight: 650; color: var(--muted); margin-bottom: 6px; padding: 0; }
.animal-profile .linkbtn.small { font-size: 13px; padding: 2px 6px; }
.animal-profile { margin-top: 16px; }
@media (max-width: 760px) {
  .plan-head-pills { justify-content: flex-start; }
  .plan-card .row2, .plan-pay-form .row2, .client-about .row2, .client-consents .row2, .animal-profile .row2, #claim-form .row2 { grid-template-columns: 1fr; gap: 0; }
  .plan-check select, .plan-reports select { width: 100%; }
  .plan-check-set, .plan-reports li > label { flex: 1 1 100%; }
  table.list.stack-sm td select { width: 100%; margin-top: 2px; }
  .payments-stats { max-width: none; }
}

/* ---- Booking page: the client first (Daniel) ---- */
.booking-client { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; margin: 0 0 16px; padding: 14px 18px; background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--purple); border-radius: var(--radius); box-shadow: var(--shadow); }
.booking-client[data-row-href] { cursor: pointer; }
.booking-client[data-row-href]:hover { background: #fdf8fc; }
.booking-client .bc-who { display: grid; gap: 2px; min-width: 0; flex: 1 1 260px; }
.booking-client .bc-label { font-size: 11px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.booking-client .bc-name { font-size: 20px; font-weight: 750; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.booking-client a.bc-name:hover { color: var(--purple-dark); text-decoration: underline; }
.booking-client .bc-contact { font-size: 14px; overflow-wrap: anywhere; }
.booking-client .bc-sub { font-size: 12.5px; color: var(--faint); }
.booking-client .bc-animal { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; color: var(--ink); text-decoration: none; }
.booking-client a.bc-animal:hover span { text-decoration: underline; }
.booking-client .bc-open { margin-left: auto; }
@media (max-width: 760px) {
  .booking-client { padding: 12px 14px; }
  .booking-client .bc-name { font-size: 18px; }
  .booking-client .bc-open { margin-left: 0; width: 100%; justify-content: center; }
}

/* =====================================================================================================
   Hub page components, "unslopped" (Daniel approved 30 Oct 2026; docs/spec/design-brief.md → Hub page components).
   Calm, exact, a little warm: warm neutrals, hairlines, weights 400–500 (600 for rare emphasis), sentence case,
   4px grid, mono tabular numbers. One accent, DVBP plum, used rarely: the current tab's underline, the month band on
   an appointment date tile and the animal glyph. Restyles the shared classes so every Hub page reads as one product;
   the page tokens below sit apart from the brand :root block at the top of this file.
   ===================================================================================================== */
/* unslop page tokens: the "plum mist" palette (Daniel chose it over white, soft grey, sage and slate, 30 Oct 2026):
   a faint hint of the brand plum in the page and the neutrals, white cards, plum only as the accent. */
:root {
  --pg-bg: #f8f5f8;
  --pg-text: #221a21;
  --pg-muted: #776b75;
  --pg-line: rgba(40, 24, 38, .08);
  --pg-text-2: #5a4f59;
  --pg-none: #a497a1;
  --pg-raised: #f0e9ef;
  --pg-hover: #f8f5f8;
  --pg-line-2: rgba(40, 24, 38, .12);
  --pg-accent: #b41d8d;
  --pg-accent-ink: #74205d;
  --pg-accent-soft: #f7ecf4;
  --pg-ok: #2f7a55;
  --pg-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --pg-card-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  --pg-ease: cubic-bezier(.22, 1, .36, 1);
  --pg-ic-pencil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z'/%3E%3Cpath d='m15 5 4 4'/%3E%3C/svg%3E");
  --pg-ic-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
  --pg-ic-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E");
  --pg-ic-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E");
  --pg-ic-paw: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='4' r='2'/%3E%3Ccircle cx='18' cy='8' r='2'/%3E%3Ccircle cx='20' cy='16' r='2'/%3E%3Cpath d='M9 10a5 5 0 0 1 5 5v3.5a3.5 3.5 0 0 1-6.84 1.045Q6.52 17.48 4.46 16.84A3.5 3.5 0 0 1 5.5 10Z'/%3E%3C/svg%3E");
}

/* ---- plum mist surfaces and text roles for the page content ---- */
body { background: var(--pg-bg); }
main.page { --ink: var(--pg-text); --muted: var(--pg-muted); --faint: var(--pg-muted); --line: var(--pg-line); color: var(--pg-text); }

/* ---- type: weights 400–500, sentence case, no tight tracking on small text ---- */
:where(main.page) :where(b, strong) { font-weight: 600; }
main.page :is(.entity-head, .page-head) h1 { font-size: 30px; line-height: 36px; font-weight: 500; letter-spacing: -.01em; color: var(--ink); }
.card h2, .card-head h2 { font-size: 15px; line-height: 20px; font-weight: 500; letter-spacing: 0; color: var(--ink); }
.card h3 { font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0; color: var(--ink); }
.card h2 .faint, .card-head h2 .faint { font-family: var(--pg-mono); font-size: 12px; font-weight: 400; color: var(--muted); margin-left: 4px; }
.ref { font-family: var(--pg-mono); font-size: 12.5px; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.linkbtn { font-weight: 500; }
.linkbtn:hover { background: var(--pg-raised); }

/* ---- cards: radius 12, hairline, a 48px header row with a quiet tool on the right ---- */
.card { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 16px 20px; box-shadow: var(--pg-card-shadow); }
.card + .card { margin-top: 20px; }
.card > h2:first-child, .card > .card-head:first-child {
  display: flex; align-items: center; gap: 8px 12px; min-height: 48px; margin: -16px -20px 8px; padding: 0 20px;
  border-bottom: 1px solid var(--line); flex-wrap: nowrap; }
.card > .card-head:first-child > h2 { margin: 0; min-width: 0; }
.card-head > :is(a.small, .tool-link, .btn.small, .linkbtn) { margin-left: auto; }
.card-head > :is(a.small, .tool-link, .btn.small) ~ :is(a.small, .tool-link, .btn.small) { margin-left: 0; }
.card-head > :is(a.small, .tool-link) { font-size: 13px; color: var(--pg-text-2); text-decoration: none; white-space: nowrap; }
.card-head > :is(a.small, .tool-link):hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--pg-line-2); text-underline-offset: 3px; }
.card-head > .btn.small { min-height: 32px; padding: 0 8px; margin-right: -8px; border: 0; background: none; box-shadow: none; color: var(--pg-text-2); font-size: 13px; font-weight: 400; }
.card-head > .btn.small:hover, .card-head > .btn.small[aria-expanded="true"] { background: var(--pg-raised); color: var(--ink); }
.card-head > .btn.small.primary { background: var(--ink); color: #fff; padding: 0 12px; margin-right: 0; }
.btn.edit-tool::before { content: ""; width: 14px; height: 14px; flex: none; background: var(--muted); -webkit-mask: var(--pg-ic-pencil) center / 14px 14px no-repeat; mask: var(--pg-ic-pencil) center / 14px 14px no-repeat; }
.tool-link { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--pg-text-2); text-decoration: none; }
.tool-link.ic-arrow::after { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--pg-ic-arrow) center / 14px 14px no-repeat; mask: var(--pg-ic-arrow) center / 14px 14px no-repeat; }
.card-empty { margin: 0; padding: 4px 0; font-size: 14px; color: var(--muted); }
.card-text { display: grid; gap: 6px; padding: 4px 0; font-size: 14px; color: var(--pg-text-2); }
.card-text p { margin: 0; color: inherit; }
.card-text .faint { color: var(--muted); }
.card .empty { padding: 24px 16px; }
.empty { color: var(--muted); }
.status-ok { display: inline-flex; align-items: center; gap: 8px; }
.status-ok::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pg-ok); flex: none; }

/* ---- facts: a 152px label column, muted labels, 8px rows; empty values say so in muted text ---- */
dl.facts { display: grid; grid-template-columns: 152px minmax(0, 1fr); gap: 0 16px; margin: 0; font-size: 14px; line-height: 20px; }
dl.facts dt, dl.facts dd { margin: 0; padding: 8px 0; }
dl.facts dt { color: var(--muted); }
dl.facts dd { color: var(--ink); overflow-wrap: anywhere; }
.card > dl.facts:last-child { margin-bottom: -8px; }
:is(dl.facts, .facts-grid) dd .none, dl.facts dd.none { color: var(--pg-none); }
:is(dl.facts, .facts-grid) dd .faint { color: var(--muted); }
:is(dl.facts, .facts-grid, .meta-line) dd a, .entity-meta a { color: inherit; text-decoration: underline; text-decoration-color: var(--pg-line-2); text-underline-offset: 3px; }
:is(dl.facts, .facts-grid) dd a:hover, .entity-meta a:hover { text-decoration-color: currentColor; }
.facts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 0 32px; margin: 0; font-size: 14px; line-height: 20px; }
.facts-grid > div { display: grid; grid-template-columns: 152px minmax(0, 1fr); gap: 0 16px; padding: 8px 0; min-width: 0; }
.facts-grid > :is(.ent-wide, .wide) { grid-column: 1 / -1; }
.facts-grid dt { color: var(--muted); font-size: 14px; font-weight: 400; text-transform: none; letter-spacing: 0; }
.facts-grid dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.card > .facts-grid:last-child { margin-bottom: -8px; }

/* ---- buttons: 36px, radius 8, white with a hairline; primary is the text colour ---- */
.btn { min-height: 36px; padding: 0 14px; gap: 8px; border-radius: 8px; border: 1px solid var(--pg-line-2); background: #fff; color: var(--ink);
  font-weight: 500; font-size: 14px; box-shadow: var(--pg-card-shadow); transition: background-color .15s var(--pg-ease), color .15s var(--pg-ease), border-color .15s var(--pg-ease); }
.btn:hover { background: var(--pg-raised); color: var(--ink); }
.btn:active { transform: translateY(.5px); }
.btn.primary { background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.btn.primary:hover { background: #3a2e38; border-color: #3a2e38; color: #fff; }
.btn.ghost { background: #fff; color: var(--ink); border-color: var(--pg-line-2); }
.btn.ghost:hover { background: var(--pg-raised); }
.btn.danger { background: #fff; color: var(--red); border-color: rgba(163, 38, 75, .24); }
.btn.danger:hover { background: var(--red-bg); color: var(--red); }
.btn.warn { background: #fff; color: var(--amber); border-color: var(--amber-line); }
.btn.small { min-height: 32px; padding: 0 12px; font-size: 13px; }
.btn.iconbtn { width: 36px; padding: 0; }
.btn-ic::before { content: ""; width: 16px; height: 16px; flex: none; background: var(--muted); -webkit-mask: var(--ic) center / 16px 16px no-repeat; mask: var(--ic) center / 16px 16px no-repeat; }
.ic-lock { --ic: var(--pg-ic-lock); }
.ic-clock { --ic: var(--pg-ic-clock); }
.btn.is-held { color: var(--amber); }
.btn.is-held::before { background: currentColor; }

/* ---- status tags: small, square-ish, quiet; colour only where it means something ---- */
.pill { padding: 2px 8px; border: 0; border-radius: 6px; font-size: 12px; line-height: 16px; font-weight: 500; background: var(--pg-raised); color: var(--pg-text-2); }
.pill.confirmed, .pill.sent, .pill.plan-complete, .pill.claim-authorised, .pill.pay-paid, .pill.outcome-complete, .pill.consent-yes { background: #ecf4ef; color: var(--green); }
.pill.reserved, .pill.override { background: #fbf3e6; color: var(--amber); border: 0; }
.pill.failed, .pill.claim-declined, .pill.pay-overdue, .pill.outcome-no_show, .pill.consent-no, .pill.pay-refunded { background: #fbeef1; color: var(--red); }
.pill.cancelled, .pill.expired, .pill.released, .pill.off, .pill.pay-waived, .pill.consent-not_asked, .pill.consent-none, .pill.animal-status-inactive { background: var(--pg-raised); color: var(--muted); }
.pill.held, .pill.claim-submitted, .pill.consent-limited { background: var(--pg-accent-soft); color: var(--pg-accent-ink); }
a.pill:hover { filter: brightness(.97); }

/* ---- tables and lists ---- */
.table-wrap { border-radius: 12px; box-shadow: var(--pg-card-shadow); }
table.list th { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500; color: var(--muted); background: var(--pg-hover); padding: 10px 16px; }
table.list td { padding: 12px 16px; }
table.list tbody tr.link:hover td { background: var(--pg-hover); }
table.list td .sub { color: var(--muted); font-size: 13px; }
table.mini th { font-weight: 500; }
table.mini tr.on td { background: var(--pg-accent-soft); }
.stat h2 { font-size: 13px; font-weight: 400; color: var(--muted); }
.stat strong { font-size: 24px; line-height: 32px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---- forms ---- */
.field > span, .field > label { font-weight: 500; color: var(--pg-text-2); }
.input, .field input, .field select, .field textarea { border-color: var(--pg-line-2); border-radius: 8px; min-height: 36px; padding: 7px 10px; }
.input:focus, .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--pg-accent); box-shadow: 0 0 0 3px rgba(180, 29, 141, .12); }
.msg { border-radius: 8px; }
.ent-kind legend { font-weight: 500; }

/* ---- page and record headers ---- */
main.page .page-head { margin-bottom: 24px; }
main.page .page-head p { color: var(--pg-text-2); }
.entity-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin: 20px 0 0; }
.entity-head .sub { margin: 6px 0 0; font-size: 14px; color: var(--pg-text-2); }
.entity-head .sub a { color: inherit; text-decoration: underline; text-decoration-color: var(--pg-line-2); text-underline-offset: 3px; }
.entity-head .sub .faint { color: var(--pg-none); }
.entity-main { min-width: 0; flex: 1 1 320px; }
.entity-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 6px; font-size: 14px; line-height: 20px; color: var(--pg-text-2); }
.entity-head .entity-meta > * { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.entity-meta > * + *::before { content: ""; display: inline-block; width: 3px; height: 3px; margin-right: 8px; border-radius: 50%; background: #cbbfc8; vertical-align: middle; }
.entity-meta .client-contact { margin: 0; }
.entity-meta .record-updated { font-size: 14px; color: var(--pg-text-2); }
.entity-meta .record-updated a { text-decoration-style: solid; }
.entity-head .person-roles { margin: 6px 0 0; gap: 4px 6px; }
.entity-meta .person-roles { margin: 0; display: inline-flex; }
.person-roles .pill { padding: 0; background: none; border: 0; border-radius: 0; font-size: 14px; line-height: 20px; font-weight: 400; color: var(--ink); }
.person-roles a.pill:hover { text-decoration: underline; text-decoration-color: var(--pg-line-2); text-underline-offset: 3px; filter: none; }
.record-updated { color: var(--muted); }
.entity-actions, .entity-head > .entity-links { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; padding-top: 2px; }
.entity-head > .entity-links { margin-top: 0; }
.entity-head > .entity-links .pill { padding: 0 10px; min-height: 36px; display: inline-flex; align-items: center; border-radius: 8px; font-size: 13px; }
.entity-actions .client-head-acts { display: contents; }
/* "Mark as sensitive": a header button whose form opens as a small panel under it. */
.entity-actions .sensitive-mark { position: relative; }
.entity-actions .sensitive-mark > summary { list-style: none; cursor: pointer; }
.entity-actions .sensitive-mark > summary::-webkit-details-marker { display: none; }
.entity-actions .sensitive-mark[open] > summary { background: var(--pg-raised); }
.entity-actions .sensitive-mark > form { position: absolute; right: 0; top: calc(100% + 8px); z-index: 25; width: min(340px, calc(100vw - 24px)); padding: 16px;
  background: #fff; border: 1px solid var(--pg-line-2); border-radius: 12px; box-shadow: 0 8px 24px rgba(40, 24, 38, .10); text-align: left; }
.entity-actions .sensitive-mark > form > p { margin: 0 0 12px; }
.sensitive-card { border-color: var(--amber-line); background: #fffaf2; }
/* Animals on a record header: 44px chips with the DVBP silhouette (or the animal's picture). */
.pet-row { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
a.pet-chip.animal-chip { display: inline-flex; align-items: center; gap: 10px; height: 44px; max-width: 100%; padding: 0 14px 0 6px; border-radius: 12px; background: #fff;
  border: 1px solid var(--line); box-shadow: var(--pg-card-shadow); color: var(--ink); font-size: 14px; text-decoration: none; transition: background-color .15s var(--pg-ease); }
a.pet-chip.animal-chip:hover { background: var(--pg-hover); color: var(--ink); }
.pet-chip b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
a.pet-chip.animal-chip > span:last-child { color: var(--muted); font-size: 14px; }
.pet-glyph { width: 32px; height: 32px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 6px; background: var(--pg-accent-soft); }
.pet-glyph i { width: 26px; height: 26px; background: var(--pg-accent-ink); -webkit-mask: url(brand/dvbp-dog.svg) center / contain no-repeat; mask: url(brand/dvbp-dog.svg) center / contain no-repeat; }
.pet-glyph[data-species="cat"] i { -webkit-mask-image: url(brand/dvbp-cat.svg); mask-image: url(brand/dvbp-cat.svg); }
.pet-glyph[data-species="horse"] i { -webkit-mask-image: url(brand/dvbp-horse.svg); mask-image: url(brand/dvbp-horse.svg); }
.pet-glyph[data-species="rabbit"] i { -webkit-mask-image: url(brand/dvbp-rabbit.svg); mask-image: url(brand/dvbp-rabbit.svg); }
.pet-glyph[data-species="other"] i { width: 18px; height: 18px; -webkit-mask: var(--pg-ic-paw) center / 18px 18px no-repeat; mask: var(--pg-ic-paw) center / 18px 18px no-repeat; }
.pet-glyph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pet-note { font-size: 13px; color: var(--pg-accent-ink); padding: 0 4px; }

/* ---- record tabs: plain text, 24px apart, 40px tall, the current one underlined in plum ---- */
main.page .entity-tabs { display: flex; flex-wrap: nowrap; gap: 24px; margin: 24px 0; padding: 0; max-width: none; width: auto; overflow-x: auto; overflow-y: hidden;
  background: none; border: 0; border-radius: 0; box-shadow: inset 0 -1px 0 var(--pg-line-2); scrollbar-width: none; }
main.page .entity-tabs::-webkit-scrollbar { display: none; }
main.page .entity-tabs a { position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0; margin: 0; border: 0; border-radius: 0;
  background: none; color: var(--pg-text-2); font-size: 14px; font-weight: 400; white-space: nowrap; text-decoration: none; transition: color .15s var(--pg-ease); }
main.page .entity-tabs a:hover { color: var(--ink); background: none; }
main.page .entity-tabs a.on { color: var(--ink); font-weight: 500; background: none; }
main.page .entity-tabs a.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--pg-accent); }
main.page .entity-tabs .count, main.page .entity-tabs .on .count { position: relative; top: 1px; font-family: var(--pg-mono); font-size: 12px; font-weight: 400; color: var(--muted); }
.client-tabs { margin: 0; }

/* ---- record overview: main column + a 352px side column, each a stack of cards with no dead gaps ---- */
.record-overview-wrap { container-type: inline-size; }
.record-overview { display: grid; grid-template-columns: minmax(0, 1fr) 352px; gap: 20px; align-items: start; }
.ro-col { display: grid; gap: 20px; min-width: 0; }
.record-overview .card + .card { margin-top: 0; }
/* One column when narrow: contact details, then the next appointment, then the rest. */
@container (max-width: 820px) {
  .record-overview { grid-template-columns: minmax(0, 1fr); }
  .ro-col { display: contents; }
  .ro-col:first-child > :first-child { order: -2; }
  .record-overview .next-card { order: -1; }
}
/* The next appointment as a booking card: a date tile, the time, the service, who, and the booking reference. */
.appt-card { padding: 4px 0 0; }
.appt-row { display: flex; align-items: flex-start; gap: 16px; }
.date-tile { width: 56px; flex: none; display: flex; flex-direction: column; overflow: hidden; text-align: center; border-radius: 10px; background: #fff;
  border: 1px solid var(--pg-line-2); box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.date-tile .dt-m { height: 20px; line-height: 20px; background: var(--pg-accent); color: #fff; font-size: 11px; font-weight: 500; }
.date-tile .dt-d { padding-top: 2px; font-size: 24px; line-height: 32px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.date-tile .dt-w { padding-bottom: 6px; font-size: 11px; line-height: 16px; color: var(--muted); }
.appt-what { min-width: 0; }
.appt-what p { margin: 0; }
.appt-what .next-appt { line-height: 28px; }
.appt-time { font-size: 20px; line-height: 28px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.appt-svc { margin-top: 2px; font-size: 14px; color: var(--pg-text-2); }
.appt-who { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.appt-who li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--pg-text-2); min-width: 0; }
.appt-who .ic-paw::before { content: ""; width: 16px; height: 16px; flex: none; background: var(--muted); -webkit-mask: var(--pg-ic-paw) center / 16px 16px no-repeat; mask: var(--pg-ic-paw) center / 16px 16px no-repeat; }
.mini-initials { width: 16px; height: 16px; flex: none; border-radius: 50%; background: #e9e1e6; color: #4a3b52; font-size: 9px; line-height: 16px; font-weight: 600; text-align: center; }
.appt-foot { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--pg-line-2); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ref-tag { font-size: 12px; line-height: 16px; color: var(--pg-text-2); padding: 2px 6px; border-radius: 4px; background: var(--pg-raised); }
.appt-foot .tool-link { color: var(--pg-accent-ink); }
/* "At a glance": a quiet list with right-aligned mono numbers, not stat boxes. */
ul.client-counts.counts-list { display: block; list-style: none; margin: -8px -20px -16px; padding: 4px 0; }
.counts-list li + li { border-top: 1px solid var(--line); }
.counts-list a { display: flex; align-items: center; height: 40px; padding: 0 20px; border: 0; border-radius: 0; font-size: 14px; color: var(--pg-text-2); text-decoration: none; }
.counts-list a:hover { background: var(--pg-hover); color: var(--ink); }
.counts-list li:last-child a { border-radius: 0 0 11px 11px; }
.counts-list b { display: inline; margin-left: auto; font-family: var(--pg-mono); font-size: 13px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.counts-list b.z { color: var(--muted); }
/* Consents read like the facts list: the kind, then the latest answer with a small status dot. */
.consent-list { margin: 0 0 -8px; }
.consent-list li { display: grid; grid-template-columns: 152px minmax(0, 1fr); gap: 0 16px; align-items: baseline; padding: 8px 0; border-top: 0; font-size: 14px; }
.consent-kind { font-weight: 400; color: var(--muted); }
.consent-list .pill { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 0; background: none; font-size: 14px; line-height: 20px; font-weight: 400; color: var(--ink); }
.consent-list .pill.consent-none, .consent-list .pill.consent-not_asked { color: var(--pg-none); }
.consent-list .pill:is(.consent-yes, .consent-no, .consent-limited)::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pg-ok); }
.consent-list .pill.consent-no::before { background: var(--red); }
.consent-list .pill.consent-limited::before { background: var(--amber); }
.consent-list .sub { grid-column: 2; font-size: 13px; color: var(--muted); }
.client-about form, .client-consents form, .animal-profile form { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }

/* ---- animal, practice and professional headers ---- */
.entity-id { gap: 16px; }
.animal-head .entity-id-text h1 { margin: 0; }
.animal-head .sub { margin-top: 4px; }
.animal-head .entity-photo, .animal-head .ep-tile { width: 88px; }
.animal-head .ep-tile { height: 88px; border-radius: 12px; }
.entity-photo .ep-tile { border-radius: 12px; }
.ep-initial { font-family: inherit; font-size: 36px; line-height: 1; font-weight: 500; letter-spacing: 0; }
.entity-photo.is-empty .ep-initial { font-size: 32px; margin-bottom: 18px; }
.entity-photo.is-empty .ep-tile { border: 1px dashed var(--pg-line-2); background: var(--pg-hover); }
.ep-label { font-weight: 500; font-family: inherit; }
.av-tone-dog { --av-bg: #f7ecf4; }
.av-tone-cat { --av-bg: #f8eee4; }
.av-tone-horse { --av-bg: #e9f1ed; }
.av-tone-rabbit { --av-bg: #eceefa; }
.av-tone-other { --av-bg: var(--pg-raised); }
.av, .lp-av[class*="av-tone-"] { font-family: inherit; font-weight: 500; }
.av.av-tone-person { font-family: inherit; font-weight: 500; }
.practice-photo { border-radius: 12px; }
.practice-site { margin-top: 0; font-size: 14px; font-weight: 400; color: var(--pg-text-2); }
details.practice-contact > summary h2 { font-size: 15px; font-weight: 500; }

/* ---- Directory: list rows, the view switcher and the animal types ---- */
.results-list { border-radius: 12px; box-shadow: var(--pg-card-shadow); }
.results-list .dr-row { padding: 12px 20px; }
.row-title { font-weight: 500; font-size: 15px; color: var(--ink); }
a.row-title:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--pg-line-2); text-underline-offset: 3px; }
.dr-row.has-new, .client-row.has-new { box-shadow: inset 2px 0 0 var(--pg-accent); }
.dr-sub, .row-sub { color: var(--pg-text-2); }
.dr-next { color: var(--green); font-weight: 500; }
.dr-new { color: var(--pg-accent-ink); font-weight: 500; }
.dr-match { color: var(--muted); }
.dr-owner { font-size: 13px; font-weight: 500; color: var(--pg-text-2); }
.dr-num { font-family: var(--pg-mono); font-size: 12px; font-weight: 400; color: var(--muted); }
.dr-count { padding: 2px 8px; border-radius: 6px; background: var(--pg-raised); color: var(--pg-text-2); font-weight: 500; }
.dr-count:hover { background: #e8dfe6; }
.dr-more { font-weight: 500; color: var(--pg-text-2); }
@media (hover: hover) { .results-list .dr-row[data-row-href]:hover { background: var(--pg-hover); } }
.results-list .dr-row[data-row-href]:active { background: var(--pg-raised); }
.animal-chip:not(.pet-chip) { align-items: baseline; padding: 2px 8px; border: 0; border-radius: 6px; background: var(--pg-raised); color: var(--ink); font-size: 13px; line-height: 20px; }
.animal-chip:not(.pet-chip):hover { background: #e8dfe6; color: var(--ink); }
.animal-chip:not(.pet-chip) b { font-weight: 500; }
.animal-chip:not(.pet-chip) span { color: var(--muted); font-size: 12px; }
.dr-side .animal-chip:not(.pet-chip) { padding: 2px 8px; }
.animal-card-mini, .vet-card { border-radius: 12px; box-shadow: var(--pg-card-shadow); }
.vet-card .row-title .vet-link { font-size: 15px; font-weight: 500; color: var(--ink); }
.vet-link { font-weight: 500; }
.finder-filters .tabs { gap: 2px; padding: 3px; border: 0; border-radius: 10px; background: var(--pg-raised); box-shadow: none; }
.finder-filters .tabs button { border-radius: 8px; font-size: 13px; font-weight: 400; color: var(--pg-text-2); opacity: 1; }
.finder-filters .tabs button:not(.on) { opacity: 1; }
.finder-filters .tabs button:not(.on):hover { color: var(--ink); background: rgba(255, 255, 255, .5); }
.finder-filters .tabs .on { background: #fff; color: var(--ink); font-weight: 500; box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(0, 0, 0, .06); }
.finder-filters .tabs .count, .finder-filters .tabs .on .count { font-family: var(--pg-mono); font-size: 11px; font-weight: 400; color: var(--muted); }
.species-chips .chip, .chip { height: auto; min-height: 32px; padding: 0 8px 0 12px; border: 1px solid var(--pg-line-2); border-radius: 8px; background: #fff; color: var(--pg-text-2);
  font-size: 13px; font-weight: 400; box-shadow: none; }
.chip:hover, .species-chips .chip:hover { background: var(--pg-raised); color: var(--ink); }
.species-chips .chip .n { min-width: 0; height: auto; padding: 0; border-radius: 0; background: none; font-family: var(--pg-mono); font-size: 11px; font-weight: 400; color: var(--muted); }
.chip.on, .species-chips .chip.on { background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: none; }
.species-chips .chip.on .n { background: none; color: rgba(255, 255, 255, .7); }
@media (hover: none) { .species-chips .chip:hover { background: #fff; color: var(--pg-text-2); }
  .species-chips .chip.on:hover { background: var(--ink); color: #fff; } }
.chip.more { min-height: 28px; padding: 0 10px; font-size: 12px; }

.finder-box { border-radius: 10px; border-color: var(--pg-line-2); box-shadow: var(--pg-card-shadow); }
.finder-box:focus-within { border-color: rgba(180, 29, 141, .45); box-shadow: 0 0 0 3px rgba(180, 29, 141, .10); }
.finder-box svg { width: 18px; height: 18px; stroke: var(--muted); stroke-width: 1.5; }
.finder-box input { font-size: 15px; padding: 11px 0; }
.finder-box kbd { font-family: var(--pg-mono); font-size: 11px; font-weight: 400; color: var(--pg-text-2); border: 0; border-radius: 4px; padding: 3px 6px;
  box-shadow: inset 0 0 0 1px var(--pg-line-2), inset 0 -1px 0 var(--pg-line-2); }
.finder-section + .finder-section { margin-top: 24px; }
.finder-section .section-head { margin-bottom: 8px; }
.finder-section .section-head h2 { font-size: 15px; line-height: 20px; font-weight: 500; letter-spacing: 0; color: var(--ink); }
.finder-section .section-head h2 .faint { font-family: var(--pg-mono); font-size: 12px; font-weight: 400; color: var(--muted); margin-left: 2px; }
.dr-num { font-family: inherit; font-size: 13px; font-variant-numeric: tabular-nums; }
/* Equal cards side by side never inherit the stacked-card gap; a list inside a card runs edge to edge. */
:is(.grid2, .stat-grid, .results-grid, .consult-list) > .card + .card { margin-top: 0; }
.grid2 { gap: 20px; }
.card > .results-list { margin: -8px -20px 0; border: 0; border-radius: 0; box-shadow: none; }
.card > .results-list:last-child { margin-bottom: -16px; border-radius: 0 0 11px 11px; }
.card > .results-list + .more-note { margin-top: 12px; }

/* View switchers and list tools on other pages: a quiet segmented control, square-ish controls, no pill trays. */
.tabs { gap: 2px; padding: 3px; border: 0; border-radius: 10px; background: var(--pg-raised); }
.tabs button, .tabs a { border-radius: 8px; font-weight: 400; color: var(--pg-text-2); }
.tabs button:hover, .tabs a:hover { color: var(--ink); }
.tabs .on { background: #fff; color: var(--ink); font-weight: 500; box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(0, 0, 0, .06); }
.tabs .count { font-family: var(--pg-mono); font-size: 11px; color: var(--muted); }
main.page .entity-tabs a, main.page .entity-tabs a.on { box-shadow: none; }
.search { border-color: var(--pg-line-2); border-radius: 8px; }
.tt-filter-btn { border-color: var(--pg-line-2); border-radius: 8px; color: var(--ink); font-weight: 500; min-height: 36px; }
.tt-n { border-radius: 6px; background: var(--ink); font-family: var(--pg-mono); font-weight: 400; }
.tt-pop { border-radius: 12px; border-color: var(--pg-line-2); box-shadow: 0 8px 24px rgba(40, 24, 38, .10); }
.tt-opt { border-radius: 6px; }
.tt-sort-select { font-weight: 400; }
.tt-sort-select select { border: 1px solid var(--pg-line-2); border-radius: 8px; min-height: 32px; }
.booking-client { border-left-width: 1px; border-color: var(--line); border-radius: 12px; box-shadow: var(--pg-card-shadow); padding: 16px 20px; }
.booking-client[data-row-href]:hover { background: var(--pg-hover); }
.booking-client .bc-label { font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); }
.booking-client .bc-name { font-size: 20px; line-height: 28px; font-weight: 500; }
.booking-client .bc-animal { font-weight: 500; }
.card-head > a:not(.btn) { margin-left: auto; font-size: 13px; color: var(--pg-text-2); text-decoration: none; }

@media (max-width: 760px) {
  main.page :is(.entity-head, .page-head) h1 { font-size: 24px; line-height: 32px; }
  .entity-head { margin-top: 12px; }
  .entity-actions, .entity-head > .entity-links { margin-left: 0; justify-content: flex-start; padding-top: 0; }
  .entity-actions .sensitive-mark > form { right: auto; left: 0; }
  .card { padding: 16px; }
  .card > h2:first-child, .card > .card-head:first-child { margin: -16px -16px 8px; padding: 0 16px; }
  ul.client-counts.counts-list { margin: -8px -16px -16px; }
  .counts-list a { padding: 0 16px; }
  dl.facts { grid-template-columns: 112px minmax(0, 1fr); gap: 0 12px; }
  .facts-grid, .animal-page .facts-grid { grid-template-columns: minmax(0, 1fr); }
  .facts-grid > div { grid-template-columns: 112px minmax(0, 1fr); gap: 0 12px; }
  .consent-list li { grid-template-columns: 112px minmax(0, 1fr); gap: 0 12px; }
  main.page .entity-tabs { gap: 20px; padding: 0 12px; margin: 16px -12px; }
  main.page .entity-tabs a { padding: 0; border-bottom: 0; margin-bottom: 0; }
  main.page .entity-tabs a.on { color: var(--ink); border-bottom-color: transparent; }
  .results-list .dr-row { padding: 12px 16px; }
  .card > .results-list { margin-left: -16px; margin-right: -16px; }
  .finder-filters .tabs { border-radius: 10px; }
  .pet-row { margin-top: 12px; }
}
/* A card title with a picture keeps the 48px header row; titles are text-coloured links. */
.card > h2.av-row .av { width: 32px; height: 32px; font-size: 14px; }
.card > h2 > a:not(.av-link), .card-head h2 > a { color: var(--ink); text-decoration: none; }
.card > h2 > a:not(.av-link):hover, .card-head h2 > a:hover { text-decoration: underline; text-decoration-color: var(--pg-line-2); text-underline-offset: 3px; }
/* Header actions share one height. */
.entity-actions .btn.small { min-height: 36px; padding: 0 14px; font-size: 14px; }

/* case-discussion: links-notes */
/* Discord case chat on the animal page (CASE_DISCUSSION.md → Stage 1): Discord blurple, the glyph, a slim prompt. */
.discord-btn { display: inline-flex; align-items: center; gap: 6px; background: #5865f2; border-color: #5865f2; color: #fff; }
.discord-btn:hover, .discord-btn:focus-visible { background: #4752c4; border-color: #4752c4; color: #fff; }
.discord-glyph { flex: none; width: 16px; height: 16px; }
.discord-menu { position: relative; }
.discord-menu > summary { list-style: none; cursor: pointer; }
.discord-menu > summary::-webkit-details-marker { display: none; }
.discord-menu-list { position: absolute; right: 0; z-index: 20; min-width: 200px; max-width: min(320px, 90vw); margin: 4px 0 0; padding: 4px; list-style: none;
  background: #fff; border: 1px solid var(--pg-line-2); border-radius: 8px; box-shadow: 0 6px 20px rgba(40, 24, 38, .12); }
.discord-menu-list a { display: block; padding: 8px 10px; border-radius: 6px; overflow-wrap: anywhere; color: var(--pg-text); text-decoration: none; }
.discord-menu-list a:hover { background: var(--pg-raised); }
.discord-strip { display: grid; gap: 8px; margin: 0 0 12px; }
.discord-strip:empty { display: none; }
.discord-prompt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; padding: 8px 12px; border-radius: 8px;
  background: #eef0fe; color: #2b2f6b; font-size: 14px; }
.discord-prompt .discord-glyph { color: #5865f2; }
.discord-prompt strong { overflow-wrap: anywhere; }
.discord-prompt-actions { white-space: nowrap; }
.linkish { padding: 0; border: 0; background: none; font: inherit; font-weight: 500; color: #4752c4; text-decoration: underline; cursor: pointer; }
.linkish:disabled { opacity: .5; cursor: default; }
.discord-panel h2 { margin: 0 0 8px; font-size: 16px; }
.discord-panel input { width: 100%; min-width: 0; }
.discord-linked li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; overflow-wrap: anywhere; }

/* Case-note kinds, Mabel's drafts and the kind filter (Stage 2a). */
.kind-pill { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 6px; font-size: 12px; line-height: 16px; font-weight: 500;
  background: var(--pg-raised); color: var(--pg-text-2); white-space: nowrap; }
.kind-pill.kind-decision { background: var(--pg-accent-soft); color: var(--pg-accent-ink); }
.kind-pill.kind-handover { background: #e8f1ec; color: #2f6a4c; }
.kind-pill.kind-call { background: #eaf0f7; color: #345878; }
.note-origin { margin: 4px 0 0; }
.note-origin a { color: inherit; }
.note-kind select { max-width: 220px; }
.note-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.note-filters .chip[aria-pressed="true"] { background: var(--pg-accent-soft); color: var(--pg-accent-ink); border-color: rgba(180, 29, 141, .25); }
.note-filters .count { margin-left: 4px; font-family: var(--pg-mono); font-size: 11px; color: var(--pg-muted); }
.drafts-box { border-color: rgba(88, 101, 242, .35); background: #fbfbff; }
.drafts-box .card-head h2 .count, .links-group .card-head h2 .count, .sar-group .card-head h2 .count { margin-left: 6px; font-family: var(--pg-mono); font-size: 12px; font-weight: 400; color: var(--pg-muted); }
.notes.drafts .note-meta { flex-wrap: wrap; }
.draft-actions { flex-wrap: wrap; }
.draft-waiting { margin: 6px 0 0; color: var(--pg-muted); }
.danger-text { color: #a3292b; }

/* /hub/discord-links: suggestions to confirm. */
.links-count-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; }
.links-count-grid dt { color: var(--pg-muted); font-size: 13px; }
.links-count-grid dd { margin: 2px 0 0; font-family: var(--pg-mono); font-size: 20px; }
.links-list { list-style: none; margin: 0; padding: 0; }
.links-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 0; border-top: 1px solid var(--pg-line); }
.links-row:first-child { border-top: 0; }
.links-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; }
.links-animal { font-weight: 500; }
.links-client, .links-channel { color: var(--pg-text-2); overflow-wrap: anywhere; }
.links-channel { font-family: var(--pg-mono); font-size: 13px; }
.links-actions { display: flex; align-items: center; gap: 8px; }
.links-row.decided .links-actions button { display: none; }
.links-outcome { color: var(--pg-ok); }

/* Data request export in two steps, and the review of team notes (Stage 2c). */
.sar-step-title { margin: 16px 0 8px; font-size: 15px; font-weight: 500; }
.sar-steps { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; }
.sar-step { display: flex; gap: 12px; align-items: flex-start; }
.sar-step-n { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--pg-raised);
  font-family: var(--pg-mono); font-size: 13px; }
.sar-step.done .sar-step-n { background: #e3f1e9; color: var(--pg-ok); }
.sar-step-body { min-width: 0; }
.sar-step-body p { margin: 4px 0 0; }
.sar-step [aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.sar-explainer p { margin: 0; }
.sar-explainer p + p { margin-top: 6px; }
.sar-items { list-style: none; margin: 0; padding: 0; }
.sar-item { padding: 12px 0; border-top: 1px solid var(--pg-line); }
.sar-item:first-child { border-top: 0; }
.sar-item.has-error { box-shadow: inset 3px 0 0 #a3292b; padding-left: 10px; }
.sar-item[data-action="withhold"] .sar-text { color: var(--pg-muted); text-decoration: line-through; text-decoration-color: rgba(40, 24, 38, .3); }
.sar-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.sar-text { margin: 6px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.sar-choice { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; border: 0; }
.sar-opt { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; cursor: pointer; }
.sar-detail { margin-top: 8px; }
.sar-detail textarea, .sar-detail select, .sar-detail input { width: 100%; min-width: 0; }
.sar-item-msg { margin: 6px 0 0; }
.tag-new { display: inline-flex; padding: 1px 6px; border-radius: 6px; font-size: 11px; background: #e3f1e9; color: var(--pg-ok); }
.links-confidence { display: inline-flex; padding: 1px 7px; border-radius: 6px; font-size: 12px; background: #e3f1e9; color: var(--pg-ok); }
.links-confidence.conf-partial { background: #fbf1df; color: #8a5a12; }
@media (max-width: 640px) {
  .links-count-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sar-detail .row2 { grid-template-columns: 1fr; }
  .discord-prompt { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .discord-prompt .discord-glyph { margin-top: 2px; }
  .discord-prompt-actions { grid-column: 2; }
  .links-actions { width: 100%; }
  .discord-menu-list { right: auto; left: 0; }
}