/* Projector Marquee components. Values copied from prototype/app/globals.css and
   marquee.css; colours, radii and spacing come from tokens.css. Marketing templates
   (pj-social, pj-slide, pj-onepager, pj-email) are additions built from the same values. */
.pj { font-family: var(--font-body); color: var(--foreground); background: var(--background); font-size: 16px; line-height: 1.5; }
.pj *, .pj *::before, .pj *::after { box-sizing: border-box; }
.pj h1, .pj h2, .pj h3, .pj p { margin: 0; }
.pj-display { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; }
.pj-display em { color: var(--accent); font-style: normal; }
.pj-icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* Brand */
.pj-brand { display: inline-flex; align-items: center; gap: 10px; font: 800 31px/0.95 var(--font-display); letter-spacing: -0.6px; text-transform: uppercase; color: var(--foreground); }
.pj-brand :is(img, .pj-mark-svg) { width: 36px; height: 36px; }

/* The mark takes the colourway's signal (D45) */
.pj-mark-svg { flex-shrink: 0; }
.pj-mark-tile { fill: var(--mark-tile); }
.pj-mark-line { stroke: var(--mark-ink); }
.pj-mark-body { fill: var(--mark-ink); }

/* Eyebrow */
.pj-eyebrow { display: flex; gap: 9px; align-items: center; font-size: 11px; line-height: 1.7; font-weight: 500; letter-spacing: 1.6px; text-transform: uppercase; color: var(--accent); }
.pj-live-dot { width: 6px; height: 6px; border-radius: var(--radius-round); background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent); }
.pj-rule { display: inline-block; width: 25px; height: 1px; background: var(--accent); }

/* Button */
.pj-btn { min-height: 48px; padding: 14px 22px; display: inline-flex; align-items: center; justify-content: space-between; gap: var(--space-32); font: 600 14px/1.4 var(--font-body); color: var(--primary-foreground); background: var(--primary); border: 1px solid transparent; border-radius: var(--radius); cursor: pointer; transition: transform .2s, filter .2s; }
.pj-btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.pj-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; }
.pj-btn.secondary { background: transparent; color: var(--foreground); border-color: var(--border); }
.pj-btn.secondary:hover { background: var(--muted); }
.pj-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.pj-icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: var(--radius-round); border: 1px solid var(--border); background: none; color: var(--foreground); cursor: pointer; }
.pj-icon-btn:hover { background: var(--muted); }
.pj-icon-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; }
.pj-text-btn { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); background: none; border: 0; font: 11px var(--font-body); padding: 0; cursor: pointer; }
.pj-text-btn:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Avatar and curator line */
.pj-avatar { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--radius-round); font-size: 13px; font-weight: 600; letter-spacing: .4px; color: var(--ink); background: var(--paper); border: 2px solid var(--border); }
.pj-avatar.small { width: 29px; height: 29px; font-size: 9px; border: 0; }
.pj-avatar.tp { background: var(--avatar-tp); }
.pj-avatar.jr { background: var(--avatar-jr); }
/* Tinted avatars keep dark initials in every theme, as in the prototype. */
.pj-avatar:is(.tp, .jr) { color: oklch(0.19 0.026 285); }
.pj-curator { display: flex; gap: 12px; align-items: center; }
.pj-curator small { display: block; font-size: 10px; color: var(--muted-foreground); }
.pj-curator strong { display: block; font-size: 14px; font-weight: 500; margin-top: 3px; }
.pj-follow { display: inline-flex; gap: 7px; align-items: center; background: none; border: 1px solid var(--border); padding: 9px 12px; border-radius: var(--radius); font: 11px var(--font-body); color: var(--done); }

/* Film card */
.pj-film-card { min-width: 0; }
.pj-film-image { position: relative; height: 270px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); overflow: hidden; }
.pj-film-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pj-film-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #00000077, transparent 50%); }
.pj-chip-category { position: absolute; top: 15px; left: 15px; z-index: 2; padding: 5px 9px; font-size: 10px; font-weight: 600; letter-spacing: .4px; border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); }
.pj-film-date { display: flex; justify-content: space-between; margin-top: 19px; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); }
.pj-film-date span:last-child { color: var(--muted-foreground); }
.pj-film-card h3 { font: 800 34px/1.15 var(--font-display); text-transform: uppercase; margin: 10px 0; }
.pj-meta { display: flex; flex-wrap: wrap; font-size: 11px; color: var(--muted-foreground); }
.pj-meta span:not(:last-child)::after { content: "·"; margin: 0 7px; }
.pj-film-card p.pj-desc { font-size: 13px; color: var(--muted-foreground); margin: 15px 0 17px; }
.pj-card-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); font-size: 10px; color: var(--muted-foreground); }
.pj-card-bottom button { display: flex; gap: 12px; align-items: center; background: none; border: 0; font: 500 12px var(--font-body); color: var(--foreground); cursor: pointer; }
.pj-card-bottom button.reserved { color: var(--done); }

/* Reservation ticket (paper theme) */
.pj-ticket { padding: 28px; border-radius: var(--radius); background: var(--paper); color: var(--ink); border: 1px solid var(--paper); border-top: 4px solid var(--primary); }
.pj-ticket-label { display: block; font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted-foreground); }
.pj-ticket-film { display: flex; align-items: center; gap: 15px; margin: 22px 0; }
.pj-ticket-film img { width: 51px; height: 73px; object-fit: cover; border-radius: var(--radius-xs); }
.pj-ticket-film h3 { font: 800 34px/1.05 var(--font-display); text-transform: uppercase; margin-bottom: 6px; }
.pj-perforation { height: 1px; margin: 22px -28px; background: repeating-linear-gradient(90deg, var(--border) 0 6px, transparent 6px 11px); }
.pj-ticket-item { display: flex; gap: 12px; margin: 16px 0; font-size: 12px; align-items: start; }
.pj-ticket-item svg { color: var(--accent); margin-top: 2px; }
.pj-ticket-item small { display: block; font-size: 10px; color: var(--muted-foreground); margin-top: 4px; }
.pj-capacity { margin: 22px 0; font-size: 10px; }
.pj-capacity > span { display: block; }
.pj-capacity-track { margin-top: 11px; height: 3px; background: var(--border); }
.pj-capacity-track i { display: block; height: 3px; background: var(--primary); }
.pj-ticket-price { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; font-size: 12px; }
.pj-ticket-price strong { font: 700 36px var(--font-display); letter-spacing: -1px; }
.pj-ticket .pj-btn { width: 100%; font-size: 13px; padding: 13px 17px; }
.pj-ticket .pj-btn:focus-visible { outline-color: var(--ink); }
.pj-footnote { font-size: 10px; line-height: 1.7; text-align: center; color: var(--muted-foreground); margin-top: 14px; }

/* Session card (paper theme) */
.pj-session { border-radius: var(--radius); overflow: hidden; background: var(--paper); color: var(--ink); }
.pj-session > img { display: block; width: 100%; height: 138px; object-fit: cover; }
.pj-session-body { padding: var(--space-24); }
.pj-session h2 { font: 800 34px/1.1 var(--font-display); text-transform: uppercase; margin: 13px 0 12px; }
.pj-session-time { margin: 20px 0; padding: 16px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); display: flex; gap: 10px; align-items: center; font-size: 10px; color: var(--muted-foreground); }
.pj-session-time strong { display: block; font-size: 12px; font-weight: 500; color: var(--foreground); margin-top: 4px; }
.pj-readiness h3 { font-size: 12px; font-weight: 500; margin-bottom: 12px; }
.pj-readiness p { display: flex; gap: 7px; align-items: center; color: var(--muted-foreground); font-size: 10px; margin: 9px 0; }
.pj-readiness p svg { width: 13px; height: 13px; color: var(--ready); }
.pj-readiness p.incomplete, .pj-readiness p.incomplete svg { color: var(--incomplete); }
.pj-session .pj-btn { width: 100%; justify-content: center; gap: 10px; margin-top: 18px; font-size: 11px; min-height: 44px; }
.pj-session .pj-btn.secondary { border-color: var(--ink-muted); }

/* Stat tile */
.pj-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 25px; }
.pj-stat { border: 1px solid var(--border); background: var(--surface); padding: 21px 23px; border-radius: var(--radius); }
.pj-stat > span { display: block; font-size: 11px; color: var(--muted-foreground); }
.pj-stat strong { display: flex; align-items: baseline; gap: 9px; margin: 6px 0; font: 700 48px/1.35 var(--font-display); letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.pj-stat strong small { font: 12px var(--font-body); color: var(--muted-foreground); letter-spacing: 0; }
.pj-stat p { display: flex; gap: 7px; align-items: center; font-size: 10px; color: var(--muted-foreground); }
.pj-stat p svg { color: var(--accent); width: 13px; height: 13px; }

/* Run of show */
.pj-queue { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.pj-queue-head { display: flex; justify-content: space-between; align-items: center; padding: 24px 26px; gap: 20px; }
.pj-queue-head .pj-eyebrow { font-size: 9px; letter-spacing: 1px; color: var(--muted-foreground); }
.pj-queue-head h2 { font: 800 38px/1 var(--font-display); text-transform: uppercase; margin-top: 6px; }
.pj-queue-head .pj-btn { font-size: 10px; min-height: 35px; gap: 8px; padding: 8px 12px; }
.pj-notes { width: 100%; border-collapse: collapse; font-size: 11px; }
.pj-notes th { font-weight: 400; font-size: 9px; color: var(--muted-foreground); text-align: left; padding: 12px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.pj-notes th:first-child, .pj-notes td:first-child { padding-left: 26px; width: 96px; white-space: nowrap; }
.pj-notes td { padding: 16px 12px; border-bottom: 1px solid var(--border); line-height: 1.6; vertical-align: middle; }
.pj-notes td.time { font: 11px var(--font-timecode); color: var(--accent); }
.pj-notes tr.fired { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.pj-chip { display: inline-block; font-size: 9px; color: var(--muted-foreground); border: 1px solid var(--border); padding: 4px 8px; border-radius: var(--radius-sm); white-space: nowrap; }
.pj-chip.armed { color: var(--accent); border-color: var(--accent); }
.pj-draft { display: block; margin-top: 5px; font-size: 8px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted-foreground); }
.pj-rehearsal { display: flex; gap: 12px; align-items: center; padding: 17px 25px; background: var(--primary); color: var(--primary-foreground); font-size: 11px; }
.pj-rehearsal strong { font: 19px var(--font-timecode); }

/* Toast */
.pj-toast { display: inline-flex; gap: 12px; align-items: center; padding: 15px 20px; font-size: 12px; border-radius: 5px; background: var(--toast); color: var(--toast-foreground); border: 1px solid #26473b30; box-shadow: var(--shadow-toast); }

/* ---- Marketing templates (additions) ---- */
.pj-art-shade { position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in oklch, var(--background) 96%, transparent), color-mix(in oklch, var(--background) 70%, transparent) 37%, color-mix(in oklch, var(--background) 12%, transparent) 80%), linear-gradient(0deg, var(--background), transparent 45%); }
/* Matinee: paper holds solid behind the copy and hands over to the art in a short edge. */
[data-theme="matinee"] .pj-art-shade { background: linear-gradient(90deg, var(--background) 0%, var(--background) 50%, color-mix(in oklch, var(--background) 55%, transparent) 60%, transparent 70%), linear-gradient(0deg, var(--background), transparent 30%); }
.pj-frame { position: relative; overflow: hidden; background: var(--background); color: var(--foreground); }
.pj-frame > img.pj-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pj-frame .pj-copy { position: absolute; z-index: 2; display: flex; flex-direction: column; }
.pj-frame .pj-mark { position: absolute; z-index: 2; }

/* Social card: 1080-wide artboards; scale the wrapper to preview */
.pj-social.post { width: 1080px; height: 1350px; }
.pj-social.story { width: 1080px; height: 1920px; }
.pj-social.link { width: 1200px; height: 630px; }
.pj-social .pj-mark { top: 64px; left: 72px; }
.pj-social .pj-mark .pj-brand { font-size: 52px; gap: 16px; }
.pj-social .pj-mark .pj-brand :is(img, .pj-mark-svg) { width: 60px; height: 60px; }
.pj-social .pj-copy { left: 72px; right: 72px; bottom: 80px; gap: 28px; }
.pj-social .pj-eyebrow { font-size: 26px; letter-spacing: 3.5px; gap: 18px; }
.pj-social .pj-eyebrow .pj-live-dot { width: 14px; height: 14px; }
.pj-social h1 { font: 800 168px/0.94 var(--font-display); letter-spacing: -2px; text-transform: uppercase; }
.pj-social h1 em { color: var(--accent); font-style: normal; }
.pj-social .pj-host { display: flex; gap: 22px; align-items: center; font-size: 30px; }
.pj-social .pj-host .pj-avatar { width: 84px; height: 84px; font-size: 26px; }
.pj-social .pj-when { display: flex; justify-content: space-between; align-items: center; padding-top: 28px; border-top: 2px solid var(--border); font-size: 26px; color: var(--muted-foreground); }
.pj-social .pj-when strong { color: var(--foreground); font-weight: 600; }
.pj-social.link .pj-copy { left: 64px; right: 520px; bottom: 56px; gap: 18px; }
.pj-social.link h1 { font-size: 104px; }
.pj-social.link .pj-mark { top: 48px; left: 64px; }
.pj-social.link .pj-mark .pj-brand { font-size: 38px; }
.pj-social.link .pj-mark .pj-brand :is(img, .pj-mark-svg) { width: 44px; height: 44px; }
.pj-social.link .pj-eyebrow { font-size: 18px; }
.pj-social.link .pj-when { font-size: 20px; padding-top: 18px; }
.pj-social.quote { background: var(--background); }
.pj-social.quote .pj-quote-card { position: absolute; left: 72px; right: 72px; top: 200px; padding: 72px; border-radius: var(--radius); background: var(--paper); color: var(--ink); border-top: 8px solid var(--primary); }
.pj-social.quote blockquote { margin: 0; font: 400 76px/1.15 var(--font-display); }
.pj-social.quote .pj-timecode { font: 30px var(--font-timecode); color: var(--accent); margin-bottom: 36px; display: block; }

/* Deck slide: 1920 × 1080 artboard */
.pj-slide { width: 1920px; height: 1080px; }
.pj-slide .pj-mark { top: 64px; left: 96px; }
.pj-slide .pj-mark .pj-brand { font-size: 40px; gap: 14px; }
.pj-slide .pj-mark .pj-brand :is(img, .pj-mark-svg) { width: 46px; height: 46px; }
.pj-slide .pj-page { position: absolute; z-index: 2; right: 96px; bottom: 56px; font-size: 20px; letter-spacing: 2px; color: var(--muted-foreground); }
.pj-slide .pj-copy { left: 96px; bottom: 140px; max-width: 1100px; gap: 32px; }
.pj-slide .pj-eyebrow { font-size: 22px; letter-spacing: 3px; gap: 16px; }
.pj-slide h1 { font: 800 172px/0.94 var(--font-display); letter-spacing: -2px; text-transform: uppercase; }
.pj-slide h1 em, .pj-slide h2 em { color: var(--accent); font-style: normal; }
.pj-slide h2 { font: 800 112px/1 var(--font-display); letter-spacing: -1px; text-transform: uppercase; }
.pj-slide p.pj-sub { font-size: 34px; line-height: 1.45; color: var(--foreground); max-width: 900px; }
.pj-slide .pj-three { position: absolute; z-index: 2; left: 96px; right: 96px; bottom: 140px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 64px; border-top: 2px solid var(--border); padding-top: 56px; }
.pj-slide .pj-three strong { display: block; font-size: 34px; font-weight: 500; margin: 28px 0 12px; }
.pj-slide .pj-three p { font-size: 26px; line-height: 1.6; color: var(--muted-foreground); }
.pj-slide .pj-ring { width: 72px; height: 72px; border: 2px solid var(--border); border-radius: var(--radius-round); display: grid; place-items: center; color: var(--accent); }
.pj-slide .pj-ring .pj-icon { width: 32px; height: 32px; }

/* One-pager: US Letter at 96dpi, paper theme */
.pj-onepager { width: 816px; height: 1056px; padding: 64px 72px; background: var(--paper); color: var(--ink); display: flex; flex-direction: column; gap: 28px; }
.pj-onepager header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 20px; border-bottom: 4px solid var(--primary); }
.pj-onepager header .pj-brand { color: var(--ink); }
.pj-onepager h1 { font: 800 72px/0.96 var(--font-display); text-transform: uppercase; letter-spacing: -1px; }
.pj-onepager h1 em { color: var(--accent); font-style: normal; }
.pj-onepager .pj-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pj-onepager .pj-cols strong { display: block; font-size: 14px; font-weight: 600; margin: 10px 0 6px; }
.pj-onepager .pj-cols p, .pj-onepager > p { font-size: 13px; line-height: 1.6; color: var(--muted-foreground); }
.pj-onepager footer { margin-top: auto; display: flex; justify-content: space-between; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted-foreground); border-top: 1px solid var(--border); padding-top: 14px; }

/* Email header: 600 wide */
.pj-email { width: 600px; }
.pj-email .pj-email-hero { position: relative; height: 300px; overflow: hidden; background: var(--background); }
.pj-email .pj-email-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pj-email .pj-email-copy { position: absolute; z-index: 2; left: 32px; right: 200px; bottom: 28px; display: flex; flex-direction: column; gap: 12px; }
.pj-email h1 em { color: var(--accent); font-style: normal; }
.pj-email h1 { font: 800 52px/0.95 var(--font-display); text-transform: uppercase; letter-spacing: -0.8px; }
.pj-email .pj-email-top { padding: 20px 32px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); background: var(--background); font-size: 11px; color: var(--muted-foreground); }
.pj-email .pj-email-top .pj-brand { font-size: 24px; }
.pj-email .pj-email-top .pj-brand :is(img, .pj-mark-svg) { width: 28px; height: 28px; }