/* ==========================================================================
   UA Living Spec Book — shared components
   Buttons, badges, cards, tables, chips, forms, accordion, stats, avatar,
   progress, toast, modal, empty state, kbd, user menu, TOC, search palette,
   lightbox, before/after slider, plan viewer.
   Consumes tokens from css/tokens.css only — no raw brand hex.
   ========================================================================== */

/* =======================
   Icons (spans built by UA.dom.icon)
   ======================= */
.ua-icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 1.1em;
  height: 1.1em;
}

.ua-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* =======================
   Image fallback (built by UA.dom.img on error)
   ======================= */
.ua-img-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  height: 100%;
  min-height: 7rem;
  padding: 1rem;
  background: var(--ua-bg-raised);
  border: 1px dashed var(--ua-line);
  border-radius: var(--ua-radius);
  color: var(--ua-text-faint);
  font-size: var(--ua-fs-tiny);
  letter-spacing: 0.04em;
  text-align: center;
}

.ua-img-fallback .ua-icon {
  width: 1.4rem;
  height: 1.4rem;
}

/* =======================
   Buttons
   ======================= */
.ua-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.65rem;
  padding: 0.75rem 1.25rem;
  border: 1px solid var(--ua-line);
  border-radius: var(--ua-radius-pill);
  background: transparent;
  color: var(--ua-text-strong);
  font-family: inherit;
  font-size: var(--ua-fs-body);
  font-weight: 200;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition:
    border-color var(--ua-fast) var(--ua-ease),
    background-color var(--ua-fast) var(--ua-ease),
    color var(--ua-fast) var(--ua-ease),
    opacity var(--ua-fast) var(--ua-ease);
}

.ua-btn:hover {
  background: var(--ua-ink);
  border-color: var(--ua-ink);
  color: var(--ua-text-on-ink);
}

.ua-btn--solid {
  background: var(--ua-ink);
  border-color: var(--ua-ink);
  color: var(--ua-text-on-ink);
}

.ua-btn--solid:hover {
  background: var(--ua-ink);
  border-color: var(--ua-ink);
  color: var(--ua-text-on-ink);
  opacity: 0.88;
}

.ua-btn--small {
  min-height: 2.1rem;
  padding: 0.45rem 0.9rem;
  font-size: var(--ua-fs-small);
}

.ua-btn--icon {
  min-width: 2.65rem;
  min-height: 2.65rem;
  padding: 0.5rem;
  border-radius: var(--ua-radius-pill);
}

.ua-btn--icon.ua-btn--small {
  min-width: 2.1rem;
  min-height: 2.1rem;
  padding: 0.35rem;
}

.ua-btn--ghost {
  border-color: transparent;
}

.ua-btn--ghost:hover {
  background: transparent;
  border-color: transparent;
  color: var(--ua-text-strong);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.ua-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.ua-btn:disabled:hover {
  background: transparent;
  border-color: var(--ua-line);
  color: var(--ua-text-strong);
  text-decoration: none;
}

.ua-btn--solid:disabled,
.ua-btn--solid:disabled:hover {
  background: var(--ua-ink);
  border-color: var(--ua-ink);
  color: var(--ua-text-on-ink);
  opacity: 0.45;
}

/* Counter bubble inside buttons */
.ua-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.15rem;
  height: 1.15rem;
  padding-inline: 0.25rem;
  border-radius: var(--ua-radius-pill);
  background: var(--ua-ink);
  color: var(--ua-text-on-ink);
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1;
}

.ua-btn:hover .ua-count,
.ua-btn--solid .ua-count {
  background: var(--ua-bg);
  color: var(--ua-ink);
}

.ua-btn:disabled:hover .ua-count {
  background: var(--ua-ink);
  color: var(--ua-text-on-ink);
}

/* On-ink context: portal header */
.ua-portal-header .ua-btn {
  border-color: var(--ua-line-on-ink);
  color: var(--ua-text-on-ink);
}

.ua-portal-header .ua-btn:hover {
  background: var(--ua-bg);
  border-color: var(--ua-bg);
  color: var(--ua-ink);
}

.ua-portal-header .ua-btn--ghost {
  border-color: transparent;
}

.ua-portal-header .ua-btn--ghost:hover {
  background: transparent;
  border-color: transparent;
  color: var(--ua-text-on-ink);
}

/* =======================
   Badges
   ======================= */
.ua-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid color-mix(in srgb, var(--badge-c, var(--ua-text-muted)) 45%, transparent);
  border-radius: var(--ua-radius-pill);
  background: color-mix(in srgb, var(--badge-c, var(--ua-text-muted)) 9%, transparent);
  color: var(--badge-c, var(--ua-text-muted));
  font-size: var(--ua-fs-tiny);
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
  white-space: nowrap;
}

.ua-badge--proposed,
.ua-badge--concept {
  --badge-c: var(--ua-status-proposed);
}

.ua-badge--approved {
  --badge-c: var(--ua-status-approved);
}

.ua-badge--ordered {
  --badge-c: var(--ua-status-ordered);
}

.ua-badge--delivered {
  --badge-c: var(--ua-status-delivered);
}

.ua-badge--installed,
.ua-badge--done {
  --badge-c: var(--ua-status-installed);
}

.ua-badge--as-built,
.ua-badge--complete {
  --badge-c: var(--ua-status-as-built);
}

.ua-badge--discontinued {
  --badge-c: var(--ua-status-discontinued);
}

.ua-badge--pending,
.ua-badge--current,
.ua-badge--in-progress {
  --badge-c: var(--ua-status-pending);
}

.ua-badge--changes-requested {
  --badge-c: var(--ua-status-changes);
}

.ua-badge--upcoming {
  --badge-c: var(--ua-text-faint);
}

/* =======================
   Cards
   ======================= */
.ua-card {
  background: var(--ua-bg-card);
  border: 1px solid var(--ua-line-soft);
  border-radius: var(--ua-radius-lg);
  padding: var(--ua-s5);
}

/* =======================
   Tables
   ======================= */
.ua-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--ua-line-soft);
  border-radius: var(--ua-radius-lg);
  background: var(--ua-bg-card);
}

.ua-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ua-fs-small);
}

.ua-table th {
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--ua-line);
  color: var(--ua-text-muted);
  font-size: var(--ua-fs-tiny);
  font-weight: 400;
  letter-spacing: var(--ua-tracking-caps);
  text-align: left;
  text-transform: uppercase;
  vertical-align: bottom;
  white-space: nowrap;
}

.ua-table td {
  padding: 0.9rem 1rem;
  border-top: 1px solid var(--ua-line-soft);
  color: var(--ua-text);
  line-height: 1.5;
  vertical-align: top;
}

.ua-table tbody tr:first-child td {
  border-top: 0;
}

.ua-table tbody tr:hover {
  background: rgba(13, 13, 14, 0.03);
}

.ua-table .is-num {
  text-align: right;
  font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif;
  font-variant-numeric: tabular-nums;
}

/* =======================
   Chips (filters)
   ======================= */
.ua-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--ua-line);
  border-radius: var(--ua-radius-pill);
  background: transparent;
  color: var(--ua-text);
  font-family: inherit;
  font-size: var(--ua-fs-tiny);
  font-weight: 300;
  letter-spacing: 0.03em;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  transition:
    border-color var(--ua-fast) var(--ua-ease),
    background-color var(--ua-fast) var(--ua-ease),
    color var(--ua-fast) var(--ua-ease);
}

.ua-chip:hover {
  border-color: var(--ua-line-strong);
  color: var(--ua-text-strong);
}

.ua-chip.is-active {
  background: var(--ua-ink);
  border-color: var(--ua-ink);
  color: var(--ua-text-on-ink);
}

span.ua-chip {
  cursor: default;
}

/* =======================
   Forms
   ======================= */
.ua-field {
  display: block;
}

.ua-field > label {
  display: block;
  color: var(--ua-text-muted);
  font-size: var(--ua-fs-tiny);
  font-weight: 400;
  letter-spacing: var(--ua-tracking-caps);
  text-transform: uppercase;
}

.ua-field .ua-input {
  margin-top: 0.4rem;
}

.ua-input {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--ua-line);
  border-radius: var(--ua-radius);
  background: var(--ua-bg-raised);
  color: var(--ua-text-strong);
  font-family: inherit;
  font-size: var(--ua-fs-body);
  font-weight: 300;
  line-height: 1.4;
  transition: border-color var(--ua-fast) var(--ua-ease);
}

.ua-input::placeholder {
  color: var(--ua-text-faint);
}

.ua-input:focus {
  border-color: var(--ua-ink);
  outline: none;
}

textarea.ua-input {
  min-height: 5.5rem;
  resize: vertical;
}

/* =======================
   Accordion (details-based)
   ======================= */
.ua-accordion {
  border-bottom: 1px solid var(--ua-line-soft);
}

.ua-accordion > summary {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem;
  padding-block: 0.9rem;
  color: var(--ua-text-strong);
  cursor: pointer;
  list-style: none;
}

.ua-accordion > summary::-webkit-details-marker {
  display: none;
}

.ua-accordion > summary .ua-icon {
  color: var(--ua-text-muted);
  transition: transform var(--ua-fast) var(--ua-ease);
}

.ua-accordion[open] > summary .ua-icon {
  transform: rotate(180deg);
}

.ua-accordion__body,
.ua-accordion > div {
  padding-block: 0.25rem 1.1rem;
}

/* =======================
   Stats
   ======================= */
.ua-stat__value {
  display: block;
  font-family: var(--ua-font-display);
  font-size: 1.9rem;
  letter-spacing: 0.02em;
  line-height: 1.05;
  color: var(--ua-text-strong);
}

.ua-stat__label {
  display: block;
  margin-top: 0.3rem;
  color: var(--ua-text-muted);
  font-size: var(--ua-fs-tiny);
  font-weight: 400;
  letter-spacing: var(--ua-tracking-caps);
  text-transform: uppercase;
}

/* =======================
   Avatar
   ======================= */
.ua-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--ua-ink);
  color: var(--ua-text-on-ink);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  user-select: none;
}

.ua-avatar--soft {
  background: var(--ua-bg-card);
  border: 1px solid var(--ua-line);
  color: var(--ua-ink);
}

/* =======================
   Progress
   ======================= */
.ua-progress {
  height: 4px;
  border-radius: var(--ua-radius-pill);
  background: rgba(13, 13, 14, 0.12);
  overflow: hidden;
}

.ua-progress__fill {
  height: 100%;
  border-radius: inherit;
  background: var(--ua-ink);
  transition: width var(--ua-slow) var(--ua-ease);
}

.ua-progress--light {
  background: rgba(255, 255, 255, 0.35);
}

.ua-progress--light .ua-progress__fill {
  background: var(--ua-bg-raised);
}

/* =======================
   Toasts (region created by core.js)
   ======================= */
.ua-toast-region {
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: max-content;
  max-width: calc(100vw - 2rem);
  pointer-events: none;
}

.ua-toast {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 100%;
  padding: 0.7rem 1.2rem;
  border-radius: var(--ua-radius-pill);
  background: var(--ua-ink);
  color: var(--ua-text-on-ink);
  font-size: var(--ua-fs-small);
  font-weight: 300;
  letter-spacing: 0.02em;
  box-shadow: var(--ua-shadow-pop);
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 320ms var(--ua-ease),
    transform 320ms var(--ua-ease);
  pointer-events: auto;
}

.ua-toast.is-in {
  opacity: 1;
  transform: translateY(0);
}

.ua-toast--danger {
  background: var(--ua-status-danger);
}

/* =======================
   Modal (generic overlay + dialog card)
   ======================= */
.ua-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(13, 13, 14, 0.45);
  overflow-y: auto;
}

.ua-modal {
  width: 100%;
  max-width: 34rem;
  padding: var(--ua-s6);
  border: 1px solid var(--ua-line-soft);
  border-radius: var(--ua-radius-lg);
  background: var(--ua-bg-card);
  box-shadow: var(--ua-shadow-pop);
}

/* =======================
   Empty state
   ======================= */
.ua-empty {
  padding: var(--ua-s6);
  border: 1px dashed var(--ua-line);
  border-radius: var(--ua-radius-lg);
  color: var(--ua-text-muted);
  font-size: var(--ua-fs-small);
  text-align: center;
}

/* =======================
   Keyboard hint
   ======================= */
.ua-kbd {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--ua-line);
  border-radius: var(--ua-radius);
  background: var(--ua-bg-raised);
  color: var(--ua-text-muted);
  font-family: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
}

/* =======================
   User menu (details-based)
   ======================= */
.ua-usermenu {
  position: relative;
}

.ua-usermenu > summary {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.3rem 0.75rem 0.3rem 0.4rem;
  border: 1px solid var(--ua-line);
  border-radius: var(--ua-radius-pill);
  color: var(--ua-text-strong);
  font-size: var(--ua-fs-small);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: border-color var(--ua-fast) var(--ua-ease);
}

.ua-usermenu > summary::-webkit-details-marker {
  display: none;
}

.ua-usermenu > summary:hover {
  border-color: var(--ua-line-strong);
}

.ua-portal-header .ua-usermenu > summary {
  border-color: var(--ua-line-on-ink);
  color: var(--ua-text-on-ink);
}

.ua-portal-header .ua-usermenu > summary:hover {
  border-color: rgba(255, 255, 255, 0.35);
}

.ua-usermenu__menu,
.ua-usermenu > div {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 920;
  min-width: 12rem;
  padding: 0.35rem;
  border: 1px solid var(--ua-line);
  border-radius: var(--ua-radius-lg);
  background: var(--ua-bg-card);
  box-shadow: var(--ua-shadow-soft);
}

.ua-usermenu__menu button,
.ua-usermenu__menu a,
.ua-usermenu > div button,
.ua-usermenu > div a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.6rem 0.9rem;
  border: 0;
  border-radius: var(--ua-radius);
  background: none;
  color: var(--ua-text);
  font-family: inherit;
  font-size: var(--ua-fs-small);
  font-weight: 300;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.ua-usermenu__menu button:hover,
.ua-usermenu__menu a:hover,
.ua-usermenu > div button:hover,
.ua-usermenu > div a:hover {
  background: rgba(13, 13, 14, 0.04);
}

/* =======================
   Table of contents
   ======================= */
.toc-sidebar {
  position: sticky;
  top: calc(var(--ua-header-h) + 1rem);
  max-height: calc(100vh - var(--ua-header-h) - 2rem);
  overflow-y: auto;
  padding-block: var(--ua-s6);
  font-size: var(--ua-fs-small);
}

.toc-chapter + .toc-chapter {
  margin-top: var(--ua-s5);
}

.toc-chapter__title {
  margin-bottom: 0.5rem;
  padding-inline: 0.6rem;
  color: var(--ua-text-muted);
  font-size: var(--ua-fs-tiny);
  font-weight: 400;
  letter-spacing: var(--ua-tracking-caps);
  text-transform: uppercase;
}

.toc-link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.6rem;
  border-radius: var(--ua-radius);
  color: var(--ua-text-muted);
  text-decoration: none;
  transition:
    background-color var(--ua-fast) var(--ua-ease),
    color var(--ua-fast) var(--ua-ease);
}

.toc-link:hover {
  background: rgba(13, 13, 14, 0.05);
  color: var(--ua-text-strong);
}

.toc-link.is-active {
  background: var(--ua-bg-card);
  box-shadow: inset 2px 0 0 var(--ua-ink);
  color: var(--ua-text-strong);
}

.toc-link__num {
  color: var(--ua-text-faint);
  font-size: var(--ua-fs-tiny);
  font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif;
  font-variant-numeric: tabular-nums;
}

.toc-link__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ua-status-pending);
}

.toc-progress {
  margin-top: var(--ua-s5);
  padding-inline: 0.6rem;
  color: var(--ua-text-muted);
  font-size: var(--ua-fs-tiny);
  letter-spacing: 0.04em;
}

/* TOC drawer (mobile) — hidden until opened */
.toc-overlay {
  position: fixed;
  inset: 0;
  z-index: 940;
  background: rgba(13, 13, 14, 0.45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--ua-fast) var(--ua-ease),
    visibility 0s linear var(--ua-fast);
}

.toc-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--ua-fast) var(--ua-ease);
}

/* Below 1100px the sidebar itself becomes the drawer panel
   (toc.js toggles .is-open on the nav, .toc-overlay, and .toc-fab). */
@media (max-width: 1100px) {
  .toc-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 950;
    width: min(20rem, 86vw);
    max-height: none;
    margin: 0;
    padding: var(--ua-s5);
    background: var(--ua-bg);
    box-shadow: var(--ua-shadow-pop);
    overflow-y: auto;
    transform: translateX(-105%);
    visibility: hidden;
    transition:
      transform var(--ua-slow) var(--ua-ease),
      visibility 0s linear var(--ua-slow);
  }

  .toc-sidebar.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform var(--ua-slow) var(--ua-ease);
  }
}

.toc-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 950;
  width: min(20rem, 86vw);
  padding: var(--ua-s5);
  background: var(--ua-bg);
  box-shadow: var(--ua-shadow-pop);
  overflow-y: auto;
  transform: translateX(-105%);
  visibility: hidden;
  transition:
    transform var(--ua-slow) var(--ua-ease),
    visibility 0s linear var(--ua-slow);
}

.toc-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform var(--ua-slow) var(--ua-ease);
}

.toc-drawer .toc-sidebar {
  position: static;
  max-height: none;
  padding-block: var(--ua-s4);
}

.toc-fab {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  z-index: 930;
  display: none;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.65rem;
  padding: 0.7rem 1.15rem;
  border: 1px solid var(--ua-ink);
  border-radius: var(--ua-radius-pill);
  background: var(--ua-ink);
  color: var(--ua-text-on-ink);
  font-family: inherit;
  font-size: var(--ua-fs-small);
  font-weight: 200;
  letter-spacing: 0.02em;
  box-shadow: var(--ua-shadow-pop);
  cursor: pointer;
}

@media (max-width: 1100px) {
  .toc-fab {
    display: inline-flex;
  }
}

/* =======================
   Search palette
   ======================= */
.srch-overlay {
  position: fixed;
  inset: 0;
  z-index: 980;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 1rem 1rem;
  background: rgba(13, 13, 14, 0.45);
}

.srch-panel {
  width: 100%;
  max-width: 38rem;
  border: 1px solid var(--ua-line-soft);
  border-radius: var(--ua-radius-lg);
  background: var(--ua-bg-card);
  box-shadow: var(--ua-shadow-pop);
  overflow: hidden;
}

.srch-inputwrap,
.srch-input-row,
.srch-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.35rem 1rem;
  border-bottom: 1px solid var(--ua-line-soft);
  color: var(--ua-text-muted);
}

.srch-input {
  flex: 1;
  min-width: 0;
  padding: 0.8rem 0;
  border: 0;
  background: none;
  color: var(--ua-text-strong);
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 300;
}

.srch-input::placeholder {
  color: var(--ua-text-faint);
}

.srch-input:focus {
  outline: none;
}

.srch-results {
  max-height: 50vh;
  margin: 0;
  padding: 0 0 0.4rem;
  list-style: none;
  overflow-y: auto;
}

.srch-group,
.srch-group__label,
.srch-group > label {
  display: block;
  padding: 0.8rem 1rem 0.3rem;
  color: var(--ua-text-muted);
  font-size: var(--ua-fs-tiny);
  font-weight: 400;
  letter-spacing: var(--ua-tracking-caps);
  text-transform: uppercase;
}

.srch-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.65rem 1rem;
  border: 0;
  background: none;
  color: var(--ua-text-muted);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--ua-fast) var(--ua-ease);
}

.srch-item:hover,
.srch-item.is-selected {
  background: rgba(13, 13, 14, 0.05);
}

.srch-item__label {
  display: block;
  color: var(--ua-text-strong);
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.35;
}

.srch-item__detail {
  display: block;
  color: var(--ua-text-muted);
  font-size: var(--ua-fs-tiny);
  line-height: 1.35;
}

.srch-item__section {
  color: var(--ua-text-faint);
  font-size: var(--ua-fs-tiny);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.srch-empty {
  padding: var(--ua-s6);
  color: var(--ua-text-muted);
  font-size: var(--ua-fs-small);
  text-align: center;
}

.srch-none {
  display: block;
  padding: var(--ua-s3) var(--ua-s4);
}

.srch-none .ua-empty {
  border: 0;
  padding: var(--ua-s4);
}

.srch-hint {
  padding: 0.6rem 1rem;
  border-top: 1px solid var(--ua-line-soft);
  font-size: var(--ua-fs-tiny);
}

/* =======================
   Lightbox
   ======================= */
.lbx {
  position: fixed;
  inset: 0;
  z-index: 990;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(13, 13, 14, 0.92);
}

.lbx figure {
  margin: 0;
  display: grid;
  justify-items: center;
}

.lbx__img {
  max-width: 86vw;
  max-height: 78vh;
  object-fit: contain;
  box-shadow: var(--ua-shadow-soft);
}

.lbx__caption {
  margin-top: 0.9rem;
  max-width: 60ch;
  color: var(--ua-text-on-ink-muted);
  font-size: var(--ua-fs-small);
  font-weight: 300;
  text-align: center;
}

.lbx__close,
.lbx__prev,
.lbx__next {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--ua-line-on-ink);
  border-radius: 50%;
  background: transparent;
  color: var(--ua-text-on-ink);
  cursor: pointer;
  transition: background-color var(--ua-fast) var(--ua-ease);
}

.lbx__close:hover,
.lbx__prev:hover,
.lbx__next:hover {
  background: rgba(255, 255, 255, 0.1);
}

.lbx__close {
  top: 1rem;
  right: 1rem;
}

.lbx__prev {
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
}

.lbx__next {
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
}

.lbx__count {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  color: var(--ua-text-on-ink-muted);
  font-size: var(--ua-fs-tiny);
  letter-spacing: 0.08em;
  font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif;
  font-variant-numeric: tabular-nums;
}

/* =======================
   Before / after slider
   ======================= */
.ba {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: var(--ua-radius-lg);
  background: var(--ua-bg-raised);
  overflow: hidden;
  user-select: none;
  touch-action: none;
}

.ba:focus-within {
  outline: 2px solid var(--ua-ink);
  outline-offset: 2px;
}

.ba__before,
.ba__after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ba__after {
  clip-path: inset(0 0 0 var(--ba-pos, 50%));
}

.ba__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--ba-pos, 50%);
  z-index: 2;
  width: 2px;
  background: #fff;
  transform: translateX(-50%);
  pointer-events: none;
}

.ba__handle-grip,
.ba__grip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: #fff;
  color: var(--ua-ink);
  box-shadow: var(--ua-shadow-pop);
}

.ba__label-before,
.ba__label-after {
  position: absolute;
  top: 0.75rem;
  z-index: 2;
  padding: 0.25rem 0.7rem;
  border-radius: var(--ua-radius-pill);
  background: rgba(13, 13, 14, 0.55);
  color: var(--ua-text-on-ink);
  font-size: var(--ua-fs-tiny);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
}

.ba__label-before {
  left: 0.75rem;
}

.ba__label-after {
  right: 0.75rem;
}

.ba__range {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  opacity: 0;
  cursor: ew-resize;
}

.ba__caption {
  margin-top: 0.6rem;
  color: var(--ua-text-muted);
  font-size: var(--ua-fs-small);
}

/* =======================
   Plan viewer
   ======================= */
.plv {
  padding: 0;
  border: 1px solid var(--ua-line-soft);
  border-radius: var(--ua-radius-lg);
  background: var(--ua-bg-card);
  overflow: hidden;
}

.plv__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--ua-line-soft);
}

.plv__title {
  color: var(--ua-text-strong);
  font-weight: 400;
}

.plv__stage {
  position: relative;
  height: 420px;
  background: var(--ua-bg-raised);
  overflow: hidden;
  cursor: grab;
  touch-action: none;
}

.plv__stage.is-panning {
  cursor: grabbing;
}

.plv__img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  transform-origin: 0 0;
}

.plv__controls {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.plv__controls .ua-btn {
  background: var(--ua-bg);
  box-shadow: var(--ua-shadow-soft);
}

.plv__notes {
  padding: 0.8rem 1rem;
  border-top: 1px solid var(--ua-line-soft);
  color: var(--ua-text-muted);
  font-size: var(--ua-fs-small);
}

/* =======================
   Responsive
   ======================= */
@media (max-width: 768px) {
  .plv__stage {
    height: 320px;
  }

  .lbx__img {
    max-width: 92vw;
  }

  .lbx__prev {
    left: 0.5rem;
  }

  .lbx__next {
    right: 0.5rem;
  }
}

@media (max-width: 480px) {
  .ua-card {
    padding: var(--ua-s4);
  }

  .ua-modal {
    padding: var(--ua-s5);
  }

  .ua-table th {
    padding: 0.65rem 0.75rem;
  }

  .ua-table td {
    padding: 0.7rem 0.75rem;
  }

  .srch-overlay {
    padding-top: 6vh;
  }
}

/* =======================
   Reduced motion
   ======================= */
@media (prefers-reduced-motion: reduce) {
  .ua-btn,
  .ua-chip,
  .ua-input,
  .ua-count,
  .ua-toast,
  .ua-progress__fill,
  .ua-accordion > summary .ua-icon,
  .ua-usermenu > summary,
  .toc-link,
  .toc-drawer,
  .toc-drawer.is-open,
  .srch-item,
  .lbx__close,
  .lbx__prev,
  .lbx__next {
    transition: none !important;
    animation: none !important;
  }
}