/* =======================================================================
   JOR Design System — shared across all JOR apps (state once, use many).
   Design tokens + page chrome + reusable components. Pages LINK this and use
   the classes; they must NOT redeclare component CSS inline. Codifies the
   Building Renovation app's brand so the JOR family stays visually locked.
   ======================================================================= */

:root {
  /* palette */
  --ink:#1a1a1a; --ink-2:#2b2b2b; --muted:#777; --muted-2:#888;
  --paper:#f7f5f0; --paper-2:#fafaf7; --line:#ccc; --line-2:#c4c0b4; --rule:#e6e2d8; --desk:#4a4a4a; --white:#fff;
  /* accents */
  --gold:#c8a800; --red:#c0392b; --blue:#2c5f8a; --teal:#4a7c6f; --purple:#8e4ec6;
  /* fonts */
  --serif:'Georgia',serif; --sans:'Helvetica Neue',Arial,sans-serif;
}

/* ---- reset + page chrome ------------------------------------------------ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--desk); font-family: var(--serif); padding: 0 0 48px 0; min-height: 100vh; color: var(--ink); }
.page { background: var(--white); width: 1000px; max-width: 96vw; margin: 0 auto 32px auto; padding: 44px 56px; box-shadow: 0 4px 24px rgba(0,0,0,0.45); }
.section-header { margin: 0 0 22px 0; padding-bottom: 10px; border-bottom: 2px solid var(--ink-2); }
.section-header h1 { font-size: 24px; font-weight: normal; letter-spacing: 0.03em; color: var(--ink); }
.section-header .sub { font-size: 14px; color: var(--muted); margin-top: 8px; font-style: italic; line-height: 1.7; max-width: 70ch; }
.copyright { max-width: 1000px; margin: 0 auto; padding: 0 30px; color: #cfcabf; font-size: 11px; line-height: 1.6; }

/* ---- tiles (landing) ---------------------------------------------------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: 16px; margin-top: 22px; }
.tile { display: block; text-decoration: none; color: inherit; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 20px 22px; box-shadow: 0 2px 8px rgba(0,0,0,0.18); transition: border-color .15s; }
.tile:hover { border-color: var(--ink-2); }
.tile h2 { font-size: 17px; font-weight: bold; letter-spacing: 0.02em; margin-bottom: 6px; }
.tile p { font-size: 13px; color: #666; line-height: 1.55; }
.tile .tile-tag { display:inline-block; font-size:9px; font-weight:bold; letter-spacing:0.1em; text-transform:uppercase; color:#fff; background:var(--muted-2); padding:2px 7px; border-radius:2px; margin-bottom:10px; font-family:var(--sans); }

/* ---- section labels (INFORMATION / TOOLS) ------------------------------- */
.sx-label { display:flex; align-items:baseline; gap:12px; margin:26px 0 12px; }
.sx-label .l { font-size:12px; font-weight:bold; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink); }
.sx-label .rule { flex:1; height:1px; background:#ddd; }
.sx-label .hint { font-size:12px; color:#999; font-style:italic; }

/* ---- cards: info / note / tool ------------------------------------------ */
.info-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; }
.info-card { background:var(--paper); border:1px solid var(--line); border-radius:6px; padding:15px 17px; box-shadow:0 2px 8px rgba(0,0,0,0.14); }
.info-card h3 { font-size:10px; font-weight:bold; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); margin-bottom:9px; }
.info-card p { font-size:12.5px; color:#555; line-height:1.55; }
.legend-row { display:flex; align-items:center; gap:8px; margin:6px 0; font-size:12.5px; color:#444; }
.note-card { background:var(--paper); border:1px solid var(--line); border-radius:6px; padding:16px 20px; margin-top:18px; font-size:13.5px; color:#555; line-height:1.6; }
.note-card strong { color:var(--ink); }
.tool-card { border:1px solid #d6bd5a; border-radius:8px; padding:14px 16px; margin:12px 0; background:#fffefb; }
.tool-card .tc-head { font-size:10px; font-weight:bold; letter-spacing:0.1em; text-transform:uppercase; color:#7a6a3a; margin-bottom:10px; }
.tool-card input[type=search] { width:100%; font-family:var(--serif); font-size:14px; border:1px solid var(--line-2); border-radius:4px; padding:8px 11px; }

/* ---- buttons ------------------------------------------------------------ */
.btn { font-family:var(--serif); font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:#555; background:#fff; border:1px solid var(--line-2); padding:6px 13px; border-radius:4px; cursor:pointer; }
.btn:hover { color:var(--ink); border-color:var(--ink-2); }
.btn.dark { background:var(--ink); color:#fff; border-color:var(--ink); } .btn.dark:hover { background:#000; }
.btn.danger { background:var(--red); color:#fff; border-color:var(--red); }
.btn:disabled { background:#eee; color:#aaa; border-color:#ddd; cursor:not-allowed; }
.btn.sm { font-size:10px; padding:4px 9px; }

/* ---- filters / sort / topic pills --------------------------------------- */
.filters-row { display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.filters-row label { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:0.07em; display:inline-flex; align-items:center; gap:6px; }
.filters-row select { font-family:var(--serif); font-size:13px; border:1px solid var(--line-2); border-radius:4px; padding:5px 8px; background:#fff; }
.showing { margin-left:auto; font-size:11px; color:#999; font-style:italic; }
.tc-group { margin:4px 0; } .tc-group .tcg-l { font-size:9px; color:#999; text-transform:uppercase; letter-spacing:0.1em; margin:8px 0 5px; }
.cloud { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.tag { display:inline-flex; align-items:center; gap:5px; font-family:var(--serif); font-size:11px; color:#555; background:#fff; border:1px solid var(--line-2); border-radius:3px; padding:4px 11px; cursor:pointer; text-transform:uppercase; letter-spacing:0.06em; }
.tag:hover { color:var(--ink); border-color:var(--ink-2); }
.tag.on { background:var(--ink); color:#fff; border-color:var(--ink); border-top:2px solid var(--gold); padding-top:3px; }
.tag .ct { opacity:0.6; font-size:10px; }
.sortbar { display:flex; align-items:center; gap:12px; margin:16px 0 4px; font-size:12px; color:var(--muted); }
.sortbar .si { font-style:italic; } .sortbar .si b { color:var(--ink); font-style:normal; }

/* ---- status / info bar (e.g. plan start date) --------------------------- */
.startbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:var(--paper); border:1px solid var(--line); border-radius:6px; padding:11px 16px; margin:4px 0 4px; }
.startbar.unset { background:#fff7e6; border-color:#e0c25a; }
.startbar .sb-text { font-size:13px; color:var(--ink); } .startbar .sb-text strong { font-weight:bold; }
.startbar .sb-pending { font-size:10px; color:#a07a18; text-transform:uppercase; letter-spacing:0.06em; font-style:italic; }
.startbar .sb-spacer { margin-left:auto; }

/* ---- section dividers --------------------------------------------------- */
.band { background:var(--ink-2); color:#fff; padding:9px 16px; border-radius:5px; margin:20px 0 8px; font-size:13px; font-weight:bold; letter-spacing:0.12em; text-transform:uppercase; display:flex; align-items:baseline; gap:12px; }
.band .bc { font-size:11px; font-weight:normal; letter-spacing:0; opacity:0.6; font-style:italic; }
.divider { font-size:12px; font-weight:bold; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink); border-bottom:2px solid var(--gold); padding-bottom:6px; margin:18px 0 8px; display:flex; align-items:baseline; gap:10px; }
.divider .dc { font-size:11px; font-weight:normal; letter-spacing:0; color:#999; font-style:italic; }

/* ---- expandable database rows (Readings/Prayers/Confessions) ------------ */
.row, .wk { background:var(--paper); border:1px solid var(--line); border-radius:5px; margin:8px 0; overflow:hidden; box-shadow:0 2px 6px rgba(0,0,0,0.14); }
.row.open, .wk.open { background:var(--paper-2); }
.wk-head { display:grid; grid-template-columns:74px 1fr auto 26px; gap:14px; align-items:center; padding:13px 16px; cursor:pointer; }
.wk-head:hover { background:rgba(0,0,0,0.025); }
.wk-num { font-family:var(--sans); font-size:10px; font-weight:bold; letter-spacing:0.08em; text-transform:uppercase; color:#fff; background:var(--ink-2); padding:5px 8px; border-radius:3px; text-align:center; }
.wk-ref { font-size:17px; color:var(--ink); } .wk-ref.open { color:var(--muted-2); font-style:italic; font-size:15px; }
.wk-meta { font-size:11px; color:var(--muted-2); text-align:right; }
.wk-date { display:block; font-style:italic; }
.chev { font-size:13px; color:var(--muted-2); text-align:center; transition:transform .15s; }
.wk.open .chev, .nt.open .chev, .row.open .chev { transform:rotate(90deg); color:var(--ink); }
.wk-body { padding:4px 18px 18px; border-top:1px solid var(--rule); }
.theme-row { display:flex; flex-wrap:wrap; gap:6px; margin-top:13px; }
.theme-tag { font-family:var(--sans); font-size:9px; letter-spacing:0.06em; text-transform:uppercase; color:#6a6a3a; background:#f3efe2; border:1px solid #e0d8c0; border-radius:10px; padding:2px 9px; }
.lbl { font-size:10px; font-weight:bold; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink); border-bottom:1px solid #ddd; padding-bottom:5px; margin:18px 0 10px; display:flex; align-items:center; gap:10px; }
.scripture { font-size:16px; line-height:1.75; color:var(--ink); }
.scripture.clamp { display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.scripture .vn { font-family:var(--sans); font-size:9px; font-weight:bold; color:var(--red); vertical-align:super; margin:0 3px 0 1px; }
.scrip-tools { display:flex; gap:8px; align-items:center; margin-top:8px; flex-wrap:wrap; }
.esvlink { font-size:11px; color:var(--blue); text-decoration:none; text-transform:uppercase; letter-spacing:0.06em; }
.esvlink:hover { text-decoration:underline; }
.loading { font-size:13px; color:var(--muted-2); font-style:italic; padding:4px 0; }
.listen { font-family:var(--serif); font-size:10px; text-transform:uppercase; letter-spacing:0.07em; color:var(--teal); background:#fff; border:1px solid #bcd3c9; border-radius:14px; padding:3px 11px; cursor:pointer; }
.listen:hover { border-color:var(--teal); }
audio { height:30px; margin-top:8px; }

/* nested NT-pairing style row + pairing chips */
.nt { background:#fff; border:1px solid var(--line-2); border-radius:5px; margin:8px 0; border-left:4px solid var(--muted-2); }
.nt.fulfillment { border-left-color:var(--teal); } .nt.typology { border-left-color:var(--blue); }
.nt.citation { border-left-color:var(--gold); } .nt.theme { border-left-color:var(--muted-2); }
.nt-head { display:grid; grid-template-columns:1fr auto 22px; gap:10px; align-items:center; padding:10px 13px; cursor:pointer; }
.nt-head:hover { background:#faf9f5; }
.nt-ref { font-size:15px; color:var(--ink); }
.chip { font-family:var(--sans); font-size:9px; font-weight:bold; letter-spacing:0.07em; text-transform:uppercase; color:#fff; padding:3px 7px; border-radius:3px; justify-self:end; }
.chip.fulfillment { background:var(--teal); } .chip.typology { background:var(--blue); } .chip.citation { background:#a07a18; } .chip.theme { background:var(--muted-2); }
.nt-body { padding:4px 13px 13px; }
.why { margin-top:11px; font-size:13px; color:#4a443b; background:var(--paper); border-left:3px solid var(--gold); padding:9px 12px; line-height:1.55; }
.sources { margin-top:7px; font-size:11px; color:var(--muted-2); font-style:italic; }

/* pull-quote (praise sentence, pastoral summary, assurance of pardon) */
.pullquote { font-size:16px; line-height:1.6; color:var(--ink); font-style:italic; background:var(--paper); border-left:3px solid var(--gold); padding:12px 16px; margin:14px 0 4px; }
.pullquote .pl { font-size:9px; font-style:normal; letter-spacing:0.1em; text-transform:uppercase; color:#a07a18; display:block; margin-bottom:5px; }
.pullquote.pardon { border-left-color:var(--teal); } .pullquote.pardon .pl { color:var(--teal); }

/* ---- modal -------------------------------------------------------------- */
.modal-back { position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:2000; display:flex; align-items:center; justify-content:center; padding:24px; }
.modal { background:#fff; max-width:540px; width:100%; border-radius:6px; box-shadow:0 8px 40px rgba(0,0,0,0.5); padding:30px 34px; max-height:90vh; overflow:auto; }
.modal h2 { font-size:15px; font-weight:bold; letter-spacing:0.1em; text-transform:uppercase; color:var(--red); padding-bottom:10px; border-bottom:2px solid var(--red); margin-bottom:14px; }
.modal .warn { background:#fdecea; border-left:3px solid var(--red); padding:10px 13px; font-size:12.5px; color:#7a2018; line-height:1.55; }
.modal label.fld { display:block; font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:0.08em; margin:16px 0 5px; }
.modal input[type=date], .modal input[type=text] { font-family:var(--serif); font-size:14px; border:1px solid var(--line-2); border-radius:3px; padding:7px 10px; width:100%; }
.modal .preview { font-size:13px; color:var(--ink); background:var(--paper); border-radius:4px; padding:10px 13px; margin-top:12px; line-height:1.6; }
.modal .chk { display:flex; align-items:flex-start; gap:8px; font-size:13px; color:#444; margin-top:14px; cursor:pointer; }
.modal .err { color:var(--red); font-size:12px; font-style:italic; margin-top:10px; }
.modal .actions { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:20px; }
.modal .actions .right { display:flex; gap:8px; }