/* ---- Accordion ---- */
/* Accordion — Honeycomb / Accordion (Figma set 21119:34264, page 1:434).
   Variants read: 22:1330 Basic (default), 21119:34265 Border.
   Every value below is a Honeycomb token. */

.hc-accordion {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  font-family: var(--font-sans);
  color: var(--base-foreground);
}

/* Basic: no container chrome at all. Each item draws its own hairline, which
   makes the whole stack read as a set of rules across the page. */

/* Border: the stack is boxed, so the items are inset and the last hairline
   would double up with the container's own edge. */
.hc-accordion--border {
  overflow: hidden;
  border: var(--border-width-border) solid var(--base-border);
  border-radius: var(--border-radius-rounded-2xl);
}

.hc-accordion--border > .hc-accordion-item {
  padding-left: var(--spacing-4);
  padding-right: var(--spacing-4);
}

.hc-accordion--border > .hc-accordion-item:last-child {
  border-bottom: 0;
}

/* ---- AccordionItem ---- */
/* AccordionItem — Honeycomb / Accordion / AccordionItem
   (Figma set 22:516, page "Accordion" 1:434). Variants read:
   22:371 Off/Default (default), 22:373 On/Default, 980:3651 Off/Hover,
   18434:583 Off/Focus, 18435:759 Off/Disabled.
   Every value below is a Honeycomb token. */

.hc-accordion-item {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  border-bottom: var(--border-width-border) solid var(--base-border);
  font-family: var(--font-sans);
  color: var(--base-foreground);
}

/* Figma drops the hairline while the trigger is focused so the ring is not
   cut into by the rule beneath it. */
.hc-accordion-item--focus,
.hc-accordion-item:focus-within {
  border-bottom-color: transparent;
}

.hc-accordion-item__heading {
  margin: 0;
  font: inherit;
  font-weight: inherit;
  color: inherit;
}

.hc-accordion-item__trigger {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-2);
  width: 100%;
  padding: var(--spacing-3) 0;
  border: 0;
  border-radius: var(--border-radius-rounded-md);
  background-color: transparent;
  color: inherit;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.hc-accordion-item__label {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

/* Hover thickens and underlines the label — Figma's
   text-sm/leading-normal/underlined (medium), which is SemiBold. */
.hc-accordion-item__trigger:hover:not(:disabled) .hc-accordion-item__label,
.hc-accordion-item--hover .hc-accordion-item__label {
  font-weight: 600;
  text-decoration: underline;
}

.hc-accordion-item__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: inherit;
  transition: transform 150ms ease;
}

.hc-accordion-item__icon > svg {
  display: block;
  width: 100%;
  height: 100%;
}

.hc-accordion-item--active .hc-accordion-item__icon {
  transform: rotate(180deg);
}

/* Figma draws focus as a 3px spread of custom/outline (base-ring at 50%).
   A full base-ring hairline is added under it, as elsewhere in Honeycomb,
   because the 50% ring alone does not clear 3:1 on base-background. */
.hc-accordion-item__trigger:focus-visible,
.hc-accordion-item--focus .hc-accordion-item__trigger {
  outline: var(--border-width-border) solid var(--base-ring);
  outline-offset: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--base-ring) 50%, transparent);
}

.hc-accordion-item__trigger:disabled {
  cursor: default;
}

.hc-accordion-item--disabled .hc-accordion-item__trigger,
.hc-accordion-item__trigger:disabled {
  opacity: 0.5;
}

.hc-accordion-item__panel {
  box-sizing: border-box;
  width: 100%;
  padding-bottom: var(--spacing-4);
  color: var(--base-foreground);
  text-align: left;
}

/* ---- Alert ---- */
/* Honeycomb — Alert
   Figma eri86fUvOPsnYIL1G6aiBc, set 26:160.
   Read: 21:986 (Variant=Default), 17096:4415 (Variant=Destructive).

   Both variants share the shell exactly: base/card fill, a 1px base/border
   stroke, 16px padding and a rounded-2xl corner. The ONLY thing Destructive
   changes is the colour of the text block — Figma sets base/destructive on the
   title-and-description Div and leaves the fill and the border alone.

   That is the right call and it is kept: base/destructive-foreground fails
   against the dark theme's destructive red, so a filled destructive banner
   would be unreadable in dark. Destructive red as TEXT on the neutral card
   passes in both themes. See the README. */

.hc-alert {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  width: 100%;
  padding: var(--spacing-4);
  border: var(--border-width-border) solid var(--base-border);
  border-radius: var(--border-radius-rounded-2xl);
  background-color: var(--base-card);
  color: var(--base-foreground);
  font-family: var(--font-sans);
}

.hc-alert__flex {
  display: flex;
  flex: 1 0 0;
  align-items: flex-start;
  gap: var(--spacing-2);
  min-width: 0;
}

/* Figma nudges the 16px icon down 2px so its optical centre sits on the
   title's cap height rather than on the line box. */
.hc-alert__icon {
  display: flex;
  flex: none;
  align-items: flex-start;
  padding-top: var(--spacing-0-5);
}

.hc-alert__icon > svg,
.hc-alert__icon > img {
  display: block;
  width: var(--spacing-4);
  height: var(--spacing-4);
}

.hc-alert__text {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--spacing-0-5);
  min-width: 0;
  word-break: break-word;
}

/* Figma clips the title to one line with an ellipsis. */
.hc-alert__title {
  width: 100%;
  overflow: hidden;
  color: var(--base-foreground);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hc-alert__description {
  width: 100%;
  color: var(--base-muted-foreground);
}

.hc-alert__action {
  display: flex;
  flex: none;
  align-items: center;
}

/* ---------- Variant: destructive ---------- */

/* The icon inherits currentColor, so colouring the root turns the mark red
   too — which is what the Figma node draws. */
.hc-alert--destructive {
  color: var(--base-destructive);
}

.hc-alert--destructive .hc-alert__title,
.hc-alert--destructive .hc-alert__description {
  color: var(--base-destructive);
}

/* ---- AlertDialog ---- */
/* AlertDialog — Honeycomb / Alert Dialog (Figma set 83:122, page 22:307).
   Variants read: 83:120 default/No, 21119:62444 default/Yes,
   83:117 sm/No. Every value below is a Honeycomb token. */

.hc-alert-dialog {
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  overflow: hidden;
  border: var(--border-width-border) solid var(--base-border);
  border-radius: var(--border-radius-rounded-2xl);
  background-color: var(--base-background);
  color: var(--base-foreground);
  font-family: var(--font-sans);
}

/* Figma: 384px on default, 320px on sm. Applied as a cap. */
.hc-alert-dialog--default { max-width: 384px; }
.hc-alert-dialog--sm { max-width: 320px; }

.hc-alert-dialog__header {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  padding: var(--spacing-4);
}

/* default: media beside the text, everything left-aligned. */
.hc-alert-dialog--default .hc-alert-dialog__header {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--spacing-4);
}

/* sm: media above the text, everything centred. */
.hc-alert-dialog--sm .hc-alert-dialog__header {
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-3);
}

.hc-alert-dialog__media {
  box-sizing: border-box;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: var(--border-radius-rounded-md);
  background-color: var(--base-muted);
  color: var(--base-foreground);
}

.hc-alert-dialog__media > svg,
.hc-alert-dialog__media > img {
  display: block;
  width: 24px;
  height: 24px;
}

/* Figma tints the destructive media well with destructive at 10% and sets
   the glyph in destructive itself — the same recipe Button's destructive
   variant uses. */
.hc-alert-dialog--destructive .hc-alert-dialog__media {
  background-color: color-mix(in srgb, var(--base-destructive) 10%, transparent);
  color: var(--base-destructive);
}

.hc-alert-dialog__text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-1-5);
  min-width: 0;
}

.hc-alert-dialog--sm .hc-alert-dialog__text {
  width: 100%;
  text-align: center;
}

.hc-alert-dialog__title {
  margin: 0;
  width: 100%;
  color: var(--base-foreground);
}

.hc-alert-dialog__description {
  margin: 0;
  width: 100%;
  color: var(--base-muted-foreground);
}

.hc-alert-dialog__body {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  padding: 0 var(--spacing-4) var(--spacing-4);
}

.hc-alert-dialog__footer {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-2);
  width: 100%;
  padding: var(--spacing-4);
  border-top: var(--border-width-border) solid var(--base-border);
  background-color: color-mix(in srgb, var(--base-muted) 50%, var(--base-background));
}

/* default right-aligns the pair; sm splits the full width between them. */
.hc-alert-dialog--default .hc-alert-dialog__footer {
  justify-content: flex-end;
}

.hc-alert-dialog--sm .hc-alert-dialog__footer > * {
  flex: 1 1 0;
  min-width: 0;
}

/* ---- AreaChart ---- */
/* Honeycomb — AreaChart
   Read from Figma eri86fUvOPsnYIL1G6aiBc, set 517:111675,
   default variant Type=Basic, Gradient=No 482:8366 (293x246).

   The frame is a column: the plot, a 36px gap, then the legend row. The band
   is the series colour at half strength with a 2px stroke of the same colour
   over its top edge; grid rules are base-border at border-width/border; the
   x labels are text/xs at weight 400 in base-muted-foreground. */

.hc-area-chart {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Figma's gap between plot and legend is 36px. Honeycomb's spacing scale
     steps 32 -> 48, so no variable carries it; kept as a literal. */
  gap: 36px;
  width: 100%;
  font-family: var(--font-sans);
}

.hc-area-chart__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.hc-area-chart__grid {
  stroke: var(--base-border);
  stroke-width: var(--border-width-border);
  shape-rendering: crispEdges;
}

/* Figma bakes the band's transparency into a flattened vector rather than
   binding an opacity variable; measured off the exported fill it is half the
   series colour, which is what is used here. The gradient variant carries its
   own opacity in the gradient stops, so it is left alone. */
.hc-area-chart__fill {
  fill-opacity: 0.5;
  stroke: none;
}

.hc-area-chart__fill--gradient {
  fill-opacity: 1;
}

.hc-area-chart__stroke {
  fill: none;
  /* 2px is border-width/border-2, the only 2px value Honeycomb binds. */
  stroke-width: var(--border-width-border-2);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hc-area-chart__dot {
  stroke: var(--base-background);
  /* 2px is border-width/border-2, the only 2px value Honeycomb binds. */
  stroke-width: var(--border-width-border-2);
}

.hc-area-chart__label {
  fill: var(--base-muted-foreground);
}

.hc-area-chart__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: var(--spacing-4);
}

.hc-area-chart__legend-item {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: var(--spacing-1-5);
}

/* Figma's rounded-xs (2px) is not in this token set; rounded-md is the nearest
   bound value and draws the 8px square as a dot. See the README. */
.hc-area-chart__swatch {
  flex: none;
  width: var(--spacing-2);
  height: var(--spacing-2);
  border-radius: var(--border-radius-rounded-md);
  background-color: var(--base-chart-1);
}

.hc-area-chart__legend-label {
  color: var(--base-foreground);
  white-space: nowrap;
}

/* ---- AspectRatio ---- */
/* Honeycomb — Aspect Ratio
   Figma eri86fUvOPsnYIL1G6aiBc, set 28:1540.
   Read: 28:1669 (Ratio=1 / 1), the default variant. The other sixteen nodes
   (28:1647 4/3, 28:1602 16/9, 28:1577 21/9, 28:1568 9/21 and the rest) are the
   same 240px-wide frame at a different height — 240x240, 240x180, 240x135,
   240x102.857, 240x560 — with the identical child: an image pinned to all four
   edges and object-fit: cover.

   Because the seventeen nodes differ only in their proportion, Ratio is a
   string prop here rather than seventeen variants. The component therefore
   carries no ratio rules at all; the value goes straight to the CSS
   aspect-ratio property.

   No fill, no border, no radius: Figma binds none. Anything the consumer wants
   there is theirs to add. */

.hc-aspect-ratio {
  box-sizing: border-box;
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
}

/* Figma pins the child to all four edges and covers, so a source whose own
   proportion differs is cropped rather than letterboxed. */
.hc-aspect-ratio > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
}

.hc-aspect-ratio__image,
.hc-aspect-ratio > img,
.hc-aspect-ratio > video {
  display: block;
  object-fit: cover;
  pointer-events: none;
}

/* ---- Avatar ---- */
/* Avatar — Honeycomb. Figma set 17100:29935, default variant 17378:86689. */

.hc-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  vertical-align: middle;
  box-sizing: border-box;
  border-radius: var(--border-radius-rounded-full);
  background-color: var(--base-muted);
  color: var(--base-foreground);
  font-family: var(--font-sans);
}

/* Box sizes, read from the Figma set.
   40px (lg) has no Honeycomb spacing token, so it stays a literal. */
.hc-avatar--xl {
  width: var(--spacing-12);
  height: var(--spacing-12);
}

.hc-avatar--lg {
  width: 40px;
  height: 40px;
}

.hc-avatar--default {
  width: var(--spacing-8);
  height: var(--spacing-8);
}

.hc-avatar--sm {
  width: var(--spacing-6);
  height: var(--spacing-6);
}

.hc-avatar--xs {
  width: var(--spacing-5);
  height: var(--spacing-5);
}

.hc-avatar__body {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius-rounded-full);
  overflow: hidden;
}

/* Type = Image */
.hc-avatar__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--border-radius-rounded-full);
}

/* Type = Fallback */
.hc-avatar__fallback {
  display: block;
  width: 100%;
  text-align: center;
  color: var(--base-foreground);
  -webkit-user-select: none;
  user-select: none;
  overflow: hidden;
  white-space: nowrap;
}

/* Type = Icon — the glyph is half the box at every size. */
.hc-avatar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--base-foreground);
}

.hc-avatar__icon > svg,
.hc-avatar__icon > img {
  display: block;
  width: 100%;
  height: 100%;
}

.hc-avatar--xl .hc-avatar__icon {
  width: var(--spacing-6);
  height: var(--spacing-6);
}

.hc-avatar--lg .hc-avatar__icon {
  width: var(--spacing-5);
  height: var(--spacing-5);
}

.hc-avatar--default .hc-avatar__icon {
  width: var(--spacing-4);
  height: var(--spacing-4);
}

.hc-avatar--sm .hc-avatar__icon {
  width: var(--spacing-3);
  height: var(--spacing-3);
}

.hc-avatar--xs .hc-avatar__icon {
  width: var(--spacing-2-5);
  height: var(--spacing-2-5);
}

/* Badge slot — bottom-right, outside the clipped body. */
.hc-avatar__badge {
  position: absolute;
  right: 0;
  bottom: 0;
  display: inline-flex;
  line-height: 0;
}

/* ---- AvatarBadge ---- */
/* AvatarBadge — Honeycomb. Figma set 21122:16180, default variant 21122:16179. */

.hc-avatar-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: var(--border-radius-rounded-full);
  border: var(--border-width-border-2) solid var(--base-background);
}

/* Box sizes, read from the Figma set. */
.hc-avatar-badge--2 {
  width: var(--spacing-2);
  height: var(--spacing-2);
}

.hc-avatar-badge--2-5 {
  width: var(--spacing-2-5);
  height: var(--spacing-2-5);
}

.hc-avatar-badge--3 {
  width: var(--spacing-3);
  height: var(--spacing-3);
}

/* Type = Default — the presence dot. */
.hc-avatar-badge--default {
  background-color: var(--base-chart-2);
}

/* Type = Icon — a glyph on the primary fill. */
.hc-avatar-badge--icon {
  background-color: var(--base-primary);
  color: var(--base-primary-foreground);
}

/* The glyph is a fixed 8px at all three sizes, clipped by the box at size 2. */
.hc-avatar-badge__icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--spacing-2);
  height: var(--spacing-2);
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hc-avatar-badge__icon > svg,
.hc-avatar-badge__icon > img {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---- AvatarGroup ---- */
/* AvatarGroup — Honeycomb / Avatar Group (Figma 17100:83077) */

.hc-avatar-group {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  font-family: var(--font-sans);
}

/*
 * Every face carries a 2px ring in the page ground so the overlap reads as
 * separate circles. The ring is part of the box, exactly as in Figma.
 */
.hc-avatar-group__slot {
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: var(--border-width-border-2) solid var(--base-background);
  border-radius: var(--border-radius-rounded-full);
  background-color: var(--base-muted);
  color: var(--base-foreground);
}

/* Faces overlap by 8px; the last one closes the stack. */
.hc-avatar-group__slot + .hc-avatar-group__slot {
  margin-left: calc(var(--spacing-2) * -1);
}

/* Box sizes follow the Avatar ramp. 40px (lg) has no spacing token. */
.hc-avatar-group--xl .hc-avatar-group__slot {
  width: var(--spacing-12);
  height: var(--spacing-12);
}

.hc-avatar-group--lg .hc-avatar-group__slot {
  width: 40px;
  height: 40px;
}

.hc-avatar-group--default .hc-avatar-group__slot {
  width: var(--spacing-8);
  height: var(--spacing-8);
}

.hc-avatar-group--sm .hc-avatar-group__slot {
  width: var(--spacing-6);
  height: var(--spacing-6);
}

.hc-avatar-group--xs .hc-avatar-group__slot {
  width: var(--spacing-5);
  height: var(--spacing-5);
}

.hc-avatar-group__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--border-radius-rounded-full);
}

.hc-avatar-group__initials {
  display: block;
  width: 100%;
  color: var(--base-foreground);
  text-align: center;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}

/*
 * The overflow chip. Figma tints the extra faces with a raw indigo that has no
 * Honeycomb token and would not clear 4.5:1 against its label, so the count
 * sits on the muted ground with the plain foreground on it instead.
 */
.hc-avatar-group__slot--overflow {
  background-color: var(--base-muted);
}

.hc-avatar-group__count {
  display: block;
  width: 100%;
  color: var(--base-foreground);
  text-align: center;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  -webkit-user-select: none;
  user-select: none;
}

/* A consumer-supplied Avatar fills its slot and keeps the round clip. */
.hc-avatar-group__slot > * {
  border-radius: var(--border-radius-rounded-full);
}

/* ---- Badge ---- */
/* Honeycomb — Badge
   Read from Figma eri86fUvOPsnYIL1G6aiBc, set 26:169.
   Default states: 23:1001 default, 26:170 secondary, 26:181 outline,
   21123:44960 ghost, 26:185 destructive, 18435:7511 verified.
   Hover states: 296:4996, 21123:47817, 21123:44985, 21123:45123, 296:5000,
   18435:7515. Focus states: 991:18657, 991:18656, 991:18655, 21123:44964,
   991:18654, 18435:7519. Every one was opened; none is inferred.

   Every variant except ghost carries a 1px stroke whose strokeAlign is INSIDE
   (read off the nodes, not guessed), so Figma draws it within the frame and the
   chip measures 24px tall — 20px for ghost, which has no stroke at all and
   2px of vertical padding. An inset box-shadow reproduces an inside stroke
   exactly; a real `border` would push the box out to 26px. */

.hc-badge {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-1);
  font-family: var(--font-sans);
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--border-radius-rounded-full);
  background-color: transparent;
  color: var(--base-foreground);
  white-space: nowrap;
  vertical-align: middle;
  transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

.hc-badge__label {
  display: inline-block;
}

/* The icon slot is Figma's 12px IconPlaceholder (height/h-3). */
.hc-badge__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--spacing-3);
  height: var(--spacing-3);
}

.hc-badge__icon > svg,
.hc-badge__icon > img {
  display: block;
  width: 100%;
  height: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .hc-badge { transition: none; }
}

/* ---------- Variant: default ---------- */

.hc-badge[data-variant="default"] {
  background-color: var(--base-primary);
  color: var(--base-primary-foreground);
}

/* Hover lays Figma's alpha/80 over the fill. That variable is white at 20% in
   light and #0a0a0a at 20% in dark — exactly base-background at 20%. */
.hc-badge[data-variant="default"]:hover,
.hc-badge[data-variant="default"].hc-badge--is-hover {
  background-color: color-mix(in srgb, var(--base-background) 20%, var(--base-primary));
}

/* ---------- Variant: secondary ---------- */

.hc-badge[data-variant="secondary"] {
  background-color: var(--base-secondary);
  color: var(--base-secondary-foreground);
}

.hc-badge[data-variant="secondary"]:hover,
.hc-badge[data-variant="secondary"].hc-badge--is-hover {
  background-color: color-mix(in srgb, var(--base-background) 20%, var(--base-secondary));
}

/* ---------- Variant: outline ---------- */

.hc-badge[data-variant="outline"] {
  background-color: var(--base-background);
  color: var(--base-foreground);
  box-shadow: inset 0 0 0 var(--border-width-border) var(--base-border);
}

/* Hover fills with muted and drops the label to muted-foreground; the border
   colour does not change. */
.hc-badge[data-variant="outline"]:hover,
.hc-badge[data-variant="outline"].hc-badge--is-hover {
  background-color: var(--base-muted);
  color: var(--base-muted-foreground);
}

/* ---------- Variant: ghost ---------- */
/* No fill and no stroke, and 2px of vertical padding rather than 4, so the
   chip sits 20px tall. */

.hc-badge[data-variant="ghost"] {
  background-color: transparent;
  color: var(--base-foreground);
  padding-top: var(--spacing-0-5);
  padding-bottom: var(--spacing-0-5);
}

.hc-badge[data-variant="ghost"]:hover,
.hc-badge[data-variant="ghost"].hc-badge--is-hover {
  background-color: var(--base-muted);
  color: var(--base-muted-foreground);
}

/* ---------- Variant: destructive ---------- */

.hc-badge[data-variant="destructive"] {
  background-color: color-mix(in srgb, var(--base-destructive) 10%, transparent);
  color: var(--base-destructive);
}

/* Figma's fill is custom/destructive\10 dark:destructive\20 — the tint is 10%
   in light but 20% in dark. */
:root[data-theme="dark"] .hc-badge[data-variant="destructive"] {
  background-color: color-mix(in srgb, var(--base-destructive) 20%, transparent);
}

/* Hover is the solid destructive under alpha/20 — base-background at 80%. */
.hc-badge[data-variant="destructive"]:hover,
.hc-badge[data-variant="destructive"].hc-badge--is-hover {
  background-color: color-mix(in srgb, var(--base-background) 80%, var(--base-destructive));
}

/* ---------- Variant: verified ---------- */

/* Figma paints this label with the TailwindCSS white constant, which holds the
   same value in both themes. base-primary-foreground is the wrong stand-in: it
   flips to #171717 in dark and would drop near-black onto the teal fill.
   base-destructive-foreground is the library's only single near-white
   (#fef2f2 in both themes), so it carries that literal white here. */
.hc-badge[data-variant="verified"] {
  background-color: var(--base-chart-2);
  color: var(--base-destructive-foreground);
}

/* The hover node is pixel-identical to the default one: chart-2, no overlay. */
.hc-badge[data-variant="verified"]:hover,
.hc-badge[data-variant="verified"].hc-badge--is-hover {
  background-color: var(--base-chart-2);
}

/* ---------- Focus ---------- */

/* Figma swaps the chip's own inside stroke to custom/outline — base-ring at
   50% — and adds a 1px Ring inset -1px at the same 50%. That is two 1px lines
   straddling the chip edge, not a single 3px ring. */
.hc-badge:focus-visible,
.hc-badge.hc-badge--is-focus {
  outline: none;
  box-shadow:
    inset 0 0 0 var(--border-width-border) color-mix(in srgb, var(--base-ring) 50%, transparent),
    0 0 0 var(--border-width-border) color-mix(in srgb, var(--base-ring) 50%, transparent);
}

/* Ghost and destructive carry no stroke even when focused (nodes 21123:44964
   and 991:18654), so only the outer ring shows on those two. */
.hc-badge[data-variant="ghost"]:focus-visible,
.hc-badge[data-variant="ghost"].hc-badge--is-focus,
.hc-badge[data-variant="destructive"]:focus-visible,
.hc-badge[data-variant="destructive"].hc-badge--is-focus {
  box-shadow: 0 0 0 var(--border-width-border) color-mix(in srgb, var(--base-ring) 50%, transparent);
}

/* ---- BadgeNumber ---- */
/* Honeycomb — BadgeNumber
   Read from Figma eri86fUvOPsnYIL1G6aiBc, set 17100:10130.
   Default states: 17100:10135 default, 17100:10147 secondary, 17100:10153
   outline, 21123:52936 ghost, 17100:10159 destructive.
   Hover states: 17100:10141, 21123:50432, 21123:52925, 21123:52938,
   17100:10165. Focus states: 17100:10173, 17100:10183, 17100:10193,
   21123:52940, 17100:10203. Every one was opened; none is inferred.

   Fixed 20px tall, 20px minimum wide, so a one-digit count is a circle and a
   longer one grows into a pill. Each variant except ghost carries a 1px stroke
   whose strokeAlign is INSIDE (read off the nodes), so Figma draws it within
   the frame and the counter stays 20px; an inset box-shadow reproduces that,
   where a real `border` would push it out to 22px. */

.hc-badge-number {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-1);
  font-family: var(--font-sans);
  height: var(--spacing-5);
  min-width: var(--spacing-5);
  padding-right: var(--spacing-1);
  padding-left: var(--spacing-1);
  border-radius: var(--border-radius-rounded-full);
  background-color: transparent;
  color: var(--base-foreground);
  overflow: hidden;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
  transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

.hc-badge-number__label {
  display: inline-block;
}

@media (prefers-reduced-motion: reduce) {
  .hc-badge-number { transition: none; }
}

/* ---------- Variant: default ---------- */

.hc-badge-number[data-variant="default"] {
  background-color: var(--base-primary);
  color: var(--base-primary-foreground);
}

/* Hover lays Figma's alpha/80 over the fill. That variable is white at 20% in
   light and #0a0a0a at 20% in dark — exactly base-background at 20%. */
.hc-badge-number[data-variant="default"]:hover,
.hc-badge-number[data-variant="default"].hc-badge-number--is-hover {
  background-color: color-mix(in srgb, var(--base-background) 20%, var(--base-primary));
}

/* ---------- Variant: secondary ---------- */

.hc-badge-number[data-variant="secondary"] {
  background-color: var(--base-secondary);
  color: var(--base-secondary-foreground);
}

.hc-badge-number[data-variant="secondary"]:hover,
.hc-badge-number[data-variant="secondary"].hc-badge-number--is-hover {
  background-color: color-mix(in srgb, var(--base-background) 20%, var(--base-secondary));
}

/* ---------- Variant: outline ---------- */

.hc-badge-number[data-variant="outline"] {
  background-color: var(--base-background);
  color: var(--base-foreground);
  box-shadow: inset 0 0 0 var(--border-width-border) var(--base-border);
}

/* Hover fills with muted and drops the digit to muted-foreground; the border
   colour does not change. */
.hc-badge-number[data-variant="outline"]:hover,
.hc-badge-number[data-variant="outline"].hc-badge-number--is-hover {
  background-color: var(--base-muted);
  color: var(--base-muted-foreground);
}

/* ---------- Variant: ghost ---------- */

.hc-badge-number[data-variant="ghost"] {
  background-color: transparent;
  color: var(--base-foreground);
}

.hc-badge-number[data-variant="ghost"]:hover,
.hc-badge-number[data-variant="ghost"].hc-badge-number--is-hover {
  background-color: var(--base-muted);
  color: var(--base-muted-foreground);
}

/* ---------- Variant: destructive ---------- */

.hc-badge-number[data-variant="destructive"] {
  background-color: color-mix(in srgb, var(--base-destructive) 10%, transparent);
  color: var(--base-destructive);
}

/* Figma's fill is custom/destructive\10 dark:destructive\20 — the tint is 10%
   in light but 20% in dark. */
:root[data-theme="dark"] .hc-badge-number[data-variant="destructive"] {
  background-color: color-mix(in srgb, var(--base-destructive) 20%, transparent);
}

/* Hover is the solid destructive under alpha/20 — base-background at 80%. */
.hc-badge-number[data-variant="destructive"]:hover,
.hc-badge-number[data-variant="destructive"].hc-badge-number--is-hover {
  background-color: color-mix(in srgb, var(--base-background) 80%, var(--base-destructive));
}

/* ---------- Focus ---------- */

/* Figma swaps the counter's own inside stroke to custom/outline — base-ring at
   50% — and adds a 1px Ring inset -1px at the same 50%. That is two 1px lines
   straddling the edge, not a single 3px ring. Box shadows are painted outside
   the border box and are not affected by `overflow`, so nothing is clipped. */
.hc-badge-number:focus-visible,
.hc-badge-number.hc-badge-number--is-focus {
  outline: none;
  box-shadow:
    inset 0 0 0 var(--border-width-border) color-mix(in srgb, var(--base-ring) 50%, transparent),
    0 0 0 var(--border-width-border) color-mix(in srgb, var(--base-ring) 50%, transparent);
}

/* Ghost and destructive carry no stroke even when focused (nodes 21123:52940
   and 17100:10203), so only the outer ring shows on those two. */
.hc-badge-number[data-variant="ghost"]:focus-visible,
.hc-badge-number[data-variant="ghost"].hc-badge-number--is-focus,
.hc-badge-number[data-variant="destructive"]:focus-visible,
.hc-badge-number[data-variant="destructive"].hc-badge-number--is-focus {
  box-shadow: 0 0 0 var(--border-width-border) color-mix(in srgb, var(--base-ring) 50%, transparent);
}

/* ---- BarChart ---- */
/* Honeycomb — BarChart
   Read from Figma eri86fUvOPsnYIL1G6aiBc, set 449:7503,
   default variant Type=Basic 449:7502 (464x320).

   The frame is a column: the plot, a 36px gap, then the legend row. Bars are
   the chart series colours with an 8px corner (Figma rounds the bar wrapper
   with rounded-md and clips the fill to it). Grid rules and the zero line are
   base-border at border-width/border. Every label is text/xs at weight 400 —
   category labels in base-muted-foreground, value labels in base-foreground. */

.hc-bar-chart {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Figma's gap between the plot and the legend is 36px. Honeycomb's spacing
     scale jumps 32 -> 48, so no variable carries it; kept as a literal rather
     than snapped, because snapping would move the legend off the frame. */
  gap: 36px;
  width: 100%;
  font-family: var(--font-sans);
}

.hc-bar-chart__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.hc-bar-chart__grid,
.hc-bar-chart__zero {
  stroke: var(--base-border);
  stroke-width: var(--border-width-border);
  shape-rendering: crispEdges;
}

.hc-bar-chart__bar {
  /* The fill is set per bar from the five-slot series ramp. */
  stroke: none;
}

/* The Active variant: the bars that are not the active one step back. They
   stay fully drawn, because dimming must not be the only signal. */
.hc-bar-chart__bar--dim {
  opacity: 0.35;
}

.hc-bar-chart__label {
  fill: var(--base-muted-foreground);
}

.hc-bar-chart__value {
  fill: var(--base-foreground);
}

.hc-bar-chart__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: var(--spacing-4);
}

.hc-bar-chart__legend-item {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: var(--spacing-1-5);
}

/* Figma's rounded-xs (2px) is not in this token set; rounded-md is the nearest
   bound value and draws the 8px square as a dot. See the README. */
.hc-bar-chart__swatch {
  flex: none;
  width: var(--spacing-2);
  height: var(--spacing-2);
  border-radius: var(--border-radius-rounded-md);
  background-color: var(--base-chart-1);
}

.hc-bar-chart__legend-label {
  color: var(--base-foreground);
  white-space: nowrap;
}

/* ---- Breadcrumb ---- */
/* Honeycomb — Breadcrumb
   Read from Figma eri86fUvOPsnYIL1G6aiBc, set 109:947.
   Variants opened: 109:946 Size=md, 109:945 Size=sm.

   The only thing the size axis changes is the gap around the separator:
   spacing/2.5 (10px) at md, spacing/1.5 (6px) at sm. Type, item height and
   the 15px chevron box are identical in both. */

.hc-breadcrumb {
  display: block;
  font-family: var(--font-sans);
}

.hc-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hc-breadcrumb--size-md .hc-breadcrumb__list {
  gap: var(--spacing-2-5);
}

.hc-breadcrumb--size-sm .hc-breadcrumb__list {
  gap: var(--spacing-1-5);
}

.hc-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

/* The separator is decoration: it carries aria-hidden and is never a stop for
   a screen reader. 15px is Figma's IconPlaceholder and has no spacing token. */
.hc-breadcrumb__separator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 15px;
  height: 15px;
  color: var(--base-muted-foreground);
}

.hc-breadcrumb__separator-icon {
  display: block;
  width: 100%;
  height: 100%;
}

.hc-breadcrumb__separator > svg,
.hc-breadcrumb__separator > img {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---- BreadcrumbItem ---- */
/* Honeycomb — BreadcrumbItem
   Read from Figma eri86fUvOPsnYIL1G6aiBc, set 195:1993.
   Variants opened: 109:830 Dropdown/Default, 980:14183 Dropdown/Hover,
   18437:15333 Dropdown/Focus, 111:1134 Link/Default, 980:14181 Link/Hover,
   18437:15336 Link/Focus, 111:1136 Link Current/Default,
   18437:15340 Link Current/Focus, 109:375 Ellipsis/Default,
   980:14187 Ellipsis/Hover, 18437:15338 Ellipsis/Focus.

   Figma draws focus as a 1px stroke in custom/outline (base-ring at 50%)
   with a 24px radius. That alpha token is not in this set, so the border is
   drawn at full --base-ring and the house 3px ring is added on top — focus
   here changes the border as well as the ring, never the ring alone. */

.hc-breadcrumb-item {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-1);
  margin: 0;
  padding: 0;
  border: var(--border-width-border) solid transparent;
  border-radius: var(--border-radius-rounded-full);
  background: none;
  font-family: var(--font-sans);
  color: var(--base-muted-foreground);
  text-decoration: none;
  white-space: nowrap;
  transition: color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

a.hc-breadcrumb-item,
button.hc-breadcrumb-item {
  cursor: pointer;
}

.hc-breadcrumb-item__label {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

/* The chevron sits in Figma's 15px IconPlaceholder; the ellipsis glyph in a
   16px one. Neither has a spacing token, so 15px is kept as a literal and the
   16px box uses --spacing-4. */
.hc-breadcrumb-item__glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 15px;
  height: 15px;
}

.hc-breadcrumb-item__icon {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------- Variant: Link Current ---------- */
/* The page you are on. Full-strength foreground, and the only item that is
   not a control. */

.hc-breadcrumb-item--linkCurrent {
  color: var(--base-foreground);
}

/* ---------- Variant: Ellipsis ---------- */
/* A 36x36 hit area holding a 16px glyph. 36px has no Honeycomb spacing token,
   so it stays a literal rather than being rounded to 32. */

.hc-breadcrumb-item--ellipsis {
  width: 36px;
  height: 36px;
  padding: 0;
  color: var(--base-foreground);
}

.hc-breadcrumb-item--ellipsis .hc-breadcrumb-item__glyph {
  width: var(--spacing-4);
  height: var(--spacing-4);
}

/* ---------- State: hover ---------- */
/* A link darkens to full foreground; it does not gain a fill. */

.hc-breadcrumb-item--link:hover,
.hc-breadcrumb-item--dropdown:hover,
.hc-breadcrumb-item--is-hover {
  color: var(--base-foreground);
}

.hc-breadcrumb-item--ellipsis:hover,
.hc-breadcrumb-item--ellipsis.hc-breadcrumb-item--is-hover {
  background-color: var(--base-accent);
  color: var(--base-accent-foreground);
}

/* ---------- State: focus ---------- */

.hc-breadcrumb-item:focus-visible,
.hc-breadcrumb-item--is-focus {
  outline: none;
  border-color: var(--base-ring);
  box-shadow: 0 0 0 3px var(--base-ring);
  color: var(--base-foreground);
}

.hc-breadcrumb-item:focus-visible,
.hc-breadcrumb-item--is-focus {
  padding-left: var(--spacing-1);
  padding-right: var(--spacing-1);
}

.hc-breadcrumb-item--ellipsis:focus-visible,
.hc-breadcrumb-item--ellipsis.hc-breadcrumb-item--is-focus {
  padding-left: 0;
  padding-right: 0;
}

@media (prefers-reduced-motion: reduce) {
  .hc-breadcrumb-item { transition: none; }
}

/* ---- Button ---- */
/* Honeycomb — Button
   Geometry, colour and type read from Figma eri86fUvOPsnYIL1G6aiBc
   (set 37:931; variants 37:930, 37:932, 37:1475, 37:1477, 37:1494, 60:244;
   states 979:19776 / 17421:99764).
   Every colour, radius, gap and pad below is a Honeycomb token. */

.hc-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-1-5);
  flex: none;
  font-family: var(--font-sans);
  border: 0;
  border-radius: var(--border-radius-rounded-4xl);
  background-color: transparent;
  color: var(--base-foreground);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
}

.hc-btn:focus {
  outline: none;
}

.hc-btn__label {
  display: inline-block;
}

.hc-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 16px;
  height: 16px;
}

.hc-btn__icon > svg,
.hc-btn__icon > img {
  display: block;
  width: 100%;
  height: 100%;
}

.hc-btn__spinner {
  flex: none;
  width: 16px;
  height: 16px;
  animation: hc-btn-spin 700ms linear infinite;
}

@keyframes hc-btn-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hc-btn__spinner { animation-duration: 2000ms; }
  .hc-btn { transition: none; }
}

/* ---------- Sizes ---------- */
/* 44px (lg) and 36px (icon-lg) have no Honeycomb spacing token; they are the
   measured Figma heights and are written as-is rather than snapped. */

/* "default" is a value of both the Size and the Variant axis, so the two
   families are selected by data attribute; the hc-btn--* classes stay on the
   element as the public styling hook. */

.hc-btn[data-size="default"] {
  height: var(--spacing-8);
  padding-right: var(--spacing-5);
  padding-left: var(--spacing-5);
}

.hc-btn[data-size="sm"] {
  height: var(--spacing-7);
  padding-right: var(--spacing-3);
  padding-left: var(--spacing-3);
}

.hc-btn[data-size="lg"] {
  height: 44px;
  padding-right: var(--spacing-6);
  padding-left: var(--spacing-6);
}

.hc-btn[data-size="xs"] {
  height: var(--spacing-6);
  padding-right: var(--spacing-1-5);
  padding-left: var(--spacing-1-5);
}

.hc-btn[data-size="icon"],
.hc-btn[data-size="icon-sm"],
.hc-btn[data-size="icon-xs"],
.hc-btn[data-size="icon-lg"] {
  padding: 0;
  gap: var(--spacing-2);
}

.hc-btn[data-size="icon"] { width: var(--spacing-8); height: var(--spacing-8); }
.hc-btn[data-size="icon-sm"] { width: var(--spacing-7); height: var(--spacing-7); }
.hc-btn[data-size="icon-xs"] { width: var(--spacing-6); height: var(--spacing-6); }
.hc-btn[data-size="icon-lg"] { width: 36px; height: 36px; }

/* ---------- Variant: default ---------- */

.hc-btn[data-variant="default"] {
  background-color: var(--base-primary);
  color: var(--base-primary-foreground);
}

.hc-btn[data-variant="default"]:hover:not(:disabled),
.hc-btn[data-variant="default"].hc-btn--is-hover {
  background-color: color-mix(in srgb, var(--base-primary-foreground) 10%, var(--base-primary));
}

.hc-btn[data-variant="default"]:active:not(:disabled),
.hc-btn[data-variant="default"].hc-btn--is-pressed {
  background-color: color-mix(in srgb, var(--base-primary-foreground) 20%, var(--base-primary));
}

/* ---------- Variant: secondary ---------- */

.hc-btn[data-variant="secondary"] {
  background-color: var(--base-secondary);
  color: var(--base-secondary-foreground);
}

.hc-btn[data-variant="secondary"]:hover:not(:disabled),
.hc-btn[data-variant="secondary"].hc-btn--is-hover {
  background-color: color-mix(in srgb, var(--base-secondary-foreground) 10%, var(--base-secondary));
}

.hc-btn[data-variant="secondary"]:active:not(:disabled),
.hc-btn[data-variant="secondary"].hc-btn--is-pressed {
  background-color: color-mix(in srgb, var(--base-secondary-foreground) 20%, var(--base-secondary));
}

/* ---------- Variant: destructive ---------- */
/* Figma fills this with destructive at 10% opacity and sets the label in
   destructive itself. color-mix reproduces that from the one token. */

.hc-btn[data-variant="destructive"] {
  background-color: color-mix(in srgb, var(--base-destructive) 10%, transparent);
  color: var(--base-destructive);
}

.hc-btn[data-variant="destructive"]:hover:not(:disabled),
.hc-btn[data-variant="destructive"].hc-btn--is-hover {
  background-color: color-mix(in srgb, var(--base-destructive) 20%, transparent);
}

.hc-btn[data-variant="destructive"]:active:not(:disabled),
.hc-btn[data-variant="destructive"].hc-btn--is-pressed {
  background-color: color-mix(in srgb, var(--base-destructive) 28%, transparent);
}

/* ---------- Variant: outline ---------- */

.hc-btn[data-variant="outline"] {
  background-color: var(--base-background);
  color: var(--base-foreground);
  border: var(--border-width-border) solid var(--base-input);
}

.hc-btn[data-variant="outline"]:hover:not(:disabled),
.hc-btn[data-variant="outline"].hc-btn--is-hover,
.hc-btn[data-variant="ghost"]:hover:not(:disabled),
.hc-btn[data-variant="ghost"].hc-btn--is-hover {
  background-color: var(--base-accent);
  color: var(--base-accent-foreground);
}

.hc-btn[data-variant="outline"]:active:not(:disabled),
.hc-btn[data-variant="outline"].hc-btn--is-pressed,
.hc-btn[data-variant="ghost"]:active:not(:disabled),
.hc-btn[data-variant="ghost"].hc-btn--is-pressed {
  background-color: color-mix(in srgb, var(--base-foreground) 12%, var(--base-background));
  color: var(--base-foreground);
}

/* ---------- Variant: ghost ---------- */

.hc-btn[data-variant="ghost"] {
  background-color: transparent;
  color: var(--base-foreground);
}

/* ---------- Variant: link ---------- */

.hc-btn[data-variant="link"] {
  background-color: transparent;
  color: var(--base-primary);
}

.hc-btn[data-variant="link"]:hover:not(:disabled),
.hc-btn[data-variant="link"].hc-btn--is-hover,
.hc-btn[data-variant="link"]:active:not(:disabled),
.hc-btn[data-variant="link"].hc-btn--is-pressed {
  text-decoration: underline;
  text-underline-offset: var(--spacing-0-5);
}

/* ---------- Focus ---------- */
/* Figma: a 3px spread drop shadow, no offset, no blur. */

.hc-btn:focus-visible,
.hc-btn.hc-btn--is-focus {
  box-shadow: 0 0 0 3px var(--base-ring);
}

/* ---------- Loading ---------- */

.hc-btn--loading {
  pointer-events: none;
}

/* ---------- Disabled ---------- */

.hc-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---- ButtonGroup ---- */
/* Honeycomb — ButtonGroup
   Read from Figma eri86fUvOPsnYIL1G6aiBc, set 18672:224279
   (18672:224276 horizontal/default, 18672:224263 horizontal/outline,
    18672:224270 horizontal/secondary, 18672:224272 vertical/default).

   The group does not restyle its children: it welds them together by
   squaring the inner corners, rounding the two outer ends, and drawing a
   one-pixel separator between neighbours. */

.hc-btn-group {
  display: inline-flex;
  align-items: stretch;
}

.hc-btn-group--horizontal {
  flex-direction: row;
}

.hc-btn-group--vertical {
  flex-direction: column;
}

/* ---------- Corners ---------- */
/* Horizontal ends are the full pill; vertical ends are rounded-lg, exactly as
   the Figma vertical variants draw them. */

.hc-btn-group > * {
  border-radius: 0;
}

.hc-btn-group--horizontal > :first-child {
  border-top-left-radius: var(--border-radius-rounded-full);
  border-bottom-left-radius: var(--border-radius-rounded-full);
}

.hc-btn-group--horizontal > :last-child {
  border-top-right-radius: var(--border-radius-rounded-full);
  border-bottom-right-radius: var(--border-radius-rounded-full);
}

.hc-btn-group--vertical > :first-child {
  border-top-left-radius: var(--border-radius-rounded-lg);
  border-top-right-radius: var(--border-radius-rounded-lg);
}

.hc-btn-group--vertical > :last-child {
  border-bottom-left-radius: var(--border-radius-rounded-lg);
  border-bottom-right-radius: var(--border-radius-rounded-lg);
}

/* A vertical group is one column: every item fills the group's width. */

.hc-btn-group--vertical > * {
  width: 100%;
}

/* ---------- Separators ---------- */
/* default: the primary foreground at 20% laid over the primary fill.
   secondary: the input hairline.
   outline: the children already carry their own border, so the neighbouring
   borders are collapsed into one instead of a separator being added. */

.hc-btn-group--default {
  --hc-btn-group-separator: color-mix(in srgb, var(--base-primary-foreground) 20%, var(--base-primary));
}

.hc-btn-group--secondary {
  --hc-btn-group-separator: var(--base-input);
}

.hc-btn-group--default.hc-btn-group--horizontal > * + *,
.hc-btn-group--secondary.hc-btn-group--horizontal > * + * {
  border-left: var(--border-width-border) solid var(--hc-btn-group-separator);
}

.hc-btn-group--default.hc-btn-group--vertical > * + *,
.hc-btn-group--secondary.hc-btn-group--vertical > * + * {
  border-top: var(--border-width-border) solid var(--hc-btn-group-separator);
}

.hc-btn-group--outline.hc-btn-group--horizontal > * + * {
  margin-left: calc(-1 * var(--border-width-border));
}

.hc-btn-group--outline.hc-btn-group--vertical > * + * {
  margin-top: calc(-1 * var(--border-width-border));
}

/* A focused or hovered member must sit above its neighbours so its ring and
   its border are not clipped by the next item. */

.hc-btn-group > *:hover,
.hc-btn-group > *:focus-visible {
  position: relative;
  z-index: 1;
}

/* ---- Calendar ---- */
/* Calendar — Honeycomb Forms
   Figma: set 17179:197284 "Calendar / Basic", default variant 17921:45929
   (Type=Basic, Mobile=No).

   Geometry from Figma: card is base/background with a 1px base/border,
   radius rounded-2xl, padding spacing-2, gap spacing-4 between header and
   month; one month column is 214px wide. The month block stacks the
   weekday row and the week rows with gap spacing-2, and each row is
   justify-between across seven 28px cells. Day headers are 20px tall,
   text-xs in base/muted-foreground. The month title is text-sm medium in
   base/foreground; the arrows sit at the row's outer edges. */

.hc-calendar {
  box-sizing: border-box;
  display: inline-flex;
  flex-direction: column;
  gap: var(--spacing-4);
  padding: var(--spacing-2);
  border: var(--border-width-border) solid var(--base-border);
  border-radius: var(--border-radius-rounded-2xl);
  background-color: var(--base-background);
  color: var(--base-foreground);
  font-family: var(--font-sans);
}

.hc-calendar__months {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-4);
  align-items: flex-start;
}

/* Mobile=Yes stacks the months instead of putting them side by side. */
.hc-calendar--mobile-yes .hc-calendar__months {
  flex-direction: column;
}

.hc-calendar__month {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: var(--spacing-4);
  /* 7 x 28px cells; the row is justify-between so the ends sit flush. */
  width: calc(var(--spacing-7) * 7);
}

.hc-calendar--week-numbers .hc-calendar__month {
  width: calc(var(--spacing-7) * 7 + var(--spacing-8) + var(--spacing-1));
}

/* --- Header --------------------------------------------------------- */

.hc-calendar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-2);
  width: 100%;
  height: var(--spacing-7);
}

/* Keeps the title centred when only one side has an arrow. */
.hc-calendar__nav-slot {
  display: block;
  flex: 0 0 auto;
  width: var(--spacing-7);
  height: var(--spacing-7);
}

.hc-calendar__nav {
  flex: 0 0 auto;
}

.hc-calendar__title {
  flex: 1 0 0;
  min-width: 0;
  color: var(--base-foreground);
  text-align: center;
  white-space: nowrap;
}

/* --- Grid ----------------------------------------------------------- */

.hc-calendar__grid {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  width: 100%;
}

.hc-calendar__weekdays,
.hc-calendar__week {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.hc-calendar--week-numbers .hc-calendar__weekdays,
.hc-calendar--week-numbers .hc-calendar__week {
  gap: var(--spacing-1);
}

.hc-calendar__weekday {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--spacing-7);
  height: var(--spacing-5);
  border-radius: var(--border-radius-rounded-md);
  color: var(--base-muted-foreground);
  white-space: nowrap;
}

.hc-calendar__weekday-spacer {
  display: block;
  flex: 0 0 auto;
  width: var(--spacing-8);
  height: var(--spacing-5);
}

/* --- Extra content (presets, footers, time pickers) ----------------- */

.hc-calendar__extra {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  width: 100%;
}

/* ---- CalendarDay ---- */
/* CalendarDay — Honeycomb Forms
   Figma: set 234:27 "Calendar / Day Button", default variant 234:23
   (Variant=Outside, State=Default, Rounded=None, Size=Default).

   Two boxes, because that is exactly how Figma paints a range:
   the OUTER box is the range track (base/muted fill, rounded only on the
   end the `rounded` axis names — 18380:27509 / 18380:27513), and the
   INNER box is the day pill that carries Current / Hover / Selected
   (18380:27484 nests a fully-rounded base/primary wrapper inside the
   accent track). Outside a range the track is transparent and only the
   pill paints.

   Geometry from Figma: cell 28px (spacing-7), md 38px, radius
   rounded-2xl, text-sm. */

.hc-calendar-day {
  box-sizing: border-box;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--spacing-7);
  height: var(--spacing-7);
  padding: 0;
  background-color: transparent;
  font-family: var(--font-sans);
}

.hc-calendar-day--size-md {
  /* Figma md cell is 38px; no single spacing token holds it. */
  width: calc(var(--spacing-8) + var(--spacing-1-5));
  height: calc(var(--spacing-8) + var(--spacing-1-5));
}

.hc-calendar-day__button {
  box-sizing: border-box;
  display: flex;
  flex: 1 0 0;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--border-radius-rounded-2xl);
  background-color: transparent;
  color: var(--base-card-foreground);
  font-family: var(--font-sans);
  text-align: center;
}

.hc-calendar-day__number {
  word-break: break-word;
}

/* --- Variants ------------------------------------------------------- */

/* Outside: days that spill in from the neighbouring month. Figma uses
   base/muted-foreground on base/background — 4.7:1, so the dimming is a
   real colour change and not an opacity trick. */
.hc-calendar-day--outside .hc-calendar-day__button {
  color: var(--base-muted-foreground);
}

/* Current: today, filled with base/muted (234:26). */
.hc-calendar-day--current .hc-calendar-day__button {
  background-color: var(--base-muted);
}

/* Range: the track fills the whole cell so consecutive days read as one
   continuous bar; `rounded` decides which end is capped. */
.hc-calendar-day--range {
  background-color: var(--base-muted);
}

.hc-calendar-day--range.hc-calendar-day--rounded-left {
  border-top-left-radius: var(--border-radius-rounded-2xl);
  border-bottom-left-radius: var(--border-radius-rounded-2xl);
}

.hc-calendar-day--range.hc-calendar-day--rounded-right {
  border-top-right-radius: var(--border-radius-rounded-2xl);
  border-bottom-right-radius: var(--border-radius-rounded-2xl);
}

/* A selected range END sits on base/accent rather than base/muted
   (18380:27484). */
.hc-calendar-day--range.hc-calendar-day--selected,
.hc-calendar-day--range.hc-calendar-day--selected-focus {
  background-color: var(--base-accent);
}

/* Booked: struck through, never merely faded, so the "unavailable"
   meaning survives greyscale and low vision (18380:29297). */
.hc-calendar-day--booked .hc-calendar-day__button {
  color: var(--base-muted-foreground);
  text-decoration: line-through;
  text-decoration-skip-ink: none;
}

/* --- States --------------------------------------------------------- */

.hc-calendar-day--hover .hc-calendar-day__button,
.hc-calendar-day__button:hover {
  background-color: var(--base-muted);
  cursor: pointer;
}

/* Always pair primary with primary-foreground: primary is navy in light
   and amber in dark, and a literal white would erase the number. */
.hc-calendar-day--selected .hc-calendar-day__button,
.hc-calendar-day--selected-focus .hc-calendar-day__button,
.hc-calendar-day--selected .hc-calendar-day__button:hover,
.hc-calendar-day--selected-focus .hc-calendar-day__button:hover {
  background-color: var(--base-primary);
  color: var(--base-primary-foreground);
}

/* Figma focus/default: 0 0 0 3px custom/outline (base-ring at 50%). */
.hc-calendar-day--selected-focus .hc-calendar-day__button,
.hc-calendar-day__button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--base-ring) 50%, transparent);
}

/* Figma applies opacity/opacity-50 and nothing else (234:21). Kept exact;
   the contrast shortfall is covered by aria-disabled, not by colour. */
.hc-calendar-day--disabled {
  opacity: 0.5;
}

.hc-calendar-day--disabled .hc-calendar-day__button {
  color: var(--base-muted-foreground);
  cursor: not-allowed;
}

/* ---- CalendarNavButton ---- */
/* CalendarNavButton — Honeycomb Forms
   Figma: set 234:196 "Calendar / Arrow Button", default variant 234:195
   (Size=Default, Variant=Previous, State=Default).

   Geometry from Figma: 28px box (spacing-7), 10px padding (spacing-2-5),
   16px icon (spacing-4), radius rounded-2xl, icon in base/foreground.
   lg is a 48px box (spacing-12, 21203:56366) with the same 16px icon. */

.hc-calendar-nav-button {
  box-sizing: border-box;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--spacing-7);
  height: var(--spacing-7);
  padding: var(--spacing-2-5);
  border: 0;
  border-radius: var(--border-radius-rounded-2xl);
  background-color: transparent;
  color: var(--base-foreground);
  font-family: var(--font-sans);
  cursor: pointer;
}

.hc-calendar-nav-button--size-lg {
  width: var(--spacing-12);
  height: var(--spacing-12);
}

.hc-calendar-nav-button__icon {
  display: block;
  flex: 0 0 auto;
  width: var(--spacing-4);
  height: var(--spacing-4);
}

/* --- States --------------------------------------------------------- */

.hc-calendar-nav-button--hover,
.hc-calendar-nav-button:hover:not(:disabled) {
  background-color: var(--base-muted);
}

/* Figma focus/default: 0 0 0 3px custom/outline (base-ring at 50%). */
.hc-calendar-nav-button--focus,
.hc-calendar-nav-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--base-ring) 50%, transparent);
}

/* Figma applies opacity/opacity-50 and nothing else (5018:30255). */
.hc-calendar-nav-button--disabled,
.hc-calendar-nav-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---- CalendarWeekNumber ---- */
/* CalendarWeekNumber — Honeycomb Forms
   Figma: set 18380:30203, default (and only) variant 18380:30204
   (Variant=Outside).

   Geometry from Figma: 32px square (spacing-8), radius rounded-md,
   text-sm in base/muted-foreground. */

.hc-calendar-week-number {
  box-sizing: border-box;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--spacing-8);
  height: var(--spacing-8);
  padding: 0;
  border-radius: var(--border-radius-rounded-md);
  background-color: transparent;
  color: var(--base-muted-foreground);
  font-family: var(--font-sans);
  text-align: center;
}

.hc-calendar-week-number__number {
  flex: 1 0 0;
  min-width: 0;
  word-break: break-word;
}

/* ---- Card ---- */
/* Honeycomb — Card
   Figma eri86fUvOPsnYIL1G6aiBc, set 21123:292666.
   Read: 17374:183180 (Size=default), 21123:292667 (Size=sm).

   The two sizes differ in exactly two places: the header's vertical padding
   (16px vs 12px) and the title's type ramp (16/24 medium vs 14/20 medium).
   Everything else — fill, border, radius, shadow, content and footer boxes —
   is shared.

   Radius: Figma binds border-radius/rounded-3xl (24px). Honeycomb's published
   radius scale stops at rounded-2xl (16px) and jumps to rounded-4xl (32px), so
   there is no 24px token. rounded-2xl is used here; the card corner is 8px
   tighter than the Figma frame. Flagged in the README.

   base/card equals base/background in the light theme, so the card is read as
   a card because of its border and its xs shadow, not because of its fill. */

.hc-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  overflow: hidden;
  border: var(--border-width-border) solid var(--base-border);
  border-radius: var(--border-radius-rounded-2xl);
  background-color: var(--base-card);
  box-shadow: var(--shadow-xs);
  color: var(--base-card-foreground);
  font-family: var(--font-sans);
}

/* The Figma image slot is an Aspect Ratio frame flush to the card's top
   corners; the card's own overflow clip is what rounds it. */
.hc-card__image {
  display: block;
  width: 100%;
  flex: none;
}

.hc-card__image > img,
.hc-card__image > svg {
  display: block;
  width: 100%;
  height: auto;
}

.hc-card__header {
  box-sizing: border-box;
  display: flex;
  flex: none;
  align-items: flex-start;
  gap: var(--spacing-2);
  width: 100%;
  padding-block: var(--spacing-4);
  padding-inline: var(--spacing-6);
}

.hc-card--size-sm .hc-card__header {
  padding-block: var(--spacing-3);
}

.hc-card__text {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-1);
  min-width: 0;
  word-break: break-word;
}

.hc-card__title {
  width: 100%;
  color: var(--base-card-foreground);
}

.hc-card__description {
  width: 100%;
  color: var(--base-muted-foreground);
}

/* Figma parks a Button here; the card only reserves the slot and never
   restyles what the consumer drops in. */
.hc-card__action {
  display: flex;
  flex: none;
  align-items: center;
}

.hc-card__content {
  box-sizing: border-box;
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding-inline: var(--spacing-6);
  padding-bottom: var(--spacing-6);
}

/* Read exactly as Figma draws it: the footer frame carries no padding, so its
   contents run edge to edge. The consumer pads its own footer. */
.hc-card__footer {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

/* ---- Carousel ---- */
/* Carousel — Honeycomb / Carousel
   Figma set 241:1368, default variant 241:1364
   (Orientation=Horizontal, Breakpoint=sm).
   The breakpoint sets how many slides share the track; the arrows hang 48px
   outside it, centred on the cross axis. */

.hc-carousel {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  color: var(--base-foreground);
}

.hc-carousel__track {
  display: flex;
  flex: 1 0 0;
  align-items: stretch;
  min-width: 1px;
  /* min-height:0 lets the track shrink inside a root that has a fixed height,
     instead of being floored by its content and spilling out of the frame. */
  min-height: 0;
  /*
   * Presentational: the track shows the first N slides and clips the rest.
   * There is no transform, no scroll offset and no snapping — see the README.
   */
  overflow: hidden;
}

/* Figma wraps every slide in a spacing-1 padding box; the gap sits outside it. */
.hc-carousel__cell {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: var(--spacing-1);
}

/* --- Horizontal ------------------------------------------------------ */

/* The track stretches to the frame's height so the slides have something to
   resolve their own height against. Without a height on the root, the frame
   takes its height from the slides, which is what Figma draws. */
.hc-carousel--horizontal {
  align-items: stretch;
}

.hc-carousel--horizontal .hc-carousel__track {
  flex-direction: row;
  gap: var(--spacing-4);
}

.hc-carousel--horizontal .hc-carousel__cell {
  flex: 0 0 auto;
  align-self: stretch;
}

/*
 * Slides per view. The gap is subtracted so N cells plus (N-1) gaps fill the
 * track exactly, which is how Figma's 384px frames come out at 1, 2 and 3.
 */
.hc-carousel--horizontal.hc-carousel--sm .hc-carousel__cell { width: 100%; }

.hc-carousel--horizontal.hc-carousel--md .hc-carousel__cell {
  width: calc((100% - var(--spacing-4)) / 2);
}

.hc-carousel--horizontal.hc-carousel--lg .hc-carousel__cell {
  width: calc((100% - var(--spacing-4) * 2) / 3);
}

/* --- Vertical -------------------------------------------------------- */

.hc-carousel--vertical {
  flex-direction: column;
}

.hc-carousel--vertical .hc-carousel__track {
  flex: 1 0 0;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-1);
  width: 100%;
  min-height: 0;
}

.hc-carousel--vertical .hc-carousel__cell {
  flex: 0 0 auto;
  width: 100%;
}

/*
 * Vertical slide heights. Figma draws only md and sm here, both at two
 * slides; lg follows the horizontal rule at three.
 */
.hc-carousel--vertical.hc-carousel--sm .hc-carousel__cell,
.hc-carousel--vertical.hc-carousel--md .hc-carousel__cell {
  height: calc((100% - var(--spacing-1)) / 2);
}

.hc-carousel--vertical.hc-carousel--lg .hc-carousel__cell {
  height: calc((100% - var(--spacing-1) * 2) / 3);
}

/* --- Arrows ---------------------------------------------------------- */

/*
 * The arrows hang outside the track — 48px clear of it, which is the Figma
 * offset. It has no token: 48px is spacing-12.
 */
.hc-carousel__arrow {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hc-carousel--horizontal .hc-carousel__arrow {
  top: 50%;
  transform: translateY(-50%);
}

.hc-carousel--horizontal .hc-carousel__arrow--previous {
  left: calc(var(--spacing-12) * -1);
}

.hc-carousel--horizontal .hc-carousel__arrow--next {
  right: calc(var(--spacing-12) * -1);
}

.hc-carousel--vertical .hc-carousel__arrow {
  left: 50%;
  transform: translateX(-50%);
}

.hc-carousel--vertical .hc-carousel__arrow--previous {
  top: calc(var(--spacing-12) * -1);
}

.hc-carousel--vertical .hc-carousel__arrow--next {
  bottom: calc(var(--spacing-12) * -1);
}

/* ---- CarouselArrow ---- */
/* CarouselArrow — Honeycomb / Carousel / Arrow Button
   Figma set 239:851, default variant 239:852
   (Orientation=Horizontal, Variant=Previous, State=Default).
   32x32 pill, 1px base-input border, 16px chevron. */

.hc-carousel-arrow {
  box-sizing: border-box;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--spacing-8);
  height: var(--spacing-8);
  margin: 0;
  /* 10px — Figma's literal padding on this button (spacing-2-5). */
  padding: var(--spacing-2-5);
  border: var(--border-width-border) solid var(--base-input);
  border-radius: var(--border-radius-rounded-full);
  background-color: var(--base-background);
  color: var(--base-foreground);
  font-family: var(--font-sans);
  cursor: pointer;
}

.hc-carousel-arrow__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--spacing-4);
  height: var(--spacing-4);
}

.hc-carousel-arrow__icon > svg {
  display: block;
  width: 100%;
  height: 100%;
}

/*
 * Vertical is the same pair of chevrons turned a quarter turn — Figma builds
 * it that way rather than shipping up/down glyphs, so previous points up.
 */
.hc-carousel-arrow--vertical .hc-carousel-arrow__icon {
  transform: rotate(90deg);
}

/* --- States -------------------------------------------------------- */

.hc-carousel-arrow:hover:not(.is-disabled),
.hc-carousel-arrow.is-hover {
  background-color: var(--base-accent);
  color: var(--base-accent-foreground);
}

/*
 * Focus is the border swap plus the 3px ring. The ring alone is 2.5:1 in
 * light, so the border change is the part that carries the state at AA.
 */
.hc-carousel-arrow:focus-visible,
.hc-carousel-arrow.is-focus {
  border-color: var(--base-ring);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--base-ring) 50%, transparent);
}

/* Figma's opacity/opacity-60 while held. */
.hc-carousel-arrow:active:not(.is-disabled),
.hc-carousel-arrow.is-pressed {
  opacity: 0.6;
}

/*
 * At the ends of the track. The button keeps its tab stop and is marked
 * aria-disabled, so a keyboard user does not lose it mid-sequence.
 */
.hc-carousel-arrow.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---- CarouselItem ---- */
/* CarouselItem — Honeycomb / Carousel / CarouselItem (Figma 239:1214)
   A card on the carousel ground: base-card fill, 1px base-border, rounded-xl,
   contents centred, overflow clipped so a bleeding image takes the corners. */

.hc-carousel-item {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border: var(--border-width-border) solid var(--base-border);
  border-radius: var(--border-radius-rounded-xl);
  background-color: var(--base-card);
  color: var(--base-card-foreground);
  font-family: var(--font-sans);
  overflow: hidden;
}

/* An image or AspectRatio inside fills the card and is clipped by its corners. */
.hc-carousel-item > img,
.hc-carousel-item > picture,
.hc-carousel-item > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- ChartGrid ---- */
/* Honeycomb — ChartGrid
   Read from Figma eri86fUvOPsnYIL1G6aiBc, set 449:6858.
   Horizontal=False 449:6857 (401x254, five rules, x row below, y column left);
   Horizontal=True 449:6856 (221x239), which Figma has flattened to a single
   vector — the rules there run the other way, for a horizontal bar chart.

   Rules are base-border at border-width/border, exactly as the node binds
   them. Tick labels are text/xs at weight 400 in base-muted-foreground. */

.hc-chart-grid {
  box-sizing: border-box;
  display: block;
  width: 100%;
  font-family: var(--font-sans);
}

.hc-chart-grid__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.hc-chart-grid__line {
  stroke: var(--base-border);
  stroke-width: var(--border-width-border);
  shape-rendering: crispEdges;
}

.hc-chart-grid__label {
  fill: var(--base-muted-foreground);
}

/* ---- ChartLegend ---- */
/* Honeycomb — ChartLegend
   Read from Figma eri86fUvOPsnYIL1G6aiBc, node 449:7467 (307x16, five keys).

   A wrapping row of keys, sixteen pixels apart, each one an 8px swatch and a
   text/xs label. Sixteen pixels tall for a single line, because that is
   text/xs's line-height; it grows a line at a time when it wraps.

   The item markup is repeated here rather than composed from ChartLegendItem
   so that the legend is styled by its own stylesheet alone. The two are kept
   pixel-identical on purpose. */

.hc-chart-legend {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  gap: var(--spacing-4);
  font-family: var(--font-sans);
  color: var(--base-foreground);
}

.hc-chart-legend--start { justify-content: flex-start; }
.hc-chart-legend--center { justify-content: center; }
.hc-chart-legend--end { justify-content: flex-end; }

.hc-chart-legend__item {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: var(--spacing-1-5);
}

/* Figma binds this to border-radius/rounded-xs (2px), a variable this token
   set does not carry; rounded-md is the nearest bound value and renders the
   8px square as a dot. See the README. */
.hc-chart-legend__swatch {
  flex: none;
  width: var(--spacing-2);
  height: var(--spacing-2);
  border-radius: var(--border-radius-rounded-md);
  background-color: var(--base-chart-1);
}

.hc-chart-legend__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--spacing-3);
  height: var(--spacing-3);
  color: var(--base-foreground);
}

.hc-chart-legend__icon > svg,
.hc-chart-legend__icon > img {
  display: block;
  width: 100%;
  height: 100%;
}

.hc-chart-legend__label {
  white-space: nowrap;
  color: var(--base-foreground);
}

/* ---- ChartLegendItem ---- */
/* Honeycomb — ChartLegendItem
   Read from Figma eri86fUvOPsnYIL1G6aiBc, set 469:739.
   Variants: Type=Default 449:7450 (51x16), Type=Icon 469:740 (55x16).

   One key and its label: an 8px swatch (or a 12px icon) and text/xs at
   weight 400 in base-foreground, six pixels apart. Sixteen pixels tall
   because that is text/xs's line-height, and the mark is centred on it. */

.hc-chart-legend-item {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1-5);
  font-family: var(--font-sans);
  color: var(--base-foreground);
}

/* Figma binds the swatch to border-radius/rounded-xs (2px), which this token
   set does not carry. rounded-md is the nearest bound value; at 8px square the
   corner is fully rounded, so the swatch reads as a dot rather than a chip.
   See the README. */
.hc-chart-legend-item__swatch {
  flex: none;
  width: var(--spacing-2);
  height: var(--spacing-2);
  border-radius: var(--border-radius-rounded-md);
  background-color: var(--base-chart-1);
}

/* The Icon variant swaps the swatch for Figma's 12px IconPlaceholder. */
.hc-chart-legend-item__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--spacing-3);
  height: var(--spacing-3);
  color: var(--base-foreground);
}

.hc-chart-legend-item__icon > svg,
.hc-chart-legend-item__icon > img {
  display: block;
  width: 100%;
  height: 100%;
}

.hc-chart-legend-item__label {
  white-space: nowrap;
  color: var(--base-foreground);
}

/* ---- ChartTooltip ---- */
/* Honeycomb — ChartTooltip
   Read from Figma eri86fUvOPsnYIL1G6aiBc, node 523:8354 (139x114).

   A popover surface: base-popover under base-popover-foreground, a 1px
   base-border stroke, rounded-md, shadow-md. Padding is 6px vertical and
   10px horizontal (spacing/1.5 and spacing/2.5), read off the node.

   Figma draws the border as a literal #f2f2f2 rather than binding it; that is
   base-border's neighbour and would not invert in dark, so base-border is used
   here. Noted in the README. */

.hc-chart-tooltip {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--spacing-2);
  /* Figma's frame is 139px wide and no spacing variable carries it; the
     tooltip grows past it when the rows are longer. */
  min-width: 139px;
  padding: var(--spacing-1-5) var(--spacing-2-5);
  border: var(--border-width-border) solid var(--base-border);
  border-radius: var(--border-radius-rounded-md);
  background-color: var(--base-popover);
  color: var(--base-popover-foreground);
  box-shadow: var(--shadow-md);
  font-family: var(--font-sans);
}

.hc-chart-tooltip__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1-5);
}

.hc-chart-tooltip__header {
  margin: 0;
  color: var(--base-popover-foreground);
}

.hc-chart-tooltip__items {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1-5);
}

.hc-chart-tooltip__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

/* Figma's rounded-xs (2px) is not in this token set; rounded-md is the nearest
   bound value and renders the 8px square as a dot. See the README. */
.hc-chart-tooltip__swatch {
  flex: none;
  width: var(--spacing-2);
  height: var(--spacing-2);
  border-radius: var(--border-radius-rounded-md);
  background-color: var(--base-chart-1);
}

.hc-chart-tooltip__label {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--base-muted-foreground);
}

.hc-chart-tooltip__item--total .hc-chart-tooltip__label {
  color: var(--base-foreground);
}

.hc-chart-tooltip__number {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-0-5);
  white-space: nowrap;
}

.hc-chart-tooltip__value {
  color: var(--base-foreground);
}

.hc-chart-tooltip__unit {
  color: var(--base-muted-foreground);
}

/* Figma's footer is a 12px-tall Separator block with a hairline centred in it,
   then the Total row. A border-top plus 6px of padding is the same picture. */
.hc-chart-tooltip__footer {
  border-top: var(--border-width-border) solid var(--base-border);
  padding-top: var(--spacing-1-5);
}

/* ---- Checkbox ---- */
/* Honeycomb — Checkbox
 * Values read from Figma set 46:112 (default variant 46:110).
 * 4px on the control box and the 14px mark have no Honeycomb token — kept as
 * literals so they stay exactly what the source says.
 */

.hc-checkbox {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  gap: var(--spacing-2);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-sans);
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
}

.hc-checkbox--end {
  flex-direction: row-reverse;
}

.hc-checkbox--end .hc-checkbox__content {
  flex: 1 1 auto;
  min-width: 0;
}

/* ---- control ---- */

.hc-checkbox__control {
  position: relative;
  flex: none;
  display: block;
  box-sizing: border-box;
  width: var(--spacing-4);
  height: var(--spacing-4);
  border-radius: 4px;
  border: var(--border-width-border) solid var(--base-input);
  background: var(--base-background);
}

.hc-checkbox.is-checked .hc-checkbox__control {
  background: var(--base-primary);
  border-color: var(--base-primary);
  overflow: hidden;
}

.hc-checkbox__mark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translate(-50%, -50%);
  color: var(--base-primary-foreground);
}

/* ---- text ---- */

.hc-checkbox__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-1-5);
  word-break: break-word;
}

.hc-checkbox__label {
  display: block;
  width: 100%;
  color: var(--base-foreground);
}

.hc-checkbox__description {
  display: block;
  width: 100%;
  color: var(--base-muted-foreground);
}

.hc-checkbox__invalid {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  color: var(--base-destructive);
}

.hc-checkbox__invalid-icon {
  flex: none;
  width: var(--spacing-4);
  height: var(--spacing-4);
}

/* ---- states ---- */

.hc-checkbox:focus {
  outline: none;
}

.hc-checkbox:focus-visible .hc-checkbox__control,
.hc-checkbox--state-focus .hc-checkbox__control {
  box-shadow: 0 0 0 3px var(--base-ring);
}

.hc-checkbox.is-invalid .hc-checkbox__control {
  border-color: var(--base-destructive);
}

.hc-checkbox--state-pressed .hc-checkbox__control {
  opacity: 0.6;
}

.hc-checkbox.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---- Type = Box ---- */

.hc-checkbox--box {
  padding: var(--spacing-4) var(--spacing-6);
  border: var(--border-width-border) solid var(--base-border);
  border-radius: var(--border-radius-rounded-md);
  background: var(--base-muted);
}

.hc-checkbox--box.is-invalid {
  border-color: var(--base-destructive);
}

/* ---- CheckboxGroup ---- */
/* CheckboxGroup — Honeycomb Forms.
   Figma: 18684:28064 (Checkbox Group). The Figma frame is a vertical
   auto-layout of Checkbox rows with a 12px gap (spacing-3) and nothing
   else — the legend, description and error message below are Honeycomb
   additions, and the legend-to-rows gap reuses that same 12px rhythm. */

.hc-checkbox-group {
  display: block;
  box-sizing: border-box;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--font-sans);
  color: var(--base-foreground);
}

.hc-checkbox-group__legend {
  display: block;
  float: none;
  width: 100%;
  padding: 0;
  margin: 0 0 var(--spacing-3) 0;
  color: var(--base-foreground);
}

.hc-checkbox-group__body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-3);
}

.hc-checkbox-group__description {
  margin: 0;
  color: var(--base-muted-foreground);
}

/* The stack of rows. 12px between neighbours, straight from Figma. */
.hc-checkbox-group__rows {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-3);
}

.hc-checkbox-group__error {
  margin: 0;
  color: var(--base-destructive);
}

/* Invalid recolours nothing but the message, which already says what is
   wrong in words. The rows keep their own invalid styling. */
.hc-checkbox-group.is-invalid > .hc-checkbox-group__legend {
  color: var(--base-destructive);
}

/* Disabled: the fieldset's own `disabled` attribute does the work for
   assistive tech and pointer events; this only dims. Do not also dim
   each row or the two multiply. */
.hc-checkbox-group.is-disabled {
  opacity: 0.5;
}

/* ---- Collapsible ---- */
/* Collapsible — Honeycomb / Collapsible (Figma set 18597:96515, page 60:434).
   Variants read: 18597:96513 State=Inactive (default), 18597:96514 Active.
   Every value below is a Honeycomb token. */

.hc-collapsible {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-2);
  width: 100%;
  font-family: var(--font-sans);
  color: var(--base-foreground);
}

.hc-collapsible__header {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-2);
  width: 100%;
  padding: 0 var(--spacing-4);
}

.hc-collapsible__title {
  margin: 0;
  min-width: 0;
  color: var(--base-foreground);
}

/* Figma uses the ghost icon button here: transparent, 32×32, fully round. */
.hc-collapsible__trigger {
  box-sizing: border-box;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--border-radius-rounded-4xl);
  background-color: transparent;
  color: var(--base-foreground);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.hc-collapsible__trigger:hover:not(:disabled) {
  background-color: var(--base-accent);
  color: var(--base-accent-foreground);
}

.hc-collapsible__trigger:focus-visible {
  outline: var(--border-width-border) solid var(--base-ring);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--base-ring) 50%, transparent);
}

.hc-collapsible__icon {
  display: block;
  width: 16px;
  height: 16px;
}

.hc-collapsible__summary,
.hc-collapsible__panel {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-2);
  width: 100%;
}

/* Figma gives every row in this component the same pill: a bordered,
   fully-rounded strip set in the mono face. */
.hc-collapsible__summary > *,
.hc-collapsible__panel > * {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--spacing-2) var(--spacing-4);
  border: var(--border-width-border) solid var(--base-border);
  border-radius: var(--border-radius-rounded-full);
  background-color: var(--base-background);
  color: var(--base-foreground);
  font-family: var(--font-mono);
}

/* ---- Combobox ---- */
/* Combobox — Honeycomb / Combobox (Figma 21180:33376, panel 21180:32496) */

.hc-combobox {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;

  /*
   * Figma draws the panel at 237px with 245px rows. A listbox has to grow to
   * fit its longest option, so the measured width is a minimum, not a fix.
   */
  min-width: 237px;

  border: var(--border-width-border) solid var(--base-border);
  border-radius: var(--border-radius-rounded-2xl);
  background-color: var(--base-popover);
  color: var(--base-popover-foreground);
  box-shadow: var(--shadow-md);
  font-family: var(--font-sans);
}

/* The search row sits above the options, inset on three sides only. */
.hc-combobox__search {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: none;
  width: 100%;
  padding-top: var(--spacing-1);
  padding-right: var(--spacing-1);
  padding-left: var(--spacing-1);
}

.hc-combobox__list {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--spacing-1);
  overflow-y: auto;
}

.hc-combobox__list > * {
  flex: none;
  width: 100%;
}

/* ---- ComboboxItem ---- */
/* ComboboxItem — Honeycomb / Combobox / Menu Item (Figma 17379:199232) */

.hc-combobox-item {
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding-top: var(--spacing-1);
  padding-bottom: var(--spacing-1);
  padding-left: var(--spacing-1-5);
  /* The right gutter is reserved for the trailing check mark. */
  padding-right: var(--spacing-8);
  border-radius: var(--border-radius-rounded-md);
  background-color: transparent;
  color: var(--base-popover-foreground);
  font-family: var(--font-sans);
  cursor: default;
  user-select: none;
}

.hc-combobox-item:hover,
.hc-combobox-item.is-hover {
  background-color: var(--base-accent);
  color: var(--base-accent-foreground);
}

.hc-combobox-item:focus-visible {
  outline: var(--border-width-border-2) solid var(--base-ring);
  outline-offset: -2px;
}

.hc-combobox-item__body {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
}

.hc-combobox-item__label {
  flex: 1 0 0;
  min-width: 0;
  width: 100%;
  overflow: hidden;
  color: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hc-combobox-item--custom .hc-combobox-item__label {
  flex: none;
}

.hc-combobox-item__description {
  width: 100%;
  overflow: hidden;
  color: var(--base-muted-foreground);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* On the highlighted row the description follows the row colour so it keeps
   its contrast against --base-accent. */
.hc-combobox-item:hover .hc-combobox-item__description,
.hc-combobox-item.is-hover .hc-combobox-item__description {
  color: inherit;
}

.hc-combobox-item__check {
  position: absolute;
  top: 50%;
  right: var(--spacing-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  color: inherit;
}

.hc-combobox-item__check > svg {
  display: block;
  width: 16px;
  height: 16px;
}

/* ---- ComboboxLabel ---- */
/* ComboboxLabel — Honeycomb / Combobox / Label (Figma 21180:30836) */

.hc-combobox-label {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-1-5) var(--spacing-2);
  border-radius: var(--border-radius-rounded-md);
  color: var(--base-muted-foreground);
  font-family: var(--font-sans);
  user-select: none;
}

.hc-combobox-label__text {
  display: block;
  flex: 1 0 0;
  min-width: 0;
  overflow: hidden;
  color: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- ComboboxSeparator ---- */
/* ComboboxSeparator — Honeycomb / Combobox / Separator (Figma 21180:30899) */

.hc-combobox-separator {
  box-sizing: border-box;
  display: flex;
  flex: none;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  padding-top: var(--spacing-1);
  padding-bottom: var(--spacing-1);
}

/*
 * Figma bleeds the rule 4px past the list's own --spacing-1 padding so it
 * spans the full width of the panel.
 */
.hc-combobox-separator__rule {
  display: block;
  width: auto;
  height: var(--border-width-border);
  margin-right: calc(-1 * var(--spacing-1));
  margin-left: calc(-1 * var(--spacing-1));
  background-color: var(--base-border);
}

/* ---- ComboboxTag ---- */
/* ComboboxTag — Honeycomb / Combobox / Multiple Selection Item (Figma 21180:30054) */

.hc-combobox-tag {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-1);

  /* Figma draws the chip 21px tall; no height token covers it. */
  height: 21px;

  padding-left: var(--spacing-2);
  border-radius: var(--border-radius-rounded-full);
  background-color: var(--base-muted);
  color: var(--base-foreground);
  font-family: var(--font-sans);
  max-width: 100%;
  user-select: none;
}

/*
 * Figma draws Hover identically to Default — the chip itself does not change,
 * only the remove button inside it reacts. The class exists so a consumer can
 * force that look, and the remove button picks it up below.
 */
.hc-combobox-tag.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

/*
 * The type ramp has no 12px/medium class at leading-none, so the
 * leading-normal one supplies family, size and weight and the line height is
 * corrected back to Figma's 1 here.
 */
.hc-combobox-tag__label {
  overflow: hidden;
  color: inherit;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hc-combobox-tag__remove {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: var(--border-radius-rounded-full);
  background-color: transparent;
  color: inherit;
  cursor: pointer;
  appearance: none;
}

.hc-combobox-tag__remove:hover,
.hc-combobox-tag.is-hover .hc-combobox-tag__remove {
  background-color: var(--base-accent);
  color: var(--base-accent-foreground);
}

.hc-combobox-tag__remove:focus-visible {
  outline: var(--border-width-border-2) solid var(--base-ring);
  outline-offset: -2px;
}

.hc-combobox-tag__remove > svg {
  display: block;
  width: 12px;
  height: 12px;
}

/* ---- ComboboxTrigger ---- */
/* ComboboxTrigger — Honeycomb / Combobox / Item (Figma 430:4114, default 430:4113) */

.hc-combobox-trigger {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1-5);

  /* Figma h-8. Honeycomb has no height token, so the measured value stands. */
  min-height: 32px;

  /* Figma draws the field at 228px; a field grows, so this is a minimum. */
  min-width: 228px;

  padding-top: var(--spacing-1);
  padding-right: var(--spacing-1);
  padding-bottom: var(--spacing-1);
  padding-left: var(--spacing-2-5);

  border: var(--border-width-border) solid var(--base-input);
  border-radius: var(--border-radius-rounded-4xl);

  /*
   * Figma fills the field with a custom alias — white in light, input/30 in
   * dark. --base-background is the Honeycomb token that flips the same way.
   */
  background-color: var(--base-background);
  color: var(--base-foreground);

  font-family: var(--font-sans);
  text-align: left;
  cursor: pointer;
  appearance: none;
}

/* Chips sit tighter than a placeholder line. */
.hc-combobox-trigger--multiple {
  gap: var(--spacing-1);
}

.hc-combobox-trigger--invalid {
  border-color: var(--base-destructive);
}

.hc-combobox-trigger.is-focus,
.hc-combobox-trigger:focus-visible {
  border-color: var(--base-ring);
  outline: var(--border-width-border-2) solid var(--base-ring);
  outline-offset: var(--spacing-0-5);
}

.hc-combobox-trigger--invalid.is-focus,
.hc-combobox-trigger--invalid:focus-visible {
  border-color: var(--base-destructive);
  outline-color: var(--base-destructive);
}

/* The multi-select root is a focusable div, so the tab stop is drawn here. */
.hc-combobox-trigger--multiple:focus {
  outline: var(--border-width-border-2) solid var(--base-ring);
  outline-offset: var(--spacing-0-5);
}

.hc-combobox-trigger.is-disabled,
.hc-combobox-trigger:disabled {
  background-color: var(--base-muted);
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}

.hc-combobox-trigger__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--base-muted-foreground);
}

.hc-combobox-trigger__icon > svg {
  display: block;
  width: 16px;
  height: 16px;
}

/*
 * Default reads as a placeholder; Active is a chosen value, so it darkens to
 * the body colour. Both clear 4.5:1 on --base-background in either theme.
 */
.hc-combobox-trigger__value {
  flex: 1 0 0;
  min-width: 0;
  overflow: hidden;
  color: var(--base-muted-foreground);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hc-combobox-trigger.is-active .hc-combobox-trigger__value {
  color: var(--base-foreground);
}

.hc-combobox-trigger__tags {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-1);
}

.hc-combobox-trigger__chevron {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--border-radius-rounded-full);
  color: var(--base-foreground);
}

.hc-combobox-trigger__chevron > svg {
  display: block;
  width: 12px;
  height: 12px;
}

/* ---- Command ---- */
/* Command — Honeycomb / Command (Figma 204:1144; Suggestions 204:1143, Empty 21183:14678) */

.hc-command {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;

  /* Figma draws the palette at 384px and caps it there. */
  width: 384px;
  max-width: 100%;

  padding: var(--spacing-4);
  overflow: hidden;
  border: var(--border-width-border) solid var(--base-border);
  border-radius: var(--border-radius-rounded-2xl);
  background-color: var(--base-popover);
  color: var(--base-popover-foreground);
  box-shadow: var(--shadow-md);
  font-family: var(--font-sans);
}

/*
 * Figma gives the Empty variant a 24px corner. Honeycomb jumps from
 * rounded-2xl (16px) to rounded-4xl (32px), so both variants keep the
 * Suggestions corner rather than inventing a radius.
 */
.hc-command--empty {
  min-height: 308px;
}

.hc-command__search {
  box-sizing: border-box;
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--spacing-2);
  width: 100%;
  padding-top: var(--spacing-1);
  padding-right: var(--spacing-1);
  padding-left: var(--spacing-1);
}

.hc-command__search > * {
  flex: 1 0 0;
  min-width: 0;
}

.hc-command__list {
  box-sizing: border-box;
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  align-items: stretch;
  overflow-y: auto;
}

.hc-command__list > * {
  flex: none;
  width: 100%;
}

/*
 * Figma gives the message its own 68px block directly under the search row,
 * so it sits near the top of the tall panel rather than in its middle.
 */
.hc-command__empty {
  box-sizing: border-box;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 68px;
  padding: var(--spacing-4);
  color: var(--base-popover-foreground);
  text-align: center;
}

/* ---- CommandGroup ---- */
/* CommandGroup — Honeycomb / Command / CommandGroup (Figma 21183:25041) */

.hc-command-group {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  padding: var(--spacing-1);
  font-family: var(--font-sans);
}

.hc-command-group > * {
  flex: none;
  width: 100%;
}

/* ---- CommandItem ---- */
/* CommandItem — Honeycomb / Command / Item (Figma 345:8657) */

.hc-command-item {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--spacing-2);

  /* Figma fixes the row at 32px tall. */
  min-height: 32px;

  padding: var(--spacing-1-5) var(--spacing-2);

  /*
   * Figma corners this row at 6px, a radius Honeycomb has no token for. The
   * nearest token, rounded-md at 8px, is used instead — the same substitution
   * DropdownMenuItem makes.
   */
  border-radius: var(--border-radius-rounded-md);

  background-color: transparent;
  color: var(--base-popover-foreground);
  font-family: var(--font-sans);
  cursor: default;
  user-select: none;
}

/*
 * Figma paints the highlight with --base-muted, which resolves to the same
 * value as --base-accent in both themes. The accent pair is used so the row
 * and its text stay matched, as they do everywhere else in the menu family.
 */
.hc-command-item:hover,
.hc-command-item.is-hover {
  background-color: var(--base-accent);
  color: var(--base-accent-foreground);
}

.hc-command-item:focus-visible {
  outline: var(--border-width-border-2) solid var(--base-ring);
  outline-offset: -2px;
}

.hc-command-item.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

.hc-command-item__icon,
.hc-command-item__check {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: inherit;
}

.hc-command-item__icon > svg,
.hc-command-item__check > svg {
  display: block;
  width: 16px;
  height: 16px;
}

.hc-command-item__label {
  flex: 1 0 0;
  min-width: 0;
  overflow: hidden;
  color: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
 * The shortcut is 12px/16px at regular weight. The ramp has no regular 12px
 * class, so the medium one supplies family, size and line height and the
 * weight is corrected back here.
 */
.hc-command-item__shortcut {
  flex: none;
  color: var(--base-muted-foreground);
  font-weight: 400;
  white-space: nowrap;
}

.hc-command-item:hover .hc-command-item__shortcut,
.hc-command-item.is-hover .hc-command-item__shortcut {
  color: inherit;
}

/* ---- CommandLabel ---- */
/* CommandLabel — Honeycomb / Command / Label (Figma 345:8658) */

.hc-command-label {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;

  /* Figma fixes the heading row at 28px tall. */
  min-height: 28px;

  padding: var(--spacing-1-5) var(--spacing-2);
  color: var(--base-muted-foreground);
  font-family: var(--font-sans);
  user-select: none;
}

.hc-command-label__text {
  display: block;
  width: 100%;
  overflow: hidden;
  color: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- CommandSeparator ---- */
/* CommandSeparator — Honeycomb / Command / Separator (Figma 345:8826) */

.hc-command-separator {
  box-sizing: border-box;
  flex: none;
  width: 100%;
  height: var(--border-width-border);
  background-color: var(--base-border);
}

/* ---- ContextMenu ---- */
/* ContextMenu — Honeycomb / ContextMenu (Figma 249:5013) */

.hc-context-menu {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;

  /* Figma draws the panel at 280px. A menu grows to its longest row. */
  min-width: 280px;

  padding: var(--spacing-4);
  border: var(--border-width-border) solid var(--base-border);
  border-radius: var(--border-radius-rounded-lg);
  background-color: var(--base-popover);
  color: var(--base-popover-foreground);
  box-shadow: var(--shadow-md);
  font-family: var(--font-sans);
}

/* Rows are laid out by the panel, so they fill its content box. */
.hc-context-menu > * {
  flex: none;
  width: 100%;
}

/* ---- ContextMenuItem ---- */
/* ContextMenuItem — Honeycomb / ContextMenu / Item (Figma 419:4521) */

.hc-context-menu-item {
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-1-5);

  /* Figma fixes the row at 28px and clips it. */
  height: 28px;
  max-height: 28px;
  overflow: hidden;

  padding: var(--spacing-1) var(--spacing-1-5);
  border-radius: var(--border-radius-rounded-md);
  background-color: transparent;
  color: var(--base-popover-foreground);
  font-family: var(--font-sans);
  cursor: default;
  user-select: none;
}

/* The radio row swaps the trailing shortcut for a check gutter. */
.hc-context-menu-item--radio {
  padding-right: var(--spacing-8);
}

/*
 * Destructive is the word plus red TEXT, never a red fill —
 * --base-destructive-foreground does not clear 4.5:1 on the dark red.
 * Write the label so it still reads as destructive in monochrome.
 */
.hc-context-menu-item--destructive {
  color: var(--base-destructive);
}

.hc-context-menu-item:hover,
.hc-context-menu-item.is-hover {
  background-color: var(--base-accent);
  color: var(--base-accent-foreground);
}

.hc-context-menu-item--destructive:hover,
.hc-context-menu-item--destructive.is-hover {
  color: var(--base-destructive);
}

.hc-context-menu-item:focus-visible {
  outline: var(--border-width-border-2) solid var(--base-ring);
  outline-offset: -2px;
}

.hc-context-menu-item.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

.hc-context-menu-item__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: inherit;
}

.hc-context-menu-item__icon > svg {
  display: block;
  width: 16px;
  height: 16px;
}

.hc-context-menu-item__label {
  flex: 1 0 0;
  min-width: 0;
  overflow: hidden;
  color: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
 * The shortcut is 12px/16px at regular weight. The ramp has no regular 12px
 * class, so the medium one supplies family, size and line height and the
 * weight is corrected back here.
 */
.hc-context-menu-item__shortcut {
  flex: none;
  color: var(--base-muted-foreground);
  font-weight: 400;
  white-space: nowrap;
}

.hc-context-menu-item:hover .hc-context-menu-item__shortcut,
.hc-context-menu-item.is-hover .hc-context-menu-item__shortcut {
  color: inherit;
}

.hc-context-menu-item--destructive:hover .hc-context-menu-item__shortcut,
.hc-context-menu-item--destructive.is-hover .hc-context-menu-item__shortcut {
  color: var(--base-destructive);
}

.hc-context-menu-item__check {
  position: absolute;
  top: 50%;
  right: var(--spacing-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  color: inherit;
}

.hc-context-menu-item__check > svg {
  display: block;
  width: 16px;
  height: 16px;
}

/* ---- ContextMenuSubTrigger ---- */
/* ContextMenuSubTrigger — Honeycomb / ContextMenu / SubTrigger (Figma 419:4534) */

.hc-context-menu-sub-trigger {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--spacing-1-5);
  width: 100%;
  padding: var(--spacing-1) var(--spacing-1-5);
  border: 0;
  border-radius: var(--border-radius-rounded-md);
  background-color: transparent;
  color: var(--base-popover-foreground);
  font-family: var(--font-sans);
  text-align: left;
  cursor: default;
  user-select: none;
  appearance: none;
}

/* Active is the open-submenu look; hover reuses it. */
.hc-context-menu-sub-trigger:hover,
.hc-context-menu-sub-trigger.is-active {
  background-color: var(--base-accent);
  color: var(--base-accent-foreground);
}

.hc-context-menu-sub-trigger:focus-visible {
  outline: var(--border-width-border-2) solid var(--base-ring);
  outline-offset: -2px;
}

.hc-context-menu-sub-trigger__icon,
.hc-context-menu-sub-trigger__chevron {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: inherit;
}

.hc-context-menu-sub-trigger__icon > svg,
.hc-context-menu-sub-trigger__chevron > svg {
  display: block;
  width: 16px;
  height: 16px;
}

.hc-context-menu-sub-trigger__label {
  flex: 1 0 0;
  min-width: 0;
  overflow: hidden;
  color: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- DataTable ---- */
/* DataTable — Honeycomb / Data Table (Figma 18719:212930)
   A composition shell, not a table. Three bands: a toolbar row, the bordered
   surface the consumer's Honeycomb.Table sits in, and a footer carrying the
   selection count and the pagination row. Every value below is the frame; the
   rows, cells and controls all come from the consumer. */

.hc-data-table {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  font-family: var(--font-sans);
  color: var(--base-foreground);
}

/* Toolbar: the filter on the left, the column and action controls on the right. */
.hc-data-table__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-2);
  padding-block: var(--spacing-4);
}

/*
 * The surface. Figma clips it, which is what lets the table's own hairlines
 * stop cleanly at the rounded corners instead of poking through them.
 */
.hc-data-table__surface {
  box-sizing: border-box;
  width: 100%;
  /* 356px is the Figma minimum for this frame, matching Honeycomb.Table. */
  min-width: 356px;
  border: var(--border-width-border) solid var(--base-border);
  border-radius: var(--border-radius-rounded-md);
  background-color: var(--base-background);
  overflow: hidden;
}

/*
 * A table inside the surface loses its outer edge to the surface's own border,
 * and its last row's separator to the surface's bottom edge.
 */
.hc-data-table__surface > .hc-table {
  min-width: 0;
}

/* Footer: the running selection count, then the pagination row. */
.hc-data-table__footer {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding-block: var(--spacing-4);
}

.hc-data-table__selection {
  flex: 1 0 0;
  min-width: 1px;
  overflow: hidden;
  color: var(--base-muted-foreground);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hc-data-table__pagination {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--spacing-2);
}

/*
 * A narrow shell stacks the toolbar rather than squeezing the filter down to
 * nothing. Figma draws one width; this is the behaviour that width implies.
 */
@media (max-width: 480px) {
  .hc-data-table__toolbar,
  .hc-data-table__footer {
    flex-direction: column;
    align-items: stretch;
  }

  .hc-data-table__pagination {
    justify-content: flex-end;
  }
}

/* ---- DatePicker ---- */
/* DatePicker — Honeycomb Forms
   Figma: set 334:4051 "Date Picker", default variant 334:4050
   (State=Default, Type=Icon Left).

   Geometry from Figma: 32px tall (spacing-8), padding 8px/10px
   (spacing-2 / spacing-2-5), gap spacing-2, radius rounded-4xl, 1px
   border in base/input, 16px icon, text-sm in base/foreground. The
   "With Input" type (18403:6198) drops to 4px block padding and parks a
   24px DatePickerButton at the trailing edge. */

.hc-date-picker {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  width: 100%;
  height: var(--spacing-8);
  margin: 0;
  padding-block: var(--spacing-2);
  padding-inline: var(--spacing-2-5);
  border: var(--border-width-border) solid var(--base-input);
  border-radius: var(--border-radius-rounded-4xl);
  background-color: var(--base-background);
  color: var(--base-foreground);
  font-family: var(--font-sans);
  text-align: start;
}

.hc-date-picker--icon-left,
.hc-date-picker--icon-right {
  cursor: pointer;
}

/* Figma parks the 24px button 7px in from the field's right edge; 6px
   (spacing-1-5) is the nearest token step. */
.hc-date-picker--with-input {
  padding-block: var(--spacing-1);
  padding-inline-end: var(--spacing-1-5);
}

.hc-date-picker__icon {
  display: block;
  flex: 0 0 auto;
  width: var(--spacing-4);
  height: var(--spacing-4);
  color: var(--base-foreground);
}

.hc-date-picker__value {
  flex: 1 0 0;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--base-foreground);
  text-align: start;
}

/* Figma draws the "Pick a date" placeholder in base/foreground, the same
   colour as a real value (334:4050) — kept exact. The typed `with-input`
   type uses a real ::placeholder, which is muted like Honeycomb Input. */
.hc-date-picker__input {
  flex: 1 0 0;
  min-width: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  background-color: transparent;
  color: var(--base-foreground);
  font-family: var(--font-sans);
  text-overflow: ellipsis;
}

.hc-date-picker__input::placeholder {
  color: var(--base-muted-foreground);
  opacity: 1;
}

.hc-date-picker__trigger {
  flex: 0 0 auto;
}

.hc-date-picker__addon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  color: var(--base-muted-foreground);
}

/* --- States --------------------------------------------------------- */

/* Hover and Active share the same fill in Figma (334:4048 / 21207:240704);
   Active is what you see while the calendar is open. */
.hc-date-picker--hover,
.hc-date-picker--active,
.hc-date-picker--icon-left:hover:not(:disabled),
.hc-date-picker--icon-right:hover:not(:disabled) {
  background-color: var(--base-muted);
}

/* Focus: border swaps to base-ring plus the 3px focus/default ring. */
.hc-date-picker--focus,
.hc-date-picker--icon-left:focus-visible,
.hc-date-picker--icon-right:focus-visible,
.hc-date-picker--with-input:focus-within {
  outline: none;
  border-color: var(--base-ring);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--base-ring) 50%, transparent);
}

.hc-date-picker--disabled,
.hc-date-picker:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.hc-date-picker--disabled .hc-date-picker__input {
  cursor: not-allowed;
}

/* ---- DatePickerButton ---- */
/* DatePickerButton — Honeycomb Forms
   Figma: set 18403:8670 "Date Picker / Button", default variant 18403:8669
   (State=Default).

   Geometry from Figma: 24px square (spacing-6), radius rounded-4xl,
   14px icon centred. It is the trailing affordance inside the DatePicker
   "With Input" type (18403:6198), inset 7px from the field's right edge. */

.hc-date-picker-button {
  box-sizing: border-box;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--spacing-6);
  height: var(--spacing-6);
  padding: 0;
  border: 0;
  border-radius: var(--border-radius-rounded-4xl);
  background-color: transparent;
  color: var(--base-foreground);
  font-family: var(--font-sans);
  cursor: pointer;
}

.hc-date-picker-button__icon {
  display: block;
  flex: 0 0 auto;
  /* Figma height/h-3,5 = 14px; no spacing token holds it. */
  width: calc(var(--spacing-4) - var(--spacing-0-5));
  height: calc(var(--spacing-4) - var(--spacing-0-5));
}

/* --- States --------------------------------------------------------- */

.hc-date-picker-button--hover,
.hc-date-picker-button:hover:not(:disabled) {
  background-color: var(--base-muted);
}

/* Figma focus/default: 0 0 0 3px custom/outline (base-ring at 50%). */
.hc-date-picker-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--base-ring) 50%, transparent);
}

.hc-date-picker-button--disabled,
.hc-date-picker-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---- Dialog ---- */
/* Dialog — Honeycomb / Dialog (Figma 112:601, page "Dialog" 112:477).
   Every colour, gap, radius and border below is a Honeycomb token. */

.hc-dialog {
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;

  /* Figma draws the panel at 425px wide. Applied as a cap so the dialog
     still fits a narrow viewport. */
  width: 100%;
  max-width: 425px;

  overflow: hidden;
  border: var(--border-width-border) solid var(--base-border);
  border-radius: var(--border-radius-rounded-xl);
  background-color: var(--base-background);
  color: var(--base-foreground);
  font-family: var(--font-sans);
}

.hc-dialog__header {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-2);
  width: 100%;
  padding: var(--spacing-4);
}

.hc-dialog__title {
  margin: 0;
  /* Room for the close affordance sitting in the top-right corner. */
  padding-right: var(--spacing-6);
  color: var(--base-foreground);
}

.hc-dialog__description {
  margin: 0;
  color: var(--base-muted-foreground);
}

.hc-dialog__body {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  padding: 0 var(--spacing-4) var(--spacing-4);
}

/* Figma paints the footer with base-muted at 50% over the panel fill. */
.hc-dialog__footer {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-2);
  width: 100%;
  padding: var(--spacing-4);
  border-top: var(--border-width-border) solid var(--base-border);
  background-color: color-mix(in srgb, var(--base-muted) 50%, var(--base-background));
}

.hc-dialog__close {
  position: absolute;
  top: var(--spacing-4);
  right: var(--spacing-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  border-radius: var(--border-radius-rounded-md);
  background-color: transparent;
  color: var(--base-foreground);
  opacity: 0.7;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.hc-dialog__close:hover {
  opacity: 1;
}

.hc-dialog__close:focus-visible {
  outline: var(--border-width-border) solid var(--base-ring);
  outline-offset: var(--spacing-0-5);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--base-ring) 50%, transparent);
  opacity: 1;
}

.hc-dialog__close-icon {
  display: block;
  width: 16px;
  height: 16px;
}

/* ---- DonutChart ---- */
/* Honeycomb — DonutChart
   Read from Figma eri86fUvOPsnYIL1G6aiBc, set 523:7880,
   default variant Type=Basic 523:7886 (192x192).

   A pie with its middle removed, the figure it totals set in the hole. Arcs
   run the five-slot series ramp clockwise from twelve o'clock, separated by a
   2px stroke. The centre figure is text/3xl at weight 700 — a combination
   Honeycomb binds no class to, so part.js sets its size and weight inline and
   this file only carries the colour. See the README. */

.hc-donut-chart {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Figma's 36px gap; Honeycomb's spacing scale steps 32 -> 48. */
  gap: 36px;
  width: 100%;
  font-family: var(--font-sans);
}

.hc-donut-chart__svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Figma separates the arcs with tailwind colors/base/white, a hard-coded
   literal that would stay white on a near-black page in the dark theme.
   base-background is identical in light and inverts correctly. Deliberate
   deviation; see the README. */
.hc-donut-chart__arc {
  stroke: var(--base-background);
  /* 2px is border-width/border-2, the only 2px value Honeycomb binds. */
  stroke-width: var(--border-width-border-2);
  stroke-linejoin: round;
}

.hc-donut-chart__value {
  fill: var(--base-foreground);
  font-family: var(--font-sans);
}

.hc-donut-chart__caption {
  fill: var(--base-muted-foreground);
}

.hc-donut-chart__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: var(--spacing-4);
}

.hc-donut-chart__legend-item {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: var(--spacing-1-5);
}

/* Figma's rounded-xs (2px) is not in this token set; rounded-md is the nearest
   bound value and draws the 8px square as a dot. See the README. */
.hc-donut-chart__swatch {
  flex: none;
  width: var(--spacing-2);
  height: var(--spacing-2);
  border-radius: var(--border-radius-rounded-md);
  background-color: var(--base-chart-1);
}

.hc-donut-chart__legend-label {
  color: var(--base-foreground);
  white-space: nowrap;
}

/* ---- Drawer ---- */
/* Drawer — Honeycomb / Drawer (Figma set 244:2831, page 112:454).
   Variants read: 21207:188114 top (the brief's default), 244:2829 bottom,
   21207:188939 right. Every value below is a Honeycomb token. */

/* The root is the overlay area, exactly as the Figma frame is. Making it
   fixed, sized or portalled is the consumer's job. */
.hc-drawer {
  box-sizing: border-box;
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  font-family: var(--font-sans);
  /* Figma: black at 10% with a 2px blur behind the panel. */
  background-color: color-mix(in srgb, var(--base-foreground) 10%, transparent);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.hc-drawer--no-scrim {
  background-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.hc-drawer--top { flex-direction: column; justify-content: flex-start; align-items: stretch; }
.hc-drawer--bottom { flex-direction: column; justify-content: flex-end; align-items: stretch; }
.hc-drawer--right { flex-direction: row; justify-content: flex-end; align-items: stretch; }
.hc-drawer--left { flex-direction: row; justify-content: flex-start; align-items: stretch; }

.hc-drawer__panel {
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--base-background);
  color: var(--base-foreground);
}

/* Each direction rounds the two corners that face the page and carries one
   hairline on that same edge. */
.hc-drawer--top .hc-drawer__panel {
  width: 100%;
  border-bottom: var(--border-width-border) solid var(--base-border);
  border-bottom-left-radius: var(--border-radius-rounded-xl);
  border-bottom-right-radius: var(--border-radius-rounded-xl);
}

.hc-drawer--bottom .hc-drawer__panel {
  width: 100%;
  border-top: var(--border-width-border) solid var(--base-border);
  border-top-left-radius: var(--border-radius-rounded-xl);
  border-top-right-radius: var(--border-radius-rounded-xl);
}

.hc-drawer--right .hc-drawer__panel {
  width: 100%;
  max-width: 384px;
  height: 100%;
  border-left: var(--border-width-border) solid var(--base-border);
  border-top-left-radius: var(--border-radius-rounded-xl);
  border-bottom-left-radius: var(--border-radius-rounded-xl);
}

.hc-drawer--left .hc-drawer__panel {
  width: 100%;
  max-width: 384px;
  height: 100%;
  border-right: var(--border-width-border) solid var(--base-border);
  border-top-right-radius: var(--border-radius-rounded-xl);
  border-bottom-right-radius: var(--border-radius-rounded-xl);
}

/* Grab handle. Figma draws it on the bottom drawer only. */
.hc-drawer__handle-row {
  box-sizing: border-box;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-top: var(--spacing-4);
}

.hc-drawer__handle {
  display: block;
  width: 120px;
  height: var(--spacing-2);
  border-radius: var(--border-radius-rounded-full);
  background-color: var(--base-muted);
}

.hc-drawer__header {
  box-sizing: border-box;
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-0-5);
  width: 100%;
  padding: var(--spacing-4);
  text-align: center;
}

.hc-drawer__title {
  margin: 0;
  width: 100%;
  color: var(--base-foreground);
}

.hc-drawer__description {
  margin: 0;
  width: 100%;
  color: var(--base-muted-foreground);
}

.hc-drawer__body {
  box-sizing: border-box;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-3);
  min-height: 0;
  width: 100%;
  overflow: auto;
  padding: var(--spacing-4) var(--spacing-4) 0;
}

.hc-drawer__body > * {
  width: 100%;
}

/* Figma stacks the drawer's actions full width. */
.hc-drawer__footer {
  box-sizing: border-box;
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-2);
  width: 100%;
  padding: var(--spacing-4);
}

.hc-drawer__footer > * {
  width: 100%;
}

/* ---- DropdownMenu ---- */
/* DropdownMenu — Honeycomb / DropdownMenu / Menu (Figma 105:55) */

.hc-dropdown-menu {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-1);

  /*
   * Figma draws the panel at 220px. A menu has to grow to fit its longest
   * row, so the measured width is applied as the minimum rather than a
   * fixed width.
   */
  min-width: 220px;

  padding: var(--spacing-4);
  border: var(--border-width-border) solid var(--base-border);
  border-radius: var(--border-radius-rounded-2xl);
  background-color: var(--base-popover);
  color: var(--base-popover-foreground);
  box-shadow: var(--shadow-md);
  font-family: var(--font-sans);
}

/* Rows are laid out by the panel, so they fill its content box. */
.hc-dropdown-menu > * {
  flex: none;
  width: 100%;
}

/* ---- DropdownMenuItem ---- */
/* DropdownMenuItem — Honeycomb / DropdownMenu / Item (Figma 330:8549) */

.hc-dropdown-menu-item {
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-1-5);
  height: 28px;
  max-height: 28px;
  overflow: hidden;
  padding-top: var(--spacing-1);
  padding-bottom: var(--spacing-1);
  padding-left: var(--spacing-1-5);
  /* Default reserves the right gutter for the trailing check mark. */
  padding-right: var(--spacing-8);
  border-radius: var(--border-radius-rounded-md);
  background-color: transparent;
  color: var(--base-popover-foreground);
  font-family: var(--font-sans);
  cursor: default;
  user-select: none;
}

/* Shortcut and destructive place their trailing content in the flow instead. */
.hc-dropdown-menu-item--shortcut,
.hc-dropdown-menu-item--destructive {
  padding-right: var(--spacing-1-5);
}

.hc-dropdown-menu-item--destructive {
  color: var(--base-destructive);
}

.hc-dropdown-menu-item:hover,
.hc-dropdown-menu-item.is-hover {
  background-color: var(--base-accent);
  color: var(--base-accent-foreground);
}

.hc-dropdown-menu-item--destructive:hover,
.hc-dropdown-menu-item--destructive.is-hover {
  color: var(--base-destructive);
}

.hc-dropdown-menu-item:focus-visible {
  outline: var(--border-width-border-2) solid var(--base-ring);
  outline-offset: -2px;
}

.hc-dropdown-menu-item.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

.hc-dropdown-menu-item__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: inherit;
}

.hc-dropdown-menu-item__icon > svg {
  display: block;
  width: 16px;
  height: 16px;
}

.hc-dropdown-menu-item__label {
  flex: 1 0 0;
  min-width: 0;
  overflow: hidden;
  color: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-word;
}

/*
 * The shortcut is 12px/16px at regular weight. The type ramp has no regular
 * 12px class, so the medium one supplies family, size and line height and the
 * weight is corrected back here.
 */
.hc-dropdown-menu-item__shortcut {
  flex: none;
  color: var(--base-muted-foreground);
  font-weight: 400;
  white-space: nowrap;
}

.hc-dropdown-menu-item__check {
  position: absolute;
  top: var(--spacing-1-5);
  right: var(--spacing-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: inherit;
}

.hc-dropdown-menu-item__check > svg {
  display: block;
  width: 16px;
  height: 16px;
}

/* ---- DropdownMenuLabel ---- */
/* DropdownMenuLabel — Honeycomb / DropdownMenu / Label (Figma 330:24589) */

.hc-dropdown-menu-label {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-height: 24px;
  padding: var(--spacing-1) var(--spacing-1-5);
  color: var(--base-muted-foreground);
  font-family: var(--font-sans);
  user-select: none;
}

.hc-dropdown-menu-label__text {
  display: block;
  width: 100%;
  height: 16px;
  overflow: hidden;
  color: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- DropdownMenuSeparator ---- */
/* DropdownMenuSeparator — Honeycomb / DropdownMenu / Separator (Figma 91:272) */

.hc-dropdown-menu-separator {
  box-sizing: border-box;
  flex: none;
  width: 100%;
  height: var(--border-width-border);
  background-color: var(--base-border);
}

/* ---- DropdownMenuSubTrigger ---- */
/* DropdownMenuSubTrigger — Honeycomb / DropdownMenu / SubTrigger (Figma 330:24002) */

.hc-dropdown-menu-sub-trigger {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  width: 100%;
  padding: var(--spacing-1) var(--spacing-1-5);

  /*
   * Figma corners this row at 6px, a radius Honeycomb does not carry a
   * token for. The nearest token, rounded-md at 8px, is used instead.
   */
  border-radius: var(--border-radius-rounded-md);

  border: 0;
  background-color: transparent;
  color: var(--base-popover-foreground);
  font-family: var(--font-sans);
  text-align: left;
  cursor: default;
  user-select: none;
  appearance: none;
}

/* Active is the open-submenu look; hover reuses it. */
.hc-dropdown-menu-sub-trigger:hover,
.hc-dropdown-menu-sub-trigger.is-active {
  background-color: var(--base-accent);
  color: var(--base-accent-foreground);
}

.hc-dropdown-menu-sub-trigger:focus-visible {
  outline: var(--border-width-border-2) solid var(--base-ring);
  outline-offset: -2px;
}

.hc-dropdown-menu-sub-trigger__icon,
.hc-dropdown-menu-sub-trigger__chevron {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: inherit;
}

.hc-dropdown-menu-sub-trigger__icon > svg,
.hc-dropdown-menu-sub-trigger__chevron > svg {
  display: block;
  width: 16px;
  height: 16px;
}

.hc-dropdown-menu-sub-trigger__label {
  flex: 1 0 0;
  min-width: 0;
  overflow: hidden;
  color: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-word;
}

/* ---- DropdownMenuTrigger ---- */
/* DropdownMenuTrigger — Honeycomb / DropdownMenu trigger button (Figma 336:5048 in 336:5077) */

.hc-dropdown-menu-trigger {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-1-5);
  height: 32px;
  padding: var(--spacing-2) var(--spacing-5);
  border: var(--border-width-border) solid var(--base-input);
  border-radius: var(--border-radius-rounded-4xl);

  /*
   * Figma fills this button with a custom alias that resolves to the same
   * value as --base-accent. The Honeycomb pair is used instead so the fill
   * and the label stay matched in both themes.
   */
  background-color: var(--base-accent);
  color: var(--base-accent-foreground);

  font-family: var(--font-sans);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  appearance: none;
}

.hc-dropdown-menu-trigger:focus-visible {
  outline: var(--border-width-border-2) solid var(--base-ring);
  outline-offset: var(--spacing-0-5);
}

.hc-dropdown-menu-trigger:disabled {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}

.hc-dropdown-menu-trigger__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: inherit;
}

.hc-dropdown-menu-trigger__icon > svg {
  display: block;
  width: 16px;
  height: 16px;
}

.hc-dropdown-menu-trigger__label {
  color: inherit;
}

/* ---- EmptyState ---- */
/* EmptyState — Honeycomb / Empty (Figma 18672:2962) */

.hc-empty-state {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-4);
  width: 308px;
  max-width: 100%;
  padding: var(--spacing-6);
  border-radius: var(--border-radius-rounded-lg);
  background-color: transparent;
  color: var(--base-foreground);
  font-family: var(--font-sans);
  text-align: center;
}

.hc-empty-state__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-4);
  width: 100%;
}

/*
 * Neutral slot: Honeycomb's media types differ in size and shape — a 32px icon
 * frame, a 48px avatar, an 80x32 avatar group — so the wrapper only centres
 * whatever it is given. Use .hc-empty-state__media--icon below for the icon one.
 */
.hc-empty-state__media {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  color: var(--base-foreground);
}

/* The Icon media type, ready to put on your own glyph wrapper. */
.hc-empty-state__media--icon {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--border-radius-rounded-lg);
  background-color: var(--base-muted);
  color: var(--base-foreground);
}

.hc-empty-state__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-2);
  width: 100%;
  word-break: break-word;
}

.hc-empty-state__title {
  width: 100%;
  color: var(--base-foreground);
}

.hc-empty-state__description {
  width: 100%;
  /* Measured 1.625 in Figma — looser than the type class's own line height. */
  line-height: 1.625;
  color: var(--base-muted-foreground);
}

.hc-empty-state__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-4);
  width: 100%;
}

/* ---- Field ---- */
/* Field — Honeycomb Forms
   Figma: set 18684:15220, default variant 18684:15221.
   Vertical stack gaps 8px (spacing-2); the Responsive label column
   stacks at 6px (spacing-1-5) and both columns share a 8px row gap. */

.hc-field {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-2);
  width: 100%;
  font-family: var(--font-sans);
}

.hc-field__label {
  width: 100%;
  color: var(--base-foreground);
}

.hc-field__description {
  width: 100%;
  margin: 0;
  color: var(--base-muted-foreground);
}

.hc-field__control {
  width: 100%;
}

/* Figma pins the helper link to the top-right of the field box. */
.hc-field__link {
  position: absolute;
  top: 0;
  right: 0;
  color: var(--base-foreground);
  text-align: right;
  white-space: nowrap;
}

/* --- Invalid ------------------------------------------------------- */

/* Figma recolours the label only. The message below carries the words,
   so the state never rests on colour alone. */
.hc-field--invalid > .hc-field__label,
.hc-field--invalid .hc-field__content > .hc-field__label {
  color: var(--base-destructive);
}

.hc-field__error {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-1);
  width: 100%;
  margin: 0;
  color: var(--base-destructive);
}

.hc-field__error-icon {
  flex: 0 0 auto;
  display: block;
  width: var(--spacing-4);
  height: var(--spacing-4);
  margin-top: 2px;
  color: inherit;
}

/* --- Responsive orientation ---------------------------------------- */

.hc-field--responsive {
  flex-direction: row;
  align-items: flex-start;
}

.hc-field--responsive .hc-field__content {
  flex: 1 0 0;
  min-width: 1px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-1-5);
}

.hc-field--responsive .hc-field__slot {
  flex: 1 0 0;
  min-width: 1px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-1-5);
}

/* Below the two-column breakpoint the row folds back into a stack. */
@media (max-width: 480px) {
  .hc-field--responsive {
    flex-direction: column;
    align-items: flex-start;
  }

  .hc-field--responsive .hc-field__content,
  .hc-field--responsive .hc-field__slot {
    flex: 0 0 auto;
    width: 100%;
  }
}

/* ---- FieldGroup ---- */
/* FieldGroup — Honeycomb Forms.
   Figma: set 21209:145707, default variant Orientation=Horizontal
   (21209:145706); Orientation=Vertical is 21209:145705.
   Horizontal: row, 16px gap (spacing-4), members centred and equal width.
   Vertical:   column, 20px gap (spacing-5), members full width. */

.hc-field-group {
  box-sizing: border-box;
  display: flex;
  position: relative;
  width: 100%;
  font-family: var(--font-sans);
}

/* --- Orientation = Horizontal (default) ----------------------------- */

.hc-field-group--horizontal {
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-4);
}

/* Figma gives every member `flex: 1 0 0` with a 1px min width so a long
   value cannot push a sibling out of the row. */
.hc-field-group--horizontal > * {
  flex: 1 0 0;
  min-width: 1px;
}

/* --- Orientation = Vertical ----------------------------------------- */

.hc-field-group--vertical {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: var(--spacing-5);
}

.hc-field-group--vertical > * {
  flex: 0 0 auto;
  width: 100%;
}

/* A FieldSeparator between two members spans the group, whichever way it
   runs, rather than taking an equal share of the row. */
.hc-field-group--horizontal > .hc-field-separator {
  flex: 0 0 auto;
}

/* Below the two-column breakpoint a horizontal group folds into a stack;
   two 32px inputs side by side stop being usable well before that. */
@media (max-width: 480px) {
  .hc-field-group--horizontal {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-5);
  }

  .hc-field-group--horizontal > * {
    flex: 0 0 auto;
    width: 100%;
  }
}

/* ---- FieldLegend ---- */
/* FieldLegend — Honeycomb Forms.
   Figma: set 18707:192227, default variant Variant=Legend (18707:192201);
   Variant=Label is 18707:192228. Both are a column with a 2px gap
   (spacing-0-5): a title in foreground over a muted description.
   Legend's title is the 16px step, Label's is the 14px step. */

.hc-field-legend {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-0-5);
  width: 100%;
  padding: 0;
  margin: 0;
  font-family: var(--font-sans);
  overflow-wrap: break-word;
}

/* A <legend> in a fieldset needs its browser defaults cleared before the
   flex column above takes effect. */
.hc-field-legend:is(legend) {
  float: none;
  display: block;
}

.hc-field-legend:is(legend) > .hc-field-legend__title,
.hc-field-legend:is(legend) > .hc-field-legend__description {
  display: block;
}

.hc-field-legend:is(legend) > .hc-field-legend__description {
  margin-top: var(--spacing-0-5);
}

.hc-field-legend__title {
  width: 100%;
  color: var(--base-foreground);
}

.hc-field-legend__description {
  width: 100%;
  color: var(--base-muted-foreground);
}

/* ---- FieldSeparator ---- */
/* FieldSeparator — Honeycomb Forms.
   Figma: 18692:40391 (Field / Separator). A 20px-tall band (Figma h-5,
   which is spacing-5) with a 1px rule running edge to edge at its middle
   and, when there is text, a label chip centred over the rule — the chip
   paints base-background so the rule appears to break around the word.
   The chip's horizontal padding is 8px (spacing-2). */

.hc-field-separator {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--spacing-5);
  font-family: var(--font-sans);
}

/* The rule itself: full width, behind the label. */
.hc-field-separator::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: var(--border-width-border);
  transform: translateY(-50%);
  background-color: var(--base-border);
}

.hc-field-separator__label {
  position: relative;
  padding: 0 var(--spacing-2);
  background-color: var(--base-background);
  color: var(--base-muted-foreground);
  white-space: nowrap;
}

/* ---- HoverCard ---- */
/* HoverCard — Honeycomb / Hover Card (Figma set 216:3141, page 216:2886).
   Variants read: 216:3131 Active=No (default), 216:3142 Active=Yes;
   card measured on 216:3126. Every value below is a Honeycomb token. */

.hc-hover-card {
  box-sizing: border-box;
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
  font-family: var(--font-sans);
}

.hc-hover-card__trigger {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: var(--spacing-2) var(--spacing-2-5);
  border: 0;
  background-color: transparent;
  color: var(--base-primary);
  font-family: inherit;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* Figma underlines the trigger the moment the card is up. */
.hc-hover-card__trigger:hover,
.hc-hover-card--active .hc-hover-card__trigger {
  text-decoration: underline;
}

.hc-hover-card__trigger:focus-visible {
  outline: var(--border-width-border-2) solid var(--base-ring);
  outline-offset: var(--spacing-0-5);
  border-radius: var(--border-radius-rounded-md);
}

/* The card hangs below the trigger, horizontally centred on it. Figma pins it
   at 44px from the top of the 32px-tall trigger — a 12px gap. */
.hc-hover-card__card {
  box-sizing: border-box;
  position: absolute;
  top: 44px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;

  display: flex;
  align-items: flex-start;
  gap: var(--spacing-4);
  width: 320px;
  max-width: 320px;

  padding: var(--spacing-2-5);
  border: var(--border-width-border) solid var(--base-border);
  border-radius: var(--border-radius-rounded-lg);
  background-color: var(--base-popover);
  color: var(--base-popover-foreground);
  box-shadow: var(--shadow-md);
  text-align: left;
  white-space: normal;
}

.hc-hover-card__card > * {
  min-width: 0;
}

/* ---- Input ---- */
/* Input — Honeycomb Forms
   Figma: set 65:533, default variant 65:531.
   Geometry read from Figma: h 32px (spacing-8), padding 4px/10px
   (spacing-1 / spacing-2-5), gap 4px (spacing-1), radius rounded-4xl,
   1px border in base-input. */

.hc-input {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  width: 100%;
  height: var(--spacing-8);
  padding-block: var(--spacing-1);
  padding-inline: var(--spacing-2-5);
  border: var(--border-width-border) solid var(--base-input);
  border-radius: var(--border-radius-rounded-4xl);
  background-color: var(--base-background);
  color: var(--base-foreground);
  font-family: var(--font-sans);
}

/* The text control fills the row; the wrapper owns the chrome. */
.hc-input__control {
  flex: 1 0 0;
  min-width: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  background-color: transparent;
  color: var(--base-foreground);
  font-family: var(--font-sans);
  text-overflow: ellipsis;
}

.hc-input__control::placeholder {
  color: var(--base-muted-foreground);
  opacity: 1;
}

.hc-input__addon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  color: var(--base-muted-foreground);
}

/* --- File variant -------------------------------------------------- */

.hc-input--file {
  cursor: pointer;
}

/* Visually hidden, still focusable and operable by keyboard. */
.hc-input__file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}

.hc-input__file-button {
  flex: 0 0 auto;
  padding-block: 1px;
  color: var(--base-foreground);
}

.hc-input__file-name {
  flex: 1 0 0;
  min-width: 1px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--base-foreground);
}

/* --- States -------------------------------------------------------- */

/* Focus: border swaps to base-ring, plus a 3px ring at 50% (Figma
   effect focus/default). 3px is the Figma spread; no token holds it. */
.hc-input--focus,
.hc-input:focus-within {
  border-color: var(--base-ring);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--base-ring) 50%, transparent);
}

/* Invalid keeps its destructive border and ring even while focused, so
   focus never hides the error. Colour is never the only signal — pair
   this with the Field error message. */
.hc-input--invalid,
.hc-input--invalid:focus-within {
  border-color: var(--base-destructive);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--base-destructive) 20%, transparent);
}

.hc-input--disabled {
  opacity: 0.5;
  background-color: color-mix(in srgb, var(--base-input) 50%, transparent);
  cursor: not-allowed;
}

:root[data-theme="dark"] .hc-input--disabled {
  background-color: color-mix(in srgb, var(--base-input) 80%, transparent);
}

.hc-input--disabled .hc-input__control,
.hc-input--disabled .hc-input__file-button,
.hc-input--disabled .hc-input__file-name {
  cursor: not-allowed;
}

/* ---- InputGroup ---- */
/* Honeycomb — InputGroup
   Figma set 18672:226415; geometry read off 18672:226416 (Input/Default) and
   18677:10665 (Textarea/Default).

   Input row:  h 32px (spacing-8), padding 4px/10px (spacing-1 / spacing-2-5),
               gap 6px (spacing-1-5), radius rounded-4xl, 1px border in base-input.
   Textarea:   column, radius rounded-2xl, no padding on the shell; the field slot
               carries 16px (spacing-4) and a 64px floor.

   Figma paints the resting fill with the bridging variable
   `custom/background dark:input/30` — white in light, base/input at 30% in dark.
   That variable is not reproduced as a token here (see the system notes on
   custom/*), so the mix is written out below. */

.hc-input-group {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  border: var(--border-width-border) solid var(--base-input);
  background-color: var(--base-background);
  color: var(--base-foreground);
  font-family: var(--font-sans);
}

:root[data-theme="dark"] .hc-input-group {
  background-color: color-mix(in srgb, var(--base-input) 30%, transparent);
}

/* --- Type = Input ---------------------------------------------------- */

.hc-input-group--input {
  align-items: center;
  gap: var(--spacing-1-5);
  height: var(--spacing-8);
  padding-block: var(--spacing-1);
  padding-inline: var(--spacing-2-5);
  border-radius: var(--border-radius-rounded-4xl);
}

.hc-input-group--input .hc-input-group__field {
  display: flex;
  flex: 1 0 0;
  align-items: center;
  min-width: 1px;
  overflow: hidden;
}

/* --- Type = Textarea -------------------------------------------------- */

/* overflow is clipped so a full-width block addon cannot overrun the 16px
   corner; Figma sets overflow-clip on this root. */
.hc-input-group--textarea {
  flex-direction: column;
  align-items: stretch;
  border-radius: var(--border-radius-rounded-2xl);
  overflow: hidden;
}

/* 64px is the Figma min-height of the Textarea slot. No spacing token
   carries it, so it stays a literal. */
.hc-input-group--textarea .hc-input-group__field {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 64px;
  padding: var(--spacing-4);
}

/* Block addons run the full width and split their two ends apart. */
.hc-input-group__block {
  display: block;
  flex: 0 0 auto;
  width: 100%;
}

/* --- The field the consumer passes in --------------------------------- */

/* A bare control handed in as children keeps its own behaviour and loses its
   own chrome, so the group's border is the only one on screen. */
.hc-input-group__field > input,
.hc-input-group__field > textarea,
.hc-input-group__field > select {
  flex: 1 0 0;
  width: 100%;
  min-width: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  background-color: transparent;
  color: inherit;
  font: inherit;
  text-overflow: ellipsis;
}

.hc-input-group__field > textarea {
  align-self: stretch;
  height: 100%;
  resize: none;
}

.hc-input-group__field > input::placeholder,
.hc-input-group__field > textarea::placeholder {
  color: var(--base-muted-foreground);
  opacity: 1;
}

/* --- Inline addon slots ----------------------------------------------- */

.hc-input-group__inline {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--spacing-1-5);
}

/* --- States ----------------------------------------------------------- */

/* Focus swaps the border to base-ring and adds the 3px focus/default ring
   (custom/outline = base-ring at 50%). The border change carries the state
   too: base-ring alone measures 2.5:1 on base-background in light, below the
   3:1 a focus indicator needs. Honeycomb's own value, kept exact. */
.hc-input-group--focus,
.hc-input-group:focus-within {
  border-color: var(--base-ring);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--base-ring) 50%, transparent);
}

/* Invalid holds its destructive border through focus, so focus never hides
   the error. Colour is never the only signal — pair this with the Field
   error message. Figma's focus/destructive effect is destructive at 20% in
   light and 40% in dark. */
.hc-input-group--invalid,
.hc-input-group--invalid:focus-within {
  border-color: var(--base-destructive);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--base-destructive) 20%, transparent);
}

:root[data-theme="dark"] .hc-input-group--invalid,
:root[data-theme="dark"] .hc-input-group--invalid:focus-within {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--base-destructive) 40%, transparent);
}

.hc-input-group--disabled {
  opacity: 0.5;
}

.hc-input-group--disabled .hc-input-group__field > input,
.hc-input-group--disabled .hc-input-group__field > textarea,
.hc-input-group--disabled .hc-input-group__field > select {
  cursor: not-allowed;
}

/* ---- InputGroupAddonBlock ---- */
/* Honeycomb — InputGroup / Addon Block
   Figma set 18677:10743; values read off 18677:10364 (Align=Start) and
   18677:10744 (Align=End).

   Both variants return the same box: full width, items centred, two groups
   pushed to opposite ends, 10px/8px padding (spacing-2-5 / spacing-2) and an
   8px gap (spacing-2) within each group. Align records which edge of the
   field the block attaches to; it changes nothing inside the block. */

.hc-ig-addon-block {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-block: var(--spacing-2);
  padding-inline: var(--spacing-2-5);
  font-family: var(--font-sans);
  color: var(--base-muted-foreground);
}

.hc-ig-addon-block__group {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--spacing-2);
  min-width: 0;
}

/* Optional vertical rule between two things at the same end: 20px tall
   (spacing-5), one hairline wide, in base-border — a divider, never a
   signal. */
.hc-ig-addon-block__separator {
  display: block;
  flex: 0 0 auto;
  width: var(--border-width-border);
  height: var(--spacing-5);
  background-color: var(--base-border);
}

/* ---- InputGroupAddonInline ---- */
/* Honeycomb — InputGroup / Addon Inline
   Figma set 18677:9902, default 18677:9901.

   Every variant is the same slot: a shrink-to-fit flex box centred on the
   field's text baseline. What changes is the content it holds. The three
   that carry chrome of their own are Check Circle (a filled disc), Text
   (a type style and a colour) and the sized icon box. */

.hc-ig-addon-inline {
  box-sizing: border-box;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  color: var(--base-muted-foreground);
}

/* --- Icon-sized slots: 16px square (spacing-4), 12px mark inside ------- */

.hc-ig-addon-inline--icon,
.hc-ig-addon-inline--spinner,
.hc-ig-addon-inline--tooltip {
  width: var(--spacing-4);
  height: var(--spacing-4);
}

.hc-ig-addon-inline--icon > svg,
.hc-ig-addon-inline--icon > img,
.hc-ig-addon-inline--spinner > svg,
.hc-ig-addon-inline--spinner > img,
.hc-ig-addon-inline--tooltip > svg,
.hc-ig-addon-inline--tooltip > img {
  display: block;
  width: 100%;
  height: 100%;
}

/* --- Check Circle ------------------------------------------------------ */

/* Figma fills the disc with base/foreground. The mark on it is set here to
   base-background — the only pairing in the system that holds in both
   themes (19.8:1 light, 19.0:1 dark). */
.hc-ig-addon-inline--check-circle {
  width: var(--spacing-4);
  height: var(--spacing-4);
  min-width: var(--spacing-4);
  min-height: var(--spacing-4);
  border-radius: var(--border-radius-rounded-full);
  background-color: var(--base-foreground);
  color: var(--base-background);
  overflow: hidden;
}

.hc-ig-addon-inline__mark {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--spacing-3);
  height: var(--spacing-3);
}

.hc-ig-addon-inline__mark > svg,
.hc-ig-addon-inline__mark > img {
  display: block;
  width: 100%;
  height: 100%;
}

/* --- Text -------------------------------------------------------------- */

/* A prefix or suffix: 4.7:1 on base-background light, 7.9:1 dark. */
.hc-ig-addon-inline--text {
  color: var(--base-muted-foreground);
  white-space: nowrap;
}

/* --- Slots that hold a control ---------------------------------------- */

/* Kbd, Button, Tooltip trigger and Dropdown all align to the top of the row
   in Figma rather than to its centre, and size themselves to their child. */
.hc-ig-addon-inline--kbd,
.hc-ig-addon-inline--button,
.hc-ig-addon-inline--dropdown {
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--spacing-1);
}

/* ---- InputOTP ---- */
/* InputOTP — Honeycomb / InputOTP
   Figma set 81:141, default variant 81:140 (Variant=Digits Only, State=Default).
   Every variant is the same 32x32 slot in a different grouping. */

.hc-input-otp {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans);
  color: var(--base-foreground);
}

/* A run of slots sharing hairlines — the group is what the separator splits. */
.hc-input-otp__group {
  display: flex;
  flex: none;
  align-items: center;
}

/* --- Digits Only: one unbroken run of six ---------------------------- */

.hc-input-otp--digitsOnly {
  justify-content: center;
  gap: 0;
}

/* --- With Separator (3 x 2) and Simple (2 x 3) ----------------------- */

.hc-input-otp--withSeparator,
.hc-input-otp--simple {
  gap: var(--spacing-0-5);
}

/* --- With Spacing: six separate rounded boxes ------------------------ */

.hc-input-otp--withSpacing {
  gap: var(--spacing-2);
}

/* The Lucide minus between groups, drawn at 24px as Figma places it. */
.hc-input-otp__separator {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  /* 24px — Figma places the glyph at its full 24x24 grid here, not at 16px. */
  width: var(--spacing-6);
  height: var(--spacing-6);
  color: var(--base-muted-foreground);
}

.hc-input-otp__separator > svg {
  display: block;
  width: 100%;
  height: 100%;
}

.hc-input-otp.is-disabled .hc-input-otp__separator {
  opacity: 0.5;
}

/* ---- InputOTPSlot ---- */
/* InputOTPSlot — Honeycomb / InputOTP / Slot
   Figma set 81:122, default variant 81:120 (State=Default).
   32x32 box (Figma width/w-8, height/h-8), 1px border in base-input. */

.hc-input-otp-slot {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--spacing-8);
  height: var(--spacing-8);
  border: var(--border-width-border) solid var(--base-input);
  background-color: var(--base-background);
  color: var(--base-foreground);
  font-family: var(--font-sans);
  text-align: center;
  overflow: hidden;
}

.hc-input-otp-slot__value {
  display: block;
  width: 100%;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
 * Joined slots share one hairline: the neighbour's right border is the left
 * border here. Dropping it rather than overlapping keeps every slot exactly
 * 32px, which is what makes a group of six measure 192px as Figma draws it.
 */
.hc-input-otp-slot--joined {
  border-left: 0;
}

/* --- Corners --------------------------------------------------------
 * Figma rounds a group's outer ends with rounded-3xl (24px) and its inner
 * ends with rounded-md (8px). Honeycomb ships no 24px step — but the box is
 * 32px tall, so CSS clamps a 24px corner pair to 16px anyway, and
 * rounded-2xl (16px) renders pixel-identical to the Figma value.
 */

.hc-input-otp-slot--start-md {
  border-top-left-radius: var(--border-radius-rounded-md);
  border-bottom-left-radius: var(--border-radius-rounded-md);
}

.hc-input-otp-slot--start-lg {
  border-top-left-radius: var(--border-radius-rounded-2xl);
  border-bottom-left-radius: var(--border-radius-rounded-2xl);
}

.hc-input-otp-slot--end-md {
  border-top-right-radius: var(--border-radius-rounded-md);
  border-bottom-right-radius: var(--border-radius-rounded-md);
}

.hc-input-otp-slot--end-lg {
  border-top-right-radius: var(--border-radius-rounded-2xl);
  border-bottom-right-radius: var(--border-radius-rounded-2xl);
}

/* --- States ---------------------------------------------------------
 * Filled and Focus are never told apart by colour. Filled is carrying a
 * character — a glyph the empty box does not have — and Focus is carrying a
 * 3px ring, a change in geometry. Both differences survive greyscale and
 * both survive a colour-vision difference, so Figma's treatment is kept
 * exactly: Filled kicks the border no further than Default does.
 */

.hc-input-otp-slot.is-filled {
  border-color: var(--base-input);
}

/*
 * Focus: the border swaps to base-ring and a 3px ring is added. The ring
 * alone is 2.5:1 in light, so the border change carries the state.
 * z-index lifts the ring over the neighbouring slots it overlaps.
 */
.hc-input-otp-slot.is-focus {
  z-index: 1;
  border-color: var(--base-ring);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--base-ring) 50%, transparent);
}

.hc-input-otp-slot.is-invalid {
  z-index: 1;
  border-color: var(--base-destructive);
}

.hc-input-otp-slot.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---- Item ---- */
/* Item — Honeycomb / Item (Figma 18672:198607) */

.hc-item {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-2-5);
  padding: var(--spacing-4);
  /*
   * Every variant carries the border box so Default, Outline and Muted are
   * exactly the same size; only Outline paints it. This matches the Figma set,
   * where all three variants measure the same at every size.
   */
  border: var(--border-width-border) solid transparent;
  border-radius: var(--border-radius-rounded-2xl);
  overflow: hidden;
  background-color: transparent;
  color: var(--base-foreground);
  font-family: var(--font-sans);
}

.hc-item--outline {
  border-color: var(--base-border);
}

.hc-item--muted {
  background-color: var(--base-muted);
}

.hc-item__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.hc-item__flex {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-2);
  width: 100%;
}

.hc-item__media {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  color: var(--base-foreground);
}

.hc-item__content {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--spacing-1);
  min-width: 0;
  word-break: break-word;
}

.hc-item__title {
  width: 100%;
  /* Measured 16px in Figma — tighter than the type class's own line height. */
  line-height: var(--spacing-4);
  color: var(--base-foreground);
}

.hc-item__description {
  width: 100%;
  overflow: hidden;
  color: var(--base-muted-foreground);
  text-overflow: ellipsis;
}

/*
 * At size xs the description drops to 12px/16px at regular weight. The type
 * ramp has no regular 12px class, so the medium one supplies family, size and
 * line height and the weight is corrected back here.
 */
.hc-item--size-xs .hc-item__description {
  font-weight: 400;
}

.hc-item__actions {
  display: flex;
  flex: none;
  align-self: stretch;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-2);
}

/* ---- ItemActions ---- */
/* ItemActions — Honeycomb / Item / Actions (Figma set 18672:218310) */

.hc-item-actions {
  box-sizing: border-box;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-2);
  color: var(--base-foreground);
  font-family: var(--font-sans);
}

/*
 * Type = Text + Button. Figma sets the label at 12px/16px regular; the ramp
 * carries no regular 12px class, so the medium one supplies family, size and
 * line height and the weight is corrected back here — as on Item.
 */
.hc-item-actions__text {
  flex: none;
  color: var(--base-muted-foreground);
  font-weight: 400;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Type = Icon: a bare 16px glyph, no button box around it. */
.hc-item-actions__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--spacing-4);
  height: var(--spacing-4);
  color: inherit;
}

.hc-item-actions__icon > svg,
.hc-item-actions__icon > img {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---- ItemGroup ---- */
/* ItemGroup — Honeycomb / ItemGroup (Figma 18672:218902) */

.hc-item-group {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /*
   * The Figma group spaces its rows rather than dividing them: each Item draws
   * its own border and 16px radius, and spacing-4 separates one from the next.
   */
  gap: var(--spacing-4);
  width: 100%;
  background-color: transparent;
  color: var(--base-foreground);
  font-family: var(--font-sans);
}

.hc-item-group__row {
  box-sizing: border-box;
  display: flex;
  width: 100%;
}

.hc-item-group__row > * {
  flex: 1 0 0;
  min-width: 0;
}

/* ---- ItemMedia ---- */
/* ItemMedia — Honeycomb / Item / Media (Figma set 18672:6043) */

.hc-item-media {
  box-sizing: border-box;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: var(--base-foreground);
  font-family: var(--font-sans);
}

/* Variant = Icon (Simple): a bare 16px glyph, no box. */
.hc-item-media__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--spacing-4);
  height: var(--spacing-4);
  color: inherit;
}

.hc-item-media__icon > svg,
.hc-item-media__icon > img {
  display: block;
  width: 100%;
  height: 100%;
}

/*
 * Variant = Icon: the same glyph inside a 32px tile.
 * Figma rounds the tile with border-radius/rounded-sm (6px), a Honeycomb
 * variable that is not resolvable from this file; rounded-md ships in its
 * place, as it does on Kbd.
 */
.hc-item-media--icon {
  width: var(--spacing-8);
  height: var(--spacing-8);
  border: var(--border-width-border) solid var(--base-border);
  border-radius: var(--border-radius-rounded-md);
  background-color: var(--base-muted);
}

/* Variant = Image: a 40px thumbnail, same radius substitution. */
.hc-item-media--image {
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: var(--border-radius-rounded-md);
  background-color: var(--base-muted);
}

.hc-item-media__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--border-radius-rounded-md);
}

/* Variant = Avatar: holds the consumer's 32px round avatar. */
.hc-item-media--avatar {
  width: var(--spacing-8);
  height: var(--spacing-8);
  border-radius: var(--border-radius-rounded-full);
  background-color: var(--base-muted);
}

.hc-item-media--avatar > * {
  border-radius: var(--border-radius-rounded-full);
}

/* Variant = AvatarGroup: the stack sizes itself; the slot only aligns it. */
.hc-item-media--avatar-group {
  justify-content: flex-start;
}

/* ---- Kbd ---- */
/* Kbd — Honeycomb. Figma set 18665:781, default variant 18665:780. */

.hc-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-1);
  box-sizing: border-box;
  height: var(--spacing-5);
  min-width: var(--spacing-5);
  padding: 0 var(--spacing-1);
  border-radius: var(--border-radius-rounded-md);
  font-family: var(--font-sans);
  white-space: nowrap;
  vertical-align: middle;
}

/* Background = Default — a key on an ordinary surface. */
.hc-kbd--default {
  background-color: var(--base-muted);
  color: var(--base-muted-foreground);
}

/* Background = Primary — a key sitting ON a --base-primary fill, so the
   ground is that surface's own foreground token at 20%, and the label is
   the full-strength token. Both flip with the theme; a literal white
   would disappear against the dark theme's amber primary. */
.hc-kbd--primary {
  background-color: color-mix(in srgb, var(--base-primary-foreground) 20%, transparent);
  color: var(--base-primary-foreground);
}

.hc-kbd__label {
  display: inline-block;
  white-space: nowrap;
}

.hc-kbd__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--spacing-3);
  height: var(--spacing-3);
}

.hc-kbd__icon > svg,
.hc-kbd__icon > img {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---- KbdGroup ---- */
/* Honeycomb — KbdGroup
   Figma set 18665:995; values read off 18665:852 (Type=Default) and
   18665:996 (Type=+ Separated).

   One row, 4px gap (spacing-1), items centred. The only difference between
   the two variants is the "+" that Separated drops between neighbouring
   keys: text-xs/leading-normal/normal in base-muted-foreground. */

.hc-kbd-group {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  font-family: var(--font-sans);
  vertical-align: middle;
}

.hc-kbd-group__separator {
  display: inline-block;
  flex: 0 0 auto;
  color: var(--base-muted-foreground);
  white-space: nowrap;
  user-select: none;
}

/* ---- LineChart ---- */
/* Honeycomb — LineChart
   Read from Figma eri86fUvOPsnYIL1G6aiBc, set 520:6888,
   default variant Type=Basic 520:6889 (293x246).

   The same frame as the area chart: the plot, a 36px gap, then the legend. The
   line is a 2px stroke in the series colour with round caps and joins; the
   optional dot is the 8px Charts / Dot node, ringed in the page background so
   it reads on top of the line. Grid rules are base-border at
   border-width/border; labels are text/xs at weight 400. */

.hc-line-chart {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Figma's plot-to-legend gap is 36px and Honeycomb's spacing scale steps
     32 -> 48, so this stays a literal. */
  gap: 36px;
  width: 100%;
  font-family: var(--font-sans);
}

.hc-line-chart__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.hc-line-chart__grid {
  stroke: var(--base-border);
  stroke-width: var(--border-width-border);
  shape-rendering: crispEdges;
}

.hc-line-chart__line {
  fill: none;
  /* 2px is border-width/border-2, the only 2px value Honeycomb binds. */
  stroke-width: var(--border-width-border-2);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hc-line-chart__dot {
  stroke: var(--base-background);
  /* 2px is border-width/border-2, the only 2px value Honeycomb binds. */
  stroke-width: var(--border-width-border-2);
}

.hc-line-chart__label {
  fill: var(--base-muted-foreground);
}

/* Figma's Charts / Dot sets its label in base-foreground, not muted. */
.hc-line-chart__value {
  fill: var(--base-foreground);
}

.hc-line-chart__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: var(--spacing-4);
}

.hc-line-chart__legend-item {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: var(--spacing-1-5);
}

/* Figma's rounded-xs (2px) is not in this token set; rounded-md is the nearest
   bound value and draws the 8px square as a dot. See the README. */
.hc-line-chart__swatch {
  flex: none;
  width: var(--spacing-2);
  height: var(--spacing-2);
  border-radius: var(--border-radius-rounded-md);
  background-color: var(--base-chart-1);
}

.hc-line-chart__legend-label {
  color: var(--base-foreground);
  white-space: nowrap;
}

/* ---- Menubar ---- */
/* Menubar — Honeycomb / Menubar (Figma 216:1522) */

.hc-menubar {
  box-sizing: border-box;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  padding: var(--spacing-1);
  border: var(--border-width-border) solid var(--base-border);
  border-radius: var(--border-radius-rounded-md);

  /*
   * The bar sits on the page, not over it, so it takes --base-background
   * rather than the popover pair the menus it opens use.
   */
  background-color: var(--base-background);
  color: var(--base-foreground);

  font-family: var(--font-sans);
}

.hc-menubar > * {
  flex: none;
}

/* ---- MenubarItem ---- */
/* MenubarItem — Honeycomb / Menubar / Item / Default (Figma 419:6748) */

.hc-menubar-item {
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-1-5);
  width: 100%;
  padding-top: var(--spacing-1);
  padding-right: var(--spacing-1-5);
  padding-bottom: var(--spacing-1);
  padding-left: var(--spacing-1-5);
  border-radius: var(--border-radius-rounded-md);
  background-color: transparent;
  color: var(--base-popover-foreground);
  font-family: var(--font-sans);
  cursor: default;
  user-select: none;
}

/*
 * Level 2 reserves a 28px left gutter for the check or radio marker, so every
 * row in that menu lines its labels up whether it carries a marker or not.
 */
.hc-menubar-item.is-indented {
  padding-left: var(--spacing-7);
}

/*
 * Destructive is the word plus red TEXT, never a red fill —
 * --base-destructive-foreground does not clear 4.5:1 on the dark red.
 */
.hc-menubar-item--destructive {
  color: var(--base-destructive);
}

.hc-menubar-item:hover,
.hc-menubar-item.is-hover {
  background-color: var(--base-accent);
  color: var(--base-accent-foreground);
}

.hc-menubar-item--destructive:hover,
.hc-menubar-item--destructive.is-hover {
  color: var(--base-destructive);
}

.hc-menubar-item:focus-visible {
  outline: var(--border-width-border-2) solid var(--base-ring);
  outline-offset: -2px;
}

.hc-menubar-item.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

.hc-menubar-item__mark {
  position: absolute;
  top: 50%;
  left: var(--spacing-1-5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  color: inherit;
}

.hc-menubar-item__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: inherit;
}

.hc-menubar-item__mark > svg,
.hc-menubar-item__icon > svg {
  display: block;
  width: 16px;
  height: 16px;
}

.hc-menubar-item__label {
  flex: 1 0 0;
  min-width: 0;
  overflow: hidden;
  color: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
 * The shortcut is 12px/16px at regular weight. The ramp has no regular 12px
 * class, so the medium one supplies family, size and line height and the
 * weight is corrected back here.
 */
.hc-menubar-item__shortcut {
  flex: none;
  color: var(--base-muted-foreground);
  font-weight: 400;
  white-space: nowrap;
}

.hc-menubar-item:hover .hc-menubar-item__shortcut,
.hc-menubar-item.is-hover .hc-menubar-item__shortcut {
  color: inherit;
}

.hc-menubar-item--destructive:hover .hc-menubar-item__shortcut,
.hc-menubar-item--destructive.is-hover .hc-menubar-item__shortcut {
  color: var(--base-destructive);
}

/* ---- MenubarTrigger ---- */
/* MenubarTrigger — Honeycomb / Menubar / Trigger (Figma 210:3528) */

.hc-menubar-trigger {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  padding: var(--spacing-0-5) var(--spacing-1-5);

  /*
   * Figma corners the trigger at 6px, a radius Honeycomb has no token for.
   * The nearest token, rounded-md at 8px, is used instead.
   */
  border-radius: var(--border-radius-rounded-md);

  border: 0;
  background-color: transparent;
  color: var(--base-popover-foreground);
  font-family: var(--font-sans);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  appearance: none;
}

.hc-menubar-trigger:hover,
.hc-menubar-trigger.is-open,
.hc-menubar-trigger.is-open > .hc-menubar-trigger__button {
  background-color: var(--base-accent);
  color: var(--base-accent-foreground);
}

.hc-menubar-trigger:focus-visible,
.hc-menubar-trigger__button:focus-visible {
  outline: var(--border-width-border-2) solid var(--base-ring);
  outline-offset: var(--spacing-0-5);
}

.hc-menubar-trigger__label {
  color: inherit;
}

/*
 * When a `menu` is handed in, the trigger becomes the anchor and the inner
 * button carries the padding and the highlight instead.
 */
.hc-menubar-trigger--anchored {
  position: relative;
  padding: 0;
  background-color: transparent;
}

.hc-menubar-trigger__button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  padding: var(--spacing-0-5) var(--spacing-1-5);
  border: 0;
  border-radius: var(--border-radius-rounded-md);
  background-color: transparent;
  color: inherit;
  font-family: var(--font-sans);
  white-space: nowrap;
  cursor: pointer;
  appearance: none;
}

/*
 * Placement only says where the attached menu sits. Figma measures the
 * bottom menu at 32px below the trigger's top edge and 4px to its left.
 */
.hc-menubar-trigger__menu {
  position: absolute;
  left: calc(-1 * var(--spacing-1));
  z-index: 1;
  display: block;
}

.hc-menubar-trigger--bottom .hc-menubar-trigger__menu {
  top: var(--spacing-8);
}

.hc-menubar-trigger--top .hc-menubar-trigger__menu {
  bottom: var(--spacing-8);
}

/* ---- NavigationMenu ---- */
/* NavigationMenu — Honeycomb / Navigation Menu (Figma 210:2036)
   A row of NavigationMenuButton triggers, gapped by spacing-1. The frame
   carries no ground and no border of its own: it sits on whatever the header
   behind it uses. */

.hc-navigation-menu {
  display: block;
  box-sizing: border-box;
  font-family: var(--font-sans);
  color: var(--base-foreground);
}

.hc-navigation-menu__list {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * Each item is the anchor for its own popover, so the popover can be placed
 * against the trigger rather than against the whole bar.
 */
.hc-navigation-menu__item {
  position: relative;
  display: flex;
  align-items: center;
}

/* The vertical reading of the same bar — a sidebar rather than a header. */
.hc-navigation-menu--vertical .hc-navigation-menu__list {
  flex-direction: column;
  align-items: stretch;
}

.hc-navigation-menu--vertical .hc-navigation-menu__item > * {
  width: 100%;
}

/* ---- NavigationMenuButton ---- */
/* NavigationMenuButton — Honeycomb / NavigationMenu / Button
   Figma set 210:2018, default variant 210:2016 (Variant=Trigger, State=Default).
   Geometry from Figma: h 36px, px spacing-2-5, py spacing-2, gap spacing-1,
   radius rounded-lg at rest and rounded-full once lit. */

.hc-navigation-menu-button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-1);
  /* 36px is the Figma height token height/h-9; Honeycomb ships no 36px
     spacing step, so it is written as spacing-8 + spacing-1. */
  height: calc(var(--spacing-8) + var(--spacing-1));
  margin: 0;
  padding-block: var(--spacing-2);
  padding-inline: var(--spacing-2-5);
  border: var(--border-width-border) solid transparent;
  border-radius: var(--border-radius-rounded-lg);
  background-color: transparent;
  color: var(--base-foreground);
  font-family: var(--font-sans);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.hc-navigation-menu-button__label {
  display: block;
  word-break: break-word;
}

.hc-navigation-menu-button__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  /* Figma width/w-3 = 12px, which is --spacing-3 on Honeycomb's scale. */
  width: var(--spacing-3);
  height: var(--spacing-3);
  transition: transform 120ms ease;
}

.hc-navigation-menu-button__glyph {
  display: block;
  width: 100%;
  height: 100%;
}

/* --- States -------------------------------------------------------- */

/*
 * Hover and open share one ground. The radius change from rounded-lg to
 * rounded-full is Figma's, and it is doing real work: it means the lit state
 * is legible as a shape change and not by colour alone.
 */
.hc-navigation-menu-button:hover,
.hc-navigation-menu-button.is-hover,
.hc-navigation-menu-button.is-focused {
  border-radius: var(--border-radius-rounded-full);
  background-color: var(--base-accent);
  color: var(--base-accent-foreground);
}

/* The chevron flips once the panel is open — the sighted half of aria-expanded. */
.hc-navigation-menu-button.is-open .hc-navigation-menu-button__icon,
.hc-navigation-menu-button[aria-expanded='true'] .hc-navigation-menu-button__icon {
  transform: rotate(180deg);
}

/*
 * Focus is the border swap plus a 3px ring. The ring alone measures 2.5:1 in
 * light, so the border change is not decoration — it is the part that carries
 * the state at AA.
 */
.hc-navigation-menu-button:focus-visible,
.hc-navigation-menu-button.is-focused {
  border-color: var(--base-ring);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--base-ring) 50%, transparent);
}

.hc-navigation-menu-button[aria-current='page'] {
  background-color: var(--base-accent);
  color: var(--base-accent-foreground);
  border-radius: var(--border-radius-rounded-full);
}

.hc-navigation-menu-button:disabled,
.hc-navigation-menu-button[aria-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---- NavigationMenuLink ---- */
/* NavigationMenuLink — Honeycomb / NavigationMenu / Menu Link
   Figma set 17375:2761, default variant 210:2044 (Type=Default, State=Default).
   Both types: px spacing-4, py spacing-3, radius rounded-2xl, min-width 228px. */

.hc-navigation-menu-link {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  /* 228px is the Figma min-width of a row inside the popover. No token. */
  min-width: 228px;
  margin: 0;
  padding-block: var(--spacing-3);
  padding-inline: var(--spacing-4);
  border: 0;
  border-radius: var(--border-radius-rounded-2xl);
  background-color: transparent;
  color: var(--base-popover-foreground);
  font-family: var(--font-sans);
  text-align: left;
  text-decoration: none;
  word-break: break-word;
  cursor: pointer;
}

/* Default: a title over a description. */
.hc-navigation-menu-link--default {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-1);
}

/* Simple: an icon beside one line. */
.hc-navigation-menu-link--simple {
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-2);
}

.hc-navigation-menu-link__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--spacing-4);
  height: var(--spacing-4);
  color: var(--base-popover-foreground);
}

.hc-navigation-menu-link__icon > svg {
  display: block;
  width: 100%;
  height: 100%;
}

.hc-navigation-menu-link__title {
  display: block;
  color: inherit;
}

.hc-navigation-menu-link--simple .hc-navigation-menu-link__title {
  flex: 1 0 0;
  min-width: 1px;
}

.hc-navigation-menu-link__description {
  display: block;
  width: 100%;
  color: var(--base-muted-foreground);
}

/* --- States -------------------------------------------------------- */

.hc-navigation-menu-link:hover,
.hc-navigation-menu-link.is-hover {
  background-color: var(--base-accent);
  color: var(--base-accent-foreground);
}

.hc-navigation-menu-link:hover .hc-navigation-menu-link__icon,
.hc-navigation-menu-link.is-hover .hc-navigation-menu-link__icon {
  color: inherit;
}

/*
 * Figma draws no focus variant for this row. Focus follows the Honeycomb rule
 * used everywhere else — a 3px ring in base-ring plus the lit ground, so the
 * focused row is never marked by the ring alone.
 */
.hc-navigation-menu-link:focus-visible {
  outline: none;
  background-color: var(--base-accent);
  color: var(--base-accent-foreground);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--base-ring) 50%, transparent);
}

.hc-navigation-menu-link[aria-current='page'] {
  background-color: var(--base-accent);
  color: var(--base-accent-foreground);
}

/* ---- NavigationMenuPopover ---- */
/* NavigationMenuPopover — Honeycomb / NavigationMenu / Popover
   Figma set 17375:179953, default variant 17375:179950 (Type=List).
   Shared shell: popover ground, 1px border, rounded-md, p spacing-1, shadow-sm. */

.hc-navigation-menu-popover {
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  padding: var(--spacing-1);
  border: var(--border-width-border) solid var(--base-border);
  border-radius: var(--border-radius-rounded-md);
  background-color: var(--base-popover);
  color: var(--base-popover-foreground);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-sans);
}

/* --- List: one column, 320px ---------------------------------------- */

.hc-navigation-menu-popover--list {
  flex-direction: column;
  /* 320px is Figma min-width/min-w-xs. No spacing token holds it. */
  width: 320px;
  min-width: 320px;
}

/* --- Simple list (with or without icons): same 320px column --------- */

.hc-navigation-menu-popover--simple-list {
  flex-direction: column;
  width: 320px;
  min-width: 320px;
}

/*
 * Two column: a wrapping row where each row min-width of 228px plus the
 * spacing-2 gap lets exactly two fit in 512px and no more.
 */
.hc-navigation-menu-popover--two-column {
  flex-flow: row wrap;
  align-content: flex-start;
  gap: var(--spacing-2);
  width: 512px;
  min-width: 512px;
}

.hc-navigation-menu-popover--two-column > * {
  flex: 1 0 0;
  min-width: 228px;
}

/* --- Custom: a feature panel beside a column of rows ---------------- */

.hc-navigation-menu-popover--custom {
  flex-direction: row;
  gap: var(--spacing-2);
  width: 518px;
  min-width: 512px;
}

/* The feature tile Figma draws on the left of the Custom panel. */
.hc-navigation-menu-popover__feature {
  box-sizing: border-box;
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: var(--spacing-1);
  /* 210px is a Figma literal. */
  width: 210px;
  align-self: stretch;
  padding: var(--spacing-6);
  border-radius: var(--border-radius-rounded-md);
  /*
   * Figma washes base-muted with a white-to-transparent gradient through a
   * custom/alpha bridging variable this token set does not carry. The flat
   * muted ground ships instead, so the tile reads a touch stronger in light.
   */
  background-color: var(--base-muted);
  color: var(--base-popover-foreground);
}

.hc-navigation-menu-popover__feature-title {
  display: block;
  width: 100%;
  padding-top: var(--spacing-4);
  padding-bottom: var(--spacing-2);
  color: var(--base-popover-foreground);
}

.hc-navigation-menu-popover__feature-text {
  display: block;
  width: 100%;
  color: var(--base-muted-foreground);
}

/* The column of rows beside the feature tile. */
.hc-navigation-menu-popover__column {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-2);
  min-width: 1px;
}

/* ---- Pagination ---- */
/* Honeycomb — Pagination
   Read from Figma eri86fUvOPsnYIL1G6aiBc, node 208:1701.
   Pagination is a standalone frame, not a variant set: one row, spacing/1
   between stops, vertically centred. Everything else belongs to
   PaginationItem. */

.hc-pagination {
  display: block;
  font-family: var(--font-sans);
}

.hc-pagination__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hc-pagination__item {
  display: inline-flex;
  align-items: center;
}

/* ---- PaginationItem ---- */
/* Honeycomb — PaginationItem
   Read from Figma eri86fUvOPsnYIL1G6aiBc, set 208:1651.
   Variants opened: 208:1624 Previous/Default, 296:415 Previous/Hover,
   17428:70533 Previous/Focus, 296:399 Previous/Disabled,
   208:1623 Next/Default, 296:418 Next/Hover, 17428:70536 Next/Focus,
   296:402 Next/Disabled, 296:390 Link/Default, 296:387 Link/Hover,
   17428:70539 Link/Focus, 296:389 Link/Active, 296:388 Link/Active (Hover),
   17428:70662 Link/Active (Focus), 296:386 Link/Disabled,
   208:1645 Ellipsis/Default.

   Two things are worth naming. The resting radius is rounded-md and every
   lit state (hover, focus, active) switches to rounded-full — the pill is
   the signal that the item is live. And Figma's focus effect is a 3px drop
   shadow in custom/outline, an alpha token not in this set; it is drawn at
   full --base-ring here, and a --base-ring border is added so focus is never
   carried by the ring alone. */

.hc-pagination-item {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-1);
  height: var(--spacing-8);
  margin: 0;
  border: var(--border-width-border) solid transparent;
  border-radius: var(--border-radius-rounded-md);
  background-color: transparent;
  font-family: var(--font-sans);
  color: var(--base-foreground);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 120ms ease, color 120ms ease,
    border-color 120ms ease, border-radius 120ms ease, box-shadow 120ms ease;
}

a.hc-pagination-item,
button.hc-pagination-item {
  cursor: pointer;
}

.hc-pagination-item__glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--spacing-4);
  height: var(--spacing-4);
}

.hc-pagination-item__icon {
  display: block;
  width: 100%;
  height: 100%;
}

.hc-pagination-item__label {
  display: inline-block;
}

/* ---------- Variant: Previous / Next ---------- */
/* Asymmetric padding: the tighter side is the one the chevron is on. */

.hc-pagination-item--previous {
  padding: 0 var(--spacing-4) 0 var(--spacing-2-5);
}

.hc-pagination-item--next {
  padding: 0 var(--spacing-2-5) 0 var(--spacing-4);
}

/* ---------- Variant: Link ---------- */
/* A fixed 32x32 square so a run of page numbers stays on an even rhythm. */

.hc-pagination-item--link {
  width: var(--spacing-8);
  padding: 0;
}

/* ---------- Variant: Ellipsis ---------- */

.hc-pagination-item--ellipsis {
  width: var(--spacing-8);
  padding: 0;
  color: var(--base-foreground);
}

/* ---------- State: hover ---------- */

.hc-pagination-item:hover:not(.hc-pagination-item--is-disabled),
.hc-pagination-item--is-hover {
  border-radius: var(--border-radius-rounded-full);
  background-color: var(--base-accent);
  color: var(--base-accent-foreground);
}

.hc-pagination-item--ellipsis:hover {
  border-radius: var(--border-radius-rounded-md);
  background-color: transparent;
  color: var(--base-foreground);
}

/* ---------- State: active (the current page) ---------- */

.hc-pagination-item--is-active {
  border-radius: var(--border-radius-rounded-full);
  border-color: var(--base-input);
  background-color: var(--base-background);
  color: var(--base-foreground);
}

.hc-pagination-item--is-active:hover,
.hc-pagination-item--is-active.hc-pagination-item--is-hover {
  border-color: var(--base-input);
  background-color: var(--base-accent);
  color: var(--base-accent-foreground);
}

/* ---------- State: focus ---------- */

.hc-pagination-item:focus-visible,
.hc-pagination-item--is-focus {
  outline: none;
  border-radius: var(--border-radius-rounded-full);
  border-color: var(--base-ring);
  box-shadow: 0 0 0 3px var(--base-ring);
}

.hc-pagination-item--is-active:focus-visible,
.hc-pagination-item--is-active.hc-pagination-item--is-focus {
  background-color: var(--base-background);
}

/* ---------- State: disabled ---------- */

.hc-pagination-item--is-disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .hc-pagination-item { transition: none; }
}

/* ---- PieChart ---- */
/* Honeycomb — PieChart
   Read from Figma eri86fUvOPsnYIL1G6aiBc, set 523:7181,
   default variant Type=Basic 523:7119 (213x213, a 192px pie).

   Slices run the five-slot series ramp clockwise from twelve o'clock, each one
   separated from its neighbour by a 2px stroke. Slice labels are text/xs at
   weight 400. The legend sits below with a 36px gap. */

.hc-pie-chart {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Figma's pie-to-legend gap is 36px; Honeycomb's spacing scale steps
     32 -> 48, so this stays a literal. */
  gap: 36px;
  width: 100%;
  font-family: var(--font-sans);
}

.hc-pie-chart__svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Figma separates the slices with tailwind colors/base/white — a hard-coded
   literal that stays white in the dark theme, where it draws bright seams
   across a dark page. base-background is the same colour in light and inverts
   correctly, so it is used instead. This is a deliberate deviation; see the
   README. */
.hc-pie-chart__slice {
  stroke: var(--base-background);
  /* 2px is border-width/border-2, the only 2px value Honeycomb binds. */
  stroke-width: var(--border-width-border-2);
  stroke-linejoin: round;
}

/* The in-slice label has the same problem and the same answer: Figma sets it
   in literal white, this uses base-background. Read the README before relying
   on it — it is a repetition of the legend, never the only route to a name. */
.hc-pie-chart__label {
  fill: var(--base-background);
}

.hc-pie-chart__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: var(--spacing-4);
}

.hc-pie-chart__legend-item {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: var(--spacing-1-5);
}

/* Figma's rounded-xs (2px) is not in this token set; rounded-md is the nearest
   bound value and draws the 8px square as a dot. See the README. */
.hc-pie-chart__swatch {
  flex: none;
  width: var(--spacing-2);
  height: var(--spacing-2);
  border-radius: var(--border-radius-rounded-md);
  background-color: var(--base-chart-1);
}

.hc-pie-chart__legend-label {
  color: var(--base-foreground);
  white-space: nowrap;
}

/* ---- Popover ---- */
/* Popover — Honeycomb / Popover (Figma 195:1621, page "Popover" 193:1388).
   Every value below is a Honeycomb token. */

.hc-popover {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-2-5);

  /* Figma draws the panel at 320px. A popover has to fit its controls, so
     the measured width is applied as the minimum rather than a fixed width. */
  min-width: 320px;

  padding: var(--spacing-4);
  border: var(--border-width-border) solid var(--base-border);
  border-radius: var(--border-radius-rounded-2xl);
  background-color: var(--base-popover);
  color: var(--base-popover-foreground);
  box-shadow: var(--shadow-md);
  font-family: var(--font-sans);
}

.hc-popover__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-0-5);
  width: 100%;
}

.hc-popover__title {
  margin: 0;
  width: 100%;
  color: var(--base-popover-foreground);
}

.hc-popover__description {
  margin: 0;
  width: 100%;
  color: var(--base-muted-foreground);
}

.hc-popover__body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

/* ---- Progress ---- */
/* Honeycomb — Progress
   Figma eri86fUvOPsnYIL1G6aiBc, set 296:4740.
   Read: 65:452 (Percent=100%), 296:4743 (Percent=50%).
   Also present in the set: 296:4741 (75%), 296:4745 (25%), 296:4747 (0%).

   Figma models the fill as five discrete variants. That is a design-file
   convenience, not a component API — the five nodes are geometrically
   identical apart from the Track child's width, so this build takes a numeric
   `value` and sets that width directly.

   The rail is base/primary under the alpha/20 overlay: white at 80% in light,
   #0a0a0a at 80% in dark — which is exactly base/background at 80% in both.
   Written as the composite so the theme flips it without a second rule.

   Height is 4px (Figma height/h-1), which is spacing-1. */

.hc-progress {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  height: var(--spacing-1);
  overflow: hidden;
  border-radius: var(--border-radius-rounded-full);
  background-color: color-mix(in srgb, var(--base-background) 80%, var(--base-primary));
}

.hc-progress__indicator {
  height: 100%;
  border-radius: inherit;
  background-color: var(--base-primary);
  transition: width 240ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .hc-progress__indicator { transition: none; }
}

/* ---- RadarChart ---- */
/* Honeycomb — RadarChart
   Read from Figma eri86fUvOPsnYIL1G6aiBc, set 524:3257,
   default variant Type=Basic 524:2233 (269x238, a 192px grid).

   The grid is base-border at border-width/border, carried at 20% opacity —
   Honeycomb's own value, and close to invisible on a light ground; see the
   README and the gridOpacity prop. The area is the series colour at 60%, read
   from the opacity/opacity-60 variable bound on Figma's Fill node, under a 2px
   stroke of the same colour. Axis labels are text/xs at weight 400: the value
   in base-card-foreground, the axis name in base-muted-foreground. */

.hc-radar-chart {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Figma's 36px gap; Honeycomb's spacing scale steps 32 -> 48. */
  gap: 36px;
  width: 100%;
  font-family: var(--font-sans);
}

/* Axis labels are placed 22 units outside the grid and are not measured, so a
   long name runs past the frame. overflow: visible lets it show rather than
   clipping it mid-word; leave room around the chart in the layout. */
.hc-radar-chart__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.hc-radar-chart__grid {
  stroke: var(--base-border);
  stroke-width: var(--border-width-border);
}

.hc-radar-chart__area {
  fill-opacity: 0.6;
  stroke: none;
}

.hc-radar-chart__stroke {
  fill: none;
  /* 2px is border-width/border-2, the only 2px value Honeycomb binds. */
  stroke-width: var(--border-width-border-2);
  stroke-linejoin: round;
}

.hc-radar-chart__dot {
  stroke: var(--base-background);
  /* 2px is border-width/border-2, the only 2px value Honeycomb binds. */
  stroke-width: var(--border-width-border-2);
}

/* Figma's label pairs the reading with the axis name; the reading sits in
   card-foreground because the chart normally lives on a card. */
.hc-radar-chart__value {
  fill: var(--base-card-foreground);
}

.hc-radar-chart__label {
  fill: var(--base-muted-foreground);
}

.hc-radar-chart__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: var(--spacing-4);
}

.hc-radar-chart__legend-item {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: var(--spacing-1-5);
}

/* Figma's rounded-xs (2px) is not in this token set; rounded-md is the nearest
   bound value and draws the 8px square as a dot. See the README. */
.hc-radar-chart__swatch {
  flex: none;
  width: var(--spacing-2);
  height: var(--spacing-2);
  border-radius: var(--border-radius-rounded-md);
  background-color: var(--base-chart-1);
}

.hc-radar-chart__legend-label {
  color: var(--base-foreground);
  white-space: nowrap;
}

/* ---- RadialChart ---- */
/* Honeycomb — RadialChart
   Read from Figma eri86fUvOPsnYIL1G6aiBc, set 533:6153,
   default variant Type=Basic 533:6152 (199.2 x 199.2).

   Concentric rings, one per series, each a rounded arc in a series colour
   over a base-muted track, running clockwise from twelve o'clock. Centre
   figures are text/2xl or text/4xl; the caption under them is text/xs. */

.hc-radial-chart {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Figma's 36px gap; Honeycomb's spacing scale steps 32 -> 48. */
  gap: 36px;
  width: 100%;
  font-family: var(--font-sans);
}

.hc-radial-chart__svg {
  display: block;
  width: 100%;
  height: auto;
}

/* The unfilled part of every ring. */
.hc-radial-chart__track {
  stroke: var(--base-muted);
  fill: none;
}

.hc-radial-chart__arc {
  fill: none;
  stroke-linecap: round;
}

/* The Grid variant's rings and spokes. */
.hc-radial-chart__grid {
  stroke: var(--base-border);
  stroke-width: var(--border-width-border);
  fill: none;
}

.hc-radial-chart__value {
  fill: var(--base-foreground);
  font-family: var(--font-sans);
}

.hc-radial-chart__caption {
  fill: var(--base-muted-foreground);
}

.hc-radial-chart__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: var(--spacing-4);
}

.hc-radial-chart__legend-item {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: var(--spacing-1-5);
}

/* Figma's rounded-xs (2px) is not in this token set; rounded-md is the nearest
   bound value and draws the 8px square as a dot. See the README. */
.hc-radial-chart__swatch {
  flex: none;
  width: var(--spacing-2);
  height: var(--spacing-2);
  border-radius: var(--border-radius-rounded-md);
  background-color: var(--base-chart-1);
}

.hc-radial-chart__legend-label {
  color: var(--base-foreground);
  white-space: nowrap;
}

/* ---- RadioButton ---- */
/* Honeycomb — RadioButton
 * Values read from Figma set 65:326 (default variant 65:324, Box 17118:1395).
 * The 1px top padding on the text column is exact, not a rounding artefact.
 */

.hc-radiobutton {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  gap: var(--spacing-2);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-sans);
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
}

.hc-radiobutton--end {
  flex-direction: row-reverse;
}

.hc-radiobutton--end .hc-radiobutton__content {
  flex: 1 1 auto;
  min-width: 0;
}

/* ---- control ---- */

.hc-radiobutton__control {
  position: relative;
  flex: none;
  display: block;
  box-sizing: border-box;
  width: var(--spacing-4);
  height: var(--spacing-4);
  border-radius: var(--border-radius-rounded-full);
  border: var(--border-width-border) solid var(--base-border);
  background: var(--base-background);
}

.hc-radiobutton__dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--spacing-2);
  height: var(--spacing-2);
  transform: translate(-50%, -50%);
  border-radius: var(--border-radius-rounded-full);
  background: var(--base-primary);
}

/* Active is carried by the dot appearing — Figma leaves the ring itself unchanged. */

/* ---- text ---- */

.hc-radiobutton__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--spacing-1-5);
  padding-top: 1px;
  word-break: break-word;
}

.hc-radiobutton__label {
  display: block;
  width: 100%;
  color: var(--base-foreground);
}

.hc-radiobutton__description {
  display: block;
  width: 100%;
  color: var(--base-muted-foreground);
}

.hc-radiobutton__invalid {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  color: var(--base-destructive);
}

.hc-radiobutton__invalid-icon {
  flex: none;
  width: var(--spacing-4);
  height: var(--spacing-4);
}

/* ---- states ---- */

.hc-radiobutton:focus {
  outline: none;
}

.hc-radiobutton:focus-visible .hc-radiobutton__control,
.hc-radiobutton--state-focus .hc-radiobutton__control {
  box-shadow: 0 0 0 3px var(--base-ring);
}

.hc-radiobutton.is-invalid .hc-radiobutton__control {
  border-color: var(--base-destructive);
}

.hc-radiobutton.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---- Type = Box ---- */

.hc-radiobutton--box {
  padding: var(--spacing-4);
  border: var(--border-width-border) solid var(--base-border);
  border-radius: var(--border-radius-rounded-2xl);
  background: transparent;
}

.hc-radiobutton--box.is-invalid {
  border-color: var(--base-destructive);
}

/* ---- RadioGroup ---- */
/* RadioGroup — Honeycomb Forms.
   Figma: 65:341 (Radio Group). The Figma frame is a vertical auto-layout
   of RadioButton rows with a 12px gap (spacing-3) and nothing else — the
   legend, description and error below are Honeycomb additions, and the
   legend-to-rows gap reuses that same 12px rhythm. */

.hc-radio-group {
  display: block;
  box-sizing: border-box;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--font-sans);
  color: var(--base-foreground);
}

.hc-radio-group__legend {
  display: block;
  float: none;
  width: 100%;
  padding: 0;
  margin: 0 0 var(--spacing-3) 0;
  color: var(--base-foreground);
}

.hc-radio-group__body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-3);
}

.hc-radio-group__description {
  margin: 0;
  color: var(--base-muted-foreground);
}

/* The stack of rows. 12px between neighbours, straight from Figma. */
.hc-radio-group__rows {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-3);
}

.hc-radio-group__error {
  margin: 0;
  color: var(--base-destructive);
}

.hc-radio-group.is-invalid > .hc-radio-group__legend {
  color: var(--base-destructive);
}

/* Disabled: the fieldset's own `disabled` attribute does the work for
   assistive tech and pointer events; this only dims. Do not also dim
   each row or the two multiply. */
.hc-radio-group.is-disabled {
  opacity: 0.5;
}

/* ---- Resizable ---- */
/* Resizable — Honeycomb / Resizable (Figma 17382:7210)
   The bordered frame two or more panels share, with handles between them.
   Figma draws a 480x480 frame: base-background, 1px base-border, rounded-lg. */

.hc-resizable {
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
  width: 100%;
  border: var(--border-width-border) solid var(--base-border);
  border-radius: var(--border-radius-rounded-lg);
  background-color: var(--base-background);
  color: var(--base-foreground);
  font-family: var(--font-sans);
  /* The corners clip the panels, so a panel's own ground stops at the radius. */
  overflow: hidden;
}

/* Panels side by side, split by a vertical handle — the Figma layout. */
.hc-resizable--horizontal {
  flex-direction: row;
}

/* Panels stacked, split by a horizontal handle. */
.hc-resizable--vertical {
  flex-direction: column;
}

/*
 * A panel shares the space evenly until the consumer gives it a flex-basis.
 * min-width/min-height 0 is what lets a panel shrink below its content rather
 * than pushing the frame wider than it is.
 */
.hc-resizable__panel {
  box-sizing: border-box;
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

/* A panel that is only holding content, not centring it. */
.hc-resizable__panel--fill {
  align-items: stretch;
  justify-content: flex-start;
}

/* ---- ResizableHandle ---- */
/* ResizableHandle — Honeycomb / Resizable / Handle
   Figma set 18449:210, default variant 18449:209 (State=Default).
   12px wide overall: 4px padding either side of a 4px line box, with a
   4x24 grip pill centred on it. */

.hc-resizable-handle {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  /* 4px each side — Figma's px-[4px]. spacing-1 is that value. */
  padding: var(--spacing-1);
  background-color: transparent;
  cursor: col-resize;
  touch-action: none;
}

/* The hairline the two panels meet on. */
.hc-resizable-handle__line {
  display: block;
  background-color: var(--base-border);
}

/*
 * The grip. 4x24, rounded-lg, in base-border — the same ink as the line, which
 * is how Figma draws it.
 */
.hc-resizable-handle__grip {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  border-radius: var(--border-radius-rounded-lg);
  background-color: var(--base-border);
  transform: translate(-50%, -50%);
}

/* --- Vertical separator (the default): panels side by side ----------- */

.hc-resizable-handle--vertical {
  align-self: stretch;
  /* 12px total — the 4px line box plus spacing-1 of padding either side. */
  width: var(--spacing-3);
  cursor: col-resize;
}

.hc-resizable-handle--vertical .hc-resizable-handle__line {
  width: var(--border-width-border);
  height: 100%;
}

.hc-resizable-handle--vertical .hc-resizable-handle__grip {
  width: var(--spacing-1);
  height: var(--spacing-6);
}

/* --- Horizontal separator: panels stacked ---------------------------- */

.hc-resizable-handle--horizontal {
  align-self: stretch;
  width: 100%;
  height: var(--spacing-3);
  cursor: row-resize;
}

.hc-resizable-handle--horizontal .hc-resizable-handle__line {
  width: 100%;
  height: var(--border-width-border);
}

.hc-resizable-handle--horizontal .hc-resizable-handle__grip {
  width: var(--spacing-6);
  height: var(--spacing-1);
}

/* --- States ---------------------------------------------------------- */

/*
 * Focus: the hairline and the grip both take base-ring and a 3px ring is laid
 * over the handle. The ring alone is 2.5:1 in light, so the ink change on the
 * line and grip is the part that carries the state.
 */
.hc-resizable-handle:focus-visible,
.hc-resizable-handle.is-focus {
  outline: none;
  border-radius: var(--border-radius-rounded-md);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--base-ring) 50%, transparent);
}

.hc-resizable-handle:focus-visible .hc-resizable-handle__line,
.hc-resizable-handle.is-focus .hc-resizable-handle__line,
.hc-resizable-handle:focus-visible .hc-resizable-handle__grip,
.hc-resizable-handle.is-focus .hc-resizable-handle__grip {
  background-color: var(--base-ring);
}

.hc-resizable-handle:hover:not(.is-disabled) .hc-resizable-handle__grip {
  background-color: var(--base-ring);
}

.hc-resizable-handle.is-disabled {
  opacity: 0.5;
  cursor: default;
}

/* ---- ScrollArea ---- */
/* ScrollArea — Honeycomb / Scroll Area
   Figma 18597:81811 (Vertical) and 18597:81812 (Horizontal).
   Both are the same box: base-background, 1px base-border, rounded-2xl, the
   content clipped and padded by spacing-4. Only the scroll axis differs, so
   orientation is a prop here rather than two components. */

.hc-scroll-area {
  box-sizing: border-box;
  position: relative;
  border: var(--border-width-border) solid var(--base-border);
  border-radius: var(--border-radius-rounded-2xl);
  background-color: var(--base-background);
  color: var(--base-foreground);
  font-family: var(--font-sans);
  /*
   * Native overflow, deliberately: it keeps the wheel, the trackpad, the
   * scrollbar, Page Up/Down, Home/End, find-in-page and the browser's own
   * scroll-into-target behaviour, none of which a custom scroller gets for
   * free. The box is focusable so the keyboard reaches it at all.
   */
  overscroll-behavior: contain;
}

/* Focus is visible because this box is a real tab stop. */
.hc-scroll-area:focus-visible {
  outline: none;
  border-color: var(--base-ring);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--base-ring) 50%, transparent);
}

.hc-scroll-area__content {
  box-sizing: border-box;
  padding: var(--spacing-4);
}

/* --- Vertical -------------------------------------------------------- */

.hc-scroll-area--vertical {
  overflow-x: hidden;
  overflow-y: auto;
}

.hc-scroll-area--vertical .hc-scroll-area__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-2);
  width: 100%;
}

/* --- Horizontal ------------------------------------------------------ */

.hc-scroll-area--horizontal {
  overflow-x: auto;
  overflow-y: hidden;
}

.hc-scroll-area--horizontal .hc-scroll-area__content {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--spacing-4);
  /* The row is as wide as its children, which is what makes the box scroll. */
  width: max-content;
  min-width: 100%;
}

/* --- Scrollbar ------------------------------------------------------- */

/*
 * The bar is tinted to the system's own, not replaced. A hidden scrollbar
 * removes the only standing cue that there is more to read.
 */
.hc-scroll-area {
  scrollbar-width: thin;
  scrollbar-color: var(--base-border) transparent;
}

.hc-scroll-area::-webkit-scrollbar {
  width: var(--spacing-2);
  height: var(--spacing-2);
}

.hc-scroll-area::-webkit-scrollbar-track {
  background-color: transparent;
}

.hc-scroll-area::-webkit-scrollbar-thumb {
  border-radius: var(--border-radius-rounded-full);
  background-color: var(--base-border);
}

.hc-scroll-area:hover::-webkit-scrollbar-thumb {
  background-color: var(--base-ring);
}

/* ---- Select ---- */
/* Select — Honeycomb Forms
   Figma: set 345:11530, default variant 345:11529.
   Geometry read from Figma: h 32px default (spacing-8) / 28px sm
   (spacing-7), padding 6px/10px (spacing-1-5 / spacing-2-5), gap 6px
   (spacing-1-5), radius rounded-4xl, 1px border in base-input,
   16px icons (spacing-4). */

.hc-select {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--spacing-1-5);
  width: 100%;
  height: var(--spacing-8);
  padding-block: var(--spacing-1-5);
  padding-inline: var(--spacing-2-5);
  border: var(--border-width-border) solid var(--base-input);
  border-radius: var(--border-radius-rounded-4xl);
  background-color: var(--base-background);
  color: var(--base-muted-foreground);
  font-family: var(--font-sans);
  text-align: left;
  cursor: pointer;
  appearance: none;
}

.hc-select--sm {
  height: var(--spacing-7);
}

.hc-select__value {
  flex: 1 0 0;
  min-width: 1px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: inherit;
}

.hc-select__icon,
.hc-select__chevron {
  flex: 0 0 auto;
  display: block;
  width: var(--spacing-4);
  height: var(--spacing-4);
  color: inherit;
}

.hc-select__icon > svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* --- States -------------------------------------------------------- */

/* A chosen value reads in base-foreground; the placeholder stays muted. */
.hc-select--filled,
.hc-select--filled-focus {
  color: var(--base-foreground);
}

/* Focus: border swaps to base-ring plus a 3px ring at 50% (Figma
   effect focus/default). 3px is the Figma spread; no token holds it. */
.hc-select--focus,
.hc-select--filled-focus,
.hc-select:focus-visible {
  border-color: var(--base-ring);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--base-ring) 50%, transparent);
  outline: none;
}

/* Invalid keeps its destructive border and ring even while focused, so
   focus never hides the error. Pair it with the Field error message —
   colour is never the only signal. */
.hc-select--invalid,
.hc-select--invalid:focus-visible {
  border-color: var(--base-destructive);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--base-destructive) 20%, transparent);
  outline: none;
}

.hc-select--disabled,
.hc-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---- SelectMenu ---- */
/* SelectMenu — Honeycomb / Select / Menu (Figma 118:2501) */

.hc-select-menu {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;

  /*
   * Figma draws the panel at 324px. A select has to be at least as wide as
   * its trigger, so the measured width is applied as the minimum.
   */
  min-width: 324px;

  border: var(--border-width-border) solid var(--base-border);
  border-radius: var(--border-radius-rounded-2xl);
  background-color: var(--base-popover);
  color: var(--base-popover-foreground);
  box-shadow: var(--shadow-md);
  font-family: var(--font-sans);
}

/* The options sit in their own padded group; the scroll arrows sit outside it. */
.hc-select-menu__group {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  padding: var(--spacing-1);
}

.hc-select-menu__group > * {
  flex: none;
  width: 100%;
}

.hc-select-menu__scroll {
  box-sizing: border-box;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  width: 100%;
  padding-top: var(--spacing-1);
  padding-bottom: var(--spacing-1);
  color: inherit;
}

.hc-select-menu__scroll > svg {
  display: block;
  width: 15px;
  height: 15px;
}

/* ---- SelectMenuItem ---- */
/* SelectMenuItem — Honeycomb / Select Menu / Item (Figma 118:1541) */

.hc-select-menu-item {
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-1-5);
  width: 100%;
  padding-top: var(--spacing-1);
  padding-bottom: var(--spacing-1);
  padding-left: var(--spacing-4);
  /* The right gutter is reserved in both variants, so rows stay aligned. */
  padding-right: var(--spacing-8);
  border-radius: var(--border-radius-rounded-4xl);
  background-color: transparent;
  color: var(--base-popover-foreground);
  font-family: var(--font-sans);
  cursor: default;
  user-select: none;
}

.hc-select-menu-item:hover,
.hc-select-menu-item.is-hover {
  background-color: var(--base-accent);
}

.hc-select-menu-item:focus-visible {
  outline: var(--border-width-border-2) solid var(--base-ring);
  outline-offset: -2px;
}

.hc-select-menu-item__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: inherit;
}

.hc-select-menu-item__icon > svg {
  display: block;
  width: 16px;
  height: 16px;
}

.hc-select-menu-item__label {
  flex: 1 0 0;
  min-width: 0;
  overflow: hidden;
  color: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-word;
}

.hc-select-menu-item__check {
  position: absolute;
  top: 50%;
  right: var(--spacing-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: inherit;
  transform: translateY(-50%);
}

.hc-select-menu-item__check > svg {
  display: block;
  width: 16px;
  height: 16px;
}

/* ---- SelectMenuLabel ---- */
/* SelectMenuLabel — Honeycomb / Select Menu / Label (Figma 118:1542) */

.hc-select-menu-label {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  width: 100%;
  padding: var(--spacing-1) var(--spacing-1-5);
  color: var(--base-muted-foreground);
  font-family: var(--font-sans);
  user-select: none;
}

/*
 * The heading is 12px/16px at regular weight. The type ramp has no regular
 * 12px class, so the medium one supplies family, size and line height and
 * the weight is corrected back here.
 */
.hc-select-menu-label__text {
  flex: 1 0 0;
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-word;
}

/* ---- Separator ---- */
/* Separator — Honeycomb. Figma set 118:2690, default variant 118:2689. */

.hc-separator {
  flex: 0 0 auto;
  box-sizing: border-box;
  background-color: var(--base-border);
  border: 0;
}

/* Orientation = Horizontal: a 1px rule that fills its container's width. */
.hc-separator--horizontal {
  width: 100%;
  height: var(--border-width-border);
}

/* Orientation = Vertical: a 1px rule that fills its container's height.
   In a flex row with `align-items: stretch` it takes the row's height;
   elsewhere the consumer sets one. */
.hc-separator--vertical {
  width: var(--border-width-border);
  height: 100%;
  min-height: var(--spacing-5);
  align-self: stretch;
}

/* ---- Sheet ---- */
/* Sheet — Honeycomb / Sheet (Figma set 220:4633, page 216:3314).
   Variants read: 220:4632 right (default), 220:4629 top.
   Every value below is a Honeycomb token. */

/* The root is the overlay area, exactly as the Figma frame is: it paints the
   scrim and lays the panel out against one edge. Making it fixed, sized or
   portalled is the consumer's job. */
.hc-sheet {
  box-sizing: border-box;
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  font-family: var(--font-sans);
  background-color: color-mix(in srgb, var(--base-foreground) 40%, transparent);
}

.hc-sheet--no-scrim {
  background-color: transparent;
}

.hc-sheet--right { flex-direction: row; justify-content: flex-end; align-items: stretch; }
.hc-sheet--left { flex-direction: row; justify-content: flex-start; align-items: stretch; }
.hc-sheet--top { flex-direction: column; justify-content: flex-start; align-items: stretch; }
.hc-sheet--bottom { flex-direction: column; justify-content: flex-end; align-items: stretch; }

.hc-sheet__panel {
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-4);
  padding: var(--spacing-4);
  background-color: var(--base-background);
  color: var(--base-foreground);
  box-shadow: var(--shadow-md);
}

/* Figma: 384px (max-w-sm) on the side sheets, 520px tall on the edge sheets.
   Applied as caps so a narrow viewport still fits. */
.hc-sheet--right .hc-sheet__panel,
.hc-sheet--left .hc-sheet__panel {
  width: 100%;
  max-width: 384px;
  height: 100%;
}

.hc-sheet--top .hc-sheet__panel,
.hc-sheet--bottom .hc-sheet__panel {
  width: 100%;
  height: 100%;
  max-height: 520px;
}

/* One hairline, on the edge that faces the page. */
.hc-sheet--right .hc-sheet__panel { border-left: var(--border-width-border) solid var(--base-border); }
.hc-sheet--left .hc-sheet__panel { border-right: var(--border-width-border) solid var(--base-border); }
.hc-sheet--top .hc-sheet__panel { border-bottom: var(--border-width-border) solid var(--base-border); }
.hc-sheet--bottom .hc-sheet__panel { border-top: var(--border-width-border) solid var(--base-border); }

.hc-sheet__header {
  box-sizing: border-box;
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-0-5);
  width: 100%;
  /* Room for the close affordance in the top-right corner. */
  padding-right: var(--spacing-6);
}

.hc-sheet__title {
  margin: 0;
  width: 100%;
  color: var(--base-foreground);
}

.hc-sheet__description {
  margin: 0;
  width: 100%;
  color: var(--base-muted-foreground);
}

/* The body takes the leftover room and scrolls on its own. */
.hc-sheet__body {
  box-sizing: border-box;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: stretch;
  min-height: 0;
  width: 100%;
  overflow: auto;
}

/* Figma stacks the sheet's actions full width rather than pairing them. */
.hc-sheet__footer {
  box-sizing: border-box;
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-2);
  width: 100%;
}

.hc-sheet__footer > * {
  width: 100%;
}

.hc-sheet__close {
  position: absolute;
  top: var(--spacing-4);
  right: var(--spacing-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  border-radius: var(--border-radius-rounded-md);
  background-color: transparent;
  color: var(--base-foreground);
  opacity: 0.7;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.hc-sheet__close:hover {
  opacity: 1;
}

.hc-sheet__close:focus-visible {
  outline: var(--border-width-border) solid var(--base-ring);
  outline-offset: var(--spacing-0-5);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--base-ring) 50%, transparent);
  opacity: 1;
}

.hc-sheet__close-icon {
  display: block;
  width: 16px;
  height: 16px;
}

/* ---- Sidebar ---- */
/* Sidebar — Honeycomb / Sidebar 01. shell (Figma 5198:1787) */

.hc-sidebar {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /* 256px — the Figma frame's width, built from the spacing scale. */
  width: calc(var(--spacing-32) * 2);
  height: 100%;
  overflow: hidden;
  background-color: var(--base-sidebar);
  color: var(--base-sidebar-foreground);
  font-family: var(--font-sans);
}

/*
 * Collapsed: a 48px rail — one 32px icon column plus the group's own
 * --spacing-2 on each side.
 */
.hc-sidebar--collapsed {
  width: calc(var(--spacing-8) + var(--spacing-2) * 2);
}

.hc-sidebar__header {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-2);
  padding: var(--spacing-2);
  background-color: var(--base-sidebar);
}

.hc-sidebar__content {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: stretch;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.hc-sidebar__footer {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-2);
  padding: var(--spacing-2);
  background-color: var(--base-sidebar);
}

/* ---- SidebarCollapseIcon ---- */
/* SidebarCollapseIcon — Honeycomb / Sidebar / CollapseIcon (Figma 5198:1651) */

.hc-sidebar-collapse-icon {
  box-sizing: border-box;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--spacing-4);
  height: var(--spacing-4);
  color: inherit;
}

.hc-sidebar-collapse-icon__svg {
  display: block;
  width: var(--spacing-4);
  height: var(--spacing-4);
  /*
   * Figma rotates the whole 16px placeholder for the Active=Yes variants:
   * Horizontal turns 90deg (right becomes down), Vertical and Up Down turn
   * 180deg. Plus Minus swaps the glyph instead, so it needs no rotation.
   */
  transition: transform 150ms ease;
}

.hc-sidebar-collapse-icon--horizontal.hc-sidebar-collapse-icon--on .hc-sidebar-collapse-icon__svg {
  transform: rotate(90deg);
}

.hc-sidebar-collapse-icon--vertical.hc-sidebar-collapse-icon--on .hc-sidebar-collapse-icon__svg,
.hc-sidebar-collapse-icon--up-down.hc-sidebar-collapse-icon--on .hc-sidebar-collapse-icon__svg {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .hc-sidebar-collapse-icon__svg { transition: none; }
}

/* ---- SidebarGroup ---- */
/* SidebarGroup — Honeycomb / Sidebar / SidebarGroup (Figma 5198:1528) */

.hc-sidebar-group {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: var(--spacing-2);
  color: var(--base-sidebar-foreground);
  font-family: var(--font-sans);
}

.hc-sidebar-group__label {
  display: block;
  width: 100%;
}

.hc-sidebar-group__menu {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * Collapsed: the rail narrows to a single 32px column of icons, so the group
 * is exactly the icon plus its own --spacing-2 padding on each side — 48px.
 */
.hc-sidebar-group--collapsed {
  width: auto;
}

.hc-sidebar-group--collapsed .hc-sidebar-group__menu {
  width: var(--spacing-8);
}

/* ---- SidebarGroupAction ---- */
/* SidebarGroupAction — Honeycomb / Sidebar / SidebarGroupAction (Figma 5198:1616) */

.hc-sidebar-group-action {
  box-sizing: border-box;
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--spacing-5);
  height: var(--spacing-5);
  padding: 0;
  border: 0;
  border-radius: var(--border-radius-rounded-md);
  background-color: transparent;
  color: inherit;
  font-family: var(--font-sans);
  cursor: pointer;
}

.hc-sidebar-group-action__glyph {
  display: block;
  width: var(--spacing-4);
  height: var(--spacing-4);
}

.hc-sidebar-group-action__glyph > svg {
  display: block;
  width: 100%;
  height: 100%;
}

.hc-sidebar-group-action:hover,
.hc-sidebar-group-action--hover {
  background-color: var(--base-sidebar-accent);
  color: var(--base-sidebar-accent-foreground);
}

/*
 * Focus. Figma draws a 2px ring in --base-sidebar-ring at 50% opacity. That
 * ring alone is far too weak in dark, where sidebar-ring is #525252 against a
 * #171717 sidebar, so focus also takes the accent background. The ring itself
 * is kept at the source's exact colour, width and opacity.
 */
.hc-sidebar-group-action:focus-visible,
.hc-sidebar-group-action--focused {
  outline: none;
  background-color: var(--base-sidebar-accent);
  color: var(--base-sidebar-accent-foreground);
}

.hc-sidebar-group-action:focus-visible::after,
.hc-sidebar-group-action--focused::after {
  content: '';
  position: absolute;
  inset: 0;
  border: var(--border-width-border-2) solid var(--base-sidebar-ring);
  border-radius: var(--border-radius-rounded-md);
  opacity: 0.5;
  pointer-events: none;
}

/* ---- SidebarGroupLabel ---- */
/* SidebarGroupLabel — Honeycomb / Sidebar / SidebarGroupLabel (Figma 5198:1398) */

.hc-sidebar-group-label {
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-2);
  width: 100%;
  height: var(--spacing-8);
  padding: 0 var(--spacing-2);
  border: 0;
  border-radius: var(--border-radius-rounded-md);
  background-color: transparent;
  color: var(--base-sidebar-foreground);
  font-family: var(--font-sans);
  text-align: left;
}

.hc-sidebar-group-label--collapsible {
  cursor: pointer;
}

.hc-sidebar-group-label__text {
  flex: 1 0 0;
  min-width: 0;
  overflow: hidden;
  color: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
 * The trailing action sits at 70% opacity in the Figma source, so it reads as
 * secondary to the title until the group is hovered.
 */
.hc-sidebar-group-label__action {
  display: flex;
  flex: none;
  align-items: center;
  opacity: 0.7;
}

.hc-sidebar-group-label:hover .hc-sidebar-group-label__action,
.hc-sidebar-group-label__action:focus-within {
  opacity: 1;
}

/* Hover applies to the two types whose whole row is a target. */
.hc-sidebar-group-label--collapsible:hover,
.hc-sidebar-group-label--hover {
  background-color: var(--base-sidebar-accent);
  color: var(--base-sidebar-accent-foreground);
}

/*
 * Focus, for the collapsible type, which is the only one that takes focus.
 * Figma's ring is 2px of --base-sidebar-ring at 50% opacity; that is under
 * 3:1 in dark, so focus also takes the accent background.
 */
.hc-sidebar-group-label--collapsible:focus-visible {
  outline: none;
  background-color: var(--base-sidebar-accent);
  color: var(--base-sidebar-accent-foreground);
}

.hc-sidebar-group-label--collapsible:focus-visible::after {
  content: '';
  position: absolute;
  inset: 0;
  border: var(--border-width-border-2) solid var(--base-sidebar-ring);
  border-radius: var(--border-radius-rounded-md);
  opacity: 0.5;
  pointer-events: none;
}

/* ---- SidebarHeaderButton ---- */
/* SidebarHeaderButton — Honeycomb / Sidebar / HeaderButton (Figma 5198:1735) */

.hc-sidebar-header-button {
  box-sizing: border-box;
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--spacing-7);
  height: var(--spacing-7);
  padding: 0;
  border: 0;
  border-radius: var(--border-radius-rounded-md);
  background-color: transparent;
  color: var(--base-sidebar-foreground);
  font-family: var(--font-sans);
  cursor: pointer;
}

.hc-sidebar-header-button__glyph {
  display: block;
  width: var(--spacing-4);
  height: var(--spacing-4);
}

.hc-sidebar-header-button__glyph > svg {
  display: block;
  width: 100%;
  height: 100%;
}

.hc-sidebar-header-button:hover,
.hc-sidebar-header-button--hover {
  background-color: var(--base-sidebar-accent);
  color: var(--base-sidebar-accent-foreground);
}

/*
 * Focus. The Figma ring is 2px of --base-sidebar-ring at 50% opacity; that
 * alone is under 3:1 in dark, so focus also takes the accent background. The
 * ring keeps the source's exact colour, width and opacity.
 */
.hc-sidebar-header-button:focus-visible,
.hc-sidebar-header-button--focused {
  outline: none;
  background-color: var(--base-sidebar-accent);
  color: var(--base-sidebar-accent-foreground);
}

.hc-sidebar-header-button:focus-visible::after,
.hc-sidebar-header-button--focused::after {
  content: '';
  position: absolute;
  inset: 0;
  border: var(--border-width-border-2) solid var(--base-sidebar-ring);
  border-radius: var(--border-radius-rounded-md);
  opacity: 0.5;
  pointer-events: none;
}

/* ---- SidebarInboxItem ---- */
/* SidebarInboxItem — Honeycomb / Sidebar / InboxItem (Figma 5198:1754) */

.hc-sidebar-inbox-item {
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-2);
  width: 100%;
  padding: var(--spacing-4);
  border: 0;
  border-bottom: var(--border-width-border) solid var(--base-sidebar-border);
  border-radius: 0;
  background-color: transparent;
  color: var(--base-sidebar-foreground);
  font-family: var(--font-sans);
  text-align: left;
  text-decoration: none;
  word-break: break-word;
  cursor: pointer;
}

.hc-sidebar-inbox-item__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-2);
  width: 100%;
  color: inherit;
}

.hc-sidebar-inbox-item__person {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hc-sidebar-inbox-item__time {
  flex: none;
  white-space: nowrap;
}

.hc-sidebar-inbox-item__title {
  display: block;
  width: 100%;
  color: inherit;
}

/*
 * The preview line is clamped to two lines rather than one, so a subject and
 * its first words both survive. The Figma frame shows a single truncating
 * line at 323px; at narrower widths one line loses the sentence entirely.
 */
.hc-sidebar-inbox-item__body {
  display: -webkit-box;
  overflow: hidden;
  width: 100%;
  color: inherit;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
}

.hc-sidebar-inbox-item:hover,
.hc-sidebar-inbox-item--hover {
  background-color: var(--base-sidebar-accent);
  color: var(--base-sidebar-accent-foreground);
}

/*
 * Focus. The Figma set has Default and Hover only. Focus follows the rest of
 * the family: the 2px --base-sidebar-ring ring at 50% opacity plus the accent
 * background, since that ring alone is under 3:1 in dark. The ring is inset
 * so it is not clipped by the row above.
 */
.hc-sidebar-inbox-item:focus-visible,
.hc-sidebar-inbox-item--focused {
  outline: none;
  background-color: var(--base-sidebar-accent);
  color: var(--base-sidebar-accent-foreground);
}

.hc-sidebar-inbox-item:focus-visible::after,
.hc-sidebar-inbox-item--focused::after {
  content: '';
  position: absolute;
  inset: 0;
  border: var(--border-width-border-2) solid var(--base-sidebar-ring);
  border-radius: var(--border-radius-rounded-md);
  opacity: 0.5;
  pointer-events: none;
}

/* ---- SidebarMediaAsset ---- */
/* SidebarMediaAsset — Honeycomb / Sidebar / MediaAsset (Figma 5198:1782) */

.hc-sidebar-media-asset {
  box-sizing: border-box;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--spacing-8);
  height: var(--spacing-8);
  overflow: hidden;
  border-radius: var(--border-radius-rounded-lg);
}

/*
 * Type=Icon: a filled tile in the sidebar's own primary, which is near-black
 * in light and blue in dark. It never follows --base-primary.
 */
.hc-sidebar-media-asset--icon {
  padding: var(--spacing-2-5);
  background-color: var(--base-sidebar-primary);
  color: var(--base-sidebar-primary-foreground);
}

.hc-sidebar-media-asset__glyph {
  display: block;
  width: var(--spacing-4);
  height: var(--spacing-4);
}

.hc-sidebar-media-asset__glyph > svg,
.hc-sidebar-media-asset__glyph > img {
  display: block;
  width: 100%;
  height: 100%;
}

/*
 * Type=Avatar: the photo fills the same 32px box at the same radius. The
 * page background sits under it so a transparent PNG does not show the
 * sidebar through.
 */
.hc-sidebar-media-asset--avatar {
  background-color: var(--base-background);
}

.hc-sidebar-media-asset__img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--border-radius-rounded-lg);
  object-fit: cover;
}

/* ---- SidebarMenuButton ---- */
/* SidebarMenuButton — Honeycomb / Sidebar / SidebarMenuButton (Figma 5198:1113) */

.hc-sidebar-menu-button {
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  width: 100%;
  height: var(--spacing-8);
  padding: var(--spacing-2);
  border: 0;
  border-radius: var(--border-radius-rounded-md);
  background-color: transparent;
  color: var(--base-sidebar-foreground);
  font-family: var(--font-sans);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

/* Big Icon is the only type without a fixed height — its two lines set it. */
.hc-sidebar-menu-button--big-icon {
  height: auto;
}

.hc-sidebar-menu-button__icon,
.hc-sidebar-menu-button__control,
.hc-sidebar-menu-button__dots,
.hc-sidebar-menu-button__twisty {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--spacing-4);
  height: var(--spacing-4);
}

.hc-sidebar-menu-button__icon > svg,
.hc-sidebar-menu-button__dots > svg,
.hc-sidebar-menu-button__twisty > svg {
  display: block;
  width: 100%;
  height: 100%;
}

.hc-sidebar-menu-button__label {
  flex: 1 0 0;
  min-width: 0;
  overflow: hidden;
  color: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Tree ---------------------------------------------------------------
 * The twisty leads the row, before the icon. Source order already puts it
 * first, so nothing needs reordering here.
 */

/* --- Badge --------------------------------------------------------------
 * A count pinned to the right edge rather than laid out in the flex row, so
 * a long label truncates under it instead of pushing it out. Figma places it
 * 4px in from the right on a 20px line, 6px down from the top of the 32px row.
 */
.hc-sidebar-menu-button__badge {
  position: absolute;
  top: var(--spacing-1-5);
  right: var(--spacing-1);
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--spacing-5);
  padding: 0 var(--spacing-1);
  color: inherit;
  white-space: nowrap;
}

.hc-sidebar-menu-button--badge .hc-sidebar-menu-button__label {
  /* Keep the label clear of the pinned count. */
  padding-right: var(--spacing-6);
}

/* --- Checkbox -----------------------------------------------------------
 * The row itself is the control (role="menuitemcheckbox"); the Honeycomb
 * Checkbox inside is the picture of it and takes no focus of its own.
 */
.hc-sidebar-menu-button__control {
  pointer-events: none;
}

.hc-sidebar-menu-button__box {
  width: var(--spacing-4);
  height: var(--spacing-4);
  border: var(--border-width-border) solid var(--base-border);
  border-radius: var(--border-radius-rounded-md);
}

/* --- Big Icon ----------------------------------------------------------- */
.hc-sidebar-menu-button__media {
  display: flex;
  flex: none;
  align-items: center;
}

.hc-sidebar-menu-button__media-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--spacing-8);
  height: var(--spacing-8);
  padding: var(--spacing-2-5);
  border-radius: var(--border-radius-rounded-lg);
  background-color: var(--base-sidebar-primary);
  color: var(--base-sidebar-primary-foreground);
}

.hc-sidebar-menu-button__media-fallback > svg {
  display: block;
  width: 100%;
  height: 100%;
}

.hc-sidebar-menu-button__stack {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  justify-content: center;
  gap: var(--spacing-0-5);
  min-width: 0;
}

.hc-sidebar-menu-button__title,
.hc-sidebar-menu-button__subtitle {
  display: block;
  width: 100%;
  overflow: hidden;
  color: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Collapsed ----------------------------------------------------------
 * Every type narrows to the same 32px square holding only its leading mark.
 */
.hc-sidebar-menu-button--collapsed {
  width: var(--spacing-8);
  height: var(--spacing-8);
  justify-content: center;
}

/* A collapsed Big Icon drops its tile and becomes the same square as the rest. */
.hc-sidebar-menu-button--collapsed.hc-sidebar-menu-button--big-icon {
  height: var(--spacing-8);
  padding: var(--spacing-2);
}

/* --- States -------------------------------------------------------------
 * Hover and Active share one fill; Active is the heavier weight and is the
 * one that carries aria-current="page".
 */
.hc-sidebar-menu-button:hover,
.hc-sidebar-menu-button--hover {
  background-color: var(--base-sidebar-accent);
  color: var(--base-sidebar-accent-foreground);
}

.hc-sidebar-menu-button--active {
  background-color: var(--base-sidebar-accent);
  color: var(--base-sidebar-accent-foreground);
}

.hc-sidebar-menu-button--active .hc-sidebar-menu-button__label {
  font-weight: 500;
}

/*
 * Focus. Figma draws a 2px --base-sidebar-ring ring at 50% opacity and nothing
 * else. In dark, sidebar-ring is #525252 on a #171717 sidebar, which at half
 * strength is well under 3:1, so focus also takes the accent background. The
 * ring keeps the source's exact colour, width and opacity.
 */
.hc-sidebar-menu-button:focus-visible,
.hc-sidebar-menu-button--focused {
  outline: none;
  background-color: var(--base-sidebar-accent);
  color: var(--base-sidebar-accent-foreground);
}

.hc-sidebar-menu-button:focus-visible::after,
.hc-sidebar-menu-button--focused::after {
  content: '';
  position: absolute;
  inset: 0;
  border: var(--border-width-border-2) solid var(--base-sidebar-ring);
  border-radius: var(--border-radius-rounded-md);
  opacity: 0.5;
  pointer-events: none;
}

/* ---- SidebarMenuItem ---- */
/* SidebarMenuItem — Honeycomb / Sidebar / SidebarMenuItem (Figma 5198:1510) */

.hc-sidebar-menu-item {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * Submenu=True stacks the child list directly under the row with no gap of
 * its own — SidebarMenuSub brings its own vertical padding.
 */
.hc-sidebar-menu-item__sub {
  display: block;
  width: 100%;
}

/* ---- SidebarMenuSub ---- */
/* SidebarMenuSub — Honeycomb / Sidebar / SidebarMenuSub (Figma 5198:1446) */

.hc-sidebar-menu-sub {
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-1);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * Border: the children step in by 24px and a hairline runs the full height at
 * 16px from the left edge, so the guide sits between the parent's icon column
 * and its label. Drawn with a pseudo-element rather than a border so the rule
 * spans the padded box, exactly as the Figma vector does.
 */
.hc-sidebar-menu-sub--border {
  padding: var(--spacing-0-5) var(--spacing-6);
}

.hc-sidebar-menu-sub--border::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--spacing-4);
  width: var(--border-width-border);
  background-color: var(--base-sidebar-border);
}

/* Indent: the same step-in without the rule, at a much smaller inset. */
.hc-sidebar-menu-sub--indent {
  padding: var(--spacing-0-5) var(--spacing-1-5);
}

/* Default: no padding of its own — the children align with the parent row. */
.hc-sidebar-menu-sub--default {
  padding: 0;
}

/* ---- SidebarMenuSubItem ---- */
/* SidebarMenuSubItem — Honeycomb / Sidebar / SidebarMenuSubItem (Figma 5198:1587) */

.hc-sidebar-menu-sub-item {
  display: block;
  width: 100%;
  list-style: none;
}

.hc-sidebar-menu-sub-item__target {
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  width: 100%;
  /* 28px — one step shorter than a top-level row, which is what marks it as a child. */
  height: var(--spacing-7);
  padding: 0 var(--spacing-2);
  border: 0;
  border-radius: var(--border-radius-rounded-md);
  background-color: transparent;
  color: var(--base-sidebar-foreground);
  font-family: var(--font-sans);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.hc-sidebar-menu-sub-item__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--spacing-4);
  height: var(--spacing-4);
}

.hc-sidebar-menu-sub-item__icon > svg {
  display: block;
  width: 100%;
  height: 100%;
}

.hc-sidebar-menu-sub-item__label {
  flex: 1 0 0;
  min-width: 0;
  overflow: hidden;
  color: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
 * Hover and Active are the same fill in the Figma set — unlike the top-level
 * row, the sub item does not thicken its label when it is the current page.
 * aria-current is what separates them.
 */
.hc-sidebar-menu-sub-item__target:hover,
.hc-sidebar-menu-sub-item__target--hover,
.hc-sidebar-menu-sub-item__target--active {
  background-color: var(--base-sidebar-accent);
  color: var(--base-sidebar-accent-foreground);
}

/*
 * Focus. Figma's ring is 2px of --base-sidebar-ring at 50% opacity; that is
 * under 3:1 in dark, so focus also takes the accent background. The ring is
 * the source's exact colour, width and opacity.
 */
.hc-sidebar-menu-sub-item__target:focus-visible,
.hc-sidebar-menu-sub-item__target--focused {
  outline: none;
  background-color: var(--base-sidebar-accent);
  color: var(--base-sidebar-accent-foreground);
}

.hc-sidebar-menu-sub-item__target:focus-visible::after,
.hc-sidebar-menu-sub-item__target--focused::after {
  content: '';
  position: absolute;
  inset: 0;
  border: var(--border-width-border-2) solid var(--base-sidebar-ring);
  border-radius: var(--border-radius-rounded-md);
  opacity: 0.5;
  pointer-events: none;
}

/* ---- SidebarPopover ---- */
/* SidebarPopover — Honeycomb / Sidebar / Popover (Figma 5198:1678) */

.hc-sidebar-popover {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: var(--font-sans);
}

.hc-sidebar-popover__trigger {
  display: flex;
  flex: none;
}

.hc-sidebar-popover__menu {
  box-sizing: border-box;
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: stretch;
  /* 316px in the Figma frame; the panel fills its container up to that. */
  width: 100%;
  max-width: calc(var(--spacing-32) * 2 + var(--spacing-12) + var(--spacing-3));
  border: var(--border-width-border) solid var(--base-border);
  border-radius: var(--border-radius-rounded-md);
  background-color: var(--base-popover);
  color: var(--base-popover-foreground);
  box-shadow: var(--shadow-md);
}

.hc-sidebar-popover__section {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: var(--spacing-1);
}

.hc-sidebar-popover__group-label {
  display: flex;
  align-items: center;
  padding: var(--spacing-1-5) var(--spacing-2);
  color: var(--base-muted-foreground);
}

.hc-sidebar-popover__items {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/*
 * The separator is an 8px band in the Figma frame with the rule centred in
 * it, so the two sections keep breathing room around the line.
 */
.hc-sidebar-popover__separator {
  position: relative;
  height: var(--spacing-2);
  margin: 0;
  padding: 0;
}

.hc-sidebar-popover__separator::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  border-top: var(--border-width-border) solid var(--base-border);
}

/* ---- SidebarPopoverMenuItem ---- */
/* SidebarPopoverMenuItem — Honeycomb / Sidebar / PopoverMenuItem (Figma 5198:1696) */

.hc-sidebar-popover-menu-item {
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  width: 100%;
  /* 40px: the 24px icon tile plus --spacing-2 above and below. */
  height: calc(var(--spacing-5) * 2);
  padding: var(--spacing-2);
  border: 0;
  /*
   * Figma corners this row at rounded-xs (2px). This token set has no 2px
   * radius, so the row takes rounded-md — the smallest one available and the
   * same corner the menu around it uses.
   */
  border-radius: var(--border-radius-rounded-md);
  background-color: transparent;
  /* The popover surface, not the sidebar's: this row lives on --base-popover. */
  color: var(--base-popover-foreground);
  font-family: var(--font-sans);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.hc-sidebar-popover-menu-item__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--spacing-6);
  height: var(--spacing-6);
  border: var(--border-width-border) solid var(--base-border);
  border-radius: var(--border-radius-rounded-md);
  color: inherit;
}

.hc-sidebar-popover-menu-item__icon > svg {
  display: block;
  width: var(--spacing-4);
  height: var(--spacing-4);
}

.hc-sidebar-popover-menu-item__label {
  flex: 1 0 0;
  min-width: 0;
  overflow: hidden;
  color: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
 * The shortcut hint at 60% of the popover foreground, as drawn. That lands
 * around 5.3:1 in light and 6.2:1 in dark, so it clears the body-text floor
 * even though it is only a hint.
 */
.hc-sidebar-popover-menu-item__shortcut {
  flex: none;
  color: inherit;
  opacity: 0.6;
  white-space: nowrap;
}

.hc-sidebar-popover-menu-item:hover,
.hc-sidebar-popover-menu-item--hover {
  background-color: var(--base-accent);
  color: var(--base-accent-foreground);
}

/*
 * Focus. Figma's ring is 2px of --base-sidebar-ring at 50% opacity; focus
 * also takes the accent background so the state survives the dark theme,
 * where that ring alone is under 3:1.
 */
.hc-sidebar-popover-menu-item:focus-visible,
.hc-sidebar-popover-menu-item--focused {
  outline: none;
  background-color: var(--base-accent);
  color: var(--base-accent-foreground);
}

.hc-sidebar-popover-menu-item:focus-visible::after,
.hc-sidebar-popover-menu-item--focused::after {
  content: '';
  position: absolute;
  inset: 0;
  border: var(--border-width-border-2) solid var(--base-sidebar-ring);
  border-radius: var(--border-radius-rounded-md);
  opacity: 0.5;
  pointer-events: none;
}

/* ---- SidebarPopoverTrigger ---- */
/* SidebarPopoverTrigger — Honeycomb / Sidebar / PopoverTrigger (Figma 5198:1724) */

.hc-sidebar-popover-trigger {
  box-sizing: border-box;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  max-width: 100%;
  padding: var(--spacing-2) var(--spacing-1-5);
  border: 0;
  border-radius: var(--border-radius-rounded-md);
  background-color: transparent;
  color: var(--base-sidebar-foreground);
  font-family: var(--font-sans);
  text-align: left;
  cursor: pointer;
}

/*
 * A 20px tile in the sidebar's own primary — near-black in light, blue in
 * dark. It holds a 12px glyph, smaller than the 16px a MediaAsset carries.
 */
.hc-sidebar-popover-trigger__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--spacing-5);
  height: var(--spacing-5);
  border-radius: var(--border-radius-rounded-md);
  background-color: var(--base-sidebar-primary);
  color: var(--base-sidebar-primary-foreground);
}

.hc-sidebar-popover-trigger__icon > svg {
  display: block;
  width: var(--spacing-3);
  height: var(--spacing-3);
}

.hc-sidebar-popover-trigger__label {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The chevron sits at half strength beside a full-contrast label, as drawn. */
.hc-sidebar-popover-trigger__twisty {
  display: flex;
  flex: none;
  align-items: center;
  opacity: 0.5;
}

.hc-sidebar-popover-trigger:hover,
.hc-sidebar-popover-trigger--hover {
  background-color: var(--base-sidebar-accent);
  color: var(--base-sidebar-accent-foreground);
}

.hc-sidebar-popover-trigger:hover .hc-sidebar-popover-trigger__twisty,
.hc-sidebar-popover-trigger--hover .hc-sidebar-popover-trigger__twisty {
  opacity: 1;
}

/*
 * Focus. Figma's ring across this family is 2px of --base-sidebar-ring at 50%
 * opacity, which is under 3:1 in dark, so focus also takes the accent
 * background.
 */
.hc-sidebar-popover-trigger:focus-visible {
  outline: none;
  background-color: var(--base-sidebar-accent);
  color: var(--base-sidebar-accent-foreground);
}

.hc-sidebar-popover-trigger:focus-visible::after {
  content: '';
  position: absolute;
  inset: 0;
  border: var(--border-width-border-2) solid var(--base-sidebar-ring);
  border-radius: var(--border-radius-rounded-md);
  opacity: 0.5;
  pointer-events: none;
}

.hc-sidebar-popover-trigger:focus-visible .hc-sidebar-popover-trigger__twisty {
  opacity: 1;
}

/* ---- Skeleton ---- */
/* Honeycomb — Skeleton
   Figma eri86fUvOPsnYIL1G6aiBc, set 295:462.
   Read: 64:249 (Default), 295:463 (Card), 296:2 (Text),
   21141:396860 (Form), 21141:396932 (Table).

   Every shape in every variant is base/accent with a rounded-md corner; the
   avatar is the one exception and is rounded-full. Nothing animates in Figma
   and nothing animates here — a pulsing placeholder is a decision the library
   did not make.

   Figma pins the bar widths in pixels (150/100, 222/167, 153). Those are
   frame-relative and meaningless outside the file, so the widths are
   percentages of the container here and the skeleton is fluid. The one
   proportion that carries meaning — a short second line — is kept at Figma's
   ratio (about two thirds / three quarters).

   The avatar is 40px, which no spacing token holds; it is composed from
   spacing-8 + spacing-2 rather than written as a literal. */

.hc-skeleton {
  box-sizing: border-box;
  display: flex;
  font-family: var(--font-sans);
}

.hc-skeleton__bar,
.hc-skeleton__field,
.hc-skeleton__block,
.hc-skeleton__avatar {
  flex: none;
  background-color: var(--base-accent);
}

.hc-skeleton__bar {
  width: 100%;
  height: var(--spacing-4);
  border-radius: var(--border-radius-rounded-md);
}

.hc-skeleton__bar--short {
  width: 66%;
}

.hc-skeleton__lines {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

/* ---------- Variant: default (avatar + two lines) ---------- */

.hc-skeleton--default {
  align-items: center;
  gap: var(--spacing-4);
}

.hc-skeleton--default .hc-skeleton__lines {
  gap: var(--spacing-2);
}

.hc-skeleton__avatar {
  width: calc(var(--spacing-8) + var(--spacing-2));
  height: calc(var(--spacing-8) + var(--spacing-2));
  border-radius: var(--border-radius-rounded-full);
}

/* ---------- Variant: card (two lines over a square block) ---------- */

.hc-skeleton--card {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--spacing-6);
  width: 100%;
}

.hc-skeleton--card .hc-skeleton__lines {
  flex: none;
  gap: var(--spacing-2);
  width: 100%;
}

.hc-skeleton__block {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--border-radius-rounded-md);
}

/* ---------- Variant: text (two lines, the second short) ---------- */

.hc-skeleton--text {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--spacing-4);
  width: 100%;
}

.hc-skeleton--text .hc-skeleton__lines {
  flex: none;
  gap: var(--spacing-2);
  width: 100%;
}

/* Figma's second text line is 167 of 222 — three quarters, not two thirds. */
.hc-skeleton--text .hc-skeleton__bar--short {
  width: 75%;
}

/* ---------- Variant: form (a label over a control) ---------- */

.hc-skeleton--form {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--spacing-3);
  width: 100%;
}

.hc-skeleton--form .hc-skeleton__lines {
  flex: none;
  gap: var(--spacing-3);
  width: 100%;
}

/* The control stands in for a 32px-high input. */
.hc-skeleton__field {
  width: 75%;
  height: var(--spacing-8);
  border-radius: var(--border-radius-rounded-md);
}

/* ---------- Variant: table (five full-width rows) ---------- */

.hc-skeleton--table {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--spacing-4);
  width: 100%;
}

.hc-skeleton--table .hc-skeleton__lines {
  flex: none;
  gap: var(--spacing-2);
  width: 100%;
}

/* ---- Slider ---- */
/* Honeycomb — Slider
 * Values read from Figma set 17382:13106 (default 64:176, Range=Yes 17382:13107).
 * Rail and fill are 4px tall; the thumb is 12px and hangs 6px past each end of the
 * fill, exactly as the source places it.
 */

.hc-slider {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  box-sizing: border-box;
  width: 100%;
  padding: var(--spacing-1) 0;
  border-radius: var(--border-radius-rounded-full);
  font-family: var(--font-sans);
}

.hc-slider__track {
  position: relative;
  display: block;
  width: 100%;
  height: var(--spacing-1);
  border-radius: var(--border-radius-rounded-full);
  background: var(--base-muted);
}

.hc-slider__fill {
  position: absolute;
  top: 0;
  height: var(--spacing-1);
  border-radius: var(--border-radius-rounded-full);
  background: var(--base-primary);
}

.hc-slider__thumb {
  position: absolute;
  top: 50%;
  display: block;
  box-sizing: border-box;
  width: var(--spacing-3);
  height: var(--spacing-3);
  margin-left: -6px;
  transform: translateY(-50%);
  border-radius: var(--border-radius-rounded-full);
  border: var(--border-width-border) solid var(--base-ring);
  background: var(--base-background);
  cursor: grab;
}

.hc-slider__thumb:focus {
  outline: none;
}

.hc-slider__thumb:focus-visible {
  box-shadow: 0 0 0 3px var(--base-ring);
}

.hc-slider.is-disabled {
  opacity: 0.5;
}

.hc-slider.is-disabled .hc-slider__thumb {
  cursor: not-allowed;
}

/* ---- SliderItem ---- */
/* Honeycomb — Slider / Item
   Figma set 17428:100438; values read off 17428:100437 (Default),
   17428:100441 (Hover) and 17428:100440 (Focus).

   A 12px (spacing-3) disc, 1px border in base-ring, rounded-full, filled
   white. Figma paints the fill with the literal `tailwind-colors/base/white`
   rather than a theme variable; --base-background is that value in light and
   is what the sibling Slider thumb already uses, so it is used here too and
   the dot stays legible in dark. */

.hc-slider-item {
  box-sizing: border-box;
  display: inline-block;
  flex: 0 0 auto;
  width: var(--spacing-3);
  height: var(--spacing-3);
  border: var(--border-width-border) solid var(--base-ring);
  border-radius: var(--border-radius-rounded-full);
  background-color: var(--base-background);
  overflow: hidden;
  vertical-align: middle;
}

/* Hover and Focus are the same treatment in Figma: the focus/default effect,
   a 3px spread of custom/outline — base-ring at 50%. Both are kept so the
   axis survives the port; they render identically on purpose. */
.hc-slider-item--hover,
.hc-slider-item--focus,
.hc-slider-item:hover,
.hc-slider-item:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--base-ring) 50%, transparent);
}

.hc-slider-item:focus {
  outline: none;
}

/* ---- Sonner ---- */
/* Honeycomb — Sonner
   Read from Figma eri86fUvOPsnYIL1G6aiBc, set 18482:48401.
   Variants opened: 193:1386 State=Default, 18482:48402 State=Focus.

   336px is the source width and has no Honeycomb spacing token, so it is a
   literal — and a max-width rather than a width, so the toast can narrow on
   a phone instead of forcing a horizontal scroll.

   Figma's resting elevation is a 0 4px 6px black-10% drop shadow, which is
   --shadow-md. Its focus node replaces the border with a 2px black-20% ring;
   that is drawn here as the house 3px --base-ring plus a --base-ring border,
   so the surface is never picked out by a ring alone. */

.hc-sonner {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  width: 100%;
  max-width: 336px;
  padding: var(--spacing-4);
  border: var(--border-width-border) solid var(--base-border);
  border-radius: var(--border-radius-rounded-xl);
  background-color: var(--base-popover);
  box-shadow: var(--shadow-md);
  font-family: var(--font-sans);
  color: var(--base-popover-foreground);
}

.hc-sonner__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--spacing-5);
  height: var(--spacing-5);
  color: var(--base-popover-foreground);
}

.hc-sonner__icon > svg,
.hc-sonner__icon > img {
  display: block;
  width: 100%;
  height: 100%;
}

.hc-sonner__text {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-0-5);
  min-width: 0;
}

.hc-sonner__title {
  width: 100%;
  margin: 0;
  color: var(--base-popover-foreground);
  word-break: break-word;
}

.hc-sonner__description {
  width: 100%;
  margin: 0;
  color: var(--base-muted-foreground);
  word-break: break-word;
}

.hc-sonner__action {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  flex: none;
}

/* ---------- State: focus ---------- */

/* Deliberately :focus-visible and not :focus-within — the action button
   inside draws its own ring, and two rings on one toast reads as a bug. */
.hc-sonner:focus-visible,
.hc-sonner--is-focus {
  outline: none;
  border-color: var(--base-ring);
  box-shadow: var(--shadow-md), 0 0 0 3px var(--base-ring);
}

/* ---- SonnerAction ---- */
/* Honeycomb — SonnerAction
   Read from Figma eri86fUvOPsnYIL1G6aiBc, set 17375:198044.
   Variants opened: 17375:198043 Default, 17375:198042 Secondary.

   24px tall (--spacing-6) with 16px of horizontal padding, a full pill and
   shadow/xs. The primary pair flips with the theme — navy on near-white in
   light, amber on near-black in dark — which is why the label is
   --base-primary-foreground and never a literal white. */

.hc-sonner-action {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  height: var(--spacing-6);
  margin: 0;
  padding: 0 var(--spacing-4);
  border: var(--border-width-border) solid transparent;
  border-radius: var(--border-radius-rounded-full);
  background-color: var(--base-primary);
  box-shadow: var(--shadow-xs);
  font-family: var(--font-sans);
  color: var(--base-primary-foreground);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease,
    border-color 120ms ease, box-shadow 120ms ease;
}

.hc-sonner-action__label {
  display: inline-block;
}

/* ---------- Type: Secondary ---------- */
/* One addition to the source. Figma gives this a --base-secondary fill and no
   stroke, and --base-secondary is the same value as --base-popover in the
   dark theme (#262626), so the pill would vanish into the toast it sits on.
   A --base-border edge is drawn to keep the shape visible. The label is what
   carries the control either way: --base-secondary-foreground on
   --base-secondary clears 4.5:1 in both themes. */

.hc-sonner-action--secondary {
  border-color: var(--base-border);
  background-color: var(--base-secondary);
  color: var(--base-secondary-foreground);
}

/* ---------- States ---------- */
/* Figma ships no hover or focus node for this part; both follow the
   Honeycomb rule rather than being invented per variant. */

.hc-sonner-action:hover {
  background-color: color-mix(in srgb, var(--base-background) 15%, var(--base-primary));
}

.hc-sonner-action--secondary:hover {
  background-color: var(--base-accent);
  color: var(--base-accent-foreground);
}

.hc-sonner-action:focus-visible {
  outline: none;
  border-color: var(--base-ring);
  box-shadow: var(--shadow-xs), 0 0 0 3px var(--base-ring);
}

@media (prefers-reduced-motion: reduce) {
  .hc-sonner-action { transition: none; }
}

/* ---- SonnerIcon ---- */
/* Honeycomb — SonnerIcon
   Read from Figma eri86fUvOPsnYIL1G6aiBc, set 17375:198096.
   Variants opened: 17375:198093 Success, 17375:198094 Info,
   17375:198092 Warning, 17375:198095 Error, 17409:98936 Loading.

   Figma draws all five as solid glyphs in base/foreground — one colour, five
   shapes. That is deliberate and it is kept: the type is carried by the
   outline, never by a hue, so the set stays legible in greyscale and in both
   themes. The mark inherits currentColor from the toast, so it lands on
   --base-popover-foreground by default.

   The one deviation from the source: these are drawn as Lucide outlines at a
   1.5px stroke rather than as filled glyphs, which is the icon convention
   everywhere else in Honeycomb. The shapes are the same five. */

.hc-sonner-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--spacing-5);
  height: var(--spacing-5);
  color: inherit;
}

.hc-sonner-icon__svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Loading is the one type that moves. The arc turns; everything else is
   still. Honoured only when the viewer has not asked for reduced motion. */
.hc-sonner-icon--loading .hc-sonner-icon__svg {
  animation: hc-sonner-icon-spin 900ms linear infinite;
}

@keyframes hc-sonner-icon-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hc-sonner-icon--loading .hc-sonner-icon__svg { animation: none; }
}

/* ---- Spinner ---- */
/* Spinner — Honeycomb. Figma set 18665:25956, default variant 18665:25955.
   Figma models the rotation as a "Spin Degree" variant axis (0/90/180/270)
   purely so the prototype can animate; in code it is one CSS keyframe. */

@keyframes hc-spinner-rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.hc-spinner {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-sizing: border-box;
  vertical-align: middle;
  color: var(--base-muted-foreground);
}

/* Box sizes, read from the Figma set. */
.hc-spinner--3 {
  width: var(--spacing-3);
  height: var(--spacing-3);
}

.hc-spinner--4 {
  width: var(--spacing-4);
  height: var(--spacing-4);
}

.hc-spinner--5 {
  width: var(--spacing-5);
  height: var(--spacing-5);
}

.hc-spinner--6 {
  width: var(--spacing-6);
  height: var(--spacing-6);
}

.hc-spinner--8 {
  width: var(--spacing-8);
  height: var(--spacing-8);
}

.hc-spinner__glyph {
  display: block;
  width: 100%;
  height: 100%;
  animation: hc-spinner-rotate 1s linear infinite;
}

/* The label names the wait for assistive technology without taking space. */
.hc-spinner__label {
  position: absolute;
  width: var(--border-width-border);
  height: var(--border-width-border);
  margin: calc(var(--border-width-border) * -1);
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip-path: inset(50%);
}

/* Honour a reduced-motion request: slow the rotation right down so the
   spinner still reads as "working" without the vestibular load. */
@media (prefers-reduced-motion: reduce) {
  .hc-spinner__glyph {
    animation-duration: 4s;
  }
}

/* ---- Switch ---- */
/* Honeycomb — Switch
 * Values read from Figma set 60:450 (default 428:1425, On 428:1431, Box 17119:18448, sm 21136:10697).
 * The 18.4px default track height and the 1px side padding are exact — not rounded to a grid.
 * The 2px border is transparent in the source; it is what holds the thumb off the track edge,
 * so it is kept rather than folded into padding.
 */

.hc-switch {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  gap: var(--spacing-2);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-sans);
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
}

.hc-switch--end {
  flex-direction: row-reverse;
}

/* ---- track ---- */

.hc-switch__track {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  width: var(--spacing-8);
  height: 18.4px;
  padding: 0 1px;
  border: var(--border-width-border-2) solid transparent;
  border-radius: var(--border-radius-rounded-full);
  background: var(--base-input);
}

.hc-switch__thumb {
  flex: none;
  display: block;
  width: var(--spacing-4);
  height: var(--spacing-4);
  border-radius: var(--border-radius-rounded-full);
  background: var(--base-background);
}

.hc-switch.is-active .hc-switch__track {
  justify-content: flex-end;
  background: var(--base-primary);
}

/* Size = sm */

.hc-switch--size-sm .hc-switch__track {
  width: var(--spacing-6);
  height: 14px;
}

.hc-switch--size-sm .hc-switch__thumb {
  width: var(--spacing-3);
  height: var(--spacing-3);
}

/* ---- text ---- */

.hc-switch__content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-0-5);
  min-width: 0;
}

.hc-switch__label-row {
  display: flex;
  align-items: center;
  width: 100%;
}

.hc-switch__label {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--base-foreground);
  word-break: break-word;
}

.hc-switch__description {
  display: block;
  width: 100%;
  color: var(--base-muted-foreground);
  word-break: break-word;
}

.hc-switch__invalid {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  color: var(--base-destructive);
}

.hc-switch__invalid-icon {
  flex: none;
  width: var(--spacing-4);
  height: var(--spacing-4);
}

/* ---- states ---- */

.hc-switch:focus {
  outline: none;
}

.hc-switch:focus-visible .hc-switch__track,
.hc-switch--state-focus .hc-switch__track {
  box-shadow: 0 0 0 3px var(--base-ring);
}

.hc-switch.is-invalid .hc-switch__track {
  border-color: var(--base-destructive);
}

.hc-switch.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---- Type = Box ---- */

.hc-switch--box {
  padding: var(--spacing-2-5);
  border: var(--border-width-border) solid var(--base-border);
  border-radius: var(--border-radius-rounded-lg);
  background: var(--base-background);
}

.hc-switch--box.is-invalid {
  border-color: var(--base-destructive);
}

/* ---- SwitchGroup ---- */
/* SwitchGroup — Honeycomb Forms.
   Figma: 18684:180466 (Switch Group). The Figma frame is a vertical
   auto-layout of Switch rows with a 16px gap (spacing-4) — wider than the
   12px used by the Checkbox and Radio groups, because a switch row usually
   carries a description line. The legend, description and error below are
   Honeycomb additions and take the same 16px rhythm. */

.hc-switch-group {
  display: block;
  box-sizing: border-box;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--font-sans);
  color: var(--base-foreground);
}

.hc-switch-group__legend {
  display: block;
  float: none;
  width: 100%;
  padding: 0;
  margin: 0 0 var(--spacing-4) 0;
  color: var(--base-foreground);
}

.hc-switch-group__body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-4);
}

.hc-switch-group__description {
  margin: 0;
  color: var(--base-muted-foreground);
}

/* The stack of rows. 16px between neighbours, straight from Figma. */
.hc-switch-group__rows {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-4);
}

.hc-switch-group__error {
  margin: 0;
  color: var(--base-destructive);
}

.hc-switch-group.is-invalid > .hc-switch-group__legend {
  color: var(--base-destructive);
}

/* Disabled: the fieldset's own `disabled` attribute does the work for
   assistive tech and pointer events; this only dims. Do not also dim
   each row or the two multiply. */
.hc-switch-group.is-disabled {
  opacity: 0.5;
}

/* ---- Table ---- */
/* Table — Honeycomb / Table (Figma 325:388) */

.hc-table {
  box-sizing: border-box;
  width: 100%;
  /*
   * 356px is the minimum the Figma frame is drawn at, and 85px is the minimum
   * a column is allowed to shrink to. Neither has a Honeycomb token.
   */
  min-width: 356px;
  /* Equal columns: every Figma column is `flex: 1 0 0`. */
  table-layout: fixed;
  border-collapse: collapse;
  background-color: transparent;
  color: var(--base-foreground);
  font-family: var(--font-sans);
  text-align: left;
}

/* The caption is drawn below the table, centred, with spacing-4 above it. */
.hc-table__caption {
  caption-side: bottom;
  padding-top: var(--spacing-4);
  color: var(--base-muted-foreground);
  text-align: center;
}

/*
 * Head and body cells the consumer writes as bare `th` / `td`. Cells built from
 * the TableHead and TableCell components bring their own box, so they are
 * excluded here and never get a doubled border or doubled padding.
 */
.hc-table th:not(.hc-table-head):not(.hc-table-cell),
.hc-table td:not(.hc-table-head):not(.hc-table-cell) {
  box-sizing: border-box;
  min-width: 85px;
  padding: var(--spacing-2);
  border-bottom: var(--border-width-border) solid var(--base-border);
  color: inherit;
  text-align: inherit;
  vertical-align: middle;
}

.hc-table thead th:not(.hc-table-head),
.hc-table thead td:not(.hc-table-head) {
  /* Head rows measure 40px with vertical padding removed. */
  height: 40px;
  padding-top: 0;
  padding-bottom: 0;
  color: var(--base-foreground);
}

/* Row rhythm: the whole row lifts on hover, not one cell. */
.hc-table tbody tr:hover {
  background-color: var(--base-accent);
  color: var(--base-accent-foreground);
}

/* The last body row carries no separator — the footer or caption follows it. */
.hc-table tbody tr:last-child > th:not(.hc-table-head):not(.hc-table-cell),
.hc-table tbody tr:last-child > td:not(.hc-table-head):not(.hc-table-cell) {
  border-bottom-color: transparent;
}

/*
 * Footer. Figma fills this band with base-muted under a 50% white wash, a
 * per-mode opacity Honeycomb expresses with a custom/* bridging variable that
 * this token set does not carry. The flat muted ground ships instead.
 */
.hc-table__foot {
  background-color: var(--base-muted);
}

.hc-table__foot th:not(.hc-table-head):not(.hc-table-cell),
.hc-table__foot td:not(.hc-table-head):not(.hc-table-cell) {
  border-bottom: 0;
  color: var(--base-foreground);
}

/* Right-aligned columns — totals, amounts, the trailing action column. */
.hc-table th.hc-table__align-end,
.hc-table td.hc-table__align-end {
  text-align: right;
}

/* ---- TableCell ---- */
/* TableCell — Honeycomb / Table / Cell (Figma 190:901) */

.hc-table-cell {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  min-width: 85px;
  padding: var(--spacing-2);
  border-bottom: var(--border-width-border) solid var(--base-border);
  background-color: transparent;
  color: var(--base-foreground);
  font-family: var(--font-sans);
  text-align: left;
  vertical-align: middle;
}

/*
 * The last row's cells drop the separator. The border box is kept and only its
 * colour is cleared, so the last row stays exactly as tall as the ones above it.
 */
.hc-table-cell--last-cell {
  border-bottom-color: transparent;
}

.hc-table-cell:hover,
.hc-table-cell.is-hover {
  background-color: var(--base-accent);
  color: var(--base-accent-foreground);
}

/* Text cells get the single-line truncation treatment measured in the source. */
.hc-table-cell__text {
  flex: 1 0 0;
  min-width: 0;
  overflow: hidden;
  color: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-word;
}

/* Control cells lay their child out at its natural size, centred on the row. */
.hc-table-cell--control > * {
  flex: none;
}

/* Rendered as a real th/td (Table's default), display:flex makes the browser wrap the
   whole row in one anonymous cell and stack every cell full-width. Restore table layout
   there; the div-grid usage keeps the flex box. Read from Table/part.js's structure. */
th.hc-table-cell, td.hc-table-cell { display: table-cell; vertical-align: middle; }
th.hc-table-cell > *, td.hc-table-cell > * { display: block; }

/* ---- TableHead ---- */
/* TableHead — Honeycomb / Table / Head (Figma 190:898) */

.hc-table-head {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--spacing-2-5);
  height: 40px;
  min-width: 85px;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: var(--spacing-2);
  padding-right: var(--spacing-2);
  border-bottom: var(--border-width-border) solid var(--base-border);
  background-color: transparent;
  color: var(--base-foreground);
  font-family: var(--font-sans);
  text-align: left;
  vertical-align: middle;
}

.hc-table-head:hover,
.hc-table-head.is-hover {
  background-color: var(--base-accent);
  color: var(--base-accent-foreground);
}

.hc-table-head__label {
  flex: 1 0 0;
  min-width: 0;
  color: inherit;
}

.hc-table-head__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-1-5);
  height: 32px;
  margin: 0;
  padding-top: var(--spacing-2);
  padding-bottom: var(--spacing-2);
  padding-left: var(--spacing-5);
  padding-right: var(--spacing-5);
  border: 0;
  border-radius: var(--border-radius-rounded-4xl);
  background-color: transparent;
  color: var(--base-foreground);
  font-family: var(--font-sans);
  white-space: nowrap;
  cursor: pointer;
}

.hc-table-head__button:hover {
  background-color: var(--base-accent);
  color: var(--base-accent-foreground);
}

.hc-table-head__button:focus-visible {
  outline: var(--border-width-border-2) solid var(--base-ring);
  outline-offset: 2px;
}

.hc-table-head__button-label {
  color: inherit;
}

.hc-table-head__icon-slot {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: inherit;
}

.hc-table-head__icon {
  display: block;
  width: 16px;
  height: 16px;
}

/* Rendered as a real th/td (Table's default), display:flex makes the browser wrap the
   whole row in one anonymous cell and stack every cell full-width. Restore table layout
   there; the div-grid usage keeps the flex box. Read from Table/part.js's structure. */
th.hc-table-head, td.hc-table-head { display: table-cell; vertical-align: middle; }
th.hc-table-head > *, td.hc-table-head > * { display: block; }

/* ---- Tabs ---- */
/* Honeycomb — Tabs
   Figma eri86fUvOPsnYIL1G6aiBc, set 21133:27311.
   Read: 183:539 (Default/Default), 21133:31196 (Default/Vertical),
   21133:27312 (Line/Default).

   The set defines three of the four combinations. Line + Vertical does not
   exist in Figma; it is supported here as a plain column of line triggers and
   is noted in the README rather than invented into something new.

   Default is the muted track: a fixed 32px-high pill holding the triggers.
   Figma pads it 3px. There is no 3px spacing token and the track is height-
   locked, so 2px (spacing-0-5) is used — 28px trigger + 2 + 2 lands exactly on
   the 32px Figma frame, which 3px would not.

   Line is not a track at all: a bare row with a 4px gap. */

.hc-tabs {
  box-sizing: border-box;
  display: flex;
  font-family: var(--font-sans);
}

/* ---------- Variant: default (the muted track) ---------- */

.hc-tabs--default {
  padding: var(--spacing-0-5);
  background-color: var(--base-muted);
}

.hc-tabs--default.hc-tabs--orientation-default {
  align-items: center;
  height: var(--spacing-8);
  border-radius: var(--border-radius-rounded-full);
}

.hc-tabs--default.hc-tabs--orientation-default > * {
  flex: none;
  height: 100%;
}

/* Vertical keeps the muted track but squares off to rounded-2xl and stretches
   every trigger to the track's width. */
.hc-tabs--default.hc-tabs--orientation-vertical {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  border-radius: var(--border-radius-rounded-2xl);
}

.hc-tabs--default.hc-tabs--orientation-vertical > * {
  flex: none;
  width: 100%;
}

/* ---------- Variant: line ---------- */

.hc-tabs--line {
  gap: var(--spacing-1);
  background-color: transparent;
}

.hc-tabs--line.hc-tabs--orientation-default {
  align-items: center;
}

.hc-tabs--line.hc-tabs--orientation-default > * {
  flex: none;
}

/* Not in the Figma set. A column of line triggers, each keeping its own
   bottom rule; no new visual language is introduced. */
.hc-tabs--line.hc-tabs--orientation-vertical {
  flex-direction: column;
  align-items: stretch;
}

.hc-tabs--line.hc-tabs--orientation-vertical > * {
  flex: none;
  width: 100%;
  justify-content: flex-start;
}

/* ---- TabsTrigger ---- */
/* Honeycomb — Tabs / Trigger
   Figma eri86fUvOPsnYIL1G6aiBc, set 183:532.
   Read: 183:531 (Default/On/Default), 183:530 (Default/Off/Default),
   17428:109551 (Default/On/Focus), 21133:21311 (Default/On/Disabled),
   21133:21344 (Line/On/Default), 21133:21360 (Line/Off/Default),
   21133:21352 (Line/On/Focus).

   The two variants share the type ramp (14/20 medium), the 6px gap and the
   16px icon box, and nothing else.

   Default is a pill: 4px/6px padding, rounded-full. When active it gains the
   raised fill and shadow/sm; when inactive it is completely bare. Line is a
   6px square box with a 2px bottom rule that only the active tab paints.

   Figma paints the active pill with `custom/background dark:input\30` — plain
   white in light, base/input at 30% in dark. That bridging variable is not a
   published token, so the mix is written out below, matching what InputGroup
   already does for the same variable.

   Disabled is opacity/opacity-50 on the whole node; Figma changes no colour. */

.hc-tabs-trigger {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-1-5);
  margin: 0;
  background-color: transparent;
  color: var(--base-muted-foreground);
  font-family: var(--font-sans);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

.hc-tabs-trigger__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--spacing-4);
  height: var(--spacing-4);
}

.hc-tabs-trigger__icon > svg,
.hc-tabs-trigger__icon > img {
  display: block;
  width: 100%;
  height: 100%;
}

.hc-tabs-trigger__label {
  white-space: nowrap;
}

.hc-tabs-trigger__badge {
  display: inline-flex;
  flex: none;
  align-items: center;
}

.hc-tabs-trigger--active {
  color: var(--base-foreground);
}

@media (prefers-reduced-motion: reduce) {
  .hc-tabs-trigger { transition: none; }
}

/* ---------- Variant: default (the pill) ---------- */

.hc-tabs-trigger--default {
  padding-block: var(--spacing-1);
  padding-inline: var(--spacing-1-5);
  border: var(--border-width-border) solid transparent;
  border-radius: var(--border-radius-rounded-full);
}

.hc-tabs-trigger--default.hc-tabs-trigger--active {
  background-color: var(--base-background);
  box-shadow: var(--shadow-sm);
}

:root[data-theme="dark"] .hc-tabs-trigger--default.hc-tabs-trigger--active {
  background-color: color-mix(in srgb, var(--base-input) 30%, transparent);
}

/* ---------- Variant: line ---------- */

.hc-tabs-trigger--line {
  padding: var(--spacing-1-5);
  border: 0;
  border-bottom: var(--border-width-border-2) solid transparent;
  border-radius: 0;
}

.hc-tabs-trigger--line.hc-tabs-trigger--active {
  border-bottom-color: var(--base-foreground);
}

/* ---------- Focus ---------- */

/* Figma's focus/default effect is a 3px spread of custom/outline — base/ring
   at 50%. The pill also swaps its 1px stroke to a solid base/ring; the line
   variant keeps its bottom rule and takes only the ring. */
.hc-tabs-trigger:focus-visible,
.hc-tabs-trigger--is-focus {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--base-ring) 50%, transparent);
}

.hc-tabs-trigger--default:focus-visible,
.hc-tabs-trigger--default.hc-tabs-trigger--is-focus {
  border-color: var(--base-ring);
}

/* ---------- Disabled ---------- */

.hc-tabs-trigger--is-disabled,
.hc-tabs-trigger:disabled {
  opacity: 0.5;
  box-shadow: none;
  cursor: not-allowed;
}

/* ---- Textarea ---- */
/* Textarea — Honeycomb Forms
   Figma: set 183:74, default variant 182:59.
   Geometry read from Figma: min-height 64px, padding 8px/10px
   (spacing-2 / spacing-2-5), radius rounded-lg, 1px border in
   base-input. 64px is a Figma measurement no spacing token holds. */

.hc-textarea {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  min-height: 64px;
  padding-block: var(--spacing-2);
  padding-inline: var(--spacing-2-5);
  border: var(--border-width-border) solid var(--base-input);
  border-radius: var(--border-radius-rounded-lg);
  background-color: var(--base-background);
  color: var(--base-foreground);
  font-family: var(--font-sans);
}

.hc-textarea__control {
  flex: 1 0 0;
  min-height: 1px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  background-color: transparent;
  color: var(--base-foreground);
  font-family: var(--font-sans);
  resize: vertical;
}

.hc-textarea__control::placeholder {
  color: var(--base-muted-foreground);
  opacity: 1;
}

.hc-textarea__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-1-5);
  padding-top: var(--spacing-1);
  color: var(--base-muted-foreground);
}

/* --- States -------------------------------------------------------- */

/* Focus: border swaps to base-ring plus a 3px ring at 50% (Figma
   effect focus/default). 3px is the Figma spread; no token holds it. */
.hc-textarea--focus,
.hc-textarea:focus-within {
  border-color: var(--base-ring);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--base-ring) 50%, transparent);
}

/* Error resting: destructive border, no ring — exactly as Figma draws
   17382:151258. The ring only arrives on Error (Focus), 17428:109759. */
.hc-textarea--error {
  border-color: var(--base-destructive);
  box-shadow: none;
}

.hc-textarea--error-focus,
.hc-textarea--error:focus-within {
  border-color: var(--base-destructive);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--base-destructive) 20%, transparent);
}

.hc-textarea--disabled {
  opacity: 0.5;
  background-color: color-mix(in srgb, var(--base-input) 50%, transparent);
  cursor: not-allowed;
}

:root[data-theme="dark"] .hc-textarea--disabled {
  background-color: color-mix(in srgb, var(--base-input) 80%, transparent);
}

.hc-textarea--disabled .hc-textarea__control {
  cursor: not-allowed;
  resize: none;
}

/* ---- TimePicker ---- */
/* TimePicker — Honeycomb Forms
   Figma: set 18415:7484 "Time Picker", default variant 18415:7493
   (State=Default).

   Geometry from Figma: 32px tall (spacing-8), padding 4px/10px
   (spacing-1 / spacing-2-5), gap spacing-2, radius rounded-4xl, 1px
   border in base/input, text-sm in base/foreground. The optional Clock2
   glyph is 16px (spacing-4). Figma draws it 150px wide; here the field
   fills its container so it can sit under a Calendar of any width. */

.hc-time-picker {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  width: 100%;
  height: var(--spacing-8);
  padding-block: var(--spacing-1);
  padding-inline: var(--spacing-2-5);
  border: var(--border-width-border) solid var(--base-input);
  border-radius: var(--border-radius-rounded-4xl);
  background-color: var(--base-background);
  color: var(--base-foreground);
  font-family: var(--font-sans);
}

.hc-time-picker__icon {
  display: block;
  flex: 0 0 auto;
  width: var(--spacing-4);
  height: var(--spacing-4);
  color: var(--base-foreground);
}

.hc-time-picker__input {
  flex: 1 0 0;
  min-width: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  background-color: transparent;
  color: var(--base-foreground);
  font-family: var(--font-sans);
  text-overflow: ellipsis;
}

.hc-time-picker__input::placeholder {
  color: var(--base-muted-foreground);
  opacity: 1;
}

.hc-time-picker__addon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  color: var(--base-muted-foreground);
}

/* --- States --------------------------------------------------------- */

/* Focus: border swaps to base-ring plus Figma's 3px focus/default ring. */
.hc-time-picker--focus,
.hc-time-picker:focus-within {
  border-color: var(--base-ring);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--base-ring) 50%, transparent);
}

.hc-time-picker--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.hc-time-picker--disabled .hc-time-picker__input {
  cursor: not-allowed;
}

/* ---- Toggle ---- */
/* Honeycomb — Toggle
   Read from Figma eri86fUvOPsnYIL1G6aiBc, set 124:27.
   Variants opened: 124:26 Default/Default/Default, 124:25 .../Hover,
   17428:110506 .../Focus, 124:24 .../Pressed, 132:1228 .../Disabled,
   132:1021 Outline/Default/Default, 132:1023 Outline/Hover,
   17428:111391 Outline/Focus, 132:1025 Outline/Pressed,
   132:1230 Outline/Disabled, 132:1067 + 132:1069 size sm,
   132:1103 + 132:1105 size lg, and the sm/lg state nodes beneath them.

   Two details are in the source and are not simplifications. The Default
   variant's hover drops the label to --base-muted-foreground while the
   Outline variant's hover raises it to --base-accent-foreground. And every
   size uses the same 14px medium type and the same 16px icon — only the
   height, horizontal padding and gap change. */

.hc-toggle {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-1);
  height: var(--spacing-8);
  margin: 0;
  /* Figma sets 10px of vertical padding under a fixed 32px height; the
     height wins, so the padding is dropped and the row is centred instead. */
  padding: 0 var(--spacing-2);
  border: var(--border-width-border) solid transparent;
  border-radius: var(--border-radius-rounded-full);
  background-color: transparent;
  font-family: var(--font-sans);
  color: var(--base-foreground);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease,
    border-color 120ms ease, box-shadow 120ms ease;
}

.hc-toggle__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--spacing-4);
  height: var(--spacing-4);
}

.hc-toggle__icon > svg,
.hc-toggle__icon > img {
  display: block;
  width: 100%;
  height: 100%;
}

.hc-toggle__label {
  display: inline-block;
}

/* ---------- Sizes ---------- */
/* 36px (lg) has no Honeycomb spacing token, so it stays a literal rather
   than being rounded onto the 4px grid. 28px (sm) is --spacing-7. */

.hc-toggle--size-sm {
  height: var(--spacing-7);
  padding-left: var(--spacing-1-5);
  padding-right: var(--spacing-1-5);
}

.hc-toggle--size-lg {
  height: 36px;
  gap: var(--spacing-2);
  padding-left: var(--spacing-2-5);
  padding-right: var(--spacing-2-5);
}

/* ---------- Variant: Outline ---------- */

.hc-toggle--outline {
  border-color: var(--base-input);
  background-color: var(--base-background);
}

/* ---------- State: hover ---------- */

.hc-toggle:hover:not(.hc-toggle--is-disabled),
.hc-toggle--is-hover {
  background-color: var(--base-muted);
  color: var(--base-muted-foreground);
}

.hc-toggle--outline:hover:not(.hc-toggle--is-disabled),
.hc-toggle--outline.hc-toggle--is-hover {
  background-color: var(--base-muted);
  color: var(--base-accent-foreground);
}

/* ---------- State: pressed (the on state) ---------- */
/* Pressed wins over hover: an on toggle keeps its accent fill and its
   full-strength label while the pointer is over it. */

.hc-toggle--is-pressed,
.hc-toggle--is-pressed:hover {
  background-color: var(--base-accent);
  color: var(--base-accent-foreground);
}

.hc-toggle--outline.hc-toggle--is-pressed,
.hc-toggle--outline.hc-toggle--is-pressed:hover {
  border-color: var(--base-input);
  background-color: var(--base-accent);
  color: var(--base-accent-foreground);
}

/* ---------- State: focus ---------- */
/* The Default variant has no border to change, so the ring-coloured edge is
   drawn as an inset shadow — same effect, no layout shift. */

.hc-toggle:focus-visible,
.hc-toggle--is-focus {
  outline: none;
  box-shadow:
    inset 0 0 0 var(--border-width-border) var(--base-ring),
    0 0 0 3px var(--base-ring);
}

.hc-toggle--outline:focus-visible,
.hc-toggle--outline.hc-toggle--is-focus {
  border-color: var(--base-ring);
  box-shadow: 0 0 0 3px var(--base-ring);
}

/* ---------- State: disabled ---------- */

.hc-toggle--is-disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .hc-toggle { transition: none; }
}

/* ---- ToggleGroup ---- */
/* Honeycomb — ToggleGroup
   Read from Figma eri86fUvOPsnYIL1G6aiBc, set 18707:214048.
   Variants opened: 132:946 Default/Horizontal, 21133:12922 Default/Vertical,
   18707:214049 Fill/Horizontal, 21133:12472 With Spacing/Horizontal,
   21133:12929 With Spacing/Vertical.

   In Figma the joined types are drawn by giving each child a different set of
   border sides: the first keeps all four, the rest drop the shared edge. A
   -1px margin on every child after the first produces exactly the same
   picture from one rule, and keeps working however many toggles you pass. */

.hc-toggle-group {
  display: inline-flex;
  position: relative;
  font-family: var(--font-sans);
}

.hc-toggle-group--horizontal {
  flex-direction: row;
  align-items: center;
}

.hc-toggle-group--vertical {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
}

/* ---------- Type: Default and Fill — one joined bar ---------- */

.hc-toggle-group--default > *,
.hc-toggle-group--fill > * {
  border-radius: 0;
  position: relative;
}

/* The lit child has to sit above its neighbours or its border and focus ring
   are clipped by the overlap. */
.hc-toggle-group--default > *:hover,
.hc-toggle-group--default > *:focus-visible,
.hc-toggle-group--fill > *:hover,
.hc-toggle-group--fill > *:focus-visible {
  z-index: 1;
}

.hc-toggle-group--default.hc-toggle-group--horizontal > * + *,
.hc-toggle-group--fill.hc-toggle-group--horizontal > * + * {
  margin-left: calc(-1 * var(--border-width-border));
}

.hc-toggle-group--default.hc-toggle-group--vertical > * + * {
  margin-top: calc(-1 * var(--border-width-border));
}

/* Horizontal ends are the long pill; vertical ends are the card corner.
   Both are read from the source, they are not the same value. */
.hc-toggle-group--default.hc-toggle-group--horizontal > *:first-child,
.hc-toggle-group--fill.hc-toggle-group--horizontal > *:first-child {
  border-top-left-radius: var(--border-radius-rounded-full);
  border-bottom-left-radius: var(--border-radius-rounded-full);
}

.hc-toggle-group--default.hc-toggle-group--horizontal > *:last-child,
.hc-toggle-group--fill.hc-toggle-group--horizontal > *:last-child {
  border-top-right-radius: var(--border-radius-rounded-full);
  border-bottom-right-radius: var(--border-radius-rounded-full);
}

.hc-toggle-group--default.hc-toggle-group--vertical > *:first-child {
  border-top-left-radius: var(--border-radius-rounded-lg);
  border-top-right-radius: var(--border-radius-rounded-lg);
}

.hc-toggle-group--default.hc-toggle-group--vertical > *:last-child {
  border-bottom-left-radius: var(--border-radius-rounded-lg);
  border-bottom-right-radius: var(--border-radius-rounded-lg);
}

/* ---------- Type: Fill ---------- */
/* The bar takes the width it is given and the segments share it evenly. */

.hc-toggle-group--fill {
  display: flex;
  width: 100%;
}

.hc-toggle-group--fill > * {
  flex: 1 0 0;
  min-width: 0;
}

/* ---------- Type: With Spacing — separate pills ---------- */
/* Nothing is overridden here: each child keeps its own radius and border. */

.hc-toggle-group--withSpacing.hc-toggle-group--horizontal {
  gap: var(--spacing-2);
}

.hc-toggle-group--withSpacing.hc-toggle-group--vertical {
  align-items: flex-start;
  gap: var(--spacing-1);
}

/* ---- Tooltip ---- */
/* Tooltip — Honeycomb. Figma set 17103:809, default variant 122:13. */

.hc-tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  box-sizing: border-box;
  max-width: 384px;
  padding: var(--spacing-2-5) var(--spacing-3);
  border-radius: var(--border-radius-rounded-2xl);
  background-color: var(--base-primary);
  color: var(--base-primary-foreground);
  font-family: var(--font-sans);
  box-shadow: var(--shadow-md);
}

.hc-tooltip__text {
  flex: 1 0 0;
  min-width: 0;
  color: var(--base-primary-foreground);
  overflow-wrap: anywhere;
}

/* Slot for a KbdGroup — pass <Kbd background="Primary"> children. */
.hc-tooltip__keys {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  flex: 0 0 auto;
}

/* The arrow is a 10px square rotated 45deg, centred 1px inside the edge so
   exactly 6px of the diamond pokes out — the offset Figma draws. */
.hc-tooltip__arrow {
  position: absolute;
  width: var(--spacing-2-5);
  height: var(--spacing-2-5);
  background-color: var(--base-primary);
}

.hc-tooltip--top .hc-tooltip__arrow {
  bottom: calc(var(--spacing-1) * -1);
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}

.hc-tooltip--bottom .hc-tooltip__arrow {
  top: calc(var(--spacing-1) * -1);
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}

.hc-tooltip--left .hc-tooltip__arrow {
  right: calc(var(--spacing-1) * -1);
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.hc-tooltip--right .hc-tooltip__arrow {
  left: calc(var(--spacing-1) * -1);
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}