/**
 * AI-Persona-Lab — Soft UI theme layer on top of Tabler (Bootstrap 5).
 * ---------------------------------------------------------------------------
 * Re-skins the existing Tabler markup to the "Soft UI" design system:
 * cool light palette, the single magenta accent #cb0c9f, layered "soft"
 * shadows, generous 2xl radii, Open Sans typography and gradient accents.
 *
 * Loaded AFTER the Tabler stylesheet (see layouts/main.php and auth/login.php)
 * so these rules win. No build step — everything is token-driven CSS.
 * ========================================================================= */

/* ------------------------------------------------------------------ *
 * 1. Design tokens
 * ------------------------------------------------------------------ */
:root {
    /* Core palette ------------------------------------------------- */
    --pl-bg:            #f8f9fa;
    --pl-surface:       #ffffff;
    --pl-ink:           #344767; /* primary text / headings */
    --pl-ink-muted:     #67748e; /* captions, secondary text */
    --pl-ink-soft:      #8392ab; /* tertiary / disabled-ish */
    --pl-border:        #dee2e6;
    --pl-border-input:  #d2d6da;

    /* Single magenta accent (CTAs, links, focus, active) ---------- */
    --pl-accent:        #cb0c9f;
    --pl-accent-rgb:    203, 12, 159;
    --pl-accent-hover:  #b00a8a;
    --pl-accent-active: #980977;
    --pl-accent-soft:   #fbe6f5; /* tinted surface for badges/avatars */
    --pl-accent-ink:    #cb0c9f; /* readable accent text on soft surface */

    /* Signature Soft UI gradients (310deg) ------------------------ */
    --pl-grad-primary:   linear-gradient(310deg, #7928ca 0%, #ff0080 100%);
    --pl-grad-secondary: linear-gradient(310deg, #627594 0%, #a8b8d8 100%);
    --pl-grad-info:      linear-gradient(310deg, #2152ff 0%, #21d4fd 100%);
    --pl-grad-success:   linear-gradient(310deg, #17ad37 0%, #98ec2d 100%);
    --pl-grad-warning:   linear-gradient(310deg, #fb8c00 0%, #fbcf33 100%);
    --pl-grad-danger:    linear-gradient(310deg, #ea0606 0%, #ff667c 100%);
    --pl-grad-dark:      linear-gradient(310deg, #141727 0%, #3a416f 100%);
    --pl-grad-light:     linear-gradient(310deg, #ced4da 0%, #ebeff4 100%);

    /* Layered "soft" shadows -------------------------------------- */
    --pl-shadow-xs:   0 1px 2px rgba(20, 20, 20, .08);
    --pl-shadow-sm:   0 .25rem .375rem -.0625rem rgba(20, 20, 20, .12), 0 .125rem .25rem -.0625rem rgba(20, 20, 20, .07);
    --pl-shadow:      0 .25rem .5rem -.125rem rgba(20, 20, 20, .12), 0 .125rem .25rem -.0625rem rgba(20, 20, 20, .07);
    --pl-shadow-lg:   0 20px 27px 0 rgba(0, 0, 0, .05);
    --pl-shadow-xl:   0 .3125rem .625rem 0 rgba(0, 0, 0, .12);
    --pl-shadow-float:0 8px 26px -4px rgba(20, 20, 20, .15), 0 8px 9px -5px rgba(20, 20, 20, .06);
    --pl-shadow-btn:  0 4px 7px -1px rgba(0, 0, 0, .11), 0 2px 4px -1px rgba(0, 0, 0, .07);

    /* Radii -------------------------------------------------------- */
    --pl-radius-sm:  .5rem;
    --pl-radius:     .75rem;
    --pl-radius-lg:  1rem;     /* rounded-2xl — default card radius   */
    --pl-radius-xl:  1.5rem;
    --pl-radius-pill: 50rem;

    /* Map onto Tabler / Bootstrap variables ----------------------- */
    --tblr-font-sans-serif: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --tblr-font-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    --tblr-body-font-family: var(--tblr-font-sans-serif);
    --tblr-primary: var(--pl-accent);
    --tblr-primary-rgb: var(--pl-accent-rgb);
    --tblr-link-color: var(--pl-accent);
    --tblr-link-hover-color: var(--pl-accent-hover);
    --tblr-body-bg: var(--pl-bg);
    --tblr-body-color: var(--pl-ink);
    --tblr-secondary-color: var(--pl-ink-muted);
    --tblr-border-color: var(--pl-border);
    --tblr-border-color-translucent: var(--pl-border);
    --tblr-border-radius: var(--pl-radius-sm);
    --tblr-border-radius-sm: var(--pl-radius-sm);
    --tblr-border-radius-lg: var(--pl-radius-lg);
    --tblr-box-shadow-card: var(--pl-shadow-lg);
    --tblr-box-shadow: var(--pl-shadow-sm);
    --tblr-box-shadow-sm: var(--pl-shadow-xs);
}

/* ------------------------------------------------------------------ *
 * 2. Base typography & surfaces
 * ------------------------------------------------------------------ */
html { scroll-behavior: smooth; }

body {
    font-family: var(--tblr-font-sans-serif);
    background-color: var(--pl-bg);
    color: var(--pl-ink);
    font-size: .875rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.page-title, .card-title {
    color: var(--pl-ink);
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.25;
}
.page-title { font-weight: 700; }
.display-1, .display-2, .display-3, .display-4 { letter-spacing: -.025em; font-weight: 700; }

p { text-wrap: pretty; }
.card-title + .text-secondary, .empty-title { text-wrap: balance; }

.text-secondary, .text-muted { color: var(--pl-ink-muted) !important; }

/* Soft UI sub-labels — small, slightly tracked, muted. */
.subheader {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pl-ink-soft);
}
.page-pretitle .breadcrumb { text-transform: none; font-weight: 500; letter-spacing: 0; }
.page-pretitle { color: var(--pl-ink-soft); }

/* Data-heavy numbers read better with tabular figures. */
.card .h1, .card .h2, .card .h3, .badge, .progress-bar, td .h1, .pl-stat-cell {
    font-variant-numeric: tabular-nums;
}

a { color: var(--pl-accent); text-decoration: none; }
a:hover { color: var(--pl-accent-hover); }
.link-secondary { color: var(--pl-ink-muted) !important; }
.link-secondary:hover { color: var(--pl-ink) !important; }

/* ------------------------------------------------------------------ *
 * 3. Accent recolor (Bootstrap 5.3 component-local variables)
 * ------------------------------------------------------------------ */
.text-primary { color: var(--pl-accent) !important; }
.bg-primary { background-color: var(--pl-accent) !important; }
.border-primary { border-color: var(--pl-accent) !important; }
.bg-primary-lt {
    background-color: var(--pl-accent-soft) !important;
    color: var(--pl-accent-ink) !important;
}
.badge.bg-primary-lt, .text-primary.bg-primary-lt { color: var(--pl-accent-ink) !important; }
.page-link { color: var(--pl-accent); }
.page-item.active .page-link {
    background-color: var(--pl-accent);
    border-color: var(--pl-accent);
}

/* ------------------------------------------------------------------ *
 * 4. Buttons — Soft UI: pill-ish radius, uppercase bold, soft shadow
 * ------------------------------------------------------------------ */
.btn {
    --tblr-btn-border-radius: var(--pl-radius-sm);
    border-radius: var(--pl-radius-sm);
    font-weight: 700;
    font-size: .75rem;
    letter-spacing: .025em;
    text-transform: uppercase;
    padding: .625rem 1.25rem;
    box-shadow: var(--pl-shadow-btn);
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease,
                border-color .15s ease, color .15s ease, opacity .15s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--pl-shadow); }
.btn:active { transform: translateY(0) scale(.99); }
.btn-sm { padding: .4rem .85rem; font-size: .6875rem; }
.btn-lg { padding: .8rem 1.6rem; font-size: .8125rem; }
.btn .ti { font-size: 1.05em; }

/* Filled gradient variants (Soft UI signature). */
.btn-primary {
    border: 0;
    color: #fff;
    background-image: var(--pl-grad-primary);
    background-color: var(--pl-accent);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    color: #fff;
    background-image: var(--pl-grad-primary);
    opacity: .92;
}
.btn-secondary { border: 0; color: #fff; background-image: var(--pl-grad-secondary); }
.btn-info     { border: 0; color: #fff; background-image: var(--pl-grad-info); }
.btn-success  { border: 0; color: #fff; background-image: var(--pl-grad-success); }
.btn-warning  { border: 0; color: #fff; background-image: var(--pl-grad-warning); }
.btn-danger   { border: 0; color: #fff; background-image: var(--pl-grad-danger); }
.btn-dark     { border: 0; color: #fff; background-image: var(--pl-grad-dark); }
.btn-secondary:hover, .btn-info:hover, .btn-success:hover,
.btn-warning:hover, .btn-danger:hover, .btn-dark:hover { color: #fff; opacity: .92; }

/* Outline + ghost variants. */
.btn-outline-primary {
    --tblr-btn-color: var(--pl-accent);
    --tblr-btn-border-color: var(--pl-accent);
    --tblr-btn-hover-bg: var(--pl-accent);
    --tblr-btn-hover-border-color: var(--pl-accent);
    --tblr-btn-active-bg: var(--pl-accent-hover);
    --tblr-btn-active-border-color: var(--pl-accent-hover);
    box-shadow: none;
}
.btn-outline-primary:hover { color: #fff; }
.btn-ghost-secondary, .btn-link { box-shadow: none; text-transform: none; }
.btn-link { padding-inline: .25rem; }

/* Soft-tinted "light" buttons used as muted CTAs. */
.btn-secondary-lt, .btn.bg-secondary-lt {
    background-color: #eef0f3;
    color: var(--pl-ink-muted);
    border: 0;
    box-shadow: none;
}
.btn-secondary-lt:hover { background-color: #e4e7ec; color: var(--pl-ink); }

.btn-icon { box-shadow: var(--pl-shadow-xs); }
.btn-list { gap: .5rem; }

/* ------------------------------------------------------------------ *
 * 5. Forms & inputs
 * ------------------------------------------------------------------ */
.form-label {
    color: var(--pl-ink);
    font-weight: 600;
    font-size: .8125rem;
    margin-bottom: .375rem;
}
.form-hint, .form-text { color: var(--pl-ink-muted); }

.form-control, .form-select {
    border: 1px solid var(--pl-border-input);
    border-radius: var(--pl-radius-sm);
    color: var(--pl-ink);
    padding: .5rem .75rem;
    background-color: var(--pl-surface);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control::placeholder { color: var(--pl-ink-soft); }
.form-control:hover, .form-select:hover { border-color: #c4c9d0; }
.form-control:focus, .form-select:focus {
    border-color: var(--pl-accent);
    box-shadow: 0 0 0 2px rgba(var(--pl-accent-rgb), .25);
    outline: none;
}
.input-group-text {
    background-color: #f1f3f5;
    border: 1px solid var(--pl-border-input);
    color: var(--pl-ink-muted);
    border-radius: var(--pl-radius-sm);
}

/* Checks, switches & radios pick up the accent. */
.form-check-input { border-color: var(--pl-border-input); }
.form-check-input:checked {
    background-color: var(--pl-accent);
    border-color: var(--pl-accent);
}
.form-check-input:focus {
    border-color: var(--pl-accent);
    box-shadow: 0 0 0 2px rgba(var(--pl-accent-rgb), .25);
}
.form-select { background-position: right .75rem center; }

/* ------------------------------------------------------------------ *
 * 6. Cards & surfaces — soft shadow, 2xl radius, hairline border
 * ------------------------------------------------------------------ */
.card {
    background-color: var(--pl-surface);
    border: 0;
    border-radius: var(--pl-radius-lg);
    box-shadow: var(--pl-shadow-lg);
    transition: box-shadow .2s ease, transform .2s ease;
}
.card-sm { border-radius: var(--pl-radius); }
.card-md, .card-lg { border-radius: var(--pl-radius-lg); }
.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--pl-border);
    padding: 1.25rem 1.5rem;
    min-height: auto;
}
.card-header .card-title { margin-bottom: 0; }
.card-body { padding: 1.5rem; }
.card-footer {
    background-color: transparent;
    border-top: 1px solid var(--pl-border);
    padding: 1.25rem 1.5rem;
}
.card .btn, .card .form-control, .card .form-select, .card .badge { border-radius: var(--pl-radius-sm); }
.card .btn.badge { border-radius: var(--pl-radius-pill); }

/* Lift only interactive cards / rows. */
a > .card, a.card, .card-link-hover { cursor: pointer; }
a > .card:hover, a.card:hover, .card-link-hover:hover {
    box-shadow: var(--pl-shadow-float);
    transform: translateY(-3px);
}
a { /* keep card links from inheriting underline color quirks */ }
a:has(> .card) { display: block; color: inherit; }

/* ------------------------------------------------------------------ *
 * 7. Navbar — clean white sticky bar with soft shadow & pill links
 * ------------------------------------------------------------------ */
.navbar {
    background-color: var(--pl-surface);
}
.pl-navbar-shell {
    box-shadow: var(--pl-shadow-sm);
    border-bottom: 0;
    padding-block: .75rem;
}
.navbar-brand a, .navbar-brand {
    color: var(--pl-ink);
    font-weight: 700;
    letter-spacing: -.01em;
}
.navbar .nav-link {
    color: var(--pl-ink-muted);
    font-weight: 600;
    border-radius: var(--pl-radius-sm);
    padding: .5rem .75rem;
    transition: color .15s ease, background-color .15s ease;
}
.navbar .nav-link:hover { color: var(--pl-ink); background-color: #f1f3f5; }
.navbar .nav-item.active > .nav-link,
.navbar .nav-item.active > .nav-link .nav-link-title {
    color: var(--pl-accent);
    font-weight: 700;
}
.navbar .nav-item.active > .nav-link { background-color: var(--pl-accent-soft); }
.pl-navbar-user { min-width: 0; flex-wrap: wrap; justify-content: flex-end; }
.pl-navbar-user-name { max-width: 14rem; }
.pl-navbar-user-name > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-navbar-user .dropdown-menu { min-width: 13rem; }
@media (max-width: 575.98px) {
    .pl-navbar-user-name { display: none; }
}

/* ------------------------------------------------------------------ *
 * 8. Badges, status, pills
 * ------------------------------------------------------------------ */
.badge {
    border-radius: var(--pl-radius-pill);
    font-weight: 700;
    font-size: .65rem;
    letter-spacing: .02em;
    padding: .35em .7em;
    text-transform: uppercase;
}
.badge.bg-blue-lt   { background-color: #e4ecfb !important; color: #2152ff !important; }
.badge.bg-green-lt  { background-color: #e3f6e7 !important; color: #1aae3f !important; }
.badge.bg-yellow-lt { background-color: #fdf3dc !important; color: #b9770a !important; }
.badge.bg-orange-lt { background-color: #fdeede !important; color: #c2570c !important; }
.badge.bg-red-lt    { background-color: #fbe3e4 !important; color: #ea0606 !important; }
.badge.bg-secondary-lt { background-color: #eef0f3 !important; color: var(--pl-ink-muted) !important; }
.status { border-radius: var(--pl-radius-pill); font-weight: 600; }

/* ------------------------------------------------------------------ *
 * 9. Alerts — soft-tinted with a colored accent edge (legible at length)
 * ------------------------------------------------------------------ */
.alert {
    border: 0;
    border-left: .25rem solid var(--pl-ink-soft);
    border-radius: var(--pl-radius);
    box-shadow: var(--pl-shadow-xs);
    padding: 1rem 1.25rem;
}
.alert .alert-title { font-weight: 700; }
.alert-success { background-color: #e9f7ec; color: #157f2f; border-left-color: #17ad37; }
.alert-info    { background-color: #e8eefe; color: #1b46c2; border-left-color: #2152ff; }
.alert-warning { background-color: #fdf2dd; color: #a9690a; border-left-color: #fb8c00; }
.alert-danger  { background-color: #fce8e9; color: #c01616; border-left-color: #ea0606; }
.alert-secondary { background-color: #eef0f3; color: var(--pl-ink-muted); border-left-color: var(--pl-ink-soft); }
.alert-success .alert-icon, .alert-success .ti { color: #17ad37; }
.alert-info .alert-icon, .alert-info .ti { color: #2152ff; }
.alert-warning .alert-icon, .alert-warning .ti { color: #fb8c00; }
.alert-danger .alert-icon, .alert-danger .ti { color: #ea0606; }
.alert a { color: inherit; text-decoration: underline; font-weight: 600; }

/* ------------------------------------------------------------------ *
 * 10. Progress bars
 * ------------------------------------------------------------------ */
.progress {
    background-color: #e9ecef;
    border-radius: var(--pl-radius-pill);
    height: .5rem;
    box-shadow: inset 0 0 .0625rem rgba(0, 0, 0, .06);
}
.progress-sm { height: .375rem; }
.progress-bar {
    background-color: var(--pl-accent);
    background-image: var(--pl-grad-primary);
    border-radius: var(--pl-radius-pill);
}

/* ------------------------------------------------------------------ *
 * 11. Tables
 * ------------------------------------------------------------------ */
.table { color: var(--pl-ink); --tblr-table-border-color: var(--pl-border); }
.table > thead th, .table > thead td {
    color: var(--pl-ink-soft);
    text-transform: uppercase;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--pl-border);
    padding: .75rem 1rem;
}
.table > tbody td { padding: .85rem 1rem; vertical-align: middle; border-color: var(--pl-border); }
.table-vcenter td, .table-vcenter th { vertical-align: middle; }

/* ------------------------------------------------------------------ *
 * 12. List groups, dropdowns, modals, offcanvas
 * ------------------------------------------------------------------ */
.list-group { border-radius: var(--pl-radius-lg); }
.list-group-item { border-color: var(--pl-border); background-color: transparent; }
.list-group-item-action { transition: background-color .15s ease, color .15s ease; }
.list-group-item-action:hover { background-color: #f7eef5; }

.dropdown-menu {
    border: 0;
    border-radius: var(--pl-radius);
    box-shadow: var(--pl-shadow-float);
    padding: .5rem;
}
.dropdown-item { border-radius: var(--pl-radius-sm); padding: .5rem .75rem; font-weight: 500; }
.dropdown-item:hover { background-color: #f1f3f5; }
.dropdown-item.active, .dropdown-item:active {
    background-color: var(--pl-accent-soft);
    color: var(--pl-accent-ink);
}
.dropdown-header { color: var(--pl-ink-soft); font-weight: 700; text-transform: uppercase; font-size: .65rem; letter-spacing: .04em; }

.modal-content { border: 0; border-radius: var(--pl-radius-lg); box-shadow: var(--pl-shadow-float); }
.modal-header, .modal-footer { border-color: var(--pl-border); }

/* ------------------------------------------------------------------ *
 * 13. Avatars & gradient icon tiles (Soft UI signature element)
 * ------------------------------------------------------------------ */
.avatar {
    border-radius: var(--pl-radius);
    font-weight: 600;
    color: var(--pl-ink);
}
.avatar.bg-primary, .avatar.bg-primary.text-white {
    background-image: var(--pl-grad-primary) !important;
    background-color: var(--pl-accent) !important;
    color: #fff !important;
    box-shadow: var(--pl-shadow-btn);
}
.avatar.bg-primary-lt { background-color: var(--pl-accent-soft) !important; color: var(--pl-accent-ink) !important; }

/* Reusable gradient tile: <span class="pl-tile pl-tile--info"><i class="ti …"></i></span> */
.pl-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--pl-radius);
    color: #fff;
    font-size: 1.25rem;
    background-image: var(--pl-grad-primary);
    box-shadow: var(--pl-shadow-btn);
    flex: none;
}
.pl-tile .ti, .pl-tile .alert-icon { color: #fff; }
.pl-tile-sm { width: 2.25rem; height: 2.25rem; font-size: 1rem; border-radius: var(--pl-radius-sm); }
.pl-tile-lg { width: 4rem; height: 4rem; font-size: 1.6rem; border-radius: var(--pl-radius-lg); }
.pl-tile--primary   { background-image: var(--pl-grad-primary); }
.pl-tile--secondary { background-image: var(--pl-grad-secondary); }
.pl-tile--info      { background-image: var(--pl-grad-info); }
.pl-tile--success   { background-image: var(--pl-grad-success); }
.pl-tile--warning   { background-image: var(--pl-grad-warning); }
.pl-tile--danger    { background-image: var(--pl-grad-danger); }
.pl-tile--dark      { background-image: var(--pl-grad-dark); }

/* ------------------------------------------------------------------ *
 * 14. App-specific components
 * ------------------------------------------------------------------ */
/* Dashboard stat strip — one panel, optically divided into cells. */
.pl-stat-strip .pl-stat-cell { position: relative; }
.pl-stat-strip .pl-stat-cell .h1 { letter-spacing: -.02em; }
@media (min-width: 992px) {
    .pl-stat-strip .pl-stat-cell + .pl-stat-cell::before {
        content: "";
        position: absolute;
        top: 1.1rem; bottom: 1.1rem; left: 0;
        border-left: 1px solid var(--pl-border);
    }
}

/* Discussion transcript message cards. */
.message-card { border-left: 4px solid var(--pl-border); border-radius: var(--pl-radius); }
.message-card.agent { border-left-color: var(--pl-accent); }
.message-card.moderator { border-left-color: #17ad37; }
.message-card.round_summary, .message-card.final_summary {
    border-left: 0;
    border-bottom: 4px solid var(--pl-accent);
}

/* Markdown editor / viewer. */
.markdown-editor {
    min-height: 520px;
    font-family: var(--tblr-font-monospace);
    line-height: 1.55;
    border-radius: var(--pl-radius);
}
.markdown-view {
    white-space: pre-wrap;
    font-family: var(--tblr-font-monospace);
    background: #f8f9fa;
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius);
    padding: 1.25rem;
    overflow: auto;
}

/* Settings side-nav. */
.settings-nav .list-group-item { border-left: 0; border-right: 0; }
.settings-nav .list-group-item:first-child { border-top: 0; }
.settings-nav .list-group-item:last-child { border-bottom: 0; }
.settings-nav .list-group-item.active {
    background: var(--pl-accent-soft);
    color: var(--pl-accent-ink);
    border-color: var(--pl-border);
    font-weight: 600;
}

/* Discussion wizard — selected personas panel. */
.discussion-context-card .card-footer { background: #f8f9fa; }
.discussion-copy-block { margin-bottom: 1.5rem; }
.discussion-copy-block p { margin: 0; line-height: 1.55; }
.selected-persona-row .flex-fill { min-width: 0; }
.selected-personas-panel {
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-lg);
    overflow: hidden;
    background: var(--pl-surface);
}
.selected-personas-panel-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--pl-border);
}
.selected-personas-panel-footer { padding: 1rem 1.25rem; border-top: 1px solid var(--pl-border); }
.selected-persona-row {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center; gap: .75rem; padding: 1rem 1.25rem;
}
.selected-persona-control, .selected-persona-temperature { min-width: 0; }
@media (max-width: 767.98px) {
    .selected-persona-row { grid-template-columns: auto minmax(0, 1fr) auto; }
    .selected-persona-control, .selected-persona-temperature { grid-column: 1 / -1; }
}

/* Steps (guided path). */
.steps .step-item.active:before, .steps .step-item.active:after { background-color: var(--pl-accent); }
.steps .step-item:before { box-shadow: 0 0 0 .25rem var(--pl-accent-soft); }

/* Empty states. */
.empty-icon { color: var(--pl-ink-soft); }
.empty-title { color: var(--pl-ink); font-weight: 700; }
.empty-subtitle { color: var(--pl-ink-muted); }

/* Discussion progress overlay (injected by layouts/main.php JS). */
.discussion-progress-backdrop {
    position: fixed; inset: 0; z-index: 1080;
    display: flex; align-items: center; justify-content: center;
    padding: 1rem; background: rgba(52, 71, 103, .42);
}
.discussion-progress-dialog { width: min(36rem, 100%); box-shadow: var(--pl-shadow-float); }

pre { white-space: pre-wrap; }

/* ------------------------------------------------------------------ *
 * 15. Auth / login hero
 * ------------------------------------------------------------------ */
.pl-auth-body { background-color: var(--pl-bg); }
.pl-auth-hero {
    background-image: var(--pl-grad-primary);
    color: #fff;
    border-radius: var(--pl-radius-lg);
    box-shadow: var(--pl-shadow-float);
}
.pl-auth-hero .pl-tile { background: rgba(255, 255, 255, .18); box-shadow: none; }

/* ------------------------------------------------------------------ *
 * 16. Interaction — focus rings, motion preferences
 * ------------------------------------------------------------------ */
:focus-visible {
    outline: 2px solid var(--pl-accent);
    outline-offset: 2px;
}
.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 .2rem rgba(var(--pl-accent-rgb), .35);
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
}