/* Makateeb - sending days (2026-09-27): the guided editor's "Sending day" step, drawn by assets/booking/booking.js.
   It lives inside .ed, so it speaks the editor's --ed-* tokens (the dashboard's --dx-*, try.php's fallbacks) and its
   shapes: 10px blocks, 16px cards, pill buttons. Logical properties only. The hosts' element rules would win over a
   single class (try.php: .mk-public h3 is a 30px display face, .mk-public a drops underlines; the dashboard:
   body.dx-app .dash-main label/input), so headings and links are scoped under .bk and the form controls under #ed.
   Motion: opacity/transform, 180 ms at most, none with prefers-reduced-motion. */
.bk{--bk-warn:#8A5A12;--bk-warn-bg:color-mix(in srgb,#B98A2F 14%,var(--ed-surface));--bk-cell-h:48px;
  display:grid;gap:16px;container:bk / inline-size;min-inline-size:0}
.bk *,.bk *::before,.bk *::after{box-sizing:border-box}
.bk svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.bk-sr{position:absolute;inline-size:1px;block-size:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- the household reminder: the owner's "one invitation per family", prominent and warm ---- */
.bk-house{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;align-items:start;padding:14px 16px 15px;
  border:1px solid color-mix(in srgb,var(--ed-accent-2) 15%,var(--ed-rule));border-radius:var(--ed-radius-lg);
  background:color-mix(in srgb,var(--ed-accent-2) 4%,var(--ed-surface))}
.bk-house__ic{inline-size:40px;block-size:40px;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,var(--ed-accent) 16%,var(--ed-surface));color:var(--ed-accent-2)}
.bk-house__ic svg{inline-size:22px;block-size:22px;stroke-width:1.9}
.bk .bk-house__h{margin:1px 0 4px;font-family:var(--ed-font);font-size:14.5px;font-weight:700;line-height:1.35;letter-spacing:0;color:var(--ed-ink)}
.bk-house__t{margin:0;font-size:13.5px;line-height:1.6;color:var(--ed-ink);max-inline-size:62ch}
.bk-house__list{margin:9px 0 0;padding-block-start:9px;border-block-start:1px solid color-mix(in srgb,var(--ed-accent-2) 12%,var(--ed-rule));
  font-size:13px;line-height:1.5;color:var(--ed-muted);min-block-size:calc(1.5em + 10px)}
.bk-house__list.is-skel::before{content:"";display:inline-block;inline-size:min(17rem,80%);block-size:.75em;border-radius:6px;background:var(--ed-surface-2);vertical-align:middle}
.bk .bk-house__a{color:var(--ed-accent-2);font-weight:650;text-decoration:underline;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--ed-accent-2) 35%,transparent);white-space:nowrap}
.bk .bk-house__a:hover{text-decoration-color:currentColor}

/* ---- the calendar, then (a note,) the reserved days and the chosen day ---- */
.bk-app{display:grid;gap:12px;min-inline-size:0}
.bk-cal{position:relative;background:var(--ed-surface);border:1px solid var(--ed-rule);border-radius:var(--ed-radius-lg);padding:8px 4px 12px}
.bk-cal__head{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:4px;padding:0 2px 4px}
.bk .bk-cal__title{margin:0;text-align:center;font-family:var(--ed-font-display);font-weight:500;font-size:1.1rem;line-height:1.3;letter-spacing:-.01em;color:var(--ed-ink);min-block-size:1.3em}
.bk-cal__nav{appearance:none;inline-size:44px;block-size:44px;margin:0;padding:0;border:1px solid transparent;border-radius:50%;background:transparent;color:var(--ed-ink);display:grid;place-items:center;cursor:pointer}
.bk-cal__nav:hover:not(:disabled){background:var(--ed-surface-2)}
.bk-cal__nav:disabled{opacity:.28;cursor:default}
.bk-cal__nav svg{inline-size:20px;block-size:20px;stroke-width:2}
[dir=rtl] .bk-cal__nav svg{transform:scaleX(-1)}
.bk-cal__body{position:relative}
.bk-cal__row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.bk-cal__wd{padding-block:6px 6px;text-align:center;font-size:11px;font-weight:650;line-height:1.2;letter-spacing:.02em;color:var(--ed-muted)}
[dir=rtl] .bk-cal__wd{letter-spacing:0;font-size:12.5px}

/* a day: the whole cell is the target (>=44px), the rounded block inside carries the state */
.bk-day{position:relative;block-size:var(--bk-cell-h);padding:2px;outline:none;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none}
.bk-day.is-skel{cursor:default}
.bk-day__in{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;block-size:100%;border-radius:var(--ed-radius)}
.bk-day__n{font-size:14px;font-weight:650;line-height:1;font-variant-numeric:tabular-nums;color:var(--ed-ink)}
.bk-day__c{font-size:10.5px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums;color:var(--ed-muted);min-block-size:1em;white-space:nowrap;max-inline-size:100%;overflow:hidden}
/* "yours": a small check on the block's corner, ringed in the card's white so it never touches a two-digit number */
.bk-day__m{display:none;position:absolute;inset-block-start:-4px;inset-inline-end:-4px;inline-size:16px;block-size:16px;border-radius:50%;border:2px solid var(--ed-surface);background:var(--ed-accent-2);color:#fff;place-items:center;z-index:1}
.bk-day__m svg{inline-size:8px;block-size:8px;stroke-width:3.6}
.bk-day.is-mine .bk-day__m{display:grid}
@media (hover:hover){
  .bk-day.is-open:not(.is-sel):hover .bk-day__in{background:var(--ed-surface-2)}
  .bk-day.is-few:not(.is-sel):hover .bk-day__in{background:color-mix(in srgb,#B98A2F 22%,var(--ed-surface))}
  .bk-day.is-off:not(.is-sel):hover .bk-day__in{background:color-mix(in srgb,var(--ed-surface-2) 55%,var(--ed-surface))}
  .bk-day.is-adj:hover .bk-day__n{color:var(--ed-muted)}
}
.bk-day.is-few .bk-day__in{background:var(--bk-warn-bg)}
.bk-day.is-few .bk-day__c{color:var(--bk-warn)}
.bk-day.is-full .bk-day__in{background:repeating-linear-gradient(135deg,transparent 0 5px,color-mix(in srgb,var(--ed-ink) 7%,transparent) 5px 6.5px),var(--ed-surface-2)}
.bk-day.is-full .bk-day__n{color:var(--ed-muted)}
.bk-day.is-full .bk-day__c{color:#4F545B;font-weight:700;font-size:10.5px;letter-spacing:.01em}      /* 6.9:1 on the hatch */
.bk-day.is-off{cursor:default}
.bk-day.is-off .bk-day__n{color:color-mix(in srgb,var(--ed-muted) 62%,var(--ed-surface));font-weight:500}
/* the neighbouring months' days: the grid's frame, faint */
.bk-day.is-adj .bk-day__n{color:color-mix(in srgb,var(--ed-muted) 38%,var(--ed-surface));font-weight:450}
.bk-day.is-mine .bk-day__in{box-shadow:inset 0 0 0 1.5px var(--ed-accent-2)}
.bk-day.is-mine .bk-day__n{color:var(--ed-accent-2)}
.bk-day.is-from .bk-day__in{outline:1.5px dashed var(--ed-accent-2);outline-offset:-4px;box-shadow:none}
.bk-day.is-today .bk-day__n{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:var(--ed-accent)}
.bk-day.is-sel .bk-day__in{background:var(--ed-accent-2);box-shadow:0 1px 2px rgba(28,30,34,.12),0 4px 12px color-mix(in srgb,var(--ed-accent-2) 28%,transparent)}
.bk-day.is-sel .bk-day__n,.bk-day.is-sel .bk-day__c{color:#fff}
.bk-day.is-sel .bk-day__c{opacity:.85}
.bk-day.is-sel.is-today .bk-day__n{text-decoration-color:rgba(255,255,255,.7)}
.bk-day.is-sel .bk-day__m{background:#fff;color:var(--ed-accent-2);border-color:var(--ed-accent-2)}
.bk-day.is-sel.is-full .bk-day__in,.bk-day.is-sel.is-off .bk-day__in{background:color-mix(in srgb,var(--ed-accent-2) 62%,var(--ed-surface-2))}
/* focus: the dashboard's own ring (body.dx-app :focus-visible) is a square on the cell; draw it on the day's block */
#ed .bk-day:focus-visible{box-shadow:none;outline:none}
#ed .bk-day:focus-visible .bk-day__in{box-shadow:0 0 0 2px var(--ed-surface),0 0 0 4px var(--ed-accent)}
/* loading: the month's shape is there at once (6 rows, the day numbers), the counts arrive without a jump */
.bk-day.is-skel .bk-day__in{background:var(--ed-surface-2)}
.bk-day.is-skel .bk-day__n{color:color-mix(in srgb,var(--ed-muted) 55%,var(--ed-surface-2))}
.bk-cal__grid.is-loading .bk-day.is-skel .bk-day__in{animation:bkPulse 1.3s ease-in-out infinite}
@keyframes bkPulse{50%{opacity:.5}}
.bk-cal__err{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:10px;padding:16px;text-align:center;
  border-radius:var(--ed-radius);background:color-mix(in srgb,var(--ed-surface) 88%,transparent);font-size:13.5px;color:var(--ed-ink)}
.bk-cal__err p{margin:0;max-inline-size:32ch}

/* the legend under the grid: a sample of each look, in words */
.bk .bk-legend{list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px;margin:10px 0 0;padding:11px 10px 0;border-block-start:1px solid var(--ed-rule);font-size:12px;line-height:1.3;color:var(--ed-muted)}
.bk-legend__i{display:inline-flex;align-items:center;gap:7px;margin:0}
.bk-legend__sw{position:relative;display:inline-grid;place-items:center;inline-size:28px;block-size:20px;border-radius:6px;border:1px solid var(--ed-rule);background:var(--ed-surface);font-size:9.5px;font-variant-numeric:tabular-nums;color:var(--ed-muted)}
.bk-legend__sw b{font-weight:650}
.bk-legend__sw--few{border-color:transparent;background:var(--bk-warn-bg);color:var(--bk-warn)}
.bk-legend__sw--full{border-color:transparent;background:repeating-linear-gradient(135deg,transparent 0 4px,color-mix(in srgb,var(--ed-ink) 9%,transparent) 4px 5.5px),var(--ed-surface-2)}
.bk-legend__sw--mine{border-color:transparent;box-shadow:inset 0 0 0 1.5px var(--ed-accent-2);color:var(--ed-accent-2)}
.bk-legend__sw--mine svg{inline-size:12px;block-size:12px;stroke-width:2.8}

/* ---- under the calendar: a hint, a notice, the reserved days ---- */
.bk-note{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.bk-note__t{margin:0;font-size:13.5px;line-height:1.55;color:var(--ed-muted)}
.bk-note--info,.bk-note--move{padding:12px 14px;border-radius:var(--ed-radius);background:var(--ed-surface-2)}
.bk-note--info .bk-note__t,.bk-note--move .bk-note__t{flex:1 1 15rem;color:var(--ed-ink)}
.bk-note--move{background:color-mix(in srgb,var(--ed-accent-2) 7%,var(--ed-surface));border:1px dashed color-mix(in srgb,var(--ed-accent-2) 40%,var(--ed-rule))}
.bk .bk-demo{flex:1;margin:0}
.bk .bk-demo a{color:var(--ed-accent-2);font-weight:650;text-decoration:underline;text-underline-offset:3px}
.bk .bk-mine__h{margin:0 0 8px;font-family:var(--ed-font);font-size:.8rem;font-weight:700;line-height:1.5;letter-spacing:.08em;text-transform:uppercase;color:var(--ed-muted)}
[dir=rtl] .bk .bk-mine__h{letter-spacing:0;text-transform:none}
.bk-mine__chips{display:flex;flex-wrap:wrap;gap:8px}
.bk-chip{appearance:none;display:inline-flex;align-items:center;gap:8px;min-block-size:44px;margin:0;padding:0 14px;border:1px solid var(--ed-rule);border-radius:999px;background:var(--ed-surface);font:inherit;font-size:13px;font-weight:600;color:var(--ed-ink);cursor:pointer}
.bk-chip:hover{border-color:color-mix(in srgb,var(--ed-accent) 45%,var(--ed-rule))}
.bk-chip svg{inline-size:16px;block-size:16px;color:var(--ed-muted)}
.bk-chip b{padding-inline-start:9px;border-inline-start:1px solid var(--ed-rule);font-weight:700;font-variant-numeric:tabular-nums;color:var(--ed-accent-2)}
.bk-chip.is-on{border-color:var(--ed-accent-2);box-shadow:inset 0 0 0 1px var(--ed-accent-2)}
.bk-chip:focus-visible{outline:none;box-shadow:var(--ed-focus)}

/* ---- the chosen day ---- */
.bk-card{display:grid;gap:8px;padding:16px 16px 15px;border:1px solid var(--ed-rule);border-radius:var(--ed-radius-lg);background:var(--ed-surface);animation:bkIn .18s cubic-bezier(.32,.72,0,1)}
@keyframes bkIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.bk .bk-card__date{margin:0;font-family:var(--ed-font-display);font-weight:500;font-size:1.2rem;line-height:1.25;letter-spacing:-.01em;color:var(--ed-ink);outline:none}
.bk-card__time{display:flex;align-items:center;gap:7px;margin:0;font-size:13.5px;color:var(--ed-ink)}
.bk-card__time svg{inline-size:17px;block-size:17px;color:var(--ed-muted)}
.bk-meter{display:flex;block-size:6px;margin-block:6px 0;border-radius:999px;background:var(--ed-surface-2);overflow:hidden}
.bk-meter i{display:block;block-size:100%}
.bk-meter__mine{background:var(--ed-accent-2)}
.bk-meter__taken{background:color-mix(in srgb,var(--ed-accent-2) 30%,var(--ed-surface))}
.bk-card__free{margin:0;font-size:13px;color:var(--ed-muted);font-variant-numeric:tabular-nums}
.bk-card__free.is-few{color:var(--bk-warn);font-weight:600}
.bk-card__full{margin:2px 0 0;padding:10px 12px;border-radius:var(--ed-radius);background:var(--ed-surface-2);font-size:13.5px;line-height:1.5;color:var(--ed-ink)}
.bk-card__why{margin:0;font-size:13.5px;line-height:1.5;color:var(--ed-muted)}
.bk-card--off .bk-card__date,.bk-card--full .bk-card__date{color:color-mix(in srgb,var(--ed-ink) 78%,var(--ed-muted))}

/* how many: a number with a − and a + */
.bk-form{display:grid;justify-items:start;gap:6px;margin-block-start:8px;padding-block-start:14px;border-block-start:1px solid var(--ed-rule)}
#ed .bk-form__l{display:block;margin:0;font-size:13.5px;font-weight:650;line-height:1.4;color:var(--ed-ink)}
.bk-step{display:inline-flex;align-items:center;gap:8px}
.bk-step__b{appearance:none;inline-size:44px;block-size:44px;margin:0;padding:0;border:1px solid var(--ed-rule);border-radius:50%;background:var(--ed-surface);color:var(--ed-ink);font:inherit;font-size:21px;line-height:1;display:grid;place-items:center;cursor:pointer;transition:transform .08s}
.bk-step__b:hover:not(:disabled){border-color:color-mix(in srgb,var(--ed-accent) 45%,var(--ed-rule))}
.bk-step__b:active:not(:disabled){transform:scale(.96)}
.bk-step__b:disabled{opacity:.35;cursor:default}
#ed .bk-step__i{inline-size:5.6em;min-inline-size:0;min-block-size:44px;margin:0;padding:6px 8px;border:1px solid var(--ed-rule);border-radius:var(--ed-radius);background:var(--ed-surface);color:var(--ed-ink);
  font-family:var(--ed-font);font-size:18px;font-weight:650;text-align:center;font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield}
#ed .bk-step__i::-webkit-inner-spin-button,#ed .bk-step__i::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
#ed .bk-step__i:focus{outline:none;border-color:var(--ed-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--ed-accent) 22%,transparent)}
.bk-form__help{margin:0;font-size:12.5px;line-height:1.45;color:var(--ed-muted)}
.bk-form__note{margin:0;font-size:12.5px;line-height:1.5;color:var(--ed-muted);max-inline-size:56ch}
.bk-form__note:empty{display:none}
.bk-form__note.is-warn{color:var(--bk-warn)}
.bk-go{justify-self:start;margin-block-start:6px;min-block-size:44px;max-inline-size:100%;white-space:normal;text-align:center;line-height:1.3}

/* the reservation */
.bk-card--mine{border-color:color-mix(in srgb,var(--ed-ok) 32%,var(--ed-rule));background:color-mix(in srgb,var(--ed-ok) 5%,var(--ed-surface))}
.bk-res__top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start}
.bk-res__ic{inline-size:32px;block-size:32px;border-radius:50%;display:grid;place-items:center;background:var(--ed-ok);color:#fff}
.bk-res__ic svg{inline-size:18px;block-size:18px;stroke-width:2.5}
.bk .bk-res__t{margin:5px 0 0;font-family:var(--ed-font);font-size:15px;font-weight:650;line-height:1.45;letter-spacing:0;color:var(--ed-ink);outline:none}
.bk-res__next,.bk-res__win{margin:2px 0 0;font-size:13.5px;line-height:1.55;color:var(--ed-ink)}
.bk-res__used,.bk-res__lock{margin:0;font-size:13px;color:var(--ed-muted);font-variant-numeric:tabular-nums}
.bk-res__stale{margin:2px 0 0;padding:9px 12px;border-radius:var(--ed-radius);background:#FBF4E4;border:1px solid #EEDFB8;color:#6B4E16;font-size:13.5px;line-height:1.5}
.bk-res__acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-block-start:6px}
.bk-res__acts .bk-send{margin-inline-start:auto}
.bk-res__edit,.bk-res__confirm{display:grid;gap:6px}
.bk-res__edit .bk-form{border-block-start:0;padding-block-start:0;margin-block-start:0}
.bk-res__ask{margin:4px 0 0;font-size:13.5px;font-weight:650;color:var(--ed-ink)}
.bk .bk-danger{color:var(--ed-danger)}
.bk .bk-danger:hover{border-color:color-mix(in srgb,var(--ed-danger) 45%,var(--ed-rule))}
.bk .bk-danger-solid{background:var(--ed-danger);border-color:var(--ed-danger);color:#fff}
.bk .bk-danger-solid:hover{background:color-mix(in srgb,var(--ed-danger) 88%,#000)}
.bk-move__ask{margin:4px 0 0;font-size:13.5px;font-weight:650;line-height:1.5;color:var(--ed-ink)}

/* what just happened (a flash, said once) and what went wrong where it happened */
.bk-flash{margin:0;padding:9px 12px;border-radius:var(--ed-radius);font-size:13.5px;line-height:1.5;outline:none}
.bk-flash--ok{background:color-mix(in srgb,var(--ed-ok) 11%,var(--ed-surface));color:#2F5A3B}
.bk-flash--err{background:#FBF4E4;border:1px solid #EEDFB8;color:#6B4E16}
.bk-flash__more{display:inline}
.bk-msg{font-size:13px;line-height:1.5}
.bk-msg:empty{display:none}
.bk-msg.is-err{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:9px 12px;border-radius:var(--ed-radius);background:color-mix(in srgb,var(--ed-danger) 7%,var(--ed-surface));color:#8A342D}
.bk .bk-msg__a{color:inherit;font-weight:650;text-decoration:underline;text-underline-offset:3px}

/* ---- sizes: a phone (360-430) keeps 45px columns; a wide panel gets roomier cells and cards. (A container query
        styles the container's DESCENDANTS only: the taller cells are set on .bk-cal, not on .bk itself.) ---- */
@container bk (min-width:520px){
  .bk-cal{--bk-cell-h:54px}
  .bk-cal{padding:12px 12px 14px}
  .bk-day__n{font-size:15px}
  .bk-day__c{font-size:11px}
  .bk-card{padding:18px 20px 17px}
}
@container bk (max-width:519px){
  .bk .bk-legend{display:grid;grid-template-columns:repeat(2,max-content);gap:8px 22px}
  .bk-go{justify-self:stretch}
  .bk-res__acts .bk-send{margin-inline-start:0}
}
@media (prefers-reduced-motion:reduce){
  .bk-card{animation:none}
  .bk-cal__grid.is-loading .bk-day.is-skel .bk-day__in{animation:none}
  .bk-step__b{transition:none}
  .bk-step__b:active:not(:disabled){transform:none}
}