/* ==========================================================================
   FLASHCARD STUDIO STYLESHEET — SHE LOOKETH WELL
   • Fixed 8.5" × 11" Letter geometry with zero perimeter margin
   • Interior-only dotted cutting guides (no perimeter borders)
   • Pure white printing with Warm Linen accent UI
   • Absolute top-right grey turnaround FLIP button
   • Snug desk mat scaling with zero extra bottom dead space
   • Maximized EB Garamond typography with uppercase sans-serif Topic
   ========================================================================== */

:root {
  --fc-accent: #C59C68;
  --fc-text: #2B3B51;
  --fc-bg: #FFFFFF;
  --fc-cut-line: rgba(142, 152, 165, 0.55);
}

/* ==========================================================================
   1. DESK MAT & SNUG SCALER
   ========================================================================== */
.studio-layout {
  align-items: start !important;
}

.preview-pane {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
}

.art-viewport-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: hidden;
}

/* Desk Mat wraps the scaled page tightly */
.art-desk-mat {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  padding: 24px 20px !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden !important;
}

/* Scaler contracts physically so mat wraps without bottom gap */
.planner-scaler {
  width: 816px !important;
  height: 1056px !important;
  transform-origin: top center !important;
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), margin 0.2s ease;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  position: relative;
  flex-shrink: 0;
}

.planner-spread-container.single-mode {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Fixed Letter Dimensions (816px x 1056px at 96 DPI) */
#paperPageContainer.planner-page {
  width: 816px !important;
  height: 1056px !important;
  background: #FFFFFF !important;
  box-shadow: 0 10px 30px rgba(43, 59, 81, 0.15) !important;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  transform-style: preserve-3d;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease;
  border: none !important;
}

#paperPageContainer.is-flipping {
  transform: rotateY(90deg) scale(0.97);
  opacity: 0.3;
}

/* Edge-to-Edge Grid Surface */
.flashcard-grid-surface {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: grid;
  padding: 0;
  margin: 0;
  background: #FFFFFF;
}

/* ==========================================================================
   2. GRID GEOMETRIES (1x2, 2x2, 2x3, 3x3, 3x4)
   ========================================================================== */
.grid-1x2 { grid-template-columns: 1fr; grid-template-rows: repeat(2, 1fr); }
.grid-2x2 { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); }
.grid-2x3 { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); }
.grid-3x3 { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); }
.grid-3x4 { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 1fr); }

/* ==========================================================================
   3. INTERIOR-ONLY DOTTED CUTTING GUIDES (NO PERIMETER OUTLINES)
   ========================================================================== */
.flashcard-slot {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  overflow: hidden;
  border: none !important;
  outline: none !important;
}

.show-cut-lines .flashcard-slot {
  border-right: 1px dotted var(--fc-cut-line) !important;
  border-bottom: 1px dotted var(--fc-cut-line) !important;
}

/* Remove Right Borders for Last Column */
.grid-1x2.show-cut-lines .flashcard-slot:nth-child(1n),
.grid-2x2.show-cut-lines .flashcard-slot:nth-child(2n),
.grid-2x3.show-cut-lines .flashcard-slot:nth-child(2n),
.grid-3x3.show-cut-lines .flashcard-slot:nth-child(3n),
.grid-3x4.show-cut-lines .flashcard-slot:nth-child(3n) {
  border-right: none !important;
}

/* Remove Bottom Borders for Last Row */
.grid-1x2.show-cut-lines .flashcard-slot:nth-child(n+2) { border-bottom: none !important; }
.grid-2x2.show-cut-lines .flashcard-slot:nth-child(n+3) { border-bottom: none !important; }
.grid-2x3.show-cut-lines .flashcard-slot:nth-child(n+5) { border-bottom: none !important; }
.grid-3x3.show-cut-lines .flashcard-slot:nth-child(n+7) { border-bottom: none !important; }
.grid-3x4.show-cut-lines .flashcard-slot:nth-child(n+10) { border-bottom: none !important; }

/* The Printable Flashcard */
.fc-card {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  padding: 18px 22px;
  overflow: hidden;
  border: none !important;
}

.fc-card-inner-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 6px 10px;
  border: none !important;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}

/* ==========================================================================
   4. TYPOGRAPHY: TOPIC, REFERENCE & VERSE TEXT
   ========================================================================== */
/* All-Caps Sans-Serif Topic on Front */
.fc-card-topic {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fc-accent, #C59C68);
  margin-bottom: 0.45rem;
  line-height: 1.25;
  max-width: 90%;
  word-break: break-word;
  user-select: text;
  outline: none;
}

.fc-reference-title {
  font-family: 'EB Garamond', Garamond, Georgia, serif !important;
  font-weight: 700;
  color: #2B3B51;
  line-height: 1.2;
  letter-spacing: 0.01em;
  outline: none;
  word-break: break-word;
  max-width: 96%;
}

.fc-verse-text {
  font-family: 'EB Garamond', Garamond, Georgia, serif !important;
  font-style: italic;
  font-weight: 400;
  color: #2B3B51;
  line-height: 1.35;
  outline: none;
  word-break: break-word;
  max-width: 96%;
}

/* Non-editable KJV Cards */
.fc-read-only {
  cursor: default !important;
  user-select: text;
}
.fc-read-only:hover,
.fc-read-only:focus {
  background: transparent !important;
  box-shadow: none !important;
}

/* Card Side Watermark */
.fc-card-side-indicator {
  position: absolute;
  bottom: 8px;
  font-family: 'Montserrat', sans-serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(43, 59, 81, 0.28);
  pointer-events: none;
}

/* Hover Tools */
.fc-card-tools {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #D5C7BA;
  border-radius: 12px;
  padding: 2px 4px;
  box-shadow: 0 2px 6px rgba(43, 59, 81, 0.08);
  opacity: 0;
  transform: translateY(-2px);
  transition: all 0.15s ease;
  z-index: 5;
}

.fc-card:hover .fc-card-tools {
  opacity: 1;
  transform: translateY(0);
}

.btn-card-font-step,
.btn-card-remove-quick {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 3px;
  font-size: 11px;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  color: #2B3B51;
  border-radius: 3px;
}

.btn-card-font-step:hover {
  background: #EFEBE5;
  color: var(--fc-accent);
}

.btn-card-remove-quick {
  color: #cfa79b;
  margin-left: 2px;
}

.btn-card-remove-quick:hover {
  color: #ba4a4a;
}

/* ==========================================================================
   5. TOP-RIGHT GREY TURNAROUND FLIP BUTTON (ABSOLUTELY POSITIONED)
   ========================================================================== */
.btn-corner-flip {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 80;
  background: #F3EFEA;
  border: 1px solid #D5C7BA;
  color: #5E6B7D;
  border-radius: 20px;
  padding: 5px 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(43, 59, 81, 0.08);
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  user-select: none;
}

.btn-corner-flip:hover {
  background: #E8E2D8;
  border-color: #2B3B51;
  color: #2B3B51;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(43, 59, 81, 0.14);
}

.btn-corner-flip .flip-turnaround-icon {
  width: 14px;
  height: 14px;
  transition: transform 0.35s ease;
}

.btn-corner-flip:hover .flip-turnaround-icon {
  transform: rotate(180deg);
}

/* ==========================================================================
   6. IN-MAT NAVIGATION ARROWS
   ========================================================================== */
.desk-mat-nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1.5px solid #D5C7BA;
  color: #2B3B51;
  font-size: 1.6rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(43, 59, 81, 0.12);
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 25;
}

.desk-mat-nav-prev { left: 16px; }
.desk-mat-nav-next { right: 16px; }

.desk-mat-nav-arrow:hover:not(:disabled) {
  background: #2B3B51;
  color: #FFFFFF;
  border-color: #2B3B51;
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 6px 16px rgba(43, 59, 81, 0.2);
}

.desk-mat-nav-arrow:disabled {
  opacity: 0.2;
  cursor: not-allowed;
  transform: translateY(-50%) scale(1);
}

/* ==========================================================================
   7. FONT SIZE SELECTOR PILLS
   ========================================================================== */
.font-size-pill-group {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.4rem;
}

.btn-font-preset {
  background: #FFFFFF;
  border: 1px solid #D5C7BA;
  border-radius: 6px;
  padding: 0.45rem 0.2rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: #5E6B7D;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-font-preset:hover {
  border-color: var(--fc-accent);
  color: #2B3B51;
}

.btn-font-preset.active {
  background: #2B3B51;
  border-color: #2B3B51;
  color: #FFFFFF;
  font-weight: 700;
}

/* ==========================================================================
   8. PRETTY POPUP MODAL (CLEAR ALL)
   ========================================================================== */
.slw-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(43, 59, 81, 0.5);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 1rem;
}

.slw-modal-card {
  background: #FFFFFF;
  border: 1px solid #E6E0D7;
  border-radius: 12px;
  max-width: 420px;
  width: 100%;
  padding: 2rem 2.2rem;
  box-shadow: 0 20px 40px rgba(43, 59, 81, 0.25);
  text-align: center;
  animation: modalEnter 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes modalEnter {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.slw-modal-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 0.75rem;
}

.slw-modal-icon {
  color: #cfa79b;
  font-size: 1.25rem;
}

.slw-modal-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.65rem;
  font-weight: 600;
  color: #2B3B51;
  margin: 0;
}

.slw-modal-text {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  color: #5E6B7D;
  line-height: 1.6;
  margin: 0 0 1.5rem 0;
}

.slw-modal-actions {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
}

.btn-danger {
  background: #ba4a4a !important;
  color: #FFFFFF !important;
  border: 1px solid #ba4a4a !important;
}

.btn-danger:hover {
  background: #a13a3a !important;
}

/* ==========================================================================
   9. EMPTY SLOT PLACEHOLDER
   ========================================================================== */
.fc-slot-empty {
  width: 100%;
  height: 100%;
  padding: 12px;
  box-sizing: border-box;
}

.fc-slot-empty-inner {
  width: 100%;
  height: 100%;
  border: 1.5px dashed rgba(197, 156, 104, 0.55);
  border-radius: 6px;
  background: rgba(243, 239, 234, 0.35);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--fc-accent, #c59c68);
}

.fc-slot-empty-inner:hover {
  border-color: var(--fc-accent, #c59c68);
  background: rgba(197, 156, 104, 0.12);
  transform: scale(0.99);
}

.fc-slot-empty-plus {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
}

.fc-slot-empty-text {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ==========================================================================
   10. SIDEBAR STYLING
   ========================================================================== */
.mode-toggle-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-top: 0.35rem;
}

.mode-toggle-btn {
  background: #FAF8F5;
  border: 1.5px solid #E6E0D7;
  border-radius: 8px;
  padding: 0.65rem 0.5rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  color: #5E6B7D;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.mode-toggle-btn:hover { border-color: var(--fc-accent); color: #2B3B51; }
.mode-toggle-btn.active {
  background: #2B3B51;
  border-color: #2B3B51;
  color: #FFFFFF;
  box-shadow: 0 2px 6px rgba(43, 59, 81, 0.18);
}

.fetch-status-msg {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  margin-bottom: 0.6rem;
}

.fetch-status-msg.loading { background: #FAF2E8; color: #9A6F37; }
.fetch-status-msg.error { background: #FDE8E8; color: #9B2C2C; }
.fetch-status-msg.success { background: #EBF8F1; color: #276749; }

.input-textarea {
  width: 100%;
  padding: 0.5rem 0.65rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  color: #2B3B51;
  background: #FFFFFF;
  border: 1px solid #D5C7BA;
  border-radius: 6px;
  outline: none;
  resize: vertical;
  box-sizing: border-box;
}

.btn-full-width {
  width: 100%;
  padding: 0.6rem;
  font-size: 0.75rem;
  margin-top: 0.5rem;
}

.card-manager-tools {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

.btn-sm { padding: 0.3rem 0.6rem; font-size: 0.68rem; }

.cards-list-sidebar {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  max-height: 280px;
  overflow-y: auto;
  padding-right: 4px;
}

.sidebar-card-item {
  background: #FAF8F5;
  border: 1px solid #E6E0D7;
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.sidebar-card-ref {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: #2B3B51;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.sidebar-card-del {
  border: none;
  background: none;
  color: #cfa79b;
  font-weight: 700;
  cursor: pointer;
  font-size: 0.85rem;
}

.sidebar-card-del:hover { color: #ba4a4a; }

/* ==========================================================================
   11. PRINT RULES
   ========================================================================== */
.print-duplex-container { display: none; }

@media print {
  @page {
    size: 8.5in 11in !important;
    margin: 0 !important;
  }

  html, body {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #FFFFFF !important;
  }

  .top-dark-strip,
  .site-header,
  .planner-page-hero,
  .site-footer,
  footer,
  header,
  .controls-pane-wrapper,
  .controls-pane,
  .preview-status-bar,
  .art-viewport-wrapper,
  .studio-guide-row,
  .print-interstitial-overlay,
  #slwUniversalPrintModal,
  .fc-card-tools,
  .fc-slot-empty,
  .btn-corner-flip,
  .desk-mat-nav-arrow {
    display: none !important;
  }

  .print-duplex-container {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .print-sheet-page {
    width: 8.5in !important;
    height: 11in !important;
    box-sizing: border-box !important;
    page-break-after: always !important;
    break-after: page !important;
    page-break-inside: avoid !important;
    break-inside: avoid-page !important;
    position: relative !important;
    background: #FFFFFF !important;
    display: grid !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}