/*
 * Circuit Craftworks voice request.
 *
 * The values below are not invented. They are the tokens the site itself declares on
 * #ccgx-page, read off the live pages: surfaces, edges, lifts, radii, type and the two blues.
 * They are repeated here rather than inherited because the section is injected into
 * .page-content, which sits OUTSIDE #ccgx-page, so none of those custom properties cascade
 * into it. They are also absent entirely on the service pages that have not been built yet,
 * and this section has to look right there too.
 *
 * The previous version of this file reached for the same token names with dark fallbacks.
 * Those fallbacks were the site's OLD palette, so once the site moved to its light treatment
 * the section kept rendering as a dark slab. That is what made it look bolted on.
 *
 * No decorative rule or dash before the kicker: the site removed those deliberately.
 */

.ccwv-section{
  /* ink */
  --ccwv-ink:        #09192f;
  --ccwv-ink-2:      #0d203a;
  --ccwv-body:       #304b62;
  --ccwv-muted:      #465d70;
  --ccwv-muted-2:    #71869a;

  /* accents */
  --ccwv-blue:       #0a8fd4;
  --ccwv-blue-deep:  #0f7fbe;
  --ccwv-blue-mono:  #0a6ba6;
  --ccwv-green:      #138b74;
  --ccwv-amber:      #a76b10;
  --ccwv-alert:      #a8392c;

  /* surfaces */
  --ccwv-surf-1:     linear-gradient(155deg,#ffffff,#fbfdfe);
  --ccwv-surf-2:     linear-gradient(158deg,#f7fafc,#f4fafd);
  --ccwv-surf-3:     linear-gradient(158deg,#f7fbfd,#e5eef4);
  --ccwv-white:      #ffffff;

  /* edges and lift */
  --ccwv-edge:       rgba(12,120,176,.16);
  --ccwv-edge-mid:   rgba(12,128,190,.24);
  --ccwv-edge-hot:   rgba(10,143,212,.44);
  --ccwv-hi:         rgba(255,255,255,.92);
  --ccwv-lift-0:     0 7px 18px rgba(39,78,104,.07);
  --ccwv-lift-1:     0 14px 34px rgba(39,78,104,.10);
  --ccwv-lift-2:     0 22px 52px rgba(39,78,104,.13);

  /* geometry and type */
  --ccwv-r:          16px;
  --ccwv-r-sm:       10px;
  --ccwv-r-lg:       22px;
  --ccwv-font:       ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --ccwv-mono:       ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  /* The section is a transparent band; the panel inside it is the visible object, which is
     how every other Circuit Craftworks section is built. */
  display: block;
  background: none;
  border: 0;
  box-shadow: none;
  padding: clamp(1.6rem,3.4vw,2.9rem) clamp(14px,4.5vw,66px);
  margin: 0;
  color: var(--ccwv-body);
  font-family: var(--ccwv-font);
}

.ccwv-inner{
  max-width: 1780px;
  margin-inline: auto;
  padding: clamp(1.4rem,2.6vw,2.15rem);
  border: 1px solid var(--ccwv-edge-mid);
  border-radius: var(--ccwv-r);
  background: var(--ccwv-surf-1);
  box-shadow: inset 0 1px 0 var(--ccwv-hi), var(--ccwv-lift-2);
}

/* ---------------------------------------------------------------- headings */

.ccwv-kicker{
  margin: 0 0 .5rem;
  font-family: var(--ccwv-mono);
  font-size: .715rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ccwv-blue-mono);
}

.ccwv-title{
  margin: 0 0 .55rem;
  font-family: var(--ccwv-font);
  font-size: clamp(1.5rem,2.6vw,2.05rem);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.028em;
  color: var(--ccwv-ink);
}

.ccwv-blurb{
  margin: 0 0 1.15rem;
  max-width: 62ch;
  font-size: 1.0625rem;
  line-height: 1.62;
  color: var(--ccwv-body);
}

/* ----------------------------------------------------------------- buttons */

.ccwv-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:.85rem 1.1rem; }

/*
 * The theme ships its own button rules, so every property this component relies on is stated
 * here rather than assumed. voice.css is enqueued after the theme for the same reason.
 */
.ccwv-section .ccwv-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  min-height: 52px;
  padding: 0 24px;
  border-radius: var(--ccwv-r-sm);
  border: 1px solid transparent;
  font-family: var(--ccwv-font);
  font-size: .96rem;
  font-weight: 700;
  letter-spacing: .005em;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  appearance: none;
  transition: transform .14s ease, box-shadow .18s ease, filter .18s ease, border-color .18s ease;
}
.ccwv-section .ccwv-btn:focus-visible{ outline:2px solid var(--ccwv-edge-hot); outline-offset:3px; }
.ccwv-section .ccwv-btn:disabled{ opacity:.55; cursor:default; transform:none; box-shadow:none; }

.ccwv-section .ccwv-btn--primary{
  background: linear-gradient(135deg,#0a8fd4 0%,#1a9ada 72%,#2ba5e0 100%);
  border-color: rgba(10,143,212,.28);
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28),
              0 6px 14px rgba(8,105,165,.30),
              0 14px 30px rgba(8,105,165,.20);
}
.ccwv-section .ccwv-btn--primary:hover:not(:disabled){ transform: translateY(-1px); filter: brightness(1.04); }

.ccwv-section .ccwv-btn--ghost{
  background: linear-gradient(#ffffff,#f1f7fb);
  border-color: rgba(12,110,168,.20);
  color: var(--ccwv-ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 4px 12px rgba(21,52,79,.09);
}
.ccwv-section .ccwv-btn--ghost:hover:not(:disabled){ border-color: var(--ccwv-edge-hot); }

.ccwv-section .ccwv-btn--end{
  background: linear-gradient(135deg,#0a8fd4 0%,#1a9ada 72%,#2ba5e0 100%);
  border-color: rgba(10,143,212,.28);
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 4px 12px rgba(8,105,165,.26);
}
.ccwv-section .ccwv-btn--end:hover:not(:disabled){ filter: brightness(1.04); }

.ccwv-btn__mic{ display:inline-flex; }

.ccwv-section .ccwv-secondary{
  font-size: .96rem;
  font-weight: 600;
  color: var(--ccwv-blue-deep);
  text-decoration: none;
  border-bottom: 1px solid rgba(15,127,190,.32);
  padding-bottom: 1px;
}
.ccwv-section .ccwv-secondary:hover{ color: var(--ccwv-blue); border-bottom-color: currentColor; }

/* -------------------------------------------------------- assurances strip */

/*
 * Separated by the middle dot the site already uses for this kind of run on label, for
 * example "COMPUTER DIAGNOSTICS & REPAIR · KATY & WEST HOUSTON" in the hero below. Kept as a
 * list in the markup so it still reads as three separate facts to a screen reader.
 */
.ccwv-meta{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.15rem .55rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  font-size: .845rem;
  color: var(--ccwv-muted);
}
.ccwv-meta li{ display:inline; }
/*
 * The separator hangs off the END of the item before it, not the start of the one after, so
 * that when the line wraps the dot stays with the text it followed instead of being stranded
 * at the beginning of the next line.
 */
.ccwv-meta li:not(:last-child)::after{
  content:"·";
  margin-left:.55rem;
  color: var(--ccwv-muted-2);
}

.ccwv-privacy{
  margin: .95rem 0 0;
  max-width: 62ch;
  font-size: .855rem;
  line-height: 1.55;
  color: var(--ccwv-muted-2);
}


/* --------------------------------------------------------------- lead grid */

/*
 * Two columns on a desktop, mirroring the hero directly below it: the offer on the left, and
 * what actually happens on the right. Below 900px it becomes one column and the steps follow
 * the call to action rather than preceding it.
 */
.ccwv-lead{
  display: grid;
  grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr);
  gap: clamp(1.25rem,3vw,2.5rem);
  align-items: start;
}

.ccwv-steps{
  padding: 1.1rem 1.2rem 1.15rem;
  border: 1px solid var(--ccwv-edge);
  border-radius: 14px;
  background: var(--ccwv-surf-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), var(--ccwv-lift-0);
}
.ccwv-steps__title{
  margin: 0 0 .8rem;
  font-family: var(--ccwv-mono);
  font-size: .7rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ccwv-blue-mono);
}
.ccwv-steps__list{
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: .8rem;
}
.ccwv-steps__list li{
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: .7rem;
  font-size: .93rem;
  line-height: 1.5;
  color: var(--ccwv-muted);
}
/* The approved copy supplies a heading and a body per step, so they render as two lines. */
.ccwv-steps__list strong{
  display: block;
  margin-bottom: .12rem;
  color: var(--ccwv-ink);
  font-weight: 700;
}
.ccwv-steps__n{
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid var(--ccwv-edge-mid);
  background: var(--ccwv-white);
  font-family: var(--ccwv-mono);
  font-size: .78rem; font-weight: 600;
  color: var(--ccwv-blue-deep);
}

@media (max-width: 900px){
  .ccwv-lead{ grid-template-columns: 1fr; gap: 1.15rem; }
}


/* ------------------------------------------------- what the phase reveals */

/*
 * The explainer and the assurances belong to the moment before the call. Once the customer
 * has started, they are answered by the call itself, and leaving them on screen competes with
 * the live panel and later with the confirmation. Idle and error keep them, because both are
 * states the customer starts from.
 */
.ccwv-section[data-ccwv-phase]:not([data-ccwv-phase="idle"]):not([data-ccwv-phase="error"]) .ccwv-steps,
.ccwv-section[data-ccwv-phase]:not([data-ccwv-phase="idle"]):not([data-ccwv-phase="error"]) .ccwv-meta{
  display: none;
}
.ccwv-section[data-ccwv-phase]:not([data-ccwv-phase="idle"]):not([data-ccwv-phase="error"]) .ccwv-lead{
  grid-template-columns: 1fr;
}

/*
 * The start call to action belongs to the moment before the call. Once the call is connected
 * the live panel is what says a voice request is underway, so the button is hidden rather than
 * left on screen in a disabled state. It comes back on idle and on error, which are the two
 * states a customer starts from.
 */
.ccwv-section[data-ccwv-phase="listening"] .ccwv-actions,
.ccwv-section[data-ccwv-phase="speaking"] .ccwv-actions,
.ccwv-section[data-ccwv-phase="muted"] .ccwv-actions,
.ccwv-section[data-ccwv-phase="ending"] .ccwv-actions,
.ccwv-section[data-ccwv-phase="processing"] .ccwv-actions,
.ccwv-section[data-ccwv-phase="complete"] .ccwv-actions{
  display: none;
}

/*
 * The heading, the intro and the safety note are how a customer decides to start. Once the call
 * is connected they have decided, and on a phone they push the live panel most of a screen down.
 * They collapse for every connected and post call phase, leaving the small VOICE REQUEST label
 * as context. Idle and error keep them, because both are states a customer starts from.
 */
.ccwv-section[data-ccwv-phase="listening"] .ccwv-title,
.ccwv-section[data-ccwv-phase="listening"] .ccwv-blurb,
.ccwv-section[data-ccwv-phase="listening"] .ccwv-privacy,
.ccwv-section[data-ccwv-phase="speaking"] .ccwv-title,
.ccwv-section[data-ccwv-phase="speaking"] .ccwv-blurb,
.ccwv-section[data-ccwv-phase="speaking"] .ccwv-privacy,
.ccwv-section[data-ccwv-phase="muted"] .ccwv-title,
.ccwv-section[data-ccwv-phase="muted"] .ccwv-blurb,
.ccwv-section[data-ccwv-phase="muted"] .ccwv-privacy,
.ccwv-section[data-ccwv-phase="ending"] .ccwv-title,
.ccwv-section[data-ccwv-phase="ending"] .ccwv-blurb,
.ccwv-section[data-ccwv-phase="ending"] .ccwv-privacy,
.ccwv-section[data-ccwv-phase="processing"] .ccwv-title,
.ccwv-section[data-ccwv-phase="processing"] .ccwv-blurb,
.ccwv-section[data-ccwv-phase="processing"] .ccwv-privacy,
.ccwv-section[data-ccwv-phase="complete"] .ccwv-title,
.ccwv-section[data-ccwv-phase="complete"] .ccwv-blurb,
.ccwv-section[data-ccwv-phase="complete"] .ccwv-privacy{
  display: none;
}

/* The kicker carries the whole context once the rest is gone, so it needs a little air below. */
.ccwv-section[data-ccwv-phase="listening"] .ccwv-kicker,
.ccwv-section[data-ccwv-phase="speaking"] .ccwv-kicker,
.ccwv-section[data-ccwv-phase="muted"] .ccwv-kicker,
.ccwv-section[data-ccwv-phase="ending"] .ccwv-kicker,
.ccwv-section[data-ccwv-phase="processing"] .ccwv-kicker,
.ccwv-section[data-ccwv-phase="complete"] .ccwv-kicker{
  margin-bottom: .85rem;
}

/* The live panel is the first thing under the label once the intro has gone. */
.ccwv-section[data-ccwv-phase="listening"] .ccwv-live,
.ccwv-section[data-ccwv-phase="speaking"] .ccwv-live,
.ccwv-section[data-ccwv-phase="muted"] .ccwv-live,
.ccwv-section[data-ccwv-phase="ending"] .ccwv-live,
.ccwv-section[data-ccwv-phase="processing"] .ccwv-live,
.ccwv-section[data-ccwv-phase="complete"] .ccwv-result{
  margin-top: 0;
}

/*
 * The timer measures connected conversation, so it stays hidden while permission is being
 * granted and while the call is being established.
 */
.ccwv-status__timer{ display: none; }
.ccwv-section[data-ccwv-phase="listening"] .ccwv-status__timer,
.ccwv-section[data-ccwv-phase="speaking"] .ccwv-status__timer,
.ccwv-section[data-ccwv-phase="muted"] .ccwv-status__timer{
  display: inline;
}

/*
 * Mute and End only exist once there is a call to mute or end. During permission and
 * connecting the live panel shows the status line alone.
 */
.ccwv-controls{ display: none; }
.ccwv-section[data-ccwv-phase="listening"] .ccwv-controls,
.ccwv-section[data-ccwv-phase="speaking"] .ccwv-controls,
.ccwv-section[data-ccwv-phase="muted"] .ccwv-controls{
  display: flex;
}

/* Nothing has been transcribed yet before the call connects, so the caption reserves no space. */
.ccwv-section[data-ccwv-phase="permission"] .ccwv-caption,
.ccwv-section[data-ccwv-phase="connecting"] .ccwv-caption{
  min-height: 0;
  margin: 0;
}

/* -------------------------------------------------------------- live panel */

.ccwv-live{
  margin-top: 1.35rem;
  padding: 1.05rem 1.15rem 1.15rem;
  border: 1px solid var(--ccwv-edge);
  border-radius: var(--ccwv-r-sm);
  background: var(--ccwv-surf-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

.ccwv-status{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; }

.ccwv-status__orb{
  flex:0 0 auto; width:12px; height:12px; border-radius:50%;
  background: var(--ccwv-muted-2);
  transition: background .2s ease, box-shadow .2s ease;
}
.ccwv-status__orb[data-state="wait"]{ background: var(--ccwv-amber); animation: ccwv-pulse 1.4s ease-in-out infinite; }
.ccwv-status__orb[data-state="listen"]{ background: var(--ccwv-green); box-shadow:0 0 0 4px rgba(19,139,116,.16); animation: ccwv-pulse 2s ease-in-out infinite; }
.ccwv-status__orb[data-state="speak"]{ background: var(--ccwv-blue); box-shadow:0 0 0 4px rgba(10,143,212,.18); animation: ccwv-pulse .9s ease-in-out infinite; }
.ccwv-status__orb[data-state="mute"]{ background: var(--ccwv-muted-2); box-shadow:0 0 0 4px rgba(113,134,154,.16); }
.ccwv-status__orb[data-state="done"]{ background: var(--ccwv-green); }
.ccwv-status__orb[data-state="error"]{ background: var(--ccwv-alert); }

@keyframes ccwv-pulse{ 0%,100%{opacity:1} 50%{opacity:.45} }
@media (prefers-reduced-motion: reduce){
  .ccwv-status__orb{ animation: none !important; }
  .ccwv-section .ccwv-btn{ transition:none; }
}

.ccwv-status__text{ font-weight:700; font-size:.95rem; color: var(--ccwv-ink); min-width:0; }
.ccwv-status__timer{
  margin-left:auto;
  font-family: var(--ccwv-mono);
  font-variant-numeric: tabular-nums;
  font-size:.84rem;
  color: var(--ccwv-muted-2);
}

/* Reserved so a new line of speech does not shunt the controls down the page. */
.ccwv-caption{
  min-height: 3em;
  margin:.8rem 0 .95rem;
  font-size:.945rem; line-height:1.55;
  color: var(--ccwv-body);
}

.ccwv-controls{ flex-wrap:wrap; gap:.7rem; }
.ccwv-section .ccwv-controls .ccwv-btn{ min-height:44px; padding:0 18px; font-size:.9rem; }

/* ------------------------------------------------------------------ result */

.ccwv-result{
  margin-top: 1.35rem;
  padding: 1.2rem 1.25rem;
  border: 1px solid rgba(19,139,116,.30);
  border-radius: var(--ccwv-r-sm);
  background: linear-gradient(158deg,#f6fcfa,#eef8f5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.ccwv-result__title{
  margin:0 0 .45rem;
  font-family: var(--ccwv-font);
  font-size:1.12rem; font-weight:800; letter-spacing:-0.018em;
  color: var(--ccwv-ink);
}
.ccwv-result__body{ margin:0 0 .5rem; color: var(--ccwv-body); line-height:1.6; }
.ccwv-result__ref{
  margin:0 0 .25rem;
  font-family: var(--ccwv-mono);
  font-size:.9rem; color: var(--ccwv-ink);
  font-variant-numeric: tabular-nums;
}
.ccwv-result__actions{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1rem; }

.ccwv-upload{ margin-top:1.1rem; }
.ccwv-upload__hint{ margin:0 0 .65rem; font-size:.875rem; color: var(--ccwv-muted); line-height:1.55; }
.ccwv-upload__drop{
  display:block; padding:1.05rem; text-align:center; cursor:pointer;
  border:1px dashed rgba(12,128,190,.38);
  border-radius: var(--ccwv-r-sm);
  background: var(--ccwv-white);
  color: var(--ccwv-blue-deep);
  font-size:.92rem; font-weight:600;
}
.ccwv-upload__drop:hover{ border-color: var(--ccwv-edge-hot); background:#fbfdff; }
.ccwv-upload__drop input{ position:absolute; width:1px; height:1px; opacity:0; }
.ccwv-upload__status{ margin:.55rem 0 0; font-size:.87rem; color: var(--ccwv-muted); min-height:1.3em; }

/* ------------------------------------------------------------------- error */

.ccwv-error{
  margin-top:1.35rem; padding:1.05rem 1.15rem;
  border:1px solid rgba(168,57,44,.26);
  border-radius: var(--ccwv-r-sm);
  background: linear-gradient(158deg,#fffaf9,#fdf3f2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.ccwv-error p{ margin:0 0 .65rem; line-height:1.6; color: var(--ccwv-ink-2); }
.ccwv-error__actions{
  display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1.1rem;
  margin-top:.9rem;
}

/* ------------------------------------------------------------- unavailable */

.ccwv-section--unavailable .ccwv-inner{ background: var(--ccwv-surf-2); }

/* ------------------------------------------------------------- responsive */

@media (max-width: 900px){
  .ccwv-inner{ padding: 1.25rem 1.15rem 1.35rem; }
}

@media (max-width: 640px){
  .ccwv-section{ padding: 1.35rem 14px; }
  .ccwv-inner{ border-radius: var(--ccwv-r-sm); }
  .ccwv-actions{ gap:.7rem; }
  .ccwv-actions .ccwv-btn--primary{ width:100%; }
  .ccwv-secondary{ width:100%; }
  .ccwv-controls .ccwv-btn{ flex:1 1 auto; }
  .ccwv-result__actions .ccwv-btn{ width:100%; }

  /*
   * Connected on a phone: the panel is what the customer is using, so it gets the room. The
   * text steps down a little, the padding tightens, and the controls keep their tap size.
   */
  .ccwv-section[data-ccwv-phase="listening"] .ccwv-inner,
  .ccwv-section[data-ccwv-phase="speaking"] .ccwv-inner,
  .ccwv-section[data-ccwv-phase="muted"] .ccwv-inner,
  .ccwv-section[data-ccwv-phase="ending"] .ccwv-inner,
  .ccwv-section[data-ccwv-phase="processing"] .ccwv-inner{
    padding: .95rem .85rem 1.05rem;
  }
  .ccwv-section[data-ccwv-phase="listening"] .ccwv-live,
  .ccwv-section[data-ccwv-phase="speaking"] .ccwv-live,
  .ccwv-section[data-ccwv-phase="muted"] .ccwv-live,
  .ccwv-section[data-ccwv-phase="ending"] .ccwv-live,
  .ccwv-section[data-ccwv-phase="processing"] .ccwv-live{
    padding: .85rem .9rem .95rem;
  }
  .ccwv-live .ccwv-status__text{ font-size:.92rem; }
  .ccwv-live .ccwv-caption{ font-size:.9rem; line-height:1.5; margin:.6rem 0 .8rem; min-height:2.6em; }

  /*
   * The three facts each take a full line at this width, so the middle dot separator would
   * be left stranded at the start of the wrapped lines. Stack them properly instead.
   */
  .ccwv-meta{ display:grid; gap:.3rem; }
  .ccwv-meta li{ display:flex; align-items:center; gap:.5rem; }
  .ccwv-meta li:not(:last-child)::after{ content:none; }
  .ccwv-meta li::before{
    content:""; flex:0 0 auto; width:5px; height:5px; border-radius:50%;
    background: var(--ccwv-green); margin:0;
  }
}