/* ── Top nav ──────────────────────────────────────────── */
.item-top-nav {
    background: #141414;
    border-bottom: 1px solid #333;
}

.item-top-nav-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    padding: 0 16px;
}

.item-top-nav-row a,
.item-top-nav-row button {
    display: block;
    padding: 7px 14px;
    color: #888;
    text-decoration: none;
    font-size: 0.88rem;
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
    border-radius: 3px;
}

.item-top-nav-row a:hover,
.item-top-nav-row button:hover {
    color: #ccc;
    background: #1e1e1e;
}

.item-top-nav-row a.active,
.item-top-nav-row button.active {
    color: #c8a84b;
    background: #261f00;
}

.item-top-subnav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background: #111;
    border-top: 1px solid #252525;
    padding: 3px 16px;
}

.item-top-subnav a {
    font-size: 0.82rem;
    padding: 5px 12px;
    color: #777;
    text-decoration: none;
    border-radius: 3px;
}

.item-top-subnav a:hover {
    color: #bbb;
    background: #1e1e1e;
}

.item-top-subnav a.active {
    color: #c8a84b;
    background: #261f00;
}

.subnav-group-label {
    font-size: 0.75rem;
    color: #555;
    padding: 5px 6px 5px 12px;
    white-space: nowrap;
}

/* The links of a labelled group, boxed so the group wraps under itself.
   
   Without this the links are flex siblings of the label, so a second line starts at the row's own
   left edge — under "Martial:" rather than under "Battleaxe", which reads as a new group beginning
   rather than as the same one carrying on. flex:1 takes the rest of the row; min-width:0 lets it
   actually wrap instead of overflowing. */
.subnav-group-items {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex: 1;
    min-width: 0;
}

/* Pinned to the first line rather than centred against a block that may now be two or three lines
   tall — a label floating beside the middle of its own list belongs to none of it. */
.item-top-subnav .subnav-group-label {
    align-self: flex-start;
}

.subnav-group-sep {
    display: inline-block;
    width: 1px;
    height: 14px;
    background: #333;
    margin: 0 4px;
    vertical-align: middle;
}

/* ── Main content area ────────────────────────────────── */
.browse-main {
    padding: 20px 24px;
    min-width: 0;
}

/* A rule that applies to a whole tier and is nowhere in its rows. Sits directly under the listing's
   heading, before the contents list, so it is read before anything is clicked. */
.feat-tier-lede {
    margin: -4px 0 16px;
    max-width: 62ch;
    color: var(--text-dim);
    font-size: 0.85rem;
    line-height: 1.6;
}

/* ── Browse body: filter sidebar + table ──────────────── */
.item-browse-body {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.item-filter-panel {
    width: 200px;
    flex-shrink: 0;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 4px;
    padding: 14px;
    font-size: 0.85rem;
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
}

.item-filter-panel h3 {
    margin: 0 0 12px;
    font-size: 0.9rem;
    color: #ccc;
    border-bottom: 1px solid #333;
    padding-bottom: 6px;
}

.item-browse-table-wrap {
    flex: 1;
    min-width: 0;
}

/* ── Filter controls ──────────────────────────────────── */
.filter-section {
    margin-bottom: 16px;
}

.filter-section label {
    display: block;
    color: #aaa;
    margin-bottom: 4px;
    font-size: 0.8rem;
}

.search-input {
    width: 100%;
    background: #111;
    color: #d6d8d8;
    border: 1px solid #444;
    border-radius: 3px;
    padding: 4px 6px;
    font-size: 0.82rem;
    box-sizing: border-box;
}

.browse-filter-count {
    color: #666;
    font-size: 0.8rem;
    margin: 0;
}

/* ── Dual range slider ────────────────────────────────── */
.level-range-dual {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.dual-slider-wrap {
    position: relative;
    height: 20px;
}

.dual-slider-track,
.dual-slider-range {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 4px;
    border-radius: 2px;
    pointer-events: none;
}

.dual-slider-track {
    left: 0;
    right: 0;
    background: #444;
}

.dual-slider-range {
    background: #c8a84b;
}

.dual-slider-wrap input[type=range] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    pointer-events: none;
}

.dual-slider-wrap input[type=range]::-webkit-slider-runnable-track {
    background: transparent;
    height: 4px;
}

.dual-slider-wrap input[type=range]::-moz-range-track {
    background: transparent;
    height: 4px;
}

.dual-slider-wrap input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    pointer-events: all;
    cursor: pointer;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #c8a84b;
    border: 2px solid #1a1c1c;
    margin-top: -6px;
}

.dual-slider-wrap input[type=range]::-moz-range-thumb {
    pointer-events: all;
    cursor: pointer;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #c8a84b;
    border: 2px solid #1a1c1c;
    box-sizing: border-box;
}

/* ── Browse item table ────────────────────────────────── */
.browse-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.85rem;
}

.browse-table th {
    text-align: left;
    padding: 5px 10px;
    border-bottom: 1px solid #444;
    color: #aaa;
    font-weight: bold;
    white-space: nowrap;
}

.browse-table td {
    padding: 5px 10px;
    vertical-align: top;
    border-right: 1px solid #2a2a2a;
    border-bottom: 1px solid #222;
}

.browse-table td:last-child {
    border-right: none;
}

.browse-table tbody tr:nth-child(even) {
    background: #161616;
}

.browse-table tbody tr:hover {
    background: #1e2a1e;
}

.browse-table td a {
    color: #b8943e;
    text-decoration: none;
}

.browse-table td a:hover {
    color: #e0bb60;
}

/* ── Effect tooltips ──────────────────────────────────── */
.bt-has-tip {
    position: relative;
    cursor: default;
}

.bt-tip {
    visibility: hidden;
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 200;
    background: #1a1a1a;
    border: 1px solid #555;
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 0.78rem;
    color: #ccc;
    min-width: 220px;
    max-width: 340px;
    white-space: normal;
    line-height: 1.4;
    transition: visibility 0s linear 0.25s;
    pointer-events: none;
}

.bt-has-tip:hover > .bt-tip {
    visibility: visible;
    transition-delay: 0.25s;
}

.bt-tip-tier {
    padding: 2px 0;
    border-bottom: 1px solid #2a2a2a;
    color: #bbb;
}

.bt-tip-tier:last-child {
    border-bottom: none;
}

.bt-set-bonus {
    color: #8ab4d0;
}

/* ── Category index lists ─────────────────────────────── */
.browse-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.browse-list li a {
    display: block;
    padding: 4px 10px;
    background: #1e1e1e;
    border: 1px solid #333;
    border-radius: 3px;
    color: #aaa;
    text-decoration: none;
    font-size: 0.85rem;
}

.browse-list li a:hover {
    background: #2a2a2a;
    color: #fff;
}

.browse-list li a .count {
    color: #555;
    font-size: 0.75rem;
    margin-left: 4px;
}

.browse-item-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.browse-item-list a {
    color: #aaa;
    text-decoration: none;
    padding: 3px 6px;
}

.browse-item-list a:hover {
    color: #fff;
    background: #1e1e1e;
}

/* ── Search form ──────────────────────────────────────── */
.search-card {
    max-width: 540px;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 6px;
    padding: 24px 28px 20px;
}

.search-card-title {
    margin: 0 0 20px;
    font-size: 1.05rem;
    color: #ccc;
    font-weight: bold;
}

.search-fields {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.search-field {
    display: flex;
    align-items: center;
    gap: 12px;
}

.search-field > label {
    width: 110px;
    flex-shrink: 0;
    color: #999;
    font-size: 0.82rem;
    text-align: right;
}

.sf-input {
    flex: 1;
    background: #111;
    color: #d6d8d8;
    border: 1px solid #3a3a3a;
    border-radius: 3px;
    padding: 5px 8px;
    font-size: 0.85rem;
    font-family: inherit;
    box-sizing: border-box;
}

.sf-input:focus {
    outline: none;
    border-color: #666;
}

.sf-num {
    flex: 0 0 72px;
    width: 72px;
}

.sf-range {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
}

.sf-dash {
    color: #555;
}

.sf-check-field {
    padding-left: 122px;
}

.sf-check-field label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #bbb;
    font-size: 0.85rem;
    cursor: pointer;
    width: auto;
    text-align: left;
}

.sf-check-field input[type=checkbox] {
    accent-color: #c8a84b;
}

/* Advanced section */
.search-advanced {
    margin-top: 16px;
    border-top: 1px solid #2a2a2a;
    padding-top: 10px;
}

.search-advanced-toggle {
    color: #777;
    font-size: 0.82rem;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    user-select: none;
}

.search-advanced-toggle::-webkit-details-marker { display: none; }

.search-advanced-toggle::before {
    content: '\25B6';
    font-size: 0.55em;
    color: #555;
    transition: transform 0.15s;
}

details[open] .search-advanced-toggle::before {
    transform: rotate(90deg);
}

.search-advanced-fields {
    margin-top: 12px;
}

/* Search footer */
.search-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid #2a2a2a;
}

.sf-pagesize-label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #666;
    font-size: 0.82rem;
}

.sf-pagesize-label .sf-num {
    flex: 0 0 56px;
    width: 56px;
}

.search-btn {
    background: #1e1c10;
    color: #c8a84b;
    border: 1px solid #4a3e18;
    border-radius: 3px;
    padding: 6px 22px;
    font-size: 0.88rem;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.search-btn:hover {
    background: #2e2810;
    border-color: #c8a84b;
    color: #e0bb60;
}

/* ── Searching state ──────────────────────────────────
   The form posts and the whole page reloads, so between the click and the server's answer
   nothing on screen moves — a search that takes a few seconds reads as a dead button. The
   spinner and the dimmed results are the only evidence that anything is happening. */
.search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 124px;
}

.search-btn[disabled] {
    cursor: default;
    background: #1e1c10;
    border-color: #4a3e18;
    color: #c8a84b;
}

.sf-spinner {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
    border: 2px solid rgba(200, 168, 75, 0.25);
    border-top-color: #c8a84b;
    border-radius: 50%;
    animation: sf-spin 0.7s linear infinite;
}

.search-btn .sf-spinner { display: none; }
.search-btn.is-searching .sf-spinner { display: block; }

@keyframes sf-spin {
    to { transform: rotate(360deg); }
}

.search-busy {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #c8a84b;
    font-size: 0.85rem;
    padding: 4px 0 14px;
}

.search-busy[hidden] { display: none; }

/* Results from the previous search stay on screen during the next one. Fading them says they
   are the old answer without the page going blank and losing the reader's place. */
.search-results-panel.is-searching .search-results-header,
.search-results-panel.is-searching .browse-table {
    opacity: 0.3;
    pointer-events: none;
    transition: opacity 0.15s;
}

@media (prefers-reduced-motion: reduce) {
    .sf-spinner {
        animation: sf-pulse 1.2s ease-in-out infinite;
        border-color: #c8a84b;
    }
}

@keyframes sf-pulse {
    50% { opacity: 0.25; }
}

/* ── Search page layout ───────────────────────────────── */
.search-page-layout {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.search-form-panel {
    width: 420px;
    flex-shrink: 0;
    position: sticky;
    top: 20px;
}

.search-results-panel {
    flex: 1;
    min-width: 0;
}

.search-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.search-results-count {
    font-size: 0.85rem;
    color: #666;
}

.search-pagination {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.82rem;
    color: #777;
}

.search-pagination button {
    background: #1e1e1e;
    border: 1px solid #333;
    color: #aaa;
    padding: 3px 10px;
    border-radius: 3px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.82rem;
}

.search-pagination button:hover:not(:disabled) {
    border-color: #666;
    color: #ddd;
}

.search-pagination button:disabled {
    opacity: 0.35;
    cursor: default;
}

/* ── Misc ─────────────────────────────────────────────── */
.breadcrumb {
    font-size: 0.8rem;
    color: #555;
    margin-bottom: 12px;
}

.breadcrumb a {
    color: #777;
    text-decoration: none;
}

/* ── Slot filter ──────────────────────────────────────── */
.sf-slot-section {
    margin-top: 14px;
    border-top: 1px solid #2a2a2a;
    padding-top: 10px;
}

.sf-slot-section-hdr {
    font-size: 0.78rem;
    color: #666;
    margin-bottom: 6px;
}

.sf-radio-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.sf-radio-row label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.82rem;
    color: #bbb;
    cursor: pointer;
}

.sf-radio-row input[type=radio] {
    accent-color: #c8a84b;
}

.sf-slot-btns {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

.sf-slot-btns button {
    background: #1a1a1a;
    border: 1px solid #333;
    color: #888;
    padding: 2px 8px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.75rem;
    font-family: inherit;
}

.sf-slot-btns button:hover {
    border-color: #555;
    color: #ccc;
}

.sf-slot-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px 8px;
}

.sf-slot-check {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.82rem;
    color: #bbb;
    cursor: pointer;
}

.sf-slot-check input[type=checkbox] {
    accent-color: #c8a84b;
}

/* ── Feat section nav ──────────────────────────────────── */
/* A jumped-to section otherwise lands hard against the top of the viewport. */
.feat-section,
.feat-subsection { scroll-margin-top: 16px; }

.feat-section {
    margin-top: 20px;
}

.feat-section:first-of-type {
    margin-top: 0;
}

.feat-section > summary.feat-category-header,
.feat-subsection > summary.feat-subgroup-header {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
    user-select: none;
}

.feat-section > summary.feat-category-header::before,
.feat-subsection > summary.feat-subgroup-header::before {
    content: "▾";
    font-size: 0.75em;
    color: #666;
    flex-shrink: 0;
    transition: transform 0.15s;
}

.feat-section[open] > summary.feat-category-header::before,
.feat-subsection[open] > summary.feat-subgroup-header::before {
    transform: rotate(0deg);
}

.feat-section:not([open]) > summary.feat-category-header::before,
.feat-subsection:not([open]) > summary.feat-subgroup-header::before {
    transform: rotate(-90deg);
}

.feat-subsection {
    margin-top: 12px;
}

/* ── Feat list ─────────────────────────────────────────── */
.feat-category-header {
    font-size: 1rem;
    font-weight: 600;
    color: #c8a84b;
    border-bottom: 1px solid #333;
    padding-bottom: 4px;
    margin: 0 0 8px;
}

.feat-subgroup-header {
    font-size: 0.9rem;
    font-weight: 600;
    color: #a09060;
    margin: 0 0 6px;
    padding-bottom: 2px;
    border-bottom: 1px solid #2a2a2a;
}

.feat-table {
    width: auto;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 0.84rem;
    margin-bottom: 4px;
}

.feat-col-icon   { width: 40px; }
.feat-col-name   { width: 260px; }
.feat-col-type   { width: 70px; }
.feat-col-prereqs { width: 180px; }
.feat-col-desc   { width: 480px; }
.feat-col-race   { width: 160px; }
.feat-col-racial-tier { width: 340px; }

.feat-table th {
    text-align: left;
    color: #888;
    font-weight: 500;
    padding: 4px 8px;
    border-bottom: 1px solid #2a2a2a;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.feat-table td {
    padding: 8px 8px;
    border-bottom: 1px solid #1e1e1e;
    vertical-align: top;
    color: #ccc;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.feat-table tr:hover td {
    background: #161616;
    color: #ccc;
}

.feat-icon-cell {
    padding: 3px 4px !important;
}

.feat-icon {
    display: block;
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
}

.feat-name {
    font-weight: 500;
    color: #ddd;
    white-space: nowrap;
}

.feat-chargen-badge {
    color: #c8a84b;
    font-size: 0.75rem;
    margin-left: 3px;
    cursor: default;
}

.feat-type {
    color: #888;
    font-size: 0.78rem;
}

.feat-prereqs {
    color: #999;
    font-size: 0.8rem;
}

.feat-desc {
    color: #aaa;
    font-size: 0.8rem;
}

.feat-race-name {
    font-weight: 500;
    color: #ddd;
    white-space: nowrap;
}

.feat-racial-cell {
    color: #aaa;
    font-size: 0.8rem;
}


/* ── Item directory ──────────────────────────────────
   The /Item landing page. Set like the index at the back of a reference book: name, leader, count.
   The count is the half that earns its place — it says whether a category is worth opening. */
.directory { max-width: 1180px; margin: 0 auto; padding: 8px 0 48px; }

.directory-masthead {
    padding: 26px 0 22px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 26px;
}

.directory-masthead h1 { margin: 0; font-size: clamp(1.8rem, 3.4vw, 2.5rem); }

.directory-lede {
    margin: 12px 0 0;
    max-width: 62ch;
    color: var(--text-dim);
    line-height: 1.6;
}

/* Search is the fastest route when the name is already known, so it sits above the taxonomy
   instead of being one entry inside it. */
.directory-search {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    margin-top: 18px;
    padding: 10px 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 4px;
    text-decoration: none;
}

.directory-search:hover { background: var(--surface-lift); border-color: var(--gold); text-decoration: none; }
.directory-search-label { color: var(--text-dim); font-size: 0.85rem; }
.directory-search-cta { color: var(--gold-lit); font-size: 0.85rem; }

.family { margin-bottom: 30px; }

.family-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 26px 34px;
}

.family-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--line);
}

.family-name {
    font-family: var(--display);
    font-size: 1.3rem;
    color: var(--gold-lit);
    text-decoration: none;
}

.family-name:hover { text-decoration: underline; }

.family-total {
    margin-left: auto;
    font-size: 0.78rem;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}

.family-note {
    margin: 8px 0 12px;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--text-faint);
}

.family-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px 34px; }

.family-group-name {
    font-size: 0.66rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 6px;
}

.family-list { list-style: none; margin: 0; padding: 0; }

.family-list a {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 3px 0;
    color: var(--text);
    font-size: 0.85rem;
    text-decoration: none;
}

.family-list a:hover { color: var(--gold-lit); text-decoration: none; }
.family-list a:hover .entry-leader { border-bottom-color: var(--gold); }

.entry-name { white-space: nowrap; }

/* The leader does the joining, so the name and the number never have to be aligned to each other. */
.entry-leader {
    flex: 1;
    min-width: 12px;
    border-bottom: 1px dotted #3A3438;
    transform: translateY(-3px);
}

.entry-count {
    color: var(--text-faint);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}

.family-list a:hover .entry-count { color: var(--text-dim); }

/* ── Feat directory ──────────────────────────────────
   The /Feat landing page. Cards rather than the item directory's index-of-a-book listing, because
   there are eight entries here and not four hundred: with this few, the room goes to saying what
   each tier is instead of to fitting more of them on the screen.

   Narrower than .directory's 1180px. Four cards at 260px is all this page has to lay out, and a
   wrapper wide enough for the item taxonomy would let the second band drift far from the first. */
.feat-directory { max-width: 900px; margin: 0 auto; padding: 8px 0 48px; }

/* The search box in the masthead, and the panel of matches it opens.
   Anchored rather than in flow: the panel is empty until a key is pressed and then changes height
   on every one after, and eight cards jumping down the page each time is worse than covering them.
   The masthead's own rule underneath stays the anchor point either way. */
.feat-search { position: relative; margin-top: 18px; max-width: 480px; }

.feat-search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 12px;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 4px;
    font-size: 0.92rem;
}

.feat-search-input:focus { outline: none; border-color: var(--gold); }

.feat-search-note {
    margin: 6px 0 0;
    min-height: 1em;
    font-size: 0.75rem;
    color: var(--text-faint);
}

/* Closed is the resting state, and it is a class rather than an absence of one so the panel can
   carry its border and shadow without them showing through an empty list. */
.feat-search-results {
    display: none;
    position: absolute;
    z-index: 20;
    top: calc(100% - 20px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 4px;
    list-style: none;
    max-height: 420px;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 4px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
}

.feat-search-results.open { display: block; }

.feat-search-result a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 8px;
    border-radius: 3px;
    text-decoration: none;
}

.feat-search-result a:hover { background: var(--surface-lift); text-decoration: none; }

/* Fixed width whether or not there is an icon, so the names line up down the panel rather than
   stepping in and out around the feats that have no art. */
.feat-search-icon { flex: none; width: 24px; height: 24px; }

.feat-search-name { color: var(--gold-lit); font-size: 0.88rem; }

/* Pushed to the far edge and set quiet, the way a card's count is: it is read second, and only
   when two rows carry the same name. */
.feat-search-where {
    margin-left: auto;
    padding-left: 12px;
    font-size: 0.72rem;
    color: var(--text-faint);
    text-align: right;
}

.feat-band { margin-bottom: 34px; }
.feat-band:last-child { margin-bottom: 0; }

.feat-band-name {
    margin: 0;
    font-size: 1.3rem;
    color: var(--gold-lit);
}

.feat-band-note {
    margin: 6px 0 14px;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--text-faint);
    max-width: 62ch;
}

/* Two rows of two, stated rather than flowed. A band holds exactly four cards, and an auto-fit
   flow at this width fits three of them — leaving the fourth alone on a second row, which reads as
   a leftover rather than as one of a set. Two columns also gives each note the width to sit on two
   lines instead of four, so the pair of bands ends up shorter than the 3+1 flow it replaces. */
.feat-card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

/* Below this a 2-up card is narrower than its own two-line note, so the columns stop earning the
   split and the cards stack. */
@media (max-width: 640px) {
    .feat-card-grid { grid-template-columns: 1fr; }
}

/* An odd last card spans both columns rather than sitting alone in the left one. The comment above
   is about exactly this: a card by itself at the end of a grid reads as a leftover, and the band
   holding five is not a reason to abandon the two columns the other four earn. */
.feat-card-grid > .feat-card:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* Built on the same bones as .home-card — surface, hairline, a left edge that lights on hover —
   so the two landing pages read as the same site. The difference is the count in the header. */
.feat-card {
    display: block;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 2px solid var(--line);
    border-radius: 4px;
    text-decoration: none;
}

.feat-card:hover {
    background: var(--surface-lift);
    text-decoration: none;
}

/* The left edge is the only place a tier's hue appears, and only under the pointer. At rest all
   eight cards sit on the same grey: colouring them permanently would sort the page by difficulty
   band, which is not the split the headings above them make. */
.feat-card[data-band="heroic"]:hover { border-left-color: var(--heroic); }
.feat-card[data-band="epic"]:hover { border-left-color: var(--epic); }
.feat-card[data-band="legendary"]:hover { border-left-color: var(--legendary); }

.feat-card-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 5px;
}

.feat-card-name {
    font-family: var(--display);
    font-size: 1.1rem;
    color: var(--gold-lit);
}

/* Pushed to the far edge and set quiet: it is the second thing read on a card, after the name. */
.feat-card-count {
    margin-left: auto;
    font-size: 0.78rem;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}

.feat-card:hover .feat-card-count { color: var(--text-dim); }

.feat-card-note {
    display: block;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--text-faint);
}

.feat-card:hover .feat-card-note { color: var(--text-dim); }

/* ── Content pack table ──────────────────────────────────
   The same surface and hairlines as .browse-table, deliberately not its density. That one packs a
   few hundred items into a scrollable page and earns its 0.85rem; this is seventy rows read once,
   where the numbers are the point and crowding them saves scrolling nobody minded. */
/* The lede runs to the table's width here rather than the 60ch the other landing pages read at:
   under a full-width table, a paragraph breaking well short of it looks like a mistake. Scoped to
   this page, so .home-lede keeps its reading measure everywhere else. */
.pack-index .home-lede { max-width: none; }

.pack-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.95rem;
}

.pack-table th {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid #444;
    color: #aaa;
    font-weight: bold;
    white-space: nowrap;
}

.pack-table td {
    padding: 9px 14px;
    border-bottom: 1px solid #222;
    vertical-align: middle;
}

.pack-table tbody tr:nth-child(even) { background: #161616; }
.pack-table tbody tr:hover { background: #1e2a1e; }

.pack-table td a {
    color: #b8943e;
    text-decoration: none;
}

.pack-table td a:hover {
    color: #e0bb60;
    text-decoration: underline;
}

/* The release-order number is an index, not a quantity: quiet, narrow, and out of the way of the
   name it sits beside. */
.pack-table .pack-num {
    width: 1%;
    text-align: right;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}

.pack-table .pack-name { width: 40%; }

/* Numbers right-aligned so the digits line up down the column, headers with them — a right-aligned
   column under a left-aligned heading reads as two separate things. */
.pack-table th:nth-child(n+3),
.pack-table .pack-levels,
.pack-table .pack-count {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
    .pack-table { font-size: 0.85rem; }
    .pack-table th, .pack-table td { padding: 7px 8px; }
}

/* The raid tally beside a pack's quest count. Quieter than the count it qualifies — it is a subset
   of that number, not a second one. */
.pack-table .pack-raids {
    color: var(--text-faint);
    margin-left: 3px;
}

/* Only when several items share this page's name. */
.shared-name {
    font-size: 0.78rem;
    color: var(--text-dim);
    background: var(--surface-lift);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 6px 10px;
    margin: 0 0 12px;
}

.shared-name a { color: var(--text-dim); }
.shared-name a:hover { color: var(--text); }
.shared-name-id { font-family: ui-monospace, Menlo, monospace; color: #FFF5C6; }

/* ── One feat's page ──────────────────────────────────────────────────────
   The listing is a wide table; a single feat is a short column, so it reads
   at a text measure rather than across the page. */
.feat-detail { max-width: 46rem; }

.feat-detail-back { margin: 0 0 1rem; font-size: 0.85rem; }
.feat-detail-back a { color: #9a8a6a; text-decoration: none; }
.feat-detail-back a:hover { text-decoration: underline; }

.feat-detail-head { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.25rem; }
.feat-detail-icon { flex: 0 0 auto; border-radius: 4px; }
.feat-detail-head-text h2 { margin: 0 0 0.25rem; }

/* The facts line carries level, BAB and whether it is active — separated by
   middots because they are peers, not a sentence. */
.feat-detail-facts { margin: 0; color: #9a8a6a; font-size: 0.9rem; }
.feat-detail-races { margin: 0.15rem 0 0; color: #9a8a6a; font-size: 0.9rem; }

.feat-detail-desc { margin-bottom: 1.5rem; line-height: 1.55; }

/* The list on /Feat/{slug} when a slug names more than one feat. Each entry leads with where the
   feat is listed, because that is the thing telling the reader which one they meant — the names are
   identical by definition. */
.feat-disambig { list-style: none; margin: 0; padding: 0; }
.feat-disambig-item {
    border-left: 2px solid var(--line);
    padding: 0 0 0 0.9rem;
    margin-bottom: 1.25rem;
}
.feat-disambig-where {
    margin: 0;
    color: var(--text-faint);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.feat-disambig-name { margin: 0.15rem 0 0.35rem; font-size: 1.05rem; }
.feat-disambig-desc { color: var(--text-dim); font-size: 0.9rem; line-height: 1.5; }

.feat-detail-prereqs h3 { margin: 0 0 0.5rem; font-size: 1rem; }
.feat-detail-prereqs ul { margin: 0 0 0.75rem; padding-left: 1.25rem; }
.feat-detail-prereqs li { margin-bottom: 0.2rem; }

/* The racial past-life grid holds descriptions rather than names, so each cell
   carries its own small link out to the feat's page. */
.feat-racial-link {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.8rem;
    color: #9a8a6a;
    text-decoration: none;
}
.feat-racial-link:hover { text-decoration: underline; }