/* app-match-tradie.css — page-specific changes so the tradie screens match the mobile app (26 Oct 2026).
   Loaded after account.css and app-match.css. Every rule here is scoped to classes used only on these screens.
   Each screen's markup sits in a root div from views/tradie.js:
     .tz.tz-leads  Leads             (app/tradie/(tabs)/leads.tsx)
     .tz.tz-pipe   Pipeline          (app/tradie/(tabs)/pipeline.tsx)
     .tz.tz-job    Lead / job page   (app/tradie/job-detail.tsx)
     .tz.tz-area   Service area      (app/tradie/service-area.tsx)
     .tz.tz-sub    Subscription      (app/tradie/subscription.tsx)
   Values are the app's StyleSheet values (src/components/ListCard.tsx, Card.tsx, Badge.tsx). */

.tz {
  --tz-amber: #E20028; --tz-amber-ink: #FFFFFF;        /* app colors.amber / amberInk */
  --tz-warn: #8A6400; --tz-warn-bg: #FFF4DB;           /* app colors.warn / warnBg */
  --tz-neutral-bg: #EEF2FB;                            /* app colors.neutralBg */
  --tz-chev: #C2C8D2;
}
:root[data-theme="dark"] .tz {
  --tz-amber: #FF5A6E; --tz-amber-ink: #12151B; --tz-warn: #E8A33D; --tz-warn-bg: #33280F; --tz-neutral-bg: #242B37; --tz-chev: #4A5462;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] .tz {
    --tz-amber: #FF5A6E; --tz-amber-ink: #12151B; --tz-warn: #E8A33D; --tz-warn-bg: #33280F; --tz-neutral-bg: #242B37; --tz-chev: #4A5462;
  }
}

/* ---------- shared bits of the app's list card (ListCard.tsx), on the tradie screens ---------- */
.tz .lc { border-radius: 20px; padding: 16px; gap: 14px; }
.tz .lc .place-row { align-items: center; gap: 14px; }
.tz .lc .place-main { display: flex; flex-direction: column; gap: 2px; }
.tz .lc .place-label { font-size: 15px; font-weight: 700; line-height: 20px; }
.tz .lc .place-addr { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.tz .lc .tz-loc { display: flex; align-items: center; gap: 4px; }
.tz .lc .tz-loc .ion { color: var(--tz-amber); }
.tz .lc .tz-loc span { flex: 1; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tz .lc .tz-right { display: flex; align-items: center; gap: 4px; align-self: flex-start; max-width: 46%; flex-shrink: 0; }
.tz .lc .tz-right .jbadge { border-radius: 999px; padding: 4px 10px; font-size: 11px; font-weight: 600; line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex-shrink: 1; }
.tz .lc .tz-chev { color: #C2C8D2; }
.tz .lc .lc-desc { color: var(--ink-soft); font-size: 13px; line-height: 18px; }
.tz .lc .lc-nophotos { height: 64px; border-radius: 12px; border: 1px dashed var(--line); color: #8C95A4; font-size: 12px; padding: 0 14px; margin: 0; }
.tz .lc .lc-photos { margin: 0; }
.tz .lc .lc-photo { width: 64px; height: 64px; flex: 0 0 64px; border-radius: 12px; }

/* ---------- Leads ---------- */
.tz-leads .lead-head { margin: 0 0 8px; padding-top: 4px; }
.tz-leads .lead-head-right { gap: 8px; }
.tz-leads .hdr-bell { width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); }
.tz-leads #openCount { border-radius: 8px; padding: 3px 7px; font-size: 11px; font-weight: 700; }
.tz-leads .lead-body > * + * { margin-top: 0; }
/* the area bar: app areaBar */
.tz-leads .area-bar { gap: 10px; border-radius: 13px; padding: 12px; margin: 0 0 14px; border: 1px solid var(--line); background: var(--surface); box-shadow: none; }
.tz-leads .area-bar .area-loc { color: var(--ink); }
.tz-leads .area-title { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.45; }
.tz-leads .area-sub { font-size: 12px; color: var(--muted); margin-top: 1px; }
.tz-leads .area-chev { width: 30px; height: 30px; border-radius: 9px; background: var(--grey-bg); color: var(--muted);
  display: flex; align-items: center; justify-content: center; }
.tz-leads .area-bar.open .area-chev { background: var(--brand); color: #fff; }
/* the open panel: app areaPanel (Card, 16 padding) */
.tz-leads .area-panel { margin: 0 0 14px; }
.tz-leads .area-panel .sa-inline { padding: 16px; border-radius: 16px; }
.tz-leads .sa-inline .sa-mapbox-sm { height: 200px !important; min-height: 200px; max-height: 200px; border-radius: 14px; border: 1px solid var(--line); margin: 12px 0 0; }
.tz-leads .leads-side .sa-inline .sa-mapbox-sm { height: 230px !important; min-height: 230px; max-height: 230px; }
.tz-leads .sa-inline .sa-radius-row { margin-top: 12px; }
.tz-leads .sa-radius-label { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.tz-leads .sa-radius-val { font-size: 15px; font-weight: 700; color: var(--ink); }
.tz-leads .sa-inline .sa-slider { accent-color: var(--tz-amber); }
.tz-leads .sa-inline .sa-hint { font-size: 12px; color: var(--muted); margin: 2px 0 0; }
.tz-leads .area-panel .job-divider { margin: 12px 0; }
.tz-leads .area-panel-h { font-size: 13px; font-weight: 700; color: var(--ink); margin: 0 0 2px; }
.tz-leads .trade-row { gap: 10px; min-height: 48px; border-bottom: 1px solid var(--line); }
.tz-leads .trade-row:last-child { border-bottom: 0; }
.tz-leads .trade-box { width: 20px; height: 20px; border-radius: 6px; border: 1px solid #D3D1C7; background: var(--surface); color: #fff; }
.tz-leads .trade-row.on .trade-box { background: var(--brand); border-color: var(--brand); }
.tz-leads .trade-name { font-size: 13px; font-weight: 600; color: var(--muted); }
.tz-leads .trade-row.on .trade-name { color: var(--ink); }
.tz-leads .trade-count { font-size: 12px; color: var(--muted); }
.tz-leads .sa-inline .sa-save { height: 50px; border-radius: 12px; background: var(--tz-amber); color: var(--tz-amber-ink); font-size: 15px; font-weight: 700; margin-top: 12px; }
/* the place search (app PlaceAutocomplete: search icon, 48 tall, 11 corners) */
.tz .tz-search { position: relative; }
.tz .tz-search-ic { position: absolute; left: 13px; top: 15px; z-index: 11; color: var(--muted); pointer-events: none; }
.tz .tz-search .ac input { height: 48px; padding: 0 13px 0 39px; border-radius: 11px; border: 1px solid var(--line); background: var(--surface); font-size: 14px; color: var(--ink); }
.tz .tz-search .sa-search { padding-bottom: 0; }
/* section label */
.tz-leads .lead-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .6px; color: var(--muted); margin: 0 0 8px; }
/* cards: one column with 14px between, like the app's list */
.tz-leads .lead-cards { gap: 14px; }
.tz-leads .lc .tz-taphint { margin: 10px 0 0; font-size: 11.5px; font-style: italic; color: var(--muted); line-height: 1.4; }
.tz-leads .lc .tz-divider { height: 1px; background: var(--line); margin: 12px 0; }
.tz-leads .lc-actions { gap: 8px; }
.tz-leads .lc-accept, .tz-leads .lc-decline { height: auto; min-height: 0; padding: 11px 0; border-radius: 12px; font-size: 14px; font-weight: 700; line-height: 21px; }
.tz-leads .lc-accept { background: var(--tz-amber); color: var(--tz-amber-ink); }
.tz-leads .lc-decline { background: var(--surface); border: 1px solid var(--line); color: var(--muted); }
/* declined strip (app declinedRow) */
.tz-leads .lc-declined { background: var(--grey-bg); border-radius: 16px; padding: 14px; gap: 10px; box-shadow: none; display: flex; align-items: center; }
.tz-leads .tz-declined-ic { color: #B7B7B2; display: flex; }
.tz-leads .tz-declined-txt { flex: 1; font-size: 13px; color: var(--muted); }
.tz-leads .lc-undo { color: var(--blue); font-size: 12.5px; font-weight: 700; }
/* empty states (app empty / blockedCard) */
.tz-leads .empty { padding: 50px 0; }
.tz-leads .empty .empty-ic { color: var(--muted); width: 30px; height: 30px; }
.tz-leads .empty h3 { font-size: 16px; font-weight: 700; color: var(--ink); margin: 12px 0 4px; }
.tz-leads .empty p { font-size: 14px; color: var(--muted); }
.tz-leads .tz-widen { margin-top: 14px; padding: 11px 18px; border-radius: 12px; background: var(--brand); color: #fff; font-size: 14px; font-weight: 700; box-shadow: none; }
.tz-leads .tz-blocked { background: var(--surface); border-radius: 16px; padding: 22px; margin-top: 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.tz-leads .tz-blocked .tz-blocked-ic { color: var(--tz-amber); }
.tz-leads .tz-blocked h3 { font-size: 16px; font-weight: 600; margin: 0; }
.tz-leads .tz-blocked p { font-size: 13px; line-height: 19px; }
.tz-leads .tz-blocked-btn { background: var(--tz-amber); color: var(--tz-amber-ink); border-radius: 10px; padding: 12px 24px; margin-top: 6px; font-size: 14px; font-weight: 500; }
/* expired-document banner (app expiredBanner) */
.tz-leads .exp-banner { background: var(--red-bg); color: var(--red); border: 0; border-radius: 12px; padding: 14px; margin: 0 0 12px; gap: 10px; }
.tz-leads .exp-ic { width: auto; height: auto; background: none; color: var(--red); border-radius: 0; display: flex; }
.tz-leads .exp-title { font-size: 14px; font-weight: 600; }
.tz-leads .exp-sub { font-size: 12.5px; margin-top: 2px; }
.tz-leads .exp-chev { display: flex; color: var(--red); }
/* paywall (not subscribed / not verified) */
.tz-leads .paywall { gap: 12px; padding: 24px; }
.tz-leads .paywall-ic { width: 64px; height: 64px; border-radius: 32px; background: var(--tz-amber); color: var(--tz-amber-ink); }
.tz-leads .paywall-title { font-size: 20px; font-weight: 700; color: var(--ink); }
.tz-leads .paywall-sub { font-size: 14px; line-height: 20px; color: var(--muted); }
.tz-leads .paywall-btn { background: var(--brand); color: #fff; padding: 14px 24px; border-radius: 12px; margin-top: 8px; font-size: 15px; font-weight: 700; }
/* desktop: the side column and its labels in the app's type */
.tz-leads .leads-col-head h2 { font-size: 16px; font-weight: 700; color: var(--ink); }
.tz-leads .leads-col-head span { font-size: 13px; color: var(--muted); }
.tz-leads .leads-side .sa-inline, .tz-leads .trade-card { border-radius: 16px; padding: 16px; }
.tz-leads .trade-foot { font-size: 12px; color: var(--muted); }
@media (min-width: 1000px) {
  .tz-leads .lead-head { margin-bottom: 16px; }
  .tz-leads .lead-cards { gap: 16px; }
}
.tz .tz-search:has(.sa-search:empty) .tz-search-ic { display: none; }   /* the search box mounts only once the map loads */

/* ---------- Pipeline (app pipeline.tsx) ---------- */
.tz-pipe .lead-head { margin: 0; padding-top: 4px; min-height: 33px; }
.tz-pipe .earn-chip { margin: 0; background: var(--green-bg); color: var(--green); border-radius: 99px; padding: 6px 12px; font-size: 12.5px; font-weight: 700; line-height: 1.5; }
.tz-pipe .pl-sub { font-size: 13px; color: var(--muted); margin: 4px 0 0; }
.tz-pipe .pl-tabs { gap: 8px; margin: 12px 0 0; padding-bottom: 2px; }
.tz-pipe .pl-tab { height: 38px; padding: 0 15px; border-radius: 13px; border: 1px solid var(--line); background: var(--surface);
  color: var(--muted); font-size: 13px; font-weight: 400; gap: 0; box-shadow: none; }
.tz-pipe .pl-tab.on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 500; box-shadow: 0 1px 1px rgba(0,36,84,.14), 0 6px 14px -6px rgba(0,36,84,.40); }
.tz-pipe .pl-cnt, .tz-pipe .pl-tab.on .pl-cnt { background: none; color: inherit; padding: 0; margin-left: .3em; border-radius: 0; font-size: inherit; font-weight: inherit; opacity: 1; }
.tz-pipe .pl-grid { gap: 12px; margin-top: 20px; }
.tz-pipe .lc .pl-why { margin: 0; font-size: 12.5px; line-height: 18px; color: var(--muted); }
.tz-pipe .lc .pl-why.is-urgent { color: var(--tz-warn); }
.tz-pipe .lc .jbadge.tz-st-quoted, .tz-pipe .lc .jbadge.tz-st-awaiting, .tz-pipe .lc .jbadge.tz-st-stale { background: var(--tz-warn-bg); color: var(--tz-warn); }
.tz-pipe .empty { padding: 50px 0; }
.tz-pipe .empty h3 { font-size: 15px; font-weight: 500; color: var(--ink); margin: 0; }
.tz-pipe .empty p { margin: 6px auto 0; padding: 0 30px; font-size: 14px; color: var(--muted); }
@media (min-width: 1000px) {
  .tz-pipe .pl-grid { gap: 16px; }
}

/* ---------- Lead / job page (app job-detail.tsx) ---------- */
.tz-job .tz-jhead { display: flex; align-items: center; gap: 8px; min-height: 36px; margin: 0 0 4px; }
.tz-job .tz-jhead .back { margin: 0 0 0 -4px; font-size: 15px; font-weight: 600; color: var(--ink); }
.tz-job .tz-inpipe { align-self: center; }
.tz-job .tz-more { margin-left: auto; padding: 4px; background: none; border: 0; color: var(--muted); cursor: pointer; display: flex; border-radius: 8px; }
.tz-job .tz-more:hover { background: var(--grey-bg); }
.tz-job .tz-titlerow { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.tz-job .tz-titlerow h1 { flex: 1; min-width: 0; margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.4px; line-height: 1.35; }
.tz-job .tz-titlerow .jbadge { align-self: center; }
.tz-job .detail-meta { font-size: 13px; color: var(--muted); margin: 4px 0 16px; }
.tz-job .detail-meta .jbadge { margin-left: 6px; vertical-align: 1px; }
.tz-job .jc-col { gap: 16px; }
.tz-job .card { padding: 16px; border-radius: 16px; }
.tz-job .card + .card { margin-top: 0; }
.tz-job .eyebrow { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0 0 10px; letter-spacing: 0; text-transform: none; }
.tz-job .eyebrow-row { margin: 0 0 10px; }
.tz-job .eyebrow-row .eyebrow { margin: 0; }
.tz-job .link-btn { font-size: 12.5px; font-weight: 500; color: var(--blue); }
/* The Client rows */
.tz-job .kv { padding: 9px 0; border-bottom: 1px solid var(--line); gap: 12px; }
.tz-job .kv:last-of-type { border-bottom: 1px solid var(--line); }
.tz-job .kv > span:first-child { color: var(--muted); font-size: 13.5px; flex-shrink: 0; font-weight: 400; }
.tz-job .kv > span:last-child, .tz-job .kv > .tz-tel { color: var(--ink); font-size: 13.5px; font-weight: 600; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.tz-job .kv > .tz-tel { color: var(--blue); text-decoration: none; }
.tz-job .kv > .kv-locked { color: var(--muted) !important; font-weight: 400 !important; }
.tz-job .tz-gps { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }
.tz-job .tz-msg { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 12px; padding: 12px 16px;
  border: 0; border-radius: 12px; background: var(--brand); color: #fff; font: inherit; font-size: 14.5px; font-weight: 700; line-height: 21px; cursor: pointer;
  box-shadow: 0 1px 1px rgba(0,36,84,.14), 0 6px 14px -6px rgba(0,36,84,.40); }
.tz-job .tz-msg:disabled { opacity: .6; cursor: default; }
.tz-job .btn-row .tz-send { margin-top: 0; }
/* locked card (lead not added yet) */
.tz-job .tz-locked { background: var(--grey-bg); display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 16px; }
.tz-job .tz-locked-ic { color: var(--muted); }
.tz-job .tz-locked-title { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.tz-job .tz-locked-text { margin: 0; padding: 0 8px; font-size: 13px; line-height: 19px; color: var(--muted); }
.tz-job .tz-review { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; font-size: 13px; font-weight: 500; color: var(--ink-soft); }
.tz-job .tz-review .tz-star { color: var(--muted); }
.tz-job .tz-review.has-reviews .tz-star { color: #F0A202; }
.tz-job .tz-add { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 52px; border: 0; border-radius: 12px;
  background: var(--tz-amber); color: var(--tz-amber-ink); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
  box-shadow: 0 1px 1px rgba(226,0,40,.16), 0 6px 14px -6px rgba(226,0,40,.45); }
.tz-job .tz-add:disabled { opacity: .6; }
/* What They Asked For / site photos */
.tz-job .desc { color: var(--ink); font-size: 14.5px; line-height: 21px; }
.tz-job .tz-label { margin: 16px 0 8px; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); }
.tz-job .tz-muted { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.tz-job #sitePhotoStrip + .tz-muted, .tz-job .tz-muted + .tz-muted { margin-top: 2px; }
.tz-job .lc-photos { display: flex; gap: 8px; margin: 0; overflow-x: auto; }
.tz-job .lc-photo { flex: 0 0 120px; width: 120px; height: 120px; border-radius: 12px; }
.tz-job .lc-nophotos { margin: 0; }
/* Your quote */
.tz-job .tz-qrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tz-job .tz-qamt { font-size: 22px; font-weight: 700; color: var(--ink); line-height: 1.4; }
.tz-job .items-list { margin: 10px 0 0; border-top: 1px solid var(--line); }
.tz-job .item-line { padding: 7px 0; gap: 12px; align-items: flex-start; font-size: 13px; }
.tz-job .item-line span:first-child { color: var(--muted); }
.tz-job .item-line span:last-child { color: var(--ink); font-weight: 600; white-space: nowrap; }
.tz-job .tz-qmsg { margin: 8px 0 0; font-size: 13.5px; line-height: 19px; color: var(--ink-soft); white-space: pre-wrap; overflow-wrap: anywhere; }
.tz-job .tz-textlink { display: inline-block; margin-top: 12px; padding: 0; background: none; border: 0; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--blue); cursor: pointer; }
.tz-job .tz-additem { margin: 0; padding: 10px 0; }
.tz-job .tz-accepted { margin: 10px 0 0; font-size: 13px; font-weight: 600; line-height: 18px; color: var(--green); }
.tz-job .tz-quote + .tz-muted { margin-top: 10px; }
.tz-job .tz-done { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 12px; padding: 12px; border: 0; border-radius: 12px;
  background: #1E6B3A; color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.tz-job .tz-review-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 12px; padding: 11px; border: 1.5px solid #2E5077; border-radius: 12px;
  background: none; color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.tz-job .tz-review-btn .ion { color: var(--blue); }
.tz-job .tz-wait { margin: 10px 0 0; font-size: 12.5px; line-height: 18px; color: var(--muted); }
/* the quote form */
.tz-job .tz-qlabel { display: block; margin: 10px 0 6px; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); }
.tz-job .item-row { gap: 8px; margin-bottom: 8px; }
.tz-job .item-row input { height: 46px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); font-size: 14px; color: var(--ink); background: var(--surface); }
.tz-job .item-amt-wrap { width: 104px; }
.tz-job .item-r { display: none; }
.tz-job .item-amt { padding-left: 12px; text-align: right; width: 100%; }
.tz-job .item-x { display: flex; align-items: center; justify-content: center; color: #8A93A2; }
.tz-job .total-row { margin: 6px 0 8px; padding-top: 12px; border-top: 2px solid var(--line); }
.tz-job .total-row span { color: var(--muted); font-size: 12.5px; font-weight: 700; letter-spacing: .5px; text-transform: none; }
.tz-job .total-row strong { font-size: 24px; font-weight: 700; color: var(--ink); }
.tz-job #note { min-height: 80px; height: 80px; padding: 12px; border-radius: 10px; border: 1px solid var(--line); font-size: 14px; }
.tz-job .btn-row { margin-top: 12px; }
.tz-job .report-foot { margin: 4px 0 0; padding: 16px 0; }
.tz-job .report-link { font-size: 12.5px; color: var(--muted); }
@media (min-width: 1000px) {
  .tz-job .jc-grid { gap: 20px; }
  .tz-job .jc-col { gap: 20px; }
  .tz-job .card { padding: 20px; }
  .tz-job .tz-add { margin-top: 0; }
}
@media (max-width: 999px) {
  .tz-job .tz-add { margin-top: 8px; }
}
.tz-job .item-x-gap { display: none; }

/* the payments block (views/pay.js, unchanged): on the app it has no card or heading of its
   own — its payment cards sit straight on the page — and "Ask for a call-out fee" is an
   outline button with a calendar icon. Styling only. */
.tz-job .kv { line-height: 1.3; }

/* ---------- Service area (app service-area.tsx) ---------- */
.tz-area { display: flex; flex-direction: column; }
.tz-area .sa-header { padding: 0 0 8px; min-height: 36px; }
.tz-area .sa-back { width: 56px; gap: 0; margin-left: -4px; font-size: 15px; font-weight: 600; color: var(--ink); }
.tz-area .sa-title { font-size: 16px; font-weight: 700; color: var(--ink); }
.tz-area .tz-search { margin-bottom: 8px; }
/* the map fills the screen down to the panel, as on the phone */
.tz-area .sa-mapbox { height: calc(100dvh - 375px); min-height: 300px; border-radius: 16px; border: 1px solid var(--line); }
.tz-area .sa-fab { width: 44px; height: 44px; border-radius: 22px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.tz-area .sa-panel { padding: 12px 0 0; }
.tz-area .sa-radius-label { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.tz-area .sa-radius-val { font-size: 15px; font-weight: 700; color: var(--ink); }
.tz-area .sa-hint { font-size: 12px; line-height: 17px; margin: 4px 0 0; color: var(--muted); }
.tz-area .sa-save { height: 52px; border-radius: 12px; margin-top: 12px; background: var(--tz-amber); color: var(--tz-amber-ink); font-size: 16px; font-weight: 700;
  box-shadow: 0 1px 1px rgba(226,0,40,.16), 0 6px 14px -6px rgba(226,0,40,.45); }
/* the app's slider: red filled track, grey rest, a navy thumb */
.tz-area .sa-slider { -webkit-appearance: none; appearance: none; height: 28px; margin: 4px 0 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; outline-offset: 2px; background: transparent; cursor: pointer; }
.tz-area .sa-slider::-webkit-slider-runnable-track { height: 4px; border-radius: 2px;
  background: linear-gradient(to right, var(--tz-amber) 0 var(--tz-p, 20%), var(--line) var(--tz-p, 20%) 100%); }
.tz-area .sa-slider::-moz-range-track { height: 4px; border-radius: 2px; background: var(--line); }
.tz-area .sa-slider::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--tz-amber); }
.tz-area .sa-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; margin-top: -8px;
  background: var(--brand); border: 0; box-shadow: 0 1px 3px rgba(20,24,31,.3); }
:root[data-theme="dark"] .tz-area .sa-slider::-webkit-slider-thumb { background: var(--ink); }
.tz-area .sa-slider::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--brand); border: 0; }
@media (min-width: 1000px) {
  .tz-area { max-width: 960px; margin: 0 auto; }
  .tz-area .sa-mapbox { height: calc(100vh - 360px); min-height: 380px; }
  .tz-area .sa-panel { display: grid; grid-template-columns: 1fr 280px; column-gap: 24px; align-items: start; }
  .tz-area .sa-panel > .sa-radius-row, .tz-area .sa-panel > .sa-slider, .tz-area .sa-panel > .sa-hint, .tz-area .sa-panel > #err { grid-column: 1; }
  .tz-area .sa-panel > .sa-save { grid-column: 2; grid-row: 1 / span 3; align-self: center; margin-top: 0; }
}

/* ---------- Subscription (app subscription.tsx) ---------- */
.tz-sub { max-width: 640px; margin: 0 auto; }
.tz-sub .tz-shead { display: flex; align-items: center; justify-content: space-between; min-height: 40px; margin: 0 0 12px; }
.tz-sub .tz-shead-back { width: 32px; height: 32px; margin-left: -6px; padding: 0; border: 0; background: none; color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.tz-sub .tz-shead-title { margin: 0; font-size: 18px; font-weight: 700; color: var(--ink); letter-spacing: 0; }
.tz-sub .tz-shead-right { width: 26px; }
.tz-sub .tz-banner { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; padding: 12px; border-radius: 12px; font-size: 13px; font-weight: 600; line-height: 18px; }
.tz-sub .tz-banner.msg-info { background: var(--tz-neutral-bg); color: var(--blue); }
.tz-sub .tz-banner > span { flex: 1; }
.tz-sub .card { padding: 16px; border-radius: 16px; }
.tz-sub .card + .card { margin-top: 12px; }
.tz-sub .tz-scard { margin-bottom: 12px; }
.tz-sub .tz-scard-h { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--ink); }
.tz-sub .tz-plantop { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tz-sub .tz-planname { font-size: 14px; font-weight: 700; color: var(--tz-amber); text-transform: uppercase; letter-spacing: 1px; }
.tz-sub .free-pill { background: var(--green-bg); color: var(--green); font-size: 10.5px; font-weight: 700; letter-spacing: .4px; padding: 4px 10px; border-radius: 999px; }
.tz-sub .price-row { align-items: flex-end; gap: 4px; margin-top: 4px; }
.tz-sub .price { font-size: 36px; font-weight: 700; color: var(--ink); letter-spacing: 0; line-height: 1.3; }
.tz-sub .per { font-size: 15px; color: var(--muted); margin-bottom: 7px; }
.tz-sub .trial-line { margin: 6px 0 0; font-size: 12.5px; line-height: 17px; color: var(--muted); }
.tz-sub .tz-divider { height: 1px; background: var(--line); margin: 12px 0; }
.tz-sub .tz-feature { display: flex; align-items: center; gap: 10px; margin: 0; padding: 6px 0; font-size: 14.5px; color: var(--ink); }
.tz-sub .tz-feature .ion { color: var(--green); }
.tz-sub .r1-note { margin: 16px 0 0; }
.tz-sub .tz-subbtn { display: block; width: 100%; margin-top: 16px; padding: 16px; border: 0; border-radius: 12px; background: var(--brand); color: #fff;
  font: inherit; font-size: 16px; font-weight: 700; line-height: 1.3; cursor: pointer; box-shadow: 0 1px 1px rgba(0,36,84,.14), 0 6px 14px -6px rgba(0,36,84,.40); }
.tz-sub .tz-subbtn:disabled { opacity: .6; cursor: default; }
.tz-sub .tz-scard .btn-row .tz-subbtn { margin-top: 0; }
.tz-sub .tz-terms { margin: 8px 0 0; font-size: 11.5px; line-height: 16px; color: var(--muted); text-align: center; }
.tz-sub .tz-terms.tz-left { text-align: left; margin: 0; font-size: 12.5px; line-height: 18px; }
.tz-sub .tz-storenote { margin: 12px 0 0; padding: 12px; border-radius: 10px; background: var(--grey-bg); font-size: 12.5px; line-height: 18px; color: var(--muted); text-align: center; }
.tz-sub .tz-manage { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.tz-sub .tz-managebtn { width: 100%; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--blue);
  font: inherit; font-size: 14px; font-weight: 700; line-height: 1.3; cursor: pointer; }
.tz-sub .tz-managebtn.tz-danger { color: var(--red); }
.tz-sub .tz-scard .tz-managebtn { margin-top: 12px; }
.tz-sub .tz-managebtn:disabled { opacity: .6; cursor: default; }
.tz-sub .tz-snote { margin: 16px 0 0; font-size: 12px; line-height: 17px; color: var(--muted); text-align: center; }
.tz-sub .tz-legal { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 12px 0 16px; font-size: 12.5px; color: var(--muted); }
.tz-sub .tz-legal a { color: var(--blue); font-weight: 600; text-decoration: underline; }
@media (min-width: 1000px) {
  .tz-sub .tz-manage { flex-direction: row; }
}

/* ---------- dark mode extras ---------- */
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] .tz-area .sa-slider::-webkit-slider-thumb { background: var(--ink); }
}
:root[data-theme="dark"] .tz .sa-map { background: var(--grey-bg); }
@media (prefers-color-scheme: dark) { :root[data-theme="system"] .tz .sa-map { background: var(--grey-bg); } }
.tz-leads .sa-slider { padding: 0; border: 0; box-shadow: none; background: transparent; }