@cardstack/boxel-cli 0.9.0 → 0.10.0-unstable.0

package/bundled-test-harness/assets/workspace-chooser-CqLR2Dzh.css

@@ -0,0 +1,1296 @@
+
+  .archived-card[data-scopedcss-916d2a767c-9115c24cc7] {
+    display: flex;
+    flex-direction: column;
+    width: var(--workspace-chooser-card-width);
+    position: relative;
+  }
+  .tile[data-scopedcss-916d2a767c-9115c24cc7] {
+    min-width: var(--workspace-chooser-tile-width);
+    width: var(--workspace-chooser-tile-width);
+    height: 10.375rem;
+    border-radius: var(--boxel-border-radius-xl);
+    background-color: var(--boxel-500);
+    background-image: var(--workspace-background-image-url);
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+  }
+  .tile[data-scopedcss-916d2a767c-9115c24cc7]::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: var(--boxel-border-radius-xl);
+    border: 1px solid rgba(255 255 255 / 25%);
+    pointer-events: none;
+    z-index: 3;
+  }
+  /* Dim the tile so an archived workspace reads as inactive. */
+  .tile-overlay[data-scopedcss-916d2a767c-9115c24cc7] {
+    position: absolute;
+    inset: 0;
+    background: rgba(24 25 32 / 55%);
+    z-index: 1;
+  }
+  .archive-badge[data-scopedcss-916d2a767c-9115c24cc7] {
+    position: absolute;
+    top: 0.5rem;
+    left: 0.5rem;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.75rem;
+    height: 1.75rem;
+    border-radius: var(--boxel-border-radius-sm);
+    background: rgba(0 0 0 / 45%);
+    backdrop-filter: blur(6px);
+    color: var(--boxel-light);
+    --icon-color: var(--boxel-light);
+  }
+  .realm-icon-wrapper[data-scopedcss-916d2a767c-9115c24cc7] {
+    flex-shrink: 0;
+    position: relative;
+    z-index: 2;
+    border-radius: calc(
+      var(--boxel-border-radius-xs) + var(--boxel-border-radius-sm)
+    );
+    display: flex;
+    box-shadow: 0 2px 6px rgb(0 0 0 / 30%);
+    opacity: 0.85;
+  }
+  .realm-icon-wrapper[data-scopedcss-916d2a767c-9115c24cc7]::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    box-shadow: inset 0 0 0 1px rgba(255 255 255 / 50%);
+    z-index: 1;
+    pointer-events: none;
+  }
+  .workspace-realm-icon[data-scopedcss-916d2a767c-9115c24cc7] {
+    --boxel-realm-icon-size: 2.625rem;
+    --boxel-realm-icon-border-radius: calc(
+      var(--boxel-border-radius-xs) + 6px
+    );
+    --boxel-realm-icon-background-color: var(--boxel-light);
+  }
+  .restore-btn[data-scopedcss-916d2a767c-9115c24cc7] {
+    position: absolute;
+    bottom: 0.5rem;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 2;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--boxel-sp-5xs);
+    padding: var(--boxel-sp-5xs) var(--boxel-sp-sm);
+    border: 1px solid rgba(255 255 255 / 45%);
+    border-radius: var(--boxel-border-radius-xxl);
+    background: rgba(0 0 0 / 55%);
+    backdrop-filter: blur(6px);
+    color: var(--boxel-light);
+    --icon-color: var(--boxel-light);
+    font: 700 var(--boxel-font-xs);
+    letter-spacing: var(--boxel-lsp);
+    cursor: pointer;
+    opacity: 0;
+    transition: opacity 0.15s ease;
+  }
+  .archived-card:hover .restore-btn[data-scopedcss-916d2a767c-9115c24cc7],
+  .restore-btn[data-scopedcss-916d2a767c-9115c24cc7]:focus-visible {
+    opacity: 1;
+  }
+  .restore-btn[data-scopedcss-916d2a767c-9115c24cc7]:hover {
+    background: var(--boxel-highlight);
+    color: var(--boxel-highlight-foreground);
+    border-color: var(--boxel-highlight);
+    --icon-color: var(--boxel-highlight-foreground);
+  }
+  .restore-pending[data-scopedcss-916d2a767c-9115c24cc7] {
+    position: absolute;
+    bottom: 0.5rem;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 2;
+  }
+  .restore-spinner[data-scopedcss-916d2a767c-9115c24cc7] {
+    --boxel-loading-indicator-size: 1.5rem;
+  }
+  .info[data-scopedcss-916d2a767c-9115c24cc7] {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top: var(--boxel-sp-xs);
+    gap: var(--boxel-sp-5xs);
+    max-width: var(--workspace-chooser-tile-width);
+  }
+  .info > span[data-scopedcss-916d2a767c-9115c24cc7] {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    width: 100%;
+    text-align: center;
+    letter-spacing: var(--boxel-lsp);
+  }
+  .info > .name[data-scopedcss-916d2a767c-9115c24cc7] {
+    color: var(--boxel-light);
+    font: 400 var(--boxel-font-sm);
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    text-wrap: wrap;
+    overflow-wrap: anywhere;
+  }
+  .status[data-scopedcss-916d2a767c-9115c24cc7] {
+    color: var(--boxel-400);
+    font: 400 var(--boxel-font-xs);
+    text-transform: capitalize;
+  }
+  .restore-error[data-scopedcss-916d2a767c-9115c24cc7] {
+    color: var(--boxel-danger);
+    font: 600 var(--boxel-font-xs);
+    text-wrap: wrap;
+    overflow-wrap: anywhere;
+  }
+
+  @layer PretComponent {
+    .pretui-visually-hidden[data-scopedcss-1129855c2f-6ec51e5ae3] {
+      position: absolute;
+      inline-size: 1px;
+      block-size: 1px;
+      margin: -1px;
+      padding: 0;
+      border: 0;
+      overflow: hidden;
+      clip-path: inset(50%);
+      white-space: nowrap;
+    }
+    .pretui-visually-hidden[data-focusable='true'][data-scopedcss-1129855c2f-6ec51e5ae3]:focus-within,
+    .pretui-visually-hidden[data-focusable='true'][data-scopedcss-1129855c2f-6ec51e5ae3]:focus {
+      position: static;
+      inline-size: auto;
+      block-size: auto;
+      margin: 0;
+      overflow: visible;
+      clip-path: none;
+      white-space: normal;
+    }
+  }
+
+  @layer PretComponent {
+    .pretui-alert[data-scopedcss-b6fa244805-fb5a3b5d57] {
+      --pretui-alert-mix: 20%;
+      display: flex;
+      gap: var(--boxel-sp-xs);
+      padding: var(--boxel-sp-2xs) var(--boxel-sp-xs);
+      border-radius: var(--boxel-border-radius);
+      background-color: color-mix(in oklch, var(--pretui-alert-hue) var(--pretui-alert-mix), var(--card));
+      color: var(--foreground);
+      box-shadow: 0 0 0 1px color-mix(in oklch, var(--pretui-alert-hue) 25%, var(--border));
+      font-size: var(--boxel-font-size-xs);
+    }
+    .pretui-alert-glyph[data-scopedcss-b6fa244805-fb5a3b5d57] {
+      width: 1rem;
+      height: 1rem;
+      border-radius: 50%;
+      flex: none;
+      display: grid;
+      place-items: center;
+      background-color: var(--pretui-alert-hue);
+      color: var(--pretui-alert-on-hue);
+      margin-top: 1px;
+    }
+    .pretui-alert-body[data-scopedcss-b6fa244805-fb5a3b5d57] {
+      display: grid;
+      gap: var(--boxel-sp-6xs);
+      min-width: 0;
+    }
+    .pretui-alert-title[data-scopedcss-b6fa244805-fb5a3b5d57] {
+      margin: 0;
+      font-weight: 600;
+    }
+    .pretui-alert-action[data-scopedcss-b6fa244805-fb5a3b5d57] {
+      margin-top: var(--boxel-sp-3xs);
+    }
+  }
+
+  @layer PretComponent {
+    .pretui-avatar[data-scopedcss-5178d38d8c-4c5bd031e9] {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      /* the default diameter, declared once */
+      --_avatar-size: var(--pretui-avatar-size, 1.5rem);
+      --_avatar-hue: var(--pretui-chip-hue, var(--primary));
+      width: var(--_avatar-size);
+      height: var(--_avatar-size);
+      /* 0.42 of the diameter; rounded to the whole pixel below where
+         round() is supported */
+      font-size: calc(var(--_avatar-size) * 0.42);
+      border-radius: 50%;
+      font-family: var(--font-mono);
+      font-weight: 600;
+      background-color: color-mix(in oklch, var(--_avatar-hue) 16%, var(--card));
+      color: var(--foreground);
+      box-shadow: 0 0 0 1px color-mix(in oklch, var(--_avatar-hue) 28%, var(--border));
+      overflow: hidden;
+      flex: none;
+    }
+    /* Gated rather than declared after the calc() fallback: a value
+       containing var() is accepted at parse time, so an engine without
+       round() would keep it, fail at computed-value time, and inherit
+       the parent's font size instead of using the fallback. */
+    @supports (font-size: round(1px, 1px)) {
+      .pretui-avatar[data-scopedcss-5178d38d8c-4c5bd031e9] {
+        font-size: round(calc(var(--_avatar-size) * 0.42), 1px);
+      }
+    }
+    /* A photo gets a neutral ring: the name's hue carries no meaning once
+       the photo shows. The ring sits on the root, whose overflow: hidden
+       circle would clip an outline on the square img. */
+    .pretui-avatar[data-has-image][data-scopedcss-5178d38d8c-4c5bd031e9] {
+      box-shadow: 0 0 0 1px color-mix(in oklch, var(--foreground) 10%, transparent);
+    }
+    .pretui-avatar img[data-scopedcss-5178d38d8c-4c5bd031e9] {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+
+  @layer PretComponent {
+    .pretui-dialog[data-scopedcss-fd5ccb4071-98262ab512] {
+      border: 0;
+      padding: 0;
+      background: var(--card);
+      color: var(--foreground);
+      border-radius: var(--radius-surface, 10px);
+      box-shadow: var(--pretui-shadow-overlay, 0 0 0 1px var(--border), 0 12px 40px rgb(16 24 40 / 0.18));
+      width: min(560px, calc(100vw - 32px));
+      max-height: calc(100dvh - 64px);
+      font-family: var(--font-sans);
+      font-size: var(--text-body, 15px);
+    }
+    .pretui-dialog[data-size='s'][data-scopedcss-fd5ccb4071-98262ab512] {
+      width: min(400px, calc(100vw - 32px));
+    }
+    .pretui-dialog[data-size='l'][data-scopedcss-fd5ccb4071-98262ab512] {
+      width: min(760px, calc(100vw - 32px));
+    }
+    .pretui-dialog[data-scopedcss-fd5ccb4071-98262ab512]::backdrop {
+      background: var(--pretui-overlay-scrim, rgb(16 24 40 / 0.4));
+    }
+    .pretui-dialog[open][data-scopedcss-fd5ccb4071-98262ab512] {
+      opacity: 1;
+      transform: none;
+      transition: opacity 200ms cubic-bezier(0.23, 1, 0.32, 1),
+        transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
+    }
+    @starting-style {
+      .pretui-dialog[open][data-scopedcss-fd5ccb4071-98262ab512] {
+        opacity: 0;
+        transform: translateY(6px) scale(0.98);
+      }
+    }
+    .pretui-dialog-inner[data-scopedcss-fd5ccb4071-98262ab512] {
+      display: grid;
+      gap: var(--space-4, 11px);
+      padding: var(--space-6, 19px);
+    }
+    .pretui-dialog-title[data-scopedcss-fd5ccb4071-98262ab512] {
+      font-size: var(--text-heading, 19px);
+      font-weight: var(--weight-heading, 700);
+      letter-spacing: var(--track-heading, -0.02em);
+    }
+    .pretui-dialog-body[data-scopedcss-fd5ccb4071-98262ab512] {
+      color: var(--muted-foreground);
+      line-height: calc(var(--leading-body, 24px) / var(--text-body, 15px));
+    }
+    .pretui-dialog-footer[data-scopedcss-fd5ccb4071-98262ab512] {
+      display: flex;
+      justify-content: flex-end;
+      gap: var(--space-3, 8px);
+      border-top: 1px solid var(--border);
+      padding-top: var(--space-4, 11px);
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .pretui-dialog[open][data-scopedcss-fd5ccb4071-98262ab512] {
+        transition: none;
+      }
+    }
+  }
+
+  /* above Button's layer, so these win by layer order, not file order */
+  @layer PretComponent, PretComposite;
+  @layer PretComposite {
+    .pretui-iconbtn[data-scopedcss-bcde96c7a5-2e8d552068] {
+      padding: 0;
+      width: var(--pretui-button-h, 2.24em);
+    }
+    /* square against Button's 24px minimum height at xs */
+    .pretui-iconbtn[data-size='xs'][data-scopedcss-bcde96c7a5-2e8d552068] {
+      width: max(var(--pretui-button-h, 2.24em), 1.5rem);
+    }
+    /* block-level, so the glyph is not set on Button's label line and
+       its baseline */
+    .pretui-iconbtn-glyph[data-scopedcss-bcde96c7a5-2e8d552068] {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    /* pressed is a tint one step stronger than the filled appearance's,
+       so it reads on outlined, plain and filled alike; an accent fill has
+       no stronger step and a link has no fill, so toggles use another
+       appearance */
+    .pretui-iconbtn[aria-pressed='true'][data-scopedcss-bcde96c7a5-2e8d552068]:not(
+        [data-appearance='accent'],
+        [data-appearance='link']
+      ) {
+      --_iconbtn-pressed-base: var(--background);
+      --pretui-btn-surface: color-mix(
+        in oklch,
+        var(--pretui-tone) 28%,
+        var(--_iconbtn-pressed-base)
+      );
+      --pretui-btn-surface-hover: color-mix(
+        in oklch,
+        var(--pretui-btn-tint) 34%,
+        var(--_iconbtn-pressed-base)
+      );
+    }
+    /* over the outlined appearance's own base surface, when a theme sets
+       one, so pressing changes the tint and not the base */
+    .pretui-iconbtn[aria-pressed='true'][data-appearance='outlined'][data-scopedcss-bcde96c7a5-2e8d552068] {
+      --_iconbtn-pressed-base: var(
+        --pretui-button-secondary-bg,
+        var(--background)
+      );
+    }
+    /* not when disabled, whose GrayText edge from Button is its only cue */
+    @media (forced-colors: active) {
+      .pretui-iconbtn[aria-pressed='true'][data-scopedcss-bcde96c7a5-2e8d552068]:not(
+          :disabled,
+          [aria-disabled='true']
+        ) {
+        border-color: Highlight;
+      }
+    }
+  }
+
+  @layer PretComponent {
+    .pretui-item[data-scopedcss-8d0ffb3c65-39abb89535] {
+      display: flex;
+      align-items: center;
+      gap: var(--pretui-item-gap, var(--space-4, 11px));
+      min-width: 0;
+      font-size: var(--text-ui-md, 12.5px);
+      letter-spacing: var(--track-ui, 0.01em);
+      color: var(--foreground);
+    }
+    .pretui-item[data-align='start'][data-scopedcss-8d0ffb3c65-39abb89535] {
+      align-items: flex-start;
+    }
+    .pretui-item[data-size='xs'][data-scopedcss-8d0ffb3c65-39abb89535] {
+      font-size: 10.5px;
+    }
+    .pretui-item[data-size='s'][data-scopedcss-8d0ffb3c65-39abb89535] {
+      font-size: var(--text-ui-sm, 11.5px);
+    }
+    .pretui-item[data-size='l'][data-scopedcss-8d0ffb3c65-39abb89535] {
+      font-size: 14px;
+    }
+    .pretui-item[data-size='xl'][data-scopedcss-8d0ffb3c65-39abb89535] {
+      font-size: 16px;
+    }
+    .pretui-item-lead[data-scopedcss-8d0ffb3c65-39abb89535] {
+      flex: none;
+      display: flex;
+      align-items: center;
+    }
+    /* min-width:0 is half the fix; without the three truncation
+       declarations on the text it hard-clips instead of ellipsising
+       */
+    .pretui-item-body[data-scopedcss-8d0ffb3c65-39abb89535] {
+      flex: 1 1 auto;
+      min-width: 0;
+      display: grid;
+      gap: 2px;
+    }
+    .pretui-item-title[data-scopedcss-8d0ffb3c65-39abb89535] {
+      display: block;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-weight: 500;
+    }
+    .pretui-item-link[data-scopedcss-8d0ffb3c65-39abb89535] {
+      color: inherit;
+      text-decoration: none;
+    }
+    .pretui-item-link[data-scopedcss-8d0ffb3c65-39abb89535]:hover {
+      text-decoration: underline;
+    }
+    .pretui-item-link[data-scopedcss-8d0ffb3c65-39abb89535]:focus-visible {
+      outline: 2px solid var(--ring);
+      outline-offset: 2px;
+      border-radius: 3px;
+    }
+    .pretui-item-desc[data-scopedcss-8d0ffb3c65-39abb89535] {
+      display: block;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      color: var(--muted-foreground);
+      font-size: 0.94em;
+    }
+    .pretui-item-content[data-scopedcss-8d0ffb3c65-39abb89535] {
+      min-width: 0;
+      margin-block-start: 2px;
+    }
+    .pretui-item-trail[data-scopedcss-8d0ffb3c65-39abb89535] {
+      flex: none;
+      display: flex;
+      align-items: center;
+      gap: var(--space-3, 8px);
+      color: var(--muted-foreground);
+      font-size: 0.94em;
+      font-variant-numeric: tabular-nums;
+    }
+    .pretui-item-actions[data-scopedcss-8d0ffb3c65-39abb89535] {
+      flex: none;
+      display: flex;
+      align-items: center;
+      gap: var(--space-2, 6px);
+    }
+    /* Unnamed container query on the nearest ancestor container (List's
+       row, or whatever the caller made a container). At this width the
+       trailing meta wraps under the body rather than crushing the title. */
+    @container (max-width: 22rem) {
+      .pretui-item[data-scopedcss-8d0ffb3c65-39abb89535] {
+        flex-wrap: wrap;
+      }
+      .pretui-item-trail[data-scopedcss-8d0ffb3c65-39abb89535] {
+        margin-inline-start: auto;
+      }
+    }
+  }
+
+  @layer PretComponent {
+    .pretui-broken[data-scopedcss-ff94cba008-71a083bb1d] {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 2px 8px;
+      border-radius: 6px;
+      background: var(--inset, var(--boxel-100));
+      color: var(--ink-3, var(--boxel-400));
+      font-size: var(--text-ui-sm, 11.5px);
+      font-family: var(--font-mono);
+      outline: 1px dashed var(--line-strong, var(--boxel-400));
+      outline-offset: -1px;
+      text-decoration: line-through;
+      text-decoration-color: color-mix(in oklch, var(--ink-3, var(--boxel-400)) 50%, transparent);
+    }
+    .pretui-broken svg[data-scopedcss-ff94cba008-71a083bb1d] {
+      flex: none;
+    }
+    .pretui-broken-id[data-scopedcss-ff94cba008-71a083bb1d] {
+      opacity: 0.7;
+    }
+  }
+
+  @layer PretComponent {
+    .pretui-empty[data-scopedcss-b2f493050b-b045568bce] {
+      display: grid;
+      place-items: center;
+      text-align: center;
+      gap: var(--boxel-sp-xs);
+      padding: var(--boxel-sp-3xl) var(--boxel-sp-lg);
+      position: relative;
+      overflow: hidden;
+      border-radius: var(--radius);
+      background-color: var(--canvas);
+      color: var(--foreground);
+    }
+    /* compact: the well an empty note sits in inside a card section */
+    .pretui-empty[data-size='s'][data-scopedcss-b2f493050b-b045568bce] {
+      padding: var(--boxel-sp);
+    }
+    .pretui-empty-texture[data-scopedcss-b2f493050b-b045568bce] {
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      background: radial-gradient(
+        ellipse 60% 45% at 50% 42%,
+        color-mix(in oklch, var(--primary) 8%, transparent),
+        transparent 70%
+      );
+    }
+    .pretui-empty-title[data-scopedcss-b2f493050b-b045568bce] {
+      position: relative;
+      font-family: var(--font-serif);
+      font-size: var(--boxel-heading-font-size);
+      font-weight: var(--boxel-heading-font-weight);
+    }
+    .pretui-empty[data-size='s'] .pretui-empty-title[data-scopedcss-b2f493050b-b045568bce] {
+      font-size: var(--boxel-font-size);
+    }
+    .pretui-empty-msg[data-scopedcss-b2f493050b-b045568bce] {
+      position: relative;
+      margin: 0;
+      font-size: var(--boxel-font-size-xs);
+      max-width: 34ch;
+    }
+    .pretui-empty-action[data-scopedcss-b2f493050b-b045568bce] {
+      position: relative;
+      margin-top: var(--boxel-sp-2xs);
+    }
+    /* Two equal paths with a rule between. The rule is drawn on the
+       separator itself so it stretches to whatever the row/column is —
+       no measurement, and it flips axis with the fold. */
+    /* flex-wrap rather than a container query: EmptyState is often an auto
+       -sized grid/flex item, and `container-type: inline-size` would apply
+       inline-size containment to it and collapse that case. Wrapping folds
+       the two paths into a stack at exactly the width where they stop
+       fitting, with no containment side effect. */
+    .pretui-empty-paths[data-scopedcss-b2f493050b-b045568bce] {
+      position: relative;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: center;
+      gap: var(--boxel-sp-sm);
+    }
+    .pretui-empty-sep[data-scopedcss-b2f493050b-b045568bce] {
+      display: flex;
+      align-items: center;
+      flex: 1 1 6rem;
+      gap: var(--boxel-sp-xs);
+      margin-top: var(--boxel-sp-2xs);
+      font-size: var(--boxel-font-size-2xs);
+      text-transform: lowercase;
+    }
+    .pretui-empty-sep[data-scopedcss-b2f493050b-b045568bce]::before,
+    .pretui-empty-sep[data-scopedcss-b2f493050b-b045568bce]::after {
+      content: '';
+      flex: 1;
+      min-inline-size: var(--boxel-sp-sm);
+      block-size: 1px;
+      background-color: var(--border);
+    }
+  }
+
+  @layer PretComponent {
+    @keyframes pretui-shimmer-data-scopedcss-537b3a02bc-0566fde4f2 {
+      from {
+        background-position: 200% 0;
+      }
+      to {
+        background-position: -200% 0;
+      }
+    }
+    .pretui-skeleton[data-scopedcss-537b3a02bc-0566fde4f2] {
+      display: block;
+      width: var(--_w, 100%);
+      height: var(--_h, 12px);
+      border-radius: 6px;
+      background: linear-gradient(90deg, var(--inset, var(--boxel-100)) 40%, var(--hover, var(--boxel-100)) 50%, var(--inset, var(--boxel-100)) 60%);
+      background-size: 200% 100%;
+      animation: pretui-shimmer-data-scopedcss-537b3a02bc-0566fde4f2 1.6s linear infinite;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .pretui-skeleton[data-scopedcss-537b3a02bc-0566fde4f2] {
+        animation: none;
+      }
+    }
+  }
+
+  .pretui-data[data-scopedcss-cf92ce48c1-f088545998] {
+    container-type: inline-size;
+    display: block;
+    min-width: 0;
+    color: var(--foreground);
+    font-size: var(--text-ui-md, 12.5px);
+    letter-spacing: var(--track-ui, 0.01em);
+  }
+  .pretui-sr[data-scopedcss-cf92ce48c1-f088545998] {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    white-space: nowrap;
+  }
+  .pretui-data-loading[data-scopedcss-cf92ce48c1-f088545998] {
+    display: grid;
+    gap: var(--pretui-data-gap, var(--space-3, 8px));
+  }
+  .pretui-data-loading-head[data-scopedcss-cf92ce48c1-f088545998] {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3, 8px);
+    color: var(--muted-foreground);
+    font-family: var(--font-mono);
+    font-size: var(--text-ui-sm, 11.5px);
+    letter-spacing: var(--track-eyebrow, 0.08em);
+    text-transform: uppercase;
+  }
+  .pretui-data-skeleton[data-scopedcss-cf92ce48c1-f088545998] {
+    display: grid;
+    gap: 7px;
+    padding: var(--space-4, 11px) var(--space-5, 14px);
+    border-radius: var(--radius-surface, 10px);
+    background: var(--card);
+    box-shadow: var(--pretui-shadow-hairline, 0 0 0 1px var(--border));
+  }
+  .pretui-data-errmsg[data-scopedcss-cf92ce48c1-f088545998] {
+    margin: 0 0 var(--space-2, 6px);
+    max-width: 60ch;
+  }
+  /* Unnamed container query only (a named one silently drops every
+     later rule in the transpiled stylesheet). It resolves against the
+     nearest ANCESTOR container — .pretui-data above — so it styles the
+     children, never the container element itself. */
+  @container (max-width: 24rem) {
+    .pretui-data-skeleton[data-scopedcss-cf92ce48c1-f088545998] {
+      padding: var(--space-3, 8px) var(--space-4, 11px);
+    }
+  }
+
+  @layer PretComponent {
+    .pretui-list[data-scopedcss-d9a8b45361-cd067b2df8] {
+      min-width: 0;
+      font-size: var(--text-ui-md, 12.5px);
+      letter-spacing: var(--track-ui, 0.01em);
+      color: var(--foreground);
+    }
+    .pretui-list[data-size='xs'][data-scopedcss-d9a8b45361-cd067b2df8] {
+      font-size: 10.5px;
+    }
+    .pretui-list[data-size='s'][data-scopedcss-d9a8b45361-cd067b2df8] {
+      font-size: var(--text-ui-sm, 11.5px);
+    }
+    .pretui-list[data-size='l'][data-scopedcss-d9a8b45361-cd067b2df8] {
+      font-size: 14px;
+    }
+    .pretui-list[data-size='xl'][data-scopedcss-d9a8b45361-cd067b2df8] {
+      font-size: 16px;
+    }
+    .pretui-list[data-bordered][data-scopedcss-d9a8b45361-cd067b2df8] {
+      border-radius: var(--radius-surface, 10px);
+      background: var(--card);
+      box-shadow: var(--pretui-shadow-hairline, 0 0 0 1px var(--border));
+      overflow: hidden;
+    }
+    .pretui-list[aria-busy='true'][data-scopedcss-d9a8b45361-cd067b2df8] {
+      opacity: 0.62;
+    }
+    .pretui-list-header[data-scopedcss-d9a8b45361-cd067b2df8],
+    .pretui-list-footer[data-scopedcss-d9a8b45361-cd067b2df8] {
+      display: flex;
+      align-items: center;
+      gap: var(--space-3, 8px);
+      padding: 0.62em var(--space-4, 11px);
+      color: var(--muted-foreground);
+    }
+    .pretui-list-header[data-scopedcss-d9a8b45361-cd067b2df8] {
+      box-shadow: inset 0 -1px 0 var(--border);
+    }
+    .pretui-list-footer[data-scopedcss-d9a8b45361-cd067b2df8] {
+      box-shadow: inset 0 1px 0 var(--border);
+    }
+    .pretui-list-rows[data-scopedcss-d9a8b45361-cd067b2df8] {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      min-width: 0;
+    }
+    .pretui-list-row[data-scopedcss-d9a8b45361-cd067b2df8] {
+      min-width: 0;
+      position: relative;
+    }
+    .pretui-list-line[data-scopedcss-d9a8b45361-cd067b2df8] {
+      container-type: inline-size;
+      display: flex;
+      align-items: center;
+      gap: var(--space-3, 8px);
+      min-width: 0;
+      padding: 0.62em var(--space-4, 11px);
+    }
+    /* The divider and the hover both sit on the summary line, so a hover
+       tint never paints over the hairline above it. */
+    .pretui-list[data-divided]
+      .pretui-list-row
+      + .pretui-list-row
+      > .pretui-list-line[data-scopedcss-d9a8b45361-cd067b2df8] {
+      box-shadow: inset 0 1px 0 var(--border);
+    }
+    /* A selected row keeps its tint under the pointer, summary and
+       detail alike. */
+    .pretui-list-row:not([data-selected='true']) > .pretui-list-line[data-scopedcss-d9a8b45361-cd067b2df8]:hover {
+      background: var(--hover, var(--boxel-100));
+    }
+    .pretui-list-row[data-scopedcss-d9a8b45361-cd067b2df8]:focus-visible {
+      outline: 2px solid var(--ring);
+      outline-offset: -2px;
+    }
+    /* Selection reads in a still frame and in greyscale (Law 8): a rule on
+       the inline start, not colour alone. */
+    .pretui-list-row[data-selected='true'][data-scopedcss-d9a8b45361-cd067b2df8] {
+      background: var(--pretui-selected, var(--boxel-100));
+    }
+    .pretui-list-row[data-selected='true'][data-scopedcss-d9a8b45361-cd067b2df8]::before {
+      content: '';
+      position: absolute;
+      inset-block: 0;
+      inset-inline-start: 0;
+      inline-size: 2px;
+      background: var(--primary);
+    }
+    .pretui-list-pick[data-scopedcss-d9a8b45361-cd067b2df8] {
+      flex: none;
+      display: flex;
+      align-items: center;
+    }
+    .pretui-list-body[data-scopedcss-d9a8b45361-cd067b2df8] {
+      flex: 1 1 auto;
+      min-width: 0;
+    }
+    .pretui-list-expbtn[data-scopedcss-d9a8b45361-cd067b2df8] {
+      flex: none;
+      display: inline-grid;
+      place-content: center;
+      inline-size: 1.7em;
+      block-size: 1.7em;
+      padding: 0;
+      border: 0;
+      border-radius: 6px;
+      background: none;
+      color: var(--muted-foreground);
+      cursor: pointer;
+    }
+    .pretui-list-expbtn[data-scopedcss-d9a8b45361-cd067b2df8]:hover {
+      background: var(--hover, var(--boxel-100));
+      color: var(--foreground);
+    }
+    .pretui-list-expbtn[data-scopedcss-d9a8b45361-cd067b2df8]:focus-visible {
+      outline: 2px solid var(--ring);
+      outline-offset: 1px;
+    }
+    .pretui-list-chev[data-scopedcss-d9a8b45361-cd067b2df8] {
+      display: block;
+      line-height: 1;
+      transition: transform var(--pretui-dur-snap, 180ms)
+        var(--pretui-ease-snap, cubic-bezier(0.2, 0.9, 0.25, 1.05));
+    }
+    .pretui-list-expbtn[aria-expanded='true'] .pretui-list-chev[data-scopedcss-d9a8b45361-cd067b2df8] {
+      transform: rotate(90deg);
+    }
+    /* tabindex=-1 so a click in the detail focuses the detail, not the
+       row, and the row's Enter/Space stay with the row. */
+    .pretui-list-detail[data-scopedcss-d9a8b45361-cd067b2df8]:focus {
+      outline: none;
+    }
+    .pretui-list-detail[data-scopedcss-d9a8b45361-cd067b2df8] {
+      min-width: 0;
+      padding: 0.62em var(--space-4, 11px) 0.85em;
+      box-shadow: inset 0 1px 0 var(--border);
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .pretui-list-chev[data-scopedcss-d9a8b45361-cd067b2df8] {
+        transition: none;
+      }
+    }
+    .pretui-list-box[data-scopedcss-d9a8b45361-cd067b2df8] {
+      appearance: none;
+      width: 15px;
+      height: 15px;
+      margin: 0;
+      border-radius: 5px;
+      background: var(
+        --pretui-control-rest,
+        var(--field, var(--boxel-light))
+      );
+      box-shadow: 0 0 0 1px var(--pretui-control-border, var(--input));
+      cursor: pointer;
+      display: inline-grid;
+      place-content: center;
+      flex: none;
+    }
+    .pretui-list-radio[data-scopedcss-d9a8b45361-cd067b2df8] {
+      border-radius: 50%;
+    }
+    .pretui-list-box[data-scopedcss-d9a8b45361-cd067b2df8]:checked {
+      background: var(--primary);
+      box-shadow:
+        0 0 0 1px color-mix(in oklch, var(--primary) 70%, var(--border)),
+        var(--pretui-edge-highlight, inset 0 1px 0 rgb(255 255 255 / 0.14));
+    }
+    .pretui-list-box[data-scopedcss-d9a8b45361-cd067b2df8]:checked::before {
+      content: '';
+      width: 9px;
+      height: 9px;
+      background: var(--primary-foreground);
+      clip-path: polygon(
+        14% 47%,
+        38% 70%,
+        86% 18%,
+        96% 30%,
+        39% 89%,
+        4% 58%
+      );
+    }
+    .pretui-list-radio[data-scopedcss-d9a8b45361-cd067b2df8]:checked::before {
+      clip-path: circle(50%);
+      width: 7px;
+      height: 7px;
+    }
+    .pretui-list-box[data-scopedcss-d9a8b45361-cd067b2df8]:focus-visible {
+      outline: 2px solid var(--ring);
+      outline-offset: 2px;
+    }
+    /* Coarse pointers get the 44px floor without changing the fine-pointer
+       rhythm. */
+    @media (pointer: coarse) {
+      .pretui-list-line[data-scopedcss-d9a8b45361-cd067b2df8] {
+        min-block-size: 44px;
+      }
+      .pretui-list-expbtn[data-scopedcss-d9a8b45361-cd067b2df8] {
+        inline-size: 2.4em;
+        block-size: 2.4em;
+      }
+      .pretui-list-box[data-scopedcss-d9a8b45361-cd067b2df8] {
+        width: 20px;
+        height: 20px;
+      }
+    }
+  }
+
+  @layer PretComponent {
+    @keyframes pretui-pixel-on-data-scopedcss-cae5827e83-74a3a9dccc {
+      0%,
+      100% {
+        opacity: 0.15;
+      }
+      50% {
+        opacity: 1;
+      }
+    }
+    @keyframes pretui-shimmer-text-data-scopedcss-cae5827e83-74a3a9dccc {
+      from {
+        background-position: 200% 0;
+      }
+      to {
+        background-position: -200% 0;
+      }
+    }
+    .pretui-loading[data-scopedcss-cae5827e83-74a3a9dccc] {
+      display: inline-flex;
+      align-items: center;
+      gap: 10px;
+    }
+    .pretui-pixelgrid[data-scopedcss-cae5827e83-74a3a9dccc] {
+      display: grid;
+      grid-template-columns: repeat(3, 4px);
+      gap: 1.5px;
+    }
+    .pretui-pixel[data-scopedcss-cae5827e83-74a3a9dccc] {
+      width: 4px;
+      height: 4px;
+      background: var(--foreground);
+      border-radius: 1px;
+      opacity: 0.15;
+    }
+    .pretui-pixel[data-round][data-scopedcss-cae5827e83-74a3a9dccc] {
+      border-radius: 50%;
+    }
+    .pretui-shimmer-label[data-scopedcss-cae5827e83-74a3a9dccc] {
+      font-size: var(--text-ui-md, 12.5px);
+      font-weight: 500;
+      background-image: linear-gradient(90deg, var(--ink-3, var(--boxel-400)) 35%, var(--foreground) 50%, var(--ink-3, var(--boxel-400)) 65%);
+      background-size: 200% 100%;
+      -webkit-background-clip: text;
+      background-clip: text;
+      color: transparent;
+      animation: pretui-shimmer-text-data-scopedcss-cae5827e83-74a3a9dccc 1.4s linear infinite;
+      white-space: nowrap;
+    }
+    .pretui-elapsed[data-scopedcss-cae5827e83-74a3a9dccc] {
+      font-family: var(--font-mono);
+      font-size: 12px;
+      color: var(--ink-3, var(--boxel-400));
+      font-variant-numeric: tabular-nums;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .pretui-pixel[data-scopedcss-cae5827e83-74a3a9dccc] {
+        animation: none !important;
+        opacity: 0.6;
+      }
+      .pretui-shimmer-label[data-scopedcss-cae5827e83-74a3a9dccc] {
+        animation: none;
+        color: var(--muted-foreground);
+        background: none;
+      }
+    }
+  }
+
+  @layer PretComponent {
+    .pretui-scroller[data-scopedcss-11ca330a13-f16dc4fa82] {
+      position: relative;
+      display: block;
+      min-width: 0;
+      container-type: inline-size;
+    }
+    .pretui-scroller-viewport[data-scopedcss-11ca330a13-f16dc4fa82] {
+      min-width: 0;
+      overscroll-behavior: contain;
+      scrollbar-width: thin;
+      scrollbar-gutter: stable;
+    }
+    .pretui-scroller-viewport[data-scopedcss-11ca330a13-f16dc4fa82]:focus-visible {
+      outline: 2px solid var(--ring);
+      outline-offset: 2px;
+      border-radius: var(--radius-surface, 10px);
+    }
+    .pretui-scroller-viewport[data-orientation='horizontal'][data-scopedcss-11ca330a13-f16dc4fa82] {
+      overflow-x: auto;
+      overflow-y: hidden;
+    }
+    .pretui-scroller-viewport[data-orientation='vertical'][data-scopedcss-11ca330a13-f16dc4fa82] {
+      overflow-x: hidden;
+      overflow-y: auto;
+    }
+    .pretui-scroller-viewport[data-orientation='both'][data-scopedcss-11ca330a13-f16dc4fa82] {
+      overflow: auto;
+    }
+    .pretui-scroller-viewport[data-hide-scrollbar='true'][data-scopedcss-11ca330a13-f16dc4fa82] {
+      scrollbar-width: none;
+    }
+    .pretui-scroller-edge[data-scopedcss-11ca330a13-f16dc4fa82] {
+      position: absolute;
+      opacity: 0;
+      pointer-events: none;
+      /* An opacity fade is not motion that encodes a state change so much
+         as a state change that would otherwise pop; it stays short and it
+         is cut entirely under reduced motion. */
+      transition: opacity 140ms linear;
+    }
+    .pretui-scroller-edge[data-side='start-x'][data-scopedcss-11ca330a13-f16dc4fa82],
+    .pretui-scroller-edge[data-side='end-x'][data-scopedcss-11ca330a13-f16dc4fa82] {
+      inset-block: 0;
+      inline-size: var(--pretui-scroller-fade, 28px);
+    }
+    .pretui-scroller-edge[data-side='start-x'][data-scopedcss-11ca330a13-f16dc4fa82] {
+      inset-inline-start: 0;
+    }
+    .pretui-scroller-edge[data-side='end-x'][data-scopedcss-11ca330a13-f16dc4fa82] {
+      inset-inline-end: 0;
+    }
+    .pretui-scroller-edge[data-side='start-y'][data-scopedcss-11ca330a13-f16dc4fa82],
+    .pretui-scroller-edge[data-side='end-y'][data-scopedcss-11ca330a13-f16dc4fa82] {
+      inset-inline: 0;
+      block-size: var(--pretui-scroller-fade, 28px);
+    }
+    .pretui-scroller-edge[data-side='start-y'][data-scopedcss-11ca330a13-f16dc4fa82] {
+      inset-block-start: 0;
+    }
+    .pretui-scroller-edge[data-side='end-y'][data-scopedcss-11ca330a13-f16dc4fa82] {
+      inset-block-end: 0;
+    }
+    /* Sibling combinators off the viewport's own attributes: the state
+       never round-trips through Glimmer, so a flick costs no renders. */
+    .pretui-scroller-viewport[data-start-x='clipped'] ~ .pretui-scroller-edge[data-side='start-x'][data-scopedcss-11ca330a13-f16dc4fa82],
+    .pretui-scroller-viewport[data-end-x='clipped'] ~ .pretui-scroller-edge[data-side='end-x'][data-scopedcss-11ca330a13-f16dc4fa82],
+    .pretui-scroller-viewport[data-start-y='clipped'] ~ .pretui-scroller-edge[data-side='start-y'][data-scopedcss-11ca330a13-f16dc4fa82],
+    .pretui-scroller-viewport[data-end-y='clipped'] ~ .pretui-scroller-edge[data-side='end-y'][data-scopedcss-11ca330a13-f16dc4fa82] {
+      opacity: 1;
+    }
+    .pretui-scroller[data-edge='none'] .pretui-scroller-edge[data-scopedcss-11ca330a13-f16dc4fa82] {
+      display: none;
+    }
+    .pretui-scroller[data-edge='fade'] .pretui-scroller-edge[data-side='start-x'][data-scopedcss-11ca330a13-f16dc4fa82] {
+      background: linear-gradient(
+        to right,
+        var(--pretui-scroller-ground, var(--card)),
+        transparent
+      );
+    }
+    .pretui-scroller[data-edge='fade'] .pretui-scroller-edge[data-side='end-x'][data-scopedcss-11ca330a13-f16dc4fa82] {
+      background: linear-gradient(
+        to left,
+        var(--pretui-scroller-ground, var(--card)),
+        transparent
+      );
+    }
+    .pretui-scroller[data-edge='fade'] .pretui-scroller-edge[data-side='start-y'][data-scopedcss-11ca330a13-f16dc4fa82] {
+      background: linear-gradient(
+        to bottom,
+        var(--pretui-scroller-ground, var(--card)),
+        transparent
+      );
+    }
+    .pretui-scroller[data-edge='fade'] .pretui-scroller-edge[data-side='end-y'][data-scopedcss-11ca330a13-f16dc4fa82] {
+      background: linear-gradient(
+        to top,
+        var(--pretui-scroller-ground, var(--card)),
+        transparent
+      );
+    }
+    .pretui-scroller[data-edge='shadow'] .pretui-scroller-edge[data-side='start-x'][data-scopedcss-11ca330a13-f16dc4fa82] {
+      background: linear-gradient(
+        to right,
+        color-mix(in oklch, var(--foreground) 14%, transparent),
+        transparent
+      );
+    }
+    .pretui-scroller[data-edge='shadow'] .pretui-scroller-edge[data-side='end-x'][data-scopedcss-11ca330a13-f16dc4fa82] {
+      background: linear-gradient(
+        to left,
+        color-mix(in oklch, var(--foreground) 14%, transparent),
+        transparent
+      );
+    }
+    .pretui-scroller[data-edge='shadow'] .pretui-scroller-edge[data-side='start-y'][data-scopedcss-11ca330a13-f16dc4fa82] {
+      background: linear-gradient(
+        to bottom,
+        color-mix(in oklch, var(--foreground) 14%, transparent),
+        transparent
+      );
+    }
+    .pretui-scroller[data-edge='shadow'] .pretui-scroller-edge[data-side='end-y'][data-scopedcss-11ca330a13-f16dc4fa82] {
+      background: linear-gradient(
+        to top,
+        color-mix(in oklch, var(--foreground) 14%, transparent),
+        transparent
+      );
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .pretui-scroller-edge[data-scopedcss-11ca330a13-f16dc4fa82] {
+        transition: none;
+      }
+    }
+  }
+
+  .intro[data-scopedcss-9c42952c7e-0aadf83a58] {
+    margin: 0;
+  }
+  /* The dialog renders inside the chooser, whose light-on-dark scrollbar
+     color is inherited; restate it for the dialog's light surface. */
+  .realm-list-frame[data-scopedcss-9c42952c7e-0aadf83a58] {
+    scrollbar-color: color-mix(
+        in oklch,
+        var(--muted-foreground) 50%,
+        transparent
+      )
+      transparent;
+  }
+  .realm-list-frame[data-scopedcss-9c42952c7e-0aadf83a58] .pretui-scroller-viewport {
+    max-height: min(50dvh, 26rem);
+  }
+  /* Realm icons are rounded squares on the workspace tiles; match them. */
+  .realm-icon[data-scopedcss-9c42952c7e-0aadf83a58] .pretui-avatar {
+    border-radius: var(--boxel-border-radius-xs);
+  }
+  .loading[data-scopedcss-9c42952c7e-0aadf83a58] {
+    display: flex;
+    justify-content: center;
+    padding: var(--boxel-sp-lg) 0;
+  }
+
+  .manage-catalogs[data-scopedcss-9c42952c7e-bfb1490ce6] {
+    display: inline-flex;
+  }
+  .manage-catalogs[data-scopedcss-9c42952c7e-bfb1490ce6] .pretui-iconbtn {
+    color: var(--boxel-light);
+    background: transparent;
+  }
+  .manage-catalogs[data-scopedcss-9c42952c7e-bfb1490ce6] .pretui-iconbtn:hover,
+  .manage-catalogs[data-scopedcss-9c42952c7e-bfb1490ce6] .pretui-iconbtn:focus-visible {
+    color: var(--boxel-highlight);
+  }
+
+  @keyframes fadeIn-data-scopedcss-d65ff592b2-89330100a6 {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+  .workspace-chooser[data-scopedcss-d65ff592b2-89330100a6] {
+    --workspace-chooser-gutter: 5rem;
+    --workspace-chooser-card-width: fit-content;
+    --workspace-chooser-tile-width: var(--boxel-xxs-container);
+    /* Favorites until the grid is measured; capped so the tile never
+       outgrows a content area narrower than 1.5 tiles. */
+    --workspace-chooser-enlarged-tile-width: min(
+      var(--boxel-xxs-container) * 1.5,
+      100vw - 2 * var(--workspace-chooser-gutter)
+    );
+  }
+  .sort-controls[data-scopedcss-d65ff592b2-89330100a6] {
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+  }
+  .sort-select[data-scopedcss-d65ff592b2-89330100a6] {
+    flex-shrink: 0;
+    /* Keep the icon and label on one line at narrow top-bar widths. */
+    --boxel-select-trigger-content-wrap: nowrap;
+    --boxel-select-background-color: var(--boxel-800);
+    --boxel-select-text-color: var(--boxel-light);
+    --boxel-select-border-color: var(--boxel-light-25);
+    --boxel-select-focus-border-color: var(--boxel-light-50);
+    --icon-color: var(--boxel-light);
+  }
+  /* Below this top-bar width the label would push the trigger over the
+     profile button, so show the icon only and keep the label for screen
+     readers. */
+  @container (width <= 20rem) {
+    .sort-select[data-scopedcss-d65ff592b2-89330100a6] {
+      --boxel-select-trigger-gap: var(--boxel-sp-2xs);
+    }
+    .sort-select .sort-label[data-scopedcss-d65ff592b2-89330100a6] {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      margin: -1px;
+      overflow: hidden;
+      clip-path: inset(50%);
+    }
+  }
+  .boxel-select__dropdown.workspace-chooser-sort-dropdown {
+    --boxel-dropdown-background-color: var(--boxel-650);
+    --boxel-dropdown-border-color: var(--boxel-light-25);
+    --boxel-dropdown-text-color: var(--boxel-light);
+    --boxel-dropdown-selected-text-color: var(--boxel-light);
+    --boxel-dropdown-hover-color: var(--boxel-700);
+    --boxel-dropdown-highlight-color: var(--boxel-650);
+    --boxel-dropdown-highlight-hover-color: var(--boxel-700);
+    --boxel-dropdown-selected-highlighted-color: var(--boxel-700);
+    --boxel-dropdown-selected-hover-color: var(--boxel-700);
+  }
+  .workspace-chooser-sort-dropdown .boxel-select-option-checkmark {
+    --icon-color: var(--boxel-highlight);
+    color: var(--boxel-highlight);
+  }
+  .workspace-chooser__content[data-scopedcss-d65ff592b2-89330100a6] {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--boxel-sp-lg);
+    height: 100%;
+    /* The bottom always clears the floating AI assistant button, which
+       sits over the chooser's bottom-right corner. */
+    padding: calc(var(--workspace-chooser-gutter) + 3.75rem)
+      var(--workspace-chooser-gutter)
+      max(
+        var(--workspace-chooser-gutter),
+        calc(
+          var(--container-button-size) + var(--operator-mode-spacing) +
+            var(--boxel-sp)
+        )
+      );
+    overflow: auto;
+    /* Fade in only the contents; the dark chooser background above
+       paints immediately so the grey operator-mode canvas never flashes
+       between the (dark) sign-in screen and the (dark) chooser. */
+    opacity: 0;
+    animation: fadeIn-data-scopedcss-d65ff592b2-89330100a6 0.5s ease-in forwards;
+  }
+  .sections-wrapper[data-scopedcss-d65ff592b2-89330100a6] {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--boxel-sp-lg) * 2);
+  }
+  .workspace-section[data-scopedcss-d65ff592b2-89330100a6] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--boxel-sp-lg);
+  }
+  .section-header[data-scopedcss-d65ff592b2-89330100a6] {
+    display: flex;
+    align-items: center;
+    gap: var(--boxel-sp-xs);
+  }
+  .section-header-icon[data-scopedcss-d65ff592b2-89330100a6] {
+    --icon-color: var(--boxel-teal);
+    color: var(--boxel-teal);
+    flex-shrink: 0;
+  }
+  .section-header--toggle[data-scopedcss-d65ff592b2-89330100a6] {
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    width: fit-content;
+    text-align: left;
+  }
+  .section-disclosure-icon[data-scopedcss-d65ff592b2-89330100a6] {
+    --icon-color: var(--boxel-light);
+    --icon-fill: var(--boxel-light);
+    color: var(--boxel-light);
+    flex-shrink: 0;
+    transition: transform 0.15s ease;
+  }
+  .section-header--toggle.is-expanded .section-disclosure-icon[data-scopedcss-d65ff592b2-89330100a6] {
+    transform: rotate(90deg);
+  }
+  .section-count[data-scopedcss-d65ff592b2-89330100a6] {
+    color: var(--boxel-400);
+    font: 600 var(--boxel-font-sm);
+    letter-spacing: var(--boxel-lsp);
+  }
+  .workspace-chooser__title[data-scopedcss-d65ff592b2-89330100a6] {
+    color: var(--boxel-light);
+    font: 400 var(--boxel-font-lg);
+    letter-spacing: var(--boxel-lsp);
+  }
+  .workspace-list[data-scopedcss-d65ff592b2-89330100a6] {
+    display: flex;
+    flex-wrap: wrap;
+    gap: calc(var(--boxel-sp-lg) + var(--boxel-sp-lg));
+    padding: var(--boxel-sp-xs) 0;
+  }
+  .section-empty[data-scopedcss-d65ff592b2-89330100a6] {
+    color: var(--boxel-400);
+    font: 400 var(--boxel-font-sm);
+  }
+  .unreachable-notice[data-scopedcss-d65ff592b2-89330100a6] {
+    display: flex;
+    align-items: center;
+    gap: var(--boxel-sp-2xs);
+    max-width: 40rem;
+    padding: var(--boxel-sp-xs) var(--boxel-sp-sm);
+    border-radius: var(--boxel-border-radius);
+    background-color: var(--boxel-light-10);
+    color: var(--boxel-light);
+    font: 400 var(--boxel-font-sm);
+    letter-spacing: var(--boxel-lsp-xs);
+  }
+  .unreachable-notice-icon[data-scopedcss-d65ff592b2-89330100a6] {
+    flex-shrink: 0;
+  }
+  .unreachable-notice-spinner[data-scopedcss-d65ff592b2-89330100a6] {
+    flex-shrink: 0;
+  }
+  /* One tile per row, filling the chooser's own width, which is less
+     than the viewport's when the AI assistant panel is open. */
+  @media (max-width: 30rem) {
+    .workspace-chooser[data-scopedcss-d65ff592b2-89330100a6] {
+      --workspace-chooser-gutter: var(--boxel-sp);
+      --workspace-chooser-card-width: 100%;
+      --workspace-chooser-tile-width: 100%;
+      --workspace-chooser-enlarged-tile-width: 100%;
+    }
+    .sections-wrapper[data-scopedcss-d65ff592b2-89330100a6] {
+      width: 100%;
+    }
+  }