/* ═══════════════════════════════════════════════════════════════════
   Mocca — CONTACTS + ADDRESSES (B51-01)

   B55 — the two routing rows that used to sit here moved into `sections.css`,
   with every other route's. Keeping local copies tied on specificity with the
   mobile-landscape rail rule and beat it on load order, so in landscape the view
   stayed a column while `.sec-tabs` claimed `height:100%` and pushed the page
   off-screen. Do NOT reintroduce a per-module show-row.

   Everything is token-based: light/dark, env theater and RTL come for
   free, and every inline-direction property is logical.
   ═══════════════════════════════════════════════════════════════════ */

/* ── header controls (B54-39/41/42) ───────────────────────────────
   The group filter and the address tabs ride in `.page-h > .acts` beside the
   title now (the Calendar / Zones pattern); the route's own search field and
   New-address chip are gone — the shell owns both. */
.ct-seg,.ct-ad-tabs{ flex:0 0 auto; }

/* ── contact cards ───────────────────────────────────────────────── */
.ct-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:12px; }
.ct-card{ display:flex;flex-direction:column;gap:10px;padding:14px;border:1px solid var(--bd-1,#dfe4e8);border-radius:var(--mk-radius-lg,14px);background:var(--bg-1,#fff);cursor:pointer;transition:border-color var(--mk-t-fast),box-shadow var(--mk-t-fast),transform var(--mk-t-fast); }
.ct-card:hover{ border-color:var(--fg-3);box-shadow:0 6px 18px rgba(13,25,32,.07);transform:translateY(-1px); }
.ct-card:focus-visible{ outline:2px solid var(--accent);outline-offset:2px; }
.ct-card-top{ display:flex;align-items:center;gap:11px;min-width:0; }
.ct-card .av.lg{ width:46px;height:46px;font-size:15px;flex:0 0 auto; }
.ct-nm-wrap{ min-width:0; }
.ct-nm{ display:flex;flex-direction:column;gap:1px;min-width:0; }
.ct-nm .ct-first{ font:700 15px/1.2 var(--mk-font-ui);color:var(--fg-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.ct-nm .ct-last{ font:500 13px/1.25 var(--mk-font-ui);color:var(--fg-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.ct-role{ margin-top:2px;font:500 11.5px/1.3 var(--mk-font-ui);color:var(--fg-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.ct-ctry{ display:flex;align-items:center;gap:7px;font:500 12.5px/1 var(--mk-font-ui);color:var(--fg-2); }
/* B52-06 (Pablo: "Country flags should be circled and cropped to fit a 1:1")
   — was a 20×14 rectangle. Same treatment as the wallet's `.wl-flag` (B50-19):
   a square round box, the flag cropped to fill it by `object-fit:cover`, so the
   3:2 artwork is centre-cropped rather than squashed to a circle. */
.ct-flag{ width:18px;height:18px;aspect-ratio:1;object-fit:cover;border-radius:50%;flex:0 0 auto;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fg-1) 12%,transparent),0 0 0 1px color-mix(in srgb,var(--fg-1) 8%,transparent); }
.ct-flag-fb{ width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--bg-2,#f4f6f8);font-size:13px;color:var(--fg-3);flex:0 0 auto; }
.ct-city{ display:flex;align-items:center;gap:7px;width:100%;padding:8px 10px;border:1px solid var(--bd-1,#dfe4e8);border-radius:9px;background:var(--bg-2,#f4f6f8);font:600 12.5px/1 var(--mk-font-ui);color:var(--fg-1);cursor:pointer;transition:border-color var(--mk-t-fast),background var(--mk-t-fast); }
.ct-city:hover{ border-color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,transparent); }
.ct-city > .mi{ font-size:16px;color:var(--accent-text,var(--accent)); }
.ct-city .ct-city-go{ margin-inline-start:auto;font-size:14px;color:var(--fg-3); }
.ct-card-foot{ display:flex;flex-wrap:wrap;gap:6px; }
.ct-chip{ display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:999px;border:1px solid var(--bd-1,#dfe4e8);background:var(--bg-1,#fff);font:600 11px/1 var(--mk-font-ui);color:var(--fg-2);white-space:nowrap; }
.ct-chip .mi{ font-size:14px;color:var(--fg-3); }
.ct-chip.ok{ border-color:color-mix(in srgb,var(--mk-ok,#2f9e63) 40%,transparent);color:var(--mk-ok,#2f9e63); }
.ct-chip.ok .mi{ color:var(--mk-ok,#2f9e63); }
.ct-chip.locked{ color:var(--fg-3); }
/* B63-133 — Go moves from its own action row into the meta chip row; it's a
   real <button> now (the others are <span>s), so it needs the reset + a
   clickable/accent look consistent with `.wl-chip`'s buttons elsewhere. */
.ct-go-chip{ cursor:pointer;border-color:var(--accent);color:var(--accent-text,var(--accent)); }
.ct-go-chip .mi{ color:inherit; }
.ct-go-chip:hover{ background:color-mix(in srgb,var(--accent) 10%,transparent); }
button.ct-chip.as-btn{ cursor:pointer; }
button.ct-chip.as-btn:hover{ border-color:var(--accent);color:var(--accent-text,var(--accent)); }
.ct-empty{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;grid-column:1/-1;padding:34px 18px;border:1px dashed var(--bd-1,#dfe4e8);border-radius:var(--mk-radius-lg,14px);color:var(--fg-3);font:500 13px/1.4 var(--mk-font-ui);text-align:center; }
.ct-empty .mi{ font-size:26px; }
.ct-empty b{ font:700 15px/1.3 var(--mk-font-ui);color:var(--fg-1); }
/* B59 — the in-panel size states an absence in two lines (title + why), so it needs
   its own scale rather than the 15px page-level claim. */
.ct-empty.small{ padding:18px;gap:5px; }
.ct-empty.small .mi{ font-size:22px; }
.ct-empty.small b{ font-size:13px; }
.ct-empty.small span{ font:500 11.5px/1.45 var(--mk-font-ui);color:var(--fg-3);text-align:center;text-wrap:pretty;max-width:34ch; }
.ct-empty-cta{ gap:10px; }

/* ── contact panel ───────────────────────────────────────────────── */
.ct-panel{ z-index:1206; }
.ct-hd-av .av{ width:24px;height:24px;font-size:9px; }
.ct-hero{ display:flex;align-items:center;gap:14px;padding-bottom:14px;border-bottom:1px solid var(--divider,#eceff1); }
.ct-hero .av.xl{ width:62px;height:62px;font-size:19px;flex:0 0 auto; }
.ct-hero-t{ min-width:0; }
.ct-hero-nm{ font:500 19px/1.2 var(--mk-font-ui);color:var(--fg-1); }
.ct-hero-nm b{ font-weight:700; }
.ct-hero-sub{ margin-top:3px;font:500 12.5px/1.3 var(--mk-font-ui);color:var(--fg-3); }
.ct-hero-chips{ display:flex;flex-wrap:wrap;gap:6px;margin-top:8px; }
.ct-hero-acts{ display:flex;flex-wrap:wrap;gap:7px;padding:12px 0 4px; }
.ct-hero-acts .wl-chip{ text-decoration:none; }
/* B63-093/126 — `.ct-row` is ALSO the app's expandable-box tree row (Catalog,
   Stock, Roles, Support, Menu — sections.css), and this file loads after that
   one, so the contact field's `padding:9px 0` was wiping every tree box's side
   padding ("Why are you making the same mistake in so many places?"). The
   contact field is a `.ct-row` that is NOT inside a `.ct-tree`. */
/* B63-142 — "These boxes need a bit of padding to both sides" (a locked
   contact field row, e.g. Birthday). Safe to add here: this branch is
   already scoped away from `.ct-tree .ct-row` (see the note above), so the
   tree boxes' own side padding is untouched. */
/* Audit S5 · B63-142 re-check — 4px was still flush: sections.css draws EVERY
   `.ct-row` as a bordered 12px-radius box, so a field row is a box too and
   needs the tree boxes' own side padding (the icon and the "Request access"
   pill / the e-mail were touching the border). */
/* B65 W11 (065-079 "When I hover on these boxes, the bottom section doesn't get
   the styles") — this branch used to swap the box's bottom edge for a divider
   line (and drop it on the last row), so on hover the top and sides took the accent
   border and the bottom stayed grey. A field row is a whole box (sections.css draws
   its four edges); this only sets its inner layout, so every edge hovers together. */
.ct-row:not(.ct-tree .ct-row){ display:flex;align-items:center;gap:10px;padding:9px 12px;min-height:40px; }
.ct-row.is-locked:not(.ct-tree .ct-row){ cursor:default; }
.ct-row-ic{ font-size:18px;color:var(--fg-3);flex:0 0 auto; }
.ct-row-l{ font:600 12px/1.2 var(--mk-font-ui);color:var(--fg-3);flex:0 0 96px; }
.ct-row-v{ margin-inline-start:auto;font:600 13px/1.35 var(--mk-font-ui);color:var(--fg-1);text-align:end;min-width:0;overflow-wrap:anywhere; }
.ct-row-v a{ color:var(--fg-1);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--accent) 45%,transparent); }
.ct-row-v a:hover{ color:var(--accent-text,var(--accent)); }
.ct-row-tag{ display:inline-flex;align-items:center;gap:4px;margin-inline-start:8px;padding:3px 7px;border-radius:999px;background:color-mix(in srgb,var(--mk-ok,#2f9e63) 12%,transparent);color:var(--mk-ok,#2f9e63);font:700 10px/1 var(--mk-font-ui);white-space:nowrap; }
.ct-row-tag .mi{ font-size:12px; }
.ct-row.is-locked .ct-row-l{ color:var(--fg-3); }
.ct-req{ display:inline-flex;align-items:center;gap:6px;margin-inline-start:auto;padding:6px 11px;border-radius:999px;border:1px solid color-mix(in srgb,var(--accent) 42%,transparent);background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--accent-text,var(--accent));font:700 11.5px/1 var(--mk-font-ui);cursor:pointer;white-space:nowrap;transition:background var(--mk-t-fast),border-color var(--mk-t-fast); }
.ct-req:hover{ background:color-mix(in srgb,var(--accent) 16%,transparent);border-color:var(--accent); }
.ct-req .mi{ font-size:14px; }
.ct-pend{ display:inline-flex;align-items:center;gap:6px;margin-inline-start:auto;padding:5px 10px;border-radius:999px;background:color-mix(in srgb,var(--warn,#c98a1e) 13%,transparent);color:var(--mk-warn,#a9741a);font:700 11px/1 var(--mk-font-ui);white-space:nowrap; }
.ct-pend .mi{ font-size:13px; }
.ct-den{ display:inline-flex;align-items:center;gap:6px;margin-inline-start:auto;padding:5px 10px;border-radius:999px;background:color-mix(in srgb,var(--mk-err,#d64545) 12%,transparent);color:var(--mk-err,#d64545);font:700 11px/1 var(--mk-font-ui);white-space:nowrap; }
.ct-den .mi{ font-size:13px; }
.ct-den + .ct-req{ margin-inline-start:7px; }
.ct-locked-block{ display:flex;flex-direction:column;align-items:flex-start;gap:9px;padding:14px;border:1px dashed var(--bd-1,#dfe4e8);border-radius:12px;background:var(--bg-2,#f4f6f8);font:500 12.5px/1.5 var(--mk-font-ui);color:var(--fg-3); }
.ct-locked-block > .mi{ font-size:20px;color:var(--fg-3); }
.ct-locked-block .ct-req{ margin-inline-start:0; }

/* ── address cards ───────────────────────────────────────────────── */
.ct-ad-sec{ display:flex;flex-direction:column;gap:10px; }
.ct-sech-add{ margin-inline-start:auto;display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;border:1px solid var(--bd-1,#dfe4e8);background:var(--bg-1,#fff);font:700 11px/1 var(--mk-font-ui);color:var(--accent-text,var(--accent));cursor:pointer; }
.ct-sech-add:hover{ border-color:var(--accent); }
.ct-sech-add .mi{ font-size:14px; }
.ct-ad-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:12px; }
.ct-ad-grid.in-panel{ grid-template-columns:1fr; }
.ct-ad-card{ display:flex;flex-direction:column;gap:10px;padding:13px;border:1px solid var(--bd-1,#dfe4e8);border-radius:var(--mk-radius-lg,14px);background:var(--bg-1,#fff); }
.ct-ad-hd{ display:flex;align-items:flex-start;gap:10px; }
.ct-ad-ic{ font-size:19px;color:var(--accent-text,var(--accent));flex:0 0 auto;margin-top:1px; }
.ct-ad-t{ min-width:0;flex:1; }
.ct-ad-lbl{ font:700 13.5px/1.25 var(--mk-font-ui);color:var(--fg-1); }
.ct-ad-line{ margin-top:2px;font:500 12px/1.4 var(--mk-font-ui);color:var(--fg-3); }
.ct-ad-owner .av{ width:26px;height:26px;font-size:9.5px; }
.ct-ad-meta{ display:flex;flex-wrap:wrap;gap:6px; }
.ct-danger{ color:var(--mk-err,#d64545); }
.ct-danger .mi{ color:var(--mk-err,#d64545); }
button.ct-danger:hover{ border-color:var(--mk-err,#d64545); }

/* ── shared map modal ────────────────────────────────────────────── */
/* B53-03 (Pablo: "Why is this also a modal? Why aren't we using panels?") — the
   city, the address and the editor are the app's shared slide-in panel now. The
   `.ct-modal` shell and the `.ct-m-body` side-by-side split are gone: a panel is
   a COLUMN, so the map sits above its details instead of beside them, and the
   panel host supplies the shell, scrim, header and footer. */
.ct-panel{ --mk-panel-w:640px; }
.ct-p-sub{ display:flex;align-items:center;gap:6px;font:500 12px/1.35 var(--mk-font-ui);color:var(--fg-3);min-width:0;flex-wrap:wrap;margin-bottom:10px; }
.ct-p-sub:empty{ display:none; }
.mp-panel .panel-ft.ct-p-ft{ gap:8px;flex-wrap:wrap; }
.ct-p-ft .ct-m-who{ margin-inline-end:auto; }
/* the kind question that replaced the 3-point step bar */
.ct-kinds{ display:flex;flex-direction:column;gap:9px;margin-top:4px; }
.ct-kind{ display:flex;align-items:center;gap:13px;padding:15px 14px;border:1px solid var(--bd-1,#dfe4e8);
  border-radius:var(--mk-radius-md,14px);background:var(--bg-1,#fff);cursor:pointer;text-align:start;
  transition:border-color var(--mk-t-fast),box-shadow var(--mk-t-fast); }
.ct-kind:hover{ border-color:var(--accent);box-shadow:0 2px 4px rgba(13,37,48,.05),0 12px 24px -14px rgba(13,37,48,.22); }
.ct-kind-ic{ font-size:26px;color:var(--accent-text,var(--accent));flex:0 0 auto; }
.ct-kind-tx{ flex:1;min-width:0;display:flex;flex-direction:column;gap:3px; }
.ct-kind-tx b{ font:700 14px/1.25 var(--mk-font-ui);color:var(--fg-1); }
.ct-kind-tx span{ font:500 11.5px/1.45 var(--mk-font-ui);color:var(--fg-3);text-wrap:pretty; }
.ct-kind-go{ font-size:20px;color:var(--fg-3);flex:0 0 auto; }
html[dir="rtl"] .ct-kind-go{ transform:scaleX(-1); }
.ct-kindln{ display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;background:var(--bg-2,#f4f6f8); }
.ct-kindln .mi{ font-size:16px;color:var(--accent-text,var(--accent)); }
.ct-kindln b{ flex:1;min-width:0;font:700 12px/1.2 var(--mk-font-ui);color:var(--fg-1); }
.ct-kind-sw{ border:1px solid var(--bd-1,#dfe4e8);background:var(--bg-1,#fff);border-radius:8px;cursor:pointer;
  padding:4px 9px;font:700 10.5px var(--mk-font-ui);color:var(--fg-2); }
.ct-kind-sw:hover{ border-color:var(--accent);color:var(--accent-text,var(--accent)); }
/* the enclosure's two steps: a state readout, not a picker — the flow is fixed */
.ct-ed-steps2{ display:flex;align-items:center;gap:6px;flex-wrap:wrap; }
.ct-st{ display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;cursor:pointer;
  border:1px solid var(--bd-1,#dfe4e8);background:var(--bg-1,#fff);font:700 10.5px/1 var(--mk-font-ui);color:var(--fg-3); }
.ct-st .mi{ font-size:14px; }
.ct-st.on{ border-color:var(--accent);color:var(--accent-text,var(--accent));background:var(--accent-soft); }
.ct-st.done{ border-color:color-mix(in srgb,oklch(.6 .13 155) 40%,var(--bd-1,#dfe4e8));color:oklch(.5 .12 155); }
.ct-st.off{ opacity:.55;cursor:default; }
.ct-st-req{ font:700 9px var(--mk-font-ui);font-style:normal;letter-spacing:.05em;text-transform:uppercase;color:var(--mk-danger,#c0392b); }
.ct-st-sep{ font-size:16px;color:var(--fg-3); }
html[dir="rtl"] .ct-st-sep{ transform:scaleX(-1); }
.ct-map{ height:clamp(220px,38vh,330px);min-height:220px;border-radius:12px;overflow:hidden;border:1px solid var(--bd-1,#dfe4e8);background:var(--bg-2,#f4f6f8); }
.ct-m-side{ display:flex;flex-direction:column;gap:12px;margin-top:12px; }
.ct-m-side[hidden]{ display:none; }
.ct-side-blk{ display:flex;flex-direction:column;gap:6px; }
.ct-side-h{ display:flex;align-items:center;gap:6px;font:700 11px/1 var(--mk-font-ui);letter-spacing:.04em;text-transform:uppercase;color:var(--fg-3); }
.ct-side-h .mi{ font-size:15px; }
.ct-side-v{ font:600 12.5px/1.45 var(--mk-font-ui);color:var(--fg-1); }
.ct-side-v.muted{ color:var(--fg-3);font-weight:500; }
.ct-side-v.ok{ color:var(--mk-ok,#2f9e63); }
.ct-side-sub{ display:block;margin-top:2px;font:500 11.5px/1.4 var(--mk-font-ui);color:var(--fg-3); }
.ct-side-ll{ display:flex;align-items:center;gap:5px;font:500 11px/1 var(--mk-font-ui);color:var(--fg-3);font-variant-numeric:tabular-nums; }
.ct-side-ll .mi{ font-size:13px; }
.ct-ap-row{ display:flex;flex-direction:column;gap:6px;padding:9px 10px;border:1px solid var(--bd-1,#dfe4e8);border-radius:11px;background:var(--bg-2,#f4f6f8);transition:border-color var(--mk-t-fast); }
.ct-ap-row.hot{ border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent); }
.ct-ap-nm{ display:flex;align-items:center;gap:7px;font:700 12.5px/1.2 var(--mk-font-ui);color:var(--fg-1); }
.ct-ap-dot{ display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:999px;background:var(--accent);color:#fff;font:700 10px/1 var(--mk-font-ui);flex:0 0 auto; }
.ct-ap-line{ font:500 11.5px/1.4 var(--mk-font-ui);color:var(--fg-3); }
.ct-veh-row{ display:flex;flex-wrap:wrap;gap:5px; }
.ct-veh{ display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px;background:var(--bg-1,#fff);border:1px solid var(--bd-1,#dfe4e8);font:600 10.5px/1 var(--mk-font-ui);color:var(--fg-2); }
.ct-veh .mi{ font-size:13px;color:var(--accent-text,var(--accent)); }
.ct-ap-go{ align-self:flex-start;display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:999px;border:1px solid var(--bd-1,#dfe4e8);background:var(--bg-1,#fff);font:700 10.5px/1 var(--mk-font-ui);color:var(--accent-text,var(--accent));cursor:pointer; }
.ct-ap-go:hover{ border-color:var(--accent); }
.ct-ap-go .mi{ font-size:13px; }
.ct-m-who{ display:flex;align-items:center;gap:7px;margin-inline-end:auto;font:600 12px/1 var(--mk-font-ui);color:var(--fg-2);min-width:0; }
.ct-m-who .av{ width:24px;height:24px;font-size:9px; }
.ct-m-who > .mi{ font-size:16px;color:var(--fg-3); }
.ct-note{ display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:999px;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent-text,var(--accent));font:700 11px/1.3 var(--mk-font-ui);white-space:normal; }
.ct-note .mi{ font-size:14px; }

/* access-point marker (the MapView `.mk-pin` language, one size up)
   B52-08: one vehicle icon, so the pin is a true 26px circle — it used to grow
   into a lozenge whenever two icons were stacked in it. */
.ct-ap-pin{ display:flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;border-radius:50%;background:var(--bg-1,#fff);border:2px solid var(--accent);box-sizing:border-box;box-shadow:0 2px 8px rgba(13,25,32,.22); }
.ct-ap-pin .mi{ font-size:14px;color:var(--accent-text,var(--accent)); }

/* ── editor ──────────────────────────────────────────────────────── */
.ct-ed-steps-removed{ display:none } /* the 3-point bar is gone — see `.ct-ed-steps2` */
.ct-ed-hint{ display:flex;align-items:flex-start;gap:7px;padding:9px 10px;border-radius:10px;background:var(--bg-2,#f4f6f8);font:500 11.5px/1.45 var(--mk-font-ui);color:var(--fg-2); }
.ct-ed-hint .mi{ font-size:15px;color:var(--accent-text,var(--accent));flex:0 0 auto; }
.ct-ed-zone-acts{ display:flex;flex-wrap:wrap;gap:6px; }
.ct-ed-zone-acts .wl-chip[disabled]{ opacity:.45;cursor:not-allowed; }
.ct-ed-aps{ display:flex;flex-direction:column;gap:9px; }
.ct-ed-ap{ display:flex;flex-direction:column;gap:7px;padding:10px;border:1px solid var(--bd-1,#dfe4e8);border-radius:11px;background:var(--bg-2,#f4f6f8); }
.ct-ed-ap.hot{ border-color:var(--accent); }
.ct-ed-ap-hd{ display:flex;align-items:center;gap:7px; }
.ct-ed-ap-hd .ent-input{ flex:1;min-width:0; }
.ct-ed-ap-x{ flex:0 0 auto;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;border:0;background:none;border-radius:7px;color:var(--fg-3);cursor:pointer; }
.ct-ed-ap-x:hover{ background:color-mix(in srgb,var(--mk-err,#d64545) 12%,transparent);color:var(--mk-err,#d64545); }
.ct-ed-ap-ll{ display:flex;align-items:center;gap:5px;font:500 10.5px/1 var(--mk-font-ui);color:var(--fg-3);font-variant-numeric:tabular-nums; }
.ct-ed-ap-ll .mi{ font-size:12px; }
.ct-veh-pick{ display:flex;flex-wrap:wrap;gap:5px; }
.ct-veh-t{ display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:999px;border:1px solid var(--bd-1,#dfe4e8);background:var(--bg-1,#fff);font:600 10.5px/1 var(--mk-font-ui);color:var(--fg-3);cursor:pointer;transition:all var(--mk-t-fast); }
.ct-veh-t .mi{ font-size:13px; }
.ct-veh-t:hover{ border-color:var(--fg-3);color:var(--fg-1); }
.ct-veh-t.on{ border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent-text,var(--accent)); }
.ct-ed-form{ display:flex;flex-direction:column;gap:9px;padding-bottom:11px;border-bottom:1px solid var(--divider,#eceff1); }
.ct-ed-row2{ display:grid;grid-template-columns:1fr 1fr;gap:8px; }
.ct-ed-f{ display:flex;flex-direction:column;gap:4px; }
.ct-ed-f > span{ font:600 11px/1 var(--mk-font-ui);color:var(--fg-3); }
.ct-ed-ll{ display:flex;align-items:center;gap:5px;font:600 11px/1 var(--mk-font-ui);color:var(--fg-3);font-variant-numeric:tabular-nums; }
.ct-ed-ll .mi{ font-size:13px; }
.ct-panel-ed .ct-map{ cursor:crosshair; }

/* ── Go popover ──────────────────────────────────────────────────── */
.ct-go-pop{ position:fixed;z-index:1500;min-width:196px;padding:6px;border-radius:12px;border:1px solid var(--bd-1,#dfe4e8);background:var(--bg-1,#fff);box-shadow:var(--shadow-pop,0 16px 40px rgba(13,25,32,.18));display:flex;flex-direction:column;gap:2px; }
.ct-go-h{ display:flex;align-items:center;gap:6px;padding:6px 8px 7px;font:700 11px/1 var(--mk-font-ui);letter-spacing:.04em;text-transform:uppercase;color:var(--fg-3);border-bottom:1px solid var(--divider,#eceff1);margin-bottom:3px; }
.ct-go-h .mi{ font-size:14px; }
.ct-go-nm{ margin-inline-start:auto;text-transform:none;letter-spacing:0;font-weight:600;color:var(--fg-2);max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.ct-go-i{ display:flex;align-items:center;gap:8px;padding:8px 9px;border-radius:9px;font:600 12.5px/1 var(--mk-font-ui);color:var(--fg-1);text-decoration:none;transition:background var(--mk-t-fast); }
.ct-go-i:hover{ background:var(--bg-2,#f4f6f8); }
.ct-go-i .mi{ font-size:17px;color:var(--accent-text,var(--accent)); }
/* B57 — step 1 of the handoff: which way in. Same popover, same row grammar; a
   button rather than a link because it goes to the app list, not to a map. */
.ct-go-ap{ width:100%;box-sizing:border-box;border:0;background:transparent;cursor:pointer;text-align:start; }
.ct-go-ap-m{ display:flex;flex-direction:column;gap:2px;min-width:0;flex:1; }
.ct-go-ap-m b{ font:700 12.5px/1.2 var(--mk-font-ui);color:var(--fg-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.ct-go-ap-m i{ font:500 11px/1.2 var(--mk-font-ui);font-style:normal;color:var(--fg-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.ct-go-ap .ct-go-ap-go{ color:var(--fg-3);font-size:16px; }
.ct-go-back{ width:20px;height:20px;padding:0;border:0;background:transparent;cursor:pointer;color:var(--fg-2);display:inline-flex;align-items:center;justify-content:center; }
.ct-go-back .mi{ font-size:16px; }

/* ── new contact · a PANEL, not a modal (B54-05) ──────────────────
   The shell, the header, the slide grammar and the footer are MoccaPanel's; all
   this file adds is the form's own rhythm and a home for the phone component. */
.ct-nc-panel .ct-nc-form{ border-bottom:0;padding-bottom:0;gap:12px; }
.ct-nc-panel .ct-nc-form > .ct-ed-f > span{ letter-spacing:.02em; }
.ct-nc-ph .mk-ph{ width:100%; }
.ct-nc-ph .mk-ph-label{ display:none; }
.ct-nc-ph .mk-ph-msg{ font-size:10.5px; }
.ct-nc-grp{ align-self:flex-start; }

/* ── responsive ──────────────────────────────────────────────────── */
@media (max-width:900px){
  .ct-panel{ --mk-panel-w:min(640px,100vw); }
}
@media (max-width:700px){
  .ct-map{ height:34vh;min-height:200px; }
  .ct-grid,.ct-ad-grid{ grid-template-columns:1fr; }
  .ct-row-l{ flex-basis:74px; }
  /* primary tap targets keep the 44px floor at phone widths, not only on a
     coarse pointer (a resized desktop browser never reports coarse). */
  .ct-city{ min-height:44px; }
}
@media (max-height:520px){
  /* A short landscape viewport has no room for a tall map above a form: the map
     takes a fixed slice and the details scroll under it. */
  .ct-map{ height:150px;min-height:150px; }
  .ct-ed-row2{ grid-template-columns:1fr; }
}
/* coarse pointers get the 44px floor on every tappable row (VC2-T2) */
@media (pointer:coarse){
  .ct-city,.ct-req,.ct-ap-go,.ct-veh-t,.ct-go-i{ min-height:44px; }
  .ct-ed-ap-x{ width:44px;height:44px; }
}

/* ═══ BATCH 52 ══════════════════════════════════════════════════════════
   B52-06/09/10/11 — the place chip, the handle, the favourite star, the
   Addresses tab strip and the now-clickable address card.                */

/* one chip for city + country (B52-06, B52-11) */
.ct-place{ max-width:100%;min-width:0; }
.ct-place-t{ display:inline-flex;align-items:center;gap:5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.ct-place-sep{ color:var(--fg-3);opacity:.7; }
button.ct-place{ cursor:pointer; }
button.ct-place .ct-city-go{ font-size:13px;color:var(--fg-3);margin-inline-start:1px; }
button.ct-place:hover .ct-city-go{ color:var(--accent-text,var(--accent)); }

/* the handle — an identifier, so it reads quieter than the name (B52-11) */
.ct-handle{ margin-top:2px;font:600 11.5px/1.3 var(--mk-font-ui);color:var(--accent-text,var(--accent));overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }

/* favourite star (B52-10) — colour is the whole state, per the comment */
.ct-fav{ margin-inline-start:auto;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:0;border-radius:50%;background:transparent;color:var(--fg-3);cursor:pointer;transition:background .15s,color .15s; }
.ct-fav .mi{ font-size:19px; }
.ct-fav:hover{ background:var(--bg-2,#f4f6f8);color:var(--fg-2); }
.ct-fav.on{ color:var(--accent-text,var(--accent)); }
.ct-fav.on .mi{ font-variation-settings:'FILL' 1; }
.ct-fav:focus-visible{ outline:2px solid var(--accent);outline-offset:2px; }

/* Addresses tab strip + its New-address action (B52-10) */


/* the card IS the map trigger now (B52-09) — same affordance as .ct-card */
.ct-ad-card{ cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s; }
.ct-ad-card:hover{ border-color:var(--fg-3);box-shadow:0 6px 18px rgba(13,25,32,.07);transform:translateY(-1px); }
.ct-ad-card:focus-visible{ outline:2px solid var(--accent);outline-offset:2px; }
/* the meta-row Go chip + the favourite star sit above the card's own click target */
.ct-ad-card .ct-go-chip,.ct-ad-card .ct-fav{ position:relative;z-index:1; }

/* 44px floors. Pinned at the WIDTH as well as the pointer type: a resized
   desktop browser never matches `pointer:coarse`, so a coarse-only floor is
   untestable and reads as broken at 390px (B51-01 trap 4). */
@media (pointer:coarse),(max-width:520px){
  .ct-fav{ width:44px;height:44px; }
  .ct-ad-tabs button{ min-height:44px; }
  button.ct-place{ min-height:44px; }
}

/* Audit A · B63-143 — what you share with a person */
.ct-together{ display:flex;flex-direction:column;gap:8px;margin-bottom:6px; }
.ct-tg-box{ width:100%;display:flex;align-items:center;gap:12px;text-align:start;cursor:pointer; }
.ct-tg-ic{ width:34px;height:34px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;background:var(--accent-soft);color:var(--accent-text);font-size:19px; }

/* ── B65 W3 · an address inside a property (065-078): building › floor › unit ── */
.ct-inside{ display:flex;flex-direction:column;gap:9px;padding:11px;border-radius:12px;border:1px solid color-mix(in srgb, var(--accent) 40%, var(--border));background:color-mix(in srgb, var(--accent) 6%, var(--bg-1));margin:11px 0; }
.ct-inside-h{ display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center; }
.ct-inside-h .mi{ font-size:20px;color:var(--accent-text);grid-row:span 2; }
.ct-inside-h b{ font:700 13.5px var(--mk-font-ui);color:var(--fg-1); }
.ct-inside-h span:not(.mi){ font:500 12px/1.35 var(--mk-font-ui);color:var(--fg-3); }
.ct-inside-w{ display:flex;align-items:center;gap:5px;font:600 12.5px var(--mk-font-ui);color:var(--accent-text); }
.ct-inside-w .mi{ font-size:16px; }
.ct-ed-note{ min-height:58px;resize:vertical;padding-top:9px;line-height:1.4; }
.ct-in-places{ align-self:flex-start;margin-top:6px; }
.mp-hd-act[data-ct-ad-fav].on .mi{ color:#F59E0B;font-variation-settings:'FILL' 1; }

/* ── B65 W11 · a contact's fields: boxes with a gap, the company as its logo chip, the phone with its flag ── */
.ct-fields{ display:flex;flex-direction:column;gap:6px; }
.ct-co-chip{ display:inline-flex;align-items:center;gap:7px;max-width:100%;padding:3px 10px 3px 4px;border-radius:999px;border:1px solid var(--bd-1,#dfe4e8);background:var(--bg-2);color:var(--fg-1);font:600 12.5px/1.2 var(--mk-font-ui);cursor:pointer; }
.ct-co-chip:hover{ border-color:var(--accent); }
.ct-co-chip:focus-visible{ outline:2px solid var(--accent);outline-offset:2px; }
.ct-co-chip > span:last-child{ min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.ct-co-mk{ display:inline-flex;align-items:center;justify-content:center;flex:none;width:22px;height:22px;border-radius:6px;overflow:hidden;background:#fff; }
.ct-co-mk img{ width:100%;height:100%;object-fit:contain; }
.ct-co-mk.is-fb{ background:var(--bg-3);color:var(--fg-3); }
.ct-co-mk.is-fb .mi{ font-size:15px; }
.ct-ph{ display:inline-flex;align-items:center;gap:7px; }