/* Real dashboard: additions only. Base look comes from ../assets/tokens.css and ../demo/demo.css. */

/* The menu: the surgeon's six pages, or the pages a member's switches open (--tabs: how many, set by the shell) */
.tabbar { grid-template-columns: repeat(var(--tabs, 6), 1fr); }
.tab-ind { width: calc(100% / var(--tabs, 6)); }
.tab { font-size: 11px; min-width: 0; }
.tab > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabbar[data-n="6"] .tab { font-size: 10px; letter-spacing: -0.01em; }

/* Loading */
.ld { display: flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 40vh; color: var(--ink-3); font-size: var(--fs-sm); }
.ld .spin { color: var(--navy-2); }

/* Field errors (Arabic message from the API, shown next to the field) */
.fe { display: flex; align-items: flex-start; gap: 6px; margin: var(--s2) 0 0; font-size: var(--fs-xs); font-weight: 600; line-height: 1.6; color: var(--danger); }
.fe .ic { flex: none; margin-top: 2px; }
.fe-slot:empty { display: none; }
.fe-slot .fe { padding: 8px 10px; border-radius: var(--r-md); background: var(--danger-bg); border: 1px solid #f0cccc; animation: note-in var(--t-med) var(--ease-out); }
.frame.is-bad { border-color: #e6b3b3; background: var(--danger-bg); }
.frame.is-bad .fill input, .frame.is-bad textarea { border-color: var(--danger); }

/* Sign-in */
.gsi-wrap { margin-top: var(--s6); min-height: 52px; display: flex; justify-content: center; }
.gsi-wrap > div { width: 100%; display: flex; justify-content: center; }
.gsi-wrap .note { width: 100%; }
.gsi-ph { min-height: 44px; display: grid; place-items: center; color: var(--ink-3); }

/* Onboarding and centers */
.center-card .pcard-head .row-main > b { font-size: var(--fs-md); font-weight: 700; }
.coord-form { display: grid; gap: var(--s2); margin-top: var(--s3); }
.coord-form-in { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.coord-form-in .field + .field { margin-top: 0; }
@media (max-width: 420px) { .coord-form-in { grid-template-columns: 1fr; } }
.coord.coord-2 { display: block; padding: var(--s3) 0; min-height: 0; }
.coord-top { display: flex; align-items: center; gap: var(--s3); }
.coord-top .row-main { min-width: 0; }
.coord-top .row-main > b { display: block; font-weight: 600; font-size: var(--fs-sm); }
.coord-top .row-main > span { display: block; font-size: var(--fs-xs); color: var(--ink-3); text-align: right; }
.coord-acts { display: flex; align-items: center; gap: var(--s1); margin-top: var(--s2); padding-inline-start: 48px; flex-wrap: wrap; }
.coord-acts .btn { margin-inline-end: auto; }
.svc { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s3); }
.svc-n { font-size: var(--fs-lg); font-weight: 700; color: var(--navy); }
.btn-row { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s3); }
.checklist li > span:last-child { min-width: 0; }

/* Protocol editor */
.fta { box-sizing: border-box; width: 100%; min-height: 96px; resize: none; overflow-y: hidden; padding: 10px 12px; border-radius: 10px; background: var(--white); border: 1.5px dashed var(--sky); font-size: var(--fs-sm); line-height: 1.9; display: block; }
.fta:focus { outline: none; border-style: solid; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(55, 138, 221, 0.16); }
.ed-nums { display: grid; gap: var(--s4); margin-top: var(--s4); }
.ed-nums .field + .field { margin-top: 0; }
@media (min-width: 640px) { .ed-nums { grid-template-columns: 1fr 1fr; } }
.ed-nums .hint { margin-top: var(--s2); }
.card-pad > .switch-row { min-height: 48px; }
.tp-body > .msg:first-of-type { margin-top: var(--s2); }
.q-type { max-width: 280px; }
.q-adds { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.q-adds .add-msg { margin-top: var(--s3); }
.msg-body > .field + .field { margin-top: var(--s3); }
.msg-body > .switch-row { min-height: 48px; }
.msg-body > .switch-row + .field { margin-top: var(--s2); }
.rf-when { display: inline-flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.hint .inl { display: inline-block; vertical-align: -3px; margin-inline-end: 4px; color: var(--attn); }
.ed-tags .tag .ic { width: 12px; height: 12px; }
.pcard .ed-tags { margin-top: 0; }
.savebar .btn { padding: 0 var(--s4); }
@media (max-width: 639px) {
  .q-adds { grid-template-columns: 1fr; gap: 0; }
  .savebar .state { display: none; }
}

/* Surgery calendar: no hours in the real data, so cards lead with the name */
.sx-card .sx-name:first-child { margin-top: 0; }
.sx-wide .sx-info { gap: 4px; }
.mv-notify { padding: var(--s3); }
.mv-line { display: flex; align-items: center; gap: var(--s3); }
.mv-line .row-main > b { display: block; font-size: var(--fs-sm); font-weight: 700; line-height: 1.5; }
.mv-line .row-main > span { display: block; font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.6; }
.mv-line .ok-ic { color: var(--ok); flex: none; }
/* D132: the switch at the end of a line of «مين نبلغ», the lines of a surgery's sheet, and the mark on its card */
.switch-row.tell-sw { flex: none; width: auto; min-height: 44px; padding-inline-start: var(--s2); }
.tell-group { margin: 0 0 var(--s4); }
.tell-group .mv-notify { padding: var(--s2) var(--s3); }
.tell-group .mv-notify.is-untold { border-color: var(--danger); background: var(--danger-bg); }
.tell-group .mv-notify.is-untold .row-main > span { color: var(--danger); font-weight: 600; }
.tell-btn { flex: none; white-space: nowrap; }
/* red, as an alert (Omar, 2026-10-06: the first mark, a navy paper plane, did not say «not sent») */
.sx-chg.sx-untold { background: var(--danger); color: var(--white); font-weight: 700; }
.sx-chip-chg.sx-chip-un { background: var(--danger); color: var(--white); }
.sx-chip-un .ic { stroke-width: 2.2; }
.sx-chip-chg + .sx-chip-un { margin-inline-start: 2px; }
.mv-notify .mv-chat, .mv-notify > .note, .mv-notify > .hint { margin-top: var(--s2); }
.mv-plan .tag { font-size: 10px; padding: 0 6px; }
.dp-x { display: block; }
.fta.fta-1 { min-height: 64px; font-size: var(--fs-md); font-weight: 500; line-height: 1.7; }
.set-item .field .label { font-size: var(--fs-sm); color: var(--ink-2); margin-bottom: var(--s2); }
.set-item .seg { margin-top: var(--s3); }

/* Settings -> «الاشتراك»: Moyasar billing above the cancel block (design section 7) */
.bill { margin-bottom: var(--s4); padding-bottom: var(--s4); border-bottom: 1px solid var(--line, #e3e7ec); }
.bill-line { margin: 0 0 var(--s2); font-size: var(--fs-sm); line-height: 1.7; }
.bill-method { margin: 0 0 var(--s3); }
.bill .bill-mth { margin-bottom: var(--s3); }
.bill .btn-primary { margin-bottom: var(--s3); }
.bill-h { margin: var(--s2) 0 var(--s1); font-size: var(--fs-sm); font-weight: 700; color: var(--ink-2); }
.bill-pays { list-style: none; margin: 0; padding: 0; }
.bill-pay { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3); padding: var(--s2) 0; font-size: var(--fs-sm); border-top: 1px solid var(--line, #e3e7ec); }
.bill-pay:first-child { border-top: 0; }
.bill-pay .btn-text { margin-inline-start: auto; }
/* D293: his discount's line under the state line, and the code field while he has none (app.js offerHTML) */
.bill-offer { margin: 0 0 var(--s2); font-size: var(--fs-sm); line-height: 1.7; color: var(--ok); font-weight: 600; }
.bill-code { margin: var(--s2) 0 var(--s3); }
.bill-code .label { display: block; margin-bottom: var(--s1); }
.bill-code-row { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.bill-code-row .input { flex: 0 1 220px; min-width: 0; text-transform: uppercase; letter-spacing: 0.04em; }
.bill .bill-code-row .btn { margin-bottom: 0; }
.bill-code-msg { margin: 0 0 var(--s2); font-size: var(--fs-sm); line-height: 1.7; }
.cap-hint { margin-top: var(--s2); }
.add-tp:disabled { color: var(--ink-3); }
.add-tp:disabled .plus { border-color: var(--line-2); transform: none; background: var(--paper); }
.add-tp:disabled .txt { background: none; }
.tl .cap-hint { margin-top: 0; padding-inline-start: 44px; }
@media (max-width: 639px) { .tl .cap-hint { padding-inline-start: 32px; } }

/* ================================================================ Protocols list (D49): copy + open on each card */
.pcard-2 { gap: var(--s3); }
.pcard-link { display: flex; flex-direction: column; gap: var(--s3); color: inherit; text-decoration: none; border-radius: var(--r-md); }
article.pcard:hover { box-shadow: var(--shadow-2); border-color: var(--line-2); }
.pcard-acts { display: inline-flex; gap: var(--s2); }
.pcard-acts .btn { min-height: 44px; }
/* New-protocol sheet: start options */
.pn-list { display: grid; gap: var(--s2); margin-top: var(--s5); }
.pn-list .group-label { margin-top: var(--s3); margin-bottom: 0; }
.pn-list .group-label:first-child { margin-top: 0; }
.pn-opt { display: flex; align-items: flex-start; gap: var(--s3); width: 100%; min-height: 56px; padding: var(--s3); border-radius: var(--r-md); border: 1px solid var(--line); background: var(--white); text-align: start; transition: border-color var(--t-fast), background var(--t-fast); }
.pn-opt:hover { border-color: var(--line-2); background: var(--mist-2); }
.pn-opt[aria-checked="true"] { border-color: var(--navy); background: var(--mist-2); box-shadow: 0 0 0 1px var(--navy); }
.pn-radio { flex: none; width: 20px; height: 20px; margin-top: 3px; border-radius: 50%; border: 2px solid var(--line-2); background: var(--white); transition: border-color var(--t-fast), border-width var(--t-fast); }
.pn-opt[aria-checked="true"] .pn-radio { border-color: var(--navy); border-width: 6px; }

/* ================================================================ Protocol editor: the WhatsApp look of the preview (D49, D50)
   The page is Daydan (blues and white, D35); only the preview looks like WhatsApp. The form's own styles follow below. */
.pe-morebtn { display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 56px; margin-top: var(--s4); padding: 6px var(--s3); border-radius: var(--r-md); background: var(--mist-2); border: 1px solid var(--line); color: var(--navy); text-align: start; transition: background var(--t-fast), border-color var(--t-fast); }
.pe-morebtn:hover { background: var(--mist); border-color: var(--line-2); }
.pe-morebtn .t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.45; }
.pe-morebtn .t b { font-size: var(--fs-sm); font-weight: 700; }
.pe-morebtn .t small { font-size: var(--fs-xs); color: var(--ink-3); }
.pe-morebtn .chev { transition: transform var(--t-med) var(--ease); }
.pe-morebtn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.pe-more { display: grid; gap: var(--s5); margin-top: var(--s5); }
.pe-more .field + .field { margin-top: 0; }
.pe-more .meta-line { margin-top: 0; }
.pe-sub .label { margin-bottom: 0; }
.pe-sub-h { margin: 2px 0 var(--s2); }
/* the chat: WhatsApp wallpaper, light green outgoing bubbles with a tail, time and ticks, quick-reply rows */
.pe-wa { margin-top: var(--s3); padding: 12px 10px 16px; border-radius: 16px; border: 1px solid #e2dcd2; min-height: 150px;
  background-color: #efeae2;
  background-image: radial-gradient(rgba(84, 101, 111, 0.1) 1px, transparent 1.4px), radial-gradient(rgba(84, 101, 111, 0.07) 1px, transparent 1.4px);
  background-size: 22px 22px, 22px 22px; background-position: 0 0, 11px 11px; }
.pe-wa-sm { margin-top: var(--s2); min-height: 0; }
@media (min-width: 640px) { .pe-wa { padding: 16px 20px 20px; } }
.wa-date { display: flex; justify-content: center; margin-bottom: 4px; }
.wa-date span { background: #fff; color: #54656f; font-size: 12.5px; font-weight: 500; padding: 3px 12px; border-radius: 8px; box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13); }
.wa-sys { display: flex; justify-content: center; margin: 14px 0 2px; }
.wa-sys span { background: #fff7d6; color: #54656f; font-size: 12px; padding: 3px 12px; border-radius: 8px; box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.1); text-align: center; }
.wa-item { display: flex; justify-content: flex-end; margin-top: 8px; }
.wa-col { width: 88%; max-width: 460px; display: flex; flex-direction: column; align-items: flex-end; padding-inline-end: 8px; }
.wa-b { position: relative; max-width: 100%; min-width: 120px; background: #d9fdd3; color: #111b21; border-radius: 8px; padding: 6px 10px 4px; box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13); font-size: 14.5px; line-height: 1.65; overflow-wrap: anywhere; transition: box-shadow var(--t-fast); }
.wa-b.full { width: 100%; }
.wa-b.tail { border-top-left-radius: 0; }
.wa-b.tail::before { content: ""; position: absolute; top: 0; left: -8px; width: 8px; height: 13px; background: #d9fdd3; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.wa-part { white-space: pre-wrap; }
.wa-dim { color: #667781; }
.wa-link { color: #027eb5; text-decoration: underline; }
.wa-badge { display: inline-block; margin-inline-start: 6px; padding: 0 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.7); color: #54656f; font-size: 11px; font-weight: 600; vertical-align: 1px; }
.wa-meta { display: flex; justify-content: flex-start; align-items: center; gap: 3px; margin-top: 1px; direction: ltr; font-size: 11px; color: #667781; line-height: 1.4; }
.wa-ticks { color: #53bdeb; }
.wa-hint { display: inline-flex; align-items: center; gap: 6px; align-self: stretch; margin-top: 4px; padding: 4px 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.6); color: #54656f; font-size: 12px; line-height: 1.5; }
.wa-btns { width: 100%; display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.wa-qr { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 44px; padding: 0 10px; background: #fff; border-radius: 8px; box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13); color: var(--navy-2); font-size: 14.5px; font-weight: 600; transition: background var(--t-fast); }
.wa-qr .ic { color: var(--navy-2); }
/* routing: who gets the answer (the form's control under each button's name) */
/* an optional choice with nothing picked: no thumb behind its first option */
.seg-none .seg-thumb { opacity: 0; }
.seg-rt { flex: 1 1 190px; padding: 3px; background: rgba(255, 255, 255, 0.8); box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.1); }
.seg-rt .seg-thumb { top: 3px; bottom: 3px; inset-inline-start: 3px; width: calc((100% - 6px) / var(--n)); background: var(--navy); box-shadow: none; }
.seg-rt button { min-height: 44px; padding: 0 4px; font-size: 13px; color: var(--ink-2); }
.seg-rt button[aria-checked="true"] { color: var(--white); }
/* D50 frame: the fixed greeting and closing around the surgeon's text, in one bubble; his paragraphs a line apart */
.wa-b.wa-frame { width: 100%; }
.wa-lock { margin: 0; }
.wa-box { margin: 4px 0; }
.wa-box + .wa-box { margin-top: 0.9em; }
.wa-box .wa-part { margin: 0; padding: 0; min-height: 1.65em; }
.ph { display: inline-block; margin: 0 2px; padding: 0 7px; border-radius: 6px; background: var(--mist); border: 1px solid var(--sky); color: var(--navy); font-size: 12.5px; font-weight: 600; line-height: 1.7; vertical-align: baseline; user-select: all; cursor: default; }
/* question bank sheet */
.bank-list { display: grid; gap: var(--s2); }
.bank-row { display: flex; align-items: flex-start; gap: var(--s3); width: 100%; min-height: 56px; padding: var(--s3); border-radius: var(--r-md); border: 1px solid var(--line); background: var(--white); text-align: start; transition: background var(--t-fast), border-color var(--t-fast); }
.bank-row:hover:not(:disabled) { background: var(--mist-2); border-color: var(--line-2); }
.bank-row:disabled { opacity: 0.55; }
.bank-row .row-main > span { line-height: 1.6; }
.bank-row .bank-rt { margin-top: 2px; color: var(--navy-2); font-weight: 600; }
.bank-plus { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--mist); color: var(--navy); }
/* «غيّر اليوم»: the day sheet */
.ds-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--s3); }
.ds-row .seg { min-width: 240px; }
/* add surgery: protocol or free-text operation */
.af-op { margin-top: var(--s3); }
.input.is-bad { border-color: var(--danger); }
/* a group of chips that waits for his choice (D195): the add-surgery sheet refused a save without it */
.chips[aria-invalid="true"] .chip { border-color: var(--danger); }
/* ================================================================ Waiting list (D52) and the surgeon's remarks */
/* B8: a grid item is as wide as its longest unbroken line by default; a long remark widened the card past its
   day column. Cards are held to the column, and the remark stays one line ending in «…» (full text on the case). */
.sx-card { min-width: 0; }
/* D65: the week is seven rows, not seven tall columns (Omar picked option 2). The day on the right, its surgeries
   side by side at a readable width, a row as tall as its cards. Month view and the phone agenda are unchanged. */
.sx-week { grid-template-columns: minmax(0, 1fr); }
.sx-day { flex-direction: row; align-items: stretch; min-height: 64px; border-inline-start: 0; border-top: 1px solid var(--line); }
.sx-day:first-child { border-top: 0; }
.sx-dh { flex: none; width: 104px; flex-direction: row; justify-content: flex-start; gap: 8px; padding: 12px; border-bottom: 0; border-inline-end: 1px solid var(--line); }
.sx-dh .wd { font-size: var(--fs-sm); }
.sx-list { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; padding: 8px; }
.sx-list > .sx-card { width: 224px; max-width: 100%; }
.sx-add { align-self: center; margin: 0 12px; }
/* D64: a past surgery kept as a record: quiet, dashed, not draggable */
/* D134: the colours a center can have beyond the first three (navy cA, sky cB, white cC of demo.css). A dark one is
   drawn with cA (white text), a light one with cB; here only its fill. Before the record and done looks, which win. */
.sx-card.c-teal, .sx-chip.c-teal, .sx-sw.c-teal { background: #0f6b6b; border-color: #0f6b6b; }
.sx-card.c-plum, .sx-chip.c-plum, .sx-sw.c-plum { background: #5b3a8c; border-color: #5b3a8c; }
.sx-card.c-slate, .sx-chip.c-slate, .sx-sw.c-slate { background: #3f5166; border-color: #3f5166; }
.sx-card.c-mint, .sx-chip.c-mint { background: #dcf2e8; border-color: #b4dfcb; }
.sx-card.c-sand, .sx-chip.c-sand { background: #f5ead6; border-color: #e4d0a8; }
.sx-sw.c-mint { background: #dcf2e8; box-shadow: inset 0 0 0 1px #7fc4a4; }
.sx-sw.c-sand { background: #f5ead6; box-shadow: inset 0 0 0 1px #cfb37a; }
/* D143: the two outcomes of cancelling a surgery */
.cx-opts { display: grid; gap: var(--s2); margin-bottom: var(--s4); }
.cx-opt { display: flex; align-items: center; gap: var(--s3); width: 100%; padding: var(--s3) var(--s4); border: 1.5px solid var(--line-2); border-radius: 14px; background: var(--white); text-align: start; cursor: pointer; }
.cx-opt[aria-checked="true"] { border-color: var(--navy); background: var(--mist-2); }
.cx-opt .row-main > b { display: block; font-size: var(--fs-md); }
.cx-opt .row-main > span { display: block; font-size: var(--fs-sm); color: var(--ink-3); }
.cx-dot { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line-2); background: var(--white); }
.cx-opt[aria-checked="true"] .cx-dot { border-color: var(--navy); box-shadow: inset 0 0 0 4px var(--white); background: var(--navy); }
/* The history page: its filters, and one row per surgery */
.hs-filters { display: grid; gap: var(--s3); margin-bottom: var(--s4); }
.hs-q { width: 100%; }
.hs-range { display: flex; flex-wrap: wrap; gap: var(--s3); }
.hs-d { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-sm); color: var(--ink-3); }
.hs-d .input { min-height: 40px; }
.hs-total { margin: 0 0 var(--s2); font-size: var(--fs-sm); font-weight: 600; color: var(--ink-3); }
.hs-list { display: grid; gap: var(--s2); }
.hs-row { display: flex; align-items: center; gap: var(--s3); width: 100%; min-width: 0; padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: 14px; background: var(--white); text-align: start; cursor: pointer; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.hs-row:hover { border-color: var(--sky); box-shadow: var(--shadow-1); }
.hs-row.is-off { cursor: default; background: var(--paper); }
.hs-row.is-off:hover { border-color: var(--line); box-shadow: none; }
.hs-main { flex: 1 1 0; min-width: 0; display: grid; gap: 2px; }
.hs-name { font-size: var(--fs-md); font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-proc, .hs-next, .hs-cen { font-size: var(--fs-xs); color: var(--ink-3); }
.hs-side { flex: none; display: grid; gap: 2px; justify-items: end; text-align: end; }
.hs-date { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.hs-cen .sx-sw { margin-inline-end: 4px; }
.hs-tag { flex: none; }
.hs-more { margin-top: var(--s3); }
@media (max-width: 599px) {
  .hs-row { flex-wrap: wrap; }
  .hs-side { flex: 1 1 100%; order: 3; justify-items: start; text-align: start; grid-auto-flow: column; justify-content: start; gap: var(--s3); } }
/* D135: the two kinds of a center's coordinators, each under its heading */
.coord-h { margin: var(--s4) 0 0; padding-top: var(--s3); border-top: 1px solid var(--line); font-size: var(--fs-sm); font-weight: 700; color: var(--ink); }
/* the palette in a center's sheet, and the swatch beside its name */
.cpal { display: flex; flex-wrap: wrap; gap: var(--s2); }
.cpal-b { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 2px solid transparent; background: none; cursor: pointer; }
.cpal-b .sx-sw { width: 28px; height: 28px; border-radius: 50%; margin: 0; }
.cpal-b[aria-checked="true"] { border-color: var(--navy); }
.cpal-b:hover { border-color: var(--line-2); }
.cpal-b[aria-checked="true"]:hover { border-color: var(--navy); }
.pcard-head .sx-sw { margin-inline-end: 6px; vertical-align: -1px; }
.sx-card.is-record, .sx-chip.is-record { background: var(--white); color: var(--ink-2); border: 1.5px dashed var(--line-2); opacity: 0.85; cursor: pointer; }
.sx-card.is-record .sx-proc, .sx-card.is-record .sx-note { color: var(--ink-3); }
.st-record .sx-dot { background: var(--line-2); }
.sx-note { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 11px; line-height: 1.5; color: var(--ink-3); }
.sx-note > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-note .ic { flex: none; }
.sx-card.cA .sx-note { color: #c8dcf2; }
.sx-wide .sx-note { font-size: var(--fs-xs); }
.sx-chip-rm { flex: none; display: inline-flex; margin-inline-start: auto; opacity: 0.7; }
/* the patient asked on WhatsApp to move his surgery date: until the surgery is moved */
.sx-chg { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; max-width: 100%; min-width: 0; padding: 1px 7px; border-radius: var(--r-pill); background: var(--attn-bg); color: var(--attn); font-size: 11px; font-weight: 600; line-height: 1.6; }
.sx-chg > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-chg .ic { flex: none; }
.sx-wide .sx-chg { font-size: var(--fs-xs); }
.sx-chip-chg { flex: none; display: inline-grid; place-items: center; width: 16px; height: 16px; margin-inline-start: auto; border-radius: 50%; background: var(--attn-bg); color: var(--attn); }
.sx-chip-chg + .sx-chip-rm { margin-inline-start: 2px; }
.sx-chip-un { margin-inline-start: auto; }
.sx-layout { display: grid; gap: var(--s4); }
.sx-cal { min-width: 0; }
@media (min-width: 1400px) {
  .main > .view:has(.sx-layout) { max-width: 1240px; }
  .sx-layout { grid-template-columns: minmax(0, 1fr) 232px; align-items: start; }
  .sx-layout > .sx-side { grid-column: 2; grid-row: 1; position: sticky; top: var(--s5); max-height: calc(100vh - 48px); overflow: auto; }
  .sx-layout > .sx-cal { grid-column: 1; grid-row: 1; } }
/* nothing beside the calendar (a member has no reminders, and the list is not beside it): the calendar alone */
.sx-layout.no-side { grid-template-columns: minmax(0, 1fr); }
.wl { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); box-shadow: var(--shadow-1); padding: var(--s3); }
.wl-head { display: flex; align-items: center; gap: var(--s2); color: var(--navy); }
.wl-head h2 { margin: 0; font-size: var(--fs-sm); font-weight: 700; color: var(--ink); }
.wl-count { min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--r-pill); display: inline-grid; place-items: center; background: var(--mist); color: var(--navy); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* a group of the waiting list: a box of its own, its head a bar that folds it */
.wl-group { min-width: 0; border: 1px solid var(--line-2); border-radius: 12px; background: var(--white); overflow: hidden; }
.wl-gh { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 0 var(--s3); background: var(--mist); color: var(--navy); font-size: var(--fs-xs); font-weight: 700; text-align: start; cursor: pointer; }
.wl-gh:hover { background: var(--line); }
.wl-gh:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.wl-gh .sx-sw { margin: 0; }
.wl-gt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-gn { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); display: inline-grid; place-items: center; background: var(--white); color: var(--navy); font-size: 11px; font-variant-numeric: tabular-nums; }
.wl-gh .wl-chev { margin-inline-start: auto; flex: none; transition: transform var(--t-fast) var(--ease); }
.wl-gh[aria-expanded="true"] .wl-chev { transform: rotate(180deg); }
.wl-glist { display: grid; gap: var(--s2); padding: var(--s2); }
.wl-empty { margin: 0; padding: var(--s1) 0; font-size: var(--fs-xs); color: var(--ink-3); }
/* The hand of the system's grab cursor is black and crude on Windows (Omar, 2026-10-06): a card that can be dragged
   keeps the ordinary pointing hand, also while it is carried (the card itself follows the pointer). */
.sx-card[data-drag], .sx-chip[data-drag] { cursor: pointer; }
body.sx-dragging, body.sx-dragging * { cursor: pointer !important; }
.wl-mark { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; padding: 0 6px; border-radius: var(--r-pill); background: var(--ok-bg); color: var(--ok); font-size: 11px; font-weight: 600; }
.wl-mark.is-off { background: var(--mist-2); color: var(--ink-3); }
.wl-phone { margin: var(--s3) 0; padding: 0; overflow: hidden; }
.wl-toggle { display: flex; align-items: center; gap: var(--s2); width: 100%; min-height: 52px; padding: 0 var(--s3); color: var(--navy); text-align: start; }
.wl-toggle b { font-size: var(--fs-sm); color: var(--ink); }
.wl-toggle .wl-chev { margin-inline-start: auto; color: var(--ink-3); transition: transform var(--t-fast) var(--ease); }
.wl-toggle[aria-expanded="true"] .wl-chev { transform: rotate(180deg); }
.rm-field { margin-top: var(--s4); }
textarea.input.rm-ta { min-height: 72px; font-size: var(--fs-sm); line-height: 1.7; }
.rm-field .hint { display: flex; align-items: center; gap: 4px; margin-top: var(--s1); }
.rm-save { margin-top: var(--s2); }
.inl-lock { flex: none; color: var(--navy-2); }
.af-when { margin-top: var(--s2); }
.af-when .switch-row { min-height: 56px; }
.af-when .mv-chat { margin-top: var(--s2); }

/* Patient file link (ملف المرضى) in the surgeries toolbar */
.sx-export { min-height: 44px; white-space: nowrap; }
.iconbtn.sx-export { width: 44px; height: 44px; border: 1px solid var(--line, #d9e2ec); color: var(--navy); }

/* A protocol that holds patients' messages (the approval gate): the lines at the top of the protocols page. */
.held-notes { display: grid; gap: var(--s2); margin-bottom: var(--s4); }
.held-note { display: block; color: inherit; text-decoration: none; border-radius: var(--r-md); }
.held-note:hover .note { border-color: var(--attn); }
.held-note .note { font-size: var(--fs-sm); }
/* who waits for «بروتوكول جديد»: one note at the top of the calendar and of the protocols page; on the calendar a
   button beside it opens the protocols (it goes under the note where the two do not fit on one line) */
.wn-banner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-bottom: var(--s4); }
.wn-banner .note { flex: 1 1 280px; min-width: 0; font-size: var(--fs-sm); }
.wn-banner .wn-go { flex: none; text-decoration: none; }
/* D282: the frozen dashboard's banner (app.js frozenHTML), at the top of every page: under the phone's top bar, beside
   the computer's side menu; the button goes under the sentence where the two do not fit on one line */
.frz { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); padding: var(--s3) var(--s4); background: var(--danger-bg); border-bottom: 1px solid #f0c4c4; color: #7a1f1f; }
.frz > .ic { flex: none; color: var(--danger); }  /* D286: red, not amber */
.frz-t { flex: 1 1 220px; min-width: 0; margin: 0; font-size: var(--fs-sm); font-weight: 600; line-height: 1.7; }
.frz-go { flex: none; }
@media (min-width: 1024px) { .shell > .frz-slot .frz { margin-inline-start: var(--rail); padding-inline: var(--s7); } }
/* D237: the bar of a support session from the console, at the top of every page it opens (app.js supBarHTML), in
   the brand's navy so it is never mistaken for the surgeon's own dashboard; and the support view of cases */
.sup-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); padding: var(--s2) var(--s4); background: var(--navy); color: var(--white, #fff); }
.sup-t { flex: 1 1 220px; min-width: 0; font-size: var(--fs-sm); font-weight: 600; line-height: 1.7; }
.sup-go { flex: none; }
@media (min-width: 1024px) { .shell > .sup-slot .sup-bar { margin-inline-start: var(--rail); padding-inline: var(--s7); } }
.sup-cases { list-style: none; margin: 0; padding: 0; }
.sup-case { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); padding: var(--s3) var(--s4); border-top: 1px solid var(--line, #e3e7ec); }
.sup-case:first-child { border-top: 0; }
.sup-case .row-main { flex: 1 1 200px; min-width: 0; }
.sup-case-tags { display: flex; flex-wrap: wrap; gap: var(--s1); }
/* Billing stage 2: a renewal that failed (app.js billBannerHTML), the owner's alone, at the top of every page in the
   frozen banner's place and shape; amber, as the service goes on (design 6.2), with the method button */
.bnr { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); padding: var(--s3) var(--s4); background: var(--attn-bg); border-bottom: 1px solid #ecd3a8; color: #6b3f0c; }
.bnr > .ic { flex: none; color: var(--attn); }
.bnr-t { flex: 1 1 220px; min-width: 0; margin: 0; font-size: var(--fs-sm); font-weight: 600; line-height: 1.7; }
.bnr-go { flex: none; }
@media (min-width: 1024px) { .shell > .bnr-slot .bnr { margin-inline-start: var(--rail); padding-inline: var(--s7); } }
/* D285: while frozen the page keeps its own colours; only a control that acts looks off (app.js freezeMarks). A
   button keeps the app's own disabled look (.btn[aria-disabled]); anything else is faded and still readable. A card
   that cannot be dragged scrolls the page under a finger. */
.is-frozen .frz-off { cursor: not-allowed; }
.is-frozen .frz-off:not(.btn) { opacity: 0.5; }
.is-frozen [data-drag] { touch-action: auto; -webkit-user-select: text; user-select: text; }

/* ================================================================ The waiting list as a screen of its own (the
   mockup docs/brainstorm/v2/mockups/waitlist-v1): the two tabs of «جدول العمليات», the list, and the list beside the
   calendar on a wide screen. Every new name carries wt. */
.wt-tabs { display: flex; align-items: flex-end; gap: var(--s3); margin: 0 0 var(--s4); border-bottom: 1px solid var(--line); min-width: 0; }
.wt-tablist { display: flex; gap: var(--s2); min-width: 0; }
.wt-tab { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 var(--s4); margin-bottom: -1px; border-bottom: 3px solid transparent; font-size: var(--fs-md); font-weight: 600; color: var(--ink-3); white-space: nowrap; transition: color var(--t-fast), border-color var(--t-fast); }
.wt-tab:hover { color: var(--navy); }
.wt-tab[aria-selected="true"] { color: var(--navy); border-bottom-color: var(--navy); }
.wt-tab:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; border-radius: 8px; }
/* a surgery carried over the waiting tab: it can be dropped there, as on the list beside the calendar */
.wt-tab.is-over { color: var(--navy); background: var(--mist); box-shadow: inset 0 0 0 2px var(--blue); border-radius: 10px 10px 0 0; }
@media (max-width: 599px) { .wt-tablist { flex: 1 1 auto; } .wt-tab { flex: 1 1 0; padding: 0 var(--s2); font-size: var(--fs-sm); } }
/* the switch that keeps the list beside the calendar (a wide screen only) */
.wt-beside { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; margin-inline-start: auto; padding: 0 var(--s1); font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.wt-beside:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 8px; }
/* the calendar with the list beside it: about 60 / 40. His reminders stay under the list, in the same column. */
@media (min-width: 1200px) {
  .main > .view:has(.wt-tabs) { max-width: 1360px; }
  .sx-layout.wt-split { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
  .sx-layout.wt-split > .sx-side { grid-column: 2; grid-row: 1; position: sticky; top: var(--s5); max-height: calc(100vh - 48px); overflow: auto; overscroll-behavior: contain; }
  .sx-layout.wt-split > .sx-cal { grid-column: 1; grid-row: 1; }
  .wt-split .rmd-panel .rmd-list { grid-template-columns: minmax(0, 1fr); max-height: none; overflow: visible; } }
/* beside the list the calendar's own bar sits over the calendar: its tools go under its arrows where the two do
   not fit on one line */
.wt-split .sx-bar { row-gap: var(--s2); }
.wt-split .sx-tools { flex-wrap: wrap; }
.wld-states { flex-wrap: wrap; justify-content: flex-end; }
/* a long list scrolls inside the column, so his reminders under it stay within reach */
.wt-side > #wt-out { max-height: max(240px, calc(100vh - 312px)); overflow-y: auto; overscroll-behavior: contain; margin-inline: calc(var(--s1) * -1); padding-inline: var(--s1); }
.wt-side .wt-ctl { gap: var(--s2); margin-bottom: var(--s2); }
.wt-side .wt-q .input, .wt-side .wt-filter { min-height: 40px; }
.wt-side .wt-ctl-row { flex-wrap: nowrap; gap: var(--s2); }
.wt-side:has(.wt-tags) > #wt-out { max-height: max(240px, calc(100vh - 350px)); }
.wt-side .wt-q { max-width: none; }
/* the one row of controls: the search, «فرز» and the add button; under it, only while the list is narrowed, what
   narrows it */
.wt-ctl { display: grid; gap: var(--s2); margin-bottom: var(--s3); min-width: 0; }
.wt-ctl > * { min-width: 0; }
.wt-ctl-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); min-width: 0; }
.wt-q { position: relative; display: block; flex: 1 1 200px; max-width: 380px; min-width: 0; }
.wt-q .ic { position: absolute; inset-inline-start: 14px; top: 50%; margin-top: -9px; color: var(--ink-3); pointer-events: none; }
.wt-q .input { min-height: 44px; padding-inline-start: 42px; font-size: var(--fs-sm); }
.wt-q .input::-webkit-search-cancel-button { cursor: pointer; }
.wt-filter { flex: none; min-height: 44px; gap: 6px; }
.wt-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill); background: var(--navy); color: var(--white); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.wt-add { margin-inline-start: auto; }
.chip .wt-n { flex: none; margin-inline-start: 6px; font-weight: 700; font-variant-numeric: tabular-nums; opacity: 0.7; }
/* a choice of «فرز»: a touch's 44 px; and it never leaves the sheet: a long operation's name (80 letters may be
   typed) goes onto a second line, whole, with its number in sight */
.sheet .chip[data-act^="wt-"] { max-width: 100%; min-width: 0; min-height: 44px; padding-block: 8px; border-radius: 22px; white-space: normal; text-align: start; line-height: 1.5; }
.wt-tags { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.wt-tag { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 30px; padding-inline: 10px 1px; border-radius: var(--r-pill); background: var(--mist); color: var(--navy); font-size: var(--fs-xs); font-weight: 600; }
.wt-tag > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wt-x { position: relative; flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--navy-2); cursor: pointer; }
/* 28 px to the eye, 44 to a finger: the line of tags stays as slim as it is */
.wt-x::after { content: ""; position: absolute; inset: -8px; }
.wt-x:hover { background: var(--white); color: var(--navy); }
.wt-x:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
/* the switch of «فرز» while one operation is picked: there, and off duty */
.switch-row[aria-disabled="true"] { opacity: 0.5; cursor: default; }
/* the operations, each under its bar; a group's rows are one surface, a hairline between them */
.wt-groups { display: grid; gap: var(--s3); min-width: 0; }
.wt-groups .wl-gh { min-height: 44px; padding: 0 var(--s4); font-size: var(--fs-sm); }
.wt-groups .wl-gn { min-width: 24px; height: 22px; font-size: 12px; font-weight: 700; }
.wt-groups .wl-glist { display: block; padding: 0; }
.wt-flat { min-width: 0; border: 1px solid var(--line-2); border-radius: 12px; background: var(--white); overflow: hidden; }
/* One waiting patient, one line. On a computer's waiting tab: columns the eye can run down (the name and the
   marks | the side | the center | how long he waits and the day he was added | the date button). */
.wt-row { position: relative; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1.5fr) 56px minmax(0, 1fr) auto auto; align-items: center; gap: 0 var(--s4); min-width: 0; min-height: 48px; padding: 5px var(--s4); border-top: 1px solid var(--line); background: var(--white); text-align: start; cursor: pointer; transition: background var(--t-fast), opacity var(--t-fast); }
.wt-row:first-child { border-top: 0; }
.wt-row:hover { background: var(--mist-2); }
.wt-row:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.wt-who { display: flex; align-items: center; gap: 6px; min-width: 0; }
.wt-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9375rem; font-weight: 700; line-height: 1.6; color: var(--ink); }
/* the small states after the name: icons that say their words to a pointer and to a screen reader */
.wt-mk { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; }
.wt-mk.is-ok { background: var(--ok-bg); color: var(--ok); }
.wt-mk.is-off { background: var(--mist-2); color: var(--ink-3); }
.wt-mk.sx-untold { background: var(--danger); color: var(--white); }
.wt-mk.is-note { background: var(--mist); color: var(--navy-2); }
.wt-sd { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.wt-cen { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--fs-xs); color: var(--ink-3); white-space: nowrap; }
.wt-cen > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wt-cen .sx-sw { margin: 0; flex: none; }
.wt-when { display: grid; grid-template-columns: 104px 78px; align-items: center; white-space: nowrap; }
.wt-since { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.wt-date { font-size: var(--fs-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.wt-pick { min-height: 36px; }
/* all of them as one list (the «بدون تصنيف» chip): no bar says the operation, so the table has a column for it */
.wt-row.has-op { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.3fr) 56px minmax(0, 1fr) auto auto; }
.wt-opn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); }
/* Under 1366 px that table has no room for a column of operations (names, operations and centers were all cut):
   it keeps the columns of the grouped table, and each row's operation goes under its name. */
@media (max-width: 1365px) {
  .wt-row.has-op { grid-template-columns: minmax(0, 1.5fr) 56px minmax(0, 1fr) auto auto; }
  .wt-row.has-op .wt-opn { grid-column: 1; grid-row: 2; align-self: start; line-height: 1.5; }
  .wt-row.has-op .wt-who { grid-column: 1; grid-row: 1; align-self: end; }
  .wt-row.has-op .wt-sd { grid-column: 2; grid-row: 1 / span 2; }
  .wt-row.has-op .wt-cen { grid-column: 3; grid-row: 1 / span 2; }
  .wt-row.has-op .wt-when { grid-column: 4; grid-row: 1 / span 2; }
  .wt-row.has-op .wt-pick { grid-column: 5; grid-row: 1 / span 2; }
}
/* a narrower page (the menu beside it, under 1200 px): the day he was added goes under the wait */
@media (max-width: 1199px) { .wt-row { gap: 0 var(--s3); } .wt-when { grid-template-columns: 96px; line-height: 1.4; } }
/* A phone, and the column beside the calendar: a list of names. The center's colour (more than one center), the
   name, the marks, and at the row's end how long he waits; the rest is in his sheet, one press away. */
.wt-row.is-compact { grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--s3); min-height: 47px; padding: 0 var(--s3); }
.wt-row.is-compact .wt-since { font-weight: 500; color: var(--ink-3); }
.wt-dot { width: 10px; height: 10px; margin: 0; border-radius: 50%; }
/* «بدون مركز» is no circle (a pale circle is a center's colour, and a ring is the white center's): a short line */
.wt-dot.is-none { border-radius: 0; box-shadow: none; background: linear-gradient(var(--ink-3), var(--ink-3)) center / 8px 2px no-repeat; }
button.chip[aria-checked="true"] .wt-dot.is-none { box-shadow: none; background-image: linear-gradient(var(--white), var(--white)); }
/* a row he can carry to a day of the calendar (the hand stays the pointing one, as on a surgery's card) */
.wt-row[data-drag] { cursor: pointer; touch-action: none; -webkit-user-select: none; user-select: none; }
.wt-row.is-dragging { opacity: 0.28; }
/* position: the row's own `relative` (above) would win over the ghost's `fixed` and throw it off the screen */
.wt-row.sx-ghost { position: fixed; border: 1px solid var(--sky); border-radius: 12px; background: var(--white); }
.wt-row.sx-ghost .wt-pick { visibility: hidden; }
.wt-row.fly { animation: sx-land 900ms var(--ease-out); }
/* in the column beside the calendar the bars are slim, and the column itself is the surface */
.wt-side .wt-groups { gap: var(--s2); }
.wt-side .wl-group { border: 0; border-radius: 0; overflow: visible; }
.wt-side .wt-groups .wl-gh { min-height: 32px; padding: 0 var(--s3); border-radius: 8px; font-size: var(--fs-xs); }
.wt-side .wt-flat { border: 0; border-radius: 0; }
.wt-side .wt-row { padding-inline: var(--s2); }
/* under 900 px: the search takes what the two buttons beside it leave */
@media (max-width: 899px) {
  .wt-ctl-row { flex-wrap: nowrap; gap: var(--s2); }
  .wt-q { flex: 1 1 0; max-width: none; }
  .wt-q .input { padding-inline: 38px var(--s2); }
  .wt-q .ic { inset-inline-start: 12px; }
  .wt-add { margin-inline-start: 0; min-height: 44px; }
}
/* a phone: the add button is a plus beside the search box, and the rows of controls sit closer, so the names start
   high on the screen */
.wt-add.is-ic { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--mist); color: var(--navy); }
@media (max-width: 599px) {
  .wt-tabs { margin-bottom: 6px; }
  .wt-ctl { gap: 6px; margin-bottom: 6px; }
  .wt-filter { padding: 0 var(--s3); }
}
/* nobody waits, and nobody matches */
.wt-empty { display: grid; justify-items: center; gap: var(--s3); padding: var(--s7) var(--s4); border: 1.5px dashed var(--line-2); border-radius: var(--r-card); background: var(--white); text-align: center; color: var(--ink-3); font-size: var(--fs-sm); }
.wt-empty .wt-add { margin: 0; width: auto; }
.wt-side .wt-empty { padding: var(--s5) var(--s3); border: 0; }

/* ================================================================ D115: three calendar views (month, week, day) */
.sx-tools .seg { min-width: 232px; }
.sx-modes { margin-top: var(--s3); }
.sx-modes .seg { width: 100%; }
/* the day on a computer: one row, its surgeries as wide cards side by side */
.sx-one .sx-day { min-height: 220px; }
.sx-one .sx-list > .sx-card { width: 320px; }
.sx-one .ag-empty { width: 100%; border: 0; }
/* the month on a phone: a cell is the day and how many surgeries it has; a tap opens that day */
.mp .mp-cell { min-height: 56px; padding: 6px 2px; display: flex; flex-direction: column; align-items: center; gap: 3px; border-inline-start: 1px solid var(--line); border-top: 1px solid var(--line); background: var(--white); }
.mp .mp-cell:nth-child(7n + 1) { border-inline-start: 0; }
.mp .mp-cell:nth-child(-n + 7) { border-top: 0; }
.mp .mp-cell .dn { min-width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; }
.mp .mp-cell.wkend .dn { color: var(--ink-3); }
.mp .mp-cell.other { background: var(--paper); }
.mp .mp-cell.other .dn { color: var(--line-2); }
.mp .mp-cell.today .dn { background: var(--navy); color: var(--white); }
/* D139: the picked day, and its surgeries under the month */
.mp .mp-cell[aria-pressed="true"] { background: var(--mist); box-shadow: inset 0 0 0 2px var(--blue); }
.mp-day { margin-top: var(--s3); }
.mp-hint { margin: var(--s3) 0 0; text-align: center; }
.mp .mp-n { min-width: 20px; height: 18px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; font-size: 11px; font-weight: 700; background: var(--mist); color: var(--navy); font-variant-numeric: tabular-nums; }
.mp .mp-n:empty { background: transparent; }
/* a mouse drags at every width: the days of the narrow layout take a drop */
/* a surgery carried over the waiting list beside the calendar: it can be dropped there */
.wl.is-over { background: var(--mist); box-shadow: inset 0 0 0 2px var(--blue); }
.ag-day.is-over, .ag-d.is-over, .mp-cell.is-over { background: var(--mist); box-shadow: inset 0 0 0 2px var(--blue); border-radius: 12px; }
.ag-day.is-bad, .ag-d.is-bad, .mp-cell.is-bad { background: var(--danger-bg); border-radius: 12px; }
/* a surgery without a center: its center is picked in the sheet, so its coordinator is told */
.mv-pick { display: grid; gap: 6px; margin-top: var(--s2); }
.mv-pick .chips { flex-wrap: wrap; }

/* ================================================================ Protocol editor: a form with a read-only WhatsApp preview (D121)
   Two panes on a computer: the form first (right, in the page's right-to-left order), the preview second, kept in
   view while the form scrolls. One column below 1024px, where the preview sits under the open row's fields. */
.pf-grid { margin-top: var(--s5); }
/* a layout drawn for a computer and then narrowed falls back to one column until the page draws it again */
.pf-side { margin-top: var(--s5); }
@media (min-width: 1024px) {
  .pf-grid.is-wide { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s6); align-items: start; }
  .pf-side { position: sticky; top: var(--s5); margin-top: 0; }
}
/* the three numbered questions */
.pf-step + .pf-step { margin-top: var(--s6); }
.pf-q { display: flex; align-items: center; gap: var(--s3); margin: 0 0 var(--s3); font-size: var(--fs-lg); font-weight: 700; line-height: 1.4; color: var(--ink); }
.pf-num { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--navy); color: var(--white); font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; }
.pf-hour { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3); font-weight: 600; color: var(--ink-2); }
.pf-form .input.is-bad { border-color: var(--danger); }
.pf-sel { width: auto; min-width: 92px; padding: 0 var(--s3); font: inherit; font-weight: 600; color: var(--ink); cursor: pointer; }
/* the list: one row open at a time */
.pf-list-h { margin: 0 0 var(--s3); }
.pf-list { display: grid; gap: var(--s2); }
/* a row that opens is brought into view under the phone's top bar */
.pf-row { scroll-margin-top: calc(var(--topbar) + var(--s3)); min-width: 0; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--white); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.pf-row.is-open { border-color: var(--navy-2); box-shadow: var(--shadow-2); }
.pf-row-head { display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 56px; padding: var(--s2) var(--s4); border-radius: var(--r-md); text-align: start; transition: background var(--t-fast); }
.pf-row-head:hover { background: var(--mist-2); }
.pf-row-t { flex: none; min-width: 104px; display: flex; flex-direction: column; line-height: 1.45; }
.pf-row-t b { font-size: var(--fs-sm); font-weight: 700; color: var(--navy); }
.pf-row-t small { font-size: var(--fs-xs); color: var(--ink-3); }
.pf-snip { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); color: var(--ink-3); }
.pf-row-head .chev { flex: none; color: var(--ink-3); transition: transform var(--t-med) var(--ease); }
.pf-row-head[aria-expanded="true"] .chev { transform: rotate(180deg); }
.pf-row-body { min-width: 0; padding: var(--s1) var(--s4) var(--s4); border-top: 1px solid var(--line); }
.pf-none { margin: 0; padding: var(--s4); border: 1.5px dashed var(--line-2); border-radius: var(--r-md); text-align: center; font-size: var(--fs-sm); color: var(--ink-3); }
.pf-add { margin-top: var(--s3); }
.pf-add-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); }
.pf-add-l { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); }
.pf-add-n { width: 76px; padding: 0 var(--s2); text-align: center; font-weight: 600; }
/* the fields of the open row */
.pf-field { margin-top: var(--s3); }
.pf-field .label { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); }
.pf-sub { margin: -4px 0 var(--s2); }
.pf-ta { min-height: 72px; padding: var(--s3) var(--s4); border: 1px solid var(--line-2); border-radius: var(--r-md); font-size: var(--fs-md); line-height: 1.8; }
.pf-ta[data-one] { min-height: 48px; padding-block: 9px; }  /* a question: one line that wraps */
.pf-under { display: flex; align-items: flex-start; gap: var(--s2); min-height: 20px; margin-top: 4px; }
.pf-ghint { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); line-height: 1.5; color: #8a5a00; }
.pf-left { margin-inline-start: auto; flex: none; font-size: var(--fs-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pf-left.over, .pf-n.over { color: var(--danger); font-weight: 700; }
.pf-tools { display: flex; flex-wrap: wrap; gap: 0 var(--s3); }
.pf-quiet { min-height: 44px; }
.pf-quiet.danger { color: var(--danger); }
.pf-quiet.danger:hover { background: var(--danger-bg); color: var(--danger); }
.pf-link { margin-top: var(--s1); padding: var(--s3); border-radius: var(--r-md); background: var(--mist-2); border: 1px solid var(--line); }
.pf-link-row { display: flex; flex-wrap: wrap; gap: var(--s2); }
.pf-link-row .input { flex: 1 1 200px; min-width: 0; text-align: left; }
/* the questions of a day, as form rows */
.pf-ask, .pf-replies { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line); }
.pf-h { margin: 0; font-size: var(--fs-md); font-weight: 700; color: var(--ink); }
.pf-qcard { margin-top: var(--s3); padding: var(--s2) var(--s3) var(--s3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--mist-2); }
.pf-qcard.pf-pain:not(.is-on) { padding-bottom: var(--s2); }
.pf-check { display: flex; align-items: center; gap: var(--s3); min-height: 44px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); cursor: pointer; }
.pf-check input { flex: none; width: 20px; height: 20px; accent-color: var(--navy); cursor: pointer; }
.pf-thr { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.pf-thr .pf-sel { min-width: 72px; }
.pf-rt { display: flex; align-items: center; flex-wrap: wrap; gap: 4px var(--s2); margin-top: var(--s2); }
.pf-rt .rt-l { flex: none; font-size: var(--fs-xs); font-weight: 600; color: var(--ink-3); }
.pf-rt .seg-rt { background: var(--white); box-shadow: 0 0 0 1px var(--line); }
.pf-qhead { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.pf-qhead b { font-size: var(--fs-sm); font-weight: 700; color: var(--navy); }
.pf-qacts { display: inline-flex; }
.pf-qacts .iconbtn, .pf-btn-row .iconbtn { flex: none; width: 44px; height: 44px; }
.pf-qcard .pf-field { margin-top: var(--s2); }
.pf-btns { display: grid; gap: var(--s3); margin-top: var(--s3); }
.pf-btn-row { display: flex; align-items: center; gap: var(--s1); }
.pf-btn-row .input { flex: 1; min-width: 0; }
.pf-n { flex: none; min-width: 40px; text-align: center; font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pf-cnote { display: flex; align-items: flex-start; gap: 6px; }
.pf-cnote .ic { flex: none; margin-top: 3px; }
.pf-addq { margin-top: var(--s3); }
.pf-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); margin-top: var(--s2); }
.pf-kind { display: flex; align-items: center; gap: var(--s2); min-height: 48px; padding: 0 var(--s3); border-radius: var(--r-md); border: 1.5px dashed var(--line-2); background: var(--white); color: var(--navy); font-size: var(--fs-sm); font-weight: 600; text-align: start; transition: background var(--t-fast), border-color var(--t-fast); }
.pf-kind:hover:not(:disabled) { background: var(--mist-2); border-color: var(--navy-2); }
.pf-kind:disabled { color: var(--ink-3); opacity: 0.55; }
.pf-tag { font-size: 11px; padding: 0 8px; }
.pf-pre { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); }
.pf-pre .stepper button { width: 44px; height: 44px; }
.pf-off { display: flex; flex-direction: column; gap: 2px; padding: var(--s3) 0; font-size: var(--fs-sm); line-height: 1.7; color: var(--ink-3); }
.pf-off b { color: var(--ink); }
.pf-wide { width: 100%; }
.pf-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--s3); margin-top: var(--s4); padding-top: var(--s2); border-top: 1px solid var(--line); }
.pf-more { margin-top: var(--s6); }
.pf-more .pe-morebtn { margin-top: 0; }
/* the operation's other names: one chip per name. The chip is the page's own in its wrapping row, and its remove button is the page's icon button, whole inside it */
.pf-aliases { list-style: none; margin: 0 0 var(--s2); padding: 0; }
.pf-aliases:empty { display: none; }
.pf-alias { max-width: 100%; padding: 0; padding-inline-start: 14px; gap: 2px; }
.pf-alias > span { min-width: 0; padding: 6px 0; overflow-wrap: anywhere; }
.pf-alias .iconbtn { flex: none; }
.pf-alias-row { display: flex; flex-wrap: wrap; gap: var(--s2); }
.pf-alias-row .input { flex: 1 1 200px; min-width: 0; }
/* the preview: a phone-shaped panel that shows the result only */
.pf-phone-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin-bottom: var(--s2); }
.pf-phone-head b { font-size: var(--fs-sm); font-weight: 700; color: var(--ink); }
.pf-ro { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; background: var(--mist); color: var(--navy-2); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
.pf-screen { padding: 8px; border-radius: 30px; background: var(--ink); box-shadow: var(--shadow-2); }
.pf-wa { margin-top: 0; border: 0; border-radius: 22px; cursor: default; }
/* beside the form the phone fits between the page's head and the save bar; a longer day scrolls inside it */
.pf-side .pf-wa { min-height: 320px; max-height: calc(100vh - 330px); max-height: calc(100dvh - 330px); overflow-y: auto; padding: 12px 10px 16px; }
.pf-row-body .pf-phone { margin-top: var(--s5); }
.pf-row-body .pf-screen { padding: 6px; border-radius: 22px; }
.pf-row-body .pf-wa { border-radius: 16px; min-height: 0; }
.pe-sub .pf-wa { border: 1px solid #e2dcd2; border-radius: 16px; }
.pf-wa .wa-col { width: 92%; }
@media (max-width: 639px) {
  .pf-row-head { padding-inline: var(--s3); }
  .pf-row-t { min-width: 92px; }
  .pf-row-body { padding-inline: var(--s3); }
  .pf-menu { grid-template-columns: 1fr; }
}

/* ================================================================ The surgeon's reminders (design 2026-10-06-reminders, section 4) */
/* His reminders: beside the calendar on a wide screen (under the waiting list when it is there), above it otherwise. */
.sx-side { display: grid; gap: var(--s3); align-content: start; min-width: 0; }
/* On the calendar a reminder is one line with a bell: a white card with a full navy outline (D131), where a surgery
   is a filled card. It is not dragged. */
.rmd-chip, .rmd-line, .rmd-row { display: flex; align-items: center; gap: 5px; min-width: 0; border: 1.5px solid var(--navy-2); background: var(--white); color: var(--navy); font-weight: 600; cursor: pointer; text-align: start; transition: box-shadow var(--t-fast), background var(--t-fast); }
.rmd-chip:hover, .rmd-line:hover, .rmd-row:hover { background: var(--mist-2); box-shadow: var(--shadow-1); }
/* the tick: a circle before the text; a press closes the reminder */
.rmd-chk { flex: none; display: grid; place-items: center; width: 18px; height: 18px; padding: 0; border-radius: 50%; border: 1.5px solid var(--navy-2); background: var(--white); color: transparent; cursor: pointer; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.rmd-chk:hover, .rmd-chk:focus-visible, .rmd-chk:disabled { background: var(--ok); border-color: var(--ok); color: var(--white); }
.rmd-chk .ic { stroke-width: 3; }
.wl-phone .rmd-chk, .ag-day .rmd-chk { width: 22px; height: 22px; }
.rmd-chip:focus-visible, .rmd-line:focus-visible, .rmd-row:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.rmd-chip .ic, .rmd-line .ic, .rmd-row .ic { flex: none; }
.rmd-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rmd-chip { min-height: 24px; padding: 1px 6px; border-radius: 6px; font-size: 11px; line-height: 1.3; }
.rmd-line { align-self: flex-start; padding: 6px 9px; border-radius: 10px; font-size: var(--fs-xs); line-height: 1.45; }
.sx-list > .rmd-line { width: 224px; max-width: 100%; }
.sx-one .sx-list > .rmd-line { width: 320px; }
.ag-day .rmd-line { margin-top: var(--s2); padding: 10px 12px; font-size: var(--fs-sm); }
.sx-more.rmd-more { display: inline-flex; align-items: center; gap: 3px; color: var(--navy-2); }
.sx-more.rmd-more:hover { background: var(--mist); }
/* the month on a phone: a small blue dot on a day that has reminders, beside its number of surgeries */
.mp .mp-cell { position: relative; }
.mp .rmd-dot { position: absolute; top: 7px; inset-inline-end: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
/* the panel under the waiting list: every open reminder, in its groups */
.rmd-panel .wl-head, .rmd-panel .wl-toggle { color: var(--navy); }
.rmd-list { display: grid; gap: var(--s3); margin-top: var(--s3); }
.wl-phone .rmd-list { margin: 0; padding: 0 var(--s3) var(--s3); }
.rmd-group { display: grid; gap: 4px; min-width: 0; }
.rmd-gh { margin: 0; font-size: 11px; font-weight: 700; color: var(--ink-3); }
/* its button with its words: at the end of the head; on a phone the first line of the opened list */
.rmd-newbtn { margin-inline-start: auto; min-height: 32px; padding: 0 var(--s3); gap: 4px; font-size: var(--fs-xs); white-space: nowrap; }
.wl-phone .rmd-newbtn { margin: 0; min-height: 40px; justify-content: center; font-size: var(--fs-sm); }
/* a row of the panel: one line, its day (a late or a coming one) at its end */
.rmd-row { padding: 6px 8px; border-radius: 8px; font-size: var(--fs-xs); line-height: 1.45; }
/* a day that passed is said in the page's red */
.rmd-when[data-late] { color: var(--danger); opacity: 1; }
.rmd-when { flex: none; margin-inline-start: auto; padding-inline-start: 6px; font-size: 11px; font-weight: 600; white-space: nowrap; opacity: 0.85; }
.wl-phone .rmd-row { padding: 10px 12px; font-size: var(--fs-sm); }
/* in the narrow column beside the calendar and on a phone: the text on two lines at most, its day on a line under it */
@media (min-width: 1400px), (max-width: 899px) {
  .rmd-row { flex-wrap: wrap; align-items: flex-start; }
  .rmd-row > .ic { margin-top: 2px; }
  .rmd-row .rmd-t { flex: 1 1 0; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere; }
  .rmd-when { flex: 0 0 100%; margin-inline-start: 0; padding-inline-start: 42px; } }
/* above the calendar (a laptop): the groups side by side, and a long list scrolls inside the panel, so the
   calendar stays where it is however many reminders are open */
@media (max-width: 1399px) and (min-width: 900px) {
  .rmd-panel .rmd-list { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); align-items: start; max-height: 176px; overflow-y: auto; } }
/* «الطلبات» (D321): the patients' open requests, before his reminders; and a patient's own on his sheet. A row: who,
   his operation and day, his own words, and «تم» at its end. */
.rq-panel .wl-head, .rq-panel .wl-toggle { color: var(--navy); }
.rq-list { display: grid; gap: var(--s2); margin-top: var(--s3); }
.wl-phone .rq-list { margin: 0; padding: 0 var(--s3) var(--s3); }
.rq-row { display: flex; align-items: flex-start; gap: var(--s2); min-width: 0; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--white); }
.rq-main { flex: 1 1 0; min-width: 0; display: grid; gap: 2px; font-size: var(--fs-xs); line-height: 1.5; }
.rq-name { font-size: var(--fs-sm); color: var(--ink); }
.rq-meta { color: var(--ink-3); }
.rq-text { margin: 0; color: var(--ink-2, var(--ink)); overflow-wrap: anywhere; }
.rq-done { flex: none; min-height: 36px; gap: 4px; white-space: nowrap; }
.wl-phone .rq-row { padding: 10px 12px; }
.wl-phone .rq-main { font-size: var(--fs-sm); }
.rq-sheet { margin-top: var(--s4); }
.rq-sheet .label { margin: 0; }
@media (max-width: 1399px) and (min-width: 900px) {
  .rq-panel .rq-list { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); align-items: start; max-height: 176px; overflow-y: auto; } }
/* «الردود» in the protocol editor: each reply a field, its «رجّع النص الأصلي» under it */
.pf-rp { margin-top: var(--s4); }
.pf-rp-one .pf-tools { margin-top: -6px; }
/* its button beside the surgery button, and its sheet */
.rmd-addbtn { white-space: nowrap; }
/* On a phone the two buttons and the file link no longer fit beside the arrows (the arrows wrapped into a column):
   the arrows and the dates share the first row, and the tools have a row of their own, the two buttons side by side. */
@media (max-width: 899px) {
  .sx-bar { grid-template-columns: minmax(0, 1fr); }
  .sx-range { width: auto; order: 0; margin: 0; margin-inline-start: var(--s2); }
  .sx-tools .sx-addbtn { flex: 1 1 0; justify-content: center; } }
textarea.input.rmd-ta { min-height: 88px; line-height: 1.7; }
.rmd-day { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); }
.rmd-day .af-date { flex: 1 1 200px; }
.rmd-acts { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.rmd-acts .btn { flex: 1 1 140px; }

/* ---------- The team (design 2026-10-04-team-and-access; addendum 2026-10-06). Every name carries tm; tr: the changes on a case */
/* a member's top bar: whose account he is in, and his own sheet behind his initial */
.top-me { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.top-with { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-xs); color: var(--ink-3); }
button.avatar { border: 0; cursor: pointer; font-family: inherit; flex: none; }
/* who is signed in, at the head of the side menu: one button, and its sheet holds the way out. The circle never
   shrinks; the name and the address are one line each, cut with dots (the address is left to right: its start shows). */
.rail-me { display: flex; align-items: center; gap: var(--s3); width: 100%; min-width: 0; margin-bottom: var(--s4); padding: var(--s2) var(--s3); border: 0; border-radius: var(--r-md); background: none; color: inherit; font-family: inherit; text-align: start; cursor: pointer; transition: background var(--t-fast); }
.rail-me:hover { background: var(--mist-2); }
.rail-me .avatar { flex: none; }
.rail-me .who { flex: 1; min-width: 0; line-height: 1.4; }
.rail-me .who b { display: block; font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-mail { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-xs); color: var(--ink-3); text-align: right; }
.acct-mail { overflow-wrap: anywhere; }
.rail .brand { margin-bottom: var(--s5); }
/* the sign-in screen's line for a visitor with no account */
.auth-new { font-size: var(--fs-sm); color: var(--ink-2); }
.auth-new a { color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* where a member may not be: one plain line */
.tm-refusal { margin-top: var(--s5); }
.tm-refusal > b { font-weight: 600; }
.tm-bar { display: flex; justify-content: flex-end; margin-bottom: var(--s4); }
.tm-list { display: grid; gap: var(--s3); }
@media (min-width: 900px) { .tm-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tm-card { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.tm-card.is-off { background: var(--paper); }
.tm-card.is-off .tm-top, .tm-card.is-off .tm-meta, .tm-card.is-off .tm-cens { opacity: 0.6; }
.tm-top { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.tm-top .row-main { min-width: 0; }
.tm-top .row-main > b { display: block; font-size: var(--fs-md); font-weight: 700; overflow-wrap: anywhere; }
.tm-top .row-main > span { display: block; font-size: var(--fs-sm); color: var(--ink-3); }
.tm-meta { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); font-size: var(--fs-sm); color: var(--ink-2); }
.tm-meta > span { min-width: 0; overflow-wrap: anywhere; }
.tm-cens, .tm-tags { display: flex; flex-wrap: wrap; gap: var(--s2); }
.tm-cen { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--ink-2); }
.tm-acts { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: auto; padding-top: var(--s3); border-top: 1px solid var(--line); }
.tm-acts .btn { flex: 1 1 auto; min-height: 44px; }
/* the sheet: a note under the role and the kind, and the switches as one list */
.tm-note { margin-top: var(--s2); }
.tm-perms .switch-row { min-height: 52px; border-top: 1px solid var(--line); }
.tm-perms .switch-row:first-of-type { border-top: 0; }
.tm-perms .switch-row .row-main > b { font-size: var(--fs-sm); }
.tm-perms .switch-row .row-main > span { display: block; font-size: var(--fs-xs); color: var(--ink-3); }
/* the invitation as it will be sent: long links wrap inside the bubble */
.tm-inv .bubble { overflow-wrap: anywhere; }
.tm-inv + .btn-text { margin-top: var(--s2); }
/* the changes on a case, oldest first */
.tr-group { margin-top: var(--s5); }
.tr-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s2); }
.tr-list > li { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.6; overflow-wrap: anywhere; }
.tr-list > li > .num { color: var(--ink-3); white-space: nowrap; }
/* the surgeon's control of a surgery's center */
.tr-cen { margin: 0 0 var(--s4); }
.tr-cen .tr-cen-save { margin-top: var(--s3); }
/* a note he reads and may not change */
.rm-read { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); white-space: pre-line; overflow-wrap: anywhere; }

/* The card for the discharge sheet (settings, #/settings/card): one card, black on white, centred on the paper. */
.pc-card { width: min(100%, 105mm); margin: 0 auto; padding: 9mm 8mm 7mm; background: #fff; color: #000; border: 1px solid var(--line); border-radius: var(--r-card); text-align: center; }
.pc-card p { margin: 0; color: #000; }
.pc-name { font-size: 20pt; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.pc-line { font-size: 13pt; font-weight: 500; margin-top: 3mm !important; }
.pc-qr { width: 58mm; max-width: 100%; aspect-ratio: 1; margin: 6mm auto 3mm; }
.pc-qr svg { display: block; width: 100%; height: 100%; }
.pc-num { font-size: 16pt; font-weight: 700; letter-spacing: 0.02em; unicode-bidi: isolate; }
.pc-mark { margin-top: 6mm !important; }
.pc-mark .logo { font-size: 12pt; color: #000; }
/* Settings: one column at every width, each card under the one above it (Omar, 2026-10-16: «أبغاها كلها فوق بعض…
   ما أبغى بطاقة يمين وبطاقة يسار»), at a reading width. */
.set-grid.set-cols { display: flex; flex-direction: column; align-items: stretch; gap: var(--s4); max-width: 760px; }
.set-grid.set-cols > .card { margin: 0; width: 100%; max-width: none; align-self: stretch; }

@media print {
  @page { margin: 12mm; }
  html, body { background: #fff !important; }
  .rail, .topbar, .tabbar, .pc-head, .frz-slot, .sup-slot, .bnr-slot, #toast-root, #sheet-root, .skip { display: none !important; }
  .main { padding: 0 !important; margin: 0 !important; max-width: none !important; }
  .view { animation: none !important; }
  .pc-card, .pc-card * { visibility: visible !important; }
  .pc-card { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 105mm; border: 0.3mm solid #000; border-radius: 3mm; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* «تجهيز ديدن» (D309): the card at the top of the calendar, as the design's mockup draws it (onboarding-v1, screen
   2). Under 600 px its sides come in; a row's name and chips wrap, its state stays one short line. */
.tjz { margin-bottom: var(--s4); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); overflow: hidden; }
.tjz-head { display: flex; align-items: center; gap: var(--s3); padding: var(--s4) var(--s5) var(--s2); }
.tjz-head h2 { margin: 0; font-size: var(--fs-lg); color: var(--navy); }
.tjz-count { font-size: var(--fs-sm); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tjz-fold { margin-inline-start: auto; min-height: 36px; font-size: var(--fs-xs); }
.tjz-prog { height: 6px; margin: 0 var(--s5) var(--s3); background: var(--mist); border-radius: var(--r-pill); overflow: hidden; }
.tjz-prog i { display: block; height: 100%; background: var(--navy-2); border-radius: var(--r-pill); }
.tjz-rows { list-style: none; margin: 0; padding: 0 0 var(--s2); }
.tjz-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: var(--s3); align-items: start; padding: 10px var(--s5); border-top: 1px solid var(--line); }
.tjz-dot { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; background: var(--mist); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tjz-done .tjz-dot { background: var(--ok-bg); color: var(--ok); }
.tjz-current .tjz-dot { background: var(--navy); color: var(--white); }
.tjz-set_aside .tjz-dot { background: var(--attn-bg); color: var(--attn); }
.tjz-main { min-width: 0; }
.tjz-main b { display: block; font-size: var(--fs-sm); color: var(--ink); }
.tjz-main small { display: block; font-size: var(--fs-xs); color: var(--ink-3); }
.tjz-st { font-size: var(--fs-xs); color: var(--ink-3); white-space: nowrap; }
.tjz-locked .tjz-main b, .tjz-locked .tjz-st { color: var(--ink-3); }
.tjz-current { background: var(--mist-2); }
.tjz-current .tjz-st { color: var(--navy); font-weight: 700; }
.tjz-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tjz-chip { font-size: var(--fs-xs); line-height: 1.6; padding: 1px 9px; border-radius: var(--r-pill); background: var(--attn-bg); color: var(--attn); overflow-wrap: anywhere; }
.tjz-chip.ok { background: var(--ok-bg); color: var(--ok); }
.tjz-say { margin: 6px 0 0; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.7; }
.tjz-go { margin-top: var(--s2); text-decoration: none; }
.tjz-folded { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s2) var(--s5); font-size: var(--fs-sm); color: var(--ink-2); }
.tjz-folded .tjz-fold { margin-inline-start: 0; }
.tjz-working { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s5); }
.tjz-working .tjz-dot { background: var(--ok-bg); color: var(--ok); }
.tjz-working b { color: var(--navy); font-size: var(--fs-md); }
@media (max-width: 599px) {
  .tjz-head, .tjz-row, .tjz-folded, .tjz-working { padding-inline: var(--s4); }
  .tjz-prog { margin-inline: var(--s4); }
  .tjz-row { gap: var(--s2); }
}
@media print { .tjz { display: none; } }

/* Ready answers (D531, D535 to D538): the page #/ready-answers, the editor's «أسئلة المرضى», a patient's answered
   messages. Structure from docs/brainstorm/v2/mockups/ready-answers-editor/, the look the dashboard's own. */
.ra-card + .ra-sp, .ra-card + .ra-card { margin-top: var(--s4); }
.ra-card > .switch-row { min-height: 52px; }
.ra-scroll { overflow-x: auto; margin-top: var(--s3); }
.ra-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.ra-table th, .ra-table td { padding: 10px 6px; border-bottom: 1px solid var(--line); text-align: start; vertical-align: top; }
.ra-table th { color: var(--ink-3); font-weight: 500; font-size: var(--fs-xs); }
.ra-table .ra-n { color: var(--ink-3); }
.ra-table td:last-child, .ra-table th:last-child { white-space: nowrap; }
.ra-table td:first-child { min-width: 9em; }
.ra-table tr.is-off td { opacity: 0.55; }
.ra-specs { margin-top: 0; }
.ra-sp { margin-top: var(--s5); }
.ra-sp-head h2 { margin: 0; font-size: var(--fs-lg); color: var(--navy); }
.ra-sp-head p { margin: 0; color: var(--ink-3); font-size: var(--fs-sm); }
.ra-topic { margin: var(--s5) 0 var(--s2); font-size: var(--fs-md); color: var(--navy); border-bottom: 2px solid var(--sky); display: inline-block; }
.ra-q { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: var(--s3) var(--s4); margin: var(--s2) 0; }
.ra-q.is-done { border-color: var(--ok); }
.ra-q h4 { margin: 0 0 6px; font-size: var(--fs-md); }
.ra-ws { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 var(--s2); }
.ra-ws small { color: var(--ink-3); }
.ra-w { background: var(--mist-2); border-radius: 8px; padding: 1px 8px; font-size: var(--fs-xs); color: var(--ink-3); }
.ra-opt { display: flex; gap: var(--s3); align-items: flex-start; padding: 8px 10px; border-radius: 10px; cursor: pointer; font-size: var(--fs-sm); line-height: 1.8; }
.ra-opt:hover { background: var(--mist-2); }
.ra-opt input { flex: none; width: 18px; height: 18px; margin-top: 5px; accent-color: var(--navy); }
.ra-opt.ra-mine span { color: var(--navy); font-weight: 600; }
.ra-sub { margin: var(--s2) 0; padding: var(--s2) var(--s3); border: 1px dashed var(--line-2); border-radius: 12px; background: var(--mist-2); }
.ra-sub h5 { margin: 0 0 4px; font-size: var(--fs-sm); color: var(--navy); }
.ra-q .ra-own { min-height: 64px; margin: 4px 0 var(--s2); }
.ra-own-q .input + .ra-ws, .ra-own-q .ra-ws { margin: var(--s2) 0 4px; }
.ra-own-head { display: flex; gap: var(--s2); align-items: center; }
.ra-own-head .input { flex: 1; min-width: 0; }
.ra-danger { background: var(--danger-bg); border: 1px solid #f0cccc; border-radius: 14px; padding: var(--s3) var(--s4); margin: var(--s5) 0; font-size: var(--fs-sm); }
.ra-danger h4 { margin: 0; color: var(--danger); }
.ra-danger p { margin: 2px 0 6px; color: var(--ink-3); }
.ra-danger ul { margin: 0; padding-inline-start: var(--s5); }
#ra-bar .state .fe { margin: 0; }

.pf-ra .ra-about .chips { margin-top: var(--s2); }
.ra-grp { margin: var(--s3) 0 var(--s1); font-size: var(--fs-sm); font-weight: 700; color: var(--navy); }
.ra-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.ra-item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); padding: 8px 12px; border-bottom: 1px solid var(--line); }
.ra-item:last-child { border-bottom: 0; }
.ra-item > input { flex: none; width: 20px; height: 20px; accent-color: var(--navy); cursor: pointer; }
.ra-qbtn { flex: 1; min-width: 160px; min-height: 40px; text-align: start; background: none; border: 0; padding: 0; font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); cursor: pointer; }
.ra-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.ra-ans { flex-basis: 100%; margin: 0 0 var(--s1); padding: var(--s2) var(--s3); border-radius: 10px; background: var(--mist-2); font-size: var(--fs-sm); }
.ra-ans p { margin: 0 0 var(--s1); white-space: pre-line; }
.ra-ans.is-own { background: var(--attn-bg); border: 1px solid #ecd2a8; }
.ra-ans.is-own .fta { min-height: 64px; margin-top: var(--s1); }
.ra-foot { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s3); }
.ra-count { margin-inline-end: auto; color: var(--ink-3); font-size: var(--fs-sm); }

.ras { margin-top: var(--s4); }
.ras-chat { display: flex; flex-direction: column; gap: var(--s2); }
.ras-chat .bubble { white-space: pre-line; }
.ras-auto { align-self: center; display: flex; flex-direction: column; align-items: center; gap: var(--s1); max-width: 100%; padding: 6px 12px; border-radius: 10px; background: var(--ok-bg); color: var(--ok); font-size: var(--fs-xs); font-weight: 600; text-align: center; }
.ras-auto .ras-off { color: var(--danger); border-color: #f0cccc; background: var(--white); min-height: 36px; }