/* ==========================================================================
   People — what a person's page needs on top of the shared components.

   The student and staff show pages are built almost entirely from components
   that already exist: .list-panel, its bands and the identity band itself from
   line-items.css, .chip and .profile-dot, .action-panel. What is here is only
   what those didn't cover.

   LOAD ORDER — Propshaft sorts logical paths alphabetically, so this file
   loads after main.css and list-blocks.css but BEFORE utilities.css. Every
   selector is scoped under its own component class, which is what keeps
   utilities' element rules (`BUTTON:not(.editor-button)` and friends) from
   taking anything here back on a same-specificity tie.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. LINE-ITEM VARIANTS

   Both of these belong to rows from line-items.css. They live here rather
   than there because that file is imported from the "Line Item" design
   project and a re-sync would take them with it.
   -------------------------------------------------------------------------- */

/* A row with neither meta nor actions — just what it is. .line-item's grid
   drops the action rail for .is-linked and the meta track when there's no
   meta, but nothing collapses it all the way to one track. */
.line-item.is-plain {
  grid-template-columns: minmax(0, 1fr);
}

/* A survey question nobody has answered. Still listed — for staff the gap is
   the useful part — but never as loud as an answer. */
.line-item.is-unanswered .line-item-name {
  color: var(--hierro);
  font-weight: var(--fw-medium);
}


/* --------------------------------------------------------------------------
   2. DISCLOSURE — a fold at the end of a list.

   Reads as one more row until it is opened. Used for the classes somebody was
   in but isn't any more: worth keeping, not worth the height on a student who
   has been here three years.
   -------------------------------------------------------------------------- */

.line-item-disclosure {
  border-top: 1px solid var(--color-border);
}

.line-item-disclosure > summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.875rem var(--space-6);
  list-style: none;
  cursor: pointer;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  line-height: 1.5;
  color: var(--color-link);
}

/* Safari draws its own marker unless both of these are set. */
.line-item-disclosure > summary::-webkit-details-marker,
.line-item-disclosure > summary::marker {
  display: none;
  content: "";
}

.line-item-disclosure > summary:hover {
  background: var(--color-surface-row-hover);
}

.line-item-disclosure > summary:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: -2px;
}

.line-item-disclosure > summary svg {
  flex: none;
  width: 0.875rem;
  height: 0.875rem;
  transition: transform 0.15s linear;
}

.line-item-disclosure[open] > summary svg {
  transform: rotate(90deg);
}

@media (prefers-reduced-motion) {
  .line-item-disclosure > summary svg {
    transition: none;
  }
}

.line-item-disclosure > summary .count {
  font-weight: var(--fw-regular);
  color: var(--color-text-muted);
}

/* The fold's own rows are history, and read a step back from the live ones. */
.line-item-disclosure .line-item-name {
  color: var(--hierro);
  font-weight: var(--fw-medium);
}


/* --------------------------------------------------------------------------
   3. MOBILE
   -------------------------------------------------------------------------- */

@media (max-width: 48rem) {
  /* Every band takes the header's gutter — same rule line-items.css applies
     to .panel-body and .panel-footer. */
  .line-item-disclosure > summary {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
}