@fungi.computer/caps 0.7.1 → 0.9.0

package/dist/styles.css

@@ -5795,6 +5795,10 @@
     width: calc(var(--spacing) * 12);
     height: calc(var(--spacing) * 12);
   }
+  .size-48 {
+    width: calc(var(--spacing) * 48);
+    height: calc(var(--spacing) * 48);
+  }
   .size-\[var\(--stipe-icon-size-lg\)\] {
     width: var(--stipe-icon-size-lg);
     height: var(--stipe-icon-size-lg);
@@ -6450,7 +6454,7 @@
       --tw-prose-bold: var(--color-base-content);
       --tw-prose-counters: var(--stipe-fg-muted);
       --tw-prose-bullets: var(--stipe-fg-muted);
-      --tw-prose-hr: var(--stipe-hairline);
+      --tw-prose-hr: var(--stipe-hairline-quiet);
       --tw-prose-quotes: var(--color-base-content);
       --tw-prose-quote-borders: var(--stipe-linework);
       --tw-prose-captions: var(--stipe-fg-muted);
@@ -6459,7 +6463,7 @@
       --tw-prose-pre-code: var(--color-base-content);
       --tw-prose-pre-bg: var(--color-base-200);
       --tw-prose-th-borders: var(--stipe-linework);
-      --tw-prose-td-borders: var(--stipe-hairline);
+      --tw-prose-td-borders: var(--stipe-hairline-quiet);
       font-family: var(--font-sans);
       line-height: var(--caps-prose-leading, 1.75);
     }
@@ -6691,6 +6695,9 @@
       color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
     }
   }
+  .text-current {
+    color: currentcolor;
+  }
   .text-error {
     color: var(--color-error);
   }
@@ -7641,6 +7648,14 @@
     transparent
   );
   }
+  --stipe-hairline-quiet: var(--color-base-content);
+  @supports (color: color-mix(in lab, red, red)) {
+    --stipe-hairline-quiet: color-mix(
+    in oklab,
+    var(--color-base-content) 10%,
+    transparent
+  );
+  }
   --stipe-figure-ink: var(--color-base-content);
   --stipe-density-compact: 0rem;
   --stipe-density-comfortable: 0.25rem;
@@ -7747,6 +7762,7 @@
     transparent
   );
   }
+  --stipe-hairline-quiet: var(--stipe-hairline);
   --stipe-fg-muted: var(--color-base-content);
   @supports (color: color-mix(in lab, red, red)) {
     --stipe-fg-muted: color-mix(
@@ -7975,6 +7991,14 @@
     transparent
   );
   }
+  --stipe-hairline-quiet: var(--color-base-content);
+  @supports (color: color-mix(in lab, red, red)) {
+    --stipe-hairline-quiet: color-mix(
+    in oklab,
+    var(--color-base-content) 10%,
+    transparent
+  );
+  }
   --caps-button-linework: 0%;
   --caps-print-ink: var(--color-base-content);
   --caps-print-filter: url("#caps-print");
@@ -8154,6 +8178,7 @@
     transparent
   );
   }
+  --stipe-hairline-quiet: var(--stipe-hairline);
   --stipe-surface-frame-width: 2px;
   --stipe-surface-frame-image: linear-gradient(
     var(--color-base-content),
@@ -8380,6 +8405,7 @@
   --stipe-fg-muted: light-dark(#5c5f66, #9a9ea6);
   --stipe-linework: light-dark(#e2e2dd, #25282c);
   --stipe-hairline: light-dark(#edede9, #1c1f22);
+  --stipe-hairline-quiet: var(--stipe-hairline);
   --radius-selector: 0.25rem;
   --radius-field: 0.25rem;
   --radius-box: 0.25rem;
@@ -8765,6 +8791,101 @@
   position: static;
   flex: none;
 }
+@layer utilities {
+  .caps-setup-notice-frame {
+    container-type: inline-size;
+  }
+  .caps-setup-notice-title {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+  }
+  .caps-setup-notice[data-variant] {
+    border-color: var(--color-warning);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-warning) 45%, transparent);
+    }
+    background: var(--color-warning);
+    @supports (color: color-mix(in lab, red, red)) {
+      background: color-mix( in oklab, var(--color-warning) 12%, var(--stipe-surface-raised) );
+    }
+    color: var(--color-base-content);
+  }
+  .caps-setup-notice-actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--spacing-xs);
+  }
+  .caps-setup-notice-dot {
+    margin-block: var(--spacing-md);
+    scale: 2.5;
+  }
+  .caps-setup-notice-available {
+    color: var(--stipe-fg-muted);
+  }
+  .caps-setup-notice[data-variant="inline"] {
+    padding: var(--spacing-xs) var(--spacing-sm);
+    font-size: var(--text-sm);
+  }
+  .caps-setup-notice[data-variant="banner"] {
+    border-radius: 0;
+    border-inline: 0;
+  }
+  @container (width <= 36rem) {
+    .caps-setup-notice[data-variant] {
+      flex-direction: column;
+      align-items: stretch;
+    }
+    .caps-setup-notice[data-variant] > * {
+      flex: none;
+      width: 100%;
+    }
+    .caps-setup-notice-actions {
+      justify-content: flex-start;
+    }
+  }
+  .caps-failure-line {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--spacing-sm);
+    min-width: 0;
+    font-size: var(--text-sm);
+  }
+  .caps-failure-line-copy {
+    display: grid;
+    flex: 1;
+    min-width: 0;
+    gap: var(--spacing-2xs);
+  }
+  .caps-failure-line-count {
+    color: var(--stipe-fg-muted);
+    font-size: var(--text-xs);
+  }
+  .caps-failure-line > .caps-status {
+    margin-block-start: var(--spacing-2xs);
+  }
+  .caps-failure-line-actions {
+    display: flex;
+    flex: none;
+    gap: var(--spacing-2xs);
+  }
+  .caps-failure-line[data-density="tile"] {
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: var(--spacing-md);
+    text-align: center;
+  }
+  .caps-failure-line[data-density="tile"] > .caps-status {
+    margin-block-start: 0;
+  }
+  .caps-failure-line[data-density="tile"] .caps-failure-line-copy {
+    flex: none;
+  }
+}
 :root, [data-theme] {
   --caps-primary-text: light-dark(
     oklch(from var(--color-primary) clamp(0.2, l, 0.4) c h),
@@ -8784,6 +8905,130 @@
 .caps-toaster[data-sonner-toaster] {
   z-index: var(--stipe-layer-toast);
 }
+.caps-toaster[data-sonner-toaster][data-sonner-theme] {
+  font-family: inherit;
+  --border-radius: var(--radius-box);
+  --normal-bg: var(--stipe-surface-raised);
+  --normal-bg-hover: var(--color-base-200);
+  --normal-border: var(--stipe-hairline-quiet);
+  --normal-border-hover: var(--stipe-hairline);
+  --normal-text: var(--color-base-content);
+  --success-bg: var(--color-success);
+  @supports (color: color-mix(in lab, red, red)) {
+    --success-bg: color-mix(
+    in oklab,
+    var(--color-success) 10%,
+    var(--stipe-surface-raised)
+  );
+  }
+  --success-border: var(--color-success);
+  @supports (color: color-mix(in lab, red, red)) {
+    --success-border: color-mix(in oklab, var(--color-success) 35%, transparent);
+  }
+  --success-text: var(--color-base-content);
+  --info-bg: var(--color-info);
+  @supports (color: color-mix(in lab, red, red)) {
+    --info-bg: color-mix(
+    in oklab,
+    var(--color-info) 10%,
+    var(--stipe-surface-raised)
+  );
+  }
+  --info-border: var(--color-info);
+  @supports (color: color-mix(in lab, red, red)) {
+    --info-border: color-mix(in oklab, var(--color-info) 35%, transparent);
+  }
+  --info-text: var(--color-base-content);
+  --warning-bg: var(--color-warning);
+  @supports (color: color-mix(in lab, red, red)) {
+    --warning-bg: color-mix(
+    in oklab,
+    var(--color-warning) 12%,
+    var(--stipe-surface-raised)
+  );
+  }
+  --warning-border: var(--color-warning);
+  @supports (color: color-mix(in lab, red, red)) {
+    --warning-border: color-mix(in oklab, var(--color-warning) 40%, transparent);
+  }
+  --warning-text: var(--color-base-content);
+  --error-bg: var(--color-error);
+  @supports (color: color-mix(in lab, red, red)) {
+    --error-bg: color-mix(
+    in oklab,
+    var(--color-error) 10%,
+    var(--stipe-surface-raised)
+  );
+  }
+  --error-border: var(--color-error);
+  @supports (color: color-mix(in lab, red, red)) {
+    --error-border: color-mix(in oklab, var(--color-error) 40%, transparent);
+  }
+  --error-text: var(--color-base-content);
+}
+.caps-toaster[data-sonner-toaster] [data-sonner-toast][data-styled="true"] {
+  font-size: var(--text-sm);
+  line-height: 1.35;
+  box-shadow: 0 0.25rem 0.75rem var(--color-base-content);
+  @supports (color: color-mix(in lab, red, red)) {
+    box-shadow: 0 0.25rem 0.75rem color-mix( in oklab, var(--color-base-content) calc(var(--depth) * 14%), transparent );
+  }
+}
+.caps-toaster[data-sonner-toaster] [data-sonner-toast][data-styled] {
+  align-items: flex-start;
+  font-family: inherit;
+}
+.caps-toaster[data-sonner-toaster] [data-sonner-toast][data-styled] [data-icon] {
+  align-items: center;
+  height: calc(var(--text-sm) * 1.35);
+  margin: 0;
+}
+.caps-toaster[data-sonner-toaster] [data-sonner-toast][data-styled] [data-description] {
+  color: var(--color-base-content);
+  @supports (color: color-mix(in lab, red, red)) {
+    color: color-mix(in oklab, var(--color-base-content) 78%, transparent);
+  }
+}
+.caps-toaster[data-sonner-toaster] [data-sonner-toast][data-styled] [data-close-button] {
+  position: static;
+  order: 99;
+  align-self: flex-start;
+  margin-inline-start: auto;
+  transform: none;
+  flex: none;
+}
+.caps-toaster[data-sonner-toaster] [data-sonner-toast][data-styled] [data-icon] {
+  color: var(--color-base-content);
+}
+.caps-toaster[data-sonner-toaster] [data-sonner-toast][data-styled][data-type="success"] [data-icon] {
+  color: var(--color-success);
+}
+.caps-toaster[data-sonner-toaster] [data-sonner-toast][data-styled][data-type="error"] [data-icon] {
+  color: var(--color-error);
+}
+.caps-toaster[data-sonner-toaster] [data-sonner-toast][data-styled][data-type="warning"] [data-icon] {
+  color: var(--color-warning);
+}
+.caps-toaster[data-sonner-toaster] [data-sonner-toast][data-styled][data-type="info"] [data-icon] {
+  color: var(--color-info);
+}
+.caps-toaster[data-sonner-toaster] [data-sonner-toast][data-styled] [data-close-button] {
+  width: 1.25rem;
+  height: 1.25rem;
+  color: var(--color-base-content);
+  background: var(--stipe-surface-raised);
+  border: var(--border) solid var(--stipe-hairline);
+  transition-duration: var(--stipe-motion-fast);
+}
+.caps-toaster[data-sonner-toaster] [data-sonner-toast][data-styled] [data-close-button]:hover {
+  background: var(--color-base-200);
+  border-color: var(--stipe-hairline);
+}
+.caps-toaster[data-sonner-toaster] [data-sonner-toast][data-styled] [data-close-button]:focus-visible {
+  outline: 2px solid var(--caps-focus-ring);
+  outline-offset: 1px;
+  box-shadow: none;
+}
 @layer caps-dropdown {
   .caps-dropdown-popup {
     max-height: var(--available-height);
@@ -8851,6 +9096,10 @@
     outline: none;
     box-shadow: none;
   }
+  .caps-button.btn-ghost[aria-busy="true"]:is( :disabled, [aria-disabled="true"] ) {
+    --btn-fg: var(--color-base-content);
+    color: var(--color-base-content);
+  }
 }
 @layer components {
   .caps-app-canvas {
@@ -8900,7 +9149,7 @@
     align-items: center;
     justify-content: space-between;
     gap: var(--spacing-sm);
-    border-bottom: var(--border) solid var(--stipe-hairline);
+    border-bottom: var(--border) solid var(--stipe-hairline-quiet);
     padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) var(--spacing-md);
   }
   .caps-copy-field-title {
@@ -9069,6 +9318,11 @@
     color: var(--marginalia-ink);
     font-size: 0.875em;
   }
+  @media (pointer: coarse) {
+    .caps-keycap[data-touch="hide"] {
+      display: none;
+    }
+  }
   .caps-keycap {
     display: inline-grid;
     min-width: var(--caps-keycap-legend-min-size, 2rem);
@@ -10170,6 +10424,11 @@
   .caps-shortcuts dt, .caps-shortcuts dd {
     margin: 0;
   }
+  .caps-dialog-popup-default {
+    width: min( var(--container-lg), calc( 100% - max(1rem, env(safe-area-inset-left)) - max(1rem, env(safe-area-inset-right)) ) );
+    max-width: none;
+    max-height: calc( 100dvh - max(1rem, env(safe-area-inset-top)) - max(1rem, env(safe-area-inset-bottom)) );
+  }
   dialog.caps-surface {
     color: inherit;
   }
@@ -10871,22 +11130,23 @@
     min-width: 0;
     width: 100%;
     max-width: 100%;
+    overflow-x: auto;
     margin: 0;
     color: var(--color-base-content);
-    border: var(--border) solid color-mix(in oklch, var(--color-base-content) 22%, var(--color-base-100));
+    border: var(--border) solid var(--color-base-content);
+    @supports (color: color-mix(in lab, red, red)) {
+      border: var(--border) solid color-mix(in oklch, var(--color-base-content) 22%, var(--color-base-100));
+    }
     border-radius: var(--radius-box);
     background: var(--color-base-100);
-    overflow-x: auto;
+    container-type: inline-size;
   }
   .caps-permission-grid-caption {
     display: flex;
     flex-direction: column;
     gap: var(--spacing-2xs);
     padding: var(--spacing-sm) var(--spacing-md);
-    border-bottom: var(--border) solid var(--color-base-content);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-bottom: var(--border) solid color-mix(in oklch, var(--color-base-content) 22%, var(--color-base-100));
-    }
+    border-bottom: var(--border) solid var(--stipe-hairline-quiet);
   }
   .caps-permission-grid-title {
     font-family: var(--font-mono);
@@ -10902,8 +11162,18 @@
   .caps-permission-grid table {
     width: 100%;
     border-collapse: collapse;
+    table-layout: fixed;
     font-size: 0.875rem;
   }
+  .caps-permission-grid-col-state {
+    width: 5rem;
+  }
+  .caps-permission-grid-col-scope {
+    width: 28%;
+  }
+  .caps-permission-grid-col-control {
+    width: 5.5rem;
+  }
   .caps-permission-grid thead th {
     padding: var(--spacing-xs) var(--spacing-md);
     font-family: var(--font-mono);
@@ -10913,26 +11183,20 @@
     text-align: start;
     text-transform: uppercase;
     opacity: 0.7;
-    border-bottom: var(--border) solid var(--color-base-content);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-bottom: var(--border) solid color-mix(in oklch, var(--color-base-content) 22%, var(--color-base-100));
-    }
+    border-bottom: var(--border) solid var(--stipe-hairline-quiet);
   }
   .caps-permission-grid tbody td, .caps-permission-grid tbody th {
     padding: var(--spacing-xs) var(--spacing-md);
     text-align: start;
     vertical-align: middle;
     font-weight: 400;
-    border-bottom: var(--border) dashed var(--color-base-content);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-bottom: var(--border) dashed color-mix(in oklch, var(--color-base-content) 14%, var(--color-base-100));
-    }
+    border-bottom: var(--border) solid var(--stipe-hairline-quiet);
   }
   .caps-permission-grid tbody tr:last-child > * {
     border-bottom: 0;
   }
   .caps-permission-grid-index {
-    width: 1%;
+    width: 5.5rem;
     white-space: nowrap;
     font-family: var(--font-mono);
     font-size: 0.75rem;
@@ -10941,7 +11205,12 @@
   .caps-permission-grid-index > span {
     display: block;
   }
+  .caps-permission-grid-index {
+    overflow: hidden;
+  }
   .caps-permission-grid-group {
+    overflow: hidden;
+    text-overflow: ellipsis;
     font-size: 0.625rem;
     letter-spacing: 0.08em;
     text-transform: uppercase;
@@ -10989,6 +11258,37 @@
     font-size: 0.75rem;
     opacity: 0.8;
   }
+  @container (width <= 30rem) {
+    .caps-permission-grid-index {
+      display: none;
+    }
+    .caps-permission-grid-col-state {
+      width: 3.25rem;
+    }
+    .caps-permission-grid-col-scope {
+      width: 5.5rem;
+    }
+    .caps-permission-grid-col-control {
+      width: 3.75rem;
+    }
+    .caps-permission-grid thead th, .caps-permission-grid tbody td, .caps-permission-grid tbody th {
+      padding-inline: var(--spacing-xs);
+    }
+    .caps-permission-grid-capability {
+      gap: var(--spacing-xs);
+    }
+    .caps-permission-grid-mark {
+      width: 1.25rem;
+      height: 1.25rem;
+    }
+    .caps-permission-grid-state {
+      font-size: 0.625rem;
+      letter-spacing: 0.02em;
+    }
+    .caps-permission-grid-scope {
+      font-size: 0.6875rem;
+    }
+  }
   .caps-alert {
     display: flex;
     align-items: flex-start;
@@ -11626,7 +11926,7 @@
   }
   .result-state {
     display: grid;
-    gap: var(--spacing-md);
+    gap: var(--spacing-sm);
     justify-items: start;
     padding: var(--spacing-xl);
     border: var(--border) solid var(--color-base-300);
@@ -11644,9 +11944,102 @@
     background: var(--color-base-200);
     color: var(--color-base-content);
   }
-  .result-state h2 {
+  .result-state > * {
+    margin: 0;
+  }
+  .result-state :is(h2, h3, h4) {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
     font-size: var(--text-xl);
-    font-weight: 700;
+    font-weight: 600;
+  }
+  .result-state[data-tone="failed"] .result-state-visual {
+    color: var(--color-error);
+  }
+  .result-state[data-tone="done"] .result-state-visual {
+    color: var(--color-success);
+  }
+  .result-state[data-tone="failed"] {
+    border-color: var(--color-error);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix( in oklab, var(--color-error) 45%, var(--color-base-300) );
+    }
+  }
+  .result-state[data-tone="done"] {
+    border-color: var(--color-success);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix( in oklab, var(--color-success) 45%, var(--color-base-300) );
+    }
+  }
+  .result-state-visual {
+    display: grid;
+    place-items: center;
+    max-width: 100%;
+    color: var(--color-primary);
+  }
+  .result-state-steps {
+    display: grid;
+    gap: var(--spacing-xs);
+    margin: 0;
+    padding-inline-start: var(--spacing-lg);
+    font-size: var(--text-sm);
+    list-style: decimal;
+  }
+  .result-state-visual > svg {
+    width: 3rem;
+    height: 3rem;
+  }
+  .caps-loading-state[data-framed="false"] {
+    min-height: 0;
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+  }
+  .caps-loading-state-copy {
+    display: grid;
+    flex: 0 1 auto;
+    min-width: 0;
+    gap: var(--spacing-2xs);
+  }
+  .caps-loading-state > .caps-loader {
+    width: 4rem;
+  }
+  .caps-loading-state[data-size="sm"] > .caps-loader {
+    width: 2rem;
+  }
+  .caps-loading-state[data-size="lg"] > .caps-loader {
+    width: 7rem;
+  }
+  .caps-loading-state[data-icon] {
+    flex-direction: column;
+    justify-content: center;
+    gap: var(--spacing-sm);
+    text-align: center;
+  }
+  .caps-loading-state[data-icon] > .caps-loader {
+    width: auto;
+  }
+  .caps-loading-state-icon {
+    display: grid;
+    place-items: center;
+    width: 3rem;
+    height: 3rem;
+  }
+  .caps-loading-state-icon > svg {
+    width: 100%;
+    height: 100%;
+  }
+  .caps-loading-state-retry {
+    flex: none;
+  }
+  .caps-loading-state-detail {
+    color: var(--stipe-fg-muted);
+    font-size: var(--text-sm);
+  }
+  .caps-loading-state[data-size="lg"] {
+    min-height: 6rem;
   }
   .result-state-actions {
     display: flex;
@@ -12231,7 +12624,7 @@
   }
   .caps-pricing-card-banded .caps-pricing-card-description {
     padding-bottom: var(--spacing-md);
-    border-bottom: var(--border) solid var(--stipe-hairline);
+    border-bottom: var(--border) solid var(--stipe-hairline-quiet);
     color: var(--color-base-content);
     font-size: var(--text-base);
   }
@@ -12499,7 +12892,7 @@
     border-top: calc(var(--border) * 2) solid var(--color-base-content);
   }
   .caps-spec-faq-item {
-    border-bottom: var(--border) solid var(--stipe-hairline);
+    border-bottom: var(--border) solid var(--stipe-hairline-quiet);
   }
   .caps-spec-faq-question {
     display: grid;
@@ -13830,6 +14223,26 @@
   .caps-button:disabled {
     opacity: 1;
   }
+  .caps-button[aria-busy="true"]:is(:disabled, [aria-disabled="true"]) {
+    cursor: progress;
+  }
+  .caps-button > .caps-loader {
+    width: 1.25rem;
+    height: 1.25rem;
+    margin-inline-end: calc(var(--spacing-xs) * -0.5);
+  }
+  .caps-button-filled[aria-busy="true"]:is(:disabled, [aria-disabled="true"]) {
+    opacity: 1;
+    background-color: var(--btn-bg);
+    color: var(--btn-fg);
+    border-color: var(--caps-button-filled-edge);
+    box-shadow: var(--caps-button-filled-drop);
+  }
+  .caps-button.btn-outline[aria-busy="true"]:is( :disabled, [aria-disabled="true"] ) {
+    background-color: var(--caps-key-face);
+    color: var(--caps-button-outline-ink, var(--color-base-content));
+    outline: none;
+  }
   .caps-button-filled, .caps-button.btn-outline {
     border-width: var(--caps-button-border-width, var(--border));
     font-weight: var(--caps-button-weight, 600);
@@ -15633,7 +16046,7 @@
   .empty-state-panel .empty-state-title, .empty-state-bubble .empty-state-title {
     margin: 0;
     font-size: var(--text-lg);
-    font-weight: 800;
+    font-weight: 600;
     line-height: 1.25;
     text-wrap: balance;
   }
@@ -15654,11 +16067,38 @@
   .empty-state-panel .empty-state-actions {
     justify-content: center;
   }
+  .empty-state-panel > .empty-state-visual {
+    min-height: 0;
+    margin-block-end: 0;
+  }
+  .empty-state-suggestions .caps-button {
+    min-height: 2rem;
+    height: 2rem;
+    font-size: var(--text-xs);
+  }
+  .empty-state-suggestions .caps-button:is(:disabled, [aria-disabled="true"]):not([aria-busy="true"]) {
+    opacity: 0.5;
+    outline: none;
+    box-shadow: none;
+  }
+  .empty-state-primary {
+    display: grid;
+    justify-items: start;
+    gap: var(--spacing-2xs);
+    margin-block-start: var(--spacing-sm);
+  }
+  .empty-state-panel .empty-state-primary {
+    justify-items: center;
+  }
+  .empty-state-reason {
+    color: var(--stipe-fg-muted);
+    font-size: var(--text-sm);
+  }
   .empty-state-suggestions {
     display: flex;
     flex-wrap: wrap;
-    gap: var(--spacing-xs);
-    margin: var(--spacing-xs) 0 0;
+    gap: var(--spacing-sm);
+    margin: var(--spacing-sm) 0 0;
     padding: 0;
     list-style: none;
   }
@@ -15834,7 +16274,7 @@
     margin: 0;
     color: var(--color-base-content);
     font-size: var(--text-sm);
-    font-weight: 700;
+    font-weight: 600;
   }
   .empty-state-hint p {
     max-width: 30rem;
@@ -15857,7 +16297,7 @@
     margin: 0;
     color: var(--color-base-content);
     font-size: var(--text-sm);
-    font-weight: 700;
+    font-weight: 600;
     line-height: 1.5;
   }
   .empty-state-quiet > p {
@@ -16547,6 +16987,23 @@
     min-width: var(--caps-keycap-label-min-width, auto);
     line-height: var(--caps-keycap-label-line-height, inherit);
   }
+  .caps-keycap[data-size="hint"] {
+    display: inline-block;
+    min-width: 0;
+    min-height: 0;
+    margin-inline: var(--spacing-2xs);
+    padding: 0 var(--spacing-2xs);
+    border-radius: var(--radius-selector);
+    border-color: var(--stipe-hairline-quiet);
+    background: transparent;
+    box-shadow: none;
+    color: var(--color-base-content);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-base-content) 65%, transparent);
+    }
+    font-size: var(--text-xs);
+    line-height: 1.25;
+  }
   .caps-keycap-button .caps-keycap {
     flex: var(--caps-keycap-shortcut-flex, 0 1 auto);
     min-width: var( --caps-keycap-shortcut-size, var(--caps-keycap-legend-min-size, 2rem) );