/* Application layer over visual-design/union-archive-style (tokens.css + components/bundle.css, served at /ua).
   Component classes (.ua-btn, .ua-tag, .ua-chip, .ua-table, .ua-sheet, .ua-callout, .ua-panes, .ua-section …)
   come from the bundle; this file only adds page chrome, the browser/editor layouts and
   the typography of rendered entries. Colours, type and spacing are tokens, never literals. */

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--surface-100); }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--surface-100); color: var(--ink); font: 15px/23px var(--font-sans); }
main { flex: 1; }
a { color: var(--signal); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
a.ua-btn:hover, a.ua-tag:hover { text-decoration: none; }
h1, h2, h3, h4 { margin: 0; }
code { font: 400 13px/20px var(--font-mono); }
abbr { text-decoration: none; border-bottom: 1px dotted var(--line-strong); }
mark { background: var(--surface-300); color: var(--accent); font-weight: 600; }
.ua-faint { color: var(--ink-faint); }
.ua-muted { color: var(--ink-muted); }
.ua-only-narrow { display: none; }
.ua-empty { margin: 0; font: 500 12px/16px var(--font-mono); letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-muted); }
.ua-emptystate { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-5) 0; }
.ua-empty--auto { display: none; }
.ua-reports:not(:has(li)) + .ua-empty--auto { display: block; }

/* inputs outside SearchField */
input:not([type=checkbox]):not([type=search]), select, textarea { font: 400 14px/20px var(--font-mono); color: var(--ink); background: var(--surface-200); border: 1px solid var(--line-strong); border-radius: 0; padding: 8px 10px; min-width: 0; }
input[type=checkbox] { accent-color: var(--accent); width: 14px; height: 14px; margin: 0; }
textarea { width: 100%; resize: vertical; }
label { display: flex; flex-direction: column; gap: 4px; }
kbd.ua-kbd { background: transparent; }

/* ── chrome ──────────────────────────────────────────────────────────────── */
.ua-class { display: flex; justify-content: space-between; align-items: center; padding: 2px var(--space-5); background: var(--surface-000); border-bottom: 3px solid var(--accent); }
.ua-top { display: flex; align-items: center; gap: var(--space-5); padding: 0 var(--space-5); min-height: 56px; background: var(--surface-000); border-bottom: 1px solid var(--line); position: relative; z-index: 30; }
.ua-brand { display: inline-flex; align-items: center; }
.ua-brand:hover { text-decoration: none; }
.ua-brand__logo { display: block; height: 25px; width: auto; }
.ua-menus { display: flex; align-items: center; }
.ua-menu { position: relative; }
.ua-menu__btn, .ua-menu__link { display: inline-block; padding: 18px 12px; background: none; border: 0; border-radius: 0; color: var(--ink-muted); font: 500 12px/16px var(--font-mono); letter-spacing: 1.2px; text-transform: uppercase; cursor: pointer; transition: color 120ms linear, background 120ms linear; }
.ua-menu:hover .ua-menu__btn, .ua-menu:focus-within .ua-menu__btn, .ua-menu__link:hover { color: var(--ink); background: var(--surface-300); text-decoration: none; }
.ua-menu__pop { display: none; position: absolute; top: 100%; left: 0; min-width: 220px; padding: var(--space-1); background: var(--surface-200); border: 1px solid var(--line-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-overlay); }
.ua-menu:hover .ua-menu__pop, .ua-menu:focus-within .ua-menu__pop { display: block; }
.ua-menu__pop a { display: block; padding: 6px 12px; color: var(--ink); font: 400 13px/20px var(--font-sans); }
.ua-menu__pop a:hover, .ua-menu__pop a[aria-current] { background: var(--surface-300); text-decoration: none; }
.ua-menu__pop a[aria-current] { color: var(--accent); }
.ua-gsearch { position: relative; margin-left: auto; width: min(320px, 30vw); }
.ua-gsearch .ua-search__box { margin: 0; }
.ua-suggest { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--surface-200); border: 1px solid var(--line-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-overlay); overflow: hidden; z-index: 40; }
.ua-suggest:empty { display: none; }
.ua-suggest a { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); padding: 6px 12px; color: var(--ink); }
.ua-suggest a:hover, .ua-suggest a[aria-selected=true] { background: var(--surface-300); text-decoration: none; }
.ua-suggest small { white-space: nowrap; }
.ua-suggest__none { padding: 8px 12px; margin: 0; }
.ua-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); padding: var(--space-5); border-top: 1px solid var(--ink-muted); background: var(--surface-000); }
.ua-foot p { margin: 0; }

.ua-page { width: 100%; max-width: 1200px; margin: 0 auto; padding: var(--space-6) var(--space-5) var(--space-7); }
.ua-page--wide { max-width: 1680px; padding-top: var(--space-4); }
.ua-narrow { max-width: 920px; }
.ua-page > h1 { margin-bottom: var(--space-4); }
.ua-lede { max-width: 68ch; color: var(--ink-muted); margin: var(--space-3) 0 var(--space-5); }

/* ── landing ─────────────────────────────────────────────────────────────── */
.ua-masthead { padding: var(--space-6) 0 var(--space-7); }
.ua-masthead .display-xl { margin: var(--space-3) 0 0; font-size: clamp(44px, 9vw, 96px); line-height: 1; }
.ua-hero-search { max-width: 640px; }
.ua-hero-search .ua-search__input { font-size: 16px; padding: 14px 0; }
.ua-hero-search .ua-btn { align-self: center; }
.ua-index { list-style: none; margin: 0; padding: 0; columns: 2 320px; column-gap: var(--space-6); }
.ua-index li { break-inside: avoid; padding: var(--space-2) 0; border-bottom: 1px solid var(--line); }
.ua-index a { display: flex; justify-content: space-between; gap: var(--space-3); color: var(--ink); }
.ua-index__name { font: 600 15px/23px var(--font-sans); }
.ua-index a:hover .ua-index__name { color: var(--signal); }
.ua-index__blurb { display: block; color: var(--ink-muted); font: 400 13px/20px var(--font-sans); }
.ua-section__body { max-width: none; }
.ua-section--table { grid-template-columns: 200px 1fr; }
.ua-section--table .ua-section__title { font-size: 28px; line-height: 32px; }
@media (max-width: 700px) { .ua-section--table { grid-template-columns: 1fr; } }

/* ── search ──────────────────────────────────────────────────────────────── */
.ua-searchform { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-end; margin-bottom: var(--space-5); }
.ua-searchform .ua-search { flex: 1 1 320px; }
.ua-select select { min-width: 160px; height: 38px; }
.ua-results { list-style: none; margin: var(--space-3) 0 0; padding: 0; }
.ua-results li { padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.ua-results__title { font: 600 18px/26px var(--font-sans); }
.ua-results__meta { display: inline-flex; gap: var(--space-2); align-items: center; margin-left: var(--space-3); }
.ua-results__snippet { margin: var(--space-1) 0 0; color: var(--ink-muted); font: 400 13px/20px var(--font-sans); }

/* ── list browser ────────────────────────────────────────────────────────── */
#browse { grid-template-columns: 240px minmax(320px, 1fr) minmax(360px, 1.1fr); }
.ua-pane--filters { position: sticky; top: var(--space-4); max-height: calc(100vh - 2 * var(--space-4)); overflow: auto; padding-right: var(--space-2); }
.ua-pane--entry { position: sticky; top: var(--space-4); max-height: calc(100vh - 2 * var(--space-4)); overflow: auto; }
.ua-sheetnav { display: none; justify-content: space-between; align-items: center; }
.ua-filter { border-bottom: 1px solid var(--line); padding-bottom: var(--space-2); }
.ua-filter > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 0 0 var(--space-2); color: var(--ink-muted); }
.ua-filter > summary::-webkit-details-marker { display: none; }
.ua-filter > summary::after { content: "+"; font-family: var(--font-mono); }
.ua-filter[open] > summary::after { content: "−"; }
.ua-filter .ua-label { border: 0; padding: 0; margin: 0; width: auto; display: inline; }
.ua-filter__n { margin-left: var(--space-2); padding: 0 6px; background: var(--accent); color: var(--on-accent); }
.ua-filter__chips { max-height: 320px; overflow: auto; }
.ua-chip { text-decoration: none; }
.ua-chip:hover { text-decoration: none; }
.ua-chip--off { color: var(--ink-muted); text-decoration: line-through; }
.ua-chip--off:hover { text-decoration: line-through; }
.ua-chip--off .ua-chip__box { border-color: var(--status-danger); background: var(--status-danger); clip-path: polygon(0 0, 100% 100%, 100% 0, 0 100%); }
.ua-filter__hint { margin: 0; }
.ua-results-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-3); flex-wrap: wrap; }
.ua-results-head__actions { display: flex; gap: var(--space-2); }
.ua-active { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.ua-active__chip { color: var(--ink); cursor: pointer; }
.ua-active__chip--exc { color: var(--status-danger); border-color: var(--status-danger); }
#results .ua-table-wrap { max-height: calc(100vh - 220px); }
.ua-table .ua-table__mark { width: 16px; }
.ua-row { position: relative; }
.ua-row--on .ua-table__mark::before { content: "▸"; }
.ua-row--on .c-title { font-weight: 600; }
.ua-row--on td:nth-child(2) { font-weight: 400; }
.ua-row__link { color: var(--ink); }
.ua-row__link::after { content: ""; position: absolute; inset: 0; }     /* the whole row is the link */
.ua-row:has(.ua-row__link:focus-visible) { outline: 2px solid var(--focus); outline-offset: -2px; }
.ua-row__link:focus-visible { outline: 0; }
.ua-row .ua-dots { vertical-align: baseline; }
.ua-more td { text-align: center; padding: var(--space-4); }
.ua-table__sort { display: inline-block; }
.ua-table__sort:hover { text-decoration: none; }
.ua-placeholder { padding: var(--space-6) var(--space-4); border: 1px solid var(--line); background: var(--surface-200); }
.ua-placeholder p { max-width: 46ch; }

@media (max-width: 900px) {
  .ua-only-narrow { display: inline-flex; }
  .ua-page { padding: var(--space-4) var(--space-3) var(--space-6); }
  .ua-top { flex-wrap: wrap; gap: var(--space-2); padding: var(--space-2) var(--space-3); }
  .ua-menus { order: 3; flex-wrap: wrap; width: 100%; }
  .ua-menu__btn, .ua-menu__link { padding: 8px; }
  .ua-gsearch { width: auto; flex: 1; }
  #browse { grid-template-columns: 1fr; }
  #browse .ua-pane--filters, #browse .ua-pane--entry { display: none; }
  #browse.show-filters .ua-pane--filters, #browse.show-entry .ua-pane--entry { display: flex; position: fixed; inset: 0; z-index: 50; max-height: none; background: var(--surface-100); padding: var(--space-4); overflow: auto; }
  .ua-sheetnav { display: flex; }
  #results .ua-table-wrap { max-height: none; }
}

/* ── rendered entries: statblock ─────────────────────────────────────────── */
.ua-sheet__bar { align-items: baseline; }
.ua-sheet__ref { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: none; letter-spacing: 0; }
.ua-sheet__title { overflow-wrap: anywhere; }
.ua-sheet__title--long { font-size: 28px; line-height: 32px; }
.ua-sheet__tags { align-items: center; }
.ua-sheet--compact .ua-sheet__title { font-size: 28px; line-height: 32px; }
.ua-sheet--compact .ua-sheet__head { padding: var(--space-3) var(--space-4); }
.ua-meta__item--wide { grid-column: 1 / -1; border-right: 0; border-top: 1px solid var(--line); }
.ua-meta__item { min-width: 0; }
.ua-meta dd { overflow-wrap: anywhere; }
.ua-sheet__body { max-width: 68ch; }
.ua-sheet__body p { margin: var(--space-2) 0; }
.ua-sheet__body a.ref { color: var(--signal); }
.ua-sheet__body a.ref:hover { text-decoration: underline; }
.ref-dead { color: inherit; }
.ua-sechead, .entry-head { margin: var(--space-4) 0 var(--space-1); padding-bottom: var(--space-1); border-bottom: 1px solid var(--line); font: 500 12px/16px var(--font-mono); letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-muted); }
.entry-box { margin: var(--space-3) 0; padding: var(--space-3) var(--space-4); background: var(--surface-300); border: 1px solid var(--line-strong); }
.entry-box > :first-child { margin-top: 0; } .entry-box > :last-child { margin-bottom: 0; }
.box-title { font: 500 11px/16px var(--font-mono); letter-spacing: 1.2px; text-transform: uppercase; color: var(--accent); margin-bottom: var(--space-1); }
.ua-sheet blockquote { margin: var(--space-3) 0; padding: 0 0 0 var(--space-4); border-left: 1px solid var(--line-strong); color: var(--ink-muted); font-style: italic; }
.ua-sheet blockquote footer { margin-top: var(--space-1); font: 500 11px/16px var(--font-mono); font-style: normal; text-transform: uppercase; letter-spacing: 1.2px; }
.entry-list { margin: var(--space-2) 0; padding-left: var(--space-5); }
.table-wrap { overflow-x: auto; margin: var(--space-3) 0; border: 1px solid var(--line); background: var(--surface-100); }
.entry-table { width: 100%; border-collapse: collapse; font: 400 13px/20px var(--font-sans); }
.entry-table caption { padding: var(--space-2) var(--space-3); text-align: left; font: 500 11px/16px var(--font-mono); letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-muted); }
.entry-table th { padding: 6px var(--space-3); text-align: left; white-space: nowrap; background: var(--surface-300); border-bottom: 1px solid var(--line-strong); font: 500 11px/16px var(--font-mono); letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-muted); }
.entry-table td { padding: 6px var(--space-3); border-bottom: 1px solid var(--line); vertical-align: top; min-width: 3.5em; }
.entry-table tr.grp th { background: var(--surface-200); white-space: normal; color: var(--ink); }
.ua-variant, .ua-xref { margin: 0; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--line); }
.ua-variant summary, .ua-xref summary { cursor: pointer; color: var(--ink-muted); }
.ua-xref h3, .ua-xref h4 { margin: 0 0 var(--space-1); }
.ua-xref__row { margin: 0; }
.ua-xref__group { margin: var(--space-2) 0 0 var(--space-3); }
.ua-xref ul { margin: 0; padding: 0; list-style: none; }
.ua-xref li { display: flex; gap: var(--space-2); align-items: baseline; }
.ua-xref li .ua-mono { font-size: 11px; }
.ua-sheet__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); }
.ua-sheet__foot a { color: var(--signal); }
.ua-sheet__tools { display: inline-flex; gap: var(--space-3); }
.ua-sheet__actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--line); }
.ua-report { flex: 1 1 100%; }
.ua-report > summary { list-style: none; cursor: pointer; width: max-content; }
.ua-report > summary::-webkit-details-marker { display: none; }
.ua-form { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-3); padding: var(--space-3); background: var(--surface-100); border: 1px solid var(--line); }
.ua-form__actions { display: flex; gap: var(--space-2); }
.ua-crumbs { margin-bottom: var(--space-3); }
.ua-record .ua-sheet { margin-top: var(--space-2); }
.ua-record .ua-sheet__body { max-width: none; }
.ua-record .ua-sheet__body > *, .ua-record .ua-meta { max-width: 68ch; }
.ua-record .ua-sheet__body .table-wrap { max-width: none; }

.ua-tip { position: fixed; display: none; z-index: 60; max-height: 70vh; overflow: hidden; box-shadow: var(--shadow-overlay); pointer-events: auto; }

/* ── tabs as links (the Tabs component is for buttons) ───────────────────── */
a.ua-tab { display: inline-block; text-decoration: none; }
a.ua-tab:hover { text-decoration: none; }
.ua-tab--aside { margin-left: auto; color: var(--ink-faint); }
.ua-tabs { flex-wrap: wrap; margin: var(--space-4) 0; }

/* ── feedback ────────────────────────────────────────────────────────────── */
.ua-reports { list-style: none; margin: var(--space-4) 0 0; padding: 0; }
.ua-report-item { padding: var(--space-3) var(--space-4); border: 1px solid var(--line); background: var(--surface-200); margin-bottom: var(--space-3); }
.ua-report-item--resolved, .ua-report-item--dismissed { color: var(--ink-muted); }
.ua-report-item__head { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; }
.ua-report-item__when { margin-left: auto; }
.ua-report-item__msg { margin: var(--space-2) 0; white-space: pre-wrap; }
.ua-report-item__sugg { margin: var(--space-2) 0; padding: var(--space-2) var(--space-3); border: 1px solid var(--line); background: var(--surface-100); white-space: pre-wrap; font-style: normal; color: var(--ink-muted); }
.ua-report-item__sugg .ua-label { display: block; }
.ua-report-item__actions { display: flex; gap: var(--space-2); }

/* ── record editor ───────────────────────────────────────────────────────── */
.ua-overlay { position: fixed; inset: 0; z-index: 60; display: flex; justify-content: center; align-items: flex-start; padding: var(--space-7) var(--space-4); overflow: auto; background: color-mix(in srgb, var(--surface-000) 80%, transparent); }
.ua-modal { width: min(820px, 100%); display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4) var(--space-5); background: var(--surface-200); border: 1px solid var(--line-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-overlay); }
.ua-modal__head, .ua-modal__foot { display: flex; align-items: center; gap: var(--space-2); }
.ua-modal__head h2 { flex: 1; }
.ua-modal fieldset { margin: 0; padding: var(--space-3); border: 1px solid var(--line); min-width: 0; }
.ua-modal legend { padding: 0 var(--space-2); }
.ed-setup { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--accent); }
.ed-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-3); }
.ed-prop { display: flex; gap: var(--space-2); margin-bottom: var(--space-2); }
.ed-prop [name=pl] { flex: 0 0 34%; }
.ed-prop [name=pv] { flex: 1; }
.ed-entries { display: flex; flex-direction: column; gap: var(--space-2); max-height: 46vh; overflow: auto; padding-right: var(--space-1); }
.ed-grid--2 { grid-template-columns: 1fr 1fr; }
.ed-grid--4 { grid-template-columns: 2fr 1fr 1fr 1fr; }
.ed-source { display: flex; gap: var(--space-2); margin-bottom: var(--space-2); }
.ed-source [name=sr_src] { flex: 2; }
.ed-source [name=sr_page], .ed-source [name=sr_folio] { flex: 1; min-width: 6rem; }
.ed-entry { flex-direction: row; align-items: flex-start; gap: var(--space-2); }
.ed-entry textarea { flex: 1; }
.ed-entry__ctl { display: flex; flex-direction: column; gap: var(--space-1); }
.ed-n { flex: 0 0 28px; text-align: right; padding-top: 8px; color: var(--ink-faint); }
.ed-pw { max-width: 20rem; }
.ed-err { color: var(--status-danger); font: 500 12px/16px var(--font-mono); }
@media (max-width: 640px) { .ed-grid { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) { .ua-menu__btn, .ua-menu__link { transition: none; } }