/* =============================================================================
   Knowledge — the public dictionaries (spec sec. 87–90)

   Nine templates under `templates/knowledge/` and several hundred URLs: the
   seventy-eight tarot cards and their four thematic pages, the snář, the
   twenty-four runes, the sixty-four hexagrams and the thirty-six lenormand
   cards. It is the largest surface on the site and the only one most visitors
   ever see, because it is the one search engines send people to.

   Everything here is either

     a) a `.kn-` component that only this area has, or
     b) a *refinement* of a shared component, scoped under `.page-knowledge`
        so it cannot reach any other page.

   Nothing is renamed. `.card-plate`, `.card-row--index`, `.reading-section`,
   `.entry-facts`, `.breadcrumbs` and `.filter-chip` keep the names the
   functional tests select on; what changes is how they are sized and spaced
   when they are eighty of them on one page rather than three in a reading.

   ## The two page shapes

   An **index** is a poster: a full-bleed masthead band, a chip rail, and a
   grid of plates. A **detail** is a document: a trail, a hero with the card's
   face beside the short reading, and then prose. The two are laid out by
   `.kn-head` + `.kn-deck` and by `.kn-hero` + `.kn-meanings`, and no page
   mixes them.

   ## Five traditions, one palette

   Each tradition gets one colour out of the existing token set — never a new
   hex — and spends it only on ornament and labels: the masthead mark, the
   eyebrow, the rule under a group heading, the glyph on a plate and the brass
   edge of the summary. Body text, frames and plates stay brass everywhere, so
   the site still reads as one object and a reader who lands on `/snar` from a
   search result can still tell it is the same site as `/runy`.

     tarot      `--color-accent-text`  amber, the site default
     snář       `--color-info`         moonlight blue
     runy       `--color-gold-bright`  bleached bone
     i-ťing     `--color-success`      jade
     lenormand  `--color-warning`      lamp amber

   All five clear 6.5 : 1 on `--color-background`, so they are allowed to carry
   the eyebrow and not only ornament.
   ============================================================================= */

.page-knowledge {
    --kn-accent: var(--color-accent-text);
}

.page-knowledge--dreams {
    --kn-accent: var(--color-info);
}

.page-knowledge--runes {
    --kn-accent: var(--color-gold-bright);
}

.page-knowledge--iching {
    --kn-accent: var(--color-success);
}

.page-knowledge--lenormand {
    --kn-accent: var(--color-warning);
}

/* The trail sits on the band rather than above it, so a knowledge page opens
   with one object and not with a stray line of grey text over the star field. */
.page-knowledge .breadcrumbs {
    padding-block-start: var(--space-4);
}

/* =============================================================================
   The masthead band — index pages only

   Promoted to components.css as `.masthead*` (`.kn-head*` still names it in the
   templates and is declared alongside there). `--kn-accent` is what colours it
   on a knowledge page; anywhere else the band falls back to brass.

   A detail page does not get one, because a document opens with its title and
   because `<article>` has to keep the words that are the page (see
   TarotTopicControllerTest, which counts them). The mark itself stays here —
   it is drawn from this area's own sprite.
   ============================================================================= */

.kn-mark {
    display: block;
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    color: inherit;
}

/* =============================================================================
   The rail — jump chips over a long index

   Promoted to components.css as `.chip-rail*`, negative inline margin and all.
   The chips are plain anchors on purpose — seventy-eight plates behind a
   JavaScript filter would be seventy-eight plates a crawler has to guess at,
   and this site has no page JavaScript at all.
   ============================================================================= */

/* The anchor a chip jumps to is a heading with a sticky rail over it, so the
   browser has to be told to stop short of it. */
.kn-group {
    scroll-margin-block-start: 4.5rem;
}

/* =============================================================================
   Group heading — „Velká arkána · 22 karet"

   The row is promoted to components.css as `.group-head` / `__count` /
   `__rule`. The `<h2>` inside it keeps `.reading-section__title`, which three
   functional tests read the deck's structure out of, and `.kn-group__title` is
   where this page says what it wants instead.
   ============================================================================= */

.kn-group__title {
    color: var(--color-text);
}

/* =============================================================================
   The deck — a grid of plates

   `.card-row--index` already lays out plates; `.kn-deck` is what it becomes
   when there are seventy-eight of them and the page is the deck rather than a
   footnote under a reading. The plates get a fixed height so the grid reads as
   ruled paper, the name is vertically centred in it, and the number and the
   mark are pinned to the two ends.
   ============================================================================= */

.kn-deck {
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    gap: var(--space-3);
}

.page-knowledge .kn-deck .card-plate {
    min-height: 8.5rem;
    padding: var(--space-4) var(--space-3);
    align-content: space-between;
    gap: var(--space-2);
}

.page-knowledge .kn-deck .card-plate__name {
    font-family: var(--font-serif);
    font-size: var(--text-md);
    font-weight: 430;
    line-height: 1.22;
    text-wrap: balance;
}

.page-knowledge .kn-deck .card-plate__position {
    font-size: var(--text-2xs);
    color: var(--color-muted);
}

/* The suit mark on a tarot plate. Not `.card-plate__glyph`, which is a
   typographic slot sized for a rune or a hexagram character; this is a drawn
   device and it is sized in pixels. */
.kn-plate__mark {
    display: block;
    width: 1.75rem;
    height: 1.75rem;
    color: var(--kn-accent);
    opacity: 0.85;
}

.page-knowledge .card-plate--link:hover .kn-plate__mark {
    opacity: 1;
}

.page-knowledge .kn-deck .card-plate__glyph {
    font-size: 2rem;
    color: var(--kn-accent);
}

/* A futhark is three ætts of eight and the Book of Changes is eight rows of
   eight. Given the room, they are laid out that way rather than reflowed into
   whatever fits, because the shape *is* the information: an ætt that wraps
   after seven is an ætt a reader has to count. */
@media (min-width: 68rem) {
    .kn-deck--futhark,
    .kn-deck--hexagrams {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }

    .kn-deck--lenormand {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

/* Lenormand cards are referred to by their number — „osmička, rakev" — and it
   is the one thing about them that is the same in every deck ever printed, so
   on this index the number is the mark. */
.page-knowledge .kn-deck--lenormand .card-plate__position:first-child {
    font-family: var(--font-serif);
    font-size: var(--text-2xl);
    font-weight: 380;
    line-height: 1;
    color: var(--kn-accent);
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

/* The hexagram characters come from a system font and are drawn on a much
   larger em box than the Latin around them. */
.page-knowledge .kn-deck--hexagrams .card-plate__glyph {
    font-size: 2.25rem;
    line-height: 1;
}

@media (max-width: 26rem) {
    .kn-deck {
        grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
        gap: var(--space-2);
    }

    .page-knowledge .kn-deck .card-plate {
        min-height: 7.25rem;
        padding: var(--space-3) var(--space-2);
    }

    .page-knowledge .kn-deck .card-plate__name {
        font-size: var(--text-base);
    }
}

/* =============================================================================
   The snář's letter rail

   Thirty symbols today and seventy soon, all of them nouns, all of them looked
   up by their first letter. So the index is cut by initial and the rail lists
   only the letters that actually have an entry — an A–Z with half of it greyed
   out advertises what the dictionary does not have.
   ============================================================================= */

.kn-letter {
    min-width: 2.25rem;
    justify-content: center;
    padding-inline: var(--space-2);
    font-size: var(--text-sm);
    letter-spacing: 0.04em;
}

/* The letter is a gutter beside its entries, not a heading over them. See the
   comment in `dream_symbols.html.twig`: nine headings, four of them over a
   single plate, is five screens of mostly nothing. */
.kn-alpha-list {
    display: grid;
    gap: var(--space-4);
}

.kn-alpha {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
}

.kn-alpha + .kn-alpha {
    padding-block-start: var(--space-4);
    border-block-start: 1px solid var(--color-border-soft);
}

/* A dream symbol is one word and a facet, not a card with a number and a mark,
   so its plate is the short one. Fifteen letters of tall plates would be five
   screens of frame around thirty words. */
.page-knowledge--dreams .kn-deck {
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: var(--space-2);
}

.page-knowledge--dreams .kn-deck .card-plate {
    min-height: 4.75rem;
    padding: var(--space-3);
    gap: var(--space-1);
    align-content: center;
}

.kn-group__letter {
    position: relative;
    display: grid;
    place-items: center;
    height: 2.75rem;
    font-family: var(--font-serif);
    font-size: var(--text-2xl);
    font-weight: 380;
    line-height: 1;
    color: var(--kn-accent);
}

/* A hairline under the letter, the width of the gutter — the printer's mark a
   dictionary puts beside a run of entries. */
.kn-group__letter::after {
    position: absolute;
    inset-inline: 0.5rem;
    inset-block-end: 0.25rem;
    height: 1px;
    background: currentcolor;
    opacity: 0.5;
    content: '';
}

@media (max-width: 34rem) {
    .kn-alpha {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-3);
    }

    .kn-group__letter {
        justify-items: start;
        height: auto;
    }

    .kn-group__letter::after {
        inset-inline: 0 auto;
        width: 1.5rem;
        inset-block-end: -0.25rem;
    }
}

/* The same device the index mastheads wear, on the one page that opens inside
   its own `<article>`: left-aligned, without the flanking rules, so it reads as
   a printer's mark at the head of a chapter. */
.kn-topic__mark {
    display: block;
    color: var(--kn-accent);
}

/* =============================================================================
   Topic cards — „Tarot podle tématu"

   Four situations, not four cards, so deliberately not a plate. The whole card
   is the target and the title carries the link, which keeps the accessible name
   short while the click area stays the whole block.
   ============================================================================= */

.kn-topics {
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.page-knowledge .kn-topics .card {
    position: relative;
    gap: var(--space-2);
}

.kn-topics .card__title a::after {
    position: absolute;
    inset: 0;
    border-radius: var(--radius);
    content: '';
}

.kn-topics .card__title a {
    color: var(--color-text);
    text-decoration: none;
}

.kn-topics .card:hover .card__title a {
    color: var(--color-gold-bright);
}

/* =============================================================================
   The entry hero — a detail page's first screen

   The card's face (or its plate) beside its facts and the short reading. One
   shape for all five traditions, so that somebody who has seen a rune page
   recognises a hexagram page — which is why it is promoted to components.css
   as `.entry-hero*`, plate, body and title. What is left below is what the
   five traditions do *inside* the plate.
   ============================================================================= */

/* The engraved face sits *inside* the plate, which is the shape the deck was
   drawn for: `FaceVariant::Screen` is cropped to the artwork precisely because
   `.card-plate` is already drawing the ground, the brass frame and the copper
   hairline inside it. Its inline size is capped at 6.5rem in `components.css`,
   which is right for three cards in a spread and much too small for the one
   card a page is about. */
.page-knowledge .kn-hero__plate .tarot-face {
    max-width: none;
    width: 100%;
    height: auto;
}

.page-knowledge .kn-hero__plate .card-plate {
    width: 100%;
    min-height: 17rem;
    padding: var(--space-4) var(--space-4) var(--space-5);
    align-content: center;
    gap: var(--space-3);
}

.page-knowledge .kn-hero__plate .card-plate__glyph {
    font-size: 4.5rem;
    line-height: 1;
    color: var(--kn-accent);
}

.kn-plate__mark--hero {
    width: 3.5rem;
    height: 3.5rem;
}

.page-knowledge .kn-hero__plate .card-plate__name {
    font-size: var(--text-xl);
}

.page-knowledge .kn-hero__plate .card-plate__position {
    color: var(--color-muted);
}

/* Lenormand has no stave and no glyph to set, so its number takes the place a
   rune's mark holds on every other entry page. */
.page-knowledge .kn-hero__plate .kn-plate__numeral {
    font-family: var(--font-serif);
    font-size: var(--text-4xl);
    font-weight: 380;
    line-height: 1;
    color: var(--kn-accent);
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

.page-knowledge .kn-hero .overline {
    color: var(--kn-accent);
}

.page-knowledge .kn-hero .reading-section--summary {
    border-inline-start-color: var(--kn-accent);
}

/* The keyword chips. `.badge--muted` is the shared object; on an entry page
   there are eight of them in a row and they need to breathe. */
.kn-keywords {
    --cluster-space: var(--space-2);
}

/* =============================================================================
   The meanings — the body of an entry page

   Six sections on a tarot card, four on a rune, three on a hexagram, and every
   one of them a heading somebody searches for by name. They are the page, so
   they are set as a document: a hairline above each, an ornament before each
   title, and a measure that stays readable at 1440.
   ============================================================================= */

.kn-meanings {
    display: grid;
    gap: var(--space-6);
}

.kn-meanings > .reading-section {
    padding-block-start: var(--space-5);
    border-block-start: 1px solid var(--color-border-soft);
}

.kn-meanings > .reading-section:first-child {
    padding-block-start: 0;
    border-block-start: 0;
}

.page-knowledge .kn-meanings .reading-section__title {
    display: flex;
    gap: var(--space-3);
    align-items: baseline;
    font-size: var(--text-xl);
}

.page-knowledge .kn-meanings .reading-section__title::before {
    flex: none;
    font-size: var(--text-sm);
    color: var(--kn-accent);
    content: '✦';
}

.page-knowledge .kn-meanings .reading-section__body {
    max-width: 68ch;
}

/* =============================================================================
   The hexagram, drawn

   Six lines from the bottom up, `1` yang and `0` yin, straight out of
   `HexagramDetail::$binary`. Drawn rather than typeset because the character
   is a font's problem and this is not: it renders identically on a phone with
   no CJK symbol coverage, and it can be as large as the page wants.
   ============================================================================= */

.kn-hexagram {
    --kn-bar: 0.44rem;

    display: grid;
    gap: var(--kn-bar);
    width: 7rem;
}

.kn-hexagram--inline {
    --kn-bar: 0.24rem;

    width: 2.5rem;
    align-self: center;
}

.kn-hexagram__line {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--kn-bar);
    height: var(--kn-bar);
}

.kn-hexagram__line span {
    background: var(--kn-accent);
    border-radius: 1px;
}

/* A yang line is unbroken: one bar across both columns. Yin is the base — two
   bars in the two columns — so `--yin` carries no rule and is in the markup to
   name the state rather than to style it. */
.kn-hexagram__line--yang span {
    grid-column: 1 / -1;
}

/* The mark, the number, the text. Three columns rather than the shared two,
   because the mark is what a reader who has just thrown the coins matches on. */
.page-knowledge .hexagram-lines__item {
    grid-template-columns: 2.5rem 4.5rem minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
    padding-block: var(--space-4);
    border-block-start: 1px solid var(--color-border-soft);
}

.page-knowledge .hexagram-lines__item:first-child {
    border-block-start: 0;
}

.page-knowledge .hexagram-lines__number {
    color: var(--kn-accent);
    text-align: start;
    white-space: nowrap;
}

@media (max-width: 34rem) {
    .page-knowledge .hexagram-lines__item {
        grid-template-columns: 2.5rem minmax(0, 1fr);
        gap: var(--space-2) var(--space-3);
    }

    .page-knowledge .hexagram-lines__text {
        grid-column: 2;
    }
}

/* The key beside the six texts: the whole figure once, so a reader can see
   which line is which without counting. */
.kn-figure {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    align-items: center;
    padding: var(--space-5);
    background: var(--plate-fill-soft);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius);
}

.kn-figure__note {
    flex: 1 1 16rem;
    font-size: var(--text-base);
    line-height: 1.8;
    color: var(--color-text-soft);
}

/* =============================================================================
   Related entries and the thematic card list
   ============================================================================= */

.kn-related {
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
}

.page-knowledge .kn-related .card-plate {
    min-height: 0;
    padding: var(--space-4) var(--space-3);
}

/* On a thematic page every card is a heading with a paragraph under it and a
   link on the name. Given a rule and a hanging ornament they read as a list of
   six answers rather than as six more sections of the article. */
.kn-topic-cards {
    display: grid;
    gap: var(--space-5);
}

.kn-topic-cards > .reading-section {
    padding-block-start: var(--space-5);
    border-block-start: 1px solid var(--color-border-soft);
}

.kn-topic-cards > .reading-section:first-child {
    padding-block-start: 0;
    border-block-start: 0;
}

.page-knowledge .kn-topic-cards .reading-section__title {
    font-size: var(--text-lg);
}

.page-knowledge .kn-topic-cards .reading-section__title a {
    color: var(--color-text);
    text-decoration: none;
    border-block-end: 1px solid var(--kn-accent);
}

.page-knowledge .kn-topic-cards .reading-section__title a:hover {
    color: var(--color-gold-bright);
}

/* =============================================================================
   The funnel block at the foot of every page

   `.card--reading` lifts on hover because it is normally an item in a grid;
   a full-width block that jumps when the pointer crosses it is a tic, so on
   these pages it holds still.
   ============================================================================= */

.page-knowledge .kn-cta {
    padding: var(--space-6) var(--space-5);
}

.page-knowledge .kn-cta:hover {
    transform: none;
    border-color: var(--color-border);
}

@media (min-width: 46rem) {
    .page-knowledge .kn-cta {
        padding: var(--space-7) var(--space-6);
    }
}

/* =============================================================================
   The apology an unseeded catalogue prints

   Every index guards itself: the URL is one a search engine holds and a fresh
   clone is the worst possible moment to find out the seeder never ran. It is
   an empty state, not a footnote, so it is now literally one — `.kn-empty` is
   declared alongside `.empty-state` in components.css and has no rule here.
   ============================================================================= */

/* =============================================================================
   The sprite

   One `<svg>` of `<symbol>`s at the top of the document; every mark on the page
   is a `<use>` of it. Nine shapes for seventy-eight plates is the difference
   between four kilobytes and twenty.
   ============================================================================= */

.kn-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* =============================================================================
   Promoted to components.css

   Four of this file's objects were general and the phase 2 consolidation moved
   them. They are declared there under both names, so no knowledge template
   changed:

     .kn-head / __inner / __mark / __title / __lede / __meta → .masthead*
     .kn-rail / __inner / __label                            → .chip-rail*
     .kn-group__head / __count / __rule                      → .group-head*
     .kn-hero / __plate / __body / __title                   → .entry-hero*
     .kn-empty                                               → .empty-state

   `.kn-hexagram` stays here on purpose: six broken and unbroken lines are not a
   component, they are one tradition's notation, and nothing else on the site
   will ever draw them.
   ============================================================================= */