/* ECR Connect — Texts, inside the lead (2026-10-06, Thomas's approved mockup
   https://claude.ai/artifact/Fh1GRb1jjQXZYfuhRShgSS). ECR's site only. Every colour is
   var(--dk-<role>, <light colour>) so it follows the person's Appearance; a SENT text is ECR's
   dark purple with white text in both appearances (Thomas, 2026-10-06: "I would prefer the dark
   purple with white text for sent messages"). */

.tx { display: flex; flex-direction: column; gap: 10px; }
.tx-head { display: flex; align-items: center; gap: 10px; }
.tx-head h3 { flex-grow: 1; }
.tx-switch { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 0; cursor: pointer;
  font: 700 13px Helvetica, Arial, sans-serif; color: var(--dk-ink, #1a1a1a); }
.tx-switch[disabled] { cursor: not-allowed; }
.tx-track { width: 38px; height: 22px; border-radius: 11px; background: var(--dk-muted-fill, #c4cdd1); position: relative; transition: background 0.15s; }
.tx-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--dk-surface, #fff); transition: transform 0.15s; }
.tx-switch[aria-checked="true"] .tx-track { background: var(--dk-good-line, #1e7d3c); }
.tx-switch[aria-checked="true"] .tx-track::after { transform: translateX(16px); }
.tx-switch:focus-visible { outline: 3px solid var(--dk-accent-line, var(--purple)); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { .tx-track, .tx-track::after { transition: none; } }

.tx-stopped { background: var(--dk-bad-soft, #fdf0ee); color: var(--dk-bad-text, #9a2617); border-radius: 10px; padding: 10px 12px; font-size: 13.5px; }
.tx-stopped b { display: block; margin-bottom: 2px; }
.tx-note { margin: 0; font-size: 13px; color: var(--dk-ink-2, var(--gray)); }

.tx-thread { display: flex; flex-direction: column; gap: 10px; }
.tx-day { align-self: center; font-size: 12px; color: var(--dk-ink-2, var(--gray)); }
.tx-msg { max-width: 84%; display: flex; flex-direction: column; gap: 3px; }
.tx-b { padding: 9px 12px; border-radius: 14px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13.5px; line-height: 1.4; }
.tx-meta { font-size: 11.5px; color: var(--dk-ink-2, var(--gray)); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tx-out, .tx-sched { align-self: flex-end; align-items: flex-end; }
.tx-out .tx-b { background: var(--purple); color: #fff; border-bottom-right-radius: 4px; }
.tx-gone .tx-b { text-decoration: line-through; }
.tx-in { align-self: flex-start; }
.tx-in .tx-b { background: var(--dk-tint, #eef2f4); color: var(--dk-ink, #1a1a1a); border-bottom-left-radius: 4px; }
.tx-sched .tx-b { background: var(--dk-surface, #fff); color: var(--dk-ink, #1a1a1a); border: 1.5px dashed var(--dk-accent-line, var(--purple)); border-bottom-right-radius: 4px; }
.tx-link { background: none; border: 0; padding: 0; color: var(--dk-accent-text, var(--purple)); font: 700 11.5px Helvetica, Arial, sans-serif; text-decoration: underline; cursor: pointer; }

.tx-compose { background: var(--dk-page, var(--bg)); border: 1.5px solid var(--dk-line, var(--border)); border-radius: 12px; padding: 12px;
  display: flex; flex-direction: column; gap: 10px; }
.tx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tx-chips button { min-height: 32px; padding: 0 12px; border-radius: 16px; border: 1.5px solid var(--dk-line, var(--border));
  background: var(--dk-surface, #fff); color: var(--dk-accent-text-2, var(--purple-dark)); font: 700 12.5px Helvetica, Arial, sans-serif; cursor: pointer; }
.tx-chips button[aria-pressed="true"] { background: var(--dk-accent-soft, var(--purple-light)); border-color: var(--dk-accent-line, var(--purple)); }
#txBody { width: 100%; box-sizing: border-box; min-height: 110px; resize: vertical; border: 1.5px solid var(--dk-line, var(--border)); border-radius: 8px;
  padding: 10px; font: 14px/1.4 Helvetica, Arial, sans-serif; background: var(--dk-surface, #fff); color: var(--dk-ink, #1a1a1a); }
.tx-when { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 8px; }
.tx-when[hidden], .tx-hint[hidden] { display: none; }
.tx-when label { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: 12.5px; color: var(--dk-ink-2, var(--gray)); }
.tx-when input { height: 40px; margin: 0; border: 1.5px solid var(--dk-line, var(--border)); border-radius: 8px; padding: 0 8px; width: 100%;
  box-sizing: border-box; font: 14px Helvetica, Arial, sans-serif; background: var(--dk-surface, #fff); color: var(--dk-ink, #1a1a1a); }
.tx-hint { margin: 0; font-size: 12.5px; color: var(--dk-ink-2, var(--gray)); }
.tx-count { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--dk-ink-2, var(--gray)); font-variant-numeric: tabular-nums; }
.tx-grow { flex-grow: 1; }
.tx-send { display: flex; gap: 10px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.tx-send .lv-btn { width: auto; padding: 0 18px; }
.tx-said { font-size: 13px; font-weight: 700; color: var(--dk-good-text, #155d2c); }
.tx-said.tx-bad { color: var(--dk-bad-text, #9a2617); }

/* Texting consent (CR-2026-1006-001, the approved mockup): who agreed to be texted, as a pill. */
.tx-consent { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--dk-line, var(--border)); border-radius: 10px; }
.tx-consent-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.tx-pill { font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.tx-pill-yes { background: var(--dk-good-soft, #e3f3e8); color: var(--dk-good-text, #155d2c); }
.tx-pill-wait { background: var(--dk-warn-soft, #fdf3dc); color: var(--dk-warn-text, #7a4f00); }
.tx-pill-no { background: var(--dk-page, var(--bg)); color: var(--dk-ink-2, var(--gray)); }
.tx-wording { font-size: 12.5px; color: var(--dk-ink-2, var(--gray)); }
.tx-wording summary { cursor: pointer; color: var(--dk-accent-text, var(--purple)); font-weight: 700; }
.tx-wording p { margin: 6px 0 0; }

/* On the Phone row, under Do not call (2026-10-08): the same small switch as Do not call. */
.tx-switch.tx-in-row { gap: 6px; font: 700 12.5px Helvetica, Arial, sans-serif; color: var(--dk-ink-2, var(--gray)); white-space: nowrap; }
.tx-switch.tx-in-row .tx-track { width: 30px; height: 17px; border-radius: 999px; }
.tx-switch.tx-in-row .tx-track::after { top: 2px; left: 2px; width: 13px; height: 13px; }
.tx-switch.tx-in-row[aria-checked="true"] .tx-track::after { transform: translateX(13px); }

/* The texts fly-out (2026-10-08): the whole thread and the message box, over the lead. The lead
   keeps the last four texts and a button that opens it. */
.tx-fly { width: min(560px, 100%); }
/* The message box is a fixed footer and only what is above it scrolls (Thomas, 2026-10-08: "The
   windows where I type needs to be a fixed frame"). */
.tx-fly .tx-fly-body { display: flex; flex-direction: column; min-height: 0; overflow: hidden; padding: 0; gap: 0; }
.tx-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.tx-foot { flex: none; padding: 12px 20px 16px; border-top: 1px solid var(--dk-line, var(--border)); background: var(--dk-surface, #fff); }
.tx-foot .tx-compose { border: 0; padding: 0; border-radius: 0; background: transparent; }
.tx-foot #txBody { min-height: 76px; max-height: 32vh; }

/* THE LEAD KEEPS ONE LINE EACH (2026-10-10, the approved mockup
   https://claude.ai/artifact/BrpRpRKoGFcdrJ1ucV2J5F): the client's texts and the ride's group, each with
   the button that opens it in the fly-out. */
.tx-line { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; padding: 9px 0 0; border-top: 1px solid var(--dk-line, var(--border)); }
.tx-head + .tx-line { border-top: 0; padding-top: 0; }
.tx-line-l { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; font-size: 13.5px; color: var(--dk-ink, #1a1a1a); }
.tx-line-sub { font-size: 12.5px; color: var(--dk-ink-2, var(--gray)); }

/* THE TEXTS INBOX (2026-10-08, Thomas approving https://claude.ai/artifact/TNowdrmjcstzNRA2mwggmq):
   every client whose newest text has not been answered. */
#txInboxApp[hidden] { display: none; }
#txInboxApp { max-width: 1180px; margin: 0 auto; font-size: 14px; display: flex; flex-direction: column; gap: 14px; }
.ti-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ti-head h2 { margin: 0; flex-grow: 1; font: 800 24px Raleway, Helvetica, Arial, sans-serif; color: var(--dk-ink, #1a1a1a); }
.ti-seg { display: inline-flex; border: 1.5px solid var(--dk-line, var(--border)); border-radius: 10px; overflow: hidden; background: var(--dk-surface, #fff); }
.ti-seg button { min-height: 36px; padding: 0 14px; border: 0; background: transparent; color: var(--dk-ink, #1a1a1a); font: 700 13px Helvetica, Arial, sans-serif; cursor: pointer; }
.ti-seg button + button { border-left: 1.5px solid var(--dk-line, var(--border)); }
.ti-seg button[aria-pressed="true"] { background: var(--purple); color: #ffffff; }
.ti-list { display: flex; flex-direction: column; border: 1px solid var(--dk-line, var(--border)); border-radius: 12px; overflow: hidden; background: var(--dk-surface, #fff); }
.ti-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; padding: 12px 16px; border-top: 1px solid var(--dk-line, var(--border)); cursor: pointer; }
.ti-row:first-child { border-top: 0; }
.ti-row:hover { background: var(--dk-tint-accent, #f7f5fc); }
.ti-row:focus-visible { outline: 3px solid var(--dk-accent-line, var(--purple)); outline-offset: -3px; }
.ti-who { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; color: var(--dk-ink, #1a1a1a); }
.ti-who b { font-size: 15px; }
.ti-ph { font-size: 13px; color: var(--dk-ink-2, var(--gray)); font-variant-numeric: tabular-nums; }
.ti-pill { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; background: var(--dk-tint, #eef2f4); color: var(--dk-ink-2, var(--gray)); }
.ti-pill-ride { background: var(--dk-good-soft, #e3f3e8); color: var(--dk-good-text, #155d2c); }
.ti-pill-unknown { background: var(--dk-warn-soft, #fdf3dc); color: var(--dk-warn-text, #7a4f00); }
.ti-wait { grid-row: 1; grid-column: 2; text-align: right; font-size: 12.5px; color: var(--dk-ink-2, var(--gray)); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ti-wait.ti-long { color: var(--dk-warn-text, #7a4f00); font-weight: 700; }
.ti-snip { grid-column: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dk-ink, #1a1a1a); }
.ti-done .ti-snip { color: var(--dk-ink-2, var(--gray)); }
.ti-acts { grid-column: 2; grid-row: 2; display: flex; gap: 6px; justify-content: flex-end; }
.ti-acts .ti-btn { width: auto; min-height: 30px; padding: 0 10px; font-size: 12.5px; }
.ti-empty { margin: 0; padding: 26px; text-align: center; color: var(--dk-ink-2, var(--gray)); }
/* The count on the Texts tab. */
.ti-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px;
  background: var(--dk-badge, #c0392b); color: #ffffff; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ti-count[hidden] { display: none; }

/* Ride group texts (2026-10-09, Thomas's approved mockup https://claude.ai/artifact/5B6XfGXmUq1baV199q78Cx):
   since 2026-10-10 every control is in the texts fly-out: the group's details open from the names
   at its top, as on an iPhone. */
.tx-pill-accent { background: var(--dk-accent-soft, var(--purple-light)); color: var(--dk-accent-text, var(--purple)); }
.tx-people { display: flex; flex-direction: column; border: 1px solid var(--dk-line, var(--border)); border-radius: 10px; overflow: hidden; }
.tx-person { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 10px; padding: 9px 12px; border-top: 1px solid var(--dk-line, var(--border)); align-items: center; }
.tx-person:first-child { border-top: 0; }
.tx-person > .tx-face { grid-row: 1 / span 2; grid-column: 1; align-self: start; margin: 0; width: 30px; height: 30px; border: 0; font-size: 11px; }
.tx-person-n { grid-column: 2; display: flex; flex-direction: column; gap: 1px; min-width: 0; color: var(--dk-ink, #1a1a1a); }
.tx-person-n small { font-size: 12.5px; color: var(--dk-ink-2, var(--gray)); font-variant-numeric: tabular-nums; }
.tx-person-acts { grid-row: 1 / span 2; grid-column: 3; display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.tx-person-why { grid-column: 2; font-size: 12.5px; color: var(--dk-ink-2, var(--gray)); }
.tx-person-out .tx-person-n, .tx-person-cannot .tx-person-n { opacity: 0.7; }
.tx-quick { align-items: center; }
.tx-quick-l { font-size: 12.5px; font-weight: 700; color: var(--dk-ink-2, var(--gray)); margin-right: 2px; }
.tx-quick button[disabled] { cursor: default; color: var(--dk-ink-2, var(--gray)); background: transparent; }
.tx-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.tx-small { width: auto; min-height: 36px; padding: 0 14px; }
.tx-addform { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.tx-addform[hidden] { display: none; }
.tx-addform label, .tx-when-l { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: 12.5px; font-weight: 700; color: var(--dk-ink-2, var(--gray)); }
.tx-addform .lv-btn { width: auto; padding: 0 14px; }
.tx-input { height: 40px; box-sizing: border-box; border: 1.5px solid var(--dk-line, var(--border)); border-radius: 8px; padding: 0 9px;
  font: 14px Helvetica, Arial, sans-serif; background: var(--dk-surface, #fff); color: var(--dk-ink, #1a1a1a); min-width: 0; }
.tx-tabs { display: grid; grid-template-columns: 1fr 1fr; border: 1.5px solid var(--dk-line, var(--border)); border-radius: 10px; overflow: hidden;
  background: var(--dk-surface, #fff); flex-shrink: 0; }
.tx-tabs button { border: 0; background: transparent; color: var(--dk-ink, #1a1a1a); font: 700 13px Helvetica, Arial, sans-serif; padding: 8px 10px;
  cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.tx-tabs button small { font-weight: 400; font-size: 11.5px; color: var(--dk-ink-2, var(--gray)); }
.tx-tabs button + button { border-left: 1.5px solid var(--dk-line, var(--border)); }
.tx-tabs button[aria-pressed="true"] { background: var(--purple); color: #ffffff; }
.tx-tabs button[aria-pressed="true"] small { color: #ffffff; }
.tx-tabs button:focus-visible { outline: 3px solid var(--dk-accent-line, var(--purple)); outline-offset: -3px; }
.tx-chauffeur .tx-b { background: var(--dk-accent-soft, var(--purple-light)); }
.tx-fly .tx-tabs { margin: 12px 16px 0; }
.tx-fly #txRides { margin: 10px 16px 0; }

/* THE TOP OF THE FLY-OUT, as on an iPhone (2026-10-10): the faces, the names (which open the group's details)
   and, in the details, Done where the close button sits. */
.tx-fly .tx-fly-head { position: relative; flex-direction: column; justify-content: center; gap: 4px; padding: 12px 64px 10px; text-align: center; }
.tx-fly .tx-fly-head h2 { font-size: 16px; overflow-wrap: anywhere; }
.tx-fly-head .lv-close, .tx-fly-head .tx-done { position: absolute; top: 12px; right: 14px; }
/* The fly-out's own Refresh (2026-10-10) sits at the head's other corner, clear of Close and Done. */
.tx-fly-head .lv-reload { position: absolute; top: 12px; left: 14px; right: auto; }
.tx-faces { display: flex; justify-content: center; }
.tx-face { width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; box-sizing: border-box;
  border: 2px solid var(--dk-surface, #fff); margin-left: -8px; color: #ffffff; font: 700 12px Helvetica, Arial, sans-serif; letter-spacing: 0.02em; }
.tx-face:first-child { margin-left: 0; }
.tx-face-client { background: var(--dk-face-client, #2c64b8); }
.tx-face-chauffeur { background: var(--dk-face-driver, #1f7a4f); }
.tx-face-guest { background: var(--dk-face-guest, #9a5a12); }
.tx-face-ecr { background: var(--purple); }
.tx-face-more { background: var(--dk-face-more, #5b6670); }
.tx-face-add { background: var(--dk-page, var(--bg)); color: var(--dk-accent-text, var(--purple)); border-color: var(--dk-line, var(--border)); font-size: 16px; }
.tx-names { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; max-width: 100%; background: none; border: 0; padding: 2px 8px; margin: 0;
  font: inherit; color: inherit; cursor: pointer; border-radius: 8px; }
.tx-names-t { font-size: 15px; }
.tx-chev { color: var(--dk-ink-2, var(--gray)); font-weight: 400; }
.tx-names:hover .tx-names-t { text-decoration: underline; }
.tx-names:focus-visible, .tx-done:focus-visible, .tx-addrow:focus-visible, .tx-danger:focus-visible, .tx-link:focus-visible {
  outline: 3px solid var(--dk-accent-line, var(--purple)); outline-offset: 2px; }
.tx-done { background: none; border: 0; padding: 7px 10px; border-radius: 8px; cursor: pointer; color: var(--dk-accent-text, var(--purple)); font: 700 14.5px Helvetica, Arial, sans-serif; }
.tx-done:hover { text-decoration: underline; }

/* A group's conversation: someone else's name over what they wrote; before it starts, the first text
   waits dashed with when it goes, and the foot is Start now. */
.tx-msg > .tx-who { font-size: 11.5px; color: var(--dk-ink-2, var(--gray)); padding-left: 10px; }
.tx-plan { align-self: flex-end; align-items: flex-end; }
.tx-plan .tx-b { background: transparent; color: var(--dk-ink-2, var(--gray)); border: 1.5px dashed var(--dk-line-strong, #8a9aa2); border-bottom-right-radius: 4px; }
.tx-startfoot { display: flex; flex-direction: column; gap: 8px; }
.tx-startfoot .lv-btn, .tx-info .tx-startnow { width: 100%; min-height: 42px; }

/* The group's details (the mockup's third card). */
.tx-fly .tx-info { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 20px 22px;
  display: flex; flex-direction: column; gap: 10px; }
.tx-sec { margin: 6px 2px -4px; font: 700 11.5px Helvetica, Arial, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dk-ink-2, var(--gray)); }
.tx-info .tx-people { background: var(--dk-surface, #fff); border-radius: 12px; }
.tx-addrow { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; background: none; border: 0; border-top: 1px solid var(--dk-line, var(--border));
  color: var(--dk-accent-text, var(--purple)); font: 700 13.5px Helvetica, Arial, sans-serif; text-align: left; cursor: pointer; }
.tx-addrow:hover { text-decoration: underline; }
.tx-addrow .tx-face { margin: 0; width: 30px; height: 30px; }
.tx-people .tx-addrow:first-child { border-top: 0; }
.tx-danger { width: 100%; min-height: 42px; margin-top: 6px; border-radius: 12px; border: 1.5px solid var(--dk-bad-line, #f3c2be); background: var(--dk-surface, #fff);
  color: var(--dk-bad-text, #9a2617); font: 700 13.5px Helvetica, Arial, sans-serif; cursor: pointer; }
.tx-danger:hover { background: var(--dk-bad-soft, #fdf0ee); }
@media (max-width: 560px) {
  .tx-addform { grid-template-columns: minmax(0, 1fr); }
  .tx-person { grid-template-columns: auto minmax(0, 1fr); }
  .tx-person-acts { grid-row: auto; grid-column: 2; justify-content: flex-start; }
  .tx-fly .tx-fly-head { padding: 12px 56px 10px; }
}

/* THE PHONE'S TEXTS SCREEN (notifications stage B, 2026-10-12, the approved mockup): the inbox fills the phone
   below 700px, the bell in its head, the Waiting | All switch on its own line, and each row without its
   buttons (a new number's own screen has Make a lead and No reply needed; replying answers a client). */
@media (max-width: 699px) {
  #txInboxApp { padding: 14px 12px 28px; gap: 10px; }
  .ti-head { gap: 8px; }
  .ti-head h2 { font-size: 22px; order: 0; }
  .ti-head #tiRefresh { order: 1; }
  .ti-head .ntf-bell { order: 2; }
  .ti-head .ti-seg { order: 3; display: flex; width: 100%; }
  .ti-head .ti-seg button { flex: 1 1 0; padding: 0 8px; }
  .ti-row { padding: 12px 14px; }
  .ti-acts { display: none; }
}

/* THE PHONE'S LEAD CARD (stage B, js/ecr-phone.js): what a booking request, a website quote or a chauffeur's
   decline opens from a notification on the phone. The whole screen, a bar with Back, as the Notifications
   screen (its .ntf-bar and .ntf-body). */
.ph-lead[hidden] { display: none; }
.ph-lead { position: fixed; inset: 0; z-index: 60; background: var(--dk-page, var(--bg)); display: flex; flex-direction: column; overflow: hidden; }
.ph-lead-body:focus { outline: none; }
.ph-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ph-chip-bad { color: var(--dk-bad-text, #9a2617); background: var(--dk-bad-soft, #fdf0ee); }
.ph-trip { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 6px 12px; margin: 0; }
.ph-trip dt { color: var(--dk-ink-2, var(--gray)); font-size: 13px; }
.ph-trip dd { margin: 0; color: var(--dk-ink, #1a1a1a); overflow-wrap: anywhere; }
.ph-box { border: 1px solid var(--dk-line, var(--border)); border-radius: 12px; padding: 12px 14px; background: var(--dk-surface, #fff); display: flex; flex-direction: column; gap: 10px; }
.ph-box h3 { margin: 0; font: 700 13px Raleway, Helvetica, Arial, sans-serif; letter-spacing: 0.5px; text-transform: uppercase; color: var(--dk-accent-text, var(--purple)); }
.ph-chauffeur { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--dk-ink, #1a1a1a); }
.ph-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.ph-acts .lv-btn { flex: 1 1 0; min-height: 44px; }
.ph-change { display: flex; flex-direction: column; gap: 8px; }