/* ============================================================================
   INTERACTION v130 — selection, hover cards, mobile chrome. Loaded last.
   ========================================================================== */

/* ── 1. TEXT SELECTION ────────────────────────────────────────────────────
   Double-clicking a word used the browser default: a hard #0078D7 block with
   white text, which on a warm off-white product looks like a system dialog
   leaked into the page. Selection now uses the brand accent at low alpha and
   KEEPS the original text colour, so the highlight reads as a mark over the
   words rather than a replacement of them.

   Alpha, not a solid fill: a solid accent would fail contrast against the
   near-black body text, and against white text in the dark chrome it would
   erase the word entirely.

   NOT var(--accent): checked live, that token is #171512 in light mode - it is
   the focus/ink colour, not the brand. A 26% wash of near-black is a grey
   smear over the words. The brand colour is #D97757, which is what the primary
   button and the active tab actually paint (--tab-active). */
::selection{background:color-mix(in srgb,var(--tab-active,#D97757) 30%,transparent);
  color:inherit;text-shadow:none}
::-moz-selection{background:color-mix(in srgb,var(--tab-active,#D97757) 30%,transparent);
  color:inherit;text-shadow:none}
/* the dark chrome needs a stronger mark to register against near-black */
body .sidebar ::selection,body .topbar ::selection{
  background:color-mix(in srgb,var(--tab-active,#D97757) 55%,transparent);color:inherit}
/* an input's own selection is a text-editing affordance, so it gets a firmer
   mark than running copy - you need to see exactly what a retype will replace */
input::selection,textarea::selection,.input::selection{
  background:color-mix(in srgb,var(--tab-active,#D97757) 38%,transparent);color:inherit}

/* Chrome that is not prose should not look selectable. Dragging across a table
   used to paint half the row furniture blue along with the value you wanted. */
body .nav-item,body .nav-grp,body .nav-kid,body .mnav9,
body .btn,body .icon-btn,body .seg-btn,body .switch,body .badge,
body .dthr,body .dth,body .tb-btn,body .veh-rail-btn,body .tabs,body .tab{
  -webkit-user-select:none;user-select:none}
/* but the DATA in a table stays selectable - people copy plate numbers */
body .dtd,body .dtable-body{-webkit-user-select:text;user-select:text}

/* ── 2. THE TOPBAR SEARCH IS GONE ON A PHONE ──────────────────────────────
   Reported with a screenshot: at 375px the pill renders as "Search M" - a
   clipped placeholder in a control too narrow to type a query into, sitting
   between the burger and three icon buttons. Search still exists on mobile
   through the pages themselves; a stub that cannot show its own placeholder is
   worse than no control. */
@media (max-width:760px){
  body .topbar .tb-search{display:none}
  /* the row rebalances rather than leaving a hole where the pill was */
  body .topbar{gap:8px}
  body .topbar .tb-right{margin-left:auto}
}

/* ── 3. THE HOVER CARD ────────────────────────────────────────────────────
   Positioning is fixed in app.js (it is measured and clamped to the map on all
   four sides now, instead of a hardcoded offset clamped on two). What is left
   here is making it read as a peek at a record rather than a tooltip:
   a real surface, a clear name, quiet supporting lines, and no pointer events
   so it can never eat the click meant for the marker underneath it. */
body .lm-hover{
  position:absolute;z-index:70;pointer-events:none;
  display:flex;align-items:flex-start;gap:10px;
  width:248px;padding:10px 12px;
  background:var(--panel);color:var(--fg);
  border:1px solid var(--line-2);border-radius:0;
  box-shadow:0 10px 28px rgba(0,0,0,.18),0 2px 6px rgba(0,0,0,.10)}
body .lm-hover .hv-thumb{flex:0 0 30px;width:30px;height:30px;display:block}
body .lm-hover .hv-thumb svg{width:30px;height:30px;display:block}
body .lm-hover .hv-name{
  font-size:13.5px;font-weight:660;line-height:1.25;color:var(--fg);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body .lm-hover .hv-addr{
  font-size:12px;line-height:1.4;color:var(--muted);margin-top:2px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
body .lm-hover .hv-drv{
  font-size:11.5px;line-height:1.35;color:var(--fg-2);margin-top:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* a hover card has no business existing on a touch screen - app.js already
   refuses to build one, and this is the belt to that pair of braces */
@media (hover:none){body .lm-hover{display:none}}

/* ── 4. MAP OPTIONS STAYS WITH THE MAP ────────────────────────────────────
   Per the owner: if the bottom sheet ends up covering Map Options or the zoom
   buttons, that is fine - what must not happen is the button being dragged
   around to dodge it. It is anchored to the map's own bottom-left corner and
   left there. */
body .cc-map .cc-map-options{position:absolute;left:12px;right:auto;bottom:12px;z-index:45}
@media (max-width:900px){
  body .cc-map .cc-map-options{left:10px;bottom:10px}
}

/* ── 5. THE SHEET WINS OVER THE MAP'S OWN CONTROLS ────────────────────────
   Measured with a vehicle panel open on a phone: the panel (.ccp) is
   position:fixed at z-index 6 and covers y139-630, while .cc-map-options sits
   at z-index 45. Neither .cc-map nor .cc-rail creates a stacking context that
   would isolate them, so the button painted straight over the panel - it was
   sitting on top of the "Location" heading in the open record.

   The owner's rule is that the sheet taking over Map Options or the +/- is
   fine; the button dodging the sheet is not. So the sheet is simply given the
   higher layer, and the map's furniture goes under it where they overlap. */
body .ccp{z-index:60}
@media (max-width:900px){
  body .cc-rail{position:relative;z-index:50}
  body .cc-rail .ccp{z-index:60}
}

/* ── 6. THE PHONE FIELD ───────────────────────────────────────────────────
   A country and a national number that behave as one control: the dial code
   picker is a fixed-width leading segment, the number takes the rest, and the
   line underneath either shows the E.164 the record will actually store or
   says why it will not save. Showing the stored form matters - it is the value
   a message gateway would later be handed, so it should not be a surprise. */
body .ph-field9{display:block;min-width:0}
body .ph-row9{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);gap:8px}
body .ph-row9>select{min-width:0}
body .ph-note9{
  font-size:12px;line-height:1.45;color:var(--muted);margin-top:5px;min-height:17px}
body .ph-note9.bad{color:var(--danger);font-weight:560}
@media (max-width:640px){
  body .ph-row9{grid-template-columns:minmax(0,1fr);gap:6px}
}

/* ── 7. THE AUTOMATIONS PAGE ──────────────────────────────────────────────
   One rule per row: icon, what it does, its threshold, and the switch on the
   trailing edge. The rows are the page - no nested card inside a card - so a
   list of rules scans as a list rather than a stack of boxes. Square, matching
   every other panel. */
body .auto-card{
  display:grid;grid-template-columns:34px minmax(0,1fr) auto;
  align-items:start;gap:14px;padding:16px 18px;border-radius:0}
body .auto-card+.auto-card{margin-top:-1px}   /* one shared hairline, not two */
body .auto-ic{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:0;
  background:var(--surface-2);border:1px solid var(--line-1);color:var(--fg-2)}
body .auto-ic svg{width:17px;height:17px}
body .auto-main .row-title{font-size:14.5px;font-weight:640;color:var(--fg);line-height:1.3}
body .auto-main .row-sub{font-size:13px;line-height:1.5;color:var(--muted);margin-top:3px}
body .auto-param{
  display:inline-flex;align-items:center;gap:8px;margin-top:10px;
  font-size:12.5px;font-weight:560;color:var(--fg-2)}
body .auto-param input{height:34px}
/* the honest channel line: what the rule does, and what it does NOT do */
body .auto-chan9{
  display:flex;align-items:flex-start;gap:7px;margin-top:10px;padding:8px 10px;
  background:var(--surface-2);border:1px solid var(--line-1);
  font-size:12px;line-height:1.5;color:var(--muted)}
body .auto-chan-ic9{flex:0 0 14px;margin-top:2px;color:var(--fg-2)}
body .auto-chan-ic9 svg{width:14px;height:14px;display:block}
body .auto-chan9 .linkish{font-size:12px;font-weight:600}
body .auto-hero{border-radius:0}
@media (max-width:640px){
  body .auto-card{grid-template-columns:28px minmax(0,1fr);gap:10px;padding:14px}
  body .auto-card>.switch{grid-column:2;justify-self:start;margin-top:10px}
}