/* Note-level pieces: wikilinks, backlink lists and the compiler demo widgets */

/* --- inline wikilink ---
   A link inside prose. It keeps the dotted underline that marks it as an
   internal jump and drops the ⌗ prefix and the glow-on-hover. */
.wikilink {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent);
  padding: 0 1px;
  transition: border-color .18s, color .18s;
  cursor: pointer;
}
.wikilink:hover { border-bottom-style: solid; color: var(--ink); border-color: var(--ink); }
/* A link to a note that has not been written yet. It keeps the wikilink shape
   so you can see it was meant to be a link, and loses the colour and the
   pointer so you can see it is not one yet. */
.wikilink--missing {
  color: var(--muted);
  border-bottom-color: var(--line);
  border-bottom-style: dotted;
  cursor: help;
}

/* --- note footer ---
   Only the local graph lives down here now. The "links from this note" and
   "linked mentions" lists were removed: the prose already carries every
   outgoing link as a clickable [[wikilink]], and the graph above draws both
   directions, so the lists were the same information a third time. */
.notelinks { margin-top: 38px; padding-top: 24px; border-top: 1px solid var(--line-soft); }

/* --- compiler demo widgets ---
   Token and phase chips carry the one piece of colour these demos need: which
   *kind* of thing a token is. That is semantic, so it stays — as a border and
   a label, without the fill glow. */
.tokrow { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.tok {
  --tokc: var(--muted);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--tokc) 55%, var(--line));
  border-radius: 5px;
  font-family: var(--mono);
}
.tok b { font-size: 12.5px; color: var(--ink); font-weight: 500; }
.tok i { font-size: 9px; letter-spacing: .08em; color: var(--tokc); font-style: normal; }
.tok--ident { --tokc: var(--cyber); }
.tok--number { --tokc: var(--code); }
.tok--operator, .tok--assign { --tokc: var(--tux); }
.tok--keyword { --tokc: var(--comp); }
.tok--punct { --tokc: var(--muted); }
.tok--error { --tokc: #c97b7b; }

.dfa { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.dfa__step {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  font-family: var(--mono);
}
.dfa__step b { font-size: 12px; color: var(--ink); font-weight: 500; }
.dfa__step i { font-size: 9px; color: var(--muted); font-style: normal; }
.dfa__step.is-accept { border-color: var(--code); }
.dfa__step.is-accept i { color: var(--code); }

.astline { font-family: var(--mono); font-size: 13px; color: var(--ink-dim); line-height: 1.7; white-space: pre; }
.tacline { font-family: var(--mono); font-size: 13px; display: flex; gap: 12px; color: var(--ink-dim); }
.tacline span { color: var(--muted); }

.phases { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.phase {
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11.5px;
  color: var(--muted);
  font-family: var(--mono);
  transition: color .18s, border-color .18s, background .18s;
}
.phase:hover { color: var(--ink); border-color: var(--muted); }
.phase.is-on { color: var(--ink); border-color: var(--accent); background: var(--panel-2); }

.demo__hint { font-size: 12.5px; color: var(--muted); margin-top: 12px; line-height: 1.6; font-family: var(--mono); }
.demo__out--err { color: #c97b7b; }

/* --- markdown tables --- */
.tablewrap { overflow-x: auto; margin: 0 0 20px; }
.notepage__body table { border-collapse: collapse; width: 100%; font-size: 14px; }
.notepage__body th, .notepage__body td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line-soft); }
.notepage__body th {
  font-family: var(--mono);
  color: var(--muted);
  font-size: 11.5px;
  letter-spacing: .06em;
  font-weight: 500;
}
.notepage__body td { color: var(--ink-dim); }
.notepage__body tbody tr:hover td { background: var(--panel-2); }