/* ============================================================
   Xucho — Desktop shell: layers, windows, taskbar, start menu,
   map control, snap preview, sign-in. 1:1 of source/client/view.
   ============================================================ */

/* ---------- Root / appearance root ---------- */
[data-xucho-root] {
  position: relative; isolation: isolate;
  height: 100dvh; width: 100%;
  overflow: hidden;
  background-color: var(--color-background);
}
.zoom-layer { position: absolute; top: 0; left: 0; isolation: isolate; display: grid; width: 100%; height: 100%; font-family: var(--font-ui); }
.overlays { position: absolute; top: 0; left: 0; width: 0; height: 0; overflow: visible; }

/* ---------- Desktop ---------- */
[data-desktop] {
  position: relative; isolation: isolate;
  height: 100%; min-height: 0; width: 100%;
  overflow: hidden; outline: none;
  color: var(--color-foreground);
  user-select: none; -webkit-user-select: none;
}
[data-desktop] :is(input, textarea, [contenteditable="true"], [contenteditable=""]) { user-select: text; }

[data-desktop-layers] { position: absolute; inset: 0; isolation: isolate; overflow: clip; }
[data-desktop-layer] { position: absolute; inset: 0; overflow: clip; pointer-events: none; }
[data-desktop-layer="wallpaper"] { z-index: 0; }
[data-desktop-layer="under"] { z-index: 1; }
[data-desktop-layer="window"] { z-index: 2; }
[data-desktop-layer="over"] { z-index: 3; }
[data-desktop-layer="shell"] { z-index: 4; }
[data-plane-slide] { position: absolute; inset: 0; pointer-events: none; }

/* ---------- Wallpaper ---------- */
.wallpaper-layer { position: absolute; inset: 0; pointer-events: none; transition-property: opacity; }
.wallpaper-layer img, .wallpaper-layer video { height: 100%; width: 100%; object-fit: cover; }
.wallpaper-layer iframe { height: 100%; width: 100%; border: 0; }
.wallpaper-layer.html { pointer-events: auto; }

/* ---------- Window ---------- */
[data-window-box] {
  position: absolute; left: 0; top: 0;
  pointer-events: auto;
  will-change: transform;
  touch-action: none;
}
[data-window-box][data-interactive="false"], [data-window-box][inert] { pointer-events: none; }
[data-window-box].closing { pointer-events: none; }

[data-window-container] { position: absolute; }

.window-surface-backing { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; }

[data-window-panel] {
  position: absolute; inset: 0;
  display: grid; min-width: 0; min-height: 0; overflow: hidden;
  grid-template-rows: auto minmax(0, 1fr);
  border-radius: var(--window-radius, var(--radius));
  --surface-paint: var(--color-default);
  --surface-frost: blur(0px) saturate(1);
}
[data-window-panel].no-header { grid-template-rows: minmax(0, 1fr); }

.window-header {
  display: flex; align-items: center; gap: var(--spacing);
  height: calc(16px + 2 * var(--spacing));
  padding-inline: var(--spacing);
  flex-shrink: 0; user-select: none; touch-action: none;
  cursor: grab;
  color: var(--color-foreground);
  border-radius: var(--window-radius, var(--radius)) var(--window-radius, var(--radius)) 0 0;
}
.window-header:active { cursor: grabbing; }
.window-identity { display: flex; align-items: center; gap: var(--spacing); opacity: 1; transition: opacity var(--duration) var(--easing); min-width: 0; }
[data-window-box].inactive .window-identity { opacity: 0.6; }
.window-identity img { width: 16px; height: 16px; border-radius: var(--radius-xs); object-fit: contain; flex-shrink: 0; }
.window-identity .window-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-window-title); font-weight: 500; }
.window-header .window-center { flex: 1; min-width: 0; display: flex; justify-content: center; }
.window-actions { display: flex; gap: max(4px, calc(var(--spacing) / 4)); margin-inline-start: auto; }

[data-window-content] { position: relative; min-width: 0; min-height: 0; overflow: hidden; border-radius: 0 0 var(--window-radius, var(--radius)) var(--window-radius, var(--radius)); }
[data-window-content] iframe { width: 100%; height: 100%; border: 0; }

/* window loading cover */
.window-progress { position: absolute; inset: 0; z-index: 10; display: grid; place-content: center; justify-items: center; gap: 8px; pointer-events: none; font-size: 0.75em; opacity: var(--control-secondary-opacity); }

/* click catcher for inactive windows */
[data-window-click-catcher] { position: absolute; inset: 0; background: transparent; }

/* resize handles (n/s/e/w + 4 corners) */
.resize-handle { position: absolute; touch-action: none; z-index: 20; }
.resize-handle.n  { inset-inline: 16px; top: 0; height: 8px; cursor: ns-resize; }
.resize-handle.s  { inset-inline: 16px; bottom: 0; height: 8px; cursor: ns-resize; }
.resize-handle.w  { inset-block: 16px; left: 0; width: 8px; cursor: ew-resize; }
.resize-handle.e  { inset-block: 16px; right: 0; width: 8px; cursor: ew-resize; }
.resize-handle.nw { top: 0; left: 0; width: 16px; height: 16px; cursor: nwse-resize; }
.resize-handle.ne { top: 0; right: 0; width: 16px; height: 16px; cursor: nesw-resize; }
.resize-handle.sw { bottom: 0; left: 0; width: 16px; height: 16px; cursor: nesw-resize; }
.resize-handle.se { bottom: 0; right: 0; width: 16px; height: 16px; cursor: nwse-resize; }

/* ---------- Snap preview ---------- */
[data-snap-preview] { position: absolute; left: 0; top: 0; pointer-events: none; }
[data-snap-preview] .snap-inner { position: absolute; inset: 0; transform-origin: center; }
[data-snap-preview] .snap-surface {
  position: absolute; inset: 0; border-radius: var(--radius);
  --surface-paint: color-mix(in oklab, var(--color-primary) 16%, transparent);
  box-shadow: none;
}
[data-snap-preview].blocked .snap-surface { --surface-paint: var(--danger-soft); }

/* ---------- Shared resize boundaries ---------- */
[data-shared-window-resize] { position: absolute; pointer-events: auto; touch-action: none; }
[data-shared-window-resize="vertical"] { width: 4px; cursor: col-resize; }
[data-shared-window-resize="horizontal"] { height: 4px; cursor: row-resize; }

/* ---------- Taskbar ---------- */
[data-taskbar-region] { position: absolute; pointer-events: none; }
[data-taskbar-reveal-region] { position: absolute; pointer-events: auto; }
[data-taskbar-retention-region] { position: absolute; inset: 0; pointer-events: auto; }

.taskbar {
  position: absolute;
  display: flex; align-items: center;
  min-height: 0; min-width: 0; overflow: hidden;
  padding: 6px;
  pointer-events: auto; isolation: isolate;
  border-radius: var(--radius);
  --surface-paint: color-mix(in srgb, var(--color-default) 96%, transparent);
  --surface-frost: blur(0px) saturate(1);
  box-shadow: var(--shadow-resting);
  transition: transform var(--duration) var(--easing);
}
.taskbar-group { display: flex; align-items: center; gap: 6px; }
.taskbar-group.grow { flex: 1 1 0; align-self: stretch; min-height: 0; overflow: clip; }
.taskbar-item {
  max-width: 160px; scroll-margin-inline: 32px;
  display: inline-flex; align-items: center; gap: 6px;
  overflow: hidden;
}
.taskbar-item img { width: 16px; height: 16px; flex-shrink: 0; border-radius: var(--radius-xs); object-fit: contain; }
.taskbar-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-taskbar-label); font-weight: 500; }
.taskbar-item:not(.active) { opacity: 0.35; }
.taskbar-overflow-viewport { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin: -8px; padding: 8px; }
.taskbar-overflow-viewport::-webkit-scrollbar { display: none; }

/* ---------- Start menu ---------- */
.start-menu {
  position: fixed; z-index: 2147483000;
  display: none;
  pointer-events: auto;
  border-radius: var(--radius);
  --surface-paint: color-mix(in srgb, var(--color-default) 96%, transparent);
  box-shadow: var(--shadow-floating);
}
.start-menu.open { display: grid; }
.start-menu-panel { display: grid; gap: 18px; padding: 18px; min-width: 0; min-height: 0; grid-template-columns: 168px 1fr; grid-template-rows: auto auto minmax(0, 1fr) auto; grid-template-areas: "title title" "sidebar header" "sidebar content" "sidebar footer"; }
.start-menu-title { grid-area: title; display: flex; align-items: center; gap: 12px; padding-block-end: 6px; font-size: 1.25rem; }
.start-menu-title img { width: var(--spacing-xl); height: var(--spacing-xl); border-radius: var(--radius-xs); object-fit: contain; flex-shrink: 0; }
.start-menu-title .version { font-size: 0.75rem; font-weight: 400; opacity: 0.66; font-variant-numeric: tabular-nums; }
.start-menu-sidebar { grid-area: sidebar; display: flex; flex-direction: column; min-height: 0; overflow: auto; font-size: 0.8125em; gap: 2px; }
.start-menu-tree { display: grid; gap: 2px; align-content: start; }
.start-menu-side-heading { color: var(--color-foreground); opacity: 0.55; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding-inline: 12px; margin: 14px 0 4px; }
.start-menu-side-heading.first { margin-top: 2px; }
.start-menu-sidebar .tree-item { min-height: 30px; padding-inline-start: 10px; }
.tree-icon { display: inline-flex; flex-shrink: 0; opacity: 0.7; }
.tree-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-count { flex-shrink: 0; opacity: 0.55; font-variant-numeric: tabular-nums; font-size: 0.75rem; }
.start-menu-settings { margin-top: auto; }
.start-menu-header { grid-area: header; display: flex; align-items: center; gap: 12px; min-width: 0; }
.start-menu-heading { font-size: 0.9375rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; }
.start-menu-header .segmented { flex-shrink: 0; }
.start-menu-header .segment-item { min-height: 22px; padding-inline: 8px; }
.start-menu-content { grid-area: content; min-width: 0; min-height: 0; overflow: auto; display: grid; align-content: start; padding-top: 6px; }
.start-menu-grid { display: grid; gap: 12px; align-content: start; grid-template-columns: repeat(auto-fill, minmax(min(84px, 100%), 1fr)); }
.start-menu-grid .grid-item { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 8px 4px; min-height: 0; }
.start-menu-grid .grid-item img { width: 30px; height: 30px; object-fit: contain; }
.start-menu-grid .grid-item-label { font-size: 0.8125em; font-weight: 500; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.start-menu-content .empty { display: grid; place-items: center; align-content: center; min-height: 120px; opacity: 0.55; font-size: 0.875em; }
.start-menu-content .table { cursor: default; }
.start-menu-content .table-name { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.start-menu-content .table-name img { width: 18px; height: 18px; flex-shrink: 0; object-fit: contain; border-radius: var(--radius-xs); }
.start-menu-content .table-name .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.start-menu-content td.tone-secondary, .start-menu-content .tone-secondary { opacity: 0.66; }
.start-menu-content .tabular { font-variant-numeric: tabular-nums; }
.start-menu-content tbody tr { cursor: pointer; }
.start-menu-footer { grid-area: footer; padding-top: 6px; font-size: var(--text-taskbar-label); opacity: 0.66; font-variant-numeric: tabular-nums; }
.start-menu-footer span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Taskbar start/sign-out labels (1:1 TaskbarButton: hidden sm:inline) */
.start-button .start-label { font-size: var(--text-taskbar-label); font-weight: 500; }
.start-icon { display: inline-flex; width: 16px; height: 16px; flex-shrink: 0; }
.start-icon svg { width: 100%; height: 100%; }
@media (max-width: 640px) { .start-button .start-label, .taskbar [title="Sign out"] .start-label { display: none; } }

/* ---------- Map popover ---------- */
.map-popover { position: fixed; z-index: 2147483000; }
.map-well { position: relative; isolation: isolate; border-radius: var(--radius-s); --surface-paint: var(--background-recessed); overflow: hidden; }
.map-grid-overlay {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--map-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--map-line) 1px, transparent 1px);
  background-size: var(--map-cell-w) 100%, 100% var(--map-cell-h);
  --map-line: color-mix(in oklab, var(--color-foreground) 10%, transparent);
}
.map-settle { position: absolute; pointer-events: none; background: color-mix(in oklab, var(--color-primary) 18%, transparent); border-radius: 2px; }
.map-frame {
  position: absolute; border-radius: var(--radius-s);
  --surface-paint: color-mix(in srgb, var(--color-primary) 30%, transparent);
  box-shadow: none; cursor: grab; touch-action: none;
}
.map-frame:active { cursor: grabbing; }
.map-window-card { position: absolute; display: grid; place-items: center; }
.map-window-card .corner-mark { position: absolute; right: 1px; bottom: 1px; }

/* ---------- Sign-in ---------- */
.sign-in-stage { position: relative; isolation: isolate; display: grid; height: 100%; }
.sign-in-stage .sign-in-cover { position: relative; z-index: 1; pointer-events: none; display: grid; min-height: 0; overflow: auto; padding: 16px; }
.sign-in-card { width: min(25rem, 100%); margin: auto; pointer-events: auto; display: grid; gap: 18px; padding: 24px; border-radius: var(--radius-l); --surface-paint: var(--color-default); box-shadow: var(--shadow-floating); }
.sign-in-card img.logo { width: 48px; height: 48px; }
.sign-in-footer { text-align: center; font-size: 0.75em; opacity: 0.66; }

/* ---------- Loading cover ---------- */
.loading-cover {
  position: absolute; inset: 0; z-index: 100;
  display: grid; place-content: center; justify-items: center; gap: 18px;
  background: var(--color-background);
  transition-property: opacity;
}
.loading-cover .loading-message { font-size: 0.8125em; opacity: 0.66; }

/* ---------- Edge panel (Files over-layer) ---------- */
.edge-panel { position: absolute; width: 300px; top: 12px; bottom: 12px; z-index: 5; }

/* Marquee selection */
.marquee { position: absolute; border: 1px solid color-mix(in oklab, var(--color-primary) 60%, transparent); background: color-mix(in oklab, var(--color-primary) 12%, transparent); pointer-events: none; z-index: 30; }
.drop-target { outline: 2px solid color-mix(in oklab, var(--color-primary) 60%, transparent); outline-offset: -2px; border-radius: var(--radius-s); }

/* Program content helpers */
.program-root { height: 100%; min-height: 0; display: grid; }
.status-line {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 12px; font-size: var(--text-taskbar-label); opacity: 0.66;
  border-top: 1px solid var(--separator); overflow: hidden; white-space: nowrap;
}

/* ============================================================
   Lemo — markdown, working pulse, message layout
   ============================================================ */
.markdown { display: grid; gap: 8px; font-size: 0.8125em; line-height: 1.55; min-width: 0; }
.markdown p { margin: 0; }
.markdown .md-h { font-weight: 650; }
.markdown .md-h1 { font-size: 1.25em; }
.markdown .md-h2 { font-size: 1.12em; }
.markdown .md-h3 { font-size: 1em; }
.markdown .md-h4 { font-size: 0.94em; }
.markdown ul { margin: 0; padding-left: 1.2em; display: grid; gap: 3px; }
.markdown blockquote { margin: 0; padding: 2px 0 2px 12px; border-left: 3px solid var(--separator); opacity: 0.85; }
.markdown code { font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.9em; background: var(--background-recessed); border-radius: 4px; padding: 1px 5px; }
.markdown a { color: var(--primary); }
.md-code { border-radius: var(--radius-s); overflow: hidden; border: 1px solid var(--separator); }
.md-code-bar { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px; font-size: 0.6875em; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.7; background: var(--background-recessed); }
.md-code pre { margin: 0; padding: 10px 12px; overflow: auto; font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.75em; line-height: 1.5; }
.lemo-working .lemo-pulse { animation: lemo-pulse 1.2s ease-in-out infinite; }
@keyframes lemo-pulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }

/* ============================================================
   Sprout
   ============================================================ */
.sprout-card.planting { animation: sprout-planting 1.2s ease-in-out infinite; }
@keyframes sprout-planting { 0%, 100% { opacity: 0.8; } 50% { opacity: 1; } }

/* ============================================================
   Tilo — canvas items
   ============================================================ */
.canvas-item {
  box-sizing: border-box;
  display: grid;
  padding: 16px;
  border-radius: 8px;
  border: 1.5px solid color-mix(in srgb, var(--tint) 55%, transparent);
  background: color-mix(in oklch, var(--tint) 18%, var(--board-bg));
  box-shadow: 0 3px 10px rgb(0 0 0 / 8%);
  font-size: 0.8125em;
  overflow: hidden;
  align-items: start;
  user-select: none;
}
.canvas-item.ellipse { border-radius: 50%; }
.canvas-item.text {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  font-size: 20px;
  padding: 8px;
}
.canvas-item.selected { outline: 2px solid var(--board-blue, #538ad9); outline-offset: 3px; }
.canvas-item-text { overflow: hidden; line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
.conn-handle { opacity: 0; transition: opacity 120ms; }
.canvas-item:hover .conn-handle { opacity: 1; }