/*
 * Server Info: one profession's guide (server/profession.php, js/profession-guide.js). Linked from header.php
 * for that page only. --pg is the trade's own colour. Theme rules: one level of boxing (the .rcp-card panels),
 * inside them rules, tints and spacing at 6px radius; sentence case; nothing moves on its own.
 */

.pg { --pg: var(--rcp-accent); --pg-tint: color-mix(in srgb, var(--pg) 12%, transparent); --pg-rule: rgba(160, 190, 255, 0.12); }
.pg .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pg-muted { color: var(--rcp-textMuted); }
.pg h4 { margin: 18px 0 8px; font-size: 14px; }
.pg-section h3 { margin-top: 0; }

/* Hero */
.pg-hero { border-top: 3px solid var(--pg); }
/* The way back and the other trades, one quiet line over the title. */
.pg-hero-top { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.pg-back { font-size: 12px; color: var(--rcp-textMuted); }
.pg-back:hover { color: var(--pg); }
.pg-hero-row { display: flex; gap: 16px; align-items: center; margin: 0 0 14px; }
.pg-hero-emblem { image-rendering: pixelated; flex: none; filter: drop-shadow(0 0 18px color-mix(in srgb, var(--pg) 35%, transparent)); }
.pg-hero-text h3 { margin: 0 0 4px; font-size: 28px; color: var(--pg); }
.pg-summary { margin: 0 0 6px; font-size: 15px; }
.pg-hero-meta { margin: 0; color: var(--rcp-textMuted); font-size: 13px; }

.pg-hero .pg-scene { margin: 0 0 14px; }
/* The in-game scene as a wide strip under the title: the scene's middle, where the work is. */
.pg-hero .pg-scene img { aspect-ratio: 21 / 8; object-fit: cover; object-position: 50% 45%; }
.pg-intro p { max-width: 72ch; }
.pg-intro p:last-child { margin-bottom: 0; }

/* Your level and the page's sections: a strip that stays under the site's header (61px) as the page scrolls,
   so the level every tool reads is always in reach. */
.pg-dock {
  position: sticky;
  top: 70px;
  z-index: 20;
  display: grid;
  gap: 6px;
  margin: 0 0 16px;
  padding: 8px 14px;
  border: 1px solid var(--rcp-border);
  border-top: 2px solid var(--pg);
  border-radius: 10px;
  background: var(--bg-panel);
  box-shadow: 0 8px 18px -10px rgba(0, 0, 0, 0.6);
}
/* The strip sits a little below the header: the page would show through that gap as it scrolls past. */
.pg-dock::before { content: ''; position: absolute; left: -1px; right: -1px; bottom: 100%; height: 12px; background: var(--rcp-bg0); }
.pg-you { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.pg-you-label { font-weight: 600; font-size: 13px; }
.pg-you-tier { display: inline-flex; }
.pg-range { flex: 1 1 160px; min-width: 120px; accent-color: var(--pg); }
.pg-you-out { width: 2.5ch; font-size: 18px; color: var(--pg); font-variant-numeric: tabular-nums; }
/* A fixed size whatever it says: the slider beside it must not change width while it is being dragged, or the
   thumb moves out from under the pointer and the value flicks back (it did between Apprentice 39 and 40). */
.pg-you-note { flex: 0 0 auto; width: 26em; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; color: var(--rcp-textMuted); font-variant-numeric: tabular-nums; }

.pg-trades { display: flex; flex-wrap: wrap; gap: 2px; }
.pg-trade { display: inline-flex; padding: 3px; border-radius: 6px; opacity: 0.55; }
.pg-trade img { image-rendering: pixelated; }
.pg-trade:hover, .pg-trade:focus-visible { opacity: 1; background: rgba(255, 255, 255, 0.05); }
.pg-trade.is-current { opacity: 1; background: var(--pg-tint); }

.pg-toc { display: flex; flex-wrap: wrap; gap: 2px 14px; padding-top: 6px; border-top: 1px solid var(--pg-rule); font-size: 12px; }
.pg-toc a { color: var(--rcp-textMuted); }
.pg-toc a:hover, .pg-toc a:focus-visible { color: var(--pg); }
.pg-section { scroll-margin-top: 150px; }

/* Segmented buttons, shared by every control on the page */
.pg-seg { padding: 4px 10px; border: 1px solid var(--pg-rule); background: transparent; color: var(--rcp-textMuted); font: inherit; font-size: 12px; cursor: pointer; }
.pg-seg:first-child { border-radius: 6px 0 0 6px; }
.pg-seg:last-child { border-radius: 0 6px 6px 0; }
.pg-seg:only-child { border-radius: 6px; }
.pg-seg + .pg-seg { margin-left: -1px; }
.pg-seg:hover { color: var(--rcp-text); }
.pg-seg.is-on { background: var(--pg); border-color: var(--pg); color: #12161d; }
.pg-segs { display: inline-flex; flex-wrap: wrap; }
.pg-select, .pg-num, .pg-search { padding: 4px 8px; border: 1px solid var(--pg-rule); border-radius: 6px; background: var(--bg-panel-deep); color: var(--rcp-text); font: inherit; font-size: 13px; }
.pg-num { width: 64px; }
.pg-select-wide { max-width: 100%; min-width: 0; }
.pg-link { border: 0; background: none; color: var(--rcp-textMuted); font: inherit; font-size: 12px; cursor: pointer; text-decoration: underline; }
.pg-link:hover { color: var(--pg); }

/* Items */
.pg-icon { width: 24px; height: 24px; flex: none; vertical-align: middle; image-rendering: pixelated; }
.pg-icon.is-blank { display: inline-block; border-radius: 6px; background: rgba(255, 255, 255, 0.06); }
.pg-item { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.pg-item-name { overflow: hidden; text-overflow: ellipsis; }
.pg-item.is-guild .pg-item-name, tr.is-guild .pg-item-name { color: #e8b64c; }
.pg-amt { color: var(--pg); }

/* Tabs */
.pg-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 12px 0; border-bottom: 1px solid var(--pg-rule); }
.pg-tab { display: grid; gap: 2px; padding: 6px 12px 8px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--rcp-textMuted); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.pg-tab small { font-size: 11px; opacity: 0.8; }
.pg-tab:hover { color: var(--rcp-text); }
.pg-tab.is-on { color: var(--pg); border-bottom-color: var(--pg); }
.pg-tab.is-locked span::after { content: ' (locked)'; font-size: 11px; color: var(--rcp-textMuted); }
.pg-conds { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; font-size: 13px; }
.pg-conds .pg-seg { border-radius: 6px; margin: 0; }

.pg-facts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 12px; font-size: 13px; color: var(--rcp-textMuted); }
.pg-facts span:first-child { color: var(--pg); }

/* Odds bars */
.pg-odds, .pg-node { display: grid; gap: 4px; }
.pg-odd { display: grid; grid-template-columns: minmax(0, 15em) minmax(60px, 1fr) 7em; gap: 10px; align-items: center; font-size: 13px; }
.pg-odd.is-off { opacity: 0.45; }
.pg-odd.is-rare .pg-item-name { color: #e8b64c; }
.pg-bar { height: 10px; border-radius: 6px; background: rgba(255, 255, 255, 0.05); overflow: hidden; }
.pg-bar span { display: block; height: 100%; background: var(--pg); border-radius: 6px; transition: width 0.25s ease; }
.pg-pct { font-size: 12px; color: var(--rcp-textMuted); text-align: right; }
.pg-mix { display: flex; height: 14px; border-radius: 6px; overflow: hidden; margin: 0 0 14px; }
.pg-mix span + span { border-left: 2px solid var(--bg-panel); }
.pg-nodes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 18px 28px; }
.pg-node-head { margin: 0 0 4px; font-weight: 600; }
.pg-dot { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; }
.pg-note { margin: 14px 0 0; font-size: 13px; }
.pg-maps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--pg-rule); }
.pg-map { padding: 3px 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.04); font-size: 12px; }
.pg-map code { font-size: 11px; color: var(--rcp-textMuted); background: none; padding: 0; }
.pg-map em { font-style: normal; color: var(--pg); }

/* Rare window */
.pg-rare { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; padding: 12px; border-radius: 6px; background: rgba(232, 182, 76, 0.08); }
.pg-rare p { margin: 0; }
/* The paragraph names the book: the box shows only its picture. */
.pg-rare > .pg-item { flex: none; padding-top: 2px; }
.pg-rare > .pg-item .pg-item-name { display: none; }
.pg-rare-clock { display: block; margin-top: 6px; color: #e8b64c; }
.pg-rare.is-open .pg-rare-clock { font-weight: 600; }

/* Tables */
.pg-table td, .pg-table th { vertical-align: middle; }
tr.is-locked td, .is-locked > .pg-item, .pg-lease.is-locked, .pg-order.is-locked { opacity: 0.45; }

/* Recipes */
.pg-filter { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 12px; }
.pg-search { flex: 1 1 220px; }
.pg-count { font-size: 12px; color: var(--rcp-textMuted); }
.pg-recipes { display: grid; }
.pg-recipe { border-top: 1px solid var(--pg-rule); }
.pg-recipe[hidden] { display: none; }
.pg-recipe summary { display: grid; grid-template-columns: 24px minmax(0, 1.4fr) 9em minmax(0, 1.6fr) auto; gap: 10px; align-items: center; padding: 8px 4px; cursor: pointer; list-style: none; font-size: 13px; }
.pg-recipe summary::-webkit-details-marker { display: none; }
.pg-recipe summary:hover { background: rgba(255, 255, 255, 0.03); }
.pg-recipe[open] summary { background: var(--pg-tint); border-radius: 6px; }
.pg-recipe.is-locked summary { opacity: 0.5; }
.pg-recipe-lvl { color: var(--rcp-textMuted); font-size: 12px; }
.pg-recipe-mats { display: flex; flex-wrap: wrap; gap: 6px; }
.pg-mini { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; }
.pg-mini .pg-icon { width: 20px; height: 20px; }
.pg-mini.is-guild { padding-bottom: 1px; border-bottom: 2px solid #e8b64c; }
.pg-tag { padding: 1px 6px; border-radius: 6px; background: var(--pg-tint); font-size: 11px; color: var(--pg); white-space: nowrap; }
.pg-tag.is-lost { background: rgba(232, 182, 76, 0.12); color: #e8b64c; }
.pg-recipe-body { padding: 10px 4px 16px 38px; }
.pg-recipe-desc p { margin: 0 0 2px; font-size: 13px; }
.pg-recipe-desc { margin-bottom: 10px; }
.pg-mats { margin-bottom: 10px; }
.pg-batch-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 8px; }

.pg-calc-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; }
.pg-calc-out, .pg-batch-out { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 12px 0; }
.pg-stat { display: grid; gap: 2px; }
.pg-stat small { font-size: 11px; color: var(--rcp-textMuted); }
.pg-stat b { font-size: 18px; font-weight: 400; color: var(--pg); }
.pg-calc, .pg-planner { margin: 14px 0; padding: 12px; border-radius: 6px; background: rgba(255, 255, 255, 0.03); }
.pg-chart { display: flex; align-items: flex-end; gap: 1px; height: 70px; }
.pg-chart span { flex: 1; background: rgba(255, 255, 255, 0.08); border-radius: 2px 2px 0 0; }
.pg-chart span.is-on { background: var(--pg); }
.pg-chart span.is-gap { background: none; flex: 0.6; }

/* Farm */
.pg-day { position: relative; height: 34px; margin: 8px 0 18px; border-radius: 6px; background: rgba(255, 255, 255, 0.04); }
.pg-day .is-grow { position: absolute; top: 6px; height: 14px; border-radius: 6px; background: color-mix(in srgb, var(--pg) 45%, transparent); }
.pg-day .is-harvest { position: absolute; top: 3px; width: 4px; height: 20px; margin-left: -2px; border-radius: 2px; background: #e8b64c; }
.pg-day .is-tick { position: absolute; bottom: -16px; font-size: 10px; color: var(--rcp-textMuted); transform: translateX(-50%); }
.pg-leases { display: flex; flex-wrap: wrap; gap: 6px; }
.pg-lease { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 6px; background: rgba(255, 255, 255, 0.04); font-size: 12px; }
.pg-lease small { color: var(--rcp-textMuted); }
/* The orders as an even list read down by level: the level first, then what is asked. */
.pg-orders { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); gap: 0 28px; margin-top: 12px; }
.pg-order { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 8px; align-items: center; padding: 5px 0; border-top: 1px solid var(--pg-rule); font-size: 12px; }
.pg-order small { color: var(--rcp-textMuted); }
.pg-order.is-locked { opacity: 0.45; }

/* Skill planner */
.pg-tree-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.pg-tree-left { flex: 1 1 200px; color: var(--pg); }
.pg-tree-grids { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 20px; }
.pg-tree-grid h4 { margin-top: 0; }
.pg-tree-cells { display: grid; grid-template-columns: repeat(7, 52px); grid-auto-rows: 70px; gap: 6px; }
.pg-tree-grid:last-child .pg-tree-cells { grid-template-columns: repeat(4, 52px); }
.pg-tree-grid:last-child .pg-skill { grid-column: auto !important; grid-row: auto !important; }
.pg-skill { position: relative; display: grid; grid-template-rows: 48px auto; align-content: start; justify-items: center; gap: 2px; padding: 3px 0 4px; border: 1px solid transparent; border-radius: 6px; background: rgba(255, 255, 255, 0.03); cursor: pointer; }
.pg-skill:hover { border-color: var(--pg-rule); }
.pg-skill.is-on { border-color: var(--pg); background: var(--pg-tint); }
.pg-skill:not(.is-set) .pg-skill-icon { filter: grayscale(1) brightness(0.6); }
.pg-skill.is-blocked { opacity: 0.5; }
.pg-skill-icon { display: block; width: 48px; height: 48px; background-repeat: no-repeat; image-rendering: pixelated; }
.pg-skill-lv { font-size: 10px; line-height: 13px; color: var(--rcp-textMuted); }
.pg-skill.is-set .pg-skill-lv { color: var(--pg); }
.pg-tree-info { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--pg-rule); }
.pg-tree-info-head { display: flex; gap: 12px; align-items: center; }
.pg-tree-info-head > div { flex: 1; }
.pg-tree-name { margin: 0; font-size: 16px; color: var(--pg); }
.pg-tree-info-head p { margin: 0; }
.pg-step { width: 32px; height: 32px; border: 1px solid var(--pg-rule); border-radius: 6px; background: none; color: var(--rcp-text); font: inherit; font-size: 18px; cursor: pointer; }
.pg-step:hover:not(:disabled) { border-color: var(--pg); color: var(--pg); }
.pg-step:disabled { opacity: 0.35; cursor: default; }
.pg-levels { columns: 2; column-gap: 28px; margin: 8px 0 0; padding-left: 22px; font-size: 13px; color: var(--rcp-textMuted); }
.pg-levels li.is-on { color: var(--pg); }

/* Gear */
.pg-gear { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 18px 24px; }
.pg-gear-slot h4 { margin-top: 0; }
/* A slot with an upgrade path (the tool) runs across the whole width, grade after grade, left to right. */
.pg-gear-slot.is-ladder { grid-column: 1 / -1; }
.pg-gear-slot.is-ladder .pg-ladder { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; border-left: 0; border-top: 2px solid var(--pg-rule); }
.pg-gear-slot.is-ladder .pg-ladder li { padding: 16px 0 0; }
.pg-gear-slot.is-ladder .pg-ladder li::before { left: 0; top: -6px; }
/* A slot with a single piece has no path to draw. */
.pg-gear-slot:not(.is-ladder) .pg-ladder { border-left: 0; }
.pg-gear-slot:not(.is-ladder) .pg-ladder li { padding: 0; }
.pg-gear-slot:not(.is-ladder) .pg-ladder li::before { display: none; }
.pg-ladder { margin: 0; padding: 0; list-style: none; border-left: 2px solid var(--pg-rule); }
.pg-ladder li { position: relative; padding: 0 0 12px 14px; font-size: 13px; }
.pg-ladder li::before { content: ''; position: absolute; left: -6px; top: 8px; width: 10px; height: 10px; border-radius: 50%; background: var(--pg); }
.pg-ladder p { margin: 4px 0 0; }

/* Tasks */
.pg-tasks { margin: 16px 0 0; padding: 0; list-style: none; }
.pg-task { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--pg-rule); }
.pg-task-lvl { color: var(--pg); font-size: 13px; }
.pg-task.is-done .pg-task-lvl::after { content: ' done'; color: var(--rcp-success); }
.pg-task p { margin: 0 0 4px; }
.pg-task-title { font-weight: 600; }
.pg-task-items { display: flex; flex-wrap: wrap; gap: 6px 16px; }

/* Questions */
.pg-tips { padding-left: 18px; }
.pg-tips li { margin-bottom: 4px; }
.pg-faq details { border-top: 1px solid var(--pg-rule); }
.pg-faq summary { padding: 10px 0; cursor: pointer; }
.pg-faq summary:hover { color: var(--pg); }
.pg-faq details p { margin: 0 0 12px; color: var(--rcp-textMuted); }

/* The game's own pictures of the trade */
.pg-scene { margin: 4px 0 16px; }
.pg-scene img { display: block; width: 100%; height: auto; border-radius: 6px; image-rendering: auto; }
.pg-scene figcaption { margin-top: 6px; font-size: 12px; color: var(--rcp-textMuted); }

@media (max-width: 760px) {
  .pg-hero-row { align-items: flex-start; gap: 12px; }
  .pg-hero-emblem { width: 48px; height: 48px; }
  .pg-hero-text h3 { font-size: 22px; }
  .pg-hero .pg-scene img { aspect-ratio: 16 / 9; }
  .pg-recipe summary { grid-template-columns: 24px minmax(0, 1fr) auto; }
  .pg-recipe-mats, .pg-recipe-tags { grid-column: 2 / -1; }
  .pg-odd { grid-template-columns: minmax(0, 1fr) 70px 5.5em; }
  .pg-tree-grids { grid-template-columns: 1fr; }
  .pg-tree-cells { grid-template-columns: repeat(auto-fill, 52px); }
  .pg-skill { grid-column: auto !important; grid-row: auto !important; }
  .pg-levels { columns: 1; }
  .pg-task { grid-template-columns: 1fr; gap: 4px; }
}

/* Below the width where the site's header stops sticking, the strip scrolls with the page: on a phone it would
   cover a third of the screen. */
@media (max-width: 900px) {
  .pg-dock { position: static; box-shadow: none; }
  .pg-dock::before { content: none; }
  .pg-section { scroll-margin-top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .pg-bar span { transition: none; }
}