/* Adventure Chronicle — /quests (mode bar + independent column scroll; details/summary beats). */

/* Match Production SPA: soften `.town-field--stub::after` so the journal panel isn't double-darkened. */
.town-field.game-stage.town-field--stub:has(.quest-journal-root)::after,
.town-field.game-stage.town-field--stub:has(.surface-page .quest-journal-root)::after {
  background: linear-gradient(
    165deg,
    rgba(12, 8, 22, 0.12) 0%,
    rgba(8, 6, 16, 0.09) 45%,
    rgba(14, 10, 26, 0.13) 100%
  );
}

.quest-journal-root.player-panel.quest-journal-shell {
  /* Flow layout: `.player-panel` inset is for absolute shells only. */
  inset: auto;
  position: relative;
  z-index: 12;
  isolation: isolate;
  /* Visible so ornate corner wedges are not clipped; scroll lives on sidebar/chronicle. */
  overflow: visible;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: calc(var(--gs-u-h) * 0.35);
  padding: calc(var(--gs-u-h) * 0.52) calc(var(--gs-u-w) * 1.05) calc(var(--gs-u-h) * 0.62);
  box-sizing: border-box;
  /* Fill/chrome owned by ``ornate-panel`` — do not reintroduce a parallel slab. */
  background: transparent;
  border-radius: 0;
  border: none;
  box-shadow: none;
}

.quest-journal-root > .game-mode-bar {
  flex-shrink: 0;
}

/* Wallet/dock default z-index sits under this shell (12); lift HUD above full-bleed panel bg. */
.town-field.game-stage.town-field--stub:has(.quest-journal-root) .game-wallet-hud,
.town-field.game-stage.town-field--stub:has(.quest-journal-root) .player-meta-dock {
  z-index: 14;
}

/* Wallet paints above journal but mode bar is inside journal’s stacking context — overlap + .hud-component { pointer-events:auto } stole clicks. */
.town-field.game-stage.town-field--stub:has(.quest-journal-root) .game-wallet-hud.hud-component {
  pointer-events: none;
}
.town-field.game-stage.town-field--stub:has(.quest-journal-root) .game-wallet-hud .game-wallet-hud__drag-grip {
  pointer-events: auto;
}

.quest-journal__scroll {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.quest-journal__body {
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-right: calc(var(--gs-u-w) * 0.35);
  box-sizing: border-box;
}

.quest-journal__page-title {
  flex-shrink: 0;
  margin: 0 0 calc(var(--gs-u-h) * 0.25);
  font-size: var(--gs-text-lg);
  font-weight: 650;
  color: #fff8ec;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

.quest-journal__hero-muted {
  margin: 0 0 calc(var(--gs-u-h) * 0.85);
  font-size: var(--gs-text-xs);
  color: #c4b69b;
  line-height: 1.45;
  max-width: calc(var(--gs-u-w) * 52);
}

.quest-journal__layout {
  display: grid;
  grid-template-columns: minmax(calc(var(--gs-u-w) * 12.25), calc(var(--gs-u-w) * 16.25)) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: calc(var(--gs-u-h) * 0.85);
  align-items: stretch;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}

/* ----- Sidebar: compact nav buttons (no expand/collapse) ----- */

.quest-journal__sidebar {
  display: flex;
  flex-direction: column;
  gap: calc(var(--gs-u-h) * 0.4);
  min-height: 0;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: calc(var(--gs-u-w) * 0.2);
}

.quest-journal__sidebar-head--open {
  margin-top: calc(var(--gs-u-h) * 0.55);
}

.quest-journal__nav-item--epic {
  border-color: rgba(212, 168, 72, 0.42);
  background: linear-gradient(165deg, rgba(28, 18, 8, 0.72), rgba(12, 8, 6, 0.68));
}

.quest-journal__nav-item--epic:hover,
.quest-journal__nav-item--epic.quest-journal__nav-item--focus {
  border-color: rgba(235, 198, 110, 0.55);
}

.quest-journal__nav-meter--epic::-webkit-progress-value {
  background: linear-gradient(90deg, #6b4a1a, #f0d080);
}

.quest-journal__nav-meter--epic::-moz-progress-bar {
  background: linear-gradient(90deg, #6b4a1a, #f0d080);
}

.quest-journal__sidebar-head {
  margin: 0 0 calc(var(--gs-u-h) * 0.15);
  font-size: var(--gs-text-2xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #a89476;
}

.quest-journal__nav-item {
  display: block;
  width: 100%;
  margin: 0;
  padding: calc(var(--gs-u-h) * 0.5) calc(var(--gs-u-h) * 0.58);
  box-sizing: border-box;
  border-radius: var(--gs-radius-sm);
  border: 1px solid rgba(90, 72, 110, 0.45);
  background: rgba(10, 7, 16, 0.62);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.quest-journal__nav-item:hover {
  border-color: rgba(235, 190, 115, 0.35);
}

.quest-journal__nav-item--focus {
  border-color: rgba(235, 190, 115, 0.5);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35) inset;
}

.quest-journal__nav-item--completed {
  opacity: 0.82;
}

.quest-journal__nav-item--completed .quest-journal__sidebar-title {
  color: rgba(232, 192, 120, 0.92);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.quest-journal__nav-item-main {
  display: flex;
  flex-direction: column;
  gap: calc(var(--gs-u-h) * 0.35);
}

.quest-journal__sidebar-title {
  font-size: var(--gs-text-xs);
  font-weight: 600;
  line-height: 1.25;
  color: #f5ebd9;
}

.quest-journal__nav-meta {
  display: flex;
  align-items: center;
  gap: calc(var(--gs-u-h) * 0.45);
  font-size: var(--gs-text-2xs);
  color: #b8a68c;
}

.quest-journal__nav-status {
  flex-shrink: 0;
}

.quest-journal__nav-meter {
  flex: 1;
  height: var(--gs-stroke);
  border-radius: 999px;
  overflow: hidden;
  vertical-align: middle;
  appearance: none;
  border: none;
  background: rgba(0, 0, 0, 0.35);
}

.quest-journal__nav-meter::-webkit-progress-bar {
  border-radius: inherit;
  background: rgba(0, 0, 0, 0.35);
}

.quest-journal__nav-meter::-webkit-progress-value {
  border-radius: inherit;
  background: linear-gradient(90deg, #8b6238, #e8c078);
}

.quest-journal__nav-meter::-moz-progress-bar {
  border-radius: inherit;
  background: linear-gradient(90deg, #8b6238, #e8c078);
}

/* ----- Right column parchment ----- */

.quest-journal__chronicle {
  border-radius: var(--gs-radius-md);
  padding: calc(var(--gs-u-h) * 1.15);
  min-height: 0;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(78, 52, 36, 0.65);
  background:
    linear-gradient(178deg, rgba(252, 244, 223, 0.09), rgba(248, 236, 206, 0.05)),
    linear-gradient(145deg, rgba(32, 22, 18, 0.92), rgba(18, 11, 14, 0.94)),
    repeating-linear-gradient(
      -12deg,
      transparent,
      transparent 3px,
      rgba(255, 235, 190, 0.018) 3px,
      rgba(255, 235, 190, 0.018) 6px
    );
  box-shadow:
    0 0 0 1px rgba(255, 220, 160, 0.06) inset,
    0 18px 42px rgba(0, 0, 0, 0.42);
  color: #ede4d4;
}

.quest-journal__chronicle.brass-panel {
  background: transparent;
  border: var(--brass-panel-border);
  box-shadow:
    0 0 0 var(--brass-panel-border-width) rgba(255, 232, 188, 0.34) inset,
    0 0 0 calc(var(--brass-panel-border-width) * 2) rgba(72, 48, 24, 0.28) inset,
    0 calc(var(--gs-u-h) * 0.7) calc(var(--gs-u-h) * 2.3) rgba(0, 0, 0, 0.28);
  color: #f5ebd9;
}

.quest-journal__chronicle.brass-panel::before {
  opacity: 0.88;
}

.quest-journal__chronicle--epic {
  border: 1px solid rgba(212, 168, 72, 0.58);
  background:
    linear-gradient(168deg, rgba(255, 228, 160, 0.14), rgba(180, 130, 48, 0.06)),
    linear-gradient(145deg, rgba(36, 24, 10, 0.94), rgba(16, 10, 6, 0.96)),
    repeating-linear-gradient(
      -18deg,
      transparent,
      transparent 4px,
      rgba(255, 220, 140, 0.03) 4px,
      rgba(255, 220, 140, 0.03) 8px
    );
  box-shadow:
    0 0 0 1px rgba(255, 210, 120, 0.12) inset,
    0 20px 44px rgba(0, 0, 0, 0.45);
  color: #fff4dc;
}

.quest-journal__root-header {
  margin: 0;
  padding: 0 0 calc(var(--gs-u-h) * 0.65);
  border-bottom: 1px solid rgba(201, 168, 108, 0.22);
  display: flex;
  flex-direction: column;
  gap: calc(var(--gs-u-h) * 0.35);
}

.quest-journal__root-header--completed .quest-journal__title {
  color: rgba(232, 192, 120, 0.88);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.quest-journal__root-header--completed .quest-journal__eyebrow {
  opacity: 0.78;
}

.quest-journal__eyebrow {
  margin: 0;
  font-size: var(--gs-text-2xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #d4b878;
}

.quest-journal__title {
  margin: 0;
  font-size: var(--gs-text-xl);
  font-weight: 650;
  line-height: 1.2;
  color: #fff8ec;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}

.quest-journal__chronicle-inner {
  max-width: calc(var(--gs-u-w) * 40);
  padding-top: calc(var(--gs-u-h) * 0.65);
}

.quest-journal__lede {
  margin: 0 0 calc(var(--gs-u-h) * 1);
  padding: calc(var(--gs-u-h) * 0.65) calc(var(--gs-u-h) * 0.85);
  border-left: var(--gs-stroke) solid rgba(212, 165, 95, 0.55);
  background: rgba(0, 0, 0, 0.22);
  border-radius: 0 var(--gs-radius-xs) var(--gs-radius-xs) 0;
  font-size: var(--gs-text-xs);
  line-height: 1.55;
  color: #dfd4bf;
}

.quest-journal__section-head {
  margin: calc(var(--gs-u-h) * 0.85) 0 calc(var(--gs-u-h) * 0.5);
  padding-bottom: calc(var(--gs-u-h) * 0.25);
  font-size: var(--gs-text-2xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #c9a86c;
  border-bottom: 1px solid rgba(201, 168, 108, 0.28);
}

.quest-journal__beats-stack {
  display: flex;
  flex-direction: column;
  gap: calc(var(--gs-u-h) * 0.4);
}

.quest-journal__beat-children {
  margin-top: calc(var(--gs-u-h) * 0.5);
  padding-left: calc(var(--gs-u-w) * 1.35);
  border-left: var(--gs-hairline) solid rgba(255, 210, 160, 0.18);
  display: flex;
  flex-direction: column;
  gap: calc(var(--gs-u-h) * 0.35);
}

.quest-journal__beat-children > .quest-journal__beat-details {
  margin: 0;
}

.quest-journal__beat-details {
  border-radius: var(--gs-radius-sm);
  border: 1px solid var(--gs-inset-gold);
  background: rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.quest-journal__beat-summary {
  cursor: pointer;
  list-style: none;
  display: grid;
  grid-template-columns: calc(var(--gs-u-w) * 1.25) 1fr auto;
  gap: calc(var(--gs-u-h) * 0.45);
  align-items: center;
  padding: calc(var(--gs-u-h) * 0.42) calc(var(--gs-u-h) * 0.52);
  margin: 0;
}

.quest-journal__beat-summary::-webkit-details-marker {
  display: none;
}

.quest-journal__beat-summary::marker {
  content: "";
}

.quest-journal__beat-summary-title {
  font-size: var(--gs-text-xs);
  line-height: 1.35;
  color: #efe8dc;
}

.quest-journal__beat-status-tag {
  font-size: var(--gs-text-2xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #b09a7c;
  white-space: nowrap;
}

.quest-journal__beat-details--completed .quest-journal__beat-summary-title {
  color: rgba(232, 192, 120, 0.88);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.quest-journal__beat-details--completed .quest-journal__beat-status-tag {
  color: rgba(212, 175, 105, 0.75);
}

.quest-journal__glyph {
  font-size: var(--gs-text-xs);
  line-height: 1;
  text-align: center;
}

.quest-journal__glyph--completed {
  color: rgba(232, 192, 120, 0.95);
}

.quest-journal__glyph--active {
  color: #e8c078;
}

.quest-journal__glyph--locked {
  color: #7a6e62;
  filter: grayscale(0.15);
}

.quest-journal__beat-details--locked .quest-journal__beat-summary--static {
  cursor: default;
}

.quest-journal__beat-details--locked .quest-journal__beat-summary-title {
  color: rgba(220, 208, 188, 0.72);
}

.quest-journal__beat-body {
  padding: 0 calc(var(--gs-u-w) * 0.52) calc(var(--gs-u-h) * 0.55) calc(var(--gs-u-w) * 2.12);
  font-size: var(--gs-text-xs);
  line-height: 1.5;
  color: #dcd0bc;
  border-top: 1px solid rgba(255, 215, 160, 0.06);
}

.quest-journal__beat-body p {
  margin: calc(var(--gs-u-h) * 0.45) 0 0;
}

.quest-journal__beat-placeholder {
  font-style: italic;
  color: #a89882;
}

.quest-journal__beat-nav {
  margin: calc(var(--gs-u-h) * 0.55) 0 0;
}

.quest-journal__go-btn.decal-action-btn {
  /* Compact decal already shell-sized; keep BEM hook for beat-nav spacing. */
  text-decoration: none;
}

.quest-journal__extra-details {
  margin-top: calc(var(--gs-u-h) * 0.65);
  border-radius: var(--gs-radius-sm);
  border: 1px solid rgba(201, 168, 108, 0.2);
  background: rgba(0, 0, 0, 0.14);
  padding: 0 calc(var(--gs-u-h) * 0.5) calc(var(--gs-u-h) * 0.45);
}

.quest-journal__extra-summary {
  cursor: pointer;
  list-style: none;
  padding: calc(var(--gs-u-h) * 0.45) calc(var(--gs-u-h) * 0.35) calc(var(--gs-u-h) * 0.35);
  margin: 0;
  font-size: var(--gs-text-2xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #c9a86c;
}

.quest-journal__extra-summary::-webkit-details-marker {
  display: none;
}

.quest-journal__extra-summary::marker {
  content: "";
}

.quest-journal__rewards {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--gs-u-w) * 0.65);
  margin: 0;
  padding: 0 calc(var(--gs-u-h) * 0.35) calc(var(--gs-u-h) * 0.35) calc(var(--gs-u-h) * 0.35);
  list-style: none;
  color: #e8dcc4;
  font-size: var(--gs-text-xs);
}

.quest-journal__reward {
  margin: 0;
}

.quest-journal__reward .currency-amount {
  font-size: var(--gs-text-sm);
  font-weight: 600;
  color: #f2e6cc;
}

.quest-journal__reward-card {
  width: calc(var(--gs-u-w) * 5.5);
}

.quest-journal__reward-card .story-reward-splash__card-render {
  width: 100%;
}

.quest-journal__reward-material {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--gs-u-w) * 0.35);
  color: #f2e6cc;
}

.quest-journal__reward-material-icon {
  width: calc(var(--gs-u-w) * 1.35);
  height: calc(var(--gs-u-w) * 1.35);
  object-fit: contain;
}

.quest-journal__reward-material-qty {
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.quest-journal__reward-material-name {
  font-size: var(--gs-text-xs);
  color: #cbbfaa;
}

.quest-journal__notes {
  margin: 0;
  padding: 0 calc(var(--gs-u-h) * 0.35) calc(var(--gs-u-h) * 0.45) calc(var(--gs-u-h) * 0.35);
  font-size: var(--gs-text-xs);
  line-height: 1.5;
  font-style: italic;
  color: #cbbfaa;
}

.quest-journal__empty {
  padding: calc(var(--gs-u-h) * 1.5) calc(var(--gs-u-h) * 1);
  margin-top: calc(var(--gs-u-h) * 0.5);
  border-radius: var(--gs-radius-md);
  border: 1px dashed rgba(190, 155, 105, 0.35);
  color: #bda990;
  font-size: var(--gs-text-xs);
  text-align: center;
}

/* Lore — completed lore-worthy tales */

.quest-journal__lore {
  margin-top: calc(var(--gs-u-h) * 1.25);
  padding-top: calc(var(--gs-u-h) * 1);
  border-top: 1px solid rgba(120, 88, 56, 0.38);
}

.quest-journal__lore-heading {
  margin: 0;
  font-size: var(--gs-text-md);
  font-weight: 650;
  color: #f2e6cc;
}

.quest-journal__lore-lede {
  margin: calc(var(--gs-u-h) * 0.35) 0 calc(var(--gs-u-h) * 0.85);
}

.quest-journal__lore-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--gs-u-h) * 0.85);
}

.quest-journal__lore-card {
  margin: 0;
  border-radius: var(--gs-radius-sm);
  padding: calc(var(--gs-u-h) * 0.85) calc(var(--gs-u-h) * 1);
  border: 1px solid rgba(78, 52, 36, 0.58);
  background: rgba(8, 6, 14, 0.52);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.36);
}

.quest-journal__lore-title {
  margin: 0 0 calc(var(--gs-u-h) * 0.35);
  font-size: var(--gs-text-sm);
  font-weight: 620;
  color: #fff8ec;
}

.quest-journal__lore-epic {
  margin: 0 0 calc(var(--gs-u-h) * 0.25);
  font-size: var(--gs-text-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c9a86a;
}

.quest-journal__lore-when {
  margin: 0 0 calc(var(--gs-u-h) * 0.45);
  font-size: var(--gs-text-2xs);
  color: #9a8f7d;
}

.quest-journal__lore-summary {
  margin: 0;
  font-size: var(--gs-text-xs);
  line-height: 1.45;
  color: #ddd4c4;
}