/* Lifted from ../swgoh_graphic/swgoh_graphic/journey_guide.py by
   scripts/build_journey_guides.py — do not hand-edit.
   --bg and --bg-grid become the site background #0a0c11, and every
   font-size is scaled by 1.15 for reading at page distance. */
:root {
    color-scheme: dark;
    --bg: #0a0c11;
    --bg-grid: #0a0c11;
    --surface: #101c33;
    --surface-2: #0c1729;
    --border: #2f4366;
    --border-soft: #1c2c4a;
    --text: #eef2fb;
    --text-muted: #9fb4ff;
    --label: #cfd9ff;
    --gold: #ffd23f;
    --gold-dim: #3a3f52;
    --status-met: #45cf8f;
    --status-progress: #e6b23f;
    --status-pending: #e15b52;
    --group-ships: #4fd1ff;
    --group-other: #b98cff;
    --mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Consolas, monospace;
    --sans: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  }

  /* Always dark — this report has no light variant, matching the rest of
     this project's infographics. */
  * { box-sizing: border-box; }
  body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); }

  .jg-header {
    background: var(--surface-2);
    border-bottom: 1px solid var(--border-soft);
    padding: 22px 24px 18px;
  }
  .jg-eyebrow {
    font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--text-muted); margin: 0 0 6px;
  }
  .jg-title { font-size: clamp(20px, 3vw, 28px); font-weight: 800; margin: 0; text-wrap: balance; }
  .jg-subtitle { margin: 6px 0 0; color: var(--text-muted); font-size: 15.5px; }
  .jg-legend {
    display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px;
    font-family: var(--mono); font-size: 14.5px; color: var(--text-muted);
  }
  .jg-legend span { display: inline-flex; align-items: center; gap: 6px; }
  .jg-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

  .jg-refresh {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px;
    font-family: var(--mono); font-size: 14.5px; color: var(--text-muted);
  }
  .jg-refresh label { text-transform: uppercase; letter-spacing: 0.08em; font-size: 12.5px; }
  .jg-refresh input[type="range"] { width: 140px; accent-color: var(--group-ships); }
  .jg-refresh-out b { color: var(--text); }

  .jg-income {
    display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; margin-top: 8px;
    font-family: var(--mono); font-size: 14.5px; color: var(--text-muted);
  }
  .jg-income-label {
    text-transform: uppercase; letter-spacing: 0.08em; font-size: 12.5px; color: var(--label);
  }
  .jg-income-opt { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
  .jg-income-opt input { accent-color: var(--group-ships); cursor: pointer; margin: 0; }
  .jg-income-fixed { font-size: 12.5px; opacity: 0.75; }

  .jg-layout { display: flex; align-items: flex-start; max-width: 1300px; margin: 0 auto; }

  .jg-nav {
    flex: 0 0 220px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 12px;
    position: sticky;
    top: 0;
    max-height: 100vh;
    overflow-y: auto;
  }
  .jg-nav-group {
    border: 1px solid var(--border-soft);
    border-left: 3px solid var(--group-accent, var(--border));
    border-radius: 10px;
    background: var(--surface-2);
    overflow: hidden;
  }
  .jg-nav-group-header {
    width: 100%;
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
    background: transparent; border: none; cursor: pointer;
    padding: 10px 10px 10px 12px; font: inherit; text-align: left;
  }
  .jg-nav-group-header:hover { background: var(--surface); }
  .jg-nav-group-label {
    font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em;
    text-transform: uppercase; font-weight: 700; color: var(--group-accent, var(--text-muted));
  }
  .jg-nav-group-meta { display: flex; align-items: center; gap: 6px; color: var(--text-muted); }
  .jg-nav-group-count { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 12.5px; }
  .jg-nav-group-chevron { transition: transform 0.15s ease; flex-shrink: 0; }
  .jg-nav-group--collapsed .jg-nav-group-chevron { transform: rotate(-90deg); }
  .jg-nav-group-items {
    display: flex; flex-direction: column; gap: 2px; padding: 2px 6px 8px;
  }
  .jg-nav-group--collapsed .jg-nav-group-items { display: none; }
  .jg-nav-item {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    background: transparent; border: 1px solid transparent; border-radius: 8px;
    padding: 9px 10px; text-align: left; cursor: pointer;
    color: var(--text-muted); font: inherit; font-size: 15px;
  }
  .jg-nav-item:hover { background: var(--surface-2); }
  .jg-nav-item--active {
    background: var(--surface); border-color: var(--border);
    color: var(--text); font-weight: 600;
  }
  .jg-nav-name { text-wrap: balance; }
  .jg-nav-count {
    font-family: var(--mono); font-variant-numeric: tabular-nums;
    font-size: 13px; color: var(--text-muted); flex-shrink: 0;
  }
  .jg-nav-item--completed { border-top: 1px solid var(--border-soft); margin-top: 8px; padding-top: 10px; }

  .jg-main { flex: 1; min-width: 0; padding: 16px 24px 24px; background: var(--bg-grid); min-height: 60vh; }

  .jg-panel { display: none; }
  .jg-panel--active { display: block; }
  .jg-panel-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    margin-bottom: 14px;
  }
  .jg-panel-head h2 { margin: 0; font-size: 19.5px; font-weight: 700; }
  .jg-panel-count {
    font-family: var(--mono); font-variant-numeric: tabular-nums;
    font-size: 14.5px; color: var(--text-muted);
  }

  .jg-signal {
    background: var(--surface-2); border: 1px solid var(--border-soft);
    border-radius: 10px; padding: 12px 14px; margin-bottom: 16px;
    display: flex; flex-direction: column; gap: 9px;
  }
  .jg-signal--clear { flex-direction: row; align-items: center; gap: 10px; }
  /* One line per resource: label, the amounts it needs, then the time estimate
     pushed to the right edge. Wraps rather than overflowing on narrow screens. */
  .jg-signal-line {
    display: flex; align-items: baseline; gap: 8px 14px; flex-wrap: wrap;
  }
  .jg-signal-amounts { display: inline-flex; flex-wrap: wrap; gap: 6px 14px; }
  .jg-signal-line .jg-time-days { margin-left: auto; }
  .jg-signal-title {
    font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--label);
  }
  .jg-signal-done {
    font-family: var(--mono); font-size: 14px; color: var(--status-met);
  }
  .jg-signal-chip {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: var(--mono); font-size: 14px; color: var(--text-muted);
  }
  .jg-signal-chip b { color: var(--text); font-variant-numeric: tabular-nums; }
  .jg-signal-icon {
    width: 18px; height: 18px; flex-shrink: 0; display: inline-block;
    background-size: contain; background-repeat: no-repeat; background-position: center;
  }
  .jg-signal-qual { text-transform: none; letter-spacing: 0; opacity: 0.7; }
  .jg-time-days {
    color: var(--gold); font-weight: 700; font-variant-numeric: tabular-nums;
    font-family: var(--mono); font-size: 14px; white-space: nowrap;
  }

  .jg-working { margin-top: 18px; border-top: 1px solid var(--border-soft); padding-top: 10px; }
  .jg-working summary {
    cursor: pointer; font-family: var(--mono); font-size: 13px;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted);
    list-style: none; display: inline-flex; align-items: center; gap: 6px;
  }
  .jg-working summary::-webkit-details-marker { display: none; }
  .jg-working summary::before {
    content: "\25B8"; display: inline-block; transition: transform 0.15s ease;
  }
  .jg-working[open] summary::before { transform: rotate(90deg); }
  .jg-working summary:hover { color: var(--text); }
  .jg-working-body {
    margin-top: 12px; display: flex; flex-direction: column; gap: 16px;
    font-family: var(--mono); font-size: 13px;
  }
  .jg-work-section > h3 {
    margin: 0 0 6px; font-size: 12.5px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--label); font-weight: 700;
  }
  .jg-work-scroll { overflow-x: auto; }
  .jg-work-table { border-collapse: collapse; width: 100%; min-width: 520px; }
  .jg-work-table th, .jg-work-table td {
    text-align: right; padding: 4px 8px; border-bottom: 1px solid var(--border-soft);
    white-space: nowrap;
  }
  .jg-work-table th { color: var(--text-muted); font-weight: 600; }
  .jg-work-table td:first-child, .jg-work-table th:first-child { text-align: left; }
  .jg-work-table tbody tr:hover { background: var(--surface-2); }
  .jg-work-table .jg-work-total td { border-top: 2px solid var(--border); font-weight: 700; color: var(--text); }
  .jg-work-table .jg-work-muted { color: var(--text-muted); opacity: 0.7; }
  .jg-work-note { color: var(--text-muted); margin: 6px 0 0; text-wrap: pretty; }
  .jg-work-calc .jg-work-table td:first-child { color: var(--text-muted); }
  .jg-work-answer td { color: var(--gold) !important; font-weight: 700; }

  .jg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 16px;
  }

  .jg-card {
    position: relative; background: var(--surface); border: 2px solid var(--status, var(--border));
    border-radius: 10px; overflow: hidden; display: flex; flex-direction: column;
    align-items: center; padding: 16px 0 8px;
  }
  .jg-ribbon { position: absolute; top: 0; right: 0; width: 88px; height: 88px; pointer-events: none; z-index: 3; }
  .jg-ribbon::before { content: ""; position: absolute; inset: 0; background: var(--status); clip-path: polygon(38% 0, 100% 0, 100% 62%); }
  .jg-ribbon-req {
    position: absolute; top: 7px; right: 6px; font-family: var(--mono);
    font-size: 12.5px; font-weight: 700; color: #0c1120; white-space: nowrap;
  }

  /* Portrait is circular and inset within its wrap (not edge-to-edge) so the
     gear-ring/relic-wing overlay art has room to sit around it rather than
     on top of it. Ring/wing sizes below are tuned against a real in-game
     reference screenshot — the relic wing in particular runs much bigger
     than the portrait (~1.68x its diameter), overflowing well past the
     wrap; the wrap is narrower than the card (72.5%) specifically to give
     that overflow somewhere to go without hitting the card's own edge. */
  .jg-portrait-wrap { position: relative; width: 72.5%; aspect-ratio: 1 / 1; }
  /* Explicit top/left/width/height rather than the `inset` shorthand: `img`
     is a replaced element with its own intrinsic size, and when all four
     inset sides are set with width/height left auto, Chrome's abs-pos-
     replaced-element sizing algorithm can pull that intrinsic ratio in
     instead of simply deriving the box from the insets — producing a
     non-square, off-center box (measured: 119x135 instead of a centered
     square). Setting width/height directly removes the ambiguity. */
  .jg-portrait {
    position: absolute; top: 11%; left: 11%; width: 78%; height: 78%;
    border-radius: 50%; object-fit: cover; display: block;
    background: var(--surface-2); border: 2px solid var(--border-soft); z-index: 1;
  }
  .jg-gear-frame {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 104%; aspect-ratio: 104 / 89; object-fit: contain;
    pointer-events: none; z-index: 2;
  }
  .jg-relic-wing {
    position: absolute; top: 50%; width: 63%; aspect-ratio: 58 / 112;
    object-fit: contain; display: block; pointer-events: none; z-index: 2;
  }
  /* The raw asset's natural curve reads as a left bracket "(" — unmirrored
     on the left, mirrored to ")" on the right. */
  .jg-relic-wing--left { left: -15%; transform: translateY(-50%); }
  .jg-relic-wing--right { right: -15%; transform: translateY(-50%) scaleX(-1); }

  /* Ships: original edge-to-edge square art, no ring/badge — see _card_html. */
  .jg-portrait-wrap--ship { width: 100%; }
  .jg-portrait-wrap--ship .jg-portrait {
    top: 0; left: 0; width: 100%; height: 100%; border-radius: 0; border: none;
  }

  .jg-badge {
    position: absolute; left: 50%; bottom: 2%; transform: translateX(-50%);
    min-width: 30px; height: 26px; padding: 0 6px;
    border-radius: 13px; background: var(--surface-2); border: 2px solid var(--border-soft); color: var(--text);
    font-family: var(--mono); font-size: 14px; font-weight: 700;
    box-shadow: 0 1px 5px rgba(0,0,0,.55);
    display: flex; align-items: center; justify-content: center; z-index: 4;
  }

  .jg-stars { margin-top: 10px; font-size: 15px; line-height: 1; }
  .jg-star { margin: 0 1px; color: var(--gold-dim); }
  .jg-star--filled { color: var(--gold); }

  .jg-name { margin-top: 4px; font-size: 15px; font-weight: 600; text-align: center; padding: 0 8px 4px; text-wrap: balance; }

  .jg-completed-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-width: 480px; }
  .jg-completed-list li {
    display: flex; align-items: center; gap: 10px; background: var(--surface);
    border: 1px solid var(--border-soft); border-radius: 8px; padding: 10px 14px; font-size: 16px;
  }
  .jg-completed-count { margin-left: auto; font-family: var(--mono); font-size: 14px; color: var(--text-muted); }
  .jg-empty { color: var(--text-muted); }

  .jg-footer {
    text-align: right; color: var(--text-muted); font-family: var(--mono); font-size: 14px;
    padding: 8px 24px 22px; max-width: 1300px; margin: 0 auto;
  }

  @media (max-width: 760px) {
    .jg-layout { flex-direction: column; }
    .jg-nav { flex-direction: row; flex-wrap: wrap; position: static; max-height: none; width: 100%; }
  }