/* ==========================================================================
   PITBORN — houses.css
   The dynasties and the Hall: styles for views/houses.js, views/house.js and views/hall.js,
   layered on app.css (tokens, .panel, .btn, .badge, .table, .timeline, .sigil, .spark live there).
   Sections: 1 houses list (cards, extinct ledger) · 2 house page head & grid · 3 members by
   generation · 4 family-tree viewer · 5 heirlooms, feuds, dynasty chart · 6 hall of legends ·
   7 responsive · 8 motion
   ========================================================================== */

/* 1. Houses list ---------------------------------------------------------- */
.houses-filters { margin-bottom: 14px; }
.houses-count { white-space: nowrap; }
.houses-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--gap); align-items: stretch; }
.house-card {
  position: relative;
  display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 4px 14px;
  padding: 14px 16px 12px;
  color: inherit; text-decoration: none;
  background:
    radial-gradient(ellipse 80% 60% at 0% 0%, color-mix(in srgb, var(--house, var(--gold-dim)) 16%, transparent), transparent 70%),
    linear-gradient(180deg, var(--bg-3), var(--bg-2));
  border: 1px solid var(--line); border-left: 3px solid var(--house, var(--gold-dim));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  transition: transform var(--t) var(--ease), border-color var(--t-fast), box-shadow var(--t) var(--ease);
}
.house-card:hover, .house-card:focus-visible { text-decoration: none; transform: translateY(-3px); border-color: var(--gold); box-shadow: var(--shadow), var(--glow-gold); }
.house-card .sigil { grid-row: 1 / span 3; align-self: start; }
.house-card .sigil.lg { --s: 72px; }
.house-card-name { margin: 0; font-size: 1.28rem; line-height: 1.1; color: var(--text-strong); display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.house-card-name .star { color: var(--gold); font-size: 0.8em; }
.house-card-sub { font-size: 0.74rem; color: var(--text-muted); letter-spacing: 0.04em; }
.house-card-motto { margin: 2px 0 0; font-family: var(--font-display); font-style: italic; color: var(--parchment); font-size: 0.92rem; line-height: 1.4; }
.house-card-stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line-soft); }
.house-card-stats .k { display: block; font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); }
.house-card-stats .v { display: block; font-family: var(--font-display); font-size: 1.15rem; color: var(--gold-bright); line-height: 1.15; font-variant-numeric: tabular-nums; }
.house-card-stats .v.blood { color: var(--blood-bright); }
.house-card-stats .v.muted { color: var(--text-muted); font-size: 0.95rem; }
.house-card-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-size: 0.74rem; color: var(--text-muted); }
.house-card-foot .badge { font-size: 0.6rem; }
.house-card.feuding { border-color: var(--blood); }
.house-card.feuding::after { content: "feud"; position: absolute; right: 10px; top: 10px; font: 700 0.58rem/1 var(--font-ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--blood-bright); }
.houses-empty { max-width: 720px; margin: 4vh auto 0; text-align: center; padding: 36px 28px; }
.houses-empty h1 { color: var(--gold-bright); }
.houses-empty .lede { font-size: 1.05rem; max-width: 46ch; margin: 0 auto 16px; }
.houses-empty .row { justify-content: center; }

/* the extinct ledger: a collapsed details block under the living */
.houses-extinct { margin-top: 22px; }
.houses-extinct > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  font: 700 0.72rem/1.4 var(--font-ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted);
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-2);
}
.houses-extinct > summary::-webkit-details-marker { display: none; }
.houses-extinct > summary::before { content: "▸"; color: var(--gold-dim); transition: transform var(--t-fast); }
.houses-extinct[open] > summary::before { transform: rotate(90deg); }
.houses-extinct[open] > summary { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.houses-extinct .table-wrap { border-top: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.houses-extinct .table tbody tr { color: var(--text-muted); }
.houses-extinct .table td.name a { color: var(--parchment-soft); }
.extinct-sigil { filter: grayscale(0.8) brightness(0.75); }

/* 2. House page head & grid ---------------------------------------------- */
.house-head { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-bottom: 18px; }
.house-head .sigil.xl { --s: 150px; }
.house-title { flex: 1 1 340px; min-width: 0; }
.house-name { margin: 0 0 4px; font-size: clamp(1.7rem, 3.6vw, 2.5rem); line-height: 1.08; }
.house-head.extinct .house-name { color: var(--text-muted); }
.house-motto { margin: 2px 0 10px; font-family: var(--font-display); font-style: italic; font-size: 1.12rem; color: var(--parchment); line-height: 1.4; }
.house-motto::before { content: "“"; color: var(--gold-dim); }
.house-motto::after { content: "”"; color: var(--gold-dim); }
.house-actions { flex: none; }
.house-strip { margin-bottom: var(--gap); }
.house-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: var(--gap); align-items: start; }
.house-values { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.house-prose p { margin: 0 0 0.9em; }
.house-prose p:last-child { margin-bottom: 0; }
.house-prose p:first-of-type::first-letter { font-family: var(--font-display); font-size: 2.6em; float: left; line-height: 0.85; padding: 4px 8px 0 0; color: var(--gold); }

/* 3. Members by generation ------------------------------------------------ */
.gen-block { margin-bottom: 14px; }
.gen-block:last-child { margin-bottom: 0; }
.gen-head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.gen-head h3 { margin: 0; font: 700 0.7rem/1.4 var(--font-ui); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.gen-head .gen-count { font-size: 0.72rem; color: var(--text-faint); }
.member-list { list-style: none; margin: 0; padding: 0; }
.member-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 6px 4px; border-bottom: 1px dashed var(--line-soft); }
.member-row:last-child { border-bottom: 0; }
.member-row.dead .member-name a { color: var(--text-muted); }
.member-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; min-width: 0; font-family: var(--font-display); font-size: 1rem; }
.member-name .role { font: 700 0.58rem/1 var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-bright); padding: 2px 6px; border: 1px solid var(--gold-dim); border-radius: 999px; }
.member-name .role.founder { color: var(--parchment-soft); border-color: var(--line-strong); }
.member-name .role.heir { color: #b6c8dc; border-color: #4a5f78; }
.member-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.72rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.member-meta .badge { font-size: 0.58rem; padding: 1px 7px; }
.member-sub { grid-column: 1 / -1; font-size: 0.74rem; color: var(--text-faint); }

/* 4. Family-tree viewer --------------------------------------------------- */
.tree-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tree-tools .zoom-level { min-width: 3.4em; text-align: center; font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-muted); }
.tree-scroll {
  position: relative;
  max-width: 100%; max-height: 520px;
  overflow: auto;
  padding: 12px;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(224, 164, 88, 0.07), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255, 225, 170, 0.025) 0 1px, transparent 1px 28px),
    var(--bg-1);
  cursor: grab;
  touch-action: pan-x pan-y;
}
.tree-scroll.dragging { cursor: grabbing; user-select: none; }
.tree-scroll svg.pb-familytree { display: block; max-width: none; }
.tree-scroll .ft-node { cursor: pointer; transition: filter var(--t-fast); }
.tree-scroll .ft-node:hover rect { filter: brightness(1.35); stroke: var(--gold-bright); }
.tree-scroll .ft-node.focus rect { stroke: var(--gold-bright); stroke-width: 2.5; filter: drop-shadow(0 0 6px rgba(245, 207, 133, 0.8)); }
.tree-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 0.7rem; color: var(--text-faint); }
.tree-legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: -1px; margin-right: 4px; }
.tree-legend .sw.f { background: #d9742a; }
.tree-legend .sw.m { background: #7f9bb5; }
.tree-legend .sw.dead { background: #2a2521; border: 1px solid #5c5347; }
.tree-legend .sw.star { background: none; color: #f5cf85; width: auto; height: auto; }
.tree-empty { padding: 18px; text-align: center; color: var(--text-faint); font-style: italic; font-family: var(--font-display); }

/* 5. Heirlooms, feuds, dynasty chart ------------------------------------- */
.heirloom-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.heirloom {
  padding: 8px 10px;
  border: 1px solid var(--line); border-left: 3px solid var(--gold-dim); border-radius: var(--radius);
  background: linear-gradient(90deg, rgba(224, 164, 88, 0.06), transparent 60%), var(--bg-1);
}
.heirloom.vaulted { border-left-color: var(--line-strong); }
.heirloom.masterwork { border-left-color: var(--gold-bright); }
.heirloom-name { font-family: var(--font-display); font-size: 1.02rem; color: var(--gold-bright); }
.heirloom-kind { font-size: 0.72rem; color: var(--text-muted); }
.heirloom-holder { font-size: 0.78rem; color: var(--parchment-soft); margin-top: 2px; }
.heirloom details { margin-top: 4px; font-size: 0.8rem; }
.heirloom details summary { cursor: pointer; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-dim); }
.heirloom details p { margin: 6px 0 0; color: var(--parchment); line-height: 1.55; font-family: var(--font-display); font-style: italic; }
.feud-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.feud { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--blood); border-radius: var(--radius); background: rgba(216, 38, 46, 0.06); }
.feud.settled { border-color: var(--line); background: var(--bg-1); color: var(--text-muted); }
.feud-name { font-family: var(--font-display); font-size: 1rem; }
.feud-sub { grid-column: 1 / -1; font-size: 0.72rem; color: var(--text-muted); }
.feud .bar { width: 72px; }
.ally-list { display: flex; flex-wrap: wrap; gap: 6px; }
.dyn-chart { display: flex; flex-direction: column; gap: 10px; }
.dyn-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: end; }
.dyn-row .spark { width: 100%; height: 48px; }
.dyn-row .spark.living { color: var(--ok-bright); }
.dyn-row .k { font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); grid-column: 1 / -1; }
.dyn-row .v { font-family: var(--font-display); font-size: 1.2rem; color: var(--gold-bright); line-height: 1; font-variant-numeric: tabular-nums; }
.dyn-row .v.ok { color: var(--ok-bright); }
.dyn-axis { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 0.62rem; color: var(--text-faint); }
.dyn-parts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 8px; font-size: 0.72rem; color: var(--text-muted); margin-top: 6px; }
.dyn-parts b { color: var(--parchment); font-weight: 600; font-variant-numeric: tabular-nums; }
.ledger { max-height: 360px; overflow: auto; padding-right: 4px; }
.ledger .timeline-item { padding-bottom: 8px; }
.ledger .timeline-text { font-size: 0.82rem; }
.house-chronicle .entry.w3 { padding: 12px 14px; }
.house-chronicle .entry.w3 .entry-title { font-size: 1.3rem; }
/* reference chips carry names of any length: let them wrap instead of pushing the page wide */
.house-chronicle .entry-refs .badge { white-space: normal; max-width: 100%; overflow-wrap: anywhere; text-align: left; }

/* 6. Hall of legends ------------------------------------------------------ */
.hall-head { align-items: center; }
.hall-empty { text-align: center; padding: 28px 24px; }
.hall-empty h2 { color: var(--gold-bright); font-size: 1.5rem; margin-bottom: 6px; }
.hall-empty .lede { font-family: var(--font-display); font-style: italic; color: var(--parchment); max-width: 50ch; margin: 0 auto 8px; }
.legend-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--gap); align-items: stretch; }
.legend-card {
  position: relative;
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 4px 14px;
  padding: 14px 16px 12px;
  background:
    radial-gradient(ellipse 70% 60% at 100% 0%, rgba(255, 143, 58, 0.14), transparent 70%),
    linear-gradient(180deg, var(--bg-3), var(--bg-2));
  border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 225, 170, 0.05);
}
.legend-card::before { content: "★"; position: absolute; right: 12px; top: 8px; color: var(--gold); font-size: 0.9rem; text-shadow: 0 0 10px rgba(245, 207, 133, 0.6); }
.legend-card.posthumous { border-color: var(--blood); }
.legend-card.posthumous::before { color: var(--blood-bright); }
.legend-thumb { grid-row: 1 / span 4; width: 96px; aspect-ratio: 3 / 4; border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; background: radial-gradient(ellipse 70% 60% at 50% 30%, rgba(217, 116, 42, 0.2), transparent 70%), #0a0706; display: flex; align-items: center; justify-content: center; }
.legend-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.legend-thumb svg { width: 100%; height: 100%; }
.legend-card.dead .legend-thumb { filter: grayscale(0.6) brightness(0.8); }
.legend-rank { font: 700 0.6rem/1 var(--font-ui); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-dim); }
.legend-name { margin: 0; font-size: 1.22rem; line-height: 1.1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-right: 18px; }
.legend-name .sigil.xs { --s: 22px; }
.legend-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.72rem; color: var(--text-muted); }
.legend-meta .badge { font-size: 0.58rem; padding: 1px 7px; }
.legend-citation { grid-column: 2; margin: 4px 0 0; font-family: var(--font-display); font-style: italic; font-size: 0.92rem; line-height: 1.5; color: var(--parchment); }
.legend-foot { grid-column: 2; display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: 0.7rem; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.hall-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: var(--gap); align-items: start; margin-top: var(--gap); }
.records-table td.record { font-family: var(--font-display); color: var(--gold); text-transform: capitalize; }
.records-table td.value { color: var(--parchment); }
.house-count-list { list-style: none; margin: 0; padding: 0; }
.house-count-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px dashed var(--line-soft); font-size: 0.88rem; }
.house-count-list li:last-child { border-bottom: 0; }
.house-count-list .sigil.sm { --s: 26px; }
.house-count-list .n { font-family: var(--font-display); font-size: 1.1rem; color: var(--gold-bright); font-variant-numeric: tabular-nums; }
.house-count-list .extinct { color: var(--text-faint); }
.house-count-list .bar { height: 5px; grid-column: 2 / -1; }

/* 7. Responsive ----------------------------------------------------------- */
@media (max-width: 1100px) {
  .house-grid { grid-template-columns: minmax(0, 1fr); }
  .hall-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .houses-grid { grid-template-columns: minmax(0, 1fr); }
  .house-card { grid-template-columns: 56px minmax(0, 1fr); }
  .house-card .sigil.lg { --s: 56px; }
  .house-card-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .house-head { gap: 14px; }
  .house-head .sigil.xl { --s: 96px; }
  .tree-scroll { max-height: 420px; padding: 8px; }
  .member-row { grid-template-columns: minmax(0, 1fr); }
  .member-meta, .member-name { min-width: 0; }
  .feud { grid-template-columns: minmax(0, 1fr); }
  .feud .bar { width: 100%; }
  .dyn-row { grid-template-columns: minmax(0, 1fr); }
  .dyn-row .v { justify-self: end; }
  .legend-grid { grid-template-columns: minmax(0, 1fr); }
  .legend-card { grid-template-columns: 72px minmax(0, 1fr); }
  .legend-thumb { width: 72px; }
  .dyn-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 8. Motion --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .house-card, .house-card:hover { transform: none; transition: none; }
}