/* object-header.css: Object header (component 14). Owner: group C (P2.T6). Tokens only (L-01), logical properties only (L-04), box-shadow only var(--shadow-overlay) on overlays (L-03).
   Breadcrumbs row, title row (avatar, title, chips, actions), key facts row. Not sticky at any width. */

[data-component="object-header"] { display: block; min-inline-size: 0; color: var(--text); }
.object-header__crumbs { margin-block-end: var(--space-5); }
.object-header__row { display: flex; align-items: flex-end; gap: var(--space-5); min-block-size: var(--space-9); min-inline-size: 0; }
.object-header__avatar { align-self: center; }
.object-header__main { display: grid; flex: 1 1 auto; align-content: center; gap: var(--space-1); min-inline-size: 0; }
.object-header__heading { display: flex; align-items: center; gap: var(--space-3); min-inline-size: 0; }
.object-header__title { flex: 0 1 auto; min-inline-size: 0; overflow: hidden; font: var(--type-page); text-overflow: ellipsis; white-space: nowrap; }
.object-header__chips { display: flex; flex: none; align-items: center; gap: var(--space-3); }
.object-header__supporting { min-inline-size: 0; max-inline-size: none; overflow: hidden; color: var(--text-secondary); font: var(--type-body); text-overflow: ellipsis; white-space: nowrap; }
.object-header__actions { display: flex; flex: none; align-items: center; gap: var(--space-3); align-self: flex-end; }
.object-header__overflow { inline-size: var(--size-control); block-size: var(--size-control); }

/* key facts: a flex-like grid of label over value, divided by hairlines */
.object-header__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--size-fact-min), 1fr));
  row-gap: var(--space-5);
  margin: var(--space-5) 0 0;
  padding-block: var(--space-5);
  border-block-end: var(--border-width) solid var(--border);
}
.object-header__fact { display: grid; align-content: start; gap: var(--space-1); min-inline-size: 0; margin: 0; padding-inline-start: var(--space-7); border-inline-start: var(--border-width) solid var(--border); }
.object-header__fact:first-child, .object-header__fact[data-line-start="true"] { padding-inline-start: 0; border-inline-start: 0; }
.object-header__label { color: var(--text-secondary); font: var(--type-label); }
.object-header__value { display: flex; align-items: center; gap: var(--space-2); min-inline-size: 0; margin: 0; color: var(--text); font: var(--type-button); overflow-wrap: anywhere; }
.object-header__value[data-type="num"] { font-variant-numeric: tabular-nums lining-nums; }
.object-header__value a { color: var(--brand); }
.object-header__value a:hover { text-decoration: underline; }
.object-header__info {
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: var(--size-target-min);
  block-size: var(--size-target-min);
  padding: 0;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-secondary);
}
.object-header__info:hover, .object-header__info[aria-expanded="true"] { background: var(--surface-hover); color: var(--text); }

/* the info popover for a derived fact (an overlay, so it may carry the overlay shadow) */
.object-header-popover {
  display: grid;
  gap: var(--space-2);
  inline-size: var(--size-popover-sm);
  padding: var(--space-4);
  background: var(--surface-raised);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-overlay);
  box-shadow: var(--shadow-overlay);
  color: var(--text);
}
.object-header-popover__title { font: var(--type-label); color: var(--text-secondary); }
.object-header-popover__text { max-inline-size: none; font: var(--type-body); }
.object-header-popover__link { font: var(--type-button); }

/* loading skeleton */
.object-header__skeleton { display: block; background: var(--surface-sunken); border-radius: var(--radius-chip); animation: object-header-pulse var(--duration-pulse) var(--ease-standard) infinite alternate; }
.object-header__skeleton--title { inline-size: var(--size-skeleton-title-w); block-size: var(--size-skeleton-value-h); }
.object-header__skeleton--line { inline-size: var(--size-skeleton-value-w); block-size: var(--size-skeleton-line); }
.object-header__skeleton--label { inline-size: var(--size-skeleton-label-w); block-size: var(--size-skeleton-line); }
.object-header__skeleton--value { inline-size: var(--size-skeleton-value-w); block-size: var(--size-skeleton-title-h); }
@keyframes object-header-pulse { from { opacity: 1; } to { opacity: .5; } }

/* tablet and small: facts become a two-column field list, actions wrap below the title */
@media (width < 1024px) {
  .object-header__row { flex-wrap: wrap; }
  .object-header__main { flex-basis: var(--size-field-mid); }
  .object-header__actions { flex-basis: 100%; flex-wrap: wrap; align-self: flex-start; }
}
@media (width < 1024px) {
  .object-header__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-7); }
  .object-header__fact, .object-header__fact[data-line-start="true"] { padding-inline-start: 0; border-inline-start: 0; }
}

/* kitchen sink: a narrow frame that triggers the tablet layout of the facts and actions */
.object-header-demo__narrow { inline-size: 100%; max-inline-size: var(--size-popover-lg); }
[data-component="object-header"] { flex: 1 1 100%; }