@layer components {
  .workspace-page {
    margin-inline: auto;
    max-inline-size: 96rem;
    padding-block: 0.35rem var(--block-space);
    width: 100%;
  }

  .workspace-page--flush-top {
    padding-block-start: 0;
  }

  .workspace-main {
    min-inline-size: 0;
  }

  .header--photos-actions {
    --header-button-count: 1;

    @media (min-width: 640px) {
      --header-actions-width: 11rem !important;

      .header__actions .btn {
        max-inline-size: 100%;
        min-inline-size: 0;
      }

      .header__actions .btn[aria-label]:where(:has(.icon)) {
        --btn-padding: 0.45em 0.9em;
        --icon-size: 1rem;

        align-items: center;
        aspect-ratio: auto;
        block-size: auto;
        display: inline-flex;
        gap: 0.5em;
        inline-size: auto;
        justify-content: center;
      }

      .header__actions .btn[aria-label]:where(:has(.icon)) > * {
        grid-area: auto;
      }
    }
  }

  /* ── Model selector (photo sets page) ───────────────── */

  .workspace-model-selector {
    align-items: center;
    background: color-mix(in srgb, var(--color-canvas) 92%, var(--color-selected) 8%);
    border: 1px solid color-mix(in srgb, var(--color-ink-lighter) 82%, transparent);
    border-radius: 1.1rem;
    box-shadow: var(--box-shadow-cluster);
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    inline-size: fit-content;
    margin-block-end: var(--block-space);
    margin-inline: auto;
    max-inline-size: min(100%, 34rem);
    padding: 0.85rem 1rem;
    justify-content: center;
  }

  .workspace-model-selector__preview {
    border-radius: 999px;
    flex-shrink: 0;
    overflow: hidden;
    outline: 1px solid color-mix(in srgb, var(--color-ink-lighter) 76%, transparent);
  }

  .workspace-model-selector__preview-image {
    block-size: 3rem;
    display: block;
    inline-size: 3rem;
    object-fit: cover;
    object-position: center 18%;
  }

  .workspace-model-selector__field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-inline-size: min(100%, 16rem);
  }

  .workspace-model-selector .input--select {
    --input-background: var(--color-canvas);
    --input-border-color: color-mix(in srgb, var(--color-ink-lightest) 78%, var(--color-ink-medium));
    --input-border-radius: 999px;
    --input-padding: 0.7em 2.6em 0.7em 1em;

    max-inline-size: 20rem;
  }

  /* ── Create perma ───────────────────────────────────── */

  .workspace-create-perma {
    --actions-inline-inset: 0;
    --card-color: oklch(var(--lch-blue-medium));

    margin-block-start: 0;
  }

  .workspace-create-perma .card {
    --card-aspect-ratio: auto;

    min-block-size: 28rem;
  }

  .workspace-create-perma .card__body {
    padding-block-end: 0;
  }

  .workspace-create-perma__board-label {
    align-items: center;
    display: inline-flex;
    gap: 0.5rem;
  }

  .workspace-create-perma__board-label .icon,
  .workspace-create-perma__board-label svg {
    --icon-size: 1rem;
  }

  .workspace-create-perma__content {
    display: flex;
    flex-direction: column;
    gap: var(--block-space);
  }

  .workspace-create-perma__intro {
    display: grid;
    gap: 0.6rem;
    max-inline-size: 42rem;
  }

  .workspace-create-perma__intro .card__title {
    margin-block-end: 0;
  }

  .workspace-create-perma__lede {
    color: var(--card-content-color);
    line-height: 1.45;
    margin: 0;
  }

  .workspace-create-perma__fields {
    display: grid;
    gap: var(--block-space);
  }

  .workspace-create-perma__field {
    display: grid;
    gap: 0.5rem;
  }

  .workspace-create-perma__label {
    color: var(--card-text-color);
    font-size: var(--text-small);
    font-weight: 700;
  }

  .workspace-create-perma__textarea-box {
    background-color: color-mix(in srgb, var(--color-canvas) 82%, var(--card-color) 8%);
    border: 1px solid color-mix(in srgb, var(--card-color) 18%, var(--color-ink-lighter));
    border-radius: 0.25rem;
    min-inline-size: 0;
  }

  .workspace-create-perma__textarea {
    background: transparent;
    border: 0;
    color: var(--color-ink);
    font-size: max(16px, 1em);
    inline-size: 100%;
    line-height: 1.45;
    min-block-size: 8.5rem;
    padding: 0.9rem 1rem 1rem;
    resize: none;
  }

  .workspace-create-perma__textarea::placeholder {
    color: var(--color-ink-dark);
    opacity: 0.72;
  }

  .workspace-create-perma__textarea:focus {
    outline: none;
  }

  .workspace-create-perma__textarea-box--compact .workspace-create-perma__textarea,
  .workspace-create-perma__textarea--compact {
    min-block-size: 5.25rem;
  }

  .workspace-create-perma__model-preview {
    background: color-mix(in srgb, var(--color-canvas) 88%, var(--card-color) 6%);
    border: 1px solid color-mix(in srgb, var(--card-color) 12%, var(--color-ink-lighter));
    border-radius: 0.25rem;
    padding: 0.65rem 0.8rem;
  }

  .workspace-create-perma__model-preview-image {
    block-size: 3rem;
    border-radius: 0.4rem;
    inline-size: 3rem;
    object-fit: cover;
    object-position: center 18%;
    flex-shrink: 0;
  }

  .workspace-create-perma__messages {
    display: grid;
    gap: 0.35rem;
  }

  .workspace-create-perma__submit {
    align-items: center;
    display: inline-flex;
    gap: 0.65rem;
    justify-content: center;
  }

  .workspace-create-perma__submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .workspace-create-perma__cost {
    font-size: var(--text-small);
    opacity: 0.8;
  }

  .workspace-create-choice .card {
    min-block-size: 20rem;
  }

  /* ── Full-screen pages (create + photo detail) ──────── */

  .workspace-fullscreen {
    display: flex;
    flex-direction: column;
    gap: var(--block-space);
    margin-inline: auto;
    max-inline-size: 40rem;
    padding-block: var(--block-space);
  }

  .workspace-fullscreen__back .btn {
    --btn-size: 2.4em;
  }

  .workspace-fullscreen__card {
    display: flex;
    flex-direction: column;
    gap: var(--block-space);
    padding: var(--block-space-double) var(--inline-space-double);
  }

  .workspace-fullscreen__section {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
  }

  .workspace-fullscreen__form {
    display: flex;
    flex-direction: column;
    gap: var(--block-space);
  }

  .workspace-fullscreen__field {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
    text-align: start;
  }

  .workspace-fullscreen__label {
    letter-spacing: 0;
  }

  .workspace-fullscreen__input-box {
    background-color: var(--color-ink-lightest);
    border-radius: 0.25rem;
    min-inline-size: 0;
    transition: background-color 100ms ease-out;
  }

  .workspace-fullscreen__textarea {
    background: transparent;
    border: 0;
    color: var(--color-ink);
    font-size: max(16px, 1em);
    inline-size: 100%;
    line-height: 1.45;
    min-block-size: 8.5rem;
    padding: 0.9rem 1rem 1rem;
    resize: none;
  }

  .workspace-fullscreen__textarea::placeholder {
    color: var(--color-ink-dark);
    opacity: 0.72;
  }

  .workspace-fullscreen__textarea:focus {
    outline: none;
  }

  .workspace-fullscreen__input-box--compact .workspace-fullscreen__textarea,
  .workspace-fullscreen__textarea--compact {
    min-block-size: 5.25rem;
  }

  .workspace-fullscreen__model-preview {
    --panel-border-radius: 0.2em;
    --panel-padding: 0.6em 0.8em;
  }

  .workspace-fullscreen__model-preview-image {
    block-size: 3rem;
    border-radius: 0.4rem;
    inline-size: 3rem;
    object-fit: cover;
    object-position: center 18%;
    flex-shrink: 0;
  }

  .workspace-fullscreen__actions {
    display: flex;
    justify-content: flex-end;
  }

  .workspace-fullscreen__submit {
    --btn-gap: 0.6em;
    --btn-padding: 0.65em 1.6em;
  }

  .workspace-fullscreen__submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .workspace-fullscreen__submit .icon {
    --icon-size: 1em;
    block-size: 1em;
    inline-size: 1em;
  }

  .workspace-fullscreen__cost {
    font-size: var(--text-small);
    opacity: 0.8;
  }

  .workspace-fullscreen__cost .icon,
  .workspace-fullscreen__cost svg {
    block-size: 0.85em;
    inline-size: 0.85em;
  }

  /* ── Workspace navigation + photo perma ─────────────── */

  body.workspace-shell::before {
    background: linear-gradient(90deg, var(--color-selected-dark), var(--color-selected), var(--color-selected-dark));
    block-size: 3px;
    content: "";
    inset: 0 auto auto 0;
    inline-size: 100%;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    transform: translateX(-35%) scaleX(0.18);
    transform-origin: left center;
    transition: opacity 120ms ease;
    will-change: transform;
    z-index: 1200;
  }

  html[data-workspace-navigation-loading] body.workspace-shell::before {
    opacity: 1;
    animation: workspace-navigation-loading 1.1s ease-in-out infinite;
  }

  @keyframes workspace-navigation-loading {
    0% {
      transform: translateX(-35%) scaleX(0.18);
    }

    50% {
      transform: translateX(8%) scaleX(0.62);
    }

    100% {
      transform: translateX(118%) scaleX(0.24);
    }
  }

  .workspace-photo-board,
  .workspace-photo-sets,
  .workspace-deleted-photos {
    display: flex;
    flex-direction: column;
    gap: var(--block-space);
  }

  .workspace-photo-article__media--static {
    display: block;
  }

  .workspace-empty--photos {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: var(--block-space);
  }

  .workspace-empty__copy {
    max-inline-size: 32rem;
  }

  .workspace-photo-article--perma {
    inline-size: min(100%, 38rem);
    margin-inline: auto;
  }

  .workspace-photo-article--perma .public-gallery__frame {
    background: transparent;
  }

  .workspace-photo-perma {
    display: flex;
    gap: var(--block-space);
    align-items: center;
  }

  .workspace-photo-perma--with-panel {
    align-items: stretch;
  }

  .workspace-photo-perma__rail {
    align-items: center;
    display: flex;
    justify-content: center;
    min-inline-size: 2.65rem;
  }

  .workspace-photo-perma__bg {
    background: color-mix(in srgb, var(--color-canvas-dark) 90%, black);
    border-radius: 1rem;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.75rem;
    min-inline-size: 0;
    padding: 0.75rem;
  }

  .workspace-photo-perma__toolbar {
    display: flex;
    gap: 0.65rem;
    justify-content: space-between;
  }

  .workspace-photo-perma__toolbar-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
  }

  .workspace-photo-perma__toolbar-group--end {
    justify-content: flex-end;
  }

  .workspace-photo-perma__toolbar .display-contents {
    display: contents;
  }

  .workspace-photo-perma__article-wrap {
    display: flex;
    justify-content: center;
    min-inline-size: 0;
  }

  .workspace-photo-perma__panel {
    flex: 0 0 22rem;
    min-inline-size: 0;
  }

  .workspace-photo-perma__panel .workspace-fullscreen__card {
    block-size: 100%;
    min-block-size: 0;
  }

  .workspace-photo-panel-nav {
    display: flex;
    gap: 0.5rem;
    margin-block-end: 0.25rem;
    overflow-x: auto;
    padding-block-end: 0.25rem;
    scrollbar-width: none;
  }

  .workspace-photo-panel-nav::-webkit-scrollbar {
    display: none;
  }

  .workspace-photo-panel-nav__link {
    background: oklch(var(--lch-black) / 0.06);
    border-radius: 999px;
    color: inherit;
    font-size: var(--text-small);
    font-weight: 700;
    padding: 0.5rem 0.9rem;
    text-decoration: none;
    white-space: nowrap;
  }

  .workspace-photo-panel-nav__link--current {
    background: var(--color-ink);
    color: var(--color-canvas);
  }

  .photo-bar-btn {
    --btn-size: 2.65em;
  }

  .photo-nav-btn {
    --btn-size: 2.65em;
  }

  .photo-nav-btn--dismiss {
    --btn-size: 2.8em;
  }

  .photo-nav-btn .icon,
  .photo-bar-btn .icon,
  .photo-nav-btn svg,
  .photo-bar-btn svg {
    inline-size: var(--icon-size);
    block-size: var(--icon-size);
  }

  /* ── Desktop layout ─────────────────────────────────── */

  @media (min-width: 961px) {
    body.workspace-shell {
      block-size: 100dvh;
      overflow: hidden;

      #global-container {
        block-size: 100%;
        display: grid;
        grid-template-rows: auto 1fr;
        min-block-size: 0;
      }

      #main {
        block-size: 100%;
        display: flex;
        min-block-size: 0;
        overflow-y: auto;
      }
    }

    .workspace-photo-perma__panel .workspace-fullscreen__card {
      overflow: auto;
    }
  }

  /* ── Mobile layout ──────────────────────────────────── */

  @media (max-width: 960px) {
    body.workspace-shell {
      block-size: 100dvh;
      overflow: hidden;

      #global-container {
        block-size: 100%;
        display: grid;
        grid-template-rows: auto auto 1fr;
        min-block-size: 0;
      }

      #main {
        min-block-size: 0;
        overflow: auto;
      }
    }

    .workspace-page--flush-top {
      block-size: 100%;
    }

    .workspace-page--flush-top .workspace-main {
      block-size: 100%;
      display: flex;
      flex-direction: column;
      min-block-size: 0;
    }

    turbo-frame#photos-board {
      display: flex;
      flex: 1 1 auto;
      min-block-size: 0;
    }

    .workspace-photo-board {
      gap: 0;
    }

    .workspace-photo-board--with-records {
      display: flex;
      flex: 1 1 auto;
      flex-direction: column;
      min-block-size: 0;
    }

    .workspace-photo-grid {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      min-block-size: 0;
      overflow: hidden;
    }

    .workspace-photo-grid .cards__list {
      align-content: start;
      flex: 1 1 auto;
      grid-auto-rows: max-content;
      min-block-size: 0;
      overflow-y: auto;
      padding: 0 0.5rem calc(var(--block-space) + var(--custom-safe-inset-bottom));
    }

    .photo-nav-btn,
    .photo-bar-btn {
      --btn-size: 2.75rem;
    }

    .workspace-photo-perma {
      align-items: stretch;
      flex-direction: column;
    }

    .workspace-photo-perma__rail {
      display: none;
    }

    .workspace-photo-perma__toolbar {
      align-items: center;
      flex-wrap: nowrap;
    }

    .workspace-photo-perma__toolbar-group {
      flex-wrap: nowrap;
      max-inline-size: 100%;
    }

    .workspace-photo-perma__toolbar-group--end {
      inline-size: auto;
      margin-inline-start: auto;
    }

    .workspace-photo-perma__panel {
      flex-basis: auto;
    }

    .workspace-photo-perma__panel .workspace-fullscreen__card {
      --workspace-photo-panel-padding-block: var(--block-space);
      --workspace-photo-panel-padding-inline: var(--inline-space);

      block-size: 100%;
      border-radius: 0.85rem;
      min-block-size: 0;
      overflow: auto;
      padding:
        0
        var(--workspace-photo-panel-padding-inline)
        var(--workspace-photo-panel-padding-block);
    }

    .workspace-photo-perma__panel .workspace-photo-panel-nav {
      align-items: center;
      background: var(--color-canvas);
      flex-shrink: 0;
      inset-block-start: 0;
      margin-inline: calc(-1 * var(--workspace-photo-panel-padding-inline));
      min-block-size: calc(2.75rem + var(--workspace-photo-panel-padding-block));
      padding:
        var(--workspace-photo-panel-padding-block)
        var(--workspace-photo-panel-padding-inline)
        0.25rem;
      position: sticky;
      z-index: 1;
    }
  }

}