/* Shared parts (build map S01). Every size, colour and space below is the prototype's
   inline style for the element named in the comment; colours go through tokens.css.
   The parts sit inside a phone column that is position: relative. */

/* Buttons. Sources: N5q «اخرج دون حفظ» / «تابع التعديل», N4 «أرسِل الاقتراح» (48 px),
   G2 «تابِع إلى التوصيل» (52 px), board 08 C5o «أبقِه» / «اسحب» (13 px text). */
.mt-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.mt-btn--h48 { height: 48px; }
.mt-btn--h52 { height: 52px; }
.mt-btn--text13 { font-size: 13px; }
.mt-btn--action { background: var(--action); color: var(--ground); }
.mt-btn--action[aria-disabled='true'] { background: var(--action-disabled); cursor: default; }
/* Ruling 15: the HTML's #4A5F8C border becomes --line-control on a navy ground. */
.mt-btn--outline { background: transparent; border: 1px solid var(--line-control); color: var(--ink-primary); }
.mt-btn--outline-light { background: transparent; border: 1px solid var(--structural-light); color: var(--ink-primary); }
.mt-btn--light { background: var(--structural-light); color: var(--ground); }
.mt-btn--danger { background: var(--error); color: var(--ground); }
.mt-btn-row { display: flex; gap: 8px; }
.mt-btn-row > .mt-btn { flex: 1 1 0%; }

/* Icon buttons: N5 back «رجوع» (44 × 44), N1p close «×» (44 × 44, 18 px, --ink-secondary). */
.mt-iconbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-primary);
  font-family: inherit;
  cursor: pointer;
}
.mt-close { margin: -8px -10px -8px 0; color: var(--ink-secondary); font-size: 18px; }

/* Header with back. Source: N5 «بيانات المحلّ والعنوان». */
.mt-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-light);
}
.mt-header__title {
  flex: 1 1 0%;
  min-width: 0;
  margin: 0;
  color: var(--ink-primary);
  font-size: 17px;
  font-weight: 600;
}

/* Scrim behind a sheet (z 40) or a dialog (z 60). Sources: N5q, board 08 C5o. */
.mt-scrim { position: absolute; inset: 0; z-index: 40; background: var(--scrim); }
.mt-scrim--dialog { z-index: 60; }

/* Bottom sheet. The HTML draws two kinds:
   layer  — N5q «تخرج دون حفظ؟»: --layer, padding 10 16 24, gap 12, title 20 px;
   ground — N1p «صورة المحلّ»: --ground, top line, padding 10 18 24, gap 10, title 17 px with «×». */
.mt-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 41;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
}
.mt-sheet--layer { gap: 12px; padding: 10px 16px 24px; background: var(--layer); }
.mt-sheet--ground { gap: 10px; padding: 10px 18px 24px; background: var(--ground); border-top: 1px solid var(--line-light); }
.mt-sheet__handle { align-self: center; width: 36px; height: 4px; border-radius: var(--radius-pill); background: var(--line-mid); }
.mt-sheet__titlerow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mt-sheet__title { margin: 0; color: var(--ink-primary); font-weight: 300; line-height: 1.4; }
.mt-sheet--layer .mt-sheet__title { font-size: 20px; }
.mt-sheet--ground .mt-sheet__title { flex: 1 1 0%; min-width: 0; font-size: 17px; }
.mt-sheet__text { margin: 0; color: var(--ink-secondary); font-size: 13px; line-height: 1.7; text-wrap: pretty; }
.mt-sheet__actions { margin-top: 4px; }

/* Centred dialog, for blocking, dangerous decisions. Source: board 08 C5o «اسحب العرض؟». */
.mt-dialog {
  position: absolute;
  top: 50%;
  left: 20px;
  right: 20px;
  transform: translateY(-50%);
  z-index: 61;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 16px 16px;
  border-radius: var(--radius-sheet);
  background: var(--layer);
  border: 1px solid var(--line-light);
}
.mt-dialog__title { margin: 0; color: var(--ink-primary); font-size: 17px; font-weight: 600; }
.mt-dialog__text { margin: 0; color: var(--ink-secondary); font-size: 12.5px; line-height: 1.7; }

/* Toast. Source: the app's toast (shown by say()): 80 px from the bottom, 150 px on the
   market views 'purch' (G2), 'delivery' and 'poopen' (its toastBottom); 2.2 s, 5 s with
   «تراجع», 8 s with an action. */
/* Above any open sheet, dialog or scrim (the sheets at 41, the viewer and the pop-ups at 60, «وصل
   طلبك» at 71), at its drawn place: a copy inside a sheet says so where the seller looks
   (Director text N1033, the second reviewer's O-069). */
.mt-toast {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 80px;
  margin: 0 auto;
  z-index: 80;
  width: max-content;
  max-width: 358px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--structural-light);
  color: var(--ground);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
}
.mt-toast--high { bottom: 150px; }
.mt-toast__text { white-space: nowrap; }
.mt-toast__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  margin: -12px -9px;
  padding: 0 6px;
  border: 0;
  background: transparent;
  color: var(--ground);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
  cursor: pointer;
}

/* Status by shape, one ink. Source: board 08 cards. */
.mt-status { display: inline-block; flex: 0 0 auto; box-sizing: border-box; }
.mt-status--ok { width: 9px; height: 9px; border-radius: var(--radius-pill); background: var(--success); }
.mt-status--problem { width: 12px; height: 3px; background: var(--error); }
.mt-status--cancelled { width: 9px; height: 9px; border-radius: var(--radius-pill); border: 2px solid var(--ink-tertiary); }
.mt-status--standby { width: 9px; height: 9px; border-radius: var(--radius-pill); border: 2px solid var(--structural-light); }

/* Visible focus for every control (ruling 14). The prototype draws none. */
.mt-btn:focus-visible,
.mt-iconbtn:focus-visible { outline: 2px solid var(--ink-primary); outline-offset: 2px; }
.mt-toast__link:focus-visible { outline: 2px solid var(--ground); outline-offset: 2px; }

/* Tap area of at least 44 × 44 px without changing the drawn look (Director text N549,
   point C): an invisible layer centred on the control, which takes the tap. */
.mt-hit { position: relative; }
.mt-hit::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, 44px);
  height: max(100%, 44px);
  transform: translate(-50%, -50%);
}

/* The waiting box (S41; the owner's Q-35, N1484: «جارٍ التحميل…», «لا يتوفّر اتصال بالإنترنت»,
   «حدث خطأ. يُرجى إعادة المحاولة.», «إعادة المحاولة»). No board draws it: its space and its words
   are T1e's empty state (board 16: 64 16 padding, 6 px gap, 15 px at 300, --ink-primary), and
   «إعادة المحاولة» is the shared 48 px outline button. Empty once its screen has its answer. */
.mt-wait { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 64px 16px; text-align: center; }
/* Done: nothing to see, but the live region stays rendered, so its next words are announced. */
.mt-wait[data-wait='done'] { padding: 0; }
.mt-wait__text { margin: 0; color: var(--ink-primary); font-size: 15px; font-weight: 300; line-height: 1.5; }
.mt-wait__text:focus { outline: none; }
.mt-wait__actions:empty { display: none; }
.mt-wait__actions { margin-top: 12px; }
.mt-wait__actions .mt-btn { padding: 0 24px; }
.mt-wait__actions .mt-btn:focus-visible { outline: 2px solid var(--ink-primary); outline-offset: 2px; }
/* Under a form's button (N1493): the form's own 16 px rhythm instead of the empty state's 64 px. */
.mt-wait--inline { padding: 16px 0 0; }