/* Requirements explorer, adapted to the AppSW reader and review package. */
.trigger-mode, #trigger-map { font-family: var(--appsw-font, system-ui); color: var(--appsw-ink, #183445); }
.trigger-mode { display: flex; gap: .4rem; margin-top: 1rem; }
.trigger-mode button[aria-pressed="true"], #trigger-map button[aria-pressed="true"] { background: var(--appsw-navy, #163c54); color: #fff; border-color: var(--appsw-navy, #163c54); }
.trigger-map-active .overview-copy > .reader-controls,
.trigger-map-active .overview-copy > #content { max-width: 100%; }
.trigger-map-active .overview-copy #header > h1 { margin-bottom: .2rem; }
#content > [hidden], #trigger-map [hidden], #toc[hidden] { display: none !important; }
#trigger-map { --tm-line: #bdcdd5; --tm-base: #315e8a; --tm-server: #227366; --tm-agent: #91581d; margin-block: .7rem 2rem; }
#trigger-map * { box-sizing: border-box; }
#trigger-map { container-type: inline-size; }
.trigger-stage { min-width: 0; }
.trigger-graph-wrap { min-width: 0; }
@container (min-width: 1100px) {
  .trigger-stage:has(.trigger-graph-wrap:not([hidden])) { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 1rem; align-items: start; }
  .trigger-stage:has(.trigger-graph-wrap:not([hidden])) .trigger-detail { margin-top: 0; max-height: calc(min(57vh, 650px) + 62px); overflow: auto; }
}
#trigger-map h2 { margin: 0 0 .5rem; font: 700 1.5rem/1.3 var(--appsw-font, system-ui); color: var(--appsw-navy, #183445); }
#trigger-map h3 { margin: 0 0 .5rem; font: 700 1.1rem/1.4 var(--appsw-font, system-ui); color: var(--appsw-navy, #183445); }
#trigger-map p, #trigger-map li { font-size: .85rem; line-height: 1.6; }
#trigger-map p { margin: 0 0 .75rem; }
#trigger-map button, #trigger-map select, #trigger-map input { font: inherit; font-size: .85rem; }
#trigger-map button, #trigger-map select, #trigger-map input {
  border: 1px solid #a4b9c5; border-radius: 5px; padding: .55rem .7rem;
  background: #fff; color: #183445; min-height: 40px; margin: 0;
}
#trigger-map button { cursor: pointer; }
#trigger-map button:hover { background: #e5eff4; color: #183445; }
#trigger-map button:disabled { cursor: default; opacity: .5; }
#trigger-map :is(button, select, input, a, summary):focus-visible { outline: 3px solid var(--appsw-focus, #176ea2); outline-offset: 3px; }
.trigger-intro { max-width: 80rem; }
.trigger-controls { display: flex; flex-wrap: wrap; align-items: end; gap: .7rem; padding: 1rem; background: #eef4f6; border: 1px solid var(--tm-line); border-radius: 8px 8px 0 0; }
.trigger-controls label { display: flex; flex: 1 1 190px; flex-direction: column; gap: .3rem; font-size: .75rem; font-weight: 700; }
.trigger-controls select, .trigger-controls input { width: 100%; min-width: 0; }
.trigger-controls label:last-of-type { flex-grow: 2; }
.trigger-status { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; padding: .65rem 1rem; border: 1px solid var(--tm-line); border-top: 0; }
#trigger-map .trigger-count { font-size: .75rem; margin: 0; }
.trigger-view-buttons, .trigger-zoom { display: flex; flex-wrap: wrap; gap: .35rem; }
.trigger-legend { display: flex; flex-wrap: wrap; gap: .35rem 1rem; padding: .7rem 0; font-size: .72rem; }
.trigger-legend span { display: inline-flex; align-items: center; gap: .3rem; }
.trigger-swatch { display: inline-block; width: 24px; border-top: 2px solid #477485; }
.trigger-swatch.note { border-color: #ac731c; border-top-style: dashed; }
.trigger-swatch.package { border-color: #72549a; }
.trigger-swatch.composition { border-color: #247666; border-top-style: dashed; }
.trigger-swatch.reference { border-color: #697580; border-top-style: dotted; }
.trigger-graph-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; padding: .6rem .8rem; background: #f4f7f9; border: 1px solid var(--tm-line); border-bottom: 0; }
#trigger-map .trigger-graph-help { font-size: .73rem; margin: 0; }
.trigger-viewport { overflow: auto; height: min(57vh, 650px); min-height: 340px; border: 1px solid var(--tm-line); background: radial-gradient(#d5e0e6 1px, transparent 1px) 0 0 / 18px 18px, #f7fafb; position: relative; }
.trigger-world { position: relative; }
.trigger-canvas { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.trigger-canvas svg { position: absolute; inset: 0; overflow: visible; }
.trigger-edge { fill: none; stroke-width: 2; stroke: #477485; }
.trigger-edge.note { stroke: #ac731c; stroke-dasharray: 8 5; }
.trigger-edge.package { stroke: #72549a; }
.trigger-edge.composition { stroke: #247666; stroke-dasharray: 5 4; }
.trigger-edge.reference { stroke: #697580; stroke-dasharray: 2 5; }
.trigger-edge.active { stroke-width: 4; }
.trigger-edge.dimmed { opacity: .5; }
#trigger-map .trigger-node {
  position: absolute; width: 224px; height: 124px; padding: .65rem .75rem; display: flex;
  flex-direction: column; align-items: flex-start; text-align: left; white-space: normal;
  border: 1px solid #aec2cd; border-left: 5px solid var(--tm-base); box-shadow: 0 2px 5px #15354712;
}
#trigger-map .trigger-node.server { border-left-color: var(--tm-server); }
#trigger-map .trigger-node.agent { border-left-color: var(--tm-agent); }
#trigger-map .trigger-node[aria-pressed="true"] { background: #e1edf4; color: #102e44; outline: 2px solid #315e8a; outline-offset: 2px; }
.trigger-node strong { font-size: .79rem; line-height: 1.4; overflow-wrap: anywhere; }
.trigger-node .trigger-node-title { font-size: .72rem; line-height: 1.35; margin-top: .2rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.trigger-node small { font-size: .62rem; margin-bottom: .3rem; color: #4c6675; text-transform: uppercase; letter-spacing: .02em; }
.trigger-node.dimmed { box-shadow: none; }
.trigger-detail { margin-top: 1rem; border: 1px solid var(--tm-line); border-radius: 8px; padding: 1rem; background: #fff; }
.trigger-detail-head { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: .8rem; }
.trigger-links { display: flex; flex-wrap: wrap; gap: .5rem 1rem; font-size: .8rem; }
#trigger-map .trigger-badge { font-size: .7rem; font-weight: 700; color: #526875; }
#trigger-map .trigger-note { border-left: 3px solid #ac731c; background: #fff8e9; padding: .7rem; margin-block: .8rem; }
.trigger-relations { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: .6rem; }
.trigger-relation { padding: .85rem; border: 1px solid #d2dce2; border-radius: 5px; background: #f8fafb; min-width: 0; }
#trigger-map .trigger-relation h4 { font: 700 .82rem/1.5 var(--appsw-font, system-ui); color: #183445; margin: .1rem 0 .5rem; overflow-wrap: anywhere; }
#trigger-map .trigger-relation p, #trigger-map .trigger-relation li { font-size: .78rem; }
#trigger-map .trigger-relation ol { margin: .5rem 0 .5rem 1.2rem; }
#trigger-map .trigger-relation li { padding-left: .1rem; }
#trigger-map .trigger-relation .trigger-follow { font-size: .75rem; min-height: 34px; }
#trigger-map .trigger-relation a { overflow-wrap: anywhere; }
.trigger-empty { padding: 2rem; text-align: center; border: 1px solid var(--tm-line); }
.trigger-catalog { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .8rem; }
#trigger-map .trigger-footnote { margin-top: 1rem; color: #4c6370; font-size: .75rem; }
@media (max-width: 600px) {
  .trigger-controls { padding: .7rem; }
  .trigger-controls label { flex-basis: 100%; }
  .trigger-status { padding: .65rem; }
  .trigger-viewport { height: 430px; }
  .trigger-detail { padding: .75rem; }
  #trigger-map h2 { font-size: 1.25rem; }
}
@media print {
  .trigger-mode, .trigger-controls, .trigger-view-buttons, .trigger-graph-wrap { display: none !important; }
  #trigger-map .trigger-list[hidden] { display: block !important; }
}
