/* ==========================================================================
   Attendance records — the index of a class's sessions, and one session's
   own page.

   Two components and a handful of pieces:

     1. The stat — a percentage over its tally. It leads the index card from
        the .card-media slot, and closes the detail page's panel header.
     2. The two columns of people, one row per student, on the detail page.
     3. The note body, and the byline under the detail page's title.

   Everything else on both pages is already in the system: .card and .chip
   from list-blocks.css, the .list-panel and its bands — header, body, the
   empty notice — from line-items.css, and the closing .action-panel.

   LOAD ORDER — `stylesheet_link_tag :app` sorts logical paths alphabetically,
   so this file loads BEFORE course-dashboard, line-items, list-blocks, main
   and utilities. Nothing here relies on source order: every rule either names
   a class that exists nowhere else, or is a compound that outranks the rule
   it has to beat (`.card.attendance-card` at (0,2,0) over list-blocks'
   `.card`, `.list-panel-header .attendance-stat` over the bare stat).
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. THE STAT — "60%" over "6 of 10".

   Recoleta black, the display face the headings use, so the number reads as a
   heading for the record rather than as a figure in a table.
   -------------------------------------------------------------------------- */

.attendance-stat {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 5.5rem;
}

.attendance-stat-value {
  font-family: var(--font-family-display);
  font-weight: var(--fw-black);
  font-size: 2.25rem;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--vn-heading);
  font-variant-numeric: tabular-nums;
}

.attendance-stat-label {
  margin-top: var(--space-1);
  font-size: var(--fs-meta);
  line-height: 1.4;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* The meter is the only part of the breakdown that survives the card not
   carrying the students themselves. Schoolbus over mist is the pair the
   profile dot already wears, so a filled bar reads as people rather than as
   progress towards something. */
.attendance-meter {
  margin-top: var(--space-2);
  width: 100%;
  height: 0.375rem;
  border-radius: var(--radius-pill);
  background: var(--niebla);
  overflow: hidden;
}

.attendance-meter-fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--autobus-escolar);
}


/* --------------------------------------------------------------------------
   2. THE INDEX CARD — the stat in the media slot.

   Where the profile dot sits on a person card and the thumbnail on a
   document, so a column of records lines its numbers up on the left edge and
   the dates stay the reading order.
   -------------------------------------------------------------------------- */

.card.attendance-card {
  align-items: center;
}

.card.attendance-card .card-media {
  width: 6.5rem;
}

/* Fixed width, not shrink-to-fit: otherwise "100%" draws a wider meter than
   "60%" does, and the bars stop being comparable down the column. */
.card.attendance-card .attendance-stat {
  width: 100%;
  min-width: 0;
}


/* --------------------------------------------------------------------------
   3. THE DETAIL PAGE
   -------------------------------------------------------------------------- */

/* The line under the title: which class this was, and who recorded it. */
.record-byline {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-6);
  font-size: var(--fs-meta);
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* The panel header's right-hand slot — where a panel's button would sit.
   Bigger here than on a card: it is the one number the page is about. */
.list-panel-header .attendance-stat {
  align-items: flex-end;
  min-width: 0;
}

.list-panel-header .attendance-stat .attendance-stat-value {
  font-size: 3rem;
}

.attendance-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  align-items: start;
}

/* A column heading is the group label plus a mark. Marking the headings is
   what lets both lists stay at full strength: fading the absent names would
   collide with the muted treatment that means "no longer in this class". */
.attendance-column-label {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-meta);
  font-weight: var(--fw-bold);
  line-height: 1.4;
  color: var(--vn-heading);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.attendance-column-label svg {
  flex: none;
  width: 1rem;
  height: 1rem;
}

/* Absent takes the muted mark, present the heading's own colour. Only the
   marks differ — the names in both lists stay at full strength. */
.attendance-column-label.is-absent svg {
  color: var(--color-text-muted);
}

.attendance-column-label .count {
  margin-left: auto;
  font-weight: var(--fw-regular);
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-text-muted);
}

.attendance-people {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.attendance-person {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.attendance-person-name {
  min-width: 0;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  color: var(--color-text);
}

/* Someone who has left the class keeps the name the record stored, but not
   the schoolbus ring — the yellow is what marks a current member everywhere
   else in the app. */
.attendance-person.is-former .profile-dot {
  border-color: var(--color-border);
  background: var(--color-surface-row-hover);
  color: var(--color-text-muted);
}

.attendance-person.is-former .attendance-person-name {
  font-weight: var(--fw-regular);
  color: var(--color-text-muted);
}

.attendance-person-note {
  font-weight: var(--fw-regular);
  font-size: var(--fs-meta);
  color: var(--color-text-muted);
}

/* Action Text output, so the reset is about first and last child margins
   rather than any particular element — same as .message-body in feed.css. */
.lesson-note-body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  max-width: 68ch;
  text-wrap: pretty;
}

.lesson-note-body > :first-child { margin-top: 0; }
.lesson-note-body > :last-child  { margin-bottom: 0; }

.lesson-note-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.lesson-note-body a {
  overflow-wrap: anywhere;
}


/* --------------------------------------------------------------------------
   4. MOBILE — the same 48rem the rest of the app stacks at.
   -------------------------------------------------------------------------- */

@media (max-width: 48rem) {
  .attendance-columns {
    grid-template-columns: minmax(0, 1fr);
  }

  /* One column now, so the two groups need a rule between them rather than a
     gutter. The second heading's own top border does that work. */
  .attendance-columns > * + * {
    margin-top: var(--space-2);
  }

  /* The header is a two-item row that no longer fits on one line: the stat
     drops under the heading and squares up with it on the left. */
  .list-panel-header {
    flex-wrap: wrap;
  }

  .list-panel-header .attendance-stat {
    align-items: flex-start;
  }

  .list-panel-header .attendance-stat .attendance-stat-value {
    font-size: 2.5rem;
  }

  /* The card puts the percentage and the note chip on one row above the date,
     so a long date never has to share a line with the number. */
  .card.attendance-card {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "media aside"
      "body  body"
      "detail detail";
    align-items: start;
    row-gap: var(--space-3);
  }
}