/* The Phone panel of the "Four doors. One agent." board (markup: tools/phone_panel.py).
   A still panel: what an owner gets from a phone agent, and a button that rings
   the demo line. It is laid out like a lane but is deliberately NOT a .sw-lane,
   because channels.js conducts every .sw-lane as a scripted conversation; so the
   lane's box is restated here. Linked only by the home page, above the section. */
.sw-phone {
  --sw-pad: clamp(14px, 1.9vw, 24px);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: var(--sw-pad);
  background: var(--surface);
}
.sw-ph-for { font-size: .72rem; letter-spacing: var(--ls); color: var(--ink-3); }
.sw-ph-points {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 15px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sw-ph-points li { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 11px; align-content: start; }
.sw-ph-points svg { grid-row: 1 / span 2; width: 18px; height: 18px; margin-top: 1px; color: var(--navy); }
/* margin: 0 because the page's reset covers h1 to h3 only, and an h4 keeps the browser's 1.33em. */
.sw-ph-points h4 { margin: 0; font: 600 .86rem/1.35 var(--sans); letter-spacing: -.005em; color: var(--ink); }
.sw-ph-points p { margin-top: 3px; max-width: 62ch; font-size: .79rem; line-height: 1.5; color: var(--ink-2); }

/* The call button, centred at the top of the panel, above the points: the one
   thing on the board that does something when pressed, so it is filled. Under
   it, in small print, what the caller is about to reach. */
.sw-ph-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 0 12px;
  text-align: center;
}
.sw-ph-cta .sw-call { justify-content: center; min-height: 0; }
.sw-dial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2px 10px;
  min-height: 44px;
  padding: 6px 20px 6px 8px;
  border-radius: 100px;
  background: var(--navy);
  color: var(--on-ink);
  font: 600 .84rem/1.25 var(--sans);
  letter-spacing: 0;
  box-shadow: 0 8px 26px -14px rgba(12, 36, 84, .45);
  transition: background var(--mid) var(--ease);
}
.sw-dial:hover { background: var(--navy-2); }
.sw-dial:focus-visible { outline: 2px solid var(--spark); outline-offset: 2px; }
.sw-dial .sw-ring { border-color: rgba(255, 255, 255, .38); color: inherit; }
.sw-dial .sw-num { font-weight: 500; opacity: .86; }
.sw-ph-note { max-width: 44ch; font-size: .7rem; line-height: 1.5; color: var(--ink-3); }

/* Arabic and Persian join their letters, and any letter-spacing pulls them apart (the same reason
   .chan [lang="ar"] zeroes it on the board). */
[dir="rtl"] .sw-phone :is(.sw-ph-for, h4) { letter-spacing: 0; }