Story 3.2 done

2026-05-23 18:23:48 +02:00
parent d175f92806
commit a1e8886fce
66 changed files with 18258 additions and 1650 deletions
@@ -1,3 +1,174 @@
-// All selectors MUST be scoped under .scrying-pool.
-// Use --sp-* tokens only — no Foundry --color-* / --font-* / --border-* tokens allowed.
-// Implemented in story 1.5+.
+// VisibilityBadge — DOCUMENTED EXCEPTION to .scrying-pool scoping.
+// The badge is injected into the AV tile DOM via AVTileAdapter — outside any .scrying-pool root.
+// Selectors here are top-level (not nested under .scrying-pool).
+// Badge-specific tokens are declared on :root so they are reachable from tile-adjacent DOM.
+// Source: Architecture §Token System + Story 1.1 AC (VisibilityBadge :root exception).
+
+// Base: disable all motion before the media query (accessibility-first)
+.sp-visibility-badge {
+  transition: none;
+  animation: none;
+}
+
+:root {
+  --sp-badge-bg:          hsl(220, 15%, 10%);
+  --sp-badge-text:        hsl(0, 0%, 85%);
+  --sp-badge-border:      hsl(220, 15%, 25%);
+  --sp-badge-font-size:   0.6875rem;
+  --sp-badge-letter-sp:   0.02em;
+  --sp-chip-bg:           hsl(220, 15%, 15%);
+  --sp-chip-text:         hsl(0, 0%, 75%);
+}
+
+// ---------------------------------------------------------------------------
+// Badge — mounted top-center on the AV tile
+// ---------------------------------------------------------------------------
+
+.sp-visibility-badge {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 10;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 6px;
+  background: var(--sp-badge-bg);
+  color: var(--sp-badge-text);
+  border: 1px solid var(--sp-badge-border);
+  border-radius: 4px;
+  cursor: pointer;
+  white-space: nowrap;
+
+  &__label {
+    font-size: var(--sp-badge-font-size);
+    letter-spacing: var(--sp-badge-letter-sp);
+    line-height: 1.2;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// FirstEncounterPanel
+// ---------------------------------------------------------------------------
+
+.sp-first-encounter-panel {
+  position: fixed;
+  z-index: 100;
+  bottom: 80px;
+  left: 50%;
+  transform: translateX(-50%);
+  max-width: 280px;
+  background: var(--sp-badge-bg);
+  color: var(--sp-badge-text);
+  border: 1px solid var(--sp-badge-border);
+  border-radius: 6px;
+  padding: 12px 16px;
+  overflow: hidden;
+  max-height: 200px;
+
+  &__title {
+    font-size: 0.75rem;
+    font-weight: 600;
+    margin: 0 0 6px;
+  }
+
+  &__body {
+    font-size: 0.6875rem;
+    margin: 0 0 10px;
+  }
+
+  &__got-it {
+    font-size: 0.6875rem;
+    padding: 4px 10px;
+    cursor: pointer;
+    border-radius: 3px;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Chip (collapsed state)
+// ---------------------------------------------------------------------------
+
+.sp-visibility-chip {
+  position: fixed;
+  z-index: 100;
+  bottom: 80px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  background: var(--sp-chip-bg);
+  color: var(--sp-chip-text);
+  border: 1px solid var(--sp-badge-border);
+  border-radius: 12px;
+  font-size: var(--sp-badge-font-size);
+  cursor: pointer;
+
+  &:focus-visible {
+    outline: 2px solid var(--sp-state-active, hsl(220, 80%, 60%));
+    outline-offset: 2px;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// VisibilityDetailsPanel (<dialog>)
+// ---------------------------------------------------------------------------
+
+dialog.sp-visibility-details-panel {
+  background: var(--sp-badge-bg);
+  color: var(--sp-badge-text);
+  border: 1px solid var(--sp-badge-border);
+  border-radius: 8px;
+  padding: 20px 24px;
+  max-width: 320px;
+  width: 100%;
+
+  &__state {
+    font-size: 0.875rem;
+    font-weight: 600;
+    margin: 0 0 10px;
+  }
+
+  &__reassurance,
+  &__audio-note {
+    font-size: 0.75rem;
+    margin: 0 0 10px;
+  }
+
+  &__stale {
+    font-size: 0.6875rem;
+    opacity: 0.6;
+    margin: 0 0 10px;
+    font-style: italic;
+  }
+
+  &__close {
+    display: block;
+    margin-top: 12px;
+    padding: 6px 14px;
+    cursor: pointer;
+    border-radius: 4px;
+    font-size: 0.75rem;
+  }
+
+  &::backdrop {
+    background: hsla(0, 0%, 0%, 0.4);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Motion (gated under preference query)
+// ---------------------------------------------------------------------------
+
+@media (prefers-reduced-motion: no-preference) {
+  .sp-first-encounter-panel {
+    transition: max-height 300ms ease-out, opacity 300ms ease-out;
+
+    &--collapsing {
+      max-height: 0;
+      opacity: 0;
+    }
+  }
+}