/*
 * XFramework Workspace — canonical shell layout
 *
 * Loaded after styles.css. This file owns only the application shell,
 * integrated navigation rail, document command bar, filters, and menus.
 * Semantic editors and the content-only Viewer continue to use styles.css.
 */

/* ── Global header navigation ───────────────────────────────── */
.app-header { justify-content: flex-start; }
.workspace-product-nav {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: auto;
}
.workspace-product-link {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.72rem;
  border: 1px solid transparent;
  border-radius: 9px;
  color: #c5d6d1;
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 760;
}
.workspace-product-link:hover,
.workspace-product-link:focus-visible,
.workspace-product-link.is-current {
  color: white;
  border-color: rgb(255 255 255 / 0.18);
  background: rgb(255 255 255 / 0.08);
}
.workspace-product-link.is-current { color: #9ce2d5; }
.button-header {
  color: #dce9e5;
  background: rgb(255 255 255 / 0.05);
  border-color: rgb(255 255 255 / 0.2);
}
.navigation-mobile-toggle { display: none; }

/* ── Two-column fixed shell ─────────────────────────────────── */
@media (min-width: 761px) {
  html, body { height: 100%; }
  body {
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  body > .app-header,
  body > .auth-notice { flex: none; }
  .workspace-shell {
    flex: 1 1 auto;
    width: 100%;
    height: auto;
    min-height: 0;
    grid-template-columns: minmax(306px, 344px) minmax(540px, 1fr);
    gap: 0.75rem;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .workspace-shell.navigation-collapsed {
    grid-template-columns: 54px minmax(540px, 1fr);
  }
  .workspace-shell.navigation-collapsed.is-editor-fullscreen {
    grid-template-columns: minmax(0, 1fr);
  }
  .navigation-rail,
  .editor-panel {
    height: 100%;
    min-height: 0;
  }
}

.workspace-shell {
  max-width: none;
  min-height: 0;
  padding: 0.75rem;
}
.navigation-rail {
  min-width: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
  border-radius: 15px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.navigation-rail-content {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(120px, var(--navigation-folders-height, 42%)) 9px minmax(160px, 1fr);
  overflow: hidden;
}
.rail-search { padding: 0.85rem 0.85rem 0.65rem; }
.rail-search .search-box { width: 100%; min-width: 0; }
.navigation-section {
  min-width: 0;
  min-height: 0;
  max-height: none;
  display: flex;
  flex-direction: column;
  padding: 0.25rem 0.72rem 0.72rem;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: transparent;
}
.navigation-section .panel-heading { flex: 0 0 auto; }
.navigation-section .panel-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.navigation-divider {
  position: relative;
  margin: 0 0.72rem;
  cursor: row-resize;
  touch-action: none;
}
.navigation-divider::before {
  content: "";
  position: absolute;
  inset: 3px 0;
  border-radius: 999px;
  background: var(--line);
  transition: background 120ms ease, box-shadow 120ms ease;
}
.navigation-divider:hover::before,
.navigation-divider:focus-visible::before,
.navigation-divider.is-resizing::before {
  background: var(--green);
  box-shadow: 0 0 0 3px rgb(21 107 93 / 0.14);
}
.navigation-divider:focus-visible { outline: none; }
.navigation-divider.is-resizing { cursor: row-resize; }
body.navigation-resizing { cursor: row-resize; user-select: none; }
.records-panel { border-left: 0; }
.records-heading .panel-heading-actions { flex-wrap: wrap; justify-content: flex-end; }
.navigation-rail-launcher { display: none; }
.workspace-shell.navigation-collapsed .navigation-rail-content { display: none; }
.workspace-shell.navigation-collapsed .navigation-rail-launcher {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.55rem;
  color: #80908b;
}
.workspace-shell.navigation-collapsed .navigation-rail-launcher > span { font-size: 0.9rem; }
.panel-collapse-button { display: grid; }

.editor-panel {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.workspace-shell.is-editor-fullscreen > .navigation-rail { display: none; }

/* ── Mobile navigation drawer ───────────────────────────────── */
.navigation-scrim {
  position: fixed;
  inset: 0;
  z-index: 39;
  padding: 0;
  border: 0;
  background: rgb(9 25 21 / 0.42);
  cursor: pointer;
  touch-action: none;
}
@media (max-width: 760px) {
  html, body { height: auto; min-height: 100%; }
  html { overflow-y: auto; }
  body { min-height: 100dvh; overflow-x: clip; overflow-y: visible; }
  html.navigation-drawer-open,
  body.navigation-drawer-open { overflow: hidden; }
  .app-header {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.45rem 0.6rem;
    padding-block: 0.55rem;
  }
  .brand { min-width: 0; }
  .brand > span:last-child { min-width: 0; }
  .brand strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .workspace-product-nav { grid-column: 1 / -1; grid-row: 2; width: 100%; margin-left: 0; }
  .workspace-product-link { min-height: 44px; flex: 1; justify-content: center; padding-block: 0.4rem; }
  .header-actions { grid-column: 2; grid-row: 1; margin-left: 0; gap: 0.35rem; }
  .navigation-mobile-toggle { display: inline-flex; }
  .sync-state, .identity-copy { display: none; }
  .workspace-shell {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    overflow: visible;
  }
  .navigation-rail {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 40;
    width: min(360px, calc(100vw - 24px));
    height: 100dvh;
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-radius: 0 15px 15px 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-102%);
    transition: transform 180ms ease, visibility 180ms step-end;
  }
  body.navigation-drawer-open .navigation-rail {
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
    transition: transform 180ms ease;
  }
  .navigation-rail-content,
  .workspace-shell.navigation-collapsed .navigation-rail-content {
    min-height: max-content;
    display: block;
    overflow: visible;
  }
  .workspace-shell.navigation-collapsed .navigation-rail-launcher { display: none; }
  .navigation-section {
    padding-inline: 0.72rem;
    overflow: visible;
  }
  .navigation-section .panel-content {
    min-height: auto;
    flex: none;
    overflow: visible;
    overscroll-behavior: auto;
    scrollbar-gutter: auto;
  }
  .navigation-divider { height: 1px; margin: 0 0.9rem; pointer-events: none; }
  .navigation-divider::before { inset: 0; }
  .editor-panel {
    min-height: 0;
    height: auto;
    overflow: visible;
    overscroll-behavior: auto;
    border-radius: 14px;
  }
  .editor-header { align-items: stretch; flex-direction: column; }
  .editor-actions { justify-content: start; }

  .editor-header.document-command-bar {
    position: static;
    z-index: auto;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.55rem;
    padding-block: 0.65rem;
  }
  .document-command-identity .eyebrow,
  .document-command-identity .record-identity { display: none; }
  .document-command-identity h2 {
    max-width: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1.05rem;
    line-height: 1.3;
  }
  .editor-actions.document-command-actions {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
  }
  .document-command-actions > .workspace-menu:first-child { order: 1; }
  .document-command-actions > .visibility-control { order: 2; }
  .document-command-actions > #save-record { order: 3; flex: 1 1 7.5rem; }
  .document-command-actions > .editor-fullscreen-toggle { order: 4; margin-left: auto; }
  .document-command-actions > .workspace-menu-end { order: 5; }
  .document-command-actions > #manage-document-attachments { order: 6; flex: 1 1 100%; }
  .document-command-actions .visibility-control > span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .document-command-actions .visibility-control select { width: auto; min-height: 44px; }

  .document-intro > .eyebrow,
  .document-intro > p:not(.eyebrow) { display: none; }
  .document-intro { padding-bottom: 0.65rem; }
  .document-intro h3 { font-size: 1.12rem; }
}

@media (max-width: 620px) {
  .brand > span:last-child, .identity .avatar { display: none; }
  .workspace-shell { padding: 0.55rem; }
  .document-command-actions > .workspace-menu:first-child > summary { font-size: 0; }
  .document-command-actions > .workspace-menu:first-child > summary::before { content: "分享"; font-size: 0.73rem; }
}

/* ── Document command bar ───────────────────────────────────── */
.document-command-bar {
  position: sticky;
  top: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) auto;
  align-items: center;
  gap: 0.55rem 0.8rem;
  padding: 0.58rem 0.9rem;
  background: var(--surface-soft, #fbfaf6);
}
.document-command-identity {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
}
.document-command-identity .eyebrow { flex: 0 0 auto; }
.document-command-identity h2 {
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.05rem;
}
.document-command-identity .record-identity {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#editor-workspace[data-document-type="flow"] .document-command-identity h2,
#editor-workspace[data-document-type="graph"] .document-command-identity h2 { display: none; }
.document-command-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.document-command-actions .visibility-control { gap: 0.3rem; }
.document-command-actions .visibility-control select { min-height: 32px; padding-block: 0.28rem; }
.editor-fullscreen-toggle { flex: 0 0 auto; }
.editor-fullscreen-toggle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}
.editor-fullscreen-toggle[aria-pressed="true"] {
  color: white;
  border-color: var(--green);
  background: var(--green);
}

/* ── Menus ──────────────────────────────────────────────────── */
.workspace-menu { position: relative; }
.workspace-menu > summary { list-style: none; cursor: pointer; user-select: none; }
.workspace-menu > summary::-webkit-details-marker { display: none; }
.workspace-menu[open] > summary { outline: 2px solid var(--green); outline-offset: 1px; }
.workspace-menu-list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  min-width: 15rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  padding: 0.4rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 6px 24px rgb(24 46 40 / 0.14);
}
.workspace-menu-list .button,
.workspace-menu-list a.button { width: 100%; justify-content: flex-start; text-align: left; }
.workspace-menu-list #delete-record { margin-top: 0.35rem; border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; }
.workspace-menu-list.document-route-actions { padding: 0.4rem; border: 1px solid var(--line); }

/* ── Catalog filters ────────────────────────────────────────── */
.catalog-filter-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; padding: 0.15rem 0 0.55rem; }
.catalog-filter-chip {
  padding: 0.18rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: inherit;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
}
.catalog-filter-chip.is-on { color: white; border-color: var(--green); background: var(--green); }
.record-card.is-filtered-out { display: none; }

/* ── Auth gate ──────────────────────────────────────────────── */
.brand small { letter-spacing: 0.02em; }
body[data-auth="pending"] .workspace-shell,
body[data-auth="pending"] .auth-notice,
body[data-auth="out"] .workspace-shell,
body[data-auth="out"] .auth-notice,
body[data-auth="pending"] .navigation-mobile-toggle,
body[data-auth="out"] .navigation-mobile-toggle { display: none !important; }
.landing-gate { display: none; }
body[data-auth="pending"] .landing-gate,
body[data-auth="out"] .landing-gate {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
}
.landing-gate-card { max-width: 36rem; display: grid; gap: 0.85rem; justify-items: center; text-align: center; }
.landing-gate-card h1 { margin: 0; font-size: 1.65rem; }
.landing-gate-copy { margin: 0; color: var(--muted); line-height: 1.65; }
.landing-gate-pending { display: none; color: var(--muted); }
.landing-gate-cta { display: none; flex-direction: column; align-items: center; gap: 0.6rem; }
.landing-gate-note { max-width: 26rem; margin: 0; color: var(--muted); font-size: 0.83rem; }
body[data-auth="pending"] .landing-gate-pending { display: block; }
body[data-auth="out"] .landing-gate-cta { display: flex; }

@media (prefers-reduced-motion: reduce) {
  .navigation-rail { transition: none; }
}