/* ============================================================
   features.css — UWS 2026
   Shared styling for everything added after the original build:
   home, more, speakers, Q&A, polls, sponsors, networking,
   messaging, CE credits, survey, check-in and schedule actions.

   Loaded via $page_css on every page that needs it. Depends on the
   custom properties declared in app.css (:root).
   ============================================================ */

:root {
    --green:      #15803D;
    --green-bg:   #DCFCE7;
    --amber:      #B45309;
    --amber-bg:   #FEF3C7;
    --red:        #B91C1C;
    --red-bg:     #FEE2E2;
    --violet:     #6D28D9;
    --violet-bg:  #EDE9FE;
    --teal:       #0F766E;
    --teal-bg:    #CCFBF1;
}

/* ── Dark theme accents ──────────────────────────────────────
   The pairs above are a dark foreground on a pale tint, tuned for contrast
   against white. Every one of them inverts badly: #15803D green on the dark
   theme's #161F2E card is around 2:1, well under the 4.5:1 that body text
   needs, and the pale #DCFCE7 tint becomes a glaring light block in the
   middle of a dark screen.

   So the relationship flips. Foregrounds move to the 400-level of each hue —
   light enough to read on a dark surface without being fluorescent — and the
   backgrounds become a low-alpha wash of that same hue.

   rgba rather than a solid hex is what makes the wash work: these tints sit
   on cards (--card-bg), on the page (--bg) and inside sunken chips
   (--surface-sunken), which are three different luminances. A solid tint
   picked for one looks wrong on the other two, while 14% of the accent
   composites correctly over all of them.

   The base theme block lives in app.css; this is here because these five
   pairs are declared here.                                                */
@media (prefers-color-scheme: dark) {
    :root {
        --green:      #4ADE80;
        --green-bg:   rgba(74, 222, 128, 0.14);
        --amber:      #FBBF24;
        --amber-bg:   rgba(251, 191, 36, 0.14);
        --red:        #F87171;
        --red-bg:     rgba(248, 113, 113, 0.14);
        --violet:     #A78BFA;
        --violet-bg:  rgba(167, 139, 250, 0.14);
        --teal:       #2DD4BF;
        --teal-bg:    rgba(45, 212, 191, 0.14);
    }
}

/* ── Generic surface ─────────────────────────────────────── */
.ux-card {
    display: block;
    background: var(--card-bg);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: 18px;
    margin-bottom: 14px;
}

.ux-card--flush { padding: 0; overflow: hidden; }

.ux-section-title {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin: 26px 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.ux-section-title a {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--accent-fg);
}

.ux-muted    { color: var(--text-muted); font-size: 13px; }
.ux-center   { text-align: center; }
.ux-mt       { margin-top: 14px; }
.ux-stack    { display: flex; flex-direction: column; gap: 10px; }
.ux-row      { display: flex; align-items: center; gap: 10px; }
.ux-row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ux-grow     { flex: 1; min-width: 0; }
.ux-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Buttons ─────────────────────────────────────────────── */
.ux-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: none;
    border-radius: 12px;
    padding: 11px 18px;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease;
    background: var(--blue-dark);
    color: #fff;
    line-height: 1.2;
}
.ux-btn:active   { transform: scale(0.97); }
.ux-btn:disabled { opacity: 0.55; cursor: default; transform: none; }
.ux-btn svg      { width: 16px; height: 16px; flex-shrink: 0; }

.ux-btn--ghost {
    background: var(--blue-light);
    color: var(--blue-dark);
}
.ux-btn--outline {
    background: var(--card-bg);
    color: var(--text-secondary);
    border: 1.5px solid var(--border);
}
.ux-btn--danger  { background: var(--red-bg);   color: var(--red); }
.ux-btn--success { background: var(--green-bg); color: var(--green); }
.ux-btn--block   { display: flex; width: 100%; }
.ux-btn--sm      { padding: 8px 13px; font-size: 13px; border-radius: 10px; }

.ux-btn-spinner {
    width: 15px; height: 15px;
    animation: ux-spin 0.7s linear infinite;
}
@keyframes ux-spin { to { transform: rotate(360deg); } }

/* ── Pills / chips ───────────────────────────────────────── */
.ux-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    background: var(--blue-light);
    color: var(--blue-dark);
    white-space: nowrap;
}
.ux-pill svg { width: 12px; height: 12px; }
.ux-pill--green  { background: var(--green-bg);  color: var(--green); }
.ux-pill--amber  { background: var(--amber-bg);  color: var(--amber); }
.ux-pill--red    { background: var(--red-bg);    color: var(--red); }
.ux-pill--violet { background: var(--violet-bg); color: var(--violet); }
.ux-pill--teal   { background: var(--teal-bg);   color: var(--teal); }
.ux-pill--grey   { background: var(--surface-sunken);          color: var(--text-muted); }

.ux-live-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: currentColor;
    animation: ux-pulse 1.6s ease-in-out infinite;
}
@keyframes ux-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ── Avatars ─────────────────────────────────────────────── */
.ux-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue-mid), var(--blue-bright));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 800;
    flex-shrink: 0;
    overflow: hidden;
}
.ux-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ux-avatar--sm { width: 32px; height: 32px; font-size: 12px; }
.ux-avatar--lg { width: 76px; height: 76px; font-size: 26px; }
.ux-avatar--xl { width: 104px; height: 104px; font-size: 34px; }

/* ── Empty states ────────────────────────────────────────── */
.ux-empty {
    background: var(--card-bg);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: 42px 24px;
    text-align: center;
    margin: 16px 0;
}
.ux-empty-icon  { font-size: 34px; display: block; margin-bottom: 10px; opacity: 0.75; }
.ux-empty-title { font-size: 15px; font-weight: 800; margin-bottom: 6px; }
.ux-empty-desc  { font-size: 13.5px; color: var(--text-muted); line-height: 1.5; margin: 0; }

/* ── Toast ───────────────────────────────────────────────── */
.ux-toast {
    position: fixed;
    left: 50%;
    bottom: calc(var(--nav-h) + 18px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%) translateY(12px);
    z-index: 3000;
    background: #111827;
    color: #fff;
    padding: 11px 18px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
    max-width: calc(100vw - 40px);
    text-align: center;
}
.ux-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.ux-toast.is-error   { background: var(--red); }
.ux-toast.is-success { background: var(--green); }

/* ── Nav badge wrapper ───────────────────────────────────── */
.nav-icon-wrap { position: relative; display: inline-flex; }
.nav-icon-wrap .nav-badge {
    position: absolute;
    top: -5px; right: -9px;
    min-width: 17px; height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: #DC2626;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 2px #fff;
}

/* ============================================================
   HOME — Now & Next
   ============================================================ */
.home-greeting {
    padding: 4px 2px 14px;
}
.home-greeting-hi {
    font-size: 22px; font-weight: 800; letter-spacing: -0.02em;
    margin: 0 0 3px;
}
.home-greeting-sub { font-size: 13.5px; color: var(--text-muted); margin: 0; }

.now-card {
    background: linear-gradient(135deg, #05367B 0%, #1B4FBA 60%, #305CDE 100%);
    color: #fff;
    border-radius: var(--card-radius);
    padding: 18px;
    margin-bottom: 14px;
    box-shadow: 0 8px 26px rgba(5,54,123,0.24);
}
.now-card-label {
    font-size: 11px; font-weight: 800; letter-spacing: 0.1em;
    text-transform: uppercase; opacity: 0.8;
    display: inline-flex; align-items: center; gap: 6px;
    margin-bottom: 9px;
}
.now-card-title { font-size: 17px; font-weight: 800; line-height: 1.3; margin: 0 0 8px; }
.now-card-meta  { font-size: 13px; opacity: 0.85; display: flex; flex-wrap: wrap; gap: 12px; }
.now-card-meta span { display: inline-flex; align-items: center; gap: 5px; }
.now-card-meta svg  { width: 13px; height: 13px; }
.now-card-actions   { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.now-card-actions .ux-btn {
    background: rgba(255,255,255,0.16);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.24);
    backdrop-filter: blur(6px);
}

.next-card {
    background: var(--card-bg);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: 16px 18px;
    margin-bottom: 14px;
    display: flex; gap: 14px; align-items: flex-start;
}
.next-card-time {
    text-align: center; flex-shrink: 0; min-width: 54px;
    padding-right: 14px; border-right: 1px solid var(--border);
}
.next-card-time-h { font-size: 17px; font-weight: 800; color: var(--blue-dark); line-height: 1.1; }
.next-card-time-m { font-size: 10.5px; font-weight: 700; color: var(--text-faint); letter-spacing: 0.06em; }
.next-card-title  { font-size: 14.5px; font-weight: 700; line-height: 1.35; margin-bottom: 6px; }

.home-tiles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.home-tile {
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: var(--card-shadow);
    padding: 15px;
    display: flex; flex-direction: column; gap: 8px;
    transition: transform 0.14s ease, box-shadow 0.18s ease;
}
.home-tile:active { transform: scale(0.975); }
.home-tile-icon {
    width: 36px; height: 36px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    background: var(--blue-light); color: var(--blue-dark);
}
.home-tile-icon svg { width: 18px; height: 18px; }
.home-tile-label { font-size: 13.5px; font-weight: 700; }
.home-tile-sub   { font-size: 11.5px; color: var(--text-muted); margin-top: -4px; }

.home-stat-strip {
    display: grid; grid-template-columns: repeat(3, 1fr);
    background: var(--card-bg);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    overflow: hidden;
    margin-bottom: 14px;
}
.home-stat { padding: 14px 8px; text-align: center; border-right: 1px solid var(--border); }
.home-stat:last-child { border-right: none; }
.home-stat-num   { font-size: 19px; font-weight: 800; color: var(--blue-dark); }
.home-stat-label { font-size: 10.5px; font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; }

/* ============================================================
   MORE — hub page
   ============================================================ */
.more-group {
    background: var(--card-bg);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    overflow: hidden;
    margin-bottom: 16px;
}
.more-item {
    display: flex; align-items: center; gap: 13px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    transition: background 0.14s ease;
}
.more-item:last-child { border-bottom: none; }
.more-item:active { background: var(--blue-light); }
.more-item-icon {
    width: 34px; height: 34px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: var(--blue-light); color: var(--blue-dark); flex-shrink: 0;
}
.more-item-icon svg { width: 17px; height: 17px; }
/* display:flex + column is what puts the description on its own line.
   .more-item-label and .more-item-desc are <span>s, so without this they
   flow inline and every row reads as one jammed sentence
   ("AgendaBrowse all sessions") — flagged in Play closed-test feedback. */
.more-item-body  { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.more-item-label { font-size: 14.5px; font-weight: 700; }
.more-item-desc  { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.more-item-chev  { color: var(--text-faint); flex-shrink: 0; }
.more-item-chev svg { width: 16px; height: 16px; }
.more-item-count {
    min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 999px; background: #DC2626; color: #fff;
    font-size: 11px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
.more-item--danger .more-item-icon  { background: var(--red-bg); color: var(--red); }
.more-item--danger .more-item-label { color: var(--red); }

/* ============================================================
   SCHEDULE — add / remove actions
   ============================================================ */
.sched-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border: none; border-radius: 10px;
    padding: 7px 13px;
    font-size: 12.5px; font-weight: 700; font-family: inherit;
    cursor: pointer;
    background: var(--blue-dark); color: #fff;
    transition: transform 0.12s ease, background 0.15s ease;
}
.sched-btn:active   { transform: scale(0.96); }
.sched-btn:disabled { opacity: 0.6; cursor: default; }
.sched-btn svg      { width: 14px; height: 14px; }
.sched-btn--added   { background: var(--green-bg); color: var(--green); }
.sched-btn--remove  { background: var(--red-bg);   color: var(--red); }
.sched-btn--full    { background: var(--surface-sunken);         color: var(--text-faint); cursor: not-allowed; }

.sched-capacity {
    font-size: 11.5px; font-weight: 700; color: var(--text-muted);
    display: inline-flex; align-items: center; gap: 5px;
}
.sched-capacity-bar {
    width: 46px; height: 4px; border-radius: 999px;
    background: var(--border); overflow: hidden;
}
.sched-capacity-fill { height: 100%; background: var(--blue-bright); border-radius: 999px; }
.sched-capacity-fill.is-tight { background: #F59E0B; }
.sched-capacity-fill.is-full  { background: #DC2626; }

.session-actions {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-top: 12px; padding-top: 12px;
    border-top: 1px solid var(--border);
}

/* ============================================================
   SPEAKERS
   ============================================================ */
.speaker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}
.speaker-card {
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: var(--card-shadow);
    padding: 18px 14px;
    text-align: center;
    transition: transform 0.14s ease, box-shadow 0.18s ease;
}
.speaker-card:active { transform: scale(0.975); }
.speaker-card .ux-avatar { margin: 0 auto 10px; }
.speaker-card-name { font-size: 13.5px; font-weight: 800; line-height: 1.3; }
.speaker-card-role { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; line-height: 1.35; }
.speaker-card-count { margin-top: 9px; }

.speaker-hero {
    background: var(--card-bg);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: 26px 20px;
    text-align: center;
    margin-bottom: 14px;
}
.speaker-hero .ux-avatar { margin: 0 auto 14px; }
.speaker-hero-name { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.speaker-hero-role { font-size: 13.5px; color: var(--text-muted); margin-top: 5px; }
.speaker-hero-links { display: flex; justify-content: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.speaker-bio { font-size: 14px; line-height: 1.65; color: var(--text-secondary); }

/* ============================================================
   Q&A
   ============================================================ */
.qa-composer {
    background: var(--card-bg);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: 16px;
    margin-bottom: 16px;
}
/* ── Read-only preview banner (impersonation.php) ───────────
   Sits inside .app-header, which is position:sticky, so it stays on screen
   for the whole session. Amber rather than red: nothing is wrong, but this
   must not be mistakable for ordinary app chrome. An admin who forgets which
   account is on screen is the failure mode this exists to prevent. */
.imp-banner {
    background: #B45309;
    color: #FFFFFF;
    /* Clears the notch/status bar when running as an installed PWA, where
       the header runs up under the system UI. */
    padding-top: env(safe-area-inset-top, 0px);
}

.imp-banner-inner {
    max-width: 680px;
    margin: 0 auto;
    padding: 8px 20px;
    display: flex;
    align-items: center;
    gap: 9px;

    /* Fixed height, deliberately.
       desktop.css adds --imp-banner-h to --header-h so the fixed sidebar
       starts below the whole header rather than overlapping the logo. That
       arithmetic only holds if this height is a known constant — if the
       banner were free to grow with its content, the sidebar offset would
       silently drift out of sync. The Exit button is 32px, so 36px is the
       tightest value that still clears it. Change one, change both. */
    min-height: 36px;
    box-sizing: border-box;
}

.imp-banner-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.imp-banner-text {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.35;
    /* Long names truncate rather than pushing Exit off the edge of a 375px
       screen — the button has to stay reachable. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.imp-banner-exit {
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.2);
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 999px;
    /* 32px rather than the usual 40px floor: this is deliberately compact so
       the banner does not eat the top of every screen being previewed. It is
       a wide target horizontally and is not a primary task. */
    min-height: 32px;
    padding: 0 14px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}

.imp-banner-exit:active { transform: scale(0.97); }

/* ── Add to wallet buttons (badge.php) ──────────────────────
   Apple publishes strict artwork guidelines for the official "Add to Apple
   Wallet" badge asset. These are deliberately *not* that asset — they are
   plain buttons in the app's own visual language, which is permitted and
   avoids shipping a fixed-size PNG that cannot adapt to dark mode or scale
   with the layout. */
.wallet-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 14px;
}

.wallet-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    /* Comfortably above the 40px tap-target floor in the build spec: this is
       tapped one-handed, at a queue, in a hurry. */
    min-height: 50px;
    padding: 0 18px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    /* #000 rather than --text-primary: this is Apple's own wallet-button
       colour and should not follow the app theme. */
    background: #000000;
    color: #FFFFFF;
    border: none;
    cursor: pointer;
    transition: transform 0.12s ease, opacity 0.15s ease;
}

.wallet-btn:active { transform: scale(0.98); }
.wallet-btn svg    { width: 20px; height: 20px; flex-shrink: 0; }

.wallet-btn--google {
    background: var(--card-bg);
    color: var(--text-primary);
    border: 1.5px solid var(--border);
}

/* Applied by badge.php to whichever platform is NOT the current device, so
   the relevant one leads and the other stays available but quieter. */
.wallet-btn--secondary {
    background: var(--card-bg);
    color: var(--text-secondary);
    border: 1.5px solid var(--border);
    min-height: 44px;
    font-size: 14px;
}

/* ── In-app browser camera warning (camera-guard.js) ────────
   Shown above the scanner when the page is running inside a webview that
   cannot be granted camera permission. Amber rather than red: nothing has
   failed yet, and the user still has a way forward. */
.cam-guard {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: var(--amber-bg);
    border: 1.5px solid #FDE68A;
    border-radius: var(--card-radius);
    padding: 14px 16px;
    margin-bottom: 14px;
}

.cam-guard-icon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #FDE68A;
    color: var(--amber);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cam-guard-icon svg { width: 18px; height: 18px; }

.cam-guard-body { flex: 1; min-width: 0; }

.cam-guard-title {
    font-size: 15px;
    font-weight: 800;
    color: #92400E;
    margin-bottom: 4px;
}

.cam-guard-desc {
    margin: 0 0 12px;
    font-size: 13.5px;
    line-height: 1.5;
    color: #92400E;
}

.cam-guard-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.qa-textarea {
    width: 100%;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    /* 16px is a hard floor on every focusable form control — see the
       "iOS FORM CONTROLS" note at the top of app.css. Anything smaller and
       Safari zooms the page on focus and will not zoom back out. */
    font-size: 16px;
    font-family: inherit;
    resize: vertical;
    min-height: 80px;
    color: var(--text-primary);
    background: var(--surface-input);
}
.qa-textarea:focus { outline: none; border-color: var(--accent-fg); background: var(--card-bg); }
.qa-composer-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-top: 11px;
}
.qa-anon {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 600; color: var(--text-muted); cursor: pointer;
}
.qa-anon input { width: 16px; height: 16px; accent-color: var(--blue-bright); }
.qa-count { font-size: 11.5px; color: var(--text-faint); }

.qa-item {
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: var(--card-shadow);
    padding: 15px 16px;
    margin-bottom: 10px;
    display: flex; gap: 13px; align-items: flex-start;
}
.qa-item.is-answered { border-left: 3px solid var(--green); }
.qa-vote {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    background: #F3F6FC; border: 1.5px solid transparent;
    border-radius: 12px; padding: 7px 10px;
    cursor: pointer; flex-shrink: 0; min-width: 46px;
    transition: background 0.14s ease, border-color 0.14s ease, transform 0.12s ease;
    font-family: inherit;
}
.qa-vote:active { transform: scale(0.94); }
.qa-vote svg { width: 15px; height: 15px; color: var(--text-muted); }
.qa-vote-num { font-size: 13px; font-weight: 800; color: var(--text-secondary); }
.qa-vote.is-voted { background: var(--blue-light); border-color: var(--accent-fg); }
.qa-vote.is-voted svg, .qa-vote.is-voted .qa-vote-num { color: var(--blue-dark); }
.qa-body   { flex: 1; min-width: 0; }
.qa-text   { font-size: 14.5px; line-height: 1.5; color: var(--text-primary); }
.qa-meta   { font-size: 11.5px; color: var(--text-faint); margin-top: 7px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qa-answer {
    margin-top: 10px; padding: 10px 12px;
    background: var(--green-bg); border-radius: 10px;
    font-size: 13px; line-height: 1.5; color: #14532D;
}
.qa-session-picker {
    display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 10px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.qa-session-picker::-webkit-scrollbar { display: none; }
.qa-session-tab {
    flex-shrink: 0; padding: 8px 14px; border-radius: 999px;
    background: var(--card-bg); border: 1.5px solid var(--border);
    font-size: 12.5px; font-weight: 700; color: var(--text-secondary);
    white-space: nowrap;
}
.qa-session-tab.is-active { background: var(--blue-dark); border-color: var(--blue-dark); color: #fff; }

/* ============================================================
   POLLS
   ============================================================ */
.poll-card {
    background: var(--card-bg);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: 18px;
    margin-bottom: 14px;
}
.poll-question { font-size: 15.5px; font-weight: 800; line-height: 1.4; margin: 9px 0 14px; }
.poll-option {
    position: relative;
    display: block; width: 100%;
    border: 1.5px solid var(--border);
    background: var(--card-bg);
    border-radius: 12px;
    padding: 13px 15px;
    margin-bottom: 9px;
    font-size: 14px; font-weight: 600; font-family: inherit;
    text-align: left; color: var(--text-primary);
    cursor: pointer; overflow: hidden;
    transition: border-color 0.14s ease, transform 0.12s ease;
}
.poll-option:active   { transform: scale(0.985); }
.poll-option:disabled { cursor: default; }
.poll-option.is-chosen { border-color: var(--accent-fg); background: var(--blue-light); }
.poll-option-fill {
    position: absolute; inset: 0 auto 0 0;
    background: rgba(48,92,222,0.13);
    width: 0; transition: width 0.5s cubic-bezier(0.2,0.8,0.2,1);
    z-index: 0;
}
.poll-option.is-chosen .poll-option-fill { background: rgba(48,92,222,0.24); }
.poll-option-content {
    position: relative; z-index: 1;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.poll-option-pct { font-size: 13px; font-weight: 800; color: var(--blue-dark); flex-shrink: 0; }
.poll-footer { font-size: 12px; color: var(--text-faint); margin-top: 4px; }

/* ============================================================
   DIRECTORY / NETWORKING
   ============================================================ */
.dir-search {
    position: relative;
    margin-bottom: 12px;
}
.dir-search input {
    width: 100%;
    border: 1.5px solid var(--border);
    border-radius: 999px;
    padding: 12px 16px 12px 42px;
    font-size: 16px; font-family: inherit; /* iOS zoom floor — see app.css */
    background: var(--card-bg); color: var(--text-primary);
}
.dir-search input:focus { outline: none; border-color: var(--accent-fg); }
.dir-search-icon {
    position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
    width: 17px; height: 17px; color: var(--text-faint); pointer-events: none;
}
.dir-search-clear {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; padding: 4px;
    color: var(--text-faint); display: none;
}
.dir-search.has-value .dir-search-clear { display: block; }

.dir-filters {
    display: flex; gap: 7px; overflow-x: auto; padding-bottom: 12px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.dir-filters::-webkit-scrollbar { display: none; }
.dir-filter {
    flex-shrink: 0; padding: 7px 14px; border-radius: 999px;
    background: var(--card-bg); border: 1.5px solid var(--border);
    font-size: 12.5px; font-weight: 700; color: var(--text-secondary);
    white-space: nowrap; cursor: pointer; font-family: inherit;
}
.dir-filter.is-active { background: var(--blue-dark); border-color: var(--blue-dark); color: #fff; }

.dir-count { font-size: 12.5px; color: var(--text-muted); margin-bottom: 10px; }

.dir-list { display: flex; flex-direction: column; gap: 9px; }
.dir-row {
    background: var(--card-bg);
    border-radius: 14px;
    box-shadow: var(--card-shadow);
    padding: 13px 15px;
    display: flex; align-items: center; gap: 13px;
    transition: transform 0.13s ease;
}
.dir-row:active { transform: scale(0.985); }
.dir-row.is-me  { outline: 2px solid var(--accent-fg); outline-offset: -2px; }
.dir-row-body   { flex: 1; min-width: 0; }
.dir-row-name   { font-size: 14.5px; font-weight: 700; display: flex; align-items: center; gap: 7px; }
.dir-row-role   { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.dir-row-org    { font-size: 12px; color: var(--text-faint); margin-top: 1px; }
.dir-letter {
    font-size: 12px; font-weight: 800; color: var(--text-faint);
    letter-spacing: 0.08em; margin: 16px 0 7px 4px;
}

.person-hero {
    background: var(--card-bg);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: 26px 20px 20px;
    text-align: center; margin-bottom: 14px;
}
.person-hero .ux-avatar { margin: 0 auto 13px; }
.person-hero-name { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.person-hero-role { font-size: 14px; color: var(--text-secondary); margin-top: 4px; }
.person-hero-org  { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.person-actions   { display: flex; gap: 8px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }

.contact-row {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 0; border-bottom: 1px solid var(--border);
}
.contact-row:last-child { border-bottom: none; }
.contact-row-icon { color: var(--blue-dark); flex-shrink: 0; }
.contact-row-icon svg { width: 17px; height: 17px; }
.contact-row-label { font-size: 11px; font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.05em; }
.contact-row-value { font-size: 14px; font-weight: 600; margin-top: 1px; }

/* ── Messaging ───────────────────────────────────────────── */
.msg-thread-list { display: flex; flex-direction: column; gap: 9px; }
.msg-thread {
    background: var(--card-bg); border-radius: 14px; box-shadow: var(--card-shadow);
    padding: 13px 15px; display: flex; align-items: center; gap: 13px;
}
.msg-thread.is-unread { border-left: 3px solid var(--accent-fg); }
.msg-thread-name    { font-size: 14.5px; font-weight: 700; }
.msg-thread-preview { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.msg-thread-time    { font-size: 11px; color: var(--text-faint); flex-shrink: 0; align-self: flex-start; }

.msg-stream { display: flex; flex-direction: column; gap: 9px; padding: 6px 0 14px; }
.msg-bubble {
    max-width: 78%;
    padding: 11px 14px;
    border-radius: 16px;
    font-size: 14.5px; line-height: 1.45;
    word-break: break-word;
}
.msg-bubble--in  { background: var(--card-bg); box-shadow: var(--card-shadow); border-bottom-left-radius: 5px; align-self: flex-start; }
.msg-bubble--out { background: var(--blue-dark); color: #fff; border-bottom-right-radius: 5px; align-self: flex-end; }
.msg-bubble-time { font-size: 10.5px; opacity: 0.6; margin-top: 5px; }

.msg-composer {
    position: sticky;
    bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
    background: var(--bg);
    padding: 10px 0;
    display: flex; gap: 9px; align-items: flex-end;
}
.msg-composer textarea {
    flex: 1; border: 1.5px solid var(--border); border-radius: 20px;
    padding: 11px 16px; font-size: 16px; font-family: inherit; /* iOS zoom floor */
    resize: none; max-height: 120px; background: var(--card-bg);
}
.msg-composer textarea:focus { outline: none; border-color: var(--accent-fg); }
.msg-send {
    width: 42px; height: 42px; border-radius: 50%; border: none;
    background: var(--blue-dark); color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.msg-send svg { width: 18px; height: 18px; }
.msg-send:disabled { opacity: 0.45; }

/* ============================================================
   SPONSORS
   ============================================================ */
.sponsor-tier-label {
    font-size: 12px; font-weight: 800; letter-spacing: 0.09em;
    text-transform: uppercase; margin: 24px 0 10px;
    display: flex; align-items: center; gap: 9px;
}
.sponsor-tier-label::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.tier-platinum { color: #475569; }
.tier-gold     { color: #B45309; }
.tier-silver   { color: #6B7280; }
.tier-bronze   { color: #92400E; }
.tier-partner  { color: var(--blue-dark); }
.tier-exhibitor{ color: var(--teal); }

.sponsor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.sponsor-card {
    background: var(--card-bg); border-radius: 16px; box-shadow: var(--card-shadow);
    padding: 18px 14px; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 9px;
    transition: transform 0.14s ease;
}
.sponsor-card:active { transform: scale(0.975); }
.sponsor-logo {
    width: 100%; height: 62px;
    display: flex; align-items: center; justify-content: center;
}
.sponsor-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sponsor-logo-fallback {
    width: 54px; height: 54px; border-radius: 14px;
    background: var(--blue-light); color: var(--blue-dark);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; font-weight: 800;
}
.sponsor-name  { font-size: 13.5px; font-weight: 800; line-height: 1.3; }
.sponsor-booth { font-size: 11.5px; color: var(--text-muted); }

.sponsor-hero {
    background: var(--card-bg); border-radius: var(--card-radius); box-shadow: var(--card-shadow);
    padding: 26px 20px; text-align: center; margin-bottom: 14px;
}
.sponsor-hero .sponsor-logo { height: 86px; margin-bottom: 12px; }

/* ── Lead capture ────────────────────────────────────────── */
.lead-scan-panel {
    background: var(--card-bg); border-radius: var(--card-radius);
    box-shadow: var(--card-shadow); padding: 18px; margin-bottom: 14px;
}
.lead-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 0; border-bottom: 1px solid var(--border);
}
.lead-row:last-child { border-bottom: none; }

/* ============================================================
   CHECK-IN / SCANNER
   ============================================================ */
.scanner-shell {
    position: relative;
    width: 100%; max-width: 460px; margin: 0 auto;
    aspect-ratio: 1 / 1;
    background: #0B1220; border-radius: 20px; overflow: hidden;
}
.scanner-shell video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scanner-reticle {
    position: absolute; inset: 16%;
    border: 3px solid rgba(255,255,255,0.85);
    border-radius: 18px;
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.35);
    pointer-events: none;
}
.scanner-reticle.is-hit { border-color: #22C55E; }
.scanner-status {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 13px 16px; background: rgba(0,0,0,0.6);
    color: #fff; font-size: 13.5px; font-weight: 600; text-align: center;
}
.scan-result {
    border-radius: 16px; padding: 16px; margin-top: 14px;
    display: flex; align-items: center; gap: 13px;
}
.scan-result--ok   { background: var(--green-bg); color: #14532D; }
.scan-result--dupe { background: var(--amber-bg); color: #78350F; }
.scan-result--err  { background: var(--red-bg);   color: #7F1D1D; }

.checkin-log { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.checkin-log-row {
    background: var(--card-bg); border-radius: 12px; box-shadow: var(--card-shadow);
    padding: 11px 14px; display: flex; align-items: center; gap: 11px;
    font-size: 13.5px;
}
.checkin-log-time { margin-left: auto; font-size: 11.5px; color: var(--text-faint); }

/* ============================================================
   CE CREDITS
   ============================================================ */
.ce-total {
    background: linear-gradient(135deg, #0F766E 0%, #14B8A6 100%);
    color: #fff; border-radius: var(--card-radius);
    padding: 26px 20px; text-align: center; margin-bottom: 14px;
    box-shadow: 0 8px 26px rgba(15,118,110,0.22);
}
.ce-total-num   { font-size: 42px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
.ce-total-label { font-size: 12.5px; font-weight: 700; opacity: 0.9; margin-top: 6px; letter-spacing: 0.06em; text-transform: uppercase; }
.ce-total-sub   { font-size: 12.5px; opacity: 0.85; margin-top: 9px; }

.ce-row {
    background: var(--card-bg); border-radius: 14px; box-shadow: var(--card-shadow);
    padding: 13px 15px; margin-bottom: 9px;
    display: flex; align-items: center; gap: 12px;
}
.ce-row-body  { flex: 1; min-width: 0; }
.ce-row-title { font-size: 14px; font-weight: 700; line-height: 1.35; }
.ce-row-meta  { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; }
.ce-row-credits {
    font-size: 15px; font-weight: 800; color: var(--teal); flex-shrink: 0;
}
.ce-row.is-missed { opacity: 0.55; }
.ce-row.is-missed .ce-row-credits { color: var(--text-faint); }

/* Certificate (also used as the print stylesheet target) */
.certificate {
    /* Literal white, NOT var(--card-bg). A CE certificate exists to be
       printed or saved as a PDF for a regulator, and it is rendered from the
       screen. Letting it follow the dark theme would produce a dark-navy
       certificate with pale text — unreadable on paper, and it would empty a
       toner cartridge doing it. The print block at the end of this file
       forces a white body for the same reason. */
    background: #FFFFFF;
    color: #111827;
    border: 8px double var(--blue-dark);
    border-radius: 4px;
    padding: 44px 38px;
    text-align: center;
    max-width: 760px;
    margin: 0 auto;
    font-family: Georgia, "Times New Roman", serif;
    color: #111827;
}
.certificate-eyebrow { font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--text-muted); }
.certificate-title   { font-size: 30px; font-weight: 700; margin: 14px 0 6px; color: var(--blue-dark); letter-spacing: 0.02em; }
.certificate-name    { font-size: 34px; font-weight: 700; margin: 28px 0 6px; border-bottom: 1px solid var(--border); display: inline-block; padding: 0 26px 8px; }
.certificate-body    { font-size: 15px; line-height: 1.8; margin: 22px auto 0; max-width: 540px; }
.certificate-credits { font-size: 46px; font-weight: 700; color: var(--teal); margin: 20px 0 4px; }
.certificate-sessions { text-align: left; max-width: 560px; margin: 30px auto 0; font-size: 13px; }
.certificate-sessions li { margin-bottom: 6px; line-height: 1.5; }
.certificate-footer  { margin-top: 34px; display: flex; justify-content: space-between; gap: 24px; font-size: 12px; color: var(--text-muted); }
.certificate-sig     { flex: 1; border-top: 1px solid #9CA3AF; padding-top: 7px; }

@media print {
    body { background: #fff !important; padding: 0 !important; }
    .app-header, .app-nav, .no-print, .ux-toast { display: none !important; }
    .app-content { padding: 0 !important; max-width: none !important; }
    .certificate { border-width: 6px; box-shadow: none; page-break-inside: avoid; }
}

/* ============================================================
   SURVEY
   ============================================================ */
.survey-intro {
    background: linear-gradient(135deg, #05367B 0%, #305CDE 100%);
    color: #fff; border-radius: var(--card-radius);
    padding: 24px 20px; margin-bottom: 16px;
}
.survey-intro-title { font-size: 19px; font-weight: 800; margin: 0 0 7px; }
.survey-intro-desc  { font-size: 13.5px; opacity: 0.9; line-height: 1.55; margin: 0; }

.survey-q {
    background: var(--card-bg); border-radius: var(--card-radius);
    box-shadow: var(--card-shadow); padding: 18px; margin-bottom: 12px;
}
.survey-q-text { font-size: 15px; font-weight: 700; line-height: 1.45; margin-bottom: 14px; }
.survey-q-text .req { color: #DC2626; }

.survey-stars { display: flex; gap: 7px; }
.survey-star {
    background: none; border: none; padding: 3px; cursor: pointer;
    color: #D1D5DB; transition: transform 0.12s ease, color 0.14s ease;
}
.survey-star svg { width: 32px; height: 32px; }
.survey-star.is-filled { color: #F59E0B; }
.survey-star:active { transform: scale(1.15); }

.nps-scale { display: grid; grid-template-columns: repeat(11, 1fr); gap: 4px; }
.nps-btn {
    aspect-ratio: 1; border: 1.5px solid var(--border); background: var(--card-bg);
    border-radius: 8px; font-size: 12px; font-weight: 700; font-family: inherit;
    cursor: pointer; color: var(--text-secondary); padding: 0;
}
.nps-btn.is-chosen { background: var(--blue-dark); border-color: var(--blue-dark); color: #fff; }
.nps-legend { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-faint); margin-top: 7px; }

.survey-choice {
    display: flex; align-items: center; gap: 11px;
    border: 1.5px solid var(--border); border-radius: 12px;
    padding: 12px 14px; margin-bottom: 8px;
    font-size: 14px; font-weight: 600; cursor: pointer; background: var(--card-bg);
}
.survey-choice.is-chosen { border-color: var(--accent-fg); background: var(--blue-light); }
.survey-choice input { width: 17px; height: 17px; accent-color: var(--blue-bright); }

.survey-text {
    width: 100%; border: 1.5px solid var(--border); border-radius: 12px;
    padding: 12px; font-size: 14.5px; font-family: inherit;
    resize: vertical; min-height: 90px; background: var(--surface-input);
}
.survey-text:focus { outline: none; border-color: var(--accent-fg); background: var(--card-bg); }

/* ============================================================
   NOTIFICATIONS — read state
   ============================================================ */
.notif-item.is-unread { border-left: 3px solid var(--accent-fg); }
.notif-unread-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--blue-bright); flex-shrink: 0;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 380px) {
    .home-tiles   { grid-template-columns: 1fr; }
    .nps-scale    { grid-template-columns: repeat(6, 1fr); }
    .speaker-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   VENUE — 360° virtual tours (Threshold360 embed)
   Strip of room cards on venue.php + full-screen viewer modal.
   ============================================================ */
.vt-hint { font-size: 12.5px; color: var(--text-muted); margin: 0 0 10px; }

.vt-strip {
    display: flex; gap: 10px; overflow-x: auto;
    margin: 0 -16px; padding: 2px 16px 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.vt-strip::-webkit-scrollbar { display: none; }

.vt-card {
    flex: 0 0 auto; width: 132px;
    border: 1px solid var(--border); border-radius: 12px;
    background: var(--card-bg); padding: 0; cursor: pointer;
    overflow: hidden; text-align: left;
}
.vt-card:active { transform: scale(0.97); }

.vt-thumb {
    width: 100%; height: 88px; object-fit: cover; display: block;
    background: var(--blue-light);
}

.vt-label {
    display: block; padding: 7px 9px 8px;
    font-size: 12px; font-weight: 700; line-height: 1.25;
    color: var(--text-primary);
}

.vt-panel-row { margin: 4px 0 8px; }
.vt-look-btn  { display: inline-flex; align-items: center; gap: 6px; }

/* Full-screen viewer. Sits above the bottom nav; the bar keeps the close
   button clear of the iPhone notch via safe-area padding. */
.vt-modal {
    position: fixed; inset: 0; z-index: 4000;
    display: flex; flex-direction: column; background: #000;
}
.vt-modal-bar {
    display: flex; align-items: center; gap: 10px;
    padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
    background: #111; color: #fff;
}
.vt-modal-title {
    flex: 1; font-size: 14.5px; font-weight: 700;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vt-modal-3d {
    font-size: 12px; font-weight: 700; color: #fff; text-decoration: none;
    border: 1.5px solid rgba(255,255,255,0.55); border-radius: 999px;
    padding: 4px 11px; flex-shrink: 0;
}
.vt-modal-close {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
    border: none; background: rgba(255,255,255,0.14); color: #fff; cursor: pointer;
}
.vt-frame { flex: 1; width: 100%; border: 0; display: block; }