/* Doorway Field v2.0 — components added in v2 (campaign pill, rings legend, filter drawer, wheel, Rapid-Stamp, lasso sheet, list, admin). Zero inline styles. */
body:not(.role-owner) .owner-only, body:not(.role-manager) .manager-only { display: none !important; }
.topbar { pointer-events: none; gap: 6px; }
.topbar .brand { font-size: 14px; padding: 6px 10px; white-space: nowrap; }
.topbar .sync { white-space: nowrap; }
button.me { max-width: 96px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar > * { pointer-events: auto; }
.camp { position: relative; }
.camp-pill { white-space: nowrap; max-width: 130px; overflow: hidden; text-overflow: ellipsis; border: 0; background: rgba(29, 29, 31, .86); color: #fff; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; box-shadow: var(--shadow); }
.camp-menu { display: none; position: absolute; top: 34px; left: 0; min-width: 170px; background: #fff; border-radius: 12px; box-shadow: var(--shadow); padding: 4px; z-index: 20; }
.camp-menu.open { display: block; }
.camp-menu button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 9px 10px; border-radius: 8px; font-size: 14px; }
.camp-menu button.on { background: var(--soft); color: var(--red); font-weight: 700; }
button.me { border: 0; cursor: pointer; }
.badge { position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--red); color: #fff; font-size: 11px; line-height: 18px; }
.pill { position: relative; }
.ring-legend { position: absolute; top: calc(48px + var(--safe-t)); left: 70px; right: 70px; z-index: 5; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; pointer-events: none; }
.ring-legend[hidden] { display: none; }
.lg { background: rgba(255, 255, 255, .92); border-radius: 999px; padding: 2px 8px 2px 4px; font-size: 11px; font-weight: 600; box-shadow: 0 2px 6px rgba(0, 0, 0, .15); display: inline-flex; align-items: center; gap: 4px; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: middle; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); }
.route-clear { position: absolute; left: 12px; bottom: 14px; z-index: 6; border: 0; background: #1d1d1f; color: #fff; border-radius: 999px; padding: 8px 12px; font-weight: 600; box-shadow: var(--shadow); }
.route-clear[hidden] { display: none; }

/* Rapid-Stamp bar */
.stamp-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 11; background: #fff; border-radius: 16px 16px 0 0; box-shadow: 0 -6px 24px rgba(0, 0, 0, .2); padding: 8px 12px 10px; display: none; }
.stamp-bar.open { display: block; }
.stamp-bar .x { position: absolute; top: 6px; right: 10px; }
.stamp-bar .muted { display: block; padding-right: 40px; }

/* Long-press radial status wheel (centred; the map eases the pressed house under the crosshair) */
.wheel { position: absolute; inset: 0; z-index: 12; display: none; background: rgba(0, 0, 0, .25); }
.wheel.open { display: block; }
.crosshair { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 2px rgba(0, 0, 0, .4); }
.wheel-items { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.wbtn { --n: 10; --i: 0; position: absolute; width: 56px; height: 56px; margin: -28px; border-radius: 50%; border: 3px solid #fff; background: var(--c); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 700; font-size: 10px; box-shadow: var(--shadow);
  transform: rotate(calc(360deg / var(--n) * var(--i))) translate(0, -118px) rotate(calc(-360deg / var(--n) * var(--i))); }
.wbtn i { font-style: normal; font-size: 16px; }
.wheel-x { position: absolute; left: 50%; top: 50%; margin: 40px 0 0 -16px; }
.wn-1{--n:1} .wn-2{--n:2} .wn-3{--n:3} .wn-4{--n:4} .wn-5{--n:5} .wn-6{--n:6} .wn-7{--n:7} .wn-8{--n:8} .wn-9{--n:9} .wn-10{--n:10} .wn-11{--n:11} .wn-12{--n:12}
.wi-0{--i:0} .wi-1{--i:1} .wi-2{--i:2} .wi-3{--i:3} .wi-4{--i:4} .wi-5{--i:5} .wi-6{--i:6} .wi-7{--i:7} .wi-8{--i:8} .wi-9{--i:9} .wi-10{--i:10} .wi-11{--i:11}

/* Bottom sheets: filters + lasso */
.sheet-modal .sheet, #filter-drawer .sheet { max-height: 86dvh; }
.sheet h4 { margin: 14px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.breakdown { list-style: none; margin: 0; padding: 0; }
.breakdown li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.breakdown li b { flex: 1; } .breakdown li span { font-weight: 700; }
.tog { flex: 1; text-align: left; border: 2px solid var(--c); background: #fff; color: var(--c); border-radius: 12px; padding: 6px 10px; font-weight: 700; opacity: .45; }
.tog.on { background: var(--c); color: #fff; opacity: 1; }
.tog i { font-style: normal; margin-right: 6px; }
.legs { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; } .legs a { text-decoration: none; color: var(--ink); }
.stops { font-size: 13px; padding-left: 22px; max-height: 26dvh; overflow-y: auto; } .stops a { color: var(--red); font-size: 12px; }
.filter-body .chk, .user-list .chk { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 15px; }
.filter-body select { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 9px; background: #fff; }
.icon-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ig { border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--muted); opacity: .4; }
.ig i { font-style: normal; width: 38px; height: 38px; border-radius: 50%; background: var(--c); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--line); }
.ig.on { opacity: 1; color: var(--ink); }
.seg { display: inline-flex; background: var(--soft); border-radius: 10px; padding: 2px; margin: 0 6px 6px 0; }
.seg button { border: 0; background: none; padding: 6px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.seg button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.custom-dates { display: flex; gap: 8px; } .custom-dates[hidden] { display: none; }
.custom-dates input { flex: 1; border: 1px solid var(--line); border-radius: 10px; padding: 8px; }
.user-list .team { margin: 10px 0 2px; font-size: 12px; font-weight: 700; color: var(--muted); }
button.link { border: 0; background: none; padding: 0; font-size: 12px; text-transform: none; letter-spacing: 0; }

/* List, stats, admin */
.filters { flex-wrap: wrap; align-items: center; }
.colmenu { display: none; background: var(--soft); border-radius: 12px; padding: 8px 12px; margin-bottom: 8px; }
.colmenu.open { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.bulk { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; background: #fff4f4; border-radius: 12px; padding: 8px; margin-bottom: 8px; }
.bulk[hidden] { display: none; } .bulk select { border: 1px solid var(--line); border-radius: 8px; padding: 6px; background: #fff; }
.pv-scroll.tall { max-height: calc(100dvh - 260px); }
.list-grid td small { display: block; color: var(--muted); } .list-grid .jump { padding: 5px 9px; font-size: 12px; }
.hide-rep .c-rep, .hide-campaign .c-campaign, .hide-dist .c-dist, .hide-appt .c-appt, .hide-phone .c-phone { display: none; }
.tiles.five { grid-template-columns: repeat(3, 1fr); }
@media (min-width: 560px) { .tiles.five { grid-template-columns: repeat(5, 1fr); } }
#stats-campaign, .inline select, .inline input, #sync-url, #camp-name { border: 1px solid var(--line); border-radius: 10px; padding: 8px; background: #fff; }
#sync-url { flex: 1; min-width: 200px; }
.inline { display: inline-flex; align-items: center; gap: 6px; margin: 4px 10px 4px 0; font-size: 13px; color: var(--muted); }
.pill-count { display: inline-block; border-radius: 999px; padding: 2px 9px; font-size: 12px; background: #e6f4ea; color: #1e8e3e; text-transform: none; letter-spacing: 0; }
.pill-count.warn { background: #fef7e0; color: #b06000; }
.camp-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.chip-c { background: var(--soft); border-radius: 999px; padding: 4px 10px; font-size: 13px; font-weight: 600; }
.grid td small { display: block; color: var(--muted); }
.grid input.i-label { width: 130px; } .grid input.i-icon { width: 36px; text-align: center; }
.card-actions .btn { padding: 9px 6px; }
h3 .btn { text-transform: none; letter-spacing: 0; padding: 4px 10px; font-size: 12px; margin-left: 6px; }
/* v2 compact card + pills: the open card never covers the map pills on a 390 × 664 phone */
.pills { gap: 8px; } .pill { width: 42px; height: 42px; font-size: 18px; }
.card { padding: 4px 14px 10px; } .grab { margin: 2px auto 6px; }
.card-head h2 { font-size: 18px; margin-bottom: 2px; }
.address { margin: 4px 0 0; font-size: 14px; } #card-meta { margin: 0; font-size: 12px; }
.card .lead-menu { padding-top: 6px; padding-bottom: 6px; } .card .dispo { min-width: 52px; padding: 4px 6px; }
.card-actions { margin: 2px 0 6px; } .card-actions .btn { padding: 7px 6px; font-size: 13px; }
.note-bar { padding-top: 6px; } .note-bar input { padding: 7px 9px; }
.sheet label.chk { flex-direction: row; align-items: center; margin: 0; color: var(--ink); font-size: 15px; }
.sheet label.chk input { width: 18px; height: 18px; }