/* ============ DESK LAUNCHER ============
   The desktop-style app grid on the desk space (dl-). One flat, uncategorised
   set of tiles that fills down the left edge and continues into a new column to
   the right once a column is full, the way icons fill a real desktop.

   The launcher stays click-through: .tab-canvas turns pointer events off and
   only the tiles turn them back on, so the empty desk keeps working as empty
   desk. Scoped to .desk-launcher throughout; the one reduced-motion block lives
   at the end of this file. */

/* The grid hangs in the gap between the two pieces of chrome that share the
   desk, so both edges are written as "where that thing ends, plus air" rather
   than as a measured pixel that only holds at one window size.

   The first two are measurements, not settings. They describe where something
   else already sits, so moving the grid by editing one only makes it lie:

     --dl-nav-bottom   .control-nav sits at top 2.4% and is 50px tall
     --dl-tray-top     the taskbar pill sits at bottom 32px and is 52px tall

   The other two are the settings, and there is one per edge because the two
   edges are not the same kind of problem. The nav is a bar across the top, so
   the grid clears the whole of it and --dl-air is simply the gap left under it.
   The taskbar is a 50px pill in the bottom-left corner, so holding the entire
   floor at arm's length would waste a band of desk the pill never occupies;
   --dl-hem measures up from the desk edge instead, and only refuses to come
   nearer than the pill so a bottom-row icon can never slide underneath it.

   Both follow the window height, stop growing on a tall display, and stop
   shrinking before a short one squeezes the column down to a couple of tiles
   and sends the grid running off the right edge instead.

   The inset also gives the grid a definite height, which is what lets auto-fill
   work out how many tiles a column holds before it wraps into the next one. */
.desk-launcher {
  --dl-nav-bottom: calc(2.4% + 50px);
  --dl-tray-top: 84px;
  --dl-air: clamp(30px, 6%, 72px);
  --dl-hem: clamp(var(--dl-tray-top), 9.5%, 110px);
  --dl-tile: 96px;
  position: absolute;
  inset: calc(var(--dl-nav-bottom) + var(--dl-air)) 20px var(--dl-hem) 27px;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(auto-fill, var(--dl-tile));
  grid-auto-columns: var(--dl-tile);
  justify-content: start;
  align-content: start;
  gap: 14px;
  user-select: none;
  -webkit-user-select: none;
  font-family: var(--font-sans, "Inter", "SF Pro Display", system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
}
.desk-launcher * {
  box-sizing: border-box;
}

/* The controller places this layer only in a buffer showing the moving
   waterfall (Desk's default, or the catalogue entry chosen for any space). */
.desk-background {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: #10242b url('../assets/backgrounds/blue-canyon-poster.webp') center / cover no-repeat;
}
.desk-background video { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 250ms ease; }
.desk-background.is-ready video { opacity: 1; }
/* Keep Desk navigation reachable above the mobile shelves and bottom dock.
   Space (focus) is the first screen a phone session sees; its legacy narrow
   layout stacked the nav under the canvas, below the fold and under the fixed
   dock, so it gets the same top bar and its page scrolls clear of both. */
@media (max-width: 700px) {
  body:is([data-space="desk"],[data-space="focus"]) .control-nav {
    position: fixed; top: 12px; left: 12px; right: 12px; bottom: auto;
    margin: 0; width: auto; height: 52px; padding: 6px 10px;
    flex-wrap: nowrap; gap: 0; z-index: 1152;
  }
  body:is([data-space="desk"],[data-space="focus"]) .control-nav .logo-mark { display: none; }
  body:is([data-space="desk"],[data-space="focus"]) .nav-tabs { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; }
  /* Five uppercase tabs at 10px with 1px tracking, the base 0.26em indent and
     8px sides were 366px, wider than the 316px a 360px screen leaves inside
     the bar: Unfinished hung past the edge where a tap at rest missed it.
     Tighter tracking and sides make them 308px, so all five fit unscrolled. */
  body:is([data-space="desk"],[data-space="focus"]) .nav-tab { flex: 0 0 auto; padding: 10px 5px; font-size: 10px; letter-spacing: .5px; text-indent: .5px; }
  body[data-space="focus"] .dashboard { padding-top: 76px; padding-bottom: 180px; box-sizing: border-box; }
  /* The fixed Neva dock and the cognitive-state card cover the bottom 156px of
     a phone screen: Desk gets the same run-out as Space, and the page (body is
     the scroller here) stops anything scrolled to above them. */
  body[data-space="desk"] .dashboard { padding-bottom: 180px; box-sizing: border-box; }
  body { scroll-padding-bottom: 170px; }
  /* Nine controls in one 454px pill are wider than a 390px screen, and the bar
     is right-aligned, so Search and Support hung off the left edge where no
     scroll can reach, on Desk and on Space alike. The pill wraps inside the bar
     instead. */
  body:is([data-space="desk"],[data-space="focus"]) .cmd-actions { flex-wrap: wrap; justify-content: center; height: auto; max-width: 100%; padding: 6px; row-gap: 4px; }
  /* The cognitive-state card stood behind the dock and its last row of chips
     under it. It spans the dock's width in two rows of chips and stands on the
     dock, within the 170px the page already keeps clear; the Ask Neva line
     opens above it rather than across it. */
  body:is([data-space="desk"],[data-space="focus"]) > .cog-dev:not(.is-collapsed) { left: 24px; right: 24px; bottom: 74px; width: auto; padding: 8px 10px; }
  body:is([data-space="desk"],[data-space="focus"]) > .cog-dev:not(.is-collapsed) .cog-dev__chips { margin-top: 6px; }
  /* The dock's Looks key stands over the card, its left edge 128px right of the
     screen's centre. The chips end 4px before it at every width, so they stay
     in two rows and none of them lies under the key. */
  body:is([data-space="desk"],[data-space="focus"]) > .cog-dev:not(.is-collapsed) .cog-dev__chips { max-width: calc(50vw + 90px); }
  body:is([data-space="desk"],[data-space="focus"]) .neva-prompt { bottom: 178px; }
  /* A session window opens at least 420px wide, so on a phone its Minimise,
     Maximise and Close stood past the right edge where no touch reaches. It
     keeps to the screen, and a long status gives way before the buttons do. */
  .desk-window--session:not(.is-max) { max-width: calc(100vw - 16px); }
  .desk-window--session .desk-window__status { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Selfspace and People had no run-out, so at the end of the page their
     command row stood under the dock: the World switch and the Widget Drawer
     key could not be pressed. They get the same run-out as Space and Desk. */
  body:is([data-world="self"],[data-world="people"]) .dashboard { padding-bottom: 180px; box-sizing: border-box; }
  /* The World menu hangs below its trigger, and on a phone the trigger sits
     low, so the menu fell behind the cognitive-state card and the dock and
     past the bottom edge. It opens under the top bar, centred and above both
     (main.js writes top/left inline, hence the !important). */
  .world-menu { top: 76px !important; left: 0 !important; right: 0; margin-inline: auto; z-index: 1650; max-height: calc(100dvh - 88px); overflow-y: auto; transform-origin: top center; }
  /* The 420px drawer is pinned 24px from the right, so its left edge was off a
     phone screen, and its footer stood behind the card and the dock. It keeps
     to the screen and ends above them. */
  .wl-panel { top: 76px; bottom: 176px; right: 12px; width: min(420px, calc(100vw - 24px)); }
}
body[data-space="desk"] .world-bg { display: block; position: fixed; inset: 0; transform: none; }
body[data-space="desk"] .map-workspace { background-image: none; }
@media (prefers-reduced-motion: reduce) { .desk-background video { transition: none; } }
/* Pausing moving footage is an accessibility control, so Atmosphere's adaptive
   lock on the other toggle rows does not hold it; reduced motion does. */
.atmos-panel.is-adaptive .atmos-row--toggle .atmos-switch[data-desk-bg-playback]:not([aria-disabled="true"]) { pointer-events: auto; cursor: pointer; }

/* --------------------------------------------------------------- apps -- */

/* A small glass lens carries the symbol; labels sit outside the material. */
.dl-app {
  position: relative;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: var(--dl-tile);
  height: var(--dl-tile);
  padding: 3px 2px;
  border: none;
  border-radius: 20px;
  background: transparent;
  /* The widget cards blur at 25px, but a 25px blur on a tile this size reaches
     across the gap to its neighbour and the whole column smears into one plate.
     Same material, blur scaled to the pane. */
  box-shadow: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  touch-action: none;
  transition:
    transform 160ms var(--tab-anim-ease, ease),
    filter 160ms linear,
    box-shadow 160ms linear;
}
.dl-app:hover {
  transform: translateY(-2px);
  filter: brightness(1.07);
}
.dl-app:active {
  transform: scale(0.98);
}
.dl-app.is-selected {
  filter: brightness(1.12);
}
.dl-app:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.55);
  outline-offset: 2px;
}

/* Clear smoked glass: restrained tint, deeper optical blur, directional edge. */
.dl-app-tile {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 21px;
  background: linear-gradient(145deg, rgba(235,245,247,.08) 0%, rgba(18,25,28,.12) 44%, rgba(9,15,18,.3) 100%);
  backdrop-filter: blur(22px) saturate(85%) brightness(.82);
  -webkit-backdrop-filter: blur(22px) saturate(85%) brightness(.82);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.27), inset 1px 0 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.22), 0 5px 14px rgba(0,0,0,.13);
  transition: box-shadow 180ms ease, background-color 180ms ease;
}
.dl-app-tile::before {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: 20px;
  pointer-events: none;
  background: linear-gradient(130deg, rgba(255,255,255,.07), transparent 38%);
}
.dl-app:hover .dl-app-tile { background-color: rgba(235,246,248,.05); box-shadow: inset 0 1px 0 rgba(255,255,255,.38), inset 1px 0 0 rgba(255,255,255,.12), 0 7px 18px rgba(0,0,0,.2); }
.dl-app.is-selected .dl-app-tile { box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 0 0 1px rgba(225,239,235,.65), 0 5px 16px rgba(0,0,0,.22); }
.dl-app-tile svg {
  width: 32px;
  height: 32px;
  color: rgba(246, 249, 251, 0.96);
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.22));
}
.dl-app[data-app="work"] .dl-app-tile svg,
.dl-app[data-app="neuraDrive"] .dl-app-tile svg { color: #e7cf9d; }
.dl-app[data-app="windows11"] .dl-app-tile svg,
.dl-app[data-app="ubuntu"] .dl-app-tile svg { width: 28px; height: 28px; }

.dl-app.is-dragging {
  opacity: 0.3;
}

.dl-app-label {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  max-width: 100%;
  overflow: hidden;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 1.25;
  text-align: center;
  color: rgba(255, 255, 255, 0.96);
  text-shadow: 0 1px 3px rgba(0,0,0,.55);
  overflow-wrap: anywhere;
}

/* machines carry a power dot: lit for the running one, dark for the rest */
.dl-app-dot {
  position: absolute;
  top: 51px;
  right: 22px;
  width: 5px;
  height: 5px;
  box-shadow: 0 0 0 3px rgba(20,24,25,.6);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}
.dl-app-dot.is-on {
  background: #b6d5c7;
  box-shadow: 0 0 0 3px rgba(20,24,25,.6);
}

/* -------------------------------------------------------------- drag -- */

.dl-drag-clone {
  position: fixed;
  z-index: 60;
  margin: 0;
  pointer-events: none;
  opacity: 0.92;
  transform: translate(-50%, -50%) scale(1.04);
}
.dl-drag-clone.dl-app {
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.55);
}

/* ------------------------------------------------ the old taskbar -- */
/* The original companion has no taskbar. The start button, minimised-window
   tray, clock and the row that joined them to the Neva dock are gone; the
   Desk's windows live inside the one Neva menu (notch-windows.js). The pill
   cognitive.js still builds as the taskbar host stays out of sight on every
   space, so no legacy furniture can reappear around the menu. */
.cog-dev.is-collapsed {
  display: none !important;
}

/* ------------------------------------------ windows inside the menu -- */
/* The original companion's window parts (owner ZIP notch.css), drawn by
   notch-windows.js into slots of the one Neva menu. Positions are the
   original's, measured from the compact row (.notch-compact starts 12px into
   the glass, so the original 135px / 79px / 110px become 123px / 67px / 98px).
   The menu's own width, silhouette and top/bottom edge stay the shell's. */
.neva-led .notch-held-windows {
  position: absolute;
  left: 123px;
  top: 2px;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 0;
  z-index: 3;
}
.neva-led .notch-held-windows[hidden],
.neva-led .notch-window-context[hidden],
.neva-led .notch-window-tools[hidden] {
  display: none;
}
.neva-led :is(.notch-held-window, .notch-held-more, .notch-context-switch, .notch-window-key) {
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  touch-action: manipulation;
  transition: background-color .2s, color .2s, transform .18s;
}
.neva-led :is(.notch-held-window, .notch-held-more, .notch-context-switch, .notch-window-key):focus-visible {
  outline: 2px solid #a9b9fc;
  outline-offset: 3px;
}
.neva-led :is(.notch-held-window, .notch-held-more, .notch-context-switch, .notch-window-key):active {
  transform: scale(.94);
}
.neva-led .notch-held-window,
.neva-led .notch-held-more {
  position: relative;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  font-size: 11px;
  color: #c8d5de;
}
.neva-led .notch-held-window > svg { width: 22px; height: 22px; }
.neva-led .notch-held-window > i {
  position: absolute;
  bottom: 4px;
  left: 20px;
  width: 4px;
  height: 3px;
  border-radius: 2px;
  background: #c8d5de;
  opacity: .6;
}
.neva-led .notch-held-window:hover,
.neva-led .notch-held-more:hover { background: #ffffff0d; }
/* A window has just landed here: the icon takes the weight and springs back. */
.neva-led .notch-held-window.is-landing { animation: notch-held-land 460ms cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes notch-held-land {
  0% { transform: translateY(7px) scale(.7); }
  40% { transform: translateY(-3px) scale(1.16); }
  100% { transform: none; }
}
/* The name's status word gives way to the windows it would run under. */
.neva-led[data-has-windows="true"] .notch-compact-word { display: none; }

.neva-led .notch-window-context {
  position: absolute;
  left: 67px;
  right: 98px;
  top: 2px;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 3;
}
.neva-led .notch-context-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  color: #dce5e9;
  font-size: 11px;
}
.neva-led .notch-context-title > svg { width: 18px; height: 18px; flex-shrink: 0; }
.neva-led .notch-context-title > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.neva-led .notch-context-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 40px;
  min-width: 38px;
  padding: 0 4px;
  border-radius: 12px;
  color: #adbcc6;
  font-size: 9px;
}
.neva-led .notch-context-switch:hover { background: #ffffff09; color: #fff; }
.neva-led .notch-context-controls,
.neva-led .notch-window-tools { display: flex; align-items: center; gap: 1px; }
.neva-led .notch-window-tools { margin-right: 5px; padding-right: 5px; border-right: 1px solid #ffffff12; }
.neva-led .notch-window-key {
  display: grid;
  place-items: center;
  width: 30px;
  height: 36px;
  padding: 0;
  border-radius: 10px;
  color: #c1ccd4;
}
.neva-led .notch-window-key:hover { background: #ffffff0e; color: #fff; }
.neva-led .notch-window-key[data-notch-command="close"]:hover { background: #b567672c; color: #ffd3d0; }
.neva-led :is(.notch-window-key, .notch-context-switch) svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.neva-led .notch-context-switch svg { width: 18px; height: 18px; }
/* While a window fills the screen the compact row is its title bar: the name
   and the held icons give way to it (original data-window-active rules). */
.neva-led[data-window-active="true"] :is(.notch-compact-open, .notch-held-windows) { display: none; }
.neva-led[data-mode="expanded"] :is(.notch-held-windows, .notch-window-context) { pointer-events: none; opacity: 0; }

/* "Your desk" (the original companion's windows page). */
.neva-led .notch-window-list { position: absolute; inset: 0; color: var(--notch-ink, #f0f1f5); }
.neva-led .notch-window-heading { position: absolute; top: 15px; left: var(--notch-content-start, 140px); right: 14px; }
.neva-led .notch-window-heading > strong { font-size: 12px; font-weight: 500; }
.neva-led .notch-window-list p { font-size: 11px; color: #a6a9b4; margin: 5px 0; }
.neva-led .notch-window-items {
  position: absolute;
  inset: 74px 18px 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #ffffff20 transparent;
}
.neva-led .notch-window-list button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 0;
  border-radius: 8px;
  background: #ffffff04;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 9px 10px;
  margin-top: 8px;
  text-align: left;
}
.neva-led .notch-window-list button:hover { background: #ffffff0c; }
.neva-led .notch-window-list button > svg { width: 16px; height: 16px; flex-shrink: 0; }
.neva-led .notch-window-list button > svg:last-child { margin-left: auto; width: 13px; }
.neva-led .notch-window-list button > svg[viewBox]:not([fill]) { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.neva-led .notch-window-list button > span { font-size: 11px; min-width: 0; overflow-wrap: anywhere; }
.neva-led .notch-window-list small { display: block; font-size: 9px; color: #9d9fab; }
.neva-led .notch-window-row { display: flex; align-items: stretch; gap: 4px; }
.neva-led .notch-window-row > button:first-child { flex: 1; min-width: 0; }
.neva-led .notch-window-list .notch-window-dismiss { width: 30px; flex-shrink: 0; justify-content: center; padding: 0; background: none; }
.neva-led .notch-window-dismiss:hover { color: #ffd3d0; }

@media (max-width: 620px) {
  .neva-led .notch-held-windows { left: 67px; }
  .neva-led .notch-held-window,
  .neva-led .notch-held-more { width: 36px; }
  .neva-led .notch-held-window > i { left: 16px; }
  .neva-led .notch-window-context { left: 66px; right: 7px; gap: 3px; }
  .neva-led .notch-context-title { gap: 5px; font-size: 10px; }
  .neva-led .notch-context-title > svg { display: none; }
  .neva-led .notch-context-switch { min-width: 30px; gap: 0; }
  .neva-led .notch-window-key { width: 28px; }
  .neva-led .notch-screen-key { display: none !important; }
  .neva-led .notch-window-tools { margin-right: 0; padding-right: 2px; }
}

/* The Neva panels and prompt still stand over the Desk's windows. */
body[data-space="desk"] .neva-panel,
body[data-space="desk"] .neva-prompt {
  z-index: 1391;
}

/* ------------------------------------------ machine session windows --- */
/* A Windows/Ubuntu session opened from a Machines tile. These are windows, not
   modals: no scrim, no scroll lock, and the workspace behind stays clickable.
   Sits above the app (max z-index 1000) and below World Select (2000) and
   sign-in (3000), so both of those still cover it. */

.desk-window {
  position: fixed;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* No stroke, and the frame's own corner. The house style is explicit that
     persistent chrome is a panel: fill, blur, shadow, one highlight along the
     top and no line of any kind. A window is the largest panel on the desk, so
     it reads from the same numbers as the nav and the bar. */
  border: none;
  border-radius: var(--chrome-radius, 10px);
  background: var(--panel-bg-strong, rgba(24, 26, 25, 0.78));
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: var(--shadow-panel, 0 24px 60px rgba(0, 0, 0, 0.55));
}
/* Hidden, not closed. visibility keeps the frame's box — so the session is
   never resized to 0x0 — while dropping the whole window out of hit-testing.
   Nothing inside may set visibility back, or it would keep eating clicks. */
.desk-window.is-hidden {
  visibility: hidden;
  pointer-events: none;
}
/* These fixed windows are mounted on body, outside the tab panel. Keep their
   remote sessions alive but scoped to Desk, including during space transitions. */
body:not([data-space="desk"]) .desk-window,
body:not([data-space="desk"]) .desk-window *,
body:not([data-space="desk"]) .desk-snap-hint {
  visibility: hidden !important;
  pointer-events: none !important;
}
/* With the stroke gone, the window in front says so by standing further off the
   desk rather than by lighting an edge. */
.desk-window.is-focused {
  box-shadow: 0 34px 80px rgba(0, 0, 0, 0.62);
}
.desk-window.is-max {
  border-radius: 0;
}
/* R4 (owner): a maximised window takes the entire viewport and the Neva menu
   hangs from the top edge over it as its only chrome. The R3 navigation drop
   is superseded; while a maximised window is up the navigation steps out of
   sight and, through visibility, out of the tab order, so keyboard focus can
   never land behind the window. The rest of the page under it (the command
   bar, the Desk's folders and tiles, the wallpaper pause key) does the same,
   so Tab stays in the visible window and the top menu. Restore, minimise,
   close or leaving the Desk clears data-desk-immersive and everything is back
   exactly as it was. */
body[data-space="desk"][data-desk-immersive="true"] :is(.control-nav, .header-glass, .command-bar, [data-tab-canvas], .desk-background-toggle) {
  visibility: hidden;
}

/* The maximised menu's three groups (notch-windows.js contextMarkup): app
   icons, the active window's keys, the browser's full screen. Baseline layout
   only; the shell (notch.css) owns the glass and may refine it. */
.neva-led [data-desk-windows-slot="context"] {
  justify-content: flex-start;
}
.neva-led [data-desk-windows-slot="context"] .notch-app-switcher {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
.neva-led .notch-app-switch {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 12px;
  color: #c8d5de !important;
  opacity: .72;
  transition: opacity 160ms ease, background-color 160ms ease;
}
.neva-led .notch-app-switch > svg {
  width: 22px;
  height: 22px;
  stroke: none;
}
.neva-led .notch-app-switch > svg[stroke] {
  stroke: currentColor;
}
.neva-led .notch-app-switch > i {
  position: absolute;
  bottom: 3px;
  left: 50%;
  width: 4px;
  height: 3px;
  margin-left: -2px;
  border-radius: 2px;
  background: #c8d5de;
  opacity: .5;
}
.neva-led .notch-app-switch:hover {
  opacity: 1;
  background: #ffffff0d;
}
.neva-led .notch-app-switch.is-active {
  opacity: 1;
  background: #ffffff12;
}
.neva-led .notch-app-switch.is-active > i {
  width: 12px;
  margin-left: -6px;
  opacity: 1;
  background: #eef5f8;
}
.neva-led .notch-app-switch[data-minimised="true"] > i {
  opacity: .28;
}
.neva-led [data-desk-windows-slot="context"] .notch-context-controls {
  flex: 0 0 auto;
}
.neva-led .notch-screen-group {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  margin-left: 4px;
  padding-left: 5px;
  border-left: 1px solid #ffffff14;
}
.neva-led .notch-screen-key[aria-pressed="true"] {
  background: #ffffff12;
  color: #fff !important;
}
.neva-led :is(.notch-app-switch, .notch-window-key):focus-visible {
  outline: 2px solid #9fd2ff;
  outline-offset: -2px;
  opacity: 1;
}
/* Leaving and coming back — minimise, close, reopen from the dock. The window
   drifts left, sinks and dissolves towards the dock; it is hidden while
   invisible, and reversed on the way back. Transform-only, so the inline
   left/top/width/height stay authoritative. */
/* Minimising travels to the taskbar rather than in a fixed direction: the
   window manager measures the pill at the bottom-left and writes the distance
   into --dw-fly-x / --dw-fly-y before adding the class. */
.desk-window.is-shifting {
  transform:
    translate(var(--dw-fly-x, -48px), var(--dw-fly-y, 72px))
    scale(var(--dw-fly-scale, 0.94));
  transform-origin: top left;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  /* The fade waits. A window that starts dissolving on the first frame is gone
     before it has gone anywhere, so it stays solid for the first half of the
     flight and only gives out as it reaches the bar. */
  transition:
    transform 320ms cubic-bezier(0.5, 0, 0.75, 0.35),
    opacity 140ms ease-in 180ms;
}
/* Coming back the other way it arrives sharp at once and the scale overshoots a
   hair at the end, so it lands rather than stops. */
.desk-window.is-settling {
  transform: none;
  opacity: 1;
  pointer-events: none;
  will-change: transform, opacity;
  transition:
    transform 300ms cubic-bezier(0.16, 1.02, 0.3, 1),
    opacity 160ms ease-out;
}
/* Resizing in place — fullscreen and back. The new box is applied at once and
   the window is transformed back over its old one, so it visibly sweeps right
   and rises into the viewport instead of jumping. Never fades: something
   growing has no reason to disappear first. */
.desk-window.is-morphing {
  transform-origin: top left;
  transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.desk-window.is-morphing .desk-window__frame {
  pointer-events: none;
}

.desk-window__bar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border-softer, rgba(255, 255, 255, 0.05));
  /* The same charcoal and the same top highlight as the nav at the top of the
     frame and the bar at the bottom of it. A title bar is chrome, so it is the
     one part of a window that wears the chrome's own colour. */
  background: var(--chrome-glass, rgba(14, 17, 19, 0.55));
  box-shadow: var(--chrome-highlight, inset 0 1px 0 rgba(255, 255, 255, 0.06));
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.desk-window.is-interacting .desk-window__bar {
  cursor: grabbing;
}
/* Filling the screen, a window has no title bar at all. There is nothing left to
   drag it by, nothing about which window this is that the screen is not already
   saying, and no reason for a strip of chrome between the frame and the app. The
   three buttons it carried are drawn in the corner of the bar instead. */
.desk-window.is-max .desk-window__bar {
  display: none;
}
.desk-window__icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  margin-right: -4px;
  color: var(--text-primary, rgba(255, 255, 255, 0.92));
}
.desk-window__icon svg {
  width: 16px;
  height: 16px;
}
.desk-window__title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary, rgba(255, 255, 255, 0.92));
}
.desk-window__status {
  flex: 1 1 auto;
  font-size: 12px;
  color: var(--text-secondary, rgba(255, 255, 255, 0.6));
}
/* Shown only when a launch ended somewhere the user can act on. */
.desk-window__retry {
  flex: 0 0 auto;
  margin-inline-end: 4px;
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary, rgba(255, 255, 255, 0.92));
  font: inherit;
  font-size: 12px;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.2s ease;
}
.desk-window__retry:hover {
  background: rgba(255, 255, 255, 0.16);
}
.desk-window__retry[hidden] {
  display: none;
}

.desk-window__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary, rgba(255, 255, 255, 0.92));
  cursor: pointer;
  transition: background 0.2s ease;
}
.desk-window__btn:hover {
  background: rgba(255, 255, 255, 0.14);
}
.desk-window__btn svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.desk-window__stage {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
  background: #0a0c0b;
}
.desk-window__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
}
/* The iframe would otherwise swallow every pointermove once a drag or resize
   crossed into it. */
.desk-window.is-interacting .desk-window__frame {
  pointer-events: none;
}

/* ---- resize grips: four edges, four corners ---- */
.desk-window__grip {
  position: absolute;
  touch-action: none;
}
.desk-window.is-max .desk-window__grip {
  display: none;
}
.desk-window__grip--n,
.desk-window__grip--s {
  right: 10px;
  left: 10px;
  height: 8px;
  cursor: ns-resize;
}
.desk-window__grip--e,
.desk-window__grip--w {
  top: 10px;
  bottom: 10px;
  width: 8px;
  cursor: ew-resize;
}
.desk-window__grip--n { top: -3px; }
.desk-window__grip--s { bottom: -3px; }
.desk-window__grip--e { right: -3px; }
.desk-window__grip--w { left: -3px; }

.desk-window__grip--ne,
.desk-window__grip--nw,
.desk-window__grip--se,
.desk-window__grip--sw {
  width: 16px;
  height: 16px;
}
.desk-window__grip--ne { top: -3px; right: -3px; cursor: nesw-resize; }
.desk-window__grip--nw { top: -3px; left: -3px; cursor: nwse-resize; }
.desk-window__grip--se { right: -3px; bottom: -3px; cursor: nwse-resize; }
.desk-window__grip--sw { bottom: -3px; left: -3px; cursor: nesw-resize; }

/* Faint corner hint on the one people reach for first. */
.desk-window__grip--se::after {
  content: "";
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 8px;
  height: 8px;
  border-right: 2px solid rgba(255, 255, 255, 0.26);
  border-bottom: 2px solid rgba(255, 255, 255, 0.26);
  border-bottom-right-radius: 3px;
}
/* ------------------------------------------------------- snap hint --- */
/* Drawn while a window is dragged against an edge, showing the box it will
   take when released. Under every window so it never covers the one moving. */

.desk-snap-hint {
  position: fixed;
  z-index: 1150;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--chrome-radius, 10px);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms linear;
}
.desk-snap-hint.is-on {
  opacity: 1;
}

/* ---------------------------------------------------- context menu --- */

.desk-menu {
  position: fixed;
  z-index: 1400;
  display: flex;
  flex-direction: column;
  min-width: 190px;
  padding: 5px;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(30, 33, 32, 0.86) 0%, rgba(16, 19, 18, 0.82) 100%);
  backdrop-filter: blur(25px) saturate(120%);
  -webkit-backdrop-filter: blur(25px) saturate(120%);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
}
.desk-menu__item {
  padding: 8px 11px;
  border: none;
  border-radius: 8px;
  background: none;
  font: inherit;
  font-size: 13px;
  text-align: left;
  color: var(--text-primary, rgba(255, 255, 255, 0.92));
  cursor: pointer;
}
.desk-menu__item:hover {
  background: rgba(255, 255, 255, 0.1);
}
.desk-menu__rule {
  height: 1px;
  margin: 4px 6px;
  background: rgba(255, 255, 255, 0.1);
}

/* ------------------------------------------------------ app panels --- */
/* What a non-machine window shows. Every app is built from the same handful of
   pieces (see desk-apps.js), which is why sixteen screens fit in one short
   block: a two-pane shell, rows, figures, bars, an editor. */

.desk-window__panel {
  height: 100%;
  overflow: auto;
  padding: 18px 20px 22px;
  font-family: var(--font-sans, "Inter", "SF Pro Display", system-ui, sans-serif);
  color: var(--text-primary, rgba(255, 255, 255, 0.92));
}
.desk-window__panel * {
  box-sizing: border-box;
}

.dw-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.dw-toolbar__gap {
  flex: 1 1 auto;
}
.dw-toolbar__text {
  font-size: 12px;
  color: var(--text-secondary, rgba(255, 255, 255, 0.6));
}
.dw-btn {
  padding: 7px 13px;
  border: none;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.08);
  font: inherit;
  font-size: 12px;
  color: var(--text-primary, rgba(255, 255, 255, 0.92));
  cursor: pointer;
  transition: background-color 140ms linear;
}
.dw-btn:hover {
  background: rgba(255, 255, 255, 0.16);
}
.dw-btn--primary {
  background: rgba(91, 155, 213, 0.28);
}
.dw-btn--primary:hover {
  background: rgba(91, 155, 213, 0.42);
}

.dw-panes {
  display: grid;
  grid-template-columns: 168px 1fr;
  gap: 20px;
  align-items: start;
}
.dw-aside {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 18px;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
}
.dw-main {
  min-width: 0;
}

.dw-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dw-nav__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: none;
  border-radius: 8px;
  background: none;
  font: inherit;
  font-size: 13px;
  text-align: left;
  color: var(--text-secondary, rgba(255, 255, 255, 0.6));
  cursor: pointer;
}
.dw-nav__item:hover {
  background: rgba(255, 255, 255, 0.06);
}
.dw-nav__item.is-current {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary, rgba(255, 255, 255, 0.92));
}
.dw-nav__count {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted, rgba(255, 255, 255, 0.38));
}

.dw-heading {
  margin-bottom: 12px;
}
.dw-heading + .dw-heading {
  margin-top: 22px;
}
.dw-heading__title {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
}
.dw-heading__sub {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--text-secondary, rgba(255, 255, 255, 0.6));
}

.dw-rows {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dw-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 10px;
  border-radius: 10px;
}
.dw-row:hover {
  background: rgba(255, 255, 255, 0.05);
}
.dw-row.is-done .dw-row__title {
  color: var(--text-muted, rgba(255, 255, 255, 0.38));
  text-decoration: line-through;
}
.dw-row__mark {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
}
.dw-row__mark[data-tone="blue"] { background: #4a90e2; }
.dw-row__mark[data-tone="green"] { background: #3ddc84; }
.dw-row__mark[data-tone="amber"] { background: #f5a623; }
.dw-row__mark[data-tone="red"] { background: #f0584e; }
.dw-row__mark[data-tone="pink"] { background: #ec4899; }
.dw-row__text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.dw-row__title {
  font-size: 13px;
}
.dw-row__note {
  font-size: 11px;
  color: var(--text-secondary, rgba(255, 255, 255, 0.6));
}
.dw-row__meta {
  flex: 0 0 auto;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted, rgba(255, 255, 255, 0.38));
}

.dw-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.dw-figure {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
}
.dw-figure__value {
  font-size: 22px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.dw-figure__label {
  font-size: 11px;
  color: var(--text-secondary, rgba(255, 255, 255, 0.6));
}

.dw-bars {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.dw-bar {
  display: grid;
  grid-template-columns: 42px 1fr 58px;
  align-items: center;
  gap: 12px;
}
.dw-bar__label {
  font-size: 11px;
  color: var(--text-secondary, rgba(255, 255, 255, 0.6));
}
.dw-bar__track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
}
.dw-bar__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(74, 144, 226, 0.85), rgba(61, 220, 132, 0.85));
}
.dw-bar__value {
  font-size: 11px;
  text-align: right;
  color: var(--text-muted, rgba(255, 255, 255, 0.38));
}

.dw-input {
  width: 100%;
  padding: 9px 12px;
  border: none;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.07);
  font: inherit;
  font-size: 13px;
  color: var(--text-primary, rgba(255, 255, 255, 0.92));
}
.dw-input::placeholder {
  color: var(--text-muted, rgba(255, 255, 255, 0.38));
}
.dw-input:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.35);
  outline-offset: 1px;
}
.dw-input--search {
  margin-bottom: 4px;
}

.dw-editor {
  display: block;
  width: 100%;
  min-height: 260px;
  padding: 14px 16px;
  border: none;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  font: inherit;
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-primary, rgba(255, 255, 255, 0.92));
  resize: none;
}
.dw-editor:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.3);
  outline-offset: 1px;
}

.dw-chat {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
}
.dw-chat__thread {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.dw-bubble {
  max-width: 78%;
  margin: 0;
  padding: 11px 14px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.5;
}
.dw-bubble--them {
  background: rgba(168, 85, 247, 0.18);
}
.dw-bubble--you {
  align-self: flex-end;
  background: rgba(255, 255, 255, 0.08);
}
.dw-chat__compose {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

.dw-spaces {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.dw-space {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  border: none;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
  transition: background-color 140ms linear;
}
.dw-space:hover {
  background: rgba(255, 255, 255, 0.11);
}
.dw-space__label {
  font-size: 14px;
}
.dw-space__note {
  font-size: 11px;
  color: var(--text-secondary, rgba(255, 255, 255, 0.6));
}

/* --------------------------------------------------- reduced motion --- */

@media (max-width: 700px) {
  .desk-launcher {
    inset: 110px 16px auto;
    height: calc(100dvh - 220px);
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
    grid-template-rows: none;
    grid-auto-rows: 96px;
    gap: 14px 4px;
    overflow-y: auto;
    overflow-x: hidden;
    pointer-events: auto;
    scrollbar-width: thin;
    justify-items: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dl-app-tile { transition: none; }
  .dl-app:hover, .dl-app:active { transform: none; }
  .dl-app,
  .desk-window__btn,
  .desk-window.is-shifting,
  .desk-window.is-settling,
  .desk-window.is-morphing,
  .desk-snap-hint {
    transition: none;
  }
  .neva-led .notch-held-window.is-landing {
    animation: none;
  }
}

/* Desk reference: four quiet glass shelves. Chrome is owned by the shell. */
.desk-launcher {
  inset: 118px auto 112px 4%;
  width: min(604px, 48vw);
  display: flex;
  flex-direction: column;
  gap: 21px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  pointer-events: auto;
  padding: 0 2px 4px;
}
.dl-group { margin: 0; min-width: 0; }
.dl-group-title { display:flex; align-items:center; gap:20px; margin:0 4px 14px; color:#edf2f3; font-size:14px; font-weight:400; line-height:17px; letter-spacing:3px; text-transform:uppercase; text-shadow:0 1px 6px #0008; }
.dl-group-title::after { content:''; flex:1; height:1px; background:rgba(232,243,244,.42); }
.dl-group-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.desk-launcher .dl-app, .dl-drag-clone.dl-app {
  width:100%; height:130px; padding:21px 6px 12px; gap:0; border-radius:18px;
  border:1px solid rgba(226,243,245,.24);
  background:linear-gradient(135deg,rgba(217,236,241,.20),rgba(181,215,221,.09));
  backdrop-filter:blur(19px) saturate(.85); -webkit-backdrop-filter:blur(19px) saturate(.85);
  box-shadow:inset 0 1px 1px #ffffff22,0 5px 16px #00000012;
  justify-content:flex-start; transition:background .18s,border-color .18s,transform .18s;
}
.desk-launcher .dl-app:hover { background-color:#d5edf01c; border-color:#e9f8fb70; }
.desk-launcher .dl-app.is-selected { border-color:#e8faff9c; background-color:#b9e5f11c; }
.desk-launcher .dl-app-tile, .dl-drag-clone .dl-app-tile { width:44px;height:44px;min-height:44px;margin-bottom:12px;border:0;border-radius:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none; }
.desk-launcher .dl-app-tile::before,.dl-drag-clone .dl-app-tile::before { display:none; }
.desk-launcher .dl-app-tile svg,.dl-drag-clone .dl-app-tile svg { width:44px;height:44px;filter:drop-shadow(0 2px 4px #0002); }
.desk-launcher .dl-app-label,.dl-drag-clone .dl-app-label {font-size:14px;line-height:18px;font-weight:400;letter-spacing:0;color:#fafcfc;text-shadow:0 1px 3px #0003;}
.dl-app-subtitle {font-size:13px;line-height:18px;margin-top:2px;color:rgba(223,232,233,.64);white-space:nowrap;}
@media (min-width:701px) and (max-height:880px) {
  .desk-launcher {top:100px;gap:14px;width:min(556px,48vw);}
  .desk-launcher .dl-app {height:clamp(94px,13.8vh,120px);padding-top:12px;}
  .desk-launcher .dl-app-tile {margin-bottom:7px;width:38px;height:38px;min-height:38px;}
  .desk-launcher .dl-app-tile svg {width:38px;height:38px;}
  .dl-group-title {margin-bottom:10px;}
}
@media (max-width:700px) {
  .desk-launcher {inset:100px 18px 118px;width:auto;height:auto;gap:22px;}
  .dl-group-grid {gap:12px;grid-template-columns:repeat(4,minmax(0,1fr));}
  .desk-launcher .dl-app {height:112px;padding:15px 3px 10px;}
  .desk-launcher .dl-app-tile {width:36px;height:36px;min-height:36px;margin-bottom:9px;}
  .desk-launcher .dl-app-tile svg {width:36px;height:36px;}
  .desk-launcher .dl-app-label {font-size:12px;}
  .dl-app-subtitle {font-size:11px;}
}
@media (max-width:440px) { .dl-group-grid {grid-template-columns:repeat(2,minmax(0,1fr));} }

/* Hide the launcher scrollbar without changing its layout or reachability. */
.desk-launcher { scrollbar-width: none; }
.desk-launcher::-webkit-scrollbar { display: none; }

/* Keep the icon artwork clear in hover and selected states. */
.desk-launcher .dl-app:hover .dl-app-tile,
.desk-launcher .dl-app.is-selected .dl-app-tile {
  background: none;
  box-shadow: none;
}

/* Each category is a single shelf; additional apps extend to the right. */
.desk-launcher {
  width: auto;
  right: 4%;
  --desk-card-width: 136px;
}
.dl-group-grid {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: var(--desk-card-width);
  justify-content: start;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  padding: 3px 2px 5px;
}
.dl-group-grid::-webkit-scrollbar { display: none; }
@media (min-width:701px) and (max-height:880px) {
  .desk-launcher { width: auto; --desk-card-width: 124px; }
}
@media (max-width:700px) {
  .desk-launcher { right: 18px; --desk-card-width: 112px; }
  .dl-group-grid { grid-template-columns: none; }
}

/* Compact desktop tiles, preserving the single-row shelves. */
.desk-launcher { --desk-card-width: 94px; gap: 16px; }
.dl-group-grid { gap: 12px; }
.desk-launcher .dl-app { height: 92px; padding: 12px 4px 8px; border-radius: 14px; }
.desk-launcher .dl-app-tile { width: 30px; height: 30px; min-height: 30px; margin-bottom: 7px; }
.desk-launcher .dl-app-tile svg { width: 30px; height: 30px; }
.desk-launcher .dl-app-label { font-size: 11px; line-height: 15px; }
.desk-launcher .dl-app-subtitle { font-size: 10px; line-height: 14px; margin-top: 1px; }
.desk-launcher .dl-app-dot { top: 36px; right: 25px; width: 4px; height: 4px; }
.dl-group-title { margin-bottom: 10px; }
@media (max-width:700px) { .desk-launcher { --desk-card-width: 94px; gap: 16px; } }

/* Machine status sits in the card corner, away from the icon and label. */
.desk-launcher .dl-app-dot { top: 10px; right: 10px; }

/* Category rules end at the fourth tile without limiting the app row. */
.desk-launcher .dl-group-title {
  width: calc(var(--desk-card-width) * 4 + 32px);
  max-width: calc(100% - 8px);
}

/* Collection alone uses preview shelves instead of launcher tiles. */
.dc-shelf { display:flex; gap:24px; padding:3px 2px 8px; }
.dc-card { box-sizing:border-box; width:280px; flex:0 0 280px; padding:16px 18px 12px; border-radius:22px; border:1px solid #e2f3f53d; background:linear-gradient(135deg,#d9ecf12b,#b5d7dd14); backdrop-filter:blur(19px) saturate(.85); -webkit-backdrop-filter:blur(19px) saturate(.85); box-shadow:inset 0 1px 1px #ffffff22,0 5px 16px #00000012; color:#f5f8f8; }
.dc-card header {display:flex;gap:14px;align-items:center;margin-bottom:18px;font-size:14px;}
.dc-card header>svg {width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round;}
.dc-card header small {display:block;font-size:11px;color:#dfe8e9a3;margin-top:3px;}
.dc-card button {font:inherit;color:inherit;cursor:pointer;}
.dc-expand {margin-left:auto;width:32px;height:32px;border:1px solid #ffffff26;border-radius:10px;background:#dcebef21;font-size:22px!important;}
.dc-previews {display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;}
.dc-preview {width:64px;padding:0;border:0;background:none;font-size:10px!important;text-align:center;}
.dc-thumb {position:relative;display:block;height:58px;margin-bottom:8px;border-radius:5px;border:1px solid #eaf5f7b3;background:#cdd9dc;box-shadow:0 2px 4px #0003;}
.dc-thumb img {width:100%;height:100%;object-fit:cover;border-radius:4px;position:relative;}
.is-folder .dc-thumb::before {content:'';position:absolute;left:1px;top:-7px;width:28px;height:9px;background:#e2e8eb;clip-path:polygon(0 0,78% 0,100% 70%,100% 100%,0 100%);border-radius:3px 0 0 0;}
.is-stack .dc-thumb {box-shadow:3px 4px 0 #b9d4d144,5px 8px 0 #b9d4d126;}
.dc-add {width:64px;height:68px;background:#dfefed21;border:1px solid #ebf4f72e;border-radius:9px;font-size:32px!important;font-weight:200!important;}
.dc-card button:hover {filter:brightness(1.16);}
.dc-card button:focus-visible {outline:2px solid #d8ece7;outline-offset:4px;}
.dc-picker {width:360px;max-width:90vw;border:1px solid #ffffff30;border-radius:20px;background:#172225ee;color:#eef3f4;backdrop-filter:blur(22px);padding:22px;}
.dc-picker::backdrop {background:#0006;}
.dc-picker header {display:flex;justify-content:space-between;align-items:center;}
.dc-picker button {background:#ffffff0d;border:1px solid #ffffff24;border-radius:9px;color:inherit;padding:12px;cursor:pointer;}
.dc-options {display:grid;grid-template-columns:1fr 1fr;gap:10px;}
[data-expanded-collection] {padding:20px;} [data-expanded-collection] .dc-card {width:100%;}
@media(max-width:700px) {.dc-shelf {overflow-x:auto;scrollbar-width:none;gap:16px;} .dc-shelf::-webkit-scrollbar {display:none;} }

/* Reserve the full Collection height in the first desktop view. */
.desk-launcher > .dl-group { flex-shrink: 0; }
@media (max-height: 850px) {
  .desk-launcher { gap: 8px; }
  .desk-launcher .dl-group-title { margin-bottom: 6px; }
}
@media (max-height: 760px) {
  .desk-launcher { top: 92px; bottom: 90px; }
  .desk-launcher .dl-app { height: 80px; padding-top: 7px; padding-bottom: 5px; }
  .desk-launcher .dc-card { padding-top: 12px; padding-bottom: 10px; }
  .desk-launcher .dc-card header { margin-bottom: 12px; }
  .desk-launcher .dc-thumb { height: 50px; }
  .desk-launcher .dc-add { height: 60px; }
}

/* Five layered glass folders: the Desk's visual entry points. */
.desk-folder-scene {position:absolute;inset:140px 7.5% 130px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));column-gap:clamp(40px,8vw,140px);row-gap:35px;align-items:center;pointer-events:none;font-family:var(--font-sans,system-ui);}
.df-folder {width:100%;max-width:340px;justify-self:center;aspect-ratio:1.58;position:relative;pointer-events:auto;}
.df-open {position:absolute;inset:0;border:0;padding:0;background:none;color:#f5f8fa;cursor:pointer;text-align:start;font:inherit;isolation:isolate;}
.df-back {position:absolute;inset:5% 3% 9%;border:1px solid #e1f4fc66;border-radius:20px;background:linear-gradient(135deg,#b1d1df65,#91b1b233);backdrop-filter:blur(18px) saturate(.8);-webkit-backdrop-filter:blur(18px) saturate(.8);clip-path:polygon(0 0,40% 0,46% 10%,100% 10%,100% 100%,0 100%);box-shadow:inset 0 1px 0 #ffffff55;}
.df-back-far {inset:10% 9% 12% 0;transform:rotate(-3deg);background:#c2dce239;}
.df-previews {position:absolute;inset:14% 7% 22%;display:flex;align-items:end;perspective:650px;}
.df-peek {position:relative;display:grid;place-items:center;width:36%;height:93%;flex-shrink:0;border:1px solid #e1edf3a1;border-radius:5px;background:linear-gradient(145deg,#273740,#0b1826);box-shadow:0 4px 10px #0003;overflow:hidden;transform:rotate(-8deg);transition:transform .22s ease;}
.df-peek-1 {height:88%;margin-left:-4%;transform:rotate(-5deg);background:linear-gradient(135deg,#547781,#18333c);}
.df-peek-2 {height:80%;margin-left:-4%;transform:rotate(9deg);background:linear-gradient(145deg,#364651,#152029);}
.df-peek svg {width:48%;height:48%;filter:drop-shadow(0 3px 6px #0003);}
.df-peek.is-paper {background:linear-gradient(135deg,#e6edf2,#b7c5d0);color:#283641;display:block;padding:15px 11px;box-sizing:border-box;}
.df-paper-title {font-size:clamp(10px,1vw,15px);line-height:1.4;}
.df-paper-lines {display:block;margin-top:13px;height:46px;background:repeating-linear-gradient(0deg,transparent 0 7px,#75889455 7px 8px);}
.df-peek img {width:100%;height:100%;object-fit:cover;}
.df-front {position:absolute;inset:auto 0 0;height:36%;box-sizing:border-box;display:flex;align-items:center;gap:18px;padding:13px 23px;border:1px solid #e6f4f977;border-radius:16px;background:linear-gradient(125deg,#b7d1d574,#88a6b967);backdrop-filter:blur(24px) saturate(.75);-webkit-backdrop-filter:blur(24px) saturate(.75);box-shadow:inset 0 1px 1px #ffffff40,0 8px 25px #00000016;}
.df-front>svg,.df-dialog header>svg {width:32px;height:34px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.df-caption {display:grid;gap:5px;font-size:16px;}
.df-caption small {font-size:12px;color:#e0ebedbd;}
.df-ellipsis {margin-left:auto;font-size:24px;letter-spacing:2px;}
.df-open:hover .df-peek-0 {transform:translateY(-5px) rotate(-11deg);}
.df-open:hover .df-peek-2 {transform:translateY(-4px) rotate(12deg);}
.df-open:hover .df-front {background-color:#ddf0f219;}
.df-open:focus-visible {outline:2px solid #effaff;outline-offset:8px;border-radius:18px;}
.df-dialog {width:min(740px,88vw);max-height:78dvh;box-sizing:border-box;padding:24px;border:1px solid #e1f4f74d;border-radius:24px;background:linear-gradient(135deg,#284148dc,#152c34e8);backdrop-filter:blur(28px);color:#f2f8f9;font:14px var(--font-sans,system-ui);box-shadow:0 20px 70px #0005;color-scheme:dark;}
.df-dialog::backdrop {background:#05121845;backdrop-filter:blur(5px);}
.df-dialog header {display:flex;gap:16px;align-items:center;margin-bottom:24px;}
.df-dialog h2 {font-size:21px;font-weight:400;margin:0 0 5px;}.df-dialog header p {margin:0;color:#c0d1d5;font-size:12px;}
.df-close {margin-left:auto;border:1px solid #ffffff30;background:#ffffff10;color:inherit;font-size:25px;border-radius:10px;width:38px;height:38px;cursor:pointer;}
.df-contents {display:flex;flex-wrap:wrap;gap:16px;}
.df-resource {width:112px;min-height:108px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:12px 6px;border:1px solid #e6f7f533;border-radius:16px;background:#b5d3da18;color:inherit;font:12px var(--font-sans,system-ui);cursor:pointer;}
.df-resource svg {width:34px;height:34px;}.df-resource:hover {background:#cde8e629;}.df-dialog button:focus-visible {outline:2px solid #ecffff;outline-offset:3px;}
.df-dialog .dc-shelf {flex-wrap:wrap;}.df-dialog .dc-card {flex-basis:280px;}
@media(max-width:1000px){.desk-folder-scene {inset:120px 5% 120px;column-gap:30px;row-gap:28px;}.df-front {padding:10px 14px;gap:10px;}.df-caption {font-size:14px;}.df-front>svg {width:26px;}.df-ellipsis {font-size:20px;}}
@media(max-width:700px){.desk-folder-scene {inset:110px 20px 115px;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(150px,1fr));gap:24px;overflow-y:auto;scrollbar-width:none;align-items:center;}.desk-folder-scene::-webkit-scrollbar {display:none;}.df-folder {min-height:140px;}.df-front {height:44%;padding:10px;}.df-caption {font-size:13px;}.df-caption small {font-size:11px;}.df-front>svg {width:23px;}.df-dialog .dc-shelf {padding:0;}.df-dialog .dc-card {width:100%;flex-basis:100%;}}
@media(prefers-reduced-motion:reduce){.df-peek {transition:none;}.df-open:hover .df-peek-0 {transform:rotate(-8deg);}.df-open:hover .df-peek-2 {transform:rotate(9deg);}}

/* One continuous folder lip, with a softly raised tab at the left. */
.df-shape-defs {position:absolute;pointer-events:none;}
.df-front {height:45%;padding:22px 26px 4px;gap:21px;background:none;border:0;border-radius:0;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;isolation:isolate;}
.df-front-glass {position:absolute;inset:0;z-index:-1;clip-path:url(#desk-folder-front);background:linear-gradient(120deg,rgba(88,112,118,.63),rgba(116,144,157,.48));backdrop-filter:blur(24px) saturate(.8);-webkit-backdrop-filter:blur(24px) saturate(.8);}
.df-front>.df-front-outline {position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:rgba(220,239,244,.58);stroke-width:1.2;pointer-events:none;z-index:0;}
.df-front>.df-front-outline path {vector-effect:non-scaling-stroke;}
.df-front>.df-caption,.df-front>.df-ellipsis,.df-front>svg:not(.df-front-outline) {position:relative;z-index:1;}
.df-open:hover .df-front {background:none;}
.df-open:hover .df-front-glass {background-color:rgba(215,236,239,.06);}
.df-caption {gap:5px;font-size:16px;line-height:1.2;}
.df-caption small {font-size:13px;color:rgba(231,240,242,.74);}
.df-ellipsis {font-size:25px;line-height:1;letter-spacing:2px;}
@media(max-width:1000px){.df-front {padding:19px 18px 3px;gap:14px;}.df-caption {font-size:14px;}.df-caption small {font-size:11px;}}
@media(max-width:700px){.df-front {height:48%;padding:17px 12px 2px;gap:10px;}.df-caption {font-size:13px;}.df-ellipsis {font-size:18px;letter-spacing:0;}}

/* Smooth, level back edges and an unoutlined front glass surface. */
.df-back {
  clip-path: none;
  border: 0;
  border-radius: 22px;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.12);
}
.df-back-far { transform: none; }
.df-front > .df-front-outline { display: none; }

/* Reference glass: no offset side panel, lighter translucent surfaces. */
.df-folder { transform: scale(.9); transform-origin: center; }
.df-back-far { display: none; }
.df-back {
  background: linear-gradient(135deg, rgba(153,181,190,.32), rgba(97,130,145,.22));
  backdrop-filter: blur(14px) saturate(.95);
  -webkit-backdrop-filter: blur(14px) saturate(.95);
  box-shadow: inset 0 1px 1px rgba(241,250,252,.15);
}
.df-front-glass {
  background: linear-gradient(120deg, rgba(69,91,99,.42), rgba(117,151,168,.30));
  backdrop-filter: blur(18px) saturate(.9);
  -webkit-backdrop-filter: blur(18px) saturate(.9);
}

/* Pack the smaller folders into a centered, evenly spaced composition. */
.desk-folder-scene {
  inset: 130px 5% 125px;
  grid-template-columns: repeat(3, minmax(0, 306px));
  grid-template-rows: repeat(2, minmax(0, 194px));
  justify-content: center;
  align-content: center;
  column-gap: clamp(24px, 3.5vw, 58px);
  row-gap: clamp(26px, 4vh, 40px);
}
.df-folder { width: 111.111%; max-width: 340px; }
@media (max-width:1000px) {
  .desk-folder-scene {
    inset: 115px 5% 120px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, auto);
    column-gap: 22px;
    row-gap: 30px;
  }
}
@media (max-width:700px) {
  .desk-folder-scene {
    inset: 110px 24px 115px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, auto);
    align-content: start;
    gap: 22px 18px;
  }
  .df-folder { min-height: 0; }
}

/* Folder contents stay on the desktop: no modal scrim or focus trap. */
.df-popover {position:fixed;z-index:1150;margin:0;width:min(640px,calc(100vw - 32px));max-height:calc(100dvh - 180px);overflow:auto;pointer-events:auto;transform-origin:top center;}
.df-popover .df-contents {gap:12px;}
.df-popover .df-resource {min-height:96px;width:104px;}
body:not([data-space="desk"]) .df-popover {display:none;}

/* Launch the two real desktop entries directly from their visible previews. */
.df-direct-surface {cursor:default;}
.df-desktop .df-previews {gap:12px;justify-content:center;}
.df-machine {width:46%;margin:0;color:#eef7fa;font:12px var(--font-sans,system-ui);cursor:pointer;padding:10px 5px 30px;align-content:center;gap:9px;}
.df-machine svg {width:38px;height:38px;}
.df-machine span {font-size:11px;white-space:nowrap;}
.df-desktop .df-front {pointer-events:none;}
.df-machine:focus-visible {outline:2px solid #e5fbff;outline-offset:3px;}
.df-direct-surface:hover .df-peek-0 {transform:rotate(-8deg);}
.df-machine:hover {filter:brightness(1.15);}

/* Top: Desktop, Apps, Collections. Files fills the second shelf. */
.df-files-skeleton > span {display:block;width:70%;height:55%;margin:auto;background:linear-gradient(100deg,#ffffff08,#ffffff22,#ffffff08);border-radius:8px;}
.df-folder.df-files {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 111.111%;
  max-width: none;
  height: 215px;
  aspect-ratio: auto;
}
.df-files .df-previews {left:7%;right:7%;justify-content:space-around;gap:18px;}
.df-files .df-peek {width:110px;max-width:17%;margin-left:0;}
.df-files .df-peek-3 {transform:rotate(-4deg);height:88%;}
.df-files .df-peek-4 {transform:rotate(7deg);height:80%;}
.df-files .df-front {padding-left:32px;padding-right:32px;}
@media(max-width:700px){
  .df-folder.df-files {grid-row:auto;height:190px;}
  .df-files .df-previews {gap:6px;left:5%;right:5%;}
  .df-files .df-peek {max-width:19%;}
  .df-files .df-front {padding-left:18px;padding-right:18px;}
}

/* Direct launch surfaces: every preview is an actual app, without a folder popup. */
.df-direct-surface .df-front{pointer-events:none}
.df-direct-surface .df-machine{pointer-events:auto}
.df-collections .df-machine{width:34%;padding-inline:2px}
.df-files .df-machine{height:94%;padding-bottom:30px}
.df-apps .df-previews{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;gap:8px;align-items:stretch;bottom:27%;padding:4px 2px 0;scroll-snap-type:x proximity}
.df-apps .df-previews::-webkit-scrollbar{display:none}
.df-apps .df-machine{flex:0 0 32%;width:32%;height:100%;margin:0;transform:none;padding:8px 2px 18px;scroll-snap-align:start}
.df-apps .df-machine svg{width:30px;height:30px}
.df-apps .df-machine span{font-size:10px}
.df-browse{display:flex;margin-left:auto;gap:4px;pointer-events:auto}
.df-browse button{border:0;background:rgba(255,255,255,.08);color:inherit;border-radius:8px;width:26px;height:30px;font-size:22px;cursor:pointer}
.df-browse button:hover{background:rgba(255,255,255,.18)}
.df-browse button:focus-visible{outline:2px solid #d6f5ff;outline-offset:2px}

.df-direct-surface .df-machine{align-content:start;padding-top:12px;gap:6px}
.df-direct-surface .df-machine svg{width:32px;height:32px}

/* A close-set fan of documents, with staggered tops and overlapping edges. */
.df-files .df-previews,.df-apps .df-previews{justify-content:flex-start;align-items:flex-end;gap:0;padding:14px 12px 0;bottom:22%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;scroll-snap-type:x proximity}
.df-files .df-previews{left:6%;right:6%}
.df-files .df-previews::-webkit-scrollbar,.df-apps .df-previews::-webkit-scrollbar{display:none}
.df-files .df-machine,.df-apps .df-machine{--paper-angle:-8deg;flex:0 0 110px;width:110px;max-width:none;height:96%;margin:0;transform:rotate(var(--paper-angle));transform-origin:50% 100%;padding:12px 3px 22px;scroll-snap-align:start;box-shadow:0 5px 12px #07121955;transition:transform .18s ease,filter .18s ease}
.df-files .df-machine + .df-machine,.df-apps .df-machine + .df-machine{margin-left:-18px}
.df-files .df-machine:nth-child(3n+2),.df-apps .df-machine:nth-child(3n+2){--paper-angle:-2deg;height:89%}
.df-files .df-machine:nth-child(3n),.df-apps .df-machine:nth-child(3n){--paper-angle:8deg;height:82%}
.df-files .df-machine span,.df-apps .df-machine span{font-size:11px}
.df-files .df-direct-surface:hover .df-machine,.df-apps .df-direct-surface:hover .df-machine{transform:rotate(var(--paper-angle))}
.df-files .df-direct-surface .df-machine:hover,.df-files .df-direct-surface .df-machine:focus-visible,.df-apps .df-direct-surface .df-machine:hover,.df-apps .df-direct-surface .df-machine:focus-visible{z-index:2;transform:translateY(-5px) rotate(var(--paper-angle));filter:brightness(1.12)}
@media(prefers-reduced-motion:reduce){.df-files .df-machine,.df-apps .df-machine{transition:none}}

.df-files .df-previews,.df-apps .df-previews{top:7%}

/* Content-led previews: paper, photo, book and app artwork inside the glass. */
.df-direct-surface .df-preview-paper,.df-direct-surface .df-preview-calendar,.df-direct-surface .df-preview-chart{display:flex;flex-direction:column;align-items:stretch;gap:9px;text-align:left;background:linear-gradient(135deg,#f4f5f0,#ced8e1);color:#34424d;padding:14px 14px 24px;border-color:#f9ffffb3}
.df-machine .df-document-top{display:block;width:24%;height:2px;background:#91a3b4;opacity:.55;flex-shrink:0}
.df-machine .df-document-title{font-size:11px;font-weight:500;white-space:nowrap}
.df-machine .df-document-lines{display:block;height:29px;flex-shrink:0;background:repeating-linear-gradient(to bottom,#8e9fab55 0 1px,transparent 1px 7px)}
.df-machine .df-lines-short{width:68%;height:15px}
.df-machine .df-calendar-grid{height:36px;background:repeating-linear-gradient(90deg,transparent 0 9px,#90a5b855 9px 10px),repeating-linear-gradient(0deg,transparent 0 8px,#90a5b855 8px 9px)}
.df-machine .df-mini-bars{display:flex;height:36px;align-items:flex-end;gap:5px}
.df-mini-bars i{width:12px;height:35%;background:#6290d9}.df-mini-bars i:nth-child(2){height:55%}.df-mini-bars i:nth-child(3){height:75%}.df-mini-bars i:nth-child(4){height:100%}
.df-direct-surface .df-preview-photo{padding:0;display:block;background:#436477}
.df-cover-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.df-machine .df-photo-title{position:absolute;left:0;right:0;top:35%;padding:18px 7px 24px;color:#fff;text-shadow:0 1px 4px #000;background:linear-gradient(transparent,#09182299);font-size:11px;white-space:nowrap}
.df-direct-surface .df-preview-book{display:flex;flex-direction:column;gap:12px;align-items:flex-start;text-align:left;padding:15px 15px 24px 20px;background:linear-gradient(90deg,#a58d64 0 5px,#d7c7a5 6px,#f0e5ce 14px,#ddd0b2);color:#4b483a;border-color:#f7e9c7b3}
.df-machine .df-book-title{font-size:12px;letter-spacing:.03em}
.df-machine .df-book-rule{height:1px;width:24px;background:#8e7854}
.df-machine .df-book-subtitle{font-size:13px;line-height:1.35;white-space:normal;font-family:Georgia,serif}
.df-direct-surface .df-preview-sky{background:radial-gradient(ellipse at 30% 85%,#98ced9,transparent 60%),linear-gradient(140deg,#194653,#457f98);border-color:#a2c7d2}
.df-direct-surface .df-preview-sound{background:radial-gradient(ellipse at 20% 85%,#c791b3,transparent 65%),linear-gradient(145deg,#352d56,#716993);border-color:#c9b8de}
.df-direct-surface .df-preview-violet{background:radial-gradient(ellipse at 65% 30%,#b896d8,transparent 70%),#4b4365}
.df-direct-surface .df-preview-soft{background:linear-gradient(135deg,#d4dedc,#8fa5ad);color:#29424c}
.df-files .df-machine,.df-apps .df-machine{flex-basis:118px;width:118px}
.df-files .df-machine + .df-machine,.df-apps .df-machine + .df-machine{margin-left:-24px}
.df-files .df-previews,.df-apps .df-previews{top:2%;padding-top:17px;padding-left:17px;padding-right:17px}
.df-files .df-machine:nth-child(3n+2),.df-apps .df-machine:nth-child(3n+2){height:94%}
.df-files .df-machine:nth-child(3n),.df-apps .df-machine:nth-child(3n){height:88%}
.df-collections .df-preview-book{padding-left:13px;padding-right:8px}

/* Dense closed stacks; expand to select, never scroll through the folder. */
.df-files .df-previews,.df-apps .df-previews{overflow:visible;display:block;padding:0;top:16%;bottom:22%}
.df-files .df-previews .df-machine,.df-apps .df-previews .df-machine{position:absolute;bottom:0;left:calc(var(--item-index) * min(88px,(100% - 118px) / (var(--item-count) - 1)));margin:0;width:118px;max-width:100%;height:100%}
.df-files .df-previews .df-machine:nth-child(3n+2),.df-apps .df-previews .df-machine:nth-child(3n+2){height:94%}
.df-files .df-previews .df-machine:nth-child(3n),.df-apps .df-previews .df-machine:nth-child(3n){height:87%}
.df-expand{pointer-events:auto;margin-left:auto;width:36px;height:36px;display:grid;place-items:center;flex-shrink:0;border:1px solid #e1f7ff22;border-radius:10px;background:#d8f1ff15;color:#edf8fb;cursor:pointer}
.df-front .df-expand svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5}
.df-expand:hover,.df-collapse:hover{background:#e2f5ff30}
.df-expand:focus-visible,.df-collapse:focus-visible{outline:2px solid #e2f7ff;outline-offset:3px}
.df-expanded-stack{position:fixed;z-index:1150;box-sizing:border-box;width:min(calc(var(--stack-columns) * 124px + 40px),calc(100vw - 32px));padding:20px;border:1px solid #d2edf84d;border-radius:22px;background:linear-gradient(130deg,#42616ee6,#263b49eb);backdrop-filter:blur(26px);box-shadow:0 26px 75px #07111b66;color:#f1f7fa;transform-origin:center;}
.df-expanded-stack header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.df-expanded-stack header strong{font-size:17px;font-weight:500}.df-expanded-stack header small{display:block;margin-top:4px;font-size:12px;color:#cfdae0}
.df-collapse{width:36px;height:36px;border:0;border-radius:10px;background:#d8f1ff15;color:inherit;font-size:24px;cursor:pointer}
.df-expanded-grid{display:grid;grid-template-columns:repeat(var(--stack-columns),minmax(0,1fr));gap:18px 12px}
.df-expanded-grid .df-machine{position:relative;width:100%;height:126px;margin:0;transform:none;padding:14px 7px;align-content:start;gap:10px;border-radius:7px;box-shadow:0 4px 12px #07121b44;transition:transform .18s ease}
.df-expanded-grid .df-machine:hover,.df-expanded-grid .df-machine:focus-visible{transform:translateY(-4px)}
.df-expanded-grid .df-machine svg{width:34px;height:34px}
.df-expanded-grid .df-preview-paper,.df-expanded-grid .df-preview-calendar,.df-expanded-grid .df-preview-chart{display:flex;flex-direction:column;gap:9px;background:linear-gradient(135deg,#f4f5f0,#ced8e1);color:#34424d;text-align:left;padding:14px}
.df-expanded-grid .df-preview-book{background:linear-gradient(90deg,#a58d64,#f0e5ce 12%,#ddd0b2);color:#4b483a;display:flex;flex-direction:column;text-align:left;padding:15px}
.df-expanded-grid .df-preview-sky{background:linear-gradient(140deg,#194653,#609eb1)}
.df-expanded-grid .df-preview-sound,.df-expanded-grid .df-preview-violet{background:linear-gradient(140deg,#453557,#9b83b3)}
.df-expanded-grid .df-preview-soft{background:linear-gradient(135deg,#8ea4ab,#506975)}
body:not([data-space="desk"]) .df-expanded-stack{display:none}
@media(prefers-reduced-motion:reduce){.df-expanded-grid .df-machine{transition:none}}

.df-expanded-grid .df-machine{height:var(--stack-card-height,126px)}

/* The expanded view is the same folder silhouette, opened wider. */
.df-expanded-stack{width:min(calc(var(--stack-columns) * 124px + 76px),calc(100vw - 32px));height:calc(var(--stack-rows) * var(--stack-card-height) + (var(--stack-rows) - 1) * 20px + 102px);padding:0;border:0;border-radius:0;background:none;backdrop-filter:none;box-shadow:none;isolation:isolate}
.df-expanded-stack > .df-back{inset:5px 16px 24px;border-radius:25px;background:linear-gradient(135deg,rgba(133,167,179,.58),rgba(74,105,122,.50));backdrop-filter:blur(24px);box-shadow:0 16px 55px #07131d33,inset 0 1px 1px #e5faff40}
.df-expanded-stack .df-expanded-grid{position:absolute;inset:30px 30px 62px;display:grid;grid-template-columns:repeat(var(--stack-columns),minmax(0,1fr));gap:20px 0;align-items:end;perspective:1100px}
.df-expanded-stack .df-machine{--paper-angle:-6deg;width:calc(100% + 9px);height:var(--stack-card-height);margin:0;transform:rotate(var(--paper-angle));transform-origin:center bottom;box-shadow:0 6px 14px #0c192633}
.df-expanded-stack .df-machine:nth-child(3n+2){--paper-angle:-2deg;height:calc(var(--stack-card-height) - 6px)}
.df-expanded-stack .df-machine:nth-child(3n){--paper-angle:6deg;height:calc(var(--stack-card-height) - 13px)}
.df-expanded-stack .df-expanded-grid .df-machine:hover,.df-expanded-stack .df-expanded-grid .df-machine:focus-visible{z-index:2;transform:translateY(-7px) rotate(var(--paper-angle))}
.df-expanded-stack > .df-front{height:106px;padding:25px 28px 5px;gap:18px;pointer-events:none}
.df-expanded-stack .df-front-glass{background:linear-gradient(120deg,rgba(69,91,99,.7),rgba(117,151,168,.62));backdrop-filter:blur(24px)}
.df-expanded-stack .df-caption{font-size:18px}.df-expanded-stack .df-caption small{font-size:13px}
.df-expanded-stack .df-collapse{pointer-events:auto;margin-left:auto;display:grid;place-items:center;width:38px;height:38px}
.df-expanded-stack .df-front > svg{width:32px;height:34px;fill:none;stroke:currentColor;stroke-width:1.6}

/* Keep the folder fully present throughout the continuous expand/collapse. */
.df-expanded-stack.is-morphing .df-machine{transition:none;pointer-events:none}
.df-expanded-stack.is-morphing{will-change:transform}

/* Keep the two desktop previews together at the left edge of the folder. */
.df-desktop .df-previews{justify-content:flex-start;gap:0}
.df-desktop .df-machine{flex:0 0 42%;width:42%}
.df-desktop .df-machine + .df-machine{margin-left:-12%}
.df-desktop .df-machine:hover,.df-desktop .df-machine:focus-visible{z-index:2}

/* A consistent family of 20 recognizable file types. */
.df-direct-surface .df-preview-filetype{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:12px 12px 25px;background:linear-gradient(145deg,#f8f7f0,#dce2e5);color:#384650;border-color:#ffffffe0;text-align:left}
.df-machine .df-type-extension{font-size:9px;line-height:1.3;font-weight:700;letter-spacing:.08em;color:var(--type-color);border-bottom:2px solid var(--type-color);padding-bottom:4px;max-width:100%}
.df-direct-surface .df-type-glyph{width:32px;height:32px;min-height:24px;filter:none;color:var(--type-color)}
.df-machine .df-type-title{font-size:11px;line-height:1.2;white-space:normal;font-weight:500}
.df-machine .df-type-detail{height:18px;width:78%;opacity:.3;background:repeating-linear-gradient(transparent 0 5px,#8394a0 5px 6px)}
.df-preview-filetype[data-direct-app="photos"]{background:linear-gradient(#142c4610,#10273b77),url('./assets/backgrounds/blue-canyon-poster.webp') center/cover;color:#fff;--type-color:#fff!important}
.df-preview-filetype[data-direct-app="music"],.df-preview-filetype[data-direct-app="videos"]{background:radial-gradient(ellipse at 90% 90%,#c0a3c477,transparent),linear-gradient(135deg,#31445a,#69678d);color:#fff;--type-color:#e2d6f1!important}
.df-preview-filetype[data-direct-app="code"],.df-preview-filetype[data-direct-app="json"],.df-preview-filetype[data-direct-app="html"],.df-preview-filetype[data-direct-app="styles"]{background:linear-gradient(135deg,#213e48,#344a57);color:#e1edf1;--type-color:#9cdacb!important}
.df-preview-filetype[data-direct-app="archives"]{background:linear-gradient(90deg,#bd9d6c 0 8%,#ede0bf 8%);color:#67513b}
.df-preview-filetype[data-direct-app="ebooks"]{background:linear-gradient(90deg,#8b8460 0 5%,#e5debb 8%,#c9c5a1);color:#4e533b}
@media(max-width:700px){.df-expanded-grid .df-preview-filetype{gap:3px;padding:6px}.df-expanded-grid .df-type-detail{display:none}.df-expanded-grid .df-type-glyph{width:20px;height:20px;min-height:16px}.df-expanded-grid .df-type-extension{font-size:8px}.df-expanded-grid .df-type-title{font-size:10px}}

/* Image files are photographic contact prints, with only a small format label. */
.df-direct-surface .df-preview-filetype[data-direct-app="photos"]{padding:0;background:#233e4a;border-color:#e6f3f5b3}
.df-photo-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.df-machine .df-photo-format{position:absolute;top:9px;left:9px;font-size:8px;letter-spacing:.08em;font-weight:600;color:#fff;background:#16344185;border:1px solid #ffffff33;border-radius:4px;padding:3px 5px;backdrop-filter:blur(6px)}
.df-machine .df-photo-caption{position:absolute;left:0;right:0;top:45%;padding:20px 10px 24px;color:#fff;text-align:left;font-size:11px;background:linear-gradient(transparent,#142e4277);text-shadow:0 1px 3px #102030}
/* Folders contain little paper edges and a tab, never a document glyph. */
.df-direct-surface .df-directory{background:none;border:0;box-shadow:none;padding:0;overflow:visible}
.df-mini-folder-tab{position:absolute;inset:12px 2px 0;background:linear-gradient(140deg,#b4cfd1,#688f9f);clip-path:polygon(0 0,40% 0,51% 12%,100% 12%,100% 100%,0 100%);border-radius:8px}
.df-mini-folder-sheets{position:absolute;inset:32px 12px 20px;background:#f1efe3;border-radius:4px;transform:rotate(-7deg);box-shadow:6px -5px 0 #c8d8df}
.df-mini-folder-face{position:absolute;inset:48% 0 0;display:flex;flex-direction:column;gap:5px;padding:14px 10px;background:linear-gradient(135deg,#92b4baee,#527f92ee);border:1px solid #e4f7f966;border-radius:8px;box-shadow:0 4px 12px #11273433;color:#f4fbfc;text-align:left}
.df-machine .df-mini-folder-face span{font-size:12px}.df-mini-folder-face small{font-size:10px;color:#e5f0f3}
/* Real Files entries (desk-files-real.js): folders navigate, files are shown, notices explain. */
.df-real-folder .df-mini-folder-face span,.df-real-file .df-type-title{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.df-real-file{cursor:default}.df-real-file .df-type-detail{font-size:10px;opacity:.75;min-height:12px}
.df-notice{display:grid;place-items:center;padding:12px 10px;text-align:center;font-size:11px;line-height:1.4;color:#e8f1f4;background:linear-gradient(145deg,#2d4049,#16262f);border-color:#c7dde41f;cursor:default;transform:none}
.df-notice .df-notice-text{display:block;max-height:100%;overflow:hidden}
.df-notice[data-files-state="loading"]{color:#c8dbe2}.df-notice[data-files-state="denied"],.df-notice[data-files-state="signed-out"]{background:linear-gradient(145deg,#4a3038,#241a1e)}
.df-files .df-previews .df-notice{flex:0 0 62%;width:62%;max-width:62%;height:70%;margin:0 auto;font-size:12px;transform:none}
.df-expanded-stack .df-notice,.df-inline-row .df-notice{grid-column:1 / -1;height:auto;min-height:52px;transform:none}
.df-direct-surface:hover .df-notice{transform:none;filter:none}
.desk-folder-scene.has-open-directory{align-content:start;grid-template-rows:194px auto}
.df-folder.df-files.has-open-directory{height:440px;transition:height .32s ease}
.df-files.has-open-directory > .df-open{height:215px;bottom:auto}
.df-directory-content{position:absolute;top:219px;left:3%;right:3%;height:209px;padding:12px 20px 0;box-sizing:border-box;border-radius:0 0 20px 20px;background:linear-gradient(130deg,#7ca0ae66,#294d6566);backdrop-filter:blur(18px);box-shadow:inset 0 1px #d9f4ff26;perspective:900px}
.df-folder-path{display:flex;align-items:center;gap:8px;position:relative;z-index:3;color:#e7f0f4;font-size:12px}
.df-folder-path button{border:0;background:none;color:inherit;font:inherit;padding:6px 8px;border-radius:6px;cursor:pointer}
.df-folder-path button:hover{background:#ffffff20}.df-folder-path button:focus-visible{outline:2px solid #dcf4ff}
.df-folder-path [aria-current]{font-weight:600}.df-folder-path .df-directory-close{margin-left:auto;font-size:21px}
.df-child-previews{position:absolute;left:24px;right:24px;top:55px;bottom:18px;display:flex;align-items:flex-end;gap:4px}
.df-child-previews .df-machine{position:relative!important;left:auto!important;flex:0 1 118px!important;width:118px!important;max-width:24%!important;height:132px!important;margin:0!important;transform:rotate(-4deg)!important}
.df-child-previews .df-machine:nth-child(even){transform:rotate(3deg)!important}
.df-child-previews .df-machine:hover,.df-child-previews .df-machine:focus-visible{z-index:2;transform:translateY(-5px) rotate(0deg)!important}
.df-child-lip{position:absolute;left:0;right:0;bottom:0;height:27px;border-radius:0 0 20px 20px;background:#7496a38c;backdrop-filter:blur(14px);pointer-events:none}
@media(max-width:700px){.desk-folder-scene.has-open-directory{grid-template-rows:auto auto auto}.df-directory-content{padding-inline:8px}.df-child-previews{left:12px;right:12px}.df-folder-path{gap:1px}.df-folder-path button{padding:6px 4px}}
@media(prefers-reduced-motion:reduce){.df-folder.df-files.has-open-directory{transition:none}}

/* The existing Files face opens vertically and contains the folder contents. */
.df-files > .df-open > .df-front{top:118px;bottom:auto;height:97px;align-items:flex-start;padding-top:36px}
.df-folder.df-files.has-open-directory{height:430px;transition:none}
.df-files.has-open-directory > .df-open > .df-front{height:306px}
.df-files .df-front > .df-directory-content{top:89px;left:22px;right:22px;height:201px;padding:0 10px;background:none;backdrop-filter:none;box-shadow:none;border-radius:0;pointer-events:auto}
.df-files .df-directory-content .df-child-previews{top:48px;bottom:12px;left:14px;right:14px}
.df-files.has-open-directory > .df-open > .df-front > .df-front-glass{background:linear-gradient(120deg,rgba(69,91,99,.64),rgba(117,151,168,.49));backdrop-filter:blur(23px)}
@media(max-width:700px){.df-files > .df-open > .df-front{top:100px}.df-files .df-front > .df-directory-content{left:10px;right:10px}.df-folder.df-files.has-open-directory{height:412px}}

/* Expand the cavity above the label; the Files lip keeps its original height. */
.df-files > .df-open > .df-front,.df-files.has-open-directory > .df-open > .df-front{top:auto;bottom:0;height:97px}
.df-files.has-open-directory > .df-open{height:100%;bottom:0}
.df-folder.df-files.has-open-directory{height:452px}
.df-files > .df-open > .df-previews{top:34px;height:133px;bottom:auto}
.df-files.has-open-directory > .df-open > .df-back{inset:11px 3% 40px}
.df-files > .df-open > .df-directory-content{top:176px;left:4%;right:4%;height:173px;padding:0 10px;background:none;backdrop-filter:none;box-shadow:none;border-radius:0;pointer-events:auto}
.df-files > .df-open > .df-directory-content .df-child-previews{top:44px;bottom:4px;left:14px;right:14px}
.df-files > .df-open > .df-directory-content .df-child-previews .df-machine{height:120px!important}
.df-files.has-open-directory > .df-open > .df-front > .df-front-glass{background:linear-gradient(120deg,rgba(69,91,99,.42),rgba(117,151,168,.30));backdrop-filter:blur(18px)}
@media(max-width:700px){.df-files > .df-open > .df-previews{top:29px;height:118px}.df-folder.df-files.has-open-directory{height:430px}.df-files > .df-open > .df-directory-content{top:158px;height:168px}}

/* Each expanded row has the same translucent retaining lip as the folder. */
.df-expanded-stack{height:calc(var(--stack-rows) * var(--stack-card-height) + (var(--stack-rows) - 1) * 28px + 102px)}
.df-expanded-stack .df-expanded-grid{display:flex;flex-direction:column;gap:28px;align-items:stretch}
.df-expanded-row{position:relative;display:grid;grid-template-columns:repeat(var(--row-columns),minmax(0,1fr));align-items:end;height:var(--stack-card-height);flex-shrink:0;isolation:isolate}
.df-row-shelf{position:absolute;left:-22px;right:-22px;bottom:-15px;height:39px;z-index:3;border-radius:12px;clip-path:polygon(0 0,8% 0,11% 24%,100% 24%,100% 100%,0 100%);background:linear-gradient(120deg,rgba(75,103,115,.74),rgba(132,165,179,.64));backdrop-filter:blur(18px);box-shadow:0 8px 14px #10232e33;pointer-events:none}
.df-expanded-row .df-machine:hover,.df-expanded-row .df-machine:focus-visible{z-index:4!important}
.df-expanded-stack .df-front .df-stack-path{display:flex;align-items:center;gap:5px;margin-left:18px;pointer-events:auto;font-size:12px;min-width:0;flex-wrap:wrap}
.df-stack-path button{font:inherit;color:#f0f8fb;border:0;border-radius:7px;background:transparent;padding:7px 9px;cursor:pointer}
.df-stack-path button:hover{background:#e5f4ff20}.df-stack-path button:focus-visible{outline:2px solid #daf4ff;outline-offset:2px}.df-stack-path button:disabled{opacity:.35;cursor:default}
.df-stack-path [aria-current]{background:#d9edf21a}.df-stack-path>span{opacity:.55}
@media(max-width:700px){.df-expanded-stack > .df-front{height:116px;padding:22px 16px 6px;gap:10px;align-items:flex-start}.df-expanded-stack .df-front .df-stack-path{position:absolute;left:12px;right:12px;bottom:6px;margin:0;gap:0;font-size:11px}.df-stack-path button{padding:5px 7px}.df-expanded-stack .df-caption{font-size:15px}}

/* Reuse the real folder face for every shelf, including its curved tab. */
.df-expanded-stack{height:calc(var(--stack-rows) * var(--stack-card-height) + (var(--stack-rows) - 1) * 56px + 102px)}
.df-expanded-stack .df-expanded-grid{gap:56px}
.df-row-shelf{left:-30px;right:-30px;bottom:-48px;height:106px;border:0;border-radius:0;clip-path:none;background:none;backdrop-filter:none;box-shadow:none;isolation:isolate}
.df-row-shelf .df-front-glass{z-index:0}
.df-row-shelf > .df-front-outline{display:none}

.df-row-shelf{height:53px;bottom:-22px}
.df-expanded-stack{height:calc(var(--stack-rows) * var(--stack-card-height) + (var(--stack-rows) - 1) * 30px + 102px)}
.df-expanded-stack .df-expanded-grid{gap:30px}

/* Folder navigation stays in its existing desktop footprint. Only extra rows add height. */
.df-files.df-browsing > .df-open{height:100%}
.df-files.df-browsing > .df-open > .df-back{inset:11px 3% 40px}
.df-files.df-browsing > .df-open > .df-previews{display:flex;flex-direction:column;gap:34px;height:auto;bottom:75px;top:30px}
.df-inline-row{display:flex;align-items:flex-end;position:relative;height:118px;flex-shrink:0;gap:0;isolation:isolate}
.df-files.df-browsing .df-inline-row .df-machine{position:relative;left:auto;bottom:auto;flex:0 0 118px;width:118px;max-width:45%;height:118px;margin:0 0 0 -8px}
.df-files.df-browsing .df-inline-row .df-machine:first-child{margin-left:0}
.df-files.df-browsing .df-inline-row .df-machine:nth-child(3n+2){height:113px}
.df-files.df-browsing .df-inline-row .df-machine:nth-child(3n){height:107px}
.df-inline-row .df-row-shelf{left:-18px;right:-18px;bottom:-22px;height:53px}
.df-inline-row .df-front-glass{clip-path:url(#desk-files-front)}
.df-files .df-front > .df-inline-path{display:flex;align-items:center;gap:4px;pointer-events:auto;margin-left:18px;font-size:12px}
@media(max-width:700px){.df-files .df-front > .df-inline-path{position:absolute;left:12px;right:50px;bottom:3px;margin:0;gap:0;font-size:10px}.df-inline-path button{padding:3px 5px}.df-files.df-browsing > .df-open > .df-previews{left:7%;right:7%}}

/* Expanded shelves use the same glass recipe as the default desktop folder. */
.df-expanded-stack .df-front-glass{background:linear-gradient(120deg,rgba(69,91,99,.42),rgba(117,151,168,.30));backdrop-filter:blur(18px) saturate(.9);-webkit-backdrop-filter:blur(18px) saturate(.9)}
.df-expanded-stack > .df-back{background:linear-gradient(135deg,rgba(153,181,190,.32),rgba(97,130,145,.22));backdrop-filter:blur(14px) saturate(.95);-webkit-backdrop-filter:blur(14px) saturate(.95);box-shadow:inset 0 1px 1px rgba(241,250,252,.15)}

/* Column containers must stretch their rows, rather than align them to the right. */
.df-files.df-browsing > .df-open > .df-previews{align-items:stretch}
.df-files.df-browsing .df-inline-row{width:100%;justify-content:flex-start;direction:ltr}

/* A back affordance beside the contents makes the current folder level explicit. */
.df-content-back{position:absolute;left:24px;top:55px;z-index:5;width:42px;height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0;border:1px solid #e0f5ff40;border-radius:12px;background:#d7e9f21a;backdrop-filter:blur(18px);color:#f0f8fc;cursor:pointer;box-shadow:inset 0 1px #ffffff20;pointer-events:auto}
.df-content-back svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.df-content-back span{font:10px var(--font-sans,system-ui);letter-spacing:.03em}
.df-content-back:hover{background:#def1fa30}.df-content-back:focus-visible{outline:2px solid #e5faff;outline-offset:3px}
.df-files.df-browsing > .df-open > .df-previews{left:86px}
.df-expanded-stack.is-inside-folder .df-expanded-grid{left:84px}
.df-expanded-stack.is-inside-folder .df-content-back{top:75px}
@media(max-width:700px){.df-content-back{left:15px;width:36px;height:52px}.df-files.df-browsing > .df-open > .df-previews{left:66px}.df-expanded-stack.is-inside-folder .df-expanded-grid{left:65px}}

/* Keep Back inside the inset glass backplate, including the wide Files shelf. */
.df-files .df-content-back{left:calc(3% + 18px);top:55px}
.df-files.df-browsing > .df-open > .df-previews{left:calc(3% + 80px)}
.df-expanded-stack.is-inside-folder .df-content-back{left:34px}
.df-expanded-stack.is-inside-folder .df-expanded-grid{left:94px}
@media(max-width:700px){.df-files .df-content-back{left:calc(3% + 12px)}.df-files.df-browsing > .df-open > .df-previews{left:calc(3% + 62px)}.df-expanded-stack.is-inside-folder .df-content-back{left:28px}.df-expanded-stack.is-inside-folder .df-expanded-grid{left:78px}}
/* Many file types need scrolling on a phone; keep the folder footer reachable. */
@media (max-width: 700px) {
  .desk-window--app:not(.is-max) {
    max-width: calc(100vw - 16px);
  }
  .df-expanded-stack {
    --stack-card-height: 88px !important;
    max-height: calc(100dvh - 184px);
  }
  .df-expanded-stack .df-expanded-grid {
    top: 24px; right: 24px; bottom: 132px; left: 24px;
    padding: 8px 8px 12px;
    overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  }
  /* Keep the decorative lip in the gap, below the card's label. */
  .df-expanded-stack .df-row-shelf {
    height: 24px;
    bottom: -28px;
  }
}