/* Selvedge on Carbon. Only Carbon tokens (--cds-*) appear here; Carbon's
   web components carry their own styles. These rules place the regions
   Carbon leaves to the product: the content area beside the UI shell, the
   page header, the filter row, cell alignment, empty states, and the
   record page grid. Sources: docs/ui-blueprint.md. */

/* Carbon's spacing scale and productive type set as custom properties
   (elements/spacing/overview, elements/typography/type-sets; the compiled
   stylesheet emits these only inside component rules). Same values. */
:root {
  --cds-spacing-01: 0.125rem; --cds-spacing-02: 0.25rem; --cds-spacing-03: 0.5rem;
  --cds-spacing-04: 0.75rem; --cds-spacing-05: 1rem; --cds-spacing-06: 1.5rem;
  --cds-spacing-07: 2rem; --cds-spacing-08: 2.5rem; --cds-spacing-09: 3rem;
  --cds-spacing-10: 4rem; --cds-spacing-11: 5rem; --cds-spacing-12: 6rem; --cds-spacing-13: 10rem;
  --cds-label-01-font-size: 0.75rem; --cds-label-01-line-height: 1.33333; --cds-label-01-letter-spacing: 0.32px;
  --cds-code-01-font-size: 0.75rem; --cds-code-01-line-height: 1.33333; --cds-code-01-letter-spacing: 0.32px;
  --cds-body-compact-01-font-size: 0.875rem; --cds-body-compact-01-line-height: 1.28572; --cds-body-compact-01-letter-spacing: 0.16px;
  --cds-body-01-font-size: 0.875rem; --cds-body-01-line-height: 1.42857; --cds-body-01-letter-spacing: 0.16px;
  --cds-heading-compact-01-font-size: 0.875rem; --cds-heading-compact-01-font-weight: 600; --cds-heading-compact-01-line-height: 1.28572; --cds-heading-compact-01-letter-spacing: 0.16px;
  --cds-heading-compact-02-font-size: 1rem; --cds-heading-compact-02-font-weight: 600; --cds-heading-compact-02-line-height: 1.375; --cds-heading-compact-02-letter-spacing: 0;
  --cds-heading-03-font-size: 1.25rem; --cds-heading-03-font-weight: 400; --cds-heading-03-line-height: 1.4; --cds-heading-03-letter-spacing: 0;
  --cds-heading-04-font-size: 1.75rem; --cds-heading-04-font-weight: 400; --cds-heading-04-line-height: 1.28572; --cds-heading-04-letter-spacing: 0;
}

html, body { margin: 0; padding: 0; }
body { display: block; background: var(--cds-background); color: var(--cds-text-primary); }

/* No flash of raw content before the elements are defined
   (developing/frameworks/web-components). */
cds-header:not(:defined), cds-side-nav:not(:defined), cds-table:not(:defined),
cds-pagination:not(:defined), cds-search:not(:defined), cds-select:not(:defined),
cds-button:not(:defined), cds-content-switcher:not(:defined),
cds-inline-notification:not(:defined), cds-structured-list:not(:defined),
cds-tile:not(:defined), cds-breadcrumb:not(:defined), cds-grid:not(:defined),
cds-header-panel:not(:defined) { visibility: hidden; }

/* Shell: header 3rem, left panel 16rem at the large breakpoint
   (UI-shell-header/style, UI-shell-left-panel/style). */
.content {
  margin-block-start: 3rem;
  min-block-size: calc(100vh - 3rem);
  padding: var(--cds-spacing-06) var(--cds-spacing-07) var(--cds-spacing-10);
  background: var(--cds-background);
}
@media (min-width: 66rem) {
  .content { margin-inline-start: 16rem; }
  .content--bare { margin-inline-start: 0; }
  html.nav-collapsed cds-side-nav { display: none; }
  html.nav-collapsed .content { margin-inline-start: 0; }
}
@media (max-width: 41.98rem) { .content { padding-inline: var(--cds-spacing-05); } }

/* The header menu button is always shown: it opens the panel on small
   screens and hides or shows it on wide ones (Carbon's fixed mode hides the
   host; this outer rule wins over the component's :host rule). */
cds-header-menu-button { display: block; }
.header-global { display: flex; align-items: stretch; block-size: 100%; margin-inline-start: auto; }
/* Header search: leftmost of the utilities so it can expand (UI-shell-header/usage). */
.header-search { display: block; block-size: 100%; }
.header-search:not([expanded]) { inline-size: 3rem; }
.header-search[expanded] { inline-size: 24rem; max-inline-size: 60vw; }
.avatar {
  display: block; inline-size: 1.25rem; block-size: 1.25rem;
  background-color: var(--cds-icon-secondary);
  -webkit-mask: url(/static/icons/user--avatar.svg) no-repeat center / contain;
  mask: url(/static/icons/user--avatar.svg) no-repeat center / contain;
}
cds-header-global-action:hover .avatar { background-color: var(--cds-icon-primary); }
cds-header-panel .who {
  margin: 0; padding: var(--cds-spacing-05);
  color: var(--cds-text-secondary);
  font-size: var(--cds-body-compact-01-font-size); line-height: var(--cds-body-01-line-height);
}
cds-header-panel .who strong { color: var(--cds-text-primary); font-weight: 600; }
cds-side-nav .count { margin-inline-start: var(--cds-spacing-03); color: var(--cds-text-secondary); }

/* Page header: Carbon's page-header component (breadcrumb, title, text,
   page actions). Its box is exactly the content width, the same box every
   table, tile and grid below it fills; its inner grid margin is the same
   16 px inset a tile or table cell gives its text, so text lines up on one
   edge and boxes on another. The content is capped
   at Carbon's 99rem grid maximum so the header's inner grid never centres
   itself on wide screens. */
.content { max-inline-size: 99rem; }
cds-page-header { display: block; margin: 0 0 var(--cds-spacing-06); --cds-grid-margin: var(--cds-spacing-05); --cds-grid-gutter: 0; }
/* One rule for every box on a page: boxes meet on the content edge, and the
   text inside every box (header, tile, table cell) sits 16 px in. */
cds-page-header-content-text { max-inline-size: 80ch; }
/* Page actions: Carbon's button keeps 64 px after the label (button/style);
   the owner wants the action sized to its words, so only these buttons get
   equal 16 px sides through the component's exposed part. */
cds-page-header cds-button::part(button) { padding-inline: var(--cds-spacing-05); min-inline-size: 0; }
.contact { display: flex; flex-wrap: wrap; gap: var(--cds-spacing-03) var(--cds-spacing-06); }
.status { display: block; margin-block-start: var(--cds-spacing-04); color: var(--cds-text-primary); }
.status strong { font-weight: 600; }

/* Filter row: search plus inline selects, horizontal, above the table
   (patterns/filtering). */
.filters {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--cds-spacing-05); margin-block-end: var(--cds-spacing-05);
}
.filters cds-search { flex: 1 1 18rem; max-inline-size: 32rem; }
.filters cds-select { flex: 0 0 auto; inline-size: auto; }
.filters cds-button { flex: 0 0 auto; }

/* Table cells (data-table/style: numbers right-aligned, secondary text). */
cds-table-cell.num, cds-table-header-cell.num { text-align: end; }
cds-table-cell.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
cds-table-header-cell.why { min-inline-size: 16rem; }
cds-table-cell.evidence, cds-table-header-cell.evidence { min-inline-size: 22rem; }
cds-table-cell.actions { white-space: nowrap; }
cds-table-cell.flags, cds-table-header-cell.flags { max-inline-size: 9rem; white-space: normal; }
cds-table-cell.when .sub { text-align: end; }
cds-table-cell.lead, cds-table-header-cell.lead { min-inline-size: 11rem; }
cds-table-cell.question, cds-table-header-cell.question { min-inline-size: 9rem; }
cds-table-row[data-href] { cursor: pointer; }
.sub { display: block; margin-block-start: var(--cds-spacing-01); color: var(--cds-text-secondary); font-size: var(--cds-label-01-font-size); line-height: var(--cds-label-01-line-height); }
.quote { display: block; margin-block-start: var(--cds-spacing-02); color: var(--cds-text-secondary); }
.mute { color: var(--cds-text-secondary); }
.mono { font-family: 'IBM Plex Mono', Menlo, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; font-size: var(--cds-code-01-font-size); }
cds-table { display: block; max-inline-size: 100%; overflow-x: auto; }
cds-pagination { display: block; }

/* Empty state replaces the table (patterns/empty-states-pattern). */
.empty { padding: var(--cds-spacing-09) var(--cds-spacing-06); background: var(--cds-layer); }
.empty.flush { padding-inline: 0; background: transparent; }
.empty h2 { margin: 0 0 var(--cds-spacing-03); font-size: var(--cds-heading-03-font-size); font-weight: var(--cds-heading-03-font-weight); line-height: var(--cds-heading-03-line-height); }
.empty p { margin: 0 0 var(--cds-spacing-05); max-inline-size: 60ch; color: var(--cds-text-secondary); line-height: var(--cds-body-01-line-height); }
.empty cds-button { display: inline-block; }
.row-action { text-align: end; }
.row-action cds-button { display: inline-block; }

/* Sections on the sync page. */
.section + .section { margin-block-start: var(--cds-spacing-08); }
.section-title { margin: 0 0 var(--cds-spacing-05); font-size: var(--cds-heading-03-font-size); font-weight: var(--cds-heading-03-font-weight); line-height: var(--cds-heading-03-line-height); }
cds-inline-notification { display: block; margin-block-end: var(--cds-spacing-06); max-inline-size: none; }
cds-content-switcher { display: flex; margin-block-end: var(--cds-spacing-05); max-inline-size: 44rem; }

/* Record page: tiles on the layer, condensed structured lists inside
   (tile/style, structured-list/style). */
/* Region grids: Carbon's 16 px gutter (2x-grid/usage, narrow mode), edges
   flush with the page header and tables so every block shares one left edge. */
.record-grid, .kpis, .charts, .dash-split { display: grid; gap: var(--cds-spacing-05); align-items: start; }
.dash-section { margin-block-end: var(--cds-spacing-08); }
.dash-section > h2 { margin: 0 0 var(--cds-spacing-02); font-size: var(--cds-heading-03-font-size); font-weight: var(--cds-heading-03-font-weight); line-height: var(--cds-heading-03-line-height); }
.dash-section > p { margin: 0 0 var(--cds-spacing-05); color: var(--cds-text-secondary); max-inline-size: 80ch; }
.dash-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kpis cds-big-number .note { display: block; margin-block-start: var(--cds-spacing-02); color: var(--cds-text-secondary); font-size: var(--cds-label-01-font-size); }
.stages cds-table-row[data-href] { cursor: pointer; }
.range, .range-control { display: inline-flex; align-items: center; gap: var(--cds-spacing-05); }
.range-picker { display: inline-flex; gap: var(--cds-spacing-03); }
.range-picker[hidden] { display: none; }
.record-grid { grid-template-columns: minmax(0, 10fr) minmax(0, 6fr); }
.kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-block-end: var(--cds-spacing-05); }
.charts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.charts cds-tile, .kpis cds-clickable-tile { margin: 0; }
@media (max-width: 65.98rem) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .charts, .record-grid, .dash-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 41.98rem) { .kpis { grid-template-columns: minmax(0, 1fr); } }
cds-tile { display: block; margin-block-end: var(--cds-spacing-05); overflow-x: auto; }
cds-tile h2 {
  margin: 0 0 var(--cds-spacing-05);
  font-size: var(--cds-heading-compact-02-font-size); font-weight: var(--cds-heading-compact-02-font-weight);
  line-height: var(--cds-heading-compact-02-line-height); letter-spacing: var(--cds-heading-compact-02-letter-spacing);
}
cds-tile h2 .mute { font-weight: 400; margin-inline-start: var(--cds-spacing-03); font-size: var(--cds-body-compact-01-font-size); }
cds-structured-list.facts cds-structured-list-cell:first-child { inline-size: 10rem; color: var(--cds-text-secondary); }
cds-structured-list.timeline cds-structured-list-cell.when { inline-size: 6.5rem; white-space: nowrap; }
cds-structured-list.timeline cds-structured-list-cell.who { inline-size: 7.5rem; white-space: nowrap; }
.meta { display: block; margin-block-start: var(--cds-spacing-02); color: var(--cds-text-secondary); font-size: var(--cds-label-01-font-size); line-height: var(--cds-label-01-line-height); }
.full { margin-block-start: var(--cds-spacing-03); }
.message {
  margin: 0; padding: var(--cds-spacing-05);
  max-block-size: 28rem; overflow: auto; white-space: pre-wrap; word-break: break-word;
  background: var(--cds-layer-02); color: var(--cds-text-primary);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: var(--cds-body-01-font-size); line-height: var(--cds-body-01-line-height);
}

/* Dashboard: KPI tiles first (F-pattern, data-visualization/dashboards),
   then four charts in tiles; white space between rows. */
.kpis cds-clickable-tile { display: block; }
.charts cds-tile { block-size: 100%; }
.chart { min-block-size: 18rem; }

/* Sign in: one tile, one form, Carbon form items 32 px apart (forms pattern). */
.signin { max-inline-size: 26rem; margin: var(--cds-spacing-10) auto 0; }
.signin.wide { max-inline-size: 36rem; }
.signin p { margin: 0 0 var(--cds-spacing-06); }
.signin cds-form-item { display: block; margin-block-end: var(--cds-spacing-06); }
.signin form { margin-block: var(--cds-spacing-06) var(--cds-spacing-06); }
.signin .qr { inline-size: 12rem; margin: var(--cds-spacing-05) 0; background: var(--cds-layer); }
.signin .qr svg { inline-size: 100%; block-size: auto; display: block; }
.signin .codes { columns: 2; padding-inline-start: var(--cds-spacing-06); margin: var(--cds-spacing-05) 0 var(--cds-spacing-06); }
.signin .codes li { padding-block: var(--cds-spacing-02); }