/* ── Heptarchia Mystica plugin ─────────────────────────────────────────────
   The Holy Table, its source grids, and the Kings, Princes and angels of the days.
   Colours come from the host theme's tokens; --hep-accent is redeclared by every
   theme in app.css, so switching the theme repaints the page with no code behind it. */

.hep-page {
    --kls-accent: var(--hep-accent, #9c2f52);
    display: flex;
    flex-direction: column;
    min-height: 100%;
    background: var(--page-bg);
    color: var(--page-text);
}

.hep-head, .hep-panel { padding: 1rem 1.5rem; }
.hep-head h1 { margin: 0 0 .25rem; color: var(--hep-accent, #9c2f52); }
.hep-muted { color: var(--muted-text, inherit); font-size: .85rem; }
.hep-error { color: #b00020; padding: 1rem 1.5rem; }
.hep-layout { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: 1rem; }
.hep-panel { border: 1px solid var(--surface-border, rgba(128,128,128,.3)); border-radius: .5rem; margin: .5rem 1rem; min-width: 0; }
.hep-scroll { overflow-x: auto; }
.hep-scroll--grid { max-height: 34rem; overflow-y: auto; }

/* ── The Holy Table ─────────────────────────────────────────────────────── */
.ht-svg { width: 100%; max-width: 42rem; display: block; margin: 0 auto; }
.ht-ground, .ht-frame { fill: var(--page-bg, #fff); }
.ht-frame { stroke: var(--page-text, #222); stroke-width: 2.5; }
.ht-band { fill: var(--page-bg, #fff); stroke: var(--page-text, #222); stroke-width: 2.5; }
.ht-fig { fill: none; stroke: var(--page-text, #222); stroke-width: 2; }
.ht-rule { fill: none; stroke: var(--page-text, #222); stroke-width: 1.4; }
.ht-ens { fill: var(--page-bg, #fff); stroke: var(--page-text, #222); stroke-width: 2; }
.ht-ens-rule { fill: none; stroke: var(--page-text, #222); stroke-width: 1.3; }
.ht-ens-fine { stroke-width: .9; }
.ht-ens-dot { fill: var(--page-text, #222); }
.ht-glyph { font-family: Georgia, 'Times New Roman', serif; fill: var(--page-text, #222);
    text-anchor: middle; dominant-baseline: central; }
.ht-glyph--border, .ht-glyph--corner { font-size: 28px; }
.ht-glyph--centre { font-size: 66px; }
.ht-hl { fill: transparent; stroke: none; }
.ht-svg.has-hl text { opacity: .35; }
.ht-ensign { cursor: help; }

/* ── Grids ──────────────────────────────────────────────────────────────── */
.hep-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .5rem; }
.hep-tab, .hep-name { cursor: pointer; border: 1px solid var(--surface-border, rgba(128,128,128,.4));
    background: transparent; color: var(--page-text); border-radius: .3rem; padding: .25rem .6rem; }
.hep-tab.is-on, .hep-name.is-on { background: var(--hep-accent, #9c2f52); color: #fff; }
.hep-grid { border-collapse: collapse; margin: 0 auto .75rem; }
.hep-grid th { font-weight: 400; font-size: .8rem; text-align: right; padding: 0 .5rem; white-space: nowrap;
    color: var(--muted-text, inherit); }
.hep-cell { width: 2.4rem; height: 2.4rem; text-align: center; font-size: 1.15rem; position: relative; cursor: pointer;
    border: 1px solid var(--surface-border, rgba(128,128,128,.4)); }
.hep-grid.is-dense .hep-cell { width: 1.8rem; height: 1.8rem; font-size: .95rem; }
/* The page-wide Enochian-script switch: every table of letters, square or round, follows it. */
.hep-page.is-script .hep-cell, .hep-page.is-script .ht-glyph,
.hep-page.is-script .mr-glyph, .hep-page.is-script .ro-glyph { font-family: 'GDEnochian', serif; }
/* GDEnochian draws lowercase as reduced variants. Enochian has no case, so HTML text is set in
   capitals here; SVG ignores text-transform, so the Rotalis renders its own capital variant. */
.hep-page.is-script .hep-cell, .hep-page.is-script .hep-row-text { text-transform: uppercase; }
.hep-page.is-script .hep-cell sup { font-family: Georgia, 'Times New Roman', serif; }
.hep-cell sup { position: absolute; top: 1px; right: 3px; font-size: .6rem; color: var(--hep-accent, #9c2f52); }
.hep-cell.is-path { background: color-mix(in srgb, var(--hep-accent, #9c2f52) 30%, transparent); }
.hep-cell.is-start { outline: 2px solid var(--hep-accent, #9c2f52); outline-offset: -2px; }
.hep-cell.is-found { box-shadow: inset 0 0 0 2px #2a8; }
.hep-tools { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }
.hep-tools input[type=text] { width: 2.5rem; margin-left: .4rem; text-align: center; }
.hep-selected { margin-top: .75rem; padding: .5rem .75rem; border-left: 3px solid var(--hep-accent, #9c2f52); }
.hep-selected ul { margin: .4rem 0 0; padding-left: 1.2rem; font-size: .85rem; }

/* ── Codex, angels and Ensigns ──────────────────────────────────────────── */
.hep-codex { border-collapse: collapse; width: 100%; }
.hep-codex th, .hep-codex td { border: 1px solid var(--surface-border, rgba(128,128,128,.3)); padding: .3rem .5rem;
    text-align: left; vertical-align: top; }
.hep-codex button:not(.kls-search-icon):not(.kls-gematria), .hep-group h3 button { all: unset; cursor: pointer; display: block; width: 100%; border-radius: .25rem;
    padding: .1rem .2rem; }
.hep-codex button:not(.kls-search-icon):not(.kls-gematria):hover, .hep-group h3 button:hover { background: color-mix(in srgb, var(--hep-accent, #9c2f52) 15%, transparent); }
.hep-codex button:not(.kls-search-icon):not(.kls-gematria):focus-visible, .hep-group h3 button:focus-visible { outline: 2px solid var(--hep-accent, #9c2f52); }
.hep-codex .is-on, .hep-group h3.is-on { background: color-mix(in srgb, var(--hep-accent, #9c2f52) 30%, transparent); }
.hep-codex thead button { font-weight: 700; }
.hep-codex a { color: var(--hep-accent, #9c2f52); }
.hep-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .75rem; }
.hep-group h3 { font-size: .95rem; margin: 0 0 .35rem; border-radius: .25rem; }
.hep-name { margin: 0; }
.hep-name-item { display: inline-flex; align-items: center; margin: 0 .5rem .35rem 0; white-space: nowrap; }
.hep-name-item .kls-tools { margin-left: .2rem; gap: .2rem; }
.hep-ro-selected { margin: .6rem 0 0; padding: .4rem .75rem; border-left: 3px solid var(--hep-accent, #9c2f52); }
.hep-name--king, .hep-name--prince { font-weight: 700; }

/* ── Seals, rings of ministers and the circular Tabula ──────────────────── */
/* Manuscript scans keep a white ground so they stay legible in dark themes. */
.hep-plate { background: #fff; border-radius: .25rem; padding: .2rem; }
.hep-sigil { margin: .6rem 0 0; display: flex; gap: .75rem; align-items: flex-start; font-size: .85rem; }
.hep-sigil-views { display: flex; flex-direction: column; gap: .4rem; width: 9rem; max-width: 40%; flex: none; }
.hep-sigil-views > * { width: 100%; height: auto; max-height: 7rem; object-fit: contain; }
.hep-ruler { display: flex !important; align-items: center; gap: .5rem; }
.hep-sigil-thumb { width: 2.6rem; height: 2.6rem; object-fit: contain; flex: none; }
/* The seals drawn in the theme: ink, halo and plate are theme tokens, and
   --hep-sigil-ink is redeclared per theme in app.css (gilt for baroque, etc.). */
svg.hep-sig { display: block; overflow: visible; padding: .35rem; box-sizing: border-box; border-radius: .35rem;
    background: var(--page-surface, transparent); border: 1px solid var(--surface-border, rgba(128,128,128,.3));
    filter: drop-shadow(0 0 2px var(--lp-accent-glow, transparent)); }
svg.hep-sig.hep-sigil-thumb { padding: .15rem; }
.hep-sig-ink { fill: var(--hep-sigil-ink, var(--page-text, #222)); transition: fill .15s; }
.hep-ruler:hover .hep-sig-ink, .hep-ruler-card:hover .hep-sig-ink,
.hep-codex .is-on .hep-sig-ink, .hep-ruler-card.is-on .hep-sig-ink { fill: var(--hep-accent, #9c2f52); }
.hep-ruler-wrap { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.hep-codex .kls-tools { margin: .2rem 0 0 .2rem; }
.hep-rulers { display: flex; flex-wrap: wrap; gap: .75rem; margin: .75rem 0; }
.hep-ruler-card { display: flex; flex-direction: column; align-items: center; gap: .3rem; width: 11rem; cursor: pointer;
    padding: .5rem; border-radius: .4rem; background: transparent; color: var(--page-text);
    border: 1px solid var(--surface-border, rgba(128,128,128,.4)); }
.hep-ruler-card img, .hep-ruler-card svg.hep-sig { width: 100%; height: 8rem; object-fit: contain; }
.hep-ruler-card.is-on { border-color: var(--hep-accent, #9c2f52);
    background: color-mix(in srgb, var(--hep-accent, #9c2f52) 18%, transparent); }
.hep-rings { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 38rem), 1fr)); gap: 1rem; }
.hep-ring { margin: 0; }
.hep-ring figcaption { display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.hep-ring p { font-size: .9rem; margin: .4rem 0 0; }
.hep-link { all: unset; cursor: pointer; font-weight: 700; color: var(--hep-accent, #9c2f52); }
.hep-link:focus-visible { outline: 2px solid var(--hep-accent, #9c2f52); }
.hep-ring-views { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: center; }
.hep-ring-views > * { flex: 1 1 16rem; min-width: 0; }
.hep-ring-views--rotalis > * { flex-basis: 24rem; }
.hep-ms { max-width: 100%; height: auto; }
.mr-svg { max-width: 24rem; }
.ro-svg { max-width: 46rem; }

.mr-rule, .ro-rule { fill: none; stroke: var(--page-text, #222); stroke-width: 1.5; }
.mr-tick { stroke: var(--page-text, #222); stroke-width: 1; opacity: .55; }
.mr-dot { fill: var(--page-text, #222); }
.mr-note { fill: var(--hep-accent, #9c2f52); }
.mr-glyph, .ro-glyph { font-family: Georgia, 'Times New Roman', serif; fill: var(--page-text, #222);
    text-anchor: middle; dominant-baseline: central; }
.mr-glyph { font-size: 26px; }
.mr-arc { font-size: 15px; fill: var(--muted-text, #888); text-anchor: middle; dominant-baseline: central; }
.ro-ground, .ro-centre { fill: var(--page-bg, #fff); stroke: var(--page-text, #222); stroke-width: 2.5; }
.ro-group { stroke: var(--page-text, #222); stroke-width: 3; }
.ro-glyph { font-size: 34px; }
.ro-glyph--ruler { font-weight: 700; }
.ro-number { font-size: 20px; fill: var(--page-text, #222); text-anchor: middle; dominant-baseline: central; }
.ro-planet { font-size: 26px; fill: var(--hep-accent, #9c2f52); text-anchor: middle; dominant-baseline: central; }
.ro-label { font-size: 30px; font-weight: 700; fill: var(--hep-accent, #9c2f52); text-anchor: middle; dominant-baseline: central; }
.ro-centre-text { font-size: 19px; letter-spacing: 2px; fill: var(--page-text, #222); }
.ro-cross { stroke: var(--page-text, #222); stroke-width: 3; fill: none; }
.ro-none { fill: none; stroke: none; }
.ro-col, .mr-cell { cursor: pointer; }
.mr-cell:hover .ht-hl { fill: color-mix(in srgb, var(--hep-accent, #9c2f52) 15%, transparent); }
.ro-col:hover .ht-hl { fill: color-mix(in srgb, var(--hep-accent, #9c2f52) 15%, transparent); }

/* ── Tables, after the Astrology plugin's planet table ───────────────────────
   A surface panel, sticky small-capital headers in the accent, and rules between rows only,
   so these read as the same kind of table as the planets'. The letter grids keep their
   squares (they are tables of letters, read along rows, columns and diagonals) but take the
   same ground, rule colour and header style. */
.hep-scroll {
    background: var(--surface-bg);
    border: 1px solid var(--surface-border);
    border-radius: .35rem;
}
.hep-codex { font-size: .78rem; }
.hep-codex th, .hep-codex td {
    border: 0;
    border-bottom: 1px solid var(--surface-border);
    padding: .28rem .55rem;
    vertical-align: middle;
}
.hep-codex thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--page-surface);
    font-weight: 700;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--hep-accent, #9c2f52);
    white-space: nowrap;
}
.hep-codex thead th[title] { text-decoration: underline dotted var(--hep-accent, #9c2f52); }
.hep-codex tbody th { font-weight: 700; font-size: .85rem; color: var(--page-text); white-space: nowrap; }
.hep-codex tbody td { color: var(--page-text); }
.hep-codex tbody tr:hover > * { background: color-mix(in srgb, var(--hep-accent, #9c2f52) 6%, transparent); }
.hep-codex tbody tr:last-child > * { border-bottom: 0; }
.hep-codex .is-on, .hep-codex tbody tr:hover > .is-on { background: color-mix(in srgb, var(--hep-accent, #9c2f52) 30%, transparent); }

.hep-grid { background: var(--surface-bg); border: 1px solid var(--surface-border); }
.hep-grid td { border-color: var(--surface-border) !important; }
.hep-grid th {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--hep-accent, #9c2f52);
    background: var(--page-surface);
    border-bottom: 1px solid var(--surface-border);
}
.hep-scroll--grid { padding: .5rem; }
.hep-scroll--grid .hep-grid { margin-bottom: 0; }

/* ── Circles of ministers, after the Watch Towers governor wheel ─────────────
   Accent rings with a soft halo, the outer one breathing with the same plasma pulse, a faint
   accent ground inside, accent dividers between the arcs, and glowing letters. */
@keyframes hep-plasma {
    0%, 100% {
        filter:
            drop-shadow(0 0 2px color-mix(in srgb, var(--hep-accent, #9c2f52) 65%, transparent))
            drop-shadow(0 0 5px color-mix(in srgb, var(--hep-accent, #9c2f52) 35%, transparent));
    }
    50% {
        filter:
            drop-shadow(0 0 4px color-mix(in srgb, var(--hep-accent, #9c2f52) 100%, transparent))
            drop-shadow(0 0 11px color-mix(in srgb, var(--hep-accent, #9c2f52) 65%, transparent))
            drop-shadow(0 0 20px color-mix(in srgb, var(--hep-accent, #9c2f52) 30%, transparent));
    }
}
.mr-svg { overflow: visible; }
.mr-svg .mr-rule {
    fill: none;
    stroke: var(--hep-accent, #9c2f52);
    stroke-width: 4;
    filter:
        drop-shadow(0 0 5px color-mix(in srgb, var(--hep-accent, #9c2f52) 45%, transparent))
        drop-shadow(0 0 14px color-mix(in srgb, var(--hep-accent, #9c2f52) 20%, transparent));
}
.mr-svg .mr-rule--inner { fill: color-mix(in srgb, var(--hep-accent, #9c2f52) 3%, transparent); }
.mr-svg .mr-tick { stroke: var(--hep-accent, #9c2f52); stroke-width: 4; opacity: 1; }
.mr-svg .mr-dot { fill: color-mix(in srgb, var(--hep-accent, #9c2f52) 80%, var(--page-text)); }
.mr-svg .mr-arc {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 20px;
    fill: var(--page-text);
    opacity: .45;
}
.mr-svg .mr-glyph {
    fill: var(--hep-accent, #9c2f52);
    user-select: none;
    text-shadow:
        0 0 6px color-mix(in srgb, var(--hep-accent, #9c2f52) 55%, transparent),
        0 0 16px color-mix(in srgb, var(--hep-accent, #9c2f52) 30%, transparent);
}
.mr-svg .mr-note { fill: var(--page-text); }
/* The Rotalis in the same plasma manner. */
.ro-svg { overflow: visible; }
.ro-svg .ro-ground {
    fill: color-mix(in srgb, var(--hep-accent, #9c2f52) 3%, transparent);
    stroke: var(--hep-accent, #9c2f52);
    stroke-width: 5;
    filter:
        drop-shadow(0 0 5px color-mix(in srgb, var(--hep-accent, #9c2f52) 45%, transparent))
        drop-shadow(0 0 14px color-mix(in srgb, var(--hep-accent, #9c2f52) 20%, transparent));
}
.ro-svg .ro-rule { stroke: color-mix(in srgb, var(--hep-accent, #9c2f52) 55%, transparent); stroke-width: 1.5; }
.ro-svg .ro-group { stroke: var(--hep-accent, #9c2f52); stroke-width: 4; }
.ro-svg .ro-centre {
    fill: var(--page-bg, #fff);
    stroke: var(--hep-accent, #9c2f52);
    stroke-width: 4;
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--hep-accent, #9c2f52) 45%, transparent));
}
.ro-svg .ro-cross { stroke: var(--hep-accent, #9c2f52); }
.ro-svg .ro-centre-text { fill: var(--hep-accent, #9c2f52); }
.ro-svg .ro-number { opacity: .55; }
.ro-svg .ro-glyph {
    fill: var(--hep-accent, #9c2f52);
    user-select: none;
    text-shadow:
        0 0 6px color-mix(in srgb, var(--hep-accent, #9c2f52) 55%, transparent),
        0 0 16px color-mix(in srgb, var(--hep-accent, #9c2f52) 30%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
    .mr-svg .mr-rule--outer, .ro-svg .ro-ground { animation: hep-plasma 5s ease-in-out infinite; }
}

/* ── Tabula Angelorum Bonorum 49: groups as lists of uniform rows ───────────
   Each group is a small table-like panel: a header row (click to light the whole group) and
   seven equal rows, name | type | search tools, ruled like the codex tables. */
.hep-groups .hep-group {
    background: var(--surface-bg);
    border: 1px solid var(--surface-border);
    border-radius: .35rem;
    overflow: hidden;
}
.hep-row {
    display: grid;
    grid-template-columns: max-content 1fr auto;
    align-items: center;
    gap: .5rem;
    min-height: 2rem;
    padding: .2rem .55rem;
    border-bottom: 1px solid var(--surface-border);
    cursor: pointer;
    color: var(--page-text);
    font-size: .85rem;
}
.hep-row:last-child { border-bottom: 0; }
.hep-row:hover { background: color-mix(in srgb, var(--hep-accent, #9c2f52) 8%, transparent); }
.hep-row:focus-visible { outline: 2px solid var(--hep-accent, #9c2f52); outline-offset: -2px; }
.hep-row.is-on { background: color-mix(in srgb, var(--hep-accent, #9c2f52) 30%, transparent); }
.hep-row--head {
    grid-template-columns: 1fr;
    background: var(--page-surface);
    font-weight: 700;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--hep-accent, #9c2f52);
}
.hep-row--king .hep-row-text, .hep-row--prince .hep-row-text { font-weight: 700; }
.hep-row-text { white-space: nowrap; }
.hep-row-blurb {
    grid-column: 1 / -1;
    margin-top: -.1rem;
    padding-bottom: .15rem;
    font-size: .74rem;
    line-height: 1.35;
    color: var(--muted-text);
}
.hep-row-meta {
    margin-right: .4rem;
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--hep-accent, #9c2f52);
}
.hep-row.is-on .hep-row-blurb { color: var(--page-text); }
.hep-row-blurb--ministers {
    margin-top: .25rem;
    padding-top: .3rem;
    border-top: 1px dashed var(--surface-border);
    font-style: italic;
}
.hep-row-blurb--ministers .hep-row-meta { font-style: normal; }
.hep-row-type { justify-self: end; font-size: .68rem; color: var(--muted-text); opacity: .75; text-transform: uppercase; letter-spacing: .04em; }
.hep-row-tools { display: inline-flex; }
.hep-row-tools .kls-tools { margin: 0; gap: .2rem; }
.hep-page.is-script .hep-row:not(.hep-row--head) .hep-row-text,
.hep-page.is-script .hep-ro-selected .hep-row-text { font-family: 'GDEnochian', serif; font-size: 1.2rem; letter-spacing: .06em; }
.hep-page.is-script .hep-row:not(.hep-row--head) { min-height: 2.4rem; }
.hep-page.is-script .hep-row--king .hep-row-text, .hep-page.is-script .hep-row--prince .hep-row-text { font-weight: 400; }

/* The circle's 6 × 7 square beside it: one row per arc, in the same order as the circle. */
.hep-ring-views:not(.hep-ring-views--rotalis) { gap: .4rem; justify-content: center; align-items: center; }
.hep-ring-views:not(.hep-ring-views--rotalis) > .mr-svg { flex: 0 1 17rem; margin: 0; }
.hep-ring-views > .hep-ring-grid { flex: 0 0 auto; margin: 0; }
.hep-ring-grid .hep-ring-head { cursor: pointer; }
.hep-ring-grid .hep-ring-head:hover { color: var(--page-text); }
.hep-ring-grid .hep-ring-head.is-on { background: color-mix(in srgb, var(--hep-accent, #9c2f52) 30%, transparent); color: var(--page-text); }
.hep-ring-grid th { text-align: center; padding: .15rem .35rem; }
.hep-ring-grid thead th:first-child { background: transparent; border: 0; }

/* Ministers of the Day: one card per day, side by side in landscape, stacked in portrait */
.hep-days { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1rem; align-items: start; }
.hep-day-card { min-width: 0; padding: .75rem; border-radius: .5rem;
    border: 1px solid var(--surface-border, rgba(128,128,128,.4)); }
.hep-day-heading { margin: 0 0 .5rem; }
.hep-day-cols { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-start; justify-content: center; }
.hep-day-col { flex: 1 1 8rem; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.hep-day-col > .mr-svg { width: 100%; max-width: 17rem; }
@media (orientation: portrait) {
    .hep-days { grid-template-columns: minmax(0, 1fr); }
    .hep-day-col { flex-basis: 12rem; }
}
.hep-seal-link { margin: 0 0 .5rem; font-size: .9rem; }

/* The same glowing plasma letters on the Holy Table and on every clickable grid of letters. */
.ht-svg .ht-glyph, .hep-grid .hep-cell {
    color: var(--hep-accent, #9c2f52);
    fill: var(--hep-accent, #9c2f52);
    text-shadow:
        0 0 6px color-mix(in srgb, var(--hep-accent, #9c2f52) 55%, transparent),
        0 0 16px color-mix(in srgb, var(--hep-accent, #9c2f52) 30%, transparent);
}
.hep-grid .hep-cell sup { text-shadow: none; }
.hep-grid .hep-cell.is-path { color: var(--hep-hl-ink, #b3261e); }

/* ── The seven Ensigns of Creation: one interactive SVG each ─────────────── */
.hep-ensigns { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: 1rem; }
.hep-ensign { margin: 0; padding: .6rem; border: 1px solid var(--surface-border, rgba(128,128,128,.4)); border-radius: .4rem;
    background: var(--surface-bg, transparent); display: flex; flex-direction: column; gap: .4rem; }
.hep-ensign.is-on { border-color: var(--hep-accent, #9c2f52); }
.hep-ensign figcaption { display: flex; flex-direction: column; gap: .15rem; }
.hep-ensign-title { align-self: flex-start; font-weight: 700; color: var(--hep-accent, #9c2f52); background: transparent;
    border: 1px solid var(--surface-border, rgba(128,128,128,.4)); border-radius: .3rem; padding: .1rem .5rem; }
.hep-ensign.is-on .hep-ensign-title { background: color-mix(in srgb, var(--hep-accent, #9c2f52) 30%, transparent); }
.hep-ensign-pick, .hep-ensign .hep-muted { margin: 0; }
.ens-svg { width: 100%; height: auto; display: block; overflow: visible; }
.ens-rule { fill: none; stroke: var(--page-text, #222); stroke-width: 2; stroke-linecap: square; }
.ens-ink { fill: var(--page-text, #222); transition: fill .12s; }
.ens-hit { fill: transparent; stroke: none; pointer-events: all; }
.ens-cell { cursor: pointer; outline: none; }
.ens-cell:hover .ens-hit { fill: color-mix(in srgb, var(--hep-accent, #9c2f52) 12%, transparent); }
.ens-cell:hover .ens-ink, .ens-cell:focus-visible .ens-ink { fill: var(--hep-accent, #9c2f52); }
.ens-cell:focus-visible .ens-hit { stroke: var(--hep-accent, #9c2f52); stroke-width: 2; }
.ens-cell.is-on .ens-hit { fill: color-mix(in srgb, var(--hep-accent, #9c2f52) 30%, transparent); }
.ens-cell.is-on .ens-ink { fill: var(--hep-hl-ink, #b3261e); }
.ens-svg.is-lit .ens-rule { stroke: var(--hep-accent, #9c2f52); }

/* The Holy Table with the Rotalis to its right; they stack on a narrow screen. */
.hep-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.hep-pair > .hep-panel { margin: .5rem 1rem; }
.hep-pair .hep-ring-views--rotalis > * { flex-basis: 100%; }
@media (max-width: 70rem) { .hep-pair { grid-template-columns: minmax(0, 1fr); } }

/* A "?" that reveals a note on demand. */
.hep-help { margin: 0 0 .5rem; }
.hep-help > summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem;
    border-radius: 50%; border: 1px solid var(--surface-border, rgba(128,128,128,.6)); font-weight: 700; font-size: .85rem; cursor: pointer; }
.hep-help > summary::-webkit-details-marker { display: none; }
.hep-help > summary:hover, .hep-help[open] > summary { color: var(--hep-accent, #9c2f52); border-color: var(--hep-accent, #9c2f52); }
.hep-help > p { margin: .4rem 0 0; }

/* the letter sounding in a name's chant */
.hep-cell.is-chant, .hep-grid .hep-cell.is-chant { background: var(--hep-accent, #9c2f52); color: #fff; box-shadow: 0 0 0 3px #f5c400; position: relative; z-index: 1; }