:root {
  --ink: #111;
  --muted: #666;
  --faint: #8a8a8a;
  --rule: #d8d8d8;
  --rule-strong: #111;
  --surface: #f5f5f4;
  --paper: #fff;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", Inter, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html { background: var(--paper); }

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

button,
input,
summary { font: inherit; }

button {
  border: 0;
  margin: 0;
  padding: 0;
  color: inherit;
  background: none;
  cursor: pointer;
}

button:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.mono { font-family: var(--mono); }
.muted { color: var(--muted); }

.app-header {
  min-height: 58px;
  padding: 13px 22px;
  border-bottom: 1px solid var(--rule-strong);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 24px;
}

/* Home sits with the project name rather than floating alone: the header is
   space-between, so an unpaired third child would push the name to the centre. */
.header-lead {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 14px;
}

/* A link that has to read as a control. Bordered rather than underlined, so it
   is distinguishable at a glance from the prose links inside a result. */
.app-home {
  flex: none;
  padding: 4px 11px;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.app-home:hover { background: var(--ink); color: var(--paper); }
.app-home:active { transform: translateY(1px); }

.app-home:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.project-identity,

.project-identity { gap: 5px 10px; }
.project-identity strong { font-size: 16px; letter-spacing: -0.01em; }
.project-identity span { color: var(--muted); }

.project-totals {
  gap: 14px;
  color: var(--muted);
  white-space: nowrap;
}

.project-totals strong,
.source-totals strong {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.workspace {
  min-height: calc(100vh - 58px);
  display: grid;
  grid-template-columns: 286px minmax(0, 1fr);
}

.outline {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow-y: auto;
  border-right: 1px solid var(--rule);
  background: var(--paper);
}

.outline-search {
  position: sticky;
  top: 0;
  z-index: 4;
  padding: 16px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}

.outline-search label {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
}

.outline-search input {
  width: 100%;
  height: 36px;
  border: 1px solid #aaa;
  border-radius: 0;
  padding: 6px 9px;
  color: var(--ink);
  background: var(--paper);
}

.search-results { border-bottom: 1px solid var(--rule-strong); }

.search-result {
  width: 100%;
  padding: 9px 16px;
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 2px 8px;
  text-align: left;
}

.search-result:hover { background: var(--surface); }
.result-type { color: var(--faint); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.search-result strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result-context { grid-column: 2; color: var(--muted); font-size: 12px; }
.search-empty { margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--rule); color: var(--muted); }

.source-options { border-bottom: 1px solid var(--rule-strong); }
.source-group { border-bottom: 1px solid var(--rule); }
.source-group:last-child { border-bottom: 0; }

.source-option {
  width: 100%;
  padding: 13px 16px;
  display: block;
  text-align: left;
}

.source-option:hover { background: var(--surface); }
.source-option.is-selected {
  background: var(--surface);
  box-shadow: inset 3px 0 0 var(--ink);
}

.source-group.is-active > .source-option { border-bottom: 1px solid var(--rule); }

.source-option strong { display: block; font-size: 14px; }
.source-option span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
}

.source-section-list { padding: 6px 0 10px; }

.section-link {
  width: 100%;
  min-height: 36px;
  padding: 7px 16px 7px 30px;
  display: flex;
  align-items: baseline;
  gap: 12px;
  text-align: left;
}

.section-link:hover { background: var(--surface); }
.section-link.is-current {
  background: var(--surface);
  box-shadow: inset 3px 0 0 var(--ink);
  font-weight: 620;
}
.section-link span:first-child { min-width: 0; }
.section-link span:last-child {
  margin-left: auto;
  color: var(--faint);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.source-document {
  min-width: 0;
  padding: 30px 38px 110px;
}

.source-header {
  padding-bottom: 24px;
  border-bottom: 2px solid var(--rule-strong);
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
}

.object-type {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.source-header h1 {
  margin: 0;
  font-size: 28px;
  line-height: 1.18;
  letter-spacing: -0.025em;
}

.source-header p {
  margin: 5px 0 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
}

.source-totals {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.circuit-sections { border-bottom: 1px solid var(--rule-strong); }

.circuit-section {
  border-top: 1px solid var(--rule-strong);
  scroll-margin-top: 12px;
}

.circuit-section:first-child { border-top: 0; }

.circuit-section > summary {
  min-height: 56px;
  padding: 14px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 64px;
  gap: 14px;
  align-items: baseline;
  cursor: pointer;
  list-style-position: inside;
}

.circuit-section > summary:hover { background: #fafafa; }
.section-title { font-size: 18px; font-weight: 680; letter-spacing: -0.015em; }
.section-component-count { color: var(--muted); font-size: 12px; }

.disclosure-state {
  color: var(--muted);
  font-size: 11px;
  text-align: right;
}

.when-open { display: none; }
details[open] > summary .when-closed { display: none; }
details[open] > summary .when-open { display: inline; }

.section-components {
  padding: 0 0 18px 18px;
  border-top: 1px solid var(--rule);
}

.component-group {
  border-bottom: 1px solid var(--rule);
  scroll-margin-top: 10px;
}

.component-group > summary {
  min-height: 46px;
  padding: 11px 10px;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) 68px 64px;
  gap: 10px;
  align-items: baseline;
  cursor: pointer;
  list-style-position: inside;
}

.component-group > summary:hover { background: var(--surface); }
.component-group[open] > summary {
  position: sticky;
  top: 0;
  z-index: 3;
  border-bottom: 1px solid var(--rule-strong);
  background: var(--paper);
}

.component-ref { font-family: var(--mono); font-weight: 700; }
.component-value { min-width: 0; overflow-wrap: anywhere; font-weight: 560; }
.component-pin-count { color: var(--muted); font-size: 12px; white-space: nowrap; }

.component-body { padding: 0 10px 20px; }

.source-details { border-bottom: 1px solid var(--rule); }
.source-details > summary {
  width: max-content;
  padding: 9px 0;
  cursor: pointer;
  color: var(--muted);
  font-size: 12px;
}

.source-details dl {
  margin: 0 0 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}

.source-details dl > div {
  min-width: 0;
  padding: 8px 10px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.source-details dt {
  margin-bottom: 2px;
  color: var(--faint);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.source-details dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-family: var(--mono);
  font-size: 12px;
}

.table-scroll {
  width: 100%;
  overflow-x: auto;
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
}

table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.pin-table { min-width: 620px; }

th {
  padding: 8px 10px;
  border-bottom: 1px solid var(--rule);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

tbody tr:last-child td { border-bottom: 0; }
.pin-row:hover { background: #fafafa; }
.pin-row.is-focused {
  background: #efefed;
  box-shadow: inset 3px 0 0 var(--ink);
}
.pin-row:focus {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}
.pin-row.is-focused .pin-number,
.pin-row.is-focused .pin-name,
.pin-row.is-focused .pin-net { color: var(--ink); font-weight: 650; }

.pin-table th:nth-child(1),
.pin-table td:nth-child(1) { width: 72px; }
.pin-table th:nth-child(2),
.pin-table td:nth-child(2) { width: 150px; }

.pin-number,
.pin-name,
.pin-net { font-family: var(--mono); }

/* The library's electrical claim about the pin, in its own spelling. */
.pin-type { font-family: var(--mono); color: var(--muted); white-space: nowrap; }
.pin-table th:nth-child(3),
.pin-table td:nth-child(3) { width: 110px; }

.net-member-type {
  color: var(--faint);
  font-family: var(--mono);
  font-size: 11px;
  white-space: nowrap;
}
.pin-number { color: var(--muted); }

.expanded-endpoint .net-member-pin,
.trace-return button {
  text-decoration: underline;
  text-decoration-color: #aaa;
  text-underline-offset: 3px;
}

.net-membership-button:hover,
.expanded-endpoint:hover .net-member-pin,
.trace-return button:hover { text-decoration-color: var(--ink); }

.net-membership-button {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0 5px;
  text-align: left;
  /* One control, one line. Flex items are separate decoration boxes, so a
     text-decoration underline breaks at the 5px gap and the single button
     reads as two. A border draws continuously under gap and all. */
  text-decoration: none;
  border-bottom: 1px solid #aaa;
}

.net-membership-button:hover { border-bottom-color: var(--ink); }

.net-membership-button .net-total { color: var(--muted); }

.net-membership-detail-row > td {
  padding: 0 10px 12px;
  border-bottom: 1px solid var(--rule-strong);
  background: #fafafa;
}

.net-membership-panel {
  border: 1px solid var(--rule-strong);
  background: var(--paper);
}

.net-membership-panel-header {
  min-height: 44px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.net-membership-panel-header > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.net-membership-panel-header strong { font-family: var(--mono); }
.net-membership-panel-header span,
.net-membership-close { color: var(--muted); font-size: 12px; }
.net-membership-close { text-decoration: underline; text-underline-offset: 3px; }
.net-membership-close:hover { color: var(--ink); }

.net-member-list.is-scrollable {
  max-height: 286px;
  overflow-y: auto;
}

.net-member-list-head,
.net-member {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(160px, 1.1fr) 110px minmax(180px, 1fr);
  text-align: left;
}

.net-member-list-head {
  position: sticky;
  top: 0;
  z-index: 1;
  color: var(--faint);
  background: var(--paper);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.net-member-list-head > span,
.net-member > span,
.net-member > strong {
  min-width: 0;
  padding: 6px 8px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  overflow-wrap: anywhere;
}

.expanded-endpoint:hover { background: var(--surface); }
.net-member-pin { font-family: var(--mono); }
.net-member-role,
.net-member-component { color: var(--muted); font-weight: 400; }
.is-current-member { background: var(--surface); }
.is-current-member .net-member-role { color: var(--ink); font-weight: 650; }
.net-member-component { display: flex; flex-direction: column; }
.net-member-path { margin-top: 2px; font-family: var(--mono); font-size: 11px; }

.trace-return {
  position: sticky;
  top: 46px;
  z-index: 2;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule-strong);
  background: var(--paper);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 18px;
  flex-wrap: wrap;
}

.trace-return-context {
  display: flex;
  align-items: baseline;
  gap: 6px 12px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 12px;
}

.trace-return-context span { color: var(--muted); }

.trace-return button {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 650;
}
.empty-state { margin: 0; padding: 18px 0; color: var(--muted); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  .circuit-section[open] > .section-components,
  .component-group[open] > .component-body,
  .net-membership-detail-row > td {
    animation: reveal 140ms ease-out;
  }
}

@keyframes reveal {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
  .app-header { align-items: flex-start; flex-direction: column; }
  .project-totals { white-space: normal; }
  .workspace { grid-template-columns: 1fr; }
  .outline {
    position: static;
    height: auto;
    max-height: none;
    border-right: 0;
    border-bottom: 1px solid var(--rule-strong);
  }
  .outline-search { position: static; }
  .source-document { padding: 24px 20px 70px; }
  .source-header { align-items: flex-start; flex-direction: column; }
  .source-totals { justify-content: flex-start; white-space: normal; }
  .section-components { padding-left: 0; }
  .component-group > summary {
    grid-template-columns: 54px minmax(0, 1fr) 58px;
  }
  .component-group > summary .disclosure-state { grid-column: 2 / -1; text-align: left; }
  .component-group[open] > summary { position: static; }
  .trace-return { position: static; }
  .source-details dl { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .net-member-list-head,
  .net-member {
    grid-template-columns: minmax(140px, 1fr) 90px minmax(140px, 1fr);
  }
}

/* --------------------------------------------------------------------- */
/* Absence and refusal: what the screen shows when it was handed no       */
/* result, or one it does not understand.                                 */
/* --------------------------------------------------------------------- */

.report-placeholder {
  max-width: 46ch;
  margin: 0 auto;
  padding: 18vh 22px 0;
  text-align: left;
}

.report-placeholder h1 {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.report-placeholder p {
  margin: 0 0 10px;
  color: var(--muted);
}

.report-placeholder a {
  color: var(--ink);
  text-underline-offset: 3px;
}

.report-refusal {
  border-left: 3px solid var(--rule-strong);
  padding-left: 18px;
}

.report-refusal-reason {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   View tabs and the reduction panel
   -------------------------------------------------------------------------- */

.view-tabs {
  display: flex;
  gap: 2px;
  padding: 0 22px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}

.view-tab {
  appearance: none;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  padding: 11px 14px;
  font: inherit;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
}

.view-tab:hover { color: var(--ink); }
.view-tab:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }

.view-tab.is-current {
  color: var(--ink);
  border-bottom-color: var(--rule-strong);
  font-weight: 600;
}

.loss-panel {
  max-width: 940px;
  margin: 0 auto;
  padding: 26px 22px 60px;
}

.loss-header h2 { margin: 0 0 8px; font-size: 19px; }
.loss-header p { margin: 0; max-width: 62ch; color: var(--muted); line-height: 1.55; }

.loss-absent {
  margin: 0;
  padding: 18px;
  border: 1px solid var(--rule);
  background: var(--surface);
  color: var(--muted);
  max-width: 62ch;
  line-height: 1.55;
}

.loss-totals {
  list-style: none;
  margin: 22px 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.loss-totals li {
  background: var(--paper);
  padding: 13px 15px;
  font-size: 13px;
  color: var(--muted);
}

.loss-totals strong { display: block; font-size: 22px; color: var(--ink); }

.loss-note { color: var(--faint); font-size: 12px; }

.loss-tables {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
  margin: 26px 0;
}

.loss-table { width: 100%; border-collapse: collapse; font-size: 13px; }

.loss-table caption {
  text-align: left;
  padding-bottom: 7px;
  font-weight: 600;
  color: var(--ink);
}

.loss-table th,
.loss-table td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--rule);
}

.loss-table th { color: var(--muted); font-weight: 500; }
.loss-table .loss-count { text-align: right; font-variant-numeric: tabular-nums; }

.loss-unclassified {
  margin: 26px 0;
  padding: 17px 19px;
  border: 1px solid var(--rule);
  background: var(--surface);
}

.loss-unclassified h3 { margin: 0 0 7px; font-size: 15px; }
.loss-unclassified p { margin: 0; max-width: 62ch; color: var(--muted); line-height: 1.55; }

.loss-field-list {
  list-style: none;
  margin: 13px 0 0;
  padding: 0;
  display: grid;
  gap: 5px;
}

.loss-field-list li { font-size: 12px; }
.loss-field-list code { font-family: var(--mono); color: var(--ink); word-break: break-all; }

.loss-caveat {
  margin-top: 26px;
  padding-top: 17px;
  border-top: 1px solid var(--rule);
}

.loss-caveat p { margin: 0; max-width: 62ch; color: var(--muted); line-height: 1.55; font-size: 13px; }

/* --------------------------------------------------------------------------
   Extraction quality: the standing partial notice and the "how" panel
   -------------------------------------------------------------------------- */

.status-banner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 20px;
  flex-wrap: wrap;
  padding: 11px 22px;
  border-bottom: 1px solid var(--rule);
  background: #fdf6e3;
}

.status-banner p { margin: 0; font-size: 13px; line-height: 1.5; max-width: 78ch; }

.status-banner-link {
  appearance: none;
  border: 1px solid var(--rule-strong);
  background: none;
  padding: 5px 11px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}

.status-banner-link:hover { background: var(--paper); }
.status-banner-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }

.quality-panel {
  max-width: 940px;
  margin: 0 auto;
  padding: 26px 22px 60px;
}

.quality-panel h3 {
  margin: 30px 0 9px;
  font-size: 15px;
}

.quality-status { margin: 0 0 13px; font-size: 13px; color: var(--muted); }

.quality-table { max-width: 640px; }
.quality-table .is-incomplete td { font-weight: 600; }

.quality-issues {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 11px;
  max-width: 78ch;
}

.quality-issues li {
  padding: 11px 13px;
  border: 1px solid var(--rule);
  background: var(--surface);
}

.quality-issues li.is-blocking { border-color: var(--rule-strong); }
.quality-issue-message { margin: 0 0 4px; font-size: 13px; line-height: 1.5; }
.quality-issues p { margin: 0; }

.quality-provenance {
  margin: 0;
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  max-width: 640px;
}

.quality-provenance div {
  display: flex;
  gap: 14px;
  justify-content: space-between;
  background: var(--paper);
  padding: 8px 13px;
  font-size: 13px;
}

.quality-provenance dt { color: var(--muted); }
.quality-provenance dd { margin: 0; text-align: right; }

.source-details dd.is-unknown { color: var(--faint); font-style: italic; }

/* --- Per-stage loss: each stage stands alone, ours is marked --- */

.loss-stage { margin: 30px 0; }
.loss-stage h3 { margin: 0 0 5px; font-size: 15px; }
.loss-stage-blurb { margin: 0 0 13px; max-width: 72ch; color: var(--muted); font-size: 13px; line-height: 1.55; }

.loss-stage.is-ours {
  padding: 17px 19px;
  border: 1px solid var(--rule-strong);
  background: var(--surface);
}

.loss-stage .loss-table { max-width: 460px; }
.loss-stage .loss-field-table { max-width: none; }

.loss-fields { margin-top: 15px; }
.loss-fields summary { cursor: pointer; font-size: 13px; }
.loss-fields[open] summary { margin-bottom: 9px; }
.loss-fields .loss-field-list { max-height: 340px; overflow-y: auto; }

.loss-omitted {
  margin: 13px 0 0;
  padding: 9px 11px;
  border-left: 2px solid var(--rule-strong);
  max-width: 72ch;
  line-height: 1.5;
}

/* --- A discarded field as a row: content first, address underneath --- */

.loss-field-table { width: 100%; table-layout: fixed; }
.loss-field-table th,
.loss-field-table td {
  vertical-align: top;
  padding: 7px 8px;
  /* Part names and file paths are long unbroken tokens with no natural break
     opportunity. Without this they run straight through the next column. */
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* The part name is one long token on many real designs, so it gets room to
   wrap two or three times rather than five. */
.loss-field-table th:nth-child(2), .loss-field-table td:nth-child(2) { width: 26%; }
.loss-field-table th:nth-child(3), .loss-field-table td:nth-child(3) { width: 32%; }

.loss-held { display: block; font-size: 13px; color: var(--ink); overflow-wrap: anywhere; }

.loss-address {
  display: block;
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--faint);
  overflow-wrap: anywhere;
  word-break: break-all;
}

.loss-fields .loss-field-table { max-height: none; }
.loss-fields { max-height: 460px; overflow-y: auto; }

/* --- Per-component properties: what the source carried, and the proof --- */

/*
 * The service sends `fields` for every component; this is where they surface.
 *
 * A disclosure LIST rather than a table, for two reasons. The citation body
 * needs the full row width — squeezed into a narrow last column it wrapped a
 * filename and a UUID into unreadable slivers. And a component already has one
 * table, the pin table; a second one inside the same part makes "the table"
 * ambiguous to a reader and to a screen reader alike.
 *
 * Value styling is state-driven on purpose: a property the designer left empty
 * must not read the same as one we failed to read, because those gaps belong to
 * different people.
 */

.component-fields { border-bottom: 1px solid var(--rule); }

/* Styled identically to .source-details > summary on purpose: same native
   disclosure triangle, same size, same weight. Two sibling disclosures with
   two different triangles read as two different kinds of control. */
.component-fields > summary {
  width: max-content;
  padding: 9px 0;
  cursor: pointer;
  color: var(--muted);
  font-size: 12px;
}

.component-fields > summary .component-fields-count { margin-left: 10px; }

.component-fields-count { color: var(--faint); font-size: 11px; }

.field-list {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}

.field-entry { border-bottom: 1px solid var(--rule); }

.field-entry > .field-evidence > summary {
  display: grid;
  grid-template-columns: minmax(120px, 190px) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
  padding: 8px 4px 8px 0;
  cursor: pointer;
}

.field-entry > .field-evidence > summary:hover { background: var(--surface); }
.field-entry > .field-evidence > summary:focus-visible {
  outline: 2px solid var(--rule-strong);
  outline-offset: -2px;
}

.field-name {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.field-value {
  min-width: 0;
  font-family: var(--mono);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.field-value-text { color: var(--ink); }

/* Empty, absent and unreadable each read differently at a glance. */
.field-state-note { font-family: var(--sans); font-size: 11px; }
.field-value.is-blank .field-state-note { color: var(--muted); }
.field-value.is-absent .field-state-note { color: var(--faint); }
.field-value.is-unknown .field-state-note { color: var(--faint); font-style: italic; }

.cite-chip {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 2px 7px;
  border: 1px solid var(--rule);
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.field-evidence > summary:hover .cite-chip { border-color: var(--muted); color: var(--ink); }

/*
 * The open state must outrank hover, and be written to say so.
 *
 * `.field-evidence[open] .cite-chip` alone LOSES to the hover rule above on
 * specificity, and the pointer is always still hovering right after a click --
 * so the chip a reader had just opened rendered #111 text on a #111 background.
 * Invisible, every time, on the one interaction this control exists to serve.
 */
.field-evidence[open] > summary .cite-chip,
.field-evidence[open] > summary:hover .cite-chip {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.field-evidence[open] .cite-caret { transform: rotate(180deg); }
.cite-caret { display: inline-block; font-size: 9px; }

.field-evidence-body {
  margin: 0 0 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}

.field-evidence-body > div {
  min-width: 0;
  padding: 7px 9px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

/* Prose and verbatim values get the whole width; short facts pair up. */
.field-evidence-body > .cite-wide { grid-column: 1 / -1; }

.field-evidence-body dt {
  margin-bottom: 2px;
  color: var(--faint);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.field-evidence-body dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-family: var(--sans);
  font-size: 12px;
}

.field-evidence-body dd code { font-family: var(--mono); font-size: 11px; }

.field-verbatim {
  display: block;
  padding: 5px 7px;
  background: var(--surface);
  overflow-wrap: anywhere;
}

@media (max-width: 720px) {
  .field-entry > .field-evidence > summary {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .field-name { grid-column: 1 / -1; }
  .field-evidence-body { grid-template-columns: minmax(0, 1fr); }
}