/* ALYSSIUN OS color-icon contract.
 * App identity belongs to the OS so the same glyph and color travel across
 * the launcher, desktop, window chrome, and first-party app surfaces. */
:root {
  --alyssiun-icon-ink: #fff;
  --alyssiun-icon-border: rgba(255, 255, 255, .22);
  --alyssiun-icon-shadow: 0 9px 22px rgba(11, 16, 28, .22), inset 0 1px 0 rgba(255, 255, 255, .32);

  --alyssiun-app-drive-icon-start: #1f9bff;
  --alyssiun-app-drive-icon-end: #3155d9;
  --alyssiun-app-crm-icon-start: #31d6b0;
  --alyssiun-app-crm-icon-end: #087f8c;
  --alyssiun-app-blog-icon-start: #ffbd38;
  --alyssiun-app-blog-icon-end: #ee6b2f;
  --alyssiun-app-one-icon-start: #a96dff;
  --alyssiun-app-one-icon-end: #6650e8;
  --alyssiun-app-viewer-icon-start: #627cff;
  --alyssiun-app-viewer-icon-end: #25b8d8;
  --alyssiun-app-here-icon-start: #42d887;
  --alyssiun-app-here-icon-end: #138f68;
  --alyssiun-app-id-icon-start: #ff6c91;
  --alyssiun-app-id-icon-end: #9b4de1;
  --alyssiun-app-foundation-icon-start: #ff668f;
  --alyssiun-app-foundation-icon-end: #e23d57;
  --alyssiun-app-account-icon-start: #7586a6;
  --alyssiun-app-account-icon-end: #3e4e70;
  --alyssiun-app-aly-icon-start: #34c896;
  --alyssiun-app-aly-icon-end: #1b2a26;
  --alyssiun-app-store-icon-start: #ffa63d;
  --alyssiun-app-store-icon-end: #e0483f;

  --alyssiun-system-folder-icon-start: #53b7ff;
  --alyssiun-system-folder-icon-end: #2d6bd7;
  --alyssiun-system-file-icon-start: #8f9db4;
  --alyssiun-system-file-icon-end: #52637e;
  --alyssiun-system-image-icon-start: #ff7ba6;
  --alyssiun-system-image-icon-end: #9e55db;
  --alyssiun-system-audio-icon-start: #fc6bb2;
  --alyssiun-system-audio-icon-end: #a146c7;
  --alyssiun-system-video-icon-start: #ff795d;
  --alyssiun-system-video-icon-end: #d43e72;
  --alyssiun-system-model-icon-start: #5fd0c5;
  --alyssiun-system-model-icon-end: #317ca6;
  --alyssiun-system-space-icon-start: #52c6df;
  --alyssiun-system-space-icon-end: #3e63d4;
  --alyssiun-system-desktop-icon-start: #5da8ff;
  --alyssiun-system-desktop-icon-end: #5368df;
  --alyssiun-system-download-icon-start: #42c98f;
  --alyssiun-system-download-icon-end: #248071;
  --alyssiun-system-apps-icon-start: #9b79ff;
  --alyssiun-system-apps-icon-end: #5d57d7;
  --alyssiun-system-shared-icon-start: #4bc1e8;
  --alyssiun-system-shared-icon-end: #3776d2;
  --alyssiun-system-trash-icon-start: #8993a4;
  --alyssiun-system-trash-icon-end: #4c5668;
}

.alyssiun-color-icon {
  --alyssiun-icon-start: var(--alyssiun-system-file-icon-start);
  --alyssiun-icon-end: var(--alyssiun-system-file-icon-end);
  box-sizing: border-box;
  overflow: hidden;
  border-color: var(--alyssiun-icon-border) !important;
  background: linear-gradient(145deg, var(--alyssiun-icon-start), var(--alyssiun-icon-end)) !important;
  box-shadow: var(--alyssiun-icon-shadow) !important;
  color: var(--alyssiun-icon-ink) !important;
}

.alyssiun-color-icon svg { color: inherit !important; }

.alyssiun-color-icon[data-app-icon="drive"] { --alyssiun-icon-start: var(--alyssiun-app-drive-icon-start); --alyssiun-icon-end: var(--alyssiun-app-drive-icon-end); }
.alyssiun-color-icon[data-app-icon="crm"] { --alyssiun-icon-start: var(--alyssiun-app-crm-icon-start); --alyssiun-icon-end: var(--alyssiun-app-crm-icon-end); }
.alyssiun-color-icon[data-app-icon="blog"] { --alyssiun-icon-start: var(--alyssiun-app-blog-icon-start); --alyssiun-icon-end: var(--alyssiun-app-blog-icon-end); }
.alyssiun-color-icon[data-app-icon="one"] { --alyssiun-icon-start: var(--alyssiun-app-one-icon-start); --alyssiun-icon-end: var(--alyssiun-app-one-icon-end); }
.alyssiun-color-icon[data-app-icon="viewer"] { --alyssiun-icon-start: var(--alyssiun-app-viewer-icon-start); --alyssiun-icon-end: var(--alyssiun-app-viewer-icon-end); }
.alyssiun-color-icon[data-app-icon="here"] { --alyssiun-icon-start: var(--alyssiun-app-here-icon-start); --alyssiun-icon-end: var(--alyssiun-app-here-icon-end); }
.alyssiun-color-icon[data-app-icon="id"] { --alyssiun-icon-start: var(--alyssiun-app-id-icon-start); --alyssiun-icon-end: var(--alyssiun-app-id-icon-end); }
.alyssiun-color-icon[data-app-icon="foundation"] { --alyssiun-icon-start: var(--alyssiun-app-foundation-icon-start); --alyssiun-icon-end: var(--alyssiun-app-foundation-icon-end); }
.alyssiun-color-icon[data-app-icon="account"] { --alyssiun-icon-start: var(--alyssiun-app-account-icon-start); --alyssiun-icon-end: var(--alyssiun-app-account-icon-end); }
.alyssiun-color-icon[data-app-icon="aly"] { --alyssiun-icon-start: var(--alyssiun-app-aly-icon-start); --alyssiun-icon-end: var(--alyssiun-app-aly-icon-end); }
.alyssiun-color-icon[data-app-icon="store"] { --alyssiun-icon-start: var(--alyssiun-app-store-icon-start); --alyssiun-icon-end: var(--alyssiun-app-store-icon-end); }

.alyssiun-color-icon[data-system-icon="folder"] { --alyssiun-icon-start: var(--alyssiun-system-folder-icon-start); --alyssiun-icon-end: var(--alyssiun-system-folder-icon-end); }
.alyssiun-color-icon[data-system-icon="files"] { --alyssiun-icon-start: var(--alyssiun-system-file-icon-start); --alyssiun-icon-end: var(--alyssiun-system-file-icon-end); }
.alyssiun-color-icon[data-system-icon="image"] { --alyssiun-icon-start: var(--alyssiun-system-image-icon-start); --alyssiun-icon-end: var(--alyssiun-system-image-icon-end); }
.alyssiun-color-icon[data-system-icon="audio"] { --alyssiun-icon-start: var(--alyssiun-system-audio-icon-start); --alyssiun-icon-end: var(--alyssiun-system-audio-icon-end); }
.alyssiun-color-icon[data-system-icon="video"] { --alyssiun-icon-start: var(--alyssiun-system-video-icon-start); --alyssiun-icon-end: var(--alyssiun-system-video-icon-end); }
.alyssiun-color-icon[data-system-icon="model"] { --alyssiun-icon-start: var(--alyssiun-system-model-icon-start); --alyssiun-icon-end: var(--alyssiun-system-model-icon-end); }
.alyssiun-color-icon[data-system-icon="spaces"] { --alyssiun-icon-start: var(--alyssiun-system-space-icon-start); --alyssiun-icon-end: var(--alyssiun-system-space-icon-end); }
.alyssiun-color-icon[data-system-icon="desktop"] { --alyssiun-icon-start: var(--alyssiun-system-desktop-icon-start); --alyssiun-icon-end: var(--alyssiun-system-desktop-icon-end); }
.alyssiun-color-icon[data-system-icon="downloads"] { --alyssiun-icon-start: var(--alyssiun-system-download-icon-start); --alyssiun-icon-end: var(--alyssiun-system-download-icon-end); }
.alyssiun-color-icon[data-system-icon="apps"] { --alyssiun-icon-start: var(--alyssiun-system-apps-icon-start); --alyssiun-icon-end: var(--alyssiun-system-apps-icon-end); }
.alyssiun-color-icon[data-system-icon="shared"] { --alyssiun-icon-start: var(--alyssiun-system-shared-icon-start); --alyssiun-icon-end: var(--alyssiun-system-shared-icon-end); }
/* Settings is an OS app (OS_APPS) with no colour of its own: the system "desktop" pair. */
.alyssiun-color-icon[data-app-icon="support"] { --alyssiun-icon-start: var(--alyssiun-system-desktop-icon-start); --alyssiun-icon-end: var(--alyssiun-system-desktop-icon-end); }
.alyssiun-color-icon[data-app-icon="report"] { --alyssiun-icon-start: var(--alyssiun-system-desktop-icon-start); --alyssiun-icon-end: var(--alyssiun-system-desktop-icon-end); }
.alyssiun-color-icon[data-app-icon="settings"] { --alyssiun-icon-start: var(--alyssiun-system-desktop-icon-start); --alyssiun-icon-end: var(--alyssiun-system-desktop-icon-end); }
.alyssiun-color-icon[data-system-icon="trash"] { --alyssiun-icon-start: var(--alyssiun-system-trash-icon-start); --alyssiun-icon-end: var(--alyssiun-system-trash-icon-end); }

/* App artwork (Batch Q): every ALYSSIUN app icon is its own picture, already cut to the one shared
 * squircle (public/os/icons/squircle.svg). The picture replaces the colored tile and its line glyph. */
.alyssiun-color-icon[data-app-icon="drive"] { --alyssiun-icon-art: image-set(url("/os/icons/apps/drive/icon-128.webp") 1x, url("/os/icons/apps/drive/icon-256.webp") 2x); }
.alyssiun-color-icon[data-app-icon="aly"] { --alyssiun-icon-art: image-set(url("/os/icons/apps/aly/icon-128.webp") 1x, url("/os/icons/apps/aly/icon-256.webp") 2x); }
.alyssiun-color-icon[data-app-icon="id"] { --alyssiun-icon-art: image-set(url("/os/icons/apps/id/icon-128.webp") 1x, url("/os/icons/apps/id/icon-256.webp") 2x); }
.alyssiun-color-icon[data-app-icon="store"] { --alyssiun-icon-art: image-set(url("/os/icons/apps/store/icon-128.webp") 1x, url("/os/icons/apps/store/icon-256.webp") 2x); }
.alyssiun-color-icon[data-app-icon="here"] { --alyssiun-icon-art: image-set(url("/os/icons/apps/here/icon-128.webp") 1x, url("/os/icons/apps/here/icon-256.webp") 2x); }
.alyssiun-color-icon[data-app-icon="crm"] { --alyssiun-icon-art: image-set(url("/os/icons/apps/crm/icon-128.webp") 1x, url("/os/icons/apps/crm/icon-256.webp") 2x); }
.alyssiun-color-icon[data-app-icon="one"] { --alyssiun-icon-art: image-set(url("/os/icons/apps/one/icon-128.webp") 1x, url("/os/icons/apps/one/icon-256.webp") 2x); }
.alyssiun-color-icon[data-app-icon="account"] { --alyssiun-icon-art: image-set(url("/os/icons/apps/account/icon-128.webp") 1x, url("/os/icons/apps/account/icon-256.webp") 2x); }
.alyssiun-color-icon[data-app-icon="blog"] { --alyssiun-icon-art: image-set(url("/os/icons/apps/blog/icon-128.webp") 1x, url("/os/icons/apps/blog/icon-256.webp") 2x); }
.alyssiun-color-icon[data-app-icon="viewer"] { --alyssiun-icon-art: image-set(url("/os/icons/apps/viewer/icon-128.webp") 1x, url("/os/icons/apps/viewer/icon-256.webp") 2x); }
.alyssiun-color-icon[data-app-icon="foundation"] { --alyssiun-icon-art: image-set(url("/os/icons/apps/foundation/icon-128.webp") 1x, url("/os/icons/apps/foundation/icon-256.webp") 2x); }
.alyssiun-color-icon[data-app-icon="settings"] { --alyssiun-icon-art: image-set(url("/os/icons/apps/settings/icon-128.webp") 1x, url("/os/icons/apps/settings/icon-256.webp") 2x); }
.alyssiun-color-icon[data-app-icon="trash"] { --alyssiun-icon-art: image-set(url("/os/icons/apps/trash/icon-128.webp") 1x, url("/os/icons/apps/trash/icon-256.webp") 2x); }
.alyssiun-color-icon[data-app-icon="support"] { --alyssiun-icon-art: image-set(url("/os/icons/apps/support/icon-128.webp") 1x, url("/os/icons/apps/support/icon-256.webp") 2x); }
.alyssiun-color-icon[data-app-icon="report"] { --alyssiun-icon-art: image-set(url("/os/icons/apps/report/icon-128.webp") 1x, url("/os/icons/apps/report/icon-256.webp") 2x); }
.alyssiun-color-icon[data-app-icon="drive"],
.alyssiun-color-icon[data-app-icon="aly"],
.alyssiun-color-icon[data-app-icon="id"],
.alyssiun-color-icon[data-app-icon="store"],
.alyssiun-color-icon[data-app-icon="here"],
.alyssiun-color-icon[data-app-icon="crm"],
.alyssiun-color-icon[data-app-icon="one"],
.alyssiun-color-icon[data-app-icon="account"],
.alyssiun-color-icon[data-app-icon="blog"],
.alyssiun-color-icon[data-app-icon="viewer"],
.alyssiun-color-icon[data-app-icon="foundation"],
.alyssiun-color-icon[data-app-icon="settings"],
.alyssiun-color-icon[data-app-icon="trash"],
.alyssiun-color-icon[data-app-icon="support"],
.alyssiun-color-icon[data-app-icon="report"] {
  border-color: transparent !important;
  /* The shadow is a box shadow on a 22% corner, the rounded box that just wraps the squircle (the picture
     is never cut by it). A drop-shadow filter here left an unpainted block in the top-left corner of the
     phone home in Safari (Batch R, R1). */
  border-radius: 22% !important;
  background: var(--alyssiun-icon-art) center / 100% 100% no-repeat !important;
  box-shadow: 0 4px 9px rgba(11, 16, 28, .2) !important;
}
.alyssiun-color-icon[data-app-icon="drive"] > svg,
.alyssiun-color-icon[data-app-icon="aly"] > svg,
.alyssiun-color-icon[data-app-icon="id"] > svg,
.alyssiun-color-icon[data-app-icon="store"] > svg,
.alyssiun-color-icon[data-app-icon="here"] > svg,
.alyssiun-color-icon[data-app-icon="crm"] > svg,
.alyssiun-color-icon[data-app-icon="one"] > svg,
.alyssiun-color-icon[data-app-icon="account"] > svg,
.alyssiun-color-icon[data-app-icon="blog"] > svg,
.alyssiun-color-icon[data-app-icon="viewer"] > svg,
.alyssiun-color-icon[data-app-icon="foundation"] > svg,
.alyssiun-color-icon[data-app-icon="settings"] > svg,
.alyssiun-color-icon[data-app-icon="trash"] > svg,
.alyssiun-color-icon[data-app-icon="support"] > svg,
.alyssiun-color-icon[data-app-icon="report"] > svg { visibility: hidden !important; }
/* A published app's own icon (kept by the Store): a picture cut to the same shape in the browser. */
.alyssiun-own-icon { border: 0 !important; border-radius: 22% !important; background: none !important; box-shadow: 0 4px 9px rgba(11, 16, 28, .2) !important; overflow: visible; }
.alyssiun-own-icon > img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Pictures that are not ours (published apps) get the same shape from the same file. */
.alyssiun-squircle {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22%3E%3Cpath d=%22M100.0 50.0L100.0 65.4L99.9 70.3L99.8 73.8L99.6 76.7L99.3 79.1L99.0 81.3L98.6 83.2L98.2 84.9L97.7 86.5L97.2 87.9L96.6 89.2L95.9 90.4L95.2 91.5L94.4 92.6L93.5 93.5L92.6 94.4L91.5 95.2L90.4 95.9L89.2 96.6L87.9 97.2L86.5 97.7L84.9 98.2L83.2 98.6L81.3 99.0L79.1 99.3L76.7 99.6L73.8 99.8L70.3 99.9L65.4 100.0L50.0 100.0L34.6 100.0L29.7 99.9L26.2 99.8L23.3 99.6L20.9 99.3L18.7 99.0L16.8 98.6L15.1 98.2L13.5 97.7L12.1 97.2L10.8 96.6L9.6 95.9L8.5 95.2L7.4 94.4L6.5 93.5L5.6 92.6L4.8 91.5L4.1 90.4L3.4 89.2L2.8 87.9L2.3 86.5L1.8 84.9L1.4 83.2L1.0 81.3L0.7 79.1L0.4 76.7L0.2 73.8L0.1 70.3L0.0 65.4L0.0 50.0L0.0 34.6L0.1 29.7L0.2 26.2L0.4 23.3L0.7 20.9L1.0 18.7L1.4 16.8L1.8 15.1L2.3 13.5L2.8 12.1L3.4 10.8L4.1 9.6L4.8 8.5L5.6 7.4L6.5 6.5L7.4 5.6L8.5 4.8L9.6 4.1L10.8 3.4L12.1 2.8L13.5 2.3L15.1 1.8L16.8 1.4L18.7 1.0L20.9 0.7L23.3 0.4L26.2 0.2L29.7 0.1L34.6 0.0L50.0 0.0L65.4 0.0L70.3 0.1L73.8 0.2L76.7 0.4L79.1 0.7L81.3 1.0L83.2 1.4L84.9 1.8L86.5 2.3L87.9 2.8L89.2 3.4L90.4 4.1L91.5 4.8L92.6 5.6L93.5 6.5L94.4 7.4L95.2 8.5L95.9 9.6L96.6 10.8L97.2 12.1L97.7 13.5L98.2 15.1L98.6 16.8L99.0 18.7L99.3 20.9L99.6 23.3L99.8 26.2L99.9 29.7L100.0 34.6Z%22/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22%3E%3Cpath d=%22M100.0 50.0L100.0 65.4L99.9 70.3L99.8 73.8L99.6 76.7L99.3 79.1L99.0 81.3L98.6 83.2L98.2 84.9L97.7 86.5L97.2 87.9L96.6 89.2L95.9 90.4L95.2 91.5L94.4 92.6L93.5 93.5L92.6 94.4L91.5 95.2L90.4 95.9L89.2 96.6L87.9 97.2L86.5 97.7L84.9 98.2L83.2 98.6L81.3 99.0L79.1 99.3L76.7 99.6L73.8 99.8L70.3 99.9L65.4 100.0L50.0 100.0L34.6 100.0L29.7 99.9L26.2 99.8L23.3 99.6L20.9 99.3L18.7 99.0L16.8 98.6L15.1 98.2L13.5 97.7L12.1 97.2L10.8 96.6L9.6 95.9L8.5 95.2L7.4 94.4L6.5 93.5L5.6 92.6L4.8 91.5L4.1 90.4L3.4 89.2L2.8 87.9L2.3 86.5L1.8 84.9L1.4 83.2L1.0 81.3L0.7 79.1L0.4 76.7L0.2 73.8L0.1 70.3L0.0 65.4L0.0 50.0L0.0 34.6L0.1 29.7L0.2 26.2L0.4 23.3L0.7 20.9L1.0 18.7L1.4 16.8L1.8 15.1L2.3 13.5L2.8 12.1L3.4 10.8L4.1 9.6L4.8 8.5L5.6 7.4L6.5 6.5L7.4 5.6L8.5 4.8L9.6 4.1L10.8 3.4L12.1 2.8L13.5 2.3L15.1 1.8L16.8 1.4L18.7 1.0L20.9 0.7L23.3 0.4L26.2 0.2L29.7 0.1L34.6 0.0L50.0 0.0L65.4 0.0L70.3 0.1L73.8 0.2L76.7 0.4L79.1 0.7L81.3 1.0L83.2 1.4L84.9 1.8L86.5 2.3L87.9 2.8L89.2 3.4L90.4 4.1L91.5 4.8L92.6 5.6L93.5 6.5L94.4 7.4L95.2 8.5L95.9 9.6L96.6 10.8L97.2 12.1L97.7 13.5L98.2 15.1L98.6 16.8L99.0 18.7L99.3 20.9L99.6 23.3L99.8 26.2L99.9 29.7L100.0 34.6Z%22/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

@media (prefers-reduced-motion: reduce) {
  .alyssiun-color-icon { transition: none !important; }
}