/* SOCIAL173: the site-wide dashboard design (owner 2026-09-12: "Mockup-er man").
   Linked only when a template passes `siteCss` to views/partials/head.ejs, so each page group
   opts in on its own pass. It restyles EXISTING classes through selectors only - no markup
   moves - and every rule reads the global --hd-* tokens; the one :root block below adds the
   few values the global set lacks. Hex and rgba values live in that block only.
   Left alone on purpose, so a card looks the same on every page: the feed cards (.post and
   everything inside them), the header nav (.hdr), the install bar, the tip viewer, the chat
   sheet and FAB, and the bottom bar. The exclusion is carried by :where(), so it adds no
   specificity and a rule here wins over app.css by load order only. */
:root{
  --hd-hair:#EDF3F5;
  --hd-off:#C3D8E8;
  --hd-off-ink:#F2F8FC;
  --hd-danger:#C0555A;
  --hd-placeholder:#93A6AC;
  --hd-warn-bg:#FDF6E3;
  --hd-warn-line:#F0E2BE;
  --hd-warn-ink:#8A6A1F;
  --hd-info-ink:#2C5F88;
  --hd-ok-ink:#1C7C40;
  --hd-shadow:0 1px 2px rgba(22,39,44,.04);
}

/* 1. Base: the page ground, link colour without underline, one focus ring. */
body{background:var(--hd-page);color:var(--hd-ink)}
a:where(:not(.post *,.hdr *,.botnav *,.hd-install-bar *,.tvwrap *,.chatsheet *)){color:var(--hd-blue);text-decoration:none}
:is(a,button,summary,.btn):where(:not(.post *,.hdr *,.botnav *,.hd-install-bar *,.tvwrap *,.chatsheet *)):focus-visible{outline:2px solid var(--hd-blue);outline-offset:2px}

/* 2. Cards: 17px radius, 13px padding, hairline shadow, 12px stack gap. */
.card:where(:not(.post *)),.strip:where(:not(.post *)),.joinstrip{background:var(--hd-card);border:1px solid var(--hd-line);border-radius:17px;padding:13px;box-shadow:var(--hd-shadow)}
.card:where(:not(.post *)){margin:0 0 12px}

/* 3. Headings, sublines and meta. */
.wrap h1:where(:not(.post *)){margin:0 0 6px;font-size:18px;line-height:1.3;font-weight:600;color:var(--hd-ink)}
.page-h1{margin-top:4px}
.sec-h:where(:not(.post *)){margin:16px 0 8px;font-size:15px;line-height:1.35;font-weight:500;color:var(--hd-ink)}
.wrap>h2:where(:not(.sec-h)){margin:16px 0 8px;font-size:15px;line-height:1.35;font-weight:500;color:var(--hd-ink)}
.card>h2:where(:not(.post *)),.card>h3:where(:not(.post *)){margin:0 0 6px;font-size:15px;line-height:1.35;font-weight:500;color:var(--hd-ink)}
.card p:where(:not(.post *)),.card li:where(:not(.post *)){font-size:14.5px;line-height:1.55}
.lede{font-size:13px;line-height:1.55;color:var(--hd-muted)}
.tiny:where(:not(.post *)),.card .tiny:where(:not(.post *)){font-size:12.5px;line-height:1.45;color:var(--hd-muted)}

/* 4. Buttons: primary, ghost, second, danger, small, block, disabled. */
.btn:where(:not(.post *,.hdr *,.hd-install-bar *,.tvwrap *,.chatsheet *)){display:inline-flex;align-items:center;justify-content:center;gap:7px;box-sizing:border-box;min-height:48px;padding:0 16px;border:1px solid var(--hd-line);border-radius:10px;background:var(--hd-card);color:var(--hd-ink);font-size:14.5px;font-weight:500;line-height:1.3;text-decoration:none}
.btn-primary:where(:not(.post *,.hdr *,.hd-install-bar *,.tvwrap *,.chatsheet *)){background:var(--hd-blue);border-color:var(--hd-blue);color:var(--hd-card)}
.btn-primary:where(:not(.post *,.hdr *,.hd-install-bar *,.tvwrap *,.chatsheet *)):hover{background:var(--hd-blue-text);border-color:var(--hd-blue-text)}
.btn-primary:where(:not(.post *,.hdr *,.hd-install-bar *,.tvwrap *,.chatsheet *)):disabled{background:var(--hd-off);border-color:var(--hd-off);color:var(--hd-off-ink);cursor:default}
.btn-ghost:where(:not(.post *,.hdr *,.hd-install-bar *,.tvwrap *,.chatsheet *)){background:var(--hd-card);border-color:var(--hd-line);color:var(--hd-blue);font-size:13.5px;font-weight:400;border-radius:9px;padding:0 14px}
.btn-second:where(:not(.post *,.hdr *,.hd-install-bar *,.tvwrap *,.chatsheet *)){background:var(--hd-teal-soft);border-color:var(--hd-teal-soft);color:var(--hd-teal-text)}
.btn-danger:where(:not(.post *,.hdr *,.hd-install-bar *,.tvwrap *,.chatsheet *)){background:var(--hd-danger);border-color:var(--hd-danger);color:var(--hd-card)}
.btn-sm:where(:not(.post *,.hdr *,.hd-install-bar *,.tvwrap *,.chatsheet *)){padding:0 12px;font-size:13px}
.btn-primary.btn-sm:where(:not(.post *,.hdr *,.hd-install-bar *,.tvwrap *,.chatsheet *)){font-size:14px}
.btn-block:where(:not(.post *,.hdr *,.hd-install-bar *,.tvwrap *,.chatsheet *)){display:flex;width:100%}
.linkish:where(:not(.post *,.hdr *,.hd-install-bar *,.tvwrap *,.chatsheet *)){display:inline-flex;align-items:center;min-height:48px;padding:0 8px;color:var(--hd-blue);font-size:13.5px;text-decoration:none}

/* 5. Forms: 13px/500 labels, 48px inputs on the input ground, 10px radius. */
label:where(:not(.post *,.hdr *,.chatsheet *)){font-size:13px;font-weight:500;color:var(--hd-ink)}
input:where(:not([type=checkbox],[type=radio],[type=hidden],[type=file],[type=range],.post *,.hdr *,.chatsheet *)),
select:where(:not(.post *,.hdr *,.chatsheet *)){box-sizing:border-box;min-height:48px;padding:0 13px;border:1px solid var(--hd-line);border-radius:10px;background:var(--hd-input);color:var(--hd-ink);font-size:14.5px;line-height:1.45}
textarea:where(:not(.post *,.hdr *,.chatsheet *)){box-sizing:border-box;min-height:110px;padding:11px 13px;border:1px solid var(--hd-line);border-radius:10px;background:var(--hd-input);color:var(--hd-ink);font-size:14.5px;line-height:1.55}
:is(input,textarea):where(:not(.post *,.hdr *,.chatsheet *))::placeholder{color:var(--hd-placeholder)}
input:where([type=checkbox],[type=radio]):where(:not(.post *,.hdr *,.chatsheet *)){width:19px;height:19px;accent-color:var(--hd-blue)}

/* 6. Chips, badges, alerts, empty states. */
.chip:where(:not(.post *,.hdr *)){background:var(--hd-hair);color:var(--hd-ink);border-radius:10px;padding:1px 8px;font-size:12px;line-height:1.5}
.badge:where(:not(.post *,.hdr *)){border-radius:999px;padding:2px 8px;font-size:11.5px;font-weight:500}
.badge-new:where(:not(.post *,.hdr *)){background:var(--hd-warn-bg);color:var(--hd-warn-ink)}
.badge-pend:where(:not(.post *,.hdr *)){background:var(--hd-hair);color:var(--hd-muted)}
.alert:where(:not(.post *)){border-radius:11px;padding:11px 12px;font-size:13px;line-height:1.5}
.alert-warn:where(:not(.post *)){background:var(--hd-warn-bg);border-color:var(--hd-warn-line);color:var(--hd-warn-ink)}
.alert-info:where(:not(.post *)){background:var(--hd-blue-soft);border-color:var(--hd-blue-soft);color:var(--hd-info-ink)}
.empty:where(:not(.post *)){color:var(--hd-muted);font-size:13px;line-height:1.55;text-align:center}
.card.empty:where(:not(.post *)){padding:22px 13px}
.card.empty p:where(:not(.post *)){margin:0;font-size:14.5px;color:var(--hd-muted)}

/* 7. The signed-out header: its one link reads as the mockup's ghost button, on the brand row. */
.hdr.hd-hdr:has(.hd-nav>a[href="/login"]){flex-wrap:nowrap}
.hdr.hd-hdr .hd-nav>a[href="/login"]:not(.hd-nav__item){display:inline-flex;align-items:center;justify-content:center;padding:0 14px;border:1px solid var(--hd-line);border-radius:9px;background:var(--hd-card);color:var(--hd-blue);font-size:13.5px;text-decoration:none}

/* 8. The legal footer: blue links, no underline, meta size. */
.legalftr{font-size:12.5px;color:var(--hd-muted)}
.legalftr-links a{color:var(--hd-blue);text-decoration:none}

/* 9. Home: the join strip, the district picker and the new-doctor rail. */
.joinstrip-lede{font-size:15px;font-weight:500;color:var(--hd-ink)}
.districtpick .pick-label{font-size:13px;font-weight:500;color:var(--hd-ink)}
.newdoc-card .newdoc-name{font-size:13.5px;font-weight:500;line-height:1.3;color:var(--hd-ink)}
.newdoc-card .tiny{font-size:12px;line-height:1.35}

/* 10. /booking: each doctor is a card; name 15/500, credential and place as meta. */
.mkt{grid-template-columns:auto minmax(0,1fr) auto;gap:11px;align-items:center;margin:0 0 10px;padding:13px;background:var(--hd-card);border:1px solid var(--hd-line);border-radius:17px;box-shadow:var(--hd-shadow)}
.mkt-photo .avatar{width:52px;height:52px}
.mkt .who-name{font-size:15px;font-weight:500;line-height:1.35;color:var(--hd-ink)}
.mkt .who-degree{margin-top:2px;font-size:12.5px;font-weight:400;line-height:1.45;color:var(--hd-ink)}
.mkt .who-sub{font-size:12.5px;font-weight:400;line-height:1.45}
.mkt .who-sub .who-loc{color:var(--hd-muted)}
.mkt .starrow{font-size:12.5px;color:var(--hd-muted)}
/* SOCIAL185: the card's three facts - grey label, dark experience, fees bold in the fee blue; no box. */
.mkt .mkt-facts{margin-top:4px;display:grid;gap:2px;font-size:12.5px;line-height:1.4}
.mkt .mkt-fact-l{color:var(--hd-muted-text)}
.mkt .mkt-fact-exp{font-weight:600;color:var(--hd-ink)}
.mkt .mkt-fact-fee{font-weight:700;color:var(--hd-blue-text)}
.mkt .hd-why{margin:0 0 4px}
.mkt .hd-why .chip{background:var(--hd-blue-soft);color:var(--hd-blue-text)}
.filterbar{gap:9px}

/* 11. /d/<slug>: the profile card in dashboard proportions. */
.profile-hd{gap:13px;align-items:flex-start}
.profile .dr-name{margin:0 0 4px;font-size:18px;line-height:1.3;font-weight:600}
.profile .who-degree{font-size:13px;font-weight:400;line-height:1.45;color:var(--hd-ink)}
.profile .who-sub{font-size:12.5px;font-weight:400;color:var(--hd-muted)}
.profile .starrow{font-size:12.5px;color:var(--hd-muted)}
.profile .tiny{font-size:12.5px}
.profile .chamber li{font-size:14px;line-height:1.5}
.profile .meta{gap:16px;border-color:var(--hd-hair)}
.profile .meta dt{font-size:12.5px;color:var(--hd-muted)}
.profile .meta dd{font-size:18px;font-weight:600}

/* 12. /q/<id> and /community: form rows and helper lines. */
.field:where(:not(.post *)){margin-bottom:11px}
.lvhelp-n{color:var(--hd-blue-text)}
.tipkind:where(:not(.post *)){border-radius:11px;font-size:12.5px;font-weight:400;color:var(--hd-muted)}
.tipkind:where(:not(.post *))[aria-pressed="true"]{background:var(--hd-teal-soft);border-color:var(--hd-teal);color:var(--hd-teal-text);font-weight:500}

/* 13. Lists: inbox, followers, my answers, booking requests (.dc-row family, SOCIAL174).
   Rows in the mockup's list rhythm: hairline dividers, 12px padding, 14.5/500 titles, 12.5 meta.
   The unread count stays a number (owner ruling) and the needs-reply bar keeps its weight. */
.dc-row:where(:not(.post *)){padding:12px 2px;border-bottom:1px solid var(--hd-hair)}
.dc-name:where(:not(.post *)){font-size:14.5px;font-weight:500;line-height:1.35;color:var(--hd-ink)}
.dc-meta:where(:not(.post *)),.dc-at:where(:not(.post *)),.dc-account:where(:not(.post *)){font-size:12.5px;line-height:1.45;color:var(--hd-muted)}
.dc-dot{background:var(--hd-blue)}
.dc-badge{background:var(--hd-blue);color:var(--hd-card);font-size:11.5px;font-weight:500}
.dc-wait{border-left-color:var(--hd-blue)}
.dc-wait .dc-name{font-weight:600}
.dc-why{font-size:12.5px;color:var(--hd-muted)}

/* 14. The message room (inbox thread): bubbles on the card ground, the patient's own in soft blue. */
.room-msg{border-radius:13px;border-color:var(--hd-line);padding:10px 12px;font-size:14.5px;line-height:1.5}
.room-patient{background:var(--hd-blue-soft);border-color:var(--hd-blue-soft)}
.room-clinic{background:var(--hd-card)}
.room-at{font-size:11.5px;color:var(--hd-muted);opacity:1}
.room-who{font-size:12.5px;font-weight:500;color:var(--hd-muted)}
.room-call{min-height:48px;padding:0 14px;border:1px solid var(--hd-line);border-radius:10px;background:var(--hd-card);color:var(--hd-blue);font-size:13.5px;text-decoration:none}
.room-status,.room-attach-hint{font-size:12.5px;color:var(--hd-muted);opacity:1}
.room-attach{font-size:13px;color:var(--hd-ink)}

/* 16. /me form groups: legends as labels, day chips on the input ground, service boxes as inner cards. */
.label-as-legend{font-size:13px;font-weight:500;color:var(--hd-ink)}
.daybox{border-color:var(--hd-line);background:var(--hd-input);font-size:13px}
.svcsection{border-color:var(--hd-line);border-radius:13px;padding:11px 12px}
.inline-form{gap:9px}

/* 17. The "doctors you could follow" strip off the dashboards (inbox, profile pages): the same two-line
   row the dashboards got in SOCIAL173 - face, name and tick on line 1; profile, message and a smaller
   Follow on line 2 - targeted by rows that carry a face. */
.card .dc-row:has(>.avatar){flex-wrap:wrap;gap:10px 8px}
.card .dc-row:has(>.avatar)>.avatar{flex:0 0 46px;width:46px;height:46px}
.card .dc-row:has(>.avatar) .dc-main{flex-direction:row;flex-wrap:wrap;align-items:center;gap:2px 5px;flex:1 1 calc(100% - 56px)}
.card .dc-row:has(>.avatar) .dc-main .tiny{flex:0 0 100%}
.card .dc-row:has(>.avatar)>.actbtn{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:48px;padding:0 10px;border:1px solid var(--hd-line);border-radius:9px;background:var(--hd-card);color:var(--hd-blue);font-size:13.5px;text-decoration:none}
.card .dc-row:has(>.avatar)>form{flex:0 0 auto;margin:0}
.card .dc-row:has(>.avatar) .followbtn{min-height:48px;padding:0 14px;border:1px solid var(--hd-blue);border-radius:9px;background:var(--hd-card);color:var(--hd-blue);font-size:13px}
.card .dc-row:has(>.avatar) .followbtn[aria-pressed="true"]{background:var(--hd-teal-soft);border-color:var(--hd-teal-soft);color:var(--hd-teal-text);font-weight:500}

/* 18. Sign-up and login (SOCIAL175). The BMDC box IS the input: the box takes the input dress and the
   inner input sheds it, so the page never draws a box inside a box. The prefix stays muted. */
.bmdcbox{box-sizing:border-box;min-height:48px;padding:0 13px;border:1px solid var(--hd-line);border-radius:10px;background:var(--hd-input)}
.bmdcbox:focus-within{outline:2px solid var(--hd-blue);outline-offset:0;border-color:var(--hd-blue)}
.bmdcbox input{min-height:0;padding:0;border:0;border-radius:0;background:transparent}
.bmdcfix{font-size:14.5px;font-weight:500;color:var(--hd-muted)}
.pin-recover{margin-top:12px}
.warn:where(:not(.post *)){border:1px solid var(--hd-warn-line);border-radius:10px;padding:10px 12px;background:var(--hd-warn-bg);color:var(--hd-warn-ink);font-size:12.5px;line-height:1.55}
.err{font-size:12.5px;font-weight:500;color:var(--hd-danger)}

/* 19. The serial and online-booking forms: chamber picker legend as a label, radio rows with a
   comfortable tap height, consent text at meta size, the status line as a section title. */
.chamberpick legend{font-size:13px;font-weight:500;color:var(--hd-ink)}
.radiorow{gap:9px;padding:8px 0;font-size:14.5px;line-height:1.5}
.consent{font-size:13.5px;line-height:1.5}
.statusline{font-size:15px;font-weight:500;color:var(--hd-ink)}

/* 20. Install: the steps at body size, the install button as the page's one large primary. */
.steps{font-size:14.5px;line-height:1.7}
.btn-install:where(:not(.post *,.hdr *,.hd-install-bar *)){min-height:52px;font-size:15px}

/* 21. The "doctor who will see you" card (serial, online booking): the credential as meta, the name
   as a card title. `.card p` ties section 3's paragraph rule and wins by order; :where() keeps these
   below the /d/<slug> profile and /booking card rules (two classes), which stay authoritative. */
.card p:where(.who-degree):where(:not(.post *)){font-size:12.5px;font-weight:400;line-height:1.45;color:var(--hd-ink)}
.card p:where(.who-name):where(:not(.post *)){font-size:15px;font-weight:500;line-height:1.35;color:var(--hd-ink)}

/* 22. Legal and about pages (SOCIAL176): the document at body size, section headings on the
   15/500 scale, dates as meta, the boxed notices (emergency warning, return note, timeline) as
   inner cards on the site's line and radius, the contact rows as label-over-value meta. */
.legaldoc{font-size:14.5px;line-height:1.65}
.legal-h2{font-size:15px;font-weight:500;line-height:1.35;color:var(--hd-ink)}
.legal-date{font-size:12.5px;color:var(--hd-muted)}
.legal-callout{border-color:var(--hd-line);border-radius:11px;background:var(--hd-card);padding:11px 12px}
.legal-callout-h{font-weight:500;color:var(--hd-ink)}
.legal-rows dt{font-size:12.5px;font-weight:500;color:var(--hd-muted)}

/* 23. The consult and paid pages (SOCIAL177; the owner lifted the freeze for markup and style only,
   2026-09-12). The instant page's title row and hotline, the department fee lists, the pay step and
   its paid state, the room's close control and identity line, and the message-line media the shared
   roomline partial draws. roomline itself is never edited: it is styled from here only. */
.titlerow{gap:10px}
.hotline{font-size:14.5px;font-weight:600;color:var(--hd-blue-text);text-decoration:none}
.feelist li{font-size:14.5px;line-height:1.5}
.openconsult{margin:12px 0}
.paystart{margin:10px 0 4px}
.paid-ok{color:var(--hd-ok-ink);font-weight:500}
.room-x-btn{min-width:48px;min-height:48px;font-size:18px;color:var(--hd-muted)}
.room-identity{font-size:12.5px;font-weight:500;color:var(--hd-muted)}
.room-file{font-size:13.5px;color:var(--hd-blue)}
.room-noplayer{font-size:12.5px;color:var(--hd-muted)}
.room-undelivered{font-size:12.5px;color:var(--hd-danger)}
.consentstep .card{padding:13px}