/* =========================================================
   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;
}

/* =========================================================
   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;
}

/* =========================================================
   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;
    }
}

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

.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-width: 2px;
}

.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;
}

.testimonial-toggle {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    border: none;
    background: none;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
}

.testimonial-original {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    opacity: 0.9;
    /*white-space: pre-wrap;*/
}

.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;
}

/* =========================
   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;
}

/* =========================
   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;
}

/*
 * 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: none;
  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 {
  display: flex;
}

.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;
}


/* =========================
   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 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;
}

/* =========================================================
   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;
}

/* =========================
   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;
}