/*
 * signed-out.css — all styling for the open app's signed-out (read-only) mode.
 * Loaded on app.html; every rule is scoped to body.signed-out or an sg-*
 * element that only SessionGate creates, so signed-in rendering is untouched.
 *
 * Sections:
 *   1. Layer-1 grey-out  — MUST mirror GATED_SELECTORS in js/AppController.js
 *   2. Sign-in CTA       — account button restyled when signed out
 *   3. Free-mode banner  — top strip, collapses to the nav-rail pill
 *   4. SignupGate modal  — the account/save prompt
 */

/* ── 1. Layer-1 grey-out ─────────────────────────────────────────────────
   Same list as GATED_SELECTORS (docs/OPEN_APP_DESIGN.md §5). Controls stay
   clickable — the capture-phase guard intercepts and explains why. */
body.signed-out #studyModeBtn, /* FEAT-045: the Mode frame's Study on/off */
body.signed-out #studyBtn,
body.signed-out #saveStudyBtn,
body.signed-out #bookmarkBtn,
body.signed-out #notesBtn,
body.signed-out #tagBtn,
body.signed-out #wordStudyBtn,
body.signed-out #lexiconBtn,
body.signed-out #bookmarkAllBtn,
body.signed-out .nav-overflow-item[data-target="bookmarkAllBtn"],
body.signed-out #communityBtn,
body.signed-out .stg-action[data-act="manage-studies"],
body.signed-out .stg-sw[data-set="studyMode"],
body.signed-out .commentary-send-menu button,
body.signed-out .study-send-menu button, /* FEAT-036 verse/placement chooser */
body.signed-out .hl-swatch,
body.signed-out .highlight-menu-remove,
body.signed-out .brf-tag-btn,
body.signed-out .brf-note-btn,
body.signed-out .brf-bookmark-btn,
body.signed-out .intro-selection-menu button,
body.signed-out .inject-to-study-btn,
body.signed-out .lex-study-inject-btn,
body.signed-out .wsp-send-study-btn,
body.signed-out .strongs-inline-send-btn,
body.signed-out .letter-tiles-notes-btn,
body.signed-out .tag-verse-btn,
body.signed-out .note-count-btn,
body.signed-out .bookmark-verse-btn,
body.signed-out .commentary-tag-btn,
body.signed-out .commentary-note-btn,
body.signed-out .commentary-add-to-study,
body.signed-out .intro-tag-btn,
body.signed-out .intro-note-btn,
body.signed-out .intro-add-to-study,
body.signed-out .isbe-article-tag-btn,
body.signed-out .isbe-article-note-btn,
body.signed-out .isbe-article-bookmark-btn,
body.signed-out .isbe-article-send-study-btn,
body.signed-out .harmony-event-tag-btn,
body.signed-out .harmony-event-note-btn,
body.signed-out .harmony-event-bookmark-btn,
body.signed-out .harmony-event-send-study-btn,
body.signed-out .atlas-send-btn,
body.signed-out .study-map-clip-btn,
body.signed-out .library-para-tag,
body.signed-out .library-para-bookmark,
body.signed-out .library-para-note,
body.signed-out .library-para-send-study,
/* Mobile tab bar + More sheet proxies of gated buttons — the capture-phase
   guard still intercepts the REAL button's click; this is the matching dim */
body.signed-out .mtb-item[data-target="studyBtn"],
body.signed-out .mts-item[data-target="studyModeBtn"], /* FEAT-045: the Study switch leads the More sheet */
body.signed-out .mts-item[data-target="saveStudyBtn"],
body.signed-out .mts-item[data-target="bookmarkBtn"],
body.signed-out .mts-item[data-target="tagBtn"],
body.signed-out .mts-item[data-target="notesBtn"],
body.signed-out .mts-item[data-target="wordStudyBtn"],
body.signed-out .mts-item[data-target="lexiconBtn"],
body.signed-out .mts-item[data-target="communityBtn"] {
    opacity: 0.45;
    filter: grayscale(1);
}

/* Notes textareas inside open reading surfaces — read-only look; the
   focusin gate in AppController prompts on focus. MUST mirror
   GATED_FOCUS_SELECTORS in js/AppController.js. */
body.signed-out .wsp-notes-textarea,
body.signed-out .lexicon-notes-textarea {
    opacity: 0.45;
    filter: grayscale(1);
    cursor: not-allowed;
}

/* Settings honesty note (§5b signal 4) — rendered by SettingsView, visible
   only when signed out */
.sg-settings-note {
    display: none;
}

/* Signed out: the "saves to your account" promises are not true — the
   honesty note above carries the real story instead */
body.signed-out .stg-saved,
body.signed-out .stg-rail-note {
    display: none;
}

body.signed-out .sg-settings-note {
    display: block;
    margin-bottom: 0.85rem;
    padding: 0.5rem 0.75rem;
    background: var(--highlight);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

/* ── 2. Sign-in CTA (account button, §5b signal 2) ───────────────────────── */
body.signed-out #accountBtn.sg-signin-cta {
    background: var(--primary);
    border-radius: 10px;
    color: #fff;
}

body.signed-out #accountBtn.sg-signin-cta .icon-nav-label {
    color: #fff;
    font-weight: 600;
}

body.signed-out #accountBtn.sg-signin-cta:hover {
    background: var(--primary-dark);
}

/* ── 3. Free-mode banner (§5b signal 1) ──────────────────────────────────── */
.sg-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9500;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    padding: calc(0.5rem + env(safe-area-inset-top)) 2.25rem 0.5rem 1rem;
    background: var(--primary);
    color: #fff;
    font-size: 0.85rem;
    line-height: 1.35;
    box-shadow: var(--shadow);
}

/* Push the app grid down while the banner is open (100dvh + border-box).
   Safe-area term matches the banner's own top padding on notched standalone. */
body.sg-banner-open .app-body {
    padding-top: calc(44px + env(safe-area-inset-top));
}

.sg-banner-text {
    text-align: center;
}

.sg-banner-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sg-banner-link {
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

.sg-banner-link-primary {
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 999px;
    padding: 0.15rem 0.75rem;
    text-decoration: none;
}

.sg-banner-link-primary:hover {
    background: rgba(255, 255, 255, 0.3);
}

.sg-banner-dismiss {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #fff;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    opacity: 0.8;
}

.sg-banner-dismiss:hover {
    opacity: 1;
}

/* Compact pill — the banner never fully disappears (§5b) */
.sg-pill {
    display: block;
    margin: 0.25rem auto;
    padding: 0.25rem 0.5rem;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.sg-pill:hover {
    background: var(--primary-dark);
}

/* ── 4. SignupGate modal ─────────────────────────────────────────────────── */
.sg-overlay {
    position: fixed;
    inset: 0;
    z-index: 10700;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    padding: 1rem;
}

.sg-dialog {
    background: var(--surface);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 0;
    box-shadow: var(--shadow-lg);
    max-width: 420px;
    width: 100%;
    padding: 1.5rem 1.5rem 1.25rem;
    text-align: center;
}

.sg-dialog-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.sg-dialog-title {
    margin: 0 0 0.6rem;
    font-size: 1.15rem;
}

.sg-dialog-body {
    margin: 0 0 1.15rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.sg-dialog-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sg-btn {
    width: 100%;
    padding: 0.55rem 1rem;
    border-radius: 9px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.sg-btn-primary {
    background: var(--primary);
    color: #fff;
    border: none;
}

.sg-btn-primary:hover {
    background: var(--primary-dark);
}

.sg-btn-secondary {
    background: var(--surface);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

.sg-btn-secondary:hover {
    background: var(--highlight);
}

.sg-btn-ghost {
    background: none;
    color: var(--text-secondary);
    border: none;
    font-weight: 500;
}

.sg-btn-ghost:hover {
    color: var(--text-primary);
}

/* First-visit welcome splash — same dialog, a touch roomier */
.sg-dialog.sg-welcome {
    max-width: 480px;
}

.sg-dialog.sg-welcome .sg-dialog-body {
    text-align: left;
}