/* Workjigs. Printed-manual look: plain type, thin rules, dense tables. No gradients, no shadows. */
:root { --ink: #1b1d1f; --muted: #5f646b; --rule: #d5d8dc; --soft: #f4f5f6; --accent: #0b5cad; --flag: #8a4b00; --bg: #fff; }
@media (prefers-color-scheme: dark) { :root { --ink: #e7e9ec; --muted: #a2a8b0; --rule: #3a3f45; --soft: #1e2226; --accent: #6aa8ea; --flag: #e0a35a; --bg: #14171a; } }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 system-ui, -apple-system, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; }
a { color: var(--accent); }
header.site, footer.site, main { max-width: 1040px; margin: 0 auto; padding: 0 20px; }
header.site { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; border-bottom: 2px solid var(--ink); padding-top: 14px; padding-bottom: 10px; }
header.site .brand { font-weight: 700; font-size: 18px; color: var(--ink); text-decoration: none; letter-spacing: .02em; }
header.site nav { display: flex; gap: 16px; font-size: 14px; flex: 1; }
header.site nav a { color: var(--ink); text-decoration: none; }
header.site nav a:hover { text-decoration: underline; }
header.site details.lang { font-size: 14px; position: relative; }
header.site details.lang summary { cursor: pointer; list-style: none; color: var(--ink); }
header.site details.lang summary::-webkit-details-marker { display: none; }
header.site details.lang summary::after { content: ' \25BE'; font-size: 11px; }
header.site details.lang ul { position: absolute; inset-inline-end: 0; top: 1.8em; z-index: 5; margin: 0; padding: 6px 0; list-style: none; background: var(--bg); border: 1px solid var(--ink); columns: 2; column-gap: 0; width: 22em; }
header.site details.lang li a { display: block; padding: 3px 12px; color: var(--ink); text-decoration: none; }
header.site details.lang li a:hover { background: var(--soft); }
header.site details.lang li a[aria-current] { font-weight: 600; }
main { padding-top: 24px; padding-bottom: 48px; }
h1 { font-size: 28px; line-height: 1.25; margin: 8px 0 8px; }
.dek { font-size: 18px; color: var(--muted); max-width: 760px; margin: 0 0 20px; }
.crumb { font-size: 13px; color: var(--muted); }
.crumb a { color: var(--muted); }
h2 { font-size: 20px; margin: 36px 0 10px; padding-top: 10px; border-top: 1px solid var(--rule); }
article { max-width: 760px; }
article p, article li { margin: 0 0 12px; }
article table { border-collapse: collapse; width: 100%; font-size: 14px; margin: 8px 0 16px; }
article th, article td { border: 1px solid var(--rule); padding: 6px 8px; text-align: start; vertical-align: top; }
article th { background: var(--soft); }
.formula { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; background: var(--soft); padding: 8px 12px; display: inline-block; }
.note { border-inline-start: 3px solid var(--flag); padding: 6px 12px; background: var(--soft); }
.muted { color: var(--muted); } .small { font-size: 13px; }
/* tool */
#app { border: 1px solid var(--ink); margin: 8px 0 32px; }
.step { padding: 14px 16px 16px; border-top: 1px solid var(--rule); }
.step:first-child { border-top: 0; }
.step h2 { border: 0; margin: 0 0 10px; padding: 0; font-size: 16px; display: flex; gap: 10px; align-items: center; }
.step h2 span { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--ink); font-size: 13px; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; font-size: 14px; }
.drop { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 14px; border: 1px dashed var(--rule); }
.drop.over { border-color: var(--accent); background: var(--soft); }
.btn { font: inherit; font-size: 14px; padding: 6px 12px; border: 1px solid var(--ink); background: var(--bg); color: var(--ink); cursor: pointer; display: inline-block; }
.btn.primary { background: var(--ink); color: var(--bg); }
.btn.small { font-size: 13px; padding: 4px 10px; }
.btn:disabled { opacity: .4; cursor: default; }
select, input { font: inherit; font-size: 14px; padding: 4px 6px; border: 1px solid var(--rule); background: var(--bg); color: var(--ink); }
.status { font-size: 14px; min-height: 1.6em; margin-top: 6px; }
.summary { display: grid; grid-template-columns: max-content 1fr max-content 1fr max-content 1fr; gap: 2px 12px; font-size: 13px; margin: 6px 0 0; }
.summary dt { color: var(--muted); } .summary dd { margin: 0; font-variant-numeric: tabular-nums; }
.tablewrap { overflow-x: auto; }
table.data { border-collapse: collapse; width: 100%; font-size: 13px; font-variant-numeric: tabular-nums; }
table.data th, table.data td { border-bottom: 1px solid var(--rule); padding: 5px 8px; text-align: start; white-space: nowrap; }
table.data thead th { border-bottom: 1px solid var(--ink); font-weight: 600; }
table.data tfoot td { border-top: 1px solid var(--ink); border-bottom: 0; }
table.data .n { text-align: end; }
table.data input.p { text-align: end; width: 8em; }
.formula, table.data .n, .summary dd { unicode-bidi: plaintext; }
[dir="rtl"] table.data .n, [dir="rtl"] table.data input.p { text-align: left; }
td.flag { color: var(--flag); }
/* home */
ul.tools { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--ink); }
ul.tools li { border-bottom: 1px solid var(--rule); padding: 12px 0; }
ul.tools a { font-weight: 600; font-size: 17px; }
ul.tools .field { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
ul.tools p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
footer.site { border-top: 1px solid var(--rule); padding-top: 14px; padding-bottom: 30px; font-size: 13px; color: var(--muted); }
footer.site nav { display: flex; gap: 14px; margin-bottom: 6px; }
footer.site nav a { color: var(--muted); }
@media (max-width: 640px) { header.site details.lang ul { width: 18em; }
  table.data thead { display: none; }
  table.data, table.data tbody { display: block; width: 100%; }
  table.data tfoot { display: table; width: 100%; }
  table.data tbody tr { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; padding: 8px 0; border-bottom: 1px solid var(--rule); }
  table.data tbody td, table.data tbody td.n { border: 0; padding: 2px 0; white-space: normal; text-align: start; }
  table.data tbody td.lead { grid-column: 1 / -1; font-weight: 600; }
  table.data tbody td.no { display: none; }
  table.data tbody td[data-l]::before { content: attr(data-l); display: block; font-size: 11px; color: var(--muted); }
  table.data input.p { width: 100%; text-align: start; }
  table.data tfoot td { text-align: start; } h1 { font-size: 23px; } .dek { font-size: 16px; } .summary { grid-template-columns: max-content 1fr; } }
/* PDF takeoff workspace: full width, three columns, drawing in the middle */
#app.app-wide { width: calc(100vw - 32px); margin-inline-start: calc(50% - 50vw + 16px); border: 1px solid var(--ink); }
.tk { display: flex; flex-direction: column; height: max(600px, calc(100vh - 120px)); font-size: 13px; }
.tk-bar, .tk-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 8px; border-bottom: 1px solid var(--rule); }
.tk-gap { flex: 1; }
.tk-name { font-weight: 600; min-width: 12em; border-color: transparent; }
.tk-name:focus, .tk-name:hover { border-color: var(--rule); }
.tk-main { flex: 1; display: grid; grid-template-columns: 230px 1fr 320px; min-height: 0; }
.tk-left, .tk-right { overflow: auto; padding: 8px; border-inline-end: 1px solid var(--rule); }
.tk-right { border-inline-end: 0; border-inline-start: 1px solid var(--rule); }
.tk-left h3, .tk-right h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; margin: 10px 0 6px; display: flex; justify-content: space-between; align-items: center; }
.tk-filter { width: 100%; margin-bottom: 4px; }
.tk-sheets, .tk-conds { list-style: none; margin: 0; padding: 0; }
.tk-sheets li, .tk-conds li { display: flex; gap: 6px; align-items: center; padding: 4px 6px; cursor: pointer; border-bottom: 1px solid var(--rule); }
.tk-sheets li.on, .tk-conds li.on { background: var(--soft); outline: 1px solid var(--ink); }
.tk-sheets .nm, .tk-conds .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-sheets .sc { color: var(--muted); font-size: 11px; } .tk-sheets .ct { font-size: 11px; background: var(--ink); color: var(--bg); padding: 0 5px; }
.warn { color: #c0392b !important; }
select.warn { border-color: #c0392b; }
.tk-conds i, .tk-tot i { display: inline-block; width: 10px; height: 10px; margin-inline-end: 6px; flex: none; }
.tk-conds .q { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 12px; }
.tk-conds .ed { border: 0; background: none; cursor: pointer; color: var(--muted); font: inherit; }
.tk-center { display: flex; flex-direction: column; min-width: 0; }
.tk-tool { font: inherit; font-size: 12px; padding: 4px 8px; border: 1px solid var(--rule); background: var(--bg); color: var(--ink); cursor: pointer; }
.tk-tool.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
kbd { font: 10px ui-monospace, monospace; border: 1px solid var(--rule); padding: 0 3px; color: var(--muted); }
.tk-tool.on kbd { color: var(--bg); border-color: var(--bg); }
.tk-chk { display: inline-flex; gap: 4px; align-items: center; }
.tk-view { position: relative; flex: 1; overflow: hidden; background: #e9ebee; outline: none; touch-action: none; }
.tk-view canvas { position: absolute; inset: 0; }
.tk-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); padding: 20px; text-align: center; }
.tk-tip { position: absolute; background: var(--ink); color: var(--bg); padding: 2px 6px; font-size: 12px; pointer-events: none; font-variant-numeric: tabular-nums; }
.tk-status { display: flex; justify-content: space-between; padding: 3px 8px; border-top: 1px solid var(--rule); color: var(--muted); font-size: 12px; min-height: 22px; }
.tk-tot td, .tk-tot th { white-space: normal !important; }
.tk-tot tr.it td:first-child { padding-inline-start: 22px; color: var(--muted); }
.tk-sel { border-top: 1px solid var(--ink); margin-top: 10px; padding-top: 6px; display: grid; gap: 6px; }
.tk-dlg { border: 1px solid var(--ink); padding: 16px 18px; max-width: 640px; width: 92vw; background: var(--bg); color: var(--ink); }
.tk-dlg::backdrop { background: rgba(0,0,0,.35); }
.tk-dlg h3 { margin: 0 0 10px; } .tk-dlg h4 { margin: 14px 0 4px; }
.tk-dlg .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.tk-dlg label { display: grid; gap: 2px; font-size: 13px; }
.tk-dlg .row.end { justify-content: flex-end; margin-top: 14px; }
.tk-items input, .tk-items select { width: 100%; }
.tk-dlg.wide { max-width: 1180px; }
.tk-upa { display: grid; grid-template-columns: 230px 1fr; gap: 14px; align-items: start; }
.tk-upa-l li.on a { font-weight: 700; color: var(--ink); }
.tk-upa .grid4 { display: grid; grid-template-columns: 70px 2fr 1fr 70px; gap: 8px; margin-bottom: 8px; }
.tk-upa-t { table-layout: fixed; width: 100%; }
.tk-upa-t td, .tk-upa-t th { padding: 2px 3px; } .tk-upa-t input, .tk-upa-t select { min-width: 0; width: 100%; box-sizing: border-box; font-size: 13px; }
.tk-upa-t select { display: block; } .tk-upa-t .uref { margin-top: 2px; }
.tk-upa-t th:nth-child(1) { width: 19%; } .tk-upa-t th:nth-child(2) { width: 11%; } .tk-upa-t th:nth-child(3) { width: 6%; } .tk-upa-t th:nth-child(4) { width: 7%; } .tk-upa-t th:nth-child(5) { width: 6%; }
.tk-upa-t th:nth-child(6) { width: 14%; } .tk-upa-t th:nth-child(7), .tk-upa-t th:nth-child(8), .tk-upa-t th:nth-child(9) { width: 9%; } .tk-upa-t th:nth-child(10) { width: 10%; } .tk-upa-t th:nth-child(11) { width: 30px; }
.tk-upa-t .ub { margin-top: 2px; font-size: 12px; color: var(--muted); }
.tk-prc-t { table-layout: fixed; width: 100%; } .tk-prc-t td, .tk-prc-t th { padding: 2px 3px; } .tk-prc-t input, .tk-prc-t select { width: 100%; min-width: 0; box-sizing: border-box; font-size: 13px; }
.tk-prc-t th:nth-child(2) { width: 18%; } .tk-prc-t th:nth-child(3) { width: 11%; } .tk-prc-t th:nth-child(4) { width: 6%; } .tk-prc-t th:nth-child(12) { width: 30px; }
.tk-dlg label.inl { display: inline-flex; gap: 6px; align-items: center; }
.tk-tot tr.grp td { background: var(--rule); }
.tk-upa .grid4 input { width: 100%; box-sizing: border-box; }
.tk-dlg label.tk-chk { display: flex; gap: 6px; align-items: center; margin-top: 10px; }
@media (max-width: 820px) { .tk-upa { grid-template-columns: 1fr; } }
.btn.danger { border-color: #c0392b; color: #c0392b; }
.tk-plist { list-style: none; padding: 0; } .tk-plist li { padding: 4px 0; border-bottom: 1px solid var(--rule); }
@media (max-width: 900px) { .tk-main { grid-template-columns: 1fr; grid-template-rows: auto 60vh auto; } .tk { height: auto; } .tk-left, .tk-right { border: 0; max-height: 40vh; } }
.tk-empty[hidden], .tk-tip[hidden] { display: none; }
.tk-left h3 span { display: flex; gap: 4px; }
.tk-left h3 { flex-wrap: wrap; gap: 4px; }
.tk-tools label { white-space: nowrap; }
.tk-sel p, .tk-sel h3 { margin: 0; }
.tk-tot thead th { white-space: nowrap !important; }

/* construction schedule */
.sc { display: grid; gap: 6px; }
.sc-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sc-bar .sc-name { font-weight: 600; min-width: 220px; }
.sc-sep { width: 1px; height: 22px; background: var(--rule); }
.sc-menu { position: relative; } .sc-menu > summary { list-style: none; cursor: pointer; } .sc-menu > summary::-webkit-details-marker { display: none; }
.sc-menu > div { position: absolute; right: 0; z-index: 5; display: grid; gap: 4px; padding: 8px; background: var(--bg); border: 1px solid var(--ink); min-width: 200px; }
.sc-main { display: grid; grid-template-columns: minmax(320px, 46%) 1fr; height: 62vh; min-height: 380px; border: 1px solid var(--rule); }
.sc-grid { overflow: auto; position: relative; outline: none; border-right: 1px solid var(--rule); }
.sc-grid:focus .sc-c.cur { outline: 2px solid #2f6db5; outline-offset: -2px; }
.sc-ghead { position: sticky; top: 0; z-index: 2; display: flex; height: 44px; align-items: flex-end; background: var(--bg); border-bottom: 1px solid var(--rule); font-size: 12px; font-weight: 600; }
.sc-gbody { position: relative; }
.sc-row { position: absolute; left: 0; display: flex; height: 26px; border-bottom: 1px solid var(--rule); font-size: 13px; font-variant-numeric: tabular-nums; }
.sc-row.sel { background: color-mix(in srgb, var(--rule) 60%, transparent); }
.sc-row.crit .sc-c[data-c="2"] { color: #c0392b; } .sc-row.done { color: var(--muted); } .sc-row.new { color: var(--muted); }
.sc-c { flex: none; padding: 4px 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border-right: 1px solid var(--rule); box-sizing: border-box; }
.sc-ghead .sc-c { padding: 4px 6px 6px; white-space: normal; line-height: 1.15; }
.sc-c.n { text-align: end; }
.sc-edit { width: 100%; height: 100%; border: 0; padding: 0; font: inherit; background: var(--bg); color: var(--ink); outline: 2px solid #2f6db5; }
.sc-gantt { overflow: auto; position: relative; }
.sc-sticky { position: sticky; top: 0; left: 0; width: 100%; height: 100%; }
.sc-sticky canvas { display: block; }
.sc-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sc-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--ink); }
.sc-tab { border: 1px solid var(--rule); border-bottom: 0; background: none; padding: 6px 12px; cursor: pointer; color: var(--ink); font: inherit; font-size: 13px; }
.sc-tab.on { border-color: var(--ink); font-weight: 600; }
.sc-panel { padding: 8px 2px 16px; min-height: 160px; }
.sc-det .grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 10px; }
.sc-det label, .sc-panel label { display: grid; gap: 2px; font-size: 13px; } .sc-panel .row label { display: inline-flex; align-items: center; gap: 4px; }
.sc-det input, .sc-det select, .sc-det textarea { width: 100%; box-sizing: border-box; }
.sc-curve { width: 100%; height: 220px; display: block; margin: 6px 0; }
.sc-twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .sc-main { grid-template-columns: 1fr; height: auto; } .sc-gantt { height: 50vh; } .sc-det .grid4, .sc-twocol { grid-template-columns: 1fr 1fr; } }

/* conceptual estimate */
.es { display: grid; gap: 6px; }
.es-tabs { display: flex; gap: 2px; align-items: center; border-bottom: 1px solid var(--ink); flex-wrap: wrap; }
.es-main { display: grid; grid-template-columns: 250px minmax(0, 1fr) 360px; gap: 14px; align-items: start; }
.es-right { min-width: 0; overflow-x: auto; } .es-right table.data td, .es-right table.data th { padding: 4px 5px; } .es-right table.data { font-size: 12px; }
.es-left .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; } .es-left label, .es-right label { display: grid; gap: 2px; font-size: 13px; }
.es-left input, .es-left select, .es-left textarea, .es-right input { width: 100%; box-sizing: border-box; }
.es-left h3, .es-right h3 { margin: 4px 0 8px; } .es-left h4, .es-right h4 { margin: 14px 0 6px; }
.es-mid { min-width: 0; overflow-x: auto; }
.es-tbl input { width: 100%; box-sizing: border-box; text-align: end; font-size: 13px; } .es-tbl td { white-space: normal; vertical-align: top; padding: 3px 5px; } .es-tbl .en { text-align: start; }
.es-tbl tr.grp td, .es-right tr.grp td { background: color-mix(in srgb, var(--rule) 70%, transparent); }
.es-right .mkn { width: 9em; } .es-right .mkp { width: 3.5em; text-align: end; }
.es-bench-bar { position: relative; height: 10px; background: linear-gradient(90deg, #9db9de, #2f6db5); margin: 6px 0 4px; } .es-bench-bar i { position: absolute; top: -4px; width: 3px; height: 18px; background: var(--ink); }
.es-shares div { display: grid; grid-template-columns: 1fr 80px 44px; gap: 6px; align-items: center; font-size: 12px; } .es-shares b { display: block; height: 8px; background: #2f6db5; } .es-shares em { font-style: normal; text-align: end; }
@media (max-width: 1100px) { .es-main { grid-template-columns: 1fr; } }

/* site and massing check */
.st { display: grid; gap: 6px; }
.st-main { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 16px; align-items: start; }
.st-left label { display: grid; gap: 2px; font-size: 13px; margin-bottom: 6px; } .st-left input, .st-left select { width: 100%; box-sizing: border-box; }
.st-left label.tk-chk { display: flex; gap: 6px; align-items: center; } .st-left label.tk-chk input { width: auto; }
.st-left h3 { margin: 12px 0 6px; } .st-left .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; } .st-left .grid3 { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 4px; margin-bottom: 4px; }
.st-poly input, .st-poly select { width: 100%; box-sizing: border-box; font-size: 12px; } .st-poly td { padding: 2px 3px; }
.st-mid { min-width: 0; } .st-views { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .st-views canvas { width: 100%; border: 1px solid var(--rule); display: block; }
.st .sc-panel input:not([type=checkbox]) { max-width: 9em; } .st .sc-panel table input { max-width: none; width: 100%; box-sizing: border-box; }
.st .sc-panel label.inl { display: inline-flex; gap: 4px; align-items: center; margin-right: 10px; }
@media (max-width: 1000px) { .st-main, .st-views { grid-template-columns: 1fr; } }
ol.tools.steps { counter-reset: step; padding-left: 0; } ol.tools.steps li { list-style: none; counter-increment: step; position: relative; padding-left: 2.2em; }
ol.tools.steps li::before { content: counter(step); position: absolute; left: 0; top: 0; font-weight: 700; width: 1.6em; text-align: center; border: 1px solid var(--ink); }
/* schedules */
.sd-opts { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 8px 0; font-size: 13px; } .sd-opts label.tk-chk { display: inline-flex; gap: 4px; align-items: center; }
.sd-wrap { overflow-x: auto; max-height: 70vh; overflow-y: auto; } .sd-t { min-width: 100%; } .sd-t thead th { position: sticky; top: 0; background: var(--bg); z-index: 1; }
.sd-t td { padding: 0; } .sd-t td select { min-width: 9.5em; } .sd-t td input, .sd-t td select { width: 100%; box-sizing: border-box; border: 0; background: transparent; padding: 5px 6px; font: inherit; color: inherit; }
.sd-t td.n input { text-align: end; } .sd-t td:not(:has(input,select)) { padding: 5px 6px; } .sd-t td.act { white-space: nowrap; padding: 2px; }
.sd-t td.mv, .sd-legend .mv { background: #eef4fb; } .sd-t td.blank, .sd-legend .blank { background: #fff6cc; } .sd-t td.bad, .sd-legend .bad { background: #fbe1e1; } .sd-t td.chg { outline: 2px solid #e0a800; outline-offset: -2px; }
.sd-t tr.gone td { text-decoration: line-through; color: var(--muted); } .sd-t td.rv { font-size: 12px; white-space: nowrap; } .sd-t td.rv.added { color: #1e7b34; } .sd-t td.rv.removed { color: #b3261e; } .sd-t td.el { padding: 2px 6px; color: var(--ink); }
.sd-legend span { padding: 1px 6px; border: 1px solid var(--rule); margin-right: 4px; } .sd-rev { padding: 2px 8px; border: 1px solid #e0a800; }
.sc-tab.warn { border-top: 2px solid #e0a800; } .sd-area { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: start; } .sd-hw { border: 1px solid var(--rule); padding: 8px; margin: 8px 0; } .sd-hw input { width: 100%; box-sizing: border-box; }
.sd-hw .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; } .sd-hw .row input { width: 12em; } .sd-cols { padding-left: 1.4em; } .sd-cols li { display: flex; gap: 6px; align-items: center; } .sd-cols label.tk-chk { flex: 1; margin: 2px 0; }
@media (max-width: 800px) { .sd-area { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .sd .sd-t { display: table; width: max-content; min-width: 100%; } .sd .sd-t thead { display: table-header-group; } .sd .sd-t tbody { display: table-row-group; width: auto; } .sd .sd-t tfoot { display: table-footer-group; }
  .sd .sd-t tbody tr { display: table-row; padding: 0; } .sd .sd-t tbody td, .sd .sd-t tbody td.n { display: table-cell; border-bottom: 1px solid var(--rule); padding: 0; white-space: nowrap; } .sd .sd-t tbody td.n input { text-align: end; } .sd .sd-t tbody td:not(:has(input,select)) { padding: 5px 6px; }
  .sd .sc-tabs { overflow-x: auto; flex-wrap: nowrap; } .sd .sc-tab { white-space: nowrap; flex: none; }
}
/* site diary */
.dy-date { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 8px 0; font-size: 13px; } .dy-date input[type=date] { font: inherit; padding: 3px 4px; }
.dy-main { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 16px; align-items: start; } .dy-side { position: sticky; top: 8px; font-size: 13px; }
.dy-sec { border-top: 1px solid var(--rule); padding: 8px 0 12px; } .dy-sec h3 { margin: 4px 0 8px; font-size: 15px; } .dy-sec textarea { width: 100%; box-sizing: border-box; font: inherit; }
.dy-sec label { display: grid; gap: 2px; font-size: 13px; margin-top: 6px; } .dy-sec label.tk-chk { display: flex; gap: 6px; align-items: center; }
.dy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px 10px; } .dy-grid input { width: 100%; box-sizing: border-box; }
.dy-t td { padding: 2px 3px; } .dy-t input, .dy-t select { box-sizing: border-box; font: inherit; max-width: 100%; } .dy-t td.wide input { width: 100%; } .dy-t tr.muted td { color: var(--muted); }
.dy-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-top: 8px; } .dy-photo { margin: 0; border: 1px solid var(--rule); } .dy-photo img { width: 100%; height: 140px; object-fit: cover; display: block; background: #f2f2f2; }
.dy-photo figcaption { padding: 4px; display: grid; gap: 3px; } .dy-photo figcaption input { width: 100%; box-sizing: border-box; }
.dy-signs { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; } .dy-sign { display: grid; gap: 3px; border: 1px solid var(--rule); padding: 6px; } .dy-closed { color: #1e6b34; font-weight: 600; }
.dy-cal { border: 1px solid var(--rule); padding: 6px; } .dy-calh { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; } .dy-calg { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.dy-calg button { border: 1px solid transparent; background: none; padding: 4px 0; font: inherit; font-size: 12px; cursor: pointer; color: var(--ink); } .dy-calg button.has { border-color: var(--ink); } .dy-calg button.closed { background: var(--ink); color: var(--bg); } .dy-calg button.on { outline: 2px solid #e0a800; } .dy-calg button.delay { border-bottom: 3px solid #b3261e; }
.dy-warn { color: #8a5a00; padding-left: 1.2em; } .dy-tag { font-size: 11px; border: 1px solid #b3261e; color: #b3261e; padding: 0 3px; } .dy-empty { padding: 24px 0; } .dy-range { display: flex; flex-wrap: wrap; gap: 8px 14px; }
@media (max-width: 900px) { .dy-main { grid-template-columns: minmax(0, 1fr); } .dy-side { position: static; } }
@media (max-width: 640px) { .dy .dy-t { display: table; width: max-content; min-width: 100%; } .dy .dy-t thead { display: table-header-group; } .dy .dy-t tbody { display: table-row-group; } .dy .dy-t tfoot { display: table-footer-group; } .dy .dy-t tbody tr { display: table-row; padding: 0; } .dy .dy-t tbody td, .dy .dy-t tbody td.n { display: table-cell; border-bottom: 1px solid var(--rule); white-space: nowrap; padding: 2px 3px; } .dy-sec { overflow-x: auto; } .dy .sc-tabs { overflow-x: auto; flex-wrap: nowrap; } .dy .sc-tab { white-space: nowrap; flex: none; } }
.dy-t td.wide { min-width: 16em; } .dy-sec label.btn { display: inline-block; margin-top: 0; }
/* permit self-check */
.pm-opts { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 8px 0; font-size: 13px; } .pm-old { color: #b3261e; }
.pm-q h3 { font-size: 15px; margin: 14px 0 6px; } .pm-qs { display: grid; gap: 6px; } .pm-qrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; border-bottom: 1px solid var(--rule); padding: 4px 0; font-size: 13px; }
.pm-qrow details, .pm-qrow .pm-sug { grid-column: 1 / -1; } .pm-yn { display: flex; gap: 10px; } .pm-yn label { display: inline-flex; gap: 3px; align-items: center; } .pm-sug { color: #1e5f8a; }
.pm-jp { border: 1px solid var(--rule); padding: 4px 8px; margin: 4px 0; font-size: 13px; } .pm-jpl { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 2px 12px; max-height: 320px; overflow: auto; } .pm-jpl label.tk-chk { display: flex; gap: 6px; align-items: flex-start; }
.pm-sum { position: sticky; top: 0; z-index: 2; background: var(--bg); padding: 8px 0; border-bottom: 1px solid var(--ink); margin: 10px 0 4px; font-size: 13px; } .st-missing { color: #b3261e; } .st-check { color: #8a5a00; } .st-have { color: #1e6b34; }
.pm-t td { vertical-align: top; } .pm-t tr.pm-g td { background: #f2f2f2; font-weight: 600; } .pm-t tr.pm-item td:first-child { padding-left: 20px; } .pm-t input { width: 100%; box-sizing: border-box; min-width: 10em; font: inherit; }
.pm-st { display: inline-flex; gap: 2px; flex-wrap: wrap; align-items: center; } .pm-st button { border: 1px solid var(--rule); background: none; font: inherit; font-size: 12px; padding: 2px 6px; cursor: pointer; color: var(--ink); white-space: nowrap; }
.pm-st button.on.st-have { background: #e6f4ea; border-color: #1e6b34; } .pm-st button.on.st-missing { background: #fbe1e1; border-color: #b3261e; } .pm-st button.on.st-na { background: #eee; border-color: #888; } .pm-st button.on.st-check { background: #fff6cc; border-color: #8a5a00; }
.pm-t tr.st-row-missing td:first-child { box-shadow: inset 3px 0 #b3261e; } .pm-t tr.st-row-na td { color: var(--muted); }
@media (max-width: 640px) { .pm .pm-t, .pm .pm-t tbody { display: table; width: 100%; } .pm .pm-t thead { display: none; } .pm .pm-t tbody tr { display: table-row; } .pm .pm-t tbody td { display: block; border: 0; padding: 2px 0; } .pm .pm-t tbody tr td:last-child { border-bottom: 1px solid var(--rule); padding-bottom: 6px; } .pm-qrow { grid-template-columns: 1fr; } }
.pm-t { width: 100%; table-layout: fixed; } .pm-t th:nth-child(2), .pm-t td:nth-child(2) { width: 300px; } .pm-t th:nth-child(3), .pm-t td:nth-child(3) { width: 220px; } table.data.pm-t td, table.data.pm-t th { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 640px) { .pm-t { table-layout: auto; } .pm-t td:nth-child(2), .pm-t td:nth-child(3) { width: auto; } }
/* solar */
.sv-main { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 18px; align-items: start; } .sv-left h3 { font-size: 14px; margin: 14px 0 6px; border-top: 1px solid var(--rule); padding-top: 8px; } .sv-left h3:first-child { border-top: 0; padding-top: 0; }
.sv-left label { display: grid; gap: 2px; font-size: 12.5px; margin-bottom: 5px; } .sv-left input, .sv-left select, .sv-left textarea { width: 100%; box-sizing: border-box; font: inherit; } .sv-left .row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; } .sv-left label.inl { display: inline-flex; gap: 4px; align-items: center; } .sv-left label.inl select { width: auto; }
.sv-unit { display: flex; gap: 4px; } .sv-unit select { width: 6.5em !important; } .sv-temps { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; } .sv-paste { margin: 4px 0 8px; font-size: 13px; } .sv-paste textarea { margin: 4px 0; }
.sv-vars { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; } .sv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px 10px; } .sv-grid label { display: grid; gap: 2px; font-size: 12.5px; } .sv-grid input, .sv-grid select { width: 100%; box-sizing: border-box; font: inherit; }
.sv-need { padding: 18px 0; color: var(--muted); } .sv-sum { font-weight: 600; padding: 6px 8px; border: 1px solid; } .sv-sum.ok { border-color: #1e6b34; color: #1e6b34; } .sv-sum.bad { border-color: #b3261e; color: #b3261e; }
table.data tr.sv-bad td { background: #fbe1e1; } table.data tr.sv-warn td { background: #fff6cc; } table.data.sv-strings tr.cur td { background: #e6f4ea; font-weight: 600; }
.sv-kpi { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 8px 0; font-size: 14px; } .sv-kpi b { font-size: 18px; }
.sv-bars { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; height: 140px; align-items: end; margin: 10px 0 18px; } .sv-bar { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; } .sv-bar span { width: 100%; background: #e0a800; display: block; } .sv-bar em { font-style: normal; font-size: 11px; position: absolute; bottom: -16px; color: var(--muted); }
@media (max-width: 900px) { .sv-main { grid-template-columns: minmax(0, 1fr); } }
.sv-sld { overflow-x: auto; border: 1px solid var(--rule); } .sv-sld svg { display: block; max-width: none; } .sv-bom input { width: 100%; box-sizing: border-box; font: inherit; } .sv-bom td { padding: 2px 3px; } .sv-q { max-width: 420px; margin: 8px 0; } .sv-q tr.b td { font-weight: 700; } .sv-file { display: inline-block; margin: 2px 0 6px; }
/* battery */
.bt-months { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px 6px; } .bt-months label { font-size: 12px; } .bt-chart { width: 100%; height: 260px; display: block; margin: 8px 0; border: 1px solid var(--rule); }
.bt-legend span { margin-right: 12px; } .bt-legend span::before { content: ''; display: inline-block; width: 14px; height: 3px; margin-right: 4px; vertical-align: middle; } .bt-legend .l1::before { background: #222; } .bt-legend .l2::before { background: #e0a800; } .bt-legend .l3::before { background: #b3261e; } .bt-legend .l4::before { background: #1e5f8a; }
table.data tr.cur td { background: #e6f4ea; }