/* HK Landscape Sheets: the screen is one A1 presentation sheet (841 x 594) on a drafting table.
   Drawing-office palette: warm white paper, graphite linework, one accent (AW Design terracotta).
   Red is reserved for check mark-up (red pen). Watercolour lives only inside the drawings. */
:root {
  --paper: #fbfaf6; --paper2: #f3f0e8; --ink: #2e2e30; --graph: #5b5955; --light: #a29e94; --hair: #d8d4c9;
  --accent: #c4763c; --red: #cf2e22; --slate: #4f6d8f; --table: #c3c9bb;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --sans: "IBM Plex Sans", "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background-color: var(--table);
  background-image: linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px);
  background-size: 22px 22px;
  font-family: var(--sans); color: var(--ink); font-size: 12px; min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
button, input, select { font-family: inherit; color: inherit; }
a { color: var(--slate); }
.mono { font-family: var(--mono); }

/* ---------- desk & sheet ---------- */
.desk { padding: 30px 20px 8px; display: flex; flex-direction: column; align-items: center; }
.sheet {
  position: relative; background: var(--paper);
  --w: max(1040px, min(calc(100vw - 40px), calc((100vh - 60px) * 1.4158)));
  width: var(--w); height: calc(var(--w) / 1.4158);
  padding: 16px; box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 12px 30px rgba(38,42,34,.30);
}
.zref { position: absolute; display: flex; font: 500 8px var(--mono); color: var(--light); pointer-events: none; }
.zref span { flex: 1; display: flex; align-items: center; justify-content: center; }
.zref span + span { box-shadow: inset 1px 0 0 var(--light); }
.zt, .zb { left: 16px; right: 16px; height: 16px; } .zt { top: 0; } .zb { bottom: 0; }
.zl, .zr { top: 16px; bottom: 16px; width: 16px; flex-direction: column; } .zl { left: 0; } .zr { right: 0; }
.zl span + span, .zr span + span { box-shadow: inset 0 1px 0 var(--light); }
.frame {
  position: relative; height: 100%; border: 2px solid var(--ink); outline: .6px solid var(--ink); outline-offset: 3px;
  display: grid; grid-template-columns: minmax(0, 1fr) 238px; grid-template-rows: minmax(0, 1fr); min-height: 0;
}
.mhead { display: none; }
.field { position: relative; min-width: 0; min-height: 0; }
.plate { display: none; position: absolute; inset: 0; padding: 12px 14px 0; gap: 10px 16px; min-height: 0; }
.sheet[data-sheet=site] #plate-site, .sheet[data-sheet=board] #plate-board, .sheet[data-sheet=tree] #plate-tree, .sheet[data-sheet=why] #plate-why { display: grid; }
.plate.flip { animation: flip .28s ease-out; }
@keyframes flip { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

#plate-site { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1.2fr) minmax(0, 1fr) auto; grid-template-areas: "a b" "a c" "p p"; }
#plate-site .d-main { grid-area: a; } #plate-site .d-sun { grid-area: b; } #plate-site .d-tab { grid-area: c; }
#plate-board { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1.9fr) minmax(0, 1fr) auto; grid-template-areas: "a b" "d c" "p p"; }
#plate-board .d-plan { grid-area: a; } #plate-board .d-sect { grid-area: b; } #plate-board .d-view { grid-area: c; } #plate-board .d-sched { grid-area: d; }
#plate-tree { grid-template-columns: minmax(0, 1.3fr) minmax(0, .95fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) auto; grid-template-areas: "a b s" "a c s" "p p p"; }
#plate-tree .d-elev { grid-area: a; } #plate-tree .d-skel { grid-area: b; } #plate-tree .d-var { grid-area: c; } #plate-tree .spec { grid-area: s; }
#plate-why { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); grid-template-rows: minmax(0, 1.8fr) minmax(0, 1fr) auto; grid-template-areas: "a a" "b c" "p p"; }
#plate-why .d-photo { grid-area: a; } #plate-why .d-diag { grid-area: b; } #plate-why .d-detail { grid-area: c; }
.plate > .phasing { grid-area: p; }

/* ---------- drawings ---------- */
.dwg { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.cvwrap { position: relative; flex: 1; min-height: 0; }
.cvwrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.dtitle { display: flex; align-items: center; gap: 8px; border-top: 1.6px solid var(--ink); padding-top: 4px; margin-top: 3px; min-height: 30px; position: relative; }
.dtitle::before { content: ''; position: absolute; left: 30px; right: 0; top: 2px; border-top: .5px solid var(--ink); }
.dno { flex: none; width: 23px; height: 23px; border: 1.3px solid var(--ink); border-radius: 50%; display: grid; place-items: center; font: 600 11px var(--mono); }
.dt { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.dt .zh { font-weight: 600; font-size: 12.5px; white-space: nowrap; }
.dt .en { font: 500 8.5px var(--mono); letter-spacing: .09em; color: var(--graph); }
.dt select { font-weight: 600; font-size: 12.5px; border: 0; border-bottom: 1px dotted var(--ink); background: transparent; padding: 0; cursor: pointer; }
.dsc { margin-left: auto; font: 500 10px var(--mono); white-space: nowrap; }
.mini-bar { width: 150px; height: 22px; flex: none; }
.mini-n { width: 34px; height: 34px; flex: none; margin: -4px 0 -4px; }
.cap { font-size: 10px; color: var(--graph); margin: 3px 0 0; line-height: 1.4; }
.cap b { color: var(--ink); font-family: var(--mono); font-weight: 500; }
.okey i { display: inline-block; width: 14px; height: 2.5px; vertical-align: middle; margin: 0 3px 0 6px; }
.tip { position: absolute; left: 36px; bottom: 50px; margin: 0; font: 500 9.5px var(--mono); color: var(--accent); background: rgba(251,250,246,.9); padding: 1px 4px; pointer-events: none; }
.tip:empty { display: none; }

/* ---------- floating drafting toolbar (straddles the sheet's top edge) ---------- */
.toolbar {
  position: absolute; top: -33px; left: 50%; transform: translateX(-50%); z-index: 8;
  display: flex; align-items: center; gap: 1px; background: var(--ink); color: #e9e6de;
  border-radius: 5px; padding: 3px; box-shadow: 0 5px 16px rgba(20,22,18,.32); white-space: nowrap;
}
.toolbar .seg { display: flex; gap: 1px; }
.toolbar button, .toolbar .tchk, .toolbar .tfade { background: none; border: 0; color: inherit; display: flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 3px; font: 500 11px var(--sans); cursor: pointer; }
.toolbar button:hover, .toolbar .tchk:hover { background: rgba(255,255,255,.1); }
.toolbar button.on { background: var(--accent); color: #fff; }
.toolbar svg { width: 18px; height: 18px; flex: none; }
.toolbar .sep { width: 1px; height: 20px; background: rgba(255,255,255,.22); margin: 0 4px; }
.toolbar .tchk input { accent-color: var(--accent); margin: 0; }
.toolbar .tfade { font: 500 10px var(--mono); cursor: default; }
.toolbar .tfade input { width: 90px; }
.toolbar button:focus-visible, .reg:focus-visible, .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------- phasing strip ---------- */
.phasing { display: flex; align-items: center; gap: 12px; border-top: .7px solid var(--ink); padding: 6px 2px 8px; min-height: 48px; }
.plab { font: 600 9px var(--mono); letter-spacing: .08em; line-height: 1.2; flex: none; }
.plab i { display: block; font: 500 10px var(--sans); color: var(--graph); letter-spacing: 0; }
.pout { font: 500 10.5px var(--mono); min-width: 70px; flex: none; }
.track { position: relative; flex: 1 1 180px; min-width: 120px; }
.t-time { flex: .6 1 120px; }
.ticks { display: flex; justify-content: space-between; font: 500 8.5px var(--mono); color: var(--graph); margin-top: 1px; }
.stops { position: relative; height: 16px; }
.stops button { position: absolute; transform: translateX(-50%); border: 0; background: none; font: 600 9px var(--mono); cursor: pointer; padding: 0 2px; color: var(--graph); white-space: nowrap; }
.stops button:first-child { transform: none; } .stops button:last-child { transform: translateX(-100%); }
.stops button small { font: 500 8.5px var(--sans); margin-left: 2px; }
.stops button.on { color: var(--accent); }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; background: transparent; height: 18px; margin: 0; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { height: 1.5px; background: var(--ink); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 14px; margin-top: -12px; background: var(--accent); clip-path: polygon(50% 100%, 0 0, 100% 0); }
input[type=range]::-moz-range-track { height: 1.5px; background: var(--ink); }
input[type=range]::-moz-range-thumb { width: 13px; height: 14px; border: 0; border-radius: 0; background: var(--accent); clip-path: polygon(50% 100%, 0 0, 100% 0); }
.toolbar input[type=range]::-webkit-slider-runnable-track { background: #bdb8ad; }
.keyd { display: flex; flex: none; }
.keyd button { border: .8px solid var(--ink); background: none; font: 500 10px var(--sans); padding: 2px 6px; cursor: pointer; margin-left: -.8px; }
.keyd button:hover { background: var(--paper2); }
.months { display: grid; grid-template-columns: repeat(12, 1fr); flex: 1 1 250px; border: .8px solid var(--ink); min-width: 200px; }
.months button { border: 0; border-left: .5px solid var(--hair); background: none; font: 600 10px var(--mono); padding: 3px 0 2px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.months button:first-child { border-left: 0; }
.months button:hover { background: var(--paper2); }
.months button.on { background: var(--ink); color: var(--paper); }
.months .dots { display: flex; gap: 1px; height: 4px; }
.months .dots i { width: 4px; height: 4px; border-radius: 50%; }
.pheno button i { display: block; width: 80%; height: 5px; }
.pkey { font-size: 9.5px; color: var(--graph); margin: 0; flex: none; max-width: 190px; line-height: 1.6; }
.pkey i { display: inline-block; width: 10px; height: 5px; margin: 0 2px 0 4px; vertical-align: middle; }
.ph-L { background: #6f9a5a; } .ph-N { background: #b8d27a; } .ph-LF { background: #d9677a; } .ph-F { background: #c2385a; } .ph-A { background: #c2552f; } .ph-B { background: #cbbfa9; }
.credit { font-size: 10px; color: var(--graph); margin: 0; line-height: 1.45; }

/* ---------- tables on the sheet ---------- */
.tblwrap { flex: 1; min-height: 0; overflow: auto; }
.sched { width: 100%; border-collapse: collapse; font-size: 10.5px; }
.sched caption { text-align: left; font: 600 9px var(--mono); letter-spacing: .06em; padding-bottom: 3px; }
.sched th { font: 600 8.5px var(--mono); letter-spacing: .04em; text-align: left; border-top: 1.2px solid var(--ink); border-bottom: 1.2px solid var(--ink); padding: 3px 4px; position: sticky; top: 0; background: var(--paper); white-space: nowrap; }
.sched td { border-bottom: .5px solid var(--hair); padding: 2.5px 4px; vertical-align: top; }
.sched td.code { font: 600 10px var(--mono); white-space: nowrap; }
.sched td.n { font-family: var(--mono); text-align: right; white-space: nowrap; }
.sched td.c { text-align: center; font-family: var(--mono); }
.sched i.sci { color: var(--graph); display: block; font-size: 9.5px; }
.sched tr:hover td { background: var(--paper2); }
.sched .zsw { display: inline-block; width: 9px; height: 9px; border: .5px solid var(--graph); vertical-align: -1px; margin-right: 3px; }
.sched tfoot td { font: 500 9px var(--mono); color: var(--graph); border-bottom: 0; }
.d-tab .tblwrap { display: grid; grid-template-columns: 1.25fr 1fr; gap: 14px; align-content: start; }
.layerkey h5, .register h5 { margin: 0 0 4px; font: 600 8.5px var(--mono); letter-spacing: .08em; }
.layerkey h5 i, .register h5 i { font: 500 9.5px var(--sans); font-style: normal; color: var(--graph); letter-spacing: 0; }
.lk { display: flex; flex-direction: column; }
.lk button { display: flex; align-items: center; gap: 6px; border: 0; border-bottom: .5px solid var(--hair); background: none; font-size: 11px; padding: 3px 0; cursor: pointer; text-align: left; }
.lk button::before { content: ''; width: 8px; height: 8px; border: 1px solid var(--ink); border-radius: 50%; flex: none; }
.lk button.on::before { background: var(--ink); }
.lk button.on { font-weight: 600; }
.sw { display: inline-block; width: 16px; height: 8px; border: .5px solid var(--graph); }
.sw-shadow { background: rgba(46,46,48,.3); }
.sw-heat { background: linear-gradient(90deg, rgb(58,76,110), rgb(168,196,140), rgb(242,150,70)); }
.sw-zone { background: linear-gradient(90deg, rgba(70,95,130,.55) 33%, rgba(150,180,120,.55) 33% 66%, rgba(240,196,80,.6) 66%); }

/* ---------- title strip: notes, register, title block ---------- */
.strip { border-left: 1.6px solid var(--ink); display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.notes { flex: 1; min-height: 0; overflow: auto; padding: 8px 10px; scrollbar-width: thin; }
.npane { display: none; }
.sheet[data-sheet=site] .npane[data-for=site], .sheet[data-sheet=board] .npane[data-for=board], .sheet[data-sheet=tree] .npane[data-for=tree], .sheet[data-sheet=why] .npane[data-for=why] { display: block; }
.notes h4 { font: 600 9.5px var(--mono); letter-spacing: .08em; margin: 0 0 6px; border-bottom: .9px solid var(--ink); padding-bottom: 3px; }
.notes h4 i { font: 500 10px var(--sans); font-style: normal; color: var(--graph); letter-spacing: 0; }
.nhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; border-bottom: .9px solid var(--ink); margin-bottom: 6px; padding-bottom: 3px; }
.nhead h4 { border: 0; margin: 0; padding: 0; }
.gnotes { list-style: none; padding: 0; margin: 0; counter-reset: n; }
.gnotes > li { counter-increment: n; position: relative; padding-left: 17px; font-size: 10.5px; line-height: 1.45; margin-bottom: 6px; }
.gnotes > li::before { content: counter(n) "."; position: absolute; left: 0; font: 600 9.5px var(--mono); }
.gnotes .k { font: 600 8px var(--mono); letter-spacing: .06em; border: .6px solid currentColor; padding: 0 2px; margin-right: 4px; color: var(--graph); }
.gnotes li.warn .k { color: var(--accent); } .gnotes li.ok .k { color: #4d7a52; }
.wn > li { cursor: pointer; border-radius: 2px; padding-top: 2px; padding-bottom: 2px; }
.wn > li::before { top: 2px; }
.wn > li:hover { background: var(--paper2); }
.wn > li.on { background: var(--ink); color: var(--paper); }
.wn > li.on .tag { color: #e9e6de; }
.intro { font-size: 10.5px; line-height: 1.45; margin: 0 0 8px; color: #3b3b3d; }
.tagkey { font-size: 9.5px; color: var(--graph); line-height: 1.8; }
.tnote { font-size: 10.5px; line-height: 1.5; }
.tnote p { margin: 0 0 6px; }
details.src { font-size: 10px; color: var(--graph); line-height: 1.45; margin-top: 8px; }
details.src summary { cursor: pointer; font: 600 9px var(--mono); color: var(--ink); }
.tag { font: 500 8.5px var(--mono); border: .6px solid currentColor; padding: 0 3px; border-radius: 2px; white-space: nowrap; margin-right: 2px; }
.tag.design { color: var(--graph); } .tag.hk { color: var(--slate); } .tag.site { color: var(--accent); }
.tag.lit { color: var(--slate); } .tag.cal { color: #4d7a52; } .tag.hyp { color: var(--accent); }

.csum { font: 500 9.5px var(--mono); margin: 0 0 6px; line-height: 1.5; }
.csum b.f { color: var(--red); } .csum b.w { color: var(--accent); } .csum b.p { color: #4d7a52; }
.cn { position: relative; padding: 6px 0 7px 22px; border-top: .5px dashed var(--hair); }
.cn .nno { position: absolute; left: 0; top: 6px; width: 17px; height: 17px; border: 1.2px solid var(--red); color: var(--red); border-radius: 50%; font: 600 9px var(--mono); display: grid; place-items: center; background: var(--paper); }
.cn.fail .nno { background: var(--red); color: #fff; }
.cn .tt { font-weight: 600; font-size: 10.5px; line-height: 1.35; }
.cn .meta { font: 400 8.5px var(--mono); color: var(--graph); margin: 2px 0; }
.cn .msg { font-size: 10px; color: #3a3a3c; line-height: 1.45; }
.cn .pills { font: 400 9px var(--mono); color: var(--graph); margin-top: 2px; }
.cn .fix { margin-top: 4px; font-size: 10px; color: var(--red); line-height: 1.4; }
.cn .fix .verb { font: 600 8.5px var(--mono); border: .8px solid var(--red); padding: 0 3px; margin-right: 4px; }
.cn .apply { margin-top: 4px; border: 1px solid var(--red); color: var(--red); background: var(--paper); font: 600 10px var(--sans); padding: 2px 8px; cursor: pointer; border-radius: 2px; }
.cn .apply:hover { background: var(--red); color: #fff; }
.cn.hot { background: #fbeeea; }
details.passed { font-size: 10px; margin-top: 6px; border-top: .5px dashed var(--hair); padding-top: 5px; }
details.passed summary { cursor: pointer; font: 600 9px var(--mono); color: #4d7a52; }
details.passed li { margin: 3px 0; color: var(--graph); }
.srclist { padding-left: 16px; font-size: 10px; line-height: 1.4; }
.srclist li { margin-bottom: 5px; }

.register { border-top: 1.6px solid var(--ink); padding: 5px 8px 6px; flex: none; }
.reg { display: flex; width: 100%; gap: 8px; align-items: baseline; background: none; border: 0; border-bottom: .5px solid var(--hair); padding: 3px 4px; cursor: pointer; text-align: left; font: inherit; }
.reg b { font: 600 10.5px var(--mono); flex: none; }
.reg span { font-size: 11px; font-weight: 500; }
.reg small { color: var(--graph); font: 400 8.5px var(--mono); margin-left: 5px; }
.reg:hover:not(.on) { background: var(--paper2); }
.reg.on { background: var(--ink); color: var(--paper); }
.reg.on small { color: #cfcac0; }

.tblock { border-top: 2px solid var(--ink); display: flex; flex-direction: column; flex: none; }
.tb-brand { display: flex; align-items: center; gap: 9px; padding: 8px 10px 7px 13px; border-bottom: .9px solid var(--ink); position: relative; }
.tb-brand::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent); }
.tb-brand img { height: 25px; width: auto; }
.tb-brand span { font-size: 10.5px; font-weight: 600; line-height: 1.2; border-left: .8px solid var(--hair); padding-left: 8px; }
.tb-brand small { display: block; font: 500 8px var(--mono); color: var(--graph); letter-spacing: .06em; }
.tb-cell { padding: 3px 8px 4px; border-bottom: .9px solid var(--ink); display: flex; flex-direction: column; min-width: 0; text-align: left; }
.tb-cell em { font: normal 500 7.5px var(--mono); letter-spacing: .09em; color: var(--graph); }
.tb-cell b { font-size: 11.5px; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-cell span { font: 400 8.5px var(--mono); color: var(--graph); line-height: 1.3; }
.tb-row { display: grid; grid-template-columns: 1fr 1fr; }
.tb-row .tb-cell + .tb-cell { border-left: .9px solid var(--ink); }
.tb-last { grid-template-columns: 52px 1fr; }
.tb-last .tb-cell { border-bottom: 0; }
.tb-n { align-items: center; justify-content: center; }
#tb-north { width: 40px; height: 44px; } /* fixed CSS size: fitFixed() reads clientWidth, which otherwise follows the bitmap and grows on hi-DPI screens */
#tb-no { font-size: 17px; letter-spacing: .02em; }
.tb-proj { background: none; border: 0; border-bottom: .9px solid var(--ink); cursor: pointer; position: relative; font: inherit; }
.tb-proj svg { position: absolute; right: 6px; top: 5px; width: 13px; height: 13px; color: var(--graph); }
.tb-proj:hover { background: var(--paper2); }
.tb-proj b { padding-right: 14px; }

/* ---------- specimen card (nursery specification sheet) ---------- */
.spec { background: #fffdf8; border: 1px solid var(--ink); box-shadow: 3px 3px 0 rgba(46,46,48,.10); overflow: auto; min-height: 0; font-size: 11px; display: flex; flex-direction: column; scrollbar-width: thin; }
.spec-h { background: var(--ink); color: var(--paper); padding: 6px 10px; display: flex; gap: 8px; align-items: baseline; flex: none; }
.spec-h span { font: 500 8px var(--mono); letter-spacing: .08em; }
.spec-h b { font-size: 12px; }
.spec-no { margin-left: auto; }
.spec-sp { display: flex; flex-direction: column; gap: 2px; padding: 7px 10px 3px; font: 500 8.5px var(--mono); color: var(--graph); }
.spec-sp select { font: 600 12px var(--sans); border: 0; border-bottom: 1px solid var(--ink); background: transparent; padding: 2px 0; color: var(--ink); }
.spec-model { margin: 3px 10px 6px; font-size: 10px; color: var(--graph); }
.spec-t { width: 100%; border-collapse: collapse; }
.spec-t th { text-align: left; font-weight: 500; font-size: 10.5px; padding: 3px 4px 3px 10px; }
.spec-t td { padding: 2px 4px; }
.spec-t tr { border-bottom: .5px dotted var(--hair); }
.spec-t tr.grp th { font: 600 8.5px var(--mono); letter-spacing: .06em; background: var(--paper2); padding-top: 4px; border-top: .8px solid var(--ink); }
.spec-t tr.grp small { font: 400 8.5px var(--sans); letter-spacing: 0; color: var(--graph); }
.spec-t td.u { font: 400 10px var(--mono); color: var(--graph); width: 50px; white-space: nowrap; }
.stp { display: inline-flex; border: .8px solid var(--ink); background: var(--paper); }
.stp button { border: 0; background: none; width: 20px; cursor: pointer; font: 600 12px var(--mono); line-height: 1; padding: 2px 0; }
.stp button:hover { background: var(--paper2); }
.stp input { width: 48px; border: 0; border-left: .6px solid var(--hair); border-right: .6px solid var(--hair); text-align: center; font: 500 11px var(--mono); background: transparent; -moz-appearance: textfield; appearance: textfield; padding: 2px 0; }
.stp input::-webkit-outer-spin-button, .stp input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; padding: 4px 6px; }
.swatches label { cursor: pointer; }
.swatches input { position: absolute; opacity: 0; pointer-events: none; }
.swatches span { display: flex; flex-direction: column; align-items: center; gap: 1px; border: .7px solid var(--hair); padding: 3px 1px; font-size: 9.5px; text-align: center; line-height: 1.2; }
.swatches span canvas { width: 34px; height: 30px; }
.swatches span small { font: 400 7.5px var(--mono); color: var(--graph); }
.swatches input:checked + span { border: 1.4px solid var(--ink); background: var(--paper2); font-weight: 600; }

.variants { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 4px; }
.variants .v { position: relative; border: .6px solid var(--hair); cursor: pointer; min-height: 0; }
.variants .v:hover { border-color: var(--ink); }
.variants .v canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.variants .v small { position: absolute; left: 4px; top: 2px; font: 600 9px var(--mono); }
.variants .v em { position: absolute; left: 4px; bottom: 2px; font: normal 400 8px var(--mono); color: var(--graph); }

/* LP-04 */
.detail { flex: 1; min-height: 0; overflow: auto; font-size: 11px; line-height: 1.5; padding-right: 4px; }
.detail h5 { font-size: 12px; margin: 0 0 3px; display: flex; gap: 6px; align-items: baseline; }
.detail h5 b { font: 600 11px var(--mono); border: 1.2px solid var(--ink); padding: 0 4px; }
.detail p { margin: 4px 0; }
.detail dl { display: grid; grid-template-columns: 62px 1fr; gap: 3px 8px; margin: 6px 0 0; }
.detail dt { font: 600 8.5px var(--mono); letter-spacing: .05em; color: var(--graph); padding-top: 2px; }
.detail dd { margin: 0; }
.dnav { display: flex; gap: 6px; padding: 4px 0; }

/* ---------- controls ---------- */
.seg { display: inline-flex; }
.seg.mini button { border: .8px solid var(--ink); background: none; font: 500 10px var(--sans); padding: 2px 7px; cursor: pointer; margin-left: -.8px; }
.seg.mini button.on { background: var(--ink); color: var(--paper); }
.btn { border: 1px solid var(--ink); background: var(--paper); padding: 4px 9px; font: 500 11px var(--sans); cursor: pointer; border-radius: 2px; text-align: center; }
.btn:hover { background: var(--paper2); }
.btn.dark { background: var(--ink); color: var(--paper); }
.btn.wide { width: 100%; }
.btns { display: flex; gap: 6px; flex-wrap: wrap; margin: 7px 0; }
.filebtn { display: inline-flex; flex-direction: row; font: 500 11px var(--sans); color: var(--ink); }
input[type=text], input[type=number], input[type=search], select { font: 500 11.5px var(--sans); border: 0; border-bottom: 1px solid var(--ink); background: transparent; padding: 3px 2px; border-radius: 0; }
input:focus, select:focus { outline: none; border-bottom-color: var(--accent); box-shadow: 0 1px 0 var(--accent); }
.pop-b label, .drawer label { display: flex; flex-direction: column; gap: 2px; font: 500 9px var(--mono); color: var(--graph); margin: 4px 0; }
label.chk { flex-direction: row !important; align-items: center; gap: 6px !important; font: 400 11px var(--sans) !important; color: var(--ink) !important; }
label.chk input { accent-color: var(--ink); }
.frow { display: flex; gap: 12px; align-items: flex-end; }
.frow label { flex: 1; }
.hint { font-size: 10px; color: var(--graph); line-height: 1.4; margin: 3px 0; }
table.sides { width: 100%; border-collapse: collapse; font-size: 10.5px; margin-top: 6px; }
table.sides th { font: 600 8.5px var(--mono); text-align: left; border-bottom: 1px solid var(--ink); padding: 2px; }
table.sides td { padding: 2px; border-bottom: .5px solid var(--hair); }
table.sides input { width: 58px; }
table.sides tr.hot td { background: #f6e9dd; }
table.verts input { width: 64px; } table.bldgs td:first-child input { width: 108px; } table.sides td.n { font: 500 10px var(--mono); text-align: right; }
.pop-b h6.ph { font: 600 8.5px var(--mono); letter-spacing: .07em; margin: 9px 0 2px; border-bottom: .9px solid var(--ink); padding-bottom: 2px; }
.pop-b h6.ph i { font-style: normal; color: var(--graph); font-weight: 400; }
button.xs { border: .8px solid var(--ink); background: var(--paper); width: 20px; height: 20px; padding: 0; font: 600 12px var(--mono); line-height: 1; cursor: pointer; }
button.xs:hover { background: var(--ink); color: var(--paper); } button.xs:disabled { opacity: .3; cursor: default; }
.frow .btn { align-self: flex-end; white-space: nowrap; }
.rot { display: flex; gap: 4px; } .rot .btn { padding: 4px 7px; }

/* ---------- pop-overs ---------- */
.pop { position: fixed; z-index: 50; width: 286px; background: var(--paper); border: 1.2px solid var(--ink); box-shadow: 0 10px 28px rgba(20,22,18,.25); font-size: 11.5px; }
.pop[hidden] { display: none; }
.pop-h { display: flex; justify-content: space-between; align-items: center; background: var(--ink); color: var(--paper); padding: 4px 6px 4px 9px; font: 600 9.5px var(--mono); letter-spacing: .07em; }
.pop-h i { font: 500 10px var(--sans); font-style: normal; color: #cfcac0; letter-spacing: 0; }
.x { border: 0; background: none; color: inherit; font-size: 17px; cursor: pointer; line-height: 1; padding: 0 4px; }
.pop-b { padding: 8px 10px 10px; max-height: 72vh; overflow: auto; }
.sel-h { font-size: 13px; font-weight: 600; }
.sel-h .code { font: 600 10.5px var(--mono); border: 1px solid var(--ink); padding: 0 4px; margin-right: 6px; }
.sel-sci { font-style: italic; color: var(--graph); font-size: 10.5px; }
.sel-t { width: 100%; border-collapse: collapse; margin: 6px 0; font-size: 10.5px; }
.sel-t th { text-align: left; font: 500 8.5px var(--mono); color: var(--graph); padding: 2px 6px 2px 0; white-space: nowrap; vertical-align: top; }
.sel-t td { padding: 2px 0; border-bottom: .5px dotted var(--hair); }
.warnl { font-size: 10px; margin: 2px 0; }
.warnl.bad { color: var(--red); } .warnl.warn { color: var(--accent); }

/* ---------- plant palette drawer ---------- */
.drawer { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: min(1120px, 96vw); height: 46vh; background: var(--paper); border: 1.2px solid var(--ink); border-bottom: 0; box-shadow: 0 -10px 34px rgba(20,22,18,.28); z-index: 40; display: flex; flex-direction: column; }
.drawer[hidden] { display: none; }
.dr-h { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 12px; border-bottom: 1.2px solid var(--ink); flex-wrap: wrap; }
.dr-h h4 { margin: 0; font: 600 10px var(--mono); letter-spacing: .08em; }
.dr-h h4 i { font: 500 11px var(--sans); font-style: normal; color: var(--graph); letter-spacing: 0; }
.dr-h input[type=search] { width: 200px; }
.dr-h .hint { flex: 1; min-width: 160px; margin: 0; }
.dr-b { flex: 1; overflow: auto; }
table.pal { width: 100%; border-collapse: collapse; font-size: 10.5px; }
table.pal th { position: sticky; top: 0; background: var(--paper); font: 600 8.5px var(--mono); letter-spacing: .04em; text-align: left; border-bottom: 1.2px solid var(--ink); padding: 4px 6px; z-index: 1; white-space: nowrap; }
table.pal td { border-bottom: .5px solid var(--hair); padding: 2px 6px; vertical-align: middle; }
table.pal tr.pc { cursor: grab; }
table.pal tr.pc:hover td { background: var(--paper2); }
table.pal tr.pc.armed td { background: #f6e9dd; }
table.pal td canvas { width: 56px; height: 38px; display: block; }
table.pal .nm { font-weight: 600; }
table.pal .sci { font-style: italic; color: var(--graph); font-size: 9.5px; }
table.pal td.n { font-family: var(--mono); white-space: nowrap; }
table.pal .est { color: var(--accent); font: 500 8.5px var(--mono); }
table.pal .nt { font: 600 8.5px var(--mono); color: #4d7a52; }
table.pal .wn { font: 600 9px var(--mono); }
table.pal .wn.bad { color: var(--red); } table.pal .wn.warn { color: var(--accent); }
table.pal .add { width: 24px; height: 24px; border: 1px solid var(--ink); background: var(--paper); cursor: pointer; font: 600 13px var(--mono); line-height: 1; }
table.pal .add:hover { background: var(--ink); color: var(--paper); }
.figs { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; padding: 10px; }
.figs button { border: .7px solid var(--hair); background: var(--paper); cursor: pointer; display: flex; flex-direction: column; align-items: center; padding: 4px; font-size: 10px; gap: 2px; }
.figs button:hover { border-color: var(--ink); }
.figs img { height: 74px; width: auto; }

.saved .it { border-bottom: .5px solid var(--hair); padding: 4px 0; cursor: pointer; }
.saved .it.on b { color: var(--accent); }
.saved .it small { display: block; font: 400 9px var(--mono); color: var(--graph); }
.saved select { width: 100%; font-size: 10px; }

.toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(20px); background: var(--ink); color: var(--paper); font: 500 11px var(--sans); padding: 7px 14px; border-radius: 3px; opacity: 0; transition: .2s; z-index: 60; pointer-events: none; max-width: 90vw; }
.toast.on { opacity: 1; transform: translateX(-50%); }
.deskfoot { font-size: 10px; color: #475045; margin: 10px 0 0; text-align: center; }
.dswitch { display: none; }

/* ---------- phones: one drawing at a time, title block collapsed to a strip ---------- */
@media (max-width: 760px) {
  body { font-size: 12.5px; background-size: 16px 16px; }
  .desk { padding: 0 0 78px; }
  .sheet { width: 100%; height: auto; min-width: 0; padding: 5px; box-shadow: none; }
  .zref { display: none; }
  .frame { display: block; height: auto; border-width: 1.3px; outline: none; }
  .mhead { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-bottom: 1.6px solid var(--ink); position: sticky; top: 0; background: var(--paper); z-index: 20; }
  .mlogo { height: 18px; width: auto; }
  .mcur { flex: 1; display: flex; align-items: baseline; gap: 6px; text-align: left; border: .8px solid var(--ink); background: none; font: 600 13px var(--sans); padding: 6px 8px; cursor: pointer; }
  .mcur b { font-family: var(--mono); }
  .mcur .caret { margin-left: auto; }
  .field { position: static; }
  .plate { position: static; padding: 8px 8px 0; }
  .sheet[data-sheet=site] #plate-site, .sheet[data-sheet=board] #plate-board, .sheet[data-sheet=tree] #plate-tree, .sheet[data-sheet=why] #plate-why { display: block; }
  .dswitch { display: flex; gap: 0; overflow-x: auto; margin-bottom: 8px; border: .8px solid var(--ink); }
  .dswitch button { flex: 1 0 auto; border: 0; border-left: .6px solid var(--hair); background: none; font: 500 11.5px var(--sans); padding: 8px 10px; cursor: pointer; white-space: nowrap; }
  .dswitch button:first-child { border-left: 0; }
  .dswitch button.on { background: var(--ink); color: var(--paper); }
  .plate > .dwg, .plate > .spec { display: none; }
  .plate > .dwg.mon, .plate > .spec.mon { display: flex; }
  .cvwrap { flex: none; }
  .cvwrap canvas { position: static; width: 100%; }
  .tblwrap { max-height: none; }
  .d-tab .tblwrap { grid-template-columns: 1fr; }
  .variants { flex: none; grid-template-rows: repeat(2, 170px); }
  .detail { flex: none; }
  .spec { max-height: none; overflow: visible; }
  .mini-bar { width: 110px; }
  .dt .zh { font-size: 13px; }
  .toolbar { position: fixed; top: auto; bottom: 10px; left: 50%; transform: translateX(-50%); max-width: calc(100vw - 16px); overflow-x: auto; z-index: 30; }
  .toolbar button, .toolbar .tchk { padding: 9px 10px; }
  .toolbar button span, .toolbar .tchk span { display: none; }
  .toolbar .tfade input { width: 70px; }
  .phasing { flex-wrap: wrap; gap: 8px 10px; margin-top: 8px; }
  .track, .t-time, .months { flex: 1 1 100%; }
  .months button { padding: 7px 0 5px; font-size: 11px; }
  .keyd button { padding: 6px 9px; font-size: 11px; }
  .pkey { max-width: 100%; flex: 1 1 auto; min-width: 0; white-space: normal; }
  .strip { border-left: 0; border-top: 1.6px solid var(--ink); margin-top: 10px; }
  .notes { overflow: visible; }
  .register { display: none; position: fixed; top: 46px; left: 8px; right: 8px; z-index: 35; background: var(--paper); border: 1.3px solid var(--ink); box-shadow: 0 10px 28px rgba(0,0,0,.25); }
  .register.open { display: block; }
  .reg { padding: 10px 6px; }
  .tblock { border-top: 1.6px solid var(--ink); }
  .tb-brand img { height: 20px; }
  .pop { left: 8px !important; right: 8px; width: auto; top: auto !important; bottom: 70px; max-height: 64vh; }
  .pop-b { max-height: 54vh; }
  .drawer { width: 100vw; height: 72vh; }
  .dr-h .hint { display: none; }
  .dr-h input[type=search] { flex: 1 1 100%; width: auto; order: 5; }
  table.pal th:nth-child(3), table.pal td:nth-child(3), table.pal th:nth-child(5), table.pal td:nth-child(5), table.pal th:nth-child(6), table.pal td:nth-child(6), table.pal th:nth-child(7), table.pal td:nth-child(7) { display: none; }
  .tip { bottom: 44px; left: 10px; }
  #s-tip { position: static; margin: 4px 0 0; }
  table.verts input { width: 70px; font-size: 14px; } table.sides input { font-size: 14px; } button.xs { width: 30px; height: 30px; }
  .deskfoot { padding: 0 12px; }
}

/* ---------- language switch EN / 中 (title block + phone header) ---------- */
.langsw { display: inline-flex; margin-left: auto; border: .8px solid var(--ink); flex: none; align-self: center; }
.langsw button { font: 600 9px var(--mono); letter-spacing: .06em; padding: 3px 6px; min-width: 24px; border: 0; background: none; cursor: pointer; color: var(--ink); line-height: 1.2; }
.langsw button + button { border-left: .8px solid var(--ink); font-family: var(--sans); }
.langsw button.on { background: var(--ink); color: var(--paper); }
.langsw button:focus-visible { outline: 1.5px solid var(--accent); outline-offset: 1px; }
.mhead .langsw button { font-size: 11px; padding: 6px 8px; min-width: 32px; }

/* ---------- English mode: hide Chinese that duplicates the English beside it ---------- */
html[data-lang="en"] .dt > span.zh:not(:has(select)):not(#t-title),
html[data-lang="en"] :is(.plab, h4, h5, .pop-h > b) > i:not([class]),
html[data-lang="en"] .spec-h > b { display: none; }
html[data-lang="en"] .i18n-lead > small { font: inherit; color: inherit; letter-spacing: inherit; margin-left: 0; display: inline; }
html[data-lang="en"] .tb-brand > span.i18n-lead > small { font-size: 10.5px; font-weight: 600; }
html[data-lang="en"] .tag { margin: 0 3px 0 2px; }
html[data-lang="en"] #s-qtable td .hint { display: block; }
html[data-lang="en"] .cn .fix .verb { display: none; }