/* SENTINEL v12.2 — learn as you go: marked terms, the definition card,
   Learning-mode notes, and the masthead toggle. Quiet by design: an expert
   should be able to ignore all of it. Tokens only; 12 px floor. */

/* ── marked term ─────────────────────────────────────────────────────
   A real button that looks like the text around it. Only a faint dotted
   underline (and the help cursor) gives it away. */
button.term {
  position: relative;
  display: inline;
  margin: 0; padding: 0; border: 0; border-radius: 0;
  background: none;
  font: inherit; color: inherit;
  letter-spacing: inherit; text-transform: inherit; text-align: inherit;
  line-height: inherit; vertical-align: baseline; white-space: inherit;
  cursor: help;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 42%, transparent);
  text-underline-offset: 0.22em;
  transition: text-decoration-color var(--t-fast) var(--ease);
}
/* Bigger touch target without moving anything: an invisible hit area. */
button.term::after { content: ""; position: absolute; inset: -10px -4px; }
button.term:hover,
button.term[aria-expanded="true"] { text-decoration-color: var(--cyan); }
button.term:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 2px; }
:root[data-learn="on"] button.term { text-decoration-color: color-mix(in srgb, var(--cyan) 70%, transparent); }

/* ── the card ─────────────────────────────────────────────────────── */
.term-card {
  position: fixed; z-index: 66; left: 0; top: 0;
  width: min(340px, calc(100vw - 16px));
  padding: var(--s-3) var(--s-4) var(--s-4);
  background: var(--slate-2);
  border: 1px solid var(--rule-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
  color: var(--paper);
  font-family: var(--f-body);
  font-size: var(--t-14);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  white-space: normal;
  opacity: 0;
}
.term-card.is-in { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .term-card { transform: translateY(3px); transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
  .term-card[data-side="above"] { transform: translateY(-3px); }
  .term-card.is-in { transform: none; }
}
.term-card p + p { margin-top: var(--s-2); }
.term-card-h { font-family: var(--f-display); font-size: var(--t-18); line-height: 1.25; color: var(--paper); }
.term-card-short { color: var(--paper); }
.term-card-why { color: var(--fog); font-size: var(--t-13); }
.term-card-k { display: block; font-size: var(--t-12); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--mist); margin-bottom: 2px; }
.term-card-src { font-size: var(--t-12); color: var(--mist); border-top: 1px solid var(--rule); padding-top: var(--s-2); margin-top: var(--s-3) !important; }
.term-card-src a, .term-card-more a { color: var(--cyan); }
.term-card-src a:hover, .term-card-more a:hover { color: var(--paper); }
.term-card-more { font-size: var(--t-13); }

/* ── Learning-mode notes ──────────────────────────────────────────── */
.learn-note { display: none; }
:root[data-learn="on"] .learn-note {
  display: block;
  max-width: 78ch;
  margin: calc(var(--s-3) * -1) 0 var(--s-5);
  padding: var(--s-2) 0 var(--s-2) var(--s-4);
  border-left: 2px solid color-mix(in srgb, var(--cyan) 55%, transparent);
  font-size: var(--t-14);
  line-height: 1.6;
  color: var(--fog);
}
.learn-note-h { display: block; font-size: var(--t-12); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--cyan); margin-bottom: 2px; }
.learn-note b { color: var(--paper); font-weight: 600; }
/* A note inside a panel body sits flush with its content. */
.panel-body .learn-note { margin: 0 0 var(--s-3) !important; }

/* ── masthead toggle ──────────────────────────────────────────────── */
.learn-btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--rule-2); border-radius: var(--radius); background: var(--ink-2); color: var(--fog);
  padding: 5px 11px 5px 9px; font-family: var(--f-body); font-size: var(--t-13); line-height: 1.5;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.learn-btn svg { flex: none; }
.learn-btn:hover { color: var(--paper); border-color: var(--fog); }
.learn-btn .learn-on, .learn-btn .learn-dot { display: none; }
.learn-btn[aria-pressed="true"] { color: var(--cyan); border-color: color-mix(in srgb, var(--cyan) 55%, transparent); background: color-mix(in srgb, var(--cyan) 8%, var(--ink-2)); }
.learn-btn[aria-pressed="true"] .learn-off { display: none; }
.learn-btn[aria-pressed="true"] .learn-on { display: inline; }
.learn-btn[aria-pressed="true"] .learn-dot { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 20%, transparent); }
.learn-btn[aria-pressed="true"]:hover { color: var(--paper); }
@media (max-width: 560px) { .learn-btn .learn-off, .learn-btn .learn-on { display: none !important; } .learn-btn { padding-inline: 8px; } }
.mast-tools { display: inline-flex; align-items: center; gap: var(--s-2); }

/* ── palette: glossary results ────────────────────────────────────── */
.palette li .k.k-term { color: var(--cyan); }

/* ── Lab · Glossary ───────────────────────────────────────────────── */
#view-lab .gl-list {
  list-style: none;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--s-6);
  border-top: 1px solid var(--rule);
}
@media (max-width: 1180px) { #view-lab .gl-list { grid-template-columns: minmax(0, 1fr); } }
#view-lab .gl-entry {
  padding: var(--s-4) var(--s-3) var(--s-4) var(--s-3);
  margin-inline: calc(var(--s-3) * -1);
  border-bottom: 1px solid var(--rule);
  border-radius: var(--radius);
  scroll-margin-top: 140px;
  transition: background var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease);
}
#view-lab .gl-entry:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }
#view-lab .gl-entry.is-hit { background: color-mix(in srgb, var(--amber) 6%, transparent); box-shadow: inset 3px 0 0 var(--amber); }
/* The highlight already marks where focus landed; a second ring on top is noise. */
#view-lab .gl-entry.is-hit:focus-visible { outline: none; }
#view-lab .gl-term { font-family: var(--f-display); font-weight: 500; font-size: var(--t-18); line-height: 1.3; color: var(--paper); }
#view-lab .gl-also { font-size: var(--t-12); color: var(--mist); margin-top: 2px; }
#view-lab .gl-short { margin-top: var(--s-2); font-size: var(--t-14); color: var(--paper); line-height: 1.55; max-width: 64ch; }
#view-lab .gl-why { margin-top: var(--s-2); font-size: var(--t-13); color: var(--fog); line-height: 1.55; max-width: 64ch; }
#view-lab .gl-k { font-size: var(--t-12); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--mist); margin-right: 4px; }
#view-lab .gl-src { margin-top: var(--s-2); font-size: var(--t-12); color: var(--mist); }
#view-lab .gl-self { font-family: var(--f-data); color: var(--mist); text-decoration: none; padding: 0 4px; margin-left: 2px; }
#view-lab .gl-self:hover { color: var(--cyan); }
#view-lab .gl-empty { font-size: var(--t-14); color: var(--fog); }
#view-lab .gl-foot { max-width: 78ch; }



.term-card-by { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--mist); }

/* v12.6: the Wall link shares the Learn control's look */
.wall-btn { text-decoration: none; }
.wall-btn:hover { text-decoration: none; }
/* v12.6: with the Wall link added, below 900 px both controls show icons only */
@media (max-width: 900px) { .mast .learn-btn .learn-off, .mast .learn-btn .learn-on { display: none !important; } .mast .learn-btn { padding-inline: 8px; } }