/* ==========================================================================
   Class details page — the mini dashboard at courses#show.

   Two parts, in the order they appear on the page:

     1. The lede and the status banner under the title.
     2. The attendance grid, which is deliberately plain until we know how
        those records are really used.

   The panel bands this page introduced — .panel-body, .panel-footer,
   .panel-empty, .panel-actions and the .line-item.is-linked modifier — are no
   longer here. The attendance pages picked them up, which was the test this
   file's own note set for them, so they moved upstream into line-items.css
   beside the .list-panel they extend.

   LOAD ORDER — `stylesheet_link_tag :app` sorts logical paths alphabetically,
   so this file loads BEFORE feed, line-items, list-blocks, main and utilities.
   Everything here that has to beat one of those wins on specificity: a class
   selector (0,1,0) over main.css's bare `a` (0,0,1).
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. HEADER — the description, and the banner that only some classes wear.
   -------------------------------------------------------------------------- */

/* The class's own description, straight under the title with no label on it.
   One step up from body copy, and capped: a long description that ran the
   full content width would out-measure every panel below it. */
.course-lede {
  margin: 0 0 var(--space-6);
  max-width: 58ch;
  font-size: var(--fs-h4);
  line-height: 1.6;
  color: var(--color-text);
}

/* Archived, or not yet visible. Wheat and schoolbus — the pair .chip.highlight
   already uses for "worth a second look" — rather than the alert palette:
   neither state is an error, and both are states a teacher chose.

   Informational only, and deliberately so. Unarchiving lives in the action
   panel at the foot of the same page, and `visible` is only editable on the
   settings form, so a button here would either duplicate one or invent a
   route for a checkbox. */
.status-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin: 0 0 var(--space-6);
  padding: var(--space-4) 1.25rem;
  background: var(--trigo);
  border: 1px solid var(--autobus-escolar);
  border-radius: var(--radius-lg);
  color: var(--chocolate);
}

.status-banner svg {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.125rem;
}

.status-banner p {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.6;
}

.status-banner .status-banner-title {
  display: block;
  font-weight: var(--fw-bold);
}

/* Chocolate, not link-blue: the banner is one block of colour and a blue link
   inside it reads as a button that isn't there. */
.status-banner a {
  color: var(--chocolate);
  text-decoration: underline;
}

.status-banner a:hover {
  color: var(--tomate);
}


/* --------------------------------------------------------------------------
   2. ATTENDANCE GRID — a date and a tally, and nothing else yet.
   -------------------------------------------------------------------------- */

.attendance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: var(--space-3);
}

.attendance-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--carbon);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  line-height: 1.4;
  text-decoration: none;
}

.attendance-tile:hover {
  background: var(--color-surface-row-hover);
  border-color: var(--brisa);
  color: var(--color-link);
}

/* The tally is data, not a status — the plain mist chip, never highlight. */
.attendance-tile .chip {
  font-weight: var(--fw-regular);
}