/* ==========================================================
   Bible study journal (/journal/). Uses the reader's light/dark
   colors (--r-*) from reader.css and the site's fonts and buttons.
   ========================================================== */

.journal .page-body { padding-bottom: 4rem; }
.j-wrap { max-width: 1120px; }

/* Buttons used only here */
.btn-text { background: none; border: 0; padding: .6rem .4rem; min-height: 44px; color: var(--r-muted); font: 600 .95rem "Figtree", system-ui, sans-serif; cursor: pointer; text-decoration: underline; text-underline-offset: .2em; }
.btn-text:hover { color: var(--r-text); }
.btn-danger { background: #B3261E; color: #fff; }
.btn-danger:hover { background: #8C1D17; }
.journal .btn-ghost { color: var(--r-text); border-color: var(--r-line); background: transparent; }
.journal .btn-ghost:hover { border-color: var(--r-accent); background: var(--r-accent-soft); }
.journal .btn-outline, .j-modal .btn-outline { color: var(--r-accent); border-color: var(--r-accent); }
.journal .btn-outline:hover, .j-modal .btn-outline:hover { background: var(--r-accent); color: var(--r-bg); }
.journal .btn[disabled] { opacity: .45; pointer-events: none; }

/* ---------- Home ---------- */
.j-start { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.5rem; }
.j-note { display: flex; gap: .85rem; align-items: flex-start; padding: 1rem 1.1rem; margin-bottom: 1.5rem; border-radius: 12px; background: var(--r-accent-soft); border: 1px solid var(--r-line); color: var(--r-text); }
.j-note svg { flex: none; color: var(--r-accent); margin-top: .1rem; }
.j-note p { font-size: 1rem; }
.j-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; padding: 1.1rem 1.25rem; border-radius: 12px; background: var(--r-surface); border: 1px solid var(--r-line); margin-bottom: 1.25rem; }
.j-stat { display: grid; }
.j-stat-num { font-family: "Bitter", Georgia, serif; font-weight: 800; font-size: 2rem; line-height: 1; color: var(--r-text); }
.j-stat-label { color: var(--r-muted); font-size: .9rem; }
.j-week { list-style: none; padding: 0; margin: 0 0 0 auto; display: flex; gap: .4rem; }
.j-week li { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--r-line); color: var(--r-muted); font-size: .8rem; font-weight: 700; }
.j-week li.done { background: var(--r-accent); border-color: var(--r-accent); color: var(--r-bg); }
.j-week li.today { border-color: var(--r-accent); }
.j-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2.5rem; }
.j-import { cursor: pointer; }
.j-history-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.j-history-head h2 { font-size: 1.6rem; font-weight: 800; color: var(--r-text); }
.j-filter { display: inline-flex; align-items: center; gap: .5rem; color: var(--r-muted); font-size: .95rem; }
.j-filter select, .j-passage select, .j-passage input {
  min-height: 44px; padding: .4rem .6rem; border-radius: 8px; border: 1px solid var(--r-line);
  background: var(--r-bg); color: var(--r-text); font: 500 1rem "Figtree", system-ui, sans-serif;
}
.j-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.j-list a { display: grid; gap: .2rem; padding: .9rem 1.1rem; border-radius: 12px; background: var(--r-surface); border: 1px solid transparent; color: var(--r-text); text-decoration: none; }
.j-list a:hover { border-color: var(--r-accent); }
.j-list-date { color: var(--r-muted); font-size: .85rem; font-weight: 600; }
.j-list-ref { font-family: "Bitter", Georgia, serif; font-weight: 800; font-size: 1.15rem; }
.j-list-preview { color: var(--r-muted); font-size: .95rem; }
.j-empty { padding: 1.25rem; border-radius: 12px; border: 1px dashed var(--r-line); color: var(--r-muted); }

/* ---------- Reading an entry ---------- */
.j-entry-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: 1.75rem; }
.j-delete { margin-left: auto; }
.journal .scripture { background: var(--r-surface); }
.journal .scripture p { color: var(--r-text); }
.journal .scripture sup { color: var(--r-accent); }
.journal .scripture cite { color: var(--r-text); }
.journal .scripture figcaption { color: var(--r-muted); }
.j-read { margin-top: 1.75rem; }
.j-read h2 { font-family: "Figtree", system-ui, sans-serif; font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--r-accent); margin-bottom: .5rem; }
.j-read p { font-family: Georgia, serif; font-size: 1.1rem; line-height: 1.7; color: var(--r-text); }
.j-read-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 1.5rem; }
.j-read-columns .j-read { padding-top: .25rem; border-top: 3px solid var(--r-accent); }
.j-read-columns:empty { display: none; }
.journal .speck dd { color: var(--r-text); }
.journal .speck-letter { background: var(--r-accent); color: var(--r-bg); }
.j-backlink { margin-top: 2.5rem; }
@media (max-width: 860px) { .j-read-columns { grid-template-columns: 1fr; } }

/* ---------- Editor ---------- */
.j-form { position: relative; }
.j-step { margin-bottom: 1.5rem; padding: 1.25rem 1.3rem 1.35rem; border-radius: 12px; background: var(--r-surface); border: 1px solid var(--r-line); }
.j-step h2 { font-size: 1.35rem; font-weight: 800; color: var(--r-text); }
.j-col { border-top: 4px solid var(--r-accent); }
.j-col-num { color: var(--r-accent); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .2rem; }
.j-help { margin: .4rem 0 .8rem; color: var(--r-muted); font-size: .95rem; }
.j-help a { color: var(--r-accent); }
.j-warning { margin: -.3rem 0 .8rem; color: var(--r-accent); font-size: .95rem; }
.j-form textarea {
  width: 100%; min-height: 6rem; padding: .75rem .85rem; border-radius: 10px; border: 1px solid var(--r-line);
  background: var(--r-bg); color: var(--r-text); font: 1.05rem/1.6 Georgia, "Times New Roman", serif; resize: vertical;
}
.j-form textarea:focus, .j-passage select:focus, .j-passage input:focus, .j-filter select:focus { outline: 3px solid var(--r-accent); outline-offset: 1px; border-color: transparent; }
.j-form textarea::placeholder { color: var(--r-muted); opacity: .8; }
.j-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
.j-columns .j-step { margin-bottom: 0; display: flex; flex-direction: column; }
.j-columns .j-step textarea { flex: 1; min-height: 12rem; }
.j-passage-fields { display: grid; grid-template-columns: 1fr; gap: .6rem; margin-bottom: .75rem; }
.j-step-passage .j-passage-fields { grid-template-columns: minmax(12rem, 18rem) auto auto; justify-content: start; gap: .6rem 1rem; }
.j-step-passage .j-bible { max-width: 46rem; }
.j-step-passage .j-bible .v { font-size: 1.2rem; line-height: 1.75; }
@media (max-width: 600px) { .j-step-passage .j-passage-fields { grid-template-columns: 1fr; } }
.j-passage label { display: grid; gap: .25rem; color: var(--r-muted); font-size: .85rem; font-weight: 600; }
.j-passage select { width: 100%; }
.j-passage input[name=chapter] { width: 6rem; }
.j-verses { display: flex; align-items: center; gap: .4rem; }
.j-verses input { width: 5.25rem; }
.j-passage-text { margin-bottom: .75rem; }
/* The passage, shown like the Bible reader (cross-reference dots open popups) */
.j-bible { margin: 0 0 1.75rem; padding: .9rem .6rem .8rem .3rem; border-radius: 12px; background: var(--r-bg); border: 1px solid var(--r-line); }
.j-bible .verses { margin: 0; max-width: none; }
.j-bible .v { font-size: 1.15rem; margin-bottom: .35rem; }
.j-bible figcaption { margin: .6rem 0 0 .75rem; color: var(--r-muted); font-size: .85rem; }
.j-bible figcaption cite { font-style: normal; font-weight: 700; color: var(--r-text); }
.j-bible figcaption a { color: var(--r-accent); }
.j-bible-tip { display: block; margin-top: .2rem; }
.j-step .j-bible { margin-bottom: .75rem; }
.j-verses-text { margin: 0; padding: .75rem .9rem; border-left: 3px solid var(--r-accent); background: var(--r-accent-soft); border-radius: 0 8px 8px 0; }
.j-verses-text p { font-family: Georgia, serif; line-height: 1.65; color: var(--r-text); }
.j-verses-text sup { font-family: "Figtree", sans-serif; font-size: .7em; color: var(--r-muted); margin-right: .2em; }
.j-verses-text cite { display: block; margin-top: .4rem; font-style: normal; font-size: .8rem; color: var(--r-muted); }
.j-speck { margin-top: 1rem; }
.j-speck summary { cursor: pointer; color: var(--r-accent); font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.j-speck-item { display: grid; gap: .25rem; margin-top: .8rem; }
.j-speck-label { display: flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--r-text); }
.j-speck-q { color: var(--r-muted); font-size: .9rem; }
.j-speck textarea { min-height: 3.5rem; }
.j-autosave { color: var(--r-muted); font-size: .9rem; margin: .25rem 0 1rem; }
.j-bar { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; }
.j-back, .j-next, .j-stepcount, .j-progress { display: none; }

@media (max-width: 960px) {
  .j-columns { grid-template-columns: 1fr; }
  .j-columns .j-step textarea { min-height: 8rem; }
}

/* Phones: one step at a time with a bar at the bottom */
@media (max-width: 719px) {
  .j-step { display: none; margin-bottom: 1rem; }
  .j-step.is-current { display: block; }
  .j-columns { display: block; margin: 0; }
  .j-columns .j-step { display: none; }
  .j-columns .j-step.is-current { display: flex; }
  .j-progress { display: block; height: 4px; border-radius: 2px; background: var(--r-line); margin-bottom: 1rem; overflow: hidden; }
  .j-progress span { display: block; height: 100%; background: var(--r-accent); transition: width .25s; }
  .j-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; justify-content: space-between;
    padding: .5rem 1rem calc(.5rem + env(safe-area-inset-bottom)); background: var(--r-surface); border-top: 1px solid var(--r-line);
  }
  .j-back, .j-next { display: inline-flex; }
  .j-stepcount { display: block; color: var(--r-muted); font-size: .9rem; }
  .j-save { display: none; }
  .j-form.is-last .j-next { display: none; }
  .j-form.is-last .j-save { display: inline-flex; }
  .j-form.is-first .j-back { visibility: hidden; }
  .journal-page .site-footer { padding-bottom: 6rem; }
  .j-week { margin-left: 0; }
  .j-delete { margin-left: 0; }
}

/* "Read your passage" (phones, steps 3 onward) */
.j-peek { display: none; }
.j-peek[hidden] { display: none !important; }
.j-peek-pop .j-peek-body { padding: .25rem .75rem .5rem .25rem; overflow-y: auto; }
.j-peek-pop .v { font-size: 1.1rem; line-height: 1.7; margin-bottom: .35rem; color: var(--r-text); }
@media (max-width: 719px) {
  .j-peek {
    display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; margin: .5rem 0 .1rem; padding: .35rem .85rem .35rem .7rem;
    border-radius: 999px; border: 1px solid var(--r-accent); background: var(--r-accent-soft); color: var(--r-accent);
    font: 700 .88rem/1.1 "Figtree", system-ui, sans-serif; cursor: pointer; max-width: 100%; align-self: flex-start;
  }
  .j-peek-ref { font-weight: 500; color: var(--r-muted); padding-left: .4rem; border-left: 1px solid var(--r-line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .j-peek[aria-expanded="true"] { background: var(--r-accent); color: var(--r-bg); }
  .j-peek[aria-expanded="true"] .j-peek-ref { color: inherit; border-color: currentColor; }
  .j-peek-pop { display: flex; flex-direction: column; }
}

/* ---------- Dialogs and toasts ---------- */
.j-modal {
  width: min(30rem, calc(100vw - 2rem)); padding: 1.6rem 1.5rem 1.4rem; border: 1px solid var(--r-line); border-radius: 16px;
  background: var(--r-bg); color: var(--r-text); box-shadow: var(--r-shadow);
}
.j-modal::backdrop { background: rgba(0, 0, 0, .5); }
.j-modal h2 { font-size: 1.4rem; font-weight: 800; margin-bottom: .6rem; }
.j-modal p { color: var(--r-text); }
.j-modal-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; }
.j-modal .btn-ghost { color: var(--r-text); border-color: var(--r-line); }
.j-remind { text-align: center; }
.j-remind-icon { font-size: 2.2rem; line-height: 1; margin-bottom: .5rem; }
.j-remind-actions { display: grid; gap: .6rem; margin-top: 1.25rem; }
.j-remind-actions .btn { width: 100%; }
.j-remind-note { margin-top: 1rem; font-size: .85rem; color: var(--r-muted) !important; }
.j-toast {
  position: fixed; left: 50%; bottom: calc(5rem + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 70;
  padding: .7rem 1.1rem; border-radius: 999px; background: var(--r-text); color: var(--r-bg); font-weight: 600; box-shadow: var(--r-shadow);
  transition: opacity .4s; max-width: calc(100vw - 2rem); text-align: center;
}
.j-toast.is-out { opacity: 0; }