/* P-LENS v2 — persona panels. NIGHT_135 (2026-08-23).
   ---------------------------------------------------
   Every colour is a design token, never a raw hex. That is not tidiness: the
   tokens are where the NIGHT_109 AA ruling lives, and a raw hex here would
   ship a colour nobody measured against the full light-surface matrix
   (memory:aa-color-ruling-full-matrix). Both themes come free as a result.

   Layout targets 390px first. The L2 split-pane collapses to the spec's
   mobile accordion at the same breakpoint the rest of the site uses. */

/* --------------------------------------------------------------------- */
/* Chips                                                                   */
/* --------------------------------------------------------------------- */
.plens-chips {
  margin-bottom: var(--space-md);
}

.plens-chips__prompt {
  margin: 0 0 var(--space-sm);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.plens-chips__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.plens-chip {
  appearance: none;
  cursor: pointer;
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg-elevated);
  color: var(--color-text-secondary);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: 1.3;
  transition: border-color var(--transition-fast), color var(--transition-fast),
              background-color var(--transition-fast);
}

.plens-chip:hover {
  border-color: var(--color-brand-primary);
  color: var(--color-text-primary);
}

/* Focus stays visible for keyboard users; the site's chips are reachable by
   Tab and this is the only state that says where you are. */
.plens-chip:focus-visible {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 2px;
}

.plens-chip--on,
.plens-chip[aria-pressed="true"] {
  border-color: var(--color-brand-primary);
  color: var(--color-brand-primary);
  background: color-mix(in srgb, var(--color-brand-primary) 12%, transparent);
}

/* --------------------------------------------------------------------- */
/* Panel shell                                                             */
/* --------------------------------------------------------------------- */
.plens {
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: var(--color-bg-secondary);
  padding: var(--space-lg);
}

.plens__head {
  margin-bottom: var(--space-md);
}

.plens__title {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: 800;
  color: var(--color-text-primary);
}

.plens--l1 {
  margin-top: var(--space-lg);
}

/* --------------------------------------------------------------------- */
/* Bullet sets                                                             */
/* --------------------------------------------------------------------- */
.plens-set {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* `hidden` is the functional switch (it survives a missing stylesheet); this
   class only exists so a future animation has somewhere to hang. */
.plens-set--off {
  display: none;
}

.plens-bullet {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-sm);
  padding-left: 14px;
  position: relative;
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  line-height: 1.45;
}

.plens-bullet::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-brand-primary);
}

.plens-bullet__text {
  font-weight: 600;
}

/* The source anchor rides with the figure. Quiet, but never absent — every
   number on this site can be traced to the file it came from. */
.plens-bullet__src {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  font-weight: 500;
}

.plens-bullet__src--link {
  color: var(--color-brand-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* A withheld bullet is not a data bullet: no marker, lighter weight, so it
   never reads as a measurement about this employer. */
.plens-bullet--withheld {
  padding-left: 14px;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.plens-bullet--withheld::before {
  background: var(--color-text-tertiary);
  opacity: 0.5;
}

.plens-bullet--withheld .plens-bullet__text {
  font-weight: 400;
}

.plens-closing {
  list-style: none;
  margin-top: var(--space-xs);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  font-style: italic;
}

/* --------------------------------------------------------------------- */
/* L2 — trending split-pane                                                */
/* --------------------------------------------------------------------- */
.plens-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: start;
}

.plens-split__rows {
  min-width: 0;
}

/* Sticky so the detail stays beside the row you clicked on a long list. */
.plens-split__detail {
  min-width: 0;
  position: sticky;
  top: var(--space-lg);
}

.plens-row {
  width: 100%;
  text-align: left;
  appearance: none;
  border: 1px solid transparent;
  border-bottom-color: var(--color-border);
  background: transparent;
  cursor: pointer;
  padding: var(--space-md);
  color: inherit;
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.plens-row:hover {
  background: var(--color-bg-elevated);
}

.plens-row:focus-visible {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: -2px;
}

.plens-row[aria-selected="true"] {
  border-color: var(--color-brand-primary);
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-brand-primary) 8%, transparent);
}

.plens-row__rank {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
  min-width: 1.5rem;
}

.plens-row__name {
  font-weight: 700;
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plens-row__meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
}

.plens-row__main {
  flex: 1;
  min-width: 0;
}

.plens-row__figure {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.plens-detail__name {
  margin: 0 0 var(--space-sm);
  font-size: var(--font-size-lg);
  font-weight: 800;
  color: var(--color-text-primary);
}

.plens-detail__chart {
  margin-bottom: var(--space-md);
}

.plens-detail__chart svg {
  width: 100%;
  height: auto;
  display: block;
}

.plens-detail__more,
.plens-mini__more {
  display: inline-block;
  margin-top: var(--space-md);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-brand-primary);
  text-decoration: none;
}

.plens-detail__more:hover,
.plens-mini__more:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The accordion twin of the detail pane. Hidden on desktop, where the pane
   carries the same content; shown under the row on mobile. */
.plens-row-accordion {
  display: none;
  padding: 0 var(--space-md) var(--space-md);
}

/* --------------------------------------------------------------------- */
/* L3 — homepage mini-panel                                                */
/* --------------------------------------------------------------------- */
.plens--l3 {
  padding: var(--space-md) var(--space-lg);
}

.plens-mini__name {
  margin: 0 0 var(--space-sm);
  font-size: var(--font-size-base);
  font-weight: 800;
  color: var(--color-text-primary);
}

.plens-rotator {
  display: grid;
  gap: var(--space-md);
}

/* --------------------------------------------------------------------- */
/* L4 — list caption                                                       */
/* --------------------------------------------------------------------- */
.plens-caption {
  margin: var(--space-sm) 0 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* --------------------------------------------------------------------- */
/* Mobile — the spec's accordion. 390px is the album's narrow width.        */
/* --------------------------------------------------------------------- */
@media (max-width: 767px) {
  .plens-split {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The right-hand pane collapses; each row carries its own panel beneath it,
     which is what "accordion under the row" means. */
  .plens-split__detail {
    display: none;
  }

  .plens-row-accordion {
    display: block;
  }

  .plens-row-accordion[hidden] {
    display: none;
  }

  .plens {
    padding: var(--space-md);
  }

  .plens-chip {
    padding: 5px 12px;
    font-size: var(--font-size-xs);
  }

  .plens-bullet {
    font-size: var(--font-size-sm);
  }
}

/* A reader who asked for less motion gets none. */
@media (prefers-reduced-motion: reduce) {
  .plens-chip {
    transition: none;
  }
}

/* --------------------------------------------------------------------- */
/* R11 · R12 · R3 — the L3 card (2026-08-23)                              */
/* --------------------------------------------------------------------- */

/* R3: logo beside the name, same macro as every other surface. */
.plens-mini__head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.plens-mini__head img,
.plens-mini__head svg {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  flex-shrink: 0;
  object-fit: contain;
}

.plens-mini__head .plens-mini__name,
.plens-mini__head .plens-detail__name {
  margin: 0;
}

/* R12: whole card clickable WITHOUT nesting interactive content in an anchor.
   The link stays the only <a>; its ::after is stretched over the card. */
.plens-card {
  position: relative;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.plens-card:hover {
  border-color: var(--color-brand-primary);
  background: color-mix(in srgb, var(--color-brand-primary) 5%, var(--color-bg-secondary));
  cursor: pointer;
}

.plens-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* The focus ring belongs to the real link, not to the card, so keyboard
   users land on something that announces itself. */
.plens-card__link:focus-visible {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Anything the reader might select or click INSIDE the card has to sit above
   the stretched overlay, or the overlay eats the interaction. */
.plens-card .plens__body,
.plens-card .plens-mini__head {
  position: relative;
  z-index: 2;
  pointer-events: none;
}

/* R11: footer is ONE row at >=768px — closing line left, link right. */
.plens-card__footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border);
}

.plens-card__closing {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  font-style: italic;
}

.plens-card__link {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-brand-primary);
  text-decoration: none;
  position: relative;
  z-index: 2;
}

@media (min-width: 768px) {
  .plens-card__footer {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-md);
  }
  /* R8: the closing line never wraps on desktop. It shares its row with the
     link now, so this is the constraint that makes R11 safe rather than the
     thing R11 puts at risk. */
  .plens-card__closing,
  .plens-closing {
    white-space: nowrap;
  }
  .plens-card__link {
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* R11: the rotator was carrying card padding sized for a stacked footer. */
.plens--l3 {
  padding: var(--space-md) var(--space-lg) var(--space-md);
}