/*
 * arcana-reader.css — Books of Arcana wide-reader extensions.
 *
 * Drives two pieces:
 *   1. Per-theme ink colours for the SVG diagrams (the ingest pipeline
 *      writes var(--arcana-*) references; book-read.js seeds the
 *      values from color-harmony.js so they follow the active theme).
 *   2. Callout box styling for the Arcana environments (keyinsight,
 *      pitfall, walkthrough …). The wide reader's schema already
 *      renders <div class="callout callout-<type>" data-type="…">;
 *      this file gives each type its visual tone without changing the
 *      schema or node view.
 *
 * Fallback values match the midnight theme — if the reader screen
 * hasn't seeded the variables yet (e.g. before first render), the
 * diagram is still readable.
 */

:root {
    --arcana-ink:         #e8e3d4;
    --arcana-ink-soft:    #b8b1a0;
    --arcana-ink-mid:     #d4cdb8;
    --arcana-blue:        #6fb6ff;
    --arcana-red:         #ff8a7a;
    --arcana-green:       #6fdd9f;
    --arcana-accent:      #c9a84c;
    --arcana-orange:      #ffb86b;
    --arcana-accentgreen: #8fea9d;
    --arcana-grid:        rgba(232, 227, 212, 0.16);
    --arcana-insightbg:   rgba(201, 168, 76, 0.12);
    --arcana-annotation:  #ffb86b;
}

/* Diagrams sit transparent on the page background and use the theme
 * inks set above. We can't add a class attr to the image node (the
 * schema is strict), so target by the src prefix the ingest pipeline
 * always uses. Centring is the reader's normal max-width behaviour. */
img[src*="/covers/books-of-arcana-diagrams/"] {
    display: block;
    margin: 1.8em auto;
    max-width: min(640px, 100%);
    background: transparent;
}
img[src*="/covers/books-of-arcana-diagrams/"] {
    width: 100%;
    height: auto;
}

/* Generic callout — the wide reader already renders the box; we just
 * dress it for the Arcana environments. The left-rule accent maps the
 * environment to a colour the reader's harmonicPalette already
 * exposes, so the tone follows the theme rather than being baked in. */
.callout {
    border-left: 3px solid var(--arcana-accent);
    background: var(--arcana-insightbg);
    padding: 0.95em 1.15em;
    margin: 1.4em 0;
    border-radius: 4px;
    color: var(--arcana-ink);
}

.callout.callout-keyinsight  { border-left-color: var(--arcana-accent);      }
.callout.callout-pitfall     { border-left-color: var(--arcana-red);
                               background: color-mix(in srgb, var(--arcana-red) 10%, transparent); }
.callout.callout-wrinkle     { border-left-color: var(--arcana-orange);
                               background: color-mix(in srgb, var(--arcana-orange) 8%, transparent); }
.callout.callout-checkpoint  { border-left-color: var(--arcana-green);
                               background: color-mix(in srgb, var(--arcana-green) 8%, transparent); }
.callout.callout-devbridge   { border-left-color: var(--arcana-blue);
                               background: color-mix(in srgb, var(--arcana-blue) 8%, transparent); }
.callout.callout-howtoread   { border-left-color: var(--arcana-ink-soft);
                               background: transparent;
                               font-style: italic; }
.callout.callout-walkthrough { border-left-color: var(--arcana-accent);
                               background: color-mix(in srgb, var(--arcana-accent) 6%, transparent); }

/* Callouts carry an optional title (from \begin{keyinsight}{Title}).
 * Render it as a small bold header above the body. */
.callout[data-title]::before {
    content: attr(data-title);
    display: block;
    font-weight: 600;
    font-size: 0.95em;
    margin-bottom: 0.45em;
    color: var(--arcana-ink);
    letter-spacing: 0.01em;
}

/* Code blocks inside callouts (walkthroughs use them) — keep them
 * visually distinct from the box background. */
.callout pre,
.callout code {
    background: color-mix(in srgb, var(--arcana-ink) 8%, transparent);
}