/* Legal pages (page-legal.php) – semantic tokens only, so Light and Dark both work. */

.promptix-main:has(> .promptix-legal-page) { padding-top: 0; }
.promptix-legal-page { padding-bottom: 56px; }

.pxl-grad { padding-left: .04em; background: var(--gradient-cyan); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Hero */
.pxl-hero { position: relative; overflow: hidden; padding: 20px 0 32px; background: var(--gradient-soft); border-bottom: 1px solid var(--border-default); }
.pxl-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 32px; align-items: center; }
.pxl-breadcrumb { margin-bottom: 18px; font-size: 13px; }
.pxl-breadcrumb li + li::before { content: "›"; }
.pxl-hero__title { margin: 0 0 14px; color: var(--text-heading); font-size: clamp(2.25rem, 4.4vw, 3.5rem); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; }
.pxl-hero__lead { max-width: 560px; margin: 0 0 18px; color: var(--text-body); font-size: 1.0625rem; }
.pxl-dates { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 0; font-size: 14px; color: var(--text-body); }
.pxl-dates__item { display: inline-flex; align-items: center; gap: 8px; }
.pxl-dates__item .promptix-icon { color: var(--color-purple); }
.pxl-dates__item strong { color: var(--text-heading); }
.pxl-dates__badge { padding: 4px 12px; border: 1px solid color-mix(in srgb, var(--color-primary) 45%, transparent); border-radius: var(--radius-md); background: var(--bg-active); color: var(--color-primary); font-size: 13px; }

.pxl-hero__art { position: relative; display: grid; place-items: center; min-height: 240px; overflow: hidden; border-radius: var(--radius-xl); background: var(--gradient-primary); color: var(--text-inverse); box-shadow: var(--shadow-lg); }
.pxl-hero__art.has-image { background: var(--navy-900); }
.pxl-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pxl-hero__glyph { opacity: .85; }
.pxl-hero__words { position: absolute; top: 22px; right: 22px; z-index: 1; display: grid; gap: 2px; margin: 0; padding: 12px 16px; border: 1px solid rgba(255, 255, 255, .45); border-radius: var(--radius-lg); background: rgba(17, 24, 39, .35); color: var(--text-inverse); font-size: 1.0625rem; font-weight: 700; text-transform: uppercase; transform: rotate(8deg); backdrop-filter: blur(4px); }
.pxl-hero__tagline { position: absolute; left: 20px; bottom: 16px; z-index: 1; display: grid; margin: 0; color: var(--text-inverse); font-size: .9375rem; font-weight: 700; font-style: italic; line-height: 1.2; text-align: left; text-transform: uppercase; text-shadow: 0 2px 8px rgba(0, 0, 0, .4); }

/* Layout */
.pxl-layout { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 28px; align-items: start; padding-top: 24px; }
.pxl-layout.is-single { grid-template-columns: minmax(0, 1fr); }
.pxl-side { position: sticky; top: calc(var(--header-height) + 16px); display: grid; gap: 16px; max-height: calc(100vh - var(--header-height) - 32px); overflow-y: auto; }

.pxl-toc { padding: 16px; }
.pxl-toc__title { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; color: var(--text-heading); font-size: 1.0625rem; font-weight: 700; }
.pxl-toc__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--badge-primary-bg); color: var(--color-primary); }
.pxl-toc__list { display: grid; margin: 0; padding: 0; list-style: none; }
.pxl-toc__list li + li { border-top: 1px solid var(--border-default); }
.pxl-toc__list a { display: flex; align-items: flex-start; gap: 12px; padding: 11px 10px; border: 1px solid transparent; border-radius: var(--radius-md); color: var(--text-body); font-size: 14px; line-height: 1.4; transition: color .2s ease, background-color .2s ease, border-color .2s ease; }
.pxl-toc__list a:hover { color: var(--color-primary); }
.pxl-toc__list a.is-active { border-color: color-mix(in srgb, var(--color-primary) 55%, transparent); background: var(--bg-active); color: var(--color-primary); font-weight: 600; }
.pxl-toc__list li:has(a.is-active) + li { border-top-color: transparent; }
.pxl-toc__ico { display: flex; flex: none; margin-top: 1px; color: var(--color-purple); }

.pxl-pdf { display: grid; gap: 14px; padding: 18px; }
.pxl-pdf__head { display: flex; gap: 12px; }
.pxl-pdf__icon { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: var(--radius-md); background: var(--badge-purple-bg); color: var(--color-purple); }
.pxl-pdf__title { margin: 0; color: var(--text-heading); font-weight: 700; line-height: 1.3; }
.pxl-pdf__text { margin: 4px 0 0; color: var(--text-secondary); font-size: 13px; }
.pxl-pdf__btn { width: 100%; border: 0; background: linear-gradient(-90deg, var(--color-purple) 0%, var(--color-primary) 55%, var(--color-cyan) 100%); color: var(--text-inverse); }
.pxl-pdf__btn:hover { color: var(--text-inverse); box-shadow: var(--shadow-md); }

/* Sections */
.pxl-intro { margin-bottom: 20px; }
.pxl-section { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding: 4px 0 24px; scroll-margin-top: calc(var(--header-height) + 16px); }
.pxl-section + .pxl-section { padding-top: 24px; border-top: 1px solid var(--border-default); }
.pxl-section__num { display: grid; place-items: center; width: 42px; height: 42px; border: 2px solid var(--color-primary); border-radius: 50%; background: var(--bg-active); color: var(--color-primary); font-size: 1.125rem; font-weight: 800; box-shadow: 0 0 16px color-mix(in srgb, var(--color-primary) 30%, transparent); }
.pxl-section__title { margin: 6px 0 10px; color: var(--text-heading); font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 700; scroll-margin-top: calc(var(--header-height) + 16px); }
.pxl-section__content { color: var(--text-body); }
.pxl-section__content > :first-child { margin-top: 0; }
.pxl-section__content p { margin: 0 0 12px; }
.pxl-section__content ul { margin: 0 0 12px; padding-right: 20px; }
.pxl-section__content li { margin-bottom: 6px; }
.pxl-section__content li::marker { color: var(--text-heading); }

/* Block styles (also usable on any page) */
.is-style-promptix-checks { padding-right: 0 !important; list-style: none; }
.is-style-promptix-checks li { position: relative; padding-right: 30px; }
.is-style-promptix-checks li::before { content: ""; position: absolute; top: .2em; right: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--color-purple) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 12px no-repeat; }

.is-style-promptix-note,
.is-style-promptix-note-danger { --note: var(--color-primary); --note-bg: var(--color-info-bg); position: relative; margin: 14px 0; padding: 14px 56px 14px 18px; border: 1px solid var(--note); border-radius: var(--radius-lg); background: var(--note-bg); color: var(--text-body); }
.is-style-promptix-note-danger { --note: var(--color-error); --note-bg: var(--color-error-bg); }
.is-style-promptix-note::before,
.is-style-promptix-note-danger::before { content: ""; position: absolute; top: 15px; right: 18px; width: 24px; height: 24px; background: var(--note); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7.5v.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7.5v.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.is-style-promptix-note-danger::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6M12 16.5v.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6M12 16.5v.5'/%3E%3C/svg%3E"); }
.is-style-promptix-note > :first-child,
.is-style-promptix-note-danger > :first-child { margin: 0 0 4px; color: var(--note); font-size: 1rem; font-weight: 600; }
.is-style-promptix-note > :last-child,
.is-style-promptix-note-danger > :last-child { margin-bottom: 0; }

@media (max-width: 991px) {
	.pxl-hero__grid { grid-template-columns: 1fr; }
	.pxl-layout { grid-template-columns: 1fr; }
	.pxl-side { position: static; max-height: none; }
}

@media (max-width: 600px) {
	.pxl-section { grid-template-columns: 1fr; gap: 8px; }
	.pxl-section__num { width: 36px; height: 36px; font-size: 1rem; }
	.pxl-hero__words { font-size: .875rem; }
}

/* DMCA takedown / counter-notice form ([promptix_dmca_form]). */
.pxdm { margin-top: 20px; padding: 24px; border: 1px solid var(--border-default); border-radius: var(--radius-xl); background: var(--bg-card); box-shadow: var(--shadow-sm); }
.pxdm-alert { margin: 0 0 16px; }
.pxdm-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; padding: 4px; border-radius: var(--radius-md); background: var(--bg-hover); }
.pxdm-tab { display: inline-flex; flex: 1; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: var(--radius-sm); color: var(--text-body); font-weight: 600; text-decoration: none; }
.pxdm-tab:hover { color: var(--color-primary); }
.pxdm-tab.is-active { background: var(--bg-card); color: var(--color-primary); box-shadow: var(--shadow-sm); }
.pxdm-legend { margin: 24px 0 12px; color: var(--text-heading); font-size: 1rem; font-weight: 700; }
.pxdm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.pxdm-field { display: grid; gap: 8px; margin: 0; }
.pxdm-field--wide { grid-column: 1 / -1; }
.pxdm-field label { color: var(--text-heading); font-size: 14px; font-weight: 600; }
.pxdm-req { color: var(--color-error); }
.pxdm-help { color: var(--text-muted); font-size: 12.5px; }
.pxdm-input { position: relative; display: block; }
.pxdm-input > .promptix-icon { position: absolute; top: 13px; inset-inline-start: 14px; color: var(--text-muted); pointer-events: none; }
.pxdm-input .input { width: 100%; padding-inline-start: 44px; }
.pxdm-input textarea { min-height: 72px; resize: vertical; }
.pxdm-checks { display: grid; gap: 12px; }
.pxdm-check { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--border-default); border-radius: var(--radius-md); color: var(--text-body); font-size: 14px; line-height: 1.5; cursor: pointer; }
.pxdm-check:has(input:checked) { border-color: var(--color-primary); background: var(--bg-active); }
.pxdm-check input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--color-primary); }
.pxdm-checks + .pxdm-grid { margin-top: 16px; }
.pxdm-warning { display: flex; gap: 10px; margin: 20px 0 0; padding: 12px 14px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-warning) 12%, transparent); color: var(--text-body); font-size: 13.5px; }
.pxdm-warning .promptix-icon { flex: none; color: var(--color-warning); }
.pxdm-submit { width: 100%; min-height: 52px; margin-top: 20px; }
@media (max-width: 600px) {
  .pxdm { padding: 16px; }
  .pxdm-grid { grid-template-columns: minmax(0, 1fr); }
}