/* Two-pane authoring layout: persistent content-tree rail + content pane.
   Generalizes the editor's old .sheet-wrapper--with-toc grid to the whole
   authoring surface. Desktop only — below 1024px the rail is hidden and the
   pane is the single column (mobile drill-down is Phase 4). */

.workspace {
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

@media (min-width: 1024px) {
  .workspace {
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
    display: grid;
    grid-template-columns: 20.75rem minmax(0, 1fr);
    align-items: start;
  }

  .workspace__pane {
    min-height: calc(100vh - var(--navbar-footprint) - var(--space-md));
    background: var(--color-white);
    border-left: 1px solid var(--color-spring-wood-600);
  }
}

.workspace__pane {
  min-width: 0;
}

/* The horizontal gutter is always owned by .workspace, so the pane's own content
   (the .surface, the editor .sheet-wrapper) never adds a second layer. */
.workspace__pane > .surface,
.workspace__pane > .sheet-wrapper {
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

/* At desktop the top margin lives on .workspace (both columns align), so the pane
   content drops its own top padding. Below 1024px it keeps its native top spacing. */
/* The header band — every workspace screen's toolbar: back / location on the
   left, the screen's actions on the right. On desktop its height matches the rail
   switcher and its border meets the seam (one continuous header row); below the
   rail breakpoint it's simply the pane's top bar. */
.workspace__band {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  min-height: var(--workspace-band-height);
  padding-inline: var(--page-gutter);
  border-bottom: 1px solid var(--color-spring-wood-600);
}

/* The back link / location may shrink and ellipsis-truncate; the actions never do. */
.workspace__band > .page__back-link,
.workspace__band > .page__back-current {
  min-width: 0;
}

.workspace__band > .page__header-actions {
  margin-left: auto;
  flex-shrink: 0;
  width: auto;
}

/* The editor's own top-bar is the band: back link left, actions pushed right — the
   same two-zone shape as the collection bands, at every size. */
.workspace__pane .sheet__top-bar {
  justify-content: flex-start;
}

.workspace__pane .sheet__top-bar .sheet__actions {
  margin-left: auto;
}

/* Below the rail breakpoint there's no white pane behind the band, so it carries
   its own white surface and goes full-bleed to line up with the content below. */
@media (max-width: 1023px) {
  .workspace__band {
    background: var(--color-white);
    margin-inline: calc(-1 * var(--page-gutter));
    padding-inline: var(--page-gutter);
    border-top: 1px solid var(--color-spring-wood-300);
  }

  .workspace__pane > .workspace__band + .surface {
    border-top: none;
  }
}

@media (min-width: 1024px) {
  .workspace__pane > .surface {
    padding-top: 0;
    border-radius: 0;
    box-shadow: none;
  }

  /* Non-editor screens: the band sits above the surface, so the content gets a
     small top gap below it. The editor's sheet sits flush — its own top-bar IS
     the band, at the pane top. */
  .workspace__pane > .surface > .surface__body {
    padding-top: var(--space-md);
  }

  .workspace__pane > .sheet-wrapper {
    padding-top: 0;
  }

  .workspace__band {
    height: var(--workspace-band-height);
    min-height: 0;
    padding-inline: var(--space-xl);
  }

  /* The editor's control bar becomes the band: same height + border; back link
     left, actions pushed right. */
  .workspace__pane .sheet__top-bar {
    height: var(--workspace-band-height);
    padding-block: 0;
    padding-inline: var(--space-xl);
    border-bottom-color: var(--color-spring-wood-600);
    justify-content: flex-start;
    flex-wrap: nowrap;
  }

  .workspace__pane .sheet__top-bar .sheet__actions {
    margin-left: auto;
  }

  /* Rail side of the band: the space switcher gets the same height and a border
     that extends to the seam, continuing into the pane band's border. */
  .content-rail .space-header {
    height: var(--workspace-band-height);
    padding-bottom: 0;
    margin-inline: -0.75rem;
    padding-inline: 0.75rem;
    border-bottom-color: var(--color-spring-wood-600);
  }

  .content-rail .space-header .space-switcher__trigger {
    margin-left: 0;
  }
}

/* Below the rail breakpoint the surface goes full-bleed: a negative margin cancels the
   workspace gutter and radius/shadow drop. Scoped to .surface — editor + space-bar keep theirs. */
@media (max-width: 1023px) {
  .workspace__pane > .surface {
    margin-inline: calc(-1 * var(--page-gutter));
    border-radius: 0;
    box-shadow: none;
    border-top: 1px solid var(--color-spring-wood-300);
  }

  .workspace__pane > .surface > .surface__body {
    padding-inline: var(--page-gutter);
  }
}

/* Mobile-only space identity + switcher. The rail (which hosts these on desktop)
   is hidden below 1024px, so surface the same switcher above the pane content. */
.workspace__space-bar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-block: var(--space-xs);
}

.workspace__space-bar .space-header {
  flex: 1;
  min-width: 0;
  padding-bottom: 0;
  border-bottom: none;
}

/* The bar owns the top gap, so the content below drops its own top padding and
   doesn't double up. */
.workspace__space-bar + .surface,
.workspace__space-bar + .sheet-wrapper {
  padding-top: 0;
}

@media (min-width: 1024px) {
  .workspace__space-bar {
    display: none;
  }
}

/* ---- The rail ---- */

.content-rail {
  display: none;
}

@media (min-width: 1024px) {
  .content-rail {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: calc(var(--navbar-height) + var(--space-md));
    align-self: start;
    max-height: calc(100vh - var(--navbar-height) - var(--space-xl));
    margin-left: 0.75rem;
    padding: 0 0.75rem var(--space-md);
  }

  .content-rail__top {
    flex-shrink: 0;
  }

  .content-rail__tree {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    margin-inline: -0.75rem;
    padding-inline: 0.75rem;
  }
}

.content-rail__top {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.content-rail__home {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: -0.75rem;
  margin-bottom: var(--space-xs);
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-armadillo-800);
  text-decoration: none;
  transition: background-color var(--transition-fast);

  &:hover {
    background-color: rgb(0 0 0 / 0.05);
  }
}

.content-rail__home--current,
.content-rail__home--current:hover {
  color: var(--color-armadillo-900);
  background-color: rgb(0 0 0 / 0.08);
}

.content-rail__home .bi {
  flex-shrink: 0;
  width: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  color: var(--color-armadillo-500);
  transform: translateX(0.125rem);
}

.content-rail__home--current .bi {
  color: var(--color-armadillo-700);
}

.content-rail__new {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-left: -0.75rem;
  padding: 0.375rem 0.75rem;
  border: none;
  border-radius: var(--radius-md);
  background: none;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-armadillo-600);
  transition: background-color var(--transition-normal);

  &:hover {
    background-color: rgb(0 0 0 / 0.05);
    color: var(--color-armadillo-800);
  }
}

.content-rail__group {
  margin-top: var(--space-xs);
}

.content-rail__collection {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: -0.75rem;
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-armadillo-800);
  transition: background-color var(--transition-fast);

  &:hover {
    background-color: rgb(0 0 0 / 0.05);
  }
}

.content-rail__collection--current,
.content-rail__collection--current:hover {
  color: var(--color-armadillo-900);
  background-color: rgb(0 0 0 / 0.08);
}

.content-rail__chevron {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-armadillo-500);
  font-size: 0.75rem;
  cursor: pointer;
  transition: transform var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);

  &:hover {
    background-color: rgb(0 0 0 / 0.08);
    color: var(--color-armadillo-700);
  }
}

.content-rail__group--expanded .content-rail__chevron {
  transform: rotate(90deg);
}

.content-rail__collection-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
}

.content-rail__action {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-armadillo-400);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);

  &:hover {
    background-color: rgb(0 0 0 / 0.08);
    color: var(--color-armadillo-700);
  }
}

.content-rail__collection:hover .content-rail__action,
.content-rail__article:hover .content-rail__action,
.content-rail__action:focus-visible,
.content-rail__article:has(.rail-menu:popover-open) .content-rail__action,
.content-rail__collection:has(.rail-menu:popover-open) .content-rail__action {
  opacity: 1;
}

.content-rail__create {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.content-rail__create .content-rail__action {
  opacity: 1;
}

.content-rail__article {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: -0.75rem;
  padding: 0.3125rem 0.75rem;
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast);

  &:hover {
    background-color: rgb(0 0 0 / 0.05);
  }
}

.content-rail__article--current,
.content-rail__article--current:hover {
  background-color: rgb(0 0 0 / 0.08);
}

.content-rail__article + .content-rail__article {
  margin-top: var(--space-2xs);
}

/* Absolute in the row's left padding so it's a left affordance without reserving
   in-flow width (which would push the chevron/title out of line with the picker).
   Box width capped to the padding so the dots sit inside the squircle, clear of the chevron. */
.content-rail__drag-handle {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: var(--color-armadillo-300);
  cursor: grab;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.content-rail__article:hover .content-rail__drag-handle,
.content-rail__collection:hover .content-rail__drag-handle {
  opacity: 1;
}

.content-rail__drag-handle:active {
  cursor: grabbing;
}

/* Section heading rows carry the same left drag handle as articles; nudge it into the
   gutter so it lines up with the article handles nested below it. */
.content-rail__section-handle {
  left: calc(var(--space-md) - 0.75rem);
}

.article-toc__heading-row:hover .content-rail__section-handle {
  opacity: 1;
}

.rail-section.sortable-ghost {
  opacity: 0.4;
}

.content-rail__article > .article-toc__link {
  flex: 1;
  min-width: 0;
}

.content-rail__article-actions {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

/* Native popover → top layer, so it escapes the rail's overflow clipping. */
.rail-menu {
  position: fixed;
  inset: auto;
  margin: 0;
  min-width: 11rem;
  padding: 0.25rem;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: var(--shadow-lg);
  outline: 1px solid rgb(229 231 235 / 0.5);
  opacity: 0;
  transform: scale(0.95);
  transition: opacity var(--transition-normal), transform var(--transition-normal);
  transform-origin: top right;
}

/* The menu opens smoothly, like the space-switcher dropdown; flipped menus grow
   from the bottom corner. */
.rail-menu--flip {
  transform-origin: bottom right;
}

.rail-menu--open {
  opacity: 1;
  transform: scale(1);
}

.rail-create {
  width: 17rem;
  max-width: calc(100vw - 2rem);
  min-width: 0;
  padding: 0;
}

.rail-menu form {
  margin: 0;
}

.rail-menu .form__actions {
  flex-direction: row;
  justify-content: flex-end;
}

.rail-menu .form__actions > .btn {
  flex: 0 0 auto;
}

.content-rail__articles {
  display: none;
}

.content-rail__group--expanded > .content-rail__articles {
  display: block;
  padding-top: var(--space-xs);
}

/* Articles nest under their (expanded) collection, reusing .article-toc__*. */
.content-rail__tree .article-toc__list {
  margin-left: var(--space-md);
}

.content-rail__tree .article-toc__heading {
  margin-left: var(--space-md);
}

.article-toc__heading-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
}

.article-toc__heading-row:hover .content-rail__action,
.article-toc__heading-row:has(.rail-menu:popover-open) .content-rail__action {
  opacity: 1;
}