/* Shared catalog entity-detail chrome for skill/class/location/set/post. */
.catalog-detail {
  --entity-accent: var(--lu4-accent);
  --entity-rule: color-mix(in srgb, var(--border) 52%, transparent);
  --entity-rule-strong: color-mix(in srgb, var(--border) 76%, transparent);
  --entity-hero-icon-size: 4.25rem;
  --entity-section-gap: 1rem;
  --catalog-rule: var(--entity-rule);
  --catalog-rule-strong: var(--entity-rule-strong);
}

.catalog-badge {
  display: grid;
  min-width: 3.5rem;
  min-height: 2.5rem;
  place-content: center;
  padding: .25rem .7rem;
  border: 1px solid color-mix(in srgb, var(--entity-accent) 42%, var(--control-border));
  border-radius: var(--radius-md);
  background: var(--control-bg);
  color: var(--text);
  text-align: center;
}
.catalog-badge small,
.catalog-badge strong { display: block; line-height: 1.05; }
.catalog-badge small {
  color: var(--text-muted);
  font-size: var(--type-badge-size);
  font-weight: 650;
}
.catalog-badge strong {
  margin-top: .15rem;
  font-size: .875rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.catalog-grade-badge {
  display: grid;
  min-width: 3.25rem;
  min-height: 3rem;
  place-content: center;
  padding: .3rem .65rem;
  border: 1px solid color-mix(in srgb, var(--catalog-grade-color, var(--entity-accent)) 62%, var(--control-border));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--catalog-grade-color, var(--entity-accent)) 11%, transparent);
  color: var(--text);
  text-align: center;
}
.catalog-grade-badge small,
.catalog-grade-badge strong { display: block; line-height: 1.05; }
.catalog-grade-badge small {
  color: var(--text-muted);
  font-size: var(--type-badge-size);
  font-weight: 650;
}
.catalog-grade-badge strong {
  margin-top: .2rem;
  font-size: .9375rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.catalog-grade-badge[data-grade="NG"] { --catalog-grade-color: var(--grade-ng); }
.catalog-grade-badge[data-grade="D"] { --catalog-grade-color: var(--grade-d); }
.catalog-grade-badge[data-grade="C"] { --catalog-grade-color: var(--grade-c); }
.catalog-grade-badge[data-grade="B"] { --catalog-grade-color: var(--grade-b); }
.catalog-grade-badge[data-grade="A"] { --catalog-grade-color: var(--grade-a); }
.catalog-grade-badge[data-grade="S"] { --catalog-grade-color: var(--grade-s); }

.catalog-inline-grade {
  margin-left: .4rem;
}

.catalog-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .2rem .45rem;
  margin: .35rem 0 0;
  color: var(--text-muted);
  font-size: var(--entity-meta-size);
  line-height: 1.4;
  font-weight: 500;
}
.catalog-byline__sep { opacity: .55; }
.catalog-byline a { color: var(--link); text-decoration: none; font-weight: 650; }
.catalog-byline a:hover { color: var(--link-hover); }

.catalog-hero__facts {
  grid-column: 1 / -1;
  margin: .25rem 0 0;
}
.catalog-hero__facts > .entity-facts { margin-top: .25rem; }
@container (max-width: 32.5rem) {
  .catalog-hero__facts > .entity-facts { grid-template-columns: 1fr; }
}

.catalog-desc {
  margin: 0;
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: var(--entity-body-line);
  white-space: pre-wrap;
}
.catalog-desc .lu4-desc-ref,
.catalog-step__text .lu4-desc-ref {
  color: var(--link);
  font-weight: 650;
  text-decoration: none;
}
.catalog-desc .lu4-desc-ref:hover,
.catalog-step__text .lu4-desc-ref:hover { color: var(--link-hover); }

.catalog-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.catalog-chip {
  display: inline-flex;
  min-height: 1.6rem;
  align-items: center;
  padding: 0 .55rem;
  border: 1px solid var(--catalog-rule-strong);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface) 40%, transparent);
  color: var(--text-secondary);
  font-size: var(--entity-meta-size);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.catalog-chip--inline {
  margin-left: .4rem;
  min-height: 1.05rem;
  vertical-align: middle;
}

.catalog-effects {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}
.catalog-effect {
  position: relative;
  display: grid;
  align-content: start;
  gap: .45rem;
  min-height: 5.5rem;
  margin: 0;
  padding: .9rem 1rem .9rem 1.125rem;
  border: 1px solid var(--catalog-rule);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface) 28%, transparent);
}
.catalog-effect__label {
  margin: 0;
  color: var(--text);
  font-size: var(--entity-subtitle-size);
  line-height: var(--entity-body-line);
  font-weight: 700;
}
.catalog-effect__body {
  color: var(--text-secondary);
  font-size: var(--entity-body-size);
  line-height: var(--entity-body-line);
  white-space: pre-wrap;
}

.catalog-relations {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.catalog-relation-wrap {
  position: relative;
  border-bottom: 1px solid var(--catalog-rule);
}
.catalog-relation-wrap[hidden] { display: none; }
.catalog-relation-wrap:nth-child(odd of .catalog-relation-wrap:not([hidden])):has(~ .catalog-relation-wrap:not([hidden]))::after {
  position: absolute;
  top: .65rem;
  right: 0;
  bottom: .65rem;
  width: 1px;
  background: var(--catalog-rule-strong);
  content: "";
}
.catalog-relation {
  min-height: 4.5rem;
  padding: .625rem 1.25rem;
}
.catalog-relation-wrap:hover { background: var(--data-row-hover-bg); }

.catalog-more {
  display: flex;
  width: 100%;
  min-height: 2.5rem;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-top: .5rem;
  border: 1px solid var(--control-border);
  border-radius: var(--radius-md);
  background: var(--control-bg);
  color: var(--text-secondary);
  font-size: var(--entity-body-size);
  font-weight: 650;
}
.catalog-more:hover {
  border-color: var(--control-border-hover);
  background: var(--control-hover-bg);
  color: var(--text);
}
.catalog-more small {
  color: var(--text-muted);
  font-size: var(--entity-meta-size);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.catalog-more[hidden] { display: none; }

.catalog-section-tabs > button span {
  margin-left: .35rem;
  color: var(--text-muted);
  font-size: var(--entity-meta-size);
}
.catalog-section-tabs > button[aria-selected="true"] span { color: var(--entity-accent); }
.catalog-tab-panel { min-width: 0; }
.catalog-tab-panel[hidden] { display: none; }

.catalog-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  align-items: center;
}
.catalog-toolbar__filters {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.catalog-toolbar__filters button {
  min-height: 2.25rem;
  padding: 0 .75rem;
  border: 1px solid var(--control-border);
  border-radius: var(--radius-md);
  background: var(--control-bg);
  color: var(--text-secondary);
  font-size: var(--type-ui-size);
  font-weight: 650;
}
.catalog-toolbar__filters button[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--entity-accent) 55%, var(--control-border));
  color: var(--entity-accent);
}
.catalog-toolbar__search {
  min-width: 12rem;
  flex: 1 1 12rem;
  min-height: 2.25rem;
  padding: 0 .75rem;
  border: 1px solid var(--control-border);
  border-radius: var(--radius-md);
  background: var(--control-bg);
  color: var(--text);
  font-size: var(--type-ui-size);
}

.catalog-steps { display: grid; gap: .85rem; }
.catalog-step {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: .85rem 1rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--catalog-rule);
}
.catalog-step:last-child { border-bottom: 0; }
.catalog-step__index {
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--entity-accent) 40%, var(--border));
  border-radius: 999px;
  background: var(--control-bg);
  color: var(--entity-accent);
  font-size: var(--entity-body-size);
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.catalog-step__body { min-width: 0; display: grid; gap: .65rem; }
.catalog-step__text {
  margin: 0;
  color: var(--text);
  font-size: 1rem;
  line-height: var(--entity-body-line);
}
.catalog-step__images {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: .75rem;
}
.catalog-step__images figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-interactive);
}
.catalog-step__images img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.catalog-level-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.catalog-level-nav button {
  min-width: 2.5rem;
  min-height: 2.25rem;
  padding: 0 .55rem;
  border: 1px solid var(--control-border);
  border-radius: var(--radius-md);
  background: var(--control-bg);
  color: var(--text-secondary);
  font-size: var(--type-dense-size);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.catalog-level-nav button[aria-selected="true"] {
  border-color: color-mix(in srgb, var(--entity-accent) 55%, var(--control-border));
  color: var(--entity-accent);
}
.catalog-level-panel {
  display: grid;
  gap: .75rem;
  padding: 1rem 0 0;
  border-top: 1px solid var(--catalog-rule);
}

/* Level selection controls attributes, effect and learning together. */
.skill-levels, .skill-level-content { display: grid; gap: var(--entity-content-gap, 2.25rem); min-width: 0; }
.skill-level-picker { display: flex; align-items: baseline; gap: .75rem 1rem; min-width: 0; }
.skill-level-picker__label { flex: 0 0 auto; color: var(--text-muted); font-size: 1rem; line-height: 1.75rem; }
.skill-level-picker .catalog-level-nav { flex:1; min-width:0; flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain; padding-block:.125rem .375rem; scrollbar-width:thin; }
.skill-level-picker .catalog-level-nav button { flex:0 0 auto; }

/* Current-level mechanics use the shared full-page fact typography. */
.skill-level-properties { min-width: 0; }
/* Effect prose shares the attributes' reading inset; headings stay full width. */
.skill-level-effect > .catalog-desc { padding-inline:var(--entity-facts-inset,1.25rem); }

.catalog-level-list { display: grid; gap: .65rem; }
.catalog-level {
  border: 1px solid var(--catalog-rule-strong);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface) 34%, transparent);
  overflow: hidden;
}
.catalog-level > summary {
  display: flex;
  min-height: 2.5rem;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .5rem 1rem;
  cursor: pointer;
  list-style: none;
  color: var(--text);
  font-weight: 700;
}
.catalog-level > summary::-webkit-details-marker { display: none; }
.catalog-level > summary:hover { background: var(--data-row-hover-bg); }
.catalog-level__body {
  display: grid;
  gap: .65rem;
  padding: 0 1rem 1rem;
  border-top: 1px solid var(--catalog-rule);
}
.catalog-note {
  margin: .5rem 0 0;
  color: var(--text-muted);
  font-size: var(--type-dense-size);
}

.catalog-drop-row {
  display: grid;
  gap: .35rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--catalog-rule);
}
.catalog-drop-row:last-child { border-bottom: 0; }
#location-content .catalog-drop-row { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; column-gap: 2rem; padding-block: .5rem; }
#location-content .catalog-drop-row[hidden] { display: none; }
#location-content .catalog-drop-row > .catalog-relation { align-self: start; }
#location-content .catalog-drop-row .catalog-relation { min-height: 2.75rem; padding: .25rem .5rem; }
#location-content .catalog-drop-sources { display: grid; gap: .25rem; margin: 0; min-width: 0; }
#location-content .catalog-drop-sources .catalog-relation { min-width: 0; color: var(--text); --wb-entity-icon-size: 2rem; }
#location-content .catalog-drop-sources .wb-entity-link__icon { width: 2rem; height: 2rem; }
#location-content .catalog-drop-sources .wb-entity-link__secondary { display: inline; }
#location-content .catalog-drop-sources .wb-entity-link__secondary + .wb-entity-link__secondary::before { content: ' · '; white-space: pre; }
@container (max-width: 40rem) {
  #location-content .catalog-drop-row { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  #location-content .catalog-drop-sources { margin-left: 1rem; padding-left: .75rem; border-left: 1px solid var(--catalog-rule); }
}
.catalog-drop-sources {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .65rem;
  margin: 0 0 0 3.25rem;
  color: var(--text-muted);
  font-size: var(--entity-meta-size);
}
.catalog-drop-sources a { color: var(--link); text-decoration: none; }
.catalog-drop-sources a:hover { color: var(--link-hover); }
.catalog-drop-sources button {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--entity-accent);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

.catalog-fold {
  border: 1px solid var(--catalog-rule-strong);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.catalog-fold > summary {
  display: flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .5rem 1rem;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
}
.catalog-fold > summary::-webkit-details-marker { display: none; }
.catalog-fold > summary:hover { background: var(--data-row-hover-bg); }
.catalog-fold__body {
  padding: 0 1rem 1rem;
  border-top: 1px solid var(--catalog-rule);
}

.catalog-post__blocks { display: grid; gap: 1rem; }
.catalog-post__list {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: var(--entity-body-line);
}
.catalog-post__list li + li { margin-top: .35rem; }
.catalog-post__note {
  margin: 0;
  padding: .85rem 1rem;
  border-left: 3px solid color-mix(in srgb, var(--entity-accent) 70%, var(--border));
  background: color-mix(in srgb, var(--surface) 48%, transparent);
  color: var(--text-secondary);
  font-size: var(--entity-body-size);
  line-height: var(--entity-body-line);
}
.catalog-post__table-wrap {
  overflow-x: auto;
  border-bottom: 1px solid var(--catalog-rule-strong);
}
.catalog-post__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--entity-body-size);
}
.catalog-post__table th,
.catalog-post__table td {
  padding: .65rem .85rem;
  border-bottom: 1px solid var(--catalog-rule);
  text-align: left;
  vertical-align: top;
}
.catalog-post__table th {
  color: var(--text-muted);
  font-size: var(--entity-meta-size);
  font-weight: 700;
  white-space: nowrap;
}
.catalog-post__table tbody tr:last-child td { border-bottom: 0; }
.catalog-post__cards,
.catalog-post__combo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: .75rem;
}
.catalog-post__card,
.catalog-post__panel {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .75rem;
  padding: .85rem 1rem;
  border: 1px solid var(--catalog-rule-strong);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface) 36%, transparent);
}
.catalog-post__panel { grid-template-columns: 1fr; }
.catalog-post__card img {
  width: 2.25rem;
  height: 2.25rem;
  object-fit: contain;
}
.catalog-post__card strong,
.catalog-post__panel strong {
  display: block;
  margin-bottom: .35rem;
  color: var(--text);
}
.catalog-post__figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-interactive);
}
.catalog-post__figure img {
  display: block;
  width: 100%;
  max-height: 22rem;
  object-fit: contain;
}
.catalog-post__subsection {
  display: grid;
  gap: .85rem;
  padding-top: .25rem;
}
.catalog-post__subsection h3 {
  margin: 0;
  color: var(--text);
  font-size: var(--entity-subtitle-size);
  line-height: var(--entity-body-line);
}
.catalog-post__bonus-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
}
.catalog-post__bonus {
  display: grid;
  gap: .25rem;
  padding: .85rem 1rem;
  border: 1px solid var(--catalog-rule-strong);
  border-radius: var(--radius-md);
  color: inherit;
  text-decoration: none;
}
.catalog-post__bonus:hover { background: var(--data-row-hover-bg); }
.catalog-post__bonus strong { color: var(--text); }
.catalog-post__bonus small { color: var(--text-muted); font-size: var(--entity-meta-size); line-height: var(--entity-meta-line); }

@container (max-width: 52.5rem) {
  .catalog-effects { grid-template-columns: 1fr; }
  .catalog-relations { grid-template-columns: 1fr; }
  .catalog-relation-wrap::after { display: none; }
  .catalog-post__bonus-grid { grid-template-columns: 1fr; }
  .catalog-drop-sources { margin-left: 0; }
}