/* apps-1: Today, Read, Fill the Verse, Guestbook, Bulletin, What's New, Members */
.wordart-sm { font: 700 18px/1.1 Impact, "Arial Black", sans-serif; color: #c00; text-shadow: 2px 2px 0 #fc0, 3px 3px 0 #003399; display: inline-block; transform: skewX(-6deg); }
.win .body * { max-width: 100%; }
.win .body img { max-width: 100%; height: auto; }
.win .body { overflow-x: hidden; }
.win .body.paper { overflow-x: hidden; overflow-wrap: anywhere; }

/* ---------- Today ---------- */
.today { font-family: var(--font); }
.today-mail { display: flex; gap: 8px; align-items: center; width: 100%; text-align: left; background: #ffffcc; border: 2px outset #fff; padding: 4px 8px; cursor: pointer; color: #000; font: inherit; }
.today-mail:active { border-style: inset; }
.today-date { font: 700 13px var(--font); margin: 6px 0 2px; color: #000080; }
.today-nav { display: flex; gap: 4px; flex-wrap: wrap; margin: 4px 0; }
.today-verse { margin: 8px 0 2px; padding: 8px 10px; background: #fffbe6; border: 2px inset #c0c0c0; border-left: 6px solid #800000; font: 400 22px/1.3 "Times New Roman", Times, serif; color: #000; }
html[data-serif="on"] .today-verse { font-size: 24px; }
.today-ref { text-align: right; font: italic 700 14px "Times New Roman", serif; margin: 2px 4px 6px; color: #800000; }
.today-acts { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.today-pair { background: #e8ffe8; border: 1px dashed #060; padding: 4px 6px; margin: 6px 0; font-size: 12px; }
.today-streak { display: flex; gap: 8px; align-items: center; margin: 8px 0; padding: 4px 8px; background: #fff0d0; border: 2px solid #f60; }
.today-streak b { font: 700 22px Impact, "Arial Black", sans-serif; color: #c00; }
.today-pager { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0; padding: 6px; background: #333; color: #ddd; border: 2px outset #666; }
.pager-lcd { background: #9ab08a; color: #1c2a14; font: 400 34px/1 var(--mono); padding: 6px 8px; border: 2px inset #555; min-width: 90px; text-align: center; letter-spacing: 2px; }
.pager-text { font-size: 11px; }
.pager-text summary { cursor: pointer; color: #9cf; }
.pager-text ul { margin: 2px 0 0 14px; padding: 0; }
.promise { margin: 8px 0; }
.promise-top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.promise-top img { image-rendering: pixelated; }
.mood-row { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.promise-out { margin: 6px 0; min-height: 28px; }
.promise-out .card { background: #fff; border: 2px solid #c60; box-shadow: 3px 3px 0 #0006; padding: 6px 8px; font: 16px/1.3 "Times New Roman", serif; }
.promise-out .card p { margin: 4px 0; }
.promise-save { display: flex; gap: 4px; flex-wrap: wrap; }
.today-foot { text-align: center; font-size: 11px; color: #555; }

/* ---------- Read ---------- */
.read { display: flex; flex-direction: column; overflow: hidden !important; }
.read-tb { flex: none; }
.read-tb select { max-width: 180px; }
.read-ref { width: 120px; }
.read .tabs { flex: none; margin-top: 2px; }
.read-panel, .read-search { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--face); box-shadow: var(--bevel-out); padding: 3px; position: relative; z-index: 0; }
.read-panel[hidden], .read-search[hidden] { display: none; }
.read-split { flex: 1; min-height: 0; display: flex; gap: 3px; }
.read-tree { width: 170px; flex: none; overflow-y: auto; overflow-x: hidden; padding: 2px; }
.read-tree button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 1px 4px; font: inherit; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tree-head { font-weight: 700; }
.tree-kids { padding-left: 8px; }
.tree-book:hover, .tree-book.sel { background: var(--sel); color: var(--seltext); }
.tree-chs { display: flex; flex-wrap: wrap; gap: 1px; padding: 2px 0 4px 6px; }
.read-tree .tree-ch { width: 28px; padding: 1px 0; text-align: center; background: var(--face); box-shadow: var(--bevel-btn); }
.read-tree .tree-ch.sel { background: var(--sel); color: var(--seltext); box-shadow: var(--bevel-btn-down); }
.read-text { background: var(--paper); color: var(--text); flex: 1; min-width: 0; overflow-y: scroll; overflow-x: hidden; padding: 8px 12px !important; box-shadow: var(--bevel-field); }
.read-text, .read-text * { cursor: default; }
.read-h { margin: 0 0 8px; font: 700 18px "Times New Roman", serif; border-bottom: 2px solid #800000; color: #800000; }
.read-verses { line-height: 1.55; }
.rv { cursor: pointer; }
.rv:hover { background: #ffffd0; }
.rv.sel { background: #000080; color: #fff; }
.rv sup { font-size: 0.65em; font-weight: 700; color: #800000; margin-right: 1px; }
.rv.sel sup { color: #ff0; }
.rf-ms { font: 13px/1.5 var(--font); }
.rf-times, .rf-times .rv { font: 16px/1.5 "Times New Roman", Times, serif; }
.rf-vt, .rf-vt .rv { font: 20px/1.2 var(--mono); background-color: #000; color: #0f0; }
.rf-vt .rv:hover { background: #030; }
.rf-vt .read-h { color: #0f0; border-color: #0f0; font-family: var(--mono); }
.rf-vt .rv sup { color: #ff0; }
.rf-comic, .rf-comic .rv { font: 15px/1.5 "Comic Neue", "Comic Sans MS", cursive; }
.read-phone { display: none; gap: 4px; padding: 2px 0 4px; }
.read-phone select { flex: 1; min-width: 0; }
.search-row { display: flex; gap: 4px; padding: 2px; }
.search-row input { flex: 1; min-width: 0; }
.search-status { padding: 2px 4px; }
.search-hits { flex: 1; min-height: 0; overflow-y: scroll; }
.search-hits li { white-space: normal; padding: 3px 4px; cursor: pointer; border-bottom: 1px dotted var(--lo); }
.search-hits mark { background: #ff0; color: #000; }
.read ::-webkit-scrollbar { width: 16px; height: 16px; }
.read ::-webkit-scrollbar-track { background: repeating-conic-gradient(var(--face) 0 25%, var(--hi) 0 50%) 0 0 / 2px 2px; }
.read ::-webkit-scrollbar-thumb { background: var(--face); box-shadow: var(--bevel-out); }
.read ::-webkit-scrollbar-button { background: var(--face); box-shadow: var(--bevel-out); height: 16px; width: 16px; }
.read ::-webkit-scrollbar-button:vertical:decrement { background: var(--face) linear-gradient(135deg, transparent 45%, #000 45% 55%, transparent 55%) no-repeat; }

/* ---------- Fill the Verse ---------- */
.puzzle { padding: 4px; }
.pz-panel { background: var(--face); box-shadow: var(--bevel-out); padding: 8px; position: relative; z-index: 0; }
.pz-panel[hidden] { display: none; }
.pz-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.pz-info { margin-bottom: 4px; font-weight: 700; color: #000080; }
.pz-verse, .pz-gverse { background: #fffbe6; border: 2px inset #c0c0c0; padding: 10px 12px; font: 20px/1.9 "Times New Roman", Times, serif; color: #000; margin: 0 0 8px; user-select: text; }
.pz-ref { margin-top: 6px; font: italic 700 14px/1.2 "Times New Roman", serif; color: #800000; text-align: right; }
.blank { display: inline-block; min-height: 26px; padding: 0 6px; margin: 0 2px; vertical-align: middle; border: 0; border-bottom: 3px solid #000; background: #fff; color: #00a; font: 700 15px var(--font); text-align: center; line-height: 22px; }
.blank.active { background: #ffffa0; outline: 2px dotted #00f; }
.blank.right { background: #7f7; border-color: #080; color: #000; }
.blank.wrong { background: #f99; border-color: #a00; color: #000; animation: pzshake .3s; }
.blank.done.ok { border: 0; color: #060; font: 700 inherit "Times New Roman", serif; background: #dfd; padding: 0 3px; }
@keyframes pzshake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.pz-bank { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 8px; min-height: 30px; }
.chip { background: var(--face); box-shadow: var(--bevel-btn); border: 0; padding: 5px 10px; font: 700 13px var(--font); color: var(--text); }
.chip:active { box-shadow: var(--bevel-btn-down); }
.chip.used, .chip:disabled { color: var(--lo); text-shadow: 1px 1px var(--hi); }
.pz-bank-label { font-size: 11px; }
.pz-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.pz-grid { font: 18px/1.2 var(--mono); background: #fff; box-shadow: var(--bevel-field); padding: 4px 8px; margin: 8px 0 0; white-space: pre-wrap; }
.pz-grid:empty { display: none; }
.pz-gbtns { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.pz-gbtns .btn.right { background: #7f7; }
.pz-gbtns .btn.wrong { background: #f99; }
.pz-gmsg { font-weight: 700; margin: 6px 0; }
.pz-final { text-align: center; padding: 12px 0; }
.share { min-width: 0; width: 100%; }
.share-styles { display: flex; flex-direction: column; gap: 2px; margin: 6px 0; }
.share-out { width: 100%; font: 16px/1.2 var(--mono); resize: none; box-sizing: border-box; }
.dlg-text .wordart { font-size: 32px; }

/* ---------- Guestbook ---------- */
.gb { display: flex; flex-direction: column; overflow: hidden !important; }
.gb-form { flex: none; display: flex; flex-direction: column; gap: 4px; padding: 6px; background: #ffe8f8 linear-gradient(#fff0fc, #ffd8f0); }
.gb-form label { display: flex; align-items: flex-start; gap: 6px; }
.gb-form label > :last-child { flex: 1; min-width: 0; }
.gb-title { display: flex; align-items: center; gap: 8px; }
.gb-btns { display: flex; gap: 6px; }
.gb-list { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; margin: 4px 0 0; padding: 8px; background: #fff; box-shadow: var(--bevel-field); color: #000; font-family: "Times New Roman", serif; font-size: 14px; }
.gb-count-line { text-align: center; margin-bottom: 6px; }
.gb-who { font-size: 13px; color: #000080; }
.gb-badge { display: inline-block; background: #ffd400; color: #800000; border: 1px solid #800000; font: 700 10px var(--font); padding: 0 4px; margin: 2px 0; }
.gb-msg { margin: 3px 0 2px; font-size: 14px; line-height: 1.35; }
.gb-hr { display: block; width: 100%; height: 8px; margin: 8px 0; object-fit: fill; }
.gb-foot { flex: none; padding: 3px 6px; font-size: 10px; color: var(--text); text-align: center; }

/* ---------- Bulletin ---------- */
.bul { background: #fff; color: #000; }
.bul-bar { display: flex; gap: 6px; flex-wrap: wrap; padding: 2px 0 8px; }
.bul-page { border: 3px double #000; padding: 10px 12px; font-family: "Times New Roman", Times, serif; font-size: 14px; background: #fffef8; }
.bul-mast { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 4px double #000; padding-bottom: 6px; }
.bul-mast > div:nth-child(2) { text-align: center; flex: 1; min-width: 0; }
.bul-name { font: 700 28px/1 "Times New Roman", serif; font-variant: small-caps; letter-spacing: 1px; }
.bul-sub { font: italic 14px "Times New Roman", serif; }
.bul-cross svg { display: block; }
.bul-date { text-align: center; font-style: italic; margin: 4px 0; }
.bul-h { margin: 6px 0; text-align: center; font: 700 20px "Times New Roman", serif; background: #000; color: #fff; padding: 2px; }
.bul-cols { display: flex; gap: 14px; flex-wrap: wrap; }
.bul-cols > div { flex: 1 1 200px; min-width: 0; }
.bul h3 { margin: 6px 0 2px; font: 700 15px "Times New Roman", serif; border-bottom: 1px solid #000; text-transform: uppercase; }
.bul ol, .bul ul { margin: 2px 0; padding-left: 20px; }
.bul li { margin-bottom: 3px; }
.bul-prayer { border: 1px dashed #000; padding: 2px 8px 6px; margin-top: 8px; background: #f4f0e0; }
.bul-foot { text-align: center; font-size: 12px; margin: 4px 0 0; }

/* ---------- What's New ---------- */
.wn-banner { text-align: center; }
.wn-banner .marquee { background: #000; color: #0f0; font: 18px var(--mono); padding: 2px 0; margin-top: 4px; }
.y2k-box { text-align: center; background: #000; color: #f33; padding: 8px; margin: 8px 0; border: 3px ridge #888; }
.y2k { display: flex; justify-content: center; gap: 8px; margin: 6px 0; }
.y2k-cell { background: #200; padding: 4px 6px; border: 1px solid #600; }
.y2k-cell b { display: block; font: 400 32px/1 var(--mono); color: #f22; text-shadow: 0 0 6px #f00; }
.y2k-cell small { color: #c88; }
.y2k-box > small { color: #aaa; }
.friday { background: #ffffd0; border: 2px dashed #c60; padding: 6px 8px; margin: 6px 0; }
.wn-list { list-style: none; padding: 0; margin: 6px 0; }
.wn-list li { padding: 4px 0; border-bottom: 1px dotted #888; }
.wn-foot { text-align: center; color: #666; font-size: 11px; margin-top: 8px; }

/* ---------- Members ---------- */
.mem { padding: 4px; }
.mem-panel { background: var(--face); box-shadow: var(--bevel-out); padding: 8px; position: relative; z-index: 0; }
.mem-panel[hidden] { display: none; }
.mem-top { text-align: center; }
.mem-top .marquee { background: #000080; color: #ff0; padding: 2px 0; margin-top: 4px; }
.mem-nick { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
.mem-nick label { flex: 1; min-width: 0; }
.mem-card { display: flex; gap: 10px; justify-content: space-between; align-items: center; background: #fff linear-gradient(#fff, #e8e8ff); border: 3px ridge #888; padding: 8px 10px; flex-wrap: wrap; }
.mem-id b { font-size: 20px; }
.mem-h { margin: 10px 0 4px; font: 700 14px var(--font); }
.mem-ladder { list-style: none; margin: 0; padding: 0; counter-reset: lad; }
.mem-ladder li { counter-increment: lad; padding: 4px 6px 4px 30px; margin-bottom: 2px; position: relative; background: var(--paper); box-shadow: var(--bevel-field); color: #666; }
.mem-ladder li::before { content: counter(lad); position: absolute; left: 6px; top: 4px; width: 18px; height: 18px; text-align: center; background: #999; color: #fff; font-weight: 700; }
.mem-ladder li.done { color: #060; }
.mem-ladder li.done::before { background: #080; content: "\2713"; }
.mem-ladder li.you { color: #000; background: #ffffa0; }
.mem-ladder li.you::before { background: #c00; }
.mem-acts { margin: 8px 0; }
.mem-88 { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.mem-88 svg { display: block; border: 0; }
.hp-form { display: flex; flex-direction: column; gap: 5px; }
.hp-form label { display: flex; gap: 6px; align-items: flex-start; }
.hp-form label > .field, .hp-form label > textarea { flex: 1; min-width: 0; }
.hp-bgs { display: flex; gap: 8px; flex-wrap: wrap; }
.hp-bg { flex-direction: column; align-items: center; gap: 2px; }
.hp-sw { display: block; width: 56px; height: 40px; border: 2px inset #888; background-size: 28px 28px; }
.hp-btns { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0; }
.hp-label { margin: 8px 0 2px; font-weight: 700; }
.hp-prev { border: 3px ridge #888; padding: 8px; min-height: 120px; background-size: 56px 56px; text-align: center; color: #000; overflow-wrap: anywhere; }
.hp-title { margin: 4px 0; font-size: 22px; text-shadow: 1px 1px 0 #0006; }
.hp-midi { font-size: 12px; background: #0008; color: #0f0; margin: 4px 0; }
.hp-foot { font-size: 12px; }

/* ---------- Phone ---------- */
@media (max-width: 640px) {
  .today-verse { font-size: 20px; }
  .read-tree { display: none; }
  .read-phone { display: flex; }
  .read-tb select { max-width: 46vw; }
  .read-ref { width: 90px; flex: 1; }
  .read-floppy span:not(.ic) { display: none; }
  .bul-name { font-size: 22px; }
  .bul-cross svg { width: 40px; height: 40px; }
  .y2k-cell b { font-size: 26px; }
  .y2k { gap: 4px; }
  .pz-verse, .pz-gverse { font-size: 18px; }
  .gb-form label { flex-direction: column; gap: 2px; }
  .gb-form label > :last-child { width: 100%; }
}

.wn-pad { display: inline-block; width: 30px; }
.hp-prev { font-size: 14px; }

/* fixed-light panels keep dark ink on dark themes (night, neon, geocities) */
.today-pair, .today-streak, .promise-out .card, .pz-grid, .gb-form, .bul-page, .bul-prayer, .friday, .mem-card, .rv:hover, .blank.active { color: #000; }

/* dark themes: navy and maroon headings turn light */
html[data-theme="night"] .today-date, html[data-theme="neon"] .today-date, html[data-theme="geocities"] .today-date,
html[data-theme="night"] .pz-info, html[data-theme="neon"] .pz-info, html[data-theme="geocities"] .pz-info { color: #9bd4ff; }
html[data-theme="night"] .today-ref, html[data-theme="neon"] .today-ref, html[data-theme="geocities"] .today-ref,
html[data-theme="night"] .read-h, html[data-theme="neon"] .read-h, html[data-theme="geocities"] .read-h,
html[data-theme="night"] .rv sup, html[data-theme="neon"] .rv sup, html[data-theme="geocities"] .rv sup,
html[data-theme="night"] .pz-ref, html[data-theme="neon"] .pz-ref, html[data-theme="geocities"] .pz-ref { color: #ffb0a0; }
.today-verse { color: #000; }