/* QuestLog (scripts/lib/components/quest-log.mjs): news as the game's quest log inside one
   Panel. Rows: calendar date, title in Classic yellow, a meta line. The current or active row
   sits on panel-2 with a 2px accent bar, as in the game. With the pane on (the archive), wide
   screens put the active entry's detail beside the list; phones show it inline under its row. */

.wfg-quests { margin: 0; padding: 0; list-style: none; }
.wfg-quest + .wfg-quest { border-top: 1px solid var(--hairline); }
.wfg-quest-link {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  gap: 1px 10px;
  align-items: baseline;
  min-height: 2.75rem;
  padding: 7px 8px;
  text-decoration: none;
  color: var(--ink-2);
}
.wfg-quest-date { grid-row: span 2; font: 400 .78rem/1.35 var(--font-ui); letter-spacing: .03em; font-variant-numeric: tabular-nums; color: var(--ink-3); }
.wfg-quest-title { font-weight: 600; line-height: 1.35; color: var(--classic-yellow); }
.wfg-quest-meta { font: 400 .76rem/1.4 var(--font-ui); color: var(--ink-3); }
/* The category sits at the row's right edge, where the game prints Elite or Dungeon. */
.wfg-quest-link { grid-template-columns: 3.4rem minmax(0, 1fr) auto; }
.wfg-quest-cat { grid-column: 3; grid-row: 1; justify-self: end; padding-left: 8px; font: 400 .76rem/1.35 var(--font-ui); letter-spacing: .02em; white-space: nowrap; color: var(--ink-2); }
.wfg-quest-meta { grid-column: 2 / -1; }
a.wfg-quest-link:hover .wfg-quest-title { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-control); }
.wfg-quest.is-active > .wfg-quest-link, .wfg-quest-link[aria-current="page"] { background: var(--panel-2); box-shadow: inset 2px 0 0 var(--accent); }
.wfg-quest-link[aria-current="page"] .wfg-quest-title { color: var(--ink); }
.wfg-quest:target > .wfg-quest-link { background: var(--panel-2); box-shadow: inset 2px 0 0 var(--accent); }

.wfg-quest-month + .wfg-quest-month { margin-top: 6px; }
.wfg-quest-month > summary {
  display: flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 4px 8px;
  cursor: pointer;
  font: 400 .78rem/1.3 var(--font-ui);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
  border-bottom: 1px solid var(--hairline);
}

/* The detail pane: the selected entry's page, flat like an addon skin. */
.wfg-quest-detail { margin: 2px 8px 12px; color: var(--ink-2); }
.wfg-quest-detail[hidden] { display: none; }
.wfg-quest-kicker { display: flex; gap: 8px; margin: 0; font: 400 .78rem/1.4 var(--font-ui); color: var(--ink-3); }
.wfg-quest-kicker span { color: var(--accent-text); }
.wfg-quest-name { margin: 4px 0; font: 400 1.6rem/1.05 var(--font-display); letter-spacing: .01em; color: var(--ink); }
.wfg-quest-dispatch { margin: 0 0 6px; font: 400 .8rem/1.45 var(--font-ui); color: var(--ink-3); }
.wfg-quest-dek { margin: 0 0 10px; font-size: .92rem; line-height: 1.5; }
.wfg-quest-media { margin: 12px 0 0; border: 1px solid var(--edge); aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg); }
.wfg-quest-media img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 40rem) {
  /* Phones: the date and category share the first line, the title and meta follow. */
  .wfg-quest-link { grid-template-columns: auto minmax(0, 1fr); }
  .wfg-quest-date { grid-row: 1; grid-column: 1; }
  .wfg-quest-cat { grid-row: 1; grid-column: 2; }
  .wfg-quest-title, .wfg-quest-meta { grid-column: 1 / -1; }
  .wfg-quest-detail .wfg-quest-dek { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .wfg-quest-detail .wfg-quest-media { display: none; }
}

/* The archive's pane beside the list from 60rem. */
@media (min-width: 60rem) {
  [data-pane] { position: relative; }
  [data-pane] .wfg-quests, [data-pane] .wfg-quest-month { width: calc(50% - 12px); }
  [data-pane] .wfg-quest-detail { position: absolute; top: 46px; right: 14px; width: calc(50% - 26px); margin: 0; padding: 12px 14px; border: 1px solid var(--edge); box-shadow: var(--shadow-inner); background: var(--panel-2); }
}

/* The dispatch line keeps "· 7 sources" together when it wraps. */
.wfg-dispatch-count { white-space: nowrap; }
[data-quest-log] .wfg-panel-title small a { justify-content: flex-end; min-width: 1.75rem; }