/* ==========================================================================
   MASAR v9 — 10-dialogs.css
   Every popup in the product — record dialogs (UI.drawer), decisions and
   forms (UI.modal), the peek card and the map popups — in one language:
     · a head that says WHAT this is: a coloured mark, a kicker, the name,
       one line, the states as pills; a thin band of the record's colour
       along the top and the khatam lattice fading in from the far edge
     · the three or four figures that decide what to do next, large
     · facts as a tile grid, grouped under quiet section rules
     · a foot that carries the actions
   Tokens only; both themes; logical properties for RTL.
   ========================================================================== */

/* ---- the frame --------------------------------------------------------- */
.m-drawer{border-radius:20px;border:1px solid var(--line);box-shadow:var(--sh-xl),0 0 0 1px rgba(255,255,255,.02)}
.m-modal{border-radius:20px;overflow:hidden;border:1px solid var(--line)}
.m-modal-scrim,.m-drawer-scrim{backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.m-modal__head,.m-drawer__head{display:block;padding:0;border:0}
.m-modal--tabbed .m-modal__head{padding:0}

/* ---- the head ---------------------------------------------------------- */
.m-dlg__head{
  position:relative;isolation:isolate;display:flex;align-items:flex-start;gap:13px;
  padding:18px 22px 15px;border-bottom:1px solid var(--line-subtle);
}
.m-dlg__head--hero{
  background:linear-gradient(180deg,color-mix(in srgb,var(--dc) 10%,var(--surface)) 0%,var(--surface) 100%);
}
.m-dlg__head--hero::before{
  content:'';position:absolute;inset-inline:0;top:0;height:3px;background:var(--dc);
}
.m-dlg__head--hero::after{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--m-khatam) right top / 88px 88px repeat;
  -webkit-mask-image:linear-gradient(to left,#000 0%,transparent 45%);
          mask-image:linear-gradient(to left,#000 0%,transparent 45%);
}
html[dir="rtl"] .m-dlg__head--hero::after{
  background-position:left top;
  -webkit-mask-image:linear-gradient(to right,#000 0%,transparent 45%);
          mask-image:linear-gradient(to right,#000 0%,transparent 45%);
}
.m-dlg__ic{
  flex:0 0 auto;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--dc) 16%,var(--surface));color:var(--dc);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--dc) 26%,transparent);
}
.m-dlg__ic svg{width:22px;height:22px}
.m-dlg__x{display:flex;flex-direction:column;gap:2px;min-width:0}
.m-dlg__kicker{font:650 10.5px/14px var(--font);letter-spacing:.08em;text-transform:uppercase;
  color:color-mix(in srgb,var(--dc) 70%,var(--text))}
.m-dlg__x h2{font:680 18px/24px var(--font);letter-spacing:-.012em;color:var(--text);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;overflow-wrap:anywhere}
.m-dlg__x p{font:var(--ty-body-sm);color:var(--text-2);overflow-wrap:anywhere;unicode-bidi:plaintext;text-align:start}
.m-dlg__x h2{unicode-bidi:plaintext;text-align:start}
[dir="rtl"] .m-dlg__x p,[dir="rtl"] .m-dlg__x h2{text-align:right}
.m-dlg__pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.m-dlg__head .m-icon-btn{margin-inline-start:4px;margin-top:-2px;background:color-mix(in srgb,var(--surface) 70%,transparent)}

/* ---- the figures ------------------------------------------------------- */
.m-dlg__stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:1px;
  background:var(--line-subtle);border-bottom:1px solid var(--line-subtle);flex:0 0 auto;
}
.m-dlg__stat{display:flex;flex-direction:column;gap:3px;padding:11px 18px;background:var(--surface);min-width:0}
.m-dlg__stat > span{font:var(--ty-label-sm);color:var(--text-3);text-transform:uppercase;letter-spacing:.05em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-dlg__stat > b{font:700 20px/24px var(--font);color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.m-dlg__stat > b small{font:var(--ty-caption);color:var(--text-3);margin-inline-start:3px;font-weight:500}
.m-dlg__stat > i{font:var(--ty-caption);font-style:normal;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-dlg__stat.is-crit > b{color:var(--critical)}
.m-dlg__stat.is-warn > b{color:var(--warn)}
.m-dlg__stat.is-ok > b{color:var(--ok)}
.m-dlg__stat.is-info > b{color:var(--info)}

/* ---- the body ---------------------------------------------------------- */
.m-drawer__body{background:var(--surface-subtle);padding:16px 20px 20px;display:flex;flex-direction:column;gap:12px}
.m-drawer__body > *{flex:0 0 auto}
.m-drawer__body--flush{padding:0;gap:0}
.m-modal__body{padding:18px 22px}

/* facts: every label/value list inside a dialog reads as a tile grid */
.m-facts,
.m-drawer__body .p-kvs:not(.p-kvs--grid),
.m-modal__body .p-kvs:not(.p-kvs--grid),
.m-peek .m-peek__kv{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;
}
.m-facts--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.m-facts__i,
.m-drawer__body .p-kvs:not(.p-kvs--grid) > .p-kv,
.m-modal__body .p-kvs:not(.p-kvs--grid) > .p-kv{
  display:flex;flex-direction:column;align-items:stretch;gap:3px;
  padding:10px 14px;margin:0;border:0;background:var(--surface);min-width:0;
  outline:1px solid var(--line-subtle);
}
.m-facts__i > span,
.m-drawer__body .p-kvs:not(.p-kvs--grid) > .p-kv > span,
.m-modal__body .p-kvs:not(.p-kvs--grid) > .p-kv > span{
  flex:0 0 auto;font:600 10px/13px var(--font);letter-spacing:.05em;text-transform:uppercase;color:var(--text-3)
}
.m-facts__i > b,
.m-drawer__body .p-kvs:not(.p-kvs--grid) > .p-kv > b,
.m-modal__body .p-kvs:not(.p-kvs--grid) > .p-kv > b{
  font:600 13px/18px var(--font);color:var(--text);min-width:0;overflow-wrap:anywhere
}
.m-facts__i.is-wide,

.m-drawer__body .p-kvs:not(.p-kvs--grid) > .p-kv:last-child:nth-child(odd),
.m-modal__body .p-kvs:not(.p-kvs--grid) > .p-kv:last-child:nth-child(odd){grid-column:1 / -1}
.m-facts--3 > .m-facts__i:last-child:nth-child(odd){grid-column:auto}
@media (max-width:640px){
  .m-facts,.m-facts--3,.m-drawer__body .p-kvs:not(.p-kvs--grid),.m-modal__body .p-kvs:not(.p-kvs--grid){grid-template-columns:minmax(0,1fr)}
}

/* sections: a quiet rule with the title on it */
.m-sec{display:flex;flex-direction:column;gap:9px}
.m-sec__h,
.m-drawer__body .p-drawer-sec > h4,.m-drawer__body .p-block > h4,
.m-modal__body .p-drawer-sec > h4,.m-modal__body .p-block > h4{
  display:flex;align-items:center;gap:8px;margin:4px 0 0;
  font:650 11px/14px var(--font);letter-spacing:.07em;text-transform:uppercase;color:var(--text-2);
}
.m-sec__h::after,
.m-drawer__body .p-drawer-sec > h4::after,.m-drawer__body .p-block > h4::after,
.m-modal__body .p-drawer-sec > h4::after,.m-modal__body .p-block > h4::after{
  content:'';flex:1 1 auto;height:1px;background:var(--line)
}
.m-sec__h svg{opacity:.7;flex:0 0 auto}
.m-sec__h em{order:3;font-style:normal;font-weight:600;letter-spacing:0;text-transform:none;color:var(--text-3)}
.m-drawer__body .p-drawer-sec{margin:0;display:flex;flex-direction:column;gap:9px}
.m-drawer__body .p-block{padding:12px 14px;border:1px solid var(--line-subtle);border-radius:12px;background:var(--surface)}
.m-drawer__body .m-timeline,.m-drawer__body .m-table-wrap,.m-drawer__body .m-activity{
  background:var(--surface);border:1px solid var(--line-subtle);border-radius:12px;padding:10px 12px
}
.m-drawer__body .m-table-wrap{padding:0;overflow:auto}
.m-drawer__body .m-timeline{padding:14px 14px 14px 0;padding-inline-start:36px}
.m-drawer__body .m-timeline::before{inset-inline-start:21px;top:18px;bottom:18px}
.m-drawer__body .m-banner{border-radius:12px}

/* ---- the foot ---------------------------------------------------------- */
.m-drawer__foot,.m-modal__foot{padding:12px 20px;background:var(--surface);border-top:1px solid var(--line);gap:8px;flex-wrap:wrap}

/* ---- the peek card: the head does the talking now --------------------- */
.m-peek{gap:12px}
.m-peek .m-peek__kv dt,.m-peek .m-peek__kv dd{margin:0;padding:10px 14px;background:var(--surface)}
.m-peek .m-peek__kv{grid-template-columns:auto 1fr}
.m-peek .m-peek__kv dt{font:600 10px/18px var(--font);letter-spacing:.05em;text-transform:uppercase;color:var(--text-3)}
.m-peek .m-peek__kv dd{font:600 13px/18px var(--font);color:var(--text);text-align:end}

/* ---- map popups speak the same way ------------------------------------ */
.m-pop__rule{height:3px}
.m-pop__kv{
  gap:1px;background:var(--line-subtle);border:1px solid var(--line-subtle);border-radius:10px;overflow:hidden
}
.m-pop__kv dt,.m-pop__kv dd{margin:0;padding:6px 10px;background:var(--surface-raised)}
.m-pop__kv dt{font:600 9.5px/16px var(--font);letter-spacing:.05em;text-transform:uppercase}