/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *















 */
@font-face {
  font-family: "Clash Display";
  src: url(https://www.alwaysart.com/assets/ClashDisplay-Regular-dc8176da1779b8101c1725376f21b2fa2a37fc3768a10cbc33b29731d7cea143.otf);
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "Clash Display";
  src: url(https://www.alwaysart.com/assets/ClashDisplay-Medium-8a2271dfab33d4b20c65b57155c8be1448a6e7f4b8bbe5166576f57f1099c347.otf);
  font-display: swap;
  font-style: normal;
  font-weight: 500;
}
@charset "UTF-8";
/* Theme */
/* line 3, app/assets/stylesheets/application_scss.scss */
.turbo-progress-bar {
  background-color: #ff5e5d;
}

/* line 7, app/assets/stylesheets/application_scss.scss */
.card-shadow {
  box-shadow: 0px 8px 16px 0px rgba(143, 149, 178, 0.15);
}

/* Utility */
/* line 13, app/assets/stylesheets/application_scss.scss */
.absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* line 20, app/assets/stylesheets/application_scss.scss */
.hide-scroll-bar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* line 25, app/assets/stylesheets/application_scss.scss */
.hide-scroll-bar::-webkit-scrollbar {
  display: none;
}

/* line 29, app/assets/stylesheets/application_scss.scss */
tr.selected {
  background-color: #eceef0;
}

/* Toggle Switch */
/* line 35, app/assets/stylesheets/application_scss.scss */
input.toggle-checkbox:checked ~ .dot {
  transform: translateX(100%);
  background-color: #5890e4;
}

/* Delete photo icon */
/* line 42, app/assets/stylesheets/application_scss.scss */
.delete-photo-icon {
  border-radius: 50%;
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  transition: opacity 0.2s ease;
  position: absolute;
  top: 6px;
  right: 6px;
}

/* line 56, app/assets/stylesheets/application_scss.scss */
.delete-photo-icon:hover {
  opacity: 0.8;
}

/* line 60, app/assets/stylesheets/application_scss.scss */
.delete-photo-icon svg {
  width: 14px;
  height: 14px;
}

/* Artwork Detail Components */
/* line 67, app/assets/stylesheets/application_scss.scss */
details > summary {
  list-style: none;
}

/* line 71, app/assets/stylesheets/application_scss.scss */
details > summary::-webkit-details-marker {
  display: none;
}

/* line 75, app/assets/stylesheets/application_scss.scss */
summary::after {
  content: " +";
}

/* line 78, app/assets/stylesheets/application_scss.scss */
details[open] summary:after {
  content: " -";
}

/* Artwork Detail Components - icon on left side  */
/* line 85, app/assets/stylesheets/application_scss.scss */
.details-icon-left summary::after {
  content: "";
}

/* line 88, app/assets/stylesheets/application_scss.scss */
.details-icon-left summary::before {
  content: " +";
}

/* line 93, app/assets/stylesheets/application_scss.scss */
details.details-icon-left[open] summary:after {
  content: "";
}

/* line 97, app/assets/stylesheets/application_scss.scss */
details.details-icon-left[open] summary:before {
  content: " -";
}

/* Component styles */
/* line 103, app/assets/stylesheets/application_scss.scss */
.devise-sidebar {
  height: 100%;
  background-image: url(https://www.alwaysart.com/assets/layout/devise_sidebar_bkgd-2a61cbcb41886dfce291a769e3998bbc1427a32e5c4219e73a348eba8aa15d4b.png);
  background-position: 0 100%;
  background-size: cover;
}

/* line 110, app/assets/stylesheets/application_scss.scss */
.devise-sidebar-content {
  opacity: 0.8;
  background: #fff;
  border-radius: 40px;
  padding: 20px;
  margin-bottom: 1em;
}

/* line 118, app/assets/stylesheets/application_scss.scss */
.order-sidebar {
  background-image: url(https://www.alwaysart.com/assets/layout/order_sidebar_bkgd-e56875c24f14b0b8a34dbf6e02be6df7d3fea240948867bb1d9bc42012e46ce0.png);
  background-position: top center;
  background-size: cover;
}

/* line 124, app/assets/stylesheets/application_scss.scss */
.dashboard-summary-box {
  background: linear-gradient(44deg, rgba(228, 252, 255, 0.6) 0%, rgba(248, 241, 255, 0.6) 100%);
}

/* line 132, app/assets/stylesheets/application_scss.scss */
.dashboard-artists-box {
  background: linear-gradient(45deg, rgba(248, 241, 255, 0.6) 0%, rgba(228, 252, 255, 0.6) 100%);
  backdrop-filter: blur(75px);
}

/* Create Account */
/* line 143, app/assets/stylesheets/application_scss.scss */
.sidebar-step-progress-node {
  height: 57px;
  width: 57px;
  background-color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* line 153, app/assets/stylesheets/application_scss.scss */
.special-coa {
  background-image: url(https://www.alwaysart.com/assets/cert_types/coa_bg-bc02713b5053fcd9e3f087edfea8d5c30ad0e49bd6df64dea189af762c1774d9.png);
  background-repeat: no-repeat;
  background-position: right top;
}

/* line 159, app/assets/stylesheets/application_scss.scss */
.most-popular {
  background-image: url(https://www.alwaysart.com/assets/cert_types/popular-12ca76950da81ef5a7897f72b9fdbfaeaafd686466c0be12d031632c2aa1adaa.png);
  background-repeat: no-repeat;
  background-position: right top;
}

/* Custom Form elements */
/* Radio buttons as divs */
/* line 170, app/assets/stylesheets/application_scss.scss */
.radio-button-div [type="radio"]:checked + label {
  border-color: #5890e4;
}

/* line 174, app/assets/stylesheets/application_scss.scss */
.artwork-form-factor-radio-button-div [type="radio"]:checked + label {
  border-color: #5890e4;
  color: black;
}

/* line 179, app/assets/stylesheets/application_scss.scss */
.artwork-form-factor-radio-button-div > label > svg {
  display: none;
}

/* line 183, app/assets/stylesheets/application_scss.scss */
.artwork-form-factor-radio-button-div [type="radio"]:checked + label > svg {
  display: block;
}

/* line 187, app/assets/stylesheets/application_scss.scss */
.gender-radio-button-div [type="radio"]:checked + label {
  border-color: #5890e4;
}

/* Check boxes as images */
/* line 193, app/assets/stylesheets/application_scss.scss */
.image-check-box [type="checkbox"]:checked + label {
  border-color: #5890e4;
}

/* line 197, app/assets/stylesheets/application_scss.scss */
.image-check-box [type="checkbox"]:checked + label > svg {
  display: block;
}

/* Check boxes as images */
/* line 203, app/assets/stylesheets/application_scss.scss */
.artwork-check-box {
  text-align: center;
}

/* line 207, app/assets/stylesheets/application_scss.scss */
.artwork-check-box [type="checkbox"] {
  margin-bottom: 10px;
}

/* line 211, app/assets/stylesheets/application_scss.scss */
.artwork-check-box [type="checkbox"] + p {
  cursor: pointer;
  border: 2px solid #f4f4f5;
  border-bottom: none;
  padding: 10px;
}

/* line 218, app/assets/stylesheets/application_scss.scss */
.artwork-check-box [type="checkbox"]:checked + p {
  border-color: #ff5e5d;
}

/* line 222, app/assets/stylesheets/application_scss.scss */
.artwork-check-box [type="checkbox"]:checked + p + div {
  border-color: #ff5e5d;
}

/* Styled radio buttons */
/* line 228, app/assets/stylesheets/application_scss.scss */
.radio-item {
  display: inline-block;
  position: relative;
  padding: 0 6px;
}

/* line 234, app/assets/stylesheets/application_scss.scss */
.radio-item input[type="radio"] {
  display: none;
}

/* line 238, app/assets/stylesheets/application_scss.scss */
.radio-item label {
  font-weight: normal;
}

/* line 242, app/assets/stylesheets/application_scss.scss */
.radio-item label:before {
  content: " ";
  display: inline-block;
  position: relative;
  top: 5px;
  margin: 0 5px 0 0;
  width: 20px;
  height: 20px;
  border-radius: 11px;
  border: 2px solid #5890e4;
  background-color: transparent;
}

/* line 255, app/assets/stylesheets/application_scss.scss */
.radio-item input[type="radio"]:checked + label:after {
  border-radius: 11px;
  width: 12px;
  height: 12px;
  position: absolute;
  top: 9px;
  left: 10px;
  content: " ";
  display: block;
  background: #5890e4;
}

/* Country Select */
/* line 269, app/assets/stylesheets/application_scss.scss */
select.select-field {
  margin: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%), linear-gradient(to right, #ccc, #ccc);
  background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em;
  background-size: 5px 5px, 5px 5px, 1px 1.5em;
  background-repeat: no-repeat;
}

/* line 285, app/assets/stylesheets/application_scss.scss */
select.select-field:focus {
  background-image: linear-gradient(45deg, green 50%, transparent 50%), linear-gradient(135deg, transparent 50%, green 50%), linear-gradient(to right, #ccc, #ccc);
  background-position: calc(100% - 15px) 1em, calc(100% - 20px) 1em, calc(100% - 2.5em) 0.5em;
  background-size: 5px 5px, 5px 5px, 1px 1.5em;
  background-repeat: no-repeat;
  border-color: green;
  outline: 0;
}

/* Add-Artwork artist dropdown: the pinned "Unattributed" placeholder option
   (sc-4064) — muted + italic to read as a placeholder, not a real artist. */
/* line 299, app/assets/stylesheets/application_scss.scss */
option.artist-option--placeholder {
  font-style: italic;
  color: #677589;
}

/* Date Select */
/* line 306, app/assets/stylesheets/application_scss.scss */
input[type="date"]::-webkit-calendar-picker-indicator {
  margin-right: 15px;
}

/* Number Input */
/* line 312, app/assets/stylesheets/application_scss.scss */
input[type="number"] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}

/* line 318, app/assets/stylesheets/application_scss.scss */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

/* line 325, app/assets/stylesheets/application_scss.scss */
.favorite-heart {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Default heart icon sizing - for artworks */
/* line 336, app/assets/stylesheets/application_scss.scss */
.favorite-heart .heart-icon {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

/* Gallery heart icon sizing - larger */
/* line 343, app/assets/stylesheets/application_scss.scss */
.favorite-heart.favorite-gallery .heart-icon {
  width: 24px;
  height: 24px;
}

@media (min-width: 640px) {
  /* line 343, app/assets/stylesheets/application_scss.scss */
  .favorite-heart.favorite-gallery .heart-icon {
    width: 30px;
    height: 30px;
  }
}

/* Artist heart icon sizing - largest */
/* line 354, app/assets/stylesheets/application_scss.scss */
.favorite-heart.favorite-artist .heart-icon {
  width: 24px;
  height: 24px;
}

@media (min-width: 640px) {
  /* line 354, app/assets/stylesheets/application_scss.scss */
  .favorite-heart.favorite-artist .heart-icon {
    width: 30px;
    height: 30px;
  }
}

/* line 364, app/assets/stylesheets/application_scss.scss */
.favorite-heart:hover .heart-icon {
  transform: scale(1.1);
}

/* line 368, app/assets/stylesheets/application_scss.scss */
.favorite-heart.favorited .heart-icon {
  color: black;
}

/* line 372, app/assets/stylesheets/application_scss.scss */
.favorite-heart:not(.favorited) .heart-icon {
  color: #9ca3af;
}

/* line 376, app/assets/stylesheets/application_scss.scss */
.btn-unfavorite {
  color: #fff;
  background-color: #9ca3af;
}
@charset "UTF-8";
/* line 1, app/assets/stylesheets/dropzone.scss */
.dropzone,
.dropzone * {
  box-sizing: border-box;
}

/* line 6, app/assets/stylesheets/dropzone.scss */
.dropzone-container {
  border: 2px dashed #dee5e8;
  border-radius: 20px;
  background-color: #f9fbfd;
}

/* line 12, app/assets/stylesheets/dropzone.scss */
.dropzone.dz-clickable {
  cursor: pointer;
}

/* line 16, app/assets/stylesheets/dropzone.scss */
.dropzone.dz-clickable .dz-message,
.dropzone.dz-clickable .dz-message * {
  cursor: pointer;
}

/* line 21, app/assets/stylesheets/dropzone.scss */
.dropzone-container-has-error {
  border: 2px dashed #ff5e5d;
}

/* line 25, app/assets/stylesheets/dropzone.scss */
.dropzone .dz-message {
  text-align: center;
  margin: 5px 0;
  color: #bdc5cf;
}

/* line 31, app/assets/stylesheets/dropzone.scss */
.dropzone.dz-drag-hover .dz-message {
  opacity: 0.5;
}

/* line 35, app/assets/stylesheets/dropzone.scss */
.dropzone.dz-started .dz-message {
  display: none;
}

/* line 39, app/assets/stylesheets/dropzone.scss */
.dropzone .dz-preview {
  position: relative;
  display: inline-block;
  vertical-align: top;
  margin: 10px;
}

/* line 46, app/assets/stylesheets/dropzone.scss */
.dropzone .dz-preview:hover .dz-image img {
  transform: scale(1.05, 1.05);
  filter: blur(8px);
}

/* line 51, app/assets/stylesheets/dropzone.scss */
.dropzone .dz-preview .dz-image {
  overflow: hidden;
  position: relative;
  display: block;
  z-index: 10;
}

/* line 60, app/assets/stylesheets/dropzone.scss */
.dropzone .dz-preview .dz-image img {
  display: block;
}

/* line 64, app/assets/stylesheets/dropzone.scss */
.dropzone .dz-preview.dz-file-preview .dz-image {
  background: #999;
  background: linear-gradient(to bottom, #eee, #ddd);
}

/* line 69, app/assets/stylesheets/dropzone.scss */
.dropzone .dz-preview.dz-file-preview .dz-details {
  opacity: 1;
}

/* line 73, app/assets/stylesheets/dropzone.scss */
.dropzone .dz-preview.dz-image-preview .dz-details {
  transition: opacity 0.2s linear;
}

/* line 77, app/assets/stylesheets/dropzone.scss */
.dropzone .dz-preview:hover .dz-details {
  opacity: 1;
}

/* line 81, app/assets/stylesheets/dropzone.scss */
.dropzone .dz-preview .dz-details {
  z-index: 20;
  position: absolute;
  top: 10px;
  left: 0;
  opacity: 0;
  font-size: 13px;
  min-width: 100%;
  max-width: 100%;
  padding: 2em 1em;
  text-align: center;
  color: #000;
  line-height: 150%;
}

/* line 96, app/assets/stylesheets/dropzone.scss */
.dropzone .dz-preview .dz-details .dz-size {
  margin-bottom: 1em;
}

/* line 100, app/assets/stylesheets/dropzone.scss */
.dropzone .dz-preview .dz-details .dz-filename {
  white-space: nowrap;
}

/* line 104, app/assets/stylesheets/dropzone.scss */
.dropzone .dz-preview .dz-details .dz-filename:hover span {
  border: 1px solid rgba(200, 200, 200, 0.8);
  background-color: rgba(255, 255, 255, 0.8);
}

/* line 109, app/assets/stylesheets/dropzone.scss */
.dropzone .dz-preview .dz-details .dz-filename:not(:hover) {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* line 114, app/assets/stylesheets/dropzone.scss */
.dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
  border: 1px solid transparent;
}

/* line 118, app/assets/stylesheets/dropzone.scss */
.dropzone .dz-preview .dz-details .dz-filename span,
.dropzone .dz-preview .dz-details .dz-size span {
  background-color: rgba(255, 255, 255, 0.4);
  padding: 0 0.4em;
  border-radius: 3px;
}

/* line 125, app/assets/stylesheets/dropzone.scss */
.dropzone .dz-preview.dz-processing .dz-progress {
  opacity: 1;
  transition: all 0.2s linear;
}

/* line 130, app/assets/stylesheets/dropzone.scss */
.dropzone .dz-preview.dz-complete .dz-progress {
  opacity: 0;
  transition: opacity 0.4s ease-in;
}

/* line 135, app/assets/stylesheets/dropzone.scss */
.dropzone .dz-preview:not(.dz-processing) .dz-progress {
  animation: pulse 6s ease infinite;
}

/* line 139, app/assets/stylesheets/dropzone.scss */
.dropzone .dz-preview .dz-progress {
  opacity: 1;
  z-index: 49;
  pointer-events: none;
  position: absolute;
  height: 20px;
  top: 50%;
  margin-top: -10px;
  left: 15%;
  right: 15%;
  border: 3px solid rgba(0, 0, 0, 0.8);
  background: rgba(0, 0, 0, 0.8);
  border-radius: 10px;
  overflow: hidden;
}

/* line 155, app/assets/stylesheets/dropzone.scss */
.dropzone .dz-preview .dz-progress .dz-upload {
  background: #fff;
  display: block;
  position: relative;
  height: 100%;
  width: 0;
  transition: width 300ms ease-in-out;
  border-radius: 17px;
}

/* line 165, app/assets/stylesheets/dropzone.scss */
.dropzone .dz-preview.dz-error .dz-error-message {
  display: block;
}

/* line 169, app/assets/stylesheets/dropzone.scss */
.dropzone .dz-preview.dz-error:hover .dz-error-message {
  opacity: 1;
  pointer-events: auto;
}

/* line 174, app/assets/stylesheets/dropzone.scss */
.dropzone .dz-preview .dz-error-message {
  pointer-events: none;
  z-index: 49;
  position: absolute;
  display: block;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 8px;
  font-size: 13px;
  top: 130px;
  left: -10px;
  width: 140px;
  background: #ff5e5d;
  padding: 0.5em 1em;
  color: #fff;
}

/* line 192, app/assets/stylesheets/dropzone.scss */
.dropzone .dz-preview .dz-error-message:after {
  content: "";
  position: absolute;
  top: -6px;
  left: 64px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #ff5e5d;
}

/* line 204, app/assets/stylesheets/dropzone.scss */
.dropzone .dz-preview.dz-success .dz-success-mark {
  animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
}

/* line 208, app/assets/stylesheets/dropzone.scss */
.dropzone .dz-preview.dz-error .dz-error-mark {
  opacity: 1;
  animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
}

/* line 213, app/assets/stylesheets/dropzone.scss */
.dropzone .dz-preview .dz-success-mark,
.dropzone .dz-preview .dz-error-mark {
  pointer-events: none;
  opacity: 0;
  z-index: 49;
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  margin-left: -27px;
  margin-top: -27px;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 50%;
}

/* line 228, app/assets/stylesheets/dropzone.scss */
.dropzone .dz-preview .dz-success-mark svg,
.dropzone .dz-preview .dz-error-mark svg {
  display: block;
  width: 54px;
  height: 54px;
  fill: #fff;
}

/* line 236, app/assets/stylesheets/dropzone.scss */
.dropzone .dz-message .dz-button {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
}

/* line 246, app/assets/stylesheets/dropzone.scss */
.dropzone .dz-preview:hover {
  z-index: 49;
}

/* Compact prompt so the message and the saved-image/placeholder area both
   fit inside the resized single-file tiles (sc-3930). */
/* line 252, app/assets/stylesheets/dropzone.scss */
.dropzone[data-dropzone-max-files="1"] .dz-message {
  flex-shrink: 0;
  font-size: 12px;
  line-height: 16px;
  margin: 4px 0;
  padding: 0 8px;
}

/* Single file upload styling for COA images. The preview fills whatever
   size the zone's own utility classes give it (sc-3930 resized the
   identification tiles to h-[160px] w-full), instead of a hardcoded
   220x200 that overflowed smaller tiles. */
/* line 264, app/assets/stylesheets/dropzone.scss */
.dropzone[data-dropzone-max-files="1"] .dz-preview {
  width: 100% !important;
  margin: 0 auto !important;
  height: 100% !important;
  position: relative;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* line 273, app/assets/stylesheets/dropzone.scss */
.dropzone[data-dropzone-max-files="1"] .dz-preview .dz-image {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* line 282, app/assets/stylesheets/dropzone.scss */
.dropzone[data-dropzone-max-files="1"] .dz-preview .dz-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Styled remove icon button in top-right corner */
/* line 289, app/assets/stylesheets/dropzone.scss */
.dropzone .dz-preview .dz-remove-icon {
  position: absolute;
  top: 0px;
  right: 0px;
  border-radius: 50%;
  background: #000000;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s ease;
  z-index: 100;
  pointer-events: auto;
}

/* line 307, app/assets/stylesheets/dropzone.scss */
.dropzone[data-dropzone-max-files="1"] .dz-preview .dz-remove-icon {
  top: 6px;
  right: 10px;
}

/* line 312, app/assets/stylesheets/dropzone.scss */
.dropzone .dz-preview .dz-remove-icon:hover {
  opacity: 0.8;
}

/* line 316, app/assets/stylesheets/dropzone.scss */
.dropzone .dz-preview .dz-remove-icon svg {
  display: block;
  pointer-events: none;
  width: 14px;
  height: 14px;
}

/* Hide the default text-based remove link */
/* line 324, app/assets/stylesheets/dropzone.scss */
.dropzone[data-dropzone-max-files="1"]
.dz-preview
.dz-remove:not(.dz-remove-icon) {
  display: none;
}

/* Fallback height for single-file zones that carry no height utility of
   their own (artwork asset form, fair setup) — definite so the preview's
   percentage height resolves. :where() keeps specificity at zero, so a
   zone's own utility class (e.g. the h-[160px] identification tiles)
   always wins. */
/* line 335, app/assets/stylesheets/dropzone.scss */
:where(.dropzone[data-dropzone-max-files="1"]) {
  height: 200px;
}

/* Edition artwork unique image dropzones */
/* line 340, app/assets/stylesheets/dropzone.scss */
.edition-artwork-unique-image .dropzone-container {
  position: relative;
}

/* line 344, app/assets/stylesheets/dropzone.scss */
.edition-artwork-unique-image .dropzone {
  position: relative;
}

/* line 348, app/assets/stylesheets/dropzone.scss */
.edition-artwork-unique-image .dz-preview {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  margin: 0 !important;
}

/* line 355, app/assets/stylesheets/dropzone.scss */
.edition-artwork-unique-image .dz-preview .dz-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* line 1, app/assets/stylesheets/datepicker.scss */
:root {
  --sdp-selected: #005fcc;
  --sdp-selected-invert: #ffffff;
  --sdp-prev-month: #888888;
  --sdp-next-month: #888888;
  --sdp-disabled: #1010104d;
  --sdp-disabled-invert: #ffffff;
  --sdp-background: #ffffff;
  --sdp-border: #dddddd;
  --sdp-shadow: 0deg 0% 50%;
  --sdp-icon: #4a4a4acc;
  --sdp-nav-button-background: #f5f5f5;
  --sdp-nav-button-background-hover: #eeeeee;
  --sdp-days-of-week: #4a4a4a;
}

@keyframes fadeIn {
  from {
    transform: translateY(-40px) scale(0.75);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  to {
    transform: translateY(-40px) scale(0.75);
    opacity: 0;
  }
}

/* line 38, app/assets/stylesheets/datepicker.scss */
[data-controller="datepicker"] {
  position: relative;
}

/* line 41, app/assets/stylesheets/datepicker.scss */
.sdp-cal {
  z-index: 1;
  position: absolute;
  right: 0;
  top: -10px;
  margin-top: 5px;
  box-sizing: border-box;
  width: fit-content;
  border: 1px solid var(--sdp-border);
  border-radius: 5px;
  padding: 15px;
  background: var(--sdp-background);
}

/* line 54, app/assets/stylesheets/datepicker.scss */
.sdp-cal.fade-in {
  animation: fadeIn 0.1s ease-out;
}

/* line 57, app/assets/stylesheets/datepicker.scss */
.sdp-cal.fade-out {
  animation: fadeOut 0.1s ease-out;
}

@media (prefers-reduced-motion) {
  /* line 61, app/assets/stylesheets/datepicker.scss */
  .sdp-cal.fade-in,
.sdp-cal.fade-out {
    animation: none;
  }
}

/* line 66, app/assets/stylesheets/datepicker.scss */
.sdp-cal button {
  border: none;
  background: none;
  padding: 0;
}

/* line 72, app/assets/stylesheets/datepicker.scss */
.sdp-nav {
  margin-bottom: 1.2em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* line 78, app/assets/stylesheets/datepicker.scss */
.sdp-nav-dropdowns,
.sdp-nav-buttons {
  display: flex;
}

/* line 82, app/assets/stylesheets/datepicker.scss */
.sdp-nav-dropdowns select {
  -moz-appearance: none;
  -webkit-appearance: none;
  background: var(--sdp-background);
  color: currentColor;
  padding: 1px 12px 1px 1px;
  border: 1px solid transparent;
  font-size: 1.1em;
  font-weight: 500;
  cursor: pointer;
}

/* line 93, app/assets/stylesheets/datepicker.scss */
.sdp-nav-dropdowns > div {
  display: flex;
  align-items: center;
}

/* line 97, app/assets/stylesheets/datepicker.scss */
.sdp-nav-dropdowns > div::after {
  content: " ";
  border: 2px solid var(--sdp-icon);
  border-top: 0;
  border-right: 0;
  width: 0.3em;
  height: 0.3em;
  transform: translateY(-1px) rotate(-45deg);
  right: 10px;
  position: relative;
}

/* line 108, app/assets/stylesheets/datepicker.scss */
.sdp-nav-buttons button {
  display: flex;
  place-content: center;
  place-items: center;
  border-radius: 50%;
  width: 1.5em;
  height: 1.5em;
  color: var(--sdp-icon);
  background-color: var(--sdp-nav-button-background);
  cursor: pointer;
}

/* line 119, app/assets/stylesheets/datepicker.scss */
.sdp-nav-buttons button:hover {
  background-color: var(--sdp-nav-button-background-hover);
}

/* line 122, app/assets/stylesheets/datepicker.scss */
.sdp-nav-buttons svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  width: 0.75em;
  height: 0.75em;
}

/* line 129, app/assets/stylesheets/datepicker.scss */
.sdp-goto-today {
  margin-left: 0.3em;
  margin-right: 0.3em;
}

/* line 134, app/assets/stylesheets/datepicker.scss */
.sdp-days-of-week,
.sdp-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  place-items: center;
  gap: 0;
}

/* line 141, app/assets/stylesheets/datepicker.scss */
.sdp-days-of-week {
  margin-bottom: 0;
}

/* line 144, app/assets/stylesheets/datepicker.scss */
.sdp-days-of-week div {
  text-transform: uppercase;
  font-size: 0.5em;
  color: var(--sdp-days-of-week);
  font-weight: 600;
}

/* line 151, app/assets/stylesheets/datepicker.scss */
.sdp-days button {
  width: 4.5ch;
  height: 4.5ch;
  border-radius: 50%;
  background-color: transparent;
}

/* line 157, app/assets/stylesheets/datepicker.scss */
.sdp-days button:not([aria-disabled]) {
  color: currentColor;
  cursor: pointer;
}

/* line 161, app/assets/stylesheets/datepicker.scss */
.sdp-days button[aria-disabled] {
  color: var(--sdp-disabled);
}

/* line 165, app/assets/stylesheets/datepicker.scss */
.sdp-days button.sdp-selected:not([aria-disabled]) {
  background-color: var(--sdp-selected);
  color: var(--sdp-selected-invert);
}

/* line 169, app/assets/stylesheets/datepicker.scss */
.sdp-days button.sdp-selected[aria-disabled] {
  background-color: var(--sdp-disabled);
  color: var(--sdp-disabled-invert);
}

/* line 174, app/assets/stylesheets/datepicker.scss */
.sdp-days button.sdp-today:not([aria-disabled]) {
  border: 1px solid var(--sdp-selected);
}

/* line 177, app/assets/stylesheets/datepicker.scss */
.sdp-days button.sdp-today[aria-disabled] {
  border: 1px solid var(--sdp-disabled);
}

/* Ideally we would use outline and outline-offset for the :hover and :focus
 * styles.  But Safari's outline doesn't follow the border-radius; it is square.
 * https://bugs.webkit.org/show_bug.cgi?id=231433
 * https://bugs.webkit.org/show_bug.cgi?id=20807
 */
/* line 186, app/assets/stylesheets/datepicker.scss */
.sdp-days button:hover,
.sdp-days button:focus {
  outline: none;
}

/* line 191, app/assets/stylesheets/datepicker.scss */
.sdp-days button:not([aria-disabled]):hover,
.sdp-days button:not([aria-disabled]):focus {
  border: 2px solid var(--sdp-selected);
}

/* line 195, app/assets/stylesheets/datepicker.scss */
.sdp-days button[aria-disabled]:hover,
.sdp-days button[aria-disabled]:focus {
  border: 2px solid var(--sdp-disabled);
}

/* line 200, app/assets/stylesheets/datepicker.scss */
.sdp-days button.sdp-selected:not([aria-disabled]):hover,
.sdp-days button.sdp-selected:not([aria-disabled]):focus {
  border: 2px solid var(--sdp-selected-invert);
  box-shadow: 0 0 0 2px var(--sdp-selected);
}

/* line 205, app/assets/stylesheets/datepicker.scss */
.sdp-days button.sdp-selected[aria-disabled]:hover,
.sdp-days button.sdp-selected[aria-disabled]:focus {
  border: 2px solid var(--sdp-disabled-invert);
  box-shadow: 0 0 0 2px var(--sdp-disabled);
}

/* line 211, app/assets/stylesheets/datepicker.scss */
.sdp-days button.sdp-today:not([aria-disabled]):hover,
.sdp-days button.sdp-today:not([aria-disabled]):focus {
  border: 2px solid var(--sdp-selected);
}

/* line 215, app/assets/stylesheets/datepicker.scss */
.sdp-days button.sdp-today[aria-disabled]:hover,
.sdp-days button.sdp-today[aria-disabled]:focus {
  border: 2px solid var(--sdp-disabled);
}

/* line 220, app/assets/stylesheets/datepicker.scss */
.sdp-days button.sdp-prev-month:not([aria-disabled]) {
  color: var(--sdp-prev-month);
}

/* line 223, app/assets/stylesheets/datepicker.scss */
.sdp-days button.sdp-next-month:not([aria-disabled]) {
  color: var(--sdp-next-month);
}

/* line 226, app/assets/stylesheets/datepicker.scss */
.sdp-days button.sdp-prev-month[aria-disabled],
.sdp-days button.sdp-next-month[aria-disabled] {
  color: var(--sdp-disabled);
}
trix-editor {
  border: 1px solid #bbb;
  border-radius: 3px;
  margin: 0;
  padding: 0.4em 0.6em;
  min-height: 5em;
  outline: none; }

trix-toolbar * {
  box-sizing: border-box; }

trix-toolbar .trix-button-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  overflow-x: auto; }

trix-toolbar .trix-button-group {
  display: flex;
  margin-bottom: 10px;
  border: 1px solid #bbb;
  border-top-color: #ccc;
  border-bottom-color: #888;
  border-radius: 3px; }
  trix-toolbar .trix-button-group:not(:first-child) {
    margin-left: 1.5vw; }
    @media (max-width: 768px) {
      trix-toolbar .trix-button-group:not(:first-child) {
        margin-left: 0; } }

trix-toolbar .trix-button-group-spacer {
  flex-grow: 1; }
  @media (max-width: 768px) {
    trix-toolbar .trix-button-group-spacer {
      display: none; } }

trix-toolbar .trix-button {
  position: relative;
  float: left;
  color: rgba(0, 0, 0, 0.6);
  font-size: 0.75em;
  font-weight: 600;
  white-space: nowrap;
  padding: 0 0.5em;
  margin: 0;
  outline: none;
  border: none;
  border-bottom: 1px solid #ddd;
  border-radius: 0;
  background: transparent; }
  trix-toolbar .trix-button:not(:first-child) {
    border-left: 1px solid #ccc; }
  trix-toolbar .trix-button.trix-active {
    background: #cbeefa;
    color: black; }
  trix-toolbar .trix-button:not(:disabled) {
    cursor: pointer; }
  trix-toolbar .trix-button:disabled {
    color: rgba(0, 0, 0, 0.125); }
  @media (max-width: 768px) {
    trix-toolbar .trix-button {
      letter-spacing: -0.01em;
      padding: 0 0.3em; } }

trix-toolbar .trix-button--icon {
  font-size: inherit;
  width: 2.6em;
  height: 1.6em;
  max-width: calc(0.8em + 4vw);
  text-indent: -9999px; }
  @media (max-width: 768px) {
    trix-toolbar .trix-button--icon {
      height: 2em;
      max-width: calc(0.8em + 3.5vw); } }
  trix-toolbar .trix-button--icon::before {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.6;
    content: "";
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain; }
    @media (max-width: 768px) {
      trix-toolbar .trix-button--icon::before {
        right: 6%;
        left: 6%; } }
  trix-toolbar .trix-button--icon.trix-active::before {
    opacity: 1; }
  trix-toolbar .trix-button--icon:disabled::before {
    opacity: 0.125; }

trix-toolbar .trix-button--icon-attach::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10.5%2018V7.5c0-2.25%203-2.25%203%200V18c0%204.125-6%204.125-6%200V7.5c0-6.375%209-6.375%209%200V18%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  top: 8%;
  bottom: 4%; }

trix-toolbar .trix-button--icon-bold::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6.522%2019.242a.5.5%200%200%201-.5-.5V5.35a.5.5%200%200%201%20.5-.5h5.783c1.347%200%202.46.345%203.24.982.783.64%201.216%201.562%201.216%202.683%200%201.13-.587%202.129-1.476%202.71a.35.35%200%200%200%20.049.613c1.259.56%202.101%201.742%202.101%203.22%200%201.282-.483%202.334-1.363%203.063-.876.726-2.132%201.12-3.66%201.12h-5.89ZM9.27%207.347v3.362h1.97c.766%200%201.347-.17%201.733-.464.38-.291.587-.716.587-1.27%200-.53-.183-.928-.513-1.198-.334-.273-.838-.43-1.505-.43H9.27Zm0%205.606v3.791h2.389c.832%200%201.448-.177%201.853-.497.399-.315.614-.786.614-1.423%200-.62-.22-1.077-.63-1.385-.418-.313-1.053-.486-1.905-.486H9.27Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-italic::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%205h6.5v2h-2.23l-2.31%2010H13v2H6v-2h2.461l2.306-10H9V5Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-link::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M18.948%205.258a4.337%204.337%200%200%200-6.108%200L11.217%206.87a.993.993%200%200%200%200%201.41c.392.39%201.027.39%201.418%200l1.623-1.613a2.323%202.323%200%200%201%203.271%200%202.29%202.29%200%200%201%200%203.251l-2.393%202.38a3.021%203.021%200%200%201-4.255%200l-.05-.049a1.007%201.007%200%200%200-1.418%200%20.993.993%200%200%200%200%201.41l.05.049a5.036%205.036%200%200%200%207.091%200l2.394-2.38a4.275%204.275%200%200%200%200-6.072Zm-13.683%2013.6a4.337%204.337%200%200%200%206.108%200l1.262-1.255a.993.993%200%200%200%200-1.41%201.007%201.007%200%200%200-1.418%200L9.954%2017.45a2.323%202.323%200%200%201-3.27%200%202.29%202.29%200%200%201%200-3.251l2.344-2.331a2.579%202.579%200%200%201%203.631%200c.392.39%201.027.39%201.419%200a.993.993%200%200%200%200-1.41%204.593%204.593%200%200%200-6.468%200l-2.345%202.33a4.275%204.275%200%200%200%200%206.072Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-strike::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6%2014.986c.088%202.647%202.246%204.258%205.635%204.258%203.496%200%205.713-1.728%205.713-4.463%200-.275-.02-.536-.062-.781h-3.461c.398.293.573.654.573%201.123%200%201.035-1.074%201.787-2.646%201.787-1.563%200-2.773-.762-2.91-1.924H6ZM6.432%2010h3.763c-.632-.314-.914-.715-.914-1.273%200-1.045.977-1.739%202.432-1.739%201.475%200%202.52.723%202.617%201.914h2.764c-.05-2.548-2.11-4.238-5.39-4.238-3.145%200-5.392%201.719-5.392%204.316%200%20.363.04.703.12%201.02ZM4%2011a1%201%200%201%200%200%202h15a1%201%200%201%200%200-2H4Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-quote::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M4.581%208.471c.44-.5%201.056-.834%201.758-.995C8.074%207.17%209.201%207.822%2010%208.752c1.354%201.578%201.33%203.555.394%205.277-.941%201.731-2.788%203.163-4.988%203.56a.622.622%200%200%201-.653-.317c-.113-.205-.121-.49.16-.764.294-.286.567-.566.791-.835.222-.266.413-.54.524-.815.113-.28.156-.597.026-.908-.128-.303-.39-.524-.72-.69a3.02%203.02%200%200%201-1.674-2.7c0-.905.283-1.59.72-2.088Zm9.419%200c.44-.5%201.055-.834%201.758-.995%201.734-.306%202.862.346%203.66%201.276%201.355%201.578%201.33%203.555.395%205.277-.941%201.731-2.789%203.163-4.988%203.56a.622.622%200%200%201-.653-.317c-.113-.205-.122-.49.16-.764.294-.286.567-.566.791-.835.222-.266.412-.54.523-.815.114-.28.157-.597.026-.908-.127-.303-.39-.524-.72-.69a3.02%203.02%200%200%201-1.672-2.701c0-.905.283-1.59.72-2.088Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-heading-1::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21.5%207.5v-3h-12v3H14v13h3v-13h4.5ZM9%2013.5h3.5v-3h-10v3H6v7h3v-7Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-code::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.293%2011.293a1%201%200%200%200%200%201.414l4%204a1%201%200%201%200%201.414-1.414L5.414%2012l3.293-3.293a1%201%200%200%200-1.414-1.414l-4%204Zm13.414%205.414%204-4a1%201%200%200%200%200-1.414l-4-4a1%201%200%201%200-1.414%201.414L18.586%2012l-3.293%203.293a1%201%200%200%200%201.414%201.414Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-bullet-list::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%207.5a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203ZM8%206a1%201%200%200%201%201-1h11a1%201%200%201%201%200%202H9a1%201%200%200%201-1-1Zm1%205a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm0%206a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm-2.5-5a1.5%201.5%200%201%201-3%200%201.5%201.5%200%200%201%203%200ZM5%2019.5a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-number-list::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%204h2v4H4V5H3V4Zm5%202a1%201%200%200%201%201-1h11a1%201%200%201%201%200%202H9a1%201%200%200%201-1-1Zm1%205a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm0%206a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm-3.5-7H6v1l-1.5%202H6v1H3v-1l1.667-2H3v-1h2.5ZM3%2017v-1h3v4H3v-1h2v-.5H4v-1h1V17H3Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-undo::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%2014a1%201%200%200%200%201%201h6a1%201%200%201%200%200-2H6.257c2.247-2.764%205.151-3.668%207.579-3.264%202.589.432%204.739%202.356%205.174%205.405a1%201%200%200%200%201.98-.283c-.564-3.95-3.415-6.526-6.825-7.095C11.084%207.25%207.63%208.377%205%2011.39V8a1%201%200%200%200-2%200v6Zm2-1Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-redo::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21%2014a1%201%200%200%201-1%201h-6a1%201%200%201%201%200-2h3.743c-2.247-2.764-5.151-3.668-7.579-3.264-2.589.432-4.739%202.356-5.174%205.405a1%201%200%200%201-1.98-.283c.564-3.95%203.415-6.526%206.826-7.095%203.08-.513%206.534.614%209.164%203.626V8a1%201%200%201%201%202%200v6Zm-2-1Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-decrease-nesting-level::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%206a1%201%200%200%201%201-1h12a1%201%200%201%201%200%202H6a1%201%200%200%201-1-1Zm4%205a1%201%200%201%200%200%202h9a1%201%200%201%200%200-2H9Zm-3%206a1%201%200%201%200%200%202h12a1%201%200%201%200%200-2H6Zm-3.707-5.707a1%201%200%200%200%200%201.414l2%202a1%201%200%201%200%201.414-1.414L4.414%2012l1.293-1.293a1%201%200%200%200-1.414-1.414l-2%202Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-increase-nesting-level::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%206a1%201%200%200%201%201-1h12a1%201%200%201%201%200%202H6a1%201%200%200%201-1-1Zm4%205a1%201%200%201%200%200%202h9a1%201%200%201%200%200-2H9Zm-3%206a1%201%200%201%200%200%202h12a1%201%200%201%200%200-2H6Zm-2.293-2.293%202-2a1%201%200%200%200%200-1.414l-2-2a1%201%200%201%200-1.414%201.414L3.586%2012l-1.293%201.293a1%201%200%201%200%201.414%201.414Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-dialogs {
  position: relative; }

trix-toolbar .trix-dialog {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-size: 0.75em;
  padding: 15px 10px;
  background: #fff;
  box-shadow: 0 0.3em 1em #ccc;
  border-top: 2px solid #888;
  border-radius: 5px;
  z-index: 5; }

trix-toolbar .trix-input--dialog {
  font-size: inherit;
  font-weight: normal;
  padding: 0.5em 0.8em;
  margin: 0 10px 0 0;
  border-radius: 3px;
  border: 1px solid #bbb;
  background-color: #fff;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none; }
  trix-toolbar .trix-input--dialog.validate:invalid {
    box-shadow: #F00 0px 0px 1.5px 1px; }

trix-toolbar .trix-button--dialog {
  font-size: inherit;
  padding: 0.5em;
  border-bottom: none; }

trix-toolbar .trix-dialog--link {
  max-width: 600px; }

trix-toolbar .trix-dialog__link-fields {
  display: flex;
  align-items: baseline; }
  trix-toolbar .trix-dialog__link-fields .trix-input {
    flex: 1; }
  trix-toolbar .trix-dialog__link-fields .trix-button-group {
    flex: 0 0 content;
    margin: 0; }

trix-editor [data-trix-mutable]:not(.attachment__caption-editor) {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

trix-editor [data-trix-mutable]::-moz-selection,
trix-editor [data-trix-cursor-target]::-moz-selection, trix-editor [data-trix-mutable] ::-moz-selection {
  background: none; }

trix-editor [data-trix-mutable]::selection,
trix-editor [data-trix-cursor-target]::selection, trix-editor [data-trix-mutable] ::selection {
  background: none; }

trix-editor .attachment__caption-editor:focus[data-trix-mutable]::-moz-selection {
  background: highlight; }

trix-editor .attachment__caption-editor:focus[data-trix-mutable]::selection {
  background: highlight; }

trix-editor [data-trix-mutable].attachment.attachment--file {
  box-shadow: 0 0 0 2px highlight;
  border-color: transparent; }

trix-editor [data-trix-mutable].attachment img {
  box-shadow: 0 0 0 2px highlight; }

trix-editor .attachment {
  position: relative; }
  trix-editor .attachment:hover {
    cursor: default; }

trix-editor .attachment--preview .attachment__caption:hover {
  cursor: text; }

trix-editor .attachment__progress {
  position: absolute;
  z-index: 1;
  height: 20px;
  top: calc(50% - 10px);
  left: 5%;
  width: 90%;
  opacity: 0.9;
  transition: opacity 200ms ease-in; }
  trix-editor .attachment__progress[value="100"] {
    opacity: 0; }

trix-editor .attachment__caption-editor {
  display: inline-block;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  color: inherit;
  text-align: center;
  vertical-align: top;
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none; }

trix-editor .attachment__toolbar {
  position: absolute;
  z-index: 1;
  top: -0.9em;
  left: 0;
  width: 100%;
  text-align: center; }

trix-editor .trix-button-group {
  display: inline-flex; }

trix-editor .trix-button {
  position: relative;
  float: left;
  color: #666;
  white-space: nowrap;
  font-size: 80%;
  padding: 0 0.8em;
  margin: 0;
  outline: none;
  border: none;
  border-radius: 0;
  background: transparent; }
  trix-editor .trix-button:not(:first-child) {
    border-left: 1px solid #ccc; }
  trix-editor .trix-button.trix-active {
    background: #cbeefa; }
  trix-editor .trix-button:not(:disabled) {
    cursor: pointer; }

trix-editor .trix-button--remove {
  text-indent: -9999px;
  display: inline-block;
  padding: 0;
  outline: none;
  width: 1.8em;
  height: 1.8em;
  line-height: 1.8em;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid highlight;
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.25); }
  trix-editor .trix-button--remove::before {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.7;
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg%20height%3D%2224%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M19%206.41%2017.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z%22%2F%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 90%; }
  trix-editor .trix-button--remove:hover {
    border-color: #333; }
    trix-editor .trix-button--remove:hover::before {
      opacity: 1; }

trix-editor .attachment__metadata-container {
  position: relative; }

trix-editor .attachment__metadata {
  position: absolute;
  left: 50%;
  top: 2em;
  transform: translate(-50%, 0);
  max-width: 90%;
  padding: 0.1em 0.6em;
  font-size: 0.8em;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 3px; }
  trix-editor .attachment__metadata .attachment__name {
    display: inline-block;
    max-width: 100%;
    vertical-align: bottom;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }
  trix-editor .attachment__metadata .attachment__size {
    margin-left: 0.2em;
    white-space: nowrap; }

.trix-content {
  line-height: 1.5;
  overflow-wrap: break-word;
  word-break: break-word; }
  .trix-content * {
    box-sizing: border-box;
    margin: 0;
    padding: 0; }
  .trix-content h1 {
    font-size: 1.2em;
    line-height: 1.2; }
  .trix-content blockquote {
    border: 0 solid #ccc;
    border-left-width: 0.3em;
    margin-left: 0.3em;
    padding-left: 0.6em; }
  .trix-content [dir=rtl] blockquote,
  .trix-content blockquote[dir=rtl] {
    border-width: 0;
    border-right-width: 0.3em;
    margin-right: 0.3em;
    padding-right: 0.6em; }
  .trix-content li {
    margin-left: 1em; }
  .trix-content [dir=rtl] li {
    margin-right: 1em; }
  .trix-content pre {
    display: inline-block;
    width: 100%;
    vertical-align: top;
    font-family: monospace;
    font-size: 0.9em;
    padding: 0.5em;
    white-space: pre;
    background-color: #eee;
    overflow-x: auto; }
  .trix-content img {
    max-width: 100%;
    height: auto; }
  .trix-content .attachment {
    display: inline-block;
    position: relative;
    max-width: 100%; }
    .trix-content .attachment a {
      color: inherit;
      text-decoration: none; }
      .trix-content .attachment a:hover, .trix-content .attachment a:visited:hover {
        color: inherit; }
  .trix-content .attachment__caption {
    text-align: center; }
    .trix-content .attachment__caption .attachment__name + .attachment__size::before {
      content: ' \2022 '; }
  .trix-content .attachment--preview {
    width: 100%;
    text-align: center; }
    .trix-content .attachment--preview .attachment__caption {
      color: #666;
      font-size: 0.9em;
      line-height: 1.2; }
  .trix-content .attachment--file {
    color: #333;
    line-height: 1;
    margin: 0 2px 2px 2px;
    padding: 0.4em 1em;
    border: 1px solid #bbb;
    border-radius: 5px; }
  .trix-content .attachment-gallery {
    display: flex;
    flex-wrap: wrap;
    position: relative; }
    .trix-content .attachment-gallery .attachment {
      flex: 1 0 33%;
      padding: 0 0.5em;
      max-width: 33%; }
    .trix-content .attachment-gallery.attachment-gallery--2 .attachment, .trix-content .attachment-gallery.attachment-gallery--4 .attachment {
      flex-basis: 50%;
      max-width: 50%; }
/*
 * Provides a drop-in pointer for the default Trix stylesheet that will format the toolbar and
 * the trix-editor content (whether displayed or under editing). Feel free to incorporate this
 * inclusion directly in any other asset bundle and remove this file.
 *
*/

/*
 * We need to override trix.css’s image gallery styles to accommodate the
 * <action-text-attachment> element we wrap around attachments. Otherwise,
 * images in galleries will be squished by the max-width: 33%; rule.
*/
.trix-content .attachment-gallery > action-text-attachment,
.trix-content .attachment-gallery > .attachment {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;
}

.trix-content
  .attachment-gallery.attachment-gallery--2
  > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--2 > .attachment,
.trix-content
  .attachment-gallery.attachment-gallery--4
  > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--4 > .attachment {
  flex-basis: 50%;
  max-width: 50%;
}

.trix-content action-text-attachment .attachment {
  padding: 0 !important;
  max-width: 100% !important;
}
/* line 2, app/assets/stylesheets/art_fair.scss */
.art-fair-nav nav {
  margin: 0;
  padding: 0;
}

/* line 5, app/assets/stylesheets/art_fair.scss */
.art-fair-nav nav:after {
  content: "";
  display: table;
  clear: both;
}

/* line 10, app/assets/stylesheets/art_fair.scss */
.art-fair-nav nav #art-fair-logo {
  display: block;
  float: left;
  margin-top: 12px;
  margin-right: 20px;
}

/* line 16, app/assets/stylesheets/art_fair.scss */
.art-fair-nav nav #art-fair-desktop-login {
  position: absolute;
  right: 5px;
  top: 0;
}

/* line 21, app/assets/stylesheets/art_fair.scss */
.art-fair-nav nav ul {
  float: left;
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
}

/* line 27, app/assets/stylesheets/art_fair.scss */
.art-fair-nav nav ul li {
  margin: 0px;
  display: inline-block;
  background-color: white;
}

/* line 32, app/assets/stylesheets/art_fair.scss */
.art-fair-nav nav ul li ul li {
  background-color: white;
}

/* line 34, app/assets/stylesheets/art_fair.scss */
.art-fair-nav nav ul li ul li:hover {
  background-color: #eee;
}

/* line 40, app/assets/stylesheets/art_fair.scss */
.art-fair-nav nav ul li:hover > ul {
  display: inherit;
}

/* line 45, app/assets/stylesheets/art_fair.scss */
.art-fair-nav nav ul li#art-fair-mobile-login {
  display: none;
}

/* line 48, app/assets/stylesheets/art_fair.scss */
.art-fair-nav nav ul ul {
  display: none;
  position: absolute;
  top: 72px;
}

/* line 52, app/assets/stylesheets/art_fair.scss */
.art-fair-nav nav ul ul li {
  width: 500px;
  float: none;
  display: list-item;
  position: relative;
}

/* line 59, app/assets/stylesheets/art_fair.scss */
.art-fair-nav nav ul ul ul li {
  position: relative;
  top: -73px;
  left: 498px;
}

/* line 67, app/assets/stylesheets/art_fair.scss */
.art-fair-nav nav a {
  display: block;
  padding: 0 20px;
  line-height: 72px;
  text-decoration: none;
}

/* line 72, app/assets/stylesheets/art_fair.scss */
.art-fair-nav nav a:hover {
  background-color: #eee;
}

/* line 77, app/assets/stylesheets/art_fair.scss */
.art-fair-nav nav a.login-link:hover {
  background-color: #fff;
}

/* line 81, app/assets/stylesheets/art_fair.scss */
.art-fair-nav nav a.create-account-link {
  line-height: 40px;
}

/* line 83, app/assets/stylesheets/art_fair.scss */
.art-fair-nav nav a.create-account-link:hover {
  background-color: #000;
}

/* line 87, app/assets/stylesheets/art_fair.scss */
.art-fair-nav nav a.dashboard-link {
  display: flex;
  line-height: 40px;
  padding: 0;
}

/* line 92, app/assets/stylesheets/art_fair.scss */
.art-fair-nav nav a.dashboard-link:hover {
  background-color: #fff;
}

/* line 100, app/assets/stylesheets/art_fair.scss */
.art-fair-nav .art-fair-toggle {
  display: none;
}

/* line 104, app/assets/stylesheets/art_fair.scss */
.art-fair-nav .top-toggle {
  margin-top: 30px;
  float: right;
}

/* line 111, app/assets/stylesheets/art_fair.scss */
.art-fair-nav [id^="drop"] {
  display: none;
}

@media all and (max-width: 1024px) {
  /* line 116, app/assets/stylesheets/art_fair.scss */
  .art-fair-nav #art-fair-logo {
    margin-top: 6px;
  }
  /* line 120, app/assets/stylesheets/art_fair.scss */
  .art-fair-nav #art-fair-desktop-login {
    display: none;
  }
  /* line 124, app/assets/stylesheets/art_fair.scss */
  .art-fair-nav nav {
    margin: 0;
  }
  /* line 127, app/assets/stylesheets/art_fair.scss */
  .art-fair-nav nav ul li {
    display: block;
    width: 100%;
  }
  /* line 131, app/assets/stylesheets/art_fair.scss */
  .art-fair-nav nav ul li:hover > ul {
    display: none;
  }
  /* line 136, app/assets/stylesheets/art_fair.scss */
  .art-fair-nav nav ul li .art-fair-toggle:hover {
    background-color: #eee;
  }
  /* line 141, app/assets/stylesheets/art_fair.scss */
  .art-fair-nav nav ul li#art-fair-mobile-login {
    display: block;
  }
  /* line 144, app/assets/stylesheets/art_fair.scss */
  .art-fair-nav nav ul ul {
    float: none;
    position: static;
  }
  /* line 145, app/assets/stylesheets/art_fair.scss */
  .art-fair-nav nav ul ul .art-fair-toggle {
    background-color: white;
    padding: 0 40px;
  }
  /* line 149, app/assets/stylesheets/art_fair.scss */
  .art-fair-nav nav ul ul a {
    padding: 0 40px;
  }
  /* line 153, app/assets/stylesheets/art_fair.scss */
  .art-fair-nav nav ul ul ul a {
    padding: 0 80px;
  }
  /* line 156, app/assets/stylesheets/art_fair.scss */
  .art-fair-nav nav ul ul ul li {
    position: static;
  }
  /* line 162, app/assets/stylesheets/art_fair.scss */
  .art-fair-nav nav ul ul li {
    display: block;
    width: 100%;
  }
  /* line 164, app/assets/stylesheets/art_fair.scss */
  .art-fair-nav nav ul ul li:hover > ul {
    display: none;
  }
  /* line 174, app/assets/stylesheets/art_fair.scss */
  .art-fair-nav nav a:hover {
    background-color: #eee;
  }
  /* line 180, app/assets/stylesheets/art_fair.scss */
  .art-fair-nav .art-fair-toggle {
    display: block;
    background-color: white;
    padding: 0 20px;
    line-height: 72px;
    text-decoration: none;
    border: none;
    cursor: pointer;
  }
  /* line 182, app/assets/stylesheets/art_fair.scss */
  .art-fair-nav .art-fair-toggle + a {
    display: none;
  }
  /* line 195, app/assets/stylesheets/art_fair.scss */
  .art-fair-nav .menu {
    width: 100%;
    display: none;
  }
  /* line 203, app/assets/stylesheets/art_fair.scss */
  .art-fair-nav [id^="drop"]:checked + ul {
    display: block;
  }
}

/* line 213, app/assets/stylesheets/art_fair.scss */
.alphabetical-nav {
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* Internet Explorer 10+ */
}

/* line 217, app/assets/stylesheets/art_fair.scss */
.alphabetical-nav::-webkit-scrollbar {
  display: none;
  /* WebKit browsers (Chrome, Safari, etc.) */
}
/* line 1, app/assets/stylesheets/range_slider.scss */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #5890e4;
  border: 6px solid white;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* line 14, app/assets/stylesheets/range_slider.scss */
input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #5890e4;
  border: 6px solid white;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
/*
 * Always Art design system tokens
 * --------------------------------
 * Source of truth: Figma file 6QhhnZFyAXtstY7LuflJ2u "Design system Always Art"
 *
 * To update a value: open the Figma file in the desktop app, toggle Dev Mode
 * (the </> icon in the top-right), click the relevant variable or layer,
 * and update the hex code or px value here by hand. Then commit the change.
 *
 * Variables are flat and direct (no `var(--x)` chains) to keep the file
 * dead-simple to scan and edit. If you find yourself wishing for a token
 * pipeline, see the spike's recommendation document — that's the "future state"
 * trigger.
 */

:root {
  /* ── Surfaces ──────────────────────────── */
  --aa-bg-primary: #ffffff; /* bg/primary */
  --aa-bg-primary-hover: #f9fafb; /* bg/primary-hover (Zink/50) */
  --aa-bg-secondary: #f9fafb; /* bg/secondary (Zink/50) */
  --aa-bg-secondary-hover: #f3f4f6; /* bg/secondary-hover (Zink/100) */
  --aa-bg-tertiary: #f3f4f6; /* bg/tertiary (Zink/100) */
  --aa-bg-black-solid: #000000; /* bg/black-solid */
  --aa-bg-black-solid-hover: #1f2937; /* bg/black-solid-hover (Zink/800) */
  --aa-bg-disabled: #f3f4f6; /* bg/disabled (Zink/100) */

  /* ── Text ──────────────────────────────── */
  --aa-text-primary: #000000; /* text/primary */
  --aa-text-primary-hover: #1f2937; /* text/primary-hover (Zink/800) */
  --aa-text-secondary: #4b5563; /* text/secondary (Zink/600) */
  --aa-text-white: #ffffff; /* text/white */
  --aa-text-disabled: #9ca3af; /* text/disabled (Zink/400) */

  /* ── Borders ───────────────────────────── */
  --aa-border-primary: #e5e7eb; /* border/primary (Zink/200) */
  --aa-border-tertiary: #d1d5db; /* border/tertiary (Zink/300) */
  --aa-border-tertiary-hover: #9ca3af; /* border/tertiary-hover (Zink/400) */
  --aa-border-focus: #cbd5e1; /* border/focus (Slate/300) */
  --aa-border-disabled: #e5e7eb; /* border/disabled (Zink/200) */

  /* ── Icons ─────────────────────────────── */
  --aa-icon-primary: #000000; /* icon/primary */
  --aa-icon-primary-hover: #1f2937; /* icon/primary-hover (Zink/800) */
  --aa-icon-white: #ffffff; /* icon/white */
  --aa-icon-disabled: #9ca3af; /* icon/disabled (Zink/400) */
  --aa-icon-size: 20px; /* icon/size */
  /* Not a Figma token (sc-4371): the design system ships one icon size, and at
     20px it fills a 24px xxs control edge to edge, leaving no room for the
     button's own padding. Scoped to that one size in button.css rather than
     overridden per call site. */
  --aa-icon-size-xxs: 14px;

  /* ── Typography ────────────────────────── */
  --aa-font-family: "Poppins", system-ui, -apple-system, sans-serif;
  --aa-font-weight-medium: 500; /* Weights/Medium */

  /* Label sizes — used by Button text */
  --aa-label-lg-size: 16px; /* Label/Label-1/fontSize */
  --aa-label-lg-line: 24px;
  --aa-label-lg-tracking: -0.18px;
  --aa-label-md-size: 14px; /* Label/Label-2/fontSize */
  --aa-label-md-line: 24px;
  --aa-label-md-tracking: -0.16px;
  --aa-label-sm-size: 12px; /* Label/Label-3/fontSize */
  --aa-label-sm-line: 16px;
  --aa-label-sm-tracking: -0.12px;

  /* Not Figma tokens (sc-4371): the system ships one button label size, and at
     12px it crowds the 24px xxs control. One step down, applied only to that
     size in button.css. */
  --aa-label-xs-size: 11px;
  --aa-label-xs-line: 14px;
  --aa-label-xs-tracking: -0.11px;

  /* ── Radius ────────────────────────────── */
  --aa-radius-full: 999px; /* Buttons are pills */

  /* ── Button sizing (t-shirt scale) ─────── */
  --aa-button-height-xxs: 24px;
  --aa-button-height-xs: 32px;
  --aa-button-height-sm: 40px;
  --aa-button-height-base: 48px;
  --aa-button-height-lg: 56px;

  --aa-button-focus-ring: 2px;

  /* ── Combobox sizing (t-shirt scale) ───── */
  /* Heights match the Button scale so a combobox lines up next to a    */
  /* same-size button in compact filter rows.                           */
  --aa-combobox-height-xs: 32px;
  --aa-combobox-height-sm: 40px;
  --aa-combobox-height-base: 48px;
  --aa-combobox-height-lg: 56px;

  /* ── Combobox state ────────────────────── */
  /* error/* tokens are combobox-specific for now — when a second input */
  /* component lands we'll lift these to generic --aa-state-error-*.    */
  --aa-state-error-text: #b91c1c; /* Red/700 */
  --aa-state-error-border: #fca5a5; /* Red/300 */
  --aa-state-error-bg: #fef2f2; /* Red/50 */

  /* ── Combobox chip ─────────────────────── */
  --aa-chip-bg: #f3f4f6; /* Zink/100 */
  --aa-chip-text: #000000;
  --aa-chip-border-radius: 999px;
  --aa-chip-padding-x: 8px;
  --aa-chip-padding-y: 2px;
  --aa-chip-gap: 6px;
  --aa-chip-font-size: 12px;
  --aa-chip-line-height: 16px;
}
/* AvatarComponent styles
 * ----------------------
 * Mirror of the `.Avatar` nested component in the AlwaysArt Figma design
 * system. Three variants (image/initials/placeholder) share the same outer
 * circle and differ in what fills it.
 */

.aa-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--aa-radius-full);
  overflow: hidden;
  font-family: var(--aa-font-family);
  background-color: var(--aa-bg-primary);
  border: 1px solid var(--aa-border-primary);
}

/* ─────── Sizes ─────── */

.aa-avatar--size-sm {
  width: 32px;
  height: 32px;
}

.aa-avatar--size-md {
  width: 40px;
  height: 40px;
}

.aa-avatar--size-lg {
  width: 48px;
  height: 48px;
}

/* The placeholder silhouette scales up with the larger avatar so it doesn't
   float tiny in the 48px circle (relationship detail card, sc-3987). */
.aa-avatar--size-lg .aa-avatar__placeholder {
  width: 20px;
  height: 20px;
}

/* ─────── Variants ─────── */

.aa-avatar--variant-image {
  /* image fills the circle; border stays for crisp definition. */
}

.aa-avatar--variant-initials {
  background-color: var(--aa-bg-tertiary);
  border-color: transparent;
}

.aa-avatar--variant-placeholder {
  background-color: var(--aa-bg-tertiary);
  border-color: var(--aa-bg-primary);
}

/* ─────── Inner content ─────── */

.aa-avatar__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.aa-avatar__initials {
  font-size: var(--aa-label-sm-size);
  line-height: var(--aa-label-sm-line);
  letter-spacing: var(--aa-label-sm-tracking);
  font-weight: var(--aa-font-weight-medium);
  color: var(--aa-text-primary);
}

.aa-avatar__placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--aa-icon-primary);
}

.aa-avatar__placeholder svg {
  width: 100%;
  height: 100%;
}
/* ButtonComponent styles
 * ----------------------
 * Visual values reference variables defined in design_system.css.
 * To change a token globally, edit design_system.css; this file should
 * stay component-specific.
 */

.aa-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--aa-radius-full);
  font-family: var(--aa-font-family);
  font-weight: var(--aa-font-weight-medium);
  cursor: pointer;
  user-select: none;
  appearance: none;
  white-space: nowrap;
  transition: background-color 120ms ease, border-color 120ms ease,
    color 120ms ease;
}

.aa-button:focus-visible {
  outline: var(--aa-button-focus-ring) solid var(--aa-border-focus);
  outline-offset: 2px;
}

.aa-button[disabled] {
  cursor: not-allowed;
  background-color: var(--aa-bg-disabled);
  color: var(--aa-text-disabled);
  border-color: var(--aa-border-disabled);
}

.aa-button[disabled] .aa-button__icon {
  color: var(--aa-icon-disabled);
}

/* ─────── Variants ─────── */

.aa-button--variant-fill {
  background-color: var(--aa-bg-black-solid);
  color: var(--aa-text-white);
  border-color: var(--aa-bg-black-solid);
}
.aa-button--variant-fill:hover:not([disabled]) {
  background-color: var(--aa-bg-black-solid-hover);
}

.aa-button--variant-soft {
  background-color: var(--aa-bg-secondary);
  color: var(--aa-text-primary);
  border-color: var(--aa-bg-secondary);
}
.aa-button--variant-soft:hover:not([disabled]) {
  background-color: var(--aa-bg-secondary-hover);
}

.aa-button--variant-outline {
  background-color: var(--aa-bg-primary);
  color: var(--aa-text-primary);
  border-color: var(--aa-border-tertiary);
}
.aa-button--variant-outline:hover:not([disabled]) {
  background-color: var(--aa-bg-primary-hover);
  border-color: var(--aa-border-tertiary-hover);
}

.aa-button--variant-ghost {
  background-color: transparent;
  color: var(--aa-text-primary);
  border-color: transparent;
}
.aa-button--variant-ghost:hover:not([disabled]) {
  background-color: var(--aa-bg-secondary);
}

/* ─────── Sizes ─────── */

.aa-button--size-xxs {
  height: var(--aa-button-height-xxs);
  padding: 0 8px;
  gap: 4px;
  font-size: var(--aa-label-xs-size);
  line-height: var(--aa-label-xs-line);
  letter-spacing: var(--aa-label-xs-tracking);
}

.aa-button--size-xs {
  height: var(--aa-button-height-xs);
  padding: 4px 12px;
  gap: 4px;
  font-size: var(--aa-label-sm-size);
  line-height: var(--aa-label-sm-line);
  letter-spacing: var(--aa-label-sm-tracking);
}

.aa-button--size-sm {
  height: var(--aa-button-height-sm);
  padding: 8px 12px;
  gap: 8px;
  font-size: var(--aa-label-md-size);
  line-height: var(--aa-label-md-line);
  letter-spacing: var(--aa-label-md-tracking);
}

.aa-button--size-base {
  height: var(--aa-button-height-base);
  padding: 12px 16px;
  gap: 8px;
  font-size: var(--aa-label-lg-size);
  line-height: var(--aa-label-lg-line);
  letter-spacing: var(--aa-label-lg-tracking);
}

.aa-button--size-lg {
  height: var(--aa-button-height-lg);
  padding: 16px;
  gap: 12px;
  font-size: var(--aa-label-lg-size);
  line-height: var(--aa-label-lg-line);
  letter-spacing: var(--aa-label-lg-tracking);
}

/* ─────── Icon-only (Icon=Center) ─────── */

.aa-button--icon-center {
  padding: 0;
  aspect-ratio: 1 / 1;
}

/* ─────── Icon element ─────── */

.aa-button__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--aa-icon-size);
  height: var(--aa-icon-size);
}

/* The shared icon size does not fit the smallest control: 20px in a 24px button
   leaves nothing for its padding, so the glyph reads as oversized next to its
   own label. Scoped here rather than per call site so every xxs button agrees.
   xs (32px) is deliberately left on the shared size. */
.aa-button--size-xxs .aa-button__icon {
  width: var(--aa-icon-size-xxs);
  height: var(--aa-icon-size-xxs);
}

/* STROKE WEIGHT IS NOT SCALE-INVARIANT. These assets are drawn on a 20px
   viewBox with stroke-width 1.5, so at 14px the stroke renders at 1.05px and
   the glyph reads as a hairline — the icon looked faint rather than small.
   Compensating by the same ratio holds the drawn weight, and small glyphs
   carry a little extra well. Harmless on fill-based icons, which have no
   stroke to widen. */
.aa-button--size-xxs .aa-button__icon [stroke] {
  stroke-width: 2.25;
}
/* ComboboxComponent styles
 * ------------------------
 * Visual values reference variables defined in design_system.css.
 * To change a token globally, edit design_system.css; this file should
 * stay component-specific.
 *
 * Visual states (Rest/Hover/Active/Selected/Multiselected) are driven by
 * CSS — :hover, :focus-within, [data-state="open"], and the
 * .aa-combobox--has-selection modifier set server-side / by JS.
 * Error and Disabled are kwargs on the Ruby side, mapped to
 * .aa-combobox--state-error and .aa-combobox--state-disabled.
 */

.aa-combobox {
  display: block;
  position: relative;
  font-family: var(--aa-font-family);
}

/* ─────── Label ─────── */

.aa-combobox__label {
  display: block;
  margin-bottom: 8px;
  font-size: var(--aa-label-md-size);
  line-height: var(--aa-label-md-line);
  letter-spacing: var(--aa-label-md-tracking);
  font-weight: var(--aa-font-weight-medium);
  color: var(--aa-text-primary);
}

.aa-combobox__required {
  color: #ff5e5d; /* matches the existing required-asterisk red */
  margin-left: 2px;
}

/* ─────── Trigger (chips row + chevron) ─────── */

.aa-combobox__trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: var(--aa-bg-primary);
  border: 1px solid var(--aa-border-tertiary);
  border-radius: var(--aa-radius-full);
  cursor: text;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.aa-combobox__trigger:hover {
  border-color: var(--aa-border-tertiary-hover);
}

/* Focused (= Active state in Figma) — show when the input or any chip's
   X button is focused. The trigger gets a focus ring; the input itself
   doesn't, so the user can still see where the caret is. */
.aa-combobox:not(.aa-combobox--state-disabled)
  .aa-combobox__trigger:focus-within {
  border-color: var(--aa-border-focus);
  outline: var(--aa-button-focus-ring) solid var(--aa-border-focus);
  outline-offset: 1px;
}

/* When the panel is open we keep the focus-ring styling even if focus
   briefly drops back to the body. JS sets data-state on the wrapper. */
.aa-combobox[data-state="open"] .aa-combobox__trigger {
  border-color: var(--aa-border-focus);
}

/* ─────── Chips row ─────── */

.aa-combobox__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  flex: 1 0 0;
  min-width: 0;
}

.aa-combobox__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--aa-chip-gap);
  background-color: var(--aa-chip-bg);
  color: var(--aa-chip-text);
  border-radius: var(--aa-chip-border-radius);
  padding: var(--aa-chip-padding-y) var(--aa-chip-padding-x);
  font-size: var(--aa-chip-font-size);
  line-height: var(--aa-chip-line-height);
  max-width: 100%;
}

.aa-combobox__chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aa-combobox__chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: var(--aa-text-secondary);
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
}

.aa-combobox__chip-remove:hover {
  color: var(--aa-text-primary);
}

.aa-combobox__chip-remove:focus-visible {
  outline: 2px solid var(--aa-border-focus);
  outline-offset: 1px;
  border-radius: 2px;
}

/* ─────── Selected counter pill ─────── */
/* Dark pill on the right of the trigger that always shows the current */
/* selection count plus an X to clear all. Hidden when zero selected.  */
/* Uses the [hidden] HTML attribute so it survives any class precedence */
/* surprises with Tailwind's `.hidden`.                                 */

.aa-combobox__counter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  background-color: var(--aa-bg-black-solid);
  color: var(--aa-text-white);
  border-radius: var(--aa-radius-full);
  padding: 2px 6px 2px 10px;
  font-size: var(--aa-label-sm-size);
  line-height: var(--aa-label-sm-line);
  border: 0;
  cursor: pointer;
}

.aa-combobox__counter[hidden] {
  display: none;
}

.aa-combobox__counter:hover {
  background-color: var(--aa-bg-black-solid-hover);
}

.aa-combobox__counter:focus-visible {
  outline: 2px solid var(--aa-border-focus);
  outline-offset: 2px;
}

.aa-combobox__counter-text {
  font-weight: var(--aa-font-weight-medium);
}

.aa-combobox__counter-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Override cross_gray's gray fill so the X reads on the dark pill. */
  color: var(--aa-icon-white);
}

/* ─────── Free-text input ─────── */

.aa-combobox__input {
  flex: 1 0 0;
  min-width: 60px;
  background: transparent;
  border: 0;
  outline: none;
  padding: 0;
  font-family: inherit;
  font-size: var(--aa-label-lg-size);
  line-height: var(--aa-label-lg-line);
  letter-spacing: var(--aa-label-lg-tracking);
  color: var(--aa-text-primary);
}

.aa-combobox__input::placeholder {
  color: var(--aa-text-secondary);
}

/* ─────── Icon + chevron ─────── */

.aa-combobox__icon-start,
.aa-combobox__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--aa-text-secondary);
  flex-shrink: 0;
}

.aa-combobox__icon-start {
  width: var(--aa-icon-size);
  height: var(--aa-icon-size);
}

/* Chevron is a real button — round target + hover affordance signal it */
/* toggles the panel. Reset native button chrome so it inherits the     */
/* trigger's pill aesthetic.                                            */
.aa-combobox__chevron {
  background: transparent;
  border: 0;
  padding: 4px;
  border-radius: var(--aa-radius-full);
  cursor: pointer;
  color: var(--aa-text-secondary);
  transition: background-color 120ms ease, color 120ms ease;
}

.aa-combobox__chevron:hover:not([disabled]) {
  background-color: var(--aa-bg-secondary);
  color: var(--aa-text-primary);
}

.aa-combobox__chevron:focus-visible {
  outline: 2px solid var(--aa-border-focus);
  outline-offset: 2px;
}

/* Chevron flips when the panel is open. */
.aa-combobox[data-state="open"] .aa-combobox__chevron {
  transform: rotate(180deg);
}

.aa-combobox--state-disabled .aa-combobox__chevron {
  cursor: not-allowed;
}

/* ─────── Sizes ─────── */

.aa-combobox--size-xs .aa-combobox__trigger {
  min-height: var(--aa-combobox-height-xs);
  padding: 2px 12px;
}
.aa-combobox--size-xs .aa-combobox__input {
  font-size: var(--aa-label-sm-size);
  line-height: var(--aa-label-sm-line);
  letter-spacing: var(--aa-label-sm-tracking);
}

.aa-combobox--size-sm .aa-combobox__trigger {
  min-height: var(--aa-combobox-height-sm);
  padding: 4px 14px;
}
.aa-combobox--size-sm .aa-combobox__input {
  font-size: var(--aa-label-md-size);
  line-height: var(--aa-label-md-line);
  letter-spacing: var(--aa-label-md-tracking);
}

.aa-combobox--size-base .aa-combobox__trigger {
  min-height: var(--aa-combobox-height-base);
  padding: 8px 16px;
}

.aa-combobox--size-lg .aa-combobox__trigger {
  min-height: var(--aa-combobox-height-lg);
  padding: 12px 16px;
}

/* ─────── Error state ─────── */

.aa-combobox--state-error .aa-combobox__trigger {
  border-color: var(--aa-state-error-border);
  background-color: var(--aa-state-error-bg);
}

.aa-combobox__error {
  margin-top: 4px;
  font-size: var(--aa-label-sm-size);
  line-height: var(--aa-label-sm-line);
  color: var(--aa-state-error-text);
}

/* ─────── Disabled state ─────── */

.aa-combobox--state-disabled .aa-combobox__trigger {
  background-color: var(--aa-bg-disabled);
  border-color: var(--aa-border-disabled);
  cursor: not-allowed;
}

.aa-combobox--state-disabled .aa-combobox__input {
  cursor: not-allowed;
  color: var(--aa-text-disabled);
}

.aa-combobox--state-disabled .aa-combobox__chip-remove {
  display: none;
}

/* ─────── Panel (dropdown listbox) ─────── */

.aa-combobox__panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 30;
  background-color: var(--aa-bg-primary);
  border: 1px solid var(--aa-border-primary);
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
  max-height: 320px;
  overflow-y: auto;
  padding: 4px;
}

.aa-combobox__options {
  list-style: none;
  margin: 0;
  padding: 0;
}

.aa-combobox__option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  font-size: var(--aa-label-md-size);
  line-height: var(--aa-label-md-line);
  color: var(--aa-text-primary);
}

/* Restore [hidden]'s `display: none` when the typeahead filters this  */
/* option out. The user-agent stylesheet ships `[hidden] { display:    */
/* none }` at low specificity (0,1,0), which the rule above overrides  */
/* at the same specificity by source order. The attribute selector     */
/* below bumps specificity to (0,2,0) so [hidden] wins again — same    */
/* trick we used on .aa-combobox__counter[hidden].                     */
.aa-combobox__option[hidden] {
  display: none;
}

.aa-combobox__option:hover,
.aa-combobox__option[data-highlighted="true"] {
  background-color: var(--aa-bg-secondary);
}

/* Typeahead-match highlight. The Stimulus controller wraps the matching */
/* slice in a <strong> with this class on every keystroke; reset the    */
/* browser default to a slightly heavier weight (vs the plain 400 of    */
/* the rest of the label) so the contrast reads at body font sizes.    */
.aa-combobox__option-label-match {
  font-weight: 600;
  color: inherit;
}

/* ─────── Option checkbox ─────── */
/* The checkbox is purely presentational — clicks land on the <li> via */
/* the Stimulus toggleOption action, not on the checkbox itself. The   */
/* aria-selected attribute on the option drives the checked visual.    */

.aa-combobox__option-checkbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 1px solid var(--aa-border-tertiary);
  border-radius: 4px;
  background-color: var(--aa-bg-primary);
  transition: background-color 120ms ease, border-color 120ms ease;
}

.aa-combobox__option[aria-selected="true"] .aa-combobox__option-checkbox {
  background-color: var(--aa-bg-black-solid);
  border-color: var(--aa-bg-black-solid);
}

.aa-combobox__option-checkbox-mark {
  width: 16px;
  height: 16px;
  /* Inherits the checkbox box's color via currentColor in the SVG stroke */
  color: var(--aa-icon-white);
  visibility: hidden;
}

/* Bump the stroke weight so the check reads clearly at this size — the */
/* shared check.svg uses stroke-width="1.5" which renders feather-thin  */
/* inside a 20px checkbox. Targeting the path keeps the SVG reusable.   */
.aa-combobox__option-checkbox-mark path {
  stroke-width: 2.5;
}

.aa-combobox__option[aria-selected="true"] .aa-combobox__option-checkbox-mark {
  visibility: visible;
}

.aa-combobox__empty {
  padding: 12px;
  color: var(--aa-text-secondary);
  font-size: var(--aa-label-sm-size);
  text-align: center;
}
/* TableComponent styles
 * ---------------------
 * Mirror of the `Table` component_set + `Table/tableRelationship` example
 * in the AlwaysArt Figma design system (file 6QhhnZFyAXtstY7LuflJ2u).
 * Reference values pulled from `Table/tableRelationship` (node 1858:40555).
 */

.aa-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--aa-font-family);
  color: var(--aa-text-primary);
  background-color: var(--aa-bg-primary);
  border: 1px solid var(--aa-border-primary);
  border-radius: 12px;
  overflow: hidden;
}

/* ─────── Head ─────── */

.aa-table__head {
  background-color: var(--aa-bg-secondary);
}

.aa-table__heading-row {
  border-bottom: 1px solid var(--aa-border-primary);
}

.aa-table__heading-cell {
  padding: 12px;
  font-size: var(--aa-label-sm-size);
  line-height: var(--aa-label-sm-line);
  letter-spacing: var(--aa-label-sm-tracking);
  font-weight: var(--aa-font-weight-medium);
  text-transform: uppercase;
  color: var(--aa-text-primary);
  white-space: nowrap;
}

.aa-table__heading-cell--align-left {
  text-align: left;
}
.aa-table__heading-cell--align-center {
  text-align: center;
}
.aa-table__heading-cell--align-right {
  text-align: right;
}

/* ─────── Sortable header link ─────── */

.aa-table__heading-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.aa-table__heading-link:hover .aa-table__heading-label {
  text-decoration: underline;
  text-decoration-thickness: from-font;
}

.aa-table__heading-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  color: var(--aa-icon-primary);
}

.aa-table__heading-arrow svg {
  width: 100%;
  height: 100%;
}

/* ─────── Body ─────── */

.aa-table__row {
  background-color: var(--aa-bg-primary);
  border-bottom: 1px solid var(--aa-border-primary);
  transition: background-color 120ms ease;
}

.aa-table__row:last-child {
  border-bottom: none;
}

.aa-table__row:hover {
  background-color: var(--aa-bg-primary-hover);
}

.aa-table__row:focus-within {
  background-color: var(--aa-bg-secondary-hover);
}

/* Single-select pickers (selectable_row_controller).
 *
 * DECLARED AFTER :hover AND :focus-within, and repeated with each, because all
 * three share specificity. Clicking a row focuses its sr-only radio, so the
 * focus tint painted straight over the selection and picking someone looked
 * exactly like hovering them — with nothing left once focus moved on (QA,
 * sc-4361).
 *
 * TINT ONLY — no accent bar. Both a 3px black and a 2px grey one were tried and
 * read as a slab against a table this quiet (Alex, QA). The tint carries little
 * on its own in a monochrome palette whose two near-white greys are already
 * spent on hover and focus, and it does not have to: the explicit signal is the
 * chosen name echoed beside the submit, so the row only has to be findable.
 * Selected sits one step darker than hover and holds, where hover does not. */
.aa-table__row.is-selected,
.aa-table__row.is-selected:hover,
.aa-table__row.is-selected:focus-within {
  background-color: var(--aa-bg-tertiary);
}

/* ─────── Cell ─────── */

.aa-table__cell {
  padding: 12px;
  vertical-align: middle;
  font-size: var(--aa-label-sm-size);
  line-height: var(--aa-label-sm-line);
  letter-spacing: var(--aa-label-sm-tracking);
  color: var(--aa-text-primary);
}

.aa-table__cell--align-left {
  text-align: left;
}
.aa-table__cell--align-center {
  text-align: center;
}
.aa-table__cell--align-right {
  text-align: right;
}

.aa-table__cell-labels {
  display: inline-flex;
  flex-direction: column;
  min-width: 0;
  vertical-align: middle;
}

.aa-table__cell-label {
  font-size: var(--aa-label-sm-size);
  line-height: var(--aa-label-sm-line);
  letter-spacing: var(--aa-label-sm-tracking);
  color: var(--aa-text-primary);
}

.aa-table__cell-subtitle {
  font-size: var(--aa-label-sm-size);
  line-height: var(--aa-label-sm-line);
  letter-spacing: var(--aa-label-sm-tracking);
  color: var(--aa-text-secondary, #4b5563);
}

/* ─────── Cell slots (avatar, chip, etc.) ─────── */

.aa-table__cell-slot {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

.aa-table__cell-slot--start {
  margin-right: 8px;
}

.aa-table__cell-slot--end {
  margin-left: 8px;
}

/* ─────── Cell icons (start / end) ─────── */

.aa-table__cell-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--aa-icon-size);
  height: var(--aa-icon-size);
  color: var(--aa-icon-primary);
  vertical-align: middle;
}

.aa-table__cell-icon svg {
  width: 100%;
  height: 100%;
}

.aa-table__cell-icon--start {
  margin-right: 8px;
}

.aa-table__cell-icon--end {
  margin-left: 8px;
}

/* ─────── Cell value patterns (role chip, email link, etc.) ─────────
 * These are content-style helpers a consumer can opt into when filling a
 * cell — they live alongside the structural cell rules so the table
 * stylesheet stays the single source of truth for table visuals.
 */

.aa-table__role {
  display: inline-flex;
  align-items: center;
  color: var(--aa-text-secondary, #4b5563);
  font-size: var(--aa-label-sm-size);
  line-height: var(--aa-label-sm-line);
  letter-spacing: var(--aa-label-sm-tracking);
}

.aa-table__email {
  display: inline-block;
  max-width: 40ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  color: var(--aa-text-primary);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: from-font;
}

.aa-table__email:hover {
  color: var(--aa-text-primary-hover);
}

/*
 * Long free-text cell — the Collection tab's Medium column (sc-4483). Same
 * clamp as .aa-table__email above, without the link coloring, and at a
 * NARROWER ceiling: 32ch against that rule's 40ch. Medium is the fifth of five
 * columns and the only expandable one, so it yields width to Dimensions and
 * Type; the email cell sits in a table whose other columns are all short.
 *
 * A ch ceiling rather than a percentage: the value that matters is how many
 * characters fit before the ellipsis, and a percentage of a table cell whose
 * width is already decided by content would let one long medium widen the
 * column and squeeze Type and Dimensions to nothing. The consumer pairs this
 * with a title attribute so the clamped tail stays readable on hover.
 */
.aa-table__medium {
  display: inline-block;
  max-width: 32ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

/*
 * Artworks count linking to a relationship's Associations tab (sc-4496).
 *
 * No rest-state decoration: the cell is a number beside an icon and the
 * designed screenshot shows it undecorated, so the affordance appears on
 * hover rather than changing how the column reads at rest. Deliberately NOT
 * the dotted underline .aa-table__email carries — an underline under a
 * single digit reads as a strikethrough artifact at this size.
 *
 * The row already lifts its background on :focus-within, but that indicates
 * the ROW, not which of its links is focused, so the outline here is the
 * keyboard user's only cue when the actions menu is also reachable.
 */
.aa-table__artworks {
  color: inherit;
  text-decoration: none;
}

/*
 * Underline only — NO color shift, deliberately. The cell is a text run beside
 * an svg whose stroke is a hardcoded #232323 (see svg_tag('link_black')), so
 * recoloring the anchor moves the number and leaves the icon behind. The
 * candidate --aa-text-primary-hover is #1f2937 against that #232323: a
 * difference too small to read as a hover state, but a mismatch all the same.
 * Making the icon follow would mean overriding `stroke` from here, which is a
 * rule that silently breaks the day the shared asset changes color.
 */
.aa-table__artworks:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.aa-table__artworks:focus-visible {
  /*
   * Blue-500, the accent this feature already uses for the active tab —
   * NOT --aa-border-focus, which is #cbd5e1 and lands around 1.6:1 against
   * the white row. That token is legible as a border against a filled
   * control (its combobox use), but as a bare outline it is not a focus
   * indicator anyone can see. Raising the token itself is a design-system
   * change and does not belong to this story.
   */
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
  border-radius: 4px;
}
/* ToggleComponent styles
 * ----------------------
 * The switch the Figma frames use wherever discoverability is CHOSEN as part
 * of a larger form — the sign-up step and the Add Role modal (sc-4138). The
 * Privacy block on Role settings uses a labelled button instead, because it
 * writes on click rather than on submit.
 *
 * Built on a real <input type="checkbox">, not a div with a click handler, so
 * it posts with its form, is reachable by Tab, toggles with Space, and is
 * announced as a checkbox without any ARIA of its own. The input is clipped
 * rather than `display: none` — hidden inputs are removed from the tab order.
 *
 * Visual values reference variables defined in design_system.css.
 */

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

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

.aa-toggle__track {
  position: relative;
  flex-shrink: 0;
  width: 2.125rem;
  height: 1.25rem;
  border-radius: var(--aa-radius-full);
  background-color: #d1d5db;
  transition: background-color 120ms ease;
}

.aa-toggle__knob {
  position: absolute;
  top: 0.1875rem;
  left: 0.1875rem;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: var(--aa-radius-full);
  background-color: var(--aa-bg-primary);
  transition: transform 120ms ease;
}

.aa-toggle__input:checked + .aa-toggle__track {
  background-color: #5890e4;
}

.aa-toggle__input:checked + .aa-toggle__track .aa-toggle__knob {
  transform: translateX(0.875rem);
}

.aa-toggle__input:focus-visible + .aa-toggle__track {
  outline: 2px solid var(--aa-border-focus);
  outline-offset: 2px;
}

.aa-toggle__input:disabled + .aa-toggle__track {
  background-color: var(--aa-bg-disabled);
}

.aa-toggle:has(.aa-toggle__input:disabled) {
  cursor: not-allowed;
}

.aa-toggle__label {
  font-family: var(--aa-font-family);
  font-size: 0.875rem;
  font-weight: var(--aa-font-weight-medium);
  color: var(--aa-text-primary);
}

/* Respect a reduced-motion preference: the state change still reads from the
 * knob position and the track colour, so the animation is decoration. */
@media (prefers-reduced-motion: reduce) {
  .aa-toggle__track,
  .aa-toggle__knob {
    transition: none;
  }
}