/* SVG Interactive Diagrams — shared standard 1.1.1.
 * Independent component styles; no interactive-diagrams_v3.css dependency.
 * Load globally or per page. All rules belong to sid-* components.
 * Preserve diagram-specific, ID-scoped Illustrator styles inside each SVG.
 */

/* Standalone demo shell only. Site templates should include the section
 * directly in their own layout, without this wrapper. Never style body. */
.sid-demo-shell {
  width:70%; max-width:1200px; min-width:320px;
  margin:0 auto; padding:40px 0; box-sizing:border-box;
}
.sid-demo-shell .sid-visually-hidden {
  position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;
}

/* Shared layout. Explicit typography prevents inherited site fonts from
 * changing the approved table geometry. Bootstrap 4 supplies base components. */
.sid-diagram {
  display:flex; justify-content:center; align-items:flex-start; gap:40px;
  flex-wrap:nowrap; width:100%; max-width:1200px; margin:0 auto;
  font-family:sans-serif; font-size:16px; line-height:1.5;
  color:#212529; box-sizing:border-box;
}
.sid-diagram *, .sid-diagram *::before, .sid-diagram *::after { box-sizing:border-box; }
.sid-diagram .sid-svg { flex:1 1 50%; max-width:600px; min-width:0; }
.sid-diagram .sid-svg svg { display:block; width:100%; height:auto; }
.sid-diagram .sid-table { flex:1 1 50%; max-width:500px; min-width:0; }
.sid-diagram .sid-table table {
  width:100%; border-collapse:collapse; border-spacing:0;
  font-size:clamp(10px,0.6vw,12px); line-height:1.5;
}
.sid-diagram .sid-table th {
  font-weight:700; color:#004a90; border-bottom:3px solid #004a90;
  text-align:left; padding:0.5rem 0.8rem;
}
.sid-diagram .sid-table td {
  padding:0.5rem 0.8rem; border:none; border-bottom:1px solid rgba(0,0,0,0.3);
  position:relative; overflow:visible; z-index:0;
}
/* Normal rows are the default. Add sid-table--compact to the sid-table
 * container for long tables: tighter product rows and grouped model rows.
 * This opt-in changes only that table, including its highlight bands. */
.sid-diagram .sid-table.sid-table--compact td { padding-top:0.35rem; padding-bottom:0.35rem; }
.sid-diagram .sid-table.sid-table--compact .sid-variant td { padding-top:0.2rem; padding-bottom:0.2rem; }
.sid-diagram .sid-table td.sid-part-number,
.sid-diagram .sid-table td.sid-description,
.sid-diagram .sid-table td.sid-subheading,
.sid-diagram .sid-table td.sid-note { color:#333; font-weight:400; }
.sid-diagram .sid-table td.sid-subheading { font-weight:700; background:#f4f4f4; }
.sid-diagram .sid-table td.sid-note { font-style:italic; }
.sid-diagram .sid-table td.sid-item-number { color:#004a90; font-weight:700; vertical-align:middle; }
.sid-diagram .sid-part-number a { color:#007bff; text-decoration:underline; text-underline-offset:2px; }
.sid-diagram .sid-part-number a:hover { color:#0056b3; }

/* Persistent selection is controlled by the engine, including touch devices.
 * Centered bands retain whitespace; a rowspan highlights its number only. */
.sid-diagram .sid-row { transition:background-color 0.2s; cursor:pointer; }
.sid-diagram .sid-row td::before {
  content:''; position:absolute; top:50%; left:0; transform:translateY(-50%);
  height:1.8em; width:100%; background-color:transparent; z-index:-1;
  transition:background-color 0.2s;
}
.sid-diagram .sid-row.sid-highlight td::before { background-color:#f9b920; }
.sid-diagram .sid-row.sid-highlight td.sid-item-number { font-weight:800; }
.sid-diagram .sid-table.sid-table--compact .sid-variant td::before { height:calc(100% - 4px); }
.sid-diagram .sid-table td.sid-item-number[rowspan]::before { content:none; }
.sid-diagram .sid-number-label { display:block; position:relative; z-index:0; }
.sid-diagram .sid-number-label::before {
  content:''; position:absolute; inset-inline:0; top:50%; transform:translateY(-50%); height:1.8em; z-index:-1;
}
.sid-diagram .sid-item-number[rowspan].sid-number-active .sid-number-label::before { background:#f9b920; }
.sid-diagram .sid-table tr:focus-visible { outline:2px solid #004a90; outline-offset:-2px; }

/* SVG fragments stay in their original layer order. Only linked fragments
 * receive sid-active; invisible hit areas never display a stroke or outline. */
.sid-diagram svg [data-role="shape"].sid-active { stroke:#f9b920 !important; }
.sid-diagram svg [data-role="arrow"].sid-active * { stroke:#f9b920 !important; }
.sid-diagram svg [data-role="arrow"].sid-active polygon,
.sid-diagram svg [data-role="bubble"].sid-active circle,
.sid-diagram svg [data-role="bubble"].sid-active ellipse { fill:#f9b920 !important; }
.sid-diagram svg [data-role="bubble"].sid-active text { fill:#004a90 !important; }
.sid-diagram svg [data-role="hit"], .sid-diagram svg [data-role="hit"]:focus {
  pointer-events:all; cursor:pointer; opacity:0 !important; fill:transparent !important;
  stroke:none !important; outline:none !important;
}
.sid-diagram svg [data-role="arrow"], .sid-diagram svg [data-role="bubble"] { cursor:pointer; }
.sid-diagram svg [data-role="arrow"] line { pointer-events:stroke; }
.sid-diagram svg [data-role="bubble"], .sid-diagram svg [data-role="bubble"] * {
  -webkit-user-select:none; user-select:none;
}
.sid-diagram svg [data-role="bubble"]:focus,
.sid-diagram svg [data-role="bubble"]:focus-visible,
.sid-diagram svg [data-role="bubble"] :focus,
.sid-diagram svg [data-role="bubble"] :focus-visible { outline:none !important; }

/* Bootstrap's own classes remain on the template; all custom card classes
 * use sid-* and the popover stays inside its owning diagram root. */
.sid-diagram .popover.sid-popover {
  width:320px; max-width:calc(100vw - 24px); pointer-events:auto; padding:0;
  border-radius:6px; box-shadow:0 4px 12px rgba(0,0,0,0.1);
}
.sid-diagram .sid-popover .popover-body {
  padding:10px; max-height:min(420px,60vh); overflow-y:auto; overflow-x:hidden;
}
.sid-diagram .sid-popover .sid-card {
  display:flex; gap:10px; font-size:0.85rem; align-items:flex-start; min-width:0;
}
.sid-diagram .sid-popover .sid-card + .sid-card { margin-top:10px; padding-top:10px; border-top:1px solid #ddd; }
.sid-diagram .sid-popover .sid-card img {
  width:60px; max-width:60px; flex:0 0 60px; height:auto; object-fit:contain; border-radius:4px;
}
.sid-diagram .sid-popover .sid-card-text {
  display:flex; flex-direction:column; justify-content:space-between; flex:1; min-width:0;
}
.sid-diagram .sid-popover .sid-card-title {
  font-weight:700; margin-bottom:2px; font-size:0.95em; color:#004a90; line-height:1.1em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; max-height:2.2em; overflow-wrap:anywhere;
}
.sid-diagram .sid-popover .sid-card-description {
  color:#555; font-size:0.80em; line-height:1.2em; max-height:2.4em; overflow:hidden;
  text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  padding-right:6px; padding-bottom:2px; overflow-wrap:anywhere;
}
.sid-diagram .sid-popover .sid-card-part-number {
  font-size:0.75em; color:#888; margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sid-diagram .sid-popover .sid-card-footer {
  display:flex; justify-content:space-between; align-items:center; margin-top:8px; gap:6px; flex-wrap:nowrap;
}
.sid-diagram .sid-popover .sid-card-price { font-weight:700; color:#000; font-size:0.9em; white-space:nowrap; }
.sid-diagram .sid-popover .sid-cart-btn {
  background-color:#f9b920; color:#000; font-weight:700; border:none; border-radius:4px;
  padding:5px 10px; font-size:0.75rem; cursor:pointer; transition:background-color 0.2s;
  white-space:nowrap; margin-right:0;
}
.sid-diagram .sid-popover .sid-cart-btn:hover { background-color:#e5a900; }
.sid-diagram .sid-status { font-size:11px; color:#333; margin-top:12px; margin-bottom:1rem; }
.sid-diagram .sid-status:empty { display:none; }

/* Responsive rules never select tables or containers outside this component. */
@media(max-width:1024px) {
  .sid-diagram { flex-wrap:wrap; }
  .sid-diagram .sid-svg, .sid-diagram .sid-table { flex:1 1 100%; max-width:100%; }
  .sid-diagram .sid-svg { max-width:600px; margin-inline:auto; }
}
@media(max-width:500px) {
  .sid-diagram .sid-table table { font-size:10px; }
  .sid-diagram .sid-table td, .sid-diagram .sid-table th { padding-left:5px; padding-right:5px; }
}

/* Optional title outside the source SVG canvas. */
.sid-diagram .sid-diagram-title {
  margin:0.5rem 0 0; padding:10px 20px; background:#004a90; color:#fff;
  width:100%; font-family:sans-serif; font-size:clamp(14px,1.25vw,20px);
  font-weight:700; line-height:1.5; text-align:left;
}
/* Authored hit-areas use the shared invisible filled-area interaction rules. */
.sid-diagram svg [data-role="shape"] { pointer-events:none; }
.sid-diagram svg [data-highlight-only] {
  fill:none; stroke:transparent; stroke-linecap:round; stroke-linejoin:round;
}
/* In the stacked layout, keep product cards near the viewport bottom so they
 * do not cover the SVG bubbles needed for touch toggling and item changes. */
@media(max-width:1024px) {
  .sid-diagram .popover.sid-popover {
    position:fixed !important; top:auto !important; left:auto !important;
    right:12px; bottom:12px; transform:none !important;
  }
  .sid-diagram .sid-popover > .arrow { display:none; }
  .sid-diagram .sid-popover .popover-body { max-height:min(420px,45vh); }
}
@media(max-width:319px) {
  .sid-demo-shell { width:100%; min-width:0; }
}