/* A position locks when its first candidate is invited (Position.lockedAt).
   The banner says so on every page of the position; on the three pages that
   edit it (brief, criteria, assessment) the page root's
   data-position-locked="1" takes the editing controls away. The database
   refuses the changes regardless — this only stops the page offering them.

   Buttons are hidden rather than disabled: a page full of greyed-out controls
   reads as broken, and none of them will ever work on this position again.
   What stays is what reading needs: tabs, the preview, the banner's own
   Duplicate link. Form controls and the shadow-DOM components are handled by
   position-lock.js, which CSS cannot reach. */

@layer components {
  .position-lock-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    border-radius: 10px;
    border-inline-start-width: 3px;
    border-inline-start-style: solid;
    margin-block-end: var(--space-lg);

    > svg {
      flex: none;
      inline-size: 20px;
      block-size: 20px;
      margin-block-start: 2px;
    }

    .position-lock-banner__body {
      flex: 1;
      min-inline-size: 0;
      text-wrap: pretty;

      p {
        margin: 0;
        font-size: var(--fs-small);
        line-height: 1.5;
      }
    }

    .position-lock-banner__lead {
      display: block;
      font-weight: 600;
      margin-block-end: var(--space-xs);
    }

    .position-lock-banner__action {
      flex: none;
      align-self: center;
      white-space: nowrap;
    }

    @media (width < 640px) {
      flex-wrap: wrap;

      .position-lock-banner__action {
        inline-size: 100%;
        text-align: center;
      }
    }
  }

  :is(position-brief-page, simulation-story-page, eval-criteria-page)[data-position-locked='1'] {
    /* !important because this is a state that has to beat every component's
       own display: page stylesheets (eval-criteria.css among them) set display
       on their buttons outside any layer, and an unlayered declaration wins
       over any layered one that is not important. */
    button:not(.stage2-tab, .preview-simulation-btn),
    .editable-trigger,
    lineage-banner {
      display: none !important;
    }
  }

  talent-management-page[data-position-locked='1'] {
    /* The Edit links lead to pages that are read-only now; the tabs still
       show everything. */
    lineage-banner,
    .detail-edit-link,
    .template-edit-hint,
    a.section-head-action[href$='/criteria'],
    [data-bar-set],
    .cohort-bar-btn {
      display: none !important;
    }

    [data-bar-handle] {
      pointer-events: none;
    }
  }
  /* Before the lock: a warning at the top of the send panel. */
  .invite-lock-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    margin: 0 0 var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border: 1px solid;
    border-radius: var(--radius-md);
    font-size: var(--fs-xsmall);
    line-height: 1.5;
    text-wrap: pretty;

    > svg {
      flex: none;
      margin-block-start: 2px;
    }

    b {
      font-weight: var(--fw-semibold);
    }
  }
}

@layer theme {
  .position-lock-banner {
    background: var(--surface-elevated);
    border-inline-start-color: var(--accent-primary);
    color: var(--text-secondary);

    > svg {
      color: var(--accent-primary);
    }

    .position-lock-banner__lead {
      color: var(--text-primary);
    }
  }

  .invite-lock-notice {
    background: oklch(from var(--color-warning) l c h / 0.08);
    border-color: oklch(from var(--color-warning) l c h / 0.28);
    color: var(--text-secondary);

    > svg {
      color: var(--color-warning);
    }

    b {
      color: var(--text-primary);
    }
  }
}