/* Call Portal (phase 1): the caller's page. External stylesheet only: no inline style or script. Phone first (375 px): one column, no
   sideways scroll, every control at least 44 px, a visible focus ring on everything that takes focus. */
:root { color-scheme: light; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
.cp-body { margin: 0; background: #f2f5f1; color: #14241a; font: 17px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; overflow-wrap: anywhere; }
.cp-main { max-width: 560px; margin: 0 auto; padding: 20px 16px 48px; }
.cp-main h1 { margin: 0; font-size: 26px; line-height: 1.2; }
.cp-main h2 { margin: 0; font-size: 22px; line-height: 1.25; }
.cp-main h3 { margin: 0; font-size: 18px; line-height: 1.3; }
.cp-main p { margin: 0; }
:focus-visible { outline: 3px solid #b8860b; outline-offset: 2px; }
h1:focus, h2:focus, p:focus { outline: none; }

.cp-office { display: flex; gap: 14px; align-items: center; margin: 0 0 16px; min-width: 0; }
.cp-initials { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: #0d2615; color: #fff; font-weight: 800; font-size: 24px; letter-spacing: 1px; }
.cp-office-words { display: grid; gap: 2px; min-width: 0; }
.cp-lead { color: #33443a; }
.cp-open { font-weight: 700; color: #8a2d1d; }
.cp-open[data-open="true"] { color: #176f38; }

.cp-card { background: #fff; border: 1px solid #cfd9d1; border-radius: 14px; padding: 18px 16px; margin: 0 0 16px; display: grid; gap: 14px; min-width: 0; }
.cp-live { border-color: #176f38; box-shadow: 0 0 0 2px #dff3e5; text-align: center; }
.cp-stack { display: grid; gap: 12px; min-width: 0; }
.cp-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.cp-help { color: #4a584e; font-size: 15px; }
.cp-msg { min-height: 1.5em; margin: 0 0 12px; color: #8a2d1d; }
.cp-msg[data-kind="ok"] { color: #176f38; }
.cp-sent { font-weight: 700; color: #176f38; }

.cp-form { display: grid; gap: 14px; }
.cp-field { display: grid; gap: 4px; min-width: 0; }
.cp-field > span { font-size: 16px; font-weight: 600; color: #27382c; }
.cp-field input, .cp-field textarea { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid #8a9b8e; border-radius: 10px; background: #fff; color: inherit; font: inherit; }
.cp-field textarea { resize: vertical; }
.cp-field input:focus-visible, .cp-field textarea:focus-visible { outline: 3px solid #b8860b; outline-offset: 1px; border-color: #176f38; }
.cp-count { font-size: 13px; color: #4a584e; justify-self: end; }

.cp-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; min-width: 44px; padding: 10px 22px; border: 0; border-radius: 12px; background: #176f38; color: #fff; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; text-align: center; }
.cp-button:hover { background: #135c2e; }
.cp-button:disabled { opacity: .55; cursor: default; }
.cp-call { min-height: 56px; font-size: 20px; width: 100%; }
.cp-quiet { background: #fff; color: #27382c; border: 1px solid #8a9b8e; }
.cp-quiet:hover { background: #f2f5f1; }
.cp-quiet[aria-pressed="true"] { background: #fbecd0; border-color: #b8860b; color: #5b3d06; }
.cp-hangup { background: #b3261e; }
.cp-hangup:hover { background: #8f1e18; }

.cp-timer { font: 700 34px/1.2 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: 1px; }
.cp-small { font-size: 20px; }
.cp-meters { display: grid; gap: 8px; justify-items: stretch; text-align: left; }
.cp-meter { display: grid; grid-template-columns: 52px 1fr; gap: 8px; align-items: center; font-size: 15px; color: #4a584e; }
.cp-meter meter { width: 100%; height: 14px; }
.cp-playback { width: 100%; min-height: 44px; }

.cp-foot { display: grid; gap: 6px; color: #4a584e; font-size: 14px; text-align: center; margin-top: 8px; }
.cp-foot a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; color: #135c2e; font-weight: 600; }
.cp-by { font-size: 13px; }

@media (max-width: 480px) { .cp-main { padding: 14px 12px 40px; } .cp-main h1 { font-size: 23px; } .cp-row .cp-button { flex: 1 1 100%; } }

/* phase 2: the caller's choices (recording, EGIS) and the marks while the call runs */
.cp-consent { border: 1px solid #cfd9d1; border-radius: 12px; padding: 8px 12px 12px; margin: 0; display: grid; gap: 6px; min-width: 0; }
.cp-consent legend { font-weight: 700; padding: 0 4px; }
.cp-check { display: flex; align-items: center; gap: 12px; min-height: 48px; cursor: pointer; font-weight: 600; }
.cp-check input { width: 26px; height: 26px; margin: 0; flex: 0 0 auto; accent-color: #176f38; }
.cp-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; min-height: 0; }
.cp-badges:empty { display: none; }
.cp-rec, .cp-egis { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: 15px; font-weight: 800; }
.cp-rec { background: #b3261e; color: #fff; }
.cp-rec::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #fff; }
.cp-egis { background: #e8e0f7; color: #3b1f73; border: 1px solid #7a5cc0; }

/* council B-6: "How your call is handled" on the page itself (no separate privacy page yet) */
.cp-handled { text-align: left; border: 1px solid #cfd9d1; border-radius: 12px; background: #fff; padding: 0 12px; }
.cp-handled summary { display: flex; align-items: center; min-height: 44px; font-weight: 700; color: #135c2e; cursor: pointer; }
.cp-handled ul { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 6px; color: #33443a; font-size: 14px; }

/* portal messaging (builder T): the conversation */
.cp-chat { display: grid; gap: 12px; }
.cp-bubbles { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.cp-bubble { max-width: 85%; padding: 8px 12px; border-radius: 14px; background: #eef1ee; color: #14241a; justify-self: start; min-width: 0; }
.cp-bubble[data-from="CALLER"] { background: #176f38; color: #fff; justify-self: end; }
.cp-bubble p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.cp-bubble .cp-bubble-meta { font-size: 13px; opacity: 0.85; margin-top: 4px; }
.cp-bubble img { display: block; max-width: 100%; max-height: 240px; border-radius: 8px; margin-top: 6px; }
.cp-seen { text-align: right; margin: 0; }
.cp-file { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; }
.cp-file input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.cp-keep { border-top: 1px solid #cfd9d1; padding-top: 12px; }
.cp-link { overflow-wrap: anywhere; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; background: #f4f7f4; padding: 8px; border-radius: 8px; }