/* Layout the shared design system does not offer, and nothing else. The look
   of every page comes from /assets/design-system/levelwork.css. A rule in
   here may place and size things. It sets no colour, no typeface and no size
   of type, and scripts/check-design-system.sh fails for one that tries. */

/* The conversation pages are exactly as tall as the window, at every width:
   the header stays put and the log scrolls inside. The height is the dynamic
   one, so the bar of a phone browser sliding in and out does not push the
   answer field off the screen, and the min-height the body carries for every
   other page is taken back, because 100vh is taller than that. */
.window-fit {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

/* On the .chat grid: takes the height the header leaves and hands it to
   its rows, so that the columns have an edge to scroll against. */
.window-fit__fill {
  flex: 1 1 auto;
  min-height: 0;
}

/* Side by side: one row, the conversation and the profile each scroll in
   their own column. */
@media (min-width: 860px) {
  .window-fit__fill {
    grid-template-rows: minmax(0, 1fr);
  }
}

/* A phone. Everything below this line holds for narrow screens only. */
@media (max-width: 859.98px) {
  /* All five tabs fit a phone without scrolling. */
  #org-nav { gap: 8px 14px; }

  /* Nothing to tap is lower than 44px. Links inside a sentence are left
     alone. */
  .btn,
  .chip,
  .segmented > button,
  .footer a {
    min-height: 44px;
  }

  .btn--text {
    min-width: 44px;
  }

  .segmented > button {
    min-width: 44px;
  }

  .footer a {
    display: inline-flex;
    align-items: center;
  }

  .footer__links {
    align-items: center;
  }

  /* The links are 44px high now, so the footer gives the height back. */
  .footer {
    padding-block: 10px;
  }

  /* The conversation: the profile is a strip above the log, the log takes
     what is left, the answer field stands at the lower edge. The footer has
     no room here. The pages before and after the conversation show it. */
  .window-fit > .footer {
    display: none;
  }

  .window-fit__fill {
    grid-template-rows: auto minmax(0, 1fr);
  }

  /* The strip: what has been captured, and a button that opens the list
     under it. Open, the list takes the place of the conversation and
     scrolls, and the strip with its button stays where it was. */
  .window-fit__fill--list {
    grid-template-rows: minmax(0, 1fr);
  }

  .window-fit__fill--list > .chat__main {
    display: none;
  }

  .window-fit__panel {
    order: -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: 8px;
    align-items: center;
    overflow: hidden;
    padding: 8px 16px;
    border-top-width: 0;
    border-bottom: 1px solid var(--lw-line);
  }

  .window-fit__panel > .window-fit__toggle {
    margin-top: 0;
  }

  .window-fit__inventory {
    grid-column: 1 / -1;
    align-self: stretch;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: 8px;
  }

  .window-fit__toggle[aria-expanded='false'] + .window-fit__inventory {
    display: none;
  }

  /* A captured role moves the strip once, so that it is seen. */
  .window-fit__noticed {
    animation: var(--animate-pop);
  }

  /* The note above the log is one line until it is opened. */
  /* And once the first answer is in, it leaves: the log needs the line, and
     the page before this one has said what this is. */
  .window-fit__fill--begun .window-fit__note-box {
    display: none;
  }

  .window-fit__note {
    padding-block: 0;
  }

  .window-fit__note-toggle {
    min-height: 44px;
    text-align: left;
  }

  .window-fit__note-toggle[aria-expanded='false'] ~ .window-fit__note-text {
    display: none;
  }

  .window-fit__note-text {
    grid-column: 1 / -1;
    padding-bottom: 14px;
  }

  /* Opened, it may be longer than the screen. Then it scrolls, and the
     answer field keeps its place. */
  .window-fit__note-box {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-top: 8px;
  }

  .window-fit__log {
    overscroll-behavior: contain;
    padding-top: 14px;
  }

  /* The areas to tap for the first answer, two to a row. */
  .window-fit__picks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 8px;
  }

  /* The quick answers: the role on a line of its own, the three answers
     under it at equal width. */
  .window-fit__compose .quick__row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px 8px;
  }

  .window-fit__compose .quick__name {
    grid-column: 1 / -1;
  }

  .window-fit__compose .quick__row > .chip {
    justify-content: center;
    text-align: center;
  }

  /* However many there are, they never push the answer field out. */
  .window-fit__compose .quick {
    max-height: 45dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* The send button stands beside the field and not under it. A keyboard
     that covers the lower part of the screen then covers neither. */
  .window-fit__compose {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 8px;
    align-items: end;
  }

  .window-fit__compose > * {
    grid-column: 1 / -1;
  }

  .window-fit__compose > .window-fit__field {
    grid-column: 1;
  }

  .window-fit__compose > .chat__actions {
    display: contents;
  }

  .window-fit__send {
    grid-column: 2;
  }

  .window-fit__more {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 11px;
  }

  .window-fit__more > :not([role='status']),
  .window-fit__more > [role='status']:not(:empty) {
    margin-top: 8px;
  }

  /* Outside the conversation: a row of buttons that would break in the
     middle becomes a column of buttons as wide as the box. */
  .share__actions > .btn {
    flex: 1 1 100%;
  }

  .share__actions > .btn--sm {
    flex: 1 1 0;
  }

  .form > .btn,
  .offer > .btn {
    width: 100%;
  }
}

/* A phone of ordinary height: two quick answers at a time, not three. The
   third comes up when one of the two is answered. */
@media (max-width: 859.98px) and (max-height: 780px) {
  .window-fit__compose .quick__row:nth-of-type(n + 3) {
    display: none;
  }
}

/* A phone with little height left: held sideways, or a keyboard that takes
   its room out of the page. The strip, the note and the quick answers step
   aside, so that the question and the answer field are what remains. */
@media (max-width: 859.98px) and (max-height: 560px) {
  .window-fit__fill:not(.window-fit__fill--list) > .window-fit__panel,
  .window-fit__note-box,
  .window-fit__compose .quick {
    display: none;
  }
}

/* The pages move focus to main after a load, for screen readers. That is not
   a keyboard stop, so it shows no frame. */
main[tabindex='-1']:focus,
main[tabindex='-1']:focus-visible {
  outline: none;
}

/* An address is one long word: break it anywhere, not in the middle of a page. */
.break-all {
  overflow-wrap: anywhere;
  word-break: normal;
}

select.select {
  max-width: 100%;
  text-overflow: ellipsis;
}