/* MODULE 4: shared accessible calculator presentation for the nine secondary
 * tools. Visual enhancement only; all computations remain in existing JS.
 * Scoped to .fpt-tool.fpt-m4, never .fpt-depth-tool. */
.fpt-tool.fpt-m4 {
 --m4-pine:#214435; --m4-forest:#143125; --m4-steel:#cbd7d1;
 --m4-cedar:#b17b4a; --m4-muted:#5b6e63;
 font-family:Inter,system-ui,sans-serif;
 width:100%;max-width:none; margin:0 0 34px;color:#21352b;
}
.fpt-tool.fpt-m4 *, .fpt-tool.fpt-m4 *::before, .fpt-tool.fpt-m4 *::after {box-sizing:border-box;}
.fpt-m4 [hidden] {display:none!important;}
.fpt-m4-heading {display:flex;gap:16px;align-items:flex-start;padding:7px 0 17px;margin:0 0 16px;border-bottom:1px solid #cfdad2;position:relative;}
.fpt-m4-heading::after {content:"";width:91px;height:4px;position:absolute;bottom:-2px;left:0;border-radius:2px;background:linear-gradient(90deg,#9b6338,#e1aa74);}
.fpt-m4-index {flex:0 0 50px;width:50px;height:56px;border-radius:8px;background:var(--m4-forest);color:#efbf87;box-shadow:4px 4px 0 #ad7b50;display:flex;flex-direction:column;align-items:center;justify-content:center;font:bold 23px/1 'IBM Plex Mono',monospace;}
.fpt-m4-heading-body {min-width:0;flex:1;}
.fpt-m4-eyebrow {font-size:10px;letter-spacing:.16em;color:#91633f;font-weight:800;display:block;margin:3px 0 5px;}
.fpt-tool.fpt-m4 .fpt-m4-heading :is(h1,h2) {font:750 clamp(22px,3vw,31px)/1.15 Sora,Inter,sans-serif;letter-spacing:-.045em;margin:0 0 7px;color:#183c2b;}
.fpt-m4-heading-copy {font-size:13px;line-height:1.5;color:#5a6d64;margin:0;}
.fpt-m4-workspace {display:grid;grid-template-columns:minmax(0,1.14fr) minmax(315px,.86fr);align-items:start;gap:18px;}
.fpt-m4-entry,.fpt-m4-output {background:#fff;border:1px solid var(--m4-steel);border-radius:12px;min-width:0;overflow:hidden;box-shadow:0 8px 26px rgba(20,45,32,.07);}
.fpt-m4-panel-title {padding:15px 17px;display:flex;align-items:center;gap:11px;background:linear-gradient(110deg,#f2f6f2,#eaf0eb);border-bottom:1px solid #d6e0d8;}
.fpt-m4-panel-icon {width:40px;height:40px;display:grid;place-items:center;flex:0 0 40px;border-radius:8px;background:#dce8de;color:#2e583e;font-size:22px;line-height:1;}
.fpt-tool.fpt-m4 .fpt-m4-panel-title :is(h2,h3) {font:750 15px/1.2 Sora,Inter,sans-serif;letter-spacing:-.025em;color:#1c432f;margin:0 0 4px;}
.fpt-m4-panel-title p {font-size:11px;line-height:1.45;color:#607269;margin:0;}
.fpt-m4-panel-title--dark {background:linear-gradient(115deg,#19372b,#315943);border-bottom:3px solid #b98552;}
.fpt-m4-panel-title--dark .fpt-m4-panel-icon {background:rgba(255,255,255,.12);color:#f7cb91;}
.fpt-tool.fpt-m4 .fpt-m4-panel-title--dark :is(h2,h3) {color:#fff;}
.fpt-m4-panel-title--dark p {color:#d8e5db;}
.fpt-tool.fpt-m4 form {border:0;border-radius:0;background:white;padding:16px 17px;}
.fpt-m4-group {padding:0;border:0;margin:0 0 15px;min-width:0;}
.fpt-tool.fpt-m4 .fpt-m4-group-label {display:block;width:100%;margin:0 0 4px;color:#244d39;font:bold 12px/1.4 Sora,Inter,sans-serif;letter-spacing:-.012em;}
.fpt-m4-group-subtitle {color:#748279;font-size:10.5px;line-height:1.4;margin:0 0 10px;}
.fpt-m4-fields {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px;row-gap:13px;align-items:start;}
.fpt-tool.fpt-m4 .fpt-field {min-width:0;margin:0;}
.fpt-tool.fpt-m4 .fpt-field > label {font-size:12px;line-height:1.42;font-weight:700;min-height:0;margin:0 0 5px;color:#253d30;}
.fpt-tool.fpt-m4 input:not([type=checkbox]),.fpt-tool.fpt-m4 select {min-height:42px;width:100%;min-width:0;border:1px solid #bfcec4;border-radius:7px;padding:8px 10px;background:#fcfefc;color:#1d392b;font:500 13px/1.35 Inter,system-ui,sans-serif;box-shadow:0 1px 2px rgba(29,57,41,.035) inset;}
.fpt-tool.fpt-m4 input[type=checkbox] {accent-color:#2d6849;min-height:17px;min-width:17px;width:auto;}
.fpt-tool.fpt-m4 .fpt-hint {font-size:10.5px;line-height:1.38;color:#697c70;margin:5px 0 0;}
.fpt-m4 .fpt-m4-details {margin:0 0 12px;background:#f7f9f6;border:1px solid #d8e4dc;border-radius:9px;overflow:hidden;}
.fpt-m4 .fpt-m4-details-summary {display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;padding:12px;min-height:54px;}
.fpt-m4-details-summary::-webkit-details-marker {display:none;}
.fpt-m4-fold-icon {display:grid;place-items:center;width:29px;height:29px;border-radius:7px;background:#e1ece3;color:#2b573e;font:700 20px/1 monospace;flex:0 0 29px;}
.fpt-m4 .fpt-m4-details[open] .fpt-m4-fold-icon {transform:rotate(45deg);}
.fpt-m4-summary-words {display:flex;flex-direction:column;gap:1px;}
.fpt-m4-summary-words strong {color:#2d5340;font-size:12px;}
.fpt-m4-summary-words small {font-size:10px;color:#667b70;line-height:1.4;}
.fpt-m4 .fpt-m4-details > .fpt-m4-fields {padding:13px;border-top:1px solid #d8e3dc;background:#fff;}
.fpt-m4-cost-rows {display:grid;grid-template-columns:minmax(0,1fr);gap:10px;}
.fpt-m4 .fpt-cost-row {border:1px solid #dbe3dc;padding:12px;border-radius:9px;min-width:0;background:#fafcf9;margin:0;}
.fpt-m4 .fpt-cost-row legend {color:#315642;font-size:12px;font-weight:750;padding:0 5px;}
.fpt-m4 .fpt-cost-row .fpt-field {margin:0;}
.fpt-m4 .fpt-cost-row {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.fpt-m4 .fpt-m4-cost-more > .fpt-m4-cost-rows {padding:12px;border-top:1px solid #d8e3dc;background:white;}
.fpt-m4 .fpt-m4-explainer {padding:0;}
.fpt-m4 .fpt-m4-explainer > summary {cursor:pointer;padding:12px 14px;color:#315a42;font-size:12px;font-weight:750;}
.fpt-m4 .fpt-m4-explainer .fpt-hole-diameter {margin:0;padding:12px;border-top:1px solid #d8e3dc;}
.fpt-tool.fpt-m4 .fpt-actions {display:grid;grid-template-columns:minmax(0,1fr) 88px;gap:9px;margin:13px 0 0;}
.fpt-tool.fpt-m4 .fpt-actions button {display:inline-flex;justify-content:center;align-items:center;min-height:45px;border-radius:8px;background:#24513a;color:#fff;border:1px solid #1c402f;padding:10px;font-size:12px;font-weight:750;box-shadow:0 3px 0 rgba(32,63,41,.2);}
.fpt-tool.fpt-m4 .fpt-actions button:hover {background:#346a4d;}
.fpt-tool.fpt-m4 .fpt-actions button[type=button] {background:#f4f7f4;color:#2f503d;border:1px solid #c4d2c7;box-shadow:none;}
.fpt-tool.fpt-m4 :is(button,input,select,summary):focus-visible {outline:3px solid #2673aa;outline-offset:3px;}
.fpt-m4-output {position:sticky;top:15px;}
.fpt-m4-empty {min-height:155px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:25px 22px;text-align:center;color:#5c6f62;}
.fpt-m4-empty-symbol {font-size:34px;color:#9c8167;line-height:1.2;margin-bottom:10px;}
.fpt-m4-empty strong {font:700 13px/1.4 Sora,Inter,sans-serif;color:#2c543c;}
.fpt-m4-empty p {font-size:12px;line-height:1.5;max-width:240px;margin:6px 0 0;}
.fpt-tool.fpt-m4 .fpt-result {margin:13px;padding:14px 13px;border:1px solid #c5d9cc;border-left:4px solid #b68453;border-radius:9px;background:#f7fbf8;color:#32483d;font-size:12px;line-height:1.6;overflow-wrap:anywhere;}
.fpt-tool.fpt-m4 .fpt-result p {margin:0 0 10px;line-height:1.55;}
.fpt-tool.fpt-m4 .fpt-result p strong {color:#214a32;}
.fpt-tool.fpt-m4 .fpt-errors {margin:12px;padding:12px;border-radius:8px;font-size:12px;}
.fpt-tool.fpt-m4 .fpt-visualizer {margin:12px;min-height:175px;border:1px solid #d5dfd8;border-radius:9px;overflow:hidden;background:repeating-linear-gradient(0deg,rgba(117,148,152,.075),rgba(117,148,152,.075) 1px,transparent 1px,transparent 20px),repeating-linear-gradient(90deg,rgba(117,148,152,.075),rgba(117,148,152,.075) 1px,transparent 1px,transparent 20px),linear-gradient(#f8fbf8,#f0f6f1);}
.fpt-tool.fpt-m4 .fpt-visualizer svg,.fpt-tool.fpt-m4 .fpt-visualizer canvas {display:block;max-width:100%;height:auto;}
.fpt-tool.fpt-m4 .fpt-viz-placeholder {margin:0;min-height:175px;padding:30px 18px;display:grid;place-content:center;text-align:center;font-size:11px;color:#678274;}
.fpt-m4-output-footnote {font-size:10px;line-height:1.5;color:#6c8073;padding:0 14px 14px;margin:0;}
.fpt-m4-reference {background:#fff;border:1px solid #d6e2d8;border-radius:10px;margin-top:18px;overflow:hidden;}
.fpt-m4-reference > summary {cursor:pointer;padding:13px 16px;color:#27513b;font-weight:750;font-size:12px;}
.fpt-m4-reference > .fpt-method,.fpt-m4-reference > .fpt-about {margin:0;padding:0 16px 16px;line-height:1.65;font-size:12px;}
.fpt-m4-reference h3 {font-size:15px;color:#244934;}
@media (max-width:880px) {
 .fpt-m4-workspace {grid-template-columns: minmax(0,1fr) minmax(275px,.8fr);gap:12px;}
 .fpt-tool.fpt-m4 form {padding:13px;}
 .fpt-m4-fields {gap:10px;}
}
@media (max-width:735px) {
 .fpt-m4-workspace {grid-template-columns:minmax(0,1fr);}
 .fpt-m4-output {position:static;}
 .fpt-m4-heading {gap:12px;}
 .fpt-m4-index {width:44px;flex-basis:44px;height:49px;font-size:20px;}
}
@media (max-width:400px) {
 .fpt-m4-fields,.fpt-m4 .fpt-cost-row {grid-template-columns:minmax(0,1fr);}
 .fpt-m4-heading :is(h1,h2) {font-size:21px;}
 .fpt-tool.fpt-m4 .fpt-actions {grid-template-columns:minmax(0,1fr) 78px;}
}
@media print {
 .fpt-m4-workspace {display:block;}
 .fpt-m4-entry {display:none;}
 .fpt-m4-output {position:static;box-shadow:none;}
 .fpt-m4-reference {break-before:auto;}
 .fpt-tool.fpt-m4 .fpt-result {break-inside:avoid;}
}
@media (prefers-reduced-motion:reduce) {
 .fpt-m4 .fpt-m4-fold-icon {transition:none;}
}

.fpt-m4 .fpt-summary-table {
  width: 100%;
  margin: 0 0 12px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.fpt-m4 .fpt-summary-table caption {
  padding: 9px 12px;
  background: #eef2e4;
  color: #283822;
  text-align: left;
  font-weight: 700;
}
.fpt-m4 .fpt-summary-table :is(th, td) {
  padding: 8px 10px;
  border: 1px solid #dce2d7;
  background: #fff;
  vertical-align: top;
  text-align: left;
  overflow-wrap: anywhere;
}
.fpt-m4 .fpt-summary-table th { width: 48%; color: #35434a; }
.fpt-m4 .fpt-result-breakdown {
  margin-top: 10px;
  border: 1px solid #dce2d7;
  border-radius: 6px;
  background: #fff;
}
.fpt-m4 .fpt-result-breakdown summary {
  cursor: pointer;
  padding: 10px 12px;
  color: #344232;
  font-weight: 650;
}
.fpt-m4 .fpt-result-breakdown-body { padding: 0 12px 10px; }
.fpt-m4 .fpt-result-warning {
  padding: 7px 10px;
  border-inline-start: 3px solid #a97946;
  background: #f8f3e8;
}
.fpt-m4 .fpt-cost-items {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}
.fpt-m4 .fpt-cost-row > .fpt-field:first-of-type { grid-column: 1 / -1; }
.fpt-m4 .fpt-cost-item-options { align-self: center; }
.fpt-m4 .fpt-cost-item-options summary { cursor: pointer; font-size: 14px; }
.fpt-m4 .fpt-cost-item-options .fpt-field { margin-top: 8px; }
.fpt-m4 .fpt-cost-row [data-cost-remove] { justify-self: end; align-self: start; }

.fpt-m4 .fpt-input-with-unit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  width: 100%;
  min-width: 0;
}
.fpt-tool.fpt-m4 .fpt-input-with-unit input {
  margin: 0;
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}
.fpt-m4 .fpt-field-unit {
  display: grid;
  place-items: center;
  padding: 0 10px;
  border: 1px solid #c5d2d6;
  border-inline-start: 0;
  border-start-end-radius: 6px;
  border-end-end-radius: 6px;
  background: #f2f5f1;
  color: #405149;
  font: 650 13px/1.2 Inter, system-ui, sans-serif;
  white-space: nowrap;
}
.fpt-m4 .fpt-unit-description {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.fpt-tool.fpt-m4 .fpt-m4-example {
  flex: 0 0 auto;
  margin-inline-start: auto;
  padding: 8px 12px;
  min-height: 44px;
  border: 1px solid #adbf5e;
  border-radius: 6px;
  background: #eff4df;
  color: #243320;
  font: 650 14px/1.2 Inter, system-ui, sans-serif;
}
.fpt-tool.fpt-m4 .fpt-m4-example:hover { background: #e1ebbc; }
.fpt-tool.fpt-m4 .fpt-m4-example-status {
  margin: 12px 14px 0;
  padding: 8px 10px;
  border-inline-start: 3px solid #7b943b;
  background: #f4f7ed;
  color: #405149;
  font-size: 13px;
}
@media (max-width: 600px) {
  .fpt-m4 .fpt-m4-entry .fpt-m4-panel-title { flex-wrap: wrap; }
  .fpt-tool.fpt-m4 .fpt-m4-example { margin-inline-start: 0; }
}