/* SOCIAL263: canonical presentation values for HD Social and Cleo.
 * Colour roles follow the approved directory mockups; logo artwork is unchanged.
 * Text and controls grow with content. The older app.css ledger is a compatibility floor.
 */
@font-face{font-family:"Noto Sans Bengali";font-style:normal;font-weight:400 700;font-display:swap;src:url('/public/fonts/noto-sans-bengali-400-700-bengali-v1.woff2') format('woff2');unicode-range:U+0980-09FF,U+200C-200D,U+25CC}
:root{
  --hd-font:"Noto Sans Bengali","Nirmala UI",system-ui,sans-serif;
  --hd-ink:#123144;--hd-muted-text:#516D7C;
  --hd-page:#F3F8FA;--hd-card:#FFFFFF;--hd-input:#FFFFFF;
  --hd-line:#D9E5E8;--hd-control-line:#66797F;--hd-hair:#EDF3F5;
  --hd-blue:#1465A5;--hd-teal:#087F80;
  --hd-blue-soft:#E9F4FC;--hd-teal-soft:#E5F7F8;
  --hd-action:#1465A5;--hd-action-hover:#105589;--hd-secondary:#076F70;
  --hd-error:#B3261E;--hd-success:#1C7C40;
  --hd-warning:#8A6A1F;--hd-warning-bg:#FDF6E3;
  --hd-title-size:1.4375rem;--hd-section-size:1.125rem;--hd-body-size:.9375rem;
  --hd-support-size:.875rem;--hd-meta-size:.8125rem;--hd-name-size:1rem;
  --hd-button-size:.875rem;--hd-input-size:1rem;--hd-content-size:1rem;
  --hd-body-leading:1.6;--hd-heading-leading:1.4;
  --hd-space-1:.25rem;--hd-space-2:.5rem;--hd-space-3:.75rem;
  --hd-space-4:1rem;--hd-space-6:1.5rem;--hd-space-8:2rem;
  --hd-gutter:15px;--hd-card-pad:15px;--hd-card-radius:15px;--hd-control-radius:9px;
  --hd-shadow:0 2px 6px #1437460b;
  --hd-tap:48px;--hd-reading-width:680px;--hd-directory-width:1040px;--hd-ops-width:1200px;
  /* Legacy component aliases resolve to the same palette, never a second theme. */
  --bg:var(--hd-page);--card:var(--hd-card);--ink:var(--hd-ink);--muted:var(--hd-muted-text);--line:var(--hd-line);
  --brand:var(--hd-action);--brand-dk:var(--hd-action-hover);--brand-2:var(--hd-secondary);
  --hd-muted:var(--hd-muted-text);--hd-blue-text:var(--hd-action);--hd-teal-text:var(--hd-secondary);
  --hd-soft-blue:var(--hd-blue-soft);--hd-soft-teal:var(--hd-teal-soft);
  --r:var(--hd-card-radius);--pad:var(--hd-card-pad);
}
@media(min-width:768px){:root{--hd-title-size:1.8125rem;--hd-gutter:28px;--hd-card-pad:16px}}

/* SOCIAL178: shared UI rules. Authored feed typography retains its named variants. */
body{font-family:var(--hd-font);font-size:var(--hd-body-size);line-height:var(--hd-body-leading);color:var(--hd-ink);background:var(--hd-page)}
/* Shared component owners. Dynamic cards use these same classes. */
*,*::before,*::after{box-sizing:border-box}
main.wrap{width:100%;max-width:var(--hd-reading-width);margin-inline:auto}
main.wrap.hd-ops{max-width:var(--hd-ops-width)}
main.wrap.narrow{max-width:var(--hd-reading-width)}
:is(.card,.strip,.joinstrip,.post,.mkt){border-radius:var(--hd-card-radius);box-shadow:var(--hd-shadow)}
.card,.joinstrip,.post,.feedskin .post,.feedskin .post.brandpost{padding:var(--hd-card-pad)}
.feedskin .post{border:1px solid var(--hd-line);border-radius:var(--hd-card-radius);margin:0 0 var(--hd-space-3)}
.hdr.hd-hdr{padding-inline:var(--hd-gutter)}
.hdr .hd-nav__item,.botnav .hd-bnav__item{font-size:var(--hd-meta-size);border-radius:var(--hd-control-radius)}
.foot,.legalfoot{font-family:var(--hd-font);color:var(--hd-muted-text);font-size:var(--hd-meta-size)}
.hd-staff-shell{display:flex;align-items:center;justify-content:space-between;gap:var(--hd-space-3);flex-wrap:wrap;background:var(--hd-card);border-bottom:1px solid var(--hd-line);padding:var(--hd-space-2) var(--hd-gutter)}
.hd-staff-shell .hd-brand{min-width:0;max-width:100%;overflow-wrap:anywhere;display:inline-flex;align-items:center;gap:var(--hd-space-2);min-height:var(--hd-tap);color:var(--hd-ink);font-size:var(--hd-section-size);text-decoration:none}
.hd-staff-shell .hd-brand span{min-width:0;overflow-wrap:anywhere}
.hd-staff-shell img{flex:0 0 40px;width:40px;height:40px;object-fit:contain}
.hd-staff-shell__seat{color:var(--hd-muted-text);font-size:var(--hd-support-size);overflow-wrap:anywhere}

/* Common controls also cover legacy feed mounts and managed overlays. */
:is(.post,.hdr,.hd-install-bar,.chatsheet) :is(.btn,.followbtn,.tipkind,.actbtn){font-family:var(--hd-font);font-size:var(--hd-button-size);font-weight:600;border-radius:var(--hd-control-radius);min-height:var(--hd-tap);line-height:var(--hd-heading-leading);white-space:normal;overflow-wrap:anywhere}
.post .followbtn{border-color:var(--hd-control-line);color:var(--hd-action)}
.post .followbtn.is-following{background:var(--hd-teal-soft);color:var(--hd-secondary)}
.post :is(.tiny,.hd-pc__meta){font-size:var(--hd-meta-size);color:var(--hd-muted-text)}
main :is(h2,h3):where(:not(.post *)){font-size:var(--hd-section-size);line-height:var(--hd-heading-leading)}
.lede{font-size:var(--hd-support-size);line-height:var(--hd-body-leading)}
/* Cleo consumes this very same immutable asset. Only media pixels use an inverse surface. */
.cleo-chat{margin:0}
.cleo-chat header,.cleo-chat #thread,.cleo-chat form,.cleo-chat #attachNote{width:100%;max-width:var(--hd-reading-width);margin-inline:auto}
.cleo-chat header{overflow-wrap:anywhere;min-width:0;background:var(--hd-card);color:var(--hd-ink);border-bottom:1px solid var(--hd-line);padding:var(--hd-space-3) var(--hd-gutter)}
.cleo-chat #thread{padding:var(--hd-card-pad);gap:var(--hd-space-3)}
.cleo-chat form{flex-wrap:wrap;align-items:stretch}
.cleo-chat textarea{flex:1 1 180px}
.cleo-chat :is(button,.callbtn,.attach),.cleo-room button{display:inline-flex;align-items:center;justify-content:center;gap:var(--hd-space-2);min-width:var(--hd-tap);min-height:var(--hd-tap);max-width:100%;padding:var(--hd-space-2) var(--hd-space-4);border:1px solid var(--hd-control-line);border-radius:var(--hd-control-radius);font-family:var(--hd-font);font-size:var(--hd-button-size);font-weight:600;line-height:var(--hd-heading-leading);white-space:normal;overflow-wrap:anywhere;text-decoration:none}
.cleo-chat :is(button,.callbtn){color:var(--hd-card);background:var(--hd-action);border-color:var(--hd-action)}
.cleo-chat .attach{background:var(--hd-card);color:var(--hd-action)}
.cleo-chat :is(textarea,input),.cleo-room .composer input{font-family:var(--hd-font);font-size:var(--hd-input-size);min-width:0;min-height:var(--hd-tap);border:1px solid var(--hd-control-line);border-radius:var(--hd-control-radius);background:var(--hd-input);color:var(--hd-ink)}
.cleo-chat .at,.cleo-room .st{font-size:var(--hd-meta-size);color:var(--hd-muted-text)}
.cleo-chat button:disabled,.cleo-room button:disabled{opacity:1;background:var(--hd-hair);color:var(--hd-muted-text);border-color:var(--hd-line)}
.cleo-refusal{min-height:100dvh;height:auto;padding:var(--hd-gutter)}
.cleo-refusal p{min-width:0;max-width:100%;overflow-wrap:anywhere;padding:var(--hd-card-pad);border:1px solid var(--hd-line);border-radius:var(--hd-card-radius);background:var(--hd-card);box-shadow:var(--hd-shadow);font-size:var(--hd-body-size);line-height:var(--hd-body-leading)}
.cleo-room header{padding:var(--hd-space-3) var(--hd-gutter);background:var(--hd-card);overflow-wrap:anywhere}
.cleo-room .stage{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(180px,1fr) auto;background:#0f1115;min-height:240px}
.cleo-room .controls{position:relative;grid-area:2/1;flex-wrap:wrap;align-items:stretch;padding:var(--hd-space-3);background:#0f1115}
.cleo-room #remote{grid-area:1/1;min-height:180px;object-fit:contain}
.cleo-room #local{top:12px;bottom:auto}
.cleo-room .peerface{position:relative;inset:auto;grid-area:1/1;min-width:0;color:#fff;padding:var(--hd-space-3)}
.cleo-chat #file{clip-path:inset(50%);overflow:hidden;white-space:nowrap}
.cleo-room .controls button{background:var(--hd-card);color:var(--hd-ink)}
.cleo-room button.end{background:var(--hd-error);color:var(--hd-card);border-color:var(--hd-error)}
.cleo-room .side{background:var(--hd-page)}
.cleo-room .file .doc{background:var(--hd-blue-soft);color:var(--hd-action)}
.cleo-room .composer,.cleo-room .attach{display:flex;gap:var(--hd-space-2);flex-wrap:wrap;padding:var(--hd-space-3);min-width:0}
.cleo-room .composer input{flex:1 1 160px}
.cleo-room input[type=file]{min-width:0;max-width:100%;font-family:var(--hd-font);font-size:var(--hd-input-size)}
.cleo-room .msg{font-size:var(--hd-body-size);line-height:var(--hd-body-leading);border-radius:var(--hd-card-radius);padding:var(--hd-space-3)}
.cleo-room .notice{background:var(--hd-warning-bg);color:var(--hd-warning);font-size:var(--hd-support-size)}
@media(max-width:820px){.cleo-room .wrap{height:auto;min-height:100dvh}.cleo-room main{flex:1 0 auto}.cleo-room .stage{height:auto;min-height:300px;grid-template-rows:minmax(180px,40dvh) auto}.cleo-room .side{max-height:none;min-height:300px}.cleo-room .pane{max-height:45dvh}}
button,input,select,textarea{font-family:inherit}
/* Feed strips and nav children inherit the same scale as their parent controls. */
.hdr.hd-hdr .hd-nav>a[href="/login"]:not(.hd-nav__item){font-size:var(--hd-button-size);font-weight:600;border-color:var(--hd-control-line);border-radius:var(--hd-control-radius)}
.hd-doctor-home .hd-dd :is(.followbtn,.actbtn),.hd-patient-home .hd-pd :is(.followbtn,.actbtn){font-size:var(--hd-button-size);font-weight:600;min-height:var(--hd-tap);border-radius:var(--hd-control-radius)}
.post .post-body,.post .post-body.hd-pc__cap{font-size:var(--hd-content-size);line-height:var(--hd-body-leading)}

button.linkish{min-height:var(--hd-tap);font-size:var(--hd-button-size);font-weight:600;border-radius:var(--hd-control-radius);padding:var(--hd-space-2);white-space:normal;overflow-wrap:anywhere}
main.wrap{min-width:0;padding-inline:var(--hd-gutter)}
main.wrap h1:where(:not(.post *)),main.wrap h1.dr-name,main.wrap h1.sec-h{font-size:var(--hd-title-size);font-weight:650;line-height:var(--hd-heading-leading);overflow-wrap:anywhere}
main.wrap .sec-h:where(:not(.post *)){font-size:var(--hd-section-size);font-weight:600;line-height:var(--hd-heading-leading)}
main.wrap :is(p,li):where(:not(.post *,.tiny,.room-text,.room-at,.room-who)){font-size:var(--hd-body-size);line-height:var(--hd-body-leading)}
.tiny:where(:not(.post *)),.lede:where(:not(.post *)){color:var(--hd-muted-text)}
.tiny:where(:not(.post *)){font-size:var(--hd-meta-size);line-height:1.45}
a:where(:not(.post *,.hdr *,.botnav *,.hd-install-bar *,.tvwrap *,.chatsheet *)){color:var(--hd-action)}
:is(a,button,input,textarea,select,summary,.btn):focus-visible{outline:2px solid var(--hd-action);outline-offset:2px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--hd-space-2);
  min-height:var(--hd-tap);max-width:100%;padding:var(--hd-space-2) var(--hd-space-4);
  border-radius:var(--hd-control-radius);font-size:var(--hd-button-size);font-weight:600;
  line-height:1.3;white-space:normal;overflow-wrap:anywhere;text-align:center;text-decoration:none;
}
.btn.btn-sm{font-size:var(--hd-button-size);border-radius:var(--hd-control-radius)}
.btn-primary{background:var(--hd-action);border-color:var(--hd-action);color:var(--hd-card)}
.btn-primary:hover{background:var(--hd-action-hover);border-color:var(--hd-action-hover)}
.btn-ghost{background:var(--hd-card);border-color:var(--hd-control-line);color:var(--hd-action)}
.btn-second{background:var(--hd-teal-soft);border-color:var(--hd-secondary);color:var(--hd-secondary)}
.btn-danger{background:var(--hd-error);border-color:var(--hd-error);color:var(--hd-card)}
.btn:disabled:where(:not(.post *)),.btn[aria-disabled="true"]:where(:not(.post *)){background:var(--hd-hair);color:var(--hd-muted-text);border-color:var(--hd-line);cursor:default}
.btn-block{display:flex;width:100%}
main :is(input,select,textarea):where(:not([type=hidden],[type=checkbox],[type=radio],[type=file],[type=range],.post *)){
  min-width:0;max-width:100%;min-height:var(--hd-tap);font-size:var(--hd-input-size);line-height:1.5;
  color:var(--hd-ink);background:var(--hd-input);border:1px solid var(--hd-control-line);border-radius:var(--hd-control-radius);
}
main :is(input,textarea):where(:not(.post *))::placeholder{color:var(--hd-muted-text);opacity:1}
main :is(input,textarea,select)[aria-invalid="true"]{border-color:var(--hd-error)}
main :is(.err,.alert-bad){color:var(--hd-error)}
main :is(.field,.inline-form,.filterbar,.dc-row,.dc-main,.dc-call,.room-say,.profile,.card,.mkt){min-width:0;max-width:100%}
main :is(.strip,.inline-form,.filterbar,.dc-call){flex-wrap:wrap}
main :is(.dc-name,.who-name,.dc-account,.dc-at,.dc-why,.profile h1,.profile dd){overflow-wrap:anywhere}
main .dc-main .tiny{min-width:0;max-width:100%;overflow-wrap:anywhere;white-space:normal}
.hd-page-heading{margin:0 0 var(--hd-space-3);display:flex;align-items:center;justify-content:space-between;gap:var(--hd-space-3);flex-wrap:wrap}
.hd-page-heading h1{margin:0}
.hd-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.hd-person-list{list-style:none;margin:0;padding:0}
.hd-person{display:flex;align-items:center;flex-wrap:wrap;gap:var(--hd-space-3);min-width:0;padding-block:var(--hd-space-3);border-bottom:1px solid var(--hd-line)}
.hd-person:last-child{border-bottom:0}
.hd-person-identity{display:flex;align-items:center;gap:var(--hd-space-3);flex:1 1 180px;min-width:0;color:var(--hd-ink);text-decoration:none;min-height:var(--hd-tap)}
.hd-person-copy{display:flex;flex-direction:column;min-width:0;gap:var(--hd-space-1)}
.hd-suggest-photo{display:inline-flex;align-items:center;justify-content:center;min-width:48px;min-height:48px;flex:0 0 48px}
.hd-suggest-photo .avatar{width:48px;height:48px;flex-basis:48px}
.card .dc-row:has(>.hd-suggest-photo){flex-wrap:wrap;gap:10px 8px}
.card .dc-row:has(>.hd-suggest-photo) .dc-main{flex:1 1 calc(100% - 64px);min-width:0}
.card .dc-row:has(>.hd-suggest-photo)>.actbtn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:8px 12px;color:var(--hd-action);border:1px solid var(--hd-control-line);border-radius:var(--hd-control-radius)}
.card .dc-row:has(>.hd-suggest-photo) .followbtn{min-height:48px;padding:8px 14px;white-space:normal;overflow-wrap:anywhere;color:var(--hd-action)}
.hd-person-name{font-size:var(--hd-name-size);font-weight:500;line-height:1.35;color:var(--hd-ink);overflow-wrap:anywhere}
.hd-person-meta{font-size:var(--hd-meta-size);line-height:1.45;color:var(--hd-muted-text);overflow-wrap:anywhere}
.hd-person-actions{display:flex;gap:var(--hd-space-2);flex-wrap:wrap;max-width:100%}
.hd-avatar{display:inline-flex;align-items:center;justify-content:center;flex:0 0 48px;width:48px;height:48px;overflow:hidden;border-radius:50%;background:var(--hd-blue-soft);color:var(--hd-action)}
.hd-avatar img{width:100%;height:100%;object-fit:cover}
.hd-avatar img+span{display:none}
.hd-avatar.hd-avatar-missing img{display:none}
.hd-avatar.hd-avatar-missing span{display:inline}
.hd-avatar-large{width:88px;height:88px;flex-basis:88px;font-size:2rem}
.hd-profile-details{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--hd-space-3);margin-block:var(--hd-space-4)}
.hd-profile-details dt{font-size:var(--hd-meta-size);color:var(--hd-muted-text)}
.hd-profile-details dd{margin:0;font-size:var(--hd-body-size);overflow-wrap:anywhere}
main.wrap:is(.hd-inbox,.hd-followers,.hd-person-profile){max-width:var(--hd-reading-width);margin-inline:auto}
.hd-inbox-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--hd-space-2);padding:var(--hd-space-3) 0;border-bottom:1px solid var(--hd-line);min-width:0}
.hd-inbox-row:last-child{border-bottom:0}
.hd-inbox-row .hd-person-identity{grid-column:1;min-width:0}
.hd-thread-preview{grid-column:1 / -1;display:flex;align-items:flex-start;justify-content:space-between;gap:var(--hd-space-3);min-height:48px;min-width:0;text-decoration:none;color:var(--hd-muted-text)}
.hd-preview-text{min-width:0;overflow:hidden;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:var(--hd-support-size);line-height:1.55}
.hd-preview-time{flex-shrink:0;font-size:var(--hd-meta-size);line-height:1.45;color:var(--hd-muted-text)}
.hd-unread{color:var(--hd-action);font-size:var(--hd-meta-size);font-weight:600;align-self:center;overflow-wrap:anywhere;max-width:7rem}
.hd-inbox-row.dc-unseen .hd-preview-text{font-weight:600;color:var(--hd-ink)}
.hd-inbox .room-thread{gap:var(--hd-space-2);margin-block:var(--hd-space-4);min-width:0}
.hd-inbox .room-msg{max-width:88%;min-width:0;border-radius:13px;padding:10px 12px;font-size:var(--hd-body-size);line-height:var(--hd-body-leading)}
.hd-inbox .room-patient{background:var(--hd-blue-soft);color:var(--hd-ink)}
.hd-inbox .room-clinic{background:var(--hd-card);color:var(--hd-ink)}
.hd-inbox .room-at{font-size:var(--hd-meta-size);color:var(--hd-muted-text);opacity:1}
.hd-inbox :is(.room-file,.room-call){overflow-wrap:anywhere;max-width:100%}
.hd-inbox :is(.room-audio,.room-video){width:100%;max-width:100%;min-width:0}
.hd-message-date{align-self:center;max-width:100%;margin:var(--hd-space-3) 0;font-size:var(--hd-meta-size);color:var(--hd-muted-text);text-align:center;overflow-wrap:anywhere}
.hd-inbox .room-say{display:flex;flex-direction:column;gap:var(--hd-space-2);margin-top:var(--hd-space-4)}
.hd-inbox .room-say textarea{width:100%;resize:vertical;min-height:96px;max-height:240px;padding:var(--hd-space-3)}
.hd-inbox .room-attach{display:flex;align-items:center;flex-wrap:wrap;gap:var(--hd-space-2);min-height:48px}
.hd-inbox .room-attach input{max-width:100%}
.hd-inbox .hd-new-messages{align-self:center}
main.hd-ops{max-width:var(--hd-ops-width)}
.hd-table-region{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain}
.hd-table-region:focus-visible{outline:2px solid var(--hd-action);outline-offset:2px}
.hd-table-region table{width:100%;border-collapse:collapse}
.hd-table-region :is(th,td){padding:var(--hd-space-2);overflow-wrap:anywhere}
.hd-ops :is(.btn,.linkish){min-height:48px}
.hd-ops :is(.strip,.dc-row,.inline-form){gap:var(--hd-space-3)}
.hd-ops .card{overflow-wrap:anywhere}
.legalftr .legalftr-links a,main .linkish,.hdr.hd-hdr .hd-nav>a[href="/login"]:not(.hd-nav__item){color:var(--hd-action)}
.avatar.avatar-blank:where(:not(.post *)){background:var(--hd-blue-soft);color:var(--hd-action)}
.card .tiny,.tiny.warn,.dc-row .tiny,.bmdcbox .bmdcfix{color:var(--hd-muted-text)}
.dc-badge{background:var(--hd-action);color:var(--hd-card)}
.feedskin .btn.tipkind{color:var(--hd-action)}
.bmdcbox>input{min-height:48px}
main label:has(>input[type="checkbox"],>input[type="radio"]){min-height:48px;display:flex;align-items:center;gap:var(--hd-space-2)}
.hd-doctor-home{--dd-blue:var(--hd-action);--dd-teal:var(--hd-secondary);--dd-muted:var(--hd-muted-text)}
.hd-patient-home{--pd-blue:var(--hd-action);--pd-teal:var(--hd-secondary);--pd-muted:var(--hd-muted-text)}
@media(max-width:480px){
  .hd-person-actions{flex:1 1 100%}
  .hd-person-actions .btn{flex:1 1 auto}
  .hd-inbox .room-msg{max-width:94%}
  .hd-preview-time{max-width:6rem;flex-shrink:1;overflow-wrap:anywhere}
}
@media(prefers-reduced-motion:reduce){.hd-inbox{scroll-behavior:auto}}

.hd-inbox .hd-new-messages[hidden]{display:none}

/* Measured narrow-screen fixes for shared rows and standalone follow controls. */
main .dc-side{min-width:0;max-width:100%;flex-wrap:wrap}
main .dc-side>*{min-width:0;max-width:100%}
main .room-x-btn{color:var(--hd-muted-text)}
.followbtn:where(:not(.post *)){min-height:48px;max-width:100%;white-space:normal;overflow-wrap:anywhere;font-size:var(--hd-button-size);border-color:var(--hd-action);color:var(--hd-action);padding:8px 16px;font-weight:600;}
.followbtn.on:where(:not(.post *)){background:var(--hd-teal-soft);border-color:var(--hd-secondary);color:var(--hd-secondary)}
.hd-answer-photo{display:inline-flex;flex:0 0 48px;width:48px;min-height:48px;align-items:center;justify-content:center}

/* Content remains readable when text grows; natural wrapping preserves the copy. */
main.wrap{overflow-wrap:anywhere}
main :is(.strip,.policytick,.consent,.room-attach,.profile,.degreerow)>*{min-width:0;max-width:100%}
main :is(.mkt,.starrow,.profile,.degreerow){flex-wrap:wrap}
main :is(.who-loc,.hotline,.fnrow-k,.lvrank-v){white-space:normal;overflow-wrap:anywhere}
main :is(.policytick,.consent) label{min-width:0;max-width:100%}
main :is(.policytick,.consent) label>span{min-width:0;overflow-wrap:anywhere}
main :is(fieldset,legend){min-width:0;max-width:100%}
main fieldset{padding:var(--hd-space-3)}
.hd-inbox .strip>span{display:flex;flex-wrap:wrap;gap:var(--hd-space-2);min-width:0;max-width:100%}

:root{--hd-danger:var(--hd-error);--hd-placeholder:var(--hd-muted-text)}
main :is(.profile-hd,.starrow){flex-wrap:wrap}
main :is(.profile-hd,.starrow,.fnrow)>*{min-width:0;max-width:100%}
main :is(.starrow-label,.photo-flag,.callphone){white-space:normal;overflow-wrap:anywhere}
main .roster-top .badge{flex:0 1 auto;white-space:normal;overflow-wrap:anywhere;max-width:100%}
main .fnrow-k{min-width:0}
main .mkt-photo{max-width:100%}
main form.inline{min-width:0;max-width:100%}

.legalftr{color:var(--hd-muted-text);overflow-wrap:anywhere}
.hd-doctor-home .botnav .hd-bnav__item.on{background:var(--hd-action)}
.hd-patient-home .hd-pd__suggest-actions{flex-wrap:wrap;min-width:0;max-width:100%}

main .callrow-done{opacity:1}

.hd-install-bar .hd-install-x{flex:0 0 auto;width:auto;min-width:48px;height:auto;min-height:48px;padding:8px;line-height:1}

.hd-person-name.dc-name{white-space:normal;overflow:visible;text-overflow:clip}

/* The floating conversation and map controls share the same functional palette. */
.chatfab,.chatsheet-h{background:var(--hd-action);color:var(--hd-card)}
.chatfab:hover,.chatfab:active{background:var(--hd-action-hover)}
.chatsheet{font-size:var(--hd-body-size)}
.chatsheet-h strong{font-size:var(--hd-section-size)}
.chatsheet-f{flex-wrap:wrap}
.chatsheet-f textarea{flex:1 1 180px;max-width:100%;min-height:48px;font-size:var(--hd-input-size);line-height:1.5;color:var(--hd-ink);background:var(--hd-input);border-color:var(--hd-control-line)}
.chatsheet-go{min-height:48px;max-width:100%;font-size:var(--hd-button-size);padding:8px 16px;border-radius:var(--hd-control-radius);white-space:normal;overflow-wrap:anywhere}
.chatsheet-note{color:var(--hd-muted-text);font-size:var(--hd-meta-size)}
.chatline.patient{background:var(--hd-blue-soft);color:var(--hd-ink)}
.chatline-t{opacity:1;color:var(--hd-muted-text);font-size:var(--hd-meta-size)}
/* SOCIAL239 - doctor cards and presses inside the chat. Every word is the server's; a long name,
   degree or label wraps inside its card and never widens the sheet. */
.chattyped{display:flex;flex-direction:column;gap:var(--hd-space-2);min-width:0;max-width:100%}
.chatcards{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--hd-space-2);min-width:0}
.chatcard{display:flex;flex-direction:column;gap:var(--hd-space-1);min-width:0;padding:var(--hd-card-pad);background:var(--hd-card);border:1px solid var(--hd-line);border-radius:var(--hd-control-radius);color:var(--hd-ink);line-height:1.4;overflow-wrap:anywhere}
.chatcard p{margin:0}
.chatcard-top{display:flex;align-items:flex-start;gap:var(--hd-space-3);min-width:0}
.chatcard-ph{display:block;flex:0 0 48px;width:48px;height:48px;border-radius:50%;object-fit:cover;background:var(--hd-blue-soft);box-shadow:inset 0 0 0 1px var(--hd-line)}
.chatcard-id{flex:1 1 auto;min-width:0}
.chatcard-name{font-size:var(--hd-name-size);font-weight:600;line-height:1.35}
.chatcard-spec,.chatcard-deg{font-size:var(--hd-support-size);color:var(--hd-muted-text)}
.chatcard-fact{font-size:var(--hd-support-size)}
.chatcard-fee{font-weight:600}
.chatcard-acts,.chattyped-acts{display:flex;flex-wrap:wrap;gap:var(--hd-space-2);margin-top:var(--hd-space-1);min-width:0}
.chatact{flex:1 1 8.5rem;max-width:100%;min-height:var(--hd-tap);padding:8px 14px;border:1px solid var(--hd-action);border-radius:var(--hd-control-radius);font:inherit;font-size:var(--hd-button-size);font-weight:600;line-height:1.3;white-space:normal;overflow-wrap:anywhere;cursor:pointer}
.chatact--primary{background:var(--hd-action);color:var(--hd-card)}
.chatact--primary:hover{background:var(--hd-action-hover);border-color:var(--hd-action-hover)}
.chatact--secondary{background:var(--hd-card);color:var(--hd-action)}
.chatact--secondary:hover{background:var(--hd-blue-soft)}
/* The managed sheet's focus ring is white (app.css, drawn for its blue header); on a white card a
   press would lose it, so the presses keep the action colour. */
body:has(.botnav[data-hd-stack="1"]) .chatsheet .chatact:focus-visible,.chatsheet .chatact:focus-visible{outline:2px solid var(--hd-action);outline-offset:2px}
.chatact:disabled{opacity:.55;cursor:default}
main :is(tr.muted,.room-attach>span){opacity:1}
main .leaflet-control-zoom a{display:flex;align-items:center;justify-content:center;min-width:max(48px,1.4em);min-height:max(48px,1.4em);line-height:1}
main .leaflet-bottom{max-width:100%}
main .leaflet-control-attribution{max-width:100%;white-space:normal;overflow-wrap:anywhere;font-size:var(--hd-meta-size)}

.chatsheet-x{min-width:48px;min-height:48px;width:auto;height:auto;padding:8px;line-height:1}

main .leaflet-container{min-height:max(240px,18em)}

/* Native file controls keep their browser interaction inside the available width. */
main input[type=file],main .room-attach input[type=file]{min-width:0;max-width:100%;overflow:hidden;font-family:var(--hd-font);font-size:var(--hd-input-size);line-height:1.5}
main input[type=file]::file-selector-button{font:inherit;white-space:normal;overflow-wrap:anywhere;max-width:100%;min-height:var(--hd-tap);padding:var(--hd-space-2) var(--hd-space-3);border:1px solid var(--hd-control-line);border-radius:var(--hd-control-radius);background:var(--hd-card);color:var(--hd-action);cursor:pointer}
.hd-inbox .hd-new-messages{position:fixed;top:calc(var(--hd-header-height,0px) + var(--hd-space-3));left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100vw - 32px);z-index:20;box-shadow:0 2px 8px var(--hd-ink)26}
.hd-stack-flow .hd-inbox .hd-new-messages{top:var(--hd-space-3)}
/* The selected value stays inside single-line controls at large text sizes. */
main input:is([type=date],[type=time],[type=datetime-local]){overflow:hidden}
main select:not([multiple]):not([size]){appearance:none;-webkit-appearance:none;overflow:hidden;text-overflow:ellipsis;padding-inline-end:30px;background-image:linear-gradient(45deg,transparent 50%,var(--hd-muted-text) 50%),linear-gradient(135deg,var(--hd-muted-text) 50%,transparent 50%);background-position:right 16px center,right 10px center;background-size:6px 6px;background-repeat:no-repeat}

/* SOCIAL179: doctor photo verification - the camera page and the admin second photo. */
.hd-vp{display:grid;gap:var(--hd-space-4)}
.hd-vp>*{margin:0}
.hd-vp__chip{justify-self:start}
.hd-vp .hd-vp__chip.badge-pend{color:var(--hd-warning);background:var(--hd-warning-bg);border:1px solid var(--hd-warn-line)}
.hd-vp__frame{position:relative;width:100%;max-width:21rem;aspect-ratio:4/5;margin-inline:auto;border:1px solid var(--hd-line);border-radius:14px;overflow:hidden;background:var(--hd-input)}
.hd-vp__video,.hd-vp__shot,.hd-vp__guide,.hd-vp__busy{position:absolute;inset:0;width:100%;height:100%}
.hd-vp__video,.hd-vp__shot{object-fit:cover}
.hd-vp__video{transform:scaleX(-1);background:var(--hd-ink)}
.hd-vp__guide{fill:none;stroke:var(--hd-control-line);stroke-width:2.5;stroke-dasharray:9 9;pointer-events:none}
.hd-vp[data-vp-state="live"] .hd-vp__guide{stroke:var(--hd-card)}
.hd-vp:is([data-vp-state="preview"],[data-vp-state="submitting"],[data-vp-state="done"]) .hd-vp__guide{display:none}
.hd-vp__busy{display:grid;place-items:center;background:var(--hd-card);opacity:.62}
.hd-vp__spin{width:34px;height:34px;border-radius:50%;border:3px solid var(--hd-blue-soft);border-top-color:var(--hd-action);animation:hd-vp-spin .8s linear infinite}
.hd-vp__error{padding:12px 14px;border:1px solid var(--hd-error);border-radius:var(--hd-control-radius);background:var(--hd-card);color:var(--hd-error)}
.hd-vp__ok{padding:12px 14px;border:1px solid var(--hd-success);border-radius:var(--hd-control-radius);background:var(--hd-card);color:var(--hd-success)}
.hd-vp__trust{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--hd-line);border-radius:var(--hd-control-radius);background:var(--hd-teal-soft);color:var(--hd-ink);font-size:var(--hd-support-size)}
.hd-vp__trust svg{width:20px;height:20px;flex:none;margin-top:2px}
.hd-vp__actions{display:grid;gap:10px}
.hd-vp__pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.hd-vp__pair .btn{width:100%}
.hd-vp__skip a{display:inline-flex;align-items:center;min-height:48px;padding-inline:12px}
.hd-vp-admin{margin:0;display:grid;gap:4px;width:120px}
.hd-vp-admin__img{display:block;width:120px;height:150px;object-fit:cover;border:2px solid var(--hd-teal);border-radius:var(--hd-control-radius);background:var(--hd-input)}
.hd-vp-admin figcaption{font-size:var(--hd-meta-size);color:var(--hd-secondary);font-weight:600;overflow-wrap:anywhere}
.verify-subject:has(>.hd-vp-admin){display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:start}
.verify-subject:has(>.hd-vp-admin)>.hd-vp-admin{grid-column:1;grid-row:2}
.verify-subject:has(>.hd-vp-admin)>.verify-facts{grid-column:2;grid-row:1/span 2}
@media(max-width:640px){.verify-subject{flex-wrap:wrap}.verify-subject>.verify-facts{flex-basis:100%;overflow-wrap:anywhere}.verify-subject:has(>.hd-vp-admin){grid-template-columns:minmax(0,1fr)}.verify-subject:has(>.hd-vp-admin)>.verify-facts{grid-column:1;grid-row:3}.bmdc-copy .linkbox{max-width:100%}}
.hd-vp-reentry{margin-block:var(--hd-space-3)}
@keyframes hd-vp-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.hd-vp__spin{animation-duration:2.4s}}

/* SOCIAL180: the verify-subtext tick, the profile DP menu, the question bar on dashboards. */
.hd-vp__tick{display:inline-flex;vertical-align:-3px}
/* SOCIAL186c: the gray tick's disc - the same seal, a muted colour, on every surface the seal is drawn */
.seal.seal-gray{background:var(--hd-muted-text)}
.hd-pc__head .seal-gray.hd-tick,.hd-dd__newdocs .seal.seal-gray,.hd-pd__newdocs .seal.seal-gray{background:var(--hd-muted-text)}
.hd-dpmenu{position:relative;display:inline-block}
.hd-dpmenu>summary{list-style:none;cursor:pointer;border-radius:50%}
.hd-dpmenu>summary::-webkit-details-marker{display:none}
.hd-dpmenu>summary:focus-visible{outline:2px solid var(--hd-action);outline-offset:4px}
.hd-dpmenu>summary>.avatar{pointer-events:none}
.hd-dpmenu__list{position:absolute;z-index:30;top:calc(100% + 8px);left:0;min-width:12rem;max-width:calc(100vw - 32px);display:grid;gap:4px;padding:6px;background:var(--hd-card);border:1px solid var(--hd-line);border-radius:var(--hd-control-radius);box-shadow:0 8px 24px var(--hd-ink)1F}
.hd-dpmenu__list>*{display:flex;align-items:center;min-height:48px;padding:0 12px;border:0;border-radius:var(--hd-control-radius);background:none;font:inherit;color:var(--hd-ink);text-align:left;text-decoration:none;cursor:pointer;overflow-wrap:anywhere}
.hd-dpmenu__list>*:hover,.hd-dpmenu__list>*:focus-visible{background:var(--hd-blue-soft)}
.hd-dpmenu .hd-dpmenu__story.avatar-ring{box-shadow:none}
.hd-myq>li{border-left:4px solid var(--brand-2);padding-left:10px}
.feedskin .post.qpost{border-left:4px solid var(--brand-2)}
.followbtn.btn-primary{color:var(--hd-card)}

/* SOCIAL187: owner-approved booking/profile cards and in-card feed metadata. */
.hd-booking-card,.hd-profile,.hd-card-info{--hd-experience-star:#2563EB;--hd-rating-star:#D97706;--hd-empty-star:#B7C2CE}
.mkt.hd-booking-card{display:flex;flex-direction:column;align-items:stretch;gap:0}
.hd-booking-card__head{display:flex;align-items:flex-start;gap:var(--hd-space-3);min-width:0}
.hd-booking-card__head .mkt-photo{flex:none}
.hd-booking-card__head .avatar{width:56px;height:56px}
.hd-booking-card .mkt-body,.hd-profile__identity{flex:1;min-width:0}
.hd-card-name{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center;min-width:0}
.hd-card-name>:is(.who-name,.dr-name){min-width:0;overflow-wrap:anywhere}
.hd-booking-card .who-name{font-size:var(--hd-name-size);font-weight:600}
.hd-booking-card .who-degree,.hd-profile .who-degree{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;margin:4px 0 0;line-height:1.5}
.hd-booking-card .who-sub,.hd-profile .who-sub{margin:2px 0 0;overflow-wrap:anywhere;line-height:1.5}
.hd-booking-card .hd-card-specialty,.hd-profile .hd-card-specialty{color:var(--hd-action)}
.hd-booking-card__bottom{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--hd-space-3);margin-top:var(--hd-space-3);padding-top:var(--hd-space-3);border-top:1px solid var(--hd-line)}
.hd-booking-card__details{flex:1 1 12rem;min-width:0}
.hd-booking-card .mkt-facts{margin:0;gap:6px;line-height:1.5}
.hd-booking-card .mkt-facts>div{overflow-wrap:anywhere}
.hd-booking-card .mkt-act{display:flex;flex-direction:column;align-items:stretch;gap:8px;flex:0 1 11rem;min-width:0;width:100%;margin:0}
.hd-booking-card__actions .btn{width:100%;min-height:48px;white-space:normal;overflow-wrap:anywhere}
.hd-booking-card__profile{display:flex;justify-content:center;align-items:center;min-height:48px;overflow-wrap:anywhere}
.hd-card-experience{margin-top:var(--hd-space-3);padding-top:var(--hd-space-3);border-top:1px solid var(--hd-line)}
.hd-card-experience .starrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0;color:var(--hd-secondary)}
.hd-card-experience .stars{display:inline-flex;gap:5px;flex:none}
.hd-card-experience .star{width:20px;height:20px}
.hd-card-experience .star-on{fill:var(--hd-experience-star);stroke:var(--hd-experience-star);color:var(--hd-experience-star)}
.hd-card-experience .star-off{fill:none;stroke:var(--hd-empty-star);color:var(--hd-empty-star);stroke-width:1.8}
.hd-card-info{font-size:var(--hd-meta-size);line-height:1.55;color:var(--hd-secondary);overflow-wrap:anywhere;min-width:0}
.hd-card-info strong{color:var(--hd-ink);font-weight:700}
.hd-card-info--booking,.hd-card-info--profile{margin-top:var(--hd-space-3);padding-top:var(--hd-space-3);border-top:1px solid var(--hd-line)}
.hd-card-info__public,.hd-card-info__private{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px}
.hd-card-info__public+.hd-card-info__private{margin-top:4px}
.hd-card-info__rating,.hd-card-info__active{display:inline-flex;align-items:center;gap:6px;min-width:0}
.hd-rating-star{width:20px;height:20px;flex:none;fill:var(--hd-rating-star)}
.hd-card-info__active i{width:9px;height:9px;border-radius:50%;background:var(--hd-success);flex:none}
.post .hd-card-info--post{margin:0 var(--hd-card-pad) var(--hd-space-2);padding:0}
.hd-profile .hd-profile__head{display:flex;flex-wrap:wrap;gap:var(--hd-space-3);align-items:flex-start}
.hd-profile__head>:is(.photo-link,.hd-dpmenu,.avatar){flex:none}
.hd-profile .dr-name{margin:0}
.hd-profile .who-loc{display:inline-flex;align-items:flex-start;gap:4px;max-width:100%}
.hd-profile .who-loc .hd-ico{flex:none;margin-top:2px}
.hd-profile__edit{margin-left:auto;min-height:48px}
.hd-profile__years{display:flex;flex-wrap:wrap;gap:4px 8px;padding-top:var(--hd-space-3);margin-top:var(--hd-space-3);border-top:1px solid var(--hd-line);font-size:var(--hd-meta-size);color:var(--hd-secondary)}
.hd-profile__years strong{color:var(--hd-ink)}
.hd-profile__bio{border-top:1px solid var(--hd-line);padding-top:var(--hd-space-4);margin-top:var(--hd-space-4)}
.hd-profile__bio h2{font-size:var(--hd-section-size);line-height:var(--hd-heading-leading);margin:0 0 8px;color:var(--hd-ink)}
.hd-profile__bio p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.65}
.hd-profile .hd-profile__services{margin:var(--hd-space-4) 0 0;padding:0;list-style:none;border-top:1px solid var(--hd-line)}
.hd-profile__services>li{padding:8px 0;margin:0;overflow-wrap:anywhere}
.hd-profile__services>.hd-profile__fee{border-top:1px solid var(--hd-line);padding:12px 0;color:var(--hd-action)}
.hd-profile__fee strong{color:var(--hd-ink)}
.hd-profile__services>.hd-profile__chamber{border-top:1px solid var(--hd-line);padding-top:12px}
.hd-profile__services>.pubnum{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.hd-profile__actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--hd-space-3);padding-top:var(--hd-space-3);border-top:1px solid var(--hd-line)}
.hd-profile__actions>:is(p,form,a){flex:1 1 9rem;min-width:0;margin:0}
.hd-profile__actions .btn{width:100%;min-height:48px;white-space:normal;overflow-wrap:anywhere}
.hd-profile__actions .followbtn:not(.btn-ghost),.hd-profile__actions>a{color:var(--hd-action);background:var(--hd-card);border-color:var(--hd-action)}
.hd-profile__actions .followbtn:not(.btn-ghost):hover,.hd-profile__actions>a:hover{background:var(--hd-blue-soft)}
@media(max-width:420px){
  .hd-booking-card .mkt-act{flex-basis:100%}
  .hd-profile__identity{flex-basis:calc(100% - 104px)}
  .hd-profile__edit{margin-left:0}
}

.hd-profile__services .hd-ico{vertical-align:-4px;color:var(--hd-action);flex:none}
.hd-profile__services>.hd-profile__fee{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.hd-profile__amount{margin-left:auto;font-weight:700}

/* SOCIAL203: approved 2026-09-19 directory mockups. Scoped to the directory;
   shared header/footer and brand tokens remain the product's own. */
main.wrap.hd-dir{max-width:var(--hd-directory-width);margin:0 auto;padding:var(--hd-gutter);line-height:var(--hd-body-leading)}
.hd-dir :is(h1,h2,h3,p,dl){margin:0}
.hd-dir a{text-decoration:none}
.hd-dir :is(a,button,select):focus-visible{outline:3px solid var(--hd-action);outline-offset:3px}
.hd-dir .hd-ico{flex-shrink:0;width:20px;height:20px}
.hd-dir-hero{margin-bottom:23px}
.hd-dir .hd-dir-hero__eyebrow{display:flex;align-items:center;gap:7px;color:var(--hd-teal);font-size:13px;font-weight:600;margin-bottom:7px}
.hd-dir-hero__eyebrow .hd-ico{width:17px;height:17px}
main.wrap.hd-dir h1{font-size:var(--hd-title-size);line-height:var(--hd-heading-leading);font-weight:650}
.hd-dir .hd-dir-hero__lead{margin-top:6px;font-size:14px;color:var(--hd-muted-text)}
.hd-dir-choicehead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;font-size:15px;font-weight:500}
.hd-dir-choicehead>a{display:inline-flex;align-items:center;min-height:48px;color:var(--hd-action);font-size:14px}
.hd-dir-shortcuts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.hd-dir .hd-chip{display:flex;align-items:center;gap:11px;min-width:0;min-height:76px;padding:13px 14px;border:1px solid var(--hd-line);border-radius:var(--hd-card-radius);background:var(--hd-card);color:var(--hd-ink);box-shadow:var(--hd-shadow)}
.hd-dir .hd-chip:hover{border-color:var(--hd-action)}
.hd-dir .hd-chip.is-on{background:var(--hd-blue-soft);border-color:var(--hd-action)}
.hd-dir .hd-choice-icon{width:36px;height:36px;display:grid;place-items:center;flex-shrink:0;border-radius:var(--hd-control-radius);background:var(--hd-blue-soft);color:var(--hd-action)}
.hd-dir .hd-choice-name{font-weight:500;font-size:15px;overflow-wrap:anywhere}
.hd-dir .hd-choice-name small{display:block;margin-top:1px;font-size:var(--hd-meta-size);font-weight:400;color:var(--hd-muted-text)}
.hd-choice-check{margin-left:auto;color:var(--hd-action)}
.hd-choice-check .hd-ico{width:16px;height:16px}
.hd-dir-shortcuts--district{grid-template-columns:repeat(4,minmax(0,1fr))}
.hd-dir .hd-dir-shortcuts--district .hd-chip{min-height:64px;padding:12px;gap:8px}
.hd-dir .hd-dir-shortcuts--district .hd-choice-icon{width:30px;height:30px;background:var(--hd-teal-soft);color:var(--hd-teal)}
.hd-dir .hd-dir-filters{display:block;margin:18px 0 24px;padding:16px;border:1px solid var(--hd-line);border-radius:var(--hd-card-radius);background:var(--hd-card)}
.hd-dir-filterfields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.hd-dir--online .hd-dir-filterfields{grid-template-columns:repeat(2,minmax(0,1fr))}
.hd-dir-filters label{display:block;min-width:0;font-size:var(--hd-meta-size);color:var(--hd-muted-text);margin:0}
.hd-dir .hd-dir-filters select{display:block;width:100%;min-width:0;min-height:48px;margin-top:6px;padding:10px 30px 10px 11px;border:1px solid var(--hd-control-line);border-radius:var(--hd-control-radius);font-size:var(--hd-input-size);background:var(--hd-card);color:var(--hd-ink);scroll-margin-top:90px}
.hd-dir-filters select:disabled{opacity:.6}
.hd-dir-activefilters{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin-top:12px;font-size:13px}
.hd-dir-activefilters>span{background:var(--hd-blue-soft);color:var(--hd-action);border-radius:6px;padding:4px 8px;overflow-wrap:anywhere}
.hd-dir .hd-dir-clear{margin-left:auto;background:transparent;border:0;padding:6px 0}
.hd-dir #districtPickGo{margin-top:12px}
.hd-dir #districtPickGo[hidden]{display:none}
.hd-dir .hd-dir-results{font-size:20px;font-weight:600;line-height:1.5;margin-bottom:18px}
.hd-dir-results .tiny{display:block;margin-top:2px;font-size:13px;font-weight:400;color:var(--hd-muted-text)}
.hd-dir .hd-dir-back{margin-bottom:14px}
.hd-dir-back a{display:inline-flex;align-items:center;min-height:48px}
.hd-dir-section{margin-bottom:24px}
.hd-dir-sechead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.hd-dir-sechead h3{font-size:var(--hd-section-size);font-weight:600;line-height:var(--hd-heading-leading);min-width:0;overflow-wrap:anywhere}
.hd-dir-count{display:block;font-size:var(--hd-meta-size);color:var(--hd-muted-text);font-weight:400;margin-top:2px}
.hd-dir-all{display:inline-flex;align-items:center;gap:5px;flex-shrink:0;min-height:48px;font-size:13px}
.hd-dir-all .hd-ico{width:16px;height:16px}
.hd-dir-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:stretch}
.hd-dir .mkt.hd-booking-card.hd-doctor{display:flex;flex-direction:column;gap:13px;min-width:0;margin:0;padding:16px;border:1px solid var(--hd-line);border-radius:var(--hd-card-radius);background:var(--hd-card);box-shadow:0 3px 9px #1437460b}
.hd-dir .hd-booking-card__head{display:flex;align-items:center;gap:10px;min-width:0;margin:0;padding:0;border:0}
.hd-dir .mkt-photo{flex:0 0 47px;width:47px;height:47px;min-height:0;padding:0}
.hd-dir .mkt-photo .avatar{display:grid;place-items:center;width:47px;height:47px;min-width:47px;min-height:47px;border-radius:50%;object-fit:cover;background:var(--hd-teal-soft);color:var(--hd-teal);font-size:20px;font-weight:500}
.hd-dir .mkt-body{min-width:0;flex:1}
.hd-dir .hd-card-name{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:0;line-height:1.55}
.hd-dir .hd-card-name .who-name{font-size:15px;font-weight:600;line-height:1.55;color:var(--hd-ink)}
.hd-dir .who-degree{font-size:var(--hd-meta-size);line-height:1.55;color:var(--hd-muted-text);margin-top:2px;overflow-wrap:anywhere;white-space:normal}
.hd-dir .mkt-facts.hd-doctor-body{display:block;flex:1;padding:0;margin:0;min-width:0;border:0}
.hd-dir .hd-card-specialty{font-size:13px;color:var(--hd-action);margin-bottom:7px;overflow-wrap:anywhere}
.hd-dir .hd-experience{display:flex;align-items:center;gap:6px;font-size:13px;margin-bottom:8px;color:var(--hd-ink)}
.hd-dir .hd-experience .hd-ico{width:15px;height:15px;color:var(--hd-muted-text)}
.hd-dir .hd-experience strong{font-size:inherit;font-weight:600}
.hd-dir .hd-location{display:flex;align-items:flex-start;gap:6px;font-size:13px;color:var(--hd-muted-text);overflow-wrap:anywhere}
.hd-dir .hd-location .hd-ico{width:15px;height:15px;margin-top:3px}
.hd-dir .hd-clinic{font-size:14px;font-weight:500;color:var(--hd-ink);margin:2px 0;overflow-wrap:anywhere}
.hd-dir .hd-availability{display:flex;align-items:flex-start;gap:6px;margin-top:10px;padding:8px 10px;border-radius:8px;background:var(--hd-page);font-size:var(--hd-meta-size);color:var(--hd-muted-text);overflow-wrap:anywhere}
.hd-dir .hd-availability .hd-ico{width:15px;height:15px;margin-top:2px}
.hd-dir .hd-card-info{margin:12px 0 8px;padding:0;border:0}
.hd-dir .hd-doctor-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:11px 12px;border-radius:var(--hd-control-radius);background:var(--hd-blue-soft);border:0}
.hd-dir .hd-doctor-stats>div{min-width:0}
.hd-dir .hd-doctor-stats dt{font-size:var(--hd-meta-size);font-weight:400;color:var(--hd-muted-text);margin:0 0 3px;overflow-wrap:anywhere}
.hd-dir .hd-doctor-stats dd{font-size:20px;font-weight:600;line-height:1.4;font-variant-numeric:tabular-nums;color:var(--hd-ink);margin:0}
.hd-dir .hd-card-info__active{display:flex;align-items:center;gap:6px;font-size:var(--hd-meta-size);color:var(--hd-teal);margin-top:3px}
.hd-dir .hd-card-info__active .hd-ico{width:14px;height:14px}
.hd-dir .hd-doctor-bottom{border-top:1px solid var(--hd-line);padding-top:11px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.hd-dir .hd-fee{min-width:0}
.hd-dir .hd-fee-label{display:block;font-size:var(--hd-meta-size);font-weight:400;color:var(--hd-muted-text)}
.hd-dir .mkt-fact-fee{display:block;font-size:21px;font-weight:600;line-height:1.55;color:var(--hd-ink)}
.hd-dir .hd-fee-more{display:inline-flex;align-items:center;min-height:48px;font-size:13px}
.hd-dir .hd-booking-card__profile{display:inline-flex;align-items:center;min-height:48px;font-size:var(--hd-meta-size);color:var(--hd-action);padding:8px 0;text-decoration:none;overflow-wrap:anywhere}
.hd-dir .hd-card-actions{display:grid;grid-template-columns:1fr 1.6fr;gap:8px;width:100%;margin:0;padding:0;flex:none}
.hd-dir .hd-card-actions>.btn{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:48px;padding:9px;border-radius:var(--hd-control-radius);font-size:var(--hd-button-size);font-weight:600;line-height:1.55;white-space:normal}
.hd-dir .hd-card-actions>.btn-ghost{border-color:var(--hd-line)}
.hd-dir .hd-card-actions>.btn:only-child{grid-column:1/-1}
.hd-dir .hd-card-actions>.btn-primary{gap:8px;padding:10px 12px}
.hd-dir .hd-card-actions>.tiny{align-self:center;text-align:center}
.hd-dir .hd-dir-more{display:flex;justify-content:center;margin:14px 0 0}
.hd-dir .hd-dir-more .btn{width:100%;min-height:48px;border-radius:var(--hd-control-radius);background:var(--hd-blue-soft);border-color:var(--hd-line);font-size:var(--hd-button-size);font-weight:600;}
.hd-dir-empty{padding:30px 20px;text-align:center;background:var(--hd-card);border:1px solid var(--hd-line);border-radius:14px}
.hd-dir .hd-dir-empty p{margin:7px 0 12px}
@media(max-width:780px){
  main.wrap.hd-dir{padding:23px}
  .hd-dir-shortcuts{gap:8px}
  .hd-dir .hd-chip{padding:11px 10px;gap:8px}
  .hd-dir .hd-choice-icon{width:30px;height:30px}
  .hd-dir .hd-dir-shortcuts--district .hd-choice-icon{display:none}
}
@media(max-width:560px){
  main.wrap.hd-dir{padding:20px 15px}
  main.wrap.hd-dir h1{font-size:var(--hd-title-size)}
  .hd-dir-hero{margin-bottom:18px}
  .hd-dir-shortcuts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hd-dir .hd-chip{min-height:67px;padding:10px;gap:8px}
  .hd-dir .hd-choice-name{font-size:14px}
  .hd-dir .hd-choice-name small{font-size:var(--hd-meta-size)}
  .hd-choice-check{display:none}
  .hd-dir-shortcuts--district{grid-template-columns:repeat(4,minmax(0,1fr))}
  .hd-dir .hd-dir-shortcuts--district .hd-chip{min-height:48px;justify-content:center;padding:8px 2px}
  .hd-dir .hd-dir-shortcuts--district .hd-choice-name{font-size:13px}
  .hd-dir .hd-dir-filters{padding:12px;margin-top:14px}
  .hd-dir-filterfields{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .hd-dir-filterfields>label:last-child:nth-child(3){grid-column:1/-1}
  .hd-dir .hd-dir-filters select{font-size:var(--hd-input-size)}
  .hd-dir .hd-dir-results{font-size:19px}
  .hd-dir-sechead h3{font-size:var(--hd-section-size)}
  .hd-dir-grid{grid-template-columns:1fr}
  .hd-dir .mkt.hd-booking-card.hd-doctor{padding:15px;gap:10px}
  .hd-dir .hd-card-name .who-name{font-size:17px}
  .hd-dir .who-degree{font-size:13px}
  .hd-dir .hd-doctor-bottom{padding-top:9px}
}
@media(max-width:380px){
  .hd-dir .hd-doctor-stats{padding:10px;gap:6px}
  .hd-dir .hd-doctor-stats dt{font-size:var(--hd-meta-size)}
  .hd-dir .hd-doctor-stats dd{font-size:19px}
}

/* ═════════════════════════════════════════════════════════════════════════════
 * SOCIAL207 - THE HEADER NAV KEEPS THE LOGO'S LINE ON EVERY PAGE, NOT JUST ONE.
 *
 * THE OWNER: "Upore header e logo er sathe paraller rekhe booking, msg etc. page link guli
 * ache, but eta shudhu home page e maintain hoy. Onno page e niche neme jay. Home page er css
 * dekhe baki page gulir jonno eta thik korbe."
 *
 * THE CAUSE, MEASURED: app.css's `@media (max-width:520px){.hdr .hd-nav{flex-basis:100%}}`
 * puts the nav on its own row on EVERY page at phone width. The only thing that ever beat it
 * was `flex-basis:auto` + `flex-wrap:nowrap` scoped to `.hd-doctor-home` / `.hd-patient-home`
 * - body classes that /dashboard alone emits, from two stylesheets linked on that page alone.
 * Nothing about that page is special; every other page simply never got the override.
 *
 * WHY THE RULE LIVES HERE AND NOT IN app.css: every byte of app.css must be declared as a hunk
 * in scripts/nd-css-ledger.js, which stands at 20426 of its 20480-byte ceiling - 54 bytes free
 * against the ~214 this needs. This sheet is linked unconditionally on every page and AFTER
 * app.css, and it is governed by no ledger and no reconstruction, so equal specificity plus
 * later source order wins the cascade - the same mechanism, obtained without spending a bound
 * whose whole purpose is to make somebody argue for it. The three app.css literals are
 * OVERRIDDEN here, never rewritten there.
 *
 * THE 350px FLOOR IS THE REFLOW BUDGET, NOT A PREFERENCE. `.hd-brand` is `flex:0 0 auto` and
 * cannot shrink; four nav items at their 48px floor plus gaps plus the brand plus the header
 * padding come to about 330px. A blanket nowrap at 320px overflows the page, and two browser
 * gates measure exactly that - one asserts scrollWidth equals innerWidth at 320px, the other
 * runs 320px at scale 4. patient-dashboard.css already draws this line at 350px; this mirrors
 * a measurement the estate has already made rather than inventing a second one, and the item
 * metrics below are doctor-dashboard.css's own - the header that holds one line today.
 * /dashboard is unaffected: its rules carry a higher specificity and still win.
 * ═════════════════════════════════════════════════════════════════════════════ */
@media (min-width:350px) and (max-width:520px){.hdr.hd-hdr{flex-wrap:nowrap}.hdr .hd-nav{flex-basis:auto;flex-wrap:nowrap;justify-content:flex-end}.hdr .hd-nav__item{flex:0 1 52px;min-width:48px;padding:4px 5px}}

/* =============================================================================
 * SOCIAL209 - THE COMMENT ACTION ROW IS THE POST CARD'S ACTION ROW, AT COMMENT SCALE,
 * AND THE REPLY BOX IS THE COMPOSER ONE STEP IN.
 *
 * THE OWNER, on SOCIAL208's row: "design khub poor. Site er sathe mil rekhe design thik
 * koro." On the box, one pass earlier: "same comment box open hobe but main comment box
 * theke choto and ektu rt sided hbe ... Amdr design thik rakhbe."
 *
 * WHAT STOOD HERE (SOCIAL208), KEPT AS THE RECORD:
 *   .comment-list .comment.comment-reply{padding-inline-start:22px;border-inline-start:2px solid var(--hd-line,#e6e6e6)}
 *   .comment-replybox{margin-top:4px}
 *   .comment-replybox>summary{cursor:pointer;list-style:none;display:inline-block}
 *   .comment-replybox>summary::-webkit-details-marker{display:none}
 *   .comment-form--reply{padding-inline-start:22px;margin-top:6px}
 *   .comment-form--reply textarea{width:100%;font-size:var(--hd-input-size)}
 * Those six rules dressed nothing: the controls themselves wore `linkish tiny`, and both of
 * THOSE classes are switched off inside `.post` by `:where(:not(.post *))`. This partial
 * renders on BOTH sides of that fence - post_page.ejs mounts it OUTSIDE article.post,
 * comments_fragment.ejs swaps it INSIDE - so one row rendered as two different controls.
 * THE RULES BELOW CARRY NO SUCH EXCLUSION and are scoped to `.comments`, the panel's own
 * section class, so the row looks identical on both surfaces.
 *
 * EVERY VALUE IS A TOKEN, AND --hd-tap IS ASKED FOR BY NAME RATHER THAN TYPED: app.css's
 * :root still says 44px and design-tokens.css says 48px, and the later sheet wins. Typing a
 * number here would freeze whichever of the two happened to be true today.
 * 360px: the row WRAPS, every cell is min-width 48px / max-width 100% with overflow-wrap,
 * and the pill is flex:1 1 0 with min-width:0 so it shrinks rather than widening the column.
 * app.css is OFF LIMITS - 54 bytes of ledger headroom and sha-pinned hunks.
 * ============================================================================= */
.comment-list .comment.comment-reply{padding-inline-start:22px;border-inline-start:2px solid var(--hd-line)}
.comments .comment-acts{display:flex;flex-wrap:wrap;align-items:center;gap:2px;min-width:0;margin-top:2px}
.comments .comment-acts>.inline{display:flex;min-width:0;max-width:100%;margin:0}
.comments .hd-cmt__act{display:inline-flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;min-width:48px;min-height:var(--hd-tap);max-width:100%;margin:0;padding:6px 10px;border:0;border-radius:var(--hd-control-radius);background:none;color:var(--hd-muted-text);font:inherit;font-size:var(--hd-meta-size);font-weight:500;line-height:1.3;text-align:center;white-space:normal;overflow-wrap:anywhere;cursor:pointer}
.comments .hd-cmt__act>.hd-ico{flex:0 0 auto}
.comments .hd-cmt__act>span{min-width:0}
.comments .hd-cmt__n{font-weight:600}
.comments .hd-cmt__act--mod{color:var(--hd-action)}
.comments .hd-cmt__act--static{cursor:default}
.comments .hd-cmt__act.on{background:var(--hd-teal-soft);color:var(--hd-secondary)}
.comments button.hd-cmt__act:hover,.comments summary.hd-cmt__act:hover{color:var(--hd-action)}
.comments .hd-cmt__act:focus-visible{outline:2px solid var(--hd-action);outline-offset:-2px}
.comments .comment-replybox{flex:0 1 auto;min-width:0;max-width:100%;margin:0}
.comments .comment-replybox>summary{list-style:none}
.comments .comment-replybox>summary::-webkit-details-marker{display:none}
.comments .comment-replybox[open]{display:flex;flex-wrap:wrap;align-items:center;flex:1 1 100%}
.comments .hd-cmt__form{display:flex;align-items:center;gap:8px;flex:1 1 100%;min-width:0;margin:4px 0 2px;padding-inline-start:22px}
.comments .hd-cmt__input{flex:1 1 0;min-width:0;box-sizing:border-box;height:var(--hd-tap);max-height:120px;margin:0;padding:11px 16px;border:1px solid var(--hd-control-line);border-radius:24px;background:var(--hd-input);color:var(--hd-ink);font:inherit;font-size:var(--hd-support-size);line-height:1.45;resize:vertical}
.comments .hd-cmt__input::placeholder{color:var(--hd-placeholder)}
.comments .hd-cmt__input:focus-visible{outline:2px solid var(--hd-action);outline-offset:1px}
.comments .hd-cmt__send{display:flex;align-items:center;justify-content:center;flex:0 0 var(--hd-tap);width:var(--hd-tap);height:var(--hd-tap);padding:0;border:0;border-radius:50%;background:var(--hd-teal);color:var(--hd-card);cursor:pointer}
.comments .hd-cmt__send:focus-visible{outline:2px solid var(--hd-action);outline-offset:2px}

/* =============================================================================
 * SOCIAL210 - REELS: THE STORY OVERLAY'S SECOND MODE.
 * THE OWNER: "vdo te click korle seta fb er reels er moto phone er portrait e full screen e
 * chole ashbe, then upore niche kore porer reel ... dekhte parbe."
 *
 * WHY HERE AND NOT app.css: that sheet has 54 bytes of ledger headroom and every byte in it
 * must be a declared, sha-pinned hunk - SOCIAL207's recorded reason for putting an override
 * in this file. This one is linked unconditionally and AFTER app.css, so equal specificity
 * plus source order already wins.
 * AND EVERY CLASS HERE IS `hd-reel*` ON PURPOSE: the overlay's own class-to-rule fuse collects
 * only names matching tv[a-z] or avatar-ring, so a `tv`-prefixed class would have demanded a
 * rule in app.css, which has no room for one.
 *
 * THE `body:has(.botnav[data-hd-stack="1"])` TWIN IS NOT TIDINESS: those rules are (0,3,1) and
 * would otherwise re-flow this overlay into a padded column and pin the close button static.
 * EVERY VALUE IS A TOKEN, and --hd-tap is asked for BY NAME: app.css's :root still says 44px
 * and design-tokens.css says 48px, and typing a number would freeze whichever is true today.
 * 320px: one column, min-width:0, overflow-wrap:anywhere, no px width floor. dvh is ALWAYS
 * paired with a vh fallback (app.css's own law) and every edge carries env(safe-area-*).
 * ============================================================================= */
.tvwrap.hd-reels{display:block;overflow:hidden;background:var(--hd-ink)}
/* LOAD-BEARING: .tvbar and .tvfoot carry display:flex in app.css, and a display rule beats the
 * UA's [hidden]{display:none} - the exact trap app.css records about .tvwrap itself. */
.tvwrap.hd-reels [hidden]{display:none}
.tvwrap.hd-reels .tvstage{position:absolute;inset:0;display:block;box-sizing:border-box;width:100%;max-width:100%;min-width:0;height:100vh;height:100svh;max-height:none;margin:0;padding:0;overflow-x:hidden;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.tvwrap.hd-reels .tvstage::-webkit-scrollbar{display:none}
.tvwrap.hd-reels .tvstage:focus-visible{outline:2px solid var(--hd-card);outline-offset:-4px}
.tvwrap.hd-reels .tvhead{position:absolute;top:0;right:0;left:auto;z-index:4;display:block;padding:0;background:none}
.tvwrap.hd-reels .tvclose{position:static;display:flex;box-sizing:border-box;align-items:center;justify-content:center;min-width:var(--hd-tap);min-height:var(--hd-tap);margin:calc(env(safe-area-inset-top,0px) + 8px) calc(env(safe-area-inset-right,0px) + 8px) 0 0;padding:6px 10px;border-radius:50%;background:var(--hd-ink);color:var(--hd-card)}

.tvwrap.hd-reels .hd-reel{position:relative;display:flex;box-sizing:border-box;align-items:center;justify-content:center;width:100%;min-width:0;height:100vh;height:100svh;overflow:hidden;scroll-snap-align:center;scroll-snap-stop:always;background:var(--hd-ink)}
.hd-reel__media{display:flex;align-items:center;justify-content:center;width:100%;min-width:0;height:100%}
/* `contain`, NOT `cover`: a doctor's advice is never cropped to fill a frame. Measured on the
 * nine processed clips - eight are portrait and one is 640x360, and that one letterboxes. */
.hd-reel__v,.hd-reel__still{display:block;width:100%;max-width:100%;height:100%;object-fit:contain;background:var(--hd-ink)}
.hd-reel__top{position:absolute;top:0;right:0;left:0;z-index:2;display:flex;box-sizing:border-box;align-items:center;gap:8px;min-width:0;min-height:var(--hd-tap);padding:calc(env(safe-area-inset-top,0px) + 8px) calc(env(safe-area-inset-right,0px) + 60px) 8px calc(env(safe-area-inset-left,0px) + 12px)}
.hd-reel__views{margin:0;min-width:0;color:var(--hd-card);font-size:var(--hd-meta-size);line-height:1.4;overflow-wrap:anywhere}

/* SOCIAL213: THE FOOT IS NOT A SCROLL CONTAINER WHILE IT IS CLOSED. It used to be one - bounded
   to 72% of the screen and keeping its overscroll to itself - which laid a scrolling box across
   the bottom seventy-two percent of a reel: the whole thumb zone. A swipe that began anywhere
   inside it scrolled a caption that had nothing to scroll, and then refused to hand the gesture
   back to the reel underneath, so the reader's own thumb was the thing stopping the next video
   from arriving. Closed, it now passes every gesture through and the swipe zone is the entire
   screen. Open, it becomes a reading surface again and the bound comes back with it - which is
   the one moment it was ever wanted. */
.hd-reel__foot{position:absolute;right:0;bottom:0;left:0;z-index:2;display:grid;box-sizing:border-box;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:8px;padding:12px calc(env(safe-area-inset-right,0px) + 8px) calc(env(safe-area-inset-bottom,0px) + 16px) calc(env(safe-area-inset-left,0px) + 12px)}
.hd-reel__foot.is-open{max-height:72%;overflow-y:auto;overscroll-behavior:contain}
.hd-reel__who{min-width:0;max-width:100%}
.hd-reel__dr{display:flex;box-sizing:border-box;align-items:center;gap:8px;min-width:0;min-height:var(--hd-tap);max-width:100%;color:var(--hd-card);text-decoration:none}
.hd-reel__dp{flex:0 0 auto;width:40px;height:40px;border-radius:50%;object-fit:cover;background:var(--hd-input)}
.hd-reel__id{display:grid;min-width:0}
.hd-reel__name{font-weight:600;overflow-wrap:anywhere}
.hd-reel__spec{color:var(--hd-line);font-size:var(--hd-meta-size);overflow-wrap:anywhere}
/* SOCIAL213: THE CAPTION IS A REAL CONTROL. His ruling was three lines, and the whole thing on a
   tap. That tap has to be reachable from a keyboard as well as a thumb, so the caption is a
   button - which brings Enter and Space with it and needs nothing intercepted - drawn as exactly
   the paragraph it replaced. */
.hd-reel__cap{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;box-sizing:border-box;width:100%;min-width:0;max-width:100%;margin:8px 0 0;padding:0;border:0;background:none;color:var(--hd-card);font:inherit;font-size:var(--hd-support-size);line-height:1.6;text-align:start;white-space:pre-wrap;overflow-wrap:anywhere;cursor:pointer}
.hd-reel__cap.is-open{display:block;-webkit-line-clamp:none;overflow:visible;cursor:default}

.hd-reel__rail{display:grid;flex:0 0 auto;justify-items:center;gap:12px}
.hd-reel__act{display:grid;box-sizing:border-box;align-content:center;justify-items:center;gap:2px;min-width:var(--hd-tap);min-height:var(--hd-tap);max-width:100%;margin:0;padding:4px;border:0;border-radius:var(--hd-control-radius);background:none;color:var(--hd-card);font:inherit;font-size:var(--hd-meta-size);line-height:1.2;text-align:center;text-decoration:none;white-space:normal;overflow-wrap:anywhere;cursor:pointer}
.hd-reel__act[aria-pressed="true"]{background:var(--hd-teal-soft);color:var(--hd-secondary)}
.hd-reel__lab,.hd-reel__n{min-width:0}
.hd-reel__n{font-weight:600}
.tvwrap.hd-reels :focus-visible{outline:2px solid var(--hd-card);outline-offset:2px}

/* THE OPENER ON A FEED CARD - a real control over the clip, not an intercepted click, so it
 * is tabbable, carries a label and a focus ring, and needs no preventDefault. */
.hd-reel-host{position:relative}
.hd-reel-open{position:absolute;inset:0;box-sizing:border-box;width:100%;min-width:var(--hd-tap);min-height:var(--hd-tap);margin:0;padding:0;border:0;background:none;cursor:pointer}
.hd-reel-open:focus-visible{outline:2px solid var(--hd-action);outline-offset:-2px}

@keyframes hd-reel-bump{0%,100%{transform:translateY(0)}30%{transform:translateY(-3.5%)}65%{transform:translateY(1.5%)}}
@keyframes hd-reel-rise{0%{transform:translateY(10px);opacity:0}35%{opacity:1}100%{transform:translateY(-14px);opacity:0}}
.hd-reel-hint{position:absolute;bottom:calc(env(safe-area-inset-bottom,0px) + 28%);left:50%;z-index:5;display:grid;box-sizing:border-box;justify-items:center;gap:4px;width:max-content;max-width:min(88%,26rem);margin:0;padding:8px 12px;border-radius:var(--hd-control-radius);transform:translateX(-50%);background:var(--hd-ink);color:var(--hd-card);text-align:center;pointer-events:none}
.hd-reel-hint__arrow{font-size:1.5rem;line-height:1}
.hd-reel-hint__line{margin:0;min-width:0;font-size:var(--hd-support-size);line-height:1.5;overflow-wrap:anywhere}
.hd-reels.hd-reel-hinting .hd-reel--on .hd-reel__media{animation:hd-reel-bump .85s ease-in-out 1}
.hd-reels.hd-reel-hinting .hd-reel-hint__arrow{animation:hd-reel-rise .9s ease-out 3}

body:has(.botnav[data-hd-stack="1"]) .tvwrap.hd-reels{box-sizing:border-box;max-height:none;padding:0}
body:has(.botnav[data-hd-stack="1"]) .tvwrap.hd-reels [hidden]{display:none}
body:has(.botnav[data-hd-stack="1"]) .tvwrap.hd-reels .tvstage{position:absolute;inset:0;display:block;flex:none;min-height:0;max-height:none;padding:0;overflow-x:hidden;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain}
body:has(.botnav[data-hd-stack="1"]) .tvwrap.hd-reels .tvhead{position:absolute;top:0;right:0;left:auto;z-index:4;display:block;flex:none;padding:0}
body:has(.botnav[data-hd-stack="1"]) .tvwrap.hd-reels .tvclose{position:static;flex:none;min-width:var(--hd-tap);min-height:var(--hd-tap);margin:calc(env(safe-area-inset-top,0px) + 8px) calc(env(safe-area-inset-right,0px) + 8px) 0 0;border-radius:50%;background:var(--hd-ink)}

@media (prefers-reduced-motion:reduce){
  .tvwrap.hd-reels .tvstage{scroll-behavior:auto}
  .hd-reels.hd-reel-hinting .hd-reel--on .hd-reel__media,
  .hd-reels.hd-reel-hinting .hd-reel-hint__arrow{animation:none}
}
@media (max-width:360px){
  .hd-reel__foot{gap:4px}
}

/* ⭐⭐ SOCIAL214 — THE POSTED CONFIRMATION, AND THE HALF OF IT THAT IS NOT FOR EVERYONE.
   The owner ruled that a reader who is ALREADY inside the installed app must not be told to
   install it. The server cannot know that — its own nearest flag means «has ever arrived
   through the app», which would deny the line to someone who installed once and is now in a
   browser tab, and public/css/app.css says so in as many words. The browser does know, and
   says so through this media query, so the decision is made where the fact lives.
   ⚠ THE LIMIT, NAMED: the half is HIDDEN, ⛔ not absent from the served bytes.
   ⭐ THREE display-modes, ⛔ not one — the same triple public/css/app.css, public/js/pwa-install.js
   and public/js/push-ask.js already test. `standalone` alone misses an iOS minimal-ui install
   and an Android fullscreen one, and those readers would be told to install what they have. */
.hd-qposted{margin:0 0 12px}
.hd-qposted__app{display:block;margin-top:4px}
@media (display-mode: standalone), (display-mode: minimal-ui), (display-mode: fullscreen){
  .hd-qposted__app{display:none}
}

/* ═══════════════════════════════════════════════════════════════════════════════
 * ⭐⭐⭐ SOCIAL220 — **HIS OWN QUESTION ROW: THE TEXT, THEN THE PRESSES, AND THE WHOLE
 * TILE OPENS IT.** These rules live HERE and ⛔ not in app.css: the nd-css-ledger has
 * **54 bytes left** of its 20,480 and UH1/VZ-1/IW-23/ND6-css byte-reconstruct that file.
 * This sheet is ⛔ not ledgered and loads LAST, so it wins without !important.
 * ⛔ `.hd-myq>li{border-left…}` ABOVE IS NOT TOUCHED — SOCIAL180-5 byte-pins that rule;
 * `position:relative` is stated as its OWN rule beside it instead of appended to it.
 * ⭐ THE CLICK SURFACE IS A REAL ANCHOR, ⛔ NOT AN INTERCEPTED CLICK — the same stretched
 * `::after` the doctor home already uses. It is therefore tabbable, it carries the row's
 * own handle as its name, it has a focus ring, and it needs ⛔ no JS and ⛔ no preventDefault.
 * ⭐⭐ AND THE TWO PRESSES SIT **ABOVE** THAT OVERLAY: `position:relative` on their row lifts
 * them into a later paint order, so «বাতিল» and «হাইড করুন» stay pressable. ⛔ Without this
 * the tile would swallow both — which is exactly what a stretched link does by design.
 * ═══════════════════════════════════════════════════════════════════════════════ */
.hd-myq>li{position:relative}
.hd-myq__facts{margin:0}
.hd-myq__facts a::after{content:"";position:absolute;inset:0}
.hd-myq__facts a:focus-visible{outline:2px solid var(--hd-action);outline-offset:2px;border-radius:6px}
.hd-myq__body{margin:4px 0 0;color:var(--hd-muted-text)}
.hd-myq__acts{position:relative;display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}

/* ═══════════════════════════════════════════════════════════════════════════════
 * ⭐⭐⭐ SOCIAL220 — **THE COMPACT JOIN BAR, AND IT FITS THE LADDER RATHER THAN FIGHTS IT.**
 * ⭐ MEASURED z-index ladder on this page: `.hdr` sticky top:0 **500** · `.botnav` fixed
 * bottom **40** · `.pwabar`/`.hd-install-bar` **45** · `.chatfab` **46** · `.chatsheet`
 * and `.tvwrap` **60** (raised to 600/610 when the bottom stack is on). ⇒ **30** sits above
 * the page and ⛔ under every one of them, so nothing it can overlap is interactive.
 * ⭐ `--hd-header-height` is ALREADY measured and written by public/js/botnav-clearance.js —
 * ⛔ no second measurement, and the `0px` fallback in design-tokens keeps this honest when
 * the script has not run yet (the bar is `hidden` then anyway).
 * ⭐ MEASURED SAFE FOR `position:sticky`: html, body and main.wrap declare ⛔ no overflow,
 * ⛔ no transform and ⛔ no filter, so there is no scrolling ancestor to trap it. The rails
 * that DO scroll (`.newdoc-rail`, `.tipbar`) are siblings BELOW it, ⛔ not ancestors.
 * ⛔ THE LEDE IS THE SAME SENTENCE, TRUNCATED BY CSS — ⛔ not a second, shorter sentence.
 * That is what keeps this bar free of new copy at every width.
 * ═══════════════════════════════════════════════════════════════════════════════ */
.joinstrip-mini{position:sticky;top:var(--hd-header-height,0px);z-index:30;display:flex;flex-wrap:nowrap;align-items:center;gap:8px;margin:0 0 .6rem;padding:7px 11px;background:var(--hd-card);border:1px solid var(--hd-line);border-radius:var(--hd-control-radius);box-shadow:var(--hd-shadow)}
/* ⭐⭐ SOCIAL226 — THE BAR IS TWO EQUAL BUTTONS. The owner dropped the lede and the login link
 * from it, so `.joinstrip-mini__lede` is DELETED rather than left behind: a rule for a class no
 * template emits is a rule nobody can reason about. `flex:1 1 0` on both buttons — a ZERO basis,
 * ⛔ not `auto` — is what makes them equal regardless of how long each word is; `auto` would have
 * sized them by their text and «আমি পরামর্শ নিতে চাই» is the longer of the two.
 * ⛔ THE RULE ABOVE IS UNTOUCHED: SOCIAL220-4 pins its `position:sticky`, its
 * `top:var(--hd-header-height,0px)` and its `z-index:30` by byte.
 * ⭐⭐ AND `align-items:stretch`, ⛔ not `center`, BECAUSE THE BROWSER SAID SO. At 320px the
 * longer word wraps to two lines and grew to 54px while the shorter stayed at 40 — measured in
 * all three engines. «size … miliye» means they match when one wraps too, and stretch is the one
 * declaration that makes the shorter box take the taller box's height instead of floating in it. */
.joinstrip-mini__acts{flex:1 1 auto;min-width:0;display:flex;align-items:stretch;gap:8px}
.joinstrip-mini__acts .btn{min-height:40px;flex:1 1 0;min-width:0}

/* ═══════════════════════════════════════════════════════════════════════════════
 * ⭐⭐⭐ SOCIAL227 — **THE WHOLE MESSAGES ROW OPENS THE THREAD.**
 * THE OWNER: «puro msg box ta clickable hobe … Msg e click korle thread open hole.»
 * ⭐ THE PATTERN IS THE ESTATE'S OWN, ⛔ not a new one: the same stretched `::after` the
 * doctor home has used since SOCIAL189e and SOCIAL220/226 reused on the question tile. The
 * anchor stays a REAL anchor — tabbable, with its own `aria-label` and a focus ring — so this
 * needs ⛔ no JS and ⛔ no preventDefault.
 * ⛔⛔ THE ROW STAYS A `<div>`, AND THAT IS LOAD-BEARING: SOCIAL222 and SOCIAL225 both slice a
 * row with `lastIndexOf('<div class="hd-inbox-row')`. A row turned into an `<a>` hands both of
 * them `null` and every clause they own fails — about a row that works.
 * ⭐ IT CAN BE THE WHOLE ROW ONLY BECAUSE THE SECOND LINK IS GONE: until this pass the name was
 * an anchor to the person's profile, and an overlay across a nested link is a trap, not a
 * target. views/inbox_list.ejs drops that href; the thread header still carries it.
 * ⛔ These rules live HERE and ⛔ not in app.css: its nd-css-ledger has 54 bytes left.
 * ═══════════════════════════════════════════════════════════════════════════════ */
.hd-inbox-row{position:relative}
.hd-thread-preview::after{content:"";position:absolute;inset:0}
.hd-thread-preview:focus-visible{outline:2px solid var(--hd-action);outline-offset:-2px;border-radius:var(--hd-control-radius)}

/* ═══════════════════════════════════════════════════════════════════════════════
 * SOCIAL227 ITEM 2 - THE PROFILE'S SUBJECT AND PLACE ARE LINKS, AND THEY LOOK LIKE THE CARD'S.
 * THE OWNER: "bishoy clickable hbe, location clickable hbe ... Dr card milye korbe."
 * The card's two links carry no underline (.hd-dir a, line 299) and read as the action
 * colour. The profile is not inside .hd-dir, so it needs its own pair of declarations -
 * the SAME two properties, not a second look.
 * The specialty already renders var(--hd-action) on this page (line 240), so the anchor
 * inheriting it changes nothing a reader can see; the place line was muted grey and
 * becomes the action colour, which is the only way a link there is a link at all.
 * The map-pin rides INSIDE who-loc on the profile and always has, so it travels with the
 * phrase it names and takes the same colour - on the card the icon sits outside the
 * anchor because the card's location is a flex row, not one inline-flex phrase.
 * A focus ring is declared because these are keyboard targets now.
 * These rules live HERE and not in app.css: its nd-css-ledger has 54 bytes left.
 * ═══════════════════════════════════════════════════════════════════════════════ */
.hd-profile .hd-card-specialty a,.hd-profile a.who-loc{color:var(--hd-action);text-decoration:none}
.hd-profile .hd-card-specialty a:focus-visible,.hd-profile a.who-loc:focus-visible{outline:2px solid var(--hd-action);outline-offset:2px;border-radius:6px}

/* ═════════════════════════════════════════════════════════════════
 * SOCIAL246 - THE DAILY LOG (/admin/questions, /admin/doctor-posts, /admin/inbox-stats).
 * THE OWNER: "Planning kore sundor kore banabe. Altu faltu kore banabe na."
 * One list shape for all three pages: an item per question, post or waiting doctor, separated
 * by the line token; a question's text and every answer keep their line breaks and wrap long
 * words, because they are read in full here; an answer sits indented under its question with
 * the line token as its rule; a post row puts a 96px lazy thumbnail beside its words and the
 * words may shrink, so a long caption never pushes the page sideways at 320px.
 * Tokens only - no new colour. These rules live HERE and not in app.css: its nd-css-ledger
 * has 54 bytes left.
 * ═════════════════════════════════════════════════════════════════ */
.hd-daylog{list-style:none;margin:0;padding:0}
.hd-daylog__item{padding:var(--hd-space-3) 0;border-bottom:1px solid var(--hd-line)}
.hd-daylog__item:last-child{border-bottom:0}
.hd-daylog__text{margin:var(--hd-space-1) 0;white-space:pre-wrap;overflow-wrap:anywhere}
.hd-daylog__ans{margin:var(--hd-space-2) 0 0 var(--hd-space-3);padding-left:var(--hd-space-3);border-left:2px solid var(--hd-line)}
.hd-daylog__post{display:flex;gap:var(--hd-space-3);align-items:flex-start}
.hd-daylog__main{flex:1 1 auto;min-width:0}
.hd-daylog__thumb{display:block;width:96px;height:96px;object-fit:cover;border-radius:var(--hd-control-radius);background:var(--hd-input)}

/* ════════════════════════════════════════════════════
 * SOCIAL250 - THE BOOKING THREAD PAGE FOR THE FOUNDER AND STAFF (/admin/bookings/:id/thread).
 * THE OWNER: "oi page e dr pt thread ta duplicate kore bosabe. Just read only vabe."
 * The doctor's and the patient's pages sit side by side where there is room for two phone-width
 * columns and one under the other where there is not; each frame is a phone-tall window onto the
 * real page and scrolls inside itself, so a long conversation never stretches this page.
 * Tokens only - no new colour.
 * ════════════════════════════════════════════════════ */
.hd-copy-frames{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:var(--hd-space-3)}
.hd-copy-frames__one{min-width:0}
.hd-copy-frame{display:block;width:100%;height:80vh;min-height:480px;border:1px solid var(--hd-line);border-radius:var(--hd-control-radius);background:var(--hd-card)}
/* SOCIAL253 - the founder's read-only «view as» bar (views/partials/header.ejs). Tokens only - no new colour. */
.hd-viewas{position:sticky;top:0;z-index:40;padding:var(--hd-space-1) var(--hd-space-3);background:var(--hd-warning-bg);color:var(--hd-ink);border-bottom:1px solid var(--hd-warn-line);font-size:var(--hd-meta-size);overflow-wrap:anywhere}
.hd-viewas a{color:var(--hd-action);font-weight:600}
/* SOCIAL254 - a chip to the right of a name (the booking chip on a consultation row in Messages); tokens only. */
.hd-person-nameline{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hd-space-1);min-width:0}

/* ════════════════════════════════════════════════════
 * SOCIAL261 - A DOCTOR'S PAYMENT LINK. The box sits above the two call buttons in a Messages chat
 * (taka sign, the amount, the word taka, send); the card sits inside its chat bubble, under the
 * words; the link's own page prints the amount large. The row wraps at 320px; the controls keep
 * the 48px tap target.
 * Tokens only - no new colour. Here and not in app.css (its ledger is closed).
 * ════════════════════════════════════════════════════ */
.hd-paylink-form{margin:0 0 var(--hd-space-2)}
.hd-paylink-form__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hd-space-2)}
.hd-paylink-form__field{max-width:100%;min-width:0;flex-wrap:wrap;display:inline-flex;align-items:center;gap:var(--hd-space-1);margin:0;padding:0 var(--hd-space-2);min-height:var(--hd-tap);border:1px solid var(--hd-control-line);border-radius:var(--hd-control-radius);background:var(--hd-input)}
.hd-paylink-form .hd-paylink-form__amount{width:5ch;min-width:0;min-height:var(--hd-tap);margin:0;padding:0;border:0;background:transparent;font-size:var(--hd-input-size);font-weight:600;text-align:right}
.hd-paylink-form__sign,.hd-paylink-form__unit{color:var(--hd-muted-text);font-weight:600}
.hd-paylink-form__send{flex:1 1 auto;min-height:var(--hd-tap)}
.hd-paylink-form__help{margin:var(--hd-space-1) 0 0;color:var(--hd-muted-text)}
.hd-paylink{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hd-space-2);margin-top:var(--hd-space-2)}
.hd-paylink__paid{color:var(--hd-success);font-weight:600}
.hd-paylink-page__doctor{margin:0;color:var(--hd-muted-text)}
.hd-paylink-page__amount{margin:var(--hd-space-2) 0 var(--hd-space-3);font-size:var(--hd-title-size);font-weight:700}

/* SOCIAL270: desktop shell only. Mobile/tablet rules and the measured vertical
 * stack remain the owners below 1024px. Scope to the HD header so the shared
 * asset cannot change Cleo chat/call, staff consoles, or media overlays.
 * Flow fallback uses auto margins, not transforms: short windows and JS-off
 * keep the same DOM, normal scrolling and keyboard order. */
@media (min-width:1024px){
  body:has(>.hdr.hd-hdr){--hd-desktop-shell:840px;--hd-desktop-inset:28px}
  body:has(>.hdr.hd-hdr):has(>main.hd-dir){--hd-desktop-shell:var(--hd-directory-width)}
  body:has(>.hdr.hd-hdr)>.hdr.hd-hdr{
    width:calc(100% - 48px);max-width:var(--hd-desktop-shell);
    margin-inline:auto;padding-inline:var(--hd-desktop-inset);flex-wrap:wrap;
  }
  body:has(>.hdr.hd-hdr)>.hdr.hd-hdr .hd-nav{
    flex:0 1 auto;flex-basis:auto;flex-wrap:wrap;gap:8px;margin-inline-start:auto;
  }
  body:has(>.hdr.hd-hdr)>.hdr.hd-hdr .hd-nav__item{
    flex:0 1 auto;padding-inline:12px;
  }
  body:has(>.hdr.hd-hdr)>main.wrap:has(>.joinstrip),
  body.hd-doctor-home>main.wrap.hd-dd,body.hd-patient-home>main.wrap.hd-pd{
    width:calc(100% - 48px);max-width:840px;padding-inline:28px;
  }
  body:has(>.hdr.hd-hdr)>.botnav[data-botnav-measure]{
    left:0;right:0;width:calc(100% - 48px);max-width:560px;margin-inline:auto;
    border-inline:1px solid var(--hd-line);border-radius:var(--hd-card-radius) var(--hd-card-radius) 0 0;
  }
  body:has(>.hdr.hd-hdr):has(.botnav[data-hd-stack="1"]) :is(.hd-install-bar,.pwabar){
    left:0;right:0;width:calc(100% - 48px);max-width:784px;margin-inline:auto;
  }
  body:has(>.hdr.hd-hdr):has(.botnav[data-hd-stack="1"]) .hd-install-go{flex:0 1 auto}
  body:has(>.hdr.hd-hdr):has(.botnav[data-hd-stack="1"]) .hd-install-t{flex:1 1 240px}
  .hd-stack-flow body:has(>.hdr.hd-hdr):has(.botnav[data-hd-stack="1"]) .chatfab,
  html:not(.hd-stack-js) body:has(>.hdr.hd-hdr):has(.botnav[data-hd-stack="1"]) .chatfab{
    display:flex;width:max-content;max-width:calc(100% - 104px);margin-inline-start:auto;
    margin-inline-end:max(52px,calc((100% - var(--hd-desktop-shell)) / 2 + var(--hd-desktop-inset)));
  }
  .hd-stack-js:not(.hd-stack-flow) body:has(>.hdr.hd-hdr):has(.botnav[data-hd-stack="1"]) .chatfab{
    right:max(52px,calc((100% - var(--hd-desktop-shell)) / 2 + var(--hd-desktop-inset)));
  }
}