/* ===========================================================================
   Flockly app surface — an exact transcription, not an impression.

   Every value below was read out of the app's own source, not eyeballed:

     tokens ............ tokens.css / src/styles.css  (:root)
     stat cards ........ BigStat            — src/routes/_app.analytics.tsx
     trend card ........ TrendCard          — src/routes/_app.analytics.tsx
     series chips ...... SeriesChip         — src/routes/_app.analytics.tsx
     delta pills ....... DeltaBadge         — src/routes/_app.analytics.tsx
     channel bars ...... PlatformBars       — src/routes/_app.analytics.tsx
     brand glyphs ...... PlatformLogo       — src/components/platform-logos.tsx
     channel pastels ... PLATFORMS          — src/lib/platforms.ts

   Tailwind classes are resolved to their literal values here: p-5 → 20px,
   rounded-2xl → calc(0.75rem + 8px) = 20px, text-[10px] → 10px, size-8 → 32px,
   and so on. Anything the marketing site's own stylesheet would otherwise
   impose — Geist, the glass blur, the pill radii, the green accent — is reset
   inside `.flk` so what a visitor sees here is what they get after installing.

   If the app's tokens change, change them here too. The whole point of this
   file is that the two are the same numbers.
   =========================================================================== */

.flk {
  /* ---- src/styles.css :root ------------------------------------------ */
  --background: oklch(0.99 0.005 250);
  --foreground: oklch(0.22 0.03 260);
  --card: oklch(1 0 0);
  --primary: oklch(0.68 0.14 265);
  --primary-foreground: oklch(0.99 0.005 250);
  --muted: oklch(0.965 0.01 260);
  --muted-foreground: oklch(0.55 0.02 260);
  --border: oklch(0.92 0.01 260);
  --ring: oklch(0.68 0.14 265);
  --radius: 0.75rem;

  /* rounded-md / -lg / -xl / -2xl, resolved from --radius */
  --r-md: calc(var(--radius) - 2px);
  --r-lg: var(--radius);
  --r-xl: calc(var(--radius) + 4px);
  --r-2xl: calc(var(--radius) + 8px);

  /* ---- platform pastels + their readable foregrounds ----------------- */
  --plt-ig: #ffb2d2;
  --plt-ig-fg: oklch(0.42 0.16 355);
  --plt-fb: #a8d4ff;
  --plt-fb-fg: oklch(0.45 0.15 250);
  --plt-tt: #d4c2ff;
  --plt-tt-fg: oklch(0.4 0.14 295);
  --plt-x: #ffd88a;
  --plt-x-fg: oklch(0.42 0.1 75);
  --plt-li: #b0ec9d;
  --plt-li-fg: oklch(0.38 0.11 150);
  --plt-pin: #ffb2a8;
  --plt-pin-fg: oklch(0.45 0.16 25);

  /* ALL_CHART_COLOR and the previous-period grey, src/lib/platforms.ts */
  --chart-all: #b9c5f5;
  --chart-prev: #c3cad8;

  /* emerald-500/12 + emerald-700, the DeltaBadge "up" pair */
  --up-bg: rgb(16 185 129 / 0.12);
  --up-fg: rgb(4 120 87);

  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  font-feature-settings: normal;
  color: var(--foreground);
  letter-spacing: normal;
}

/* The app's own page wash — src/styles.css @utility app-bg */
.flk__shell {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  border-radius: var(--r-2xl);
  border: 1px solid var(--border);
  overflow: hidden;
  background:
    radial-gradient(1200px 600px at 10% -10%, oklch(0.96 0.025 300 / 0.4), transparent 62%),
    radial-gradient(900px 500px at 90% 10%, oklch(0.96 0.025 190 / 0.35), transparent 62%),
    radial-gradient(800px 500px at 50% 100%, oklch(0.97 0.02 60 / 0.3), transparent 62%),
    var(--background);
  box-shadow: 0 24px 60px -30px oklch(0.22 0.03 260 / 0.35);
}

/* A single panel lifted out of the app and shown on its own, with no
   sidebar beside it — used in the two-column rows. */
.flk__shell--bare {
  grid-template-columns: minmax(0, 1fr);
}

/* ---------------------------------------------------------------- sidebar */

.flk__side {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 12px;
  border-right: 1px solid var(--border);
  background: oklch(0.975 0.008 260); /* --sidebar */
  color: oklch(0.3 0.03 260); /* --sidebar-foreground */
}

.flk__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 12px;
  font-size: 14px;
  font-weight: 600;
}

.flk__brand img {
  width: 22px;
  height: 22px;
  border-radius: 6px;
}

.flk__navitem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: var(--r-lg);
  font-size: 13px;
  color: oklch(0.45 0.03 260);
}

.flk__navitem svg {
  width: 15px;
  height: 15px;
  flex: none;
  opacity: 0.75;
}

.flk__navitem[data-on] {
  background: oklch(0.94 0.02 260); /* --sidebar-accent */
  color: oklch(0.25 0.03 260);
  font-weight: 600;
}

.flk__navitem[data-on] svg {
  opacity: 1;
  color: var(--primary);
}

.flk__demo {
  margin-top: auto;
  padding: 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

/* ------------------------------------------------------------------ main */

.flk__main {
  display: grid;
  gap: 16px; /* gap-4 */
  padding: 20px;
}

/* --------------------------------------------------------- BigStat cards */

.flk__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.stat {
  border-radius: var(--r-2xl); /* rounded-2xl */
  border: 1px solid var(--border);
  background: var(--card);
  padding: 20px; /* p-5 */
}

.stat__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.stat__label {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em; /* tracking-widest */
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.stat__glyphs {
  display: flex;
  flex: none;
  align-items: center;
  gap: 6px;
  color: var(--muted-foreground);
}

.stat__glyphs svg {
  width: 16px;
  height: 16px;
}

.stat__glyphs .info {
  width: 14px;
  height: 14px;
  opacity: 0.7;
}

.stat__value {
  margin-top: 8px;
  font-size: 24px; /* text-2xl */
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.stat__delta {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.stat__delta span:last-child {
  font-size: 10px;
  color: var(--muted-foreground);
}

/* DeltaBadge — a rise reads emerald, tabular so a column of them lines up */
.delta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border-radius: 999px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: var(--up-bg);
  color: var(--up-fg);
}

.delta svg {
  width: 10px;
  height: 10px;
}

/* the highlighted revenue card */
.stat--fill {
  border-color: transparent;
  background: var(--primary);
  color: var(--primary-foreground);
}

.stat--fill .stat__label,
.stat--fill .stat__glyphs {
  color: oklch(0.99 0.005 250 / 0.75);
}

.stat--fill .stat__delta span:last-child {
  color: oklch(0.99 0.005 250 / 0.7);
}

.stat--fill .delta {
  background: rgb(255 255 255 / 0.2);
  color: #fff;
}

/* -------------------------------------------------------------- panels */

.flk__panels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.card {
  border-radius: var(--r-2xl);
  border: 1px solid var(--border);
  background: var(--card);
  padding: 20px;
}

.card--wide {
  grid-column: span 2;
}

.card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.card__head h3 {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: normal;
  line-height: 1.4;
}

.card__sub {
  font-size: 12px;
  color: var(--muted-foreground);
}

/* the metric switch: a squared segmented control, not a pill */
.switch {
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: var(--r-lg);
  background: var(--muted);
  box-shadow: inset 0 0 0 1px var(--border);
}

.switch button {
  border: 0;
  border-radius: var(--r-md);
  padding: 4px 10px;
  background: transparent;
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted-foreground);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}

.switch button[aria-pressed="true"] {
  background: var(--card);
  color: var(--foreground);
  box-shadow: 0 1px 2px oklch(0.22 0.03 260 / 0.08);
}

/* headline number, then the chart as supporting detail */
.hero-figure {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin-bottom: 16px;
}

.hero-figure b {
  font-size: 30px; /* text-3xl */
  font-weight: 600;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}

.hero-figure .noun {
  font-size: 14px;
  color: var(--muted-foreground);
}

.hero-figure .vs {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--muted-foreground);
}

/* SeriesChip — inactive is an outline at 70%, active takes the channel pastel */
.series {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

.series button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 10px;
  background: transparent;
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted-foreground);
  opacity: 0.7;
  cursor: pointer;
  transition: opacity 150ms ease;
}

.series button:hover {
  opacity: 1;
}

.series button[aria-pressed="true"] {
  opacity: 1;
  border-color: transparent;
}

.series button[data-ch="all"][aria-pressed="true"] {
  border-color: oklch(0.68 0.14 265 / 0.3);
  background: oklch(0.68 0.14 265 / 0.1);
  color: var(--primary);
}

.series button[data-ch="ig"][aria-pressed="true"] { background: var(--plt-ig); color: var(--plt-ig-fg); }
.series button[data-ch="fb"][aria-pressed="true"] { background: var(--plt-fb); color: var(--plt-fb-fg); }
.series button[data-ch="tt"][aria-pressed="true"] { background: var(--plt-tt); color: var(--plt-tt-fg); }
.series button[data-ch="x"][aria-pressed="true"]  { background: var(--plt-x);  color: var(--plt-x-fg); }
.series button[data-ch="li"][aria-pressed="true"] { background: var(--plt-li); color: var(--plt-li-fg); }
.series button[data-ch="pin"][aria-pressed="true"]{ background: var(--plt-pin);color: var(--plt-pin-fg); }

.series button[data-ch="prev"][aria-pressed="true"] {
  border-color: var(--border);
  background: var(--muted);
  color: oklch(0.22 0.03 260 / 0.7);
}

.series .swatch {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}

.series .swatch--dash {
  width: 12px;
  height: 0;
  border-radius: 0;
  border-top: 2px dashed var(--chart-prev);
}

/* --------------------------------------------------------------- chart */

.plot {
  position: relative;
  height: 224px; /* h-56 */
  touch-action: pan-y;
}

.plot svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.plot .grid line {
  stroke: var(--border);
  stroke-dasharray: 3 3;
}

.plot .axis text {
  fill: var(--muted-foreground);
  font-size: 11px;
}

.plot .prev {
  fill: none;
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
}

.plot .rule {
  stroke: var(--border);
}

/* Recharts' tooltip, transcribed from TrendCard's contentStyle */
.plot__tip {
  position: absolute;
  z-index: 2;
  min-width: 132px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card);
  font-size: 12px;
  box-shadow: 0 6px 20px -8px oklch(0.22 0.03 260 / 0.3);
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease;
}

.plot.is-hover .plot__tip {
  opacity: 1;
}

.plot__tip .when {
  margin-bottom: 4px;
  font-weight: 500;
}

.plot__tip .row {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted-foreground);
}

.plot__tip .row b {
  margin-left: auto;
  color: var(--foreground);
  font-variant-numeric: tabular-nums;
}

.plot__tip .row i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}

.plot__caption {
  margin-top: 8px;
  text-align: center;
  font-size: 10px;
  color: var(--muted-foreground);
}

/* ------------------------------------------------------- PlatformBars */

.bars2 {
  display: grid;
  gap: 4px;
  margin-top: 16px;
}

.bar {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 12px;
  border: 0;
  border-radius: var(--r-xl);
  padding: 10px 8px;
  background: transparent;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
  transition: background 150ms ease;
}

.bar:hover {
  background: oklch(0.965 0.01 260 / 0.5); /* hover:bg-muted/50 */
}

.bar[aria-pressed="true"] {
  background: oklch(0.68 0.14 265 / 0.08);
}

.bar__logo {
  display: grid;
  place-items: center;
  width: 32px; /* size-8 */
  height: 32px;
  flex: none;
  border-radius: var(--r-lg);
}

.bar__logo svg {
  width: 16px;
  height: 16px;
}

.bar__logo[data-ch="ig"]  { background: var(--plt-ig);  color: var(--plt-ig-fg); }
.bar__logo[data-ch="fb"]  { background: var(--plt-fb);  color: var(--plt-fb-fg); }
.bar__logo[data-ch="tt"]  { background: var(--plt-tt);  color: var(--plt-tt-fg); }
.bar__logo[data-ch="x"]   { background: var(--plt-x);   color: var(--plt-x-fg); }
.bar__logo[data-ch="li"]  { background: var(--plt-li);  color: var(--plt-li-fg); }
.bar__logo[data-ch="pin"] { background: var(--plt-pin); color: var(--plt-pin-fg); }

.bar__body {
  min-width: 0;
  flex: 1;
}

.bar__line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.bar__name {
  font-size: 12px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bar__value {
  flex: none;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.bar__value span {
  margin-left: 6px;
  font-weight: 400;
  color: var(--muted-foreground);
}

.bar__track {
  display: block;
  height: 8px; /* h-2 */
  border-radius: 999px;
  background: var(--muted);
  overflow: hidden;
}

.bar__track span {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width 240ms ease;
}

.bar__chev {
  width: 14px;
  height: 14px;
  flex: none;
  color: transparent;
  transition: color 150ms ease;
}

.bar:hover .bar__chev {
  color: var(--muted-foreground);
}

.flk :focus-visible {
  outline: 2px solid oklch(0.68 0.14 265 / 0.5);
  outline-offset: 2px;
}

/* --------------------------------------------------------- responsive */

@media (max-width: 1080px) {
  .flk__panels {
    grid-template-columns: minmax(0, 1fr);
  }
  .card--wide {
    grid-column: auto;
  }
}

@media (max-width: 860px) {
  .flk__shell {
    grid-template-columns: minmax(0, 1fr);
  }
  .flk__side {
    display: none;
  }
  .flk__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .flk__main {
    padding: 14px;
    gap: 12px;
  }
  .stat {
    padding: 14px;
  }
  .card {
    padding: 16px;
  }
}

/* ===========================================================================
   More of the app, same tokens.

   Calendar, Shop Grid and the Community inbox, built from the same variables
   as the Analytics surface above so the whole tour reads as one product. Each
   panel is a static composition — the point is the shape of the screen, not a
   second copy of the app's logic.
   =========================================================================== */

.flk__screen[hidden] {
  display: none;
}

.flk__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.flk__head h3 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.flk__head p {
  font-size: 12px;
  color: var(--muted-foreground);
}

/* ------------------------------------------------------------ calendar */

.cal {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
}

.cal__day {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 232px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--card);
}

/* Column children must not shrink. Without this a day holding two posts
   compresses both, the text overruns its chip, and the cards read as though
   they're stacked on top of each other. */
.cal__day > * {
  flex: none;
}

.cal__day[data-today] {
  border-color: oklch(0.68 0.14 265 / 0.4);
  box-shadow: inset 0 0 0 1px oklch(0.68 0.14 265 / 0.15);
}

.cal__dname {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.cal__dname b {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--foreground);
}

.post {
  display: grid;
  gap: 6px;
  padding: 8px;
  border-radius: var(--r-lg);
  background: var(--muted);
}

/* the product shot the post is built around, straight from the catalogue */
.post__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: calc(var(--r-lg) - 4px);
  background: oklch(0.94 0.01 260);
}

.post__top {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: var(--muted-foreground);
}

.post__logo {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: 6px;
}

.post__logo svg {
  width: 10px;
  height: 10px;
}

.post__logo[data-ch="ig"]  { background: var(--plt-ig);  color: var(--plt-ig-fg); }
.post__logo[data-ch="fb"]  { background: var(--plt-fb);  color: var(--plt-fb-fg); }
.post__logo[data-ch="tt"]  { background: var(--plt-tt);  color: var(--plt-tt-fg); }
.post__logo[data-ch="x"]   { background: var(--plt-x);   color: var(--plt-x-fg); }
.post__logo[data-ch="li"]  { background: var(--plt-li);  color: var(--plt-li-fg); }
.post__logo[data-ch="pin"] { background: var(--plt-pin); color: var(--plt-pin-fg); }

.post__title {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
  /* two lines, then ellipsis — a long title must never push the chip open */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* the empty slot Smart Schedule would fill */
.post--ghost {
  display: grid;
  place-items: center;
  padding: 10px 8px;
  border: 1px dashed var(--border);
  border-radius: var(--r-lg);
  background: transparent;
  font-size: 10px;
  line-height: 1.4;
  text-align: center;
  color: var(--muted-foreground);
}

/* ----------------------------------------------------------- shop grid */

.sgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
}

.sgrid__tile {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  align-items: flex-end;
  padding: 8px;
  border-radius: var(--r-lg);
  font-size: 10px;
  font-weight: 500;
  color: oklch(0.25 0.03 260);
  overflow: hidden;
  background: oklch(0.94 0.01 260);
}

.sgrid__tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sgrid__tile span {
  position: relative;
  padding: 3px 7px;
  border-radius: 999px;
  background: oklch(1 0 0 / 0.85);
  font-variant-numeric: tabular-nums;
}

/* the three totals under the tiles, as one row */
.sgrid__totals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.sgrid__stat {
  display: grid;
  gap: 2px;
}

.sgrid__stat p {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.sgrid__stat b {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------- inbox */

.inbox {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.msg {
  display: flex;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--card);
}

.msg__logo {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: var(--r-lg);
}

.msg__logo svg {
  width: 16px;
  height: 16px;
}

.msg__logo[data-ch="ig"]  { background: var(--plt-ig);  color: var(--plt-ig-fg); }
.msg__logo[data-ch="fb"]  { background: var(--plt-fb);  color: var(--plt-fb-fg); }
.msg__logo[data-ch="li"]  { background: var(--plt-li);  color: var(--plt-li-fg); }

.msg__body {
  min-width: 0;
  flex: 1;
}

.msg__who {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
}

.msg__when {
  font-size: 10px;
  font-weight: 400;
  color: var(--muted-foreground);
}

.msg__text {
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--foreground);
}

.msg__on {
  margin-top: 6px;
  font-size: 10px;
  color: var(--muted-foreground);
}

.msg__tag {
  flex: none;
  align-self: flex-start;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  background: oklch(0.68 0.14 265 / 0.1);
  color: var(--primary);
}

.msg__tag--warn {
  background: rgb(245 158 11 / 0.14);
  color: rgb(180 83 9);
}

@media (max-width: 980px) {
  .cal {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .cal__day:nth-child(n + 7) {
    display: none;
  }
  }

@media (max-width: 620px) {
  .cal {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sgrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ===========================================================================
   Drag demo — three days, one post moving between them.

   The columns and the tile are the calendar's own `.cal__day` and `.post`;
   nothing here restyles them. This file only adds the things a static
   calendar has no need for: absolute placement for the tile in flight, the
   drawn cursor, the empty slot it left behind, and the confirmation toast.
   If the app's chip changes, this demo changes with it — which is the point.

   Everything animated is transform or opacity, so it stays on the compositor.
   A visitor who asked for less motion gets the finished state, held still.
   =========================================================================== */

.dragdemo {
  /* Capped so the three columns land near the width a day column really has in
     the seven-day view. Stretched across a full page the chip is the right
     component at the wrong proportion, which is its own kind of misleading. */
  max-width: 560px;
  margin-inline: auto;
  border-radius: var(--r-2xl);
  border: 1px solid var(--border);
  background: var(--card);
  padding: 16px;
}

.dragdemo__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.dragdemo__head h4 {
  font-size: 13px;
  font-weight: 600;
}

.dragdemo__step {
  font-size: 11px;
  color: var(--muted-foreground);
}

.dragdemo__days {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

/* the day being carried over lights up, as the app's drop target does */
.dragdemo__days .cal__day {
  /* tall enough for a real .post chip (196px) plus the label above it */
  min-height: 252px;
  transition: border-color 200ms ease, background 200ms ease;
}

.dragdemo__days .cal__day[data-drop] {
  border-color: oklch(0.68 0.14 265 / 0.55);
  background: oklch(0.68 0.14 265 / 0.06);
}

/* the chip in flight: the calendar's own tile, lifted off the page */
.dd-live {
  position: absolute;
  z-index: 3;
  width: calc((100% - 16px) / 3 - 20px);
  box-shadow: 0 14px 30px -12px oklch(0.22 0.03 260 / 0.4);
  transform: translate3d(var(--dx, 0), var(--dy, 0), 0) scale(var(--s, 1)) rotate(var(--r, 0deg));
  transition:
    transform 420ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 220ms ease;
  pointer-events: none;
}

/* where it came from, while it's away */
.dd-ghost {
  height: 196px;
  border: 1px dashed var(--border);
  border-radius: var(--r-lg);
  opacity: 0;
  transition: opacity 200ms ease;
}

.dd-ghost[data-on] {
  opacity: 1;
}

/* the pointer, drawn rather than screen-recorded */
.dd-cursor {
  position: absolute;
  z-index: 4;
  width: 20px;
  height: 20px;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(var(--cx, 0), var(--cy, 0), 0);
  transition:
    transform 420ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 160ms ease;
}

.dd-cursor[data-on] {
  opacity: 1;
}

.dd-cursor svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 1px 2px oklch(0.22 0.03 260 / 0.4));
}

/* the confirmation the app raises after a reschedule */
.dd-toast {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: var(--r-lg);
  background: oklch(0.68 0.14 265 / 0.1);
  font-size: 11px;
  font-weight: 500;
  color: var(--primary);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 260ms ease, transform 260ms ease;
}

.dd-toast[data-on] {
  opacity: 1;
  transform: translateY(0);
}

.dd-toast svg {
  width: 14px;
  height: 14px;
  flex: none;
}

@media (prefers-reduced-motion: reduce) {
  .dd-live,
  .dd-cursor,
  .dd-toast,
  .dd-ghost,
  .dragdemo__days .cal__day {
    transition: none;
  }
}