/* Getting started: the welcome, the checklist on Overview, and the guided
   tour's spotlight. Loaded after panel-v2.css, so every colour here is one of
   its theme tokens — Dark, Light, Matrix and a custom palette all follow
   without a rule of their own. */

/* ---------------- checklist card ---------------- */

.cp-gs-card {
  border-color: var(--accent);
  /* The one panel on the page that is asking for attention rather than
     reporting a reading. A tinted left edge says so without a second colour. */
  box-shadow: inset 3px 0 0 0 var(--accent);
}
.cp-section .cp-gs-card > .cp-gs-head { padding: 14px 18px; }
.cp-section .cp-gs-card > .cp-gs-list { padding: 0 18px 6px; }
.cp-section .cp-gs-card > .cp-gs-foot { padding: 0 18px 16px; }

/* Console, Database and the API client are single-panel screens: panel-v2.css
   gives every .card in them height:100% so the one panel fills the section.
   The checklist is a second card there, and inheriting that stretches it to the
   full viewport and pushes the panel it is sitting above out of sight. It is
   as tall as its own content wherever it lands. */
#cp-section-console .cp-gs-card,
#cp-section-database .cp-gs-card,
#cp-section-api .cp-gs-card {
  height: auto;
  flex: none;
  margin: 0 0 16px 0;
}

.cp-gs-head {
  display: flex; align-items: flex-start; gap: 12px;
  border-bottom: 1px solid var(--line-soft);
}
.cp-gs-titles { flex: 1 1 auto; min-width: 0; }
.cp-gs-titles h2 {
  margin: 0 0 3px; padding: 0; border: none;
  font-size: 14px; font-weight: 600; color: var(--text);
}
.cp-gs-titles p { margin: 0; font-size: 12px; color: var(--text-dim); }
.cp-gs-head .util-btn { margin: 0; flex: none; }

.cp-gs-list { list-style: none; margin: 0; padding: 0; }
.cp-gs-step {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 11px 0; border-bottom: 1px solid var(--line-soft);
}
.cp-gs-step:last-child { border-bottom: none; }
.cp-gs-step .util-btn { margin: 0; flex: none; align-self: center; }

.cp-gs-tick {
  flex: none; width: 19px; height: 19px; margin-top: 1px;
  border: 1px solid var(--line); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; line-height: 1; color: var(--accent-ink); background: var(--surface-2);
}
.cp-gs-step.is-done .cp-gs-tick { background: var(--accent); border-color: var(--accent); }

.cp-gs-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cp-gs-step-title { font-size: 13px; font-weight: 500; color: var(--text); }
.cp-gs-why { font-size: 12px; color: var(--text-dim); }
.cp-gs-why code {
  font-family: var(--mono); font-size: 11.5px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 4px; padding: 1px 5px;
}
/* Done rows stay readable but stop competing with the work that is left. */
.cp-gs-step.is-done .cp-gs-step-title { color: var(--text-dim); text-decoration: line-through; }
.cp-gs-step.is-done .cp-gs-why { color: var(--text-mute); }

.cp-gs-foot { font-size: 11.5px; color: var(--text-mute); }
.cp-gs-foot a { color: var(--text-dim); }
.cp-gs-foot a:hover { color: var(--accent); }

/* The single filled button per view, matching .act.is-primary. */
.util-btn.cp-gs-primary {
  background: var(--accent); border-color: var(--accent);
  color: var(--accent-ink); font-weight: 600;
}
.util-btn.cp-gs-primary:hover { color: var(--accent-ink); border-color: var(--accent); }

/* ---------------- "the tour has new ground" banner ---------------- */

.cp-gs-banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 10px 14px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 12px; color: var(--text-dim);
}
.cp-gs-banner span { flex: 1 1 auto; }
.cp-gs-banner .util-btn { margin: 0; }

/* ---------------- welcome ---------------- */

.cp-gs-welcome { z-index: 4000; }
.cp-gs-welcome-box { width: 560px; height: auto; max-height: 88vh; }
.cp-gs-welcome-box .modal-body { font-size: 13px; color: var(--text-dim); line-height: 1.55; }
.cp-gs-welcome-box .modal-body p { margin: 0 0 12px; }
.cp-gs-welcome-box .modal-body ul { margin: 0 0 12px; padding-left: 20px; }
.cp-gs-welcome-box .modal-body li { margin: 0 0 6px; }
.cp-gs-welcome-box .modal-body b { color: var(--text); }
.cp-gs-welcome-note { color: var(--text-mute); }
.cp-gs-welcome-box .modal-footer .util-btn { margin: 0; }

/* ---------------- tour ---------------- */

/* The dim is painted by the hole's own outsized shadow rather than by four
   positioned panels, so the cut-out follows the target exactly and the whole
   overlay stays one element. */
.cp-tour-overlay {
  position: fixed; inset: 0; z-index: 5000;
  background: transparent;
}
.cp-tour-hole {
  position: fixed; border-radius: 8px;
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.62);
  transition: top .18s ease, left .18s ease, width .18s ease, height .18s ease;
  pointer-events: none;
}
body.theme-light .cp-tour-hole { box-shadow: 0 0 0 9999px rgba(15, 20, 26, 0.45); }

.cp-tour-tip {
  position: fixed; z-index: 5001; width: 330px; max-width: calc(100vw - 24px);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; padding: 15px 16px 12px;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.55);
}
.cp-tour-count {
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-mute); margin-bottom: 5px;
}
.cp-tour-tip h3 {
  margin: 0 0 6px; padding: 0; border: none;
  font-size: 14px; font-weight: 600; color: var(--text);
}
.cp-tour-tip p { margin: 0 0 12px; font-size: 12.5px; line-height: 1.5; color: var(--text-dim); }
.cp-tour-nav { display: flex; align-items: center; gap: 8px; }
.cp-tour-nav .util-btn { margin: 0; }
.cp-tour-spacer { flex: 1 1 auto; }

@media (max-width: 760px) {
  /* On a phone the tooltip is the whole conversation: full width at the
     bottom, out of the way of whatever is being highlighted above it. */
  .cp-tour-tip { width: auto; left: 12px !important; right: 12px; }
  .cp-gs-head { flex-wrap: wrap; }
  .cp-gs-step { flex-wrap: wrap; }
  .cp-gs-step .util-btn { margin-left: 30px; }
}