@k2b/cloud 0.6.0-rc.0

package/src/styles/utilities-navigation.css

@@ -0,0 +1,1054 @@
+/* Navigation and list interaction utilities — flat, solid surfaces */
+@utility segmented-control {
+  border: 1px solid var(--ui-segment-border);
+  border-radius: var(--ui-radius-surface);
+  background: var(--ui-segment-surface);
+  box-shadow: var(--ui-segment-shadow);
+  @apply inline-flex w-full items-stretch p-0.5;
+}
+
+@utility segmented-control-item {
+  min-height: var(--ui-control-sm);
+  border-radius: var(--ui-segment-item-radius);
+  color: var(--ui-segment-inactive-text);
+  @apply relative z-0 flex min-w-0 flex-1 items-center justify-center gap-1 px-2 py-1 text-xs leading-4 outline-none;
+  @apply transition-[background-color,color,box-shadow] duration-150;
+  @apply focus-ui disabled:cursor-not-allowed;
+
+  &:hover {
+    background: var(--ui-segment-hover);
+    color: var(--ui-segment-hover-text);
+  }
+
+  &[aria-checked="true"] {
+    z-index: 10;
+    border-radius: var(--ui-segment-active-radius);
+    background: var(--ui-segment-active-surface);
+    color: var(--ui-segment-active-text);
+    box-shadow: var(--ui-segment-active-shadow);
+  }
+
+  &[data-divider="true"]::after {
+    content: "";
+    position: absolute;
+    top: 0.25rem;
+    right: 0;
+    bottom: 0.25rem;
+    width: 1px;
+    background: var(--ui-segment-divider);
+  }
+}
+
+@utility pagination-item {
+  width: var(--ui-control-sm);
+  height: var(--ui-control-sm);
+  border-radius: var(--ui-radius-control);
+  @apply inline-flex shrink-0 items-center justify-center text-xs tabular-nums text-dimmed;
+  @apply transition-[background-color,color,border-color] duration-150 hover:text-primary;
+  @apply focus-ui;
+
+  &:hover {
+    background: var(--ui-pagination-hover);
+  }
+}
+
+@utility pagination-item-current {
+  border: 1px solid var(--ui-pagination-current-border);
+  background: var(--ui-pagination-current-surface);
+  color: var(--ui-pagination-current-text);
+  @apply font-medium;
+}
+
+@utility pagination-ellipsis {
+  width: var(--ui-control-sm);
+  height: var(--ui-control-sm);
+  @apply shrink-0 items-center justify-center text-xs text-dimmed select-none;
+}
+
+@media (max-width: 767px) {
+  .segmented-control-item,
+  .pagination-item {
+    min-height: 2.5rem;
+  }
+
+  .pagination-item {
+    width: 2.5rem;
+    height: 2.5rem;
+  }
+}
+
+@utility list-item {
+  display: flex !important;
+  padding: 0.5rem 0.75rem;
+  border-left: 0;
+  border-radius: var(--ui-radius-surface);
+  @apply items-center gap-2 text-sm leading-none cursor-pointer text-dimmed;
+  @apply transition-[background-color,color] duration-150 ease-out hover:text-secondary;
+
+  & + .list-item {
+    margin-top: 0.25rem;
+  }
+
+  &:hover {
+    background: var(--ui-hover);
+  }
+}
+
+/* Sidebar layout primitives */
+@utility sidebar {
+  @apply flex h-full min-h-0 flex-col gap-3;
+  border: 1px solid var(--ui-border-strong);
+  border-radius: var(--ui-radius-surface);
+  background: var(--ui-surface);
+  /* Same gentle inset bevel as `paper` so the sidebar reads as a dimensional surface. */
+  box-shadow: var(--ui-shadow-surface);
+}
+
+@utility sidebar-container {
+  @apply hidden lg:flex w-52 shrink-0 min-h-0 overflow-y-auto flex-col gap-3;
+}
+
+@utility sidebar-header-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: var(--ui-radius-control);
+  @apply flex items-center justify-center text-white shrink-0;
+}
+
+@utility sidebar-header-title {
+  @apply truncate text-sm font-semibold text-primary;
+}
+
+@utility sidebar-header-subtitle {
+  @apply text-xs text-dimmed truncate;
+}
+
+@utility sidebar-header-settings {
+  @apply p-0.5 text-dimmed hover:text-primary transition-colors shrink-0;
+}
+
+@utility sidebar-group {
+  @apply flex flex-col gap-1.5;
+}
+
+@utility sidebar-container-mobile {
+  @apply lg:hidden flex flex-col gap-3;
+}
+
+@utility sidebar-mobile-toggle {
+  @apply sidebar-header cursor-pointer select-none list-none;
+}
+
+@utility sidebar-mobile-actions {
+  @apply flex flex-wrap gap-2;
+}
+
+@utility sidebar-item-mobile {
+  @apply btn-input btn-input-sm;
+}
+
+@utility sidebar-header {
+  @apply flex min-h-10 items-center gap-2;
+}
+
+@utility sidebar-body {
+  @apply flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto;
+}
+
+@utility sidebar-footer {
+  @apply mt-auto flex flex-col gap-2;
+}
+
+@utility sidebar-icon-grid-wrap {
+  @apply flex flex-col gap-1;
+}
+
+@utility sidebar-icon-grid {
+  @apply grid gap-1.5;
+}
+
+@utility sidebar-icon-action {
+  @apply flex h-12 w-full min-w-0 items-center justify-center rounded-xl border-0 bg-zinc-100/70 text-zinc-600;
+  @apply transition-[background-color,color,transform,box-shadow] duration-150 ease-out hover:bg-zinc-200 hover:text-zinc-900;
+  @apply focus-ui;
+  @apply active:scale-[0.98];
+  @apply dark:bg-zinc-800/65 dark:text-zinc-300 dark:hover:bg-zinc-700 dark:hover:text-zinc-100;
+  /* Raised tile (matches the redesign); sinks on press */
+  box-shadow: var(--ui-control-bevel);
+  &:active {
+    box-shadow: var(--ui-control-press);
+  }
+}
+
+@utility sidebar-icon-action-active {
+  @apply bg-blue-50 text-blue-700 hover:bg-blue-100 hover:text-blue-800;
+  @apply dark:bg-blue-950/45 dark:text-blue-300 dark:hover:bg-blue-900/45 dark:hover:text-blue-200;
+  box-shadow:
+    inset 0 0 0 1px color-mix(in srgb, var(--color-blue-500) 22%, transparent),
+    var(--ui-control-bevel);
+}
+
+@utility sidebar-icon-action-success {
+  @apply bg-green-50 text-green-700 hover:bg-green-100 hover:text-green-800;
+  @apply dark:bg-green-950/35 dark:text-green-300 dark:hover:bg-green-900/45 dark:hover:text-green-200;
+}
+
+@utility sidebar-icon-action-danger {
+  @apply bg-red-50 text-red-700 hover:bg-red-100 hover:text-red-800;
+  @apply dark:bg-red-950/35 dark:text-red-300 dark:hover:bg-red-900/45 dark:hover:text-red-200;
+}
+
+@utility sidebar-section-title {
+  @apply text-[0.6875rem] font-medium normal-case tracking-normal text-dimmed select-none;
+}
+
+/* Sidebar item primitives */
+@utility app-accent-text {
+  color: var(--ui-app-accent-text);
+}
+
+@utility app-accent-border {
+  border-color: var(--ui-app-accent-border);
+}
+
+@utility sidebar-item {
+  display: flex !important;
+  border-radius: var(--ui-radius-surface);
+  @apply min-h-8 items-center gap-2 px-2 py-1.5 text-xs leading-tight text-dimmed;
+  @apply transition-[background-color,color] duration-150 ease-out hover:text-secondary;
+  @apply focus-ui;
+
+  &:hover {
+    background: var(--ui-hover);
+  }
+}
+
+@utility sidebar-item-tall {
+  @apply min-h-10 py-2;
+}
+
+@utility sidebar-item-active {
+  position: relative;
+  background: var(--ui-selected);
+  color: color-mix(in srgb, var(--app-accent, var(--color-blue-500)) 78%, black);
+  @apply font-medium;
+  box-shadow: var(--ui-shadow-surface);
+
+  &:hover {
+    color: color-mix(in srgb, var(--app-accent, var(--color-blue-500)) 88%, black);
+  }
+
+  &::before {
+    content: "";
+    background: var(--app-accent, var(--color-blue-500));
+    @apply pointer-events-none absolute left-1 top-1/2 h-3.5 w-0.5 -translate-y-1/2 rounded-full;
+  }
+}
+
+.dark .sidebar-item-active {
+  color: color-mix(in srgb, var(--app-accent, var(--color-blue-400)) 58%, white);
+}
+
+.dark .sidebar-item-active:hover {
+  color: color-mix(in srgb, var(--app-accent, var(--color-blue-400)) 45%, white);
+}
+
+@utility sidebar-item-meta {
+  @apply mt-0.5 text-left text-xs leading-tight text-dimmed;
+}
+
+@utility sidebar-item-action {
+  @apply inline-flex h-6 w-6 shrink-0 items-center justify-center rounded text-dimmed;
+  @apply transition-[background-color,color,opacity] duration-150 ease-out hover:text-secondary hover:bg-zinc-100;
+  @apply dark:hover:bg-zinc-800;
+}
+
+.sidebar-item-main {
+  display: flex;
+  min-width: 0;
+  width: 100%;
+  align-items: center;
+  gap: 0.5rem;
+  text-align: left;
+  outline: none;
+}
+
+.sidebar-item-icon {
+  display: inline-flex;
+  width: 1rem;
+  flex: 0 0 1rem;
+  align-items: center;
+  justify-content: center;
+}
+
+.sidebar-item-label {
+  min-width: 0;
+  flex: 1 1 auto;
+  overflow: hidden;
+  text-align: left;
+  white-space: nowrap;
+}
+
+.sidebar-item-label-text {
+  display: inline-block;
+  min-width: max-content;
+  transform: translateX(0);
+}
+
+.sidebar-item-meta-trailing {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+}
+
+.sidebar-item-has-action {
+  position: relative;
+}
+
+.sidebar-item-has-action .sidebar-item-main {
+  transition: padding-right 150ms ease-out;
+}
+
+.sidebar-item-has-action > .sidebar-item-action {
+  position: absolute;
+  top: 50%;
+  right: 0.375rem;
+  z-index: 1;
+  opacity: 0;
+  transform: translateY(-50%);
+  pointer-events: none;
+}
+
+.sidebar-item-has-action:is(:hover, :focus-within) .sidebar-item-main {
+  padding-right: 1.5rem;
+}
+
+.sidebar-item-has-action:is(:hover, :focus-within) > .sidebar-item-action {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+@media (hover: none), (max-width: 1023px) {
+  .sidebar-item-has-action .sidebar-item-main {
+    padding-right: 1.5rem;
+  }
+
+  .sidebar-item-has-action > .sidebar-item-action {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+
+.sidebar-item-has-action:focus-within {
+  box-shadow: var(--ui-focus);
+}
+
+@keyframes sidebar-label-marquee {
+  0%,
+  15% {
+    transform: translateX(0);
+  }
+  85%,
+  100% {
+    transform: translateX(calc(-1 * var(--sidebar-label-overflow)));
+  }
+}
+
+.sidebar-item-label[data-overflow="true"][data-marquee="true"]:hover .sidebar-item-label-text,
+[data-app-workspace-item]:focus-within .sidebar-item-label[data-overflow="true"][data-marquee="true"] .sidebar-item-label-text {
+  animation: sidebar-label-marquee 4s ease-in-out 0.2s infinite alternate;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sidebar-item-label-text {
+    animation: none !important;
+    transform: none !important;
+  }
+}
+
+/* The separator owns a generous hit area. Its full-edge guide and centered
+   handle overlay the workspace and never change layout. */
+.workspace-resize-handle {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 20;
+  display: none;
+  width: 0.875rem;
+  margin: 0;
+  padding: 0;
+  cursor: col-resize;
+  touch-action: none;
+  border: 0;
+  background: transparent;
+  transform: translateX(-50%);
+}
+
+.app-workspace[data-workspace-resizable="false"] .workspace-resize-handle {
+  display: none;
+}
+
+.workspace-resize-handle-sidebar {
+  left: var(--workspace-sidebar-width, 13rem);
+}
+
+.workspace-resize-handle-detail {
+  right: var(--workspace-panel-size, var(--workspace-detail-width, 24rem));
+  transform: translateX(50%);
+}
+
+.workspace-resize-handle-drawer {
+  top: auto;
+  right: 0;
+  bottom: var(--workspace-panel-size, 15rem);
+  left: 0;
+  width: auto;
+  height: 0.875rem;
+  cursor: row-resize;
+  transform: translateY(50%);
+}
+
+.workspace-resize-handle::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  width: 1px;
+  background: var(--ui-border-strong);
+  opacity: 0;
+  transform: translateX(-50%);
+  transition: opacity 120ms ease-out;
+}
+
+.workspace-resize-handle-drawer::before {
+  top: 50%;
+  right: 0;
+  bottom: auto;
+  left: 0;
+  width: auto;
+  height: 1px;
+  transform: translateY(-50%);
+}
+
+.workspace-resize-handle[data-workspace-resize-shadow="true"]::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 50%;
+  width: 0.875rem;
+  background: linear-gradient(to left, rgb(24 24 27 / 0.035), rgb(24 24 27 / 0.014) 45%, transparent);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 150ms ease-out;
+}
+
+.workspace-resize-handle[data-workspace-resize-shadow="true"][data-workspace-resize-edge="start"]::after {
+  right: auto;
+  left: 50%;
+  background: linear-gradient(to right, rgb(24 24 27 / 0.035), rgb(24 24 27 / 0.014) 45%, transparent);
+}
+
+.dark .workspace-resize-handle[data-workspace-resize-shadow="true"]::after {
+  background: linear-gradient(to left, rgb(0 0 0 / 0.09), rgb(0 0 0 / 0.036) 45%, transparent);
+}
+
+.dark .workspace-resize-handle[data-workspace-resize-shadow="true"][data-workspace-resize-edge="start"]::after {
+  background: linear-gradient(to right, rgb(0 0 0 / 0.09), rgb(0 0 0 / 0.036) 45%, transparent);
+}
+
+.workspace-resize-handle-drawer[data-workspace-resize-shadow="true"]::after {
+  top: 50%;
+  right: 0;
+  bottom: auto;
+  left: 0;
+  width: auto;
+  height: 0.875rem;
+  background: linear-gradient(to bottom, rgb(24 24 27 / 0.035), rgb(24 24 27 / 0.014) 45%, transparent);
+}
+
+.dark .workspace-resize-handle-drawer[data-workspace-resize-shadow="true"]::after {
+  background: linear-gradient(to bottom, rgb(0 0 0 / 0.09), rgb(0 0 0 / 0.036) 45%, transparent);
+}
+
+.workspace-resize-handle > span {
+  position: absolute;
+  top: 50%;
+  bottom: auto;
+  left: 50%;
+  width: 3px;
+  height: 2rem;
+  border-radius: 999px;
+  background: var(--ui-border-strong);
+  opacity: 0;
+  transform: translate(-50%, -50%);
+  transition: opacity 120ms ease-out;
+}
+
+.workspace-resize-handle-drawer > span {
+  top: 50%;
+  left: 50%;
+  width: 2rem;
+  height: 3px;
+  transform: translate(-50%, -50%);
+}
+
+.workspace-resize-handle:is(:hover, :focus-visible)::before,
+.workspace-resize-handle[data-workspace-resize-active="true"]::before,
+.workspace-resize-handle[data-workspace-resize-shadow="true"]:is(:hover, :focus-visible)::after,
+.workspace-resize-handle[data-workspace-resize-shadow="true"][data-workspace-resize-active="true"]::after,
+.workspace-resize-handle:is(:hover, :focus-visible) > span,
+.workspace-resize-handle[data-workspace-resize-active="true"] > span {
+  opacity: 1;
+}
+
+.workspace-resize-handle:focus-visible {
+  outline: none;
+}
+
+@media (min-width: 1024px) {
+  .workspace-resize-handle {
+    display: block;
+  }
+
+  .app-workspace > .workspace-sidebar[data-workspace-resizable="true"] {
+    width: var(--workspace-sidebar-width, 13rem);
+  }
+
+  .app-workspace > .workspace-sidebar[data-workspace-collapsible="true"] {
+    transition: width 140ms ease-out;
+  }
+
+  .workspace-main-split {
+    flex-direction: row;
+  }
+
+  .workspace-main-pane {
+    display: flex;
+    width: var(--workspace-panel-size, 20rem);
+    min-width: 0;
+    min-height: 0;
+    flex: 0 0 var(--workspace-panel-size, 20rem);
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .workspace-main-pane-primary {
+    width: auto;
+    flex: 1 1 auto;
+  }
+
+  .workspace-main .workspace-resize-handle-pane {
+    position: relative;
+    inset: auto;
+    align-self: stretch;
+    height: auto;
+    flex: 0 0 0.875rem;
+    margin-inline: -0.4375rem;
+    transform: none;
+  }
+
+  .app-workspace[data-workspace-resize-active] > .workspace-sidebar[data-workspace-collapsible="true"] {
+    transition: none;
+  }
+
+  /* SSR island hosts remain real DOM parents even though they use
+     display: contents, so detail regions support both compositions. */
+  .app-workspace > .workspace-detail[data-workspace-resizable="true"],
+  .app-workspace > :is(solid-island, solid-client) > .workspace-detail[data-workspace-resizable="true"],
+  .app-workspace .workspace-content > .workspace-detail[data-workspace-resizable="true"],
+  .app-workspace .workspace-content > :is(solid-island, solid-client) > .workspace-detail[data-workspace-resizable="true"] {
+    width: var(--workspace-panel-size, var(--workspace-detail-width, 24rem));
+  }
+
+  .app-workspace .workspace-content > .workspace-resize-handle-detail,
+  .app-workspace .workspace-content > :is(solid-island, solid-client) > .workspace-resize-handle-detail {
+    position: relative;
+    inset: auto;
+    order: 3;
+    height: auto;
+    flex: 0 0 0.875rem;
+    margin-inline: -0.4375rem;
+    transform: none;
+  }
+
+  .app-workspace:has(> .workspace-sidebar) > .workspace-resize-handle-drawer {
+    left: var(--workspace-sidebar-width, 13rem);
+  }
+
+  .app-workspace > .workspace-resize-handle-detail:has(+ .workspace-detail.hidden),
+  .app-workspace > :is(solid-island, solid-client) > .workspace-resize-handle-detail:has(+ .workspace-detail.hidden),
+  .app-workspace .workspace-content > .workspace-resize-handle-detail:has(+ .workspace-detail.hidden),
+  .app-workspace .workspace-content > :is(solid-island, solid-client) > .workspace-resize-handle-detail:has(+ .workspace-detail.hidden),
+  .app-workspace > .workspace-resize-handle-drawer:has(+ .workspace-bottom-drawer.hidden) {
+    display: none;
+  }
+
+  .app-workspace > .workspace-bottom-drawer[data-workspace-resizable="true"] {
+    height: var(--workspace-panel-size, 15rem);
+  }
+}
+
+@media (max-width: 1023px) {
+  .workspace-main-split > [data-workspace-main-region] {
+    display: none;
+  }
+
+  .workspace-main-split > [data-workspace-mobile-active="true"] {
+    display: flex;
+    min-height: 0;
+    min-width: 0;
+    flex: 1 1 auto;
+  }
+
+  .app-workspace:has(> .workspace-detail:not(.hidden)) > .workspace-main,
+  .app-workspace > :is(solid-island, solid-client):has(> .workspace-detail:not(.hidden)) > .workspace-main,
+  .app-workspace > .workspace-content:has(> .workspace-detail:not(.hidden)) > .workspace-main,
+  .app-workspace > .workspace-content > :is(solid-island, solid-client):has(> .workspace-detail:not(.hidden)) > .workspace-main {
+    display: none;
+  }
+
+  .app-workspace > .workspace-detail:not(.hidden),
+  .app-workspace > :is(solid-island, solid-client) > .workspace-detail:not(.hidden),
+  .app-workspace > .workspace-content > .workspace-detail:not(.hidden),
+  .app-workspace > .workspace-content > :is(solid-island, solid-client) > .workspace-detail:not(.hidden) {
+    min-height: 0;
+    flex: 1 1 auto;
+  }
+
+  .app-workspace > .workspace-bottom-drawer:not(.hidden) {
+    max-height: 50%;
+  }
+}
+
+@keyframes workspace-sidebar-content-settle {
+  from {
+    opacity: 0.25;
+    transform: translateX(-0.125rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.app-workspace[data-workspace-sidebar-snapping="true"]
+  .workspace-sidebar[data-workspace-collapsible="true"]
+  :is(.workspace-sidebar-header, [data-sidebar-mode]) {
+  animation: workspace-sidebar-content-settle 120ms ease-out 30ms both;
+}
+
+/* Collapsible navigation is opt-in. Apps can curate a compact mode with
+   `sidebarMode`, while always-visible items degrade to accessible icon buttons. */
+.workspace-sidebar [data-sidebar-mode="collapsed"] {
+  display: none !important;
+}
+
+.cloud-app-canvas[data-workspace-sidebar-collapsed="true"]
+  .workspace-sidebar[data-workspace-collapsible="true"]
+  [data-sidebar-mode="expanded"] {
+  display: none !important;
+}
+
+.cloud-app-canvas[data-workspace-sidebar-collapsed="true"]
+  .workspace-sidebar[data-workspace-collapsible="true"]
+  [data-sidebar-mode="collapsed"] {
+  display: flex !important;
+}
+
+.cloud-app-canvas[data-workspace-sidebar-collapsed="true"] .workspace-sidebar[data-workspace-collapsible="true"] .workspace-sidebar-header {
+  justify-content: center;
+  padding-inline: 0;
+}
+
+.cloud-app-canvas[data-workspace-sidebar-collapsed="true"]
+  .workspace-sidebar[data-workspace-collapsible="true"]
+  .workspace-sidebar-header
+  > :not(.sidebar-header-icon) {
+  display: none;
+}
+
+.cloud-app-canvas[data-workspace-sidebar-collapsed="true"]
+  .workspace-sidebar[data-workspace-collapsible="true"]
+  :is(.sidebar-section-title, .sidebar-item-label, .sidebar-item-meta-trailing, .sidebar-item-action) {
+  display: none !important;
+}
+
+.cloud-app-canvas[data-workspace-sidebar-collapsed="true"]
+  .workspace-sidebar[data-workspace-collapsible="true"]
+  :is(.sidebar-item, .sidebar-item-main) {
+  justify-content: center;
+  padding-inline: 0;
+}
+
+.cloud-app-canvas[data-workspace-sidebar-collapsed="true"] .workspace-sidebar[data-workspace-collapsible="true"] .sidebar-icon-grid {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .app-workspace > .workspace-sidebar[data-workspace-collapsible="true"] {
+    transition: none;
+  }
+
+  .app-workspace[data-workspace-sidebar-snapping="true"]
+    .workspace-sidebar[data-workspace-collapsible="true"]
+    :is(.workspace-sidebar-header, [data-sidebar-mode]) {
+    animation: none;
+  }
+}
+
+/* Sidebar tree primitives */
+@utility sidebar-tree {
+  @apply flex flex-col gap-0.5;
+}
+
+@utility sidebar-tree-item {
+  @apply flex flex-col gap-0.5;
+}
+
+@utility sidebar-tree-row {
+  display: flex !important;
+  padding-left: calc(var(--sidebar-level, 0) * 0.75rem + 0.625rem);
+  border-radius: var(--ui-radius-surface);
+  @apply min-h-8 items-center gap-2 py-1 pr-2 text-xs text-dimmed;
+  @apply transition-[background-color,color] duration-150 ease-out hover:text-secondary;
+
+  &:hover {
+    background: var(--ui-hover);
+  }
+}
+
+@utility sidebar-tree-toggle {
+  @apply inline-flex h-4 w-4 shrink-0 items-center justify-center text-[10px] text-dimmed;
+}
+
+@utility list-item-active {
+  border-left: 0;
+  position: relative;
+  background: var(--ui-selected);
+  color: color-mix(in srgb, var(--app-accent, var(--color-blue-500)) 78%, black);
+  @apply rounded-lg font-medium;
+  box-shadow: var(--ui-shadow-surface);
+
+  &:hover {
+    color: color-mix(in srgb, var(--app-accent, var(--color-blue-500)) 88%, black);
+  }
+
+  &::before {
+    content: "";
+    background: var(--app-accent, var(--color-blue-500));
+    @apply pointer-events-none absolute left-1 top-1/2 h-3.5 w-0.5 -translate-y-1/2 rounded-full;
+  }
+}
+
+.dark .list-item-active {
+  color: color-mix(in srgb, var(--app-accent, var(--color-blue-400)) 58%, white);
+}
+
+.dark .list-item-active:hover {
+  color: color-mix(in srgb, var(--app-accent, var(--color-blue-400)) 45%, white);
+}
+
+@utility section-label {
+  @apply text-[0.6875rem] font-medium normal-case tracking-normal mb-5 text-dimmed select-none;
+}
+
+@utility rail-item {
+  border-right: 0;
+  border-radius: var(--ui-radius-surface);
+  @apply w-8 h-8;
+  @apply flex items-center justify-center text-dimmed;
+  @apply transition-[background-color,color] duration-150 ease-out;
+
+  &:hover {
+    background: var(--ui-hover);
+    @apply text-secondary;
+  }
+}
+
+@utility rail-item-active {
+  border: 1px solid color-mix(in srgb, var(--app-accent, var(--color-blue-500)) 52%, transparent);
+  border-radius: var(--ui-radius-surface);
+  color: color-mix(in srgb, var(--app-accent, var(--color-blue-500)) 78%, black);
+  background: transparent;
+  box-shadow: none;
+}
+
+.rail-item-active:hover {
+  color: color-mix(in srgb, var(--app-accent, var(--color-blue-500)) 88%, black);
+  background: transparent;
+}
+
+.dark .rail-item-active {
+  border-color: color-mix(in srgb, var(--app-accent, var(--color-blue-400)) 58%, transparent);
+  color: color-mix(in srgb, var(--app-accent, var(--color-blue-400)) 58%, white);
+  background: transparent;
+}
+
+.dark .rail-item-active:hover {
+  color: color-mix(in srgb, var(--app-accent, var(--color-blue-400)) 45%, white);
+  background: transparent;
+}
+
+/* Profile preferences stay Cloud-owned because their placement follows the
+   global shell. Width, height, and pointer media queries select an already
+   server-rendered variant; no client layout state or placeholder is needed. */
+.layout-profile-preferences {
+  position: relative;
+  display: inline-flex;
+  flex: none;
+}
+
+.layout-profile-preferences[data-placement="rail"] {
+  display: none;
+}
+
+.layout-profile-preferences__link,
+.layout-profile-preferences__dropdown-trigger {
+  display: none;
+  width: 2rem;
+  height: 2rem;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 0;
+  border-radius: var(--ui-radius-surface);
+  color: inherit;
+  background: transparent;
+  text-decoration: none;
+  transition: background-color 150ms ease-out;
+}
+
+.layout-profile-preferences__link:hover,
+.layout-profile-preferences__dropdown-trigger:hover {
+  background: var(--ui-hover);
+}
+
+.layout-profile-preferences__link:focus-visible,
+.layout-profile-preferences__dropdown-trigger:focus-visible {
+  outline: none;
+  box-shadow: var(--ui-focus);
+}
+
+.layout-profile-preferences__panel {
+  position: absolute;
+  z-index: 100;
+  display: none;
+  width: min(14rem, calc(100vw - 1rem));
+  flex-direction: column;
+  gap: 0.125rem;
+  padding: 0.25rem;
+  color: var(--color-zinc-700);
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition: opacity 120ms ease-out;
+}
+
+.dark .layout-profile-preferences__panel {
+  color: var(--color-zinc-300);
+}
+
+.layout-profile-preferences[data-placement="header"] .layout-profile-preferences__panel {
+  top: 100%;
+  right: 0;
+}
+
+.layout-profile-preferences[data-placement="rail"] .layout-profile-preferences__panel {
+  bottom: 0;
+  left: 100%;
+}
+
+.layout-profile-preferences:focus-within .layout-profile-preferences__panel {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+}
+
+.layout-profile-preferences__panel .menu-item > i {
+  width: 1rem;
+  flex: none;
+  text-align: center;
+}
+
+.layout-profile-preferences > .layout-profile-preferences__dropdown {
+  display: inline-flex;
+}
+
+.layout-profile-preferences__dropdown-trigger {
+  display: inline-flex;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .layout-profile-preferences:hover .layout-profile-preferences__panel {
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+  }
+}
+
+@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
+  .layout-profile-preferences__link,
+  .layout-profile-preferences__panel {
+    display: flex;
+  }
+
+  .layout-profile-preferences > .layout-profile-preferences__dropdown {
+    display: none;
+  }
+}
+
+/* Keep the 46px header for wider desktop viewports. Compact and 14-inch
+   laptop widths stay rail-only, while viewports wider than 1536px retain the
+   header. Because it becomes display:none, the shell flex gap adds no empty
+   top row or double spacing. */
+@media (min-width: 768px) and (max-width: 96rem) {
+  .cloud-app-canvas[data-layout-authenticated="true"] .layout-header {
+    display: none;
+  }
+
+  .cloud-app-canvas[data-layout-authenticated="true"] .layout-profile-preferences[data-placement="rail"] {
+    display: inline-flex;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .layout-profile-preferences__link,
+  .layout-profile-preferences__dropdown-trigger,
+  .layout-profile-preferences__panel {
+    transition: none;
+  }
+}
+
+/* MinimalLayout owns no page geometry. Its optional preference trigger is the
+   only positioned element and respects device safe areas in every corner. */
+.minimal-layout-preferences {
+  position: fixed;
+  z-index: 50;
+}
+
+.minimal-layout-preferences--top-left {
+  top: max(0.75rem, env(safe-area-inset-top));
+  left: max(0.75rem, env(safe-area-inset-left));
+}
+
+.minimal-layout-preferences--top-right {
+  top: max(0.75rem, env(safe-area-inset-top));
+  right: max(0.75rem, env(safe-area-inset-right));
+}
+
+.minimal-layout-preferences--bottom-left {
+  bottom: max(0.75rem, env(safe-area-inset-bottom));
+  left: max(0.75rem, env(safe-area-inset-left));
+}
+
+.minimal-layout-preferences--bottom-right {
+  right: max(0.75rem, env(safe-area-inset-right));
+  bottom: max(0.75rem, env(safe-area-inset-bottom));
+}
+
+.minimal-layout-preferences__trigger {
+  box-shadow: var(--ui-shadow-float);
+  backdrop-filter: blur(0.5rem);
+}
+
+/* Workspace navigation chrome and resource identity. */
+.workspace-sidebar-header {
+  min-height: var(--ui-control-md);
+  gap: 0.625rem;
+  padding: 0 0.25rem;
+}
+
+.workspace-sidebar-mobile > details {
+  overflow: hidden;
+  border: 0;
+  border-radius: 0;
+  background: var(--ui-surface-subtle);
+  box-shadow: none;
+}
+
+.workspace-sidebar-mobile .sidebar-mobile-toggle {
+  min-height: 2.75rem;
+  padding: 0.375rem 0.625rem;
+}
+
+.workspace-sidebar-mobile .sidebar-mobile-actions {
+  gap: var(--ui-space-control);
+  padding: 0 0.625rem 0.625rem;
+}
+
+.sidebar-header-icon {
+  width: 1.4375rem;
+  height: 1.4375rem;
+  border-radius: 0.4375rem;
+  background: color-mix(in srgb, var(--app-accent, var(--color-blue-500)) 9%, transparent) !important;
+  color: color-mix(in srgb, var(--app-accent, var(--color-blue-500)) 80%, black) !important;
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app-accent, var(--color-blue-500)) 16%, transparent);
+}
+
+.sidebar-header-icon-mobile {
+  background: color-mix(in srgb, var(--app-accent, var(--color-blue-500)) 9%, transparent) !important;
+  color: color-mix(in srgb, var(--app-accent, var(--color-blue-500)) 80%, black) !important;
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app-accent, var(--color-blue-500)) 16%, transparent);
+}
+
+.dark :is(.sidebar-header-icon, .sidebar-header-icon-mobile) {
+  color: color-mix(in srgb, var(--app-accent, var(--color-blue-400)) 58%, white) !important;
+}
+
+.sidebar-header-title {
+  font-size: 1rem;
+  line-height: 1.375rem;
+  font-weight: 650;
+  letter-spacing: -0.016em;
+}
+
+.sidebar-header-subtitle {
+  font-size: 0.6875rem;
+}
+
+.sidebar-section-title {
+  margin-inline: 0.375rem;
+  color: color-mix(in srgb, currentColor 72%, transparent);
+  font-size: 0.625rem;
+  font-weight: 650;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.sidebar-item {
+  min-height: 1.9375rem;
+  padding: 0.375rem 0.5625rem;
+}
+
+.sidebar-icon-action {
+  height: 2.75rem;
+  border-radius: var(--ui-radius-surface);
+  background: var(--ui-surface-muted);
+  box-shadow: none;
+}
+
+.sidebar-icon-action-active {
+  color: color-mix(in srgb, var(--app-accent, var(--color-blue-500)) 78%, black);
+  background: var(--ui-selected);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app-accent, var(--color-blue-500)) 20%, transparent);
+}
+
+:is(.sidebar-item-active, .list-item-active) {
+  box-shadow: none;
+}
+
+.sidebar-item-action {
+  width: 1.75rem;
+  height: 1.75rem;
+}
+
+.file-tree > li > div[data-state="selected"] {
+  background: var(--ui-selected) !important;
+  box-shadow: none !important;
+}
+
+.file-tree > li > div[data-state="drop-target"] {
+  background: color-mix(in srgb, var(--color-blue-500) 8%, var(--ui-surface)) !important;
+}