/* XXL Wallpapers — components. CSS only, prefixed xxl-. Load tokens.css first; set data-theme="dark" or "light" on <html>. */

body { margin: 0; font-family: var(--font-sans); background: var(--surface-0); color: var(--ink); -webkit-font-smoothing: antialiased; }
.xxl-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; padding: var(--space-4); }
.xxl-stack { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4); }

/* Category → accent. Set data-cat on a chip, a card or any ancestor. */
[data-cat="super-intelligence"] { --chip: var(--cat-super-intelligence); }
[data-cat="abstracts"] { --chip: var(--cat-abstracts); }
[data-cat="terrains"] { --chip: var(--cat-terrains); }
[data-cat="monuments"] { --chip: var(--cat-monuments); }
[data-cat="lineart-sunset"] { --chip: var(--cat-lineart-sunset); }
[data-cat="cats"] { --chip: var(--cat-cats); }
[data-cat="panic-buttons"] { --chip: var(--cat-panic-buttons); }
[data-cat="make-no-mistakes"] { --chip: var(--cat-make-no-mistakes); }

/* Focus: one ring everywhere. */
.xxl-btn:focus-visible, .xxl-chip:focus-visible, .xxl-card:focus-visible, .xxl-format:focus-visible, .xxl-nav__link:focus-visible, .xxl-panic:focus-visible, .xxl-wally-tag:focus-visible, .xxl-wally-view__close:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---------- Button ---------- */
.xxl-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: 44px; padding: 0 var(--space-4); box-sizing: border-box;
  font-family: var(--font-sans); font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  border-radius: var(--radius-md); border: var(--stroke-outline) solid var(--outline);
  background: var(--brand); color: var(--on-brand); box-shadow: var(--shadow-pop-brand);
  cursor: pointer; transition: transform 120ms ease-out, box-shadow 120ms ease-out, background-color 120ms ease-out;
}
.xxl-btn::before { content: ""; position: absolute; left: var(--space-2); right: var(--space-2); top: var(--space-1); height: 2px; border-radius: 1px; background: var(--brand-gloss); opacity: 0.9; pointer-events: none; }
.xxl-btn:hover { background: var(--brand-hi); transform: translateY(-1px); box-shadow: 0 5px 0 0 var(--brand-shade); }
.xxl-btn:active { background: var(--brand-deep); transform: translateY(3px); box-shadow: 0 1px 0 0 var(--brand-shade); }
.xxl-btn svg { width: 20px; height: 20px; flex: none; }
.xxl-btn--lg { height: 56px; padding: 0 var(--space-5); font-size: 15px; line-height: 20px; }
.xxl-btn--blue { background: var(--blue); color: var(--on-blue); box-shadow: var(--shadow-pop); }
.xxl-btn--blue::before { opacity: 0.35; background: var(--on-blue); }
.xxl-btn--blue:hover { background: var(--blue); box-shadow: 0 5px 0 0 var(--blue-deep); }
.xxl-btn--blue:active { background: var(--blue-deep); box-shadow: 0 1px 0 0 var(--blue-deep); }
.xxl-btn--ghost { background: transparent; color: var(--ink); border: var(--stroke-control) solid var(--line-strong); box-shadow: none; }
.xxl-btn--ghost::before { display: none; }
.xxl-btn--ghost:hover { background: var(--surface-2); box-shadow: none; }
.xxl-btn--ghost:active { background: var(--surface-2); transform: translateY(1px); box-shadow: none; }
.xxl-btn--panic { background: var(--panic); color: var(--on-panic); box-shadow: var(--shadow-pop); }
.xxl-btn--panic::before { opacity: 0.35; background: var(--on-panic); }
.xxl-btn--panic:hover { background: var(--panic); box-shadow: 0 5px 0 0 var(--outline); }
.xxl-btn--panic:active { background: var(--panic); box-shadow: 0 1px 0 0 var(--outline); }
.xxl-btn:disabled, .xxl-btn[aria-disabled="true"] { background: var(--surface-2); color: var(--ink-faint); border: var(--stroke-control) solid var(--line-strong); box-shadow: none; transform: none; cursor: not-allowed; }
.xxl-btn:disabled::before, .xxl-btn[aria-disabled="true"]::before { display: none; }

/* ---------- CategoryChip ---------- */
.xxl-chip {
  display: inline-flex; align-items: center; gap: var(--space-2); height: 32px; padding: 0 var(--space-3); box-sizing: border-box;
  font-family: var(--font-sans); font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  border-radius: var(--radius-md); border: var(--stroke-outline) solid var(--outline);
  background: var(--chip); color: var(--on-accent); box-shadow: var(--shadow-pop);
  transition: transform 120ms ease-out, box-shadow 120ms ease-out;
}
.xxl-chip:not([data-cat]) { --chip: var(--surface-2); color: var(--ink); border-color: var(--line-strong); border-width: var(--stroke-control); box-shadow: none; }
a.xxl-chip:hover, button.xxl-chip:hover { transform: translateY(-1px); }
a.xxl-chip:active, button.xxl-chip:active { transform: translateY(3px); box-shadow: 0 1px 0 0 var(--outline); }
.xxl-chip--lg { height: 40px; padding: 0 var(--space-4); font-size: 15px; line-height: 20px; border-radius: var(--radius-pill); }
.xxl-chip--quiet { background: transparent; color: var(--ink); border: var(--stroke-control) solid var(--line-strong); box-shadow: none; }
.xxl-chip__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--chip); flex: none; display: none; }
.xxl-chip--quiet .xxl-chip__dot { display: block; }

/* ---------- ResolutionBadge ---------- */
.xxl-res {
  display: inline-flex; align-items: center; gap: var(--space-2); height: 28px; padding: 0 var(--space-2); box-sizing: border-box;
  border-radius: var(--radius-sm); background: var(--surface-2); border: var(--stroke-hairline) solid var(--line-strong);
  font-family: var(--font-mono); font-size: 14px; line-height: 20px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap;
}
.xxl-res__tier + .xxl-res__tier::before, .xxl-res__native + .xxl-res__tier::before { content: "·"; color: var(--ink-muted); margin-right: var(--space-2); }
.xxl-res__ratio { color: var(--ink-muted); }
.xxl-res__native, .xxl-format__tag {
  font-family: var(--font-sans); font-size: 10px; line-height: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0 6px; border-radius: 4px; background: var(--brand-hi); color: var(--on-brand);
}

/* ---------- WallpaperCard ---------- */
.xxl-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box;
  background: var(--surface-1); color: var(--ink); text-decoration: none;
  border-radius: var(--radius-lg); border: var(--stroke-outline) solid var(--outline); box-shadow: var(--shadow-pop);
  transition: transform 120ms ease-out, box-shadow 120ms ease-out;
}
.xxl-card:not([data-cat]) { --chip: var(--line-strong); }
.xxl-card:hover, .xxl-card:focus-within { transform: translateY(-2px); box-shadow: var(--shadow-glow); }
.xxl-card:hover .xxl-wally-tag, .xxl-card:focus-within .xxl-wally-tag { opacity: 1; }
.xxl-card__media { position: relative; display: block; }
.xxl-card__thumb { display: block; width: 100%; height: auto; aspect-ratio: var(--aspect-32-9); object-fit: cover; background: var(--surface-2); }
.xxl-card__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); }
.xxl-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.xxl-card__title { margin: 0; font-family: var(--font-sans); font-size: 20px; line-height: 28px; font-weight: 700; color: var(--ink); }
.xxl-card__meta { margin: 0; font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 400; color: var(--ink-muted); }
.xxl-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-1); }
.xxl-card__stripe { height: 6px; background: var(--chip); flex: none; }

/* ---------- FormatPicker ---------- */
.xxl-formats {
  display: flex; flex-direction: column; gap: var(--space-2); width: 100%; max-width: 440px; padding: var(--space-5); box-sizing: border-box;
  background: var(--surface-2); color: var(--ink); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
}
.xxl-formats__title { margin: 0 0 var(--space-2); font-family: var(--font-sans); font-size: 20px; line-height: 28px; font-weight: 700; }
.xxl-formats__group { margin: var(--space-2) 0 0; font-family: var(--font-sans); font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }
.xxl-format {
  display: grid; grid-template-columns: 1fr auto; column-gap: var(--space-3); row-gap: 2px; align-items: center; text-align: left; width: 100%; box-sizing: border-box;
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); border: var(--stroke-control) solid var(--line-strong);
  background: transparent; color: var(--ink); font-family: var(--font-sans); cursor: pointer;
}
.xxl-format:hover { background: var(--surface-1); }
.xxl-format__spec { grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: 14px; line-height: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.xxl-format__note { grid-column: 1; grid-row: 2; font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.xxl-format__size { grid-column: 2; grid-row: 1 / span 2; justify-self: end; font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-muted); }
.xxl-format[aria-pressed="true"] { background: var(--blue); color: var(--on-blue); border-color: var(--outline); }
.xxl-format[aria-pressed="true"] .xxl-format__note, .xxl-format[aria-pressed="true"] .xxl-format__size { color: var(--on-blue); }
.xxl-formats .xxl-btn { margin-top: var(--space-3); align-self: stretch; }

/* ---------- Nav ---------- */
.xxl-nav {
  display: flex; align-items: center; gap: var(--space-5); height: var(--space-8); padding: 0 var(--space-5); box-sizing: border-box;
  background: var(--surface-1); border-bottom: var(--stroke-hairline) solid var(--line);
}
.xxl-nav__logo { display: block; flex: none; }
.xxl-nav__logo img { display: block; height: 40px; width: auto; }
.xxl-nav__links { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 0 auto; padding: 0; list-style: none; }
.xxl-nav__link {
  display: inline-flex; align-items: center; height: 36px; padding: 0 var(--space-3); box-sizing: border-box; border-radius: var(--radius-md); border: var(--stroke-outline) solid transparent;
  font-family: var(--font-sans); font-size: 17px; line-height: 24px; font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap;
}
.xxl-nav__link:hover { color: var(--link); }
.xxl-nav__link[aria-current="page"] { background: var(--brand); color: var(--on-brand); border-color: var(--outline); box-shadow: var(--shadow-pop-brand); }

/* ---------- PanicButton ---------- */
.xxl-panic-plate {
  display: inline-flex; align-items: center; justify-content: center; padding: var(--space-6); box-sizing: border-box;
  background: var(--surface-2); border-radius: var(--radius-xl); border: var(--stroke-outline) solid var(--outline); box-shadow: var(--shadow-pop);
}
.xxl-panic {
  position: relative; width: 200px; height: 200px; padding: 0; box-sizing: border-box;
  border-radius: var(--radius-pill); border: var(--stroke-outline-lg) solid var(--outline);
  background: var(--panic); color: var(--on-panic);
  font-family: var(--font-display); font-size: 40px; line-height: 1; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase;
  box-shadow: 0 12px 0 0 var(--outline); cursor: pointer;
  transition: transform 120ms ease-out, box-shadow 120ms ease-out;
}
.xxl-panic::before { content: ""; position: absolute; left: 24%; right: 24%; top: 10%; height: 14%; border-radius: var(--radius-pill); background: var(--on-panic); opacity: 0.35; pointer-events: none; }
.xxl-panic:hover { transform: translateY(-1px); box-shadow: 0 13px 0 0 var(--outline); }
.xxl-panic:active { transform: translateY(10px); box-shadow: 0 2px 0 0 var(--outline); }
.xxl-panic--sm { width: 120px; height: 120px; font-size: 24px; border-width: var(--stroke-outline); box-shadow: 0 8px 0 0 var(--outline); }
.xxl-panic--sm:active { transform: translateY(6px); }

/* ---------- WallyTag ---------- */
/* The easter egg on every wallpaper preview: a small sticker tag, top-right of the image, that opens the WallyView. Always visible on touch; on pointer devices it rests at 85% and comes to full on hover. */
.xxl-wally-tag {
  position: absolute; top: var(--space-2); right: var(--space-2); z-index: 1;
  display: inline-flex; align-items: center; height: 26px; padding: 0 var(--space-2); box-sizing: border-box;
  font-family: var(--font-display); font-size: 14px; line-height: 1; font-weight: 400; letter-spacing: 0.04em; text-transform: none; white-space: nowrap;
  border-radius: var(--radius-sm); border: var(--stroke-control) solid var(--outline);
  background: var(--brand-hi); color: var(--on-brand); box-shadow: 0 2px 0 0 var(--outline);
  cursor: pointer; opacity: 0.85; transition: transform 120ms ease-out, box-shadow 120ms ease-out, opacity 120ms ease-out;
}
.xxl-wally-tag::before { content: ""; width: 6px; height: 6px; margin-right: var(--space-2); border-radius: 50%; background: var(--on-brand); opacity: 0.55; }
.xxl-wally-tag:hover { opacity: 1; transform: translateY(-1px); box-shadow: 0 3px 0 0 var(--outline); }
.xxl-wally-tag:active { transform: translateY(2px); box-shadow: 0 0 0 0 var(--outline); }
@media (hover: none) { .xxl-wally-tag { opacity: 1; } }

/* ---------- WallyView ---------- */
/* Full-viewport overlay: a random background (--wally-bg, set inline by the consumer), Wall-y centred with the chosen wallpaper inside his screen. */
.xxl-wally-view {
  position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-5); padding: var(--space-6);
  box-sizing: border-box; background: var(--surface-0) var(--wally-bg) center / cover no-repeat; color: var(--ink);
}
.xxl-wally-view__close { position: absolute; top: var(--space-5); right: var(--space-5); }
.xxl-wally-view__caption {
  display: inline-flex; align-items: center; gap: var(--space-3); height: 44px; padding: 0 var(--space-4); box-sizing: border-box;
  background: var(--surface-1); color: var(--ink); border-radius: var(--radius-pill); border: var(--stroke-outline) solid var(--outline); box-shadow: var(--shadow-pop);
  font-family: var(--font-sans); font-size: 17px; line-height: 24px; font-weight: 600; white-space: nowrap;
}
/* The stage: the mascot image's own box. Ratio and screen box are measured from assets/Wally/wally-screen-draft.png; re-measure after the trace (assets/Wally/README.md). */
.xxl-wally { position: relative; width: 100%; max-width: 1200px; aspect-ratio: 2079 / 756; --wally-screen-left: 5.34%; --wally-screen-top: 21.96%; --wally-screen-width: 88.99%; --wally-screen-height: 48.81%; }
.xxl-wally__screen { position: absolute; inset: 0; -webkit-mask: var(--wally-mask) center / 100% 100% no-repeat; mask: var(--wally-mask) center / 100% 100% no-repeat; }
.xxl-wally__paper { position: absolute; left: var(--wally-screen-left); top: var(--wally-screen-top); width: var(--wally-screen-width); height: var(--wally-screen-height); object-fit: cover; display: block; }
.xxl-wally__mascot { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.xxl-wally__mascot img { display: block; width: 100%; height: 100%; }

/* ---------- Wordmark (hero headline recipe; not a logo replacement) ---------- */
/* Three layers from one element: ::before = extrusion (brand-shade, 5px down), the element's own text = the outline halo, ::after = the gradient letters on top. */
.xxl-wordmark {
  position: relative; z-index: 0; display: inline-block; margin: 0; white-space: nowrap;
  font-family: var(--font-display); font-weight: 400; font-size: 96px; line-height: 0.95; letter-spacing: 0.01em; text-transform: uppercase;
  color: var(--outline); -webkit-text-fill-color: var(--outline); -webkit-text-stroke: calc(var(--stroke-outline-lg) * 2) var(--outline); paint-order: stroke fill;
  --wordmark-top: var(--brand-hi); --wordmark-mid: var(--brand); --wordmark-bottom: var(--brand-deep); --wordmark-shade: var(--brand-shade);
}
.xxl-wordmark::before, .xxl-wordmark::after { content: attr(data-text); position: absolute; inset: 0; white-space: inherit; }
.xxl-wordmark::before { z-index: -1; transform: translateY(5px); color: var(--wordmark-shade); -webkit-text-fill-color: var(--wordmark-shade); -webkit-text-stroke: calc(var(--stroke-outline-lg) * 2) var(--outline); paint-order: stroke fill; }
.xxl-wordmark::after {
  z-index: 1; -webkit-text-stroke: 0 transparent; color: transparent; -webkit-text-fill-color: transparent;
  background: linear-gradient(180deg, var(--wordmark-top) 0%, var(--wordmark-mid) 55%, var(--wordmark-bottom) 100%);
  -webkit-background-clip: text; background-clip: text;
}
.xxl-wordmark--ice { --wordmark-top: #ffffff; --wordmark-mid: #ffffff; --wordmark-bottom: var(--ice); --wordmark-shade: var(--blue-deep); }

@media (prefers-reduced-motion: reduce) {
  .xxl-btn, .xxl-chip, .xxl-card, .xxl-panic { transition: none; }
  .xxl-btn:hover, .xxl-btn:active, .xxl-chip:hover, .xxl-chip:active, .xxl-card:hover, .xxl-card:focus-within, .xxl-panic:hover, .xxl-panic:active { transform: none; }
}