/* Property Pro Live™: Success OS layout and button system, with Property Pro Live's own branding
   (shield logo, PPL blue #1E5A8A / red #C9363A). No Pipe Doctor marks. Loaded after the inline styles,
   so it only restyles; every id/class the app script uses is unchanged.
   Rules: primary actions = filled pills, secondary = outline pills, red only for urgent/destructive. */
:root {
  --sos-blue: #1E5A8A; --sos-blue4: #2D74AD; --sos-blue6: #174A73; --sos-blue50: #E8F0F7;
  --sos-navy: #12304D; --sos-navy2: #173A5C; --sos-red: #C9363A; --sos-red6: #A82C30;
  --sos-bg: #EEF2F8; --sos-line: #DCE4F2; --sos-mute: #5B6B88;
  --sos-h: "Montserrat", system-ui, sans-serif; --sos-b: "Inter", system-ui, sans-serif;
  --tabbar-h: 64px;
  /* remap the app's own tokens so every existing component picks up the new palette */
  --ink: #12304D; --blue: #1E5A8A; --red: #C9363A; --accent: #C9363A; --bad: #C9363A;
  --paper: #EEF2F8; --line: #DCE4F2; --muted: #5B6B88; --silver: #C9D4E5;
}
html, body { font-family: var(--sos-b); background: var(--sos-bg); color: var(--sos-navy); -webkit-font-smoothing: antialiased; }
h2, .page h1 { font-family: var(--sos-h); font-weight: 800; letter-spacing: -.2px; }
h2 { font-size: 22px; line-height: 1.15; color: var(--sos-navy); }
h3 { font-family: var(--sos-h); color: var(--sos-navy); text-transform: none; letter-spacing: 0; font-size: 15.5px; font-weight: 700; }
.kicker { font-family: var(--sos-h); color: var(--sos-mute); letter-spacing: .6px; }
.leaflet-container { font-family: var(--sos-b); }

/* ---------- header: white with the PPL blue/red line, logo-only home button ---------- */
.app { grid-template-rows: 72px 1fr; padding-bottom: var(--tabbar-h); }
header.sos-hdr { border-bottom: 4px solid transparent; border-image: linear-gradient(90deg, #1E5A8A 0, #1E5A8A 50%, #C9363A 50%, #C9363A 100%) 1;
  box-shadow: 0 2px 10px rgba(10,26,59,.12); padding: 8px 16px; gap: 14px; }
.homebtn { cursor: pointer; border: 1px solid #D7DEE9; border-radius: 12px; padding: 4px; height: 56px; background: #fff; box-shadow: 0 2px 6px rgba(10,26,59,.10); }
.homebtn img { height: 46px; border-radius: 8px; display: block; }
.homebtn:focus-visible { outline: 3px solid var(--sos-blue4); outline-offset: 2px; }
.brand-sub { font: 500 13.5px/1.3 var(--sos-b); color: var(--sos-mute); }
.beta { background: var(--sos-red); border: 0; font-family: var(--sos-h); font-weight: 800; letter-spacing: .6px; padding: 4px 10px; }
#who { color: var(--sos-mute) !important; }

/* ---------- buttons: pills (primary) / outline pills (secondary) / red pill (urgent) ---------- */
.btn, .btn-ghost, .btn-solid, .btn-accent, a.btn { border-radius: 999px; font-family: var(--sos-h); font-weight: 700; font-size: 14px; padding: 9px 18px; min-height: 42px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; line-height: 1.1; }
.btn, .btn-ghost, a.btn { background: #fff; color: var(--sos-blue); border: 0; box-shadow: inset 0 0 0 2px var(--sos-blue); }
.btn:hover, a.btn:hover { background: var(--sos-blue50); }
.btn-solid { background: linear-gradient(180deg, var(--sos-blue4), var(--sos-blue)); color: #fff; border: 0; box-shadow: 0 6px 16px rgba(30,90,138,.30); }
.btn-solid:hover { background: linear-gradient(180deg, #3580BC, var(--sos-blue6)); }
.btn-accent { background: linear-gradient(180deg, #D84D50, var(--sos-red)); color: #fff; border: 0; box-shadow: 0 6px 16px rgba(201,54,58,.30); }
.btn:disabled, .btn-solid:disabled, .btn-accent:disabled { opacity: .55; }
.disc { width: 30px; height: 30px; border-radius: 50%; background: #fff; display: grid; place-items: center; flex: none; margin-left: -12px; }
.disc img { height: 23px; width: auto; display: block; }
.linkbtn { color: var(--sos-blue); font-family: var(--sos-h); }
.retry, .sumtile .retry, .kv .retry { border-radius: 999px; border: 0; box-shadow: inset 0 0 0 1.5px var(--sos-blue); color: var(--sos-blue); }
.attach input[type="file"]::file-selector-button { border-radius: 999px; border: 0; box-shadow: inset 0 0 0 2px var(--sos-blue); color: var(--sos-blue); font-family: var(--sos-h); }
input, select, textarea { border-radius: 12px !important; border-color: var(--sos-line) !important; color: var(--sos-navy); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--sos-blue4); outline-offset: 0; }

/* ---------- open-beta banner ---------- */
.betabar { background: var(--sos-blue50); border-bottom: 1px solid #CFDDEE; color: var(--sos-navy); font-family: var(--sos-b); }
.betabar span::before { content: "🧪 "; }
.betalink { color: var(--sos-blue); font-family: var(--sos-h); }
.betalink + .betalink { border-left-color: #CFDDEE; }

/* ---------- map tools: pill search bar + white tool tiles ---------- */
.toolcard { border: 0; border-radius: 18px; box-shadow: 0 6px 18px rgba(10,26,59,.22); }
.tools > .toolcard:first-child { border-radius: 26px; padding: 6px; }
.search { align-items: center; }
.search input { border: 0 !important; background: transparent; padding: 10px 6px 10px 14px; font-size: 15px; }
.search input:focus { outline: none; }
#go { padding-left: 16px; padding-right: 18px; white-space: nowrap; }
#go .disc { margin-left: -10px; }
#toolsToggle { padding: 9px 14px; }
.iconrow { gap: 8px; }
.iconbtn { border: 0; border-radius: 14px; background: #fff; box-shadow: 0 2px 8px rgba(10,26,59,.16); color: var(--sos-navy); min-width: 58px; height: 54px; font-family: var(--sos-h); }
.iconbtn small { font-size: 10.5px; }
.iconbtn.on { background: var(--sos-blue); color: #fff; }
.gallery button { border-radius: 999px; border: 0; box-shadow: inset 0 0 0 2px var(--sos-line); font-family: var(--sos-h); color: var(--sos-navy); }
.gallery button.on { box-shadow: inset 0 0 0 2px var(--sos-blue); background: var(--sos-blue50); color: var(--sos-blue); }
.layerpanel summary { font-family: var(--sos-h); color: var(--sos-navy); }
.lrow .info { border: 0; box-shadow: inset 0 0 0 1.5px var(--sos-blue); color: var(--sos-blue); }
.badge { background: var(--sos-blue50); color: var(--sos-blue); font-family: var(--sos-h); }
[data-tab="layer"][data-count]:not([data-count=""])::after { background: var(--sos-blue4); }
.xbtn { border: 0; box-shadow: 0 2px 8px rgba(10,26,59,.18), inset 0 0 0 1.5px #C9D4E5; color: var(--sos-navy); }
.modechip { background: var(--sos-navy); border-bottom: 0; font-family: var(--sos-h); }
.measure-read { font-family: var(--sos-h); font-size: 13.5px; color: var(--sos-navy); margin-top: 8px; }

/* ---------- side panel tabs = segmented control; panels = cards ---------- */
.tabs { background: #DFE7F4; border-radius: 14px; padding: 5px; gap: 4px; flex-wrap: nowrap; }
.tabs button { flex: 1; border: 0; background: transparent; border-radius: 10px; font-family: var(--sos-h); color: #3A4A6B; padding: 9px 4px; font-size: 13.5px; white-space: nowrap; }
.tabs button.on { background: #fff; color: var(--sos-navy); border: 0; box-shadow: 0 2px 6px rgba(15,37,82,.12); }
.card, .psec, .hitcard, .sumgrid, .recent { border: 0; border-radius: 16px; box-shadow: 0 1px 2px rgba(15,37,82,.06), 0 4px 14px rgba(15,37,82,.06); }
.psec > summary { font-family: var(--sos-h); color: var(--sos-navy); }
.psec[open] > summary { background: #F5F8FC; }
.flag { font-family: var(--sos-h); }
.flag.bad { background: #FBE6E4; color: var(--sos-red6); }
.notice { background: var(--sos-blue50); border: 0; color: var(--sos-navy); border-radius: 12px; }
.errorbox { border-radius: 14px; }

/* parcel summary as a tile dashboard */
.sumgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; background: transparent; box-shadow: none; overflow: visible; }
.sumtile { flex-direction: column-reverse; justify-content: center; align-items: center; text-align: center; gap: 2px; border: 0 !important; border-radius: 12px; background: var(--sos-blue50); padding: 10px 8px; min-height: 64px; }
.sumtile > b { font-family: var(--sos-h); font-weight: 800; font-size: 15.5px; text-align: center; color: var(--sos-navy); }
.sumtile > span { max-width: none; font-size: 12px; }
.sumtile.wide { grid-column: 1 / -1; }
@media (max-width: 359px) { .sumtile > b { text-align: center; } }
/* parcel quick actions = small tiles */
.cardactions > a, .cardactions > button { border-radius: 14px; font-family: var(--sos-h); padding: 6px 4px; min-height: 60px; flex-direction: column; gap: 4px; font-size: 12px; }
.cardactions > button.btn { box-shadow: 0 2px 8px rgba(10,26,59,.12); color: var(--sos-navy); background: #fff; }
.cardactions > a.btn-solid { box-shadow: 0 4px 12px rgba(30,90,138,.28); }
.nextstep { background: #fff; border-radius: 16px; padding: 12px 14px; margin: 0 0 12px; box-shadow: 0 1px 2px rgba(15,37,82,.06), 0 4px 14px rgba(15,37,82,.06); }
.nextstep .nh { font: 700 15px var(--sos-h); color: var(--sos-navy); margin: 0 0 10px; }
.nextstep .btns { display: flex; flex-wrap: wrap; gap: 8px; }

/* welcome tile launcher */
.sos-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.sos-tile { border: 1px solid var(--sos-line); background: #fff; border-radius: 16px; padding: 12px 6px 10px; text-align: center; font: 700 12.5px var(--sos-h); color: var(--sos-navy); min-height: 86px; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }
.sos-tile i { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--sos-blue50); color: var(--sos-blue); font-style: normal; }
.sos-tile i .ic { width: 22px; height: 22px; }
.sos-tile:hover { border-color: var(--sos-blue4); }

/* ---------- bottom tab bar (all sizes): navy, raised center Quick shield ---------- */
.bottomnav { display: grid; grid-template-columns: repeat(5, 1fr); background: linear-gradient(180deg, var(--sos-navy2), var(--sos-navy)); border-top: 0; box-shadow: 0 -4px 16px rgba(10,26,59,.25);
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); padding: 0 8px env(safe-area-inset-bottom, 0px); align-items: center; z-index: 16; }
.bottomnav button { background: transparent; color: #B9C7E6; font: 600 11px var(--sos-h); min-height: 52px; border-radius: 12px; margin: 0 4px; padding: 6px 2px; justify-content: center; max-width: 190px; justify-self: center; width: calc(100% - 8px); }
.bottomnav button.on { background: rgba(255,255,255,.12); color: #fff; }
.bottomnav button:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.bottomnav .quickbtn { position: relative; top: -14px; background: transparent !important; color: #fff; overflow: visible; min-height: 0; padding: 0; gap: 0; }
.bottomnav .quickbtn img { height: 56px; width: auto; display: block; filter: drop-shadow(0 4px 8px rgba(0,0,0,.45)); transition: transform .12s; }
.bottomnav .quickbtn:active img { transform: scale(.94); }
.bottomnav .quickbtn span { margin-top: 1px; }
.bottomnav [data-tab="layer"][data-count]:not([data-count=""])::after { background: var(--sos-blue4); }
.toast { bottom: calc(var(--tabbar-h) + 22px); background: var(--sos-navy); border-bottom: 0; border-radius: 999px; padding: 10px 18px; font-family: var(--sos-h); font-weight: 600; font-size: 14px; }

/* ---------- Quick actions sheet + Help & tips ---------- */
.sos-scrim { position: fixed; inset: 0; background: rgba(10,26,59,.45); z-index: 50; }
.sos-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 51; background: #fff; border-radius: 24px 24px 0 0; padding: 14px 18px calc(18px + env(safe-area-inset-bottom, 0px)); max-width: 560px; margin: 0 auto; max-height: 86vh; overflow: auto; box-shadow: 0 -10px 30px rgba(10,26,59,.25); }
.sos-sheet .sgrab { width: 44px; height: 5px; border-radius: 9px; background: #D6DEEC; margin: 0 auto 12px; }
.sos-sheet h3 { display: flex; align-items: center; gap: 10px; margin: 0; font: 800 18px var(--sos-h); color: var(--sos-navy); }
.sos-sheet h3 img { height: 32px; width: auto; }
.sos-sheet > p { margin: 4px 0 14px; color: var(--sos-mute); font-size: 13.5px; }
.sos-big { display: flex; width: 100%; align-items: center; gap: 14px; border: 0; background: linear-gradient(180deg, var(--sos-blue4), var(--sos-blue)); color: #fff; border-radius: 999px; padding: 8px 18px 8px 8px; margin-bottom: 12px; box-shadow: 0 8px 20px rgba(30,90,138,.35); text-align: left; cursor: pointer; }
.sos-big .disc { width: 52px; height: 52px; margin: 0; }
.sos-big .disc img { height: 38px; }
.sos-big small { display: block; font: 600 11px var(--sos-h); letter-spacing: .8px; color: #DCE6FA; }
.sos-big b { font: 700 17px var(--sos-h); }
.sos-qg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sos-qb { display: flex; align-items: center; gap: 10px; min-height: 48px; border: 0; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 2px var(--sos-blue); color: var(--sos-blue); font: 700 14px var(--sos-h); padding: 6px 14px; text-align: left; cursor: pointer; }
.sos-qb .ic { width: 20px; height: 20px; }
.sos-qb:hover { background: var(--sos-blue50); }
.sos-close { width: 100%; margin-top: 12px; min-height: 44px; border: 0; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 2px #B9C9EA; color: var(--sos-blue); font: 700 14px var(--sos-h); cursor: pointer; }
.sos-help h4 { font: 700 14.5px var(--sos-h); color: var(--sos-navy); margin: 14px 0 4px; display: flex; gap: 8px; align-items: center; }
.sos-help h4 .ic { width: 18px; height: 18px; color: var(--sos-blue); }
.sos-help p, .sos-help li { font-size: 13.5px; color: #33425E; line-height: 1.45; margin: 0 0 4px; }
.sos-help ul { margin: 0 0 4px; padding-left: 18px; }
.sos-help .actions { margin-top: 12px; }
/* desktop Help & tips shield */
.sos-fab { position: fixed; right: 22px; bottom: calc(var(--tabbar-h) + 18px); z-index: 14; border: 0; background: transparent; padding: 0; cursor: pointer; filter: drop-shadow(0 6px 12px rgba(10,26,59,.35)); }
.sos-fab img { height: 62px; width: auto; display: block; }
.sos-fab span { position: absolute; right: 70px; top: 18px; background: var(--sos-navy); color: #fff; font: 700 12px var(--sos-h); padding: 6px 10px; border-radius: 10px; white-space: nowrap; opacity: 0; transition: opacity .15s; pointer-events: none; }
.sos-fab:hover span, .sos-fab:focus-visible span { opacity: 1; }

/* ---------- red only for urgent: retint decorative reds ---------- */
.rep-bar { border-bottom: 4px solid transparent; border-image: linear-gradient(90deg, #1E5A8A 0, #1E5A8A 50%, #C9363A 50%, #C9363A 100%) 1; }
.page h4 { color: var(--sos-navy); }
.skseg button.on { color: var(--sos-blue); }
.skact .done { background: linear-gradient(180deg, var(--sos-blue4), var(--sos-blue)); }
.sketchbar { border-top: 0; border-radius: 20px; }
.skseg, .sksnap, .skact button { border-radius: 999px; }
.skseg button { border-radius: 999px; }
.updbar { background: var(--sos-navy); border-radius: 999px; font-family: var(--sos-h); }
.updbar button { color: var(--sos-navy); border-radius: 999px; }
#creatorDesk > div:first-child { border-bottom-color: var(--sos-blue) !important; }

/* ---------- desktop: padded page, rounded map, card panels ---------- */
@media (min-width: 901px) {
  .stage { grid-template-columns: 1fr 400px; gap: 16px; padding: 16px; }
  .stage > div:first-child { border-radius: 20px; overflow: hidden; box-shadow: 0 4px 14px rgba(15,37,82,.12); }
  .dock { background: transparent; border-left: 0; padding: 0 2px 24px; }
  .dock > [id^="tab-"] { background: #fff; border-radius: 18px; padding: 16px 18px; box-shadow: 0 1px 2px rgba(15,37,82,.06), 0 4px 14px rgba(15,37,82,.06); }
  .betabar { border-radius: 0; }
  .bottomnav button { font-size: 12px; }
  .bottomnav .quickbtn img { height: 60px; }
}
/* ---------- phone ---------- */
@media (max-width: 900px) {
  .dock { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); border: 0; border-radius: 22px 22px 0 0; box-shadow: 0 -8px 28px rgba(10,26,59,.22); background: #fff; }
  .sketchbar { bottom: calc(var(--tabbar-h) + 8px + env(safe-area-inset-bottom, 0px)); }
  .sos-fab { display: none; }
  .brand-sub { display: none; }
  .app { padding-bottom: 0; }
}
@media (max-width: 520px) {
  header.sos-hdr { padding: 8px 10px; gap: 8px; }
  .homebtn { height: 52px; padding: 3px; }
  .homebtn img { height: 44px; }
  header .spacer .btn { padding: 8px 14px; font-size: 13px; }
  .beta { font-size: 10.5px; padding: 3px 8px; }
  .search input { padding-left: 10px; font-size: 14.5px; }
  #go { padding: 8px 14px 8px 12px; font-size: 13.5px; gap: 6px; }
  #go .disc { width: 26px; height: 26px; margin-left: -6px; }
  #go .disc img { height: 20px; }
  #toolsToggle { padding: 8px 12px; font-size: 13px; }
}
@media print { .bottomnav, .sos-fab, .sos-sheet, .sos-scrim { display: none !important; } }

/* ---------- no beta chrome in the customer UI: one quiet (i) button opens Version & status ---------- */
.beta, .betabar { display: none !important; }
body.beta-strip .leaflet-top { top: 0; }
.verbtn { flex: none; width: 36px; height: 36px; min-height: 36px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: #7C8AA0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.verbtn .ic { width: 20px; height: 20px; }
.verbtn:hover, .verbtn:focus-visible { background: var(--sos-blue50); color: var(--sos-blue); }
.verbtn:focus-visible { outline: 2px solid var(--sos-blue4); outline-offset: 1px; }
.sos-ver .card { padding: 4px 14px; margin: 8px 0; }
.sos-ver .row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--sos-line); font-size: 13.5px; }
.sos-ver .row:last-child { border-bottom: 0; }
.sos-ver .row span { color: #5E6B7E; }
.sos-ver .row b { color: var(--sos-navy); text-align: right; font-weight: 700; overflow-wrap: anywhere; }
.sos-muted { color: #6B778A; font-size: 12.5px; }
#report.on ~ * .verbtn, body:has(#report.on) .verbtn { visibility: hidden; }
@media print { .verbtn { display: none !important; } }
@media (max-width: 520px) { .verbtn { width: 34px; height: 34px; min-height: 34px; } }