/* ===========================================================================
   Native iOS presentation.

   Every rule is scoped under .platform-native, so the website keeps the look
   it has. The aim is that nothing reads as a web page: a bottom tab bar
   instead of a top nav, large titles, inset grouped lists, the system font for
   chrome, safe area insets, and no text selection or tap highlights outside
   the prayers themselves.

   Crimson Text is kept for the prayers and psalms. That is the app's voice —
   only the interface around it becomes iOS.
   =========================================================================== */

.platform-native {
    /* San Francisco for chrome, matching every other app on the device. */
    --ui-font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;

    --ios-bg: #f2f2f7;          /* systemGroupedBackground */
    --ios-card: #ffffff;        /* secondarySystemGroupedBackground */
    --ios-separator: rgba(60, 60, 67, 0.29);
    --ios-label: #000000;
    --ios-secondary: rgba(60, 60, 67, 0.6);
    --ios-tertiary: rgba(60, 60, 67, 0.3);

    --tab-bar-height: 49px;

    background: var(--ios-bg);
    /* Stop the rubber-band overscroll revealing a white gutter. */
    overscroll-behavior-y: none;

    /* The topic chips run edge to edge by way of negative margins, which
       widens the document unless an ancestor clips. Safe here because the only
       sticky element, .tradition-tabs, is hidden on native. */
    overflow-x: hidden;
}

/* A web page lets you select and long-press anything; an app does not. The
   prayers, psalms and readings opt back in below. */
.platform-native,
.platform-native button,
.platform-native label {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

.platform-native .prayer-text,
.platform-native .psalm-text,
.platform-native .reading-body,
.platform-native .today-titles {
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
}

/* --- Header: an iOS large title ------------------------------------------ */

.platform-native header {
    background: var(--ios-bg);
    color: var(--ios-label);
    text-align: left;
    box-shadow: none;
    padding: calc(env(safe-area-inset-top) + 0.5rem) 1.25rem 0.5rem;
    border-bottom: 0.5px solid var(--ios-separator);
}

.platform-native header h1 {
    font-family: var(--ui-font);
    font-size: 34px;
    font-weight: 700;
    letter-spacing: 0.37px;
    color: var(--ios-label);
    margin: 0;
}

.platform-native header .subtitle {
    font-family: var(--ui-font);
    font-size: 15px;
    font-style: normal;
    color: var(--ios-secondary);
    opacity: 1;
    margin-bottom: 0.6rem;
}

/* The day's commemoration, as a tinted status chip. */
.platform-native .season-banner {
    display: block;
    width: 100%;
    margin-top: 0;
    padding: 0.5rem 0.75rem;
    border-radius: 10px;
    font-family: var(--ui-font);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    /* Overrides the inline colour app.js sets for the web header. */
    background: color-mix(in srgb, var(--primary-color) 14%, transparent) !important;
    color: var(--primary-color) !important;
}

.platform-native .office-banner {
    font-family: var(--ui-font);
    font-size: 13px;
    color: var(--ios-secondary);
    margin-top: 0.5rem;
}

/* --- Music control: a pill button, not a form ---------------------------- */

.platform-native .music-controls {
    margin-top: 0.75rem;
    margin-bottom: 0.25rem;
    justify-content: flex-start;
}

/* One chant, so the <select> is pure web furniture. */
.platform-native .music-select {
    display: none;
}

.platform-native .music-btn {
    font-family: var(--ui-font);
    font-size: 15px;
    font-weight: 500;
    border-radius: 100px;
    border: none;
    padding: 0.45rem 1.1rem;
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
    color: var(--primary-color);
}

.platform-native .music-btn.playing {
    background: var(--primary-color);
    color: #fff;
}

/* --- Bottom tab bar ------------------------------------------------------ */

.platform-native .main-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;

    background: rgba(249, 249, 249, 0.94);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);

    border-bottom: none;
    border-top: 0.5px solid var(--ios-separator);
    padding: 0 0 env(safe-area-inset-bottom);
    justify-content: space-around;
}

.platform-native .main-nav-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;

    height: var(--tab-bar-height);
    padding: 4px 0 0;

    font-family: var(--ui-font);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ios-secondary);
}

/* The underline indicator is a web-tab idiom. */
.platform-native .main-nav-tab::after {
    display: none;
}

/* Tab glyphs, drawn as masks so they take the liturgical colour when active. */
.platform-native .main-nav-tab::before {
    content: '';
    width: 26px;
    height: 26px;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Open book */
.platform-native .main-nav-tab[data-section="prayers"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6.5C10.5 5 8.5 4.5 6 4.5H3v13h3c2.5 0 4.5.5 6 2 1.5-1.5 3.5-2 6-2h3v-13h-3c-2.5 0-4.5.5-6 2z'/%3E%3Cpath d='M12 6.5v13'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6.5C10.5 5 8.5 4.5 6 4.5H3v13h3c2.5 0 4.5.5 6 2 1.5-1.5 3.5-2 6-2h3v-13h-3c-2.5 0-4.5.5-6 2z'/%3E%3Cpath d='M12 6.5v13'/%3E%3C/svg%3E");
}

/* Calendar */
.platform-native .main-nav-tab[data-section="today"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2.5'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2.5'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
}

/* Scroll */
.platform-native .main-nav-tab[data-section="psalter"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h11a2 2 0 0 1 2 2v14a2 2 0 0 0 2 2H8a2 2 0 0 1-2-2z'/%3E%3Cpath d='M6 3a2 2 0 0 0-2 2v3h2M9 8h7M9 12h7M9 16h4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h11a2 2 0 0 1 2 2v14a2 2 0 0 0 2 2H8a2 2 0 0 1-2-2z'/%3E%3Cpath d='M6 3a2 2 0 0 0-2 2v3h2M9 8h7M9 12h7M9 16h4'/%3E%3C/svg%3E");
}

.platform-native .main-nav-tab.active {
    color: var(--primary-color);
}

.platform-native .main-nav-tab:active {
    opacity: 0.4;
}

/* Clear the fixed bar. */
.platform-native main {
    padding-bottom: calc(var(--tab-bar-height) + env(safe-area-inset-bottom) + 1.5rem);
}

/* The flanking background images are desktop decoration. */
.platform-native main::before,
.platform-native main::after {
    display: none;
}

/* --- Segmented controls -------------------------------------------------- */

.platform-native .calendar-tabs,
.platform-native .psalter-tabs {
    background: rgba(118, 118, 128, 0.12);
    border-radius: 9px;
    padding: 2px;
    gap: 0;
    margin: 0 0 1.5rem;
}

.platform-native .calendar-tab,
.platform-native .psalter-tab {
    flex: 1;
    border: none;
    background: transparent;
    border-radius: 7px;
    padding: 6px 10px;
    font-family: var(--ui-font);
    font-size: 13px;
    font-weight: 500;
    color: var(--ios-label);
}

.platform-native .calendar-tab.active,
.platform-native .psalter-tab.active {
    background: #fff;
    color: var(--ios-label);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 3px 1px rgba(0, 0, 0, 0.04);
}

/* The tradition row is a single option; a one-item tab bar is noise. */
.platform-native .tradition-tabs {
    display: none;
}

/* --- Topic chips --------------------------------------------------------- */

/* The chips wrap rather than scroll horizontally. A single scrolling row put
   four of the eight topics off screen with nothing to indicate they were
   there — the content was reachable only by a gesture the reader had no
   reason to try. Wrapping costs a little height and hides nothing. */
.platform-native .topic-tabs {
    border-bottom: none;
    padding-bottom: 0.5rem;
    margin: 0 0 1rem;
    max-width: 100%;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.platform-native .topic-tab {
    flex: 0 0 auto;
    font-family: var(--ui-font);
    font-size: 14px;
    border: none;
    background: rgba(118, 118, 128, 0.12);
    color: var(--ios-label);
    border-radius: 100px;
    padding: 0.4rem 0.9rem;
}

.platform-native .topic-tab.active {
    background: var(--primary-color);
    color: #fff;
}

/* --- Inset grouped lists ------------------------------------------------- */

.platform-native .prayer,
.platform-native .psalm,
.platform-native .reading,
.platform-native .office-section,
.platform-native .reminder-list,
.platform-native .today-fact {
    background: var(--ios-card);
    border-radius: 12px;
    box-shadow: none;
    border-left: none;
}

.platform-native .prayer {
    padding: 0;
    overflow: hidden;
}

.platform-native .prayer h3,
.platform-native .psalm h3,
.platform-native .reading h3 {
    font-family: var(--ui-font);
    font-size: 17px;
    font-weight: 600;
    color: var(--ios-label);
    padding: 14px 16px;
}

.platform-native .prayer:not(.collapsed) h3 {
    border-bottom: 0.5px solid var(--ios-separator);
    margin-bottom: 0;
}

.platform-native .prayer-body {
    padding: 14px 16px;
}

/* max-height: 0 does not collapse this on its own. With border-box sizing an
   element cannot shrink below its own padding, so the 14px top and bottom
   survived the collapse and left 28px of dead space inside every closed card. */
.platform-native .prayer.collapsed .prayer-body {
    padding-top: 0;
    padding-bottom: 0;
}

/* A chevron, the iOS affordance for a row that opens. */
.platform-native .prayer h3::after {
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--ios-tertiary);
    border-bottom: 2px solid var(--ios-tertiary);
    transform: rotate(-45deg);
}

.platform-native .prayer:not(.collapsed) h3::after {
    transform: rotate(45deg);
}

.platform-native .reading h3::after,
.platform-native .psalm h3::after {
    color: var(--ios-tertiary);
}

.platform-native .prayer:active,
.platform-native .reading:active,
.platform-native .psalm:active {
    background: rgba(0, 0, 0, 0.04);
}

.platform-native .prayer.current-hour {
    border-left: none;
}

.platform-native .prayer.current-hour::before {
    top: 14px;
    left: auto;
    right: 40px;
    font-size: 11px;
    border-radius: 100px;
}

/* --- Today ---------------------------------------------------------------*/

.platform-native .today-date,
.platform-native .today-section-title,
.platform-native .fact-key {
    font-family: var(--ui-font);
}

.platform-native .today-section-title {
    text-align: left;
    font-size: 13px;
    font-weight: 400;
    color: var(--ios-secondary);
    letter-spacing: 0;
    margin: 1.75rem 0 0.5rem 1rem;
}

.platform-native .today-fact {
    border: none;
}

/* --- Reminder rows, with iOS switches ------------------------------------ */

.platform-native .reminders {
    border-top: none;
}

.platform-native .reminder-row {
    padding: 11px 16px;
    border-bottom: 0.5px solid var(--ios-separator);
    gap: 0;
}

.platform-native .reminder-row:last-child {
    border-bottom: none;
}

.platform-native .reminder-name {
    font-family: var(--ui-font);
    font-size: 17px;
    font-weight: 400;
    color: var(--ios-label);
    order: 1;
}

.platform-native .reminder-time {
    font-family: var(--ui-font);
    font-size: 17px;
    color: var(--ios-secondary);
    order: 2;
    margin-right: 12px;
}

/* Rebuild the checkbox as a UISwitch. */
.platform-native .reminder-row input[type="checkbox"] {
    order: 3;
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    width: 51px;
    height: 31px;
    border-radius: 100px;
    background: rgba(120, 120, 128, 0.16);
    transition: background 0.25s ease;
    flex-shrink: 0;
}

.platform-native .reminder-row input[type="checkbox"]::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 27px;
    height: 27px;
    border-radius: 100px;
    background: #fff;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), 0 1px 1px rgba(0, 0, 0, 0.16);
    transition: transform 0.25s ease;
}

.platform-native .reminder-row input[type="checkbox"]:checked {
    background: #34c759;
}

.platform-native .reminder-row input[type="checkbox"]:checked::after {
    transform: translateX(20px);
}

.platform-native .reminders-note,
.platform-native .reminders-status,
.platform-native .today-credit,
.platform-native .psalter-intro p {
    font-family: var(--ui-font);
    font-size: 13px;
    color: var(--ios-secondary);
    text-align: left;
}

/* --- Psalter ------------------------------------------------------------- */

.platform-native .psalm-navigation {
    font-family: var(--ui-font);
    background: var(--ios-card);
    border-radius: 12px;
    padding: 11px 16px;
}

.platform-native #psalm-select {
    font-family: var(--ui-font);
    font-size: 17px;
    border: none;
    background: transparent;
    color: var(--primary-color);
}

/* --- Footer -------------------------------------------------------------- */

.platform-native footer {
    background: transparent;
    color: var(--ios-secondary);
    font-family: var(--ui-font);
    font-size: 12px;
    padding-bottom: calc(var(--tab-bar-height) + env(safe-area-inset-bottom) + 1rem);
}

/* --- iPad ----------------------------------------------------------------
   Without these the phone layout simply stretches: a title flush against the
   status bar, chips running off the right edge, and cards two thousand pixels
   wide holding one line of text. A reading column, centred, is what the
   content actually wants.
   ------------------------------------------------------------------------ */

/* The height test matters: a phone in landscape is wide enough to satisfy
   min-width on its own, and would otherwise take iPad type sizes and a taller
   tab bar inside a viewport barely 300pt high. An iPad in landscape is still
   around 1000pt tall, so it stays on the right side of this. */
@media (min-width: 768px) and (min-height: 700px) {
    .platform-native {
        --reading-column: 700px;
        --tab-bar-height: 56px;
    }

    /* iPad has no notch, so env(safe-area-inset-top) is 0 and the large title
       collided with the status bar. Claim real clearance either way. */
    .platform-native header {
        padding-top: max(env(safe-area-inset-top), 1.75rem);
        padding-bottom: 0.75rem;
        padding-left: max(1.5rem, calc((100% - var(--reading-column)) / 2));
        padding-right: max(1.5rem, calc((100% - var(--reading-column)) / 2));
    }

    .platform-native header h1 {
        font-size: 40px;
    }

    .platform-native header .subtitle {
        font-size: 17px;
    }

    .platform-native .season-banner {
        font-size: 15px;
        padding: 0.65rem 1rem;
    }

    .platform-native .office-banner {
        font-size: 15px;
    }

    /* The reading column. The base stylesheet allows 900px, which on a 13in
       iPad is very nearly full width. */
    .platform-native main {
        max-width: var(--reading-column);
    }

    /* Centre the tab items rather than spreading three of them across a
       thirteen inch bar, which is how iPadOS does it. */
    .platform-native .main-nav {
        justify-content: center;
        gap: 2rem;
    }

    .platform-native .main-nav-tab {
        flex: 0 1 150px;
        font-size: 12px;
    }

    .platform-native .main-nav-tab::before {
        width: 28px;
        height: 28px;
    }

    .platform-native .topic-tabs {
        justify-content: center;
        gap: 0.5rem;
    }

    .platform-native .topic-tab {
        font-size: 15px;
        padding: 0.45rem 1rem;
    }

    .platform-native .prayer h3,
    .platform-native .psalm h3,
    .platform-native .reading h3 {
        font-size: 19px;
        padding: 18px 22px;
    }

    .platform-native .prayer-body,
    .platform-native .reading-body {
        padding: 18px 22px;
    }

    .platform-native .prayer.collapsed .prayer-body {
        padding-top: 0;
        padding-bottom: 0;
    }

    .platform-native .prayer-text,
    .platform-native .psalm-text {
        font-size: 1.15rem;
    }

    .platform-native .today-titles {
        font-size: 1.7rem;
    }

    .platform-native .reminder-row {
        padding: 14px 22px;
    }

    .platform-native .reminder-name,
    .platform-native .reminder-time {
        font-size: 19px;
    }
}

/* --- Short viewports, chiefly a phone held sideways -----------------------
   With a viewport under 300pt tall the large title, subtitle, banner and music
   button consumed nearly the whole screen, leaving the topic chips sitting on
   the tab bar and no prayer visible at all. Nothing was broken and it all
   scrolled, but the first screen showed none of the content. The heading
   collapses to a single line and gives the room back.
   ------------------------------------------------------------------------ */

@media (max-height: 500px) and (orientation: landscape) {
    .platform-native {
        --tab-bar-height: 42px;
    }

    .platform-native header {
        padding-top: max(env(safe-area-inset-top), 0.4rem);
        padding-bottom: 0.4rem;
        /* Clear the notch, which is on the long edge when sideways. */
        padding-left: max(env(safe-area-inset-left), 1.25rem);
        padding-right: max(env(safe-area-inset-right), 1.25rem);
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0 0.75rem;
    }

    .platform-native header h1 {
        font-size: 22px;
        margin: 0;
    }

    /* Redundant beside the title once space is short. */
    .platform-native header .subtitle {
        display: none;
    }

    .platform-native .season-banner {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        font-size: 12px;
        padding: 0.3rem 0.6rem;
        order: 3;
    }

    .platform-native .office-banner {
        font-size: 12px;
        margin-top: 0;
        order: 2;
    }

    .platform-native .music-controls {
        margin: 0;
        order: 4;
    }

    .platform-native .music-btn {
        font-size: 13px;
        padding: 0.3rem 0.8rem;
    }

    .platform-native main {
        padding-top: 0.75rem;
        padding-bottom: calc(var(--tab-bar-height) + env(safe-area-inset-bottom) + 0.75rem);
    }

    .platform-native .main-nav-tab {
        height: var(--tab-bar-height);
        font-size: 9px;
        gap: 1px;
    }

    .platform-native .main-nav-tab::before {
        width: 20px;
        height: 20px;
    }

    .platform-native .topic-tabs {
        padding-bottom: 0.25rem;
        margin-bottom: 0.6rem;
    }

    /* Tighten the standing explanation so the first prayer clears the fold.
       A card that peeks is what tells the reader there is more below. */
    .platform-native .office-intro {
        padding: 0.7rem 1rem;
        margin-bottom: 0.7rem;
    }

    .platform-native .office-intro p {
        font-size: 0.9rem;
        line-height: 1.45;
    }

    .platform-native .current-hour-indicator {
        margin-top: 0.35rem !important;
        font-size: 0.85rem;
    }

    .platform-native footer {
        display: none;
    }
}

/* --- Dark mode ----------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
    .platform-native {
        --ios-bg: #000000;
        --ios-card: #1c1c1e;
        --ios-separator: rgba(84, 84, 88, 0.65);
        --ios-label: #ffffff;
        --ios-secondary: rgba(235, 235, 245, 0.6);
        --ios-tertiary: rgba(235, 235, 245, 0.3);

        --background-color: #000000;
        --card-background: #1c1c1e;
        --text-color: #ffffff;
        --text-muted: rgba(235, 235, 245, 0.6);
        --border-color: rgba(84, 84, 88, 0.65);
    }

    .platform-native .main-nav {
        background: rgba(22, 22, 22, 0.94);
    }

    .platform-native .calendar-tab.active,
    .platform-native .psalter-tab.active {
        background: #636366;
        color: #fff;
    }

    .platform-native .calendar-tabs,
    .platform-native .psalter-tabs,
    .platform-native .topic-tab {
        background: rgba(118, 118, 128, 0.24);
    }

    .platform-native .reminder-row input[type="checkbox"] {
        background: rgba(120, 120, 128, 0.32);
    }

    .platform-native .prayer:active,
    .platform-native .reading:active,
    .platform-native .psalm:active {
        background: rgba(255, 255, 255, 0.06);
    }

    /* The liturgical colour is chosen for a cream page; lift it so it stays
       legible on black. */
    .platform-native .today-titles,
    .platform-native .prayer h3,
    .platform-native .reading h3,
    .platform-native .psalm h3 {
        color: #fff;
    }
}