/* Live demo (live.js). Every measure is in the app's points (the screen is laid out at 402 x 874 and scaled);
   values come from the app's code and tokens: see README, "Fidelidade ao app". */

.lv { overflow: hidden; }
.lv-layer { position: absolute; inset: 0; background: #fff; }
.lv-home { transition: transform 520ms cubic-bezier(.3,.9,.3,1), filter 520ms; transform-origin: 50% 40%; }
.lv-home.is-under { transform: scale(.94); filter: brightness(.97); }
.lv .tile[data-plan] .tile-face { cursor: pointer; transition: transform 160ms var(--ease-q); }
.lv .is-pressed { transform: scale(.96) !important; transition: transform 120ms var(--ease-q) !important; }
:where(.lv button) { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; text-align: inherit; -webkit-tap-highlight-color: transparent; }
.lv button.gcta { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 56px; color: #000; font-size: 17px; font-weight: 600; }
.lv button.gbtn { display: grid; place-items: center; }
.lv .gcta.is-on { opacity: 1; transform: none; }
.lv .gcta.is-disabled { background: #E2DED5; color: #7E7A72; box-shadow: inset 0 0 0 .6px rgba(0,0,0,.12); pointer-events: none; }
.lv .is-pressed.gcta { transform: scale(.96) !important; }

/* the finger of the autoplay */
.finger { position: absolute; z-index: 60; left: 0; top: 0; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: rgba(40,40,40,.22); box-shadow: inset 0 0 0 2px rgba(255,255,255,.75), 0 2px 10px rgba(0,0,0,.18); transition: opacity 200ms; }
.finger.is-on { opacity: 1; }

/* ── plan journey (PlanJourneyScreen) ── */
.jr { z-index: 2; clip-path: inset(0 round 0); transition: clip-path 540ms cubic-bezier(.3,.9,.3,1); }
.jr-glass { position: absolute; left: 0; top: 0; width: 402px; height: 437px;
  -webkit-mask: linear-gradient(#000 0, rgba(0,0,0,.92) 30%, rgba(0,0,0,.62) 50%, rgba(0,0,0,.3) 68%, rgba(0,0,0,.1) 84%, transparent 100%) top / 100% var(--mh, 437px) no-repeat;
          mask: linear-gradient(#000 0, rgba(0,0,0,.92) 30%, rgba(0,0,0,.62) 50%, rgba(0,0,0,.3) 68%, rgba(0,0,0,.1) 84%, transparent 100%) top / 100% var(--mh, 437px) no-repeat; }
.jr-scroll, .stp-scroll { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.jr-scroll::-webkit-scrollbar, .stp-scroll::-webkit-scrollbar { display: none; }
.jr-content { padding-top: 106px; }
/* the soft scroll edge under the bar: the content fades out, the glass behind stays */
.jr-scroll { -webkit-mask: linear-gradient(transparent 70px, #000 118px); mask: linear-gradient(transparent 70px, #000 118px); }
.jr-head { position: relative; padding: 32px 20px 0; }
.jr-head::before { content: ""; position: absolute; inset: 0 0 -24px; z-index: -1;
  background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.92) 30%, rgba(255,255,255,.92) 78%, rgba(255,255,255,0)); }
.jr-head h3 { margin: 0; font-family: var(--serif); font-size: 34px; font-weight: 700; line-height: 1.2; }
.jr-head p { margin: 4px 0 0; font-size: 16px; line-height: 21px; color: #615D56; }
.jr-pill { margin-top: 12px; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 99px;
  background: rgba(255,255,255,.62); -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4);
  box-shadow: inset 0 0 0 .6px rgba(0,0,0,.12), inset 0 1.5px 0 #fff, inset 0 0 12px rgba(0,0,0,.05); }
.jr-pill .bar { flex: 1; height: 6px; border-radius: 3px; background: rgba(0,0,0,.12); overflow: hidden; }
.jr-pill .bar i { display: block; height: 100%; border-radius: 3px; background: #000; transition: width 900ms ease-out; }
.jr-pill b { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.gchip { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 16px; border-radius: 99px; font-size: 12px; font-weight: 600;
  background: rgba(255,255,255,.62); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 .6px rgba(0,0,0,.12), inset 0 1.5px 0 #fff, inset 0 0 12px rgba(0,0,0,.05); }
.gchip svg { width: 12px; height: 12px; }
.gchip.streak { padding: 0 12px; gap: 4px; font-size: 17px; }
.gchip.streak svg { width: 11px; height: 15px; }
.gchip.streak b { font-weight: 600; font-variant-numeric: tabular-nums; }
.gchip.streak.bump b { animation: bump 600ms cubic-bezier(.3,1.6,.5,1); display: inline-block; }
@keyframes bump { 0% { transform: translateY(8px); opacity: 0; } 100% { transform: none; opacity: 1; } }
.jr-path { position: relative; margin-top: 16px; padding-bottom: 420px; } /* room below the last day, so today can scroll up to the upper third with its card under it */
.jr-road { position: absolute; left: 0; top: 0; width: 402px; pointer-events: none; }
.jr-rows { position: relative; }
.jr-prev { display: flex; justify-content: center; padding-top: 16px; }
.jr-week { display: flex; align-items: center; gap: 12px; padding: 24px 32px 20px; }
.jr-week i { flex: 1; height: 1px; border-radius: 1px; background: rgba(0,0,0,.1); }
.jr-week span { height: 28px; padding: 0 12px; display: grid; place-items: center; border-radius: 99px; font-size: 12px; font-weight: 600; color: #615D56;
  background: rgba(255,255,255,.62); box-shadow: inset 0 0 0 .6px rgba(0,0,0,.12), inset 0 1.5px 0 #fff; }
.jr-row { position: relative; display: flex; align-items: center; padding: 16px 20px; min-height: 150px; }
.jr-row.side-r { flex-direction: row-reverse; }
.jr-col { position: relative; width: 164px; flex: none; display: flex; flex-direction: column; align-items: center; }
.jr-side { flex: 1; min-width: 0; padding: 0 0 0 12px; }
.jr-row.side-r .jr-side { padding: 0 12px 0 0; text-align: right; }
.jr-side.today { margin-left: -20px; }
.jr-row.side-r .jr-side.today { margin: 0 -20px 0 0; }
.jr-t { font-size: 17px; font-weight: 600; line-height: 1.294; }
.recs { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.jr-row.side-r .recs { align-items: flex-end; }
.rec { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: #615D56; }
.rec img { width: 14px; height: 14px; opacity: .8; }
.ddc { position: relative; width: 120px; padding: 4px; border-radius: 12px; background: #fff; transform: rotate(var(--tilt));
  box-shadow: inset 0 0 0 .5px rgba(0,0,0,.1), 0 6px 24px rgba(0,0,0,.08); }
.ddc canvas { display: block; width: 112px; height: 149.33px; border-radius: 8px; background: #fff; }
.ddc .seal { position: absolute; right: -8px; top: -8px; width: 26px; height: 26px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.1)); }
.jr-book { position: relative; width: 100px; height: 85px; display: block; }
.jr-book .isobook { position: absolute; left: -6px; top: -6px; width: 112px; height: 96px; }
.is-today .jr-book .isobook { animation: float 2.4s ease-in-out infinite alternate; }
@keyframes float { from { transform: translateY(4px); } to { transform: translateY(-6px); } }
.is-locked .jr-book { opacity: .7; }
.jr-cap { width: 132px; margin-top: 4px; text-align: center; font-size: 12px; font-weight: 500; color: #7E7A72; }
.is-new .ddc { animation: settle 700ms cubic-bezier(.3,1.5,.5,1) both; }
.is-new .ddc .seal { animation: seal 700ms cubic-bezier(.3,1.6,.5,1) 500ms both; }
@keyframes settle { from { transform: rotate(var(--tilt)) scale(.6); opacity: 0; } }
@keyframes seal { from { transform: scale(.05) rotate(-40deg); opacity: 0; } }
.is-wake .jr-book { animation: wake 700ms cubic-bezier(.3,1.5,.5,1); }
@keyframes wake { from { transform: scale(.85); filter: saturate(.1); } }
.jr-nav { position: absolute; z-index: 5; left: 0; right: 0; top: 56px; height: 44px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; }
.jr-navtitle { position: absolute; left: 70px; right: 90px; text-align: center; font-family: var(--serif); font-size: 22px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; }

/* the day card (PlanDayPopover on a PointerCard) */
.pop { position: absolute; z-index: 10; top: calc(100% + 12px); left: calc(20px - var(--cl, 20px)); width: 362px; padding: 20px; border-radius: 24px; background: #fff;
  box-shadow: inset 0 0 0 .5px rgba(0,0,0,.1), 0 4px 24px rgba(0,0,0,.1); text-align: left; opacity: 0; transform: scale(.9); transform-origin: var(--px) 0;
  transition: opacity 250ms, transform 450ms cubic-bezier(.3,1.4,.5,1); }
.jr-row.side-l .pop { --cl: 20px; }
.jr-row.side-r .pop { --cl: 218px; }
.pop.is-in { opacity: 1; transform: none; }
.pop-tip { position: absolute; top: -12px; left: calc(var(--px) - 17px); width: 34px; height: 13px; }
.pop-t { font-family: var(--serif); font-size: 22px; font-weight: 600; line-height: 1.27; }
.pop-f { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 16px; color: #615D56; }
.pop-f span { display: inline-flex; align-items: center; gap: 6px; }
.pop-f img { width: 16px; height: 16px; opacity: .8; }
.pop .gcta { margin-top: 16px; }

/* ── the day (PlanDayScreen as a full-screen cover) ── */
.dy { z-index: 4; transform: translateY(100%); transition: transform 520ms cubic-bezier(.3,.9,.3,1); box-shadow: 0 -10px 40px rgba(0,0,0,.12); }
.dy.is-in { transform: none; }
.dy .dh { z-index: 6; }
.dy .dh .gbtn, .dy .fpill { cursor: pointer; }
.dy-steps { position: absolute; inset: 0; overflow: hidden; }
.stp { position: absolute; inset: 0; background: #fff; transition: transform 500ms cubic-bezier(.3,.9,.3,1), filter 500ms; }
.stp.from-right { transform: translateX(100%); }
.stp.to-left { transform: translateX(-30%); filter: brightness(.96); }
.stp.is-current { box-shadow: -10px 0 30px rgba(0,0,0,.06); }
.stp-scroll { padding-top: 116px; }
.lv-page { position: relative; top: 0; transform: none; }
.lv-cx { position: static; padding: 8px 20px 140px; }
.stp .rd-bar { bottom: 50px; }
.stp .cx-bar { position: absolute; z-index: 5; left: 20px; right: 20px; bottom: 50px; height: 56px; }

/* question (QuestionStep) */
.q-page { padding: 24px 20px 180px; display: flex; flex-direction: column; gap: 20px; }
.q-count { font-size: 16px; font-weight: 600; color: #615D56; }
.q-prompt { font-family: var(--serif); font-size: 22px; font-weight: 600; line-height: 1.27; }
.q-opts { display: flex; flex-direction: column; gap: 12px; }
.lv button.q-opt { min-height: 60px; padding: 12px 16px; border-radius: 16px; font-size: 16px; font-weight: 600; line-height: 21px; text-align: left;
  background: #F7F7F6; box-shadow: inset 0 0 0 .5px #CBC7BF; transition: background 300ms, box-shadow 300ms, opacity 300ms, transform 160ms; }
.lv .q-opt.sel { background: #fff; box-shadow: inset 0 0 0 1.5px #000; }
.lv .q-opt.right { background: linear-gradient(rgba(30,138,76,.08), rgba(30,138,76,.08)), #fff; box-shadow: inset 0 0 0 1.5px #1E8A4C; }
.lv .q-opt.wrong { background: linear-gradient(rgba(201,64,43,.08), rgba(201,64,43,.08)), #fff; box-shadow: inset 0 0 0 1.5px #C9402B; animation: shake 500ms linear; }
.lv .q-opt.dim { opacity: .5; }
@keyframes shake { 0%,33%,66%,100% { transform: none; } 8%,41%,74% { transform: translateX(8px); } 25%,58%,91% { transform: translateX(-8px); } }
.fb { position: absolute; z-index: 6; left: 12px; right: 12px; bottom: 46px; padding: 16px; border-radius: 24px; background: #fff; display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 8px 48px rgba(0,0,0,.16); transform: translateY(130%); opacity: 0; transition: transform 420ms cubic-bezier(.25,1,.4,1), opacity 250ms; }
.fb.is-in { transform: none; opacity: 1; }
.fb-h { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 600; }
.fb.ok .fb-h { color: #1E8A4C; } .fb.no .fb-h { color: #C9402B; }
.fb-dot { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.fb.ok .fb-dot { background: #1E8A4C; } .fb.no .fb-dot { background: #C9402B; }
.fb-dot svg { width: 12px; height: 12px; }
.fb p { margin: 0; font-size: 16px; line-height: 21px; }
.fb small { font-size: 12px; font-weight: 600; color: #615D56; }
.fb .gcta { margin-top: 4px; }

/* reflection (ReflectionStep + NoteComposer) */
.rf-input { width: 100%; min-height: 112px; margin-top: -8px; border: 0; outline: none; resize: none; background: transparent; padding: 0;
  font-family: var(--sans); font-size: 22px; line-height: 1.273; color: #000; caret-color: #F4B400; }
.rf-input::placeholder { color: rgba(60,60,67,.3); }
.rf-foot { position: absolute; z-index: 5; left: 20px; right: 20px; bottom: 122px; display: flex; align-items: flex-end; justify-content: space-between; }
.rf-count { font-size: 12px; color: #7E7A72; padding-bottom: 8px; }
.rf-mic { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: #000;
  background: linear-gradient(to bottom, rgba(249,233,189,0) 35%, rgba(249,233,189,.42) 100%), linear-gradient(#FFD21F, #F7B400 70%);
  box-shadow: inset 0 0 0 .6px rgba(0,0,0,.16), inset 0 1px 0 rgba(249,233,189,.7), inset 0 5px 4px -3px rgba(249,233,189,.8), inset 0 0 6px 2px rgba(211,156,10,.25), 0 2px 4px rgba(211,156,10,.4); }
.rf-mic svg { width: 20px; height: 20px; }

/* prayer (PrayerStep + DawnBackdrop) */
.pr-dawn { position: absolute; inset: 0; background: linear-gradient(#fff 0, #D6E1FF 30%, #F5D6CD 50%, #F9E9BD 70%, #fff 93%); overflow: hidden; }
.pr-sun { position: absolute; inset: 0; background: radial-gradient(55% 55% at 50% 60%, rgba(244,180,0,.35), rgba(244,180,0,0)); animation: breath 7s ease-in-out infinite; }
@keyframes breath { 0%,100% { transform: scale(1); opacity: .7; } 50% { transform: scale(1.12); opacity: 1; } }
.pr-body { position: absolute; inset: 0; padding: 32px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; text-align: center; }
.pr-eyebrow { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #6F551D; margin-bottom: 4px; }
.pr-eyebrow svg { width: 36px; height: 28px; }
.pr-eyebrow span { font-size: 15px; font-weight: 500; text-transform: uppercase; letter-spacing: .02em; }
p.pr-line { margin: 0; font-family: var(--serif); font-size: 28px; line-height: 43px; }
.pr-line { opacity: 0; transform: translateY(12px); transition: opacity 1.1s ease-out, transform 1.1s ease-out; transition-delay: calc(.2s + var(--o) * .8s); }
.pr-line.in { opacity: 1; transform: none; }
.pr-line.amen { color: #6F551D; }

/* day complete (DayCompleteView) */
.dc-step .stp-scroll { padding-top: 78px; }
.dc-page { padding: 0 20px 170px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.dc-title { margin: 0; font-family: var(--serif); font-size: 34px; font-weight: 700; line-height: 1.2; text-align: center; }
.lv button.dc-memory { position: relative; padding: 8px 0; }
.dc-card { width: 248px; border-radius: 24px; overflow: hidden; transform: rotate(-2.5deg); background: #fff; box-shadow: inset 0 0 0 .5px #CBC7BF, 0 6px 24px rgba(0,0,0,.08); }
.dc-card canvas { display: block; width: 248px; height: 248px; background: #fff; }
.dc-cap { padding: 16px; display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center; }
.dc-cap span { font-size: 15px; font-weight: 500; color: #615D56; }
.dc-cap b { font-family: var(--serif); font-size: 17px; font-weight: 400; }
.dc-cap small { font-size: 12px; color: #615D56; }
.dc-photo { position: absolute; left: 50%; top: 132px; transform: translate(-50%, -50%); height: 44px; padding: 0 16px; border-radius: 99px; display: inline-flex; align-items: center; gap: 6px;
  font-size: 15px; font-weight: 500; white-space: nowrap; background: rgba(255,255,255,.66); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 .6px rgba(0,0,0,.12), inset 0 1.5px 0 #fff, 0 4px 14px -6px rgba(0,0,0,.2); }
.dc-photo svg { width: 18px; height: 18px; }
.dc-stats { width: 100%; padding: 16px; border-radius: 24px; background: #F7F7F6; display: flex; flex-direction: column; gap: 16px; }
.dc-row { display: flex; justify-content: space-between; font-size: 13px; color: #615D56; }
.dc-dots { position: relative; width: 100%; max-width: 308px; margin: 0 auto; display: flex; justify-content: space-between; }
.dc-dots::before { content: ""; position: absolute; left: 0; bottom: 0; width: 172px; height: 36px; border-radius: 18px; background: #F9E9BD; }
.dot-col { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dot-col small { font-size: 12px; color: #615D56; }
.dot-col i { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; }
.dot-col i svg { width: 15px; height: 15px; }
.dot-col i.now { background: #F4B400; color: #000; }
.dot-col i.done { color: #6F551D; }
.dot-col i.next { box-shadow: none; border: 1px dashed #CBC7BF; }
.dc-facts { display: flex; gap: 16px; font-size: 12px; color: #615D56; }
.dc-facts b { font-size: 13px; font-weight: 400; color: #000; margin-right: 2px; }
.dc-actions { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; padding: 12px 20px 42px; background: #fff; display: flex; flex-direction: column; gap: 8px; }
.dc-share { min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 17px; font-weight: 600; }
.dc-share svg { width: 18px; height: 18px; }
.sr { animation: sr 550ms cubic-bezier(.2,.9,.25,1) both; animation-delay: calc(.2s + var(--o) * .16s); }
@keyframes sr { from { opacity: 0; transform: translateY(16px); } }
.dc-memory.sr { animation-name: sr; }
.confetti { position: absolute; inset: 0; width: 402px; height: 874px; pointer-events: none; z-index: 20; }

/* person sheet (ReadingContextSheet) */
.ps-head { display: flex; align-items: center; gap: 16px; }
.ps-mono { width: 72px; height: 72px; border-radius: 50%; background: #F9E9BD; color: #6F551D; display: grid; place-items: center; font-size: 22px; font-weight: 600; flex: none; }
.ps-div { border: 0; height: .5px; background: rgba(60,60,67,.29); margin: 24px 0; }
.ps-ref { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 99px; background: #F7F7F6; box-shadow: inset 0 0 0 .5px #CBC7BF; font-size: 15px; font-weight: 500; width: fit-content; }
.ps-ref img { width: 16px; height: 16px; opacity: .8; }
.dy .wsheet { z-index: 30; }

/* hint under the hero deck */

/* ── round 3 (2026-10-15): the app's Rive book, photos on done days, commentary sheet, fixes ── */
/* RiveBook: the 180 x 180 artboard drawn centered over the 100 x 85 slot; locked days at saturation 0.08 */
.rbook { position: absolute; left: -40px; top: -47.5px; width: 180px; height: 180px; pointer-events: none; }
.is-today .jr-book .rbook { animation: float 2.4s ease-in-out infinite alternate; }
.rbook.locked { filter: saturate(.08); }
.ddc-photo { display: block; width: 112px; height: 149.33px; border-radius: 8px; object-fit: cover; background: #F0ECE5; }
/* ReadingControls: the finish capsule takes the bar's place; the two circles stay centered */
.lv .rd-bar button.gcta { position: absolute; inset: 0; width: auto; }
/* DayCompleteView facts: value footnote, label caption, both secondary */
.dc-facts b { color: #615D56; }
/* commentary sheet */
.lv button.cx-open { width: 100%; }
.wsheet-nav { position: relative; }
.ws-navtitle { position: absolute; left: 60px; right: 60px; text-align: center; font-size: 17px; font-weight: 600; }
.cm-attr { margin: 0; font-size: 16px; line-height: 21px; color: #615D56; }
.cm-blocks { display: flex; flex-direction: column; gap: 16px; }
.cm-h { margin: 12px 0 0; font-family: var(--serif); font-size: 17px; font-weight: 600; }
.cm-p { margin: 0; font-family: var(--serif); font-size: 17px; line-height: 33px; }
.cm-v { display: grid; grid-template-columns: 40px 1fr; align-items: baseline; }
.cm-v span { text-align: right; padding-right: 10px; font-size: 12px; font-weight: 600; color: #615D56; }
.cm-v p { margin: 0; font-family: var(--serif); font-size: 17px; line-height: 33px; }
.wsheet-card { overflow: hidden; }

/* ── round 4 (2026-10-15): real plan content, dictation, photo on the day card, the plan's medal ── */
/* ReadingReferenceTitle: a long day reference drops to brandHeadline on two lines; then the chapter heading */
.rd-title--long { font-size: 30px; line-height: 1.27; }
.rd-chapter { font-family: var(--serif); font-size: 22px; font-weight: 600; line-height: 1.27; padding-top: 0; transition: filter 360ms, opacity 360ms; }

/* NoteComposer while dictating: the live text (heard in black, the current guess in tertiary), "Escutando…",
   the black stop circle, and the VoiceGlow behind everything */
.rf-glow { position: absolute; left: 0; top: 0; width: 402px; height: 874px; border-radius: 32px; pointer-events: none; opacity: 0; transition: opacity 250ms; }
.rf-step .stp-scroll { z-index: 1; }
.rf-live { display: none; min-height: 168px; margin-top: -8px; font-size: 22px; line-height: 1.273; color: #000; white-space: pre-wrap; }
.rf-live .guess { color: #7E7A72; }
.rf-step.is-dictating .rf-input { display: none; }
.rf-step.is-dictating .rf-live { display: block; }
.rf-foot { z-index: 6; gap: 12px; }
.rf-status { display: none; flex: 1; min-height: 56px; align-items: center; font-size: 17px; font-weight: 600; }
.rf-step.is-dictating .rf-status { display: flex; }
.rf-step.is-dictating .rf-count { display: none; }
.rf-count { flex: 1; }
.lv button.rf-mic { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: #000;
  background: linear-gradient(to bottom, rgba(249,233,189,0) 35%, rgba(249,233,189,.42) 100%), linear-gradient(#FFD21F, #F7B400 70%);
  box-shadow: inset 0 0 0 .6px rgba(0,0,0,.16), inset 0 1px 0 rgba(249,233,189,.7), inset 0 5px 4px -3px rgba(249,233,189,.8), inset 0 0 6px 2px rgba(211,156,10,.25), 0 2px 4px rgba(211,156,10,.4); }
.lv button.rf-stop { display: none; width: 56px; height: 56px; border-radius: 50%; background: #000; place-items: center; }
.rf-stop i { width: 15px; height: 15px; border-radius: 3px; background: #fff; }
.rf-step.is-dictating button.rf-mic { display: none; }
.rf-step.is-dictating button.rf-stop { display: grid; }
.rf-step .cx-bar { z-index: 6; }

/* DayCompletionMemory: a photo fills the card; the "Adicionar foto" pill becomes a camera circle at the top right */
.dc-memory { position: relative; padding: 8px 0; }
.dc-img { position: relative; width: 248px; height: 248px; }
.dc-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity 500ms ease-out, transform 700ms var(--ease-q); }
.dc-ph.is-in { opacity: 1; transform: none; }
.lv button.dc-photo { transition: all 400ms var(--ease-q); }
.dc-memory.has-photo .dc-photo { left: calc(50% + 86px); top: 44px; width: 44px; padding: 0; justify-content: center; }
.dc-memory.has-photo .dc-photo span { display: none; }
.dc-dots.all-done::before { width: 100%; }

/* PlanCompletionBadgeCelebration: dark overlay, the medal turns to its back and returns, gently swaying */
.bdg { position: absolute; inset: 0; z-index: 40; opacity: 0; transition: opacity 600ms ease-in-out; }
.bdg.is-in { opacity: 1; }
.bdg-bg { position: absolute; inset: 0; background: rgba(0,0,0,.82); -webkit-backdrop-filter: blur(30px) saturate(1.2); backdrop-filter: blur(30px) saturate(1.2); }
.bdg .confetti { z-index: 2; }
.bdg-body { position: absolute; inset: 0; z-index: 1; padding: 86px 24px 42px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; text-align: center;
}
/* staged entrance: backdrop (.is-in), then the medal (.is-medal), then the name and buttons (.is-text) */
.bdg-stage, .bdg-t, .bdg-actions { opacity: 0; transform: translateY(28px); transition: opacity 600ms ease-out, transform 800ms cubic-bezier(.2,.9,.25,1); }
.bdg-stage { transform: translateY(40px) scale(.86); }
.bdg.is-medal .bdg-stage, .bdg.is-text .bdg-t, .bdg.is-text .bdg-actions { opacity: 1; transform: none; }
.bdg.is-text .bdg-actions { transition-delay: 250ms; }
.bdg-stage { width: 100%; height: 340px; display: grid; place-items: center; perspective: 1100px; }
.bdg-sway { transform-style: preserve-3d; animation: bdg-sway 4.5s ease-in-out infinite alternate; }
@keyframes bdg-sway { from { transform: rotateY(-8.6deg) rotateX(2.3deg) translateY(-4.7px); } to { transform: rotateY(8.6deg) rotateX(-2.3deg) translateY(4.7px); } }
.bdg-medal { position: relative; width: 420px; height: 420px; margin: -40px; transform-style: preserve-3d; animation: bdg-turn 5.6s 750ms both; }
@keyframes bdg-turn {
  0% { transform: rotateY(0deg); animation-timing-function: cubic-bezier(.33,1,.68,1); }
  25% { transform: rotateY(180deg); }
  75% { transform: rotateY(180deg); animation-timing-function: cubic-bezier(.33,1,.68,1); }
  100% { transform: rotateY(0deg); }
}
.bdg-medal img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; -webkit-backface-visibility: hidden; backface-visibility: hidden;
  filter: drop-shadow(0 24px 30px rgba(0,0,0,.45)); }
.bdg-medal img.b { transform: rotateY(180deg); filter: sepia(.55) saturate(.7) brightness(.72) contrast(1.1) drop-shadow(0 24px 30px rgba(0,0,0,.45)); }
.bdg-t { display: flex; flex-direction: column; gap: 12px; }
.bdg-t b { font-family: var(--serif); font-size: 30px; font-weight: 700; line-height: 1.27; color: #FAF6EF; }
.bdg-t span { font-size: 17px; color: #A29E96; }
.bdg-actions { width: 100%; display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.bdg-share { height: 56px; border-radius: 99px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 17px; font-weight: 600; color: #FAF6EF;
  background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 .6px rgba(255,255,255,.18), inset 0 1.5px 0 rgba(255,255,255,.2); }
.bdg-share svg { width: 18px; height: 18px; }

/* the journey once the plan is done, and the Home toast */
.jr-finished { position: absolute; z-index: 6; left: 0; right: 0; bottom: 42px; display: flex; justify-content: center; opacity: 0; transform: translateY(16px); transition: all 500ms var(--ease-q); }
.jr-finished.is-in { opacity: 1; transform: none; }
.jr-finished .gchip { height: 56px; padding: 0 28px; font-size: 15px; }
.hm-toast { position: absolute; z-index: 8; left: 20px; right: 20px; bottom: 100px; padding: 12px 16px; border-radius: 16px; display: flex; flex-direction: column; gap: 8px;
  background: rgba(255,255,255,.78); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: inset 0 0 0 .6px rgba(0,0,0,.12), inset 0 1.5px 0 #fff, 0 10px 30px -10px rgba(0,0,0,.25); opacity: 0; transform: translateY(20px); transition: all 500ms var(--ease-q); }
.hm-toast.is-in { opacity: 1; transform: none; }
.hm-row { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; }
.hm-row svg { width: 18px; height: 18px; flex: none; }
.hm-actions { display: flex; gap: 16px; font-size: 15px; font-weight: 600; }
.hm-actions .dim { color: #615D56; }

/* the 3D medal (medal.js): 340 pt stage scaled by 280/220 like the app, so it overflows the stage a little */
.bdg-stage { position: relative; }
.bdg-3d { position: absolute; left: 50%; top: 50%; width: 433px; height: 433px; margin: -216.5px 0 0 -216.5px; opacity: 0; transition: opacity 180ms ease-out; }
.bdg-3d.is-in { opacity: 1; }

/* sheet body scrolls (the commentary is the Hub's whole excerpt) */
.lv .wsheet-card { display: flex; flex-direction: column; padding-bottom: 0; }
.wsheet-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; margin: 0 -20px; padding: 0 20px 32px; }
.wsheet-body::-webkit-scrollbar { display: none; }

/* glass without backdrop-filter (see styles.css): a little more opaque */
.jr-pill, .gchip { background: rgba(255,255,255,.86); }
.dc-photo { background: rgba(255,255,255,.86); }
.hm-toast { background: rgba(255,255,255,.95); }