/* ============================================================
   ObeyQuest mode styles
   Scoped to html[data-quest-mode="true"]. Removing that attribute
   restores the original obey.fit D/s product surface.
   ============================================================ */

/* ---------- 1. Hide the bottom navigation entirely ---------- */
html[data-quest-mode="true"] #bottom-nav {
  display: none !important;
}

/* ---------- 2. Hide every legacy D/s section ----------
   Listed by id so they are easy to re-enable individually. */
html[data-quest-mode="true"] #section-overview,
html[data-quest-mode="true"] #section-tasks,
html[data-quest-mode="true"] #section-tracking,
html[data-quest-mode="true"] #section-domina,
html[data-quest-mode="true"] #section-subs,
html[data-quest-mode="true"] #section-ledger,
html[data-quest-mode="true"] #section-discipline,
html[data-quest-mode="true"] #section-programs,
html[data-quest-mode="true"] #section-chat,
html[data-quest-mode="true"] #section-rituals,
html[data-quest-mode="true"] #section-calendar,
html[data-quest-mode="true"] #section-plans,
html[data-quest-mode="true"] #section-rules,
html[data-quest-mode="true"] #section-leaderboard,
html[data-quest-mode="true"] #section-journal,
html[data-quest-mode="true"] #section-history,
html[data-quest-mode="true"] #section-journey,
html[data-quest-mode="true"] #section-messages,
html[data-quest-mode="true"] #section-contract,
html[data-quest-mode="true"] #section-auction,
html[data-quest-mode="true"] #section-training,
html[data-quest-mode="true"] #section-dispatches,
html[data-quest-mode="true"] #section-profile,
html[data-quest-mode="true"] #section-assistant {
  display: none !important;
}

/* ---------- 3. Hide D/s entries inside the hamburger menu ----------
   Keep Settings, Feedback, Log Out, and admin entries reachable. */
html[data-quest-mode="true"] .menu-item.sub-only,
html[data-quest-mode="true"] .menu-item.domina-only,
html[data-quest-mode="true"] .menu-item[data-section="rules"],
html[data-quest-mode="true"] .menu-item[data-section="ledger"],
html[data-quest-mode="true"] .menu-item[onclick*="hamburgerNavigate('calendar')"],
html[data-quest-mode="true"] .menu-item[onclick*="hamburgerNavigate('plans')"] {
  display: none !important;
}

/* ---------- 4. Hide header icons that only make sense for D/s ----------
   Messages thread + notification bell. */
html[data-quest-mode="true"] #app-header .header-right > button[onclick*="headerChatAction"],
html[data-quest-mode="true"] #app-header #notification-bell,
html[data-quest-mode="true"] #app-header #notification-dropdown {
  display: none !important;
}

/* ---------- 5. Re-brand the header title to ObeyQuest ----------
   The H1 stays in markup ("Obey.fit"); we visually replace it. */
html[data-quest-mode="true"] #app-header h1 {
  font-size: 0;
}
html[data-quest-mode="true"] #app-header h1::before {
  content: "Obey";
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary);
}
html[data-quest-mode="true"] #app-header h1::after {
  content: "Quest";
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--accent);
  margin-left: 0.1rem;
}

/* ===================================================================
   6. ObeyQuest UI — onboarding, library, reader
   =================================================================== */

#section-quest, #quest-onboarding {
  --quest-prose-font: 'Cormorant Garamond', Georgia, serif;
  max-width: 56rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 5rem;
}

/* ---------- Quest onboarding wizard ---------- */
.quest-onboard-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 1.5rem 1.5rem 1.75rem;
  box-shadow: var(--shadow-sm);
}
.quest-onboard-card h2 {
  margin: 0 0 0.4rem;
  color: var(--text-primary);
}
.quest-onboard-sub {
  color: var(--text-secondary);
  margin: 0 0 1.5rem;
  font-size: 0.95rem;
}
.quest-fs {
  border: none;
  border-top: 1px solid var(--border);
  padding: 1.25rem 0 0;
  margin: 0 0 1.25rem;
}
.quest-fs:first-of-type {
  border-top: none;
  padding-top: 0;
}
.quest-fs legend {
  font-weight: 600;
  color: var(--text-primary);
  padding: 0;
  font-size: 1rem;
}
.quest-fs-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
@media (max-width: 540px) {
  .quest-fs-row { grid-template-columns: 1fr; }
}
.quest-help {
  margin: 0.25rem 0 0.9rem;
  color: var(--text-secondary);
  font-size: 0.85rem;
  line-height: 1.45;
}
.quest-label {
  display: block;
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.95rem;
  margin-bottom: 0.1rem;
}

/* Chips (themes, etc) */
.quest-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.quest-chip {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.quest-chip:hover {
  background: var(--bg-hover);
}
.quest-chip.selected {
  background: var(--accent-subtle);
  border-color: var(--accent);
  color: var(--accent);
}

/* Kink sliders */
.quest-kink-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.quest-kink-row {
  display: grid;
  grid-template-columns: minmax(8rem, 14rem) 1fr 2.5rem;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 0.6rem;
  border-radius: 0.5rem;
  background: var(--bg-subtle);
  border: 1px solid transparent;
}
.quest-kink-row.quest-kink-active {
  border-color: var(--accent-dim);
  background: var(--bg-hover);
}
@media (max-width: 540px) {
  .quest-kink-row { grid-template-columns: minmax(7rem, 1fr) 1fr 2rem; }
}
.quest-kink-label {
  color: var(--text-primary);
  font-size: 0.95rem;
}
.quest-slider {
  width: 100%;
  accent-color: var(--accent);
}
.quest-kink-val {
  color: var(--accent);
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Free-text limits */
.quest-textarea {
  width: 100%;
  resize: vertical;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: 0.5rem;
  padding: 0.6rem 0.75rem;
  font: inherit;
  line-height: 1.5;
}
.quest-textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg-page);
}
.quest-select {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: 0.5rem;
  padding: 0.55rem 0.75rem;
  font: inherit;
}
.quest-radio-group {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.quest-radio-group label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--text-primary);
}
.quest-radio-group label:has(input:checked) {
  background: var(--accent-subtle);
  border-color: var(--accent);
  color: var(--accent);
}
.quest-onboard-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.5rem;
}

/* ---------- Library view ---------- */
.quest-lib-header h2 {
  font-family: var(--quest-prose-font);
  font-size: 2rem;
  margin: 0 0 0.25rem;
  color: var(--text-primary);
}
.quest-lib-header p {
  color: var(--text-secondary);
  margin: 0 0 1.5rem;
}
.quest-newcard, .quest-lib-list-wrap {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-sm);
}
.quest-newcard h3, .quest-lib-list-wrap h3 {
  margin: 0 0 0.4rem;
  color: var(--text-primary);
  font-size: 1.1rem;
}
.quest-newcard-row {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}
.quest-newcard-row .quest-select { flex: 1; min-width: 8rem; }

.quest-lib-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.quest-empty-small {
  color: var(--text-muted);
  font-style: italic;
}
.quest-lib-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.85rem 1rem;
}
.quest-lib-card-main h4 {
  margin: 0 0 0.25rem;
  color: var(--text-primary);
  font-family: var(--quest-prose-font);
  font-size: 1.15rem;
}
.quest-lib-meta {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  align-items: center;
  font-size: 0.8rem;
}
.quest-pill {
  background: var(--bg-page);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
}
.quest-pill-status { text-transform: capitalize; }
.quest-pill-active   { color: var(--accent); border-color: var(--accent-dim); }
.quest-pill-paused   { color: var(--warning); }
.quest-pill-completed { color: var(--success); }
.quest-pill-abandoned { color: var(--text-muted); }
.quest-lib-time {
  color: var(--text-muted);
  margin-left: 0.25rem;
}
.quest-lib-card-actions {
  display: flex;
  gap: 0.4rem;
}

/* ---------- Reader view ---------- */
.quest-reader-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.quest-reader-header h2 {
  font-family: var(--quest-prose-font);
  font-size: 1.5rem;
  margin: 0;
  flex: 1;
  color: var(--text-primary);
}
.quest-reader-chapnum {
  color: var(--text-muted);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}
.quest-reader.busy { opacity: 0.65; pointer-events: none; }
.quest-reader-loading {
  text-align: center;
  padding: 4rem 1rem;
  color: var(--text-secondary);
}
.quest-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  margin: 0 auto 1rem;
  animation: quest-spin 0.9s linear infinite;
}
@keyframes quest-spin { to { transform: rotate(360deg); } }

.quest-dice-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.9rem;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  border: 1px solid var(--border);
  animation: quest-banner-fade 0.5s ease-out;
}
@keyframes quest-banner-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.quest-dice-roll { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.quest-dice-outcome { letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.8rem; }
.quest-outcome-success { background: rgba(90, 158, 106, 0.12); border-color: var(--success); color: var(--success); }
.quest-outcome-partial { background: rgba(212, 146, 31, 0.12); border-color: var(--warning); color: var(--warning); }
.quest-outcome-failure { background: rgba(155, 35, 53, 0.12); border-color: var(--error);   color: var(--error); }

.quest-prose {
  font-family: var(--quest-prose-font);
  font-size: 1.25rem;
  line-height: 1.7;
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-sm);
}
.quest-prose p { margin: 0 0 1rem; }
.quest-prose p:last-child { margin-bottom: 0; }

.quest-choices {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.quest-choice {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-left-width: 4px;
  color: var(--text-primary);
  padding: 0.9rem 1.1rem;
  border-radius: 0.5rem;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
}
.quest-choice:hover:not(:disabled) {
  background: var(--bg-hover);
  border-color: var(--accent);
}
.quest-choice:active:not(:disabled) {
  transform: translateY(1px);
}
.quest-choice-label {
  font-size: 1rem;
}
.quest-choice-risk {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  flex-shrink: 0;
}
.quest-risk-safe { border-left-color: var(--success); }
.quest-risk-safe .quest-choice-risk { color: var(--success); }
.quest-risk-edge { border-left-color: var(--warning); }
.quest-risk-edge .quest-choice-risk { color: var(--warning); }
.quest-risk-risky { border-left-color: var(--error); }
.quest-risk-risky .quest-choice-risk { color: var(--error); }

.quest-end {
  text-align: center;
  color: var(--text-muted);
  font-style: italic;
  padding: 1.5rem 0;
}