/*
 * HAYA admin shell.
 *
 * Every color, radius and font here comes from a custom property emitted by
 * AdminThemeCss, never a literal. That is the whole reason a product can
 * restyle the dashboard without forking it, so a hard-coded value in this file
 * is a defect, not a shortcut.
 *
 * Layout uses logical properties (inline-start/end) throughout, so the same
 * rules lay out correctly in both RTL and LTR with no direction-specific
 * overrides.
 */

/* The face the default theme names. Declared here and shipped beside this file
   (fonts/vazirmatn, with its SIL OFL licence), so a product renders in
   Vazirmatn with nothing installed on the viewer's machine.

   Declaring a face is not choosing one: body still reads --haya-font-family,
   and a product that sets another family on Appearance never downloads this
   file. A face the shell does not ship is declared in the host's own
   stylesheet, linked after this one, and named there.

   Variable, one file for 100-900, because the rules below ask for weights
   between the named ones (550) that a static set can only round. swap, so
   text paints in the fallback while the face loads rather than a screen
   sitting blank on a slow link. */
@font-face {
  font-family: "Vazirmatn";
  src: url("fonts/vazirmatn/Vazirmatn-Variable.woff2") format("woff2-variations"),
       url("fonts/vazirmatn/Vazirmatn-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: var(--haya-font-size, 14px);
}

body {
  margin: 0;
  font-family: var(--haya-font-family);
  background: var(--haya-canvas);
  color: var(--haya-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--haya-border) transparent;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background-color: var(--haya-border);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: var(--haya-text-muted);
}

:where(a) {
  color: var(--haya-brand);
  text-decoration: none;
}

:where(a:hover) {
  text-decoration: underline;
}

:where(button, input, select, textarea) {
  font: inherit;
  color: inherit;
}

:where(:focus-visible) {
  outline: 2px solid var(--haya-brand);
  outline-offset: 2px;
  border-radius: var(--haya-radius);
}

/* ---------------------------------------------------------------- layout - */

/* One height for the two headers - the brand at the top of the sidebar and the
   bar over the content - so their bottom rules meet in one line. On the root
   rather than on the shell, because what is fixed to the viewport from outside
   the shell's element - the toast host - lines up against the same header
   (L149-3). */
:root {
  --haya-shell-header-height: calc(64rem / 14);
}

.haya-shell {
  display: grid;
  grid-template-columns: 16rem 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "sidebar topbar"
    "sidebar main";
  min-block-size: 100vh;
}

/* The sidebar itself does not scroll: the brand stays put and the menu below
   it is the scroll box, so a long menu never carries the brand away. */
.haya-shell__sidebar {
  grid-area: sidebar;
  background: var(--haya-surface);
  border-inline-end: 1px solid var(--haya-border);
  display: flex;
  flex-direction: column;
  position: sticky;
  inset-block-start: 0;
  block-size: 100vh;
  overflow: hidden;
}

.haya-shell__topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  /* A grid column is at least as wide as its content, so without this a long
     trail widens the column - and with it the whole page - instead of giving
     way: the header's controls then ride off the edge of the viewport and the
     page grows a horizontal scrollbar (L141). */
  min-inline-size: 0;
  box-sizing: border-box;
  block-size: var(--haya-shell-header-height);
  padding-block: 0;
  padding-inline: 1.25rem;
  background: color-mix(in srgb, var(--haya-surface) 82%, transparent);
  backdrop-filter: blur(12px);
  border-block-end: 1px solid var(--haya-border);
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
}

/* One family of header controls (L123): the language and theme selects and the
   account menu share this box - height, padding, radius, border, icon size, type
   and states - so none of them sizes itself. The selects keep the list they
   open; only their trigger is shaped here. */
.haya-shell__topbar {
  --haya-topbar-control-height: calc(36rem / 14);
}

/* Only the trail gives up width (L141). Every control in the bar keeps its own
   size, so a long trail can never squeeze the search box, the language, the
   theme or the account - a squeezed icon control is the one thing in this bar
   that reads as broken rather than tight. The spacer is exempt because it has
   nothing to keep: it is the room between the two ends. */
.haya-shell__topbar > :not(.haya-trail, .haya-spacer) {
  flex: none;
}

.haya-shell__topbar .haya-select-box__trigger,
.haya-topbar-control {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: calc(8rem / 14);
  inline-size: auto;
  block-size: var(--haya-topbar-control-height);
  margin: 0;
  padding-block: 0;
  padding-inline: calc(10rem / 14);
  border: 1px solid var(--haya-border);
  border-radius: calc(8rem / 14);
  background: var(--haya-surface);
  color: var(--haya-text);
  font: inherit;
  font-size: calc(13rem / 14);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.haya-shell__topbar .haya-select-box__trigger:hover:not(:disabled),
.haya-topbar-control:hover {
  border-color: color-mix(in srgb, var(--haya-border) 55%, var(--haya-text-muted));
  background: var(--haya-surface-muted);
}

.haya-shell__topbar .haya-select-box__trigger:focus-visible,
.haya-topbar-control:focus-visible {
  outline: none;
  border-color: var(--haya-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--haya-brand) 18%, transparent);
}

/* Open: the list or the menu the control opened is showing. */
.haya-shell__topbar .haya-select-box:has(.haya-select-box__panel:popover-open) .haya-select-box__trigger,
.haya-topbar-menu__trigger:has(+ .haya-topbar-menu:popover-open) {
  border-color: var(--haya-brand);
  background: var(--haya-surface-muted);
}

.haya-shell__topbar .haya-select-box__icon,
.haya-shell__topbar .haya-select-box__chevron,
.haya-topbar-control svg {
  --haya-icon-size: calc(18rem / 14);
  inline-size: calc(18rem / 14);
  block-size: calc(18rem / 14);
  flex: none;
}

.haya-topbar-control__icon,
.haya-topbar-control__chevron {
  color: var(--haya-text-muted);
}

.haya-topbar-control__chevron {
  transition: rotate 160ms ease;
}

.haya-topbar-menu__trigger:has(+ .haya-topbar-menu:popover-open) .haya-topbar-control__chevron {
  rotate: 180deg;
  color: var(--haya-brand);
}

.haya-topbar-control__label {
  max-inline-size: calc(160rem / 14);
  overflow: hidden;
  text-overflow: ellipsis;
}

.haya-topbar-control--icon {
  justify-content: center;
  inline-size: var(--haya-topbar-control-height);
  padding-inline: 0;
}

/* The header's lists open the way its account menu does: under the control, the
   list's start edge on the control's, growing along the reading direction
   (L140). A list in a form or a table keeps the other alignment, where it grows
   back into the page it was opened from. */
.haya-shell__topbar .haya-select-box__panel {
  position-area: block-end span-inline-start;
  position-try-fallbacks:
    block-start span-inline-start,
    block-end span-inline-end,
    block-start span-inline-end;
}

/* A select whose trigger is its icon alone (HayaSelect IconOnly): square, the
   icon centred; the list it opens is unchanged. In the top bar it is the same
   square as the icon controls. */
.haya-select-box--icon-only .haya-select-box__trigger {
  justify-content: center;
  inline-size: var(--haya-topbar-control-height, calc(36rem / 14));
  padding-inline: 0;
}

.haya-select-box--icon-only .haya-select-box__trigger .haya-select-box__icon {
  margin: 0;
  color: var(--haya-text);
}

.haya-topbar-control--static,
.haya-topbar-control--static:hover {
  border-color: var(--haya-border);
  background: var(--haya-surface);
  cursor: default;
}

.haya-topbar-menu__trigger {
  anchor-name: var(--haya-row-actions-anchor);
}

.haya-topbar-menu {
  min-inline-size: calc(220rem / 14);
}

/* Who is signed in, at the head of the menu: the portrait's placeholder and the
   name, which the bar's icon-only trigger leaves out (L123). */
.haya-topbar-menu__head {
  display: flex;
  align-items: center;
  gap: calc(10rem / 14);
  margin-block-end: calc(4rem / 14);
  padding: calc(6rem / 14) calc(10rem / 14) calc(10rem / 14);
  border-block-end: 1px solid var(--haya-border);
}

.haya-topbar-menu__identity {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
}

.haya-topbar-menu__name {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.haya-topbar-menu__caption {
  color: var(--haya-text-muted);
  font-size: calc(11rem / 14);
}

.haya-topbar-menu form {
  display: contents;
}

.haya-shell__main {
  grid-area: main;
  padding: 1.5rem;
  min-inline-size: 0;
}

.haya-shell__content {
  max-inline-size: 78rem;
  margin-inline: auto;
}

/* ------------------------------------------------------------- branding - */

.haya-brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex: none;
  box-sizing: border-box;
  block-size: var(--haya-shell-header-height);
  padding-block: 0;
  padding-inline: 1.25rem;
  border-block-end: 1px solid var(--haya-border);
}

.haya-brand__logo {
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: var(--haya-radius);
  object-fit: contain;
  flex: none;
}

.haya-brand__mark {
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: var(--haya-radius);
  background: var(--haya-brand);
  color: var(--haya-brand-contrast);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.875rem;
  flex: none;
}

.haya-brand__name {
  font-weight: 650;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ----------------------------------------------------------------- nav - */

.haya-nav {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  flex: 1;
  min-block-size: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}

.haya-nav__section-title {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--haya-text-muted);
  padding-inline: 0.625rem;
  margin-block-end: 0.375rem;
}

/* Each module's section is a HayaAccordionItem (L114). */
.haya-nav__plain,
.haya-nav .haya-accordion__content {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.haya-nav .haya-accordion__content {
  padding-block: 0.125rem 0.375rem;
}

.haya-nav__section > .haya-accordion__header .haya-accordion__trigger {
  color: var(--haya-text-muted);
  font-size: 0.875rem;
  font-weight: 600;
}

.haya-nav__section > .haya-accordion__header .haya-accordion__trigger:hover,
.haya-nav__section--active > .haya-accordion__header .haya-accordion__trigger {
  color: var(--haya-text);
}

/* ------------------------------------------------------------ accordion - */

/* HayaAccordion. A panel opens by animating its grid row from 0fr to 1fr, so
   it reaches its content's own height without measuring and nothing below it
   jumps; opacity fades with it. visibility follows only once a close has
   finished, which takes a closed panel out of the Tab order and the
   accessibility tree without cutting its animation short. */
.haya-accordion {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.haya-accordion__trigger {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  inline-size: 100%;
  padding: 0.5rem 0.625rem;
  border: 0;
  border-radius: var(--haya-radius);
  background: none;
  color: var(--haya-text);
  font: inherit;
  font-weight: 600;
  text-align: start;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}

.haya-accordion__trigger:hover {
  background: var(--haya-surface-muted);
}

.haya-accordion__trigger:focus-visible {
  outline: 2px solid var(--haya-brand);
  outline-offset: -2px;
}

.haya-accordion__title {
  flex: 1;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.haya-accordion__chevron {
  color: var(--haya-text-muted);
  transition: rotate var(--haya-accordion-duration, 200ms) var(--haya-accordion-easing, cubic-bezier(0.2, 0, 0, 1));
}

.haya-accordion__item--open > .haya-accordion__header .haya-accordion__chevron {
  rotate: 180deg;
}

.haya-accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition:
    grid-template-rows var(--haya-accordion-duration, 200ms) var(--haya-accordion-easing, cubic-bezier(0.2, 0, 0, 1)),
    opacity var(--haya-accordion-duration, 200ms) ease,
    visibility 0s linear var(--haya-accordion-duration, 200ms);
}

.haya-accordion__item--open > .haya-accordion__panel {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* Clipped with a margin so the focus ring of a link inside is not cut off. */
.haya-accordion__content {
  min-block-size: 0;
  overflow: hidden;
  overflow: clip;
  overflow-clip-margin: 0.25rem;
}

.haya-accordion--static .haya-accordion__panel,
.haya-accordion--static .haya-accordion__chevron {
  transition: none;
}

/* ------------------------------------------------------- number fields - */

/* A number is typed, not nudged: the browser's increment and decrement arrows
   are removed from every number field in the dashboard, whichever component
   draws it. The field still takes only numbers, and the arrow keys still step
   it; no other input type is touched. */
input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

.haya-nav__item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  border-radius: var(--haya-radius);
  color: var(--haya-text-muted);
  font-size: 0.875rem;
  font-weight: 500;
  transition: background-color 120ms ease, color 120ms ease;
}

.haya-nav__item:hover {
  background: var(--haya-surface-muted);
  color: var(--haya-text);
  text-decoration: none;
}

.haya-nav__item--active {
  background: color-mix(in srgb, var(--haya-brand) 12%, transparent);
  color: var(--haya-brand);
  font-weight: 600;
}

.haya-nav__icon {
  --haya-icon-size: 1.125rem;
  inline-size: 1.125rem;
  block-size: 1.125rem;
  flex: none;
}

/* -------------------------------------------------------------- header - */

.haya-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-block-end: 1.25rem;
  flex-wrap: wrap;
}

.haya-page-header__title {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.haya-page-header__description {
  margin: 0.375rem 0 0;
  color: var(--haya-text-muted);
  font-size: 0.875rem;
  max-inline-size: 52ch;
  line-height: 1.6;
}

.haya-page-header__actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.haya-page-header__heading {
  min-inline-size: 0;
}

/* The way back and the way here, in the shell's top bar (L124): the arrow and
   "Back" lead to the nearest crumb that is a place; a rule sets them off from
   the crumbs. The arrow and the separators point the way the trail reads - right
   and left in RTL - and turn over in LTR. It takes the room the header's
   controls leave and, when that is not enough, slides within it (L141): the
   crumbs are reached by scrolling rather than cut off or hidden, and nothing
   else in the bar moves. "Back" sits at the start, which is where the strip
   rests, so it is what is in view before anything is scrolled. No visible
   scrollbar across a strip this shallow - it would eat the bar's height. */
.haya-trail {
  display: flex;
  align-items: center;
  gap: calc(10rem / 14);
  min-inline-size: 0;
  overflow-x: auto;
  scrollbar-width: none;
  /* Room for a focus ring inside the scroll box: a scroll container clips what
     is drawn outside it, and an outline the operator cannot see is the same as
     no outline at all. */
  padding-block: calc(4rem / 14);
  font-size: calc(13rem / 14);
}

.haya-trail::-webkit-scrollbar {
  display: none;
}

.haya-trail__back {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: calc(6rem / 14);
  padding-block: calc(4rem / 14);
  padding-inline: calc(6rem / 14) calc(8rem / 14);
  border-radius: calc(8rem / 14);
  color: var(--haya-text);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 120ms ease, color 120ms ease;
}

.haya-trail__back:hover {
  background: var(--haya-surface-muted);
  color: var(--haya-brand);
}

.haya-trail__back:focus-visible,
.haya-breadcrumb__link:focus-visible {
  outline: 2px solid var(--haya-brand);
  outline-offset: 2px;
}

.haya-trail__back-icon {
  --haya-icon-size: calc(18rem / 14);
  inline-size: calc(18rem / 14);
  block-size: calc(18rem / 14);
  flex: none;
}

.haya-trail__back-icon:dir(ltr),
.haya-breadcrumb__sep:dir(ltr) {
  scale: -1 1;
}

.haya-trail__rule {
  inline-size: 1px;
  block-size: calc(16rem / 14);
  flex: none;
  background: var(--haya-border);
}

.haya-breadcrumb {
  display: flex;
  align-items: center;
  gap: calc(4rem / 14);
  /* Never compressed and never dropped (L141): the trail around it scrolls
     instead, so the crumbs stay one line and stay reachable at every width.
     They used to be hidden below the drawer breakpoint, which left a narrow
     screen - the one that needs to say where it is most - saying nothing. */
  flex: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

.haya-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: calc(4rem / 14);
  flex: none;
}

.haya-breadcrumb__link,
.haya-breadcrumb__text {
  color: var(--haya-text-muted);
  /* A crumb is a name, not a paragraph: it keeps its line and the trail
     scrolls (L141). */
  white-space: nowrap;
}

.haya-breadcrumb__link {
  border-radius: calc(4rem / 14);
  text-decoration: none;
}

.haya-breadcrumb__link:hover {
  color: var(--haya-brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.haya-breadcrumb__current {
  max-inline-size: calc(320rem / 14);
  overflow: hidden;
  color: var(--haya-text);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.haya-breadcrumb__sep {
  --haya-icon-size: calc(14rem / 14);
  inline-size: calc(14rem / 14);
  block-size: calc(14rem / 14);
  flex: none;
  color: var(--haya-text-muted);
}

/* A record's status and actions as one bar (Figma, Site Builder, 1381:5255;
   L124): a rounded surface with the status and its dot at the start and the
   buttons at the end - neutral ones tinted rather than outlined, the destructive
   icon button tinted in its own colour.

   It floats at the foot of the page rather than sitting in a corner of the
   header: on a form the operator is at the field they are filling, not at the
   title they scrolled past. Centred on the viewport rather than on the column
   beside the menu: it acts on the page as a whole, so it sits where the eye
   returns to - the middle of the screen - and not wherever the content happens
   to be. Below the top bar's z-index, so the header still passes over it. The
   page reserves room at its end (see .haya-shell__main below), so the bar never
   comes to rest over a field. */
.haya-page-actions {
  position: fixed;
  z-index: 15;
  inset-block-end: calc(20rem / 14);
  inset-inline: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(12rem / 14);
  inline-size: fit-content;
  /* Wide enough to read as the page's own bar rather than a cluster of buttons
     that happens to float: the status sits at one end and the actions at the
     other, with the room between them being what tells the two apart. It still
     grows past this for a long status, and the percentage term keeps it inside
     a narrow screen. */
  min-inline-size: min(calc(360rem / 14), calc(100% - 3rem));
  max-inline-size: calc(100% - 3rem);
  margin-inline: auto;
  padding-block: calc(16rem / 14);
  padding-inline: calc(28rem / 14);
  border: 1px solid var(--haya-border);
  border-radius: 999px;
  /* Glass: the page keeps moving under a bar that floats over it, and a solid
     one reads as a hole cut in the page. Barely any fill of its own — the blur
     is what separates the bar from what scrolls beneath, and the border and
     shadow are what draw its edge. The little colour there is still comes from
     the surface token, so the Appearance screen keeps the palette. */
  background: color-mix(in srgb, var(--haya-surface) 5%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 4px -2px rgb(0 0 0 / 0.08), 0 4px 12px -3px rgb(0 0 0 / 0.04);
}

/* The room the floating bar needs at the end of the page. Only on a page that
   has one: a listing keeps its actions in the header and needs no gap. */
.haya-shell__main:has(.haya-page-actions) {
  padding-block-end: calc(112rem / 14);
}

.haya-page-actions__status {
  display: inline-flex;
  align-items: center;
  gap: calc(6rem / 14);
  color: var(--haya-text-muted);
  font-size: calc(12rem / 14);
  line-height: calc(16rem / 14);
  white-space: nowrap;
}

.haya-page-actions__dot {
  inline-size: calc(8rem / 14);
  block-size: calc(8rem / 14);
  flex: none;
  border-radius: 999px;
  background: var(--haya-text-muted);
}

.haya-page-actions__dot--success {
  background: var(--haya-success);
}

.haya-page-actions__dot--danger {
  background: var(--haya-danger);
}

.haya-page-actions__dot--warning {
  background: var(--haya-warning);
}

.haya-page-actions__dot--info {
  background: var(--haya-info);
}

.haya-page-actions__buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(8rem / 14);
  margin-inline-start: auto;
}

.haya-page-actions__buttons:empty {
  display: none;
}

.haya-page-actions .haya-btn {
  min-inline-size: calc(80rem / 14);
  padding-block: calc(8rem / 14);
  padding-inline: calc(16rem / 14);
  border-color: transparent;
  border-radius: calc(8rem / 14);
  font-size: calc(12rem / 14);
  font-weight: 700;
  line-height: calc(16rem / 14);
}

.haya-page-actions .haya-btn:not(.haya-btn--primary):not(.haya-btn--danger) {
  background: color-mix(in srgb, var(--haya-text-muted) 14%, transparent);
  color: var(--haya-text);
}

.haya-page-actions .haya-btn:not(.haya-btn--primary):not(.haya-btn--danger):hover:not(:disabled) {
  background: color-mix(in srgb, var(--haya-text-muted) 22%, transparent);
}

.haya-page-actions .haya-btn--danger {
  background: color-mix(in srgb, var(--haya-danger) 12%, transparent);
}

.haya-page-actions .haya-btn--danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--haya-danger) 20%, transparent);
}

.haya-page-actions .haya-btn--icon {
  min-inline-size: 0;
  inline-size: calc(34rem / 14);
  block-size: calc(34rem / 14);
  padding: 0;
}

.haya-page-actions .haya-btn--icon svg {
  inline-size: calc(18rem / 14);
  block-size: calc(18rem / 14);
}

/* ---------------------------------------------------------------- card - */

.haya-card {
  background: var(--haya-surface);
  border: 1px solid var(--haya-border);
  border-radius: var(--haya-radius-lg);
  overflow: hidden;
}

.haya-card + .haya-card {
  margin-block-start: 1rem;
}

.haya-card__header {
  padding: 1rem 1.25rem;
  border-block-end: 1px solid var(--haya-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

/* The card header is space-between, so without this the help icon would drift
   into the middle of the gap instead of sitting against the title it explains.
   Pushing the remaining space after it keeps the header actions on the far
   edge, which is where they were before the icon existed. */
.haya-card__help {
  margin-inline-end: auto;
}

.haya-card__title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
}

.haya-card__body {
  padding: 1.25rem;
}

.haya-card__body--flush {
  padding: 0;
}

/* Stacked below the breakpoint, so the aside reads as a footer to the record
   rather than a column squeezed to nothing. */
.haya-split__main,
.haya-split__aside {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-inline-size: 0;
}

/* The columns already space their children with `gap`. The global adjacency
   margin is written for cards stacked in ordinary flow, and inside a flex
   column it lands on top of the gap - every card in the sidebar sat two rem
   from the next instead of one. Cancelled here rather than dropping either
   rule: the gap is what spaces a tab block against a card, which the adjacency
   rule cannot see, and the adjacency rule is what every other screen relies on. */
.haya-split__main > .haya-card + .haya-card,
.haya-split__aside > .haya-card + .haya-card {
  margin-block-start: 0;
}

/* ------------------------------------------------------------- choices - */

/* A short, fixed set of mutually exclusive options, each worth a line of its
   own -- a product's type, a delivery method. A <select> hides the alternatives
   until it is opened, which is wrong when the choice changes what the rest of
   the form even contains. */
.haya-choices {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.haya-choice {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--haya-border);
  border-radius: var(--haya-radius);
  cursor: pointer;
}

.haya-choice:hover {
  background: var(--haya-surface-muted);
}

/* The ring goes on the label because the radio itself is visually small and
   sits at the edge; focus has to be visible on the whole target that a click
   would hit. */
.haya-choice:has(input:focus-visible) {
  outline: 2px solid var(--haya-brand);
  outline-offset: 1px;
}

.haya-choice:has(input:checked) {
  border-color: var(--haya-brand);
  background: color-mix(in srgb, var(--haya-brand) 8%, transparent);
}

.haya-choice:has(input:disabled) {
  cursor: default;
  opacity: 0.6;
}

.haya-choice__icon {
  --haya-icon-size: 1.125rem;
  inline-size: 1.125rem;
  block-size: 1.125rem;
  flex: none;
  color: var(--haya-text-muted);
}

.haya-choice:has(input:checked) .haya-choice__icon {
  color: var(--haya-brand);
}

.haya-choice__label {
  font-weight: 550;
}

.haya-choice__note {
  display: block;
  font-weight: 400;
  font-size: 0.8125rem;
  color: var(--haya-text-muted);
}

/* ---------------------------------------------------------------- tabs - */

.haya-tabs {
  background: var(--haya-surface);
  border: 1px solid var(--haya-border);
  border-radius: var(--haya-radius-lg);
  overflow: hidden;
}

.haya-tabs__tab:focus-visible {
  outline: 2px solid var(--haya-brand);
  outline-offset: -2px;
}

.haya-tabs__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 1.25rem;
  padding: 0 0.375rem;
  border-radius: 999px;
  background: var(--haya-surface-muted);
  color: var(--haya-text-muted);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.haya-tabs__tab--active .haya-tabs__badge {
  background: color-mix(in srgb, var(--haya-brand) 12%, transparent);
  color: var(--haya-brand);
}

/* The panel is focusable so the keyboard lands somewhere sensible after the
   arrow keys change tabs, but it is not itself a control -- so it gets no ring
   unless the focus actually came from the keyboard. */
.haya-tabs__panel:focus-visible {
  outline: 2px solid var(--haya-brand);
  outline-offset: -2px;
}

/* A card inside a panel is already inside a bordered box; a second border and a
   second radius around it reads as a mistake. That holds as well for a card
   another module contributed into the panel through an AdminSectionOutlet, one
   wrapper deeper - the product payment tab's gateways (L122). */
.haya-tabs__panel > .haya-card,
.haya-tabs__panel > .haya-section-outlet__item > .haya-card {
  border: 0;
  border-radius: 0;
}

.haya-tabs__panel > .haya-card > .haya-card__body,
.haya-tabs__panel > .haya-section-outlet__item > .haya-card > .haya-card__body {
  padding-inline: 0;
}

.haya-tabs__panel > .haya-card:first-child > .haya-card__header,
.haya-tabs__panel > .haya-section-outlet__item:first-child > .haya-card > .haya-card__header {
  padding-inline: 0;
}

.haya-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

/* ------------------------------------------------------------- widgets - */

/* One grid for the whole dashboard rather than a row per size, so a widget's
   width is its own declaration and the page still reflows on a narrow screen.
   The named lines are not used: auto-fit already packs the small cards, and a
   span is what lets a wider one break out of that packing. */
.haya-dashboard {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  align-items: start;
}

.haya-dashboard__widget--medium {
  grid-column: span 2;
}

.haya-dashboard__widget--large {
  grid-column: 1 / -1;
}

/* A two-column span is wider than a one-column grid, and the browser would
   silently overflow rather than wrap. Below the second column every widget is
   full width, which is what a phone wants anyway. */
@media (max-width: 40rem) {
  .haya-dashboard__widget--medium {
    grid-column: 1 / -1;
  }
}

/* --------------------------------------------------------------- stats - */

.haya-stat {
  padding: 1.125rem 1.25rem;
}

.haya-stat__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--haya-text-muted);
}

.haya-stat__value {
  font-size: 1.75rem;
  font-weight: 680;
  letter-spacing: -0.03em;
  margin-block-start: 0.375rem;
  font-variant-numeric: tabular-nums;
}

.haya-stat__hint {
  font-size: 0.8125rem;
  color: var(--haya-text-muted);
  margin-block-start: 0.25rem;
}

/* --------------------------------------------------------------- meter - */

/* A thin proportional bar in ok / warn / bad tones. A track that is always
   visible, so "empty" reads as a zero rather than as a missing cell.
   Two callers so far: relative backlog on the Queues screen, and how much of
   an SEO field's character budget is used. One bar rather than two that
   drift — .haya-queuebar is the same rules under its older name. */
.haya-meter,
.haya-queuebar {
  height: 0.375rem;
  max-width: 100%;
  border-radius: 999px;
  background: var(--haya-border);
  margin-block-start: 0.375rem;
  overflow: hidden;
}

/* The queue bar sits in a table cell and wants a fixed width; the field meter
   spans whatever the field is wide. */
.haya-queuebar {
  width: 9rem;
}

.haya-meter__fill,
.haya-queuebar__fill {
  height: 100%;
  border-radius: inherit;
}

.haya-meter__fill--ok,
.haya-queuebar__fill--ok {
  background: var(--haya-success);
}

.haya-meter__fill--warn,
.haya-queuebar__fill--warn {
  background: var(--haya-warning);
}

.haya-meter__fill--bad,
.haya-queuebar__fill--bad {
  background: var(--haya-danger);
}

/* The reading under the bar: a count at one end, a verdict at the other. */
.haya-meter__legend {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-block-start: 0.5rem;
  font-size: 0.75rem;
  color: var(--haya-text-muted);
}

.haya-meter__count {
  font-variant-numeric: tabular-nums;
}

.haya-meter__verdict--ok {
  color: var(--haya-success);
}

.haya-meter__verdict--warn {
  color: var(--haya-warning);
}

.haya-meter__verdict--bad {
  color: var(--haya-danger);
}

/* --------------------------------------------------------------- table - */

/* Every table in the shell, drawn as the CMS listings are (Figma CMS
   3224:22213, 3246:12838, 3223:20410): HayaTable, HayaDataTable, and a screen's
   own table.haya-table alike. Nothing opts in; the look is the default.

   Every measurement reads a --haya-table-* custom property, with the design's
   value as the fallback. That is the customisation surface, at three reaches:
   a product sets them through Appearance's custom properties (written onto
   :root after everything else), a screen sets them in a style or class on a
   wrapper, and one table takes Density or Class. None of it needs this file to
   change, and none of the defaults below are written onto :root, so an
   override is never fighting a declaration of equal weight.

   Pixels are calc(<px>rem / 14) against the 14px base, so a product that raises
   the base size scales its tables with it. Colours are theme tokens only. */

.haya-table-scroll {
  overflow-x: auto;
}

/* A flush card's table sits inset from the card's edge, as the designs draw it.
   A padded card already provides the inset, and doubling it would push the
   rows away from everything else in that card. */
.haya-table-toolbar + .haya-table-scroll,
.haya-card__body--flush > .haya-table-toolbar + .haya-table-scroll {
  padding-block-start: 0;
}

.haya-card__body--flush > .haya-table-scroll {
  padding: var(--haya-table-frame-padding, calc(12rem / 14) calc(24rem / 14));
}

/* Given a max height the header stays put while the body scrolls, so a long
   page of rows keeps its column labels. Opt-in per listing: a five-row table
   inside its own scroller looks broken, and only the screen knows how many
   rows it expects. */
.haya-table-scroll--capped {
  overflow-y: auto;
  max-block-size: var(--haya-table-max-height, 34rem);
}

/* The header ground can be translucent against a scrolling body, so the sticky
   row lays it over an opaque surface rather than letting rows read through. */
.haya-table-scroll--capped .haya-table th {
  background-color: var(--haya-surface);
  background-image: linear-gradient(
    var(--haya-table-header-background, var(--haya-surface-muted)),
    var(--haya-table-header-background, var(--haya-surface-muted)));
  z-index: 1;
}

/* A column whose header sorts the listing. A button inside the th rather than a
   click handler on the th itself: only the button is focusable and announced,
   and a th with a handler is invisible to the keyboard. */
.haya-table__sort {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  cursor: pointer;
}

.haya-table__sort:hover {
  color: var(--haya-text);
}

.haya-table__sort-mark {
  display: inline-flex;
  opacity: 0.85;
}

.haya-table__sort-icon {
  inline-size: 1rem;
  block-size: 1rem;
}

/* Holds the column width steady between the two arrow glyphs and none, so
   toggling a sort does not shift every column beside it. */
.haya-table__sort-mark--idle {
  opacity: 0;
}

.haya-table__sort--active {
  color: var(--haya-text);
}

.haya-table {
  inline-size: 100%;
  /* Separate, not collapsed: only separate borders let the header row's end
     cells take the capsule's corners. */
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--haya-table-font-size, calc(13rem / 14));
  font-weight: var(--haya-table-font-weight, 500);
  color: var(--haya-text);
}

/* The header row is one capsule: rounded ends, muted ground, no rule under it. */
.haya-table th {
  position: sticky;
  inset-block-start: 0;
  padding-block: var(--haya-table-header-padding-block, calc(12rem / 14));
  padding-inline: var(--haya-table-cell-padding-inline, calc(6rem / 14));
  background: var(--haya-table-header-background, var(--haya-surface-muted));
  color: var(--haya-table-header-color, var(--haya-text-muted));
  font-size: var(--haya-table-header-font-size, calc(13rem / 14));
  font-weight: var(--haya-table-header-font-weight, 700);
  text-align: start;
  white-space: nowrap;
  vertical-align: middle;
}

.haya-table th:first-child {
  padding-inline-start: var(--haya-table-edge-padding, calc(12rem / 14));
  border-start-start-radius: var(--haya-table-header-radius, calc(12rem / 14));
  border-end-start-radius: var(--haya-table-header-radius, calc(12rem / 14));
}

.haya-table th:last-child {
  padding-inline-end: var(--haya-table-edge-padding, calc(12rem / 14));
  border-start-end-radius: var(--haya-table-header-radius, calc(12rem / 14));
  border-end-end-radius: var(--haya-table-header-radius, calc(12rem / 14));
}

/* The rule under a row is an inset shadow rather than a border: Figma draws the
   stroke inside the row, so a border that added its pixel to the height would
   make every row one taller than the design. A row with no tall content keeps
   the same height as one with actions, so a listing's rhythm does not depend
   on which columns it has. */
.haya-table td {
  block-size: var(--haya-table-row-height, calc(66rem / 14));
  padding-block: var(--haya-table-cell-padding-block, calc(16rem / 14));
  padding-inline: var(--haya-table-cell-padding-inline, calc(6rem / 14));
  box-shadow: inset 0 -1px 0 var(--haya-table-rule-color, var(--haya-border));
  vertical-align: middle;
}

.haya-table td:first-child {
  padding-inline-start: var(--haya-table-edge-padding, calc(12rem / 14));
}

.haya-table td:last-child {
  padding-inline-end: var(--haya-table-edge-padding, calc(12rem / 14));
}

/* One table's density, when a screen asks for one. Without the modifier the
   table follows the theme, which writes the compact values onto :root. */
.haya-table--comfortable {
  --haya-table-cell-padding-block: calc(16rem / 14);
  --haya-table-row-height: calc(66rem / 14);
}

.haya-table--compact {
  --haya-table-cell-padding-block: calc(12rem / 14);
  --haya-table-row-height: calc(58rem / 14);
}

.haya-table tbody tr:last-child td {
  box-shadow: none;
}

.haya-table tbody tr:hover td {
  background: var(
    --haya-table-row-hover-background,
    color-mix(in srgb, var(--haya-surface-muted) 55%, transparent));
}

.haya-table__mono {
  font-family: var(--haya-font-family-mono);
  font-size: calc(13rem / 14);
  color: var(--haya-text-muted);
}

.haya-table th.haya-table__actions,
.haya-table td.haya-table__actions {
  text-align: end;
  white-space: nowrap;
}

/* A column of one small control per row, such as an on/off switch, reads
   down its middle. */
.haya-table th.haya-table__center,
.haya-table td.haya-table__center {
  text-align: center;
}

/* A row's actions pack to the cell's end — the table's outer edge. The flex
   container ignores text-align, so it is told directly instead of sitting
   beside the column before it. */
.haya-table__actions .haya-row-actions {
  justify-content: flex-end;
}

/* A screen's row actions, whatever it wrote: the designs' tinted 34px buttons,
   12 apart. A text button keeps its label and only changes its chrome, so no
   screen has to be rewritten to look like the listings. Three classes deep so
   it outranks the button's own size modifiers, which come later in the file. */
.haya-table .haya-table__actions .haya-btn {
  min-block-size: calc(34rem / 14);
  padding-block: 0;
  padding-inline: calc(12rem / 14);
  border-color: transparent;
  border-radius: var(--haya-table-action-radius, calc(12rem / 14));
  font-size: calc(13rem / 14);
}

.haya-table .haya-table__actions .haya-btn + .haya-btn {
  margin-inline-start: calc(12rem / 14);
}

.haya-table .haya-table__actions .haya-btn--ghost,
.haya-table .haya-table__actions .haya-btn--icon:not(.haya-btn--danger):not(.haya-btn--primary) {
  background: var(
    --haya-table-action-background,
    color-mix(in srgb, var(--haya-brand) 12%, transparent));
  color: var(--haya-table-action-color, var(--haya-brand));
}

.haya-table .haya-table__actions .haya-btn--ghost:hover:not(:disabled),
.haya-table .haya-table__actions .haya-btn--icon:not(.haya-btn--danger):not(.haya-btn--primary):hover:not(:disabled) {
  background: color-mix(in srgb, var(--haya-brand) 20%, transparent);
}

.haya-table .haya-table__actions .haya-btn--danger {
  background: color-mix(in srgb, var(--haya-danger) 12%, transparent);
}

.haya-table .haya-table__actions .haya-btn--danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--haya-danger) 20%, transparent);
}

.haya-table .haya-table__actions .haya-btn--icon {
  inline-size: calc(34rem / 14);
  block-size: calc(34rem / 14);
  padding-inline: 0;
}

/* ------------------------------------------------------------- toolbar - */

.haya-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  margin-block-end: 1rem;
}

/* Fields carry a bottom margin for stacked forms; in a toolbar the flex gap
   already spaces them, and keeping both leaves the row sitting crooked. */
.haya-toolbar .haya-field {
  margin-block-end: 0;
}

.haya-toolbar__field {
  flex: 1 1 11rem;
  min-inline-size: 8rem;
}

/* The search box, which deserves the room a status filter does not. */
.haya-toolbar__field--wide {
  flex: 2 1 18rem;
}

.haya-toolbar__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ----------------------------------------------------------- thumbnail - */

.haya-thumb {
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: var(--haya-radius);
  border: 1px solid var(--haya-border);
  object-fit: cover;
  background: var(--haya-surface-muted);
  flex: none;
}

.haya-thumb--empty {
  display: inline-grid;
  place-items: center;
  color: var(--haya-text-muted);
}

/* --------------------------------------------------------------- pager - */

.haya-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding-block-start: 0.875rem;
}

.haya-pager__info,
.haya-pager__position {
  font-size: 0.8125rem;
  color: var(--haya-text-muted);
}

.haya-pager__position {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* -------------------------------------------------------------- button - */

.haya-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4375rem;
  padding: 0.5rem 0.875rem;
  border-radius: var(--haya-radius);
  border: 1px solid transparent;
  background: var(--haya-surface-muted);
  color: var(--haya-text);
  font-size: 0.875rem;
  font-weight: 550;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, opacity 120ms ease;
  white-space: nowrap;
}

.haya-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--haya-surface-muted) 70%, var(--haya-border));
}

.haya-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.haya-btn--primary {
  background: var(--haya-brand);
  color: var(--haya-brand-contrast);
}

.haya-btn--primary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--haya-brand) 88%, black);
}

.haya-btn--ghost {
  background: transparent;
  border-color: var(--haya-border);
}

.haya-btn--ghost:hover:not(:disabled) {
  background: var(--haya-surface-muted);
}

.haya-btn--danger {
  background: transparent;
  border-color: color-mix(in srgb, var(--haya-danger) 40%, transparent);
  color: var(--haya-danger);
}

.haya-btn--danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--haya-danger) 10%, transparent);
}

.haya-btn--icon {
  padding: 0.5rem;
  inline-size: 2.125rem;
  block-size: 2.125rem;
}

/* For dense contexts — a filter bar, a table's action column — where the
   full-size button is the same height as the row it sits in and reads as
   oversized. A separate size rather than screens overriding padding
   themselves, which is how two listings end up with different row heights. */
.haya-btn--compact {
  padding: 0.3125rem 0.625rem;
  font-size: 0.8125rem;
  gap: 0.375rem;
}

.haya-btn--compact.haya-btn--icon {
  padding: 0.3125rem;
  inline-size: 1.75rem;
  block-size: 1.75rem;
}

/* --------------------------------------------------------------- badge - */

.haya-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.1875rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--haya-surface-muted);
  color: var(--haya-text-muted);
  white-space: nowrap;
}

.haya-badge::before {
  content: "";
  inline-size: 0.375rem;
  block-size: 0.375rem;
  border-radius: 50%;
  background: currentColor;
}

.haya-badge--success {
  background: color-mix(in srgb, var(--haya-success) 14%, transparent);
  color: var(--haya-success);
}

.haya-badge--danger {
  background: color-mix(in srgb, var(--haya-danger) 14%, transparent);
  color: var(--haya-danger);
}

.haya-badge--warning {
  background: color-mix(in srgb, var(--haya-warning) 16%, transparent);
  color: var(--haya-warning);
}

.haya-badge--info {
  background: color-mix(in srgb, var(--haya-info) 14%, transparent);
  color: var(--haya-info);
}

.haya-badge--plain::before {
  display: none;
}

/* -------------------------------------------------------------- toggle - */

.haya-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

/*
 * Transparent, but not collapsed. A 0x0 input is dropped from the
 * accessibility tree and cannot be hit-tested, so the control ends up
 * operable only by sighted mouse users clicking the painted track. It has to
 * keep the track's footprint.
 */
.haya-toggle input {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  translate: 0 -50%;
  inline-size: calc(32rem / 14);
  block-size: calc(18rem / 14);
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

/* The CMS design's switch (Figma, CMS, component "switch"): a 28 by 14 track
   with a soft ring and an inset shade, and a 14px thumb that sits flush with the
   track's end and carries a vertical gradient and a lifted shadow. Off is muted,
   on is the brand; both are read from the theme, never from the design's hex. */
.haya-toggle__track {
  position: relative;
  flex: none;
  box-sizing: border-box;
  inline-size: calc(28rem / 14);
  block-size: calc(14rem / 14);
  margin: calc(2rem / 14);
  border-radius: 999px;
  background: var(--haya-surface-muted);
  box-shadow:
    0 0 0 1.2px color-mix(in srgb, var(--haya-text-muted) 30%, transparent),
    inset 0 1px 1px rgb(0 0 0 / 0.12),
    inset 0 4px 6px rgb(0 0 0 / 0.05);
  transition: background-color 160ms ease, box-shadow 160ms ease;
}

.haya-toggle__thumb {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: calc(14rem / 14);
  block-size: calc(14rem / 14);
  border-radius: 50%;
  background: linear-gradient(
    color-mix(in srgb, var(--haya-text-muted) 55%, var(--haya-surface)),
    var(--haya-text-muted));
  box-shadow: 0 2px 6px -2px rgb(0 0 0 / 0.5), 0 1px 4px rgb(0 0 0 / 0.25);
  transition: translate 160ms ease, background 160ms ease;
}

.haya-toggle input:checked + .haya-toggle__track {
  background: color-mix(in srgb, var(--haya-brand) 15%, var(--haya-surface));
  box-shadow:
    0 0 0 1.2px color-mix(in srgb, var(--haya-brand) 60%, transparent),
    inset 0 1px 1px rgb(0 0 0 / 0.12),
    inset 0 4px 6px rgb(0 0 0 / 0.05);
}

.haya-toggle input:checked + .haya-toggle__track .haya-toggle__thumb {
  translate: calc(14rem / 14) 0;
  background: linear-gradient(
    color-mix(in srgb, var(--haya-brand) 55%, var(--haya-surface)),
    var(--haya-brand));
}

[dir="rtl"] .haya-toggle input:checked + .haya-toggle__track .haya-toggle__thumb {
  translate: calc(-14rem / 14) 0;
}

.haya-toggle input:disabled + .haya-toggle__track {
  opacity: 0.5;
  cursor: not-allowed;
}

.haya-toggle input:focus-visible + .haya-toggle__track {
  outline: 2px solid var(--haya-brand);
  outline-offset: 2px;
}

/* --------------------------------------------------------------- field - */

.haya-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-block-end: 1rem;
}

/* Label and its help button on one line. The button is a sibling of the label,
   not a child: a <label for> forwards clicks to its control, which would eat
   the button's own activation. */
.haya-field__header {
  display: flex;
  align-items: center;
  gap: 0.125rem;
}

.haya-field__label {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  font-size: 0.8125rem;
  font-weight: 600;
}

/* Logical margin, so the star sits after the label text in Persian too. */
.haya-field__required {
  color: var(--haya-danger);
  margin-inline-start: 0.125rem;
}

.haya-field__help {
  /* Each button is its own anchor: an anchor-name has to be unique per element,
     so one shared name across a form leaves every bubble unable to resolve
     which button it belongs to, and the browser drops it to the page flow. The
     name comes from --haya-help-anchor, set inline per instance by HayaField
     and HayaCard. */
  anchor-name: var(--haya-help-anchor);
  /* A button, so it is focusable and the browser drives the popover -- but it
     must not look like one sitting inside a label. */
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin-inline-start: 0.25rem;
  display: inline-flex;
  color: var(--haya-text-muted);
  cursor: help;
  border-radius: 50%;
}

.haya-field__help:hover,
.haya-field__help:focus-visible {
  color: var(--haya-brand);
}

.haya-field__help:focus-visible {
  outline: 2px solid var(--haya-brand);
  outline-offset: 2px;
}

/* Big enough to find and to hit beside a 0.8125rem label (L167): at 15px the
   question mark inside the circle was too small to read as one. */
.haya-field__help-icon {
  inline-size: 1.125rem;
  block-size: 1.125rem;
}

.haya-field__help-bubble {
  /* In the top layer, so the dialog's `overflow-y: auto` cannot clip it. */
  position: fixed;
  position-anchor: var(--haya-help-anchor);
  /* Beside the icon, top-aligned with it rather than centred on it: a centred
     bubble hangs down over the field's own input, which is the box the operator
     opened the help to fill in. Falls to the other side, then below, as the
     viewport edge runs out. */
  position-area: inline-end span-block-end;
  position-try-fallbacks:
    inline-start span-block-end,
    block-end span-inline-end,
    block-start span-inline-end;
  margin: -0.375rem 0 0 0.375rem;
  inline-size: max-content;
  max-inline-size: min(22rem, 90vw);
  padding: 0.5rem 0.6875rem;
  border: 1px solid var(--haya-border);
  border-radius: var(--haya-radius);
  background: var(--haya-surface);
  color: var(--haya-text);
  box-shadow: 0 12px 24px -12px rgb(0 0 0 / 0.45);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.6;
  white-space: normal;
  text-align: start;
}

.haya-field__help-bubble:popover-open {
  display: block;
}

.haya-field__help-example {
  display: block;
  margin-block-start: 0.25rem;
  color: var(--haya-text-muted);
  font-family: var(--haya-font-mono, ui-monospace, monospace);
}

/* Browsers without anchor positioning (Firefox and Safari, at the time of
   writing) ignore the rules above and would centre the popover in the viewport.
   Pinning it under the label is wrong by a few pixels there but never lands the
   bubble somewhere unrelated to the field that opened it. */
@supports not (anchor-name: --a) {
  .haya-field__help-bubble {
    position: fixed;
    margin: 0;
    inset-block-start: auto;
    inset-inline: 1rem;
    inset-block-end: 1rem;
    max-inline-size: none;
  }
}

.haya-field__hint {
  font-size: 0.75rem;
  color: var(--haya-text-muted);
  line-height: 1.5;
}

.haya-field__error {
  font-size: 0.75rem;
  color: var(--haya-danger);
}

/* A field with an error says so on its own box as well as in the line under it
   (L159): the eye finds the field before it reads the words. */
.haya-field--invalid .haya-input,
.haya-field--invalid .haya-select-box__trigger,
.haya-field--invalid .haya-date-picker__trigger {
  border-color: var(--haya-danger);
}

.haya-field--invalid .haya-input:focus,
.haya-field--invalid .haya-input:focus-visible {
  outline-color: var(--haya-danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--haya-danger) 18%, transparent);
}

/* The one control box every text-like field draws - a typed input, a textarea
   and HayaSelect's trigger - at the CMS design's measurements (Figma, CMS,
   3224:22222): 10/12 padding, a 1.5 border, radius 8, 13 at 480 on an 18 line,
   on the surface. Declared once, so a select and the input beside it are the
   same height and read alike; a place that needs another size (the table
   toolbar's 38) changes the size and nothing else. */
.haya-input,
.haya-select,
.haya-textarea,
.haya-select-box__trigger {
  box-sizing: border-box;
  inline-size: 100%;
  margin: 0;
  padding: calc(10rem / 14) calc(12rem / 14);
  border: 1.5px solid var(--haya-border);
  border-radius: calc(8rem / 14);
  background: var(--haya-surface);
  color: var(--haya-text);
  font-family: inherit;
  font-size: calc(13rem / 14);
  font-weight: 480;
  line-height: calc(18rem / 14);
  transition: border-color 120ms ease;
}

.haya-input:focus,
.haya-select:focus,
.haya-textarea:focus {
  border-color: var(--haya-brand);
  outline: none;
}

.haya-textarea {
  font-family: var(--haya-font-family-mono);
  font-size: 0.8125rem;
  line-height: 1.6;
  resize: vertical;
  min-block-size: 7rem;
}

.haya-input--color {
  padding: 0.25rem;
  block-size: 2.25rem;
  cursor: pointer;
}

.haya-field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0 1rem;
}

/* ---------------------------------------------------------- empty/load - */

.haya-empty {
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--haya-text-muted);
}

.haya-empty__title {
  font-weight: 600;
  color: var(--haya-text);
  margin-block-end: 0.375rem;
}

.haya-empty__body {
  font-size: 0.875rem;
  line-height: 1.6;
  max-inline-size: 42ch;
  margin-inline: auto;
}

.haya-spinner {
  inline-size: 1.125rem;
  block-size: 1.125rem;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--haya-text-muted) 30%, transparent);
  border-block-start-color: var(--haya-brand);
  animation: haya-spin 700ms linear infinite;
  display: inline-block;
}

@keyframes haya-spin {
  to {
    rotate: 360deg;
  }
}

.haya-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 3rem;
  color: var(--haya-text-muted);
  font-size: 0.875rem;
}

/* --------------------------------------------------------------- toast - */

/* Liquid Glass (L215): the CMS builder's material, fixed system tints and
   pixel dimensions. Physical positions do not reverse with reading direction.
   The top offset is 60px, as requested in the reference fidelity review. */
.haya-toast-host {
  /* The glass's own light and body, the same in either scheme because the
     glass is dark in either: not palette colours, and the one exemption from
     L98-7 (AdminStylesheetTests). The kinds use the reference's fixed tones. */
  --haya-toast-light: rgb(255 255 255);
  --haya-toast-info: rgb(10 132 255);
  --haya-toast-success: rgb(48 209 88);
  --haya-toast-warning: rgb(255 159 10);
  --haya-toast-error: rgb(255 69 58);
  --font-sans: "IRANYekan", "YekanBakhVF", -apple-system, "Segoe UI", Tahoma, system-ui, sans-serif;
  --haya-toast-glass: rgb(20 20 24);
  --haya-toast-glass-solid: rgb(30 30 34);
  --haya-toast-rise: -14px;
  --haya-toast-spring: cubic-bezier(.34, 1.36, .64, 1);
  --haya-toast-ease: cubic-bezier(.4, 0, .2, 1);
  position: fixed;
  z-index: 10001;
  display: flex;
  flex-direction: column;
  align-items: center;
  inline-size: min(440px, calc(100vw - 32px));
  pointer-events: none;
}

.haya-toast-host--top-center,
.haya-toast-host--top-right,
.haya-toast-host--top-left {
  top: 60px;
}

.haya-toast-host--bottom-center,
.haya-toast-host--bottom-right,
.haya-toast-host--bottom-left {
  --haya-toast-rise: 14px;
  bottom: 24px;
}

.haya-toast-host--top-center,
.haya-toast-host--bottom-center {
  left: 50%;
  transform: translateX(-50%);
}

.haya-toast-host--top-right,
.haya-toast-host--bottom-right {
  right: 16px;
}

.haya-toast-host--top-left,
.haya-toast-host--bottom-left {
  left: 16px;
}

/* A physical side: an auto margin on the cross axis pushes the slot to the
   right or left whatever the page's direction, where flex-start would follow
   it and put a right-to-left page's "left" stack on the right. */
.haya-toast-host--top-right .haya-toast-slot,
.haya-toast-host--bottom-right .haya-toast-slot {
  margin-left: auto;
}

.haya-toast-host--top-left .haya-toast-slot,
.haya-toast-host--bottom-left .haya-toast-slot {
  margin-right: auto;
}

/* The slot: a row whose height animates, so a toast arriving or leaving moves
   its neighbours instead of making them jump (L215-4). */
.haya-toast-slot {
  display: grid;
  grid-template-rows: 1fr;
  max-inline-size: 100%;
  animation: haya-toast-slot-in .38s var(--haya-toast-ease);
  transition: grid-template-rows .32s var(--haya-toast-ease);
}

.haya-toast-slot.is-leaving {
  grid-template-rows: 0fr;
  pointer-events: none;
}

/* min-block-size: 0 is what lets the row close; the space between toasts lives
   inside it, so it closes with the toast. */
.haya-toast-slot__inner {
  min-block-size: 0;
  display: flex;
  padding-block-end: 10px;
}

.haya-toast-host--bottom-center .haya-toast-slot__inner,
.haya-toast-host--bottom-right .haya-toast-slot__inner,
.haya-toast-host--bottom-left .haya-toast-slot__inner {
  padding-block: 10px 0;
}

/* A collapsing row still keeps its item's padding, so without this the slot
   stops at the gap's height and the last 10px jump when the toast is gone. */
.haya-toast-slot.is-leaving .haya-toast-slot__inner {
  padding-block: 0;
  transition: padding-block .32s var(--haya-toast-ease);
}

/* The glass (L215-1). */
.haya-toast {
  --haya-toast-tone: var(--haya-toast-info);
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 10px;
  max-inline-size: 100%;
  min-block-size: 48px;
  padding: 7px;
  padding-inline-start: 8px;
  border-radius: 24px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--haya-toast-light) 15%, transparent) 0%,
      color-mix(in srgb, var(--haya-toast-light) 5%, transparent) 46%,
      color-mix(in srgb, var(--haya-toast-light) 2%, transparent) 100%),
    linear-gradient(
      color-mix(in srgb, var(--haya-toast-tone) 22%, transparent),
      color-mix(in srgb, var(--haya-toast-tone) 22%, transparent)),
    color-mix(in srgb, var(--haya-toast-glass) 72%, transparent);
  -webkit-backdrop-filter: blur(28px) saturate(190%) brightness(.86);
  backdrop-filter: blur(28px) saturate(190%) brightness(.86);
  box-shadow:
    0 1px 1px rgb(0 0 0 / .16),
    0 10px 24px -8px rgb(0 0 0 / .42),
    0 28px 60px -22px rgb(0 0 0 / .55),
    0 8px 30px -6px color-mix(in srgb, var(--haya-toast-tone) 40%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--haya-toast-tone) 40%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--haya-toast-light) 20%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--haya-toast-light) 4%, transparent);
  color: var(--haya-toast-light);
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  pointer-events: auto;
  animation: haya-toast-in .52s var(--haya-toast-spring) backwards;
  transition:
    transform .28s var(--haya-toast-spring),
    box-shadow .28s var(--haya-toast-ease),
    opacity .22s var(--haya-toast-ease);
}

/* The lensing rim: a 1px ring masked out of a gradient, bright where light
   strikes and nearly absent between. */
.haya-toast::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(140deg,
    color-mix(in srgb, var(--haya-toast-light) 55%, transparent) 0%,
    color-mix(in srgb, var(--haya-toast-tone) 55%, transparent) 22%,
    color-mix(in srgb, var(--haya-toast-tone) 12%, transparent) 48%,
    color-mix(in srgb, var(--haya-toast-tone) 30%, transparent) 72%,
    color-mix(in srgb, var(--haya-toast-light) 34%, transparent) 100%);
  -webkit-mask: linear-gradient(rgb(0 0 0) 0 0) content-box, linear-gradient(rgb(0 0 0) 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(rgb(0 0 0) 0 0) content-box exclude, linear-gradient(rgb(0 0 0) 0 0);
  pointer-events: none;
}

/* The sheen: soft light pooled near the top edge. */
.haya-toast::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(120% 100% at 22% -40%, color-mix(in srgb, var(--haya-toast-light) 16%, transparent), color-mix(in srgb, var(--haya-toast-light) 0%, transparent) 58%);
  pointer-events: none;
}

.haya-toast:hover {
  transform: translateY(-1px) scale(1.012);
  box-shadow:
    0 1px 1px rgb(0 0 0 / .16),
    0 14px 30px -8px rgb(0 0 0 / .48),
    0 34px 70px -22px rgb(0 0 0 / .6),
    0 10px 36px -6px color-mix(in srgb, var(--haya-toast-tone) 50%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--haya-toast-tone) 50%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--haya-toast-light) 24%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--haya-toast-light) 5%, transparent);
}

/* The reference's fixed tones. Bad news is red: a failure, and a loss; only the
   failure interrupts (role=alert). */
.haya-toast--success {
  --haya-toast-tone: var(--haya-toast-success);
}

.haya-toast--warning {
  --haya-toast-tone: var(--haya-toast-warning);
}

.haya-toast--error,
.haya-toast--removal {
  --haya-toast-tone: var(--haya-toast-error);
}

/* The wash is the clock (L215-3): the kind's colour sweeping in from the left
   with a feathered leading edge, never a hard line. A gradient twice-and-a-bit
   the toast's width slides across it: the tinted half comes in, the soft band
   between is the edge. Left to right in either language - it is a clock, not
   reading order. */
.haya-toast__fill {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-image: linear-gradient(90deg,
    color-mix(in srgb, var(--haya-toast-tone) 18%, transparent) 0%,
    color-mix(in srgb, var(--haya-toast-tone) 24%, transparent) 44%,
    color-mix(in srgb, var(--haya-toast-tone) 0%, transparent) 56%);
  background-size: 220% 100%;
  background-repeat: no-repeat;
  background-position: 100% 0;
  animation: haya-toast-fill var(--haya-toast-duration, 5000ms) linear forwards;
}

.haya-toast:hover .haya-toast__fill,
.haya-toast:focus-within .haya-toast__fill,
.haya-toast.is-paused .haya-toast__fill {
  animation-play-state: paused;
}

/* The icon in a drop of tinted glass. */
.haya-toast__icon {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  inline-size: 30px;
  block-size: 30px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, var(--haya-toast-tone), color-mix(in srgb, var(--haya-toast-tone) 78%, transparent) 70%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--haya-toast-light) 42%, transparent),
    inset 0 -1px 2px rgb(0 0 0 / .18),
    0 0 0 .5px color-mix(in srgb, var(--haya-toast-light) 18%, transparent),
    0 4px 14px -2px color-mix(in srgb, var(--haya-toast-tone) 60%, transparent);
  color: var(--haya-toast-light);
}

.haya-toast__icon svg {
  --haya-icon-size: 14px;
  inline-size: 14px;
  block-size: 14px;
}

/* Server messages carry codes and paths; a Latin run inside a Persian
   sentence otherwise reads end-first. */
.haya-toast__text {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-inline-size: 0;
  padding-block: 4px;
  padding-inline-end: 2px;
  overflow-wrap: anywhere;
  text-wrap: pretty;
  unicode-bidi: plaintext;
  text-align: start;
  text-shadow: 0 1px 1px rgb(0 0 0 / .18);
}

/* Glass buttons: lighter glass on glass, pressed in when clicked (L215-5). */
.haya-toast__action,
.haya-toast__close {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  margin: 0;
  border: 0;
  background: color-mix(in srgb, var(--haya-toast-light) 12%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--haya-toast-light) 18%, transparent),
    inset 0 0 0 .5px color-mix(in srgb, var(--haya-toast-light) 10%, transparent);
  color: var(--haya-toast-light);
  cursor: pointer;
  transition:
    background-color .18s var(--haya-toast-ease),
    color .18s var(--haya-toast-ease),
    transform .22s var(--haya-toast-spring);
}

.haya-toast__action {
  block-size: 32px;
  padding: 0 14px;
  border-radius: 16px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.haya-toast__close {
  display: grid;
  place-items: center;
  inline-size: 26px;
  block-size: 26px;
  padding: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--haya-toast-light) 7%, transparent);
  color: color-mix(in srgb, var(--haya-toast-light) 62%, transparent);
}

.haya-toast__close svg {
  --haya-icon-size: 12px;
  inline-size: 12px;
  block-size: 12px;
}

.haya-toast__action:hover {
  background: color-mix(in srgb, var(--haya-toast-light) 20%, transparent);
}

.haya-toast__close:hover {
  background: color-mix(in srgb, var(--haya-toast-light) 16%, transparent);
  color: var(--haya-toast-light);
}

.haya-toast__action:active,
.haya-toast__close:active {
  transform: scale(.94);
}

.haya-toast__action:focus-visible,
.haya-toast__close:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--haya-toast-info) 95%, transparent);
  outline-offset: 2px;
}

/* Leaving: it fades and settles while its slot closes. */
.haya-toast-slot.is-leaving .haya-toast {
  opacity: 0;
  transform: translateY(calc(var(--haya-toast-rise) * .5)) scale(.94);
  transition:
    transform .32s var(--haya-toast-ease),
    opacity .2s var(--haya-toast-ease);
}

/* In from the edge the stack hangs from. */
@keyframes haya-toast-in {
  from {
    opacity: 0;
    transform: translateY(var(--haya-toast-rise)) scale(.92);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes haya-toast-slot-in {
  from { grid-template-rows: 0fr; }
  to { grid-template-rows: 1fr; }
}

@keyframes haya-toast-fill {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}

/* A browser without backdrop blur gets solid glass rather than a see-through
   panel the text cannot be read on. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .haya-toast {
    background: color-mix(in srgb, var(--haya-toast-glass-solid) 96%, transparent);
  }
}

/* No motion: nothing springs, slides or grows. A steady wash still says the
   kind, the clock still runs, and a leaving toast simply goes. */
@media (prefers-reduced-motion: reduce) {
  .haya-toast-slot,
  .haya-toast,
  .haya-toast__action,
  .haya-toast__close {
    animation: none;
    transition: none;
  }

  .haya-toast:hover {
    transform: none;
  }

  .haya-toast-slot.is-leaving {
    display: none;
  }

  .haya-toast__fill {
    animation: none;
    background-position: 0 0;
    opacity: .6;
  }
}

/* -------------------------------------------------------------- dialog - */

/* HayaDialog rides a native <dialog> opened with showModal(): the top layer
   and the ::backdrop replace the fixed overlay this used to draw, and the
   browser keeps Tab inside it. The element only frames the card below. */
.haya-dialog-host {
  inline-size: min(32rem, calc(100% - 2rem));
  max-inline-size: none;
  max-block-size: 85vh;
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  overflow: visible;
}

/* Lighter than a solid card's scrim: the card is glass (L155), and the page it
   shows through has to be there to show. Still dark enough that the page reads
   as behind the dialog rather than beside it. */
.haya-dialog-host::backdrop {
  background: rgb(0 0 0 / 0.25);
  animation: haya-fade-in 120ms ease-out;
}

.haya-dialog-host .haya-dialog {
  inline-size: 100%;
}

.haya-dialog-host--wide {
  inline-size: min(64rem, calc(100% - 2rem));
}

/* A bare dialog is its content: no header rule, no footer, no padding of its
   own - the command palette draws its own chrome (L139-4). */
.haya-dialog--bare .haya-dialog__body {
  padding: 0;
  font-size: inherit;
  line-height: inherit;
}

/* ----------------------------------------------------------------- kbd - */

/* A key, as the palette and the top bar's search control hint it. */
.haya-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: calc(20rem / 14);
  block-size: calc(20rem / 14);
  padding-inline: calc(5rem / 14);
  border: 1px solid var(--haya-border);
  border-block-end-width: 2px;
  border-radius: calc(5rem / 14);
  background: var(--haya-surface-muted);
  color: var(--haya-text-muted);
  font-family: inherit;
  font-size: calc(11rem / 14);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.haya-kbd + .haya-kbd {
  margin-inline-start: calc(2rem / 14);
}

/* The top bar's search control (L139-4): the label and the shortcut read as a
   placeholder; below the drawer breakpoint only the icon stays. */
.haya-topbar-search {
  min-inline-size: calc(220rem / 14);
  justify-content: flex-start;
  color: var(--haya-text-muted);
}

.haya-topbar-search__label {
  flex: 1;
  text-align: start;
  font-size: calc(13rem / 14);
}

.haya-topbar-search__kbd {
  flex: none;
}

@media (max-width: 60rem) {
  .haya-topbar-search {
    min-inline-size: 0;
    inline-size: var(--haya-topbar-control-height);
    justify-content: center;
    padding-inline: 0;
  }

  .haya-topbar-search__label,
  .haya-topbar-search__kbd {
    display: none;
  }
}

/* ------------------------------------------------------------- palette - */

/* The command palette (L139-4): a HayaDialog set high on the page, the input
   as its head, scope tabs, the grouped list, and the hints as its foot. */
.haya-palette-host {
  inline-size: min(calc(640rem / 14), calc(100% - 2rem));
  margin-block-start: min(12vh, calc(96rem / 14));
}

.haya-palette-host .haya-dialog {
  max-block-size: min(calc(560rem / 14), 76vh);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.haya-palette-host .haya-dialog__body {
  display: flex;
  flex-direction: column;
  min-block-size: 0;
  flex: 1;
}

.haya-palette {
  display: flex;
  flex-direction: column;
  min-block-size: 0;
  flex: 1;
}

.haya-palette__head {
  display: flex;
  align-items: center;
  gap: calc(10rem / 14);
  padding: calc(12rem / 14) calc(16rem / 14);
  border-block-end: 1px solid var(--haya-border);
  flex: none;
}

.haya-palette__glyph,
.haya-palette__back-icon {
  --haya-icon-size: calc(18rem / 14);
  inline-size: calc(18rem / 14);
  block-size: calc(18rem / 14);
  flex: none;
  color: var(--haya-text-muted);
}

.haya-palette__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: calc(28rem / 14);
  block-size: calc(28rem / 14);
  margin: calc(-5rem / 14);
  padding: 0;
  border: 0;
  border-radius: calc(6rem / 14);
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.haya-palette__back:hover {
  background: var(--haya-surface-muted);
}

.haya-palette__back:focus-visible {
  outline: 2px solid var(--haya-brand);
  outline-offset: 1px;
}

/* The arrow points back along the reading direction. */
.haya-palette__back-icon:dir(ltr) {
  transform: scaleX(-1);
}

/* Where the search is - the entered item or the chosen scope - drawn before
   the input like a chip. */
.haya-palette__context {
  flex: none;
  max-inline-size: 40%;
  padding: calc(2rem / 14) calc(8rem / 14);
  border-radius: 999px;
  background: color-mix(in srgb, var(--haya-brand) 12%, transparent);
  color: var(--haya-brand);
  font-size: calc(12rem / 14);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.haya-palette__input {
  flex: 1;
  min-inline-size: 0;
  border: 0;
  padding: calc(6rem / 14) 0;
  background: transparent;
  color: var(--haya-text);
  font: inherit;
  font-size: calc(15rem / 14);
  outline: none;
}

.haya-palette__input::placeholder {
  color: var(--haya-text-muted);
}

.haya-palette__spinner {
  inline-size: calc(15rem / 14);
  block-size: calc(15rem / 14);
  flex: none;
  border: 2px solid color-mix(in srgb, var(--haya-brand) 25%, transparent);
  border-block-start-color: var(--haya-brand);
  border-radius: 50%;
  animation: haya-spin 700ms linear infinite;
}

.haya-palette__tabs {
  display: flex;
  gap: calc(4rem / 14);
  padding: calc(8rem / 14) calc(12rem / 14) 0;
  overflow-x: auto;
  scrollbar-width: none;
  flex: none;
}

.haya-palette__tab {
  display: inline-flex;
  align-items: center;
  gap: calc(6rem / 14);
  padding: calc(5rem / 14) calc(10rem / 14);
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--haya-text-muted);
  font: inherit;
  font-size: calc(12rem / 14);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}

.haya-palette__tab svg {
  inline-size: calc(14rem / 14);
  block-size: calc(14rem / 14);
}

.haya-palette__tab:hover {
  background: var(--haya-surface-muted);
  color: var(--haya-text);
}

.haya-palette__tab--active,
.haya-palette__tab--active:hover {
  border-color: color-mix(in srgb, var(--haya-brand) 35%, transparent);
  background: color-mix(in srgb, var(--haya-brand) 12%, transparent);
  color: var(--haya-brand);
}

.haya-palette__body {
  flex: 1;
  min-block-size: 0;
  overflow-y: auto;
  padding: calc(8rem / 14);
  scrollbar-width: thin;
}

.haya-palette__section + .haya-palette__section {
  margin-block-start: calc(6rem / 14);
}

.haya-palette__heading {
  display: flex;
  align-items: center;
  gap: calc(6rem / 14);
  padding: calc(8rem / 14) calc(10rem / 14) calc(4rem / 14);
  color: var(--haya-text-muted);
  font-size: calc(11rem / 14);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.haya-palette__heading svg {
  inline-size: calc(14rem / 14);
  block-size: calc(14rem / 14);
}

.haya-palette__row {
  display: flex;
  align-items: center;
  gap: calc(10rem / 14);
  padding: calc(8rem / 14) calc(10rem / 14);
  border-radius: calc(8rem / 14);
  cursor: pointer;
  scroll-margin-block: calc(8rem / 14);
}

.haya-palette__row--active {
  background: var(--haya-surface-muted);
}

.haya-palette__row--active .haya-palette__title {
  color: var(--haya-brand);
}

.haya-palette__row--record {
  padding-block: calc(12rem / 14);
  border: 1px solid var(--haya-border);
}

.haya-palette__row--danger .haya-palette__title,
.haya-palette__row--danger .haya-palette__icon {
  color: var(--haya-danger);
}

.haya-palette__icon {
  --haya-icon-size: calc(18rem / 14);
  inline-size: calc(18rem / 14);
  block-size: calc(18rem / 14);
  flex: none;
  color: var(--haya-text-muted);
}

.haya-palette__text {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  flex: 1;
}

.haya-palette__title {
  font-size: calc(13.5rem / 14);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.haya-palette__subtitle {
  color: var(--haya-text-muted);
  font-size: calc(12rem / 14);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.haya-palette__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: calc(4rem / 14);
  max-inline-size: 50%;
  flex: none;
}

.haya-palette__fact {
  display: inline-flex;
  align-items: center;
  gap: calc(4rem / 14);
  padding: calc(1rem / 14) calc(7rem / 14);
  border-radius: 999px;
  background: var(--haya-surface-muted);
  color: var(--haya-text-muted);
  font-size: calc(11.5rem / 14);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.haya-palette__fact-label {
  opacity: 0.75;
}

.haya-palette__fact--success {
  background: color-mix(in srgb, var(--haya-success) 14%, transparent);
  color: var(--haya-success);
}

.haya-palette__fact--danger {
  background: color-mix(in srgb, var(--haya-danger) 14%, transparent);
  color: var(--haya-danger);
}

.haya-palette__fact--warning {
  background: color-mix(in srgb, var(--haya-warning) 16%, transparent);
  color: var(--haya-warning);
}

.haya-palette__fact--info {
  background: color-mix(in srgb, var(--haya-info) 14%, transparent);
  color: var(--haya-info);
}

.haya-palette__hint {
  display: inline-flex;
  align-items: center;
  gap: calc(6rem / 14);
  flex: none;
  color: var(--haya-text-muted);
  font-size: calc(11.5rem / 14);
}

.haya-palette__enter {
  flex: none;
}

/* The way into a record's actions for the pointer; the keyboard has Shift+Enter. */
.haya-palette__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: calc(26rem / 14);
  block-size: calc(26rem / 14);
  flex: none;
  padding: 0;
  border: 0;
  border-radius: calc(6rem / 14);
  background: transparent;
  color: var(--haya-text-muted);
  cursor: pointer;
  opacity: 0;
}

.haya-palette__more svg {
  inline-size: calc(16rem / 14);
  block-size: calc(16rem / 14);
}

.haya-palette__row:hover .haya-palette__more,
.haya-palette__row--active .haya-palette__more {
  opacity: 1;
}

.haya-palette__more:hover {
  background: color-mix(in srgb, var(--haya-text) 8%, transparent);
  color: var(--haya-text);
}

.haya-palette__empty {
  padding: calc(28rem / 14) calc(16rem / 14);
  color: var(--haya-text-muted);
  font-size: calc(13rem / 14);
  text-align: center;
}

.haya-palette__note {
  margin: calc(6rem / 14) calc(10rem / 14);
  padding: calc(6rem / 14) calc(10rem / 14);
  border-radius: calc(6rem / 14);
  font-size: calc(12rem / 14);
}

.haya-palette__note--warning {
  background: color-mix(in srgb, var(--haya-warning) 14%, transparent);
  color: var(--haya-warning);
}

.haya-palette__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(6rem / 14) calc(14rem / 14);
  padding: calc(8rem / 14) calc(14rem / 14);
  border-block-start: 1px solid var(--haya-border);
  color: var(--haya-text-muted);
  font-size: calc(11.5rem / 14);
  flex: none;
}

.haya-palette__foot > span {
  display: inline-flex;
  align-items: center;
  gap: calc(5rem / 14);
}

.haya-palette__foot-end {
  margin-inline-start: auto;
}

@media (max-width: 60rem) {
  .haya-palette-host {
    margin-block-start: 1rem;
  }

  .haya-palette__facts {
    display: none;
  }

  .haya-palette__foot {
    display: none;
  }
}

/* -------------------------------------------------------- file manager - */

/* The media module's file manager (L121): folders as cards over the open
   folder's files as tiles, on the files screen and inside the picker dialog.
   In the shell's stylesheet with the other primitives, so a product restyling
   the theme restyles it too. */
.haya-fm {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-block-size: 22rem;
}

/* The header: the path at the start, what can be added here at the end. */
.haya-fm__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block-end: 0.75rem;
  border-block-end: 1px solid var(--haya-border);
}

.haya-fm__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.haya-fm__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-block-start: -0.5rem;
}

.haya-fm__crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.125rem;
  min-inline-size: 0;
}

.haya-fm__crumb {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  max-inline-size: 14rem;
  margin: 0;
  padding: 0.3125rem 0.5rem;
  border: 0;
  border-radius: var(--haya-radius);
  background: none;
  color: var(--haya-text-muted);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.haya-fm__crumb span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.haya-fm__crumb:hover:not(:disabled),
.haya-fm__crumb:focus-visible {
  outline: none;
  background: var(--haya-surface-muted);
  color: var(--haya-brand);
}

.haya-fm__crumb:disabled {
  color: var(--haya-text);
  cursor: default;
}

.haya-fm__crumb-icon {
  --haya-icon-size: 1.125rem;
  inline-size: 1.125rem;
  block-size: 1.125rem;
  flex: none;
}

/* The chevron points the way the path reads: left in RTL, turned in LTR. */
.haya-fm__crumb-sep {
  --haya-icon-size: 0.875rem;
  inline-size: 0.875rem;
  block-size: 0.875rem;
  flex: none;
  color: var(--haya-text-muted);
}

.haya-fm__crumb-sep:dir(ltr) {
  scale: -1 1;
}

.haya-fm__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.haya-fm__search {
  inline-size: 14rem;
  max-inline-size: 100%;
}

.haya-fm__sort {
  inline-size: 10.5rem;
}

/* One file input for the button and for dropping. Rendered for the whole
   upload, never swapped out — the browser keeps its handle on this element and
   removing it mid-read ends the transfer. Visually hidden and still focusable,
   so Tab reaches it and the button beside it shows the focus; while files are
   dragged over the manager it covers the manager, invisible, to take the drop. */
.haya-fm__input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.haya-fm__input--drop {
  inset: 0;
  z-index: 4;
  inline-size: 100%;
  block-size: 100%;
  clip-path: none;
  opacity: 0;
  cursor: copy;
}

.haya-fm__upload {
  cursor: pointer;
}

.haya-fm__drop-target {
  display: contents;
}

.haya-fm__drop-target:has(.haya-fm__input:focus-visible) + .haya-fm__upload {
  outline: 2px solid var(--haya-brand);
  outline-offset: 2px;
}

.haya-fm__upload--busy {
  cursor: progress;
  opacity: 0.7;
  pointer-events: none;
}

.haya-fm__drop {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border: 2px dashed var(--haya-brand);
  border-radius: var(--haya-radius-lg);
  background: color-mix(in srgb, var(--haya-surface) 90%, var(--haya-brand));
  color: var(--haya-text);
  text-align: center;
  pointer-events: none;
  animation: haya-fade-in 120ms ease-out;
}

.haya-fm__drop-icon {
  --haya-icon-size: 3rem;
  inline-size: 3rem;
  block-size: 3rem;
  color: var(--haya-brand);
}

.haya-fm__drop span {
  color: var(--haya-text-muted);
  font-size: 0.8125rem;
}

/* A thin line while a page, a search or a sort is read over tiles already on
   screen; skeletons are for a folder that has nothing to show yet. */
.haya-fm__progress {
  position: relative;
  block-size: 2px;
  margin-block: -0.625rem;
  overflow: hidden;
  border-radius: 999px;
}

.haya-fm__progress--on::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inline-size: 35%;
  border-radius: inherit;
  background: var(--haya-brand);
  animation: haya-fm-progress 1.1s ease-in-out infinite;
}

@keyframes haya-fm-progress {
  from {
    inset-inline-start: -35%;
  }

  to {
    inset-inline-start: 100%;
  }
}

.haya-fm__notice {
  margin: 0;
  padding: 0.625rem 0.875rem;
  border: 1px solid color-mix(in srgb, var(--haya-danger) 35%, transparent);
  border-radius: var(--haya-radius);
  background: color-mix(in srgb, var(--haya-danger) 8%, var(--haya-surface));
  color: var(--haya-danger);
  font-size: 0.8125rem;
}

/* ------------------------------------------------ file manager: uploads - */

.haya-fm-queue {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--haya-border);
  border-radius: var(--haya-radius-lg);
  background: var(--haya-surface-muted);
}

.haya-fm-queue__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.8125rem;
}

.haya-fm-queue__title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-inline-end: auto;
  font-weight: 600;
}

.haya-fm-queue__percent {
  color: var(--haya-text-muted);
  font-variant-numeric: tabular-nums;
}

.haya-fm-bar {
  display: block;
  block-size: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--haya-text-muted) 20%, transparent);
}

.haya-fm-bar__fill {
  display: block;
  block-size: 100%;
  border-radius: inherit;
  background: var(--haya-brand);
  transition: inline-size 160ms ease-out;
}

.haya-fm-queue__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 0.375rem 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.haya-fm-queue__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.25rem 0.5rem;
  padding: 0.375rem 0.5rem;
  border-radius: var(--haya-radius);
  background: var(--haya-surface);
  font-size: 0.75rem;
}

.haya-fm-queue__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.haya-fm-queue__state {
  color: var(--haya-text-muted);
  font-variant-numeric: tabular-nums;
}

.haya-fm-queue__item .haya-fm-bar,
.haya-fm-queue__error {
  grid-column: 1 / -1;
}

.haya-fm-queue__item .haya-fm-bar {
  block-size: 3px;
}

.haya-fm-queue__item--done .haya-fm-queue__state {
  color: var(--haya-success);
}

.haya-fm-queue__item--failed .haya-fm-queue__state,
.haya-fm-queue__error {
  color: var(--haya-danger);
}

/* ----------------------------------------------- file manager: sections - */

.haya-fm__section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.haya-fm__section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.625rem;
  min-block-size: 2rem;
}

.haya-fm__section-title {
  margin: 0;
  color: var(--haya-text);
  font-size: 0.9375rem;
  font-weight: 650;
}

.haya-fm__folder-name {
  max-inline-size: 16rem;
  overflow: hidden;
  padding: 0.0625rem 0.5rem;
  border-radius: 999px;
  background: var(--haya-surface-muted);
  color: var(--haya-text-muted);
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.haya-fm__count {
  color: var(--haya-text-muted);
  font-size: 0.75rem;
}

.haya-fm__select-page {
  margin-inline-start: auto;
}

.haya-fm__bulk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--haya-radius);
  background: color-mix(in srgb, var(--haya-brand) 8%, var(--haya-surface));
  animation: haya-fade-in 120ms ease-out;
}

.haya-fm__bulk-count {
  margin-inline-end: auto;
  color: var(--haya-brand);
  font-size: 0.8125rem;
  font-weight: 600;
}

.haya-fm__empty {
  border: 1px dashed var(--haya-border);
  border-radius: var(--haya-radius-lg);
}

.haya-fm__picked-count {
  align-self: center;
  margin-inline-end: auto;
  color: var(--haya-text-muted);
  font-size: 0.8125rem;
}

.haya-fm__checking {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  color: var(--haya-text-muted);
}

/* ------------------------------------------------ file manager: folders - */

.haya-fm__folders {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
  gap: 0.75rem;
}

.haya-fm-folder {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-inline-size: 0;
  min-block-size: 3.75rem;
  margin: 0;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--haya-border);
  border-radius: var(--haya-radius-lg);
  background: var(--haya-surface);
  color: var(--haya-text);
  font: inherit;
  text-align: start;
  transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
}

.haya-fm-folder:hover,
.haya-fm-folder:focus-within {
  border-color: color-mix(in srgb, var(--haya-brand) 55%, var(--haya-border));
  box-shadow: 0 6px 16px -12px rgb(0 0 0 / 0.35);
}

.haya-fm-folder:has(.haya-fm-folder__open:focus-visible),
.haya-fm-folder--back:focus-visible {
  outline: 2px solid var(--haya-brand);
  outline-offset: 2px;
}

.haya-fm-folder--back {
  border-style: dashed;
  color: var(--haya-text-muted);
  cursor: pointer;
}

.haya-fm-folder__open {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 0.625rem;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.haya-fm-folder__open:focus-visible {
  outline: none;
}

/* The whole card opens the folder; its menu sits above that. */
.haya-fm-folder__open::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--haya-radius-lg);
}

.haya-fm-folder__icon {
  --haya-icon-size: 2rem;
  inline-size: 2rem;
  block-size: 2rem;
  flex: none;
  color: var(--haya-warning);
}

.haya-fm-folder--back .haya-fm-folder__icon {
  color: var(--haya-text-muted);
}

.haya-fm-folder__name {
  overflow: hidden;
  font-size: 0.8125rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Laid over the card's end rather than beside the name: in the flow its two
   buttons took most of a narrow card and cut every name short. While they show,
   the name makes room for them instead of being covered. */
.haya-fm-folder:hover .haya-fm-folder__open,
.haya-fm-folder:focus-within .haya-fm-folder__open,
.haya-fm-folder:has(.haya-fm-folder__actions :popover-open) .haya-fm-folder__open {
  padding-inline-end: 4.25rem;
}

.haya-fm-folder__open {
  transition: padding 120ms ease-out;
}

.haya-fm-folder__actions {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 0.375rem;
  z-index: 1;
  border-radius: var(--haya-radius);
  background: var(--haya-surface);
  opacity: 0;
  translate: 0 -50%;
  transition: opacity 120ms ease-out;
}

.haya-fm-folder:hover .haya-fm-folder__actions,
.haya-fm-folder:focus-within .haya-fm-folder__actions,
.haya-fm-folder__actions:has(:popover-open) {
  opacity: 1;
}

/* Smaller than a table row's buttons: the card is narrow, and the two of them
   must fit in the room the name makes for them. */
.haya-fm-folder__actions .haya-row-actions {
  gap: 0.125rem;
}

.haya-fm-folder__actions .haya-row-action {
  --haya-icon-size: 1rem;
  inline-size: 1.75rem;
  block-size: 1.75rem;
}

/* ------------------------------------------------- file manager: tiles - */

.haya-fm__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.875rem;
}

.haya-fm-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  border: 1px solid var(--haya-border);
  border-radius: var(--haya-radius-lg);
  background: var(--haya-surface);
  transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
}

.haya-fm-tile:hover,
.haya-fm-tile:focus-within {
  border-color: color-mix(in srgb, var(--haya-brand) 55%, var(--haya-border));
  box-shadow: 0 8px 20px -14px rgb(0 0 0 / 0.4);
}

.haya-fm-tile--selected,
.haya-fm-tile--selected:hover {
  border-color: var(--haya-brand);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--haya-brand) 35%, transparent);
}

.haya-fm-tile--muted {
  opacity: 0.5;
}

.haya-fm-tile__hit {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-inline-size: 0;
  margin: 0;
  padding: 0.375rem 0.375rem 0.625rem;
  border: 0;
  border-radius: inherit;
  background: none;
  color: var(--haya-text);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.haya-fm-tile__hit:focus-visible {
  outline: 2px solid var(--haya-brand);
  outline-offset: 2px;
}

.haya-fm-tile__hit:disabled {
  cursor: not-allowed;
}

.haya-fm-tile__preview {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--haya-radius);
  background: var(--haya-surface-muted);
  color: var(--haya-text-muted);
}

.haya-fm-tile__preview img,
.haya-fm-tile__preview video {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.haya-fm-tile__glyph {
  --haya-icon-size: 2.25rem;
  inline-size: 2.25rem;
  block-size: 2.25rem;
}

.haya-fm-tile__badge {
  position: absolute;
  inset-block-end: 0.375rem;
  inset-inline-start: 0.375rem;
  padding: 0.125rem 0.4375rem;
  border-radius: 999px;
  background: var(--haya-surface);
  color: var(--haya-text);
  font-size: 0.6875rem;
  font-weight: 600;
  box-shadow: 0 2px 6px -3px rgb(0 0 0 / 0.4);
}

.haya-fm-tile__meta {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-inline-size: 0;
  padding-inline: 0.25rem;
}

.haya-fm-tile__name {
  overflow: hidden;
  font-size: 0.75rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.haya-fm-tile__size {
  color: var(--haya-text-muted);
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
}

.haya-fm-tile__check {
  position: absolute;
  inset-block-start: 0.75rem;
  inset-inline-start: 0.75rem;
  z-index: 1;
  display: grid;
  place-items: center;
  inline-size: 1.375rem;
  block-size: 1.375rem;
  margin: 0;
  padding: 0;
  border: 1.5px solid var(--haya-border);
  border-radius: 999px;
  background: var(--haya-surface);
  color: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease-out;
}

button.haya-fm-tile__check {
  pointer-events: auto;
  cursor: pointer;
}

.haya-fm-tile__check svg {
  inline-size: 0.875rem;
  block-size: 0.875rem;
}

.haya-fm-tile:hover .haya-fm-tile__check,
.haya-fm-tile:focus-within .haya-fm-tile__check,
.haya-fm-tile--selected .haya-fm-tile__check,
.haya-fm-tile__check:focus-visible {
  opacity: 1;
}

.haya-fm-tile__check:focus-visible {
  outline: 2px solid var(--haya-brand);
  outline-offset: 2px;
}

.haya-fm-tile--selected .haya-fm-tile__check {
  border-color: var(--haya-brand);
  background: var(--haya-brand);
  color: var(--haya-brand-contrast);
}

.haya-fm-tile__actions {
  position: absolute;
  inset-block-start: 0.625rem;
  inset-inline-end: 0.625rem;
  z-index: 1;
  border-radius: var(--haya-radius);
  background: var(--haya-surface);
  box-shadow: 0 2px 8px -4px rgb(0 0 0 / 0.35);
  opacity: 0;
  transition: opacity 120ms ease-out;
}

.haya-fm-tile:hover .haya-fm-tile__actions,
.haya-fm-tile:focus-within .haya-fm-tile__actions,
.haya-fm-tile__actions:has(:popover-open) {
  opacity: 1;
}

.haya-fm-tile--skeleton {
  gap: 0.5rem;
  padding: 0.375rem 0.375rem 0.625rem;
}

/* A touch screen has no hover to reveal a card's menu or a tile's check. */
@media (hover: none) {
  .haya-fm-folder__actions,
  .haya-fm-tile__actions,
  .haya-fm-tile__check {
    opacity: 1;
  }
}

.haya-fm-skeleton {
  display: block;
  border-radius: var(--haya-radius);
  background: linear-gradient(
    90deg,
    var(--haya-surface-muted) 25%,
    color-mix(in srgb, var(--haya-surface-muted) 45%, var(--haya-surface)) 50%,
    var(--haya-surface-muted) 75%);
  background-size: 200% 100%;
  animation: haya-fm-shimmer 1.2s ease-in-out infinite;
}

.haya-fm-skeleton--icon {
  inline-size: 2rem;
  block-size: 2rem;
  flex: none;
}

.haya-fm-skeleton--line {
  inline-size: 60%;
  block-size: 0.75rem;
}

@keyframes haya-fm-shimmer {
  from {
    background-position: 100% 0;
  }

  to {
    background-position: -100% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .haya-fm-skeleton {
    animation: none;
  }

  .haya-fm__progress--on::before {
    inline-size: 100%;
    opacity: 0.5;
    animation: none;
  }
}

/* --------------------------------------------- file manager: move, details - */

.haya-fm-move {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.haya-fm-move__list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-block-size: 9rem;
  padding: 0.375rem;
  border: 1px solid var(--haya-border);
  border-radius: var(--haya-radius);
  background: var(--haya-surface-muted);
}

.haya-fm-move__folder {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.5rem 0.625rem;
  border: 0;
  border-radius: var(--haya-radius);
  background: var(--haya-surface);
  color: var(--haya-text);
  font: inherit;
  font-size: 0.8125rem;
  text-align: start;
  cursor: pointer;
}

.haya-fm-move__folder:hover:not(:disabled),
.haya-fm-move__folder:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--haya-brand);
}

.haya-fm-move__folder:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.haya-fm-move__folder .haya-fm-folder__icon {
  --haya-icon-size: 1.25rem;
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

.haya-fm-move__name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.haya-fm-move__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: auto;
  color: var(--haya-text-muted);
  font-size: 0.8125rem;
}

.haya-fm-move__target {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
}

.haya-fm-details {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: start;
  gap: 1.25rem;
}

.haya-fm-details__preview {
  display: grid;
  place-items: center;
  min-block-size: 14rem;
  overflow: hidden;
  border-radius: var(--haya-radius-lg);
  background: var(--haya-surface-muted);
  color: var(--haya-text-muted);
}

.haya-fm-details__preview img,
.haya-fm-details__preview video {
  max-inline-size: 100%;
  max-block-size: 26rem;
  object-fit: contain;
}

.haya-fm-details__body {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
}

.haya-fm-details__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 1rem;
  margin: 0 0 1rem;
}

.haya-fm-details__facts div {
  min-inline-size: 0;
}

.haya-fm-details__facts dt {
  color: var(--haya-text-muted);
  font-size: 0.6875rem;
}

.haya-fm-details__facts dd {
  margin: 0;
  overflow: hidden;
  font-size: 0.8125rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.haya-fm-details__link {
  display: flex;
  gap: 0.5rem;
}

.haya-fm-details__link .haya-input {
  flex: 1;
  min-inline-size: 0;
}

.haya-fm-details__toggle {
  margin-block-end: 1rem;
}

@media (max-width: 48rem) {
  .haya-fm-details {
    grid-template-columns: 1fr;
  }
}

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

/* HayaRichText, at the CMS design's measurements (Figma, CMS, 2753:9545): a
   card with a 44px toolbar of 32px buttons in divided groups, and 16px of room
   around 14px text on a 28px line. */
.haya-rich-text {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1.5px solid var(--haya-border);
  border-radius: calc(8rem / 14);
  background: var(--haya-surface);
  color: var(--haya-text);
}

.haya-rich-text:focus-within {
  border-color: color-mix(in srgb, var(--haya-brand) 45%, var(--haya-border));
}

.haya-rich-text__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  border-block-end: 1px solid var(--haya-border);
}

.haya-rich-text__group {
  display: flex;
  align-items: center;
  gap: calc(8rem / 14);
  padding: calc(6rem / 14) calc(8rem / 14);
  border-inline-end: 1px solid var(--haya-border);
}

.haya-rich-text__group:last-child {
  border-inline-end: 0;
}

.haya-rich-text__tool,
.haya-rich-text__size {
  display: grid;
  place-items: center;
  block-size: calc(32rem / 14);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: calc(6rem / 14);
  background: none;
  color: var(--haya-text-muted);
  font: inherit;
  cursor: pointer;
}

.haya-rich-text__tool {
  inline-size: calc(32rem / 14);
}

.haya-rich-text__size {
  display: inline-flex;
  align-items: center;
  gap: calc(4rem / 14);
  padding-inline: calc(6rem / 14);
  font-size: calc(14rem / 14);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.haya-rich-text__icon {
  inline-size: calc(20rem / 14);
  block-size: calc(20rem / 14);
}

.haya-rich-text__size .haya-rich-text__icon {
  inline-size: calc(16rem / 14);
  block-size: calc(16rem / 14);
}

.haya-rich-text__tool:hover,
.haya-rich-text__size:hover,
.haya-rich-text__tool:focus-visible,
.haya-rich-text__size:focus-visible {
  outline: none;
  background: var(--haya-surface-muted);
  color: var(--haya-text);
}

.haya-rich-text__tool[aria-pressed="true"] {
  background: color-mix(in srgb, var(--haya-brand) 12%, transparent);
  color: var(--haya-brand);
}

/* A width in words, not a glyph: the image menu's 25% to 100%. */
.haya-rich-text__tool--text {
  inline-size: auto;
  padding-inline: calc(6rem / 14);
  font-size: calc(12rem / 14);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

/* Undo or redo with nothing to take back or bring back. */
.haya-rich-text__tool[data-unavailable] {
  opacity: 0.4;
}

.haya-rich-text__menu-host {
  display: contents;
}

.haya-rich-text__menu {
  position: fixed;
  inset: auto;
  position-area: block-end span-inline-end;
  position-try-fallbacks: block-start span-inline-end, block-end span-inline-start;
  margin: calc(4rem / 14) 0;
  padding: calc(6rem / 14);
  border: 1.5px solid var(--haya-border);
  border-radius: calc(8rem / 14);
  background: var(--haya-surface);
  color: var(--haya-text);
  box-shadow: 0 12px 32px -12px rgb(0 0 0 / 0.2);
}

.haya-rich-text__menu:popover-open {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  min-inline-size: calc(96rem / 14);
}

.haya-rich-text__menu--swatches:popover-open {
  grid-template-columns: repeat(4, calc(28rem / 14));
  gap: calc(6rem / 14);
  min-inline-size: 0;
}

.haya-rich-text__menu-item {
  margin: 0;
  padding: calc(6rem / 14) calc(10rem / 14);
  border: 0;
  border-radius: calc(6rem / 14);
  background: none;
  color: var(--haya-text);
  font: inherit;
  font-size: calc(13rem / 14);
  text-align: start;
  cursor: pointer;
}

.haya-rich-text__menu-item--wide {
  grid-column: 1 / -1;
}

.haya-rich-text__menu-item:hover,
.haya-rich-text__menu-item:focus-visible,
.haya-rich-text__menu-item[data-active] {
  outline: none;
  background: var(--haya-surface-muted);
}

.haya-rich-text__menu-item[data-active] {
  color: var(--haya-brand);
  font-weight: 600;
}

.haya-rich-text__swatch {
  inline-size: calc(28rem / 14);
  block-size: calc(28rem / 14);
  margin: 0;
  padding: 0;
  border: 1.5px solid var(--haya-border);
  border-radius: 999px;
  background: var(--haya-rich-text-swatch);
  cursor: pointer;
}

.haya-rich-text__swatch:hover,
.haya-rich-text__swatch:focus-visible,
.haya-rich-text__swatch[data-active] {
  outline: 2px solid var(--haya-brand);
  outline-offset: 1px;
}

/* The text scrolls inside the editor past its greatest height, so the toolbar
   above it stays within reach of whatever is being formatted. */
.haya-rich-text__content {
  flex: 1 1 auto;
  min-block-size: var(--haya-rich-text-min-height, calc(240rem / 14));
  max-block-size: var(--haya-rich-text-max-height, none);
  overflow-y: auto;
  scrollbar-width: thin;
  cursor: text;
}

.haya-rich-text__prose {
  box-sizing: border-box;
  min-block-size: var(--haya-rich-text-min-height, calc(240rem / 14));
  padding: calc(16rem / 14);
  outline: none;
  font-size: calc(14rem / 14);
  line-height: calc(28rem / 14);
  overflow-wrap: anywhere;
}

.haya-rich-text__prose > :first-child {
  margin-block-start: 0;
}

.haya-rich-text__prose p {
  margin: 0 0 calc(8rem / 14);
}

.haya-rich-text__prose h1,
.haya-rich-text__prose h2,
.haya-rich-text__prose h3,
.haya-rich-text__prose h4,
.haya-rich-text__prose h5,
.haya-rich-text__prose h6 {
  margin: calc(16rem / 14) 0 calc(8rem / 14);
  line-height: 1.4;
  font-weight: 700;
}

.haya-rich-text__prose h1 { font-size: calc(26rem / 14); }
.haya-rich-text__prose h2 { font-size: calc(22rem / 14); }
.haya-rich-text__prose h3 { font-size: calc(19rem / 14); }
.haya-rich-text__prose h4 { font-size: calc(17rem / 14); }
.haya-rich-text__prose h5 { font-size: calc(15rem / 14); }
.haya-rich-text__prose h6 { font-size: calc(14rem / 14); }

.haya-rich-text__prose ul,
.haya-rich-text__prose ol {
  margin: 0 0 calc(8rem / 14);
  padding-inline-start: calc(24rem / 14);
}

.haya-rich-text__prose blockquote {
  margin: 0 0 calc(8rem / 14);
  padding-inline-start: calc(12rem / 14);
  border-inline-start: 3px solid var(--haya-border);
  color: var(--haya-text-muted);
}

.haya-rich-text__prose a {
  color: var(--haya-brand);
  text-decoration: underline;
}

.haya-rich-text__prose img {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
  margin: calc(8rem / 14) 0;
  border-radius: calc(8rem / 14);
}

.haya-rich-text__prose img.ProseMirror-selectednode {
  outline: 2px solid var(--haya-brand);
  outline-offset: 2px;
}

/* What the editor grew (L156): video, a divider, code, tables and checklists.
   An image's width and alignment arrive as inline style on the image itself,
   so they need no rule here - and a storefront shows them without one. */
.haya-rich-text__prose video {
  display: block;
  max-inline-size: 100%;
  margin: calc(8rem / 14) 0;
  border-radius: calc(8rem / 14);
  background: var(--haya-surface-muted);
}

.haya-rich-text__prose video.ProseMirror-selectednode,
.haya-rich-text__prose hr.ProseMirror-selectednode {
  outline: 2px solid var(--haya-brand);
  outline-offset: 2px;
}

.haya-rich-text__prose hr {
  margin: calc(16rem / 14) 0;
  border: 0;
  border-block-start: 1px solid var(--haya-border);
}

.haya-rich-text__prose code {
  padding: 0.1em 0.35em;
  border-radius: calc(4rem / 14);
  background: var(--haya-surface-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
}

/* Code reads left to right whatever the text around it does. */
.haya-rich-text__prose pre {
  margin: 0 0 calc(8rem / 14);
  padding: calc(12rem / 14);
  border-radius: calc(8rem / 14);
  background: var(--haya-surface-muted);
  overflow-x: auto;
  direction: ltr;
  text-align: left;
}

.haya-rich-text__prose pre code {
  padding: 0;
  background: none;
  font-size: calc(13rem / 14);
}

.haya-rich-text__prose .tableWrapper {
  overflow-x: auto;
  margin: 0 0 calc(8rem / 14);
}

.haya-rich-text__prose table {
  inline-size: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.haya-rich-text__prose th,
.haya-rich-text__prose td {
  position: relative;
  min-inline-size: 3em;
  padding: calc(6rem / 14) calc(8rem / 14);
  border: 1px solid var(--haya-border);
  vertical-align: top;
}

.haya-rich-text__prose th {
  background: var(--haya-surface-muted);
  font-weight: 650;
  text-align: start;
}

.haya-rich-text__prose th > p,
.haya-rich-text__prose td > p {
  margin: 0;
}

/* The cells a drag across the table has selected, for merging. */
.haya-rich-text__prose .selectedCell::after {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--haya-brand) 14%, transparent);
  pointer-events: none;
}

.haya-rich-text__prose ul[data-type="taskList"] {
  padding-inline-start: 0;
  list-style: none;
}

.haya-rich-text__prose ul[data-type="taskList"] li {
  display: flex;
  align-items: flex-start;
  gap: calc(8rem / 14);
}

.haya-rich-text__prose ul[data-type="taskList"] li > label {
  flex: none;
  margin-block-start: 0.2em;
}

.haya-rich-text__prose ul[data-type="taskList"] li > div {
  flex: 1;
  min-inline-size: 0;
}

.haya-rich-text__prose ul[data-type="taskList"] li[data-checked="true"] > div {
  color: var(--haya-text-muted);
  text-decoration: line-through;
}

.haya-rich-text__prose ul[data-type="taskList"] input[type="checkbox"] {
  accent-color: var(--haya-brand);
}

.haya-rich-text__prose p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: inline-start;
  block-size: 0;
  color: var(--haya-text-muted);
  pointer-events: none;
}

/* An empty editor gives dir="auto" no text to read a direction from, and the
   browser then falls back to LTR — so the placeholder, and the caret with it,
   sat at the left of a Persian page. Until something is typed, the empty
   paragraph follows the page's direction; once there is text, auto takes over
   again and mixed content keeps working. Keyed on the editor's root, which
   inherits the page's direction, not on the content element carrying auto. */
.haya-rich-text:dir(rtl) .haya-rich-text__prose p.is-editor-empty:first-child {
  direction: rtl;
}

.haya-rich-text:dir(ltr) .haya-rich-text__prose p.is-editor-empty:first-child {
  direction: ltr;
}

.haya-rich-text__bubble {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: calc(4rem / 14);
  border: 1px solid var(--haya-border);
  border-radius: calc(8rem / 14);
  background: var(--haya-surface);
  box-shadow: 0 8px 24px -12px rgb(0 0 0 / 0.3);
}

/* Until the editor takes it over, the selection menu is not part of the page. */
.haya-rich-text > .haya-rich-text__bubble {
  display: none;
}

.haya-rich-text__bubble-sep {
  inline-size: 1px;
  block-size: calc(20rem / 14);
  margin-inline: calc(2rem / 14);
  background: var(--haya-border);
}

.haya-rich-text__layer {
  position: absolute;
  inset: 0 auto auto 0;
}

.haya-rich-text__footer {
  display: flex;
  justify-content: flex-end;
  gap: 1px;
  padding: calc(4rem / 14) calc(12rem / 14) calc(8rem / 14);
  color: var(--haya-text-muted);
  font-size: calc(12rem / 14);
  font-variant-numeric: tabular-nums;
}

.haya-rich-text--readonly .haya-rich-text__content {
  cursor: default;
}

/* --------------------------------------------------------- product page - */

/* Catalog's product page at the CMS design's measurements (Figma, CMS,
   2752:8748): a wide column and a 318px sidebar 24px apart, sidebar cards of
   12px radius with a 48px header. */
.haya-product-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(318rem / 14);
  align-items: start;
  gap: calc(24rem / 14);
}

@media (max-width: 64rem) {
  .haya-product-page {
    grid-template-columns: minmax(0, 1fr);
  }
}

.haya-product-page__main,
.haya-product-page__intro {
  display: flex;
  flex-direction: column;
  gap: calc(16rem / 14);
  min-inline-size: 0;
}

.haya-product-page__main {
  gap: calc(24rem / 14);
}

/* The sidebar stays in view while the long main column scrolls: stuck under
   the shell's sticky top bar, and scrolling within itself when it is taller
   than the space left, so its last card is never out of reach. */
.haya-product-page__aside {
  /* Not a scroll box: the page is the only thing that scrolls, so a wheel, a
     trackpad and a finger all move one surface with the browser's momentum
     (L114). While the column fits the viewport it pins under the header; taller
     than that, the offset turns negative and it travels with the page until its
     last card is in view, then pins by its end. The shell's script writes the
     column's height into --haya-sticky-height (data-haya-sticky). */
  position: sticky;
  inset-block-start: min(
    calc(var(--haya-shell-topbar-height, calc(66rem / 14)) + calc(16rem / 14)),
    calc(100vh - var(--haya-sticky-height, 0px) - calc(16rem / 14)));
  display: flex;
  flex-direction: column;
  gap: calc(24rem / 14);
  min-inline-size: 0;
}

@media (max-width: 64rem) {
  .haya-product-page__aside {
    position: static;
  }
}

.haya-product-section-title {
  margin: 0;
  padding-inline: calc(12rem / 14);
  color: var(--haya-text);
  font-size: calc(15rem / 14);
  font-weight: 700;
}

/* Sidebar card. */
.haya-product-panel {
  padding-inline: calc(12rem / 14);
  border: 1px solid color-mix(in srgb, var(--haya-border) 40%, transparent);
  border-radius: calc(12rem / 14);
  background: var(--haya-surface);
  box-shadow: 0 1px 1px rgb(0 0 0 / 0.06), 0 4px 12px -2px rgb(0 0 0 / 0.04);
}

.haya-product-panel__header {
  display: flex;
  align-items: center;
  gap: calc(10rem / 14);
  min-block-size: calc(48rem / 14);
  padding-inline: calc(4rem / 14);
  border-block-end: 1px solid var(--haya-border);
}

.haya-product-panel__title {
  display: flex;
  align-items: center;
  gap: calc(4rem / 14);
  margin: 0;
  color: var(--haya-text-muted);
  font-size: calc(14rem / 14);
  font-weight: 700;
  line-height: 1;
}

.haya-product-panel__icon {
  --haya-icon-size: calc(16rem / 14);
  inline-size: calc(16rem / 14);
  block-size: calc(16rem / 14);
  flex: none;
}

.haya-product-panel__actions {
  margin-inline-start: auto;
}

.haya-product-panel__body {
  display: flex;
  flex-direction: column;
  gap: calc(16rem / 14);
  padding-block: calc(16rem / 14);
}

.haya-product-link {
  display: inline-flex;
  align-items: center;
  gap: calc(2rem / 14);
  margin: 0;
  padding: calc(6rem / 14) 0;
  border: 0;
  background: none;
  color: var(--haya-brand);
  font: inherit;
  font-size: calc(13rem / 14);
  font-weight: 500;
  cursor: pointer;
}

.haya-product-link svg {
  inline-size: calc(18rem / 14);
  block-size: calc(18rem / 14);
}

.haya-product-link:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.haya-product-link:focus-visible {
  outline: 2px solid var(--haya-brand);
  outline-offset: 2px;
  border-radius: var(--haya-radius);
}

.haya-product-field {
  display: flex;
  flex-direction: column;
  gap: calc(8rem / 14);
  min-inline-size: 0;
}

.haya-product-field__label {
  display: flex;
  align-items: center;
  gap: calc(6rem / 14);
  padding-inline: calc(6rem / 14);
  color: var(--haya-text-muted);
  font-size: calc(14rem / 14);
  font-weight: 600;
}

.haya-product-switch {
  color: var(--haya-text-muted);
  font-size: calc(14rem / 14);
  font-weight: 500;
}

.haya-product-soon {
  display: inline-block;
  margin-inline-start: calc(6rem / 14);
  padding: 0 calc(6rem / 14);
  border-radius: 999px;
  background: var(--haya-surface-muted);
  color: var(--haya-text-muted);
  font-size: calc(11rem / 14);
  font-weight: 500;
  vertical-align: middle;
}

/* "More details" is the shared accordion, not a <details> of its own, so a
   panel opens the same way here as in the menu. Its header reads like one of
   the sidebar's sections: muted until hovered or open, same size and weight. */
.haya-product-more {
  border-block-start: 1px solid var(--haya-border);
  padding-block-start: calc(12rem / 14);
}

.haya-product-more .haya-accordion__trigger {
  color: var(--haya-text-muted);
  font-size: 0.875rem;
  font-weight: 600;
}

.haya-product-more .haya-accordion__trigger:hover,
.haya-product-more .haya-accordion__item--open > .haya-accordion__header .haya-accordion__trigger {
  color: var(--haya-text);
}

.haya-product-more .haya-accordion__content {
  display: flex;
  flex-direction: column;
  gap: calc(16rem / 14);
  padding-block: calc(4rem / 14) calc(12rem / 14);
}

/* Permalink: the storefront's base and the slug in one box. */
.haya-product-permalink {
  display: flex;
  align-items: center;
  gap: calc(4rem / 14);
  min-block-size: calc(42rem / 14);
  padding-inline: calc(8rem / 14);
  border: 1.5px solid var(--haya-border);
  border-radius: calc(8rem / 14);
  background: var(--haya-surface);
}

.haya-product-permalink:focus-within {
  border-color: var(--haya-brand);
}

.haya-product-permalink--invalid {
  border-color: var(--haya-danger);
}

.haya-product-permalink__segment {
  color: var(--haya-text-muted);
  font-size: calc(12rem / 14);
}

.haya-product-permalink__sep {
  color: var(--haya-text-muted);
}

.haya-product-permalink__input {
  flex: 1 1 auto;
  min-inline-size: 0;
  padding: calc(10rem / 14) 0;
  border: 0;
  outline: none;
  background: none;
  color: var(--haya-text);
  font: inherit;
  font-size: calc(12rem / 14);
}

/* Product type rows. */
.haya-product-types {
  display: flex;
  flex-direction: column;
  gap: calc(16rem / 14);
  margin: 0;
  padding: 0;
  border: 0;
}

.haya-product-type {
  display: flex;
  align-items: center;
  gap: calc(4rem / 14);
  cursor: pointer;
}

.haya-product-type__icon {
  --haya-icon-size: calc(24rem / 14);
  inline-size: calc(24rem / 14);
  block-size: calc(24rem / 14);
  flex: none;
  color: var(--haya-text-muted);
}

.haya-product-type__label {
  flex: 1 1 auto;
  color: var(--haya-text-muted);
  font-size: calc(14rem / 14);
  font-weight: 500;
}

.haya-product-type--selected .haya-product-type__label,
.haya-product-type--selected .haya-product-type__icon {
  color: var(--haya-brand);
  font-weight: 600;
}

.haya-product-type__radio {
  flex: none;
  inline-size: calc(24rem / 14);
  block-size: calc(24rem / 14);
  margin: 0;
  border: 1px solid var(--haya-border);
  border-radius: 999px;
  background: var(--haya-surface);
  appearance: none;
  cursor: pointer;
}

.haya-product-type__radio:checked {
  border: calc(7rem / 14) solid var(--haya-brand);
}

.haya-product-type__radio:focus-visible {
  outline: 2px solid var(--haya-brand);
  outline-offset: 2px;
}

.haya-product-type--soon {
  cursor: not-allowed;
  opacity: 0.55;
}

.haya-product-type__radio:disabled {
  cursor: not-allowed;
}

.haya-product-type__soon {
  display: inline-block;
  margin-inline-start: calc(6rem / 14);
  padding: 0 calc(6rem / 14);
  border-radius: 999px;
  background: var(--haya-surface-muted);
  font-size: calc(11rem / 14);
}

/* The type a product was created as, on its own page: shown, not offered
   (L157-2). A plain row, so nothing about it invites a click. */
.haya-product-type--locked {
  cursor: default;
}

.haya-product-type__lock {
  --haya-icon-size: calc(16rem / 14);
  flex: none;
  inline-size: calc(16rem / 14);
  block-size: calc(16rem / 14);
  color: var(--haya-text-muted);
}

/* Under the types: in the create dialog, that the choice is final; on the
   product's page, that it was made. Toned as a caution, since it is read
   before a choice that cannot be taken back. The same caution as a named
   body (.haya-notice--warning) for any form whose save reaches further than
   it looks — Location's address that serves more than one usage. */
.haya-product-types__note,
.haya-notice--warning {
  display: flex;
  align-items: flex-start;
  gap: calc(6rem / 14);
  margin: calc(12rem / 14) 0 0;
  padding: calc(8rem / 14) calc(10rem / 14);
  border-radius: calc(8rem / 14);
  background: color-mix(in srgb, var(--haya-warning) 10%, transparent);
  color: var(--haya-text);
  font-size: calc(12rem / 14);
  line-height: 1.6;
}

.haya-product-types__note svg,
.haya-notice--warning svg {
  --haya-icon-size: calc(16rem / 14);
  flex: none;
  inline-size: calc(16rem / 14);
  block-size: calc(16rem / 14);
  margin-block-start: 0.15em;
  color: var(--haya-warning);
}

.haya-product-inline-form {
  display: flex;
  flex-direction: column;
  gap: calc(8rem / 14);
  padding: calc(12rem / 14);
  border-radius: calc(8rem / 14);
  background: var(--haya-surface-muted);
}

/* Category tree. */
.haya-product-tree {
  display: flex;
  flex-direction: column;
  max-block-size: calc(251rem / 14);
  overflow-y: auto;
  padding: calc(8rem / 14) calc(8rem / 14) calc(8rem / 14) calc(12rem / 14);
  border: 1.5px solid var(--haya-border);
  border-radius: calc(8rem / 14);
}

/* A required list with nothing chosen (L164), as a field's box in error. */
.haya-product-tree--invalid {
  border-color: var(--haya-danger);
}

.haya-product-tree__row {
  display: flex;
  align-items: center;
  gap: calc(6rem / 14);
  padding-block: calc(4rem / 14);
  padding-inline-start: calc(var(--haya-tree-depth, 0) * 24rem / 14);
  color: var(--haya-text);
  font-size: calc(14rem / 14);
  font-weight: 500;
  cursor: pointer;
}

.haya-product-tree__row--context {
  color: var(--haya-text-muted);
}

/* The fallback category (L177): read-only, ticked while nothing else is, and
   set off from the tree it heads, since it is not one of its branches. */
.haya-product-tree__row--fallback {
  margin-block-end: calc(4rem / 14);
  padding-block-end: calc(8rem / 14);
  border-block-end: 1px solid var(--haya-border);
  cursor: default;
}

.haya-product-tree__empty {
  margin: 0;
  padding: calc(8rem / 14);
  font-size: calc(13rem / 14);
}

.haya-product-check {
  flex: none;
  inline-size: calc(16rem / 14);
  block-size: calc(16rem / 14);
  margin: calc(4rem / 14);
  accent-color: var(--haya-brand);
  cursor: pointer;
}

/* Gallery. */
.haya-product-gallery__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(8rem / 14);
  min-block-size: calc(160rem / 14);
  margin: 0;
  border: 1.5px dashed var(--haya-border);
  border-radius: calc(8rem / 14);
  background: var(--haya-surface-muted);
  color: var(--haya-text-muted);
  font: inherit;
  cursor: pointer;
}

.haya-product-gallery__empty:disabled {
  cursor: default;
}

.haya-product-gallery__empty-icon {
  --haya-icon-size: calc(32rem / 14);
}

.haya-product-gallery__primary {
  position: relative;
  display: grid;
  place-items: center;
  block-size: calc(218rem / 14);
  margin: 0;
  overflow: hidden;
  border-radius: calc(8rem / 14);
  background: var(--haya-surface-muted);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--haya-brand) 30%, transparent);
}

.haya-product-gallery__primary img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.haya-product-gallery__badge {
  position: absolute;
  inset-block-start: calc(8rem / 14);
  inset-inline-end: calc(8rem / 14);
  padding: calc(4rem / 14);
  border-radius: calc(4rem / 14);
  background: var(--haya-brand);
  color: var(--haya-brand-contrast);
  font-size: calc(12rem / 14);
  font-weight: 500;
}

.haya-product-gallery__missing {
  inline-size: calc(32rem / 14);
  block-size: calc(32rem / 14);
  color: var(--haya-text-muted);
}

.haya-product-gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(8rem / 14);
  max-block-size: calc(251rem / 14);
  overflow-y: auto;
  padding: calc(8rem / 14);
  border-radius: calc(8rem / 14);
  background: var(--haya-surface-muted);
}

.haya-product-gallery__tile {
  position: relative;
  display: grid;
  place-items: center;
  block-size: calc(115rem / 14);
  overflow: hidden;
  border: 1px solid var(--haya-border);
  border-radius: calc(8rem / 14);
  background: var(--haya-surface);
}

.haya-product-gallery__tile--primary {
  border-color: var(--haya-brand);
}

.haya-product-gallery__tile img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

.haya-product-gallery__missing-name {
  padding: calc(6rem / 14);
  color: var(--haya-text-muted);
  font-size: calc(12rem / 14);
  overflow-wrap: anywhere;
}

.haya-product-gallery__tools {
  position: absolute;
  inset: calc(6rem / 14) calc(6rem / 14) auto;
  display: flex;
  justify-content: space-between;
  gap: calc(4rem / 14);
  opacity: 0;
  transition: opacity 120ms ease;
}

.haya-product-gallery__tile:hover .haya-product-gallery__tools,
.haya-product-gallery__tile:focus-within .haya-product-gallery__tools {
  opacity: 1;
}

.haya-product-gallery__tool {
  display: grid;
  place-items: center;
  inline-size: calc(28rem / 14);
  block-size: calc(28rem / 14);
  margin: 0;
  padding: 0;
  border: 1px solid var(--haya-border);
  border-radius: calc(8rem / 14);
  background: color-mix(in srgb, var(--haya-surface) 90%, transparent);
  color: var(--haya-text-muted);
  cursor: pointer;
}

.haya-product-gallery__tool svg {
  --haya-icon-size: calc(18rem / 14);
  inline-size: calc(18rem / 14);
  block-size: calc(18rem / 14);
}

.haya-product-gallery__tool:focus-visible {
  outline: 2px solid var(--haya-brand);
}

.haya-product-gallery__tool--on {
  color: var(--haya-warning);
}

.haya-product-gallery__tool--danger:hover {
  color: var(--haya-danger);
}

/* Tags. */
.haya-product-tags {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(10rem / 14);
}

.haya-product-tags__suggestions {
  position: absolute;
  inset: calc(46rem / 14) 0 auto;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: calc(6rem / 14);
  list-style: none;
  border: 1.5px solid var(--haya-border);
  border-radius: calc(8rem / 14);
  background: var(--haya-surface);
  box-shadow: 0 12px 32px -12px rgb(0 0 0 / 0.2);
}

.haya-product-tags__suggestion {
  display: flex;
  align-items: center;
  gap: calc(4rem / 14);
  inline-size: 100%;
  margin: 0;
  padding: calc(8rem / 14) calc(10rem / 14);
  border: 0;
  border-radius: calc(6rem / 14);
  background: none;
  color: var(--haya-text);
  font: inherit;
  font-size: calc(14rem / 14);
  text-align: start;
  cursor: pointer;
}

.haya-product-tags__suggestion:hover,
.haya-product-tags__suggestion:focus-visible {
  outline: none;
  background: var(--haya-surface-muted);
}

.haya-product-tags__suggestion--create {
  color: var(--haya-brand);
  font-weight: 600;
}

.haya-product-tags__suggestion svg {
  inline-size: calc(16rem / 14);
  block-size: calc(16rem / 14);
}

.haya-product-tags__chips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(6rem / 14);
  margin: 0;
  padding: 0;
  list-style: none;
}

.haya-product-tags__chip {
  display: inline-flex;
  align-items: center;
  gap: calc(4rem / 14);
  padding: calc(4rem / 14) calc(10rem / 14);
  border: 1px solid color-mix(in srgb, var(--haya-brand) 40%, var(--haya-border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--haya-brand) 8%, transparent);
  color: var(--haya-brand);
  font-size: calc(13rem / 14);
  font-weight: 500;
}

.haya-product-tags__remove {
  display: grid;
  place-items: center;
  inline-size: calc(18rem / 14);
  block-size: calc(18rem / 14);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: inherit;
  cursor: pointer;
}

.haya-product-tags__remove svg {
  inline-size: calc(12rem / 14);
  block-size: calc(12rem / 14);
}

/* The name and the short summary: borderless inputs in light cards. */
.haya-product-title {
  display: flex;
  align-items: center;
  gap: calc(10rem / 14);
  padding: calc(10rem / 14) calc(12rem / 14);
  border: 1.5px solid color-mix(in srgb, var(--haya-border) 40%, transparent);
  border-radius: calc(8rem / 14);
  background: var(--haya-surface);
}

.haya-product-title:focus-within {
  border-color: color-mix(in srgb, var(--haya-brand) 45%, var(--haya-border));
}

.haya-product-title__input {
  flex: 1 1 auto;
  min-inline-size: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: none;
  color: var(--haya-text);
  font: inherit;
  font-size: calc(16rem / 14);
  font-weight: 600;
}

.haya-product-summary {
  padding: calc(16rem / 14);
  border: 1.5px solid color-mix(in srgb, var(--haya-border) 40%, transparent);
  border-radius: calc(8rem / 14);
  background: var(--haya-surface);
}

.haya-product-summary:focus-within {
  border-color: color-mix(in srgb, var(--haya-brand) 45%, var(--haya-border));
}

/* The name and the summary in error (L159): the card's own edge says so, as a
   field's box does. */
.haya-product-title--invalid,
.haya-product-title--invalid:focus-within,
.haya-product-summary--invalid,
.haya-product-summary--invalid:focus-within {
  border-color: var(--haya-danger);
}

.haya-product-summary__input {
  box-sizing: border-box;
  inline-size: 100%;
  min-block-size: calc(56rem / 14);
  padding: 0;
  border: 0;
  outline: none;
  background: none;
  color: var(--haya-text);
  font: inherit;
  font-size: calc(14rem / 14);
  line-height: calc(28rem / 14);
  resize: vertical;
}

/* Boxed tabs: the design's settings strip, each tab divided from the next and
   the chosen one filled. */
.haya-tabs--boxed {
  border: 1.5px solid color-mix(in srgb, var(--haya-border) 40%, transparent);
  border-radius: calc(8rem / 14);
}

.haya-tabs--boxed .haya-tabs__strip {
  gap: 0;
}

.haya-tabs--boxed .haya-tabs__tab {
  margin: 0;
  padding: calc(12rem / 14) calc(16rem / 14);
  border: 0;
  border-inline-end: 1px solid var(--haya-border);
  border-radius: 0;
  color: var(--haya-text-muted);
  font-size: calc(14rem / 14);
  font-weight: 600;
}

.haya-tabs--boxed .haya-tabs__tab--active {
  background: var(--haya-brand);
  color: var(--haya-brand-contrast);
}

.haya-tabs--boxed .haya-tabs__panel {
  padding: calc(24rem / 14) calc(16rem / 14);
}

/* A data table on a boxed tab: the panel already pads it, so the table's own
   24 around the toolbar and beside the rows would double it. 12 under the
   search, as the design has it. */
.haya-tabs--boxed .haya-tabs__panel .haya-table-toolbar {
  padding: 0 0 calc(12rem / 14);
}

.haya-tabs--boxed .haya-tabs__panel .haya-data-table__scroll {
  padding-inline: 0;
}

/* The values an attribute is offered in, as checkboxes that wrap. */
.haya-product-values {
  display: flex;
  flex-wrap: wrap;
  gap: calc(4rem / 14) calc(16rem / 14);
}

.haya-product-values__item {
  display: inline-flex;
  align-items: center;
  gap: calc(6rem / 14);
}

/* One per line when each is a whole combination ("Red · XL"), and scrolled
   rather than stretching the dialog past the screen. */
.haya-product-values--list {
  flex-direction: column;
  flex-wrap: nowrap;
  max-block-size: calc(360rem / 14);
  overflow-y: auto;
  padding-inline-start: calc(22rem / 14);
}

/* Shipping tab. */
.haya-product-shipping {
  display: flex;
  flex-direction: column;
  gap: calc(24rem / 14);
}

.haya-product-shipping__hint {
  margin: 0;
  padding-inline: calc(6rem / 14);
  font-size: calc(13rem / 14);
}

.haya-product-shipping__row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(16rem / 14);
  align-items: end;
}

.haya-product-shipping__row--weight {
  grid-template-columns: minmax(0, 1fr) minmax(0, calc(144rem / 14));
}

@media (max-width: 48rem) {
  .haya-product-shipping__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Search-engines tab. */
.haya-product-seo {
  display: flex;
  flex-direction: column;
  margin: calc(-24rem / 14) calc(-16rem / 14);
}

.haya-product-seo__body {
  display: flex;
  flex-direction: column;
  gap: calc(16rem / 14);
  padding: calc(24rem / 14) calc(16rem / 14);
}

.haya-product-seo__input {
  font-size: calc(16rem / 14);
}

.haya-product-seo__textarea {
  min-block-size: calc(120rem / 14);
  line-height: calc(24rem / 14);
}

.haya-seo-preview {
  display: flex;
  flex-direction: column;
  gap: calc(4rem / 14);
  padding: calc(12rem / 14) calc(24rem / 14);
  background: var(--haya-surface-muted);
}

.haya-seo-preview__chip {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: calc(4rem / 14);
  margin-block-end: calc(8rem / 14);
  padding: calc(6rem / 14) calc(12rem / 14);
  border: 1px solid var(--haya-border);
  border-radius: 999px;
  background: var(--haya-surface);
  color: var(--haya-text-muted);
  font-size: calc(14rem / 14);
  font-weight: 500;
}

/* The chip is the dashboard's label, not part of the search result, so on a
   right-to-left page it keeps the page's side and reading order while the
   result under it stays left to right as Google draws it. */
html[dir="rtl"] .haya-seo-preview__chip {
  align-self: flex-end;
  direction: rtl;
}

.haya-seo-preview__chip-icon {
  --haya-icon-size: calc(18rem / 14);
  inline-size: calc(18rem / 14);
  block-size: calc(18rem / 14);
}

.haya-seo-preview__site {
  display: flex;
  align-items: center;
  gap: calc(10rem / 14);
}

.haya-seo-preview__favicon {
  display: grid;
  place-items: center;
  inline-size: calc(28rem / 14);
  block-size: calc(28rem / 14);
  border-radius: 999px;
  background: color-mix(in srgb, var(--haya-brand) 15%, var(--haya-surface));
  color: var(--haya-brand);
  font-weight: 700;
}

.haya-seo-preview__site-text {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
}

.haya-seo-preview__site-name {
  color: var(--haya-text-muted);
  font-size: calc(14rem / 14);
}

.haya-seo-preview__url {
  overflow: hidden;
  color: var(--haya-success);
  font-size: calc(12rem / 14);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.haya-seo-preview__title {
  margin: 0;
  color: var(--haya-brand);
  font-size: calc(20rem / 14);
  line-height: calc(28rem / 14);
}

.haya-seo-preview__description {
  margin: 0;
  color: var(--haya-text);
  font-size: calc(14rem / 14);
  line-height: calc(22rem / 14);
}

.haya-seo-checks {
  display: flex;
  flex-direction: column;
  gap: calc(6rem / 14);
  margin: 0;
  padding: calc(16rem / 14) calc(12rem / 14);
  list-style: none;
  border: 1px solid color-mix(in srgb, var(--haya-brand) 30%, transparent);
  border-radius: calc(12rem / 14);
  background: color-mix(in srgb, var(--haya-brand) 6%, var(--haya-surface));
}

.haya-seo-checks__item {
  display: flex;
  align-items: center;
  gap: calc(4rem / 14);
  font-size: calc(13rem / 14);
  font-weight: 500;
}

.haya-seo-checks__item--pass {
  color: var(--haya-brand);
}

.haya-seo-checks__item--fail {
  color: var(--haya-danger);
}

.haya-seo-checks__icon {
  inline-size: calc(18rem / 14);
  block-size: calc(18rem / 14);
  flex: none;
}

.haya-seo-title {
  display: flex;
  align-items: center;
  gap: calc(4rem / 14);
  min-block-size: calc(42rem / 14);
  padding: calc(6rem / 14) calc(12rem / 14);
  border: 1.5px solid var(--haya-border);
  border-radius: calc(8rem / 14);
  background: var(--haya-surface);
}

.haya-seo-title:focus-within {
  border-color: var(--haya-brand);
}

.haya-field--invalid .haya-seo-title,
.haya-field--invalid .haya-textarea {
  border-color: var(--haya-danger);
}

.haya-seo-title__input {
  flex: 1 1 auto;
  min-inline-size: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: none;
  color: var(--haya-text);
  font: inherit;
  font-size: calc(16rem / 14);
}

.haya-seo-title__sep {
  color: var(--haya-text);
}

.haya-seo-title__site {
  flex: none;
  padding: calc(6rem / 14) calc(12rem / 14);
  border: 1px solid var(--haya-border);
  border-radius: 999px;
  background: var(--haya-surface-muted);
  color: var(--haya-text-muted);
  font-size: calc(14rem / 14);
  font-weight: 500;
}

.haya-seo-meter {
  display: flex;
  flex-direction: column;
  gap: calc(4rem / 14);
  margin-block-start: calc(-8rem / 14);
}

.haya-seo-meter__track {
  position: relative;
  block-size: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--haya-border);
}

.haya-seo-meter__fill {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: var(--haya-seo-fill, 0%);
  border-radius: 999px;
  background: var(--haya-text-muted);
}

.haya-seo-meter__labels {
  display: flex;
  justify-content: space-between;
  font-size: calc(12rem / 14);
  font-weight: 700;
}

.haya-seo-meter__count {
  color: var(--haya-text-muted);
  font-variant-numeric: tabular-nums;
}

.haya-seo-meter--good .haya-seo-meter__fill { background: var(--haya-success); }
.haya-seo-meter--good .haya-seo-meter__verdict { color: var(--haya-success); }
.haya-seo-meter--tooshort .haya-seo-meter__fill { background: var(--haya-warning); }
.haya-seo-meter--tooshort .haya-seo-meter__verdict { color: var(--haya-warning); }
.haya-seo-meter--toolong .haya-seo-meter__fill { background: var(--haya-danger); }
.haya-seo-meter--toolong .haya-seo-meter__verdict { color: var(--haya-danger); }
.haya-seo-meter--empty .haya-seo-meter__verdict { color: var(--haya-text-muted); }

/* The save indicator in the page header. */
.haya-product-save {
  display: inline-flex;
  align-items: center;
  gap: calc(6rem / 14);
  color: var(--haya-text-muted);
  font-size: calc(13rem / 14);
}

.haya-product-save__icon {
  inline-size: calc(16rem / 14);
  block-size: calc(16rem / 14);
}

/* Beside a status, the indicator is a mark: the spinner matches the tick's size
   so the row does not shift when one becomes the other (L124). */
.haya-product-save__spinner {
  inline-size: calc(15rem / 14);
  block-size: calc(15rem / 14);
  border-width: 2px;
}

/* Unsaved is a pen in the warning tone: something is pending on the operator,
   not on the page (L138-1). */
.haya-product-save--unsaved {
  color: var(--haya-warning);
}

.haya-product-save--failed {
  color: var(--haya-danger);
}

.haya-product-new__intro {
  margin: 0 0 calc(12rem / 14);
}

/* "Skip to content": the page's first Tab stop, out of sight until it has
   focus, so a keyboard user does not walk the whole menu to reach the screen. */
.haya-skip-link {
  position: fixed;
  inset-inline-start: 1rem;
  inset-block-start: 0.75rem;
  z-index: 100;
  padding: 0.5rem 0.875rem;
  border-radius: var(--haya-radius);
  background: var(--haya-brand);
  color: var(--haya-brand-contrast);
  font-weight: 600;
  translate: 0 calc(-100% - 1.5rem);
  transition: translate 120ms ease;
}

.haya-skip-link:focus,
.haya-skip-link:focus-visible {
  translate: 0 0;
  text-decoration: none;
}

/* The skip link's target takes focus from code only; it needs no ring. */
.haya-shell__main:focus {
  outline: none;
}

/* ---------------------------------------------------- row actions menu - */

/* HayaRowActions: at most two icons. A third action or more goes behind a
   "more" button whose menu is drawn in the select list's language. */
.haya-row-actions {
  display: flex;
  align-items: center;
  gap: calc(12rem / 14);
}

.haya-row-actions__more {
  anchor-name: var(--haya-row-actions-anchor);
}

/* The tooltip would sit over the menu it names. */
.haya-row-actions:has(.haya-row-actions__menu:popover-open) .haya-row-action__tooltip {
  visibility: hidden;
}

/* Fixed, not absolute, as every popover in this file is (L149-2). A popover
   renders in the top layer but an absolutely positioned one still takes its
   containing block from the nearest positioned ancestor, so anchor positioning
   resolved in that ancestor's coordinates: inside a modal dialog on a scrolled
   page the menu landed a whole scroll offset above the viewport - open,
   painted, and off screen. Fixed makes the containing block the viewport,
   which is the space the anchor's own rect is measured in. */
.haya-row-actions__menu {
  position: fixed;
  inset: auto;
  position-anchor: var(--haya-row-actions-anchor);
  /* Under the button, its end edge on the button's, so a menu opened from the
     actions column at the table's end grows back into the table. */
  position-area: block-end span-inline-start;
  position-try-fallbacks:
    block-start span-inline-start,
    block-end span-inline-end,
    block-start span-inline-end;
  box-sizing: border-box;
  margin: calc(6rem / 14) 0;
  min-inline-size: calc(160rem / 14);
  max-inline-size: min(calc(280rem / 14), calc(100vw - 2rem));
  padding: calc(6rem / 14);
  border: 1.5px solid var(--haya-border);
  border-radius: calc(8rem / 14);
  background: var(--haya-surface);
  color: var(--haya-text);
  box-shadow: 0 12px 32px -12px rgb(0 0 0 / 0.2);
  font-size: calc(13rem / 14);
}

.haya-row-actions__menu:popover-open {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.haya-row-actions__item {
  display: flex;
  align-items: center;
  gap: calc(10rem / 14);
  inline-size: 100%;
  margin: 0;
  padding: calc(8rem / 14) calc(10rem / 14);
  border: 0;
  border-radius: calc(6rem / 14);
  background: none;
  color: var(--haya-text);
  font: inherit;
  font-size: calc(13rem / 14);
  font-weight: 480;
  line-height: calc(18rem / 14);
  text-align: start;
  white-space: nowrap;
  cursor: pointer;
}

.haya-row-actions__item:hover:not(:disabled),
.haya-row-actions__item:focus-visible {
  outline: none;
  background: var(--haya-surface-muted);
}

.haya-row-actions__item:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.haya-row-actions__item-icon {
  inline-size: calc(18rem / 14);
  block-size: calc(18rem / 14);
  flex: none;
  color: var(--haya-text-muted);
}

.haya-row-actions__item--danger,
.haya-row-actions__item--danger .haya-row-actions__item-icon {
  color: var(--haya-danger);
}

@supports not (anchor-name: --a) {
  .haya-row-actions__menu {
    position: fixed;
    inset: 4rem auto auto 50%;
    translate: -50% 0;
  }
}

/* The blur of the record's actions bar (L155), with more of the surface in it:
   glass, and white in the light scheme. The colour comes from the surface
   token, so the Appearance screen keeps the palette and one rule serves both
   schemes. */
/* A value's square (L163): the colour a colour square draws, or the image an
   image square draws, at the size of a swatch. The colour is the value's own
   data, set inline as --haya-value-color, not a palette colour. */
.haya-value-square {
  display: inline-block;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  flex: none;
  border-radius: calc(6rem / 14);
  border: 1px solid var(--haya-border);
  background: var(--haya-value-color, transparent);
  vertical-align: middle;
}

.haya-value-square--image {
  object-fit: cover;
  background: var(--haya-surface-muted);
}

/* Keep the three colour-value controls compact, then wrap them as the dialog narrows. */
.haya-attribute-value-entry {
  margin-block-start: 1rem;
}

.haya-attribute-value-entry--color {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 0.75rem 1rem;
  max-inline-size: 43rem;
  align-items: start;
}

.haya-attribute-value-entry--color > .haya-field {
  min-inline-size: 0;
  margin-block-end: 0;
}

.haya-attribute-value-entry--color .haya-row {
  min-inline-size: 0;
  flex-wrap: wrap;
}

.haya-attribute-value-entry--color .haya-row > .haya-input:not(.haya-input--color) {
  min-inline-size: 0;
  flex: 1;
}

/* Glass (L155, L161): nine tenths of the surface over a 6px blur - white
   enough to read as a card, with the page only a hint behind it - edged by
   light rather than a border: a hairline ring outside, and inside a bright top
   and top-left rim fading to a faint bottom-right one, as a pane of glass
   catches the light. The rim is the surface colour, so white glass in the
   light scheme and no white glow on a dark one. */
.haya-dialog {
  background: color-mix(in srgb, var(--haya-surface) 90%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 0;
  border-radius: var(--haya-radius-lg);
  inline-size: min(32rem, 100%);
  max-block-size: 85vh;
  /* A column that never scrolls itself (L155-2): the title stays at the top
     and the actions at the foot, and only the body between them scrolls, so a
     long form never carries its own buttons out of sight. The card is as tall
     as its content up to the cap, as it always was. */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgb(0 0 0 / 0.12),
    0 24px 48px -24px rgb(0 0 0 / 0.5),
    inset 0 12px 16px -4px color-mix(in srgb, var(--haya-surface) 42%, transparent),
    inset 1px 1px 0 0 color-mix(in srgb, var(--haya-surface) 64%, transparent),
    inset -1px -1px 0 0 color-mix(in srgb, var(--haya-surface) 12%, transparent);
}

.haya-dialog__header {
  flex: none;
  padding: 1.125rem 1.25rem;
  border-block-end: 1px solid var(--haya-border);
  font-weight: 650;
}

/* Popovers opened from inside - select, date, row menu, field help - are fixed
   in the top layer (L149-2), so this scroll box does not clip them. */
.haya-dialog__body {
  flex: 1 1 auto;
  min-block-size: 0;
  overflow-y: auto;
  padding: 1.25rem;
  font-size: 0.875rem;
  line-height: 1.65;
}

.haya-dialog__footer {
  flex: none;
  padding: 1rem 1.25rem;
  border-block-start: 1px solid var(--haya-border);
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

@keyframes haya-fade-in {
  from {
    opacity: 0;
  }
}

/* ----------------------------------------------------------- sign-in - */

.haya-auth {
  min-block-size: 100vh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: var(--haya-canvas);
}

.haya-auth__card {
  inline-size: min(24rem, 100%);
  background: var(--haya-surface);
  border: 1px solid var(--haya-border);
  border-radius: var(--haya-radius-lg);
  padding: 2rem;
  box-shadow: 0 24px 48px -32px rgb(0 0 0 / 0.45);
}

.haya-auth__brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-block-end: 1.5rem;
}

.haya-auth__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.haya-auth__subtitle {
  margin: 0.375rem 0 1.5rem;
  color: var(--haya-text-muted);
  font-size: 0.875rem;
  line-height: 1.6;
}

.haya-auth__message {
  padding: 0.625rem 0.875rem;
  border-radius: var(--haya-radius);
  font-size: 0.8125rem;
  line-height: 1.5;
  margin-block-end: 1rem;
  background: var(--haya-surface-muted);
  color: var(--haya-text-muted);
}

.haya-auth__message--error {
  background: color-mix(in srgb, var(--haya-danger) 12%, transparent);
  color: var(--haya-danger);
}

.haya-auth__submit {
  inline-size: 100%;
  margin-block-start: 0.5rem;
  padding-block: 0.625rem;
}

/* ------------------------------------------------------------ utilities - */

.haya-muted {
  color: var(--haya-text-muted);
}

.haya-mono {
  font-family: var(--haya-font-family-mono);
  font-size: 0.8125rem;
}

.haya-product-attribute-badge {
  margin-inline-start: calc(8rem / 14);
}

/* Combination selection: focus and selection remain visually independent. */
.haya-combination-picker__toolbar,
.haya-combination-picker__commands {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.haya-combination-picker__toolbar { justify-content: space-between; gap: 8px; }
.haya-combination-picker__count {
  padding: 6px 12px;
  border-radius: 24px;
  background: var(--haya-surface-muted);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.haya-combination-picker[data-multiple="true"] .haya-combination-picker__count {
  background: color-mix(in srgb, var(--haya-brand) 12%, var(--haya-surface));
  color: var(--haya-brand);
}
.haya-combination-picker__hint,
.haya-combination-picker__help { color: var(--haya-text-muted); font-size: 12px; line-height: 1.9; }
.haya-combination-picker__hint { margin: 12px 0; }
.haya-combination-picker__viewport {
  position: relative;
  max-height: min(44vh, 360px);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 6px;
  border: 1px solid var(--haya-border);
  border-radius: 14px;
  background: var(--haya-surface-muted);
  user-select: none;
  touch-action: pan-y;
}
.haya-combination-picker__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 6px;
}
.haya-combination-picker__card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 6px;
  border: 1px solid var(--haya-border);
  border-radius: 8px;
  background: var(--haya-surface);
  color: var(--haya-text);
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.haya-combination-picker__card:hover {
  border-color: color-mix(in srgb, var(--haya-brand) 55%, var(--haya-border));
  background: color-mix(in srgb, var(--haya-brand) 4%, var(--haya-surface));
}
.haya-combination-picker__card[aria-selected="true"] {
  background: color-mix(in srgb, var(--haya-brand) 11%, var(--haya-surface));
  border-color: var(--haya-brand);
  box-shadow: inset 0 0 0 1px var(--haya-brand);
}
.haya-combination-picker__card:focus-visible {
  outline: 2px solid var(--haya-text);
  outline-offset: 3px;
}
.haya-combination-picker__label { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; line-height: 1.8; }
.haya-combination-picker__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 20px;
  height: 20px;
  border: 1px solid var(--haya-border);
  border-radius: 50%;
  color: var(--haya-text-muted);
  background: var(--haya-surface-muted);
}
.haya-combination-picker__check svg { width: 14px; height: 14px; opacity: 0; }
.haya-combination-picker__card:hover .haya-combination-picker__check svg { opacity: .35; }
.haya-combination-picker__card[aria-selected="true"] .haya-combination-picker__check {
  color: var(--haya-brand-contrast);
  background: var(--haya-brand);
  border-color: var(--haya-brand);
}
.haya-combination-picker__card[aria-selected="true"] .haya-combination-picker__check svg { opacity: 1; }
.haya-combination-picker__marquee {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  border: 1px solid var(--haya-brand);
  background: color-mix(in srgb, var(--haya-brand) 14%, transparent);
  border-radius: 4px;
}
.haya-combination-picker__help { margin-top: 12px; }
.haya-combination-picker__help summary { cursor: pointer; width: fit-content; }
.haya-combination-picker__help p { margin: 8px 0 0; }
.haya-combination-picker[aria-disabled="true"] { opacity: .6; }
.haya-combination-picker[aria-disabled="true"] .haya-combination-picker__card { cursor: wait; }
@media (prefers-reduced-motion: reduce) {
  .haya-combination-picker__card { transition: none; }
}

.haya-product-default-variant {
  display: inline-flex;
  vertical-align: middle;
  margin-inline-start: calc(8rem / 14);
  color: var(--haya-success);
}

.haya-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.haya-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.haya-spacer {
  flex: 1;
}

.haya-sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------------------ responsive - */

.haya-shell__menu-button {
  display: none;
}

/* Never shown at desktop width, so a viewport that grows while the drawer is
   open cannot leave an invisible click-blocker over the page. */
.haya-shell__scrim {
  display: none;
}

@media (max-width: 60rem) {
  .haya-shell__scrim {
    display: block;
    position: fixed;
    inset: 0;
    /* Below the drawer, above everything else the page draws. */
    z-index: 75;
    padding: 0;
    border: 0;
    background: rgb(0 0 0 / 0.45);
    cursor: pointer;
    animation: haya-fade-in 120ms ease-out;
  }

  .haya-shell {
    grid-template-columns: 1fr;
    grid-template-areas:
      "topbar"
      "main";
  }

  .haya-shell__sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: 16rem;
    z-index: 80;
    transform: translateX(-100%);
    transition: transform 200ms ease;
  }

  [dir="rtl"] .haya-shell__sidebar {
    transform: translateX(100%);
  }

  .haya-shell--menu-open .haya-shell__sidebar {
    transform: none;
  }

  .haya-shell__menu-button {
    display: inline-flex;
  }

  .haya-shell__main {
    padding: 1rem;
  }

  /* The bar already spans and centres on the viewport; here it only gives up a
     little less of the width, because there is less of it to give. */
  .haya-page-actions {
    max-inline-size: calc(100% - 2rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/*
 * Circuit-loss panel (HayaCircuitError).
 *
 * Blazor owns the visibility of #blazor-error-ui: it stays hidden until the
 * connection is gone for good, at which point Blazor writes an inline
 * `display: block` onto the element. So this file sets the hidden state and
 * nothing else about display -- a `display: flex` here would win over the
 * base rule and leave the panel on screen permanently, and one written for
 * the shown state would be overridden by Blazor's inline style anyway. The
 * children lay out inline instead, which needs no display mode of its own.
 *
 * Fixed to the bottom rather than placed in the layout: by the time it shows,
 * the page underneath is dead, and it has to be findable wherever the visitor
 * happens to be scrolled.
 */
.haya-circuit-error {
  display: none;
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 1000;
  padding: 0.85rem 1.15rem;
  background: var(--haya-danger);
  color: var(--haya-brand-contrast);
  border-block-start: 1px solid var(--haya-border);
  font-family: var(--haya-font-family);
  line-height: 1.6;
}

.haya-circuit-error__title {
  font-weight: 600;
  margin-inline-end: 0.5rem;
}

.haya-circuit-error__action {
  color: inherit;
  text-decoration: underline;
  white-space: nowrap;
  margin-inline-start: 0.5rem;
}

/* ------------------------------------------------------ product gateways - */

/* The payment tab (L117): the shop's gateways down a narrow list at the start
   (the right, in a right-to-left interface) and one gateway's panel beside it.
   A gateway uses its default settings until it is customized, so the panel leads
   with that, and its fields only appear once the operator asks for them. */
/* One configuration area, not boxes in a box (L122): the list is a plain column
   whose only mark is the rule between it and the panel, and the panel takes every
   pixel the list does not. They stack once the panel would fall below a readable
   width - the tab sits in the product page's main column, whose width follows the
   window rather than the viewport breakpoints - and the rule then runs under the
   list instead. 30.25rem is the list's basis and the panel's added together. */
.haya-gateway-config {
  container: haya-gateways / inline-size;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.haya-gateway-list {
  display: flex;
  flex: 1 1 calc(184rem / 14);
  flex-direction: column;
  gap: calc(2rem / 14);
  margin: 0;
  padding: 0;
  list-style: none;
  border-inline-end: 1px solid var(--haya-border);
}

.haya-gateway-list__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(8rem / 14);
  inline-size: 100%;
  min-block-size: calc(36rem / 14);
  padding: calc(6rem / 14) calc(10rem / 14);
  border: 0;
  border-start-start-radius: calc(8rem / 14);
  border-end-start-radius: calc(8rem / 14);
  background: none;
  color: var(--haya-text);
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}

.haya-gateway-list__item:hover {
  background: var(--haya-surface-muted);
}

.haya-gateway-list__item:focus-visible {
  outline: 2px solid var(--haya-brand);
  outline-offset: -2px;
}

/* Selected: a tint, and a bar laid over the rule it sits against - not a card. */
.haya-gateway-list__item--active,
.haya-gateway-list__item--active:hover {
  background: color-mix(in srgb, var(--haya-brand) 8%, transparent);
  color: var(--haya-brand);
}

.haya-gateway-list__item--active::after {
  content: "";
  position: absolute;
  inset-block: calc(6rem / 14);
  inset-inline-end: -1px;
  inline-size: 2px;
  border-radius: 999px;
  background: var(--haya-brand);
}

@container haya-gateways (max-width: 30.25rem) {
  .haya-gateway-list {
    padding-block-end: calc(8rem / 14);
    border-inline-end: 0;
    border-block-end: 1px solid var(--haya-border);
  }

  .haya-gateway-list__item {
    border-radius: calc(8rem / 14);
  }

  .haya-gateway-list__item--active::after {
    display: none;
  }

  .haya-gateway-panel {
    padding-block-start: calc(12rem / 14);
    padding-inline-start: 0;
  }
}

.haya-gateway-list__name {
  flex: 1;
  min-inline-size: 0;
  overflow: hidden;
  font-size: calc(13rem / 14);
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.haya-gateway-list__item--active .haya-gateway-list__name {
  font-weight: 600;
}

/* A gateway's state as an icon (L122): customized and off each have one, the
   default has none to scan past. The words are the icon's tooltip and its name
   for a screen reader; the panel's header spells them out beside it. */
.haya-gateway-status {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: calc(4rem / 14);
  color: var(--haya-text-muted);
  font-size: calc(12rem / 14);
  font-weight: 500;
}

.haya-gateway-status__icon {
  --haya-icon-size: calc(16rem / 14);
  inline-size: calc(16rem / 14);
  block-size: calc(16rem / 14);
}

.haya-gateway-status--customized {
  color: var(--haya-brand);
}

.haya-gateway-status--off {
  color: var(--haya-warning);
}

.haya-gateway-panel {
  display: flex;
  flex: 999 1 calc(240rem / 14);
  flex-direction: column;
  gap: calc(12rem / 14);
  min-inline-size: 0;
  padding-inline-start: calc(16rem / 14);
}

/* One line opens the panel: the gateway's name, where it stands for this
   product, and the one action that changes that. A rule under it, not a box
   around it — it is the panel's heading, not a note inside the panel. */
.haya-gateway-panel__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: calc(8rem / 14) calc(12rem / 14);
  padding-block-end: calc(10rem / 14);
  border-block-end: 1px solid var(--haya-border);
}

.haya-gateway-panel__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(4rem / 14) calc(10rem / 14);
  min-inline-size: 0;
}

.haya-gateway-panel__title {
  margin: 0;
  font-size: calc(15rem / 14);
  font-weight: 600;
  line-height: 1.4;
}

/* Keyed by gateway, so selecting another swaps the body in one step. */
.haya-gateway-panel__body {
  display: flex;
  flex-direction: column;
  gap: calc(12rem / 14);
}

@media (prefers-reduced-motion: no-preference) {
  .haya-gateway-panel__body {
    animation: haya-gateway-panel-in 140ms ease-out;
  }
}

@keyframes haya-gateway-panel-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* The defaults a gateway applies, read-only, as label and value pairs. This is
   the whole of the panel while the product has no settings of its own: the
   header already said so, and a note saying it again was what stood between the
   operator and these numbers. */
.haya-gateway-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: calc(6rem / 14) calc(16rem / 14);
  margin: 0;
  font-size: calc(13rem / 14);
  line-height: 1.5;
}

.haya-gateway-summary > div {
  display: contents;
}

.haya-gateway-summary dt {
  color: var(--haya-text-muted);
}

.haya-gateway-summary dd {
  margin: 0;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: end;
}

.haya-gateway-fields {
  display: flex;
  flex-direction: column;
  gap: calc(12rem / 14);
}

.haya-gateway-fields .haya-field {
  margin-block-end: 0;
}

.haya-gateway-settings__fee {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: calc(12rem / 14);
}

@media (max-width: 40rem) {
  .haya-gateway-settings__fee {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ----------------------------------------------------------- split page - */

/* A wide main region beside a narrow column of grouped cards, for editors
   whose subject has a body and a set of settings about it.

   Main comes first in source. A narrow viewport and a screen reader then both
   reach the thing being edited before the settings about it, which is the
   order someone reading the page wants; a sidebar-first source order gives
   them five cards of options before the title. */
.haya-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  align-items: start;
  gap: 1rem;
}

/* One column below this width. Not a media query per element: the two regions
   have to fold together or not at all. */
@media (max-width: 60rem) {
  .haya-split {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ----------------------------------------------------------- card icon - */

.haya-card__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.haya-card__icon {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
  color: var(--haya-text-muted);
}

/* --------------------------------------------------------------- tabs - */

.haya-tabs__strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  border-block-end: 1px solid var(--haya-border);
}

.haya-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid transparent;
  /* Rounded at the top only, so the active tab reads as continuous with the
     panel below it. Logical corners, so the shape flips with the direction. */
  border-start-start-radius: var(--haya-radius);
  border-start-end-radius: var(--haya-radius);
  background: none;
  color: var(--haya-text-muted);
  font: inherit;
  cursor: pointer;
  /* Pulled down onto the strip's own border so the active tab can cover it. */
  margin-block-end: -1px;
}

.haya-tabs__tab:hover:not(.haya-tabs__tab--active) {
  color: var(--haya-text);
  background: var(--haya-surface-muted);
}

.haya-tabs__tab--active {
  color: var(--haya-brand-contrast);
  background: var(--haya-brand);
  border-color: var(--haya-brand);
}

.haya-tabs__icon {
  --haya-icon-size: 1.125rem;
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
}

.haya-tabs__panel {
  padding-block-start: 1rem;
}

/* -------------------------------------------------------------- scopes - */

/* The scope strip above a listing: which slice of the set the table is showing.
   Modelled on the boxed tabs so it reads as that same idiom, but it is a group
   of pressed buttons rather than a tablist, because there is no panel behind it
   — the table below is one table whichever scope is on. A set takes only the
   width its scopes need, so the strip does not read as an empty bar. */
/* A set scrolls rather than wraps when the screen runs out. A segmented control
   on two lines is not a segmented control any more — the shape is what says
   these are one closed set of choices — and the scopes are few and short enough
   that sliding to the last one costs nothing. No visible scrollbar across a
   strip this shallow; the scopes running to the edge are what says there is
   more. */
.haya-scopes {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 1rem;
  max-inline-size: 100%;
  margin-block-end: 1rem;
}

/* A set apart — the archive, the bin — goes to the far end, and the gap between
   it and the rest is what says it is not a narrower view of the same set. */
.haya-scopes--split {
  justify-content: space-between;
}

.haya-scopes__set {
  display: flex;
  flex-wrap: nowrap;
  min-inline-size: 0;
  inline-size: fit-content;
  border: 1.5px solid color-mix(in srgb, var(--haya-border) 40%, transparent);
  border-radius: calc(8rem / 14);
  background: var(--haya-surface);
  overflow-x: auto;
  scrollbar-width: none;
}

.haya-scopes__set::-webkit-scrollbar {
  display: none;
}

/* Never squeezed: when the screen runs out it is the shelf's set that scrolls,
   so the one apart stays whole and in view. */
.haya-scopes__set--apart {
  flex: none;
}

.haya-scopes__scope {
  /* Never squeezed: the strip scrolls instead, so a label keeps its own width
     and never breaks across two lines inside its segment. */
  flex: none;
  white-space: nowrap;
  padding: calc(10rem / 14) calc(18rem / 14);
  border: 0;
  border-inline-end: 1px solid var(--haya-border);
  background: none;
  color: var(--haya-text-muted);
  font: inherit;
  font-size: calc(14rem / 14);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}

.haya-scopes__scope:last-child {
  border-inline-end: 0;
}

.haya-scopes__scope:hover:not(.haya-scopes__scope--active):not(:disabled) {
  background: var(--haya-surface-muted);
  color: var(--haya-text);
}

.haya-scopes__scope:focus-visible {
  outline: 2px solid var(--haya-brand);
  outline-offset: -2px;
}

.haya-scopes__scope--active {
  background: var(--haya-brand);
  color: var(--haya-brand-contrast);
}

.haya-scopes__scope:disabled {
  cursor: default;
  opacity: 0.6;
}

/* --------------------------------------------------------- choice list - */

/* Rows of radio or checkbox, each row a click target. Distinct from
   .haya-choice, which is one stacked block with a description under it. */
.haya-choice-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.haya-choice-list__item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  border-radius: var(--haya-radius);
  cursor: pointer;
}

.haya-choice-list__item:hover {
  background: var(--haya-surface-muted);
}

.haya-choice-list__item--selected {
  background: color-mix(in srgb, var(--haya-brand) 10%, transparent);
  color: var(--haya-brand);
}

/* The label takes the slack so any trailing icon is pushed to the far end. */
.haya-choice-list__label {
  flex: 1 1 auto;
  min-width: 0;
}

.haya-choice-list__icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  color: var(--haya-text-muted);
}

.haya-choice-list__item--selected .haya-choice-list__icon {
  color: inherit;
}

/* --------------------------------------------------------------- chips - */

/* A short closed set shown inline instead of folded into a select — worth the
   width only when seeing every option at once is the point. */
.haya-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.haya-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--haya-border);
  border-radius: 999px;
  background: var(--haya-surface);
  color: var(--haya-text-muted);
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
}

.haya-chip:hover:not(:disabled) {
  border-color: var(--haya-brand);
  color: var(--haya-text);
}

.haya-chip--selected {
  border-color: var(--haya-brand);
  background: color-mix(in srgb, var(--haya-brand) 12%, transparent);
  color: var(--haya-brand);
}

.haya-chip:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* ---------------------------------------------------------- checkbox - */

/* The CMS listings' checkbox: a 16px drawn box in a 24px hit area, over a real
   input that keeps the keyboard and assistive technology. Drawn rather than a
   styled native box because the partial state has to be reachable from markup:
   indeterminate is a DOM property, not an attribute, so a server-rendered
   checkbox cannot set it. The classes carry checked and partial instead. */
.haya-checkbox {
  position: relative;
  display: inline-grid;
  place-items: center;
  inline-size: calc(24rem / 14);
  block-size: calc(24rem / 14);
  flex: none;
  cursor: pointer;
  vertical-align: middle;
}

/* Covers the hit area: invisible, still focusable, still the thing clicked. */
.haya-checkbox__input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: inherit;
}

.haya-checkbox__box {
  display: grid;
  place-items: center;
  inline-size: calc(16rem / 14);
  block-size: calc(16rem / 14);
  border-radius: calc(4rem / 14);
  background: var(--haya-surface-muted);
  box-shadow:
    inset 0 0 0 1.2px var(--haya-border),
    inset 0 1px 2px rgb(0 0 0 / 0.06);
  color: var(--haya-brand-contrast);
  transition: background-color 120ms ease, box-shadow 120ms ease;
  pointer-events: none;
}

.haya-checkbox__mark {
  grid-area: 1 / 1;
  inline-size: calc(12rem / 14);
  block-size: calc(12rem / 14);
  visibility: hidden;
}

.haya-checkbox--checked .haya-checkbox__box,
.haya-checkbox--partial .haya-checkbox__box {
  background: var(--haya-brand);
  box-shadow: inset 0 0 0 1.2px var(--haya-brand);
}

.haya-checkbox--checked .haya-checkbox__mark {
  visibility: visible;
}

/* Some of the subtree, not all of it. A bar rather than a tick, because a tick
   here would claim the collapsed children are selected too. */
.haya-checkbox--partial .haya-checkbox__box::after {
  content: "";
  grid-area: 1 / 1;
  inline-size: calc(8rem / 14);
  block-size: 2px;
  border-radius: 1px;
  background: var(--haya-brand-contrast);
}

.haya-checkbox__input:focus-visible + .haya-checkbox__box {
  outline: 2px solid var(--haya-brand);
  outline-offset: 2px;
}

.haya-checkbox:has(.haya-checkbox__input:disabled) {
  cursor: not-allowed;
  opacity: 0.6;
}

/* ---------------------------------------------------------- data table - */

/* Measured from the CMS listings (Figma CMS 3224:22213, 3246:12838,
   3223:20410). Pixels are written as calc(<px>rem / 14) against the shell's
   14px base, so the design's numbers stay readable here and a product that
   raises the base size on Appearance scales its tables with the rest of the
   dashboard. Colours are the theme's tokens only: the design's hex values are
   not this shell's palette. */

.haya-data-table-frame {
  min-inline-size: 0;
}

/* Search at the start, sort at the end, 24 all round. */
.haya-table-toolbar {
  width: 100%;
  inline-size: 100%;
  min-inline-size: 0;
  flex-shrink: 0;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: calc(12rem / 14);
  padding: calc(24rem / 14);
}

.haya-table-toolbar__start,
.haya-table-toolbar__end {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: calc(12rem / 14);
  min-inline-size: 0;
}

/* HayaListTable supplies a complete strip to HayaDataTable's custom toolbar.
   Keep one frame inset rather than padding the same controls twice. */
.haya-table-toolbar:has(> .haya-table-toolbar),
.haya-tabs--boxed .haya-tabs__panel .haya-table-toolbar:has(> .haya-table-toolbar) {
  padding: 0;
}

.haya-table-toolbar .haya-table-toolbar__clear {
  inline-size: calc(38rem / 14);
  block-size: calc(38rem / 14);
  align-self: flex-end;
}

/* The end action's tooltip opens inward in either writing direction. */
.haya-table-toolbar .haya-table-toolbar__clear .haya-row-action__tooltip {
  inset-inline-start: auto;
  inset-inline-end: 0;
  translate: none;
}

/* Fields carry a bottom margin for stacked forms; in the strip the gap already
   spaces them, and keeping both leaves the row sitting crooked. */
.haya-table-toolbar .haya-field {
  margin-block-end: 0;
}

/* A caller-drawn toolbar keeps the strip's spacer behaviour. */
.haya-table-toolbar > .haya-spacer {
  flex: 1 1 auto;
}

/* The design's toolbar field: 38 tall, 1.5 border, radius 8, 13 at 480. The
   search box, and any raw input or select a screen still puts in the strip;
   a select box proper is HayaSelect, drawn below. */
/* The shared control box at the strip's 38. */
.haya-table-toolbar .haya-input,
.haya-table-toolbar .haya-select {
  min-block-size: calc(38rem / 14);
  line-height: 1.2;
}

/* A form field fills its column; in the strip each control is as wide as it
   needs, or three filters stack into a column of full-width boxes. */
.haya-table-toolbar .haya-input,
.haya-table-toolbar .haya-select {
  inline-size: auto;
  max-inline-size: 100%;
  /* One height for every control in the strip, the design's 38: a select and
     a date input otherwise take their own from the browser's inner chrome. */
  block-size: calc(38rem / 14);
  min-block-size: 0;
  padding-block: 0;
}

.haya-table-toolbar__start .haya-input[type="search"] {
  min-inline-size: calc(252rem / 14);
}

.haya-table-toolbar__end {
  justify-content: flex-end;
}

.haya-table-toolbar__end .haya-input,
.haya-table-toolbar__end .haya-select {
  min-inline-size: calc(140rem / 14);
}

.haya-table-toolbar .haya-input:focus-visible,
.haya-table-toolbar .haya-select:focus-visible {
  outline: none;
  border-color: var(--haya-brand);
}

/* --------------------------------------------------------- select box - */

/* HayaSelect. The trigger is Figma CMS 3224:22222: 10/12 padding, a 10 gap,
   13 at 480 on an 18 line, 1.5 border, radius 8, the 18px arrow-drop-down-fill
   at the inline end. The open list has no frame of its own in the design, so it
   is drawn in the trigger's language: the same border, radius and type on the
   surface, 6 below the trigger. Colours are theme tokens only. */
.haya-select-box {
  position: relative;
  display: inline-flex;
  min-inline-size: 0;
  max-inline-size: 100%;
  vertical-align: middle;
}

/* In a form a select is as wide as the inputs around it. */
.haya-field .haya-select-box {
  display: flex;
  inline-size: 100%;
}

.haya-select-box__trigger {
  /* The list positions against this; the name is set inline per instance. The
     box - padding, border, radius, type - is the shared control box above. */
  anchor-name: var(--haya-select-anchor);
  display: flex;
  align-items: center;
  gap: calc(10rem / 14);
  text-align: start;
  cursor: pointer;
}

.haya-select-box__trigger:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--haya-border) 55%, var(--haya-text-muted));
}

.haya-select-box__trigger:focus-visible,
.haya-select-box:has(.haya-select-box__panel:popover-open) .haya-select-box__trigger {
  outline: none;
  border-color: var(--haya-brand);
}

.haya-select-box__trigger:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.haya-select-box__value {
  flex: 1 1 auto;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The design's placeholder ("براساس") reads muted; a chosen value reads as text. */
.haya-select-box__value--placeholder {
  color: var(--haya-text-muted);
}

.haya-select-box__icon,
.haya-select-box__chevron {
  inline-size: calc(18rem / 14);
  block-size: calc(18rem / 14);
  flex: none;
  color: var(--haya-text-muted);
}

/* The chevron turns over while the list is open. */
.haya-select-box__chevron {
  transition: rotate 160ms ease;
}

.haya-select-box:has(.haya-select-box__panel:popover-open) .haya-select-box__chevron {
  rotate: 180deg;
  color: var(--haya-brand);
}

.haya-select-box__panel {
  /* In the top layer, so no card, table or dialog overflow can clip it. */
  position: fixed;
  inset: auto;
  position-anchor: var(--haya-select-anchor);
  /* Under the trigger, starting at its start edge; above it, or aligned to its
     end, as the viewport runs out. */
  position-area: block-end span-inline-end;
  position-try-fallbacks:
    block-start span-inline-end,
    block-end span-inline-start,
    block-start span-inline-start;
  box-sizing: border-box;
  margin: calc(6rem / 14) 0;
  min-inline-size: anchor-size(inline);
  max-inline-size: min(calc(360rem / 14), calc(100vw - 2rem));
  /* MaxHeight on the component sets the property; otherwise 320, or less on a
     short viewport. */
  max-block-size: var(--haya-select-max-height, min(calc(320rem / 14), 60vh));
  overflow-y: auto;
  padding: calc(6rem / 14);
  border: 1.5px solid var(--haya-border);
  border-radius: calc(8rem / 14);
  background: var(--haya-surface);
  color: var(--haya-text);
  box-shadow: 0 12px 32px -12px rgb(0 0 0 / 0.2);
  font-size: calc(13rem / 14);
}

.haya-select-box__panel:popover-open {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  .haya-select-box__panel:popover-open {
    animation: haya-select-open 120ms ease-out;
  }
}

@keyframes haya-select-open {
  from {
    opacity: 0;
    translate: 0 calc(-4rem / 14);
  }
}

.haya-select-box__search {
  box-sizing: border-box;
  inline-size: 100%;
  margin-block-end: calc(4rem / 14);
  padding: calc(8rem / 14) calc(10rem / 14);
  border: 1.5px solid var(--haya-border);
  border-radius: calc(6rem / 14);
  background: var(--haya-canvas);
  color: var(--haya-text);
  font: inherit;
  font-size: calc(13rem / 14);
}

.haya-select-box__search:focus-visible {
  outline: none;
  border-color: var(--haya-brand);
}

.haya-select-box__option {
  display: flex;
  align-items: center;
  gap: calc(10rem / 14);
  inline-size: 100%;
  margin: 0;
  padding: calc(8rem / 14) calc(10rem / 14);
  border: 0;
  border-radius: calc(6rem / 14);
  background: none;
  color: var(--haya-text);
  font: inherit;
  font-size: calc(13rem / 14);
  font-weight: 480;
  line-height: calc(18rem / 14);
  text-align: start;
  cursor: pointer;
}

.haya-select-box__option:hover:not(:disabled),
.haya-select-box__option:focus-visible {
  outline: none;
  background: var(--haya-surface-muted);
}

.haya-select-box__option[aria-selected="true"] {
  color: var(--haya-brand);
  font-weight: 600;
}

.haya-select-box__option:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.haya-select-box__option-icon {
  inline-size: calc(18rem / 14);
  block-size: calc(18rem / 14);
  flex: none;
  color: var(--haya-text-muted);
}

.haya-select-box__option[aria-selected="true"] .haya-select-box__option-icon {
  color: inherit;
}

.haya-select-box__option-label {
  flex: 1 1 auto;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.haya-select-box__check {
  inline-size: calc(16rem / 14);
  block-size: calc(16rem / 14);
  flex: none;
}

/* A multiple select's box is the table's checkbox, without its hit area. */
.haya-select-box__option .haya-checkbox {
  inline-size: auto;
  block-size: auto;
}

.haya-select-box__empty {
  padding: calc(8rem / 14) calc(10rem / 14);
  color: var(--haya-text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .haya-select-box__chevron {
    transition: none;
  }
}

/* Browsers without anchor positioning would centre the list in the viewport.
   Pinned under the top of the page instead: a few pixels from where it would
   be, never somewhere unrelated to the select that opened it. */
@supports not (anchor-name: --a) {
  .haya-select-box__panel {
    position: fixed;
    inset: 4rem auto auto 50%;
    translate: -50% 0;
    min-inline-size: min(20rem, calc(100vw - 2rem));
  }
}

/* The clear button. A sibling of the trigger rather than inside it, because a
   button cannot hold a button; laid over the trigger's end, before the chevron,
   with the value kept clear of it. */
.haya-select-box__clear {
  position: absolute;
  inset-inline-end: calc(36rem / 14);
  inset-block-start: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  inline-size: calc(20rem / 14);
  block-size: calc(20rem / 14);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--haya-text-muted);
  cursor: pointer;
}

.haya-select-box__clear:hover,
.haya-select-box__clear:focus-visible {
  outline: none;
  background: var(--haya-surface-muted);
  color: var(--haya-text);
}

.haya-select-box__clear svg {
  inline-size: calc(14rem / 14);
  block-size: calc(14rem / 14);
}

.haya-select-box--has-clear .haya-select-box__value {
  padding-inline-end: calc(24rem / 14);
}

/* "Select all" heads a multiple list, set off from the items it selects. */
.haya-select-box__option--all {
  margin-block-end: calc(4rem / 14);
  border-block-end: 1px solid var(--haya-border);
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}

/* Dense: for tight rows and narrow panels. */
.haya-select-box--dense .haya-select-box__trigger {
  gap: calc(8rem / 14);
  padding: calc(6rem / 14) calc(10rem / 14);
}

.haya-select-box--dense .haya-select-box__panel {
  padding: calc(4rem / 14);
}

.haya-select-box--dense .haya-select-box__option {
  padding: calc(5rem / 14) calc(8rem / 14);
}

/* Read-only: the value is shown and copyable, the list does not open. */
.haya-select-box--readonly .haya-select-box__trigger {
  background: var(--haya-surface-muted);
  cursor: default;
}

.haya-select-box--readonly .haya-select-box__chevron {
  visibility: hidden;
}

/* Invalid: a required choice missing, or a validation message from the form. */
.haya-select-box--invalid .haya-select-box__trigger,
.haya-select-box--invalid .haya-select-box__trigger:focus-visible {
  border-color: var(--haya-danger);
}

.haya-select-box__error {
  display: block;
  flex-basis: 100%;
  margin-block-start: calc(4rem / 14);
  color: var(--haya-danger);
  font-size: calc(12rem / 14);
}

.haya-select-box:has(.haya-select-box__error) {
  flex-wrap: wrap;
}

/* -------------------------------------------------------- date picker - */

/* HayaDatePicker. The trigger is HayaSelect's, with a calendar in place of the
   chevron; the grid is drawn in the list's language, in the calendar of the
   operator's language. */
.haya-date-picker:has(.haya-date-picker__panel:popover-open) .haya-select-box__trigger {
  border-color: var(--haya-brand);
}

.haya-date-picker:has(.haya-date-picker__panel:popover-open) .haya-date-picker__icon {
  color: var(--haya-brand);
}

.haya-date-picker__panel {
  position: fixed;
  inset: auto;
  position-anchor: var(--haya-select-anchor);
  position-area: block-end span-inline-end;
  position-try-fallbacks:
    block-start span-inline-end,
    block-end span-inline-start,
    block-start span-inline-start;
  /* When neither side holds the whole panel -- a trigger mid-way down a
     dialog on a laptop screen -- take the roomier side and scroll inside it,
     so Apply stays on screen (L255 walkthrough: it sat 60px below the
     viewport at 1024x768). The percentage is of the space position-area
     leaves on that side. */
  position-try-order: most-block-size;
  max-block-size: calc(100% - calc(6rem / 14));
  overflow-y: auto;
  box-sizing: border-box;
  margin: calc(6rem / 14) 0;
  inline-size: calc(296rem / 14);
  max-inline-size: calc(100vw - 2rem);
  padding: calc(10rem / 14);
  border: 1.5px solid var(--haya-border);
  border-radius: calc(8rem / 14);
  background: var(--haya-surface);
  color: var(--haya-text);
  box-shadow: 0 12px 32px -12px rgb(0 0 0 / 0.2);
  font-size: calc(13rem / 14);
}

.haya-date-picker__panel:popover-open {
  display: flex;
  flex-direction: column;
  gap: calc(8rem / 14);
}

.haya-date-picker__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(6rem / 14);
}

.haya-date-picker__nav,
.haya-date-picker__title {
  margin: 0;
  border: 0;
  border-radius: calc(6rem / 14);
  background: none;
  color: var(--haya-text);
  font: inherit;
  cursor: pointer;
}

.haya-date-picker__nav {
  display: grid;
  place-items: center;
  inline-size: calc(30rem / 14);
  block-size: calc(30rem / 14);
  flex: none;
  padding: 0;
  color: var(--haya-text-muted);
}

.haya-date-picker__nav svg {
  inline-size: calc(18rem / 14);
  block-size: calc(18rem / 14);
}

/* The glyph points left. Previous points back along the reading direction and
   next forward, so which one is mirrored swaps in RTL. */
.haya-date-picker__nav--next svg,
[dir="rtl"] .haya-date-picker__nav--previous svg {
  transform: scaleX(-1);
}

[dir="rtl"] .haya-date-picker__nav--next svg {
  transform: none;
}

.haya-date-picker__title {
  flex: 1 1 auto;
  padding: calc(6rem / 14) calc(8rem / 14);
  font-weight: 600;
}

.haya-date-picker__nav:hover,
.haya-date-picker__nav:focus-visible,
.haya-date-picker__title:hover,
.haya-date-picker__title:focus-visible {
  outline: none;
  background: var(--haya-surface-muted);
}

.haya-date-picker__grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.haya-date-picker__week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}

.haya-date-picker__weekday {
  display: grid;
  place-items: center;
  block-size: calc(28rem / 14);
  color: var(--haya-text-muted);
  font-size: calc(12rem / 14);
  font-weight: 600;
}

.haya-date-picker__day {
  display: grid;
  place-items: center;
  block-size: calc(36rem / 14);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: calc(8rem / 14);
  background: none;
  color: var(--haya-text);
  font: inherit;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.haya-date-picker__day:hover:not(:disabled),
.haya-date-picker__day:focus-visible {
  outline: none;
  background: var(--haya-surface-muted);
}

.haya-date-picker__day--outside {
  color: var(--haya-text-muted);
}

.haya-date-picker__day--today {
  box-shadow: inset 0 0 0 1.5px var(--haya-brand);
}

.haya-date-picker__day--selected,
.haya-date-picker__day--selected:hover:not(:disabled),
.haya-date-picker__day--selected:focus-visible {
  background: var(--haya-brand);
  color: var(--haya-brand-contrast);
  font-weight: 600;
}

.haya-date-picker__day:disabled {
  cursor: not-allowed;
  opacity: 0.3;
}

.haya-date-picker__months {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(6rem / 14);
}

.haya-date-picker__month {
  margin: 0;
  padding: calc(10rem / 14) calc(6rem / 14);
  border: 0;
  border-radius: calc(8rem / 14);
  background: none;
  color: var(--haya-text);
  font: inherit;
  cursor: pointer;
}

.haya-date-picker__month:hover,
.haya-date-picker__month:focus-visible {
  outline: none;
  background: var(--haya-surface-muted);
}

.haya-date-picker__month--current,
.haya-date-picker__month--current:hover {
  background: var(--haya-brand);
  color: var(--haya-brand-contrast);
}

.haya-date-picker__time {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(6rem / 14);
  padding-block-start: calc(8rem / 14);
  border-block-start: 1px solid var(--haya-border);
}

.haya-date-picker__time-input {
  box-sizing: border-box;
  inline-size: calc(56rem / 14);
  padding: calc(6rem / 14) calc(8rem / 14);
  border: 1.5px solid var(--haya-border);
  border-radius: calc(6rem / 14);
  background: var(--haya-canvas);
  color: var(--haya-text);
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.haya-date-picker__time-input:focus-visible {
  outline: none;
  border-color: var(--haya-brand);
}

.haya-date-picker__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(8rem / 14);
}

.haya-date-picker__link {
  margin: 0;
  padding: calc(6rem / 14) calc(8rem / 14);
  border: 0;
  border-radius: calc(6rem / 14);
  background: none;
  color: var(--haya-brand);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.haya-date-picker__link:hover:not(:disabled),
.haya-date-picker__link:focus-visible {
  outline: none;
  background: color-mix(in srgb, var(--haya-brand) 10%, transparent);
}

.haya-date-picker__link:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

@supports not (anchor-name: --a) {
  .haya-date-picker__panel {
    position: fixed;
    inset: 4rem auto auto 50%;
    translate: -50% 0;
  }
}

/* A filter select in the strip is at least as wide as its choices read. */
.haya-table-toolbar__end .haya-select-box {
  min-inline-size: calc(140rem / 14);
}

/* The toolbar's sort dropdown: the design's 164 wide. */
.haya-data-sort {
  min-inline-size: calc(164rem / 14);
}

/* Rows selected: the count, then outline actions, in the search field's place. */
.haya-data-table__selection {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(12rem / 14);
  min-block-size: calc(38rem / 14);
}

.haya-data-table__selection-count {
  font-size: calc(12rem / 14);
  font-weight: 400;
  color: var(--haya-text-muted);
  white-space: nowrap;
}

.haya-data-table__selection .haya-btn {
  padding: calc(6rem / 14) calc(16rem / 14);
  border-radius: calc(6rem / 14);
  font-size: calc(12rem / 14);
  font-weight: 600;
}

.haya-data-table__selection .haya-btn--danger {
  border-color: var(--haya-danger);
}

/* Rows sit 24 in from the frame's edges; the scroller carries that inset so a
   wide table scrolls inside it rather than through it. */
.haya-data-table__scroll {
  overflow-x: auto;
  padding-inline: calc(24rem / 14);
}

.haya-data-table-frame > .haya-data-table__scroll:first-child {
  padding-block-start: calc(24rem / 14);
}

/* Everything else about the rows is .haya-table's, shared with every listing.
   Only selection is the data table's own. */
.haya-table tbody tr.haya-data-table__row--selected td {
  background: var(
    --haya-table-row-selected-background,
    color-mix(in srgb, var(--haya-brand) 6%, transparent));
}

.haya-data-table .haya-data-table__select {
  inline-size: calc(24rem / 14);
  white-space: nowrap;
}

.haya-data-table .haya-data-table__index {
  inline-size: calc(24rem / 14);
  color: var(--haya-text-muted);
  font-variant-numeric: tabular-nums;
  text-align: center;
  white-space: nowrap;
}

/* Header and cell layout, from HayaDataHeader and HayaDataCell. */
.haya-data-header__content {
  display: inline-flex;
  align-items: center;
  gap: calc(6rem / 14);
  vertical-align: middle;
}

.haya-data-header__icon {
  inline-size: calc(18rem / 14);
  block-size: calc(18rem / 14);
  flex: none;
}

/* A cell with nothing to show (L165): a dash centred in its column, under its
   header, whichever way the column's values align - a short mark pushed to
   one edge reads as the neighbouring column's. */
.haya-data-cell__empty {
  display: block;
  text-align: center;
  color: var(--haya-text-muted);
}

.haya-data-table .haya-data-cell--center {
  text-align: center;
}

.haya-data-table .haya-data-cell--end {
  text-align: end;
}

.haya-data-cell--primary {
  font-weight: 600;
}

.haya-data-cell--secondary {
  font-weight: 500;
  letter-spacing: 0.5px;
  font-variant-numeric: tabular-nums;
}

.haya-data-cell--muted {
  font-size: calc(12rem / 14);
  color: var(--haya-text-muted);
}

.haya-data-cell--ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A contributed cell: its text, and a smaller second line under it — the price
   before a discount, crossed out. */
.haya-data-cell__text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.haya-data-cell__detail {
  display: block;
  margin-block-start: calc(2rem / 14);
  color: var(--haya-text-muted);
  font-size: calc(12rem / 14);
  white-space: nowrap;
}

/* A name led by an icon that says what kind of thing it is - the products
   listing's type (L178-2). The name gives way to an ellipsis; the icon keeps
   its size, so the kind is still there on the narrowest column. */
.haya-data-cell__titled {
  display: flex;
  align-items: center;
  gap: calc(6rem / 14);
  min-inline-size: 0;
}

.haya-data-cell__titled > .haya-data-cell__text {
  min-inline-size: 0;
}

.haya-data-cell__titled > .haya-data-cell__icon {
  flex: none;
}

/* An icon in a cell - once a column of its own, now the kind before a product's
   name (L136, L178-2). The tooltip carries the words, so the glyph is muted
   until the row is read. */
.haya-data-cell__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--haya-text-muted);
}

.haya-data-cell__icon svg {
  inline-size: calc(18rem / 14);
  block-size: calc(18rem / 14);
}

.haya-data-table__row--selected .haya-data-cell__icon,
tr:hover > .haya-data-cell .haya-data-cell__icon {
  color: var(--haya-text);
}

.haya-data-cell__detail--struck {
  text-decoration: line-through;
}

/* Tree: marker, chevron, name, 24 of indent a level (set inline by depth). */
.haya-data-table__cell {
  display: flex;
  align-items: center;
  gap: calc(6rem / 14);
  min-inline-size: 0;
}

/* The panel a row opens under itself - the products listing's quick settings
   (L136). Inside the table so it moves with its row, and set apart from the
   rows around it by its ground rather than by a border, which would read as
   another row. A third of the way from the surface to the muted ground
   (L178-3): half-way (L165) still read as a grey slab under the row. What
   tells it from the table now is the brand line down its start edge, and the
   row it belongs to takes the same ground, so the two read as one piece. */
.haya-data-table__detail-row,
.haya-table tbody tr.haya-data-table__row--open > td {
  background: color-mix(in srgb, var(--haya-surface-muted) 35%, var(--haya-surface));
}

.haya-table tbody tr.haya-data-table__row--open > td {
  border-block-end-color: transparent;
}

.haya-data-table__detail {
  padding: calc(16rem / 14) calc(20rem / 14) calc(18rem / 14);
  border-block-end: 1px solid var(--haya-border);
  border-inline-start: calc(3rem / 14) solid var(--haya-brand);
  /* The cell is the panel's frame; its content lays itself out. */
  white-space: normal;
}

/* What a listing edits in place under a row (L136, L178-3): the product's own
   fields on one grid - equal columns, one row on a desktop, stacking on a
   narrow window rather than squeezing a price into four characters - a
   contributed field that needs the width under a line of its own, and the two
   buttons that close the panel under another. */
.haya-quick-edit {
  display: flex;
  flex-direction: column;
  gap: calc(16rem / 14);
}

.haya-quick-edit__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(200rem / 14)), 1fr));
  align-items: start;
  gap: calc(14rem / 14) calc(16rem / 14);
}

.haya-quick-edit__fields > * {
  min-inline-size: 0;
}

/* A field that needs the panel's whole width: a variable product's price per
   combination (L165), one row per combination, set off from the fields above
   by a line. A contributed field that arrives inside a wrapper of its own
   takes the row through its wrapper. */
.haya-quick-edit__fields > .haya-quick-edit__wide,
.haya-quick-edit__fields > :has(> .haya-quick-edit__wide) {
  grid-column: 1 / -1;
  padding-block-start: calc(14rem / 14);
  border-block-start: 1px solid var(--haya-border);
}

/* Narrow enough that each combination's name sits beside its price rather
   than across the panel from it; each row a card of the surface, so a long
   list reads as rows rather than as a column of boxes. */
.haya-quick-prices {
  display: grid;
  gap: calc(6rem / 14);
  max-inline-size: calc(640rem / 14);
  max-block-size: calc(320rem / 14);
  overflow-y: auto;
}

/* The same three columns on every row, so the "same for all" field lines up
   with the fields it fills: the name, the price, and what the price reads as
   - grouped, with its currency - or, on the first row, the button. */
.haya-quick-prices__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(calc(120rem / 14), calc(180rem / 14)) calc(140rem / 14);
  align-items: center;
  gap: calc(12rem / 14);
  padding: calc(6rem / 14) calc(10rem / 14);
  border: 1px solid var(--haya-border);
  border-radius: calc(10rem / 14);
  background: var(--haya-surface);
}

.haya-quick-prices__row--all {
  margin-block-end: calc(4rem / 14);
  border-style: dashed;
  background: transparent;
}

.haya-quick-prices__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--haya-text);
  font-weight: 500;
}

/* A typed price as it will read - grouped, with its currency - since a
   number field shows 1250000 as one run of digits. */
.haya-quick-prices__preview {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--haya-text-muted);
  font-size: calc(12rem / 14);
  font-variant-numeric: tabular-nums;
}

.haya-quick-edit__actions {
  display: flex;
  justify-content: flex-end;
  gap: calc(8rem / 14);
  padding-block-start: calc(14rem / 14);
  border-block-start: 1px solid var(--haya-border);
}

.haya-data-table__marker {
  display: inline-grid;
  place-items: center;
  flex: none;
}

.haya-data-table__chevron {
  display: grid;
  place-items: center;
  inline-size: calc(24rem / 14);
  block-size: calc(24rem / 14);
  flex: none;
  padding: 0;
  border: 0;
  border-radius: calc(6rem / 14);
  background: none;
  color: var(--haya-text-muted);
  cursor: pointer;
}

.haya-data-table__chevron:hover {
  color: var(--haya-text);
  background: var(--haya-surface-muted);
}

.haya-data-table__chevron svg {
  inline-size: calc(24rem / 14);
  block-size: calc(24rem / 14);
  transition: transform 120ms ease;
}

/* The same glyph, flipped when the branch is open. */
.haya-data-table__chevron--open svg {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .haya-data-table__chevron svg {
    transition: none;
  }
}

.haya-data-table__name {
  display: inline-flex;
  align-items: center;
  gap: calc(8rem / 14);
  min-inline-size: 0;
  font-size: calc(14rem / 14);
  font-weight: 400;
}

/* Roots and parents read heavier than the leaves under them. */
.haya-data-table__name--strong {
  font-weight: 600;
}

/* The category design's marker: a 6px brand dot. */
.haya-dot {
  display: inline-block;
  inline-size: calc(6rem / 14);
  block-size: calc(6rem / 14);
  border-radius: 999px;
  background: var(--haya-brand);
  flex: none;
}

/* Actions: 34px squares, 12 apart, each with its tooltip under it. */
.haya-data-actions__list {
  display: flex;
  align-items: center;
  gap: calc(12rem / 14);
}

.haya-data-actions.haya-data-cell--end .haya-data-actions__list {
  justify-content: flex-end;
}

.haya-row-action {
  position: relative;
  display: inline-grid;
  place-items: center;
  inline-size: calc(34rem / 14);
  block-size: calc(34rem / 14);
  flex: none;
  padding: 0;
  border: 0;
  border-radius: calc(12rem / 14);
  background: color-mix(in srgb, var(--haya-brand) 12%, transparent);
  color: var(--haya-brand);
  cursor: pointer;
  transition: background-color 120ms ease;
}

.haya-row-action:hover:not(:disabled) {
  background: color-mix(in srgb, var(--haya-brand) 20%, transparent);
}

/* A destructive row action, when it stands in the row rather than the menu.
   After the base rules: the same weight, so only order lets it win. */
.haya-row-action--danger {
  background: color-mix(in srgb, var(--haya-danger) 12%, transparent);
  color: var(--haya-danger);
}

.haya-row-action--danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--haya-danger) 20%, transparent);
}

.haya-row-action:focus-visible {
  outline: 2px solid var(--haya-brand);
  outline-offset: 2px;
}

.haya-row-action:disabled {
  cursor: not-allowed;
}

/* Fading the button creates a stacking context that traps its tooltip below
   sticky table headers. Fade only the glyph so the tooltip keeps its layer. */
.haya-row-action:disabled > .haya-row-action__icon {
  opacity: 0.55;
}

.haya-row-action__icon {
  inline-size: calc(18rem / 14);
  block-size: calc(18rem / 14);
}

.haya-row-action__tooltip {
  position: absolute;
  inset-block-start: calc(100% + 6rem / 14);
  inset-inline-start: 50%;
  translate: -50% 0;
  z-index: 5;
  padding: calc(6rem / 14) calc(12rem / 14);
  border: 0.5px solid var(--haya-border);
  border-radius: calc(8rem / 14);
  background: var(--haya-surface);
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.08);
  color: var(--haya-text);
  font-size: calc(12rem / 14);
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 120ms ease;
}

/* inset-inline-start is the right edge in RTL, so centring moves the other way. */
[dir="rtl"] .haya-row-action__tooltip {
  translate: 50% 0;
}

/* The last row's tooltip opens upward, into the table. Below it there is no
   row to open into, and a table's scroller (overflow-x: auto, which makes the
   other axis auto too) counts even a hidden tooltip as overflow: the whole
   table grew a vertical scrollbar exactly one tooltip tall. */
.haya-table tbody tr:last-child .haya-row-action__tooltip {
  inset-block-start: auto;
  inset-block-end: calc(100% + 6rem / 14);
}

/* The same across: the last button in the actions column sits at the table's
   end, where a centred tooltip — "more actions" is the widest — reaches past
   the scroller and grows a horizontal scrollbar. Its tooltip starts at the
   button's end edge and opens back into the table. The menu that follows the
   "more" button is a div, hence the last button rather than the last child. */
.haya-row-actions > button:last-of-type .haya-row-action__tooltip {
  inset-inline-start: auto;
  inset-inline-end: 0;
  translate: none;
}

.haya-row-action:hover .haya-row-action__tooltip,
.haya-row-action:focus-visible .haya-row-action__tooltip {
  opacity: 1;
  visibility: visible;
}

/* Status pill, name chip and avatar tile, as the listings draw them. */
.haya-badge--pill {
  padding: calc(4rem / 14) calc(12rem / 14);
  font-size: calc(12rem / 14);
  font-weight: 600;
}

.haya-chip--label {
  padding: calc(2rem / 14) calc(8rem / 14);
  border: 0;
  border-radius: calc(24rem / 14);
  background: var(--haya-surface-muted);
  color: var(--haya-text-muted);
  font-size: calc(12rem / 14);
  font-weight: 500;
  cursor: default;
}

.haya-avatar--tile {
  inline-size: calc(26rem / 14);
  block-size: calc(26rem / 14);
  border-radius: calc(8rem / 14);
  background: color-mix(in srgb, var(--haya-brand) 12%, transparent);
  color: var(--haya-brand);
}

.haya-avatar--tile svg {
  inline-size: calc(18rem / 14);
  block-size: calc(18rem / 14);
}

/* Outline button: the selection actions, and anywhere a filled button would
   outweigh what it acts on. */
.haya-btn--outline {
  background: transparent;
  border-color: var(--haya-brand);
  color: var(--haya-brand);
}

.haya-btn--outline:hover:not(:disabled) {
  background: color-mix(in srgb, var(--haya-brand) 10%, transparent);
}

/* Pager below the rows: centred, 12 above and 24 around. */
.haya-data-table__footer {
  padding: calc(12rem / 14) calc(24rem / 14) calc(24rem / 14);
}

.haya-data-table__footer .haya-pager {
  border: 0;
  padding: 0;
}

.haya-pager--numbers {
  justify-content: center;
  gap: calc(12rem / 14);
}

.haya-pager__page,
.haya-pager__step {
  display: inline-grid;
  place-items: center;
  min-inline-size: calc(34rem / 14);
  block-size: calc(34rem / 14);
  padding: 0 calc(6rem / 14);
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--haya-text-muted);
  font: inherit;
  font-size: calc(16rem / 14);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.haya-pager__page:hover:not(:disabled):not(.haya-pager__page--current),
.haya-pager__step:hover:not(:disabled) {
  background: var(--haya-surface-muted);
  color: var(--haya-text);
}

.haya-pager__page--current {
  background: var(--haya-brand);
  color: var(--haya-brand-contrast);
  cursor: default;
}

.haya-pager__gap {
  cursor: default;
}

.haya-pager__step:disabled,
.haya-pager__page:disabled:not(.haya-pager__page--current) {
  cursor: not-allowed;
  opacity: 0.45;
}

.haya-pager__step svg {
  inline-size: calc(18rem / 14);
  block-size: calc(18rem / 14);
}

/* The glyph points left. Previous points back along the reading direction and
   next forward, so which one is mirrored swaps in RTL. */
.haya-pager__step--next svg,
[dir="rtl"] .haya-pager__step--previous svg {
  transform: scaleX(-1);
}

[dir="rtl"] .haya-pager__step--next svg {
  transform: none;
}

@media (max-width: 40rem) {
  .haya-table-toolbar {
    padding: calc(16rem / 14);
  }

  .haya-table-toolbar__start,
  .haya-table-toolbar__end,
  .haya-table-toolbar .haya-input,
  .haya-data-sort {
    inline-size: 100%;
    min-inline-size: 0;
  }

  .haya-data-table__scroll {
    padding-inline: calc(16rem / 14);
  }
}

/* ---------------------------------------------------- round icon button - */

/* The shape the CMS listings use in their actions column: a circle on a tinted
   ground. A variant of the icon button rather than a control of its own, so
   size, focus and disabled behaviour stay shared with every other button. */
.haya-btn--round {
  border-radius: 999px;
  border-color: transparent;
  background: color-mix(in srgb, var(--haya-brand) 12%, transparent);
  color: var(--haya-brand);
}

.haya-btn--round:hover:not(:disabled) {
  background: color-mix(in srgb, var(--haya-brand) 20%, transparent);
}

/* --------------------------------------------------------------- avatar - */

/* A face, so a circle. .haya-thumb stays a rounded square on purpose: a
   catalogue image is not a person, and rounding one into a circle crops it. */
.haya-avatar {
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: 999px;
  object-fit: cover;
  flex: none;
  background: var(--haya-surface-muted);
  color: var(--haya-text-muted);
  display: inline-grid;
  place-content: center;
  overflow: hidden;
}

/* Nobody uploaded a picture. A glyph on the muted ground rather than a broken
   image, and rather than initials, which collide constantly in Persian. */
.haya-avatar--empty svg {
  inline-size: 1.125rem;
  block-size: 1.125rem;
}


.haya-product-basic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: 1rem;
    margin-block: 1rem;
}

.haya-product-basic-grid > div:not(.haya-field) {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    min-width: 0;
}

.haya-product-basic-fields {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

/* Deliberate confirmation, shared by destructive dialogs. */
.haya-hold-button { min-inline-size: 0; display: inline-flex; flex-direction: column; gap: .35rem; }
.haya-hold-button__button { position: relative; overflow: hidden; touch-action: none; user-select: none; }
.haya-hold-button__progress { position: absolute; inset: 0; background: currentColor; opacity: .16; transform: scaleX(var(--hold-progress, 0)); transform-origin: left; pointer-events: none; }
.haya-hold-button__button:dir(rtl) .haya-hold-button__progress { transform-origin: right; }
.haya-hold-button__label { position: relative; }
.haya-hold-button__hint { font-size: var(--haya-font-size-xs, .75rem); max-inline-size: 26rem; }

.haya-dialog__footer:has(.haya-hold-button) { align-items: flex-start; }