* { box-sizing: border-box; margin: 0; }
:root {
  --bg: #0f1420; --panel: #171e2e; --panel2: #1d2740; --text: #e8ecf5; --muted: #93a0b8;
  --accent: #4da3ff; --owned: #34c98e; --border: #2a3550;
  --display: "Archivo", -apple-system, sans-serif;
}
body { background: var(--bg); color: var(--text); font: 15px/1.5 "Instrument Sans", -apple-system, "Segoe UI", Roboto, sans-serif; min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2.5px; text-decoration-color: rgba(77,163,255,.45); }
a:hover { text-decoration-color: currentColor; }
header { padding: 18px 24px 8px; }
header h1, a.wordmark { font-family: var(--display); font-weight: 800; font-size: 40px; letter-spacing: .4px; }
a.wordmark { display: inline-block; color: var(--text); text-decoration: none; }
header p { color: var(--muted); font-size: 14px; }

/* Logo sits between "Skip" and "Miles" as a letter-sized glyph: logo-glyph.svg
   is cropped to the artwork bounds, so height = Archivo cap height (~.73em)
   and vertical-align:0 puts it exactly on the baseline. Same wordmark on the
   homepage h1 and every guide page's header link. */
header h1 .brand-mark, a.wordmark .brand-mark { width: auto; height: 29px; border-radius: 0; vertical-align: 0; margin: 0 10px; }

/* site nav: wordmark only — page links live in the footer */
.site-nav { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 16px; flex-wrap: wrap; }

/* ---- tier finishes (signature element): medals, tier buttons, map fills ---- */
.medal { display: inline-block; font-family: var(--display); font-weight: 600; font-size: 11.5px; letter-spacing: .3px; border-radius: 999px; padding: 1.5px 9px; vertical-align: 1px; }
.f-base { background: #1e3a5c; border: 1px solid #3d6da8; color: var(--text); }
.f-gold { background: linear-gradient(160deg, #f6dc95 0%, #d4a94e 55%, #c89a3e 100%); border: 1px solid #8a6526; color: #33260c; text-shadow: 0 1px 0 rgba(255,255,255,.35); }
.f-platinum { background: linear-gradient(160deg, #ffffff 0%, #eef2f7 40%, #c9d3df 100%); border: 1px solid #8fa0b3; color: #1f2630; text-shadow: 0 1px 0 rgba(255,255,255,.7); box-shadow: inset 0 1px 2px rgba(255,255,255,.9); }
.f-silver { background: linear-gradient(160deg, #c3c9cf 0%, #a2a9b1 55%, #868e97 100%); border: 1px solid #5f666e; color: #23272c; }
.f-diamond { background: linear-gradient(160deg, #f0fbff 0%, #b8e6f5 50%, #8fd0e8 100%); border: 1px solid #5b98b0; color: #0f3a4a; text-shadow: 0 1px 0 rgba(255,255,255,.5); }
.f-titanium { background: linear-gradient(160deg, #8d95a1 0%, #5f6875 55%, #474f5a 100%); border: 1px solid #333a44; color: #eef1f5; text-shadow: 0 -1px 0 rgba(0,0,0,.3); }
.f-blue { background: linear-gradient(160deg, #7cc4ff 0%, #3b8fe8 55%, #1f6fd6 100%); border: 1px solid #1a5cb0; color: #06213d; text-shadow: 0 1px 0 rgba(255,255,255,.3); }
.f-obsidian { background: linear-gradient(160deg, #3a4150 0%, #1c212b 55%, #14181f 100%); border: 1px solid #8d95a1; color: #eef1f5; text-shadow: 0 -1px 0 rgba(0,0,0,.4); }
.f-emerald { background: linear-gradient(160deg, #6fe0b2 0%, #34b57e 55%, #1d8a5f 100%); border: 1px solid #17694a; color: #06281a; text-shadow: 0 1px 0 rgba(255,255,255,.3); }
.f-pearl { background: linear-gradient(160deg, #ffffff 0%, #efe9f6 55%, #e2d8ee 100%); border: 1px solid #b3a8c4; color: #3a3544; text-shadow: 0 1px 0 rgba(255,255,255,.6); }

/* ---- program + category icons ---- */
.picon { display: inline-flex; width: 18px; height: 18px; flex-shrink: 0; align-items: center; justify-content: center; }
.picon img { width: 16px; height: 16px; border-radius: 3px; background: #fff; }
.picon.cat svg, .picon svg { width: 16px; height: 16px; color: var(--muted); }

/* ---- holdings bar ---- */
#holdings { padding: 10px 24px 0; }
.holdings-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 10px; }
#chips { display: contents; }
.chip { display: inline-flex; align-items: center; gap: 7px; background: #1a2f26; border: 1px solid #2b5a44; border-radius: 16px; padding: 4px 6px 4px 10px; font-size: 14px; }
.chip .chip-label { cursor: pointer; }
.chip-label .medal { margin-left: 8px; }
.chip.inactive { background: var(--panel2); border: 1px dashed var(--border); opacity: .75; }
.chip-note { font-size: 11px; color: #ffd28e; }
.chip-x { background: none; border: none; color: var(--muted); font-size: 15px; cursor: pointer; padding: 0 4px; }
.chip-x:hover { color: var(--text); }
.add-wrap { position: relative; flex: 1; min-width: 220px; }
#add { width: 100%; background: var(--panel2); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 8px 10px; font-size: 14px; }
#suggest { position: absolute; top: 105%; left: 0; right: 0; background: var(--panel2); border: 1px solid var(--border); border-radius: 8px; z-index: 10; overflow: hidden; }
.suggest-item { padding: 8px 12px; cursor: pointer; display: flex; align-items: center; gap: 9px; }
.suggest-item:hover { background: #24314f; }
.suggest-name { flex: 1; }
.suggest-type { color: var(--muted); font-size: 12px; display: inline-flex; align-items: center; gap: 5px; }
.suggest-type svg { width: 14px; height: 14px; }
#region { background: var(--panel2); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 8px 9px; font-size: 14px; }
#tier-ask { margin-top: 8px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14px; }
#tier-ask[hidden] { display: none; }
.tier-btn { border-radius: 8px; padding: 6px 14px; cursor: pointer; font-size: 13.5px; font-family: var(--display); font-weight: 600; }
.tier-btn:hover { filter: brightness(1.12); }
.tier-btn.cancel { background: none; border: 1px solid var(--border); color: var(--muted); font-weight: 400; }
#starters { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.starters-label { color: var(--muted); font-size: 13px; }
.starter { display: inline-flex; align-items: center; gap: 7px; border-radius: 16px; padding: 4px 12px; cursor: pointer; font-size: 13.5px; }
.starter:not([class*=" f-"]) { background: none; border: 1px dashed var(--border); color: var(--muted); }
.starter:not([class*=" f-"]):hover { color: var(--text); border-color: var(--accent); }
.starter[class*=" f-"] { font-weight: 600; }
.starter[class*=" f-"]:hover { filter: brightness(1.1); }

/* ---- results ---- */
main { flex: 1; display: flex; padding: 12px 24px; min-height: 0; }
#results { flex: 1; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; display: flex; flex-direction: column; min-width: 0; min-height: 62vh; position: relative; }
.tabs { display: flex; gap: 8px; padding: 12px 12px 0; }
.tab { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 600; background: var(--panel2); border: 1px solid var(--border); color: var(--muted); font-size: 14.5px; padding: 9px 16px; cursor: pointer; border-radius: 10px; letter-spacing: .2px; }
.tab svg { width: 17px; height: 17px; }
.tab:hover { color: var(--text); border-color: var(--accent); }
.tab.active { background: rgba(77,163,255,.16); border-color: var(--accent); color: var(--text); }
/* desktop shows map + cards stacked with these headers instead of tabs;
   each header is a button that collapses/expands its section */
.pane-title { display: none; margin: 0; padding: 14px 16px 0; }
.pane-toggle { display: flex; align-items: center; gap: 9px; width: 100%; background: none; border: none; padding: 0; cursor: pointer; text-align: left; font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: .3px; color: var(--text); }
.pane-toggle svg { width: 17px; height: 17px; color: var(--accent); flex-shrink: 0; }
.pane-toggle .chev { width: 14px; height: 14px; margin-left: 2px; color: var(--muted); transition: transform .15s; }
.pane-toggle:hover .chev { color: var(--text); }
.pane-toggle[aria-expanded="false"] .chev { transform: rotate(-90deg); }
.view { display: none; flex: 1; min-height: 0; }
.view.active { display: block; }
#cy { width: 100%; height: 100%; min-height: 480px; }
#graph-view { position: relative; }
.legend-wrap { position: absolute; bottom: 10px; left: 12px; z-index: 5; }
.legend-wrap summary { list-style: none; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; background: rgba(15,20,32,.85); border: 1px solid var(--border); color: var(--muted); font-family: Georgia, serif; font-style: italic; font-size: 15px; user-select: none; }
.legend-wrap summary::-webkit-details-marker { display: none; }
.legend-wrap summary:hover, .legend-wrap[open] summary { color: var(--text); border-color: var(--accent); }
.legend { position: absolute; bottom: 34px; left: 0; display: flex; flex-direction: column; gap: 6px; white-space: nowrap; font-size: 12px; color: var(--muted); background: rgba(15,20,32,.92); border: 1px solid var(--border); padding: 8px 12px; border-radius: 8px; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; }
.dot.owned { background: var(--owned); } .dot.reach { background: var(--accent); }
.dot.metal { background: conic-gradient(#d4a94e, #c3cad4, #8fd0e8, #5f6875, #d4a94e); }
.line { display: inline-block; width: 18px; height: 0; border-top: 2px solid var(--muted); vertical-align: middle; margin-right: 4px; }
.line.dashed { border-top-style: dashed; }
.line.dotted { border-top-style: dotted; }
.line.amber { border-top-color: #c99a4e; }
/* shared tag base — every .kind/.conf pill across app + guide pages */
.kind, .conf { font-family: inherit; font-size: 11px; font-weight: 400; line-height: 1.5; border-radius: 4px; padding: 1px 6px; border: 1px solid transparent; }
.conf { cursor: help; }
.conf.certain { background: #22344f; color: #a9c1e8; border: 1px solid #4a5d85; }
.conf.community { background: #2a3550; color: #a9c1e8; border: 1px dashed #4a5d85; }
.conf.uncertain { background: #2e2a3a; color: #c0b3d8; border: 1px dotted #6a5d8a; }
#conf { background: var(--panel2); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 8px 9px; font-size: 14px; }

/* ---- list view ---- */
#list-view { overflow-y: auto; padding: 12px 18px; }
.cat-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.cat-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--panel2); border: 1px solid var(--border); color: var(--muted); border-radius: 16px; padding: 4px 12px; cursor: pointer; font-size: 13px; }
.cat-btn svg { width: 14px; height: 14px; }
.cat-btn b { color: var(--text); font-weight: 600; }
.cat-btn.active { border-color: var(--accent); color: var(--text); background: #21395d; }
.none { color: var(--muted); padding: 20px; }
.hop-label { font-family: var(--display); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--accent); margin: 16px 0 6px; }
.step { background: var(--panel2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; display: flex; flex-direction: column; }
.step .route { font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.route-medal { margin-left: auto; }
.route-title { display: inline-flex; align-items: center; gap: 7px; }
.route-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.kind.match, .kind.free { background: #1f4d3a; color: #7de8b8; } .kind.confer { background: #1e3a5c; color: #8ec7ff; }
.kind.challenge, .kind.paid { background: #55401e; color: #ffd28e; }
.kind.multi-step { background: #33294e; color: #c4b2f0; }
.kind.oneshot { background: #55401e; color: #ffd28e; cursor: help; }
/* actions pin to the card's bottom edge (cards stretch to the row height in
   the desktop grid); shared metrics so <a> and <button> land the same height */
.card-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px; }
.apply, .got { font-family: inherit; font-size: 12.5px; font-weight: 400; line-height: 1.5; background: none; border-radius: 6px; padding: 3px 10px; cursor: pointer; text-decoration: none; }
.apply { border: 1px solid #2b4a72; color: var(--accent); }
.apply:hover { background: #1a2940; }
.got { border: 1px solid #2b5a44; color: var(--owned); }
.got:hover { background: #1a2f26; }
.step .meta { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.step a { color: var(--accent); }
.crumbs { color: var(--accent); }
.hopline { margin-top: 4px; padding-left: 6px; border-left: 2px solid var(--border); }
.step details { margin-top: 4px; }
.step summary { font-size: 12.5px; color: var(--muted); cursor: pointer; }
.empty { display: none; position: absolute; inset: 60px 0 0; text-align: center; color: var(--muted); padding-top: 70px; }
.empty.show { display: block; }

/* below-the-fold crawlable intro: quiet prose, never competes with the tool */
#about { padding: 26px 24px 6px; max-width: 780px; color: var(--muted); }
#about h2 { font-family: var(--display); font-weight: 800; font-size: 19px; letter-spacing: .3px; color: var(--text); margin: 22px 0 8px; }
#about h2:first-child { margin-top: 0; }
#about p { font-size: 14px; }
.about-guides { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 2px 0 0; padding: 0; list-style: none; font-size: 14px; }

footer { padding: 10px 24px 16px; color: var(--muted); font-size: 12px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-bottom: 8px; font-size: 13.5px; }
.footer-links a { color: var(--accent); font-family: var(--display); font-weight: 600; text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }

/* wide screens: combined view — map panel above the cards, no tabs;
   cards flow into a grid; group labels + filter span the full row */
@media (min-width: 1000px) {
  .tabs { display: none; }
  .view { display: block; }
  #results.has-results .pane-title { display: block; }
  #results:not(.has-results) #graph-view { display: none; }
  #results.graph-collapsed #graph-view { display: none; }
  #results.list-collapsed #list-view { display: none; }
  /* combined mode sizes to its content — the 62vh floor and the flex stretch
     would leave a dead gap under a collapsed section (kept for the empty state) */
  #results.has-results { min-height: 0; align-self: flex-start; }
  #results.list-collapsed { padding-bottom: 14px; }
  #graph-view { flex: none; height: 46vh; min-height: 380px; margin: 10px 16px 0; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); overflow: hidden; }
  #cy { min-height: 0; height: 100%; }
  #list-view { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 10px; align-content: start; }
  .cat-filter, .hop-label { grid-column: 1 / -1; }
  .cat-filter { margin-bottom: 0; }
  .hop-label { margin: 8px 0 0; }
  .step { margin-bottom: 0; }
}
@media (max-width: 700px) {
  header, #holdings, main, #about, footer { padding-left: 12px; padding-right: 12px; }
  .add-wrap { min-width: 150px; }
}
@media (prefers-reduced-motion: no-preference) {
  .step { transition: border-color .15s; }
  .step:hover { border-color: #3d6da8; }
}