/* Bopo site styles: the app's Movable Type (鉛字) tokens (Bopo/App/Theme.swift,
   web/extension-static/popup.html). Dark mode is a pure token swap. */

:root {
    --paper: #F1ECE2;     /* ground */
    --proof: #F7F3EA;     /* cards */
    --rule: #DAD2C3;      /* hairlines */
    --lead: #25292D;      /* ink */
    --muted: #6E685E;     /* secondary text */
    --brass: #876529;     /* eyebrows */
    --cinnabar: #B3402E;  /* the one accent: links */

    --serif: "Source Serif 4", "Iowan Old Style", Georgia, "Noto Serif TC", "Songti TC", serif;
    --han: "Noto Serif TC", "Songti TC", "PMingLiU", serif;
    --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
    :root {
        --paper: #1A1C1E;
        --proof: #232629;
        --rule: #3A3E42;
        --lead: #E9E5DB;
        --muted: #A39C90;
        --brass: #C9A266;
        --cinnabar: #D8654F;
    }
}

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

body {
    background: var(--paper);
    color: var(--lead);
    font: 18px/1.65 var(--serif);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--cinnabar); text-underline-offset: 3px; }

header, main, footer { max-width: 720px; margin: 0 auto; padding: 0 20px; }

header {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding-top: 24px; padding-bottom: 24px;
}
header nav { display: flex; gap: 20px; font: 500 13px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
header nav a { color: var(--muted); text-decoration: none; }
header nav a:hover { color: var(--lead); }

/* The wordmark, annotated with its own vertical ㄅㄛ ㄆㄛ. */
.wordmark { display: flex; align-items: center; gap: 10px; color: var(--lead); text-decoration: none; }
.wordmark img { width: 36px; height: 36px; border-radius: 8px; }
.wordmark b { font-size: 26px; font-weight: 600; letter-spacing: -.02em; }
.wordmark .zy { display: flex; flex-direction: column; font: 8px/1.05 var(--han); color: var(--muted); margin-left: -8px; padding-top: 4px; }

.eyebrow { display: block; font: 500 12px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--brass); margin-bottom: 8px; }

main { padding-top: 32px; padding-bottom: 64px; }
h1 { font-size: 40px; line-height: 1.15; font-weight: 600; letter-spacing: -.01em; margin-bottom: 16px; }
h2 { font-size: 22px; font-weight: 600; margin: 40px 0 10px; padding-top: 24px; border-top: 1px solid var(--rule); }
h3 { font-size: 19px; font-weight: 600; margin-bottom: 6px; }
p, ul { margin-bottom: 14px; }
ul { padding-left: 22px; }
li { margin-bottom: 6px; }
.updated { color: var(--muted); font-size: 15px; }
.han { font-family: var(--han); }

.hero { padding: 40px 0 8px; }
.hero h1 { font-size: 52px; }
.hero .tagline { font-size: 21px; color: var(--muted); max-width: 34em; }

.contact-email { margin: 20px 0 8px; font-size: 22px; }

.support-topics { display: grid; gap: 14px; margin-top: 12px; }
.support-topic { background: var(--proof); border: 1px solid var(--rule); border-radius: 6px; padding: 18px 20px; }
.support-topic p { margin-bottom: 0; }

.notfound { text-align: center; padding-top: 72px; }
.notfound .big { font: 96px/1 var(--han); color: var(--rule); margin-bottom: 12px; }

footer { border-top: 1px solid var(--rule); padding-top: 24px; padding-bottom: 40px; font-size: 15px; color: var(--muted); }
.footer-content { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: baseline; justify-content: space-between; }
.footer-links { display: flex; gap: 18px; }
.footer-links a { color: var(--muted); }

@media (max-width: 560px) {
    body { font-size: 17px; }
    h1, .hero h1 { font-size: 34px; }
    header nav { gap: 14px; }
}

/* ── Home page ───────────────────────────────────────────────────────────
   Taiwan Print accents on the Movable Type base: the iron-window-grille band
   (鐵窗花) between sections and signboard yellow for the saved word. */
:root { --grille: #2F6B5E; --signboard: #E2B340; }
@media (prefers-color-scheme: dark) { :root { --grille: #74B8A6; --signboard: #E8C15A; } }

.home, .home-page header, .home-page footer { max-width: 960px; }
.home .hero { max-width: 720px; }
.soon { font-style: italic; }

.band { color: var(--grille); opacity: .55; margin: 56px 0; }
.band .grille { display: block; width: 100%; height: clamp(16px, 2.8vw, 27px); }

.demo { margin-top: 32px; }
.demo-controls { display: flex; align-items: center; gap: 18px; margin-bottom: 10px; }
.demo-controls .eyebrow { margin: 0; }
.demo-controls label { display: flex; align-items: center; gap: 6px; font-size: 16px; }
.demo-controls input { accent-color: var(--lead); }
.demo-page {
    background: var(--proof); border: 1px solid var(--rule); border-bottom-width: 4px; border-radius: 6px;
    padding: 28px 28px 24px; display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 28px; align-items: center;
}
.demo-text { font: 34px/2 var(--han); margin: 0; }
.demo-text bopo-z, .demo-text rt { color: var(--muted); }
.demo .above { display: none; }
.demo:has(#pos-above:checked) .beside { display: none; }
.demo:has(#pos-above:checked) .above { display: block; }
.demo-saved { background: color-mix(in srgb, var(--signboard) 45%, transparent); border-radius: 4px; }
.save-card { background: var(--paper); border: 1.5px solid var(--lead); border-radius: 4px; padding: 16px 18px; }
.save-word { font: 600 24px/1.3 var(--han); }
.save-zy { display: block; font-size: 13px; font-weight: 400; color: var(--muted); }
.save-gloss { font-size: 15px; color: var(--muted); margin: 6px 0 14px; }
.save-button { background: var(--lead); color: var(--paper); text-align: center; border-radius: 4px; padding: 8px; font-weight: 600; font-size: 15px; }
.caption { font-size: 15px; color: var(--muted); margin-top: 10px; }

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.step img { display: block; width: 100%; height: auto; border-radius: 22px; border: 1px solid var(--rule); margin-bottom: 18px; }
.step h2, .section-title { border: 0; padding: 0; margin: 0 0 8px; }
.step p { font-size: 16px; }
.section-title { font-size: 30px; margin-bottom: 24px; }

.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 32px; }
.feature-grid p { font-size: 16px; color: var(--muted); }

.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.plan { background: var(--proof); border: 1px solid var(--rule); border-radius: 6px; padding: 22px 24px; }
.plan-plus { border: 1.5px solid var(--lead); border-bottom-width: 4px; }
.plan ul { margin: 8px 0 0; }
.plan-note { font-size: 15px; color: var(--muted); margin: 12px 0 0; }

.credits { font-size: 13px; margin-top: 14px; }
.credits a { color: var(--muted); }

@media (max-width: 760px) {
    .demo-page { grid-template-columns: minmax(0, 1fr); }
    .demo-text { font-size: 26px; }
    .steps, .feature-grid, .plans { grid-template-columns: minmax(0, 1fr); }
    .step img { max-width: 320px; }
}