: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{
  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);
}
.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; }

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

.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);
}
.panel h2{
  font-size: 1.02rem;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 8px;
  margin-bottom: 14px;
}
.panel-heading-row{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 8px;
  margin-bottom: 14px;
}
.panel-heading-row h2{ border: none; padding: 0; margin: 0; }
.note{ font-size: 0.78rem; color: var(--ink-soft); font-family: var(--mono); }

.field-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px 18px;
}
.field-grid.three-col{ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
label{
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.78rem;
  color: var(--ink-soft);
  font-weight: 600;
}
.inline-label{
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
}
.inline-label input{ width: 200px; }

input, select{
  font-family: var(--mono);
  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;
}

.table-scroll{ overflow-x: auto; margin-bottom: 12px; }
table{
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
  min-width: 640px;
}
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, tfoot 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{
  width: 90px;
  padding: 4px 6px;
}
#totalsRow td{
  font-weight: 700;
  border-top: 2px solid var(--ink);
  border-bottom: none;
}
.status-pass{ color: var(--green); font-weight: 700; }
.status-fail{ color: var(--red); font-weight: 700; }
.status-na{ color: var(--ink-soft); }
.val-pass{ color: var(--green); }
.val-fail{ color: var(--red); }
.avg-col{ font-weight: 700; border-left: 2px solid var(--ink); border-right: 2px solid var(--ink); }

.ig-pan-row{ font-style: italic; border-top: 1px dashed var(--ink-soft, #8a8360); }
.ig-pan-row td:first-child{ font-weight: 700; font-style: normal; }
.ig-pan-row .val-pass, .ig-pan-row .val-fail{ font-weight: 700; }
.ig-pan-note{ margin-top: 4px; }

.grad-block{ margin-bottom: 26px; }
.grad-block:last-child{ margin-bottom: 0; }
.grad-block h3{
  font-size: 0.92rem;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  text-align: center;
}

.grad-col-head{
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.delete-grad{
  border: 1px solid var(--red);
  color: var(--red);
  background: #fffdf7;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  line-height: 1;
  font-size: 0.7rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.delete-grad:hover{ background: var(--red-soft); }

.warning{
  margin-top: 4px;
  margin-bottom: 12px;
  font-size: 0.82rem;
  color: var(--red);
  background: var(--red-soft);
  border: 1px solid var(--red);
  border-radius: 3px;
  padding: 8px 10px;
}
.empty-note{
  font-size: 0.85rem;
  color: var(--ink-soft);
  font-style: italic;
  padding: 10px 0;
}

.results-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 16px 0;
}
.result-card{
  background: #fffdf7;
  border: 1px solid var(--border);
  border-left: 4px solid var(--amber);
  border-radius: 3px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.result-label{
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
}
.result-value{
  font-family: var(--mono);
  font-size: 1.25rem;
  font-weight: 700;
}
.result-value.pass{ color: var(--green); }
.result-value.fail{ color: var(--red); }

.curve-wrap h3{
  font-size: 0.88rem;
  margin-bottom: 10px;
  color: var(--ink-soft);
}
svg{
  width: 100%;
  height: auto;
  background: #fffdf7;
  border: 1px solid var(--border);
  border-radius: 3px;
}
.curve-legend{
  display: flex;
  gap: 18px;
  margin-top: 8px;
  margin-bottom: 4px;
  font-size: 0.78rem;
  color: var(--ink-soft);
  flex-wrap: wrap;
}
.swatch{
  display: inline-block;
  width: 14px;
  height: 8px;
  margin-right: 5px;
  vertical-align: middle;
  border-radius: 1px;
}
.line-avg{ background: var(--ink); }
.line-trial{ background: var(--ink-soft); opacity: 0.5; }
.band-sample{ background: var(--amber-soft); border: 1px solid var(--amber); }
.line-upper{ background: #a4402c; }
.line-lower{ background: #2c6fa4; }
.line-mid{ background: #3f6d54; }

.chart-tooltip{
  position: fixed;
  z-index: 999;
  background: var(--ink);
  color: #f3f1e7;
  font-family: var(--mono);
  font-size: 0.76rem;
  padding: 4px 8px;
  border-radius: 3px;
  pointer-events: none;
  white-space: nowrap;
  transform: translate(-50%, -130%);
}

.actions-row{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 4px;
}
.btn{
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 3px;
  border: 1px solid var(--ink);
  background: #fffdf7;
  color: var(--ink);
  cursor: pointer;
}
.btn:hover{ background: var(--amber-soft); }
.btn.primary{
  background: var(--ink);
  color: #f3f1e7;
}
.btn.primary:hover{ background: #34455f; }
.btn.small{ padding: 6px 12px; font-size: 0.8rem; }
.btn.danger{ border-color: var(--red); color: var(--red); }
.btn.danger:hover{ background: var(--red-soft); }

#blendInputBody td{ vertical-align: middle; }
#blendInputBody input[type="number"]{ width: 80px; }
.stock-status-yes{ color: var(--green); }
.stock-status-no{ color: var(--red); }

/* --- report header panel: logos + project table --- */
.logo-row{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.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.75rem;
  color: var(--ink-soft);
  text-align: center;
  padding: 6px;
}
.logo-slot:hover{ border-color: var(--amber); }
.logo-slot img{ max-width: 100%; max-height: 100%; object-fit: contain; }
.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;
}

#projectTableBody input[type="text"]{ width: 100%; }
.row-delete-btn{
  border: 1px solid var(--red);
  color: var(--red);
  background: #fffdf7;
  border-radius: 3px;
  padding: 4px 10px;
  font-size: 0.75rem;
  cursor: pointer;
}
.row-delete-btn:hover{ background: var(--red-soft); }

.reference-panel{ background: #fffdf7; }
.reference-image{
  max-width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: 3px;
  display: block;
  margin-top: 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: 560px; }
  .logo-row{ grid-template-columns: repeat(2, 1fr); }
}

.mts-fmt-picker{ display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 10px; font-size: 0.82rem; }
.mts-fmt-picker-label{ font-weight: 700; color: var(--ink-soft); }
.mts-fmt-picker-opt{ display: flex; align-items: center; gap: 5px; font-weight: 400; cursor: pointer; }

/* ================== 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; }
  /* Chrome's print renderer can drop the collapsed border-collapse line at a
     table's outer right/bottom edge (a long-standing rendering quirk with
     hairline borders on a 100%-width table). Force that closing edge to draw
     via box-shadow, which isn't subject to the same rounding, on top of the
     ordinary border. */
  #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 .pr-blend-block table td, #printReport .pr-blend-block table th{ padding: 4px 8px; }
  #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; }

  /* 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 -- so the filler below always stretches to
     fill the real remaining space and the signature line lands at the same
     bottom position on every printed page, regardless of how much content
     sits above it on that page. */
  .pr-page{ break-after: page; display: flex; flex-direction: column; min-height: 272mm; }
  .pr-page:last-child{ break-after: auto; }
  .pr-page-filler{ flex: 1 1 auto; min-height: 6mm; }
  .pr-sig-row{ display: flex; justify-content: space-between; gap: 12px; text-align: center; font-size: 0.82rem; }
  .pr-sig-cell{ flex: 1; }
  .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-grading-block{ margin: 14px 0; break-inside: avoid; }
  .pr-blend-block{ margin: 14px 0; break-inside: avoid; }
  .pr-graph-block{ margin: 10px 0 18px; break-inside: avoid; }
  .pr-graph-block svg{ width: 100%; height: auto; border: 1px solid #000; }
  .pr-avg-col{ font-weight: 700; background: #f2f2f2; }
}

/* ---- Mix design extras: trial table inputs, chart grid, requirement note ---- */
.trial-table input[type="number"]{ width: 84px; text-align: center; }
.chart-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-top: 10px;
}
.chart-card{
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px 12px 6px;
}
.chart-card h4{ margin: 0 0 6px; font-size: 0.85rem; color: var(--ink-soft); text-align: center; }
.chart-card svg{ width: 100%; height: auto; display: block; }
.req-note{ font-size: 0.82rem; color: var(--ink-soft); margin-top: 6px; }

/* ================================================================
   Tabs (Mix Design / Design Report / Methodology) + 60:40 split,
   matching the pattern established in Concrete Mix Design.
   ================================================================ */
.header-inner{ max-width: 2400px; }
main{ max-width: 2400px; }

.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; }
.cmd-tab-panel{ padding-top: 18px; display: flex; flex-direction: column; gap: 18px; }

.cmd-split{
  display: grid;
  grid-template-columns: 60% 40%;
  gap: 16px;
  align-items: start;
}
.cmd-col{ min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.cmd-col-left, .cmd-col-right{
  height: calc(100vh - 90px);
  min-height: 760px;
  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-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 tables sit in a 40%-width column — shrink them to fit without a
   horizontal scrollbar, instead of relying on the wide, min-width table
   default used everywhere else in this app. */
.cmd-col-right table{ min-width: 0; font-size: 0.72rem; table-layout: fixed; }
.cmd-col-right th, .cmd-col-right td{ padding: 3px 4px; word-break: break-word; }
.cmd-col-right .table-scroll{ overflow-x: visible; }

@media (max-width: 980px){
  .cmd-split{ grid-template-columns: 1fr; }
  .cmd-col-left, .cmd-col-right{ height: auto; min-height: 0; overflow: visible; }
}

.materials-strip{ background: #fdf7e8; }

/* ---------------- Individual Gradation (per-fraction samples) ---------------- */
.ig-fraction{ margin-bottom: 22px; border: 1px solid var(--border); border-radius: 4px; padding: 12px 14px 16px; background: #fffdf7; }
.ig-fraction:last-of-type{ margin-bottom: 10px; }
.ig-fraction-head{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.ig-fraction-head input.ig-label-input{ font-weight: 700; font-size: 0.92rem; flex: 1; min-width: 160px; }
.ig-sample-block{ margin-bottom: 14px; border-top: 1px dashed var(--border); padding-top: 10px; }
.ig-sample-head{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; font-size: 0.82rem; font-weight: 700; color: var(--ink-soft); }
.ig-sample-head input[type="number"]{ width: 100px; }
.ig-summary-table{ margin-top: 6px; }
.ig-actions-row{ display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }

/* Screen 1 (left column) — compact % Passing summary cards, one per saved
   fraction. The heavy sieve-entry table itself lives in the calculator on
   Screen 2 (right column) now, so these stay short. */
.ig-summary-card{ margin-bottom: 14px; border: 1px solid var(--border); border-radius: 4px; padding: 10px 12px 12px; background: #fffdf7; }
.ig-summary-card:last-child{ margin-bottom: 4px; }
.ig-summary-head{ display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ig-summary-label{ font-weight: 700; font-size: 0.9rem; }

/* Screen 2 (right column) — the Individual Gradation calculator: free-text
   fraction name + a dropdown to reload a saved fraction, above the sieve
   entry table for whichever fraction is currently loaded. */
.ig-calc-panel{ margin-bottom: 18px; border-bottom: 2px solid var(--border); padding-bottom: 18px; }
.ig-calc-toolbar{ display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.ig-calc-toolbar label{ display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; font-weight: 600; flex: 1; min-width: 150px; }
.cmd-col-right .ig-sample-head input[type="number"]{ width: 72px; font-size: 0.75rem; }
.cmd-col-right table input[type="number"]{ width: 100%; font-size: 0.72rem; padding: 2px 3px; box-sizing: border-box; }

/* Small "x" delete button inline in a summary table's sample column header */
.ig-sample-del-btn{
  border: none; background: var(--red, #c0392b); color: #fff; border-radius: 50%;
  width: 16px; height: 16px; line-height: 14px; font-size: 12px; font-weight: 700;
  cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center;
}
.ig-sample-del-btn:hover{ opacity: 0.85; }

/* ---------------- Blending (combined gradation) ---------------- */
#blendInputTable input[type="number"]{ width: 90px; }
.grading-curve-wrap{ margin: 8px 0 16px; }
#blendGradCanvas, .labjmfGradCanvas{ 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; }

/* Narrower columns for tolerance/reference columns that don't need much
   width, per user request, in both the 0c Blending result table and each
   Lab-JMF result table. */
.col-narrow{ max-width: 90px; white-space: normal; }

/* ---------------- Lab-JMF (hot-bin aggregate physical verification) ---------------- */
.labjmf-table-card .ig-summary-head{ gap: 10px; }
.labjmfLabelInput{ flex: 1 1 auto; font-weight: 700; font-size: 0.9rem; border: 1px solid transparent; background: transparent; padding: 2px 4px; border-radius: 3px; }
.labjmfLabelInput:hover, .labjmfLabelInput:focus{ border-color: var(--border); background: #fff; }
.labjmf-samples .ig-sample-block:first-child{ border-top: none; padding-top: 0; }

/* ================================================================
   Phase 4: narrower tables, portrait-visibility fix, Marshall-table
   row merging, grading-curve hover tooltip, trial-summary table,
   remarks box, OBC bar chart.
   ================================================================ */

/* 0b Individual Gradation summary + 0d Lab-JMF sieve-entry/result tables —
   these don't need the app-wide 640px table min-width; shrink toward
   content instead of stretching the full panel width, per user request. */
#igFractionsContainer .table-scroll table,
.labjmf-samples .table-scroll table,
.labjmfResultTable{
  min-width: 460px;
}

/* 2a SG&WA — narrower Test 1/2/3 entry columns, per user request. */
.sgwaInput{ width: 58px; padding: 4px 4px; }

/* 2e Gse result table — few columns, doesn't need 640px either. */
#gseResultTable{ min-width: 420px; }

/* 2b/2c/2d/2f/2g — same narrow/few-column story as Gse above; these sit in
   the full-width left column (unlike the reference sidebar's tables, which
   already get min-width:0 from .cmd-col-right table), so they were still
   stretching to the app-wide 640px default. Per user request. */
#gb-panel .table-scroll table{ min-width: 320px; }
#theoBitumenResultTable{ min-width: 460px; }
#gmmContainer .table-scroll table{ min-width: 520px; }
#gsbResultTable, #gsaResultTable{ min-width: 420px; }

/* Grading-curve hover tooltip (0c Blending + 0d Lab-JMF Result charts) —
   shows the sieve size and the plotted % values at the nearest data point. */
.grading-curve-wrap{ position: relative; }
.grad-tooltip{
  position: absolute;
  z-index: 5;
  background: var(--ink);
  color: #f3f1e7;
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.4;
  padding: 5px 8px;
  border-radius: 3px;
  pointer-events: none;
  white-space: nowrap;
}
.grad-tooltip.hidden{ display: none; }

/* 3. Marshall table — merged (rowspan) group columns vertically centered;
   narrower Mould No. column, per user request. */
.trial-table td[rowspan]{ vertical-align: middle; }
.trial-table .mouldInput{ width: 56px; }
.trial-table .specHeightInput{ width: 64px; }

/* 5. Tensile Strength Ratio (TSR) table — transposed (rows = parameters,
   columns = specimens), grouped Dry (1-3) / Conditioned (4-6), with
   full-width section-divider rows between the weight/volume, absorption
   and tensile-strength blocks, matching the lab worksheet layout. */
.tsr-table th, .tsr-table td{ text-align: center; }
.tsr-table td.tsr-desc{ text-align: left; font-family: var(--sans, inherit); }
.tsr-table input[type="number"]{ width: 92px; text-align: center; }
.tsr-table tr.tsr-divider td{
  background: #fbf9f1;
  font-weight: 700;
  text-align: center;
  font-family: var(--sans, inherit);
}
.tsr-table td.tsr-group-val{ font-weight: 700; }
.tsr-notes{ margin: 10px 0 0; padding-left: 20px; }
.tsr-notes li{ margin-bottom: 4px; }

/* 6. "Selection of Optimum Bitumen Content" — narrow the trailing Minimum /
   Maximum permissible-limit columns; they only ever hold a short number. */
#obcSelectionTable th:nth-last-child(-n+2), #obcSelectionTable td:nth-last-child(-n+2){ width: 60px; }

/* 4. Trial mix graphs — property-curve summary table + remarks box */
#trialSummaryTable{ min-width: 720px; }
.charts-remark-box{ margin-top: 16px; }
.charts-remark-box textarea{
  width: 100%;
  min-height: 70px;
  font-family: var(--sans);
  font-size: 0.86rem;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: #fffdf7;
  color: var(--ink);
  resize: vertical;
  box-sizing: border-box;
}

/* 6. OBC bar chart (MS-2 range-overlap method) */
#obcBarChart{ width: 100%; max-width: 720px; height: auto; background: #fdfaf3; border: 1px solid var(--border); border-radius: 4px; margin-top: 10px; display: block; }
.obc-bar-note{ margin-top: 8px; }