/* Build guide sections (details.gs) and glossary tooltips (.gt, #gt-pop).
   Shared by the _stition build guides. Loaded after site.css; matches the
   guides' bg- look: white ground, near-black ink, hairline rules, navy h2. */

/* ---------- collapsible h2 sections ---------- */
details.gs { margin: 0; border-top: 1px solid #dcdcdc; border-bottom: 1px solid #dcdcdc; }
details.gs + details.gs { border-top: 0; }

details.gs > summary {
  display: block; list-style: none; cursor: pointer; position: relative;
  min-height: 44px; padding: 12px 0 12px 24px;
}
details.gs > summary::-webkit-details-marker { display: none; }
details.gs > summary::marker { content: ""; }

/* Chevron: points right when closed, down when open. */
details.gs > summary::before {
  content: ""; position: absolute; left: 3px; top: 19px;
  width: 7px; height: 7px; border-right: 2px solid #111; border-bottom: 2px solid #111;
  transform: rotate(-45deg); transition: transform .15s ease;
}
details.gs[open] > summary::before { transform: rotate(45deg); top: 17px; }

details.gs > summary h2 { margin: 0; line-height: 1.35; }
details.gs > summary:hover h2 { text-decoration: underline; text-underline-offset: 3px; }
details.gs > summary:focus { outline: none; }
details.gs > summary:focus-visible { outline: 2px solid #2b59c3; outline-offset: 2px; }

.gs-teaser { display: block; margin-top: 3px; max-width: 66ch; font-size: 13px; line-height: 1.5; color: #5b5b5b; }
details.gs[open] .gs-teaser { color: #808080; }

.gs-body { padding: 4px 0 26px; }
.gs-body > :first-child { margin-top: 0; }

/* ---------- Expand all / Collapse all ---------- */
.gs-toggle {
  display: block; margin: 8px 0 8px auto; min-height: 44px; padding: 0 14px;
  font: inherit; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: #111; background: #fff; border: 1px solid #bfbfbf; border-radius: 0; cursor: pointer;
}
.gs-toggle:hover { border-color: #111; }
.gs-toggle:focus-visible { outline: 2px solid #2b59c3; outline-offset: 2px; }

/* ---------- troubleshooting Q&A items ---------- */
details.gs-q { border-top: 1px solid #ececec; max-width: 66ch; }
details.gs-q:last-of-type { border-bottom: 1px solid #ececec; }
details.gs-q > summary {
  display: block; list-style: none; cursor: pointer; position: relative;
  min-height: 44px; padding: 11px 0 11px 20px;
  font-size: 13.5px; font-weight: 700; line-height: 1.5; color: #111;
}
details.gs-q > summary::-webkit-details-marker { display: none; }
details.gs-q > summary::marker { content: ""; }
details.gs-q > summary::before {
  content: ""; position: absolute; left: 3px; top: 18px;
  width: 5px; height: 5px; border-right: 2px solid #5b5b5b; border-bottom: 2px solid #5b5b5b;
  transform: rotate(-45deg); transition: transform .15s ease;
}
details.gs-q[open] > summary::before { transform: rotate(45deg); top: 16px; }
details.gs-q > summary:hover { text-decoration: underline; text-underline-offset: 3px; }
details.gs-q > summary:focus { outline: none; }
details.gs-q > summary:focus-visible { outline: 2px solid #2b59c3; outline-offset: 2px; }
details.gs-q > div { padding: 0 0 14px 20px; font-size: 13.5px; line-height: 1.6; color: #333; }
details.gs-q > div > :last-child { margin-bottom: 0; }

/* ---------- glossary terms ----------
   Only terms guide.js has wired (role set) get the affordance, so a hand-marked
   .gt shows as plain text when JS is off. */
.gt[role] {
  cursor: help;
  text-decoration-line: underline; text-decoration-style: dotted;
  -webkit-text-decoration-style: dotted;
  text-decoration-color: #808080; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.gt[role]:hover, .gt[aria-expanded="true"] { text-decoration-color: #111; }
.gt[aria-expanded="true"] { background: #f1f1f1; }
.gt[role]:focus { outline: none; }
.gt[role]:focus-visible { outline: 2px solid #2b59c3; outline-offset: 1px; }

#gt-pop {
  position: absolute; z-index: 1000; box-sizing: border-box;
  max-width: min(300px, calc(100vw - 32px));
  padding: 10px 12px; background: #fff; color: #333;
  border: 1px solid #111; box-shadow: 0 3px 10px rgba(0, 0, 0, .12);
  font-size: 13px; line-height: 1.5; text-align: left;
}
#gt-pop[hidden] { display: none; }
#gt-pop strong { display: block; margin-bottom: 2px; color: #111; }
#gt-pop .gt-def { display: block; }
#gt-pop a { display: inline-block; margin-top: 6px; font-weight: 700; color: #2b59c3; }

/* ---------- print: everything open (guide.js), no chrome ---------- */
@media print {
  .gs-toggle, #gt-pop { display: none !important; }
  details.gs > summary, details.gs-q > summary { padding-left: 0; min-height: 0; }
  details.gs > summary::before, details.gs-q > summary::before { display: none; }
  details.gs { border: 0; }
  .gt[role] { text-decoration: none; background: none; }
}