/* SPDX-License-Identifier: MIT
 *
 * The Tailwind build's input (SL_05A Part D). No `@tailwind base`: that layer would carry
 * Tailwind's preflight and any daisyUI theme, and this site has its own base (stonelane.css)
 * and its own palette (design-tokens.css). Built by `make css` into static/css/site.css.
 */

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  transition-duration: 200ms;
  height: 1.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  width: -moz-fit-content;
  width: fit-content;
  padding-left: 0.563rem;
  padding-right: 0.563rem
}

.btn {
  display: inline-flex;
  height: 3rem;
  min-height: 3rem;
  flex-shrink: 0;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  border-radius: var(--rounded-btn, 0.5rem);
  border-color: transparent;
  padding-left: 1rem;
  padding-right: 1rem;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1em
}

.btn-disabled,
  .btn[disabled],
  .btn:disabled {
  pointer-events: none
}

:where(.btn:is(input[type="checkbox"])),
:where(.btn:is(input[type="radio"])) {
  width: auto;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none
}

.btn:is(input[type="checkbox"]):after,
.btn:is(input[type="radio"]):after {
  --tw-content: attr(aria-label);
  content: var(--tw-content)
}

.card {
  position: relative;
  display: flex;
  flex-direction: column
}

.card:focus {
  outline: 2px solid transparent;
  outline-offset: 2px
}

.card figure {
  display: flex;
  align-items: center;
  justify-content: center
}

.card.image-full {
  display: grid
}

.card.image-full:before {
  position: relative;
  content: ""
}

.card.image-full:before,
    .card.image-full > * {
  grid-column-start: 1;
  grid-row-start: 1
}

.card.image-full > figure img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover
}

.card.image-full > .card-body {
  position: relative
}

:where(.menu li) .badge {
  justify-self: end
}

.stats {
  display: inline-grid
}

:where(.stats) {
  grid-auto-flow: column
}

.stat {
  display: inline-grid;
  width: 100%;
  grid-template-columns: repeat(1, 1fr)
}

.stat-title {
  grid-column-start: 1;
  white-space: nowrap
}

.stat-value {
  grid-column-start: 1;
  white-space: nowrap
}

.stat-desc {
  grid-column-start: 1;
  white-space: nowrap
}

.tabs {
  display: grid;
  align-items: flex-end
}

.tabs-lifted:has(.tab-content[class^="rounded-"])
    .tab:first-child:not(:is(.tab-active, [aria-selected="true"])), .tabs-lifted:has(.tab-content[class*=" rounded-"])
    .tab:first-child:not(:is(.tab-active, [aria-selected="true"])) {
  border-bottom-color: transparent
}

.tab {
  position: relative;
  grid-row-start: 1;
  display: inline-flex;
  height: 2rem;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
  line-height: 2;
  --tab-padding: 1rem
}

.tab:is(input[type="radio"]) {
  width: auto;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px
}

.tab:is(input[type="radio"]):after {
  --tw-content: attr(aria-label);
  content: var(--tw-content)
}

.tab:not(input):empty {
  cursor: default;
  grid-column-start: span 9999
}

:checked + .tab-content:nth-child(2),
  :is(.tab-active, [aria-selected="true"]) + .tab-content:nth-child(2) {
  border-start-start-radius: 0px
}

input.tab:checked + .tab-content,
:is(.tab-active, [aria-selected="true"]) + .tab-content {
  display: block
}

.btm-nav-xs > *:where(.active) {
  border-top-width: 1px
}

.btm-nav-sm > *:where(.active) {
  border-top-width: 2px
}

.btm-nav-md > *:where(.active) {
  border-top-width: 2px
}

.btm-nav-lg > *:where(.active) {
  border-top-width: 4px
}

.tabs-md :where(.tab) {
  height: 2rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  line-height: 2;
  --tab-padding: 1rem
}

.tabs-lg :where(.tab) {
  height: 3rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  line-height: 2;
  --tab-padding: 1.25rem
}

.tabs-sm :where(.tab) {
  height: 1.5rem;
  font-size: 0.875rem;
  line-height: .75rem;
  --tab-padding: 0.75rem
}

.tabs-xs :where(.tab) {
  height: 1.25rem;
  font-size: 0.75rem;
  line-height: .75rem;
  --tab-padding: 0.5rem
}

.join.join-vertical > :where(*:not(:first-child)):is(.btn) {
  margin-top: calc(var(--border-btn) * -1)
}

.join.join-horizontal > :where(*:not(:first-child)):is(.btn) {
  margin-inline-start: calc(var(--border-btn) * -1);
  margin-top: 0px
}

.rounded-2xl {
  border-radius: 1rem
}