/* strip log — lithology symbols borrowed from geological maps:
   dots = soil/sand, dashes = loam, slashes = slate, crosses = granite, vees = gabbro */
.column {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: var(--column-w);
  z-index: 10;
  border-left: 1px solid #1F2328;
}
.column-beds { list-style: none; display: flex; flex-direction: column; height: 100%; }
.bed { flex: 1; border-top: 1px solid #1F2328; }
.bed:first-child { border-top: 0; }
.bed a { display: block; height: 100%; }
.bed a:focus-visible { outline: 2px solid #2F5BD3; outline-offset: -3px; }
.bed:not(.is-here) a:hover { filter: brightness(1.12); }

.bed[data-id="topsoil"] a {
  background: #FAFAF7 radial-gradient(#6A6F76 1px, transparent 1.4px) 0 0 / 9px 11px;
}
.bed[data-id="alluvium"] a {
  background: #E6D9B8 radial-gradient(#74684F 0.8px, transparent 1.1px) 0 0 / 5px 5px;
}
.bed[data-id="diluvium"] a {
  background: #A8613E repeating-linear-gradient(0deg, transparent 0 7px, #6E3A22 7px 8px);
}
.bed[data-id="bedrock"] a {
  background: #4B4F5C repeating-linear-gradient(-55deg, transparent 0 6px, #2E313A 6px 7px);
}
.bed[data-id="pluton"] a {
  background: #16201F url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M6 3v6M3 6h6' stroke='%236F8F85' stroke-width='1.2'/%3E%3C/svg%3E") 0 0 / 12px 12px;
}
/* the V, read right side up, is what maps print for basic intrusions like gabbro */
.bed[data-id="lowercrust"] a {
  background: #1E1416 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M3.5 4l2.5 5 2.5-5' fill='none' stroke='%238F6A60' stroke-width='1.2'/%3E%3C/svg%3E") 0 0 / 12px 12px;
}
/* inset shadow sits on the link: the li is fully covered by its patterned child */
.bed.is-here a { box-shadow: inset 4px 0 0 #1F2328; }
.bed:is([data-id="diluvium"], [data-id="bedrock"], [data-id="pluton"], [data-id="lowercrust"]).is-here a { box-shadow: inset 4px 0 0 #FAFAF7; }

/* the drill bit: where the middle of your screen is, in metres */
.needle {
  position: absolute; left: -10px; right: 0;
  height: 0;
  border-top: 2px solid #1F2328;
  pointer-events: none;
}
.needle span {
  position: absolute; right: calc(100% + 6px); top: -11px;
  padding: 2px 6px;
  background: #FAFAF7;
  color: #1F2328;
  border: 1px solid #1F2328;
  font: 500 12px/1.2 system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: translate 200ms ease;
}
/* lower half: lift the label off the line so it still fits when the needle reaches the bottom */
.needle.is-low { translate: 0 -2px; } /* the 2px line itself would fall just below the edge at 100% */
.needle.is-low span { translate: 0 -14px; }
html[data-layer="bedrock"] .needle, html[data-layer="pluton"] .needle, html[data-layer="lowercrust"] .needle, html[data-layer="diluvium"] .needle { border-top-color: #FAFAF7; }

/* narrow screens: the column is too thin to hold a label beside it without covering text,
   so the depth reads vertically inside the column itself */
@media (max-width: 700px) {
  .needle { left: 0; }
  .needle span {
    right: 50%; top: 8px;
    transform: translateX(50%);
    writing-mode: vertical-rl;
    padding: 6px 1px;
  }
  .needle.is-low span { top: auto; bottom: 8px; translate: none; }
}