/*
 * The portal's own stylesheet, and it is deliberately almost empty.
 *
 * `zeya-app-shell` owns the layout — it is `height: 100vh` and takes the
 * viewport. Laying the page out as a grid with a `16rem` first column traps
 * the shell in a 256px box: the sidebar looks right and the content region
 * computes to zero width. The design system's region widths come from its own
 * layout constants precisely so a product cannot drift to its own geometry,
 * and this file must not try.
 *
 * What remains: a body reset so the shell can fill the viewport, and the
 * notice shown when the design system is not installed.
 */

body {
  margin: 0;
}

/* The wait while a sign-in or a sign-out is in flight (`waitBody` in
   server.ts): the kit's loader, centred in the window, and the same centring
   for the sentence that replaces it when the attempt fails. */
.sign-in-wait {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: var(--space-6);
  text-align: center;
}

.sign-in-wait[hidden] {
  display: none;
}

.sign-in-wait h1 {
  margin: 0 0 var(--space-2);
  color: var(--text-heading);
}

.sign-in-wait p {
  margin: 0;
  color: var(--text-secondary);
}

/* Tempo's reading column: the content is centred, at most 1080px wide, with
   the page's own padding outside it, and its parts are spaced by one rhythm.
   The 1080px is Tempo's own off-scale length, not a token. The width is
   explicit because the shell's content region is a flex item, where auto
   margins would shrink the column to its content. */
.page-frame {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
}

#content {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  width: 100%;
  min-width: 0;
  max-width: calc(1080px + 2 * var(--space-6));
  padding: var(--space-6);
  margin-inline: auto;
}

/* The page header, as Tempo's PageHeader draws it. */
.page-header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: flex-end;
  justify-content: space-between;
}

.page-header__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.page-header__title {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.page-header__title h1 {
  margin: 0;
  color: var(--text-heading);
}

.page-header h1:focus {
  outline: none;
}

.page-header__subtitle {
  margin: 0;
  color: var(--text-secondary);
}

.page-header__actions {
  display: flex;
  flex: none;
  gap: var(--space-2);
  align-items: center;
}

.identity {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

/* Tempo's workaround, kept until the kit colours on-fill icons itself. */
zeya-button[variant="primary"],
zeya-button:not([variant]) {
  --icon-default: var(--icon-on-primary);
}

/* Tempo's shared layout. */
.stack {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.stack--gap-4 {
  gap: var(--space-4);
}

.stack--gap-2 {
  gap: var(--space-2);
}

.stack[hidden] {
  display: none;
}

/* A custom element sets its own display, which beats the browser's rule for
   `hidden`: a field a dialog's form hides and shows. */
.dialog-form > [hidden] {
  display: none;
}

/* A custom element sets its own display, which beats the browser's rule for
   `hidden`: the tabs and the cards of a part that is not shown. */
#content > [hidden] {
  display: none;
}

.secondary-text {
  margin: 0;
  color: var(--text-secondary);
}

/* A list of rows, or a message, on the card surface. */
.panel {
  overflow: hidden;
  background: var(--surface-card);
  border: var(--border-width-default) solid var(--border-soft);
  border-radius: var(--radius-lg);
}

.panel--message {
  padding: var(--space-10) var(--space-6);
}

.panel--skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
}

/* The search field in a list's toolbar: wide enough for a long organisation
   name, never the whole row. 22rem is the field's design width, not a token. */
.toolbar-search {
  width: min(100%, 22rem);
}

/* Controls inside a `zeya-toolbar` that must wrap in a narrow window: the kit's
   own row is a single flex line and clips what does not fit. */
.toolbar-wrap {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  min-width: 0;
}

/* The nav panel's pages as links, for the window the kit hides the panel in.
   900px IS THE KIT'S OWN `md`; a media query cannot read a token, so the number
   is written out. Drawn in no other width. */
.panel-links {
  display: none;
}

@media (width < 900px) {
  .panel-links:not([hidden]) {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-6) 0;
  }

  .panel-links a {
    color: var(--text-secondary);
    text-decoration: none;
  }

  .panel-links a[aria-current="page"] {
    font-weight: 500;
    color: var(--text-heading);
    text-decoration: underline;
  }
}

.stack--start {
  align-items: flex-start;
}

/* A tab pane's own line: what the pane holds on the left, its add button on
   the right. The tab's action lives with the tab, not in the page header. */
.pane-bar {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
}

/* What trails a list row: the status, and a row's own action. The row's
   `actions` slot shows on hover only, so these sit in the `status` slot. */
.row-trail {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

/* The breadcrumb trail above a third-level page's header: pulled up so the
   trail and the title read as one block, as Tempo draws them. */
.page-crumbs {
  margin-bottom: calc(-1 * var(--space-3));
}

/* A workspace row's trailing cells: its status, its switch, Members and
   Remove. THE CELLS ARE SIZED BY WHAT IS IN THEM: a fixed width cannot know a
   label or a status longer than the one it was measured for, and a Members
   button wider than its cell grows onto the status beside it. The kit's row
   is a flex row whose text column takes what is left and truncates, so the
   trail only has to refuse to wrap. An absent control leaves an empty cell,
   which draws nothing and takes no gap. */
.ws-trail {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  justify-content: flex-end;
  white-space: nowrap;
}

.ws-trail__cell {
  display: flex;
  align-items: center;
}

.ws-trail__cell:empty {
  display: none;
}

/* ON A PHONE THE TRAIL WRAPS, because there is nothing left for it to line up
   with. Measured at 375px against the real kit: the row wants 400px and has
   341px, so without wrapping the trail runs 58px past the panel and
   `.panel`'s `overflow: hidden` cuts Remove off whole — a control nobody can
   read, reach or press. The `nowrap` above is right on a wide screen, where
   the switches lining up down the column is what it buys; in one column
   there is no column to keep.

   600px IS THE KIT'S OWN `--bp-sm`, and `@media (width < 600px)` is the form
   the kit's own stylesheet uses. A media query cannot read a custom property,
   so the number is written out here; it is the token's value, not a new one.

   WHAT THIS DOES NOT FIX, measured the same way: `zeya-list-row`'s text column
   is `min-w-0 flex-1`, so it shrinks to ZERO and the workspace's name is
   invisible at 375px. Capping `.ws-trail` does not help: at 50% the name gets
   95px and still truncates, and the row grows to 139px, so every value trades
   a clipped control for a cut name. A row of four controls beside a name does
   not fit a phone, and the fix belongs to the kit's row, not to a percentage
   written here. */
@media (width < 600px) {
  .ws-trail {
    flex-wrap: wrap;
    justify-content: flex-start;
    white-space: normal;
  }
}

/* The home page's app launcher: one tile per app the person can open here.
   `auto-fit` rather than a fixed column count because the number of apps is
   the clinic's, not the layout's — one app should not sit in a half-width
   box, and four should not queue single file down a wide screen. The tiles
   are the page's point, so they get the room, and the rest of the page is a
   line of text above them. */
#your-apps-list {
  display: grid;
  /* `auto-fill`, NOT `auto-fit`: auto-fit collapses the empty tracks, so a
     person with one app got a single card stretched across the whole region.
     Measured in a browser. auto-fill keeps the tracks, so one tile is one
     tile and four still share the row. */
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: var(--space-4, 1rem);
}

/* One workspace's tile: the place it is for. TOKENS ONLY — `zeya-card` owns
   the surface, the border and the padding; this is type and colour for the
   line the card has no slot for. */
.app-tile-workspace {
  margin: 0 0 var(--space-3, 0.75rem);
  font-size: var(--text-t3-size);
  line-height: var(--text-t3-line);
  color: var(--text-secondary);
}

/* One organisation's page: its parts stack with the page's own rhythm. The
   sections are the kit's elements and keep their own spacing inside. */
.org-page {
  display: grid;
  gap: var(--space-4, 1rem);
}

/* A list with the facts beside it: the Groups page, and its Details card. The
   side wraps under the list once there is no room for both. 30rem and 17.5rem
   are the design's own column widths, not tokens; the list takes the spare
   room (the 999 grow) so the card stays the width of its facts. */
.split {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  align-items: flex-start;
}

.split__main {
  display: flex;
  flex: 999 1 30rem;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.split__side {
  display: flex;
  flex: 1 1 17.5rem;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

/* A host with nothing in it is a grid row, and so a gap, for no reason. */
.org-page > div:empty {
  display: none;
}

/* The same for the reading column itself: a notice host with no notice is a
   flex item, and so a gap, for no reason. */
#content > div:empty {
  display: none;
}

/* Team & permissions: the small print above the list. Plain text, so it is
   styled by the type and colour tokens and nothing else. */
.access-notes {
  display: grid;
  gap: var(--space-1, 0.25rem);
  margin-bottom: var(--space-3, 0.75rem);
  font-size: var(--text-t1-size);
  line-height: var(--text-t1-line);
  color: var(--text-secondary);
}

/* The one heading on this page that is not a kit element: the kit has a
   section header for a sidebar and a card for a panel, and a table gets
   neither. Type is the T5 role, by its own tokens. */
.section-heading {
  margin: var(--space-4, 1rem) 0 0;
  font-size: var(--text-t5-size);
  font-weight: var(--text-t5-weight);
  line-height: var(--text-t5-line);
  color: var(--text-heading);
}

/* The members page's person drawer: a role is ONE ITEM. The role, what it is
   held on beneath it, and its Remove under that, so the eye does not travel
   from a short label to a word at the far edge. The account is small print and
   last. TOKENS ONLY. */
.role-item {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3) 0;
  border-top: var(--border-width-default) solid var(--border-soft);
}

.role-item:first-child {
  padding-top: 0;
  border-top: 0;
}

.role-item__label {
  font-size: var(--text-t5-size);
  font-weight: var(--text-t5-weight);
  line-height: var(--text-t5-line);
  color: var(--text-heading);
}

.role-item__place {
  font-size: var(--text-t2-size);
  line-height: var(--text-t2-line);
  color: var(--text-secondary);
}

/* A tertiary button pads its label by `--space-4`, so the row steps back by the
   same to put the label under the role's own. */
.role-item__actions {
  margin-left: calc(-1 * var(--space-4));
}

.drawer-account {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin-top: var(--space-4);
  color: var(--text-secondary);
}

.drawer-account[hidden] {
  display: none;
}

/* A button under the access page's list is as wide as its label, not as the
   list: a grid item stretches unless told otherwise. */
.org-page > zeya-button {
  justify-self: start;
}

/* A lone button in the reading column, such as the way back from a page that
   could not be read, is as wide as its label and not as the column. */
#content > zeya-button {
  align-self: flex-start;
}

/* The fields of a dialog's form, stacked. Layout of the host's own dialog
   content, not of any kit element. */
.dialog-form {
  display: grid;
  gap: var(--space-3, 0.75rem);
}

/* The sign-up page (`signup.html`): the Converse demo's two columns, the form
   on the left and the inbox it will build on the right. Below 900px, where
   the kit also stops drawing its side panel, the preview is not drawn: it is
   a promise, and the form is the page. */
.signup__main {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--space-6);
}

.signup__column {
  width: 100%;
  max-width: 26rem;
}

.signup__heading {
  margin: var(--space-6) 0 0;
  color: var(--text-heading);
}

/* The logo is the whole header of the form's first step. */
.signup__brand {
  display: flex;
  justify-content: center;
  padding-block: var(--space-4) var(--space-6);
}

.signup__heading--flush {
  margin-top: 0;
}

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

.signup__intro,
.signup__already {
  margin: 0;
  color: var(--text-secondary);
}

.signup__aside {
  box-sizing: border-box;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-10) var(--space-6);
  background: var(--surface-subtle);
  border-inline-start: var(--border-width-default) solid var(--border-soft);
}

/* THE SAMPLE CLINIC, PLAYING (`StoryPlayer` in signup-page.tsx). Our own frame
   around two recordings: a heading that follows the video, five segments that
   fill with it, and the screen. The width follows the viewport's height too,
   so the whole frame fits a short laptop screen without scrolling. */
.signup__story {
  display: grid;
  gap: var(--space-4);
  width: 100%;
  max-width: min(28rem, calc((100vh - 13rem) * 0.895));
  margin: 0;
}

.signup__story-head {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
  min-height: 2.25rem;
}

.signup__story-title {
  margin: 0;
  color: var(--text-heading);
  text-wrap: balance;
  animation: signup-story-title var(--motion-moderate) var(--ease-enter) both;
}

@keyframes signup-story-title {
  from {
    opacity: 0.25;
    filter: blur(3px);
    transform: translateY(0.25rem);
  }

  to {
    opacity: 1;
    filter: none;
    transform: none;
  }
}

.signup__story-toggle {
  display: grid;
  flex: none;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  color: var(--text-heading);
  cursor: pointer;
  background: var(--surface-card);
  border: var(--border-width-default) solid var(--border-soft);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-1);
  transition: background-color var(--motion-fast) var(--ease-standard);
}

.signup__story-toggle svg {
  fill: currentcolor;
}

.signup__story-toggle:hover {
  background: var(--surface-hover);
}

.signup__story-toggle:focus-visible,
.signup__story-step:focus-visible {
  outline: 2px solid var(--interactive-primary);
  outline-offset: 2px;
}

.signup__story-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-1);
  padding: 0;
  margin: 0;
  list-style: none;
}

/* The segment is a 3px line inside a taller button, so it is easy to press. */
.signup__story-step {
  position: relative;
  display: block;
  inline-size: 100%;
  block-size: 1rem;
  padding: 0;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
}

.signup__story-step::before,
.signup__story-fill {
  position: absolute;
  inset-block-start: calc(50% - 1.5px);
  inset-inline: 0;
  block-size: 3px;
  content: "";
  border-radius: var(--radius-full);
}

.signup__story-step::before {
  background: var(--border-soft);
}

.signup__story-fill {
  background: var(--interactive-primary);
  transform-origin: left center;
}

.signup__story-step:hover::before {
  background: var(--border-strong);
}

.signup__story-screen {
  position: relative;
  aspect-ratio: 1080 / 1206;
  overflow: hidden;
  background: var(--surface-page);
  border: var(--border-width-default) solid var(--border-soft);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-3);
}

.signup__story-video {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--motion-slow) var(--ease-standard);
}

.signup__story-video--on {
  opacity: 1;
}

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

  .signup__story-video {
    transition: none;
  }
}

.signup__wait {
  box-sizing: border-box;
  display: grid;
  grid-column: 1 / -1;
  place-items: center;
  min-height: 100vh;
  padding: var(--space-6);
}

@media (min-width: 900px) {
  #signup {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .signup__aside {
    display: flex;
  }
}

/* "Continue with Google": a native button with Google's own four-colour G. */
.signup__google-button {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  color: #1f1f1f;
  cursor: pointer;
  background: #fff;
  border: 1px solid var(--zds-color-border, #dadce0);
  border-radius: 8px;
}

.signup__google-button:hover {
  background: #f8f9fa;
}

.signup__google-button:focus-visible {
  outline: 2px solid var(--zds-color-focus, #1a73e8);
  outline-offset: 2px;
}

.signup__google-button:disabled {
  cursor: default;
  opacity: 0.6;
}

.signup__or {
  margin: 0;
  color: var(--text-secondary);
  text-align: center;
}