/* Micro components ported from React Bits (reactbits.dev) to plain CSS.
   Colors come from the tokens in styles.css, so each block follows light and dark mode.
   Motion rules sit at the bottom of each block under prefers-reduced-motion. */

.micro-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---- GlideSelect (React Bits, reactbits.dev) ---- */
.glide-select {
  --gs-surface: var(--surface);
  --gs-highlight: color-mix(in srgb, var(--ink) 9%, transparent);
  --gs-text: var(--ink);
  --gs-accent: var(--ink);
  --gs-radius: 12px;
  --gs-inner-radius: 8px;
  --gs-chip: 42px;
  --gs-row: 36px;
  --gs-font: 15px;
  --gs-pop: 180ms;
  --gs-pop-out: 120ms;
  --gs-glide: 220ms;
  --gs-origin: top left;
  --gs-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  position: relative;
  display: inline-block;
}
.glide-select[data-disabled] { opacity: 0.5; }
.glide-select__native {
  position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0;
  opacity: 0; overflow: hidden; clip: rect(0 0 0 0); pointer-events: none;
}
.glide-select__trigger {
  position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: 10px;
  min-width: 140px; height: var(--gs-chip); margin: 0; padding: 0 12px 0 14px;
  border: 1px solid var(--rule); border-radius: 8px;
  background: var(--gs-surface); color: var(--gs-text);
  font-family: inherit; font-size: var(--gs-font); font-weight: 500; line-height: 1;
  cursor: pointer; outline: none; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background-color 100ms ease, border-color 100ms ease, transform 160ms var(--gs-ease-out);
}
.glide-select__trigger:disabled { cursor: default; }
.glide-select__trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (hover: hover) and (pointer: fine) {
  .glide-select__trigger:not(:disabled):hover { border-color: var(--ink-3); }
}
.glide-select__trigger[aria-expanded='true'] { border-color: var(--ink-3); }
.glide-select__trigger:not(:disabled):active { transform: scale(0.97); }
.glide-select__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.glide-select[data-swap] .glide-select__label { animation: gs-swap 160ms ease; }
@keyframes gs-swap { from { opacity: 0.6; filter: blur(2px); } }
.glide-select__chevron {
  display: inline-flex; flex: none; color: var(--ink-3);
  transition: transform 200ms var(--gs-ease-out);
}
.glide-select__trigger[aria-expanded='true'] .glide-select__chevron { transform: rotate(180deg); }

.glide-select__menu {
  position: absolute; z-index: 30;
  width: max-content; min-width: 100%; max-width: min(340px, calc(100vw - 32px));
  padding: 4px; border-radius: var(--gs-radius);
  background: var(--gs-surface); border: 1px solid var(--rule);
  box-shadow: 0 14px 34px -10px rgba(12, 12, 15, 0.3), 0 2px 6px rgba(12, 12, 15, 0.08);
  transform-origin: var(--gs-origin);
  opacity: 0; transform: scale(0.95);
  transition: opacity var(--gs-pop) var(--gs-ease-out), transform var(--gs-pop) var(--gs-ease-out);
}
.glide-select__menu[data-state='open'] { opacity: 1; transform: none; }
.glide-select__menu[data-state='closed'] { transition-duration: var(--gs-pop-out); pointer-events: none; }
.glide-select__menu[data-side='bottom'] { top: calc(100% + 6px); }
.glide-select__menu[data-side='top'] { bottom: calc(100% + 6px); }
.glide-select__menu[data-align='left'] { left: 0; }
.glide-select__menu[data-align='right'] { right: 0; }
.glide-select__list { position: relative; display: grid; gap: 1px; touch-action: none; }
.glide-select__pill {
  position: absolute; top: 0; right: 0; left: 0; height: var(--gs-row);
  border-radius: var(--gs-inner-radius); background: var(--gs-highlight);
  opacity: 0; pointer-events: none;
  transition: transform var(--gs-glide) var(--gs-ease-out), opacity 150ms ease;
}
.glide-select__option {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 10px;
  height: var(--gs-row); padding: 0 10px 0 12px; border-radius: var(--gs-inner-radius);
  color: var(--gs-text); font-size: var(--gs-font); cursor: pointer;
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.glide-select__option[aria-selected='true'] { background: color-mix(in srgb, var(--gs-highlight) 60%, transparent); }
.glide-select__list[data-live] .glide-select__option[aria-selected='true'] { background: transparent; }
.glide-select__name { flex: 1 1 auto; min-width: 0; overflow: hidden; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.glide-select__check { display: inline-flex; flex: none; color: var(--gs-accent); visibility: hidden; }
.glide-select__check[data-on] { visibility: visible; }
@media (prefers-reduced-motion: reduce) {
  .glide-select__menu { transform: none !important; transition: none !important; }
  .glide-select__pill { transition: none !important; }
  .glide-select__chevron { transition: none; }
  .glide-select__trigger { transition: none; }
  .glide-select__trigger:not(:disabled):active { transform: none; }
  .glide-select[data-swap] .glide-select__label { animation: none; }
}

/* ---- RubberSegment (React Bits, reactbits.dev) ---- */
.rubber-segment {
  --rs-track: var(--surface-2);
  --rs-thumb: var(--btn-bg);
  --rs-ink: var(--ink);
  --rs-ink-active: var(--btn-ink);
  --rs-radius: 12px;
  --rs-inset: 3px;
  --rs-h: 42px;
  --rs-font: 14px;
  --rs-pad: 16px;
  --rs-min: 44px;
  --rs-idle: 0.7;
  --rs-hover: 0.95;
  --rs-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  position: relative;
  display: inline-grid; grid-auto-flow: column; grid-auto-columns: auto;
  width: fit-content; max-width: 100%; justify-self: start;
  vertical-align: middle; gap: 0; padding: var(--rs-inset);
  border: 0; border-radius: var(--rs-radius); background: var(--rs-track);
  font-family: inherit; touch-action: pan-y;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
.rubber-segment--sm { --rs-radius: 17px; --rs-h: 34px; --rs-font: 12px; --rs-pad: 13px; --rs-min: 0px; --rs-inset: 3px; }
.rubber-segment__item {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  height: calc(var(--rs-h) - var(--rs-inset) * 2); min-width: var(--rs-min);
  margin: 0; padding: 0 var(--rs-pad); border: 0; border-radius: calc(var(--rs-radius) - var(--rs-inset));
  background: none; color: var(--rs-ink); opacity: var(--rs-idle);
  font: inherit; font-size: var(--rs-font); font-weight: 600; line-height: 1; white-space: nowrap;
  cursor: pointer; outline: none;
  transition: opacity 160ms ease, transform 160ms var(--rs-ease-out);
}
.rubber-segment__item small { margin: 0; font-size: 0.86em; font-weight: 500; color: inherit; opacity: 0.75; }
.rubber-segment__item[aria-pressed='true'] { cursor: grab; }
.rubber-segment[data-held], .rubber-segment[data-held] .rubber-segment__item { cursor: grabbing; }
.rubber-segment__item[data-pressed] { transform: scale(0.96); }
.rubber-segment__item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .rubber-segment__item[aria-pressed='false']:hover { opacity: var(--rs-hover); }
}
.rubber-segment__thumb {
  position: absolute; inset: var(--rs-inset);
  display: grid; grid-auto-flow: column; grid-auto-columns: auto;
  background: var(--rs-thumb); color: var(--rs-ink-active); pointer-events: none;
}
.rubber-segment__copy { color: inherit; opacity: 1; cursor: default; }
@media (max-width: 480px) {
  .tabs.rubber-segment {
    display: grid; width: 100%; grid-auto-columns: minmax(0, 1fr);
    --rs-h: 52px; --rs-font: 12px; --rs-pad: 2px; --rs-min: 0px;
  }
  .tabs.rubber-segment .rubber-segment__thumb, [data-admin-tabs].rubber-segment .rubber-segment__thumb { grid-auto-columns: minmax(0, 1fr); }
  [data-admin-tabs].rubber-segment { display: grid; width: 100%; grid-auto-columns: minmax(0, 1fr); }
  .tabs.rubber-segment .rubber-segment__item { flex-direction: column; gap: 3px; }
  [data-admin-tabs].rubber-segment { --rs-h: 40px; --rs-font: 11px; --rs-pad: 0px; }
}
@media (prefers-reduced-motion: reduce) {
  .rubber-segment__item { transition: opacity 160ms ease; }
  .rubber-segment__item[data-pressed] { transform: none; }
}

/* ---- PulseHeart press, pulse and burst (React Bits, reactbits.dev), on the vote button ---- */
.vote { position: relative; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms cubic-bezier(0.23, 1, 0.32, 1); }
.vote:not(:disabled):active { transform: scale(0.97); }
.vote:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vote svg { overflow: visible; transform-origin: center; }
.vote[data-running] { transition: none; }
.vote__spark {
  position: absolute; left: 50%; top: 40%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px;
  border-radius: 50%; background: var(--accent); pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .vote { transition: none; }
  .vote:not(:disabled):active { transform: none; }
}

/* ---- StatusMark (React Bits, reactbits.dev) ---- */
.status-mark {
  --sm-size: 20px; --sm-stroke: 2; --sm-color: currentColor; --sm-done: #7ee2a8; --sm-error: #ff8f6b; --sm-fill: 0.06;
  --sm-draw: 240ms; --sm-muted: 0.55; --sm-check-delay: 120ms;
  --sm-ease-out: cubic-bezier(0.23, 1, 0.32, 1); --sm-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  position: relative; display: inline-flex; align-items: center; vertical-align: middle; line-height: 1;
}
.status-mark__glyph { flex: none; overflow: visible; color: var(--sm-color); transition: color 200ms ease; }
.status-mark[data-status='done'] .status-mark__glyph { color: var(--sm-done); }
.status-mark[data-status='failed'] .status-mark__glyph { color: var(--sm-error); }
.status-mark__track {
  fill: currentColor; stroke: currentColor; stroke-width: var(--sm-stroke); fill-opacity: 0; stroke-opacity: 0;
  transition: fill-opacity 180ms ease, stroke-opacity 200ms ease;
}
.status-mark[data-status='running'] .status-mark__track { stroke-opacity: 0.2; }
.status-mark[data-status='done'] .status-mark__track, .status-mark[data-status='failed'] .status-mark__track { fill-opacity: var(--sm-fill); }
.status-mark__ring { fill: none; stroke: currentColor; stroke-width: var(--sm-stroke); stroke-linecap: round; opacity: var(--sm-muted); transition: opacity 200ms ease; }
.status-mark[data-status='running'] .status-mark__ring, .status-mark[data-status='done'] .status-mark__ring, .status-mark[data-status='failed'] .status-mark__ring { opacity: 1; }
.status-mark__check, .status-mark__cross {
  fill: none; stroke: currentColor; stroke-width: var(--sm-stroke); stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1 2; stroke-dashoffset: 1.05; opacity: 0;
  transition: stroke-dashoffset 160ms var(--sm-ease-out), opacity 0ms linear 160ms;
}
.status-mark[data-status='done'] .status-mark__check, .status-mark[data-status='failed'] .status-mark__cross {
  stroke-dashoffset: 0; opacity: 1;
  transition: stroke-dashoffset var(--sm-draw) var(--sm-ease-out) var(--sm-check-delay), opacity 0ms linear var(--sm-check-delay);
}
@keyframes sm-breathe { 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) {
  .status-mark[data-indeterminate] .status-mark__ring { animation: sm-breathe 1400ms var(--sm-ease-in-out) infinite; }
  .status-mark__check, .status-mark__cross { stroke-dashoffset: 0; transition: opacity 200ms ease; }
}
/* Buttons that carry a StatusMark: the mark opens up beside the label when the state leaves idle. */
.btn-status:disabled { cursor: default; opacity: 1; }
.btn-status__mark { display: inline-grid; place-items: center; width: 18px; margin-right: 0; overflow: hidden; transition: width 200ms var(--sm-ease-out, cubic-bezier(0.23, 1, 0.32, 1)), margin 200ms var(--sm-ease-out, cubic-bezier(0.23, 1, 0.32, 1)), opacity 200ms ease; }
.btn-status[data-state='idle'] .btn-status__mark { width: 0; margin-right: -8px; opacity: 0; }
.btn-status__label.is-swapping { animation: gs-swap 160ms ease; }
@media (prefers-reduced-motion: reduce) {
  .btn-status__mark { transition: none; }
  .btn-status__label.is-swapping { animation: none; }
}

/* ---- SwipeToast (React Bits, reactbits.dev) ---- */
.swipe-toasts {
  position: fixed; right: 32px; bottom: 32px; z-index: 70;
  display: flex; flex-direction: column; width: min(356px, calc(100vw - 64px)); pointer-events: none;
}
@media (max-width: 767px) {
  .swipe-toasts { left: 16px; right: 16px; bottom: 88px; width: auto; }
}
.swipe-toast {
  --st-bg: var(--ink); --st-ink: var(--bg); --st-fuse: var(--amber);
  --st-slide: 400ms; --st-gap: 10px; --st-radius: 12px; --st-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  display: grid; grid-template-rows: 1fr; width: 100%; pointer-events: auto;
  color: var(--st-ink); font-size: 14px; line-height: 1.45;
  transition: grid-template-rows var(--st-slide) var(--st-ease-out);
}
.swipe-toast[data-mounted='false'], .swipe-toast[data-phase='closing'], .swipe-toast[data-phase='gone'] { grid-template-rows: 0fr; }
.swipe-toast[data-phase='closing'] { transition-duration: calc(var(--st-slide) * 0.7); }
.swipe-toast[data-phase='gone'] { transition-duration: 200ms; }
.swipe-toast__gate { min-height: 0; }
.swipe-toast__lift {
  margin-top: var(--st-gap); opacity: 1; transform: translateY(0);
  transition: transform var(--st-slide) var(--st-ease-out), opacity calc(var(--st-slide) * 0.6) ease;
}
.swipe-toast[data-mounted='false'] .swipe-toast__lift { opacity: 0; transform: translateY(100%); }
.swipe-toast[data-phase='closing'] .swipe-toast__lift {
  opacity: 0; transform: translateY(100%);
  transition: transform calc(var(--st-slide) * 0.7) var(--st-ease-out), opacity calc(var(--st-slide) * 0.5) ease;
}
.swipe-toast[data-phase='gone'] .swipe-toast__lift { opacity: 0; visibility: hidden; transform: translateY(100%); }
.swipe-toast[data-instant] .swipe-toast__lift, .swipe-toast[data-instant] { transition-duration: 0s; }
.swipe-toast__card {
  position: relative; display: flex; align-items: center; gap: 8px; padding: 14px 16px;
  border-radius: var(--st-radius); overflow: hidden; background: var(--st-bg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 8px 24px -6px rgba(0, 0, 0, 0.28);
  cursor: grab; outline: none; touch-action: none;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
.swipe-toast__card[data-swiping] { cursor: grabbing; }
.swipe-toast__card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.swipe-toast__body { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
.swipe-toast__title { font-weight: 500; }
.swipe-toast__fuse {
  position: absolute; right: 0; bottom: 0; left: 0; height: 2px; transform-origin: left center; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--st-fuse) 18%, transparent) 9%, color-mix(in srgb, var(--st-fuse) 50%, transparent) 18%, color-mix(in srgb, var(--st-fuse) 84%, transparent) 28%, var(--st-fuse) 38%, var(--st-fuse) 62%, color-mix(in srgb, var(--st-fuse) 84%, transparent) 72%, color-mix(in srgb, var(--st-fuse) 50%, transparent) 82%, color-mix(in srgb, var(--st-fuse) 18%, transparent) 91%, transparent 100%);
}
@media (prefers-reduced-motion: reduce) {
  .swipe-toast, .swipe-toast[data-phase] { transition: none; }
  .swipe-toast__lift { transform: none !important; transition: opacity 200ms ease; }
  .swipe-toast__fuse { display: none; }
}

/* ---- ThoughtLine (React Bits, reactbits.dev) ---- */
.thought-line {
  --tl-ease-out: cubic-bezier(0.23, 1, 0.32, 1); --tl-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --tl-font: 14px; --tl-color: var(--ink-3); --tl-glyph: var(--accent); --tl-settle: 350ms; --tl-blur: 2px; --tl-shimmer: 1.8s;
  --tl-done: 0.85; --tl-timer: 0.7;
  display: inline-flex; flex-direction: column; align-items: flex-start;
  color: var(--tl-color); font-size: var(--tl-font); font-weight: 500; line-height: 1.2;
}
.thought-line__head { position: relative; display: inline-flex; align-items: center; gap: 0.3em; white-space: nowrap; }
.thought-line__glyph { display: inline-flex; flex: none; width: 1.1em; height: 1.1em; margin-right: 0.2em; color: var(--tl-glyph); }
.thought-line__glyph svg { display: block; width: 100%; height: 100%; }
.thought-line[data-working] .thought-line__glyph { animation: thought-line-breath 1.6s var(--tl-ease-in-out) infinite; }
.thought-line:not([data-working]) .thought-line__glyph { opacity: 0.55; transition: opacity var(--tl-settle) var(--tl-ease-out); }
@keyframes thought-line-breath { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
.thought-line__label { display: inline-grid; }
.thought-line__text {
  grid-area: 1 / 1; width: max-content; opacity: 0; filter: blur(var(--tl-blur));
  transition: opacity var(--tl-settle) var(--tl-ease-out), filter var(--tl-settle) var(--tl-ease-out);
}
.thought-line__text[data-active] { opacity: 1; filter: blur(0); }
.thought-line__text--done[data-active] { opacity: var(--tl-done); }
.thought-line__breath { display: inline-block; }
.thought-line[data-working] .thought-line__breath[data-shimmer] {
  background: linear-gradient(100deg, color-mix(in srgb, var(--tl-color) 50%, transparent) 30%, var(--ink) 50%, color-mix(in srgb, var(--tl-color) 50%, transparent) 70%);
  background-size: 250% 100%; background-position: 125% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: thought-line-shimmer var(--tl-shimmer) linear infinite;
}
@keyframes thought-line-shimmer { to { background-position: -125% 0; } }
.thought-line__timer {
  font-variant-numeric: tabular-nums; opacity: var(--tl-timer);
  transition: opacity var(--tl-settle) ease, transform var(--tl-settle) var(--tl-ease-in-out);
}
.thought-line__timer[data-done] { opacity: var(--tl-done); }
@media (prefers-reduced-motion: reduce) {
  .thought-line[data-working] .thought-line__glyph { animation: none; }
  .thought-line__text { filter: none !important; transition: opacity var(--tl-settle) ease; }
  .thought-line__timer { transition: opacity var(--tl-settle) ease; }
}
.thinking { margin: -6px 0; }

/* ---- LatticeLoader (React Bits, reactbits.dev) ---- */
.lattice-loader {
  --ll-n: 3; --ll-cell: 7px; --ll-gap: 2px; --ll-font: 15px; --ll-color: currentColor;
  --ll-idle: 0.15; --ll-peak: 1; --ll-cycle: 864ms;
  --ll-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  position: relative; display: inline-flex; align-items: center; gap: calc(var(--ll-font) * 0.625);
  font-family: inherit; font-size: var(--ll-font); line-height: 1;
}
.lattice-loader__grid { display: grid; flex: none; grid-template-columns: repeat(var(--ll-n), var(--ll-cell)); gap: var(--ll-gap); }
.lattice-loader__cell { width: var(--ll-cell); height: var(--ll-cell); border-radius: 50%; background: var(--ll-color); opacity: var(--ll-idle); animation: lattice-on var(--ll-cycle) var(--ll-ease-in-out) infinite; }
.lattice-loader__cell[data-hole] { animation: none; opacity: calc(var(--ll-idle) * 0.47); }
.lattice-loader__label { font-weight: 500; }
@keyframes lattice-on {
  0%, 100% { opacity: var(--ll-idle); }
  18%, 42% { opacity: var(--ll-peak); }
  62% { opacity: var(--ll-idle); }
}
@media (prefers-reduced-motion: reduce) {
  .lattice-loader__cell { animation: none !important; opacity: 0.5; }
  .lattice-loader__cell[data-hole] { opacity: 0.15; }
}
.empty .lattice-loader { color: var(--ink-3); }
.dark .glide-select__menu { background: var(--surface-2); box-shadow: 0 14px 34px -10px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.4); }