/* Glossary, first-run orientation and demo-boundary notes.
 *
 * DESIGN.md §1 (the 80/20 rule): these are explanatory surfaces, so they spend
 * neutral tone, not colour. Nothing here is teal or RAG — colour on this
 * product means status, health or action, and an explanation is none of those.
 */

/* ── inline term affordance ──────────────────────────────────────────────── */
.gterm {
  border-bottom: 1px dotted var(--ink-2);
  cursor: help;
}
.gterm:hover,
.gterm:focus-visible {
  border-bottom-color: var(--navy);
  border-bottom-style: solid;
}
/* Terms sitting on the navy nav or a dark card need the light treatment. */
#nav .gterm,
#home-screen .gterm {
  border-bottom-color: rgba(255, 255, 255, .55);
}

/* View-button acronym: present for the people who work in these terms daily,
   quiet enough that the plain-English label reads first. */
.vb-ac {
  font-family: 'DM Mono', monospace;
  font-size: .82em;
  letter-spacing:var(--track-caps);
  opacity: .72;
  font-weight: 500;   /* DM Mono is static 400/500 — never inherit the button's 600 */
}

/* ── the hover / focus card ──────────────────────────────────────────────── */
#glossary-pop {
  position: fixed;
  z-index: 3000;
  width: 340px;
  max-width: calc(100vw - 20px);
  background: #fff;
  border: 1px solid #E3E6EA;
  border-radius: 8px;
  box-shadow: 0 10px 34px rgba(31, 56, 100, .18);
  padding: 14px 16px;
  font-family: 'Figtree', sans-serif;
  display: none;
}
#glossary-pop.show { display: block; }
#glossary-pop .gp-full {
  font-size:var(--fs-md);
  font-weight:600;
  color: var(--navy);
  margin-bottom: 5px;
}
#glossary-pop .gp-def {
  font-size:var(--fs-md);
  line-height:var(--lh-prose);
  color: var(--ch);
}
#glossary-pop .gp-more {
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid var(--mist);
  font-size:var(--fs-sm);
  color: var(--ink-2);
}

/* ── the nav entry points ────────────────────────────────────────────────── */
/* Glossary and Feedback share one rule, not two that look alike: they are the
   two standing affordances in the nav's right group, and a second nav idiom
   would spend visual weight on chrome (DESIGN.md §1). */
#glossary-btn,
#feedback-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .3);
  color: rgba(255, 255, 255, .88);
  font-family: 'Figtree', sans-serif;
  font-size:var(--fs-md);
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s, color .15s;
}
#glossary-btn:hover,
#feedback-btn:hover {
  border-color: #fff;
  color: #fff;
}

/* ── the panel ───────────────────────────────────────────────────────────── */
#glossary-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 460px;
  max-width: 100vw;
  background: #fff;
  border-left: 1px solid #E3E6EA;
  box-shadow: -14px 0 40px rgba(31, 56, 100, .16);
  z-index: 2500;
  display: flex;
  flex-direction: column;
  font-family: 'Figtree', sans-serif;
  transform: translateX(100%);
  transition: transform .22s ease;
}
#glossary-panel.open { transform: translateX(0); }

#glossary-panel .gl-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 22px 14px;
  background: var(--navy);
  color: #fff;
  flex-shrink: 0;
}
#glossary-panel .gl-title {
  font-family: 'Figtree', sans-serif;
  font-weight: 600;
  font-size:var(--fs-2xl);
  font-weight: 400;
  line-height:var(--lh-tight);
}
#glossary-panel .gl-sub {
  font-size:var(--fs-md);
  color: rgba(255, 255, 255, .72);
  margin-top: 3px;
}
#glossary-panel .gl-close {
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, .8);
  font-size:var(--fs-xl);
  line-height: 1;
  padding: 6px 8px;
  cursor: pointer;
  border-radius: 4px;
}
#glossary-panel .gl-close:hover { color: #fff; }

#glossary-panel .gl-search {
  padding: 12px 22px;
  border-bottom: 1px solid var(--mist);
  flex-shrink: 0;
}
#glossary-q {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid #E0E0E0;
  border-radius: 5px;
  font-size:var(--fs-lg);
  font-family: 'Figtree', sans-serif;
  background: var(--mist);
}
#glossary-q:focus { background: #fff; border-color: var(--navy); }

#glossary-list {
  overflow-y: auto;
  padding: 6px 22px 24px;
  flex: 1;
}
#glossary-list .gl-item {
  padding: 15px 0;
  border-bottom: 1px solid var(--mist);
}
#glossary-list .gl-item[hidden] { display: none; }
#glossary-list .gl-term {
  font-family: 'DM Mono', monospace;
  font-size:var(--fs-md);
  font-weight: 500;
  color: var(--navy);
}
#glossary-list .gl-full {
  font-size:var(--fs-md);
  font-weight: 600;
  color: var(--ch);
  margin: 2px 0 5px;
}
#glossary-list .gl-def {
  font-size:var(--fs-md);
  line-height:var(--lh-prose);
  color: var(--ink-2);
  max-width: 68ch;
}
#glossary-list .gl-item.gl-hit {
  background: #F3F7FB;
  box-shadow: inset 3px 0 0 var(--navy);
  padding-left: 12px;
  margin-left: -12px;
}
#glossary-panel .gl-foot {
  padding: 18px 22px;
  font-size:var(--fs-md);
  color: var(--ink-2);
  flex-shrink: 0;
}

@media (max-width: 900px) {
  #glossary-panel { width: 100vw; }
}

/* ── first-run orientation ───────────────────────────────────────────────── */
/* A slim banner at the memo's column width (15 Aug). No accent stripe and no
   card-in-card: under §1 colour marks status, health and action, never
   structure; under §10 the dashboard is one column of zones. */
#orientation-card {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: var(--sp-3) var(--sp-4);
  margin: 0 0 var(--sp-6);
  font-family: 'Figtree', sans-serif;
}
#orientation-card .or-body {
  flex: 1;
  font-size: var(--fs-md);
  line-height: var(--lh-prose);
  color: var(--ch);
  margin: 0;
}
#orientation-card .or-title { color: var(--navy); font-weight: 600; }
#orientation-card #orientation-dismiss { flex-shrink: 0; margin-top: 2px; }

/* ── demo-boundary notes on LENS and TRACE ───────────────────────────────── */
.demo-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: 1px solid #E3E6EA;
  border-radius: 6px;
  /* Soft Mist rather than an accent stripe: this note is an aside, and §1
     reserves colour for status. The tone difference is enough to set it
     apart from the white cards it sits above. */
  background: var(--mist);
  padding: 12px 16px;
  margin: 0 0 16px;
  font-family: 'Figtree', sans-serif;
  font-size:var(--fs-md);
  line-height:var(--lh-prose);
  color: var(--ink-2);
  max-width: 96ch;
}
.demo-note strong {
  color: var(--ch);
  font-weight:600;
}
/* The portal's note also carries the way from the example into the live
   engine, so it holds a button: the text keeps a prose measure and the button
   sits right at its natural width, never squeezed into a wrap. */
#portal-demo-note { max-width: none; align-items: center; margin-bottom: var(--sp-6); }
#portal-demo-note .demo-note-body { flex: 1; max-width: 80ch; }
#portal-demo-note .btn { flex-shrink: 0; margin-left: auto; white-space: nowrap; }
/* .btn-out is transparent, and --teal-ink over Soft Mist is 4.26:1 — under
   the text floor the white page gives it everywhere else (DESIGN.md §3). A
   white resting ground restores it. The id selector outranks .btn-out:hover,
   so the hover fill is restated or the label turns white on white. */
#portal-demo-note .btn-out { background: var(--white); }
#portal-demo-note .btn-out:hover { background: var(--teal-ink); }