:root{
  --ink:#211D22;
  --porcelain:#FCFAFA;
  --rose-deep:#9E3B57;
  --rose-soft:#F4E6EA;
  --slate:#6E6470;
  --line:#E8E0E3;
  --wa-bubble:#075E54;
  --wa-bubble-2:#0B7A6C;
  --ok:#3E7D63;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--porcelain);
  color:var(--ink);
  font-family:"IBM Plex Sans Arabic",system-ui,sans-serif;
  font-size:15px;
  line-height:1.75;
  padding-bottom:64px;
}
.wrap{max-width:760px;margin:0 auto;padding:0 18px}

/* ---------- header ---------- */
.masthead{padding:34px 0 22px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px}
.diamond{width:13px;height:13px;background:var(--rose-deep);transform:rotate(45deg);flex:none}
.brand b{font-family:Tajawal,sans-serif;font-weight:800;font-size:17px;letter-spacing:-.01em}
h1{font-family:Tajawal,sans-serif;font-weight:800;font-size:31px;line-height:1.25;margin-top:16px;letter-spacing:-.02em}
.sub{color:var(--slate);font-size:14px;margin-top:6px;max-width:46ch}

/* ---------- section heads ---------- */
.step{margin-top:34px}
.eyebrow{
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;
  color:var(--rose-deep);text-transform:uppercase;margin-bottom:8px;
}
h2{font-family:Tajawal,sans-serif;font-weight:700;font-size:20px;margin-bottom:14px}

/* ---------- doctor roster ---------- */
.roster{border-top:1px solid var(--line)}
.doc{
  width:100%;display:flex;align-items:baseline;gap:12px;text-align:right;
  background:none;border:0;border-bottom:1px solid var(--line);
  padding:14px 10px;cursor:pointer;font:inherit;color:inherit;
  transition:background .15s ease,padding .15s ease;
}
.doc:hover,.doc:focus-visible{background:var(--rose-soft);padding-right:16px}
.doc:focus-visible{outline:2px solid var(--rose-deep);outline-offset:-2px}
.doc-name{font-family:Tajawal,sans-serif;font-weight:700;font-size:16px;flex:none}
.doc-spec{color:var(--slate);font-size:12.5px;line-height:1.5}
.doc[aria-pressed="true"]{background:var(--rose-soft)}

.picked{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--rose-soft);border:1px solid #E4CDD4;border-radius:10px;padding:12px 14px;
}
.picked-name{font-family:Tajawal,sans-serif;font-weight:700;font-size:16px}
.picked-spec{color:var(--slate);font-size:12.5px}
.linkbtn{
  background:none;border:0;color:var(--rose-deep);font:inherit;font-size:13px;
  font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:4px;
}

/* ---------- form ---------- */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{display:flex;flex-direction:column;gap:5px}
.field.wide{grid-column:1/-1}
label{font-size:12.5px;font-weight:600;color:var(--slate)}
input,select{
  font:inherit;font-size:15px;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:9px;padding:10px 12px;width:100%;
  transition:border-color .15s ease;
}
input:focus,select:focus{outline:none;border-color:var(--rose-deep);box-shadow:0 0 0 3px var(--rose-soft)}
input::placeholder{color:#B5AEB6}

.quick{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.chip{
  font:inherit;font-size:13px;font-weight:600;cursor:pointer;
  background:#fff;border:1px solid var(--line);border-radius:99px;padding:6px 14px;color:var(--ink);
  transition:border-color .15s ease,color .15s ease;
}
.chip:hover{border-color:var(--rose-deep);color:var(--rose-deep)}
.chip[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}

details.extras{margin-top:14px;border-top:1px solid var(--line);padding-top:14px}
details.extras summary{
  cursor:pointer;font-size:13.5px;font-weight:600;color:var(--rose-deep);
  list-style:none;padding:2px 0;
}
details.extras summary::-webkit-details-marker{display:none}
details.extras summary::before{content:"+ ";font-family:"IBM Plex Mono",monospace}
details.extras[open] summary::before{content:"− "}
details.extras .grid{margin-top:14px}

.warn{
  margin-top:12px;background:#FFF6E8;border:1px solid #F0DDBD;border-radius:9px;
  padding:10px 13px;font-size:13.5px;color:#7A5A22;
}

/* ---------- thread ---------- */
.thread{margin-top:14px}
.card{border-bottom:1px solid var(--line);padding:22px 0}
.card:last-child{border-bottom:0}
.card-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:4px}
.card-title{font-family:Tajawal,sans-serif;font-weight:700;font-size:17px}
.card-num{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--slate);flex:none}
.card-when{color:var(--slate);font-size:13px;margin-bottom:14px}

.bubble-row{display:flex;justify-content:flex-start}
.bubble{
  position:relative;background:var(--wa-bubble);color:#fff;
  border-radius:14px 14px 14px 4px;padding:12px 15px 22px;
  max-width:min(100%,430px);
  white-space:pre-wrap;word-break:break-word;
  font-size:14.5px;line-height:1.85;
  box-shadow:0 1px 2px rgba(33,29,34,.14);
}
.bubble .stamp{
  position:absolute;bottom:6px;left:12px;
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;opacity:.72;
  display:flex;align-items:center;gap:4px;direction:ltr;
}
.bubble a{color:#CDEFE6}

.actions{display:flex;gap:9px;margin-top:12px;flex-wrap:wrap}
.btn{
  font:inherit;font-size:14px;font-weight:600;cursor:pointer;border-radius:9px;
  padding:9px 18px;border:1px solid transparent;transition:background .15s ease,color .15s ease;
}
.btn-copy{background:var(--ink);color:#fff}
.btn-copy:hover{background:var(--rose-deep)}
.btn-copy.done{background:var(--ok)}
.btn-send{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-send:hover{border-color:var(--rose-deep);color:var(--rose-deep)}
.btn:focus-visible{outline:2px solid var(--rose-deep);outline-offset:2px}
.btn[disabled]{opacity:.42;cursor:not-allowed}

.hint{font-size:12.5px;color:var(--slate);margin-top:9px}

/* ---------- rules ---------- */
.rules{margin-top:14px;counter-reset:r}
.rules li{
  list-style:none;counter-increment:r;position:relative;
  padding:9px 30px 9px 0;border-bottom:1px solid var(--line);font-size:14px;
}
.rules li:last-child{border-bottom:0}
.rules li::before{
  content:counter(r,decimal-leading-zero);position:absolute;right:0;top:11px;
  font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--rose-deep);
}

footer{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);color:var(--slate);font-size:12.5px}
footer a{color:var(--rose-deep)}

/* .hidden lives at the END of this file — see the note there. */

@media (max-width:620px){
  h1{font-size:26px}
  .grid{grid-template-columns:1fr}
  .doc{flex-direction:column;gap:2px;align-items:flex-start}
  .bubble{max-width:100%}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* ==================================================================
   LOGIN GATE + USER BAR  (added for the production build)
   ================================================================== */

.gate{
  position:fixed; inset:0; z-index:50;
  display:flex; align-items:center; justify-content:center;
  padding:24px; background:var(--porcelain);
}
.gate-card{
  width:100%; max-width:420px; text-align:center;
  background:#fff; border:1px solid rgba(33,29,34,.10);
  border-radius:18px; padding:38px 28px 30px;
  box-shadow:0 18px 50px rgba(33,29,34,.08);
}
.gate-card .brand{ justify-content:center; margin-bottom:18px; }
.gate-card h1{ font-size:26px; margin:0 0 8px; }
.gate-card .sub{ margin:0 0 24px; }
.gbtn{ display:flex; justify-content:center; min-height:44px; }
.gate-error{
  margin-top:18px; padding:11px 14px; border-radius:11px;
  background:var(--rose-soft); color:var(--rose-deep);
  font-size:14px; line-height:1.7;
}
.gate-foot{
  margin-top:22px; padding-top:16px;
  border-top:1px solid rgba(33,29,34,.08);
  font-size:12.5px; color:var(--slate); line-height:1.8;
}

/* Native date input inside an RTL page.
   The control lays its own segments out LTR regardless of page direction,
   so it is marked dir="ltr" in the markup and aligned to match the other
   fields here. Full width keeps the whole control clickable rather than
   only the small calendar glyph, which is the difference between "tap
   anywhere" and "hunt for the icon" on a phone. */
input[type="date"]{
  text-align:right;
  min-height:44px;               /* comfortable touch target */
  font-variant-numeric:tabular-nums;
}
input[type="date"]::-webkit-calendar-picker-indicator{
  margin-inline-start:0;
  margin-inline-end:auto;        /* icon sits on the leading edge in RTL */
  cursor:pointer;
  opacity:.62;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover{ opacity:1; }

/* Selects get the same height as the date field so the grid rows line up,
   plus a chevron, since a bare select is easy to miss as clickable. */
select{
  min-height:44px;
  cursor:pointer;
  appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236E6470' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:left 13px center;
  padding-left:34px;
}
select:invalid,select option[value=""]{ color:#B5AEB6; }

.pin-input{
  width:100%; text-align:center;
  font-family:"IBM Plex Mono",monospace;
  font-size:26px; letter-spacing:.34em; text-indent:.34em;
  padding:13px 12px;
}
.pin-submit{ width:100%; margin-top:12px; justify-content:center; }

.userbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:9px 16px;
  background:rgba(252,250,250,.94);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid rgba(33,29,34,.08);
  font-size:13px; color:var(--slate);
}
.userbar-who b{ color:var(--ink); font-weight:600; }
@media (max-width:520px){ .userbar{ font-size:12px; padding:8px 12px; } }

/* ==================================================================
   .hidden — deliberately last, and deliberately !important.

   Every screen in this app is toggled by adding and removing this
   class: the PIN gate, the sign-in card, the console, the user bar.
   But .gate, .userbar and .field all set display:flex, and a bare
   .hidden has exactly the same specificity as they do. Whichever is
   written later wins.

   .hidden used to sit above them, so `class="gate hidden"` computed to
   display:flex and every "hidden" overlay rendered on top of the app.
   Two rules that both look correct in isolation, and the bug is only
   the order between them.

   Last in the file AND !important, so it holds regardless of what
   gets added below it later.
   ================================================================== */
.hidden{ display:none !important; }