/*
 * Shadow Red Persona theme.
 *
 * Loaded after app.css only when Appearance > Theme is "Shadow Red Persona".
 * It re-tunes the shared design tokens and restyles shared components, so all
 * markup and behaviour stay common with the Official theme. Colours keep
 * following the Appearance palette (--accent, --bg, --text …); only the
 * surfaces, type, shapes and motion change here.
 */

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url("../fonts/inter/inter-latin-var.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url("../fonts/inter/inter-latin-ext-var.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/ibm-plex-mono/ibm-plex-mono-latin-400.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/ibm-plex-mono/ibm-plex-mono-latin-ext-400.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/ibm-plex-mono/ibm-plex-mono-latin-500.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/ibm-plex-mono/ibm-plex-mono-latin-ext-500.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ───────────── tokens ─────────────
 * html[...] outranks the inline :root palette block, so these win over the
 * scheme defaults while --accent/--bg/--text stay user-controlled. */

html[data-theme-style="persona"] {
    --persona-ink: #07070a;
    --persona-paper: #f5f5f7;
    --persona-red: var(--accent);
    --persona-red-fill: color-mix(in srgb, var(--accent) 86%, black 14%);
    --persona-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --persona-ease-snap: cubic-bezier(0.7, 0, 0.2, 1);
    --persona-cut: 12px;

    --radius-media: 10px;
    --radius-control: 6px;
    --radius-card-sm: 10px;
    --radius-card-md: 14px;
    --radius-card-lg: 14px;
    --radius-panel: 14px;

    --accent-strong: color-mix(in srgb, var(--accent) 70%, white 30%);
    --on-accent: #ffffff;

    --surface-border-subtle: rgba(255, 255, 255, 0.06);
    --surface-border: rgba(255, 255, 255, 0.08);
    --surface-border-strong: rgba(255, 255, 255, 0.14);
    --panel-border: rgba(255, 255, 255, 0.08);
    --surface-glass: linear-gradient(135deg, color-mix(in srgb, var(--accent) 13%, transparent), rgba(255, 255, 255, 0.035) 42%, rgba(10, 10, 12, 0.55));
    --surface-glass-dark: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, rgba(12, 12, 16, 0.94)), rgba(12, 12, 16, 0.94) 45%);
    --surface-glass-dark-soft: linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, rgba(12, 12, 16, 0.9)), rgba(12, 12, 16, 0.9) 45%);
    --persona-glass-rim: linear-gradient(135deg, color-mix(in srgb, var(--accent) 80%, transparent), rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.03));
    --shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 24px 60px rgba(0, 0, 0, 0.45);
    --shadow-lg: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 30px 80px rgba(0, 0, 0, 0.5);
    --control-bg: rgba(0, 0, 0, 0.35);
    --persona-grid-line: rgba(255, 255, 255, 0.035);
    --persona-dots: color-mix(in srgb, var(--accent) 50%, transparent);

    --body-background:
        radial-gradient(60% 50% at 12% 8%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
        radial-gradient(40% 40% at 88% 22%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%),
        linear-gradient(160deg, color-mix(in srgb, var(--bg) 90%, #16161c 10%), var(--bg) 60%, color-mix(in srgb, var(--bg) 88%, var(--accent) 12%));
    --home-background: var(--body-background);

    --tracking-eyebrow: 0.18em;
    --tracking-eyebrow-wide: 0.18em;

    font-feature-settings: "cv11", "ss01";
}

html[data-theme-style="persona"][data-theme-scheme="light"] {
    --surface-border-subtle: rgba(0, 0, 0, 0.05);
    --surface-border: rgba(0, 0, 0, 0.08);
    --surface-border-strong: rgba(0, 0, 0, 0.14);
    --panel-border: rgba(0, 0, 0, 0.08);
    --surface-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.48) 50%, color-mix(in srgb, var(--accent) 10%, rgba(255, 255, 255, 0.55)));
    --surface-glass-dark: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(248, 246, 247, 0.84));
    --surface-glass-dark-soft: linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(248, 246, 247, 0.78));
    --persona-glass-rim: linear-gradient(135deg, color-mix(in srgb, var(--accent) 65%, transparent), rgba(255, 255, 255, 0.95) 40%, rgba(0, 0, 0, 0.06));
    --shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 20px 50px rgba(60, 10, 20, 0.12);
    --shadow-lg: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 28px 70px rgba(60, 10, 20, 0.16);
    --control-bg: rgba(255, 255, 255, 0.6);
    --persona-grid-line: rgba(0, 0, 0, 0.04);
    --persona-dots: color-mix(in srgb, var(--accent) 35%, transparent);
    --accent-strong: color-mix(in srgb, var(--accent) 80%, black 20%);

    --body-background:
        radial-gradient(55% 45% at 10% 10%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%),
        radial-gradient(45% 45% at 90% 15%, color-mix(in srgb, var(--accent) 16%, white 60%), transparent 70%),
        linear-gradient(160deg, color-mix(in srgb, var(--bg) 96%, white 4%), color-mix(in srgb, var(--bg) 92%, #d9dbe3 8%) 55%, color-mix(in srgb, var(--bg) 90%, var(--accent) 10%));
}

/* ───────────── base ───────────── */

.theme-style-persona {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* tech grid instead of the Official diagonal streaks */
.theme-style-persona::before {
    background:
        linear-gradient(var(--persona-grid-line) 1px, transparent 1px) 0 0 / 48px 48px,
        linear-gradient(90deg, var(--persona-grid-line) 1px, transparent 1px) 0 0 / 48px 48px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 40%, transparent 100%);
    mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 40%, transparent 100%);
    opacity: 1;
}

.theme-style-persona :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.theme-style-persona ::selection {
    background: var(--persona-red-fill);
    color: #ffffff;
}

.theme-style-persona code,
.theme-style-persona kbd,
.theme-style-persona samp {
    font-family: var(--font-mono);
}

/* ───────────── headings ───────────── */

.theme-style-persona .brand-mark strong,
.theme-style-persona .section-header h1,
.theme-style-persona .section-header h2,
.theme-style-persona .hero-card h1,
.theme-style-persona .single-card h1,
.theme-style-persona .metric-card strong,
.theme-style-persona .admin-header h1,
.theme-style-persona .content-card h3,
.theme-style-persona .post-row h2,
.theme-style-persona .login-card h1 {
    font-weight: 900;
    letter-spacing: -0.045em;
}

.theme-style-persona .brand-mark strong {
    font-weight: 900;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

.theme-style-persona .hero-card h1,
.theme-style-persona .section-header h1,
.theme-style-persona .section-header h2 {
    line-height: 0.92;
    text-transform: uppercase;
    text-wrap: balance;
}

.theme-style-persona .hero-card h1 {
    letter-spacing: -0.055em;
}

.theme-style-persona .single-card h1,
.theme-style-persona .admin-header h1 {
    line-height: 1.02;
    text-wrap: balance;
}

.theme-style-persona .content-card h3,
.theme-style-persona .post-row h2 {
    letter-spacing: -0.025em;
    line-height: 1.2;
}

/* eyebrow: red caps with a skewed lead-in bar */
.theme-style-persona .eyebrow {
    color: var(--persona-red);
    font-weight: 800;
    letter-spacing: var(--tracking-eyebrow);
}

.theme-style-persona .eyebrow::before {
    content: "";
    display: inline-block;
    width: 28px;
    height: 3px;
    margin-right: 10px;
    vertical-align: 0.3em;
    background: currentColor;
    transform: skewX(-30deg);
}

.theme-style-persona .stat-label {
    color: var(--muted);
    font-weight: 700;
    letter-spacing: var(--tracking-label);
}

/* ───────────── glass ───────────── */

.theme-style-persona .glass-panel {
    border-color: transparent;
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
}

/* :where() keeps this at zero specificity so sticky/fixed panels keep their position */
:where(.theme-style-persona .glass-panel) {
    position: relative;
}

/* rim light: accent at the top-left edge, fading out (showroom cards use both pseudos already) */
.theme-style-persona .glass-panel:not(.showroom-card)::after {
    content: "";
    position: absolute;
    inset: -1px;
    padding: 1px;
    border-radius: inherit;
    background: var(--persona-glass-rim);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* ───────────── buttons: chamfered corner + slanted sweep ───────────── */

.theme-style-persona .primary-button,
.theme-style-persona .ghost-button,
.theme-style-persona .danger-button {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 0;
    font-weight: 800;
    font-size: var(--text-sm);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    clip-path: polygon(0 0, calc(100% - var(--persona-cut)) 0, 100% var(--persona-cut), 100% 100%, 0 100%);
    transition: color 0.25s var(--persona-ease), transform 0.2s var(--persona-ease), background 0.2s var(--persona-ease);
}

.theme-style-persona .primary-button::before,
.theme-style-persona .ghost-button::before,
.theme-style-persona .danger-button::before {
    content: "";
    position: absolute;
    inset: -2px -30%;
    z-index: -1;
    transform: translateX(-105%) skewX(-24deg);
    transition: transform 0.38s var(--persona-ease-snap);
    pointer-events: none;
}

.theme-style-persona .primary-button:hover::before,
.theme-style-persona .primary-button:focus-visible::before,
.theme-style-persona .ghost-button:hover::before,
.theme-style-persona .ghost-button:focus-visible::before,
.theme-style-persona .danger-button:hover::before,
.theme-style-persona .danger-button:focus-visible::before {
    transform: translateX(0) skewX(-24deg);
}

.theme-style-persona .primary-button:hover,
.theme-style-persona .ghost-button:hover,
.theme-style-persona .danger-button:hover {
    transform: none;
}

.theme-style-persona .primary-button:active,
.theme-style-persona .ghost-button:active,
.theme-style-persona .danger-button:active {
    transform: translateY(1px);
}

/* clip-path hides outlines, so focus is drawn inside the shape */
.theme-style-persona .primary-button:focus-visible,
.theme-style-persona .ghost-button:focus-visible,
.theme-style-persona .danger-button:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px currentColor;
}

.theme-style-persona .primary-button {
    background: var(--persona-red-fill);
    color: #ffffff;
    box-shadow: none;
}

.theme-style-persona .primary-button::before {
    background: var(--persona-paper);
}

.theme-style-persona .primary-button:hover,
.theme-style-persona .primary-button:focus-visible {
    color: var(--persona-ink);
}

.theme-style-persona .ghost-button {
    background: color-mix(in srgb, var(--text) 8%, transparent);
    color: var(--text);
    box-shadow: inset 0 0 0 1px var(--surface-border-strong);
}

.theme-style-persona .ghost-button::before {
    background: var(--persona-red-fill);
}

.theme-style-persona .ghost-button:hover,
.theme-style-persona .ghost-button:focus-visible {
    color: #ffffff;
}

.theme-style-persona .danger-button::before {
    background: var(--danger);
}

.theme-style-persona .danger-button:hover,
.theme-style-persona .danger-button:focus-visible {
    color: var(--persona-ink);
}

.theme-style-persona .primary-button:disabled::before,
.theme-style-persona .ghost-button:disabled::before,
.theme-style-persona .danger-button:disabled::before {
    transform: translateX(-105%) skewX(-24deg);
}

/* small square action buttons stay compact rectangles */
.theme-style-persona .icon-button,
.theme-style-persona .btn-icon,
.theme-style-persona .table-actions .icon-button {
    --persona-cut: 6px;
    letter-spacing: 0;
}

.theme-style-persona .table-actions button,
.theme-style-persona .table-actions a,
.theme-style-persona .editor-toolbar button,
.theme-style-persona .block-editor__card-actions button,
.theme-style-persona .block-editor__nested-toolbar button,
.theme-style-persona .table-actions__muted {
    border-radius: var(--radius-control);
}

.theme-style-persona .message-dialog__button {
    border-radius: 0;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: var(--text-sm);
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}

/* ───────────── public header + nav: skewed red slab ───────────── */

.theme-style-persona .site-header {
    padding: 10px 12px 10px 18px;
}

.theme-style-persona .site-nav {
    gap: 2px;
}

.theme-style-persona .site-nav a,
.theme-style-persona .site-nav__item {
    position: relative;
    isolation: isolate;
    border-radius: 0;
    padding: 9px 15px;
    font-weight: 700;
    font-size: 0.9rem;
    white-space: nowrap;
    color: var(--muted);
    transition: color 0.25s var(--persona-ease);
}

.theme-style-persona .site-nav a::before {
    content: "";
    position: absolute;
    inset: 3px 0;
    z-index: -1;
    background: var(--persona-red-fill);
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5);
    transform: skewX(-14deg) scaleX(0);
    transform-origin: left center;
    transition: transform 0.36s var(--persona-ease-snap);
}

.theme-style-persona .site-nav a:hover,
.theme-style-persona .site-nav a.is-active {
    background: transparent;
    color: var(--text);
    transform: none;
}

.theme-style-persona .site-nav a.is-active {
    color: #ffffff;
}

.theme-style-persona .site-nav a.is-active::before {
    transform: skewX(-14deg) scaleX(1);
}

.theme-style-persona .site-nav a:hover:not(.is-active)::before {
    transform: skewX(-14deg) scaleX(1);
    opacity: 0.22;
    box-shadow: none;
}

.theme-style-persona .nav-toggle {
    border-radius: var(--radius-control);
}

.theme-style-persona .nav-toggle span {
    background: var(--text);
    border-radius: 0;
}

/* ───────────── public content ───────────── */

.theme-style-persona .hero-card {
    background: var(--surface-glass);
}

/* halftone dots behind hero cards */
.theme-style-persona .hero-card::before {
    content: "";
    position: absolute;
    right: -1px;
    top: -1px;
    width: min(420px, 70%);
    height: 320px;
    background: radial-gradient(circle, var(--persona-dots) 1.6px, transparent 2px) 0 0 / 11px 11px;
    -webkit-mask-image: radial-gradient(circle at 80% 20%, #000, transparent 70%);
    mask-image: radial-gradient(circle at 80% 20%, #000, transparent 70%);
    border-top-right-radius: inherit;
    pointer-events: none;
    z-index: -1;
}

.theme-style-persona .hero-card {
    isolation: isolate;
}

.theme-style-persona .content-card,
.theme-style-persona .post-row {
    transition: transform 0.3s var(--persona-ease);
}

.theme-style-persona .content-card:hover,
.theme-style-persona .post-row:hover {
    transform: translateY(-4px);
}

.theme-style-persona .content-card__meta,
.theme-style-persona .post-row__meta {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    color: var(--muted);
}

.theme-style-persona .card-link {
    font-weight: 700;
}

.theme-style-persona .card-link:hover {
    color: var(--persona-red);
    transform: none;
}

/* tag-like chips get the skewed ink slab with red drop */
.theme-style-persona .pill {
    border-radius: 99px;
    font-weight: 700;
    font-size: 0.72rem;
    padding: 3px 9px;
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: color-mix(in srgb, var(--accent) 60%, white 40%);
}

html[data-theme-scheme="light"] .theme-style-persona .pill {
    color: var(--accent-strong);
}

.theme-style-persona .update-tag-chip,
.theme-style-persona .uc-tag {
    border-radius: 0;
    transform: skewX(-12deg);
}

.theme-style-persona .prose a {
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--accent) 60%, transparent);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.theme-style-persona .prose a:hover {
    color: var(--persona-red);
}

.theme-style-persona .prose blockquote,
.theme-style-persona .block-editor__rich-input blockquote {
    border-left: 4px solid var(--persona-red);
}

.theme-style-persona .prose blockquote p,
.theme-style-persona .block-editor__rich-input blockquote p {
    font-family: var(--font-body);
    font-style: normal;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* comments used a stray 8px radius; align with the card scale */
.theme-style-persona .prose-block-comment,
.theme-style-persona .prose-block-comment-form,
.theme-style-persona .admin-comment-card {
    border-radius: var(--radius-card-sm);
}

.theme-style-persona .prose-block-comment-form input,
.theme-style-persona .prose-block-comment-form textarea {
    border-radius: var(--radius-control);
}

.theme-style-persona .back-to-top-button {
    border-radius: var(--radius-control);
}

.theme-style-persona .site-footer .footer-link-group h2 {
    font-weight: 800;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

/* ───────────── forms + tables ───────────── */

.theme-style-persona .toolbar input,
.theme-style-persona .toolbar select,
.theme-style-persona label input,
.theme-style-persona label textarea,
.theme-style-persona label select,
.theme-style-persona .upload-form input[type="file"] {
    border-radius: var(--radius-control);
    border-color: var(--surface-border-strong);
    transition: border-color 0.2s var(--persona-ease), box-shadow 0.2s var(--persona-ease);
}

.theme-style-persona .toolbar input:focus,
.theme-style-persona .toolbar select:focus,
.theme-style-persona label input:focus,
.theme-style-persona label textarea:focus,
.theme-style-persona label select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

.theme-style-persona .toolbar .primary-button,
.theme-style-persona .toolbar .ghost-button {
    border-radius: 0;
    border: 0;
}

.theme-style-persona .data-table th {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
}

.theme-style-persona .data-table tbody tr {
    transition: background 0.2s var(--persona-ease);
}

.theme-style-persona .data-table tbody tr:hover {
    background: color-mix(in srgb, var(--accent) 5%, transparent);
}

/* ───────────── admin shell ───────────── */

.theme-style-persona .admin-nav a {
    position: relative;
    border-radius: var(--radius-control);
    padding: 8px 12px;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--muted-strong);
}

.theme-style-persona .admin-nav a:hover {
    background: var(--surface-fill-2);
    transform: none;
}

.theme-style-persona .admin-nav a.is-active {
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--text);
    transform: none;
}

.theme-style-persona .admin-nav a.is-active::before {
    content: "";
    position: absolute;
    left: -6px;
    top: 7px;
    bottom: 7px;
    width: 4px;
    background: var(--persona-red);
    transform: skewY(-20deg);
}

.theme-style-persona .admin-nav {
    gap: var(--space-3);
    padding-left: 8px;
}

.theme-style-persona .admin-nav__group {
    gap: 2px;
}

.theme-style-persona .admin-nav__label {
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    margin-top: 8px;
}

.theme-style-persona .admin-subnav__links a {
    border-radius: var(--radius-control);
    padding: 9px 12px;
}

.theme-style-persona .admin-subnav__links a:hover,
.theme-style-persona .admin-subnav__links a:focus-visible,
.theme-style-persona .admin-subnav__links a.is-active {
    transform: none;
}

.theme-style-persona .admin-subnav__links a.is-active {
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.theme-style-persona .admin-sidebar__toggle,
.theme-style-persona .admin-sidebar__collapse,
.theme-style-persona .editor-side__toggle {
    border-radius: var(--radius-control);
}

.theme-style-persona .admin-action-bar {
    border-radius: var(--radius-panel);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 40px rgba(0, 0, 0, 0.3);
}

.theme-style-persona .metric-card strong {
    font-variant-numeric: tabular-nums;
}

.theme-style-persona .scheme-option {
    border-radius: var(--radius-card-sm);
}

.theme-style-persona .flash {
    border-radius: var(--radius-card-sm);
}

/* ───────────── dialogs ───────────── */

.theme-style-persona .message-dialog__card {
    border-radius: var(--radius-panel);
}

/* ───────────── page transition: diagonal red/black wipe ─────────────
 * Timing must stay inside the 520 ms cover/reveal windows used by public.js. */

html[data-theme-style="persona"] .page-transition-layer .page-transition-layer__curtain {
    background: transparent;
    transform: none;
    transition: none;
}

html[data-theme-style="persona"] .page-transition-layer__curtain::before,
html[data-theme-style="persona"] .page-transition-layer__curtain::after {
    content: "";
    position: absolute;
    inset: 0;
    clip-path: polygon(-30% 0, 0% 0, -30% 100%, -60% 100%);
}

html[data-theme-style="persona"] .page-transition-layer__curtain::before {
    background: var(--persona-red-fill);
}

html[data-theme-style="persona"] .page-transition-layer__curtain::after {
    background: var(--persona-ink);
    box-shadow: inset 0 0 0 1px var(--persona-ink);
}

html[data-theme-style="persona"] .page-transition-layer[data-phase="covering"] .page-transition-layer__curtain::before,
html[data-theme-style="persona"] .page-transition-layer[data-phase="covering"] .page-transition-layer__curtain::after,
html[data-theme-style="persona"] .page-transition-layer[data-phase="covered"] .page-transition-layer__curtain::before,
html[data-theme-style="persona"] .page-transition-layer[data-phase="covered"] .page-transition-layer__curtain::after {
    clip-path: polygon(-30% 0, 130% 0, 100% 100%, -60% 100%);
}

html[data-theme-style="persona"] .page-transition-layer[data-phase="covering"] .page-transition-layer__curtain::before {
    transition: clip-path 430ms var(--persona-ease-snap);
}

html[data-theme-style="persona"] .page-transition-layer[data-phase="covering"] .page-transition-layer__curtain::after {
    transition: clip-path 430ms var(--persona-ease-snap) 80ms;
}

html[data-theme-style="persona"] .page-transition-layer[data-phase="revealing"] .page-transition-layer__curtain::before,
html[data-theme-style="persona"] .page-transition-layer[data-phase="revealing"] .page-transition-layer__curtain::after {
    clip-path: polygon(130% 0, 160% 0, 130% 100%, 100% 100%);
}

html[data-theme-style="persona"] .page-transition-layer[data-phase="revealing"] .page-transition-layer__curtain::after {
    transition: clip-path 430ms var(--persona-ease-snap);
}

html[data-theme-style="persona"] .page-transition-layer[data-phase="revealing"] .page-transition-layer__curtain::before {
    transition: clip-path 430ms var(--persona-ease-snap) 80ms;
}

/* ───────────── light scheme adjustments ───────────── */

html[data-theme-style="persona"][data-theme-scheme="light"] .site-nav a::before {
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.18);
}

html[data-theme-style="persona"][data-theme-scheme="light"] .primary-button::before {
    background: var(--persona-ink);
}

html[data-theme-style="persona"][data-theme-scheme="light"] .primary-button:hover,
html[data-theme-style="persona"][data-theme-scheme="light"] .primary-button:focus-visible {
    color: #ffffff;
}

/* ───────────── motion preferences ───────────── */

@media (prefers-reduced-motion: reduce) {
    .theme-style-persona *,
    .theme-style-persona *::before,
    .theme-style-persona *::after {
        transition-duration: 0.001ms !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
    }

    .theme-style-persona .content-card:hover,
    .theme-style-persona .post-row:hover {
        transform: none;
    }
}

@media (max-width: 980px) {
    .theme-style-persona .site-nav a::before {
        inset: 2px 4px;
    }

    .theme-style-persona .site-header {
        padding: var(--space-5);
    }
}