/* Construction handbook: one stage and one trade at a time. */
#checklist { --check-ink:#302f2a; --check-muted:#655f54; --check-green:#334f42; --check-line:#d7d0c3; --check-paper:#fbf9f4; color:var(--check-ink) }
#checklist [hidden] { display:none!important }
#checklist :is(.construction-map,.work-picker,.room-points-compact,.construction-records,.checklist-mentor) { max-width:900px; margin:clamp(48px,6vw,84px) auto; min-width:0; scroll-margin-top:120px }
#checklist :is(.construction-map,.work-picker,.room-points-compact,.construction-records,.checklist-mentor) > h2 { font-family:'Noto Serif TC','Songti TC',serif; font-size:clamp(25px,3vw,36px); font-weight:500; line-height:1.35; letter-spacing:.01em; margin:12px 0 14px }
#checklist :is(.construction-map,.work-picker,.room-points-compact,.construction-records) > p { color:var(--check-muted); margin:0 0 24px; line-height:1.75 }
#checklist .checklist-kicker { display:block; color:#786951; font:600 12px/1.4 Arial,sans-serif; letter-spacing:.12em }
#checklist .checklist-hero { padding:clamp(32px,5vw,72px) clamp(22px,5vw,64px); border:1px solid var(--check-line); background:#e9e7de; min-width:0; text-align:left }
#checklist .checklist-hero h1 { font-size:clamp(22px,2.6vw,34px); font-weight:500; margin:12px 0 26px }
#checklist .checklist-hook { font-family:'Noto Serif TC','Songti TC',serif; font-size:clamp(26px,4vw,46px); line-height:1.58; letter-spacing:.015em; margin:0 0 28px; color:#2b312c; overflow-wrap:anywhere }
#checklist .checklist-hook strong { font-weight:600 }
#checklist .checklist-hero h2 { font-size:clamp(20px,2.4vw,27px); font-weight:500; margin:0 0 9px }
#checklist .checklist-hero p:not(.checklist-hook) { font-size:16px; line-height:1.75; max-width:38em; margin:0 }
#checklist .checklist-hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px }
#checklist .checklist-hero-actions :is(a,button) { display:inline-flex; align-items:center; justify-content:center; text-align:center; min-height:48px; padding:11px 18px; border:1px solid var(--check-green); background:var(--check-green); color:white; font:inherit; font-size:15px; line-height:1.45; border-radius:9px; text-decoration:none; cursor:pointer }
#checklist .checklist-hero-actions a + a { background:transparent; color:var(--check-green) }
#checklist .checklist-hero-actions button { background:#f8f6f0; color:var(--check-green) }
#checklist .checklist-hero-actions :is(a,button):hover { filter:brightness(.92) }
#checklist .checklist-copy-note { margin:12px 0 0!important; color:var(--check-muted); font-size:13px!important; line-height:1.65!important }
#checklist .checklist-copy-status { min-height:1.5em; margin:7px 0 0!important; color:#35543e; font-size:14px!important; line-height:1.6!important }
#checklist #checklist-copy-fallback { margin-top:12px }
#checklist #checklist-copy-fallback label { display:grid; gap:7px; color:var(--check-muted); font-size:13px }
#checklist #checklist-copy-text { box-sizing:border-box; width:100%; min-height:180px; padding:11px; border:1px solid #bfb8ab; border-radius:5px; background:#fff; color:var(--check-ink); font:14px/1.65 inherit; resize:vertical }
#checklist .reading-contents { max-width:900px; margin-inline:auto }

#checklist .construction-timeline { list-style:none; margin:25px 0 0; padding:0 0 0 20px; border-left:1px solid #a69b88; display:grid; gap:0 }
#checklist .construction-timeline li { position:relative; list-style:none; margin:0; padding:0; min-width:0 }
#checklist .construction-timeline li::before { content:''; position:absolute; width:9px; height:9px; left:-25px; top:23px; border:1px solid #94836b; background:var(--check-paper); border-radius:50% }
#checklist .construction-timeline li:has(.stage-choice[aria-pressed=true])::before { background:var(--check-green); border-color:var(--check-green) }
#checklist .stage-choice { width:100%; display:flex; align-items:center; gap:18px; min-height:72px; text-align:left; padding:13px 16px; border:0; border-bottom:1px solid var(--check-line); background:transparent; color:var(--check-ink); cursor:pointer; font:inherit; min-width:0 }
#checklist .stage-choice[aria-pressed=true] { background:#e7ebe4; border-left:3px solid var(--check-green); padding-left:13px }
#checklist .stage-choice > span:last-child { display:grid; gap:3px; min-width:0 }
#checklist .stage-choice strong { font-size:18px; font-weight:600; line-height:1.35 }
#checklist .stage-choice small { font-size:14px; color:var(--check-muted); line-height:1.55; overflow-wrap:anywhere }
#checklist .stage-number { flex:none; font:22px/1 Georgia,serif; color:#88775e }
#checklist .stage-detail { padding:22px clamp(18px,4vw,32px); margin:22px 0 0 20px; border:1px solid #cbd6c9; background:#f0f3ed; min-width:0 }
#checklist .stage-detail > span,#checklist .trade-heading > span { color:#496354; font-size:12px; letter-spacing:.08em }
#checklist .stage-detail h3 { font-size:22px; line-height:1.45; margin:8px 0 11px }
#checklist .stage-detail p { line-height:1.8; color:#4e514a; margin:0 0 14px; font-size:16px }
#checklist .stage-detail .stage-related { margin:15px 0 0; padding-top:13px; border-top:1px solid #d0dacd; font-size:14px }
#checklist .stage-related button { border:1px solid #8fa28f; background:white; border-radius:6px; min-height:40px; margin:4px 4px; padding:7px 12px; font:inherit; color:var(--check-green); cursor:pointer }
#checklist .stage-related a { color:var(--check-green); text-underline-offset:3px }

#checklist .trade-choice-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:22px 0 14px }
#checklist .trade-choice-grid button { min-width:0; min-height:48px; padding:9px 5px; border:1px solid #b9b1a2; border-radius:7px; background:var(--check-paper); color:#484338; font:inherit; font-size:15px; font-weight:600; line-height:1.35; cursor:pointer; white-space:normal }
#checklist .trade-choice-grid button[aria-pressed=true] { background:var(--check-green); border-color:var(--check-green); color:#fff }
#checklist .checklist-storage-note { font-size:13px!important; color:#6d685d!important; line-height:1.7!important; margin:12px 0 22px!important }
#checklist .trade-panel { margin:24px 0 0; min-width:0; border-top:2px solid #9c8e76; padding-top:24px }
#checklist .trade-heading { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:0 12px; margin-bottom:16px }
#checklist .trade-heading > span,#checklist .trade-heading h3,#checklist .trade-heading p { grid-column:1 }
#checklist .trade-heading h3 { font:500 clamp(27px,3vw,34px)/1.4 'Noto Serif TC','Songti TC',serif; margin:5px 0 }
#checklist .trade-heading p { color:var(--check-muted); margin:0; line-height:1.65; font-size:15px }
#checklist .trade-heading small { grid-column:2; grid-row:2 / 4; color:#6f6759; font-size:13px; white-space:nowrap }
#checklist .ebook-questions { border-top:1px solid var(--check-line) }
#checklist .issue-card { border-bottom:1px solid var(--check-line); margin:0; background:transparent }
#checklist .issue-card[open] { background:#f5f3ed }
#checklist .issue-card summary { display:flex; gap:10px; align-items:center; padding:18px 12px 18px 0; list-style:none; cursor:pointer; min-width:0 }
#checklist .issue-card summary::-webkit-details-marker { display:none }
#checklist .issue-card summary::after { content:'＋'; flex:none; order:2; color:#81735d; font-size:20px; line-height:1 }
#checklist .issue-card[open] summary::after { content:'−' }
#checklist .issue-title { flex:1; min-width:0; display:grid; gap:5px; overflow-wrap:anywhere }
#checklist .issue-title strong { font-size:17px; line-height:1.48; font-weight:600 }
#checklist .issue-title small { font-size:14px; line-height:1.55; color:var(--check-muted) }
#checklist .issue-status { flex:none; max-width:72px; text-align:center; padding:4px 6px; border:1px solid var(--check-line); border-radius:4px; color:#766f61; font-size:12px; line-height:1.2 }
#checklist .issue-status[data-state=done] { border-color:#8eac97; color:#28523a }
#checklist .issue-status[data-state=todo] { border-color:#bd9a67; color:#755121 }
#checklist .issue-detail { padding:0 clamp(14px,3vw,22px) 22px; min-width:0 }
#checklist .issue-detail h4 { font-size:14px; margin:0 0 10px; color:#4a624f }
#checklist .issue-detail ul { margin:0 0 19px; padding-left:21px; color:#48453f; line-height:1.8; font-size:15px }
#checklist .issue-detail li { margin:0 0 7px }
#checklist .issue-context { display:grid; gap:0; margin:14px 0 20px; border-top:1px solid var(--check-line) }
#checklist .issue-context div { display:grid; grid-template-columns:92px minmax(0,1fr); gap:10px; border-bottom:1px solid var(--check-line); padding:8px 0; font-size:14px; line-height:1.6 }
#checklist .issue-context dt { color:#706957 }
#checklist .issue-context dd { margin:0; overflow-wrap:anywhere }
#checklist .issue-state { border:0; padding:0; margin:0 0 15px; min-width:0 }
#checklist .issue-state legend { font-size:15px; font-weight:600; margin-bottom:9px }
#checklist .issue-state label { display:inline-flex; align-items:center; gap:6px; min-height:40px; margin:0 11px 5px 0; font-size:14px; cursor:pointer }
#checklist .issue-state input { accent-color:var(--check-green); width:18px; height:18px; margin:0 }
#checklist .issue-fields,#checklist .record-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px }
#checklist .issue-fields label,#checklist .record-fields label { display:grid; gap:6px; min-width:0; font-size:14px; color:#4e493f }
#checklist .issue-fields label:last-child { grid-column:1 / -1 }
#checklist :is(.issue-fields,.record-fields) :is(input,textarea,select) { width:100%; min-width:0; max-width:100%; box-sizing:border-box; min-height:43px; font:inherit; font-size:15px; color:var(--check-ink); padding:10px 12px; background:#fff; border:1px solid #bfb8ab; border-radius:5px }
#checklist .issue-fields textarea,#checklist .record-fields textarea { resize:vertical }
#checklist .trade-question { margin:22px 0 0; padding:22px; border-left:3px solid #68826e; background:#ebf0e9 }
#checklist .trade-question > span:first-child { font-size:13px; color:#46634e }
#checklist .trade-question p { font-size:18px; line-height:1.65; font-weight:600; margin:9px 0 16px; overflow-wrap:anywhere }
#checklist .trade-question button,#checklist .record-submit { border:1px solid var(--check-green); border-radius:7px; min-height:44px; padding:8px 15px; color:#fff; background:var(--check-green); font:inherit; font-size:14px; font-weight:600; line-height:1.45; cursor:pointer }
#checklist [data-copy-status] { margin-left:10px; font-size:13px; color:#35553e }

#checklist :is(.room-points-compact,.construction-records) > details { border-top:1px solid var(--check-line); border-bottom:1px solid var(--check-line); padding:0 0 14px; margin:20px 0 }
#checklist :is(.room-points-compact,.construction-records) > details > summary { min-height:52px; padding:14px 0; cursor:pointer; font-weight:600; font-size:16px; line-height:1.55 }
#checklist :is(.room-points-compact,.construction-records) > details > p { color:var(--check-muted); line-height:1.7; font-size:14px }
#checklist :is(.room-points-compact,.construction-records) .completion-table-wrap { min-width:0; max-width:100%; overflow-x:auto }
#checklist .construction-records form { border:1px solid var(--check-line); background:#f7f5ef; padding:clamp(17px,3vw,26px) }
#checklist .record-fields label:is(:nth-child(3),:nth-child(4)) { grid-column:1 / -1 }
#checklist .record-submit { margin:18px 0 0 }
#checklist #construction-record-status { display:inline-block; margin:9px 0 0 12px; font-size:14px; color:#35543e }
#checklist #construction-record-list { display:grid; gap:12px; margin:20px 0 }
#checklist .saved-record { border:1px solid var(--check-line); background:#fff; padding:17px 18px; min-width:0; overflow-wrap:anywhere }
#checklist .saved-record header { display:flex; flex-wrap:wrap; justify-content:space-between; gap:5px 15px; align-items:baseline; border-bottom:1px solid var(--check-line); padding-bottom:10px; margin-bottom:10px }
#checklist .saved-record header strong { font-size:17px }
#checklist .saved-record header small { color:var(--check-muted) }
#checklist .saved-record dl { margin:0; display:grid; gap:8px }
#checklist .saved-record dl div { display:grid; grid-template-columns:85px minmax(0,1fr); gap:8px; font-size:14px; line-height:1.65 }
#checklist .saved-record dt { color:#746b5d }
#checklist .saved-record dd { margin:0; white-space:pre-wrap }
#checklist .saved-record footer { display:flex; gap:10px; padding-top:14px }
#checklist .saved-record button { background:transparent; border:1px solid #aa9c86; border-radius:5px; color:#4c4337; font:inherit; font-size:13px; min-height:38px; padding:6px 10px; cursor:pointer }
#checklist .records-empty { color:var(--check-muted); font-size:14px }
#checklist .checklist-mentor { border-top:1px solid #a6a18f; border-bottom:1px solid #a6a18f; padding:35px 0 }
#checklist .checklist-mentor p { max-width:45em; font-size:17px; line-height:1.85; color:#4b4a42; margin:0 }
#checklist .checklist-consult { margin-block:54px 25px }
#checklist .checklist-back-stage { display:inline-flex; margin:15px 0 0; color:var(--check-green); text-decoration:underline; text-underline-offset:4px }
#checklist :is(button,a,summary,input,textarea,select):focus-visible { outline:2px solid #456d56; outline-offset:3px }
@media(max-width:700px) {
 #checklist :is(.construction-map,.work-picker,.room-points-compact,.construction-records,.checklist-mentor) { margin:47px 0; scroll-margin-top:95px }
 #checklist .checklist-hero { padding:28px 19px }
 #checklist .checklist-hero h1 { margin:10px 0 22px }
 #checklist .checklist-hook { font-size:clamp(24px,7.1vw,32px); line-height:1.55 }
 #checklist .checklist-hero-actions { display:grid; gap:9px }
 #checklist .checklist-hero-actions :is(a,button) { width:100%; box-sizing:border-box }
 #checklist .construction-timeline { margin-left:5px; padding-left:15px }
 #checklist .construction-timeline li::before { left:-20px }
 #checklist .stage-choice { gap:12px; min-height:66px; padding:11px }
 #checklist .stage-choice[aria-pressed=true] { padding-left:8px }
 #checklist .stage-choice strong { font-size:16px }
 #checklist .stage-choice small { font-size:13px }
 #checklist .stage-detail { margin-left:20px; padding:18px }
 #checklist .trade-choice-grid { gap:7px }
 #checklist .trade-choice-grid button { font-size:14px; min-height:48px }
 #checklist .trade-heading small { grid-row:1 / 3 }
 #checklist .trade-question { padding:18px }
 #checklist .record-fields,#checklist .issue-fields { grid-template-columns:minmax(0,1fr) }
 #checklist .record-fields label:is(:nth-child(3),:nth-child(4)),#checklist .issue-fields label:last-child { grid-column:auto }
 #checklist #construction-record-status { display:block; margin:10px 0 0 }
}
@media(max-width:380px) {
 #checklist .trade-choice-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
 #checklist .trade-choice-grid button { font-size:14px; padding:8px 3px }
 #checklist .issue-card summary { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px }
 #checklist .issue-card summary::after { grid-column:2; grid-row:1; align-self:center }
 #checklist .issue-status { grid-column:1 / -1; justify-self:start; max-width:none; font-size:12px }
 #checklist .issue-context div,#checklist .saved-record dl div { grid-template-columns:75px minmax(0,1fr) }
}
@media(prefers-reduced-motion:reduce) { #checklist *,#checklist *::before,#checklist *::after { scroll-behavior:auto!important; animation:none!important; transition:none!important } }