/* Newberry Bible: the site's pages and the reader */

:root {
    --paper: #fbf8f1;
    --page: #ffffff;
    --ink: #1d1a16;
    --ink-soft: #5b544a;
    --rule: #e2dccf;
    --accent: #7a2e1f;          /* a deep red, as Bible edges and ribbons */
    --accent-soft: #f3e4dd;
    --focus: #2b5fae;
    --serif: "EB Garamond", Georgia, "Times New Roman", serif;
    --sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body { margin: 0; }

body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.55;
}

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

.inline { display: inline; margin: 0; }

/* header */

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 24px;
    border-bottom: 1px solid var(--rule);
    background: var(--page);
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--ink);
}

.brand-mark {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: var(--accent);
    color: #fff;
    font-family: var(--serif);
    font-size: 20px;
    font-weight: 600;
}

.brand-name { font-family: var(--serif); font-size: 21px; font-weight: 600; }

.site-nav { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

.site-nav a { color: var(--ink-soft); text-decoration: none; font-weight: 500; }

.site-nav a.active, .site-nav a:hover { color: var(--ink); }

.link-button {
    border: 0;
    background: none;
    padding: 0;
    color: var(--ink-soft);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
}

.button {
    display: inline-block;
    padding: 10px 18px;
    border: 0;
    border-radius: 8px;
    background: var(--accent);
    color: #fff !important;
    font: 600 15px var(--sans);
    text-decoration: none;
    cursor: pointer;
}

.button.small { padding: 6px 12px; font-size: 14px; }

.button.ghost { background: transparent; color: var(--accent) !important; border: 1px solid var(--accent); }

/* home and plain pages */

.hero {
    max-width: 960px;
    margin: 0 auto;
    padding: 72px 24px 48px;
    text-align: center;
}

.hero h1 {
    font-family: var(--serif);
    font-size: clamp(36px, 6vw, 60px);
    font-weight: 600;
    line-height: 1.1;
    margin: 0 0 16px;
}

.hero p.lead { font-size: 19px; color: var(--ink-soft); max-width: 640px; margin: 0 auto 28px; }

.hero .actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* the iPad app, coming: red leather and gold, as its icon */
.app-promo {
    background: linear-gradient(160deg, #8e3424 0%, #6a2116 60%, #511910 100%);
    color: #f6ecd8;
    margin: 8px 0 32px;
    overflow: hidden;
}

.app-promo-inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 48px 24px;
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 40px;
    align-items: center;
}

.app-promo-name { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }

.app-promo-name img {
    border-radius: 22%;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    flex: none;
}

.app-promo-eyebrow {
    margin: 0 0 2px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #e7c27a;
}

.app-promo h2 {
    font-family: var(--serif);
    font-size: clamp(32px, 5vw, 44px);
    font-weight: 600;
    line-height: 1.05;
    margin: 0;
    color: #f2d58f;
}

.app-promo p { font-size: 18px; margin: 0 0 14px; }

.app-promo ul { margin: 0 0 18px; padding-left: 20px; }

.app-promo li { margin: 4px 0; }

.app-promo li::marker { color: #e7c27a; }

.app-promo .app-promo-small { font-size: 15px; color: #e6d3c4; margin: 0; }

.app-promo-ipad {
    width: 100%;
    height: auto;
    margin: -24px 0 -56px;          /* standing a little out of the band */
    filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.3));
}

@media (max-width: 760px) {
    .app-promo-inner { grid-template-columns: 1fr; gap: 24px; padding: 36px 16px; }
    .app-promo-ipad { max-width: 300px; margin: 0 auto -48px; }
}

.features {
    max-width: 960px;
    margin: 0 auto;
    padding: 24px 24px 64px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}

.feature {
    background: var(--page);
    border: 1px solid var(--rule);
    border-radius: 10px;
    padding: 20px;
}

.feature h3 { font-family: var(--serif); font-size: 21px; margin: 0 0 6px; }

.feature p { margin: 0; color: var(--ink-soft); }

.prose {
    max-width: 720px;
    margin: 0 auto;
    padding: 48px 24px 64px;
}

.prose h1 { font-family: var(--serif); font-size: 40px; margin: 0 0 12px; }

.prose h2 { font-family: var(--serif); font-size: 26px; margin: 32px 0 8px; }

.prose li { margin-bottom: 6px; }

/* the OneNote page's picture, beside its introduction */
.onenote-figure {
    float: right;
    width: 260px;
    margin: 6px 0 16px 24px;
}

.onenote-figure img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    border: 1px solid var(--rule);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

.onenote-figure figcaption { font-size: 14px; color: var(--ink-soft); margin-top: 8px; }

.onenote-figure .link-button { color: var(--accent); text-decoration: underline; display: block; margin-top: 4px; }

.prose h2 { clear: none; }

.photo-dialog {
    width: min(900px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: #fff;
    overflow: auto;
}

.photo-dialog::backdrop { background: rgba(30, 26, 20, 0.6); }

.photo-dialog img { display: block; width: 100%; height: auto; }

.photo-dialog .card-close {
    position: sticky;
    top: 8px;
    float: right;
    margin: 8px 8px -44px 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    z-index: 1;
}

@media (max-width: 640px) {
    .onenote-figure { float: none; width: 100%; max-width: 320px; margin: 0 auto 20px; }
}

.prose .sub { color: var(--ink-soft); font-size: 14px; }

.site-footer {
    border-top: 1px solid var(--rule);
    padding: 24px;
    text-align: center;
    color: var(--ink-soft);
    font-size: 14px;
}

.site-footer p { margin: 4px 0; }

/* the admin page */

.admin { max-width: 1100px; margin: 0 auto; padding: 32px 24px 64px; }

.admin h1 { font-family: var(--serif); font-size: 34px; margin: 0; }

.admin .sub { color: var(--ink-soft); }

.admin-search { display: flex; gap: 8px; align-items: center; margin: 16px 0; flex-wrap: wrap; }

.admin-search input {
    padding: 8px 10px;
    border: 1px solid var(--rule);
    border-radius: 8px;
    font: 15px var(--sans);
    min-width: 240px;
}

.table-wrap { overflow-x: auto; }

.admin-table { width: 100%; border-collapse: collapse; background: var(--page); border: 1px solid var(--rule); }

.admin-table th, .admin-table td { padding: 8px 12px; border-bottom: 1px solid var(--rule); text-align: left; white-space: nowrap; }

.admin-table th { font-size: 13px; color: var(--ink-soft); font-weight: 600; background: #f6f2e9; }

.admin-table .num { text-align: right; }

.tag { font-size: 11px; padding: 1px 6px; border-radius: 4px; background: var(--accent-soft); color: var(--accent); }

.link-button.danger { color: #a1260f; }

.admin nav[role=navigation] { margin-top: 16px; }

/* forms */

.card {
    max-width: 420px;
    margin: 56px auto;
    padding: 28px;
    background: var(--page);
    border: 1px solid var(--rule);
    border-radius: 12px;
}

.card h1 { font-family: var(--serif); font-size: 30px; margin: 0 0 18px; }

.field { margin-bottom: 14px; }

.field label { display: block; font-weight: 500; margin-bottom: 4px; }

.field input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--rule);
    border-radius: 8px;
    font: 16px var(--sans);
    background: #fff;
}

.field input:focus { outline: 2px solid var(--focus); outline-offset: 0; border-color: transparent; }

.check { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }

.error { color: #a1260f; font-size: 14px; margin-top: 4px; }

.status { background: #e9f3e6; color: #2c5a22; padding: 10px 12px; border-radius: 8px; margin-bottom: 14px; }

.card .alt { margin-top: 16px; font-size: 14px; color: var(--ink-soft); }

/* Contact, the account, the policies */
.card.wide { max-width: 560px; }
.card .alt-top { color: var(--ink-soft); margin: -6px 0 18px; }
.field textarea {
    display: block; width: 100%; box-sizing: border-box; padding: 10px 12px; font: inherit;
    border: 1px solid var(--rule); border-radius: 8px; background: #fff;
}
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.account-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 8px; }
.account-facts dt { color: var(--ink-soft); }
.account-facts dd { margin: 0; }
.danger { margin-top: 28px; padding: 18px; border: 1px solid #e3b3a8; border-radius: 10px; background: #fdf4f1; }
.danger h2 { font-family: var(--serif); font-size: 22px; margin: 0 0 8px; color: #8a1f12; }
.check { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 16px; font-size: 15px; }
.check input { margin-top: 4px; }
.button.danger-button { background: #a1260f; border-color: #a1260f; }
.button.danger-button:disabled { opacity: 0.45; cursor: default; }
.flash { max-width: 720px; margin: 16px auto 0; background: #e9f3e6; color: #2c5a22; padding: 10px 14px; border-radius: 8px; }
.policy h3 { font-size: 17px; margin: 20px 0 4px; }
.data-table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 8px 0 16px; }
.data-table th, .data-table td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--rule); }
.data-table th { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }

/* the reader */

@font-face {
    font-family: Schola;                       /* the printed page's own typeface (TeX Gyre Schola) */
    src: url("../fonts/texgyreschola-regular.otf") format("opentype");
    font-style: normal;
}

@font-face {
    font-family: Schola;
    src: url("../fonts/texgyreschola-italic.otf") format("opentype");
    font-style: italic;
}

.sheet canvas.marks { position: absolute; display: block; pointer-events: none; }

/* Newberry's notes in the right margin: laid out in the page's own points, scaled with the page */
.sheet .bible { position: absolute; width: 396px; height: 612px; transform-origin: 0 0; pointer-events: none; }

.bnote {
    position: absolute;
    left: 334.2px;
    width: 43.6px;
    font: 5.4px/1.12 Schola, Georgia, serif;
    color: #141414;
    padding-left: 3px;
    text-indent: -3px;                         /* a note's later lines hang in */
    overflow-wrap: break-word;
}

/* (held to the screen as it is seen: 100vh in Safari on the iPad and iPhone is the height behind its
   address and tab bars too, so the page ran taller than the screen and Safari slid the top under them) */
body.reader-page {
    position: fixed; inset: 0;
    height: 100vh; height: 100dvh;
    display: flex; flex-direction: column; overflow: hidden;
}

/* the iPhone: the site's banner and the reader's tools each one slim line; the tools that don't fit
   are a swipe to the side away */
.reader-bar .phone-only { display: none; }
@media (max-width: 640px) {
    /* the banner's own line goes: its home mark starts the tools' line, the account ends it */
    .reader-page .site-header { display: none; }
    .reader-bar .phone-only { display: flex; flex: 0 0 auto; align-items: center; }
    .reader-bar .bar-home { text-decoration: none; margin-right: 4px; }
    .reader-bar .bar-home .brand-mark { width: 26px; height: 26px; font-size: 17px; }
    .reader-bar .bar-link { color: var(--ink-soft); font-size: 13px; font-weight: 500; text-decoration: none; padding: 0 6px; }
    .reader-bar {
        flex-wrap: nowrap; overflow-x: auto; gap: 2px; padding: 4px 6px;
        scrollbar-width: none; -webkit-overflow-scrolling: touch;
    }
    .reader-bar::-webkit-scrollbar { display: none; }
    .reader-bar .group { flex: 0 0 auto; gap: 2px; }
    .reader-bar .title, .reader-bar .sep, .reader-bar .sync { display: none; }
    .reader-bar button, .reader-bar select { height: 30px; min-width: 30px; padding: 0 6px; font-size: 13px; }
    .reader-bar #book { max-width: 112px; }
    .swatch { width: 20px !important; min-width: 20px !important; height: 20px !important; }
}

.reader-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-bottom: 1px solid var(--rule);
    background: var(--page);
    flex-wrap: wrap;
}

.reader-bar .group { display: flex; align-items: center; gap: 4px; }

.reader-bar .sep { width: 1px; height: 24px; background: var(--rule); margin: 0 6px; }

.reader-bar button, .reader-bar select {
    height: 32px;
    min-width: 32px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--ink);
    font: 500 14px var(--sans);
    cursor: pointer;
}

.reader-bar select { border-color: var(--rule); background: #fff; }

.reader-bar button:hover { background: #f1ede4; }

.reader-bar button.on { background: var(--accent-soft); border-color: #e2c4b8; }

.reader-bar button:disabled { opacity: 0.4; cursor: default; }

.reader-bar .title { font-family: var(--serif); font-size: 19px; font-weight: 600; min-width: 140px; text-align: center; }

.swatch {
    width: 22px !important;
    min-width: 22px !important;
    height: 22px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
}

.swatch.on { outline: 2px solid var(--focus); outline-offset: 2px; }

.reader-bar .note { color: var(--ink-soft); font-size: 13px; }

.reader-bar .sync { margin-left: auto; color: var(--ink-soft); font-size: 13px; }

.reader-stage {
    flex: 1;
    overflow: auto;
    scrollbar-gutter: stable;       /* (room kept for the scrollbar: its coming and going moves nothing) */
    -webkit-overflow-scrolling: touch;
    background: #e9e5dc;
    position: relative;
}

.sheet {
    position: relative;
    overflow: hidden;               /* (the page's empty top, lifted above the sheet's edge, not shown) */
    margin: 24px auto;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    transform-origin: 0 0;
}

.sheet canvas.pdf { position: absolute; display: block; }

/* a page coming: nothing of it shown until all of it is drawn (reader.js reveal) */
.sheet.loading > * { visibility: hidden; }

.sheet canvas.ink { position: absolute; left: 0; top: 0; mix-blend-mode: multiply; }

.sheet .texts { position: absolute; left: 0; top: 0; pointer-events: none; }

.sheet .pictures { position: absolute; left: 0; top: 0; pointer-events: none; }

.sheet .pictures .picture { position: absolute; display: block; }

.sheet .texts .typed { pointer-events: auto; }

.sheet.drawing .texts .typed { pointer-events: none; }      /* (ink goes over typed notes) */

.sheet.drawing canvas.ink { cursor: crosshair; touch-action: none; }

.typed {
    position: absolute;
    font-family: "New York", Georgia, "Times New Roman", serif;
    line-height: 1.2;
    white-space: pre-wrap;
    word-wrap: break-word;
    outline: none;
}

.typed a { color: #1d5fd1; }

.typed.editing { background: rgba(255, 255, 255, 0.6); }

/* the frame round the note being typed (in the notes' scaled layer: --px is one screen pixel) */
.note-frame {
    position: absolute;
    box-sizing: content-box;
    margin: calc(var(--px) * -4) 0 0 calc(var(--px) * -4);
    padding: calc(var(--px) * 4);
    border: calc(var(--px) * 1) solid #7a8cb0;
    border-radius: calc(var(--px) * 4);
    pointer-events: none;
}

.note-frame .nf-move {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--px) * -12);
    height: calc(var(--px) * 12);
    background: #7a8cb0;
    border-radius: calc(var(--px) * 4) calc(var(--px) * 4) 0 0;
    cursor: move;
    pointer-events: auto;
    touch-action: none;
}

.note-frame .nf-size {
    position: absolute;
    top: 0;
    bottom: 0;
    right: calc(var(--px) * -7);
    width: calc(var(--px) * 10);
    cursor: ew-resize;
    pointer-events: auto;
    touch-action: none;
}

.note-frame .nf-size::after {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(var(--px) * 3);
    width: calc(var(--px) * 4);
    height: calc(var(--px) * 22);
    margin-top: calc(var(--px) * -11);
    border-radius: calc(var(--px) * 2);
    background: #7a8cb0;
}

/* a picture chosen: drag it anywhere to move it, its corner to size it (its shape kept), × to take it away */
.pic-frame {
    position: absolute;
    box-sizing: border-box;
    border: calc(var(--px) * 2) solid #7a8cb0;
    pointer-events: none;
}

.pic-frame .pf-move {
    position: absolute;
    inset: 0;
    cursor: move;
    pointer-events: auto;
    touch-action: none;
}

.pic-frame .pf-size {
    position: absolute;
    right: calc(var(--px) * -9);
    bottom: calc(var(--px) * -9);
    width: calc(var(--px) * 16);
    height: calc(var(--px) * 16);
    border-radius: calc(var(--px) * 3);
    background: #7a8cb0;
    cursor: nwse-resize;
    pointer-events: auto;
    touch-action: none;
}

.pic-frame .pf-delete {
    position: absolute;
    top: calc(var(--px) * -24);
    right: calc(var(--px) * -10);
    width: calc(var(--px) * 22);
    height: calc(var(--px) * 22);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #a1260f;
    color: #fff;
    font: calc(var(--px) * 15) / 1 var(--sans);
    cursor: pointer;
    pointer-events: auto;
}

.note-frame .nf-delete {
    position: absolute;
    top: calc(var(--px) * -24);
    right: calc(var(--px) * -10);
    width: calc(var(--px) * 22);
    height: calc(var(--px) * 22);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #a1260f;
    color: #fff;
    font: calc(var(--px) * 15) / 1 var(--sans);
    cursor: pointer;
    pointer-events: auto;
}

.sheet.typing { cursor: text; }
/* reading: a press held a moment opens a card (the cursor shows it's coming; no phone menu on a hold) */
.sheet.holding { cursor: progress; }
.sheet { -webkit-touch-callout: none; }

/* the card: a reference's verses, or a word's Greek or Hebrew */
.card-dialog {
    width: min(520px, calc(100vw - 32px));
    max-height: min(80vh, 720px);
    padding: 22px 24px;
    border: 1px solid var(--rule);
    border-radius: 12px;
    background: var(--page);
    color: var(--ink);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.card-dialog::backdrop { background: rgba(30, 26, 20, 0.35); }

/* the word, sign and reference card: up from the bottom, as on the iPad, not over the middle of the
   page; no taller than it needs, and the page above it left in view */
#card {
    margin: auto auto 0;
    width: min(620px, 100vw);
    max-height: 52vh;
    padding: 14px 20px 18px;
    border-bottom: 0;
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -6px 28px rgba(0, 0, 0, 0.2);
    overflow: auto;
}
#card[open] { animation: card-up 0.22s ease-out; }
#card::backdrop { background: rgba(30, 26, 20, 0.12); }
@keyframes card-up { from { transform: translateY(100%); } to { transform: none; } }
#card h2 { font-size: 22px; padding-right: 28px; }
#card .sub { margin-bottom: 8px; }
#card .original { font-size: 32px; margin: 2px 0 6px; }
#card .section { margin-top: 10px; }
#card .credit { margin-top: 10px; }

.card-close {
    position: absolute;
    top: 8px;
    right: 10px;
    border: 0;
    background: none;
    font-size: 26px;
    line-height: 1;
    color: var(--ink-soft);
    cursor: pointer;
}

.card-dialog h2 { font-family: var(--serif); font-size: 26px; margin: 0 0 4px; }

.card-dialog .sub { color: var(--ink-soft); font-size: 14px; margin-bottom: 14px; }

.card-dialog .verses { font-family: var(--serif); font-size: 19px; line-height: 1.5; }

.card-dialog .verses sup { font-family: var(--sans); font-size: 11px; color: var(--ink-soft); margin-right: 3px; }

.card-dialog .original { font-family: "SBL Hebrew", "SBL Greek", "Times New Roman", serif; font-size: 40px; margin: 4px 0 10px; }

.card-dialog .original[dir=rtl] { text-align: right; }

.card-dialog dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0 0 12px; }

.card-dialog dt { color: var(--ink-soft); font-size: 14px; }

.card-dialog dd { margin: 0; }

.card-dialog .section { margin-top: 14px; }

.card-dialog .section h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); margin: 0 0 4px; }

.card-dialog .credit { margin-top: 16px; font-size: 12px; color: var(--ink-soft); }
/* Newberry's signs explained: each drawn large in its colour beside what it means */
.card-dialog .sign-row { display: flex; gap: 12px; align-items: flex-start; margin: 8px 0; }
.card-dialog .sign-pic { flex: 0 0 44px; display: flex; justify-content: center; padding-top: 2px; }
.card-dialog .sign-word { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.card-dialog .sign-word .original { font-size: 24px; margin: 0; }
.card-dialog .sign-word .button { padding: 4px 12px; font-size: 14px; }
.card-dialog .sign-row:not(.large) .sign-pic { flex-basis: 40px; }
.card-dialog .sign-row:not(.large) { font-size: 14px; margin: 10px 0; }
.card-dialog .sign-kind { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.card-dialog .sign-title { font-weight: 600; font-size: 1.1em; margin: 1px 0 4px; }
.card-dialog .sign-row:not(.large) .sign-title { font-size: 1em; }
.card-dialog .sign-example { font-style: italic; margin-top: 4px; font-size: 14px; }
.card-dialog .sign-row .sub { margin-top: 4px; font-size: 12.5px; }
.card-dialog details.section summary { cursor: pointer; font-weight: 600; margin-top: 8px; }

/* turning the page: a round button at each side of the reading area */
.turn {
    position: fixed; top: 55%; transform: translateY(-50%); z-index: 5;
    width: 44px; height: 44px; border-radius: 50%; border: 1px solid #d8d2c6;
    background: rgba(255, 255, 255, 0.85); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    font-size: 28px; line-height: 40px; color: var(--ink); cursor: pointer; padding: 0;
    opacity: 0.7; transition: opacity 0.15s;
}
.turn:hover { opacity: 1; }
.turn:disabled { opacity: 0.2; cursor: default; }
.turn-prev { left: 12px; }
.turn-next { right: 12px; }
@media print { .turn { display: none; } }

/* the reader's own study: bookmarks, the Study menu, adding to the margin, Memory Verses */
.card-dialog button.link, .reader-hint button.link {
    background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; font: inherit; text-decoration: underline;
}
.card-dialog label.field { display: block; margin-top: 14px; font-weight: 500; }
.card-dialog label.field input, .card-dialog label.field textarea {
    display: block; width: 100%; margin-top: 4px; padding: 8px 10px; font: inherit; font-weight: 400;
    border: 1px solid #d8d2c6; border-radius: 6px; box-sizing: border-box;
}
.card-dialog .actions .button + .button { margin-left: 8px; }
.card-dialog .bookmark-list, .card-dialog .study-list { list-style: none; padding: 0; margin: 10px 0; }
.card-dialog .bookmark-list li, .card-dialog .study-list li {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 8px 0; border-bottom: 1px solid #eee7da;
}
.card-dialog .study-list li { flex-direction: column; gap: 2px; }
.card-dialog .bookmark-list .row-actions { margin-left: auto; display: flex; gap: 10px; font-size: 14px; }
.card-dialog .ribbon-dot { width: 10px; height: 10px; border-radius: 2px; display: inline-block; align-self: center; }
.card-dialog .swatch-row { display: flex; gap: 8px; margin-top: 10px; }
.reader-hint {
    padding: 8px 16px; background: #fff6d6; border-bottom: 1px solid #ecd98f; font-size: 14px; text-align: center;
}
/* (opened from the app's "Listen Online": the button to press, until it's pressed) */
#listen.asked { outline: 2px solid var(--accent); outline-offset: 2px; animation: listen-asked 1.4s ease-in-out infinite; }
@keyframes listen-asked { 50% { outline-color: transparent; } }

.card-dialog .actions { margin-top: 18px; }

/* the Bible read aloud (audio.js): the marker in the right-hand column that follows the reading,
   a see-through bracket opening towards the text, and the little player at the foot */
.reading-marker {
    position: absolute;
    box-sizing: border-box;
    border: 0.7px solid rgba(128, 26, 41, 0.55);
    border-left: 0;
    background: rgba(128, 26, 41, 0.06);
    pointer-events: none;
}
/* the little player: one compact row */
.audio-bar {
    position: fixed; left: 16px; bottom: 16px; z-index: 6;
    display: flex; align-items: center; gap: 4px; max-width: calc(100vw - 32px);
    padding: 4px 6px; background: #fff; border: 1px solid var(--rule); border-radius: 999px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.14); font-size: 13px;
}
.audio-bar[hidden] { display: none; }
.audio-bar button {
    height: 26px; min-width: 26px; padding: 0 6px; border: 0; border-radius: 999px;
    background: #f4efe4; cursor: pointer; font: inherit; line-height: 1;
}
.audio-bar button:hover { background: #ebe3d2; }
.audio-bar .play { min-width: 30px; background: var(--accent); color: #fff; }
.audio-bar .play:hover { background: #63251a; }
.audio-bar .audio-info { display: flex; flex-direction: column; line-height: 1.15; padding: 0 4px; white-space: nowrap; }
.audio-bar .audio-title { font-family: var(--serif); font-weight: 600; font-size: 14px; }
.audio-bar .audio-credit { font-size: 10px; color: var(--ink-soft); text-decoration: none; }
.audio-bar .audio-credit:hover { text-decoration: underline; }

/* the reader's settings */
.settings-dialog { width: min(420px, calc(100vw - 32px)); }
.settings-dialog label.field select {
    display: block; width: 100%; margin-top: 4px; padding: 8px 10px; font: inherit; font-weight: 400;
    border: 1px solid #d8d2c6; border-radius: 6px; background: #fff;
}
.settings-dialog label.check { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.settings-dialog label.check input { width: 18px; height: 18px; }

.signin-hint {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ink);
    color: #fff;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
}

.signin-hint a { color: #ffd9c9; }

@media (max-width: 640px) {
    .site-header { padding: 10px 16px; }
    .hero { padding: 48px 16px 32px; }
    .features, .prose { padding-left: 16px; padding-right: 16px; }
    .card { margin: 24px 16px; }
}

/* lists in typed notes (bulleted and numbered, as on the iPad) */
.typed ul, .typed ol { margin: 0; padding-left: 1.25em; }
.typed ol { padding-left: 1.7em; }
.typed li { margin: 0; }

/* ---- the Notebook: meetings and subjects, each its verses and notes (notebook.js) */
.notebook-dialog {
    width: min(900px, calc(100vw - 32px));
    height: min(640px, calc(100vh - 32px));
    max-width: none;
    max-height: none;
    padding: 0;
    border: 1px solid var(--rule);
    border-radius: 12px;
    background: var(--paper);
    color: var(--ink);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}
.notebook-dialog::backdrop { background: rgba(30, 26, 20, 0.35); }
.nb-shell { display: grid; grid-template-columns: 260px 1fr; height: 100%; }
.nb-side { border-right: 1px solid var(--rule); display: flex; flex-direction: column; min-height: 0; background: #f6f2e9; }
.nb-side-head { position: relative; padding: 16px 18px 6px; }
.nb-side-head h2 { font-family: var(--serif); font-size: 26px; margin: 0; }
.nb-side-head .card-close { top: 12px; }
.nb-tabs { display: flex; margin: 6px 16px 10px; border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; }
.nb-tabs button { flex: 1; border: 0; background: var(--page); padding: 7px 0; font: 500 14px var(--sans); color: var(--ink-soft); cursor: pointer; }
.nb-tabs button.on { background: var(--accent-soft); color: var(--accent); }
.nb-new { margin: 0 16px 10px; }
.nb-list { list-style: none; margin: 0; padding: 0 8px 16px; overflow: auto; flex: 1; min-height: 0; }
.nb-list button { display: block; width: 100%; text-align: left; border: 0; background: none; border-radius: 8px; padding: 9px 10px; cursor: pointer; color: var(--ink); }
.nb-list button:hover { background: rgba(0, 0, 0, 0.04); }
.nb-list button.on { background: var(--accent-soft); }
.nb-name { display: block; font: 600 17px var(--serif); }
.nb-sub { display: block; font-size: 13px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb-none { color: var(--ink-soft); font-size: 14px; padding: 8px 10px; }
.nb-page { overflow: auto; padding: 28px 40px 40px; background: #fffdf7; min-width: 0; }
.nb-page > * { max-width: 760px; }
.nb-empty { color: var(--ink-soft); margin-top: 30vh; text-align: center; max-width: none; }
.nb-title { display: block; width: 100%; font: 600 30px var(--serif); color: var(--ink); border: 0; background: none; padding: 0; margin: 0 0 8px; outline: none; }
.nb-meta { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-bottom: 18px; font-size: 14px; color: var(--ink-soft); }
.nb-meta input { font: 16px var(--serif); color: var(--ink); border: 0; border-bottom: 1px solid var(--rule); background: none; padding: 2px 4px; margin-left: 6px; }
.nb-definition { display: block; width: 100%; font: italic 17px var(--serif); color: var(--ink); border: 0; border-bottom: 1px solid var(--rule); background: none; padding: 4px 0; margin-bottom: 18px; resize: vertical; }
.nb-verses { background: rgba(0, 0, 0, 0.035); border-radius: 10px; padding: 12px 14px; margin-bottom: 22px; }
.nb-page h3 { font: 600 12px var(--sans); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); margin: 0 0 8px; }
.nb-verses ul { list-style: none; margin: 0; padding: 0; }
.nb-verses li { display: flex; gap: 10px; align-items: baseline; padding: 3px 0; font-size: 14px; }
.nb-ref { flex: 0 0 auto; min-width: 96px; text-align: left; border: 0; background: none; padding: 0; font: 700 14px var(--serif); color: var(--accent); cursor: pointer; }
.nb-ref:hover { text-decoration: underline; }
.nb-words { flex: 1; font: 15px var(--serif); color: var(--ink-soft); cursor: pointer;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nb-words.open { display: block; }
.nb-remove { border: 0; background: none; color: var(--ink-soft); font-size: 18px; line-height: 1; cursor: pointer; }
.nb-add-verse { display: flex; gap: 8px; margin-top: 8px; }
.nb-add-verse input { flex: 1; font: 15px var(--sans); padding: 5px 8px; border: 1px solid var(--rule); border-radius: 6px; background: var(--page); }
.nb-verses .sub { margin: 4px 0 0; font-size: 13px; color: #a33; }
.nb-notes-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.nb-notes-head h3 { margin: 0; }
.nb-format { display: flex; gap: 2px; }
.nb-format button { border: 1px solid var(--rule); background: var(--page); border-radius: 6px; padding: 3px 9px; font-size: 14px; cursor: pointer; color: var(--ink); }
.nb-format button:hover { background: var(--accent-soft); }
.nb-notes { min-height: 320px; padding: 6px 0 40px; font-family: "New York", Georgia, "Times New Roman", serif; font-size: 18px; line-height: 1.35;
    color: #1A1A1A; outline: none; white-space: pre-wrap; word-wrap: break-word; border-top: 1px solid var(--rule); }
.nb-notes:empty::before { content: "Your notes…"; color: #b3ab9d; }
.nb-notes ul, .nb-notes ol { margin: 0; padding-left: 1.4em; }
.nb-notes ol { padding-left: 1.8em; }
.nb-foot { display: flex; gap: 10px; margin-top: 20px; }
.nb-new-form { max-width: 460px; }
@media (max-width: 760px) {
    .notebook-dialog { width: 100vw; height: 100vh; border-radius: 0; }
    .nb-shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .nb-side { border-right: 0; border-bottom: 1px solid var(--rule); max-height: 38vh; }
    .nb-page { padding: 18px 16px 32px; }
}
.nb-handwriting { margin-top: 18px; }
.nb-handwriting canvas { display: block; max-width: 100%; background: repeating-linear-gradient(to bottom, transparent 0 33px, rgba(158, 184, 217, 0.45) 33px 34px); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 6px; }
.nb-handwriting .sub { font-size: 13px; color: var(--ink-soft); margin: 4px 0 0; }

/* in the reader's tools, where a pen would be: handwriting is the iPad app's */
.reader-bar .pencil-hint { color: var(--ink-soft); font-size: 12px; text-decoration: none; padding: 0 6px; white-space: nowrap; }
.reader-bar .pencil-hint:hover { color: var(--accent); text-decoration: underline; }

/* the admin's chapter check: Newberry's page beside our words */
.check-admin { max-width: 1400px; }
.check-admin .signs-help { font-size: 0.92em; line-height: 1.6; border-left: 3px solid #c9b98f; padding: 4px 12px; margin: 12px 0; }
.check-bar { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin: 12px 0; }
.check-bar select { font: inherit; padding: 6px 8px; }
.check-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.check-scan { position: sticky; top: 8px; border: 1px solid var(--rule); border-radius: 8px; background: #fff; }
.check-scan-bar { display: flex; gap: 8px; align-items: center; padding: 6px 8px; border-bottom: 1px solid var(--rule); color: var(--ink); font-size: 14px; }
.check-scan-bar .spacer { flex: 1; }
.check-scan-view { overflow: auto; max-height: calc(100vh - 70px); padding: 2px; }
.check-scan-view canvas { display: block; }
.check-words { font-family: var(--serif, Georgia, serif); font-size: 17px; line-height: 2.1; }
.check-words .cv { margin: 0 0 6px; }
.check-words .vn { font-size: 0.7em; vertical-align: super; color: var(--ink-soft); margin-right: 4px; }
.w { font: inherit; color: inherit; background: none; border: 0; padding: 1px 3px; margin: 0 1px; border-radius: 4px; cursor: pointer;
     display: inline-flex; align-items: baseline; gap: 1px; line-height: 1.3; }
.w:hover { outline: 1px solid var(--rule); }
.w canvas { align-self: center; }
.w sup { font-size: 0.6em; font-style: italic; color: var(--ink-soft); }
.w.marked { background: #fbeaa6; }
.w.empty { background: #f8c9c3; box-shadow: inset 0 -2px 0 #c03030; }
.w.answered { box-shadow: inset 0 -3px 0 #3a8a4f; }
.w.seen { box-shadow: inset 0 -3px 0 #7aa7d6; }
.w.tocheck { outline: 2px solid #d9822b; outline-offset: -1px; }
.check-words.only .w:not(.tocheck) { opacity: 0.3; }
.w.demo { cursor: default; }
.check-pick { border: 1px solid var(--rule); border-radius: 10px; padding: 0; width: min(640px, calc(100vw - 32px)); background: var(--paper); color: var(--ink); }
.check-pick::backdrop { background: rgba(0, 0, 0, 0.3); }
.check-pick-body { padding: 16px; }
.check-pick h2 { font-size: 20px; margin: 0 0 4px; }
.check-pick .sub canvas, .check-chosen canvas { vertical-align: middle; }
.check-chosen { margin: 8px 0; display: flex; gap: 8px; align-items: center; min-height: 32px; }
.check-signs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; max-height: 46vh; overflow: auto; }
.check-signs button { font: inherit; font-size: 13px; display: flex; gap: 6px; align-items: center; text-align: left; padding: 6px;
     border: 1px solid var(--rule); border-radius: 6px; background: #fff; color: #1d1a16; cursor: pointer; }
.check-signs button.on { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.check-pick-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.check-pick .saved { font-size: 0.85em; color: #3a8a4f; }
.check-pick .saved.err { color: #c03030; }
@media (max-width: 860px) {
    .check-grid { grid-template-columns: 1fr; }
    .check-scan { top: 0; z-index: 2; }
    .check-scan-view { max-height: 45vh; }
}
.check-key { display: flex; gap: 8px; align-items: center; margin-top: 12px; font-size: 15px; }
.check-key input { font: inherit; width: 4em; padding: 5px 6px; }
#pick-joins { margin: 4px 0 0; min-height: 1.3em; }
.check-insert { display: inline-flex; gap: 5px; align-items: center; font-size: 14px; }
.check-note { font: inherit; font-size: 14px; padding: 5px 6px; margin-top: 8px; max-width: 100%; }
.check-part { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; font-size: 14px; }
.check-part button { font: inherit; padding: 4px 9px; border: 1px solid var(--rule); border-radius: 6px; background: #fff;
     color: #1d1a16; cursor: pointer; }
.check-part button.on { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }