/*
 * Styles for the lunar calendar converter.
 * Color variables are wired to the site theme tokens so the page follows the
 * site's light/dark mode (controlled by :root[data-theme="dark"]).
 */

.lc-root {
    --lc-bg: var(--bg-color, #fdfbf7);
    --lc-surface: var(--bg-card, #fff);
    --lc-border: var(--border-color, #e4dfd5);
    --lc-text: var(--text-main, #1f1e1c);
    --lc-muted: var(--text-secondary, #6b6864);
    --lc-accent: #b4482f;
    --lc-accent-soft: #fdf1ed;
    --lc-note-bg: #fff8e6;
    --lc-note-border: #e0b64a;

    font-family: -apple-system, BlinkMacSystemFont, "PingFang TC", "Microsoft JhengHei", sans-serif;
    color: var(--lc-text);
    background: var(--lc-bg);
    line-height: 1.6;
    max-width: 860px;
    margin: 0 auto;
    padding: 24px 20px 56px;
    box-sizing: border-box;
}

/*
 * 深色模式的底色必須自己給。本頁不載入 css/style.css（只靠 js/include.js 注入的
 * css/site-chrome.css 來讓頁首頁尾有樣式），而 site-chrome.css 只定義了
 * --border-color / --text-main / --text-secondary，沒有 --bg-color / --bg-card。
 * 少了下面兩行，深色模式時文字會切成近白色、底色卻永遠 fallback 回淺色，
 * 整頁對比只剩 1.06:1。
 * fallback 值刻意抄 css/style.css 深色區塊的 --bg-color / --bg-card，這樣不論
 * css/style.css 有沒有被載入，兩條路徑解出來的底色都一樣。
 */

/*
 * 底色要上在 body 而不是只上在 .lc-root：.lc-root 有 max-width，左右留白與頁首頁尾
 * 都在它之外。本頁不載入 css/style.css，而 site-chrome.css 只把頁首頁尾的「文字」
 * 換成淺色、不畫任何背景，所以少了這條規則時深色模式下那些區域仍是瀏覽器預設白底，
 * 近白色的 logo 等於隱形、導覽與頁尾也只剩極低對比。
 * 同樣的作法見 tools/people-crossed/index.html。
 */
:root[data-theme="dark"] body {
    background-color: #0f172a;
}

:root[data-theme="dark"] .lc-root {
    --lc-bg: var(--bg-color, #0f172a);
    --lc-surface: var(--bg-card, #1e293b);

    /*
     * --border-color 在深色模式雖然有值（#334155），但那是給頁首頁尾的分隔線用的，
     * 拿來當表單控制項與按鈕的邊框對比只有 1.72:1（對 --lc-bg）與 1.41:1（對
     * --lc-surface），低於 WCAG 1.4.11 對 UI 元件邊界要求的 3:1。改用較亮的一階，
     * 實測 3.75:1 / 3.07:1。
     */
    --lc-border: #64748b;
    --lc-accent: #e8836a;
    --lc-accent-soft: #33201b;
    --lc-note-bg: #33290f;
    --lc-note-border: #8a6d20;
}

.lc-root h1 {
    font-size: clamp(1.5rem, 4vw, 2rem);
    margin: 0 0 6px;
}

.lc-subtitle {
    color: var(--lc-muted);
    margin: 0 0 24px;
}

.lc-modes {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.lc-mode {
    flex: 1;
    padding: 10px 12px;
    font: inherit;
    color: var(--lc-muted);
    background: var(--lc-surface);
    border: 1px solid var(--lc-border);
    border-radius: 8px;
    cursor: pointer;
}

.lc-mode[aria-pressed="true"] {
    color: var(--lc-accent);
    background: var(--lc-accent-soft);
    border-color: var(--lc-accent);
    font-weight: 700;
}

.lc-panel {
    background: var(--lc-surface);
    border: 1px solid var(--lc-border);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.lc-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}

.lc-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lc-field label {
    font-size: 0.85rem;
    color: var(--lc-muted);
}

.lc-field input,
.lc-field select {
    font: inherit;
    padding: 8px 10px;
    color: var(--lc-text);
    background: var(--lc-bg);
    border: 1px solid var(--lc-border);
    border-radius: 6px;
}

.lc-btn {
    font: inherit;
    padding: 9px 16px;
    color: var(--lc-text);
    background: var(--lc-bg);
    border: 1px solid var(--lc-border);
    border-radius: 6px;
    cursor: pointer;
}

.lc-btn:hover {
    border-color: var(--lc-accent);
    color: var(--lc-accent);
}

.lc-headline {
    text-align: center;
    padding: 8px 0 20px;
    border-bottom: 1px solid var(--lc-border);
    margin-bottom: 20px;
}

.lc-headline-solar {
    color: var(--lc-muted);
    font-size: 0.95rem;
    margin: 0 0 6px;
}

.lc-headline-lunar {
    font-size: clamp(1.6rem, 6vw, 2.4rem);
    font-weight: 700;
    color: var(--lc-accent);
    margin: 0;
    letter-spacing: 0.04em;
}

.lc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
}

.lc-cell dt {
    font-size: 0.8rem;
    color: var(--lc-muted);
    margin-bottom: 2px;
}

.lc-cell dd {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
}

.lc-note {
    background: var(--lc-note-bg);
    border-left: 4px solid var(--lc-note-border);
    border-radius: 6px;
    padding: 12px 14px;
    margin-top: 20px;
    font-size: 0.92rem;
}

.lc-note p {
    margin: 0 0 6px;
}

.lc-note p:last-child {
    margin-bottom: 0;
}

.lc-error {
    color: var(--lc-accent);
    font-weight: 600;
}

.lc-terms {
    margin-top: 20px;
}

.lc-terms summary {
    cursor: pointer;
    font-weight: 600;
}

.lc-terms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.lc-term {
    border: 1px solid var(--lc-border);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 0.88rem;
}

.lc-term-current {
    border-color: var(--lc-accent);
    background: var(--lc-accent-soft);
}

.lc-term span {
    display: block;
    color: var(--lc-muted);
    font-size: 0.8rem;
}

.lc-method {
    font-size: 0.9rem;
    color: var(--lc-muted);
}

.lc-method h2 {
    font-size: 1.05rem;
    color: var(--lc-text);
    margin-bottom: 8px;
}

.lc-method li {
    margin-bottom: 6px;
}

/*
 * 連結要自己給顏色：沒給的話會沿用瀏覽器預設的藍，在深色底（#0f172a）上只有
 * 約 1.9:1，而這是全頁唯一通往驗證說明的連結。--lc-accent 在兩個主題都已驗過對比。
 */
.lc-method a {
    color: var(--lc-accent);
    text-decoration: underline;
}

@media (width <= 520px) {
    .lc-fields {
        flex-direction: column;
        align-items: stretch;
    }

    .lc-modes {
        flex-direction: column;
    }
}