/* Default One Place button treatment, paired with the UI kit's hover motion. */
html[data-button-style="soft"] {
  --soft-button-fill: linear-gradient(180deg, #fafafa 0%, #f0f0f0 100%);
  --soft-button-shadow: inset 0 1px 1px #fff, 0 6px 10px #2424240b, 0 2px 3px #24242405;
}

/* The kit's fallback is blush. Keep every animated fill neutral in this site,
   including navigation tabs and plain actions that have no resting surface. */
html[data-button-style="soft"] [data-origin-hover] {
  --origin-hover-fill: #e8e8e8;
}

html[data-button-style="soft"] :is(.btn, .icon-btn, .review-tab, .login-submit) {
  background: var(--soft-button-fill);
  border: 1px solid #dadada;
  border-radius: 999px;
  color: #393541 !important;
  box-shadow: var(--soft-button-shadow);
  --origin-hover-fill: #e8e8e8;
  transition: box-shadow 180ms ease, border-color 180ms ease, transform 180ms ease;
}
html[data-button-style="soft"] .btn { padding: 11px 22px; min-height: 46px; }
html[data-button-style="soft"] .btn.small { padding: 8px 16px; min-height: 38px; }
html[data-button-style="soft"] .header-create { padding: 6px 8px 6px 18px; min-height: 42px; }
html[data-button-style="soft"] :is(.btn.primary, .header-create, .login-submit) { color: #481729 !important; }
html[data-button-style="soft"] :is(.btn.primary, .header-create, .login-submit) > svg {
  order: 1;
  width: 30px;
  height: 30px;
  padding: 8px;
  border-radius: 50%;
  background: #481729;
  color: #fff;
  box-sizing: border-box;
}
html[data-button-style="soft"] .btn.primary:has(> svg) { padding: 6px 8px 6px 20px; }
html[data-button-style="soft"] .login-submit { padding: 8px 10px 8px 22px; }
html[data-button-style="soft"] .login-submit > svg { width: 36px; height: 36px; padding: 9px; }
html[data-button-style="soft"] .project-tab[aria-current="page"],
html[data-button-style="soft"] .project-tab.selected,
html[data-button-style="soft"] .review-tab[aria-pressed="true"] {
  background: var(--soft-button-fill);
  border-color: #d2d2d2;
  color: #481729;
  box-shadow: var(--soft-button-shadow);
}
html[data-button-style="soft"] .composer {
  margin: 18px;
  padding: 20px 24px;
  border: 1px solid #dadada;
  border-radius: 32px;
  background: var(--soft-button-fill);
  box-shadow: inset 0 1px 1px #fff, 0 10px 18px #2424240c;
}
html[data-button-style="soft"] .composer textarea { background: transparent; }
html[data-button-style="soft"] .file-chip {
  border-radius: 18px;
  background: #fff;
  border: 1px solid #e3e3e3;
  box-shadow: 0 3px 5px #2424240d;
}
@media (hover: hover) {
  html[data-button-style="soft"] :is(.btn, .icon-btn, .review-tab, .login-submit):not(:disabled):hover {
    border-color: #bdbdbd;
    box-shadow: inset 0 1px 1px #fff, 0 8px 14px #24242412;
    transform: translateY(-1px);
  }
}
html[data-button-style="soft"] :is(.btn, .icon-btn, .review-tab, .login-submit):not(:disabled):active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px #24242412;
}
html[data-button-style="soft"] :is(.btn, .icon-btn, .review-tab, .login-submit):focus-visible {
  outline: 2px solid #79546b;
  outline-offset: 4px;
}
html[data-button-style="soft"] :is(.btn, .icon-btn, .login-submit):disabled { opacity: .45; box-shadow: none; }
@media (max-width: 800px) {
  html[data-button-style="soft"] .header-actions .header-create { padding: 4px; min-height: 38px; width: 38px; height: 38px; }
  html[data-button-style="soft"] .composer { margin: 12px; padding: 16px; border-radius: 26px; }
  html[data-button-style="soft"] .review-side .composer { margin-inline: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-button-style="soft"] :is(.btn, .icon-btn, .review-tab, .login-submit) { transition: none; }
}

/* ---------- Button hierarchy: primary, secondary, quiet ---------- */
/* Primary: the main action in a view. Always the burgundy disc, a touch more weight.
   Buttons with their own icon show it in the disc; others get the arrow. */
html[data-button-style="soft"] .btn.primary { font-weight: 600; }
html[data-button-style="soft"] .btn.primary:not(:has(> svg)) { padding: 6px 7px 6px 20px; }
html[data-button-style="soft"] .btn.primary:not(:has(> svg))::after {
  content: '';
  order: 1;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #481729 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16m-6-6 6 6-6 6'/%3E%3C/svg%3E") center / 14px no-repeat;
  transition: background-position 300ms cubic-bezier(.34, 1.56, .64, 1);
}
html[data-button-style="soft"] .btn.primary[data-origin-active]:not(:disabled)::after { background-position: calc(50% + 2px) center; }
/* The disc carries the arrow, so the kit's sliding flow arrow steps aside on primaries. */
html[data-button-style="soft"] .btn.primary[data-flow] > .flow-track { padding: 0; }
html[data-button-style="soft"] .btn.primary[data-flow] .flow-arrow { display: none; }
html[data-button-style="soft"] .btn.primary[data-flow] .flow-label { transform: none; }
/* Two heights only: 46px, and 38px for small, with or without the disc. */
html[data-button-style="soft"] .btn.primary.small,
html[data-button-style="soft"] .btn.primary.small:has(> svg) { padding: 4px 5px 4px 16px; min-height: 38px; }
html[data-button-style="soft"] .btn.primary.small > svg,
html[data-button-style="soft"] .btn.primary.small::after { width: 28px; height: 28px; padding: 7px; }
html[data-button-style="soft"] .btn.primary.small::after { padding: 0; background-size: 13px; }

/* Secondary is the soft grey pill above. The old light style is the same as secondary. */

/* Quiet: low-stakes and repeated actions. No fill or shadow until hovered; the kit's fill still sweeps in. */
html[data-button-style="soft"] :is(.btn, .icon-btn).quiet {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: #5d5560 !important;
}
@media (hover: hover) {
  html[data-button-style="soft"] :is(.btn, .icon-btn).quiet:not(:disabled):hover {
    transform: none;
    box-shadow: none;
    border-color: transparent;
    color: #393541 !important;
  }
}
html[data-button-style="soft"] :is(.btn, .icon-btn).quiet:not(:disabled):active { box-shadow: none; }

/* Choosing between versions is a segmented set of small cards, not a row of pills. */
html[data-button-style="soft"] .review-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 6px;
  max-width: 680px;
  padding: 6px;
  background: #f5f5f5;
  border: 1px solid #e8e8e8;
  border-radius: 18px;
}
html[data-button-style="soft"] .review-tabs .review-tab {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent;
  box-shadow: none;
  --origin-hover-fill: #ececec;
}
@media (hover: hover) {
  html[data-button-style="soft"] .review-tabs .review-tab:not(:disabled):hover { transform: none; box-shadow: none; border-color: transparent; }
}
html[data-button-style="soft"] .review-tabs .review-tab:not(:disabled):active { box-shadow: none; }
html[data-button-style="soft"] .review-tabs .review-tab[aria-pressed="true"] {
  background: #fff;
  border-color: #e2e2e2;
  box-shadow: 0 2px 8px #2424240d;
}
html[data-button-style="soft"] .review-tabs .review-tab[aria-pressed="true"] strong { color: #481729; }