/* ========================================
   Forest OS｜Mobile Shell Repair Pilot V1.1
   共用互動、狀態與響應式基準。
   本檔案固定最後載入，防止舊 Pilot 規則覆蓋正式版本。
======================================== */

:root {
    --forest-system-mobile-gutter: 16px;
    --forest-system-control-size: 44px;
    --forest-system-focus: rgba(75, 103, 84, 0.46);
    --forest-system-safe-top: env(safe-area-inset-top, 0px);
    --forest-system-safe-right: env(safe-area-inset-right, 0px);
    --forest-system-safe-bottom: env(safe-area-inset-bottom, 0px);
    --forest-system-safe-left: env(safe-area-inset-left, 0px);
    --forest-system-status-guard: var(--forest-system-safe-top);
    --forest-system-safe-surface: #e6eae5;
}

body.night-mode {
    --forest-system-safe-surface: #1d2822;
}

/*
   iOS Chrome / Safari 在非 standalone 顯示模式可能把 safe-area-inset-top 回傳為 0，
   但收起瀏覽器工具列後內容仍可畫進狀態列。只在 iOS WebKit 窄螢幕提供後備高度。
*/
@supports (-webkit-touch-callout: none) {
    @media (max-width: 780px) {
        :root {
            --forest-system-status-guard:
                max(var(--forest-system-safe-top), 48px);
        }
    }
}

/* 共用鍵盤焦點：保留各森林色彩，只統一可辨識程度。 */
:where(
    .forest-central-home,
    #writingForestView,
    #timeForestView,
    #wealthForestView,
    #learningForestView,
    #editor
) :where(button, [role="button"], input, textarea, select):focus-visible {
    outline: 2px solid var(--forest-system-focus);
    outline-offset: 3px;
}

/* 四座森林的主要操作維持同一個最低觸控高度。 */
#writingForestView :where(
    .writing-home-new-button,
    #continueWritingButton,
    .forest-sync-button,
    .forest-more-tools > summary
),
#timeForestView :where(
    #timeForestSyncButton,
    .time-tree-primary-button,
    .time-tree-edit-button,
    .time-tree-add-button
),
#wealthForestView :where(
    #wealthForestSyncButton,
    .wealth-quick-entry-button,
    #openWealthBudgetButton,
    .wealth-ledger-add
),
#learningForestView :where(
    #learningForestSyncButton,
    .learning-song-add-button,
    .learning-continue-button,
    .learning-lyric-add-button,
    .learning-lyric-word-add-button
),
#editor .writing-editor-toolbar button {
    min-height: var(--forest-system-control-size);
}

/* 手動同步採用相同四態：同步 → 同步中 → 已同步／同步失敗。 */
[data-forest-sync] {
    min-width: 76px;
    transition:
        border-color 180ms ease,
        background-color 180ms ease,
        color 180ms ease,
        opacity 180ms ease;
}

[data-forest-sync][data-sync-state="syncing"] {
    cursor: progress;
    opacity: 0.72;
}

[data-forest-sync][data-sync-state="success"] {
    border-color: rgba(82, 124, 91, 0.28) !important;
    background: rgba(102, 143, 108, 0.11) !important;
    color: #57785e !important;
}

[data-forest-sync][data-sync-state="error"] {
    border-color: rgba(166, 88, 79, 0.3) !important;
    background: rgba(166, 88, 79, 0.09) !important;
    color: #a05850 !important;
}

body.night-mode [data-forest-sync][data-sync-state="success"] {
    border-color: rgba(143, 188, 151, 0.26) !important;
    background: rgba(112, 160, 121, 0.13) !important;
    color: #a7cbae !important;
}

body.night-mode [data-forest-sync][data-sync-state="error"] {
    border-color: rgba(220, 137, 128, 0.28) !important;
    background: rgba(184, 99, 90, 0.13) !important;
    color: #dda09a !important;
}

/* 內頁返回控制：同一箭頭、同一觸控高度，文字保留各頁語意。 */
.forest-system-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: var(--forest-system-control-size);
    margin-right: 0;
    padding: 0 2px;
    border: 0;
    border-bottom: 1px solid transparent;
    border-radius: 0;
    background: transparent;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
}

.forest-system-back:hover,
.forest-system-back:focus-visible {
    background: transparent;
}

#editor .forest-system-back {
    color: var(--writing-accent, #4f7561);
}

#wealthForestView .forest-system-back {
    color: var(--wealth-clay-deep, #805c43);
}

#learningForestView .forest-system-back {
    color: var(--learning-accent, #75617f);
}

#editor .forest-system-back:hover,
#editor .forest-system-back:focus-visible {
    border-bottom-color: var(--writing-line, rgba(79, 117, 97, 0.18));
}

#wealthForestView .forest-system-back:hover,
#wealthForestView .forest-system-back:focus-visible {
    border-bottom-color: var(--wealth-line, rgba(129, 91, 63, 0.16));
}

#learningForestView .forest-system-back:hover,
#learningForestView .forest-system-back:focus-visible {
    border-bottom-color: var(--learning-line, rgba(126, 107, 80, 0.17));
}

/* 英文微標題使用同一節奏。 */
:where(
    .writing-recent-heading > span,
    .time-forest-section-kicker,
    .wealth-section-kicker,
    .learning-section-kicker,
    .learning-study-kicker,
    .learning-analysis-kicker,
    .learning-analysis-section-label
) {
    text-transform: uppercase;
    letter-spacing: 0.16em;
}

/* ========================================
   學習森林｜Logo 紫灰紙張 Color Climate
   只調整色彩氣候，不改已 PASS 的內容與版式。
======================================== */
#learningForestView {
    --learning-canvas: #f3eff4;
    --learning-ink: #4f4653;
    --learning-muted: #716574;
    --learning-line: rgba(117, 97, 127, 0.18);
    --learning-paper: #eee8f0;
    --learning-paper-deep: #ded3e2;
    --learning-accent: #75617f;
    --forest-system-focus: rgba(117, 97, 127, 0.5);

    position: relative;
    left: 50%;
    width: 100vw;
    min-height: calc(100dvh - 72px);
    margin-right: -50vw;
    margin-left: -50vw;
    background: transparent;
}

#learningForestView .learning-pilot-home {
    position: relative;
    z-index: 1;
}

#learningForestView .learning-forest-mark,
#learningForestView .learning-song-item,
#learningForestView .learning-lyric-add-panel,
#learningForestView #learningLyricAnalysis :where(
    #learningLyricRomanizationEditPanel,
    #learningLyricWordEditPanel
) {
    background: rgba(255, 252, 255, 0.76);
}

#learningForestView .learning-continue-panel {
    background:
        radial-gradient(circle at 88% 12%, rgba(255, 255, 255, 0.8), transparent 40%),
        linear-gradient(145deg, #f3edf4, #e7dfe9);
    box-shadow: 0 18px 48px rgba(88, 68, 96, 0.07);
}

#learningForestView :where(
    .learning-continue-kicker,
    .learning-section-kicker,
    .learning-study-kicker,
    .learning-analysis-kicker,
    .learning-analysis-section-label
) {
    color: #75617f;
}

#learningForestView .learning-grove-item:hover {
    background: rgba(249, 244, 250, 0.58);
}

/* 內頁沿用共同頁面節奏，避免返回列與標題之間形成過大的空白。 */
#learningForestView .learning-song-grove-section {
    padding-top: 18px;
}

#learningForestView .learning-grove-topline {
    margin-bottom: 22px;
}

#learningForestView .learning-grove-heading {
    padding-bottom: 24px;
}

.forest-central-group #learningForestModule .forest-module-icon {
    border-color: rgba(117, 97, 127, 0.16);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(237, 229, 240, 0.94));
}

body.night-mode #learningForestView {
    --learning-canvas: #28242b;
    --learning-ink: #f0e9f1;
    --learning-muted: #b7abb9;
    --learning-line: rgba(221, 205, 226, 0.15);
    --learning-paper: #37313a;
    --learning-paper-deep: #443a47;
    --learning-accent: #c0abc7;
    background: transparent;
}

body.night-mode #learningForestView .learning-continue-panel {
    background:
        radial-gradient(circle at 88% 12%, rgba(255, 255, 255, 0.05), transparent 40%),
        linear-gradient(145deg, #3c3340, #302b33);
}

body.night-mode #learningForestView :where(
    .learning-continue-kicker,
    .learning-section-kicker,
    .learning-study-kicker,
    .learning-analysis-kicker,
    .learning-analysis-section-label
) {
    color: #c0abc7;
}

body.night-mode #learningForestView :where(
    .learning-forest-mark,
    .learning-song-item,
    .learning-lyric-add-panel
) {
    background: rgba(52, 47, 55, 0.8);
}

body.night-mode .forest-central-group #learningForestModule .forest-module-icon {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.04), rgba(91, 72, 99, 0.24));
}

.forest-toast.warning {
    background: rgba(137, 75, 67, 0.96);
}

#timeForestView {
    --forest-system-focus: rgba(98, 123, 143, 0.52);
}

/* ========================================
   手機共用基準
======================================== */
@media (max-width: 780px) {
    /*
       iPhone PWA / Safari 安全區：
       原版用 body 的 40px 上留白搭配 topbar -40px 抵消，長頁捲動後
       內容會穿進狀態列。保留既有視覺位置，但把安全區納入實際尺寸。
    */
    body {
        padding-top: calc(40px + var(--forest-system-safe-top));
        padding-bottom: calc(40px + var(--forest-system-safe-bottom));
    }

    .forest-ios-status-guard {
        position: fixed;
        z-index: 1000;
        top: 0;
        right: 0;
        left: 0;
        height: var(--forest-system-status-guard);
        background: var(--forest-system-safe-surface);
        pointer-events: none;
    }

    .forest-global-topbar {
        margin-top: calc(-40px - var(--forest-system-safe-top));
        padding-top: var(--forest-system-safe-top);
    }

    .writing-editor-toolbar {
        top: var(--forest-system-safe-top);
    }

    #backToTopButton {
        right: calc(24px + var(--forest-system-safe-right));
        bottom: calc(24px + var(--forest-system-safe-bottom));
    }

    .forest-toast {
        bottom: calc(28px + var(--forest-system-safe-bottom));
    }

    .forest-global-topbar-inner,
    .forest-central-home,
    #writingForestView,
    #timeForestView,
    #wealthForestView,
    #editor,
    body.focus-mode #editor,
    #learningForestView .learning-pilot-home,
    #learningForestView #learningLyricAnalysis.learning-lyric-analysis {
        width: calc(100vw - (var(--forest-system-mobile-gutter) * 2));
    }

    #learningForestView {
        min-height: calc(100dvh - 104px);
    }

    #learningForestView .learning-song-grove-section {
        padding-top: 14px;
    }

    #learningForestView .learning-grove-topline {
        margin-bottom: 18px;
    }

    #writingForestView .writing-section-nav button,
    #timeForestView .time-section-nav button,
    #wealthForestView .wealth-section-nav button,
    #learningForestView :where(
        .learning-grove-continue-button,
        .learning-grove-options-button,
        .learning-song-edit-button,
        .learning-lyric-edit-button,
        .learning-lyric-romanization-edit-button,
        .learning-lyric-word-options-button
    ) {
        min-height: var(--forest-system-control-size);
    }

    /* 緊湊列表的小圖示維持原尺寸，但實際可點區放大至 44px。 */
    #wealthForestView :where(
        .wealth-record-edit-button,
        .wealth-ledger-edit-button
    ) {
        position: relative;
    }

    #wealthForestView :where(
        .wealth-record-edit-button,
        .wealth-ledger-edit-button
    )::after {
        position: absolute;
        top: 50%;
        left: 50%;
        width: var(--forest-system-control-size);
        height: var(--forest-system-control-size);
        content: "";
        transform: translate(-50%, -50%);
    }

    .forest-system-back {
        min-height: var(--forest-system-control-size);
    }

    /* 文字森林書架：移除 iOS 原生藍字，建立與其他森林相同的主次操作。 */
    #writingForestView .forest-actions :where(button, summary) {
        appearance: none;
        -webkit-appearance: none;
        min-height: 48px;
        margin: 0;
        border-radius: 999px;
        font: inherit;
        touch-action: manipulation;
    }

    #writingForestView .forest-actions .new-button {
        border: 1px solid #486651;
        background: #486651;
        color: #fff;
        -webkit-text-fill-color: #fff;
    }

    #writingForestView .forest-actions .new-button:hover,
    #writingForestView .forest-actions .new-button:focus-visible {
        background: #3e5a46;
    }

    #writingForestView .forest-tools > * {
        width: 100%;
        min-width: 0;
    }

    #writingForestView .forest-sync-button,
    #writingForestView .forest-more-tools > summary {
        width: 100%;
        border: 1px solid rgba(79, 104, 74, 0.18);
        background: rgba(255, 255, 255, 0.48);
        color: #46604d;
        -webkit-text-fill-color: #46604d;
    }

    #writingForestView .forest-sync-button:hover,
    #writingForestView .forest-sync-button:focus-visible,
    #writingForestView .forest-more-tools > summary:hover,
    #writingForestView .forest-more-tools > summary:focus-visible {
        background: #e3ece4;
        color: #3f6047;
        -webkit-text-fill-color: #3f6047;
    }

    body.night-mode #writingForestView .forest-sync-button,
    body.night-mode #writingForestView .forest-more-tools > summary {
        border-color: rgba(173, 198, 180, 0.18);
        background: rgba(255, 255, 255, 0.045);
        color: #c6d4c9;
        -webkit-text-fill-color: #c6d4c9;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-forest-sync] {
        transition: none;
    }
}