/* Cedilla Studio — app switcher, on all four web apps since 2026-11-10.
   A pill beside the Cedilla key top-left names the app you're in
   ("Palettes ▾"); clicking it opens a plain menu of the four web apps.
   Built by assets/js/app-switcher.js, which places the pill beside the key.
   (Replaced a hover "bubbles" version the same day; Ash wasn't a fan.) */

.asw {
  position: fixed; z-index: 999; left: 62px; top: 17px;
  font-family: 'Open Sans', sans-serif; color: #fff;
}

.asw-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 14px 0 16px; border-radius: 999px;
  font: inherit; font-size: 14px; font-weight: 600; letter-spacing: -.01em; color: inherit; cursor: pointer;
  background: rgba(7, 7, 11, .82); border: 1px solid rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: border-color .2s, background .2s;
}
.asw-btn:hover, .asw-btn[aria-expanded="true"] { border-color: rgba(255, 255, 255, .4); background: rgba(20, 20, 28, .92); }
.asw-btn:focus-visible { outline: 2px solid #5164f6; outline-offset: 2px; }
.asw-btn svg { width: 12px; height: 12px; flex: none; opacity: .7; transition: transform .25s; }
.asw-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

.asw-menu {
  position: absolute; left: 0; top: calc(100% + 8px); width: 316px; padding: 6px;
  border-radius: 18px; border: 1px solid transparent;
  background:
    linear-gradient(rgba(10, 10, 15, .96), rgba(10, 10, 15, .96)) padding-box,
    linear-gradient(140deg, rgba(252, 95, 173, .45), rgba(81, 100, 246, .45) 50%, rgba(33, 212, 253, .35)) border-box;
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .95);
  opacity: 0; transform: translateY(-6px); visibility: hidden;
  transition: opacity .16s, transform .2s, visibility 0s .2s;
}
.asw.is-open .asw-menu { opacity: 1; transform: none; visibility: visible; transition: opacity .16s, transform .2s, visibility 0s; }

.asw-eyebrow {
  margin: 8px 10px 6px; font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .5);
}

.asw-item {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) 16px; align-items: center; gap: 12px;
  padding: 8px 10px; border-radius: 12px; color: inherit; text-decoration: none;
}
a.asw-item:hover, a.asw-item:focus-visible { background: rgba(255, 255, 255, .07); outline: none; }
/* Thumbnails as in the main menu (.dd-row img, .dkm-sw): 4:3, rounded */
.asw-thumb { width: 56px; height: 42px; border-radius: 10px; overflow: hidden; background: #15151c; }
.asw-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.asw-sw { display: flex; width: 100%; height: 100%; }
.asw-sw span { flex: 1; }
.asw-sw span:nth-child(1) { background: #fc5fad; }
.asw-sw span:nth-child(2) { background: #f8bdc9; }
.asw-sw span:nth-child(3) { background: #b1adf2; }
.asw-sw span:nth-child(4) { background: #99bafd; }
.asw-sw span:nth-child(5) { background: #5164f6; }
.asw-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.asw-name { font-size: 14px; font-weight: 600; line-height: 1.25; }
.asw-sub { font-size: 12px; color: rgba(255, 255, 255, .58); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asw-tick { width: 16px; height: 16px; fill: none; stroke: #8b98ff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.asw-item[aria-current="page"] .asw-name::after { content: ' · here'; font-weight: 400; color: rgba(255, 255, 255, .45); }

.asw-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin: 4px 0 0; padding: 10px 10px 6px; border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: 12px; color: rgba(255, 255, 255, .6); text-decoration: none;
}
.asw-foot:hover, .asw-foot:focus-visible { color: #fff; outline: none; }

/* Narrow desktops where the centred capsule would touch the name: arrow only */
.asw.is-compact .asw-btn { width: 42px; padding: 0; justify-content: center; }
.asw.is-compact .asw-current { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Even narrower: no pill, the Cedilla key opens the menu (under the key) and
   the menu gets a Home row, since the key no longer goes home */
.asw.is-keymode .asw-btn { visibility: hidden; }
.asw.is-keymode .asw-menu { left: -50px; }
.asw-homerow { display: none; }
.asw.is-keymode .asw-homerow {
  display: flex; justify-content: space-between; align-items: center;
  margin: 0 0 4px; padding: 10px 10px 12px; border-bottom: 1px solid rgba(255, 255, 255, .08);
  font-size: 13px; font-weight: 600; color: #fff; text-decoration: none; border-radius: 12px 12px 0 0;
}
.asw.is-keymode .asw-homerow:hover, .asw.is-keymode .asw-homerow:focus-visible { background: rgba(255, 255, 255, .07); outline: none; }

/* Phones: the same pill, a little smaller, and the menu as wide as it can be */
@media (max-width: 860px) {
  .asw-btn { height: 40px; padding: 0 12px 0 14px; font-size: 13.5px; }
  .asw-menu { width: min(316px, calc(100vw - 88px)); } /* 12px clear of the right edge */
}

@media (prefers-reduced-motion: reduce) {
  .asw-menu, .asw.is-open .asw-menu, .asw-btn svg { transition: none; }
}

/* The apps' full-screen mode (F) hides the site chrome, the switcher with it */
body.lab-full .asw { display: none; }