/* ═══════════════════════════════════════════════════════════
   engine/css/layout.css — Main layout, card, and splitter
═══════════════════════════════════════════════════════════ */

/* ── Main layout ─────────────────────────────────────────── */
/* Phone: flat layout, no card chrome */
.main-wrap {
  position: fixed;
  top: var(--topbar-h);
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  padding: 0;
}

.card-grid {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Two columns in landscape, stacked in portrait */
@media (orientation: landscape) {
  .card-grid {
    flex-direction: row;
  }
}

/* Card chrome + spacing: wide AND tall enough (tablet+, not landscape phone) */
@media (min-width: 640px) and (min-height: 480px) {
  .main-wrap {
    padding: 8px;
  }
}

/* Desktop: full spacing */
@media (min-width: 1024px) and (min-height: 480px) {
  .main-wrap {
    padding: 10px;
  }
}

/* ── Panel sizing driven by --split ──────────────────────── */
:root { --split: 50; }

#textPanel {
  flex: 0 0 calc(var(--split) * 1%);
  min-height: 0;
  min-width: 0;
}

#studyPanel {
  flex: 1 1 0%;
  min-height: 0;
  min-width: 0;
}

/* ── Card ────────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ── Splitter ────────────────────────────────────────────── */
.splitter {
  flex: 0 0 8px;
  position: relative;
  touch-action: none;
  user-select: none;
  cursor: row-resize;
  background: var(--border);
  z-index: 10;
}

@media (orientation: landscape) {
  .splitter { cursor: col-resize; }
}

/* Grab handle pip */
.splitter::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 4px;
  border-radius: 999px;
  background: var(--text-3);
  opacity: 0.5;
  transition: opacity 0.15s;
}

@media (orientation: landscape) {
  .splitter::after {
    width: 4px;
    height: 32px;
  }
}

.splitter:hover::after,
.splitter.is-dragging::after { opacity: 1; }

@media (min-width: 640px) and (min-height: 480px) {
  .card {
    border: 1px solid var(--border, #dddddd);
    border-radius: var(--radius-sm, 8px);
    box-shadow: var(--shadow-card, 0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.05));
  }
}

@media (min-width: 1024px) and (min-height: 480px) {
  .card {
    border-radius: var(--radius, 12px);
  }
}