/* =============================================================================
   Zodiac — the evergreen sign pages (L11, L12)

   Four templates under `templates/zodiac/`: the two rozcestníky, the twelve
   sign profiles and the ninety compatibility pages. They are dictionaries in
   everything but subject, so they borrow the whole knowledge shell — `.kn-head`
   for the masthead, `.kn-hero` and `.kn-meanings` for the document, `.card-plate`
   for the tiles — and add only what a zodiac needs and no dictionary does:

     - a facts strip (`.zo-facts`), because a sign has six one-word answers
       above its prose and a dream symbol has none;
     - a rating chip (`.zo-rating`) in five colours, one per value of
       Zodiac\ValueObject\CompatibilityRating;
     - the twelve-by-twelve grid (`.zo-table`), which is the only real table on
       the public site;
     - a ranked pair list (`.zo-pairs`), which is a definition list of twelve
       links and a badge.

   Scoped under `.page-zodiac` wherever it refines something shared, so nothing
   here can reach another page. The palette is the site's brass and ink; the
   five ratings are the four status colours plus the muted grey, so a cell is
   readable in the same way a badge elsewhere is and no new hue enters the
   system for the sake of a table.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   The facts strip: six labelled values under the H1 of a sign page.

   A `<dl>` and not a list of „Živel: oheň" paragraphs, because that is what it
   is — six terms and their definitions — and a screen reader announces the pair.
   It wraps rather than scrolls: six short values fit two lines on a phone, and a
   horizontally scrolling strip of facts is a strip whose last fact nobody sees.
   -------------------------------------------------------------------------- */

.zo-facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    margin: 0;
}

.zo-facts__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 6.5rem;
}

.zo-facts__label {
    color: var(--color-muted);
    font-size: var(--text-2xs);
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.zo-facts__value {
    margin: 0;
    color: var(--color-text-soft);
    font-size: var(--text-base);
}

.zo-facts__aside {
    color: var(--color-muted);
    font-size: var(--text-xs);
}

/* Two signs side by side on a pair page: wider items, so „země · fixní ·
   Venuše" does not wrap after every word. */
.zo-facts--duo .zo-facts__item {
    min-width: 12rem;
}

/* -----------------------------------------------------------------------------
   The glyph on a hero plate.

   Big, because it is the only illustration these pages have: no engraving, no
   card face, just the astronomical sign in whatever serif the system has. It is
   `aria-hidden` in every template — the name is right underneath it — so its job
   is purely to give the plate a face.
   -------------------------------------------------------------------------- */

.zo-glyph {
    margin: 0;
    color: var(--color-gold-light);
    font-family: var(--font-serif);
    font-size: 3.25rem;
    line-height: 1;
}

.zo-glyph--duo {
    font-size: 2.5rem;
    letter-spacing: 0.08em;
}

/* -----------------------------------------------------------------------------
   The rating chip, in five values.

   The same shape as `.badge`, deliberately not the same class: a badge is
   neutral by default and these five carry meaning, so they are their own
   component rather than five modifiers bolted onto a shared one.
   -------------------------------------------------------------------------- */

.zo-rating {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-3);
    border: 1px solid var(--color-border-neutral);
    border-radius: var(--radius-pill);
    color: var(--color-text-soft);
    font-size: var(--text-2xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.zo-rating--excellent {
    border-color: rgb(121 194 148 / 55%);
    color: var(--color-success);
}

.zo-rating--strong {
    border-color: rgb(224 175 103 / 55%);
    color: var(--color-gold-light);
}

.zo-rating--magnetic {
    border-color: rgb(143 179 221 / 55%);
    color: var(--color-info);
}

.zo-rating--demanding {
    border-color: rgb(224 168 91 / 45%);
    color: var(--color-warning);
}

.zo-rating--difficult {
    border-color: rgb(229 128 121 / 45%);
    color: var(--color-danger);
}

/* -----------------------------------------------------------------------------
   The ranked list of twelve pairs.

   Rows of three parts — the sign, the rating, the aspect — laid out as a grid so
   the three columns line up down the list. On a phone the aspect drops to a
   second line rather than squeezing the sign's name.
   -------------------------------------------------------------------------- */

.zo-pairs {
    display: grid;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.zo-pairs__item {
    display: grid;
    grid-template-columns: minmax(8rem, 1fr) auto;
    align-items: center;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-border-soft);
}

.zo-pairs__link {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2);
    color: var(--color-text);
    text-decoration: none;
}

.zo-pairs__link:hover,
.zo-pairs__link:focus-visible {
    color: var(--color-gold-bright);
}

/* A pair whose entry is not published: the row still carries its rating, and
   the name is plainly not a link. */
.zo-pairs__link--plain {
    color: var(--color-muted);
}

.zo-pairs__glyph {
    color: var(--color-gold);
    font-family: var(--font-serif);
    font-size: var(--text-lg);
}

.zo-pairs__name {
    font-size: var(--text-md);
}

.zo-pairs__aspect {
    grid-column: 1 / -1;
    color: var(--color-muted);
    font-size: var(--text-xs);
}

@media (width >= 40rem) {
    .zo-pairs__item {
        grid-template-columns: minmax(8rem, 1fr) auto 7rem;
    }

    .zo-pairs__aspect {
        grid-column: auto;
        text-align: right;
    }
}

/* -----------------------------------------------------------------------------
   The twelve-by-twelve table.

   The only real data table the public site has, and the one place a horizontal
   scroller is right: thirteen columns cannot be made to fit a phone without
   either a font nobody can read or a transposition nobody expects. The wrapper
   scrolls, the page never does.

   The row headers stay put on the left while the body scrolls, because a table
   whose first column has scrolled away is a grid of numbers.
   -------------------------------------------------------------------------- */

.zo-table__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.zo-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.zo-table th,
.zo-table td {
    padding: var(--space-2);
    border: 1px solid var(--color-border-soft);
    text-align: center;
}

.zo-table thead th {
    color: var(--color-gold-light);
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    font-weight: 500;
}

.zo-table tbody th {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--color-background);
    color: var(--color-text-soft);
    font-size: var(--text-xs);
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
}

.zo-cell a {
    display: block;
    color: inherit;
    text-decoration: none;
}

.zo-cell a:hover,
.zo-cell a:focus-visible {
    color: var(--color-text);
    text-decoration: underline;
}

.zo-cell--excellent {
    background: rgb(121 194 148 / 18%);
    color: var(--color-success);
}

.zo-cell--strong {
    background: rgb(224 175 103 / 16%);
    color: var(--color-gold-light);
}

.zo-cell--magnetic {
    background: rgb(143 179 221 / 16%);
    color: var(--color-info);
}

.zo-cell--demanding {
    background: rgb(224 168 91 / 10%);
    color: var(--color-warning);
}

.zo-cell--difficult {
    background: rgb(229 128 121 / 12%);
    color: var(--color-danger);
}

.zo-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin: 0;
    padding: 0;
    color: var(--color-muted);
    font-size: var(--text-xs);
    list-style: none;
}

.zo-legend li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

/* -----------------------------------------------------------------------------
   The two selects on the rozcestník.

   A plain GET form: two fields and a button, in a row on a desktop and stacked
   on a phone. Nothing here is JavaScript — see the template for why the site's
   content security policy makes that the only option worth having.
   -------------------------------------------------------------------------- */

.zo-picker {
    display: grid;
    gap: var(--space-4);
    align-items: end;
    padding: var(--space-5);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.zo-picker__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

@media (width >= 48rem) {
    .zo-picker {
        grid-template-columns: 1fr 1fr auto;
    }
}

/* -----------------------------------------------------------------------------
   The index's teaser list and the element/quality blocks.
   -------------------------------------------------------------------------- */

.zo-teasers {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.zo-teasers__item {
    display: grid;
    gap: var(--space-1);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border-soft);
}

.zo-teasers__sign {
    color: var(--color-gold-light);
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    text-decoration: none;
}

.zo-teasers__sign:hover,
.zo-teasers__sign:focus-visible {
    color: var(--color-gold-bright);
}

.zo-teasers__text {
    color: var(--color-text-soft);
}

@media (width >= 48rem) {
    .zo-teasers__item {
        grid-template-columns: 11rem 1fr;
        gap: var(--space-4);
        align-items: baseline;
    }
}

.zo-groups {
    display: grid;
    gap: var(--space-4);
}

.zo-groups__item {
    padding: var(--space-4);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.zo-groups__item p {
    margin: var(--space-2) 0 0;
    color: var(--color-text-soft);
    font-size: var(--text-base);
}

.zo-groups__title {
    margin: 0;
    color: var(--color-gold-light);
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    font-weight: 500;
}

@media (width >= 48rem) {
    .zo-groups {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* The list of horoscope links on a sign profile: five periods and an ascendant,
   as chips rather than as a bulleted list, because they are navigation. */

.zo-horoscopes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.zo-horoscopes a {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-pill);
    color: var(--color-text-soft);
    font-size: var(--text-sm);
    text-decoration: none;
}

.zo-horoscopes a:hover,
.zo-horoscopes a:focus-visible {
    border-color: var(--color-border);
    color: var(--color-gold-bright);
}

/* The two-glyph plate on a pair page: the same plate as everywhere, a little
   taller so two glyphs and a two-word name have room. */

.zo-duo {
    min-height: 12rem;
}