@k2b/cloud 0.6.0-rc.0

package/src/styles/effects.css

@@ -0,0 +1,851 @@
+.ai-skill-origin-badge {
+  background: var(--ui-surface-muted) !important;
+  color: var(--color-zinc-600) !important;
+}
+
+.dark .ai-skill-origin-badge {
+  color: var(--color-zinc-300) !important;
+}
+
+/* Assistant chat markdown. Vertical rhythm works through explicit block
+   margins + normal-flow margin collapsing (adjacent blocks share the larger
+   margin instead of stacking), trimmed at the block edges. */
+.assistant-markdown-block {
+  @apply min-w-0 text-sm leading-6 text-primary;
+}
+
+.k2b-ui .k2b-chat-message.ai-chat-message-wide {
+  width: 100%;
+  max-width: none;
+}
+
+.k2b-ui
+  .k2b-chat-message.ai-chat-message-wide
+  :where(.k2b-chat-message__bubble, .k2b-chat-message__content, .k2b-chat-message__content > *) {
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+}
+
+/* Result links sit inside an already padded activity row. Keep them inline so
+   they do not make linked capability results taller than neighboring rows. */
+.k2b-ui .k2b-button.ai-chat-result-link[data-size="xs"] {
+  min-height: 1.25rem;
+  padding-block: 0;
+}
+
+.assistant-markdown-block :where(*) {
+  margin-block: 0;
+}
+
+.assistant-markdown-block :where(p, ul, ol, pre, blockquote) {
+  margin-block: 0.875rem;
+}
+
+.assistant-markdown-block :where(.md-table-wrap) {
+  margin-block: 1.125rem;
+}
+
+.assistant-markdown-block :where(hr) {
+  @apply border-0 border-t border-zinc-200 dark:border-zinc-800;
+  margin-block: 1.375rem;
+}
+
+.assistant-markdown-block :where(h1, h2, h3, h4, h5, h6) {
+  @apply font-semibold text-primary;
+  margin-top: 1.5rem;
+  margin-bottom: 0.625rem;
+}
+
+.assistant-markdown-block > :where(:first-child) {
+  margin-top: 0;
+}
+
+.assistant-markdown-block > :where(:last-child) {
+  margin-bottom: 0;
+}
+
+.assistant-markdown-block :where(ul, ol) {
+  padding-left: 1.25rem;
+}
+
+.assistant-markdown-block :where(ul) {
+  list-style: disc;
+}
+
+.assistant-markdown-block :where(ol) {
+  list-style: decimal;
+}
+
+.assistant-markdown-block :where(li + li) {
+  margin-top: 0.375rem;
+}
+
+/* Tight rhythm inside list items — nested lists and paragraphs stay compact. */
+.assistant-markdown-block :where(li) > :where(p, ul, ol) {
+  margin-block: 0.25rem;
+}
+
+.assistant-markdown-block :where(a) {
+  @apply text-blue-600 underline underline-offset-2 dark:text-blue-300;
+}
+
+.assistant-markdown-block :where(a.md-link-widget) {
+  color: inherit;
+  text-decoration: none;
+}
+
+.assistant-markdown-block :where(a.md-link-widget:hover) {
+  color: var(--ui-app-accent-text);
+}
+
+.assistant-markdown-block :where(code) {
+  @apply rounded bg-zinc-100 px-1 py-0.5 text-[0.85em] text-primary dark:bg-zinc-900;
+}
+
+.assistant-markdown-block :where(pre) {
+  @apply overflow-auto rounded-md bg-zinc-100 p-3 text-xs leading-5 dark:bg-zinc-950/70;
+}
+
+.assistant-markdown-block :where(pre code) {
+  @apply bg-transparent p-0 text-inherit;
+}
+
+.assistant-markdown-block :where(blockquote) {
+  @apply border-l-2 border-zinc-300 pl-3 text-secondary dark:border-zinc-700;
+}
+
+.assistant-markdown-block :where(th, td) {
+  @apply border-b border-zinc-200 px-2.5 py-1.5 align-top dark:border-zinc-800;
+}
+
+.assistant-markdown-block :where(th) {
+  @apply border-zinc-300 font-semibold text-primary dark:border-zinc-700;
+}
+
+/* App help is a reader, not a generic Markdown preview. Keep the measure,
+   hierarchy, and rhythm close to the task-first Help wireframe while reusing
+   the same safe server-rendered Markdown pipeline as the rest of Cloud. */
+.help-topic-icon {
+  background: color-mix(in srgb, var(--app-accent, var(--color-blue-500)) 10%, var(--ui-surface-muted));
+}
+
+.help-article-layout {
+  display: grid;
+  grid-template-columns: minmax(10rem, 13rem) minmax(0, 52rem);
+  justify-content: center;
+  align-items: start;
+  gap: clamp(2rem, 4vw, 4rem);
+}
+
+.help-article-copy {
+  min-width: 0;
+}
+
+.help-article-toc {
+  position: sticky;
+  top: 0.25rem;
+  align-self: start;
+  min-width: 0;
+}
+
+.help-article-toc-label {
+  margin: 0 0 0.6rem;
+  color: var(--color-zinc-500);
+  font-size: 0.6875rem;
+  font-weight: 650;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.help-article-toc ol {
+  display: grid;
+  gap: 0.2rem;
+  margin: 0 !important;
+  padding: 0 !important;
+  list-style: none !important;
+}
+
+.help-article-toc li {
+  min-width: 0;
+}
+
+.help-article-toc button {
+  display: grid;
+  grid-template-columns: 2.25rem minmax(0, 1fr);
+  width: 100%;
+  min-width: 0;
+  align-items: center;
+  gap: 0.6rem;
+  border-radius: var(--ui-radius-control);
+  color: var(--color-zinc-600);
+  padding: 0.3rem;
+  text-align: left;
+  transition:
+    background-color 140ms ease,
+    color 140ms ease;
+}
+
+.help-article-toc button:hover {
+  color: var(--ui-app-accent-text);
+}
+
+.help-article-toc button:focus-visible {
+  outline: none;
+  box-shadow: var(--ui-focus);
+}
+
+.help-article-toc button[aria-current="location"] {
+  background: color-mix(in srgb, var(--app-accent, var(--color-blue-500)) 8%, var(--ui-surface-subtle));
+  color: var(--ui-app-accent-text);
+}
+
+.help-article-toc-icon {
+  display: grid;
+  width: 2.25rem;
+  height: 2.25rem;
+  place-items: center;
+  border-radius: var(--ui-radius-control);
+  background: var(--ui-surface-muted);
+  color: inherit;
+  font-size: 0.95rem;
+}
+
+.help-article-toc button[aria-current="location"] .help-article-toc-icon {
+  background: color-mix(in srgb, var(--app-accent, var(--color-blue-500)) 13%, var(--ui-surface-muted));
+}
+
+.help-article-toc-title {
+  overflow: hidden;
+  font-size: 0.75rem;
+  font-weight: 550;
+  line-height: 1.35;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dark .help-article-toc button {
+  color: var(--color-zinc-400);
+}
+
+.dark .help-article-toc button:hover,
+.dark .help-article-toc button[aria-current="location"] {
+  color: var(--ui-app-accent-text);
+}
+
+.help-document {
+  color: var(--color-zinc-800);
+  font-size: 0.9375rem;
+  line-height: 1.65;
+}
+
+.dark .help-document {
+  color: var(--color-zinc-300);
+}
+
+.help-document > :where(:first-child) {
+  margin-top: 0;
+}
+
+.help-document > :where(:last-child) {
+  margin-bottom: 0;
+}
+
+.help-document :where(p) {
+  margin-block: 0 1rem;
+  color: inherit;
+}
+
+.help-document :where(h1, h2, h3, h4, h5, h6) {
+  color: var(--color-zinc-950);
+  font-weight: 600;
+  letter-spacing: -0.018em;
+}
+
+.dark .help-document :where(h1, h2, h3, h4, h5, h6) {
+  color: var(--color-zinc-100);
+}
+
+.help-document :where(h2, h3) {
+  margin: 2.5rem 0 0.75rem;
+  font-size: 1.125rem;
+  line-height: 1.35;
+}
+
+.help-document .help-section-title {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  margin: 3.75rem 0 1.25rem;
+  scroll-margin-top: 4rem;
+  font-size: 1.25rem;
+}
+
+.help-document .help-section-title:first-child {
+  margin-top: 0;
+}
+
+.help-section-icon {
+  display: grid;
+  width: 2.625rem;
+  height: 2.625rem;
+  flex: 0 0 auto;
+  place-items: center;
+  border-radius: var(--ui-radius-control);
+  background: color-mix(in srgb, var(--app-accent, var(--color-blue-500)) 11%, var(--ui-surface-muted));
+  color: var(--ui-app-accent-text);
+  font-size: 1.05rem;
+}
+
+.help-document :where(h4) {
+  margin: 1.75rem 0 0.5rem;
+  font-size: 0.9375rem;
+  line-height: 1.45;
+}
+
+.help-document :where(h5) {
+  margin: 1.5rem 0 0.375rem;
+  font-size: 0.875rem;
+  line-height: 1.45;
+}
+
+.help-document :where(h5 code) {
+  background: transparent;
+  color: var(--ui-app-accent-text);
+  font-size: inherit;
+  padding: 0;
+}
+
+/* A bold-only Markdown line is rendered as an explicit section eyebrow by the
+   help renderer. Keep it quiet and readable instead of treating it as body copy. */
+.help-document > .help-eyebrow {
+  margin: 2.25rem 0 0.45rem;
+  color: var(--color-zinc-600);
+  font-size: 0.8125rem;
+  font-weight: 650;
+  letter-spacing: 0;
+  line-height: 1.45;
+}
+
+.dark .help-document > .help-eyebrow {
+  color: var(--color-zinc-300);
+}
+
+.help-document > .help-eyebrow > strong {
+  color: inherit;
+  font-weight: inherit;
+}
+
+.help-document ul,
+.help-document ol {
+  width: 100%;
+  margin: 0.75rem 0 1.375rem !important;
+  padding-inline-start: 1.25rem !important;
+}
+
+.help-document :where(li + li) {
+  margin-top: 0.55rem;
+}
+
+.help-document :where(ul > li)::marker {
+  color: color-mix(in srgb, var(--app-accent, var(--color-blue-500)) 75%, var(--color-zinc-400));
+}
+
+.help-document :where(ol > li)::marker {
+  color: var(--color-zinc-500);
+  font-size: 0.8em;
+  font-weight: 650;
+}
+
+.help-document .help-reference {
+  margin: 1rem 0 1.75rem;
+}
+
+.help-document .help-reference > ul {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1.25rem 2rem;
+  margin: 0 !important;
+  padding: 0 !important;
+  list-style: none;
+}
+
+.help-document .help-reference > ul > li {
+  min-width: 0;
+  margin: 0;
+}
+
+.help-document .help-reference > ul > li > strong:first-child {
+  display: block;
+  margin-bottom: 0.2rem;
+  color: var(--ui-app-accent-text);
+  font-size: 0.875rem;
+}
+
+/* Tailwind Typography decorates inline code with visible backticks. Help
+   tables and prose already provide enough code affordance through typography. */
+.help-document :where(code)::before,
+.help-document :where(code)::after {
+  content: none !important;
+}
+
+.help-document .help-steps {
+  margin: 1rem 0 2rem;
+  border-radius: var(--ui-radius-surface);
+  background: var(--ui-surface-subtle);
+  padding: 0.25rem 1.25rem;
+}
+
+.help-document .help-steps > ol {
+  margin: 0 !important;
+  padding: 0 !important;
+  list-style: none;
+  counter-reset: help-step;
+}
+
+.help-document .help-steps > ol > li {
+  position: relative;
+  min-height: 3rem;
+  margin: 0;
+  padding: 1rem 0 1rem 3.25rem;
+  counter-increment: help-step;
+}
+
+.help-document .help-steps > ol > li::before {
+  position: absolute;
+  top: 1rem;
+  left: 0;
+  z-index: 1;
+  display: grid;
+  width: 2.25rem;
+  height: 2.25rem;
+  place-items: center;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--app-accent, var(--color-blue-500)) 13%, var(--ui-surface-muted));
+  color: var(--ui-app-accent-text);
+  content: counter(help-step);
+  font-size: 0.75rem;
+  font-weight: 650;
+}
+
+.help-document .help-steps > ol > li:not(:last-child)::after {
+  position: absolute;
+  top: 3.25rem;
+  /* Reach the next item's marker despite the next row's top padding. */
+  bottom: -1rem;
+  left: 1.1rem;
+  width: 1px;
+  background: color-mix(in srgb, var(--app-accent, var(--color-blue-500)) 20%, var(--ui-border));
+  content: "";
+}
+
+.help-document .help-steps > ol > li > strong:first-child,
+.help-document .help-steps > ol > li > p:first-child > strong:first-child {
+  color: var(--color-zinc-900);
+}
+
+.dark .help-document .help-steps > ol > li > strong:first-child,
+.dark .help-document .help-steps > ol > li > p:first-child > strong:first-child {
+  color: var(--color-zinc-100);
+}
+
+.help-document .help-compare {
+  margin: 1rem 0 2rem;
+}
+
+.help-document .help-compare > ul {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0;
+  margin: 0 !important;
+  padding: 0 !important;
+  overflow: hidden;
+  border-radius: var(--ui-radius-surface);
+  background: var(--ui-surface-subtle);
+  list-style: none;
+}
+
+.help-document .help-compare > ul > li {
+  min-width: 0;
+  margin: 0;
+  padding: 1.25rem;
+}
+
+.help-document .help-compare > ul > li > strong:first-child {
+  display: block;
+  margin-bottom: 0.25rem;
+  color: var(--ui-app-accent-text);
+}
+
+.help-document :where(li > p) {
+  margin-block: 0;
+}
+
+.help-document :where(a) {
+  color: var(--ui-app-accent-text);
+  font-weight: 500;
+  text-decoration: none;
+}
+
+.help-document :where(a:hover) {
+  text-decoration: underline;
+  text-underline-offset: 0.18em;
+}
+
+.help-document :where(code) {
+  border-radius: 0.38rem;
+  background: var(--ui-surface-muted);
+  color: var(--color-zinc-800);
+  font-family: var(--font-mono);
+  font-size: 0.82em;
+  padding: 0.16rem 0.38rem;
+}
+
+.dark .help-document :where(code) {
+  color: var(--color-zinc-200);
+}
+
+.help-document .md-code-block {
+  margin-block: 0.875rem 1.125rem;
+  background: transparent;
+}
+
+.help-document .md-code-block > span {
+  display: none;
+}
+
+.help-document .md-code-block pre {
+  margin: 0;
+  border: 0 !important;
+  border-radius: var(--ui-radius-surface) !important;
+  background: var(--ui-surface-subtle) !important;
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-border) 72%, transparent);
+  padding: 0.875rem 1rem;
+}
+
+.help-document .md-code-block pre code {
+  background: transparent;
+  color: var(--color-zinc-800);
+  font-size: 0.8125rem;
+  line-height: 1.55;
+  padding: 0;
+}
+
+.help-document .md-code-block :where(.hl-comment) {
+  color: var(--color-zinc-500);
+  font-style: italic;
+}
+
+.help-document .md-code-block :where(.hl-keyword) {
+  color: var(--ui-app-accent-text);
+  font-weight: 600;
+}
+
+.help-document .md-code-block :where(.hl-string) {
+  color: var(--color-emerald-700);
+}
+
+.help-document .md-code-block :where(.hl-number) {
+  color: var(--color-amber-700);
+}
+
+.help-document .md-code-block :where(.hl-variable) {
+  color: var(--color-sky-700);
+}
+
+.help-document .md-code-block :where(.hl-operator) {
+  color: var(--color-zinc-600);
+}
+
+.dark .help-document .md-code-block pre code {
+  color: var(--color-zinc-200);
+}
+
+.dark .help-document .md-code-block :where(.hl-comment) {
+  color: var(--color-zinc-500);
+}
+
+.dark .help-document .md-code-block :where(.hl-string) {
+  color: var(--color-emerald-300);
+}
+
+.dark .help-document .md-code-block :where(.hl-number) {
+  color: var(--color-amber-300);
+}
+
+.dark .help-document .md-code-block :where(.hl-variable) {
+  color: var(--color-sky-300);
+}
+
+.dark .help-document .md-code-block :where(.hl-operator) {
+  color: var(--color-zinc-400);
+}
+
+.help-document .k2b-notice-card {
+  margin: 1.375rem 0;
+}
+
+/* API docs express return values as a short strong label followed by inline
+   code. Present that metadata as one quiet, scannable row. */
+.help-document > p:has(> strong:first-child):has(> code:last-child) {
+  display: flex;
+  width: fit-content;
+  align-items: baseline;
+  gap: 0.35rem;
+  margin: 0 0 0.625rem;
+  color: var(--color-zinc-500);
+  font-size: 0.75rem;
+}
+
+.help-document > p:has(> strong:first-child):has(> code:last-child) code {
+  background: transparent;
+  padding: 0;
+}
+
+.help-document :where(blockquote) {
+  margin: 1.25rem 0;
+  border: 0;
+  border-radius: var(--ui-radius-surface);
+  background: var(--ui-surface-subtle);
+  color: var(--color-zinc-600);
+  padding: 0.875rem 1rem;
+}
+
+.help-document .md-table-wrap {
+  overflow: hidden;
+  margin-block: 0.875rem 1.5rem;
+}
+
+.help-document .md-table-wrap > .md-table {
+  height: auto;
+  margin: 0 !important;
+  border-collapse: separate;
+  border-spacing: 0;
+}
+
+/* `MarkdownView` contributes its generic cell border with element specificity.
+   Keep the Help frame as the only edge owner so those cell borders cannot show
+   through the wrapper's rounded clipping corners. */
+.help-document .md-table :is(th, td) {
+  min-width: 0;
+  height: auto;
+  border: 0;
+  padding: 0;
+}
+
+.help-document .md-table :where(th + th, td + td),
+.help-document .md-table :where(tbody tr + tr > *, thead + tbody tr:first-child > *) {
+  padding: 0;
+}
+
+.help-document .md-table-cell {
+  min-width: 0;
+  height: auto;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+  overflow-wrap: break-word;
+  padding: 0.65rem 0.75rem;
+  font-size: 0.78rem;
+  line-height: 1.45;
+  word-break: normal;
+}
+
+.help-document .md-table thead {
+  background: var(--ui-surface-subtle);
+}
+
+.help-document .md-table thead .md-table-cell {
+  color: var(--color-zinc-700);
+  font-size: 0.75rem;
+  font-weight: 650;
+}
+
+@media (hover: hover) {
+  .help-document .md-table tbody tr:not(.md-table-total-row):hover {
+    background: var(--ui-data-row-hover);
+  }
+}
+
+.help-document .md-table tbody tr:not(.md-table-total-row) .md-table-cell,
+.help-document .md-table tbody tr:not(.md-table-total-row) .md-table-cell :where(strong) {
+  font-weight: 400;
+}
+
+.help-document .md-table-cell :where(code) {
+  border-radius: 0;
+  background: transparent;
+  color: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  padding: 0;
+}
+
+.dark .help-document .md-table thead {
+  background: var(--ui-surface-subtle);
+}
+
+.dark .help-document .md-table thead .md-table-cell {
+  color: var(--color-zinc-200);
+}
+
+.dark .help-document :where(blockquote) {
+  color: var(--color-zinc-400);
+}
+
+.help-document :where(hr) {
+  height: 0;
+  margin-block: 2rem;
+  border: 0;
+}
+
+@media (max-width: 72rem) {
+  .help-article-layout {
+    grid-template-columns: 3.25rem minmax(0, 52rem);
+    gap: 2rem;
+  }
+
+  .help-article-toc-label,
+  .help-article-toc-title {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  .help-article-toc button {
+    display: grid;
+    width: 2.85rem;
+    height: 2.85rem;
+    grid-template-columns: 1fr;
+    place-items: center;
+  }
+}
+
+@media (max-width: 48rem) {
+  .help-article-layout {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 1.5rem;
+  }
+
+  .help-article-toc {
+    z-index: 2;
+    top: 0;
+    overflow-x: auto;
+    border-radius: var(--ui-radius-surface);
+    background: color-mix(in srgb, var(--ui-surface-raised) 90%, transparent);
+    box-shadow: var(--ui-shadow-hover);
+    backdrop-filter: blur(12px);
+    scrollbar-width: none;
+  }
+
+  .help-article-toc::-webkit-scrollbar {
+    display: none;
+  }
+
+  .help-article-toc ol {
+    display: flex;
+    width: max-content;
+    padding: 0.35rem !important;
+  }
+
+  .help-document .help-section-title {
+    margin-top: 3rem;
+    scroll-margin-top: 4.5rem;
+  }
+
+  .help-document .help-reference > ul,
+  .help-document .help-compare > ul {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+/* Dashboard launchpad panel. Scoped through :has() so the calmer backdrop only
+   applies to the dashboard app picker, not every bare dialog. */
+dialog:has(.launchpad-panel)::backdrop {
+  background: rgb(0 0 0 / 0.45);
+  backdrop-filter: blur(8px);
+}
+
+.dark dialog:has(.launchpad-panel)::backdrop {
+  background: rgb(0 0 0 / 0.35);
+}
+
+.launchpad-panel {
+  background: rgb(255 255 255 / 0.96);
+  border: 1px solid rgb(228 228 231 / 0.82);
+  border-radius: 1.5rem;
+  box-shadow:
+    inset 0 1px 0 0 rgb(255 255 255 / 0.9),
+    0 28px 68px -42px rgb(24 24 27 / 0.48);
+}
+
+.dark .launchpad-panel {
+  background: linear-gradient(180deg, rgb(24 24 27 / 0.98), rgb(15 15 17 / 0.98));
+  border-color: rgb(255 255 255 / 0.13);
+  box-shadow:
+    inset 0 1px 0 0 rgb(255 255 255 / 0.08),
+    0 28px 68px -36px rgb(0 0 0 / 0.82);
+}
+
+/* Dashboard launchpad app icon. One app colour drives the glyph and graded rim;
+   the face stays clean so the tile feels crisp instead of plastic. */
+.launchpad-panel .app-icon {
+  --icon-face: #ffffff;
+  --rim-top: color-mix(in oklab, var(--app-icon-color), white 34%);
+  --rim-bottom: color-mix(in oklab, var(--app-icon-color), black 12%);
+  --rim-top-hover: color-mix(in oklab, var(--app-icon-color), white 2%);
+  --rim-bottom-hover: color-mix(in oklab, var(--app-icon-color), black 30%);
+  --glyph: var(--app-icon-color);
+  --glyph-hover: var(--app-icon-color);
+  --drop: none;
+
+  background:
+    linear-gradient(var(--icon-face), var(--icon-face)) padding-box,
+    linear-gradient(180deg, var(--rim-top), var(--rim-bottom)) border-box;
+  border: 2.5px solid transparent;
+  box-shadow: var(--drop);
+  color: var(--glyph);
+  transition:
+    background 0.18s ease,
+    box-shadow 0.18s ease,
+    color 0.18s ease;
+}
+
+@supports (color: oklch(from red l c h)) {
+  .launchpad-panel .app-icon {
+    --glyph: oklch(from var(--app-icon-color) min(l, 0.5) c h);
+    --glyph-hover: oklch(from var(--app-icon-color) min(l, 0.4) c h);
+  }
+}
+
+.dark .launchpad-panel .app-icon {
+  --icon-face: #202026;
+  --rim-top: color-mix(in oklab, var(--app-icon-color), white 30%);
+  --rim-bottom: color-mix(in oklab, var(--app-icon-color), black 24%);
+  --rim-top-hover: color-mix(in oklab, var(--app-icon-color), white 54%);
+  --rim-bottom-hover: color-mix(in oklab, var(--app-icon-color), white 6%);
+  --glyph: var(--app-icon-color);
+  --glyph-hover: color-mix(in oklab, var(--app-icon-color), white 32%);
+  --drop: 0 10px 20px -12px rgb(0 0 0 / 0.7);
+}
+
+@supports (color: oklch(from red l c h)) {
+  .dark .launchpad-panel .app-icon {
+    --glyph: oklch(from var(--app-icon-color) max(l, 0.82) c h);
+    --glyph-hover: oklch(from var(--app-icon-color) max(l, 0.96) c h);
+  }
+}
+
+/* Hover changes only the icon tile, never the whole icon+label item. */
+.launchpad-panel .group:hover > .app-icon,
+.launchpad-panel .app-icon:hover {
+  background:
+    linear-gradient(var(--icon-face), var(--icon-face)) padding-box,
+    linear-gradient(180deg, var(--rim-top-hover), var(--rim-bottom-hover)) border-box;
+  color: var(--glyph-hover);
+}