/*
 * Embed mode: the same session, inside somebody else's page.
 *
 * Everything here is scoped to `[data-embed='true']`, which only `/embed/{code}`
 * sets (see js/device-boot.js). A normal load matches nothing in this file, so
 * it is additive in the same way mobile.css is and the join page is untouched by
 * its existence.
 *
 * The design rule for the whole file: an embed is a *component on someone
 * else's page*, not a page. So it gives up everything that belongs to a page --
 * the header, the full-viewport height, the background wash that assumed it
 * owned the screen, the outer margins -- and keeps only the card. The host's own
 * heading is above it and the host's own footer is below it, and the session
 * should sit between them without announcing that it is a different website.
 */

/* ---------------------------------------------------------------------------
 * The site's own chrome, removed.
 *
 * The masthead links to "/", which inside a frame either navigates the frame
 * to a page with no code on it or, worse, does nothing a student can understand.
 * A strip of our wordmark across the customer's page is someone else's branding
 * on their site; the Powered-by line under the door answers "who is asking".
 * ------------------------------------------------------------------------ */
[data-embed='true'] .join__bar {
  display: none;
}

/*
 * The session bar keeps its controls and loses its wordmark.
 *
 * The bar itself has to stay: the session title, the connection status and the
 * Leave control live in it, and Leave is the only way out of a conversation
 * when there is no address bar to use. What goes is the wordmark (and the
 * monogram that stands in for it in a narrow window) with the rule beside
 * them, which is a second organisation's branding across the top of a page
 * that belongs to the customer; the title moves to the bar's left edge
 * (design/pages/embed/live).
 *
 * The session is still attributed -- the join card the student came through
 * says whose it is, in a sentence rather than a logo.
 */
[data-embed='true'] .st-bar .tt-logo,
[data-embed='true'] .st-bar .st-mono,
[data-embed='true'] .st-bar > .st-bar__sep:not(.st-bar__sep--tools) {
  display: none;
}

/*
 * The frame is 1104 wide in the design's course page, under the 1,180 at which
 * the desktop bar drops its subtitle and stacks its tools as an icon over a
 * word (css/student.css). A frame has no notes column to make room for, so it
 * keeps the subtitle and the row tools the design draws.
 */
[data-layout='desktop'][data-embed='true'] .st-bar__sub:not(:empty) {
  display: block;
}

[data-layout='desktop'][data-embed='true'] .st-tool {
  flex-direction: row;
  width: auto;
  padding: 0 10px;
  gap: 8px;
  font: var(--text-button);
  letter-spacing: var(--tracking-button);
}

[data-layout='desktop'][data-embed='true'] .st-tool .st-tool__icon svg {
  width: 16px;
  height: 16px;
}

/* ---------------------------------------------------------------------------
 * The join door in a frame (design/pages/embed/join-in-frame).
 *
 * `100dvh` is the viewport, and inside a frame the viewport is the frame -- so
 * a page-height door would centre itself in whatever height the host guessed.
 * In embed mode the document is exactly as tall as its content and the *host*
 * sizes the frame from the `resize` message the bridge posts
 * (js/embed-bridge.js). No outer gutter: the host's own container supplies the
 * margins. The reading field (the statement, the steps) goes -- the host's own
 * heading is above the door -- and so does "Sign in as an instructor", which on
 * a university's course page is an advert for a different product aimed at a
 * student. The policy links stay, under the door, because every one of them is
 * a document somebody is entitled to read before typing their address in.
 *
 * What is left is one white sheet, 560 wide, framed by a 1px edge, with a
 * hairline between its head (title, lede, the join code) and its body. Wider
 * than the 480 a full page gives it, because a course page's content column is
 * itself usually 640-760px. Phone-sized controls (44px) throughout: a frame is
 * read at every width and the host decides which.
 * ------------------------------------------------------------------------ */
[data-embed='true'] .join {
  min-height: 0;
}

[data-embed='true'] .join__door {
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) 0 var(--space-2);
}

[data-embed='true'] .join__brand {
  display: contents;
}

[data-embed='true'] .join__brand-mid,
[data-embed='true'] .join__instructor {
  display: none;
}

[data-embed='true'] .join__sheet {
  order: 1;
  width: min(560px, 100%);
  border: 1px solid var(--color-edge-strong);
}

[data-embed='true'] .join__head {
  gap: 12px;
  padding: 28px 32px 24px;
  border-bottom: var(--rule-hair);
}

[data-embed='true'] .join__head .tt-field {
  margin-top: 8px;
}

[data-embed='true'] .join__body {
  gap: 20px;
  padding: 24px 32px 0;
}

[data-embed='true'] .join__notice {
  margin: 20px 32px 0;
  padding: 4px 0 0;
  border-top: 0;
  border-bottom: 0;
}

[data-embed='true'] .join__submit {
  padding: 16px 32px 32px;
}

[data-embed='true'] .join .tt-input,
[data-embed='true'] .join .tt-select {
  height: var(--size-control-phone);
  font: var(--text-body-lg);
  letter-spacing: var(--tracking-body-lg);
}

[data-embed='true'] .join .tt-btn {
  height: var(--size-control-phone);
  padding: 0 18px;
  font: var(--text-button-lg);
  letter-spacing: var(--tracking-button-lg);
}

[data-embed='true'] .join__brand-foot {
  order: 3;
  width: min(560px, 100%);
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
}

[data-embed='true'] .join__policy {
  margin: 0;
  padding: 0;
  border-top: 0;
  gap: 0 20px;
}

[data-embed='true'] .join__dot {
  display: none;
}

/* ---------------------------------------------------------------------------
 * The live session (design/pages/embed/live … ended).
 *
 * A full page sizes the session to the viewport (`100dvh`, css/session.css).
 * Inside a frame the viewport *is* the frame, and the frame is whatever the
 * host last heard from the bridge -- so a session sized to it can only ever
 * report its own height back and never grow. Here the session is as tall as
 * its content instead, from a 640 floor: the plate keeps its 440 whatever
 * arrives in the foot (a microphone banner never squeezes the picture), and
 * the frame follows through the `resize` messages (js/embed-bridge.js). The
 * transcript column never sets the height -- `contain: size` -- so the log
 * scrolls inside the column the stage gives it, as a log does, and a long
 * conversation does not turn into a long frame on somebody's course page.
 * ------------------------------------------------------------------------ */
[data-embed='true'] {
  --embed-session-height: 640px;
}

[data-embed='true'] .st-root {
  height: auto;
  min-height: var(--embed-session-height);
}

[data-embed='true'] .st-video {
  flex: 1 1 440px;
  min-height: 440px;
}

[data-embed='true'] .st-transcript {
  contain: size;
}

/* the in-frame end screen: Join again across the column, what it does under it (design/pages/embed/ended) */
[data-embed='true'] .st-gate {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

[data-embed='true'] .st-gate .tt-btn {
  flex: none;
  width: 100%;
  height: var(--size-control-phone);
  font: var(--text-button-lg);
  letter-spacing: var(--tracking-button-lg);
}

/* toasts over the stage's top, 16px in from the transcript column -- not the window's bottom-right, which in a frame
   is the host page's corner (design/pages/embed/live-mic-refused-toast) */
[data-layout='desktop'][data-embed='true'] .toasts {
  top: 73px;
  bottom: auto;
  right: 432px;
  left: auto;
}

/* the dialogs sit 140px into the frame, not 232 into a 900px window */
[data-embed='true'] .st-overlay {
  padding-top: 140px;
}

/*
 * On a phone the session is the phone layout, which stands on the viewport;
 * the frame keeps the floor and the phone rules take it from there.
 */
[data-layout='mobile'][data-embed='true'] .st-root {
  height: 100dvh;
  height: calc(100dvh - var(--kbd, 0px));
}

[data-layout='mobile'][data-embed='true'] .st-video {
  flex: 1 1 auto;
  min-height: 0;
}

/* ---------------------------------------------------------------------------
 * The framed microphone refusal's route (js/student.js `addFramedRoute`): the
 * toast carries the join form for this session in a new tab and what that
 * costs, on their own rows under the sentence (design/pages/embed/
 * live-mic-refused-toast).
 * ------------------------------------------------------------------------ */
.st-toast__route {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding-top: 10px;
}

.st-toast__note {
  font: var(--text-body-sm);
  color: var(--color-ink-2);
}

/* ---------------------------------------------------------------------------
 * Where the session came from.
 *
 * One quiet line under the door. Not decoration and not a link we chose to put
 * on a customer's page for marketing: it is the answer to "what is this thing
 * asking for my email address and my microphone", which a student is right to
 * ask when a form appears inside a page belonging to someone else. It opens in
 * a new tab because every link in a frame must.
 *
 * It lives inside the join view in the markup, so it disappears with it when
 * the conversation starts -- no second rule, and no way for the two to disagree.
 * ------------------------------------------------------------------------ */
.embed__origin {
  display: none;
}

[data-embed='true'] .embed__origin {
  display: block;
  order: 2;
  width: min(560px, 100%);
  font: var(--text-body-sm);
  color: var(--color-ink-2);
}

[data-embed='true'] .embed__origin a {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}