/* The profession section: /professions and /professions/<slug>.
 *
 * Loaded through the head_extra block of those two pages only, on top of pq.css (and the shell's
 * own sheet when it is there).  Nothing here restyles anything outside .pf-* -- with one
 * exception, the custom properties on <main> just below, which only *read* the site's tokens.
 *
 * Colours go through custom properties with fallbacks, so the section follows whatever palette the
 * shell sets (--panel, --heading ...) and still draws sensibly on the stylesheet alone.
 *
 * Contrast: the difficulty colours are the game's own (orange, yellow, green, grey) and are used
 * for text on --pf-panel; the greys are chosen to stay above 4.5:1 there.  Item quality colours are
 * the ones pq.css already uses.
 */

main {
  --pf-panel: var(--panel, var(--bg-raised, #0f1623));
  --pf-inset: var(--panel-2, var(--bg-inset, #0a1019));
  --pf-line: var(--line, var(--border, #25324a));
  --pf-line-strong: var(--line-strong, var(--border-strong, #34476b));
  --pf-text: var(--text, #e7e9f2);
  --pf-dim: var(--text-dim, #a7adc2);
  --pf-faint: var(--text-faint, #8d95ad);
  --pf-heading: var(--heading, #e6b422);
  --pf-heading-dim: var(--heading-dim, #9a7a14);
  --pf-link: var(--link, #8fc7ff);
  --pf-good: #5fd35f;
}

/* ------------------------------------------------------------------ the row of professions */

.pf-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 1rem 0;
  padding: 0.4rem;
  background: var(--pf-panel);
  border: 1px solid var(--pf-line);
  border-radius: 10px;
}
.pf-subnav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.6rem 0.25rem 0.3rem;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--pf-dim);
  font-size: 0.9rem;
  text-decoration: none;
  white-space: nowrap;
}
.pf-subnav-link:hover { color: var(--pf-text); border-color: var(--pf-line-strong); }
.pf-subnav-link[aria-current="page"] {
  color: var(--pf-heading);
  border-color: var(--pf-heading-dim);
  background: var(--pf-inset);
}
.pf-subnav-all { display: grid; place-items: center; width: 24px; height: 24px; color: var(--pf-faint); }

/* ------------------------------------------------------------------------------- the icon */

.pf-icon {
  flex: 0 0 auto;
  box-sizing: border-box;
  border-radius: 4px;
  border: 1px solid var(--pf-line-strong);
  background: var(--pf-inset);
  object-fit: cover;
  vertical-align: middle;
}
.pf-xs { width: 18px; height: 18px; }
.pf-sm { width: 24px; height: 24px; }
.pf-md { width: 32px; height: 32px; }
.pf-lg { width: 40px; height: 40px; border-radius: 6px; }
.pf-xl { width: 64px; height: 64px; border-radius: 8px; }
.pf-icon.is-placeholder {
  display: inline-grid;
  place-items: center;
  color: var(--pf-faint);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pf-xl.is-placeholder { font-size: 1rem; }

/* Item quality, the game's own colours (the same ones as .q1 .. .q7 in pq.css). */
.pf-q0 { color: #b0b0b0; }
.pf-q1 { color: #f2f3f8; }
.pf-q2 { color: #4ce04c; }
.pf-q3 { color: #4ea6ff; }
.pf-q4 { color: #c88bf5; }
.pf-q5 { color: #ff9d33; }
.pf-q6 { color: #e6cc80; }
.pf-q7 { color: #4fd6ff; }

/* Skill-up difficulty, again the game's: orange, yellow, green, grey. */
.pf-d-orange { color: #ff8040; }
.pf-d-yellow { color: #ffd100; }
.pf-d-green { color: #4cc24c; }
.pf-d-grey { color: #9a9a9a; }
.pf-muted { color: var(--pf-dim); font-size: 0.85em; }
.pf-none { color: var(--pf-faint); }
.pf-stat { color: var(--pf-good); font-size: 0.85em; }

/* ------------------------------------------------------------------------------ the head */

.pf-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1rem 1.5rem;
  align-items: center;
  margin: 1rem 0;
  padding: 1.1rem 1.25rem;
  background: var(--pf-panel);
  border: 1px solid var(--pf-line);
  border-radius: 10px;
}
.pf-bag {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-content: center;
  justify-content: center;
  width: 80px;
  min-height: 80px;
  padding: 6px;
  background: var(--pf-inset);
  border: 1px solid var(--pf-line-strong);
  border-radius: 12px;
}
.pf-title {
  margin: 0 0 0.35rem;
  color: var(--pf-heading);
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-caps: small-caps;
  letter-spacing: 0.06em;
}
.pf-title.is-name { text-transform: uppercase; font-variant-caps: normal; letter-spacing: 0.12em; }
.pf-head-text p { margin: 0.2rem 0; color: var(--pf-dim); }
.pf-figures {
  display: flex;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pf-figures li { display: grid; text-align: center; }
.pf-figures strong { color: var(--pf-heading); font-size: 1.5rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pf-figures span { color: var(--pf-dim); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; }

.pf-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin: 0 0 1rem;
  border-bottom: 1px solid var(--pf-line);
}
.pf-strip a {
  padding: 0.5rem 0.1rem;
  color: var(--pf-dim);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
}
.pf-strip a:hover { color: var(--pf-heading); border-bottom-color: var(--pf-heading-dim); }
.pf-strip a span {
  margin-left: 0.25rem;
  padding: 0 0.4rem;
  background: var(--pf-inset);
  border-radius: 999px;
  color: var(--pf-faint);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------- the sections */

.pf-section {
  margin: 1rem 0;
  padding: 1rem 1.25rem 1.25rem;
  background: var(--pf-panel);
  border: 1px solid var(--pf-line);
  border-radius: 10px;
}
.pf-heading {
  margin: 0 0 0.75rem;
  color: var(--pf-heading);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pf-heading small {
  margin-left: 0.6rem;
  color: var(--pf-faint);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
}
.pf-subheading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 1.25rem 0 0.5rem;
  color: var(--pf-text);
  font-size: 1rem;
}
.pf-subheading small { color: var(--pf-faint); font-weight: 400; }
.pf-note { margin: 1rem 0; }

/* ---------------------------------------------------------------------------- the cards */

.pf-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.pf-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1rem;
  overflow: hidden;
  background: var(--pf-inset);
  border: 1px solid var(--pf-line);
  border-radius: 10px;
}
/* The profession's own icon, very faint behind the card.  --pf-art is set inline only when the
   hub has the icon; without it the card is plain. */
.pf-card::before {
  content: "";
  position: absolute;
  right: -14px;
  top: -14px;
  width: 150px;
  height: 150px;
  background-image: var(--pf-art, none);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.08;
  pointer-events: none;
}
.pf-card > * { position: relative; margin: 0; }
.pf-card-title a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--pf-heading);
  font-size: 1.1rem;
  font-weight: 700;
  text-decoration: none;
}
.pf-card-title a:hover span { text-decoration: underline; }
.pf-tagline { color: var(--pf-dim); font-size: 0.9rem; }
.pf-example { display: flex; align-items: center; gap: 0.6rem; }
.pf-example-text { display: grid; line-height: 1.3; min-width: 0; }
.pf-count { color: var(--pf-faint); font-size: 0.85rem; }
.pf-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0;
  list-style: none;
}
.pf-goes { color: var(--pf-faint); font-size: 0.85rem; }
.pf-links {
  margin-top: auto;
  padding-top: 0.55rem;
  border-top: 1px solid var(--pf-line);
  font-size: 0.9rem;
}
.pf-links a { color: var(--pf-link); }

/* ---------------------------------------------------------------------- tables and filters */

/* A wrapper that scrolls sideways would also clip the hover card of a row near its bottom edge
   (overflow-x other than visible makes overflow-y auto too), so it only scrolls where the table can
   actually be wider than the screen. */
.pf-table-wrap { overflow: visible; }
@media (max-width: 60rem) {
  .pf-table-wrap { overflow-x: auto; }
}
.pf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.pf-table th {
  padding: 0.4rem 0.5rem;
  color: var(--pf-faint);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
  border-bottom: 1px solid var(--pf-line-strong);
}
.pf-table th a { color: inherit; text-decoration: none; }
.pf-table th a:hover { color: var(--pf-heading); }
.pf-table td, .pf-table tbody th {
  padding: 0.4rem 0.5rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--pf-line);
}
.pf-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf-table tbody tr:hover { background: var(--pf-inset); }
.pf-row.is-locked { opacity: 0.6; }

.pf-item {
  position: relative;
  display: inline-grid;
  gap: 0.05rem;
  outline-offset: 2px;
}
/* A row with a picture beside the name (a node, an ore, a project): the picture spans the name and
   the line under it. */
.pf-item.has-icon { grid-template-columns: auto minmax(0, 1fr); column-gap: 0.55rem; align-items: center; }
.pf-item.has-icon > .pf-icon { grid-row: span 2; }
.pf-item-name { font-weight: 600; }
.pf-tip {
  position: absolute;
  left: 0;
  top: calc(100% + 0.25rem);
  z-index: 5;
  display: none;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 13rem;
  max-width: 20rem;
  padding: 0.5rem 0.7rem;
  background: var(--pf-panel);
  border: 1px solid var(--pf-line-strong);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  color: var(--pf-dim);
  font-size: 0.85rem;
  font-weight: 400;
  white-space: normal;
}
.pf-tip-name { font-weight: 700; }
.pf-item:hover .pf-tip,
.pf-item:focus .pf-tip,
.pf-item:focus-within .pf-tip { display: flex; }

.pf-reagents ul { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.pf-reagents li, .pf-makes > span { position: relative; display: inline-block; line-height: 0; }
.pf-count-badge {
  position: absolute;
  right: 1px;
  bottom: 1px;
  min-width: 1.05em;
  padding: 0 3px;
  background: rgba(0, 0, 0, 0.78);
  border-radius: 3px;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}
.pf-skill span + span { margin-left: 0.45rem; }
.pf-source { white-space: nowrap; }
.pf-note-small { display: block; color: var(--pf-faint); font-size: 0.78rem; }

.pf-layout {
  display: grid;
  grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}
.pf-groups ul { margin: 0; padding: 0; list-style: none; }
.pf-groups ul ul { margin-left: 0.8rem; }
.pf-groups a {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  color: var(--pf-dim);
  font-size: 0.9rem;
  text-decoration: none;
}
.pf-groups a:hover { color: var(--pf-text); background: var(--pf-inset); }
.pf-groups a[aria-current] { color: var(--pf-heading); background: var(--pf-inset); }
.pf-groups a span { color: var(--pf-faint); font-variant-numeric: tabular-nums; }

.pf-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: flex-end;
  margin-bottom: 0.6rem;
}
.pf-filter label { display: grid; gap: 0.2rem; color: var(--pf-dim); font-size: 0.8rem; }
.pf-filter input[type="search"],
.pf-filter input[type="number"] {
  padding: 0.4rem 0.6rem;
  background: var(--pf-inset);
  border: 1px solid var(--pf-line-strong);
  border-radius: 6px;
  color: var(--pf-text);
  font: inherit;
  font-size: max(1rem, 16px);
}
.pf-search { flex: 1 1 14rem; }
.pf-search input { width: 100%; }
.pf-skillbox input { width: 7rem; }
.pf-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.6rem; }
.pf-chip {
  padding: 0.2rem 0.7rem;
  border: 1px solid var(--pf-line-strong);
  border-radius: 999px;
  color: var(--pf-dim);
  font-size: 0.85rem;
  text-decoration: none;
}
.pf-chip span { margin-left: 0.25rem; color: var(--pf-faint); font-variant-numeric: tabular-nums; }
.pf-chip:hover { border-color: var(--pf-heading-dim); }
.pf-chip[aria-current] { background: var(--pf-inset); border-color: var(--pf-heading); color: var(--pf-heading); }
.pf-chip.pf-d-orange { color: #ff8040; border-color: currentColor; }
.pf-chip.pf-d-yellow { color: #ffd100; border-color: currentColor; }
.pf-chip.pf-d-green { color: #4cc24c; border-color: currentColor; }
.pf-chip.pf-d-grey { color: #9a9a9a; border-color: currentColor; }
/* "Requirement unknown" is not a colour: a dashed neutral chip, like the rows it lists. */
.pf-chip.pf-d-unknown { color: var(--pf-dim); border-style: dashed; }
.pf-more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem 1rem;
  margin: 0.75rem 0 0;
}

/* The leveling table: a bar showing where the window sits in 1..600. */
.pf-bar-cell { width: 9rem; }
.pf-bar {
  position: relative;
  display: block;
  height: 6px;
  background: var(--pf-inset);
  border: 1px solid var(--pf-line);
  border-radius: 4px;
}
.pf-bar span {
  position: absolute;
  top: -1px;
  bottom: -1px;
  min-width: 3px;
  background: var(--pf-heading-dim);
  border-radius: 4px;
}
.pf-level .is-here .pf-bar span { background: var(--pf-heading); }
.pf-level .is-here th { color: var(--pf-heading); }
.pf-picks { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin: 0; padding: 0; list-style: none; }
.pf-picks li { display: inline-flex; align-items: center; gap: 0.4rem; }

/* -------------------------------------------------------------------------- narrow screens */

@media (max-width: 60rem) {
  .pf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-head { grid-template-columns: auto minmax(0, 1fr); }
  .pf-figures { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 42rem) {
  .pf-grid { grid-template-columns: minmax(0, 1fr); }
  .pf-layout { grid-template-columns: minmax(0, 1fr); }
  .pf-head { grid-template-columns: minmax(0, 1fr); }
  .pf-bag { width: auto; min-height: 0; justify-self: start; }
  .pf-section { padding: 0.9rem; }
  .pf-subnav { flex-wrap: nowrap; overflow-x: auto; }
}