/* The new look, owner preview (docs/superpowers/specs/2026-09-25-new-look-design.md).
   Loaded by a <link> in two places: the owner's new look, in
   src/app/dashboard/layout.tsx, and for everyone on the front door pages
   (log in, sign up, password reset), in src/app/(auth)/layout.tsx. Every rule
   sits under [data-look="new"], so no other screen is touched. The rules are
   not in a cascade layer, so they beat Tailwind's utilities without
   !important. On cleanup day the real classes are replaced in the components;
   the front door must get real classes too (or keep this file) before this
   file is deleted.
   src/lib/look-styles.test.ts fails if a new hard shadow appears in the app
   without a rule here, or if a rule here escapes the new look. */

[data-look="new"] {
  --look-hairline: var(--color-hairline);
  --look-lift: var(--shadow-lift);
  --look-lift-hover: 0 2px 4px rgb(16 15 28 / 0.05), 0 20px 40px -16px rgb(121 22 245 / 0.32);
  --look-lift-small: var(--shadow-lift-sm);
}

/* Soft lift instead of the hard ink shadow: panels and cards. */
[data-look="new"] :is(
    [class*="shadow-[4px_4px_0_0_#100f1c]"],
    [class*="shadow-[5px_5px_0_0_#100f1c]"],
    [class*="shadow-[6px_6px_0_0_#100f1c]"],
    [class*="shadow-[8px_8px_0_0_#100f1c]"]
  ) {
  box-shadow: var(--look-lift);
}

/* Soft lift, small: buttons, chips, small tiles. */
[data-look="new"] :is(
    [class*="shadow-[1px_1px_0_0_#100f1c]"],
    [class*="shadow-[2px_2px_0_0_#100f1c]"],
    [class*="shadow-[3px_3px_0_0_#100f1c]"],
    [class*="shadow-[3px_3px_0_#100f1c]"]
  ) {
  box-shadow: var(--look-lift-small);
}

/* Disabled buttons stay flat, as today. */
[data-look="new"] [class*="disabled:shadow-none"]:disabled {
  box-shadow: none;
}

/* Cards that are links rise a little on hover (the rise only when motion is welcome). */
[data-look="new"] a:is([class*="shadow-[4px_4px_0_0_#100f1c]"], [class*="shadow-[6px_6px_0_0_#100f1c]"]) {
  transition: translate 0.2s ease, box-shadow 0.2s ease;
}
[data-look="new"] a:is([class*="shadow-[4px_4px_0_0_#100f1c]"], [class*="shadow-[6px_6px_0_0_#100f1c]"]):hover {
  box-shadow: var(--look-lift-hover);
}
@media (prefers-reduced-motion: no-preference) {
  [data-look="new"] a:is([class*="shadow-[4px_4px_0_0_#100f1c]"], [class*="shadow-[6px_6px_0_0_#100f1c]"]):hover {
    translate: 0 -2px;
  }
}

/* A pressed button dips down instead of jumping sideways into its old shadow.
   Tailwind v4 moves it with the translate property, so replace that one. */
[data-look="new"] :is(
    [class*="active:translate-x-[2px]"],
    [class*="active:translate-x-0.5"],
    [class*="active:translate-x-px"]
  ):active {
  translate: 0 1px;
}

/* Hairline instead of the thick ink outline. */
[data-look="new"] .border-ink {
  border-color: var(--look-hairline);
}
[data-look="new"] .border-2.border-ink {
  border-width: 1px;
}

/* Keep the focus colour on fields that use the ink outline as their frame.
   Outranks the hairline rule above: one more type and one more pseudo class. */
[data-look="new"] :is(input, textarea, select).border-ink:focus {
  border-color: var(--color-brand-600);
}

/* Roomy: every page narrower than about 1 040 px widens to it. Pages that are
   already wider keep their width. */
[data-look="new"] main.mx-auto.w-full:is(.max-w-2xl, .max-w-3xl, .max-w-4xl, .max-w-5xl) {
  max-width: 65rem;
}

/* Centred page titles and the intro sentence under them. Lists, forms and
   cards stay left. A title row that also holds a button is left alone. */
[data-look="new"] main.mx-auto.w-full > h1 {
  text-align: center;
}
[data-look="new"] main.mx-auto.w-full > h1 + p {
  text-align: center;
  max-width: 36rem;
  margin-inline: auto;
}
/* The :has() selectors get their own rules: a browser without :has drops
   only these, not the plain title centring above. */
[data-look="new"] main.mx-auto.w-full > div:has(> h1) + p {
  text-align: center;
  max-width: 36rem;
  margin-inline: auto;
}
[data-look="new"] main.mx-auto.w-full > div.flex:has(> h1):not(.justify-between),
[data-look="new"] main.mx-auto.w-full > div.justify-between:has(> h1:only-child) {
  justify-content: center;
}

/* The "Saved" confirmations become a small green pill. */
[data-look="new"] [data-saved] {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.625rem;
  border-radius: 999px;
  background: rgb(22 163 74 / 0.1);
  color: rgb(21 128 61);
}
[data-look="new"] p[data-saved] {
  display: flex;
  width: fit-content;
}

/* A short rise into place, for the Saved pill and the Dashboard cards. */
@keyframes look-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* The pill rises in when it appears. */
  [data-look="new"] [data-saved] {
    animation: look-rise 0.35s ease-out both;
  }

  /* Dashboard cards glide in, one after another. */
  [data-look="new"] .look-glide > * {
    animation: look-rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  [data-look="new"] .look-glide > :nth-child(2) {
    animation-delay: 0.08s;
  }
  [data-look="new"] .look-glide > :nth-child(3) {
    animation-delay: 0.16s;
  }
}

/* Settings: the two Posting preferences fields side by side from 640px up. */
@media (min-width: 640px) {
  [data-look="new"] section:has(#defaultCta) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1rem;
  }
  [data-look="new"] section:has(#defaultCta) > h2 {
    grid-column: 1 / -1;
  }
  [data-look="new"] section:has(#defaultCta) > div {
    max-width: none;
  }
}

/* The front door pages (src/app/(auth)/layout.tsx): the landing page's soft glow. */
[data-look="new"].front-door > main {
  background: radial-gradient(90% 50% at 85% 0%, rgb(139 61 255 / 0.12), transparent 60%);
}