/* ============================================================
   攝影機解析度計算機 — 頁面專屬樣式（neo.css）
   規範：樣式 scoped 在 .cam-res 下；顏色一律用 var(--lilin-*) token。
   驗證：node tools/lint/design-lint.js --page camera-resolution-calculator --strict
   ============================================================ */

.cam-res {
    overflow-x: clip;
    background: var(--lilin-white);
    color: var(--lilin-text-main);
    font-family: var(--lilin-font);
}

.cam-res .container {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* ── 頁首 ─────────────────────────────────────────────────── */
.cam-res__head {
    padding: 140px 0 1rem;
}

.cam-res__title {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: var(--lilin-fw-bold);
    color: var(--lilin-red);
    margin: 0 0 1rem;
    line-height: 1.25;
}

.cam-res__intro {
    font-size: var(--lilin-fs-md);
    color: var(--lilin-text-sub);
    max-width: 760px;
    margin: 0;
    line-height: 1.8;
}

/* ── 施工圖（俯視／側視）─────────────────────────────────── */
.cam-res__sheet {
    padding: 1.5rem 0 0;
}

.cam-res__sheet.is-empty {
    padding-top: 0.5rem;
}

.cam-res__sheet-bar {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 0 0.4rem;
    border-bottom: var(--lilin-border);
}

.cam-res__sheet-bar + .cam-res__sheet-bar,
.cam-res__draw + .cam-res__sheet-bar {
    margin-top: 1.5rem;
}

.cam-res__sheet-tab {
    font-size: var(--lilin-fs-sm);
    font-weight: var(--lilin-fw-semibold);
    color: var(--lilin-text-black);
    letter-spacing: 0.08em;
}

.cam-res__sheet-scale {
    font-family: var(--lilin-font-mono);
    font-size: var(--lilin-fs-xs);
    color: var(--lilin-text-muted);
}

.cam-res__draw {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 0.5rem;
    touch-action: none;
}

.cam-res__draw.is-dragging {
    cursor: grabbing;
}

.cam-res__sheet-hint,
.cam-res__sheet-empty {
    font-size: var(--lilin-fs-sm);
    color: var(--lilin-text-muted);
    line-height: 1.7;
    margin: 1rem 0 0;
}

/* 圖框高度固定（viewBox 比例固定＋width:100%），填完欄位後打字、拖曳、換機型
   都不會再改變高度。輸入列在圖的上方，所以這唯一一次展開不會動到使用者正在打的欄位。 */
.cam-res__sheet-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.45s ease;
}

.cam-res__sheet:not(.is-empty) .cam-res__sheet-body {
    max-height: 1000px;
}

@media (prefers-reduced-motion: reduce) {
    .cam-res__sheet-body {
        transition: none;
    }
}

.cam-res__sheet.is-empty .cam-res__sheet-hint {
    display: none;
}

.cam-res__sheet:not(.is-empty) .cam-res__sheet-empty {
    display: none;
}

/* 圖面元素：線寬與字級固定在 viewBox 座標，隨 SVG 一起縮放 */
.cd-axis,
.cd-ground {
    stroke: var(--lilin-gray-900);
    stroke-width: 1.2;
}

.cd-ground {
    stroke-width: 2;
}

.cd-wedge {
    fill: var(--lilin-gray-200);
    fill-opacity: 0.55;
    stroke: var(--lilin-gray-600);
    stroke-width: 1;
}

.cd-envelope {
    fill: none;
    stroke: var(--lilin-gray-400);
    stroke-width: 1;
    stroke-dasharray: 5 4;
}

.cd-band {
    stroke: var(--lilin-gray-600);
    stroke-width: 1;
    stroke-dasharray: 3 3;
}

/* 目標距離以外的視野只留邊線，不填色 */
.cd-beyond {
    stroke: var(--lilin-gray-400);
    stroke-width: 1;
}

.cd-sight {
    stroke: var(--lilin-gray-600);
    stroke-width: 1;
    stroke-dasharray: 6 4;
}

.cd-arc {
    fill: none;
    stroke: var(--lilin-gray-600);
    stroke-width: 1;
}

.cd-blind {
    fill: var(--lilin-red);
    fill-opacity: 0.16;
}

.cd-dim line {
    stroke: var(--lilin-gray-900);
    stroke-width: 1;
}

.cd-dim polygon {
    fill: var(--lilin-gray-900);
}

.cd-cam rect {
    fill: var(--lilin-gray-900);
}

.cd-cam polygon {
    fill: var(--lilin-gray-600);
}

.cd-target {
    cursor: grab;
}

.cd-target-hit,
.cd-handle-hit {
    fill: transparent;
}

.cd-target-dot {
    fill: var(--lilin-red);
}

.cd-target-ring {
    fill: none;
    stroke: var(--lilin-red);
    stroke-width: 1.2;
}

.cd-target:focus {
    outline: none;
}

.cd-target:focus .cd-target-ring {
    stroke-width: 2.5;
}

.cd-handle {
    cursor: ns-resize;
}

.cd-handle-grip {
    fill: var(--lilin-white);
    stroke: var(--lilin-red);
    stroke-width: 1.4;
}

.cd-t {
    font-family: var(--lilin-font-mono);
    font-size: 13px;   /* lint-ok: W7 SVG viewBox 單位非 CSS px，960 單位的圖渲染在約 1100px 寬時實際約 15px */
    fill: var(--lilin-text-muted);
}

.cd-t--key {
    fill: var(--lilin-text-black);
    font-size: 14px;
}

.cd-t--band {
    font-size: 11px;   /* lint-ok: W7 SVG viewBox 單位，次要標註；768px 以下直接隱藏 */
}

.cd-t--note {
    font-size: 11px;   /* lint-ok: W7 SVG viewBox 單位，次要標註；768px 以下直接隱藏 */
}

.cd-t--warn {
    font-size: 11px;   /* lint-ok: W7 SVG viewBox 單位，768px 以下另外放大 */
    fill: var(--lilin-red);
}

/* ── 輸入列 ───────────────────────────────────────────────── */
.cam-res__controls {
    padding: 1.5rem 0 0;
}

/* ── 計算區 ───────────────────────────────────────────────── */
.cam-res__body {
    padding: 2rem 0 3rem;
}

.cam-res__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

/* 圖是主角，表單降成一條精確輸入列（窄螢幕在下方 RWD 段還原成堆疊卡片） */
.cam-res__form {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) repeat(4, minmax(0, 1fr)) auto;
    gap: 1rem 1.25rem;
    align-items: end;
}

.cam-res__row {
    display: contents;
}

.cam-res__form .cam-res__field {
    margin-bottom: 0;
}

.cam-res__form .cam-res__actions {
    margin-top: 0;
}

.cam-res__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cam-res__sim-canvas {
    max-width: 700px;
}

.cam-res__form {
    padding: 2rem;
    background: var(--lilin-white);
    border: var(--lilin-border);
    border-radius: var(--lilin-radius);
}

.cam-res__field {
    margin-bottom: 1.25rem;
}

.cam-res__label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: var(--lilin-fs-sm);
    font-weight: var(--lilin-fw-semibold);
    color: var(--lilin-text-main);
    margin-bottom: 0.5rem;
}

.cam-res__step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--lilin-red);
    color: var(--lilin-white);
    font-size: var(--lilin-fs-xs);
    font-weight: var(--lilin-fw-bold);
}

.cam-res__control {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.7rem 0.9rem;
    font-family: inherit;
    font-size: var(--lilin-fs-md);
    color: var(--lilin-text-main);
    background: var(--lilin-white);
    border: var(--lilin-border);
    border-radius: var(--lilin-radius-sm);
    transition: border-color 0.15s ease;
}

.cam-res__control:focus {
    outline: none;
    border-color: var(--lilin-red);
}

.cam-res__actions {
    margin-top: 1.75rem;
}

/* 表單在桌機是一列到底的輸入列，說明文字必須自己占滿一整列：
   塞進某一欄會把那一欄撐高，該欄的輸入框就跟其他欄對不齊。 */
.cam-res__form-hint,
.cam-res__form-aim {
    grid-column: 1 / -1;
    font-size: var(--lilin-fs-sm);
    color: var(--lilin-text-sub);
    line-height: 1.7;
    margin: 0;
}

.cam-res__form-hint-key {
    font-weight: var(--lilin-fw-semibold);
    color: var(--lilin-text-main);
}

.cam-res__form-aim {
    padding: 0.6rem 0.9rem;
    background: var(--lilin-gray-100);
    border-radius: var(--lilin-radius-sm);
    color: var(--lilin-text-main);
}

.cam-res__reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.65rem 1.75rem;
    font-family: inherit;
    font-size: var(--lilin-fs-sm);
    font-weight: var(--lilin-fw-semibold);
    color: var(--lilin-white);
    background: var(--lilin-red);
    border: 0;
    border-radius: var(--lilin-radius-sm);
    cursor: pointer;
}

.cam-res__reset:hover {
    background: var(--lilin-red-dark);
}

/* ── 結果 ─────────────────────────────────────────────────── */
.cam-res__result {
    padding: 2rem;
    background: var(--lilin-gray-50);
    border: var(--lilin-border);
    border-radius: var(--lilin-radius);
}

.cam-res__result-title {
    font-size: var(--lilin-fs-xl);
    font-weight: var(--lilin-fw-bold);
    color: var(--lilin-text-black);
    margin: 0 0 1.25rem;
}

.cam-res__stats {
    display: grid;
    gap: 1rem;
}

.cam-res__stat {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem 1.25rem;
    background: var(--lilin-white);
    border: var(--lilin-border);
    border-radius: var(--lilin-radius-sm);
}

.cam-res__stat-label {
    font-size: var(--lilin-fs-sm);
    color: var(--lilin-text-muted);
}

.cam-res__stat-value {
    font-size: var(--lilin-fs-xxl);
    font-weight: var(--lilin-fw-bold);
    color: var(--lilin-text-black);
    line-height: 1.2;
}

.cam-res__stat-value small {
    font-size: var(--lilin-fs-sm);
    font-weight: var(--lilin-fw-medium);
    color: var(--lilin-text-muted);
    margin-left: 0.35rem;
}

.cam-res__stats-note {
    font-size: var(--lilin-fs-xs);
    color: var(--lilin-text-muted);
    line-height: 1.7;
    margin: 0.75rem 0 0;
}

/* ── 涵蓋範圍判定 ─────────────────────────────────────────── */
.cam-res__verdict {
    margin-top: 1.25rem;
    padding: 1rem 1.25rem;
    background: var(--lilin-white);
    border: var(--lilin-border);
    border-left: 3px solid var(--lilin-gray-300);
    border-radius: var(--lilin-radius-sm);
}

.cam-res__verdict.is-warn {
    background: var(--lilin-badge-highlight-bg);
    border-left-color: var(--lilin-red);
}

.cam-res__verdict-head {
    font-size: var(--lilin-fs-sm);
    font-weight: var(--lilin-fw-semibold);
    color: var(--lilin-text-black);
    margin: 0 0 0.35rem;
}

.cam-res__verdict.is-warn .cam-res__verdict-head {
    color: var(--lilin-red);
}

.cam-res__verdict-body {
    font-size: var(--lilin-fs-sm);
    color: var(--lilin-text-sub);
    line-height: 1.7;
    margin: 0;
}

/* ── 辨識能力等級量尺 ─────────────────────────────────────── */
.cam-res__level {
    margin-top: 1.25rem;
}

.cam-res__level-title {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: var(--lilin-fs-md);
    font-weight: var(--lilin-fw-bold);
    color: var(--lilin-text-black);
    margin: 0 0 0.6rem;
}

.cam-res__level-tag {
    font-family: var(--lilin-font-mono);
    font-size: var(--lilin-fs-xs);
    font-weight: var(--lilin-fw-medium);
    color: var(--lilin-text-muted);
    letter-spacing: 0.08em;
}

.cam-res__level-scale {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.25rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 等級用填滿程度表示，不用顏色：未達＝留白、已達＝灰、實際落點＝實心深色。
   紅色在本頁另有「警告」的意思（判定區），量尺一律不用紅，避免同色兩義。 */
.cam-res__level-step {
    display: flex;
    background: var(--lilin-white);
    border: var(--lilin-border);
    border-radius: var(--lilin-radius-sm);
}

/* 點一格就把該等級所需的場景寬度填回表單，故整格都是點擊區：
   內距改掛在按鈕上，格子本身只負責外框與填色。 */
.cam-res__level-btn {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.5rem 0.4rem;
    text-align: center;
    font-family: inherit;
    background: none;
    border: 0;
    border-radius: inherit;
    cursor: pointer;
}

.cam-res__level-btn:hover {
    box-shadow: inset 0 0 0 1px var(--lilin-gray-400);
}

.cam-res__level-btn:focus-visible {
    outline: 2px solid var(--lilin-red);
    outline-offset: 1px;
}

.cam-res__level-step.is-reached {
    border-color: var(--lilin-gray-300);
    background: var(--lilin-gray-200);
}

.cam-res__level-step.is-active {
    border-color: var(--lilin-gray-900);
    background: var(--lilin-gray-900);
}

.cam-res__level-name {
    font-size: var(--lilin-fs-sm);
    font-weight: var(--lilin-fw-semibold);
    color: var(--lilin-text-sub);
}

.cam-res__level-step.is-reached .cam-res__level-name {
    color: var(--lilin-text-main);
}

.cam-res__level-step.is-active .cam-res__level-name {
    color: var(--lilin-text-light);
}

.cam-res__level-ppm {
    font-family: var(--lilin-font-mono);
    font-size: var(--lilin-fs-xs);
    color: var(--lilin-text-muted);
}

.cam-res__level-step.is-active .cam-res__level-ppm {
    color: var(--lilin-text-light-muted);
}

/* 「目前」標記：不靠顏色也讀得出落點在哪一格 */
.cam-res__level-here {
    display: none;
    font-size: var(--lilin-fs-xs);
    font-weight: var(--lilin-fw-semibold);
    color: var(--lilin-text-light);
    letter-spacing: 0.06em;
}

.cam-res__level-step.is-active .cam-res__level-here {
    display: block;
}

.cam-res__level-note {
    font-size: var(--lilin-fs-sm);
    color: var(--lilin-text-sub);
    line-height: 1.7;
    margin: 0.6rem 0 0;
}

.cam-res__level-hint {
    font-size: var(--lilin-fs-xs);
    color: var(--lilin-text-muted);
    line-height: 1.6;
    margin: 0.4rem 0 0;
}

/* ── 即時模擬畫面 ─────────────────────────────────────────── */
.cam-res__sim {
    margin-top: 1.25rem;
}

.cam-res__sim-label {
    font-size: var(--lilin-fs-sm);
    font-weight: var(--lilin-fw-semibold);
    color: var(--lilin-red);
    margin: 0 0 0.6rem;
}

.cam-res__sim-canvas {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--lilin-radius-sm);
}

.cam-res__note {
    font-size: var(--lilin-fs-sm);
    color: var(--lilin-text-muted);
    line-height: 1.7;
    margin: 1.5rem 0 0;
}

/* ── 推薦機型 ─────────────────────────────────────────────── */
.cam-res__picks {
    padding: 1rem 0 0;
}

.cam-res__picks-lead,
.cam-res__picks-none {
    font-size: var(--lilin-fs-md);
    color: var(--lilin-text-sub);
    line-height: 1.8;
    margin: 0 0 1.5rem;
}

.cam-res__pick-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: var(--lilin-border);
}

.cam-res__pick {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: baseline;
    gap: 0.5rem 1.25rem;
    padding: 0.85rem 0.25rem;
    border-bottom: var(--lilin-border);
}

.cam-res__pick.is-current {
    background: var(--lilin-badge-highlight-bg);
}

.cam-res__pick-model {
    font-family: var(--lilin-font-mono);
    font-size: var(--lilin-fs-md);
    font-weight: var(--lilin-fw-medium);
    color: var(--lilin-text-black);
    text-decoration: none;
}

a.cam-res__pick-model:hover {
    color: var(--lilin-red);
    text-decoration: underline;
}

.cam-res__pick-ppm {
    font-family: var(--lilin-font-mono);
    font-size: var(--lilin-fs-sm);
    color: var(--lilin-text-muted);
}

.cam-res__pick-level {
    font-size: var(--lilin-fs-sm);
    font-weight: var(--lilin-fw-semibold);
    color: var(--lilin-text-sub);
    min-width: 5em;
    text-align: right;
}

.cam-res__pick-current {
    grid-column: 1 / -1;
    font-size: var(--lilin-fs-xs);
    color: var(--lilin-red);
}

.cam-res__picks-foot {
    margin: 1.25rem 0 0;
}

.cam-res__picks-compare {
    font-size: var(--lilin-fs-sm);
    font-weight: var(--lilin-fw-semibold);
    color: var(--lilin-red);
}

/* ── 參考畫面圖庫 ─────────────────────────────────────────── */
.cam-res__gallery {
    padding: 1rem 0 4rem;
}

.cam-res__h2 {
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    font-weight: var(--lilin-fw-bold);
    color: var(--lilin-text-black);
    margin: 0 0 0.75rem;
}

.cam-res__gallery-lead {
    font-size: var(--lilin-fs-md);
    color: var(--lilin-text-sub);
    margin: 0 0 2rem;
    line-height: 1.8;
}

.cam-res__thumbs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.cam-res__thumb {
    border: var(--lilin-border);
    border-radius: var(--lilin-radius-sm);
    overflow: hidden;
    transition: border-color 0.15s ease;
}

.cam-res__thumb.is-active {
    border-color: var(--lilin-red);
}

.cam-res__thumb-image {
    display: block;
    width: 100%;
    height: auto;
}

.cam-res__thumb-label {
    font-size: var(--lilin-fs-sm);
    font-weight: var(--lilin-fw-medium);
    color: var(--lilin-text-muted);
    margin: 0;
    padding: 0.75rem 1rem;
}

.cam-res__thumb.is-active .cam-res__thumb-label {
    color: var(--lilin-red);
}

.cam-res__thumb-thresh {
    font-family: var(--lilin-font-mono);
    font-size: var(--lilin-fs-xs);
    color: var(--lilin-text-muted);
    margin: 0;
    padding: 0 1rem;
}

.cam-res__thumb-note {
    font-size: var(--lilin-fs-sm);
    color: var(--lilin-text-sub);
    line-height: 1.6;
    margin: 0;
    padding: 0.5rem 1rem 0.75rem;
}

.cam-res__thumb-action {
    margin: 0;
    padding: 0 1rem 1rem;
}

.cam-res__thumb-aim {
    font-family: inherit;
    font-size: var(--lilin-fs-sm);
    font-weight: var(--lilin-fw-semibold);
    color: var(--lilin-text-main);
    background: none;
    padding: 0.45rem 0.8rem;
    border: var(--lilin-border);
    border-radius: var(--lilin-radius-sm);
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.cam-res__thumb-aim:hover {
    border-color: var(--lilin-gray-900);
}

.cam-res__thumb-aim:focus-visible {
    outline: 2px solid var(--lilin-red);
    outline-offset: 1px;
}

/* ── RWD（新 CSS 只用 480 / 768 / 1024）────────────────────── */
@media (max-width: 1024px) {
    /* 輸入列還原成堆疊卡片，欄位重新由 .cam-res__row 兩兩並排 */
    .cam-res__form {
        display: block;
    }

    .cam-res__row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem;
    }

    .cam-res__form .cam-res__field {
        margin-bottom: 1.25rem;
    }

    .cam-res__form .cam-res__actions {
        margin-top: 1.75rem;
    }

    /* 堆疊版沒有 grid 的列間距可借，自己補上與按鈕的距離 */
    .cam-res__form-hint {
        margin-top: 1.5rem;
    }

    .cam-res__form-aim {
        margin-top: 1rem;
    }

    .cam-res__stats {
        grid-template-columns: minmax(0, 1fr);
    }

    .cam-res__thumbs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .cam-res__head {
        padding-top: 120px;
    }

    .cam-res__form,
    .cam-res__result {
        padding: 1.5rem;
    }

    /* 圖面文字是 viewBox 單位，整張縮到手機寬度時會小到不可讀（約 5px）。
       標註字放大，同時收掉次要標註避免互相疊字。 */
    .cd-t {
        font-size: 26px;   /* lint-ok: W7 SVG viewBox 單位非 CSS px，此處放大是為了縮圖後仍可讀 */
    }

    .cd-t--key {
        font-size: 30px;   /* lint-ok: W7 SVG viewBox 單位，同上 */
    }

    .cd-t--band,
    .cd-t--note {
        display: none;
    }

    .cd-t--warn {
        font-size: 24px;   /* lint-ok: W7 SVG viewBox 單位，同上 */
    }
}

@media (max-width: 480px) {
    .cam-res__row {
        grid-template-columns: minmax(0, 1fr);
    }

    .cam-res__thumbs {
        grid-template-columns: minmax(0, 1fr);
    }
}