/* App global css rules */
:root {
    /* ================ */
    /* ==== Primitives */
    /* ============== */

    /* ======== Typography */

    --font-size-50: 0.75rem;
    /* 12 */
    --font-size-100: 0.875rem;
    /* 14 */
    --font-size-200: 1rem;
    /* 16 */
    --font-size-300: 1.125rem;
    /* 18 */
    --font-size-400: 1.25rem;
    /* 20 */
    --font-size-500: 1.5rem;
    /* 24 */
    --font-size-600: 1.75rem;
    /* 28 */
    --font-size-700: 2.125rem;
    /* 34 */
    --font-size-800: 2.75rem;
    /* 44 */
    --font-size-900: 3.5rem;
    /* 56 */

    /* ======== Spacing */

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 20px;
    --space-5: 32px;

    /* ======== Radius */

    --radius-1: 2px;
    --radius-2: 6px;
    --radius-3: 10px;
    --radius-4: 16px;
    --radius-5: 24px;

    /* ======== Shadows */

    --shadow-light-1:
        0 1px 2px rgba(23, 33, 47, 0.04),
        0 1px 1px rgba(23, 33, 47, 0.03);

    --shadow-light-2:
        0 2px 6px rgba(23, 33, 47, 0.06),
        0 1px 2px rgba(23, 33, 47, 0.04);

    --shadow-light-3:
        0 8px 20px rgba(23, 33, 47, 0.08),
        0 2px 4px rgba(23, 33, 47, 0.04);

    --shadow-light-4:
        0 16px 32px rgba(23, 33, 47, 0.10),
        0 4px 8px rgba(23, 33, 47, 0.05);

    --shadow-light-5:
        0 24px 48px rgba(23, 33, 47, 0.14),
        0 8px 16px rgba(23, 33, 47, 0.06);

    --shadow-dark-1:
        0 1px 2px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.03);

    --shadow-dark-2:
        0 2px 6px rgba(0, 0, 0, 0.40),
        0 0 0 1px rgba(255, 255, 255, 0.04);

    --shadow-dark-3:
        0 8px 20px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.05);

    --shadow-dark-4:
        0 16px 32px rgba(0, 0, 0, 0.50),
        0 0 0 1px rgba(255, 255, 255, 0.06);

    --shadow-dark-5:
        0 24px 48px rgba(0, 0, 0, 0.60),
        0 0 0 1px rgba(255, 255, 255, 0.08);

    /* ======== Motion */

    --motion-duration: 220ms;
    --motion-ease: cubic-bezier(.2, .8, .2, 1);

    /* ============== */
    /* ==== Semantic */
    /* ============ */

    /* ======== Typography */

    --font-fam: "Lexend", system-ui, sans-serif;

    --font-display-lg: var(--font-size-900);
    --font-display-md: var(--font-size-800);
    --font-display-sm: var(--font-size-700);

    --font-title-lg: var(--font-size-600);
    --font-title-md: var(--font-size-500);
    --font-title-sm: var(--font-size-400);

    --font-heading: var(--font-size-300);

    --font-body: var(--font-size-200);
    --font-body-sm: var(--font-size-100);
    --font-body-xs: var(--font-size-50);

    /* ======== Spacing */

    --space-xs: var(--space-1);
    --space-sm: var(--space-2);
    --space-md: var(--space-3);
    --space-lg: var(--space-4);
    --space-xl: var(--space-5);

    /* ======== Radius */

    --radius-xs: var(--radius-1);
    --radius-sm: var(--radius-2);
    --radius-md: var(--radius-3);
    --radius-lg: var(--radius-4);
    --radius-xl: var(--radius-5);

    /* ======== Elevation */

    --elevation-surface-xs: var(--shadow-light-1);
    --elevation-surface-sm: var(--shadow-light-2);
    --elevation-surface-md: var(--shadow-light-3);
    --elevation-surface-lg: var(--shadow-light-4);
    --elevation-surface-xl: var(--shadow-light-5);

    /* ======== Motion */

    --motion-transition-duration: var(--motion-duration);
    --motion-transition-ease: var(--motion-ease);

    /* ============ */
    /* ==== Layout */
    /* ========== */

    /* ======== Width */

    --width-default: initial;
    --width-1-col: 100%;
    --width-2-col: 50%;
    --width-3-col: 33.333%;
    --width-4-col: 25%;
    --width-5-col: 20%;
}

[data-theme="light"] {

    /* Backgrounds */

    --bg-primary: #FCFBF8;
    --bg-surface-1: #F6F4EF;
    --bg-surface-2: #F0EEE9;
    --bg-surface-3: #E8E5DE;
    --bg-overlay: rgba(255, 255, 255, 0.60);
    --bg-image-overlay: rgba(255, 255, 255, 0.40);

    /* Borders */

    --border-subtle: #E2DED6;
    --border-strong: #CAC3B8;

    /* Text */

    --text-primary: #181D24;
    --text-muted: #666D77;

    /* Interactive */

    --button-bg: #181D24;
    --button-bg-state: #2B313A;
    --button-text: #FCFBF8;
    --button-text-state: #FFFFFF;

    /* Elevation */

    --elevation-xs: var(--shadow-light-1);
    --elevation-sm: var(--shadow-light-2);
    --elevation-md: var(--shadow-light-3);
    --elevation-lg: var(--shadow-light-4);
    --elevation-xl: var(--shadow-light-5);

    /* Icons */

    --icon: #181D24;
}

[data-theme="dark"] {

    /* Backgrounds */

    --bg-primary: #181D24;
    --bg-surface-1: #20262E;
    --bg-surface-2: #292F38;
    --bg-surface-3: #343B45;
    --bg-overlay: rgba(0, 0, 0, 0.60);
    --bg-image-overlay: rgba(0, 0, 0, 0.40);

    /* Borders */

    --border-subtle: #343C46;
    --border-strong: #4B5562;

    /* Text */

    --text-primary: #FCFBF8;
    --text-muted: #AAB3BD;

    /* Interactive */

    --button-bg: #FCFBF8;
    --button-bg-state: #EDEAE4;
    --button-text: #181D24;
    --button-text-state: #0F1318;

    /* Elevation */

    --elevation-xs: var(--shadow-dark-1);
    --elevation-sm: var(--shadow-dark-2);
    --elevation-md: var(--shadow-dark-3);
    --elevation-lg: var(--shadow-dark-4);
    --elevation-xl: var(--shadow-dark-5);

    /* Icons */

    --icon: #FCFBF8;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --motion-duration: 0ms;
    }
}

.svg_icon {
    width: 24px;
    height: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all var(--motion-duration) var(--motion-ease);
}

.svg_icon_path {
    fill: var(--icon);
    transition: all var(--motion-duration) var(--motion-ease);
}

.svg_icon_stroke {
    fill: none;
    stroke: var(--icon);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: all var(--motion-duration) var(--motion-ease);
}

*,
*::before,
*::after {
    box-sizing: border-box;
    position: relative;
}

* {
    margin: 0;
    padding: 0;
    outline: none;
}

html,
body {
    width: var(--width-1-col);
    height: 100%;
    display: flex;
    display: block;
    font-family: var(--font-fam);
    font-optical-sizing: auto;
    line-height: 1.5;
    color: var(--text-primary);
    background-color: var(--bg-primary);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overscroll-behavior: none;
    scroll-behavior: smooth;
}

ul[class],
ol[class] {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
    border: none;
    background: none;
    outline: none;
}

input[hidden] {
    display: none !important;
}

button {
    cursor: pointer;
    background-color: transparent;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 600;
    overflow-wrap: break-word;
    text-wrap: balance;
    letter-spacing: -0.02em;
}

p,
span {
    font-size: var(--font-body);
    font-weight: 400;
    line-height: 1.5;
    text-wrap: pretty;
    letter-spacing: -0.01em;
}

/* App shell */
.app_shell {
    width: var(--width-1-col);
    min-height: 100svh;
    display: flex;
    flex-direction: column;
}

/* App wrapper */
.app_wrapper {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
}

/* App container */
.app_container {
    width: var(--width-1-col);
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    transition: all var(--motion-duration) var(--motion-ease);
}

/* App header */
.app_header {
    position: sticky;
    top: 0;
    width: var(--width-1-col);
    display: flex;
    flex-direction: column;
    padding: clamp(var(--space-lg), 4vw, var(--space-xl));
    background-color: var(--bg-surface-1);
    transition: all var(--motion-duration) var(--motion-ease);
    z-index: 999;
}

/* App nav */
.app_nav {
    width: var(--width-1-col);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    transition: all var(--motion-duration) var(--motion-ease);
}

.home_link {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: clamp(var(--space-xs), 4vw, var(--space-sm));
    transition: all var(--motion-duration) var(--motion-ease);
}

.home_link .svg_icon {
    width: 36px;
    height: 36px;
    transition: all var(--motion-duration) var(--motion-ease);
}

.brand_breathe {
    font-size: var(--font-heading);
    font-weight: 600;
    color: var(--icon);
}

.home_link:active .svg_icon {
    transform: scale(0.95);
    transition: all var(--motion-duration) var(--motion-ease);
}

.app_nav_group {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: clamp(var(--space-xs), 4vw, var(--space-sm));
    transition: all var(--motion-duration) var(--motion-ease);
}

/* App streak */
.app_streak {
    min-width: 60px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    background-color: var(--bg-surface-2);
    border-radius: clamp(var(--radius-md), 4vw, var(--radius-lg));
    transition: all var(--motion-duration) var(--motion-ease);
}

.app_streak_text {
    min-width: 16px;
    min-height: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: clamp(var(--font-body-xs), 4vw, var(--font-body-sm));
    font-weight: 600;
    text-align: center;
    opacity: 0;
    transition: all var(--motion-duration) var(--motion-ease);
}

/* App menu */
.menu_button {
    width: 24px;
    height: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all var(--motion-duration) var(--motion-ease);
}

.menu_button:active {
    transform: scale(0.95);
    transition: all var(--motion-duration) var(--motion-ease);
}

.app_menu_overlay {
    position: fixed;
    inset: 0;
    width: var(--width-1-col);
    height: 100%;
    display: none;
    flex-direction: column;
    align-items: flex-end;
    background-color: var(--bg-overlay);
    transform: translateX(100%);
    transition: all var(--motion-duration) var(--motion-ease);
    z-index: 999;
    cursor: pointer;
}

.app_menu_overlay[data-active="true"] {
    display: flex;
    transition: all var(--motion-duration) var(--motion-ease);
}

.app_menu {
    width: var(--width-1-col);
    height: 100dvh;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-primary);
    gap: clamp(var(--space-md), 4vw, var(--space-lg));
    padding: clamp(var(--space-lg), 4vw, var(--space-xl));
    transition: all var(--motion-duration) var(--motion-ease);
    cursor: initial;
}

.app_menu_header {
    width: var(--width-1-col);
    min-height: 32px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    transition: all var(--motion-duration) var(--motion-ease);
}

.close_menu_button {
    width: 24px;
    height: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all var(--motion-duration) var(--motion-ease);
}

.close_menu_button:active {
    transform: scale(0.95);
    transition: all var(--motion-duration) var(--motion-ease);
}

.app_menu_content {
    width: var(--width-1-col);
    max-width: 640px;
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
}

.app_menu_nav {
    width: var(--width-1-col);
    /* flex: 1; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(var(--space-md), 4vw, var(--space-lg));
    padding: clamp(var(--space-lg), 4vw, var(--space-xl)) 0;
    border-radius: clamp(var(--radius-md), 4vw, var(--radius-lg));
    transition: all var(--motion-duration) var(--motion-ease);
}

.app_menu_nav_link {
    width: var(--width-1-col);
    min-height: 48px;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: clamp(var(--space-lg), 4vw, var(--space-xl));
    background-color: var(--bg-surface-1);
    border-radius: clamp(var(--radius-md), 4vw, var(--radius-lg));
    transition: all var(--motion-duration) var(--motion-ease);
}

.app_menu_nav_link:hover {
    background-color: var(--bg-surface-2);
    box-shadow: var(--elevation-sm);
    transition: all var(--motion-duration) var(--motion-ease);
}

.app_menu_nav_link:focus {
    background-color: var(--bg-surface-2);
    box-shadow: var(--elevation-sm);
    transition: all var(--motion-duration) var(--motion-ease);
}

.app_menu_nav_link:active {
    background-color: var(--bg-surface-2);
    box-shadow: var(--elevation-sm);
    transition: all var(--motion-duration) var(--motion-ease);
}

.app_menu_nav_link_title {
    font-size: var(--font-heading);
    font-weight: 600;
    color: var(--text-primary);
}

.app_menu_nav_link_description {
    font-size: var(--font-body-sm);
    font-weight: 400;
    color: var(--text-primary);
}

.app_menu_footer {
    width: var(--width-1-col);
    max-width: 640px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    gap: clamp(var(--space-md), 4vw, var(--space-lg));
    padding: clamp(var(--space-md), 4vw, var(--space-lg));
    transition: all var(--motion-duration) var(--motion-ease);
}

.app_menu_footer_nav {
    width: var(--width-1-col);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(var(--space-md), 4vw, var(--space-lg));
    padding: clamp(var(--space-md), 4vw, var(--space-lg));
    transition: all var(--motion-duration) var(--motion-ease);
}

.app_menu_footer_link {
    font-size: clamp(var(--font-body-xs), 4vw, var(--font-body-sm));
    font-weight: 400;
    color: var(--text-primary);
    transition: all var(--motion-duration) var(--motion-ease);
}

.app_menu_footer_link:hover {
    text-decoration: underline;
    transition: all var(--motion-duration) var(--motion-ease);
}

.app_menu_footer_link:focus {
    text-decoration: underline;
    transition: all var(--motion-duration) var(--motion-ease);
}

.app_menu_footer_link:active {
    text-decoration: underline;
    transition: all var(--motion-duration) var(--motion-ease);
}

.app_menu_footer_copyright {
    font-size: var(--font-body-xs);
    font-weight: 400;
    text-align: center;
}

/* App content */
.app_content {
    width: var(--width-1-col);
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: clamp(var(--space-md), 4vw, var(--space-lg));
    transition: all var(--motion-duration) var(--motion-ease);
}

/* App */
.app {
    width: var(--width-1-col);
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(var(--space-md), 4vw, var(--space-lg));
    transition: all var(--motion-duration) var(--motion-ease);
}

/* App section */
.app_section {
    width: var(--width-1-col);
    min-height: calc(100vh - 96px);
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(var(--space-md), 4vw, var(--space-lg));
    transition: all var(--motion-duration) var(--motion-ease);
}

/* App hero */
.app_hero {
    width: var(--width-1-col);
    max-width: 640px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: clamp(var(--space-md), 4vw, var(--space-lg));
    margin: 0 auto;
    transition: all var(--motion-duration) var(--motion-ease);
}

.app_hero_nav::-webkit-scrollbar {
    display: none;
}

.app_hero_nav {
    width: var(--width-1-col);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: clamp(var(--space-sm), 4vw, var(--space-md));
    padding: var(--space-xs);
    overflow-x: auto;
}

.app_hero_nav_link {
    min-width: fit-content;
    height: 48px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 clamp(var(--space-md), 4vw, var(--space-lg));
    font-size: var(--font-body-sm);
    font-weight: 400;
    color: var(--text-primary);
    background-color: var(--bg-surface-1);
    border-radius: clamp(var(--radius-md), 4vw, var(--space-lg));
    transition: all var(--motion-duration) var(--motion-ease);
}

.app_hero_nav_link:hover {
    background-color: var(--bg-surface-2);
    box-shadow: var(--elevation-sm);
    transition: all var(--motion-duration) var(--motion-ease);
}

.app_hero_nav_link:focus {
    background-color: var(--bg-surface-2);
    box-shadow: var(--elevation-sm);
    transition: all var(--motion-duration) var(--motion-ease);
}

.app_hero_nav_link:active {
    background-color: var(--bg-surface-2);
    box-shadow: var(--elevation-sm);
    transform: scale(0.95);
    transition: all var(--motion-duration) var(--motion-ease);
}

.app_title {
    width: var(--width-1-col);
    font-size: clamp(var(--font-heading), 4vw, var(--font-title-sm));
    font-weight: 600;
    color: var(--text-primary);
    transition: all var(--motion-duration) var(--motion-ease);
}

/* App error */
.error {
    width: var(--width-1-col);
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(var(--space-md), 4vw, var(--space-lg));
    padding: clamp(var(--space-md), 4vw, var(--space-lg));
    background-color: var(--bg-surface-1);
    border-radius: clamp(var(--radius-xs), 4vw, var(--radius-lg));
    transition: all var(--motion-duration) var(--motion-ease);
}

.error .home_link {
    flex-direction: column;
}

.error_message {
    font-size: var(--font-body);
    font-weight: 600;
    text-align: center;
    color: var(--text-primary);
    transition: all var(--motion-duration) var(--motion-ease);
}

/* App audio player */
.app_audio_card {
    width: var(--width-1-col);
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: clamp(var(--space-md), 4vw, var(--space-lg));
    padding: clamp(var(--space-lg), 4vw, var(--space-xl));
    background-color: var(--bg-surface-1);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    border-radius: clamp(var(--radius-md), 4vw, var(--radius-lg));
    transition: all var(--motion-duration) var(--motion-ease);
}

.app_audio_card_header {
    width: var(--width-1-col);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: clamp(var(--space-lg), 4vw, var(--space-xl));
    padding: 0 clamp(var(--space-md), 4vw, var(--space-lg));
    transition: all var(--motion-duration) var(--motion-ease);
}

.app_audio_card_header_group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-xs);
}

.app_audio_card_reference {
    font-size: var(--font-body-xs);
    font-weight: 600;
    color: var(--text-primary);
}

.app_audio_card_date {
    font-size: var(--font-body-xs);
    font-weight: 600;
    color: var(--text-primary);
}

.app_audio_card_title {
    font-size: clamp(var(--font-body), 4vw, var(--font-heading));
    font-weight: 600;
    color: var(--text-primary);
}

.app_audio_button {
    width: 48px;
    height: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.app_audio_button .svg_icon {
    width: 36px;
    height: 36px;
}

.app_audio_card_main::-webkit-scrollbar {
    display: none;
}

.app_audio_card_main {
    width: var(--width-1-col);
    /* flex: 1; */
    display: flex;
    flex-direction: column;
    gap: clamp(var(--space-md), 4vw, var(--space-lg));
    padding: clamp(var(--space-md), 4vw, var(--space-lg));
    background-color: var(--bg-image-overlay);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: clamp(var(--space-md), 4vw, var(--space-lg));
    overflow-y: auto;
    transition: all var(--motion-duration) var(--motion-ease);
}

.app_audio_card_main_group {
    width: var(--width-1-col);
    display: flex;
    flex-direction: column;
    gap: clamp(var(--space-md), 4vw, var(--space-lg));
    transition: all var(--motion-duration) var(--motion-ease);
}

.app_audio_card_subtitle {
    font-size: clamp(var(--font-heading), 4vw, var(--font-title-sm));
    font-weight: 600;
    color: var(--text-primary);
    transition: all var(--motion-duration) var(--motion-ease);
}

.app_audio_card_text {
    font-size: clamp(var(--font-body-sm), 4vw, var(--font-body));
    font-weight: 400;
    color: var(--text-primary);
    transition: all var(--motion-duration) var(--motion-ease);
}

.app_audio_player {
    width: var(--width-1-col);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-sm);
    padding: clamp(var(--space-sm), 4vw, var(--space-md)) clamp(var(--space-md), 4vw, var(--space-lg));
    background-color: var(--bg-image-overlay);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: clamp(var(--space-md), 4vw, var(--space-lg));
}

.app_audio_player audio[data-hidden="true"] {
    display: none;
}

.app_audio_player_time_container {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: var(--font-body-xs);
    font-weight: 600;
    color: var(--text-primary);
}

.app_audio_player_time {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: var(--font-body-xs);
    font-weight: 600;
    color: var(--text-primary);
}

.app_audio_player_time_spacer {
    font-size: var(--font-body-xs);
    font-weight: 400;
    color: var(--text-primary);
}

.app_audio_player_progress {
    width: var(--width-1-col);
    height: 4px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    padding: var(--space-xs);
    background-color: var(--bg-primary);
    border-radius: clamp(var(--space-md), 4vw, var(--space-lg));
    transition: all var(--motion-duration) var(--motion-ease);
}

.app_audio_player_indicator {
    width: 0;
    height: 4px;
    display: block;
    background-color: var(--button-bg);
    border-radius: clamp(var(--space-md), 4vw, var(--space-lg));
    transition: all var(--motion-duration) var(--motion-ease);
}

/* Scripture card */
.scripture_card {
    width: var(--width-1-col);
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    background-color: var(--bg-surface-1);
    gap: var(--space-xl);
    padding: clamp(var(--space-lg), 4vw, var(--space-xl));
    border-radius: clamp(var(--radius-md), 4vw, var(--radius-lg));
    transition: all var(--motion-duration) var(--motion-ease);
}

.scripture_card_header {
    width: var(--width-1-col);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
}

.scripture_card_header_group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.scripture_card_date {
    flex: 1;
    display: flex;
    flex-direction: column;
    font-size: var(--font-body-xs);
    font-weight: 400;
    color: var(--text-muted);
    text-wrap: pretty;
    letter-spacing: -0.01em;
}

.scripture_card_title {
    flex: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    font-size: var(--font-body-xs);
    font-weight: 600;
    color: var(--text-primary);
    text-wrap: balance;
    letter-spacing: -0.02em;
}

.scripture_card_header_nav {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: clamp(var(--space-md), 4vw, var(--space-lg));
    transition: all var(--motion-duration) var(--motion-ease);
}

.love_scripture_button {
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all var(--motion-duration) var(--motion-ease);
}

.love_scripture_button:active .svg_icon {
    transform: scale(0.95);
    transition: all var(--motion-duration) var(--motion-ease);
}

.love_scripture_button:hover .svg_icon_path {
    fill: var(--button-bg-state);
    box-shadow: var(--elevation-sm);
    transition: all var(--motion-duration) var(--motion-ease);
}

.love_scripture_button:focus .svg_icon_path {
    fill: var(--button-bg-state);
    box-shadow: var(--elevation-sm);
    transition: all var(--motion-duration) var(--motion-ease);
}

.love_scripture_button:hover .svg_icon_path {
    fill: var(--button-bg-state);
    box-shadow: var(--elevation-sm);
    transition: all var(--motion-duration) var(--motion-ease);
}

.love_scripture_button:active .svg_icon_path {
    fill: var(--button-bg-state);
    box-shadow: var(--elevation-sm);
    transition: all var(--motion-duration) var(--motion-ease);
}

.love_scripture_button_count {
    min-width: 16px;
    min-height: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: var(--font-body-xs);
    font-weight: 600;
    color: var(--text-primary);
    opacity: 0;
    transition: all var(--motion-duration) var(--motion-ease);
}

.share_scripture_button {
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all var(--motion-duration) var(--motion-ease);
}

.share_scripture_button:active .svg_icon {
    transform: scale(0.95);
    transition: all var(--motion-duration) var(--motion-ease);
}

.share_scripture_button:hover .svg_icon_path {
    fill: var(--button-bg-state);
    box-shadow: var(--elevation-sm);
    transition: all var(--motion-duration) var(--motion-ease);
}

.share_scripture_button:focus .svg_icon_path {
    fill: var(--button-bg-state);
    box-shadow: var(--elevation-sm);
    transition: all var(--motion-duration) var(--motion-ease);
}

.share_scripture_button:active .svg_icon_path {
    fill: var(--button-bg-state);
    box-shadow: var(--elevation-sm);
    transition: all var(--motion-duration) var(--motion-ease);
}

.share_scripture_button_count {
    min-width: 16px;
    min-height: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: var(--font-body-xs);
    font-weight: 600;
    color: var(--text-primary);
    opacity: 0;
    transition: all var(--motion-duration) var(--motion-ease);
}

.scripture_card_link {
    width: var(--width-1-col);
    height: 96px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: clamp(var(--space-md), 4vw, var(--space-lg));
    padding: clamp(var(--space-md), 4vw, var(--space-lg));
    background-color: var(--bg-surface-2);
    border-radius: clamp(var(--radius-md), 4vw, var(--radius-lg));
    transition: all var(--motion-duration) var(--motion-ease);
}

.scripture_card_link_group {
    display: flex;
    flex-direction: column;
    gap: clamp(var(--space-sm), 4vw, var(--space-md));
}

.scripture_card_link[data-type="devotion"] .scripture_card_link_group:nth-child(2) {
    width: 72px;
    height: 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(var(--bg-image-overlay), var(--bg-image-overlay)), url(/images/devotion.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: clamp(var(--radius-md), 4vw, var(--radius-lg));
    transition: all var(--motion-duration) var(--motion-ease);
}

.scripture_card_link[data-type="prayer"] .scripture_card_link_group:nth-child(2) {
    width: 72px;
    height: 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--bg-image-overlay);
    background-image: linear-gradient(var(--bg-overlay), var(--bg-overlay)), url("/images/prayer.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: clamp(var(--radius-md), 4vw, var(--radius-lg));
    transition: all var(--motion-duration) var(--motion-ease);
}

.scripture_card_link:hover {
    background-color: var(--bg-surface-3);
    box-shadow: var(--elevation-sm);
    transition: all var(--motion-duration) var(--motion-ease);
}

.scripture_card_link:focus {
    background-color: var(--bg-surface-3);
    box-shadow: var(--elevation-sm);
    transition: all var(--motion-duration) var(--motion-ease);
}

.scripture_card_link:active {
    background-color: var(--bg-surface-3);
    box-shadow: var(--elevation-sm);
    transform: scale(0.95);
    transition: all var(--motion-duration) var(--motion-ease);
}

.scripture_card_link_text {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-body-sm);
    font-weight: 600;
    color: var(--text-primary);
    transition: all var(--motion-duration) var(--motion-ease);
}

.scripture_card_link_text:nth-child(1) {
    font-size: var(--font-body-xs);
    font-weight: 400;
}

.scripture_card_link_text .svg_icon {
    width: 16px;
    height: 16px;
}

.scripture_card_link .svg_icon_path {
    fill: var(--icon);
}

.scripture_card_link .svg_icon_stroke {
    stroke: var(--icon);
}

.scripture_card_quote {
    width: var(--width-1-col);
    display: flex;
    flex-direction: column;
    gap: clamp(var(--space-md), 4vw, var(--space-xl));
    padding-left: clamp(var(--space-md), 4vw, var(--space-lg));
    font-size: var(--font-body);
    font-weight: 400;
    color: var(--text-primary);
    text-wrap: pretty;
    letter-spacing: -0.01em;
    border-left: 3px solid var(--border-strong);
}

.scripture_card_quote_ref {
    font-size: var(--font-body-xs);
    font-style: italic;
    font-weight: 400;
    transition: all var(--motion-duration) var(--motion-ease);
}

.scripture_card_quote_text {
    font-size: clamp(var(--font-body-sm), 4vw, var(--font-body));
    font-weight: 600;
    text-wrap: pretty;
    transition: all var(--motion-duration) var(--motion-ease);
}

.scripture_card_content {
    width: var(--width-1-col);
    display: flex;
    flex-direction: column;
    gap: clamp(var(--space-md), 4vw, var(--space-lg));
    transition: all var(--motion-duration) var(--motion-ease);
}

.scripture_card_footer {
    width: var(--width-1-col);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: clamp(var(--space-md), 4vw, var(--space-lg));
    transition: all var(--motion-duration) var(--motion-ease);
}

/* Content */
.content {
    width: var(--width-1-col);
    max-width: 640px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    gap: clamp(var(--space-md), 4vw, var(--space-lg));
    padding: clamp(var(--space-lg), 4vw, var(--space-xl));
    margin: 0 auto;
    background-color: var(--bg-surface-1);
    border-radius: clamp(var(--radius-md), 4vw, var(--radius-lg));
    transition: all var(--motion-duration) var(--motion-ease);
}

.content_group {
    width: var(--width-1-col);
    display: flex;
    flex-direction: column;
    gap: clamp(var(--space-md), 4vw, var(--space-lg));
    transition: all var(--motion-duration) var(--motion-ease);
}

.content_title {
    width: fit-content;
    padding-bottom: clamp(var(--space-md), 4vw, var(--space-lg));
    font-size: clamp(var(--font-title-sm), 4vw, var(--font-title-md));
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 3px solid var(--border-subtle);
}

.content_heading {
    font-size: clamp(var(--font-heading), 4vw, var(--font-title-sm));
    font-weight: 600;
    color: var(--text-primary);
}

.content_text {
    font-size: clamp(var(--font-body-sm), 4vw, var(--font-body));
    font-weight: 400;
    color: var(--text-primary);
    transition: all var(--motion-duration) var(--motion-ease);
}

.content_text a {
    font-weight: 600;
    font-style: italic;
    text-decoration: underline;
}

.content_list {
    width: var(--width-1-col);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: 0 var(--space-md);
}

ol.content_list>li {
    font-size: clamp(var(--font-body-sm), 4vw, var(--font-body));
    font-weight: 400;
    line-height: 1.5;
    text-wrap: pretty;
    letter-spacing: -0.01em;
    list-style-type: decimal;
    transition: all var(--motion-duration) var(--motion-ease);
}

ol.content_list>li ul {
    margin-top: 8px;
}

ol.content_list>li ul>li {
    font-size: clamp(var(--font-body-sm), 4vw, var(--font-body));
    font-weight: 400;
    line-height: 1.5;
    text-wrap: pretty;
    letter-spacing: -0.01em;
    list-style-type: none;
    transition: all var(--motion-duration) var(--motion-ease);
}

ul.content_list>li {
    font-size: var(--font-body-sm);
    font-weight: 400;
    list-style-type: disc;
}

/* App list fitler nav */
.app_list_filter_nav {
    width: var(--width-1-col);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-sm);
}

.app_list_filter_nav_button {
    flex: 1;
    height: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 clamp(var(--space-md), 4vw, var(--space-lg));
    font-size: var(--font-body-sm);
    font-weight: 400;
    color: var(--text-primary);
    background-color: var(--bg-surface-2);
    border-radius: 48px;
    transition: all var(--motion-duration) var(--motion-ease);
}

.app_list_filter_nav_button:hover {
    background-color: var(--bg-surface-3);
    box-shadow: var(--elevation-sm);
    transition: all var(--motion-duration) var(--motion-ease);
}

.app_list_filter_nav_button:focus {
    background-color: var(--bg-surface-3);
    box-shadow: var(--elevation-sm);
    transition: all var(--motion-duration) var(--motion-ease);
}

.app_list_filter_nav_button:active {
    background-color: var(--bg-surface-3);
    box-shadow: var(--elevation-sm);
    transform: scale(0.95);
    transition: all var(--motion-duration) var(--motion-ease);
}

.app_list_filter_nav_button[data-active="true"] {
    font-weight: 600;
    background-color: var(--bg-surface-3);
    box-shadow: var(--elevation-sm);
    transform: scale(0.95);
    transition: all var(--motion-duration) var(--motion-ease);
}

.app_list {
    width: var(--width-1-col);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: clamp(var(--space-md), 4vw, var(--space-lg));
    transition: all var(--motion-duration) var(--motion-ease);
}

.app_list_item {
    width: var(--width-1-col);
    display: flex;
    flex-direction: column;
}

.app_list_item[data-active="false"] {
    display: none;
}

.app_list_item_link {
    width: var(--width-1-col);
    min-height: 60px;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: clamp(var(--space-md), 4vw, var(--space-lg));
    background-color: var(--bg-surface-2);
    border-radius: clamp(var(--radius-md), 4vw, var(--radius-lg));
    transition: all var(--motion-duration) var(--motion-ease);
}

.app_list_item_link:hover {
    background-color: var(--bg-surface-3);
    box-shadow: var(--elevation-sm);
    transition: all var(--motion-duration) var(--motion-ease);
}

.app_list_item_link:focus {
    background-color: var(--bg-surface-3);
    box-shadow: var(--elevation-sm);
    transition: all var(--motion-duration) var(--motion-ease);
}

.app_list_item_link:active {
    background-color: var(--bg-surface-3);
    box-shadow: var(--elevation-sm);
    transition: all var(--motion-duration) var(--motion-ease);
}

.app_list_item_link_header {
    width: var(--width-1-col);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
}

.app_list_item_link_header_group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-sm);
}

.app_list_item_link_header_title {
    font-size: var(--font-body-xs);
    font-weight: 600;
    color: var(--text-muted);
}

.app_list_item_link_header_text {
    font-size: var(--font-body-xs);
    font-weight: 400;
    color: var(--text-muted);
}

.app_list_item_link_main {
    width: var(--width-1-col);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-xs);
}

.app_list_item_link_main_text {
    flex: 1;
    max-width: 100%;
    font-size: var(--font-body-sm);
    font-weight: 400;
    color: var(--text-primary);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Scriptures */
.scriptures {
    width: var(--width-1-col);
    max-width: 640px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    gap: clamp(var(--space-md), 4vw, var(--space-lg));
    margin: 0 auto;
    padding: clamp(var(--space-lg), 4vw, var(--space-xl));
    background-color: var(--bg-surface-1);
    border-radius: clamp(var(--space-md), 4vw, var(--space-lg));
    transition: all var(--motion-duration) var(--motion-ease);
}

/* Devotions */
.devotions {
    width: var(--width-1-col);
    max-width: 640px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    gap: clamp(var(--space-md), 4vw, var(--space-lg));
    margin: 0 auto;
    padding: clamp(var(--space-lg), 4vw, var(--space-xl));
    background-color: var(--bg-surface-1);
    border-radius: clamp(var(--space-md), 4vw, var(--space-lg));
    transition: all var(--motion-duration) var(--motion-ease);
}

/* Prayers */
.prayers {
    width: var(--width-1-col);
    max-width: 640px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    gap: clamp(var(--space-md), 4vw, var(--space-lg));
    margin: 0 auto;
    padding: clamp(var(--space-lg), 4vw, var(--space-xl));
    background-color: var(--bg-surface-1);
    border-radius: clamp(var(--space-md), 4vw, var(--space-lg));
    transition: all var(--motion-duration) var(--motion-ease);
}

/* Media queries */
@media only screen and (min-width: 480px) {

    /* App section */
    .app_section {
        min-height: calc(100vh - 112px);
    }
}

@media only screen and (min-width: 640px) {

    /* Scripture card */
    .scripture_card_footer {
        flex-direction: row;
    }
}