/* Record + research page UX (UX-100 items 23–40). Builds on ux-base.css. */

/* 23 sticky record header */
.ux-rh {
  position: sticky; top: var(--ux-topbar-h, 0px); z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  margin: 0 0 16px; padding: 8px 12px; background: var(--ux-paper); border-bottom: 1px solid var(--ux-line); box-shadow: var(--ux-shadow);
}
.ux-rh-main { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; flex: 1 1 260px; min-width: 0; }
.ux-rh-name { margin: 0; font-weight: 700; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.ux-rh-meta { margin: 0; color: var(--ux-muted); font-size: 13px; overflow-wrap: anywhere; }
.ux-rh-pill { font-size: 13px; padding: 4px 10px; }
.ux-rh-pill--warn { background: var(--ux-amber-soft); color: var(--ux-amber); }
.ux-rh-pill--ok { background: var(--ux-green-soft); color: var(--ux-green); }
.ux-rh-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ux-rh-actions .ux-btn { min-height: var(--ux-tap); font-size: 14px; padding: 0 12px; }
.ux-rh-status:empty { display: none; }
.ux-rh-status { font-size: 13px; color: var(--ux-muted); }
.ux-rh-toggle { display: none; }
@media (max-width: 699px) {
  .ux-rh { flex-wrap: nowrap; }
  .ux-rh[data-open] { flex-wrap: wrap; }
  .ux-rh-meta, .ux-rh-pill { display: none; }
  .ux-rh-toggle { display: inline-flex; flex: 0 0 auto; }
  .ux-rh-actions { display: none; width: 100%; }
  .ux-rh[data-open] .ux-rh-actions { display: flex; }
}

/* Page section navs stick below the record header instead of under it. */
.wtc-detail:has(.ux-rh) .wtc-detail-nav, .public-property-page:has(.ux-rh) .wtc-detail-nav,
.public-property-page:has(.ux-rh) .public-property-section-nav { top: calc(var(--ux-topbar-h, 0px) + var(--ux-rh-h, 0px)); }
:target, [id^="fact-"] { scroll-margin-top: calc(var(--ux-topbar-h, 0px) + var(--ux-rh-h, 0px) + 16px); }

/* 24 summary, 36 buyer box */
.ux-summary { margin: 0 0 16px; }
.ux-summary h2, .ux-buyer h2 { margin: 0 0 10px; font-size: 18px; }
.ux-summary dl { margin: 0; display: grid; gap: 10px; }
.ux-summary-row { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: 4px 12px; }
.ux-summary-row dt { font-weight: 700; }
.ux-summary-row dd { margin: 0; display: grid; gap: 4px; overflow-wrap: anywhere; }
.ux-cite { color: var(--ux-muted); }
@media (max-width: 480px) { .ux-summary-row { grid-template-columns: 1fr; } }
.ux-buyer { margin: 0 0 16px; padding: 14px 18px; border-radius: var(--ux-radius); background: var(--ux-amber-soft); border: 1px solid #f0d9ae; }
.ux-buyer ul { margin: 8px 0 0; padding-left: 20px; }

/* 30 source chips */
.ux-src-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 2px 10px; border-radius: 999px; background: var(--ux-cream); color: var(--ux-ink); font-size: 13px; text-decoration: none; overflow-wrap: anywhere; }
a.ux-src-chip { min-height: 32px; }
a.ux-src-chip:hover { text-decoration: underline; }
a.ux-src-chip:focus-visible, .ux-fact-btn:focus-visible, .ux-tab:focus-visible, .ux-lightbox-trigger:focus-visible { outline: 3px solid var(--ux-blue); outline-offset: 2px; }
.ux-src-chip--registry { background: var(--ux-blue-soft); color: var(--ux-blue); }
.ux-src-chip--court { background: var(--ux-red-soft); color: var(--ux-red); }
.ux-src-chip--company { background: var(--ux-green-soft); color: var(--ux-green); }
.ux-src-icon { flex: 0 0 auto; }

/* 31/32 fact tools */
.ux-fact-tools { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ux-fact-btn { min-height: var(--ux-tap); padding: 0 12px; border: 1px solid var(--ux-line); border-radius: 999px; background: var(--ux-paper); font: inherit; font-size: 13px; cursor: pointer; }
.ux-pop { margin-top: 6px; padding: 10px 14px; border: 1px solid var(--ux-line); border-radius: var(--ux-radius-sm); background: var(--ux-paper); box-shadow: var(--ux-shadow); font-size: 14px; }
.ux-pop p { margin: 0 0 4px; }
.ux-fact-highlight { background: #fff7d6; outline: 3px solid #e6b800; outline-offset: 2px; border-radius: 6px; }

/* 26 tabs */
.ux-tabs { display: flex; gap: 4px; margin: 0 0 16px; border-bottom: 1px solid var(--ux-line); overflow-x: auto; }
.ux-tab { min-height: var(--ux-tap); padding: 0 16px; border: 0; border-bottom: 3px solid transparent; background: none; font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; }
.ux-tab[aria-selected="true"] { border-bottom-color: var(--ux-green); color: var(--ux-green); }

/* 27 timeline */
.ux-tl { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ux-tl li { display: grid; grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr); gap: 4px 12px; padding-bottom: 12px; border-bottom: 1px solid var(--ux-line); }
.ux-tl li.is-upcoming { border-left: 3px solid var(--ux-amber); padding-left: 8px; }
.ux-tl time { font-weight: 700; }
.ux-tl p { margin: 4px 0; overflow-wrap: anywhere; }
@media (max-width: 480px) { .ux-tl li { grid-template-columns: 1fr; } }

/* 28 sources disagree */
.ux-disagree-cols { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.ux-disagree-cols > div { padding: 12px; border: 1px solid var(--ux-line); border-radius: var(--ux-radius-sm); display: grid; gap: 6px; align-content: start; }
.ux-disagree-value { margin: 0; font-weight: 700; overflow-wrap: anywhere; }

/* 29 not covered, 37 last checked, 38 related, 39 section report */
.ux-not-covered ul { columns: 2 14rem; margin: 8px 0 12px; }
.ux-checked { margin: 0 0 8px; color: var(--ux-muted); font-size: 13px; }
.ux-checked.is-stale { color: var(--ux-amber); font-weight: 700; }
.ux-related ul { padding-left: 20px; }
.ux-related li { margin: 0 0 8px; }
.ux-related a { display: inline-block; min-height: 32px; padding: 4px 0; }
.ux-section { position: relative; }
.ux-section-report { float: right; margin: 0 0 8px 8px; font-size: 13px; color: var(--ux-muted); }
@media (max-width: 480px) { .ux-section-report { float: none; margin: 0 0 8px; } }

/* 35 lightbox */
.ux-lightbox-trigger { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.ux-lightbox { max-width: min(960px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 16px; border: 0; border-radius: var(--ux-radius); }
.ux-lightbox::backdrop { background: rgba(0, 0, 0, .7); }
.ux-lightbox img { display: block; max-width: 100%; max-height: 70vh; margin: 0 auto 12px; object-fit: contain; }
.ux-lightbox p { margin: 0 0 6px; overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) {
  .ux-rh, .ux-pop, .ux-lightbox { transition: none; animation: none; }
}

/* 40 print */
@media print {
  .ux-rh, .ux-tabs, .ux-fact-tools, .ux-pop, .ux-section-report, .ux-not-covered button, .public-property-actions,
  .public-property-tools, .feature-actions, .wtc-detail-nav, .wtc-detail-rail, .public-property-section-nav,
  .public-property-correction, header.topbar, nav[aria-label="Primary"], .site-nav, footer.site-footer { display: none !important; }
  [role="tabpanel"][hidden] { display: none !important; }
  #ux-panel-record { display: block !important; }
  details > *, details:not([open]) > * { display: block !important; }
  details summary { list-style: none; font-weight: 700; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; overflow-wrap: anywhere; }
  .ux-src-chip { background: none; padding: 0; }
  .ux-card, .ux-buyer, .wtc-detail-section, .public-property-group { box-shadow: none; break-inside: avoid; }
  body { background: #fff; color: #000; }
}