/* ---- 16f. Related list & list/detail scaffolds (PARITY B03) ----------------
 * The shared "Panel" frame below is the reference's `Panel` (glass-card +
 * bordered headline header + optional right action). It is composed by the
 * list/detail blocks (related-list, summary-table, record-hub, record-fields)
 * so they all read as one surface. `.block-panel.glass-card` (element+class)
 * overrides the glass-card's default padding regardless of load order. */

.block-panel.glass-card {
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--ta-r-xl);
  /* A clipping pane in the app-main flex column must not be shrinkable, or a
     tall page crops its contents (see section.gauge). */
  flex-shrink: 0;
}

.block-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid var(--ta-border);
}

/* The reference's `text-headline` — the panel heading face. */
.block-panel-title {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: -0.014em;
}

.block-panel-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

/* Header action: the "+" icon link (related-list) or text links (record-hub). */
.block-panel-action {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--ta-accent);
  font-size: 0.75rem;
  font-weight: 500;
}

.block-panel-action:hover {
  color: var(--ta-accent-hover);
  text-decoration: underline;
}

.block-panel-action svg {
  width: 0.875rem;
  height: 0.875rem;
}

.block-panel-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* A muted centred empty state inside a panel (the reference's compact Empty). */
.block-empty {
  display: flex;
  flex: 1;
  min-height: 8rem;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2rem;
  text-align: center;
  color: var(--ta-muted);
  font-size: 0.875rem;
}

.block-empty-link {
  color: var(--ta-accent);
  font-weight: 500;
}

.block-empty-link:hover {
  text-decoration: underline;
}

/* ---- Related list (the reference's Panel + divide-y rows) ---------------- */

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

.related-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 1rem;
}

.related-item+.related-item {
  border-top: 1px solid var(--ta-border);
}

.related-body {
  min-width: 0;
  flex: 1;
}

.related-title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ta-text);
  font-size: 0.875rem;
  font-weight: 500;
}

a.related-title:hover {
  color: var(--ta-accent);
  text-decoration: underline;
}

.related-sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ta-muted);
  font-size: 0.75rem;
}

.related-meta {
  flex: none;
  color: var(--ta-muted);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

/* ---- Summary table (the reference's Panel + pivot table) ----------------- */

.summary-table-scroll {
  min-height: 0;
  flex: 1;
  overflow-x: auto;
}

.summary-table-el {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.summary-th-row {
  border-bottom: 1px solid var(--ta-border);
  text-align: left;
}

.summary-th {
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ta-muted);
}

.summary-th.right {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.summary-tr {
  border-bottom: 1px solid var(--ta-border);
}

.summary-tr:last-child {
  border-bottom: 0;
}

.summary-td {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}

.summary-td.strong {
  font-weight: 500;
}

.summary-td.right {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.summary-tfoot-tr {
  border-top: 1px solid var(--ta-border);
  background: color-mix(in oklab, var(--ta-surface-2) 40%, transparent);
  font-weight: 600;
}

/* ---- Split detail (the reference's two-column record layout) ------------- */

.split-detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 1024px) {
  .split-detail {
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
  }
}

.split-card.glass-card {
  padding: 0;
  overflow: hidden;
  border-radius: var(--ta-r);
}

.split-main {
  grid-column: span 2;
}

.split-side {
  display: grid;
  gap: 1.5rem;
}

.split-head {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--ta-border);
}

.split-head-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.split-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
}

.split-add {
  color: var(--ta-accent);
  font-size: 0.75rem;
  font-weight: 500;
}

.split-add:hover {
  text-decoration: underline;
}

.split-fields {
  margin: 0;
}

.split-field {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding: 0.625rem 1rem;
}

.split-field+.split-field {
  border-top: 1px solid var(--ta-border);
}

.split-dt {
  color: var(--ta-muted);
  font-size: 0.875rem;
}

.split-dd {
  grid-column: span 2;
  font-size: 0.875rem;
  overflow-wrap: break-word;
}

.split-none {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--ta-muted);
  font-size: 0.875rem;
}

.split-media {
  aspect-ratio: 4 / 3;
  width: 100%;
  background: var(--ta-surface-2);
}

.split-media-el {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

.split-related-item {
  padding: 0.625rem 1rem;
}

.split-related-item+.split-related-item {
  border-top: 1px solid var(--ta-border);
}

.split-related-link {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ta-text);
  font-size: 0.875rem;
  font-weight: 500;
}

.split-related-link:hover {
  color: var(--ta-accent);
  text-decoration: underline;
}

/* ---- Record fields (the reference's Panel + frameless spec strip) -------- */

.record-fields-pad {
  padding: 1rem 1.25rem;
}

.record-fields-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem 2rem;
  margin: 0;
}

@media (min-width: 640px) {
  .record-fields-grid {
    grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
  }
}

.rf-cell {
  min-width: 0;
}

/* The mono-label face — the spec strip's key, above its value. */
.rf-label {
  margin-bottom: 0.375rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--ta-mono);
  font-size: 0.6875rem;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ta-muted);
  font-variant-numeric: tabular-nums;
}

.rf-value {
  margin: 0;
  font-size: 0.875rem;
  color: var(--ta-text);
}

/* ---- Record hub (the reference's Salesforce-style record page) ----------- */

.record-hub {
  display: grid;
  gap: 1.5rem;
}

.hub-header.glass-card {
  padding: 0;
  overflow: hidden;
  border-radius: var(--ta-r-xl);
  flex-shrink: 0;
}

.hub-band {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: var(--ta-accent-soft);
}

.hub-id {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

.hub-avatar {
  display: flex;
  width: 3.5rem;
  height: 3.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--ta-r);
  font-size: 1.125rem;
  font-weight: 600;
  color: #fff;
}

.hub-avatar.cat-1 {
  background: #5b6ee1;
}

.hub-avatar.cat-2 {
  background: #0e9384;
}

.hub-avatar.cat-3 {
  background: #d97706;
}

.hub-avatar.cat-4 {
  background: #dc2626;
}

.hub-avatar.cat-5 {
  background: #7c3aed;
}

.hub-avatar.cat-6 {
  background: #0891b2;
}

.hub-avatar.cat-7 {
  background: #16a34a;
}

.hub-avatar.cat-8 {
  background: #db2777;
}

.hub-idtext {
  min-width: 0;
}

.hub-eyebrow {
  margin: 0 0 0.125rem;
}

.hub-titlerow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* The reference's `text-title` — the record page's h1. */
.hub-title {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.25rem;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.hub-status {
  padding: 0.125rem 0.5rem;
  border-radius: var(--ta-r-sm);
  background: var(--tone-soft, var(--ta-surface-2));
  color: var(--tone-ink, var(--ta-muted));
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

.hub-subtitle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ta-muted);
  font-size: 0.875rem;
}

.hub-edit {
  flex-shrink: 0;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--ta-border);
  border-radius: var(--ta-r-sm);
  background: var(--ta-surface);
  color: var(--ta-text);
  font-size: 0.875rem;
  font-weight: 500;
}

.hub-edit:hover {
  background: var(--ta-surface-2);
  color: var(--ta-text);
}

.hub-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2.5rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--ta-border);
}

.hub-strip-cell {
  min-width: 0;
}

.hub-strip-label {
  margin: 0;
}

.hub-strip-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: 500;
}

.hub-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
}

@media (min-width: 1024px) {
  .hub-body {
    grid-template-columns: repeat(3, 1fr);
  }
}

.hub-main {
  display: grid;
  gap: 1.5rem;
  grid-column: span 2;
}

.hub-side {
  display: grid;
  gap: 1.5rem;
}

.hub-details {
  margin: 0;
}

.hub-detail-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding: 0.75rem 1.25rem;
}

.hub-detail-row+.hub-detail-row {
  border-top: 1px solid color-mix(in oklab, var(--ta-border) 60%, transparent);
}

.hub-detail-dt {
  color: var(--ta-muted);
  font-size: 0.875rem;
}

.hub-detail-dd {
  grid-column: span 2;
  font-size: 0.875rem;
  overflow-wrap: break-word;
}

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

.hub-related-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
}

.hub-related-item+.hub-related-item {
  border-top: 1px solid color-mix(in oklab, var(--ta-border) 60%, transparent);
}

.hub-related-body {
  min-width: 0;
  flex: 1;
}

.hub-related-link {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ta-text);
  font-size: 0.875rem;
  font-weight: 500;
}

.hub-related-link:hover {
  color: var(--ta-accent);
  text-decoration: underline;
}

.hub-related-chevron {
  flex-shrink: 0;
  color: color-mix(in oklab, var(--ta-muted) 50%, transparent);
}

.hub-related-chevron svg {
  width: 1rem;
  height: 1rem;
}

.hub-timeline {
  position: relative;
  margin: 0;
  padding: 1.25rem;
  list-style: none;
  display: grid;
  gap: 1.25rem;
}

.hub-timeline-rail {
  position: absolute;
  top: 0.75rem;
  bottom: 0.75rem;
  left: 1.375rem;
  width: 1px;
  background: var(--ta-border);
}

.hub-timeline-item {
  position: relative;
  padding-left: 1.5rem;
}

.hub-timeline-dot {
  position: absolute;
  top: 0.25rem;
  left: 0.125rem;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  transform: translateX(-50%);
  border: 2px solid color-mix(in oklab, var(--ta-accent) 40%, transparent);
  background: var(--ta-card);
}

.hub-timeline-item:first-child .hub-timeline-dot {
  background: var(--ta-accent);
  box-shadow: 0 0 0 4px var(--ta-accent-soft);
}

.hub-timeline-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.hub-timeline-type {
  padding: 0.125rem 0.5rem;
  border-radius: var(--ta-r-sm);
  background: var(--ta-accent-soft);
  color: var(--ta-accent);
  font-size: 0.75rem;
  font-weight: 500;
}

.hub-timeline-when {
  color: var(--ta-muted);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.hub-timeline-title {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  font-weight: 500;
}

/* ---- Settings list (the reference's iOS-style grouped settings) ---------- */

.settings-list {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  border-radius: var(--ta-r-2xl);
  background: color-mix(in oklab, var(--ta-surface-2) 60%, transparent);
}

.settings-sections {
  display: grid;
  gap: 1.75rem;
}

.settings-section-title {
  margin: 0 0 0.5rem;
  padding: 0 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ta-muted);
}

.settings-card.glass-card {
  padding: 0;
  overflow: hidden;
  border-radius: var(--ta-r-xl);
  flex-shrink: 0;
}

.settings-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.settings-row.divided::before {
  content: "";
  position: absolute;
  top: 0;
  left: 3.5rem;
  right: 0;
  border-top: 1px solid color-mix(in oklab, var(--ta-border) 60%, transparent);
}

.settings-row-link {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  gap: 0.875rem;
  padding: 0.75rem 1rem;
  color: var(--ta-text);
  text-decoration: none;
}

.settings-row-link:hover {
  background: color-mix(in oklab, var(--ta-surface-2) 50%, transparent);
  color: var(--ta-text);
}

.settings-row-icon {
  display: flex;
  width: 1.8125rem;
  height: 1.8125rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--ta-r-xs);
  background: var(--ta-accent);
  color: #fff;
}

.settings-row-icon svg {
  width: 1rem;
  height: 1rem;
}

.settings-row-text {
  display: grid;
  gap: 0.125rem;
  min-width: 0;
  flex: 1;
  text-align: left;
}

.settings-row-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ta-text);
  font-size: 0.9375rem;
  line-height: 1.25;
  font-weight: 400;
}

.settings-row-sublabel {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ta-muted);
  font-size: 0.8125rem;
  line-height: 1.375;
  font-weight: 400;
}

.settings-row-trail {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.5rem;
  padding-right: 1rem;
}

.settings-row-value {
  color: var(--ta-muted);
  font-size: 0.9375rem;
}

.settings-row-chevron {
  color: color-mix(in oklab, var(--ta-muted) 60%, transparent);
}

.settings-row-chevron svg {
  width: 1rem;
  height: 1rem;
}

.settings-list-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
  text-align: center;
  color: var(--ta-muted);
  font-size: 0.875rem;
  border: 1px solid var(--ta-border);
  border-radius: var(--ta-r-2xl);
  background: color-mix(in oklab, var(--ta-surface-2) 30%, transparent);
}