/* ==========================================================================
   Two Witness Utilities — the frame's own layout hooks.
   --------------------------------------------------------------------------
   The dress is the Web Design System (static/design-system.css, loaded
   before this file, verbatim). This file holds only what the system
   deliberately does not carry: a handful of layout patterns of this
   house. Every rule lives in the `app` layer, which stacks after the
   system's own layers, so these hooks extend the system without ever
   restyling it.

   The hooks:
   - .tools   the home page's tool rows: a name-and-purpose block on
              the left, the tool's standing on the right
   - .signin  the sign-in page's one narrow, centered card
   - .chat    the chat room: its log of lines, its room code
   ========================================================================== */

@layer app {
  /* --- The home page's tool rows ------------------------------------- */
  .tools li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-1) var(--space-4);
  }

  .tools li > span {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
  }

  .tools li > span:last-child {
    align-items: flex-end;
    text-align: end;
  }

  @media (max-width: 560px) {
    .tools li > span {
      flex-basis: 100%;
    }

    .tools li > span:last-child {
      align-items: flex-start;
      text-align: start;
    }
  }

  /* --- The sign-in page: one narrow card, centered ---------------------- */
  .signin > .card {
    max-width: 26rem;
    margin-inline: auto;
  }

  /* A card form's submit spans the card: the system's button label
     never wraps, so a long label would otherwise push past the
     card's edge on a narrow screen. */
  .card form button[type="submit"] {
    width: 100%;
    white-space: normal;
  }

  /* --- The chat room ---------------------------------------------------
     The log is a plain list of lines in arrival order — no bubbles, no
     decoration. A line's small heading says whose it is; your own
     lines stand to the right, the house's words sit quiet. The room
     code is letter-spaced so it can be read aloud without stumbling. */
  .chat-log {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-height: 50vh;
    overflow-y: auto;
    list-style: none;
    padding-inline: 0;
  }

  .chat-log li {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
  }

  .chat-log li > span {
    overflow-wrap: anywhere;
  }

  .chat-log li.mine {
    align-items: flex-end;
    text-align: end;
  }

  .room-code {
    letter-spacing: 0.15em;
  }
}