/* LYNAY design tokens — from Mockups.dc.html option 2a */
:root {
--ly-bg: #fbfcfd;
--ly-card: #ffffff;
--ly-border: #e4e8ec;
--ly-input-border: #d6dce3;
--ly-panel: #f0f3f7;
--ly-tint: #e9eef8;
--ly-ink: #17202b;
--ly-secondary: #3d4752;
--ly-muted: #6b7684;
--ly-faint: #9aa4b0;
--ly-accent: #2456c4;
--ly-success: #1e7d3c;
--ly-success-tint: #e6f4ea;
--ly-warning: #a2660f;
--ly-warning-tint: #fbf1e0;
--ly-danger: #b03a3a;
--ly-danger-tint: #fbeaea;
--ly-track: #e9edf1;
--ly-shadow-primary: 0 3px 10px rgba(36, 86, 196, .25);
--ly-serif: 'Newsreader', Georgia, serif;
--bs-primary: #2456c4;
--bs-primary-rgb: 36, 86, 196;
--bs-body-bg: #fbfcfd;
--bs-body-color: #17202b;
--bs-border-color: #e4e8ec;
--bs-border-radius: 12px;
--bs-link-color: #2456c4;
--bs-body-font-family: 'Instrument Sans', system-ui, sans-serif;
}
body {
background: var(--ly-bg);
color: var(--ly-ink);
font-family: 'Instrument Sans', system-ui, sans-serif;
}
/* ---- Shell: centered single column ---- */
.app-shell { margin: 0 auto; padding: 0 22px 40px; min-height: 100vh; }
.shell-read { max-width: 800px; }
.shell-wizard { max-width: 520px; }
.shell-auth { max-width: 420px; }
/* ---- Top bar ---- */
.topbar {
display: flex; justify-content: space-between; align-items: center;
padding: 18px 0 12px;
}
.topbar .nav-back { font-weight: 600; font-size: 13px; color: var(--ly-muted); text-decoration: none; }
.topbar .nav-back:hover { color: var(--ly-accent); }
.topbar .nav-context { font-weight: 600; font-size: 12px; color: var(--ly-muted); }
.topbar .nav-save {
background: none; border: 0; padding: 0;
font-weight: 600; font-size: 12px; color: var(--ly-accent);
text-decoration: underline; text-underline-offset: 2px;
white-space: nowrap;
}
.topbar .nav-save:hover { color: var(--ly-ink); }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ly-ink); }
.logo-mark {
width: 24px; height: 24px; border-radius: 7px; background: var(--ly-accent); color: #fff;
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 12px;
}
.logo-mark-lg { width: 36px; height: 36px; border-radius: 10px; font-size: 16px; }
.brand .wordmark { font-weight: 700; font-size: 15px; }
.version-chip {
font-weight: 600; font-size: 11px; background: var(--ly-tint); color: var(--ly-accent);
padding: 3px 9px; border-radius: 99px; text-decoration: none;
}
.login-link { font-weight: 600; font-size: 13px; color: var(--ly-accent); text-decoration: none; }
/* ---- Type ---- */
.kicker {
font-weight: 700; font-size: 11px; letter-spacing: .1em; color: var(--ly-accent);
text-transform: uppercase;
}
.eyebrow { font-weight: 500; font-size: 15.5px; color: var(--ly-muted); letter-spacing: .04em; }
.page-h1 { font-weight: 700; font-size: 32px; line-height: 1.15; letter-spacing: -.02em; margin: 10px 0 0; }
.page-h2 { font-weight: 700; font-size: 24px; letter-spacing: -.01em; margin: 0; }
.divider-bar { width: 44px; height: 3px; border-radius: 2px; background: var(--ly-accent); margin: 18px auto 0; }
.manifesto-body { font-family: var(--ly-serif); font-size: 25px; line-height: 1.65; }
.manifesto-body p { margin: 0 0 26px; }
.manifesto-body p:last-child { margin-bottom: 0; }
/* ---- Buttons & links ---- */
.btn-ly-primary {
display: block; width: 100%; background: var(--ly-accent); color: #fff; border: 0;
border-radius: 12px; padding: 15px; text-align: center; text-decoration: none;
font-weight: 600; font-size: 16px; box-shadow: var(--ly-shadow-primary);
transition: background .18s ease, transform .18s ease;
}
.btn-ly-primary:hover { background: #1d49a8; color: #fff; }
.btn-row { display: flex; gap: 10px; }
.btn-row > * { flex: 1 1 0; width: auto; min-width: 0; }
.btn-ly-secondary {
display: block; background: #fff; color: var(--ly-ink);
border: 1px solid var(--ly-input-border); border-radius: 12px; padding: 15px;
text-align: center; text-decoration: none; font-weight: 600; font-size: 16px;
transition: border-color .18s ease, background .18s ease;
}
.btn-ly-secondary:hover { border-color: var(--ly-faint); color: var(--ly-ink); }
.btn-ly-google {
display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
background: #fff; border: 1px solid var(--ly-input-border); border-radius: 12px;
padding: 12px; font-weight: 600; font-size: 14px; color: var(--ly-ink);
text-decoration: none; transition: border-color .18s ease, background .18s ease;
}
.btn-ly-google:hover { border-color: var(--ly-faint); color: var(--ly-ink); }
.link-accent {
font-weight: 600; font-size: 13px; color: var(--ly-accent);
text-decoration: underline; text-underline-offset: 3px;
}
.link-accent:hover { color: #1d49a8; }
.link-plain { font-weight: 600; font-size: 13px; color: var(--ly-accent); text-decoration: none; }
.caption-muted { font-size: 13px; color: var(--ly-muted); }
/* ---- Cards & panels ---- */
.ly-card { background: var(--ly-card); border: 1px solid var(--ly-border); border-radius: 16px; padding: 16px 18px; }
.ly-card-sm { border-radius: 14px; padding: 15px 17px; }
.soft-panel { background: var(--ly-panel); border-radius: 14px; padding: 14px 16px; }
.tint-panel { background: var(--ly-tint); border-radius: 16px; padding: 16px 18px; }
/* ---- Progress ---- */
.progress-slim { height: 6px; background: var(--ly-track); border-radius: 3px; overflow: hidden; }
.progress-slim .fill { height: 100%; background: var(--ly-accent); border-radius: 3px; transition: width .2s ease; }
/* ---- Claim step dots ---- */
.step-dots { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.step-dot {
width: 28px; height: 28px; border-radius: 99px; flex: none;
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 12px; text-decoration: none;
background: #f0f2f5; color: var(--ly-faint);
transition: background .18s ease, color .18s ease;
}
.step-dot.open { background: var(--ly-tint); color: var(--ly-accent); }
.step-dot.current { background: var(--ly-accent); color: #fff; }
/* Verdict colour wins over the current/open fill; `current` shows as a ring instead. */
.step-dot.agree { background: var(--ly-success); color: #fff; }
.step-dot.unsure { background: var(--ly-warning); color: #fff; }
.step-dot.disagree { background: var(--ly-danger); color: #fff; }
.step-dot.current { box-shadow: 0 0 0 2px var(--ly-bg), 0 0 0 4px var(--ly-accent); }
a.step-dot:hover { box-shadow: 0 0 0 2px var(--ly-accent) inset; }
a.step-dot.open:hover { background: var(--ly-tint); color: var(--ly-accent); }
/* ---- Claim step ---- */
.claim-quote { font-family: var(--ly-serif); font-weight: 500; font-size: 19px; line-height: 1.45; margin: 8px 0 0; }
.sub-row {
display: flex; gap: 12px; align-items: center;
background: var(--ly-card); border: 1px solid var(--ly-border); border-radius: 14px;
padding: 14px 16px; text-decoration: none; color: var(--ly-ink);
transition: border-color .18s ease, box-shadow .18s ease;
}
.sub-row:hover { color: var(--ly-ink); border-color: var(--ly-faint); }
.sub-row .row-title { font-weight: 600; font-size: 14px; }
.sub-row .row-meta { font-size: 12px; color: var(--ly-faint); margin-top: 2px; }
.status-circle {
width: 48px; height: 48px; border-radius: 99px; flex: none;
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 13px;
background: #f0f2f5; color: var(--ly-faint);
}
.status-circle.agree { background: var(--ly-success); color: #fff; }
.status-circle.unsure { background: var(--ly-warning); color: #fff; }
.status-circle.disagree { background: var(--ly-danger); color: #fff; }
/* ---- Verdict buttons ---- */
.verdict-row { display: flex; gap: 8px; }
.verdict-btn {
flex: 1; background: #fff; border: 1px solid var(--ly-input-border); border-radius: 10px;
padding: 11px 0; text-align: center; font-weight: 600; font-size: 13px;
color: var(--ly-secondary); cursor: pointer;
transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.verdict-btn:hover { border-color: var(--ly-accent); color: var(--ly-accent); }
.verdict-btn.selected-agree { background: var(--ly-success); border-color: var(--ly-success); color: #fff; }
.verdict-btn.selected-unsure { background: var(--ly-warning); border-color: var(--ly-warning); color: #fff; }
.verdict-btn.selected-disagree { background: var(--ly-danger); border-color: var(--ly-danger); color: #fff; }
.verdict-btn.selected-agree:hover { border-color: var(--ly-success); color: #fff; }
.verdict-btn.selected-unsure:hover { border-color: var(--ly-warning); color: #fff; }
.verdict-btn.selected-disagree:hover { border-color: var(--ly-danger); color: #fff; }
.verdict-panel-label { font-weight: 600; font-size: 13px; color: var(--ly-secondary); }
.verdict-panel-hint { font-weight: 500; font-size: 11px; color: var(--ly-faint); }
/* ---- Subclaim / scripture ---- */
.subclaim-h2 { font-weight: 700; font-size: 22px; line-height: 1.3; letter-spacing: -.01em; margin: 0; }
.scripture-ref { font-weight: 700; font-size: 13px; color: var(--ly-accent); }
.translation-pill {
font-weight: 600; font-size: 10px; background: #f0f2f5; color: var(--ly-muted);
padding: 2px 8px; border-radius: 99px;
}
.scripture-passage { font-family: var(--ly-serif); font-size: 15.5px; line-height: 1.65; margin: 10px 0 0; white-space: pre-wrap; }
.expand-verses { display: inline-block; margin-top: 10px; font-weight: 600; font-size: 12px; color: var(--ly-accent); cursor: pointer; border: 0; background: none; padding: 0; }
.connect-list { display: flex; flex-direction: column; gap: 7px; font-size: 14px; line-height: 1.5; color: #2b3644; }
.connect-list .n { color: var(--ly-accent); font-weight: 700; margin-right: 9px; }
.claim-disclaimer { font-weight: 500; font-size: 13.5px; line-height: 1.55; color: var(--ly-secondary); margin: 0; }
sup.fn-marker { font-size: 10px; font-weight: 700; color: var(--ly-accent); }
.footnote-list { display: flex; flex-direction: column; gap: 10px; font-size: 13px; line-height: 1.5; color: #2b3644; }
.footnote { display: flex; }
.footnote .fn-label { color: var(--ly-accent); font-weight: 700; margin-right: 9px; }
.fn-detail { color: var(--ly-muted); font-size: 12.5px; }
/* ---- Change log ---- */
.current-pill {
font-weight: 700; font-size: 10px; background: var(--ly-accent); color: #fff;
padding: 2px 8px; border-radius: 99px; letter-spacing: .02em;
}
.version-date { font-size: 12px; color: var(--ly-faint); margin-left: auto; }
.version-summary { font-size: 13.5px; line-height: 1.5; color: var(--ly-muted); margin: 8px 0 0; }
.version-summary.current { color: var(--ly-secondary); }
/* ---- Diff ---- */
.diff-para { font-family: var(--ly-serif); font-size: 15.5px; line-height: 1.65; border-radius: 10px; padding: 10px 14px; margin: 0 0 10px; }
.diff-para p { margin: 0; }
.diff-same { color: var(--ly-muted); }
.diff-added { background: var(--ly-success-tint); }
.diff-removed { background: #fdeaea; text-decoration: line-through; text-decoration-color: rgba(180, 60, 60, .5); color: var(--ly-muted); }
/* ---- Forms / auth ---- */
.ly-input {
width: 100%; border: 1px solid var(--ly-input-border); border-radius: 10px;
padding: 11px 12px; font-size: 13px; font-family: inherit; background: #fff; color: var(--ly-ink);
transition: border-color .18s ease;
}
.ly-input::placeholder { color: var(--ly-faint); }
.ly-input:focus { outline: none; border-color: var(--ly-accent); }
.or-divider {
display: flex; align-items: center; gap: 10px; color: var(--ly-faint); font-size: 12px; margin: 14px 0;
}
.or-divider::before, .or-divider::after { content: ""; flex: 1; height: 1px; background: var(--ly-border); }
.google-mark {
width: 18px; height: 18px; border-radius: 99px; flex: none;
background: conic-gradient(#4285f4 0 25%, #34a853 0 50%, #fbbc05 0 75%, #ea4335 0);
}
.form-errors { font-size: 12.5px; color: #b03a3a; margin: 4px 0 0; }
.form-errors ul { margin: 0; padding-left: 18px; }
/* ---- Account bottom sheet ---- */
.offcanvas-bottom.account-sheet {
border-radius: 22px 22px 0 0; height: auto; max-height: 92vh;
max-width: 520px; margin: 0 auto;
box-shadow: 0 -8px 30px rgba(23, 32, 43, .35);
transition: transform .2s ease;
}
.sheet-handle { width: 40px; height: 4px; background: var(--ly-border); border-radius: 2px; margin: 12px auto 16px; }
.sheet-icon {
width: 34px; height: 34px; border-radius: 10px; background: var(--ly-tint); color: var(--ly-accent);
display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; flex: none;
}
.sheet-skip { display: block; width: 100%; text-align: center; font-weight: 600; font-size: 13px; color: var(--ly-muted); background: none; border: 0; padding: 8px 0 0; }
/* ---- Completion ---- */
.summary-verdict { font-weight: 600; font-size: 13px; }
.summary-verdict.agree { color: var(--ly-success); }
.summary-verdict.unsure { color: var(--ly-warning); }
.summary-verdict.disagree { color: var(--ly-danger); }
.summary-verdict.none { color: var(--ly-faint); }