.ui-window {
  overflow: hidden;
  border: 2px solid var(--ss-color-ink);
  border-radius: var(--ss-radius-shell);
  background: var(--ss-color-shell);
  box-shadow: var(--ss-shadow-lifted);
}

.ui-titlebar {
  position: relative;
  display: flex;
  min-height: 39px;
  align-items: center;
  justify-content: space-between;
  gap: var(--ss-space-2);
  padding: 5px 7px 5px 9px;
  border: 2px solid var(--ss-color-purple-dark);
  color: var(--ss-color-title);
  background: linear-gradient(var(--ss-color-purple-light), var(--ss-color-purple));
  box-shadow: var(--ss-titlebar-shadow);
  font-family: var(--ss-font-window-title);
  font-size: var(--ss-text-window-title);
  font-weight: 400;
  line-height: 1;
  text-shadow: 2px 2px 0 var(--ss-color-purple-dark);
}

/* .ui-panel, the house panel, is in primitives.css so every app has it. */

.ui-status {
  padding: var(--ss-space-2) var(--ss-space-3);
  border-left: 4px solid var(--ss-color-border-soft);
  color: var(--ss-color-ink);
  background: var(--ss-color-paper);
}

.ui-workspace-window {
  position: absolute;
  z-index: 3;
  display: flex;
  min-width: 320px;
  min-height: 260px;
  flex-direction: column;
  /* Resize handles straddle the painted rim; clip app content in the client. */
  overflow: visible;
}

.ui-workspace-window[hidden] {
  display: none;
}

.ui-workspace-live-region {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ui-workspace-titlebar {
  z-index: 4;
  flex: 0 0 44px;
  min-height: 44px;
  height: 44px;
  padding-block: 3px;
  /* Keep visible controls clear of the invisible north-east resize target. */
  padding-inline-end: 18px;
  cursor: move;
  touch-action: none;
}

.ui-workspace-titlebar:focus-visible {
  outline: 3px solid var(--ss-color-pink-strong);
  outline-offset: -3px;
}

.ui-workspace-title,
.ui-workspace-controls {
  display: flex;
  align-items: center;
}

.ui-workspace-title {
  min-width: 0;
  gap: var(--ss-space-1);
  pointer-events: none;
  white-space: nowrap;
}

.ui-workspace-title img {
  width: var(--ss-icon-size);
  height: var(--ss-icon-size);
  transform: translateY(-1px);
  image-rendering: pixelated;
}

[data-skin="keepsake"] .ui-workspace-title img,
[data-skin="clean"] .ui-workspace-title img { display: none; }

.ui-workspace-controls {
  flex: none;
  margin-inline-start: auto;
  gap: 6px;
}

.ui-workspace-controls button {
  box-sizing: border-box;
  display: grid;
  flex: none;
  width: 32px;
  min-height: 32px;
  height: 32px;
  place-items: center;
  padding: 0;
  border: 2px solid var(--ss-color-purple-dark);
  border-radius: 0;
  color: var(--ss-color-ink);
  background: var(--ss-color-shell);
  box-shadow: inset 1px 1px #fff, inset -1px -1px #b99d95, 2px 2px var(--ss-color-purple-dark);
  cursor: pointer;
}

.ui-workspace-controls button:hover {
  filter: brightness(1.02);
}

/* Pressed pin is pink; a maximised window's restore button stays plain like minimise and close. */
.ui-workspace-controls button[aria-pressed="true"]:not([data-workspace-action="maximize"]) {
  background: var(--ss-color-pink);
}

.ui-workspace-controls .ui-icon,
.ui-workspace-controls img {
  display: block;
  width: 16px;
  height: 16px;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}
.ui-workspace-controls button[data-workspace-action="close"]:not([aria-pressed="true"]) { color: var(--ss-color-ink); background: var(--ss-color-paper); }
.ui-workspace-controls button:focus-visible { outline: 3px solid #fffaf4; outline-offset: 2px; }
.ui-workspace-title strong { min-width: 0; overflow: visible; font-weight: inherit; line-height: var(--ss-line-window-title); text-overflow: clip; }
.ui-workspace-title-jp {
  font-family: var(--ss-font-jp);
  font-weight: 400;
  font-synthesis: none;
  line-height: inherit;
  vertical-align: baseline;
}

.ui-workspace-window.is-panel-window { min-height: 0; }
.ui-workspace-titlebar--panel {
  flex: 0 0 38px;
  min-height: 38px;
  height: 38px;
  padding-block: 3px;
  padding-inline-end: 8px;
}
.ui-workspace-titlebar--panel .ui-workspace-title strong {
  font-size: var(--ss-text-xs);
  line-height: 1.2;
}

.ui-workspace-client,
.ui-dockview,
.workspace-module {
  width: 100%;
  min-width: 0;
  min-height: 0;
}

.ui-workspace-client {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
}

.ui-dockview,
.workspace-module {
  height: 100%;
}

.ui-dockview {
  overflow: hidden;
  --dv-tabs-and-actions-container-height: 32px;
  --dv-tab-divider-color: var(--ss-color-border);
  --dv-activegroup-visiblepanel-tab-background-color: var(--ss-color-pink);
  --dv-activegroup-hiddenpanel-tab-background-color: var(--ss-color-purple);
  --dv-inactivegroup-visiblepanel-tab-background-color: var(--ss-color-purple-soft);
  --dv-inactivegroup-hiddenpanel-tab-background-color: var(--ss-color-purple);
  --dv-tabs-and-actions-container-background-color: var(--ss-color-purple);
  --dv-group-view-background-color: var(--ss-color-shell);
  --dv-separator-border: var(--ss-color-border);
  --dv-drag-over-background-color: color-mix(in srgb, var(--ss-color-pink) 36%, transparent);
  --dv-drag-over-border-color: var(--ss-color-pink-strong);
}

.ui-dockview .dv-dockview,
.ui-dockview .dv-groupview {
  background: var(--ss-color-shell);
}

.ui-dockview:not(.has-tabs) .dv-tabs-and-actions-container {
  display: none;
}

.ui-dockview .dv-tabs-and-actions-container[data-workspace-panel-owner="journal"] {
  display: none;
}

.ui-workspace-tab {
  height: 100%;
  border: 0;
  padding: var(--ss-space-1) var(--ss-space-2);
  color: var(--ss-color-ink);
  background: var(--ss-color-shell);
  font: inherit;
  font-family: var(--ss-font-pixel-title);
  font-synthesis-weight: none;
  font-size: var(--ss-text-base);
  cursor: pointer;
}

/* The tab you are on is solid plum with paper words (house style, 17 Oct). */
.ui-workspace-tab[aria-pressed="true"] {
  color: var(--ss-color-paper);
  background: var(--ss-lock-ground);
  box-shadow: none;
}

.ui-workspace-tab:focus-visible {
  outline: 2px solid var(--ss-color-ink);
  outline-offset: -3px;
}

.ui-dockview.has-tabs .dv-tabs-and-actions-container {
  background: var(--ss-color-purple);
}

.ui-workspace-window.is-space {
  min-width: 0;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.ui-workspace-window.is-space .ui-workspace-client,
.ui-workspace-window.is-space .ui-dockview,
.ui-workspace-window.is-space .pocket-study-dockview-engine,
.ui-workspace-window.is-space .dv-dockview,
.ui-workspace-window.is-space .dv-groupview,
.ui-workspace-window.is-space .dv-tabs-and-actions-container,
.ui-workspace-window.is-space .dv-tabs-container,
.ui-workspace-window.is-space .dv-tab,
.ui-workspace-window.is-space .dv-grid-view,
.ui-workspace-window.is-space .dv-split-view-container,
.ui-workspace-window.is-space .dv-content-container,
.ui-workspace-window.is-space .dv-view-container,
.ui-workspace-window.is-space .dv-view,
.ui-workspace-window.is-space [class*="dv-tabpanel-"] {
  background: transparent;
}

.ui-workspace-window.is-space .ui-dockview {
  --dv-tab-divider-color: transparent;
  --dv-tabs-and-actions-container-background-color: transparent;
  --dv-activegroup-visiblepanel-tab-background-color: transparent;
  --dv-activegroup-hiddenpanel-tab-background-color: transparent;
  --dv-inactivegroup-visiblepanel-tab-background-color: transparent;
  --dv-inactivegroup-hiddenpanel-tab-background-color: transparent;
  --dv-group-view-background-color: transparent;
  --dv-separator-border: transparent;
}

/* Only the window on top of the stack wears the lit title bar. */
.ui-workspace-window:not(.is-focused) .ui-workspace-titlebar {
  background: linear-gradient(var(--ss-color-purple-soft), var(--ss-color-purple));
  box-shadow: none;
}

.ui-workspace-window.is-maximized {
  border-radius: 0;
}

.ui-workspace-window.is-minimized {
  display: none;
}

.ui-workspace-window.is-maximized .ui-workspace-resize {
  display: none;
}

.ui-workspace-window.is-space.is-minimized {
  display: none;
}

.ui-workspace-window.is-covered-by-space {
  display: none;
}

.ui-workspace-window.is-minimized .ui-workspace-client,
.ui-workspace-window.is-minimized .ui-workspace-resize {
  display: none;
}

.ui-workspace-window.is-pinned .ui-workspace-titlebar {
  cursor: default;
}

/* Anything on the desktop being moved or resized wears the same pink dashes: every window, and the Home card while
   it is dragged by its band (modules/shell/phone-home.mjs). */
.ui-workspace-window:is(.is-dragging, .is-resizing),
.ui-phone-home[data-home-card-dragging] {
  outline: 4px dashed rgba(247, 181, 197, .78);
  outline-offset: 4px;
}

.ui-workspace-resize {
  position: absolute;
  z-index: 7;
  touch-action: none;
}

.ui-workspace-resize-n,
.ui-workspace-resize-s { left: 16px; right: 16px; height: 20px; cursor: ns-resize; }
/* The top resize strip must not cover the window buttons. */
.ui-workspace-resize-n { top: -12px; height: 17px; }
.ui-workspace-resize-s { bottom: -12px; }
.ui-workspace-resize-e,
.ui-workspace-resize-w { top: 16px; bottom: 16px; width: 20px; cursor: ew-resize; }
/* Twelve pixels crosses even Keepsake's six-pixel rim and adds outside tolerance. */
.ui-workspace-resize-e { right: -12px; }
.ui-workspace-resize-w { left: -12px; }
.ui-workspace-resize-ne,
.ui-workspace-resize-se,
.ui-workspace-resize-sw,
.ui-workspace-resize-nw { width: 28px; height: 28px; }
.ui-workspace-resize-ne { top: -12px; right: -12px; cursor: nesw-resize; }
.ui-workspace-resize-se {
  right: -12px;
  bottom: -12px;
  width: 36px;
  height: 36px;
  cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 0 48%, var(--ss-color-ink-soft) 49% 58%, transparent 59% 67%, var(--ss-color-ink) 68% 77%, transparent 78%) right 14px bottom 14px / 18px 18px no-repeat;
}
.ui-workspace-resize-sw { left: -12px; bottom: -12px; cursor: nesw-resize; }
.ui-workspace-resize-nw { left: -12px; top: -12px; cursor: nwse-resize; }

@media (max-width: 720px) {
  .ui-window {
    border-radius: var(--ss-radius-sm);
    box-shadow: var(--ss-shadow);
  }

  .ui-titlebar {
    min-height: 46px;
    flex-wrap: wrap;
    font-size: var(--ss-text-window-title-mobile);
  }

}

@media (max-width: 720px), (orientation: portrait) {
  .ui-workspace-window {
    min-width: 0;
    min-height: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .ui-workspace-titlebar { cursor: default; }
  .ui-workspace-resize { display: none; }
  /* The shell's ⊞ Pocket Study button sits at the start of a phone window's title bar. */
  .is-phone-workspace > .ui-workspace-window > .ui-workspace-titlebar { padding-inline-start: max(9px, var(--ss-phone-nav-inset, 0px)); }
  /* On a phone every app is full screen and the ⊞ menu switches between them, so the bar holds ⊞ and the app's name only. */
  .is-phone-workspace > .ui-workspace-window > .ui-workspace-titlebar > .ui-workspace-controls { display: none; }
}

/* Room restores the hard pixel-window paint without changing the shared window bones. */
[data-skin="room"] .ui-window {
  box-sizing: border-box;
  border-color: var(--ss-window-outline);
  border-radius: 5px 5px 3px 3px;
  background: var(--ss-color-shell);
  box-shadow: var(--ss-window-bevel), var(--ss-shadow-hard);
}

[data-skin="room"] .ui-workspace-window.is-maximized {
  border-radius: 5px 5px 3px 3px;
  box-shadow: var(--ss-window-bevel);
}

[data-skin="room"] .ui-titlebar,
[data-skin="room"] .ui-workspace-titlebar,
[data-skin="room"] .ui-workspace-window:not(.is-focused) .ui-workspace-titlebar {
  border-color: var(--ss-color-purple-dark);
  color: var(--ss-color-title);
  background: var(--ss-color-purple);
  box-shadow: var(--ss-titlebar-bevel);
  font-family: var(--ss-font-retro);
  font-weight: 700;
}

[data-skin="room"] .ui-workspace-controls button {
  border-color: var(--ss-window-outline);
  border-radius: var(--ss-radius-sm);
  color: var(--ss-color-ink);
  background: var(--ss-color-shell);
  box-shadow: var(--ss-button-shadow-hard);
}

[data-skin="room"] .ui-workspace-controls button[data-workspace-action="close"] {
  color: var(--ss-color-ink);
  background: var(--ss-close-face);
}

[data-skin="room"] .ui-workspace-controls button[aria-pressed="true"] {
  border-color: var(--ss-color-pink-strong);
  background: var(--ss-color-pink);
}

.ui-workspace-controls .ui-window-control-art { display: none; }
.ui-workspace-controls button[data-workspace-action="pin"] .ui-window-control-art { display: block; }
[data-skin="room"] .ui-workspace-controls :is(.ui-window-control-default, .ui-window-control-art) { grid-area: 1 / 1; }
[data-skin="room"] .ui-workspace-controls .ui-window-control-default { visibility: hidden; }
[data-skin="room"] .ui-workspace-controls .ui-window-control-art {
  display: block;
  width: 21px;
  height: 21px;
  object-fit: contain;
  image-rendering: pixelated;
}

[data-skin="room"] .ui-panel {
  border-color: var(--ss-color-border);
  background: var(--ss-color-paper);
  box-shadow: var(--ss-panel-bevel);
}

.ui-workspace-controls button[data-workspace-action="pin"] .ui-window-control-art { width: 24px; height: 24px; }
/* The pin is drawn under its illustration; when the illustration fails, the drawing shows instead of a broken image. */
.ui-workspace-controls button[data-workspace-action="pin"] :is(.ui-window-control-default, .ui-window-control-art) { grid-area: 1 / 1; }
.ui-workspace-controls button[data-workspace-action="pin"]:not(.is-art-missing) .ui-window-control-default { visibility: hidden; }
.ui-workspace-controls button.is-art-missing .ui-window-control-art { display: none; }
[data-skin="room"] .ui-workspace-controls button.is-art-missing .ui-window-control-default { visibility: visible; }

/* A phone space has no window face behind it, so a load failure there brings its own paper. */
.ui-workspace-window:not(:has([data-drag-handle])) .ui-load-failure { background: var(--ss-color-paper); }

/* An app still opening is covered in its own panel by the quiet opening state until it mounts, so an
   unstyled or half-drawn start never shows; a phone space's engine wait brings its own paper too. */
.ui-dockview :has(> .ui-workspace-opening) { position: relative; }
.ui-workspace-opening { position: absolute; inset: 0; z-index: 1; background: var(--ss-color-paper); }
/* Once "Opening …" shows (after a second), it is the brand plum on a phone too (owner, 16 Oct). */
.ui-workspace-window:not(:has([data-drag-handle])) .ui-opening { background: var(--ss-lock-ground); }

/* v94's line icons for the window buttons show only in a v94 look on a computer (skins/palettes.css). */
.ui-workspace-controls .ui-window-control-line { display: none; }

/* v94 looks, an app that couldn't open (the desktop's D030), on a phone as on a computer: the brick "!" tile folds into the
   plum logo crane, holds with one wing beat, and folds back (pixel-better's bang-to-crane-b, 16 Oct: "Let's keep it as a
   plum logo crane"). 21 frames of 32 x 32 (assets/error-crane-strip.png) at 2x, each held its own time, 4.04 s a loop;
   Reduce Motion keeps the "!" (assets/error-crane-still.png). */
:is([data-skin="keepsake"]):is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) .ui-workspace-window .ui-load-failure:not(.ui-load-failure--panel) .ui-load-failure__icon { width: 64px; height: 64px; margin-bottom: 4px; border: 0; border-radius: 0; background: url("./assets/error-crane-strip.png") 0 0 / 1344px 64px no-repeat; image-rendering: pixelated; animation: ui-error-crane 4040ms step-end infinite; }
:is([data-skin="keepsake"]):is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) .ui-workspace-window .ui-load-failure:not(.ui-load-failure--panel) .ui-load-failure__icon > .ui-icon { display: none; }
@keyframes ui-error-crane { 0% { background-position: 0px 0; } 34.653% { background-position: -64px 0; } 36.881% { background-position: -128px 0; } 39.109% { background-position: -192px 0; } 41.337% { background-position: -256px 0; } 43.564% { background-position: -320px 0; } 45.792% { background-position: -384px 0; } 48.02% { background-position: -448px 0; } 50.248% { background-position: -512px 0; } 52.475% { background-position: -576px 0; } 54.95% { background-position: -640px 0; } 64.851% { background-position: -704px 0; } 67.327% { background-position: -768px 0; } 82.178% { background-position: -832px 0; } 84.406% { background-position: -896px 0; } 86.634% { background-position: -960px 0; } 88.861% { background-position: -1024px 0; } 91.089% { background-position: -1088px 0; } 93.317% { background-position: -1152px 0; } 95.545% { background-position: -1216px 0; } 97.772% { background-position: -1280px 0; } }
@media (prefers-reduced-motion: reduce) {
  :is([data-skin="keepsake"]):is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) .ui-workspace-window .ui-load-failure:not(.ui-load-failure--panel) .ui-load-failure__icon { animation: none; background: url("./assets/error-crane-still.png") 0 0 / 64px 64px no-repeat; }
}

/* v94 looks on a computer, an app that couldn't open (the desktop's D030): on the window's cream, the folding crane tile,
   the title in the pixel title face in plum, the line under it, and Reload as the plum main button. */
@media (min-width: 721px) and (orientation: landscape) {
  :is([data-skin="keepsake"]):is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) .ui-workspace-window .ui-load-failure:not(.ui-load-failure--panel) { gap: 12px; background: var(--ss-color-bg); }
  :is([data-skin="keepsake"]):is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) .ui-workspace-window .ui-load-failure:not(.ui-load-failure--panel) .ui-load-failure__title { color: var(--ss-lock-ground); font: 400 var(--ss-text-title)/1.25 var(--ss-font-pixel-title, var(--ss-font-display)); }
  :is([data-skin="keepsake"]):is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) .ui-workspace-window .ui-load-failure:not(.ui-load-failure--panel) .ui-load-failure__body { color: var(--ss-color-ink); font: 500 var(--ss-text-base)/1.45 var(--ss-font-reading); }
  :is([data-skin="keepsake"]):is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) .ui-workspace-window .ui-load-failure:not(.ui-load-failure--panel) [data-ui-load-failure-action] { min-height: 40px; padding: 4px 22px; border: 2px solid var(--ss-lock-raise); border-radius: 6px; color: var(--ss-lock-ink); background: var(--ss-lock-ground); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .28), inset -1px -1px 0 rgba(31, 37, 80, .55), 2px 3px 0 var(--ss-lock-raise); font: 700 var(--ss-text-base)/1.2 var(--ss-font-reading); }
  :is([data-skin="keepsake"]):is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) .ui-workspace-window .ui-load-failure:not(.ui-load-failure--panel) [data-ui-load-failure-action] { font: 400 var(--ss-text-base)/1.2 var(--ss-font-pixel-title); }
}