/* The guide cards, on the guided link. The look of the demo's own dialogs, with its strip of tape along the top, so a card never reads as part of an app. */

/* The ? button in the demo bar. Beside the Outbox at every width, and on a phone outside the Menu: a person lost on a phone is who it is for. */
.demo-guide-help {
  flex: none;
  width: 32px;
  padding: 0;
  font-weight: 600;
}

@media (max-width: 1000px) {
  .demo-guide-help {
    width: 44px;
    min-height: 44px;
    border-color: transparent;
  }

  .demo-guide-help: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-guide-help:focus-visible { outline-offset: -2px; }
}

/* A phone: the tape and Menu give up some of their air, so ? fits beside the Outbox with none of them on two lines. */
@media (max-width: 420px) {
  .demo-bar--guided .demo-tape { padding: 12px 8px; }
  .demo-bar--guided .demo-bar__menu-button { min-width: 0; padding: 0 8px; white-space: nowrap; }
}

/* The narrowest phones: the tape takes two lines. */
@media (max-width: 359px) {
  .demo-bar--guided .demo-tape { flex: 0 1 auto; min-width: 0; padding: 4px 8px; line-height: 18px; white-space: normal; }
  .demo-bar--guided .demo-guide-help { width: 36px; }
}

.guide-card {
  position: fixed;
  /* Over the apps' own layers, which stand at 1000000, and their menus. */
  z-index: 1000001;
  box-sizing: border-box;
  width: 344px;
  max-width: calc(100vw - 16px);
  padding: 12px 16px 16px;
  font-family: var(--demo-font);
  font-size: 16px;
  line-height: 24px;
  color: var(--demo-ink);
  text-align: left;
  background: var(--demo-surface);
  border: 1px solid transparent;
  border-top: 4px solid var(--demo-tape);
  border-radius: var(--demo-radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  animation: guide-card-in 140ms ease-out;
}

@keyframes guide-card-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .guide-card { animation: none; }
}

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

/* A press held on something else goes through the card, so a drag is not stopped by it. */
.guide-card[data-through='true'] { pointer-events: none; }

/* Two class names each: a card can be drawn inside the signing page, whose own rules for headings and buttons would otherwise win. */
.guide-card .guide-card__title {
  margin: 0 0 4px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  text-wrap: balance;
}

.guide-card__text { margin: 0 0 12px; text-wrap: pretty; }

.guide-card__actions { display: flex; flex-wrap: wrap; gap: 8px; }

.guide-card .demo-button {
  min-height: 32px;
  padding: 0 12px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}

.guide-card .demo-button--primary { color: var(--demo-surface); }
.guide-card .demo-button--quiet { color: var(--demo-ink); }

/* Heard, not seen. */
.guide-card__said,
.story-track__said {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The arrow: a corner of the card, on the side towards the element. */
.guide-card[data-side='bottom']::before,
.guide-card[data-side='top']::before,
.guide-card[data-side='left']::before,
.guide-card[data-side='right']::before {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--demo-surface);
  transform: rotate(45deg);
}

.guide-card[data-side='bottom']::before { top: -10px; left: calc(var(--guide-arrow, 24px) - 7px); background: var(--demo-tape); }
.guide-card[data-side='top']::before { bottom: -7px; left: calc(var(--guide-arrow, 24px) - 7px); }
.guide-card[data-side='left']::before { right: -7px; top: calc(var(--guide-arrow, 24px) - 7px); }
.guide-card[data-side='right']::before { left: -7px; top: calc(var(--guide-arrow, 24px) - 7px); }

/* Round what the card points at. The press goes through. */
.guide-ring {
  position: fixed;
  z-index: 1000000;
  border-radius: var(--demo-radius);
  outline: 3px solid var(--demo-tape);
  outline-offset: 0;
  /* The tape colour alone is too pale on white to see, so a dark line runs inside it. */
  box-shadow: inset 0 0 0 1px var(--demo-ink);
  pointer-events: none;
}

.guide-ring[hidden] { display: none; }

/* In the Outbox's slot, above the message: in the flow of the page, so it covers nothing. */
.guide-card--inline {
  position: static;
  width: auto;
  max-width: none;
  margin: 0 0 16px;
  box-shadow: none;
  border: 1px solid var(--demo-line);
  border-top: 4px solid var(--demo-tape);
}

/* At the top of an app's dialog, on a phone: as wide as the dialog, in its flow, with the form below it. */
.guide-dialog-slot .guide-card--inline {
  margin: 0;
  border-width: 4px 0 1px;
  border-radius: 0;
}

/* On a phone a card is a sheet across the window. GuideLayer puts it at the bottom, or at the top when it would cover the element. */
@media (max-width: 639px) {
  .guide-card:not(.guide-card--inline) {
    left: 0;
    width: 100%;
    max-width: none;
    max-height: 60dvh;
    overflow: auto;
    overscroll-behavior: contain;
    padding: 12px 16px 16px;
    border-radius: 0;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.3);
  }

  .guide-card .demo-button {
    min-height: 44px;
    flex: 1 1 auto;
    font-size: 16px;
  }
}

@media (forced-colors: active) {
  .guide-ring { outline-color: Highlight; }
}

/*
 * The story track, on the guided link only. The tape along its top says it is the demo's own, as on a card. From 1440 px it is a rail beside the app, which leaves the app
 * 1184 px. The apps choose their wide layout by the window's width, from 1280 px, and that layout runs past its area under about 1160 px, so a rail on a narrower window would
 * make them scroll sideways. Under 1440 px it is a strip under the bar, which leaves the app the whole width. Everything that moves the page hangs on body.demo-guided, so the
 * free-play link is drawn as it always was.
 */
.story-track {
  box-sizing: border-box;
  font-family: var(--demo-font);
  font-size: 14px;
  line-height: 20px;
  color: var(--demo-ink);
  background: var(--demo-surface);
  border-top: 4px solid var(--demo-tape);
  border-bottom: 1px solid var(--demo-line);
}

.story-track__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 0 16px;
  font: inherit;
  color: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.story-track__toggle:hover { background: var(--demo-ground); }

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

.story-track__line {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.story-track__strip-count,
.story-track__count { font-variant-numeric: tabular-nums; }

.story-track__strip-count { font-weight: 600; }

.story-track__chevron { flex: none; }
.story-track[data-open='true'] .story-track__chevron { transform: rotate(180deg); }

.story-track__head { display: none; }

.story-track__steps {
  margin: 0;
  padding: 0 8px 8px;
  list-style: none;
  overflow: auto;
  overscroll-behavior: contain;
}

.story-step {
  position: relative;
  display: flex;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--demo-radius);
}

.story-step__mark {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  font-size: 12px;
  line-height: 18px;
  font-variant-numeric: tabular-nums;
  color: var(--demo-quiet);
  border: 1px solid var(--demo-bar-edge);
  border-radius: 50%;
}

.story-step[data-done='true'] .story-step__mark {
  color: var(--demo-surface);
  background: var(--demo-accent);
  border-color: var(--demo-accent);
}

.story-step[data-done='true'] .story-step__label { color: var(--demo-quiet); }

/* The one suggested. */
.story-step[aria-current='step'] { background: var(--demo-tape-tint); }
.story-step[aria-current='step'] .story-step__label { font-weight: 600; }
.story-step[aria-current='step'] .story-step__mark { color: var(--demo-ink); border-color: var(--demo-ink); }

@media (max-width: 1439px) {
  .story-track[data-open='false'] .story-track__steps { display: none; }
  .story-track[data-open='true'] .story-track__steps { max-height: 50dvh; }
}

/* A phone: the words at body size, and no name on the closed strip, as it has no room for it. */
@media (max-width: 639px) {
  .story-track { font-size: 16px; line-height: 24px; }
  .story-track__strip-name { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .story-step__mark { margin-top: 2px; }

  /* The apps put their search results at a fixed distance from the top of the window: under the bar and the header (host.css), and here under the strip too. */
  body.demo-guided [data-testid='search-drop'] {
    top: calc(48px + var(--demo-bar-height) + var(--story-height, 0px)) !important;
    max-height: calc(100dvh - 48px - 56px - var(--demo-bar-height) - var(--story-height, 0px)) !important;
  }
}

@media (min-width: 1440px) {
  body.demo-guided {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 256px;
    grid-template-rows: auto minmax(0, 1fr);
  }

  /* The bar and the track are placed by the body's grid. The dialogs and the cards in the same folder are out of the flow, so they take no room in it. */
  body.demo-guided #demo-host { display: contents; }
  body.demo-guided .demo-bar { grid-column: 1 / -1; grid-row: 1; }
  body.demo-guided #root { grid-column: 1; grid-row: 2; }

  .story-track {
    display: flex;
    flex-direction: column;
    grid-column: 2;
    grid-row: 2;
    min-height: 0;
    border-bottom: 0;
    border-left: 1px solid var(--demo-line);
  }

  .story-track__toggle { display: none; }

  .story-track__head {
    display: flex;
    flex: none;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 16px 8px;
  }

  .story-track__name { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; }
  .story-track__count { margin: 0; color: var(--demo-quiet); white-space: nowrap; }
  .story-track__steps { flex: 1 1 auto; min-height: 0; }
}