/* =============================================================
   Mighty Drive — kit/kit.css  (V2.2.2)
   The Style picker, shared by every style, plus a soft cross-fade
   when you switch styles. Each style maps the --mdk-* tokens to its
   own colors at the end of its stylesheet; the fallbacks here only
   keep the picker legible if a mapping is ever missing.
   ============================================================= */

/* Switching styles is a page navigation. Where the browser supports
   cross-document view transitions it becomes a short cross-fade;
   elsewhere it is an ordinary, instant load. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 180ms; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

.mdk-picker { container-type: inline-size; }
.mdk-styles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 168px), 1fr));
  gap: 12px;
  margin: 4px 0 0;
}
/* Stack before squeeze: a preview card never drops below ~210px wide.
   kit.js sets data-count to the number of styles.
     Eight (today), 880px+ : two rows of four preview cards, the dark
                             row over the light row.
     Nine (once Holiday ships), 1100px+ : two rows of five.
     Anything narrower      : a list, preview beside the name, in two
                             columns from 520px, one on a phone.
   Browsers without container queries keep the auto-fill grid above. */
@supports (container-type: inline-size) {
  .mdk-styles { grid-template-columns: minmax(0, 1fr); }
  @container (min-width: 520px) { .mdk-styles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @container (min-width: 880px) { .mdk-styles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  @container (max-width: 879.98px) {
    .mdk-styles > .mdk-style { flex-direction: row; align-items: center; gap: 12px; padding: 8px; }
    .mdk-styles > .mdk-style .mdk-style__shot { flex: none; width: 112px; }
  }
  /* Nine: five across needs 1100px for 210px cards, so between 880px
     and 1100px the nine keep the two-column list rather than squeeze. */
  @container (min-width: 880px) and (max-width: 1099.98px) {
    .mdk-styles[data-count="9"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mdk-styles[data-count="9"] > .mdk-style { flex-direction: row; align-items: center; gap: 12px; padding: 8px; }
    .mdk-styles[data-count="9"] > .mdk-style .mdk-style__shot { flex: none; width: 112px; }
  }
  @container (min-width: 1100px) { .mdk-styles[data-count="9"] { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
}

.mdk-style {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 44px;
  margin: 0;
  padding: 8px 8px 12px;
  text-align: left;
  font: inherit;
  color: var(--mdk-fg, inherit);
  background: var(--mdk-card, rgba(127, 127, 127, 0.08));
  border: 1px solid var(--mdk-line, rgba(127, 127, 127, 0.28));
  border-radius: var(--mdk-radius, 14px);
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
  -webkit-tap-highlight-color: transparent;
}
.mdk-style:hover { border-color: var(--mdk-line-strong, rgba(127, 127, 127, 0.5)); }
.mdk-style:active { transform: scale(0.985); }
.mdk-style:focus-visible {
  outline: 2px solid var(--mdk-accent, currentColor);
  outline-offset: 2px;
}
.mdk-style.is-on {
  border-color: var(--mdk-accent, currentColor);
  box-shadow: inset 0 0 0 1px var(--mdk-accent, currentColor);
  cursor: default;
}
.mdk-style.is-going { opacity: 0.7; }

.mdk-style__shot {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: calc(var(--mdk-radius, 14px) - 6px);
  background: var(--mdk-shot-bg, rgba(127, 127, 127, 0.18));
}
.mdk-style__shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mdk-style__shot.is-missing img { display: none; }

.mdk-style__text { display: flex; flex-direction: column; gap: 3px; padding: 0 4px; }
.mdk-style__name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-weight: 650;
  font-size: 1rem;
  line-height: 1.25;
}
.mdk-style__badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--mdk-accent-ink, #000);
  background: var(--mdk-accent, currentColor);
}
.mdk-style__blurb {
  font-size: 0.84rem;
  line-height: 1.35;
  color: var(--mdk-muted, inherit);
}

@media (prefers-reduced-motion: reduce) {
  .mdk-style { transition: none; }
  .mdk-style:active { transform: none; }
}

/* Each style has its own button rules; the picker's text always reads
   left-aligned regardless. */
.mdk-picker .mdk-style,
.mdk-picker .mdk-style__text,
.mdk-picker .mdk-style__blurb { text-align: left; }