/* The demo's own strip and dialogs. The content policy allows style files, not style attributes, so everything is here. */
:root {
  /* The apps' tokens on purpose (the same firm), plus the strip's dark ground and one tape colour, so the bar never reads as part of an app. */
  --demo-ground: #f6f7f7;
  --demo-surface: #ffffff;
  --demo-ink: #1c2126;
  --demo-quiet: #5d666e;
  --demo-line: #d9dee2;
  --demo-accent: #0f6b6b;
  --demo-danger: #b3261e;
  --demo-on-bar: #ffffff;
  --demo-on-bar-quiet: #c5cdd3;
  --demo-bar-edge: #7c8791;
  --demo-bar-raised: #2c333a;
  --demo-tape: #f5c451;
  --demo-tape-tint: #fdf3e1;
  --demo-radius: 4px;
  --demo-bar-height: 44px;
  --demo-font: 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

html, body {
  height: 100%;
  margin: 0;
  background: var(--demo-ground);
}

/* The page itself never scrolls. The app scrolls in its own area under the bar, as it does inside SharePoint, so its sticky header works unchanged. */
body {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
  font-family: var(--demo-font);
}

#demo-host { flex: none; }
/*
 * position: the apps' visually hidden words are `position: absolute` with no positioned parent of their own. Without this, they would hang from the page and not from #root, so
 * #root would not clip them, and they would give the page room to scroll: 'overflow: hidden' stops a person, not a script. An app's jump (scrollIntoView, focus) would then scroll
 * the page as well as #root, and the bar and the strip would leave the window with no way back.
 */
#root { position: relative; flex: 1 1 auto; min-height: 0; overflow: auto; }

/* The bar */
.demo-bar {
  position: relative;
  z-index: 40;
  font-size: 14px;
  line-height: 20px;
  color: var(--demo-on-bar);
  background: var(--demo-ink);
}

.demo-bar__row {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 44px;
  padding: 0 16px 0 0;
}

.demo-bar__top { display: flex; align-items: center; flex: none; }

/* The one thing to remember: a strip of tape on the edge of the screen. */
.demo-tape {
  margin: 0;
  padding: 12px 16px;
  font-weight: 600;
  color: var(--demo-ink);
  background: var(--demo-tape);
  white-space: nowrap;
}

.demo-bar__menu-button { display: none; }

.demo-bar__items {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  gap: 16px;
  min-width: 0;
}

.demo-bar__actions { display: flex; flex: none; gap: 8px; }

/* The Outbox's button: on a wide bar in its slot, as wide as the slot, so the count does not move the bar. */
.demo-bar__outbox-slot { flex: none; width: 92px; margin-left: auto; }

.demo-outbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  width: 100%;
  padding: 0 6px;
  white-space: nowrap;
}

.demo-outbox__count {
  min-width: 18px;
  padding: 0 4px;
  box-sizing: border-box;
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--demo-ink);
  background: var(--demo-tape);
  border-radius: var(--demo-radius);
}

.demo-control {
  min-height: 32px;
  padding: 0 12px;
  font: inherit;
  color: var(--demo-on-bar);
  background: transparent;
  border: 1px solid var(--demo-bar-edge);
  border-radius: var(--demo-radius);
  cursor: pointer;
}

.demo-control:hover { background-color: var(--demo-bar-raised); }

.demo-bar :focus-visible {
  outline: 2px solid var(--demo-tape);
  outline-offset: 2px;
}

.demo-switch { display: flex; border: 1px solid var(--demo-bar-edge); border-radius: var(--demo-radius); }

.demo-switch__item {
  min-height: 30px;
  padding: 0 12px;
  font: inherit;
  color: var(--demo-on-bar);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.demo-switch__item:hover { background: var(--demo-bar-raised); }

.demo-switch__item[aria-current='page'] {
  font-weight: 600;
  color: var(--demo-ink);
  background: var(--demo-on-bar);
}

.demo-field { display: flex; align-items: center; gap: 8px; min-width: 0; }
.demo-field--date { flex: none; }
.demo-field__label { color: var(--demo-on-bar-quiet); }

/* The browser's own select can draw a light ground under this white text (WebKit does), so the bar draws it all itself, arrow too. */
.demo-select {
  min-width: 0;
  max-width: 220px;
  text-overflow: ellipsis;
  padding: 0 28px 0 8px;
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--demo-ink);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 15px center, right 10px center;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

.demo-select option { color: var(--demo-ink); background: var(--demo-surface); }

.demo-date {
  min-width: 144px;                       /* the date's width changes with the day, and Move to tomorrow beside it must stay where it is */
  color: var(--demo-on-bar-quiet);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/*
 * Beside the controls these are read aloud and shown as a tooltip. There is room to show them in the phone menu. The date's label is the same:
 * on a wide bar it is not drawn, but a screen reader still gets the name (display none would take that away).
 */
.demo-field__note,
.demo-field__label--phone {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.demo-move { white-space: nowrap; }
.demo-move[aria-disabled='true'] { color: var(--demo-on-bar-quiet); cursor: progress; }
.demo-move[aria-disabled='true']:hover { background-color: transparent; }

.demo-note {
  margin: 0;
  padding: 6px 16px;
  color: var(--demo-ink);
  background: var(--demo-tape-tint);
  border-bottom: 1px solid var(--demo-line);
}

.demo-note--morning { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.demo-note--morning p { margin: 0; min-width: 0; }

.demo-note__close {
  flex: none;
  min-height: 24px;
  padding: 0 8px;
  font: inherit;
  font-size: 13px;
  color: inherit;
  background: transparent;
  border: 1px solid var(--demo-line);
  border-radius: var(--demo-radius);
  cursor: pointer;
}

.demo-note__close:hover { background: var(--demo-surface); }

/* An arrow, so the word reads as something that opens, and shows when it is open. */
.demo-bar__menu-button::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 8px;
  border-right: 2px solid;
  border-bottom: 2px solid;
  transform: translateY(-2px) rotate(45deg);
}

.demo-bar__menu-button[aria-expanded='true']::after { transform: translateY(2px) rotate(225deg); }

/* The same widths as DemoBar.tsx. Too narrow for all the controls in a row: What is left out and Reset go behind Menu, which stands where they stood. */
@media (min-width: 1001px) and (max-width: 1239px) {
  .demo-bar__row, .demo-bar__items { gap: 12px; }
  .demo-bar__menu-button { display: block; flex: none; white-space: nowrap; }

  .demo-bar__actions {
    position: absolute;
    top: 44px;
    right: 0;
    display: none;
    flex-direction: column;
    padding: 12px 16px;
    background: var(--demo-ink);
    border-top: 1px solid var(--demo-bar-edge);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  }

  .demo-bar[data-open='true'] .demo-bar__actions { display: flex; }
}

/* The menu takes over when the controls no longer fit. */
@media (max-width: 1000px) {
  .demo-bar__row { display: block; padding: 0; }
  .demo-bar__top { justify-content: space-between; padding-right: 8px; }

  .demo-bar__menu-button {
    display: block;
    min-height: 44px;
    min-width: 72px;
    margin: 0;
    border-color: transparent;
    font-weight: 600;
  }

  .demo-outbox {
    width: auto;
    min-height: 44px;
    margin-left: auto;
    padding: 0 8px;
    border-color: transparent;
    font-weight: 600;
  }

  .demo-bar__menu-button:hover, .demo-outbox:hover { border-color: var(--demo-bar-edge); }
  /* The button fills the bar's height, so a ring outside it loses its top edge. */
  .demo-bar .demo-bar__menu-button:focus-visible, .demo-bar .demo-outbox:focus-visible { outline-offset: -2px; }

  .demo-bar__items {
    position: absolute;
    top: 44px;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    max-height: calc(100dvh - 44px);
    padding: 16px;
    overflow: auto;
    overscroll-behavior: contain;
    background: var(--demo-ink);
    border-top: 1px solid var(--demo-bar-edge);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  }

  .demo-bar[data-open='true'] .demo-bar__items { display: flex; }

  .demo-switch { align-self: stretch; }

  .demo-switch__item {
    flex: 1 1 0;
    min-height: 44px;
  }

  .demo-field { flex-wrap: wrap; flex-direction: column; align-items: stretch; gap: 4px; }
  .demo-select { width: 100%; max-width: none; min-height: 44px; }
  .demo-date { color: var(--demo-on-bar); }

  .demo-field__note,
  .demo-field__label--phone {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
    white-space: normal;
    color: var(--demo-on-bar-quiet);
  }

  .demo-move { min-height: 44px; }
  .demo-bar__outbox-slot { display: none; }
  .demo-bar__actions { flex-direction: column; }
  .demo-bar__actions .demo-control { min-height: 44px; }
}

/* The narrowest phones: the tape and Menu give up some of their air, so the Outbox still fits beside them. */
@media (max-width: 374px) {
  .demo-tape { padding: 12px 8px; }
  .demo-bar__menu-button { min-width: 0; padding: 0 8px; }
}

/* On a phone the apps put their search results at a fixed distance from the top of the window, where their header would be alone. */
@media (max-width: 639px) {
  [data-testid='search-drop'] {
    top: calc(48px + var(--demo-bar-height)) !important;
    max-height: calc(100dvh - 48px - 56px - var(--demo-bar-height)) !important;
  }
}

/* Dialogs: the browser's own modal, drawn over everything. */
.demo-dialog {
  box-sizing: border-box;
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 24px;
  overflow: auto;
  overscroll-behavior: contain;
  font-family: var(--demo-font);
  font-size: 16px;
  line-height: 24px;
  color: var(--demo-ink);
  background: var(--demo-surface);
  border: 1px solid transparent;
  border-radius: var(--demo-radius);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.24);
}

.demo-dialog::backdrop { background: rgba(28, 33, 38, 0.5); }

.demo-dialog :focus-visible {
  outline: 2px solid var(--demo-accent);
  outline-offset: 2px;
}

.demo-dialog__title {
  margin: 0 0 8px;
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  text-wrap: balance;
}

.demo-dialog__text { margin: 0 0 16px; text-wrap: pretty; }

.demo-dialog__address {
  margin: 0 0 16px;
  padding: 8px 12px;
  overflow-wrap: anywhere;
  background: var(--demo-ground);
  border-radius: var(--demo-radius);
}

.demo-dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

.demo-button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 16px;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--demo-radius);
  cursor: pointer;
}

.demo-button--primary { color: var(--demo-surface); background: var(--demo-accent); }
.demo-button--danger { color: var(--demo-surface); background: var(--demo-danger); }
.demo-button--quiet { color: var(--demo-ink); background: var(--demo-surface); border-color: var(--demo-quiet); }
.demo-button--primary:hover { background: #0b5656; }
.demo-button--danger:hover { background: #8f1e18; }
.demo-button--quiet:hover { background: var(--demo-ground); }

/* The left-out panel: the same dialog, from the right, the height of the window. */
/* The list scrolls and the top stays, so Close is always there. A phone has no Escape key. */
.demo-dialog--panel {
  width: min(520px, 100vw);
  height: 100dvh;
  max-height: none;
  max-width: none;
  margin: 0 0 0 auto;
  overflow: hidden;
  border-radius: 0;
}

.demo-dialog--panel[open] {
  display: flex;
  flex-direction: column;
}

.demo-panel__close { position: absolute; top: 24px; right: 24px; }
.demo-dialog--panel .demo-dialog__title { padding-right: 88px; }

.demo-panel__list {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 -24px -24px;
  padding: 0 24px 24px;
  overflow: auto;
  overscroll-behavior: contain;
  list-style: none;
  border-top: 1px solid var(--demo-line);
}

.demo-panel__line {
  padding: 12px 0;
  border-top: 1px solid var(--demo-line);
}

.demo-panel__line:first-child { border-top: 0; }

.demo-panel__line[aria-current='true'] {
  margin: 0 -12px;
  padding: 12px;
  background: var(--demo-tape-tint);
}

.demo-panel__what { margin: 0 0 4px; font-size: 16px; line-height: 24px; font-weight: 600; overflow-wrap: anywhere; }
.demo-panel__why { margin: 0; }
.demo-panel__where { margin: 4px 0 0; font-size: 14px; line-height: 20px; color: var(--demo-quiet); }

@media (max-width: 639px) {
  .demo-button { min-height: 44px; flex: 1 1 auto; }
  .demo-panel__close { min-height: 44px; flex: none; top: 16px; right: 16px; }
  .demo-dialog--panel { padding: 24px 16px; }
  .demo-panel__list { margin: 0 -16px -24px; padding: 0 16px 24px; }
}

/* The Outbox panel: the same panel, wider, with the list and the message side by side. */
.demo-dialog--outbox { width: min(960px, 100vw); }
.outbox__intro { padding-right: 88px; margin-bottom: 8px; }

/* Close, where a panel has it, and on the guided link ? beside it. */
.outbox__head-actions { position: absolute; top: 24px; right: 24px; display: flex; gap: 8px; }
.outbox__head-actions .demo-panel__close { position: static; }
.outbox__help { width: 36px; padding: 0; }

.outbox__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin: 0 -24px;
  padding: 0 24px;
  border-bottom: 1px solid var(--demo-line);
}

.outbox__tabs { display: flex; min-width: 0; }

.outbox__tab {
  min-height: 44px;
  padding: 0 12px;
  font: inherit;
  color: var(--demo-quiet);
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  cursor: pointer;
}

.outbox__tab:hover { color: var(--demo-ink); }
.outbox__tab[aria-selected='true'] { font-weight: 600; color: var(--demo-ink); border-bottom-color: var(--demo-accent); }
.demo-dialog .outbox__tab:focus-visible { outline-offset: -2px; }

.outbox__mine { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-height: 44px; cursor: pointer; }
.outbox__mine-person { font-size: 14px; color: var(--demo-quiet); overflow-wrap: anywhere; }

/* The browser's checkbox, drawn as a switch. It stays the real control underneath. */
.outbox__mine-switch {
  flex: none;
  position: relative;
  width: 36px;
  height: 20px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: var(--demo-surface);
  border: 1px solid var(--demo-quiet);
  border-radius: 10px;
  cursor: pointer;
}

.outbox__mine-switch::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  background: var(--demo-quiet);
  border-radius: 50%;
}

.outbox__mine-switch:checked { background: var(--demo-accent); border-color: var(--demo-accent); }
.outbox__mine-switch:checked::before { left: 19px; background: var(--demo-surface); }

.outbox__body {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  min-height: 0;
  margin: 0 -24px -24px;
}

.outbox__list, .outbox__reader { min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.outbox__list { border-right: 1px solid var(--demo-line); }
.outbox__reader { padding: 16px 24px 24px; }
.outbox__back { display: none; }
.outbox__empty { margin: 0; padding: 16px 24px; color: var(--demo-quiet); }
.outbox__reader > .outbox__empty { padding: 0; }
.outbox__rows { margin: 0; padding: 0; list-style: none; }

.outbox__row {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 10px 16px 10px 21px;
  font: inherit;
  text-align: left;
  color: var(--demo-ink);
  background: var(--demo-surface);
  border: 0;
  border-bottom: 1px solid var(--demo-line);
  border-left: 3px solid transparent;
  cursor: pointer;
}

.outbox__row:hover { background: var(--demo-ground); }
.outbox__row[aria-current='true'] { background: var(--demo-ground); border-left-color: var(--demo-accent); }
.demo-dialog .outbox__row:focus-visible { outline-offset: -2px; }

.outbox__row-who, .outbox__row-headline, .outbox__row-foot { display: block; }
.outbox__row-who { font-size: 14px; line-height: 20px; color: var(--demo-quiet); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.outbox__row-headline { display: -webkit-box; overflow: hidden; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.outbox__row[data-unread='true'] .outbox__row-headline { font-weight: 600; }
.outbox__row[data-unread='true'] .outbox__row-who { color: var(--demo-ink); }

.outbox__row-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 8px;
  margin-top: 2px;
  font-size: 14px;
  line-height: 20px;
  color: var(--demo-quiet);
  font-variant-numeric: tabular-nums;
}

.outbox__row-state { font-weight: 600; color: var(--demo-ink); }

.outbox__hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The frames. All the text can break anywhere, so a long address or subject never runs past the edge. */
.outbox-frame { min-width: 0; overflow-wrap: anywhere; }

.outbox-frame__note {
  margin: 0 0 16px;
  padding: 4px 12px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  background: var(--demo-tape-tint);
  border-left: 4px solid var(--demo-tape);
}

.outbox-frame__subject { margin: 0 0 8px; font-size: 20px; line-height: 28px; font-weight: 600; text-wrap: pretty; }
.outbox-frame__subject:focus, .outbox-frame__sender:focus, .outbox-frame__answer:focus { outline: none; }
.outbox-frame__subject:focus-visible, .outbox-frame__sender:focus-visible, .outbox-frame__answer:focus-visible { outline: 2px solid var(--demo-accent); outline-offset: 2px; }

.outbox-frame__fields { margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--demo-line); }
.outbox-frame__field { display: flex; gap: 8px; font-size: 14px; line-height: 20px; }
.outbox-frame__field dt { flex: none; width: 40px; color: var(--demo-quiet); }
.outbox-frame__field dd { flex: 1 1 auto; min-width: 0; margin: 0; }

.outbox-frame__attachments { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }

.outbox-frame__attachment {
  display: inline-block;
  max-width: 100%;
  box-sizing: border-box;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 20px;
  color: var(--demo-ink);
  background: var(--demo-ground);
  border: 1px solid var(--demo-line);
  border-radius: var(--demo-radius);
}

.outbox-frame__attachment:hover { border-color: var(--demo-quiet); }

.outbox-frame__body { margin: 0; white-space: pre-wrap; }
.outbox-frame__button { margin: 16px 0 0; }
.outbox-frame__links { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 8px 0 0; }
.outbox-link { color: var(--demo-accent); }
.outbox-link:hover { color: #0b5656; }

.outbox-frame__chat { display: flex; gap: 12px; min-width: 0; }
.outbox-frame__post { flex: 1 1 auto; min-width: 0; }

.outbox-frame__initials {
  flex: none;
  width: 32px;
  height: 32px;
  font-size: 13px;
  line-height: 32px;
  font-weight: 600;
  text-align: center;
  background: var(--demo-line);
  border-radius: 50%;
}

.outbox-frame__sender { display: inline; margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; }
.outbox-frame__meta { margin: 0 0 8px; font-size: 14px; line-height: 20px; color: var(--demo-quiet); }
.outbox-frame__bubble { padding: 8px 12px; background: var(--demo-ground); border-radius: var(--demo-radius); }
.outbox-frame__card { padding: 16px; border: 1px solid var(--demo-line); border-radius: var(--demo-radius); }
.outbox-frame__card-heading { margin: 0 0 8px; font-weight: 600; }

.outbox-frame__answer-box { margin-top: 16px; }
.outbox-frame__label { display: block; margin-bottom: 4px; font-weight: 600; }

.outbox-frame__input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 72px;
  padding: 8px;
  font: inherit;
  color: var(--demo-ink);
  background: var(--demo-surface);
  border: 1px solid var(--demo-quiet);
  border-radius: var(--demo-radius);
  resize: vertical;
}

.outbox-frame__input:disabled { color: var(--demo-quiet); background: var(--demo-ground); border-color: var(--demo-line); }
.outbox-frame__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.demo-button[aria-disabled='true'], .demo-button:disabled { cursor: not-allowed; opacity: 0.6; }

.outbox-frame__switch { margin-top: 16px; padding: 12px; background: var(--demo-ground); border-radius: var(--demo-radius); }
.outbox-frame__switch-line { margin: 0 0 8px; }
.outbox-frame__result { margin-top: 16px; }
.outbox-frame__answer { margin: 0; font-weight: 600; }
.outbox-frame__not-used { margin: 8px 0 0; padding: 8px 12px; background: var(--demo-tape-tint); border-left: 4px solid var(--demo-tape); }
.outbox-frame__problem { margin: 8px 0 0; color: var(--demo-danger); }

/* One pane at a time: the list, or the message with a way back. */
@media (max-width: 759px) {
  .outbox__body { grid-template-columns: minmax(0, 1fr); }
  .outbox__list { border-right: 0; }
  .outbox__body[data-reading='true'] .outbox__list { display: none; }
  .outbox__body[data-reading='false'] .outbox__reader { display: none; }
  .outbox__back { display: inline-flex; margin-bottom: 12px; }
  /* A long email gets the screen: the tabs and the switch come back with the list. */
  .demo-dialog--reading .outbox__intro, .demo-dialog--reading .outbox__controls { display: none; }
  .demo-dialog--reading .outbox__body { border-top: 1px solid var(--demo-line); }
  /* A long email scrolls under the note, so what it is stays in view, against the panel's edge: -16px is the reader's top padding, where the text would show above it. A link the keyboard reaches stops below it. */
  .outbox-frame__note { position: sticky; top: -16px; z-index: 1; }
  .outbox__reader { scroll-padding-top: 44px; }
}

@media (max-width: 639px) {
  .outbox__head-actions { top: 16px; right: 16px; }
  .outbox__help { flex: none; width: 44px; }
  .outbox__controls { margin: 0 -16px; padding: 0 16px; }
  .outbox__body { margin: 0 -16px -24px; }
  .outbox__reader { padding: 16px; }
  .outbox__tab { flex: 1 1 auto; padding: 0 8px; }
  .outbox__tabs { flex: 1 1 100%; }
  .outbox__row { padding-left: 13px; }
  .outbox-frame__actions .demo-button, .outbox-frame__button .demo-button { flex: 1 1 100%; }
  .outbox-frame__attachment, .outbox-frame__links a { display: inline-flex; align-items: center; min-height: 44px; }
  .outbox__back { flex: none; }
}

@media (forced-colors: active) {
  .demo-switch__item[aria-current='page'] { outline: 2px solid; }
  .outbox__tab[aria-selected='true'], .outbox__row[aria-current='true'] { outline: 2px solid; }
  .outbox__mine-switch:checked::before { background: CanvasText; }
}

/* The CRM's customer page, at laptop widths. The real app's column (`col` in build/crm/.../pages/Customer.tsx) is a grid with no column template, so a wide
   table pushes the column to the table's own width, and at about 900 to 1305 px it overprints the Files card and blocks its link. The real app is not changed
   from here. The class is Fluent's: the name from the app's source, then a number that can change, so the selector goes by the name and the place on the page. */
[data-testid='customer-page'] > [class^='grid-'] > [class^='col-'] { grid-template-columns: minmax(0, 1fr); }