/* A rebuild of the source spreadsheet, not a reinterpretation of it.
   Same two blocks, same rows in the same order, same conditional fills,
   same legend and KPI targets. Namespaced custom properties (--st-*) so
   nothing leaks into styles.css's dark chrome. */

:root {
  --st-bar:      #1f4e79;
  --st-bar-2:    #2e6da4;
  --st-page:     #ffffff;
  --st-ink:      #1a1a1a;
  --st-ink-2:    #5a5a5a;
  --st-grid:     #b7b7b7;
  --st-grid-2:   #d9d9d9;
  --st-in:       #ddebf7;
  --st-in-line:  #9dc3e6;
  --st-calc:     #f2f2f2;
  --st-green:    #c6efce;
  --st-green-tx: #006100;
  --st-red:      #ffc7ce;
  --st-red-tx:   #9c0006;
  --st-note:     #fff2cc;
}

body.stmt-page { background: #e9eaec; color: var(--st-ink); }
body.stmt-page .ambient { display: none; }

.stmt-canvas { margin-left: 210px; min-height: 100vh; padding: 18px 20px 28px; }

/* styles.css sets `.with-sidebar main { width:auto; max-width:1500px;
   margin-left:210px }` at (0,1,1), which outranks a bare class. Beat it. */
.stmt-canvas main.calc {
  width: min(1720px, 100%);
  max-width: none;
  margin: 0 auto;
  padding: 0;
  background: var(--st-page);
  border: 1px solid var(--st-grid);
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
  font: 400 13px/1.45 "IBM Plex Sans", system-ui, sans-serif;
  color: var(--st-ink);
}

.calc-head { padding: 16px 18px 0; }
.calc-org { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--st-ink-2); }
.calc-head p { margin: 6px 0 14px; font-size: 12px; color: var(--st-ink-2); }

/* section bars, as in the sheet */
.bar {
  background: var(--st-bar); color: #fff;
  font: 700 13px/1 "IBM Plex Sans", sans-serif;
  letter-spacing: .04em; text-align: center;
  padding: 9px 10px; border-top: 1px solid var(--st-page);
}
.bar-title { font-size: 15px; letter-spacing: .06em; padding: 12px 10px; }

/* the grid */
table.sheet { width: 100%; border-collapse: collapse; }
table.sheet th, table.sheet td {
  border: 1px solid var(--st-grid-2);
  padding: 6px 9px; font-size: 12.5px; vertical-align: middle;
  height: 38px;                     /* even rows; acts as a minimum in tables */
  text-transform: none; letter-spacing: normal; font-weight: 400; color: var(--st-ink);
}
table.sheet { min-width: 0; }
.lbl { font-weight: 600; font-size: 12px; line-height: 1.3; }
.unit { text-align: center; color: var(--st-ink-2); }
.val, .in { text-align: right; font-variant-numeric: tabular-nums; }
.val { background: var(--st-calc); font-weight: 600; }
.cmt { font-size: 10.5px; color: var(--st-ink-2); line-height: 1.3; }

.in { background: var(--st-in); padding: 0; }
.in input, .in select {
  width: 100%; box-sizing: border-box; height: 26px;
  border: 0; background: var(--st-in);
  padding: 0 9px; text-align: right;
  font: 600 13px/1.2 "IBM Plex Sans", sans-serif;
  font-variant-numeric: tabular-nums; color: var(--st-ink);
}
.in select { text-align: left; }
.in input:focus, .in select:focus { outline: 2px solid var(--st-bar-2); outline-offset: -2px; background: #fff; }

/* conditional formatting, exactly the sheet's two states */
.val.ok   { background: var(--st-green); color: var(--st-green-tx); }
.val.bad  { background: var(--st-red);   color: var(--st-red-tx); }
tr.added .lbl::after {
  content: " · added"; font-weight: 400; font-size: 10px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--st-bar-2);
}
tr.fixed .lbl::after {
  content: " · corrected"; font-weight: 400; font-size: 10px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--st-red-tx);
}

/* legend / targets / how-to, as plain blocks like the sheet */
.block { padding: 0; }
.block .row {
  border: 1px solid var(--st-grid-2); border-top: 0;
  padding: 6px 10px; font-size: 12.5px;
}
.row.green { background: var(--st-green); color: var(--st-green-tx); }
.row.red   { background: var(--st-red);   color: var(--st-red-tx); }
.row.head  { font-weight: 700; background: #fafafa; }

.calc-foot {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 12px 14px; font-size: 11px; color: var(--st-ink-2);
  border-top: 1px solid var(--st-grid-2);
}
.reset-btn {
  font: inherit; background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--st-bar-2); border-bottom: 1px solid currentColor;
}

@media (max-width: 900px) {
  .stmt-canvas { margin-left: 0; padding: 16px 10px 70px; }
  .cmt { font-size: 10.5px; color: var(--st-ink-2); line-height: 1.3; }
  .val, .in { text-align: right; font-variant-numeric: tabular-nums; }
}

/* Extra Thai fields are hidden AND neutralised by default — see readInputs(). */
.extras-toggle {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 8px; font-size: 12px; color: var(--st-ink); cursor: pointer;
}
.extras-toggle input { width: 14px; height: 14px; accent-color: var(--st-bar); cursor: pointer; }
.extras-note {
  margin: 0 0 14px !important; padding: 6px 9px;
  background: var(--st-note); border: 1px solid #e0c97a;
  font-size: 11.5px; line-height: 1.5; color: #6b5310;
}
body:not([data-extras="on"]) tr.added { display: none; }

/* Product tabs — Tier 1 and Tier 2 only, at the top of the sheet. */
.ptabs { padding: 12px 14px 4px; background: #eef1f4; border-bottom: 1px solid var(--st-grid); }
.ptab-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.ptab-tier {
  flex: 0 0 auto; width: 52px;
  font: 700 10px/1 "IBM Plex Sans", sans-serif;
  letter-spacing: .1em; text-transform: uppercase; color: var(--st-ink-2);
}
.ptab {
  font: 600 12.5px/1 "IBM Plex Sans", sans-serif;
  padding: 7px 11px; cursor: pointer;
  color: var(--st-ink); background: #fff;
  border: 1px solid var(--st-grid);
  transition: background .12s, color .12s, border-color .12s;
}
.ptab:hover { border-color: var(--st-bar-2); color: var(--st-bar); }
.ptab[aria-pressed="true"] {
  background: var(--st-bar); border-color: var(--st-bar); color: #fff;
}
.prod-note { margin: 0 0 8px !important; font-size: 11.5px; color: var(--st-ink-2); }
@media (max-width: 700px) {
  .ptab-tier { width: 100%; margin-bottom: 2px; }
  .ptab { font-size: 12px; padding: 6px 9px; }
}

/* Column proportions: the label column was eating the row and the comment
   column was too tight to hold a sentence. */
col.c-lbl  { width: 37%; }
col.c-unit { width: 4%;  }
col.c-val  { width: 20%; }
col.c-cmt  { width: 39%; }

/* Inputs left, calculated right — fits a wide viewport in one screen. */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.grid2 .col { min-width: 0; border-right: 1px solid var(--st-grid); }
.grid2 .col:last-child { border-right: 0; }
.grid2-foot { border-top: 1px solid var(--st-grid); }

/* Tab strip: tabs left, controls tucked top-right. */
.ptabs { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.ptab-rows { flex: 1 1 auto; min-width: 0; }
.ptab-controls { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding-top: 2px; }
.extras-toggle { margin: 0 !important; white-space: nowrap; }
.about-btn {
  font: 600 11.5px/1 "IBM Plex Sans", sans-serif;
  padding: 6px 12px; cursor: pointer; white-space: nowrap;
  color: var(--st-ink-2); background: #fff; border: 1px solid var(--st-grid);
}
.about-btn:hover { color: var(--st-bar); border-color: var(--st-bar-2); }
.about-btn[aria-expanded="true"] { background: var(--st-bar); border-color: var(--st-bar); color: #fff; }

/* Title bar carries the current product on the right. */
.bar-title { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.bar-sub { font: 600 11.5px/1 "IBM Plex Sans", sans-serif; letter-spacing: .04em; opacity: .82; }

.calc-head { padding: 14px 16px 4px; border-bottom: 1px solid var(--st-grid-2); }

@media (max-width: 1180px) {
  .grid2 { grid-template-columns: 1fr; }
  .grid2 .col { border-right: 0; border-bottom: 1px solid var(--st-grid); }
  .ptabs { flex-direction: column; }
  .ptab-controls { padding-top: 6px; }
}

.about-foot { margin: 12px 0 6px; border-top: 1px solid var(--st-grid); }
.about-foot .col { border-right: 1px solid var(--st-grid); }
.about-foot .col:last-child { border-right: 0; }

/* Which rows are actually judged against a KPI target. */
.kpi-chip, tr.kpi .lbl::before {
  content: "KPI";
  display: inline-block; margin-right: 6px; padding: 1px 4px;
  font: 700 8.5px/1.35 "IBM Plex Sans", sans-serif; letter-spacing: .07em;
  color: #fff; background: var(--st-bar-2); vertical-align: 1px;
}
.kpi-chip { margin: 0 2px; }

.kpi-panel { border-top: 1px solid var(--st-grid); }
.kpi-spacer { background: #fbfbfb; }
.kpi-list { display: grid; grid-template-columns: 1fr 1fr; }
.kpi-row {
  display: flex; align-items: baseline; gap: 8px;
  padding: 4px 9px; border: 1px solid var(--st-grid-2); border-top: 0; border-left: 0;
  font-size: 11.5px; min-width: 0;
}
.kpi-row .k-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpi-row .k-rule { flex: 0 0 auto; color: var(--st-ink-2); font-size: 10.5px; }
.kpi-row .k-val  { flex: 0 0 auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.kpi-row.pass { background: var(--st-green); color: var(--st-green-tx); }
.kpi-row.fail { background: var(--st-red);   color: var(--st-red-tx); }
.kpi-foot { margin: 0; padding: 5px 10px; font-size: 10px; line-height: 1.4; color: var(--st-ink-2); }
@media (max-width: 1180px) { .kpi-spacer { display: none; } }

.about-btn { text-decoration: none; display: inline-block; }
.bar-crumb { color: rgba(255,255,255,.72); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.4); }
.bar-crumb:hover { color: #fff; }

/* product-economics table */
table.pe th { background: #fafafa; font-weight: 700; font-size: 11px; text-align: right; }
table.pe th.lbl { text-align: left; }
table.pe .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.pe .num.strong { font-weight: 700; }
table.pe .num.ok  { background: var(--st-green); color: var(--st-green-tx); font-weight: 600; }
table.pe .num.bad { background: var(--st-red);   color: var(--st-red-tx);   font-weight: 600; }
.ln-tier {
  display: block; margin-top: 1px;
  font: 400 9.5px/1.2 "IBM Plex Sans", sans-serif;
  letter-spacing: .06em; text-transform: uppercase; color: var(--st-ink-2);
}