:root {
  --cover: #3f4b36;
  --cover-deep: #2f392a;
  --paper: #f4efdf;
  --paper-2: #eee7d5;
  --ink: #4a3c31;
  --ink-soft: #756b5d;
  --line: rgba(86, 71, 55, .24);
  --olive: #59664b;
  --olive-soft: #7a846d;
  --tan: #b69369;
  --shadow: rgba(48, 39, 29, .18);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #d8d0bd; color: var(--ink); }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Helvetica Neue", Arial, sans-serif;
  overscroll-behavior: none;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.app-shell {
  min-height: 100dvh;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.32), transparent 26%),
    linear-gradient(145deg, var(--cover-deep), var(--cover));
  padding: calc(var(--safe-top) + 10px) 10px calc(var(--safe-bottom) + 10px) 22px;
  position: relative;
  overflow: hidden;
}

.cover-edge {
  position: fixed; inset: 0 auto 0 0; width: 20px;
  background: linear-gradient(90deg, #273126, #48533f 68%, #30392c);
  box-shadow: inset -1px 0 0 rgba(255,255,255,.08);
}
.binding {
  position: fixed; left: 6px; top: 50%; transform: translateY(-50%);
  z-index: 5; display: grid; gap: 15px; pointer-events: none;
}
.binding span {
  width: 26px; height: 5px; border-radius: 999px;
  background: linear-gradient(#9b7e5d, #6c553e);
  box-shadow: 0 1px 2px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.28);
}
.ribbon {
  position: fixed; top: 0; right: 34px; width: 18px; height: 72px; z-index: 4;
  background: #907053; opacity: .78;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%);
}

.paper {
  min-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 20px);
  position: relative;
  background:
    linear-gradient(rgba(255,255,255,.18), rgba(255,255,255,.04)),
    repeating-linear-gradient(0deg, transparent, transparent 27px, rgba(100,82,60,.035) 28px),
    var(--paper);
  border-radius: 5px 16px 16px 5px;
  box-shadow: 0 16px 44px rgba(0,0,0,.2), inset 1px 0 0 rgba(255,255,255,.7), inset -7px 0 16px rgba(84,65,42,.05);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.paper::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .17;
  background-image: radial-gradient(rgba(70,55,40,.22) .5px, transparent .5px);
  background-size: 5px 5px;
  mix-blend-mode: multiply;
}
.paper-header {
  min-height: 54px; padding: 12px 16px 4px; display: grid; grid-template-columns: 42px 1fr 42px; align-items: center;
  position: relative; z-index: 3;
}
.brand-mini { text-align: center; font-size: 12px; letter-spacing: .08em; color: var(--ink-soft); opacity: .78; }
.quiet-button { border: 0; background: transparent; font-size: 28px; line-height: 1; padding: 4px; cursor: pointer; }
.back-button { visibility: hidden; text-align: left; }
.menu-button { text-align: right; font-size: 24px; letter-spacing: .08em; }

.screen {
  display: none; padding: 14px 26px 34px 30px; min-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 84px);
  position: relative; z-index: 2; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.screen.active { display: block; animation: pageIn .2s ease both; }
@keyframes pageIn { from { opacity: 0; transform: translateX(5px); } to { opacity: 1; transform: none; } }

.welcome-wrap { min-height: calc(100dvh - 130px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-bottom: 52px; }
.eyebrow, .date-kicker { font-size: 11px; letter-spacing: .17em; color: var(--ink-soft); text-transform: uppercase; }
.title-mark { font-size: clamp(34px, 10vw, 48px); line-height: 1.1; font-weight: 700; letter-spacing: -.05em; margin: 14px 0 10px; }
.leaf-mark { width: 120px; height: 56px; fill: none; stroke: var(--olive-soft); stroke-width: 1.2; stroke-linecap: round; opacity: .72; margin: 2px 0 25px; }
.language-question { margin: 0 0 18px; font-size: 14px; color: var(--ink-soft); }
.language-stack { width: min(300px, 82%); display: grid; gap: 10px; }

h2 { font-size: 31px; line-height: 1.24; margin: 10px 0 13px; letter-spacing: -.04em; font-weight: 650; }
.thin-rule { height: 1px; background: linear-gradient(90deg, var(--line), transparent); margin: 0 0 28px; }
.thin-rule.small { width: 78px; margin: 18px auto 26px; background: var(--line); }
.section-label { font-size: 12px; letter-spacing: .08em; font-weight: 650; color: var(--olive); margin-bottom: 9px; }
.large-copy { white-space: pre-line; line-height: 1.72; font-size: 20px; letter-spacing: -.02em; margin: 10px 0 20px; }
.microcopy { font-size: 11px; color: var(--ink-soft); line-height: 1.55; margin-top: 10px; }

.primary-pill, .secondary-pill, .ink-action, .text-action, .library-row { cursor: pointer; }
.primary-pill, .secondary-pill {
  width: 100%; min-height: 52px; border-radius: 15px; border: 1px solid rgba(83,71,54,.26); background: rgba(255,255,255,.24); font-weight: 650;
}
.primary-pill { border-color: rgba(76,91,63,.45); background: rgba(89,102,75,.1); }
.ink-action {
  border: 0; border-radius: 11px; background: var(--olive); color: #f7f2e6; padding: 12px 18px; min-height: 44px; box-shadow: 0 5px 12px rgba(54,65,46,.12); font-weight: 650;
}
.ink-action.full, .text-action.full { width: 100%; }
.text-action { border: 0; background: transparent; padding: 11px 8px; color: var(--ink); text-decoration: underline; text-decoration-color: rgba(74,60,49,.23); text-underline-offset: 4px; }
.text-action.subtle { color: var(--ink-soft); font-size: 13px; }

.reading-intro { padding-top: 6px; }
.reading-intro .ink-action { margin-right: 8px; }
.today-notes { margin-top: 42px; }
.trail-mark { border-left: 2px solid rgba(89,102,75,.35); padding-left: 14px; margin: 18px 0; }
.trail-mark .trail-title { font-weight: 650; margin-bottom: 4px; }
.trail-mark .trail-copy { color: var(--ink-soft); font-size: 13px; line-height: 1.55; }

.page-foot-actions { margin-top: 36px; display: flex; align-items: center; gap: 8px; }
.page-foot-actions.spread { justify-content: space-between; }
.page-foot-actions.wrap { flex-wrap: wrap; }

.field-label { display: block; font-size: 12px; color: var(--ink-soft); margin: 18px 0 8px; }
.field-label.spaced { margin-top: 28px; }
.field-grid { display: grid; gap: 14px; }
.field-grid.three { grid-template-columns: repeat(3, 1fr); }
.field-grid.two { grid-template-columns: 1fr 1fr; }
.field-grid.compact { margin-top: 8px; }
.line-input {
  width: 100%; border: 0; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.08); border-radius: 0; padding: 10px 4px 9px; outline: none;
}
.line-input:focus { border-bottom-color: var(--olive); }
.date-input { max-width: 220px; display: block; margin-bottom: 18px; }

.bible-source-gate {
  border-left: 2px solid rgba(89,102,75,.35); padding: 3px 0 3px 16px; margin-bottom: 34px; color: var(--ink-soft);
}
.bible-source-gate p { margin: 7px 0 8px; line-height: 1.7; }
.bible-source-gate span { font-size: 9px; letter-spacing: .12em; opacity: .65; }
.writing-section { margin: 30px 0; }
.paper-textarea {
  width: 100%; min-height: 128px; resize: vertical; border: 0; outline: 0; border-radius: 0; background:
    repeating-linear-gradient(0deg, transparent, transparent 30px, rgba(83,70,52,.11) 31px);
  padding: 6px 2px; line-height: 31px; font-size: 17px;
}
.paper-textarea.short { min-height: 72px; }
.paper-textarea.prayer-page, .paper-textarea.letter-page { min-height: 46dvh; }

.listening-screen { display: none; }
.listening-screen.active { display: flex; flex-direction: column; }
.listening-center { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 18%; }
.listening-line { font-size: 29px; margin-top: 16px; font-weight: 570; }
.silence-space { min-height: 21dvh; }
.reflection-drawer { width: 100%; text-align: left; margin-top: 16px; }

.notebook-list { margin-top: 18px; }
.spaced-list { margin-top: 28px; }
.note-row {
  width: 100%; border: 0; background: transparent; text-align: left; padding: 16px 3px 15px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; gap: 12px; cursor: pointer;
}
.note-row .main { font-size: 16px; line-height: 1.45; }
.note-row .meta { font-size: 11px; color: var(--ink-soft); margin-top: 5px; }
.note-row .chev { color: var(--ink-soft); align-self: center; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; background: var(--olive-soft); margin-right: 7px; }
.status-dot.answered { background: var(--tan); }

.reading-reference { color: var(--ink-soft); font-size: 12px; margin: 6px 0 18px; }
.close-day-center { min-height: calc(100dvh - 150px); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.close-day-center h2 { margin-top: 16px; }
.close-day-center p { color: var(--ink-soft); line-height: 1.7; margin: 0 0 28px; }

.archive-meta { display: grid; gap: 10px; margin: 10px 0 24px; font-size: 13px; color: var(--ink-soft); }
.archive-meta strong { color: var(--ink); }
.library-row {
  width: 100%; border: 0; border-bottom: 1px solid var(--line); background: transparent; padding: 20px 3px; display: flex; justify-content: space-between; font-size: 18px;
}
.saved-entry { white-space: pre-wrap; line-height: 1.95; font-size: 17px; padding: 8px 2px 28px; }
.share-note { margin-bottom: 40px; }

.drawer-backdrop { position: fixed; inset: 0; background: rgba(33,30,25,.25); z-index: 19; }
.drawer {
  position: fixed; z-index: 20; left: 34px; right: 12px; bottom: calc(var(--safe-bottom) + 10px); transform: translateY(120%); transition: transform .25s ease;
  background: #eee6d1; border: 1px solid rgba(79,65,49,.18); border-radius: 18px; padding: 12px 18px 18px; box-shadow: 0 24px 60px rgba(0,0,0,.28);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px 12px;
}
.drawer.open { transform: translateY(0); }
.drawer-grip { grid-column: 1 / -1; width: 42px; height: 4px; border-radius: 99px; background: rgba(74,60,49,.25); margin: 0 auto 8px; }
.drawer button { border: 0; background: transparent; text-align: left; padding: 12px 4px; border-bottom: 1px solid rgba(74,60,49,.08); }

.confirm-sheet { position: fixed; inset: 0; z-index: 30; background: rgba(39,34,29,.3); display: grid; place-items: end center; padding: 18px; }
.confirm-card { width: min(480px, 100%); background: #f2ead7; border-radius: 18px; padding: 22px; box-shadow: 0 24px 70px rgba(0,0,0,.26); }
.confirm-card p { line-height: 1.7; }
.confirm-card .ink-action { margin: 12px 0 5px; }
.toast {
  position: fixed; z-index: 50; left: 50%; bottom: calc(var(--safe-bottom) + 28px); transform: translate(-50%, 18px); opacity: 0; pointer-events: none;
  background: rgba(54,64,46,.94); color: white; padding: 10px 14px; border-radius: 999px; font-size: 12px; transition: .2s ease; white-space: nowrap;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (min-width: 700px) {
  body { display: grid; place-items: center; min-height: 100dvh; background: #cfc6b1; }
  .app-shell { width: 430px; min-height: 900px; height: min(900px, 96dvh); border-radius: 30px; box-shadow: 0 26px 90px rgba(0,0,0,.25); }
  .paper { min-height: calc(min(900px, 96dvh) - 20px); }
  .screen { min-height: calc(min(900px, 96dvh) - 84px); }
  .welcome-wrap, .close-day-center { min-height: 720px; }
  .drawer { left: calc(50% - 185px); right: calc(50% - 205px); }
}

/* v0.1.1 hotfix: hidden UI must never render before explicitly opened. */
[hidden] { display: none !important; }
.confirm-sheet[hidden],
.reflection-drawer[hidden],
.drawer[hidden],
.drawer-backdrop[hidden] { display: none !important; }