/* ════════════════════════════════════════════════════════════════════════════
   costsheet.css — the コストシート tab (public/costsheet.js). Builds on muji.css (.mj-*) and the
   theme.css tokens. Her sheet's colour code: yellow = typed, grey = calculated. Proposals are dashed
   and carry their source line. CSP: a file, no inline style.
   ════════════════════════════════════════════════════════════════════════════ */

.cs-view .cs-actions { display: flex; gap: var(--ui-sp-2); margin-left: auto; }
.cs-file { display: none; }
.cs-status { font-size: var(--ui-fs-sm); color: var(--ui-text-3); }
.cs-status.is-error { color: var(--ui-late); font-weight: 600; }

.cs-editor { display: flex; flex-direction: column; gap: var(--ui-sp-3); }
.cs-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-sp-2); }
.cs-doc-title { margin: 0 var(--ui-sp-2); font-size: var(--ui-fs-lg); font-weight: 600; flex: 1 1 auto; }
.cs-legend { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--ui-fs-xs); color: var(--ui-text-3); }
.cs-swatch { display: inline-block; width: 14px; height: 10px; border: 1px solid var(--ui-border-strong); border-radius: 2px; }
.cs-swatch.is-in { background: #FFF6C9; }
.cs-swatch.is-calc { background: #ECEBEA; }

.cs-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--ui-sp-4); align-items: start; }
.cs-main { display: flex; flex-direction: column; gap: var(--ui-sp-4); min-width: 0; }
.cs-side { position: sticky; top: var(--ui-sp-4); display: flex; flex-direction: column; gap: var(--ui-sp-3); max-height: calc(100vh - 2 * var(--ui-sp-4)); overflow: auto; }
@media (max-width: 1180px) { .cs-grid { grid-template-columns: minmax(0, 1fr); } .cs-side { position: static; max-height: none; } }

.cs-sec { padding: var(--ui-sp-4); }
.cs-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--ui-sp-3); }
.cs-lab { display: flex; flex-direction: column; gap: 4px; font-size: var(--ui-fs-xs); color: var(--ui-text-3); }
.cs-lab-inline { font-size: var(--ui-fs-xs); color: var(--ui-text-3); margin-right: var(--ui-sp-2); }
.cs-lab-mini { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--ui-text-3); font-weight: 400; }

.cs-f { display: inline-flex; flex-direction: column; gap: 2px; min-width: 0; }
.cs-in { height: 30px; padding: 0 8px; border: 1px solid #D9C76A; border-radius: var(--ui-r-sm); background: #FFF6C9; font: inherit; font-size: var(--ui-fs-sm); color: var(--ui-text); width: 100%; min-width: 0; box-sizing: border-box; }
.cs-in:focus { outline: none; box-shadow: var(--ui-focus); border-color: var(--ui-accent); background: #FFFBE4; }
.cs-in[readonly] { background: var(--ui-sunken); border-color: var(--ui-border); }
.cs-in.cs-calcin, .cs-calc { background: #ECEBEA; border-color: #D4D2D0; color: var(--ui-text-2); }
output.cs-calc { display: inline-flex; align-items: center; height: 30px; padding: 0 8px; border: 1px solid #D4D2D0; border-radius: var(--ui-r-sm); font-variant-numeric: tabular-nums; }
.cs-in.is-bad { border-color: var(--ui-late); box-shadow: 0 0 0 2px var(--ui-late-bg); }
select.cs-in { padding: 0 4px; }

/* proposals: shown UNDER the empty field (the field stays empty — a proposal is neither calculated nor saved
   until it is confirmed); the field's dashed border says "a proposal waits below" */
.cs-f.is-proposed > .cs-in { border-style: dashed; border-color: var(--ui-accent); }
.cs-src { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 11px; line-height: 1.35; color: var(--ui-text-3); max-width: 340px; white-space: normal; }
.cs-src-tag { font-weight: 600; color: var(--ui-accent); }
.cs-src-val { color: var(--ui-accent); font-weight: 600; }
.cs-src-from { flex-basis: 100%; }
/* in a table a proposal widens its cell instead of stacking one word per line */
.cs-tbl .cs-src { min-width: 230px; }
.cs-ok, .cs-choice, .cs-no { border: 1px solid var(--ui-accent); background: var(--ui-surface); color: var(--ui-accent); border-radius: var(--ui-r-sm); font-size: 11px; padding: 1px 6px; cursor: pointer; }
.cs-ok:hover, .cs-choice:hover { background: var(--ui-accent); color: #fff; }
.cs-no { border-color: var(--ui-border); color: var(--ui-text-3); }
.cs-no:hover { color: var(--ui-text); border-color: var(--ui-border-strong); }
.cs-choice { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 1px; padding: 3px 6px; }
.cs-choice span { color: inherit; opacity: .85; }
.cs-hint { display: block; font-size: 11px; line-height: 1.3; color: var(--ui-text-3); }
.cs-fxhint { font-size: 10px; max-width: 120px; }
.cs-err { display: block; font-size: 11px; line-height: 1.35; color: var(--ui-late); font-weight: 600; max-width: 260px; }

/* the open-proposals counter under the top bar */
.cs-pending { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-sp-2); padding: 6px var(--ui-sp-3); border: 1px dashed var(--ui-accent); border-radius: var(--ui-r-sm); background: var(--ui-accent-soft); font-size: var(--ui-fs-sm); }
.cs-pending[hidden] { display: none; }
.cs-pending-text { font-weight: 600; color: var(--ui-text); }
.cs-pending-note { color: var(--ui-text-3); font-size: var(--ui-fs-xs); }

/* the tab's own dialog (unsaved changes, open proposals, import) */
.cs-dialog-backdrop { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(20, 18, 16, .35); }
.cs-dialog { width: min(480px, 100%); background: var(--ui-surface); color: var(--ui-text); border-radius: var(--ui-r-lg); box-shadow: var(--ui-shadow-pop); padding: var(--ui-sp-5); display: flex; flex-direction: column; gap: var(--ui-sp-3); }
.cs-dialog-title { margin: 0; font-size: var(--ui-fs-lg); font-weight: 600; }
.cs-dialog p { margin: 0; font-size: var(--ui-fs-sm); line-height: 1.55; color: var(--ui-text-2); }
.cs-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--ui-sp-2); margin-top: var(--ui-sp-2); }

/* unfinished: the totals are a grey reference, not a green result */
.cs-unfinished { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: var(--ui-fs-xs); color: var(--ui-text-2); }
.cs-kpis.is-unfinished .mj-kpi-value, .mj-kpi.is-ref .mj-kpi-value { color: var(--ui-text-3); }
.mj-kpi.is-ref { background: var(--ui-sunken); }
#cs-results.is-unfinished .cs-result td:nth-last-child(2) { color: var(--ui-text-3); }
.mj-pill.cs-ref { white-space: nowrap; }
.cs-refval { font-weight: 400; opacity: .8; }
/* a typing error stopped the calculation: what is shown is from before */
#cs-side.is-stale .cs-kpis, #cs-side.is-stale .cs-findings, #cs-results.is-stale { opacity: .45; }
.cs-stale-note { margin: 0; padding: 6px 10px; border-radius: var(--ui-r-sm); background: var(--ui-late-bg); color: var(--ui-late); font-size: var(--ui-fs-xs); font-weight: 600; line-height: 1.45; }

/* the list of findings: a progress line in workbook order, groups, every line a link to its field */
.cs-progress { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: var(--ui-sp-3); }
.cs-step { border: 1px solid var(--ui-ok-line); background: var(--ui-ok-bg); color: var(--ui-ok); border-radius: var(--ui-r-pill); font-size: 11px; padding: 1px 8px; cursor: pointer; }
.cs-step.is-open { border-color: var(--ui-risk-line); background: var(--ui-risk-bg); color: var(--ui-risk); font-weight: 600; }
.cs-done { margin: 0 0 var(--ui-sp-2); padding: 6px 10px; border-radius: var(--ui-r-sm); background: var(--ui-ok-bg); color: var(--ui-ok); font-size: var(--ui-fs-sm); font-weight: 600; }
.cs-flink, .cs-fline { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: start; width: 100%; padding: 0; border: none; background: none; font: inherit; color: inherit; text-align: left; }
.cs-flink { cursor: pointer; border-radius: var(--ui-r-sm); }
.cs-flink:hover span:last-child, .cs-flink:focus-visible span:last-child { text-decoration: underline; }
.cs-sub .cs-flink, .cs-sub .cs-fline { grid-template-columns: 1fr; padding-left: 4px; }
.cs-fgroup details > summary { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: start; cursor: pointer; list-style: none; }
.cs-fgroup details > summary::-webkit-details-marker { display: none; }
.cs-more { grid-column: 2; color: var(--ui-accent); font-size: var(--ui-fs-xs); }
.cs-sub { margin: 6px 0 0 12px; padding-left: 8px; border-left: 2px solid var(--ui-border); font-size: var(--ui-fs-xs); }

/* import: full width above the form; on top what touched the real order */
.cs-import .cs-impact { margin: var(--ui-sp-2) 0; padding: var(--ui-sp-3); border-left: 3px solid var(--ui-risk); border-radius: var(--ui-r-sm); background: var(--ui-risk-bg); font-size: var(--ui-fs-sm); line-height: 1.55; }
.cs-impact p { margin: 0 0 4px; }
.cs-impact ul { margin: 4px 0 0; padding-left: 1.2em; }
.cs-import-all > summary { cursor: pointer; color: var(--ui-accent); font-size: var(--ui-fs-sm); margin-bottom: var(--ui-sp-2); }

/* the narrow window's summary in the top bar */
.cs-sum { display: none; font-size: var(--ui-fs-xs); color: var(--ui-text-2); }
.cs-sum.is-unfinished { color: var(--ui-text-3); }
@media (max-width: 1180px) {
  .cs-top { position: sticky; top: 0; z-index: 5; background: var(--ui-canvas, var(--ui-surface)); padding: 6px 0; box-shadow: 0 1px 0 var(--ui-border); }
  .cs-sum { display: inline; flex-basis: 100%; order: 10; }
}

.cs-w2 { width: 40px; } .cs-w4 { width: 64px; } .cs-w5 { width: 72px; } .cs-w6 { width: 88px; } .cs-w8 { width: 110px; } .cs-w10 { width: 140px; } .cs-w12 { width: 170px; }
.cs-scroll { overflow-x: auto; }
/* fabric / material tables: the first two columns stay while the size columns (m/1P, usage) scroll into view */
.cs-sticky tr:not(.cs-grouphead) > :nth-child(-n+2) { position: sticky; z-index: 1; background: var(--ui-surface); }
.cs-sticky tr:not(.cs-grouphead) > :nth-child(1) { left: 0; }
.cs-sec-fabric .cs-sticky tr:not(.cs-grouphead) > :nth-child(2) { left: 96px; }
.cs-sec-material .cs-sticky tr:not(.cs-grouphead) > :nth-child(2) { left: 48px; }
.cs-tbl .cs-grouphead th { padding-bottom: 0; }
.cs-tbl .cs-grouphead th.cs-size { border-bottom: 1px solid var(--ui-border-strong); color: var(--ui-text-2); }
.cs-tbl { border-collapse: collapse; font-size: var(--ui-fs-sm); }
.cs-tbl th { text-align: left; font-size: var(--ui-fs-xs); color: var(--ui-text-3); font-weight: 600; padding: 4px 6px; white-space: nowrap; vertical-align: bottom; }
.cs-tbl td { padding: 3px 4px; vertical-align: top; }
.cs-tbl th.cs-size { text-align: center; color: var(--ui-text); }
.cs-tbl .cs-rowhead { color: var(--ui-text); font-size: var(--ui-fs-sm); white-space: nowrap; vertical-align: middle; }
.cs-tbl td.cs-c { text-align: center; vertical-align: middle; }
.cs-num { text-align: right; font-variant-numeric: tabular-nums; padding: 0 8px; vertical-align: middle; }
.cs-contract td.cs-calc { border-radius: var(--ui-r-sm); }
.cs-ld { min-width: 140px; }
.cs-ldh { display: flex; align-items: center; justify-content: space-between; gap: 4px; color: var(--ui-text); }
.cs-nowrap { white-space: nowrap; }
.cs-rm { border: none; background: none; color: var(--ui-text-4); font-size: 16px; line-height: 1; cursor: pointer; padding: 4px; }
.cs-rm:hover { color: var(--ui-late); }
.cs-mini { height: 26px; padding: 0 6px; }
.cs-add { margin-top: var(--ui-sp-2); }

.cs-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: var(--ui-sp-3); }
.cs-chip { display: inline-flex; align-items: center; gap: 2px; padding: 2px 4px 2px 10px; border: 1px solid #D9C76A; background: #FFF6C9; border-radius: var(--ui-r-pill); font-weight: 600; font-size: var(--ui-fs-sm); }

.cs-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ui-sp-2); }
.cs-kpis .mj-kpi { padding: var(--ui-sp-3); }
.cs-kpis .mj-kpi-value { font-size: var(--ui-fs-lg); }
.cs-findings .mj-h3 { margin-bottom: var(--ui-sp-2); }
.cs-flist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: var(--ui-fs-sm); line-height: 1.45; }
.cs-flist li { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: start; }
.cs-result td, .cs-result th { padding: 0 8px; }

/* 1つに纏める (2026-10-28): the tick per row, the merge preview with one question per value that differs */
.cs-pick { width: 16px; height: 16px; cursor: pointer; }
.cs-dialog.cs-merge { width: min(640px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; }
.cs-merge-qs { display: flex; flex-direction: column; gap: var(--ui-sp-2); }
.cs-merge-q { border: 1px solid var(--ui-border, rgba(0, 0, 0, .12)); border-radius: var(--ui-r-md, 8px); padding: var(--ui-sp-2) var(--ui-sp-3); margin: 0; }
.cs-merge-q legend { font-size: var(--ui-fs-sm); font-weight: 600; padding: 0 4px; }
.cs-merge-opt { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; font-size: var(--ui-fs-sm); line-height: 1.6; cursor: pointer; }
.cs-merge-opt input { margin: 0; }
.cs-merge-notes { margin: 0; padding-left: 1.2em; font-size: var(--ui-fs-sm); color: var(--ui-text-2); }
.cs-merge-left { font-weight: 600; }
@media (max-width: 600px) { .cs-dialog.cs-merge { padding: var(--ui-sp-3); } }

/* 発注書を読む（ワコール）: the read files, then per file the totals check, findings, changes and the grids */
.cs-wo-btn { white-space: nowrap; }
.cs-wo-title { margin: var(--ui-sp-3) 0 var(--ui-sp-1); font-size: var(--ui-fs-lg, 16px); }
.cs-wo-note { margin: 0 0 var(--ui-sp-2); padding: 6px 10px; border-left: 3px solid var(--ui-accent); border-radius: var(--ui-r-sm); background: var(--ui-sunken); font-size: var(--ui-fs-sm); line-height: 1.55; }
.cs-wo-list, .cs-wo-card { margin-bottom: var(--ui-sp-3); }
.cs-wo-tablewrap { max-height: none; min-height: 0; margin: var(--ui-sp-2) 0; }
.cs-wo-table td { height: auto; padding: 4px 10px; }
.cs-wo-grid th.cs-wo-period { text-align: center; border-left: 1px solid var(--ui-border); }
.cs-wo-due { font-weight: 400; color: var(--ui-text-2); }
.cs-wo-sum td { font-weight: 600; background: var(--ui-sunken); }
.cs-wo-model h4 { margin: var(--ui-sp-3) 0 0; font-size: var(--ui-fs-md, 14px); }
.cs-wo-check { margin: 0 0 var(--ui-sp-2); font-size: var(--ui-fs-sm); color: var(--ui-ok); }
.cs-wo-check.is-bad { color: var(--ui-late); font-weight: 600; }
.cs-wo-findings, .cs-wo-changes { margin: var(--ui-sp-2) 0; }
.cs-wo-findings > summary, .cs-wo-changes > summary { cursor: pointer; color: var(--ui-accent); font-size: var(--ui-fs-sm); }
.cs-wo-findings ul { margin: 6px 0 0; padding-left: 1.2em; font-size: var(--ui-fs-sm); line-height: 1.6; }
.cs-wo-f.is-high { color: var(--ui-late); }
.cs-wo-f.is-warn .cs-wo-level { color: var(--ui-risk); }
.cs-wo-level { font-weight: 600; }
.cs-wo-minus { color: var(--ui-late); }
.cs-wo-plus { color: var(--ui-ok); }
@media (max-width: 600px) { .cs-wo-table td, .cs-wo-table th { padding: 4px 6px; } }
/* phone: format and read date give way, so file, pieces and the check fit without sideways scrolling */
@media (max-width: 600px) { .cs-wo-table .cs-wo-opt { display: none; } .cs-wo-table .mj-ellipsis { max-width: 24vw; } }
.cs-wo-table td.cs-c { text-align: center; }

/* ── step-by-step input (public/costsheet-wizard.js): start screen, step bar, gate ── */
#cs-editor [hidden], .cs-wz-pick [hidden] { display: none !important; }
.cs-wz-pick, .cs-wz-nope { padding: var(--ui-sp-4); max-width: 880px; }
.cs-wz-customers { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--ui-sp-2); margin-top: var(--ui-sp-3); }
.cs-wz-customer { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: var(--ui-sp-3); text-align: left; min-height: 56px; }
.cs-wz-customer.is-unsupported { opacity: .75; }
.cs-wz-format { font-size: var(--ui-fs-xs); color: var(--ui-text-3); }
.cs-wz { display: flex; flex-direction: column; gap: var(--ui-sp-2); padding: var(--ui-sp-3); border: 1px solid var(--ui-border-strong); border-radius: 8px; }
.cs-wz-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-sp-3); font-size: var(--ui-fs-sm); }
.cs-wz-chip { font-weight: 600; }
.cs-wz-of { color: var(--ui-text-3); }
.cs-wz-bar { flex: 1 1 160px; height: 8px; }
.cs-wz-steps { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.cs-wz-step { font: inherit; font-size: var(--ui-fs-xs); padding: 4px 10px; border: 1px solid var(--ui-border-strong); border-radius: 999px; background: transparent; color: var(--ui-text-2, inherit); cursor: pointer; }
.cs-wz-step.is-done { border-color: var(--ui-ok, #2e7d32); }
.cs-wz-step.is-current { font-weight: 700; border-width: 2px; }
.cs-wz-step:disabled { opacity: .45; cursor: not-allowed; }
.cs-wz-intro { margin: 0; }
.cs-wz-issues { margin: 0; padding-left: 1.2em; font-size: var(--ui-fs-sm); }
.cs-wz-issue { font: inherit; padding: 0; border: 0; background: none; color: var(--ui-late); text-decoration: underline; cursor: pointer; text-align: left; }
.cs-wz-nav, .cs-wz-save { display: flex; flex-wrap: wrap; gap: var(--ui-sp-2); }
.cs-wz-nav .cs-wz-next { margin-left: auto; }
@media (max-width: 640px) { .cs-wz-customers { grid-template-columns: minmax(0, 1fr); } }

/* the two sub-tabs: 新しく作る (step by step, default) and 保存済み (2026-10-29) */
.cs-subtabs { display: flex; gap: 4px; margin: 0 0 12px; border-bottom: 1px solid var(--ui-border); }
.cs-subtab { padding: 8px 16px; border: 1px solid transparent; border-bottom: none; border-radius: 6px 6px 0 0; background: none; color: var(--ui-text-2); font: inherit; cursor: pointer; }
.cs-subtab.is-on { border-color: var(--ui-border); background: var(--ui-surface, #fff); color: var(--ui-text); font-weight: 600; margin-bottom: -1px; }

/* overflow after choosing a company (2026-10-29): long names and descriptions wrap inside their card */
.cs-wz-pick, .cs-wz-nope { min-width: 0; box-sizing: border-box; width: 100%; overflow-wrap: anywhere; }
.cs-wz-customers { grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); }
.cs-wz-customer, .cs-wz-nav .mj-btn, .cs-wz-pick .mj-btn { white-space: normal; min-width: 0; max-width: 100%; height: auto; text-align: left; }
.cs-wz-head, .cs-wz-steps { min-width: 0; max-width: 100%; }

/* ── customer first (2026-10-29): customer header, sub-tab panel, summary, brand guide ── */
.cs-cf-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.cs-cf-name { margin: 0; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.cs-cf-panel { margin-top: 12px; min-width: 0; }
.cs-cf-sum { margin: 8px 0; font-size: 13px; color: var(--ui-text-2); }
.cs-cf-all { margin-top: 12px; text-align: right; }
.cs-cf-guide { margin: 8px 0 12px; padding: var(--ui-sp-4) var(--ui-sp-5); }
.cs-cf-guide h4 { margin: 0 0 6px; font-size: 14px; }
.cs-cf-guide ol { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 13px; line-height: 1.6; }
.cs-cf-guide li { overflow-wrap: anywhere; }