/* R3 Deploy — design system.
   Dense, light, enterprise. The information architecture follows the reference
   product (top pipeline tabs, persistent type sidebar, change-type pills, master
   grid over a resizable inspector, persistent selection counter, footer action
   bar) so a consultant arriving from another deployment tool is already oriented.
   Density is deliberate: this is a table of 1,000 components, not a marketing page. */

:root {
  --bg: #eef2f7;
  --surface: #ffffff;
  --surface-2: #f6f8fb;
  --surface-3: #edf1f7;
  --line: #d5dde8;
  --line-soft: #e6ecf3;
  --ink: #16325c;
  --ink-2: #34495f;
  --muted: #5a6c84;
  --muted-2: #5d7089;
  --primary: #0d70b7;
  --primary-dark: #0a5b95;
  --primary-soft: #e9f3fb;
  --new: #217c35;
  --new-soft: #e2f4e4;
  --new-line: #a8d8ae;
  --changed: #8a5008;
  --changed-soft: #fdf1dd;
  --changed-line: #eccb92;
  --del: #b8352a;
  --del-soft: #fbe6e3;
  --del-line: #eeb4ac;
  --ident: #5f7189;
  --ident-soft: #eef1f5;
  --warn-soft: #fdf1dd;
  --add-bg: #ddf3e0;
  --del-bg: #fbe3e0;
  --mod-bg: #fdf2da;
  --radius: 6px;
  --radius-lg: 8px;
  --shadow: 0 1px 2px rgba(22, 50, 92, .10), 0 1px 6px rgba(22, 50, 92, .06);
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --head-h: 44px;
  --foot-h: 46px;
  --side-w: 292px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 13px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  display: flex;
  flex-direction: column;
}

a { color: var(--primary); text-decoration: none; }
.crumb a, .panel > p a, .panel > p.small a, .appfoot a, td a, .actionbar a, .itemmeta a { display: inline-block; padding: 3px 0; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
  border-radius: 3px;
}
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 8px; top: 8px; background: var(--surface); padding: 8px 12px; z-index: 100; box-shadow: var(--shadow); }

/* ---------------------------------------------------------------- chrome -- */

.appbar {
  display: flex; align-items: stretch; gap: 0;
  height: var(--head-h); min-height: var(--head-h);
  background: #12405f;
  color: #fff;
  position: sticky; top: 0; z-index: 30;
}
.appbar .logo {
  display: flex; align-items: center; gap: 8px; padding: 0 16px; font-weight: 700;
  letter-spacing: .08em; font-size: 11.5px; text-transform: uppercase; white-space: nowrap;
}
.appbar .logo .glyph { font-size: 15px; color: #7fd3f5; letter-spacing: 0; }
.appbar nav { display: flex; align-items: stretch; flex: 1 1 auto; overflow-x: auto; }
.appbar nav a {
  display: flex; align-items: center; padding: 0 14px; color: #cfe2f0; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .06em; font-weight: 600; white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.appbar nav a:hover { background: #0e3550; color: #fff; text-decoration: none; }
.appbar nav a[aria-current="page"] { color: #fff; border-bottom-color: #46b3e0; background: #0e3550; }
.appbar .utils { display: flex; align-items: center; gap: 10px; padding: 0 16px; font-size: 12px; }
.appbar .utils .who { color: #cfe2f0; }
.appbar select {
  background: #0e3550; color: #fff; border: 1px solid #2b5d80; border-radius: 4px;
  padding: 3px 6px; font: inherit;
}
.appbar .cog { position: relative; }
.appbar .cog summary { list-style: none; cursor: pointer; padding: 6px 8px; border-radius: 4px; }
.appbar .cog summary::-webkit-details-marker { display: none; }
.appbar .cog[open] summary, .appbar .cog summary:hover { background: #0e3550; }
.appbar .cog ul {
  position: absolute; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); min-width: 200px;
}
.appbar .cog ul a { display: block; padding: 7px 10px; border-radius: 4px; color: var(--ink); text-transform: none; letter-spacing: 0; font-weight: 500; }
.appbar .cog ul a:hover { background: var(--primary-soft); text-decoration: none; }

main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.page { padding: 16px 16px 32px; width: 100%; min-width: 0; }
.page.wide { padding: 0; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

.appfoot {
  height: var(--foot-h); min-height: var(--foot-h);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 16px; background: var(--surface); border-top: 1px solid var(--line);
  color: var(--ink-2); font-size: 12px;
}

/* ------------------------------------------------------------ typography -- */

h1 { font-size: 19px; margin: 0 0 4px; font-weight: 650; }
h2 { font-size: 14px; margin: 0 0 8px; font-weight: 650; }
h3 { font-size: 13px; margin: 0 0 6px; font-weight: 650; }
p { margin: 0 0 10px; }
.subtitle, .muted { color: var(--muted); }
.small { font-size: 11.5px; }
.mono { font-family: var(--mono); font-size: 12px; }
.crumb { margin: 0 0 8px; font-size: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* -------------------------------------------------------------- surfaces -- */

.panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 14px 16px; margin-bottom: 16px;
}
.panel > h2:first-child { margin-top: 0; }
.panel.flat { background: transparent; border: 0; padding: 0; }

.alert { padding: 9px 12px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); margin: 8px 0 12px; }
.alert.ok { border-color: var(--new-line); background: var(--new-soft); }
.alert.warn { border-color: var(--changed-line); background: var(--warn-soft); }
.alert.bad { border-color: var(--del-line); background: var(--del-soft); }

/* -------------------------------------------------------------- controls -- */

.btn, button.btn, .button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; font: inherit; font-weight: 500; line-height: 1.2;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--radius); cursor: pointer; white-space: nowrap;
}
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn.primary { background: var(--primary); border-color: var(--primary-dark); color: #fff; }
.btn.primary:hover { background: var(--primary-dark); }
.btn.danger { background: var(--del); border-color: #93271e; color: #fff; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--primary); padding: 6px 8px; }
.btn.ghost:hover { background: var(--primary-soft); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; background: var(--surface-3); color: var(--muted); }
.btn.small { padding: 5px 9px; font-size: 11.5px; min-height: 24px; }
.link { color: var(--primary); background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }

.input, input[type="text"], input[type="search"], input:not([type]), select, textarea {
  width: 100%; padding: 6px 9px; font: inherit; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
textarea { font-family: var(--mono); font-size: 12px; }
input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--primary); }
/* The box is small; the label is the target. */
label.inline { cursor: pointer; }
label { display: block; font-weight: 600; font-size: 12px; margin: 10px 0 4px; color: var(--ink-2); }
label.inline { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; margin: 8px 16px 4px 0; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: 12px 14px; margin: 0 0 16px; }
legend { padding: 0 6px; font-weight: 650; font-size: 12px; color: var(--ink-2); text-transform: uppercase; letter-spacing: .05em; }
/* Namespace carefully: the results grid uses <tr class="row">, so a bare
   `.row` flex rule would destroy the table layout. */
.formrow { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.formrow > div { flex: 1 1 200px; }
.formrow .arrow { flex: 0 0 auto; font-size: 18px; color: var(--muted); padding-bottom: 8px; }
tr.row { display: table-row; }

/* -------------------------------------------------------------- item page -- */

.itemhead { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.itemhead h1 { margin: 0; }
.itemnav { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.itemnav .btn[aria-disabled="true"] { opacity: .45; cursor: default; }
.itemmeta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; color: var(--muted); font-size: 12px; }
.itemmeta .sep { color: var(--line); }
.itemnav .pos { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- badges -- */

.badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; border: 1px solid transparent; white-space: nowrap;
}
.badge.ok, .badge.new { background: var(--new-soft); color: var(--new); border-color: var(--new-line); }
.badge.warn, .badge.changed { background: var(--changed-soft); color: var(--changed); border-color: var(--changed-line); }
.badge.bad, .badge.del { background: var(--del-soft); color: var(--del); border-color: var(--del-line); }
.badge.ident { background: var(--ident-soft); color: var(--ident); border-color: var(--line); }
.badge.busy { background: var(--primary-soft); color: var(--primary); border-color: #b6dbf2; }
.badge.neutral { background: var(--surface-3); color: var(--muted); border-color: var(--line); }
.badge.prod { background: #7d2b22; color: #fff; border-color: #7d2b22; letter-spacing: .06em; text-transform: uppercase; font-size: 11px; }
.badge.sandbox { background: var(--surface-3); color: var(--muted); border-color: var(--line); }
.badge .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.badge.new .dot { background: var(--new); }
.badge.changed .dot { background: var(--changed); }
.badge.del .dot { background: var(--del); }
.badge.ident .dot { background: var(--ident); }

.pill { display: inline-flex; align-items: center; gap: 5px; padding: 1px 7px; border-radius: 999px; font-size: 11.5px; border: 1px solid var(--line); background: var(--surface); }
.pill.new { color: var(--new); border-color: var(--new-line); }
.pill.changed { color: var(--changed); border-color: var(--changed-line); }
.pill.del { color: var(--del); border-color: var(--del-line); }
.pill.ident { color: var(--ident); }
.pill.renamed { color: var(--changed); border-color: var(--changed-line); }
.counts { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* ----------------------------------------------------------- stat cards -- */

.cards { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0 0 16px; }
.cards li {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 10px 14px; min-width: 132px; display: flex; flex-direction: column; gap: 1px;
}
.cards .k { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.cards .v { font-size: 19px; font-weight: 650; letter-spacing: -.01em; }
.cards .h { color: var(--muted); font-size: 11.5px; }
.cards .tone-ok .v { color: var(--new); }
.cards .tone-warn .v { color: var(--changed); }
.cards .tone-bad .v { color: var(--del); }

/* ---------------------------------------------------------------- tables -- */

table { width: 100%; border-collapse: collapse; background: var(--surface); }
th, td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
th {
  background: var(--surface-2); font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); font-weight: 650; border-bottom: 1px solid var(--line); white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }
tr.group th { background: var(--surface-3); color: var(--ink); text-transform: none; letter-spacing: 0; font-size: 12px; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.deltas { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.tablewrap { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: auto; background: var(--surface); }
code { font-family: var(--mono); font-size: 12px; }
.empty { color: var(--muted); font-style: italic; padding: 14px; }

/* ------------------------------------------------------------- workbench -- */

.wb-shell { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.wb { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); flex: 1 1 auto; min-height: 0; }

.wb-side { background: var(--surface); border-right: 1px solid var(--line); overflow-y: auto; scrollbar-gutter: stable; display: flex; flex-direction: column; }
.side-sec { padding: 8px 12px; border-bottom: 1px solid var(--line-soft); }
.side-sec:last-child { border-bottom: 0; }
.side-h {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--primary);
  font-weight: 700; margin: 0 0 6px; display: flex; align-items: center; gap: 6px;
}
.selwidget {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  background: var(--primary-soft); border: 1px solid #b6dbf2; border-radius: var(--radius);
  padding: 7px 10px; font: inherit; font-size: 12px; font-weight: 600; color: var(--primary-dark);
  cursor: pointer; text-align: left;
}
.selwidget:hover { background: #d7ecfa; }
.selwidget[data-count="0"] { background: var(--surface-2); border-color: var(--line); color: var(--ink-2); }
.selpanel { border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); background: var(--surface); padding: 8px; margin-top: -1px; }
.selpanel ul { list-style: none; margin: 0 0 6px; padding: 0; max-height: 220px; overflow: auto; }
.selpanel li { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 6px; padding: 4px 2px; border-bottom: 1px solid var(--line-soft); font-size: 11.5px; }
.selpanel li:last-child { border-bottom: 0; }
.selpanel .seltype { color: var(--muted); grid-column: 1 / -1; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.selpanel .selname { font-family: var(--mono); overflow-wrap: break-word; }
.linkbtn { background: none; border: 0; padding: 4px 2px; min-height: 24px; font: inherit; font-size: 11.5px; color: var(--primary); cursor: pointer; text-decoration: underline; }
.linkbtn:hover { color: var(--primary-dark); }

/* Sortable headers: the caret is the affordance, aria-sort is the truth. */
.sortbtn { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; padding: 0; }
.sortbtn:hover { color: var(--primary-dark); }
th.sorted { color: var(--primary-dark); }
.sortcaret { font-size: 9px; color: var(--muted-2); }
th[aria-sort="ascending"] .sortcaret::after { content: "▲"; color: var(--primary); }
th[aria-sort="descending"] .sortcaret::after { content: "▼"; color: var(--primary); }
.selwidget .n { font-size: 15px; font-weight: 700; }
.selmeta { font-size: 11.5px; color: var(--muted); margin: 6px 2px 0; }
.health { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.health .ok { color: var(--new); }
.health .bad { color: var(--del); }

.subtypelist { list-style: none; margin: 0 0 2px 12px; padding: 0 0 0 10px; border-left: 1px solid var(--line); }
.subtypelist li { display: flex; align-items: center; gap: 6px; padding: 1px 4px; font-size: 11.5px; color: var(--ink-2); }
.subtypelist .branch { color: var(--muted-2); font-size: 11px; }
.subtypelist .count { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }

/* The whole rail scrolls as one column. Scrolling the list inside the rail
   sliced the last row in half at the fold, which read as a bug. */
.typelist { list-style: none; margin: 6px 0 0; padding: 0 4px 18px 0; }
.type-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  background: none; border: 0; border-radius: 4px; padding: 6px 8px; font: inherit; color: var(--ink);
  cursor: pointer; text-align: left;
}
.type-row:hover { background: var(--surface-2); }
.type-row .count { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 11.5px; }
.type-row .count.zero { color: var(--muted-2); }
.type-row[aria-pressed="true"] { background: var(--primary); color: #fff; font-weight: 650; }
.type-row[aria-pressed="true"] .count { color: #e8f4fd; }
.type-row .lbl { display: flex; align-items: center; gap: 7px; }
.subtypelist { list-style: none; margin: 0 0 4px 18px; padding: 0; font-size: 11.5px; color: var(--muted); }
.side-sec details > summary { cursor: pointer; list-style: none; }
.side-sec details > summary::-webkit-details-marker { display: none; }
.side-sec details > summary::before { content: "▸ "; color: var(--muted-2); }
.side-sec details[open] > summary::before { content: "▾ "; }
.subtypelist li { display: flex; justify-content: space-between; padding: 2px 8px 2px 0; }
.typelist .divider { margin: 8px 0 4px; padding-top: 8px; border-top: 1px solid var(--line-soft); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted-2); }
.typelist .excluded { color: var(--muted-2); }
.typelist .excluded .type-row { color: var(--muted-2); }

.wb-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }

.wb-bar {
  /* Three zones: what happened on the left, the categories centred in the
     middle, the filter on the right. Equal outer columns keep the middle
     optically centred whatever the two sides weigh. */
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: 12px;
  padding: 8px 12px; background: var(--surface); border-bottom: 1px solid var(--line);
}
.wb-bar-left { display: flex; align-items: center; gap: 14px; min-width: 0; flex-wrap: wrap; }
.wb-bar-right { display: flex; justify-content: flex-end; min-width: 0; }
.wb-seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.wb-state { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 650; color: var(--ink-2); white-space: nowrap; }
.wb-state .tick { width: 16px; height: 16px; border-radius: 50%; background: var(--new); color: #fff; display: inline-grid; place-items: center; font-size: 10px; flex: 0 0 auto; }
.nofilt { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); white-space: nowrap; cursor: pointer; }
.nofilt .n { font-variant-numeric: tabular-nums; }
.nofilt input:disabled + span { opacity: .6; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--surface); }
.seg-btn {
  display: inline-flex; align-items: center; gap: 6px; border: 0; border-right: 1px solid var(--line);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 12px; padding: 5px 12px; cursor: pointer;
}
.seg-btn:last-child { border-right: 0; }
.seg-btn:hover { background: var(--surface-2); }
.seg-btn[aria-pressed="true"] { background: var(--primary); color: #fff; font-weight: 650; }
.seg-btn .n { font-variant-numeric: tabular-nums; opacity: .85; }
.seg-btn .ic { width: 15px; height: 15px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; }
.seg-btn .ic.new { background: var(--new); }
.seg-btn .ic.changed { background: var(--changed); }
.seg-btn .ic.del { background: var(--del); }
.seg-btn .ic.ident { background: var(--ident); }
.wb-search { width: 240px; max-width: 100%; }

.wb-gridwrap { flex: 1 1 auto; min-height: 120px; overflow: auto; background: var(--surface); }
.grid { border-collapse: separate; border-spacing: 0; }
.grid thead th { position: sticky; top: 0; z-index: 2; }
.grid tbody tr.row { cursor: pointer; }
.grid tbody tr.row:hover td { background: var(--surface-2); }
.grid tbody tr.row[aria-selected="true"] td { background: var(--primary-soft); }
.grid td, .grid th { border-bottom: 1px solid var(--line-soft); }
.grid .c-pick { width: 34px; padding-right: 0; }
.grid .c-name { width: 34%; }
.grid input.pick, .grid input.typepick, .checklist input.typebox { cursor: pointer; }
.grid .c-type { width: 190px; color: var(--ink-2); }
.grid .c-diff { width: 132px; }
.grid .c-detail { color: var(--muted); font-size: 11.5px; }
.grid .name { display: flex; align-items: center; gap: 6px; font-weight: 500; }
.grid .name .ico { color: var(--muted-2); font-size: 11px; font-family: var(--mono); width: 20px; text-align: center; flex: 0 0 20px; }
.grid .name a { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grid .expander {
  background: none; border: 0; padding: 0; width: 18px; height: 22px; flex: 0 0 18px; margin: -3px 4px -3px -3px;
  display: inline-flex; align-items: center; justify-content: center; color: var(--muted-2); cursor: pointer;
}
.grid .expander .chev { width: 0; height: 0; border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.grid .expander[aria-expanded="true"] { color: var(--primary); }
.grid .expander[aria-expanded="true"] .chev { border-left: 0; border-top: 5px solid currentColor; border-left: 4px solid transparent; border-right: 4px solid transparent; }
.grid .expander.spacer { cursor: default; }
.grid tr.deprow td { background: var(--surface-3); font-size: 11.5px; color: var(--ink-2); }
.grid tr.deprow .deplabel { color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-size: 11px; font-weight: 650; }
.grid tr.deprow a { font-family: var(--mono); font-size: 11.5px; }
.grid tr.dephead td { background: var(--surface-3); }

.splitter { height: 7px; background: var(--surface-3); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); cursor: row-resize; display: grid; place-items: center; }
.splitter span { width: 40px; height: 3px; border-radius: 2px; background: var(--muted-2); }
.splitter:focus-visible { outline-offset: -2px; }

.wb-inspector { flex: 0 0 auto; height: 42%; min-height: 150px; display: flex; flex-direction: column; background: var(--surface); }
.insp-bar {
  /* Same three-zone idea as the category bar: how you are reading it on the
     left, which org feeds which in the middle, how far through you are on the
     right. The direction is stated in words as well as by the arrow. */
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: 12px; padding: 6px 12px; border-bottom: 1px solid var(--line); background: var(--surface-2);
}
.insp-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.insp-pair { display: flex; align-items: center; justify-content: center; gap: 12px; }
.pair-side { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pair-lbl { font-size: 11.5px; color: var(--ink); white-space: nowrap; }
.pair-lbl b { font-weight: 650; }
.pair-sub { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
.pair-sub .badge { font-size: 10px; padding: 0 5px; }
.pair-api { color: var(--muted-2); font-variant-numeric: tabular-nums; }
.pair-arrow { font-size: 17px; font-weight: 700; color: var(--ink-2); line-height: 1; }
.insp-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 5px 12px; border-bottom: 1px solid var(--line); background: var(--surface); font-weight: 650; font-size: 12.5px; }
.insp-permalink { font-weight: 400; font-size: 11.5px; margin-left: auto; }
.viewtabs { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.viewtab { border: 0; border-right: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font: inherit; font-size: 11.5px; padding: 4px 10px; cursor: pointer; }
.viewtab:last-child { border-right: 0; }
.viewtab[aria-pressed="true"] { background: var(--primary-soft); color: var(--primary-dark); font-weight: 650; }
.insp-title { font-weight: 650; display: flex; align-items: center; gap: 8px; }
.insp-title .pair { color: var(--muted); font-weight: 400; font-size: 11.5px; }
.insp-nav { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); }
.insp-body { flex: 1 1 auto; min-height: 0; overflow: auto; }
.insp-empty { padding: 24px; color: var(--muted); }

.attr-table { width: 100%; table-layout: fixed; }
.attr-table th:first-child, .attr-table td:first-child { width: 26%; }
.attr-table td { font-family: var(--mono); font-size: 11.5px; white-space: pre-wrap; overflow-wrap: break-word; }
.attr-table td.attrcell { padding-top: 5px; padding-bottom: 5px; }
.attrdetails > summary {
  cursor: pointer; font-family: var(--mono); font-size: 11.5px; color: var(--primary-dark);
  list-style: none; display: flex; flex-direction: column; gap: 2px;
}
.attrdetails > summary::-webkit-details-marker { display: none; }
.attrdetails > summary:hover { text-decoration: underline; }
.attrdetails .attrv-preview { color: var(--ink); white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.attrdetails .attrv-meta { color: var(--muted); font-family: inherit; font-size: 11px; }
.attrdetails .attrv-meta::before { content: "▸ "; }
.attrdetails[open] .attrv-meta::before { content: "▾ "; }
.attrdetails pre {
  margin: 6px 0 2px; padding: 8px 10px; background: var(--surface-2); border: 1px solid var(--line-soft);
  border-radius: var(--radius); max-height: 320px; overflow: auto; font-size: 11.5px; white-space: pre;
}
.attrdetails.pre-scroll pre { white-space: pre; }
.attr-table td.k { font-family: inherit; color: var(--ink-2); font-weight: 600; }
.attr-table tr.mod td { background: var(--mod-bg); }
table.diff .absent { color: #52636f; background: #f7e9e7; }
table.diff .has-change { background: #fdf2da; }
.grid tr.deprow td { padding-left: 12px; }
.insp-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.insp-toolbar .insp-nav { margin-left: 0; }
.insp-permalink { font-size: 11.5px; border-left: 1px solid var(--line); padding-left: 10px; }
.insp-toolbar .insp-nav { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.attr-table tr.add td { background: var(--add-bg); }
.attr-table tr.rem td { background: var(--del-bg); }
.attr-table td.hint { font-family: inherit; color: var(--del); }

.attr-table td a { display: inline; }
.diff-wrap { overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); max-width: 100%; }
/* Side by side is two panes, source and target, each half the width and each
   scrolling sideways on its own. Nothing wraps, so a row is one line tall on
   both sides and the two halves stay in step down the page. */
.diff-wrap.side-panes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.diff-wrap.side-panes > .pane { min-width: 0; border-right: 1px solid var(--line); }
.diff-wrap.side-panes > .pane:last-child { border-right: 0; }
.pane-h { margin: 0; padding: 4px 10px; font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: var(--muted-2); background: var(--surface-2); border-bottom: 1px solid var(--line-soft); position: sticky; top: 0; z-index: 1; }
.pane-scroll { overflow-x: auto; overflow-y: hidden; }
table.diff tr[data-row] td { height: 1.5em; }
table.diff { border-collapse: collapse; font-family: var(--mono); font-size: 11.5px; width: max-content; min-width: 100%; }
table.diff td { border-bottom: 0; padding: 0 6px; white-space: pre; vertical-align: top; }
table.diff td.ln { white-space: pre; width: 44px; min-width: 44px; text-align: right; color: var(--muted-2); background: var(--surface-2); user-select: none; font-size: 11px; }
table.diff td.mk { width: 14px; min-width: 14px; color: var(--muted); user-select: none; }
table.diff thead th:first-child, table.diff thead th:nth-child(3) { text-align: right; }
/* No overflow on the cell: a cell that scrolls on its own lets the two sides
   drift apart, which is exactly the thing a side-by-side diff must never do. */
table.diff td.code { white-space: pre; }
table.diff tr.chg-first td { border-top: 1px solid var(--changed-line); }
table.diff tr.chg-last td { border-bottom: 1px solid var(--changed-line); }
.was-added, tr.add td.code { background: var(--add-bg); }
.was-removed, tr.rem td.code { background: var(--del-bg); }
.was-changed, tr.mod td.code { background: var(--mod-bg); }
.empty-cell { background: repeating-linear-gradient(45deg, #f7f9fc, #f7f9fc 5px, #eef1f5 5px, #eef1f5 10px); }
.t-name { color: #0b5c8a; } .t-attr { color: #8a5a00; } .t-val { color: #1d6b34; }
.t-text { color: #16325c; } .t-key { color: #9c2f6d; } .t-comment { color: #5f7189; font-style: italic; }

pre.manifest {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px; overflow: auto; max-height: 34vh; font-family: var(--mono); font-size: 11.5px; margin: 0;
}

/* ---------------------------------------------------------- footer actions -- */

.wb-foot {
  height: var(--foot-h); min-height: var(--foot-h); display: flex; align-items: center; gap: 16px;
  padding: 0 14px; background: var(--surface); border-top: 1px solid var(--line);
  font-size: 12px;
}
.wb-foot .spacer { flex: 1 1 auto; }
.wb-foot .hint { color: var(--muted); font-size: 11.5px; }

/* ------------------------------------------------------------- selection -- */

.memberlist { list-style: none; margin: 6px 0 0; padding: 0; }
.memberlist li { font-size: 11.5px; color: var(--ink-2); padding: 1px 0; }
.memberlist code { font-size: 11.5px; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

.actionbar {
  position: sticky; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--surface); border-top: 1px solid var(--line); padding: 12px 14px; margin: 18px -2px -2px;
}
.actionbar .spacer { flex: 1 1 auto; }
.gridtools { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.scrollbox { max-height: 380px; overflow-y: scroll; scrollbar-gutter: stable; scrollbar-width: thin; border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 10px 12px; background: var(--surface); }

form.filters { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 12px; margin-bottom: 16px; }
form.filters > div { flex: 0 1 200px; }
form.stack { display: flex; flex-direction: column; gap: 14px; }
code.val { display: inline-block; max-width: 420px; overflow-wrap: anywhere; }
.accept { padding-left: 20px; margin: 0; }
.accept li { margin-bottom: 6px; }
.tone-ok .v { color: var(--new); }
.tone-warn .v { color: var(--changed); }
.tone-bad .v { color: var(--del); }

.findings tr.blocking td:first-child { box-shadow: inset 3px 0 0 var(--del); }
.findings tr.advisory td:first-child { box-shadow: inset 3px 0 0 var(--changed); }
.checklist { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 3px 18px; margin: 6px 0; }
.checklist li { margin: 2px 0; min-width: 0; }
.checklist label.inline { margin: 0; min-width: 0; font-size: 12px; display: inline; line-height: 1.5; }
.checklist .lbl { min-width: 0; overflow-wrap: anywhere; }
/* The badge and the parent note follow the name and wrap with it, so a long
   type name never pushes them out of the column. */
.checklist .badge { font-size: 10.5px; padding: 0 5px; white-space: nowrap; }
.checklist .inside { opacity: .8; white-space: nowrap; }

/* -------------------------------------------------------------- progress -- */

.progress { position: relative; height: 22px; background: var(--surface-3); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin: 10px 0; }
.progress .bar { height: 100%; background: linear-gradient(90deg, #1d6fa5, #2b95cc); transition: width .4s ease; }
.progress span { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 10px; font-size: 11.5px; }

/* ------------------------------------------------------------ static deck -- */

.deckbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 14px; background: #fff7e6; border-bottom: 1px solid var(--changed-line);
  font-size: 12px; color: var(--changed);
}
.deckbar .steps { display: flex; gap: 6px; flex-wrap: wrap; }
.deck-step {
  border: 1px solid var(--changed-line); background: #fff; color: var(--changed);
  border-radius: 999px; padding: 3px 10px; font: inherit; font-size: 11.5px; cursor: pointer;
}
.deck-step[aria-pressed="true"] { background: var(--changed); color: #fff; font-weight: 650; }
[hidden] { display: none !important; }

@media (max-width: 1360px) {
  .wb-bar, .insp-bar { grid-template-columns: minmax(0, 1fr); justify-items: stretch; }
  .wb-bar-right, .insp-toolbar { justify-content: flex-start; }
  .wb-seg { justify-self: start; }
  .insp-pair { justify-content: flex-start; }
}

@media (max-width: 900px) {
  .wb { grid-template-columns: minmax(0, 1fr); }
  .wb-side { border-right: 0; border-bottom: 1px solid var(--line); max-height: 40vh; }
  .wb-inspector { height: auto; min-height: 220px; }
  .appbar nav { overflow-x: auto; }
}
@media print { .appbar, .wb-foot, .seg, .splitter { display: none; } }

/* ---------------------------------------------------------------- pass four --
   Child components and dependency rows, and the property cards.
   The reference product puts all three in the one grid: a custom field is a row
   under its object, "Depends on" / "Used by" are rows under the row that owns
   them, and the detail pane shows properties as blocks rather than a matrix.
   Indentation is the only thing that says "inside", so it steps in fixed
   increments and nothing else about a row changes. */

.grid tbody tr.childrow, .grid tbody tr.depitem { cursor: pointer; }
.grid .c-name.ind-1 { padding-left: 24px; }
.grid .c-name.ind-2 { padding-left: 46px; }
.grid .c-name.ind-3 { padding-left: 68px; }
.grid .c-name.ind-4 { padding-left: 90px; }
.grid tbody tr.childrow td { background: var(--surface); }
.grid tbody tr.childrow:hover td, .grid tbody tr.depitem:hover td { background: var(--surface-2); }
.grid tbody tr.childrow[aria-selected="true"] td, .grid tbody tr.depitem[aria-selected="true"] td { background: var(--primary-soft); }
.grid tbody tr.childrow .name a { font-family: var(--mono); font-size: 11.5px; }
.grid tbody tr.depgroup td, .grid tbody tr.depitem td { background: var(--surface-3); font-size: 11.5px; color: var(--ink-2); }
.grid tbody tr.depgroup .deplabel { color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-size: 11px; font-weight: 650; }
.grid tbody tr.depitem a { font-family: var(--mono); font-size: 11.5px; }
.grid tbody tr.depgroup .name .ico.branch, .grid tbody tr.childrow .name .ico.branch { color: var(--primary); }
.grid tbody tr.depgroup td, .grid tbody tr.depitem td { border-bottom-color: var(--line); }

/* The sidebar: every entry is a control, including the child kinds and the
   types this comparison's filter left out. */
.facet-h { margin: 10px 0 2px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted-2); }
.typerow-wrap { display: flex; align-items: center; gap: 4px; }
.typerow-wrap .type-row { flex: 1 1 auto; }
.subtype-row { display: flex; align-items: center; gap: 6px; width: 100%; background: none; border: 0; font: inherit; font-size: 11.5px; color: var(--ink-2); padding: 2px 6px; border-radius: 4px; cursor: pointer; text-align: left; }
.subtype-row:hover { background: var(--surface-2); }
.subtype-row[aria-pressed="true"] { background: var(--primary); color: #fff; font-weight: 650; }
.subtype-row[aria-pressed="true"] .count { color: #e8f4fd; }
.subtype-row .count { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.typelist .subtype-row .branch { color: var(--muted-2); font-size: 11px; }
.excl-row { color: var(--muted-2); }
.excl-row-sub { color: var(--muted-2); }

/* "Type X is not in this comparison" — selecting an out-of-filter type answers
   with what it would take to include it, rather than doing nothing. */
.notin { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0; padding: 9px 14px; background: var(--warn-soft); border-bottom: 1px solid var(--changed-line); font-size: 12px; color: #6b4207; }
.notin h3 { margin: 0; font-size: 12.5px; }
.notin p { margin: 0; flex: 1 1 340px; }
.notin form { margin: 0; }

/* The detail pane: source on the left, target on the right, each property a
   block with a bold label — and a word beside the tint, never colour alone. */
.props { display: grid; grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr); align-items: start; }
.props-side { min-width: 0; }
.props-head { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--line-soft); font-size: 11.5px; color: var(--muted); }
.props-head .org { font-weight: 650; color: var(--ink); }
.props-count { margin-left: auto; font-variant-numeric: tabular-nums; }
.props-arrow { display: grid; place-items: center; padding-top: 12px; color: var(--primary); font-size: 15px; }
.props-cards { list-style: none; margin: 0; padding: 8px 10px 14px; display: grid; gap: 6px; }
.props-empty { margin: 0; padding: 12px 10px; color: var(--muted); font-style: italic; }
.prop { border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--surface); padding: 5px 9px; display: grid; gap: 1px; }
.prop-head { display: flex; align-items: baseline; gap: 6px; }
.prop .pk { font-weight: 650; color: var(--ink); font-size: 12px; }
.prop .pc { color: var(--muted); font-size: 10.5px; }
.prop .pv { font-size: 12px; color: var(--ink-2); overflow-wrap: anywhere; }
.prop.same { background: var(--surface-2); }
.prop.added { background: var(--add-bg); border-color: var(--new-line); }
.prop.removed { background: var(--del-bg); border-color: var(--del-line); }
.prop.changed { background: var(--mod-bg); border-color: var(--changed-line); }
.prop.absent { opacity: .55; }
.pv-tag { margin-left: auto; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.pv-bool { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; font-size: 10px; color: #fff; }
.pv-bool.yes { background: var(--new); }
.pv-bool.no { background: #46586d; }
.pv-code { margin: 2px 0 0; padding: 4px 6px; background: var(--surface-3); border-radius: 4px; font-family: var(--mono); font-size: 11px; white-space: pre-wrap; overflow-wrap: anywhere; }
.pv-long { white-space: pre-wrap; }
.pv-missing, .pv-empty { color: var(--muted); font-style: italic; }
.childlist { list-style: none; margin: 0; padding: 0; }
.childlist li { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }
.childlist li:last-child { border-bottom: 0; }

@media (max-width: 900px) {
  .props { grid-template-columns: minmax(0, 1fr); }
  .props-arrow { padding: 4px 0; }
  .grid .c-name.ind-1 { padding-left: 14px; }
  .grid .c-name.ind-2 { padding-left: 26px; }
  .grid .c-name.ind-3 { padding-left: 38px; }
  .grid .c-name.ind-4 { padding-left: 50px; }
}

/* ---------------------------------------------------------------- pass five --
   What a rendered critique of the new screens turned up: rows taller than the
   reference, a property block that spent two lines on one property, counts that
   contradicted each other, and a diff whose empty half collapsed. */

/* Density: the reference fits about 28px per row, and a table of a thousand
   components is what this screen is for. */
.grid td, .grid th { padding-top: 4px; padding-bottom: 4px; }
.grid .c-detail { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 340px; }
.grid tbody tr.childrow td, .grid tbody tr.depitem td { padding-top: 3px; padding-bottom: 3px; }

/* A row is data, not a wall of links: names read as text until you reach for
   them. A dependency you can jump to keeps the link colour, because there it is
   the whole point. */
.grid .name a { color: var(--ink); }
.grid .name a:hover, .grid .name a:focus-visible { color: var(--primary); text-decoration: underline; }
.grid tbody tr.childrow .name a, .grid tbody tr.depitem a { color: var(--primary); }

/* Sidebar counts as pills, the way the reference shows them. */
.type-row .count, .subtype-row .count {
  background: var(--surface-3); border-radius: 999px; padding: 1px 7px; min-width: 22px; text-align: center;
  font-size: 10.5px; color: var(--muted);
}
.type-row[aria-pressed="true"] .count, .subtype-row[aria-pressed="true"] .count { background: rgba(255, 255, 255, .22); color: #fff; }
.type-row[aria-pressed="true"] .count { background: #0a5b95; }

/* One property, one line: label, value, and a word when the property is only on
   one side. Long text and code still get their own block. */
.props-cards { max-width: 660px; }
.prop { gap: 0; }
.prop-line { display: flex; align-items: baseline; gap: 6px; }
.prop-line .pv { flex: 1 1 auto; }
.prop .pv-tag { margin-left: auto; white-space: nowrap; }
.prop .pv-code { margin-top: 4px; }
.props-side + .props-arrow + .props-side { border-left: 1px solid var(--line); }
.props-side:last-child .props-head { padding-left: 14px; }

/* The nav has nothing to step through in the property view; the counter does not
   move with it, so the two never read as one control. */
.insp-count { margin-left: auto; font-size: 11.5px; color: var(--muted); }
.insp-nav { margin-left: 10px; }

/* An empty half of a side-by-side diff keeps its half: a component that exists on
   one side only must not look like a broken table. */
table.diff td.code.empty-cell { min-width: 60ch; }
/* A one-sided difference: two equal halves, so the empty side still reads as a
   side rather than as a squeezed strip. */
.diff-wrap.side-panes.one-sided > .pane { background: repeating-linear-gradient(45deg, transparent, transparent 6px, var(--surface-2) 6px, var(--surface-2) 7px); }
.diff-wrap.side-panes.one-sided > .pane .diff { background: transparent; }
.subtypelist .typerow-wrap { gap: 2px; }

/* One reserved column for every count badge in the sidebar, so a nested entry's
   count lines up with the top-level ones. */
.subtypelist li { display: block; padding: 0; }
.subtypelist .typerow-wrap { width: 100%; }
.subtype-row { flex: 1 1 auto; width: auto; }
/* A dependency you can jump to is a link; the darker blue keeps it above the AA
   floor on the tinted dependency background. */
.grid tbody tr.childrow .name a, .grid tbody tr.depitem a { color: var(--primary-dark); }

/* Small print carries meaning here (which org a property belongs to, why a
   dependency row is there), so it is held to the same contrast floor as body
   text rather than blended into the background. */
.prop .pv-tag { color: var(--ink-2); }
.grid tbody tr.depitem .c-detail, .grid tbody tr.depitem .muted, .grid tbody tr.depgroup .muted { color: var(--ink-2); }

/* FR-6.10: a flow's changes as sentences, read before the XML. */
.flowsummary { margin: 0; padding-left: 18px; }
.flowsummary li { margin: 3px 0; font-size: 13px; }