/* =========================================================
   BASE
   ========================================================= */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #f5f6fa;
    color: #222;
}

a {
    color: inherit;
    text-decoration: none;
}

/* Inline text links (non-CTA) */
.link-inline {
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

.link-inline:hover,
.link-inline:focus-visible {
    text-decoration-style: solid;
}

p {
    line-height: 1.7;
}

/* Layout helper */

.container {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 16px;
}

/* Tracking helpers */

.im-meta-pixel {
    display: none;
}

/* =========================================================
   HEADER + NAVIGATION
   ========================================================= */

.site-header {
    background: #111827;
    color: #f9fafb;
    padding: 12px 0;
    border-bottom: 1px solid #1f2937;
}

.site-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

/* Logo structure */

.logo-link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
}

.logo-img {
    width: 32px;
    height: 32px;
}

.logo-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.logo-name {
    font-weight: 600;
    font-size: 1.1rem;
}

.logo-tagline {
    font-size: 0.8rem;
    opacity: 0.7;
}

/* Main navigation */

.main-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.nav-link {
    position: relative;
    font-size: 0.95rem;
    padding-bottom: 2px;
}

.nav-logout {
    display: inline;
}

.nav-link-button {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.nav-link--active {
    font-weight: 600;
}

.nav-link--active::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
}

/* Language switcher */

.lang-switcher {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
}

.lang-link {
    opacity: 0.7;
}

.lang-link:hover {
    opacity: 1;
}

.lang-current {
    font-weight: 600;
}

/* Responsive header */

@media (max-width: 768px) {
    .site-header-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .main-nav {
        width: 100%;
        gap: 12px;
    }

    .lang-switcher {
        align-self: flex-end;
    }
}

/* =========================================================
   CLIENT ZONE — SECONDARY HEADER (WORKSPACE NAV)
   ========================================================= */

.clientzone-subnav {
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
}

.clientzone-subnav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    /* Keep the global .container horizontal padding consistent with the primary header.
       Use vertical-only padding here so we don't overwrite container side padding. */
    padding-top: 10px;
    padding-bottom: 10px;
}

.clientzone-subnav__left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.clientzone-subnav__title {
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.clientzone-subnav__nav {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.clientzone-subnav__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    text-decoration: none;
    color: #111827;
    background: transparent;
    border: 1px solid transparent;
    font-size: 0.92rem;
    line-height: 1.1;
}

.clientzone-subnav__link:hover,
.clientzone-subnav__link:focus-visible {
    background: #f3f4f6;
    border-color: #e5e7eb;
    color: #000000;
}

.clientzone-subnav__link--active:hover,
.clientzone-subnav__link--active:focus-visible {
    background: #f3f4f6;
    border-color: #e5e7eb;
    color: #000000;
}

.clientzone-subnav__link--active {
    background: #111827;
    border-color: #111827;
    color: #f9fafb;
    font-weight: 600;
}

.clientzone-subnav__right {
    min-width: 0;
}

.clientzone-subnav__search {
    display: flex;
    align-items: center;
    gap: 8px;
}

.clientzone-subnav__search-input {
    width: min(360px, 42vw);
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 7px 10px;
    line-height: 1.2;
}

.clientzone-subnav__search-btn {
    padding: 7px 12px;
    font-size: 0.92rem;
    line-height: 1.1;
    white-space: nowrap;
}

@media (max-width: 720px) {
    .clientzone-subnav__inner {
        flex-direction: column;
        align-items: stretch;
    }

    .clientzone-subnav__left {
        justify-content: space-between;
        gap: 10px;
    }

    .clientzone-subnav__search {
        width: 100%;
    }

    .clientzone-subnav__search-input {
        width: 100%;
    }
}


.clientzone-subnav__search-input:focus {
    outline: none;
    border-color: #cbd5e1;
}

/* Quick contact (popover) */
.clientzone-subnav__right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.clientzone-contactmenu {
    position: relative;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}

.clientzone-contactmenu__primary,
.clientzone-contactmenu__open,
.clientzone-contactmenu__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #111827;
    text-decoration: none;
    box-shadow: 0 1px 0 rgba(0,0,0,0.03);
}

.clientzone-contactmenu__primary {
    width: 38px;
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.clientzone-contactmenu__toggle {
    width: 28px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.clientzone-contactmenu__open {
    gap: 6px;
    padding: 0 10px;
}

.clientzone-contactmenu__icon svg {
    display: block;
}

.clientzone-contactmenu__caret svg {
    display: block;
}

.clientzone-contactmenu__primary:hover,
.clientzone-contactmenu__open:hover,
.clientzone-contactmenu__toggle:hover,
.clientzone-contactmenu__primary:focus-visible,
.clientzone-contactmenu__open:focus-visible,
.clientzone-contactmenu__toggle:focus-visible {
    background: #f3f4f6;
    border-color: #d1d5db;
    color: #000000;
    outline: none;
}

.clientzone-contactmenu__popover {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 190px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.10);
    padding: 8px;
    z-index: 50;
}

.clientzone-contactmenu__head {
    font-weight: 700;
    font-size: 0.9rem;
    padding: 6px 8px 8px;
    color: #111827;
}

.clientzone-contactmenu__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    text-decoration: none;
    color: #111827;
}

.clientzone-contactmenu__item:hover,
.clientzone-contactmenu__item:focus-visible {
    background: #f3f4f6;
    color: #000000;
    outline: none;
}

.clientzone-contactmenu__item-icon svg {
    display: block;
}

.clientzone-contactmenu__item-label {
    font-size: 0.95rem;
    font-weight: 600;
}

@media (max-width: 720px) {
    .clientzone-subnav__right {
        justify-content: space-between;
    }

    .clientzone-subnav__search {
        order: 1;
        flex-grow: 1;
    }
}

/* =========================================================
   HOME PAGE STYLES
   ========================================================= */

.hero {
    padding: 80px 0 60px;
    background: linear-gradient(135deg, #111827, #1f2937);
    color: #f9fafb;
    text-align: left;
}

.hero h1 {
    font-size: clamp(2rem, 3vw + 1rem, 2.8rem);
    margin-bottom: 0.5rem;
}

.hero p {
    margin-bottom: 1.5rem;
    max-width: 40rem;
    color: #e5e7eb;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 999px;
    background: #3b82f6;
    color: #fff;
    font-weight: 500;
    border: none;
    cursor: pointer;
    text-decoration: none;
    font: inherit;
    line-height: 1;
    appearance: none;
    -webkit-appearance: none;
}

.btn-primary:hover {
    background: #2563eb;
}

.btn-wide {
    width: 100%;
}

.divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 14px 0;
    color: #6b7280;
}

.divider::before,
.divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}

.divider span {
    font-size: 0.9rem;
}

.divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 14px 0;
    color: #6b7280;
    font-size: 0.9rem;
}

.divider::before,
.divider::after {
    content: "";
    height: 1px;
    background: #e5e7eb;
    flex: 1;
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 1.2rem;
    border-radius: 999px;
    border: 1px solid #0f766e;
    background: #ffffff;
    color: #0f766e;
    font: inherit;
    font-weight: 500;
    font-size: 0.95rem;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    appearance: none;
    -webkit-appearance: none;
}

.btn-secondary:hover {
    background: #ecfdf5;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
}

/* =========================================================
   SUBTLE TEXT LINKS (HOME)
   - Used for secondary, non-CTA links in the home offers cards.
   ========================================================= */

.btn-text {
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

.btn-text:hover,
.btn-text:focus-visible {
    text-decoration-style: solid;
}


/* =========================================================
   HOMEPAGE - ARCHITECTURE FEATURE (PAE1 GATE 5)
   Scoped to the homepage. The gradient and card treatment deliberately
   match the architecture landing without altering other site routes.
   ========================================================= */

.home-page {
    background: #f4f6fa;
}

.home-page .home-hero {
    padding: clamp(46px, 6vw, 72px) 0 117px;
    background: radial-gradient(ellipse at 87% 8%, rgba(59, 130, 246, 0.19), transparent 52%),
                linear-gradient(133deg, #101928, #1c2c45);
}

.home-hero .hero-content {
    max-width: 930px;
}

.home-hero h1 {
    max-width: 870px;
    margin: 0 0 19px;
    font-size: clamp(2.05rem, 4.1vw, 3.2rem);
    line-height: 1.15;
    letter-spacing: -0.032em;
    font-weight: 750;
}

.home-hero .hero-subtitle {
    max-width: 850px;
    margin: 0;
    color: #e5eaf2;
    font-size: clamp(1.02rem, 1.6vw, 1.15rem);
    line-height: 1.65;
}

.home-feature {
    position: relative;
    margin-top: -70px;
}

.home-feature__panel {
    padding: clamp(24px, 4vw, 42px);
    background: #fff;
    border: 1px solid #dce3ee;
    border-radius: 18px;
    box-shadow: 0 16px 38px rgba(11, 28, 54, 0.1);
}

.home-feature__badge {
    display: inline-block;
    margin: 0 0 16px;
    padding: 5px 11px;
    border: 1px solid #c9dafa;
    border-radius: 999px;
    color: #1d4ed8;
    background: #eff6ff;
    font-size: 0.76rem;
    line-height: 1.45;
    font-weight: 750;
    letter-spacing: 0.065em;
}

.home-feature h2 {
    max-width: 790px;
    margin: 0 0 19px;
    color: #102541;
    font-size: clamp(1.85rem, 3.2vw, 2.6rem);
    line-height: 1.16;
    letter-spacing: -0.03em;
}

.home-feature__question {
    max-width: 790px;
    margin: 0 0 20px;
    color: #213650;
    font-size: clamp(1.07rem, 1.6vw, 1.26rem);
    line-height: 1.48;
    font-weight: 650;
}

.home-feature__panel > p:not(.home-feature__badge) {
    max-width: 790px;
    margin: 0 0 15px;
    color: #475569;
    font-size: 1rem;
    line-height: 1.72;
}

.home-feature__panel > p.home-feature__context {
    margin-top: 16px;
    margin-bottom: 0;
    font-style: italic;
}

.home-feature__cta {
    gap: 8px;
    min-height: 54px;
    max-width: 100%;
    margin-top: 15px;
    padding: 14px 22px;
    border-radius: 10px;
    background: #3b82f6;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.18);
}

.home-feature__cta:focus-visible,
.home-page .btn-text:focus-visible,
.home-page .btn-primary:focus-visible {
    outline: 3px solid #93c5fd;
    outline-offset: 4px;
}

.home-options {
    padding-top: 40px;
    padding-bottom: 60px;
}

.home-page .home-options h2,
.home-page .home-about-section h2,
.home-page .home-contact-section h2 {
    color: #17243a;
    font-size: clamp(1.45rem, 2.5vw, 1.85rem);
    line-height: 1.3;
    margin: 0 0 23px;
}

.home-offers-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.home-offers-grid .offer-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 26px;
    border: 1px solid #e0e5ee;
    border-radius: 12px;
    background: #fbfcfe;
}

.home-offers-grid h3 {
    margin: 0 0 11px;
    font-size: 1.18rem;
    color: #17243a;
}

.home-offers-grid p {
    flex: 1;
    margin: 0 0 16px;
    color: #475569;
    line-height: 1.65;
}

.home-page .btn-text {
    align-self: flex-start;
    color: #1d4ed8;
    font-weight: 600;
    line-height: 1.5;
    text-underline-offset: 4px;
}

.home-page .btn-text:hover {
    color: #1e40af;
}

.home-about-section {
    border-top: 1px solid #e3eaf3;
    background: #fff;
}

.home-contact-section {
    border-top: 1px solid #dfe7f2;
    background: #edf3fb;
}

.home-about-inner,
.home-contact-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(24px, 5vw, 65px);
    align-items: center;
}

.home-about-text p,
.home-contact-text p {
    margin: 0;
    max-width: 670px;
    color: #475569;
    line-height: 1.7;
}

.home-about-action .btn-primary,
.home-contact-action .btn-primary {
    gap: 7px;
    min-height: 48px;
    line-height: 1.35;
    text-align: center;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .home-page .home-hero {
        padding: 44px 0 93px;
    }

    .home-feature {
        margin-top: -53px;
    }

    .home-feature__panel {
        padding: 23px 20px 26px;
    }

    .home-feature h2 {
        margin-bottom: 16px;
    }

    .home-feature__cta {
        width: 100%;
    }

    .home-offers-grid,
    .home-about-inner,
    .home-contact-inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .home-options {
        padding-top: 34px;
        padding-bottom: 46px;
    }

    .home-offers-grid .offer-card {
        padding: 21px;
    }

    .home-about-inner,
    .home-contact-inner {
        gap: 23px;
    }

    .home-about-action .btn-primary,
    .home-contact-action .btn-primary {
        max-width: 100%;
        white-space: normal;
    }
}

@media (max-width: 400px) {
    .home-hero h1 {
        font-size: 1.95rem;
    }
}

/* Homepage: Petr, About and options, Martin testimonial, then booking and transparent tiers.
   Keep Contact's on-demand Calendly widget and existing CTA-before-pricing order. */
.home-contact-section { background:#edf3fb; }
.home-contact-section > .container { max-width: 960px; }
.home-contact-text { max-width: 790px; }
.home-contact-text p { max-width: 790px; }
.home-contact-pricing-panel {
    margin-top: 25px;
    padding: clamp(19px, 3.2vw, 30px);
    border: 1px solid #dce3ee;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 27px rgba(11, 28, 54, .07);
}
.home-contact-pricing-panel .pae1-pricing { margin:0; padding:0; border:0; }
.home-contact-action { margin-top:21px; }
.home-contact-action .btn-primary {
    gap:8px;
    min-height:51px;
    padding:12px 23px;
    border-radius:10px;
    font-weight:700;
    line-height:1.4;
    text-align:center;
}
@media (max-width:768px) {
    .home-contact-pricing-panel { padding:21px 17px; }
    .home-contact-action .btn-primary { width:100%; }
}

/* =========================================================
   PAE1 - FOCUSED ARCHITECTURE-TRANSITION LANDING PAGE
   ========================================================= */

.site-header--focused .site-header-inner {
    max-width: 1000px;
}

.pae1-landing {
    background: #f4f6fa;
    padding-bottom: 1px;
}

.pae1-intro {
    color: #f9fafb;
    padding: clamp(44px, 7vw, 72px) 0 103px;
    background: radial-gradient(ellipse at 87% 8%, rgba(59, 130, 246, 0.19), transparent 52%),
                linear-gradient(133deg, #101928, #1c2c45);
}

.pae1-intro__content {
    max-width: 965px;
}

.pae1-intro h1 {
    max-width: 810px;
    margin: 0 0 18px;
    font-size: clamp(2.05rem, 4.2vw, 3.4rem);
    line-height: 1.13;
    letter-spacing: -0.035em;
    font-weight: 750;
}

.pae1-intro__lead {
    max-width: 850px;
    margin: 0;
    color: #e5eaf2;
    font-size: clamp(1.02rem, 1.6vw, 1.15rem);
    line-height: 1.65;
}

.pae1-intro__founder {
    max-width: 830px;
    margin: 20px 0 0;
    padding-left: 16px;
    border-left: 3px solid #60a5fa;
    color: #c8d5e7;
    font-size: 0.96rem;
    line-height: 1.6;
}

.pae1-conversion {
    position: relative;
    margin-top: -61px;
}

.pae1-conversion > .container {
    max-width: 965px;
}

.pae1-conversion__panel {
    background: #fff;
    padding: clamp(20px, 3.4vw, 34px);
    border: 1px solid #dce3ee;
    border-radius: 18px;
    box-shadow: 0 16px 38px rgba(11, 28, 54, 0.1);
}

.pae1-booking {
    display: grid;
    grid-template-columns: minmax(220px, 0.86fr) minmax(0, 1.8fr);
    gap: clamp(17px, 2.5vw, 32px);
    align-items: center;
}

.pae1-booking__cta {
    min-height: 56px;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
    padding: 14px 20px;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.18);
}

.pae1-booking__cta:focus-visible,
.pae1-explore__link:focus-visible {
    outline: 3px solid #93c5fd;
    outline-offset: 4px;
}

.pae1-booking__explanation {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.62;
    color: #475569;
}

.pae1-pricing {
    margin-top: 27px;
    border-top: 1px solid #e1e7f0;
    padding-top: 24px;
}

.pae1-pricing h2 {
    font-size: 1.17rem;
    margin: 0 0 16px;
    letter-spacing: -0.012em;
    color: #17243a;
}

.pae1-pricing__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 13px;
}

.pae1-tier {
    padding: 18px 17px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #dee5ee;
    min-width: 0;
}

.pae1-tier__heading {
    display: flex;
    gap: 8px;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0 0 13px;
    font-size: 1rem;
    line-height: 1.4;
}

.pae1-tier__name {
    color: #102541;
    font-size: 1.1rem;
    font-weight: 750;
}

.pae1-tier__price {
    font-weight: 700;
    white-space: nowrap;
    color: #1d4ed8;
    font-size: 0.98rem;
}

.pae1-tier__description {
    margin: 0;
    color: #475569;
    font-size: 0.925rem;
    line-height: 1.58;
}

.pae1-pricing__note {
    margin: 16px 0 0;
    color: #4b5563;
    font-size: 0.9rem;
    line-height: 1.6;
}

.pae1-pricing__details {
    margin: 12px 0 0;
    text-align: center;
    font-size: 0.92rem;
}

.pae1-explore {
    text-align: center;
    padding: 26px 16px 52px;
    color: #4b5563;
}

.pae1-explore p {
    margin: 0 0 4px;
    font-size: 0.92rem;
}

.pae1-explore__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #1d4ed8;
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 600;
}

.pae1-explore__link:hover {
    color: #1e40af;
}

@media (max-width: 768px) {
    .site-header--focused .site-header-inner {
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }

    .site-header--focused .lang-switcher {
        align-self: auto;
        flex-shrink: 0;
    }

    .pae1-intro {
        padding-bottom: 78px;
    }

    .pae1-booking {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .pae1-booking__cta {
        width: 100%;
    }

    .pae1-conversion {
        margin-top: -44px;
    }

    /* Keep the secondary link accessible before pricing without a second CTA. */
    .pae1-conversion__panel > .pae1-explore {
        padding: 17px 0 0;
    }

    .pae1-conversion__panel > .pae1-explore + .pae1-pricing {
        margin-top: 22px;
    }

    .pae1-pricing__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .pae1-tier {
        padding: 15px 16px;
    }

    .pae1-tier__heading {
        margin-bottom: 7px;
    }
}

@media (max-width: 380px) {
    .site-header--focused .logo-tagline {
        display: none;
    }

    .site-header--focused .logo-name {
        font-size: 0.98rem;
    }
}

/* The packages route reuses the public subpage content-section/container layout.
   Only Markdown-specific adjustments and responsive table sizing belong here. */
.packages-page .md-content {
    font-size: 1rem;
    line-height: 1.7;
}

.packages-page .md-content > :first-child {
    margin-top: 0;
}

.packages-page .md-content .md-table {
    min-width: 740px;
    table-layout: fixed;
}

.packages-page .md-content .md-table th:first-child {
    width: 22%;
}

/* The localized source already separates package topics into page sections. */
.packages-page .md-hr {
    display: none;
}

/* Optional Mentoring disclosures: standard subpage typography, no enclosing card. */
.mentoring-faq {
    border-top: 1px solid #e5e7eb;
}

.mentoring-faq__item {
    border-bottom: 1px solid #e5e7eb;
}

.mentoring-faq__question {
    padding: 16px 8px;
    font-weight: 600;
    line-height: 1.5;
    cursor: pointer;
}

.mentoring-faq__question:hover {
    color: #1d4ed8;
}

.mentoring-faq__question:focus-visible {
    outline: 3px solid #2563eb;
    outline-offset: 2px;
}

.mentoring-faq__answer {
    padding: 0 12px 18px 22px;
}

.mentoring-faq__answer p {
    margin: 0 0 0.85rem;
}

.mentoring-faq__answer p:last-child {
    margin-bottom: 0;
}

.mentoring-resources__item + .mentoring-resources__item {
    margin-top: 28px;
}

/* =========================================================
   CONTENT SECTIONS
   ========================================================= */

.content-section {
    padding: 40px 0 60px;
}

.content-section h2 {
    margin-top: 0;
}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
    padding: 16px 0 24px;
    font-size: 0.875rem;
    color: #4b5563;
}

.site-footer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}

.footer-main p {
    margin: 0;
}

.footer-main p + p {
    margin-top: 4px;
}

.footer-links {
    display: flex;
    gap: 8px;
    font-size: 0.85rem;
    opacity: 0.8;
    margin-top: 6px;
}


/* =========================================================
   SPECIAL TEXT ELEMENTS / UTILS
   ========================================================= */

.bullet-list {
    padding-left: 1.2rem;
    margin: 0;
}

.bullet-list li {
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.future-note {
    margin-top: 24px;
    font-size: 0.9rem;
    opacity: 0.75;
}

/* =========================================================
   ABOUT PAGE STYLES
   ========================================================= */

.about-container {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.about-text {
    flex: 1 1 300px;
}

.about-photo img {
    width: 200px;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

@media (max-width: 600px) {
    .about-photo img {
        width: 160px;
        margin-top: 12px;
    }
}


/* =========================================================
   PATHWAY (Career navigation)
   ========================================================= */

.pathway-intro {
    max-width: 720px;
    text-align: center;
}

.pathway-lead {
    font-size: 1.05rem;
    margin-bottom: 8px;
}

.pathway-note {
    font-size: 0.9rem;
    opacity: 0.85;
    margin-bottom: 16px;
}

.pathway-intro-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.pathway-start-btn {
    margin-top: 0;
}

.pathway-skip-btn {
    font-size: 0.9rem;
    text-decoration: underline;
    opacity: 0.85;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

.pathway-section {
    position: relative;
}

.pathway-step-label {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: 2px solid #0f766e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 12px;
}

.pathway-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}

.pathway-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    cursor: pointer;
}

.pathway-option input {
    margin-top: 4px;
}

.pathway-option span {
    font-size: 0.95rem;
}

.pathway-step2-block {
    margin-top: 12px;
}

.pathway-directions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.pathway-direction {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    cursor: pointer;
    transition: box-shadow 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.pathway-direction input {
    margin-top: 4px;
}

.pathway-direction-title {
    font-weight: 600;
    margin-bottom: 4px;
}

.pathway-direction p {
    margin: 0;
    font-size: 0.95rem;
}

.pathway-direction--selected {
    border: 1px solid #0f766e;
    box-shadow: 0 0 0 1px rgba(15, 118, 110, 0.08);
    background-color: #f0fdfa;
}

.pathway-summary {
    margin-top: 20px;
}

.pathway-summary-intro {
    font-size: 0.95rem;
    opacity: 0.9;
}

.pathway-summary-block {
    margin-top: 10px;
}

.pathway-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
    margin-bottom: 8px;
}

.pathway-small {
    font-size: 0.85rem;
    opacity: 0.8;
}

.pathway-transparency {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    font-size: 0.95rem;
}

.pathway-transparency h3 {
    margin-bottom: 8px;
}

@media (max-width: 700px) {
    .pathway-intro {
        text-align: left;
    }

    .pathway-intro-actions {
        justify-content: flex-start;
    }

    .pathway-directions {
        grid-template-columns: 1fr;
    }
}

/* =========================
   Pathway: A/B hook + stats
   ========================= */

/* Career navigation: A/B hook */
.pathway-hook-headline {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.pathway-hook-list {
    max-width: 720px;
    margin: 10px auto 14px auto;
    padding-left: 1.25rem;
    text-align: left;
    opacity: 0.9;
}

.pathway-hook-list li {
    margin: 6px 0;
}

/* Admin: A/B stats */
.ab-stats-h2 {
    margin: 0 0 12px 0;
    font-size: 1.1rem;
}

.ab-stats {
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 12px;
    overflow: hidden;
}

.ab-stats__row {
    display: grid;
    /* 6 columns: Variant + 5 metrics */
    grid-template-columns: 100px 1fr 1fr 1fr 1fr 1fr;
    gap: 12px;
    padding: 12px 12px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    align-items: start;
}

.ab-stats__row:last-child {
    border-bottom: 0;
}

.ab-stats__header {
    font-weight: 700;
    background: rgba(0,0,0,0.02);
}

.ab-stats__cell {
    min-width: 0;
}

.ab-stats__variant {
    text-align: left;
}

@media (max-width: 780px) {
    .ab-stats__row {
        grid-template-columns: 60px 1fr;
        grid-auto-rows: auto;
    }
    .ab-stats__header {
        display: none;
    }
    .ab-stats__cell {
        padding: 2px 0;
    }
}

/* T9-11: Blog listing and article shells use the shared 960px site width.
   Technical tables/code retain their own contained scrolling rules below. */
.blog-page__inner {
  max-width: 960px;
}

.blog-page__head {
  margin-bottom: 2rem;
}

.blog-page__intro,
.blog-article__excerpt,
.blog-card__excerpt {
  color: #475569;
}

.blog-page__excerpt-i18n {
  display: none;
}

.blog-post-list {
  display: grid;
  gap: 1rem;
}

.blog-card,
.blog-article,
.blog-empty-state,
.blog-video-block,
.blog-sources-block {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 1.25rem;
}

.blog-card__title,
.blog-article__header h1,
.blog-video-block h2,
.blog-sources-block h2 {
  margin-top: 0;
}

.blog-card__title a,
.blog-back-link a {
  color: inherit;
  text-decoration: none;
}

.blog-card__title a:hover,
.blog-back-link a:hover {
  text-decoration: underline;
}

.blog-card__meta {
  color: #64748b;
  font-size: 0.95rem;
  margin-bottom: 0.75rem;
}

.blog-card__meta-sep {
  margin: 0 0.3rem;
}

.blog-card__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.85rem;
  margin-top: 1rem;
}

.blog-card__excerpt {
  display: grid;
  gap: 0.75rem;
}

.blog-card__excerpt-inner {
  position: relative;
  overflow: hidden;
  max-height: calc(1.6em * 3);
}

.blog-card__excerpt-inner::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1.6em;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
  pointer-events: none;
}

.blog-card__excerpt.is-expanded .blog-card__excerpt-inner {
  max-height: none;
}

.blog-card__excerpt.is-expanded .blog-card__excerpt-inner::after,
.blog-card__excerpt:not(.is-expandable) .blog-card__excerpt-inner::after {
  display: none;
}

.blog-card__excerpt-toggle {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: #0f172a;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.blog-card__excerpt-toggle:hover {
  text-decoration-thickness: 2px;
}

.blog-card__actions .blog-card__excerpt-toggle {
  margin-right: auto;
}

.blog-card__actions .btn-secondary {
  margin-left: auto;
}

.blog-card__excerpt .md-content > :first-child {
  margin-top: 0;
}

.blog-card__excerpt .md-content > :last-child {
  margin-bottom: 0;
}

.blog-card__excerpt .md-content p {
  line-height: 1.6;
}

.blog-back-link {
  margin-bottom: 1rem;
}

.blog-article {
  display: grid;
  /* A wide Markdown table must scroll within its region, not size the article's grid track. */
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}
/* Contextual Journey links should reveal preceding Blog text above the heading.
   Restrict the larger offset to public Blog bodies; other Markdown stays unchanged. */
.blog-page--detail .blog-article__body .md-content :is(h1, h2, h3, h4, h5, h6)[id] {
  scroll-margin-top: 120px;
}

.blog-video-embed {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: 12px;
  overflow: hidden;
  background: #0f172a;
}

.blog-video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.blog-article__summary {
  display: grid;
  /* The optional Markdown perex can contain a table too. */
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  padding-top: 0.25rem;
}

.blog-article__summary h2 {
  margin: 0;
  font-size: 1rem;
  color: #0f172a;
}

.blog-article__excerpt .md-content > :first-child {
  margin-top: 0;
}

.blog-article__excerpt .md-content > :last-child {
  margin-bottom: 0;
}


.blog-related-posts {
  display: grid;
  gap: 1rem;
}

.blog-related-posts__header {
  margin-top: 1.25rem;
  margin-bottom: 0.25rem;
}

.blog-related-posts__list {
  display: grid;
  gap: 1rem;
}

.blog-related-card {
  border-top: 1px solid #e2e8f0;
  padding-top: 1rem;
}

.blog-related-card:first-child {
  border-top: 0;
  padding-top: 0;
}

.blog-related-card h3 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
}

.blog-related-card h3 a {
  color: inherit;
  text-decoration: none;
}

.blog-related-card h3 a:hover {
  text-decoration: underline;
}

.blog-related-card .blog-card__excerpt {
  gap: 0.5rem;
}

.blog-related-card .blog-card__excerpt-inner {
  max-height: none;
}

.blog-related-card .blog-card__excerpt-inner::after {
  display: none;
}

/* Step 2: readable, non-decorative actual-content-language cue for fallback. */
.blog-lang-badge {
  display: inline-block;
  padding: 0.13rem 0.48rem;
  border-radius: 0.4rem;
  border: 1px solid #cbd5e1;
  background: #f1f5f9;
  color: #334155;
  font-size: 0.82rem;
  line-height: 1.35;
  font-weight: 600;
  vertical-align: baseline;
}

/* Step 4: Blog-specific taxonomy/discovery, not Material/Client Note label UI. */
.blog-filter-form {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 0.8rem;
  padding: 1rem;
  margin-bottom: 1.4rem;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  background: #f8fafc;
}
.blog-filter-form > label { display: grid; gap: 0.35rem; flex: 1 1 145px; min-width: 0; }
.blog-filter-form > label > span { color: #334155; font-weight: 600; font-size: 0.9rem; }
.blog-filter-form select { width: 100%; min-height: 2.6rem; padding: 0.4rem; border: 1px solid #94a3b8; border-radius: 6px; background: #fff; color: #0f172a; }
.blog-filter-form__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.7rem; }
.blog-filter-form :focus-visible, .blog-taxonomy-chip:focus-visible,
.blog-series-navigation a:focus-visible { outline: 3px solid #2563eb; outline-offset: 3px; }
.blog-taxonomy-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0.75rem 0; }
.blog-taxonomy-chip { display: inline-block; max-width: 100%; overflow-wrap: anywhere;
  padding: 0.22rem 0.55rem; border-radius: 100px; color: #334155;
  background: #f1f5f9; border: 1px solid #cbd5e1;
  font-size: 0.85rem; text-decoration: none; }
.blog-taxonomy-chip:hover { background: #e2e8f0; text-decoration: underline; }
.blog-taxonomy-chip__kind { font-weight: 600; }
.blog-series-navigation { border: 1px solid #cbd5e1; border-radius: 12px; padding: 1rem; }
.blog-series-navigation h2 { margin: 0 0 0.6rem; font-size: 1.3rem; }
.blog-series-navigation h3 { margin: 0.7rem 0; font-size: 1.05rem; }
.blog-series-navigation__group + .blog-series-navigation__group { border-top: 1px solid #e2e8f0; padding-top: 0.7rem; }
.blog-series-navigation__links { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; }
.blog-series-navigation__links a { max-width: 100%; overflow-wrap: anywhere; }
.blog-taxonomy-tabs { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1rem; }
.blog-taxonomy-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 225px), 1fr)); gap: 0.7rem; }
.blog-taxonomy-fields .form-row { display: grid; align-content: start; gap: 0.35rem; }
.blog-taxonomy-active { align-self: center; }
.blog-taxonomy-checks { min-width: 0; margin: 1rem 0; border: 1px solid #cbd5e1; border-radius: 10px; padding: 0.8rem; }
.blog-taxonomy-checks legend { font-weight: 700; padding: 0 0.3rem; }
.blog-taxonomy-check-row { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; padding: 0.45rem 0; }
.blog-taxonomy-check-row + .blog-taxonomy-check-row { border-top: 1px solid #e2e8f0; }
.blog-taxonomy-check-row > label:last-child { display: flex; gap: 0.5rem; align-items: center; }
.blog-taxonomy-order { max-width: 110px; }
@media (max-width: 520px) {
  .blog-filter-form > label { flex-basis: 100%; }
  .blog-series-navigation__links { display: grid; }
}

/* US7 T3 Step 6: quiet, keyboard-accessible article provenance and discovery.
   Keep in CSS SOURCE: Windows build regenerates style.css from src/*.css. */
.blog-filter-disclosure {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
  margin-bottom: 1.4rem;
}
.blog-filter-disclosure__summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  list-style: none;
  cursor: pointer;
  color: #475569;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.68rem 0.9rem;
}
.blog-filter-disclosure__summary::-webkit-details-marker,
.blog-provenance__summary::-webkit-details-marker { display: none; }
.blog-filter-disclosure__summary::after,
.blog-provenance__summary::after {
  content: '';
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: 0.75;
}
.blog-filter-disclosure__summary::after { margin-left: auto; }
.blog-filter-disclosure[open] .blog-filter-disclosure__summary::after,
.blog-provenance[open] .blog-provenance__summary::after {
  transform: rotate(225deg) translate(-1px, -1px);
}
.blog-filter-disclosure__summary:hover,
.blog-provenance__summary:hover { color: #0f172a; background: #f1f5f9; }
.blog-filter-disclosure__summary:focus-visible,
.blog-provenance__summary:focus-visible { outline: 3px solid #2563eb; outline-offset: 3px; }
.blog-filter-disclosure__active {
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: #e2e8f0;
  color: #334155;
  font-size: 0.75rem;
  font-weight: 500;
}
/* Collapsed state: the Blog feed begins immediately below a single filter row. */
.blog-filter-disclosure:not([open]) > .blog-filter-form,
.blog-provenance:not([open]) > .blog-provenance__panel { display: none; }
.blog-filter-disclosure .blog-filter-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 0.9rem;
  padding: 0.9rem;
  margin: 0;
  background: transparent;
  border: 0;
  border-top: 1px solid #e2e8f0;
  border-radius: 0;
}
.blog-filter-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr));
  gap: 0.65rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.blog-filter-group legend {
  font-size: 0.83rem;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 0.45rem;
}
.blog-filter-group > label { display: grid; gap: 0.25rem; min-width: 0; }
.blog-filter-group > label > span { color: #475569; font-size: 0.83rem; font-weight: 500; }
.blog-filter-group select { min-height: 2.35rem; font-size: 0.9rem; }
.blog-article__title-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.5rem 0.85rem; }
.blog-article__title-row h1 { flex: 1 1 25rem; min-width: 0; margin: 0; }
.blog-provenance { position: relative; flex: 0 0 auto; margin-top: 0.35rem; color: #64748b; }
.blog-provenance__summary {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  cursor: pointer;
  list-style: none;
  color: #64748b;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  padding: 0.27rem 0.55rem;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.4;
}
.blog-provenance__panel {
  position: absolute;
  z-index: 5;
  top: calc(100% + 0.35rem);
  right: 0;
  width: min(340px, calc(100vw - 3.5rem));
  padding: 0.8rem;
  background: #fff;
  color: #475569;
  border: 1px solid #cbd5e1;
  border-radius: 9px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
}
.blog-provenance__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem 0.9rem;
  margin: 0;
}
.blog-provenance__part { min-width: 0; }
.blog-provenance__part dt { font-size: 0.75rem; font-weight: 600; color: #64748b; }
.blog-provenance__part dd { margin: 0.16rem 0 0; font-size: 0.85rem; font-weight: 500; color: #334155; }
.blog-provenance__source { margin: 0.8rem 0 0; font-size: 0.78rem; color: #475569; overflow-wrap: anywhere; }
.blog-fictional-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  margin: 0.3rem 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: #5b3a13;
  border: 1px solid #e4c99c;
  border-radius: 5px;
  background: #fff7ed;
}
.blog-provenance-admin-fields {
  display: grid;
  gap: 0.6rem 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 225px), 1fr));
}
.blog-provenance-admin-fields .form-row { min-width: 0; }
.blog-provenance-admin-fields select { width: 100%; }
@media (max-width: 520px) {
  .blog-provenance { flex-basis: 100%; margin-top: 0; }
  .blog-provenance__panel { position: static; width: 100%; margin-top: 0.4rem; box-shadow: none; }
  .blog-filter-group { grid-template-columns: minmax(0, 1fr); }
}

/* US7 T3 Step 7: understated, keyboard-friendly contextual proof links. */
.blog-proof-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1.2rem;
  padding: 1rem 1.1rem;
  margin: 1.6rem 0;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  border-radius: 8px;
}
.blog-proof-links__group { min-width: 0; }
.blog-proof-links__group h2 { margin: 0 0 0.45rem; font-size: 1.04rem; }
.blog-proof-links__group ul { padding-left: 1.25rem; margin: 0; }
.blog-proof-links__group li { margin: 0.35rem 0; overflow-wrap: anywhere; }
.blog-proof-links__group a { text-underline-offset: 0.15em; }
.blog-proof-links__group a:focus-visible { outline: 3px solid #2563eb; outline-offset: 3px; }

/* PAE1 US7 T9-02: ordinary page scroll; only the Contact action strip sticks. */
/* T9-10: shared IM Mentor blue interaction language, preserving the Journey layout. */
.journey-public { --j-ink:#172434; --j-soft:#556479; --j-accent:#3b82f6; --j-accent-deep:#2563eb; --j-accent-text:#1d4ed8; --j-line:#dbe4ed; --j-hero-bg:linear-gradient(115deg,#111827 0%,#223143 100%); }
.journey-public__missing { padding-top:3rem; padding-bottom:4rem; }
.journey-hero { background:var(--j-hero-bg); color:#f9fafb; }
/* T9-11: the Journey heading follows the shared 960px site rhythm. */
.journey-hero__inner { max-width:960px; margin:auto; padding:18px 16px 19px; }
.journey-hero__eyebrow { font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:#b0cee0; font-weight:750; margin-bottom:7px; }
.journey-hero h1 { margin:0; font-size:clamp(1.6rem,3.1vw,2.28rem); line-height:1.23; letter-spacing:-.03em; }
.journey-hero__description { max-width:82ch; margin:10px 0 0; font-size:1rem; line-height:1.6; color:#e1e7ee; }
.journey-content { background:radial-gradient(ellipse 680px 290px at 70% 0,#eaf1f8,transparent 75%),#f5f6fa; }
/* Reading intro matches site width; numbered cards/desktop paths stay at 1120px. */
.journey-intro { max-width:960px; margin:auto; padding:18px 16px 0; }
.journey-inner { max-width:1120px; padding:24px 24px 50px; margin:auto; }
.journey-fiction-note { font-size:.9rem; line-height:1.6; color:var(--j-soft); margin:0 0 10px; }
.journey-locale-notice { font-size:.82rem; line-height:1.6; color:#475569; margin:0 0 10px; }
/* Sits directly below the header at load; scrolls to the viewport top alone. */
.journey-contact-bar { position:sticky; top:0; z-index:5; min-height:54px; padding:7px 0; background:var(--j-hero-bg); border-top:1px solid #ffffff20; border-bottom:1px solid #ffffff20; }
.journey-contact-bar__inner { max-width:960px; width:100%; padding:0 16px; margin:auto; display:flex; justify-content:flex-end; align-items:center; }
.journey-contact-link { display:inline-flex; align-items:center; gap:9px; padding:9px 16px; min-height:40px; border-radius:999px; background:var(--j-accent); color:#fff; font-size:.84rem; line-height:1.2; font-weight:700; text-align:center; white-space:normal; box-shadow:0 3px 10px #102d3d17; }
.journey-contact-link:hover { background:var(--j-accent-deep); color:#fff; }
.journey-contact-link:focus-visible { outline:3px solid #2563eb; outline-offset:3px; }
.journey-contact-link span[aria-hidden] { font-size:1.06rem; line-height:1; }
.journey-help { color:var(--j-soft); font-size:.95rem; line-height:1.7; margin:0; }
.journey-track { position:relative; isolation:isolate; }
.journey-paths { position:absolute; inset:0; width:100%; height:100%; overflow:visible; z-index:0; pointer-events:none; }
.journey-forward-path { fill:none; stroke:#91a6bc; stroke-width:2.35px; stroke-linecap:round; }
.journey-back-path { fill:none; stroke:var(--j-accent-deep); stroke-width:2.9px; stroke-dasharray:6 7; stroke-linecap:round; }
.journey-stages { position:relative; z-index:1; list-style:none; margin:0; padding:0; display:grid; gap:24px; }
.journey-row { display:grid; grid-template-columns:72px minmax(0,1fr); column-gap:14px; align-items:start; scroll-margin-top:76px; min-width:0; }
.journey-rail { display:flex; justify-content:center; padding-top:20px; }
.journey-marker { position:relative; z-index:2; width:46px; height:46px; display:grid; place-items:center; border-radius:50%; background:#fff; border:2px solid #c5d1de; color:#34465b; box-shadow:0 0 0 6px #f5f6fa,0 4px 11px #15253915; font-size:.95rem; font-weight:800; }
.journey-row.is-open .journey-marker { background:var(--j-accent); color:white; border-color:var(--j-accent); }
.journey-card { min-width:0; background:white; border:1px solid var(--j-line); border-radius:17px; box-shadow:0 3px 14px #182c4010; overflow:hidden; }
/* T9-05: the closed card opens, and the same header closes when expanded.
   Expanded body content and nested links are not toggle surfaces. */
.journey-enhanced .journey-row:not(.is-open) .journey-card,
.journey-enhanced .journey-card__heading { cursor:pointer; }
@media (hover:hover) and (pointer:fine) {
  .journey-enhanced .journey-row:not(.is-open) .journey-card:hover { border-color:#93c5fd; box-shadow:0 6px 20px #102d3d18; }
  .journey-enhanced .journey-row.is-open .journey-card__heading:hover { background:linear-gradient(100deg,#f8fbff,#edf4ff); }
}
.journey-row.is-open .journey-card { border-color:#93c5fd; box-shadow:0 12px 32px #102d3d16; }
.journey-card__heading { padding:20px 23px; }
.journey-row.is-open .journey-card__heading { background:linear-gradient(100deg,#fff,#f3f8ff); }
.journey-card__meta { display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin-bottom:6px; font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; color:#66788b; font-weight:800; }
.journey-card__return-hint { background:#eff6ff; color:var(--j-accent-text); border:1px solid #bfdbfe; border-radius:50px; padding:3px 7px; text-transform:none; letter-spacing:0; font-size:.7rem; }
.journey-card h2 { margin:0; font-size:inherit; }
.journey-trigger { display:flex; align-items:center; gap:15px; justify-content:space-between; width:100%; padding:0; border:0; text-align:left; color:var(--j-ink); background:transparent; cursor:pointer; font:inherit; }
.journey-trigger__title { font-size:clamp(1.17rem,2vw,1.52rem); font-weight:760; line-height:1.27; letter-spacing:-.025em; }
.journey-trigger__action { display:flex; align-items:center; gap:8px; color:var(--j-accent-text); font-size:.8rem; font-weight:700; white-space:nowrap; }
/* Center the icon geometrically; font glyph baselines can offset '+' and its rotated 'x'. */
.journey-trigger__plus { position:relative; width:28px; height:28px; display:grid; place-items:center; font-size:0; color:var(--j-accent-text); border:1px solid #bfdbfe; background:#eff6ff; border-radius:50%; }
.journey-trigger__plus::before,.journey-trigger__plus::after { content:""; position:absolute; top:50%; left:50%; background:currentColor; border-radius:1px; transform:translate(-50%,-50%); }
.journey-trigger__plus::before { width:12px; height:2px; }
.journey-trigger__plus::after { width:2px; height:12px; }
.journey-row.is-open .journey-trigger__plus { transform:rotate(45deg); color:white; background:var(--j-accent); border-color:var(--j-accent); }
.journey-trigger:focus-visible,.journey-step-nav a:focus-visible,.journey-return-link:focus-visible,.journey-link-list a:focus-visible { outline:3px solid #3b82f6; outline-offset:4px; border-radius:5px; }
/* T9-09: summaries remain complete on closed cards; the primary insight must not require expansion. */
.journey-card__summary { color:#48576a; font-size:1rem; line-height:1.65; margin:9px 60px 0 0; overflow-wrap:anywhere; }
.journey-panel { border-top:1px solid #e5edf2; padding:23px; }
.journey-panel[hidden] { display:none !important; }
.journey-panel__grid { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(210px,.7fr); gap:25px; }
.journey-panel__story { min-width:0; overflow-wrap:anywhere; }
.journey-panel__story .md-content { max-width:100%; }
.journey-panel__story .md-content > :first-child { margin-top:0; }
.journey-panel__story .md-content h2, .journey-panel__story .md-content h3 { font-size:1.08rem; }
.journey-panel__links { min-width:0; background:#f7fafb; border:1px solid #e3edf3; border-radius:12px; padding:16px; align-self:start; }
.journey-panel__links h3 { margin:0 0 9px; font-size:.79rem; text-transform:uppercase; color:#56697c; letter-spacing:.04em; }
.journey-panel__links h3:not(:first-child) { margin-top:19px; }
.journey-link-list { margin:0; padding:0; list-style:none; display:grid; gap:9px; }
.journey-link-list a { display:inline-block; color:var(--j-accent-text); text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere; font-size:.84rem; line-height:1.5; }
.journey-link-list a:hover { color:#1e40af; }
.journey-lang { display:inline-block; margin-left:5px; font-size:.74rem; color:#66788b; }
.journey-returns { margin-top:21px; padding:15px 18px; background:#f3f8ff; border-left:3px solid var(--j-accent); border-radius:0 11px 11px 0; }
.journey-returns h3 { color:#1e40af; margin:0 0 10px; font-size:.91rem; }
.journey-returns ul { margin:0; padding-left:19px; }
.journey-returns li { margin:7px 0; font-size:.87rem; }
.journey-returns li p { margin:3px 0 9px; font-size:.83rem; color:#475569; }
.journey-return-link { color:var(--j-accent-text); font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.journey-step-nav { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; margin-top:22px; border-top:1px solid #e3e9f1; padding-top:16px; }
/* Journey Previous/Next are secondary pill buttons, matching the site's teal .btn-secondary family. */
.journey-step-nav a { border:1px solid #0f766e; color:#0f766e; background:#fff; border-radius:999px; padding:9px 14px; font-size:.84rem; font-weight:750; }
.journey-step-nav a:hover { background:#ecfdf5; box-shadow:0 1px 4px rgba(15,23,42,.08); }
.journey-step-nav a:last-child { margin-left:auto; }
.journey-row.is-return-target .journey-marker { animation:journey-target-pulse 1.1s ease 2; }
@keyframes journey-target-pulse { 35% { box-shadow:0 0 0 10px #bfdbfe,0 0 0 17px #3b82f625; } }
.framework-journey-return { margin:0 0 15px; padding:10px 13px; border-radius:9px; background:#eff6ff; border:1px solid #bfdbfe; font-size:.89rem; }
.framework-journey-return a { color:#1d4ed8; text-decoration:underline; text-underline-offset:3px; font-weight:700; }
@media (max-width:700px) {
  .journey-intro { padding:20px 16px 0; }
  .journey-inner { padding:24px 12px 42px; }
  .journey-hero__inner { padding:17px 16px 18px; }
  .journey-contact-bar { min-height:52px; padding:6px 0; }
  .journey-contact-bar__inner { padding:0 16px; }
  .journey-contact-link { padding:9px 13px; min-height:40px; }
  /* T9-06/07/08: one mobile layout, not three intermediate releases. */
  .journey-help { margin:0; }
  .journey-paths { display:none; }
  .journey-row { position:relative; grid-template-columns:minmax(0,1fr); }
  .journey-stages { gap:18px; }
  /* Keep the existing marker in the DOM; position it inside the full-width
     card rather than reserving a separate rail. Let taps reach the card. */
  .journey-rail { position:absolute; top:15px; left:15px; z-index:2; padding:0; pointer-events:none; }
  .journey-marker { width:32px; height:32px; font-size:.75rem; box-shadow:none; }
  .journey-card__heading { padding:15px; }
  .journey-card__meta { min-height:32px; padding-left:44px; margin-bottom:8px; }
  /* Stage number is visible in the badge; retain localized Stage NN text
     for screen readers without repeating the numeral in the visual row. */
  .journey-card__stage-label { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; white-space:nowrap; clip-path:inset(50%); border:0; }
  .journey-card__summary { margin-right:0; }
  .journey-trigger__title { font-size:1.14rem; min-width:0; overflow-wrap:anywhere; }
  .journey-trigger__action > [data-journey-action] { display:none; }
  .journey-panel { padding:17px 15px; }
  .journey-panel__grid { grid-template-columns:minmax(0,1fr); gap:18px; }
  .journey-returns { padding:13px 11px; }
}
@media (prefers-reduced-motion:reduce) {
  .journey-row.is-return-target .journey-marker { animation:none; }
  .journey-trigger__plus { transition:none; }
}

/* =========================================================
   PROOFS (Testimonials)
   ========================================================= */

/* References has the same outer content width as Petr's Journey timeline.
   Limit this adjustment to the References route; About/Home cards keep their widths. */
.proofs-page > .container {
    max-width: 1120px;
    padding: 0 24px;
}

@media (max-width: 700px) {
    .proofs-page > .container { padding: 0 12px; }
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.testimonial-card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 1.5rem;
    background: #fff;
}

.testimonial-card--highlight {
    border: 1px solid #b5c9e6;
    border-left: 4px solid #3b82f6;
    background: #f3f8ff;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.07);
}

.testimonial-text {
    margin-top: 0.75rem;
    margin-bottom: 1rem;
}

.testimonial-meta {
    font-size: 0.9rem;
    opacity: 0.8;
}

.testimonial-meta a {
    color: inherit;
    text-decoration: underline;
}

.testimonial-meta a:hover {
    opacity: 0.8;
}

.proofs-cta {
    margin-top: 3rem;
    padding: 2rem;
    background: #111827; /* matches your dark hero tone */
    color: #f9fafb;
    border-radius: 12px;
}

.proofs-cta h2 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-size: 1.4rem;
}

.proofs-cta p {
    margin: 0 0 1.25rem;
    max-width: 40rem;
    opacity: 0.95;
}

/* =========================================================
   FORMS + ALERTS (Client zone)
   ========================================================= */

.form-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 1px 8px rgba(15, 23, 42, 0.04);
    max-width: 520px;
}

.form-field {
    margin-bottom: 14px;
}

.form-field label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
}

.form-field input {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #d1d5db;
    background: #fff;
    font-size: 1rem;
}

.form-field textarea {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #d1d5db;
    background: #fff;
    font-size: 1rem;
    min-height: 140px; /* ~6+ lines, depends on font/line-height */
    resize: vertical;
}

.form-field input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.form-field textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.form-help {
    margin-top: 12px;
}

.alert {
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    margin: 14px 0;
}

.alert--error {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

.link {
    text-decoration: underline;
}

.muted {
    color: #6b7280;
}

.small {
    font-size: 0.9rem;
}

.card-actions {
    margin-top: 14px;
}

/* =========================
   Contact page
   ========================= */

/* Contact page: simple separator between booking and message form */
.contact-divider {
    margin: 18px 0 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #6b7280;
    font-size: 0.9rem;
}

.contact-divider::before,
.contact-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}

/* =========================
   Generic form controls
   Used across client pages (search, etc.)
   ========================= */

/* Generic form controls (used across client pages like search) */
/* NOTE: .form-select is a legacy alias used in a few places. Prefer .form-input everywhere. */
.form-input,
.form-select {
    width: 100%;
    font: inherit;
    color: var(--text);
    background: rgba(255,255,255,0.85);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 12px;
    min-height: 42px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}

/* Select needs a bit of breathing room on the right for the native arrow */
select.form-input,
select.form-select {
    padding-right: 34px;
}

/* Color input helper (used in Account settings, etc.) */
input[type="color"].form-input--color {
    width: 66px;
    padding: 0;
    min-height: 42px;
    border-radius: 12px;
}

.form-input:focus,
.form-select:focus {
    outline: none;
    background: #fff;
    border-color: rgba(70, 120, 255, 0.60);
    box-shadow: 0 0 0 3px rgba(70, 120, 255, 0.15);
}
textarea.form-input,
textarea.form-select {
    min-height: 90px;
    resize: vertical;
}

/* Generic form layout helpers */
.form-row{
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-bottom:14px;
}

/* Split layout: label on the left (desktop), stacked on mobile */
.form-row--split{
    display:grid;
    grid-template-columns: minmax(140px, 220px) 1fr;
    column-gap: 14px;
    row-gap: 6px;
    align-items: start;
}
.form-row--split .form-control{
    min-width: 0;
}
@media (max-width: 700px) {
    .form-row--split{
        display:flex;
        flex-direction:column;
        gap:6px;
    }
    .form-row--split .form-control{
        width:100%;
    }
}

.form-label{
    font-weight:600;
    font-size:0.95rem;
    color:#0f172a;
}

.form-required{
    color: rgba(185, 28, 28, 0.9);
    font-weight: 700;
}

.form-help{
    font-size:0.9rem;
    color: rgba(15, 23, 42, 0.70);
}

/* Inline form row group (used in admin editors for selectors / copy tools) */
.form-inline {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
    flex-wrap: wrap;
}
.form-inline .form-row {
    margin: 0;
}
.form-inline .form-label {
    margin-bottom: 0.25rem;
}
.card.success,
.card.error,
.card.warn {
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    margin: 14px 0;
    background: #fff;
}
.card.success { border-left: 4px solid #2a8f5b; }
.card.error { border-left: 4px solid #b23b3b; background: #fef2f2; border-color: #fecaca; }
.card.warn { border-left: 4px solid #b77a00; background: #fffbeb; border-color: #fde68a; }

/* =========================================================
   CONTACT PAGE
   - Inline Calendly embed expansion (no modal / popup)
   ========================================================= */

.calendly-inline-container {
    margin-top: 12px;
    overflow: hidden;
    transition: max-height 200ms ease, opacity 200ms ease;
}

.calendly-inline-container.is-collapsed {
    max-height: 0;
    opacity: 0;
}

.calendly-inline-container.is-expanded {
    /* keep this larger than the inline widget height */
    max-height: 900px;
    opacity: 1;
}

/* PAE1 Gate 5 founder refinement: call action above the pricing explanation; prices remain visible below the optional inline widget. */
.contact-page { background: #f4f6fa; }
.contact-page h1 { margin-top: 0; color:#17243a; }
.contact-page__intro { max-width:75ch; line-height:1.7; color:#475569; margin-bottom:24px; }
.contact-consultation {
    padding:clamp(20px,3.5vw,34px);
    border:1px solid #dce3ee;
    border-radius:17px;
    background:#fff;
    box-shadow:0 12px 30px rgba(11,28,54,.08);
}
.contact-consultation > h2 { font-size:clamp(1.45rem,2.4vw,1.85rem); margin:0 0 14px; color:#17243a; }
.contact-consultation__explanation { margin:0; max-width:75ch; color:#475569; line-height:1.7; }
.contact-consultation .pae1-pricing { margin-top:24px; padding-top:22px; }
.contact-consultation__booking { margin-top:25px; }
.contact-consultation__booking .btn-primary { min-height:51px; padding:12px 23px; border-radius:10px; line-height:1.4; font-weight:700; }
.contact-consultation__booking .btn-primary:focus-visible { outline:3px solid #93c5fd; outline-offset:3px; }
/* Open-hour invitation is part of Contact, not another conversion card. */
.contact-open-hour {
    margin-top: 34px;
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: clamp(22px, 3vw, 34px);
    align-items: start;
}
.contact-open-hour__invitation { min-width: 0; }
.contact-open-hour__invitation > h2 {
    margin: 0 0 12px;
    font-size: clamp(1.4rem, 2.25vw, 1.7rem);
    line-height: 1.35;
    color: #17243a;
}
.contact-open-hour__intro {
    margin: 0 0 17px;
    color: #475569;
    line-height: 1.7;
}
.contact-open-hour__when, .contact-open-hour__facts {
    margin: 0 0 8px;
    color: #334155;
    line-height: 1.6;
}
.contact-open-hour__when strong { font-weight: 600; }
.contact-open-hour__facts { font-size: .94rem; color: #475569; }
/* Only the dated event widget has a border; no coloured theme or outer card. */
.contact-open-hour__event {
    min-width: 0;
    padding: 19px 18px;
    border: 1px solid #dce3ee;
    border-radius: 10px;
}
.contact-open-hour__event > h3 {
    margin: 0 0 14px;
    color: #17243a;
    font-size: 1.12rem;
    line-height: 1.45;
}
.contact-open-hour__format { margin: 0 0 13px; color: #475569; line-height: 1.6; }
.contact-open-hour__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 7px;
    color: #1d4ed8;
    font-weight: 600;
    line-height: 1.35;
    text-underline-offset: 3px;
}
.contact-open-hour__link:focus-visible { outline: 3px solid #93c5fd; outline-offset: 3px; }
.contact-page .contact-divider { margin: 32px 0; }
.contact-message { max-width: 820px; }
.contact-message > h2 { margin-bottom: 12px; }
.contact-message > p { color: #475569; line-height: 1.65; }
@media (max-width: 768px) {
    .contact-consultation { padding: 22px 17px; }
    .contact-consultation__booking .btn-primary { width: 100%; }
    .contact-open-hour { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 30px; }
    .contact-open-hour__event { max-width: 460px; }
}

/* Calendly chooses its responsive UI using the embed's available width.
   On desktop/tablet, let only the booking area use the Contact card's full
   width (the same as Homepage); retain padding for the text, CTA and prices.
   Narrow phones keep the original inset so the page layout does not change. */
@media (min-width: 680px) {
    .contact-consultation > .calendly-inline-container {
        margin-inline: calc(-1px - clamp(20px, 3.5vw, 34px));
    }
}
@media (min-width: 680px) and (max-width: 768px) {
    .contact-consultation > .calendly-inline-container {
        margin-inline: -18px; /* 17px mobile card padding + 1px border */
    }
}

/* =========================
   Cookie consent + embeds
   ========================= */

/* Calendly popup: ensure it stays above footer/sticky elements */
.calendly-overlay,
.calendly-popup,
.calendly-popup-content {
    z-index: 999999 !important;
}


/* Cookie consent (subtle toast) */
.cookie-consent{
  position:fixed;
  right:16px;
  bottom:16px;
  max-width:380px;
  background:rgba(18,18,18,.92);
  color:#fff;
  border-radius:12px;
  padding:12px 12px;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  z-index:9999;
  font-size:14px;
  line-height:1.35;
}
.cookie-consent__actions{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:10px;
  flex-wrap:wrap;
}

/* Cookie consent: normalize action UI (shared button styles are tuned for light sections). */
.cookie-consent__actions .btn-primary,
.cookie-consent__actions .btn-secondary{
  font-size:14px; /* keep all actions visually consistent */
  line-height:1;
  padding:10px 16px;
}

/* Cookie consent: make "Settings" link readable on the dark toast background. */
.cookie-consent .cookie-link{
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  opacity:.9;
  color:#fff;
  text-decoration:underline;
}
.cookie-consent .cookie-link:hover{ opacity:1; }
.cookie-consent .cookie-link:focus-visible{
  outline:2px solid rgba(255,255,255,.65);
  outline-offset:2px;
  border-radius:6px;
}

/* Cookie consent: inline settings (no modal) */
.cookie-consent__settings{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.15);
}
.cookie-consent__settings-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px;
}
.cookie-consent__settings-close{
  background:none;
  border:none;
  color:#fff;
  font-size:20px;
  cursor:pointer;
  line-height:1;
  opacity:.75;
}
.cookie-consent__settings-row{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:14px;
}
.cookie-consent__settings-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:10px;
}

/* =========================
   Client Zone – Framework
   ========================= */

.framework-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.framework-header__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.framework-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 18px;
}

@media (max-width: 900px) {
    .framework-layout {
        grid-template-columns: 1fr;
    }
}

.framework-sidebar {
    position: sticky;
    top: 12px;
    align-self: start;
}

/* Mobile node picker (shown only on smaller screens) */
.framework-node-picker {
    display: none;
    margin-bottom: 12px;
}

/* Hide the native select on mobile – we show a custom picker instead. */
.framework-node-picker__select {
    display: block;
}

.framework-node-picker__trigger {
    display: none;
}

@media (max-width: 900px) {
    .framework-node-picker__select {
        display: none;
    }
    .framework-node-picker__trigger {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 12px 12px;
        border-radius: 12px;
        border: 1px solid #e5e7eb;
        background: #fff;
        color: inherit;
        text-decoration: none;
    }
    .framework-node-picker__triggerChev {
        opacity: 0.7;
        font-size: 0.95rem;
    }
}

/* Lightweight modal (CSS :target) for the mobile node picker */
.im-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 60;
}

.im-modal:target {
    display: block;
}

.im-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
}

.im-modal__sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.18);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.im-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid #eef2f7;
}

.im-modal__title {
    font-weight: 600;
}

.im-modal__close {
    text-decoration: none;
    color: inherit;
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #fff;
}

.im-modal__body {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.im-modal__list {
    list-style: none;
    padding: 8px;
    margin: 0;
}

.im-modal__item {
    margin: 6px 0;
}

.im-modal__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: inherit;
    text-decoration: none;
}

.im-modal__link--active {
    border-color: #111827;
}

.im-modal__indent {
    display: inline-block;
    flex: 0 0 auto;
}

@media (max-width: 900px) {
    .framework-node-picker {
        display: block;
    }
}

@media (max-width: 900px) {
    .framework-sidebar {
        position: static;
    }
    /* On mobile, use the node picker instead of the long tree */
    .framework-sidebar .framework-tree {
        display: none;
    }
}

.framework-tree,
.framework-admin-tree {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.framework-tree ul,
.framework-admin-tree ul {
    list-style: none;
    padding-left: 14px;
    margin: 6px 0 0;
}

.framework-tree__item {
    margin: 4px 0;
}

.framework-tree__link {
    display: block;
    padding: 8px 10px;
    border-radius: 10px;
    text-decoration: none;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: inherit;
}

.framework-tree__link:hover {
    border-color: #d1d5db;
}

.framework-tree__link--active {
    border-color: #111827;
}

.framework-node__desc {
    margin-top: 10px;
    line-height: 1.55;
    margin-bottom: 18px;
}

.framework-node__header {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
}

.framework-node__customize {
    margin: 0;
    flex: 0 0 auto;
}

.customization-banner {
    margin-top: 12px;
    margin-bottom: 12px;
}

.framework-node__content {
    margin-top: 18px;
}

/* Unify typography between framework node summary and node content (rendered blocks) */
.framework-node__content .mat-richtext {
    font-size: 1rem;
    line-height: 1.55;
}
.framework-node__content .mat-ul li {
    line-height: 1.55;
}

/* Make links distinguishable inside rendered Content blocks */
.framework-node__content .mat-richtext a,
.framework-node__content .mat-callout a,
.framework-node__content .mat-ul a {
    text-decoration: underline dotted;
    text-underline-offset: 2px;
}

.framework-node__content .mat-richtext a:hover,
.framework-node__content .mat-callout a:hover,
.framework-node__content .mat-ul a:hover {
    text-decoration-style: solid;
}

.framework-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-bottom: 10px;
    font-size: 0.9rem;
    color: #6b7280;
}

.framework-breadcrumbs a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(17, 24, 39, 0.18);
}

.framework-breadcrumbs a:hover {
    border-bottom-color: rgba(17, 24, 39, 0.45);
}

.framework-breadcrumbs__sep {
    opacity: 0.7;
}

.divider {
    border: none;
    border-top: 1px solid #e5e7eb;
    margin: 16px 0;
}

.framework-admin-tree__row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    padding: 10px 8px;
    border-bottom: 1px solid #e5e7eb;
}

.framework-admin-tree__item:last-child .framework-admin-tree__row {
    border-bottom: none;
}

.framework-admin-tree__title {
    font-weight: 600;
}

.framework-admin-tree__meta {
    margin-top: 4px;
    font-size: 0.9rem;
}

.framework-admin-tree__actions {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.btn-small {
    padding: 8px 10px;
    font-size: 0.9rem;
}

.framework-admin-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 900px) {
    .framework-admin-grid {
        grid-template-columns: 1fr;
    }
}

.framework-admin-i18n {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

/* =========================
   Client Zone – Framework layout
   ========================= */

/* =========================
   Client Zone – Framework
   ========================= */

.framework-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.framework-header__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.framework-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 18px;
}

@media (max-width: 900px) {
    .framework-layout {
        grid-template-columns: 1fr;
    }
}

.framework-sidebar {
    position: sticky;
    top: 12px;
    align-self: start;
}

.framework-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-bottom: 10px;
    font-size: 0.9rem;
    color: #6b7280;
}

.framework-breadcrumbs a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(17, 24, 39, 0.18);
}

.framework-breadcrumbs a:hover {
    border-bottom-color: rgba(17, 24, 39, 0.45);
}

.framework-breadcrumbs__sep {
    opacity: 0.7;
}

.divider {
    border: none;
    border-top: 1px solid #e5e7eb;
    margin: 16px 0;
}

/* =========================
   Client Zone – Framework mobile picker
   ========================= */

/* Mobile node picker (shown only on smaller screens) */
.framework-node-picker {
    display: none;
    margin-bottom: 12px;
}

/* Hide the native select on mobile – we show a custom picker instead. */
.framework-node-picker__select {
    display: block;
}

.framework-node-picker__trigger {
    display: none;
}

@media (max-width: 900px) {
    .framework-node-picker__select {
        display: none;
    }
    .framework-node-picker__trigger {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 12px 12px;
        border-radius: 12px;
        border: 1px solid #e5e7eb;
        background: #fff;
        color: inherit;
        text-decoration: none;
    }
    .framework-node-picker__triggerChev {
        opacity: 0.7;
        font-size: 0.95rem;
    }
}

/* Lightweight modal (CSS :target) for the mobile node picker */
.im-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 60;
}

.im-modal:target {
    display: block;
}

.im-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
}

.im-modal__sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.18);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.im-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid #eef2f7;
}

.im-modal__title {
    font-weight: 600;
}

.im-modal__close {
    text-decoration: none;
    color: inherit;
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #fff;
}

.im-modal__body {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.im-modal__list {
    list-style: none;
    padding: 8px;
    margin: 0;
}

.im-modal__item {
    margin: 6px 0;
}

.im-modal__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: inherit;
    text-decoration: none;
}

.im-modal__link--active {
    border-color: #111827;
}

.im-modal__indent {
    display: inline-block;
    flex: 0 0 auto;
}

@media (max-width: 900px) {
    .framework-node-picker {
        display: block;
    }
}

@media (max-width: 900px) {
    .framework-sidebar {
        position: static;
    }
    /* On mobile, use the node picker instead of the long tree */
    .framework-sidebar .framework-tree {
        display: none;
    }
}

/* =========================
   Client Zone – Framework tree
   ========================= */

.framework-tree,
.framework-admin-tree {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.framework-tree ul,
.framework-admin-tree ul {
    list-style: none;
    padding-left: 14px;
    margin: 6px 0 0;
}

.framework-tree__item {
    margin: 4px 0;
}

.framework-tree__link {
    display: block;
    padding: 8px 10px;
    border-radius: 10px;
    text-decoration: none;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: inherit;
}

.framework-tree__link:hover {
    border-color: #d1d5db;
}

.framework-tree__link--active {
    border-color: #111827;
}

.framework-node__desc {
    margin-top: 10px;
    line-height: 1.55;
    margin-bottom: 18px;
}

.framework-node__content {
    margin-top: 18px;
}

/* Unify typography between framework node summary and node content (rendered blocks) */
.framework-node__content .mat-richtext {
    font-size: 1rem;
    line-height: 1.55;
}
.framework-node__content .mat-ul li {
    line-height: 1.55;
}


/* Phase 2.4: Better hierarchy clarity in framework navigation */
.framework-tree ul {
    border-left: 1px solid #eef2f7;
    margin-left: 10px;
    padding-left: 12px;
}
.framework-tree__link--depth0 {
    font-weight: 600;
}
.framework-tree__link--depth1,
.framework-tree__link--depth2,
.framework-tree__link--depth3,
.framework-tree__link--depth4,
.framework-tree__link--depth5 {
    background: #fbfcfe;
}
.framework-tree__link--depth2,
.framework-tree__link--depth3,
.framework-tree__link--depth4,
.framework-tree__link--depth5 {
    background: #f9fafb;
}
.framework-tree__item--depth2 .framework-tree__link,
.framework-tree__item--depth3 .framework-tree__link,
.framework-tree__item--depth4 .framework-tree__link,
.framework-tree__item--depth5 .framework-tree__link {
    font-size: 0.95rem;
}
.framework-tree__item--depth3 .framework-tree__link,
.framework-tree__item--depth4 .framework-tree__link,
.framework-tree__item--depth5 .framework-tree__link {
    opacity: 0.95;
}

/* Mobile picker list depth cues */
.im-modal__link--depth0 {
    font-weight: 600;
}
.im-modal__link--depth1 { margin-left: 8px; width: calc(100% - 8px); }
.im-modal__link--depth2 { margin-left: 16px; width: calc(100% - 16px); }
.im-modal__link--depth3 { margin-left: 24px; width: calc(100% - 24px); }
.im-modal__link--depth4 { margin-left: 32px; width: calc(100% - 32px); }
.im-modal__link--depth5 { margin-left: 40px; width: calc(100% - 40px); }
.im-modal__link--depth2,
.im-modal__link--depth3,
.im-modal__link--depth4,
.im-modal__link--depth5 {
    font-size: 0.95rem;
    opacity: 0.95;
}

/* T9-16: public-only Framework preview orientation and selection. */
.framework-preview .framework-header { margin-bottom: 10px; }
.framework-preview__intro { max-width: 850px; margin-bottom: 19px; }
.framework-preview__intro p { line-height: 1.55; margin: 0 0 11px; }
/* Node changes from the mobile picker keep the selection and its detail in view. */
.framework-preview #frameworkNodeSelector { scroll-margin-top: 1.5rem; }
.framework-preview__journey-context { max-width: 850px; margin: 0 0 8px; font-size: .9rem; color: #475569; line-height: 1.5; }
.framework-preview .framework-tree__link--active,
.framework-preview .framework-tree__link--active[class*="framework-tree__link--depth"] {
  background: #e8f1ff;
  border: 2px solid #2563eb;
  border-left-width: 5px;
  padding-left: 7px;
  color: #1e3a8a;
  font-weight: 700;
  opacity: 1;
}
.framework-preview .framework-tree__link:focus-visible,
.framework-preview .framework-node-picker__trigger:focus-visible,
.framework-preview .im-modal__link:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 2px;
}
.framework-preview__empty { padding: 20px 22px; border: 1px solid #e1e7f0; border-radius: 12px; background: #fff; color: #475569; }
.framework-preview__empty p { margin: 0; line-height: 1.55; }
.framework-preview .im-modal__link--active { background: #e8f1ff; border: 2px solid #2563eb; border-left-width: 5px; color: #1e3a8a; font-weight: 700; opacity: 1; }
@media (max-width: 900px) {
  .framework-preview .framework-node-picker__trigger--selected { background: #e8f1ff; border-color: #2563eb; font-weight: 700; }
  .framework-preview__intro { margin-bottom: 15px; }
  .framework-preview__empty { padding: 18px 16px; }
}

/* =========================
   Client Zone – Framework admin
   ========================= */

.framework-admin-tree__row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    padding: 10px 8px;
    border-bottom: 1px solid #e5e7eb;
}

.framework-admin-tree__item:last-child .framework-admin-tree__row {
    border-bottom: none;
}

.framework-admin-tree__title {
    font-weight: 600;
}

.framework-admin-tree__meta {
    margin-top: 4px;
    font-size: 0.9rem;
}

.framework-admin-tree__actions {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.btn-small {
    padding: 8px 10px;
    font-size: 0.9rem;
}

.framework-admin-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 900px) {
    .framework-admin-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Framework admin edit/create: align form control styling with materials editor --- */
.framework-edit-page .form-row{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:14px;
}

.framework-edit-page .form-label{
  font-weight:600;
  font-size:0.95rem;
  color:#0f172a;
}

.framework-edit-page .form-input{
  width:100%;
  box-sizing:border-box;
  padding:0.6rem 0.75rem;
  border-radius:12px;
  border:1px solid rgba(15,23,42,0.18);
  background:#fff;
  color:#0f172a;
  font:inherit;
  line-height:1.25;
  outline:none;
  transition: box-shadow .15s ease, border-color .15s ease;
}

.framework-edit-page input.form-input,
.framework-edit-page select.form-input{
  min-height:44px;
}

.framework-edit-page textarea.form-input{
  min-height:180px;
  resize:vertical;
}

.framework-edit-page .form-input:focus{
  border-color:rgba(37,99,235,0.35);
  box-shadow:0 0 0 4px rgba(37,99,235,0.12);
}

.framework-admin-i18n {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

/* =========================
   Materials (Phase 2 v1)
   ========================= */

.materials-section {
    margin-top: 6px;
}

.materials-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.materials-meta {
    margin-top: 6px;
}

.materials-list {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
    display: grid;
    gap: 10px;
}

.materials-list__item {
    padding: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    background: rgba(255,255,255,0.02);
}

.materials-list__link {
    font-weight: 700;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.materials-list__title {
    display: inline-block;
    min-width: 0;
    line-height: 1.3;
}

.materials-list__chev {
    opacity: 0.7;
    font-weight: 800;
    flex: 0 0 auto;
    transform: translateY(-1px);
}

.materials-list__link:hover .materials-list__chev {
    opacity: 1;
}

.materials-list__meta {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.materials-list__summary {
    margin-top: 6px;
}

.materials-list__admin {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.materials-list__admin-status {
    margin-right: auto;
}

.materials-list__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.materials-admin-i18n {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

@media (max-width: 900px) {
    .materials-admin-i18n {
        grid-template-columns: 1fr;
    }
}

.materials-admin-editorbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.materials-admin-editorbar--spaced {
    margin-top: 10px;
}

.materials-admin-editorbar--inline {
    display: inline-flex;
    align-items: center;
}

.materials-admin-editorbar__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.materials-admin-assetbox {
    margin-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 12px;
}

.materials-admin-assetbox__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.materials-admin-assetbox__grid {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}

@media (max-width: 900px) {
    .materials-admin-assetbox__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.materials-admin-asset {
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255,255,255,0.02);
}

.materials-admin-asset img {
    width: 100%;
    height: 110px;
    object-fit: cover;
    display: block;
}

.materials-admin-asset__meta {
    padding: 8px;
}

/* -------- Materials admin block editor (Phase 2.1) -------- */
.materials-blocks-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.materials-blocks-toolbar__left,
.materials-blocks-toolbar__right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.materials-blocks-toolbar__label {
    margin: 0;
}
.materials-autosave {
    font-size: 0.9rem;
    color: var(--text-muted);
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(255,255,255,0.55);
}
.materials-blocks-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.materials-block {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(255,255,255,0.65);
    overflow: hidden;
}
.materials-block__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: rgba(0,0,0,0.03);
    border-bottom: 1px solid var(--border);
}
.materials-block__title {
    font-weight: 600;
    display: flex;
    gap: 10px;
    align-items: center;
}
.materials-block__type {
    font-size: 0.85rem;
    color: var(--text-muted);
    border: 1px solid var(--border);
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.7);
}
.materials-block__controls {
    display: flex;
    align-items: center;
    gap: 6px;
}
.materials-block__body {
    padding: 12px;
}
.materials-block .form-row {
    margin-bottom: 10px;
}
.materials-block textarea.form-input {
    width: 100%;
    font: inherit;
    color: var(--text);
    background: rgba(255,255,255,0.85);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 12px;
    min-height: 42px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}

/* Generic form controls (used across client pages like search) */
.form-input {
    width: 100%;
    font: inherit;
    color: var(--text);
    background: rgba(255,255,255,0.85);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 12px;
    min-height: 42px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}

/* Select needs a bit of breathing room on the right for the native arrow */
select.form-input {
    padding-right: 34px;
}

.form-input:focus {
    outline: none;
    background: #fff;
    border-color: rgba(70, 120, 255, 0.60);
    box-shadow: 0 0 0 3px rgba(70, 120, 255, 0.15);
}
textarea.form-input {
    min-height: 90px;
    resize: vertical;
}
.materials-admin-asset { cursor: pointer; }
.materials-admin-asset:hover { transform: translateY(-1px); }

/* Make admin cards a bit calmer */
.framework-header { gap: 14px; }
.card.success,
.card.error,
.card.warn {
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    margin: 14px 0;
    background: #fff;
}
.card.success { border-left: 4px solid #2a8f5b; }
.card.error { border-left: 4px solid #b23b3b; background: #fef2f2; border-color: #fecaca; }
.card.warn { border-left: 4px solid #b77a00; background: #fffbeb; border-color: #fde68a; }

.material-topbar {
    margin-bottom: 14px;
}

.material-title {
    margin-top: 8px;
}

.material-summary {
    margin-top: 8px;
}

.material-card {
    padding: 18px;
    max-width: 860px;
    margin: 0 auto;
}

.material-card .mat-h1,
.material-card .mat-h2,
.material-card .mat-h3,
.material-card .mat-h4 {
    line-height: 1.25;
    margin: 18px 0 10px;
}

.mat-richtext {
    font-size: 1.05rem;
    line-height: 1.75;
}

.mat-richtext p {
    margin: 0 0 12px;
}

.mat-richtext ul {
    margin: 0 0 12px 18px;
}

/* Make links distinguishable in rendered Content views */
.mat-richtext a,
.mat-callout a,
.mat-ul a {
    text-decoration: underline dotted;
    text-underline-offset: 2px;
}

.mat-richtext a:hover,
.mat-callout a:hover,
.mat-ul a:hover {
    text-decoration-style: solid;
}

.mat-figure {
    margin: 14px 0;
}

.mat-image {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 0;
    border: 1px solid rgba(255,255,255,0.08);
}

.mat-caption {
    margin-top: 8px;
    font-size: 0.95rem;
    opacity: 0.8;
}

.mat-callout {
    margin: 14px 0;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.03);
}

.mat-callout__title {
    font-weight: 800;
    margin-bottom: 6px;
}

.mat-callout--tip { border-color: rgba(0, 200, 120, 0.28); }
.mat-callout--warn { border-color: rgba(255, 180, 0, 0.28); }

/* Material viewer (client) */
.material-nav {
    max-width: 860px;
    margin: 14px auto 0;
}

.material-nav {
    margin-top: 14px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: center;
}

.material-nav > *:last-child {
    justify-self: end;
}

/* Search */
.search-card {
    max-width: 900px;
    margin: 0 auto;
    padding: 16px;
}

.search-form__row {
    display: grid;
    grid-template-columns: 1fr 110px auto;
    gap: 10px;
    align-items: center;
}

@media (max-width: 520px) {
    .search-form__row {
        grid-template-columns: 1fr;
    }
    .material-nav {
        grid-template-columns: 1fr;
    }
}

.search-meta {
    margin-top: 12px;
}

.search-results {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
    display: grid;
    gap: 12px;
}

.search-results__item {
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.03);
}


/* Node results: subtle visual separator */
.search-results--nodes .search-results__item {
    border-left: 4px solid rgba(255,255,255,0.14);
}

.search-results__title {
    font-weight: 800;
    text-decoration: none;
}

.search-results__meta {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.search-results__snippet {
    margin-top: 8px;
    line-height: 1.6;
}


@media (max-width: 900px) {
    .framework-admin-i18n {
        grid-template-columns: 1fr;
    }
}


/* --- Materials editor (admin) form controls: scoped so it won't affect the rest of the site --- */
.materials-edit-page .form-row{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:14px;
}

.materials-edit-page .form-label{
  font-weight:600;
  font-size:0.95rem;
  color:#0f172a;
}

.materials-edit-page .form-input{
  width:100%;
  box-sizing:border-box;
  padding:0.6rem 0.75rem;
  border-radius:12px;
  border:1px solid rgba(15,23,42,0.18);
  background:#fff;
  color:#0f172a;
  font:inherit;
  line-height:1.25;
  outline:none;
  transition: box-shadow .15s ease, border-color .15s ease;
}

.materials-edit-page input.form-input,
.materials-edit-page select.form-input{
  min-height:44px;
}

.materials-edit-page textarea.form-input{
  min-height:180px;
  resize:vertical;
}

.materials-edit-page .form-input:focus{
  border-color: rgba(15,118,110,.65);
  box-shadow: 0 0 0 4px rgba(15,118,110,.12);
}

/* Card action row spacing */
.materials-edit-page .card-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
  align-items:center;
}

/* Make the file chooser button match your secondary button style */
.materials-edit-page .materials-file-input{
  font:inherit;
  color:#0f172a;
  max-width:100%;
}

.materials-edit-page .materials-file-input::file-selector-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0.55rem 1.2rem;
  border-radius:999px;
  border:1px solid #0f766e;
  background:#ffffff;
  color:#0f766e;
  font-weight:500;
  font-size:0.95rem;
  cursor:pointer;
  margin-right:10px;
}

.materials-edit-page .materials-file-input::-webkit-file-upload-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0.55rem 1.2rem;
  border-radius:999px;
  border:1px solid #0f766e;
  background:#ffffff;
  color:#0f766e;
  font-weight:500;
  font-size:0.95rem;
  cursor:pointer;
  margin-right:10px;
}

/* Blocks toolbar alignment */
.materials-edit-page .materials-blocks-toolbar__left{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.materials-edit-page .materials-blocks-toolbar__right{
  display:flex;
  align-items:center;
  gap:10px;
}



/* Career navigation: A/B hook */
.pathway-hook-headline {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.pathway-hook-list {
    max-width: 720px;
    margin: 10px auto 14px auto;
    padding-left: 1.25rem;
    text-align: left;
    opacity: 0.9;
}

.pathway-hook-list li {
    margin: 6px 0;
}

/* Admin: A/B stats */
.ab-stats-h2 {
    margin: 0 0 12px 0;
    font-size: 1.1rem;
}

.ab-stats {
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 12px;
    overflow: hidden;
}

.ab-stats__row {
    display: grid;
    /* 6 columns: Variant + 5 metrics */
    grid-template-columns: 100px 1fr 1fr 1fr 1fr 1fr;
    gap: 12px;
    padding: 12px 12px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    align-items: start;
}

.ab-stats__row:last-child {
    border-bottom: 0;
}

.ab-stats__header {
    font-weight: 700;
    background: rgba(0,0,0,0.02);
}

.ab-stats__cell {
    min-width: 0;
}

.ab-stats__variant {
    text-align: left;
}

@media (max-width: 780px) {
    .ab-stats__row {
        grid-template-columns: 60px 1fr;
        grid-auto-rows: auto;
    }
    .ab-stats__header {
        display: none;
    }
    .ab-stats__cell {
        padding: 2px 0;
    }
}


/* Phase 2.4: Bullet list block */
.mat-ul {
    margin: 10px 0 10px 22px;
    padding-left: 14px;
}
.mat-ul li {
    margin: 6px 0;
}

.mat-ul--nested {
    margin: 6px 0 6px 18px;
    padding-left: 14px;
}

/* Phase 2.4: Better hierarchy clarity in framework navigation */
.framework-tree ul {
    border-left: 1px solid #eef2f7;
    margin-left: 10px;
    padding-left: 12px;
}
.framework-tree__link--depth0 {
    font-weight: 600;
}
.framework-tree__link--depth1,
.framework-tree__link--depth2,
.framework-tree__link--depth3,
.framework-tree__link--depth4,
.framework-tree__link--depth5 {
    background: #fbfcfe;
}
.framework-tree__link--depth2,
.framework-tree__link--depth3,
.framework-tree__link--depth4,
.framework-tree__link--depth5 {
    background: #f9fafb;
}
.framework-tree__item--depth2 .framework-tree__link,
.framework-tree__item--depth3 .framework-tree__link,
.framework-tree__item--depth4 .framework-tree__link,
.framework-tree__item--depth5 .framework-tree__link {
    font-size: 0.95rem;
}
.framework-tree__item--depth3 .framework-tree__link,
.framework-tree__item--depth4 .framework-tree__link,
.framework-tree__item--depth5 .framework-tree__link {
    opacity: 0.95;
}

/* Mobile picker list depth cues */
.im-modal__link--depth0 {
    font-weight: 600;
}
.im-modal__link--depth1 { margin-left: 8px; width: calc(100% - 8px); }
.im-modal__link--depth2 { margin-left: 16px; width: calc(100% - 16px); }
.im-modal__link--depth3 { margin-left: 24px; width: calc(100% - 24px); }
.im-modal__link--depth4 { margin-left: 32px; width: calc(100% - 32px); }
.im-modal__link--depth5 { margin-left: 40px; width: calc(100% - 40px); }
.im-modal__link--depth2,
.im-modal__link--depth3,
.im-modal__link--depth4,
.im-modal__link--depth5 {
    font-size: 0.95rem;
    opacity: 0.95;
}



/* Material type prefix (icons / labels) */
.mat-type-icon{
  display:inline-block;
  margin-right: .4rem;
  opacity: .9;
}
.material-title .mat-type-icon{ margin-right: .5rem; }
.mat-type-label{
  display:inline-block;
  margin-right: .4rem;
  font-weight: 500;
}


/* Contact page: simple separator between booking and message form */
.contact-divider {
    margin: 18px 0 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #6b7280;
    font-size: 0.9rem;
}
.contact-divider::before,
.contact-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}

/* Calendly popup: ensure it stays above footer/sticky elements */
.calendly-overlay,
.calendly-popup,
.calendly-popup-content {
    z-index: 999999 !important;
}


/* Cookie consent (subtle toast) */
.cookie-consent{
  position:fixed;
  right:16px;
  bottom:16px;
  max-width:380px;
  background:rgba(18,18,18,.92);
  color:#fff;
  border-radius:12px;
  padding:12px 12px;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  z-index:9999;
  font-size:14px;
  line-height:1.35;
}
.cookie-consent__actions{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:10px;
  flex-wrap:wrap;
}
.cookie-consent .cookie-link{
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  opacity:.9;
}

/* Cookie consent: inline settings (no modal) */
.cookie-consent__settings{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.15);
}
.cookie-consent__settings-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px;
}
.cookie-consent__settings-close{
  background:none;
  border:none;
  color:#fff;
  font-size:20px;
  cursor:pointer;
  line-height:1;
  opacity:.75;
}
.cookie-consent__settings-row{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:14px;
}
.cookie-consent__settings-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:10px;
}

/* =========================
   Materials – list
   ========================= */

/* =========================
   Materials (Phase 2 v1)
   ========================= */

.materials-section {
    margin-top: 6px;
}

.materials-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.materials-meta {
    margin-top: 6px;
}

.materials-list {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
    display: grid;
    gap: 10px;
}

.materials-list__item {
    padding: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    background: rgba(255,255,255,0.02);
}

.materials-list__link {
    font-weight: 700;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.materials-list__title {
    display: inline-block;
    min-width: 0;
    line-height: 1.3;
}

.materials-list__chev {
    opacity: 0.7;
    font-weight: 800;
    flex: 0 0 auto;
    transform: translateY(-1px);
}

.materials-list__link:hover .materials-list__chev {
    opacity: 1;
}

.materials-list__meta {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.materials-list__summary {
    margin-top: 6px;
}

.materials-list__admin {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.materials-list__admin-status {
    margin-right: auto;
}

.materials-list__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

/* =========================
   Materials – viewer (client)
   ========================= */

.material-topbar {
    margin-bottom: 14px;
}

.material-topbar__row {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    justify-content: space-between;
}

.material-topbar__actions {
    margin: 0;
    flex: 0 0 auto;
}

.material-title {
    margin-top: 8px;
}

.material-summary {
    margin-top: 8px;
}

.material-card {
    padding: 18px;
    max-width: 860px;
    margin: 0 auto;
}

.material-card .mat-h1,
.material-card .mat-h2,
.material-card .mat-h3,
.material-card .mat-h4 {
    line-height: 1.25;
    margin: 18px 0 10px;
}

.mat-richtext {
    font-size: 1.05rem;
    line-height: 1.75;
}

.mat-richtext p {
    margin: 0 0 12px;
}

.mat-richtext ul {
    margin: 0 0 12px 18px;
}

/* Markdown-rendered content should look identical to JSON Blocks rendered content */
.md-content {
    font-size: 1.05rem;
    line-height: 1.75;
}

.md-content p {
    margin: 0 0 12px;
}

.md-content ul,
.md-content ol {
    margin: 0 0 12px 18px;
}

.md-content li {
    line-height: 1.75;
}

.md-content ul ul,
.md-content ol ol,
.md-content ul ol,
.md-content ol ul {
    margin-top: 6px;
    margin-bottom: 6px;
}

.md-content h1,
.md-content h2,
.md-content h3,
.md-content h4 {
    line-height: 1.25;
    margin: 18px 0 10px;
}

/* Markdown blockquote (>) styling – keep in line with JSON Blocks viewer rhythm */
.md-content blockquote {
    margin: 14px 0;
    padding: 12px 14px;
    /* Match JSON Blocks tip callout border for consistent visual language */
    border: 1px solid rgba(0, 200, 120, 0.28);
    border-radius: 12px;
    background: rgba(255,255,255,0.03);
}

.md-content blockquote p:last-child {
    margin-bottom: 0;
}

.md-content a {
    text-decoration: underline dotted;
    text-underline-offset: 2px;
}

.md-content a:hover {
    text-decoration-style: solid;
}

/* Make links distinguishable in rendered Content views */
.mat-richtext a,
.md-content a,
.mat-callout a,
.mat-ul a {
    text-decoration: underline dotted;
    text-underline-offset: 2px;
}

.mat-richtext a:hover,
.md-content a:hover,
.mat-callout a:hover,
.mat-ul a:hover {
    text-decoration-style: solid;
}

.mat-figure {
    margin: 14px 0;
}

.mat-image {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 0;
    border: 1px solid rgba(255,255,255,0.08);
}

.mat-caption {
    margin-top: 8px;
    font-size: 0.95rem;
    opacity: 0.8;
}

.mat-callout {
    margin: 14px 0;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.03);
}

.mat-callout__title {
    font-weight: 800;
    margin-bottom: 6px;
}

.mat-callout--tip { border-color: rgba(0, 200, 120, 0.28); }
.mat-callout--warn { border-color: rgba(255, 180, 0, 0.28); }

/* Material viewer (client) */
.material-nav {
    max-width: 860px;
    margin: 14px auto 0;
}

.material-nav {
    margin-top: 14px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: center;
}

.material-nav > *:last-child {
    justify-self: end;
}

/* Phase 2.4: Bullet list block */
.mat-ul {
    margin: 10px 0 10px 22px;
    padding-left: 14px;
}
.mat-ul li {
    margin: 6px 0;
}

.mat-ul--nested {
    margin: 6px 0 6px 18px;
    padding-left: 14px;
}

/* Material type prefix (icons / labels) */
.mat-type-icon{
  display:inline-block;
  margin-right: .4rem;
  opacity: .9;
}
.material-title .mat-type-icon{ margin-right: .5rem; }
.mat-type-label{
  display:inline-block;
  margin-right: .4rem;
  font-weight: 500;
}

/* Accessible technical Markdown (public Blog and shared Content rendering). */
.md-content h1[id], .md-content h2[id], .md-content h3[id],
.md-content h4[id], .md-content h5[id], .md-content h6[id] {
    scroll-margin-top: 1.25rem;
}

.md-content .md-table-scroll {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 1rem 0;
    border: 1px solid #d3dae5;
    border-radius: 8px;
}

.md-content .md-table-scroll:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.md-content .md-table {
    border-collapse: collapse;
    width: 100%;
    min-width: max-content;
    font-size: 0.95rem;
    line-height: 1.5;
}

.md-content .md-table th,
.md-content .md-table td {
    padding: 0.55rem 0.7rem;
    border: 1px solid #d3dae5;
    vertical-align: top;
    max-width: 32rem;
    white-space: normal;
    overflow-wrap: anywhere;
}

.md-content .md-table th {
    background: #f1f5f9;
    text-align: left;
    font-weight: 650;
}

.md-content .md-table .md-table-align-right { text-align: right; font-variant-numeric: tabular-nums; }
.md-content .md-table .md-table-align-center { text-align: center; }
.md-content .md-table .md-table-align-left { text-align: left; }

/* Inline code is literal, readable and allowed to wrap on narrow screens. */
code.md-inline-code {
    padding: 0.08em 0.3em;
    border: 1px solid #dbe2ec;
    border-radius: 4px;
    background: #f1f5f9;
    color: inherit;
    font: 0.9em/1.35 ui-monospace, SFMono-Regular, Consolas, monospace;
    white-space: break-spaces;
    overflow-wrap: anywhere;
}

.md-content pre.md-code {
    position: relative;
    max-width: 100%;
    overflow-x: auto;
    padding: 1rem;
    margin: 1rem 0;
    border: 1px solid #d3dae5;
    border-radius: 8px;
    background: #f8fafc;
    line-height: 1.5;
    tab-size: 4;
}

.md-content .md-code code {
    display: block;
    width: max-content;
    min-width: 100%;
    white-space: pre;
    font: 0.92em/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.md-content .md-code-language {
    display: block;
    width: fit-content;
    color: #475569;
    font: 600 0.8rem/1.3 ui-monospace, SFMono-Regular, Consolas, monospace;
    margin-bottom: 0.45rem;
}

/*
 * Client Inserts (inline client annotations) inside rendered Content.
 *
 * Server renders insertion slots as DOM elements:
 * - .md-insert-slot (block)
 * - .md-insert-slot--li (li)
 *
 * Slots are present in the flow, but only the nearest one gets .is-active.
 *
 * Insert-origin elements receive .md-user-insert and are tinted with:
 *   --md-user-insert-color (default: #0f766e)
 */

.content-block[data-enable-client-inserts="1"] {
  position: relative;
}

/* Ensure insertion UI can sit *behind* the rendered content without affecting layout. */
.content-block[data-enable-client-inserts="1"] .md-content {
  position: relative;
  z-index: 2;
}

.md-user-insert {
  color: var(--md-user-insert-color, #0f766e);
}

.md-user-insert a {
  color: var(--md-user-insert-color, #0f766e);
}

.md-insert-slot {
  /* Slot elements must not affect layout when inactive. */
  position: relative;
  margin: 0;
  padding: 0;
  height: 0;
  overflow: visible;
}

.md-insert-slot--li {
  /* Keep the node in the DOM, but collapse it fully until active. */
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 0;
  font-size: 0;
  border: 0;
}

.md-insert-point {
  display: flex;
  opacity: 0;
  pointer-events: none;
  border: 0;
  padding: 0;
  background: transparent;
  font: inherit;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  /* Absolutely position the hover affordance so it never expands margins. */
  position: absolute;
  /* Put the plus "in the gutter". */
  left: -24px;
  right: 0;
  top: 0;
  transform: translateY(-50%);
  margin: 0;
  /* Render behind the content (md-content has z-index: 2). */
  z-index: 1;
}

.md-insert-slot.is-active {
  height: 0;
}

.md-insert-slot.is-active .md-insert-point,
.md-insert-slot:focus-within .md-insert-point {
  opacity: 1;
  pointer-events: auto;
}

.md-insert-slot--li.is-active {
  line-height: 0;
  font-size: 0;
}

.md-insert-plus {
  /* Styled to match .btn-primary (blue background, white plus). */
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: none;
  background: #3b82f6;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  line-height: 1;
  flex: 0 0 auto;
  /* Prevent inheriting font-size: 0 from .md-insert-slot--li */
  font-size: 0;
}

.md-insert-plus::before {
  content: "+";
  display: inline-block;
  font-size: 18px;
  line-height: 1;
  /* Optical alignment: center the glyph better inside the circle. */
  transform: translateY(-1px);
}

.md-insert-point:hover .md-insert-plus {
  background: #2563eb;
}

.md-insert-point:focus-visible .md-insert-plus {
  outline: 2px solid rgba(59, 130, 246, 0.45);
  outline-offset: 2px;
}

.md-insert-slot.is-active .md-insert-plus:hover {
  background: #2563eb;
}

.md-insert-line {
  flex: 1;
  height: 1px;
  background: rgba(0,0,0,0.12);
}

.md-insert-editor {
  margin: 8px 0 14px 0;
}

.md-insert-editor__card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  max-width: 760px;
}

.md-insert-editor__context-title {
  font-weight: 700;
  margin-bottom: 6px;
}

.md-insert-editor__context-pre {
  background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  padding: 10px;
  overflow: hidden;
  max-height: none;
  margin: 0 0 12px 0;
  /* No wrapping: we want exactly 3 lines + 3 lines (JS clamps to 40 chars). */
  white-space: pre;
  word-break: normal;
}

.md-insert-editor__context-pre--after {
  margin-top: 12px;
}

.md-insert-editor__ta {
  width: 100%;
  min-height: 110px;
  resize: vertical;
}

.md-insert-editor__actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 10px;
}

.md-user-insert-tools {
  display: none;
  margin-left: 10px;
  gap: 10px;
}

/* Show tools when hovering the insert-origin element */
.md-user-insert:hover .md-user-insert-tools,
li.md-user-insert:hover > .md-user-insert-tools {
  display: inline-flex;
}

.md-user-insert-tools button {
  pointer-events: auto;
}

/* =========================
   Materials – admin (edit/create)
   ========================= */

.materials-admin-i18n {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

@media (max-width: 900px) {
    .materials-admin-i18n {
        grid-template-columns: 1fr;
    }
}

.materials-admin-editorbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.materials-admin-editorbar--spaced {
    margin-top: 10px;
}

.materials-admin-editorbar--inline {
    display: inline-flex;
    align-items: center;
}

.materials-admin-editorbar__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.materials-admin-assetbox {
    margin-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 12px;
}

.materials-admin-assetbox__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.materials-admin-assetbox__grid {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}

@media (max-width: 900px) {
    .materials-admin-assetbox__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.materials-admin-asset {
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255,255,255,0.02);
}

.materials-admin-asset img {
    width: 100%;
    height: 110px;
    object-fit: cover;
    display: block;
}

.materials-admin-asset__meta {
    padding: 8px;
}

/* --- Materials editor (admin) form controls: scoped so it won't affect the rest of the site --- */
.materials-edit-page .form-row{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:14px;
}

.materials-edit-page .form-label{
  font-weight:600;
  font-size:0.95rem;
  color:#0f172a;
}

.materials-edit-page .form-input{
  width:100%;
  box-sizing:border-box;
  padding:0.6rem 0.75rem;
  border-radius:12px;
  border:1px solid rgba(15,23,42,0.18);
  background:#fff;
  color:#0f172a;
  font:inherit;
  line-height:1.25;
  outline:none;
  transition: box-shadow .15s ease, border-color .15s ease;
}

.materials-edit-page input.form-input,
.materials-edit-page select.form-input{
  min-height:44px;
}

.materials-edit-page textarea.form-input{
  min-height:180px;
  resize:vertical;
}

.materials-edit-page .form-input:focus{
  border-color: rgba(15,118,110,.65);
  box-shadow: 0 0 0 4px rgba(15,118,110,.12);
}

/* Card action row spacing */
.materials-edit-page .card-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
  align-items:center;
}

/* Make the file chooser button match your secondary button style */
.materials-edit-page .materials-file-input{
  font:inherit;
  color:#0f172a;
  max-width:100%;
}

.materials-edit-page .materials-file-input::file-selector-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0.55rem 1.2rem;
  border-radius:999px;
  border:1px solid #0f766e;
  background:#ffffff;
  color:#0f766e;
  font-weight:500;
  font-size:0.95rem;
  cursor:pointer;
  margin-right:10px;
}

.materials-edit-page .materials-file-input::-webkit-file-upload-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0.55rem 1.2rem;
  border-radius:999px;
  border:1px solid #0f766e;
  background:#ffffff;
  color:#0f766e;
  font-weight:500;
  font-size:0.95rem;
  cursor:pointer;
  margin-right:10px;
}

/* Blocks toolbar alignment */
.materials-edit-page .materials-blocks-toolbar__left{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.materials-edit-page .materials-blocks-toolbar__right{
  display:flex;
  align-items:center;
  gap:10px;
}

.materials-admin-asset { cursor: pointer; }
.materials-admin-asset:hover { transform: translateY(-1px); }

/* Content editor uses the same asset upload UI; hide the native file input and use a translated label. */
.im-file-input-hidden{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

.content-edit-page .materials-admin-upload{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

/* Prioritization tool: inline title edit */
.priorities-title-btn{
  appearance:none;
  border:none;
  background:transparent;
  padding:0;
  margin:0;
  font:inherit;
  color:inherit;
  text-align:left;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.priorities-title-btn:hover{
  text-decoration: underline;
}

.priorities-title-btn[disabled]{
  cursor: default;
  text-decoration: none;
  opacity: 0.75;
}

.priorities-title-btn[disabled] .priorities-title-lock{
  opacity: 0.6;
  font-size: 0.95em;
  transform: translateY(-1px);
}

.priorities-title-pencil{
  opacity:0.45;
  font-size: 0.95em;
  transform: translateY(-1px);
}

.priorities-title-btn:hover .priorities-title-pencil,
.priorities-title-btn:focus-visible .priorities-title-pencil{
  opacity:0.9;
}

.priorities-title-edit{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.priorities-title-edit .form-input{
  height: 34px;
  padding-top: 6px;
  padding-bottom: 6px;
}

.priorities-title-edit .btn-secondary{
  padding: 6px 10px;
}

/* Prioritization tool: small icon-only buttons (complete / postpone / details) */
.priorities-icon-btn{
  width: 34px;
  height: 34px;
  padding: 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Prioritization tool: subtle "task changed" flash highlight after list refresh */
.materials-admin-row.priorities-flash{
  animation: prioritiesFlash 2.6s ease-out 1;
}

@keyframes prioritiesFlash{
  0%   { background: rgba(59, 130, 246, 0.18); }
  45%  { background: rgba(59, 130, 246, 0.12); }
  100% { background: transparent; }
}

@media (prefers-reduced-motion: reduce){
  .materials-admin-row.priorities-flash{ animation: none; }
}


/* =========================
   Materials – blocks editor (admin)
   ========================= */

/* -------- Materials admin block editor (Phase 2.1) -------- */
.materials-blocks-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.materials-blocks-toolbar__left,
.materials-blocks-toolbar__right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.materials-blocks-toolbar__label {
    margin: 0;
}
.materials-autosave {
    font-size: 0.9rem;
    color: var(--text-muted);
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(255,255,255,0.55);
}
.materials-blocks-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.materials-block {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(255,255,255,0.65);
    overflow: hidden;
}
.materials-block__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: rgba(0,0,0,0.03);
    border-bottom: 1px solid var(--border);
}
.materials-block__title {
    font-weight: 600;
    display: flex;
    gap: 10px;
    align-items: center;
}
.materials-block__type {
    font-size: 0.85rem;
    color: var(--text-muted);
    border: 1px solid var(--border);
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.7);
}
.materials-block__controls {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Compact order input (1–99) next to up/down buttons */
.materials-block__order {
    width: 3ch;
    text-align: center;
    font: inherit;
    /* Explicit colors: CSS vars are not guaranteed across all admin pages.
       Without this, the value can be present but effectively invisible. */
    color: #222;
    -webkit-text-fill-color: currentColor;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.22);
    border-radius: 10px;
    padding: 4px 6px;
    line-height: 1;

    /* Hide number input spinners so the value fits in a compact width (1–99)
       without being pushed out of view by the browser UI. */
    appearance: textfield;
    -moz-appearance: textfield;
}

.materials-block__order::-webkit-outer-spin-button,
.materials-block__order::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.materials-block__order:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25);
}

/* Two-step delete confirmation state (see assets/js/editor/block_editor_render.js) */
.materials-block__controls .is-confirm {
    font-weight: 700;
}
.materials-block__body {
    padding: 12px;
}

/* Collapsed blocks (UI-only state; toggled via assets/js/editor/block_editor_render.js) */
.materials-block.is-collapsed .materials-block__header {
    border-bottom: none;
}
.materials-block.is-collapsed .materials-block__body {
    display: none;
}
.materials-block .form-row {
    margin-bottom: 10px;
}
.materials-block textarea.form-input {
    width: 100%;
    font: inherit;
    color: var(--text);
    background: rgba(255,255,255,0.85);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 12px;
    min-height: 42px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}

/* -------- Markdown cheat sheet (richtext blocks) -------- */
.md-cheatsheet {
    margin-top: 8px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255,255,255,0.65);
    padding: 6px 10px;
}
.md-cheatsheet > summary {
    cursor: pointer;
    font-weight: 600;
    user-select: none;
}
.md-cheatsheet__body {
    margin-top: 8px;
}
.md-cheatsheet__hint,
.md-cheatsheet__rule {
    margin: 0 0 8px 0;
    color: var(--text-muted);
    font-size: 0.95rem;
}
.md-cheatsheet__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 8px;
}
.md-cheatsheet__row {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 10px;
    align-items: start;
}
.md-cheatsheet__label {
    font-weight: 600;
    color: var(--text);
}
.md-cheatsheet__code {
    display: block;
    margin: 0;
    white-space: pre-wrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    background: rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 10px;
    padding: 6px 10px;
}

@media (max-width: 520px) {
    .md-cheatsheet__row {
        grid-template-columns: 1fr;
    }
}

/* =========================
   Search
   ========================= */

/* Search */
.search-card {
    max-width: 900px;
    margin: 0 auto;
    padding: 16px;
}

.search-form__row {
    display: grid;
    grid-template-columns: 1fr 110px auto;
    gap: 10px;
    align-items: center;
}

@media (max-width: 520px) {
    .search-form__row {
        grid-template-columns: 1fr;
    }
    .material-nav {
        grid-template-columns: 1fr;
    }
}

.search-meta {
    margin-top: 12px;
}

.search-results {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
    display: grid;
    gap: 12px;
}

.search-results__item {
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.03);
}


/* Node results: subtle visual separator */
.search-results--nodes .search-results__item {
    border-left: 4px solid rgba(255,255,255,0.14);
}

.search-results__title {
    font-weight: 800;
    text-decoration: none;
}

.search-results__meta {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.search-results__snippet {
    margin-top: 8px;
    line-height: 1.6;
}

/* Search scope pills (client zone search) */
.search-scope {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    text-decoration: none;
    color: #111827;
    font-size: 0.92rem;
}

.pill:hover,
.pill:focus-visible {
    background: #f3f4f6;
}

.pill--active {
    font-weight: 600;
    background: #f3f4f6;
}

/* --- Client Sessions (admin) --- */

.sessions-admin-page .form-row,
.notes-admin-page .form-row{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:14px;
}

.sessions-admin-page .form-label,
.notes-admin-page .form-label{
  font-weight:600;
  font-size:0.95rem;
  color:#0f172a;
}

.sessions-admin-page .form-input,
.notes-admin-page .form-input{
  width:100%;
  box-sizing:border-box;
  padding:0.6rem 0.75rem;
  border-radius:12px;
  border:1px solid rgba(15,23,42,0.18);
  background:#fff;
  color:#0f172a;
  font:inherit;
  line-height:1.25;
  outline:none;
  transition: box-shadow .15s ease, border-color .15s ease;
}

.sessions-admin-page .form-input:focus,
.notes-admin-page .form-input:focus{
  border-color: rgba(15,118,110,.65);
  box-shadow: 0 0 0 4px rgba(15,118,110,.12);
}

.sessions-admin-page input.form-input,
.sessions-admin-page select.form-input,
.notes-admin-page input.form-input,
.notes-admin-page select.form-input{
  min-height:44px;
}

.mw-320{ max-width: 320px; }

.sessions-admin-page .table tbody tr:hover,
.notes-admin-page .table tbody tr:hover{
  background: rgba(15,23,42,0.04);
}

/* Notes admin: keep the date in one line */
.notes-admin-page .notes-col-date{
  white-space: nowrap;
  width: 10.5ch;
}

/* Notes admin: center tiny indicator columns */
.notes-admin-page .notes-col-center{
  text-align:center;
}

.notes-admin-page .notes-col-mini{
  width: 7ch;
  white-space: nowrap;
}

/* Notes admin: show selected date as ISO (YYYY-MM-DD) regardless of native date picker locale */
.notes-admin-page .date-iso-preview{
  margin-left: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.9em;
  color: rgba(15,23,42,0.75);
}

/* Notes: attachments editor (admin meta forms) */
.attachments-editor{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.attachments-row{
  display:flex;
  align-items:center;
  gap:8px;
}

.attachments-row input[type="url"]{
  flex:2 1 420px;
}

.attachments-row input[type="text"]{
  flex:1 1 260px;
}

.attachments-row .attachments-remove{
  min-width:40px;
  padding:0 12px;
  font-size:18px;
  line-height:1;
}

@media (max-width: 680px){
  .attachments-row{
    flex-direction:column;
    align-items:stretch;
  }
  .attachments-row .attachments-remove{
    align-self:flex-end;
  }
}

/* --- Accounts (admin) --- */

.accounts-admin-page .filters-row{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}

.accounts-admin-page .form-row{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:14px;
}

.accounts-admin-page .form-label{
  font-weight:600;
  font-size:0.95rem;
  color:#0f172a;
}

.accounts-admin-page .form-input{
  width:100%;
  box-sizing:border-box;
  padding:0.6rem 0.75rem;
  border-radius:12px;
  border:1px solid rgba(15,23,42,0.18);
  background:#fff;
  color:#0f172a;
  font:inherit;
  line-height:1.25;
  outline:none;
  transition: box-shadow .15s ease, border-color .15s ease;
}

.accounts-admin-page .form-input:focus{
  border-color: rgba(15,118,110,.65);
  box-shadow: 0 0 0 4px rgba(15,118,110,.12);
}

.accounts-admin-page .form-input-with-action{
  display:flex;
  align-items:stretch;
  gap:8px;
}

.accounts-admin-page .form-input-with-action .form-input{
  flex:1 1 auto;
}

.accounts-admin-page .form-input-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  min-width:44px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,0.18);
  background: rgba(15,23,42,0.02);
  color: inherit;
  text-decoration:none;
  font-size:16px;
  line-height:1;
}

.accounts-admin-page .form-input-action:hover{
  background: rgba(15,23,42,0.05);
}

.accounts-admin-page .form-input-action:focus{
  outline:none;
  box-shadow: 0 0 0 4px rgba(15,118,110,.12);
  border-color: rgba(15,118,110,.65);
}

.accounts-admin-page input.form-input,
.accounts-admin-page select.form-input{
  min-height:44px;
}

.accounts-admin-page .form-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 720px){
  .accounts-admin-page .form-grid{
    grid-template-columns: 1fr 1fr;
  }
}

.mw-200{ max-width: 200px; }

.accounts-admin-page .table-wrap{
  overflow:auto;
}

.accounts-admin-page .table tbody tr:hover{
  background: rgba(15,23,42,0.04);
}

.accounts-admin-page .text-right{ text-align:right; }

.accounts-admin-page .checkbox-row{
  display:flex;
  align-items:center;
  gap:10px;
}

/* Row action icons (GDrive / Notes / Edit) */
.accounts-admin-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
}

/* Make icon buttons large enough to be clickable and keep SVG centered */
.accounts-admin-page .btn-icon{
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.accounts-admin-page .btn-icon__svg{
  width: 14px;
  height: 14px;
  display:block;
}


/* Disabled account action icons */
.accounts-admin-actions .btn-icon.is-disabled{
  color:#9aa0a6;
  cursor:not-allowed;
  opacity:1;
}
.accounts-admin-actions .btn-icon.is-disabled:hover{
  color:#9aa0a6;
}

/* =========================================================
   CLIENT SESSIONS (CLIENT VIEW)
   ========================================================= */

.session-list__date {
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0;
}

.session-list__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
}

/* Notes list: keep pill bottom-right, attachment icon top-right (no layout shifts) */
.client-notes-row {
    position: relative;
    padding-right: 34px; /* reserve room for top-right icon + bottom-right pill */
}

.client-notes-origin-pill {
    position: absolute;
    right: 0;
    bottom: 0;
}

.client-notes-attachments-icon {
    position: absolute;
    right: 0;
    top: 0;
    margin: 0;
}

.session-list__title {
    margin: 0;
    line-height: 1.45;
    font-size: 1.35rem;
}

.session-list__hr {
    border: 0;
    border-top: 1px solid rgba(0,0,0,0.08);
    margin: 14px 0;
}

.session-list__title a {
    color: inherit;
}

.session-list__title a:hover {
    text-decoration: underline;
}

.session-list__hr {
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    margin: 16px 0;
}

/* Notes: external attachments indicator */
.note-attachments-indicator {
    margin-left: 8px;
    font-size: 16px;
    line-height: 1;
}

/* Notes: attachment list on view page */
.note-attachments {
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(0, 0, 0, 0.02);
    padding: 10px 12px;
    border-radius: 12px;
    margin-bottom: 12px;
}

.note-attachments__label {
    font-weight: 600;
    margin-bottom: 6px;
}

.note-attachments__list {
    margin: 0;
    padding-left: 18px;
}

/* =========================================================
   ADMIN AD STUDIO — locked-size HTML/CSS templates
   Palette and reused components are derived from existing homepage/testimonial CSS.
   UI layout may respond to viewport; the 1080x1350 creative must not.
   ========================================================= */
.ad-studio-admin-page { max-width: 1100px; margin: 32px auto 72px; padding: 0 20px; }
.ad-studio-admin-page--wide { max-width: 1720px; }
.ad-studio-page-header { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 24px; }
.ad-studio-page-header h1 { color: #17243a; font-size: 1.8rem; margin: 0 0 6px; }
.ad-studio-page-header p { color: #475569; margin: 0; line-height: 1.5; }
.ad-studio-back { color: #1d4ed8; display: inline-block; margin-bottom: 15px; text-decoration: underline; }
.ad-studio-table-scroll { overflow-x: auto; }
.ad-studio-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #dce3ee; }
.ad-studio-table td, .ad-studio-table th { padding: 14px; border-bottom: 1px solid #dce3ee; text-align: left; vertical-align: middle; }
.ad-studio-table th { background: #edf3fb; font-weight: 650; color: #17243a; }
.ad-studio-table .ad-studio-notes-cell { max-width: 240px; overflow-wrap: break-word; color: #475569; }
.ad-studio-open { color: #1d4ed8; font-weight: 650; text-decoration: underline; }
.ad-studio-row-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ad-studio-row-actions form { display: inline; margin: 0; }
.ad-studio-row-actions .btn-secondary { border-radius: 8px; padding: 10px 12px; }
.ad-studio-danger { display: inline-flex; cursor: pointer; padding: 10px 12px; border: 1px solid #b91c1c; color: #991b1b; background: #fff; border-radius: 8px; font: inherit; }
.ad-studio-danger:hover { background: #fff1f2; }
.ad-studio-empty { padding: 22px; border: 1px solid #dce3ee; border-radius: 12px; background: white; }
.ad-studio-alert, .ad-studio-warning { padding: 12px 16px; background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; border-radius: 8px; margin: 10px 0 20px; }
.ad-studio-success { padding: 12px 16px; background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; border-radius: 8px; margin: 10px 0 20px; }
.ad-studio-admin-page [hidden], .ad-canvas--two-column-v1 [hidden] { display: none !important; }
.ad-studio-editor-grid { display: grid; grid-template-columns: 405px minmax(0,1fr); gap: 24px; align-items: start; }
.ad-studio-fields { max-height: 82vh; overflow-y: auto; padding-right: 3px; }
.ad-studio-field-section { background: #fff; border: 1px solid #dce3ee; border-radius: 12px; margin-bottom: 12px; padding: 17px; }
.ad-studio-field-section summary { cursor: pointer; font-weight: 700; color: #17243a; padding: 5px 0; }
.ad-studio-field-rows { padding-top: 14px; }
.ad-studio-field-rows .form-row { margin-bottom: 13px; }
.ad-studio-field-rows .form-label, .ad-studio-fields .form-label { display: block; margin-bottom: 5px; color: #17243a; font-weight: 600; }
.ad-studio-field-rows .form-input, .ad-studio-fields .form-input { width: 100%; min-width: 0; }
.ad-studio-fields textarea { resize: vertical; }
.ad-studio-fields .form-help { font-size: .85rem; line-height: 1.35; color: #475569; margin: 6px 0; }
.ad-studio-toggle .checkbox-item { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.ad-studio-save-row { padding: 8px 0 30px; }
.ad-studio-current-image, .ad-current-image { color: #0f766e; padding: 6px 0; }
.ad-studio-preview-panel { background: #fff; border: 1px solid #dce3ee; border-radius: 14px; padding: 18px; position: sticky; top: 20px; }
.ad-studio-preview-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.ad-studio-preview-toolbar strong { color: #17243a; }
.ad-studio-preview-toolbar span { font-size: .9rem; color: #475569; }
.ad-studio-preview-toolbar .btn-primary { border-radius: 10px; padding: 12px 18px; }
.ad-studio-preview-toolbar .btn-primary:disabled { opacity: .5; cursor: not-allowed; }
.ad-studio-preview-box { border: 1px solid #dce3ee; padding: 12px; background: #e5eaf2; overflow: hidden; height: 1374px; }
.ad-studio-preview-scale { width: 1080px; height: 1350px; transform-origin: top left; }
.ad-studio-preview-note { color: #475569; font-size: .87rem; line-height: 1.5; margin-bottom: 0; }

/* The actual advertisement canvas. Dimensions do not respond to viewport. */
.ad-canvas--two-column-v1 { width: 1080px; height: 1350px; overflow: hidden; background: #f5f6fa; box-sizing: border-box; font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color: #17243a; }
.ad-canvas--two-column-v1 *, .ad-canvas--two-column-v1 *::before, .ad-canvas--two-column-v1 *::after { box-sizing: border-box; }
.ad-canvas--two-column-v1 .ad-hero { height: 424px; padding: 56px 62px 30px; position: relative; overflow: hidden; color: #f9fafb; background: radial-gradient(ellipse at 87% 8%,rgba(59,130,246,.19),transparent 52%),linear-gradient(133deg,#101928,#1c2c45); }
.ad-canvas--two-column-v1 .ad-hero__copy { position: relative; z-index: 2; max-width: 900px; height: 100%; overflow: hidden; }
.ad-canvas--two-column-v1[data-has-hero-image="1"] .ad-hero__copy { max-width: 650px; }
.ad-canvas--two-column-v1 .ad-hero__badge { color:#1d4ed8; background:#eff6ff; border:1px solid #c9dafa; border-radius:999px; font-weight:750; line-height:1.45; display: inline-block; margin: 0 0 18px; font-size: 21px; letter-spacing: .055em; padding: 8px 15px; }
.ad-canvas--two-column-v1 .ad-hero__title { color: #f9fafb; font-size: 66px; line-height: 1.1; font-weight: 750; letter-spacing: -0.032em; max-width: 900px; margin: 0 0 15px; white-space: pre-line; }
.ad-canvas--two-column-v1[data-has-hero-image="1"] .ad-hero__title { max-width: 650px; }
.ad-canvas--two-column-v1 .ad-hero__subtitle { color: #e5eaf2; font-size: 29px; line-height: 1.32; white-space: pre-line; margin: 0; max-width: 900px; }
.ad-canvas--two-column-v1[data-has-hero-image="1"] .ad-hero__subtitle { max-width: 635px; }
.ad-canvas--two-column-v1 .ad-hero__illustration { position: absolute; top: 32px; right: 34px; width: 325px; height: 355px; z-index: 1; display: flex; align-items: center; justify-content: center; }
.ad-canvas--two-column-v1 .ad-hero__illustration img { display: block; object-fit: contain; max-width: 100%; max-height: 100%; }
.ad-canvas__body { height: 788px; padding: 36px 58px 32px; background: #f5f6fa; overflow: hidden; }
.ad-column-headings { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; margin-bottom: 16px; }
.ad-column-headings h2 { margin: 0; color: #1d4ed8; font-size: 27px; font-weight: 700; line-height: 39px; height: 39px; white-space: pre-line; overflow: hidden; }
.ad-column-headings h2:first-child { color: #475569; }
.ad-card-rows { display: block; }
.ad-card-row { display: grid; grid-template-columns: minmax(0,1fr) 52px minmax(0,1fr); height: 195px; align-items: stretch; }
.ad-canvas--two-column-v1 .ad-card { border: 1px solid #e0e0e0; background: #ffffff; display: flex; align-items: center; gap: 14px; width: 100%; height: 195px; margin: 0; padding: 17px 17px; overflow: hidden; border-radius: 8px; box-shadow: none; }
.ad-canvas--two-column-v1 .ad-card.testimonial-card--highlight { border: 1px solid #b5c9e6; border-left: 4px solid #3b82f6; background: #f3f8ff; box-shadow: 0 4px 16px rgba(15,23,42,.07); }
.ad-card__icon { flex: 0 0 66px; width: 66px; color: #47617e; }
.ad-card__icon-svg { display: block; width: 66px; height: 66px; }
.ad-card__text { align-self: center; flex: 1 1 0%; min-width: 0; max-height: 160px; overflow: hidden; }
.ad-card__eyebrow { display: block; font-size: 17px; line-height: 22px; font-weight: 700; color: #475569; margin: 0 0 5px; letter-spacing: .006em; text-transform: uppercase; white-space: pre-line; }
.ad-card.testimonial-card--highlight .ad-card__eyebrow { color: #1d4ed8; }
.ad-card__title { margin: 0 0 5px; font-size: 24px; line-height: 1.16; font-weight: 750; color: #102541; white-space: pre-line; overflow-wrap: anywhere; }
.ad-card__body { margin: 0; font-size: 19px; line-height: 1.25; color: #475569; white-space: pre-line; overflow-wrap: anywhere; }
.ad-connector { display: flex; justify-content: center; align-items: center; color: #3b82f6; }
.ad-connector--disabled { visibility: hidden; }
.ad-connector svg { stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 5; fill: none; }
.ad-connector--horizontal svg { width: 45px; height: 32px; }
.ad-row-between { height: 38px; display: flex; justify-content: center; align-items: center; }
.ad-connector--vertical svg { width: 32px; height: 35px; }
.ad-canvas__footer { display: flex; gap: 25px; align-items: center; justify-content: space-between; background: #111827; color: #f9fafb; padding: 20px 62px; height: 138px; }
.ad-brand { display: flex; align-items: center; gap: 16px; font-size: 39px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.ad-brand img { display: block; width: 56px; height: 56px; object-fit: contain; }
.ad-canvas__tagline { color: #e5e7eb; font-size: 24px; text-align: right; font-weight: 400; line-height: 1.34; }
@media (max-width: 1180px) { .ad-studio-editor-grid { grid-template-columns: 350px minmax(0,1fr); } }
@media (max-width: 850px) { .ad-studio-editor-grid { display: flex; flex-direction: column-reverse; } .ad-studio-preview-panel, .ad-studio-fields { width: 100%; position: static; max-height: none; } .ad-studio-page-header { align-items: flex-start; } }

/* A template is selected before any graphic is saved; saved items retain their family. */
.ad-studio-template-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.ad-studio-template-choice { background:#fff; border:1px solid #dce3ee; padding:22px; border-radius:12px; }
.ad-studio-template-choice h2 { margin:0 0 9px; color:#17243a; font-size:1.25rem; }
.ad-studio-template-choice p { color:#475569; line-height:1.5; margin:0 0 20px; }
.ad-studio-template-choice .btn-primary { display:inline-block; border-radius:8px; padding:10px 16px; }
.ad-studio-template-status { margin:8px 0 20px; color:#475569; line-height:1.5; }
.ad-studio-template-status strong { color:#17243a; }
.ad-studio-template-status a { color:#1d4ed8; text-decoration:underline; margin-left:12px; }
@media (max-width:650px) { .ad-studio-template-choices { grid-template-columns:minmax(0,1fr); } }

/* =========================================================
   AD STUDIO — TWO-COLUMN v2. Version-scoped: v1 creatives remain unchanged.
   Geometry is fixed at 1080x1350; admin preview scales the entire canvas.
   ========================================================= */
.ad-studio-upgrade { display:flex; flex-wrap:wrap; align-items:center; gap:16px; padding:14px 18px; margin:12px 0 20px; background:#eff6ff; border:1px solid #c9dafa; border-radius:10px; }
.ad-studio-upgrade p { flex:1 1 420px; margin:0; color:#17243a; }
.ad-studio-upgrade form { margin:0; }

.ad-canvas--two-column-v2 { width:1080px; height:1350px; position:relative; overflow:hidden; background:#f5f6fa; box-sizing:border-box; font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:#17243a; }
.ad-canvas--two-column-v2 *, .ad-canvas--two-column-v2 *::before, .ad-canvas--two-column-v2 *::after { box-sizing:border-box; }
.ad-canvas--two-column-v2 [hidden] { display:none !important; }
/* A normal element (not ::before) is intentional: computed CSS can be inlined reliably into PNG export. */
.ad-canvas--two-column-v2 .ad-canvas__dark-backdrop { position:absolute; top:0; left:0; width:1080px; height:578px; background:radial-gradient(ellipse at 87% 8%, rgba(59,130,246,.19),transparent 52%),linear-gradient(133deg,#101928,#1c2c45); z-index:0; }
.ad-canvas--two-column-v2 > .ad-hero, .ad-canvas--two-column-v2 > .ad-canvas__body, .ad-canvas--two-column-v2 > .ad-canvas__footer { position:relative; z-index:1; }
.ad-canvas--two-column-v2 .ad-hero { height:424px; padding:56px 62px 30px; position:relative; overflow:hidden; color:#f9fafb; background:transparent; }
.ad-canvas--two-column-v2 .ad-hero__copy { position:relative; z-index:2; max-width:900px; height:100%; overflow:hidden; }
.ad-canvas--two-column-v2[data-has-hero-image="1"] .ad-hero__copy { max-width:650px; }
.ad-canvas--two-column-v2 .ad-hero__badge { color:#1d4ed8; background:#eff6ff; border:1px solid #c9dafa; border-radius:999px; display:inline-flex; width:max-content; max-width:100%; white-space:nowrap; font-weight:750; line-height:1.45; margin:0 0 18px; font-size:21px; letter-spacing:.055em; padding:8px 15px; }
.ad-canvas--two-column-v2 .ad-hero__title { color:#f9fafb; font-size:66px; line-height:1.1; font-weight:750; letter-spacing:-.032em; max-width:900px; margin:0 0 15px; white-space:pre-line; }
.ad-canvas--two-column-v2[data-has-hero-image="1"] .ad-hero__title { max-width:650px; }
.ad-canvas--two-column-v2 .ad-hero__subtitle { color:#e5eaf2; font-size:29px; line-height:1.32; white-space:pre-line; margin:0; max-width:900px; }
.ad-canvas--two-column-v2[data-has-hero-image="1"] .ad-hero__subtitle { max-width:635px; }
.ad-canvas--two-column-v2 .ad-hero__illustration { position:absolute; z-index:1; display:flex; align-items:center; justify-content:center; overflow:visible; }
.ad-canvas--two-column-v2 .ad-hero__illustration img { display:block; width:100%; height:100%; object-fit:contain; }
.ad-canvas--two-column-v2 .ad-canvas__body { height:788px; padding:36px 58px 32px; background:transparent; overflow:hidden; }
.ad-canvas--two-column-v2 .ad-column-headings { display:grid; grid-template-columns:1fr 1fr; gap:52px; margin-bottom:16px; }
.ad-canvas--two-column-v2 .ad-column-headings h2 { margin:0; color:#60a5fa; font-size:27px; font-weight:700; line-height:39px; height:39px; white-space:pre-line; overflow:hidden; }
.ad-canvas--two-column-v2 .ad-column-headings h2:first-child { color:#f9fafb; }
.ad-canvas--two-column-v2 .ad-card-rows { display:block; }
.ad-canvas--two-column-v2 .ad-card-row { display:grid; grid-template-columns:minmax(0,1fr) 52px minmax(0,1fr); height:195px; align-items:stretch; }
.ad-canvas--two-column-v2 .ad-card { border:1px solid #e0e0e0; background:#fff; display:flex; align-items:center; gap:15px; width:100%; height:195px; margin:0; padding:17px 28px 17px 22px; overflow:hidden; border-radius:8px; box-shadow:none; }
.ad-canvas--two-column-v2 .ad-card.testimonial-card--highlight { border:1px solid #b5c9e6; border-left:4px solid #3b82f6; background:#f3f8ff; box-shadow:0 4px 16px rgba(15,23,42,.07); }
.ad-canvas--two-column-v2 .ad-card__icon { flex:0 0 60px; width:60px; color:#47617e; }
.ad-canvas--two-column-v2 .ad-card__icon-svg { display:block; width:60px; height:60px; }
.ad-canvas--two-column-v2 .ad-card__text { align-self:center; flex:1 1 0%; min-width:0; max-height:164px; overflow:hidden; }
.ad-canvas--two-column-v2 .ad-card__eyebrow { display:block; font-size:17px; line-height:22px; font-weight:700; color:#475569; margin:0 0 5px; letter-spacing:.006em; text-transform:uppercase; white-space:pre-line; }
.ad-canvas--two-column-v2 .ad-card.testimonial-card--highlight .ad-card__eyebrow { color:#1d4ed8; }
.ad-canvas--two-column-v2 .ad-card__title { margin:0 0 5px; font-size:23px; line-height:1.16; font-weight:750; color:#102541; white-space:pre-line; overflow-wrap:anywhere; }
.ad-canvas--two-column-v2 .ad-card__body { margin:0; font-size:19px; line-height:1.25; color:#475569; white-space:pre-line; overflow-wrap:anywhere; }
.ad-canvas--two-column-v2 .ad-connector { display:flex; justify-content:center; align-items:center; color:#3b82f6; }
.ad-canvas--two-column-v2 .ad-connector--disabled { visibility:hidden; }
.ad-canvas--two-column-v2 .ad-connector svg { stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:5; fill:none; }
.ad-canvas--two-column-v2 .ad-connector--horizontal svg { width:45px; height:32px; }
.ad-canvas--two-column-v2 .ad-row-between { display:grid; grid-template-columns:minmax(0,1fr) 52px minmax(0,1fr); height:38px; align-items:center; }
.ad-canvas--two-column-v2 .ad-connector--vertical svg { width:32px; height:35px; }
.ad-canvas--two-column-v2 .ad-connector--left { grid-column:1; }
.ad-canvas--two-column-v2 .ad-connector--right { grid-column:3; }
.ad-canvas--two-column-v2 .ad-canvas__footer { display:flex; gap:25px; align-items:center; justify-content:space-between; background:#111827; color:#f9fafb; padding:20px 62px; height:138px; }
.ad-canvas--two-column-v2 .ad-brand { display:flex; align-items:center; gap:16px; font-size:39px; font-weight:700; line-height:1.2; white-space:nowrap; }
.ad-canvas--two-column-v2 .ad-brand img { display:block; width:56px; height:56px; object-fit:contain; }
.ad-canvas--two-column-v2 .ad-canvas__tagline { color:#e5e7eb; font-size:24px; text-align:right; font-weight:400; line-height:1.34; }

/* =========================================================
   AD STUDIO — TWO-COLUMN v3. Version-scoped: v1 creatives remain unchanged.
   Geometry is fixed at 1080x1350; admin preview scales the entire canvas.
   ========================================================= */
.ad-studio-upgrade { display:flex; flex-wrap:wrap; align-items:center; gap:16px; padding:14px 18px; margin:12px 0 20px; background:#eff6ff; border:1px solid #c9dafa; border-radius:10px; }
.ad-studio-upgrade p { flex:1 1 420px; margin:0; color:#17243a; }
.ad-studio-upgrade form { margin:0; }

.ad-canvas--two-column-v3 { width:1080px; height:1350px; position:relative; overflow:hidden; background:#f5f6fa; box-sizing:border-box; font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:#17243a; }
.ad-canvas--two-column-v3 *, .ad-canvas--two-column-v3 *::before, .ad-canvas--two-column-v3 *::after { box-sizing:border-box; }
.ad-canvas--two-column-v3 [hidden] { display:none !important; }
/* A normal element (not ::before) is intentional: computed CSS can be inlined reliably into PNG export. */
.ad-canvas--two-column-v3 .ad-canvas__dark-backdrop { position:absolute; top:0; left:0; width:1080px; height:578px; background:radial-gradient(ellipse at 87% 8%, rgba(59,130,246,.19),transparent 52%),linear-gradient(133deg,#101928,#1c2c45); z-index:0; }
.ad-canvas--two-column-v3 > .ad-hero, .ad-canvas--two-column-v3 > .ad-canvas__body, .ad-canvas--two-column-v3 > .ad-canvas__footer { position:relative; z-index:1; }
.ad-canvas--two-column-v3 .ad-hero { height:424px; padding:56px 62px 30px; position:relative; overflow:hidden; color:#f9fafb; background:transparent; }
.ad-canvas--two-column-v3 .ad-hero__copy { position:relative; z-index:2; max-width:900px; height:100%; overflow:hidden; }
.ad-canvas--two-column-v3[data-has-hero-image="1"] .ad-hero__copy { max-width:650px; }
.ad-canvas--two-column-v3 .ad-hero__badge { color:#1d4ed8; background:#eff6ff; border:1px solid #c9dafa; border-radius:999px; display:inline-flex; width:max-content; max-width:100%; white-space:nowrap; font-weight:750; line-height:1.45; margin:0 0 18px; font-size:21px; letter-spacing:.055em; padding:8px 15px; }
.ad-canvas--two-column-v3 .ad-hero__title { color:#f9fafb; font-size:66px; line-height:1.1; font-weight:750; letter-spacing:-.032em; max-width:900px; margin:0 0 15px; white-space:pre-line; }
.ad-canvas--two-column-v3[data-has-hero-image="1"] .ad-hero__title { max-width:650px; }
.ad-canvas--two-column-v3 .ad-hero__subtitle { color:#e5eaf2; font-size:29px; line-height:1.32; white-space:pre-line; margin:0; max-width:900px; }
.ad-canvas--two-column-v3[data-has-hero-image="1"] .ad-hero__subtitle { max-width:635px; }
.ad-canvas--two-column-v3 .ad-hero__illustration { position:absolute; z-index:1; display:flex; align-items:center; justify-content:center; overflow:visible; }
.ad-canvas--two-column-v3 .ad-hero__illustration img { display:block; width:100%; height:100%; object-fit:contain; }
.ad-canvas--two-column-v3 .ad-canvas__body { height:788px; padding:36px 58px 32px; background:transparent; overflow:hidden; }
.ad-canvas--two-column-v3 .ad-column-headings { display:grid; grid-template-columns:1fr 1fr; gap:52px; margin-bottom:16px; }
.ad-canvas--two-column-v3 .ad-column-headings h2 { margin:0; color:#f9fafb; font-size:27px; font-weight:700; line-height:39px; height:39px; white-space:pre-line; overflow:hidden; }
.ad-canvas--two-column-v3 .ad-column-headings h2.ad-column-heading--highlight { color:#3b82f6; }
.ad-canvas--two-column-v3 .ad-card-rows { display:block; }
.ad-canvas--two-column-v3 .ad-card-row { display:grid; grid-template-columns:minmax(0,1fr) 52px minmax(0,1fr); height:195px; align-items:stretch; }
.ad-canvas--two-column-v3 .ad-card { border:1px solid #e0e0e0; background:#fff; display:flex; align-items:center; gap:15px; width:100%; height:195px; margin:0; padding:17px 28px 17px 22px; overflow:hidden; border-radius:8px; box-shadow:none; }
.ad-canvas--two-column-v3 .ad-card.testimonial-card--highlight { border:1px solid #b5c9e6; border-left:4px solid #3b82f6; background:#f3f8ff; box-shadow:0 4px 16px rgba(15,23,42,.07); }
.ad-canvas--two-column-v3 .ad-card__icon { flex:0 0 60px; width:60px; color:#47617e; }
.ad-canvas--two-column-v3 .ad-card__icon-svg { display:block; width:60px; height:60px; }
.ad-canvas--two-column-v3 .ad-card__text { align-self:center; flex:1 1 0%; min-width:0; max-height:164px; overflow:hidden; }
.ad-canvas--two-column-v3 .ad-card__eyebrow { display:block; font-size:17px; line-height:22px; font-weight:700; color:#475569; margin:0 0 5px; letter-spacing:.006em; text-transform:uppercase; white-space:pre-line; }
.ad-canvas--two-column-v3 .ad-card.testimonial-card--highlight .ad-card__eyebrow { color:#1d4ed8; }
.ad-canvas--two-column-v3 .ad-card__title { margin:0 0 5px; font-size:23px; line-height:1.16; font-weight:750; color:#102541; white-space:pre-line; overflow-wrap:anywhere; }
.ad-canvas--two-column-v3 .ad-card__body { margin:0; font-size:19px; line-height:1.25; color:#475569; white-space:pre-line; overflow-wrap:anywhere; }
.ad-canvas--two-column-v3 .ad-connector { display:flex; justify-content:center; align-items:center; color:#3b82f6; }
.ad-canvas--two-column-v3 .ad-connector--disabled { visibility:hidden; }
.ad-canvas--two-column-v3 .ad-connector svg { stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:5; fill:none; }
.ad-canvas--two-column-v3 .ad-connector--horizontal svg { width:45px; height:32px; }
.ad-canvas--two-column-v3 .ad-row-between { display:grid; grid-template-columns:minmax(0,1fr) 52px minmax(0,1fr); height:38px; align-items:center; }
.ad-canvas--two-column-v3 .ad-connector--vertical svg { width:32px; height:35px; }
.ad-canvas--two-column-v3 .ad-connector--left { grid-column:1; }
.ad-canvas--two-column-v3 .ad-connector--right { grid-column:3; }
.ad-canvas--two-column-v3 .ad-canvas__footer { display:flex; gap:25px; align-items:center; justify-content:space-between; background:#111827; color:#f9fafb; padding:20px 62px; height:138px; }
.ad-canvas--two-column-v3 .ad-brand { display:flex; flex:0 1 auto; min-width:0; max-width:47%; align-items:center; gap:16px; font-size:39px; font-weight:700; line-height:1.2; }
.ad-canvas--two-column-v3 .ad-brand span { min-width:0; white-space:pre-line; overflow-wrap:anywhere; }
.ad-canvas--two-column-v3 .ad-brand img { display:block; flex:0 0 56px; width:56px; height:56px; object-fit:contain; }
.ad-canvas--two-column-v3 .ad-canvas__tagline { flex:0 1 55%; min-width:0; color:#e5e7eb; font-size:24px; text-align:right; font-weight:400; line-height:1.34; white-space:pre-line; overflow-wrap:anywhere; }

/* =========================================================
   AD STUDIO — ONE-COLUMN v1. Version-scoped: historical creatives remain unchanged.
   Geometry is fixed at 1080x1350; admin preview scales the entire canvas.
   ========================================================= */
.ad-canvas--one-column-v1 { width:1080px; height:1350px; position:relative; overflow:hidden; background:#f5f6fa; box-sizing:border-box; font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:#17243a; }
.ad-canvas--one-column-v1 *, .ad-canvas--one-column-v1 *::before, .ad-canvas--one-column-v1 *::after { box-sizing:border-box; }
.ad-canvas--one-column-v1 [hidden] { display:none !important; }
/* A normal element (not ::before) is intentional: computed CSS can be inlined reliably into PNG export. */
.ad-canvas--one-column-v1 .ad-canvas__dark-backdrop { position:absolute; top:0; left:0; width:1080px; height:578px; background:radial-gradient(ellipse at 87% 8%, rgba(59,130,246,.19),transparent 52%),linear-gradient(133deg,#101928,#1c2c45); z-index:0; }
.ad-canvas--one-column-v1 > .ad-hero, .ad-canvas--one-column-v1 > .ad-canvas__body, .ad-canvas--one-column-v1 > .ad-canvas__footer { position:relative; z-index:1; }
.ad-canvas--one-column-v1 .ad-hero { height:424px; padding:56px 62px 30px; position:relative; overflow:hidden; color:#f9fafb; background:transparent; }
.ad-canvas--one-column-v1 .ad-hero__copy { position:relative; z-index:2; max-width:900px; height:100%; overflow:hidden; }
.ad-canvas--one-column-v1[data-has-hero-image="1"] .ad-hero__copy { max-width:650px; }
.ad-canvas--one-column-v1 .ad-hero__badge { color:#1d4ed8; background:#eff6ff; border:1px solid #c9dafa; border-radius:999px; display:inline-flex; width:max-content; max-width:100%; white-space:nowrap; font-weight:750; line-height:1.45; margin:0 0 18px; font-size:21px; letter-spacing:.055em; padding:8px 15px; }
.ad-canvas--one-column-v1 .ad-hero__title { color:#f9fafb; font-size:48px; line-height:1.1; font-weight:750; letter-spacing:-.032em; max-width:900px; margin:0 0 15px; white-space:pre-line; }
.ad-canvas--one-column-v1[data-has-hero-image="1"] .ad-hero__title { max-width:650px; }
.ad-canvas--one-column-v1 .ad-hero__subtitle { color:#e5eaf2; font-size:27px; line-height:1.32; white-space:pre-line; margin:0; max-width:900px; }
.ad-canvas--one-column-v1[data-has-hero-image="1"] .ad-hero__subtitle { max-width:635px; }
.ad-canvas--one-column-v1 .ad-hero__illustration { position:absolute; z-index:1; display:flex; align-items:center; justify-content:center; overflow:visible; }
.ad-canvas--one-column-v1 .ad-hero__illustration img { display:block; width:100%; height:100%; object-fit:contain; }
.ad-canvas--one-column-v1 .ad-canvas__body { height:788px; padding:36px 58px 32px; background:transparent; overflow:hidden; }
.ad-canvas--one-column-v1 .ad-column-headings { display:grid; grid-template-columns:1fr; gap:0; margin-bottom:16px; }
.ad-canvas--one-column-v1 .ad-column-headings h2 { margin:0; color:#f9fafb; font-size:27px; font-weight:700; line-height:39px; height:39px; white-space:pre-line; overflow:hidden; }
.ad-canvas--one-column-v1 .ad-column-headings h2.ad-column-heading--highlight { color:#3b82f6; }
.ad-canvas--one-column-v1 .ad-card-rows { display:block; }
.ad-canvas--one-column-v1 .ad-one-card-row { display:grid; grid-template-columns:minmax(0,1fr); height:195px; align-items:stretch; }
.ad-canvas--one-column-v1 .ad-card { border:1px solid #e0e0e0; background:#fff; display:flex; align-items:center; gap:15px; width:100%; height:195px; margin:0; padding:17px 28px 17px 22px; overflow:hidden; border-radius:8px; box-shadow:none; }
.ad-canvas--one-column-v1 .ad-card.testimonial-card--highlight { border:1px solid #b5c9e6; border-left:4px solid #3b82f6; background:#f3f8ff; box-shadow:0 4px 16px rgba(15,23,42,.07); }
.ad-canvas--one-column-v1 .ad-card__icon { flex:0 0 60px; width:60px; color:#47617e; }
.ad-canvas--one-column-v1 .ad-card__icon-svg { display:block; width:60px; height:60px; }
.ad-canvas--one-column-v1 .ad-card__text { align-self:center; flex:1 1 0%; min-width:0; max-height:164px; overflow:hidden; }
.ad-canvas--one-column-v1 .ad-card__eyebrow { display:block; font-size:17px; line-height:22px; font-weight:700; color:#475569; margin:0 0 5px; letter-spacing:.006em; text-transform:uppercase; white-space:pre-line; }
.ad-canvas--one-column-v1 .ad-card.testimonial-card--highlight .ad-card__eyebrow { color:#1d4ed8; }
.ad-canvas--one-column-v1 .ad-card__title { margin:0 0 5px; font-size:27px; line-height:1.16; font-weight:750; color:#102541; white-space:pre-line; overflow-wrap:anywhere; }
.ad-canvas--one-column-v1 .ad-card__body { margin:0; font-size:21px; line-height:1.25; color:#475569; white-space:pre-line; overflow-wrap:anywhere; }
.ad-canvas--one-column-v1 .ad-connector { display:flex; justify-content:center; align-items:center; color:#3b82f6; }
.ad-canvas--one-column-v1 .ad-connector--disabled { visibility:hidden; }
.ad-canvas--one-column-v1 .ad-connector svg { stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:5; fill:none; }
.ad-canvas--one-column-v1 .ad-one-row-between { display:flex; height:38px; align-items:center; justify-content:center; }
.ad-canvas--one-column-v1 .ad-connector--vertical svg { width:32px; height:35px; }
.ad-canvas--one-column-v1 .ad-canvas__footer { display:flex; gap:25px; align-items:center; justify-content:space-between; background:#111827; color:#f9fafb; padding:20px 62px; height:138px; }
.ad-canvas--one-column-v1 .ad-brand { display:flex; flex:0 1 auto; min-width:0; max-width:47%; align-items:center; gap:16px; font-size:39px; font-weight:700; line-height:1.2; }
.ad-canvas--one-column-v1 .ad-brand span { min-width:0; white-space:pre-line; overflow-wrap:anywhere; }
.ad-canvas--one-column-v1 .ad-brand img { display:block; flex:0 0 56px; width:56px; height:56px; object-fit:contain; }
.ad-canvas--one-column-v1 .ad-canvas__tagline { flex:0 1 55%; min-width:0; color:#e5e7eb; font-size:24px; text-align:right; font-weight:400; line-height:1.34; white-space:pre-line; overflow-wrap:anywhere; }

/* An empty conclusion occupies no space. All entered text stays escaped/plain-text. */
.ad-canvas--one-column-v1 .ad-card__conclusion { display:block; margin-top:7px; font-size:21px; line-height:1.25; font-weight:750; color:#102541; white-space:pre-line; overflow-wrap:anywhere; }
.ad-canvas--one-column-v1 .ad-card__conclusion:empty { display:none; }

/* Admin aggregate public-page traffic report. */
.traffic-report__filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; align-items: end; gap: 12px; }
.traffic-report__filters .form-row { margin: 0; min-width: 0; }
.traffic-report__bot-filter { grid-column: 1/5; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.traffic-report__filter-note { font-size: .9rem; margin: 10px 0 0; }
.traffic-report__bot-filter .checkbox-item { margin: 0; }
.traffic-report__apply { grid-column: 5; padding-bottom: 1px; }
.traffic-report__quick { margin: 12px 0 0; font-size: .9rem; }
.traffic-report__total { font-size: 2rem; font-weight: 700; margin: .2em 0; }
.traffic-report__table-wrap { max-width: 100%; overflow-x: auto; }
.traffic-report__table { border-collapse: collapse; width: 100%; min-width: 550px; }
.traffic-report__table--pages { min-width: 720px; }
.traffic-report__table th, .traffic-report__table td { border-bottom: 1px solid var(--border, #ddd); padding: 9px 12px; text-align: left; vertical-align: top; }
.traffic-report__table th { font-weight: 700; }
.traffic-report__table tr:last-child td { border-bottom: none; }
.traffic-report__table small { display: inline-block; margin-top: 3px; opacity: .85; }
.traffic-report__table .traffic-report__number { text-align: right; font-variant-numeric: tabular-nums; }
.traffic-report__table--day { min-width: 250px; max-width: 400px; }
.traffic-report__disclaimer { max-width: 900px; margin-top: 12px; }
.traffic-report__error { border: 1px solid #c44; }
@media (max-width: 900px) { .traffic-report__filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } .traffic-report__bot-filter, .traffic-report__apply { grid-column: 1/-1; } }
@media (max-width: 540px) { .traffic-report__filters { grid-template-columns: 1fr; } }

/* =========================
   Materials – Labels
   ========================= */

.mat-label {
    display: inline-block;
    font-size: 0.85rem;
    line-height: 1;
    padding: 3px 8px;
    margin-right: 6px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    color: #6b7280;
    vertical-align: middle;
}

.checkbox-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
}

.checkbox-item input {
    margin: 0;
}

/* ------------------------------------------------------------
   Utilities (tiny one-offs; prefer existing components first)
------------------------------------------------------------ */

.mt-0  { margin-top: 0; }
.mt-6  { margin-top: 6px; }
.mt-10 { margin-top: 10px; }
.mt-12 { margin-top: 12px; }
.mt-14 { margin-top: 14px; }
.mt-16 { margin-top: 16px; }
.mt-18 { margin-top: 18px; }
.mt-28 { margin-top: 28px; }

.mb-10 { margin-bottom: 10px; }
.ml-10 { margin-left: 10px; }

.fs-90 { font-size: 0.9rem; }
.mw-220 { max-width: 220px; }

.d-none { display: none !important; }
.align-self-center { align-self: center; }

.grid-span-all { grid-column: 1 / -1; }
.flex-row-wrap-gap-10 { display: flex; gap: 10px; flex-wrap: wrap; }

.card--success {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.pos-offscreen {
    position: absolute;
    left: -9999px;
    top: -9999px;
}

.sys-label {
  display: inline-block;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 12px;
  line-height: 1.4;
  color: #111827;
  vertical-align: middle;
  white-space: nowrap;
}

.sys-label--icon {
  padding: 2px 6px;
  min-width: 22px;
  text-align: center;
  font-size: 13px;
  line-height: 1.2;
}

.sys-label--updated {
  border-color: #bfdbfe;
  background: #eff6ff;
}

/* === 82_priorities_inline.css === */
/* =========================================================
   PRIORITIES (inline metrics + visible score)
   ========================================================= */

.priorities-inline-metrics {
  /* Block-level so the due date + category row always starts on the next line */
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.priorities-final-score {
  display: inline-block;
  min-width: 52px;
  text-align: center;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.1;
  border-radius: 12px;
  padding: 6px 10px;
  border: 1px solid rgba(0,0,0,0.08);
}

.priorities-metric-btn {
  appearance: none;
  border: 1px solid rgba(0,0,0,0.10);
  background: #ffffff;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 14px;
  line-height: 1.1;
  cursor: pointer;
}

.priorities-metric-btn:hover {
  filter: brightness(0.98);
}

.priorities-metric-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.priorities-metric-btn--override {
  font-weight: 650;
}

.priorities-metric-btn--auto {
  padding: 6px 9px;
  min-width: 34px;
}

.priorities-number-edit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.priorities-number-input {
  width: 84px;
  padding: 6px 8px;
  font-size: 14px;
}

.priorities-number-save,
.priorities-number-cancel {
  padding: 6px 10px;
}


.priorities-final-score {
  cursor: pointer;
  background: #ffffff;
}

.priorities-final-score:hover {
  filter: brightness(0.98);
}

.priorities-metric-auto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.10);
  font-size: 14px;
  line-height: 1.1;
  background: #ffffff;
}

.priorities-metric-auto--static {
  opacity: 0.75;
}

.priorities-metric-auto[data-action="clear-override"] {
  cursor: pointer;
}

.priorities-metric-auto[data-action="clear-override"]:hover {
  filter: brightness(0.98);
}


.priorities-pin-form {
  display: inline-flex;
  margin: 0;
}

.priorities-pin-btn {
  appearance: none;
  border: 1px solid rgba(0,0,0,0.10);
  background: #ffffff;
  border-radius: 999px;
  padding: 6px 9px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.priorities-pin-btn:hover {
  filter: brightness(0.98);
}

/* SVG icons inside icon-only buttons should inherit the button text color */
.priorities-svg {
  width: 18px;
  height: 18px;
  display: block;
}

.priorities-icon-btn--lg .priorities-svg {
  width: 22px;
  height: 22px;
}

.priorities-pin-divider {
  height: 0;
  border: 0;
  border-top: 2px solid rgba(0,0,0,0.10);
  margin: 14px 0;
}


/* === Alignment fixes === */

/*
  Task row layout invariant:
  - left action buttons (complete/postpone/pin) must live outside the H2 title
    and occupy a stable left column so title/metrics changes never shift them.
*/

.priorities-row-grid {
  display: grid;
  position: relative;
  /* fixed left controls + 50/50 split content + inline actions */
  grid-template-columns: 76px 1fr 1fr auto;
  /* title + priority values, then meta row */
  grid-template-rows: auto auto auto auto;
  column-gap: 12px;
  row-gap: 6px; /* breathing room between metrics and meta */
  min-width: 0; /* allow the grid to shrink so the actions column can stay alongside */
}

.priorities-success-row {
  grid-column: 2 / span 3;
  grid-row: 4;
  padding-top: 6px;
}

.psw {
  display: grid;
  position: relative;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  gap: 4px 10px;
  align-items: center;
}

.psw-meta {
  grid-column: 1 / -1;
  grid-row: 1;
  font-size: 12px;
  opacity: 0.85;
  line-height: 1.2;
}

.psw-meta .psw-pct {
  font-weight: 600;
}

.psw-label {
  font-size: 12px;
  white-space: nowrap;
  grid-row: 2;
}

.psw-track {
  grid-row: 2;
  position: relative;
  height: 12px;
  border-radius: 999px;
  background: rgba(0,0,0,0.10);
  outline: none;
  cursor: pointer;
}

.psw-track::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: var(--psw-pct, 50%);
  border-radius: 999px;
  background: hsl(var(--psw-hue, 60) 70% 45%);
  opacity: 0.75;
}

.psw-track::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(0,0,0,0.08) 0%, rgba(255,255,255,0.18) 100%);
  pointer-events: none;
}

.psw-track[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.7;
}

.psw-center {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 16px;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.25);
}

.psw-spot {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background: #111;
  border: 2px solid rgba(255,255,255,0.8);
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
  cursor: pointer;
}

.psw-spot-count {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  pointer-events: none;
}

.psw-tooltip {
  position: absolute;
  z-index: 50;
  min-width: 220px;
  max-width: 320px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.psw-tooltip h4 {
  margin: 0 0 8px 0;
  font-size: 12px;
}

.psw-tooltip .psw-tooltip__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.psw-tooltip .psw-tooltip__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
}

.psw-tooltip .psw-tooltip__btn {
  padding: 2px 8px;
  font-size: 12px;
}

.priorities-tree-row {
  position: relative;
}

.priorities-tree-row.is-child .priorities-tree-prefix {
  position: absolute;
  /* Bullet-like prefix should sit to the left of the whole task card (not inside the title).
     Align with the parent's left edge, even for deep nesting.
  */
  left: calc(-10px - var(--child-indent, 0px));
  top: 45px;
  text-align: right;
  opacity: 0.55;
  pointer-events: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 20px;
  line-height: 1;
}

/* SVG icons inside icon-only buttons should inherit button text color */
.priorities-svg {
  width: 18px;
  height: 18px;
  display: block;
}

.priorities-icon-btn--lg .priorities-svg {
  width: 20px;
  height: 20px;
}

/* Ensure the main content column can shrink; otherwise it may push the actions column below */
.materials-admin-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.materials-admin-row__main {
  min-width: 0;
}

.priorities-left-controls {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: grid;
  position: relative; /* anchor the related-tasks popover */
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  gap: 6px;
  align-content: start;
  justify-content: start;
}

/* Button ordering in the left controls column:
   [Complete][Postpone]
   [   -   ][Pin/Unpin]
*/
.priorities-action-complete { grid-column: 1; grid-row: 1; }
.priorities-action-postpone { grid-column: 2; grid-row: 1; }
.priorities-action-pin { grid-column: 2; grid-row: 2; }
.priorities-action-related { grid-column: 1; grid-row: 2; }

.priorities-related-popover {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  z-index: 20;
  width: max-content;
}

.priorities-popover-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}

.priorities-popover-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.10);
}

.priorities-title-cell {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}


.priorities-children-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 6px;
  margin-top: 2px;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  color: inherit;
}

.priorities-children-toggle .priorities-svg {
  width: 14px;
  height: 14px;
}

.priorities-children-count {
  font-size: 12px;
  opacity: 0.75;
  line-height: 1;
  min-width: 12px;
  text-align: center;
}

.priorities-tree-row[data-children-collapsed="1"] .priorities-children-toggle .priorities-svg {
  transform: rotate(-90deg);
}

.priorities-tree-row .priorities-children-toggle .priorities-svg {
  transition: transform 120ms ease-in-out;
}

.priorities-metrics-cell {
  grid-column: 2;
  grid-row: 2;
}

.priorities-notes-cell {
  grid-column: 3;
  grid-row: 1 / span 2; /* match title + priority values height */
  position: relative;
  display: flex;
  margin-right: 0;
}

.priorities-actions-cell {
  grid-column: 4;
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.priorities-meta-row {
  grid-column: 2;
  grid-row: 3;
  margin-top: 2px;
}

.priorities-reltype-cell {
  grid-column: 1;
  grid-row: 3;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.priorities-reltype-badge {
  width: 72px; /* match the left-controls column width without overflowing */
  justify-content: center;
  text-align: center;
  padding: 2px 6px;
}

.priorities-notes-btn {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px dashed rgba(0,0,0,0.18);
  border-radius: 12px;
  padding: 12px 34px 12px 12px;
  cursor: pointer;
  min-height: 100%;
}

.priorities-notes-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  line-height: 1.35;
  font-size: 13px;
}

.priorities-notes-cell.is-expanded .priorities-notes-text {
  -webkit-line-clamp: unset;
  max-height: none;
}

.priorities-notes-expand {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.9);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: none;
}

.priorities-notes-cell.can-expand .priorities-notes-expand,
.priorities-notes-cell.is-expanded .priorities-notes-expand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.priorities-notes-edit {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: start;
}

.priorities-notes-edit textarea {
  resize: none;
  min-height: 54px;
}

@media (max-width: 720px) {
  .priorities-row-grid {
    /* keep inline "More settings" button on the right even on mobile */
    grid-template-columns: 76px 1fr auto;
    grid-template-rows: auto auto auto auto;
  }

  .priorities-left-controls {
    grid-row: 1 / span 3;
  }

  .priorities-title-cell { grid-column: 2; grid-row: 1; }
  
.priorities-children-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 6px;
  margin-top: 2px;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  color: inherit;
}

.priorities-children-toggle .priorities-svg {
  width: 14px;
  height: 14px;
}

.priorities-children-count {
  font-size: 12px;
  opacity: 0.75;
  line-height: 1;
  min-width: 12px;
  text-align: center;
}

.priorities-tree-row[data-children-collapsed="1"] .priorities-children-toggle .priorities-svg {
  transform: rotate(-90deg);
}

.priorities-tree-row .priorities-children-toggle .priorities-svg {
  transition: transform 120ms ease-in-out;
}

.priorities-metrics-cell { grid-column: 2; grid-row: 2; }

  .priorities-notes-cell {
    grid-column: 2;
    grid-row: 3;
    min-height: 0;
    margin-right: 0;
  }

  .priorities-actions-cell {
    grid-column: 3;
    grid-row: 1 / span 3;
    align-items: flex-start;
    padding-top: 2px;
  }

  .priorities-meta-row {
    grid-column: 2;
    grid-row: 4;
  }
}

/* Actions column: consistent vertical alignment */
.priorities-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.priorities-actions .btn-secondary {
  line-height: 1.2;
}

/* Pin button should visually match Postpone */
.priorities-pin-btn {
  font-size: 13px;
  padding: 6px 10px;
}

/* Metrics row alignment */
.priorities-inline-metrics {
  align-items: flex-start;
}

/* Inline due-date row (date only) */
.priorities-due-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.priorities-related-prefix {
  font-size: 12px;
  opacity: 0.8;
  white-space: nowrap;
}

.priorities-due-btn {
  background: transparent;
  border: 1px dashed rgba(0,0,0,0.18);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  line-height: 1.2;
  cursor: pointer;
}

.priorities-due-btn--empty {
  opacity: 0.75;
}

.priorities-due-btn--overdue {
  font-weight: 600;
}

/* Inline category next to due date */
.priorities-cat-btn {
  background: transparent;
  border: 1px dashed rgba(0,0,0,0.18);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  line-height: 1.2;
  cursor: pointer;
}

.priorities-cat-btn--empty {
  opacity: 0.75;
}

.priorities-category-edit {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.priorities-category-edit .form-input {
  max-width: 200px;
}

/* Inline category select: reduce the reserved "arrow" padding so short labels don't look clipped */
.priorities-category-edit select.form-input {
  width: auto;
  min-width: 120px;
  padding-right: 22px;
}

/* Inline category select is compact; reduce the native-arrow right padding
   so it doesn't visually "cover" too much of the text in tight layouts. */
.priorities-category-edit select.form-input.priorities-category-select {
  width: auto;
  min-width: 120px;
  padding-right: 22px;
}

.priorities-due-edit {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.priorities-due-edit .form-input {
  max-width: 170px;
}

/* Final score aligns under title text */
.priorities-final-score {
  margin-left: 0;
}

/* Ensure second row layout */
.materials-admin-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-auto-rows: auto;
}

/* Move expand button to bottom-right of second line */
.priorities-icon-btn[data-action="toggle-details"] {
  align-self: flex-end;
  margin-top: 4px;
}


/* Header controls alignment (Complete / Postpone / Pin) */
.priorities-header-controls {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  margin-right: 8px;
  vertical-align: middle;
}

.priorities-header-form {
  display: inline-flex;
  margin: 0;
  vertical-align: middle;
}

.priorities-header-stack {
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
}

/* Align second-row metrics under the title start (after controls) */
/* Tighten gap between title and priority metrics */
/* Keep expand button bottom-right within 2-row grid */
.materials-admin-row {
  display: grid;
  /* Important: allow the main column to shrink so the actions column never wraps below.
     (Grid items have min-width:auto by default, which can push the actions down.) */
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto;
  column-gap: 12px;
}

.materials-admin-row__main {
  /* Reset any previous 2-row placement rules so actions stay in the same row. */
  grid-row: auto;
  min-width: 0;
}

.materials-admin-row__actions {
  /* Reset any previous 2-row placement rules so actions stay in the same row. */
  grid-row: auto;
  align-self: end;
  justify-self: end;
}

/* The priorities grid inside the main column must also be allowed to shrink. */
.priorities-row-grid {
  min-width: 0;
}

.priorities-icon-btn[data-action="toggle-details"] {
  margin-top: 0;
}


/* Title row: keep header controls vertically centered with the title */
 .session-list__title {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.priorities-title-btn {
  flex: 1 1 auto;
}

 .priorities-header-controls {
  flex: 0 0 auto;
  margin-right: 0;
  align-items: flex-start;
}

.priorities-header-stack {
  align-items: center;
}

.priorities-title-btn { padding-top: 2px; }


/* Metrics row: align under title start (after header controls) + compact spacing */
.priorities-row-metrics {
  margin-top: 8px;
}