/* Shared typography/state tokens extend app.css; no alternative color theme. */
:root {
  --type-body: 1rem;
  --type-table: 0.9375rem;
  --leading-body: 1.5;
  --cell-block: 0.75rem;
  --cell-inline: 1rem;
}
.ui-update-status {
  min-block-size: 1.5rem;
  margin: 0 0 0.75rem;
  font-size: var(--type-body);
  line-height: var(--leading-body);
  color: var(--ink);
  overflow-wrap: anywhere;
}
.ui-feedback-error:not([hidden]) {
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--red);
  border-radius: var(--radius);
  color: var(--ink);
  background: var(--white);
  font-size: var(--type-body);
  line-height: var(--leading-body);
  overflow-wrap: anywhere;
}
.ui-feedback-error[hidden] { display: none; }
.ui-field { display: grid; gap: 0.25rem; min-inline-size: 0; }
.ui-field input { min-inline-size: 0; max-inline-size: 100%; }
.ui-readable-table { inline-size: 100%; border-collapse: collapse; }
.ui-readable-table th, .ui-readable-table td {
  padding: var(--cell-block) var(--cell-inline);
  font-size: var(--type-table);
  line-height: var(--leading-body);
}
.ui-amount { text-align: right; font-variant-numeric: tabular-nums; }
.ui-identifier { overflow-wrap: anywhere; user-select: text; }

/* M1 navigation and exact identity/evidence reading. No framework or grid rewrite. */
.sidebar { overflow-y: auto; }
.ui-navigation ul, .ui-destinations ul, .ui-breadcrumbs ol { list-style: none; margin: 0; padding: 0; }
.ui-navigation .ui-nav-group { color: #d8e8e2; font-size: 0.875rem; letter-spacing: 0.02em; margin: 1.25rem 0 0.375rem; }
.ui-navigation .nav-item { min-block-size: 2rem; font-size: 0.9375rem; line-height: 1.4; }
.ui-destinations { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 1rem; }
.ui-destinations .ui-nav-group { color: var(--ink); margin-block: 1rem 0.5rem; font-size: 1rem; }
.ui-destinations .nav-item { color: var(--ink); background: var(--bg); min-block-size: 2.25rem; padding: 0.5rem 0.75rem; border-radius: var(--radius); }
.ui-destinations .nav-item:hover, .ui-destinations .nav-item.active { color: var(--teal-dark); background: var(--teal-light); }
.ui-breadcrumbs { margin-block-end: 1rem; color: var(--muted); font-size: 0.9375rem; }
.ui-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ui-breadcrumbs li { min-inline-size: 0; overflow-wrap: anywhere; }
.ui-breadcrumbs li + li::before { content: "/"; margin-inline-end: 0.5rem; }
.ui-breadcrumbs a { color: var(--teal-dark); text-decoration: underline; }
.ui-environment { display: inline-block; border: 1px solid var(--line); border-radius: var(--radius); padding: 0.25rem 0.5rem; font-size: 0.875rem; font-weight: 700; color: var(--ink); background: var(--white); white-space: normal; }
#ui-go-to { inline-size: min(46rem, calc(100vw - 2rem)); max-block-size: calc(100dvh - 2rem); overflow: auto; padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); background: var(--white); }
#ui-go-to::backdrop { background: rgb(0 0 0 / 0.45); }
.ui-dialog-heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.ui-dialog-heading h2 { margin-block-end: 1rem; }
#ui-go-to [hidden], .ui-copy [hidden] { display: none !important; }
.ui-identifiers { display: grid; gap: 0.5rem; }
.ui-copy { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem; min-inline-size: 0; margin-block: 0.25rem; line-height: 1.5; }
.ui-copy-label { color: var(--muted); font-size: 0.9375rem; }
.ui-copy code, .ui-copy a { overflow-wrap: anywhere; user-select: text; }
.ui-copy [data-copy-status] { font-size: 0.875rem; }
.ui-copy textarea { flex-basis: 100%; inline-size: 100%; min-block-size: 3rem; font: inherit; }
.ui-copy button { min-block-size: 2rem; }
.ui-source-labels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: 0.5rem 1rem; margin-block: 0.75rem; }
.ui-source-labels dt { color: var(--muted); font-size: 0.9375rem; }
.ui-source-labels dd { margin: 0; overflow-wrap: anywhere; font-size: 0.9375rem; }
.ui-source-note { color: var(--muted); font-size: 0.9375rem; line-height: 1.5; }
.ui-blockers { margin-block: 0.75rem; border-inline-start: 3px solid var(--amber); padding: 0.5rem 0.75rem; color: var(--ink); font-size: 0.9375rem; line-height: 1.5; }
.ui-blockers ul { margin: 0.25rem 0; padding-inline-start: 1.25rem; }
@media (max-width: 700px) {
  .topbar { flex-wrap: wrap; gap: 0.5rem; }
  .global-search { min-inline-size: 0; flex: 1 1 12rem; }
  .topbar-right { flex-wrap: wrap; max-inline-size: 100%; }
  .footer { flex-wrap: wrap; gap: 0.5rem; }
  #ui-go-to { padding: 1rem; }
}
@media print {
  #ui-go-to, [data-go-to], [data-copy], [data-copy-status], [data-copy-fallback] { display: none !important; }
}

.mobile-menu { max-block-size: calc(100dvh - 5rem); overflow-y: auto; }
.mobile-menu .ui-navigation .ui-nav-group { color: var(--muted); }
.mobile-menu .ui-navigation .nav-item { color: var(--ink); }
.ui-copy button:focus-visible, .ui-destinations a:focus-visible,
[data-go-to]:focus-visible, #ui-go-to input:focus-visible,
.ui-breadcrumbs a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* Invoice review grids fit their available column at enlarged browser scale. */
main:has(#invoice-review) :is(fieldset, label, input, select, textarea) { min-inline-size: 0; max-inline-size: 100%; }
main:has(#invoice-review) .form-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }