/* FireRiskHere — Watch (paid dashboard) LIVE styles — fork of mockup/paid-dashboard/styles.css.
   Palette tokens mirror the live site (template.ts): theme A (sand + terracotta,
   default) and theme C (cool stone). Red (#C6281D) is reserved for fire/risk
   signal only — here that means the Threat chip, fire pins, and footprints. */

:root,
[data-theme="a"] {
  --bg-page: #F2EBE0; --bg-card: #FCF8EE; --border-soft: #E5D9C5;
  --text-main: #1F1A14; --text-muted: #756A5C;
  --chrome: #B85A3E; --chrome-hover: #A04D33;
  --tint-bg: #EFD0BF; --tint-border: #E0BAA5; --tint-text: #5A2614;
  --bg-chrome: #E8DFD0; --border-chrome: #DCD0BD; --text-chrome-muted: #756A5C;
  /* signal colors */
  --threat: #C6281D; --threat-deep: #8F1D16; --threat-bg: #F7DAD6;
  --watch: #B7791F; --watch-bg: #F6E7C8;
  --clear: #2E7D54; --clear-bg: #D9EBE0;
}
[data-theme="c"] {
  --bg-page: #EEEEED; --bg-card: #FAFAF9; --border-soft: #DEDEDA;
  --text-main: #18181A; --text-muted: #696969;
  --chrome: #2A2A2D; --chrome-hover: #404045;
  --tint-bg: #E0DFDC; --tint-border: #C9C8C4; --tint-text: #18181A;
  --bg-chrome: #E5E5E2; --border-chrome: #D6D6D2; --text-chrome-muted: #696969;
  --threat: #C6281D; --threat-deep: #8F1D16; --threat-bg: #F5DAD7;
  --watch: #9A6B12; --watch-bg: #EFE6D3;
  --clear: #2E7D54; --clear-bg: #DEE9E3;
}

* { box-sizing: border-box; }
/* The hidden attribute must always win over component display rules below
   (e.g. .modal-scrim{display:flex}), or hidden overlays render on load. */
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  color: var(--text-main); background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 1.25rem; }

/* ---------- header ---------- */
.site-header {
  background: var(--bg-chrome);
  border-bottom: 1px solid var(--border-chrome);
  position: sticky; top: 0; z-index: 40;
}
.header-inner { display: flex; align-items: center; gap: 1rem; height: 60px; }
.brand {
  display: flex; align-items: center; gap: 0.45rem;
  font-weight: 700; font-size: 1.15rem; text-decoration: none; color: var(--text-main);
}
.flame { color: var(--threat); font-size: 0.85rem; transform: translateY(-1px); }
.brand-sub {
  font-weight: 600; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: #fff; background: var(--chrome); padding: 0.12rem 0.4rem; border-radius: 4px;
}
.tabs { display: flex; gap: 0.15rem; margin-left: 0; }
.tab {
  font: inherit; font-size: 0.95rem; font-weight: 600;
  background: none; border: none; color: var(--text-muted);
  padding: 0.5rem 0.85rem; border-radius: 6px; cursor: pointer;
}
.tab:hover { background: var(--bg-card); color: var(--text-main); }
.tab[aria-current="true"] { background: var(--tint-bg); color: var(--tint-text); }
/* Header actions: one 34px row, nothing wraps. Text links and buttons share
   the same height and radius so the group reads as a single toolbar:
   [account] [Upgrade] [Manage billing] [refresh|mi] [+ Add a place] [Sign out] */
.header-actions { margin-left: auto; display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; flex: 1 1 auto; min-width: 0; }
.header-actions > * { white-space: nowrap; flex: 0 0 auto; } /* buttons/links never shrink or clip */
.header-actions > .account-chip { flex: 0 0 auto; margin-right: 0.25rem; } /* never shrinks: a collapsed chip let the badge overlap "Change plan" */
.header-actions .pricing-link {
  display: inline-flex; align-items: center; height: 34px; padding: 0 0.5rem; border-radius: 6px;
  font-size: 0.88rem; font-weight: 600; color: var(--chrome, #B5552B); text-decoration: none;
}
.header-actions .pricing-link:hover { background: var(--bg-card); text-decoration: none; }
.hdr-tools { display: inline-flex; align-items: stretch; height: 34px; border: 1px solid var(--border-soft); border-radius: 6px; background: var(--bg-card); overflow: hidden; }
.hdr-tools > button { border: none; border-radius: 0; height: 100%; background: transparent; }
.hdr-tools > button + button { border-left: 1px solid var(--border-soft); }
.hdr-tools > button:hover { background: var(--bg-page); }
.header-actions .btn-primary { display: inline-flex; align-items: center; height: 34px; padding: 0 0.9rem; font-size: 0.9rem; }
.demo-banner { background: var(--tint-bg); border-bottom: 1px solid var(--tint-border); font-size: 0.9rem; }
.demo-banner .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; }
.demo-banner .link-btn { flex: none; color: var(--text-muted); text-decoration: none; }
.upgrade-note { margin: 0.6rem auto 0; padding: 0.6rem 0.9rem; background: var(--clear-bg, #E7F1E8); border: 1px solid var(--clear, #2F6B3A); border-radius: 8px; font-size: 0.92rem; }
.unit-toggle {
  font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer;
  background: var(--bg-card); color: var(--text-main);
  border: 1px solid var(--border-soft); border-radius: 6px;
  width: 42px; height: 34px;
}
.btn-primary {
  font: inherit; font-weight: 600; cursor: pointer;
  background: var(--chrome); color: #fff; border: 1px solid var(--chrome);
  padding: 0.5rem 0.9rem; border-radius: 6px;
}
.btn-primary:hover { background: var(--chrome-hover); border-color: var(--chrome-hover); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-ghost {
  font: inherit; font-weight: 600; cursor: pointer;
  background: var(--bg-card); color: var(--text-main);
  border: 1px solid var(--border-soft); padding: 0.5rem 0.9rem; border-radius: 6px;
}
.btn-ghost:hover { border-color: var(--tint-border); }

/* ---------- heartbeat strip ---------- */
.heartbeat {
  background: var(--clear-bg); color: var(--text-main);
  border-bottom: 1px solid var(--border-soft);
  font-size: 0.88rem; padding: 0.5rem 0;
}
.heartbeat.has-threat { background: var(--threat-bg); }
.heartbeat .wrap { display: flex; align-items: center; gap: 0.5rem; }
.heartbeat .hb-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--clear); flex: none;
}
.heartbeat.has-threat .hb-dot { background: var(--threat); }
.heartbeat .hb-time { color: var(--text-muted); margin-left: auto; }

/* ---------- views ---------- */
.view { padding: 1.75rem 0 3rem; }
.view-head { margin-bottom: 1.1rem; }
.view-head h1 { font-size: 1.5rem; margin: 0 0 0.35rem; }
.view-note { color: var(--text-muted); margin: 0; font-size: 0.95rem; }

/* status summary — interactive filter chips (the banner carries the sentence) */
.status-summary { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.summary-chip {
  font: inherit; cursor: pointer;
  display: inline-flex; align-items: baseline; gap: 0.4rem;
  font-size: 0.9rem; font-weight: 600;
  padding: 0.3rem 0.7rem; border-radius: 999px; border: 1px solid transparent;
}
.summary-chip .n { font-size: 1.05rem; font-weight: 700; }
.summary-chip.threat { background: var(--threat-bg); color: var(--threat-deep); border-color: var(--threat); }
.summary-chip.watch { background: var(--watch-bg); color: var(--watch); }
.summary-chip.clear { background: var(--clear-bg); color: var(--clear); }
.summary-chip.active { box-shadow: 0 0 0 2px var(--text-main); }
.summary-clear {
  font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer;
  background: none; border: none; color: var(--text-muted); text-decoration: underline;
}

/* ---------- card grid (mirrors site .card-grid) ---------- */
.card-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  align-items: stretch;
}
.prop-card {
  background: var(--bg-card); border: 1px solid var(--border-soft);
  border-radius: 10px; padding: 1rem 1.1rem; cursor: pointer;
  display: flex; flex-direction: column; gap: 0.6rem;
  transition: border-color 0.12s ease, transform 0.12s ease;
  position: relative; /* anchor for the hover "why" popover */
}
.prop-card:hover { border-color: var(--tint-border); transform: translateY(-1px); }
.prop-card.threat { border-left: 4px solid var(--threat); }
.prop-card.watch { border-left: 4px solid var(--watch); }
.prop-card.clear { border-left: 4px solid var(--clear); }
.prop-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.prop-label { font-weight: 700; font-size: 1.02rem; line-height: 1.25; }
.prop-address { color: var(--text-muted); font-size: 0.85rem; margin-top: 0.15rem; }
.status-chip {
  flex: none; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; padding: 0.22rem 0.5rem; border-radius: 5px;
}
.status-chip.threat { background: var(--threat); color: #fff; }
.status-chip.watch { background: var(--watch); color: #fff; }
.status-chip.clear { background: var(--clear); color: #fff; }
.prop-fire { font-size: 0.9rem; }
.prop-fire .fname { font-weight: 600; }
.prop-metrics { display: flex; gap: 1.25rem; margin-top: auto; }
.metric .m-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.metric .m-val { font-size: 1.05rem; font-weight: 700; }
.metric .m-val small { font-weight: 600; font-size: 0.8rem; color: var(--text-muted); }
.trend { font-size: 0.78rem; font-weight: 600; }
.trend.closing { color: var(--threat-deep); }
.trend.steady { color: var(--text-muted); }
.trend.easing { color: var(--clear); }
.trend.unknown { color: var(--text-muted); font-style: italic; font-weight: 500; }
.prop-checked { font-size: 0.78rem; color: var(--text-muted); }

/* ---------- map ---------- */
.map-shell { position: relative; }
#map {
  height: clamp(420px, 68vh, 680px); width: 100%;
  border-radius: 10px; border: 1px solid var(--border-soft); background: var(--bg-card);
  z-index: 1;
}
.map-noscript { padding: 1rem; color: var(--text-muted); }
.fire-card {
  position: absolute; top: 14px; right: 14px; z-index: 1000; width: 290px;
  background: var(--bg-card); border: 1px solid var(--border-soft);
  border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,0.16); padding: 0.95rem 1rem;
}
.fire-card .fc-x {
  position: absolute; top: 6px; right: 8px; border: none; background: none;
  font-size: 1.2rem; line-height: 1; cursor: pointer; color: var(--text-muted);
}
.fire-card h3 { margin: 0 0.5rem 0.1rem 0; font-size: 1.05rem; }
.fc-acres { color: var(--text-muted); font-size: 0.85rem; margin: 0 0 0.7rem; }
.fc-row { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.32rem 0; border-top: 1px solid var(--border-soft); font-size: 0.88rem; }
.fc-row .k { color: var(--text-muted); }
.fc-row .v { font-weight: 600; text-align: right; }
.fc-monitoring { color: var(--watch); font-weight: 600; font-style: italic; }
.fc-source { display: inline-block; margin-top: 0.6rem; font-size: 0.82rem; font-weight: 600; color: var(--chrome); text-decoration: underline; text-underline-offset: 2px; }
.fc-caption { font-size: 0.74rem; color: var(--text-muted); margin: 0.6rem 0 0; }
.map-legend { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 0.8rem; font-size: 0.82rem; color: var(--text-muted); }
.map-legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.map-legend .lg-note { flex-basis: 100%; font-style: italic; }
.lg-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.lg-poly { width: 14px; height: 11px; border-radius: 2px; display: inline-block; background: rgba(198,40,29,0.28); border: 1.5px solid var(--threat); }

/* Leaflet property pins (divIcon) — every pin solid-colored by status, with a
   white ring + dark outline so amber/green/red all pop on the light basemap. */
/* A place = a small house, filled with its status colour (same three colours
   as the badges), white outline so it reads on the basemap. SVG inline via
   CSS mask so the colour is one background rule. */
.frh-pin {
  display: block; width: 24px; height: 24px; border-radius: 5px;
  background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.25), 0 1px 4px rgba(0,0,0,0.45);
  position: relative;
}
.frh-pin::after {
  content: ""; position: absolute; inset: 2px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3 2 12h3v8h5v-5h4v5h5v-8h3z'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3 2 12h3v8h5v-5h4v5h5v-8h3z'/></svg>") center / contain no-repeat;
}
.frh-pin.threat { color: var(--threat); }
.frh-pin.watch { color: var(--watch); }
.frh-pin.clear { color: var(--clear); }
.lg-house { display: inline-block; width: 16px; height: 16px; border-radius: 3px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.25); position: relative; }
.lg-house::after { content: ""; position: absolute; inset: 2px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3 2 12h3v8h5v-5h4v5h5v-8h3z'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3 2 12h3v8h5v-5h4v5h5v-8h3z'/></svg>") center / contain no-repeat; }
/* The rule sentence ("ROLLING, 0.01 acres, reported point 2.9 mi … inside the
   5-mi watch distance …") is the honesty behind the status, but it is a wall
   of text on a 250-place portfolio. It lives in a popover that appears on
   hover / keyboard focus and never shifts the grid; a click opens the drawer,
   which shows the same sentence inline. */
.prop-reason {
  display: none; position: absolute; left: 0.4rem; right: 0.4rem; top: calc(100% - 0.35rem); z-index: 6; /* below the card so its own numbers stay visible */
  background: var(--bg-card); border: 1px solid var(--tint-border); border-radius: 8px;
  padding: 0.55rem 0.7rem; font-size: 0.8rem; line-height: 1.4; color: var(--text-main);
  box-shadow: 0 6px 18px rgba(40, 30, 20, 0.14);
}
.prop-reason-k { display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.15rem; }
.prop-card:hover .prop-reason, .prop-card:focus-visible .prop-reason, .prop-card:focus-within .prop-reason { display: block; }
@media (hover: none) { .prop-card:hover .prop-reason { display: none; } } /* touch: the drawer has it */
.scope-note { font-size: 0.82rem; color: var(--text-muted); margin: -0.25rem 0 1rem; max-width: 70ch; }
.rules-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin: 0.5rem 0 0.75rem; }
.rules-table th, .rules-table td { text-align: left; padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--border-soft); white-space: nowrap; }
.rules-table th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); font-weight: 600; }
.rules-table td.t { color: var(--threat-deep, #8F1D16); font-weight: 600; }
.rules-table td.w { color: var(--watch); font-weight: 600; }
.table-wrap { overflow-x: auto; }
/* focused property pin — larger + ring so it's findable when "View on map" lands.
   Scales from center (anchor unchanged) and keeps its status color. */
.frh-pin-wrap { overflow: visible; }
.frh-pin-focused .frh-pin {
  transform: scale(1.4);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--text-main), 0 1px 6px rgba(0,0,0,0.5);
}
.frh-firepin {
  font-size: 16px; line-height: 1; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.5));
  text-align: center;
}

/* ---------- notifications ---------- */
.alerts-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.alerts-col { display: flex; flex-direction: column; gap: 1.2rem; }
.panel {
  background: var(--bg-card); border: 1px solid var(--border-soft);
  border-radius: 10px; padding: 1.1rem 1.2rem;
}
.panel h2 { margin: 0 0 0.25rem; font-size: 1.1rem; }
.panel-sub { color: var(--text-muted); font-size: 0.88rem; margin: 0 0 0.9rem; }
.threshold-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; flex-wrap: wrap; }
.threshold-row input { width: 64px; font: inherit; padding: 0.35rem 0.5rem; border: 1px solid var(--border-soft); border-radius: 6px; background: var(--bg-page); color: var(--text-main); }
.channels { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1rem; }
.channel-toggle {
  font: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer;
  padding: 0.45rem 0.8rem; border-radius: 7px;
  border: 1px solid var(--border-soft); background: var(--bg-page); color: var(--text-muted);
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.channel-toggle .ct-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-soft); }
.channel-toggle.on { background: var(--tint-bg); border-color: var(--tint-border); color: var(--tint-text); }
.channel-toggle.on .ct-dot { background: var(--clear); }
.override-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 0; border-top: 1px solid var(--border-soft); font-size: 0.9rem; }
.override-row:first-child { border-top: none; }
.override-row input { width: 56px; font: inherit; padding: 0.3rem 0.4rem; border: 1px solid var(--border-soft); border-radius: 6px; background: var(--bg-page); color: var(--text-main); }

.heartbeat-panel { display: flex; align-items: center; gap: 0.7rem; }
.heartbeat-panel .hb-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--clear); flex: none; }
.heartbeat-panel.has-threat .hb-dot { background: var(--threat); }
.heartbeat-panel .hb-text strong { display: block; font-size: 1rem; }
.heartbeat-panel .hb-text span { color: var(--text-muted); font-size: 0.85rem; }

.recent-h { margin: 0; font-size: 1.1rem; }
.alert-card {
  background: var(--bg-card); border: 1px solid var(--border-soft);
  border-radius: 10px; padding: 0.9rem 1rem; margin-top: 0.8rem;
  border-left: 4px solid var(--watch);
}
.alert-card.threat { border-left-color: var(--threat); }
.alert-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; }
.alert-sev { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.15rem 0.45rem; border-radius: 4px; color: #fff; }
.alert-sev.threat { background: var(--threat); }
.alert-sev.watch { background: var(--watch); }
.alert-chan { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.alert-time { font-size: 0.75rem; color: var(--text-muted); margin-left: auto; }
.alert-msg { font-size: 0.9rem; line-height: 1.4; margin: 0; }
.alert-link { font-weight: 600; color: var(--chrome); cursor: pointer; }

/* ---------- drawer (property detail) ---------- */
.drawer-scrim { position: fixed; inset: 0; background: rgba(0,0,0,0.32); z-index: 50; }
.drawer {
  position: fixed; top: 0; right: 0; height: 100vh; width: min(440px, 92vw);
  background: var(--bg-page); border-left: 1px solid var(--border-soft);
  z-index: 60; overflow-y: auto; box-shadow: -8px 0 28px rgba(0,0,0,0.18);
  padding: 1.25rem 1.4rem 2.5rem;
}
.drawer-x { position: absolute; top: 0.9rem; right: 1rem; border: none; background: none; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--text-muted); }
.drawer h2 { margin: 0.2rem 0 0.1rem; font-size: 1.3rem; }
.drawer .d-address { color: var(--text-muted); font-size: 0.9rem; margin: 0 0 1rem; }
.d-status { display: inline-block; margin-bottom: 1.1rem; }
.d-block { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 10px; padding: 0.9rem 1rem; margin-bottom: 0.9rem; }
.d-block h3 { margin: 0 0 0.6rem; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.d-bignum { font-size: 1.8rem; font-weight: 800; line-height: 1; }
.d-bignum small { font-size: 0.9rem; font-weight: 600; color: var(--text-muted); }
.d-sub { font-size: 0.85rem; color: var(--text-muted); margin-top: 0.35rem; }
.d-line { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.3rem 0; font-size: 0.9rem; border-top: 1px solid var(--border-soft); }
.d-line:first-of-type { border-top: none; }
.d-line .k { color: var(--text-muted); }
.d-line .v { font-weight: 600; text-align: right; }
.d-monitoring { color: var(--watch); font-weight: 600; font-style: italic; }
.d-source { display: inline-block; margin-top: 0.3rem; font-size: 0.85rem; font-weight: 600; color: var(--chrome); text-decoration: underline; text-underline-offset: 2px; }
.d-ts { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.5rem; }
.d-observed { font-weight: 700; }
.d-cta { margin-top: 0.5rem; }

/* ---------- modal ---------- */
.modal-scrim { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 70; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.modal { background: var(--bg-page); border-radius: 12px; width: min(460px, 100%); padding: 1.4rem 1.5rem 1.5rem; box-shadow: 0 16px 48px rgba(0,0,0,0.3); }
.modal-head { display: flex; align-items: center; justify-content: space-between; }
.modal-head h2 { margin: 0; font-size: 1.25rem; }
.modal-x { border: none; background: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--text-muted); }
.modal-sub { color: var(--text-muted); font-size: 0.9rem; margin: 0.25rem 0 1.1rem; }
.field { display: block; margin-bottom: 0.9rem; }
.field span { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.3rem; }
.field small { color: var(--text-muted); font-weight: 400; }
.field input { width: 100%; font: inherit; padding: 0.55rem 0.65rem; border: 1px solid var(--border-soft); border-radius: 7px; background: var(--bg-card); color: var(--text-main); }
.geocode-result { font-size: 0.88rem; padding: 0.6rem 0.75rem; border-radius: 7px; background: var(--bg-card); border: 1px solid var(--border-soft); margin-bottom: 0.9rem; }
.geocode-result.looking { color: var(--text-muted); }
.geocode-result.found { color: var(--clear); border-color: var(--clear); }
.geocode-result .gc-coords { color: var(--text-muted); font-size: 0.8rem; }
.modal-actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 0.4rem; }

/* single / bulk mode toggle */
.add-mode-toggle { display: inline-flex; gap: 0.25rem; background: var(--bg-chrome); border: 1px solid var(--border-soft); border-radius: 8px; padding: 0.2rem; margin: 0.2rem 0 1rem; }
.add-mode { font: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer; border: none; background: none; color: var(--text-muted); padding: 0.4rem 0.85rem; border-radius: 6px; }
.add-mode.on { background: var(--bg-card); color: var(--text-main); box-shadow: 0 1px 2px rgba(0,0,0,0.12); }
.add-panel textarea { width: 100%; font: inherit; font-size: 0.9rem; line-height: 1.4; padding: 0.55rem 0.65rem; border: 1px solid var(--border-soft); border-radius: 7px; background: var(--bg-card); color: var(--text-main); resize: vertical; }
.bulk-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.9rem; }
.bulk-count { font-size: 0.85rem; color: var(--text-muted); font-weight: 600; }

@media (max-width: 760px) {
  .alerts-layout { grid-template-columns: 1fr; }
  .header-actions .btn-primary { padding: 0.5rem 0.7rem; }
  .tabs { margin-left: 0; }
}

/* =====================================================================
   LIVE additions (account chrome, remove, saved indicator, channels,
   recipients, empty state). Everything above is the mockup verbatim.
   ===================================================================== */
.account-chip { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; color: var(--text-muted); max-width: 260px; flex: 0 1 auto; min-width: 0; }
.account-chip .acct-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-badge {
  flex: none; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.14rem 0.42rem; border-radius: 4px; border: 1px solid var(--border-soft);
  background: var(--bg-card); color: var(--text-muted);
}
.plan-badge.plan-pro, .plan-badge.plan-portfolio { background: var(--tint-bg); border-color: var(--tint-border); color: var(--tint-text); }
.plan-badge.plan-starter { background: var(--clear-bg); border-color: var(--clear); color: var(--clear); }
.signout-link { display: inline-flex; align-items: center; height: 34px; padding: 0 0.6rem; border-radius: 6px; font-size: 0.88rem; font-weight: 600; color: var(--text-muted); text-decoration: none; }
.signout-link:hover { color: var(--text-main); background: var(--bg-card); text-decoration: none; }
.refresh-btn {
  font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer;
  background: var(--bg-card); color: var(--text-main);
  border: 1px solid var(--border-soft); border-radius: 6px; height: 34px; padding: 0 0.7rem;
}
.refresh-btn:hover { border-color: var(--tint-border); }
.refresh-btn:disabled, .refresh-btn.busy { opacity: 0.55; cursor: progress; }
.link-btn { font: inherit; font-weight: 600; background: none; border: none; color: var(--chrome); text-decoration: underline; cursor: pointer; padding: 0; }

/* per-card remove control (sits in the footer, does not open the drawer) */
.prop-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.prop-remove {
  font: inherit; font-size: 0.74rem; font-weight: 600; cursor: pointer;
  background: none; border: 1px solid transparent; border-radius: 5px; padding: 0.15rem 0.45rem;
  color: var(--text-muted); opacity: 0.7;
}
.prop-card:hover .prop-remove, .prop-remove:focus { opacity: 1; }
.prop-remove:hover { border-color: var(--threat); color: var(--threat-deep); background: var(--threat-bg); }
.prop-remove:disabled { cursor: progress; opacity: 0.5; }
.d-manage { margin-top: 1.4rem; padding-top: 1rem; border-top: 1px dashed var(--border-soft); display: flex; flex-direction: column; gap: 0.35rem; align-items: flex-start; }
.btn-danger-ghost {
  font: inherit; font-weight: 600; cursor: pointer;
  background: var(--bg-card); color: var(--threat-deep);
  border: 1px solid var(--threat); padding: 0.45rem 0.85rem; border-radius: 6px;
}
.btn-danger-ghost:hover { background: var(--threat-bg); }
.btn-danger-ghost:disabled { opacity: 0.5; cursor: progress; }

/* saved indicator */
.panel-title-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.panel-title-row h2 { margin: 0 0 0.25rem; }
.save-indicator { font-size: 0.78rem; font-weight: 600; padding: 0.15rem 0.5rem; border-radius: 999px; border: 1px solid var(--border-soft); color: var(--text-muted); background: var(--bg-page); }
.save-indicator.ok { color: var(--clear); border-color: var(--clear); background: var(--clear-bg); }
.save-indicator.busy { color: var(--text-muted); }
.save-indicator.err { color: var(--threat-deep); border-color: var(--threat); background: var(--threat-bg); }

/* channels: email is static-on; the rest are disabled with an honest note */
.channel-toggle.is-static { cursor: default; }
.channel-toggle.disabled { cursor: not-allowed; opacity: 0.6; background: var(--bg-page); }
.channel-toggle .ct-note { font-size: 0.7rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-left: 0.15rem; }
.ov-reset { font: inherit; font-size: 0.74rem; font-weight: 600; background: none; border: none; color: var(--chrome); text-decoration: underline; cursor: pointer; padding: 0 0.2rem; }

/* recipients */
.recip-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.45rem 0; border-top: 1px solid var(--border-soft); font-size: 0.9rem; }
.recip-row:first-child { border-top: none; }
.recip-row.readonly .recip-email { font-weight: 600; }
.recip-note { font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.recip-x { font: inherit; font-size: 1.05rem; line-height: 1; background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 0 0.3rem; }
.recip-x:hover { color: var(--threat-deep); }
.recip-add { display: flex; gap: 0.5rem; margin-top: 0.7rem; }
.recip-add input { flex: 1; font: inherit; padding: 0.4rem 0.55rem; border: 1px solid var(--border-soft); border-radius: 6px; background: var(--bg-page); color: var(--text-main); min-width: 0; }

/* add-modal failure state + failed list */
.geocode-result.failed { color: var(--threat-deep); border-color: var(--threat); background: var(--threat-bg); }
.geocode-result.failed a { color: var(--threat-deep); font-weight: 600; }
.gc-failed { margin-top: 0.4rem; font-size: 0.82rem; color: var(--text-main); }
.gc-failed small { color: var(--text-muted); }

/* empty state (no places yet) */
.empty-card {
  grid-column: 1 / -1; max-width: 560px; margin: 1.5rem auto; text-align: center;
  background: var(--bg-card); border: 1px dashed var(--tint-border); border-radius: 12px; padding: 2rem 1.75rem;
}
.empty-card h2 { margin: 0 0 0.5rem; font-size: 1.35rem; }
.empty-card p { color: var(--text-muted); margin: 0 0 1.1rem; line-height: 1.5; }
.empty-card .empty-plan { font-size: 0.82rem; margin: 0.9rem 0 0; }
.alerts-empty { margin-top: 0.8rem; }

/* The header is capped by the 1180px wrap, so viewport media queries do not
   help here. With a plan badge + Change plan + Manage billing the row only
   fits with the email and the "Refresh" label gone — always. The email lives
   in the plan badge tooltip; the refresh button keeps its title/aria-label. */
.account-chip .acct-email { display: none; }
.refresh-btn .refresh-label { display: none; }
.refresh-btn { padding: 0 0.6rem; font-size: 1rem; }
@media (max-width: 900px) {
  .header-inner { gap: 0.75rem; }
  .signout-link { padding: 0 0.4rem; }
}

/* ---- Text-message alerts (Notifications) — mirrors /watch/sms/ preview ---- */
.sms-optin .sub-heading { margin: 0 0 0.25rem; font-size: 1.1rem; }
.sms-optin .sub-explainer { color: var(--text-muted); font-size: 0.85rem; margin: 0 0 0.75rem; line-height: 1.45; }
.sms-optin .sub-form { margin: 0; }
.sms-optin .field label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.3rem; }
.sms-optin .field input[type="tel"], .sms-optin .field input[type="text"] { width: 100%; font: inherit; padding: 0.55rem 0.65rem; border: 1px solid var(--border-soft); border-radius: 7px; background: var(--bg-card); color: var(--text-main); }
.sms-optin .lead-consent { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.9rem; line-height: 1.45; margin: 0.25rem 0 0.5rem; }
.sms-optin .lead-consent input { margin-top: 0.3rem; flex: 0 0 auto; }
.sms-optin .sub-consent { font-size: 0.8rem; color: var(--text-muted); margin: 0 0 0.6rem; }
.sms-optin .sub-actions { margin: 0 0 0.5rem; display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.sms-optin .submit-btn { font: inherit; font-weight: 600; padding: 0.55rem 1rem; border-radius: 7px; border: 1px solid var(--chrome); background: var(--chrome); color: #fff; cursor: pointer; }
.sms-optin .submit-btn:hover:not(:disabled) { background: var(--chrome-hover); border-color: var(--chrome-hover); }
.sms-optin .submit-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.sms-optin .sms-status { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; font-size: 0.95rem; margin: 0.25rem 0 0.5rem; }
.sms-optin .sms-status .sms-num { font-weight: 600; }
.sms-optin .sms-note { font-size: 0.85rem; color: var(--text-muted); margin: 0.4rem 0 0; }
.sms-optin .sms-err { font-size: 0.85rem; color: var(--threat, #8F1D16); margin: 0.4rem 0 0; }
.sms-optin.is-locked .sub-form { opacity: 0.6; }