/* ============================================================
   苗床面積計算器 — 樣式表
   園藝規劃工具 / Bootstrap 5.3 客製主題
   ============================================================ */

:root {
    /* 色票 */
    --paper:            #F1F3EA;   /* 帶綠調的紙 */
    --paper-raised:     #FBFCF7;   /* 卡片 */
    --leaf-deep:        #2E4635;   /* 深葉綠 — 主色/標題 */
    --leaf:             #4F7A4A;   /* 葉綠 — 苗床 */
    --moss:             #8FAF7E;   /* 苔綠 */
    --sage-pale:        #DCE7D2;   /* 淡鼠尾草 */
    --terracotta:       #C1663F;   /* 陶盆土色 — 鋪設材料 */
    --terracotta-pale:  #F3E1D6;
    --sun:              #E8B03C;   /* 陽光黃 */
    --soil:             #3B2F2A;   /* 土棕 — 內文 */
    --soil-muted:       #7C7168;
    --line:            #D5DDC8;    /* 分隔線 */
    --grid-minor:      #E4EBD9;    /* 方格紙細線 */
    --grid-major:      #C9D6B8;    /* 方格紙粗線 */

    /* 字級 */
    --display: "Fraunces", "Noto Serif TC", Georgia, serif;
    --body: "Noto Sans TC", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- 基底 ---------- */
html, body { overflow-x: hidden; }

body {
    background-color: var(--paper);
    /* 極淡的葉脈網點，模擬育苗紙的紋理 */
    background-image: radial-gradient(var(--sage-pale) 1px, transparent 1px);
    background-size: 22px 22px;
    color: var(--soil);
    font-family: var(--body);
    font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--display);
    font-variation-settings: "SOFT" 60, "WONK" 1;
    color: var(--leaf-deep);
    letter-spacing: -0.01em;
}

::selection { background: var(--sage-pale); color: var(--leaf-deep); }

a { color: var(--leaf); }
a:hover { color: var(--leaf-deep); }

:focus-visible {
    outline: 2px solid var(--leaf);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---------- 頁首 ---------- */
.site-header { padding-block: 3rem 2rem; text-align: center; }

.eyebrow {
    font-family: var(--body);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--moss);
    margin-bottom: 0.75rem;
}

.site-title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 600;
    font-variation-settings: "opsz" 144, "SOFT" 80, "WONK" 1;
    margin-bottom: 0.5rem;
}

.site-tagline {
    font-size: 1.05rem;
    color: var(--soil-muted);
    max-width: 34rem;
    margin-inline: auto;
    margin-bottom: 0;
}

/* 手繪風的分隔苗圃線 */
.header-rule {
    width: 72px;
    height: 2px;
    margin: 1.5rem auto 0;
    background: linear-gradient(90deg, transparent, var(--moss), transparent);
    border: 0;
    opacity: 1;
}

/* ---------- 卡片 ---------- */
.panel {
    background-color: var(--paper-raised);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 1.5rem;
    margin-bottom: 1.25rem;
}

.panel-head {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

/* 種子包編號：這裡真的是操作順序（量苗床 → 選材料 → 得結果） */
.step-mark {
    font-family: var(--display);
    font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    color: var(--moss);
}

.panel-title {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0;
}

.panel-title .swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-left: 0.4rem;
    vertical-align: 1px;
}
.swatch-bed  { background: var(--leaf); }
.swatch-tile { background: var(--terracotta); }

/* ---------- 表單 ---------- */
.input-group-text {
    width: 82px;
    background-color: var(--sage-pale);
    border-color: var(--line);
    color: var(--leaf-deep);
    font-size: 0.875rem;
    font-weight: 500;
}

.form-control {
    border-color: var(--line);
    background-color: #fff;
    color: var(--soil);
    font-family: var(--display);
    font-variation-settings: "opsz" 14;
    font-size: 1.05rem;
}
.form-control:focus {
    border-color: var(--moss);
    box-shadow: 0 0 0 3px rgba(143, 175, 126, 0.28);
}
.form-control[readonly] {
    background-color: var(--terracotta-pale);
    color: var(--terracotta);
}

.form-check-input:checked {
    background-color: var(--leaf);
    border-color: var(--leaf);
}
.form-check-input:focus {
    border-color: var(--moss);
    box-shadow: 0 0 0 3px rgba(143, 175, 126, 0.28);
}
.form-check-label { font-size: 0.9rem; color: var(--soil-muted); }

/* ---------- 小結果列 ---------- */
.readout {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--line);
    font-size: 0.9rem;
    color: var(--soil-muted);
}
.readout output {
    font-family: var(--display);
    font-variation-settings: "opsz" 32, "SOFT" 60;
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--leaf-deep);
}
.readout.is-tile output { color: var(--terracotta); }

/* ---------- 最終結果 ---------- */
.harvest {
    background-color: var(--leaf-deep);
    border-radius: 14px;
    padding: 1.5rem;
    text-align: center;
    color: var(--sage-pale);
}
.harvest-label {
    font-size: 0.75rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--moss);
    margin-bottom: 0.35rem;
}
.harvest-value {
    font-family: var(--display);
    font-variation-settings: "opsz" 144, "SOFT" 80, "WONK" 1;
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--paper);
    margin-bottom: 0;
}
.harvest-unit { font-size: 1rem; color: var(--moss); margin-left: 0.25rem; }

/* ---------- 規劃圖工具列 ---------- */
.plot-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}
.legend {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.8rem;
    color: var(--soil-muted);
}
.legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.legend i {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    display: inline-block;
}
.legend .key-bed  { background: rgba(79, 122, 74, 0.16); border: 2px solid var(--leaf); }
.legend .key-tile { background: rgba(193, 102, 63, 0.18); border: 2px solid var(--terracotta); }

.zoom-group { display: flex; align-items: center; gap: 0.6rem; }
.scale-readout {
    font-family: var(--display);
    font-variation-settings: "opsz" 14;
    font-size: 0.85rem;
    color: var(--leaf-deep);
    white-space: nowrap;
}
.btn-garden {
    --bs-btn-color: var(--leaf-deep);
    --bs-btn-border-color: var(--line);
    --bs-btn-bg: var(--paper-raised);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--leaf);
    --bs-btn-hover-border-color: var(--leaf);
    --bs-btn-active-bg: var(--leaf-deep);
    --bs-btn-active-border-color: var(--leaf-deep);
    --bs-btn-active-color: #fff;
    border-radius: 8px;
}

/* ---------- 規劃圖畫布（方格紙）---------- */
.plot-canvas {
    height: 70vh;
    min-height: 380px;
    background-color: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: auto;
    position: relative;
}

/* 方格紙本身就是比例尺：細線 10 cm、粗線 50 cm */
.plot-surface {
    --px-per-cm: 2;
    width: max-content;
    height: max-content;
    min-width: 100%;
    min-height: 100%;
    padding: 28px;
    box-sizing: border-box;
    background-image:
        linear-gradient(var(--grid-minor) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px),
        linear-gradient(var(--grid-major) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-major) 1px, transparent 1px);
    background-size:
        100% calc(var(--px-per-cm) * 10px),
        calc(var(--px-per-cm) * 10px) 100%,
        100% calc(var(--px-per-cm) * 50px),
        calc(var(--px-per-cm) * 50px) 100%;
    background-position: 28px 28px;
}

/* 苗床 */
.bed {
    position: relative;
    background-color: rgba(79, 122, 74, 0.14);
    border: 2px solid var(--leaf);
    border-radius: 3px;
    flex-shrink: 0;
    transition: width 0.1s linear, height 0.1s linear;
}

/* 鋪設材料 */
.tile {
    position: relative;
    background-color: rgba(193, 102, 63, 0.2);
    border: 2px solid var(--terracotta);
    border-radius: 2px;
    flex-shrink: 0;
    z-index: 10;
    transition: width 0.1s linear, height 0.1s linear;
}

/* 尺寸標籤 */
.dim {
    position: absolute;
    display: none;
    z-index: 20;
    pointer-events: none;
    white-space: nowrap;
    padding: 1px 6px;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.92);
    font-family: var(--display);
    font-variation-settings: "opsz" 14;
    font-size: 0.72rem;
    font-weight: 600;
}
.bed  > .dim { color: var(--leaf-deep); border: 1px solid var(--moss); }
.tile > .dim { color: var(--terracotta); border: 1px solid var(--terracotta); }

.dim-v {
    top: 50%;
    left: -5px;
    transform: translateY(-50%) rotate(-90deg) translateY(100%);
    transform-origin: left center;
}
.dim-h { bottom: 5px; left: 50%; transform: translateX(-50%); }

/* 空狀態 */
.plot-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
    color: var(--soil-muted);
    font-size: 0.9rem;
    pointer-events: none;
}
.plot-empty i { font-size: 2rem; color: var(--moss); }
.plot-canvas.has-plot .plot-empty { display: none; }

/* ---------- 頁尾 ---------- */
.site-footer {
    margin-top: 3.5rem;
    border-top: 1px solid var(--line);
    padding-block: 2rem 2.5rem;
}
.footer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.social-links { display: flex; gap: 0.75rem; }
.social-links a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: var(--paper-raised);
    border: 1px solid var(--line);
    color: var(--leaf-deep);
    font-size: 1.05rem;
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease,
                border-color 0.18s ease, transform 0.18s ease;
}
.social-links a:hover {
    background-color: var(--leaf);
    border-color: var(--leaf);
    color: #fff;
    transform: translateY(-3px);
}
.footer-note {
    font-size: 0.8rem;
    color: var(--soil-muted);
    margin-bottom: 0;
}

/* ---------- 動效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
    .bed, .tile, .social-links a { transition: none; }
    .social-links a:hover { transform: none; }
}

/* ---------- 小螢幕 ---------- */
@media (max-width: 991.98px) {
    .plot-canvas { height: 55vh; }
}