/* Scheduling screens. Extends style.css and adds nothing to it: no token block, no token
   redefined, no existing class rewritten. Every new name is prefixed mt-, and every colour,
   radius and easing is read from the tokens style.css already owns.
   Logical properties only — inline-start is the right-hand side here. */

/* A card title. It is an h2 because it is the first heading level under the page h1 and a
   skipped level breaks the outline — but it must not look like style.css's h2, and above all
   it must not inherit --serif: Playfair carries no Hebrew glyphs at all. */
h2.mt-h{font-family:var(--heb);font-size:.95rem;font-weight:400;margin:0 0 .5rem}

/* ---------- month grid ----------------------------------------------------------------
   The one genuinely new component. Hairlines are drawn by a 1px gap over --line, the site's
   grid idiom, rather than by borders. Sunday…Saturday are emitted in DOM order and dir=rtl
   places Sunday on the right: nothing here is mirrored in JS. */
.mt-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:12px;overflow:hidden}
.mt-cal>*{background:var(--paper2);min-height:3.1rem;padding:.35rem .45rem;text-align:start}
.mt-cal .mt-cal-h{background:var(--sand);min-height:0;font-size:.7rem;letter-spacing:.04em;
  color:var(--ink3);text-align:center}
button.mt-cal-d{border:0;border-radius:0;font-family:var(--heb);font-weight:300;
  display:flex;flex-direction:column;gap:.15rem;align-items:flex-start;cursor:pointer;width:100%}
button.mt-cal-d:hover{background:var(--sand)}
button.mt-cal-d[disabled]{cursor:default;background:var(--paper);color:var(--ink3)}
button.mt-cal-d.mt-on{box-shadow:inset 0 0 0 2px var(--accent)}
.mt-cal-n{font-family:var(--mono);font-size:.8rem;font-variant-numeric:tabular-nums;
  direction:ltr;unicode-bidi:isolate}
.mt-cal-tag{font-size:.66rem;line-height:1.3;color:var(--ink3);overflow:hidden}
button.mt-cal-d.mt-closed .mt-cal-tag{color:var(--crit)}
button.mt-cal-d.mt-today .mt-cal-n{color:var(--accent-ink);font-weight:500}

/* ---------- weekly windows ---------- */
.mt-lane{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:.5rem;align-items:start;
  padding:.45rem 0;border-block-end:1px solid var(--line)}
.mt-lane:last-child{border-block-end:0}
.mt-lane-d{font-size:.86rem;color:var(--ink2);padding-block-start:.45rem}
.mt-wins{display:flex;flex-direction:column;gap:.4rem}
.mt-win{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.mt-win input{max-width:7.5rem}
.mt-off{color:var(--ink3);font-size:.82rem;padding-block-start:.5rem}

/* A label that is read but not seen, for controls whose meaning is carried visually by the
   row or the column header. A real <label>, not aria-label: it survives translation and it
   enlarges the hit area of the control it wraps. Clip-path rather than display:none, which
   would remove it from the accessibility tree along with the pixels. */
.mt-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}
.mt-win>label{display:flex;align-items:center;gap:.3rem}
/* WCAG 2.2 SC 2.5.8: 24x24 CSS px minimum. button.link is 23px tall by default. */
button.mt-tap{min-height:1.9rem;padding:.45rem .7rem}

/* ---------- availability troubleshooting ---------- */
.mt-prev{display:grid;grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr));gap:.4rem}
.mt-slot{border:1px solid var(--line);border-radius:9px;background:var(--paper2);
  padding:.4rem .55rem;display:flex;flex-direction:column;gap:.1rem}
.mt-slot b{font-family:var(--mono);font-weight:400;font-size:.84rem;font-variant-numeric:tabular-nums;
  direction:ltr;unicode-bidi:isolate}
.mt-slot span{font-size:.72rem;color:var(--ink3)}
.mt-slot.mt-yes{border-color:rgba(63,107,69,.4);background:var(--ok-bg)}
.mt-slot.mt-yes span{color:var(--ok)}

/* ---------- the booking address ---------- */
.mt-copy{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.mt-copy code{font-family:var(--mono);font-size:.8rem;direction:ltr;unicode-bidi:isolate;
  background:var(--sand);border-radius:8px;padding:.35rem .6rem;overflow-wrap:anywhere}

/* ---------- key/value blocks in the detail panel ---------- */
.mt-kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.3rem .7rem;
  margin:0;font-size:.88rem}
.mt-kv dt{color:var(--ink3);font-size:.76rem;padding-block-start:.1rem}
.mt-kv dd{margin:0;overflow-wrap:anywhere}

/* ---------- native dialog, used for the destructive confirmations only ---------- */
.mt-dlg{border:1px solid var(--line);border-radius:12px;background:var(--paper2);color:var(--ink);
  font-family:var(--heb);font-weight:300;font-size:15px;padding:1.1rem 1.25rem;width:min(26rem,92vw);
  box-shadow:0 1px 2px rgba(23,20,15,.04),0 24px 60px -30px rgba(23,20,15,.35)}
.mt-dlg::backdrop{background:rgba(23,20,15,.35)}
.mt-dlg .mt-h{font-size:1rem}
button.mt-danger{background:var(--crit);border-color:var(--crit);color:var(--paper)}
button.mt-danger:hover{background:#7A3227}

/* ---------- keyboard selection in the meeting queue ----------
   Same rail the mail queue uses for unread, so the two lists read alike. */
.mail-row.mt-sel{box-shadow:inset 3px 0 0 var(--accent);background:var(--sand)}

/* ---------- mobile: 390px must be usable, not merely non-broken ----------
   A table that cannot fit becomes stacked rows, each cell labelled from data-l. */
@media (max-width:560px){
  .mt-stack thead{display:none}
  .mt-stack tr{display:block;border-block-end:1px solid var(--line);padding:.35rem 0}
  .mt-stack tr:last-child{border-block-end:0}
  .mt-stack td{display:flex;gap:.7rem;justify-content:space-between;align-items:baseline;
    flex-wrap:wrap;border:0;padding:.2rem .75rem}
  /* a cell's secondary lines are their own flex items; without this they queue up beside the
     value on one line instead of stacking under it */
  .mt-stack td>div{flex:0 0 100%;text-align:start}
  .mt-stack td[data-l]::before{content:attr(data-l);color:var(--ink3);font-size:.72rem;flex:0 0 auto}
  .mt-lane{grid-template-columns:minmax(0,1fr)}
  .mt-lane-d{padding-block-start:0}
  .mt-cal>*{min-height:2.6rem;padding:.25rem}
  .mt-cal-tag{display:none}
}