/* publish.css - TCD CS Notes */

/* ---------------------------------------------------------------------
   1. Palette
   Neutral graphite surfaces; off-white text in dark mode (pure white on
   near-black causes glare/halation for many readers, especially with
   astigmatism); warm paper tone in light mode.
   --------------------------------------------------------------------- */

.theme-dark {
  --g-bg: #14181e;
  --g-surface: #1a1f26;
  --g-soft: #222831;
  --g-field: #101419;
  --g-border: #343c47;
  --g-control: #6b7684;
  --g-text: #e4e7ec;
  --g-muted: #a9b2bd;
  --g-faint: #8f99a5;
  --g-accent: #2f78bf;
  --g-accent-hover: #3a86cf;
  --g-link: #86bdf0;
  --g-focus: #9ccbf5;
  --g-mark: #5c4a1a;
  --g-shadow: 0 1px 2px #0000004d, 0 8px 24px #00000033;
}

.theme-light {
  --g-bg: #fbfbf9;
  --g-surface: #ffffff;
  --g-soft: #f1f3f5;
  --g-field: #ffffff;
  --g-border: #dde1e6;
  --g-control: #858f9b;
  --g-text: #1d232b;
  --g-muted: #525c68;
  --g-faint: #626c78;
  --g-accent: #1f6cb0;
  --g-accent-hover: #195b95;
  --g-link: #1b5d9c;
  --g-focus: #1f6cb0;
  --g-mark: #fbe7a6;
  --g-shadow: 0 1px 2px #1d232b0f, 0 8px 24px #1d232b0d;
}


/* ---------------------------------------------------------------------
   2. Obsidian app variables, mapped onto the palette
   --------------------------------------------------------------------- */

.theme-dark,
.theme-light {
  --background-primary: var(--g-bg);
  --background-primary-alt: var(--g-surface);
  --background-secondary: var(--g-surface);
  --background-secondary-alt: var(--g-soft);
  --background-modifier-border: var(--g-border);
  --background-modifier-border-hover: var(--g-control);
  --background-modifier-border-focus: var(--g-focus);
  --background-modifier-hover: color-mix(in srgb, var(--g-text) 7%, transparent);
  --background-modifier-form-field: var(--g-field);

  --text-normal: var(--g-text);
  --text-muted: var(--g-muted);
  --text-faint: var(--g-faint);
  --text-accent: var(--g-link);
  --text-accent-hover: var(--g-focus);
  --text-selection: color-mix(in srgb, var(--g-accent) 32%, transparent);
  --text-highlight-bg: var(--g-mark);

  --interactive-accent: var(--g-accent);
  --interactive-accent-hover: var(--g-accent-hover);
  --color-accent: var(--g-accent);
  --link-color: var(--g-link);
  --link-color-hover: var(--g-focus);
  --link-external-color: var(--g-link);
  --link-external-color-hover: var(--g-focus);
  --link-unresolved-color: var(--g-muted);
  --link-unresolved-opacity: 1;      /* default 0.7 drops contrast */

  --h1-color: var(--g-text);
  --h2-color: var(--g-text);
  --h3-color: var(--g-text);
  --h4-color: var(--g-text);
  --h5-color: var(--g-text);
  --h6-color: var(--g-text);

  --code-background: var(--g-soft);
  --code-normal: var(--g-text);

  --table-border-color: var(--g-border);
  --table-header-background: var(--g-soft);
  --blockquote-border-color: var(--g-accent);
  --hr-color: var(--g-border);
}

body {
  /* System fonts: no download, native hinting, honours OS font
     settings. Sizes are in rem so browser zoom and the reader's
     default font-size setting both scale the whole page (WCAG 1.4.4). */
  --font-text-theme: -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Helvetica Neue", Arial, sans-serif;
  --font-interface-theme: var(--font-text-theme);
  --font-monospace-theme: ui-monospace, "SF Mono", "Cascadia Mono",
    "JetBrains Mono", Menlo, Consolas, monospace;
  --font-text-size: 1.0625rem;       /* 17px at default settings */
  --line-height-normal: 1.7;

  --radius-s: 6px;
  --radius-m: 8px;
  --radius-l: 12px;
}


/* ---------------------------------------------------------------------
   3. Publish-specific variables (must live on .published-container)
   --------------------------------------------------------------------- */

.published-container {
  /* ~70-75 characters per line at 17px: the comfortable reading range */
  --page-width: 720px;
  --page-padding: 40px;
  --page-title-font: var(--font-text-theme);
  --page-title-weight: 700;
  --page-title-size: 2.25em;
  --page-title-line-height: 1.2;
  --page-title-color: var(--g-text);

  --header-height: 56px;
  --site-name-font: var(--font-text-theme);
  --site-name-size: 1.125rem;
  --site-name-weight: 700;
  --site-name-color: var(--g-text);
  --site-name-color-hover: var(--g-link);
  --site-menu-icon-color: var(--g-muted);
  --site-menu-icon-color-hover: var(--g-text);
  --site-menu-icon-size: 24px;

  --sidebar-left-width: 288px;
  --sidebar-left-background: var(--g-surface);
  --sidebar-left-border-width: 1px;
  --sidebar-left-border-color: var(--g-border);
  --sidebar-right-background: var(--g-bg);
  --sidebar-right-border-width: 0px;

  --nav-parent-item-color: var(--g-text);
  --nav-parent-item-color-active: var(--g-link);
  --nav-parent-item-weight: 600;
  --nav-item-color: var(--g-muted);
  --nav-item-color-hover: var(--g-text);
  --nav-item-color-active: var(--g-text);
  --nav-item-weight-active: 600;
  --nav-item-border-color: var(--g-border);
  --nav-item-border-color-hover: var(--g-control);
  --nav-item-border-color-active: var(--g-accent);
  --nav-collapse-icon-color: var(--g-muted);
  --nav-collapse-icon-color-hover: var(--g-text);

  /* Sentence-case section titles: easier to read than tracked caps */
  --component-title-color: var(--g-muted);
  --component-title-font: var(--font-interface-theme);
  --component-title-size: 0.8125rem;
  --component-title-weight: 600;
  --component-title-transform: none;

  --outline-heading-color: var(--g-muted);
  --outline-heading-color-hover: var(--g-text);
  --outline-heading-color-active: var(--g-text);
  --outline-heading-weight-active: 600;

  --graph-height: 220px;
}


/* ---------------------------------------------------------------------
   4. Reading & typography
   --------------------------------------------------------------------- */

.markdown-rendered {
  font-kerning: normal;
  hyphens: manual;                   /* never split technical terms */
  overflow-wrap: break-word;         /* long identifiers can't overflow */
}
.markdown-rendered :is(p, li) { text-wrap: pretty; }   /* no one-word last lines */
.markdown-rendered p { margin-block: 0 1.1em; }
.markdown-rendered li { margin-block: 0.3em; }

/* Headings: clear size steps + more space above than below, so each
   heading visibly belongs to the text after it */
.page-header,
.markdown-rendered :is(h1, h2, h3, h4) {
  text-wrap: balance;
  letter-spacing: -0.015em;
}
.markdown-rendered h2 { font-size: 1.5em; margin-block: 2.2em 0.6em; }
.markdown-rendered h4 { font-size: 1.2em; margin-block: 1.8em 0.5em; }
/* ###### labels ("Complexity Analysis:", "Each Pass:"):
   bold sentence case, not tiny caps, so they stay readable */
.markdown-rendered h6 { font-size: 1em; font-weight: 700; margin-block: 1.5em 0.4em; }

/* Links are ALWAYS underlined: link colour vs body text is under 3:1,
   so colour alone can't identify them (WCAG 1.4.1) */
.markdown-rendered :is(a.internal-link, a.external-link) {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 55%, transparent);
  text-underline-offset: 0.2em;
}
.markdown-rendered :is(a.internal-link, a.external-link):hover {
  text-decoration-thickness: 2px;
  text-decoration-color: currentColor;
}
/* Unpublished notes: dashed underline signals "not a real page yet"
   without fading the text below readable contrast */
.markdown-rendered a.internal-link.is-unresolved {
  opacity: 1;
  text-decoration-style: dashed;
}

.markdown-rendered strong { font-weight: 650; }

.markdown-rendered mark {
  background: var(--g-mark);
  color: var(--g-text);
  border-radius: 3px;
  padding: 0 0.15em;
}

.markdown-rendered blockquote {
  border-left-width: 3px;
  color: var(--g-muted);
}

/* Maths: display equations scroll instead of overflowing on phones */
.markdown-rendered mjx-container[display="true"] {
  overflow-x: auto;
  overflow-y: hidden;
  padding-block: 0.25em;
}


/* ---------------------------------------------------------------------
   5. Components
   --------------------------------------------------------------------- */

/* Search: a field with a 3:1 border, clear focus ring */
.search-view-container {
  background: var(--g-field);
  border: 1px solid var(--g-control);
  border-radius: var(--radius-m);
}
.search-view-container:focus-within {
  border-color: var(--g-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--g-focus) 30%, transparent);
}
.search-view-container .search-bar {
  background: transparent;
  border: none;
  box-shadow: none;
}

/* Nav: rows at least 28px tall (WCAG 2.5.8 target size is 24px), and the
   current page is marked by a bar + weight, not colour alone */
.nav-view .tree-item-self {
  min-height: 28px;
  border-radius: var(--radius-s);
}
.nav-view .tree-item-self.mod-active {
  background: color-mix(in srgb, var(--g-accent) 16%, transparent);
  box-shadow: inset 3px 0 0 var(--g-accent);
}

/* Inline code (code blocks are section 9) */
.markdown-rendered :not(pre) > code {
  background: var(--g-soft);
  border-radius: 4px;
  padding: 0.1em 0.3em;
  font-size: 0.875em;
}

/* Tables: aligned figures, clear header, rows easy to track */
.markdown-rendered table {
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--g-border);
  border-radius: var(--radius-m);
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}
.markdown-rendered :is(th, td) {
  border: none;
  border-bottom: 1px solid var(--g-border);
  border-right: 1px solid var(--g-border);
  padding: 6px 12px;
  line-height: 1.5;
}
.markdown-rendered tr > :last-child { border-right: none; }
.markdown-rendered tbody tr:last-child > * { border-bottom: none; }
.markdown-rendered th {
  background: var(--g-soft);
  font-weight: 650;
  text-align: left;
}

.markdown-rendered img { border-radius: var(--radius-s); }
.callout { border-radius: var(--radius-m); }

.graph-view-container {
  background: var(--g-surface);
  border: 1px solid var(--g-border);
  border-radius: var(--radius-l);
}

/* Keyboard focus: always visible, 2px, >= 3:1 against the page */
.published-container :is(a, button, input, [tabindex], .tree-item-self):focus-visible {
  outline: 2px solid var(--g-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

.site-footer {
  color: var(--g-faint);
  font-size: 0.75rem;
}


/* ---------------------------------------------------------------------
   6. Accessibility modes, phones & print (forced colours: end of file)
   --------------------------------------------------------------------- */

/* Reader asked the OS for less motion */
@media (prefers-reduced-motion: reduce) {
  .published-container *,
  .published-container *::before,
  .published-container *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Reader asked the OS for more contrast */
@media (prefers-contrast: more) {
  .theme-dark  { --g-muted: #d0d6de; --g-faint: #c0c7d0; --g-border: #6b7684; }
  .theme-light { --g-muted: #333b45; --g-faint: #3e4651; --g-border: #858f9b; }
  .markdown-rendered :is(a.internal-link, a.external-link) {
    text-decoration-color: currentColor;
  }
}

/* Phones: wide tables scroll sideways instead of squashing columns */
@media (max-width: 750px) {
  .published-container { --page-padding: 20px; }
  .markdown-rendered table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
  .markdown-rendered h2 { font-size: 1.35em; }
}

/* Printing a note for revision: black on white, show link targets
   (code blocks: section 11) */
@media print {
  .markdown-rendered { color: #000; }
  .markdown-rendered a.external-link::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #444;
  }
}


/* ---------------------------------------------------------------------
   7. Sidebar cards (injected by publish.js)
   --------------------------------------------------------------------- */

#section-admin-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: sticky;
  bottom: 0;
  z-index: 5;
  padding: 12px 0;
  background: var(--g-surface);
  border-top: 1px solid var(--g-border);
}

.sa-card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: var(--radius-m);
  border: 1px solid var(--g-border);
  background: var(--g-bg);
  color: var(--g-text);
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.sa-card:hover {
  border-color: var(--g-control);
  background: var(--g-soft);
}

.sa-card .sa-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: var(--radius-s);
  background: var(--g-soft);
  font-size: 14px;
}
.sa-card .sa-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  line-height: 1.3;
}
.sa-card .sa-title { font-size: 0.875rem; font-weight: 600; }
.sa-card .sa-sub { font-size: 0.75rem; color: var(--g-muted); }
.sa-card .sa-arrow {
  color: var(--g-muted);
  transition: transform 0.15s ease;
}
.sa-card:hover .sa-arrow {
  transform: translateX(2px);
  color: var(--g-text);
}


/* ---------------------------------------------------------------------
   8. publish.js features: skip link, breadcrumbs, pager, heading links
   --------------------------------------------------------------------- */

/* Skip link: parked off-screen, slides in only on keyboard focus.
   After a click, publish.js moves focus to the note, so it hides again.
   It sits on <body>, outside .published-container, so it needs its own
   focus ring. */
.tcd-skip {
  position: fixed;
  top: 0;
  left: 12px;
  z-index: 10000;
  padding: 10px 16px;
  background: var(--g-surface);
  color: var(--g-text);
  border: 2px solid var(--g-focus);
  border-radius: var(--radius-m);
  box-shadow: var(--g-shadow);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-150%);
}
.tcd-skip:focus {
  transform: translateY(12px);
  outline: none;
}
@media (prefers-reduced-motion: no-preference) {
  .tcd-skip { transition: transform 0.15s ease; }
}

/* Visually hidden, still announced by screen readers (live region) */
.tcd-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Breadcrumbs: one inline row with chevron separators.
   Selectors start with .markdown-rendered so they beat the note's own
   ol/li list styling. */
.markdown-rendered .tcd-breadcrumbs {
  margin: 0 0 0.6rem;
  font-size: 0.875rem;
}
.markdown-rendered .tcd-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--g-muted);
}
.markdown-rendered .tcd-breadcrumbs li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}
.markdown-rendered .tcd-breadcrumbs li + li::before {
  content: "›";           /* CSS content: not read out item by item */
  color: var(--g-faint);
}
.markdown-rendered .tcd-breadcrumbs li[aria-current="page"] {
  color: var(--g-text);
  font-weight: 600;
}

/* Previous / next pager: two cards with a gap, label above title */
.markdown-rendered .tcd-pager {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 3rem 0 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--g-border);
}
.markdown-rendered .tcd-pager-spacer { flex: 1 1 0; }
.markdown-rendered a.tcd-pager-link {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  min-height: 44px;
  padding: 0.75rem 1rem;
  background: var(--g-surface);
  border: 1px solid var(--g-border);
  border-radius: var(--radius-m);
  color: var(--g-text);
  text-decoration: none;      /* these are buttons-as-cards, not inline links */
}
.markdown-rendered a.tcd-pager-link.mod-next {
  align-items: flex-end;
  text-align: right;
}
.markdown-rendered a.tcd-pager-link:hover {
  background: var(--g-soft);
  border-color: var(--g-control);
}
.tcd-pager-label { font-size: 0.8125rem; color: var(--g-muted); }
.tcd-pager-title {
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
@media (max-width: 600px) {
  .markdown-rendered .tcd-pager { flex-direction: column; }
  .markdown-rendered .tcd-pager-spacer { display: none; }
}

/* Heading copy-link button: appears on hover/focus, always visible on
   touch devices where there is no hover */
.markdown-rendered .tcd-heading-link {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-left: 0.4rem;
  padding: 0;
  vertical-align: middle;
  background: transparent;
  border: none;
  border-radius: var(--radius-s);
  color: var(--g-muted);
  cursor: pointer;
  opacity: 0;
  box-shadow: none;
}
.markdown-rendered :is(h2, h3, h4, h5, h6):hover > .tcd-heading-link,
.markdown-rendered .tcd-heading-link:is(:focus-visible, .is-copied) {
  opacity: 1;
}
.markdown-rendered .tcd-heading-link:hover {
  background: var(--g-soft);
  color: var(--g-text);
}
.markdown-rendered .tcd-heading-link.is-copied { color: var(--g-link); }
@media (hover: none) {
  .markdown-rendered .tcd-heading-link { opacity: 0.6; }
}


/* ---------------------------------------------------------------------
   9. Code blocks & syntax highlighting
   Every code block is the same dark panel in both light and dark mode,
   as in the IDE, because the colours are made for a dark background.
   The default palette is sampled from my VS Code (used for C, VHDL, ARM
   assembly and any other language); Java swaps in my IntelliJ IDEA
   (Islands Dark) colours via the variables. Fields, parameters,
   declarations and bracket depth are classes added by publish.js
   feature 7; armasm tokens come from feature 9; the rest are Prism's.
   Every colour is at least 5:1 against the panel (WCAG AA is 4.5:1).
   --------------------------------------------------------------------- */

.markdown-rendered pre {
  --syn-bg: #191a1c;
  --syn-line: #2b2d30;
  --syn-select: #264f78;
  --syn-text: #cbd1d8;
  --syn-punct: #bcbebf;
  --syn-comment: #8b949e;
  --syn-keyword: #ef8377;
  --syn-string: #a5d6ff;
  --syn-number: #79c0ff;
  --syn-function: #ccaafa;
  --syn-type: #72c7b1;
  --syn-param: #f3aa66;
  --syn-directive: #bc89bd;
  --syn-macro: #679bd1;
  --syn-b1: #f9d949;
  --syn-b2: #da70d6;
  --syn-b3: #179fff;

  position: relative;              /* anchors the language label */
  background: var(--syn-bg);
  border: 1px solid var(--syn-line);
  border-radius: var(--radius-m);
  padding: 14px 16px;
  font-size: 0.875em;
  line-height: 1.6;
  tab-size: 4;
  overflow-x: auto;
  color-scheme: dark;              /* dark scrollbars in light mode too */
}

/* IntelliJ: only keywords, declarations, fields, literals and comments
   are coloured; types, calls and punctuation stay plain */
.markdown-rendered pre.language-java {
  --syn-select: #214283;
  --syn-text: #bcbec3;
  --syn-punct: var(--syn-text);
  --syn-type: var(--syn-text);
  --syn-comment: #868a91;
  --syn-keyword: #c59172;
  --syn-string: #6aab73;
  --syn-number: #2aacb8;
  --syn-function: #6ba6ef;         /* declarations */
  --syn-macro: #bd80b8;            /* fields and CONSTANTS */
  --syn-annotation: #b3ae60;
}

.markdown-rendered pre code {
  color: var(--syn-text);
  background: none;
  text-shadow: none;
}
.markdown-rendered pre ::selection { background: var(--syn-select); }
.markdown-rendered pre .copy-code-button {
  background: var(--syn-line);
  color: var(--syn-text);
}

/* Tokens: Obsidian's own colours are reset so only these apply.
   Later rules win ties, so the order matters (e.g. C's "macro-name
   function" and "directive keyword" tokens) */
.markdown-rendered pre .token {
  color: inherit;
  font-style: normal;
  font-weight: normal;
  background: none;
}
.markdown-rendered pre .token:is(.punctuation, .operator) { color: var(--syn-punct); }
.markdown-rendered pre .token:is(.keyword, .boolean) { color: var(--syn-keyword); }
.markdown-rendered pre .token:is(.string, .char) { color: var(--syn-string); }
.markdown-rendered pre .token.number { color: var(--syn-number); }
.markdown-rendered pre .token.comment { color: var(--syn-comment); }
.markdown-rendered pre .token:is(.function, .quoted-function) { color: var(--syn-function); }
.markdown-rendered pre .token:is(.class-name, .attribute) { color: var(--syn-type); }
.markdown-rendered pre .token:is(.constant, .macro-name) { color: var(--syn-macro); }
.markdown-rendered pre .token:is(.directive, .directive-hash) { color: var(--syn-directive); }
.markdown-rendered pre .token.register { color: var(--syn-param); }
.markdown-rendered pre .token.placeholder { font-style: italic; }   /* armasm <condition> */
.markdown-rendered pre .tcd-param { color: var(--syn-param); }
.markdown-rendered pre .tcd-macro { color: var(--syn-macro); }
.markdown-rendered pre .token.tcd-b1 { color: var(--syn-b1); }     /* bracket depth */
.markdown-rendered pre .token.tcd-b2 { color: var(--syn-b2); }
.markdown-rendered pre .token.tcd-b3 { color: var(--syn-b3); }

/* Java extras */
.markdown-rendered pre.language-java .token.tcd-call { color: var(--syn-text); }
.markdown-rendered pre.language-java .token.tcd-decl { color: var(--syn-function); }
.markdown-rendered pre.language-java .tcd-field { color: var(--syn-macro); }
.markdown-rendered pre.language-java .tcd-static { font-style: italic; }
.markdown-rendered pre.language-java :is(.token.annotation, .token.annotation .punctuation) {
  color: var(--syn-annotation);
}

/* VHDL: X"0F" vectors and constants read as values */
.markdown-rendered pre.language-vhdl .token:is(.constant, .vhdl-vectors) { color: var(--syn-number); }


/* ---------------------------------------------------------------------
   10. Code block language label (injected by publish.js feature 8)
   Top right, like Obsidian's own. It makes way for Publish's copy
   button when that appears on hover or keyboard focus.
   --------------------------------------------------------------------- */

.markdown-rendered pre .tcd-lang {
  position: absolute;
  top: 6px;
  right: 10px;
  padding: 0 4px;
  border-radius: 4px;
  background: var(--syn-bg);       /* readable over long lines */
  color: var(--syn-comment);
  font-family: var(--font-interface-theme);
  font-size: 0.75rem;
  line-height: 1.6;
  pointer-events: none;
  user-select: none;
}
.markdown-rendered pre:has(.copy-code-button):is(:hover, :focus-within) .tcd-lang {
  opacity: 0;
}

/* ---------------------------------------------------------------------
   11. Last-word overrides: forced colours and printing code
   Last in the file so they beat everything above.
   --------------------------------------------------------------------- */

/* Windows High Contrast / forced colours: the browser swaps in system
   colours itself; this keeps outlines that would otherwise vanish */
@media (forced-colors: active) {
  .nav-view .tree-item-self.mod-active {
    outline: 2px solid Highlight;
    box-shadow: none;
  }
  .markdown-rendered table,
  .markdown-rendered pre,
  .search-view-container,
  .sa-card,
  .tcd-skip,
  .markdown-rendered a.tcd-pager-link {
    border: 1px solid CanvasText;
  }
}

/* Printing: the code colours are made for a dark panel, so code blocks
   print black on white like the rest of the note */
@media print {
  .markdown-rendered pre,
  .markdown-rendered pre .tcd-lang { background: #fff; border-color: #999; }
  .markdown-rendered pre :is(code, .token, [class*="tcd-"]) { color: #000 !important; }
}