/**
 * quest-feed.css — Plan E E2
 *
 * BEM .hd-quest-feed__* classes for the Færd-destination Tab[3] timeline.
 *
 * Spec: docs/plans/2026-05-21-player-portal-redesign-design.md §23.
 *
 * Design-gates honored:
 *   - hex-zero: ALL colors via var(--hd-*) tokens (no hex literals)
 *   - typography-coverage: ALL font-sizes via --hd-text-*, line-heights
 *                          via --hd-leading-*, font-families via --hd-font-*
 *   - motion-tokens-parity: ALL transitions via --hd-motion-*
 *   - wcag-contrast: 7 new --hd-quest-* tokens × 2 themes = 14 pairings
 *                    verified AAA ≥7:1 on --hd-surface-2 (see wcag-contrast-gate.js)
 *   - WCAG 2.5.5 touch-targets: filter-chips compose shared .hd-chip ≥44px targets
 *
 * Parchment rendering: entry-cards use .hd-parchment.hd-parchment--md classes
 * from public/css/parchment.css (provides background + SVG-filter via
 * #parchment-displace-md filter defined inline in index.php).
 */

@layer components {

  .hd-quest-feed {
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-2);
    padding: var(--hd-space-3);
    background: var(--hd-surface-1);
    color: var(--hd-text-primary);
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-body);
    line-height: var(--hd-leading-normal);
    container-type: inline-size;  /* enables @container queries below */
  }

  /* §23.8 grid wrapper — plain stacked column below 720px (mirrors the
   * container's previous flex-column spacing now that filter-wrap/timeline/
   * detail-pane live here); becomes the 2-col grid in the @container block. */
  .hd-quest-feed__grid {
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-2);
  }

  /* ─── Filter chip wrap (horizontal scroll, fade-out on right edge) ─────── */

  .hd-quest-feed__filter-wrap {
    display: flex;
    gap: var(--hd-chip-gap, var(--hd-space-1));
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg,
      var(--hd-text-primary) 0,
      var(--hd-text-primary) calc(100% - 24px),
      transparent
    );
    mask-image: linear-gradient(90deg,
      var(--hd-text-primary) 0,
      var(--hd-text-primary) calc(100% - 24px),
      transparent
    );
    padding-block: var(--hd-space-1);
  }

  .hd-quest-feed__filter-wrap::-webkit-scrollbar {
    display: none;
  }

  .hd-quest-feed__chip {
    flex-shrink: 0;              /* prevent shrink inside scroll-wrap */
  }

  .hd-quest-feed__chip-label {
    /* inherits font-family + size from chip */
    white-space: nowrap;
  }

  .hd-quest-feed__chip-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .hd-quest-feed__chip-dot--rejse      { background: var(--hd-quest-rejse); }
  .hd-quest-feed__chip-dot--npcer      { background: var(--hd-quest-npc); }
  .hd-quest-feed__chip-dot--lokationer { background: var(--hd-quest-lokation); }
  .hd-quest-feed__chip-dot--plot       { background: var(--hd-quest-plot); }
  .hd-quest-feed__chip-dot--narrative  { background: var(--hd-quest-narrative); }
  .hd-quest-feed__chip-dot--private    {
    background: var(--hd-quest-private);
    border: 1px dashed var(--hd-border-medium);
  }
  .hd-quest-feed__chip-dot--dm         { background: var(--hd-quest-dm); }
  .hd-quest-feed__chip-dot--note       { background: var(--hd-quest-note); }
  .hd-quest-feed__chip-dot--system     { background: var(--hd-quest-system); }

  .hd-quest-feed__chip-count {
    margin-inline-start: var(--hd-space-1);
    padding-inline: var(--hd-space-1);
    background: var(--hd-surface-1);
    border-radius: 999px;
    font-size: var(--hd-text-micro);
    line-height: var(--hd-leading-snug);
    color: var(--hd-text-tertiary);
  }

  .hd-quest-feed__chip.hd-chip--active .hd-quest-feed__chip-count {
    background: var(--hd-surface-overlay);
    color: var(--hd-text-primary);
  }

  /* ─── Timeline body ────────────────────────────────────────────────────── */

  .hd-quest-feed__timeline {
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-2);
  }

  .hd-quest-feed__day-label {
    font-family: var(--hd-font-display);
    font-size: var(--hd-text-ui-small);
    line-height: var(--hd-leading-snug);
    color: var(--hd-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px dashed var(--hd-border-subtle);
    padding-bottom: var(--hd-space-1);
    margin-top: var(--hd-space-2);
  }

  .hd-quest-feed__day-label:first-child {
    margin-top: 0;
  }

  /* ─── Entry cards (sit on parchment via .hd-parchment.hd-parchment--md) ── */

  .hd-quest-feed__entry {
    position: relative;
    margin-block: var(--hd-space-2);
  }

  /* Compose with .hd-parchment .hd-parchment--md from parchment.css.
   * Add only spacing overrides + type-specific accents here. */
  .hd-quest-feed__entry-card {
    padding: var(--hd-space-3);
  }

  /* Red unread-dot at left edge */
  .hd-quest-feed__entry--unread::before {
    content: '';
    position: absolute;
    top: var(--hd-space-2);
    left: calc(-1 * var(--hd-space-1));
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--hd-accent-error);
    z-index: 2;
  }

  /* §24.5 (AD-9) sender-prefix — surfaced on recipient-only DM entries
   * (visibility=recipient:X) when the current viewer is the sender.
   * Italic + secondary color, positioned above the meta-line so the
   * sender can quickly verify which teammate they wrote to. */
  .hd-quest-feed__sender-prefix {
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-ui-small);
    line-height: var(--hd-leading-snug);
    color: var(--hd-text-secondary);
    font-style: italic;
    margin-bottom: var(--hd-space-1);
  }

  .hd-quest-feed__entry-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-micro);
    line-height: var(--hd-leading-snug);
    color: var(--hd-text-tertiary);
    margin-bottom: var(--hd-space-1);
  }

  .hd-quest-feed__entry-type-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-inline-end: var(--hd-space-1);
    line-height: var(--hd-leading-icon);
  }
  .hd-quest-feed__entry-type-ico-glyph,
  .hd-quest-feed__attach-chip-icon-glyph {
    --hd-player-icon-size: 1em;
  }

  .hd-quest-feed__entry-type-label {
    font-weight: var(--hd-weight-semibold);
  }

  .hd-quest-feed__entry-actor,
  .hd-quest-feed__entry-time,
  .hd-quest-feed__entry-sep {
    /* inherits color + size from .hd-quest-feed__entry-meta */
  }

  .hd-quest-feed__entry-body {
    color: var(--hd-parchment-text, var(--hd-text-primary));
    font-family: var(--hd-font-body);
    font-size: var(--hd-text-body-small);
    line-height: var(--hd-leading-relaxed);
  }

  /* Narrative drop-cap (spec §23.4) — uses --hd-dropcap-color (already AAA
   * on --hd-narrative-bg in both themes per existing wcag-contrast-gate). */
  .hd-quest-feed__entry--narrative .hd-quest-feed__entry-body::first-letter {
    font-family: var(--hd-font-narrative);
    font-size: var(--hd-text-h2);
    line-height: var(--hd-leading-display);
    float: left;
    margin-inline-end: var(--hd-space-1);
    color: var(--hd-dropcap-color);
    font-weight: var(--hd-weight-semibold);
  }

  /* Private entries — italic body */
  .hd-quest-feed__entry--private .hd-quest-feed__entry-body {
    font-style: italic;
  }

  /* DM entries — red left border accent */
  .hd-quest-feed__entry--dm .hd-quest-feed__entry-card {
    border-left: 3px solid var(--hd-quest-dm);
  }

  /* Note entries — teal left border accent */
  .hd-quest-feed__entry--note .hd-quest-feed__entry-card {
    border-left: 3px solid var(--hd-quest-note);
  }

  /* System entries — warm-gray left border accent */
  .hd-quest-feed__entry--system .hd-quest-feed__entry-card {
    border-left: 3px solid var(--hd-quest-system);
  }

  .hd-quest-feed__entry-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hd-space-1);
    margin-top: var(--hd-space-2);
  }

  .hd-quest-feed__entry-tag {
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-micro);
    line-height: var(--hd-leading-snug);
    padding-inline: var(--hd-space-2);
    padding-block: var(--hd-space-1);
    background: var(--hd-surface-1);
    color: var(--hd-text-secondary);
    border: 1px solid var(--hd-border-subtle);
    border-radius: 999px;
  }

  /* ─── Compose FAB (52px lilla cirkel, fixed bottom-right) ──────────────── */

  .hd-quest-feed__compose-fab {
    --hd-quest-fab-glyph-scale: 1.25em;
    position: fixed;
    bottom: calc(var(--hd-space-3) + 60px);  /* clear tab-bar */
    right: var(--hd-space-3);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.35), 0 0 0 1px rgba(240,197,112,0.4);
    background: linear-gradient(135deg, var(--hd-accent-primary), var(--hd-accent-secondary));
    border: 2px solid var(--hd-border-accent, var(--hd-accent-primary));
    color: var(--hd-text-on-accent);
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-h3);
    line-height: var(--hd-leading-icon);
    cursor: pointer;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--hd-motion-fast) ease-out,
                background var(--hd-motion-fast) ease-out,
                opacity var(--hd-motion-fast) ease-out;
  }

  .hd-quest-feed__compose-fab:hover  { transform: scale(1.05); }
  .hd-quest-feed__compose-fab:active { transform: scale(0.95); }

  .hd-quest-feed__compose-fab-glyph {
    width: 1.35em;
    height: 1.35em;
    font-size: var(--hd-quest-fab-glyph-scale);
  }

  .hd-quest-feed__compose-fab:focus-visible {
    outline: 2px solid var(--hd-focus-ring);
    outline-offset: 2px;
  }

  /* #8 — the FAB now sits in the portal chrome (sibling of the roll-up mount),
   * so it must out-stack the content-mount (z 40) + raised panel (z 45). It stays
   * below the bars (top-bar z 100 / chrome) and modals (top-layer), so during the
   * rise it emerges from behind the bottom reel — reinforcing the roll-out look. */
  body.hd-player-mode-player-portal .hd-quest-feed__compose-fab {
    z-index: 50;
  }

  /* Roll-up entrance synced to the nav-panel roll (same duration + ease-in-out
   * cubic): the FAB rises from below the bottom edge to its resting spot when the
   * Færd panel opens — instead of riding the panel transform (which snapped by the
   * tab-bar height) or fading in afterwards. QuestFeed toggles --rising on each
   * show() to replay it. Zero-duration under prefers-reduced-motion (the token). */
  @keyframes hd-quest-fab-rise {
    from { opacity: 0; transform: translateY(calc(100% + var(--hd-space-3, 12px) + 60px)); }
    to   { opacity: 1; transform: translateY(0); }
  }
  body.hd-player-mode-player-portal .hd-quest-feed__compose-fab--rising {
    animation: hd-quest-fab-rise var(--hd-motion-roll-up) var(--hd-ease-in-out-cubic);
  }

  /* WCAG 2.3.3 reduced-motion override (mirrors combat-companion.css +
   * player-pip.css). Removes transitions + transform-scale on FAB hover/
   * active states, and disables filter-chip background/border transitions. */
  @media (prefers-reduced-motion: reduce) {
    .hd-quest-feed__chip,
    .hd-quest-feed__compose-fab {
      transition: none;
    }
    .hd-quest-feed__compose-fab:hover,
    .hd-quest-feed__compose-fab:active {
      transform: none;
    }
  }

  /* ─── State views (loading / error / empty) ────────────────────────────── */

  .hd-quest-feed__loading,
  .hd-quest-feed__empty,
  .hd-quest-feed__error {
    text-align: center;
    color: var(--hd-text-tertiary);
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-body-small);
    line-height: var(--hd-leading-normal);
    font-style: italic;
    padding: var(--hd-space-4);
  }

  .hd-quest-feed__error {
    color: var(--hd-accent-error);
    font-style: normal;
  }

  /* ─── Tablet landscape — kompakt timeline left, detail-pane right (§23.8) ─ */

  /* Detail-pane: hidden by default (1-col mobile). Must come BEFORE the
   * @container block so the container-query display:block wins in cascade. */
  .hd-quest-feed__detail-pane { display: none; }
  .hd-quest-feed__detail-pane .hd-parchment--lg { padding: var(--hd-space-4); }
  .hd-quest-feed__detail-empty {
    color: var(--hd-text-tertiary);
    font-style: italic;
    padding: var(--hd-space-4);
  }

  /* Detalje-rudens header-linje (§23.8): type-label + aktør + tidsstempel,
   * læses som overskrift over prosaen. Lidt mere fremtrædende end timeline-
   * kortets micro-meta, da det er den fokuserede enkelt-visning. */
  .hd-quest-feed__detail-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-ui-small);
    line-height: var(--hd-leading-snug);
    color: var(--hd-text-secondary);
    margin-bottom: var(--hd-space-2);
  }

  /* Blæk-skrift flourish (magi §4.9) — fjerpen-swash under headeren. Farve/animation
   * (stroke=var(--hd-ink), hd-magic-quill-draw) defineret i portal-magic.css. */
  .hd-quest-feed__flourish {
    display: block;
    width: 160px;
    max-width: 60%;
    height: 12px;
    margin: 0 0 var(--hd-space-2);
    overflow: visible;
  }

  /* Illumineret initial (magi §4.3) — drop-cap på første afsnit; brødtekst flyder
   * rundt. .cap-styling (guld + glød-puls) defineret i portal-magic.css. */
  .hd-quest-feed__detail-body.illum p { margin: 0 0 var(--hd-space-3); }
  .hd-quest-feed__detail-body.illum p:last-child { margin-bottom: 0; }
  .hd-quest-feed__detail-body.illum p:first-child::after { content: ''; display: table; clear: both; }

  /* Valgt entry i tidslinjen får guld-outline (§23.8). */
  .hd-quest-feed__entry--selected .hd-quest-feed__entry-card {
    outline: 2px solid var(--hd-border-accent, var(--hd-accent-primary));
    outline-offset: 1px;
  }

  /* Tilknytnings-chips nederst i detalje-ruden. */
  .hd-quest-feed__attach-chips {
    display: flex; flex-wrap: wrap; gap: var(--hd-space-2);
    margin-top: var(--hd-space-3);
  }
  .hd-quest-feed__attach-chip {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: var(--hd-text-ui-small);
    padding: 2px 8px; border-radius: 999px;
    background: var(--hd-surface-2); color: var(--hd-text-secondary);
    border: 1px solid var(--hd-border-subtle);
  }
  .hd-quest-feed__attach-chip-icon {
    display: inline-flex;
  }

  @container (min-width: 720px) {
    /* Grid sits on the DESCENDANT wrapper, not on .hd-quest-feed itself:
     * .hd-quest-feed carries `container-type: inline-size` and an element is
     * never its own query container, so a self-referencing grid here would be
     * inert. The wrapper resolves the query against its container ancestor. */
    .hd-quest-feed__grid {
      display: grid;
      grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
      gap: var(--hd-space-3);
    }
    .hd-quest-feed__filter-wrap { grid-column: 1 / -1; }
    .hd-quest-feed__timeline    { grid-column: 1; }
    .hd-quest-feed__detail-pane { grid-column: 2; display: block; }
  }

} /* end @layer components */

@layer components {
  /* === Portal-textures (Task 10): fg-card visual på Færd-feed container ===
   * Spec §7's "chip-pills for Belønning/XP/Tidsfrist" og "drop voks-segl"
   * er IKKE implementeret — features eksisterer ikke i nuværende data-model.
   * Individuelle quest-entries bevarer .hd-parchment--md visual (som via
   * Task 3 nu bruger seam-paper/dark-paper texture).
   * Kun outer container .hd-quest-feed får fg-card-ramme. */
  .hd-quest-feed {
    position: relative;
    border: 1px solid rgba(94, 69, 38, 0.4);
    border-radius: 4px;
    overflow: hidden;
    isolation: isolate;
  }

  :root:not([data-theme="light"]) .hd-quest-feed {
    background-color: var(--hd-surface-1);
    background-image:
      var(--hd-texture-gold-seam),
      var(--hd-texture-gold-seam),
      linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)),
      var(--hd-texture-dark-paper);
    background-size: 60px 3px, 60px 3px, cover, 500px 500px;
    background-repeat: repeat-x, repeat-x, no-repeat, repeat;
    background-position: 0 0, 0 100%, center, center;
  }

  [data-theme="light"] .hd-quest-feed {
    background-color: transparent;
    background-image:
      var(--hd-texture-gold-seam),
      var(--hd-texture-gold-seam),
      var(--hd-texture-seam-paper);
    background-size: 60px 3px, 60px 3px, 500px 500px;
    background-repeat: repeat-x, repeat-x, repeat;
    background-position: 0 0, 0 100%, center;
  }
} /* end @layer components (portal-textures Task 10) */