/* Active Projects pages (eirzan / kinkosa / valdur): index grid, locator map and the 3D viewer chrome.
   Loads after explorer.css, which carries the shared site styles. */
.pidx{ display:grid; grid-template-columns:minmax(280px,420px) 1fr; gap:1px; background:var(--line); border:1px solid var(--line); margin-bottom:1px; }
@media (max-width:900px){ .pidx{ grid-template-columns:1fr; } }
.pidx > div{ background:var(--surface); padding:26px; }
.pidx-facts{ display:flex; gap:26px; flex-wrap:wrap; border:none; background:none; margin-bottom:18px; }
.pidx-facts .f .n{ font:600 30px/1 var(--dm); }
.pidx-facts .f .l{ font:400 9px/1.4 var(--mo); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-top:5px; max-width:180px; }
.pidx-note{ font-size:14px; color:var(--ink-2); max-width:none; line-height:1.6; }

/* An explicit column count keeps the rows even, but a permit count that does not divide by
   it still leaves the last row short, and the grid paints its own hairline background in the
   empty cell as a blank grey box. projects-page.js records the count modulo 3 and modulo 2, so
   the trailing cards can stretch to close the row at whichever breakpoint is active. */
.projgrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
@media (min-width:1081px){
  .projgrid[data-rem3="1"] > :last-child{ grid-column:span 3; }
  .projgrid[data-rem3="2"] > :nth-last-child(2){ grid-column:span 2; }
}
@media (max-width:1080px){
  .projgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .projgrid[data-rem2="1"] > :last-child{ grid-column:span 2; }
}
@media (max-width:700px){
  .projgrid{ grid-template-columns:1fr; }
  .projgrid[data-rem2="1"] > :last-child,
  .projgrid[data-rem3="1"] > :last-child,
  .projgrid[data-rem3="2"] > :nth-last-child(2){ grid-column:auto; }
}
.projcard{ background:var(--surface); padding:26px 26px 28px; display:flex; flex-direction:column; gap:12px; position:relative; text-decoration:none; color:var(--ink); }
.projcard::before{ content:""; position:absolute; top:0; left:0; width:100%; height:3px; background:transparent; transition:background .15s; }
.projcard:hover::before{ background:var(--accent); }
.projcard .epm{ font:700 11px/1 var(--mo); letter-spacing:.14em; color:var(--accent); }
.projcard h3{ font-size:23px; }
.projcard .sys{ font:400 11px/1.5 var(--mo); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.projcard .hook{ font-size:13.5px; color:var(--ink-2); line-height:1.55; max-width:none; }
.projcard .meta{ display:flex; gap:18px; margin-top:auto; padding-top:12px; border-top:1px solid var(--line); font:400 11px/1.4 var(--mo); color:var(--ink-2); }
.projcard .meta b{ color:var(--ink); font-weight:700; display:block; font-size:16px; font-family:var(--dm); }
.projcard .go{ font:700 11px/1 var(--mo); letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }

/* A whole card is a link, but a 3px bar on hover was too quiet to read as clickable, so the
   card lifts and casts a shadow and the cue above the grid says what a click does. */
.clickcue{
  margin:0 0 14px; font:700 10.5px/1 var(--mo); letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent);
  display:flex; align-items:center; gap:10px;
}
.clickcue::before{ content:""; width:16px; height:1px; background:var(--accent); }
.projcard{ transition:transform .16s ease, box-shadow .16s ease, background .16s ease; }
.projcard:hover{
  transform:translateY(-4px); background:var(--surface);
  box-shadow:0 14px 34px rgba(20,21,25,.14); z-index:2;
}
html[data-theme="dark"] .projcard:hover{ box-shadow:0 14px 34px rgba(0,0,0,.5); }
.projcard:hover h3{ color:var(--accent); }
.projcard:hover::before{ height:4px; }
.projcard:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
@media (prefers-reduced-motion: reduce){
  .projcard{ transition:none; }
  .projcard:hover{ transform:none; }
}

.viewer-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:26px; }
.viewer-head .facts{ display:flex; gap:26px; flex-wrap:wrap; border:none; background:none; }
.viewer-head .f .n{ font:600 26px/1 var(--dm); }
.viewer-head .f .l{ font:400 9px/1.4 var(--mo); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-top:5px; }
.backlink{ font:700 11px/1 var(--mo); letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }

.scene{ position:relative; width:100%; height:min(70vh,640px); min-height:440px; border:1px solid var(--line); background:linear-gradient(180deg,#e9edf1,#f4f2ee); overflow:hidden; }
html[data-theme="dark"] .scene{ background:linear-gradient(180deg,#14171c,#0d0f12); }
.scene canvas{ display:block; width:100%; height:100%; cursor:grab; touch-action:none; }
.scene canvas:active{ cursor:grabbing; }
.scene .loading{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font:400 10px/1 var(--mo); letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); }
.scene .loading[hidden]{ display:none; }
.layerbar{ position:absolute; left:14px; top:14px; display:flex; flex-wrap:wrap; gap:6px; max-width:70%; }
.lchip{ font:700 10px/1 var(--mo); letter-spacing:.08em; text-transform:uppercase; padding:8px 11px; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink-2); cursor:pointer; display:inline-flex; align-items:center; gap:7px; }
.lchip[disabled]{ opacity:.45; cursor:not-allowed; }
.lchip .sw{ width:9px; height:9px; border-radius:2px; }
.lchip[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
/* the system model is an exclusive view: the ground layers are held under it, so their
   chips read as suspended rather than active (clicking one brings the ground back) */
.layerbar[data-suspended="true"] .lchip:not([data-layer="system"]){ opacity:.42; }
.scene-note{ position:absolute; right:14px; bottom:12px; font:400 9.5px/1.5 var(--mo); letter-spacing:.06em; color:var(--ink-3); background:var(--surface); border:1px solid var(--line); padding:5px 8px; max-width:60%; text-align:right; }
.hovertag{ position:absolute; transform:translate(-50%,-140%); pointer-events:none; font:700 10px/1 var(--mo); letter-spacing:.1em; text-transform:uppercase; background:var(--ink); color:var(--paper); padding:6px 9px; white-space:nowrap; z-index:3; }
.hovertag[hidden]{ display:none; }

/* The panel row is built from however many panels have something to say. A permit with no
   drill holes and no samples drops the third one, so the template has to follow the count or
   the grid keeps an empty track and paints it as a blank grey box. data-cols is set in
   projects-page.js from the panels that are actually visible. */
.vcols{ display:grid; grid-template-columns:1.2fr 1fr 340px; gap:1px; background:var(--line); border:1px solid var(--line); border-top:none; }
.vcols[data-cols="2"]{ grid-template-columns:1.2fr 1fr; }
.vcols[data-cols="1"]{ grid-template-columns:1fr; }
@media (max-width:1100px){
  .vcols, .vcols[data-cols="3"], .vcols[data-cols="2"]{ grid-template-columns:1fr 1fr; }
  .vcols[data-cols="1"]{ grid-template-columns:1fr; }
  /* three panels in two columns leaves the third alone on its row, so it takes the width */
  .vcols[data-cols="3"] > .sidepanel:last-child{ grid-column:1 / -1; }
}
@media (max-width:760px){
  .vcols, .vcols[data-cols="3"], .vcols[data-cols="2"], .vcols[data-cols="1"]{ grid-template-columns:1fr; }
}
.vcols > div{ background:var(--surface); padding:24px 26px; }
.sidepanel h4{ font:700 10px/1 var(--mo); letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); margin:0 0 12px; }
.sidepanel .sys-title{ font:600 22px/1.1 var(--dm); text-transform:uppercase; margin-bottom:10px; }
.sidepanel p{ font-size:14.5px; color:var(--ink-2); max-width:none; }
.sidepanel .hook{ font-size:15.5px; color:var(--ink); line-height:1.5; }
.whylist{ list-style:none; margin:14px 0 0; padding:0; }
.whylist li{ padding:10px 0 10px 18px; border-top:1px solid var(--line); font-size:13.5px; color:var(--ink-2); line-height:1.55; position:relative; }
.whylist li::before{ content:""; position:absolute; left:0; top:17px; width:8px; height:8px; background:var(--accent); }
.holelist{ list-style:none; margin:14px 0 0; padding:0; max-height:420px; overflow:auto; }
.holelist li{ padding:12px 0; border-top:1px solid var(--line); }
.holelist .hid{ font:700 13px/1 var(--mo); color:var(--accent); }
.holelist .hn{ font-size:13px; color:var(--ink-2); margin-top:4px; }
.holelist a{ font:700 10px/1 var(--mo); letter-spacing:.12em; text-transform:uppercase; }
.legend-cu{ display:flex; align-items:center; gap:10px; margin-top:14px; font:400 10px/1.4 var(--mo); color:var(--ink-3); }
.legend-cu .bar{ height:10px; width:120px; background:linear-gradient(90deg,#4a6fa5,#dcc94a,#d06a2f,#a32d1e); }
/* drill-hole controls and list (16 Sep 2026): pins in the scene, a view bar, grouped hole list */
.viewbar{ position:absolute; left:14px; bottom:12px; display:flex; flex-wrap:wrap; gap:6px; max-width:48%; }
.lchip.act{ border-color:var(--accent); color:var(--accent); background:var(--surface); }
.lchip.act:hover{ background:var(--accent); color:var(--paper); }
.scene-note{ max-width:48%; }
/* the historical-exploration box: a lede line, then one block per data family */
.hxlede{ font-size:13.5px; color:var(--ink-2); margin:0 0 4px; }
.hxrow{ margin-top:12px; }
.hxh{ font:700 11px/1.3 var(--mo); letter-spacing:.04em; color:var(--ink); }
.hxrow ul{ list-style:none; margin:5px 0 0; padding:0; }
.hxrow li{ font-size:12.5px; line-height:1.55; color:var(--ink-2); padding:3px 0 3px 11px; position:relative; }
.hxrow li::before{ content:""; position:absolute; left:0; top:11px; width:5px; height:1px; background:var(--line-strong); }
.hxsrc{ margin-top:14px; }
.hgroup{ font:700 10px/1 var(--mo); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin:18px 0 0; }
.hsum{ font:400 12px/1.6 var(--mo); color:var(--ink-3); margin:6px 0 0; }
.holelist li{ cursor:pointer; }
.holelist li:hover{ background:color-mix(in srgb, var(--accent) 6%, transparent); }
.holelist li.sel{ background:color-mix(in srgb, var(--accent) 12%, transparent); box-shadow:inset 3px 0 0 var(--accent); padding-left:10px; }
.holelist li.adj .hid{ color:var(--ink-3); }
.holelist .hsrc{ font:400 10px/1.5 var(--mo); letter-spacing:.04em; color:var(--ink-3); margin-top:4px; }
.holelist .hlinks{ margin-top:8px; display:flex; flex-wrap:wrap; gap:14px; }

/* ---- phones (24 Sep 2026): the stacked chip column and corner controls covered most of the scene ---- */
@media (max-width:700px){
  .scene{ height:min(60vh,500px); min-height:340px; }
  .layerbar{ left:8px; right:8px; top:8px; max-width:none; flex-wrap:nowrap; overflow-x:auto;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:2px; }
  .layerbar::-webkit-scrollbar{ display:none; }
  .lchip{ flex:none; padding:10px 11px; font-size:9.5px; }
  .viewbar{ left:8px; bottom:8px; max-width:none; flex-wrap:nowrap; }
  .scene-note{ right:8px; bottom:8px; max-width:40%; font-size:9px; padding:4px 7px; }
  .hovertag{ font-size:9px; }
}
/* the projects pages set their header and first band padding inline; on phones pull the viewer up */
@media (max-width:700px){
  main > section.hero{ padding:36px 0 26px !important; }
  main > section.hero + section.band{ padding-top:28px !important; }
}
@media (max-width:700px){
  .scene-note{ top:52px; bottom:auto; right:8px; max-width:62%; text-align:right; }
  .layerbar{ -webkit-mask-image:linear-gradient(90deg,#000 86%,transparent); mask-image:linear-gradient(90deg,#000 86%,transparent); padding-right:28px; }
}