/* content/acord.css
 *
 * Acord's look, ported to the web. Loaded after default.css, so it rebases the
 * site's existing custom properties onto Acord's real palettes and then adds
 * the code-block layer on top.
 *
 * Two palettes, both lifted from viewport/src/palette.rs:
 *   dark  -> KICAD, Acord's default theme
 *   light -> LATTE
 *
 * Token classes are named for the kind numbers Acord's highlighter assigns
 * (see highlight_color in viewport/src/syntax.rs), so .t-57 is a Cordial
 * keyword here exactly as it is in the editor.
 */

/* --------------------------------------------------------------------------
   Palettes
   -------------------------------------------------------------------------- */

:root {
    /* LATTE */
    --ac-rosewater: #dc8a78;
    --ac-flamingo:  #dd7878;
    --ac-pink:      #ea76cb;
    --ac-mauve:     #8839ef;
    --ac-red:       #d20f39;
    --ac-maroon:    #e64553;
    --ac-peach:     #fe640b;
    --ac-yellow:    #df8e1d;
    --ac-green:     #40a02b;
    --ac-teal:      #179299;
    --ac-sky:       #04a5e5;
    --ac-sapphire:  #209fb5;
    --ac-blue:      #1e66f5;
    --ac-lavender:  #7287fd;
    --ac-text:      #4c4f69;
    --ac-subtext1:  #5c5f77;
    --ac-subtext0:  #6c6f85;
    --ac-overlay2:  #7c7f93;
    --ac-overlay1:  #8c8fa1;
    --ac-overlay0:  #9ca0b0;
    --ac-surface2:  #acb0be;
    --ac-surface1:  #bcc0cc;
    --ac-surface0:  #ccd0da;
    --ac-base:      #eff1f5;
    --ac-mantle:    #e6e9ef;
    --ac-crust:     #dce0e8;

    /* eval_value_color() / eval_arrow_color(), light branch */
    --ac-eval-value: #1a8c2e;
    --ac-eval-arrow: var(--ac-red);

    --ac-code-font: "Menlo", "Consolas", "DejaVu Sans Mono", "JetBrains Mono",
                    ui-monospace, SFMono-Regular, monospace;
}

body.dark-mode {
    /* KICAD */
    --ac-rosewater: #f9a3fb;
    --ac-flamingo:  #ffb7ef;
    --ac-pink:      #fc8bce;
    --ac-mauve:     #bd7efb;
    --ac-red:       #f88b8b;
    --ac-maroon:    #ee81a3;
    --ac-peach:     #ffaa65;
    --ac-yellow:    #ffe27c;
    --ac-green:     #97ecab;
    --ac-teal:      #4fffe1;
    --ac-sky:       #67cff8;
    --ac-sapphire:  #62a2f2;
    --ac-blue:      #4fa4fd;
    --ac-lavender:  #f4bc5f;
    --ac-text:      #f6f3f7;
    --ac-subtext1:  #d2cfd9;
    --ac-subtext0:  #adaab9;
    --ac-overlay2:  #8c8b98;
    --ac-overlay1:  #72747f;
    --ac-overlay0:  #5c5e6b;
    --ac-surface2:  #222426;
    --ac-surface1:  #1f2024;
    --ac-surface0:  #1a1c20;
    --ac-base:      #17181d;
    --ac-mantle:    #13141a;
    --ac-crust:     #0f0f0f;

    --ac-eval-value: #4df280;
    --ac-eval-arrow: var(--ac-red);
}

/* --------------------------------------------------------------------------
   Site variables, rebased onto the palette
   -------------------------------------------------------------------------- */

:root,
body.dark-mode {
    --bg-color:          var(--ac-base);
    --text-color:        var(--ac-text);
    --text-muted:        var(--ac-subtext0);
    --link-color:        var(--ac-blue);
    --accent-color:      var(--ac-mauve);
    --sidebar-bg:        var(--ac-mantle);
    --sidebar-border:    var(--ac-surface1);
    --border-color:      var(--ac-surface2);
    --hr-color:          var(--ac-overlay1);
    --blockquote-border: var(--ac-sky);
    --blockquote-color:  var(--ac-sky);
    --precode-bg:        var(--ac-surface0);
    --precode-color:     var(--ac-text);
    --precode-border:    var(--ac-surface2);
    --code-bg:           var(--ac-surface1);
    --code-color:        var(--ac-green);

    /* Heading hues, straight from Acord's markdown dialect:
       H1 rosewater, H2 peach, H3 yellow. H4+ continue down the palette. */
    --h1-color: var(--ac-rosewater);
    --h2-color: var(--ac-peach);
    --h3-color: var(--ac-yellow);
    --h4-color: var(--ac-teal);
    --h5-color: var(--ac-sapphire);
    --h6-color: var(--ac-overlay1);

    --font-mono: var(--ac-code-font);
}

/* Acord's title bar is the window background with no contrasting band
   (EditorWindow.swift sets it to `base`), so the header follows the palette
   per theme rather than staying dark in both. `mantle` sits one step back
   from the page, which is how a web header reads as chrome. */
:root,
body.dark-mode {
    --header-bg:   var(--ac-mantle);
    --header-text: var(--ac-text);
}

.main-header {
    border-bottom: 1px solid var(--ac-surface2);
}

/* --------------------------------------------------------------------------
   Markdown dialect: the colours Acord gives prose
   -------------------------------------------------------------------------- */

/* MD_BLOCKQUOTE and MD_LIST_MARKER are both sky in the editor. */
.main-content blockquote {
    border-left: 3px solid var(--ac-sky);
    color: var(--ac-sky);
}

.main-content li::marker {
    color: var(--ac-sky);
}

.main-content a {
    color: var(--ac-blue);
}

.main-content hr {
    border: none;
    border-top: 1px solid var(--ac-overlay1);
}

/* Tables get the editor's widget surface: surface0 fill, surface2 border,
   and a teal header accent (palette::widget_surface). */
.main-content table {
    border-collapse: collapse;
    background: var(--ac-surface0);
    border: 1px solid var(--ac-surface2);
    border-radius: 6px;
    overflow: hidden;
    font-size: 0.92em;
}

.main-content table th {
    color: var(--ac-teal);
    background: var(--ac-surface1);
    font-weight: 600;
    text-align: left;
}

.main-content table th,
.main-content table td {
    border: 1px solid var(--ac-surface2);
    padding: 0.4em 0.7em;
    color: var(--ac-text);
}

/* --------------------------------------------------------------------------
   Headings: Acord's scale (2.0 / 1.5 / 1.17 / 1.0) and weights
   -------------------------------------------------------------------------- */

.main-content h1 { font-size: 2rem;    font-weight: 900; }
.main-content h2 { font-size: 1.5rem;  font-weight: 700; }
.main-content h3 { font-size: 1.17rem; font-weight: 600; }
.main-content h4 { font-size: 1rem;    font-weight: 500; color: var(--h4-color); }
.main-content h5 { font-size: 1rem;    font-weight: 500; color: var(--h5-color); }
.main-content h6 { font-size: 1rem;    font-weight: 500; color: var(--h6-color); }

/* --------------------------------------------------------------------------
   Inline code
   -------------------------------------------------------------------------- */

/* Light: the same white surface as code blocks (tokens under Code blocks).
   Dark keeps surface1 on surface2. */
:root {
    --ac-inline-code-bg:     #ffffff;
    --ac-inline-code-border: var(--ac-code-border);
}

body.dark-mode {
    --ac-inline-code-bg:     var(--code-bg);
    --ac-inline-code-border: var(--ac-surface2);
}

.main-content code {
    font-family: var(--ac-code-font);
    background: var(--ac-inline-code-bg);
    color: var(--code-color);
    border: 1px solid var(--ac-inline-code-border);
    border-radius: 4px;
    padding: 0.1em 0.35em;
}

/* --------------------------------------------------------------------------
   Code blocks
   -------------------------------------------------------------------------- */

/* Acord's light editor is pure white, not LATTE base, so the block gets its
   own surface tokens; the chip and line hover step back to mantle/base.
   Dark keeps the KICAD surfaces. */
:root {
    --ac-code-surface: #ffffff;
    --ac-code-chrome:  var(--ac-mantle);
    --ac-code-hover:   var(--ac-base);
    --ac-code-border:  var(--ac-crust);
}

body.dark-mode {
    --ac-code-surface: var(--ac-surface0);
    --ac-code-chrome:  var(--ac-surface1);
    --ac-code-hover:   var(--ac-surface1);
    --ac-code-border:  var(--ac-surface2);
}

.acord-code {
    position: relative;
    margin: 1.6rem 0;
    background: var(--ac-code-surface);
    border: 1px solid var(--ac-code-border);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    overflow: hidden;
}

/* Top-right tab: language chip (teal, as Acord's widget accents) + Copy. */
.acord-code-tools {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    display: flex;
    background: var(--ac-code-chrome);
    border-left: 1px solid var(--ac-code-border);
    border-bottom: 1px solid var(--ac-code-border);
    border-bottom-left-radius: 8px;
    overflow: hidden;
    font-family: var(--ac-code-font);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
}

.acord-code-lang {
    padding: 0.2em 0.7em;
    color: var(--ac-teal);
    user-select: none;
    -webkit-user-select: none;
}

.acord-code-copy {
    padding: 0.2em 0.7em;
    margin: 0;
    font: inherit;
    letter-spacing: inherit;
    color: var(--ac-subtext0);
    background: none;
    border: none;
    border-radius: 0;
    cursor: pointer;
}

.acord-code-lang + .acord-code-copy {
    border-left: 1px solid var(--ac-code-border);
}

.acord-code-copy:hover,
.acord-code-copy:focus-visible {
    color: var(--ac-text);
    background: var(--ac-code-hover);
}

.acord-code-copy.copied {
    color: var(--ac-green);
}

/* Reset whatever the base stylesheet does to <pre>. */
.acord-code .acord-code-body {
    margin: 0;
    padding: 0.9rem 0.9rem 0.9rem 0;
    background: none;
    border: none;
    border-radius: 0;
    overflow-x: auto;
    font-size: 0.82rem;
}

.acord-code .acord-code-body code {
    display: block;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    border-radius: 0;
    color: var(--ac-text);
    font-family: var(--ac-code-font);
    font-size: inherit;
    line-height: 1.55;
    tab-size: 4;
}

/* One block per source line. Long lines wrap into the hanging indent rather
   than scrolling, which is what the editor does too. */
.acord-code .cl {
    display: block;
    position: relative;
    padding-left: 3.6em;
    min-height: 1.55em;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.acord-code .cl:hover {
    background: var(--ac-code-hover);
}

/* Gutter. Acord tints line numbers relative to the cursor; a page has no
   cursor, so this is the editor's cursorless branch: one muted colour. */
.acord-code .ln {
    position: absolute;
    left: 0;
    width: 2.6em;
    text-align: right;
    color: var(--ac-overlay0);
    user-select: none;
    -webkit-user-select: none;
}

.acord-code .ln::before {
    content: attr(data-n);
}

/* --------------------------------------------------------------------------
   Token colours — highlight_color(kind) from viewport/src/syntax.rs
   -------------------------------------------------------------------------- */

/* Generic (tree-sitter) kinds, 0..23 */
.acord-code .t-0  { color: var(--ac-mauve); }     /* keyword */
.acord-code .t-1  { color: var(--ac-blue); }      /* function */
.acord-code .t-2  { color: var(--ac-teal); }      /* function.builtin */
.acord-code .t-3  { color: var(--ac-yellow); }    /* type */
.acord-code .t-4  { color: var(--ac-yellow); }    /* type.builtin */
.acord-code .t-5  { color: var(--ac-teal); }      /* constructor */
.acord-code .t-6  { color: var(--ac-peach); }     /* constant */
.acord-code .t-7  { color: var(--ac-peach); }     /* constant.builtin */
.acord-code .t-8  { color: var(--ac-green); }     /* string */
.acord-code .t-9  { color: var(--ac-peach); }     /* number */
.acord-code .t-10 { color: var(--ac-overlay0); }  /* comment */
.acord-code .t-11 { color: var(--ac-text); }      /* variable */
.acord-code .t-12 { color: var(--ac-red); }       /* variable.builtin */
.acord-code .t-13 { color: var(--ac-flamingo); }  /* variable.parameter */
.acord-code .t-14 { color: var(--ac-sky); }       /* operator */
.acord-code .t-15 { color: var(--ac-overlay2); }  /* punctuation */
.acord-code .t-16 { color: var(--ac-overlay2); }  /* punctuation.bracket */
.acord-code .t-17 { color: var(--ac-overlay2); }  /* punctuation.delimiter */
.acord-code .t-18 { color: var(--ac-blue); }      /* property */
.acord-code .t-19 { color: var(--ac-mauve); }     /* tag */
.acord-code .t-20 { color: var(--ac-yellow); }    /* attribute */
.acord-code .t-21 { color: var(--ac-teal); }      /* label */
.acord-code .t-22 { color: var(--ac-red); }       /* escape */
.acord-code .t-23 { color: var(--ac-text); }      /* embedded */

/* Eval results */
.acord-code .t-24 { color: var(--ac-eval-value); font-weight: 600; }
.acord-code .t-25 { color: var(--ac-maroon); }
.acord-code .t-arrow { color: var(--ac-eval-arrow); }

/* Cordial, 50..69 */
.acord-code .t-50 { color: var(--ac-green); font-weight: 700; } /* /= sigil */
.acord-code .t-51 { color: var(--ac-mauve); }                   /* @ sigil */
.acord-code .t-52 { color: var(--ac-flamingo); }                /* :: */
.acord-code .t-53 { color: var(--ac-flamingo); }                /* ref colon */
.acord-code .t-54 { color: var(--ac-blue); }                    /* table name */
.acord-code .t-55 { color: var(--ac-lavender); }                /* block name */
.acord-code .t-56 { color: var(--ac-yellow); }                  /* cell address */
.acord-code .t-57 { color: var(--ac-mauve); }                   /* keyword */
.acord-code .t-58 { color: var(--ac-sky); }                     /* builtin fn */
.acord-code .t-59 { color: var(--ac-peach); }                   /* number */
.acord-code .t-60 { color: var(--ac-green); }                   /* string */
.acord-code .t-61 { color: var(--ac-overlay1); font-style: italic; } /* comment */
.acord-code .t-62 { color: var(--ac-overlay2); }                /* operator */
.acord-code .t-63 { color: var(--ac-overlay2); }                /* bracket */
.acord-code .t-64 { color: var(--ac-yellow); }                  /* type annotation */
.acord-code .t-68 { color: var(--ac-yellow); }                  /* /=| table suffix */
.acord-code .t-69 { color: var(--ac-red); }                     /* /=\ tree suffix */

/* Per-identifier rainbow, 70..77. Acord walks these eight slots with a stride
   of 3 so adjacent names never share a neighbouring hue. */
.acord-code .t-70 { color: var(--ac-red); }
.acord-code .t-71 { color: var(--ac-green); }
.acord-code .t-72 { color: var(--ac-peach); }
.acord-code .t-73 { color: var(--ac-blue); }
.acord-code .t-74 { color: var(--ac-mauve); }
.acord-code .t-75 { color: var(--ac-teal); }
.acord-code .t-76 { color: var(--ac-yellow); }
.acord-code .t-77 { color: var(--ac-pink); }

/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {
    .acord-code .acord-code-body { font-size: 0.74rem; }
    .acord-code .cl { padding-left: 2.8em; }
    .acord-code .ln { width: 2em; }
    .acord-code-lang { font-size: 0.65rem; }
}