/* ============================================================================
 * Learn2Ride At Home — app-only glue. Loads LAST, after l2r-app.css.
 *
 * l2r-app.css is the design system and gets re-dropped from the design project,
 * so nothing app-specific belongs in it. This file holds the things the mockup
 * has no opinion about: device safe areas, the real logo lockup, and the header
 * Ask button, which is the one button that has to stay small.
 * ========================================================================= */

/* The yellow band stays full-bleed; its contents line up with the .screen
 * column so the logo doesn't drift away from the app on a wide window.
 * iOS notch / home indicator: viewport-fit=cover means we own the insets. */
.app-header {
  display: block;
  padding-top: calc(10px + var(--safe-t));
  padding-right: max(14px, var(--safe-r));
  padding-left: max(14px, var(--safe-l));
}
.app-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 480px;
  margin: 0 auto;
}

.action-bar {
  padding-right: max(16px, var(--safe-r));
  padding-left: max(16px, var(--safe-l));
}

/* Header Ask button. Full .btn sizing would eat the logo on a 375px screen. */
.app-header .ask-btn {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 8px 12px;
  font-size: 14px;
  border-width: var(--bw);
  border-radius: 12px;
  box-shadow: var(--sh);
  white-space: nowrap;
}
.app-header .ask-btn:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--l2r-ink);
}

@media (max-width: 380px) {
  .app-header .ask-btn {
    font-size: 13px;
    padding: 8px 10px;
  }
}

/* The player stays full-screen (better on a phone than a framed card), but it
 * gets the ink frame so it still reads as part of the sticker set. */
.video-overlay__stage {
  border: var(--bw-3) solid var(--l2r-ink);
  border-radius: var(--r-lg);
  overflow: hidden;
}

/* ---------------------------------------------------------- step pages */
.step-body {
  padding-top: 4px;
  padding-bottom: 18px; /* room for the ask-link speech-bubble tail */
  overflow: visible;
}
/* Setup leads with its essentials card; give it room before the blocks. */
.essentials {
  margin-bottom: 18px;
}
.essentials .disp {
  margin-bottom: 8px;
}
.essentials .list {
  margin-top: 12px;
}
/* Watch-first sits above the copy, so it needs the gap a .block would have. */
.step-body > .btn-watch {
  margin-bottom: 16px;
}
.ready .callout__label {
  display: flex;
  margin-top: 10px;
  font-size: 14px;
}
.ready p {
  margin: 0;
}
/* The pill labels are real headings for a11y; drop the h2 defaults on them. */
h2.block__label,
h2.fix__label {
  margin-top: 0;
  line-height: 1.15;
}

/* Component classes set `display`, which beats the UA rule for [hidden].
 * The app toggles .ask-btn and .chips that way, so restate it once here. */
[hidden] {
  display: none !important;
}

/* ----------------------------------------------- ask coach matt drawer */
/* The design system modal assumes a centered card. Here it fills the phone,
 * so the head and foot own the safe-area insets instead of the panel. */
.drawer__panel .modal__head {
  padding-top: calc(12px + var(--safe-t));
  padding-right: max(14px, var(--safe-r));
  padding-left: max(14px, var(--safe-l));
}
/* The design system scrolls .modal__body itself. Here the transcript has to be
 * the scroller instead, because the send handler pins it to the bottom via
 * chat-log.scrollTop. */
.drawer__panel .modal__body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding-right: max(14px, var(--safe-r));
  padding-left: max(14px, var(--safe-l));
}
.drawer__panel .modal__foot {
  padding-bottom: calc(12px + var(--safe-b));
  padding-right: max(14px, var(--safe-r));
  padding-left: max(14px, var(--safe-l));
}
.modal__who {
  flex: 1 1 auto;
  min-width: 0;
}
.modal__who h2 {
  margin: 0;
}
.modal__who .coach-panel__status {
  margin: 2px 0 0;
}
.modal__input {
  box-sizing: border-box;
}
/* The mockup's speaker label is a block element; the app renders it as a span
 * inside the bubble, so it needs to be told to take its own line. */
.bubble__from {
  display: block;
}
/* The design system composer is a one-line <input>; this one is a <textarea> so
 * a parent can type a few sentences about what they're seeing. In a 52px row the
 * placeholder wraps and gets sliced in half at the bottom edge, so hold it to one
 * clipped line. Typing drops :placeholder-shown and normal wrapping comes back. */
.modal__row textarea.modal__input:placeholder-shown {
  white-space: nowrap;
  overflow: hidden;
}

/* ---------------------------------------------------------------- home */
.home-body {
  padding-top: 14px;
  padding-bottom: 4px;
}
.home-hero {
  margin-bottom: 14px;
}

/* .path is an <ol> so the step order is real to a screen reader. */
.path {
  list-style: none;
  margin: 0;
  padding: 0;
}
.path li {
  margin: 0;
}
.step-card__copy {
  min-width: 0;
}
/* Locked rows are spans, not links, so they need the cursor spelled out. */
span.step-card {
  cursor: default;
}