/**
 * Floating apartment picker.
 *
 * A frosted glass bar fixed to the bottom centre of a project page, in the
 * same glass as the scrolled header. It is hidden while the hero is on screen,
 * while the footer is and while the site menu is open; apartment-picker.js
 * adds .is-visible in between and the bar slides up into place. Opening it
 * (.is-open) grows the two-option
 * menu upward out of the same panel, over a dimmed, blurred page.
 *
 * The wrapper only positions: it spans the bottom edge, centres the panel and
 * lets clicks through. Nothing is ever transformed, filtered or faded on the
 * wrapper itself, because a transform or filter would make it the containing
 * block of the fixed backdrop, and opacity would cut the panel's backdrop blur
 * off from the page. All of that happens on the panel (.deka-picker__box).
 *
 * The hidden state is scoped to .deka-js, so without JavaScript the bar simply
 * stays where it is.
 *
 * Accent colour arrives as --deka-picker-colour from the project, so the same
 * component tints itself per development without a config in the script.
 */

.deka-picker {
  --deka-picker-offset: 1.5rem; /* 24 from the bottom edge */
  --deka-picker-glass: rgb(250 247 246 / 60%);
  --deka-picker-glass-open: rgb(250 247 246 / 86%); /* over the dimmed page */
  --deka-picker-line: rgb(34 33 34 / 14%);
  --deka-picker-ease: var(--deka-ease-out);
  --deka-picker-reveal: 450ms;
  --deka-picker-conceal: 300ms;

  position: fixed;
  inset-inline: 0;
  bottom: calc(var(--deka-picker-offset) + env(safe-area-inset-bottom, 0px));
  z-index: var(--deka-z-drawer);
  display: flex;
  justify-content: center;
  padding-inline: 1rem;
  pointer-events: none; /* the strip is full width; only the panel takes clicks */
  font-family: var(--deka-font-body);
}

/* Dims and blurs the page while the menu is open; a click on it closes. */
.deka-picker__backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgb(0 0 0 / 35%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  cursor: pointer;
  pointer-events: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--deka-duration-base) var(--deka-picker-ease),
              visibility 0s linear var(--deka-duration-base);
}

.deka-picker.is-open .deka-picker__backdrop {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--deka-duration-base) var(--deka-picker-ease), visibility 0s;
}

/* --- Panel ----------------------------------------------------------------- */

.deka-picker__box {
  position: relative;
  width: max-content;
  min-width: min(19rem, 100%); /* 304 */
  max-width: 100%;
  border: 1px solid var(--deka-picker-line);
  background: var(--deka-picker-glass);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: 0 10px 40px rgb(34 33 34 / 12%);
  pointer-events: auto;
  transition: opacity var(--deka-picker-reveal) var(--deka-picker-ease),
              transform var(--deka-picker-reveal) var(--deka-picker-ease),
              visibility 0s,
              background-color var(--deka-duration-base) var(--deka-picker-ease);
}

/*
 * Out of sight (hero or footer on screen). visibility keeps the links out of
 * the tab order, and is only flipped once the fade has finished.
 */
.deka-js .deka-picker:not(.is-visible) .deka-picker__box {
  opacity: 0;
  visibility: hidden;
  transform: translateY(1.25rem);
  pointer-events: none;
  transition: opacity var(--deka-picker-conceal) var(--deka-picker-ease),
              transform var(--deka-picker-conceal) var(--deka-picker-ease),
              visibility 0s linear var(--deka-picker-conceal);
}

.deka-picker.is-open .deka-picker__box { background: var(--deka-picker-glass-open); }

/* --- Options (open upward: the panel is anchored at the bottom) ------------ */

.deka-picker__options {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  visibility: hidden; /* folded links are not tabbable */
  transition: max-height 400ms var(--deka-picker-ease),
              opacity var(--deka-duration-base) var(--deka-picker-ease),
              visibility 0s linear 400ms;
}

.deka-picker.is-open .deka-picker__options {
  max-height: 13.75rem; /* 220 */
  opacity: 1;
  visibility: visible;
  transition: max-height 400ms var(--deka-picker-ease),
              opacity var(--deka-duration-base) var(--deka-picker-ease),
              visibility 0s;
}

.deka-picker__list {
  display: flex;
  flex-direction: column;
  padding: 0.375rem;
  border-bottom: 1px solid var(--deka-picker-line); /* hairline above the bar */
}

.deka-picker__option {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.625rem;
  color: inherit;
  text-decoration: none;
  transition: background-color var(--deka-duration-fast) var(--deka-picker-ease);
}

.deka-picker__option + .deka-picker__option { border-top: 1px solid var(--deka-picker-line); }

.deka-picker__option:is(:hover, :focus-visible) { background: rgb(250 247 246 / 75%); }
.deka-picker__option:focus-visible { outline-offset: -2px; border-radius: 0; }

.deka-picker__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem; /* 44 */
  height: 2.75rem;
  border: 1px solid var(--deka-picker-line);
  background: rgb(250 247 246 / 80%);
  transition: background-color var(--deka-duration-fast) var(--deka-picker-ease),
              border-color var(--deka-duration-fast) var(--deka-picker-ease);
}

.deka-picker__option:is(:hover, :focus-visible) .deka-picker__icon {
  border-color: var(--deka-picker-colour);
  background: var(--deka-picker-colour);
}

.deka-picker__icon svg { width: 22px; height: 22px; overflow: visible; }

/* Filter icon: the two slider knobs swap ends on hover. */
.deka-picker__line {
  stroke: var(--deka-picker-colour);
  stroke-width: 2;
  stroke-linecap: round;
  transition: stroke var(--deka-duration-fast) var(--deka-picker-ease);
}

.deka-picker__dot {
  fill: var(--deka-picker-colour);
  transition: fill var(--deka-duration-fast) var(--deka-picker-ease),
              transform var(--deka-duration-fast) var(--deka-picker-ease);
}

.deka-picker__option:is(:hover, :focus-visible) .deka-picker__line { stroke: var(--deka-white); }
.deka-picker__option:is(:hover, :focus-visible) .deka-picker__dot { fill: var(--deka-white); }
.deka-picker__option:is(:hover, :focus-visible) .deka-picker__dot--a { transform: translateX(6px); }
.deka-picker__option:is(:hover, :focus-visible) .deka-picker__dot--b { transform: translateX(-6px); }

/* Visual icon: the cursor clicks a unit and a ripple spreads from it. */
.deka-picker__rect {
  fill: none;
  stroke: var(--deka-picker-colour);
  stroke-width: 1.5;
  transition: stroke var(--deka-duration-fast) var(--deka-picker-ease);
}

.deka-picker__cursor {
  fill: var(--deka-picker-colour);
  transform-origin: 14px 14px;
  transition: fill var(--deka-duration-fast) var(--deka-picker-ease),
              transform var(--deka-duration-fast) var(--deka-picker-ease);
}

.deka-picker__ripple {
  fill: none;
  stroke: var(--deka-picker-colour);
  stroke-width: 1.5;
  opacity: 0;
  transform: scale(0.5);
  transform-origin: 17px 17px;
  transition: opacity var(--deka-duration-base) var(--deka-picker-ease),
              transform var(--deka-duration-base) var(--deka-picker-ease),
              stroke var(--deka-duration-fast) var(--deka-picker-ease);
}

.deka-picker__option:is(:hover, :focus-visible) .deka-picker__rect { stroke: var(--deka-white); }
.deka-picker__option:is(:hover, :focus-visible) .deka-picker__cursor { fill: var(--deka-white); transform: translate(2px, 2px); }
.deka-picker__option:is(:hover, :focus-visible) .deka-picker__ripple { stroke: var(--deka-white); opacity: 1; transform: scale(1); }

.deka-picker__text {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 0.125rem;
}

.deka-picker__title {
  font-size: var(--deka-text-sm);
  font-weight: var(--deka-weight-semibold);
  line-height: 1.3;
  color: var(--deka-text);
}

.deka-picker__desc {
  font-size: var(--deka-text-xs);
  line-height: 1.3;
  color: var(--deka-text-muted);
}

.deka-picker__chevron {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  transition: transform var(--deka-duration-fast) var(--deka-picker-ease);
}

.deka-picker__chevron polyline {
  fill: none;
  stroke: var(--deka-border-strong);
  stroke-width: 2;
  stroke-linecap: round;
  transition: stroke var(--deka-duration-fast) var(--deka-picker-ease);
}

.deka-picker__option:is(:hover, :focus-visible) .deka-picker__chevron { transform: translateX(3px); }
.deka-picker__option:is(:hover, :focus-visible) .deka-picker__chevron polyline { stroke: var(--deka-picker-colour); }

/* --- Trigger (the bar itself) ---------------------------------------------- */

.deka-picker__trigger {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.375rem 0.75rem 0.375rem 0.375rem; /* 6 12 6 6: the icon sits tight in the corner */
  border: 0;
  background: transparent;
  color: var(--deka-text);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--deka-duration-base) var(--deka-picker-ease);
}

.deka-picker__trigger:hover { background: rgb(250 247 246 / 45%); }
.deka-picker__trigger:focus-visible { outline-offset: -2px; }

.deka-picker__trigger-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 2.5rem; /* 40 */
  height: 2.5rem;
  background: var(--deka-picker-colour);
  color: var(--deka-white);
}

/* House and cross share one cell and cross-fade on open. */
.deka-picker__glyph {
  grid-area: 1 / 1;
  width: 18px;
  height: 18px;
  transition: opacity var(--deka-duration-base) var(--deka-picker-ease),
              transform var(--deka-duration-base) var(--deka-picker-ease);
}

.deka-picker__glyph :is(path, polyline) {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.deka-picker__glyph--close { opacity: 0; transform: rotate(-90deg) scale(0.6); }
.deka-picker.is-open .deka-picker__glyph--home { opacity: 0; transform: rotate(90deg) scale(0.6); }
.deka-picker.is-open .deka-picker__glyph--close { opacity: 1; transform: none; }

.deka-picker__trigger-text {
  flex: 1;
  text-align: left;
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: var(--deka-weight-semibold);
  line-height: 1.2;
}

.deka-picker__badge {
  flex-shrink: 0;
  padding: 0.25rem 0.5rem;
  background: var(--deka-black);
  color: var(--deka-white);
  font-size: var(--deka-text-xs);
  font-weight: var(--deka-weight-semibold);
  line-height: 1.4;
  white-space: nowrap;
}

/* --- Responsive / motion ---------------------------------------------------- */

@media (max-width: 48rem) { /* 768 */
  .deka-picker { --deka-picker-offset: 1rem; }
  .deka-picker__trigger-icon { width: 2.25rem; height: 2.25rem; }
  .deka-picker__option { gap: 0.75rem; padding: 0.5rem; }
  .deka-picker__icon { width: 2.5rem; height: 2.5rem; }
}

/* No slide: the bar and the menu only fade, and the glyphs swap in place. */
@media (prefers-reduced-motion: reduce) {
  .deka-picker { --deka-picker-reveal: 200ms; --deka-picker-conceal: 150ms; }

  .deka-picker__box,
  .deka-js .deka-picker:not(.is-visible) .deka-picker__box { transform: none; }

  .deka-picker__options,
  .deka-picker.is-open .deka-picker__options { transition: none; }

  .deka-picker__glyph,
  .deka-picker.is-open .deka-picker__glyph { transform: none; }
}