/**
 * RiimiAbi — Kahur Tools theme layer.
 *
 * Loaded after style.css. style.css keeps doing the layout; this file only
 * changes how it looks, so the markup and the JS that hangs off these class
 * names are untouched.
 *
 * The tools palette is copied here rather than pulling in
 * /tools/assets/css/main.css. That stylesheet sets `body { display: flex }`
 * and defines its own `.btn` and `.badge`, all three of which collide with
 * riimiabi's own rules — and this page carries most of the site's traffic, so
 * it is not the place to import a stylesheet for its variables and take its
 * layout rules as a side effect.
 *
 * Keep the values below in step with the :root block of
 * tools/assets/css/main.css.
 */

:root {
    /* ── Kahur Tools palette ─────────────────────────────────────────────── */
    --k-bg:            #0a0d12;
    --k-surface-1:     #131820;
    --k-surface-2:     #1a2130;
    --k-surface-3:     #222c3c;
    --k-border:        #2a3648;
    --k-text-1:        #e8edf4;
    --k-text-2:        #8d9bb0;
    --k-text-3:        #556070;
    --k-accent:        #f0a030;
    --k-accent-hover:  #f5b450;
    --k-accent-dim:    rgba(240, 160, 48, 0.15);
    --k-error:         #f85149;
    --k-ok:            #3fb950;
    --k-font:          system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* ── riimiabi's own variables, repointed ─────────────────────────────── */
    /* style.css uses these throughout, so redefining them re-skins every
       component it styles without touching a single one of its rules. */
    --bg1:    var(--k-bg);
    --bg2:    var(--k-bg);
    --card:   var(--k-surface-1);
    --card2:  var(--k-surface-2);
    --stroke: var(--k-border);
    --text:   var(--k-text-1);
    --muted:  var(--k-text-2);
    --danger: var(--k-error);
    --radius: 12px;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .6);
}

/* ── Page ground ────────────────────────────────────────────────────────── */
/* style.css paints two large radial gradients here; the tools pages are a flat
   ground, and the gradients are what made the two halves of the site look like
   different products. */
/* style.css paints three coloured halos — indigo, cyan, green — that belong to
   the old palette and fight the amber accent. They are replaced rather than
   removed: a flat black page reads as unfinished next to /tools/, which lifts
   the top of every page with one warm radial. Same colour and same shape as
   .hero / .tool-hero there, sized in px so the halo stays a top-of-page glow
   instead of stretching with the document. */
body {
    background:
        radial-gradient(1100px 620px at 50% 0, rgba(240, 160, 48, .10), transparent 70%),
        var(--k-bg) !important;
    font-family: var(--k-font);
    color: var(--k-text-1);
}

/* ── Cards ──────────────────────────────────────────────────────────────── */
/* Matching .calculator-card: a solid surface with a real border, rather than a
   translucent white overlay that changes shade with whatever is behind it. */
.card,
.page-hero-card {
    background: var(--k-surface-1);
    border: 1px solid var(--k-border);
    border-radius: 12px;
    box-shadow: none;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
    font-family: inherit;
    font-weight: 600;
    border-radius: 8px;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.btn-search {
    background: var(--k-accent);
    border: 1px solid var(--k-accent);
    color: var(--k-bg);
}

.btn-search:hover {
    background: var(--k-accent-hover);
    border-color: var(--k-accent-hover);
    color: var(--k-bg);
}

/* ── Chips: tabs, rhyme modes, results ──────────────────────────────────── */
.chip {
    background: var(--k-surface-2);
    border: 1px solid var(--k-border);
    color: var(--k-text-1);
    border-radius: 9999px;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.chip:hover {
    border-color: var(--k-accent);
    color: var(--k-accent);
}

.chip.is-active {
    background: var(--k-accent-dim);
    border-color: var(--k-accent);
    color: var(--k-accent);
}

/* ── Form controls ──────────────────────────────────────────────────────── */
.field input,
.select {
    background: var(--k-surface-2);
    border: 1px solid var(--k-border);
    color: var(--k-text-1);
    border-radius: 8px;
    font-family: inherit;
}

.field input:focus,
.select:focus {
    outline: none;
    border-color: var(--k-accent);
    box-shadow: 0 0 0 1px var(--k-accent);
}

.segmented {
    background: var(--k-surface-2);
    border: 1px solid var(--k-border);
    border-radius: 9999px;
    /* Safety net: style.css sets inline-flex with no wrap, so four Estonian
       labels overflowed the card on any phone. */
    flex-wrap: wrap;
}

.segmented label {
    white-space: nowrap;
}

.segmented input:checked + label {
    background: var(--k-surface-3);
    border-color: var(--k-accent);
    color: var(--k-accent);
}

/* Below this width "Lõppriim / Keskriim / Algriim / Kõla järgi" needs about
   370px and the card gives 343px, so the row overflowed. Two columns fit all
   four at any phone width and give each one a full-width tap target. */
@media (max-width: 560px) {
    .segmented {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        flex: 1 1 100%;
        width: 100%;
        border-radius: 16px;
    }

    .segmented label {
        padding: 11px 8px;
        text-align: center;
        white-space: normal;
    }
}


/* ── Rhyme-group colours ────────────────────────────────────────────────── */
/* Which lines rhyme with which is the one thing the verse tab never showed.
   A letter answers it; a letter with a colour answers it at a glance, down a
   sixteen-line text where four groups are in play at once. Five hues, then the
   alphabet wraps and so does this — a run long enough to repeat a colour is
   long enough that the letter is doing the work again. */
.verse-line__letter[data-letter="A"], .vpair__badge[data-letter="A"] { --vl-line:#f0a030; --vl-tint:rgba(240,160,48,.16); }
.verse-line__letter[data-letter="B"], .vpair__badge[data-letter="B"] { --vl-line:#58a6ff; --vl-tint:rgba(88,166,255,.16); }
.verse-line__letter[data-letter="C"], .vpair__badge[data-letter="C"] { --vl-line:#3fb950; --vl-tint:rgba(63,185,80,.16); }
.verse-line__letter[data-letter="D"], .vpair__badge[data-letter="D"] { --vl-line:#bc8cff; --vl-tint:rgba(188,140,255,.16); }
.verse-line__letter[data-letter="E"], .vpair__badge[data-letter="E"] { --vl-line:#f778ba; --vl-tint:rgba(247,120,186,.16); }

/* ── Text ───────────────────────────────────────────────────────────────── */
.brand-name,
.results-head .t {
    color: var(--k-text-1);
}

.brand-sub,
.results-head .s,
.verse-note {
    color: var(--k-text-2);
}

.err,
.verse-message {
    color: var(--k-error);
}

/* ── Cross-links to the calculators ─────────────────────────────────────── */
/* These were unstyled text lines before, so they had no padding of their own —
   giving them a background without one turned the inline padding-top they
   carried into an empty first row. Laid out as a row so the emoji, the sentence
   and the link stay on one line, wrapping only when the sentence genuinely does
   not fit. */
.hint-link,
.promo-link {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 .4em;
    padding: 10px 14px;
    border-left: 3px solid var(--k-accent);
    background: var(--k-surface-2);
    border-radius: 8px;
    line-height: 1.45;
    cursor: pointer;
}

.hint-link:hover,
.promo-link:hover {
    background: var(--k-surface-3);
}

.promo-link a,
.hint-link a {
    color: var(--k-accent);
}

/* === AD UNITS ============================================================ */
/* Markup comes from riimiabi_ad() in ads.php: one <div class="ad-unit
   ad-unit--{position}"> wrapping one responsive <ins>. The rules below are the
   same ones the tools site arrived at, with two deliberate differences:

   - No full-bleed on phones. Two of the four units sit inside .card, which
     carries overflow:hidden, so the negative-margin trick would be clipped on
     exactly half the slots. A card-width unit is still wide enough for the
     336x280 and 320x100 creatives that pay.
   - Height is reserved per position so a late-arriving ad does not shove the
     results or the prose down the page. */

.ad-unit {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 20px auto;
    /* A creative is a third-party iframe whose width Google sets from its own
       measurement, which can disagree with the box it landed in. Clipping here
       makes it structurally impossible for any ad to paint over the page around
       it, whatever the cause — the container is the boundary. */
    overflow: hidden;
}

.ad-unit ins {
    display: block;
    width: 100%;
    /* An iframe that does not paint its own background gets the canvas colour
       from its color-scheme. Declaring dark here is the only lever left on a
       white loading frame that does not involve hiding the slot — and hiding a
       slot at request time is what we are not doing, see the note below.
       If Google's frame paints white explicitly, this changes nothing; it costs
       nothing either. */
    color-scheme: dark;
}

/* ── Clear button inside the search box ────────────────────────────────── */
/* .field is already position:relative in style.css, so this needs no wrapper.
   The input gets right padding to match, or a long word would run underneath. */
.field input[type="text"] {
    padding-right: 44px;
}

.field-clear {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--k-text-3);
    cursor: pointer;
    transition: color .15s ease, background .15s ease;
}

.field-clear::before {
    content: "";
    width: 13px;
    height: 13px;
    background: currentColor;
    -webkit-mask: var(--clear-icon) center / contain no-repeat;
            mask: var(--clear-icon) center / contain no-repeat;
}

:root {
    --clear-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='5' y1='5' x2='19' y2='19'/%3E%3Cline x1='19' y1='5' x2='5' y2='19'/%3E%3C/svg%3E");
}

/* display:flex above outranks the user agent's [hidden]{display:none}, because
   an author rule beats a UA rule at equal specificity — without this the button
   would sit there on an empty box, which is the one state it must not. */
.field-clear[hidden] {
    display: none;
}

.field-clear:hover {
    background: var(--k-surface-3);
    color: var(--k-text-1);
}

.field-clear:focus-visible {
    outline: 2px solid var(--k-accent);
    outline-offset: 1px;
}

/* ── Share button ──────────────────────────────────────────────────────── */
/* Sits in .results-head, which is already flex + space-between, so it lands on
   the right of the result count without touching that layout. */
.btn-share {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: none;
    padding: 8px 14px;
    border: 1px solid var(--k-border);
    border-radius: 9999px;
    background: var(--k-surface-2);
    color: var(--k-text-1);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.btn-share:hover {
    border-color: var(--k-accent);
    color: var(--k-accent);
}

.btn-share:focus-visible {
    outline: 2px solid var(--k-accent);
    outline-offset: 2px;
}

/* The icon is a mask rather than an <svg> so it inherits the button's colour
   through every state without a second rule per state. */
.btn-share__icon {
    width: 15px;
    height: 15px;
    flex: none;
    background: currentColor;
    -webkit-mask: var(--share-icon) center / contain no-repeat;
            mask: var(--share-icon) center / contain no-repeat;
}

:root {
    --share-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cline x1='8.6' y1='10.5' x2='15.4' y2='6.5'/%3E%3Cline x1='8.6' y1='13.5' x2='15.4' y2='17.5'/%3E%3C/svg%3E");
}

/* Same shell as the share button — it sits beside it and any difference in
   height or radius reads as a mistake — with its own glyph. */
.btn-verse__icon {
    width: 15px;
    height: 15px;
    flex: none;
    background: currentColor;
    -webkit-mask: var(--verse-icon) center / contain no-repeat;
            mask: var(--verse-icon) center / contain no-repeat;
}

:root {
    --verse-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E");
}

.results-head__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.btn-share.is-done {
    border-color: var(--k-accent);
    background: var(--k-accent-dim);
    color: var(--k-accent);
}

/* On a narrow screen the result heading needs the width more than the word
   "Jaga" does; the icon and the aria-label still say what the button is. */
@media (max-width: 520px) {
    .btn-share__text { display: none; }
    .btn-share { padding: 9px 11px; }
    .btn-share.is-done .btn-share__text { display: inline; }
}

/* ── Syllable groups ───────────────────────────────────────────────────── */
/* The label sits on a rule that runs to the edge, so the groups read as bands
   rather than as headings floating above loose chips. */
.syl-group + .syl-group {
    margin-top: 4px;
}

.syl-group__label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 16px 2px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--k-text-2);
}

.syl-group__label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--k-border);
}

/* Count first in source order would read as part of the number of syllables,
   so it is pushed after the rule and dimmed. */
.syl-group__count {
    order: 3;
    font-weight: 500;
    color: var(--k-text-3);
}

.syl-group .grid {
    padding-top: 6px;
    padding-bottom: 6px;
}

/* ── Auto ads landing inside the results grid ───────────────────────────── */
/* Auto ads injects placements client-side wherever it decides, and one of the
   places it decides is inside .grid. There it becomes a grid item in a single
   ~290px column while the creative inside renders several hundred px wider, so
   it paints straight over the chips beside it. Moving our own unit out of the
   grid did not stop it, because this one is not ours and is not in the HTML the
   server sends.
   Nothing here can prevent the insertion — that switch is in the AdSense Auto
   ads settings. What this can do is make the insertion harmless: whatever ad
   lands in the grid takes a whole row and is clipped to it.
   max-width beats the inline width AdSense writes on the <ins>, because
   max-width clamps width regardless of which stylesheet set it. */
.grid > ins.adsbygoogle,
.grid > .google-auto-placed,
.grid > div[data-google-query-id],
.grid > div[id^="google_ads"],
.grid > iframe {
    grid-column: 1 / -1;
    max-width: 100%;
    overflow: hidden;
}

/* A grid item's default min-width:auto lets an oversized child push the track
   wider than its share, which is the other half of how the overlap happened. */
.grid > * {
    min-width: 0;
}

/* The in-feed unit sits between two .grid blocks, not inside one, so it needs
   no grid placement — only a tighter vertical rhythm, because each grid already
   contributes 16px of its own padding on the facing edge. */
.ad-unit--riimi_sees {
    margin-block: 4px;
}

/* ── Phones ─────────────────────────────────────────────────────────────── */
@media (max-width: 819px) {
    /* Directly under the form, where a tall block would push the results
       below the fold. Everything else can afford a rectangle. */
    .ad-unit--riimi_tulemused {
        min-height: 110px;
    }

    .ad-unit--riimi_sees,
    .ad-unit--riimi_all,
    .ad-unit--riimi_kuidas,
    .ad-unit--riimi_kkk {
        min-height: 260px;
    }
}

/* ── Tablets and up ─────────────────────────────────────────────────────── */
@media (min-width: 820px) {
    .ad-unit {
        max-width: 728px;
        min-height: 100px;
        /* Vertical only. style.css sets box-sizing:border-box globally, so any
           horizontal padding comes out of max-width: 8px each side left the
           <ins> at 712px and 954px, exactly 16px short of the 728 and 970
           creatives these caps exist to admit. */
        padding: 8px 0;
        border-radius: var(--radius);
    }
}

/* Wide enough for the billboard formats (970x90, 970x250), which pay best.
   The breakpoint is 1040px because that is exactly where .wrap stops growing —
   below it the column is narrower than the ad would be, above it the 728px cap
   left every unit visibly narrower than the content it sat in.
   970 is the ceiling on purpose: no standard display size is wider, so a
   roomier box would only centre the same creative in more dead space. */
@media (min-width: 1040px) {
    .ad-unit {
        max-width: 970px;
    }
}

/* No background of any kind. The tools site paints a filled slot white to hide
   the letterbox bars inside a creative's iframe, and that rule was copied here
   with the rest of the block — but this page is dark, and AdSense sets
   data-ad-status="filled" the moment the request comes back, before the
   creative has painted. The result was a white strip flashing on a dark page
   for a second or two and then vanishing when the slot turned out to be
   unfilled and collapsed. A creative paints its own background; the container
   does not need one. */

/* DO NOT hide the slot while it loads.
 *
 * There was a rule here that set visibility:hidden on an <ins> until AdSense
 * wrote data-ad-status, to stop the creative's own white iframe flashing on a
 * dark page. It was removed on 2026-09-04, the same day it went in, because
 * hiding a slot at request time is the wrong trade twice over:
 *
 *   - Google's program policies require ad units to be visible. A slot that is
 *     hidden when the request is made is exactly what that rule is about, and
 *     the exposure is the whole account, not this page.
 *   - Bids are made against viewability. A slot reporting as not visible draws
 *     the demand that does not care — which is the remnant and related-search
 *     inventory this site was already getting too much of.
 *
 * The white flash is cosmetic and lasts under two seconds. Fill quality is
 * money. If the flash is worth attacking again, it has to be done without the
 * slot being invisible at request time — and the creative's iframe is
 * cross-origin, so there may simply be no way to do it. */

/* Unfilled: out of the flow entirely, so there is nothing left to paint. */
.ad-unit > ins.adsbygoogle[data-ad-status="unfilled"] {
    display: none;
}

/* Nothing served: give the reserved space back instead of leaving a hole. */
.ad-unit:has(> ins[data-ad-status="unfilled"]) {
    min-height: 0;
    padding: 0;
    margin: 0;
}

/* === CONTENT SECTIONS ==================================================== */
/* The prose, FAQ and cross-links rendered by riimiabi_content(). They reuse
   .card / .card-inner from style.css, so only the typography is new here. */

.ra-section {
    margin-top: 20px;
}

/* The measure lives on the block, not on the paragraphs. With it on <p> alone
   the headings ran the full 1008px of the card while the text stopped at 576px,
   so the section read as pinned to the left with a dead right half. Centring one
   column keeps the 72ch reading measure and balances the margins.
   76ch, not 72: .card-inner's 16px padding is inside the box (border-box). */
.ra-prose {
    max-width: 76ch;
    margin-inline: auto;
    line-height: 1.65;
}

.ra-prose h2 {
    margin: 0 0 14px;
    font-size: 22px;
    color: var(--k-text-1);
}

.ra-prose h3 {
    margin: 26px 0 8px;
    font-size: 17px;
    color: var(--k-accent);
}

.ra-prose p {
    margin: 0 0 12px;
    color: var(--k-text-2);
}

.ra-prose strong {
    color: var(--k-text-1);
    font-weight: 600;
}

.ra-prose em {
    color: var(--k-text-1);
}

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.ra-faq {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ra-faq__item {
    border: 1px solid var(--k-border);
    border-radius: 10px;
    background: var(--k-surface-2);
    overflow: hidden;
}

.ra-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    font-weight: 600;
    color: var(--k-text-1);
    cursor: pointer;
    list-style: none;
}

.ra-faq__q::-webkit-details-marker { display: none; }

.ra-faq__q::after {
    content: "+";
    flex: none;
    font-size: 20px;
    line-height: 1;
    color: var(--k-accent);
}

.ra-faq__item[open] .ra-faq__q::after { content: "\2212"; }

.ra-faq__q:hover { background: var(--k-surface-3); }

.ra-faq__a {
    padding: 0 14px 12px;
}

.ra-faq__a p {
    margin: 0;
    color: var(--k-text-2);
    line-height: 1.6;
}

/* ── Cross-links ────────────────────────────────────────────────────────── */
.ra-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 18px;
}

/* 48 one-word links need a tighter rhythm than three calculator names. */
.ra-links--dense {
    gap: 6px;
}

.ra-links--dense .chip {
    padding: 6px 12px;
    font-size: 14px;
}