/* Connect wizard — cc-connect-wizard.js (2026-08-19).
   Every class is ccw-* prefixed and every rule is scoped under .ccw-root, because
   this panel is deliberately NOT the Agri360 palette and must not leak into the
   dashboard behind it. It is PostPilot's paper / ink / vermillion identity lifted
   from apps/web/app/globals.css: this is the one surface in the chain a client can
   be looking at mid-flow, so it matches rather than approximates.

   THE Z BAND. .dd-popup sits at 9100 (deliverable-dashboard.css) and window.ddSheet
   claims 9200 upward, capped well below .dd-img-lightbox at 10000. The wizard is a
   top-level modal opened from the Schedule card and it must cover both a popup and
   a sheet, so it sits at 9500 and still leaves the lightbox on top.

   FONTS. Fraunces and IBM Plex are named first and each falls back to a real system
   stack. This file does not pull a webfont: adding a font <link> means editing
   index.html, which this task does not own, and a wizard that renders in Georgia
   and system-ui is correct, just less pretty. */

.ccw-root {
  --ccw-paper: #f3ede1;
  --ccw-paper-deep: #ebe4d3;
  --ccw-ink: #18170f;
  --ccw-ink-soft: #56524a;
  --ccw-ink-mute: #8b8474;
  --ccw-rule: #c8bfa8;
  --ccw-accent: #c4361b;   /* also set inline from opts.brandColor */

  --ccw-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --ccw-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ccw-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}

.ccw-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(24, 23, 15, 0.55);
}

.ccw-panel {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  box-sizing: border-box;
  padding: 28px;
  background: var(--ccw-paper);
  border: 2px solid var(--ccw-ink);
  box-shadow: 0 24px 60px rgba(24, 23, 15, 0.35);
  font-family: var(--ccw-body);
  color: var(--ccw-ink);
  animation: ccw-rise 180ms ease-out;
}

@keyframes ccw-rise {
  from { transform: translateY(10px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ── head ───────────────────────────────────────────────────────────────── */
.ccw-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.ccw-eyebrow-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.ccw-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ccw-accent);
  flex: 0 0 auto;
}
.ccw-eyebrow {
  font-family: var(--ccw-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ccw-ink-soft);
  /* At 390px this tracking runs long, so it wraps rather than truncating. The
     label is the only thing naming the panel. */
  white-space: normal;
}

/* ── stepper ────────────────────────────────────────────────────────────── */
.ccw-stepper {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
}
.ccw-stepbar {
  height: 3px;
  flex: 1 1 0;
  border-radius: 999px;
  background: rgba(24, 23, 15, 0.12);
  transition: background-color 160ms ease;
}
.ccw-stepbar.is-on { background: var(--ccw-accent); }

.ccw-steplabel {
  margin-top: 8px;
  font-family: var(--ccw-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ccw-ink-mute);
}

/* ── section ────────────────────────────────────────────────────────────── */
.ccw-section { margin-top: 22px; }

.ccw-title {
  margin: 0;
  font-family: var(--ccw-display);
  font-weight: 600;
  line-height: 1.1;
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--ccw-ink);
}
.ccw-lede {
  margin: 8px 0 0;
  font-family: var(--ccw-display);
  font-style: italic;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ccw-ink-soft);
}
.ccw-meta {
  font-family: var(--ccw-mono);
  font-size: 12px;
  color: var(--ccw-ink-soft);
}
.ccw-reassure {
  margin: 16px 0 0;
  font-family: var(--ccw-display);
  font-style: italic;
  font-size: 14px;
  color: var(--ccw-ink-mute);
}

/* ── bullets ────────────────────────────────────────────────────────────── */
.ccw-bullets {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--ccw-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ccw-ink-soft);
}
.ccw-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.ccw-tick {
  margin-top: 7px;
  width: 12px;
  height: 3px;
  background: rgba(24, 23, 15, 0.6);
  flex: 0 0 auto;
}

/* ── buttons ────────────────────────────────────────────────────────────── */
/* The primary is PostPilot's solid ink "press" button, the secondary its outlined
   ghost. Both are 44px minimum, which is the mobile target and does no harm on
   desktop. */
.ccw-press {
  display: block;
  width: 100%;
  min-height: 46px;
  margin-top: 26px;
  padding: 12px 18px;
  border: 2px solid var(--ccw-ink);
  background: var(--ccw-ink);
  color: var(--ccw-paper);
  font-family: var(--ccw-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 80ms ease, box-shadow 80ms ease;
}
.ccw-press:hover:not(:disabled) { box-shadow: 3px 3px 0 var(--ccw-accent); transform: translate(-1px, -1px); }
.ccw-press:active:not(:disabled) { transform: translate(1px, 1px); box-shadow: none; }
.ccw-press:disabled { opacity: 0.4; cursor: not-allowed; }

.ccw-ghost {
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid rgba(24, 23, 15, 0.28);
  background: transparent;
  color: var(--ccw-ink-soft);
  font-family: var(--ccw-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.ccw-ghost:hover { border-color: var(--ccw-ink); color: var(--ccw-ink); }
.ccw-ghost-block {
  display: block;
  width: 100%;
  margin-top: 12px;
}
.ccw-close { flex: 0 0 auto; }

.ccw-root :focus-visible {
  outline: 2px solid var(--ccw-accent);
  outline-offset: 2px;
}

/* ── spinner ────────────────────────────────────────────────────────────── */
.ccw-spinrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}
.ccw-spinner {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(24, 23, 15, 0.15);
  border-top-color: var(--ccw-accent);
  animation: ccw-spin 800ms linear infinite;
  flex: 0 0 auto;
}
@keyframes ccw-spin { to { transform: rotate(360deg); } }

/* ── page picker ────────────────────────────────────────────────────────── */
.ccw-pages,
.ccw-connected {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ccw-page {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 14px;
  text-align: left;
  background: transparent;
  border: 1px solid rgba(24, 23, 15, 0.15);
  cursor: pointer;
  transition: border-color 140ms ease;
}
.ccw-page.is-on { border-color: var(--ccw-accent); }
.ccw-page-text { min-width: 0; flex: 1 1 auto; }
.ccw-page-name {
  margin: 0;
  font-family: var(--ccw-display);
  font-size: 17px;
  font-weight: 550;
  color: var(--ccw-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ccw-page-sub {
  margin: 2px 0 0;
  font-family: var(--ccw-mono);
  font-size: 11px;
  color: var(--ccw-ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ccw-radio {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(24, 23, 15, 0.3);
  display: grid;
  place-items: center;
}
.ccw-page.is-on .ccw-radio {
  border-color: var(--ccw-accent);
  background: var(--ccw-accent);
}
.ccw-radio-fill {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ccw-paper);
}

/* ── connected list ─────────────────────────────────────────────────────── */
.ccw-conn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(24, 23, 15, 0.15);
}
.ccw-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}
.ccw-avatar-fallback {
  display: grid;
  place-items: center;
  background: var(--ccw-paper-deep);
  font-family: var(--ccw-mono);
  font-size: 10px;
  text-transform: uppercase;
  color: var(--ccw-ink-soft);
}
.ccw-pill {
  flex: 0 0 auto;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: var(--ccw-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--ccw-rule);
  color: var(--ccw-ink-soft);
}
.ccw-pill.is-ok { border-color: #2f7d4f; color: #2f7d4f; }
.ccw-pill.is-fail { border-color: var(--ccw-accent); color: var(--ccw-accent); }

/* ── touch / narrow ─────────────────────────────────────────────────────── */
/* The wizard becomes a full-screen sheet rather than a centred card. Both the
   media query and the .ccw-touch class carry it: the class is what the JS sets
   when it has decided this is a touch device, and the query catches a narrow
   desktop window. */
@media (max-width: 560px) {
  .ccw-root { padding: 0; align-items: stretch; }
  .ccw-panel {
    max-width: none;
    max-height: none;
    min-height: 100%;
    border-width: 0;
    padding: 20px 18px 32px;
  }
  /* The Page name goes on its own line above the sub-line: side by side at 390px
     the handle truncates, and the handle is the only thing telling two Pages of a
     similar name apart. */
  .ccw-page { align-items: flex-start; }
  .ccw-page-name { white-space: normal; }
  .ccw-page-sub { white-space: normal; }
  .ccw-radio { width: 24px; height: 24px; margin-top: 2px; }
}

.ccw-touch .ccw-page { min-height: 56px; }
.ccw-touch .ccw-radio { width: 24px; height: 24px; }

@media (prefers-reduced-motion: reduce) {
  .ccw-panel { animation: none; }
  .ccw-spinner { animation-duration: 2s; }
  .ccw-press { transition: none; }
  .ccw-press:hover:not(:disabled) { transform: none; }
}