/* Match the selected Canvas website palette from next/style.css and next/final.css. */
.canvas-portal {
  --navy: #00a9a9;
  --ink: #0e3a5c;
  --canvas: #d1d2d442;
  --body: #00a9a9;
  --line: #9dd4d6;
  --canvas-yellow: #ffdd00;
  --canvas-orange: #ff5f00;
  --canvas-blue: #4cbbbc;
  background: var(--canvas);
  color: var(--ink);
}

.canvas-portal .v9-shell { background: var(--canvas); }
.canvas-portal .v9-shell .sidebar,
.canvas-portal .v9-shell .topbar { background: var(--navy); color: white; }
.canvas-portal .v9-shell .topbar { border-color: #ffffff35; }
.canvas-portal .v9-shell .breadcrumb,
.canvas-portal .v9-shell .breadcrumb > a,
.canvas-portal .v9-shell .company-breadcrumb .company-crumb-name,
.canvas-portal .v9-shell .topbar .mobile-menu { color: #ffffff; }
.canvas-portal .v9-shell .portal-preview-chip { color: #ffffff; border-color: #ffffff55; }
.canvas-portal .v9-shell .app-brand img,
.canvas-portal .customer-signin .login-story > a { background: transparent; border-radius: 0; padding: 0; }
.canvas-portal .v9-shell .sidebar nav a { border-radius: 0; }
.canvas-portal .v9-shell .sidebar nav a.active {
  background: #9dd4d630;
  color: var(--ink);
  box-shadow: inset 3px 0 var(--canvas-blue);
}

.canvas-portal .v9-shell .page-heading h1 {
  color: var(--ink);
  font-size: clamp(30px, 3.2vw, 40px);
  letter-spacing: -.045em;
  line-height: 1.08;
}
.canvas-portal .v9-shell .page-heading .eyebrow,
.canvas-portal .v9-shell .page-heading p { color: var(--body); }
.canvas-portal .page-heading .eyebrow::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  vertical-align: 1px;
  border-radius: 50%;
  background: var(--canvas-orange);
}

.canvas-portal .v9-shell :is(.panel, .company-service, .company-tile, .company-status-strip, .company-facts, .draft-card) {
  border-radius: 0;
  border-color: var(--line);
}
.canvas-portal .v9-shell .company-service { background: white; }
.canvas-portal .v9-shell .company-service:hover { border-color: #00a9a9; }
.canvas-portal .v9-shell .company-service small { color: var(--body); }
.canvas-portal .v9-shell .service-symbol { background: #9dd4d630; color: var(--ink); border-radius: 0; }
.canvas-portal .v9-shell .bottom-nav a.active { color: var(--ink); box-shadow: inset 0 2px var(--canvas-orange); }

.canvas-portal .v9-shell .btn,
.canvas-portal .customer-signin .btn,
.canvas-portal #dialog .btn { border-radius: 0; }
.canvas-portal .v9-shell .btn.primary,
.canvas-portal .customer-signin .btn.primary,
.canvas-portal #dialog .btn.primary {
  background: var(--canvas-yellow);
  color: var(--ink);
  border-color: var(--canvas-yellow);
  box-shadow: none;
}
.canvas-portal .v9-shell .btn.primary:hover,
.canvas-portal .customer-signin .btn.primary:hover,
.canvas-portal #dialog .btn.primary:hover { background: #ffdd00; border-color: #ffdd00; }
.canvas-portal .v9-shell .btn.secondary,
.canvas-portal #dialog .btn.secondary { color: var(--ink); border-color: #9dd4d6; }
.canvas-portal .customer-signin .login-form { background: var(--canvas); }
.canvas-portal .customer-signin .login-form h1 { color: var(--ink); }
.canvas-portal .customer-signin .preview-access { background: white; border-color: var(--line); border-radius: 0; }
.canvas-portal .customer-signin .login-story { background: var(--navy); }
.canvas-portal .customer-signin .login-story::after {
  background-image: linear-gradient(#00a9a9d9, #00a9a9f7), url('../images/lounge-light.webp');
}

.canvas-portal .v9-shell :is(.sidebar, .topbar) :is(a, button):focus-visible {
  outline-color: var(--canvas-blue);
}
@media (max-width: 700px) {
  .canvas-portal.mobile-preview .v9-shell .company-breadcrumb .company-crumb-name { display: block; }
}

.formation-context {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding: 12px 16px;
  background: #9dd4d630;
  border: 1px solid var(--line);
  color: var(--ink);
}
.formation-actor, .formation-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.formation-actor strong, .formation-actor small { display: block; line-height: 1.4; }
.formation-actor small, .formation-saved { font-size: .875rem; color: var(--body); }
.formation-actor .service-symbol { background: white; }
.formation-context .state-chip { margin: 0; }
.phase-rail ol { list-style: none; margin: 0; padding: 0; }
.phase-rail .phase { margin-bottom: 16px; }
.phase-rail .phase small { display: block; font-size: .75rem; color: var(--body); }
.formation-progress {
  display: block;
  width: 100%;
  height: 5px;
  margin: 0 0 20px;
  border: 0;
  background: var(--line);
  accent-color: var(--navy);
}
.formation-progress::-webkit-progress-bar { background: var(--line); }
.formation-progress::-webkit-progress-value { background: var(--navy); }
.formation-progress::-moz-progress-bar { background: var(--navy); }
.formation-handoff { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-top: 15px; }
.formation-handoff .portal-text-link { margin: 0; font-size: .875rem; }
@media (max-width: 700px) {
  .formation-context { padding: 10px 12px; }
  .canvas-portal .registration-layout .phase-rail { display: none; }
}