/* Selected resources remain visible before the secondary map settings. */
:root{--accent:#e7e9ec;--warn:#c7cbd2}
[hidden]{display:none!important}
.content-modes .mode-controls{flex-wrap:wrap}
.samples-mode #tabs,.samples-mode .point-tools,.samples-mode .color-settings,.samples-mode .numerical-settings,.samples-mode .sidepanel>:not(#sampleInspector){display:none}
.sample-inspector{padding:20px}
.sample-inspector select{margin:0 0 20px;width:100%;min-height:42px}
.sample-detail h2{font-size:27px;letter-spacing:-.6px;margin:5px 0}
.sample-place{font-size:14px;color:#c7ced5;margin:0 0 8px}
.sample-coordinates{font:13px ui-monospace,monospace;color:#a9b6be;padding-bottom:14px;border-bottom:1px solid var(--line)}
.sample-oxides{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin:16px 0}
.sample-oxides>div{background:var(--panel);padding:14px 8px}
.sample-oxides dt{font-size:12px;color:var(--muted)}
.sample-oxides dd{font:22px ui-monospace,monospace;margin:7px 0 0}
.sample-sources{display:flex;flex-wrap:wrap;gap:16px;font-size:11px;margin:17px 0}
.sample-markers{position:absolute;inset:0;pointer-events:none}
.sample-leaders{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.sample-leaders line{stroke:#d7e0e7;stroke-width:1;opacity:.65}
.sample-flag{position:absolute;transform:translate(-50%,-50%);width:30px;height:27px;padding:3px;border:1px solid #8898a4;background:#0b1119e8;border-radius:1px;pointer-events:auto;box-shadow:0 2px 8px #0008}
.sample-flag img{display:block;width:100%;height:100%;object-fit:contain}
.sample-flag.selected{border-color:#efce8a;box-shadow:0 0 0 2px #efce8a50}
.sample-name{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);white-space:nowrap;color:#fff;background:#10161fe8;padding:2px 5px;font:10px ui-monospace,monospace}
.sample-flag:hover .sample-name,.sample-flag:focus-visible .sample-name,.sample-flag.selected .sample-name{display:block}
@media(max-width:800px){.content-modes .mode-controls{grid-template-columns:repeat(2,minmax(0,1fr))!important}.sample-inspector{padding:16px}.sample-flag{min-height:30px}}
header{padding:16px 22px 0}
.brandbar{display:none}
.titleline{margin:0 0 10px;gap:12px}
h1{font-size:24px;margin-bottom:4px}
.sub{font-size:12px}
#aboutBtn{padding:8px 10px;font-size:11px;flex-shrink:0;min-height:36px}
.shell{padding:14px 22px 22px;gap:14px;grid-template-columns:minmax(0,1fr) minmax(360px,410px);grid-template-areas:"map inspector";align-items:start}
.map-column{grid-area:map;min-width:0}
.sidepanel{grid-area:inspector;align-self:start;position:sticky;top:12px;min-width:0;border-color:#555b65;box-shadow:0 5px 24px #0003}
.options-column{display:grid;gap:9px;margin-top:14px;min-width:0}
.options-column .point-tools{margin-top:0}
.mapbar{padding:9px 11px;flex-wrap:wrap}
.tabs{gap:4px}
.tabs{flex-wrap:wrap;min-width:0}
.tabs .sum-toggle{font-size:20px;line-height:1;border-color:#929aa7}
.sum-status{margin:0;padding:0 11px 8px;color:var(--muted);font-size:11px;line-height:1.5}
.sum-status[hidden],.selected-sum[hidden]{display:none}
.selected-sum{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding:12px 0;border-top:1px solid #555b65}
.selected-sum span{font-size:12px;line-height:1.5}
.selected-sum strong{font:23px ui-monospace,monospace;white-space:nowrap}
.tabs button{padding:7px 10px;min-width:48px;min-height:36px}
.mode-controls button{min-height:36px;padding:7px 9px}
.content-modes{padding:8px 11px 0}
.content-modes .mode-controls{flex-wrap:wrap;gap:5px}
.viewer-meta{padding:8px 11px 0;min-height:30px;flex-wrap:wrap;gap:5px}
.source-badge{white-space:normal;line-height:1.4}
.stage{height:clamp(300px,32vw,460px);margin:9px}
.map-controls button{min-height:36px;min-width:36px}
#panModeBtn{font-size:11px}
#panModeBtn[hidden]{display:none}
#panModeBtn.active{background:var(--accent);color:#10141b}
.map-bottom{padding:0 11px 10px}
.side-section{padding:17px;border:0}
.sidepanel h2{font-size:20px;line-height:1.25}
.sidepanel .coordinate{font-size:21px;margin:8px 0 14px;color:#e7e9ec}
.readout-caption{align-items:center;flex-wrap:wrap;gap:4px;margin-bottom:2px}
.readout-caption .mini-label{margin:0}
.value-row{grid-template-columns:54px minmax(56px,.75fr) minmax(116px,1.3fr);gap:8px;min-height:61px;padding:9px 0}
.value-row .formula{font-size:17px}
.value-row .number{font-size:29px;font-weight:500}
.value-row .unit{font-size:9px;min-width:0;display:block}
.yield-column-heads{display:grid;grid-template-columns:54px minmax(56px,.75fr) minmax(116px,1.3fr);gap:8px;align-items:end;margin:12px 0 4px;color:var(--muted);font-size:10px;line-height:1.4}
.yield-column-heads>span:not(:first-child){text-align:right}
.value-row .abundance{text-align:right}
.material{text-align:right;min-width:0}
.material-main{white-space:nowrap;display:block}
.material-number{font:25px ui-monospace,monospace}
.material-unit{font-size:10px;margin-left:4px;color:var(--muted)}
.oxygen-contribution{display:block;font-size:10px;color:var(--muted);margin-top:3px;white-space:nowrap;font-variant-numeric:tabular-nums}
.oxygen-total{display:flex;justify-content:space-between;gap:10px;align-items:center;border-block:1px solid #555b65;margin-top:13px;padding:13px 0}
.oxygen-total .mini-label{letter-spacing:.7px;font-size:9px;display:block;margin:0}
.oxygen-total strong{font:25px ui-monospace,monospace;white-space:nowrap}
.oxygen-total .quiet{font-size:10px;margin-top:4px}
.oxygen-total .quiet[hidden]{display:none}
.yield-assumption{font-size:10px}
.value-row.selected{background:#ffffff07;box-shadow:inset 2px 0 #e7e9ec;padding-inline:9px;margin-inline:-9px}
.quiet{line-height:1.5}
#readoutNote{font-size:11px;margin:10px 0 14px}
.coordinate-editor,.elevation-method{border-top:1px solid var(--line)}
.coordinate-editor summary,.elevation-method summary{padding:10px 0;color:var(--muted);font-size:11px;cursor:pointer}
.coord-fields{flex-wrap:nowrap;gap:6px;padding-bottom:3px}
.coord-fields label{width:auto;flex:1;min-width:0}
.coord-fields input{min-height:38px}
.coord-fields button{width:auto;min-height:38px}
.elevation-readout{margin-top:12px;padding-top:10px}
.elevation-readout .mini-label{font-size:9px}
.elevation-readout strong{font-size:18px;color:#d5dbe2}
.elevation-method{border:0}
.elevation-method summary{padding:5px 0 9px;font-size:10px}
#exportBtn{margin-top:8px;min-height:38px}
.point-tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:9px;padding:9px 13px;background:var(--panel);border:1px solid var(--line);border-radius:9px}
.point-tools .elevation-summary{flex:1;min-width:160px}
.point-tools .elevation-readout{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0;padding:0;border:0}
.point-tools .elevation-readout .mini-label{margin:0}
.point-tools .elevation-readout strong{margin:0;font-size:17px}
.point-tools .elevation-method summary{padding:3px 0 0;font-size:10px}
.point-tools .elevation-method .quiet{max-width:600px;font-size:10px;margin:4px 0 0}
.point-tools #exportBtn{width:auto;margin:0;padding:8px 12px;font-size:11px;flex-shrink:0}
.map-options>summary{padding:12px 14px;cursor:pointer;font-size:12px;font-weight:500}
.map-options>summary::marker{color:var(--muted)}
.summary-hint{font-weight:400;font-size:10px;color:var(--muted);margin-left:9px}
.options-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:0 14px 14px;gap:14px}
.options-grid>div{min-width:0}
.terrain-controls,.annotation-controls{border:0;border-radius:0;padding:0;margin:0;gap:9px}
.terrain-factor{margin-left:0;flex-wrap:wrap}
.annotation-controls{padding-top:12px;margin-top:12px;border-top:1px solid var(--line)}
.annotation-label{width:100%}
.opacity-control{margin-left:0;flex-wrap:wrap;width:100%}
.opacity-control input{flex:1;min-width:60px;max-width:180px}
.check{min-height:32px}
.check input{width:16px;height:16px;flex-shrink:0;accent-color:#e7e9ec}
.options-grid h2{font-size:13px;margin:0 0 8px}
.color-controls{margin:0;padding:0;border:0}
.color-row{gap:7px}
.color-row input[type=color]{width:38px;height:32px}
.color-row button{font-size:10px;min-height:34px}
.scale-control{margin-top:6px}
.numerical-settings{grid-column:1/-1;border-top:1px solid var(--line);padding-top:12px;display:flex;flex-wrap:wrap;gap:8px}
.numerical-settings .mini-label{width:100%;margin:0}
.numerical-settings .full{width:auto;flex:1;min-width:150px;min-height:38px;margin:0!important;font-size:11px}
.numerical-settings .quiet{width:100%;margin:0}
.import-button{color:var(--text);background:#1b2028;border-color:#555b65}
.import-button:hover{background:#303741!important}
.foot{padding:0 22px 18px}
@media(max-width:1100px){
 .shell{grid-template-columns:minmax(0,1fr) 370px;padding:12px 16px 20px;gap:12px}
 header{padding:14px 16px 0}
 .stage{height:330px}
 .side-section{padding:14px}
 .sidepanel h2{font-size:18px}
 .summary-hint{display:block;margin:4px 0 0 15px}
 .options-grid{grid-template-columns:1fr}
 .numerical-settings{grid-column:auto}
}
@media(max-width:800px){
 .shell{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"map" "inspector";gap:12px;padding:12px}
 header{padding:12px 12px 0}
 h1{font-size:21px}
 .titleline{align-items:center}
 .titleline>button{font-size:10px;padding:7px}
 .sidepanel{display:block;position:static}
 .stage{height:clamp(220px,52vw,350px);margin:8px}
 .stage.globe-mode{height:clamp(290px,70vw,420px)}
 .mapbar{padding:8px;gap:7px}
 .content-modes{padding:7px 8px 0}
 .content-modes .mode-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
 .content-modes .mode-controls button{font-size:11px;padding:6px 8px;min-height:38px}
 .tabs{gap:3px}
 .tabs button{padding:7px 8px;min-width:44px}
 .viewer-meta{padding:8px 9px 0}
 .sidepanel .coordinate{font-size:22px;margin-bottom:11px}
 .value-row{min-height:57px;padding:7px 0}
 .value-row .number{font-size:24px}
 .value-row .formula{font-size:15px}
 .value-row .unit{font-size:9px}
 .material-number{font-size:23px}
 .sidepanel h2{font-size:20px}
 .side-section{padding:16px}
 .map-bottom{font-size:10px;gap:7px}
 .map-bottom .help{gap:7px}
 .point-tools{padding:8px 10px}
 .point-tools #exportBtn{margin-left:auto}
 .foot{padding:0 12px 18px}
}
@media(max-width:360px){
 .titleline{flex-wrap:wrap}
 .tabs button{padding-inline:7px;min-width:40px}
 .coordinate{letter-spacing:-.8px}
 .side-section{padding:13px}
 .yield-column-heads,.value-row{grid-template-columns:44px minmax(50px,.75fr) minmax(116px,1.3fr);gap:6px}
 .value-row .unit{font-size:8px}
 .material-number{font-size:21px}
 .material-unit{font-size:9px;margin-left:3px}
 .value-row .formula{font-size:14px}
 .oxygen-total strong{font-size:22px}
 .coord-fields{flex-wrap:wrap}
 .coord-fields label{flex:1 1 40%}
 .coord-fields button{width:100%}
}
/* Keep the compact workbench, with touch targets that remain easy to use. */
@media(max-width:800px),(pointer:coarse){
 .tabs button,.mode-controls button,.content-modes .mode-controls button,#aboutBtn,.map-controls button,.color-row button,.numerical-settings .full,.point-tools #exportBtn,.coord-fields button,dialog .close{min-height:44px}
 .map-controls button{min-width:44px}
 .check{min-height:44px}
 .color-row input[type=color]{width:44px;height:44px}
 .coord-fields input,.terrain-factor select{font-size:16px;min-height:44px}
 .coordinate-editor summary,.elevation-method summary,.point-tools .elevation-method summary{min-height:44px;padding-block:12px}
 .opacity-control input{height:44px}
 .tabs button{min-width:44px}
}
@media(max-width:800px){
 .foot{overflow-wrap:anywhere}
 dialog{padding:18px;max-height:85dvh}
}