/* OmniFlex Neon (Tokyo Night Base)
   Dark-mode with cyberpunk neon emphasis.

   GLOW RULE (applies to every rule in this file):
     A glow is never a fixed color. It is always derived from the color of the
     element it sits behind — text glows via the `currentColor` tokens
     (--omni-glow-strong / -mid / -soft), non-text elements (rules, quotes,
     images, marks, buttons) via color-mix() on the single accent variable that
     also paints the element. Change the color, the glow follows.

   Removed 2026-09-03: heading divider bars (h1/h2::after, h3::before), the
   animated gradient underline on external links and on <u>, and every
   gradient FILL (table header, callout background, kbd, mark, buttons, hr,
   bold-italic gradient text). Flat fills + color-matched glows only.
*/

/* Fonts */
:root {
  --default-font: "JetBrains Mono Nerd Font", "JetBrains Mono", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-monospace: "Anonymouse Pro for Powerline", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

/* Dark theme variables adapted to OmniFlex while preserving your structure */
.theme-dark {
  --accent-h: 265;
  --accent-s: 100%;
  --accent-l: 72%;

  /* Background layers */
  --bg_dark2_x: 10, 12, 22;
  --bg_dark2: rgb(var(--bg_dark2_x));
  --bg_dark_x: 14, 17, 34;
  --bg_dark: rgb(var(--bg_dark_x));
  --bg_x: 15, 19, 40;
  --bg: rgb(var(--bg_x));
  --bg_highlight_x: 40, 44, 76;
  --bg_highlight: rgb(var(--bg_highlight_x));
  --bg_highlight_dark_x: 12, 16, 48;
  --bg_highlight_dark: rgb(var(--bg_highlight_dark_x));
  --terminal_black_x: 60, 68, 110;
  --terminal_black: rgb(var(--terminal_black_x));

  /* Foreground */
  --fg_x: 240, 246, 255;
  --fg: rgb(var(--fg_x));
  --fg_dark_x: 203, 216, 251;
  --fg_dark: rgb(var(--fg_dark_x));
  --comment_x: 142, 154, 197;
  --comment: rgb(var(--comment_x));

  /* Primaries */
  --blue0_x: 40, 128, 255;
  --blue0: rgb(var(--blue0_x));
  --blue_x: 80, 190, 255;
  --blue: rgb(var(--blue_x));
  --cyan_x: 0, 210, 255;
  --cyan: rgb(var(--cyan_x));
  --magenta_x: 165, 100, 255;
  --magenta: rgb(var(--magenta_x));
  --purple_x: 138, 44, 255;
  --purple: rgb(var(--purple_x));
  --orange_x: 255, 170, 120;
  --orange: rgb(var(--orange_x));
  --yellow_x: 240, 210, 120;
  --yellow: rgb(var(--yellow_x));
  --green_x: 140, 230, 150;
  --green: rgb(var(--green_x));
  --teal_x: 26, 188, 156;
  --teal: rgb(var(--teal_x));
  --red_x: 255, 120, 140;
  --red: rgb(var(--red_x));
  --red1_x: 219, 75, 75;
  --red1: rgb(var(--red1_x));
  --unknown: #ffffff;

  /* Token mapping */
  --color_red_rgb: var(--red_x);      --color-red: var(--red);
  --color_purple_rgb: var(--purple_x);--color-purple: var(--purple);
  --color_green_rgb: var(--green_x);  --color-green: var(--green);
  --color_cyan_rgb: var(--cyan_x);    --color-cyan: var(--cyan);
  --color_blue_rgb: var(--blue_x);    --color-blue: var(--blue);
  --color_yellow_rgb: var(--yellow_x);--color-yellow: var(--yellow);
  --color_orange_rgb: var(--orange_x);--color-orange: var(--orange);
  --color_pink_rgb: var(--magenta_x); --color-pink: var(--magenta);

  /* Surfaces */
  --background-primary: var(--bg);
  --background-primary-alt: var(--bg);
  --background-secondary: var(--bg_dark);
  --background-secondary-alt: var(--bg_dark);

  --background-modifier-border: var(--bg_highlight);
  --background-modifier-border-focus: var(--bg_highlight);
  --background-modifier-border-hover: var(--bg_highlight);
  --background-modifier-form-field: var(--bg_dark);
  --background-modifier-form-field-highlighted: var(--bg_dark);
  --background-modifier-box-shadow: rgba(0, 0, 0, 0.45);
  --background-modifier-success: var(--green);
  --background-modifier-error: rgba(var(--red_x), 0.85);
  --background-modifier-error-hover: var(--red);
  --background-modifier-cover: rgba(var(--bg_dark_x), 0.85);
  --background-modifier-hover: var(--bg_highlight);
  --background-modifier-message: rgba(var(--bg_highlight_x), 0.92);

  /* Text */
  --text-normal: var(--fg);
  --text-faint: var(--comment);
  --text-muted: var(--fg_dark);

  /* Heading colors (base) — neon-noire ramp, all unique, blue/purple-forward.
     Mirrors the editor snippet (omniflex-ui.css). */
  --h1-color: #b721ff;  /* Neon Purple — brand primary */
  --h2-color: #1e7bff;  /* Electric Azure Blue — brand primary */
  --h3-color: #6c63ff;  /* Electric Indigo */
  --h4-color: #f72fd0;  /* Neon Magenta-Pink */
  --h5-color: #19e3c6;  /* Neon Aqua / Teal */
  --h6-color: #9fb0e8;  /* Muted Periwinkle-Steel */

  --tag-color: var(--magenta);
  --tag-background: rgba(var(--magenta_x), 0.15);
  --inline-title-color: var(--magenta);

  --text-error: var(--red1);
  --text-error-hover: var(--red);
  --text-selection: rgba(var(--blue0_x), 0.6);
  --text-on-accent: var(--bg);
  --interactive-normal: var(--bg_dark);
  --interactive-hover: var(--bg);
  --interactive-success: var(--green);

  --text-highlight-bg: rgba(var(--orange_x), 0.4);
  --text-highlight-fg: var(--bg);

  /* Emphasis colors for inline styles. Each element's glow is derived from
     its own color, so recoloring one of these recolors its glow too. */
  --italic-color: hsl(195 100% 72%);     /* aqua for emphasis */
  --bold-color: hsl(285 100% 78%);       /* magenta-violet for strength */
  --underline-color: hsl(200 100% 70%);  /* <u> text + its solid underline */
  --strike-color: hsl(12 90% 66%);       /* neon orange/red for deletion */

  /* Element accents for things that have no text color of their own.
     Each one paints the element AND feeds its glow via color-mix(). */
  --omni-quote-accent: var(--cyan);      /* blockquote left bar + glow */
  --omni-hr-color: var(--blue);          /* horizontal rule + glow */
  --omni-image-glow: var(--cyan);        /* image halo */
  --omni-mark-bg: var(--yellow);         /* highlight fill + glow */
  --omni-button-bg: var(--purple);       /* button fill + glow */
  --omni-canvas-accent: var(--purple);   /* canvas embed border + glow */

  /* Extra neon helpers */
  --omni-radius: 12px;
  --omni-border: rgba(255, 255, 255, 0.1);

  /* ── Color-matched glow tokens ────────────────────────────────────────
     Custom properties are substituted as a token stream at the point of
     var() USE, not at the point of declaration — so `currentColor` inside
     them resolves against the element doing the glowing. That makes every
     glow built from these tokens automatically the same hue as the text
     it sits behind, with no hardcoded rgba() to drift out of sync.

     These base values are the no-color-mix fallback (full-strength
     currentColor). The @supports block right after this rule swaps in the
     alpha-tapered versions on any engine that supports color-mix() —
     Chrome 111+, Safari 16.2+, Firefox 113+, i.e. everything since 2023.
     Same strategy already used by the editor snippet omniflex-ui.css. */
  --omni-glow-strong: currentColor;   /* inner core of the glow */
  --omni-glow-mid: currentColor;      /* mid falloff */
  --omni-glow-soft: currentColor;     /* outer halo */

  /* Box-shadow glow presets built from the tokens above — the element's own
     `color` drives them, exactly like the text-shadow glows. Use these on
     any element whose `color` IS its accent (rules, images, tags). */
  --omni-box-glow: 0 0 16px var(--omni-glow-strong), 0 0 36px var(--omni-glow-mid);
  --omni-box-glow-soft: 0 0 8px var(--omni-glow-mid);

  /* Hover accent for links. The GLOW and the UNDERLINE always track the
     text color; this only controls the hue links shift TO on hover.
     Set to `currentColor` if you'd rather hovered links keep their own hue
     (heading links stay heading-colored, code pills stay cyan, etc.). */
  --omni-link-hover-color: var(--magenta);
}

/* Alpha-tapered glow tokens where color-mix() is available. Declared as a
   separate @supports rule so older engines silently keep the solid
   currentColor fallback above instead of dropping the glow entirely. */
@supports (color: color-mix(in srgb, red 50%, transparent)) {
  .theme-dark {
    --omni-glow-strong: color-mix(in srgb, currentColor 65%, transparent);
    --omni-glow-mid: color-mix(in srgb, currentColor 45%, transparent);
    --omni-glow-soft: color-mix(in srgb, currentColor 25%, transparent);
  }
}

/* ── Site background (dark theme only) — updated 2026-10-17 ─────────────
   Public site = branded cybercity (OmniFlex Design System asset
   omniflex_background). internal.omniflexfitness.com uses a different image
   (hex circuit) so you can tell the two sites apart at a glance.
   Design-system rules applied: imagery sits on the #050510 canvas under a
   scrim; HUD glass panels (glass-fill .55 + glass-line .14 + 14px blur)
   float over it and never cover the whole canvas.
   Notes for future edits:
   - Publish puts .theme-dark ON <body>, so select `body.theme-dark`
     (the old `.theme-dark body` selector here never matched anything).
   - Image URLs must use the publish-01 access host; the custom domain
     answers file paths with the HTML app shell, not the file.
   - The image is a fixed body::before layer (not background-attachment:
     fixed) so it also holds still on iOS.
   - Glass on the nav column and note sheet comes from a ::before layer,
     never backdrop-filter on the column itself: a filtered element becomes
     the containing block for position:fixed children (search, popovers).
   - Light theme is unchanged. */
body.theme-dark {
  --omni-site-bg: url("https://publish-01.obsidian.md/access/e652660e87175c467f632b8d3ab41c10/Assets/Site/IMGS/BG/omniflex-bg-public.webp");
  --omni-site-scrim: rgba(5, 5, 16, 0.5);
  --omni-glass-fill: rgba(26, 27, 38, 0.55);
  --omni-glass-line: rgba(255, 255, 255, 0.14);
  --omni-glass-blur: 14px;
  --omni-panel-fill: rgba(15, 19, 40, 0.62);
  --omni-sheet-fill: rgba(15, 19, 40, 0.85);
  background-color: #050510;
}
body.theme-dark::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(var(--omni-site-scrim), var(--omni-site-scrim)),
    var(--omni-site-bg) center / cover no-repeat,
    #050510;
}

/* Left column: tinted glass so the nav stays readable over the image */
body.theme-dark .site-body-left-column {
  background-color: transparent;
  isolation: isolate;
}
body.theme-dark .site-body-left-column::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--omni-panel-fill);
  border-right: 1px solid var(--omni-glass-line);
  -webkit-backdrop-filter: blur(var(--omni-glass-blur));
  backdrop-filter: blur(var(--omni-glass-blur));
}

/* Note sheet: near-opaque so long reading stays comfortable */
body.theme-dark .publish-renderer > .markdown-preview-view > .markdown-preview-sizer {
  position: relative;
  isolation: isolate;
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
body.theme-dark .publish-renderer > .markdown-preview-view > .markdown-preview-sizer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--omni-sheet-fill);
  -webkit-backdrop-filter: blur(var(--omni-glass-blur));
  backdrop-filter: blur(var(--omni-glass-blur));
}

/* Right column stays open; the graph and the outline are floating HUD cards */
body.theme-dark .graph-view-container {
  background-color: var(--omni-glass-fill);
  border: 1px solid var(--omni-glass-line);
  border-radius: 12px;
  -webkit-backdrop-filter: blur(var(--omni-glass-blur));
  backdrop-filter: blur(var(--omni-glass-blur));
}
body.theme-dark .outline-view-outer {
  margin-top: 32px;
  padding: 14px 14px 10px;
  background-color: var(--omni-glass-fill);
  border: 1px solid var(--omni-glass-line);
  border-radius: 12px;
  -webkit-backdrop-filter: blur(var(--omni-glass-blur));
  backdrop-filter: blur(var(--omni-glass-blur));
}
body.theme-dark .outline-view-outer .outline-view {
  padding-bottom: 8px;
}

/* Phones/tablets: the nav slides in over the note, so make it nearly opaque
   and skip the blur (cheaper to paint on mobile GPUs) */
@media (max-width: 750px) {
  body.theme-dark .site-body-left-column::before {
    background-color: rgba(15, 19, 40, 0.94);
    border-right: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  body.theme-dark .publish-renderer > .markdown-preview-view > .markdown-preview-sizer::before {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Base typography */
.theme-dark body,
.theme-dark .markdown-rendered {
  font-family: var(--default-font);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--fg);
}
.theme-dark .markdown-rendered p,
.theme-dark .markdown-rendered li { color: var(--fg); }

/* Headings: shared layout + one shared glow.
   The glow is built from the currentColor tokens, so each level glows in its
   OWN color automatically — change --h4-color and the H4 glow follows.
   No divider bars: the heading is the color, the glow is the accent. */
.theme-dark .markdown-rendered h1,
.theme-dark .markdown-rendered h2,
.theme-dark .markdown-rendered h3,
.theme-dark .markdown-rendered h4,
.theme-dark .markdown-rendered h5,
.theme-dark .markdown-rendered h6 {
  letter-spacing: 0.25px;
  font-weight: 900;
  line-height: 1.2;
  margin-top: 1.2em;
  margin-bottom: 0.55em;
  position: relative;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.35),
    0 0 14px var(--omni-glow-mid),
    0 0 26px var(--omni-glow-soft);
}

/* Per-heading color + size only — the glow above tracks whatever color
   each level resolves to. */
.theme-dark .markdown-rendered h1 { color: var(--h1-color); font-size: 2.15rem; }
.theme-dark .markdown-rendered h2 { color: var(--h2-color); font-size: 1.8rem; }
.theme-dark .markdown-rendered h3 { color: var(--h3-color); font-size: 1.42rem; }
.theme-dark .markdown-rendered h4 { color: var(--h4-color); font-size: 1.2rem; }
.theme-dark .markdown-rendered h5 { color: var(--h5-color); font-size: 1.05rem; }
.theme-dark .markdown-rendered h6 {
  color: var(--h6-color); font-size: 0.96rem; text-transform: uppercase; letter-spacing: 0.8px;
}

/* Defensive: make sure no theme-level divider pseudo-element survives on
   headings (older Publish/app.css variants draw one). */
.theme-dark .markdown-rendered :is(h1, h2, h3, h4, h5, h6)::before,
.theme-dark .markdown-rendered :is(h1, h2, h3, h4, h5, h6)::after {
  content: none;
}

/* ── Links ────────────────────────────────────────────────────────────────
   One rule, one principle: the underline color and the glow color are BOTH
   derived from the link's live text color. On hover the text shifts to
   --omni-link-hover-color and the underline + glow shift with it — there is
   no separate underline color to fall out of sync.
   `text-decoration-color: currentColor` is declared explicitly (not left to
   the initial value) so nothing in app.css can pin it to a fixed hue. */
.theme-dark .markdown-rendered a,
.theme-dark .site-body a {
  color: var(--blue);
  text-decoration: none;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
  position: relative;
  transition:
    color 0.15s ease,
    text-shadow 0.15s ease,
    filter 0.15s ease;
}
.theme-dark .markdown-rendered a:hover,
.theme-dark .site-body a:hover {
  color: var(--omni-link-hover-color);
  text-decoration-color: currentColor;
  text-shadow:
    0 0 10px var(--omni-glow-strong),
    0 0 26px var(--omni-glow-mid);
  filter: brightness(1.08);
}

/* Sidebar nav tree (Publish left column). The <a> inherits its row's color
   so app.css's nav semantics survive: --nav-item-color (muted) for normal
   rows, --nav-item-color-active (accent) for the current page. Hover goes
   to the theme hover color; underline + glow come from currentColor like
   every other link. No inset "underline" — publish.js used to paint one as
   an inline box-shadow in the rest color; that write is gone. */
.theme-dark .site-body .nav-view a,
.theme-dark .site-body .nav-view-outer .tree-item-self a {
  color: inherit;
  text-decoration: none;
  box-shadow: none;
}
.theme-dark .site-body .nav-view a:hover,
.theme-dark .site-body .nav-view-outer .tree-item-self a:hover {
  color: var(--omni-link-hover-color);
  text-shadow:
    0 0 10px var(--omni-glow-strong),
    0 0 22px var(--omni-glow-mid);
}
.theme-dark .site-body .nav-view-outer .tree-item-self.mod-active {
  text-shadow: 0 0 10px var(--omni-glow-soft);
}

/* Special-cased links keep their own hue on hover and glow in it.
   Without these, the generic rule above would drag cyan code pills, yellow
   footnote refs and heading-colored links to the magenta accent. Each one
   re-asserts its own color; the glow tokens then track it.
   Note: `inherit` is only correct where the PARENT carries the color the link
   should keep (a heading, a <code> pill). Pills and footnote refs set their
   color on the <a> itself, so those restate the literal value. */
.theme-dark .markdown-rendered :is(h1, h2, h3, h4, h5, h6) a:hover,
.theme-dark .markdown-rendered code a:hover {
  color: inherit;
  text-shadow:
    0 0 10px var(--omni-glow-strong),
    0 0 26px var(--omni-glow-mid);
}
.theme-dark .omni-code-link a.internal-link:hover {
  color: #00d4ff;
  text-shadow:
    0 0 10px var(--omni-glow-strong),
    0 0 24px var(--omni-glow-mid);
}
.theme-dark .markdown-rendered sup.footnote-ref a:hover {
  color: var(--yellow);
  text-shadow:
    0 0 8px var(--omni-glow-strong),
    0 0 20px var(--omni-glow-mid);
}
/* …and links inside headings should be heading-colored to begin with, not
   dropped to the generic link blue. Underline stays as the affordance. */
.theme-dark .markdown-rendered :is(h1, h2, h3, h4, h5, h6) a {
  color: inherit;
}

/* ── Link underline logic (mirrors obsidian.css) ──
   Plain links — internal wikilinks AND external links — get a solid
   underline in currentColor as the affordance. Links carrying other inline
   markdown (bold / italic / underline / strike / highlight / code), or
   rendered as neon code pills via the `omni-code-link` cssclass, get NO
   underline. (The external-link animated gradient bar is gone.) */
.theme-dark .markdown-rendered a.internal-link,
.theme-dark .markdown-rendered a.external-link,
.theme-dark .markdown-preview-view a.internal-link,
.theme-dark .markdown-preview-view a.external-link {
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: 2px;
}
.theme-dark .markdown-rendered :is(b, strong, i, em, u, mark, del, s, code) a,
.theme-dark .markdown-rendered a:has(b, strong, i, em, u, mark, del, s, code),
.theme-dark .omni-code-link a.internal-link {
  text-decoration: none !important;
}

/* Neon code-pill wikilinks (Legend terms) — scoped via the `omni-code-link`
   cssclass so linked terms match the inline-code pill look. */
.theme-dark .omni-code-link a.internal-link {
  background: var(--bg_highlight_dark);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.02rem 0.36rem;
  border-radius: 6px;
  color: #00d4ff;
  text-shadow: 0 0 8px var(--omni-glow-strong);
  font-family: var(--font-monospace);
}

/* Inline emphasis: italics, bold, underline, strike.
   Each gets a glow whose color matches its own text color, via the
   currentColor tokens — so recoloring --italic-color / --bold-color /
   --underline-color / --strike-color recolors the glow with it. */
.theme-dark .markdown-rendered em,
.theme-dark .markdown-rendered i {
  color: var(--italic-color);
  font-style: italic;
  text-shadow: 0 0 8px var(--omni-glow-mid);
}
.theme-dark .markdown-rendered strong,
.theme-dark .markdown-rendered b {
  color: var(--bold-color);
  font-weight: 900;
  text-shadow: 0 0 10px var(--omni-glow-strong);
}
/* <u>: solid underline in the element's own color (was an animated
   cyan→magenta gradient bar). */
.theme-dark .markdown-rendered u {
  color: var(--underline-color);
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-shadow: 0 0 8px var(--omni-glow-mid);
}
.theme-dark .markdown-rendered del,
.theme-dark .markdown-rendered s {
  color: var(--strike-color);
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
  text-shadow: 0 0 6px var(--omni-glow-strong);
}

/* Combined strong+em: bold color, italic posture, stronger glow.
   (Was a magenta→cyan gradient text fill with fixed two-tone shadows.) */
.theme-dark .markdown-rendered strong em,
.theme-dark .markdown-rendered em strong {
  color: var(--bold-color);
  font-style: italic;
  font-weight: 900;
  text-shadow:
    0 0 10px var(--omni-glow-strong),
    0 0 22px var(--omni-glow-mid);
}

/* Mark/highlight and kbd — flat fills, glow derived from the fill color */
.theme-dark .markdown-rendered mark {
  color: #0b1026;
  background: var(--omni-mark-bg);
  padding: 0.1rem 0.25rem;
  border-radius: 4px;
  box-shadow: 0 0 12px color-mix(in srgb, var(--omni-mark-bg) 40%, transparent);
}
.theme-dark .markdown-rendered kbd {
  font-family: var(--font-monospace);
  font-weight: 700;
  color: #e9f3ff;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom-color: rgba(0, 0, 0, 0.45);
  padding: 0.1rem 0.35rem;
  border-radius: 6px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.5), 0 0 12px var(--omni-glow-soft);
}

/* Horizontal rule — one solid line in --omni-hr-color, glowing in the same
   color. `color` carries the accent so the currentColor glow tokens apply. */
.theme-dark .markdown-rendered hr {
  color: var(--omni-hr-color);
  border: none;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: var(--omni-box-glow-soft), 0 0 18px var(--omni-glow-soft);
  margin: 1.7rem 0;
  position: relative;
}
.theme-dark .markdown-rendered hr::after { content: none; }

/* Blockquotes: flat panel with a single-color neon bar. The bar color and
   its glow both come from --omni-quote-accent. */
.theme-dark .markdown-rendered blockquote {
  margin: 1em 0;
  padding: 0.95rem 1.15rem;
  color: var(--fg_dark);
  background: rgba(255, 255, 255, 0.04);
  border-left: 3px solid var(--omni-quote-accent);
  border-right: 1px dashed color-mix(in srgb, var(--omni-quote-accent) 35%, transparent);
  border-radius: 0 var(--omni-radius) var(--omni-radius) 0;
  box-shadow:
    -2px 0 7px color-mix(in srgb, var(--omni-quote-accent) 55%, transparent),
    -4px 0 16px color-mix(in srgb, var(--omni-quote-accent) 30%, transparent),
    inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

/* Tables — flat header fill, white header text with a white lift */
.theme-dark .markdown-rendered table {
  width: 100%;
  border-collapse: separate; border-spacing: 0;
  overflow: hidden;
  border: 1px solid var(--omni-border);
  border-radius: var(--omni-radius);
  background: rgba(255, 255, 255, 0.03);
  color: var(--fg);
}
.theme-dark .markdown-rendered th,
.theme-dark .markdown-rendered td {
  border-bottom: 1px solid var(--bg_highlight);
  padding: 0.7rem 0.9rem;
}
.theme-dark .markdown-rendered thead th {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  text-shadow: 0 0 8px var(--omni-glow-soft);
}

/* Code — inline pills go neon blue; fenced blocks stay neutral (mirrors editor) */
.theme-dark .markdown-rendered code {
  background: var(--bg_highlight_dark);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.2rem 0.42rem;
  border-radius: 6px;
  color: #00d4ff;
  text-shadow: 0 0 8px var(--omni-glow-strong);
  font-family: var(--font-monospace);
}
.theme-dark .markdown-rendered pre code {
  display: block;
  padding: 1rem 1.1rem;
  border-radius: var(--omni-radius);
  overflow-x: auto;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  /* Keep fenced-block text neutral; only inline pills go neon blue */
  color: #f5fdff;
  text-shadow: none;
}
/* Code within headings: keep readable */
.theme-dark .markdown-rendered h1 code,
.theme-dark .markdown-rendered h2 code,
.theme-dark .markdown-rendered h3 code {
  background: rgba(0, 0, 0, 0.25);
  border-color: rgba(255, 255, 255, 0.15);
}

/* Lists: markers inherit their section's heading color.
   publish.js sets --omni-marker to the EXACT nearest preceding heading color
   per list; the CSS sibling cascade below is a no-JS fallback (tracks the
   deepest heading level seen — correct for descending sections). */
.theme-dark .markdown-rendered :is(h1, .el-h1) ~ * { --omni-marker: var(--h1-color); }
.theme-dark .markdown-rendered :is(h2, .el-h2) ~ * { --omni-marker: var(--h2-color); }
.theme-dark .markdown-rendered :is(h3, .el-h3) ~ * { --omni-marker: var(--h3-color); }
.theme-dark .markdown-rendered :is(h4, .el-h4) ~ * { --omni-marker: var(--h4-color); }
.theme-dark .markdown-rendered :is(h5, .el-h5) ~ * { --omni-marker: var(--h5-color); }
.theme-dark .markdown-rendered :is(h6, .el-h6) ~ * { --omni-marker: var(--h6-color); }
.theme-dark .markdown-rendered li::marker { color: var(--omni-marker, var(--cyan)); }

/* Buttons — flat fill, glow derived from the fill */
.theme-dark button,
.theme-dark .button,
.theme-dark .site-body .button {
  background: var(--omni-button-bg);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 0.62rem 1.15rem;
  font-weight: 800;
  letter-spacing: 0.2px;
  box-shadow:
    0 0 16px color-mix(in srgb, var(--omni-button-bg) 65%, transparent),
    0 0 36px color-mix(in srgb, var(--omni-button-bg) 40%, transparent);
  transition: transform 0.08s ease, filter 0.15s ease;
}
.theme-dark button:hover,
.theme-dark .button:hover,
.theme-dark .site-body .button:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

/* Publish header/nav */
.theme-dark .site-body .publish-header,
.theme-dark .site-body .site-header {
  background: rgba(5, 7, 20, 0.65);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--omni-border);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.05);
  color: var(--fg);
}
.theme-dark .site-body .nav-view,
.theme-dark .site-body .sidebar {
  background: rgba(255, 255, 255, 0.03);
  border-right: 1px solid var(--omni-border);
  color: var(--fg);
}

/* Breadcrumbs / titles */
.theme-dark .site-body .publish-title,
.theme-dark .site-body .page-header,
.theme-dark .site-body .breadcrumbs {
  color: var(--fg_dark);
}

/* Images — `color` carries the halo accent so the glow tokens apply */
.theme-dark .markdown-rendered img {
  display: block; max-width: 100%;
  color: var(--omni-image-glow);
  border-radius: var(--omni-radius);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.5), 0 0 26px var(--omni-glow-soft);
}

/* ── Callouts ─────────────────────────────────────────────────────────────
   Obsidian/Publish sets `--callout-color` (an RGB triple) per callout type
   and paints the icon with rgb(var(--callout-color)). Deriving the border,
   the outline glow and the tint from that same variable means every callout
   type — info, tip, warning, danger, custom — glows in its icon's color with
   no per-type overrides to maintain. */
.theme-dark .callout {
  --omni-callout-rgb: var(--callout-color, 255, 255, 255);
  border: 1px solid rgba(var(--omni-callout-rgb), 0.45);
  border-radius: var(--omni-radius);
  background: rgba(var(--omni-callout-rgb), 0.07);
  box-shadow:
    0 0 24px rgba(var(--omni-callout-rgb), 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  color: var(--fg);
}
.theme-dark .callout-title {
  color: #ffffff;
  font-weight: 800;
}
.theme-dark .callout-icon {
  color: rgb(var(--omni-callout-rgb));
  filter: drop-shadow(0 0 6px rgba(var(--omni-callout-rgb), 0.6));
}

/* Footnotes styling */
.theme-dark .markdown-rendered sup.footnote-ref a {
  color: var(--yellow);
  text-shadow: 0 0 6px var(--omni-glow-strong);
}
.theme-dark .markdown-rendered .footnotes {
  border-top: 1px dashed rgba(255, 255, 255, 0.15);
  margin-top: 2rem;
  padding-top: 0.5rem;
}

/* Mobile */
@media (max-width: 768px) {
  .theme-dark .markdown-rendered h1 { font-size: 1.78rem; }
  .theme-dark .markdown-rendered h2 { font-size: 1.52rem; }
  .theme-dark .markdown-rendered h3 { font-size: 1.28rem; }
  .theme-dark .markdown-preview-view .markdown-preview-section,
  .theme-dark .markdown-rendered .markdown-preview-section { padding: 1rem; }
}

/* Accent ring for JS enhancement (safe if JS off).
   A cursor-following blurred spot injected by publish.js. Single accent
   color; the radial-gradient is just the soft edge of the blob, not a fill.

   FIX 2026-10-19 (white band under every page on notes.omniflexfitness.com):
   publish.js appends the ring to <html>, OUTSIDE <body>. Publish puts
   .theme-dark on <body>, so the old `.theme-dark .omni-accent-ring` selector
   never matched. The unstyled ring was a static 260x260 block after <body>,
   which made the document 260px taller than the viewport. The window then
   scrolled, the 100vh app shell slid up, and the bare canvas showed below it.
   The canvas is white because Publish gives <body> `contain: strict`, which
   blocks the body background from propagating to the canvas.
   - Base rule (any theme): position: fixed, so the ring never adds
     scrollable overflow, even when the cursor sits at the viewport edge.
     Hidden by default, so light theme and no-:has() browsers fail safe.
   - Dark look keys off html:has(> body.theme-dark). The ring cannot inherit
     --magenta (declared on body.theme-dark), so it carries its own accent
     token with the same value. */
.omni-accent-ring {
  position: fixed;
  display: none;
  pointer-events: none;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  filter: blur(14px);
  opacity: 0.5;
  transform: translate(-50%, -50%);
  z-index: 0;
}
html:has(> body.theme-dark) > .omni-accent-ring {
  --omni-ring-accent: rgb(165, 100, 255); /* = --magenta */
  display: block;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--omni-ring-accent) 30%, transparent), transparent 62%);
}

/* Guard: if anything ever makes the window scroll again, show the site
   canvas color instead of white (body's `contain: strict` stops the usual
   body-to-canvas background propagation). Dark theme only. */
html:has(> body.theme-dark) {
  background-color: #050510;
}


/* ============================================================
   Canvas embeds on notes.omniflexfitness.com
   ============================================================ */

/* Viewer host injected by publish.js — border and glow from one accent */
.omniflex-canvas-embed {
  border: 1px solid color-mix(in srgb, var(--omni-canvas-accent) 45%, transparent);
  box-shadow:
    0 0 12px color-mix(in srgb, var(--omni-canvas-accent) 25%, transparent),
    0 0 32px color-mix(in srgb, var(--omni-canvas-accent) 12%, transparent);
}

/* No-JS / pre-hydration fallback: keep the raw JSON block from
   dominating the page while still being present for readers. */
pre:has(> code.language-json-canvas):not([data-canvas-processed]) {
  max-height: 180px;
  overflow: hidden;
  position: relative;
  opacity: 0.6;
}
pre:has(> code.language-json-canvas):not([data-canvas-processed])::after {
  content: "Interactive canvas — loading…";
  position: absolute;
  inset: auto 0 0 0;
  padding: 0.5em 1em;
  text-align: center;
  font-size: 0.85em;
  background: linear-gradient(transparent, var(--background-primary, #12121a) 60%);
}

/* ============================================================
   Mermaid xychart — disable Publish's dark-theme invert
   ------------------------------------------------------------
   Obsidian Publish's app.css ships:
     .theme-dark .mermaid > svg { filter: invert(100%) hue-rotate(180deg) saturate(1.25); }
   It assumes every Mermaid diagram renders light, then inverts it to suit a
   dark site. That holds for flowchart/pie/graph/mindmap (high-contrast line
   art) but breaks xychart both ways:
     - themed dark  -> inverted to light, hues mangled (#b721ff renders pink)
     - left default -> pale bars invert to near-black on near-black (invisible)
   Scoped to xychart via aria-roledescription so every other diagram type
   keeps its current behaviour. Verified against Mermaid 11.4.1.
   Consequence: every xychart must be explicitly themed.
   ============================================================ */
.theme-dark .mermaid > svg[aria-roledescription="xychart"] {
  filter: none;
}

/* Let xycharts use the full content column instead of the 700px default. */
.mermaid > svg[aria-roledescription="xychart"] {
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* ============================================================
   Mermaid (all diagram types) - label color + overflow guard
   ------------------------------------------------------------
   Root cause (diagnosed 2026-09-19 on Food Hype Audit Hub):
   Mermaid 11 renders node/edge labels as HTML inside <foreignObject>:
     <span class="nodeLabel"><p>text</p></span>
   The base typography rule above
     .theme-dark .markdown-rendered p, li { color: var(--fg); }
   matches that <p> directly, so it beats the color Mermaid sets on the
   parent (.label / .nodeLabel, or a classDef color). The label turns
   near-white, then Publish's dark-theme invert filter flips it to
   near-black on the (also inverted) dark node fill = invisible text.
   Fix: labels inside a diagram inherit Mermaid's own color again.
   Default theme #333 then inverts to ~#ccc; classDef colors are kept.
   ============================================================ */
.theme-dark .markdown-rendered .mermaid p,
.theme-dark .markdown-rendered .mermaid li {
  color: inherit;
}

/* Mermaid writes a fixed pixel width on the svg. Anything wider than the
   ~700px content column was clipped on the right. Scale to fit instead. */
.markdown-rendered .mermaid {
  max-width: 100%;
  text-align: center;
}
.markdown-rendered .mermaid > svg {
  max-width: 100%;
  height: auto;
}
/* ============================================================
   Mermaid flowcharts - OmniFlex neon glow (2026-09-19)
   ------------------------------------------------------------
   Applies to every flowchart / graph that carries NO classDef or
   style directive. Publish's dark-theme invert is switched off for
   these and the diagram is painted directly with brand tokens:
     nodes  -> neon purple outline + glow on deep navy
     edges  -> electric blue + glow (dotted/thick patterns preserved)
     edge labels -> neon blue, cluster titles -> neon magenta
   A diagram that sets its own fills (classDef / style) is detected
   via :has(.node [style*="fill"]) and keeps the legacy invert path,
   so hand-themed notes are never half-overridden.
   Retune the whole look from the six tokens below.
   ============================================================ */
.theme-dark .mermaid {
  --omni-mm-node: 183, 33, 255;     /* #b721ff neon purple  - node outline/glow */
  --omni-mm-edge: 30, 123, 255;     /* #1e7bff electric blue - links/arrowheads */
  --omni-mm-label: 35, 212, 253;    /* #23d4fd neon blue    - edge labels (signature gradient start; was #19e3c6 aqua until 2026-09-23) */
  --omni-mm-cluster: 108, 99, 255;  /* #6c63ff indigo       - subgraph frame */
  --omni-mm-cluster-title: 247, 47, 208; /* #f72fd0 magenta - subgraph title */
  --omni-mm-fill: rgba(16, 20, 52, 0.92);
  --omni-mm-text: #eaf2ff;
}

.theme-dark .mermaid > svg[aria-roledescription^="flowchart"]:not(:has(.node [style*="fill"])) {
  filter: none;
  overflow: visible; /* let the outer glow bleed past the viewBox */
}

/* Nodes */
.theme-dark .mermaid > svg[aria-roledescription^="flowchart"]:not(:has(.node [style*="fill"])) .node :is(rect, circle, ellipse, polygon, path) {
  fill: var(--omni-mm-fill) !important;
  stroke: rgb(var(--omni-mm-node)) !important;
  stroke-width: 1.6px !important;
  rx: 10px;
  ry: 10px;
  filter:
    drop-shadow(0 0 3px rgba(var(--omni-mm-node), 0.95))
    drop-shadow(0 0 10px rgba(var(--omni-mm-node), 0.45));
}
.theme-dark .mermaid > svg[aria-roledescription^="flowchart"]:not(:has(.node [style*="fill"])) :is(.nodeLabel, .nodeLabel p, .label, .label text) {
  color: var(--omni-mm-text) !important;
  fill: var(--omni-mm-text) !important;
  text-shadow: 0 0 8px rgba(var(--omni-mm-edge), 0.55);
}

/* Links + arrowheads */
.theme-dark .mermaid > svg[aria-roledescription^="flowchart"]:not(:has(.node [style*="fill"])) .flowchart-link {
  stroke: rgb(var(--omni-mm-edge)) !important;
  stroke-width: 1.8px !important;
  filter:
    drop-shadow(0 0 3px rgba(var(--omni-mm-edge), 0.9))
    drop-shadow(0 0 8px rgba(var(--omni-mm-edge), 0.4));
}
.theme-dark .mermaid > svg[aria-roledescription^="flowchart"]:not(:has(.node [style*="fill"])) marker path {
  fill: rgb(var(--omni-mm-edge)) !important;
  stroke: rgb(var(--omni-mm-edge)) !important;
}

/* Edge labels */
.theme-dark .mermaid > svg[aria-roledescription^="flowchart"]:not(:has(.node [style*="fill"])) :is(.edgeLabel, .edgeLabel p, .labelBkg) {
  background-color: #0b1026 !important;
  color: rgb(var(--omni-mm-label)) !important;
  text-shadow: 0 0 8px rgba(var(--omni-mm-label), 0.55);
}
.theme-dark .mermaid > svg[aria-roledescription^="flowchart"]:not(:has(.node [style*="fill"])) .edgeLabel rect {
  fill: #0b1026 !important;
  opacity: 1 !important;
}

/* Subgraphs */
.theme-dark .mermaid > svg[aria-roledescription^="flowchart"]:not(:has(.node [style*="fill"])) .cluster rect {
  fill: rgba(var(--omni-mm-cluster), 0.07) !important;
  stroke: rgb(var(--omni-mm-cluster)) !important;
  stroke-dasharray: 6 4;
  rx: 12px;
  ry: 12px;
  filter: drop-shadow(0 0 6px rgba(var(--omni-mm-cluster), 0.45));
}
.theme-dark .mermaid > svg[aria-roledescription^="flowchart"]:not(:has(.node [style*="fill"])) .cluster :is(.nodeLabel, .nodeLabel p, span, text) {
  color: rgb(var(--omni-mm-cluster-title)) !important;
  fill: rgb(var(--omni-mm-cluster-title)) !important;
}

/* ==========================================================================
   OmniFlex Home + Focus Dashboard card grid
   Added 2026-10-13 (Claude Cowork, Design project). Scoped to the cssclasses
   `omniflex-home` and `omniflex-focus`, so no other page changes.

   Markdown pattern (degrades to plain nested callouts where this CSS is absent):
     > [!grid] Section label
     > > [!card] Card title        (accent: blue)
     > > [!card-mint] Card title   (accent: mint)
     > > [!card-pink] Card title   (accent: pink)

   GLOW RULE kept: every glow is color-mix() on --ofh-accent, the same variable
   that paints the rail and the border. Flat fills, no gradient fills.
   ========================================================================== */
:is(.omniflex-home, .omniflex-focus) {
  --ofh-blue: #24B5EA;
  --ofh-mint: #05F2DB;
  --ofh-pink: #EF13F2;
  --ofh-surface: #1A1B26;
  --ofh-line: rgba(255, 255, 255, 0.10);
  --ofh-text-dim: #94A3B8;
  --ofh-display: "Fira Code", "JetBrains Mono", ui-monospace, monospace;
}

/* Grid wrapper: transparent, its title becomes a tracked eyebrow label */
:is(.omniflex-home, .omniflex-focus) .callout[data-callout="grid"] {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 1.5rem 0;
}
:is(.omniflex-home, .omniflex-focus) .callout[data-callout="grid"] > .callout-title {
  padding: 0 0 0.6rem;
  color: var(--ofh-mint);
  font-family: var(--ofh-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
:is(.omniflex-home, .omniflex-focus) .callout[data-callout="grid"] > .callout-title .callout-icon { display: none; }
:is(.omniflex-home, .omniflex-focus) .callout[data-callout="grid"] > .callout-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  padding: 0;
}
:is(.omniflex-home, .omniflex-focus) .callout[data-callout="grid"] > .callout-content > :not(.callout) {
  grid-column: 1 / -1;
}

/* Cards: flat midnight surface, hairline border, one glowing top rail */
:is(.omniflex-home, .omniflex-focus) .callout[data-callout^="card"] {
  --ofh-accent: var(--ofh-blue);
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 18px 18px 14px;
  background: var(--ofh-surface);
  border: 1px solid var(--ofh-line);
  border-radius: 12px;
  box-shadow: none;
  transition: border-color 200ms cubic-bezier(0.65, 0, 0.35, 1),
              box-shadow 200ms cubic-bezier(0.65, 0, 0.35, 1),
              transform 120ms cubic-bezier(0.65, 0, 0.35, 1);
}
:is(.omniflex-home, .omniflex-focus) .callout[data-callout="card-mint"] { --ofh-accent: var(--ofh-mint); }
:is(.omniflex-home, .omniflex-focus) .callout[data-callout="card-pink"] { --ofh-accent: var(--ofh-pink); }
:is(.omniflex-home, .omniflex-focus) .callout[data-callout^="card"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 16px;
  right: 16px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--ofh-accent), transparent);
  box-shadow:
    0 0 6px color-mix(in srgb, var(--ofh-accent) 90%, transparent),
    0 0 14px color-mix(in srgb, var(--ofh-accent) 60%, transparent);
}
:is(.omniflex-home, .omniflex-focus) .callout[data-callout^="card"]:hover {
  border-color: color-mix(in srgb, var(--ofh-accent) 45%, transparent);
  box-shadow:
    0 0 8px color-mix(in srgb, var(--ofh-accent) 45%, transparent),
    0 0 18px color-mix(in srgb, var(--ofh-accent) 20%, transparent),
    inset 0 0 8px color-mix(in srgb, var(--ofh-accent) 10%, transparent);
}
:is(.omniflex-home, .omniflex-focus) .callout[data-callout^="card"]:active { transform: scale(0.98); }
:is(.omniflex-home, .omniflex-focus) .callout[data-callout^="card"] > .callout-title {
  padding: 0 0 6px;
  color: #FFFFFF;
  font-family: var(--ofh-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
:is(.omniflex-home, .omniflex-focus) .callout[data-callout^="card"] > .callout-title .callout-icon { display: none; }
:is(.omniflex-home, .omniflex-focus) .callout[data-callout^="card"] > .callout-content {
  padding: 0;
  color: var(--ofh-text-dim);
  font-size: 0.92rem;
  line-height: 1.55;
}
:is(.omniflex-home, .omniflex-focus) .callout[data-callout^="card"] > .callout-content p:first-child { margin-top: 0; }
:is(.omniflex-home, .omniflex-focus) .callout[data-callout^="card"] .image-embed,
:is(.omniflex-home, .omniflex-focus) .callout[data-callout^="card"] img {
  display: block;
  width: 100%;
  margin: 0 0 10px;
}
:is(.omniflex-home, .omniflex-focus) .callout[data-callout^="card"] img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 50% 30%;
  border-radius: 8px;
}

/* Full-width hero image (first embed after the H1) */
:is(.omniflex-home, .omniflex-focus) .image-embed img[src*=".svg"] {
  border-radius: 20px;
}

@media (prefers-reduced-motion: reduce) {
  :is(.omniflex-home, .omniflex-focus) .callout[data-callout^="card"] { transition: none; }
  :is(.omniflex-home, .omniflex-focus) .callout[data-callout^="card"]:active { transform: none; }
}
/* ======================= end OmniFlex Home + Focus ======================= */


/* ==========================================================================
   OmniFlex table chips + typed columns (added 2026-10-14)
   Mirror of omniflex-ui.css section 20 so chip tables render the same on
   notes.omniflexfitness.com. Markup: <span class="ofx-chip st-live">Published</span>
   Families: st-* status | pf-* platform | dv-* device | mt method | fmt format
   Typed text: .ofx-time (date/time, .is-key = highlighted) | .ofx-muted
   ========================================================================== */

.ofx-chip {
  --chip: #9fb0e8;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.08rem 0.6rem;
  margin: 0.08rem 0.15rem 0.08rem 0;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--chip) 55%, transparent);
  background: color-mix(in srgb, var(--chip) 16%, transparent);
  color: var(--chip);
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.55;
  white-space: nowrap;
  vertical-align: middle;
  text-shadow: none;
}
.theme-dark .ofx-chip {
  box-shadow: 0 0 10px color-mix(in srgb, var(--chip) 22%, transparent);
}
.theme-light .ofx-chip {
  color: color-mix(in srgb, var(--chip) 62%, black);
  background: color-mix(in srgb, var(--chip) 14%, white);
}
.ofx-chip[class*="st-"]::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--chip);
  box-shadow: 0 0 6px var(--chip);
}
.ofx-chip.st-live       { --chip: #3ddc84; }
.ofx-chip.st-sched      { --chip: #4fb3ff; }
.ofx-chip.st-todo       { --chip: #ffb547; }
.ofx-chip.st-missed     { --chip: #ff5c7a; }
.ofx-chip.st-unverified { --chip: #a3acd1; }
.ofx-chip.st-skip       { --chip: #6b7394; text-decoration: line-through; }
.ofx-chip.pf-ig   { --chip: #ff4f9a; }
.ofx-chip.pf-tt   { --chip: #25f4ee; }
.ofx-chip.pf-yt   { --chip: #ff4b4b; }
.ofx-chip.pf-x    { --chip: #e6e9f2; }
.ofx-chip.pf-th   { --chip: #c9b6ff; }
.ofx-chip.pf-fb   { --chip: #4c8dff; }
.ofx-chip.pf-pin  { --chip: #ff3355; }
.ofx-chip.pf-snap { --chip: #f5e94a; }
.ofx-chip.dv-phone   { --chip: #19e3c6; }
.ofx-chip.dv-desktop { --chip: #8c84ff; }
.ofx-chip.dv-any     { --chip: #a3acd1; }
.ofx-chip.dv-phone::before   { content: "\25AF"; font-size: 1.05em; }
.ofx-chip.dv-desktop::before { content: "\25AD"; font-size: 1.05em; }
.ofx-chip.mt  { --chip: #7fd8ff; background: transparent; font-weight: 600; }
.ofx-chip.fmt { --chip: #c77dff; border-radius: 6px; }
.theme-light .ofx-chip.mt { background: transparent; }
.ofx-time {
  font-family: var(--font-monospace);
  font-weight: 700;
  white-space: nowrap;
  color: #9fe7ff;
}
.theme-light .ofx-time { color: #0b6fa8; }
.ofx-time.is-key { color: #ffffff; text-shadow: 0 0 8px rgba(79, 179, 255, 0.85); }
.theme-light .ofx-time.is-key { color: #0050c8; text-shadow: none; }
.ofx-muted { color: var(--text-muted); font-size: 0.86em; }
.markdown-rendered td:has(.ofx-chip) { vertical-align: middle; }
/* ======================= end OmniFlex table chips ======================= */