/* phones-b: review fixes (Phones / Phone setup split, Features note, Leads contact row) */

/* Phones: admin link to Phone setup */
.phsetlink { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.phsetlink svg { width: 16px; height: 16px; }

/* Features: Access note */
.ftaccess { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: 0.875rem; }
.ftaccess svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--muted); }

/* Leads: contact details beside the copy button */
.ldrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 12px; }
.ldcon { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; min-width: 0; }
.ldc { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; min-width: 0; max-width: 100%; color: var(--ink); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.ldc:hover { text-decoration: underline; }
.ldc svg { width: 16px; height: 16px; flex: none; color: var(--muted); }

@media (max-width: 720px) {
  .phbar { align-items: stretch; }
  .phbar .tabs { width: 100%; }
  .phacts { width: 100%; justify-content: space-between; }
  .phsetlink, .ldc { min-height: 44px; }
  .ldrow .btn.primary { width: 100%; justify-content: center; }
  .crow2 .cacts { flex-wrap: wrap; }
  .crow2 .cacts .btn, .crow2 .cacts .link { min-height: 44px; }
  .devlist li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .devlist li .link { justify-self: start; min-height: 44px; }
  .pegdev li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; }
  .pegdev .link { min-height: 44px; }
  .nopeg summary { min-height: 44px; }
}

/* Leads tabs: all four fit at phone width */
@media (max-width: 480px) { .ldtabs { gap: 0 12px; } .phbar .tabs { gap: 0 16px; } }

/* Touch: small buttons on Phone setup still get 44px targets */
@media (pointer: coarse) {
  .pegl .btn.small, .devlist .btn, .evurls .btn.small, .keybox .btn, .phsetlink, .ldc, .addrow [data-act="leadnew"] { min-height: 44px; }
}

/* Phone setup, People list at phone width: name on its own line, status and Join code below, computers full width */
@media (max-width: 640px) {
  .pegl > li { grid-template-columns: minmax(0, 1fr) auto; }
  .pegl > li > .pn { grid-column: 1 / -1; }
  .pegl > li > .kind { min-width: 0; }
  .pegl > li > .pegdev { grid-column: 1 / -1; }
}

/* Calm pass: Phones uses the standard page width (no .narrow) */
.phpage .small { font-size: 0.875rem; }
.phbar { margin-bottom: 16px; }

/* Leads: a Copy button beside each field (paste into Windowizard one field at a time) */
.ldfacts dd.ldcprow { display: flex; align-items: flex-start; justify-content: flex-start; gap: 10px; min-width: 0; }
.ldfacts .ldv { min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; padding-top: 3px; }
.ldfacts dt { padding-top: 3px; }
.ldcp { flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 0 10px 0 8px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: 0.8125rem; font-weight: 500; cursor: pointer; }
.ldcp svg { width: 14px; height: 14px; flex: none; }
.ldcp:hover { background: var(--surface2); color: var(--ink); }
.ldcp.done { color: var(--ink); border-color: var(--ink); }
@media (max-width: 720px) {
  .ldfacts { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ldfacts dt { padding: 12px 0 2px; font-size: 0.8125rem; }
  .ldfacts dd.ldcprow { align-items: center; justify-content: space-between; }
  .ldfacts .ldv { padding-top: 0; }
  .ldcp { min-height: 44px; padding: 0 14px 0 12px; }
}

/* Leads: an open new lead has two numbered steps. Step 1 is the field list, each with its own Copy button; a field already copied gets a tick. */
.ldtop { justify-content: space-between; margin: 0; }
.ldcame { font-size: 0.9375rem; color: var(--muted); }
.ldsteps { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; }
.ldstep { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 0 14px; padding-bottom: 20px; }
.ldstep:last-child { padding-bottom: 0; }
.ldstep:not(:last-child)::before { content: ""; position: absolute; left: 15px; top: 36px; bottom: 4px; width: 2px; background: var(--divider); }
.ldn { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--blue-tint); color: var(--blue-ink); font-weight: 800; }
.ldsb { min-width: 0; }
.ldsb h3 { margin: 5px 0 8px; font-size: 1rem; font-weight: 700; }
.ldsb .inform { margin: 0; }
.ldsb .ldfacts { padding-top: 0; }
.ldfacts dt.ldgot::after { content: " \2713"; color: var(--good); font-weight: 800; }
@media (max-width: 720px) { .ldstep { grid-template-columns: 28px minmax(0, 1fr); gap: 0 10px; } .ldn { width: 28px; height: 28px; } .ldstep:not(:last-child)::before { left: 13px; top: 32px; } }
/* In step 1 the Copy buttons line up in one column, so you can go straight down the list */
.ldsb .ldfacts { max-width: 500px; }
.ldsb .ldfacts dd.ldcprow { justify-content: space-between; }
/* Leads: a lead that looks like spam */
.ldspam { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--tint-amber); font-size: 0.9375rem; }
.ldspam-t { flex: 1 1 320px; min-width: 0; }
.ldspam-act { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
@media (max-width: 720px) { .ldspam-act .btn { min-height: 44px; } }
.ldspamtag { display: inline-block; margin-left: 6px; padding: 1px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--tint-amber); color: var(--amber); font-size: 0.75rem; font-style: normal; font-weight: 700; white-space: nowrap; vertical-align: 1px; }
.ldbulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 12px; font-size: 0.875rem; }
.ldall { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; font-weight: 600; cursor: pointer; }
.ldall input, .ldsel input { width: 18px; height: 18px; margin: 0; accent-color: var(--blue-btn); }
.ldline { display: flex; align-items: stretch; }
.ldline .row { flex: 1; min-width: 0; }
.ldsel { display: grid; place-items: center; width: 48px; flex: none; cursor: pointer; }
@media (max-width: 720px) { .ldsel { width: 44px; } .ldbulk .btn { min-height: 44px; } }

/* Brand cards: one per phone line, on Phones (today) and Reports > Calls (the period). Windoware charcoal is the call pop-up's #212121;
   Bowranda uses the deeper blue so white text on it reads at 5.5:1. A card on Phones is a button that filters the list below it. */
.brcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0 0 16px; }
.brcard { --br: #212121; position: relative; display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 16px 18px; border: 1px solid transparent; border-radius: 16px; background: var(--br); color: #FFFFFF; font: inherit; text-align: left; }
.brcard.wd { border-color: rgba(255, 255, 255, 0.14); }
.brcard.bw { --br: #0F6DAA; }
button.brcard { cursor: pointer; width: 100%; transition: filter 0.15s ease, box-shadow 0.15s ease; }
button.brcard:hover { filter: brightness(1.12); }
button.brcard:focus-visible { outline: 2px solid var(--blue-btn); outline-offset: 3px; }
button.brcard[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--ink); }
.brtop { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 32px; }
.brlogo { height: 24px; width: auto; max-width: 130px; }
.brcard.bw .brlogo { height: 30px; }
.brsub { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.brgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.brstat { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.brstat b { font-size: 1.75rem; font-weight: 750; font-variant-numeric: tabular-nums; line-height: 1.15; }
.brstat > span { font-size: 0.8125rem; }
.brstat .brsm { font-size: 0.75rem; font-weight: 650; }
.brnote { margin: -8px 0 14px; }
.brfilt { margin: 0 0 10px; }
.cdir.wd { background: #212121; border-color: #212121; color: #FFFFFF; }
.cdir.bw { background: #0F6DAA; border-color: #0F6DAA; color: #FFFFFF; }
@media (max-width: 760px) { .brcards { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .brgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 10px; } }
@media (prefers-reduced-motion: reduce) { button.brcard { transition: none; } }

/* Under each brand card: why customers called on that line */
.brcol { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.brwhy { padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.brwhy h3 { margin: 0 0 8px; font-size: 0.9375rem; font-weight: 700; }
.brwhy ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.brwhy li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; font-size: 0.875rem; }
.brwn { font-variant-numeric: tabular-nums; text-align: right; font-weight: 650; }
.brwn .muted { font-weight: 400; }
.brwb { grid-column: 1 / -1; display: block; height: 5px; border-radius: 3px; background: var(--chip-bg); overflow: hidden; }
.brwb i { display: block; height: 100%; border-radius: 3px; background: #212121; }
.brwhy.bw .brwb i { background: #0F6DAA; }
:root[data-theme="dark"] .brwb i { background: var(--wd-dot); }
:root[data-theme="dark"] .brwhy.bw .brwb i { background: var(--bowranda); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brwb i { background: var(--wd-dot); } :root:not([data-theme="light"]) .brwhy.bw .brwb i { background: var(--bowranda); } }