/* The page design layer — Wallpaper, Buttons, Text (docs/EDITOR-V3.md).

   Linked only by pages from the v3 renderer, and every rule is additionally
   scoped to body[data-design="3"], so a page rendered before the design model
   is untouched by this file. Values come from custom properties the renderer
   emits (src/services/pageDesign/variables.js, render/v2Css.js) and from the
   data-buttons / data-wallpaper / data-pattern attributes; this file only
   decides what they mean. */

/* Text size ------------------------------------------------------------- */

html:has(body[data-design="3"]) {
  font-size: var(--v2-text-size, 16px);
}

body[data-design="3"].page-v2 {
  font-size: var(--v2-text-size, 16px);
  background: var(--v2-bg);
}

/* The column keeps its own solid background (colors.background, as v2 always
   painted it); the wallpaper fills the space around it. Owner decision
   2026-10-08 — see render/wallpaper.js. */

/* Wallpaper -------------------------------------------------------------- */

body[data-design="3"] .v2-wallpaper::after {
  background:
    linear-gradient(
      color-mix(in srgb, var(--v2-bg) calc(var(--bd-dim, 0) * 100%), transparent),
      color-mix(in srgb, var(--v2-bg) calc(var(--bd-dim, 0) * 100%), transparent)
    ),
    var(--bd-tint, transparent);
}

body[data-design="3"] .v2-wallpaper.is-fill {
  background: var(--v2-bg);
}

body[data-design="3"] .v2-wallpaper.is-fill::after {
  content: none;
}

/* "Blur" from a cover with no picture: the cover's flat fill arrives inline;
   with no cover at all, the palette's glow (what v2's backdrop showed). */
body[data-design="3"] .v2-wallpaper.is-blur-fill {
  background:
    radial-gradient(circle at 18% 12%, var(--v2-primary-soft), transparent 34rem),
    radial-gradient(circle at 86% 78%, var(--v2-accent-soft), transparent 36rem),
    var(--v2-bg);
}

/* Where the column is the whole screen there is nothing around it to paint:
   skip the wallpaper's picture or clip so a phone never spends data on it. */
@media (max-width: 600px) {
  body[data-design="3"] .v2-wallpaper :is(img, video) { display: none; }
}

/* A sharp picture fills the viewport exactly; only "Blur" over-sizes to hide
   the soft edge its filter leaves. */
body[data-design="3"] .v2-wallpaper:is(.is-image, .is-video) :is(img, video) {
  inset: 0;
  width: 100%;
  height: 100%;
  filter: saturate(var(--bd-saturate, 100%));
  transform: none;
}

body[data-design="3"] .v2-wallpaper.is-pattern {
  --wp-ink-soft: color-mix(in srgb, var(--wp-ink) 50%, transparent);
  background-color: var(--v2-bg);
}

body[data-design="3"] .v2-wallpaper.is-pattern[data-pattern="dots"] {
  background-image: radial-gradient(var(--wp-ink-soft) 2px, transparent 2.5px);
  background-size: 22px 22px;
}

body[data-design="3"] .v2-wallpaper.is-pattern[data-pattern="grid"] {
  background-image:
    linear-gradient(var(--wp-ink-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--wp-ink-soft) 1px, transparent 1px);
  background-size: 28px 28px;
}

body[data-design="3"] .v2-wallpaper.is-pattern[data-pattern="diagonal"] {
  background-image: repeating-linear-gradient(45deg, var(--wp-ink-soft) 0 2px, transparent 2px 16px);
}

body[data-design="3"] .v2-wallpaper.is-pattern[data-pattern="checker"] {
  background-image: conic-gradient(var(--wp-ink-soft) 25%, transparent 0 50%, var(--wp-ink-soft) 0 75%, transparent 0);
  background-size: 40px 40px;
}

body[data-design="3"] .v2-wallpaper.is-pattern[data-pattern="zigzag"] {
  background-image:
    linear-gradient(135deg, var(--wp-ink-soft) 25%, transparent 25%),
    linear-gradient(225deg, var(--wp-ink-soft) 25%, transparent 25%),
    linear-gradient(315deg, var(--wp-ink-soft) 25%, transparent 25%),
    linear-gradient(45deg, var(--wp-ink-soft) 25%, transparent 25%);
  background-position: -10px 0, -10px 0, 0 0, 0 0;
  background-size: 20px 20px;
}

body[data-design="3"] .v2-wallpaper.is-pattern[data-pattern="waves"] {
  background-image: radial-gradient(circle at 50% 0, transparent 9px, var(--wp-ink-soft) 10px 11px, transparent 12px);
  background-size: 24px 12px;
}

/* Text ------------------------------------------------------------------- */

body[data-design="3"] .v2-hero h1 {
  color: var(--v2-title, var(--v2-text));
  /* One multiplier over whatever size the identity layout and theme chose. */
  zoom: var(--v2-title-scale, 1);
}

/* Buttons ---------------------------------------------------------------- */
/* Every tappable button and link row follows the page's Buttons: the header
   actions, buy / call-to-action buttons, the waitlist button, contract copy,
   and link / social rows whose own fill is "auto" (Page buttons). A block's
   own fill, or its style overrides (--w-radius etc., !important in base.css),
   still win. Cards are the theme's and are not buttons. */

body[data-design="3"] :is(
  .v2-hero-action,
  .btn.btn-primary,
  .wl-btn,
  .contract-card-copy,
  .w[data-fill="auto"] .link-btn:not(.link-btn--branded),
  .w-socials--pill-row[data-fill="auto"] .social,
  .w-socials--list[data-fill="auto"] .social
) {
  border-radius: var(--v2-btn-radius);
  box-shadow: var(--v2-btn-shadow);
}

/* Solid: the button colour, filled. A secondary header action is its outline
   so two actions never compete as equals. */
body[data-design="3"][data-buttons="solid"] :is(
  .v2-hero-action.is-primary,
  .btn.btn-primary,
  .wl-btn,
  .contract-card-copy,
  .w[data-fill="auto"] .link-btn:not(.link-btn--branded),
  .w-socials--pill-row[data-fill="auto"] .social,
  .w-socials--list[data-fill="auto"] .social
) {
  border: 1px solid transparent;
  background: var(--v2-btn-bg);
  color: var(--v2-btn-text);
}

body[data-design="3"][data-buttons="solid"] .w[data-fill="auto"] .link-btn:not(.link-btn--branded) :is(.link-note, .link-arrow) {
  color: var(--v2-btn-text);
}

body[data-design="3"][data-buttons="solid"] .v2-hero-action.is-secondary,
body[data-design="3"][data-buttons="outline"] :is(
  .v2-hero-action,
  .btn.btn-primary,
  .wl-btn,
  .contract-card-copy,
  .w[data-fill="auto"] .link-btn:not(.link-btn--branded),
  .w-socials--pill-row[data-fill="auto"] .social,
  .w-socials--list[data-fill="auto"] .social
) {
  border: 2px solid var(--v2-btn-ink);
  background: transparent;
  color: var(--v2-btn-ink);
}

/* Glass: a frosted pane of the page's own surface over the wallpaper. */
body[data-design="3"][data-buttons="glass"] :is(
  .v2-hero-action,
  .btn.btn-primary,
  .wl-btn,
  .contract-card-copy,
  .w[data-fill="auto"] .link-btn:not(.link-btn--branded),
  .w-socials--pill-row[data-fill="auto"] .social,
  .w-socials--list[data-fill="auto"] .social
) {
  border: 1px solid color-mix(in srgb, var(--v2-text) 22%, transparent);
  background: color-mix(in srgb, var(--v2-surface) 42%, transparent);
  color: var(--v2-text);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
}

body[data-design="3"][data-buttons="glass"] .v2-hero-action.is-primary {
  background: color-mix(in srgb, var(--v2-btn-bg) 30%, color-mix(in srgb, var(--v2-surface) 42%, transparent));
}

body[data-design="3"] :is(.v2-hero-action, .btn.btn-primary, .wl-btn, .contract-card-copy):hover {
  filter: brightness(1.06);
}

/* Profile picture shape ------------------------------------------------ */
/* The owner's shape choice (Header › Profile picture) outranks a theme's own
   picture treatment. Signal Desk and Broadcast set border-radius on the
   picture at higher specificity than the shape classes in v2.css, so
   choosing Circle, Squircle, Rounded, Leaf, Blob or Bare changed nothing on
   those themes. The theme keeps its border and shadow; the shape is the
   owner's. Same geometry as v2.css. */

body[data-design="3"].page-v2 .v2-profile-picture.is-circle { border-radius: 50%; }
body[data-design="3"].page-v2 .v2-profile-picture.is-rounded { border-radius: 22%; }
body[data-design="3"].page-v2 .v2-profile-picture.is-squircle { border-radius: 32%; }
body[data-design="3"].page-v2 .v2-profile-picture.is-hex { border-radius: 0; clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%); }
body[data-design="3"].page-v2 .v2-profile-picture.is-diamond { border-radius: 0; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
body[data-design="3"].page-v2 .v2-profile-picture.is-leaf { border-radius: 50% 8% 50% 8%; }
body[data-design="3"].page-v2 .v2-profile-picture.is-blob { border-radius: 62% 38% 46% 54% / 54% 46% 54% 46%; }
body[data-design="3"].page-v2 .v2-profile-picture.is-none { border-radius: 0; }

/* Profile video -------------------------------------------------------- */

body[data-design="3"] .v2-profile-picture video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}