/* Four illustrated samples aligned with their data cards. Reference: docs/references/soil-profile-four-layers-reference.png. */
.soil-card{container-type:inline-size;container-name:soil-profile;display:block;--soil-row:clamp(154px,23cqw,220px);--soil-gap:clamp(8px,1.2cqw,12px);background:linear-gradient(120deg,var(--surface-card,#FFFCF6),var(--surface-card,#FFFCF6));border:1px solid var(--border-subtle,#E5DCD0);border-radius:18px;padding:clamp(14px,1.5vw,25px);color:var(--text-primary,#193536);min-width:0;}
.soil-card .section-subtitle{font-size:clamp(16px,2.8cqw,27px);color:var(--text-secondary,#536361);margin:clamp(8px,1.4cqw,14px) 0 clamp(16px,3cqw,30px);line-height:1.4;max-width:none;}
.soil-card .soil-body{display:grid;grid-template-columns:44% minmax(0,1fr);height:auto;gap:clamp(6px,1.5cqw,15px);align-items:stretch;}
.soil-card .soil-visual{position:relative;display:grid;grid-template-columns:clamp(66px,10cqw,96px) minmax(0,1fr);min-width:0;}
.soil-card .depth-ruler{position:absolute;top:calc(var(--soil-row)*.2)!important;bottom:calc(var(--soil-row)*.05)!important;width:clamp(56px,8cqw,76px);z-index:1;pointer-events:none;}
.soil-card .depth-ruler:after{top:0;bottom:0;left:auto;right:0;border-left:1px solid var(--border-subtle,#E5DCD0);}
.soil-card .depth-ruler span{position:absolute;width:100%;font-size:clamp(14px,1.8cqw,18px);color:var(--text-secondary,#536361);line-height:1;white-space:nowrap;z-index:1;}
.soil-card .depth-ruler span b{position:absolute;right:13px;transform:translateY(-50%);font-weight:500;}
.soil-card .depth-ruler span:after{right:-4px;width:8px;background:var(--border-subtle,#E5DCD0);}
.soil-card .depth-ruler .ruler-major:after{right:-5px;width:11px;background:var(--border-subtle,#E5DCD0);}
.soil-card .soil-visual #soil-viewport{grid-column:2;position:relative;display:grid;grid-template-rows:repeat(4,var(--soil-row));gap:var(--soil-gap);min-width:0;}
.soil-card .soil-specimen{position:relative;padding:0;border-radius:8px;min-width:0;outline-offset:1px;}
.soil-card .soil-specimen canvas{position:absolute;inset:auto!important;left:0!important;bottom:0!important;width:100%!important;height:100%!important;object-fit:contain;filter:drop-shadow(0 8px 6px #65532924);}

.soil-card .soil-specimen:focus-visible,.soil-card .depth-card:focus-visible{outline:2px solid var(--border-subtle,#E5DCD0);outline-offset:3px;}
.soil-card .soil-specimen.is-unknown canvas{filter:none;}
.soil-card .illustration-label{display:none;}
.soil-card .soil-depths{display:grid;gap:var(--soil-gap);min-width:0;z-index:2;}
.soil-card .depth-card{display:flex;flex-direction:column;justify-content:center;gap:0;background:linear-gradient(110deg,var(--surface-mint,#E5F2ED),color-mix(in srgb,var(--surface-mint,#E5F2ED) 69.02%,transparent));border:1px solid var(--border-subtle,#E5DCD0);border-radius:clamp(9px,1.6cqw,16px);padding:clamp(8px,1.6cqw,16px);}
.soil-card .depth-card.selected,.soil-card .depth-card:hover{background:linear-gradient(110deg,var(--surface-mint,#E5F2ED),var(--surface-mint,#E5F2ED));border-color:var(--border-subtle,#E5DCD0);}
.soil-card .depth-card>.depth-heading{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:5px;margin:0 0 clamp(4px,.7cqw,7px);font-family:var(--serif);font-size:clamp(22px,3.25cqw,31px);color:var(--brand-teal-deep,#145C59);line-height:1.1;}
.soil-card .depth-heading>.depth-range{white-space:nowrap;}
.soil-card .depth-heading>.depth-ph{font-size:clamp(18px,2.6cqw,25px);color:var(--text-secondary,#536361);white-space:nowrap;}
.soil-card .soil-composition-bar{display:flex;height:clamp(12px,2cqw,20px);border-radius:clamp(4px,1cqw,9px);overflow:hidden;background:#e6e8de;flex:none;}
.soil-card .soil-fraction{border-right:1px solid #fffdf8;min-width:0;}.soil-card .soil-fraction:last-child{border:0;}.soil-card .fraction-0{background:linear-gradient(90deg,#ddc18f,#e4cda2);}.soil-card .fraction-1{background:#aaa08d;}.soil-card .fraction-2{background:#9d6c4c;}
.soil-card .soil-composition-bar.unknown{background:repeating-linear-gradient(135deg,#e6e8de 0 5px,#f3f4ee 5px 10px);}
.soil-card .depth-composition{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;font-size:clamp(14px,1.9cqw,18px);color:var(--text-secondary,#536361);white-space:normal;line-height:1.2;}
.soil-card .depth-composition span{display:block;text-align:center;}.soil-card .depth-composition strong{display:block;font-family:var(--serif);font-size:clamp(26px,3.3cqw,31px);font-weight:500;color:var(--text-primary,#193536);line-height:1.15;margin-top:2px;}
.soil-card .soil-extra{border-top:1px solid var(--border-subtle,#E5DCD0);margin:clamp(4px,.8cqw,8px) 0 0;padding-top:clamp(4px,.8cqw,8px);font-size:clamp(14px,2.2cqw,21px);line-height:1.3;color:var(--text-secondary,#536361);display:flex;flex-wrap:wrap;gap:3px 14px;}
.soil-card .soil-extra>span{white-space:nowrap;}.soil-card .soil-extra b{font-weight:500;}

.soil-card .soil-footnote{font-size:clamp(12px,1.4cqw,14px);line-height:1.6;color:var(--text-secondary,#536361);margin:12px 0 0;}
@media(min-width:701px) and (max-width:1100px){.analysis-grid>.soil-card{width:100%;max-width:760px;justify-self:center;}}

.soil-card .soil-composition-links{flex:none;height:10px;overflow:visible;fill:none;stroke-width:1.5;vector-effect:non-scaling-stroke;}
.soil-card .fraction-link-0{stroke:#c9aa72;}.soil-card .fraction-link-1{stroke:#9b9180;}.soil-card .fraction-link-2{stroke:#946242;}
@container soil-profile (max-width:520px){
  .soil-card .soil-body{grid-template-columns:40% minmax(0,1fr);gap:10px;}.soil-card .soil-visual{grid-template-columns:58px minmax(0,1fr);}.soil-card .depth-ruler{width:50px;font-size:14px;}.soil-card .depth-ruler span b{right:9px;}
  .soil-card .depth-card{padding:8px 9px;}.soil-card .depth-heading>.depth-ph{font-size:16px;}.soil-card .depth-card>.depth-heading{font-size:20px;}.soil-card .depth-composition strong{font-size:25px;}

  /* Compact column beside the map: shorter rows so the card does not set the row height. */
  .soil-card .section-subtitle{font-size:15px;margin:6px 0 12px;}.soil-card .soil-body{--soil-row:clamp(126px,calc((100dvh - 280px)/4),140px);--soil-gap:8px;}
  .soil-card .depth-card{padding:7px 9px;}.soil-card .depth-card>.depth-heading{font-size:18px;margin-bottom:3px;}.soil-card .depth-heading>.depth-ph{font-size:15px;}.soil-card .soil-composition-bar{height:10px;}.soil-card .soil-composition-links{height:8px;}
  .soil-card .depth-composition{font-size:12px;}.soil-card .depth-composition strong{font-size:21px;margin-top:1px;}.soil-card .soil-extra{font-size:12px;margin-top:4px;padding-top:4px;}

}