/*
 * 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. An earlier version of this file laid the page out as a grid with a
 * `16rem` first column, which trapped the shell in a 256px box: the sidebar
 * looked right and the content region computed 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. */
#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);
}

.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. They were a grid of fixed
   rem widths, and a Members button (97px) wider than its 5rem cell grew out of
   it onto the status beside it; no width written here can know a label or a
   status that is longer than the one it was measured for. 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;
}

/* 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, and why it cannot be opened when
   the registry gave its application no address. TOKENS ONLY — `zeya-card`
   owns the surface, the border and the padding; this is type and colour for
   the two lines 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);
}

.app-tile-unreachable {
  margin: 0;
  font-size: var(--text-t1-size);
  line-height: var(--text-t1-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 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 line under a holder's name: the address they sign in with. Emitted by
   `@zeya/auth-ui`'s access page and by this app's own people tables, the same
   way `.access-notes` is — the package names the class and the host styles
   it. Plain text, not the mono face: an address is read, not machine text
   (LIM-9), and the subject keeps `zeya-code-display` when there is no
   address to show. */
.holder-sign-in {
  font-size: var(--text-t2-size);
  line-height: var(--text-t2-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);
}