/*-----------------------------------------------------------------------------------

    LearnPress profile — theme design layer

    Restyles the whole /lp-profile/ dashboard: identity header, side navigation,
    statistic tiles, tab filters, orders table and settings forms. CSS-only over
    LearnPress's stock markup, so nothing under learnpress/profile/ is overridden
    and a plugin update cannot regenerate the layout out from under it.

    What it deliberately leaves alone: the course cards. The listings inside the
    Courses / My Courses tabs come from the theme's own
    learnpress/content-course.php (tp-course-item markup), already styled by
    acadia-core's course/course.css — that file is enqueued on this page by
    acadia_learnpress_styles(), and this stylesheet does not touch a single
    tp-course-* selector.

    Accent is --tp-dashboard-secondary, the colour acadia-core already uses for
    the profile's active nav item and statistic numbers, so the new chrome reads
    as the same dashboard rather than a second design.

    Two structural notes:

      - LP floats #profile-sidebar left and .lp-profile-content right. That is
        replaced with a grid on the shared parent, which is what lets the
        sidebar stay sticky while the content column scrolls.

      - acadia-core styles this page through six-class chains
        (.tp-page-content .tp-page-post .learnpress .lp-user-profile …). Every
        rule here is prefixed with #learn-press-profile: one id outranks any
        number of classes, so the overrides land without !important.

    Loaded by: acadia_learnpress_profile_styles() in inc/common/acadia-scripts.php

-----------------------------------------------------------------------------------*/

/*----------------------------------------
    1. Design tokens
----------------------------------------*/
:root {
    --acd-pf-accent: var(--tp-dashboard-secondary, #5169F1);

    /* Derived shades. The flat fallback is declared first so browsers without
       color-mix() drop the second declaration and keep a sane value. */
    --acd-pf-accent-deep: #4353BE;
    --acd-pf-accent-deep: color-mix(in srgb, var(--acd-pf-accent) 78%, #12030A);
    --acd-pf-accent-soft: #F1F3FE;
    --acd-pf-accent-soft: color-mix(in srgb, var(--acd-pf-accent) 8%, #fff);
    --acd-pf-accent-line: #D2D8FB;
    --acd-pf-accent-line: color-mix(in srgb, var(--acd-pf-accent) 26%, #fff);
    --acd-pf-accent-ring: rgba(81, 105, 241, 0.14);
    --acd-pf-accent-ring: color-mix(in srgb, var(--acd-pf-accent) 14%, transparent);

    --acd-pf-ink: var(--tp-heading-2, #031F42);
    --acd-pf-muted: var(--tp-text-body, #57595F);
    --acd-pf-faint: #8A8B8F;

    --acd-pf-surface: #ffffff;
    --acd-pf-wash: #F6F7FB;
    --acd-pf-line: rgba(3, 31, 66, 0.10);
    --acd-pf-line-soft: rgba(3, 31, 66, 0.06);

    --acd-pf-success: #1D9267;
    --acd-pf-warning: #B8770F;
    --acd-pf-danger: #D93F41;

    --acd-pf-radius: 22px;
    --acd-pf-radius-sm: 14px;

    --acd-pf-shadow: 0 1px 2px rgba(3, 31, 66, 0.04), 0 14px 32px -16px rgba(3, 31, 66, 0.16);
    --acd-pf-shadow-lg: 0 2px 4px rgba(3, 31, 66, 0.05), 0 28px 60px -24px rgba(3, 31, 66, 0.24);

    --acd-pf-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

    /* Clearance for the theme's sticky header when the sidebar pins itself. */
    --acd-pf-sticky-top: 110px;

    --acd-pf-font: var(--tp-ff-body, "Outfit", sans-serif);
}

/*----------------------------------------
    2. Shell — sidebar / content grid

    Header and cover span both columns; the nav and the content sit side by
    side underneath. Auto-placement handles the rows correctly here: the header
    spans 1/-1 so the cursor is already at the start of the next row when the
    sidebar claims column 1.
----------------------------------------*/
#learn-press-profile {
    font-family: var(--acd-pf-font);
}

#learn-press-profile > .lp-content-area {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    align-items: start;
    gap: 28px;
    padding-top: 10px;
    padding-bottom: 70px;
}

/* The cover and the header share one grid cell so the header card can sit on
   top of the photo — see section 3. With no cover set LP marks the div
   .lp-hidden (display: none), it never becomes a grid item, and the header has
   the row to itself. */
#learn-press-profile > .lp-content-area > .lp-user-cover-image_background,
#learn-press-profile > .lp-content-area > .wrapper-profile-header {
    grid-row: 1;
    grid-column: 1 / -1;
}

/* z-index on the two columns, because the Settings fly-out has to open over
   the course cards.
   LP already gives the fly-out z-index: 1000, but that only ranks it inside
   whatever stacking context contains it — position: sticky makes the sidebar
   one, so 1000 never competes with anything outside it. The cards are
   .tp-course-item.p-relative: positioned, later in the DOM, and painted on top
   of the earlier positioned sidebar whatever the fly-out claims.
   So the content column is given its own stacking context at z-index 1, which
   also seals in the z-index values course.css uses inside the cards, and the
   sidebar is lifted above it — still well under the theme's sticky header at
   99. */
#learn-press-profile > .lp-content-area > #profile-sidebar {
    position: sticky;
    z-index: 20;
    top: var(--acd-pf-sticky-top);
    float: none;
    grid-column: 1;
    width: 100%;
    margin: 0;
    padding: 14px;
    border: 1px solid var(--acd-pf-line);
    border-radius: var(--acd-pf-radius);
    background: var(--acd-pf-surface);
    box-shadow: var(--acd-pf-shadow);
}

#learn-press-profile > .lp-content-area > #profile-content {
    position: relative;
    z-index: 1;
    float: none;
    grid-column: 2;
    width: 100%;
    margin: 0;
    padding-top: 0;
}

/*----------------------------------------
    3. Identity header
----------------------------------------*/
#learn-press-profile .wrapper-profile-header {
    margin-bottom: 4px;
}

#learn-press-profile .wrapper-profile-header > .lp-profile-content-area {
    position: relative;
    overflow: hidden;
    /* acadia-core forces align-items: center on this element. The bio makes the
       right column much taller than the avatar, so the two have to top-align. */
    align-items: flex-start !important;
    gap: 8px;
    max-width: 100% !important;
    padding: 32px 34px;
    border: 1px solid var(--acd-pf-line);
    border-radius: var(--acd-pf-radius);
    background: var(--acd-pf-surface);
    box-shadow: var(--acd-pf-shadow);
}

/* Soft accent bloom in the top corner — the one piece of decoration on the
   page, and the reason the header reads as a header and not another card. */
#learn-press-profile .wrapper-profile-header > .lp-profile-content-area::before {
    position: absolute;
    top: -170px;
    right: -110px;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--acd-pf-accent-soft) 0%, rgba(255, 255, 255, 0) 70%);
    content: "";
    pointer-events: none;
}

#learn-press-profile .lp-profile-left {
    position: relative;
    z-index: 1;
    min-width: 116px;
    max-width: 116px;
}

#learn-press-profile .lp-profile-left .user-avatar {
    padding: 4px;
    border-radius: 30px;
    background: linear-gradient(140deg, var(--acd-pf-accent), var(--acd-pf-accent-deep));
    box-shadow: 0 16px 30px -16px var(--acd-pf-accent);
}

/* LP pins the avatar to a circle; the squircle is what sets this dashboard
   apart from the stock one, so it needs the id prefix to win. */
#learn-press-profile .lp-profile-left .user-avatar img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    border: 3px solid var(--acd-pf-surface);
    border-radius: 26px;
    object-fit: cover;
}

#learn-press-profile .lp-profile-left .user-avatar .lp-btn-to-edit-avatar {
    top: auto;
    right: -4px;
    bottom: -4px;
    width: 34px;
    height: 34px;
    border: 2px solid var(--acd-pf-surface);
    background-color: var(--acd-pf-accent);
    box-shadow: 0 6px 14px -6px var(--acd-pf-accent);
}

#learn-press-profile .lp-profile-left .user-avatar .lp-btn-to-edit-avatar::before {
    color: #fff;
    font-size: 1rem;
}

#learn-press-profile .lp-profile-right {
    position: relative;
    z-index: 1;
    padding-left: 26px;
    gap: 6px;
}

#learn-press-profile .lp-profile-username {
    color: var(--acd-pf-ink);
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

#learn-press-profile .lp-profile-user-bio {
    margin-top: 6px;
    color: var(--acd-pf-muted);
    font-size: 15px;
    line-height: 1.75;
}

#learn-press-profile .lp-profile-user-bio p {
    margin: 0 0 10px;
}

#learn-press-profile .lp-profile-user-bio p:last-child {
    margin-bottom: 0;
}

#learn-press-profile .lp-user-cover-image_background:not(.lp-hidden)+.wrapper-profile-header .lp-profile-user-bio p {
    color: #e6e6e6;
}

/* --- Cover image mode ---

   When a cover is set, it becomes the header card's background instead of the
   loose banner floating above it. LP renders the cover as a sibling *before*
   .wrapper-profile-header, and CSS cannot move a node, so the two are placed in
   the same grid cell (section 2) and the card is made transparent on top.

   Everything below is gated on the adjacent-sibling selector rather than
   :has() — .lp-hidden is exactly the flag LP toggles when no cover exists, and
   `+` works everywhere. With no cover the card keeps its plain white styling
   untouched. */
#learn-press-profile > .lp-content-area > .lp-user-cover-image_background {
    position: relative;
    z-index: 0;
    overflow: hidden;
    align-self: stretch;
    width: 100%;
    margin: 0;
    border-radius: var(--acd-pf-radius);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: var(--acd-pf-shadow);
}

/* LP prints the photo twice: an inline background-image on the div and an
   <img> inside it. Both are stretched over the same box, so the card is
   covered whichever one the installed version actually fills in. Absolute
   positioning also keeps the img out of the height calculation, which lets the
   header card decide how tall the row is. */
#learn-press-profile .lp-user-cover-image_background > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

/* Scrim, kept light so the photograph still reads. The contrast the body copy
   needs is carried by a text-shadow on the type instead of by darkening the
   whole image — that way a bright photo stays legible without the card turning
   into a black panel. */
#learn-press-profile .lp-user-cover-image_background::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(115deg, rgba(6, 14, 30, 0.6) 0%, rgba(6, 14, 30, 0.42) 55%, rgba(6, 14, 30, 0.26) 100%);
    content: "";
    pointer-events: none;
}

#learn-press-profile .lp-user-cover-image_background .lp-btn-to-edit-cover-image {
    z-index: 3;
    right: 16px;
    bottom: 16px;
    padding: 9px 17px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    background: rgba(6, 14, 30, 0.5);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

#learn-press-profile .lp-user-cover-image_background .lp-btn-to-edit-cover-image:hover {
    background: rgba(6, 14, 30, 0.72);
    color: #fff;
}

/* The card itself: same box, no fill and no outline — the photo underneath is
   the only surface. The border stays in the box model as transparent so the
   card keeps the exact size of the cover behind it. */
#learn-press-profile .lp-user-cover-image_background:not(.lp-hidden) + .wrapper-profile-header > .lp-profile-content-area {
    z-index: 1;
    min-height: 210px;
    padding: 36px 34px;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

/* The accent bloom is what gave the plain white card its depth; over a
   photograph it only muddies the scrim. */
#learn-press-profile .lp-user-cover-image_background:not(.lp-hidden) + .wrapper-profile-header > .lp-profile-content-area::before {
    display: none;
}

#learn-press-profile .lp-user-cover-image_background:not(.lp-hidden) + .wrapper-profile-header .lp-profile-username {
    color: #fff;
    text-shadow: 0 1px 4px rgba(6, 14, 30, 0.6);
}

#learn-press-profile .lp-user-cover-image_background:not(.lp-hidden) + .wrapper-profile-header .lp-profile-user-bio {
    color: #fff;
    text-shadow: 0 1px 4px rgba(6, 14, 30, 0.6);
}

#learn-press-profile .lp-user-cover-image_background:not(.lp-hidden) + .wrapper-profile-header .lp-profile-user-bio a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/*----------------------------------------
    4. Side navigation
----------------------------------------*/
#learn-press-profile .lp-profile-nav-tabs {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#learn-press-profile .lp-profile-nav-tabs > li {
    border: 0;
    border-radius: var(--acd-pf-radius-sm);
    background: transparent;
}

#learn-press-profile .lp-profile-nav-tabs > li > a {
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--acd-pf-radius-sm);
    color: var(--acd-pf-muted);
    font-size: 15px;
    font-weight: 500;
    transition: background-color 0.25s var(--acd-pf-ease), color 0.25s var(--acd-pf-ease);
}

#learn-press-profile .lp-profile-nav-tabs > li > a > i {
    flex: 0 0 auto;
    width: 20px;
    margin-top: 0;
    color: var(--acd-pf-faint);
    font-size: 17px;
    text-align: center;
    transition: color 0.25s var(--acd-pf-ease);
}

#learn-press-profile .lp-profile-nav-tabs > li:not(.active):hover {
    background: transparent;
}

#learn-press-profile .lp-profile-nav-tabs > li:not(.active) > a:hover {
    background: var(--acd-pf-accent-soft);
    color: var(--acd-pf-accent);
}

#learn-press-profile .lp-profile-nav-tabs > li:not(.active) > a:hover > i {
    color: var(--acd-pf-accent);
}

/* The fill moves off the <li> and onto the <a>, so the rounded corners follow
   the link box instead of the full-bleed row LP and acadia-core both paint. */
#learn-press-profile .lp-profile-nav-tabs > li.active {
    background: transparent;
    border-color: transparent;
}

#learn-press-profile .lp-profile-nav-tabs > li.active > a {
    background: linear-gradient(120deg, var(--acd-pf-accent), var(--acd-pf-accent-deep));
    box-shadow: 0 5px 10px -7px var(--acd-pf-accent);
    color: #fff;
    font-weight: 600;
}

#learn-press-profile .lp-profile-nav-tabs > li.active > a > i {
    color: #fff;
}

#learn-press-profile .lp-profile-nav-tabs > li.has-child > a::after {
    right: 14px;
    font-size: 12px;
    opacity: 0.5;
}

/* Fly-out for Settings */
#learn-press-profile .lp-profile-nav-tabs li > ul {
    top: -8px;
    left: calc(100% + 10px);
    min-width: 196px;
    padding: 8px;
    border: 1px solid var(--acd-pf-line);
    border-radius: 18px;
    box-shadow: var(--acd-pf-shadow-lg);
}

#learn-press-profile .lp-profile-nav-tabs li > ul li a {
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 0;
    border-radius: 10px;
    color: var(--acd-pf-muted);
    font-size: 14px;
    transition: background-color 0.25s var(--acd-pf-ease), color 0.25s var(--acd-pf-ease);
}

#learn-press-profile .lp-profile-nav-tabs li > ul li a > i {
    color: var(--acd-pf-faint);
    font-size: 15px;
}

#learn-press-profile .lp-profile-nav-tabs li > ul li a:hover {
    background: var(--acd-pf-accent-soft);
    color: var(--acd-pf-accent);
}

#learn-press-profile .lp-profile-nav-tabs li > ul li a:hover > i {
    color: var(--acd-pf-accent);
}

/* Log out reads as the destructive end of the list. */
#learn-press-profile .lp-profile-nav-tabs > li.logout > a:hover {
    background: rgba(217, 63, 65, 0.08);
    color: var(--acd-pf-danger);
}

#learn-press-profile .lp-profile-nav-tabs > li.logout > a:hover > i {
    color: var(--acd-pf-danger);
}

/*----------------------------------------
    5. Statistic tiles

    LP already tints each icon by metric — teal for total, indigo for published,
    red for pending and so on. That colour coding is kept; only the container
    becomes a card and the chip becomes a squircle.
----------------------------------------*/
#learn-press-profile .learn-press-profile-course__statistic {
    margin-bottom: 34px;
}

#learn-press-profile .dashboard-statistic__row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

#learn-press-profile .dashboard-statistic__row .statistic-box {
    align-items: center;
    flex-wrap: nowrap;
    gap: 16px;
    width: auto;
    padding: 20px 22px;
    border: 1px solid var(--acd-pf-line);
    border-radius: 18px;
    background: var(--acd-pf-surface);
    box-shadow: var(--acd-pf-shadow);
    text-align: left;
    transition: transform 0.3s var(--acd-pf-ease), box-shadow 0.3s var(--acd-pf-ease), border-color 0.3s var(--acd-pf-ease);
}

#learn-press-profile .dashboard-statistic__row .statistic-box:hover {
    border-color: var(--acd-pf-accent-line);
    box-shadow: var(--acd-pf-shadow-lg);
    transform: translateY(-3px);
}

/* --lp-width-icon drives width, height and line-height in LP's own rule. */
#learn-press-profile .statistic-box__icon span {
    --lp-width-icon: 54px;
    border-radius: 16px;
    font-size: 22px;
}

#learn-press-profile .statistic-box__text label {
    margin-bottom: 6px;
    color: var(--acd-pf-muted);
    font-size: 13.5px;
    font-weight: 500;
}

#learn-press-profile .statistic-box__text__number {
    color: var(--acd-pf-ink);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
}

/*----------------------------------------
    6. Tab filters + course builder
----------------------------------------*/
/* Both tab bars get the same separator: the Courses tab pairs the filters with
   the Course Builder button (.learn-press-tabs--with-course-builder), My
   Courses and Quizzes render the filters alone under a plain .learn-press-tabs.
   The rule has to sit on the shared class or only one of them gets the rhythm. */
#learn-press-profile .learn-press-tabs {
    margin-bottom: 26px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--acd-pf-line);
}

#learn-press-profile .learn-press-tabs--with-course-builder {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

/* Segmented control rather than an underlined tab strip — it reads as a filter,
   which is what it is, and it survives sitting next to the builder button. */
#learn-press-profile ul.learn-press-filters {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    column-gap: 4px;
    margin: 0 !important;
    padding: 5px;
    border: 1px solid var(--acd-pf-line);
    border-radius: 999px;
    background: var(--acd-pf-wash);
}

#learn-press-profile ul.learn-press-filters li a {
    padding: 9px 22px;
    border-radius: 999px;
    color: var(--acd-pf-muted);
    font-size: 14.5px;
    font-weight: 600;
    transition: background-color 0.25s var(--acd-pf-ease), color 0.25s var(--acd-pf-ease), box-shadow 0.25s var(--acd-pf-ease);
}

/* LP draws the active state as a 2px bar under the label; the pill replaces it. */
#learn-press-profile ul.learn-press-filters li a::after {
    display: none;
}

#learn-press-profile ul.learn-press-filters li a:hover {
    color: var(--acd-pf-accent);
}

#learn-press-profile ul.learn-press-filters li a.active,
#learn-press-profile ul.learn-press-filters li.active a {
    background: var(--acd-pf-surface);
    box-shadow: 0 1px 2px rgba(3, 31, 66, 0.06), 0 6px 14px -8px rgba(3, 31, 66, 0.2);
    color: var(--acd-pf-accent);
}

#learn-press-profile .learn-press-course-builder-link {
    flex: 0 0 auto;
    margin-bottom: 0;
    padding: 11px 20px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(120deg, var(--acd-pf-accent), var(--acd-pf-accent-deep));
    box-shadow: 0 12px 22px -12px var(--acd-pf-accent);
    color: #fff;
    font-size: 14px;
    transition: transform 0.25s var(--acd-pf-ease), box-shadow 0.25s var(--acd-pf-ease);
}

#learn-press-profile .learn-press-course-builder-link:hover,
#learn-press-profile .learn-press-course-builder-link:focus {
    border: 0;
    background: linear-gradient(120deg, var(--acd-pf-accent), var(--acd-pf-accent-deep));
    box-shadow: 0 16px 28px -12px var(--acd-pf-accent);
    color: #fff;
    transform: translateY(-2px);
}

/*----------------------------------------
    7. Listing area + pagination

    The course cards themselves are acadia-core's; only the space around them
    is touched here.
----------------------------------------*/
#learn-press-profile .lp_profile_course_progress__nav {
    display: flex;
    justify-content: center;
    margin-top: 34px;
}

#learn-press-profile .lp_profile_course_progress__nav .lp-button {
    padding: 14px 34px;
    border: 1.5px solid var(--acd-pf-line);
    border-radius: 999px;
    background: var(--acd-pf-surface);
    color: var(--acd-pf-ink);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.25s var(--acd-pf-ease), color 0.25s var(--acd-pf-ease), background-color 0.25s var(--acd-pf-ease), transform 0.25s var(--acd-pf-ease);
}

#learn-press-profile .lp_profile_course_progress__nav .lp-button:hover {
    border-color: var(--acd-pf-accent);
    background: var(--acd-pf-accent-soft);
    color: var(--acd-pf-accent);
    transform: translateY(-2px);
}

/* Skeleton rows shown while a filter tab loads. */
#learn-press-profile .lp-skeleton-animation {
    margin: 0;
    padding: 0;
    list-style: none;
}

#learn-press-profile .lp-skeleton-animation li {
    border-radius: 10px !important;
    margin-bottom: 12px;
}

/*----------------------------------------
    8. Section headings + orders table
----------------------------------------*/
#learn-press-profile .profile-heading,
#learn-press-profile .lp-profile-content h3 {
    margin: 0 0 22px;
    color: var(--acd-pf-ink);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.015em;
}

#learn-press-profile .profile-orders {
    overflow-x: auto;
}

/* Card shell shared by both dashboard listings: the Orders table
   (.profile-list-table) and the My Courses / Quizzes progress table
   (.lp_profile_course_progress). */
#learn-press-profile .profile-list-table,
#learn-press-profile .lp_profile_course_progress {
    overflow: hidden;
    width: 100%;
    margin: 0;
    border: 1px solid var(--acd-pf-line);
    border-radius: 18px;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--acd-pf-surface);
    box-shadow: var(--acd-pf-shadow);
}

#learn-press-profile .profile-list-table thead,
#learn-press-profile .lp_profile_course_progress thead {
    border: 0;
    background: var(--acd-pf-wash);
}

#learn-press-profile .profile-list-table thead th,
#learn-press-profile .lp_profile_course_progress thead th {
    padding: 15px 22px;
    border: 0;
    border-bottom: 1px solid var(--acd-pf-line);
    background: transparent;
    color: var(--acd-pf-faint);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-align: left;
    text-transform: uppercase;
}

/* Undoes .learnpress table tbody td/th — the 1px grid and white cell fill. */
#learn-press-profile .profile-list-table tbody td,
#learn-press-profile .profile-list-table tfoot td,
#learn-press-profile .lp_profile_course_progress tbody td {
    padding: 17px 22px;
    border: 0;
    border-bottom: 1px solid var(--acd-pf-line-soft);
    background: transparent;
    color: var(--acd-pf-ink);
    font-size: 15px;
    font-weight: 500;
    text-align: left;
    vertical-align: middle;
}

#learn-press-profile .profile-list-table tbody tr,
#learn-press-profile .lp_profile_course_progress tbody tr {
    border: 0;
    transition: background-color 0.25s var(--acd-pf-ease);
}

#learn-press-profile .profile-list-table tbody tr:hover,
#learn-press-profile .lp_profile_course_progress tbody tr:hover {
    background: var(--acd-pf-accent-soft);
}

#learn-press-profile .profile-list-table tbody tr:last-child td,
#learn-press-profile .lp_profile_course_progress tbody tr:last-child td {
    border-bottom: 0;
}

#learn-press-profile .profile-list-table a {
    color: var(--acd-pf-accent);
    font-weight: 600;
}

#learn-press-profile .profile-list-table a:hover {
    color: var(--acd-pf-accent-deep);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- My Courses / Quizzes progress table ---

   LP centres every cell and lets the thumbnail run the full width of a 15%
   column with zero padding, so the image sits flush against the table edge.
   Left alignment and a fixed 16:9 thumbnail put it back in line with the rest
   of the dashboard. */
#learn-press-profile .lp_profile_course_progress__item td,
#learn-press-profile .lp_profile_course_progress__item th {
    text-align: left;
}

#learn-press-profile .lp_profile_course_progress__item td:first-child,
#learn-press-profile .lp_profile_course_progress__item th:first-child {
    width: 130px;
    padding-right: 0;
}

#learn-press-profile .lp_profile_course_progress__item td:first-child {
    padding-top: 14px;
    padding-bottom: 14px;
}

#learn-press-profile .lp_profile_course_progress__item .course-img {
    overflow: hidden;
    width: 106px;
    height: 66px;
    border-radius: 12px;
    background: var(--acd-pf-wash);
}

#learn-press-profile .lp_profile_course_progress__item .course-img img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    transition: transform 0.5s var(--acd-pf-ease);
}

#learn-press-profile .lp_profile_course_progress tbody tr:hover .course-img img {
    transform: scale(1.07);
}

/* Name */
#learn-press-profile .lp_profile_course_progress__item td:nth-child(2) {
    width: auto;
    min-width: 200px;
}

#learn-press-profile .lp_profile_course_progress__item td:nth-child(2) a {
    color: var(--acd-pf-ink);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
    transition: color 0.25s var(--acd-pf-ease);
}

#learn-press-profile .lp_profile_course_progress__item td:nth-child(2) a:hover {
    color: var(--acd-pf-accent);
}

/* Result — a bare "0%" text node with no element to pill, so it carries the
   emphasis in weight and colour instead. */
#learn-press-profile .lp_profile_course_progress__item td:nth-child(3) {
    width: 110px;
    color: var(--acd-pf-accent);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Expiration / end time */
#learn-press-profile .lp_profile_course_progress__item td:nth-child(4),
#learn-press-profile .lp_profile_course_progress__item td:nth-child(5) {
    width: 24%;
}

#learn-press-profile .lp_profile_course_progress .lp-user-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--acd-pf-muted);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

#learn-press-profile .lp_profile_course_progress .lp-user-item::before {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    background-color: var(--acd-pf-faint);
    -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='9'/%3e%3cpolyline points='12 7 12 12 15.5 14'/%3e%3c/svg%3e") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='9'/%3e%3cpolyline points='12 7 12 12 15.5 14'/%3e%3c/svg%3e") no-repeat center / contain;
    content: "";
}

#learn-press-profile .lp_profile_course_progress .end-date-time::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='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='3' y='5' width='18' height='16' rx='2'/%3e%3cpath d='M3 10h18M8 3v4M16 3v4'/%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='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='3' y='5' width='18' height='16' rx='2'/%3e%3cpath d='M3 10h18M8 3v4M16 3v4'/%3e%3c/svg%3e");
}

/* lp-list-table carries min-width: 768px, so the panel holding it has to be
   able to scroll. Scoped with :has() because the sibling tabs reuse this same
   container for the course card grid, where a scroll box would clip the cards'
   hover shadow. */
#learn-press-profile .learn-press-course-tab__filter__content:has(> table.lp_profile_course_progress) {
    overflow-x: auto;
}

/* Order status badges. */
#learn-press-profile .profile-list-orders .lp-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 14px;
    border-radius: 999px;
    background: var(--acd-pf-wash);
    color: var(--acd-pf-muted);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.5;
}

#learn-press-profile .profile-list-orders .lp-label::before {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    content: "";
}

#learn-press-profile .profile-list-orders .label-completed {
    background: rgba(29, 146, 103, 0.10);
    color: var(--acd-pf-success);
}

#learn-press-profile .profile-list-orders .label-processing {
    background: rgba(184, 119, 15, 0.12);
    color: var(--acd-pf-warning);
}

#learn-press-profile .profile-list-orders .label-cancelled,
#learn-press-profile .profile-list-orders .label-failed {
    background: rgba(217, 63, 65, 0.10);
    color: var(--acd-pf-danger);
}

#learn-press-profile .profile-list-table .list-table-nav td {
    background: var(--acd-pf-wash);
    color: var(--acd-pf-muted);
    font-size: 14px;
}

/*----------------------------------------
    9. Settings — sub-tabs and forms

    acadia-core already cards .learn-press-form for the logged-out login box and
    the same class carries the settings screens; this only lays the fields out
    and matches the controls to the rest of the dashboard.
----------------------------------------*/

/* General / Avatar / Cover Image / Password.

   This strip keeps its underline-tab shape — only the colour and the metrics
   change. It uses .learn-press-tabs__nav, not the .learn-press-filters pill
   group the course tabs use, and its active bar is meant to sit *on* the
   container's rule: LP overlaps them with margin-bottom: -1px. So the
   padding-bottom that separates the filter pills from that rule has to come
   back off here, or the bar floats 20px above the line. */
#learn-press-profile #profile-content-settings .learn-press-tabs {
    margin-bottom: 28px;
    padding-bottom: 0;
}

#learn-press-profile .learn-press-tabs__nav {
    column-gap: 32px;
}

#learn-press-profile .learn-press-tabs__item > a {
    padding: 0 0 15px;
    color: var(--acd-pf-muted);
    font-size: 15.5px;
    font-weight: 600;
    transition: color 0.25s var(--acd-pf-ease);
}

#learn-press-profile .learn-press-tabs__item::after {
    height: 2.5px;
    border-radius: 3px 3px 0 0;
}

#learn-press-profile .learn-press-tabs__item.active > a,
#learn-press-profile .learn-press-tabs__item:hover > a {
    color: var(--acd-pf-accent);
}

#learn-press-profile .learn-press-tabs__item.active::after,
#learn-press-profile .learn-press-tabs__item:hover::after {
    background: var(--acd-pf-accent);
}

#learn-press-profile .lp-profile-content .learn-press-form {
    padding: 30px 32px;
    border: 1px solid var(--acd-pf-line);
    border-radius: var(--acd-pf-radius);
    box-shadow: var(--acd-pf-shadow);
}

#learn-press-profile .lp-profile-content .learn-press-form:hover {
    transform: none;
}

/* LP lays this row out as a float grid, and all three parts of it have to be
   dismantled before the CSS grid below can work:

     .form-fields        margin: 0 -15px !important   (gutter bleed)
     .form-field         padding: 0 15px              (gutter)
     .form-field__50     width: 50%; float: left      (@media min-width: 767px)

   The last one is the visible bug: as a grid item, `width: 50%` resolves
   against the grid area — which is already half the form — so a half-width
   field rendered at a quarter of the row. The bleed is declared !important, so
   the reset has to be too. */
#learn-press-profile .lp-profile-content .learn-press-form .form-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 20px;
    margin: 0 !important;
    padding: 0;
    list-style: none;
}

#learn-press-profile .lp-profile-content .learn-press-form .form-field {
    float: none;
    grid-column: span 2;
    width: auto;
    margin: 0;
    padding-right: 0;
    padding-left: 0;
}

@media (min-width: 768px) {
    #learn-press-profile .lp-profile-content .learn-press-form .form-field__50 {
        grid-column: span 1;
    }
}

/* LP italicises both the field labels and the helper text
   (.learn-press-form .form-fields .form-field > label). Italic body UI reads as
   an aside rather than as the name of the field beneath it, so it goes back to
   roman here. */
#learn-press-profile .lp-profile-content .learn-press-form .form-field > label {
    display: block;
    margin-bottom: 8px;
    color: var(--acd-pf-ink);
    font-size: 13.5px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.005em;
}

#learn-press-profile .lp-profile-content .learn-press-form .form-field .required {
    margin-left: 3px;
    color: var(--acd-pf-danger);
}

#learn-press-profile .lp-profile-content .learn-press-form input[type="text"],
#learn-press-profile .lp-profile-content .learn-press-form input[type="email"],
#learn-press-profile .lp-profile-content .learn-press-form input[type="password"],
#learn-press-profile .lp-profile-content .learn-press-form textarea {
    width: 100%;
    padding: 13px 16px;
    border: 1.5px solid var(--acd-pf-line);
    border-radius: var(--acd-pf-radius-sm);
    background: var(--acd-pf-surface);
    box-shadow: none;
    color: var(--acd-pf-ink);
    font-family: inherit;
    font-size: 15px;
    transition: border-color 0.25s var(--acd-pf-ease), box-shadow 0.25s var(--acd-pf-ease);
}

#learn-press-profile .lp-profile-content .learn-press-form input[type="text"]:focus,
#learn-press-profile .lp-profile-content .learn-press-form input[type="email"]:focus,
#learn-press-profile .lp-profile-content .learn-press-form input[type="password"]:focus,
#learn-press-profile .lp-profile-content .learn-press-form textarea:focus {
    border-color: var(--acd-pf-accent);
    box-shadow: 0 0 0 4px var(--acd-pf-accent-ring);
    outline: 0;
}

#learn-press-profile .lp-profile-content .learn-press-form textarea {
    min-height: 148px;
    line-height: 1.7;
    resize: vertical;
}

#learn-press-profile .lp-profile-content .learn-press-form .description {
    margin-top: 8px;
    color: var(--acd-pf-faint);
    font-size: 13px;
    font-style: normal;
    line-height: 1.6;
}

/* The form ends with <p><input type="hidden"></p>, which contributes nothing
   but a paragraph's margin between the last field and the submit button. */
#learn-press-profile .lp-profile-content .learn-press-form > p {
    margin: 0;
}

#learn-press-profile .lp-profile-content .learn-press-form button {
    width: auto;
    margin-top: 8px;
    padding: 14px 34px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(120deg, var(--acd-pf-accent), var(--acd-pf-accent-deep));
    box-shadow: 0 12px 24px -12px var(--acd-pf-accent);
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    transition: transform 0.25s var(--acd-pf-ease), box-shadow 0.25s var(--acd-pf-ease);
}

#learn-press-profile .lp-profile-content .learn-press-form button:hover {
    border: 0;
    background: linear-gradient(120deg, var(--acd-pf-accent), var(--acd-pf-accent-deep));
    box-shadow: 0 16px 30px -12px var(--acd-pf-accent);
    color: #fff;
    transform: translateY(-2px);
}

/* Avatar / Cover Image screens: preview plus a row of secondary buttons
   (Upload, Save, Replace, Remove, Cancel — all .lp-button). Kept as outline
   pills so they read one step below the form's primary submit. */
#learn-press-profile .lp-cover-image-wrapper img,
#learn-press-profile .learnpress_avatar__cropper > img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 16px;
}

#learn-press-profile .lp-upload-button-wrapper,
#learn-press-profile .learnpress_avatar__button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

#learn-press-profile .lp-upload-button-wrapper .lp-button,
#learn-press-profile .learnpress_avatar__button {
    padding: 11px 26px;
    border: 1.5px solid var(--acd-pf-line);
    border-radius: 999px;
    background: var(--acd-pf-surface);
    color: var(--acd-pf-ink);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition: border-color 0.25s var(--acd-pf-ease), color 0.25s var(--acd-pf-ease), background-color 0.25s var(--acd-pf-ease);
}

#learn-press-profile .lp-upload-button-wrapper .lp-button:hover,
#learn-press-profile .learnpress_avatar__button:hover {
    border-color: var(--acd-pf-accent);
    background: var(--acd-pf-accent-soft);
    color: var(--acd-pf-accent);
}

#learn-press-profile .learnpress_avatar__button--remove:hover {
    border-color: var(--acd-pf-danger);
    background: rgba(217, 63, 65, 0.08);
    color: var(--acd-pf-danger);
}

/* Notices raised by the settings screens. */
#learn-press-profile .lp-profile-content .learn-press-message {
    margin: 0 0 22px;
    padding: 16px 20px;
    border: 1px solid var(--acd-pf-line);
    border-left: 4px solid var(--acd-pf-accent);
    border-radius: var(--acd-pf-radius-sm);
    background: var(--acd-pf-surface);
    box-shadow: var(--acd-pf-shadow);
    color: var(--acd-pf-ink);
    font-size: 15px;
}

#learn-press-profile .lp-profile-content .learn-press-message.success {
    border-left-color: var(--acd-pf-success);
}

#learn-press-profile .lp-profile-content .learn-press-message.error {
    border-left-color: var(--acd-pf-danger);
}

/*----------------------------------------
    10. Responsive
----------------------------------------*/
@media (max-width: 1199px) {
    #learn-press-profile > .lp-content-area {
        grid-template-columns: 250px minmax(0, 1fr);
        gap: 22px;
    }

    #learn-press-profile .dashboard-statistic__row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Sidebar unpins and becomes a horizontal rail above the content. */
@media (max-width: 991px) {
    #learn-press-profile > .lp-content-area {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
        padding-bottom: 56px;
    }

    #learn-press-profile > .lp-content-area > #profile-sidebar,
    #learn-press-profile > .lp-content-area > #profile-content {
        grid-column: auto;
    }

    /* Unpinned but still relative — static would drop the stacking context and
       put the Settings fly-out back underneath the course cards. */
    #learn-press-profile > .lp-content-area > #profile-sidebar {
        position: relative;
        top: auto;
        padding: 10px;
        border-radius: 18px;
    }

    #learn-press-profile .lp-profile-nav-tabs {
        flex-direction: row;
        overflow-x: auto;
        scrollbar-width: none;
    }

    #learn-press-profile .lp-profile-nav-tabs::-webkit-scrollbar {
        display: none;
    }

    #learn-press-profile .lp-profile-nav-tabs > li {
        flex: 0 0 auto;
    }

    #learn-press-profile .lp-profile-nav-tabs > li > a {
        white-space: nowrap;
    }

    #learn-press-profile .lp-profile-nav-tabs > li.has-child > a {
        padding-right: 32px;
    }

    /* The fly-out cannot open sideways out of a horizontal rail. */
    #learn-press-profile .lp-profile-nav-tabs li > ul {
        top: calc(100% + 8px);
        left: 0;
    }
}

@media (max-width: 767px) {
    #learn-press-profile .wrapper-profile-header > .lp-profile-content-area {
        flex-direction: column;
        padding: 26px 22px;
    }

    /* Cover mode sets its own padding at a higher specificity, so the phone
       value has to match that weight to win. */
    #learn-press-profile .lp-user-cover-image_background:not(.lp-hidden) + .wrapper-profile-header > .lp-profile-content-area {
        min-height: 0;
        padding: 26px 22px;
    }

    #learn-press-profile .lp-profile-left {
        min-width: 92px;
        max-width: 92px;
    }

    #learn-press-profile .lp-profile-right {
        padding-left: 0;
    }

    #learn-press-profile .learn-press-tabs--with-course-builder {
        flex-direction: column;
        align-items: stretch;
    }

    #learn-press-profile ul.learn-press-filters {
        justify-content: center;
    }

    #learn-press-profile .learn-press-course-builder-link {
        width: 100%;
        margin: 0;
    }

    #learn-press-profile .lp-profile-content .learn-press-form {
        padding: 24px 20px;
    }
}

@media (max-width: 575px) {
    #learn-press-profile .dashboard-statistic__row {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    #learn-press-profile .dashboard-statistic__row .statistic-box {
        padding: 16px 18px;
    }

    #learn-press-profile .statistic-box__icon span {
        --lp-width-icon: 46px;
        font-size: 19px;
    }

    #learn-press-profile .statistic-box__text__number {
        font-size: 24px;
    }

    #learn-press-profile ul.learn-press-filters li a {
        padding: 8px 16px;
        font-size: 14px;
    }

    /* LP drops the thumbnail column below 768px, so the rows only need to be
       tightened up. */
    #learn-press-profile .profile-list-table thead th,
    #learn-press-profile .lp_profile_course_progress thead th {
        padding: 13px 16px;
    }

    #learn-press-profile .profile-list-table tbody td,
    #learn-press-profile .lp_profile_course_progress tbody td {
        padding: 14px 16px;
        font-size: 14px;
    }
}

/*----------------------------------------
    11. Motion preferences
----------------------------------------*/
@media (prefers-reduced-motion: reduce) {
    #learn-press-profile *,
    #learn-press-profile *::before,
    #learn-press-profile *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }

    #learn-press-profile .dashboard-statistic__row .statistic-box:hover,
    #learn-press-profile .lp_profile_course_progress__nav .lp-button:hover,
    #learn-press-profile .learn-press-course-builder-link:hover,
    #learn-press-profile .lp-profile-content .learn-press-form button:hover {
        transform: none;
    }
}