/* character.css — poe.ninja / Path-of-Building-style character detail page.
   Uses app.css tokens; PoE item rarity colours are the one intentional
   non-token palette (they're a game convention players read instantly). */

/* The dashboard's "Guild characters" widget used to live here as .char-strip /
   .char-tile. It now owns its own presentation (compact list / standard cards /
   expanded showcase, selected by container width) and its CSS moved with it to
   dashboard.css under ".gchars" — a widget owns how it presents. */

.char-back { margin-bottom: var(--space-3); font-size: var(--fs-sm); }
.char-back a { color: var(--color-parchment-dim); text-decoration: none; }
.char-back a:hover { color: var(--color-gold-bright); }

/* ---- Header ---- */
.character-hero {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.character-hero-body { flex: 1 1 16rem; min-width: 0; }
.character-hero-body h1 { margin: 0.1em 0 0.2em; }
.char-eyebrow {
  font-size: var(--fs-xs);
  font-variant: small-caps;
  letter-spacing: 0.1em;
  color: var(--color-gold);
  font-weight: 700;
}
.char-subline {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin: 0 0 var(--space-2);
}
.char-level { font-family: var(--font-display); font-size: var(--fs-md); color: var(--color-gold-bright); }
.char-owner { margin: 0; font-size: var(--fs-sm); }
.char-owner a { color: var(--color-parchment); }

.char-import { flex: 0 0 auto; align-self: flex-start; }
.char-import > summary { list-style: none; cursor: pointer; }
.char-import > summary::-webkit-details-marker { display: none; }
.char-import-form { margin-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); min-width: 16rem; }
.char-import-form textarea { min-height: 4rem; font-family: var(--font-mono); font-size: var(--fs-xs); }

/* ---- Two-column body ---- */
.char-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: start;
}
@media (min-width: 60rem) {
  .char-grid { grid-template-columns: 1fr 1fr; }
}
.char-col { display: flex; flex-direction: column; gap: var(--space-5); }
.char-col .card { margin-bottom: 0; }

/* ---- Equipment ---- */
.gear-list { list-style: none; margin: 0; padding: 0; }
.gear-item {
  display: grid;
  grid-template-columns: 5.5rem 2.4rem 1fr;
  grid-template-areas: "slot icon name" "slot icon base";
  align-items: center;
  gap: 0 var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}
.gear-item:last-child { border-bottom: none; }
.gear-slot {
  grid-area: slot;
  align-self: center;
  font-size: var(--fs-xs);
  font-variant: small-caps;
  letter-spacing: 0.05em;
  color: var(--color-parchment-dim);
}
.gear-icon {
  grid-area: icon;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid var(--color-border-strong);
  background: radial-gradient(circle at 50% 35%, #201a10, #100d09 80%);
}
.gear-icon img { max-width: 100%; max-height: 100%; object-fit: contain; }
.gear-name { grid-area: name; align-self: end; font-weight: 600; overflow-wrap: anywhere; }
.gear-base { grid-area: base; align-self: start; font-size: var(--fs-xs); color: var(--color-parchment-dim); }

/* Item mod tooltip (hover/focus) — shows the affixes parsed from the PoB text. */
.gear-item--has-tip { cursor: help; }
.gear-tip {
  position: absolute;
  z-index: 30;
  left: 5.5rem;
  top: 0;
  width: 20rem;
  max-width: min(20rem, 80vw);
  display: none;
  padding: var(--space-3);
  background: #0c0a06;
  border: 1px solid var(--color-gold-dim);
  box-shadow: var(--shadow-raised);
  font-size: var(--fs-xs);
  line-height: 1.45;
}
.gear-item { position: relative; }
.gear-item--has-tip:hover .gear-tip,
.gear-item--has-tip:focus .gear-tip,
.gear-item--has-tip:focus-within .gear-tip { display: block; }
.gear-tip-name { margin: 0 0 2px; font-weight: 700; }
.gear-tip-name--rare { color: #e6d15a; }
.gear-tip-name--unique { color: #c07a30; }
.gear-tip-name--magic { color: #8a8aff; }
.gear-tip-name--normal { color: #d0d0d0; }
.gear-tip-base { margin: 0 0 var(--space-2); color: var(--color-parchment-dim); }
.gear-tip-mods { list-style: none; margin: 0; padding: 0; }
.gear-tip-mods li { color: #8aa7d8; padding: 1px 0; }
.gear-tip-flag { margin: var(--space-2) 0 0; color: var(--color-crimson); font-weight: 600; }
@media (max-width: 40rem) { .gear-tip { left: 0; top: 100%; } }
.gear-extra { margin: var(--space-3) 0 0; font-size: var(--fs-sm); }

/* PoE rarity colours (dark theme) */
.gear-item--normal .gear-name  { color: #d0d0d0; }
.gear-item--magic .gear-name   { color: #8a8aff; }
.gear-item--rare .gear-name    { color: #e6d15a; }
.gear-item--unique .gear-name  { color: #c07a30; }

/* ---- Skills ---- */
.skill-groups { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
@media (min-width: 30rem) { .skill-groups { grid-template-columns: 1fr 1fr; } }
.skill-group {
  border: 1px solid var(--color-border);
  background: var(--color-bg-raised);
  padding: var(--space-3);
  position: relative;
}
.skill-group--main {
  border-color: var(--color-gold-dim);
  box-shadow: inset 0 0 0 1px rgba(201, 162, 74, 0.15);
}
.skill-group-tag {
  position: absolute;
  top: -0.6em;
  left: var(--space-3);
  font-size: var(--fs-xs);
  font-variant: small-caps;
  letter-spacing: 0.06em;
  background: var(--color-gold);
  color: #1a1408;
  padding: 0 0.5em;
}
.gem-list { list-style: none; margin: 0; padding: 0; }
.gem {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.2em 0;
  font-size: var(--fs-sm);
}
.gem-icon { width: 1.4rem; height: 1.4rem; object-fit: contain; flex: 0 0 auto; }
.gem-name { color: var(--color-parchment); }
.gem-meta { margin-left: auto; color: var(--color-parchment-dim); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gem--support { padding-left: var(--space-4); }
.gem--support .gem-icon { width: 1.1rem; height: 1.1rem; }
.gem--support .gem-name { color: var(--color-parchment-dim); font-size: var(--fs-xs); }
.gem--off { opacity: 0.45; }
.gem--off .gem-name { text-decoration: line-through; }

/* ---- Stats ---- */
.stat-block { margin-bottom: var(--space-4); }
.stat-block:last-child { margin-bottom: 0; }
.stat-block-title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-variant: small-caps;
  letter-spacing: 0.06em;
  color: var(--color-gold-bright);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-1);
}
.stat-lines { margin: 0; }
.stat-line-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0.25em 0;
}
.stat-line-row dt { color: var(--color-parchment-dim); font-size: var(--fs-sm); margin: 0; }
.stat-line-row dd {
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-parchment);
}
/* Resistance rows read like PoE's element colours */
.stat-lines--resistances .stat-line-row:nth-child(1) dd { color: #e06a5a; }
.stat-lines--resistances .stat-line-row:nth-child(2) dd { color: #6ab0e0; }
.stat-lines--resistances .stat-line-row:nth-child(3) dd { color: #e0cf5a; }
.stat-lines--resistances .stat-line-row:nth-child(4) dd { color: #b06ad0; }

/* ---- Passive tree ---- */
.tree-canvas {
  width: 100%;
  margin-bottom: var(--space-3);
  border: 1px solid var(--color-border);
  background:
    radial-gradient(ellipse at center, #14100a, #0b0906 80%);
  overflow: hidden;
}
.tree-svg { display: block; width: 100%; height: auto; max-height: 26rem; }
/* Skeleton (whole tree) dim; allocated path + nodes gold. */
.tree-svg .t-base  { fill: none; stroke: #3a3123; stroke-width: 10; }
.tree-svg .t-alloc { fill: none; stroke: var(--color-gold); stroke-width: 26; }
.tree-svg .t-nd  { fill: var(--color-gold-bright); }
.tree-svg .t-not { fill: var(--color-gold-bright); stroke: #1a1408; stroke-width: 6; }
.tree-svg .t-key { fill: #e8c76c; stroke: #1a1408; stroke-width: 10; }

.tree-points { margin: 0 0 var(--space-1); }
.tree-points .value { font-family: var(--font-display); font-size: var(--fs-2xl); color: var(--color-gold-bright); }
.tree-points .label { color: var(--color-parchment-dim); font-size: var(--fs-sm); }
.char-tree .btn { margin-top: var(--space-3); }