/* ==========================================================================
   MESSAGE FEED — the chronological stream on a class's page and a student's.

   Every value resolves through variables.css. Nothing here invents a colour,
   radius, shadow or type size that isn't already a token.

   LOAD ORDER — `stylesheet_link_tag :app` sorts logical paths alphabetically,
   so this file loads BEFORE forms, line-items, list-blocks, main, record-search
   and utilities. Anything that has to beat a rule in one of those must win on
   specificity, not on source order. That is why every selector below is scoped
   under .message / .feed-day / .unsent-messages / .feed-start rather than
   written bare — a plain `.feed-day-chip` would lose to main.css's `h2`, and a
   plain `.message-actions > * + *` would lose to utilities.css's
   `A.button + FORM.button_to`.

   Structure:

     <div class="message-feed">
       <section class="feed-day">
         <h2 class="feed-day-chip chip">Today</h2>
         <article class="message" id="course_post_12">
           <header class="message-header">…dot, author, time, chip, actions…</header>
           <div class="message-body lexxy-content">…</div>
           <ul class="message-documents">…</ul>         one row per document
           <footer class="message-footer"></footer>   reserved
         </article>
       </section>
     </div>
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. DAY GROUPS — a chip per day, separating one day's messages from the next.
   -------------------------------------------------------------------------- */

.feed-day + .feed-day {
  margin-top: var(--space-8);
}

/* Sticky, so that on a long scroll the reader always knows which day they are
   looking at. It is the whole reason the chips exist — quick scanning — and a
   chip that scrolls away stops answering the question halfway down a day. */
.feed-day .feed-day-chip {
  position: sticky;
  top: var(--space-2);
  z-index: 2;

  display: block;
  width: fit-content;
  margin: 0 auto var(--space-6);
  padding: 0.375rem var(--space-4);

  background: var(--nieve);
  border: 1px solid var(--brisa);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-thumbnail);

  font-family: var(--font-family-base);
  font-size: var(--fs-meta);
  font-weight: var(--fw-bold);
  line-height: 1.6;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--crepusculo);
}


/* --------------------------------------------------------------------------
   2. MESSAGE — one card per message.
   -------------------------------------------------------------------------- */

.message {
  background: var(--nieve);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: 1.25rem var(--space-6);

  /* Clears the sticky day chip when a mailed link jumps straight to a message
     partway down the feed. */
  scroll-margin-top: 4rem;
}

.message + .message {
  margin-top: var(--space-6);
}

/* The message a notification email pointed at. A held outline rather than a
   fading flash — someone arriving from an email may take a moment to look up,
   and an animation that has already finished tells them nothing. */
.message:target {
  outline: 3px solid var(--autobus-escolar);
  outline-offset: 4px;
}


/* --- Header and footer ----------------------------------------------------

   A message card's header and footer are <header> and <footer> elements, and
   main.css styles those bare — the site header carries the schoolbus-yellow
   page rule, the site footer the wheat band. Both were landing inside every
   message card. Reset them here, where the class selectors outrank the element
   ones no matter which file loads last.
   -------------------------------------------------------------------------- */

.message .message-header,
.message .message-footer {
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font-size: inherit;
  text-align: left;
}

.message .message-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.message .message-author {
  margin: 0;
  font-weight: var(--fw-bold);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--vn-heading);
}

.message .message-time {
  font-size: var(--fs-meta);
  line-height: 1.5;
  color: var(--color-text-muted);
}

.message .message-actions {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* utilities.css spaces adjacent buttons with margin-left; the flex gap already
   does it here. Mirrors that file's own selector list one level deeper so these
   win on specificity rather than on order — which this file does not have. */
.message .message-actions A.button + A.button,
.message .message-actions A.button + FORM.button_to,
.message .message-actions FORM.button_to + FORM.button_to,
.message .message-actions > * + * {
  margin-left: 0;
}


/* --- Body ----------------------------------------------------------------- */

/* Action Text output — the author controls the tags, so the reset has to be
   about first and last child margins rather than about any particular element. */
.message .message-body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  text-wrap: pretty;
}

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

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

/* A long URL pasted into a message must not push the card wider than the
   column it sits in. */
.message .message-body a {
  overflow-wrap: anywhere;
}


/* --- Documents: a list inside the card ------------------------------------
   One row per document, on the mist band the single attachment card used to
   be. One list style for any count — a message with one document is a one-row
   list, not a card — so a feed mixing one and five reads as one thing.

   The same row is the composer's attached list (document-picker.css), where
   Remove stands where Download does here. Keep the two in step. */

.message .message-documents {
  margin: var(--space-4) 0 0;
  padding: var(--space-1) var(--space-4);
  list-style: none;
  background: var(--niebla);
  border-radius: var(--radius-lg);
}

.message-document {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) 0;
}

.message-document + .message-document {
  border-top: 1px solid color-mix(in srgb, var(--crepusculo) 12%, transparent);
}

/* The Library's thumbnail at row scale — a supporting detail here, not the
   subject of the row the way it is on a document card.

   The drop shadow goes but the paper edge stays. This slot sits on the mist
   band rather than on white, so the sheet already separates from what is
   behind it; the inner hairline is doing a different job, which is holding
   the edge of a rendered page against the white border around it. */
.message-document .card-thumbnail {
  width: 3.5rem;
  height: 2.5rem;
  box-shadow: var(--shadow-thumbnail-edge);
}

/* Scaled with the slot. The Library's 46px rule under a 3.5rem-wide sheet
   would run edge to edge. */
.message-document .card-thumbnail-label {
  gap: 0.1875rem;
  font-size: 0.5625rem;
}

.message-document .card-thumbnail-label::after {
  width: 1.375rem;
}

.message-document .message-document-body {
  min-width: 0;
}

.message-document .message-document-title {
  margin: 0;
  font-weight: var(--fw-bold);
  font-size: var(--fs-small);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.message-document .message-document-meta {
  margin: 0;
  font-size: var(--fs-meta);
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* The 38px rail button line-items.css and record-search.css draw, not the
   filled .button — five filled buttons in one message shout. Written for the
   <a> the feed uses and the <button> the composer uses, and scoped past
   utilities.css's BUTTON fill the way those files do it. */
.message-document .message-document-action,
.message-document BUTTON:not(.editor-button).message-document-action {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 0.9375rem;
  border: 1px solid var(--brisa);
  border-radius: var(--radius-md);
  background: var(--nieve);
  color: var(--color-link);
  font-family: var(--font-family-base);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: none;
  cursor: pointer;
  transition: background-color 0.2s linear;
}

.message-document .message-document-action:hover,
.message-document BUTTON:not(.editor-button).message-document-action:hover {
  background: var(--niebla);
  color: var(--color-link);
}

/* Remove, in the composer: dusk rather than link blue, so the one destructive
   verb on the row does not dress as the primary one. */
.message-document .message-document-action.secondary,
.message-document BUTTON:not(.editor-button).message-document-action.secondary {
  color: var(--crepusculo);
}


/* --- Footer: reserved ------------------------------------------------------
   Empty by design. Reactions or a reply count land here without re-cutting the
   card above them. It collapses to nothing while unused.
   -------------------------------------------------------------------------- */

.message .message-footer:empty {
  display: none;
}


/* --------------------------------------------------------------------------
   2b. SINGLE MESSAGE — the show page, which draws one card and nothing else.

   The way back to the feed. It sits under the card rather than in the action
   panel because it is navigation, not a verb — and the secondary nav's own
   "Messages" item is marked selected on this page, so it does not read as
   somewhere still to go.
   -------------------------------------------------------------------------- */

.single-message-return {
  margin: var(--space-6) 0 0;
  text-align: center;
  font-size: var(--fs-small);
  line-height: 1.6;
}


/* --------------------------------------------------------------------------
   3. UNSENT — drafts and scheduled messages, above the feed, staff only.

   Wheat and schoolbus rather than the page's blues, because this panel is the
   one thing on the page that nobody outside the staff room can see. It should
   not look like part of the stream.
   -------------------------------------------------------------------------- */

.unsent-messages {
  margin-bottom: var(--space-8);
  padding: var(--space-4) var(--space-4) var(--space-6);
  background: var(--trigo);
  border: 2px dashed var(--autobus-escolar);
  border-radius: var(--radius-xl);
}

.unsent-messages .unsent-messages-heading {
  margin: 0;
  font-family: var(--font-family-base);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--chocolate);
}

.unsent-messages .unsent-messages-notice {
  margin: var(--space-1) 0 var(--space-4);
  font-size: var(--fs-meta);
  line-height: 1.5;
  color: var(--chocolate);
}


/* --------------------------------------------------------------------------
   4. FEED START — the foot of the feed, past which there is nothing older.
   -------------------------------------------------------------------------- */

.feed-start {
  margin-top: var(--space-8);
  text-align: center;
}

.feed-start .feed-start-chip {
  display: inline-block;
  margin: 0;
  padding: 0.375rem var(--space-4);

  background: var(--nieve);
  border: 1px solid var(--brisa);
  border-radius: var(--radius-pill);

  font-size: var(--fs-meta);
  font-weight: var(--fw-bold);
  line-height: 1.6;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--crepusculo);
}

.feed-start .feed-start-description {
  max-width: 42rem;
  margin: var(--space-4) auto 0;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--color-text-muted);
  text-wrap: pretty;
}


/* --------------------------------------------------------------------------
   5. MOBILE — most students read this on a phone.
   -------------------------------------------------------------------------- */

@media (max-width: 48rem) {
  .message {
    padding: var(--space-4);
  }

  /* The actions drop below the author line rather than squeezing beside it;
     margin-left:auto on a wrapped row would strand them mid-gap. */
  .message .message-actions {
    margin-left: 0;
    flex-basis: 100%;
  }

  /* The three columns hold; the title wraps rather than the button dropping
     below it, so the band gives the title column back what it can. The
     button grows to the 44px touch floor line-items.css keeps. */
  .message .message-documents {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }

  .message-document {
    gap: var(--space-3);
  }

  .message-document .message-document-action,
  .message-document BUTTON:not(.editor-button).message-document-action {
    height: auto;
    min-height: 44px;
  }
}