/* SP Verified app (v0.7.162, V2 surfaces v0.7.163): QR blocks,
   the /app/ home, scan, install card, dashboard My QR card,
   packet QR card; events, the feedback inbox, the voice journal
   with the Record Mark, and the public audience feedback block.
   Brand: white + blue (#0D2B6C headings, #1A3F92 accents, #F1F5FE
   washes, #D8E2F7 borders); orange #F5853C primary buttons with
   navy text, navy working buttons with white text, white outline
   alternatives, all radius 999px. The braid is the locked spec:
   a 6px navy #0D2B6C strip with exactly four 3px orange strands
   at 115deg at 19.5/39.5/59.5/79.5 percent.
   Spacing (hard rule, stated in the build report): QR block
   margin 14px auto 2px, QR frame padding 10px, caption margin
   10px 0 0, download button margin-top 12px. /app/ tiles: grid
   gap 14px, tile padding 22px 20px, sections margin-top 28px,
   section cards padding 24px 22px. Dashboard My QR card margin
   18px 0 6px, padding 20px 22px. Packet QR card margin
   26px auto 6px, padding 20px 22px. V2 (0.7.163): event card
   margin 16px 0 0, padding 20px 22px, QR/actions gap 20px and
   10px, actions margin-top 12px; inbox rows padding 16px 0
   with action buttons margin-top 10px, gap 8px, padding 8px
   18px; journal recorder wrap margin 6px 0 4px, gap 18px,
   Record Mark 92px, field labels margin 14px 0 6px, entries
   padding 16px 0; audience feedback block padding 22px,
   quotes margin 0 0 14px. */

/* v0.7.173: the app page renders its own H1; Divi's entry title is the duplicate. */
body.spp-app-page h1.entry-title.main_title { display: none !important; }

.spp-braid { display: block; height: 6px; background-color: #0D2B6C; background-image: linear-gradient(115deg, transparent 0 19.5%, #F5853C 19.5% calc(19.5% + 3px), transparent calc(19.5% + 3px) 39.5%, #F5853C 39.5% calc(39.5% + 3px), transparent calc(39.5% + 3px) 59.5%, #F5853C 59.5% calc(59.5% + 3px), transparent calc(59.5% + 3px) 79.5%, #F5853C 79.5% calc(79.5% + 3px), transparent calc(79.5% + 3px)); }

/* ---------- Shared QR block ---------- */
.spp-qr-block { margin: 14px auto 2px; text-align: center; }
.spp-qr-frame { display: inline-block; background: #FFFFFF; border: 1px solid #D8E2F7; border-radius: 12px; padding: 10px; line-height: 0; }
.spp-qr-frame img, .spp-qr-frame canvas { display: block; }
.spp-qr-cap { margin: 10px 0 0; font-size: 0.88rem; color: #64748B; line-height: 1.5; }
.spp-qr-url { margin: 6px 0 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9rem; color: #0D2B6C; word-break: break-all; }
.spp-qr-dl { margin-top: 12px; background: #F5853C; color: #0D2B6C; border: none; border-radius: 999px; padding: 11px 24px; font-size: 0.92rem; font-weight: 800; cursor: pointer; }
.spp-qr-dl:hover { filter: brightness(1.05); }

/* ---------- Buttons (app surfaces) ---------- */
.spp-app-btn { display: inline-block; border-radius: 999px; padding: 12px 26px; font-weight: 700; font-size: 1rem; text-decoration: none; cursor: pointer; border: 1.5px solid transparent; line-height: 1.25; }
.spp-app-btn-primary { background: #F5853C; color: #0D2B6C; border-color: #F5853C; }
.spp-app-btn-navy { background: #0D2B6C; color: #FFFFFF; border-color: #0D2B6C; }
.spp-app-btn-outline { background: #FFFFFF; color: #0D2B6C; border-color: #0D2B6C; }

/* ---------- /app/ home ---------- */
.spp-app { max-width: 1180px; margin: 0 auto; padding: 8px 4px 48px; color: #3B4A68; }
.spp-app .spp-braid { margin: 0 0 22px; border-radius: 3px; }
.spp-app-head { display: flex; align-items: center; gap: 16px; margin: 0 0 8px; }
.spp-app-head img { width: 56px; height: 56px; border-radius: 14px; display: block; }
.spp-app-head h1 { margin: 0; font-size: 2.25rem; line-height: 1.15; color: #0D2B6C; letter-spacing: -0.01em; }
.spp-app-lede { margin: 6px 0 0; font-size: 1.02rem; line-height: 1.55; }
.spp-app-member { margin: 14px 0 0; display: inline-block; background: #F1F5FE; border: 1px solid #D8E2F7; color: #0D2B6C; border-radius: 999px; padding: 5px 16px; font-size: 0.88rem; font-weight: 700; }

.spp-app-install { margin: 22px 0 0; background: #F1F5FE; border: 1px solid #D8E2F7; border-radius: 16px; padding: 20px 22px; }
.spp-app-install h2 { margin: 0 0 6px; font-size: 1.05rem; color: #0D2B6C; }
.spp-app-install p { margin: 0 0 10px; line-height: 1.55; font-size: 0.95rem; }
.spp-app-install p:last-child { margin-bottom: 0; }
.spp-app-install .spp-app-btn { margin-top: 4px; }

.spp-app-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 26px 0 0; }
.spp-app-tile { display: block; background: #FFFFFF; border: 1px solid #D8E2F7; border-radius: 16px; padding: 22px 20px; text-decoration: none; color: #3B4A68; box-shadow: 0 1px 4px rgba(13, 43, 108, 0.06); }
a.spp-app-tile:hover { border-color: #1A3F92; }
.spp-app-tile .spp-app-tile-ico { display: block; width: 40px; height: 40px; color: #0D2B6C; }
.spp-app-tile .spp-app-tile-ico svg { width: 40px; height: 40px; }
.spp-app-tile h2 { margin: 12px 0 4px; font-size: 1.15rem; color: #0D2B6C; }
.spp-app-tile p { margin: 0; font-size: 0.92rem; line-height: 1.5; }
.spp-app-tile .spp-app-big { display: block; margin: 10px 0 0; font-size: 1.6rem; font-weight: 800; color: #0D2B6C; line-height: 1.1; }
.spp-app-status { display: inline-block; margin: 10px 0 0; font-size: 0.875rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 999px; padding: 3px 10px; }
.spp-app-status-live { background: #F1F5FE; color: #0D2B6C; border: 1px solid #0D2B6C; }
.spp-app-status-coming { background: #FFFFFF; color: #64748B; border: 1px solid #D8E2F7; }
.spp-app-tile-off { opacity: 0.75; }

.spp-app-sec { margin: 28px 0 0; background: #FFFFFF; border: 1px solid #D8E2F7; border-radius: 16px; padding: 24px 22px; }
.spp-app-sec h2 { margin: 0 0 6px; font-size: 1.4rem; color: #0D2B6C; }
.spp-app-sec > p { margin: 0 0 14px; line-height: 1.55; font-size: 0.97rem; }
.spp-app-sec .spp-qr-block { margin-top: 6px; }

.spp-app-scan-video { display: none; width: 100%; max-width: 420px; margin: 14px auto 0; border-radius: 12px; border: 1px solid #D8E2F7; background: #0D2B6C; }
.spp-app-scan-video.on { display: block; }
.spp-app-scan-status { margin: 12px 0 0; font-size: 0.92rem; color: #64748B; text-align: center; }
.spp-app-scan-actions { text-align: center; margin: 14px 0 0; }
.spp-app-form { margin: 18px 0 0; border-top: 1px solid #D8E2F7; padding-top: 18px; }
.spp-app-form label { display: block; font-weight: 700; color: #0D2B6C; font-size: 1rem; margin: 0 0 8px; }
.spp-app-form-row { display: flex; gap: 10px; flex-wrap: wrap; }
.spp-app-form input[type="text"] { flex: 1 1 220px; border: 1px solid #D8E2F7; border-radius: 999px; padding: 12px 18px; font-size: 1rem; color: #0D2B6C; background: #FFFFFF; }
.spp-app-form input[type="text"]:focus { outline: 2px solid #1A3F92; outline-offset: 1px; }
.spp-app-note { margin: 26px 0 0; text-align: center; font-size: 1rem; color: #64748B; line-height: 1.55; }

@media (max-width: 620px) {
	.spp-app { padding-bottom: 36px; }
	.spp-app-head h1 { font-size: 1.55rem; }
	.spp-app-tiles { gap: 12px; margin-top: 22px; }
	.spp-app-tile { padding: 18px 16px; }
	.spp-app-sec { padding: 20px 16px; margin-top: 22px; }
}

/* ---------- Dashboard My QR card ---------- */
.spp-myqr-card { margin: 18px 0 6px; background: #F1F5FE; border: 1px solid #D8E2F7; border-radius: 16px; padding: 20px 22px; display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.spp-myqr-card .spp-qr-block { margin: 0; text-align: left; }
.spp-myqr-main { flex: 1 1 260px; min-width: 240px; }
.spp-myqr-main h2 { margin: 0 0 6px; font-size: 1.2rem; font-weight: 800; color: #0D2B6C; }
.spp-myqr-main p { margin: 0 0 10px; line-height: 1.55; font-size: 0.95rem; color: #3B4A68; }
.spp-myqr-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.spp-myqr-actions .spp-qr-dl { margin-top: 0; padding: 12px 26px; font-size: 0.95rem; line-height: 1.25; border: 1.5px solid #F5853C; }
.spp-myqr-actions .spp-app-member { margin-top: 0; }
.spp-myqr .spp-myqr-actions { justify-content: center; }
@media (max-width: 620px) {
	.spp-myqr-card { padding: 18px 16px; }
	.spp-myqr-card .spp-qr-block { margin: 0 auto; text-align: center; }
}

/* ---------- Packet QR card ---------- */
.spp-packet-qr { margin: 26px auto 6px; max-width: 360px; background: #F1F5FE; border: 1px solid #D8E2F7; border-radius: 16px; padding: 20px 22px; text-align: center; }
.spp-packet-qr h2 { margin: 0 0 4px; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.08em; color: #1A3F92; }
.spp-packet-qr .spp-qr-block { margin-top: 8px; }

/* ---------- V2: events ---------- */
.spp-ev-note { border-radius: 12px; padding: 12px 16px; font-size: 0.94rem; margin: 0 0 14px; }
.spp-ev-note.ok { background: #F1F5FE; border: 1px solid #D8E2F7; color: #0D2B6C; }
.spp-ev-note.err { background: #FEF2F2; border: 1px solid #FECACA; color: #7F1D1D; }
.spp-ev-card { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; margin: 16px 0 0; background: #F8FAFF; border: 1px solid #D8E2F7; border-radius: 14px; padding: 20px 22px; }
.spp-ev-card .spp-qr-block { margin: 0; }
.spp-ev-main { flex: 1 1 300px; min-width: 260px; }
.spp-ev-main h3 { margin: 0 0 4px; font-size: 1.08rem; color: #0D2B6C; }
.spp-ev-meta { margin: 0 0 4px; font-size: 0.9rem; color: #64748B; line-height: 1.5; }
.spp-ev-main .spp-qr-url { margin: 8px 0 0; font-size: 0.84rem; }
.spp-ev-next { border: 2px solid #F5853C; }
.spp-ev-next-label { display: inline-block; margin: 0 0 8px; padding: 3px 12px; border-radius: 999px; background: #F5853C; color: #0D2B6C; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.spp-ev-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.spp-ev-create { margin: 20px 0 0; border-top: 1px solid #D8E2F7; padding-top: 16px; }
.spp-ev-create summary { font-weight: 700; color: #0D2B6C; cursor: pointer; font-size: 1rem; }
.spp-ev-form { margin-top: 6px; max-width: 520px; }
.spp-ev-form label { display: block; font-weight: 700; color: #0D2B6C; font-size: 1rem; margin: 14px 0 6px; }
.spp-ev-form input[type="text"], .spp-ev-form input[type="email"], .spp-ev-form input[type="date"], .spp-ev-form textarea { width: 100%; border: 1px solid #D8E2F7; border-radius: 10px; padding: 11px 13px; font-size: 1rem; color: #3B4A68; background: #FFFFFF; box-sizing: border-box; }
.spp-ev-form textarea { min-height: 76px; resize: vertical; font-family: inherit; }
.spp-ev-form .spp-app-btn { margin-top: 18px; }
.spp-ev-hint { font-size: 0.86rem; color: #64748B; margin: 12px 0 0; line-height: 1.5; }
.spp-ev-planner { margin-top: 14px; border-top: 1px solid #D8E2F7; padding-top: 14px; }
.spp-ev-planner p { margin: 0 0 6px; font-size: 0.93rem; line-height: 1.5; }
.spp-ev-planner .spp-pl-link { word-break: break-all; font-size: 0.86rem; color: #64748B; }
.spp-ev-edit { margin-top: 10px; }
.spp-ev-edit summary { font-weight: 700; color: #0D2B6C; cursor: pointer; font-size: 0.93rem; }

/* ---------- V2: feedback inbox ---------- */
.spp-fb-event { margin: 22px 0 4px; font-size: 1.05rem; color: #0D2B6C; }
.spp-fb-row { border-top: 1px solid #D8E2F7; padding: 16px 0; }
.spp-fb-row:first-of-type { border-top: 0; }
.spp-fb-meta { margin: 0 0 6px; font-size: 0.9rem; color: #64748B; line-height: 1.55; }
.spp-fb-status { display: inline-block; background: #F1F5FE; border: 1px solid #D8E2F7; color: #1A3F92; font-size: 0.72rem; font-weight: 800; border-radius: 999px; padding: 2px 10px; text-transform: uppercase; letter-spacing: 0.05em; margin-right: 6px; }
.spp-fb-approved .spp-fb-status { background: #0D2B6C; border-color: #0D2B6C; color: #FFFFFF; }
.spp-fb-reported, .spp-fb-blocked, .spp-fb-dismissed { opacity: 0.72; }
.spp-fb-line { margin: 0 0 6px; line-height: 1.55; font-size: 0.96rem; }
.spp-fb-row audio { display: block; margin: 6px 0 2px; max-width: 100%; }
.spp-fb-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.spp-fb-btn { padding: 8px 18px; font-size: 0.88rem; }

/* ---------- V2: the Record Mark + journal ---------- */
.spp-rec-wrap { display: flex; align-items: center; gap: 18px; margin: 6px 0 4px; }
.spp-recmark { position: relative; width: 92px; height: 92px; flex: none; border-radius: 50%; border: 3px solid #0D2B6C; background: #FFFFFF; padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.spp-recmark img { width: 64px; height: 64px; border-radius: 14px; display: block; }
.spp-recmark-dot { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: transparent; border: 2px solid transparent; }
.spp-recmark.is-recording { border-color: #F5853C; animation: spp-rec-pulse 1.6s ease-in-out infinite; }
.spp-recmark.is-recording .spp-recmark-dot { background: #D92D20; border-color: #D92D20; }
.spp-recmark.is-recording img { opacity: 0.25; }
.spp-recmark.is-paused { border-color: #F5853C; }
.spp-recmark.is-paused .spp-recmark-dot { background: transparent; border-color: #D92D20; }
.spp-recmark.is-paused img { opacity: 0.25; }
.spp-recmark.is-saved { border-color: #12805C; }
@keyframes spp-rec-pulse { 0% { box-shadow: 0 0 0 0 rgba(245, 133, 60, 0.45); } 50% { box-shadow: 0 0 0 10px rgba(245, 133, 60, 0); } 100% { box-shadow: 0 0 0 0 rgba(245, 133, 60, 0); } }
.spp-rec-side { display: flex; flex-direction: column; gap: 4px; }
.spp-rec-timer { font-size: 1.5rem; font-weight: 800; color: #0D2B6C; line-height: 1.1; font-variant-numeric: tabular-nums; }
.spp-rec-status { margin: 0; font-size: 0.92rem; color: #64748B; line-height: 1.5; }
.spp-rec-wave { display: none; align-items: flex-end; gap: 3px; height: 18px; }
.spp-rec-wave.on { display: inline-flex; }
.spp-rec-wave i { display: block; width: 4px; height: 6px; background: #F5853C; border-radius: 2px; }
.spp-rec-wave.on i { animation: spp-rec-wave 0.9s ease-in-out infinite; }
.spp-rec-wave.on i:nth-child(2) { animation-delay: 0.12s; }
.spp-rec-wave.on i:nth-child(3) { animation-delay: 0.24s; }
.spp-rec-wave.on i:nth-child(4) { animation-delay: 0.36s; }
.spp-rec-wave.on i:nth-child(5) { animation-delay: 0.48s; }
.spp-rec-wave.on i:nth-child(6) { animation-delay: 0.6s; }
.spp-rec-wave.on i:nth-child(7) { animation-delay: 0.72s; }
@keyframes spp-rec-wave { 0%, 100% { height: 6px; } 50% { height: 17px; } }
.spp-rec-controls { margin: 8px 0 0; }
.spp-jn-fields { margin-top: 16px; max-width: 560px; }
.spp-jn-fields label { display: block; font-weight: 700; color: #0D2B6C; font-size: 1rem; margin: 14px 0 6px; }
.spp-jn-fields select, .spp-jn-fields textarea { width: 100%; border: 1px solid #D8E2F7; border-radius: 10px; padding: 11px 13px; font-size: 1rem; color: #3B4A68; background: #FFFFFF; box-sizing: border-box; font-family: inherit; }
.spp-jn-fields textarea { min-height: 96px; resize: vertical; line-height: 1.55; }
.spp-jn-search { margin: 22px 0 0; border-top: 1px solid #D8E2F7; padding-top: 18px; }
.spp-jn-search label { display: block; font-weight: 700; color: #0D2B6C; font-size: 0.92rem; margin: 0 0 8px; }
.spp-jn-search input[type="text"] { flex: 1 1 200px; border: 1px solid #D8E2F7; border-radius: 999px; padding: 12px 18px; font-size: 1rem; color: #0D2B6C; background: #FFFFFF; }
.spp-jn-search select { border: 1px solid #D8E2F7; border-radius: 999px; padding: 12px 14px; font-size: 0.95rem; color: #0D2B6C; background: #FFFFFF; }
.spp-jn-list { margin-top: 8px; }
.spp-jn-entry { border-top: 1px solid #D8E2F7; padding: 16px 0; }
.spp-jn-meta { margin: 0 0 6px; font-size: 0.9rem; color: #64748B; line-height: 1.55; }
.spp-jn-text { margin: 0 0 6px; line-height: 1.6; font-size: 0.97rem; white-space: pre-wrap; }
.spp-jn-none { color: #64748B; font-style: italic; }
.spp-jn-entry audio { display: block; margin-top: 6px; max-width: 100%; }
@media (max-width: 620px) {
	.spp-recmark { width: 80px; height: 80px; }
	.spp-recmark img { width: 56px; height: 56px; }
	.spp-ev-card { padding: 18px 16px; }
}

/* ---------- V2: public audience feedback (packet + record) ---------- */
.spp-audfb { background: #FFFFFF; border: 1px solid #D8E2F7; border-radius: 16px; padding: 22px; margin: 26px auto 6px; max-width: 720px; }
.spp-audfb h2 { margin: 0 0 4px; font-size: 1.15rem; color: #0D2B6C; text-transform: uppercase; letter-spacing: 0.06em; }
.spp-audfb-note { margin: 0 0 14px; font-size: 0.9rem; color: #64748B; line-height: 1.55; }
.spp-audfb-quote { margin: 0 0 14px; border-left: 3px solid #F5853C; padding: 2px 0 2px 14px; }
.spp-audfb-quote:last-child { margin-bottom: 0; }
.spp-audfb-quote p { margin: 0 0 4px; line-height: 1.6; color: #0D2B6C; font-size: 1rem; }
.spp-audfb-quote cite { font-size: 0.88rem; color: #64748B; font-style: normal; }