/* Journey info panel — the aside that shows a journey/step's description,
   entry criteria and goal beside a journey picker.
   crm/journey/partials/journey_info_aside.html, driven by
   crm/js/journey_info_panel.js.

   It lives here rather than in detail.css because nine templates across four
   apps include it and only some of them are detail pages: the Outreach bulk
   "Add to holon" panel rendered it with no stylesheet loaded at all, as a 78px
   strip of unstyled text (#374).

   journey_info_panel.js hides parts of this aside with the `hidden`
   attribute, and an author-origin `display` beats the UA sheet's
   `[hidden] { display: none }`. So every selector here that the driver
   toggles must either declare no `display` at all (.journey-info-section,
   .journey-info-step-label) or carry its own `[hidden]` rule
   (.journey-info-edit-link, below).

   .journey-info-panel must also declare no `display`: person_create.css
   (@layer base) hides it on the team-add form at <=760px, and a `display`
   here is in @layer components, which beats base.

   web/app/tests_design_tokens.py asserts all of it. */
@layer components {
  .journey-info-panel {
    padding: var(--space-4);
    background: var(--color-border-light);
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
    align-self: start;
  }

  .journey-info-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
  }

  .journey-info-panel-title {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    margin: 0;
  }

  .journey-info-edit-link {
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    opacity: 0.6;
    transition: opacity var(--transition-base);
  }

  .journey-info-edit-link:hover { opacity: 1; }

  /* Same reason as .chip[hidden] in chip.css: this rule sets display, so the
     UA sheet's [hidden] loses and the pencil stayed visible — a link to "#"
     with target="_blank", i.e. a blank tab — on every surface that renders
     the aside before a journey is picked. */
  .journey-info-edit-link[hidden] { display: none; }

  .journey-info-name {
    font-size: var(--text-base);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text);
    margin: 0 0 var(--space-1) 0;
  }

  .journey-info-step-label {
    font-size: var(--text-base);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text);
    margin: 0 0 var(--space-2) 0;
  }

  .journey-info-section { margin-bottom: var(--space-4); }
  .journey-info-section:last-child { margin-bottom: 0; }

  .journey-info-heading {
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-1);
  }

  .journey-info-text {
    color: var(--color-text);
    white-space: pre-line;
    line-height: 1.5;
  }
}