.dependency-intro { padding-bottom: 48px; }
.dependency-intro h1 { max-width: 920px; }
.source-links { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 20px; }
.source-links a { font-size: 14px; }
.dependency-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.dependency-stats article { border: 1px solid var(--ul-border); border-top: 3px solid var(--ul-edge); border-radius: var(--ul-radius-m); background: var(--ul-surface); padding: 22px; }
.dependency-stats h3 { margin: 2px 0 0; font-size: 15px; }
#dependency-search { display: block; width: min(100%, 760px); margin: 8px 0 12px; padding: 10px 13px; }
.node-list, .relation-list, .path-list { padding: 0; list-style: none; }
.node-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.node-button { width: 100%; text-align: left; background: var(--ul-surface); color: var(--ul-text); border: 1px solid var(--ul-border); padding: 14px 16px; }
.node-button.classification-open-active,
.node-button.classification-open-historical,
.node-button.classification-author-side-candidate,
.node-button.classification-author-side-reduction { border-style: dashed; }
.node-button.classification-proved-reviewed { border-style: double; border-width: 3px; }
.node-button.classification-engineering-control { border-width: 2px; }
.node-button:hover { border-color: var(--ul-link); filter: none; }
.node-button strong, .node-button span { display: block; overflow-wrap: anywhere; }
.node-button span { color: var(--ul-muted); font-size: 12px; margin-top: 3px; }
.target-list { counter-reset: target; list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--ul-border); }
.target-list li { counter-increment: target; display: grid; grid-template-columns: 44px minmax(0, 1fr) fit-content(35%); gap: 16px; align-items: start; padding: 18px 0; border-bottom: 1px solid var(--ul-border); }
.target-list li.classification-open-active,
.target-list li.classification-open-historical,
.target-list li.classification-author-side-candidate,
.target-list li.classification-author-side-reduction { border-left: 3px dashed var(--ul-border); padding-left: 12px; }
.target-list li::before { content: counter(target, decimal-leading-zero); color: var(--ul-gold); font: 700 12px/1.7 system-ui, sans-serif; letter-spacing: .1em; }
.target-list button { text-align: left; min-height: 0; padding: 0; background: transparent; border: 0; color: var(--ul-link); overflow-wrap: anywhere; }
.target-list button:hover { text-decoration: underline; filter: none; }
.target-list small { display: block; color: var(--ul-muted); margin-top: 4px; }
.impact { border: 1px solid var(--ul-border); border-radius: var(--ul-radius-l); padding: 4px 9px; color: var(--ul-muted); font-size: 12px; }
.impact span { display: inline-block; }
.node-detail { scroll-margin-top: 20px; }
.empty-state { border: 1px dashed var(--ul-border); border-radius: var(--ul-radius-m); padding: 24px; color: var(--ul-muted); }
.metadata-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.metadata-grid div { background: var(--ul-surface); border: 1px solid var(--ul-border); border-radius: var(--ul-radius-s); padding: 14px; min-width: 0; }
.metadata-grid dt { margin: 0 0 3px; color: var(--ul-muted); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.metadata-grid dd { margin: 0; overflow-wrap: anywhere; }
.relation-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 24px; }
.relation-grid article, .path-panel { border: 1px solid var(--ul-border); border-radius: var(--ul-radius-m); padding: 20px; background: var(--ul-surface); }
.relation-grid h3, .path-panel h3 { margin-top: 0; }
.relation-list li { border-top: 1px solid var(--ul-border); padding: 11px 0; }
.relation-list li:first-child { border-top: 0; }
.relation-list button { border: 0; background: transparent; color: var(--ul-link); min-height: 0; padding: 0; text-align: left; overflow-wrap: anywhere; }
.relation-list button:hover { text-decoration: underline; filter: none; }
.edge-note { display: block; color: var(--ul-muted); font-size: 12px; overflow-wrap: anywhere; }
.edge-kind { color: var(--ul-text); font-weight: 650; }
.path-panel { margin-top: 18px; }
.path-list { counter-reset: path; }
.path-list > li { counter-increment: path; border-top: 1px solid var(--ul-border); padding: 14px 0; }
.path-list > li:first-child { border-top: 0; }
.path-list > li::before { content: "Path " counter(path); display: block; color: var(--ul-gold); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 6px; }
.path-step { display: inline; overflow-wrap: anywhere; }
.path-arrow { color: var(--ul-muted); margin: 0 7px; overflow-wrap: anywhere; }
.source-boundary { border-bottom: 0; }
.filter-controls, .object-actions { display:flex;flex-wrap:wrap;gap:16px;align-items:end; }
.filter-controls select { display:block;max-width:100%;margin-top:8px;padding:10px;min-height:44px; }
.filter-controls button { min-height:44px; }
/* Under reader text spacing (WCAG 1.4.12) at 320px the classification item, sized by its select's longest option, was 315px wide in its 280px filter row and pushed the page to 335px; items may now shrink to the row. */
.filter-controls > * { min-width: 0; max-width: 100%; }
.object-actions { margin:20px 0; }
.object-panel { border-top:1px solid var(--ul-border);padding:22px 0;scroll-margin-top:20px; }
.object-panel h3 { margin-top:0; }
.object-panel summary { cursor:pointer;font-weight:650;padding:10px 0; }
.evidence-scroll { overflow-x:auto; }
.evidence-scroll:focus-visible { outline:3px solid var(--ul-focus);outline-offset:4px; }
/* Automatic table layout: Lane and Record state keep their 20%/22% widths but never shrink below their longest word, so their words never break mid-word.
   Source detail breaks anywhere, so long URLs, paths and unlinked JSON metadata stay inside the table; on phones some of its ordinary words split too. Breaking only its links and code
   kept those words whole but made all 49 tables wider than their scroll region at 320px (by 18-612px; 57-797px with reader text spacing). Phones get 8px side padding. Native table semantics are unchanged. */
.evidence-table { width:100%;border-collapse:collapse; }
.evidence-table caption { text-align:left;color:var(--ul-muted);padding:12px 0; }
.evidence-table th, .evidence-table td { text-align:left;vertical-align:top;border-bottom:1px solid var(--ul-border);padding:12px;overflow-wrap:normal; }
.evidence-table td:nth-child(3) { overflow-wrap:anywhere; }
.evidence-table th:nth-child(1) { width:20%; }
.evidence-table th:nth-child(2) { width:22%; }
.dependency-page select:focus-visible, .object-panel summary:focus-visible { outline:3px solid var(--ul-focus);outline-offset:4px; }
@media print { .object-actions, .filter-controls, #dependency-search:placeholder-shown { display: none; } .node-button, .target-list button, .relation-list button, .metadata-grid button { display: inline-block; } } /* brand.css hides buttons and empty search fields in print, but #dependency-search sets display by id; a filled search prints its query above the results it produced; the node and relation names on buttons here are the evidence */
.dependency-page button:focus-visible, .dependency-page input:focus-visible, .dependency-page a:focus-visible { outline: 3px solid var(--ul-focus); outline-offset: 4px; }
@media (max-width: 760px) {
  .dependency-stats, .node-list, .metadata-grid, .relation-grid { grid-template-columns: 1fr; }
  .target-list li { grid-template-columns: 34px minmax(0, 1fr); }
  .target-list .impact { grid-column: 2; justify-self: start; }
  .relation-grid { gap: 14px; }
}
@media (max-width: 640px) { .evidence-table th, .evidence-table td { padding:12px 8px; } }

#node-record { white-space:pre-wrap;overflow-wrap:anywhere;max-width:100%; }
/* A long node id in the heading or a long token in the notes or scope breaks rather than widening the page at phone width; ordinary words still wrap whole. */
#detail-heading, #object-notes, #object-scope { overflow-wrap: anywhere; }
.object-panel:focus-visible, #object-context:focus-visible { outline:3px solid var(--ul-focus);outline-offset:4px; }
/* Source links are a labelled nav landmark; keep their link colour and weight (brand.css nav a sets text colour, style.css nav sets 650). */
.source-links { font-weight: 400; }
.source-links a { color: var(--ul-link); }
.target-list small { overflow-wrap: anywhere; }
.target-list button, .relation-list button { padding: 6px 0; margin: -6px 0; }
.node-detail:focus-visible { outline: 3px solid var(--ul-focus); outline-offset: 4px; }
.node-button span { font-weight: 400; letter-spacing: .02em; }
.node-button strong { font-size: 15px; }
@media (forced-colors: active) { .node-detail:focus-visible { outline-color: Highlight; } }