/* ==========================================================================
   PalworldBreeding.gg — Components
   Page-level composites built from core.css tokens. Nothing here re-declares
   a colour: every value resolves back to a token so both themes stay in sync.
   ========================================================================== */

/* ------------------------------------------------- heading anchor markers */
.head-anchor {
  margin-left: .4em;
  color: var(--text-3);
  opacity: 0;
  text-decoration: none;
  font-weight: 400;
  transition: opacity .15s var(--ease);
}
h2:hover > .head-anchor, h3:hover > .head-anchor, .head-anchor:focus-visible { opacity: 1; }

/* ---------------------------------------------------------- home: hero kit */
.hero-search {
  display: flex; align-items: center; gap: var(--sp-3);
  width: min(100%, 34rem);
  padding: .7rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-2);
  color: var(--text-3);
  text-align: left;
  font-size: var(--step-0);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.hero-search:hover { border-color: var(--accent); box-shadow: var(--shadow-3); }
.hero-search kbd { margin-left: auto; }

.hero-stats { display: flex; flex-wrap: wrap; gap: var(--sp-6); margin-top: var(--sp-6); }
.hero-stat b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.hero-stat span {
  display: block; margin-top: .3rem;
  font-size: var(--step--2); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3);
}

/* --------------------------------------------------------- tool tile grid */
.tools-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.tool-tile {
  position: relative;
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-5);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  color: inherit; text-decoration: none; overflow: hidden;
  transition: transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.tool-tile::before {
  content: ''; position: absolute; inset: auto -20% -60% auto; width: 16rem; height: 16rem;
  background: radial-gradient(circle, color-mix(in srgb, var(--tint, var(--accent)) 30%, transparent), transparent 65%);
  opacity: .5; transition: opacity .25s var(--ease); pointer-events: none;
}
.tool-tile:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: var(--shadow-2); }
.tool-tile:hover::before { opacity: 1; }
.tool-tile > * { position: relative; }
.tool-tile .ico {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--tint, var(--accent)) 16%, transparent);
  color: var(--tint, var(--accent));
  border: 1px solid color-mix(in srgb, var(--tint, var(--accent)) 32%, transparent);
  margin-bottom: var(--sp-2);
}
.tool-tile h3 { font-size: var(--step-1); }
.tool-tile p { color: var(--text-2); font-size: var(--step--1); }
.tool-tile .go {
  margin-top: auto; padding-top: var(--sp-3);
  font-family: var(--font-display); font-weight: 600; font-size: var(--step--1);
  color: var(--tint, var(--accent)); display: inline-flex; align-items: center; gap: .4em;
}
.tool-tile:hover .go { gap: .7em; }
.tool-tile .go::after { content: '→'; transition: transform .18s var(--ease); }

.tint-amber  { --tint: var(--accent); }
.tint-teal   { --tint: var(--teal); }
.tint-water  { --tint: var(--el-water); }
.tint-grass  { --tint: var(--el-grass); }
.tint-fire   { --tint: var(--el-fire); }
.tint-dark   { --tint: var(--el-dark); }
.tint-dragon { --tint: var(--el-dragon); }
.tint-ice    { --tint: var(--el-ice); }
.tint-elec   { --tint: var(--el-electric); }

/* ---------------------------------------------------------- pal hero panel */
.pal-hero {
  display: grid; gap: var(--sp-6);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 860px) { .pal-hero { grid-template-columns: 20rem minmax(0, 1fr); } }

.pal-portrait {
  position: relative;
  aspect-ratio: 1;
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--el, var(--accent)) 26%, transparent), transparent 66%),
    var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-xl);
  overflow: hidden;
}
.pal-portrait::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(color-mix(in srgb, var(--el, var(--accent)) 12%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--el, var(--accent)) 12%, transparent) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(circle at 50% 50%, transparent 34%, #000 78%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 34%, #000 78%);
}
.pal-portrait img { position: relative; z-index: 1; width: 78%; filter: drop-shadow(0 10px 24px rgba(0,0,0,.3)); }
.pal-portrait .paldeck-no {
  position: absolute; top: var(--sp-3); left: var(--sp-4); z-index: 2;
  font-family: var(--font-mono); font-size: var(--step--1); color: var(--text-3);
}

.pal-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3); }
.pal-title h1 { font-size: var(--step-4); }
.pal-jp { font-size: var(--step-0); color: var(--text-3); font-weight: 500; }

.quickfacts {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden;
}
.quickfacts > div { background: var(--surface); padding: var(--sp-3) var(--sp-4); }
.quickfacts dt {
  font-size: var(--step--2); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3);
  font-family: var(--font-display); font-weight: 600;
}
.quickfacts dd { margin: .25rem 0 0; font-weight: 600; font-size: var(--step-0); }

/* -------------------------------------------------------------- stat block */
.stat-block { display: grid; gap: var(--sp-3); }
.stat-block .statline .label { font-family: var(--font-display); }

.workgrid { display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.workitem {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface-2);
  font-size: var(--step--1);
}
.workitem.off { opacity: .38; }
.workitem .lv {
  margin-left: auto;
  font-family: var(--font-mono); font-weight: 600;
  background: var(--accent-soft); color: var(--accent);
  padding: .05em .45em; border-radius: var(--r-sm);
}
.workitem.off .lv { background: var(--surface-3); color: var(--text-3); }

/* ------------------------------------------------------- breeding calculator */
.breed-board {
  display: grid; gap: var(--sp-4);
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}
@media (min-width: 820px) {
  .breed-board { grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; }
}
.breed-slot {
  position: relative;
  display: grid; gap: var(--sp-3); justify-items: center;
  padding: var(--sp-4);
  background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--r-lg);
  min-height: 13rem;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.breed-slot.has-pal { border-style: solid; border-color: color-mix(in srgb, var(--el, var(--accent)) 45%, var(--line)); }
.breed-slot .slot-label {
  font-family: var(--font-display); font-size: var(--step--2); letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-3);
}
.breed-slot .pal-pick { width: 100%; }
.breed-slot figure { width: 6.5rem; aspect-ratio: 1; display: grid; place-items: center; }
.breed-slot figure img { width: 100%; filter: drop-shadow(0 6px 14px rgba(0,0,0,.25)); }
.breed-slot .placeholder {
  width: 6.5rem; aspect-ratio: 1; border-radius: var(--r-lg);
  background: var(--surface-2); border: 1px solid var(--line-faint);
  display: grid; place-items: center; color: var(--text-3); font-size: 2rem;
}
.breed-op {
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: var(--step-3); color: var(--text-3);
  min-height: 2rem;
}
.breed-result { border-style: solid; background: var(--surface-2); }
.breed-result.has-pal { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* Breeding path / chain */
.chain { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.chain-step {
  display: inline-flex; align-items: center; gap: .45em;
  padding: .3em .6em;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md);
  font-size: var(--step--1); font-weight: 600;
}
.chain-step img { width: 24px; height: 24px; }
.chain-arrow { color: var(--text-3); }

.combo-list { display: grid; gap: var(--sp-2); }
.combo-row {
  display: grid; align-items: center; gap: var(--sp-3);
  grid-template-columns: 1fr auto 1fr;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
}
.combo-row .plus { color: var(--text-3); font-weight: 700; }
.combo-row.is-unique { border-color: var(--accent-line); background: var(--accent-soft); }

/* Passive skill picker */
.passive-pool { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.passive {
  display: inline-flex; align-items: center; gap: .4em;
  padding: .28em .7em; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--surface-2);
  font-size: var(--step--2); font-weight: 600;
}
.passive[data-rank="3"] { border-color: color-mix(in srgb, var(--good) 45%, transparent); color: var(--good); background: var(--good-soft); }
.passive[data-rank="2"] { border-color: color-mix(in srgb, var(--good) 32%, transparent); color: var(--good); }
.passive[data-rank="-1"], .passive[data-rank="-2"], .passive[data-rank="-3"] {
  border-color: color-mix(in srgb, var(--bad) 40%, transparent); color: var(--bad); background: var(--bad-soft);
}

/* ------------------------------------------------------------ type chart */
.typechart { border-collapse: separate; border-spacing: 2px; font-size: var(--step--2); }
.typechart th { font-weight: 600; }
.typechart td { text-align: center; border-radius: var(--r-sm); padding: .45rem .35rem; font-family: var(--font-mono); }
.typechart .x2   { background: color-mix(in srgb, var(--good) 24%, transparent); color: var(--good); font-weight: 700; }
.typechart .x05  { background: color-mix(in srgb, var(--bad) 20%, transparent); color: var(--bad); }
.typechart .x1   { background: var(--surface-2); color: var(--text-3); }
.typechart .hd-el {
  writing-mode: vertical-rl; transform: rotate(180deg);
  padding: .4rem .2rem; white-space: nowrap;
}

/* -------------------------------------------------------------- map shell */
/* Sized to leave the sticky header and the page title visible above it, so the
   map never pushes its own heading off-screen. */
.map-shell {
  position: relative;
  height: clamp(30rem, calc(100dvh - 190px), 60rem);
  background: var(--bg-deep);
  border-block: 1px solid var(--line);
}
#pcmap { position: absolute; inset: 0; }
.map-panel {
  position: absolute; z-index: 500; top: var(--sp-3); left: var(--sp-3);
  width: min(20rem, calc(100vw - 2rem));
  max-height: calc(100% - 2rem);
  display: flex; flex-direction: column;
  background: var(--surface-glass);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  overflow: hidden;
}
.map-panel-head { padding: var(--sp-3); border-bottom: 1px solid var(--line); }
.map-panel-body { overflow-y: auto; padding: var(--sp-3); display: grid; gap: var(--sp-3); }
.map-layer {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: .3rem .4rem; border-radius: var(--r-sm);
  font-size: var(--step--1); cursor: pointer; user-select: none;
}
.map-layer:hover { background: var(--surface-3); }
.map-layer .swatch { width: 14px; height: 14px; border-radius: 4px; flex: none; border: 1px solid rgba(0,0,0,.25); }
.map-layer .count { margin-left: auto; font-family: var(--font-mono); font-size: var(--step--2); color: var(--text-3); }
.map-coords {
  position: absolute; z-index: 500; bottom: var(--sp-3); left: 50%; transform: translateX(-50%);
  padding: .3rem .8rem; border-radius: var(--r-pill);
  background: var(--surface-glass); border: 1px solid var(--line);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-family: var(--font-mono); font-size: var(--step--2); color: var(--text-2);
  pointer-events: none; white-space: nowrap;
}
.map-toggle {
  position: absolute; z-index: 501; top: var(--sp-3); left: var(--sp-3);
  display: none;
}
@media (max-width: 720px) {
  .map-panel { transform: translateX(calc(-100% - 1rem)); transition: transform .22s var(--ease-out); }
  .map-panel.is-open { transform: none; }
  .map-toggle { display: inline-flex; }
  .map-panel.is-open ~ .map-toggle { left: auto; right: var(--sp-3); }
}
.leaflet-container { background: var(--bg-deep) !important; font-family: var(--font-body) !important; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: var(--surface) !important; color: var(--text) !important;
  border: 1px solid var(--line); box-shadow: var(--shadow-2) !important;
}
.leaflet-popup-content { margin: .8rem 1rem !important; font-size: var(--step--1) !important; }
.leaflet-popup-content h4 { font-size: var(--step-0); margin-bottom: .25rem; }
.leaflet-bar a { background: var(--surface) !important; color: var(--text) !important; border-color: var(--line) !important; }
.leaflet-bar a:hover { background: var(--surface-2) !important; }
.map-marker {
  display: grid; place-items: center;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.5);
  font-size: 11px; font-weight: 700; color: #fff;
}

/* ----------------------------------------------------------- tier lists */
.tier-row {
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr);
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  background: var(--surface);
}
.tier-row + .tier-row { margin-top: var(--sp-3); }
.tier-badge {
  display: grid; place-items: center;
  background: var(--tier, var(--surface-3)); color: #10161c;
  font-family: var(--font-display); font-size: var(--step-2); font-weight: 700;
}
.tier-s { --tier: #ff7a45; } .tier-a { --tier: #ffb020; }
.tier-b { --tier: #f5cf3d; } .tier-c { --tier: #63c065; }
.tier-d { --tier: #63d6e8; } .tier-f { --tier: #8b9199; }
.tier-items { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-3); }

/* ---------------------------------------------------------- guide index */
.guide-card {
  display: grid; gap: var(--sp-2);
  padding: var(--sp-4);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  color: inherit; text-decoration: none;
  transition: transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.guide-card:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: var(--shadow-2); }
.guide-card h3 { font-size: var(--step-1); }
.guide-card p { font-size: var(--step--1); color: var(--text-2); }
.guide-card .kicker {
  font-size: var(--step--2); letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); font-weight: 600; font-family: var(--font-display);
}

/* ----------------------------------------------------- drops / item rows */
.drop-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; }
.drop-row + .drop-row { border-top: 1px solid var(--line-faint); }
.drop-row img { width: 30px; height: 30px; flex: none; }
.drop-row .qty { margin-left: auto; font-family: var(--font-mono); font-size: var(--step--1); color: var(--text-2); }
.drop-row .rate { font-family: var(--font-mono); font-size: var(--step--2); color: var(--text-3); min-width: 3.5rem; text-align: right; }

/* --------------------------------------------------------- skill tables */
.skill-el { width: 2.1rem; }
tr.skill-row td { vertical-align: top; }
.skill-name { font-weight: 600; }
.skill-desc { color: var(--text-2); font-size: var(--step--2); }

/* --------------------------------------------------------- misc widgets */
.kv { display: grid; grid-template-columns: auto 1fr; gap: .3rem var(--sp-4); font-size: var(--step--1); }
.kv dt { color: var(--text-3); }
.kv dd { margin: 0; font-weight: 600; }

.pill-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.result-count { font-family: var(--font-mono); font-size: var(--step--1); color: var(--text-3); }

.anchor-nav {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  padding: var(--sp-3); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r-lg);
}
.anchor-nav a {
  font-size: var(--step--1); font-weight: 600; text-decoration: none;
  padding: .25em .7em; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line); color: var(--text-2);
}
.anchor-nav a:hover { border-color: var(--accent); color: var(--accent); }

/* Data-provenance badge shown on data-heavy pages */
.provenance {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  font-size: var(--step--2); color: var(--text-3);
  padding: var(--sp-3); border: 1px dashed var(--line); border-radius: var(--r-md);
}
.provenance strong { color: var(--text-2); }

/* Multi-column link index: the /breeding/ hub's A–Z and route-class listings.
   Plain CSS columns rather than a grid, so 288 links reflow at any width. */
.col-list {
  list-style: none; margin: 0; padding: 0;
  columns: 3 13rem; column-gap: var(--sp-5);
}
.col-list li { break-inside: avoid; margin: 0 0 .3rem; font-size: var(--step--1); }
.col-list a { text-decoration: none; color: var(--text-2); }
.col-list a:hover { color: var(--accent); text-decoration: underline; }