:root{
  --paper: #efece1;
  --paper-line: #d8d2bd;
  --ink: #23324a;
  --ink-soft: #4c5c73;
  --amber: #b5811f;
  --amber-soft: #f1e3c2;
  --green: #3f6d54;
  --green-soft: #e2ead9;
  --red: #a4402c;
  --red-soft: #f1ddd4;
  --card-bg: #f7f5ec;
  --border: #c7bfa4;
  --mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --sans: -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

*{ box-sizing: border-box; }

body{
  margin: 0;
  background:
    linear-gradient(var(--paper-line) 1px, transparent 1px) 0 0/100% 28px,
    var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4{
  font-family: var(--sans);
  margin: 0;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.sheet-header{
  background: var(--ink);
  color: #f3f1e7;
  border-bottom: 4px solid var(--amber);
}
.header-inner{
  max-width: 2400px;
  margin: 0 auto;
  padding: 22px 20px 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}
.back-link{
  display: inline-block;
  color: var(--amber-soft);
  font-family: var(--mono);
  font-size: 0.78rem;
  text-decoration: none;
  margin-bottom: 8px;
  opacity: 0.9;
}
.back-link:hover{ text-decoration: underline; opacity: 1; }
.title-block h1{
  color: #f3f1e7;
  font-size: 1.55rem;
  font-weight: 700;
}
.subtitle{
  margin: 6px 0 0;
  color: #b9c2ce;
  font-size: 0.85rem;
  font-family: var(--mono);
}
.header-actions{ display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.install-hint{
  font-size: 0.75rem;
  color: var(--amber-soft);
  border: 1px dashed var(--amber);
  padding: 4px 8px;
  border-radius: 3px;
}
.project-banner{
  font-family: var(--mono);
  font-size: 0.8rem;
  color: #f3f1e7;
  display: flex;
  align-items: center;
  gap: 10px;
}
.project-banner .mts-proj-name{ font-weight: 700; }
.project-banner .mts-proj-switch{
  color: var(--amber-soft);
  text-decoration: none;
  border: 1px dashed var(--amber);
  padding: 3px 8px;
  border-radius: 3px;
  font-size: 0.74rem;
}
.project-banner .mts-proj-switch:hover{ text-decoration: underline; }
.hidden{ display: none !important; }

.btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--ink);
  background: #fffdf7;
  color: var(--ink);
  font: inherit;
  font-size: 0.82rem;
  padding: 7px 14px;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover{ background: var(--amber-soft); }
.btn.primary{ background: var(--ink); color: #f3f1e7; border-color: var(--ink); }
.btn.primary:hover{ background: #34496b; }
.btn.small{ padding: 4px 10px; font-size: 0.76rem; }

main{
  max-width: 2400px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ---------------- Tabs ---------------- */
.cmd-tabstrip{
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--ink);
}
.cmd-tabstrip button{
  border: 1px solid var(--border);
  border-bottom: none;
  background: #e7e2d0;
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.86rem;
  padding: 9px 18px;
  border-radius: 5px 5px 0 0;
  cursor: pointer;
}
.cmd-tabstrip button.cmd-tab-active{
  background: var(--card-bg);
  color: var(--ink);
  font-weight: 700;
  border-color: var(--border);
  position: relative;
  top: 2px;
}
.cmd-tab-panel.hidden{ display: none; }

/* ---------------- Panels / fields ---------------- */
.panel{
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 18px 20px 20px;
  box-shadow: 2px 2px 0 rgba(35,50,74,0.05);
  margin-bottom: 18px;
}
.panel:last-child{ margin-bottom: 0; }
.panel h2{
  font-size: 1.02rem;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 8px;
  margin-bottom: 14px;
}
.panel h3{
  font-size: 0.9rem;
  margin: 16px 0 10px;
  color: var(--ink-soft);
}
.panel h4{
  font-size: 0.86rem;
  margin: 14px 0 8px;
}
.note{ font-size: 0.78rem; color: var(--ink-soft); font-family: var(--mono); }
.materials-strip{ background: #fdf7e8; }

.field-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px 18px;
  margin-bottom: 10px;
}
.field-grid.three-col{ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.field-grid label{
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.78rem;
  color: var(--ink-soft);
  font-weight: 600;
}
.field-grid label.checkbox-label{
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.field-grid input[type="checkbox"]{ width: 16px; height: 16px; }
input, select, button{ font-family: inherit; }
input[type="text"], input[type="number"], input[type="date"], select{
  font-size: 0.92rem;
  padding: 7px 8px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: #fffdf7;
  color: var(--ink);
}
input:focus, select:focus, button:focus-visible{
  outline: 2px solid var(--amber);
  outline-offset: 1px;
}
/* A short numeric value (a ratio, a roundup figure) doesn't need to stretch
   to the full width of its grid column — cap it to a sensible input size. */
.narrow-input{ max-width: 130px; }

.field-grid.four-col{
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 8px 14px;
  align-items: center;
  margin-bottom: 10px;
}
.field-grid.four-col label{ font-size: 0.8rem; color: var(--ink-soft); font-weight: 600; }
.field-grid.four-col input{ width: 100%; }
.field-grid.four-col .col-heading{
  text-align: center;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  font-weight: 700;
}

.stip-readout{
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.78rem;
  color: var(--ink-soft);
  font-weight: 600;
}
.stip-readout-value{
  font-family: var(--mono);
  font-size: 0.92rem;
  padding: 7px 8px;
  border: 1px dashed var(--border);
  border-radius: 3px;
  background: #f3f0e4;
  color: var(--ink);
}

/* ---------------- Split layout: Mix Design (60) / Reference (40) ---------------- */
.cmd-split{
  display: grid;
  grid-template-columns: 60% 40%;
  gap: 16px;
  align-items: start;
}
.cmd-col{
  min-width: 0;
}
.cmd-col-left, .cmd-col-right{
  height: calc(100vh - 130px);
  min-height: 720px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 6px;
}
.cmd-col-right{
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 16px 18px 20px;
  box-shadow: 2px 2px 0 rgba(35,50,74,0.05);
}
.ref-panel-heading{
  position: sticky;
  top: 0;
  background: var(--card-bg);
  padding-bottom: 8px;
  margin-bottom: 6px;
  border-bottom: 2px solid var(--ink);
}
.ref-panel-heading h2{ font-size: 1.02rem; }
.ref-block{ margin-bottom: 22px; }
.ref-block:last-child{ margin-bottom: 4px; }
.ref-block h3{
  font-size: 0.86rem;
  margin: 0 0 8px;
  color: var(--ink);
  font-weight: 700;
}
.ref-block p{ font-size: 0.84rem; margin: 6px 0; }
.reference-image{ max-width: 100%; border: 1px solid #ddd0ad; border-radius: 6px; margin: 6px 0; }
.fig-curve-legend{ font-size: 0.82rem; line-height: 1.5; margin: 8px 0; }

.annex-h{ text-transform: uppercase; }

@media (max-width: 980px){
  .cmd-split{ grid-template-columns: 1fr; }
  .cmd-col-left, .cmd-col-right{ height: 80vh; min-height: 560px; }
}

/* ---------------- Tables ---------------- */
.table-scroll{ overflow-x: auto; margin-bottom: 12px; }
table{
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  min-width: 480px;
}
thead th{
  text-align: center;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  border: 1px solid var(--border);
  border-bottom: 2px solid var(--ink);
  padding: 5px 6px;
  background: #fbf9f1;
}
tbody td{
  border: 1px solid var(--border);
  padding: 4px 6px;
  font-family: var(--mono);
  text-align: center;
}
tbody tr:hover{ background: rgba(181,129,31,0.07); }
tbody input[type="checkbox"]{ width: 15px; height: 15px; }
tbody input[type="number"]{ width: 80px; padding: 3px 5px; }
/* A-13 cube test entry cells (length/width/height/weight/load) — short
   values, don't need the default 80px table-input width. */
tbody input.cube-num-input{ width: 50px; }
/* Load can run to 4 digits (plus a decimal) — wider than the other cube
   entry cells so the full number stays visible while typing. */
tbody input.cube-load-input{ width: 68px; }
/* Cube-test entry fields: hide the browser's up/down spinner arrows — with
   5 short numeric boxes per row they add clutter without adding value. */
input.cube-num-input::-webkit-outer-spin-button,
input.cube-num-input::-webkit-inner-spin-button,
input.cube-load-input::-webkit-outer-spin-button,
input.cube-load-input::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}
input.cube-num-input,
input.cube-load-input{
  -moz-appearance: textfield;
}
.cube-age-block h4{ margin: 14px 0 6px; font-size: 0.88rem; }
.cube-age-block:first-child h4{ margin-top: 4px; }
.cube-del-btn{
  width: 22px; height: 22px; line-height: 1; border-radius: 50%;
  border: 1px solid var(--red); background: none; color: var(--red);
  font-size: 0.9rem; cursor: pointer; padding: 0;
}
.cube-del-btn:hover{ background: var(--red); color: #fff; }

.val-pass{ color: var(--green); }
.val-fail{ color: var(--red); }
.status-pass{ color: var(--green); font-weight: 700; }
.status-fail{ color: var(--red); font-weight: 700; }
.avg-col{ font-weight: 700; border-left: 2px solid var(--ink); border-right: 2px solid var(--ink); }
.stock-status-yes{ color: var(--green); }
.stock-status-no{ color: var(--red); }
.zone-fit-row td{ font-weight: 700; background: #f3f0e4; }
.empty-note{ font-size: 0.85rem; color: var(--ink-soft); font-style: italic; padding: 10px 4px; }
.grad-block{ margin-bottom: 18px; }
.grad-block:last-child{ margin-bottom: 4px; }

/* ---------------- Design Report tab — front page builder ---------------- */
.drp-wrap{ max-width: 900px; margin: 0 auto; }
.drp-page{
  background: #fff;
  border: 1px solid var(--border);
  max-width: 210mm;
  margin: 0 auto;
  padding: 10mm 12mm 16mm;
}
.drp-gap{ width: 100%; }
.drp-gap-2{ height: 2cm; }
.drp-gap-3{ height: 3cm; }
.drp-gap-7{ height: 7cm; }

.drp-logo-row{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.drp-logo-slot{
  position: relative; border: 1px dashed var(--border); border-radius: 4px; background: #fffdf7;
  aspect-ratio: 2 / 1; display: flex; align-items: center; justify-content: center; cursor: pointer;
  overflow: hidden; font-size: 0.72rem; color: var(--ink-soft); text-align: center; padding: 6px;
}
.drp-logo-slot:hover{ border-color: var(--amber); }
.drp-logo-slot img{ max-width: 100%; max-height: 100%; object-fit: contain; }
.drp-logo-remove{
  position: absolute; top: 3px; right: 3px; border: 1px solid var(--red); color: var(--red);
  background: #fffdf7; border-radius: 50%; width: 18px; height: 18px; font-size: 0.7rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}

.drp-rows-table{ min-width: 0; }
.drp-rows-table td{ text-align: left; font-family: var(--sans); }
.drp-rows-table td input[type="text"]{ width: 100%; }
.drp-del-col{ width: 34px; }
.drp-rows-table td:last-child{ text-align: center; }

.drp-designbox{ border: 1.5pt solid var(--ink); padding: 16px 14px; text-align: center; }
.drp-designbox-title{ font-size: 1.05rem; font-weight: 700; margin: 0 0 8px; }
.drp-designbox-cement{ font-size: 0.86rem; text-decoration: underline; margin: 0 0 10px; }
.drp-designbox-blank{ margin: 0 0 10px; min-height: 1em; }
.drp-designbox-slump{ font-size: 1rem; font-weight: 700; margin: 0; }
.drp-designbox-slump input{ width: 70px; text-align: center; font-weight: 700; }

.drp-sig-row{ display: flex; justify-content: space-between; gap: 12px; text-align: center; font-size: 0.82rem; font-weight: 700; }
.drp-sig-cell{ flex: 1; }

.drp-page2-title-row{
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-weight: 700; font-size: 1rem; text-transform: uppercase; margin: 4px 0 18px; text-align: center;
}
.drp-page3-title{ font-weight: 700; font-size: 1rem; text-transform: uppercase; text-align: center; margin: 4px 0 14px; }
.drp-mixcalc-intro{ text-align: center; font-size: 0.88rem; margin: 0 0 18px; }
.drp-table-heading{ font-size: 0.95rem; font-weight: 700; text-transform: uppercase; text-align: center; margin: 0 0 8px; }
.drp-sd-table, .drp-prop-table, .drp-stip-table, .drp-rawmat-table{ min-width: 0; }
.drp-sd-table td, .drp-prop-table td, .drp-stip-table td, .drp-rawmat-table td{ text-align: left; font-family: var(--sans); }
.drp-sd-table th, .drp-prop-table th{ font-size: 0.78rem; }
.drp-sd-table td input[type="text"], .drp-prop-table td input[type="text"], .drp-stip-table td input[type="text"], .drp-rawmat-table td input[type="text"]{ width: 100%; }
.drp-sr-col{ width: 40px; }
.drp-sd-table td:first-child, .drp-prop-table td:first-child, .drp-stip-table td:first-child, .drp-rawmat-table td:first-child{ text-align: center; }
.drp-sd-table td:last-child, .drp-prop-table td:last-child, .drp-stip-table td:last-child, .drp-rawmat-table td:last-child{ text-align: center; }
.drp-stip-table{ margin-top: 4px; }
.drp-rawmat-table{ margin-top: 4px; }
.drp-rawmat-section td{ font-weight: 700; padding-top: 14px; }
.drp-rawmat-table tr.drp-rawmat-section:first-child td{ padding-top: 4px; }
/* Section header cells span the full row (colspan=3) and would otherwise be
   caught by the td:first-child centering rule above (a section row's <td>
   IS that row's first child) — force them left-aligned instead. */
.drp-rawmat-table tr.drp-rawmat-section td:first-child{ text-align: left; }
.drp-rawmat-section td input.rawMatSection{
  width: 100%; border: none; background: transparent; font-weight: 700; font-family: var(--sans);
  font-size: inherit; color: inherit; padding: 2px 0;
}
.drp-rawmat-section td input.rawMatSection:focus{ outline: 1px solid var(--amber); background: #fffdf7; }
.drp-rawmat-btn-row{ display: flex; gap: 8px; margin-top: 8px; }

/* Page 9 -- Summary of Ingredients (fixed rows, Brand/Source free text) */
.drp-ing-table{ min-width: 0; max-width: 420px; margin: 0 auto; }
.drp-ing-table td, .drp-ing-table th{ font-family: var(--sans); }
.drp-ing-table td:first-child{ text-align: left; font-weight: 700; }
.drp-ing-table td:nth-child(2){ text-align: center; font-family: var(--mono); }
.drp-ing-table td:last-child{ text-align: left; }
.drp-ing-table td input[type="text"]{ width: 100%; }
.drp-ing-subhead{ display: block; font-size: 0.68rem; font-weight: 400; text-transform: none; }

/* Page 10 -- Conclusion (generated text, like pages 5-7) */
.drp-conclusion-text{ font-size: 0.85rem; line-height: 1.55; margin: 0 0 12px; text-align: justify; }
.drp-conclusion-list{ font-size: 0.85rem; line-height: 1.6; margin: 0 0 14px; padding-left: 22px; }
.drp-conclusion-list li{ margin-bottom: 4px; }
.drp-conclusion-block{ margin-bottom: 14px; }
.drp-conclusion-block:last-child{ margin-bottom: 0; }
.drp-conclusion-heading{ font-weight: 700; font-size: 0.86rem; margin: 0 0 4px; }

@media print{
  /* Page 2 onward: same repeating logo+project header as page 1 (read-only
     here — nothing to add/delete in print), with the signature line sitting
     2cm above the bottom of the page rather than right under the header. */
  /* min-height matches the true printable area (A4's 297mm minus the 12mm
     top+bottom @page margin = 273mm), less ~1mm of safety margin against
     browser print-layout rounding -- not the old 250mm, which understated it
     by ~23mm and let the signature land at a different height on every page
     depending on how much content sat above it. With this matching the real
     page height, the filler below always stretches to fill the actual
     remaining space, so the signature lands at the same bottom position on
     every page regardless of content length. */
  .pr-page.drp-print-page2{ display: flex; flex-direction: column; min-height: 272mm; }
  /* Always reserve at least this much blank space directly above the
     signature line, whatever the page's own content amounts to — a min-height
     (not just flex-grow) so a short page still gets a real gap and a nearly-
     full page still keeps a visible one, rather than the signature line
     landing flush against the last line of content. */
  .drp-page2-filler{ flex: 1 1 auto; min-height: 6mm; }

  /* Page 1 only: no divider line under the logos (page 2 onward keeps it,
     since there the logo row sits directly above the repeating project
     table with no gap in between and the line reads as a header rule). */
  .drp-page1-logo-row{ border-bottom: none; margin-bottom: 0; }

  /* Page 9: center the ingredient table in the space between the header and
     the signature block, instead of pinning it to the top like every other
     page's content -- this IS the page's filler (no separate .drp-page2-filler
     needed alongside it). */
  .drp-page9-center{ flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .drp-page9-center .drp-ing-table{ width: auto; min-width: 120mm; max-width: 165mm; }
}

/* ---------------- Live sieve-analysis entry (reference panel) ---------------- */
.grad-entry-block{ margin-bottom: 10px; }
.grad-sample-wt-row{ display: block; font-weight: 700; margin-bottom: 8px; font-size: 0.86rem; }
.grad-sample-wt-row input{ width: 100px; margin-left: 6px; font-weight: 400; }
.grad-entry-block h4{ font-size: 0.86rem; margin: 0 0 8px; }
.gradWtInput{ width: 84px; }
.grad-entry-actions{ display: flex; align-items: center; gap: 12px; margin: 6px 0 16px; flex-wrap: wrap; }
.grad-col-head{ display: inline-flex; align-items: center; gap: 5px; }
/* Compact variant — used for fine-aggregate sieve tables, which carry an
   extra "Zone I".."Zone IV" limit column each and so need to stay narrow. */
.table-scroll.compact table{ font-size: 0.68rem; min-width: 560px; }
.table-scroll.compact th, .table-scroll.compact td{ padding: 3px 4px; }

/* ---------------- Grading curve (log-scale) ---------------- */
.grading-curve-wrap{ margin: 8px 0 16px; }
#allinGradCanvas{ width: 100%; max-width: 640px; height: auto; background: #fdfaf3; border: 1px solid var(--border); border-radius: 4px; }
.grading-curve-legend{ display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; font-size: 0.78rem; color: var(--ink-soft); }
.legend-item{ display: inline-flex; align-items: center; gap: 5px; }
.legend-swatch{ display: inline-block; width: 14px; height: 3px; border-radius: 2px; }
.delete-grad{
  border: 1px solid var(--red);
  background: var(--red-soft);
  color: var(--red);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  border-radius: 3px;
  padding: 1px 6px;
  font-size: 0.85rem;
}
.delete-grad:hover{ background: var(--red); color: #fff; }

/* ---------------- Steps / results ---------------- */
.step-block{ margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px dashed var(--border); }
.step-block:last-child{ border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.step-block h3{ margin: 0 0 8px; font-size: 0.9rem; color: var(--ink); }
.step-row{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
  font-size: 0.85rem;
  flex-wrap: wrap;
}
.step-label{ color: #55524a; }
.step-value{ font-family: var(--mono); text-align: right; }
.step-formula{ font-size: 0.78rem; color: var(--ink-soft); font-family: var(--mono); margin: 4px 0 8px; }

/* Page 7's worked-calculation table (design report) — a stacked-fraction
   layout for the plain Mass/Specific-gravity items, e.g.
     Mass of cement
     ----------------------------  x  1/1000
     Specific gravity of cement
   matching how a typical printed trial-mix worksheet lays these out. */
.mc-table{ width: 100%; border-collapse: collapse; margin-top: 6px; }
.mc-table td{ border: 1px solid var(--border); padding: 6px 10px; vertical-align: top; font-size: 0.85rem; }
.mc-item{ width: 30%; font-weight: 700; text-align: left; }
.mc-item-note{ display: block; font-size: 0.75rem; font-weight: 400; color: var(--ink-soft); margin-top: 2px; }
.mc-calc{ text-align: left; }
/* Plain block, not flex — several rows mix fractions with a literal <br> for
   a second line (e.g. the all-in-aggregate / CA / FA mass rows), and a flex
   container ignores that forced break, bunching the wrapped text sideways
   instead of onto its own line. Normal block flow lets <br> behave as
   expected while .mc-frac (below) still lays out inline like any other
   inline-flex chunk of text. */
.mc-eq{ margin: 3px 0; line-height: 1.4; }
.mc-eq.mc-result{ margin-top: 5px; }
/* Deliberately NOT flexbox: this sits inside a table cell that's itself
   inside the page's own flex column (.pr-page.drp-print-page2), and nested
   flex containers fragment unreliably under print pagination (Chromium can
   mis-measure the page and reserve a spurious trailing blank page). Plain
   inline-block with block-level num/den children gives the same stacked
   look without that risk. */
.mc-frac{ display: inline-block; vertical-align: middle; margin: 0 5px; text-align: center; font-family: var(--mono); font-size: 0.82rem; line-height: 1.35; }
.mc-frac-num{ display: block; padding: 0 4px 2px; border-bottom: 1.5px solid currentColor; }
.mc-frac-den{ display: block; padding: 2px 4px 0; }

/* A-10's trial-quantity list: short label/value pairs (e.g. "Cement" / "300
   kg/m3") look stranded when stretched to the panel's full width by
   .step-row's space-between — keep the value close after its label instead,
   like a compact two-column worksheet list. */
.a10-list .step-row{ justify-content: flex-start; gap: 18px; }
.a10-list .step-label{ min-width: 230px; }

.warning{
  margin-top: 4px;
  margin-bottom: 10px;
  font-size: 0.82rem;
  color: var(--red);
  background: var(--red-soft);
  border: 1px solid var(--red);
  border-radius: 3px;
  padding: 8px 10px;
}

.results-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.result-card{
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid #ddd0ad;
  border-radius: 8px;
  background: #fdfaf3;
}
.result-label{ font-size: 0.8rem; color: #7a7568; text-transform: uppercase; letter-spacing: 0.02em; }
.result-value{ font-size: 1.3rem; font-weight: 700; color: #23324A; }

.summary-actions-row{ display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }

.mts-formula{ font-family: var(--mono); font-size: 0.86rem; background: #fdfaf3; border: 1px solid var(--border); border-radius: 4px; padding: 10px 12px; }
.mts-source-note{ font-size: 0.74rem; color: var(--ink-soft); font-family: var(--mono); margin-top: 14px; }

.method-wrap{ max-width: 940px; margin: 0 auto; }
.method-wrap ol, .method-wrap ul{ padding-left: 22px; }
.method-wrap li{ margin-bottom: 8px; }

.sheet-footer{
  max-width: 2400px;
  margin: 0 auto;
  padding: 10px 20px 40px;
  font-size: 0.76rem;
  color: var(--ink-soft);
}

@media (max-width: 560px){
  table{ min-width: 480px; }
}

/* ================== PRINT REPORT ================== */

#printReport{ display: none; }

@page{ size: A4; margin: 12mm; }

@media print{
  body{ background: #fff; margin: 0; }
  #appRoot{ display: none !important; }
  /* mtsRenderTopBar() inserts the site-wide top nav bar directly into
     <body>, before #appRoot, so hiding #appRoot alone leaves it printed
     above every report. */
  .mts-topbar{ display: none !important; }
  #printReport{
    display: block;
    color: #000;
    font-family: var(--sans);
    font-size: 11px;
  }
  #printReport table{ width: 100%; border-collapse: collapse; font-size: 10.5px; }
  #printReport th, #printReport td{ border: 0.75pt solid #000; padding: 4px 7px; text-align: center; }
  #printReport .drp-rawmat-section td{ text-align: left; font-weight: 700; }
  /* Pages 5/6's readout boxes (assumed w/c, adopted water/cement figures,
     etc.) look right on-screen as dashed, shaded boxes but read as unwanted
     grid lines around plain numbers once printed — flatten them to plain
     text here, matching how every other figure on the printed report reads. */
  #printReport .stip-readout-value{ border: none; background: none; padding: 1px 0 3px; }
  #printReport .stip-readout{ gap: 2px; }
  /* Page 7's worked-calculation table: force left alignment (the generic
     td rule above centers everything) and give the item column room. */
  #printReport .mc-table td{ text-align: left; vertical-align: top; }
  #printReport .mc-item{ width: 28%; }
  /* Page 9's ingredient table: Ingredient left, Wt centered (already the
     generic default), Brand/Source left. */
  #printReport .drp-ing-table td:first-child{ text-align: left; font-weight: 700; }
  #printReport .drp-ing-table td:last-child{ text-align: left; }
  #printReport th:last-child, #printReport td:last-child{ box-shadow: inset -0.75pt 0 0 #000; }
  #printReport tr:last-child > th, #printReport tr:last-child > td{ box-shadow: inset 0 -0.75pt 0 #000; }
  #printReport tr:last-child > th:last-child, #printReport tr:last-child > td:last-child{ box-shadow: inset -0.75pt -0.75pt 0 #000; }
  #printReport h3{ font-size: 12px; margin: 4px 0 6px; text-align: center; text-transform: uppercase; }
  #printReport h4{ font-size: 10.5px; margin: 0 0 8px; text-align: center; font-weight: 500; }
  #printReport p.note{ font-size: 8.5px; }

  .pr-page{ break-after: page; }
  .pr-page:last-child{ break-after: auto; }
  .pr-header-block{ margin-bottom: 10px; }
  .pr-logo-row{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    border-bottom: 2px solid #000;
    padding-bottom: 8px;
    margin-bottom: 8px;
  }
  .pr-logo-cell{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 46px;
  }
  .pr-logo-cell img{ max-height: 46px; max-width: 100%; object-fit: contain; }
  .pr-project-table td:first-child{ width: 35%; font-weight: 700; }
  .pr-project-table td:last-child{ width: 65%; }
  .pr-sample-table{ margin: 10px 0; }
  .pr-sample-table td{ width: 25%; }
  .pr-sample-table .pr-sample-label{ font-weight: 700; background: #f2f2f2; width: auto; }

  .pr-designbox{ border: 1.5pt solid #000; }
  .pr-designbox-cell{ text-align: center; padding: 14px 10px !important; }
  .pr-designbox-title{ font-size: 13px; font-weight: 700; margin: 0 0 6px; }
  .pr-designbox-grade{ font-size: 15px; font-weight: 700; margin: 0 0 8px; }
  .pr-designbox-cement{ font-size: 10.5px; text-decoration: underline; margin: 0 0 14px; }
  .pr-designbox-slump{ font-size: 13px; font-weight: 700; margin: 0; }
}

/* Save & report: full width under the two columns, Design Report inside */
.cmd-save-report{ margin-top: 16px; }
.cmd-save-report .cmd-drp-head{ margin: 22px 0 10px; padding-top: 14px; border-top: 2px solid var(--ink, #23324a); font-size: 1.02rem; }
.cmd-save-report .drp-wrap > .panel{ box-shadow: none; }

/* right-hand column: open / close blocks (Coarse / Fine Aggregate, references) */
details.ref-fold{ margin-bottom: 10px; border: 1px solid #d9dfe0; border-radius: 4px; padding: 8px 12px; background: #fffdf7; }
details.ref-fold:last-child{ margin-bottom: 4px; }
details.ref-fold > summary{ cursor: pointer; font-size: 0.86rem; font-weight: 700; color: var(--ink); padding: 3px 0; list-style-position: inside; }
details.ref-fold > summary:hover{ opacity: 0.8; }
details.ref-fold[open] > summary{ margin-bottom: 8px; border-bottom: 1px solid #d9dfe0; padding-bottom: 6px; }
/* Design Report pages side by side: two per row where the screen is wide
   enough for two full-size (860-900 px) pages, otherwise one per row as
   before. The closing note and Print button run across the full width. */
.cmd-save-report .drp-wrap{
  max-width: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(860px, 100%), 900px));
  justify-content: center;
  align-items: start;
  gap: 16px;
}
.cmd-save-report .drp-wrap > .panel{ margin: 0; min-width: 0; }
.cmd-save-report .drp-wrap > :not(.panel){ grid-column: 1 / -1; }