/* LIVE ROOMS' LOOK (live/live.css): what's the same in House Church's gatherings and Devotions together, each in its own
   colors: the way back over every app (live/room.js), inviting, who's here, the raised hands, the activities and what
   came of them, prayer requests (live/together.js), and your own notes (live/notes.js). The controls are the site's own
   (nav/ui.css: .ui-btn, .ui-seg, .ui-kicker); an app gives its colors to these by setting the --lt-* names on its window
   (House Church: terracotta by lamplight; Devotions: its own, for whoever it's for). */
body {
  --lt-bg: var(--bg); --lt-card: var(--bg-raised); --lt-soft: color-mix(in srgb, var(--ink) 6%, var(--bg-raised)); --lt-ink: var(--ink); --lt-muted: var(--muted); --lt-line: var(--rule);
  --lt-accent: var(--gold); --lt-honey: #E9AE4C; --lt-sage: #7E9A82; --lt-peach: color-mix(in srgb, var(--gold) 12%, var(--bg-raised));
  --lt-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 5%, transparent), 0 10px 28px -14px color-mix(in srgb, var(--ink) 24%, transparent);
  --lt-glass: color-mix(in srgb, var(--ink) 6%, transparent); --lt-chip-a: #D46F4B; --lt-chip-b: #E79267;
}

/* ---- the way back, over every app (folded to a pulsing dot when it's in the way) */
.lt-chip { position: fixed; right: 14px; bottom: max(calc(var(--bnav-h, 0px) + 14px + env(safe-area-inset-bottom)), calc(var(--lt-lift, 0px) + 10px)); /* (--lt-lift: above the room's own foot bar, live/room.js) */ z-index: 2147483507; /* (over every window, always: the band above them, nav/layers.js) */
  display: inline-flex; align-items: center; gap: 0; max-width: calc(100vw - 28px); padding: 0; overflow: hidden; border: none; border-radius: 999px;
  background: linear-gradient(120deg, var(--lt-chip-a), var(--lt-chip-b)); color: #fff; font: 13.5px var(--sans); box-shadow: 0 12px 30px -10px color-mix(in srgb, var(--lt-chip-a) 70%, transparent); }
.lt-chip.is-devotions { --lt-chip-a: var(--dv, #7B4B61); --lt-chip-b: var(--dv-2, #B7794F); }
.lt-chip[hidden] { display: none; }
.lt-chip.is-in { animation: lt-in 0.4s ease both; }
.lt-chip > button { border: none; background: none; color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.lt-chip-go { display: inline-flex; align-items: center; gap: 10px; min-width: 0; padding: 11px 6px 11px 13px; }
.lt-chip-go span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-chip-f { flex: none; align-self: center; margin: 0 2px 0 4px; padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, 0.22); font: 700 12.5px var(--sans); }
.lt-chip.is-away { --lt-chip-a: #6F675E; --lt-chip-b: #8C8379; }
.lt-chip.is-away .lt-chip-f { background: #fff; color: #2E2B27; }
.lt-chip.is-away .lt-pulse { animation: none; opacity: 0.6; }
.lt-chip-min { flex: none; display: grid; place-items: center; width: 34px; align-self: stretch; padding: 0 6px 0 2px; opacity: 0.85; }
.lt-chip-min svg { width: 16px; height: 16px; }
.lt-chip.is-dot { border-radius: 50%; }
.lt-chip-dot { display: grid; place-items: center; width: 34px; height: 34px; }
.lt-pulse { flex: none; width: 11px; height: 11px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6); animation: lt-pulse 1.8s ease-out infinite; }
.lt-pulse.is-hand { background: #F2BE5C; }
@keyframes lt-pulse { 70% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }
@keyframes lt-in { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .lt-pulse, .lt-chip.is-in { animation: none; } }

/* ---- a panel's words (inviting, activities, a prayer request) */
.lt-kicker { padding-right: 70px; }
.lt-h { margin: 8px 0 8px; font: italic 400 25px/1.2 var(--serif); color: var(--lt-ink); }
.lt-h3 { margin: 20px 0 8px; font: 800 11px var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--lt-muted); }
.lt-sub { margin: 22px 0 10px; font: 800 11px var(--sans); letter-spacing: 0.15em; text-transform: uppercase; color: var(--lt-muted); }
.lt-p { margin: 0 0 12px; font: 14.5px/1.55 var(--sans); color: var(--lt-muted); }
.lt-small { margin: 8px 0 0; font: 13px/1.5 var(--sans); color: var(--lt-muted); }
.lt-soft { font: 15px/1.6 var(--sans); color: var(--lt-muted); }
.lt-link { display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; border: none; background: none; color: var(--lt-accent); font: 700 14px var(--sans); cursor: pointer; }
.lt-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.lt-acts.is-end { justify-content: center; margin: 20px auto 8px; }
.lt-wide { width: 100%; margin-top: 14px; }
.lt-acts .ui-btn svg, .lt-form .ui-btn svg, .lt-wide svg { width: 17px; height: 17px; flex: none; }
.lt-bigcode { margin: 8px 0 14px; padding: 12px; border-radius: 18px; background: var(--lt-peach); text-align: center; font: 800 40px ui-monospace, Menlo, monospace; letter-spacing: 0.14em; color: var(--lt-accent); }
.lt-shareacts { margin: -2px 0 0; }
.lt-shareacts .ui-btn { flex: 1 1 auto; padding: 0 14px; font-size: 14px; }
.lt-qr { display: flex; justify-content: center; margin: 14px auto; padding: 12px; width: fit-content; border-radius: 18px; background: #fff; box-shadow: var(--lt-shadow); }
.lt-qr img, .lt-qr canvas { display: block; }
.lt-how { margin: 10px 0 0; font: 13.5px/1.5 var(--sans); color: var(--lt-muted); }
.lt-how summary { cursor: pointer; font-weight: 700; color: var(--lt-ink); }
.lt-how ul { margin: 8px 0 0; padding-left: 18px; }
.lt-how li { margin: 4px 0; }
.lt-end { margin-top: 22px; }
/* a button asking once more (LiveRoom.sure): big, red, across its row, gently pulsing, till it's tapped again or a few seconds go by */
.lt-sure { flex: 1 1 100% !important; width: 100%; min-height: 54px; padding: 14px 20px !important; border: none !important; border-radius: 16px !important; background: #B3402F !important; color: #fff !important; font: 800 16.5px/1.25 var(--sans) !important; letter-spacing: 0.01em; box-shadow: 0 10px 24px -10px rgba(179, 64, 47, 0.7); animation: lt-sure 1.1s ease-in-out infinite; }
@keyframes lt-sure { 0%, 100% { transform: scale(1); box-shadow: 0 10px 24px -10px rgba(179, 64, 47, 0.7), 0 0 0 0 rgba(179, 64, 47, 0.45); } 50% { transform: scale(1.02); box-shadow: 0 10px 24px -10px rgba(179, 64, 47, 0.7), 0 0 0 8px rgba(179, 64, 47, 0); } }
@media (prefers-reduced-motion: reduce) { .lt-sure { animation: none; } }
/* who's here, and what's handed to them */
.lt-ppl { display: grid; gap: 8px; }
.lt-prow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font: 15px var(--sans); }
.lt-av { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--lt-soft); color: var(--lt-accent); font: 800 14px var(--sans); }
.lt-pname { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lt-pname small { font: 12px var(--sans); color: var(--lt-muted); }
.lt-pbtns { display: flex; flex-wrap: wrap; gap: 6px; }
.lt-turn { padding: 7px 12px; border: none; border-radius: 999px; background: var(--lt-soft); color: var(--lt-muted); font: 700 12.5px var(--sans); cursor: pointer; }
.lt-turn.is-on { background: var(--lt-sage); color: #fff; }

/* ---- forms: an activity, a prayer request */
.lt-form { display: grid; gap: 12px; }
.lt-field { display: block; margin: 0; }
.lt-field > span { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font: 700 13px var(--sans); color: var(--lt-ink); }
.lt-field > span svg { width: 16px; height: 16px; flex: none; }
.lt-field input, .lt-field select, .lt-field textarea, .lt-row3 input, .lt-cresp input, .lt-choice input:not([type]), .lt-text textarea {
  display: block; width: 100%; min-width: 0; box-sizing: border-box; margin: 0; padding: 11px 13px; border: 1.5px solid transparent; border-radius: 14px; background: var(--lt-soft); color: var(--lt-ink); font: 16px/1.4 var(--sans); }
.lt-field textarea, .lt-text textarea { resize: vertical; line-height: 1.5; }
.lt-field input:focus, .lt-field select:focus, .lt-field textarea:focus, .lt-row3 input:focus, .lt-cresp input:focus, .lt-choice input:focus, .lt-text textarea:focus { outline: none; border-color: color-mix(in srgb, var(--lt-accent) 60%, transparent); background: var(--lt-card); }
.lt-field.is-mins input { text-align: center; }
.lt-switch { display: flex; align-items: flex-start; gap: 10px; font: 14.5px/1.45 var(--sans); color: var(--lt-ink); cursor: pointer; }
.lt-switch input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--lt-accent); }
.lt-row2 { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; }
.lt-row2 > .lt-field:first-child:last-child { grid-column: 1 / -1; }
.lt-form > .lt-row2 { grid-template-columns: 1fr 1fr; }
.lt-row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 420px) { .lt-row3 { grid-template-columns: 1fr; } }
.lt-askopts { display: grid; gap: 8px; }
.lt-askopts[hidden] { display: none; }
.lt-askopts .ui-field { width: 100%; box-sizing: border-box; padding: 11px 13px; border: 1.5px solid transparent; border-radius: 14px; background: var(--lt-soft); color: var(--lt-ink); font: 16px var(--sans); }
.lt-choices { display: grid; gap: 8px; }
.lt-choice { display: flex; align-items: center; gap: 10px; }
.lt-choice input[type="radio"] { flex: none; width: 20px; height: 20px; accent-color: var(--gold); }
.lt-have { padding: 12px 14px; border-radius: 16px; background: var(--lt-soft); }
.lt-have p { margin: 4px 0 10px; font: italic 16px/1.4 var(--serif); }
.lt-bwbox { padding: 10px 12px; border-radius: 14px; background: var(--lt-soft); }
.lt-bwbox[hidden] { display: none; }
.lt-bwords { margin: 6px 0 0; line-height: 2.1; }
.lt-bwords button { padding: 3px 7px; border: 1px solid transparent; border-radius: 8px; background: var(--lt-card); color: var(--lt-ink); font: 15px var(--sans); cursor: pointer; }
.lt-bwords button.is-on { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 18%, var(--lt-card)); }
.lt-cresp { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-top: 6px; }
.lt-cresp input { padding: 9px 11px; font-size: 16px; }
/* the leader's tiles: what to start */
.lt-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.lt-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px; border: 1px solid color-mix(in srgb, var(--lt-ink) 10%, transparent); border-radius: 18px; background: var(--lt-card); color: var(--lt-ink); text-align: left; cursor: pointer; }
@media (hover: hover) { .lt-tile:hover { border-color: var(--gold); } }
.lt-tile > svg, .lt-acti { width: 22px; height: 22px; color: var(--lt-accent); }
.lt-acti { display: inline-grid; place-items: center; font: 800 16px/1 var(--sans); }
.lt-tile b { font: 700 15px var(--sans); }
.lt-tile small { font: 12.5px/1.35 var(--sans); color: var(--lt-muted); }
/* the quick check's own buttons */
.lt-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.lt-check { display: inline-flex; align-items: stretch; border-radius: 18px; background: var(--lt-soft); overflow: hidden; }
.lt-qcgo { display: flex; flex-direction: column; gap: 2px; padding: 9px 6px 9px 15px; border: none; background: none; color: var(--lt-ink); font: 600 14.5px var(--sans); cursor: pointer; text-align: left; }
.lt-qcgo small { font: 500 11.5px var(--sans); color: var(--lt-muted); }
.lt-qcdel { padding: 0 12px 0 8px; border: none; background: none; color: var(--lt-muted); font: 18px/1 var(--sans); cursor: pointer; }
@media (hover: hover) { .lt-qcgo:hover, .lt-qcdel:hover { color: var(--lt-accent); } }
/* made ready ahead, started with a tap */
.lt-readys, .lt-lready { display: grid; gap: 8px; }
.lt-lready { margin-top: 16px; }
.lt-ready { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); border-radius: 16px; background: var(--lt-card); color: var(--lt-ink); text-align: left; cursor: pointer; }
.lt-ready b { font: 700 14px var(--sans); color: var(--lt-accent); }
.lt-ready span { grid-column: 1; font: 14.5px/1.35 var(--sans); }
.lt-ready em { grid-row: 1 / span 2; grid-column: 2; padding: 7px 13px; border-radius: 999px; background: var(--gold); color: var(--on-gold, #221E19); font: 700 13px var(--sans); font-style: normal; }
.lt-ready.is-done { opacity: 0.7; }
.lt-ready.is-done em { background: var(--lt-soft); color: var(--lt-ink); }

/* ---- in the top bar: a hand to raise, activities, prayer requests (with how many, new) */
.lt-tool { position: relative; flex: none; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: none; border-radius: 50%; background: var(--lt-glass); color: var(--lt-ink); cursor: pointer; transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; }
.lt-tool svg { width: 20px; height: 20px; }
/* (with its word beside it, where there's room: a bar that's always roomy (.lt-labels), or roomy on a wider screen
   (.lt-labels-wide); the icon alone where there isn't, its name under More and as it's read aloud) */
.lt-tool-l { display: none; }
.lt-labels .lt-tool, .lt-labels .lt-tool.is-up { width: auto; padding: 0 14px 0 11px; gap: 6px; display: inline-flex; align-items: center; border-radius: 999px; font: 700 13.5px var(--sans); white-space: nowrap; }
.lt-labels .lt-tool-l { display: inline; }
.lt-labels .lt-tool[hidden] { display: none; }
@media (min-width: 520px) {
  .lt-labels-wide .lt-tool, .lt-labels-wide .lt-tool.is-up { width: auto; padding: 0 14px 0 11px; gap: 6px; display: inline-flex; align-items: center; border-radius: 999px; font: 700 13.5px var(--sans); white-space: nowrap; }
  .lt-labels-wide .lt-tool-l { display: inline; }
  .lt-labels-wide .lt-tool[hidden] { display: none; }
}
.lt-hint { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; font: 13px/1.45 var(--sans); color: inherit; opacity: 0.9; }
.lt-hint svg { flex: none; width: 17px; height: 17px; margin-top: 1px; }
.lt-tool.is-up { background: var(--gold); color: #fff; transform: translateY(-2px); }
.lt-tool[hidden] { display: none; }
.lt-praybtn i { position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px; box-sizing: border-box; border-radius: 9px; background: var(--lt-accent); color: #fff; font: 700 10.5px/17px var(--sans); font-style: normal; text-align: center; }
.lt-praybtn i[hidden] { display: none; }
.lt-inl { width: 14px; height: 14px; vertical-align: -2px; }
/* the raised hands, at the top of the leader's screen */
.lt-hands { position: relative; z-index: 4; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0 14px; }
.lt-hands:empty { display: none; }
.lt-handup { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border: 1px solid color-mix(in srgb, var(--lt-honey) 50%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--lt-honey) 16%, var(--lt-card)); color: var(--lt-ink); font: 13.5px var(--sans); cursor: pointer; animation: lt-in 0.5s ease both; }
.lt-handup svg { width: 18px; height: 18px; color: var(--lt-honey); animation: lt-wave 1.6s ease-in-out 2; transform-origin: 70% 90%; }
@keyframes lt-wave { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(10deg); } }
@media (prefers-reduced-motion: reduce) { .lt-handup, .lt-handup svg { animation: none; } }

/* ---- a question to everyone: over what's on the screen, answered on each phone, and the answers on every screen together */
.lt-layer { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; padding: 70px 18px 100px; background: color-mix(in srgb, var(--lt-bg) 76%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); overflow-y: auto; }
.lt-layer[hidden], .lt-trivl[hidden] { display: none; }
.lt-trivl { position: absolute; left: 0; right: 0; top: 64px; z-index: 3; display: flex; justify-content: center; padding: 0 14px; pointer-events: none; }
.lt-trivl > .lt-card { pointer-events: auto; max-height: calc(100% - 180px); overflow-y: auto; }
.lt-trivl.is-shown { inset: 0; top: 0; align-items: center; padding: 70px 18px 100px; background: color-mix(in srgb, var(--lt-bg) 76%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); pointer-events: auto; }
.lt-card { width: min(560px, 100%); margin: auto; padding: 24px 22px 18px; box-sizing: border-box; border-radius: 26px; background: var(--lt-card); color: var(--lt-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lt-honey) 40%, transparent), 0 24px 60px -24px rgba(0, 0, 0, 0.45); animation: lt-in 0.4s ease both; text-align: center; }
.lt-eyebrow { display: inline-flex; align-items: center; gap: 6px; font: 800 10.5px var(--sans); letter-spacing: 0.15em; text-transform: uppercase; color: var(--lt-accent); }
.lt-eyebrow svg { width: 15px; height: 15px; flex: none; }
.lt-eyebrow .lt-acti { width: 15px; height: 15px; font-size: 13px; }
.lt-q { margin: 10px 0 18px; font: italic clamp(20px, 4vw, 28px)/1.35 var(--serif); }
.lt-quote { display: block; font: italic clamp(19px, 3.8vw, 26px)/1.45 var(--serif); }
.lt-vmore { color: var(--lt-muted); }
.lt-blank { display: inline-block; min-width: 3.5em; border-bottom: 2px solid var(--lt-accent); color: transparent; }
.lt-opts { display: grid; gap: 8px; margin: 0 0 6px; padding: 0; list-style: none; text-align: left; }
.lt-opts.is-quiet li { padding: 9px 13px; border-radius: 12px; background: var(--lt-soft); font: 15px var(--sans); }
.lt-opts.is-scale { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.lt-opt { padding: 13px 16px; border: 1px solid color-mix(in srgb, var(--lt-ink) 12%, transparent); border-radius: 14px; background: var(--lt-bg); color: var(--lt-ink); font: 600 16px/1.35 var(--sans); text-align: left; cursor: pointer; }
.lt-opts.is-scale .lt-opt { text-align: center; font-size: 14.5px; }
@media (hover: hover) { .lt-opt:hover { border-color: var(--gold); } }
.lt-text { display: grid; gap: 10px; }
.lt-text textarea { background: var(--lt-bg); border-color: color-mix(in srgb, var(--lt-ink) 14%, transparent); border-width: 1px; }
.lt-sent { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 8px; font: 15px var(--sans); color: var(--lt-muted); }
.lt-sent svg { width: 18px; height: 18px; color: var(--lt-sage); }
.lt-sent.is-wait { font-style: italic; } /* (on its way: the leader doesn't have it yet) */
.lt-count { margin: 4px 0 10px; font: 600 13px var(--sans); color: var(--lt-muted); }
.lt-res { display: grid; gap: 8px; text-align: left; }
.lt-bar { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 11px 14px; border-radius: 14px; background: var(--lt-soft); overflow: hidden; font: 15px var(--sans); }
.lt-bar-f { position: absolute; inset: 0 auto 0 0; width: var(--w); background: color-mix(in srgb, var(--lt-honey) 32%, transparent); animation: lt-grow 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes lt-grow { from { width: 0; } }
.lt-bar > b, .lt-bar > em, .lt-bar > small { position: relative; }
.lt-bar > em { font: 700 15px var(--sans); font-style: normal; }
.lt-bar > small { grid-column: 1 / -1; font-size: 12.5px; color: var(--lt-muted); }
.lt-bar.is-top .lt-bar-f { background: color-mix(in srgb, var(--lt-honey) 55%, transparent); }
.lt-bar.is-mine { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--gold) 70%, transparent); }
.lt-bar.is-right { box-shadow: inset 0 0 0 2px var(--lt-sage); }
.lt-said { display: grid; gap: 8px; max-height: 46vh; margin: 0; padding: 0; overflow-y: auto; list-style: none; text-align: left; }
.lt-said li { padding: 11px 14px; border-radius: 14px; background: var(--lt-soft); animation: lt-in 0.4s ease both; }
.lt-said p { margin: 0; font: 15.5px/1.45 var(--sans); }
.lt-said small { display: block; margin-top: 4px; font-size: 12px; color: var(--lt-muted); }
.lt-said li.is-right { box-shadow: inset 3px 0 0 var(--lt-sage); }
.lt-said li.is-me { box-shadow: inset 3px 0 0 var(--lt-accent); }
.lt-ans { margin: 0 0 10px; font: italic clamp(19px, 3.6vw, 26px)/1.4 var(--serif); }
.lt-ans mark { padding: 0 4px; border-radius: 5px; background: color-mix(in srgb, var(--lt-honey) 45%, transparent); color: inherit; }
.lt-with { margin: 0 0 6px; font: 16px var(--sans); }
.lt-groups { display: grid; gap: 6px; margin: 0 0 6px; padding: 0; list-style: none; }
.lt-groups li { padding: 9px 12px; border-radius: 12px; background: var(--lt-soft); font: 15px var(--sans); }
.lt-clock { margin: 8px 0 4px; font: 700 clamp(30px, 7vw, 44px)/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--lt-accent); }
.lt-cloud { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px 14px; margin: 6px 0 12px; }
.lt-cloud span { font: 700 calc(15px * var(--s)) / 1.15 var(--serif); color: var(--lt-ink); animation: lt-in 0.5s ease both; }
.lt-cloud span:nth-child(3n) { color: var(--lt-accent); }
.lt-cloud span:nth-child(4n) { color: color-mix(in srgb, var(--lt-honey) 80%, var(--lt-ink)); }
.lt-why { display: grid; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; text-align: left; font: 13.5px/1.4 var(--sans); color: var(--lt-muted); }
.lt-why b { color: var(--lt-sage); }
.lt-why .is-tale b { color: var(--lt-accent); }
.lt-wmaphost { margin: 0 0 14px; }
.lt-wmap { position: relative; width: 100%; height: min(42vh, 300px); border-radius: 16px; overflow: hidden; background: #1d2a33; }
.lt-wcred { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; margin: 0; padding: 3px 8px; background: rgba(0, 0, 0, 0.45); color: rgba(255, 255, 255, 0.85); font: 9.5px/1.3 var(--sans); text-align: right; }
.lt-wcred a { color: inherit; }
.lt-wpin { width: 26px; height: 34px; background: radial-gradient(circle at 50% 38%, #fff 0 4px, transparent 5px), #E5484D; clip-path: path('M13 34C13 34 0 20 0 13A13 13 0 0 1 26 13C26 20 13 34 13 34Z'); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5)); }
@media (prefers-reduced-motion: reduce) { .lt-bar-f, .lt-said li, .lt-card, .lt-cloud span { animation: none; } }

/* ---- the question up on every screen: over the step, big */
.lt-spot { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; padding: 70px 20px 100px; background: color-mix(in srgb, var(--lt-bg) 72%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); overflow-y: auto; }
.lt-spot[hidden] { display: none; }
.lt-spot-card { max-width: 640px; margin: auto; padding: 28px 28px 24px; border-radius: 28px; background: var(--lt-card); color: var(--lt-ink); text-align: center; box-shadow: 0 0 0 4px color-mix(in srgb, var(--lt-honey) 45%, transparent), 0 0 100px 10px color-mix(in srgb, var(--lt-honey) 28%, transparent); animation: lt-in 0.3s ease; }
.lt-spot-card p { margin: 12px 0 18px; font: italic clamp(22px, 4.4vw, 34px)/1.35 var(--serif); }
.lt-spot-card .ui-btn.is-soft { background: var(--lt-soft); color: var(--lt-ink); }

/* ---- prayer requests: at the prayer, and in the panel */
.lt-prays { margin: 20px auto 0; max-width: 560px; padding: 14px 16px; border-radius: 20px; background: var(--lt-card); color: var(--lt-ink); text-align: left; box-shadow: var(--lt-shadow); }
.lt-prays ul { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.lt-prays li p { margin: 0; font: 15.5px/1.45 var(--sans); }
.lt-prays li small { font-size: 12px; color: var(--lt-muted); }
.lt-prays.is-me { box-shadow: inset 3px 0 0 var(--lt-accent), var(--lt-shadow); }
.lt-prays.is-panel { margin: 0 0 16px; max-width: none; box-shadow: none; background: var(--lt-soft); }

/* ---- your own notes, following (only yours, kept in Yours) */
.lt-qnote { flex: none; align-self: center; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: none; border-radius: 50%; background: var(--lt-soft); color: var(--lt-accent); cursor: pointer; }
.lt-qnote svg { width: 16px; height: 16px; margin: 0; }
.lt-mine { display: block; width: 100%; box-sizing: border-box; margin: 6px 0 4px; padding: 10px 13px; border: 1px solid color-mix(in srgb, var(--lt-accent) 28%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--lt-card) 86%, var(--lt-peach)); color: var(--lt-ink); font: 16px/1.5 var(--sans); text-align: left; resize: vertical; }
.lt-mine[hidden] { display: none; }
.lt-mine.is-spot { margin: 0 0 14px; }
.lt-field.is-mynote { margin: 18px 0 0; }
.lt-field.is-mynote > span { color: var(--lt-accent); }
.lt-minewhere { display: block; margin: 6px 2px 0; font: 12px/1.4 var(--sans); color: var(--lt-muted); }
.lt-minesay { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 18px 0 0; font: 13px/1.45 var(--sans); color: var(--lt-muted); }
.lt-minesay svg { width: 15px; height: 15px; color: var(--lt-accent); }
.lt-minesay .lt-link { padding: 0; font-size: 13px; }
.lt-follow { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.lt-follow small { font: 12px var(--sans); color: var(--lt-muted); }
.lt-follow.is-writing { flex-direction: row; gap: 8px; text-align: left; }
.lt-follow.is-writing svg { flex: none; width: 16px; height: 16px; color: var(--lt-accent); }

/* ---- a phone on its side: more of the screen for what's asked, less around it */
@media (max-height: 500px) {
  .lt-layer, .lt-spot, .lt-trivl.is-shown { padding: 58px 14px 66px; }
  .lt-trivl { top: 52px; }
  .lt-card, .lt-spot-card { padding: 14px 16px 12px; border-radius: 20px; }
  .lt-q { margin: 6px 0 10px; font-size: clamp(18px, 3.2vw, 22px); }
  .lt-spot-card p { margin: 8px 0 12px; font-size: clamp(20px, 3.4vw, 26px); }
  .lt-opts, .lt-res { gap: 6px; }
  .lt-opt, .lt-bar { padding: 9px 13px; }
}

/* ---- a Bible game, together (games/games.js's window over the gathering): the leader's pick of game, and the bar back to it */
.lt-games { display: grid; gap: 8px; margin-top: 10px; }
.lt-gpick { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border: 1px solid var(--lt-line); border-radius: 14px; background: var(--lt-card); color: var(--lt-ink); text-align: left; font: inherit; cursor: pointer; }
.lt-gpick:hover { border-color: color-mix(in srgb, var(--lt-accent) 55%, var(--lt-line)); }
.lt-gpick > svg { flex: none; width: 22px; height: 22px; color: var(--lt-accent); }
.lt-gpick span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lt-gpick b { font: italic 600 16px/1.25 var(--serif); }
.lt-gpick small { font: 13px/1.35 var(--sans); color: var(--lt-muted); }
.lt-gamebar { position: relative; z-index: 3; margin: 8px 12px; }
.lt-gamebar[hidden] { display: none; }
.lt-gamego { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 14px; border: 1.5px solid color-mix(in srgb, var(--lt-accent) 60%, var(--lt-line)); border-radius: 16px; background: color-mix(in srgb, var(--lt-accent) 10%, var(--lt-card)); color: var(--lt-ink); text-align: left; font: inherit; cursor: pointer; box-shadow: var(--lt-shadow); }
.lt-gamego > svg { flex: none; width: 22px; height: 22px; color: var(--lt-accent); }
.lt-gamego span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lt-gamego b { font: 700 14.5px/1.3 var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt-gamego small { font: 12.5px var(--sans); color: var(--lt-muted); }
.lt-gamego em { flex: none; padding: 6px 12px; border-radius: 999px; background: var(--gold); color: var(--on-gold, #221E19); font: 800 13px var(--sans); font-style: normal; }