/* ==========================================================================
   Shell chrome, cards and rows (§14, §34, §35)
   ========================================================================== */

/* ---- Top bar ----------------------------------------------------------- */

.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    height: var(--nav-h);
    display: flex;
    align-items: center;
    background: color-mix(in srgb, var(--bg) 86%, transparent);
    backdrop-filter: blur(var(--blur));
    -webkit-backdrop-filter: blur(var(--blur));
    border-bottom: 1px solid var(--hairline);
}

.brand { display: inline-flex; align-items: center; gap: var(--s-3); }

.brand__mark {
    display: grid;
    place-items: center;
    width: 36px; height: 36px;
    border-radius: var(--r-sm);
    background: linear-gradient(140deg, var(--copper), var(--copper-deep));
    color: #12100C;
    flex: 0 0 auto;
}

.brand__name {
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    line-height: 1.1;
}

.brand__name span { color: var(--saffron); }

.brand__tagline {
    font-family: var(--font-tamil);
    font-size: var(--text-xs);
    color: var(--ink-muted);
    line-height: 1.4;
}

/* In the native shell the WebView can extend under the status bar and the
   gesture area, so the chrome reclaims both. On the web these insets are 0. */
:root[data-native='true'] .topbar {
    height: calc(var(--nav-h) + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
}

:root[data-native='true'] .rails {
    top: calc(var(--nav-h) + env(safe-area-inset-top));
}

/* ---- Bottom navigation (§34) ------------------------------------------- */

.bottom-nav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 50;
    height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    background: color-mix(in srgb, var(--bg-raised) 94%, transparent);
    backdrop-filter: blur(var(--blur));
    -webkit-backdrop-filter: blur(var(--blur));
    border-top: 1px solid var(--hairline);
}

@media (min-width: 900px) {
    .bottom-nav { display: none; }
}

.bottom-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--ink-faint);
    font-size: 0.6875rem;
    font-weight: 500;
    transition: color var(--fast) var(--ease);
    position: relative;
}

.bottom-nav__item.is-active { color: var(--saffron); }

/* The active indicator is the third and last place saffron appears. */
.bottom-nav__item.is-active::before {
    content: '';
    position: absolute;
    top: 0;
    width: 22px;
    height: 2px;
    border-radius: var(--r-pill);
    background: var(--saffron);
}

/* Desktop keeps the same destinations in the top bar instead. */
.top-nav { display: none; gap: var(--s-1); }

@media (min-width: 900px) {
    .top-nav { display: flex; }
}

.top-nav__item {
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-pill);
    font-size: var(--text-sm);
    color: var(--ink-muted);
    transition: all var(--fast) var(--ease);
}

.top-nav__item:hover { color: var(--ink); background: var(--glass); }
.top-nav__item.is-active { color: var(--copper-bright); background: var(--copper-wash); }

.page { padding-block: var(--s-5) calc(var(--bottom-nav-h) + var(--s-7)); }

@media (min-width: 900px) {
    .page { padding-bottom: var(--s-8); }
}

/* ---- Hero (§14) --------------------------------------------------------- */

.hero {
    position: relative;
    overflow: hidden;
    padding: var(--s-6) var(--s-5);
    border-radius: var(--r-xl);
    background:
        linear-gradient(150deg, rgba(192, 138, 78, 0.13), transparent 52%),
        linear-gradient(300deg, rgba(82, 199, 212, 0.07), transparent 48%),
        var(--bg-card);
    border: 1px solid var(--glass-edge);
}

.hero::after {
    content: '';
    position: absolute;
    bottom: -160px;
    left: -80px;
    width: 320px; height: 320px;
    border-radius: 50%;
    border: 1px solid var(--copper);
    opacity: 0.09;
    pointer-events: none;
}

.hero > * { position: relative; z-index: 1; }

/* ---- Cards and rows ----------------------------------------------------- */

.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-3);
    margin-bottom: var(--s-4);
}

.card {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    padding: var(--s-4);
    border-radius: var(--r-lg);
    background: var(--bg-card);
    border: 1px solid var(--hairline);
    transition: border-color var(--base) var(--ease), transform var(--base) var(--ease);
    text-align: left;
}

.card:hover { border-color: var(--copper-edge); transform: translateY(-2px); }

.card--wide { width: min(300px, 78vw); }

.card__verse {
    font-family: var(--font-verse);
    font-size: var(--text-md);
    line-height: 1.75;
    color: var(--ink);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    line-clamp: 3;
    overflow: hidden;
    white-space: pre-wrap;
}

.card__meta {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--text-xs);
    color: var(--ink-faint);
}

.progress-bar { height: 3px; border-radius: var(--r-pill); background: var(--hairline); overflow: hidden; }
.progress-bar__fill { height: 100%; background: linear-gradient(90deg, var(--copper), var(--saffron)); }

.grid-cards {
    display: grid;
    gap: var(--s-4);
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* ---- Empty and loading states ------------------------------------------- */

.empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-7) var(--s-4);
    text-align: center;
    color: var(--ink-muted);
}

.empty__icon { color: var(--ink-faint); opacity: 0.6; }

/* ---- Sheets and dialogs -------------------------------------------------- */

.sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 70;
    background: rgba(4, 6, 12, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.sheet {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 71;
    max-height: 86dvh;
    overflow-y: auto;
    /* A modal DOES contain its scroll: reaching the end of a long outline
       must not start dragging the lesson along behind the sheet. */
    overscroll-behavior: contain;
    padding: var(--s-5) var(--s-4) calc(var(--s-6) + env(safe-area-inset-bottom));
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    background: var(--bg-raised);
    border-top: 1px solid var(--hairline-strong);
    animation: sheetIn var(--base) var(--ease);
}

@keyframes sheetIn {
    from { transform: translateY(100%); }
    to { transform: none; }
}

@media (min-width: 720px) {
    .sheet {
        left: 50%;
        bottom: auto;
        top: 50%;
        transform: translate(-50%, -50%);
        width: min(560px, 92vw);
        border-radius: var(--r-xl);
        border: 1px solid var(--hairline-strong);
        animation: dialogIn var(--base) var(--ease);
    }

    @keyframes dialogIn {
        from { opacity: 0; transform: translate(-50%, -46%); }
        to { opacity: 1; transform: translate(-50%, -50%); }
    }
}

.sheet__grip {
    width: 40px; height: 4px;
    border-radius: var(--r-pill);
    background: var(--hairline-strong);
    margin: 0 auto var(--s-4);
}

@media (min-width: 720px) {
    .sheet__grip { display: none; }
}

/* ---- Toasts -------------------------------------------------------------- */

.toasts {
    position: fixed;
    left: 50%;
    bottom: calc(var(--bottom-nav-h) + var(--s-4));
    transform: translateX(-50%);
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    width: min(420px, calc(100vw - var(--s-6)));
}

@media (min-width: 900px) {
    .toasts { bottom: var(--s-5); }
}

.toast {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-md);
    background: var(--bg-raised);
    border: 1px solid var(--hairline-strong);
    box-shadow: var(--shadow-lg);
    font-size: var(--text-sm);
    animation: fadeIn var(--fast) var(--ease);
}

.toast--error { border-color: rgba(224, 114, 95, 0.5); color: var(--danger); }
.toast--success { border-color: rgba(111, 191, 139, 0.4); }

/* ---- Reader settings ------------------------------------------------------ */

.setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    padding-block: var(--s-3);
}

.setting-row + .setting-row { border-top: 1px solid var(--hairline); }

.segmented {
    display: inline-flex;
    padding: 3px;
    border-radius: var(--r-pill);
    background: var(--bg-inset);
    border: 1px solid var(--hairline);
    gap: 2px;
}

.segmented__option {
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-pill);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--ink-muted);
    transition: all var(--fast) var(--ease);
    white-space: nowrap;
}

.segmented__option.is-active { background: var(--copper-wash); color: var(--copper-bright); }

.switch {
    position: relative;
    width: 44px; height: 26px;
    border-radius: var(--r-pill);
    background: var(--hairline-strong);
    border: 1px solid var(--hairline);
    transition: background var(--fast) var(--ease);
    flex: 0 0 auto;
}

.switch::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--ink-soft);
    transition: transform var(--base) var(--ease), background var(--fast) var(--ease);
}

.switch[aria-checked='true'] { background: var(--copper-wash); border-color: var(--copper-edge); }
.switch[aria-checked='true']::after { transform: translateX(18px); background: var(--copper-bright); }

/* ---- Search ---------------------------------------------------------------- */

.search-result {
    display: block;
    padding: var(--s-4);
    border-radius: var(--r-md);
    border: 1px solid var(--hairline);
    background: var(--bg-card);
    transition: border-color var(--fast) var(--ease);
}

.search-result:hover { border-color: var(--copper-edge); }

.search-result__excerpt {
    font-family: var(--font-tamil);
    font-size: var(--text-base);
    line-height: 1.8;
    color: var(--ink-soft);
    margin-top: var(--s-2);
}

.search-result__excerpt mark {
    background: var(--saffron-wash);
    color: var(--saffron-bright);
    padding: 0 3px;
    border-radius: 3px;
    font-weight: 600;
}

/* ---- Auth ------------------------------------------------------------------ */

.auth-shell {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: var(--s-5);
}

.auth-card {
    width: min(430px, 100%);
    padding: var(--s-6) var(--s-5);
    border-radius: var(--r-xl);
    background: var(--bg-card);
    border: 1px solid var(--glass-edge);
    box-shadow: var(--shadow-lg);
}

.form-error {
    font-size: var(--text-xs);
    color: var(--danger);
    margin-top: var(--s-2);
}