/* Home, gallery and settings styled after the native VFTCam apps. Uses tokens from native-tokens.css. */

/* ---------- Home ---------- */
#start-screen.native-home {
    top: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    border: none;
    border-radius: 0;
    background: var(--vft-home-bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    overflow: hidden;
    color: var(--vft-text);
    font-family: var(--vft-font);
}

.native-home .home-photo,
.native-home .home-shade {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.native-home .home-photo {
    background: url('../img/home.webp') center / cover no-repeat;
}
.native-home .home-shade {
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.15) 45%, rgba(0, 0, 0, 0.95) 100%);
}

.native-home .home-top {
    position: absolute;
    top: calc(var(--vft-safe-top) + 12px);
    left: 20px;
    right: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1;
}

.native-home .home-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: var(--vft-icon-button);
    padding: 0 14px;
    border: none;
    border-radius: var(--vft-radius);
    background: var(--vft-scrim);
    color: var(--vft-text);
    font-family: var(--vft-font);
    font-size: var(--vft-fs-subheadline);
    font-weight: var(--vft-fw-semibold);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.native-home .home-pill #mode-icon {
    width: 20px;
    height: 20px;
    background: currentColor;
    -webkit-mask: url('../img/outdoor.svg') center / contain no-repeat;
    mask: url('../img/outdoor.svg') center / contain no-repeat;
}
.native-home .home-pill #mode-icon[data-mode="indoor"] {
    -webkit-mask-image: url('../img/indoor.svg');
    mask-image: url('../img/indoor.svg');
}
.native-home .home-pill:focus-visible { outline: 2px solid var(--vft-blue); outline-offset: 2px; }

.native-home .home-bottom {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: calc(var(--vft-safe-bottom) + 12px);
    display: flex;
    flex-direction: column;
    gap: var(--vft-space-5);
    z-index: 1;
}

.native-home .home-heading { display: flex; flex-direction: column; gap: 10px; }
.native-home #home-title {
    margin: 0;
    font-size: var(--vft-fs-large-title);
    font-weight: var(--vft-fw-bold);
    line-height: 1.1;
    color: var(--vft-text);
    text-shadow: none;
}
.native-home .home-subtitle {
    margin: 0;
    font-size: var(--vft-fs-title3);
    color: var(--vft-text-muted);
}

/* Start button: overrides the gradient #start-btn styles in capture.css */
.native-home #start-btn {
    margin: 0;
    width: 100%;
    max-width: none;
    padding: 0 18px;
    min-height: var(--vft-button-height);
    border-radius: var(--vft-radius);
    background: var(--vft-red);
    box-shadow: none;
    font-size: var(--vft-fs-headline);
    font-weight: var(--vft-fw-semibold);
    letter-spacing: 0;
    text-transform: none;
}
.native-home #start-btn::before { display: none; }
.native-home #start-btn:hover { background: var(--vft-red); transform: none; }
.native-home #start-btn:active { background: var(--vft-red); opacity: 0.7; transform: scale(0.98); }
.native-home #start-btn img { width: 22px; height: 22px; filter: brightness(0) invert(1); }

.native-home .home-recents { display: flex; flex-direction: column; gap: 10px; }
.native-home .home-recents-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--vft-text-muted);
}
.native-home #home-recents-title {
    margin: 0;
    font-size: var(--vft-fs-caption);
    font-weight: var(--vft-fw-bold);
    letter-spacing: var(--vft-eyebrow-tracking);
    text-transform: uppercase;
}
.native-home .home-link {
    min-height: var(--vft-touch-min);
    padding: 0 0 0 12px;
    border: none;
    background: none;
    color: var(--vft-text-muted);
    font-family: var(--vft-font);
    font-size: var(--vft-fs-subheadline);
    cursor: pointer;
}
.native-home .home-link:focus-visible { outline: 2px solid var(--vft-blue); }

.native-home .home-recents-list {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    margin: 0 -20px;
    padding: 0 20px 2px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.native-home .home-recents-list::-webkit-scrollbar { display: none; }

.native-home .home-recents-empty {
    flex: 1;
    margin: 0;
    padding: 18px;
    border-radius: var(--vft-radius);
    background: rgba(0, 0, 0, 0.25);
    color: var(--vft-text-muted);
    font-size: var(--vft-fs-subheadline);
}

.native-home .home-recent {
    flex: none;
    width: 132px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 0;
    border: none;
    background: none;
    color: var(--vft-text-muted);
    font-family: var(--vft-font);
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.native-home .home-recent-thumb {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 132px;
    height: 74px;
    border-radius: var(--vft-radius-sm);
    border: 1px solid var(--vft-border);
    background: var(--vft-surface) center / cover no-repeat;
    box-sizing: border-box;
}
.native-home .home-recent-date { font-size: var(--vft-fs-caption); }
.native-home .home-recent--more .home-recent-thumb {
    border: 1px dashed rgba(192, 192, 191, 0.55);
    background: rgba(0, 0, 0, 0.25);
    color: var(--vft-text);
    font-size: var(--vft-fs-footnote);
    font-weight: var(--vft-fw-semibold);
}
.native-home .home-recent:active .home-recent-thumb { opacity: 0.7; }
.native-home .home-recent:focus-visible { outline: 2px solid var(--vft-blue); outline-offset: 2px; border-radius: var(--vft-radius-sm); }

/* One-shot reveal (iOS HomeRevealBackground): wipe in the photo, then fade up the controls. */
@keyframes vft-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes vft-line { from { left: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } to { left: 100%; opacity: 0; } }
@keyframes vft-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

#start-screen.native-home.home-reveal .home-photo {
    animation: vft-wipe 900ms var(--vft-ease-reveal) 150ms both;
}
#start-screen.native-home.home-reveal .home-shade::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    margin-left: -1px;
    background: linear-gradient(transparent, var(--vft-blue), var(--vft-blue), transparent);
    box-shadow: 0 0 8px rgba(82, 194, 255, 0.45);
    animation: vft-line 900ms var(--vft-ease-reveal) 150ms both;
}
#start-screen.native-home.home-reveal .home-heading { animation: vft-rise 500ms ease-out 950ms both; }
#start-screen.native-home.home-reveal .home-top,
#start-screen.native-home.home-reveal #start-btn { animation: vft-rise 500ms ease-out 1030ms both; }
#start-screen.native-home.home-reveal .home-recents { animation: vft-rise 500ms ease-out 1090ms both; }

@media (prefers-reduced-motion: reduce) {
    #start-screen.native-home *,
    #start-screen.native-home *::before { animation: none !important; }
}

/* ---------- Shared full-screen page / sheet frame ---------- */
.ui-card.native-page,
.ui-card.native-sheet {
    width: 100%;
    max-width: 640px;
    bottom: 0;
    border: none;
    background: var(--vft-bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: var(--vft-text);
    font-family: var(--vft-font);
}
.ui-card.native-page {
    top: 0;
    border-radius: 0;
    box-shadow: none;
}
.ui-card.native-sheet {
    top: calc(var(--vft-safe-top) + 10px);
    border-radius: var(--vft-radius-sheet) var(--vft-radius-sheet) 0 0;
    box-shadow: var(--vft-shadow-sheet);
}
.native-page .card-header,
.native-sheet .card-header {
    padding: 0 20px;
    border-bottom: none;
    text-align: left;
}
.native-page .card-content,
.native-sheet .card-content {
    padding: 8px 20px calc(var(--vft-safe-bottom) + 24px);
    text-shadow: none;
}
.native-page .card-title,
.native-sheet .card-title { text-shadow: none; font-family: var(--vft-font); }

/* Back / Done buttons replace the round close button */
.native-page .card-close-btn,
.native-sheet .card-close-btn {
    position: static;
    width: auto;
    height: var(--vft-touch-min);
    padding: 0 4px;
    border: none;
    border-radius: var(--vft-radius-sm);
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    font-family: var(--vft-font);
    font-size: var(--vft-fs-headline);
    gap: 4px;
    transition: opacity var(--vft-press-duration) ease-out;
}
.native-page .card-close-btn:hover,
.native-sheet .card-close-btn:hover { background: none; transform: none; }
.native-page .card-close-btn:active,
.native-sheet .card-close-btn:active { opacity: 0.6; }
.native-page .card-close-btn:focus-visible,
.native-sheet .card-close-btn:focus-visible { outline: 2px solid var(--vft-blue); }
.native-page .card-close-btn span,
.native-sheet .card-close-btn span { font-size: 30px; line-height: 1; margin-top: -3px; }

@media (prefers-reduced-motion: reduce) {
    /* cards.css moves visible cards up by half their height under reduced motion */
    .ui-card.native-page.visible,
    .ui-card.native-sheet.visible,
    #start-screen.native-home.visible { transform: translateX(-50%); }
}

.native-page button,
.native-sheet button { font-family: var(--vft-font); }

/* ---------- Gallery ---------- */
.native-page .page-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: calc(var(--vft-safe-top) + 16px) 20px 0;
    flex-shrink: 0;
}
.native-page .card-close-btn.page-back {
    width: var(--vft-icon-button);
    height: var(--vft-icon-button);
    padding: 0;
    flex: none;
    border-radius: var(--vft-radius);
    background: rgba(0, 0, 0, 0.45);
    color: var(--vft-text);
}
.native-page .page-bar .card-title {
    font-size: var(--vft-fs-title);
    font-weight: var(--vft-fw-bold);
}
.native-page .card-header { padding-left: calc(20px + var(--vft-icon-button) + 16px); }
.native-page #camera-roll-count {
    margin: 0 0 16px;
    color: var(--vft-text-muted);
    font-size: var(--vft-fs-subheadline);
    opacity: 1;
}

.native-page .photosphere-item {
    position: relative;
    margin: 0 0 12px;
}
.native-page .ps-open {
    position: relative;
    display: block;
    width: 100%;
    height: 126px;
    padding: 0;
    border: 1px solid var(--vft-border);
    border-radius: var(--vft-radius);
    overflow: hidden;
    background: var(--vft-surface);
    color: var(--vft-text);
    font-family: var(--vft-font);
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.native-page .ps-open::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.85));
}
.native-page .ps-open:active { opacity: 0.8; }
.native-page .ps-open:focus-visible { outline: 2px solid var(--vft-blue); outline-offset: 2px; }
.native-page .equirectangular-preview {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    margin: 0;
    border: none;
    border-radius: 0;
    background-size: cover;
    background-position: center;
}
.native-page .ps-meta {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    z-index: 1;
}
.native-page .ps-title { font-size: var(--vft-fs-headline); font-weight: var(--vft-fw-semibold); }
.native-page .capture-date {
    margin: 0;
    color: var(--vft-text-muted);
    font-family: var(--vft-font-mono);
    font-size: 12px;
    font-weight: 400;
    text-shadow: none;
}
.native-page .action-buttons {
    top: 8px;
    right: 8px;
    bottom: auto;
    gap: 6px;
}
.native-page .action-btn {
    width: var(--vft-touch-min);
    height: var(--vft-touch-min);
    border: none;
    border-radius: 12px;
    background: var(--vft-scrim);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.native-page .action-btn img { filter: brightness(0) invert(1); }
.native-page .action-btn:hover { background: var(--vft-scrim-strong); transform: none; }
.native-page .action-btn:active { opacity: 0.7; transform: scale(0.96); }

.native-page .gallery-footer { margin-top: 12px; }
.native-page .gallery-footer + .gallery-footer { margin-top: 10px; }
.native-page #storage-warning-banner { border-radius: var(--vft-radius) !important; }

.native-page .gallery-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 60px 20px 24px;
    text-align: center;
    color: var(--vft-text-muted);
}
.native-page .gallery-empty h2 {
    margin: 8px 0 0;
    color: var(--vft-text);
    font-size: var(--vft-fs-title3);
    font-weight: var(--vft-fw-bold);
}
.native-page .gallery-empty p { margin: 0; font-size: var(--vft-fs-subheadline); }

/* ---------- Settings sheet ---------- */
.native-sheet .sheet-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 52px;
    padding: 4px 12px 0;
    flex-shrink: 0;
}
.native-sheet .sheet-done { color: var(--vft-text); font-weight: var(--vft-fw-semibold); }
.native-sheet .sheet-back { color: var(--vft-text); margin-right: auto; }
.native-sheet .card-header .card-title {
    font-size: var(--vft-fs-large-title);
    font-weight: var(--vft-fw-bold);
    line-height: 1.15;
}

.native-sheet .settings-section-title {
    margin: 24px 4px 8px;
    color: var(--vft-text-muted);
    font-size: var(--vft-fs-caption);
    font-weight: var(--vft-fw-semibold);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.native-sheet .settings-section-title:first-child { margin-top: 12px; }

.native-sheet .settings-menu-list {
    gap: 0;
    border-radius: var(--vft-radius-sm);
    background: var(--vft-surface);
    overflow: hidden;
}
.native-sheet .settings-menu-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 14px;
    min-height: 52px;
    padding: 0 14px 0 16px;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--vft-text);
    font-family: var(--vft-font);
    font-size: var(--vft-fs-body);
    position: relative;
}
.native-sheet .settings-menu-item + .settings-menu-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 54px;
    right: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.native-sheet .settings-menu-item:hover { background: transparent; transform: none; }
.native-sheet .settings-menu-item:active { background: var(--vft-surface-2); transform: none; }
.native-sheet .settings-menu-item:focus-visible { outline: 2px solid var(--vft-blue); outline-offset: -2px; }
.native-sheet .settings-row-icon {
    display: inline-flex;
    width: 24px;
    height: 24px;
    flex: none;
    color: var(--vft-text);
}
.native-sheet .settings-row-icon img,
.native-sheet .settings-row-icon svg { width: 22px; height: 22px; margin: 1px; filter: brightness(0) invert(1); opacity: 0.9; }
.native-sheet .settings-row-label { flex: 1; text-align: left; }
.native-sheet .settings-row-label small { display: block; margin-top: 2px; font-size: var(--vft-fs-caption); color: var(--vft-text-muted); }
.native-sheet .settings-row-chevron { color: var(--vft-text-muted); font-size: 24px; opacity: 0.7; }
.native-sheet .settings-menu-item--danger .settings-row-label { color: var(--vft-danger); }
.native-sheet .settings-menu-item--danger .settings-row-icon img {
    filter: brightness(0) saturate(100%) invert(38%) sepia(86%) saturate(2400%) hue-rotate(340deg);
}
.native-sheet .settings-footer {
    margin: 20px 0 0;
    text-align: center;
    color: var(--vft-text-muted);
    font-size: var(--vft-fs-caption);
}

.native-sheet .settings-switch:checked { background: var(--vft-toggle-on); }

/* Info card content (About, Privacy, FOV, Clear, Guide) */
#info-card.native-sheet .card-content {
    font-size: var(--vft-fs-subheadline);
    line-height: 1.5;
    color: var(--vft-text-muted);
}
#info-card.native-sheet .card-content h3 {
    color: var(--vft-text) !important;
    font-size: var(--vft-fs-headline);
    font-weight: var(--vft-fw-semibold);
}
#info-card.native-sheet .card-content a { color: var(--vft-text); }

.guide-steps {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: var(--vft-text);
    font-size: var(--vft-fs-body);
}
.guide-steps li {
    counter-increment: step;
    position: relative;
    padding-left: 40px;
    min-height: 28px;
}
.guide-steps li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--vft-fill-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--vft-fs-footnote);
    font-weight: var(--vft-fw-bold);
}
.guide-accent { color: var(--vft-amber); font-weight: var(--vft-fw-semibold); }