/*
 * The layout gallery: the shared application shell, one stylesheet per layout (templates, then
 * screen patterns), and then the gallery's own chrome below.
 */
@import url('layouts/kit.css');
@import url('layouts/mail.layout.css');
@import url('layouts/issue-tracker.layout.css');
@import url('layouts/wiki.layout.css');
@import url('layouts/ai-chat.layout.css');
@import url('layouts/agent-workspace.layout.css');
@import url('layouts/invoice-editor.layout.css');
@import url('layouts/item-inventory.layout.css');
@import url('layouts/workflows.layout.css');
@import url('layouts/infrastructure.layout.css');
@import url('layouts/crm.layout.css');
@import url('layouts/master-detail.layout.css');
@import url('layouts/dashboard.layout.css');
@import url('layouts/inbox.layout.css');
@import url('layouts/record-page.layout.css');
@import url('layouts/agent-chat.layout.css');
@import url('layouts/record-wizard.layout.css');
@import url('layouts/checkout-wizard.layout.css');
@import url('layouts/settings-workspace.layout.css');
@import url('layouts/system-states.layout.css');
@import url('layouts/zeyos-invoices.layout.css');

/* ---------------------------------------------------------------- gallery -- */

/*
 * The gallery page: a title, then a grid of tiles per section. Every tile carries
 * its layout running in preview mode, rendered at desktop size and scaled to the tile, and opens it
 * in a near-full-screen popup. Below the gallery, the standalone page that shows one layout in a
 * tab of its own. Written in semantic tokens, like the layouts they frame, and in their language:
 * tiles are surfaces on the page tone, framed by a hairline, with small corners and no lift.
 */

/* The chrome runs full-bleed with the documentation's gutter, so the header stays put when a
   reader moves between the documentation, the gallery, and the theme studio. */
.site-page--gallery {
  --gallery-gutter: clamp(var(--zx-space-4), 3vw, var(--zx-space-8));
}

.site-page--gallery .site-header__inner,
.site-page--gallery .site-footer__inner {
  inline-size: 100%;
  padding-inline: var(--zx-space-5);
}

.gallery {
  flex: 1 0 auto;
  background: var(--zx-color-bg-page);
}

.gallery__inner {
  max-inline-size: 1600px;
  margin-inline: auto;
  padding: var(--zx-space-7) var(--gallery-gutter) calc(2 * var(--zx-space-8));
}

.gallery .loading-copy,
.layout-page .loading-copy {
  margin: 0;
  padding: var(--zx-space-8);
  color: var(--zx-color-text-muted);
  text-align: center;
}

/* ------------------------------------------------------------------ intro -- */

.gallery-intro {
  margin-block-end: var(--zx-space-7);
}

/* The page title: a document title, as on the documentation pages. */
.gallery-intro__title {
  margin: 0;
  font-size: var(--zx-text-3xl);
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: var(--zx-tracking-title);
}

.gallery-intro__title:focus {
  outline: none;
}

/* --------------------------------------------------------------- sections -- */

.gallery-section + .gallery-section {
  margin-block-start: var(--zx-space-8);
}

.gallery-section__head {
  display: grid;
  gap: var(--zx-space-1);
  max-inline-size: 78ch;
  margin-block-end: var(--zx-space-4);
}

.gallery-section__title {
  display: flex;
  align-items: baseline;
  gap: var(--zx-space-2);
  margin: 0;
  font-size: 1.25rem;
  font-weight: var(--zx-weight-semibold);
  line-height: 1.3;
  letter-spacing: var(--zx-tracking-title);
}

.gallery-section__count {
  color: var(--zx-color-text-muted);
  font-size: var(--zx-text-md);
  font-weight: var(--zx-weight-medium);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.gallery-section__blurb {
  margin: 0;
  color: var(--zx-color-text-muted);
  line-height: 1.6;
}

/* ------------------------------------------------------------------ tiles -- */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: var(--zx-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The patterns are single screens: smaller tiles, four to a row on a desktop. */
.gallery-grid--patterns {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 272px), 1fr));
}

/* A tile is a surface on the page tone inside one hairline. Hover darkens the hairline; nothing
   lifts, glows, or changes colour. */
.gallery-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  overflow: hidden;
  border: 1px solid var(--zx-color-border);
  border-radius: var(--zx-radius-lg);
  background: var(--zx-color-bg-surface);
}

.gallery-tile[hidden] {
  display: none;
}

.gallery-tile:hover {
  border-color: var(--zx-color-border-strong);
}

/* The title is the tile's button, so the tile shows the button's focus. */
.gallery-tile:has(.gallery-tile__button:focus-visible) {
  border-color: var(--zx-color-ring);
  box-shadow: var(--zx-focus-ring);
}

@media (prefers-reduced-motion: no-preference) {
  .gallery-tile {
    transition:
      border-color var(--zx-dur-fast) var(--zx-ease),
      box-shadow var(--zx-dur-fast) var(--zx-ease);
  }
}

/* The thumbnail: the layout at 1440 × 900, scaled to the tile's width by `--gallery-thumb-scale`,
   which layouts.js keeps in step with the tile. It is inert, so the tile stays one button. */
.gallery-thumb {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1440 / 900;
  border-block-end: 1px solid var(--zx-color-border-subtle);
  background: var(--zx-color-bg-page);
  pointer-events: none;
}

.gallery-thumb__canvas {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 1440px;
  block-size: 900px;
  overflow: hidden;
  transform: scale(var(--gallery-thumb-scale, 0.25));
  transform-origin: top left;
}

.gallery-thumb[data-state="idle"] .gallery-thumb__canvas {
  visibility: hidden;
}

.gallery-thumb[data-state="failed"]::after {
  content: "Preview unavailable";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--zx-color-text-muted);
  font-size: var(--zx-text-sm);
}

@media (prefers-reduced-motion: no-preference) {
  .gallery-thumb[data-state="ready"] .gallery-thumb__canvas {
    animation: gallery-thumb-in var(--zx-dur-base) var(--zx-ease);
  }
}

@keyframes gallery-thumb-in {
  from {
    opacity: 0;
  }
}

/* Inside the gallery the Aurora behind a layout is the background, so its root lets it through. */
.gallery-thumb__canvas > .shell,
.layout-mount > .shell {
  background: transparent;
}

/* Category and title on the left, the new-tab link beside them, the blurb across the width. The
   link follows the blurb in the document, so the tab order is the tile, then its link. */
.gallery-tile__body {
  display: grid;
  flex: 1 1 auto;
  grid-template-areas:
    "category open"
    "title open"
    "blurb blurb";
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto 1fr;
  gap: 2px var(--zx-space-2);
  padding: var(--zx-space-3) var(--zx-space-3) var(--zx-space-4) var(--zx-space-4);
}

/* The category is a caption: sentence case, small, muted. */
.gallery-tile__category {
  grid-area: category;
  margin: 0;
  color: var(--zx-color-text-muted);
  font-size: var(--zx-text-xs);
  font-weight: var(--zx-weight-medium);
}

.gallery-tile__title {
  grid-area: title;
  margin: 0;
  font-size: var(--zx-text-lg);
  font-weight: var(--zx-weight-semibold);
  line-height: 1.35;
  letter-spacing: var(--zx-tracking-tight);
}

.gallery-grid--patterns .gallery-tile__title {
  font-size: var(--zx-text-md);
}

.gallery-tile__button {
  min-block-size: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: start;
  cursor: pointer;
}

/* The button's hit area covers the whole tile; the tile draws its focus ring. */
.gallery-tile__button::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: inherit;
}

.gallery-tile__button:hover {
  background: none;
}

.gallery-tile__button:focus-visible {
  outline: 2px solid transparent;
  box-shadow: none;
}

.gallery-tile__blurb {
  grid-area: blurb;
  display: -webkit-box;
  overflow: hidden;
  margin: var(--zx-space-1) 0 0;
  color: var(--zx-color-text-muted);
  font-size: var(--zx-text-sm);
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* Lifted over the tile button's hit area, so it is a target of its own. */
.gallery-tile__open {
  position: relative;
  z-index: 2;
  grid-area: open;
  align-self: center;
  text-decoration: none;
}

/* ------------------------------------------------------------------ popup -- */

/* A Modal held `--gallery-popup-inset` from every edge; layouts.js sizes its width from the same
   property, which drops to zero on a phone. */
.zx-modal.gallery-popup {
  --gallery-popup-inset: var(--zx-space-4);
  block-size: calc(100% - 2 * var(--gallery-popup-inset));
  max-inline-size: none;
  max-block-size: none;
  overflow: hidden;
  border-radius: var(--zx-radius-lg);
}

.gallery-popup .zx-modal__content {
  block-size: 100%;
  padding: 0;
}

.gallery-popup__frame {
  display: flex;
  flex-direction: column;
  block-size: 100%;
}

/* The popup's header is a shell header: one control row tall, the subtle divider under it, the
   title at the shell's title size, and quiet actions. */
.gallery-popup__header {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--zx-space-4);
  padding: var(--zx-space-2) var(--zx-space-2) var(--zx-space-2) var(--zx-space-4);
  border-block-end: 1px solid var(--zx-color-overlay-divider);
}

.gallery-popup__heading {
  display: grid;
  flex: 1 1 auto;
  gap: 1px;
  min-inline-size: 0;
}

.gallery-popup__name {
  display: flex;
  align-items: center;
  gap: var(--zx-space-2);
  min-inline-size: 0;
}

.gallery-popup__title {
  overflow: hidden;
  margin: 0;
  font-size: var(--zx-text-md);
  font-weight: var(--zx-weight-semibold);
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The title takes focus when the popup opens, as the place reading starts; it is not a control. */
.gallery-popup__title:focus {
  outline: none;
  box-shadow: none;
}

.gallery-popup__category {
  display: inline-flex;
  flex: 0 0 auto;
}

.gallery-popup__blurb {
  overflow: hidden;
  margin: 0;
  color: var(--zx-color-text-muted);
  font-size: var(--zx-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gallery-popup__actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--zx-space-1);
}

.gallery-popup__divider {
  inline-size: 1px;
  block-size: calc(var(--zx-control-height) - var(--zx-space-2));
  margin-inline: var(--zx-space-1);
  background: var(--zx-color-overlay-divider);
}

/* "Open in new tab" is a link drawn as a button. */
.gallery-popup__standalone {
  text-decoration: none;
}

.gallery-popup__body {
  position: relative;
  flex: 1 1 auto;
  min-block-size: 0;
}

/* The stage a layout mounts into, in the popup and on the standalone page. */
.gallery-popup__stage,
.layout-page__stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--zx-color-bg-page);
}

/* Each mounted layout gets a scope of its own (layout-host.js): the Zx scope its menus, dialogs,
   and toasts are hosted in. The stage behind it carries the ambient light, so it stays clear. */
.layout-mount {
  block-size: 100%;
  background: transparent;
}

.layout-mount > .zx-empty-state,
.layout-page__missing {
  block-size: 100%;
  justify-content: center;
}

.layout-page__missing .zx-btn {
  text-decoration: none;
}

/* ---------------------------------------------------------------- source -- */

/* The module's text over the stage, on the surface: a slim bar naming the file, then the code
   with its line numbers, divided by the subtle border rather than banded. */
.gallery-source {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--zx-color-bg-surface);
}

.gallery-source[hidden] {
  display: none;
}

.gallery-source__bar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--zx-space-2);
  min-block-size: calc(var(--zx-control-height) + var(--zx-space-2));
  padding: var(--zx-space-1) var(--zx-space-2) var(--zx-space-1) var(--zx-space-4);
  border-block-end: 1px solid var(--zx-color-border-subtle);
  background: var(--zx-color-bg-chrome);
  color: var(--zx-color-text-muted);
  font-size: var(--zx-text-xs);
}

.gallery-source__bar > .zx-icon {
  flex: none;
  color: var(--zx-color-text-subtle);
}

.gallery-source__path {
  overflow: hidden;
  min-inline-size: 0;
  color: var(--zx-color-text);
  font-family: var(--zx-font-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gallery-source__lines {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}

.gallery-source__lines:not(:empty)::before {
  content: "·";
  margin-inline-end: var(--zx-space-2);
}

.gallery-source__spacer {
  flex: 1 1 auto;
}

.gallery-source__file {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
  margin-inline-end: var(--zx-space-2);
  border-radius: var(--zx-radius-sm);
  color: var(--zx-color-accent);
  font-size: var(--zx-text-sm);
  font-weight: var(--zx-weight-medium);
  text-decoration: none;
}

.gallery-source__file:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.gallery-code {
  flex: 1 1 auto;
  min-block-size: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

.gallery-code:focus-visible {
  outline: 2px solid transparent;
  box-shadow: inset var(--zx-focus-ring);
}

.gallery-code__grid {
  display: grid;
  grid-template-columns: auto max-content;
  min-inline-size: 100%;
  inline-size: max-content;
}

.gallery-code__gutter,
.gallery-code__body {
  margin: 0;
  padding-block: var(--zx-space-3);
  font-family: var(--zx-font-mono);
  font-size: var(--zx-text-sm);
  line-height: 1.7;
  letter-spacing: 0;
  tab-size: 2;
}

/* Line numbers stay put while the code scrolls sideways, and are never part of a selection. */
.gallery-code__gutter {
  position: sticky;
  z-index: 1;
  inset-inline-start: 0;
  padding-inline: var(--zx-space-4) var(--zx-space-3);
  border-inline-end: 1px solid var(--zx-color-border-subtle);
  background: var(--zx-color-bg-surface);
  color: var(--zx-color-text-subtle);
  font-variant-numeric: tabular-nums;
  text-align: end;
  user-select: none;
}

.gallery-code__body {
  padding-inline: var(--zx-space-4) var(--zx-space-8);
  color: var(--zx-color-text);
}

/* Syntax colour is categorical, so it comes from the tone palette, as in the documentation. */
.gallery-code .tok-comment {
  color: var(--zx-color-text-subtle);
  font-style: italic;
}

.gallery-code .tok-string {
  color: var(--zx-color-tone-green-fg);
}

.gallery-code .tok-number {
  color: var(--zx-color-tone-orange-fg);
}

.gallery-code .tok-keyword {
  color: var(--zx-color-tone-violet-fg);
}

/* -------------------------------------------------------- standalone page -- */

/*
 * layout.html: one layout filling the window under a slim bar — the way back to the gallery, the
 * layout's title, Source, and the theme. The bar is a shell header: one control row plus padding
 * tall, opaque, the subtle divider under it. The body is a column; the stage takes what the bar
 * leaves.
 */
.layout-page {
  display: flex;
  flex-direction: column;
  block-size: 100dvh;
  overflow: hidden;
  scrollbar-gutter: auto;
}

.layout-bar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--zx-space-2);
  min-block-size: calc(var(--zx-control-height) + var(--zx-space-4));
  padding: var(--zx-space-1) var(--zx-space-2);
  border-block-end: 1px solid var(--zx-color-border-subtle);
  background: var(--zx-color-bg-surface);
}

.layout-bar__back {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--zx-space-2);
  min-block-size: var(--zx-control-height);
  padding-inline: var(--zx-space-2);
  border-radius: var(--zx-radius-md);
  color: var(--zx-color-text-muted);
  font-size: var(--zx-text-sm);
  font-weight: var(--zx-weight-medium);
  text-decoration: none;
}

.layout-bar__back .zx-icon {
  color: var(--zx-color-text-subtle);
}

.layout-bar__back:hover {
  background: var(--zx-color-bg-hover);
  color: var(--zx-color-text);
}

.layout-bar__back:hover .zx-icon {
  color: var(--zx-color-text);
}

.layout-bar__back:focus-visible {
  outline: 0;
  box-shadow: var(--zx-focus-ring);
}

.layout-bar__divider {
  flex: 0 0 auto;
  inline-size: 1px;
  block-size: calc(var(--zx-control-height) - var(--zx-space-3));
  background: var(--zx-color-border);
}

.layout-bar__title {
  flex: 1 1 auto;
  overflow: hidden;
  min-inline-size: 0;
  margin: 0;
  padding-inline-start: var(--zx-space-1);
  font-size: var(--zx-text-md);
  font-weight: var(--zx-weight-semibold);
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.layout-bar__actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--zx-space-1);
}

/* The site's theme button, sized and cornered like the ghost icon buttons of the library. */
.layout-bar .layout-bar__theme {
  inline-size: var(--zx-control-height);
  block-size: var(--zx-control-height);
}

.layout-bar .layout-bar__theme::before {
  inline-size: 16px;
  block-size: 16px;
}

.layout-page__body {
  position: relative;
  flex: 1 1 auto;
  min-block-size: 0;
}

/* ------------------------------------------------------------- responsive -- */

@media (max-width: 900px) {
  .site-page--gallery .site-header__inner,
  .site-page--gallery .site-footer__inner {
    padding-inline: var(--zx-space-4);
  }
}

@media (max-width: 860px) {
  .gallery-popup__blurb {
    display: none;
  }
}

/* On a phone the popup is the whole screen, and its actions take a row of their own. */
@media (max-width: 640px) {
  .zx-modal.gallery-popup {
    --gallery-popup-inset: 0px;
    border: 0;
    border-radius: 0;
  }

  .gallery-intro__title {
    font-size: var(--zx-text-2xl);
  }

  .gallery-popup__header {
    flex-wrap: wrap;
    gap: var(--zx-space-1) var(--zx-space-3);
    padding: var(--zx-space-2) var(--zx-space-2) var(--zx-space-1) var(--zx-space-3);
  }

  .gallery-popup__heading {
    flex-basis: 0;
  }

  .gallery-popup__actions {
    order: 1;
    flex-basis: 100%;
    margin-inline-start: calc(-1 * var(--zx-space-2));
  }

  .gallery-popup__divider {
    display: none;
  }

  .gallery-source__file {
    display: none;
  }

  /* The way back keeps its arrow and its name, but not the room the name takes. */
  .layout-bar__back-label {
    position: absolute;
    clip-path: inset(50%);
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    white-space: nowrap;
  }
}