@echodial/deck 0.1.0

package/dist/layers/media.css

@@ -0,0 +1,400 @@
+/* ==========================================================================
+   Deck — 24 Media and messaging
+   ========================================================================== */
+
+@layer deck.components {
+
+  /* --- Video ---------------------------------------------------------------
+     A responsive frame for a native video or an embed, plus styling for the
+     native controls where the browser allows it.
+     ---------------------------------------------------------------------- */
+  .video {
+    position: relative;
+    inline-size: 100%;
+    aspect-ratio: var(--ratio, 16 / 9);
+    background: var(--ink-950);
+    border-radius: var(--r-md);
+    overflow: clip;
+    isolation: isolate;
+  }
+  .video > :is(video, iframe, embed, object) {
+    position: absolute;
+    inset: 0;
+    inline-size: 100%;
+    block-size: 100%;
+    border: 0;
+    object-fit: contain;
+  }
+  .video-cover > video { object-fit: cover; }
+  .video-square { --ratio: 1; }
+  .video-portrait { --ratio: 9 / 16; }
+  .video-wide { --ratio: 21 / 9; }
+
+  .video video::-webkit-media-controls-panel { background-image: none; }
+  .video video { accent-color: var(--brand-500); }
+
+  /* Poster overlay with a play button, for a click-to-load embed */
+  .video-poster {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    display: grid;
+    place-items: center;
+    cursor: pointer;
+    border: 0;
+    padding: 0;
+    background: none;
+  }
+  .video-poster img { inline-size: 100%; block-size: 100%; object-fit: cover; }
+  .video-poster::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(to top, oklch(12% .02 var(--hue-neutral) / .55), transparent 60%);
+  }
+  .video-play {
+    position: relative;
+    z-index: 1;
+    inline-size: 64px;
+    block-size: 64px;
+    border-radius: var(--r-full);
+    display: grid;
+    place-items: center;
+    background: color-mix(in oklab, var(--surface) 90%, transparent);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    color: var(--text);
+    box-shadow: var(--shadow-3);
+    transition: scale var(--dur-2) var(--ease-spring), background-color var(--dur-1) var(--ease-out);
+  }
+  .video-poster:hover .video-play { scale: 1.08; background: var(--surface); }
+  .video-meta {
+    position: absolute;
+    inset-block-end: var(--space-3);
+    inset-inline-start: var(--space-3);
+    z-index: 2;
+    display: flex;
+    gap: var(--space-2);
+    color: oklch(98% 0 0);
+    font-size: var(--text-xs);
+    text-shadow: 0 1px 3px oklch(0% 0 0 / .6);
+  }
+  .video-duration {
+    padding: 2px 6px;
+    border-radius: var(--r-xs);
+    background: oklch(12% 0 0 / .72);
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* --- Masonry gallery -----------------------------------------------------
+     Two implementations. Columns is universal and good for photos where the
+     reading order down each column is fine. Grid masonry is the real thing
+     and preserves row order; it is used automatically where supported.
+     ---------------------------------------------------------------------- */
+  .masonry {
+    columns: var(--cols, 1);
+    column-gap: var(--gap, var(--space-3));
+  }
+  @media (min-width: 30rem) { .masonry { --cols: 2; } }
+  @media (min-width: 48rem) { .masonry { --cols: 3; } }
+  @media (min-width: 72rem) { .masonry { --cols: 4; } }
+  .masonry-2 { --cols: 2; }
+  .masonry-3 { --cols: 3; }
+
+  .masonry > * {
+    break-inside: avoid;
+    margin-block-end: var(--gap, var(--space-3));
+    border-radius: var(--r-md);
+    overflow: clip;
+    display: block;
+  }
+  .masonry img { inline-size: 100%; block-size: auto; display: block; }
+
+  @supports (grid-template-rows: masonry) {
+    .masonry {
+      columns: auto;
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr));
+      grid-template-rows: masonry;
+      gap: var(--gap, var(--space-3));
+    }
+    .masonry > * { margin-block-end: 0; }
+  }
+
+  /* A simple gallery grid, when equal tiles are wanted instead */
+  .gallery {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(min(9rem, 100%), 1fr));
+    gap: var(--space-2);
+  }
+  .gallery > * {
+    aspect-ratio: 1;
+    border-radius: var(--r-sm);
+    overflow: clip;
+    position: relative;
+  }
+  .gallery img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: scale var(--dur-3) var(--ease-out); }
+  .gallery a:hover img { scale: 1.05; }
+  /* Let one tile take a bigger cell */
+  .gallery .span-2 { grid-column: span 2; grid-row: span 2; aspect-ratio: 1; }
+  .gallery .span-wide { grid-column: span 2; aspect-ratio: 2; }
+
+  /* --- Lazy loading --------------------------------------------------------
+     A placeholder that holds the space so nothing shifts, and fades the image
+     in once it decodes. Set the aspect ratio on the frame and the layout is
+     stable before a byte arrives.
+     ---------------------------------------------------------------------- */
+  .lazy {
+    position: relative;
+    display: block;
+    background: var(--bg-sunken);
+    overflow: clip;
+    aspect-ratio: var(--ratio, 3 / 2);
+  }
+  .lazy > img {
+    inline-size: 100%;
+    block-size: 100%;
+    object-fit: cover;
+    opacity: 0;
+    transition: opacity var(--dur-3) var(--ease-out);
+  }
+  .lazy > img.is-loaded, .lazy > img[data-loaded] { opacity: 1; }
+  /* Two things about this shimmer are recorded in FINDINGS.md:
+
+     67: it runs the same dk-shimmer keyframes as .skeleton, for the same
+     purpose, but .lazy::after is NOT in 02-reset.css's reduced-motion
+     exemption list -- so it freezes where .skeleton slows to 2.4s. The
+     durations differ too (1.6s here, 1.4s there). One of the two is wrong.
+
+     66: deck-extras.js adds .is-error to the wrapper when an image fails to
+     load, and nothing in src/ styles that class. So the shimmer carries on
+     forever and a broken image is indistinguishable from a loading one. */
+  .lazy::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(100deg, transparent 20%,
+      color-mix(in oklab, var(--ink-300) 40%, transparent) 45%, transparent 70%);
+    background-size: 250% 100%;
+    background-repeat: no-repeat;
+    animation: dk-shimmer 1.6s var(--ease-in-out) infinite;
+    pointer-events: none;
+  }
+  .lazy:has(img.is-loaded)::after, .lazy:has(img[data-loaded])::after { display: none; }
+
+  /* A blurred low-res preview underneath, if you have one */
+  .lazy-blur { background-size: cover; background-position: center; }
+  .lazy-blur::before {
+    content: "";
+    position: absolute;
+    inset: -8px;
+    background: inherit;
+    filter: blur(14px);
+    transition: opacity var(--dur-3) var(--ease-out);
+  }
+  .lazy-blur:has(img.is-loaded)::before { opacity: 0; }
+
+  /* Generic content placeholder while a region streams in */
+  .lazy-block {
+    display: grid;
+    place-items: center;
+    min-block-size: 8rem;
+    border: 1px dashed var(--line);
+    border-radius: var(--r-md);
+    color: var(--text-faint);
+    gap: var(--space-2);
+  }
+
+  /* --- Chat bubbles --------------------------------------------------------
+     Conversation view. Consecutive messages from one side group together and
+     only the last one in a run gets the tail.
+     ---------------------------------------------------------------------- */
+  .chat {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    padding: var(--space-4);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+  }
+  /* A centred date pill between days. Styling, not structure — a screen
+     reader hears ordinary text. */
+  .chat-day {
+    align-self: center;
+    margin-block: var(--space-4) var(--space-2);
+    padding: var(--space-1) var(--space-3);
+    border-radius: var(--r-full);
+    background: var(--surface-2);
+    color: var(--text-faint);
+    font-size: var(--text-xs);
+    font-weight: 560;
+  }
+
+  /* One message row. .msg-out flips it to the other edge and reverses the row
+     so the avatar swaps sides. The incoming/outgoing distinction is position
+     and colour only, so name the sender in text for anyone not seeing it. */
+  .msg {
+    display: flex;
+    gap: var(--space-2);
+    align-items: flex-end;
+    max-inline-size: min(80%, 34rem);
+    align-self: flex-start;
+  }
+  .msg-out { align-self: flex-end; flex-direction: row-reverse; }
+
+  /* The message body. Its corner radii are logical, which is what lets the
+     grouping flatten the correct side in either writing direction. */
+  .bubble {
+    position: relative;
+    padding: var(--space-2) var(--space-3);
+    border-radius: var(--r-md);
+    background: var(--surface-2);
+    border: 1px solid var(--line);
+    font-size: var(--text-sm);
+    line-height: 1.45;
+    overflow-wrap: anywhere;
+    border-end-start-radius: var(--r-xs);
+  }
+  .msg-out .bubble {
+    background: var(--brand-600);
+    color: var(--text-on-brand);
+    border-color: transparent;
+    border-end-start-radius: var(--r-md);
+    border-end-end-radius: var(--r-xs);
+  }
+  /* Grouping: only the last bubble of a run keeps its tail */
+  .msg:not(:last-of-type) + .msg .bubble { border-start-start-radius: var(--r-xs); }
+  .msg-out:not(:last-of-type) + .msg-out .bubble { border-start-end-radius: var(--r-xs); }
+
+  .bubble-meta {
+    display: flex;
+    align-items: center;
+    gap: var(--space-1);
+    margin-block-start: 2px;
+    font-size: var(--text-2xs);
+    opacity: .7;
+    justify-content: flex-end;
+    font-variant-numeric: tabular-nums;
+  }
+  .msg:not(.msg-out) .bubble-meta { justify-content: flex-start; }
+  .bubble-name { font-weight: 620; font-size: var(--text-xs); margin-block-end: 2px; color: var(--brand); }
+  .msg-out .bubble-name { color: inherit; }
+
+  .bubble-attachment {
+    margin: calc(var(--space-2) * -1) calc(var(--space-3) * -1) var(--space-2);
+    border-start-start-radius: var(--r-md);
+    border-start-end-radius: var(--r-md);
+    overflow: clip;
+  }
+  .bubble-attachment img { inline-size: 100%; display: block; }
+
+  .msg .avatar { --size: 28px; align-self: flex-end; margin-block-end: 2px; }
+  .msg:not(:last-of-type) + .msg .avatar { visibility: hidden; }
+
+  .bubble-system {
+    align-self: center;
+    background: none;
+    border: 0;
+    color: var(--text-faint);
+    font-size: var(--text-xs);
+    text-align: center;
+    max-inline-size: 42ch;
+  }
+
+  /* Typing indicator */
+  .bubble-typing { display: inline-flex; gap: 4px; padding-block: var(--space-3); }
+  .bubble-typing > span {
+    inline-size: 6px;
+    block-size: 6px;
+    border-radius: var(--r-full);
+    background: var(--text-faint);
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .bubble-typing > span { animation: dk-typing 1.2s var(--ease-in-out) infinite; }
+    .bubble-typing > span:nth-child(2) { animation-delay: .16s; }
+    .bubble-typing > span:nth-child(3) { animation-delay: .32s; }
+    @keyframes dk-typing {
+      0%, 60%, 100% { translate: 0 0; opacity: .45; }
+      30% { translate: 0 -4px; opacity: 1; }
+    }
+  }
+
+  /* Composer pinned to the bottom */
+  .chat-composer {
+    display: flex;
+    align-items: flex-end;
+    gap: var(--space-2);
+    padding: var(--space-3) var(--space-4);
+    padding-block-end: max(var(--space-3), env(safe-area-inset-bottom));
+    border-block-start: 1px solid var(--line);
+    background: var(--surface);
+  }
+  .chat-composer .textarea {
+    min-block-size: var(--control-h);
+    max-block-size: 8rem;
+    field-sizing: content;
+    border-radius: var(--r-lg);
+    resize: none;
+  }
+
+  /* --- QR code -------------------------------------------------------------
+     deck.js renders the modules into this frame. Kept square, with a quiet
+     zone, so it stays scannable at any size.
+     ---------------------------------------------------------------------- */
+  .qr {
+    display: inline-grid;
+    place-items: center;
+    padding: var(--qr-quiet, 12px);
+    background: var(--qr-bg, #fff);
+    border-radius: var(--r-sm);
+    border: 1px solid var(--line);
+    inline-size: fit-content;
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+  .qr svg { display: block; inline-size: var(--qr-size, 160px); block-size: var(--qr-size, 160px); }
+  .qr svg rect { fill: var(--qr-fg, #000); shape-rendering: crispEdges; }
+  .qr-lg { --qr-size: 240px; }
+  .qr-sm { --qr-size: 104px; }
+  /* A logo punched out of the middle. Only safe at error correction Q or H. */
+  .qr-logo {
+    position: relative;
+  }
+  .qr-logo > .qr-logo-mark {
+    position: absolute;
+    inset: 50%;
+    translate: -50% -50%;
+    inline-size: 22%;
+    block-size: 22%;
+    display: grid;
+    place-items: center;
+    background: var(--qr-bg, #fff);
+    border-radius: var(--r-xs);
+    padding: 4px;
+  }
+  .qr-caption {
+    margin-block-start: var(--space-2);
+    font-size: var(--text-xs);
+    color: var(--text-muted);
+    text-align: center;
+    max-inline-size: var(--qr-size, 160px);
+    overflow-wrap: anywhere;
+  }
+}
+
+@layer deck.print {
+  @media print {
+    /* A QR code is often the whole point of printing the page */
+    .qr { border: 0; break-inside: avoid; }
+    .video, .chat-composer, .carousel-arrow, .carousel-dots,
+    .speed-dial, .drawer, .mega, .banner { display: none !important; }
+    .masonry { columns: 2; }
+    .chat { overflow: visible; max-block-size: none; }
+    .msg { break-inside: avoid; }
+    .bubble { border: 1px solid #bbb !important; background: #fff !important; color: #000 !important; }
+    .msg-out .bubble { background: #f2f2f2 !important; }
+    .lazy::after { display: none !important; }
+    .editor-toolbar, .editor-footer { display: none !important; }
+    .editor-content { max-block-size: none !important; overflow: visible !important; }
+  }
+}

package/dist/layers/mobile.css

@@ -0,0 +1,245 @@
+/* ==========================================================================
+   Deck — 08 Mobile
+   The parts Tailwind makes you build yourself every time.
+   ========================================================================== */
+
+@layer deck.mobile {
+
+  /* --- Bottom sheet -------------------------------------------------------
+     <dialog class="sheet"> on a phone, a centred modal from 40rem up.
+     ---------------------------------------------------------------------- */
+  .sheet {
+    inline-size: 100%;
+    max-inline-size: 100%;
+    max-block-size: 88dvh;
+    margin: 0;
+    margin-block-start: auto;
+    padding: 0;
+    border: 0;
+    border-start-start-radius: var(--r-lg);
+    border-start-end-radius: var(--r-lg);
+    background: var(--surface);
+    color: var(--text);
+    box-shadow: var(--shadow-4);
+    overflow: clip;
+    translate: 0 100%;
+    transition: translate var(--dur-3) var(--ease-out),
+                display var(--dur-3) allow-discrete,
+                overlay var(--dur-3) allow-discrete;
+  }
+  .sheet[open] { translate: 0; }
+  @starting-style { .sheet[open] { translate: 0 100%; } }
+
+  .sheet::backdrop {
+    background: oklch(18% .02 var(--hue-neutral) / .5);
+    opacity: 0;
+    transition: opacity var(--dur-3) var(--ease-out),
+                display var(--dur-3) allow-discrete,
+                overlay var(--dur-3) allow-discrete;
+  }
+  .sheet[open]::backdrop { opacity: 1; }
+  @starting-style { .sheet[open]::backdrop { opacity: 0; } }
+
+  /* The drag handle at the top of a bottom sheet. Deck draws it and does not
+     implement the drag — swiping down does nothing — so always ship a real
+     close button as well. */
+  .sheet-grip {
+    inline-size: 38px;
+    block-size: 4px;
+    border-radius: var(--r-full);
+    background: var(--ink-300);
+    margin: var(--space-3) auto var(--space-1);
+  }
+  /* The title row of a sheet. */
+  .sheet-header { padding: var(--space-3) var(--space-5); display: flex; align-items: center; gap: var(--space-3); }
+  /* The sheet's heading. Point aria-labelledby at it. */
+  .sheet-title { font-size: var(--text-md); font-weight: 640; }
+  /* The scrolling region. Pads for the home indicator, and contains its
+     overscroll so reaching the end does not scroll the page behind. */
+  .sheet-body {
+    padding: var(--space-2) var(--space-5) calc(var(--space-6) + env(safe-area-inset-bottom));
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+  }
+
+  @media (min-width: 40rem) {
+    .sheet {
+      inline-size: min(30rem, calc(100vw - var(--space-8)));
+      margin: auto;
+      border-radius: var(--r-lg);
+      translate: 0;
+      opacity: 0;
+      scale: .97;
+      transition: opacity var(--dur-2) var(--ease-out), scale var(--dur-2) var(--ease-spring),
+                  display var(--dur-2) allow-discrete, overlay var(--dur-2) allow-discrete;
+    }
+    .sheet[open] { opacity: 1; scale: 1; }
+    @starting-style { .sheet[open] { opacity: 0; scale: .97; } }
+  }
+
+  /* --- Bottom tab bar ----------------------------------------------------- */
+  .tabbar {
+    position: fixed;
+    inset-inline: 0;
+    inset-block-end: 0;
+    z-index: var(--z-nav);
+    display: flex;
+    background: color-mix(in oklab, var(--surface) 88%, transparent);
+    backdrop-filter: saturate(1.8) blur(16px);
+    -webkit-backdrop-filter: saturate(1.8) blur(16px);
+    border-block-start: 1px solid var(--line);
+    padding-block-end: env(safe-area-inset-bottom);
+  }
+  @media (min-width: 48rem) { .tabbar { display: none; } }
+
+  .tabbar-item {
+    flex: 1 1 0;
+    min-block-size: var(--tap);
+    padding-block: var(--space-2);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 3px;
+    color: var(--text-faint);
+    font-size: var(--text-2xs);
+    font-weight: 560;
+    text-decoration: none;
+    -webkit-tap-highlight-color: transparent;
+    transition: color var(--dur-1) var(--ease-out);
+  }
+  .tabbar-item[aria-current] { color: var(--brand); }
+  .tabbar-item[aria-current] .icon { scale: 1.06; }
+  .tabbar-item .icon { transition: scale var(--dur-2) var(--ease-spring); }
+
+  /* Give the page room so the tab bar never covers the last row */
+  body:has(.tabbar) { padding-block-end: calc(var(--tap) + var(--space-4) + env(safe-area-inset-bottom)); }
+  @media (min-width: 48rem) { body:has(.tabbar) { padding-block-end: 0; } }
+
+  /* --- Safe area helpers --------------------------------------------------- */
+  .safe-top { padding-block-start: env(safe-area-inset-top); }
+  .safe-bottom { padding-block-end: env(safe-area-inset-bottom); }
+  .safe-x { padding-inline: max(var(--space-gutter), env(safe-area-inset-left)) max(var(--space-gutter), env(safe-area-inset-right)); }
+
+  /* --- Icons --------------------------------------------------------------
+     <svg class="icon"><use href="deck-icons.svg#check"></use></svg>
+     Icons inherit color and font-size, so they line up with text by default.
+     ---------------------------------------------------------------------- */
+  /* An SVG icon sized in em, so it scales with the text it sits beside and
+     lands on the baseline. Icons are filled with currentColor and inherit
+     the surrounding colour. */
+  .icon {
+    inline-size: 1.25em;
+    block-size: 1.25em;
+    flex: 0 0 auto;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 1.75;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    vertical-align: -.22em;
+  }
+  /* Small icons reference the heavier cut of the sprite, not a thicker stroke:
+     the symbols are filled outlines, so stroke-width does nothing to them.
+     Every icon ships twice, #name at wght 400 and #name-sm at wght 500, and
+     .icon-sm goes with the -sm symbol. CSS cannot rewrite a <use href>, so the
+     pairing lives in the markup:
+       <svg class="icon icon-sm"><use href="deck-icons.svg#check-sm"></use></svg> */
+  .icon-sm { inline-size: 1em; block-size: 1em; }
+  /* A 1.6em icon, for icon tiles and empty states where the default would
+     look undersized. */
+  .icon-lg { inline-size: 1.6em; block-size: 1.6em; stroke-width: 1.6; }
+  .icon-xl { inline-size: 2.25em; block-size: 2.25em; stroke-width: 1.4; }
+  .icon-fill { fill: currentColor; stroke: none; }
+  .icon-muted { color: var(--text-faint); }
+  .icon-spin { animation: dk-spin 1.1s linear infinite; }
+
+  /* Icon in a tinted tile — for feature rows and empty states */
+  .icon-tile {
+    inline-size: 40px;
+    block-size: 40px;
+    border-radius: var(--r-sm);
+    display: grid;
+    place-items: center;
+    background: var(--brand-soft);
+    color: var(--brand);
+    flex: 0 0 auto;
+  }
+  .icon-tile-good { background: var(--good-100); color: var(--good-700); }
+  .icon-tile-warn { background: var(--warn-100); color: var(--warn-700); }
+  .icon-tile-bad  { background: var(--bad-100);  color: var(--bad-700); }
+  .icon-tile-lg { inline-size: 52px; block-size: 52px; border-radius: var(--r-md); }
+
+  /* --- Emoji --------------------------------------------------------------
+     Emoji render at wildly different sizes and baselines across platforms.
+     .emoji pins the font stack and the metrics so they sit on the line.
+     ---------------------------------------------------------------------- */
+  /* Pins the emoji font stack and metrics so an emoji renders at the same
+     size and baseline on Windows, iOS and Android instead of jumping
+     between them. */
+  .emoji {
+    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
+                 "Twemoji Mozilla", "Android Emoji", sans-serif;
+    font-size: 1.05em;
+    line-height: 1;
+    font-style: normal;
+    font-weight: 400;
+    vertical-align: -.12em;
+    display: inline-block;
+    text-rendering: auto;
+    -webkit-font-smoothing: auto;
+  }
+  .emoji-lg { font-size: 1.6em; vertical-align: -.2em; }
+  .emoji-xl { font-size: 2.5em; vertical-align: -.24em; }
+  .emoji-hero { font-size: 3.5rem; line-height: 1; }
+
+  /* Emoji as an avatar or a status marker */
+  .emoji-tile {
+    inline-size: 40px;
+    block-size: 40px;
+    border-radius: var(--r-sm);
+    background: var(--surface-2);
+    border: 1px solid var(--line);
+    display: grid;
+    place-items: center;
+    font-size: 20px;
+    flex: 0 0 auto;
+  }
+  .emoji-tile-round { border-radius: var(--r-full); }
+
+  /* Emoji picker grid — drop your own set in */
+  .emoji-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
+    gap: 2px;
+  }
+  .emoji-grid > button {
+    aspect-ratio: 1;
+    border-radius: var(--r-xs);
+    font-size: 21px;
+    line-height: 1;
+    cursor: pointer;
+    transition: background-color var(--dur-1) var(--ease-out), scale var(--dur-1) var(--ease-spring);
+  }
+  .emoji-grid > button:hover { background: var(--surface-hover); scale: 1.16; }
+
+  /* Reaction pill, like a Slack or Teams reaction */
+  .reaction {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+    min-block-size: 28px;
+    padding-inline: var(--space-2);
+    border-radius: var(--r-full);
+    border: 1px solid var(--line);
+    background: var(--surface);
+    font-size: var(--text-xs);
+    font-variant-numeric: tabular-nums;
+    color: var(--text-muted);
+    cursor: pointer;
+  }
+  .reaction[aria-pressed="true"] { background: var(--brand-soft); border-color: var(--brand-300); color: var(--brand-soft-text); }
+}