/*
 * CUSTOS visual convergence layer
 *
 * This file is the final shared presentation layer for the existing product.
 * It intentionally contains no page behavior: route markup, form names,
 * mutation controls, and existing JS hooks remain unchanged.
 */
:root {
  --c-bg: #f6f8f6;
  --c-surface: #ffffff;
  --c-surface-muted: #f3f7f4;
  --c-surface-warm: #faf9f5;
  --c-ink: #1d2b24;
  --c-ink-soft: #3f5449;
  --c-muted: #6b7b72;
  --c-muted-soft: #8a9890;
  --c-line: #dce6df;
  --c-line-strong: #cbd8d0;
  --c-green: #205a40;
  --c-green-strong: #174b34;
  --c-green-soft: #eaf3ed;
  --c-gold: #ba995c;
  --c-warm-soft: #f8f1e7;
  --c-warm-line: #eadcc7;
  --c-danger: #9b4038;
  --c-danger-soft: #fff6f4;
  --c-radius: 14px;
  --c-radius-small: 9px;
  --c-shadow: 0 8px 24px rgba(29, 54, 43, .045);
  --c-shadow-soft: 0 3px 14px rgba(29, 54, 43, .035);

  /* Keep legacy selectors on the same semantic palette. */
  --bg: var(--c-bg);
  --surface: var(--c-surface);
  --surface-soft: var(--c-surface-muted);
  --line: var(--c-line);
  --line-strong: var(--c-line-strong);
  --text: var(--c-ink);
  --muted: var(--c-muted);
  --green: #2c8055;
  --green-dark: var(--c-green-strong);
  --green-soft: var(--c-green-soft);
  --shadow: var(--c-shadow);
  --radius: var(--c-radius);
  --custos-green: #143325;
  --custos-green-2: var(--c-green);
  --custos-gold: var(--c-gold);
  --custos-page: var(--c-bg);
}

html { background: var(--c-bg); }
body {
  color: var(--c-ink);
  background: var(--c-bg);
  font-family: "Manrope", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.45;
  overflow-x: clip;
}

/* One shell geometry and one content rail. */
.app-shell {
  grid-template-columns: 244px minmax(0, 1fr);
  grid-template-rows: 72px minmax(0, 1fr);
  min-height: 100vh;
}
.topbar {
  min-height: 72px;
  height: 72px;
  gap: 20px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, .96);
  border-bottom-color: var(--c-line);
}
.custos-brand {
  width: 244px;
  min-width: 244px;
  flex: 0 0 244px;
}
.custos-brand-link { width: 100%; }
.custos-lockup {
  width: 100%;
  max-width: none;
  height: 52px;
  object-fit: contain;
  object-position: left center;
}
.global-search {
  height: 42px;
  max-width: 560px;
  border-color: var(--c-line);
  border-radius: var(--c-radius-small);
  background: #fbfcfb;
}
.global-search input { color: var(--c-ink); }
.global-search button {
  border: 0;
  border-radius: 8px;
  padding: 7px 12px;
  background: var(--c-green-soft);
  color: var(--c-green-strong);
  font-weight: 600;
}
.top-actions { gap: 10px; }
.profile-card {
  min-height: 42px;
  padding: 4px 8px 4px 4px;
  border-radius: 11px;
}
.profile-card:hover { background: var(--c-surface-muted); }
.profile-card b { font-weight: 600; }
.profile-card small { color: var(--c-muted); }
.avatar { width: 34px; height: 34px; background: var(--c-green); font-size: 13px; font-weight: 600; }

.sidebar {
  padding: 16px 12px;
  background: rgba(255, 255, 255, .82);
  border-right-color: var(--c-line);
}
.nav-item {
  min-height: 42px;
  margin-bottom: 3px;
  padding: 9px 12px;
  border-radius: 9px;
  gap: 10px;
  color: #506158;
  font-size: 14px;
  font-weight: 500;
}
.nav-item > .nav-icon { width: 21px; height: 21px; flex-basis: 21px; }
.nav-item .ui-icon { width: 18px; height: 18px; stroke-width: 1.7; }
.nav-item:hover { background: #f1f6f3; }
.nav-item.active {
  color: var(--c-green-strong);
  background: var(--c-green-soft);
  box-shadow: inset 2px 0 0 var(--c-gold);
}
.sidebar-foot { border-top-color: var(--c-line); }
.sidebar-foot > a:first-child { font-weight: 600; }

.content {
  width: 100%;
  max-width: 1540px;
  padding: 30px clamp(20px, 3vw, 42px) 44px;
  justify-self: center;
}
.minimal-content { max-width: 1540px; }
.page-heading,
.ui-page-heading,
.compact-heading,
.admin-header,
.work-hero,
.detail-hero,
.people-page-heading {
  margin-bottom: 22px;
}
.page-heading h1,
.ui-page-heading h1,
.admin-header h1,
.work-title h1,
.detail-hero h1,
.people-page-heading h1 {
  color: var(--c-ink);
  font-size: clamp(30px, 3.1vw, 42px);
  line-height: 1.08;
  letter-spacing: -.025em;
  font-weight: 600;
  text-wrap: balance;
}
.page-heading p,
.ui-page-heading p,
.compact-heading p,
.admin-header p,
.work-title p,
.detail-hero p { color: var(--c-muted); }
.eyebrow,
.u02-eyebrow,
.p09r-a5-eyebrow {
  color: #587468;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
}
.breadcrumb,
.u03-detail-breadcrumb { color: var(--c-muted); }
.breadcrumb a,
.u03-detail-breadcrumb a { color: var(--c-ink-soft); }
.breadcrumb a:hover,
.u03-detail-breadcrumb a:hover { color: var(--c-green-strong); }

/* Shared object framing: meaningful sections only, with one boundary language. */
.card,
.filter-card,
.table-card,
.meta-card,
.materials-card,
.work-panel-card,
.related-entity-card,
.facts-card,
.notes-card,
.readiness-card,
.admin-edit-card,
.performance-detail-card,
.account-identity-card,
.account-access-card,
.calendar-month,
.calendar-agenda,
.calendar-subscribe-card,
.u03-performance-hero,
.u03-side-card,
.u03-side-section,
.u03-program-history,
.p09r-a5-item {
  border-color: var(--c-line);
  border-radius: var(--c-radius);
  background: var(--c-surface);
  box-shadow: var(--c-shadow);
}
.card { padding: 18px; }
.filter-card { padding: 15px; box-shadow: var(--c-shadow-soft); }
.table-card { box-shadow: var(--c-shadow-soft); }
.section-heading,
.panel-head { margin-bottom: 12px; }
.section-heading h2,
.panel-head h2,
.card h2 { color: var(--c-ink); font-weight: 600; }
.section-heading > span,
.panel-head > span,
.list-meta,
.subtle { color: var(--c-muted); }
.empty-row,
.empty-state,
.compact-empty {
  color: var(--c-muted);
  line-height: 1.5;
}
.compact-empty { padding: 22px; }

/* One control family. */
select, input, textarea {
  color: var(--c-ink);
  border-color: var(--c-line-strong);
  border-radius: var(--c-radius-small);
  background: #fff;
}
select, input { height: 42px; }
textarea { min-height: 112px; }
select:focus, input:focus, textarea:focus {
  border-color: #80ad91;
  box-shadow: 0 0 0 3px rgba(32, 90, 64, .1);
}
.button {
  min-height: 36px;
  padding: 8px 13px;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--c-radius-small);
  background: #fff;
  color: var(--c-ink-soft);
  font-size: 13px;
  font-weight: 550;
  box-shadow: none;
}
.button:hover { border-color: #a9c0b2; background: #f8fbf9; }
.button.primary {
  border-color: var(--c-green);
  background: var(--c-green);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 3px 10px rgba(32, 90, 64, .14);
}
.button.primary:hover { border-color: var(--c-green-strong); background: var(--c-green-strong); }
.button.ghost { color: var(--c-green-strong); background: #fff; }
.button.small { min-height: 32px; padding: 6px 11px; font-size: 12px; }
.button.big { min-height: 42px; padding: 10px 15px; }
.icon-button,
.icon-action,
.button.icon-only {
  border-radius: var(--c-radius-small);
  color: var(--c-green-strong);
}
.icon-button:hover,
.icon-action:hover { background: var(--c-green-soft); }
.action-icon,
.button .ui-icon,
.icon-action .action-icon { width: 16px; height: 16px; }

/* Metadata is text first; pills are reserved for status and categorical values. */
.chip,
.status-badge,
.mat,
.calendar-badge,
.u02-kind-badge {
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 550;
}
.chip.success,
.status-badge.ok,
.status-badge.is-confirmed { background: var(--c-green-soft); color: var(--c-green-strong); border-color: #cfe3d5; }
.chip.muted,
.status-badge.neutral { background: #f4f7f5; color: var(--c-muted); border-color: var(--c-line); }
.status-badge.warn,
.status-badge.is-review { background: var(--c-warm-soft); color: #80612c; border-color: var(--c-warm-line); }
.status-badge.danger { background: var(--c-danger-soft); color: var(--c-danger); border-color: #edd4d0; }

/* Editorial tables and result rows. */
.catalog-table th,
.catalog-table td { border-bottom-color: var(--c-line); }
.catalog-table th {
  color: var(--c-muted);
  background: #fbfcfb;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .01em;
}
.catalog-table td { color: var(--c-ink-soft); }
.catalog-table tbody tr:hover { background: #fbfdfc; }
.title-link { color: var(--c-ink); font-weight: 650; }
.title-link:hover { color: var(--c-green-strong); }
.table-footer { border-top-color: var(--c-line); }
.pagination a,
.pagination span,
.pagination-page,
.pagination-edge { border-radius: var(--c-radius-small); color: var(--c-ink-soft); }
.pagination .current,
.pagination-page.active { border-color: #cfe3d5; background: var(--c-green-soft); color: var(--c-green-strong); }

/* Index families share the Library's light row/card vocabulary. */
.program-card,
.person-card-v2,
.person-work-row,
.program-mini-card,
.rehearsal-row,
.calendar-event,
.u02-event-card,
.u02-upcoming-card {
  border-color: var(--c-line);
  border-radius: var(--c-radius-small);
  box-shadow: none;
}
.program-card:hover,
.person-card-v2:hover,
.person-work-row:hover,
.program-mini-card:hover,
.calendar-event:hover,
.u02-event-card:hover { border-color: #b6cdbd; background: #fbfdfc; }
.people-card-grid { gap: 14px; grid-auto-rows: 286px; }
.person-card-v2 { height: 286px; padding: 13px; }
.person-card-v2.canonical { border-color: #b9d9c3; box-shadow: var(--c-shadow-soft); }
.person-card-v2.review { border-color: #dfc28c; box-shadow: var(--c-shadow-soft); }
.person-card-copy strong { color: var(--c-ink); font-size: 1rem; font-weight: 600; }
.person-card-roles { font-weight: 500; }
.person-work-list-mini a { border-color: var(--c-line); border-radius: 6px; }
.program-card-grid { gap: 14px; }
.program-catalog-card { border-color: var(--c-line); border-radius: var(--c-radius); box-shadow: var(--c-shadow-soft); }
.program-catalog-body h3 { color: var(--c-ink); font-weight: 600; }
.program-cover { border-bottom: 1px solid rgba(255,255,255,.14); }
.rehearsal-date { background: var(--c-green-soft); color: var(--c-green-strong); }
.calendar-tab { border-radius: var(--c-radius-small); color: var(--c-ink-soft); font-weight: 550; }
.calendar-tab.active { background: var(--c-green-soft); color: var(--c-green-strong); border-color: #cfe3d5; }
.calendar-day { border-radius: var(--c-radius-small); }
.calendar-badge.rehearsal { background: var(--c-green-soft); color: var(--c-green-strong); }

/* Detail-page family: editorial hero, quiet facts, clear related sections. */
.work-hero,
.detail-hero { align-items: flex-start; }
.work-title h1,
.detail-hero h1 { margin-bottom: 7px; }
.work-title p,
.detail-hero p { font-size: 14px; }
.work-page .work-panel-card,
.work-page .material-card,
.work-page .work-material-card { border-radius: var(--c-radius); }
.person-detail-hero { gap: 22px; }
.person-detail-portrait { border-radius: var(--c-radius); }
.person-detail-identity h1 { font-weight: 600; }
.performance-detail-card { padding: 22px; }
.performance-detail-card h1 { font-size: clamp(28px, 3vw, 40px); font-weight: 600; line-height: 1.08; }
.performance-detail-description { color: var(--c-muted); line-height: 1.55; }
.u03-performance-hero { border-radius: 18px; box-shadow: var(--c-shadow); }
.u03-performance-summary h1 { color: var(--c-ink); font-weight: 600; }
.u03-performance-facts b { color: var(--c-ink-soft); font-weight: 600; }
.u03-performance-facts small,
.u03-performance-description { color: var(--c-muted); }
.u03-overview-grid article { border-color: var(--c-line); background: #fbfcfb; }
.u03-overview-grid strong { color: var(--c-green-strong); font-weight: 600; }
.u03-side-card,
.u03-side-section { box-shadow: var(--c-shadow-soft); }
.u03-program-history { box-shadow: var(--c-shadow); }
.p09r-a5-item { border-radius: var(--c-radius-small); box-shadow: none; }
.p09r-a5-performers { background: var(--c-surface-muted); }

/* Editors stay compact and structured, without becoming a separate admin product. */
.admin-edit-card,
.u03-admin-zone .admin-edit-card,
.editor-related-zone,
.editor-danger-zone { padding: 18px; }
.admin-edit-card .panel-head,
.u03-admin-zone .panel-head { min-height: 36px; }
.editor-form-section { padding: 4px 0 13px; border-bottom-color: var(--c-line); }
.editor-form-section h3 { color: var(--c-green-strong); font-weight: 600; }
.work-editor-section { padding: 16px 18px; }
.work-editor-section-head { min-height: 38px; }
.work-editor-toggle { font-weight: 600; }
.work-editor-section-icon { color: var(--c-green); }
.work-editor-card .work-editor-footer,
.work-editor-card .work-editor-actions { min-height: 52px; }
.editor-danger-zone,
.work-danger-zone { border-color: #ecd8d3; background: var(--c-danger-soft); }
.admin-form-actions { gap: 8px; }

/* Normal user-facing feedback uses one quiet geometry. */
.flash,
.alert,
.notice,
.error-message { border-radius: var(--c-radius-small); }

@media (max-width: 1180px) {
  .app-shell { grid-template-columns: 1fr; grid-template-rows: 64px minmax(0, 1fr); }
  .topbar { min-height: 64px; height: 64px; }
  .custos-brand { width: 220px; min-width: 220px; flex-basis: 220px; }
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 30;
    width: min(292px, 84vw);
    padding: 13px;
    transform: translateX(-105%);
    transition: transform .2s ease;
    box-shadow: 12px 0 30px rgba(29, 54, 43, .12);
  }
  body.mobile-nav-open .sidebar,
  .app-shell.nav-open .sidebar,
  .app-shell:has(.sidebar.is-open) .sidebar { transform: translateX(0); }
  .sidebar-mobile-head { display: flex; align-items: center; gap: 8px; min-height: 54px; padding: 2px 4px 10px; }
  .sidebar-mobile-head button { width: 34px; height: 34px; margin-left: auto; border: 0; background: transparent; color: var(--c-ink-soft); }
  .sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 29; border: 0; background: rgba(20, 36, 29, .22); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
  body.mobile-nav-open .sidebar-backdrop,
  .app-shell.nav-open .sidebar-backdrop,
  .app-shell:has(.sidebar.is-open) .sidebar-backdrop { opacity: 1; pointer-events: auto; }
  .mobile-nav-toggle { display: inline-grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px; border: 1px solid var(--c-line-strong); border-radius: var(--c-radius-small); background: #fff; color: var(--c-green-strong); }
  .sidebar-foot { display: grid; }
  .content { grid-column: 1; grid-row: 2; max-width: none; padding: 26px clamp(16px, 3vw, 30px) 38px; }
  .minimal-content { grid-column: 1; grid-row: 1 / -1; }
  .two-column-page,
  .programs-layout,
  .people-layout,
  .calendar-product-layout { grid-template-columns: minmax(0, 1fr); }
  .right-column { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filter-card { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .library-filter { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  :root { --topbar: 56px; }
  body { padding-bottom: 60px; font-size: 14px; }
  .app-shell { grid-template-rows: 56px minmax(0, 1fr); }
  .topbar { min-height: 56px; height: 56px; padding: 7px 9px; gap: 8px; }
  .custos-brand { width: 36px; min-width: 36px; flex-basis: 36px; }
  .custos-lockup { display: none; }
  .custos-mark { display: block; width: 30px; height: 30px; object-fit: contain; }
  .global-search, .top-actions { display: none; }
  .content { padding: 16px 12px 26px; overflow-x: clip; }
  .mobile-bottom-nav {
    position: fixed;
    z-index: 28;
    left: 0;
    right: 0;
    bottom: 0;
    height: 60px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border-top: 1px solid var(--c-line);
    background: rgba(255,255,255,.98);
    box-shadow: 0 -5px 18px rgba(29, 54, 43, .07);
  }
  .mobile-bottom-nav a,
  .mobile-bottom-nav button { min-width: 0; gap: 3px; padding: 5px 2px; color: #586960; font-size: 10px; font-weight: 500; }
  .mobile-bottom-nav .ui-icon { width: 19px; height: 19px; }
  .mobile-bottom-nav .active { margin: 5px 4px; border-radius: var(--c-radius-small); color: var(--c-green-strong); background: var(--c-green-soft); box-shadow: inset 0 0 0 1px #cfe3d5; }
  .page-heading,
  .ui-page-heading,
  .compact-heading,
  .admin-header,
  .work-hero,
  .detail-hero,
  .people-page-heading { display: grid; gap: 12px; margin-bottom: 18px; }
  .page-heading h1,
  .ui-page-heading h1,
  .admin-header h1,
  .work-title h1,
  .detail-hero h1,
  .people-page-heading h1 { font-size: 28px; line-height: 1.1; }
  .hero-actions { justify-content: flex-start; }
  .hero-actions .button { width: fit-content; }
  .stats-grid,
  .member-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .stat-card { min-width: 0; padding: 11px; border-radius: var(--c-radius-small); }
  .stat-card b { font-size: 19px; }
  .stat-icon { width: 32px; height: 32px; }
  .filter-card,
  .library-filter { grid-template-columns: 1fr; gap: 10px; padding: 12px; }
  .filter-card label { min-width: 0; }
  .card { padding: 14px; }
  .right-column { grid-template-columns: 1fr; }
  .people-card-grid { grid-template-columns: 1fr; grid-auto-rows: 286px; }
  .program-card-grid { grid-template-columns: 1fr; }
  .program-card { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 13px; }
  .program-card .program-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; }
  .calendar-month,
  .calendar-agenda,
  .calendar-subscribe-card { padding: 13px; }
  .calendar-month-head { display: grid; gap: 10px; }
  .calendar-month-actions { justify-content: flex-start; }
  .calendar-month-product .calendar-day { min-height: 68px; padding: 7px; }
  .calendar-day-preview { display: none; }
  .calendar-event-product,
  .calendar-event-product:not(.performance) { grid-template-columns: 38px minmax(0, 1fr); gap: 9px; padding: 11px; }
  .calendar-event-product .calendar-event-icon { width: 38px; height: 38px; border-radius: 10px; }
  .calendar-event-poster { grid-column: 2; width: 110px; height: 70px; }
  .calendar-event-actions { grid-column: 2; justify-items: start; grid-auto-flow: column; }
  .u03-performance-hero { grid-template-columns: 1fr; gap: 14px; padding: 12px; border-radius: 16px; }
  .u03-performance-poster { width: 100%; max-height: 250px; aspect-ratio: 16 / 9; border-radius: 12px; }
  .u03-performance-summary { padding: 3px 3px 5px; }
  .u03-performance-summary h1 { font-size: 25px; line-height: 1.12; }
  .u03-performance-facts { display: grid; gap: 10px; margin-top: 15px; }
  .u03-overview-grid { gap: 6px; }
  .u03-overview-grid article { padding: 9px 8px; }
  .u03-overview-grid strong { font-size: 18px; }
  .u03-hero-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .u03-hero-actions .button:first-child:last-child,
  .u03-hero-actions .button:nth-child(3) { grid-column: 1 / -1; }
  .u03-detail-aside { grid-template-columns: 1fr; }
  .performance-detail-card { padding: 15px; }
  .performance-detail-card h1 { font-size: 28px; }
  .person-detail-hero { grid-template-columns: 1fr; gap: 14px; }
  .person-detail-portrait { width: 116px; height: 142px; border-radius: var(--c-radius-small); }
  .work-about-facts { grid-template-columns: minmax(90px, .8fr) minmax(0, 1.2fr); gap: 9px 12px; }
  .work-editor-section { padding: 12px; }
  .admin-edit-card,
  .u03-admin-zone .admin-edit-card,
  .editor-related-zone,
  .editor-danger-zone { padding: 14px; }
  .work-editor-section-head { align-items: start; }
  .work-editor-section-head > span { font-size: 11px; }
  .editor-form-grid-2,
  .admin-edit-form .admin-form-grid { grid-template-columns: 1fr; }
  .admin-form-actions .button { flex: 1 1 auto; }
  .work-material-uniform-body { padding: 9px; }
  .table-footer { align-items: flex-start; gap: 10px; flex-direction: column; }
  .catalog-mobile-row { padding: 12px 10px; }
}

@media (max-width: 390px) {
  .content { padding-inline: 10px; }
  .page-heading h1,
  .ui-page-heading h1,
  .admin-header h1,
  .work-title h1,
  .detail-hero h1 { font-size: 26px; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat-card { padding: 9px; }
  .stat-card small { font-size: 10px; }
  .button { padding-inline: 11px; }
  .u03-performance-summary h1 { font-size: 24px; }
}

/* Structural convergence primitives. These classes make the existing
 * domain templates share one product grammar without changing their data or
 * interaction contracts. */
.admin-module-nav,
.detail-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  margin: 0 0 22px;
  padding: 0 0 7px;
  overflow-x: auto;
  border-bottom: 1px solid var(--c-line);
  scrollbar-width: thin;
  scrollbar-color: var(--c-line-strong) transparent;
  overscroll-behavior-x: contain;
}
.admin-module-nav .members-tab,
.detail-tabs .members-tab {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 7px 10px;
  border: 0;
  border-radius: var(--c-radius-small);
  background: transparent;
  color: var(--c-muted);
  font-size: 12px;
  font-weight: 600;
}
.admin-module-nav .members-tab:hover,
.detail-tabs .members-tab:hover { background: var(--c-surface-muted); color: var(--c-ink-soft); }
.admin-module-nav .members-tab.active,
.detail-tabs .members-tab.active { background: var(--c-green-soft); color: var(--c-green-strong); }
.detail-breadcrumb { margin-bottom: 14px; }
.editorial-hero { min-width: 0; }
.detail-section-heading { align-items: baseline; }
.detail-section-heading h2 { letter-spacing: -.01em; }
.detail-summary-strip { border-radius: var(--c-radius); box-shadow: var(--c-shadow-soft); }
.detail-related-section {
  border: 1px solid var(--c-line);
  border-radius: var(--c-radius);
  background: var(--c-surface);
  box-shadow: var(--c-shadow-soft);
}
.detail-related-section .section-heading,
.detail-related-section .p09r-a5-heading { margin-bottom: 14px; }
.detail-related-section .section-heading h2,
.detail-related-section .p09r-a5-heading h2 { font-weight: 600; }
.work-page .work-about-card {
  gap: 18px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.work-page .work-about-card > .detail-section-heading {
  min-height: 44px;
  padding: 8px 0 12px;
  border-bottom: 1px solid var(--c-line);
}
.work-page .work-about-facts,
.work-page .work-about-description {
  padding: 18px;
  border: 1px solid var(--c-line);
  border-radius: var(--c-radius);
  background: var(--c-surface);
  box-shadow: var(--c-shadow-soft);
}
.work-page .work-about-facts dt {
  color: var(--c-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .025em;
  text-transform: uppercase;
}
.work-page .work-about-facts dd { font-weight: 500; }
.work-page .work-about-description { margin: 0; }
.work-page .work-about-description h3 { color: var(--c-ink); font-weight: 600; }
.work-page .detail-related-section { padding: 18px; }
.person-detail-hero .person-detail-actions,
.program-hero .hero-actions { align-items: flex-start; }
.program-detail-page .program-items-card,
.program-detail-page .program-domain-detail { box-shadow: var(--c-shadow-soft); }
.program-detail-page .program-items-card .section-head { margin-bottom: 12px; }
.detail-page-family .u03-side-section,
.detail-page-family .u03-side-card { box-shadow: var(--c-shadow-soft); }
.detail-page-family .u03-program-history { box-shadow: var(--c-shadow-soft); }

/* One editor framework for the mature work editor and the older performance
 * editor. Forms, names, actions and mutation semantics remain unchanged. */
.editor-surface,
.editor-secondary-section,
.editor-destructive-section { border-radius: var(--c-radius); }
.editor-surface .panel-head,
.editor-secondary-section .panel-head,
.editor-destructive-section .panel-head {
  min-height: 44px;
  align-items: baseline;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--c-line);
}
.editor-surface .editor-form-section { padding: 12px 0 16px; }
.editor-surface .editor-form-section h3 { margin-bottom: 9px; color: var(--c-ink); font-size: 14px; }
.editor-surface .admin-form-actions,
.editor-secondary-section .admin-form-actions,
.editor-destructive-section .admin-form-actions { min-height: 52px; padding-top: 14px; }
.editor-secondary-section,
.editor-destructive-section { box-shadow: var(--c-shadow-soft); }
.editor-secondary-section { border: 1px solid var(--c-line); background: var(--c-surface); }
.editor-destructive-section { border-color: #ecd8d3; }

/* The index families keep their domain layouts but inherit the same rhythm. */
.ui-index-hero { margin-bottom: 18px; }
.ui-index-filters { margin-bottom: 18px; }
.ui-results-section,
.catalog-table-card { min-width: 0; }
.ui-results-section > .result-section-heading,
.ui-results-section > .section-heading { min-height: 42px; }
.ui-index-family .u02-section-head { align-items: baseline; }
.ui-index-family .u02-filter-panel { box-shadow: var(--c-shadow-soft); }
.ui-index-family .u02-year-head { border-bottom-color: var(--c-line); }

/* Material type remains legible through icon/title semantics, not rainbow
 * circular backgrounds. */
.materials-inline a.mat {
  width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border-color: var(--c-line);
  border-radius: 8px;
  background: var(--c-surface-muted);
  color: var(--c-green-strong);
}
.materials-inline a.mat.pdf,
.materials-inline a.mat.audio,
.materials-inline a.mat.voices,
.materials-inline a.mat.pronunciation,
.materials-inline a.mat.movements,
.materials-inline a.mat.player {
  border-color: var(--c-line);
  background: var(--c-surface-muted);
  color: var(--c-green-strong);
}
.materials-inline a.mat:hover { border-color: #a9c0b2; background: var(--c-green-soft); }

@media (max-width: 760px) {
  .content { padding-bottom: 96px; }
  body:has(.editor-surface) { padding-bottom: 0; }
  body:has(.editor-surface) .mobile-bottom-nav { display: none; }
  .admin-module-nav,
  .detail-tabs { margin-inline: 0; padding-right: 24px; box-shadow: inset -24px 0 18px -19px var(--c-bg); }
  .detail-tabs .members-tab,
  .admin-module-nav .members-tab { min-height: 36px; }
  .work-page .work-about-facts,
  .work-page .work-about-description,
  .work-page .detail-related-section { padding: 14px; }
  .work-page .work-about-facts { grid-template-columns: minmax(82px, .75fr) minmax(0, 1.25fr); gap: 9px 12px; }
  .editor-surface .panel-head,
  .editor-secondary-section .panel-head,
  .editor-destructive-section .panel-head { min-height: 42px; }
  .editor-surface .admin-form-actions,
  .editor-secondary-section .admin-form-actions,
  .editor-destructive-section .admin-form-actions { align-items: stretch; flex-wrap: wrap; }
  .editor-surface .admin-form-actions .button,
  .editor-secondary-section .admin-form-actions .button,
  .editor-destructive-section .admin-form-actions .button { flex: 1 1 auto; }
  .ui-index-family .u02-filter-panel { box-shadow: none; }
  .work-tabs.detail-tabs { gap: 5px; scrollbar-width: thin; }
  .work-tabs.detail-tabs .work-tab { min-width: 34px; padding-inline: 7px; justify-content: center; }
  .work-tabs.detail-tabs .work-tab:not(.active) span { display: none; }
  .work-tabs.detail-tabs .work-tab.active { padding-inline: 8px; }
}