/* Self-hosted OFL faces for Valheim Chronicles. Served from /chronicles/img/fonts/ (stable names, immutable cache).
   Subsets: latin + latin-ext only. Generated from Google Fonts css2 manifests; see OFL.txt. */

@font-face {
  font-family: 'Bodoni Moda';
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url('/chronicles/img/fonts/bodoni-moda-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bodoni Moda';
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url('/chronicles/img/fonts/bodoni-moda-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/chronicles/img/fonts/bodoni-moda-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/chronicles/img/fonts/bodoni-moda-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/chronicles/img/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/chronicles/img/fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/chronicles/img/fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/chronicles/img/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Chronicler Archive tokens (see baseline/docs/design/valheim-chronicles-stitch-2026-09/DESIGN.md) ---
   Strict dark. Elevation is tonal stratification plus a 1px chisel edge, never a soft
   drop shadow; the one ambient shadow is reserved for hover lifts and modals. */
:root {
  --surface-low: #090f16;          /* container-lowest: recessed inputs, counter cells */
  --surface: #0e141c;              /* page ground */
  --surface-container-low: #161c24;
  --surface-container: #1a2028;
  --surface-high: #242a33;         /* container-high: hover, modal interiors */
  --surface-highest: #2f353e;

  --flame: #f59e0b;                /* primary CTA fill, active indicators */
  --primary: #ffc174;              /* links, focus */
  --bronze: #d97707;               /* secondary borders, hover */
  --tertiary: #ffc32d;             /* luminous metrics */

  --on-surface: #dde3ee;
  --parchment: #d8c3ad;            /* on-surface-variant: body copy, metadata */
  --outline: #a08e7a;              /* labels, eyebrows */
  --outline-variant: #534434;      /* hairlines */

  --ember: rgba(245, 158, 11, 0.25);
  --chisel: rgba(255, 255, 255, 0.08);

  --font-display: 'Bodoni Moda', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

:root {
  color-scheme: dark;
  font: 16px/1.6 var(--font-body);
  background: var(--surface);
  color: var(--on-surface);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

header,
main {
  max-width: 1160px;
  margin: auto;
  padding: 24px;
}

header {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: space-between;
  border-bottom: 1px solid var(--outline-variant);
}

a {
  color: var(--primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1 {
  font: clamp(2.5rem, 7vw, 5rem) / 1.1 var(--font-display);
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 18px 0;
}

h2 {
  font: 2rem/1.25 var(--font-display);
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 4px 0 10px;
}

h3 {
  margin: 0;
}

p {
  margin: 0;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--outline);
  letter-spacing: 0.14em;
}

#intro {
  max-width: 740px;
  color: var(--parchment);
}

#thread-actions {
  margin-top: 14px;
}

#thread-actions a {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid var(--outline-variant);
  border-radius: 4px;
  font-size: 0.88rem;
}

#filters {
  display: flex;
  gap: 20px;
  margin: 32px 0;
  flex-wrap: wrap;
}

label {
  display: grid;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--outline);
}

input,
select,
button,
textarea {
  font: inherit;
  color: var(--on-surface);
  background: var(--surface-low);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  padding: 11px;
}

input,
select,
textarea {
  width: 100%;
}

/* Secondary "stele" button: a raised iron slab bounded in bronze, never a soft pill. */
button {
  cursor: pointer;
  margin: 20px 0;
  background: var(--surface-container);
  border: 1px solid rgba(217, 119, 6, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

button:hover {
  border-color: var(--bronze);
  background: var(--surface-high);
}

/* Primary "forged" button: filled flame with the void colour cut out of it. */
button.primary {
  background: var(--flame);
  border-color: var(--flame);
  color: #090f16;
  font-weight: 700;
}

button.primary:hover {
  background: var(--tertiary);
  border-color: var(--tertiary);
}

/* "Not mine", the quiet half of the claim pair: the stele slab in chisel and parchment
   rather than bronze, so it reads as the other answer to the same question and never
   competes with the forged button beside it. Unscoped on purpose -- the thread page
   carries the same control over the same claim sheet. */
button.claim-disavow {
  background: var(--surface-container);
  border-color: var(--chisel);
  color: var(--parchment);
  font-weight: 400;
}

button.claim-disavow:hover {
  background: var(--surface-high);
  border-color: var(--outline-variant);
  color: var(--on-surface);
}

fieldset {
  border: 1px solid var(--outline-variant);
  border-radius: 6px;
  padding: 10px 12px 12px;
}

legend {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--outline);
}

fieldset label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 0.9rem;
}

fieldset input {
  width: auto;
  padding: 0;
  margin: 0;
}

/* Hero stat mosaic */
.stat-mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 28px 0 8px;
}

.stat-tile {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 6px;
  padding: 16px 18px;
  border: 1px solid var(--outline-variant);
  border-radius: 6px;
  background: var(--surface-container-low);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.stat-tile-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--outline);
}

.stat-tile-value {
  font-family: var(--font-mono);
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--tertiary);
}

.stat-tile-ledger .stat-tile-value {
  color: var(--primary);
  font-size: 1.1rem;
}

.stat-tile-note {
  font-size: 0.8rem;
  color: var(--parchment);
  min-height: 1.1em;
}

/* Search Ctrl+K hint */
#search-hotkey {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font: 0.72rem var(--font-mono);
  color: var(--outline);
  background: var(--surface-low);
  border: 1px solid var(--outline-variant);
  border-radius: 4px;
  padding: 2px 6px;
  pointer-events: none;
}

@media (max-width: 680px) {
  #search-hotkey {
    display: none;
  }
}

/* Filter controls: sort, With Albums, era select, era ribbon */
#filter-controls {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: end;
  margin-bottom: 14px;
}

/* `flex-direction` here was inert: the base `label` rule makes every label a grid, so
   the box stacked above its own caption and sat out of line with the two selects. */
.checkbox-field {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.checkbox-field input {
  width: auto;
}

#era-ribbon {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Era tablets: squared stone, mono all-caps, a top-edge highlight where the chisel
   caught the light. Kept as CSS-only casing so the ribbon's textContent -- which the
   browser smoke test matches on -- stays exactly as the JS wrote it. */
.era-chip {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--parchment);
  background: var(--surface-container-low);
  border: 1px solid var(--ember);
  border-radius: 4px;
  padding: 6px 12px;
  cursor: pointer;
  margin: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.era-chip:hover {
  border-color: var(--bronze);
  background: var(--surface-high);
}

.era-chip.active {
  background: var(--ember);
  border-color: rgba(245, 158, 11, 0.5);
  color: var(--primary);
  font-weight: 700;
}

.era-chip .era-chip-count {
  color: var(--outline);
  font-size: 0.86em;
}

.era-chip.active .era-chip-count {
  color: var(--primary);
}

#content.directory {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
}

#content .builder,
#content .album {
  border: 1px solid var(--outline-variant);
  border-radius: 6px;
  padding: 22px;
  background: var(--surface-container-low);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* An un-photographed build is one row of a table; the photographed ones are on the
   carousel. Neither wears the card's 22px of stone. */
#content .album.rest-row {
  padding: 6px 14px;
}

#content .album.work-details {
  padding: 16px 18px;
  border-top: 0;
  border-radius: 0 0 6px 6px;
}

#content .builder {
  transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}

/* Stone-slab lift: the only place an ambient shadow is allowed to appear. */
#content .builder:hover {
  transform: translateY(-2px);
  border-color: var(--bronze);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 24px -4px rgba(0, 0, 0, 0.6);
}

#content .builder > a:first-child {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.builder p,
.album p,
.muted {
  color: var(--parchment);
  font-size: 0.9rem;
}

.builder h3 {
  margin-bottom: 8px;
}

.builder-id {
  font: 0.74rem var(--font-mono);
  color: var(--outline);
}

.signature-creations {
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px dashed var(--outline-variant);
}

.signature-creations-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--outline);
  display: block;
  margin-bottom: 4px;
}

.signature-creations ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.signature-creations a {
  font-size: 0.86rem;
}

.card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.card-actions a,
.card-actions button {
  font-size: 0.82rem;
  padding: 8px 12px;
  margin: 0;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 12px;
}

.chip {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--parchment);
  border: 1px solid var(--outline-variant);
  border-radius: 4px;
  padding: 3px 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.album {
  margin: 6px 0;
}

.album-more {
  margin-top: 8px;
  padding: 10px 0 6px;
  border-top: 1px dashed var(--outline-variant);
  display: grid;
  gap: 10px;
}

.album-more .actions-row {
  margin-top: 2px;
}

/* The rest: a table. Era · build · the world-viewer link · Details · Feedback. */
.rest {
  margin: 0 0 34px;
}

.rest h2 {
  font-size: 1.5rem;
  margin: 0 0 4px;
}

.rest-sub {
  margin: 0 0 12px;
  font-size: 0.88rem;
}

.rest-table {
  display: grid;
  gap: 6px;
}

.rest-head,
.rest-line {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 56px 92px 118px;
  gap: 12px;
  align-items: center;
}

.rest-head {
  margin: 0 15px 2px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--outline);
}

.rest-head > :last-child {
  text-align: right;
}

.rest-era {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--parchment);
  white-space: nowrap;
}

.rest-name {
  display: grid;
  gap: 2px;
  margin: 0;
  min-width: 0;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rest-pieces {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 400;
  color: var(--outline);
}

.rest-link {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

/* Details is a quiet toggle in the row, not a stele. */
.rest-toggle,
.album-toggle {
  margin: 0;
  padding: 6px 0 6px 16px;
  width: auto;
  border: 0;
  background: none;
  box-shadow: none;
  text-align: left;
  position: relative;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--outline);
  white-space: nowrap;
}

.album-toggle::before {
  content: "▸";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9em;
  transition: transform 0.15s ease;
}

.album-toggle[aria-expanded="true"]::before {
  transform: translateY(-50%) rotate(90deg);
}

.album-toggle:hover,
.album-toggle[aria-expanded="true"] {
  background: none;
  border: 0;
  color: var(--primary);
}

.rest-text {
  margin: 0;
  max-width: 880px;
  line-height: 1.6;
}

/* Feedback: three marks, hollow until chosen. A radio group of icons. */
.rest-feedback {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

/* The tooltip each mark carries: its name, drawn above the mark on hover and on keyboard
   focus. Right-aligned to the mark, because the column sits at the row's right edge and
   a centred label on the last mark would run off the page. */
.rest-feedback .fb[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  padding: 6px 10px;
  border: 1px solid rgba(217, 119, 6, 0.3);
  border-radius: 4px;
  background: var(--surface-high);
  color: var(--on-surface);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.3;
  white-space: nowrap;
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
  pointer-events: none;
  z-index: 6;
}

.rest-feedback .fb[data-tip]::before {
  content: "";
  position: absolute;
  right: 12px;
  bottom: calc(100% + 3px);
  border: 5px solid transparent;
  border-top-color: rgba(217, 119, 6, 0.3);
  opacity: 0;
  transition: opacity 0.12s ease;
  pointer-events: none;
  z-index: 6;
}

.rest-feedback .fb:hover::after,
.rest-feedback .fb:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}

.rest-feedback .fb:hover::before,
.rest-feedback .fb:focus-visible::before {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .rest-feedback .fb[data-tip]::after,
  .rest-feedback .fb[data-tip]::before {
    transition: none;
  }
}

.rest-feedback .fb {
  position: relative;
  margin: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 4px;
  background: none;
  box-shadow: none;
  color: var(--outline);
}

.rest-feedback .fb:hover {
  background: var(--surface-container);
  border-color: var(--outline-variant);
  color: var(--parchment);
}

.rest-feedback .fb[aria-checked="true"] {
  color: var(--flame);
  border-color: rgba(245, 158, 11, 0.5);
  background: rgba(245, 158, 11, 0.12);
}

.fb-icon .fill {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linejoin: round;
}

.fb-icon .cross {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}

.fb[aria-checked="true"] .fb-icon .fill {
  fill: currentColor;
}

.fb[aria-checked="true"] .fb-icon .cross {
  stroke: var(--surface-low);
  stroke-width: 2;
}

.album .credits {
  font-size: 0.85rem;
  color: var(--parchment);
}

/* A resident is not a contributor, and the credit line has to say so without a caption.
   Same parchment as the line it sits in rather than the credit link's own colour, and a
   dotted rule instead of the solid underline a credit wears: a softer claim, drawn softer.
   It is still a link -- a sleeper who also built somewhere has a thread worth reaching. */
.album .credits a.resident {
  color: var(--parchment);
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}

.album p + p {
  margin-top: 7px;
}

.photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  margin-top: 16px;
}

.photos img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 4px;
}

/* A thumbnail is a button so the viewer opens on Enter, but it is a picture, not a
   stele: none of the page's button iron, and no 20px margin around it. */
.photo-thumb {
  margin: 0;
  padding: 0;
  width: 100%;
  border: 0;
  background: none;
  box-shadow: none;
  display: block;
  line-height: 0;
}

.photo-thumb:hover {
  background: none;
  border: 0;
}

.photo-thumb img {
  display: block;
}

/* The work: one carousel of the photographed builds -- the viewport with its banner,
   the details plainly under it, the rail of builds as the selector. */
.build-browse {
  margin: .8rem 0 .4rem;
}

.build-browse-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: .5rem .8rem;
}

.build-browse-field {
  min-width: 0;
}

.build-browse-search { flex: 1 1 18rem; max-width: 30rem; }
.build-browse-sort { flex: 0 1 14rem; }
.build-browse-mobile-era { display: none; }

@media (max-width: 680px) {
  .build-browse-search, .build-browse-sort { flex: 1 1 100%; max-width: none; }
  .build-browse-mobile-era { display: block; flex: 1 1 100%; }
}

.build-browse-summary,
.build-browse-notice {
  margin: 12px 0 0;
  font-size: 0.85rem;
}

.build-browse-notice {
  color: var(--ember);
}

.build-active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
}

.build-filter-chip,
.build-filter-clear {
  width: auto;
  margin: 0;
  padding: 5px 9px;
  border-radius: 20px;
  font-size: 0.75rem;
}

.build-filter-chip { border-color: var(--bronze); color: var(--primary); }
.build-filter-clear { border: 0; background: transparent; text-decoration: underline; }
.build-filter-default { font-size: 0.78rem; }

.build-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 12px 0 0;
}

.build-pager button {
  margin: 0;
  padding: 8px 12px;
}

.build-page-status {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--outline);
}

.work {
  margin: 0 0 32px;
}

.work h2 {
  font-size: 1.5rem;
  margin: 0 0 4px;
}

.work-orientation { margin: 0 0 12px; }
.work-empty { margin: 1rem 0; padding: .8rem 1rem; border-left: 3px solid var(--bronze); background: var(--surface-container-low); }

.work .albums-note {
  margin: 0 0 12px;
}

.work-stage {
  border: 1px solid var(--outline-variant);
  border-radius: 6px;
  background: var(--surface-container-low);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.work-viewport {
  position: relative;
  background: var(--surface-low);
  border-bottom: 1px solid var(--outline-variant);
}

.work-photo {
  width: 100%;
  aspect-ratio: 16 / 8;
  max-height: 560px;
}

.work-photo img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  border-radius: 0;
}

/* The thick banner across the top of the viewport: the era and the basic facts. */
.work-banner {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 18px;
  background: rgba(9, 15, 22, 0.86);
  border-bottom: 1px solid var(--bronze);
  backdrop-filter: blur(4px);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--parchment);
  pointer-events: none;
}

.work-banner > * {
  pointer-events: auto;
}

.work-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  min-width: 0;
}

.work-era {
  padding: 2px 8px;
  border: 1px solid rgba(245, 158, 11, 0.5);
  border-radius: 4px;
  background: rgba(245, 158, 11, 0.14);
  color: var(--primary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.7rem;
}

.work-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--on-surface);
}

.work-photo-step {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}

.work-step-count {
  font-variant-numeric: tabular-nums;
  min-width: 44px;
  text-align: center;
}

.work-step,
.work-arrow {
  margin: 0;
  padding: 0;
  border: 1px solid var(--outline-variant);
  border-radius: 4px;
  background: rgba(9, 15, 22, 0.7);
  box-shadow: none;
  color: var(--on-surface);
  font-size: 1.1rem;
  line-height: 1;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
}

.work-step:hover,
.work-arrow:hover {
  border-color: var(--bronze);
  background: rgba(9, 15, 22, 0.9);
  color: var(--primary);
}

/* The build arrows sit on the picture's edges, below the banner. */
.work-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 56px;
  font-size: 1.6rem;
}

.work-arrow-prev {
  left: 12px;
}

.work-arrow-next {
  right: 12px;
}

/* The details under the viewport: the credits and the links on the left, the claim
   controls on the right. Nothing folds. */
.work-details {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px 28px;
  align-items: start;
}

.work-text {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.work-details .actions-row {
  margin: 0;
  justify-content: flex-end;
}

.photos.work-rail {
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.work-tile {
  position: relative;
  border: 1px solid var(--outline-variant);
  border-radius: 4px;
  overflow: hidden;
  background: var(--surface-low);
  opacity: 0.75;
  transition: border-color 0.14s ease, opacity 0.14s ease;
}

.work-tile:hover,
.work-tile[aria-pressed="true"] {
  border: 1px solid var(--bronze);
  opacity: 1;
}

.work-tile[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--ember);
}

.work-tile img {
  border-radius: 0;
}

.mosaic-era {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 2px 7px;
  border: 1px solid var(--outline-variant);
  border-radius: 4px;
  background: rgba(9, 15, 22, 0.8);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--on-surface);
}

.mosaic-foot {
  margin: 10px 0 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

.albums-note {
  margin: 0 0 6px;
  font-size: 0.88rem;
}

/* The notes strip at the foot: the name-conflict status, this browser's claims, the
   capture progress and the manifest link, in one quiet slab. */
.notes {
  margin-top: 28px;
  padding: 14px 16px;
  border: 1px solid var(--outline-variant);
  border-radius: 6px;
  background: var(--surface-container-low);
  display: grid;
  gap: 6px;
  font-size: 0.88rem;
  color: var(--parchment);
}

.notes #status {
  margin: 0;
}

.notes #thread-actions {
  margin-top: 6px;
}

.links {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.actions-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.actions-row button {
  margin: 0;
}

.track {
  margin: 12px 0;
  padding: 8px 10px;
  border: 1px dashed var(--outline-variant);
  border-radius: 4px;
  background: var(--surface-container-low);
}

.participation-block {
  border: 1px solid var(--outline-variant);
  border-radius: 6px;
  padding: 12px 16px;
  margin: 4px 0 18px;
  background: var(--surface-container-low);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.participation-block h2 {
  font-size: 1.1rem;
}

#content details > summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  margin: 28px 0 12px;
}

#participation-details {
  margin-top: 48px;
}

#participation-details > summary {
  cursor: pointer;
  font-size: 1rem;
  color: var(--parchment);
}

#participation-details[open] > summary {
  margin-bottom: 10px;
}

/* Search first: this is the one thing 95% of visitors came to do. */
#search-hero {
  margin: 30px 0 8px;
}

.hero-label {
  display: block;
  font: 1.6rem var(--font-display);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--on-surface);
  margin-bottom: 10px;
}

.search-wrap {
  position: relative;
  max-width: 720px;
}

#search {
  font-size: 1.15rem;
  padding: 15px 16px;
  border-color: var(--bronze);
  background: var(--surface-low);
  caret-color: var(--flame);
}

#suggestions {
  position: absolute;
  z-index: 5;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--surface-container);
  border: 1px solid var(--outline-variant);
  border-radius: 6px;
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.6);
  max-height: 60vh;
  overflow: auto;
}

.suggestion a {
  display: grid;
  gap: 2px;
  padding: 9px 11px;
  border-radius: 4px;
  color: inherit;
  text-decoration: none;
}

.suggestion.active a,
.suggestion a:hover,
.suggestion a:focus {
  background: var(--surface-high);
  text-decoration: none;
}

.suggestion-name {
  font-size: 1.05rem;
}

.suggestion-alias,
.suggestion-counts {
  font-size: 0.82rem;
  color: var(--outline);
}

#capture-note {
  max-width: 740px;
  margin-top: 14px;
  color: var(--parchment);
  font-size: 0.9rem;
}

#empty-state {
  max-width: 700px;
  margin: 8px 0 24px;
}

/* Was a <button> with no handler; and a `disabled` button swallows the tap that would
   otherwise explain itself, which is invisible on a touch screen. */
.chip.claimed {
  align-self: center;
  padding: 8px 12px;
  color: var(--primary);
}

button.inert {
  opacity: 0.62;
  border-style: dashed;
  cursor: not-allowed;
}

/* The line under a card's controls that says why a control is inert -- the whole width
   of the row, under the buttons, read before anyone clicks. width: 0 with min-width: 100%
   keeps the sentence from sizing the column: the buttons set the row's width and the
   sentence wraps inside it (the details grid gives this column `auto`, and a long line
   would otherwise squeeze the credits beside it to a strip). */
.actions-row .actions-note {
  flex-basis: 100%;
  width: 0;
  min-width: 100%;
  margin: 0;
  font-size: 0.82rem;
}

.work-details .actions-row .actions-note {
  text-align: right;
}

.modal,
#activity-modal .sheet,
.sheet {
  display: none;
}

.modal {
  position: fixed;
  inset: 0;
  background: rgba(9, 15, 22, 0.8);
  z-index: 10;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal .sheet {
  max-width: 760px;
  width: min(760px, 100%);
  max-height: 90vh;
  overflow: auto;
  background: var(--surface-high);
  /* Etched double border: bronze perimeter with a hairline cut just inside it. */
  border: 1px solid rgba(217, 119, 6, 0.3);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 8px 24px -4px rgba(0, 0, 0, 0.6);
  padding: 16px;
}

.modal.open {
  display: flex;
}

/* .sheet is display:none above, and .modal.open only re-showed the overlay -- so every
   modal opened as an empty dark screen and the whole participation feature was dead on
   arrival. The sheet has to be re-shown too. */
.modal.open .sheet {
  display: block;
}

.modal[hidden] {
  display: none !important;
}

.photo-viewer-sheet {
  max-width: 1100px;
}

.photo-viewer-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  background: var(--surface-low);
  border-radius: 6px;
  margin: 10px 0;
  overflow: hidden;
}

.photo-viewer-frame img {
  max-width: 100%;
  max-height: 72vh;
  display: block;
}

#photo-viewer-error {
  padding: 40px;
}

#toast {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  padding: 10px 15px;
  border: 1px solid var(--outline-variant);
  background: var(--surface-high);
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

#toast.show {
  opacity: 1;
  pointer-events: auto;
}

#activity-payload {
  font: 13px/1.4 var(--font-mono);
  width: 100%;
}

#status {
  color: var(--parchment);
}

#more {
  margin-top: 16px;
}

footer {
  margin-top: 70px;
  padding-top: 25px;
  border-top: 1px solid var(--outline-variant);
  color: var(--outline);
  font-size: 0.85rem;
  max-width: 1160px;
}

.footer-codex {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.codex-heading {
  font: 0.74rem var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--outline);
  margin: 0 0 6px;
}

.footer-codex p {
  color: var(--parchment);
  font-size: 0.85rem;
}

#footer-unresolved-note {
  margin-top: 18px;
  max-width: 820px;
}

#request-note-inline {
  min-height: 1em;
}

[hidden] {
  display: none !important;
}

@media (max-width: 680px) {
  button {
    width: 100%;
  }

  header,
  main {
    padding: 16px 14px;
  }

  header {
    flex-wrap: wrap;
    gap: 10px;
  }

  h1 {
    margin: 10px 0;
  }

  .search-wrap {
    max-width: none;
  }

  .hero-label {
    font-size: 1.3rem;
  }

  #content.directory {
    grid-template-columns: 1fr;
  }

  #content .builder,
  #content .album {
    padding: 16px;
  }

  .photos {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }

  .photos.work-rail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .work-photo {
    aspect-ratio: 4 / 3;
  }

  .work-banner {
    padding: 8px 12px;
    font-size: 0.72rem;
  }

  .work-name {
    font-size: 1rem;
  }

  .work-details {
    grid-template-columns: minmax(0, 1fr);
  }

  .work-details .actions-row {
    justify-content: flex-start;
  }

  .rest-head {
    display: none;
  }

  .rest-line {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 4px;
  }

  .rest-era {
    grid-column: 1;
    grid-row: 1;
  }

  .rest-name {
    grid-column: 1 / -1;
    grid-row: 2;
    white-space: normal;
  }

  .rest-link {
    grid-column: 2;
    grid-row: 1;
    text-align: right;
  }

  .rest-toggle {
    grid-column: 1;
    grid-row: 3;
  }

  .rest-feedback {
    grid-column: 2;
    grid-row: 3;
  }

  .album-toggle,
  .photo-thumb,
  .kin-tree button.kin-node,
  .rest-feedback .fb,
  .work-step,
  .work-arrow {
    width: auto;
  }

  .rest-feedback .fb {
    width: 32px;
  }

  .work-step {
    width: 28px;
  }

  .work-arrow {
    width: 36px;
  }

  .photo-thumb {
    width: 100%;
  }

  .builder-hero #intro {
    font-size: 0.9rem;
    line-height: 1.9;
  }

  .chip.claimed {
    width: 100%;
    text-align: center;
  }

  .stat-mosaic {
    grid-template-columns: repeat(2, 1fr);
  }

  #filter-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .footer-codex {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* Focus visibility and reduced motion */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.era-chip:focus-visible {
  outline: 2px solid #ffc174;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }
}

/* Navigation links */
.nav-links {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav-links a.active {
  color: var(--on-surface);
  font-weight: 700;
  border-bottom: 2px solid var(--flame);
}

/* Stats Page Styling */
.stat-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 28px 0 40px;
}

.stat-card {
  background: var(--surface-container-low);
  border: 1px solid var(--outline-variant);
  border-radius: 6px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: start;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.stat-num {
  font-family: var(--font-mono);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--tertiary);
  margin-bottom: 8px;
}

.stat-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--on-surface);
  margin-bottom: 4px;
}

.stat-desc {
  font-size: 0.8rem;
  color: var(--parchment);
}

.stats-section {
  margin: 44px 0;
}

.stats-section h2 {
  font-size: 1.6rem;
  margin-bottom: 6px;
}

.stats-table-wrap {
  overflow-x: auto;
  margin: 18px 0 12px;
  border: 1px solid var(--outline-variant);
  border-radius: 6px;
  background: var(--surface-container-low);
}

/* Museum ledger: every figure in the mono face, tabular, hairline-ruled. */
.stats-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.stats-table th,
.stats-table td {
  padding: 9px 12px;
  text-align: right;
  border-bottom: 1px solid var(--chisel);
}

.stats-table th {
  background: var(--surface-high);
  color: var(--outline);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--outline-variant);
  position: sticky;
  top: 0;
}

.stats-table th.text-left,
.stats-table td.text-left {
  text-align: left;
}

.stats-table tbody tr:nth-child(even) {
  background: var(--surface-container);
}

.stats-table tbody tr:hover {
  background: var(--surface-high);
}

.stats-table tfoot tr {
  background: var(--surface-container);
  border-top: 2px solid var(--outline-variant);
}

.stats-table tfoot td {
  border-bottom: none;
  font-weight: 700;
  color: var(--primary);
}

.table-note {
  font-size: 0.82rem;
  color: var(--parchment);
  margin-top: 8px;
}

.archetypes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.archetype-card {
  background: var(--surface-container-low);
  border: 1px solid var(--outline-variant);
  border-radius: 6px;
  padding: 16px 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.archetype-card h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--primary);
  margin-bottom: 6px;
}

.archetype-card p {
  font-size: 0.82rem;
  line-height: 1.45;
}

/* --------------------------------------------------------------------------
   Brand lockup: the emblem plus a two-line mono/display pairing, standing in
   for the bare "back to gallery" link the header used to open with.
   -------------------------------------------------------------------------- */
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--on-surface);
}

.brand:hover {
  text-decoration: none;
}

.brand-emblem {
  flex: none;
  width: 28px;
  height: 28px;
  display: block;
}

.brand-lockup {
  display: grid;
  gap: 1px;
  line-height: 1.15;
}

.brand-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--outline);
}

.brand-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--on-surface);
}

/* --------------------------------------------------------------------------
   Hit counters. Every headline number sits in a recessed cell, the way a
   guestbook counter was bolted to the bottom of a page it was proud of.
   -------------------------------------------------------------------------- */
.stat-tile-value,
.stat-num,
.counter {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.12em;
  background: #090f16;
  border: 1px solid var(--outline-variant);
  box-shadow: inset 0 2px 4px #000;
  padding: 2px 8px;
  border-radius: 4px;
}

.counter {
  color: var(--tertiary);
  font-weight: 700;
}

#intro .counter {
  font-size: 0.94em;
  padding: 1px 6px;
}

/* --------------------------------------------------------------------------
   Top 8: the co-builders this builder placed the most pieces beside.
   -------------------------------------------------------------------------- */
/* Who they built beside: the tree and, under it, the Top 8 as its caption. The slab
   the ribbon used to wear belongs to the section now. */
.kin-beside {
  margin: 0 0 32px;
  padding: 18px 20px 16px;
  border: 1px solid var(--outline-variant);
  border-radius: 6px;
  background: var(--surface-container-low);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.kin-beside h2 {
  font-size: 1.5rem;
  margin: 0 0 4px;
}

.kin-beside-sub {
  margin: 0 0 10px;
  font-size: 0.9rem;
}

.top8 {
  margin: 14px 0 0;
}

.top8-note {
  margin: 10px 0 0;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
}

/* Eight across on a wide page: the ribbon is a row of names to pick from, not eight
   cards to read. Each one is a pressable chip, because clicking it opens the pair view
   below rather than leaving for another page. */
.top8-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
}

.top8-chip {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 8px;
  text-align: left;
  border: 1px solid var(--outline-variant);
  border-radius: 6px;
  background: var(--surface-container);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: border-color 0.14s ease, background 0.14s ease;
}

.top8-chip:hover {
  border-color: var(--bronze);
  background: var(--surface-high);
}

/* The open pair wears the ember edge the era tablets use for "active", so one glance
   over the ribbon says which pair the panel below is drawing. */
.top8-chip[aria-pressed="true"] {
  border-color: rgba(245, 158, 11, 0.5);
  background: var(--surface-high);
}

/* A co-builder the ranking did not put in the first eight, offered anyway. */
.top8-chip.is-extra {
  border-style: dashed;
}

.top8-chip .top8-portrait,
.top8-chip img {
  grid-row: 1 / span 2;
  width: 36px;
  height: 36px;
  flex: none;
  display: block;
  overflow: hidden;
  border: 1px solid var(--ember);
  border-radius: 4px;
  object-fit: cover;
  background: var(--surface-low);
}

.top8-chip .top8-portrait > svg,
.top8-chip .top8-portrait > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* No tile for this key (manifest missing, or the file 404ed): the ribbon parks the brand
   emblem on the slate the way the hero avatar does, one level down inside the tile. */
.top8-chip .top8-portrait > .top8-emblem {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.top8-chip .top8-portrait > .top8-emblem > svg {
  width: 56%;
  height: auto;
  display: block;
}

/* One line, clipped: a long recorded name must not push the tier off the chip. */
.top8-name {
  display: block;
  min-width: 0;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.top8-tier {
  /* Second row, second column: under the name, never in the 36px portrait column, where
     "Tier III" would break in two. The portrait spans both rows beside it. */
  grid-column: 2;
  display: block;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--outline);
}

.top8-chip[aria-pressed="true"] .top8-tier {
  color: var(--primary);
}

.top8-meta {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--outline);
}

@media (max-width: 980px) {
  .top8-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  header {
    justify-content: flex-start;
  }

  .brand {
    width: 100%;
  }

  .nav-links {
    gap: 14px;
  }

  .top8 {
    padding: 14px 14px 16px;
  }

  .top8-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}

/* --------------------------------------------------------------------------
   Builder hero: the profile card at the top of a thread page. Portrait, name,
   aliases, tier, era span, the counters this page already had, and the
   builder's own signature creations. The card is as tall as its text column --
   name, facts, the profile line -- and the portrait is sized to that, so the
   page's own content starts within the first screen.
   -------------------------------------------------------------------------- */
.builder-hero {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  margin: 12px 0 20px;
  padding: 18px;
  border: 1px solid var(--outline-variant);
  border-radius: 6px;
  background: var(--surface-container-low);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.hero-avatar,
.hero-avatar img,
.hero-avatar-fallback {
  width: 120px;
  height: 120px;
  border-radius: 6px;
}

/* The avatar is the door to the builder's own page. */
a.hero-avatar {
  display: block;
  overflow: hidden;
}

a.hero-avatar:focus-visible {
  outline: 2px solid #ffc174;
  outline-offset: 2px;
}

.hero-avatar img,
.hero-avatar-fallback {
  display: block;
  object-fit: cover;
  border: 1px solid var(--ember);
  background: var(--surface-low);
}

.hero-avatar-fallback {
  display: grid;
  place-items: center;
}

.hero-avatar-fallback svg {
  width: 56%;
  height: auto;
}

.hero-text {
  min-width: 0;
}

/* The h1 keeps its own node; inside the card it just wears a tighter scale so a
   long builder name cannot push the portrait off a laptop screen. */
.builder-hero h1 {
  font-size: clamp(2rem, 5vw, 3.2rem);
  margin: 0 0 6px;
}

.hero-aliases {
  margin: 0 0 10px;
  color: var(--parchment);
  font-size: 0.9rem;
}

/* The one line under the name: the tier and the eras in words, the three figures in
   their counter cells. No label row -- each value carries its own meaning. */
.builder-hero #intro {
  margin: 0;
  font-size: 0.98rem;
  line-height: 2;
}

.hero-orientation {
  max-width: 66ch;
  margin: 10px 0 8px;
  color: var(--parchment);
  font-size: 0.88rem;
  line-height: 1.5;
}

.hero-journey { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 8px 0; font-size: 0.85rem; }
.hero-journey a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   Where to go next: the wordless figures ported from the Chronicles landing
   page. One stone slab per path -- a figure, a backlight, one action line.
   -------------------------------------------------------------------------- */
#look-out {
  margin-top: 48px;
}

#look-out.paths {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.look-out-h2 {
  font-size: 1.5rem;
  margin: 0 0 14px;
  grid-column: 1 / -1;
}

.look-out-intro { grid-column: 1 / -1; margin: -10px 0 0; color: var(--parchment); font-size: .86rem; }
.path-more { grid-column: 1 / -1; padding: .65rem .8rem; border: 1px solid var(--outline-variant); border-radius: 6px; }
.path-more > summary { cursor: pointer; color: var(--primary); font-size: .86rem; }
.path-more-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: .8rem; }
.path-more-grid .path { max-width: 300px; }

#look-out .path {
  position: relative;
  display: block;
  isolation: isolate;
  padding: 16px;
  border: 1px solid var(--chisel);
  border-radius: 6px;
  background: var(--surface-container);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}

#look-out .path img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  transition: transform 0.14s ease, filter 0.14s ease;
}

#look-out .ember {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 52%;
  width: 82%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%) scale(1);
  background: radial-gradient(circle closest-side, var(--ember), rgba(245, 158, 11, 0));
  filter: blur(18px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.14s ease, opacity 0.14s ease;
}

#look-out .path:hover,
#look-out .path:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(217, 119, 7, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 24px rgba(0, 0, 0, 0.45);
}

#look-out .path:hover img,
#look-out .path:focus-visible img {
  transform: translateY(-6px) scale(1.04);
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.6));
}

#look-out .path:hover .ember,
#look-out .path:focus-visible .ember {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.15);
}

.path-line {
  display: block;
  margin-top: 8px;
  text-align: center;
  font: 600 13px/1.3 var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--parchment);
}

@media (max-width: 980px) {
  #look-out.paths {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .builder-hero {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 14px;
    padding: 14px;
  }

  .hero-avatar,
  .hero-avatar img,
  .hero-avatar-fallback {
    width: 96px;
    height: 96px;
  }
}

@media (max-width: 640px) {
  #look-out.paths {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .path-more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Kinship page (#kinship) ---- */

/* Two classes live outside #kinship because Builder B renders them on thread pages: the
   kinship tag chip, and the plain text link that opens a build or a builder. */
.kin-chip {
  border-radius: 4px;
}

.kin-chip.confirmed {
  border: 1px solid var(--flame);
  color: var(--primary);
  background: var(--ember);
}

.kin-chip.pending {
  border: 1px dashed var(--outline);
  color: var(--parchment);
  background: transparent;
}

.kin-open {
  font-size: 0.82rem;
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1px solid rgba(217, 119, 6, 0.4);
}

.kin-open:hover {
  border-bottom-color: var(--flame);
}

/* --------------------------------------------------------------------------
   Pair view (#pair-view): the builder whose page this is, one co-builder, and
   the build they share. It sits directly under the Top 8 ribbon and is drawn
   entirely from data the thread already carries, so it wears the same stone
   the rest of the page does -- a recessed slab, a chisel edge, no soft shadow.
   -------------------------------------------------------------------------- */
#pair-view {
  margin: 0 0 34px;
  padding: 18px 20px 20px;
  border: 1px solid var(--outline-variant);
  border-radius: 6px;
  background: var(--surface-container-low);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* The page's own buttons carry a 20px vertical margin for the album cards. In here
   every control sits in a row or a grid that owns its own spacing. */
#pair-view button {
  margin: 0;
  width: auto;
}

#pair-view .pair-title {
  font-size: 1.5rem;
  margin: 0 0 4px;
}

/* The status line and the standing badge share a row under the title; the badge is a
   statement about the pair, set to the right of the line that counts it. */
#pair-view .pair-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--outline-variant);
}

#pair-view .pair-status {
  margin: 0;
  color: var(--parchment);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

#pair-view .pair-standing {
  flex: none;
}

#pair-view .pair-standing[data-standing="confirmed"] {
  border-color: var(--flame);
  color: var(--primary);
  background: var(--ember);
}

#pair-view .pair-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
}

/* Era tablets, in the shape a build label needs. */
#pair-view .pair-pill {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--parchment);
  background: var(--surface-container-low);
  border: 1px solid var(--ember);
  border-radius: 4px;
  padding: 6px 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

#pair-view .pair-pill:hover {
  border-color: var(--bronze);
  background: var(--surface-high);
}

#pair-view .pair-pill[aria-pressed="true"] {
  background: var(--ember);
  border-color: rgba(245, 158, 11, 0.5);
  color: var(--primary);
}

#pair-view .pair-h {
  font-family: var(--font-display);
  font-size: 1rem;
  margin: 0 0 8px;
}

/* The Show button in the facts table: a small forged button, not the album primary. */
#pair-view .pair-find {
  padding: 6px 10px;
  font-size: 0.78rem;
}

/* ---- laurels, hearth, affinity, facts ---- */

#pair-view .pair-laurels,
#pair-view .pair-hearth,
#pair-view .pair-affinity,
#pair-view .pair-allotment {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--outline-variant);
}

#pair-view .pair-chip-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

#pair-view .pair-chip-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--outline);
  margin-right: 2px;
}

#pair-view .pair-hearth-line {
  margin: 0 0 4px;
  color: var(--parchment);
  font-size: 0.88rem;
}

#pair-view .pair-affinity {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
}

#pair-view .pair-affinity .counter {
  font-size: 1.3rem;
}

#pair-view .pair-affinity-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--outline);
}

#pair-view .pair-tier {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--primary);
}

#pair-view .pair-facts {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 0;
  margin: 20px 0 0;
  border-top: 1px solid var(--outline-variant);
}

#pair-view .pair-facts dt {
  padding: 8px 0;
  border-bottom: 1px solid var(--chisel);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--outline);
}

#pair-view .pair-facts dd {
  margin: 0;
  padding: 8px 0;
  border-bottom: 1px solid var(--chisel);
  color: var(--parchment);
  font-size: 0.86rem;
}

/* ---- piece allotment ---- */

#pair-view .pair-bar {
  display: flex;
  gap: 1px;
  height: 14px;
  margin: 10px 0 12px;
  background: var(--surface-low);
  border-radius: 4px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.9);
  overflow: hidden;
}

/* Widths are inline: they are data, not design. */
#pair-view .pair-seg {
  display: block;
  height: 100%;
  background: var(--surface-highest);
  transition: width 0.2s ease;
}

#pair-view .pair-seg.is-pair.is-anchor {
  background: var(--flame);
}

#pair-view .pair-seg.is-pair.is-ally {
  background: var(--bronze);
}

#pair-view .pair-seg.is-other {
  background: var(--outline-variant);
}

#pair-view .pair-seg.is-unattributed {
  background: repeating-linear-gradient(135deg,
    var(--surface-high) 0 4px,
    var(--surface-container) 4px 8px);
}

#pair-view .pair-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
}

#pair-view .pair-legend-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  padding: 5px 0;
  border-bottom: 1px solid var(--chisel);
  color: var(--parchment);
}

#pair-view .pair-legend-row.is-pair {
  color: var(--on-surface);
}

#pair-view .pair-legend-row.is-unattributed {
  color: var(--outline);
}

#pair-view .pair-legend-share {
  color: var(--tertiary);
}

/* ---- the ally row ---- */

/* The other half of the pair on the left, the way to their side of it on the right. */
#pair-view .pair-who {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
}

#pair-view .pair-ally {
  min-width: 0;
}

#pair-view .pair-ally-head {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

#pair-view .pair-portrait {
  width: 40px;
  height: 40px;
  flex: none;
  display: block;
  overflow: hidden;
  border: 1px solid var(--ember);
  border-radius: 4px;
  object-fit: cover;
  background: var(--surface-low);
}

#pair-view .pair-portrait > svg,
#pair-view .pair-portrait > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

#pair-view .pair-ally-name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

#pair-view .pair-ally-marks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

#pair-view .pair-reverse {
  flex: none;
  margin: 0;
}

#pair-view .pair-unnamed {
  border-style: dashed;
  color: var(--outline);
}

#pair-view .pair-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#pair-view .pair-metric {
  display: grid;
  gap: 3px;
  justify-items: start;
  padding: 8px 10px;
  border: 1px solid var(--outline-variant);
  border-radius: 4px;
  background: var(--surface-container-low);
}

#pair-view .pair-metric-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--outline);
}

#pair-view .pair-metric-value {
  font-size: 0.94rem;
}

#pair-view .pair-metric-note {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--parchment);
}

/* ---- the ledger ---- */

#pair-view .pair-ledger-wrap {
  margin: 16px 0 0;
}

/* The museum ledger sets `white-space: nowrap`; the pair's Split cell names two builders
   and two shares, so cells wrap here instead of pushing Status off the edge on a phone. */
#pair-view #pair-ledger {
  white-space: normal;
  font-size: 0.76rem;
}

#pair-view #pair-ledger th,
#pair-view #pair-ledger td {
  padding: 6px 8px;
}

#pair-view .pair-ledger-caption {
  padding: 9px 12px;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--outline);
  background: var(--surface-container);
  border-bottom: 1px solid var(--outline-variant);
}

#pair-view .pair-ledger-pick {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--primary);
  font-family: inherit;
  font-size: inherit;
  text-align: left;
  white-space: normal;
}

#pair-view .pair-ledger-pick:hover {
  text-decoration: underline;
}

#pair-view #pair-ledger tbody tr[aria-selected="true"] {
  background: var(--ember);
}

#pair-view .pair-ledger-split,
#pair-view .pair-ledger-status {
  color: var(--parchment);
}

#pair-view .pair-download {
  display: inline-block;
  margin: 10px 0 0;
}

@media (max-width: 980px) {
  #pair-view .pair-facts {
    grid-template-columns: 140px minmax(0, 1fr);
  }
}

@media (max-width: 680px) {
  #pair-view {
    padding: 14px 14px 16px;
  }

  #pair-view .pair-who {
    align-items: flex-start;
    flex-direction: column;
  }

  #pair-view .pair-facts {
    grid-template-columns: minmax(0, 1fr);
  }

  #pair-view .pair-facts dt {
    border-bottom: 0;
    padding-bottom: 0;
  }

  #pair-view .pair-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* The allotment bar animates its widths when another build is picked. That motion is
   the one thing in here anybody could be bothered by, so it is dropped outright rather
   than merely shortened. */
@media (prefers-reduced-motion: reduce) {
  #pair-view .pair-seg {
    transition: none;
  }
}

/* Details: laurels, hearth, affinity, the facts, the tiles and the allotment, behind
   one native disclosure. The summary wears the eyebrow voice; nothing else in the pair
   view needs a label, and this is the one thing that hides something. */
#pair-view .pair-more {
  margin-top: 14px;
  padding-top: 8px;
  border-top: 1px dashed var(--outline-variant);
}

#pair-view .pair-more > summary {
  cursor: pointer;
  list-style: none;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--outline);
}

#pair-view .pair-more > summary::-webkit-details-marker {
  display: none;
}

#pair-view .pair-more > summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 8px;
  transition: transform 0.15s ease;
}

#pair-view .pair-more[open] > summary::before {
  transform: rotate(90deg);
}

#pair-view .pair-more > summary:hover {
  color: var(--primary);
}

#pair-view .pair-more-body {
  display: grid;
  gap: 4px;
  margin-top: 10px;
}

#pair-view .pair-more-body .pair-pills {
  margin-bottom: 8px;
}

#pair-view .pair-more-body .pair-metrics {
  margin-top: 20px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 980px) {
  #pair-view .pair-more-body .pair-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Last in the block on purpose: every rule above sets a display, and an element the
   view has hidden -- a panel, the hearth, the unnamed chip -- has to stay hidden. */
#pair-view [hidden] {
  display: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

#kinship .kin-anchor {
  margin: 26px 0 10px;
}

#kinship #kin-suggestions {
  position: absolute;
  z-index: 6;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--surface-container);
  border: 1px solid var(--outline-variant);
  border-radius: 6px;
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.6);
  max-height: 60vh;
  overflow: auto;
}

#kinship .kin-anchor-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding: 10px 14px;
  border: 1px solid var(--outline-variant);
  border-radius: 6px;
  background: var(--surface-container-low);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

#kinship .kin-anchor-pill .kin-portrait {
  width: 40px;
  height: 40px;
}

#kinship .kin-anchor-pill #kin-anchor-name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
}

#kinship .kin-anchor-pill button {
  margin: 0;
  padding: 7px 12px;
  font-size: 0.82rem;
}

#kinship .kin-tabs {
  display: flex;
  gap: 18px;
  margin: 26px 0 12px;
  border-bottom: 1px solid var(--outline-variant);
}

#kinship .kin-tabs [role="tab"] {
  margin: 0;
  padding: 9px 4px;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  box-shadow: none;
  color: var(--parchment);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

#kinship .kin-tabs [role="tab"][aria-selected="true"] {
  color: var(--primary);
  border-bottom-color: var(--flame);
}

#kinship .kin-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 18px;
}

#kinship .kin-filters .era-chip {
  margin: 0;
}

#kinship .kin-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 24px;
  align-items: start;
}

#kinship .kin-layout[hidden],
#kinship .kin-tabs[hidden],
#kinship .kin-filters[hidden] {
  display: none;
}

.kin-tree {
  overflow-x: auto;
}

.kin-tree .kin-canvas {
  position: relative;
  min-width: 720px;
}

.kin-tree .kin-tree-svg {
  width: 100%;
  height: auto;
  display: block;
}

.kin-tree .kin-nodes {
  position: absolute;
  inset: 0;
}

.kin-tree .kin-band-line {
  stroke: var(--outline-variant);
  stroke-width: 0.5;
}

.kin-tree .kin-band-label {
  fill: var(--outline);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.kin-tree .kin-trunk {
  stroke: var(--bronze);
  stroke-width: 10;
  stroke-linecap: round;
}

.kin-tree .kin-seg {
  fill: none;
  stroke-linecap: round;
}

.kin-tree .kin-seg-shared {
  stroke: url(#kin-ember);
}

.kin-tree .kin-seg-legacy {
  stroke: var(--bronze);
  stroke-dasharray: 6 5;
}

.kin-tree .kin-seg-memory {
  stroke: var(--outline-variant);
  stroke-dasharray: 2 4;
}

/* The node box is the portrait itself, so the portrait sits exactly on the branch tip and
   the name and the count hang off it absolutely, free to be wider than a lane. Twelve
   lanes leave only about fifty rendered pixels between neighbours, so every second lane
   on a side drops its label a row lower rather than printing it over its neighbour's. */
.kin-tree .kin-node {
  position: absolute;
  transform: translate(-50%, -50%);
  display: block;
  width: 32px;
  height: 32px;
  text-decoration: none;
  color: inherit;
}

/* On the profile a node is a button (a click selects the pairing in place); it wears
   none of the page's button iron and keeps the portrait's exact size. */
.kin-tree button.kin-node {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  cursor: pointer;
  font: inherit;
}

.kin-tree button.kin-node:hover {
  background: none;
  border: 0;
}

.kin-tree .kin-node[aria-pressed="true"] .kin-portrait,
.kin-tree .kin-node.is-active .kin-portrait {
  border-color: rgba(245, 158, 11, 0.5);
  box-shadow: 0 0 0 2px var(--ember);
}

.kin-tree .kin-branch.is-active .kin-seg-shared {
  stroke: var(--tertiary);
}

.kin-tree .kin-node:focus-visible {
  outline: 2px solid #ffc174;
  outline-offset: 2px;
}

.kin-tree .kin-node-name,
.kin-tree .kin-node-meta {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 96px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* The label must never intercept the pointer: it is wider than its own lane and would
     otherwise swallow the hover and the click meant for the next builder's portrait. */
  pointer-events: none;
}

.kin-tree .kin-node-name {
  top: 36px;
}

.kin-tree .kin-node-meta {
  top: 54px;
}

.kin-tree .kin-node-alt .kin-node-name {
  top: 60px;
}

.kin-tree .kin-node-alt .kin-node-meta {
  top: 78px;
}

.kin-tree .kin-node:hover .kin-node-name,
.kin-tree .kin-node:focus-visible .kin-node-name,
.kin-tree .kin-node.is-active .kin-node-name {
  color: var(--primary);
}

.kin-tree .kin-anchor-node {
  width: 48px;
  height: 48px;
}

.kin-tree .kin-anchor-node .kin-node-name {
  top: 52px;
  font-size: 1rem;
}

.kin-tree .kin-anchor-node .kin-node-meta {
  top: 74px;
}

.kin-tree .kin-portrait,
.kin-tree .kin-portrait {
  width: 32px;
  height: 32px;
  flex: none;
  display: block;
  overflow: hidden;
  border: 1px solid var(--ember);
  border-radius: 4px;
  object-fit: cover;
  background: var(--surface-low);
}

.kin-tree .kin-portrait > svg,
.kin-tree .kin-portrait > img,
.kin-tree .kin-portrait > svg,
.kin-tree .kin-portrait > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.kin-tree .kin-anchor-node .kin-portrait {
  width: 48px;
  height: 48px;
}

.kin-tree .kin-node-name {
  font-family: var(--font-display);
  font-size: 0.8rem;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.kin-tree .kin-node-meta {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--outline);
}

.kin-tree .kin-tip {
  position: absolute;
  z-index: 5;
  max-width: 320px;
  padding: 10px 12px;
  background: var(--surface-high);
  border: 1px solid rgba(217, 119, 6, 0.3);
  border-radius: 6px;
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.6);
  font-size: 0.8rem;
}

.kin-tree .kin-tip-name {
  font-family: var(--font-display);
  font-size: 1rem;
  margin-bottom: 4px;
}

.kin-tree .kin-tip-eras {
  margin: 0 0 6px;
  padding-left: 16px;
  color: var(--parchment);
}

#kinship #kin-overflow-note,
#kinship #kin-legend {
  max-width: 720px;
  margin-top: 12px;
  font-size: 0.85rem;
}

#kinship #kin-ledger .kin-ledger-who {
  display: flex;
  align-items: center;
  gap: 8px;
}

#kinship #kin-ledger .chip {
  margin-right: 4px;
}

#kinship #kin-ledger .kin-chip-legacy {
  border-style: dashed;
}

#kinship #kin-ledger-more {
  margin-top: 14px;
}

#kinship .kin-aside {
  display: grid;
  gap: 18px;
  align-content: start;
}

#kinship .kin-card {
  padding: 16px 18px 18px;
  border: 1px solid var(--outline-variant);
  border-radius: 6px;
  background: var(--surface-container-low);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

#kinship .kin-card h2 {
  font-size: 1.3rem;
  margin: 0 0 4px;
}

#kinship .kin-card h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  margin: 0 0 4px;
}

#kinship .kin-build {
  padding: 12px 0;
  border-top: 1px solid var(--outline-variant);
}

#kinship .kin-build button,
#kinship .kin-more-builds {
  margin: 10px 0 0;
  padding: 7px 12px;
  font-size: 0.82rem;
}

/* The claim pair sits on one row inside a 340px aside, so it wraps rather than squeezing
   two half-width buttons; the buttons keep their own top margin. */
#kinship .kin-build .actions-row {
  gap: 8px;
  margin-top: 0;
}

#kinship .kin-share-bar {
  display: flex;
  gap: 1px;
  height: 8px;
  margin: 8px 0 6px;
  background: var(--surface-low);
  border-radius: 2px;
  box-shadow: inset 0 1px 3px #000;
  overflow: hidden;
}

#kinship .kin-share-seg {
  display: block;
  height: 100%;
  background: var(--bronze);
}

#kinship .kin-share-seg.is-anchor {
  background: var(--flame);
}

#kinship .kin-share-note,
#kinship .kin-build-links {
  font-size: 0.75rem;
}

#kinship .kin-cohab {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
}

#kinship .kin-cohab-main {
  min-width: 0;
  display: grid;
  gap: 3px;
}

#kinship .kin-cohab-main .credit {
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

#kinship .kin-cohab-side {
  display: grid;
  justify-items: end;
  gap: 4px;
}

#kinship .kin-cohab-share {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--outline);
}

/* Stacked above the share in the same mono hairline, because it answers a different
   question and must not read as part of the percentage: the share is pieces over pieces,
   and a bed adds to neither side of it. */
#kinship .kin-cohab-beds {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--outline);
}

#kinship .kin-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* A builder the saved world never named. Smaller and quieter than a tag chip, in the
   outline hairline rather than bronze, so it reads as a state of the record standing
   beside the name and is never mistaken for a name, an alias or a tag. */
#kinship .kin-unnamed {
  flex: none;
  padding: 2px 6px;
  font-size: 0.62rem;
  text-transform: lowercase;
  color: var(--outline);
  border-color: var(--outline-variant);
  box-shadow: none;
}

#kinship .kin-unnamed[hidden] {
  display: none;
}

/* The name and its chip share one baseline row; the name may still ellipsize under it. */
#kinship .kin-cohab-name,
#kinship .kin-tip-name,
.kin-tree .kin-tip-name {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

/* The tree labels carry no chip -- twelve lanes are crowded enough -- so a placeholder
   name is dimmed instead, which is as much as a 96px label can honestly say. */
.kin-tree .kin-node-name[data-kin-unnamed] {
  color: var(--outline);
}

#kinship button.kin-tag-btn {
  margin: 0;
  padding: 4px 9px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#kinship .kin-other {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed var(--outline-variant);
}

#kinship .kin-other-build {
  display: grid;
  gap: 2px;
  padding: 6px 0;
  font-size: 0.82rem;
}

#kinship .kin-other-label {
  color: var(--on-surface);
}

#kinship .chip.claimed {
  display: inline-block;
  margin-top: 10px;
}

@media (max-width: 980px) {
  #kinship .kin-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 680px) {
  .kin-tree .kin-canvas {
    min-width: 640px;
  }

  #kin-embed.kin-canvas {
    min-width: 600px;
  }

  #kinship .kin-tabs {
    gap: 12px;
  }
}

/* --------------------------------------------------------------------------
   Portrait picker (#portrait-picker): a drawer off the hero card where a builder
   with standing on the profile narrows the portrait library and chooses the face
   the profile wears. The narrowing wears the era viewer's drawer contracts by name
   (.panel, .grp, .ck[aria-pressed], .ck.zero dimmed and kept, Clear all).
   -------------------------------------------------------------------------- */
/* The last line of the text column: the door to the builder's own page and the
   disclosure, on one line that wraps. It used to stack under the portrait in its own
   column, which made the card twice as tall as the words in it. */
.hero-portrait-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin-top: 4px;
}

.hero-portrait-actions .hero-portrait-pick {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: 0.82rem;
}

.hero-portrait-actions .hero-portrait-pick:hover {
  background: none;
}

.hero-portrait-note,
.hero-portrait-disclosure {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--outline);
}

.hero-portrait-actions .hero-profile-link {
  font-size: 0.82rem;
}

.hero-portrait-note .hero-portrait-copy {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font: inherit;
  letter-spacing: inherit;
}

.hero-portrait-note .hero-portrait-copy:hover {
  background: none;
}

html.pp-open,
html.pp-open body {
  overflow: hidden;
}

.pp-scrim {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(9, 15, 22, 0.72);
}

#portrait-picker {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 61;
  width: min(820px, 96vw);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--surface);
  border-left: 1px solid var(--outline-variant);
  box-shadow: -18px 0 40px rgba(0, 0, 0, 0.45);
  color: var(--on-surface);
}

#portrait-picker button {
  margin: 0;
  width: auto;
}

#portrait-picker .pp-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 12px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--outline-variant);
  background: var(--surface-container-low);
}

#portrait-picker .pp-title {
  margin: 0;
  font-size: 1.25rem;
}

#portrait-picker .pp-close {
  padding: 4px 10px;
  font-size: 1.1rem;
  line-height: 1;
}

#portrait-picker .pp-count {
  grid-column: 1 / -1;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--parchment);
}

#portrait-picker .pp-chips {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

#portrait-picker .pp-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 8px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary);
  background: var(--ember);
  border: 1px solid rgba(245, 158, 11, 0.5);
  border-radius: 4px;
  box-shadow: none;
}

#portrait-picker .pp-chip-x {
  color: var(--parchment);
}

#portrait-picker .pp-body {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: 0;
}

#portrait-picker .panel {
  overflow: auto;
  padding: 12px 14px 20px;
  border-right: 1px solid var(--outline-variant);
  background: var(--surface-container-low);
}

#portrait-picker .grp {
  margin: 0 0 14px;
}

#portrait-picker .grp-h {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--outline);
}

#portrait-picker .grp.seg .grp-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#portrait-picker .grp.list .grp-opts {
  display: grid;
  gap: 2px;
}

#portrait-picker .ck {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 9px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--parchment);
  background: var(--surface-container);
  border: 1px solid var(--outline-variant);
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  text-align: left;
}

#portrait-picker .ck.row {
  display: flex;
  justify-content: space-between;
  width: 100%;
  background: none;
  border-color: transparent;
  box-shadow: none;
  padding: 4px 6px;
}

#portrait-picker .ck:hover {
  border-color: var(--bronze);
  background: var(--surface-high);
}

#portrait-picker .ck .cnt {
  font-variant-numeric: tabular-nums;
  color: var(--outline);
}

#portrait-picker .ck.zero {
  opacity: 0.4;
}

#portrait-picker .ck.on,
#portrait-picker .ck.zero.on {
  opacity: 1;
  color: var(--primary);
  background: var(--ember);
  border-color: rgba(245, 158, 11, 0.5);
}

#portrait-picker .ck.on .cnt {
  color: var(--primary);
}

#portrait-picker .grp.list .ck.overflow {
  display: none;
}

#portrait-picker .grp.list.expanded .ck.overflow {
  display: flex;
}

#portrait-picker .more {
  margin-top: 4px;
  padding: 3px 6px;
  background: none;
  border: 0;
  box-shadow: none;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary);
}

#portrait-picker .pp-results,
#portrait-picker .pp-detail {
  overflow: auto;
  padding: 14px 18px 24px;
}

#portrait-picker .pp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 12px;
}

#portrait-picker .pp-tile {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 8px 6px 8px;
  background: var(--surface-container-low);
  border: 1px solid var(--outline-variant);
  border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

#portrait-picker .pp-tile:hover {
  border-color: var(--bronze);
  background: var(--surface-high);
}

#portrait-picker .pp-tile[aria-pressed="true"] {
  border-color: var(--flame);
  background: var(--ember);
}

#portrait-picker .pp-tile img,
#portrait-picker .pp-take img,
#portrait-picker .pp-preview-avatar,
#portrait-picker .pp-preview-row img {
  display: block;
  object-fit: cover;
  border: 1px solid var(--ember);
  border-radius: 4px;
  background: var(--surface-low);
}

#portrait-picker .pp-tile img {
  width: 96px;
  height: 96px;
}

#portrait-picker .pp-tile-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--parchment);
  text-align: center;
}

#portrait-picker .pp-tile-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
}

#portrait-picker .pp-mini {
  font-size: 0.58rem;
  padding: 1px 5px;
  border-style: dashed;
  color: var(--outline);
  box-shadow: none;
}

#portrait-picker .pp-empty {
  margin: 0;
}

#portrait-picker .pp-back {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#portrait-picker .pp-detail-h {
  margin: 12px 0 2px;
  font-family: var(--font-display);
  font-size: 1.35rem;
}

#portrait-picker .pp-detail-line {
  margin: 0 0 14px;
  color: var(--parchment);
  font-size: 0.86rem;
}

#portrait-picker .pp-eyebrow {
  margin: 0 0 6px;
}

#portrait-picker .pp-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}

#portrait-picker .pp-take {
  padding: 3px;
  background: var(--surface-container-low);
  border: 1px solid var(--outline-variant);
  border-radius: 6px;
  box-shadow: none;
}

#portrait-picker .pp-take img {
  width: 96px;
  height: 96px;
}

#portrait-picker .pp-take[aria-pressed="true"] {
  border-color: var(--flame);
  background: var(--ember);
}

#portrait-picker .pp-preview {
  display: grid;
  gap: 12px;
}

#portrait-picker .pp-preview-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;
  gap: 16px;
  align-items: end;
}

#portrait-picker .pp-preview-wide {
  display: block;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--outline-variant);
  border-radius: 6px;
  background: var(--surface-low);
}

#portrait-picker .pp-preview-avatar {
  width: 160px;
  height: 160px;
  border-radius: 6px;
}

#portrait-picker .pp-preview-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

#portrait-picker .pp-preview-row img {
  width: 40px;
  height: 40px;
}

#portrait-picker .pp-preview-row .muted {
  margin: 0;
  font-size: 0.82rem;
}

#portrait-picker .dfoot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--outline-variant);
  background: var(--surface-container-low);
}

#portrait-picker .dfoot button {
  padding: 9px 14px;
  font-size: 0.86rem;
}

#portrait-picker .dfoot .clr {
  margin-right: auto;
  background: none;
  border-color: transparent;
  box-shadow: none;
  color: var(--parchment);
}

#portrait-picker .dfoot .act.pri {
  background: var(--flame);
  border-color: var(--flame);
  color: var(--surface-low);
  font-weight: 700;
}

#portrait-picker .dfoot .act.pri:hover {
  background: var(--tertiary);
  border-color: var(--tertiary);
}

#portrait-picker .dfoot button:disabled {
  opacity: 0.45;
  cursor: default;
}

@media (max-width: 680px) {
  #portrait-picker {
    width: min(400px, 92vw);
  }

  #portrait-picker .pp-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }

  #portrait-picker .panel {
    max-height: 42vh;
    border-right: 0;
    border-bottom: 1px solid var(--outline-variant);
  }

  #portrait-picker .pp-preview-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  #portrait-picker .pp-preview-avatar {
    width: 96px;
    height: 96px;
  }
}

/* Last in the block on purpose, as in the pair view: the drawer, the scrim and the
   sections set a display, and a hidden one has to stay hidden. */
#portrait-picker [hidden],
.pp-scrim[hidden],
#portrait-picker[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   Your profile (#profile): the builder's own page. The face they wear, who they
   are on Discord, the opt-out levels. Same stone as the builder page; nothing
   collapses; every action says where its record lives.
   -------------------------------------------------------------------------- */
#profile .profile-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  margin: 14px 0 26px;
  padding: 22px;
  border: 1px solid var(--outline-variant);
  border-radius: 6px;
  background: var(--surface-container-low);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

#profile .profile-face {
  display: flex;
  gap: 14px;
  align-items: flex-end;
}

#profile .profile-avatar,
#profile .profile-avatar img,
#profile .profile-avatar-fallback {
  display: block;
  width: 160px;
  height: 160px;
  border-radius: 6px;
}

#profile .profile-avatar img,
#profile .profile-avatar-fallback {
  object-fit: cover;
  border: 1px solid var(--ember);
  background: var(--surface-low);
}

#profile .profile-avatar-fallback {
  display: grid;
  place-items: center;
}

#profile .profile-avatar-fallback svg {
  width: 56%;
  height: auto;
}

#profile .profile-wide {
  display: block;
  width: 240px;
  height: 240px;
  object-fit: cover;
  border: 1px solid var(--outline-variant);
  border-radius: 6px;
  background: var(--surface-low);
}

#profile .profile-text h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin: 0 0 6px;
}

#profile .profile-facts {
  margin: 0 0 10px;
  color: var(--parchment);
}

#profile .profile-block {
  margin: 0 0 22px;
  padding: 18px 20px 20px;
  border: 1px solid var(--outline-variant);
  border-radius: 6px;
  background: var(--surface-container-low);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

#profile .profile-block h2 {
  font-size: 1.5rem;
  margin: 0 0 10px;
}

#profile .profile-block .muted {
  margin: 0 0 10px;
}

#profile .small {
  font-size: 0.82rem;
}

#profile .profile-row {
  margin: 0 0 8px;
}

#profile .profile-identity {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--on-surface);
}

#profile .discord-avatar {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  border: 1px solid var(--ember);
}

#profile button.plain {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font: inherit;
  font-size: 0.82rem;
}

#profile .portrait-pair {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 4px 0 6px;
}

#profile .portrait-now {
  margin: 0;
  display: grid;
  gap: 6px;
  justify-items: start;
}

#profile .portrait-now figcaption {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--outline);
}

#profile .actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 6px 0 8px;
}

#profile .actions-row button {
  margin: 0;
  width: auto;
}

#profile button:disabled {
  opacity: 0.45;
  cursor: default;
}

#profile .optout-levels {
  display: grid;
  gap: 10px;
  margin: 6px 0 14px;
  padding: 0;
  border: 0;
}

#profile .optout-level {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 12px 14px;
  border: 1px solid var(--outline-variant);
  border-radius: 6px;
  background: var(--surface-container);
  cursor: pointer;
}

#profile .optout-level:has(input:checked) {
  border-color: var(--flame);
  background: rgba(245, 158, 11, 0.08);
}

#profile .optout-level input {
  width: 18px;
  height: 18px;
  margin: 3px 0 0;
  accent-color: var(--flame);
}

#profile .optout-level strong {
  display: block;
  color: var(--on-surface);
}

#profile .optout-level small {
  display: block;
  margin-top: 2px;
  color: var(--parchment);
  font-size: 0.82rem;
}

#profile .optout-note {
  display: block;
  margin: 0 0 6px;
  color: var(--parchment);
  font-size: 0.86rem;
}

#profile .optout-note textarea {
  margin-top: 6px;
}

#profile .optout-message-wrap {
  margin: 4px 0 8px;
}

#profile .optout-message-wrap textarea {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.5;
}

#profile .profile-receipt {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--primary);
}

#profile .profile-about ul {
  margin: 0;
  padding-left: 18px;
}

#profile .profile-about li {
  margin: 0 0 6px;
}

@media (max-width: 680px) {
  #profile .profile-head {
    grid-template-columns: minmax(0, 1fr);
    padding: 14px;
  }

  #profile .profile-wide {
    display: none;
  }

  #profile .profile-avatar,
  #profile .profile-avatar img,
  #profile .profile-avatar-fallback {
    width: 128px;
    height: 128px;
  }
}
/* Era overview first; the two-axis map and complete ledger are opt-in. */
.era-overview { margin: 1.4rem 0 1rem; }
.era-overview h2 { margin-bottom: .25rem; }
.era-overview > p { max-width: 80ch; margin: .25rem 0 .8rem; }
.era-overview-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: .4rem; }
.era-overview-pick { display: grid; gap: .2rem; min-height: 58px; width: 100%; margin: 0; padding: .45rem .6rem; text-align: left; background: var(--surface-container-low); border: 1px solid var(--outline-variant); border-radius: 5px; color: var(--on-surface); }
.era-overview-pick strong { color: var(--primary); font-size: .87rem; }
.era-overview-pick span { color: var(--parchment); font: .68rem/1.35 var(--font-mono); }
.era-overview-pick[aria-pressed="true"] { border-color: var(--primary); background: #4a321e; box-shadow: inset 0 0 0 1px var(--primary); }
.era-overview-detail { margin: .8rem 0 0; padding: .55rem .75rem; border: 1px solid var(--outline-variant); border-radius: 5px; background: var(--surface-container-low); }
.era-overview-detail > summary { cursor: pointer; color: var(--primary); font-size: .84rem; }
.era-overview-detail .build-matrix { margin: .8rem 0 0; }
.build-matrix, .build-explorer { margin: 1.5rem 0; }
.build-matrix-wrap { overflow-x: auto; }
.build-matrix-table { width: min(100%, 880px); border-collapse: separate; border-spacing: .15rem; table-layout: fixed; }
.build-matrix-table caption { text-align: left; color: var(--parchment); }
.build-matrix-table th { color: var(--outline); font: 700 .75rem/1.3 var(--font-mono); text-align: left; white-space: nowrap; }
.build-matrix-table td { min-width: 80px; text-align: center; }
.build-matrix-cell { width: 100%; min-height: 44px; margin: 0; padding: 3px 5px; display: grid; align-content: center; gap: 0; border: 1px solid var(--outline-variant); border-radius: 4px; color: var(--on-surface); background: #28231e; }
.build-matrix-cell[data-density="2"] { background: #3b2b1c; }
.build-matrix-cell[data-density="3"] { background: #55351b; }
.build-matrix-cell[data-density="4"] { background: #70401a; }
.build-matrix-cell strong { font: 700 1.05rem/1.1 var(--font-mono); }
.build-matrix-cell small { color: var(--parchment); font-size: .68rem; line-height: 1.1; }
.build-matrix-cell[aria-pressed="true"] { outline: 2px solid var(--primary); outline-offset: 2px; }
.build-matrix-empty { color: var(--outline-variant); }
.build-matrix-legend { font: .78rem/1.4 var(--font-mono); }
.build-shortlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); align-items: start; gap: .65rem; padding: 0; list-style: none; }
.build-shortlist-pick { width: 100%; min-height: 86px; margin: 0; padding: 0; display: block; overflow: hidden; text-align: left; background: var(--surface-container-low); border: 1px solid var(--outline-variant); border-radius: 6px; color: var(--on-surface); }
.build-shortlist-preview { display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-low); }
.build-shortlist-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.build-shortlist-preview.is-unavailable { display: grid; place-items: center; color: var(--outline); }
.build-shortlist-record { display: block; padding: .4rem .7rem; border-bottom: 1px solid var(--outline-variant); background: var(--surface-container); color: var(--parchment); font: .68rem/1.3 var(--font-mono); }
.build-shortlist-copy { display: grid; gap: .3rem; padding: .65rem .7rem .7rem; }
.build-shortlist-copy strong { color: var(--primary); overflow-wrap: anywhere; }
.build-shortlist-copy span { color: var(--parchment); font: .72rem/1.4 var(--font-mono); }
.build-shortlist-copy .build-shortlist-status { color: var(--outline); }
.build-shortlist-pick[aria-pressed="true"] { border-color: var(--primary); }
.build-page-jump { display: inline-flex; align-items: center; gap: .35rem; font: .75rem var(--font-mono); }
.build-page-jump input { width: 4.2rem; margin: 0; padding: .3rem; }
.build-explorer-wrap { overflow-x: auto; border: 1px solid var(--outline-variant); border-radius: 8px; }
.build-explorer-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.build-explorer-table caption { text-align: left; padding: .65rem .8rem; color: var(--parchment); }
.build-explorer-table th, .build-explorer-table td { padding: .65rem .8rem; border-top: 1px solid var(--outline-variant); text-align: left; }
.build-explorer-table th { background: var(--surface-container); color: var(--outline); font-size: .77rem; text-transform: uppercase; letter-spacing: .06em; }
.build-explorer-table tbody tr:nth-child(even) { background: var(--surface-container-low); }
.build-explorer-table tbody tr[aria-selected="true"] { background: #4a321e; }
.build-explorer-pick { color: var(--primary); background: none; border: 0; padding: 0; text-align: left; font: inherit; cursor: pointer; }
.build-explorer-pick:hover { text-decoration: underline; }
.build-focus { margin-top: 1rem; padding: 1rem; border: 1px solid var(--bronze); border-radius: 8px; background: var(--surface-container); }
.build-focus h3 { margin-top: 0; }
.build-focus-facts, .pair-selected-facts { font-family: 'JetBrains Mono', monospace; color: var(--parchment); font-size: .85rem; }
.build-focus-priority { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; margin-top: .75rem; }
.kin-activity { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .75rem; }
.kin-activity-era { padding: .25rem .45rem; border: 1px solid var(--outline-variant); border-radius: 4px; background: var(--surface-container); color: var(--parchment); font-family: 'JetBrains Mono', monospace; font-size: .75rem; }
.kin-profile-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: .6rem; margin: .8rem 0 1rem; }
.kin-profile-card { display: flex; align-items: flex-start; gap: .7rem; min-width: 0; padding: .7rem; border: 1px solid var(--outline-variant); border-radius: 6px; background: var(--surface-container-low); }
.kin-profile-card.kin-profile-linked { border-color: var(--primary); }
.kin-profile-card .top8-portrait { width: 52px; height: 52px; flex: 0 0 52px; }
.kin-profile-card .top8-portrait img { width: 100%; height: 100%; object-fit: cover; }
.kin-profile-card-copy { min-width: 0; }
.kin-profile-card h3 { margin: 0 0 .3rem; font-size: 1rem; overflow-wrap: anywhere; }
.kin-profile-card-facts { margin: 0 0 .35rem; color: var(--parchment); font: .7rem/1.4 var(--font-mono); }
.kin-profile-card a { font-size: .78rem; }
.pair-era-control { display: flex; align-items: center; gap: .75rem; margin: .75rem 0; }
.pair-selected-build { padding: .8rem 1rem; margin: .8rem 0; border: 1px solid var(--outline-variant); border-radius: 6px; background: var(--surface-container-low); }
.pair-selected-build h4 { margin: 0 0 .4rem; }
.pair-ledger-pager { margin-top: .6rem; }
@media (max-width: 680px) {
  .build-matrix-wrap { overflow: visible; }
  .build-matrix-table, .build-matrix-table tbody, .build-matrix-table tr, .build-matrix-table td { display: block; width: 100%; }
  .build-matrix-table caption { display: block; width: 100%; margin-bottom: .35rem; }
  .build-matrix-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .build-matrix-table tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; padding: .5rem; margin: .5rem 0; border: 1px solid var(--outline-variant); border-radius: 7px; }
  .build-matrix-table tbody th { display: block; grid-column: 1 / -1; margin-bottom: .1rem; color: var(--primary); }
  .build-matrix-table td[data-empty="true"] { display: none; }
  .build-matrix-table td { width: auto; min-width: 0; margin: 0; }
  .build-matrix-table td::before { content: attr(data-band-label) ' pieces'; display: block; margin-bottom: .1rem; text-align: left; color: var(--outline); font: .66rem/1.2 var(--font-mono); }
  .build-matrix-cell { min-height: 44px; }
  .build-shortlist { grid-template-columns: 1fr; }
  .build-explorer-wrap { overflow: visible; border: 0; }
  .build-explorer-table, .build-explorer-table tbody, .build-explorer-table tr, .build-explorer-table td { display: block; width: 100%; }
  .build-explorer-table caption { display: block; width: 100%; }
  .build-explorer-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .build-explorer-table tbody tr { margin: .55rem 0; padding: .5rem .7rem; border: 1px solid var(--outline-variant); border-radius: 6px; }
  .build-explorer-table td { border: 0; padding: .16rem 0; font-size: .83rem; }
  .build-explorer-table td:first-child { font-size: 1rem; font-weight: 700; }
  .build-explorer-table td:nth-child(2)::before { content: 'Era: '; color: var(--outline); }
  .build-explorer-table td:nth-child(3)::before { content: 'Your pieces: '; color: var(--outline); }
  .build-explorer-table td:nth-child(4)::before { content: 'Total: '; color: var(--outline); }
  .build-explorer-table td:nth-child(5)::before { content: 'Photos: '; color: var(--outline); }
  #pair-view .pair-ledger-wrap { overflow: visible; }
  #pair-view #pair-ledger, #pair-view #pair-ledger tbody, #pair-view #pair-ledger tr, #pair-view #pair-ledger td { display: block; width: 100%; }
  #pair-view #pair-ledger caption { display: block; width: 100%; }
  #pair-view #pair-ledger thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  #pair-view #pair-ledger tbody tr { padding: .55rem .7rem; margin: .5rem 0; border: 1px solid var(--outline-variant); border-radius: 6px; background: var(--surface-container-low); }
  #pair-view #pair-ledger td { padding: .16rem 0; border: 0; font-size: .8rem; text-align: left; }
  #pair-view #pair-ledger td:first-child { font-size: 1rem; font-weight: 700; }
  #pair-view #pair-ledger td:nth-child(2)::before { content: 'Era: '; color: var(--outline); }
  #pair-view #pair-ledger td:nth-child(3)::before { content: 'Pieces: '; color: var(--outline); }
  #pair-view #pair-ledger td:nth-child(4)::before { content: 'Split: '; color: var(--outline); }
  #pair-view #pair-ledger td:nth-child(5)::before { content: 'Status: '; color: var(--outline); }
}

/* Kinship: one bounded map, one searchable table, and pair details on demand. */
#kinship .kin-layout { display: block; }
#kinship #title { font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1.08; }
#kinship .kin-main { min-width: 0; }
#kinship #kin-map-section, #kinship #kin-ledger-panel, #kinship #kin-pair-panel { margin: 1.1rem 0; padding: 1rem; border: 1px solid var(--outline-variant); border-radius: 8px; background: var(--surface-container-low); }
#kinship #kin-map-section h2, #kinship #kin-ledger-panel h2, #kinship #kin-pair-panel h2 { margin-top: 0; }
#kinship #kin-metrics { display: flex; gap: .45rem; flex-wrap: wrap; margin: .8rem 0; }
#kinship #kin-metrics button { margin: 0; }
#kinship #kin-metrics button[aria-pressed="true"] { color: var(--primary); border-color: var(--primary); background: #4a321e; }
#kinship #kin-mobile-pick-label { display: none; }
#kinship .kin-map-wrap { overflow-x: auto; }
#kinship #kin-map-table { width: 100%; border-collapse: separate; border-spacing: .25rem; }
#kinship #kin-map-table caption { text-align: left; color: var(--parchment); font-size: .78rem; }
#kinship #kin-map-table th { min-width: 68px; max-width: 130px; color: var(--outline); font: 700 .72rem/1.3 var(--font-mono); text-align: center; overflow-wrap: anywhere; }
#kinship #kin-map-table tbody th { text-align: left; white-space: nowrap; }
#kinship #kin-map-table td { min-width: 68px; text-align: center; }
#kinship .kin-map-cell { width: 100%; min-height: 42px; margin: 0; padding: .25rem; color: var(--on-surface); background: #252525; border: 1px solid var(--outline-variant); border-radius: 5px; font: 700 .8rem var(--font-mono); }
#kinship .kin-map-cell[data-level="1"] { background: #33291e; }
#kinship .kin-map-cell[data-level="2"] { background: #4a321e; }
#kinship .kin-map-cell[data-level="3"] { background: #63391b; }
#kinship .kin-map-cell[data-level="4"] { background: #854514; }
#kinship .kin-map-cell[data-level="unknown"] { background: repeating-linear-gradient(135deg, #352c22 0 7px, #222 7px 14px); }
#kinship .kin-map-cell[aria-pressed="true"] { outline: 2px solid var(--primary); outline-offset: 1px; }
#kinship .kin-map-empty { color: var(--outline-variant); }
#kinship .kin-ledger-controls { display: flex; gap: .6rem; flex-wrap: wrap; margin: .75rem 0; }
#kinship .kin-ledger-controls label { display: flex; flex: 1 1 180px; flex-direction: column; gap: .25rem; color: var(--parchment); font-size: .78rem; }
#kinship .kin-ledger-controls input, #kinship .kin-ledger-controls select { width: 100%; min-width: 0; }
#kinship #kin-ledger td, #kinship #kin-ledger th { padding: .45rem .55rem; }
#kinship #kin-ledger td:last-child { white-space: nowrap; }
#kinship .kin-pair-intro { color: var(--parchment); font: .85rem/1.5 var(--font-mono); }
#kinship .kin-pair-links { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin: .6rem 0; }
#kinship .kin-pair-era { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: .8rem 0; }
#kinship .kin-pair-era select { max-width: 330px; }
#kinship .kin-pair-shortlist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; padding: 0; list-style: none; }
#kinship .kin-pair-pick { width: 100%; min-height: 90px; margin: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: .3rem; padding: .65rem; text-align: left; background: var(--surface-container); border: 1px solid var(--outline-variant); border-radius: 6px; }
#kinship .kin-pair-pick strong { color: var(--primary); overflow-wrap: anywhere; }
#kinship .kin-pair-pick span { color: var(--parchment); font: .72rem/1.4 var(--font-mono); }
#kinship .kin-pair-pick[aria-pressed="true"] { border-color: var(--primary); }
#kinship .kin-pair-build-detail { padding: .8rem; margin: .8rem 0; border: 1px solid var(--outline-variant); border-radius: 6px; }
#kinship .kin-pair-ledger { margin-top: 1rem; }
#kinship .kin-pair-ledger input[type="search"] { width: min(100%, 390px); }
#kinship .kin-pair-ledger-pick { padding: 0; border: 0; background: none; color: var(--primary); text-align: left; }
#kinship #kin-ledger .kin-pair-link, #kinship .kin-pair-ledger-pick { margin: 0; }
#kinship .kin-pair-page { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin: .7rem 0; }
#kinship .kin-pair-page input { width: 4rem; margin: 0; }
#kinship .kin-extra { margin-top: 1rem; border: 1px solid var(--outline-variant); border-radius: 6px; padding: .7rem; }
#kinship .kin-extra > summary { color: var(--primary); cursor: pointer; }
#kinship .kin-extra .kin-aside { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: .8rem; margin-top: .8rem; }
.legacy-kin-notice { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin: .7rem 0 1rem; padding: .7rem .9rem; border: 1px solid var(--outline-variant); border-left: 3px solid var(--bronze); border-radius: 5px; background: var(--surface-container-low); }
.legacy-kin-notice a { white-space: nowrap; }
@media (max-width: 850px) {
  #kinship #kin-metrics button { flex: 1 1 30%; min-width: 92px; width: auto; padding: .5rem .3rem; font-size: .72rem; line-height: 1.25; }
  #kinship #kin-mobile-pick-label { display: flex; flex-direction: column; gap: .25rem; margin: .7rem 0; }
  #kinship #kin-mobile-pick { width: 100%; }
  #kinship #kin-map-table th[data-key][data-mobile-active="false"], #kinship #kin-map-table td[data-key][data-mobile-active="false"] { display: none; }
  #kinship .kin-map-wrap { overflow: visible; }
  #kinship #kin-map-table th, #kinship #kin-map-table td { width: 50%; }
  #kinship .kin-pair-shortlist { grid-template-columns: 1fr; }
  #kinship #kin-ledger, #kinship #kin-ledger tbody, #kinship #kin-ledger tr, #kinship #kin-ledger td, #kinship .kin-pair-table, #kinship .kin-pair-table tbody, #kinship .kin-pair-table tr, #kinship .kin-pair-table td { display: block; width: 100%; }
  #kinship #kin-ledger thead, #kinship .kin-pair-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  #kinship #kin-ledger tbody tr, #kinship .kin-pair-table tbody tr { margin: .45rem 0; padding: .45rem; border: 1px solid var(--outline-variant); border-radius: 6px; }
  #kinship #kin-ledger td, #kinship .kin-pair-table td { border: 0; padding: .2rem 0; }
  #kinship #kin-ledger td:nth-child(2)::before { content: 'Eras: '; color: var(--outline); }
  #kinship #kin-ledger td:nth-child(3)::before { content: 'Shared builds: '; color: var(--outline); }
  #kinship #kin-ledger td:nth-child(4)::before { content: 'Shared pieces: '; color: var(--outline); }
  #kinship .kin-pair-table td:nth-child(2)::before { content: 'Era: '; color: var(--outline); }
  #kinship .kin-pair-table td:nth-child(3)::before { content: 'Total: '; color: var(--outline); }
  #kinship .kin-pair-table td:nth-child(4)::before { content: 'Your pieces: '; color: var(--outline); }
  #kinship .kin-pair-table td:nth-child(5)::before { content: 'Their pieces: '; color: var(--outline); }
  #kinship .kin-pair-table td:nth-child(6)::before { content: 'Photos: '; color: var(--outline); }
}