/* booking by doctor (docs/SPEC-booking-by-doctor.md, 2026-11-02): the doctors' «أوقات الدوام» editor, the home
   timeline's working spans, the schedule by doctor with its off-hours hatching. Theme tokens only (app.css defines
   them for both looks); the booking page adds its own rules below these. */

/* ── a doctor's tone: his colour (doctors.PALETTE) made readable in both themes ── */
.tone-1{--tone:var(--tone-1-mark); --tone-tint:var(--tone-1-tint); --tone-ink:var(--tone-1-ink)}
.tone-2{--tone:var(--tone-2-mark); --tone-tint:var(--tone-2-tint); --tone-ink:var(--tone-2-ink)}
.tone-3{--tone:var(--tone-3-mark); --tone-tint:var(--tone-3-tint); --tone-ink:var(--tone-3-ink)}
.tone-4{--tone:var(--tone-4-mark); --tone-tint:var(--tone-4-tint); --tone-ink:var(--tone-4-ink)}
.tone-5{--tone:var(--tone-5-mark); --tone-tint:var(--tone-5-tint); --tone-ink:var(--tone-5-ink)}
.tone-6{--tone:var(--tone-6-mark); --tone-tint:var(--tone-6-tint); --tone-ink:var(--tone-6-ink)}
.tone-7{--tone:var(--tone-7-mark); --tone-tint:var(--tone-7-tint); --tone-ink:var(--tone-7-ink)}
.tone-8{--tone:var(--tone-8-mark); --tone-tint:var(--tone-8-tint); --tone-ink:var(--tone-8-ink)}

/* ── a checkbox drawn as a switch (role="switch"): the track fills with the main colour when on ── */
.sw{display:inline-flex; align-items:center; gap:8px; cursor:pointer; user-select:none; font-size:.86rem; color:var(--ink-2)}
.sw input{appearance:none; -webkit-appearance:none; position:relative; flex:none; margin:0; inline-size:38px; block-size:22px;
  border-radius:999px; border:1px solid var(--line-2); background:var(--sunk); cursor:pointer; transition:background-color .15s, border-color .15s}
.sw input::before{content:""; position:absolute; inset-block-start:3px; inset-inline-start:3px; inline-size:14px; block-size:14px;
  border-radius:50%; background:var(--ink-3); transition:inset-inline-start .15s, background-color .15s}
.sw input:checked{background:var(--primary); border-color:var(--primary)}
.sw input:checked::before{inset-inline-start:19px; background:var(--on-primary)}
.sw input:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.sw:has(input:checked){color:var(--ink)}
@media (prefers-reduced-motion:reduce){.sw input,.sw input::before{transition:none}}

/* ── doctors page: «أوقات الدوام». The switch «مثل ساعات العيادة» hides the rows (CSS only: works without JS);
   a day without «يداوم» shows «لا دوام» instead of its times ── */
.hrs{display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding-block:12px 4px; border-top:1px solid var(--line)}
.hrs .hrs-clinic{margin:0}
.hrs-days{display:flex; flex-direction:column; inline-size:100%}
.hrs:has(.hrs-same input:checked) .hrs-days{display:none}
.hrs-day{display:grid; grid-template-columns:5.2em auto minmax(0,1fr); align-items:center; gap:6px 14px; padding-block:7px;
  border-top:1px solid var(--line)}
.hrs-day:first-child{border-top:0}
.hrs-name{font-weight:600; font-size:.9rem; color:var(--ink)}
.hrs-times{display:flex; flex-wrap:wrap; align-items:center; gap:6px 18px; min-inline-size:0}
.hrs-p{display:inline-flex; align-items:center; gap:6px; color:var(--ink-3)}
.hrs-p input[type=time]{inline-size:auto; min-inline-size:7.4em; padding-block:5px; font-variant-numeric:tabular-nums}
.hrs-lbl{font-size:.78rem; color:var(--ink-3)}
.hrs-to{font-size:.8rem}
/* the second period: closed behind «+ فترة ثانية» unless it holds a time (its fields are sent either way) */
.hrs-p2{display:inline-flex; align-items:center; gap:6px}
.hrs-p2 > summary{cursor:pointer; list-style:none; color:var(--accent); font-weight:500; padding-block:4px}
.hrs-p2 > summary::-webkit-details-marker{display:none}
.hrs-p2[open] > summary{color:var(--ink-3)}
.hrs-tools{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 12px; padding-block:2px 6px}
.hrs-tools .hint{margin:0}
.hrs-copy[hidden]{display:none}
/* a refused save: the reason stays in the form (doctors._page), above its buttons */
.form-error{margin:12px 0 0; padding:10px 14px; border:1px solid color-mix(in srgb,var(--bad) 45%,transparent);
  border-inline-start:4px solid var(--bad); border-radius:min(var(--r-sm),12px); background:var(--bad-soft); color:var(--bad);
  font-size:.88rem; line-height:1.6}
form > .form-error + .btn{margin-block-start:12px}
.dot[class*="tone-"]{background:var(--tone)}
.hrs-offtxt{display:none; font-size:.82rem; color:var(--ink-3)}
.hrs-day:has(.sw input:not(:checked)) .hrs-times{display:none}
.hrs-day:has(.sw input:not(:checked)) .hrs-offtxt{display:inline}
.hrs-day:has(.sw input:not(:checked)) .hrs-name{color:var(--ink-3)}
/* the card's short summary under the doctor's name */
.hrs-sum{display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; margin-top:6px; font-size:.82rem; color:var(--ink-2)}
.hrs-sum .ic{inline-size:15px; block-size:15px; color:var(--ink-3)}
.hrs-tag{font-size:.75rem; padding:1px 8px; border-radius:999px; border:1px solid var(--line-2); color:var(--ink-3)}
@media (max-width:640px){
  /* row 1: the day, «لا دوام» when off, the switch at the end; row 2: the times, each period a full-width line */
  .hrs-day{grid-template-columns:auto minmax(0,1fr) auto}
  .hrs-name{grid-row:1; grid-column:1}
  .hrs-offtxt{grid-row:1; grid-column:2; justify-self:start}
  .hrs-day .sw{grid-row:1; grid-column:3; justify-self:end}
  .hrs-times{grid-row:2; grid-column:1 / -1; flex-direction:column; align-items:stretch; gap:8px}
  .hrs-p{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:4px 6px}
  .hrs-p2{display:block}
  .hrs-p2 > summary{min-block-size:44px; display:flex; align-items:center}
  .hrs-p input[type=time]{min-inline-size:0; inline-size:100%; min-block-size:44px}
  .hrs .sw{min-block-size:44px}         /* the label is the target: the whole row, not just the 38 × 22 track */
}

/* ── schedule: columns = doctors; rows = 15 minutes; a cell outside the doctor's hours is hatched, still a link ── */
/* the day scrolls INSIDE its card (at most a screen tall), so the doctors' names (.h, sticky) stay above the rows
   wherever the day is scrolled to — app.js opens it on the hour that matters (data-scroll-start) */
.cal{display:grid; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); overflow:auto;
  max-block-size:max(420px, calc(100vh - 210px)); max-block-size:max(420px, calc(100dvh - 210px))}
.cal .h{position:sticky; inset-block-start:0; z-index:2; display:flex; flex-direction:column; align-items:center; gap:1px;
  background:var(--surface-2); border-bottom:1px solid var(--line); padding:7px 8px; font-size:.85rem; font-weight:600; text-align:center; white-space:nowrap}
.cal .h-name{display:inline-flex; align-items:center; gap:6px; max-inline-size:100%; overflow:hidden; text-overflow:ellipsis}
.cal .h-dot{flex:none; inline-size:9px; block-size:9px; border-radius:50%; background:var(--tone, var(--ink-3))}
.cal .h-hours{font-size:.75rem; font-weight:400; color:var(--ink-3); font-variant-numeric:tabular-nums}
.cal .h .chip{font-size:.75rem; padding:0 6px}
.cal .t{font-family:var(--f-mono); font-size:.75rem; color:var(--ink-3); padding:2px 8px; border-top:1px solid var(--line); text-align:center;
  font-variant-numeric:tabular-nums}
/* on a phone the doctors' columns scroll sideways: the times stay in view */
.cal .t{position:sticky; inset-inline-start:0; z-index:3; background:var(--surface)}
.cal > .h:first-child{inset-inline-start:0; z-index:4}
.cal .slot{display:block; min-block-size:26px; border-top:1px solid var(--line); border-inline-start:1px solid var(--line)}
.cal .slot.hr{border-top-color:var(--line-2)}
.cal .slot.off{background-color:var(--off); background-image:var(--hatch)}
.cal a.slot:hover{background-color:var(--accent-soft)}
.cal span.slot.ro{cursor:default}
.cal a.slot:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.cal-bar{margin-bottom:12px; align-items:center}
.cal-key{display:inline-flex; align-items:center; gap:6px; font-size:.78rem; color:var(--ink-3)}
.cal-key i{display:inline-block; inline-size:18px; block-size:12px; border-radius:3px; border:1px solid var(--line-2);
  background-color:var(--off); background-image:var(--hatch)}
.appt{position:relative; z-index:1; margin:2px 3px; border-radius:9px; padding:4px 8px 4px 40px; font-size:.78rem; background:var(--tone-tint, var(--surface));
  border:1px solid var(--line-2); display:flex; flex-direction:column; gap:0; min-block-size:0;
  scroll-margin-block:64px 16px; scroll-margin-inline:72px}   /* #a<id> after a save: clear of the names and the times */
.appt:has(details[open]){z-index:6}
.appt:target{outline:2px solid var(--accent); outline-offset:1px}
.appt .l1{display:flex; gap:6px; align-items:center; min-inline-size:0}
.appt b{font-size:.82rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-inline-size:0}
.appt b a{color:inherit; text-decoration:none}
.appt b a:hover{text-decoration:underline}
.appt .m{color:var(--ink-2); font-size:.75rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.appt .sd{inline-size:8px; block-size:8px; border-radius:50%; flex:none; background:var(--ink-3)}
.appt .sd.ok{background:var(--ok)} .appt .sd.bad{background:var(--bad)} .appt .sd.info{background:var(--info)}
.appt .sd.gold{background:var(--gold)} .appt .sd.accent{background:var(--accent)}
/* done / cancelled / no-show: quieter by colour tokens, never by opacity (opacity faded the opened menu too and took
   the text under AA); the struck name says «did not happen» */
.appt.st-done,.appt.st-cancelled,.appt.st-no_show{background:var(--sunk); border-color:var(--line); color:var(--ink-2)}
.appt.st-cancelled .l1 b,.appt.st-no_show .l1 b{text-decoration:line-through; font-weight:500}
.appt.st-in_chair{border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent)}
.appt.st-arrived{border-color:var(--gold); box-shadow:inset 0 0 0 1px var(--gold)}
.appt details{position:absolute; inset-block-start:0; inset-inline-end:2px}
/* the «⋯» trigger: 32 × 32 so a thumb finds it (it may reach past a 15-minute visit's box; it sits above the cells) */
.appt details summary{cursor:pointer; color:var(--ink-2); list-style:none; display:grid; place-items:center; inline-size:32px; block-size:32px;
  padding:0; border-radius:8px; font-weight:700; line-height:1}
.appt details summary::-webkit-details-marker{display:none}
.appt details[open] summary{background:var(--sunk)}
.appt .acts{position:absolute; inset-block-start:32px; inset-inline-end:0; inline-size:220px; display:flex; flex-wrap:wrap; gap:4px; padding:8px;
  background:var(--surface); border:1px solid var(--line-2); border-radius:10px}
.appt .acts .chip{inline-size:100%}
.appt .acts button,.appt .acts a{font-size:.75rem; padding:2px 7px}
.appt .acts .ic{inline-size:14px; block-size:14px}
.appt .acts .st-cancel{color:var(--bad)}

/* ── a save outside the doctor's hours: the amber note as a toast ── */
.toast.warn{background:var(--warn-bg); color:var(--warn-ink); border:1px solid var(--warn-line); border-inline-start:4px solid var(--warn)}

/* ════════ the booking page (appointment_form.html + booking.js, spec §4): patient → doctor → day → time → reason.
   Classes bk-*. Without JavaScript the form is plain (doctor radio cards, date, time, duration radios): .js-only parts
   stay hidden until booking.js marks the form .is-js. ════════ */
.bk:not(.is-js) .js-only{display:none !important}
.bk-sr{position:absolute; inline-size:1px; block-size:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
.bk-req{margin-block-end:14px}
.bk-grid{display:block}
.bk-steps{display:grid; grid-template-columns:minmax(0,1fr); gap:14px; min-inline-size:0}
.bk-step{min-inline-size:0; background:var(--surface); border:1px solid var(--card-line); border-radius:var(--r); padding:20px 22px;
  scroll-margin-block-start:16px}
.bk-h{display:flex; align-items:center; gap:10px; margin:0 0 14px; font-size:1.02rem; line-height:1.4}
.bk-n{inline-size:26px; block-size:26px; border-radius:50%; display:grid; place-items:center; flex:none; font-size:.8rem; font-weight:600;
  background:var(--field); border:1px solid var(--field-line); color:var(--ink-2); font-variant-numeric:tabular-nums}
.bk-step.done .bk-n{background:var(--primary); border-color:var(--primary); color:var(--on-primary)}
.bk-opt{font-size:.82rem; font-weight:400; color:var(--ink-3)}
.bk-step.locked .bk-h{color:var(--ink-3)}
.bk-step.locked .bk-body{opacity:.4}          /* inert as well (booking.js): the step waits for the one before it */
.bk-meta{font-size:.84rem; color:var(--ink-2)}
.bk-num{font-variant-numeric:tabular-nums; white-space:nowrap}
.bk-link{display:inline-flex; align-items:center; background:none; border:0; padding:6px 2px; color:var(--accent); font-weight:500; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px; text-decoration-color:color-mix(in srgb,currentColor 40%,transparent)}
.bk-link:hover{text-decoration-color:currentColor}
.bk-tag{display:inline-block; font-size:.75rem; font-weight:500; padding:0 8px; border-radius:999px; border:1px solid currentColor; line-height:1.6;
  margin-inline-start:6px; vertical-align:1px}
/* an initial in a circle: a doctor's on his tone's tint; a patient's on the sunk colour */
.bk-av{inline-size:34px; block-size:34px; border-radius:50%; display:inline-grid; place-items:center; flex:none; font-size:.86rem; font-weight:600;
  line-height:1; background:var(--tone-tint, var(--sunk)); color:var(--tone-ink, var(--ink-2))}
.bk-av.sm{inline-size:24px; block-size:24px; font-size:.75rem; margin-inline-end:6px; vertical-align:-6px}

/* ── 1 the patient ── */
.bk-picked{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.bk-pchip{display:inline-flex; align-items:center; gap:8px; min-block-size:40px; padding-block:4px; padding-inline:5px 16px; border-radius:var(--r-sm);
  background:var(--sel-bg); color:var(--sel-ink); font-weight:600}
.bk-pchip .bk-av{inline-size:30px; block-size:30px; background:color-mix(in srgb,var(--sel-ink) 14%,var(--sel-bg)); color:var(--sel-ink)}
.bk-search{position:relative}
.bk-search .ic{position:absolute; inset-inline-start:14px; inset-block-start:50%; transform:translateY(-50%); color:var(--ink-3); pointer-events:none}
.bk-search input{padding-inline-start:42px; min-block-size:44px}
.bk-plist-h{display:flex; justify-content:space-between; align-items:center; gap:10px; margin:12px 0 6px}
.bk-plist{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:8px}
.bk-prow{display:grid; grid-template-columns:34px minmax(0,1fr); column-gap:10px; align-items:center; inline-size:100%; min-block-size:56px;
  padding:7px 10px; border:1px solid var(--field-line); border-radius:min(var(--r-sm),12px); background:var(--field); color:var(--ink);
  text-align:start; cursor:pointer}
.bk-prow:hover{border-color:var(--ink-3)}
.bk-prow .bk-av{grid-row:1 / 3}
.bk-pn{font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.4}
.bk-pm{font-size:.78rem; color:var(--ink-3); font-variant-numeric:tabular-nums; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bk-plist .bk-empty{grid-column:1 / -1; margin:0; padding:10px 2px; font-size:.88rem; color:var(--ink-3)}
.bk-new{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; gap:12px; align-items:end; margin-block-start:12px}
.bk:not(.is-js) .bk-new{margin-block-start:0}

/* ── 2 the doctor cards (radio inputs): initial, name, specialty, the day's hours, the day strip ── */
.bk-docs-h{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:6px 14px; margin:-4px 0 12px}
.bk-docs{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px}
.bk-doc{position:relative; display:grid; grid-template-columns:42px minmax(0,1fr); column-gap:12px; align-content:start; padding:14px 16px 16px;
  border:1px solid var(--card-line); border-radius:var(--r); background:var(--surface-2); color:var(--ink); cursor:pointer}
.bk-doc input,.bk-seg input{position:absolute; opacity:0; inline-size:1px; block-size:1px; margin:0; pointer-events:none}
.bk-doc:hover{border-color:var(--line-2)}
.bk-doc:has(input:focus-visible),.bk-seg label:has(input:focus-visible){outline:2px solid var(--accent); outline-offset:2px}
.bk-doc:has(input:checked){background:var(--field); border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink)}
/* the chosen card's tick: a circle in the selection colour with a check drawn by two borders */
.bk-doc:has(input:checked)::after{content:""; position:absolute; inset-block-start:12px; inset-inline-end:12px; inline-size:20px; block-size:20px;
  border-radius:50%; background:var(--sel-bg)}
.bk-doc:has(input:checked)::before{content:""; position:absolute; z-index:1; inset-block-start:16px; inset-inline-end:19px; inline-size:5px; block-size:9px;
  border:solid var(--sel-ink); border-width:0 2px 2px 0; transform:rotate(45deg)}
.bk-doc .bk-av{grid-row:1 / 3; inline-size:42px; block-size:42px; font-size:1.05rem}
.bk-dn{font-weight:600; align-self:end; line-height:1.35; padding-inline-end:24px; overflow-wrap:anywhere}
.bk-ds{font-size:.82rem; color:var(--ink-3); align-self:start; min-block-size:1.3em}
.bk-when{grid-column:1 / -1; display:grid; margin-block-start:12px; font-size:.84rem; color:var(--ink-2); line-height:1.55; font-variant-numeric:tabular-nums}
.bk-when b{color:var(--ink); font-weight:600}
.bk-doc.offday .bk-when b{color:var(--ink-2)}
.bk-strip{grid-column:1 / -1; display:block; position:relative; overflow:hidden; block-size:10px; margin-block-start:10px; border-radius:5px;
  background:var(--off) var(--hatch)}
.bk-strip .w,.bk-bar .w{position:absolute; inset-block:0; background:var(--work)}
.bk-strip .t{position:absolute; inset-block:0; background:var(--taken)}
.bk-strip .now,.bk-bar .now{position:absolute; inset-block:0; inline-size:2px; margin-inline-start:-1px; background:var(--now)}
.bk-legend{display:flex; gap:6px 16px; flex-wrap:wrap; margin-block-start:16px; font-size:.78rem; color:var(--ink-3)}
.bk-legend-sm{margin:0}
.bk-legend i{display:inline-block; inline-size:14px; block-size:12px; border-radius:3px; margin-inline-end:6px; vertical-align:-1px;
  border:1px solid var(--field-line); background:var(--field)}
.bk-legend .lg-w{background:var(--work); border-color:transparent}
.bk-legend .lg-t{background:var(--taken); border-color:transparent}
.bk-legend .lg-o{background:var(--off) var(--hatch); border-color:var(--line-2)}
.bk-legend .lg-x{background:var(--warn-bg); border-color:var(--warn-line)}

/* ── 3 the day: 14 buttons in a row that scrolls sideways on a phone ── */
.bk-days{display:flex; gap:8px; overflow-x:auto; padding-block:2px 8px; scrollbar-width:thin; overscroll-behavior-x:contain}
.bk-day{flex:none; inline-size:88px; display:grid; justify-items:center; padding:8px 4px 10px; border:1px solid var(--card-line); border-radius:var(--r);
  background:var(--surface-2); color:var(--ink); line-height:1.35; cursor:pointer}
.bk-day:hover{border-color:var(--line-2)}
.bk-day .w{font-size:.8rem; color:var(--ink-2); white-space:nowrap}
.bk-day .d{font-size:1.3rem; font-weight:600; font-variant-numeric:tabular-nums; line-height:1.4}
.bk-day .m{font-size:.75rem; color:var(--ink-3); white-space:nowrap}
.bk-day .f{margin-block-start:6px; font-size:.76rem; font-weight:600; color:var(--accent); text-align:center; line-height:1.3}
.bk-day.off{background:var(--off) var(--hatch); border-style:dashed; border-color:var(--line-2)}
.bk-day.off .f,.bk-day.full .f{color:var(--ink-3); font-weight:500}
.bk-day.more .d{color:var(--ink-3)}
.bk-day.ghost{block-size:96px; background:var(--sunk); border-color:transparent; cursor:default}
.bk-day[aria-pressed="true"]{background:var(--sel-bg); border-color:var(--sel-bg); border-style:solid; color:var(--sel-ink)}
.bk-day[aria-pressed="true"] .w,.bk-day[aria-pressed="true"] .m,.bk-day[aria-pressed="true"] .f{color:color-mix(in srgb,var(--sel-ink) 72%,var(--sel-bg))}
.bk-date{inline-size:min(100%,240px); margin-block-start:12px}
.bk:not(.is-js) .bk-date{margin-block-start:0}

/* ── 4 the time: duration, the big clickable strip of the day, the free times grouped by his hours ── */
.bk-dur{border:0; margin:0 0 18px; padding:0; min-inline-size:0}
.bk-dur legend{padding:0; margin-block-end:6px}
.bk-seg{display:inline-flex; flex-wrap:wrap; gap:2px; padding:3px; border-radius:min(var(--r-sm),22px); background:var(--sunk); border:1px solid var(--card-line)}
.bk-seg label{position:relative; display:grid; place-items:center; min-inline-size:50px; block-size:34px; padding:0 10px; border-radius:var(--r-sm);
  color:var(--ink-2); font-weight:500; font-variant-numeric:tabular-nums; cursor:pointer}
.bk-seg label:hover{color:var(--ink); background:var(--field)}
.bk-seg label:has(input:checked){background:var(--sel-bg); color:var(--sel-ink); font-weight:600}
.bk-dv{margin-block-end:4px}
.bk-dv-head{display:flex; align-items:center; gap:6px 10px; flex-wrap:wrap; margin-block-end:10px}
.bk-dv-head .bk-av{inline-size:30px; block-size:30px; font-size:.8rem}
.bk-bar{position:relative; overflow:hidden; block-size:48px; border-radius:min(var(--r-sm),12px); background:var(--off) var(--hatch); cursor:pointer}
.bk-bar.empty{cursor:default}
.bk-bar .t{position:absolute; inset-block:6px; display:flex; align-items:center; justify-content:center; overflow:hidden; white-space:nowrap; padding:0 2px;
  border-radius:4px; background:var(--taken); color:var(--taken-ink); font-size:.75rem; line-height:1; container-type:inline-size}
.bk-bar .t b{font-weight:600; font-variant-numeric:tabular-nums}
@container (max-width:34px){.bk-bar .t b{display:none}}
.bk-bar .pick{position:absolute; inset-block:2px; border:2px solid var(--ink); border-radius:6px; background:var(--accent-soft)}
.bk-bar .pick.out{border-color:var(--warn); background:var(--warn-bg)}
.bk-axis{position:relative; block-size:18px; margin-block-start:6px; font-size:.75rem; line-height:18px; color:var(--ink-3); font-variant-numeric:tabular-nums}
.bk-axis span{position:absolute; transform:translateX(50%)}      /* RTL: inset-inline-start is the right edge */
.bk-axis span.first{transform:none}
.bk-axis span.last{transform:translateX(100%)}
.bk-say{margin:8px 0 0; font-size:.86rem; font-weight:500; color:var(--warn-ink)}
.bk-say:empty{display:none}
.bk-times{margin-block-start:14px}
.bk-times > p.bk-meta{margin:6px 0}
.bk-grp{margin-block-start:16px}
.bk-grp:first-child{margin-block-start:0}
.bk-grp h3{margin:0 0 8px; font-family:var(--f-ui); font-size:.84rem; font-weight:600; color:var(--ink-2)}
.bk-grp.out h3{color:var(--warn-ink)}
.bk-slots{display:grid; grid-template-columns:repeat(auto-fill,minmax(76px,1fr)); gap:8px}
.bk-slot{block-size:40px; border:1px solid var(--field-line); border-radius:var(--r-sm); background:var(--field); color:var(--ink); font-weight:500;
  font-variant-numeric:tabular-nums; cursor:pointer}
.bk-slot:hover:not(:disabled){border-color:var(--ink-3)}
.bk-slot.taken{background:var(--sunk); border-color:transparent; color:var(--ink-3); text-decoration:line-through; font-weight:400; cursor:not-allowed}
.bk-slot.out{background:var(--warn-bg); border-color:var(--warn-line); color:var(--warn-ink)}
.bk-slot[aria-pressed="true"]{background:var(--sel-bg); border-color:var(--sel-bg); color:var(--sel-ink); font-weight:600}
.bk-outtg{display:inline-flex; align-items:center; margin-block-start:16px; min-block-size:38px; padding:0 16px; border:1px dashed var(--warn-line);
  border-radius:var(--r-sm); background:none; color:var(--warn-ink); font-weight:500; cursor:pointer}
.bk-manual{display:flex; flex-wrap:wrap; align-items:end; gap:8px 16px; margin-block-start:14px}
.bk-time{inline-size:min(100%,200px)}
.bk:not(.is-js) .bk-manual{margin-block-start:0}
/* the amber note: outside the doctor's hours, still books; .bad = a typed time the server would refuse */
.bk-note{display:flex; gap:10px; align-items:flex-start; margin-block-start:14px; padding:11px 14px; border:1px solid var(--warn-line);
  border-inline-start:4px solid var(--warn); border-radius:min(var(--r-sm),12px); background:var(--warn-bg); color:var(--warn-ink); font-size:.88rem; line-height:1.6}
.bk-note .ic{flex:none; margin-block-start:3px}
.bk-note.bad{border-color:color-mix(in srgb,var(--bad) 45%,transparent); border-inline-start-color:var(--bad); background:var(--bad-soft); color:var(--bad)}

/* ── 5 the reason ── */
.bk-chips{display:flex; flex-wrap:wrap; gap:8px; margin-block-end:12px}
.bk-chip{min-block-size:38px; padding:0 16px; border:1px solid var(--field-line); border-radius:var(--r-sm); background:var(--field); color:var(--ink);
  font-weight:500; cursor:pointer}
.bk-chip:hover{border-color:var(--ink-3)}
.bk-chip[aria-pressed="true"]{background:var(--sel-bg); border-color:var(--sel-bg); color:var(--sel-ink); font-weight:600}
.bk-step .field + .field,.bk-step .bk-link + .field{margin-block-start:12px}
#bkNoteBtn{margin-block-start:6px}

/* ── the summary: beside the steps on a wide screen; a bar pinned to the bottom of the screen otherwise ── */
.bk-sum{margin-block-start:14px; background:var(--surface); border:1px solid var(--card-line); border-radius:var(--r); padding:20px}
.bk-sum h2{margin:0 0 6px; font-size:1.02rem}
.bk-prog{display:flex; align-items:center; gap:10px; margin-block-end:16px; font-size:.82rem; color:var(--ink-2)}
.bk-track{flex:1; block-size:4px; border-radius:2px; background:var(--line-2); overflow:hidden}
.bk-track span{display:block; block-size:100%; inline-size:0; background:var(--accent); transition:inline-size .2s}
.bk-sum dl{display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px 16px; margin:0}
.bk-sum dt{font-size:.82rem; color:var(--ink-3); padding-block-start:1px}
.bk-sum dd{margin:0; font-weight:500; line-height:1.5; overflow-wrap:anywhere}
.bk-sum .bk-empty{color:var(--ink-3); font-weight:400}
.bk-sum .bk-note{font-size:.82rem}
.bk-go{display:flex; justify-content:center; inline-size:100%; min-block-size:46px; margin-block-start:18px; font-size:1rem}
.bk-go:disabled,.bk-go:disabled:hover{background:var(--field); border-color:var(--field-line); color:var(--ink-3); opacity:1; cursor:not-allowed}
.bk-after{margin:10px 0 0; font-size:.8rem; color:var(--ink-3); text-align:center}
/* the edit page's own «إلغاء الموعد» (asks first): under the steps, in the «bad» tone */
.bk-cancel{margin-block-start:16px}
.bk-cancel-btn{color:var(--bad); min-block-size:40px}
.bk-mini{display:none}
.bk-warnword{color:var(--warn-ink); font-weight:600}
.bk-stopword{color:var(--bad); font-weight:600}
@media (min-width:1180px){
  .bk-grid{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:16px; align-items:start}
  .bk-sum{position:sticky; inset-block-start:16px; margin:0}
}
@media (max-width:1179px){
  /* the sticky bar is about 96 px tall on a phone: keyboard focus (and scrollIntoView) stops above it (WCAG 2.4.11) */
  html:has(.bk-sum){scroll-padding-block-end:120px}
  /* a block (not a grid) holds the steps and the bar, so the sticky bar can travel the whole page */
  .bk-sum{position:sticky; inset-block-end:0; z-index:15; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center;
    gap:8px 14px; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); border-radius:var(--r) var(--r) 0 0; background:var(--sheet);
    border:1px solid var(--line-2); border-block-end:0}
  .bk-sum h2,.bk-sum dl,.bk-sum .bk-prog,.bk-sum .bk-after,.bk-sum .bk-note{display:none !important}
  .bk.is-js .bk-mini{display:block; min-inline-size:0; font-size:.88rem; font-weight:500; line-height:1.5}
  .bk-go{margin:0; inline-size:auto; min-inline-size:132px}
  .bk:not(.is-js) .bk-go{grid-column:1 / -1; inline-size:100%}
}
@media (max-width:900px){
  /* the phone's top bar (about 61 px) is sticky: a #fragment or a focused field stops below it */
  html{scroll-padding-block-start:68px}
  .cal{max-block-size:max(320px, calc(100vh - 340px)); max-block-size:max(320px, calc(100dvh - 340px))}
  .bk-step{padding:16px; scroll-margin-block-start:72px}
  .bk-sum{margin-inline:-16px; border-radius:0; border-inline:0}
  .bk-new{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  /* touch: every control at least 44 px tall */
  .bk-plist{grid-template-columns:minmax(0,1fr)}
  .bk-slots{grid-template-columns:repeat(auto-fill,minmax(68px,1fr))}
  .bk-slot{block-size:44px}
  /* the durations in two rows of four: each button at least 44 px wide (one row of 7–8 left them 39 px) */
  .bk-seg{display:flex; flex-wrap:wrap; inline-size:100%}
  .bk-seg label{flex:1 0 calc(25% - 2px); min-inline-size:44px; padding:0 2px; block-size:44px}
  .bk-chip,.bk-outtg{min-block-size:44px}
  .bk-link{min-block-size:44px; min-inline-size:44px; justify-content:center; padding-block:10px}
  .bk input:not([type=hidden]):not([type=radio]){min-block-size:44px}
  .bk-sum{grid-template-columns:minmax(0,1fr)}
  .bk-go{inline-size:100%}
}

/* a printed day is the whole day, not one screen of it */
@media print{.cal{max-block-size:none; overflow:visible}}