@import './tokens.css';

.ac-ui { font: 400 var(--ac-text-md)/1.5 var(--ac-font-body); color: var(--ac-ink); color-scheme: light; }
.ac-ui *, .ac-ui *::before, .ac-ui *::after { box-sizing: border-box; }
.ac-ui [hidden] { display: none !important; }
.ac-ui ::selection { background: var(--ac-mint); color: var(--ac-ink); }
.ac-ui { scrollbar-color: var(--ac-lilac) var(--ac-paper); scrollbar-width: thin; }
.ac-ui :is(button, input, select, textarea, a) { -webkit-tap-highlight-color: transparent; }
.ac-ui :is(button, input, select, textarea, a, [tabindex]):focus-visible {
  outline: 3px solid var(--ac-focus); outline-offset: 3px;
}
.ac-display { font: 400 var(--ac-display)/1.2 var(--ac-font-display); letter-spacing: .035em; text-transform: uppercase; text-wrap: balance; overflow-wrap: anywhere; }
.ac-title { margin: 0; font-size: var(--ac-text-lg); font-weight: 850; line-height: 1.35; }
.ac-muted { color: var(--ac-ink-muted); }
.ac-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.ac-frame {
  isolation: isolate; position: relative; min-width: 0; padding: var(--ac-frame-rail);
  filter: drop-shadow(0 7px 1px #17142755) drop-shadow(0 16px 16px #17142770);
}
.ac-frame::before {
  content: ''; position: absolute; z-index: -1; inset: 0;
  clip-path: polygon(var(--ac-frame-cut) 0, calc(100% - var(--ac-frame-cut)) 0, 100% var(--ac-frame-cut), 100% calc(100% - var(--ac-frame-cut)), calc(100% - var(--ac-frame-cut)) 100%, var(--ac-frame-cut) 100%, 0 calc(100% - var(--ac-frame-cut)), 0 var(--ac-frame-cut));
  background: linear-gradient(110deg, #c281af 0%, #a875a6 35%, #755386 76%, #a66ca4);
  box-shadow: inset 0 5px 0 #e5a3d0, inset 5px 0 0 #a26591, inset -5px 0 0 #b383b3, inset 0 -8px 0 #533550;
  border: 1px solid #714569;
}
.ac-frame::after { content: ''; position: absolute; inset: calc(var(--ac-frame-rail) - 5px); border: 3px solid #744e71; border-bottom-color: #c084ad; border-right-color: #bc8bae; border-radius: 18px; pointer-events: none; z-index: -1; }
.ac-frame__surface { min-width: 0; background: radial-gradient(ellipse at 50% 35%, #fffaf0 0%, var(--ac-paper) 85%); border: 2px solid #d8bea5; box-shadow: inset 0 2px 9px #c09c8140, 0 0 0 2px #513e5270; border-radius: 12px; padding: var(--ac-space-6); }
.ac-frame__header { margin-bottom: var(--ac-space-6); }
.ac-frame__header h1, .ac-frame__header h2 { margin: 0; }
.ac-frame__description { margin: var(--ac-space-2) 0 0; color: var(--ac-ink-muted); max-width: 68ch; }
.ac-frame__footer { margin-top: var(--ac-space-6); padding-top: var(--ac-space-4); border-top: 1px solid var(--ac-line); }
.ac-frame__rail { position: absolute; pointer-events: none; }
.ac-frame__rail--top { height: 9px; top: -4px; left: 14%; right: 14%; background: linear-gradient(#e3a4d0 0 35%, #b879ac 40% 70%, #94608d 75%); clip-path: polygon(1% 0, 18% 0, 19% 65%, 71% 65%, 72% 0, 99% 0, 100% 100%, 0 100%); }
.ac-frame__rail--bottom { height: 10px; bottom: 6px; left: 8%; right: 8%; border-block: 2px solid #d699c1; border-bottom-color: #724464; background: linear-gradient(#bd7bac, #9a5b8b); }
.ac-frame__rail--left, .ac-frame__rail--right { top: 10%; bottom: 10%; width: 7px; background: linear-gradient(90deg, #653e62, #c087b2 35%, #a76a9a 70%, #5e3d5c); }
.ac-frame__rail--left { left: 5px; } .ac-frame__rail--right { right: 5px; transform: scaleX(-1); }
.ac-frame__guard { position: absolute; width: var(--ac-frame-guard); height: var(--ac-frame-guard); pointer-events: none; top: -2px; left: -2px; filter: drop-shadow(1px 2px 1px #472b4c66); }
.ac-frame__guard svg { display: block; width: 100%; height: 100%; }
.ac-frame__guard--tr { left: auto; right: -2px; transform: scaleX(-1); }
.ac-frame__guard--br { left: auto; right: -2px; top: auto; bottom: -2px; transform: scale(-1); }
.ac-frame__guard--bl { top: auto; bottom: -2px; transform: scaleY(-1); }
.ac-frame__guard--br .ac-frame__clamp, .ac-frame__guard--bl .ac-frame__clamp { display: none; }
.ac-button, .ac-tab {
  display: inline-flex; justify-content: center; align-items: center; gap: var(--ac-space-2);
  min-height: var(--ac-target); min-width: var(--ac-target); padding: 10px 20px;
  font: 800 var(--ac-text-md)/1.35 var(--ac-font-body); text-align: center; overflow-wrap: anywhere;
  color: var(--ac-ink); background: linear-gradient(120deg, #fffdf5, var(--ac-paper)); border: 2px solid var(--ac-border);
  border-radius: var(--ac-radius); box-shadow: inset 0 2px 0 #ffffffbf, inset 2px 0 0 #ffffff55, inset -2px 0 0 #27264215, inset 0 -4px 0 #27264226, 0 2px 0 #27264220;
  cursor: pointer; transition: background-color var(--ac-fast) var(--ac-ease), transform var(--ac-fast) var(--ac-ease);
}
.ac-button--primary, .ac-tab[aria-selected='true'] { background: linear-gradient(120deg, #a9e7d7, var(--ac-mint)); border-color: #5d9e92; }
.ac-button--berry { background: linear-gradient(120deg, #f4bfd1, var(--ac-berry)); border-color: #aa698d; }
.ac-button--hero { position: relative; isolation: isolate; min-height: 64px; padding: 12px 28px 15px; font: 400 clamp(1.25rem, 2.3vw, 1.875rem)/1.2 var(--ac-font-display); letter-spacing: .04em; text-transform: uppercase; border-radius: 12px; border: 0; background: transparent; box-shadow: none; }
.ac-button--hero::before, .ac-button--hero::after { content: ''; position: absolute; pointer-events: none; clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px); }
.ac-button--hero::before { z-index: -2; inset: 0; background: linear-gradient(135deg, #adebdd, #73bbad 45%, #5b9a8e); box-shadow: inset 0 2px 0 #d4fff2, inset 0 -3px 0 #417f72; }
.ac-button--hero::after { z-index: -1; inset: 5px 5px 7px; background: linear-gradient(120deg, #a1e4d5, #96d8c6 70%, #8ad6c5); box-shadow: inset 0 2px 0 #c4f7e7; }
.ac-button--hero:not(:disabled):hover { background: transparent; }
.ac-button--hero:not(:disabled):hover::after { background: var(--ac-mint-hover); }
.ac-button--hero .ac-icon { width: 30px; height: 30px; flex-basis: 30px; stroke-width: 3; }
.ac-button--hero .ac-icon { order: 1; }
.ac-button--danger { background: var(--ac-error-bg); color: var(--ac-error); border-color: var(--ac-error); }
@media (hover: hover) {
  .ac-button:not(:disabled):hover, .ac-tab:not(:disabled):hover { background: var(--ac-mint-hover); }
  .ac-card:not(:disabled):hover { background: var(--ac-paper-raised); border-color: var(--ac-mint-edge); }
}
.ac-button:not(:disabled):active, .ac-tab:not(:disabled):active { transform: translateY(1px); }
.ac-button:disabled, .ac-tab:disabled, .ac-card:disabled { cursor: not-allowed; background: var(--ac-disabled); color: var(--ac-ink-muted); border-color: var(--ac-border); box-shadow: none; }
.ac-button[aria-busy='true'] { cursor: progress; }
.ac-icon { width: 20px; height: 20px; flex: 0 0 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ac-tabs__list { display: flex; flex-wrap: wrap; gap: var(--ac-space-2); padding: 4px; margin: -4px -4px var(--ac-space-6); }
.ac-tab { flex: 1 1 110px; padding-inline: 12px; overflow-wrap: normal; min-inline-size: min-content; }
.ac-tabs__panel { min-width: 0; outline-offset: 4px; }
.ac-field { display: grid; gap: var(--ac-space-2); min-width: 0; align-content: start; }
.ac-field__label { font-weight: 850; }
.ac-input, .ac-select {
  width: 100%; min-width: 0; min-height: var(--ac-target); padding: 10px 12px; border: 2px solid var(--ac-border);
  border-radius: var(--ac-radius); background: var(--ac-paper-raised); color: var(--ac-ink);
  font: inherit; caret-color: var(--ac-focus); box-shadow: inset 0 2px 4px #574b6926, 0 1px 0 #fff;
}
.ac-input::placeholder { color: var(--ac-ink-muted); opacity: 1; }
.ac-input[aria-invalid='true'], .ac-select[aria-invalid='true'] { border-color: var(--ac-error); }
.ac-input:disabled, .ac-select:disabled { background: var(--ac-disabled); color: var(--ac-ink-muted); cursor: not-allowed; }
.ac-field__hint, .ac-field__error { margin: 0; font-size: var(--ac-text-sm); overflow-wrap: anywhere; }
.ac-field__hint { color: var(--ac-ink-muted); }
.ac-field__error { color: var(--ac-error); font-weight: 750; }
.ac-card {
  display: flex; align-items: center; gap: var(--ac-space-4); width: 100%; min-width: 0; min-height: 112px;
  padding: var(--ac-space-4); text-align: start; font: inherit; color: var(--ac-ink); background: var(--ac-paper);
  border: 2px solid var(--ac-border); border-radius: 12px; cursor: pointer;
}
.ac-card[aria-pressed='true'] { border: 3px solid var(--ac-mint-edge); padding: 15px; background: var(--ac-selected); }
.ac-card__copy { flex: 1; min-width: 0; }
.ac-card__title { display: block; font-size: var(--ac-text-lg); font-weight: 850; overflow-wrap: anywhere; }
.ac-card__description { display: block; color: var(--ac-ink-muted); font-size: var(--ac-text-sm); margin-top: 4px; overflow-wrap: anywhere; }
.ac-card__status { display: flex; align-items: center; gap: 4px; font-size: var(--ac-text-sm); font-weight: 850; }
.ac-card--illustrated { display: flex; flex-direction: column; align-items: stretch; gap: 0; min-height: 0; padding: 5px; border: 2px solid #c4c3b8; border-radius: 18px; background: linear-gradient(#e9e6d9, #dedfd5); box-shadow: inset 0 0 0 2px #fffcf066; overflow: visible; }
.ac-card--illustrated[aria-pressed='true'] { padding: 5px; border: 2px solid #73d3bf; background: linear-gradient(#deebe0, #e0e6d8); box-shadow: inset 0 0 0 2px #fffcf0; }
.ac-card__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 62px; padding: 12px 18px; color: var(--ac-paper-raised); background: linear-gradient(115deg, #35354e, #27293f); border-radius: 10px 10px 0 0; }
.ac-card__header .ac-card__title { font: 400 1.65rem/1.2 var(--ac-font-display); letter-spacing: .025em; }
.ac-card__header .ac-card__status { color: var(--ac-paper-raised); flex-shrink: 0; text-transform: uppercase; }
.ac-card__header .ac-card__status::after { content: ''; width: 28px; height: 28px; border: 3px solid var(--ac-paper); border-radius: 50%; }
.ac-card__header .ac-card__status > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.ac-card--illustrated[aria-pressed='true'] .ac-card__status { border-radius: 24px; background: var(--ac-mint); color: var(--ac-ink); padding: 8px 12px; flex-direction: row-reverse; }
.ac-card--illustrated[aria-pressed='true'] .ac-card__status::after { display: none; }
.ac-card--illustrated[aria-pressed='true'] .ac-card__status > span { position: static; width: auto; height: auto; clip-path: none; }
.ac-card--illustrated .ac-card__copy { flex: none; padding: 12px 16px 14px; }
.ac-card--illustrated .ac-card__description { font-size: 1rem; margin: 0; line-height: 1.4; }
.ac-card__details { display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px; margin: -3px 3px 0; background: var(--ac-paper-raised); border-radius: 12px; position: relative; font-weight: 850; }
.ac-card__details > span { display: flex; align-items: center; gap: 6px; }
.ac-stat { display: flex; justify-content: space-between; align-items: baseline; gap: var(--ac-space-4); padding-block: 10px; border-bottom: 1px solid var(--ac-line); }
.ac-stat__label { color: var(--ac-ink-muted); min-width: 0; overflow-wrap: anywhere; }
.ac-stat__value { font-weight: 850; font-variant-numeric: tabular-nums; text-align: end; overflow-wrap: anywhere; min-width: 0; }
.ac-progress__heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ac-space-4); font-weight: 800; margin-bottom: var(--ac-space-2); }
.ac-progress__value { font-variant-numeric: tabular-nums; }
.ac-progress progress { display: block; width: 100%; height: 24px; accent-color: var(--ac-mint-edge); border: 2px solid var(--ac-mint-edge); border-radius: var(--ac-radius); overflow: hidden; background: var(--ac-line); }
.ac-progress progress::-webkit-progress-bar { background: var(--ac-line); }
.ac-progress progress::-webkit-progress-value { background: var(--ac-mint); box-shadow: inset 0 2px 0 #ffffff80; }
.ac-progress progress::-webkit-progress-value { background: repeating-linear-gradient(90deg, transparent 0 26px, #37766a50 26px 28px), linear-gradient(#b9ecdb, #85c8b8); box-shadow: inset 0 3px 0 #e0fff280, inset 0 -3px 0 #508f7d66; }
.ac-progress progress::-moz-progress-bar { background: var(--ac-mint); }
.ac-state { display: flex; align-items: start; gap: var(--ac-space-3); padding: var(--ac-space-4); border: 2px solid var(--ac-border); border-radius: 12px; }
.ac-state--error { background: var(--ac-error-bg); border-color: var(--ac-error); }
.ac-state--error > .ac-icon { color: var(--ac-error); }
.ac-state__body { flex: 1; min-width: 0; }
.ac-state__body p { margin: 6px 0 0; color: var(--ac-ink-muted); overflow-wrap: anywhere; }
.ac-state__body > .ac-button { margin-top: var(--ac-space-3); }
.ac-loading-mark { width: 20px; height: 20px; flex: 0 0 20px; border: 3px solid var(--ac-lilac); border-top-color: var(--ac-paper); border-radius: 4px; animation: ac-loading 1.2s steps(4) infinite; }
@keyframes ac-loading { to { transform: rotate(360deg); } }
.ac-tooltip { display: inline-flex; position: relative; max-width: 100%; }
.ac-tooltip__popup { position: absolute; z-index: 3; bottom: calc(100% + 10px); left: 0; width: max-content; max-width: min(240px, 70vw); background: var(--ac-space); color: var(--ac-paper); border-radius: var(--ac-radius); padding: 12px; box-shadow: var(--ac-shadow); font-size: var(--ac-text-sm); overflow-wrap: anywhere; }
.ac-tooltip__popup::after { content: ''; position: absolute; height: 12px; left: 0; right: 0; bottom: -12px; }
.ac-toasts { display: grid; gap: 8px; }
.ac-toast { display: flex; align-items: center; gap: var(--ac-space-3); padding: 12px; background: var(--ac-mint); color: var(--ac-ink); border: 2px solid var(--ac-mint-edge); border-radius: var(--ac-radius); }
.ac-toast--error { background: var(--ac-error-bg); border-color: var(--ac-error); }
.ac-toast__text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ac-dialog { position: fixed; inset: 0; width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); margin: auto; border: 0; background: transparent; color: var(--ac-ink); overflow: auto; font: 400 1rem/1.5 var(--ac-font-body); }
.ac-dialog::backdrop { background: var(--ac-scrim); }
.ac-dialog > h2 { background: var(--ac-paper); margin: 0; padding: 24px 24px 12px; border-radius: 10px 10px 0 0; font-size: var(--ac-text-lg); }
.ac-dialog__body { background: var(--ac-paper); padding: 0 24px 20px; overflow-wrap: anywhere; }
.ac-dialog__footer { background: var(--ac-paper); padding: 0 24px 24px; border-radius: 0 0 10px 10px; }
.ac-dialog .ac-button { max-width: 100%; }
@media (max-width: 600px) {
  .ac-frame__surface { padding: 24px 12px; border-radius: 10px; }
  .ac-frame__rail--bottom { height: 6px; bottom: 3px; }
  .ac-frame__rail--left, .ac-frame__rail--right { width: 4px; }
  .ac-frame__rail--left { left: 3px; } .ac-frame__rail--right { right: 3px; }
  .ac-card { flex-wrap: wrap; }
  .ac-card__copy { flex-basis: calc(100% - 40px); }
  .ac-card--illustrated .ac-card__copy { flex-basis: auto; }
  .ac-card__header { padding: 12px; min-height: 58px; }
  .ac-card__header .ac-card__title { font-size: 1.4rem; }
  .ac-dialog > h2 { padding: 20px 16px 12px; }
  .ac-dialog__body { padding: 0 16px 16px; }
  .ac-dialog__footer { padding: 0 16px 20px; }
}
@media (prefers-reduced-motion: reduce) { .ac-loading-mark { animation: none; } }
[data-ac-reduced-motion='true'] .ac-loading-mark { animation: none; }
@media (forced-colors: active) {
  .ac-frame::before, .ac-frame__guard { background: Canvas; border: 2px solid CanvasText; }
  .ac-card[aria-pressed='true'], .ac-tab[aria-selected='true'] { border-color: Highlight; }
  .ac-ui :focus-visible { outline-color: Highlight; }
}