/* Light is the base palette: every colour token is defined here, so a
   token can never be missing when the dark blocks below don't apply. */
:root {
    --bg-primary: #f8fafc;
    --bg-card: #ffffff;
    --bg-soft: #f8fafc;
    --text-main: #1e293b;
    --text-body: #334155;
    --text-muted: #64748b;
    --accent: #4f46e5;
    --accent-light: #eef2ff;
    --accent-border: #c7d2fe;
    --badge-bg: #e0e7ff;
    --heading: #312e81;
    --heading-strong: #1e1b4b;
    --line: #e2e8f0;
    --line-soft: #edf2f7;
    --quote-bg: #faf5ff;
    --quote-border: #a855f7;
    --insight-bg: #f0fdf4;
    --insight-border: #22c55e;
    --insight-title: #15803d;
    --insight-text: #166534;
    --dialogue-bg: #f5f3ff;
    --dialogue-text: #4338ca;
    --img-filter: none;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04);
    --radius-md: 12px;
    --radius-lg: 20px;
    /* comfortable line length for running Hebrew text; the card
       stays wide so illustrations can run past the text column */
    --measure: 34rem;
}

/* Only the colours change in dark mode. The rule is repeated for the
   system preference (unless the reader explicitly chose light) and for
   an explicit dark choice, so the toggle wins in both directions. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg-primary: #0b1120;
        --bg-card: #151f33;
        --bg-soft: #1b2740;
        --text-main: #e2e8f0;
        --text-body: #cbd5e1;
        --text-muted: #94a3b8;
        --accent: #a5b4fc;
        --accent-light: #232c4d;
        --accent-border: #3f4b8a;
        --badge-bg: #2c3563;
        --heading: #c7d2fe;
        --heading-strong: #e0e7ff;
        --line: #27334a;
        --line-soft: #222d42;
        --quote-bg: #241a38;
        --quote-border: #a855f7;
        --insight-bg: #10251b;
        --insight-border: #22c55e;
        --insight-title: #4ade80;
        --insight-text: #a7f3c4;
        --dialogue-bg: #232a52;
        --dialogue-text: #c7d2fe;
        --img-filter: brightness(0.88) contrast(1.02);
        --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.5), 0 2px 4px -2px rgba(0,0,0,0.4);
        --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.55), 0 4px 6px -4px rgba(0,0,0,0.4);
    }
}

:root[data-theme="dark"] {
    --bg-primary: #0b1120;
    --bg-card: #151f33;
    --bg-soft: #1b2740;
    --text-main: #e2e8f0;
    --text-body: #cbd5e1;
    --text-muted: #94a3b8;
    --accent: #a5b4fc;
    --accent-light: #232c4d;
    --accent-border: #3f4b8a;
    --badge-bg: #2c3563;
    --heading: #c7d2fe;
    --heading-strong: #e0e7ff;
    --line: #27334a;
    --line-soft: #222d42;
    --quote-bg: #241a38;
    --quote-border: #a855f7;
    --insight-bg: #10251b;
    --insight-border: #22c55e;
    --insight-title: #4ade80;
    --insight-text: #a7f3c4;
    --dialogue-bg: #232a52;
    --dialogue-text: #c7d2fe;
    --img-filter: brightness(0.88) contrast(1.02);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.5), 0 2px 4px -2px rgba(0,0,0,0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.55), 0 4px 6px -4px rgba(0,0,0,0.4);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* belt and braces against a sideways scrollbar: clip (not hidden) so that
   position: sticky keeps working, plus a ceiling on anything replaced */
html,
body {
    overflow-x: clip;
    max-width: 100%;
}

img,
svg,
video,
iframe,
table,
pre {
    max-width: 100%;
}

body {
    font-family: 'Assistant', sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-main);
    line-height: 1.8;
    font-size: 1.05rem;
    padding: 0;
}

/* tells the browser which scheme its own UI (scrollbars, form
   controls, focus rings) should match */
:root { color-scheme: light; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { color-scheme: dark; }
}
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

/* the header carries two controls now, so the pair is positioned as a group
   and each button is just a button */
.header-tools {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.theme-toggle {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.28);
    background: rgba(255,255,255,0.12);
    color: #ffffff;
    border-radius: 50%;
    cursor: pointer;
    font: inherit;
    font-size: 1.15rem;
    line-height: 1;
    transition: background 0.2s ease, transform 0.2s ease;
}

.header-tools svg {
    display: block;
    fill: currentColor;
}

.theme-toggle:hover {
    background: rgba(255,255,255,0.24);
    transform: translateY(-2px);
}

.theme-toggle:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
}

/* one button, two glyphs: each theme shows the one it switches to */
.theme-toggle .icon-dark { display: inline; }
.theme-toggle .icon-light { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle .icon-dark { display: none; }
    :root:not([data-theme="light"]) .theme-toggle .icon-light { display: inline; }
}
:root[data-theme="dark"] .theme-toggle .icon-dark { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-light { display: inline; }
:root[data-theme="light"] .theme-toggle .icon-dark { display: inline; }
:root[data-theme="light"] .theme-toggle .icon-light { display: none; }

/* language switcher: one row of round flags, centred at the top of the
   header and always visible. Each is a real <a hreflang> link, so the
   translations stay crawlable and the switcher needs no JavaScript. */
.lang-flags {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.6rem;
    margin: 0 auto 1.75rem;
    /* the theme toggle and the accessibility button are pinned to the two top
       corners; this keeps the row clear of both at any width */
    max-width: calc(100% - 8rem);
}

.lang-flags a {
    flex: none;
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.45), 0 2px 6px rgba(15,23,42,0.35);
    opacity: 0.75;
    transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.lang-flags svg {
    display: block;
    width: 100%;
    height: 100%;
}

.lang-flags a:hover {
    opacity: 1;
    transform: translateY(-2px);
}

.lang-flags a:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 3px;
}

.lang-flags a[aria-current="true"] {
    opacity: 1;
    box-shadow: 0 0 0 3px #ffffff, 0 2px 8px rgba(15,23,42,0.45);
}

@media (max-width: 479px) {
    .lang-flags { gap: 0.4rem; margin-bottom: 1.4rem; }
    .lang-flags a { width: 34px; height: 34px; }
}

@media (max-width: 359px) {
    .lang-flags { gap: 0.3rem; }
    .lang-flags a { width: 30px; height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
    .theme-toggle,
    .lang-flags a,
    .toc-link,
    .story-card {
        transition: none;
    }
}

header {
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4338ca 100%);
    color: #ffffff;
    padding: 1.5rem 1.5rem 3.5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at top center, rgba(255,255,255,0.12) 0%, transparent 70%);
    pointer-events: none;
}

.header-content {
    max-width: 760px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

h1 {
    font-family: 'Frank Ruhl Libre', serif;
    font-size: 2.8rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    margin-bottom: 0.8rem;
    line-height: 1.2;
}

.subtitle {
    font-size: 1.25rem;
    font-weight: 300;
    color: #e0e7ff;
    max-width: 600px;
    margin: 0 auto;
}

main {
    max-width: 860px;
    margin: -2rem auto 4rem;
    padding: 0 1.5rem;
    position: relative;
    z-index: 2;
}

.toc-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--line);
    margin-bottom: 3rem;
}

.toc-card h2 {
    font-family: 'Frank Ruhl Libre', serif;
    font-size: 1.5rem;
    color: var(--heading);
    margin-bottom: 1.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--accent-light);
}

.toc-list {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .toc-list {
        grid-template-columns: 1fr 1fr;
    }
}

.toc-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    background: var(--bg-soft);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-md);
    color: var(--text-main);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
}

.toc-link:hover {
    background: var(--accent-light);
    border-color: var(--accent-border);
    color: var(--accent);
    transform: translateY(-2px);
}

.toc-badge {
    background: var(--badge-bg);
    color: var(--accent);
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.story-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 2.5rem;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--line);
    margin-bottom: 3rem;
    scroll-margin-top: 2rem;
    transition: box-shadow 0.25s ease;
}

.story-card:hover {
    box-shadow: var(--shadow-lg);
}

.story-header {
    margin-bottom: 1.75rem;
    text-align: center;
}

.story-tag {
    display: inline-block;
    background: var(--accent-light);
    color: var(--accent);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    margin-bottom: 0.75rem;
    border: 1px solid var(--accent-border);
}

.story-title {
    font-family: 'Frank Ruhl Libre', serif;
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--heading-strong);
    line-height: 1.3;
}

/* the full texts carry their own section breaks; these sit on the reading
   measure with the paragraphs, not the wider illustrations */
.story-section {
    max-width: var(--measure);
    margin: 2.5rem auto 1.1rem;
    font-family: 'Frank Ruhl Libre', serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--heading);
    text-align: center;
    text-wrap: balance;
}

.story-section::after {
    content: '';
    display: block;
    width: 3rem;
    height: 2px;
    margin: 0.6rem auto 0;
    background: var(--accent-border);
    border-radius: 2px;
}

.story-body > figure + .story-section {
    margin-top: 2rem;
}

.story-body p {
    margin-bottom: 1.25rem;
    color: var(--text-body);
    text-align: start;
}

/* the running text is held to a measure and centred in the card, while the
   illustrations below keep the card's full width */
.story-body > p,
.story-body > ul,
.story-body > .quote-box,
.story-card > .quote-box {
    max-width: var(--measure);
    margin-inline: auto;
}

.story-body > figure + p {
    margin-top: 0;
}

.story-body ul {
    list-style: none;
    padding: 0;
    margin: 1.25rem 0;
}

.story-body ul li {
    position: relative;
    padding-right: 1.5rem;
    margin-bottom: 0.75rem;
    color: var(--text-body);
}

.story-body ul li::before {
    content: "•";
    color: var(--accent);
    font-size: 1.5rem;
    position: absolute;
    right: 0;
    top: -0.2rem;
}

.quote-box {
    width: 100%;
    background: var(--quote-bg);
    border-right: 4px solid var(--quote-border);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    padding: 1.25rem 1.5rem;
    margin-top: 2rem;
}

.quote-box.insight {
    background: var(--insight-bg);
    border-right-color: var(--insight-border);
}

.quote-title {
    font-weight: 700;
    color: var(--insight-title);
    margin-bottom: 0.35rem;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.quote-box p {
    margin: 0;
    color: var(--insight-text);
    font-weight: 600;
    text-align: right;
}

.dialogue {
    font-style: italic;
    color: var(--dialogue-text);
    background: var(--dialogue-bg);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
}

.story-figure {
    margin: 2rem 0;
}

.story-figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    /* a hairline keeps a light-edged illustration from bleeding into the
       card behind it */
    border: 1px solid var(--line);
    background: var(--line);
    /* the illustrations are lit for a bright page; take the glare off
       them in dark mode rather than having them shine out of it */
    filter: var(--img-filter);
}

.story-figure figcaption {
    max-width: var(--measure);
    margin-inline: auto;
    margin-top: 0.65rem;
    font-size: 0.9rem;
    color: var(--text-muted);
    text-align: center;
    font-style: italic;
}

.story-figure.lead {
    margin-top: 0;
}

footer {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted);
    font-size: 0.95rem;
    border-top: 1px solid var(--line);
}

/* Developer credit — same block as the footer of the Klaser app
   (github.com/shayh22/klaser), restyled with this page's palette. */
.credit {
    max-width: 620px;
    margin: 1.5rem auto 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
}

.credit-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.05rem;
    /* no wrapping: the logo stays beside the text at every width, on the
       right of it under RTL, rather than dropping above it on a phone */
    flex-wrap: nowrap;
    text-decoration: none;
    color: inherit;
    border-radius: 14px;
    padding: 0.6rem 0.75rem;
    transition: background 0.15s ease;
}

a.credit-link:hover {
    background: var(--accent-light);
}

a.credit-link:hover .c-name {
    color: var(--accent);
    text-decoration: underline;
}

a.credit-link:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

.credit img {
    width: 86px;
    height: 86px;
    border-radius: 20px;
    object-fit: contain;
    flex: 0 0 auto;
    background: #fff;
    border: 1px solid var(--line);
    padding: 1px;
}

.credit .c-txt {
    text-align: start;
    /* lets the text column shrink inside the row instead of forcing the
       logo onto its own line */
    min-width: 0;
}

.credit .c-lead {
    display: block;
    font-size: 0.86rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.credit .c-name {
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--text-main);
}

.credit .c-tag {
    display: block;
    font-size: 0.86rem;
    color: var(--text-muted);
    max-width: 30ch;
    line-height: 1.45;
    text-wrap: balance;
}

@media (max-width: 640px) {
    h1 { font-size: 2.1rem; }
    .story-card { padding: 1.75rem 1.1rem; }
    .toc-card { padding: 1.5rem 1rem; }
    main { padding: 0 1rem; }
    .story-figure { margin: 1.5rem 0; }
}

@media (min-width: 900px) {
    .story-card { padding: 3rem 3rem 2.75rem; }
}
/* ---- multi-page shell ---------------------------------------- */

header.compact {
    padding: 1.5rem 1.5rem 2rem;
}

.home-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #c7d2fe;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.3rem 0.6rem;
    border-radius: 8px;
    transition: background 0.2s ease, color 0.2s ease;
}

.home-link:hover {
    background: rgba(255,255,255,0.14);
    color: #ffffff;
}

.home-link:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
}

.story-page {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #a5b4fc;
    margin-bottom: 0.6rem;
}

/* the contents are split into collections, each with its own heading */
.index-group + .index-group {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--line-soft);
}

.index-cat {
    margin: 0 0 0.35rem;
    color: var(--heading);
    font-family: 'Frank Ruhl Libre', serif;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: start;
}

.index-cat-note {
    margin: 0 0 1.25rem;
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    text-align: start;
}

/* the plain-language opening on the landing page: what this collection is
   about, in the words a reader would use themselves */
.lede {
    max-width: var(--measure);
    margin: 0 auto 2rem;
    padding: 0 0.25rem;
}

.lede p {
    margin: 0;
    color: var(--text-body);
    font-size: 1.08rem;
    line-height: 1.85;
    text-align: start;
}

/* the honest note, small and last: these are fables, not treatment */
.disclaimer {
    max-width: 46rem;
    margin: 1.75rem auto 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line-soft);
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.7;
    text-align: center;
}

/* ---- landing page -------------------------------------------- */

.index-list {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.index-link {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.4rem;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    color: var(--text-main);
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.index-link:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent-border);
}

.index-link:hover .index-title {
    color: var(--accent);
}

.index-link:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}

.index-num {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--badge-bg);
    color: var(--accent);
    font-family: 'Frank Ruhl Libre', serif;
    font-size: 1.1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.index-text {
    min-width: 0;
}

.index-title {
    display: block;
    font-family: 'Frank Ruhl Libre', serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--heading-strong);
    line-height: 1.35;
    transition: color 0.2s ease;
}

.index-topic {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.index-count {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent);
    background: var(--accent-light);
    border: 1px solid var(--accent-border);
    border-radius: 9999px;
    padding: 0.1rem 0.6rem;
}

/* ---- reader engagement --------------------------------------- */

.engage,
.engage-bar,
.views-line {
    max-width: 100%;
    min-width: 0;
}

[data-tells] * {
    max-width: 100%;
    box-sizing: border-box;
}

.engage {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: 3rem;
}

.engage-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

/* The widgets carry their own styling and read these variables, so mapping
   them onto the page tokens is all it takes for them to feel native — and to
   follow the light/dark toggle without a second palette. */
[data-tells] {
    /* The widget markup comes from another origin and can carry pixel widths
       wider than a phone. Under RTL that surplus lands on the LEFT and shows
       as a gap beside the page, so keep the mount point and its contents in
       their box and let anything genuinely wide scroll inside itself. */
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;

    --tlx-fg: var(--text-body);
    --tlx-muted: var(--text-muted);
    --tlx-card: var(--bg-card);
    --tlx-border: var(--line);
    --tlx-accent: var(--accent);
    --tlx-accent-fg: var(--bg-card);
    --tlx-radius: var(--radius-md);
}

/* A quiet counter closing the collection on the landing page. */
.views-line {
    display: flex;
    justify-content: center;
    margin-bottom: 2.5rem;
}

/* ---- between-story navigation -------------------------------- */

.story-nav {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
    margin-bottom: 3rem;
}

.story-nav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.15rem;
    padding: 0.9rem 1.1rem;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    color: var(--text-main);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.story-nav a:hover {
    border-color: var(--accent-border);
    background: var(--accent-light);
    color: var(--accent);
}

.story-nav a:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

.story-nav .dir {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}

.story-nav .all {
    flex: 0 0 auto;
    justify-content: center;
    text-align: center;
}

@media (max-width: 560px) {
    .story-nav {
        flex-wrap: wrap;
    }
    .story-nav .all {
        flex: 1 0 100%;
        order: 3;
    }
}

/* ---- footer actions ---------------------------------------------- */

.footer-actions {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
    padding-bottom: 1.75rem;
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: var(--bg-card);
    border: 1px solid var(--accent-border);
    border-radius: 50%;
    color: var(--accent);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.icon-btn:hover {
    background: var(--accent-light);
    transform: translateY(-2px);
}

.icon-btn:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}

.icon-btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
    display: block;
}

/* the button carries no label, so success is shown by swapping the glyph */
.icon-btn .i-check { display: none; }
.icon-btn.ok { color: var(--insight-title); border-color: var(--insight-border); }
.icon-btn.ok .i-share { display: none; }
.icon-btn.ok .i-check[hidden] { display: block; }

.action-toast {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--insight-title);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
    white-space: nowrap;
}

.action-toast.show { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .icon-btn,
    .action-toast {
        transition: none;
    }
}

/* ---- landing hero ------------------------------------------------ */

.hero-figure {
    margin-bottom: 3rem;
}

.hero-figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--line);
    background: var(--line);
    filter: var(--img-filter);
}

.hero-figure figcaption {
    margin-top: 0.85rem;
    font-size: 0.95rem;
    color: var(--text-muted);
    text-align: center;
    font-style: italic;
    text-wrap: balance;
}
/* ---- accessibility ------------------------------------------------ */

/* Text size scales the root, and every size on the page is already in rem,
   so one value moves the whole document proportionally. */

.a11y-underline a {
    text-decoration: underline !important;
}

.a11y-readable body,
.a11y-readable h1,
.a11y-readable h2,
.a11y-readable .story-title,
.a11y-readable .index-title,
.a11y-readable .toc-card h2 {
    font-family: Arial, 'Assistant', system-ui, sans-serif !important;
    letter-spacing: normal;
}

.a11y-readable .dialogue,
.a11y-readable .hero-figure figcaption,
.a11y-readable .story-figure figcaption {
    font-style: normal;
}

/* filters go on the content blocks, never the root: a filter on an ancestor
   makes it the containing block for fixed children, which would strand the
   drawer and the accessibility button mid-page */
.a11y-grayscale header,
.a11y-grayscale main,
.a11y-grayscale footer {
    filter: grayscale(1);
}

.a11y-contrast {
    --bg-primary: #ffffff;
    --bg-card: #ffffff;
    --bg-soft: #ffffff;
    --text-main: #000000;
    --text-body: #000000;
    --text-muted: #1a1a1a;
    --accent: #0000cc;
    --accent-light: #ffffff;
    --accent-border: #000000;
    --badge-bg: #ffffff;
    --heading: #000000;
    --heading-strong: #000000;
    --line: #000000;
    --line-soft: #000000;
    --quote-bg: #ffffff;
    --insight-bg: #ffffff;
    --insight-title: #000000;
    --insight-text: #000000;
    --dialogue-bg: #ffffff;
    --dialogue-text: #000000;
    --img-filter: none;
}

.a11y-contrast .story-card,
.a11y-contrast .toc-card,
.a11y-contrast .index-link {
    border-width: 2px;
}

.a11y-no-motion *,
.a11y-no-motion *::before,
.a11y-no-motion *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
}

/* ---- accessibility drawer ----------------------------------------- */

.a11y-toggle {
    /* pinned to the top right of the viewport, so it stays reachable at any
       scroll position and never crowds the theme toggle on the other side */
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 101;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: #1e1b4b;
    color: #ffffff;
    border: 2px solid #ffffff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: var(--shadow-lg);
    transition: background 0.2s ease, transform 0.2s ease;
}

.a11y-toggle:hover {
    background: var(--accent);
    transform: translateY(-3px);
}

.a11y-toggle:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}

.a11y-toggle svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
    display: block;
}

.a11y-scrim {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    z-index: 110;
}

.a11y-panel {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 120;
    width: min(20rem, 88vw);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.25rem;
    overflow-y: auto;
    background: var(--bg-card);
    border-right: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    /* closed: off-canvas and out of the tab order, without hidden's
       transition-killing display:none */
    visibility: hidden;
    transform: translateX(-100%);
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
}

.a11y-panel.open {
    visibility: visible;
    transform: translateX(0);
    transition: transform 0.25s ease, visibility 0s;
}

.a11y-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--line);
}

.a11y-head h2 {
    font-family: 'Frank Ruhl Libre', serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--heading-strong);
}

.a11y-close {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    background: none;
    border: 1px solid var(--line);
    border-radius: 9px;
    color: var(--text-muted);
    font: inherit;
    font-size: 1rem;
    cursor: pointer;
}

.a11y-close:hover {
    background: var(--accent-light);
    color: var(--accent);
}

.a11y-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
}

.a11y-size {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.a11y-size button {
    flex: 1;
    direction: ltr;   /* keep "A+" from rendering as "+A" under RTL */
    min-height: 44px;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    color: var(--text-main);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.a11y-size button:hover:not(:disabled) {
    background: var(--accent-light);
    border-color: var(--accent-border);
    color: var(--accent);
}

.a11y-size button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.a11y-size output {
    min-width: 3.5rem;
    text-align: center;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    direction: ltr;
    unicode-bidi: isolate;
}

.a11y-opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    width: 100%;
    min-height: 44px;
    padding: 0.55rem 0.85rem;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    color: var(--text-main);
    font: inherit;
    font-weight: 600;
    text-align: start;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.a11y-opt:hover {
    background: var(--accent-light);
    border-color: var(--accent-border);
}

.a11y-opt::after {
    content: '';
    flex: 0 0 auto;
    width: 34px;
    height: 20px;
    border-radius: 999px;
    background: var(--line);
    box-shadow: inset 0 0 0 2px var(--line);
    position: relative;
    transition: background 0.15s ease;
}

.a11y-opt[aria-pressed="true"] {
    border-color: var(--accent-border);
    color: var(--accent);
}

.a11y-opt[aria-pressed="true"]::after {
    background: var(--accent);
}

.a11y-reset {
    min-height: 44px;
    margin-top: 0.4rem;
    background: none;
    border: 1px dashed var(--line);
    border-radius: var(--radius-md);
    color: var(--text-muted);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.a11y-reset:hover {
    border-color: var(--accent-border);
    color: var(--accent);
}

.a11y-panel button:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

/* the footer pair uses the icon-button shell with letters instead of a glyph */
.icon-btn .a-glyph {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;
    direction: ltr;
}

.icon-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

@media (max-width: 560px) {
    .a11y-toggle {
        top: 1rem;
        right: 1rem;
    }
}