/* Shared stylesheet for the generated content pages (same parchment palette as the landing page). */
:root {
    --bg: #f7f1e3;
    --surface: #fffdf7;
    --ink: #1f2933;
    --muted: #5b6470;
    --brand: #6f4300;
    --brand-soft: #fff3cd;
    --border: rgba(122, 75, 0, 0.18);
    --shadow: 0 10px 30px rgba(78, 52, 16, 0.10);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #1b1814;
        --surface: #26221c;
        --ink: #ece6da;
        --muted: #b3aa9a;
        --brand: #f0c674;
        --brand-soft: #3a3020;
        --border: rgba(240, 198, 116, 0.22);
        --shadow: none;
    }
}

/* The app's font (copied from its moko-resources by the generator — see KETER_FONT_FILE). */
@font-face {
    font-family: "Keter";
    src: url("/assets/Keter-Medium.ttf") format("truetype");
    font-display: swap;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: "Keter", "Times New Roman", serif;
    font-size: 19px;
    line-height: 1.75;
    background: var(--bg);
    color: var(--ink);
}

a { color: var(--brand); }

.container {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 16px;
}

main.container { padding-top: 24px; padding-bottom: 32px; }

h1, h2, h3 { color: var(--brand); line-height: 1.3; }
h1 { font-size: clamp(28px, 6vw, 40px); margin: 8px 0 16px; }
h2 { font-size: 24px; margin: 32px 0 8px; }
h3 { font-size: 19px; margin: 0 0 6px; }

hr { border: 0; border-top: 1px solid var(--border); margin: 24px 0; }

/* Header */
.site-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}
.header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 60px;
    flex-wrap: wrap;
}
.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 19px;
    text-decoration: none;
    color: var(--brand);
}
.brand img { border-radius: 8px; }
.site-nav { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.site-nav a { text-decoration: none; font-weight: 500; }
.nav-cta {
    background: var(--brand);
    color: var(--surface) !important;
    padding: 4px 14px;
    border-radius: 999px;
}

/* Breadcrumbs */
.breadcrumbs ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 14px;
    color: var(--muted);
}
.breadcrumbs li + li::before { content: "‹"; margin-inline-end: 6px; }

/* Home */
.hero .lead { font-size: 19px; }

/* Cards */
.cards {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 18px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
}
.card h3 a { text-decoration: none; }
.card p { margin: 0 0 12px; font-size: 15px; color: var(--muted); flex: 1; }
.card-links { display: flex; gap: 16px; font-size: 15px; }

/* Guides */
.guide p { overflow-wrap: anywhere; }
.search-expr { text-decoration: none; }
.search-expr code {
    font-family: inherit;
    background: var(--brand-soft);
    border-radius: 6px;
    padding: 1px 6px;
    unicode-bidi: isolate;
}
.search-expr:hover code { text-decoration: underline; }

/* Data collections */
.entries { list-style: none; padding: 0; }
.entries > li {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 12px;
}
.entries h3 { margin-bottom: 0; }
.entries p { margin: 0 0 4px; color: var(--muted); }
.entries p.label { color: var(--ink); margin-top: 6px; }
.entries ul { margin: 0; padding-inline-start: 20px; }
.plain > li { margin-bottom: 8px; }
.unmarked { list-style: none; padding: 0; }
.ref { white-space: nowrap; }
.label { font-weight: 500; }
.muted { color: var(--muted); font-size: 15px; white-space: nowrap; }
details.answer { margin-top: 2px; }
details.answer summary {
    cursor: pointer;
    color: var(--brand);
    font-size: 15px;
    width: fit-content;
}
details.answer[open] { font-weight: 700; }
details.answer[open] summary { font-weight: 400; }

table.pairs {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    font-size: 16px;
}
table.pairs th, table.pairs td {
    border: 1px solid var(--border);
    padding: 6px 10px;
    text-align: start;
    vertical-align: top;
}
table.pairs th { background: var(--brand-soft); }
li.mcq { margin-bottom: 18px; }
li.mcq > p { margin: 0 0 4px; }
ol.options { list-style: none; padding-inline-start: 8px; margin: 0; }

.add-answer {
    margin: 4px 0;
    padding: 6px 10px;
    border: 1px dashed var(--brand);
    border-radius: 10px;
    background: var(--brand-soft);
    font-size: 16px;
    width: fit-content;
}

/* Ads */
.ad-unit { margin: 28px 0; min-height: 100px; }
.ad-label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
/* AdSense marks units it couldn't fill; collapse them (with their label) instead of leaving a gap. */
ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }
.ad-unit:has(ins.adsbygoogle[data-ad-status="unfilled"]) { display: none; }

/* Pager */
.pager { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.pager a, .pager .current {
    min-width: 34px;
    text-align: center;
    padding: 2px 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    text-decoration: none;
}
.pager .current { background: var(--brand); color: var(--surface); }

/* Names */
ul.letters { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 14px; }
ul.letters a { font-weight: 700; font-size: 22px; }
.credit {
    background: var(--brand-soft);
    border-inline-start: 4px solid var(--brand);
    padding: 8px 12px;
    border-radius: 6px;
}
article.entry { border-bottom: 1px solid var(--border); padding-bottom: 8px; }
article.entry h3 { margin: 16px 0 4px; }
article.entry ul { margin: 0; padding-inline-start: 20px; }
article.entry p { margin: 4px 0; overflow-wrap: anywhere; }

/* Call to action */
.cta {
    margin-top: 40px;
    background: var(--brand-soft);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 18px;
}
.cta p { margin-top: 0; }
.cta-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.button {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 10px;
    border: 1px solid var(--brand);
    text-decoration: none;
    font-weight: 500;
}
.button.primary { background: var(--brand); color: var(--surface); }

/* Privacy */
.doc-embed {
    width: 100%;
    height: 75vh;
    min-height: 480px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
}

/* Footer */
.site-footer {
    border-top: 1px solid var(--border);
    background: var(--surface);
    font-size: 14px;
    color: var(--muted);
    padding: 16px 0;
}
.site-footer nav { display: flex; flex-wrap: wrap; gap: 16px; }