/* Shared visual system: each palette maps to these variables so readers can personalize the whole site. */
:root {
    color-scheme: light;
    --page: #f2eee5;
    --sheet: #fffdf8;
    --ink: #302b25;
    --muted: #81776c;
    --accent: #8b5c3d;
    --accent-hover: #68432e;
    --line: #e8e0d5;
    --soft: #f7f2e9;
    --shadow: 0 22px 70px rgb(62 46 28 / 9%);
    --reader-size: 1.22rem;
    --reader-font: Georgia, "Times New Roman", serif;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink);
    background: var(--page);
}
:root[data-theme="night"] { color-scheme: dark; --page:#17191b; --sheet:#222528; --ink:#e8e3d9; --muted:#aaa49a; --accent:#d3a678; --accent-hover:#ecc49b; --line:#3a3d40; --soft:#2b2e31; --shadow:0 22px 70px rgb(0 0 0 / 24%); }
:root[data-theme="sage"] { --page:#e9eee7; --sheet:#fbfcf8; --ink:#28332b; --muted:#718075; --accent:#54745b; --accent-hover:#38563f; --line:#dce5da; --soft:#f1f5ef; --shadow:0 22px 70px rgb(45 65 48 / 9%); }
:root[data-theme="rose"] { --page:#f3e9e8; --sheet:#fffafa; --ink:#382b2b; --muted:#90797a; --accent:#9a5c69; --accent-hover:#75414d; --line:#eddddd; --soft:#fbf1f0; --shadow:0 22px 70px rgb(88 51 55 / 9%); }

/* Global sizing and keyboard focus are kept consistent for mouse, touch, and keyboard users. */
* { box-sizing:border-box; }
body { min-width:320px; min-height:100vh; margin:0; color:var(--ink); background:var(--page); transition:background-color .2s,color .2s; }
a { color:var(--accent); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover { color:var(--accent-hover); }
button, input, select, textarea { font:inherit; }
button, select, input[type="color"] { cursor:pointer; }
:focus-visible { outline:3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset:3px; }
.site-shell { width:min(1160px, calc(100% - 48px)); margin:0 auto; }
.site-header { min-height:96px; display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid color-mix(in srgb, var(--line) 72%, transparent); }
.brand { display:flex; align-items:center; gap:12px; color:var(--ink); text-decoration:none; flex-shrink:0; }
.brand-mark { width:42px; height:42px; display:grid; place-items:center; border:1px solid color-mix(in srgb, var(--accent) 34%, var(--line)); border-radius:50%; color:var(--accent); font-size:19px; }
.brand strong, .brand small { display:block; }
.brand strong { font:600 16px/1.25 Georgia,serif; letter-spacing:.02em; }
.brand small { margin-top:3px; color:var(--muted); font-size:11px; letter-spacing:.045em; }
.header-actions { display:flex; align-items:center; justify-content:flex-end; gap:10px; }
.nav-link, .logout-button, .appearance-menu summary { min-height:40px; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:0 12px; border:1px solid transparent; border-radius:999px; color:var(--ink); background:transparent; text-decoration:none; font-size:13px; font-weight:550; white-space:nowrap; }
.nav-link:hover, .appearance-menu summary:hover { border-color:var(--line); color:var(--ink); background:var(--sheet); }
.logout-form { margin:0; }
.logout-button { padding:0 17px; border-color:var(--accent); color:var(--sheet); background:var(--accent); }
.logout-button:hover { border-color:var(--accent-hover); background:var(--accent-hover); }

/* Reader controls stay compact in the top-right and remember choices in this browser. */
.appearance-menu { position:relative; }
.appearance-menu summary { cursor:pointer; list-style:none; }
.appearance-menu summary::-webkit-details-marker { display:none; }
.appearance-popover { position:absolute; z-index:5; top:calc(100% + 12px); right:0; width:min(340px, calc(100vw - 32px)); padding:20px; border:1px solid var(--line); border-radius:18px; background:var(--sheet); box-shadow:var(--shadow); }
.popover-title { margin:0 0 14px; font:600 18px/1.3 Georgia,serif; }
.setting-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-top:1px solid var(--line); color:var(--muted); font-size:13px; }
.setting-row select { max-width:170px; padding:8px 28px 8px 10px; border:1px solid var(--line); border-radius:9px; color:var(--ink); background:var(--sheet); }
.size-controls { display:flex; align-items:center; gap:9px; color:var(--ink); }
.size-controls button { width:34px; height:32px; border:1px solid var(--line); border-radius:9px; color:var(--ink); background:var(--soft); font-weight:700; }
.size-controls output { min-width:42px; text-align:center; font-variant-numeric:tabular-nums; }
.color-settings { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; padding:13px 0; border-top:1px solid var(--line); }
.color-settings label { display:grid; justify-items:center; gap:7px; color:var(--muted); font-size:11px; }
.color-settings input { width:36px; height:32px; padding:2px; border:1px solid var(--line); border-radius:8px; background:var(--sheet); }
.reset-appearance { padding:0; border:0; color:var(--accent); background:none; font-size:12px; text-decoration:underline; text-underline-offset:3px; }
.page-content { min-height:calc(100vh - 166px); padding:46px 0 70px; }
.site-footer { min-height:70px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-top:1px solid color-mix(in srgb, var(--line) 72%, transparent); color:var(--muted); font-size:11px; letter-spacing:.03em; }
.eyebrow { color:var(--accent); font-size:11px; font-weight:700; letter-spacing:.17em; text-transform:uppercase; }
.page-heading { margin:10px 0 0; font:500 clamp(34px,5vw,54px)/1.08 Georgia,"Times New Roman",serif; letter-spacing:-.035em; }
.page-intro { max-width:580px; margin:13px 0 0; color:var(--muted); font-size:15px; line-height:1.7; }

/* Story shelf uses calm cards with generous whitespace to make choosing a read feel inviting. */
.welcome { padding:20px 0 32px; }
.story-shelf { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:18px; margin-top:30px; }
.story-card { position:relative; min-height:190px; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; padding:24px; border:1px solid var(--line); border-radius:17px; color:var(--ink); background:var(--sheet); box-shadow:0 8px 24px rgb(55 42 28 / 3%); text-decoration:none; transition:transform .2s,box-shadow .2s,border-color .2s; }
.story-card::after { position:absolute; right:-25px; bottom:-57px; width:150px; height:150px; border:1px solid color-mix(in srgb, var(--accent) 18%, transparent); border-radius:50%; content:""; }
.story-card:hover { transform:translateY(-3px); border-color:color-mix(in srgb, var(--accent) 40%, var(--line)); color:var(--ink); box-shadow:var(--shadow); }
.story-card-number { color:var(--muted); font:italic 14px Georgia,serif; }
.story-card h2 { max-width:90%; margin:25px 0 0; font:500 26px/1.2 Georgia,"Times New Roman",serif; }
.story-card-cta { margin-top:14px; color:var(--accent); font-size:12px; font-weight:650; letter-spacing:.04em; }
.empty-state { margin-top:28px; padding:38px; border:1px dashed var(--line); border-radius:18px; text-align:center; }
.empty-state p { margin:8px 0 0; color:var(--muted); }

/* The story itself is centered like a printed page; its size and typeface follow the reader controls. */
.reading-page { max-width:900px; margin:0 auto; }
.back-link { display:inline-flex; align-items:center; gap:8px; margin:0 0 20px 5px; color:var(--muted); font-size:13px; text-decoration:none; }
.back-link:hover { color:var(--accent); }
.book-page { position:relative; padding:clamp(34px,7vw,76px) clamp(24px,9vw,110px) clamp(42px,8vw,90px); border:1px solid color-mix(in srgb, var(--line) 80%, transparent); border-radius:5px 18px 18px 5px; background:var(--sheet); box-shadow:var(--shadow); }
.book-page::before { position:absolute; top:0; bottom:0; left:11px; width:1px; background:color-mix(in srgb, var(--accent) 16%, transparent); content:""; }
.book-kicker { margin:0 0 22px; color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.2em; text-align:center; text-transform:uppercase; }
.book-title { max-width:680px; margin:0 auto 38px; font:500 clamp(34px,6vw,58px)/1.12 Georgia,"Times New Roman",serif; letter-spacing:-.035em; text-align:center; }
.story-content { max-width:660px; margin:0 auto; color:var(--ink); font-family:var(--reader-font); font-size:var(--reader-size); line-height:1.9; text-align:center; overflow-wrap:anywhere; }
.story-content > * { text-align:center; }
.story-content p { margin:0 auto 1.4em; }
.story-content h1,.story-content h2,.story-content h3,.story-content h4 { margin:1.7em auto .7em; font-weight:500; line-height:1.25; }
.story-content blockquote { margin:1.5em auto; padding:.25em 1.2em; border-left:2px solid var(--accent); color:var(--muted); font-style:italic; }
.story-content ul,.story-content ol { display:inline-block; max-width:100%; margin:0 auto 1.4em; padding-left:1.4em; text-align:left; }
.story-content li { padding:.2em 0; }
.story-content img { display:block; max-width:100%; max-height:680px; margin:1.8em auto; border-radius:5px; }
.story-content pre { max-width:100%; overflow:auto; padding:1em; border-radius:10px; background:var(--soft); font-size:.8em; text-align:left; }
.story-content pre code { text-align:left; }
.story-content table { width:100%; border-collapse:collapse; font-size:.85em; }
.story-content th,.story-content td { padding:.55em; border-bottom:1px solid var(--line); }
.responses { max-width:700px; margin:54px auto 0; }
.responses-heading { margin:0 0 20px; font:500 29px/1.2 Georgia,serif; text-align:center; }
.centered-note { text-align:center; }
.response-card { margin:12px 0; padding:17px 20px; border:1px solid var(--line); border-radius:13px; background:var(--sheet); }
.response-meta { display:flex; justify-content:space-between; gap:10px; color:var(--muted); font-size:12px; }
.response-meta-right { display:inline-flex; align-items:center; gap:10px; }
.comment-edit-toggle { width:30px; height:30px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; color:var(--accent); background:var(--soft); font-size:16px; }
.comment-edit-toggle:hover { border-color:var(--accent); background:var(--sheet); }
.comment-edit-form[hidden] { display:none; }
.comment-edit-form textarea { width:100%; min-height:110px; margin-top:12px; padding:12px; border:1px solid var(--line); border-radius:10px; color:var(--ink); background:var(--sheet); font:inherit; line-height:1.6; resize:vertical; }
.comment-edit-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.comment-edit-actions .primary-button { min-height:36px; margin-top:10px; padding:0 17px; }
.comment-cancel { min-height:36px; margin-top:10px; padding:0 15px; border:1px solid var(--line); border-radius:999px; color:var(--ink); background:var(--sheet); }
.comment-save-status { color:var(--muted); font-size:12px; }
.response-body { margin:10px 0 0; white-space:pre-wrap; line-height:1.65; }

/* Forms and admin pages use the same palette while retaining clear, familiar controls. */
.form-card,.admin-card { max-width:760px; margin:12px auto 0; padding:clamp(24px,5vw,42px); border:1px solid var(--line); border-radius:18px; background:var(--sheet); box-shadow:0 12px 38px rgb(55 42 28 / 4%); }
.auth-card { max-width:500px; margin:8vh auto 0; }
.form-card label { display:block; margin:18px 0 7px; color:var(--muted); font-size:13px; font-weight:600; }
.form-card input,.form-card textarea { width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:10px; color:var(--ink); background:var(--sheet); }
.form-card textarea { min-height:150px; resize:vertical; line-height:1.6; }
.primary-button { min-height:46px; margin-top:22px; padding:0 21px; border:1px solid var(--accent); border-radius:999px; color:var(--sheet); background:var(--accent); font-size:14px; font-weight:650; }
.primary-button:hover { border-color:var(--accent-hover); background:var(--accent-hover); }
.primary-link { display:inline-flex; min-height:44px; align-items:center; justify-content:center; margin:8px 0 4px; padding:0 20px; border:1px solid var(--accent); border-radius:999px; color:var(--sheet); background:var(--accent); font-size:14px; font-weight:650; text-decoration:none; }
.primary-link:hover { border-color:var(--accent-hover); background:var(--accent-hover); }
.message { margin:16px 0; padding:12px 15px; border:1px solid var(--line); border-radius:11px; color:var(--ink); background:var(--soft); font-size:14px; }
.admin-table-wrap { overflow-x:auto; margin-top:22px; border:1px solid var(--line); border-radius:13px; }
.admin-table { width:100%; border-collapse:collapse; background:var(--sheet); text-align:left; }
.admin-table th,.admin-table td { padding:15px 17px; border-bottom:1px solid var(--line); }
.admin-table th { color:var(--muted); background:var(--soft); font-size:11px; letter-spacing:.1em; text-transform:uppercase; }
.admin-table tr:last-child td { border-bottom:0; }
.muted { color:var(--muted); }
.permission-row { display:flex; align-items:center; gap:12px; padding:14px 4px; border-bottom:1px solid var(--line); cursor:pointer; }
.permission-row input { width:18px; height:18px; accent-color:var(--accent); }
.permission-slug { margin-left:auto; color:var(--muted); font:12px ui-monospace,monospace; }
.account-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:17px; margin-top:26px; }
.account-card,.delete-account-card { margin:0; }
.account-section-title { margin:8px 0 12px; font:500 25px/1.2 Georgia,serif; }
.account-username { margin:18px 0 8px; font:500 22px Georgia,serif; }
.account-card .primary-button { margin-top:16px; }
.account-card .form-card label { margin-top:14px; }
.delete-account-card { grid-column:1/-1; padding:24px 28px; border:1px solid #e9c7c2; border-radius:17px; background:color-mix(in srgb, #b43e35 4%, var(--sheet)); }
.delete-account-card .eyebrow { color:#a83d35; }
.delete-account-card p:not(.eyebrow) { color:var(--muted); line-height:1.6; }
.delete-account-card label { display:block; margin:15px 0 7px; color:var(--muted); font-size:13px; font-weight:600; }
.delete-account-card input { width:min(100%,420px); padding:12px 14px; border:1px solid var(--line); border-radius:10px; color:var(--ink); background:var(--sheet); }
.delete-button { display:block; min-height:44px; margin-top:15px; padding:0 20px; border:1px solid #a8322a; border-radius:999px; color:#fff; background:#a8322a; font-size:14px; font-weight:700; }
.delete-button:hover { border-color:#7f241f; background:#7f241f; }
.admin-management-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:17px; margin-top:26px; }
.admin-management-grid > .form-card,.admin-management-grid > .admin-card,.admin-management-grid > .delete-account-card { width:100%; min-width:0; max-width:none; margin:0; }
.admin-management-grid > .story-permissions-tile { grid-column:1/-1; }
.admin-status-card { margin:0; }
.admin-management-grid .delete-account-card { grid-column:auto; }
.admin-management-grid .delete-account-card input { display:block; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

@media (max-width:760px) {
    .site-shell { width:min(100% - 30px, 650px); }
    .site-header { min-height:auto; align-items:flex-start; flex-direction:column; padding:17px 0; gap:14px; }
    .header-actions { width:100%; flex-wrap:wrap; justify-content:flex-start; gap:5px; }
    .header-actions .nav-link,.appearance-menu summary { min-height:36px; padding:0 9px; font-size:12px; }
    .appearance-popover { left:0; right:auto; }
    .page-content { min-height:calc(100vh - 205px); padding:34px 0 55px; }
    .book-page { padding:40px 24px 48px 30px; }
    .admin-management-grid { grid-template-columns:1fr; }
    .admin-management-grid > .story-permissions-tile { grid-column:1; }
    .book-page::before { left:8px; }
    .story-content { line-height:1.8; }
    .site-footer { align-items:flex-start; flex-direction:column; justify-content:center; gap:5px; padding:16px 0; }
    .admin-table th,.admin-table td { padding:12px 10px; font-size:13px; }
    .account-grid { grid-template-columns:1fr; }
    .delete-account-card { grid-column:auto; padding:22px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }