/*
 * markdown-extensions.css
 *
 * Styles for all markdown rendering extensions.
 * Include this on any page that renders markdown content.
 *
 * Covers:
 *   - Syntax highlighting (Pygments)
 *   - Admonitions (note, tip, warning, danger, etc.)
 *   - Task lists (checkboxes)
 *   - Collapsible details sections
 *   - Tabbed content
 *   - Keyboard keys
 *   - Highlighted text (mark)
 *   - Mermaid diagrams
 */


/* ============================================================
   1. ADMONITIONS
   !!! note "Title"
       Content here
   ============================================================ */

.prose .admonition,
.prose details {
    margin: 1.5em 0;
    padding: 0;
    border-radius: var(--radius-lg, 8px);
    border: 1px solid var(--border-color, #e2e8f0);
    overflow: hidden;
    font-size: 0.9375rem;
}

.prose .admonition-title,
.prose details > summary {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.75em 1em;
    margin: 0;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: default;
    border-bottom: 1px solid transparent;
}

.prose details > summary {
    cursor: pointer;
    user-select: none;
}

.prose details > summary::-webkit-details-marker {
    display: none;
}

.prose details > summary::before {
    content: "";
    display: inline-block;
    width: 0.4em;
    height: 0.4em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 0.2s ease;
    flex-shrink: 0;
    margin-right: 0.25em;
}

.prose details[open] > summary::before {
    transform: rotate(45deg);
}

.prose .admonition > :not(.admonition-title),
.prose details > :not(summary) {
    padding: 0 1em;
}

.prose .admonition > :last-child,
.prose details > :last-child {
    padding-bottom: 0.75em;
}

.prose .admonition > p:first-of-type:not(.admonition-title),
.prose details > p:first-of-type:not(summary) {
    padding-top: 0.75em;
}

/* --- Admonition icon pseudo-elements --- */
.prose .admonition-title::before,
.prose details > summary::after {
    content: "";
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    flex-shrink: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.prose details > summary::after {
    margin-left: auto;
}

/* Override the before arrow for admonitions (they don't collapse) */
.prose .admonition .admonition-title::before {
    border: none;
    transform: none;
}

/* --- Color themes --- */

/* Note (blue) - default */
.prose .admonition,
.prose details {
    border-color: #3b82f6;
}
.prose .admonition-title,
.prose details > summary {
    background: #eff6ff;
    color: #1e40af;
    border-bottom-color: #bfdbfe;
}
.prose .admonition .admonition-title::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231e40af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E");
}

/* Note */
.prose .admonition.note,
.prose details.note {
    border-color: #3b82f6;
}
.prose .admonition.note > .admonition-title,
.prose details.note > summary {
    background: #eff6ff;
    color: #1e40af;
    border-bottom-color: #bfdbfe;
}

/* Tip / Hint / Important */
.prose .admonition.tip,
.prose .admonition.hint,
.prose .admonition.important,
.prose details.tip,
.prose details.hint,
.prose details.important {
    border-color: #10b981;
}
.prose .admonition.tip > .admonition-title,
.prose .admonition.hint > .admonition-title,
.prose .admonition.important > .admonition-title,
.prose details.tip > summary,
.prose details.hint > summary,
.prose details.important > summary {
    background: #ecfdf5;
    color: #065f46;
    border-bottom-color: #a7f3d0;
}
.prose .admonition.tip .admonition-title::before,
.prose .admonition.hint .admonition-title::before,
.prose .admonition.important .admonition-title::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23065f46' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3Cpath d='M15.09 14c.18-.98.65-1.74 1.41-2.5A4.65 4.65 0 0 0 18 8 6 6 0 0 0 6 8c0 1 .23 2.23 1.5 3.5A4.61 4.61 0 0 1 8.91 14'/%3E%3C/svg%3E");
}

/* Warning / Caution / Attention */
.prose .admonition.warning,
.prose .admonition.caution,
.prose .admonition.attention,
.prose details.warning,
.prose details.caution,
.prose details.attention {
    border-color: #f59e0b;
}
.prose .admonition.warning > .admonition-title,
.prose .admonition.caution > .admonition-title,
.prose .admonition.attention > .admonition-title,
.prose details.warning > summary,
.prose details.caution > summary,
.prose details.attention > summary {
    background: #fffbeb;
    color: #92400e;
    border-bottom-color: #fde68a;
}
.prose .admonition.warning .admonition-title::before,
.prose .admonition.caution .admonition-title::before,
.prose .admonition.attention .admonition-title::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2392400e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
}

/* Danger / Error / Bug */
.prose .admonition.danger,
.prose .admonition.error,
.prose .admonition.bug,
.prose details.danger,
.prose details.error,
.prose details.bug {
    border-color: #ef4444;
}
.prose .admonition.danger > .admonition-title,
.prose .admonition.error > .admonition-title,
.prose .admonition.bug > .admonition-title,
.prose details.danger > summary,
.prose details.error > summary,
.prose details.bug > summary {
    background: #fef2f2;
    color: #991b1b;
    border-bottom-color: #fecaca;
}
.prose .admonition.danger .admonition-title::before,
.prose .admonition.error .admonition-title::before,
.prose .admonition.bug .admonition-title::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23991b1b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2'/%3E%3Cline x1='15' y1='9' x2='9' y2='15'/%3E%3Cline x1='9' y1='9' x2='15' y2='15'/%3E%3C/svg%3E");
}

/* Info / Abstract / Summary / TLDR */
.prose .admonition.info,
.prose .admonition.abstract,
.prose .admonition.summary,
.prose .admonition.tldr,
.prose details.info,
.prose details.abstract,
.prose details.summary,
.prose details.tldr {
    border-color: #06b6d4;
}
.prose .admonition.info > .admonition-title,
.prose .admonition.abstract > .admonition-title,
.prose .admonition.summary > .admonition-title,
.prose .admonition.tldr > .admonition-title,
.prose details.info > summary,
.prose details.abstract > summary,
.prose details.summary > summary,
.prose details.tldr > summary {
    background: #ecfeff;
    color: #155e75;
    border-bottom-color: #a5f3fc;
}

/* Example */
.prose .admonition.example,
.prose details.example {
    border-color: #8b5cf6;
}
.prose .admonition.example > .admonition-title,
.prose details.example > summary {
    background: #f5f3ff;
    color: #5b21b6;
    border-bottom-color: #ddd6fe;
}

/* Quote / Cite */
.prose .admonition.quote,
.prose .admonition.cite,
.prose details.quote,
.prose details.cite {
    border-color: #6b7280;
}
.prose .admonition.quote > .admonition-title,
.prose .admonition.cite > .admonition-title,
.prose details.quote > summary,
.prose details.cite > summary {
    background: #f9fafb;
    color: #374151;
    border-bottom-color: #e5e7eb;
}

/* Success */
.prose .admonition.success,
.prose .admonition.check,
.prose .admonition.done,
.prose details.success,
.prose details.check,
.prose details.done {
    border-color: #22c55e;
}
.prose .admonition.success > .admonition-title,
.prose .admonition.check > .admonition-title,
.prose .admonition.done > .admonition-title,
.prose details.success > summary,
.prose details.check > summary,
.prose details.done > summary {
    background: #f0fdf4;
    color: #166534;
    border-bottom-color: #bbf7d0;
}

/* FAQ / Question */
.prose .admonition.question,
.prose .admonition.faq,
.prose .admonition.help,
.prose details.question,
.prose details.faq,
.prose details.help {
    border-color: #22d3ee;
}
.prose .admonition.question > .admonition-title,
.prose .admonition.faq > .admonition-title,
.prose .admonition.help > .admonition-title,
.prose details.question > summary,
.prose details.faq > summary,
.prose details.help > summary {
    background: #ecfeff;
    color: #0e7490;
    border-bottom-color: #a5f3fc;
}


/* ============================================================
   2. TASK LISTS
   - [x] Done
   - [ ] Not done
   ============================================================ */

.prose .task-list {
    list-style: none;
    padding-left: 0;
}

.prose .task-list-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5em;
    padding: 0.25em 0;
    position: relative;
}

.prose .task-list-control {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-top: 0.15em;
}

.prose .task-list-control input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 1.125em;
    height: 1.125em;
    border: 2px solid var(--border-color, #d1d5db);
    border-radius: var(--radius-sm, 4px);
    background: var(--bg-primary, #fff);
    cursor: default;
    position: relative;
    flex-shrink: 0;
}

.prose .task-list-control input[type="checkbox"]:checked {
    background: var(--color-primary, #3b82f6);
    border-color: var(--color-primary, #3b82f6);
}

.prose .task-list-control input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 0px;
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.prose .task-list-indicator {
    display: none;
}

/* Strikethrough completed items (subtle) */
.prose .task-list-item:has(input:checked) {
    color: var(--text-secondary, #6b7280);
}


/* ============================================================
   3. TABBED CONTENT
   === "Tab 1"
       Content here
   ============================================================ */

.prose .tabbed-set {
    margin: 1.5em 0;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: var(--radius-lg, 8px);
    overflow: hidden;
}

/* Hide the radio inputs */
.prose .tabbed-set > input {
    display: none;
}

/* Tab labels container */
.prose .tabbed-labels {
    display: flex;
    overflow-x: auto;
    background: var(--bg-secondary, #f8fafc);
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.prose .tabbed-labels::-webkit-scrollbar {
    display: none;
}

.prose .tabbed-labels > label {
    padding: 0.75em 1.25em;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary, #6b7280);
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    margin-bottom: -1px;
}

.prose .tabbed-labels > label:hover {
    color: var(--text-primary, #111827);
}

/* Active tab label: connect input:checked to its label via nth-child */
.prose .tabbed-set > input:nth-child(1):checked ~ .tabbed-labels > label:nth-child(1),
.prose .tabbed-set > input:nth-child(2):checked ~ .tabbed-labels > label:nth-child(2),
.prose .tabbed-set > input:nth-child(3):checked ~ .tabbed-labels > label:nth-child(3),
.prose .tabbed-set > input:nth-child(4):checked ~ .tabbed-labels > label:nth-child(4),
.prose .tabbed-set > input:nth-child(5):checked ~ .tabbed-labels > label:nth-child(5),
.prose .tabbed-set > input:nth-child(6):checked ~ .tabbed-labels > label:nth-child(6),
.prose .tabbed-set > input:nth-child(7):checked ~ .tabbed-labels > label:nth-child(7),
.prose .tabbed-set > input:nth-child(8):checked ~ .tabbed-labels > label:nth-child(8) {
    color: var(--color-primary, #3b82f6);
    border-bottom-color: var(--color-primary, #3b82f6);
}

/* Tab content panels */
.prose .tabbed-content {
    padding: 0;
}

.prose .tabbed-block {
    display: none;
    padding: 1em;
}

/* Show active tab content */
.prose .tabbed-set > input:nth-child(1):checked ~ .tabbed-content > .tabbed-block:nth-child(1),
.prose .tabbed-set > input:nth-child(2):checked ~ .tabbed-content > .tabbed-block:nth-child(2),
.prose .tabbed-set > input:nth-child(3):checked ~ .tabbed-content > .tabbed-block:nth-child(3),
.prose .tabbed-set > input:nth-child(4):checked ~ .tabbed-content > .tabbed-block:nth-child(4),
.prose .tabbed-set > input:nth-child(5):checked ~ .tabbed-content > .tabbed-block:nth-child(5),
.prose .tabbed-set > input:nth-child(6):checked ~ .tabbed-content > .tabbed-block:nth-child(6),
.prose .tabbed-set > input:nth-child(7):checked ~ .tabbed-content > .tabbed-block:nth-child(7),
.prose .tabbed-set > input:nth-child(8):checked ~ .tabbed-content > .tabbed-block:nth-child(8) {
    display: block;
}


/* ============================================================
   4. KEYBOARD KEYS
   ++ctrl+alt+del++
   ============================================================ */

.prose kbd {
    display: inline-block;
    padding: 0.15em 0.4em;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.8125em;
    line-height: 1;
    color: var(--text-primary, #111827);
    background: var(--bg-secondary, #f8fafc);
    border: 1px solid var(--border-color, #d1d5db);
    border-bottom-width: 2px;
    border-radius: var(--radius-sm, 4px);
    box-shadow: 0 1px 0 rgba(0,0,0,0.06);
    white-space: nowrap;
    vertical-align: baseline;
}

.prose .keys {
    display: inline-flex;
    align-items: center;
    gap: 0.2em;
}

.prose .keys > span {
    font-size: 0.75em;
    color: var(--text-secondary, #9ca3af);
}


/* ============================================================
   5. HIGHLIGHTED TEXT (mark)
   ==highlighted==
   ============================================================ */

.prose mark {
    background: #fef08a;
    color: inherit;
    padding: 0.1em 0.25em;
    border-radius: 2px;
}


/* ============================================================
   6. SYNTAX HIGHLIGHTING (Pygments)
   ```python
   code here
   ```
   ============================================================ */

.prose .highlight {
    margin: 1.5em 0;
    border-radius: var(--radius-md, 6px);
    overflow: hidden;
    border: 1px solid var(--border-color, #e2e8f0);
}

.prose .highlight pre {
    margin: 0;
    padding: 1em;
    overflow-x: auto;
    font-size: 0.8125rem;
    line-height: 1.6;
    background: #f8f9fa;
}

.prose .highlight code {
    background: none;
    padding: 0;
    border: none;
    font-size: inherit;
}

/* Pygments token colors (default theme) */
.highlight .hll { background-color: #ffffcc }
.highlight .c   { color: #6a737d; font-style: italic }  /* Comment */
.highlight .err { color: #a61717; background-color: #fbe7e9 }  /* Error */
.highlight .k   { color: #cf222e; font-weight: 600 }  /* Keyword */
.highlight .o   { color: #0550ae }  /* Operator */
.highlight .ch  { color: #6a737d; font-style: italic }  /* Comment.Hashbang */
.highlight .cm  { color: #6a737d; font-style: italic }  /* Comment.Multiline */
.highlight .cp  { color: #cf222e }  /* Comment.Preproc */
.highlight .cpf { color: #6a737d; font-style: italic }  /* Comment.PreprocFile */
.highlight .c1  { color: #6a737d; font-style: italic }  /* Comment.Single */
.highlight .cs  { color: #6a737d; font-weight: 600; font-style: italic }  /* Comment.Special */
.highlight .gd  { color: #82071e; background-color: #ffebe9 }  /* Generic.Deleted */
.highlight .ge  { font-style: italic }  /* Generic.Emph */
.highlight .ges { font-weight: 600; font-style: italic }  /* Generic.EmphStrong */
.highlight .gr  { color: #a61717 }  /* Generic.Error */
.highlight .gh  { color: #0550ae; font-weight: 600 }  /* Generic.Heading */
.highlight .gi  { color: #116329; background-color: #dafbe1 }  /* Generic.Inserted */
.highlight .go  { color: #6a737d }  /* Generic.Output */
.highlight .gp  { color: #6a737d; font-weight: 600 }  /* Generic.Prompt */
.highlight .gs  { font-weight: 600 }  /* Generic.Strong */
.highlight .gu  { color: #0550ae }  /* Generic.Subheading */
.highlight .gt  { color: #a61717 }  /* Generic.Traceback */
.highlight .kc  { color: #cf222e; font-weight: 600 }  /* Keyword.Constant */
.highlight .kd  { color: #cf222e; font-weight: 600 }  /* Keyword.Declaration */
.highlight .kn  { color: #cf222e; font-weight: 600 }  /* Keyword.Namespace */
.highlight .kp  { color: #cf222e }  /* Keyword.Pseudo */
.highlight .kr  { color: #cf222e; font-weight: 600 }  /* Keyword.Reserved */
.highlight .kt  { color: #953800 }  /* Keyword.Type */
.highlight .m   { color: #0550ae }  /* Literal.Number */
.highlight .s   { color: #0a3069 }  /* Literal.String */
.highlight .na  { color: #116329 }  /* Name.Attribute */
.highlight .nb  { color: #953800 }  /* Name.Builtin */
.highlight .nc  { color: #953800; font-weight: 600 }  /* Name.Class */
.highlight .no  { color: #0550ae }  /* Name.Constant */
.highlight .nd  { color: #8250df }  /* Name.Decorator */
.highlight .ni  { color: #0550ae }  /* Name.Entity */
.highlight .ne  { color: #953800; font-weight: 600 }  /* Name.Exception */
.highlight .nf  { color: #8250df }  /* Name.Function */
.highlight .nl  { color: #0550ae }  /* Name.Label */
.highlight .nn  { color: #953800 }  /* Name.Namespace */
.highlight .nt  { color: #116329 }  /* Name.Tag */
.highlight .nv  { color: #0550ae }  /* Name.Variable */
.highlight .ow  { color: #cf222e; font-weight: 600 }  /* Operator.Word */
.highlight .w   { color: #6a737d }  /* Text.Whitespace */
.highlight .mb  { color: #0550ae }  /* Literal.Number.Bin */
.highlight .mf  { color: #0550ae }  /* Literal.Number.Float */
.highlight .mh  { color: #0550ae }  /* Literal.Number.Hex */
.highlight .mi  { color: #0550ae }  /* Literal.Number.Integer */
.highlight .mo  { color: #0550ae }  /* Literal.Number.Oct */
.highlight .sa  { color: #0a3069 }  /* Literal.String.Affix */
.highlight .sb  { color: #0a3069 }  /* Literal.String.Backtick */
.highlight .sc  { color: #0a3069 }  /* Literal.String.Char */
.highlight .dl  { color: #0a3069 }  /* Literal.String.Delimiter */
.highlight .sd  { color: #6a737d; font-style: italic }  /* Literal.String.Doc */
.highlight .s2  { color: #0a3069 }  /* Literal.String.Double */
.highlight .se  { color: #0550ae }  /* Literal.String.Escape */
.highlight .sh  { color: #0a3069 }  /* Literal.String.Heredoc */
.highlight .si  { color: #0a3069 }  /* Literal.String.Interpol */
.highlight .sx  { color: #0a3069 }  /* Literal.String.Other */
.highlight .sr  { color: #0a3069 }  /* Literal.String.Regex */
.highlight .s1  { color: #0a3069 }  /* Literal.String.Single */
.highlight .ss  { color: #0a3069 }  /* Literal.String.Symbol */
.highlight .bp  { color: #953800 }  /* Name.Builtin.Pseudo */
.highlight .fm  { color: #8250df }  /* Name.Function.Magic */
.highlight .il  { color: #0550ae }  /* Literal.Number.Integer.Long */
.highlight .vc  { color: #0550ae }  /* Name.Variable.Class */
.highlight .vg  { color: #0550ae }  /* Name.Variable.Global */
.highlight .vi  { color: #0550ae }  /* Name.Variable.Instance */
.highlight .vm  { color: #0550ae }  /* Name.Variable.Magic */
.highlight .p   { color: #24292f }  /* Punctuation */

/* Inline code highlighting */
.prose .highlight-inline {
    padding: 0.15em 0.35em;
    border-radius: 3px;
    font-size: 0.875em;
}


/* ============================================================
   7. MERMAID DIAGRAMS
   ```mermaid
   graph LR
       A --> B
   ```
   ============================================================ */

.prose .mermaid {
    margin: 1.5em 0;
    padding: 1em;
    text-align: center;
    background: var(--bg-secondary, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: var(--radius-lg, 8px);
    overflow-x: auto;
}

/* Mermaid.js not loaded fallback */
.prose .mermaid:not([data-processed="true"]):not(.mermaid-processed) {
    font-family: var(--font-mono, monospace);
    font-size: 0.8125rem;
    text-align: left;
    white-space: pre;
    color: var(--text-secondary, #6b7280);
}


/* ============================================================
   8. FOOTNOTES
   [^1]: Footnote text
   ============================================================ */

.prose .footnote {
    font-size: 0.875rem;
    margin-top: 2em;
    padding-top: 1em;
    border-top: 1px solid var(--border-color, #e2e8f0);
}

.prose .footnote ol {
    padding-left: 1.5em;
}

.prose .footnote li {
    margin-bottom: 0.5em;
}

.prose .footnote-ref {
    font-size: 0.75em;
    vertical-align: super;
    text-decoration: none;
}

.prose .footnote-backref {
    text-decoration: none;
    font-size: 0.875em;
    margin-left: 0.25em;
}


/* ============================================================
   9. TABLES (enhanced)
   ============================================================ */

.prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
    font-size: 0.9375rem;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: var(--radius-md, 6px);
    overflow: hidden;
}

.prose thead th {
    background: var(--bg-secondary, #f8fafc);
    font-weight: 600;
    text-align: left;
    padding: 0.75em 1em;
    border-bottom: 2px solid var(--border-color, #e2e8f0);
}

.prose td {
    padding: 0.625em 1em;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.prose tbody tr:last-child td {
    border-bottom: none;
}

.prose tbody tr:hover {
    background: rgba(0, 0, 0, 0.02);
}


/* ============================================================
   10. DEFINITION LISTS
   ============================================================ */

.prose dl {
    margin: 1.5em 0;
}

.prose dt {
    font-weight: 600;
    margin-top: 1em;
}

.prose dt:first-child {
    margin-top: 0;
}

.prose dd {
    margin-left: 1.5em;
    margin-top: 0.25em;
    color: var(--text-secondary, #4b5563);
}


/* ============================================================
   11. ABBREVIATIONS
   ============================================================ */

.prose abbr[title] {
    text-decoration: underline dotted;
    text-decoration-color: var(--text-secondary, #9ca3af);
    cursor: help;
}