components.css

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Range */
[data-range-input]::-webkit-slider-thumb {
  height: 12px;
  width: 12px;
  background: var(--color-background-accent);
  border-radius: 50%;
  border-image: linear-gradient(90deg, var(--color-background-accent) 50%, var(--color-border-default-secondary) 0) 0 1 / calc(50% - 4px / 2) 100vw/0 100vw;
  -webkit-appearance: none;
  appearance: none;
  transition: 0.3s;
}
[data-range-input]::-moz-range-thumb {
  height: 12px;
  width: 12px;
  background: var(--color-background-accent);
  border-radius: 50%;
  border-image: linear-gradient(90deg, var(--color-background-accent) 50%, var(--color-border-default-secondary) 0) 0 1 / calc(50% - 4px / 2) 100vw/0 100vw;
  -webkit-appearance: none;
  appearance: none;
  transition: 0.3s;
}
[data-range-input] ~ datalist > option {
  color: var(--Neutral-Solid-40, #9ca3af);
  font-family: Inter;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
  display: inline-block;
  width: calc((100% - 12px) / var(--list-length));
  text-align: center;
}
[data-range-input] ~ datalist > option:first-child {
  width: calc((100% - 12px) / (var(--list-length) * 2) + 6px);
  text-align: left;
}
[data-range-input] ~ datalist > option:last-child {
  width: calc((100% - 12px) / (var(--list-length) * 2) + 6px);
  text-align: right;
}

/* Context Menu */

[popover].context-menu {
  position: fixed;
  inset: unset;
  overflow: visible;
  top: anchor(bottom);
  left: anchor(left);
  width: fit-content;
  height: fit-content;
  position-try-fallbacks: flip-inline;
}
[popover].context-menu:not(:popover-open) {
  display: none;
}
[popover].context-menu.context-menu-right-align {
  left: unset;
  right: anchor(right);
}
[popover].context-menu.context-menu-up {
  top: unset;
  bottom: anchor(top);
  position-try-fallbacks: flip-block;
}

/* Fallback for browsers without anchor positioning support */
@supports not (anchor-name: --test) {
  [popover].context-menu {
    position: absolute;
    top: auto;
    left: auto;
    margin: 0.5rem;
  }
}

/* Multiselect dropdown */

[popover].multiselect-panel {
  position: fixed;
  inset: unset;
  overflow: visible;
  top: anchor(bottom);
  left: anchor(left);
  margin-top: 0.25rem;
}
[popover].multiselect-panel:not(:popover-open) {
  display: none;
}
@supports not (anchor-name: --test) {
  [popover].multiselect-panel {
    position: absolute;
    top: auto;
    left: auto;
    margin: 0.25rem 0 0;
  }
}

/* Popover Modal */

[popover].popover-modal {
  position: fixed;
  inset: unset;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  width: fit-content;
  height: fit-content;
  max-width: calc(100vw - 2rem);
  max-height: calc(100vh - 2rem);
  overflow: auto;
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}
[popover].popover-modal:not(:popover-open) {
  display: none;
}
[popover].popover-modal-backdrop::backdrop {
  background-color: rgb(0 0 0 / 0.5);
}

/* Generic selectors */
div[contenteditable='true'] .tag {
  display: inline-flex;
  padding: 2px 4px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: 4px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  pointer-events: none;
  color: #030712;
  font-family: Inter;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
}
mark,
pre,
p > code {
  @apply font-sans border border-border-default-secondary bg-background-default-secondary rounded text-sm text-foreground-default-secondary px-1 py-0.5 inline-flex;
}
pre {
  @apply overflow-x-auto;
}

/* Select arrow */
[data-select-arrow] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2' y='2' width='16' height='16' rx='4' fill='%23F3F4F6'/%3E%3Cpath d='M6.5 8.25004L10 11.75L13.5 8.25' stroke='%23030712' stroke-width='1.1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.375rem center;
  background-size: 1.25rem 1.25rem;
}
.dark [data-select-arrow] {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2' y='2' width='16' height='16' rx='4' fill='%2330333B'/%3E%3Cpath d='M6.5 8.25004L10 11.75L13.5 8.25' stroke='%23E6E7EB' stroke-width='1.1'/%3E%3C/svg%3E");
}

/* Multiselect arrow — same glyph as the Select arrow, centred in a 20px box */
.multiselect-arrow {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2' y='2' width='16' height='16' rx='4' fill='%23F3F4F6'/%3E%3Cpath d='M6.5 8.25004L10 11.75L13.5 8.25' stroke='%23030712' stroke-width='1.1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.25rem 1.25rem;
}
.dark .multiselect-arrow {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2' y='2' width='16' height='16' rx='4' fill='%2330333B'/%3E%3Cpath d='M6.5 8.25004L10 11.75L13.5 8.25' stroke='%23E6E7EB' stroke-width='1.1'/%3E%3C/svg%3E");
}

/* Form */
form {
  margin-block-end: 0;
}

/* Sidebar toggle button — visible only when sidebar is collapsed */
.popui-sidebar-toggle {
  display: none;
}
:has(#popui-sidebar:not(.popui-sidebar-open)) .popui-sidebar-toggle {
  display: flex;
}
/* On md+ the sidebar is visible by default (before JS runs), so hide the
   toggle until popui-sidebar-ready confirms JS has taken control. */
@media (min-width: 768px) {
  :has(#popui-sidebar:not(.popui-sidebar-ready):not(.popui-sidebar-open)) .popui-sidebar-toggle {
    display: none;
  }
}

/* Sidebar closed state — overrides md:w-[240px] / md:visible after JS has initialised */
#popui-sidebar.popui-sidebar-ready:not(.popui-sidebar-open) {
  width: 0;
  visibility: hidden;
}

/* Sidebar open state */
#popui-sidebar.popui-sidebar-open {
  width: 240px;
  visibility: visible;
}
@media (max-width: 767px) {
  #popui-sidebar.popui-sidebar-open {
    position: fixed;
    z-index: 40;
  }
}

[x-cloak] {
  display: none !important;
}

/* Helpers */
.text-dimmed {
  @apply text-foreground-default-tertiary;
}

.max-w-md {
  max-width: 28rem;
}
.uppercase {
  text-transform: uppercase;
}
.text-danger {
  @apply text-foreground-critical;
}
.text-neutral {
  @apply text-foreground-default-secondary;
}

/* Prose - use design tokens for dark mode support */
.prose {
  --tw-prose-body: var(--color-foreground-default-default);
  --tw-prose-headings: var(--color-foreground-default-default);
  --tw-prose-lead: var(--color-foreground-default-secondary);
  --tw-prose-links: var(--color-foreground-accent-default);
  --tw-prose-bold: var(--color-foreground-default-default);
  --tw-prose-counters: var(--color-foreground-default-secondary);
  --tw-prose-bullets: var(--color-foreground-default-tertiary);
  --tw-prose-hr: var(--color-border-default-secondary);
  --tw-prose-quotes: var(--color-foreground-default-default);
  --tw-prose-quote-borders: var(--color-border-default-secondary);
  --tw-prose-captions: var(--color-foreground-default-secondary);
  --tw-prose-kbd: var(--color-foreground-default-default);
  --tw-prose-kbd-shadows: var(--color-border-default-secondary);
  --tw-prose-code: var(--color-foreground-default-default);
  --tw-prose-pre-code: var(--color-foreground-default-default);
  --tw-prose-pre-bg: var(--color-background-default-secondary);
  --tw-prose-th-borders: var(--color-border-default-secondary);
  --tw-prose-td-borders: var(--color-border-default-default);
}

/* Sidebar Dark Variant */
.sidebar-dark {
  background-color: var(--color-background-default-bold);
  border-color: var(--color-border-inverse-default);
}

.sidebar-dark > .SidebarHeader {
  border-color: var(--color-border-inverse-default);
  color: var(--color-foreground-inverse-default);
}

.sidebar-dark > .SidebarHeader a,
.sidebar-dark > .SidebarHeader button svg {
  color: var(--color-foreground-inverse-default);
}

.sidebar-dark > .SidebarFooter {
  border-color: var(--color-border-inverse-default);
  color: var(--color-foreground-inverse-default);
}

.sidebar-dark p {
  color: var(--color-foreground-inverse-secondary);
}

.sidebar-dark ul li a {
  color: var(--color-foreground-inverse-default);
}

.sidebar-dark ul li a:hover {
  background-color: var(--color-background-selected-inverse-hover);
}

.sidebar-dark ul li a svg *[stroke] {
  stroke: var(--color-icon-inverse-default);
}
.sidebar-dark ul li a svg *[fill] {
  fill: var(--color-icon-inverse-default);
}

.sidebar-dark ul li a.bg-background-default-secondary {
  background-color: var(--color-background-selected-inverse);
  box-shadow: inset 0 0 0 1px var(--color-border-inverse-default);
}

/* Toast */
.popui-toast {
  position: fixed;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s;
}

.popui-toast--top {
  transform: translateY(-0.5rem);
}

.popui-toast--visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Animated sidebar hide icon */

.icon-sidebar-hide_anim_line,
.icon-sidebar-hide_anim_arrow {
  transition: all 0.4s ease;
}

.icon-sidebar-hide_anim_line {
  transition-behavior: allow-discrete;
}

.icon-sidebar-hide_anim {
  overflow: hidden;
}

.icon-sidebar-hide:hover .icon-sidebar-hide_anim_line {
  transform: translate(-2.5px, 0) scale(0.70, 1);
}

.icon-sidebar-hide:hover .icon-sidebar-hide_anim_line rect {
  rx: 0.5px;
}

.icon-sidebar-hide:hover .icon-sidebar-hide_anim_arrow {
  transform: translate(-11px, 0);
  display: block;
}

/* Animated sidebar show icon */

.icon-sidebar-show_anim_line,
.icon-sidebar-show_anim_arrow {
  transition: transform 0.4s ease;
}

.icon-sidebar-show_anim_arrow {
  transform: scale(-1, 1) translateX(-1px);
  transform-origin: 8px 8px;
}

.icon-sidebar-show:hover .icon-sidebar-show_anim_line,
.icon-sidebar-show:hover .icon-sidebar-show_anim_arrow {
  transform: translate(4px, 0);
  rx: 0;
}

.icon-sidebar-show_anim_line rect {
  rx: 0.5px;
  transform: translate(1.3px, 3px) scale(0.70, 1);
}

.icon-sidebar-show:hover .icon-sidebar-show_anim_line rect {
  rx: 0px;
  transform: translate(1px, 3px) scale(1, 1);
}

.icon-sidebar-show:hover .icon-sidebar-show_anim_arrow {
    transform: scale(-1,1) translate(-4px, 0);
}

/* Animated pulse icon */

.icon-pulse_r0 { animation: icon-pulse-animation 1.6s ease-in-out infinite 0s; }
.icon-pulse_r1 { animation: icon-pulse-animation 1.6s ease-in-out infinite 0.16s; }

/* Table — sticky header, frozen first column, and column dividers. The sticky
   header is toggled by popui.Table's StickyHeader prop; the frozen first column
   by StickyColumn; column dividers, row hover, and full width are always
   applied. These can't be expressed as Tailwind utilities: sticky cells need an
   opaque base to sit over the alpha hover/border tokens, and the header
   dividers are pseudo-elements that scale with the label height. */

/* FullWidth — the table fills its container (width: 100%) so long cell
   content wraps instead of stretching the table past the overflow-hidden
   wrapper; the ScrollHorizontal variant below opts back into max-content
   growth. Expressed as a class rather than min-w-full/table-auto utilities
   because the popui tailwind build doesn't emit them. */
.popui-table-full-width {
  min-width: 100%;
  width: 100%;
  table-layout: auto;
}
/* Under ScrollHorizontal the table grows to its content and the wrapper
   scrolls; without it the table fills the container and cell text wraps
   (the wrapper is overflow-hidden there, so a wider table would just be
   clipped). */
.popui-table-full-width.popui-table-scroll-cells {
  width: max-content;
}

/* Scroll-table cells — when ScrollHorizontal is set the cells shouldn't wrap,
   and columns get a sensible minimum width so short-content columns aren't
   squeezed to a few characters (they still grow to fit longer content, and
   stretch to fill under FullWidth). Removes the need for consumers to hand-set
   per-column widths or whitespace utilities. */
.popui-table-scroll-cells th,
.popui-table-scroll-cells td {
  white-space: nowrap;
  min-width: 6rem;
}

/* RowHover — tint a body row on hover. The frozen first column keeps its own
   opaque hover treatment (see .popui-table-freeze-first below), so this only
   needs to cover the scrolling cells. */
.popui-table-row-hover tbody tr:hover td {
  background-color: var(--color-background-default-secondary);
}

/* Resizable — drag handle on the right edge of each header cell (attached by
   popui.js). The handle is absolutely positioned, so the th needs a
   positioning context; a sticky header already provides one, so only add
   position: relative when the header isn't sticky (avoids overriding sticky). */
.popui-table-resizable:not(.popui-table-sticky-header) thead th {
  position: relative;
}
.popui-table-resizable thead th .popui-table-resizer {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  cursor: col-resize;
  user-select: none;
  z-index: 11;
}

/* Frozen-column scroll wrapper — suppress the horizontal overscroll
   "rubber-band" bounce. The elastic overscroll is a visual transform applied
   to the scroll contents, and the position: sticky first column rides along
   with it, so during the bounce it drifts instead of holding at the left edge.
   overscroll-behavior-x: none disables the horizontal elastic bounce (and
   scroll chaining) so the frozen column stays pinned. Only the x axis is
   suppressed — vertical overscroll keeps its default behavior. */
.popui-table-freeze-scroll {
  overscroll-behavior-x: none;
}

/* Switch the sticky/frozen variant to separate borders. popui.Table defaults
   to border-collapse: collapse, where collapsed borders are painted on the
   table grid rather than the cells — so a sticky cell's own border-right would
   NOT travel with it during horizontal scroll, and box-shadow on table cells
   isn't reliably painted under collapse either. With border-separate the
   borders belong to the cells, so they render AND stay pinned to the sticky
   column/header. border-spacing: 0 keeps the layout identical to collapse
   (popui only uses bottom borders, which sit flush with no gaps). */
.popui-table-sticky-header,
.popui-table-freeze-first {
  border-collapse: separate;
  border-spacing: 0;
}

/* Sticky header row — pinned to the top of the scrolling wrapper. The opaque
   background keeps body rows from bleeding through as they scroll under it. */
.popui-table-sticky-header thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--color-background);
}

/* Frozen first column (header + every body row). popui's hover/border tokens
   are alpha (a tint over an opaque base), so a sticky cell painted with them
   would show the scrolling content underneath — keep an opaque base via
   background-color. The full-height right divider is a real border-right (it
   travels with the sticky cell thanks to border-separate above) using an
   opaque neutral so it stays visible over whatever scrolls behind it; it also
   serves as the separator between columns 1 and 2. */
.popui-table-freeze-first tr > :first-child {
  position: sticky;
  left: 0;
  z-index: 5;
  background-color: var(--color-background) !important;
  border-right: 1px solid var(--color-neutral-20);
}
/* Keep the frozen cell opaque on row hover: layer the alpha hover tint as a
   background-image over the opaque base instead of swapping background-color. */
.popui-table-freeze-first tbody tr:hover > :first-child {
  background-image: linear-gradient(var(--color-background-default-secondary), var(--color-background-default-secondary)) !important;
}
/* The top-left corner must sit above both the sticky header and frozen column. */
.popui-table-freeze-first thead th:first-child {
  z-index: 15;
}

/* Label-height vertical dividers between header columns, drawn as a
   pseudo-element so they track the label height, not the cell padding. The
   pseudo-element anchors to a positioned th. When StickyHeader is also on the
   th is already position: sticky (a containing block), so this rule must NOT
   apply — otherwise position: relative would override position: sticky (equal
   specificity, later rule) and the header would stop sticking. */
.popui-table-col-dividers:not(.popui-table-sticky-header) thead th {
  position: relative;
}
.popui-table-col-dividers thead th:not(:first-child)::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 1em;
  width: 1px;
  background-color: var(--color-border);
}
/* When the first column is frozen, its full-height right border already
   separates columns 1 and 2 — suppress the 2nd header divider to avoid a
   double line. */
.popui-table-freeze-first.popui-table-col-dividers thead th:nth-child(2)::before {
  display: none;
}

/* Card tables round their own corner cells: the wrapper's border-radius only
   clips the cell backgrounds while its overflow is hidden, and a table
   hosting a menu or tooltip switches the wrapper to overflow-visible. 1px
   less than the wrapper radius, nesting inside its border. Scoped to the
   first/last row of the table (thead-or-first-tbody, last tbody), so a
   mid-table row never clips its own background. */
.popui-table-card thead tr:first-child > :first-child,
.popui-table-card tbody:first-child tr:first-child > :first-child {
  border-top-left-radius: calc(var(--radius-lg, 0.5rem) - 1px);
}
.popui-table-card thead tr:first-child > :last-child,
.popui-table-card tbody:first-child tr:first-child > :last-child {
  border-top-right-radius: calc(var(--radius-lg, 0.5rem) - 1px);
}
.popui-table-card tbody:last-child tr:last-child > :first-child {
  border-bottom-left-radius: calc(var(--radius-lg, 0.5rem) - 1px);
}
.popui-table-card tbody:last-child tr:last-child > :last-child {
  border-bottom-right-radius: calc(var(--radius-lg, 0.5rem) - 1px);
}

@keyframes icon-pulse-animation {
  0%, 100% { fill: var(--color-background-default-tertiary); }
  40% { fill: var(--color-accent-50); }
}

/* FilterRow chip controls (text input / select): strip the
   @tailwindcss/forms default border and blue focus ring so the chip's own
   border is the only chrome. Unlayered, so it beats the plugin's @layer base
   focus styles. */
.filter-chip-input { border: 0; box-shadow: none; }
.filter-chip-input:focus {
  outline: none;
  box-shadow: none;
  border-color: transparent;
}

/* Range calendar — a dual-month date-range picker with a preset rail and a
   Cancel / Confirm footer, replicating the console-ui DatePicker. The range
   band is painted on the CELL (so the row gaps break it up), the day button
   carries the start/end accent, and outside-month days render invisible and
   inert so a selection can never bleed into the neighbouring month. */
.popui-cal { --popui-cal-cell: 2rem; }
.popui-cal-preset {
  white-space: nowrap;
  text-align: left;
  font-size: 0.875rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  color: var(--color-foreground-default-secondary);
  background-color: transparent;
  border: 0;
  cursor: pointer;
}
.popui-cal-preset:hover { background-color: var(--color-background-default-secondary); }
.popui-cal-preset[data-active] {
  color: var(--color-foreground-selected);
  background-color: var(--color-background-selected);
  font-weight: 500;
}
/* The grid is a real <table> (matching bits-ui's markup) laid out with flex:
   the table is a column flex whose children are thead/tbody (gap separates
   head from body), and each row is a flex line. thead/tbody are blockified
   explicitly so the flex layout is identical across browsers. */
.popui-cal-grid {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 1rem;
  border-collapse: separate;
  border-spacing: 0;
}
.popui-cal-grid > thead,
.popui-cal-grid > tbody {
  display: block;
}
.popui-cal-row { display: flex; }
.popui-cal-week { margin-top: 0.5rem; }
.popui-cal-head {
  width: var(--popui-cal-cell);
  height: var(--popui-cal-cell);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--color-foreground-default-tertiary);
  border-bottom: 1px solid var(--color-border);
}
.popui-cal-cell {
  position: relative;
  width: var(--popui-cal-cell);
  height: var(--popui-cal-cell);
  padding: 0;
  text-align: center;
}
/* Range band on the cell — day buttons with a range state tint their cell,
   rounded off at the range ends and the row edges. Outside-month days never
   carry a data-state, so the band stops at the month boundary. */
.popui-cal-cell:has(> .popui-cal-day[data-state]) {
  background-color: var(--color-background-default-secondary);
}
.popui-cal-cell:has(> .popui-cal-day[data-state="start"]),
.popui-cal-cell:first-child:has(> .popui-cal-day[data-state]) {
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}
.popui-cal-cell:has(> .popui-cal-day[data-state="end"]),
.popui-cal-cell:last-child:has(> .popui-cal-day[data-state]) {
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}
.popui-cal-day {
  width: var(--popui-cal-cell);
  height: var(--popui-cal-cell);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  border: 0;
  border-radius: 0.5rem;
  background-color: transparent;
  color: var(--color-foreground);
  cursor: pointer;
}
.popui-cal-day:hover { background-color: var(--color-background-default-tertiary-hover); }
.popui-cal-day[data-today]:not([data-state]) {
  border-radius: 0;
  box-shadow: inset 0 -1px 0 0 var(--color-background-accent);
}
/* Middle days paint the same alpha tint as the cell band beneath them —
   console-ui stacks both layers (~3% alpha twice), which is what gives the
   band its darker tone. Painting only one layer reads noticeably lighter. */
.popui-cal-day[data-state="middle"] {
  border-radius: 0;
  background-color: var(--color-background-default-secondary);
}
.popui-cal-day[data-state="start"],
.popui-cal-day[data-state="end"] {
  background-color: var(--color-background-accent);
  color: var(--color-foreground-inverse);
  font-weight: 600;
  box-shadow: 0 0 0 2px rgba(22, 153, 88, 0.12);
}
.popui-cal-day[data-outside] {
  color: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  pointer-events: none;
}

/* Detail rows (popui.DescriptionListItem with Inline/Actions) — console-ui-style
   label-on-left / value-on-right rows for side panels and drawers. Shipped
   here so any consuming app gets the styling without copying a <style> block. */
.popui-detail-row { display: flex; gap: 1.5rem; align-items: center; }
/* Stacked variant: label above the value. */
.popui-detail-row.popui-detail-stacked {
  flex-direction: column;
  align-items: stretch;
  gap: 0.25rem;
}
/* Stacked: the label sits flush left; the value keeps the value-wrap's base
   0.5rem left padding so the hover tint has breathing room around the text. */
.popui-detail-stacked > .popui-detail-label { min-width: 0; padding-left: 0; }
/* Stacked rows are shorter than the value-wrap's 2rem min-height, so center
   the value + hover action buttons vertically. A non-stacked row's taller
   content already fills the min-height, so it reads centered with flex-start;
   this gives stacked rows the same balanced look. The extra `.popui-detail-row`
   class keeps this ahead of the base value-wrap rule's `align-items: flex-start`
   regardless of source order. */
/* Stacked value cell: keep the 0.5rem left padding (the hover tint's
   breathing room) but pull the box left by the same amount, so the value
   text's left edge lines up exactly with the flush-left label while the
   tint bleeds into the gutter — the standard hover-pill alignment trick. */
.popui-detail-row.popui-detail-stacked > .popui-detail-value-wrap {
  align-items: center;
  margin-left: -0.5rem;
}

/* 16px icon button (ButtonSizeIconExtraSmall): icons ship at a fixed 16px
   (inline width/height on the wrapper), which would fill the bordered 16px box
   edge-to-edge. Scale the glyph to 12px so it reads as a centered icon with the
   same breathing room as the larger icon buttons. !important is needed to beat
   the icon's inline sizing. */
.popui-icon-xs > div,
.popui-icon-xs > div > svg { width: 0.75rem !important; height: 0.75rem !important; }
.popui-detail-row > .popui-detail-label {
  /* Fixed flex basis: a long label wraps inside its 148px column instead of
     growing and squeezing the value cell out of the row. */
  flex: 0 0 148px;
  min-width: 148px;
  overflow-wrap: break-word;
  color: var(--color-foreground-default-secondary);
  font-size: 0.875rem;
}
/* Stacked rows are a column layout, so the label spans the full width. */
.popui-detail-row.popui-detail-stacked > .popui-detail-label {
  flex: 0 0 auto;
}
.popui-detail-row > .popui-detail-value-wrap {
  flex: 1 1 0%;
  display: flex;
  gap: 0.375rem;
  align-items: flex-start;
  min-width: 0;
  min-height: 2rem;
  padding: 0.25rem 0.25rem 0.25rem 0.5rem;
  border-radius: 0.375rem;
}
.popui-detail-row > .popui-detail-value-wrap:hover {
  background-color: var(--color-background-default-secondary);
}
.popui-detail-value {
  flex: 1 1 0%;
  min-width: 0;
  color: var(--color-foreground);
  font-weight: 500;
  font-size: 0.875rem;
  overflow-x: auto;
}

/* Copyable value row: strip the copy Button's chrome so the value reads as
   plain text in line with the other rows, and reveal action buttons / copy
   icons only while the row is hovered. */
.popui-detail-copyable [data-button-copy] {
  justify-content: flex-start;
  padding-left: 0;
}
.popui-detail-copyable [data-button-copy]:hover {
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
}
.popui-detail-copyable [data-button-copy]:active {
  transform: none;
  box-shadow: none;
}
.popui-detail-copyable [data-copy-text] { font-family: var(--font-sans); }
.popui-detail-copyable { cursor: pointer; }
.popui-detail-copyable .popui-detail-action,
.popui-detail-copyable [data-copy-icon-duplicate],
.popui-detail-copyable [data-copy-icon-success] {
  opacity: 0;
  transition: opacity 150ms;
}
.popui-detail-copyable:hover .popui-detail-action,
.popui-detail-copyable:hover [data-copy-icon-duplicate],
.popui-detail-copyable:hover [data-copy-icon-success] {
  opacity: 1;
}
/* Card deck reorder mode — toggled by the CardDeckReorderButton on a
   Reorderable CardDeck. None of this can be expressed as Tailwind utilities:
   the drag handle is a masked pseudo-element, and the drag script owns the
   cards' transform, so the states around it have to be hand-written. */

/* Every card in a reorderable deck carries a collapsed drag handle, so that
   entering the mode has something to animate from — a pseudo-element created
   by the class change would pop in with no transition. It's drawn as a mask
   rather than a background image so it takes the icon-default colour token and
   follows the dark theme, and it never takes pointer events: the whole card is
   the grab target, the handle only says so. */
.popui-card-deck-sortable > [data-card] {
  position: relative;
  transition: padding-left 150ms ease;
}
.popui-card-deck-sortable > [data-card]::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 50%;
  width: 16px;
  height: 16px;
  opacity: 0;
  transform: translateY(-50%) translateX(-4px);
  transition: opacity 150ms ease, transform 150ms ease;
  pointer-events: none;
  background-color: var(--color-icon);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.5 11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1 0-1h11Zm0-3.5a.5.5 0 0 1 0 1h-11a.5.5 0 0 1 0-1h11Zm0-3.5a.5.5 0 0 1 0 1h-11a.5.5 0 0 1 0-1h11Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.5 11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1 0-1h11Zm0-3.5a.5.5 0 0 1 0 1h-11a.5.5 0 0 1 0-1h11Zm0-3.5a.5.5 0 0 1 0 1h-11a.5.5 0 0 1 0-1h11Z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.popui-card-deck-reordering > [data-card] {
  cursor: grab;
  /* Vertical drags belong to the deck, not to the scroller. */
  touch-action: none;
  transition: transform 150ms ease, padding-left 150ms ease;
  /* Room for the handle. A flat value rather than an addition, since the
     card's own padding is a Tailwind utility this can't read; it reads as a
     small indent for the usual p-2/p-3/p-4 cards. */
  padding-left: 32px;
}

/* The handle slides out of the left edge as the content makes way for it. */
.popui-card-deck-reordering > [data-card]::before {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* A card is a grab handle while reordering: its own links, controls and
   three-dot menus stop responding, and an anchor Card drops its hover
   border (its navigation is cancelled in JS, since the card itself must
   keep receiving pointer events). */
.popui-card-deck-reordering > [data-card] a,
.popui-card-deck-reordering > [data-card] button,
.popui-card-deck-reordering > [data-card] input,
.popui-card-deck-reordering > [data-card] select,
.popui-card-deck-reordering > [data-card] textarea,
.popui-card-deck-reordering > [data-card] [popovertarget] {
  pointer-events: none;
}
.popui-card-deck-reordering > a[data-card]:hover {
  border-color: var(--color-border);
}

/* The commit frame. The script reorders the cards and drops their offsets
   together here, two changes that cancel out — so they must not animate, or
   each displaced card slides a slot it has already travelled. Declared after
   the -reordering transition so it wins on source order. */
.popui-card-deck-settling > [data-card] {
  transition: none;
}

/* The card under the pointer tracks it 1:1 — no transition — and lifts above
   the cards it passes. */
.popui-card-deck-dragging > [data-card].popui-card-deck-card-dragging {
  cursor: grabbing;
  transition: none;
  position: relative;
  z-index: 1;
  box-shadow: 0 6px 16px rgb(0 0 0 / 0.12);
}

@media (prefers-reduced-motion: reduce) {
  .popui-card-deck-sortable > [data-card],
  .popui-card-deck-sortable > [data-card]::before,
  .popui-card-deck-reordering > [data-card] {
    transition: none;
  }
}