/* ============================================
   EQ Ninjas — Global Layout & Utilities
   - Viewport-safe foundation
   - Page shell
   - Typography baseline
   - Shared dropzone/drag/highlight helpers
   - SweetAlert2/WebView fixes
   ============================================ */

/* ---------- Global viewport-safe baseline ---------- */
html, body {
  height: -webkit-fill-available;
  min-height: 100svh;
  width: 100%;
  margin: 0;
  padding: 0;

  font-size: 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  color: #333;

  overflow: hidden;             
  position: static;
  touch-action: auto;
  overscroll-behavior: none;    
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* App host fills the viewport and respects safe areas */
#app {
  height: 100dvh;
  min-height: 100svh;
  width: 100%;
  position: relative;
  overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* ---------- Readability defaults ---------- */
:where(p, li, h1, h2, h3, h4, h5, h6, small, label, a, button, span, figcaption, blockquote, td, th, caption, summary, details) {
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: auto;
  white-space: normal;
}
:where(pre, code, kbd, samp, textarea, input, .nowrap, .no-wrap) {
  word-break: normal;
  overflow-wrap: normal;
  -webkit-hyphens: manual;
  hyphens: manual;
}

/* ============================================
   Page Shell (use via <PageShell/>)
   ============================================ */
.eqn-page {
  min-height: 100svh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 1rem;
  padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0));
  gap: 0.75rem;
}

.eqn-header {
  flex: 0 0 auto;
  position: relative;
}

/* --- Dojo Home Button (pinned to top-left of screen) --- */
.home-button-abs {
  position: fixed !important;
  top: max(8px, env(safe-area-inset-top, 0));
  left: max(8px, env(safe-area-inset-left, 0));
  width: 80px;
  height: 80px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  text-decoration: none;
  z-index: 1000;
}

.home-button-abs img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  opacity: 0.9;
  transition: transform .15s ease, opacity .15s ease;
}

.home-button-abs:hover img { opacity: 1; transform: scale(1.05); }
.home-button-abs:active img { transform: scale(0.95); }

/* Content does NOT scroll by default; opt-in with .eqn-scroll-y */
.eqn-content {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  align-content: start; /* default is top aligned */
  gap: 0.75rem;
}

/* --- Global Footer --- */
.eqn-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  padding-bottom: calc(env(safe-area-inset-bottom, 0) + 1rem);
  background: transparent;
  position: sticky;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
  z-index: 100;
}

.eqn-footer .btn {
  width: 80%;
  max-width: 400px;
  margin: 0 auto;
}

@media (max-width: 380px) {
  .eqn-footer .btn {
    width: 90%;
    max-width: none;
  }
}

/* ---------- Shell utilities ---------- */
.eqn-constrain-960 { max-width: 960px; margin: 0 auto; width: 100%; }
.eqn-constrain-720 { max-width: 720px; margin: 0 auto; width: 100%; }
.eqn-pt-3rem      { padding-top: 3rem; }

.eqn-scroll-y { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.eqn-gap      { display: grid; gap: 0.75rem; }

/* Horizontal + vertical centering */
.eqn-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* NEW: vertical stack, centered */
.eqn-vcenter {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Safe-area helpers */
.pb-safe { padding-bottom: env(safe-area-inset-bottom, 0); }
.pt-safe { padding-top:    env(safe-area-inset-top, 0); }

/* ============================================
   Shared Highlight & Drag/Drop Utilities
   ============================================ */
.hl, .highlight, .word-span.highlighted {
  background-color: #fff9c4;
  border-radius: 4px;
  transition: background-color .2s ease, box-shadow .2s ease;
}
.glow { box-shadow: 0 0 12px rgba(77,171,247,.9); }

.draggable { cursor: grab; user-select: none; touch-action: none; }
.dragging { cursor: grabbing; opacity: .85; }

.dz {
  border: 2px dashed #ccc;
  border-radius: 8px;
  background: #fff;
  transition: border-color .2s ease, background-color .2s ease, transform .1s ease;
}
.dz-over {
  border-color: #4dabf7;
  background-color: #e7f3ff;
  transform: scale(1.02);
}

.icon-wrapper { position: relative; width: 64px; height: 64px; }
.icon-wrapper img {
  width: 100%; height: 100%; object-fit: contain;
  border: 2px dashed #ccc; border-radius: 8px; padding: 4px; background: #fff;
}
.checkmark {
  position: absolute; top: 2px; right: 4px;
  background: #28a745; color: #fff; font-weight: 700;
  border-radius: 50%; width: 20px; height: 20px; font-size: .9rem;
  display: flex; align-items: center; justify-content: center;
}

/* ============================================
   SweetAlert2/WebView Global Fixes
   ============================================ */
#swal-root {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  pointer-events: none;
}
#swal-root .swal2-container { pointer-events: auto; }

html.swal2-height-auto,
body.swal2-height-auto { height: 100% !important; }
body.swal2-shown {
  padding-right: 0 !important;
  overflow: hidden !important;
}

body.swal2-shown .eqn-page {
  transform: none !important;
  will-change: auto;
}
#swal-root .swal2-container {
  transform: translateZ(0);
  will-change: transform;
}

/* ============================================
   Misc: focus + nav scroll fix
   ============================================ */
h1:focus { outline: none; }

@media (min-width: 641px) {
  .nav-scrollable {
    height: calc(100svh - 3.5rem);
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ============================================
   Legacy STE layout compatibility
   ============================================ */
.eqn-page .ste-container {
  min-height: auto !important;
  height: auto !important;
  max-width: none !important;
  margin: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  display: block !important;
}
.eqn-page .ste-body {
  overflow: visible !important;
  -webkit-overflow-scrolling: auto !important;
  min-height: 0 !important;
  padding-bottom: 0 !important;
  display: block !important;
  align-items: normal !important;
  text-align: initial !important;
  justify-content: flex-start !important;
  width: 100% !important;
}
.eqn-page .ste-footer {
  display: contents !important;
  padding-top: 0 !important;
  width: auto !important;
  text-align: initial !important;
}

.eqn-text-center {
    text-align:center;
}
/* Fade-in helper */
.fade-block {
    opacity: 0.01; /* nearly invisible but still takes space */
    transition: opacity 0.5s ease;
}

.fade-block.visible {
  opacity: 1;                  /* fade to full */
}


.ghost {
  opacity: 0.3;
  filter: grayscale(100%);
  transition: opacity 0.5s ease, filter 0.5s ease;
}
.ghost.revealed {
  opacity: 1;
  filter: none;
}