/* Route-scoped presentation for the canvas avatar maker. */
[data-avatar-maker-root] {
  --avatar-ink: #282431;
  --avatar-muted: #686170;
  --avatar-line: #ddd5e2;
  --avatar-surface: #ffffff;
  --avatar-soft: #f8f5fa;
  --avatar-accent: #6550b8;
  --avatar-accent-dark: #493891;
  --avatar-accent-soft: #eee9ff;
  --avatar-focus: #f0a629;
  box-sizing: border-box;
  color: var(--avatar-ink);
  margin-inline: auto;
  max-width: 960px;
  min-width: 0;
  overflow-wrap: anywhere;
  width: 100%;
}

[data-avatar-maker-root] *,
[data-avatar-maker-root] *::before,
[data-avatar-maker-root] *::after {
  box-sizing: border-box;
}

[data-avatar-maker-root] [hidden] {
  display: none !important;
}

[data-avatar-maker-root].avatar-maker-panel,
[data-avatar-maker-root] .avatar-maker-panel {
  background: var(--avatar-surface);
  border: 1px solid var(--avatar-line);
  border-radius: 20px;
  box-shadow: 0 16px 38px rgba(48, 38, 61, 0.1);
  padding: clamp(16px, 3.5vw, 30px);
}

[data-avatar-maker-root] .avatar-maker-heading {
  display: grid;
  gap: 5px;
  margin-bottom: 16px;
}

[data-avatar-maker-root] .avatar-maker-heading h2,
[data-avatar-maker-root] .avatar-maker-heading p {
  margin: 0;
}

[data-avatar-maker-root] .avatar-maker-heading h2 {
  font-size: clamp(1.28rem, 4vw, 1.72rem);
  line-height: 1.3;
}

[data-avatar-maker-root] .avatar-maker-heading p {
  color: var(--avatar-muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

[data-avatar-maker-root] .avatar-maker-layout {
  display: grid;
  gap: 18px;
  min-width: 0;
}

[data-avatar-maker-root] .avatar-maker-preview,
[data-avatar-maker-root] .avatar-maker-controls {
  min-width: 0;
}

[data-avatar-maker-root] .avatar-maker-preview {
  align-self: start;
  background: var(--avatar-soft);
  border: 1px solid var(--avatar-line);
  border-radius: 18px;
  padding: clamp(8px, 2vw, 14px);
}

[data-avatar-maker-root] [data-avatar-maker-canvas] {
  aspect-ratio: 1;
  background: #f5edf7;
  border: 2px solid #393141;
  border-radius: 16px;
  display: block;
  height: auto;
  max-width: 100%;
  width: 100%;
}

[data-avatar-maker-root] [data-avatar-maker-canvas]:focus-visible,
[data-avatar-maker-root] button:focus-visible,
[data-avatar-maker-root] input:focus-visible,
[data-avatar-maker-root] textarea:focus-visible {
  outline: 3px solid var(--avatar-focus);
  outline-offset: 3px;
}

[data-avatar-maker-root] .avatar-maker-today {
  align-items: flex-start;
  background: var(--avatar-accent-soft);
  border-left: 4px solid var(--avatar-accent);
  border-radius: 10px;
  color: var(--avatar-accent-dark);
  display: flex;
  flex-direction: column;
  font-size: 0.82rem;
  font-weight: 800;
  gap: 3px;
  line-height: 1.5;
  margin-top: 10px;
  padding: 10px 12px;
}

[data-avatar-maker-root] [data-avatar-maker-today-style] {
  display: block;
}

[data-avatar-maker-root] .avatar-maker-name-field {
  display: grid;
  gap: 7px;
  margin-bottom: 16px;
}

[data-avatar-maker-root] .avatar-maker-name-field label,
[data-avatar-maker-root] .avatar-maker-name-field > span {
  color: var(--avatar-ink);
  font-size: 0.86rem;
  font-weight: 850;
  line-height: 1.4;
}

[data-avatar-maker-root] [data-avatar-maker-name] {
  appearance: none;
  background: var(--avatar-surface);
  border: 1px solid var(--avatar-line);
  border-radius: 12px;
  color: var(--avatar-ink);
  font: inherit;
  font-size: 1rem;
  line-height: 1.4;
  min-height: 48px;
  padding: 11px 13px;
  width: 100%;
}

[data-avatar-maker-root] [data-avatar-maker-name]::placeholder {
  color: #8b8492;
  opacity: 1;
}

[data-avatar-maker-root] .avatar-maker-groups {
  display: grid;
  gap: 11px;
}

[data-avatar-maker-root] .avatar-maker-group {
  background: var(--avatar-soft);
  border: 1px solid var(--avatar-line);
  border-radius: 14px;
  margin: 0;
  min-width: 0;
  padding: 11px;
}

[data-avatar-maker-root] .avatar-maker-group legend,
[data-avatar-maker-root] .avatar-maker-group-title {
  color: var(--avatar-ink);
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1.35;
  padding: 0 4px;
}

[data-avatar-maker-root] .avatar-maker-choice-grid {
  display: grid;
  gap: 7px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
}

[data-avatar-maker-root] button {
  appearance: none;
  background: var(--avatar-surface);
  border: 1px solid var(--avatar-line);
  border-radius: 11px;
  color: var(--avatar-ink);
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.25;
  min-height: 44px;
  min-width: 0;
  padding: 9px 8px;
  touch-action: manipulation;
  transition: background-color 130ms ease, border-color 130ms ease, color 130ms ease, transform 130ms ease;
}

[data-avatar-maker-root] button:hover:not(:disabled) {
  background: var(--avatar-accent-soft);
  border-color: var(--avatar-accent);
}

[data-avatar-maker-root] button:active:not(:disabled) {
  transform: translateY(1px);
}

[data-avatar-maker-root] button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

[data-avatar-maker-root] button[aria-pressed="true"] {
  background: var(--avatar-accent);
  border-color: var(--avatar-accent);
  color: #ffffff;
}

[data-avatar-maker-root] button[aria-pressed="true"] small {
  color: rgba(255, 255, 255, 0.82);
}

[data-avatar-maker-root] .avatar-maker-choice {
  align-items: center;
  display: flex;
  gap: 7px;
  justify-content: flex-start;
  text-align: left;
}

[data-avatar-maker-root] .avatar-maker-choice-swatch {
  background: var(--avatar-choice-color, #eee8f3);
  border: 1px solid rgba(40, 36, 49, 0.22);
  border-radius: 50%;
  flex: 0 0 20px;
  height: 20px;
  width: 20px;
}

[data-avatar-maker-root] [data-avatar-maker-skin="porcelain"] .avatar-maker-choice-swatch { --avatar-choice-color: #f7d8c5; }
[data-avatar-maker-root] [data-avatar-maker-skin="peach"] .avatar-maker-choice-swatch { --avatar-choice-color: #edb08e; }
[data-avatar-maker-root] [data-avatar-maker-skin="golden"] .avatar-maker-choice-swatch { --avatar-choice-color: #d99b62; }
[data-avatar-maker-root] [data-avatar-maker-skin="rose"] .avatar-maker-choice-swatch { --avatar-choice-color: #d99891; }
[data-avatar-maker-root] [data-avatar-maker-skin="deep"] .avatar-maker-choice-swatch { --avatar-choice-color: #865740; }

[data-avatar-maker-root] .avatar-maker-choice-symbol {
  align-items: center;
  display: inline-flex;
  flex: 0 0 22px;
  font-size: 1.05rem;
  justify-content: center;
  line-height: 1;
}

[data-avatar-maker-root] .avatar-maker-actions {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 16px;
}

[data-avatar-maker-root] [data-avatar-maker-random],
[data-avatar-maker-root] [data-avatar-maker-download] {
  background: var(--avatar-accent);
  border-color: var(--avatar-accent);
  color: #ffffff;
}

[data-avatar-maker-root] [data-avatar-maker-reset],
[data-avatar-maker-root] [data-avatar-maker-share] {
  background: var(--avatar-surface);
  border-color: var(--avatar-accent);
  color: var(--avatar-accent-dark);
}

[data-avatar-maker-root] [data-avatar-maker-status] {
  background: var(--avatar-soft);
  border-left: 4px solid var(--avatar-accent);
  border-radius: 9px;
  color: var(--avatar-muted);
  font-size: 0.88rem;
  line-height: 1.55;
  margin: 14px 0 0;
  min-height: 46px;
  padding: 10px 12px;
}

[data-avatar-maker-root] [data-avatar-maker-share-output] {
  background: #fffdf8;
  border: 1px solid #d7c58f;
  border-radius: 11px;
  color: #4b4026;
  font: inherit;
  font-size: 0.82rem;
  line-height: 1.55;
  margin-top: 9px;
  min-height: 94px;
  padding: 10px 11px;
  resize: vertical;
  width: 100%;
}

[data-avatar-maker-root] .avatar-maker-privacy-note {
  color: var(--avatar-muted);
  font-size: 0.78rem;
  line-height: 1.55;
  margin: 9px 1px 0;
}

@media (min-width: 520px) {
  [data-avatar-maker-root] .avatar-maker-choice-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 780px) {
  [data-avatar-maker-root] .avatar-maker-layout {
    align-items: start;
    grid-template-columns: minmax(280px, 0.9fr) minmax(360px, 1.1fr);
  }

  [data-avatar-maker-root] .avatar-maker-choice-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-avatar-maker-root] button {
    transition: none;
  }
}