/* WO-MAPMOG-REV1-SELECT-013: the Select screen (design/artboards 48-55) and the
   Report card (53). Theme tokens only (--v-*), so light, dark and neon all work. */
#pc-select[hidden] { display: none; }
#pc-select .pc-sel-dim { position: fixed; inset: 0; z-index: 21; background: rgba(15, 20, 35, .26); pointer-events: none; }
#pc-select .pc-sel-capture { position: fixed; inset: 0; z-index: 22; cursor: crosshair; touch-action: none; }
#pc-select .pc-sel-svg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 23; pointer-events: none; overflow: visible; }
#pc-select .pc-sel-svg rect, #pc-select .pc-sel-svg polygon, #pc-select .pc-sel-svg polyline {
  fill: color-mix(in srgb, var(--v-acc) 16%, transparent); stroke: var(--v-acc); stroke-width: 2.5; stroke-linejoin: round;
}
#pc-select .pc-sel-svg polyline { fill: none; stroke-dasharray: 7 5; }
#pc-select .pc-sel-svg [hidden] { display: none; }

/* Box resize handles (4 corners + 4 edge midpoints): a plain HTML overlay in the
   same unzoomed px space as .pc-sel-svg (deliberately NOT in the --pc-ui-scale
   zoom group below), so they stay a fixed ~12px on screen at any chrome scale. */
#pc-select .pc-sel-handles { position: fixed; inset: 0; z-index: 24; pointer-events: none; }
#pc-select .pc-sel-handle {
  position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; box-sizing: border-box;
  background: #fff; border: 2px solid #141821; border-radius: 3px; pointer-events: auto; touch-action: none;
}
#pc-select .pc-sel-handle[data-handle="nw"], #pc-select .pc-sel-handle[data-handle="se"] { cursor: nwse-resize; }
#pc-select .pc-sel-handle[data-handle="ne"], #pc-select .pc-sel-handle[data-handle="sw"] { cursor: nesw-resize; }
#pc-select .pc-sel-handle[data-handle="n"], #pc-select .pc-sel-handle[data-handle="s"] { cursor: ns-resize; }
#pc-select .pc-sel-handle[data-handle="e"], #pc-select .pc-sel-handle[data-handle="w"] { cursor: ew-resize; }

.pc-sel-glass {
  background: var(--v-surf); color: var(--v-ink); border: 1px solid var(--v-edge); box-shadow: var(--v-sh);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-family: var(--v-font, Inter, system-ui, sans-serif);
}
/* Moved up into the top row (founder: "move the Drag to select hint up to
   where the notification pills would be, it is taking up too much screen
   real estate") -- a small one-line pill, vertically roughly centred on the
   MapMog logo pill (top:20px), never tall enough to collide with it or
   with the top-right icon column. */
#pc-select .pc-sel-hint {
  position: fixed; z-index: 28; left: 50%; top: 22px; transform: translateX(-50%); display: flex; align-items: center; gap: 6px;
  border-radius: 99px; padding: 5px 14px; font-size: 13px; font-weight: 600; white-space: nowrap; max-width: 92vw; line-height: 1.3;
  overflow: hidden;
}
/* select-ui.js's positionHint() caps max-width to the live gap between the
   logo and the top-right icon column, so the text (never the pill) is what
   gives way on a narrow phone -- it never overlaps either neighbour. */
#pc-select .pc-sel-hint span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#pc-select .pc-sel-hint svg { width: 14px; height: 14px; color: var(--v-acc); flex: none; }
#pc-select .pc-sel-hint kbd {
  font: 700 12px Inter, system-ui, sans-serif; background: var(--v-surf2); color: var(--v-ink); border: 1px solid var(--v-line);
  border-bottom-width: 2px; border-radius: 6px; padding: 0 6px; margin: 0 2px;
}
/* The tool pill sits in the paint dock's own slot -- same bottom offset and
   roughly the same height -- since #pc-bottom-dock is hidden for as long as
   Select is active (body.pc-selecting, below). */
#pc-select .pc-sel-tools {
  position: fixed; z-index: 28; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; gap: 4px;
  border-radius: 99px; padding: 8px;
}
#pc-select .pc-sel-tools button {
  display: flex; align-items: center; gap: 7px; font: 600 15px Inter, system-ui, sans-serif; padding: 10px 20px; border-radius: 99px;
  color: var(--v-mut); background: transparent; border: 0; cursor: pointer; min-height: 52px;
}
#pc-select .pc-sel-tools button svg { width: 20px; height: 20px; color: var(--v-ic); }
#pc-select .pc-sel-tools button.on { background: var(--v-acc); color: var(--v-accink); }
#pc-select .pc-sel-tools button.on svg { color: var(--v-accink); }
#pc-select .pc-sel-chip {
  position: fixed; z-index: 27; border-radius: 99px; padding: 6px 14px; font-size: 14px; font-weight: 600; white-space: nowrap; pointer-events: none;
}
#pc-select .pc-sel-chip span { color: var(--v-mut); font-weight: 500; margin-left: 8px; }
#pc-select .pc-sel-bar {
  position: fixed; z-index: 29; display: flex; align-items: center; gap: 4px; border-radius: 18px; padding: 8px;
}
#pc-select .pc-sel-bar button {
  display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 14px; min-width: 64px; min-height: 52px; border-radius: 14px;
  background: transparent; border: 0; color: var(--v-ink); cursor: pointer; font: 600 12px Inter, system-ui, sans-serif;
}
#pc-select .pc-sel-bar button:hover, #pc-select .pc-sel-bar button:focus-visible { background: var(--v-surf2); }
#pc-select .pc-sel-bar button svg { width: 26px; height: 26px; color: var(--v-ic); }
#pc-select .pc-sel-bar button em { font-style: normal; color: var(--v-mut); white-space: nowrap; }
/* Live lane batch2: the asymmetric radius (0 14px 14px 0) made the hover fill square
   on the left side -- the divider line doesn't need to force square corners. */
/* f21: founder -- "remove this small line next to the cancel button". */
#pc-select .pc-sel-bar button[data-act="cancel"] { border-left: 0; border-radius: 14px; }
#select-btn.active { background: var(--v-acc); color: var(--v-accink); }

/* Select and Paint are mutually exclusive screens (founder directive): while
   Select is active, the paint dock is fully hidden -- the select tool pill
   (above) replaces it in the same bottom slot. */
body.pc-selecting #pc-bottom-dock { display: none; }

/* Report card (artboard 53): a bottom sheet, same glass as the rest of Select. */
.pc-rep-card[hidden] { display: none; }
.pc-rep-card {
  position: fixed; z-index: 65; left: 50%; bottom: 20px; transform: translateX(-50%); width: min(760px, calc(100vw - 24px));
  box-sizing: border-box; border-radius: 20px; padding: 16px;
}
.pc-rep-card .pc-rep-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.pc-rep-card .pc-rep-flag { width: 42px; height: 42px; border-radius: 12px; background: var(--v-acc); color: var(--v-accink); display: grid; place-items: center; flex: none; }
.pc-rep-card .pc-rep-flag svg { width: 22px; height: 22px; }
.pc-rep-card h2 { margin: 0; font-size: 19px; font-weight: 700; }
.pc-rep-card .pc-rep-sub { color: var(--v-mut); font-size: 14px; flex: 1; min-width: 0; }
.pc-rep-card .pc-rep-x { width: 40px; height: 40px; border-radius: 12px; border: 0; background: var(--v-surf2); color: var(--v-ic); font-size: 22px; cursor: pointer; }
.pc-rep-card .pc-rep-reasons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.pc-rep-card .pc-rep-reasons button {
  background: var(--v-surf2); color: var(--v-ink); border: 0; border-radius: 12px; padding: 12px 14px; min-height: 44px;
  font: 600 15px Inter, system-ui, sans-serif; text-align: left; cursor: pointer;
}
.pc-rep-card .pc-rep-reasons button[aria-pressed="true"] { background: var(--v-acc); color: var(--v-accink); }
.pc-rep-card .pc-rep-foot { display: flex; align-items: center; gap: 10px; }
.pc-rep-card .pc-rep-status { flex: 1; color: var(--v-mut); font-size: 14px; min-width: 0; }
.pc-rep-card .pc-rep-status.is-error { color: var(--v-live); }
.pc-rep-card .pc-rep-foot button { border: 0; border-radius: 99px; padding: 10px 20px; min-height: 44px; font: 700 16px Inter, system-ui, sans-serif; cursor: pointer; }
.pc-rep-card .pc-rep-cancel { background: var(--v-surf2); color: var(--v-ink); }
.pc-rep-card .pc-rep-send { background: var(--v-acc); color: var(--v-accink); }
.pc-rep-card .pc-rep-send:disabled { opacity: .45; cursor: default; }

/* Phone (artboard 55): full-width action bar at the bottom, tools and hint above it. */
@media (max-width: 600px) {
  #pc-select .pc-sel-hint { top: 18px; font-size: 12px; padding: 5px 12px; }
  #pc-select .pc-sel-hint kbd { display: none; }
  #pc-select .pc-sel-tools { bottom: 24px; }
  #pc-select .pc-sel-bar { left: 0 !important; right: 0; top: auto !important; bottom: 0; border-radius: 20px 20px 0 0; padding: 14px 8px 28px; justify-content: space-around; }
  #pc-select .pc-sel-bar button { min-width: 0; flex: 1; padding: 8px 4px; }
  #pc-select .pc-sel-bar button[data-act="cancel"] { border-left: 0; margin-left: 0; padding-left: 4px; }
  .pc-rep-card { bottom: 8px; padding: 12px; }
  .pc-rep-card .pc-rep-reasons { grid-template-columns: repeat(2, 1fr); }
  .pc-rep-card .pc-rep-sub { display: none; }
}

/* WO-MAPMOG-REV1-SELECT-016: read-only outline of a shared Select link. */
#pc-shared-sel { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 23; pointer-events: none; overflow: visible; }
#pc-shared-sel rect { fill: color-mix(in srgb, var(--v-acc) 16%, transparent); stroke: var(--v-acc); stroke-width: 2.5; stroke-linejoin: round; }

/* Live lane batch2: the Select pill eases in like the Paint dock does (style.css pc-dock-rest-in).
   #pc-select is shown by removing `hidden`, so the animation re-runs on every enter. */
#pc-select .pc-sel-tools { transform-origin: 50% 100%; animation: pc-dock-rest-in 180ms ease-out; }
@media (prefers-reduced-motion: reduce) { #pc-select .pc-sel-tools { animation: none; } }

/* Live lane batch2: Select's pills shrink with the rest of the chrome (--pc-ui-scale,
   style.css). select-ui.js divides its px positions by this zoom. Phone stays at 1. */
@media (min-width: 601px) {
  #pc-select .pc-sel-hint, #pc-select .pc-sel-tools, #pc-select .pc-sel-chip, #pc-select .pc-sel-bar { zoom: var(--pc-ui-scale); }
}