/* onboard.css: the walkthrough's own surface.
 *
 * Scoped to .ob-* so it cannot reach the console's 24-screen stylesheet.
 * Fonts come from app.css's self-hosted IBM Plex faces; the CSP is
 * default-src 'self', so nothing here may reference a remote font.
 */

/* ---- Full-bleed walkthrough --------------------------------------
 *
 * During onboarding the console is not there. A customer setting up their
 * first system does not yet know what Quarantines or Routing rules are, and
 * a sidebar offering twenty of them is the thing that made the walkthrough
 * feel like a form buried inside somebody else's software.
 *
 * .app is a two-column grid (var(--nav-w) 1fr), so hiding the aside is not
 * enough -- the empty column would still hold its width. The grid collapses
 * to one column for the duration.
 */

body.onboarding .app { grid-template-columns: 1fr; }
body.onboarding aside.sidebar,
body.onboarding .app-header { display: none; }

/* The drawer and its scrim belong to console screens; nothing in the
 * walkthrough opens them, and a stale open drawer would sit over it. */
body.onboarding .drawer,
body.onboarding .scrim { display: none; }

.ob-screen {
  max-width: 46rem;
  margin: 0 auto;
  padding: 3rem 1.5rem 5rem;
}

.ob-title {
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
}

.ob-sub {
  font-size: 1rem;
  color: #5b6472;
  margin: 0 0 2.5rem;
}

/* ---- Greeting -------------------------------------------------- */

.ob-greeting {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  text-align: center;
}

.ob-wordmark {
  font-size: 3rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Roughly a third the wordmark, letterspaced, at 400. */
.ob-tagline {
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: lowercase;
  color: #5b6472;
  margin-bottom: 1.5rem;
}

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

/* The button fades but does NOT translate: a control that slides under the
 * cursor is a control you misclick. Same delay, different keyframes. */
@keyframes ob-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.ob-rise { animation: ob-rise 600ms ease-out both; }
.ob-rise-late { animation: ob-fade 600ms ease-out 200ms both; }

/* Continue on the type grid, crossing between none counted and some. The
 * 0.6 is .ob-btn:disabled's opacity, so each ends where the state sits. */
@keyframes ob-enable { from { opacity: 0.6; } to { opacity: 1; } }
@keyframes ob-disable { from { opacity: 1; } to { opacity: 0.6; } }

.ob-enabling { animation: ob-enable 250ms ease-out; }
.ob-disabling { animation: ob-disable 250ms ease-out; }

/* Motion is decoration here; the walkthrough reads identically without it. */
@media (prefers-reduced-motion: reduce) {
  .ob-rise, .ob-rise-late, .ob-enabling, .ob-disabling { animation: none; }
}

/* ---- Forms ----------------------------------------------------- */

/* ---- Stepper ------------------------------------------------------ */

/* The setup screens pass no subtitle, so this sits directly under the
 * title's own 0.5rem and owns the gap to the form. */
.ob-stepper {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0.75rem 0 2rem;
}

.ob-step-count {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  color: #5b6472;
}

.ob-step-dots { display: flex; gap: 0.3rem; }

.ob-dot {
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: #dde3ea;
}

.ob-dot.is-done { background: #16233a; }

/* ---- Choice list --------------------------------------------------- */

.ob-choices {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.6rem;
  margin-bottom: 1rem;
}

/* The running count under the grid belongs to the grid, not to the buttons
   below it. */
.ob-choices + .ob-hint { margin: 0 0 1.5rem; }

.ob-choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0.55rem 0.55rem 1rem;
  border: 1px solid #cdd4dd;
  border-radius: 8px;
  background: #fff;
}

.ob-choice.is-chosen {
  border-color: #16233a;
  box-shadow: inset 0 0 0 1px #16233a;
  font-weight: 500;
}

/* − n +. Typed signs rather than icons; the stepper is plain text so it
   stays in the page's own font. */
.ob-qty {
  display: inline-flex;
  align-items: center;
  flex: none;
}

.ob-qty button {
  font: inherit;
  font-weight: 600;
  width: 2rem;
  height: 2rem;
  border: 1px solid #cdd4dd;
  border-radius: 6px;
  background: #fff;
  color: #16233a;
  cursor: pointer;
}

.ob-qty button:hover:not(:disabled) { border-color: #16233a; }
.ob-qty button:disabled { color: #b5bdc8; cursor: default; }

.ob-count {
  min-width: 1.75rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ---- Paste connection strings ---------------------------------- */

.ob-paste { margin-top: 2rem; }
.ob-paste summary { cursor: pointer; color: #5b6472; }
.ob-paste[open] summary { margin-bottom: 0.75rem; }

.ob-paste-box {
  width: 100%;
  box-sizing: border-box;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.85rem;
  resize: vertical;
  margin: 0.5rem 0 0.75rem;
}

/* Sits between the step count and the first field, above what it fills. */
.ob-copy-prev { display: block; margin: -1rem 0 1.25rem; }

/* ---- Actions ------------------------------------------------------- */

.ob-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
}

.ob-link-btn {
  font: inherit;
  font-size: 0.9rem;
  background: none;
  border: none;
  padding: 0;
  color: #5b6472;
  text-decoration: underline;
  cursor: pointer;
}

.ob-link-btn:hover { color: #16233a; }

.ob-form { display: flex; flex-direction: column; gap: 1.1rem; }

.ob-field { display: flex; flex-direction: column; gap: 0.35rem; }

.ob-label { font-size: 0.85rem; font-weight: 500; color: #3d4652; }

.ob-input {
  font: inherit;
  padding: 0.55rem 0.7rem;
  border: 1px solid #cdd4dd;
  border-radius: 6px;
  background: #fff;
}

.ob-input:focus-visible {
  outline: 2px solid #2f6feb;
  outline-offset: 1px;
  border-color: #2f6feb;
}

/* Queries, schemas and commands are code: monospaced, so a brace or a
   dollar sign reads as typed. */
.ob-code-input {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.85rem;
  resize: vertical;
}

/* One operation on the GraphQL/gRPC step. Boxed like .ob-scope so the
   rows read as separate entries rather than one long form. */
.ob-op {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin: 0;
  padding: 1rem 1.1rem;
  border: 1px solid #e2e7ee;
  border-radius: 8px;
}

.ob-op legend { padding: 0 0.35rem; }
.ob-op .ob-link-btn { align-self: flex-start; }
.ob-form > .ob-link-btn { align-self: flex-start; }

/* The Test connection answer, under the buttons that asked for it. Green and
   red are the outcome washes' own text colours (.ob-allowed / .ob-error). */
.ob-test-result { margin: 0; font-size: 0.9rem; color: #5b6472; }
.ob-test-result.is-ok { color: #1a6b3a; }
.ob-test-result.is-bad { color: #a01818; }

.ob-scope {
  border: 1px solid #e2e7ee;
  border-radius: 8px;
  padding: 1rem 1.1rem;
  background: #fafbfc;
}

.ob-ask { font-weight: 500; margin: 0 0 0.75rem; }

.ob-radio { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0; }

.ob-tenant-col { margin-top: 0.75rem; }

.ob-btn {
  font: inherit;
  font-weight: 500;
  padding: 0.55rem 1.1rem;
  border: 1px solid #cdd4dd;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}

.ob-btn:disabled { opacity: 0.6; cursor: default; }

.ob-btn-primary {
  align-self: flex-start;
  background: #16233a;
  border-color: #16233a;
  color: #fff;
}

/* ---- Waiting --------------------------------------------------- */

.ob-summary {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem 1.25rem;
  margin: 0 0 1.5rem;
}

.ob-summary dt { font-size: 0.85rem; color: #5b6472; }
.ob-summary dd { margin: 0; font-weight: 500; }

.ob-status { text-transform: lowercase; }

.ob-hint { color: #5b6472; font-size: 0.9rem; }

.ob-copy { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }

.ob-link {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.85rem;
  padding: 0.4rem 0.6rem;
  background: #f4f6f9;
  border-radius: 5px;
  user-select: all;
  overflow-wrap: anywhere;
}

/* ---- Review: the systems added so far -------------------------- */

.ob-sources { margin-bottom: 1.5rem; }

.ob-source {
  border: 1px solid #e2e7ee;
  border-radius: 8px;
  padding: 1rem 1.1rem;
  margin-bottom: 0.75rem;
}

/* The name carries the row; the type and Remove sit to its right, and
   Remove is pushed to the far edge so it is never adjacent to the name it
   would delete. */
.ob-source-head {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.ob-source-name {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.95rem;
  font-weight: 500;
  margin: 0;
}

.ob-source-type { color: #5b6472; font-size: 0.85rem; }

.ob-source-head .ob-link-btn { margin-left: auto; }

/* Inside a card the summary is the last thing, so its bottom margin is
   double spacing. */
.ob-source .ob-summary { margin-bottom: 0; }

/* ---- Classify -------------------------------------------------- */

/* Which system the tables below belong to. Heavier and un-mono against
   .ob-object-name so the two levels do not read as one list: the table
   names are the mono ones, the system owning them is not. */
.ob-source-heading {
  font-size: 1rem;
  font-weight: 600;
  margin: 1.75rem 0 0.75rem;
}

.ob-classify > .ob-source-heading:first-child { margin-top: 0; }

.ob-object {
  border: 1px solid #e2e7ee;
  border-radius: 8px;
  padding: 1rem 1.1rem;
  margin-bottom: 1.25rem;
}

.ob-object-name {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.95rem;
  font-weight: 500;
  margin: 0 0 0.75rem;
}

.ob-group {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #5b6472;
  margin: 1.1rem 0 0.5rem;
}

.ob-col {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.35rem 0;
  border-top: 1px solid #f0f3f7;
}

.ob-col-name {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.85rem;
  flex: 1;
}

.ob-col-why {
  font-size: 0.75rem;
  color: #5b6472;
  text-transform: lowercase;
}

.ob-tier { font: inherit; font-size: 0.85rem; padding: 0.25rem; }

.ob-batch { margin-top: 1rem; }
.ob-batch summary { cursor: pointer; color: #5b6472; font-size: 0.9rem; }

/* ---- Prove ----------------------------------------------------- */

.ob-code {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.85rem;
  background: #f4f6f9;
  padding: 0.9rem 1rem;
  border-radius: 6px;
  overflow-x: auto;
}

.ob-envelope {
  border: 1px solid #e2e7ee;
  border-radius: 6px;
  padding: 0.9rem 1.1rem;
  margin-bottom: 1rem;
}

.ob-envelope .ob-summary { margin: 0; }

/* A faint wash of the outcome, the same red as .ob-error. */
.ob-denied { background: #fdf3f3; border-color: #f3dcdc; }
.ob-allowed { background: #f1f8f3; border-color: #d6eadc; }

/* ---- Errors ---------------------------------------------------- */

.ob-error {
  color: #a01818;
  background: #fdf3f3;
  padding: 0.6rem 0.8rem;
  border-radius: 4px;
  font-size: 0.9rem;
}

/* A refusal in the paste panel sits above its button, not against it. */
.ob-paste .ob-error { margin: 0 0 0.75rem; }