/* ui.css — shared UI primitives.
   These rules used to be injected by JavaScript at runtime. They're linked
   at the end of <head>, which is where the injected \3c style> tags landed,
   so the cascade order is unchanged. */

/* ═══ From ui.js — toasts, confirm sheet, alerts, image shimmer ═══ */
/* ── Toast container ── */
#mkToastContainer {
  position: fixed;
  /* sit above the bottom nav (72px) + home-bar on notched phones */
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: 99999;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  /* min() not supported in old Android inline styles — use clamp via calc */
  width: 92vw;
  max-width: 400px;
}

/* ── Individual toast ── */
.mk-toast {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 13px 14px;
  border-radius: 14px;
  font-size: 14px;        /* px beats rem on some Android WebViews */
  font-weight: 600;
  color: #ffffff;
  line-height: 1.35;
  box-shadow: 0 6px 28px rgba(0,0,0,0.22);
  pointer-events: all;
  cursor: pointer;
  /* start hidden — JS adds .mk-toast-in */
  opacity: 0;
  -webkit-transform: translateY(14px) scale(0.97);
  transform: translateY(14px) scale(0.97);
  -webkit-transition: opacity 0.28s ease,
                      -webkit-transform 0.28s cubic-bezier(0.34,1.56,0.64,1);
  transition: opacity 0.28s ease,
              transform 0.28s cubic-bezier(0.34,1.56,0.64,1);
  /* Prevent text from looking unstyled on slow font-load */
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  /* Force GPU layer — prevents blurry text during animation on Android */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: opacity, transform;
  /* Tap highlight — remove the grey flash on Android */
  -webkit-tap-highlight-color: transparent;
}

.mk-toast.mk-toast-in {
  opacity: 1;
  -webkit-transform: translateY(0) scale(1);
  transform: translateY(0) scale(1);
}

.mk-toast.mk-toast-out {
  opacity: 0;
  -webkit-transform: translateY(8px) scale(0.96);
  transform: translateY(8px) scale(0.96);
}

/* type backgrounds */
.mk-toast-success { background: linear-gradient(135deg, #1a9e5c, #27ae60); }
.mk-toast-error   { background: linear-gradient(135deg, #c0392b, #e74c3c); }
.mk-toast-warning { background: linear-gradient(135deg, #d68910, #f39c12); }
.mk-toast-info    { background: linear-gradient(135deg, #19378C, #2e5fcc); }

.mk-toast-icon {
  font-size: 20px !important;
  flex-shrink: 0;
  line-height: 1;
}

.mk-toast-msg {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  /* clamp long messages — prevents toast from stretching off-screen */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.mk-toast-close {
  background: none !important;
  border: none !important;
  outline: none !important;
  color: rgba(255,255,255,0.75);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 0 0 6px;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  /* Bigger touch target */
  min-width: 28px;
  min-height: 28px;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}

/* ── Confirm dialog overlay ── */
#mkConfirmDialog {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(0,0,0,0.46);
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: flex-end;
  align-items: flex-end;
  -webkit-justify-content: center;
  justify-content: center;
  opacity: 0;
  -webkit-transition: opacity 0.22s ease;
  transition: opacity 0.22s ease;
  -webkit-tap-highlight-color: transparent;
}

#mkConfirmDialog.mk-cfm-in  { opacity: 1; }

.mk-cfm-sheet {
  background: #ffffff;
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-width: 480px;
  padding: 0 0 max(1.25rem, calc(1.25rem + env(safe-area-inset-bottom, 0px)));
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  -webkit-transition: -webkit-transform 0.28s cubic-bezier(0.34,1.2,0.64,1);
  transition: transform 0.28s cubic-bezier(0.34,1.2,0.64,1);
  /* iOS rubber-band scroll leak */
  overscroll-behavior: contain;
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
}

#mkConfirmDialog.mk-cfm-in .mk-cfm-sheet {
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.mk-cfm-handle {
  width: 40px; height: 4px;
  background: #e0e0e0;
  border-radius: 4px;
  margin: 12px auto 0;
}

.mk-cfm-icon-wrap {
  width: 56px; height: 56px;
  border-radius: 18px;
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
  margin: 20px auto 14px;
}

.mk-cfm-icon-wrap .material-symbols-rounded {
  font-size: 28px !important;
}

.mk-cfm-title {
  text-align: center;
  font-size: 17px;
  font-weight: 800;
  color: #1a1a2e;
  padding: 0 1.5rem;
  margin-bottom: 8px;
  line-height: 1.3;
}

.mk-cfm-body {
  text-align: center;
  font-size: 14px;
  color: #666;
  line-height: 1.55;
  padding: 0 1.5rem;
  margin-bottom: 24px;
}

.mk-cfm-actions {
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  gap: 10px;
  padding: 0 1.25rem;
}

.mk-cfm-btn {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 14px;
  font-family: inherit;
  font-size: 15px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-transition: opacity 0.15s;
  transition: opacity 0.15s;
}
.mk-cfm-btn:active { opacity: 0.82; }

.mk-cfm-yes-danger  { background: #e74c3c; color: #fff; font-weight: 700; }
.mk-cfm-yes-warning { background: #f39c12; color: #fff; font-weight: 700; }
.mk-cfm-yes-info    { background: #19378C; color: #fff; font-weight: 700; }
.mk-cfm-no {
  background: #f5f5f5; color: #555;
  font-weight: 600;
  border: 1.5px solid #e8e8e8 !important;
}

/* ═══ From layout.js — focus rings (accessibility) ═══ */
*:focus {
  outline: 2px solid #007bff !important;
  outline-offset: 2px !important;
}

/* ═══ From layout.js — LayoutManager toasts (.mk-toast) ═══ */
.mk-toast{display:flex;align-items:center;gap:10px;width:100%;padding:12px 14px;border-radius:14px;font-family:'Inter',sans-serif;font-size:.875rem;font-weight:600;color:#fff;box-shadow:0 6px 24px rgba(0,0,0,.18);pointer-events:all;cursor:pointer;position:relative;overflow:hidden;opacity:0;transform:translateY(16px) scale(.97);transition:opacity .28s ease,transform .28s cubic-bezier(.34,1.56,.64,1);}
.mk-toast.mk-toast-show{opacity:1;transform:translateY(0) scale(1);}
.mk-toast.mk-toast-hide{opacity:0;transform:translateY(10px) scale(.96);transition:opacity .22s ease,transform .22s ease;}
.mk-toast-success{background:linear-gradient(135deg,#1a9e5c,#27ae60);}
.mk-toast-error{background:linear-gradient(135deg,#c0392b,#e74c3c);}
.mk-toast-warning{background:linear-gradient(135deg,#d68910,#f39c12);}
.mk-toast-info{background:linear-gradient(135deg,#19378C,#2e5fcc);}
.mk-toast-icon{font-size:20px!important;flex-shrink:0;font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 48;}
.mk-toast-msg{flex:1;line-height:1.35;}
.mk-toast-close{background:none;border:none;color:rgba(255,255,255,.7);font-size:18px;cursor:pointer;padding:0 0 0 6px;line-height:1;flex-shrink:0;pointer-events:all;transition:color .15s;}
.mk-toast-close:hover{color:#fff;}
.mk-toast-bar{position:absolute;bottom:0;left:0;height:3px;background:rgba(255,255,255,.35);border-radius:0 0 14px 14px;animation:mkBarShrink linear forwards;}
@keyframes mkBarShrink{from{width:100%}to{width:0%}}

/* ═══ From layout.js — confirm dialog (.mk-confirm-*) ═══ */
.mk-confirm-backdrop {
  position: fixed; inset: 0; z-index: 100000;
  background: rgba(0,0,0,0.45);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; transition: opacity 0.22s ease;
}
.mk-confirm-backdrop.mk-confirm-show { opacity: 1; }
.mk-confirm-sheet {
  background: #fff;
  border-radius: 20px 20px 0 0;
  width: 100%; max-width: 480px;
  padding: 0 0 calc(1rem + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.34,1.2,0.64,1);
  overflow: hidden;
}
.mk-confirm-backdrop.mk-confirm-show .mk-confirm-sheet {
  transform: translateY(0);
}
.mk-confirm-handle {
  width: 40px; height: 4px; background: #e0e0e0;
  border-radius: 4px; margin: 12px auto 0;
}
.mk-confirm-icon-wrap {
  width: 56px; height: 56px; border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  margin: 20px auto 14px;
}
.mk-confirm-icon-wrap .material-symbols-rounded {
  font-size: 28px !important;
  font-variation-settings: 'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 48;
}
.mk-confirm-icon-danger  { background: #fff0f0; color: #e74c3c; }
.mk-confirm-icon-warning { background: #fff8e1; color: #f39c12; }
.mk-confirm-icon-info    { background: #eef1f9; color: #19378C; }
.mk-confirm-title {
  text-align: center; font-family: 'Inter', sans-serif;
  font-size: 1.05rem; font-weight: 800; color: #1a1a2e;
  padding: 0 1.5rem; margin-bottom: 8px;
}
.mk-confirm-message {
  text-align: center; font-family: 'Inter', sans-serif;
  font-size: 0.875rem; color: #666; line-height: 1.5;
  padding: 0 1.5rem; margin-bottom: 24px;
}
.mk-confirm-actions {
  display: flex; flex-direction: column;
  gap: 10px; padding: 0 1.25rem;
}
.mk-confirm-btn {
  width: 100%; padding: 0.9rem;
  border: none; border-radius: 14px;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem; font-weight: 700;
  cursor: pointer; transition: all 0.18s ease;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.mk-confirm-btn:active { transform: scale(0.97); }
.mk-confirm-btn-danger  { background: #e74c3c; color: #fff; }
.mk-confirm-btn-danger:hover  { background: #c0392b; }
.mk-confirm-btn-warning { background: #f39c12; color: #fff; }
.mk-confirm-btn-warning:hover { background: #d68910; }
.mk-confirm-btn-info    { background: #19378C; color: #fff; }
.mk-confirm-btn-info:hover    { background: #0f2460; }
.mk-confirm-btn-cancel  {
  background: #f5f5f5; color: #555;
  border: 1.5px solid #e8e8e8; font-weight: 600;
}
.mk-confirm-btn-cancel:hover { background: #eee; }

/* ═══ From firebase.js — "couldn't load" retry strip on feed sections ═══ */
.mk-retry-strip {
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  z-index:20;
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:12px;
  padding:24px 28px; width:min(320px,88vw);
  border-radius:16px;
  background:#fff; border:1.5px solid #ffe082;
  box-shadow:0 4px 24px rgba(0,0,0,0.10);
  font-size:14px; color:#795548; text-align:center;
}
.mk-retry-icon {
  font-size:32px; color:#FFB300;
}
.mk-retry-msg { line-height:1.5; }
.mk-retry-btn {
  background:#19378C; color:#fff; border:none;
  border-radius:10px; padding:10px 24px;
  font-size:14px; font-weight:600;
  cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  width:100%; justify-content:center;
}
.mk-retry-btn:active { opacity:0.82; }
/* The strip positions itself against its section, so the host
   needs to be a containing block. This used to hardcode #home,
   which is why the strip could only ever be used on the feed —
   anywhere else it would centre itself on the viewport or on
   some unrelated ancestor. The class is added by
   _showListenerRetry to whichever section it's given. */
.mk-retry-host { position:relative; }