/* Inbox and the lead record, inside the workspace shell.

   The premium grammar (docs/specs/premium-redesign.md): hairlines, 32px controls on a desktop
   pointer and 44px on a finger, dense 13px rows, status as a dot and a word, azure only for the
   primary action, the selected row and focus. From 1100px the Inbox is a split view, the
   Measurements grammar: the list on the left, the open lead (or the map) on the right, each
   scrolling on its own. Every value is a portal.css token. Pins reuse the semantic tokens:
   --positive inside the service area, --amber outside, --ink-3 unknown. */

/* Back: the chevron and its words, a quiet 28px text button (measurement-detail.css draws the
   bare md-back as an icon; these pages keep the word). */
.md-back.li-back { display: inline-flex; align-items: center; align-self: flex-start; justify-self: start; gap: 2px; width: auto; height: 28px;
  margin: 0 0 -4px -6px; padding: 0 8px 0 4px; border: 0; border-radius: var(--radius-control); background: transparent;
  color: var(--ink-2); font-size: 13px; font-weight: 500; cursor: pointer; transition: background var(--motion-fast), color var(--motion-fast) }
.md-back.li-back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round }
.md-back.li-back:hover { background: var(--surface-3); color: var(--ink) }
.md-back.li-back:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px }
@media (pointer: coarse) { .md-back.li-back { width: auto; height: 44px } }

.li-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0 }
.li-glyph { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round }

/* A 28px square icon button: the list head's Map and Forms, the pane's Close. */
.li-head-icon { position: relative; display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; padding: 0;
  border: 0; border-radius: var(--radius-control); background: transparent; color: var(--ink-3); cursor: pointer;
  transition: background var(--motion-fast), color var(--motion-fast) }
.li-head-icon:hover { background: var(--surface-3); color: var(--ink); text-decoration: none }
.li-head-icon[aria-pressed=true] { background: var(--surface-3); color: var(--ink) }
.li-head-icon:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px }

/* The banner: leads waiting for credits or held, with the one button that measures them. */
.li-banner-slot:empty { display: none }
.li-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 16px;
  padding: 10px 12px 10px 16px; border: 1px solid var(--amber-line, var(--line)); border-radius: var(--radius-card); background: var(--amber-soft) }
.li-banner-words { flex: 1 1 220px; min-width: 0; display: grid; gap: 2px }
.li-banner-text { min-width: 0; font-size: 13px; font-weight: 500; color: var(--amber-ink); font-variant-numeric: tabular-nums }
.li-banner .button.text { color: var(--amber-ink) }
.li-banner-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.li-banner-note .inline-status { margin: -8px 0 12px; font-size: 13px }
.li-banner-note .inline-status:empty { display: none }

/* Below 1100px: the list, and the map beside or under it. */
.li-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start }
.li-grid > .panel + .panel { margin-top: 0 }
@media (min-width: 1100px) {
  .li-grid { grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr) }
  .li-map-panel { position: sticky; top: 16px }
}
.li-list-panel, .li-map-panel { border-radius: var(--radius-card); box-shadow: none }

.li-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px;
  border-bottom: 1px solid var(--line) }
/* Two dropdowns (which form, which status), then the search and the archived switch. */
.li-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 0 }
.li-filter { margin: 0; min-width: 0 }
.li-form-filter { width: 180px }
.li-status-filter { width: 200px }
.li-filter .cs-trigger, .li-filter select { min-height: 32px; height: 32px; padding-top: 0; padding-bottom: 0; font-size: 13px }
/* input.li-search: specific enough to beat the workspace's 40px default for every input. */
input.li-search { flex: 1 1 200px; min-width: 0; max-width: 320px; height: 32px; min-height: 32px; padding: 0 10px; font-size: 13px }
.li-archived-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; flex: none;
  font-size: 13px; font-weight: 500; color: var(--ink-2); cursor: pointer; white-space: nowrap }
.li-archived-toggle input { width: 14px; height: 14px; margin: 0; accent-color: var(--brand); flex: none }
.li-archived { color: var(--ink-2) }
.li-record > .inline-status:focus { outline: none }
.li-record > .inline-status:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-control) }

/* A row: name and time, address and status, services and source. Unread rows carry a small
   azure dot in the gutter and a heavier name; the word "Unopened" is read out, not shown. */
.li-list { display: grid; align-content: start }
.li-list > .empty { text-align: center }
.li-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; align-items: baseline;
  padding: 10px 16px 11px 28px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none;
  transition: background var(--motion-fast) }
.li-row:hover { background: var(--surface-2); text-decoration: none }
.li-row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px }
.li-row.is-selected { background: var(--brand-soft) }
.li-row.is-selected:hover { background: var(--brand-soft) }
.li-row-main, .li-row-side { display: contents }
.li-name { grid-column: 1; grid-row: 1; display: flex; align-items: center; min-width: 0; font-size: 13px; font-weight: 500; line-height: 20px }
.li-address { grid-column: 1; grid-row: 2 }
.li-services { grid-column: 1; grid-row: 3 }
.li-row-side > .li-meta { grid-column: 2; grid-row: 1; justify-self: end }
.li-row-side > .state-line { grid-column: 2; grid-row: 2; justify-self: end }
.li-row-side > .li-source { grid-column: 2; grid-row: 3; justify-self: end; text-align: right }
.li-name-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.li-name:has(.li-area-mark) .li-name-text { min-width: 64px }
.li-row.unread .li-name { font-weight: 600 }
/* A lead taken although it is outside the area: a small outlined mark after the name. */
.li-area-mark { flex: none; margin-left: 8px; padding: 0 6px; border: 1px solid var(--amber-line); border-radius: 999px;
  color: var(--amber-ink); font-size: 11px; font-weight: 500; line-height: 16px; white-space: nowrap }
.li-row.unread .li-address { color: var(--ink-2) }
.li-new { position: absolute; left: 12px; top: 16px; width: 7px; height: 7px; border-radius: 50%; background: var(--brand);
  overflow: hidden; color: transparent; font-size: 1px; line-height: 1; white-space: nowrap }
.li-address, .li-services, .li-meta, .li-detail, .li-source { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12px; line-height: 18px; color: var(--ink-3) }
.li-address { color: var(--ink-2) }
.li-meta { font-variant-numeric: tabular-nums }
.li-detail { color: var(--ink-3) }
.li-source { max-width: 220px }
.li-row .state-line { gap: 6px; font-size: 12px; line-height: 18px; color: var(--ink-2); font-variant-numeric: tabular-nums }
.li-row .state-dot { width: 7px; height: 7px }
.li-row .state-line.good .li-state-size { color: var(--ink); font-weight: 500 }
/* The record's Source row: the label the Overview counts by, then what else the form recorded. */
.li-source-block { display: grid; gap: 2px; min-width: 0 }
.li-source-main { color: var(--ink); overflow-wrap: anywhere }
.li-source-more { color: var(--ink-3); font-size: 12px; overflow-wrap: anywhere }
/* A lead past the Free plan's monthly lead limit: the shape of a lead, blurred, and one way in.
   Not a link, since there is nothing behind it to open until the account upgrades. It keeps the
   row's grid: the soft bars, the words and when it came on the left, Upgrade on the right. */
.li-locked { align-items: center; cursor: default }
.li-locked:hover { background: transparent }
.li-locked .li-locked-ghost { grid-column: 1; grid-row: 1 }
.li-locked .li-locked-title { grid-column: 1; grid-row: 2 }
.li-locked .li-row-main > .li-meta { grid-column: 1; grid-row: 3 }
.li-locked .li-locked-upgrade { grid-column: 2; grid-row: 1 / span 3; justify-self: end }
.li-locked-ghost { display: grid; gap: 6px; padding: 2px 0 4px; filter: blur(3px) }
.li-locked-bar { display: block; height: 8px; border-radius: 4px; background: var(--line-2) }
.li-locked-bar:nth-child(1) { width: 38% }
.li-locked-bar:nth-child(2) { width: 62% }
.li-locked-bar:nth-child(3) { width: 48% }
.li-locked-title { margin: 0; font-size: 13px; font-weight: 600; line-height: 20px; color: var(--ink) }
.li-locked-card { display: grid; gap: 8px; justify-items: start; padding: 24px }
.li-locked-card .li-locked-title { font-size: 14px }
.li-locked-card .li-locked-ghost { width: min(100%, 420px); margin-bottom: 8px }
.li-locked-note { margin: 0; font-size: 13px; color: var(--ink-3) }
.li-locked-card .li-locked-upgrade { margin-top: 8px }
.li-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px;
  border-top: 1px solid var(--line); color: var(--ink-3); font-size: 12px; font-variant-numeric: tabular-nums }
.li-footer:empty { display: none }
.li-list:has(> .li-row) + .li-footer { border-top: 0 }

.li-map-panel { padding: 0 }
.li-map-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 44px;
  padding: 8px 16px }
.li-map-head h2 { font-size: 13px; font-weight: 600; letter-spacing: 0 }
.li-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--ink-3); font-size: 12px }
.li-legend-item { display: inline-flex; align-items: center; gap: 6px }
.li-legend-dot { width: 8px; height: 8px; border-radius: 50% }
.li-legend-dot.in, .li-pin.in { background: var(--positive) }
/* Outside the service area: a hollow amber ring, so it reads as different without its colour. */
.li-legend-dot.out { background: var(--surface); box-shadow: inset 0 0 0 2px var(--amber) }
.li-pin.out { background: var(--surface); box-shadow: inset 0 0 0 3px var(--amber), var(--shadow-card) }
.li-legend-dot.unknown, .li-pin.unknown { background: var(--ink-3) }
.li-map { height: 420px; border-top: 1px solid var(--line) }
.li-map-panel .inline-status { padding: 0 16px 12px }
.li-map-panel .inline-status:empty { display: none }
.li-pin { display: block; width: 16px; height: 16px; padding: 0; border: 2px solid var(--surface); border-radius: 50%;
  box-shadow: var(--shadow-card); cursor: pointer }
.li-pin:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px }
/* A pin's popup: who, where and its state, on hover or keyboard focus. The wrapper is the map
   marker, so the hovered one rises above its neighbours. */
.li-pin-wrap { position: relative; width: 16px; height: 16px }
.li-pin-wrap:hover, .li-pin-wrap:focus-within { z-index: 3 }
.li-pin-pop { position: absolute; left: 50%; bottom: calc(100% + 8px); display: grid; gap: 1px; width: max-content;
  max-width: 240px; padding: 8px 10px; border-radius: var(--radius-card); background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-pop); font-size: 12px; line-height: 16px; text-align: left; pointer-events: none;
  transform: translateX(-50%); opacity: 0; visibility: hidden; transition: opacity var(--motion-fast) }
.li-pin-wrap:hover .li-pin-pop, .li-pin-wrap:focus-within .li-pin-pop { opacity: 1; visibility: visible }
/* Near the map's edge it opens inward: from the pin's left, its right, or below it. */
.li-pin-pop.at-left { left: -4px; transform: none }
.li-pin-pop.at-right { left: auto; right: -4px; transform: none }
.li-pin-pop.below { bottom: auto; top: calc(100% + 8px) }
.li-pin-pop-name { font-weight: 600; font-size: 13px; overflow-wrap: anywhere }
.li-pin-pop-line { color: var(--ink-2); overflow-wrap: anywhere }
.li-pin-pop-state { color: var(--ink-3); font-variant-numeric: tabular-nums }
.li-pin-pop-state.out { color: var(--amber-ink); font-weight: 500 }

/* The fallback plot: the same pins and outlines on the canvas colour, no tiles. */
.li-plot { width: 100%; height: 100%; display: block; background: var(--surface-2) }
.li-plot-area { fill: var(--brand-soft); fill-opacity: .6; stroke: var(--brand-ink); stroke-width: 1.5 }
.li-plot-draft { fill: none; stroke: var(--brand-ink); stroke-width: 1.5; stroke-dasharray: 6 4 }
.li-plot-vertex { fill: var(--surface); stroke: var(--brand-ink); stroke-width: 1.5 }
.li-plot-pin { stroke: var(--surface); stroke-width: 3 }
.li-plot-pin.in { fill: var(--positive) }
.li-plot-pin.out { fill: var(--surface); stroke: var(--amber); stroke-width: 3.5 }
.li-plot-pin.unknown { fill: var(--ink-3) }
.li-plot-empty { fill: var(--ink-3); font-size: 13px; text-anchor: middle }

/* ------------------------------------------------------------------ the split view (1100px+) */
.main-content:has(> .li-split) { padding: 0; max-width: none; margin: 0 }
.li-split { display: grid; grid-template-columns: 380px minmax(0, 1fr); height: calc(100dvh - var(--header-height)); min-height: 520px }
.li-split-list { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface); border-right: 1px solid var(--line) }
.li-split-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  flex: none; height: 52px; padding: 0 12px 0 16px; background: var(--surface); border-bottom: 1px solid var(--line) }
.li-split-title { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: -.01em; line-height: 1 }
.li-split-head-tools { display: flex; align-items: center; gap: 2px }
.li-split-tools { display: grid; gap: 8px; flex: none; padding: 10px 12px; border-bottom: 1px solid var(--line) }
.li-split .li-filters { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px }
.li-split .li-form-filter, .li-split .li-status-filter { width: auto }
.li-split-toolrow { display: flex; align-items: center; gap: 12px; min-width: 0 }
.li-search-wrap { position: relative; flex: 1 1 auto; min-width: 0 }
.li-search-icon { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none }
.li-split input.li-search { display: block; width: 100%; max-width: none; padding-left: 30px }
.li-split .li-archived-toggle { font-size: 12px; color: var(--ink-3) }
.li-split .li-banner-slot { flex: none }
.li-split .li-banner { margin: 0; padding: 10px 12px 10px 16px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0 }
.li-split .li-banner-text { font-size: 12px }
.li-split .li-banner-note .inline-status { margin: 0; padding: 8px 16px; border-bottom: 1px solid var(--line) }
.li-split .li-list { flex: none }
.li-split .li-meta-form { display: none }
.li-split .li-footer { flex: none; margin-top: auto; border-top: 1px solid var(--line) }
.li-split .li-list > .empty { padding: 40px 20px }

.li-split-detail { position: relative; min-width: 0; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  background: var(--canvas); container: lipane / inline-size }

/* Nothing open: one line saying what goes here, then the map as a card that fills the rest of the
   pane. Every box here is min-width: 0 and as wide as its column, so nothing scrolls sideways. */
.li-map-pane { display: flex; flex-direction: column; gap: 16px; box-sizing: border-box; width: 100%; min-width: 0; height: 100%;
  min-height: 0; padding: 0 24px 24px }
.li-pane-empty { display: flex; align-items: center; gap: 12px; flex: none; min-width: 0; padding: 28px 0 4px }
.li-pane-empty-mark { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border: 1px solid var(--line);
  border-radius: var(--radius-card); background: var(--surface); color: var(--ink-3) }
.li-pane-empty-title { margin: 0; min-width: 0; font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--ink) }
.li-map-card { display: flex; flex-direction: column; flex: 1 1 auto; box-sizing: border-box; width: 100%; min-width: 0; min-height: 360px;
  overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface) }
.li-map-card .li-map-head { flex: none; min-height: 44px; padding: 6px 16px; border-bottom: 1px solid var(--line) }
.li-map-card .li-map { position: relative; flex: 1 1 auto; box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; height: auto;
  min-height: 300px; margin: 0; border: 0; border-radius: 0; aspect-ratio: auto; overflow: hidden }
.li-map-card .inline-status { margin: 0; padding: 8px 16px; border-top: 1px solid var(--line) }
.li-map-card .inline-status:empty { display: none }

/* While a lead is read: its shape, not a spinner. */
.li-pane-skeleton { display: grid; gap: 10px; padding: 18px 20px }
.li-sk { display: block; height: 12px; border-radius: 4px; background: var(--surface-3) }
.li-sk-title { width: 180px; height: 16px }
.li-sk-line { width: 120px }
.li-sk-body { display: grid; gap: 14px; margin-top: 20px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-card);
  background: var(--surface) }
.li-sk-row { width: 70% }
.li-sk-row:nth-child(2n) { width: 48% }
@media (prefers-reduced-motion: no-preference) {
  .li-sk { animation: li-sk-pulse 1.4s ease-in-out infinite alternate }
}
@keyframes li-sk-pulse { from { opacity: 1 } to { opacity: .55 } }

/* The lead in the pane: a 52px bar (Close, the name and its status, the actions), then the body. */
.li-record.li-record-embedded { display: flex; flex-direction: column; gap: 0; min-height: 100% }
.li-pane-head { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 8px 12px; flex: none; min-height: 52px;
  padding: 8px 16px 8px 12px; background: var(--surface); border-bottom: 1px solid var(--line) }
.li-pane-head .li-record-head { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; flex: 1 1 auto; min-width: 0 }
.li-pane-title { margin: 0; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 14px; font-weight: 600; letter-spacing: -.01em; line-height: 20px }
.li-pane-head .li-record-sub { margin: 0; gap: 4px 12px }
.li-pane-head .li-record-sub .state-line, .li-pane-head .li-meta { font-size: 12px }
.li-pane-head .li-actions { flex: none; margin-left: auto; gap: 6px }
.li-pane-body { display: grid; gap: 16px; padding: 20px 24px 48px; min-width: 0 }
.li-pane-body > .inline-status { margin: 0 }
.li-pane-body > .inline-status:empty { display: none }
.li-pane-body > .inline-status:focus { outline: none }
.li-pane-body > .inline-status:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-control) }
.li-pane-error { padding: 20px 24px }
/* In the pane the measurement leads: the picture and the map sit side by side above the record,
   and only a very wide pane puts them in a column beside it. */
.li-record-embedded .li-record-grid { grid-template-columns: minmax(0, 1fr) }
.li-record-embedded .li-record-aside { order: -1 }
.li-record-embedded .li-measure-card { order: -1 }
.li-record-embedded .li-record-map { height: 100%; min-height: 240px }
.li-record-embedded .li-record-aside > .li-record-side:not(.li-measure-card) { display: flex; flex-direction: column }
@container lipane (min-width: 600px) {
  .li-record-embedded .li-record-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch }
  .li-record-embedded .li-record-aside > :only-child { grid-column: 1 / -1 }
  .li-record-embedded .li-record-aside > :only-child .li-record-map { height: 280px }
}
@container lipane (min-width: 1100px) {
  .li-record-embedded .li-record-grid { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px) }
  .li-record-embedded .li-record-aside { order: 0; grid-template-columns: minmax(0, 1fr); position: sticky; top: 72px }
  .li-record-embedded .li-record-map { height: 260px; min-height: 0 }
}

/* ------------------------------------------------------------------ the lead record */
.li-record { display: flex; flex-direction: column; gap: 16px; min-width: 0 }
.li-record-head h1 { font-size: 20px; font-weight: 600; letter-spacing: -.02em; overflow-wrap: anywhere }
.li-record-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 6px }
.li-record-sub .li-meta { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums }
.li-actions { display: flex; flex-wrap: wrap; gap: 8px }
.li-actions .button { min-height: 32px; height: 32px; padding: 0 12px; font-size: 13px; font-weight: 500 }
.li-record > .inline-status { margin: -8px 0 0 }
.li-record > .inline-status:empty { display: none }
.li-record-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start }
.li-record-grid > .panel + .panel { margin-top: 0 }
@media (min-width: 1100px) { .li-record-grid { grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr) } }
.li-record-card { padding: 0 16px; border-radius: var(--radius-card); box-shadow: none }
.li-facts { margin: 0 }
.li-fact { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 4px 16px; align-items: center;
  min-height: 44px; padding: 7px 0; border-bottom: 1px solid var(--line) }
.li-fact:last-child { border-bottom: 0 }
.li-fact dt { color: var(--ink-3); font-size: 13px }
.li-fact dd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; min-width: 0;
  font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere }
.li-copyable { user-select: text; -webkit-user-select: text; min-width: 0; overflow-wrap: anywhere }
.li-contact .li-copyable { flex: 1 1 160px }
.li-contact .button { flex: none; min-height: 28px; height: 28px; padding: 0 10px; font-size: 12px; font-weight: 500; gap: 6px }
.li-contact .button .icon { width: 14px; height: 14px }
.li-copied { color: var(--positive); font-size: 12px }
.li-copied:empty { display: none }
.li-address-line { display: inline-flex; align-items: center; gap: 4px; min-width: 0 }
.li-crm { color: var(--ink-3) }
/* "How they found you": label and value per line, the label in the quiet ink. */
.li-visit { display: grid; gap: 2px; min-width: 0 }
.li-visit-row { display: flex; flex-wrap: wrap; gap: 0 8px; min-width: 0 }
.li-visit-label { color: var(--ink-3); min-width: 96px }
.li-visit-value { color: var(--ink); overflow-wrap: anywhere; font-variant-numeric: tabular-nums }
.li-view { padding-left: 0; min-height: 28px; font-size: 13px }
.li-record-main { display: grid; gap: 16px; min-width: 0 }
.li-record-main > .panel + .panel { margin-top: 0 }

/* Services with their IDs: the name reads first, the ID is small and copies whole. */
.li-service-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; width: 100% }
.li-service { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 28px }
.li-service-name { min-width: 0; overflow-wrap: anywhere }
/* Their answers (Ask 11): the question small and quiet, what they said under it. Long answers
   keep their line breaks. */
.li-answers { display: grid; gap: 10px; width: 100%; margin: 0; padding: 4px 0 }
.li-answers .li-answer { display: grid; gap: 2px; min-width: 0 }
.li-answers .li-answer-label { color: var(--ink-3); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere }
.li-answers .li-answer-value { display: grid; gap: 2px; margin: 0; font-size: 13px; color: var(--ink); line-height: 1.45;
  white-space: pre-line; overflow-wrap: anywhere }
.li-answer-note { font-size: 12px; color: var(--ink-2) }
.li-id { display: inline-flex; align-items: center; gap: 8px }
.li-id-button { position: relative; display: inline-flex; align-items: center; min-height: 28px; padding: 0 7px; border: 1px solid var(--line-2);
  border-radius: var(--radius-control); background: var(--surface); color: var(--ink-3); cursor: pointer;
  font: 500 11px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums;
  transition: background var(--motion-fast), color var(--motion-fast) }
.li-id-button:hover { background: var(--surface-3); color: var(--ink) }
.li-id-button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px }
/* The small controls on a record keep their size and take a 44px square of finger: an
   invisible layer centred on each, at least 44px each way and never smaller than the control. */
.li-id-button::after, .li-consent summary::before, .li-measure-open::after, .li-figure button.md-text-button::after {
  content: ''; position: absolute; top: 50%; left: 50%; width: max(100%, 44px); height: max(100%, 44px);
  transform: translate(-50%, -50%) }

/* Consent: one line that opens to the exact sentence and the privacy link. */
.li-consent { min-width: 0; width: 100% }
.li-consent summary { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 28px; cursor: pointer;
  color: var(--ink); font-variant-numeric: tabular-nums; list-style: none }
.li-consent summary::-webkit-details-marker { display: none }
.li-consent summary::after { content: ''; width: 6px; height: 6px; margin: -3px 2px 0 4px; border: solid var(--ink-3);
  border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform var(--motion-fast) }
.li-consent[open] summary::after { transform: rotate(-135deg); margin-top: 3px }
.li-consent summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-control) }
.li-consent-body { display: grid; gap: 6px; margin-top: 6px; padding: 10px 12px; border-radius: var(--radius-control);
  background: var(--surface-2) }
.li-consent-text { margin: 0; font-size: 12px; line-height: 1.5; color: var(--ink-2) }
.li-consent-link { justify-self: start; font-size: 12px }

/* Notes: who and when on one line, the words under it, the add box at the bottom. */
.li-notes { padding: 0 16px 16px; border-radius: var(--radius-card); box-shadow: none }
.li-notes-head { display: flex; align-items: center; min-height: 44px; margin: 0 -16px; padding: 0 16px; border-bottom: 1px solid var(--line) }
.li-notes-head h2 { font-size: 13px; font-weight: 600; letter-spacing: 0 }
.li-note-list { display: grid; margin: 4px 0 0; padding: 0; list-style: none }
.li-note { display: grid; gap: 4px; padding: 10px 0; border-top: 1px solid var(--line) }
.li-note:first-child { border-top: 0 }
.li-note-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0 }
.li-note-author { font-size: 12px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere }
.li-note-when { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums }
.li-note-body { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere }
.li-note.homeowner .li-note-body { padding: 8px 10px; border: 1px solid var(--brand-line); border-radius: var(--radius-control);
  background: var(--brand-soft) }
.li-note-empty { padding: 10px 0 12px; font-size: 13px; color: var(--ink-3) }
.li-note-form { display: grid; gap: 8px; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line) }
.li-note-label { font-size: 12px; font-weight: 500; color: var(--ink-2) }
.li-note-input { width: 100%; min-width: 0; min-height: 72px; resize: vertical; font: inherit; font-size: 13px; line-height: 1.5 }
.li-note-input[aria-invalid=true] { border-color: var(--rust) }
.li-note-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px }
.li-note-bar .inline-status { flex: 1 1 160px; margin: 0; font-size: 12px }
.li-note-bar .inline-status:empty { display: none }
.li-note-add.button { min-height: 32px; height: 32px; padding: 0 12px; font-size: 13px; font-weight: 500 }

.li-record-side { padding: 0; border-radius: var(--radius-card); box-shadow: none }
.li-record-map { height: 240px }
.li-record-side .inline-status { padding: 8px 12px }
.li-record-side .inline-status:empty { display: none }

/* The right column: the map card, and the measurement card directly under it. The second card
   is the same card (panel + li-record-side), so its radius, padding, border and shadow are the
   map card's by construction, not by copy. */
.li-record-aside { display: grid; gap: 16px; min-width: 0; align-content: start }
.li-record-aside > .panel + .panel { margin-top: 0 }
.li-record-aside > .li-measure-card { padding: 12px }

/* The measurement card holds measurement-detail.js's figure. That stylesheet lays the saved
   page out with display: contents, flex orders and a viewport-sized stage; inside this card
   the pieces are simply stacked, the picture as wide as the card. */
.li-figure .md-map-column, .li-figure .md-stage { display: block; width: auto; max-width: none; min-width: 0 }
.li-figure { display: flex; flex-direction: column; gap: 10px; min-width: 0 }
.li-figure > *, .li-figure .md-frame, .li-figure .md-area, .li-figure .md-status,
.li-figure .md-correction { order: 0 }
.li-figure .md-frame { min-height: 0; border-radius: var(--radius-control); overflow: hidden }
.li-figure .md-area { padding: 0 2px }
.li-figure .md-area strong { font-size: 28px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums }
.li-figure .md-status { margin-top: -6px; padding: 0 2px; font-size: 12px }
.li-figure .md-area-notes { padding: 0 2px }
.li-figure .md-area-notes:empty { display: none }
.li-figure .md-correction { padding: 0 2px }
.li-figure button.md-text-button { position: relative; display: inline-flex; align-items: center; min-height: 28px; margin: 0; padding: 0;
  border: 0; background: none; color: var(--ink-3); font: inherit; font-size: 12px; cursor: pointer;
  transition: color var(--motion-fast) }
.li-figure button.md-text-button:hover { color: var(--brand-ink) }
.li-measure-open { position: relative; align-self: flex-start; display: inline-flex; align-items: center; min-height: 28px; padding: 0 2px;
  color: var(--brand-ink); font-size: 12px; font-weight: 500; text-decoration: none; transition: color var(--motion-fast) }
.li-measure-open:hover { color: var(--ink); text-decoration: none }
.li-measure-open:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-control) }

/* While measuring: a quiet placeholder the size of the picture. */
.li-measure-skeleton { display: grid; place-items: center; aspect-ratio: 1 / 1; border: 1px solid var(--line);
  border-radius: var(--radius-control); background: var(--surface-2) }
.li-measure-skeleton-text { color: var(--ink-3); font-size: 12px; font-variant-numeric: tabular-nums }
@media (prefers-reduced-motion: no-preference) {
  .li-measure-skeleton { animation: li-measure-breathe 1.6s ease-in-out infinite alternate }
}
@keyframes li-measure-breathe { from { opacity: 1 } to { opacity: .6 } }

@media (max-width: 767px) {
  .li-toolbar { padding: 12px }
  input.li-search { max-width: none; flex-basis: 100%; height: auto; min-height: 44px; font-size: 16px }
  .li-filters { flex-basis: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px }
  .li-form-filter, .li-status-filter { width: auto }
  .li-filter .cs-trigger, .li-filter select { min-height: 44px; height: auto }
  .li-source { max-width: 160px }
  .li-row { padding: 12px 12px 13px 26px }
  .li-new { left: 11px; top: 19px }
  .li-meta-form { display: none }
  .li-map { height: 280px }
  .li-record-card { padding: 0 14px }
  .li-fact { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 10px 0 }
  /* A record's actions keep their own width: a lone Archive is not a full-width call to action. */
  .li-actions .button { flex: 0 1 auto; min-height: 44px; height: auto; padding: 0 16px }
  .li-banner-actions { width: 100% }
  .li-banner-actions .button.primary { flex: 1 1 auto; min-height: 44px }
  .li-archived-toggle { min-height: 44px }
  .li-contact .button { min-height: 40px; height: auto }
  .li-contact .li-copyable { flex-basis: 100% }
  .li-notes { padding: 0 14px 14px }
  .li-notes-head { margin: 0 -14px; padding: 0 14px }
  .li-note-add.button { flex: 1 1 100%; min-height: 44px; height: auto }
  .li-note-input { font-size: 16px }
  .li-id-button { min-height: 32px }
  .li-consent summary { min-height: 40px; flex-wrap: wrap }
  .li-measure-open { min-height: 44px }
  .li-record-one > .li-record-aside { display: none }
  .li-record-main > .li-measure-card { padding: 12px }
  .li-address-line .maps-pin-button, .li-figure .maps-pin-button { width: 44px; height: 44px }
  /* A locked row's Upgrade goes under its words, full width, a finger's height. */
  .li-locked .li-locked-upgrade { grid-column: 1 / -1; grid-row: 4; justify-self: stretch; margin-top: 8px }
  .li-locked .li-locked-upgrade, .li-locked-card .li-locked-upgrade { width: 100%; min-height: 44px; justify-content: center }
  .li-locked-card { padding: 16px }
}

/* A finger gets 44px on every control, whatever the width. */
@media (pointer: coarse) {
  .li-head-icon { width: 44px; height: 44px }
  .li-filter .cs-trigger, .li-filter select, input.li-search { min-height: 44px; height: auto }
  .li-archived-toggle { min-height: 44px }
  .li-actions .button, .li-note-add.button { min-height: 44px; height: auto }
  .li-contact .button { min-height: 40px; height: auto }
}

@media (prefers-reduced-motion: reduce) {
  .li-row, .li-head-icon, .li-id-button, .li-measure-open, .li-consent summary::after { transition: none }
}

/* ------------------------------------------------------------------ the quote
   First in the record, in the CRM shape: a row per service at its list price (the name, its size
   tier under it, the price right aligned in tabular figures), then the subtotal and the package's
   discount when there is one, the total, and any service that needs a call.
   Scoped twice over so the workspace's own table grammar never restyles these cells. */
.li-quote-slot { display: contents }
.li-quote { padding: 0 16px; border-radius: var(--radius-card); box-shadow: none }
.li-quote-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; margin: 0 -16px;
  padding: 0 16px; border-bottom: 1px solid var(--line) }
.li-quote-head h2 { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0 }
.li-quote-basis { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap }
.li-quote .li-quote-table { width: 100%; margin: 0; border-collapse: collapse; font-size: 13px; white-space: normal }
.li-quote .li-quote-table th, .li-quote .li-quote-table td { height: auto; padding: 10px 0; border: 0; border-bottom: 1px solid var(--line);
  background: transparent; color: var(--ink); font-size: 13px; font-weight: 400; text-align: left; vertical-align: top; white-space: normal }
.li-quote .li-quote-table td.li-quote-amount { padding-left: 16px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums }
.li-quote-name { display: block; overflow-wrap: anywhere }
.li-quote-note { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums }
.li-quote-price { font-variant-numeric: tabular-nums }
.li-quote .li-quote-table .li-quote-subtotal th, .li-quote .li-quote-table .li-quote-subtotal td,
.li-quote .li-quote-table .li-quote-package th, .li-quote .li-quote-table .li-quote-package td { color: var(--ink-2) }
.li-quote .li-quote-table .li-quote-subtotal th, .li-quote .li-quote-table .li-quote-subtotal td,
.li-quote .li-quote-table .li-quote-package th, .li-quote .li-quote-table .li-quote-package td { padding-top: 8px; padding-bottom: 8px }
.li-quote .li-quote-table .li-quote-subtotal th, .li-quote .li-quote-table .li-quote-subtotal td { border-bottom: 0 }
.li-quote .li-quote-table .li-quote-unpriced td { color: var(--ink-2) }
.li-quote-call { font-size: 12px; color: var(--ink-2) }
.li-quote .li-quote-table .li-quote-total th, .li-quote .li-quote-table .li-quote-total td { padding: 12px 0; border-bottom: 0;
  font-size: 14px; font-weight: 600 }
.li-quote .li-quote-table .li-quote-total td { padding-left: 16px }
.li-quote .li-quote-table tr:last-child th, .li-quote .li-quote-table tr:last-child td { border-bottom: 0 }
@media (max-width: 767px) {
  .li-quote { padding: 0 14px }
  .li-quote-head { margin: 0 -14px; padding: 0 14px }
  .li-quote .li-quote-table td.li-quote-amount { padding-left: 12px }
  .li-quote-call { white-space: normal; text-align: right }
  .li-quote .li-quote-table .li-quote-unpriced td { white-space: normal }
}