/* ============================================================================
 * glossary.css — house gloss-modal pattern (canonical: agentic-scaling /
 * stand-demo trio) adapted to this portal's zen tokens. Inline terms get a
 * dashed underline + hover "?" cue; click opens the centered knowledge modal.
 * ========================================================================== */

/* ---- inline auto-linked term: dashed underline, hover reveals "?" cue ---- */
.gloss-link{
  font:inherit;background:none;border:0;padding:0;margin:0;cursor:help;
  color:var(--teal);text-decoration:underline dashed var(--cyan);
  text-underline-offset:3px;text-decoration-thickness:1px;white-space:nowrap;position:relative;
}
.gloss-link:hover,.gloss-link:focus-visible{color:var(--cyan);outline:none}
.gloss-link::after{
  content:"?";font-size:.62em;font-weight:700;line-height:1;position:absolute;top:-.55em;right:-1.1em;   /* out of flow: no gap in the text until hover */
padding:0 .28em;border-radius:999px;color:var(--tab-fg,#fff);
  background:var(--cyan);opacity:0;transform:scale(.7);transition:opacity .12s,transform .12s;
}
.gloss-link:hover::after,.gloss-link:focus-visible::after{opacity:1;transform:scale(1)}

/* ---- glossary chips in the drawer panel ---- */
.gchips{display:flex;flex-wrap:wrap;gap:6px}
.gloss-chip{
  font-family:inherit;font-size:11.5px;font-weight:600;cursor:pointer;
  background:var(--elevated);color:var(--fg);border:1px solid var(--line);
  border-left:3px solid var(--muted);border-radius:8px;padding:4px 9px;
}
.gloss-chip:hover{border-color:var(--cyan);color:var(--cyan)}
.gloss-chip.g-asset{border-left-color:var(--green)}
.gloss-chip.g-fmt{border-left-color:var(--sky)}
.gloss-chip.g-prog{border-left-color:var(--pink)}
.gloss-chip.g-pipe{border-left-color:var(--amber)}
.gloss-chip.g-bridge{border-left-color:var(--purple)}
.gloss-chip.g-plat{border-left-color:var(--indigo)}
.gloss-chip.g-agent{border-left-color:var(--cyan)}
.gloss-chip.g-cult{border-left-color:var(--pink)}

/* ---- modal: builds on zen-theme .modal/.box/.hdr/.bodyy/.ftr base ---- */
.gloss-modal{z-index:1000}
.gloss-modal .box{
  width:min(880px,94vw);max-width:96vw;max-height:92dvh;min-width:340px;min-height:220px;
  resize:both;overflow:hidden;
  display:flex;flex-direction:column;overflow:hidden;   /* hdr/ftr pinned */
}
.gloss-modal .hdr{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.gloss-modal .ftr{flex:0 0 auto}
.gloss-modal .bodyy{flex:1 1 auto;min-height:0;overflow:auto;font-size:13px}

.gloss-cat{font-size:9.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.22);color:#fff;flex:0 0 auto}
.gloss-kind{font-size:9px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:2px 7px;border-radius:999px;border:1px solid rgba(255,255,255,.65);color:#fff;flex:0 0 auto}
#glossTitle{font-size:14px;line-height:1.3}

/* scoped overrides — zen's `.modal .box button` paints everything teal-filled */
.modal .gloss-x{
  margin-left:auto;background:rgba(255,255,255,.18)!important;color:#fff!important;border:0!important;
  width:26px;height:26px;border-radius:50%!important;font-size:17px!important;line-height:1;
  cursor:pointer;padding:0!important;flex:0 0 auto}
.modal .gloss-x:hover{background:rgba(255,255,255,.34)!important}
.modal .gloss-back{
  font:inherit!important;font-size:11px!important;font-weight:800!important;cursor:pointer;line-height:1.6;
  background:rgba(255,255,255,.18)!important;color:#fff!important;border:1px solid rgba(255,255,255,.5)!important;
  border-radius:999px!important;padding:2px 10px!important;margin:0!important;flex:0 0 auto}
.modal .gloss-back:hover{background:rgba(255,255,255,.32)!important}

/* one-liner + "read it as" */
.gloss-one{font-weight:600;color:var(--fg);background:var(--elevated);
  border-left:3px solid var(--cyan);padding:9px 12px;border-radius:8px;margin:0 0 4px;line-height:1.5}
.gloss-reads{margin:10px 0 0;padding:9px 12px;border-radius:8px;background:var(--elevated);
  border-left:3px solid var(--purple);font-size:12.5px;line-height:1.5;font-style:italic}
.gloss-reads .gr-h{display:block;font-style:normal;font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--purple);font-weight:800;margin-bottom:3px}

/* labeled sections */
.gs{margin:12px 0 0}
.gs-h{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  margin-bottom:3px;font-weight:800}
.gs-b{font-size:13.5px;line-height:1.7;color:var(--fg)}
.gs-b p{margin:0 0 9px}.gs-b p:last-child{margin-bottom:0}
.gs-b ul{margin:6px 0 6px 2px;padding-left:16px}.gs-b li{margin:3px 0}
.gs.gs-deep{background:var(--elevated);border:1px solid var(--line);border-radius:10px;padding:11px 14px;margin-top:12px}
.gs.gs-deep .gs-h{color:var(--cyan);font-size:11px}
.gloss-one{font-size:15px;line-height:1.55}
.gloss-modal .bodyy{font-size:13.5px;padding-right:4px}
.gloss-diagram{margin:12px 0}
.gloss-diagram .dg-card{margin:0}
.gs.gs-here{background:var(--elevated);border:1px solid var(--line);
  border-left:3px solid var(--teal);border-radius:8px;padding:8px 11px}
.gs.gs-here .gs-h{color:var(--teal)}
.gs.gs-nfx .gs-h{color:var(--pink)}
.gs.gs-ind .gs-h{color:var(--sky)}
.gs.gs-not .gs-h::before{content:"✗ ";color:var(--pink)}
.gs.gs-not .gs-b{color:var(--muted)}
.gs.gs-ex{background:var(--elevated);border:1px solid var(--line);border-radius:8px;padding:8px 11px}
.gs.gs-ex .gs-h{color:var(--amber)}
.gs-b code{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;background:var(--card-bg);
  border:1px solid var(--line);border-radius:4px;padding:0 4px}

/* "The concrete walkthrough" — the story that decodes a compressed chain */
.gs.gs-story{background:var(--elevated);border:1px solid var(--line);
  border-left:3px solid var(--cyan);border-radius:8px;padding:10px 12px 8px 14px}
.gs.gs-story .gs-h{color:var(--cyan)}
.gloss-story{margin:6px 0 0;padding-left:20px}
.gloss-story li{font-size:12.5px;line-height:1.55;color:var(--fg);margin:0 0 8px}
.gloss-story li:last-child{margin-bottom:0}
.gloss-story li::marker{color:var(--cyan);font-weight:700}

/* "?" explain chip on a drawer specific — sky = glossary/what-it-is (icon system) */
.spec-x{
  font-family:inherit;font-size:10px;font-weight:800;cursor:pointer;line-height:1;
  background:var(--sky);color:var(--tab-fg,#fff);border:0;border-radius:999px;
  padding:3px 8px;margin-left:6px;vertical-align:1px;white-space:nowrap}
.spec-x:hover{filter:brightness(1.12)}

/* drawer hint under the heading — points beginners at the mastery page first */
.d-hint{font-size:11.5px;line-height:1.5;color:var(--muted);background:var(--elevated);
  border:1px solid var(--line);border-left:3px solid var(--purple);border-radius:8px;
  padding:7px 10px;margin:0 0 12px}
.d-hint .linklike{font:inherit;font-weight:700;background:none;border:0;padding:0;cursor:pointer;
  color:var(--purple);text-decoration:underline;text-underline-offset:2px}

/* related chips — drill down with back-stack.
   !important + .modal scope: zen's `.modal .box button` paints every button
   teal-filled and would otherwise win on specificity (the known trap). */
.gloss-related{margin-top:14px}
.modal .gloss-rel{
  font:inherit;font-family:inherit;font-size:11.5px!important;font-weight:600!important;cursor:pointer;
  background:var(--elevated)!important;color:var(--fg)!important;border:1px solid var(--line)!important;
  border-left:3px solid var(--muted)!important;border-radius:8px!important;
  padding:4px 9px!important;margin:0 6px 6px 0!important}
.modal .gloss-rel:hover{border-color:var(--cyan)!important;color:var(--cyan)!important}
.modal .gloss-rel.g-asset{border-left-color:var(--green)}
.modal .gloss-rel.g-fmt{border-left-color:var(--sky)}
.modal .gloss-rel.g-prog{border-left-color:var(--pink)}
.modal .gloss-rel.g-pipe{border-left-color:var(--amber)}
.modal .gloss-rel.g-bridge{border-left-color:var(--purple)}
.modal .gloss-rel.g-plat{border-left-color:var(--indigo)}
.modal .gloss-rel.g-agent{border-left-color:var(--cyan)}
.modal .gloss-rel.g-cult{border-left-color:var(--pink)}

/* in-modal auto-links keep the inline style, beat zen's modal button fill */
.modal .gloss-link{font:inherit!important;background:none!important;border:0!important;
  padding:0!important;margin:0!important;border-radius:0!important;
  color:var(--teal)!important;text-decoration:underline dashed var(--cyan)!important;
  text-underline-offset:3px}
.modal .gloss-link:hover{background:none!important;color:var(--cyan)!important}

@media print{
  .gloss-link{text-decoration:none;color:inherit}
  .gloss-link::after{display:none}
  .gloss-modal{display:none!important}
}

.gl-nw{white-space:nowrap}