/* ============================================================================
 * glossary.css — inline term cue (hover shows "?", click opens modal) + modal
 * accents. All colors come from theme.css tokens so it themes automatically.
 * ========================================================================== */

/* ---- inline term: calm dashed underline; hover reveals a small "?" cue ---- */
.gloss {
  color: var(--teal);
  text-decoration: underline dashed var(--accent2);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  cursor: help;
  position: relative;
  white-space: nowrap;          /* keep the "?" cue attached to the term */
  border-radius: 3px;
}
.gloss:hover, .gloss:focus-visible { color: var(--accent2); outline: none; }
.gloss:focus-visible { box-shadow: 0 0 0 2px rgba(14,165,164,.45); }
/* the "?" cue — appears only on hover/focus, never a popup */
.gloss::after {
  content: "?";
  font-size: .62em;
  font-weight: 700;
  line-height: 1;
  vertical-align: super;
  margin-left: 1px;
  padding: 0 .28em;
  border-radius: 999px;
  color: #fff;
  background: var(--accent2);
  opacity: 0;
  transform: scale(.7);
  transition: opacity .12s, transform .12s;
}
.gloss:hover::after, .gloss:focus-visible::after { opacity: 1; transform: scale(1); }
/* dev signal: a data-term that has no DB entry shows red so it's caught early */
.gloss-missing { text-decoration-color: var(--bad); color: var(--bad); }

/* ---- SVG diagram nodes: hover brightens + reveals an authored "?" badge ---- */
.gloss-node { cursor: help; }
.gloss-node:hover { filter: brightness(1.06); }
.gloss-node .q { opacity: 0; transition: opacity .12s; }   /* author a <text class="q">?</text> */
.gloss-node:hover .q, .gloss-node:focus .q { opacity: 1; }
.gloss-node:focus { outline: none; }

/* ---- modal: reuse theme .modal/.box/.hdr/.bodyy/.ftr; add glossary accents -- */
.gloss-modal .box { width: 560px; }
.gloss-modal .hdr { display: flex; align-items: center; gap: 10px; }
.gloss-cat {
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; color: #fff; background: var(--muted);
  flex: 0 0 auto;
}
.gloss-cat.g-ins   { background: var(--teal); }
.gloss-cat.g-arch  { background: var(--accent2); }
.gloss-cat.g-cloud { background: var(--info, #2563eb); }
.gloss-cat.g-ai    { background: var(--warn); }
.gloss-cat.g-fe    { background: #7c3aed; }
/* sourcing badge — separate from category, signals fact vs decision */
.gloss-kind { font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; border: 1px solid currentColor; flex: 0 0 auto; }
.gloss-kind.k-std  { color: var(--muted); }
.gloss-kind.k-vend { color: var(--info, #2563eb); }
.gloss-kind.k-dec  { color: var(--accent2); }
.gloss-pron { color: var(--muted); font-style: italic; font-weight: normal; font-size: .85em; }
.gloss-x {
  margin-left: auto; background: rgba(255,255,255,.18) !important; color: #fff !important;
  border: 0; width: 26px; height: 26px; border-radius: 50%; font-size: 18px; line-height: 1;
  cursor: pointer; padding: 0 !important;
}
.gloss-x:hover { background: rgba(255,255,255,.34) !important; }
.gloss-modal .bodyy p { margin: 0 0 11px; }
.gloss-one {
  font-weight: 600; color: var(--ink);
  background: var(--panel2); border-left: 3px solid var(--accent2);
  padding: 9px 12px; border-radius: 8px;
}
/* "Read it as" — the plain-English translation, emphasized right under the one-liner */
.gloss-reads { margin: 10px 0 0; padding: 9px 12px; border-radius: 8px;
  background: rgba(124,58,237,.08); border-left: 3px solid #7c3aed;
  font-size: 13px; line-height: 1.5; color: var(--ink); font-style: italic; }
.gloss-reads .gr-h { display:block; font-style: normal; font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: #7c3aed; font-weight: 700; margin-bottom: 3px; }
/* "Mental model" ASCII flow — monospace block */
.gloss-flow { margin: 4px 0 0; padding: 10px 12px; border-radius: 8px;
  background: var(--panel2); border: 1px solid var(--line);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11.5px; line-height: 1.5; color: var(--body-ink); white-space: pre; overflow-x: auto; }

/* labeled sections */
.gs { margin: 12px 0 0; }
.gs-h { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 3px; font-weight: 700; }
.gs-b { font-size: 13px; line-height: 1.55; color: var(--body-ink); }
/* "In this platform" — the killer field, emphasized */
.gs.gs-ins { background: rgba(14,165,164,.07); border: 1px solid var(--line);
  border-left: 3px solid var(--teal); border-radius: 8px; padding: 8px 11px; }
.gs.gs-ins .gs-h { color: var(--teal); }
/* "Why this choice" — subtle accent */
.gs.gs-why .gs-h { color: var(--accent2); }
/* "What it's NOT" — boundary, marked with a ✗ and warm tint */
.gs.gs-not .gs-h::before { content: "✗ "; color: var(--bad); }
.gs.gs-not .gs-b { color: var(--muted); }
/* related-term chips inside the modal — clickable, jump to that entry */
.gloss-related { margin-top: 6px; }
.gloss-related-h {
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 6px;
}
.gloss-rel {
  font-family: inherit; font-size: 12px; cursor: pointer;
  background: var(--card-bg); color: var(--body-ink);
  border: 1px solid var(--line); border-left: 3px solid var(--muted);
  border-radius: 8px; padding: 4px 9px; margin: 0 6px 6px 0;
}
.gloss-rel:hover { border-color: var(--accent2); color: var(--ink); }
.gloss-rel.g-ins   { border-left-color: var(--teal); }
.gloss-rel.g-arch  { border-left-color: var(--accent2); }
.gloss-rel.g-cloud { border-left-color: var(--info, #2563eb); }
.gloss-rel.g-ai    { border-left-color: var(--warn); }

/* in-body auto-links — make any known term inside the modal clickable.
   (!important + .modal scope to beat theme.css's heavy ".modal button" fill.) */
.modal .gloss-link, .gloss-link {
  font: inherit !important; background: none !important; border: 0 !important;
  padding: 0 !important; margin: 0 !important; border-radius: 0 !important; cursor: pointer;
  color: var(--teal); text-decoration: underline dotted var(--accent2); text-underline-offset: 2px; }
.modal .gloss-link:hover { background: none !important; color: var(--accent2); text-decoration-style: solid; }

/* The dialog must ALWAYS fit the visible viewport so it stays closeable, even with the in-app
   zoom (default 150%) magnifying everything on <html>. We size the box as a PERCENT of the .modal
   overlay (position:fixed; inset:0 = the visible viewport) rather than in vh: percentages resolve
   against that fixed overlay identically in Chrome AND Safari/WebKit and are immune to the `zoom`
   property's vh quirks — no JS/zoom variable needed, so it's robust even if theme.js is cached/stale.
   Header (Back + ✕) and footer (Got it) are pinned; only the body scrolls — vertically, and
   horizontally for wide content like the ASCII "Mental model" diagrams. overflow:hidden on the box
   (beats theme.css's .modal .box{overflow:auto}) stops the whole box — header included — scrolling away. */
.gloss-modal .box {
  max-height: 92%;
  max-width: 94%;
  display: flex; flex-direction: column; overflow: hidden;
}
.gloss-modal .hdr, .gloss-modal .ftr { flex: 0 0 auto; }      /* pinned — never scroll off */
.gloss-modal .bodyy { flex: 1 1 auto; min-height: 0; overflow: auto; }  /* the only scroller (x+y); min-height:0 lets the flex child actually shrink */

/* "The full flow — what really happens" — the concrete, story-style walkthrough */
.gs.gs-story { background: var(--panel2); border: 1px solid var(--line);
  border-left: 3px solid var(--accent2); border-radius: 8px; padding: 10px 12px 8px 14px; }
.gloss-story { margin: 6px 0 0; padding-left: 20px; }
.gloss-story li { font-size: 13px; line-height: 1.55; color: var(--body-ink); margin: 0 0 8px; }
.gloss-story li:last-child { margin-bottom: 0; }
.gloss-story li::marker { color: var(--accent2); font-weight: 700; }
.gloss-code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px;
  background: var(--card-bg); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; color: var(--ink); }

/* ‹ Back — shown in the modal header only when a drill-down stack exists.
   (!important + .modal scope to beat theme.css's heavy ".modal button" fill, same as gloss-link.) */
.modal .gloss-back, .gloss-back {
  font: inherit !important; font-size: 12px !important; font-weight: 700 !important; cursor: pointer;
  background: var(--panel2) !important; color: var(--accent2) !important;
  border: 1px solid var(--line) !important; border-radius: 999px !important;
  padding: 2px 10px !important; margin: 0 8px 0 0 !important; line-height: 1.6 !important; }
.modal .gloss-back:hover { border-color: var(--accent2) !important; }

/* "See it live ↗" — opens the real product page in a new tab from inside a story step */
a.gloss-live { font-weight: 700; color: var(--accent2);
  text-decoration: underline dotted var(--accent2); text-underline-offset: 2px; white-space: nowrap; }
a.gloss-live:hover { text-decoration-style: solid; }

/* print: don't print the "?" cue or the modal */
@media print {
  .gloss::after { display: none; }
  .gloss { text-decoration: none; color: inherit; }
  .gloss-modal { display: none !important; }
}