/* One spacing system for the inline diagrams and their expanded viewers. */
body[data-foundation] {
  --diagram-inset255:clamp(18px,2.4vw,28px);
  --diagram-ink255:#142a32;
  --diagram-accent255:#b6de65;
  --diagram-expand255:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3H3v5M16 3h5v5M21 16v5h-5M8 21H3v-5M3 3l6 6M21 3l-6 6M21 21l-6-6M3 21l6-6'/%3E%3C/svg%3E");
  --diagram-replay255:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5v5h5M3.5 10a8 8 0 1 1 .7 6'/%3E%3C/svg%3E");
  --diagram-pause255:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M8 5v14M16 5v14'/%3E%3C/svg%3E");
  --diagram-play255:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 4 12 8-12 8Z'/%3E%3C/svg%3E");
  --diagram-done255:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4L19 6'/%3E%3C/svg%3E");
}

/* Text follows the same inset above and below every drawing. */
body[data-foundation] #ecko .soil-feature.soil-spaced250,
body[data-foundation] .et-diagram-view .soil-feature.soil-spaced250 {
  padding:24px var(--diagram-inset255)!important;
  text-align:left;
}
body[data-foundation] #ecko .soil-spaced250 .soil-heading,
body[data-foundation] .et-diagram-view .soil-spaced250 .soil-heading {
  align-items:flex-start;gap:10px 24px;margin:0;padding:0;
  text-align:left;
}
body[data-foundation] .soil-spaced250 .soil-heading strong {
  display:block;font-size:17px;line-height:1.5;
}
body[data-foundation] .soil-spaced250 .soil-heading > span {
  display:block;font-size:12px;line-height:1.7;
}
body[data-foundation] #ecko .soil-spaced250 .soil-note,
body[data-foundation] .et-diagram-view .soil-spaced250 .soil-note {
  margin:24px 0 0!important;padding:0;
  font-size:12px!important;line-height:1.8!important;text-align:left;
}
body[data-foundation] .soil-spaced250 :is(.stabilizer-circuit,.casing-diagram) figcaption {
  padding:0;margin:0 0 18px;text-align:left;line-height:1.65;
}
body[data-foundation] .soil-spaced250 :is(.stabilizer-circuit,.casing-diagram) figcaption span {
  display:block;margin-top:8px;line-height:1.7;
}

/* Project headings and bodies use matching horizontal gutters. */
body[data-foundation] #ecko #sistema-zanjeo > summary {padding:24px}
body[data-foundation] #ecko #sistema-zanjeo > .zanjeo-panel240 {padding:0 24px 28px}
body[data-foundation] #zanjeo .trench-project-disclosure250 > summary {
  padding:24px!important;
}
body[data-foundation] #zanjeo .trench-project-body250 {padding:0 24px 28px}
body[data-foundation] #zanjeo .trench-project-heading239 h3 {
  margin:0;text-align:left;line-height:1.5;
}
body[data-foundation] .trench-diagram240 {
  padding:24px var(--diagram-inset255);border-radius:12px;
}
body[data-foundation] .trench-diagram240 .trench-diagram-heading240 {
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  margin:0;padding:0 0 20px;text-align:left;
}
body[data-foundation] .trench-diagram240 .trench-diagram-heading240 strong {
  font-size:18px;line-height:1.5;
}
body[data-foundation] .trench-diagram240 .trench-diagram-heading240 > span {
  font-size:12px;line-height:1.7;
}
body[data-foundation] .trench-diagram240 .trench-view-label240 {
  margin:18px 0 12px;gap:8px 20px;font-size:10px;line-height:1.7;
}
body[data-foundation] .trench-diagram240 .trench-section240 {margin-block:24px;gap:24px}
body[data-foundation] .trench-diagram240 .trench-dimensions240 dt {font-size:11px;line-height:1.7}
body[data-foundation] .trench-diagram240 .trench-dimensions240 > div {gap:8px;min-width:0}
body[data-foundation] .trench-diagram240 .trench-sequence240 {gap:12px;margin:24px 0 14px}
body[data-foundation] :is(#zanjeo,.trench-viewer240) .trench-diagram240 .trench-status240 {
  margin:16px 0 0!important;padding:0;font-size:12px;line-height:1.75;text-align:left;
}
body[data-foundation] :is(#zanjeo,.trench-viewer240) .trench-diagram240 .trench-diagram-note240 {
  margin:18px 0 0!important;padding:0;font-size:10px;line-height:1.8;text-align:left;
}

/* A clear primary action, with secondary playback controls on separate rows. */
body[data-foundation] #ecko .soil-feature.soil-spaced250 .et-diagram-open,
body[data-foundation] .trench-diagram240 .trench-controls240 button {
  box-sizing:border-box;display:flex!important;align-items:center;justify-content:center;
  gap:10px;width:100%!important;max-width:100%!important;min-width:0;
  min-height:52px;height:auto;padding:14px 18px!important;margin:0!important;
  border:1px solid #6a8e87!important;border-radius:10px;
  background:#233c4b!important;color:#e0ebdd!important;
  font:600 13px/1.6 'Poppins',system-ui,sans-serif!important;
  text-align:center;white-space:normal!important;overflow-wrap:break-word;
  text-decoration:none;cursor:pointer;touch-action:manipulation;
  translate:none!important;scale:1!important;
  transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease;
}
body[data-foundation] #ecko .soil-feature.soil-spaced250 .et-diagram-open,
body[data-foundation] .trench-diagram240 .trench-controls240 [data-enlarge] {
  color:var(--diagram-ink255)!important;background:var(--diagram-accent255)!important;
  border-color:#caec8c!important;box-shadow:0 3px 0 #6d913d,0 6px 16px #08150e24;
}
body[data-foundation] #ecko .soil-feature.soil-spaced250 .et-diagram-open {
  margin:28px 0 4px!important;
}
body[data-foundation] .trench-diagram240.is-ready240 .trench-controls240 {
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));
  gap:12px;margin:24px 0 4px;padding:0;align-items:stretch;
}
body[data-foundation] .trench-diagram240 .trench-controls240 [data-enlarge] {grid-column:1/-1}
body[data-foundation] #ecko .soil-feature .et-diagram-open::before,
body[data-foundation] .trench-diagram240 .trench-controls240 button::before {
  content:'';display:block;flex:0 0 18px;width:18px;height:18px;
  background:currentColor;
  -webkit-mask:var(--diagram-icon255,var(--diagram-expand255)) center/contain no-repeat;
  mask:var(--diagram-icon255,var(--diagram-expand255)) center/contain no-repeat;
}
body[data-foundation] .trench-controls240 [data-replay] {--diagram-icon255:var(--diagram-replay255)}
body[data-foundation] .trench-controls240 [data-pause] {--diagram-icon255:var(--diagram-pause255)}
body[data-foundation] .trench-controls240 [data-pause][data-play-state="paused"] {--diagram-icon255:var(--diagram-play255)}
body[data-foundation] .trench-controls240 [data-pause]:disabled {--diagram-icon255:var(--diagram-done255)}
body[data-foundation] .trench-diagram240 .trench-controls240 button:disabled {
  opacity:1;background:#1c303d!important;color:#a8bcbf!important;
  border-color:#405865!important;box-shadow:none;cursor:default;
}
body[data-foundation] #ecko .soil-feature .et-diagram-open:focus-visible,
body[data-foundation] .trench-diagram240 .trench-controls240 button:focus-visible {
  outline:3px solid #f0ffc9;outline-offset:4px;
}
@media(hover:hover) {
  body[data-foundation] #ecko .soil-feature.soil-spaced250 .et-diagram-open:hover,
  body[data-foundation] .trench-diagram240 .trench-controls240 [data-enlarge]:hover {
    background:#c9ed8a!important;border-color:#e0f7b9!important;
  }
  body[data-foundation] .trench-diagram240 .trench-controls240 button:not([data-enlarge]):not(:disabled):hover {
    background:#2c4958!important;border-color:#abd37e!important;
  }
}

/* Gallery labels, rules and buttons each have their own space. */
body[data-foundation] #ecko .proy .front-layout64 > .et-gallery-bar,
body[data-foundation] #ecko #zanjeo .et-gallery-bar {
  box-sizing:border-box;display:grid!important;grid-template-columns:minmax(0,1fr) auto;
  align-items:center!important;gap:18px!important;
  margin:0!important;padding:24px 0 4px!important;
}
body[data-foundation] #ecko :is(.proy,#zanjeo) .et-gallery-bar > span {
  min-width:0;max-width:none;text-align:left;line-height:1.8;
}
body[data-foundation] #ecko :is(.proy,#zanjeo) .et-gallery-open {
  box-sizing:border-box;min-height:48px;padding:13px 18px!important;margin:0!important;
  border:1px solid #82a663!important;border-radius:10px;
  color:#c8e89d!important;background:#253c43!important;
  font:600 12px/1.6 'Poppins',system-ui,sans-serif!important;
  white-space:normal!important;text-align:center;translate:none!important;scale:1!important;
}
body[data-foundation] #ecko #zanjeo .trench-gallery239 {margin-top:20px}
body[data-foundation] #ecko :is(.proy,#zanjeo) .et-gallery-bar[hidden] {display:none!important}

/* View selectors share the same control proportions and text alignment. */
body[data-foundation] #ecko .front-view-options250 button {
  box-sizing:border-box;gap:16px;padding:18px 20px;
  border-radius:10px;min-height:88px;align-items:flex-start;text-align:left;
  translate:none!important;scale:1!important;
}
body[data-foundation] #ecko .front-view-options250 button > span:last-child {gap:8px}
body[data-foundation] #ecko .front-view-options250 .front-view-dot250 {margin-top:3px}
body[data-foundation] #ecko .front-view-options250 strong {line-height:1.65}
body[data-foundation] #ecko .front-view-options250 small {font-size:12px;line-height:1.7}

/* The header and drawing have identical outer edges and identical text insets.
   Both diagram viewers scroll as one panel, keeping the close control visible. */
body[data-foundation] .et-viewer:is(.et-diagram-view,.trench-viewer240) {
  --diagram-panel255:640px;
  box-sizing:border-box;width:min(860px,calc(100vw - 24px));
  max-width:calc(100vw - 24px);padding:12px;
  overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
}
body[data-foundation] .et-viewer.trench-viewer240 {--diagram-panel255:780px}
body[data-foundation] .et-viewer:is(.et-diagram-view,.trench-viewer240)[open] {display:block}
body[data-foundation] .et-viewer:is(.et-diagram-view,.trench-viewer240) > .et-viewer-head {
  position:sticky;top:0;z-index:10;box-sizing:border-box;
  display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:start;gap:14px;
  width:100%;max-width:var(--diagram-panel255);margin:0 auto 16px;
  padding:24px var(--diagram-inset255);border:1px solid #668449;
  border-radius:12px;background:#183247;text-align:left;
}
body[data-foundation] .et-viewer:is(.et-diagram-view,.trench-viewer240) > .et-viewer-head > div {min-width:0}
body[data-foundation] .et-viewer:is(.et-diagram-view,.trench-viewer240) .et-viewer-kicker {
  display:block;margin:0;padding:0;font-size:10px;line-height:1.8;
  letter-spacing:.1em;color:#cfdfa8;white-space:normal;overflow-wrap:anywhere;
}
body[data-foundation] .et-viewer:is(.et-diagram-view,.trench-viewer240) .et-viewer-head h2 {
  margin:10px 0 0;padding:0;max-width:none;color:#f4f8f6;
  font-size:clamp(17px,2.2vw,24px);line-height:1.5;text-align:left;
  white-space:normal;overflow-wrap:anywhere;
}
body[data-foundation] .et-viewer:is(.et-diagram-view,.trench-viewer240) .et-close {
  position:static;align-self:start;box-sizing:border-box;display:grid;place-items:center;
  width:44px;height:44px;min-width:44px;min-height:44px;margin:0;padding:0;
  border:1px solid #9abc6b;border-radius:12px;background:#2a4553;color:#f2f9e9;
  font-size:24px;line-height:1;translate:none!important;scale:1!important;
}
body[data-foundation] .et-viewer:is(.et-diagram-view,.trench-viewer240) .et-close:focus-visible {
  outline:2px solid #d6f79b;outline-offset:3px;
}
body[data-foundation] .et-viewer.et-diagram-view .et-viewer-stage {
  display:block;width:100%;height:auto;min-height:0;margin:0;padding:0;
}
body[data-foundation] .et-viewer.et-diagram-view .et-viewer-content,
body[data-foundation] .et-viewer.trench-viewer240 .trench-viewer-content240 {
  box-sizing:border-box;width:100%;max-width:var(--diagram-panel255);
  height:auto;margin:0 auto;padding:0;overflow:visible;background:transparent;border-radius:0;
}
body[data-foundation] .et-viewer.et-diagram-view .soil-feature.soil-spaced250 {
  width:100%;max-width:var(--diagram-panel255)!important;
  margin:0!important;border:1px solid #99bd814d;border-radius:12px;
}
body[data-foundation] .et-viewer.et-diagram-view .et-viewer-caption {
  box-sizing:border-box;max-width:var(--diagram-panel255);margin:20px auto 8px;
  padding:0 var(--diagram-inset255);font-size:11px;line-height:1.8;text-align:left;
}
@media(max-width:600px) {
  body[data-foundation] #ecko #sistema-zanjeo > summary {padding:20px 18px}
  body[data-foundation] #ecko #sistema-zanjeo > .zanjeo-panel240 {padding:0 18px 24px}
  body[data-foundation] #zanjeo .trench-project-disclosure250 > summary {padding:22px 18px!important}
  body[data-foundation] #zanjeo .trench-project-body250 {padding:0 18px 24px}
  body[data-foundation] #ecko .proy .front-layout64 > .et-gallery-bar,
  body[data-foundation] #ecko #zanjeo .et-gallery-bar {grid-template-columns:minmax(0,1fr)}
  body[data-foundation] #ecko :is(.proy,#zanjeo) .et-gallery-open {justify-self:stretch;width:100%}
  body[data-foundation] .trench-diagram240 .trench-dimensions240 {gap:12px}
}
@media(prefers-reduced-motion:reduce) {
  body[data-foundation] #ecko .soil-feature .et-diagram-open,
  body[data-foundation] .trench-diagram240 .trench-controls240 button {transition:none}
}