/* ==========================================================================
   Invitations — the two surfaces a class's sign-up link lives on.

   A feature file rather than a component file, the way feed.css is: the panel
   and the projector screen are the same link at two distances, and splitting
   them would only mean reading both to change either.

     1. .share-panel   the class sign-up block at the top of the invitations
                       page, in its three states
     2. .present       the full-screen QR page, on layouts/present.html.erb
     3. .invite-*      the two rules one invitation's own page adds

   LOAD ORDER AND SPECIFICITY. Propshaft sorts logical paths alphabetically, so
   this file loads after forms.css and before line-items, list-blocks, main and
   utilities. Everything here that has to beat one of those wins on
   specificity, never on order — utilities.css's BUTTON:not(.editor-button) is
   (0,1,1), so the button rules below stay scoped under a container class. The
   note at the top of list-blocks.css has the long version.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. SHARE PANEL

   The mist callout, the same surface as nav.secondary-nav and .action-panel:
   the one thing the whole class shares, set apart from the white cards below
   it, which are each about one person.

     <section class="share-panel">          <!-- .is-off drops the QR column -->
       <div class="share-qr">…</div>
       <div>
         <div class="share-head"><h2>…</h2><span class="chip">…</span></div>
         <p class="share-lede">…</p>
         <div class="form-item">…copy row…</div>
         <div class="share-actions">…</div>
       </div>
     </section>
   -------------------------------------------------------------------------- */

.share-panel {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-6);
  align-items: start;
  padding: var(--space-6);
  background: var(--callout-box-background-color);
  border: 2px solid var(--nieve);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}

/* No link to show — either there is no record, or it is paused and the code
   is deliberately withheld. Either way the first column has nothing in it. */
.share-panel.is-off {
  grid-template-columns: 1fr;
}

/* White mount, mist behind it: the same treatment .card-thumbnail gives a
   file preview. The white matters beyond looks — a QR needs a quiet margin
   around it or a phone camera struggles to find the edges. */
.share-qr {
  width: 10.5rem;
  height: 10.5rem;
  display: grid;
  place-items: center;
  padding: var(--space-2);
  background: var(--nieve);
  border: 3px solid var(--nieve);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-thumbnail);
}

.share-qr svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* The panel's code is a link to the projector view. Nothing about a QR code
   says "clickable" on its own, so the affordance is the cursor plus the deeper
   shadow on hover — the same lift .card gets, borrowed here because the code
   already sits on the thumbnail shadow. Kept off the shared .share-qr rule so
   the selector only ever matches when the element really is an anchor. */
A.share-qr {
  transition: box-shadow 0.2s linear;
  cursor: zoom-in;
}

A.share-qr:hover {
  box-shadow: var(--shadow-popover);
}

.share-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.share-head h2 {
  margin: 0;
}

/* One size down from body copy: this is the panel's caption, not prose. */
.share-lede {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-small);
  line-height: 1.6;
}

.share-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

/* utilities.css puts margin-left on adjacent buttons and button_to forms; the
   flex gap already spaces this row. Mirrors its selector list one level
   deeper so it wins on specificity rather than order. */
.share-actions A.button + FORM.button_to,
.share-actions FORM.button_to + FORM.button_to,
.share-actions > * + * {
  margin-left: 0;
}

/* Delete is exiled right, the way .action-panel exiles its destructive
   action — never adjacent to the button somebody actually came here for.

   BUTTON.danger, not .button.danger: button_to puts the classes it is given
   on a bare <button>, which takes its look from utilities.css's element
   selector and never carries a `button` class. Only a link_to does. The flex
   item is the wrapping form, so that is what the auto margin has to land on.

   It has to come AFTER the reset above, which lands on the same element at
   the same specificity — :has() carries the weight of its argument, so both
   selectors are (0,3,2) and source order is all that separates them. */
.share-actions A.button.danger,
.share-actions FORM.button_to:has(BUTTON.danger) {
  margin-left: auto;
}

/* The gap between the panel and the list below it. Bigger than the gap
   between cards, because it separates two kinds of thing rather than two
   rows of one kind. */
.section-gap {
  margin-top: var(--space-8);
}

/* The quiet line under the list: the accepted count, and on the accepted
   list itself the note about what it does not cover. Indented to the card's
   content edge, the way .card-list-summary is. */
.accepted-note {
  margin: var(--space-4) 0 0;
  padding: 0 var(--space-6);
  font-size: var(--fs-meta);
  line-height: 1.6;
  color: var(--color-text-muted);
}


/* --------------------------------------------------------------------------
   2. PRESENT — the projector page.

   Read from the back of a room, so everything here is scaled for distance and
   nothing competes with the code. layouts/present.html.erb supplies no header,
   nav or footer.
   -------------------------------------------------------------------------- */

/* The layout has no <header> to carry the schoolbus rule, so the page takes
   it directly — enough of the brand to place the screen, and nothing that
   costs the code any room. */
.present-body {
  min-height: 100vh;
  background: var(--nieve);
}

.present {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  border-top: var(--page-marginal-border);
}

.present-bar {
  display: flex;
  justify-content: flex-end;
  padding: var(--space-4) var(--space-6);
}

/* Off to the side and outlined rather than filled: the way out of the screen
   should be findable without being the brightest thing on a wall. */
.present-close {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1.5px solid var(--brisa);
  border-radius: var(--radius-md);
  background: var(--nieve);
  color: var(--color-link);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  text-decoration: none;
}

.present-close:hover {
  border-color: var(--color-link-hover);
  color: var(--color-link-hover);
}

.present-stage {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  padding: 0 var(--space-8) var(--space-8);
  text-align: center;
}

/* Bigger than --fs-h1, which is sized for someone at a desk. Capped in ch so
   a long class name breaks into readable lines instead of one thin ribbon. */
.present-title {
  margin: 0;
  max-width: 22ch;
  font-family: var(--font-family-display);
  font-weight: var(--fw-black);
  font-size: 3.5rem;
  line-height: 1.15;
  color: var(--vn-heading);
  text-wrap: balance;
}

.present-qr {
  width: 22rem;
  height: 22rem;
}

.present-qr svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Not decoration: plenty of people photograph the screen instead of scanning
   it and then have to type this in. Breaking anywhere beats overflowing. */
.present-url {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.4;
  color: var(--color-text);
  word-break: break-all;
}

.present-url .lead {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}


/* --------------------------------------------------------------------------
   3. DETAIL PAGE — one invitation, on invites/show and staff_invites/show.

   Almost everything the page needs already exists: .list-panel and the
   identity band from line-items.css, .chip from list-blocks.css, the copy row
   from copy-button.css, .action-panel, .status-banner. Only these two rules
   are new.
   -------------------------------------------------------------------------- */

/* The invitation's name is an email address — the one heading in the app with
   no spaces in it to break at. .identity-name carries people's names and
   document titles, which wrap on their own, so the rule is scoped here rather
   than added there. */
.invite-identity .identity-name {
  overflow-wrap: anywhere;
}

/* The three things worth knowing before sending a live invitation on: where it
   went, that it is bound to that address, and what to do when the address is
   wrong. A list rather than a paragraph — the third line is a recovery step
   somebody scans for, not prose they read through. */
.invite-notes {
  margin: 0 0 var(--space-4);
  padding-left: 1.25rem;
  font-size: var(--fs-small);
  line-height: 1.6;
}

.invite-notes li + li {
  margin-top: var(--space-2);
}


/* --------------------------------------------------------------------------
   4. MOBILE
   -------------------------------------------------------------------------- */

@media (max-width: 48rem) {
  .share-panel,
  .share-panel.is-off {
    grid-template-columns: 1fr;
    padding: var(--space-4);
  }

  /* The code goes as wide as the panel allows rather than staying a
     thumbnail — a phone is also how a teacher shows this to one student
     across a table. */
  .share-qr {
    width: 100%;
    height: auto;
    max-width: 15rem;
    aspect-ratio: 1;
    margin: 0 auto;
  }

  /* Stacked, like .card-actions — a wrapped row of part-width buttons reads
     as noise at phone width. */
  .share-actions {
    flex-direction: column;
    align-items: stretch;
  }

  /* Both spellings of a button, the way .card-actions lists them: A.button
     for a link_to, and the bare element for button_to's own <button>. */
  .share-actions A.button,
  .share-actions BUTTON,
  .share-actions FORM.button_to {
    display: block;
    width: 100%;
    text-align: center;
  }

  .share-actions A.button.danger,
  .share-actions FORM.button_to:has(BUTTON.danger) {
    margin-left: 0;
  }

  .accepted-note {
    padding: 0 var(--space-4);
  }

  .present-title {
    font-size: 2.25rem;
  }

  .present-qr {
    width: 100%;
    max-width: 18rem;
    height: auto;
    aspect-ratio: 1;
  }

  .present-url {
    font-size: var(--fs-body);
  }
}