/* WorldStamped UI kit — next-gen redesign R0. Loaded globally after foundation.css. */

/* Floating icon-only dock (D3, D5). */
.ws-dock {
  position: fixed;
  left: 50%;
  bottom: calc(var(--ws-safe-bottom, 0px) + 0.75rem);
  z-index: var(--ws-z-dock, 30);
  display: flex;
  align-items: center;
  gap: 0.125rem;
  padding: 0.375rem;
  border: 1px solid var(--ws-dock-line);
  border-radius: 999px;
  background: var(--ws-dock-fallback);
  /* Keep every outer shadow within 0.65rem below the dock: iPhone Safari clips a
     longer blur at the visual viewport into a hard edge (owner QA, c283d5b). */
  box-shadow: 0 0 0.5rem rgb(20 30 24 / 35%), inset 0 1px 0 rgb(255 255 255 / 8%);
  transform: translateX(-50%) scale(var(--ws-dock-scale, 1));
  transform-origin: 50% 100%;
  transition: transform var(--ws-t-slow) var(--ws-spring);
  view-transition-name: ws-dock;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ws-dock {
    background: var(--ws-dock);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .ws-dock {
    background: var(--ws-dock-fallback);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

.ws-dock[data-dock-state="compact"] {
  /* 3rem x 0.92 keeps every target at or above 2.75rem (44 px). */
  --ws-dock-scale: 0.92;
}

.ws-dock__pill {
  position: absolute;
  top: 0.375rem;
  left: 0;
  width: var(--ws-dock-pill-w, 3.25rem);
  height: 3rem;
  border-radius: 999px;
  background: var(--ws-dock-pill);
  opacity: 0;
  transform: translateX(var(--ws-dock-pill-x, 0.375rem));
  transition: transform var(--ws-t-slow) var(--ws-spring), width var(--ws-t-base) var(--ws-ease-out);
  view-transition-name: ws-dock-pill;
}

.ws-dock.is-enhanced .ws-dock__pill {
  opacity: 1;
}

.ws-dock__item {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3rem;
  border-radius: 999px;
  color: var(--ws-dock-icon);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.ws-dock__item[aria-current="page"] {
  color: var(--ws-dock-icon-active);
}

/* Without JavaScript the current tab carries its own pill. */
.ws-dock:not(.is-enhanced) .ws-dock__item[aria-current="page"]:not(.ws-dock__item--add) {
  background: var(--ws-dock-pill);
}

.ws-dock__item:focus-visible {
  outline: 2px solid var(--ws-dock-text);
  outline-offset: 2px;
}

.ws-dock__icon {
  display: grid;
  place-items: center;
  transition: transform var(--ws-t-base) var(--ws-spring);
}

.ws-dock__icon .ws-icon {
  width: 1.5rem;
  height: 1.5rem;
}

.ws-dock__icon--fill {
  display: none;
}

.ws-dock__item[aria-current="page"] .ws-dock__icon--fill {
  display: grid;
}

.ws-dock__item--has-fill[aria-current="page"] .ws-dock__icon--line {
  display: none;
}

.ws-dock__item:active .ws-dock__icon {
  transform: scale(0.82);
}

.ws-dock__item--add {
  width: 3rem;
  margin-inline: 0.375rem;
  border-radius: 50%;
  background: var(--ws-accent);
  color: var(--ws-on-accent);
  box-shadow: 0 0.125rem 0.5rem -0.125rem rgb(198 93 59 / 75%);
}

.ws-dock__item--add .ws-icon {
  width: 1.375rem;
  height: 1.375rem;
}

/* Name stays in the DOM; shown while pressed, hovered or focused. */
.ws-dock__label {
  position: absolute;
  bottom: calc(100% + 0.625rem);
  left: 50%;
  padding: 0.3rem 0.6rem;
  border-radius: 0.6rem;
  background: var(--ws-dock-fallback);
  color: var(--ws-dock-text);
  font: 600 0.72rem/1 var(--ws-font-ui);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  translate: -50% 0.25rem;
  transition: opacity var(--ws-t-fast) linear, translate var(--ws-t-base) var(--ws-spring);
}

.ws-dock__item:active .ws-dock__label,
.ws-dock__item:focus-visible .ws-dock__label,
.ws-dock__item.is-announcing .ws-dock__label {
  opacity: 1;
  translate: -50% 0;
}

@media (hover: hover) {
  .ws-dock__item:hover .ws-dock__label {
    opacity: 1;
    translate: -50% 0;
  }
}

@media (min-width: 64rem) {
  .ws-dock:not(.ws-dock--desktop) {
    display: none;
  }
}

/* Map panel layout: the dock moves to the top. */
@media (min-width: 64rem), (min-width: 40rem) and (orientation: landscape) {
  .ws-dock--desktop {
    top: calc(var(--ws-safe-top, 0px) + 1.25rem);
    bottom: auto;
    transform-origin: 50% 0;
  }

  .ws-dock--desktop .ws-dock__label {
    top: calc(100% + 0.625rem);
    bottom: auto;
  }
}

@media (min-width: 40rem) and (max-height: 30rem) and (orientation: landscape) {
  .ws-dock--desktop {
    top: calc(var(--ws-safe-top, 0px) + 0.5rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ws-dock,
  .ws-dock__pill,
  .ws-dock__icon,
  .ws-dock__label {
    transition: none;
  }

  .ws-dock__item:active .ws-dock__icon {
    transform: none;
  }
}

/* Installed-PWA launch stamp (boot.js: data-ws-launch, first paint only). */
html[data-ws-launch="play"]::before,
html[data-ws-launch="play"]::after {
  content: "";
  position: fixed;
  pointer-events: none;
}

html[data-ws-launch="play"]::before {
  inset: 0;
  z-index: 2147483646;
  /* Swallow taps under the veil; boot.js removes the attribute. */
  pointer-events: auto;
  background: var(--ws-paper) url("/assets/brand/app-icon-primary.png") center / 5.5rem no-repeat;
  animation: ws-launch-veil 1.2s var(--ws-ease-out) forwards;
}

html[data-ws-launch="play"]::after {
  top: 50%;
  left: 50%;
  z-index: 2147483647;
  width: 9rem;
  height: 9rem;
  margin: -4.5rem 0 0 -4.5rem;
  border: 0.3rem solid var(--ws-accent);
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.55rem var(--ws-paper), inset 0 0 0 0.7rem var(--ws-accent);
  animation: ws-launch-ring 1.2s var(--ws-spring) forwards;
}

@keyframes ws-launch-veil {
  0%,
  60% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/* Never animate visibility with the spring curve: its overshoot (> 1) flips the
   discrete value to "hidden" mid-animation. Opacity + pointer-events suffice. */
@keyframes ws-launch-ring {
  0% {
    opacity: 0;
    transform: scale(2.2) rotate(-24deg);
  }

  28% {
    opacity: 1;
    transform: scale(0.94) rotate(-8deg);
  }

  40%,
  60% {
    opacity: 1;
    transform: scale(1) rotate(-8deg);
  }

  100% {
    opacity: 0;
    transform: scale(1.04) rotate(-8deg);
  }
}

/* Empty-state art: a globe receives a stamp (plays once). */
.ws-state__art {
  display: block;
  width: 7.5rem;
  height: 7.5rem;
  margin: 0 auto 0.75rem;
  color: var(--ws-ink);
}

.ws-state__art svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ws-state__art-globe,
.ws-state__art-lines {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  opacity: 0.55;
}

.ws-state__art-stamp {
  fill: none;
  stroke: var(--ws-accent);
  transform: rotate(-8deg);
  transform-box: fill-box;
  transform-origin: center;
  animation: ws-state-stamp 900ms var(--ws-spring) 200ms both;
}

.ws-state__art-stamp circle:first-child {
  stroke-width: 3;
}

.ws-state__art-stamp circle:last-child {
  stroke-width: 1.4;
  stroke-dasharray: 3 4;
}

@keyframes ws-state-stamp {
  0% {
    opacity: 0;
    transform: scale(1.7) rotate(-26deg);
  }

  60% {
    opacity: 1;
    transform: scale(0.95) rotate(-8deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) rotate(-8deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ws-state__art-stamp {
    animation: none;
  }
}

/* Passport stamp (components/stamp.php, R2b). Decorative and aria-hidden; the
   travel state is always written out as text next to it. Inked onto paper in light
   mode; dashed rings repeat the map's TRANSIT / WANT_TO_VISIT encoding. */
.ws-stamp {
  --ws-stamp-ink: var(--ws-accent-text);
  display: inline-block;
  width: 5.5rem;
  aspect-ratio: 1;
  color: var(--ws-stamp-ink);
  mix-blend-mode: multiply;
  transform: rotate(-8deg);
  pointer-events: none;
}

.ws-stamp[hidden] {
  display: none;
}

.ws-stamp svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ws-stamp__ring {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
}

.ws-stamp__ring--inner {
  stroke-width: 1.4;
}

.ws-stamp__label,
.ws-stamp__state {
  fill: currentColor;
  font: 500 9.5px var(--ws-font-mono);
  letter-spacing: 0.14em;
}

.ws-stamp__state {
  font-size: 7px;
}

.ws-stamp__code {
  fill: currentColor;
  font: 700 25px var(--ws-font-display);
}

.ws-stamp--visited {
  --ws-stamp-ink: var(--ws-status-visited);
}

.ws-stamp--lived {
  --ws-stamp-ink: var(--ws-status-lived);
}

.ws-stamp--transit {
  --ws-stamp-ink: var(--ws-status-transit-line);
}

.ws-stamp--lived .ws-stamp__ring--inner {
  stroke-width: 3;
}

.ws-stamp--transit .ws-stamp__ring,
.ws-stamp--want .ws-stamp__ring {
  stroke-dasharray: 5 4;
}

.ws-stamp--want {
  --ws-stamp-ink: var(--ws-status-want-line);
}

@media (prefers-color-scheme: dark) {
  .ws-ui-v2 .ws-stamp {
    mix-blend-mode: normal;
  }
}

@media (forced-colors: active) {
  .ws-stamp {
    color: CanvasText;
    mix-blend-mode: normal;
  }
}

/* Radial status menu (map-radial.js, R2c): five status chips around a long-pressed
   destination; the checked one is ringed like the sheet chip. */
.ws-radial {
  position: fixed;
  top: var(--ws-radial-cy);
  left: var(--ws-radial-cx);
  z-index: 40;
}

.ws-radial[hidden] {
  display: none;
}

.ws-radial__item {
  position: absolute;
  top: calc(var(--ws-radial-y) - 1.625rem);
  left: calc(var(--ws-radial-x) - 1.625rem);
  display: grid;
  width: 3.25rem;
  height: 3.25rem;
  place-items: center;
  padding: 0;
  background: var(--ws-surface);
  border: 1px solid var(--ws-line);
  border-radius: 50%;
  box-shadow: var(--ws-shadow-float);
  cursor: pointer;
  animation: ws-radial-in var(--ws-t-base) var(--ws-ease-out) calc(var(--ws-radial-i) * 30ms) both;
}

.ws-radial__item[aria-checked="true"] {
  box-shadow: 0 0 0 2px var(--ws-surface), 0 0 0 4px var(--ws-ink), var(--ws-shadow-float);
}

.ws-radial__item[aria-checked="true"] .ws-map-inspector__choice-icon {
  color: var(--ws-status-on);
  background: var(--ws-status-color);
}

.ws-radial__item:focus-visible {
  outline: 2px solid var(--ws-focus);
  outline-offset: 2px;
}

@keyframes ws-radial-in {
  from {
    opacity: 0;
    transform: translate(calc(var(--ws-radial-x) * -1), calc(var(--ws-radial-y) * -1)) scale(0.4);
  }
}

@media (forced-colors: active) {
  .ws-radial__item[aria-checked="true"] {
    outline: 3px solid Highlight;
    outline-offset: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ws-radial__item {
    animation: none;
  }
}

/* Add (+), R3: option cards (components/add-options.php) shared by the sheet and the
   no-JS /add page, and the bottom sheet itself (components/add-sheet.php, add-sheet.js). */
.ws-add-options {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ws-add-option {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) 1.25rem;
  align-items: center;
  gap: 0.9rem;
  min-height: 4.5rem;
  padding: 0.75rem 1rem 0.75rem 0.75rem;
  color: var(--ws-ink);
  text-decoration: none;
  background: var(--ws-surface-raised);
  border: 1px solid var(--ws-line);
  border-radius: 1.25rem;
  transition: transform var(--ws-t-fast) var(--ws-ease-out), border-color var(--ws-t-fast) var(--ws-ease-out);
}

.ws-add-option:hover {
  border-color: var(--ws-line-strong);
}

.ws-add-option:active {
  transform: scale(0.98);
}

.ws-add-option:focus-visible,
.ws-add-sheet__close:focus-visible {
  outline: 2px solid var(--ws-focus);
  outline-offset: 2px;
}

.ws-add-option__icon {
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  color: var(--ws-accent-text);
  background: var(--ws-accent-soft);
  border-radius: 50%;
}

.ws-add-option__copy {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.ws-add-option__copy strong {
  font: 600 1rem / 1.25 var(--ws-font-ui);
}

.ws-add-option__copy span {
  color: var(--ws-muted);
  font: 400 0.85rem / 1.4 var(--ws-font-ui);
}

.ws-add-option__chevron {
  color: var(--ws-muted);
}

.ws-add-sheet {
  position: fixed;
  inset: 0;
  z-index: var(--ws-z-modal, 60);
}

.ws-add-sheet[hidden] {
  display: none;
}

.ws-add-sheet__backdrop {
  position: absolute;
  inset: 0;
  padding: 0;
  background: rgb(15 26 33 / 45%);
  border: 0;
  cursor: pointer;
  animation: ws-add-fade var(--ws-t-base) var(--ws-ease-out) both;
}

.ws-add-sheet__surface {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  gap: 0.9rem;
  max-width: 34rem;
  margin-inline: auto;
  padding: 0.5rem 1rem calc(1.25rem + var(--ws-safe-bottom, 0px));
  color: var(--ws-ink);
  background: var(--ws-surface);
  border-radius: 1.6rem 1.6rem 0 0;
  box-shadow: 0 -1rem 2.5rem -1rem rgb(15 26 33 / 40%);
  transform: translateY(var(--ws-add-drag, 0px));
  animation: ws-add-rise var(--ws-t-slow) var(--ws-spring) both;
}

.ws-add-sheet[data-state="closing"] .ws-add-sheet__surface {
  animation: ws-add-sink var(--ws-t-base) var(--ws-ease-out) both;
}

.ws-add-sheet[data-state="closing"] .ws-add-sheet__backdrop {
  animation: ws-add-fade var(--ws-t-base) var(--ws-ease-out) reverse both;
  pointer-events: none;
}

.ws-add-sheet__surface:focus {
  outline: none;
}

.ws-add-sheet[data-state="open"] .ws-add-sheet__surface {
  animation: none;
  transition: transform var(--ws-t-base) var(--ws-spring);
}

.ws-add-sheet[data-dragging] .ws-add-sheet__surface {
  animation: none;
  transition: none;
}

/* A 44 px wide, 24 px tall drag target; ::before draws the visible grabber. */
.ws-add-sheet__handle {
  display: grid;
  justify-self: center;
  width: 6.5rem;
  height: 1.5rem;
  margin: -0.35rem 0 -0.6rem;
  place-items: center;
  cursor: grab;
  touch-action: none;
}

.ws-add-sheet__handle::before {
  width: 2.5rem;
  height: 0.3rem;
  background: var(--ws-line-strong);
  border-radius: 999px;
  content: "";
}

.ws-add-sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.ws-add-sheet__header h2 {
  margin: 0;
  font: 700 1.35rem / 1.15 var(--ws-font-display);
}

.ws-add-sheet__close {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  padding: 0;
  color: var(--ws-ink);
  background: var(--ws-paper-strong);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

@keyframes ws-add-rise {
  from {
    transform: translateY(100%);
  }
}

@keyframes ws-add-sink {
  to {
    transform: translateY(100%);
  }
}

@keyframes ws-add-fade {
  from {
    opacity: 0;
  }
}

/* With the dock on top (PANEL_LAYOUT_QUERY), the sheet drops from it as a card. */
@media (min-width: 64rem), (min-width: 40rem) and (orientation: landscape) {
  .ws-add-sheet__surface {
    top: calc(var(--ws-safe-top, 0px) + 5.5rem);
    bottom: auto;
    width: min(26rem, calc(100vw - 2rem));
    padding-bottom: 1rem;
    border-radius: 1.4rem;
    box-shadow: var(--ws-shadow-float);
    animation-name: ws-add-pop;
  }

  .ws-add-sheet__handle {
    display: none;
  }

  .ws-add-sheet[data-state="closing"] .ws-add-sheet__surface {
    animation-name: ws-add-unpop;
  }
}

@keyframes ws-add-pop {
  from {
    opacity: 0;
    transform: translateY(-0.5rem) scale(0.96);
  }
}

@keyframes ws-add-unpop {
  to {
    opacity: 0;
    transform: translateY(-0.5rem) scale(0.96);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ws-add-option,
  .ws-add-sheet__surface,
  .ws-add-sheet__backdrop {
    transition: none;
    animation: none;
  }
}

@media (forced-colors: active) {
  .ws-add-sheet__surface,
  .ws-add-option {
    border: 2px solid CanvasText;
  }
}

/* Pull to refresh (pull-refresh.js, R4; installed app only): a small globe follows the
   pull and turns with it, then spins while the page reloads. Decorative. */
.ws-pull {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 0.6rem);
  left: 50%;
  z-index: var(--ws-z-toast);
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--ws-glass-line);
  border-radius: 50%;
  background: var(--ws-glass-strong);
  box-shadow: var(--ws-shadow-float);
  color: var(--ws-ink-soft);
  opacity: min(1, calc(var(--ws-pull-turn, 0) * 1.5));
  translate: -50% calc(var(--ws-pull, 0px) - 4rem);
  pointer-events: none;
  transition: translate var(--ws-t-base) var(--ws-ease-out), opacity var(--ws-t-base) ease;
}

.ws-pull[hidden] {
  display: none;
}

.ws-pull[data-state="pulling"],
.ws-pull[data-state="ready"] {
  transition: none;
}

.ws-pull svg {
  width: 1.45rem;
  height: 1.45rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  rotate: calc(var(--ws-pull-turn, 0) * 1turn);
}

.ws-pull[data-state="ready"],
.ws-pull[data-state="refreshing"] {
  color: var(--ws-accent);
}

.ws-pull[data-state="refreshing"] {
  opacity: 1;
  translate: -50% 1rem;
}

.ws-pull[data-state="refreshing"] svg {
  animation: ws-pull-spin 900ms linear infinite;
}

@keyframes ws-pull-spin {
  to {
    rotate: 1turn;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ws-pull,
  .ws-pull svg {
    transition: none;
    rotate: none;
  }

  .ws-pull[data-state="refreshing"] svg {
    animation: none;
  }
}

/* Foundations showcase on the non-indexable app preview. */
.ws-foundations {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
  padding: 1.5rem;
  border: 1px solid var(--ws-line);
  border-radius: 1.625rem;
}

.ws-foundations__kicker {
  margin: 0;
  color: var(--ws-accent-text);
  font: 500 0.72rem/1.2 var(--ws-font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Two classes beat the legacy ".ws-state-showcase h3" rule. */
.ws-foundations .ws-foundations__title {
  margin: 0.25rem 0 0;
  color: var(--ws-ink);
  font: 700 clamp(1.75rem, 5vw, 2.5rem)/1 var(--ws-font-display);
  letter-spacing: var(--ws-tracking-tight);
}

.ws-foundations__head p:last-child {
  margin: 0.5rem 0 0;
  color: var(--ws-muted);
}

.ws-foundations__swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ws-foundations__swatch {
  display: grid;
  align-content: end;
  min-height: 4.5rem;
  padding: 0.5rem;
  border: 1px solid var(--ws-line);
  border-radius: 1.125rem;
  background: var(--swatch);
}

.ws-foundations__swatch span {
  justify-self: start;
  padding: 0.15rem 0.4rem;
  border-radius: 0.5rem;
  background: var(--ws-surface);
  color: var(--ws-ink);
  font: 500 0.7rem/1.2 var(--ws-font-mono);
}

.ws-foundations__type {
  display: grid;
  gap: 0.5rem;
}

.ws-foundations__display {
  margin: 0;
  color: var(--ws-ink);
  font: 700 clamp(2.5rem, 9vw, 4.5rem)/0.95 var(--ws-font-display);
  letter-spacing: -0.035em;
}

.ws-foundations__body {
  margin: 0;
  color: var(--ws-ink);
  font: 400 1rem/1.5 var(--ws-font-ui);
}

.ws-foundations__mono {
  margin: 0;
  color: var(--ws-accent-text);
  font: 500 0.9rem/1.4 var(--ws-font-mono);
}

.ws-map-celebrate{position:absolute;inset:0;z-index:var(--ws-z-controls);display:grid;place-items:start center;padding-top:10.5rem;pointer-events:none}
@media (min-width:64rem),(min-width:40rem) and (orientation:landscape){.ws-map-celebrate{place-items:center;padding:0}}
.ws-map-celebrate[hidden]{display:none}
.ws-map-celebrate svg{width:min(50vw,15rem);overflow:visible;color:var(--ws-ink)}
.ws-celebrate__disc{fill:var(--ws-surface);fill-opacity:.9}
.ws-celebrate__ring{color:var(--ws-accent-text)}
.ws-celebrate__ring circle{fill:none;stroke:currentColor}
.ws-celebrate__ring .ws-celebrate__dot,.ws-celebrate__ring text{fill:currentColor;stroke:none}
.ws-celebrate__name{font:600 13px var(--ws-font-ui);letter-spacing:.2em}
.ws-celebrate__state{font:600 8.5px var(--ws-font-ui);letter-spacing:.24em}
.ws-map-celebrate.is-playing{animation:ws-celebrate-out 2.1s ease forwards}
.is-playing .ws-celebrate__mark,.is-playing .ws-celebrate__ring{transform-box:view-box;transform-origin:50px 50px}
.is-playing .ws-celebrate__mark{animation:ws-celebrate-pop .45s cubic-bezier(.3,1.4,.5,1) both}
.is-playing .ws-celebrate__ring{animation:ws-celebrate-slam .55s cubic-bezier(.2,.8,.2,1.15) .3s both}
@keyframes ws-celebrate-out{0%{opacity:0}8%,78%{opacity:1}100%{opacity:0}}
@keyframes ws-celebrate-pop{from{opacity:0;transform:scale(.3)}}
@keyframes ws-celebrate-slam{0%{opacity:0;transform:scale(1.7) rotate(-34deg)}50%{opacity:1;transform:scale(.95) rotate(-6deg)}100%{opacity:1;transform:rotate(-8deg)}}

/* Action buttons for stand-alone links (owner, 2026-10-15: "naredi lep gumb ki paše v
   kontekst"). A link that is an action is a pill, never underlined text. Default: a soft
   accent pill; --quiet: outlined, for secondary steps such as Back or Skip. */
.ws-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0 1.15rem;
  color: var(--ws-accent-deep, var(--ws-ink));
  font: 600 0.92rem/1.2 var(--ws-font-ui);
  text-align: center;
  text-decoration: none;
  background: color-mix(in srgb, var(--ws-accent) 16%, var(--ws-surface, transparent));
  border: 1px solid color-mix(in srgb, var(--ws-accent) 38%, transparent);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color var(--ws-t-fast, 0.15s) ease, border-color var(--ws-t-fast, 0.15s) ease, transform var(--ws-t-fast, 0.15s) ease;
}

.ws-cta::after {
  width: 0.45rem;
  height: 0.45rem;
  margin-left: 0.1rem;
  content: "";
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

.ws-cta:hover {
  background: color-mix(in srgb, var(--ws-accent) 26%, var(--ws-surface, transparent));
  border-color: color-mix(in srgb, var(--ws-accent) 60%, transparent);
}

.ws-cta:active {
  transform: scale(0.98);
}

.ws-cta:focus-visible {
  outline: 3px solid var(--ws-focus);
  outline-offset: 2px;
}

.ws-cta--quiet {
  color: var(--ws-ink);
  background: transparent;
  border-color: var(--ws-line-strong, var(--ws-line));
}

.ws-cta--quiet:hover {
  background: color-mix(in srgb, var(--ws-ink) 6%, transparent);
  border-color: var(--ws-ink);
}

.ws-cta--back::after {
  content: none;
}

.ws-cta--back::before {
  width: 0.45rem;
  height: 0.45rem;
  margin-right: 0.1rem;
  content: "";
  border-bottom: 2px solid currentColor;
  border-left: 2px solid currentColor;
  transform: rotate(45deg);
}

.ws-cta--small {
  min-height: 2.25rem;
  padding: 0 0.85rem;
  font-size: 0.82rem;
}

@media (pointer: coarse) {
  .ws-cta--small {
    min-height: 2.75rem;
  }
}

/* Older page rules underline and recolour plain links (a.auth-panel a, map inspector):
   a link that is a button keeps the button look. Inline arrows give way to the chevron. */
a.ws-cta,
a.ws-cta:hover,
a.ws-cta:visited {
  color: var(--ws-accent-deep, var(--ws-ink));
  text-decoration: none;
}

a.ws-cta.ws-cta--quiet,
a.ws-cta.ws-cta--quiet:hover,
a.ws-cta.ws-cta--quiet:visited {
  color: var(--ws-ink);
}

.ws-cta > span[aria-hidden="true"] {
  display: none;
}

/* The one main action in a card: a solid pill. */
.ws-cta--primary,
a.ws-cta.ws-cta--primary,
a.ws-cta.ws-cta--primary:hover,
a.ws-cta.ws-cta--primary:visited {
  color: #1b1208;
  background: linear-gradient(135deg, #f7bd80, var(--ws-accent));
  border-color: transparent;
  box-shadow: 0 0.6rem 1.4rem -0.9rem color-mix(in srgb, var(--ws-accent) 80%, transparent);
}

.ws-cta--primary:hover {
  filter: brightness(1.05);
}

/* An icon leads instead of the chevron. */
.ws-cta--icon::after {
  content: none;
}

.ws-cta .ws-icon {
  width: 1rem;
  height: 1rem;
}

/* A context button right after copy gets breathing room without a wrapper. */
:where(p) + .ws-cta {
  margin-top: 0.75rem;
}

.ws-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1rem 0 0;
}

@media (prefers-color-scheme: dark) {
  .ws-cta,
  a.ws-cta,
  a.ws-cta:hover,
  a.ws-cta:visited {
    color: var(--ws-accent-text, var(--ws-accent));
    background: color-mix(in srgb, var(--ws-accent) 14%, transparent);
  }

  .ws-cta--quiet {
    color: var(--ws-ink);
    background: transparent;
  }
}

/* Forced colours: system pairs win over every variant and state (a.ws-cta, primary, quiet,
   hover, visited), so !important is deliberate here and only here (Codex UX-02). */
@media (forced-colors: active) {
  .ws-cta,
  .ws-cta:visited {
    color: LinkText !important;
    background: Canvas !important;
    border: 1px solid LinkText !important;
    box-shadow: none !important;
    filter: none !important;
  }

  button.ws-cta {
    color: ButtonText !important;
    background: ButtonFace !important;
    border-color: ButtonText !important;
  }

  /* Hover keeps the text/canvas pair (engines force backgrounds differently) and marks
     itself with the border alone. */
  .ws-cta:hover {
    border-color: Highlight !important;
    outline: 1px solid Highlight;
  }

  .ws-cta:focus-visible {
    outline: 3px solid Highlight !important;
    outline-offset: 2px;
  }
}

/* Panels, sheets and popups scroll without a visible scrollbar (owner, 2026-10-15). */
:where(.ws-my-countries, .ws-map-browse, .ws-map-inspector, .ws-map-hud, .ws-map-autocomplete, .ws-add-sheet, .ws-add-sheet *, dialog, [role="dialog"], .ws-places-search__results) {
  scrollbar-width: none;
}

:where(.ws-my-countries, .ws-map-browse, .ws-map-inspector, .ws-map-hud, .ws-map-autocomplete, .ws-add-sheet, .ws-add-sheet *, dialog, [role="dialog"], .ws-places-search__results)::-webkit-scrollbar {
  display: none;
}