/* ── Date chip picker ─────────────────────────────────────────────────────
   A compact wrapper around the sliding date picker (components/date-picker.js).
   Collapsed, it's a glass pill that mimics <campus-chip-picker> one-to-one:
   HugeIcons glyph + a stacked label/value box + a chevron. Tapped, the pill
   morphs into a popup that holds a title and the untouched sliding picker —
   same shell technique as campus-picker.css / time-picker.css: a fixed element
   whose box (top/left/width/height/border-radius) transitions between the
   trigger's rect and the panel's. date-chip-picker.js drives the geometry. */

/* Sized to its pill by the flanking .picker-row flex container. */
date-chip-picker {
  display: block;
  min-width: 0;
}

/* While loading: keep the glass pill and the "DATE" label; shimmer only the
   second line (the date value). */
date-chip-picker[data-loading] .dcp-trigger__value {
  display: none;
}

date-chip-picker:not([data-loading]) .dcp-trigger__skeleton {
  display: none;
}

.dcp-trigger__skeleton {
  display: block;
  width: 4.5rem;
  height: 14px;
  border-radius: 5px;
  background: linear-gradient(90deg,
      color-mix(in srgb, var(--text-color-primary) 6%, transparent) 25%,
      color-mix(in srgb, var(--text-color-primary) 12%, transparent) 50%,
      color-mix(in srgb, var(--text-color-primary) 6%, transparent) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.6s linear infinite;
}

/* ── Collapsed pill — glass button, hugs its content (mirrors .campus-select) */
.dcp-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  padding: 8px 16px;
  border: none;
  border-radius: var(--radius-pill);

  font-family: "Nunito", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  text-align: left;
  color: var(--text-color-primary);
  -webkit-tap-highlight-color: transparent;

  background: var(--glass-tint);
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
  backdrop-filter: blur(var(--glass-blur-sm));

  box-shadow:
    0 0 0 0.1px var(--glass-outline),
    var(--glass-highlight),
    0 4px 40px 0 var(--glass-shadow-color);

  transition: box-shadow 0.2s ease, background 0.2s ease;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .dcp-trigger,
  .dcp-popup {
    background: color-mix(in srgb, var(--background-color-secondary) 95%, black);
  }

  @media (prefers-color-scheme: dark) {
    .dcp-trigger,
    .dcp-popup {
      background: color-mix(in srgb, var(--background-color-secondary) 95%, white);
    }
  }
}

/* Outside 0.5px gradient stroke — same recipe as .campus-select::after. */
.dcp-trigger::after {
  content: "";
  position: absolute;
  inset: -0.5px;
  border-radius: inherit;
  padding: 0.5px;
  background: var(--glass-stroke-gradient);
  opacity: var(--glass-stroke-opacity);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.dcp-trigger[aria-expanded="true"] {
  box-shadow:
    0 0 0 0.1px var(--glass-outline),
    var(--glass-highlight),
    0 4px 40px 0 var(--glass-shadow-color),
    0 0 0 3px color-mix(in srgb, var(--text-color-accent) 10%, transparent);
}

.dcp-trigger:focus-visible {
  outline: 2px solid var(--text-color-accent);
  outline-offset: 2px;
}

.dcp-trigger__icon,
.dcp-trigger__chevron {
  flex-shrink: 0;
  font-size: 18px;
  line-height: 1;
}

.dcp-trigger__icon {
  color: color-mix(in srgb, var(--text-color-primary) 75%, transparent);
}

.dcp-trigger__chevron {
  color: color-mix(in srgb, var(--text-color-primary) 50%, transparent);
  transition: transform 0.2s ease;
}

.dcp-trigger[aria-expanded="true"] .dcp-trigger__chevron {
  transform: rotate(180deg);
}

/* Label ("DATE") stacked over the date, gap 1, line-height = size — 1:1 with
   .campus-select__box / __label / __value. */
.dcp-trigger__box {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.dcp-trigger__label {
  font-size: 8px;
  line-height: 8px;
  font-weight: 400;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text-color-primary) 50%, transparent);
}

/* "Tue 15" (bold 14px) + "Sept" (regular 10px), bottoms aligned. */
.dcp-trigger__value {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  overflow: hidden;
  white-space: nowrap;
}

.dcp-trigger__value-main {
  font-size: 14px;
  line-height: 14px;
  font-weight: 700;
  color: var(--text-color-primary);
}

.dcp-trigger__value-month {
  font-size: 10px;
  line-height: 10px;
  font-weight: 400;
  color: color-mix(in srgb, var(--text-color-primary) 65%, transparent);
}

/* ── "Today" badge ────────────────────────────────────────────────────────
   A small accent pill pinned to the trigger's top-right corner, overhanging
   the top edge (mirrors the Figma comp). Shown by JS only when the selected
   date is today. */
.dcp-trigger__today-badge {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(28%, -42%);
  z-index: 1;

  padding: 2px 9px;
  border-radius: var(--radius-pill);

  font-size: 10px;
  line-height: 1.4;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #fff;
  white-space: nowrap;

  background: var(--text-color-accent);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--text-color-accent) 35%, transparent);
}

.dcp-trigger__today-badge[hidden] {
  display: none;
}

/* Reflection on the glass while "today" is selected: a very subtle green inner
   shadow catching light from the top-right (matches the Figma comp — inner
   shadow -1 1 4 0, accent @ 15%). */
.dcp-trigger--today {
  box-shadow:
    0 0 0 0.1px var(--glass-outline),
    var(--glass-highlight),
    inset -1px 1px 4px 0 color-mix(in srgb, var(--text-color-accent) 15%, transparent),
    0 4px 40px 0 var(--glass-shadow-color);
}

@media (prefers-color-scheme: dark) {
  .dcp-trigger__today-badge {
    background: var(--color-accent-dark);
  }
}

/* Hide the pill while it's morphed into the panel. */
date-chip-picker.dcp-anim .dcp-trigger {
  visibility: hidden;
}

.dcp-trigger__icon,
.dcp-trigger__box,
.dcp-trigger__chevron {
  transition: opacity 0.24s ease;
}

date-chip-picker.dcp-content-hidden .dcp-trigger__icon,
date-chip-picker.dcp-content-hidden .dcp-trigger__box,
date-chip-picker.dcp-content-hidden .dcp-trigger__chevron {
  opacity: 0;
  transition: none;
}

/* ── Overlay ──────────────────────────────────────────────────────────────
   No backdrop — a transparent click-catcher only, same as .cp-overlay. */
.dcp-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: transparent;
  pointer-events: none;
}

.dcp-overlay.is-active {
  pointer-events: auto;
}

/* ── The pill morphs into this panel and back ─────────────────────────── */
.dcp-popup {
  position: fixed;
  z-index: 1200;
  margin: 0;
  inset: auto;
  border: 0;
  padding: 0;
  display: none;            /* JS sets 'flex' on open */
  flex-direction: column;

  box-sizing: border-box;
  overflow: clip;
  border-radius: 22px;
  text-align: left;

  background: var(--glass-tint);
  -webkit-backdrop-filter: blur(var(--glass-blur-md));
  backdrop-filter: blur(var(--glass-blur-md));
  color: var(--text-color-primary);

  box-shadow:
    0 0 0 0.1px var(--glass-outline),
    var(--glass-highlight),
    0 12px 40px 0 var(--glass-shadow-color);

  transition:
    top 0.42s cubic-bezier(0.32, 0.72, 0, 1),
    left 0.42s cubic-bezier(0.32, 0.72, 0, 1),
    width 0.42s cubic-bezier(0.32, 0.72, 0, 1),
    height 0.42s cubic-bezier(0.32, 0.72, 0, 1),
    border-radius 0.42s cubic-bezier(0.32, 0.72, 0, 1),
    box-shadow 0.42s ease;

  will-change: top, left, width, height;
}

/* The panel carries `liquid-glass`, so the generic rule in liquid-glass.css
   would replace the morph transition above wholesale. Merge the morph geometry
   and the deform's translate/scale into one declaration — same fix as
   `.popover.liquid-glass` / `.dfc-popup.liquid-glass`. */
.dcp-popup.liquid-glass {
  transition:
    top 0.42s cubic-bezier(0.32, 0.72, 0, 1),
    left 0.42s cubic-bezier(0.32, 0.72, 0, 1),
    width 0.42s cubic-bezier(0.32, 0.72, 0, 1),
    height 0.42s cubic-bezier(0.32, 0.72, 0, 1),
    border-radius 0.42s cubic-bezier(0.32, 0.72, 0, 1),
    box-shadow 0.42s ease,
    translate var(--press-out-dur) var(--ease-spring),
    scale var(--press-out-dur) var(--ease-spring),
    filter 0.2s ease;
}

.dcp-popup.liquid-glass.lg-pressing {
  transition:
    border-radius 0.42s cubic-bezier(0.32, 0.72, 0, 1),
    translate var(--press-in-dur) var(--press-in-ease),
    scale var(--press-in-dur) var(--press-in-ease),
    filter 0.2s ease;
}

.dcp-popup.liquid-glass.lg-dragging {
  transition:
    border-radius 0.42s cubic-bezier(0.32, 0.72, 0, 1),
    translate 0s, scale 0s, filter 0.2s ease;
}

/* A full panel shouldn't drift on hover-lift — only the press/drag deform. */
.dcp-popup.liquid-glass:hover {
  scale: 1;
}

.dcp-popup__inner {
  flex: 1;
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 16px 16px 20px;

  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.18s ease,
    transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}

.dcp-popup--open .dcp-popup__inner {
  opacity: 1;
  transform: none;
  transition-delay: 0.16s;
}

/* Shell cross-fades out over the reformed pill at the end of the close. */
.dcp-popup--closing {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* ── Panel title — same icon + word as the pill, section-label style. */
.dcp-popup__title {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
  color: color-mix(in srgb, var(--text-color-primary) 55%, transparent);
}

.dcp-popup__title-icon {
  font-size: 16px;
  line-height: 1;
}

/* ── The sliding picker, relocated into the panel ──────────────────────── */
.dcp-popup__inner .date-picker {
  align-self: stretch;
}

/* Extra headroom for the "Today" bubble, which is absolutely positioned
   just above .date-picker-container (see positionTodayIndicator()). */
.dcp-popup__inner .date-picker-container {
  margin-top: 3rem;
  max-width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .dcp-popup,
  .dcp-popup.liquid-glass,
  .dcp-popup__inner,
  .dcp-overlay,
  .dcp-trigger__chevron {
    transition: none;
  }
  .dcp-popup__inner {
    transform: none;
  }
}

/* The pill is hidden while docked — `.dcp-trigger`'s own `display` beats the
   UA `[hidden]` rule, so re-assert it. */
.dcp-trigger[hidden] {
  display: none;
}

/* ── Docked (inline-expanded) mode ────────────────────────────────────────
   Desktop 2-column layout: the panel sits directly in the form column
   instead of morphing out of a pill into a fixed popup. Same glass chrome,
   no fixed positioning, no morph transition. Toggled by components/picker-dock.js. */
.dcp-popup--docked {
  position: static;
  inset: auto;
  /* Hug the date strip rather than stretch to the column. */
  width: max-content !important;
  max-width: 100%;
  height: auto !important;
  max-height: none;
  z-index: auto;
  border-radius: 22px !important;
  transition: none;
  will-change: auto;
  /* Static in-flow card — lighter shadow than the floating panel. */
  box-shadow:
    0 0 0 0.1px var(--glass-outline),
    var(--glass-highlight),
    0 4px 24px 0 var(--glass-shadow-color);
}

/* Inner content is always visible when docked — there's no open/close cycle. */
.dcp-popup--docked .dcp-popup__inner {
  opacity: 1;
  transform: none;
  transition: none;
}

/* Keep the liquid-glass press/drag deform on the docked card — just drop the
   geometry transitions from the merged rule above (nothing moves any more). */
.dcp-popup--docked.liquid-glass {
  transition:
    translate var(--press-out-dur) var(--ease-spring),
    scale var(--press-out-dur) var(--ease-spring),
    filter 0.2s ease;
}

/* Docked panel hover: a gentle lift, but NOT the liquid-glass brightness boost
   — on a big light-mode panel it blows out the inner picker. */
.dcp-popup--docked.liquid-glass:hover {
  scale: 1.03;
  filter: none;
}