/* =============================================================================
   guide_detail.additions.css
   Append after main.css / main.additions.css
   Covers: detail shell, overlay controls, fullscreen modal, GDSL renderer,
           skeleton, edit page meta-badges row, category free-text input
   ============================================================================= */

/* ─── Guide detail shell ─────────────────────────────────────────────────── */
.guide-detail-shell {
  position: relative;   /* anchor for overlay controls */
  max-width: 1200px;
  margin: 0 auto;
}

/* ─── Overlay control buttons ────────────────────────────────────────────── */
.guide-overlay-controls {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  gap: var(--sp-xs);
  z-index: 10;
}

.guide-ctrl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  border: 1.5px solid rgba(108, 59, 170, 0.22);
  background: var(--c-white);
  color: var(--t-muted);
  cursor: pointer;
  transition: background var(--tx), color var(--tx),
              border-color var(--tx), box-shadow var(--tx);
  flex-shrink: 0;
}
.guide-ctrl-btn:hover {
  background: var(--c-purple-tint);
  color: var(--c-purple);
  border-color: var(--c-purple);
  box-shadow: var(--shadow-xs);
}
.guide-ctrl-btn:active { transform: scale(0.92); }
.guide-ctrl-btn .material-symbols-outlined { font-size: 18px; }

/* ctrl-menu positioned below the ctx-wrap */
.guide-ctrl-menu {
  right: 0;
  left: auto;
  top: calc(100% + 6px);
  position: absolute !important;  /* override fixed from .ctx-menu base */
  min-width: 160px;
}

/* ─── Guide content body ─────────────────────────────────────────────────── */
.guide-content-body {
  /* padding-top: calc(36px + var(--sp-md)); /* clear the overlay controls */
  position: relative; /* for guide section anchors */
}

/* ─── Fullscreen modal ───────────────────────────────────────────────────── */
.guide-fs-backdrop {
  /* extends .modal-backdrop from main.css */
  align-items: flex-start;
  padding: 0;
}

.guide-fs-modal {
  position: relative;
  background: var(--c-white);
  width: 100%;
  height: 100vh;
  max-width: 100%;
  max-height: 100vh;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  /*
  align-items: center;
  justify-content: center;
  
  overflow: hidden;
  */
  overflow-y: auto;
  animation: modalSlideIn 0.18s ease;
}

.guide-fs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  padding: var(--sp-md) var(--sp-lg);
  border-bottom: 1px solid rgba(108, 59, 170, 0.1);
  flex-shrink: 0;
}
.guide-fs-title-text {
  font-size: 1rem;
  font-weight: 700;
  color: var(--c-purple);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.guide-fs-close {
  position: absolute;
  top: 14px;
  right: 14px;
  border: none;
  background: none;
  flex-shrink: 0;
  z-index: 9999; /* above the guide content */
}
.guide-fs-body {
  flex: 1;
  max-height: 100vh;
  overflow-y: auto;

  /* padding: var(--sp-xl) clamp(var(--sp-lg), 8vw, 120px); */
}



/* ─── Loading skeleton (detail page) ─────────────────────────────────────── */
.gdsl-skeleton {
  background: linear-gradient(
    90deg,
    rgba(108,59,170,.06) 25%,
    rgba(108,59,170,.12) 50%,
    rgba(108,59,170,.06) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.3s infinite;
  border-radius: var(--r-sm);
  margin-bottom: var(--sp-md);
}
.gdsl-sk-title { height: 36px; width: 55%; margin-bottom: var(--sp-xl); }
.gdsl-sk-line  { height: 16px; width: 100%; }
.gdsl-sk-short { width: 68%; }
.gdsl-sk-block { height: 120px; width: 100%; border-radius: var(--r-lg); margin: var(--sp-lg) 0; }

/* ─── Edit page additions ────────────────────────────────────────────────── */

/* Wider top row on edit — category is free-text, takes less fixed width */
.guide-edit-top-row {
  grid-template-columns: 1fr 180px auto;
}

/* Category free-text wrap (datalist) */
.guide-category-wrap { position: relative; }

/* Meta badges row — shown after guide loads */
.guide-edit-meta-row {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  margin-top: var(--sp-md);
  flex-wrap: wrap;
}

/* ─── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .guide-overlay-controls { position: static; justify-content: flex-end; margin-bottom: var(--sp-sm); }
  .guide-content-body { padding-top: 0; }
  .guide-edit-top-row { grid-template-columns: 1fr; }
  .guide-fs-body { padding: var(--sp-lg) var(--sp-md); }
}