/*
 * Pixel tweaks toward the mockups, on top of the product's stylesheet. Each block names the Figma
 * node it follows. Selectors are prefixed with the page's testid so they outrank the product's
 * utility classes (a `:has()` utility counts higher than a lone attribute).
 */

/* AppFooter (622:699): no twin quick-login key, everything centred. */
[data-testid="app-footer"] { justify-content: center !important; padding-bottom: 8px !important; min-height: 28px; }
[data-testid="app-footer"] > ul { margin-inline-start: 0 !important; }

/* "Add address" / "Venue type" (30143:46597): Button size sm — 32px, 14px text, 16px icon, lift shadow. */
[data-testid="setup-page"] [data-testid="setup-address-toggle"],
[data-testid="setup-page"] [data-testid="setup-kind-toggle"] {
  height: 32px; padding: 0 12px; gap: 6px; border-radius: 8px; font-size: 14px; line-height: 20px;
  /* the product's 0.5px inset ring is part of its composed box-shadow, so it is restated here */
  box-shadow: inset 0 0 0 var(--border-thin, 0.5px) var(--color-border, var(--border, #e4e4e7)), 0 1px 1px rgba(0, 0, 0, 0.04), 0 3px 6px -2px rgba(0, 0, 0, 0.02);
}
[data-testid="setup-page"] [data-testid="setup-address-toggle"] svg,
[data-testid="setup-page"] [data-testid="setup-kind-toggle"] svg { width: 16px; height: 16px; }

/* The pencil by the typed name (Icon / pencil 582:220 at 30143:46542): 16px, foreground ink. */
[data-testid="setup-page"] [data-testid="setup-venue-rename"] { width: 16px; height: 16px; padding: 0; color: var(--foreground); }
[data-testid="setup-page"] [data-testid="setup-venue-rename"] svg { width: 16px; height: 16px; }

/* The menu step ("Now, your menu", 30144:48937): the field's 30% placeholder, a 10% Continue while asleep,
   the note under "or", "Skip" as a bare button, the link tag full-width, tags 20px, the spinner 24px below the tag. */
[data-testid="setup-page"] [data-testid="setup-menu-field"]::placeholder { color: var(--foreground); opacity: 0.3; }
[data-testid="setup-page"] [data-testid="setup-menu-continue"]:disabled { opacity: 0.1; }
[data-testid="setup-page"] [data-testid="setup-menu-invite-note"] { width: 362px; max-width: 100%; }
[data-testid="setup-page"] .proto-ghost { background: transparent !important; box-shadow: none !important; width: auto !important; }
[data-testid="setup-page"] [data-testid="setup-menu-link"] { width: 100%; height: 20px; padding: 0 6px; }
[data-testid="setup-page"] [data-testid="setup-menu-link"] > span { flex: 1 1 0; min-width: 0; text-align: left; }
[data-testid="setup-page"] [data-testid="setup-menu-files"] [data-slot="tag"] { height: 20px; padding: 0 6px; }
[data-testid="setup-page"] [data-testid="setup-menu-link-resolving"] { margin-top: 16px; }
/* "Invite employees": the outline button's ring plus the lift shadow, as on the setup screen. */
[data-testid="setup-page"] [data-testid="setup-menu-manager"] { box-shadow: inset 0 0 0 var(--border-thin, 0.5px) var(--color-border, var(--border, #e4e4e7)), 0 1px 1px rgba(0, 0, 0, 0.04), 0 3px 6px -2px rgba(0, 0, 0, 0.02); }
/* The field as a block: the product's inline textarea leaves 6px of line-box slack under it, which pushed everything below by 6px. */
[data-testid="setup-page"] [data-testid="setup-menu-field"] { display: block; }
/* The found card (30144:48592): 12px corners, a 16/16 card title. */
[data-testid="setup-page"] [data-testid="setup-menu-link-found"] { border-radius: 12px; }
[data-testid="setup-page"] [data-testid="setup-menu-link-found"] .text-base { line-height: 16px; }

/*
 * The assistant box (30137:45664): 24px corners, 16px padding, 12px gaps, and a 1px inside hairline
 * that is a gradient (#2e40ff → #7a5af8 55% → #b44ae0, at 15%, ~127°) — drawn by a masked pseudo
 * element, since a border cannot take a gradient.
 */
[data-testid="setup-page"] [data-testid="setup-notes-box"] { position: relative; border-radius: 24px; padding: 16px; gap: 12px; }
[data-testid="setup-page"] [data-testid="setup-notes-box"]::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(127deg, rgba(46, 64, 255, 0.15) 0%, rgba(122, 90, 248, 0.15) 55%, rgba(180, 74, 224, 0.15) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}