/* ---- parts map: a full-screen picture with numbered pins (mod/asset-tabs/views.js) ----
   The photo is fitted to the whole screen (nothing to scroll), the view
   chips sit top-left, "Asset Page" over "Back to Map" top-right, the editing tools small bottom-right.
   Pins are placed in per cent of the picture's own box, so they stay put at
   any size. A pin is a numbered dot with a white ring; the open one has a
   thicker ring — never colour alone (rule 8). The layer sits under the
   modal (z 90) so a pin's popup shows over it. */
.pmap-layer{position:fixed; inset:0; z-index:80; background:#000; color:#fff; overflow:hidden; touch-action:none;}
.pmap-top{position:absolute; left:0; right:0; top:0; z-index:3; display:flex; align-items:flex-start; gap:8px; padding:8px 8px 6px;
  background:linear-gradient(rgba(0,0,0,.72), rgba(0,0,0,0)); pointer-events:none;}
.pmap-top > *{pointer-events:auto;}
.pmap-title{font:600 13px/1.2 var(--mono, monospace); color:#fff; padding:6px 8px; background:rgba(0,0,0,.45); border-radius:8px; white-space:nowrap;}
.pmap-chips{display:flex; flex-wrap:wrap; gap:6px; flex:1; min-width:0;}
/* A phone in portrait (owner's first phone test, 2026-09-08: the view chips
   stacked into tall ovals under the top-right pill). First line: the machine
   and the two pills; second line: the view chips in one row that scrolls
   sideways, each chip on one line. */
@media (max-width:600px){
  .pmap-top{flex-wrap:wrap; align-items:center;}
  .pmap-title{order:0; flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis;}
  .pmap-layer .pmap-nav{order:1; flex:none; margin-left:auto;}
  .pmap-chips{order:2; flex:1 1 100%; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px;}
  html .pmap-layer .pmap-chips button.seg, html[data-theme="light"] .pmap-layer .pmap-chips button.seg{flex:none; white-space:nowrap; min-height:36px;}
}
/* The layer is black in both themes, so the chips are always light-on-dark;
   written with the theme's own specificity so light mode cannot recolour
   them (owner, 2026-09-04: "in light mode ... I cannot see the font unless
   highlighted"). */
html .pmap-layer .pmap-chips button.seg, html[data-theme="light"] .pmap-layer .pmap-chips button.seg{
  width:auto; background:rgba(0,0,0,.6); color:#fff; border:1px solid rgba(255,255,255,.55);}
html .pmap-layer .pmap-chips button.seg.on, html[data-theme="light"] .pmap-layer .pmap-chips button.seg.on{
  background:#fff; color:#111; border-color:#fff; font-weight:700;}
html .pmap-layer .pmap-corner button, html[data-theme="light"] .pmap-layer .pmap-corner button{color:#fff; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.5);}
html .pmap-layer .pmap-corner button.primary, html[data-theme="light"] .pmap-layer .pmap-corner button.primary{background:#fff; color:#111;}
html .pmap-layer .pmap-x, html[data-theme="light"] .pmap-layer .pmap-x{color:#fff; background:rgba(0,0,0,.6);}
/* "Asset Page" over "Back to Map" — worded pills top-right, not a circled ✕
   (owner, 2026-09-04); the two stacked in one column so they are the same
   size (owner, 2026-09-09: "a same size button that says Back to Map"). */
.pmap-nav{display:flex; flex-direction:column; align-items:stretch; gap:6px; flex:none;}
.pmap-x{width:auto; min-height:40px; flex:none; border-radius:20px; border:2px solid #fff; background:rgba(0,0,0,.6); color:#fff; font-size:15px; font-weight:700; line-height:1; cursor:pointer; padding:0 16px; white-space:nowrap;}
.pmap-x:hover{background:#fff; color:#111;}
.pmap-stage{position:absolute; user-select:none; -webkit-user-select:none; transform-origin:0 0; touch-action:none; cursor:grab;}
.pmap-stage:active{cursor:grabbing;}
/* see-through pins (owner, 2026-09-04): faded, still there to tap */
.pmap-layer.ghost .pmap-pin{opacity:.32;}
.pmap-layer.ghost .pmap-pin:hover, .pmap-layer.ghost .pmap-pin.on{opacity:1;}
.pmap-stage img{display:block; width:100%; height:100%; pointer-events:none;}
.pmap-stage.adding{cursor:crosshair; outline:3px dashed var(--cta, #f0a030); outline-offset:-3px;}
.pmap-pins{position:absolute; inset:0;}
/* Small plain dots — no numbers (owner, 2026-09-04: "the information is
   given when you click it"). The tap target stays 28 px through a padding
   ring that draws nothing. */
.pmap-pin{position:absolute; transform:translate(-50%, -50%) scale(var(--pin-k, 1)); width:14px; height:14px; min-width:0; min-height:0; line-height:0; border-radius:50%;
  background:var(--cta, #f0a030); color:transparent; border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.6), 0 1px 4px rgba(0,0,0,.5);
  font-size:0; cursor:pointer; padding:0; touch-action:none; box-sizing:border-box;}
.pmap-pin::before{content:''; position:absolute; inset:-8px; border-radius:50%;}   /* the finger-sized target */
/* A pin is static once placed (owner, 2026-09-04: "when i click the pin it moves and gets
   bigger, this i do not want"). The shell's button:active scale and hover tint must not
   reach it - they replaced the centring transform and the dot jumped half its width.
   The open pin is marked by a white ring, which changes neither size nor place. */
.pmap-pin:active, .pmap-pin:hover:not(:disabled), .pmap-pin.on{transform:translate(-50%, -50%) scale(var(--pin-k, 1)); background:var(--cta, #f0a030);
  width:14px; height:14px; border-width:2px;}
.pmap-pin.on{box-shadow:0 0 0 3px #fff, 0 0 0 4px rgba(0,0,0,.6); z-index:2;}
.pmap-pin:focus-visible{outline:3px solid #fff; outline-offset:2px;}
/* The pin popup's buttons (owner, 2026-09-04): icons take one square each,
   "Open … in Parts" takes the rest of the row, skinny. */
.modal .btnrow button.ico{flex:none; width:44px; min-width:44px; min-height:36px; padding:0; font-size:17px; line-height:1;}
.modal .btnrow button.slim{min-height:36px; padding:6px 12px; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pmap-corner{position:absolute; right:8px; bottom:8px; z-index:3; display:flex; gap:6px; align-items:center; flex-wrap:wrap; justify-content:flex-end;
  padding:6px; background:rgba(0,0,0,.55); border-radius:10px;}
.pmap-corner button{width:auto; flex:none;}
.pmap-count{font-size:12px; color:#ddd; padding:0 4px;}
.pmap-hint{position:absolute; left:50%; bottom:64px; transform:translateX(-50%); z-index:3; padding:8px 14px; border-radius:20px;
  background:#fff; color:#111; font-weight:700; font-size:14px; box-shadow:0 2px 8px rgba(0,0,0,.5);}
.pmap-msg{position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); text-align:center; max-width:420px; padding:20px;}
.pmap-msg .sub{color:#ccc; margin-bottom:12px;}
.pmap-msg button{width:auto;}
.pmap-card .m{margin-top:6px; font-size:13px; color:var(--muted);}
.pmap-card .b{margin-top:6px; white-space:pre-wrap;}
.pmap-pick{display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:6px; margin:4px 0 8px;}
.pmap-pick .thumb{padding:0; border:2px solid var(--line); border-radius:8px; overflow:hidden; background:#000; min-height:0; height:72px;}
.pmap-pick .thumb img{display:block; width:100%; height:100%; object-fit:cover;}
.pmap-pick .thumb.on{border-color:var(--text); box-shadow:0 0 0 2px var(--text);}
html.pmap-open #toast{z-index:95;}
@media print{ .pmap-layer{position:static; background:#fff;} .pmap-top, .pmap-corner, .pmap-hint{display:none;} .pmap-stage{position:static; width:100% !important; height:auto !important;} }