/* ============================================================
   MERIK DIALOGS, styling for mk-dialog.js
   Replaces the browser's alert / confirm / prompt boxes, which
   cannot be styled and ignore the site's theme.

   Self-contained on purpose: this loads on the public site, in
   the admin panel and on the lesson page, and those three do not
   share a stylesheet. Colours are literal rather than taken from
   variables for the same reason: the lesson page defines a
   different --surface from the rest of the site.
   ============================================================ */

.mk-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;                 /* above sticky headers and the chat widget */
  background: rgba(9, 13, 19, .72);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  overflow-y: auto;
  animation: mk-fade .14s ease-out;
}
@keyframes mk-fade { from { opacity: 0; } to { opacity: 1; } }

.mk-dialog {
  background: #ffffff;
  color: #16202a;
  border-radius: 14px;
  width: 100%;
  max-width: 440px;
  max-height: 88vh;
  overflow-y: auto;
  padding: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
  animation: mk-rise .16s ease-out;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.55;
}
@keyframes mk-rise { from { transform: translateY(8px); opacity: .6; } to { transform: none; opacity: 1; } }

.mk-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.mk-dialog-title { font-weight: 700; font-size: 1.04rem; }
.mk-dialog-sub   { font-size: .8rem; color: #66757f; margin-top: 2px; }
.mk-dialog-close {
  background: none; border: 0; cursor: pointer;
  font-size: 1.6rem; line-height: 1; padding: 0 2px;
  color: #93a2ab; font-family: inherit;
}
.mk-dialog-close:hover { color: #16202a; }

.mk-dialog-body { margin-top: 10px; }
.mk-message { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.mk-hint    { margin: 0 0 10px; font-size: .84rem; color: #66757f; }

.mk-input, .mk-textarea {
  width: 100%; margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid #d6dee4; border-radius: 9px;
  font: inherit; font-size: .92rem; color: inherit;
  background: #fbfcfd;
  resize: vertical;
}
.mk-input:focus, .mk-textarea:focus {
  outline: none; border-color: #00bcd4;
  box-shadow: 0 0 0 3px rgba(0, 188, 212, .16);
}

/* One-tap reasons, so reporting a problem does not require writing a sentence */
.mk-choices { display: flex; flex-direction: column; gap: 6px; }
.mk-choice {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 9px 11px; border: 1px solid #e2e8ed; border-radius: 9px;
  cursor: pointer; font-size: .88rem; transition: border-color .14s, background .14s;
}
.mk-choice:hover { border-color: #00bcd4; background: rgba(0, 188, 212, .05); }
.mk-choice input { margin-top: .22em; accent-color: #00bcd4; flex-shrink: 0; }
.mk-choice span  { min-width: 0; }

.mk-dialog-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-top: 20px; flex-wrap: wrap;
}
.mk-btn {
  padding: 10px 18px; border-radius: 9px; cursor: pointer;
  font: inherit; font-size: .88rem; font-weight: 600;
  border: 1px solid transparent; transition: filter .14s, background .14s;
}
.mk-btn:focus-visible { outline: 2px solid #00bcd4; outline-offset: 2px; }
.mk-btn-primary { background: #00bcd4; color: #fff; }
.mk-btn-danger  { background: #dc2626; color: #fff; }
.mk-btn-primary:hover, .mk-btn-danger:hover { filter: brightness(1.07); }
.mk-btn-quiet   { background: #eef2f5; color: #3c4b56; }
.mk-btn-quiet:hover { background: #e2e8ed; }

/* Phones: full-width buttons, and the confirming action on top where the
   thumb already is. */
@media (max-width: 420px) {
  .mk-dialog-actions { flex-direction: column-reverse; }
  .mk-btn { width: 100%; }
}

/* Dark mode, both the OS preference and the site's own toggle. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mk-dialog { background: #131c24; color: #e8eef2; }
  :root:not([data-theme="light"]) .mk-dialog-sub,
  :root:not([data-theme="light"]) .mk-hint    { color: #9aacb6; }
  :root:not([data-theme="light"]) .mk-dialog-close:hover { color: #fff; }
  :root:not([data-theme="light"]) .mk-input,
  :root:not([data-theme="light"]) .mk-textarea { background: #0e161d; border-color: #2a3945; }
  :root:not([data-theme="light"]) .mk-choice   { border-color: #2a3945; }
  :root:not([data-theme="light"]) .mk-choice:hover { background: rgba(0, 188, 212, .1); }
  :root:not([data-theme="light"]) .mk-btn-quiet { background: #22303b; color: #cfdae2; }
  :root:not([data-theme="light"]) .mk-btn-quiet:hover { background: #2b3b48; }
}
:root[data-theme="dark"] .mk-dialog { background: #131c24; color: #e8eef2; }
:root[data-theme="dark"] .mk-dialog-sub,
:root[data-theme="dark"] .mk-hint    { color: #9aacb6; }
:root[data-theme="dark"] .mk-dialog-close:hover { color: #fff; }
:root[data-theme="dark"] .mk-input,
:root[data-theme="dark"] .mk-textarea { background: #0e161d; border-color: #2a3945; }
:root[data-theme="dark"] .mk-choice   { border-color: #2a3945; }
:root[data-theme="dark"] .mk-choice:hover { background: rgba(0, 188, 212, .1); }
:root[data-theme="dark"] .mk-btn-quiet { background: #22303b; color: #cfdae2; }
:root[data-theme="dark"] .mk-btn-quiet:hover { background: #2b3b48; }