steps down. ⇒ there is no declaration anywhere that can
shrink the box — ⛔ nothing here sets its width, its height or its font, so its tap
target is the browser's own, exactly as it was before this pass. ⛔ Sizing the
LABEL would have shrunk it on WebKit, where a checkbox scales with its font; TF-6
prints the before and the after.
⭐ THE GAP THE OWNER ASKED FOR — «`নতুন ফোন বা ব্রাউজারে…`-r sathe terms link PRAY
LEGE GECHE — ekhane ektu GAP dite hobe.» That hint is ``, whose
`margin:0` put it flat against a block that had no margin either. ⇒ `var(--pad)`,
⛔ not a magic number: the page's OWN spacing token, the one `.wrap` and `.card`
already pad by. One rule, and the gap lands identically on all five surfaces.
`font-weight:400` restores what `.tiny` renders at everywhere else on this site —
the global `label` bold was inherited by accident, never chosen.
═══════════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════════
⭐⭐⭐ social65 ITEM 1 — **`.err` HAD NO RULE EITHER, AND THAT IS THE OTHER HALF OF
«AGER MOTO RED ERROR».**
⚠⚠ FOUND WHILE MAPPING THE PAY PRESS, and it is a defect in its own right: eleven
templates print a refusal as `
…
` — /instant, /serial/:slug, the
booking page, the consent step, both logins, three admin screens — and this
stylesheet declared ⛔ NOTHING for that class. ⇒ every server-side refusal on this
site has been rendering as ORDINARY BLACK BODY TEXT: the words were there and the
colour that says «this is an error» never was.
⭐ THAT IS THE PATH A SCRIPTLESS BROWSER TAKES. With JavaScript off the press goes
to the server, routes/instant.js answers «বিভাগ ও ফি — দুটোই বেছে নিন।», and until
this rule that sentence arrived looking like a paragraph.
⛔ COLOUR ONLY, ⛔ not a box: `.alert-bad`'s panel on eleven existing pages would
move layout the owner did not ask to have moved. `--bad` is the token `.alert-bad`,
`.chip-bad` and `.room-undelivered` already read — ⛔ no new colour was chosen.
⭐ `font-weight:600` is the emphasis idiom this repo already uses for the line that
matters; ⛔ no size is set, so an error stays at the page's own body size. */
.err{color:var(--bad);font-weight:600}
.policytick{margin:var(--pad) 0}
.policytick label{font-weight:400;margin-bottom:0}
/* ⛔ The links stay UNDERLINED at the smaller size — no `text-decoration:none` is
declared here or inherited, and `--brand-dk` keeps them off the muted body colour.
A policy name a reviewer cannot pick out of a grey line is a policy name he will
report as missing. */
.policytick a{color:var(--brand-dk)}
/* ⭐⭐ THE RED LINE, AND `:empty` IS WHAT HIDES IT. ⛔ Not `hidden` toggled by script
(app.js only ever ADDS `hidden`) and ⛔ not a class: an element that is invisible
BECAUSE it has nothing to say cannot be left stuck open by a script that died, and
`textContent = ''` is then the whole of «take the error back». */
/* ⛔ NO margin of its own: it carries `.alert`, whose `margin:0 0 14px` is already
this site's spacing under a message box. A second number here would be a second
opinion about the same gap. */
.gate-msg:empty{display:none}
/* ⭐⭐ «IT LOOKS BLOCKED.» The dim treatment the pay button never had — `opacity:.6`
is `.room-say button[type=submit][disabled]`'s own number, the idiom this site
already uses for a control that is not ready. ⛔ ON `aria-disabled` AND ⛔ NEVER ON
`[disabled]`: the button must keep receiving the click that produces the sentence.
⛔ `cursor` is left alone — `not-allowed` over a control that IS allowed to be
pressed would be the same lie the disabled attribute told. */
.btn[aria-disabled="true"]{opacity:.6}
/* ══════════════════════════════════════════════════════════════════════════════
⭐⭐ social66 HS ITEM 4 — THE «অন্য সময়» DISCLOSURE, ON THE STAFF CONSOLE.
⛔⛔ IT IS NOT A THIRD ROW SHAPE. `.dc-row` is `display:flex` and the form is a
THIRD child beside `.dc-main` and `.dc-side`, so without a rule it would fight
the two of them for one line on a 360px phone. ⇒ the row wraps and the
disclosure claims the whole of the second line — ⛔ the only geometry change,
and ⛔ no new colour, no new button variant and no new token.
⭐ `flex-basis:100%` rather than a width: it takes the line it is on and nothing
more, whatever the two halves above it did.
⚠ 360px: the two selects and the button WRAP inside it, and each select is
`max-width:100%`, so ⛔ nothing here can push the page sideways (MB1's law).
══════════════════════════════════════════════════════════════════════════════ */
.dc-row{flex-wrap:wrap}
.dc-move{flex:0 0 100%;margin:.25rem 0 0}
.dc-move summary{cursor:pointer;color:var(--brand-dk)}
.dc-move form{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin-top:.4rem}
.dc-move select{max-width:100%;min-width:0}
/* ⭐ THE «this was moved» LINE takes its own line too — it is a sentence about the
row, ⛔ not a chip beside the hour. */
.dc-row .dc-why{flex:0 0 100%;margin:.15rem 0 0}
/* ══════════════════════════════════════════════════════════════════════════════
⭐⭐ social66 HS ITEM 5 — THE হিসাব ঘর'S FILTER.
⛔ NO NEW TABLE CLASS: the board itself is `.board` inside `overflow-x:auto`,
the SAME pair /admin/sales and /admin/unclaimed already carry, so the page body
never scrolls sideways on a phone and a staff member learns ONE table shape.
⭐ Only the filter needs geometry, and it is one wrapping row of fields.
══════════════════════════════════════════════════════════════════════════════ */
.moneyfilter{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.6rem}
.moneyfilter .field{flex:1 1 8rem;min-width:0;margin:0}
.moneyfilter select,.moneyfilter input{max-width:100%;min-width:0}
/* ══════════════════════════════════════════════════════════════════════════════
⭐⭐ social68 EP ITEM 3 — THE LEGAL EDITOR'S TEXTAREA.
⛔ NO `cols` AND ⛔ NO PIXEL WIDTH: a textarea's default width is its `cols`
attribute, which is a character count and overflows a 360px phone the moment the
font is anything but tiny. `width:100%` inside `.card`'s own padding is the whole
fix, and `box-sizing` is already border-box site-wide.
⭐ `resize:vertical` — he can make it taller to read a long clause; ⛔ never
horizontally, which is the one direction that would widen the page.
⚠ A MONOSPACE FACE ON PURPOSE: this is a plain-text document whose PARSER cares
about leading spaces (an indented line is a callout, a three-space gutter is a
table row). In a proportional font he cannot see the indentation he is editing.
══════════════════════════════════════════════════════════════════════════════ */
.legaledit textarea{width:100%;max-width:100%;min-width:0;resize:vertical;
font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
font-size:.85rem;line-height:1.45;white-space:pre;overflow-wrap:normal;overflow-x:auto}
/* ⭐ The «সর্বশেষ হালনাগাদ» line sits directly under the effective date and reads as
its quieter sibling. ⛔ No new colour token. */
.legal-updated{color:var(--muted,#667);font-size:.85rem;margin:.7rem 0 0;text-align:center}
/* ══════════════════════════════════════════════════════════════════════════════
⭐⭐ social76 — THE প্রশ্ন COMPOSER AND ITS CARD.
⛔ NO NEW CARD CLASS: a question renders as `article.post`, the feed's own card,
so padding, border, body type and the action row are the site's. `.qpost` and
`.qanswer` exist only to be reachable by a check and carry ⛔ no geometry.
⭐ `.qfields` is `.moneyfilter`'s own proven geometry under its own name — a
wrapping flex row with `min-width:0`, so at 360px the four controls stack and
⛔ nothing forces the page wider. ⛔ No width, ⛔ no min-width, ⛔ no px anywhere.
══════════════════════════════════════════════════════════════════════════════ */
.qfields{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.6rem}
.qfields .field{flex:1 1 7rem;min-width:0;margin:0 0 14px}
.qfields select,.qfields input{max-width:100%;min-width:0}
/* ⭐ The banner inside a card sits tight to the text it is about. ⛔ Its colours are
`.alert-bad`'s — the site's own red token, ⛔ no new colour was chosen. */
.qflag{margin:0 0 12px}
/* ⭐ The system-written closing line reads as what it is: quieter than the doctor's
own words, and never mistakable for them. ⛔ It is appended at RENDER and is not
in the stored body (lib/question.js `closingLinesBn`). */
.qclosing{margin:.5rem 0 .35rem}
/* ⭐ The withdrawal control sits at the far right of the card's action row — the
same `margin-left:auto` the eye/like row already uses to push its last item over.
⛔ IN CSS, ⛔ never an inline `style=`: this site sends a strict CSP with a nonce
and no `'unsafe-inline'` for styles, so an inline attribute is a control that
would silently lose its position on the owner's own phone. */
.qpost .post-ft .qwithdraw{margin-left:auto}
/* ══════════════════════════════════════════════════════════════════════════════
⭐⭐⭐ social79 ITEM 3 — **THE BAR DOWN THE LEFT OF A রোগীর প্রশ্ন CARD.**
THE OWNER, 2026-08-26: «Pt-er post jeguli dashboard-e kore, segulir margin-ta
amader logo-r green ba blue ba khoyeri … sei color-er dag.» And, ruling on the
shape: «BA-PASHE EKTA DAG dilei mone hoy valo, noyto cokher jonno somossa hote
pare.» ⇒ ⭐ LEFT ONLY, ⛔ never a border all the way round.
═══ ⭐⭐ WHY THIS COLOUR, MEASURED RATHER THAN PICKED ═══
The two logo files were read pixel by pixel (public/img/hellodoctor-logo-600.png,
hellodoctor-mark-512.png) and they carry EXACTLY TWO colours: #4088d0 and #40a8b8
— which are `--brand` and `--brand-2` to within the PNG's own 8-bit rounding.
⚠⚠ THERE IS ⛔ NO GREEN AND ⛔ NO খয়েরি IN THE LOGO. He named three; his logo has
two, and the teal is the one a reader calls «the green one».
candidate contrast vs the card (#fff) why not
--brand #3F88CD 3.74:1 ⛔ hue 209°; the blue tick is #1D9BF0 at 204°
--brand-dk #2F6DA8 5.42:1 ⛔ the same blue family, one step darker
.seal green #0a8f6a 4.08:1 ⛔ that is the VERIFIED-DOCTOR tick's own fill
--bad #b3261e 6.54:1 ⛔ the red-flag banner's own token (.alert-bad)
--warn #8a6100 5.54:1 ⛔ the amber alert's own token
⭐ --brand-2 #42AAB7 2.74:1 ✓ in the logo · 17° off the blue tick · quiet
⚠ 2.74:1 IS BELOW WCAG 1.4.11's 3:1, AND THAT IS THE CHOICE RATHER THAN AN
OVERSIGHT: the bar carries ⛔ no information — the card already says «প্রশ্ন» in a
chip and names the asker as a handle — so it is decoration, and his own words were
«noyto cokher jonno somossa hote pare». The deep green at 7.8:1 is the shouting he
asked me not to do. ⭐ The number is in the report so he can overrule it.
⭐ ONE DECLARATION, READING AN EXISTING TOKEN. ⛔ No new hex was invented and ⛔ no
hex is spelled here at all: `--brand-2` is declared once, in `:root`, and every
surface the question card renders on (the feed, the dashboard, /q/:id and the
doctor's first room) inherits this from the one place — so a fourth surface gets
it free, which is the same discipline `.seal-blue` shipped under in social78.
⛔ NOT on a doctor's post and ⛔ not on a brand post: `.qpost` is on the question
card and on nothing else in views/.
⚠ `.post` already declares `border:1px solid var(--line)`, so this OVERRIDES the
left edge rather than adding to it — the card's total width does ⛔ not change and
⛔ nothing can be pushed sideways at 360px. It costs 3 CSS px of content width.
══════════════════════════════════════════════════════════════════════════════ */
.qpost{border-left:4px solid var(--brand-2)}
/* ══════════════════════════════════════════════════════════════════════════════
⭐⭐⭐ social79 ITEM 1 — **THE CALL LIST, STACKED BY DEFAULT.**
⚠⚠ 360px IS NOT OPTIONAL HERE: this is the page the owner and his staff will use ON
A PHONE, standing up, while dialling. ⛔ A table that scrolls sideways hides the very
column they came for.
⭐ THERE IS ⛔ NO MEDIA QUERY AND ⛔ NO BREAKPOINT. Each row is a `flex-wrap:wrap`
container whose three parts have `min-width:0` and no width at all — so at 360px they
stack because there is no room, and on a laptop they sit on one line because there is.
The narrow screen is the DEFAULT state of the rule, ⛔ not a special case of it, which
is the same geometry `.qfields` (itself `.moneyfilter`'s) has been proved on twice.
⛔ NO `px` WIDTH ANYWHERE, so nothing here can force the page wider than the viewport.
⭐ `.callrow-open` vs `.callrow-done` carry ⛔ NO geometry and ⛔ no new colour: the
done rows simply sit quieter, which is the visual half of «uncalled first». The ORDER
is the server's (lib/call-list.js `orderRows`); this only agrees with it.
══════════════════════════════════════════════════════════════════════════════ */
.callcounts{display:flex;flex-wrap:wrap;gap:8px 20px;list-style:none;margin:0 0 12px;padding:0}
.callcounts strong{font-size:1.2rem}
.calllist{list-style:none;margin:0;padding:0}
.callrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;
background:var(--card);border:1px solid var(--line);border-radius:var(--r);
padding:10px var(--pad);margin:0 0 8px}
/* ⭐ `flex:1 1 12rem` + `min-width:0` — the pair that lets a long Bangla name wrap
inside its own box instead of pushing the row past the viewport. */
.callwho{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;flex:1 1 12rem;min-width:0}
.callwho .who-name{overflow-wrap:anywhere}
.callphone{font-variant-numeric:tabular-nums;white-space:nowrap}
.callmeta{display:flex;flex-wrap:wrap;gap:2px 12px;flex:1 1 10rem;min-width:0;margin:0}
.callby{overflow-wrap:anywhere}
.callmark{display:flex;flex-wrap:wrap;align-items:center;gap:6px;flex:0 1 auto;min-width:0}
.callmark select{max-width:100%;min-width:0}
.callrow-done{opacity:.72}
/* ══════════════════════════════════════════════════════════════════════════════
⭐⭐ social77 ITEM 3b — «ভিডিও/অডিও কল শুরু করা যাবে … থেকে।»
⛔ NO NEW COLOUR AND NO NEW BOX: on the thread it is `.alert.alert-info`, the
site's own quiet blue; on a list row it is `.tiny`, the site's own fine print.
`.callopens` only gives it room to breathe on its own line — a sentence about a
time must not sit mid-row between a price and a button.
══════════════════════════════════════════════════════════════════════════════ */
.callopens{display:block;margin:.3rem 0 0}
/* ══════════════════════════════════════════════════════════════════════════════
⭐⭐ social78 ITEM 1 — THE BLUE TICK.
THE OWNER: «seta tick dile GREEN tick ta BLUE hoye jabe — Meta-r verified-er moto.»
⛔ THE SAME GLYPH, RE-COLOURED BY ONE CLASS — ⛔ no second image, ⛔ no second SVG
path, ⛔ no extra request. `.seal` already owns the size, the stroke and the round
plate, and its own white text colour already drives the tick through currentColor.
⇒ ⭐ ONE DECLARATION IS THE WHOLE CHANGE: the two ticks are the same shape in the
same place and only the background says which.
⭐ THE BLUE IS META'S OWN VERIFIED HUE (#1D9BF0), which is what «Meta-r verified-er
moto» means to anybody who has seen one. ⛔ Not a new brand token: it is a
deliberate borrow of a convention the owner named, and it lives on this one class.
══════════════════════════════════════════════════════════════════════════════ */
.seal.seal-blue{background:#1D9BF0}
/* ⭐ social78 ITEM 4 — the unpaid landing's block. ⛔ NO new colour and ⛔ no new box:
`.alert.alert-warn` is the site's own amber, which is the right register for «it did
not happen» — ⛔ not `.alert-bad`, which this product uses for a refusal the reader
caused. `.payfailed` only gives the retry link room beneath the two sentences. */
.payfailed p{margin:.35rem 0 0}