/* Obsidian glass: the app's visual layer (2026-09-27).

   Loaded after the <style> block in index.html and overrides its surfaces,
   not its behaviour. Every rule here is paint, radius, spacing or type; the
   geometry the scripts and tests depend on (44pt reach, the type scale,
   --panel-h, the grab bar's contrast) is kept as index.html defines it.

   The material is obsidian, the volcanic glass Armenia is known for: dark,
   smoky, translucent, with a warm edge where the light catches it. Every
   surface that floats over the map is one island of it, inset from the
   screen edges so the map reads as the page and the chrome as objects laid
   on top. The warm top rim is the one decorative thing, and it is the same
   tuf as the text, so the palette stays basalt, tuf and the meaning colours.

   The tint is heavier than glass usually is, on purpose. This is read in
   sun, at arm's length, over bright fields: at .64 the dim text still clears
   4.5:1 over a pale stubble field, and the sheets that carry reading text go
   to .80. Blur and saturation are what make it read as glass, not a thin
   tint. */

:root{
  --ob-tint:rgba(20,20,24,.64);
  --ob-tint-sheet:rgba(20,20,24,.80);
  --ob-tint-stuck:rgba(20,20,24,.93);
  --ob-fx:blur(26px) saturate(175%);
  /* A warm top highlight and a faint all-round edge. Inset, so it paints on
     scroll containers without scrolling away with their content. */
  --ob-rim:inset 0 1px 0 rgba(255,232,222,.20),inset 0 0 0 1px rgba(255,255,255,.07);
  --ob-drop:0 14px 34px -12px rgba(0,0,0,.62),0 2px 8px -2px rgba(0,0,0,.28);
  --ob-fill:rgba(255,255,255,.075);
  --ob-fill-hi:rgba(255,255,255,.14);
  --ob-press:linear-gradient(rgba(255,255,255,.12),rgba(255,255,255,.12));
  --ob-line:rgba(255,255,255,.09);
  --r-island:20px; --r-sheet:28px; --r-ctl:14px;
  --ob-ease:cubic-bezier(.32,.72,0,1);

  /* The camera HUD was already built on these four; redefining them moves
     it onto the same material without touching its rules. */
  --glass:rgba(20,20,24,.56); --glass-strong:rgba(20,20,24,.76);
  --glass-fx:blur(26px) saturate(175%);
  --glass-edge:rgba(255,255,255,.14);
  --glass-hi:inset 0 1px 0 rgba(255,232,222,.18);
}
html,body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* ---- one material ------------------------------------------------------ */
.panel,#gpsbadge,#meas,#locate,#gear,#detail,#sheet,#mpanel{
  background:none;background-color:var(--ob-tint);
  -webkit-backdrop-filter:var(--ob-fx);backdrop-filter:var(--ob-fx);
  border:0;box-shadow:var(--ob-rim),var(--ob-drop)}
#detail,#sheet,#mpanel,#layerpop,#coderes{background-color:var(--ob-tint-sheet)}

/* One ring for every control reached by keyboard. */
button:focus-visible,[role=button]:focus-visible,input[type=range]:focus-visible,
#colcustom:focus-within{outline:2px solid var(--tuf);outline-offset:2px}
#codeq:focus-visible{outline:none}

/* ---- top bar ------------------------------------------------------------ */
/* 44 px field plus 5 px of glass around it: 54 px, ending at 64. Everything
   that hangs below the bar is placed from that number. */
#bases{border-radius:var(--r-island);padding:5px 46px 5px 5px;gap:4px}
#bases #layers{min-height:44px;padding:0 12px 0 10px;border-radius:var(--r-ctl);
  color:var(--tuf);font:600 var(--t-footnote)/1 var(--ui);letter-spacing:0;
  transition:background-color .15s}
#bases #layers svg{width:17px;height:17px;color:var(--tuf-dim)}
#bases #layers:active{background-color:var(--ob-fill)}
#bases #layers[aria-expanded=true]{background-color:var(--tuf);color:var(--ink)}
#bases #layers[aria-expanded=true] svg{color:var(--ink)}
#codewrap{gap:8px;padding:0 10px 0 12px;border:0;border-radius:var(--r-ctl);
  background:var(--ob-fill);transition:background-color .15s,box-shadow .15s}
#codewrap svg{width:16px;height:16px}
/* Focus lights the field's rim in tuf, the same warm edge the glass has. */
#codewrap:focus-within{background:var(--ob-fill-hi);border:0;
  box-shadow:inset 0 0 0 1.5px rgba(238,218,210,.6)}
#codeclear{width:22px;height:22px;background:var(--ob-fill-hi);color:var(--tuf);
  font:600 15px/22px var(--ui)}

#goto-site{top:calc(20px + env(safe-area-inset-top,0px));right:15px;
  width:34px;height:34px;border-radius:11px;background:none;border:0;
  box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;
  color:var(--tuf-dim)}
#goto-site svg{width:19px;height:19px}
#goto-site:active{background:var(--ob-fill-hi);color:var(--tuf)}

/* ---- popovers under the bar -------------------------------------------- */
#layerpop,#coderes{top:calc(70px + env(safe-area-inset-top,0px));
  border-radius:18px;padding:6px}
/* Slides and fades, never scales: a row measured mid-entrance must still be
   its full 44 px. */
#layerpop[data-show=true],#coderes[data-show=true]{animation:ob-pop .18s var(--ob-ease)}
@keyframes ob-pop{from{opacity:0;transform:translateY(-6px)}}
#layerpop{min-width:180px}
#layerpop button{min-height:44px;padding:0 14px;border-radius:12px;
  color:var(--tuf);font:500 var(--t-subhead)/1.2 var(--ui);
  letter-spacing:var(--tr-subhead)}
#layerpop button:active{background:var(--ob-fill)}
#layerpop button[aria-pressed=true]{background:var(--tuf);color:var(--ink);font-weight:600}
#coderes .hdr{padding:9px 12px 8px;font:600 var(--t-caption2)/1 var(--ui);letter-spacing:.08em}
#coderes button.hit{border-radius:12px}
#coderes button.hit:hover{background:var(--ob-fill)}
#coderes button.hit.on,#coderes button.hit[aria-busy=true]{background:var(--ob-fill-hi)}
#coderes button.hit[aria-busy=true]::after{font:600 var(--t-caption2) var(--ui)}
#coderes .hit+.note{border-top-color:var(--ob-line)}

/* ---- status under the bar ---------------------------------------------- */
#gpsbadge{top:calc(72px + env(safe-area-inset-top,0px));height:32px;
  padding:0 12px 0 10px;border-radius:999px}
#gpsbadge b{font:600 var(--t-footnote) var(--mono)}

/* Messages keep their meaning colours, as tinted glass rather than slabs. */
#hint,#netstat{top:calc(72px + env(safe-area-inset-top,0px));left:10px;right:10px;
  border:0;border-radius:18px;padding:12px 14px;
  -webkit-backdrop-filter:var(--ob-fx);backdrop-filter:var(--ob-fx);
  box-shadow:var(--ob-rim),var(--ob-drop)}
#hint{background:rgba(30,63,224,.86);font:600 var(--t-footnote)/1.35 var(--ui)}
#hint small{font:400 var(--t-caption1)/1.35 var(--ui);opacity:.88}
#netstat{background:rgba(194,65,12,.9)}
#errbar{border-radius:14px;padding:10px 12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),var(--ob-drop)}
/* Every message closes on a tap, and the × is what says so. Without it the
   strips read as part of the screen, and a strip nobody knows how to close
   is a strip that costs a third of the map for as long as it stands. */
#hint,#errbar,#netstat,#cam-warn{padding-right:36px;cursor:pointer}
#cam-warn{position:relative}
#hint::after,#errbar::after,#netstat::after,#cam-warn::after{content:"×";
  position:absolute;top:50%;right:12px;transform:translateY(-50%);
  font:400 22px/1 var(--ui);opacity:.85}
/* Upstream down, once read: a red dot in the corner instead of a strip.
   The outage usually lasts the whole visit, and the strip only needs
   reading once — after that it is just in the way. Tap brings it back. */
#netstat[data-mini=true]{left:auto;width:36px;height:36px;padding:0;
  border-radius:50%;font-size:0;background:#D70015}
#netstat[data-mini=true]::after{content:"!";left:0;right:0;text-align:center;
  font:800 19px/1 var(--ui);opacity:1}

/* ---- the button rail ---------------------------------------------------- */
/* Measure, follow and settings as one column of glass: a single object on
   the map rather than three, divided by hairlines. The same 50 px pitch
   stacks them with no gap, so the column has one edge to find. */
#meas,#locate,#gear{right:10px;width:50px;height:50px;color:var(--tuf);
  font-size:0;
  transition:background-color .18s,color .18s,bottom .26s var(--ob-ease)}
#meas svg,#locate svg,#gear svg{width:23px;height:23px;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#meas svg .node,#locate svg .dot{fill:currentColor;stroke:none}
#meas{bottom:calc(116px + var(--panel-h,0px) + var(--sa));border-radius:18px 18px 0 0;
  box-shadow:inset 0 1px 0 rgba(255,232,222,.20),inset 1px 0 0 rgba(255,255,255,.07),
             inset -1px 0 0 rgba(255,255,255,.07)}
#locate{bottom:calc(66px + var(--panel-h,0px) + var(--sa));border-radius:0;
  box-shadow:inset 0 1px 0 var(--ob-line),inset 1px 0 0 rgba(255,255,255,.07),
             inset -1px 0 0 rgba(255,255,255,.07)}
#gear{bottom:calc(16px + var(--panel-h,0px) + var(--sa));border-radius:0 0 18px 18px;
  box-shadow:inset 0 1px 0 var(--ob-line),inset 1px 0 0 rgba(255,255,255,.07),
             inset -1px 0 0 rgba(255,255,255,.07),inset 0 -1px 0 rgba(255,255,255,.07),
             var(--ob-drop)}
#meas:active,#locate:active,#gear:active{background-image:var(--ob-press)}
#meas[data-on=true]{background-color:var(--measure);color:#111}
#locate[data-on=true]{background-color:var(--c-you);color:#fff}
#gear[data-on=true]{background-color:var(--tuf);color:var(--ink)}

/* The scale is a bracket, so it stays one, in glass. */
.leaflet-control-scale-line{background:var(--ob-tint)!important;
  -webkit-backdrop-filter:var(--ob-fx);backdrop-filter:var(--ob-fx);
  border:1.5px solid rgba(238,218,210,.75)!important;border-top:none!important;
  border-radius:0 0 6px 6px;padding:2px 8px!important}

/* ---- sheets ------------------------------------------------------------- */
/* Islands, not slabs: inset from both sides and lifted off the bottom edge,
   rounded on every corner. --panel-h still measures the sheet itself, so the
   rail, which sits 16 px above the screen edge plus that height, now clears
   the sheet by the 8 px it was lifted. */
#detail,#sheet,#mpanel{left:8px;right:8px;bottom:calc(8px + var(--sa));
  border:0;border-radius:var(--r-sheet);
  box-shadow:var(--ob-rim),0 -4px 34px -8px rgba(0,0,0,.55);
  transition:transform .26s var(--ob-ease)}
#detail{padding:0 16px 16px}
#sheet{padding:0 16px 14px}
#mpanel{padding:14px 16px 16px}
#detail[data-open=false],#sheet[data-open=false]{
  transform:translateY(calc(100% + 16px + var(--sa)));
  transition:transform .26s var(--ob-ease),visibility 0s .26s}
#mpanel[data-show=true]{animation:ob-rise .24s var(--ob-ease)}
@keyframes ob-rise{from{opacity:0;transform:translateY(16px)}}

/* The sticky heads carried the old panel's opaque colour, which on glass is
   a dark slab across the top. Clear, until something scrolls under them:
   then the head frosts over, driven by the sheet's own scroll position. */
#grab,#detail .grabbar,#detail .dhead{background:transparent}
#grab div,#detail .grabbar div{width:40px;border-radius:3px}
@supports (animation-timeline:scroll()){
  #grab,#detail .dhead{
    animation:ob-stuck linear both!important;
    animation-timeline:scroll(nearest block)!important;
    animation-range:0 14px!important}
}
@supports not (animation-timeline:scroll()){
  #grab,#detail .dhead{background:var(--ob-tint-stuck)}
}
@keyframes ob-stuck{to{background-color:var(--ob-tint-stuck);
  box-shadow:0 1px 0 var(--ob-line)}}
/* The head spans the whole sheet so its frosting has no side gaps; the
   column inside it is already capped by the sheet's own width. */
#detail .dwrap{max-width:none}
#detail .dhead{margin:0 -16px;padding:0 16px 10px}

/* ---- parcel detail ------------------------------------------------------ */
/* The area is a quantity, not a code: set in the interface face with
   tabular figures. The code stays in mono because it is read digit by
   digit and written down. */
#detail .big{font-family:var(--ui);font-weight:650;
  font-variant-numeric:tabular-nums}
#detail .sub{font-family:var(--ui);margin-top:2px}
#d-copy{border-radius:12px}
#d-copy:active{background:var(--ob-fill-hi)}

#cam,#dclose{top:31px;width:36px;height:36px;border-radius:18px;border:0;
  display:grid;place-items:center;padding:0;font-size:0;
  transition:background-color .15s}
#cam svg,#dclose svg{fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
#cam svg{width:19px;height:19px}
#dclose svg{width:14px;height:14px;stroke-width:2.2}
#cam{left:16px;background:rgba(238,218,210,.16);color:var(--tuf)}
#cam[data-on=true]{background:var(--tuf);color:var(--ink)}
#dclose{right:16px;background:var(--ob-fill);color:var(--tuf-dim)}
#cam:active,#dclose:active{background-image:var(--ob-press)}

/* The register as a grouped list: one block, rows divided by hairlines,
   label left and value right. Easier to scan than a centred column of
   pairs, and it no longer depends on both halves fitting fixed widths. */
#d-body{text-align:left}
#d-body pre{text-align:center;font:var(--t-footnote)/var(--lh-footnote) var(--ui);
  color:var(--tuf-dim)}
#d-body .eyebrow{margin:18px 0 7px 14px!important}
#reginfo{margin-top:0;padding:0 14px;border-radius:16px;background:var(--ob-fill);
  font:var(--t-subhead)/var(--lh-subhead) var(--ui);letter-spacing:var(--tr-subhead)}
#reginfo div{gap:14px;padding:11px 0;border-bottom:1px solid var(--ob-line)}
#reginfo div:last-child{border-bottom:0}
#reginfo span{font-size:var(--t-footnote);color:var(--tuf-dim)}
#reginfo b{font-weight:500;color:var(--tuf)}

#cc-btn{min-height:48px;margin-top:14px;padding:0 16px;border:0;border-radius:var(--r-ctl);
  background:var(--ob-fill-hi);color:var(--tuf);
  font:600 var(--t-subhead)/1.2 var(--ui);letter-spacing:var(--tr-subhead);
  text-transform:none;transition:transform .12s var(--ob-ease)}
#cc-btn:active:not([disabled]){transform:scale(.98);background-image:var(--ob-press)}
#cc-out .kv{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:11px 14px;background:var(--ob-fill);border-bottom:1px solid var(--ob-line);
  font:var(--t-subhead)/var(--lh-subhead) var(--mono)}
#cc-out .eyebrow+.kv{border-radius:16px 16px 0 0}
#cc-out .kv:last-child{border-radius:0 0 16px 16px;border-bottom:0}
#cc-out .eyebrow+.kv:last-child{border-radius:16px}
#cc-out .kv span{opacity:1;color:var(--tuf-dim);font:var(--t-footnote) var(--ui)}
#ccrow{margin-top:0}
#cc-in{width:100%;max-width:260px;min-height:44px;border:0;border-radius:12px;
  background:var(--ob-fill);font:1rem var(--mono)}
#cc-in:focus{box-shadow:inset 0 0 0 1.5px rgba(238,218,210,.6)}

/* ---- settings sheet ----------------------------------------------------- */
.eyebrow{font-size:var(--t-caption2);letter-spacing:.09em}
.readout{gap:4px 14px;padding:12px 14px;margin-bottom:4px;border:0;
  border-radius:16px;background:var(--ob-fill)}
.row{padding:12px 2px;border-bottom-color:var(--ob-line)}
.toggle{min-height:34px;padding:0 15px;border:0;border-radius:999px;
  background:var(--ob-fill-hi);color:var(--tuf);
  font:600 var(--t-footnote)/1 var(--ui);letter-spacing:0;text-transform:none;
  transition:background-color .15s,color .15s}
.toggle[aria-pressed=true]{background:var(--tuf);color:var(--ink)}
#swatches button[aria-pressed=true]{box-shadow:0 0 0 2px rgba(20,20,24,.9),0 0 0 4px var(--tuf)}
#thick{padding:3px;gap:5px;border-radius:12px;background:var(--ob-fill)}
#thick button{height:30px;padding:0;border:0;border-radius:9px;background:transparent;
  color:var(--tuf-dim);font:500 var(--t-caption1)/1 var(--mono)}
#thick button[aria-pressed=true]{background:var(--tuf);color:var(--ink)}
input[type=range]{accent-color:var(--tuf)}
#zooms{margin-top:6px;padding:4px 2px 2px}
#zooms .zval{color:var(--tuf-dim);font-size:var(--t-caption1)}
#accbar{background:var(--ob-fill-hi)}
#buildinfo{margin-top:16px;font-size:var(--t-caption2)}
#credits{font-size:var(--t-caption2);line-height:1.45}
#copyright{font-size:var(--t-caption2)}

/* ---- measuring ---------------------------------------------------------- */
#mpanel .eyebrow{margin-left:2px}
#mvals{gap:26px;margin:6px 2px 12px}
#mvals div span{font:600 var(--t-title1)/1.1 var(--ui);font-variant-numeric:tabular-nums;
  letter-spacing:var(--tr-title1)}
#mvals div u{font-size:var(--t-caption2);letter-spacing:.09em}
#mbtns{gap:8px}
#mbtns button{min-height:46px;padding:0 10px;border:0;border-radius:var(--r-ctl);
  background:var(--ob-fill-hi);color:var(--tuf);
  font:600 var(--t-subhead)/1 var(--ui);letter-spacing:0;text-transform:none;
  transition:transform .12s var(--ob-ease)}
#mbtns button:active{transform:scale(.97);background-image:var(--ob-press)}
/* Done is the way out of the tool, so it is the one filled button. */
#mbtns #m-done{background:var(--tuf);color:var(--ink)}

/* ---- on the map --------------------------------------------------------- */
.placelbl{padding:3px 9px;border-radius:999px;background:rgba(20,20,24,.8);
  border:1px solid rgba(255,255,255,.16)}
.placelbl.big{background:rgba(20,20,24,.86)}
.leaflet-popup-content-wrapper{background:var(--ob-tint-stuck);border:0;border-radius:16px;
  box-shadow:var(--ob-rim),var(--ob-drop)}
.leaflet-popup-tip{background:var(--ob-tint-stuck)}

/* ---- camera ------------------------------------------------------------- */
/* The picture is the content; the controls keep to its edges and each
   takes as little of it as it can while staying one touch away.
   Top: close, and a card with the accuracy switch and the instruction.
   Right: the lift rail. Bottom-left: the map and its zoom. Bottom: how far
   off the line can be, the pin chips, and the line pills. */

/* top bar */
#cambar{display:flex;align-items:flex-start;gap:8px;pointer-events:none}
#cambar>*{pointer-events:auto}
#cam-close{flex:none;width:44px;height:44px;padding:0;border:0;
  border-radius:22px;display:grid;place-items:center;color:#fff;
  background:var(--glass);box-shadow:var(--glass-hi),0 0 0 .5px var(--glass-edge);
  -webkit-backdrop-filter:var(--glass-fx);backdrop-filter:var(--glass-fx)}
#cam-close:active{background-image:var(--ob-press)}

/* the card: switch and skip on one line, then the corner, then the tracker */
#camcard{flex:0 1 auto;min-width:0;gap:7px;padding:7px 8px 9px 7px;border-radius:22px}
/* Only the switch (low accuracy): the card hugs it. A corner to walk to:
   the card takes the row, for the tracker's length. */
#camcard:has(>#camtask:not([hidden])),#camcard:has(>#camsetup:not([hidden])){flex:1}
#camcard:not(:has(>#camtask:not([hidden]))):not(:has(>#camsetup:not([hidden]))){padding:7px}
#camcard .row{padding:0;border:0;gap:8px}
#camtask{padding:0 6px;font:600 var(--t-subhead)/1.3 var(--ui);
  letter-spacing:var(--tr-subhead)}
#camtask[hidden]{display:none}
#cammode{display:inline-grid;grid-template-columns:auto auto;gap:2px;padding:2px;
  border-radius:15px;background:rgba(0,0,0,.35)}
#cammode button{flex-direction:row;justify-content:center;min-height:30px;padding:0 14px;border-radius:13px;
  font:600 var(--t-footnote)/1 var(--ui);color:var(--tuf-dim)}
/* A 30 px pill in a 44 px world: the reach is made up invisibly. */
#cammode button{position:relative}
#cammode button::after{content:"";position:absolute;left:0;right:0;top:50%;
  height:44px;transform:translateY(-50%)}
/* A real button: an edge, a fill, and an icon for "go elsewhere", so it
   does not read as a caption beside the switch. */
#cam-skip{margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  min-height:32px;padding:0 12px 0 10px;border:1px solid rgba(255,255,255,.45);
  border-radius:16px;background:rgba(255,255,255,.18);color:#fff;
  font:600 var(--t-footnote)/1 var(--ui);white-space:nowrap;position:relative}
#cam-skip[hidden]{display:none}
#cam-skip::before{content:"";flex:none;width:15px;height:15px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h13l-3.5-3.5M20 17H7l3.5 3.5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h13l-3.5-3.5M20 17H7l3.5 3.5'/%3E%3C/svg%3E") center/contain no-repeat}
#cam-skip::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;
  transform:translateY(-50%)}
#cam-skip:active{background:rgba(255,255,255,.3)}
#camsetup{padding:0 6px;border-top:0;margin-top:0}
#camsetup .node{width:14px;height:14px;border-width:2px}
#camsetup .node[data-s=target]{border-width:2.5px}
#camsetup .node[data-s=pinned]::after{left:3.5px;top:1px;width:4px;height:7px;border-width:0 2px 2px 0}
#camsetup .base{height:4px;margin:0 6px}

/* the lift rail: slim, value on top, name at the foot */
#camlift{padding:10px 4px 8px;border-radius:22px}
.liftcol{width:44px;gap:6px}
#camlift input[type=range]{width:28px;height:128px}
.liftlab{font:600 var(--t-caption2)/1 var(--ui);letter-spacing:0;text-transform:none}
.liftval{font-size:var(--t-caption2);min-width:0}
/* Wall on: still one column. The switch at the foot names the slider, so
   the per-slider label goes, and the slider gives up the switch's height. */
#liftpick{display:none}
#camlift:has(#wallcol:not([hidden])) #liftpick{display:grid;gap:2px;margin-top:8px;
  padding:2px;border-radius:14px;background:rgba(0,0,0,.35)}
#liftpick button{width:44px;min-height:34px;padding:0;border:0;border-radius:12px;
  background:transparent;color:var(--tuf-dim);font:600 var(--t-caption1)/1 var(--ui)}
#liftpick button[aria-checked=true]{background:var(--tuf);color:var(--ink)}
#liftpick button:focus-visible{outline-offset:-2px}
#camlift:has(#wallcol:not([hidden]))[data-col=lift] #wallcol,
#camlift:has(#wallcol:not([hidden]))[data-col=wall] .liftcol:not(#wallcol){display:none}
#camlift:has(#wallcol:not([hidden])) .liftlab{display:none}
#camlift:has(#wallcol:not([hidden])) input[type=range]{height:108px}

/* the map: smaller, with its zoom as one joined pill */
#camsat{width:min(40vw,150px);height:min(40vw,150px);border:1.5px solid rgba(255,255,255,.6)}
#camsat-n{transform:translate(-50%,-50%) rotate(var(--rot,0deg))
  translateY(calc(-1 * min(17.6vw,66px))) rotate(calc(-1 * var(--rot,0deg)))}
#camsat-zoom{left:calc(12px + min(40vw,150px) + 8px);gap:0}
#camsat-zoom button{width:40px;height:40px;border-radius:0;font:600 18px/1 var(--ui);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 .5px var(--glass-edge)}
#camsat-zoom button:first-child{border-radius:20px 20px 0 0;font-size:15px}
#camsat-zoom button:last-child{border-radius:0 0 20px 20px}
#camsat-zoom button:active{background-image:var(--ob-press)}

/* the bottom: a readout, the pin chips, and the line pills */
#camhud{padding:10px 12px calc(12px + var(--sa));
  background:linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,0))}
#camacc{margin:0 2px 2px}
#camacc #cam-dist{font:600 22px/1.1 var(--mono);font-variant-numeric:tabular-nums}
#camacc #cam-q{font:600 var(--t-caption1) var(--ui)}
#camstat{margin:0 2px;font-size:var(--t-caption1);opacity:.8}
#cam-warn{border-radius:12px}
/* One line at the foot: the line pills from the left, the pin chips from
   the right. They wrap only when they cannot share it. */
#camhud .cwrap{display:flex;flex-wrap:wrap;align-items:center;column-gap:8px}
#camacc,#cam-warn,#camstat{flex:1 0 100%}
#cambtns{order:1;justify-content:flex-start;gap:8px;margin-top:10px}
#campin{order:2;justify-content:flex-end;margin:10px 0 0 auto}
#cambtns button,#campin button{flex:none;min-height:40px;padding:0 16px;
  border-radius:20px;font:600 var(--t-footnote)/1.2 var(--ui);
  letter-spacing:0;text-transform:none}
#cambtns button:active,#campin button:active{background-image:var(--ob-press)}
#cambtns #cam-col{display:flex;align-items:center;gap:8px;padding-left:12px}
#cambtns #cam-col i{width:16px;height:16px;margin:0;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.9)}

/* ---- wide screens ------------------------------------------------------- */
@media (min-width:620px){
  #detail,#sheet,#mpanel{border:0;border-radius:var(--r-sheet)}
  #goto-site{left:441px;right:auto}
}