/* Dusk Blue — Bootstrap 5.3 theme, no build step.
   Loaded after bootstrap.min.css; everything here is variable overrides plus
   a few bespoke rules for components Bootstrap doesn't ship (sect labels, tiles).
   <html data-bs-theme="dark"> does the heavy lifting for dark form controls,
   modal, accordion and btn-close. */

:root {
  /* Dusk Blue palette (locked reference design) */
  --dusk-bg: #101020;
  --dusk-card: #181838;
  --dusk-field: #141432;
  --dusk-ink: #a8b3e8;
  --dusk-ink-strong: #0189d2;
  --dusk-muted: #6f79b8;
  --dusk-gold: #a38d54;
  --dusk-gold-soft: rgba(163, 141, 84, .14);
  --dusk-border: #023dab;
  --dusk-accent-ink: #7c8cea;
  --dusk-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;

  /* Bootstrap 5.3 overrides */
  --bs-body-bg: var(--dusk-bg);
  --bs-body-color: var(--dusk-ink);
  --bs-body-line-height: 1.6;
  --bs-border-color: var(--dusk-border);
  --bs-border-color-translucent: var(--dusk-border);
  --bs-secondary-color: var(--dusk-muted);
  --bs-tertiary-bg: var(--dusk-card);
  --bs-heading-color: var(--dusk-ink-strong);
  --bs-link-color: var(--dusk-accent-ink);
  --bs-link-color-rgb: 124, 140, 234;
  --bs-link-hover-color: #a2acff;
  --bs-link-hover-color-rgb: 162, 172, 255;
  --bs-font-monospace: var(--dusk-mono);
}

/* ---- layout scaffolding (widths match the reference design) ---- */
.container-ib { width: 100%; max-width: 1100px; margin-inline: auto; padding-inline: 1.5rem; }
.wrap-ib { max-width: 1100px; margin-inline: auto; padding: 2.5rem 1.5rem 3.5rem; }

/* ---- top bar (Bootstrap nav) ---- */
.topbar {
  position: sticky; top: 0; z-index: 1030;
  background: rgba(16, 16, 32, .94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--dusk-border);
}
.brand { font-weight: 800; font-size: 1.15rem; letter-spacing: .01em; color: var(--dusk-ink-strong); text-decoration: none; }
.brand span { color: var(--dusk-accent-ink); }
.topbar .nav-link {
  color: var(--dusk-muted);
  font-size: .95rem; font-weight: 600;
  padding: .45rem 0;
  border-bottom: 2px solid transparent;
}
.topbar .nav-link:hover { color: var(--dusk-ink-strong); }
.topbar .nav-link.active { color: var(--dusk-accent-ink); border-bottom-color: var(--dusk-gold); }
@media (max-width: 900px) {
  .topbar .container-ib { gap: .75rem; }
  .topbar .nav { gap: 1.25rem; }
}

/* ---- secondary nav (CA18DET reference subpages) ----
   Right-aligned to the same edge as the main nav row. */
.subnav-links {
  display: flex; flex-wrap: wrap; justify-content: flex-end;
  gap: .3rem .75rem;
  margin-left: auto;
  white-space: nowrap;
}
.subnav-link {
  color: var(--dusk-muted);
  font-size: .8rem; font-weight: 600;
  padding: .35rem 0;
  border-bottom: 2px solid transparent;
  text-decoration: none;
}
.subnav-link:hover { color: var(--dusk-ink-strong); text-decoration: underline; }
.subnav-link.active { color: var(--dusk-accent-ink); border-bottom-color: var(--dusk-gold); }

/* ---- page head ---- */
.page-head h1 { margin: 0; font-size: 2.1rem; font-weight: 800; letter-spacing: -.01em; }
.page-head .sub { margin: .4rem 0 0; color: var(--dusk-muted); }

/* ---- callout (Bootstrap alert, themed) ---- */
.callout {
  --bs-alert-bg: var(--dusk-gold-soft);
  --bs-alert-border-color: var(--dusk-gold);
  --bs-alert-color: var(--dusk-ink-strong);
  border-left-width: 4px;
  border-radius: 10px;
  font-weight: 500;
  margin: 1.75rem 0 1rem;
}

/* ---- section label ---- */
.sect {
  display: flex; align-items: center; gap: .75rem;
  margin: 2.25rem 0 1rem;
  font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--dusk-accent-ink); font-weight: 700;
}
.sect::after { content: ""; flex: 1; height: 2px; background: var(--dusk-border); }

/* ---- cards (Bootstrap card, themed) ---- */
.card-dusk {
  --bs-card-bg: var(--dusk-card);
  --bs-card-color: var(--dusk-ink);
  --bs-card-border-color: var(--dusk-border);
  --bs-card-cap-bg: transparent;
  --bs-card-cap-color: var(--dusk-ink);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
.card-dusk .card-body { padding: 1.15rem 1.3rem 1.25rem; }
.card-dusk > h3,
.card-dusk .card-body > h3,
.card-dusk .card-body .card-title-row > h3 {
  margin: 0 0 .65rem;
  font-size: .95rem; font-weight: 700;
  padding-left: .7rem;
  border-left: 3px solid var(--dusk-gold);
  color: var(--dusk-ink-strong);
}
.card-title-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.card-title-row h3 { margin: 0; }

/* ---- spec lists (Bootstrap list-group-flush, themed) ---- */
.spec { --bs-list-group-border-color: var(--dusk-border); }
.spec > .list-group-item {
  border-bottom-style: dashed;
  padding: .32rem 0;
  font-size: .95rem;
}
.spec .sub-list { --bs-list-group-border-color: var(--dusk-border); margin: .4rem 0 .3rem .9rem; }
.spec .sub-list > .list-group-item {
  font-size: .88rem; color: var(--dusk-muted);
  border-bottom-style: dotted;
  padding: .25rem 0;
}

/* ---- REF link cards (Bootstrap card as link, themed) ---- */
.refgrid { max-width: 880px; margin-top: 1.75rem; }
.reflink {
  padding: 1.25rem 1.4rem;
  display: flex; flex-direction: column; gap: .3rem;
  text-decoration: none;
  color: var(--dusk-ink);
}
.reflink:hover {
  --bs-card-bg: var(--dusk-gold-soft);
  --bs-card-border-color: var(--dusk-gold);
  color: var(--dusk-ink-strong);
  text-decoration: none;
}
.reflink .num { font-family: var(--dusk-mono); font-size: .72rem; color: var(--dusk-accent-ink); letter-spacing: .1em; }
.reflink .t { font-size: 1.1rem; font-weight: 700; }
.reflink .hint { font-size: .78rem; color: var(--dusk-muted); }

/* ---- comic tiles (Bootstrap card, compact) ---- */
.comicgrid { margin-top: 1.75rem; }
.comic-card {
  padding: .65rem .85rem;
  border-radius: 10px;
  display: flex; flex-direction: column; gap: .1rem;
  text-decoration: none;
  color: var(--dusk-ink);
}
.comic-card:hover {
  --bs-card-bg: var(--dusk-gold-soft);
  --bs-card-border-color: var(--dusk-gold);
  color: var(--dusk-ink-strong);
  text-decoration: none;
}
.comic-card .name { font-size: .92rem; font-weight: 600; }
.comic-card .dom { font-family: var(--dusk-mono); font-size: .66rem; color: var(--dusk-muted); }

/* ---- forms (widgets page) ---- */
.form-label { color: var(--dusk-ink); }
.form-text { color: var(--dusk-muted); }
.form-control, .form-select {
  background-color: var(--dusk-field);
  border-color: var(--dusk-border);
  color: var(--dusk-ink);
}
.form-control:focus, .form-select:focus {
  border-color: var(--dusk-gold);
  box-shadow: 0 0 0 .25rem var(--dusk-gold-soft);
  background-color: var(--dusk-field);
  color: var(--dusk-ink);
}
.form-control::placeholder { color: var(--dusk-muted); }
.form-check-input { background-color: var(--dusk-field); border-color: var(--dusk-border); }
.form-check-input:checked { background-color: var(--dusk-gold); border-color: var(--dusk-gold); }
.form-check-input:focus { border-color: var(--dusk-gold); box-shadow: 0 0 0 .25rem var(--dusk-gold-soft); }
.form-range::-webkit-slider-thumb { background-color: var(--dusk-gold); }
.form-range::-webkit-slider-thumb:focus { box-shadow: 0 0 0 1px var(--dusk-gold-soft); }
.form-range::-moz-range-thumb { background-color: var(--dusk-gold); }
.form-range::-moz-range-thumb:focus { box-shadow: 0 0 0 1px var(--dusk-gold-soft); }

/* ---- buttons: primary = wheel gold ---- */
.btn-primary {
  --bs-btn-bg: var(--dusk-gold);
  --bs-btn-border-color: var(--dusk-gold);
  --bs-btn-color: #14142c;
  --bs-btn-hover-bg: #b29a63;
  --bs-btn-hover-border-color: #b29a63;
  --bs-btn-hover-color: #101020;
  --bs-btn-focus-shadow-rgb: 163, 141, 84;
  --bs-btn-active-bg: #93804d;
  --bs-btn-active-border-color: #93804d;
  --bs-btn-active-color: #101020;
  --bs-btn-active-shadow: inset 0 1px 2px rgba(0, 0, 0, .25);
  --bs-btn-disabled-bg: var(--dusk-gold);
  --bs-btn-disabled-border-color: var(--dusk-gold);
  --bs-btn-disabled-color: #14142c;
}

/* ---- accordion ---- */
.accordion {
  --bs-accordion-bg: transparent;
  --bs-accordion-color: var(--dusk-ink);
  --bs-accordion-border-color: var(--dusk-border);
  --bs-accordion-btn-color: var(--dusk-ink);
  --bs-accordion-btn-bg: transparent;
  --bs-accordion-active-color: var(--dusk-ink-strong);
  --bs-accordion-active-bg: var(--dusk-gold-soft);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem var(--dusk-gold-soft);
}
.accordion-button { font-weight: 600; }
.accordion-button:not(.collapsed) { box-shadow: none; }

/* ---- modal ---- */
.modal-content { background-color: var(--dusk-card); border-color: var(--dusk-border); }
.modal-header, .modal-footer { border-color: var(--dusk-border); }

/* ---- reference sub-pages (caref.*) ---- */
.backlink {
  display: inline-block;
  margin-bottom: .6rem;
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--dusk-muted); text-decoration: none;
}
.backlink:hover { color: var(--dusk-accent-ink); }
.diagram-card .card-body > img,
.diagram-card .card-body > a > img { display: block; margin: 0 auto; }
.diagram-cap { margin-top: .8rem; text-align: center; font-size: .85rem; color: var(--dusk-muted); }

/* ---- click-to-expand diagram modal ---- */
.diagram-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: .8rem; }
.btn-dusk {
  --bs-btn-color: var(--dusk-ink-strong);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--dusk-border);
  --bs-btn-hover-color: var(--dusk-accent-ink);
  --bs-btn-hover-bg: var(--dusk-gold-soft);
  --bs-btn-hover-border-color: var(--dusk-gold);
  --bs-btn-focus-box-shadow: 0 0 0 .25rem var(--dusk-gold-soft);
}
/* diagram modals: border + dark card ground live on a fixed frame OUTSIDE the
   scroll area, so they stay visible on all four sides while the diagram pans.
   Bootstrap already makes .modal-content a capped-height flex column and
   .modal-body flex:1 1 auto; min-height:0 + nested flex keeps the scroll box
   exactly the size of the frame's content box (its own max-height would
   overflow the frame, because .modal-content's max-height is tighter). */
.diagram-modal { border: 1px solid var(--dusk-border); }
.diagram-frame { display: flex; min-height: 0; background: var(--dusk-card); padding: 1rem; }
.diagram-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; }
.diagram-scroll > img { display: block; margin: 0 auto; }
.fcode, .pinno { font-family: var(--dusk-mono); color: var(--dusk-ink-strong); white-space: nowrap; }
.pin > thead > tr > th {
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--dusk-accent-ink);
}
.pin .row-gap > td { padding-top: .65rem; padding-bottom: .1rem; }
.pin .group-head > td {
  padding-top: 1.1rem;
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--dusk-gold);
}
[id^="F"] { scroll-margin-top: 120px; }

/* pinout page: the page is a viewport-height column; the pinout card fills the
   remaining space and the table scrolls inside .pin-scroll, so the connector
   diagram above stays in view. On very short viewports the 12rem floor makes
   the page scroll normally instead. */
body.pin-page { height: 100vh; height: 100dvh; display: flex; flex-direction: column; }
body.pin-page .topbar { flex: 0 0 auto; }
body.pin-page .wrap-ib { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
body.pin-page .pinout-card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
body.pin-page .pinout-card > .card-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
body.pin-page .pin-scroll { flex: 1 1 auto; min-height: 12rem; overflow-y: auto; }
body.pin-page .pin > thead > tr > th { position: sticky; top: 0; z-index: 1; background: var(--dusk-card); }

/* ---- E.C.C.S. connector pin map: responsive image map over the F2 strip ----
   Hit areas are percent-positioned inside .pinmap, so they track the image at
   any rendered width; a shared fixed-position tooltip shows connection + wire. */
.pinmap { position: relative; max-width: min(749px, 100%); margin: 0 auto; }
.pinmap > img { display: block; width: 100%; height: auto; }
.pinmap-overlay { position: absolute; inset: 0; }
.pinmap-hit {
  position: absolute; display: block;
  background: transparent; border: 1px solid transparent; border-radius: 2px;
  cursor: pointer;
}
.pinmap-hit:hover, .pinmap-hit:focus-visible {
  background: rgba(124, 140, 234, .22);
  border-color: var(--dusk-accent-ink);
  outline: none;
}
.pinmap-tip {
  position: fixed; left: 0; top: 0; z-index: 2000;
  visibility: hidden; max-width: 300px; pointer-events: none;
  padding: .4rem .65rem .45rem;
  background: rgba(16, 16, 32, .97);
  border: 1px solid var(--dusk-border); border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
}
.pinmap-tip.show { visibility: visible; }
.pinmap-tip::after {
  content: ""; position: absolute; left: var(--tip-caret, 50%); bottom: -4.5px;
  width: 8px; height: 8px; transform: translateX(-50%) rotate(45deg);
  background: rgba(16, 16, 32, .97);
  border-right: 1px solid var(--dusk-border); border-bottom: 1px solid var(--dusk-border);
}
.pinmap-tip.tip-below::after {
  bottom: auto; top: -4.5px;
  border-right: none; border-bottom: none;
  border-left: 1px solid var(--dusk-border); border-top: 1px solid var(--dusk-border);
}
.pinmap-tip .tip-conn {
  display: block; font-size: .8rem; font-weight: 600; color: var(--dusk-ink-strong);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pinmap-tip .tip-wire { display: block; margin-top: .1rem; font-size: .74rem; color: var(--dusk-gold); }
.pinmap-tip .tip-wire::before { content: "Wire: "; color: var(--dusk-muted); }

/* pinout rows that a map box jumps to: the margin must equal the sticky
   thead's height so the target row lands flush beneath it */
tr[id^="pin-"] { scroll-margin-top: 1.8rem; }
tr.pin-flash > td { animation: pinmap-flash 1.5s ease-out; }
@keyframes pinmap-flash {
  0% { background-color: rgba(163, 141, 84, .5); }
  100% { background-color: transparent; }
}

/* ---- footer ---- */
.foot { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem 2.5rem; color: var(--dusk-muted); font-size: .78rem; }